Feature: Editable

[epr3]

Implements #384.

This PR implements an Editable component with stories, tests and documentation.

The component anatomy is as following:

<EditableRoot>
  <EditableArea>
     <EditablePreview />
     <EditableInput />
  </EditableArea>
  <EditableEditTrigger />
  <EditableSubmitTrigger />
  <EditableCancelTrigger />
</EditableRoot>

I've skipped the properties related to styling like autoResize because I think that the styling is the responsibility of the user, this being a headless component library.

Any feedback is very appreciated. Thanks! 🚀

[zernonia]

@epr3 without the maxWidth & autoResize prop, how can we achieve this with CSS only yaa? I had some difficulty replicate what Zagjs has 😅

[epr3]

@zernonia You're right, the autoResize prop is not very achievable using CSS since it relies on a visibility: hidden on the EditablePreview component to increase the size of the wrapping EditableArea thus expanding the available area for the EditableInput.

I guess the maxWidth property is not required since you can add a class on EditableArea to implement it and I think there is an issue on the Zagjs implementation because setting maxWidth doesn't clamp the field at all.

Relevant Stackblitz: https://stackblitz.com/edit/vitejs-vite-xoxacp?file=src%2FApp.vue&terminal=dev

I am going to add the autoResize property plus variants to Chromatic and some tests today.

EDIT: autoResize has been implemented.

[zernonia]

Really nicely done @epr3 !! Thanks for the awesome job!