quasar-ui-danx 0.2.16 → 0.2.18

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

@@ -20,10 +20,10 @@
 </template>
 
 <script setup>
-import { computed } from 'vue';
-import { XIcon } from '../../../svg';
+import { computed } from "vue";
+import { XIcon } from "../../../svg";
 
-const emit = defineEmits(['update:model-value', 'close']);
+const emit = defineEmits(["update:model-value", "close"]);
 const props = defineProps({
   modelValue: Boolean,
   center: Boolean,
@@ -33,14 +33,14 @@ const props = defineProps({
 
 let computedClass = computed(() => {
   return {
-    'bg-blue-600 text-white': props.blue,
-    'bg-white text-gray-base': !props.blue,
-    'items-center': props.center
+    "bg-blue-600 text-white": props.blue,
+    "bg-white text-gray-base": !props.blue,
+    "items-center": props.center
   };
 });
 
 function onClose() {
-  emit('update:model-value', false);
-  emit('close');
+  emit("update:model-value", false);
+  emit("close");
 }
 </script>

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

@@ -38,19 +38,19 @@
             <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')"
-        />
+      </QCarousel>
+      <CloseIcon
+          class="absolute top-4 right-4 cursor-pointer text-white w-8 h-8"
+          @click="$emit('close')"
+      />
     </div>
-    </QDialog>
+  </QDialog>
 </template>
 <script setup>
-import { ref } from 'vue';
-import { XIcon as CloseIcon } from '../../../svg';
+import { ref } from "vue";
+import { XIcon as CloseIcon } from "../../../svg";
 
-defineEmits(['close']);
+defineEmits(["close"]);
 const props = defineProps({
   files: {
     type: Array,
@@ -58,14 +58,14 @@ const props = defineProps({
   },
   defaultSlide: {
     type: String,
-    default: ''
+    default: ""
   }
 });
 
 const carousel = ref(null);
 const currentSlide = ref(props.defaultSlide);
 function isVideo(file) {
-  return file.mime?.startsWith('video');
+  return file.mime?.startsWith("video");
 }
 function getThumbUrl(file) {
   if (file.thumb) {

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

@@ -40,7 +40,7 @@
               @click="onClose"
           >
             <slot name="done-text" />
-            </QBtn>
+          </QBtn>
         </div>
       </div>
       <a
@@ -49,31 +49,31 @@
       >
         <CloseIcon class="w-5" />
       </a>
-      </QCard>
-      </QDialog>
+    </QCard>
+  </QDialog>
 </template>
 
 <script setup>
-import { XIcon as CloseIcon } from '@heroicons/vue/outline';
+import { XIcon as CloseIcon } from "@heroicons/vue/outline";
 
-const emit = defineEmits(['update:model-value', 'close']);
+const emit = defineEmits(["update:model-value", "close"]);
 defineProps({
   modelValue: { type: [Boolean, Object], default: true },
   title: {
     type: String,
-    default: ''
+    default: ""
   },
   titleClass: {
     type: String,
-    default: ''
+    default: ""
   },
   subtitle: {
     type: String,
-    default: ''
+    default: ""
   },
   content: {
     type: String,
-    default: ''
+    default: ""
   },
   backdropDismiss: Boolean,
   maximized: Boolean,
@@ -81,12 +81,12 @@ defineProps({
   fullHeight: Boolean,
   doneText: {
     type: String,
-    default: 'Done'
+    default: "Done"
   }
 });
 
 function onClose() {
-  emit('update:model-value', false);
-  emit('close');
+  emit("update:model-value", false);
+  emit("close");
 }
 </script>

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

@@ -15,19 +15,19 @@
   </ConfirmDialog>
 </template>
 <script setup>
-import { ref } from 'vue';
-import ConfirmDialog from './ConfirmDialog';
+import { ref } from "vue";
+import ConfirmDialog from "./ConfirmDialog";
 
-defineEmits(['confirm', 'close', 'update:input']);
+defineEmits(["confirm", "close", "update:input"]);
 const props = defineProps({
   ...ConfirmDialog.props,
   title: {
     type: String,
-    default: 'Enter Value'
+    default: "Enter Value"
   },
   input: {
     type: [Number, String],
-    default: ''
+    default: ""
   }
 });
 

package/src/components/Utility/Files/FilePreview.vue

@@ -98,17 +98,17 @@
 </template>
 
 <script setup>
-import { DocumentTextIcon as TextFileIcon, DownloadIcon, PlayIcon } from '@heroicons/vue/outline';
-import { computed, ref } from 'vue';
-import { download } from '../../../helpers';
-import { ImageIcon, PdfIcon, TrashIcon as RemoveIcon } from '../../../svg';
-import { FullScreenCarouselDialog } from '../Dialogs';
+import { DocumentTextIcon as TextFileIcon, DownloadIcon, PlayIcon } from "@heroicons/vue/outline";
+import { computed, ref } from "vue";
+import { download } from "../../../helpers";
+import { ImageIcon, PdfIcon, TrashIcon as RemoveIcon } from "../../../svg";
+import { FullScreenCarouselDialog } from "../Dialogs";
 
-const emit = defineEmits(['remove']);
+const emit = defineEmits(["remove"]);
 const props = defineProps({
   src: {
     type: String,
-    default: ''
+    default: ""
   },
   image: {
     type: Object,
@@ -124,7 +124,7 @@ const props = defineProps({
   },
   downloadButtonClass: {
     type: String,
-    default: 'bg-blue-600 text-white'
+    default: "bg-blue-600 text-white"
   },
   downloadable: Boolean,
   removable: Boolean,
@@ -140,7 +140,7 @@ const computedImage = computed(() => {
     return {
       id: props.src,
       url: props.src,
-      type: 'image/' + props.src.split('.').pop().toLowerCase()
+      type: "image/" + props.src.split(".").pop().toLowerCase()
     };
   }
   return null;
@@ -168,7 +168,7 @@ function onRemove() {
       isConfirmingRemove.value = false;
     }, 2000);
   } else {
-    emit('remove');
+    emit("remove");
   }
 }
 </script>

package/src/components/Utility/Formats/GpsCoordinatesFormat.vue

@@ -14,15 +14,15 @@ import { LocationMarkerIcon as LocationIcon } from "@heroicons/vue/solid";
 defineProps({
   location: {
     type: Object,
-    default: null,
+    default: null
   },
   decimals: {
     type: Number,
-    default: 6,
+    default: 6
   },
   iconClass: {
     type: String,
-    default: "w-7",
-  },
+    default: "w-7"
+  }
 });
 </script>

package/src/components/Utility/Formats/IconWithTextFormat.vue

@@ -14,7 +14,7 @@ defineProps({
   },
   iconClass: {
     type: String,
-    default: 'w-6'
+    default: "w-6"
   },
   text: {
     type: String,
@@ -22,7 +22,7 @@ defineProps({
   },
   textClass: {
     type: String,
-    default: 'ml-2'
+    default: "ml-2"
   }
 });
 </script>

package/src/components/Utility/Formats/LabelValueFormat.vue

@@ -5,7 +5,7 @@
       <template v-if="loading">
         <QSpinnerTail />
       </template>
-      <slot v-else>{{ value || '-' }}</slot>
+      <slot v-else>{{ value || "-" }}</slot>
     </div>
   </div>
 </template>
@@ -17,7 +17,7 @@ defineProps({
   },
   value: {
     type: [String, Number],
-    default: '-'
+    default: "-"
   },
   dense: Boolean,
   nowrap: Boolean,

package/src/components/Utility/Layouts/CollapsableSidebar.vue

@@ -44,59 +44,59 @@
   </div>
 </template>
 <script setup>
-import { ChevronLeftIcon as ToggleIcon } from '@heroicons/vue/outline';
-import { computed, onMounted, ref, watch } from 'vue';
+import { ChevronLeftIcon as ToggleIcon } from "@heroicons/vue/outline";
+import { computed, onMounted, ref, watch } from "vue";
 
-const emit = defineEmits(['collapse', 'update:collapse']);
+const emit = defineEmits(["collapse", "update:collapse"]);
 const props = defineProps({
   rightSide: Boolean,
   displayClass: {
     type: String,
-    default: 'flex flex-col'
+    default: "flex flex-col"
   },
   maxWidth: {
     type: String,
-    default: '13.5rem'
+    default: "13.5rem"
   },
   minWidth: {
     type: String,
-    default: '5.5rem'
+    default: "5.5rem"
   },
   disabled: Boolean,
   collapse: Boolean,
   name: {
     type: String,
-    default: 'sidebar'
+    default: "sidebar"
   },
   toggleAtTop: Boolean,
   toggleClass: {
     type: String,
-    default: ''
+    default: ""
   },
   hideToggleOnCollapse: Boolean
 });
 
 const isCollapsed = ref(props.collapse);
 
-const stored = localStorage.getItem(props.name + '-is-collapsed');
+const stored = localStorage.getItem(props.name + "-is-collapsed");
 
 if (stored !== null) {
-  isCollapsed.value = stored === '1';
+  isCollapsed.value = stored === "1";
 }
 function toggleCollapse() {
   setCollapse(!isCollapsed.value);
-  emit('collapse', isCollapsed.value);
-  emit('update:collapse', isCollapsed.value);
+  emit("collapse", isCollapsed.value);
+  emit("update:collapse", isCollapsed.value);
 }
 
 function setCollapse(state) {
   isCollapsed.value = state;
-  localStorage.setItem(props.name + '-is-collapsed', isCollapsed.value ? '1' : '');
+  localStorage.setItem(props.name + "-is-collapsed", isCollapsed.value ? "1" : "");
 }
 
 onMounted(() => {
-  emit('collapse', isCollapsed.value);
-  emit('update:collapse', isCollapsed.value);
+  emit("collapse", isCollapsed.value);
+  emit("update:collapse", isCollapsed.value);
 });
 const style = computed(() => {
   return {

package/src/components/Utility/Layouts/ContentDrawer.vue

@@ -25,9 +25,9 @@
 </template>
 
 <script setup>
-import { computed } from 'vue';
+import { computed } from "vue";
 
-const emit = defineEmits(['update:show']);
+const emit = defineEmits(["update:show"]);
 
 const props = defineProps({
   show: Boolean,
@@ -35,21 +35,21 @@ const props = defineProps({
   overlay: Boolean,
   position: {
     type: String,
-    default: 'bottom'
+    default: "bottom"
   },
   contentClass: {
     type: String,
-    default: 'py-8 px-12'
+    default: "py-8 px-12"
   },
   title: {
     type: String,
-    default: 'Edit'
+    default: "Edit"
   }
 });
 
 const isShowing = computed({
   get: () => props.show,
-  set: (value) => emit('update:show', value)
+  set: (value) => emit("update:show", value)
 });
 </script>
 

package/src/components/Utility/Popovers/InteractiveTooltip.vue

@@ -12,17 +12,17 @@
   </QTooltip>
 </template>
 <script setup>
-import { onMounted, ref } from 'vue';
+import { onMounted, ref } from "vue";
 
-defineProps({ tooltip: { type: String, default: '' } });
+defineProps({ tooltip: { type: String, default: "" } });
 const show = ref(false);
 const tooltipBox = ref(null);
 const isHovering = ref(false);
 const isHoveringParent = ref(false);
 let timeout = null;
 onMounted(() => {
-  tooltipBox.value.$el.parentNode.addEventListener('mouseover', onEnterParent);
-  tooltipBox.value.$el.parentNode.addEventListener('mouseleave', onLeaveParent);
+  tooltipBox.value.$el.parentNode.addEventListener("mouseover", onEnterParent);
+  tooltipBox.value.$el.parentNode.addEventListener("mouseleave", onLeaveParent);
 });
 function onEnterParent() {
   show.value = true;

package/src/components/Utility/Popovers/PopoverMenu.vue

@@ -5,56 +5,56 @@
   >
     <QTooltip v-if="$slots.tooltip || tooltip">
       <slot name="tooltip">{{ tooltip }}</slot>
-      </QTooltip>
-      <Transition
-          mode="out-in"
-          :duration="150"
-      >
-        <RenderComponent
-            v-if="loading"
-            :component="loadingComponent"
-        />
-        <MenuIcon
-            v-else
-            class="w-4 text-black"
-        />
-      </Transition>
-      <QMenu
-          v-if="!disabled"
-          auto-close
-      >
-        <QList>
-          <template v-for="item in items">
-            <a
-                v-if="item.url"
-                :key="item.url"
-                class="q-item"
-                target="_blank"
-                :href="item.url"
-                :class="item.class"
-            >
-              {{ item.label }}
-            </a>
-            <QItem
-                v-else
-                :key="item.name || item.action"
-                clickable
-                :class="item.class"
-                @click="onAction(item)"
-            >
-              {{ item.label }}
-              </QItem>
-          </template>
-          </QList>
-          </QMenu>
+    </QTooltip>
+    <Transition
+        mode="out-in"
+        :duration="150"
+    >
+      <RenderComponent
+          v-if="loading"
+          :component="loadingComponent"
+      />
+      <MenuIcon
+          v-else
+          class="w-4 text-black"
+      />
+    </Transition>
+    <QMenu
+        v-if="!disabled"
+        auto-close
+    >
+      <QList>
+        <template v-for="item in items">
+          <a
+              v-if="item.url"
+              :key="item.url"
+              class="q-item"
+              target="_blank"
+              :href="item.url"
+              :class="item.class"
+          >
+            {{ item.label }}
+          </a>
+          <QItem
+              v-else
+              :key="item.name || item.action"
+              clickable
+              :class="item.class"
+              @click="onAction(item)"
+          >
+            {{ item.label }}
+          </QItem>
+        </template>
+      </QList>
+    </QMenu>
   </a>
 </template>
 <script setup>
-import { DotsVerticalIcon as MenuIcon } from '@heroicons/vue/outline';
-import { QSpinner } from 'quasar';
-import { RenderComponent } from '../Tools';
+import { DotsVerticalIcon as MenuIcon } from "@heroicons/vue/outline";
+import { QSpinner } from "quasar";
+import { RenderComponent } from "../Tools";
 
-const emit = defineEmits(['action', 'action-item']);
+const emit = defineEmits(["action", "action-item"]);
 defineProps({
   items: {
     type: Array,
@@ -73,13 +73,13 @@ defineProps({
     type: [Function, Object],
     default: () => ({
       is: QSpinner,
-      props: { class: 'w-4 h-4 text-black' }
+      props: { class: "w-4 h-4 text-black" }
     })
   }
 });
 
 function onAction(item) {
-  emit('action', item.name || item.action);
-  emit('action-item', item);
+  emit("action", item.name || item.action);
+  emit("action-item", item);
 }
 </script>

package/src/components/Utility/Tabs/BadgeTab.vue

@@ -26,7 +26,7 @@ defineProps({
   },
   count: {
     type: [String, Number],
-    default: ''
+    default: ""
   }
 });
 </script>

package/src/components/Utility/Tabs/IndicatorTab.vue

@@ -18,11 +18,11 @@
         />
       </div>
     </div>
-    </QTab>
+  </QTab>
 </template>
 <script setup>
-import { ExclamationCircleIcon as OverdueIcon } from '@heroicons/vue/solid';
-import { WarningIcon } from '../../../svg';
+import { ExclamationCircleIcon as OverdueIcon } from "@heroicons/vue/solid";
+import { WarningIcon } from "../../../svg";
 
 defineProps({
   name: {

package/src/components/Utility/Tools/ActionVnode.vue

@@ -10,9 +10,9 @@
   </div>
 </template>
 <script setup>
-import { ref } from 'vue';
-import { activeActionVnode } from '../../../helpers';
-import RenderVnode from './RenderVnode';
+import { ref } from "vue";
+import { activeActionVnode } from "../../../helpers";
+import RenderVnode from "./RenderVnode";
 
 const isSaving = ref(false);
 async function onConfirm(input) {

package/src/components/Utility/Tools/RenderComponent.vue

@@ -13,9 +13,9 @@
   />
 </template>
 <script setup>
-import { computed } from 'vue';
+import { computed } from "vue";
 
-defineEmits(['action']);
+defineEmits(["action"]);
 const props = defineProps({
   component: {
     type: [Function, Object],
@@ -33,7 +33,7 @@ const props = defineProps({
 
 const content = computed(() => resolvedComponent.value?.value || resolvedComponent.value?.props?.text);
 const resolvedComponent = computed(() => {
-  if (typeof props.component === 'function') {
+  if (typeof props.component === "function") {
     return props.component(...props.params);
   }
   return props.component;

package/src/components/Utility/Transitions/StaggeredListTransition.vue

@@ -13,13 +13,13 @@
 </template>
 
 <script setup>
-import gsap from 'gsap';
-import { computed, ref } from 'vue';
+import gsap from "gsap";
+import { computed, ref } from "vue";
 
 const props = defineProps({
   height: {
     type: [String, Number],
-    default: 'auto'
+    default: "auto"
   },
   duration: {
     type: Number,

package/src/helpers/array.ts

@@ -6,21 +6,21 @@
  * @returns {*[]}
  */
 export function replace(array, item, newItem = undefined) {
-  const index =
-    typeof item === "function" ? array.findIndex(item) : array.indexOf(item);
-  if (index === false) {
-    console.error("Item not found in array", item, array);
-    throw new Error("Item not found in array");
-  }
-  const newArray = [...array];
-  newItem !== undefined
-    ? newArray.splice(index, 1, newItem)
-    : newArray.splice(index, 1);
-  return newArray;
+    const index =
+        typeof item === "function" ? array.findIndex(item) : array.indexOf(item);
+    if (index === false) {
+        console.error("Item not found in array", item, array);
+        throw new Error("Item not found in array");
+    }
+    const newArray = [...array];
+    newItem !== undefined
+        ? newArray.splice(index, 1, newItem)
+        : newArray.splice(index, 1);
+    return newArray;
 }
 
 export function remove(array, item) {
-  return replace(array, item);
+    return replace(array, item);
 }
 
 /**
@@ -30,8 +30,8 @@ export function remove(array, item) {
  * @returns {*}
  */
 export function uniqueBy(array, cb) {
-  return array.filter((a, index, self) => {
-    // Check if the current element 'a' is the first occurrence in the array
-    return index === self.findIndex((b) => cb(a, b));
-  });
+    return array.filter((a, index, self) => {
+        // Check if the current element 'a' is the first occurrence in the array
+        return index === self.findIndex((b) => cb(a, b));
+    });
 }