quasar-ui-danx 0.3.10 → 0.3.12

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;

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

@@ -1,51 +1,54 @@
 <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="content || $slots.default"
-          class="px-6 bg-gray-100 flex-grow max-h-full overflow-y-auto"
+        v-if="content || $slots.default"
+        class="px-6 bg-gray-100 flex-grow max-h-full overflow-y-auto"
       >
         <slot>{{ content }}</slot>
       </QCardSection>
       <div
-          class="flex items-center justify-center px-6 py-4 border-t border-gray-300"
+        class="flex items-center justify-center px-6 py-4 border-t border-gray-300"
       >
         <div class="flex-grow text-right">
           <QBtn
-              :label="doneText"
-              class="action-btn btn-white-gray"
-              @click="onClose"
+            :label="doneText"
+            class="action-btn btn-white-gray"
+            @click="onClose"
           >
             <slot name="done-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/InputDialog.vue

@@ -1,15 +1,15 @@
 <template>
   <ConfirmDialog
-      v-bind="$props"
-      @confirm="$emit('confirm', newInput)"
-      @close="$emit('close', $event)"
+    v-bind="$props"
+    @confirm="$emit('confirm', newInput)"
+    @close="$emit('close', $event)"
   >
     <slot>
       <QInput
-          v-model="newInput"
-          type="number"
-          class="w-full"
-          @input="$emit('update:input', $event)"
+        v-model="newInput"
+        type="number"
+        class="w-full"
+        @input="$emit('update:input', $event)"
       />
     </slot>
   </ConfirmDialog>

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

@@ -1,97 +1,114 @@
 <template>
-  <div class="relative flex justify-center bg-gray-100 overflow-hidden" :class="{'rounded-2xl': !square}">
+  <div
+    class="relative flex justify-center bg-gray-100 overflow-hidden"
+    :class="{'rounded-2xl': !square}"
+  >
     <template v-if="computedImage">
       <div
-          class="grow h-full"
-          @click="showPreview = true"
+        class="grow h-full"
+        @click="showPreview = true"
       >
         <div
-            v-if="isVideo"
-            class="relative max-h-full max-w-full w-full flex justify-center"
+          v-if="isVideo"
+          class="relative max-h-full max-w-full w-full flex justify-center"
         >
           <video
-              class="max-h-full"
-              preload="auto"
+            class="max-h-full"
+            preload="auto"
           >
             <source
-                :src="previewUrl + '#t=0.1'"
-                :type="mimeType"
-            />
+              :src="previewUrl + '#t=0.1'"
+              :type="mimeType"
+            >
           </video>
           <button :class="cls['play-button']">
             <PlayIcon class="w-16" />
           </button>
         </div>
         <QImg
-            v-if="thumbUrl || isPreviewable"
-            fit="scale-down"
-            class="non-selectable max-h-full max-w-full h-full"
-            :src="(thumbUrl || previewUrl) + '#t=0.1'"
-            preload="auto"
-            data-testid="previewed-image"
+          v-if="thumbUrl || isPreviewable"
+          fit="scale-down"
+          class="non-selectable max-h-full max-w-full h-full"
+          :src="(thumbUrl || previewUrl) + '#t=0.1'"
+          preload="auto"
+          data-testid="previewed-image"
         />
         <div
-            v-else
-            class="flex items-center justify-center h-full"
+          v-else
+          class="flex items-center justify-center h-full"
         >
-          <PdfIcon v-if="isPdf" class="w-24" />
-          <TextFileIcon v-else class="w-24" />
+          <PdfIcon
+            v-if="isPdf"
+            class="w-24"
+          />
+          <TextFileIcon
+            v-else
+            class="w-24"
+          />
         </div>
       </div>
       <div
-          v-if="$slots['action-button']"
-          :class="cls['action-button']"
+        v-if="$slots['action-button']"
+        :class="cls['action-button']"
       >
         <slot name="action-button" />
       </div>
       <div
-          v-if="image && image.progress !== undefined"
-          class="absolute-bottom w-full"
+        v-if="image && image.progress !== undefined"
+        class="absolute-bottom w-full"
       >
         <QLinearProgress
-            :value="image.progress"
-            size="15px"
-            color="green-600"
-            stripe
+          :value="image.progress"
+          size="15px"
+          color="green-600"
+          stripe
         />
       </div>
     </template>
     <template v-else>
       <slot name="missing">
         <component
-            :is="missingIcon"
-            class="w-full h-full p-2 text-gray-300"
+          :is="missingIcon"
+          class="w-full h-full p-2 text-gray-300"
         />
       </slot>
     </template>
 
     <div class="absolute top-1 right-1 flex items-center justify-between space-x-1">
       <QBtn
-          v-if="downloadable && computedImage?.url"
-          size="sm"
-          class="!p-1 opacity-70 hover:opacity-100"
-          :class="downloadButtonClass"
-          @click.stop="download(computedImage.url)"
+        v-if="downloadable && computedImage?.url"
+        size="sm"
+        class="!p-1 opacity-70 hover:opacity-100"
+        :class="downloadButtonClass"
+        @click.stop="download(computedImage.url)"
       >
         <DownloadIcon class="w-4 h-5" />
       </QBtn>
 
       <QBtn
-          v-if="removable"
-          size="sm"
-          class="bg-red-900 text-white !p-1 opacity-50 hover:opacity-100"
-          @click.stop="onRemove"
+        v-if="removable"
+        size="sm"
+        class="bg-red-900 text-white !p-1 opacity-50 hover:opacity-100"
+        @click.stop="onRemove"
       >
-        <div v-if="isConfirmingRemove" class="font-bold text-[1rem] leading-[1.2rem]">?</div>
-        <RemoveIcon v-else class="w-3" />
+        <div
+          v-if="isConfirmingRemove"
+          class="font-bold text-[1rem] leading-[1.2rem]"
+        >
+          ?
+        </div>
+        <RemoveIcon
+          v-else
+          class="w-3"
+        />
       </QBtn>
     </div>
 
     <FullScreenCarouselDialog
-        v-if="showPreview && !disabled"
-        :files="relatedFiles || [computedImage]"
-        :default-slide="computedImage.id"
-        @close="showPreview = false"
+      v-if="showPreview && !disabled"
+      :files="relatedFiles || [computedImage]"
+      :default-slide="computedImage.id"
+      @close="showPreview = false"
     />
   </div>
 </template>
@@ -145,13 +162,13 @@ const computedImage = computed(() => {
   return null;
 });
 const mimeType = computed(
-    () => computedImage.value.type || computedImage.value.mime
+  () => computedImage.value.type || computedImage.value.mime
 );
 const isImage = computed(() => mimeType.value.match(/^image\//));
 const isVideo = computed(() => mimeType.value.match(/^video\//));
 const isPdf = computed(() => mimeType.value.match(/^application\/pdf/));
 const previewUrl = computed(
-    () => computedImage.value.transcodes?.compress?.url || computedImage.value.blobUrl || computedImage.value.url
+  () => computedImage.value.transcodes?.compress?.url || computedImage.value.blobUrl || computedImage.value.url
 );
 const thumbUrl = computed(() => {
   return computedImage.value.transcodes?.thumb?.url;

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

@@ -1,10 +1,13 @@
 <template>
   <img
-      v-if="isString"
-      :src="resolvedSvg"
-      :alt="alt"
+    v-if="isString"
+    :src="resolvedSvg"
+    :alt="alt"
+  >
+  <component
+    :is="resolvedSvg"
+    v-else
   />
-  <component :is="resolvedSvg" v-else />
 </template>
 <script setup>
 import { computed } from "vue";

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

@@ -1,11 +1,19 @@
 <template>
   <div class="flex flex-nowrap items-center">
-    <LocationIcon class="mr-1 ml-[-.2em]" :class="iconClass" />
-    <div v-if="location?.latitude" class="whitespace-nowrap">
+    <LocationIcon
+      class="mr-1 ml-[-.2em]"
+      :class="iconClass"
+    />
+    <div
+      v-if="location?.latitude"
+      class="whitespace-nowrap"
+    >
       {{ location.latitude.toFixed(decimals) }},
       {{ location.longitude.toFixed(decimals) }}
     </div>
-    <template v-else>Unknown</template>
+    <template v-else>
+      Unknown
+    </template>
   </div>
 </template>
 <script setup>

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

@@ -1,43 +1,43 @@
 <template>
   <div
-      :class="{
+    :class="{
       [cls['collapsable-sidebar']]: true,
       'is-collapsed': isCollapsed,
       'is-right-side': rightSide,
       [displayClass]: true,
     }"
-      :style="style"
+    :style="style"
   >
     <div class="flex-grow max-w-full">
       <slot :is-collapsed="isCollapsed" />
     </div>
     <template v-if="!disabled && (!hideToggleOnCollapse || !isCollapsed)">
       <div
-          v-if="!toggleAtTop"
-          class="flex w-full p-4"
-          :class="rightSide ? 'justify-start' : 'justify-end'"
+        v-if="!toggleAtTop"
+        class="flex w-full p-4"
+        :class="rightSide ? 'justify-start' : 'justify-end'"
       >
         <slot name="toggle">
           <QBtn
-              class="btn-secondary"
-              @click="toggleCollapse"
+            class="btn-secondary"
+            @click="toggleCollapse"
           >
             <ToggleIcon
-                class="w-5 transition-all"
-                :class="{ 'rotate-180': rightSide ? !isCollapsed : isCollapsed }"
+              class="w-5 transition-all"
+              :class="{ 'rotate-180': rightSide ? !isCollapsed : isCollapsed }"
             />
           </QBtn>
         </slot>
       </div>
       <div
-          v-else
-          class="absolute top-0 right-0 cursor-pointer p-2"
-          :class="toggleClass"
-          @click="toggleCollapse"
+        v-else
+        class="absolute top-0 right-0 cursor-pointer p-2"
+        :class="toggleClass"
+        @click="toggleCollapse"
       >
         <ToggleIcon
-            class="w-5 transition-all"
-            :class="{ 'rotate-180': rightSide ? !isCollapsed : isCollapsed }"
+          class="w-5 transition-all"
+          :class="{ 'rotate-180': rightSide ? !isCollapsed : isCollapsed }"
         />
       </div>
     </template>

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

@@ -1,16 +1,16 @@
 <template>
   <QDialog
-      v-model="isShowing"
-      maximized
-      :position="position"
-      :seamless="seamless"
-      :class="{'hide-backdrop': !overlay}"
+    v-model="isShowing"
+    maximized
+    :position="position"
+    :seamless="seamless"
+    :class="{'hide-backdrop': !overlay}"
   >
     <div>
       <div
-          v-if="title"
-          :class="cls['dialog-title']"
-          @click.stop.prevent
+        v-if="title"
+        :class="cls['dialog-title']"
+        @click.stop.prevent
       >
         {{ title }}
       </div>

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

@@ -1,12 +1,12 @@
 <template>
   <QTooltip
-      class="interactive-tooltip"
-      ref="tooltipBox"
-      v-model="show"
-      no-parent-event
-      @mouseenter="onEnterTooltip"
-      @mouseleave="onLeaveTooltip"
-      :transition-duration="200"
+    ref="tooltipBox"
+    v-model="show"
+    class="interactive-tooltip"
+    no-parent-event
+    :transition-duration="200"
+    @mouseenter="onEnterTooltip"
+    @mouseleave="onLeaveTooltip"
   >
     <slot>{{ tooltip }}</slot>
   </QTooltip>

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

@@ -1,46 +1,46 @@
 <template>
   <a
-      class="p-3 actionable"
-      :class="{'opacity-50 cursor-not-allowed': disabled}"
+    class="p-3 actionable"
+    :class="{'opacity-50 cursor-not-allowed': disabled}"
   >
     <QTooltip v-if="$slots.tooltip || tooltip">
       <slot name="tooltip">{{ tooltip }}</slot>
     </QTooltip>
     <Transition
-        mode="out-in"
-        :duration="150"
+      mode="out-in"
+      :duration="150"
     >
       <RenderComponent
-          v-if="loading"
-          :component="loadingComponent"
+        v-if="loading"
+        :component="loadingComponent"
       />
       <MenuIcon
-          v-else
-          class="w-4 text-black"
+        v-else
+        class="w-4 text-black"
       />
     </Transition>
     <QMenu
-        v-if="!disabled"
-        auto-close
+      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"
+            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)"
+            v-else
+            :key="item.name || item.action"
+            clickable
+            :class="item.class"
+            @click="onAction(item)"
           >
             {{ item.label }}
           </QItem>

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

@@ -1,15 +1,17 @@
 <template>
   <QTab
-      :name="name"
-      class="w-full"
-      content-class="w-full"
+    :name="name"
+    class="w-full"
+    content-class="w-full"
   >
     <div class="flex items-center w-full">
-      <div class="flex-grow text-sm">{{ label }}</div>
+      <div class="flex-grow text-sm">
+        {{ label }}
+      </div>
       <QBadge
-          class="bg-gray-400"
-          :label="count"
-          rounded
+        class="bg-gray-400"
+        :label="count"
+        rounded
       />
     </div>
   </QTab>

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

@@ -1,11 +1,11 @@
 <template>
   <div>
     <RenderVnode
-        v-if="activeActionVnode"
-        :vnode="activeActionVnode.vnode"
-        :is-saving="isSaving"
-        @confirm="onConfirm"
-        @close="activeActionVnode.cancel"
+      v-if="activeActionVnode"
+      :vnode="activeActionVnode.vnode"
+      :is-saving="isSaving"
+      @confirm="onConfirm"
+      @close="activeActionVnode.cancel"
     />
   </div>
 </template>

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

@@ -1,15 +1,17 @@
 <template>
   <Component
-      v-if="content"
-      :is="resolvedComponent.is"
-      v-bind="{...resolvedComponent.props, ...overrideProps}"
-      @action="$emit('action', $event)"
-  >{{ content }}</Component>
+    :is="resolvedComponent.is"
+    v-if="content"
+    v-bind="{...resolvedComponent.props, ...overrideProps}"
+    @action="$emit('action', $event)"
+  >
+    {{ content }}
+  </Component>
   <Component
-      v-else
-      :is="resolvedComponent.is"
-      v-bind="{...resolvedComponent.props, ...overrideProps}"
-      @action="$emit('action', $event)"
+    :is="resolvedComponent.is"
+    v-else
+    v-bind="{...resolvedComponent.props, ...overrideProps}"
+    @action="$emit('action', $event)"
   />
 </template>
 <script setup>