@demos-europe/demosplan-ui 0.4.12 → 0.4.13

package/src/components/DpEditor/DpResizableImage.vue

@@ -1,16 +1,16 @@
 <template>
   <node-view-wrapper
+    ref="imagewrapper"
     as="span"
     class="resizable-image"
-    ref="imagewrapper"
     tabindex="1">
     <img
-      :alt="node.attrs.alt"
       ref="image"
+      :alt="node.attrs.alt"
       data-cy="editor:resizableImage"
       :src="node.attrs.src"
       :title="imageTitle"
-      @click.ctrl="$root.$emit('open-image-alt-modal',  { event: $event, imgId: id, editorId: editor.options.id })">
+      @click.ctrl="$root.$emit('open-image-alt-modal', { event: $event, imgId: id, editorId: editor.options.id })">
   </node-view-wrapper>
 </template>
 
@@ -22,12 +22,12 @@ import { v4 as uuid } from 'uuid'
 export default {
   name: 'DpResizableImage',
 
-  props: nodeViewProps,
-
   components: {
     NodeViewWrapper
   },
 
+  props: nodeViewProps,
+
   data () {
     return {
       id: uuid(),
@@ -97,7 +97,7 @@ export default {
     this.setRatio(updateSize)
   },
 
-  beforeDestroy () {
+  beforeUnmount () {
     if (this.observer) {
       this.observer.disconnect()
     }

package/src/components/DpEditor/DpUploadModal.vue

@@ -18,14 +18,14 @@
       v-if="!editAltTextOnly"
       class="mb-2">
       <dp-upload-files
+        id="imageFile"
+        ref="uploader"
         allowed-file-types="img"
         :basic-auth="basicAuth"
-        id="imageFile"
         :get-file-by-hash="getFileByHash"
         :max-file-size="20 * 1024 * 1024/* 20 MiB */"
         :max-number-of-files="1"
-        ref="uploader"
-        :translations="{ dropHereOr: translations.uploadImage('20MB')}"
+        :translations="{ dropHereOr: translations.uploadImage('20MB') }"
         :tus-endpoint="tusEndpoint"
         @upload-success="setFile" />
     </div>
@@ -33,7 +33,7 @@
       <img
         :alt="altText"
         class="mb-4"
-        :src="this.imgSrc">
+        :src="imgSrc">
     </div>
     <dp-input
       id="altText"
@@ -50,8 +50,7 @@
         data-cy="uploadModal:save"
         type="button"
         @click="emitAndClose"
-        v-text="editAltTextOnly ? translations.save : translations.insert">
-      </button>
+        v-text="editAltTextOnly ? translations.save : translations.insert" />
       <button
         class="btn btn--secondary"
         data-cy="uploadModal:abort"
@@ -72,12 +71,6 @@ import { DpUploadFiles } from '~/components/DpUploadFiles'
 export default {
   name: 'DpUploadModal',
 
-  emits: [
-    'add-alt',
-    'close',
-    'insert-image'
-  ],
-
   components: {
     DpInput,
     DpModal,
@@ -108,6 +101,12 @@ export default {
     }
   },
 
+  emits: [
+    'add-alt',
+    'close',
+    'insert-image'
+  ],
+
   data () {
     return {
       fileUrl: '',

package/src/components/DpEditor/MentionList.vue

@@ -2,17 +2,19 @@
   <ul class="o-list suggestion__popup">
     <template v-if="items.length">
       <li
-        class="o-list__item suggestion__list-item u-ph-0_5 u-pv-0_25"
-        :class="{ 'suggestion__list-item--is-active': index === selectedIndex }"
         v-for="(item, index) in items"
         :key="item.id"
+        class="o-list__item suggestion__list-item u-ph-0_5 u-pv-0_25"
+        :class="{ 'suggestion__list-item--is-active': index === selectedIndex }"
         @click="selectItem(index)">
         <button class="btn--blank">
           {{ item.label }}
         </button>
       </li>
     </template>
-    <li class="o-list__item suggestion__list-item" v-else>
+    <li
+      v-else
+      class="o-list__item suggestion__list-item">
       No result
     </li>
   </ul>

package/src/components/DpEditor/libs/editorObscure.js

@@ -47,8 +47,8 @@ export default Mark.create({
   addInputRules () {
     return [
       markInputRule({
-       find: markInputRegex,
-       type: this.type
+        find: markInputRegex,
+        type: this.type
       })
     ]
   },

package/src/components/DpFlyout/DpFlyout.vue

@@ -1,8 +1,8 @@
 <template>
   <span
-    class="o-flyout"
-    v-on-click-outside="close"
     ref="target"
+    v-on-click-outside="close"
+    class="o-flyout"
     :class="{
       'o-flyout--left': align === 'left',
       'o-flyout--right': align === 'right',
@@ -22,7 +22,7 @@
       @click="toggle">
       <slot
         name="trigger"
-        v-bind:isExpanded="isExpanded">
+        :is-expanded="isExpanded">
         <i class="fa fa-ellipsis-h" />
       </slot>
     </button>
@@ -44,8 +44,6 @@ export default {
     onClickOutside: vOnClickOutside
   },
 
-  emits: ['close', 'open'],
-
   props: {
     align: {
       required: false,
@@ -92,6 +90,8 @@ export default {
     },
   },
 
+  emits: ['close', 'open'],
+
   data () {
     return {
       isExpanded: false

package/src/components/DpIcon/util/iconConfig.ts

@@ -4,23 +4,23 @@ import {
   PhArrowRight,
   PhArrowsClockwise,
   PhArrowUp,
+  PhCaretDoubleDown,
+  PhCaretDoubleUp,
   PhCaretDown,
   PhCaretLeft,
   PhCaretRight,
   PhCaretUp,
-  PhCaretDoubleDown,
-  PhCaretDoubleUp,
   PhCheck,
   PhCheckCircle,
   PhCircleNotch,
   PhClock,
+  PhClockCounterClockwise,
   PhCopy,
   PhCornersIn,
   PhCornersOut,
-  PhClockCounterClockwise,
-  PhDownloadSimple,
   PhDotsSixVertical,
   PhDotsThree,
+  PhDownloadSimple,
   PhEnvelopeSimple,
   PhFaders,
   PhFile,
@@ -35,8 +35,8 @@ import {
   PhPencilSimple,
   PhPhone,
   PhPlus,
-  PhRobot,
   PhQuestion,
+  PhRobot,
   PhSignOut,
   PhTag,
   PhTrash,
@@ -53,7 +53,7 @@ import {
   IconName,
   IconProportion,
   IconSize,
-  PhosphorIconName} from '../../../../types'
+  PhosphorIconName } from '../../../../types'
 import type { Component } from 'vue'
 
 // ICONS
@@ -91,24 +91,24 @@ const mappedIcons: Record<PhosphorIconName | AliasedPhosphorIconName, Component>
   'warning': PhWarning,
   'x': PhX,
   'x-circle': PhXCircle,
-  'arrows-clockwise': PhArrowsClockwise, // alias: refresh
-  'circle-notch': PhCircleNotch, // alias: spinner
-  'clock-counter-clockwise': PhClockCounterClockwise, // alias: history
-  'corners-in': PhCornersIn, // alias: compress
-  'corners-out': PhCornersOut, // alias: expand
-  'dots-six-vertical': PhDotsSixVertical, // alias: drag-handle
-  'download-simple': PhDownloadSimple, // alias: download
-  'envelope-simple': PhEnvelopeSimple, // alias: mail
-  'gear-six': PhGearSix, // alias: settings
-  'lock-simple': PhLockSimple, // alias: lock
-  'lock-simple-open': PhLockSimpleOpen, // alias: unlock
-  'magnifying-glass': PhMagnifyingGlass, // alias: search
-  'pencil-simple': PhPencilSimple, // alias: edit
-  'robot': PhRobot, // alias: ai
-  'warning-diamond': PhWarningDiamond, // alias: severe
+  'arrows-clockwise': PhArrowsClockwise, // Alias: refresh
+  'circle-notch': PhCircleNotch, // Alias: spinner
+  'clock-counter-clockwise': PhClockCounterClockwise, // Alias: history
+  'corners-in': PhCornersIn, // Alias: compress
+  'corners-out': PhCornersOut, // Alias: expand
+  'dots-six-vertical': PhDotsSixVertical, // Alias: drag-handle
+  'download-simple': PhDownloadSimple, // Alias: download
+  'envelope-simple': PhEnvelopeSimple, // Alias: mail
+  'gear-six': PhGearSix, // Alias: settings
+  'lock-simple': PhLockSimple, // Alias: lock
+  'lock-simple-open': PhLockSimpleOpen, // Alias: unlock
+  'magnifying-glass': PhMagnifyingGlass, // Alias: search
+  'pencil-simple': PhPencilSimple, // Alias: edit
+  'robot': PhRobot, // Alias: ai
+  'warning-diamond': PhWarningDiamond, // Alias: severe
 }
 
-// icon names that are used as aliases - the phosphor icon has a different name
+// Icon names that are used as aliases - the phosphor icon has a different name
 const mappedIconAliases: Record<IconAlias, Component> = {
   'ai': PhRobot,
   'cancel': PhX,
@@ -157,12 +157,12 @@ const iconsProportions: Record<string, IconProportion> = {
 }
 
 const aliasedIconsProportions: Record<string, IconProportion> = {
-  'chevron-down': 'landscape', // alias for caret-down
-  'chevron-left': 'portrait', // alias for caret-left
-  'chevron-right': 'portrait', // alias for caret-right
-  'chevron-up': 'landscape', // alias for caret-up
-  'drag-handle': 'portrait', // alias for dots-six-vertical
-  'mail': 'landscape', // alias for envelope-simple
+  'chevron-down': 'landscape', // Alias for caret-down
+  'chevron-left': 'portrait', // Alias for caret-left
+  'chevron-right': 'portrait', // Alias for caret-right
+  'chevron-up': 'landscape', // Alias for caret-up
+  'drag-handle': 'portrait', // Alias for dots-six-vertical
+  'mail': 'landscape', // Alias for envelope-simple
 }
 
 // EXPORTS

package/src/components/DpInlineNotification/DpInlineNotification.vue

@@ -17,8 +17,8 @@
         v-if="dismissible"
         class="btn--blank o-link--default weight--bold"
         :data-cy="`${dataCy}:hideHint`"
-        v-text="translations.hintDismiss"
-        @click="dismiss" />
+        @click="dismiss"
+        v-text="translations.hintDismiss" />
     </div>
   </div>
   <div

package/src/components/DpLabel/DpLabel.vue

@@ -3,7 +3,9 @@
     :class="classes"
     :for="labelFor">
     <span>
-      <span v-cleanhtml="text" /><span v-if="required" aria-hidden="true">*</span>
+      <span v-cleanhtml="text" /><span
+        v-if="required"
+        aria-hidden="true">*</span>
       <dp-contextual-help
         v-if="tooltip"
         :class="prefixClass('ml-0.5')"
@@ -15,8 +17,8 @@
       <span
         v-for="(hint, i) in hints"
         :key="i"
-        :class="prefixClass('inline-block')"
-        v-cleanhtml="hint" />
+        v-cleanhtml="hint"
+        :class="prefixClass('inline-block')" />
     </span>
   </label>
 </template>

package/src/components/DpModal/DpModal.vue

@@ -22,8 +22,8 @@
         </button>
         <div :class="prefixClass('o-modal__body ' + contentBodyClasses)">
           <h2
-            :class="prefixClass('font-size-h1 border--bottom u-pb-0_25 ' + contentHeaderClasses)"
-            v-if="hasHeader">
+            v-if="hasHeader"
+            :class="prefixClass('font-size-h1 border--bottom u-pb-0_25 ' + contentHeaderClasses)">
             <slot name="header" />
           </h2>
           <slot name="default" />
@@ -36,8 +36,8 @@
       @after-leave="preventScroll(false)">
       <div
         v-if="isOpenModal"
-        @click.prevent.stop="toggle()"
-        :class="prefixClass('o-modal__backdrop')" />
+        :class="prefixClass('o-modal__backdrop')"
+        @click.prevent.stop="toggle()" />
     </transition>
   </div>
 </template>
@@ -150,7 +150,7 @@ export default {
           }
         })
       } else {
-        this.preventScroll(false) // it could be removed after dropping the assessment table
+        this.preventScroll(false) // It could be removed after dropping the assessment table
         this.lastFocusedElement.focus()
       }
     },

package/src/components/DpMultiselect/DpMultiselect.vue

@@ -1,5 +1,6 @@
 <template>
   <vue-multiselect
+    v-dp-validate-multiselect="required"
     v-bind="{
       allowEmpty,
       clearOnSelect,
@@ -31,7 +32,6 @@
     :data-cy="dataCy"
     :data-dp-validate-error-fieldname="dataDpValidateErrorFieldname"
     :model-value="value"
-    v-dp-validate-multiselect="required"
     @close="newVal => $emit('close', newVal)"
     @update:model-value="newVal => $emit('input', newVal)"
     @open="newVal => $emit('open', newVal)"
@@ -69,20 +69,18 @@
         :props="props">
         <div class="border-bottom">
           <button
-              class="btn--blank weight--bold u-ph-0_5 u-pv-0_25"
-              :disabled="value.length === options.length === 0"
-              type="button"
-              v-text="translations.selectAll"
-              @click="$emit('select-all')">
-          </button>
+            class="btn--blank weight--bold u-ph-0_5 u-pv-0_25"
+            :disabled="value.length === options.length === 0"
+            type="button"
+            @click="$emit('select-all')"
+            v-text="translations.selectAll" />
 
           <button
-              class="btn--blank weight--bold u-ph-0_5 u-pv-0_25"
-              :disabled="value.length === 0"
-              type="button"
-              v-text="translations.deselectAll"
-              @click="$emit('unselect-all')">
-          </button>
+            class="btn--blank weight--bold u-ph-0_5 u-pv-0_25"
+            :disabled="value.length === 0"
+            type="button"
+            @click="$emit('unselect-all')"
+            v-text="translations.deselectAll" />
         </div>
       </slot>
     </template>
@@ -105,18 +103,6 @@ export default {
     dpValidateMultiselectDirective
   },
 
-  emits: [
-    'close',
-    'input',
-    'open',
-    'remove',
-    'search-change',
-    'select',
-    'select-all',
-    'tag',
-    'unselect-all'
-  ],
-
   props: {
     allowEmpty: {
       type: Boolean,
@@ -303,6 +289,18 @@ export default {
     }
   },
 
+  emits: [
+    'close',
+    'input',
+    'open',
+    'remove',
+    'search-change',
+    'select',
+    'select-all',
+    'tag',
+    'unselect-all'
+  ],
+
   data () {
     return {
       translations: {

package/src/components/DpMultistepNav/DpMultistepNav.vue

@@ -5,14 +5,14 @@
       :key="`step_${idx}`"
       :data-cy="`${dataCy}:${idx}`"
       :disabled="idx > activeStep"
-      @click="changeStep(idx)"
       class="btn--blank"
       :aria-label="step.title ? step.title : step.label"
       :class="[
         prefixClass('c-multistep__step'),
         idx === activeStep ? prefixClass('is-active') : '',
         idx > activeStep ? prefixClass('is-disabled') : ''
-      ]">
+      ]"
+      @click="changeStep(idx)">
       <span>
         <i
           v-if="step.icon"

package/src/components/DpPager/DpPager.vue

@@ -3,25 +3,25 @@
     <label
       class="c-pager__dropdown-label u-m-0 u-p-0 weight--normal inline-block"
       :aria-label="translations.selectNumberOfItems">
-        <dp-sliding-pagination
-          v-if="totalItems > Math.min(...limits)"
-          class="inline-block"
-          :current="currentPage"
-          :nonSlidingSize="3"
-          :slidingEndingSize="1"
-          :slidingWindowSize="1"
-          :total="totalPages || 1"
-          @page-change="handlePageChange" />
-      <div
+      <dp-sliding-pagination
+        v-if="totalItems > Math.min(...limits)"
         class="inline-block"
-        v-if="totalItems > Math.min(...limits)">
+        :current="currentPage"
+        :non-sliding-size="3"
+        :sliding-ending-size="1"
+        :sliding-window-size="1"
+        :total="totalPages || 1"
+        @page-change="handlePageChange" />
+      <div
+        v-if="totalItems > Math.min(...limits)"
+        class="inline-block">
         <dp-multiselect
           v-model="itemsPerPage"
           class="inline-block"
           :options="filteredLimits"
           :searchable="false"
           selected-label=""
-          @select="handleSizeChange"/>
+          @select="handleSizeChange" />
       </div>
       <span v-else>{{ totalItems }}</span>
       <span aria-hidden="true">

package/src/components/DpResettableInput/DpResettableInput.vue

@@ -3,16 +3,16 @@
     <dp-input
       v-bind="inputAttributes"
       :id="id"
+      v-model="currentValue"
       :data-cy="dataCy"
       has-icon
       :required="required"
       :rounded="rounded"
+      :pattern="pattern"
       @blur="$emit('blur', currentValue)"
       @input="onInput"
       @enter="$emit('enter', currentValue)"
-      @focus="$emit('focus')"
-      :pattern="pattern"
-      v-model="currentValue" />
+      @focus="$emit('focus')" />
     <button
       v-if="!inputAttributes.disabled"
       class="btn--blank o-link--default pr-0.5"

package/src/components/DpSearchField/DpSearchField.vue

@@ -1,13 +1,13 @@
 <template>
   <span
     class="inline-flex"
-    :class="{ 'w-full': inputWidth !== ''}">
+    :class="{ 'w-full': inputWidth === '' }">
     <dp-resettable-input
       id="searchField"
       v-model="searchTerm"
       data-cy="searchField"
       :class="cssClasses"
-      :input-attributes="{ placeholder: translations.search, type: 'search'}"
+      :input-attributes="{ placeholder: translations.search, type: 'search' }"
       rounded="left"
       @reset="handleReset"
       @enter="handleSearch">
@@ -62,6 +62,11 @@ export default {
     }
   },
 
+  emits: [
+    'search',
+    'reset'
+  ],
+
   data () {
     return {
       translations: {

package/src/components/DpSelect/DpSelect.vue

@@ -7,7 +7,7 @@
         for: nameOrId,
         required: required
       }"
-      class="mb-0.5"/><!--
+      class="mb-0.5" /><!--
  --><select
       :id="nameOrId"
       :data-cy="dataCy"
@@ -28,9 +28,9 @@
       </option>
       <option
         v-for="(option, idx) in options"
+        :key="idx"
         :selected="option.value === selected"
-        :value="option.value"
-        :key="idx">
+        :value="option.value">
         {{ option.label }}
       </option>
     </select>

package/src/components/DpSkeletonBox/DpSkeletonBox.vue

@@ -1,6 +1,6 @@
 <template>
   <span
-    :style="{height: height, width: width}"
+    :style="{ height: height, width: width }"
     class="c-skeleton-box" />
 </template>
 

package/src/components/DpSlidebar/DpSlidebar.vue

@@ -10,8 +10,8 @@
         <button
           type="button"
           class="btn--blank o-link--default u-mt-0_5 u-n-ml u-mb"
-          @click="$emit('close')"
-          data-slidebar-hide="">
+          data-slidebar-hide=""
+          @click="$emit('close')">
           <dp-icon
             icon="close"
             size="large" />

package/src/components/DpSplitButton/DpSplitButton.vue

@@ -13,7 +13,7 @@
       v-if="hasDropdownContent"
       data-cy="splitButtonTrigger"
       class="c-splitbutton__trigger"
-      :class="{'is-open': isOpen}"
+      :class="{ 'is-open': isOpen }"
       type="button"
       aria-haspopup="true"
       :aria-expanded="isOpen"
@@ -26,7 +26,7 @@
       v-if="hasDropdownContent"
       class="c-splitbutton__dropdown"
       role="menu"
-      :class="{'is-open': isOpen}">
+      :class="{ 'is-open': isOpen }">
       <slot name="dropdown">
         Dropdown Actions
       </slot>

package/src/components/DpStickyElement/DpStickyElement.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    :class="{'o-sticky--border': border, 'z-fixed': applyZIndex}"
+    :class="{ 'o-sticky--border': border, 'z-fixed': applyZIndex }"
     class="o-sticky bg-color--white">
     <slot />
   </div>

package/src/components/DpTabs/DpTabs.vue

@@ -26,7 +26,7 @@
       </li>
     </ul>
     <div>
-      <slot :activeTabId="activeTabId" />
+      <slot :active-tab-id="activeTabId" />
     </div>
   </div>
 </template>

package/src/components/DpTextArea/DpTextArea.vue

@@ -6,8 +6,9 @@
       class="mb-0.5" /><!--
  --><textarea
       v-bind="allowedAttributes"
-      :name="name"
       :id="id"
+      v-model="currentValue"
+      :name="name"
       class="o-form__control-textarea"
       :class="{ 'grow': growToParent, 'h-7': reducedHeight }"
       :data-dp-validate-if="dataDpValidateIf ? true : null"
@@ -15,9 +16,8 @@
       :data-cy="dataCy"
       :disabled="disabled"
       :maxlength="maxlength"
-      v-model="currentValue"
-      @input="$emit('input', currentValue)"
-      :required="required" />
+      :required="required"
+      @input="$emit('input', currentValue)" />
   </div>
 </template>