@demos-europe/demosplan-ui 0.4.12 → 0.4.13

package/src/components/DpTimePicker/DpTimePicker.vue

@@ -1,7 +1,7 @@
 <template>
   <div
-    class="c-timepicker inline-block"
     v-on-click-outside="closeFlyout"
+    class="c-timepicker inline-block"
     @keydown.esc="closeFlyout"
     @keydown.enter="e => handleEnter(e)">
     <dp-label
@@ -10,30 +10,30 @@
       :text="label" />
     <dp-resettable-input
       v-if="!isMobileDevice"
-      :data-cy="dataCy"
       :id="`timeInput:${id}`"
       :ref="`timeInput:${id}`"
+      :data-cy="dataCy"
       class="w-8"
       button-variant="small"
       default-value="00:00"
       :input-attributes="{ disabled: disabled, autocomplete: 'off' }"
+      pattern="([01]?[0-9]|2[0-3]):[0-5][0-9]"
+      :value="currentTime"
       @reset="handleReset"
       @enter="val => handleEnter(val)"
       @focus="handleFocus"
       @blur="handleBlur"
-      @input="val => handleInput(val)"
-      pattern="([01]?[0-9]|2[0-3]):[0-5][0-9]"
-      :value="currentTime" />
+      @input="val => handleInput(val)" />
     <dp-input
       v-else
-      :data-cy="dataCy"
       :id="`timeInput:${id}`"
+      :data-cy="dataCy"
       class="w-8"
       type="time"
       pattern="([01]?[0-9]|2[0-3]):[0-5][0-9]"
       :value="currentTime"
-      @input="val => handleInput(val)"
-      autocomplete="off" />
+      autocomplete="off"
+      @input="val => handleInput(val)" />
 
     <div
       ref="flyout"
@@ -45,13 +45,13 @@
           v-for="hour in availableHours"
           :key="`${id}:hour:${hour}`"
           class="c-timepicker__flyout-item"
-          :class="{'is-selected': currentHour === hour}">
+          :class="{ 'is-selected': currentHour === hour }">
           <button
-            @click.prevent="handleInput(hour, 'hour')"
+            :id="`${id}:hour:${hour}`"
             class="btn--blank u-ph-0_125 u-pv-0_125"
             tabindex="0"
             :value="hour"
-            :id="`${id}:hour:${hour}`">
+            @click.prevent="handleInput(hour, 'hour')">
             {{ hour }}
           </button>
         </li>
@@ -63,13 +63,13 @@
           v-for="minute in availableMinutes"
           :key="`${id}:minute:${minute}`"
           class="c-timepicker__flyout-item"
-          :class="{'is-selected': currentMinutes === minute}">
+          :class="{ 'is-selected': currentMinutes === minute }">
           <button
-            @click.prevent="handleInput(minute, 'minute')"
+            :id="`${id}:minute:${minute}`"
             tabindex="0"
             class="btn--blank u-ph-0_125 u-pv-0_125"
             :value="minute"
-            :id="`${id}:minute:${minute}`">
+            @click.prevent="handleInput(minute, 'minute')">
             {{ minute }}
           </button>
         </li>

package/src/components/DpToggle/DpToggle.vue

@@ -1,11 +1,11 @@
 <template>
   <span
     class="toggle-wrapper"
-    @click="toggle"
     role="checkbox"
     :aria-checked="value.toString()"
     :aria-disabled="disabled ? true : null"
     tabindex="0"
+    @click="toggle"
     @keydown.space.prevent="toggle">
     <div
       v-show="disabled"

package/src/components/DpTooltip/DpTooltip.vue

@@ -50,8 +50,10 @@ export default {
   mounted () {
     this.tooltipHook = this.$el
 
-    // Check if there is exact one Child DOM-Element in the slot
-    // If so, put the tooltip on that element, otherwise on the wrapper
+    /*
+     * Check if there is exact one Child DOM-Element in the slot
+     * If so, put the tooltip on that element, otherwise on the wrapper
+     */
     if (this.$el.hasChildNodes() && this.$el.childNodes.length === 1 && Object.keys(this.$el.childNodes[0]).length > 0) {
       this.tooltipHook = this.$el.childNodes[0]
     }

package/src/components/DpTooltip/utils/tooltip.js

@@ -93,10 +93,10 @@ const createTooltip = async (id, wrapperEl, { place = 'top', container = 'body',
   })
 
   /*
-    * Handles the position of the arrow -  e.g. if the Tooltip is on the top,
-    * we want to place the arrow at the bottom, and so on. `placement` can be
-    * 'bottom-start' etc as well, so we have to make sure to only take the first part.
-    */
+   * Handles the position of the arrow -  e.g. if the Tooltip is on the top,
+   * we want to place the arrow at the bottom, and so on. `placement` can be
+   * 'bottom-start' etc as well, so we have to make sure to only take the first part.
+   */
   const { x: arrowX, y: arrowY } = middlewareData.arrow
   const opposedSide = {
     top: 'bottom',

package/src/components/DpTooltipIcon/DpTooltipIcon.vue

@@ -1,8 +1,8 @@
 <template>
   <i
+    v-tooltip="text"
     class="fa"
-    :class="[icon, large ? 'fa-lg' : '']"
-    v-tooltip="text" />
+    :class="[icon, large ? 'fa-lg' : '']" />
 </template>
 
 <script>

package/src/components/DpTransitionExpand/DpTransitionExpand.vue

@@ -29,7 +29,7 @@ export default {
          * Force repaint to make sure the
          * animation is triggered correctly.
          */
-        /* eslint-disable no-unused-expressions */
+         
         getComputedStyle(element).height
 
         /*

package/src/components/DpTreeList/DpTreeList.vue

@@ -10,8 +10,8 @@
       <div class="flex bg-color--white">
         <dp-tree-list-checkbox
           v-if="checkAll"
-          name="checkAll"
           v-model="allElementsSelected"
+          name="checkAll"
           check-all
           :style="checkboxIndentationStyle" />
         <div class="grow color--grey">
@@ -21,9 +21,9 @@
           v-if="treeData.length > 0"
           class="color--grey"
           data-cy="treeListNodeToggle"
-          @input="toggleAll"
           :value="allElementsExpanded"
-          toggle-all />
+          toggle-all
+          @input="toggleAll" />
       </div>
     </div>
 
@@ -43,9 +43,9 @@
       :opts="opts.draggable">
       <dp-tree-list-node
         v-for="(node, idx) in treeData"
-        :data-cy="`treeListNode:${idx}`"
         :ref="`node_${node.id}`"
         :key="node.id"
+        :data-cy="`treeListNode:${idx}`"
         :check-branch="branchIdentifier"
         :children="node.children || []"
         :draggable="draggable"

package/src/components/DpTreeList/DpTreeListCheckbox.vue

@@ -1,10 +1,10 @@
 <template>
   <label class="u-mb-0">
     <input
+      :id="name"
       class="u-m-0_5 u-ml-0_25"
       type="checkbox"
       :name="name"
-      :id="name"
       :checked="checked"
       :value="stringValue"
       @click="check">

package/src/components/DpTreeList/DpTreeListNode.vue

@@ -1,13 +1,13 @@
 <template>
   <li
-    class="border--top relative"
     :id="nodeId"
+    class="border--top relative"
     data-cy="treeListNode">
     <div class="c-treelist__node flex">
       <div
+        v-if="isDraggable"
         class="inline-block u-p-0_25 u-pr-0 u-mt-0_125"
-        :class="dragHandle"
-        v-if="isDraggable">
+        :class="dragHandle">
         <dp-icon
           class="c-treelist__drag-handle-icon"
           icon="drag-handle" />
@@ -22,11 +22,11 @@
         class="flex grow items-start"
         :style="indentationStyle">
         <dp-tree-list-toggle
-          class="c-treelist__folder text--left u-pv-0_25"
-          :class="{'pointer-events-none': 0 === children.length}"
-          :icon-class-prop="iconClassFolder"
           v-if="isBranch"
-          v-model="isExpanded" />
+          v-model="isExpanded"
+          class="c-treelist__folder text--left u-pv-0_25"
+          :class="{ 'pointer-events-none': 0 === children.length }"
+          :icon-class-prop="iconClassFolder" />
         <div class="grow u-pl-0 u-p-0_25">
           <slot
             v-if="isBranch"
@@ -44,12 +44,12 @@
         </div>
       </div>
       <dp-tree-list-toggle
-        data-cy="treeListChildToggle"
         v-if="isBranch"
-        class="self-start"
-        :disabled="!hasToggle"
+        v-model="isExpanded"
         v-tooltip="!hasToggle ? translations.noElementsExisting : ''"
-        v-model="isExpanded" />
+        data-cy="treeListChildToggle"
+        class="self-start"
+        :disabled="!hasToggle" />
       <div
         v-else
         class="min-w-4" />
@@ -71,9 +71,9 @@
       <dp-tree-list-node
         v-for="(child, idx) in children"
         v-show="true === isExpanded"
-        :data-cy="`treeListChild:${idx}`"
         :ref="`node_${child.id}`"
         :key="child.id"
+        :data-cy="`treeListChild:${idx}`"
         :check-branch="checkBranch"
         :children="child.children || []"
         :handle-change="handleChange"

package/src/components/DpUploadFiles/DpUpload.vue

@@ -1,7 +1,7 @@
 <template>
   <div
-    :data-cy="dataCy"
-    ref="fileInput" />
+    ref="fileInput"
+    :data-cy="dataCy" />
 </template>
 
 <script>

package/src/components/DpUploadFiles/DpUploadFiles.vue

@@ -26,9 +26,9 @@
 
  --><dp-uploaded-file-list
       v-if="uploadedFiles.length > 0"
-      @file-remove="handleRemove"
       :class="[prefixClass('layout__item u-1-of-1-palm'), prefixClass(sideBySide ? 'u-1-of-2' : 'u-1-of-1 u-mt')]"
-      :files="uploadedFiles" />
+      :files="uploadedFiles"
+      @file-remove="handleRemove" />
 
     <!--
       If the component is used in the context of a "traditional" form post, the hashes (ids)
@@ -61,16 +61,8 @@ export default {
     DpUploadedFileList
   },
 
-  emits: ['upload-success'],
-
   mixins: [prefixClassMixin, sessionStorageMixin],
 
-  provide () {
-    return {
-      getFileByHash: this.getFileByHash
-    }
-  },
-
   props: {
     /**
      * Array of mimeTypes or a defined preset as String
@@ -243,6 +235,14 @@ export default {
     }
   },
 
+  emits: ['upload-success'],
+
+  provide () {
+    return {
+      getFileByHash: this.getFileByHash
+    }
+  },
+
   data () {
     return {
       fileHashes: [],

package/src/components/DpUploadFiles/DpUploadedFile.vue

@@ -1,8 +1,8 @@
 <template>
   <li data-cy="uploadFile:uploadedFileItem">
     <span
-      aria-hidden="true"
-      v-if="file.mimeType === 'txt'">
+      v-if="file.mimeType === 'txt'"
+      aria-hidden="true">
       <i
         :class="fileIcon" />
     </span>
@@ -42,10 +42,6 @@ import { prefixClassMixin } from '~/mixins'
 export default {
   name: 'DpUploadedFile',
 
-  emits: ['file-remove'],
-
-  inject: ['getFileByHash'],
-
   mixins: [prefixClassMixin],
 
   props: {
@@ -55,6 +51,10 @@ export default {
     }
   },
 
+  emits: ['file-remove'],
+
+  inject: ['getFileByHash'],
+
   data () {
     return {
       translations: {

package/src/components/DpUploadFiles/DpUploadedFileList.vue

@@ -8,9 +8,9 @@
     <ul :class="prefixClass('o-list space-stack-xs')">
       <dp-uploaded-file
         v-for="(file, idx) in files"
+        :key="idx"
         :file="file"
-        @file-remove="file => $emit('file-remove', file)"
-        :key="idx" />
+        @file-remove="file => $emit('file-remove', file)" />
     </ul>
   </div>
 </template>
@@ -23,8 +23,6 @@ import { de } from "~/components/shared/translations"
 export default {
   name: 'DpUploadedFileList',
 
-  emits: ['file-remove'],
-
   components: {
     DpUploadedFile
   },
@@ -39,6 +37,8 @@ export default {
     }
   },
 
+  emits: ['file-remove'],
+
   data () {
     return {
       translations: {

package/src/components/DpVideoPlayer/DpVideoPlayer.vue

@@ -121,6 +121,12 @@ export default defineComponent({
     }
   },
 
+  data () {
+    return {
+      player: {}
+    }
+  },
+
   computed: {
     isEmbeddedSource() {
       return this.primarySource && this.primarySource.embedId && this.primarySource.provider
@@ -130,14 +136,8 @@ export default defineComponent({
     }
   },
 
-  data () {
-    return {
-      player: {}
-    }
-  },
-
   mounted () {
-    // eslint-disable-next-line new-cap
+     
     this.player = new Plyr('#' + this.id, {
       iconUrl: this.iconUrl,
       // For a full list of available controls see https://github.com/sampotts/plyr/blob/master/CONTROLS.md

package/src/directives/CleanHtml/CleanHtml.js

@@ -42,7 +42,7 @@ const getOptions = (value) => {
  */
 const setSanitizedInnerHTML = (el, binding) => {
   const { content, options = {} } = getOptions(binding.value)
-  const _options = {...options, ...{ ADD_ATTR: ['target'] } }
+  const _options = { ...options, ...{ ADD_ATTR: ['target'] } }
   el.innerHTML = DOMPurify.sanitize(content, _options)
 }
 

package/src/directives/Tooltip/Tooltip.js

@@ -39,7 +39,7 @@ const tooltipConfig = {
 VPopover.options = { ...VPopover.options, ...tooltipConfig }
 
 /**
- * v-tooltip directive
+ * V-tooltip directive
  *
  * @type {VueDirective}
  *

package/src/lib/ActionMenu.js

@@ -75,29 +75,29 @@ class ActionMenu {
 
   handleTriggerKeydown (event) {
     switch (event.keyCode) {
-      // Down
-      case 40:
-        // Prevent page scrolling
-        event.preventDefault()
-        this.openMenu()
-        this.menu.classList.remove(prefixClass('has-focused-trigger'))
-        this.menuItems[this.currentlySelectedIndex].focus()
-        break
+    // Down
+    case 40:
+      // Prevent page scrolling
+      event.preventDefault()
+      this.openMenu()
+      this.menu.classList.remove(prefixClass('has-focused-trigger'))
+      this.menuItems[this.currentlySelectedIndex].focus()
+      break
 
       // Up, tab
-      case 38:
-      case 9:
-        this.closeMenu()
-        break
+    case 38:
+    case 9:
+      this.closeMenu()
+      break
 
       // Esc
-      case 27:
-        this.closeMenu()
-        this.trigger.focus()
-        break
+    case 27:
+      this.closeMenu()
+      this.trigger.focus()
+      break
 
-      default:
-        break
+    default:
+      break
     }
   }
 
@@ -107,40 +107,40 @@ class ActionMenu {
 
   handleMenuItemKeydown (event) {
     switch (event.keyCode) {
-      // Down
-      case 40:
-        // Prevent page scrolling
-        event.preventDefault()
-        if (this.currentlySelectedIndex < this.menuItems.length - 1) {
-          this.currentlySelectedIndex++
-        } else {
-          this.currentlySelectedIndex = 0
-        }
-
-        this.menuItems[this.currentlySelectedIndex].focus()
-        break
+    // Down
+    case 40:
+      // Prevent page scrolling
+      event.preventDefault()
+      if (this.currentlySelectedIndex < this.menuItems.length - 1) {
+        this.currentlySelectedIndex++
+      } else {
+        this.currentlySelectedIndex = 0
+      }
+
+      this.menuItems[this.currentlySelectedIndex].focus()
+      break
 
       // Up
-      case 38:
-        // Prevent page scrolling
-        event.preventDefault()
-        if (this.currentlySelectedIndex === 0) {
-          this.currentlySelectedIndex = this.menuItems.length - 1
-        } else {
-          this.currentlySelectedIndex--
-        }
-        this.menuItems[this.currentlySelectedIndex].focus()
-        break
+    case 38:
+      // Prevent page scrolling
+      event.preventDefault()
+      if (this.currentlySelectedIndex === 0) {
+        this.currentlySelectedIndex = this.menuItems.length - 1
+      } else {
+        this.currentlySelectedIndex--
+      }
+      this.menuItems[this.currentlySelectedIndex].focus()
+      break
 
       // Tab, esc
-      case 9:
-      case 27:
-        this.trigger.focus()
-        this.closeMenu()
-        break
-
-      default:
-        break
+    case 9:
+    case 27:
+      this.trigger.focus()
+      this.closeMenu()
+      break
+
+    default:
+      break
     }
   }
 

package/src/lib/DpApi.js

@@ -72,8 +72,8 @@ const doRequest = (async ({ method = 'GET', url, data = {}, headers, params }) =
     const content = contentType.includes('json')
       ? await response.json()
       : contentType.includes('text')
-      ? await response.text()
-      : null
+        ? await response.text()
+        : null
 
     return {
       data: content,

package/src/lib/FileInfo.js

@@ -68,26 +68,26 @@ const mimeTypes = {
 const convertSize = function (scale, value) {
   let returnValue
   switch (scale) {
-    case 'KB':
-      returnValue = value / 1024
-      break
-    case 'MB':
-      returnValue = value / 1048576
-      break
-    case 'GB':
-      returnValue = value / 1073741824
-      break
-    case 'TB':
-      returnValue = value / 1099511627776
-      break
-      /* This is the Default */
+  case 'KB':
+    returnValue = value / 1024
+    break
+  case 'MB':
+    returnValue = value / 1048576
+    break
+  case 'GB':
+    returnValue = value / 1073741824
+    break
+  case 'TB':
+    returnValue = value / 1099511627776
+    break
+    /* This is the Default */
     /*
      * case 'B':
      *     returnValue = value;
      *     break;
      */
-    default:
-      returnValue = value
+  default:
+    returnValue = value
   }
 
   return Math.round(returnValue) + ' ' + scale

package/src/lib/validation/utils/assignHandlerForTrigger.js

@@ -62,15 +62,15 @@ export default function assignHandlerForTrigger (triggerButton, form) {
       document.dispatchEvent(new CustomEvent('customValidationFailed', { detail: { form: form } }))
     } else {
       switch (callback) {
-        case 'dpconfirm':
-          if (window.dpconfirm(transKey, true) === false) {
-            e.preventDefault()
-          } else {
-            submitAction(form, triggerName)
-          }
-          break
-        default:
+      case 'dpconfirm':
+        if (window.dpconfirm(transKey, true) === false) {
+          e.preventDefault()
+        } else {
           submitAction(form, triggerName)
+        }
+        break
+      default:
+        submitAction(form, triggerName)
       }
     }
   })