@demos-europe/demosplan-ui 0.4.12 → 0.4.13

package/src/components/DpDataTable/DpDataTable.vue

@@ -4,43 +4,45 @@
       ref="tableEl"
       :data-cy="`${dataCy}:table`"
       :class="tableClass">
-      <caption class="sr-only" v-text="tableDescription" />
+      <caption
+        class="sr-only"
+        v-text="tableDescription" />
       <colgroup v-if="headerFields.filter((field) => field.colClass).length > 0">
-        <col v-if="isDraggable" />
-        <col v-if="isSelectable" />
+        <col v-if="isDraggable">
+        <col v-if="isSelectable">
         <col
           v-for="field in headerFields"
-          :class="field.colClass" />
-        <col v-if="hasFlyout" />
-        <col v-if="isExpandable" />
-        <col v-if="isTruncatable" />
+          :class="field.colClass">
+        <col v-if="hasFlyout">
+        <col v-if="isExpandable">
+        <col v-if="isTruncatable">
       </colgroup>
 
       <thead>
-      <dp-table-header
-        :data-cy="`${dataCy}:header`"
-        :checked="allSelected"
-        :has-flyout="hasFlyout"
-        :header-fields="headerFields"
-        :indeterminate="indeterminate"
-        :is-draggable="isDraggable"
-        :is-expandable="isExpandable"
-        :is-resizable="isResizable"
-        :is-selectable="isSelectable"
-        :is-sticky="hasStickyHeader"
-        :is-truncatable="isTruncatable"
-        :translations="headerTranslations"
-        @toggle-expand-all="toggleExpandAll"
-        @toggle-select-all="toggleSelectAll"
-        @toggle-wrap-all="toggleWrapAll">
-        <template
-          v-for="field in headerFields"
-          v-slot:[`header-${field.field}`]="field">
-          <slot
-            :name="`header-${field.field}`"
-            v-bind="field" />
-        </template>
-      </dp-table-header>
+        <dp-table-header
+          :data-cy="`${dataCy}:header`"
+          :checked="allSelected"
+          :has-flyout="hasFlyout"
+          :header-fields="headerFields"
+          :indeterminate="indeterminate"
+          :is-draggable="isDraggable"
+          :is-expandable="isExpandable"
+          :is-resizable="isResizable"
+          :is-selectable="isSelectable"
+          :is-sticky="hasStickyHeader"
+          :is-truncatable="isTruncatable"
+          :translations="headerTranslations"
+          @toggle-expand-all="toggleExpandAll"
+          @toggle-select-all="toggleSelectAll"
+          @toggle-wrap-all="toggleWrapAll">
+          <template
+            v-for="field in headerFields"
+            v-slot:[`header-${field.field}`]="field">
+            <slot
+              :name="`header-${field.field}`"
+              v-bind="field" />
+          </template>
+        </dp-table-header>
       </thead>
 
       <!-- not draggable -->
@@ -85,21 +87,21 @@
             </template>
           </dp-table-row>
 
-        <!-- DpTableRowExpanded -->
-        <tr
-          v-if="expandedElements[item[trackBy]] || false"
-          :class="{ 'is-expanded-content': expandedElements[item[trackBy]] }">
-          <td
-            :class="{ 'opacity-70': isLoading }"
-            :colspan="colCount"
-            @mouseenter="addHoveredClass(idx)"
-            @mouseleave="removeHoveredClass(idx)">
-            <slot
-              name="expandedContent"
-              v-bind="item" />
-          </td>
-        </tr>
-      </template>
+          <!-- DpTableRowExpanded -->
+          <tr
+            v-if="expandedElements[item[trackBy]] || false"
+            :class="{ 'is-expanded-content': expandedElements[item[trackBy]] }">
+            <td
+              :class="{ 'opacity-70': isLoading }"
+              :colspan="colCount"
+              @mouseenter="addHoveredClass(idx)"
+              @mouseleave="removeHoveredClass(idx)">
+              <slot
+                name="expandedContent"
+                v-bind="item" />
+            </td>
+          </tr>
+        </template>
       </tbody>
 
       <dp-draggable
@@ -107,8 +109,8 @@
         draggable-tag="tbody"
         :content-data="items"
         handle="c-data-table__drag-handle"
-        ghostClass="sortable-ghost"
-        chosenClass="sortable-chosen"
+        ghost-class="sortable-ghost"
+        chosen-class="sortable-chosen"
         @end="(event, item) => $emit('changed-order', event, item)">
         <template
           v-for="(item, idx) in items"
@@ -137,8 +139,8 @@
             @toggle-select="toggleSelect"
             @toggle-wrap="toggleWrap">
             <template
-              v-slot:[field]="item"
               v-for="(field, idx) in fields"
+              v-slot:[field]="item"
               :key="idx">
               <slot
                 :name="field"
@@ -713,6 +715,8 @@ export default {
     }
 
     this.forceElementSelections(this.shouldBeSelectedItems)
+
+    this.headerCellCount = this.headerFields.length
   }
 }
 </script>

package/src/components/DpDataTable/DpResizableColumn.vue

@@ -1,7 +1,7 @@
 <template>
   <th
-    v-tooltip="headerField.tooltip || headerField.label"
     ref="resizableColumn"
+    v-tooltip="headerField.tooltip || headerField.label"
     class="c-data-table__resizable break-words"
     :class="{ 'u-pr-0' : isLast }"
     :data-col-field="headerField.field"

package/src/components/DpDataTable/DpTableHeader.vue

@@ -18,13 +18,13 @@
       scope="col"
       class="c-data-table__cell--narrow">
       <input
+        ref="selectAll"
         :aria-label="translations.headerSelectHint"
         :title="translations.headerSelectHint"
         type="checkbox"
         data-cy="selectAll"
-        ref="selectAll"
-        @click="toggleSelectAll()"
-        :checked="checked" />
+        :checked="checked"
+        @click="toggleSelectAll()">
     </th>
     <template v-for="(hf, idx) in headerFields">
       <component
@@ -38,7 +38,9 @@
           :name="`header-${hf.field}`"
           v-bind="hf">
           <div :class="{ 'c-data-table__resizable--truncated': isTruncatable }">
-            <span v-if="hf.label" v-text="hf.label" />
+            <span
+              v-if="hf.label"
+              v-text="hf.label" />
           </div>
         </slot>
         <span

package/src/components/DpDataTable/DpTableRow.vue

@@ -16,8 +16,8 @@
       class="c-data-table__cell--narrow">
       <dp-icon
         v-if="isLocked"
-        class="align-middle color--grey-light"
         v-tooltip="isLockedMessage"
+        class="align-middle color--grey-light"
         icon="lock" />
       <input
         v-else

package/src/components/DpDataTableExtended/DpDataTableExtended.vue

@@ -10,12 +10,12 @@
             {{ defaultTranslations.search }}
           </label>
           <input
-            type="text"
             id="search"
+            v-model="searchString"
+            type="text"
             name="search"
             class="o-form__control-input"
             data-cy="dataTableExtended:search"
-            v-model="searchString"
             @input="updateFields(null)">
 
           <!-- pager -->
@@ -27,19 +27,19 @@
             @page-change="handlePageChange" />
           <dp-select-page-item-count
             class="inline-block u-mt-0_125 u-ml-0_5"
-            @changed-count="setPageItemCount"
             :page-count-options="itemsPerPageOptions"
             :current-item-count="itemsPerPage"
-            :label-text="defaultTranslations.showEntries" />
+            :label-text="defaultTranslations.showEntries"
+            @changed-count="setPageItemCount" />
         </div>
       </div>
     </dp-sticky-element>
 
     <dp-data-table
       v-bind="$props"
-      @items-selected="emitSelectedItems"
       :items="onPageItems"
-      :should-be-selected-items="currentlySelectedItems">
+      :should-be-selected-items="currentlySelectedItems"
+      @items-selected="emitSelectedItems">
       <template
         v-for="(el, i) in sortableFilteredFields"
         v-slot:[`header-${el.field}`]="el">
@@ -53,8 +53,8 @@
               :aria-label="defaultTranslations.colsSort + ': ' + el.label"
               :title="defaultTranslations.colsSort + ': ' + el.label"
               class="btn--blank u-top-0 u-right-0 absolute"
-              @click="setOrder(el.field)"
-              type="button">
+              type="button"
+              @click="setOrder(el.field)">
               <i
                 aria-hidden="true"
                 class="fa"

package/src/components/DpDataTableExtended/DpSelectPageItemCount.vue

@@ -34,8 +34,8 @@ export default {
     },
 
     labelText: {
-     type: String,
-     required: true
+      type: String,
+      required: true
     },
 
     pageCountOptions: {

package/src/components/DpDatetimePicker/DpDatetimePicker.vue

@@ -8,30 +8,30 @@
       :text="label" />
     <div class="o-form__control-wrapper o-form__group">
       <dp-datepicker
+        :id="`datePicker:${id}`"
+        v-model="date"
         class="o-form__group-item shrink"
         :data-cy="`${dataCy}:date`"
         :calendars-after="2"
         :disabled="disabled"
-        :id="`datePicker:${id}`"
         :max-date="maxDate"
         :min-date="minDate"
         :required="required"
-        v-model="date"
         @input="$emit('input', currentDatetime)" />
       <dp-time-picker
+        :id="`timePicker:${id}`"
+        v-model="time"
         class="o-form__group-item"
         :data-cy="`${dataCy}:time`"
         :disabled="disabled"
-        :id="`timePicker:${id}`"
-        v-model="time"
         :min-value="minTime"
         @input="$emit('input', currentDatetime)" />
       <input
+        v-if="hiddenInput && name"
         type="hidden"
         :disabled="disabled"
         :name="name"
-        :value="currentDatetime"
-        v-if="hiddenInput && name">
+        :value="currentDatetime">
     </div>
   </div>
 </template>

package/src/components/DpDetails/DpDetails.vue

@@ -11,7 +11,7 @@
       @click="isOpen = !isOpen">
       <i
         class="fa w-2 text--center"
-        :class="{'fa-caret-down': isOpen, 'fa-caret-right': !isOpen}"
+        :class="{ 'fa-caret-down': isOpen, 'fa-caret-right': !isOpen }"
         aria-hidden="true" />
       <strong v-cleanhtml="summary" />
     </summary>

package/src/components/DpDraggable/DpDraggable.vue

@@ -11,20 +11,10 @@
 import { ref, watch } from 'vue'
 import { useSortable } from '@vueuse/integrations/useSortable'
 
-const wrapper = ref<HTMLElement | null>(null)
-const list = ref([])
-
-const emit = defineEmits(
-  [
-    'add',
-    'end'
-  ]
-)
-
 const props = defineProps({
   /*
-     * Content you want to display in the draggable.
-     */
+   * Content you want to display in the draggable.
+   */
   contentData: {
     type: Array,
     required: true
@@ -111,6 +101,14 @@ const props = defineProps({
     default: () => ({})
   }
 })
+const emit = defineEmits(
+  [
+    'add',
+    'end'
+  ]
+)
+const wrapper = ref<HTMLElement | null>(null)
+const list = ref([])
 
 list.value = props.contentData ?? []
 

package/src/components/DpEditor/DpEditor.vue

@@ -2,16 +2,16 @@
   <div class="o-form__control-tiptap">
     <div
       v-if="maxlength !== 0"
-      :class="prefixClass('lbl__hint')"
-      v-cleanhtml="counterText" />
+      v-cleanhtml="counterText"
+      :class="prefixClass('lbl__hint')" />
     <dp-link-modal
       v-if="toolbar.linkButton"
       ref="linkModal"
       @insert="insertUrl" />
     <dp-upload-modal
       v-if="toolbar.imageButton && tusEndpoint"
-      :basic-auth="basicAuth"
       ref="uploadModal"
+      :basic-auth="basicAuth"
       :get-file-by-hash="routes.getFileByHash"
       :tus-endpoint="tusEndpoint"
       @insert-image="insertImage"
@@ -19,8 +19,8 @@
       @close="resetImageId" />
     <slot
       name="modal"
-      :appendText="appendText"
-      :handleInsertText="handleInsertText" />
+      :append-text="appendText"
+      :handle-insert-text="handleInsertText" />
 
     <div
       v-if="editor"
@@ -30,13 +30,13 @@
           <div :class="[readonly ? prefixClass('readonly'): '', prefixClass('menubar')]">
             <!-- Cut -->
             <button
+              v-tooltip="translations.cut"
               :aria-label="translations.cut"
               :class="prefixClass('menubar__button')"
               data-cy="editor:cut"
               :disabled="readonly"
               type="button"
-              @click="cut"
-              v-tooltip="translations.cut">
+              @click="cut">
               <i
                 :class="prefixClass('fa fa-scissors')"
                 aria-hidden="true" />
@@ -44,26 +44,26 @@
             &#10072;
             <!-- Undo -->
             <button
+              v-tooltip="translations.undo"
               :aria-label="translations.undo"
               :class="prefixClass('menubar__button')"
               data-cy="editor:undo"
               :disabled="readonly"
               type="button"
-              @click="editor.chain().focus().undo().run()"
-              v-tooltip="translations.undo">
+              @click="editor.chain().focus().undo().run()">
               <i
                 :class="prefixClass('fa fa-reply')"
                 aria-hidden="true" />
             </button>
             <!-- Redo -->
             <button
+              v-tooltip="translations.redo"
               :aria-label="translations.redo"
               :class="prefixClass('menubar__button')"
               data-cy="editor:redo"
               :disabled="readonly"
               type="button"
-              @click="editor.chain().focus().redo().run()"
-              v-tooltip="translations.redo">
+              @click="editor.chain().focus().redo().run()">
               <i
                 :class="prefixClass('fa fa-share')"
                 aria-hidden="true" />
@@ -73,13 +73,13 @@
               <!-- Bold -->
 
               <button
+                v-tooltip="translations.bold"
                 :aria-label="translations.bold"
                 :class="[editor.isActive('bold') ? prefixClass('is-active'): '', prefixClass('menubar__button')]"
                 data-cy="editor:bold"
                 :disabled="readonly"
                 type="button"
-                @click="editor.chain().focus().toggleBold().run()"
-                v-tooltip="translations.bold">
+                @click="editor.chain().focus().toggleBold().run()">
                 <i
                   :class="prefixClass('fa fa-bold')"
                   aria-hidden="true" />
@@ -87,26 +87,26 @@
 
               <!-- Italic -->
               <button
+                v-tooltip="translations.italic"
                 :aria-label="translations.italic"
                 :class="[editor.isActive('italic') ? prefixClass('is-active') : '', prefixClass('menubar__button') ]"
                 data-cy="editor:italic"
                 :disabled="readonly"
                 type="button"
-                @click="editor.chain().focus().toggleItalic().run()"
-                v-tooltip="translations.italic">
+                @click="editor.chain().focus().toggleItalic().run()">
                 <i
                   :class="prefixClass('fa fa-italic')"
                   aria-hidden="true" />
               </button>
               <!-- Underline -->
               <button
+                v-tooltip="translations.underline"
                 :aria-label="translations.underline"
                 :class="[editor.isActive('underline') ? prefixClass('is-active') : '', prefixClass('menubar__button')]"
                 data-cy="editor:underline"
                 :disabled="readonly"
                 type="button"
-                @click="editor.chain().focus().toggleUnderline().run()"
-                v-tooltip="translations.underline">
+                @click="editor.chain().focus().toggleUnderline().run()">
                 <i
                   :class="prefixClass('fa fa-underline')"
                   aria-hidden="true" />
@@ -115,13 +115,13 @@
             <!-- Strike through -->
             <button
               v-if="toolbar.strikethrough"
+              v-tooltip="translations.strikethrough"
               :aria-label="translations.strikethrough"
               :class="[editor.isActive('strike') ? prefixClass('is-active') : '', prefixClass('menubar__button')]"
               data-cy="editor:strikethrough"
               :disabled="readonly"
               type="button"
-              @click="editor.chain().focus().toggleStrike().run()"
-              v-tooltip="translations.strikethrough">
+              @click="editor.chain().focus().toggleStrike().run()">
               <i
                 :class="prefixClass('fa fa-strikethrough')"
                 aria-hidden="true" />
@@ -163,11 +163,11 @@
               <button
                 v-for="(button, idx) in diffMenu.buttons"
                 :key="`diffMenu_${idx}`"
+                v-tooltip="button.label"
                 :class="[editor.isActive(button.name) ? prefixClass('is-active') : '' , prefixClass('menubar__button')]"
                 type="button"
                 :disabled="readonly"
                 :aria-label="button.label"
-                v-tooltip="button.label"
                 @keydown.tab.exact="() => { idx === diffMenu.buttons.length -1 ? toggleSubMenu('diffMenu', false) : null }"
                 @keydown.tab.shift.exact="() => { idx === 0 ? toggleSubMenu('diffMenu', false) : null }"
                 @click.stop="executeSubMenuButtonAction(button, 'diffMenu', true)">
@@ -180,22 +180,22 @@
             <template v-if="toolbar.listButtons">
               <!-- Unordered List -->
               <button
-                @click="editor.chain().focus().toggleBulletList().run()"
+                v-tooltip="translations.unorderedList"
                 :class="[editor.isActive('bullet_list') ? prefixClass('is-active') : '', prefixClass('menubar__button')]"
                 type="button"
                 :aria-label="translations.unorderedList"
-                v-tooltip="translations.unorderedList"
-                :disabled="readonly">
+                :disabled="readonly"
+                @click="editor.chain().focus().toggleBulletList().run()">
                 <i :class="prefixClass('fa fa-list-ul')" />
               </button>
               <!-- Ordered List -->
               <button
-                @click="editor.chain().focus().toggleOrderedList().run()"
+                v-tooltip="translations.orderedList"
                 :class="[editor.isActive('ordered_list') ? prefixClass('is-active') : '', prefixClass('menubar__button')]"
                 type="button"
                 :aria-label="translations.orderedList"
-                v-tooltip="translations.orderedList"
-                :disabled="readonly">
+                :disabled="readonly"
+                @click="editor.chain().focus().toggleOrderedList().run()">
                 <i :class="prefixClass('fa fa-list-ol')" />
               </button>
               &#10072;
@@ -207,11 +207,11 @@
               <button
                 v-for="heading in toolbar.headings"
                 :key="'heading_' + heading"
+                v-tooltip="translations.headingLevel"
                 type="button"
                 :class="[editor.isActive('heading', { level: heading }) ? prefixClass('is-active') : '', prefixClass('menubar__button')]"
-                @click="editor.chain().focus().toggleHeading({ level: heading }).run()"
-                v-tooltip="translations.headingLevel"
-                :disabled="readonly">
+                :disabled="readonly"
+                @click="editor.chain().focus().toggleHeading({ level: heading }).run()">
                 {{ `H${heading}` }}
               </button>
               &#10072;
@@ -219,11 +219,11 @@
             <!-- Obscure text -->
             <button
               v-if="obscureEnabled"
-              @click="editor.chain().focus().toggleObscure().run()"
+              v-tooltip="translations.obscureTitle"
               :class="[editor.isActive('obscure') ? prefixClass('is-active') : '', prefixClass('menubar__button')]"
               type="button"
-              v-tooltip="translations.obscureTitle"
-              :disabled="readonly">
+              :disabled="readonly"
+              @click="editor.chain().focus().toggleObscure().run()">
               <i
                 :class="prefixClass('fa fa-pencil-square')"
                 aria-hidden="true" />
@@ -231,20 +231,20 @@
             <!--Add links-->
             <button
               v-if="toolbar.linkButton"
-              @click.stop="showLinkPrompt(editor.commands.toggleLink, editor.getAttributes('customLink'))"
+              v-tooltip="translations.link.editOrInsert"
               :class="prefixClass('menubar__button')"
               type="button"
-              v-tooltip="translations.link.editOrInsert">
+              @click.stop="showLinkPrompt(editor.commands.toggleLink, editor.getAttributes('customLink'))">
               <i :class="prefixClass('fa fa-link')" />
             </button>
             <!-- Insert images-->
             <button
               v-if="toolbar.imageButton"
-              @click.stop="openUploadModal(null)"
+              v-tooltip="translations.insertImage"
               :class="prefixClass('menubar__button')"
               type="button"
-              v-tooltip="translations.insertImage"
-              :disabled="readonly">
+              :disabled="readonly"
+              @click.stop="openUploadModal(null)">
               <i :class="prefixClass('fa fa-picture-o')" />
             </button>
             <!-- Insert and edit tables -->
@@ -254,9 +254,9 @@
               <button
                 :class="[tableMenu.isOpen ? prefixClass('is-active') : '', prefixClass('menubar__button')]"
                 type="button"
+                :disabled="readonly"
                 @click.stop="toggleSubMenu('tableMenu', !tableMenu.isOpen)"
-                @keydown.tab.shift.exact="toggleSubMenu('tableMenu', false)"
-                :disabled="readonly">
+                @keydown.tab.shift.exact="toggleSubMenu('tableMenu', false)">
                 <i :class="prefixClass('fa fa-table')" />
                 <i :class="prefixClass('fa fa-caret-down')" />
               </button>
@@ -278,11 +278,11 @@
             <!-- Fullscreen -->
             <button
               v-if="toolbar.fullscreenButton"
-              @click="fullscreen"
+              v-tooltip="translations.fullscreen"
               :class="[isFullscreen ? prefixClass('is-active') : '', prefixClass('menubar__button float-right')]"
               type="button"
               :aria-label="translations.fullscreen"
-              v-tooltip="translations.fullscreen">
+              @click="fullscreen">
               <i
                 :class="prefixClass('fa fa-arrows-alt')"
                 aria-hidden="true" />
@@ -298,9 +298,9 @@
           so we can save the text entered in the textarea via a form element -->
           <input
             v-if="hiddenInput !== ''"
+            :id="hiddenInput"
             :data-dp-validate-if="dataDpValidateIf ? true : null"
             type="hidden"
-            :id="hiddenInput"
             :data-dp-validate-error-fieldname="dataDpValidateErrorFieldname || null"
             :name="hiddenInput"
             :class="[required ? prefixClass('is-required') : '', prefixClass('tiptap__input--hidden')]"
@@ -310,8 +310,8 @@
             v-if="!isFullscreen"
             aria-hidden="true"
             :class="prefixClass('fa fa-angle-down resizeVertical')"
-            @mousedown="resizeVertically"
-            draggable="true" />
+            draggable="true"
+            @mousedown="resizeVertically" />
         </div>
       </div>
     </div>
@@ -483,7 +483,7 @@ export default {
     },
 
     /**
-     * getFileByHash: (Optional) function that receives a file hash as parameter
+     * GetFileByHash: (Optional) function that receives a file hash as parameter
      * and returns a route to that file. Used for displaying images.
      */
     routes: {