#326 Add disabled state

OnroerendErfgoed · Oct 7, 2024 · 74a771b · 74a771b
1 parent 17eb19f
commit 74a771b
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 1 deletion.
diff --git a/src/components/dumb/OeEditor.vue b/src/components/dumb/OeEditor.vue
@@ -1,6 +1,6 @@
 <template>
   <div :id="props.id">
-    <div :id="`${props.id}-toolbar`">
+    <div :id="`${props.id}-toolbar`" :class="{ 'ql-toolbar--disabled': props.modDisabled }">
       <div class="toolbar-group">
         <button v-if="props.toolbar.undo" class="ql-undo" title="Undo">
           <font-awesome-icon :icon="['fas', 'rotate-left']" />
@@ -191,6 +191,15 @@ watch(
     margin-right: 0;
   }
 
+  &--disabled {
+    cursor: not-allowed;
+
+    * {
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+  }
+
   .toolbar-group {
     display: flex;
     width: 100%;

diff --git a/src/stories/dumb-components/editor.stories.ts b/src/stories/dumb-components/editor.stories.ts
@@ -96,3 +96,18 @@ export const FulloptionToolbar: Story = {
     `,
   }),
 };
+
+export const DisabledState: Story = {
+  render: () => ({
+    components: {
+      OeEditor,
+    },
+    setup() {
+      const model = ref('');
+      return { model };
+    },
+    template: `
+      <oe-editor mod-disabled id="editor-3" v-model="model" />
+    `,
+  }),
+};