#326 Setup model binding

src/components/dumb/OeEditor.vue

@@ -54,11 +54,6 @@
       :options="options"
       @blur="model = quill?.getSemanticHTML()"
     />
-
-    <br />
-    <h5>Output</h5>
-    <br />
-    <pre>{{ model }}</pre>
   </div>
 </template>
 
@@ -118,7 +113,7 @@ const options = {
 };
 
 // Model
-const model = ref('<p>Hello Quilly!</p>');
+const model = defineModel({ type: String });
 
 onMounted(() => {
   quill = editor.value?.initialize(Quill) as Quill;

src/stories/dumb-components/editor.stories.ts

@@ -1,4 +1,5 @@
 import '@/scss/main.scss';
+import { ref } from 'vue';
 import OeEditor from '@components/dumb/OeEditor.vue';
 import type { Meta, StoryObj } from '@storybook/vue3';
 
@@ -19,6 +20,16 @@ const meta: Meta<typeof OeEditor> = {
   }),
   // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/autodocs
   tags: ['autodocs'],
+  argTypes: {
+    modelValue: {
+      description: 'HTML input',
+      control: 'text',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '' },
+      },
+    },
+  },
 };
 
 export default meta;
@@ -28,4 +39,21 @@ type Story = StoryObj<typeof OeEditor>;
  * See https://storybook.js.org/docs/vue/api/csf
  * to learn how to use render functions.
  */
-export const Default: Story = {};
+export const Default: Story = {
+  render: () => ({
+    components: {
+      OeEditor,
+    },
+    setup() {
+      const model = ref('<p>Hello Quilly!</p>');
+      return { model };
+    },
+    template: `
+      <oe-editor id="editor-1" v-model="model" />
+
+      <br />
+      <h5>Output</h5>
+      <p class="vl-u-spacer-top vl-u-spacer-bottom--large">{{ model }}</p>
+    `,
+  }),
+};