quasar-ui-danx 0.3.11 → 0.3.13

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>
@@ -81,7 +81,7 @@ const isCollapsed = ref(getItem(props.name + "-is-collapsed", props.collapse));
 
 function setCollapse(state) {
   isCollapsed.value = state;
-  setItem(props.name + "-is-collapsed", isCollapsed.value ? "1" : "");
+  setItem(props.name + "-is-collapsed", !!isCollapsed.value);
 }
 
 function toggleCollapse() {

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>

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

@@ -1,12 +1,12 @@
 <template>
   <TransitionGroup
-      ref="list"
-      tag="div"
-      appear
-      :css="false"
-      @before-enter="onBeforeEnter"
-      @enter="onEnter"
-      @leave="onLeave"
+    ref="list"
+    tag="div"
+    appear
+    :css="false"
+    @before-enter="onBeforeEnter"
+    @enter="onEnter"
+    @leave="onLeave"
   >
     <slot />
   </TransitionGroup>

package/src/styles/quasar-reset.scss

@@ -1,32 +1,76 @@
-.q-tab {
-  text-transform: capitalize
-}
+#primary-layout {
+  .q-tab {
+    text-transform: capitalize
+  }
+
+  .q-table__card {
+    background: inherit;
+    color: inherit;
+  }
 
-.q-tab-panels {
-  overflow: visible;
+  .q-checkbox__inner {
+    color: inherit;
+  }
 
-  .q-panel {
+  .q-tab-panels {
     overflow: visible;
 
-    &.scroll {
-      overflow: auto;
+    .q-panel {
+      overflow: visible;
+
+      &.scroll {
+        overflow: auto;
+      }
+
+      .q-tab-panel {
+        padding: 0;
+      }
     }
 
-    .q-tab-panel {
-      padding: 0;
+    &.overflow-y-auto {
+      overflow-y: auto;
     }
   }
 
-  &.overflow-y-auto {
-    overflow-y: auto;
+  .q-toolbar {
+    min-height: 0;
+    padding: 0;
   }
-}
 
-.q-toolbar {
-  min-height: 0;
-  padding: 0;
-}
+  .q-notification__actions {
+    color: inherit;
+  }
+
+  .q-date {
+    min-width: 100px;
 
-.q-notification__actions {
-  color: inherit;
+    .q-date__view {
+      min-height: 0;
+    }
+  }
+
+  .q-field {
+    &.q-field--auto-height {
+      .q-field__control {
+        min-height: 0;
+
+        .q-field__native {
+          min-height: 0;
+          color: inherit;
+        }
+      }
+
+      .q-field__control-container {
+        padding-top: 1.1rem;
+      }
+    }
+
+    .q-field__label {
+      color: inherit;
+    }
+
+    .q-field__marginal {
+      color: inherit;
+    }
+  }
 }

package/src/styles/themes/danx/action-table.scss

@@ -0,0 +1,19 @@
+.dx-table-summary-tr {
+  @apply bg-gray-100;
+
+  &.has-selection {
+    @apply bg-blue-600 text-white;
+  }
+
+  &.is-loading {
+    @apply opacity-50;
+  }
+
+  .dx-table-summary-td {
+    @apply font-bold bg-gray-100 pl-5;
+
+    &.has-selection {
+      @apply bg-blue-600 text-white pl-4;
+    }
+  }
+}

package/src/styles/themes/danx/index.scss

@@ -0,0 +1 @@
+@import "action-table";