@demos-europe/demosplan-ui 0.3.20 → 0.3.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@demos-europe/demosplan-ui",
-  "version": "0.3.20",
+  "version": "0.3.21",
   "license": "MIT",
   "private": false,
   "description": "Vue components, Vue directives, Design Token and Scss files to build interfaces for demosPlan.",
@@ -98,7 +98,7 @@
     "react-dom": "^18.2.0",
     "storybook": "7.6.17",
     "storybook-addon-vue-slots": "^0.9.21",
-    "string-width": "7.1.0",
+    "string-width": "7.2.0",
     "style-dictionary": "^3.9.2",
     "style-loader": "^4.0.0",
     "tailwindcss": "^3.2.1",

package/src/components/DpButtonRow/DpButtonRow.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    :class="[`text--${align}`, $attrs.class]"
+    :class="[align, $attrs.class]"
     class="space-inline-s">
     <dp-button
       v-if="primary"
@@ -37,7 +37,7 @@ export default {
     /**
      * Specifies if the buttons should align left or right inside their container.
      */
-    align: {
+    alignment: {
       type: String,
       required: false,
       default: 'right'
@@ -123,6 +123,12 @@ export default {
       default: 'solid',
       validator: (prop) => ['solid', 'outline', 'subtle'].includes(prop)
     }
+  },
+
+  computed: {
+    align () {
+      return this.alignment === 'left' ? 'text-left' : 'text-right'
+    }
   }
 }
 </script>

package/src/components/DpEditor/DpEditor.vue

@@ -29,12 +29,13 @@
           <div :class="[readonly ? prefixClass('readonly'): '', prefixClass('menubar')]">
             <!-- Cut -->
             <button
-              @click="cut"
+              :aria-label="translations.cut"
               :class="prefixClass('menubar__button')"
+              data-cy="editor:cut"
+              :disabled="readonly"
               type="button"
-              :aria-label="translations.cut"
-              v-tooltip="translations.cut"
-              :disabled="readonly">
+              @click="cut"
+              v-tooltip="translations.cut">
               <i
                 :class="prefixClass('fa fa-scissors')"
                 aria-hidden="true" />
@@ -42,24 +43,26 @@
             &#10072;
             <!-- Undo -->
             <button
-              @click="editor.chain().focus().undo().run()"
+              :aria-label="translations.undo"
               :class="prefixClass('menubar__button')"
+              data-cy="editor:undo"
+              :disabled="readonly"
               type="button"
-              :aria-label="translations.undo"
-              v-tooltip="translations.undo"
-              :disabled="readonly">
+              @click="editor.chain().focus().undo().run()"
+              v-tooltip="translations.undo">
               <i
                 :class="prefixClass('fa fa-reply')"
                 aria-hidden="true" />
             </button>
             <!-- Redo -->
             <button
-              @click="editor.chain().focus().redo().run()"
+              :aria-label="translations.redo"
               :class="prefixClass('menubar__button')"
+              data-cy="editor:redo"
+              :disabled="readonly"
               type="button"
-              :aria-label="translations.redo"
-              v-tooltip="translations.redo"
-              :disabled="readonly">
+              @click="editor.chain().focus().redo().run()"
+              v-tooltip="translations.redo">
               <i
                 :class="prefixClass('fa fa-share')"
                 aria-hidden="true" />
@@ -69,12 +72,13 @@
               <!-- Bold -->
 
               <button
-                @click="editor.chain().focus().toggleBold().run()"
+                :aria-label="translations.bold"
                 :class="[editor.isActive('bold') ? prefixClass('is-active'): '', prefixClass('menubar__button')]"
+                data-cy="editor:bold"
+                :disabled="readonly"
                 type="button"
-                :aria-label="translations.bold"
-                v-tooltip="translations.bold"
-                :disabled="readonly">
+                @click="editor.chain().focus().toggleBold().run()"
+                v-tooltip="translations.bold">
                 <i
                   :class="prefixClass('fa fa-bold')"
                   aria-hidden="true" />
@@ -82,24 +86,26 @@
 
               <!-- Italic -->
               <button
-                @click="editor.chain().focus().toggleItalic().run()"
+                :aria-label="translations.italic"
                 :class="[editor.isActive('italic') ? prefixClass('is-active') : '', prefixClass('menubar__button') ]"
+                data-cy="editor:italic"
+                :disabled="readonly"
                 type="button"
-                :aria-label="translations.italic"
-                v-tooltip="translations.italic"
-                :disabled="readonly">
+                @click="editor.chain().focus().toggleItalic().run()"
+                v-tooltip="translations.italic">
                 <i
                   :class="prefixClass('fa fa-italic')"
                   aria-hidden="true" />
               </button>
               <!-- Underline -->
               <button
-                @click="editor.chain().focus().toggleUnderline().run()"
+                :aria-label="translations.underline"
                 :class="[editor.isActive('underline') ? prefixClass('is-active') : '', prefixClass('menubar__button')]"
+                data-cy="editor:underline"
+                :disabled="readonly"
                 type="button"
-                :aria-label="translations.underline"
-                v-tooltip="translations.underline"
-                :disabled="readonly">
+                @click="editor.chain().focus().toggleUnderline().run()"
+                v-tooltip="translations.underline">
                 <i
                   :class="prefixClass('fa fa-underline')"
                   aria-hidden="true" />
@@ -108,12 +114,13 @@
             <!-- Strike through -->
             <button
               v-if="toolbar.strikethrough"
-              @click="editor.chain().focus().toggleStrike().run()"
+              :aria-label="translations.strikethrough"
               :class="[editor.isActive('strike') ? prefixClass('is-active') : '', prefixClass('menubar__button')]"
+              data-cy="editor:strikethrough"
+              :disabled="readonly"
               type="button"
-              :aria-label="translations.strikethrough"
-              v-tooltip="translations.strikethrough"
-              :disabled="readonly">
+              @click="editor.chain().focus().toggleStrike().run()"
+              v-tooltip="translations.strikethrough">
               <i
                 :class="prefixClass('fa fa-strikethrough')"
                 aria-hidden="true" />
@@ -123,10 +130,10 @@
               :class="prefixClass('inline-block relative')">
               <button
                 :class="[editor.isActive('insert') || editor.isActive('delete') ? prefixClass('is-active') : '', prefixClass('menubar__button')]"
+                :disabled="readonly"
                 type="button"
                 @click.stop="toggleSubMenu('diffMenu', !diffMenu.isOpen)"
-                @keydown.tab.shift.exact="toggleSubMenu('diffMenu', false)"
-                :disabled="readonly">
+                @keydown.tab.shift.exact="toggleSubMenu('diffMenu', false)">
                 <dp-icon
                   class="align-text-top inline-block"
                   icon="highlighter" />
@@ -355,6 +362,7 @@ import DpResizableImage from './DpResizableImage'
 import { handleWordPaste } from './libs/handleWordPaste'
 import { maxlengthHint } from '~/utils/'
 import { prefixClassMixin } from '~/mixins'
+import { v4 as uuid } from 'uuid'
 
 export default {
   name: 'DpEditor',
@@ -1041,6 +1049,7 @@ export default {
 
   mounted () {
     this.editor = new Editor({
+      id: uuid(),
       editable: !this.readonly,
       extensions: this.collectExtensions(),
       content: this.currentValue,
@@ -1089,9 +1098,13 @@ export default {
       }
     })
 
-    this.$root.$on('open-image-alt-modal', (e, id) => {
-      this.editingImage = id
-      this.openUploadModal({ editAltOnly: true, currentAlt: e.target.getAttribute('alt') })
+    this.$root.$on('open-image-alt-modal', ({ event, imgId, editorId }) => {
+      if (this.editor.options.id !== editorId) {
+        return
+      }
+
+      this.editingImage = imgId
+      this.openUploadModal({ editAltOnly: true, currentAlt: event.target.getAttribute('alt'), imgSrc: event.target.getAttribute('src') })
     })
     /*
      * On form-reset the editor has to be cleared manually.

package/src/components/DpEditor/DpResizableImage.vue

@@ -7,9 +7,10 @@
     <img
       :alt="node.attrs.alt"
       ref="image"
+      data-cy="editor:resizableImage"
       :src="node.attrs.src"
       :title="imageTitle"
-      @click.ctrl="$root.$emit('open-image-alt-modal', $event, id)">
+      @click.ctrl="$root.$emit('open-image-alt-modal',  { event: $event, imgId: id, editorId: editor.options.id })">
   </node-view-wrapper>
 </template>
 
@@ -59,7 +60,7 @@ export default {
       img.onload = () => {
         this.ratioFactor = img.width / img.height
 
-        // If the width is not set jet, set it to the image original dimensions
+        // If the width is not set yet, set it to the image original dimensions
         if (updateSize) {
           this.updateImageDimensions()
         }
@@ -89,11 +90,16 @@ export default {
 
     this.initResizeObserver()
 
-    // May or not may be necessary
-    // this.$refs.imagewrapper.$el.style.width = this.node.attrs.width + 'px'
+    this.$refs.imagewrapper.$el.style.width = this.node.attrs.width + 'px'
 
     const updateSize = (this.node.attrs.height > 0) === false || this.node.attrs.height === Infinity
     this.setRatio(updateSize)
+  },
+
+  beforeDestroy () {
+    if (this.observer) {
+      this.observer.disconnect()
+    }
   }
 }
 </script>

package/src/components/DpEditor/DpUploadModal.vue

@@ -1,7 +1,9 @@
 <template>
   <dp-modal
     ref="uploadModal"
-    content-classes="u-2-of-3-lap-up u-1-of-2-desk-up">
+    content-classes="w-fit"
+    data-cy="editor:uploadModal"
+    @modal:toggled="(isOpen) => { if (!isOpen) reset() }">
     <template>
       <h3
         v-if="editAltTextOnly"
@@ -13,7 +15,7 @@
         class="u-mb">
         {{ translations.insertImage }}
       </h3>
-      <div v-show="editAltTextOnly === false">
+      <div v-if="!editAltTextOnly">
         <dp-upload-files
           allowed-file-types="img"
           :basic-auth="basicAuth"
@@ -26,25 +28,34 @@
           :tus-endpoint="tusEndpoint"
           @upload-success="setFile" />
       </div>
+      <div v-else>
+        <img
+          :alt="altText"
+          class="mb-4"
+          :src="this.imgSrc">
+      </div>
       <dp-input
         id="altText"
         v-model="altText"
         class="u-mb"
+        data-cy="uploadModal:altText"
         :label="{
           hint: translations.altTextHint,
           text: translations.altText,
         }" />
-      <div class="u-mt text--right w-full space-inline-s">
+      <div class="u-mt text-right w-full space-inline-s">
         <button
           class="btn btn--primary"
+          data-cy="uploadModal:save"
           type="button"
-          @click="emitAndClose()">
-          {{ Translator.trans('insert') }}
+          @click="emitAndClose()"
+          v-text="editAltTextOnly ? Translator.trans('save') : Translator.trans('insert')">
         </button>
         <button
           class="btn btn--secondary"
+          data-cy="uploadModal:abort"
           type="button"
-          @click="resetAndClose()">
+          @click="closeAndReset()">
           {{ Translator.trans('abort') }}
         </button>
       </div>
@@ -96,6 +107,7 @@ export default {
       fileUrl: '',
       altText: '',
       editAltTextOnly: false,
+      imgSrc: '',
       translations: {
         altText: de.altText.default,
         altTextHint: de.image.alt.explanation,
@@ -107,21 +119,26 @@ export default {
   },
 
   methods: {
+    closeAndReset () {
+      this.reset()
+      this.$emit('close')
+      this.toggleModal()
+    },
+
     emitAndClose () {
       if (this.editAltTextOnly) {
         this.$emit('add-alt', this.altText)
       } else if (this.fileUrl) {
         this.$emit('insert-image', this.fileUrl, this.altText)
       }
-      this.resetAndClose()
+
+      this.closeAndReset()
     },
 
-    resetAndClose () {
+    reset () {
       this.altText = ''
       this.fileUrl = ''
       this.editAltTextOnly = false
-      this.$emit('close')
-      this.toggleModal()
     },
 
     setFile ({ hash }) {
@@ -131,13 +148,10 @@ export default {
     },
 
     toggleModal (data) {
-      const willCloseModal = this.$refs.uploadModal.isOpenModal === true
-
-      if (willCloseModal) {
-        this.$refs.uploader.clearFilesList()
-      } else if (data) {
+      if (data) {
         this.editAltTextOnly = data.editAltOnly
         this.altText = data.currentAlt
+        this.imgSrc = data.imgSrc
       }
 
       this.$refs.uploadModal.toggle()

package/src/components/DpUploadFiles/DpUpload.vue

@@ -1,5 +1,7 @@
 <template>
-  <div ref="fileInput" />
+  <div
+    :data-cy="dataCy"
+    ref="fileInput" />
 </template>
 
 <script>
@@ -56,6 +58,12 @@ export default {
       required: false
     },
 
+    dataCy: {
+      type: String,
+      required: false,
+      default: 'upload'
+    },
+
     /**
      * Maximum file size in bytes for each individual file
      */

package/src/components/DpUploadFiles/DpUploadFiles.vue

@@ -16,6 +16,7 @@
       :basic-auth="basicAuth"
       :chunk-size="chunkSize"
       :class="[prefixClass('layout__item u-1-of-1-palm'), prefixClass(sideBySide ? 'u-1-of-2' : 'u-1-of-1')]"
+      :data-cy="dataCy"
       :max-number-of-files="maxNumberOfFiles"
       :max-file-size="maxFileSize"
       :translations="translations"
@@ -92,6 +93,12 @@ export default {
       required: false
     },
 
+    dataCy: {
+      type: String,
+      required: false,
+      default: 'uploadFile'
+    },
+
     /**
      * Use to conditionally validate a required upload field
      * "required" and "needsHiddenInput" need to be set to true in that case

package/tokens/dist/js/boxShadow.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 17 Jul 2024 14:34:55 GMT
+ * Generated on Mon, 22 Jul 2024 09:37:27 GMT
  */
 
 module.exports = {

package/tokens/dist/js/breakpoints.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 17 Jul 2024 14:34:55 GMT
+ * Generated on Mon, 22 Jul 2024 09:37:27 GMT
  */
 
 module.exports = {

package/tokens/dist/js/color.brand.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 17 Jul 2024 14:34:55 GMT
+ * Generated on Mon, 22 Jul 2024 09:37:27 GMT
  */
 
 module.exports = {

package/tokens/dist/js/color.data.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 17 Jul 2024 14:34:55 GMT
+ * Generated on Mon, 22 Jul 2024 09:37:27 GMT
  */
 
 module.exports = {

package/tokens/dist/js/color.palette.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 17 Jul 2024 14:34:55 GMT
+ * Generated on Mon, 22 Jul 2024 09:37:27 GMT
  */
 
 module.exports = {

package/tokens/dist/js/color.ui-tailwind.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 17 Jul 2024 14:34:55 GMT
+ * Generated on Mon, 22 Jul 2024 09:37:27 GMT
  */
 
 module.exports = {
@@ -658,13 +658,13 @@ module.exports = {
         "status": {
           "progress": {
             "DEFAULT": {
-              "$description": "Text color to communicate that something is in progress (ex: status-progress-text).",
+              "$description": "Text color to communicate that something is in progress.",
               "value": "#005eb1",
               "$type": "color",
               "filePath": "tokens/src/color/color.ui-tailwind.json",
               "isSource": true,
               "original": {
-                "$description": "Text color to communicate that something is in progress (ex: status-progress-text).",
+                "$description": "Text color to communicate that something is in progress.",
                 "value": "{color.palette.blue.dark-1}",
                 "$type": "color"
               },
@@ -685,14 +685,42 @@ module.exports = {
                 "DEFAULT"
               ]
             },
+            "fill": {
+              "$description": "Fill color to communicate that something is in progress. Use for charts.",
+              "value": "#006fd0",
+              "$type": "color",
+              "filePath": "tokens/src/color/color.ui-tailwind.json",
+              "isSource": true,
+              "original": {
+                "$description": "Fill color to communicate that something is in progress. Use for charts.",
+                "value": "{color.palette.blue.base}",
+                "$type": "color"
+              },
+              "name": "ColorUiTailwindTextColorStatusProgressFill",
+              "attributes": {
+                "category": "color",
+                "type": "ui-tailwind",
+                "item": "textColor",
+                "subitem": "status",
+                "state": "progress"
+              },
+              "path": [
+                "color",
+                "ui-tailwind",
+                "textColor",
+                "status",
+                "progress",
+                "fill"
+              ]
+            },
             "icon": {
-              "$description": "Icon color to communicate that something is in progress (ex: status-progress-fill).",
+              "$description": "Icon color to communicate that something is in progress.",
               "value": "#006fd0",
               "$type": "color",
               "filePath": "tokens/src/color/color.ui-tailwind.json",
               "isSource": true,
               "original": {
-                "$description": "Icon color to communicate that something is in progress (ex: status-progress-fill).",
+                "$description": "Icon color to communicate that something is in progress.",
                 "value": "{color.palette.blue.base}",
                 "$type": "color"
               },
@@ -743,6 +771,34 @@ module.exports = {
                 "DEFAULT"
               ]
             },
+            "fill": {
+              "$description": "Fill color to communicate something has moved or changed. Use for charts.",
+              "value": "#ffbe24",
+              "$type": "color",
+              "filePath": "tokens/src/color/color.ui-tailwind.json",
+              "isSource": true,
+              "original": {
+                "$description": "Fill color to communicate something has moved or changed. Use for charts.",
+                "value": "{color.palette.yellow.base}",
+                "$type": "color"
+              },
+              "name": "ColorUiTailwindTextColorStatusChangedFill",
+              "attributes": {
+                "category": "color",
+                "type": "ui-tailwind",
+                "item": "textColor",
+                "subitem": "status",
+                "state": "changed"
+              },
+              "path": [
+                "color",
+                "ui-tailwind",
+                "textColor",
+                "status",
+                "changed",
+                "fill"
+              ]
+            },
             "icon": {
               "$description": "Icon color to communicate something has moved or changed.",
               "value": "#d09200",
@@ -801,6 +857,34 @@ module.exports = {
                 "DEFAULT"
               ]
             },
+            "fill": {
+              "$description": "Fill color to communicate that an action or validation has failed on an item. Use for charts.",
+              "value": "#e52222",
+              "$type": "color",
+              "filePath": "tokens/src/color/color.ui-tailwind.json",
+              "isSource": true,
+              "original": {
+                "$description": "Fill color to communicate that an action or validation has failed on an item. Use for charts.",
+                "value": "{color.palette.red.base}",
+                "$type": "color"
+              },
+              "name": "ColorUiTailwindTextColorStatusFailedFill",
+              "attributes": {
+                "category": "color",
+                "type": "ui-tailwind",
+                "item": "textColor",
+                "subitem": "status",
+                "state": "failed"
+              },
+              "path": [
+                "color",
+                "ui-tailwind",
+                "textColor",
+                "status",
+                "failed",
+                "fill"
+              ]
+            },
             "icon": {
               "$description": "Icon color to communicate that an action or validation has failed on an item.",
               "value": "#e52222",
@@ -859,6 +943,34 @@ module.exports = {
                 "DEFAULT"
               ]
             },
+            "fill": {
+              "$description": "Fill color to communicate that an action has completed, or something has been added. Use for charts.",
+              "value": "#228b22",
+              "$type": "color",
+              "filePath": "tokens/src/color/color.ui-tailwind.json",
+              "isSource": true,
+              "original": {
+                "$description": "Fill color to communicate that an action has completed, or something has been added. Use for charts.",
+                "value": "{color.palette.green.base}",
+                "$type": "color"
+              },
+              "name": "ColorUiTailwindTextColorStatusCompleteFill",
+              "attributes": {
+                "category": "color",
+                "type": "ui-tailwind",
+                "item": "textColor",
+                "subitem": "status",
+                "state": "complete"
+              },
+              "path": [
+                "color",
+                "ui-tailwind",
+                "textColor",
+                "status",
+                "complete",
+                "fill"
+              ]
+            },
             "icon": {
               "$description": "Icon color to communicate that an action has completed, or something has been added.",
               "value": "#228b22",
@@ -917,6 +1029,34 @@ module.exports = {
                 "DEFAULT"
               ]
             },
+            "fill": {
+              "$description": "Fill color to communicate neutral or unknown status. Use for charts.",
+              "value": "#757575",
+              "$type": "color",
+              "filePath": "tokens/src/color/color.ui-tailwind.json",
+              "isSource": true,
+              "original": {
+                "$description": "Fill color to communicate neutral or unknown status. Use for charts.",
+                "value": "{color.palette.neutral.base}",
+                "$type": "color"
+              },
+              "name": "ColorUiTailwindTextColorStatusNeutralFill",
+              "attributes": {
+                "category": "color",
+                "type": "ui-tailwind",
+                "item": "textColor",
+                "subitem": "status",
+                "state": "neutral"
+              },
+              "path": [
+                "color",
+                "ui-tailwind",
+                "textColor",
+                "status",
+                "neutral",
+                "fill"
+              ]
+            },
             "icon": {
               "$description": "Icon color to communicate neutral or unknown status.",
               "value": "#757575",