quasar-ui-danx 0.3.10 → 0.3.12

package/src/components/ActionTable/Form/Fields/WysiwygField.vue

@@ -1,31 +1,31 @@
 <template>
   <div>
     <FieldLabel
-        v-if="!noLabel"
-        :field="field"
-        :show-name="showName"
-        class="text-sm font-semibold text-gray-700 block mb-2"
+      v-if="!noLabel"
+      :field="field"
+      :show-name="showName"
+      class="text-sm font-semibold text-gray-700 block mb-2"
     />
     <template v-if="readonly">
       <div
-          class="border border-gray-300 rounded-md p-2 bg-gray-100"
-          v-html="modelValue"
+        class="border border-gray-300 rounded-md p-2 bg-gray-100"
+        v-html="modelValue"
       />
     </template>
     <TinyMceEditor
-        v-else
-        class="mt-2"
-        :api-key="apiKey"
-        :disabled="disable"
-        :model-value="modelValue"
-        @update:model-value="$emit('update:model-value', $event)"
+      v-else
+      class="mt-2"
+      :api-key="danxOptions.tinyMceApiKey"
+      :disabled="disable"
+      :model-value="modelValue"
+      @update:model-value="$emit('update:model-value', $event)"
     />
   </div>
 </template>
 
 <script setup>
 import { default as TinyMceEditor } from "@tinymce/tinymce-vue";
-import { apiKey } from "../../../../vendor/tinymce-config";
+import { danxOptions } from "../../../../config";
 import FieldLabel from "./FieldLabel";
 
 defineEmits(["update:model-value"]);

package/src/components/ActionTable/Form/RenderedForm.vue

@@ -137,6 +137,10 @@ const props = defineProps({
   disable: Boolean,
   readonly: Boolean,
   saving: Boolean,
+  emptyValue: {
+    type: [String, Number, Boolean],
+    default: undefined
+  },
   canModifyVariations: Boolean
 });
 
@@ -186,7 +190,7 @@ function onInput(name, value) {
   const newFieldResponse = {
     name,
     variation: currentVariation.value || "",
-    value
+    value: value === undefined ? props.emptyValue : value
   };
   const newValues = replace(props.values, fieldResponse, newFieldResponse, true);
   emit("update:values", newValues);

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>