quasar-ui-danx 0.3.11 → 0.3.12

package/src/components/ActionTable/TableSummaryRow.vue

@@ -1,21 +1,21 @@
 <template>
   <QTr
-      class="sticky-column-1 transition-all sticky-row"
-      :class="{'!bg-gray-100': !selectedCount, '!bg-blue-600 text-white selected': selectedCount, 'opacity-50': loading}"
+    class="sticky-column-1 transition-all sticky-row"
+    :class="{'!bg-gray-100': !selectedCount, '!bg-blue-600 text-white selected': selectedCount, 'opacity-50': loading}"
   >
     <QTd
-        :colspan="stickyColspan"
-        class="font-bold transition-all"
-        :class="{'!bg-gray-100 !pl-5': !selectedCount, '!bg-blue-600 text-white !pl-4': selectedCount}"
+      :colspan="stickyColspan"
+      class="font-bold transition-all"
+      :class="{'!bg-gray-100 !pl-5': !selectedCount, '!bg-blue-600 text-white !pl-4': selectedCount}"
     >
       <div class="flex flex-nowrap items-center">
         <div
-            v-if="selectedCount"
-            class="flex items-center"
+          v-if="selectedCount"
+          class="flex items-center"
         >
           <ClearIcon
-              class="w-6 mr-3"
-              @click="$emit('clear')"
+            class="w-6 mr-3"
+            @click="$emit('clear')"
           />
           {{ fNumber(selectedCount) }} {{ selectedLabel }}
         </div>
@@ -23,16 +23,16 @@
           {{ fNumber(itemCount) }} {{ label }}
         </div>
         <QSpinner
-            v-if="loading"
-            class="ml-3"
-            size="18"
+          v-if="loading"
+          class="ml-3"
+          size="18"
         />
       </div>
     </QTd>
     <QTd
-        v-for="column in summaryColumns"
-        :key="column.name"
-        :align="column.align || 'left'"
+      v-for="column in summaryColumns"
+      :key="column.name"
+      :align="column.align || 'left'"
     >
       <template v-if="summary">
         {{ formatValue(column) }}

package/src/components/AuditHistory/AuditHistoryItem.vue

@@ -5,14 +5,14 @@
       <div class="flex flex-nowrap items-center mt-4">
         <div class="bg-red-200 line-through p-2">
           <AuditHistoryItemValue
-              :type="change.type"
-              :value="change.oldValue"
+            :type="change.type"
+            :value="change.oldValue"
           />
         </div>
         <div class="bg-emerald-200 ml-2.5 p-2">
           <AuditHistoryItemValue
-              :type="change.type"
-              :value="change.newValue"
+            :type="change.type"
+            :value="change.newValue"
           />
         </div>
       </div>
@@ -24,8 +24,14 @@
       </template>
       <div>{{ item.account }}</div>
       <div>
-        <a v-if="item.audit_request_id" :href="novaUrl" target="_blank">{{ fLocalizedDateTime(item.timestamp) }}</a>
-        <template v-else>{{ fLocalizedDateTime(item.timestamp) }}</template>
+        <a
+          v-if="item.audit_request_id"
+          :href="novaUrl"
+          target="_blank"
+        >{{ fLocalizedDateTime(item.timestamp) }}</a>
+        <template v-else>
+          {{ fLocalizedDateTime(item.timestamp) }}
+        </template>
       </div>
     </div>
   </div>

package/src/components/AuditHistory/AuditHistoryItemValue.vue

@@ -2,16 +2,16 @@
   <div class="flex space-x-2">
     <template v-if="type === 'SINGLE_FILE'">
       <FilePreview
-          :image="value"
-          class="w-24"
+        :image="value"
+        class="w-24"
       />
     </template>
     <template v-else-if="type === 'MULTI_FILE'">
       <FilePreview
-          v-for="file in value"
-          :key="'file-' + file.id"
-          :image="file"
-          class="w-24 mb-2"
+        v-for="file in value"
+        :key="'file-' + file.id"
+        :image="file"
+        class="w-24 mb-2"
       />
     </template>
     <template v-else-if="type === 'WYSIWYG'">

package/src/components/DragAndDrop/HandleDraggable.vue

@@ -1,13 +1,13 @@
 <template>
   <div
-      :class="{
+    :class="{
       'cursor-ew-resize': direction === 'horizontal',
       'cursor-ns-resize': direction === 'vertical',
     }"
-      class="flex justify-center items-center w-full h-full"
-      draggable="true"
-      @dragstart="dragAndDrop.dragStart"
-      @dragend="dragAndDrop.dragEnd"
+    class="flex justify-center items-center w-full h-full"
+    draggable="true"
+    @dragstart="dragAndDrop.dragStart"
+    @dragend="dragAndDrop.dragEnd"
   >
     <slot />
   </div>
@@ -34,20 +34,20 @@ const props = defineProps({
 });
 
 const dragAndDrop = new DragAndDrop()
-    .setDropZone(props.dropZone)
-    .setOptions({
-      showPlaceholder: true,
-      direction: props.direction,
-      hideDragImage: true
-    })
-    .onDragging(useDebounceFn(() => {
-      emit("resize", {
-        distance: dragAndDrop.getDistance(),
-        percent: dragAndDrop.getPercentChange(),
-        startDropZoneSize: dragAndDrop.startSize,
-        dropZoneSize: dragAndDrop.getDropZoneSize()
-      });
-    }, 20, { maxWait: 30 }))
-    .onStart(() => emit("start"))
-    .onEnd(() => emit("end"));
+  .setDropZone(props.dropZone)
+  .setOptions({
+    showPlaceholder: true,
+    direction: props.direction,
+    hideDragImage: true
+  })
+  .onDragging(useDebounceFn(() => {
+    emit("resize", {
+      distance: dragAndDrop.getDistance(),
+      percent: dragAndDrop.getPercentChange(),
+      startDropZoneSize: dragAndDrop.startSize,
+      dropZoneSize: dragAndDrop.getDropZoneSize()
+    });
+  }, 20, { maxWait: 30 }))
+  .onStart(() => emit("start"))
+  .onEnd(() => emit("end"));
 </script>

package/src/components/DragAndDrop/ListItemDraggable.vue

@@ -1,13 +1,17 @@
 <template>
   <div
-      class="cursor-move"
-      draggable="true"
-      @dragstart="dragAndDrop.dragStart"
-      @dragend="dragAndDrop.dragEnd"
+    class="cursor-move"
+    draggable="true"
+    @dragstart="dragAndDrop.dragStart"
+    @dragend="dragAndDrop.dragEnd"
   >
     <div class="flex items-center">
       <div v-if="showHandle">
-        <SvgImg :svg="DragHandleIcon" class="w-4 h-4" alt="drag-handle" />
+        <SvgImg
+          :svg="DragHandleIcon"
+          class="w-4 h-4"
+          alt="drag-handle"
+        />
       </div>
       <div class="flex-grow">
         <slot />
@@ -39,15 +43,15 @@ const props = defineProps({
 });
 
 const dragAndDrop = new ListDragAndDrop()
-    .setDropZone(props.dropZone)
-    .setOptions({ showPlaceholder: true, direction: props.direction })
-    .onPositionChange((newPosition, oldPosition) => {
-      emit("position", newPosition);
+  .setDropZone(props.dropZone)
+  .setOptions({ showPlaceholder: true, direction: props.direction })
+  .onPositionChange((newPosition, oldPosition) => {
+    emit("position", newPosition);
 
-      if (props.listItems) {
-        const items = [...props.listItems];
-        items.splice(newPosition, 0, items.splice(oldPosition, 1)[0]);
-        emit("update:list-items", items);
-      }
-    });
+    if (props.listItems) {
+      const items = [...props.listItems];
+      items.splice(newPosition, 0, items.splice(oldPosition, 1)[0]);
+      emit("update:list-items", items);
+    }
+  });
 </script>

package/src/components/PanelsDrawer/PanelsDrawer.vue

@@ -1,11 +1,11 @@
 <template>
   <ContentDrawer
-      position="right"
-      :show="true"
-      overlay
-      content-class="h-full"
-      title=""
-      @update:show="$emit('close')"
+    position="right"
+    :show="true"
+    overlay
+    content-class="h-full"
+    title=""
+    @update:show="$emit('close')"
   >
     <div class="flex flex-col flex-nowrap h-full">
       <div class="flex items-center px-6 py-4 border-b">
@@ -23,13 +23,20 @@
         <div class="flex items-stretch flex-nowrap h-full">
           <div class="border-r w-[13.5rem] overflow-y-auto">
             <PanelsDrawerTabs
-                v-model="activePanel"
-                :panels="panels"
-                @update:model-value="$emit('update:model-value', $event)"
+              v-model="activePanel"
+              :panels="panels"
+              @update:model-value="$emit('update:model-value', $event)"
             />
           </div>
-          <PanelsDrawerPanels :panels="panels" :active-panel="activePanel" :class="panelsClass" />
-          <div v-if="$slots['right-sidebar']" class="border-l overflow-y-auto">
+          <PanelsDrawerPanels
+            :panels="panels"
+            :active-panel="activePanel"
+            :class="panelsClass"
+          />
+          <div
+            v-if="$slots['right-sidebar']"
+            class="border-l overflow-y-auto"
+          >
             <slot name="right-sidebar" />
           </div>
         </div>

package/src/components/PanelsDrawer/PanelsDrawerPanels.vue

@@ -1,12 +1,16 @@
 <template>
   <QTabPanels
-      :model-value="activePanel"
-      class="overflow-y-auto bg-gray-100 h-full transition-all"
+    :model-value="activePanel"
+    class="overflow-y-auto bg-gray-100 h-full transition-all"
   >
-    <QTabPanel v-for="panel in panels" :key="panel.name" :name="panel.name">
+    <QTabPanel
+      v-for="panel in panels"
+      :key="panel.name"
+      :name="panel.name"
+    >
       <RenderVnode
-          v-if="panel.vnode"
-          :vnode="panel.vnode"
+        v-if="panel.vnode"
+        :vnode="panel.vnode"
       />
     </QTabPanel>
   </QTabPanels>

package/src/components/PanelsDrawer/PanelsDrawerTabs.vue

@@ -1,23 +1,28 @@
 <template>
   <QTabs
-      :model-value="modelValue"
-      vertical
-      align="left"
-      :class="cls['panel-tabs']"
-      no-caps
-      @update:model-value="$emit('update:model-value', $event)"
+    :model-value="modelValue"
+    vertical
+    align="left"
+    :class="cls['panel-tabs']"
+    no-caps
+    @update:model-value="$emit('update:model-value', $event)"
   >
     <template v-for="panel in panels">
       <template v-if="panel.enabled === undefined || !!panel.enabled">
         <RenderVnode
-            v-if="panel.tabVnode"
-            :key="panel.name"
-            :vnode="panel.tabVnode(modelValue)"
-            :is-active="modelValue === panel.name"
-            :name="panel.name"
-            :label="panel.label"
+          v-if="panel.tabVnode"
+          :key="panel.name"
+          :vnode="panel.tabVnode(modelValue)"
+          :is-active="modelValue === panel.name"
+          :name="panel.name"
+          :label="panel.label"
+        />
+        <QTab
+          v-else
+          :key="panel.name"
+          :name="panel.name"
+          :label="panel.label"
         />
-        <QTab v-else :key="panel.name" :name="panel.name" :label="panel.label" />
       </template>
     </template>
   </QTabs>

package/src/components/Utility/Buttons/ExportButton.vue

@@ -1,5 +1,9 @@
 <template>
-  <QBtn class="bg-slate-200" :loading="isExporting" @click="onExport">
+  <QBtn
+    class="bg-slate-200"
+    :loading="isExporting"
+    @click="onExport"
+  >
     <ExportIcon class="w-5" />
   </QBtn>
 </template>

package/src/components/Utility/Buttons/RefreshButton.vue

@@ -1,7 +1,7 @@
 <template>
   <QBtn
-      class="bg-slate-200"
-      :loading="loading"
+    class="bg-slate-200"
+    :loading="loading"
   >
     <RefreshIcon class="w-5" />
   </QBtn>

package/src/components/Utility/Controls/PreviousNextControls.vue

@@ -1,18 +1,18 @@
 <template>
   <div class="previous-next-controls">
     <QBtn
-        class="bg-slate-200 border-gray-300 border border-solid !rounded-r-none !p-2 !min-w-0"
-        :disable="isLoading"
-        :loading="isLoading"
-        @click="$emit('next', -1)"
+      class="bg-slate-200 border-gray-300 border border-solid !rounded-r-none !p-2 !min-w-0"
+      :disable="isLoading"
+      :loading="isLoading"
+      @click="$emit('next', -1)"
     >
       <SkipPreviousIcon class="w-6" />
     </QBtn>
     <QBtn
-        class="bg-slate-200 border-gray-300 border border-solid border-l-0 !rounded-l-none !p-2 !min-w-0"
-        :disable="isLoading"
-        :loading="isLoading"
-        @click="$emit('next', 1)"
+      class="bg-slate-200 border-gray-300 border border-solid border-l-0 !rounded-l-none !p-2 !min-w-0"
+      :disable="isLoading"
+      :loading="isLoading"
+      @click="$emit('next', 1)"
     >
       <SkipNextIcon class="w-6" />
     </QBtn>

package/src/components/Utility/Dialogs/ConfirmDialog.vue

@@ -1,45 +1,48 @@
 <template>
   <QDialog
-      :full-height="fullHeight"
-      :full-width="fullWidth"
-      :model-value="!!modelValue"
-      :no-backdrop-dismiss="!backdropDismiss"
-      :maximized="maximized"
-      @update:model-value="onClose"
+    :full-height="fullHeight"
+    :full-width="fullWidth"
+    :model-value="!!modelValue"
+    :no-backdrop-dismiss="!backdropDismiss"
+    :maximized="maximized"
+    @update:model-value="onClose"
   >
     <QCard class="flex flex-col flex-nowrap">
       <QCardSection
-          v-if="title || $slots.title"
-          class="pl-6 pr-10 border-b border-gray-300"
+        v-if="title || $slots.title"
+        class="pl-6 pr-10 border-b border-gray-300"
       >
         <h3
-            class="font-normal flex items-center"
-            :class="titleClass"
+          class="font-normal flex items-center"
+          :class="titleClass"
         >
-          <slot name="title">{{ title }}</slot>
+          <slot name="title">
+            {{ title }}
+          </slot>
         </h3>
         <div
-            v-if="subtitle"
-            class="mt-1 text-sm"
-        >{{ subtitle }}
+          v-if="subtitle"
+          class="mt-1 text-sm"
+        >
+          {{ subtitle }}
         </div>
       </QCardSection>
       <QCardSection v-if="$slots.toolbar">
         <slot name="toolbar" />
       </QCardSection>
       <QCardSection
-          v-if="content || $slots.default"
-          class="px-6 bg-gray-100 flex-grow max-h-full overflow-y-auto"
-          :class="contentClass"
+        v-if="content || $slots.default"
+        class="px-6 bg-gray-100 flex-grow max-h-full overflow-y-auto"
+        :class="contentClass"
       >
         <slot>{{ content }}</slot>
       </QCardSection>
       <div class="flex px-6 py-4 border-t border-gray-300">
         <div class="flex-grow">
           <QBtn
-              :label="cancelText"
-              class="action-btn btn-white-gray"
-              @click="onClose"
+            :label="cancelText"
+            class="action-btn btn-white-gray"
+            @click="onClose"
           >
             <slot name="cancel-text" />
           </QBtn>
@@ -47,21 +50,21 @@
         <slot name="actions" />
         <div v-if="!hideConfirm">
           <QBtn
-              :label="$slots['confirm-text'] ? '' : confirmText"
-              class="action-btn ml-4"
-              :class="confirmClass"
-              :loading="isSaving"
-              :disable="disabled"
-              data-testid="confirm-button"
-              @click="onConfirm"
+            :label="$slots['confirm-text'] ? '' : confirmText"
+            class="action-btn ml-4"
+            :class="confirmClass"
+            :loading="isSaving"
+            :disable="disabled"
+            data-testid="confirm-button"
+            @click="onConfirm"
           >
             <slot name="confirm-text" />
           </QBtn>
         </div>
       </div>
       <a
-          class="absolute top-0 right-0 p-4 text-black"
-          @click="onClose"
+        class="absolute top-0 right-0 p-4 text-black"
+        @click="onClose"
       >
         <CloseIcon class="w-5" />
       </a>

package/src/components/Utility/Dialogs/FullScreenDialog.vue

@@ -1,16 +1,19 @@
 <template>
   <QDialog
-      :model-value="modelValue"
-      maximized
-      transition-show="slide-up"
-      transition-hide="slide-down"
-      @update:model-value="onClose"
+    :model-value="modelValue"
+    maximized
+    transition-show="slide-up"
+    transition-hide="slide-down"
+    @update:model-value="onClose"
   >
-    <div class="flex justify-center min-w-xs" :class="computedClass">
+    <div
+      class="flex justify-center min-w-xs"
+      :class="computedClass"
+    >
       <div
-          v-if="closeable"
-          v-close-popup
-          class="p-4 m-4 absolute-top-right top right cursor-pointer"
+        v-if="closeable"
+        v-close-popup
+        class="p-4 m-4 absolute-top-right top right cursor-pointer"
       >
         <XIcon class="w-5 h-5" />
       </div>

package/src/components/Utility/Dialogs/FullscreenCarouselDialog.vue

@@ -1,47 +1,51 @@
 <template>
   <QDialog
-      :model-value="true"
-      maximized
-      @update:model-value="$emit('close')"
-      @keyup.left="carousel.previous()"
-      @keyup.right="carousel.next()"
+    :model-value="true"
+    maximized
+    @update:model-value="$emit('close')"
+    @keyup.left="carousel.previous()"
+    @keyup.right="carousel.next()"
   >
     <div class="absolute top-0 left-0 w-full h-full">
       <QCarousel
-          ref="carousel"
-          v-model="currentSlide"
-          height="100%"
-          swipeable
-          animated
-          :thumbnails="files.length > 1"
-          infinite
-          :class="cls['carousel']"
+        ref="carousel"
+        v-model="currentSlide"
+        height="100%"
+        swipeable
+        animated
+        :thumbnails="files.length > 1"
+        infinite
+        :class="cls['carousel']"
       >
         <QCarouselSlide
-            v-for="file in files"
-            :key="'file-' + file.id"
-            :name="file.id"
-            :img-src="getThumbUrl(file)"
+          v-for="file in files"
+          :key="'file-' + file.id"
+          :name="file.id"
+          :img-src="getThumbUrl(file)"
         >
           <div :class="cls['slide-image']">
             <template v-if="isVideo(file)">
               <video
-                  class="max-h-full w-full"
-                  controls
+                class="max-h-full w-full"
+                controls
               >
                 <source
-                    :src="file.url + '#t=0.1'"
-                    :type="file.mime"
-                />
+                  :src="file.url + '#t=0.1'"
+                  :type="file.mime"
+                >
               </video>
             </template>
-            <img v-else :alt="file.filename" :src="file.url" />
+            <img
+              v-else
+              :alt="file.filename"
+              :src="file.url"
+            >
           </div>
         </QCarouselSlide>
       </QCarousel>
       <CloseIcon
-          class="absolute top-4 right-4 cursor-pointer text-white w-8 h-8"
-          @click="$emit('close')"
+        class="absolute top-4 right-4 cursor-pointer text-white w-8 h-8"
+        @click="$emit('close')"
       />
     </div>
   </QDialog>
@@ -73,7 +77,7 @@ function getThumbUrl(file) {
   } else if (isVideo(file)) {
     // Base64 encode a PlayIcon for the placeholder image
     return `data:image/svg+xml;base64,${btoa(
-        `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M0 0h24v24H0z" fill="none"/><path d="M8 5v14l11-7z"/></svg>`
+      `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M0 0h24v24H0z" fill="none"/><path d="M8 5v14l11-7z"/></svg>`
     )}`;
   } else {
     return file.url;