@demos-europe/demosplan-ui 0.3.19 → 0.3.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@demos-europe/demosplan-ui",
-  "version": "0.3.19",
+  "version": "0.3.21",
   "license": "MIT",
   "private": false,
   "description": "Vue components, Vue directives, Design Token and Scss files to build interfaces for demosPlan.",
@@ -44,7 +44,7 @@
     "plyr": "^3.7.2",
     "qs": "^6.11.0",
     "tippy.js": "^6.3.7",
-    "uuid": "^9.0.0",
+    "uuid": "^10.0.0",
     "v-tooltip": "2.1.3",
     "vue-click-outside": "^1.1.0",
     "vue-multiselect": "^2.1.6",
@@ -93,17 +93,18 @@
     "path": "^0.12.7",
     "postcss": "^8.4.26",
     "postcss-loader": "^8.0.0",
+    "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "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",
     "ts-jest": "^29.1.0",
     "ts-loader": "^9.4.4",
-    "typescript": "~5.4.2",
+    "typescript": "~5.5.3",
     "vue-jest": "^3.0.7",
     "vue-loader": "^15",
     "vue-template-compiler": "^2.7.15",

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/storybook-static/favicon.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="164" height="164">
+  <svg width="164" height="164" viewBox="0 0 164 164" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M22.467 147.762 17.5 15.402a8.062 8.062 0 0 1 7.553-8.35L137.637.016a8.061 8.061 0 0 1 8.565 8.047v144.23a8.063 8.063 0 0 1-8.424 8.054l-107.615-4.833a8.062 8.062 0 0 1-7.695-7.752Z" fill="#FF4785"></path>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="m128.785.57-15.495.968-.755 18.172a1.203 1.203 0 0 0 1.928 1.008l7.06-5.354 5.962 4.697a1.202 1.202 0 0 0 1.946-.987L128.785.569Zm-12.059 60.856c-2.836 2.203-23.965 3.707-23.965.57.447-11.969-4.912-12.494-7.889-12.494-2.828 0-7.59.855-7.59 7.267 0 6.534 6.96 10.223 15.13 14.553 11.607 6.15 25.654 13.594 25.654 32.326 0 17.953-14.588 27.871-33.194 27.871-19.201 0-35.981-7.769-34.086-34.702.744-3.163 25.156-2.411 25.156 0-.298 11.114 2.232 14.383 8.633 14.383 4.912 0 7.144-2.708 7.144-7.267 0-6.9-7.252-10.973-15.595-15.657C64.827 81.933 51.53 74.468 51.53 57.34c0-17.098 11.76-28.497 32.747-28.497 20.988 0 32.449 11.224 32.449 32.584Z" fill="#fff"></path>
+  </svg>
+  <style>@media (prefers-color-scheme: light) { :root { filter: none; } }</style>
+</svg>

package/storybook-static/index.html

@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+
+    <title>@storybook/cli - Storybook</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    
+    <link rel="icon" type="image/svg+xml" href="./favicon.svg" />
+    
+    <link
+      rel="prefetch"
+      href="./sb-common-assets/nunito-sans-regular.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin
+    />
+    <link
+      rel="prefetch"
+      href="./sb-common-assets/nunito-sans-bold.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin
+    />
+    <link rel="stylesheet" href="./sb-common-assets/fonts.css" />
+
+    <link href="./sb-manager/runtime.js" rel="modulepreload" />
+
+    
+    <link href="./sb-addons/links-0/manager-bundle.js" rel="modulepreload" />
+    
+    <link href="./sb-addons/essentials-controls-1/manager-bundle.js" rel="modulepreload" />
+    
+    <link href="./sb-addons/essentials-actions-2/manager-bundle.js" rel="modulepreload" />
+    
+    <link href="./sb-addons/essentials-backgrounds-3/manager-bundle.js" rel="modulepreload" />
+    
+    <link href="./sb-addons/essentials-viewport-4/manager-bundle.js" rel="modulepreload" />
+    
+    <link href="./sb-addons/essentials-toolbars-5/manager-bundle.js" rel="modulepreload" />
+    
+    <link href="./sb-addons/essentials-measure-6/manager-bundle.js" rel="modulepreload" />
+    
+    <link href="./sb-addons/essentials-outline-7/manager-bundle.js" rel="modulepreload" />
+       
+
+    <style>
+      #storybook-root[hidden] {
+        display: none !important;
+      }
+    </style>
+
+    
+  </head>
+  <body>
+    <div id="root"></div>
+
+    
+    <script>
+      
+        
+          window['FEATURES'] = {
+  "warnOnLegacyHierarchySeparator": true,
+  "buildStoriesJson": false,
+  "storyStoreV7": true,
+  "argTypeTargetsV7": true,
+  "legacyDecoratorFileOrder": false,
+  "disallowImplicitActionsInRenderV8": false
+};
+        
+      
+        
+          window['REFS'] = {};
+        
+      
+        
+          window['LOGLEVEL'] = "info";
+        
+      
+        
+          window['DOCS_OPTIONS'] = {
+  "defaultName": "Docs",
+  "autodocs": true
+};
+        
+      
+        
+          window['CONFIG_TYPE'] = "PRODUCTION";
+        
+      
+        
+      
+        
+      
+    </script>
+    
+
+    <script type="module">
+      import './sb-manager/runtime.js';
+
+      
+      import './sb-addons/links-0/manager-bundle.js';
+      
+      import './sb-addons/essentials-controls-1/manager-bundle.js';
+      
+      import './sb-addons/essentials-actions-2/manager-bundle.js';
+      
+      import './sb-addons/essentials-backgrounds-3/manager-bundle.js';
+      
+      import './sb-addons/essentials-viewport-4/manager-bundle.js';
+      
+      import './sb-addons/essentials-toolbars-5/manager-bundle.js';
+      
+      import './sb-addons/essentials-measure-6/manager-bundle.js';
+      
+      import './sb-addons/essentials-outline-7/manager-bundle.js';
+      
+    </script>
+
+    <link href="./sb-preview/runtime.js" rel="prefetch" as="script" />
+  </body>
+</html>