quasar-ui-danx 0.0.11 → 0.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar-ui-danx",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "author": "Dan <dan@flytedesk.com>",
   "description": "DanX Vue / Quasar component library",
   "license": "MIT",
@@ -62,7 +62,12 @@
     "last 4 iOS versions"
   ],
   "dependencies": {
+    "@heroicons/vue": "v1",
+    "@tinymce/tinymce-vue": "^5.1.1",
     "@vueuse/core": "^10.7.2",
+    "exifreader": "^4.21.1",
+    "gsap": "^3.12.5",
+    "luxon": "^3.4.4",
     "tailwindcss": "^3.4.1"
   }
 }

package/src/components/ActionTable/ActionTable.vue

@@ -1,19 +1,18 @@
-<!--suppress VueUnrecognizedSlot -->
 <template>
-  <QTable
-    ref="actionTable"
-    :selected="selectedRows"
-    :pagination="quasarPagination"
-    :columns="columns"
-    :loading="isLoadingList"
-    :rows="pagedItems?.data || []"
-    selection="multiple"
-    :rows-per-page-options="[25,50,100]"
-    class="sticky-column sticky-header w-full !border-0"
-    color="blue-base"
-    @update:selected="$emit('update:selected-rows', $event)"
-    @update:pagination="() => {}"
-    @request="$emit('update:quasar-pagination', $event.pagination)"
+  <q-table
+      ref="actionTable"
+      :selected="selectedRows"
+      :pagination="quasarPagination"
+      :columns="columns"
+      :loading="isLoadingList"
+      :rows="pagedItems?.data || []"
+      selection="multiple"
+      :rows-per-page-options="rowsPerPageOptions"
+      class="sticky-column sticky-header w-full !border-0"
+      color="blue-base"
+      @update:selected="$emit('update:selected-rows', $event)"
+      @update:pagination="() => {}"
+      @request="$emit('update:quasar-pagination', $event.pagination)"
   >
     <template #no-data>
       <slot name="empty">
@@ -22,38 +21,38 @@
     </template>
     <template #top-row>
       <TableSummaryRow
-        :label="label"
-        :item-count="summary?.count || 0"
-        :selected-count="selectedRows.length"
-        :loading="isLoadingSummary"
-        :summary="summary"
-        :columns="columns"
-        @clear="$emit('update:selected-rows',  [])"
+          :label="label"
+          :item-count="summary?.count || 0"
+          :selected-count="selectedRows.length"
+          :loading="isLoadingSummary"
+          :summary="summary"
+          :columns="columns"
+          @clear="$emit('update:selected-rows',  [])"
       />
     </template>
     <template #header-cell="rowProps">
-      <QTh
-        :key="rowProps.key"
-        :props="rowProps"
-        :data-drop-zone="`resize-column-` + rowProps.col.name"
+      <q-th
+          :key="rowProps.key"
+          :props="rowProps"
+          :data-drop-zone="`resize-column-` + rowProps.col.name"
       >
         {{ rowProps.col.label }}
         <HandleDraggable
-          v-if="rowProps.col.resizeable"
-          :drop-zone="`resize-column-` + rowProps.col.name"
-          class="resize-handle"
-          @resize="rowProps.col.onResize"
+            v-if="rowProps.col.resizeable"
+            :drop-zone="`resize-column-` + rowProps.col.name"
+            class="resize-handle"
+            @resize="rowProps.col.onResize"
         >
           <RowResizeIcon class="w-4 text-neutral-base" />
         </HandleDraggable>
-      </QTh>
+      </q-th>
     </template>
     <template #body-cell="rowProps">
-      <QTd :key="rowProps.key" :props="rowProps">
+      <q-td :key="rowProps.key" :props="rowProps">
         <template v-if="rowProps.col.component">
           <RenderComponentColumn
-            :row-props="rowProps"
-            @action="$emit('action', $event)"
+              :row-props="rowProps"
+              @action="$emit('action', $event)"
           />
         </template>
         <template v-else-if="rowProps.col.fieldList">
@@ -71,18 +70,23 @@
             {{ rowProps.value }}
           </slot>
         </template>
-      </QTd>
+      </q-td>
     </template>
-  </QTable>
+  </q-table>
 </template>
 
 <script setup>
-import { DragHandleIcon as RowResizeIcon } from "@/svg";
-import { EmptyTableState, registerStickyScrolling, RenderComponentColumn, TableSummaryRow } from "danx/src/components";
-import { HandleDraggable } from "quasar-ui-danx/src";
-import { ref } from "vue";
+import {
+  EmptyTableState,
+  HandleDraggable,
+  registerStickyScrolling,
+  RenderComponentColumn,
+  TableSummaryRow
+} from '@ui/components';
+import { DragHandleIcon as RowResizeIcon } from '@ui/svg';
+import { ref } from 'vue';
 
-defineEmits(["action", "filter", "update:quasar-pagination", "update:selected-rows"]);
+defineEmits(['action', 'filter', 'update:quasar-pagination', 'update:selected-rows']);
 defineProps({
   label: {
     type: String,
@@ -109,6 +113,10 @@ defineProps({
   columns: {
     type: Array,
     required: true
+  },
+  rowsPerPageOptions: {
+    type: Array,
+    default: () => [10, 25, 50, 100]
   }
 });
 const actionTable = ref(null);

package/src/components/ActionTable/BatchActionMenu.vue

@@ -1,31 +1,31 @@
 <template>
   <div>
     <PopoverMenu
-      class="bg-neutral-plus-6 px-4 h-full flex"
-      :items="items"
-      :disabled="selectedRows.length === 0"
-      @action="onAction"
+        class="bg-neutral-plus-6 px-4 h-full flex"
+        :items="items"
+        :disabled="selectedRows.length === 0"
+        @action="onAction"
     />
-    <QTooltip v-if="selectedRows.length === 0">
+    <q-tooltip v-if="selectedRows.length === 0">
       Batch actions require a selection
-    </QTooltip>
-    <slot>
-      <Component
-        :is="activeComponent.is"
-        v-if="activeComponent"
-        v-bind="activeComponent.props"
-        :is-saving="isSaving"
-        @close="activeAction = false"
-        @confirm="onConfirmAction"
-      />
-    </slot>
+      </q-tooltip>
+      <slot>
+        <Component
+            :is="activeComponent.is"
+            v-if="activeComponent"
+            v-bind="activeComponent.props"
+            :is-saving="isSaving"
+            @close="activeAction = false"
+            @confirm="onConfirmAction"
+        />
+      </slot>
   </div>
 </template>
 <script setup>
-import PopoverMenu from "components/Common/Menu/PopoverMenu";
-import { computed, ref } from "vue";
+import PopoverMenu from '@ui/components/Utility/Popover/PopoverMenu';
+import { computed, ref } from 'vue';
 
-const emit = defineEmits(["action"]);
+const emit = defineEmits(['action']);
 const props = defineProps({
   items: {
     type: Array,
@@ -48,7 +48,7 @@ const activeComponent = computed(() => (props.items.find(i => i.action === activ
 
 function onAction(action) {
   activeAction.value = action;
-  emit("action", action);
+  emit('action', action);
 }
 async function onConfirmAction(input) {
   const result = await props.applyBatchAction(input || activeComponent.value.input());

package/src/components/ActionTable/EmptyTableState.vue

@@ -2,12 +2,12 @@
   <div class="flex items-center justify-center text-sm py-14 w-full">
     <div v-if="loading">
       <slot name="loading">{{ loadingText }}
-        <QSpinnerBall class="w-4 ml-2" />
+        <q-spinner-ball class="w-4 ml-2" />
       </slot>
     </div>
     <div v-if="saving">
       <slot name="saving">{{ savingText }}
-        <QSpinnerBall class="w-4 ml-2" />
+        <q-spinner-ball class="w-4 ml-2" />
       </slot>
     </div>
     <slot>{{ text }}</slot>
@@ -19,15 +19,15 @@ defineProps({
   saving: Boolean,
   text: {
     type: String,
-    default: "No records found"
+    default: 'No records found'
   },
   loadingText: {
     type: String,
-    default: "Loading..."
+    default: 'Loading...'
   },
   savingText: {
     type: String,
-    default: "Saving..."
+    default: 'Saving...'
   }
 });
 </script>

package/src/components/ActionTable/Filters/CollapsableFiltersSidebar.vue

@@ -1,23 +1,23 @@
 <template>
   <CollapsableSidebar
-    :collapse="!showFilters"
-    disabled
-    min-width="0"
-    max-width="18rem"
-    name="admin-ads"
-    @update:collapse="$emit('update:show-filters', !$event)"
+      :collapse="!showFilters"
+      disabled
+      min-width="0"
+      max-width="18rem"
+      name="admin-ads"
+      @update:collapse="$emit('update:show-filters', !$event)"
   >
     <FilterGroupList
-      :filter="filter"
-      :filter-groups="filterGroups"
-      @update:filter="$emit('update:filter', $event)"
+        :filter="filter"
+        :filter-groups="filterGroups"
+        @update:filter="$emit('update:filter', $event)"
     />
   </CollapsableSidebar>
 </template>
 <script setup>
-import { CollapsableSidebar, FilterGroupList } from "danx/src/components";
+import { CollapsableSidebar, FilterGroupList } from '@ui/components';
 
-defineEmits(["update:filter", "update:show-filters"]);
+defineEmits(['update:filter', 'update:show-filters']);
 defineProps({
   name: {
     type: String,

package/src/components/ActionTable/Filters/FilterGroupItem.vue

@@ -1,18 +1,18 @@
 <template>
-  <QExpansionItem>
+  <q-expansion-item>
     <template #header>
       <div class="flex items-center flex-nowrap flex-grow">
         <div class="whitespace-nowrap flex-grow text-left text-sm font-bold">{{ name }}</div>
-        <QBadge
-          :label="count"
-          rounded
-          class="ml-2 transition-all"
-          :class="{'bg-gray-base': !count, 'bg-blue-base': count}"
+        <q-badge
+            :label="count"
+            rounded
+            class="ml-2 transition-all"
+            :class="{'bg-gray-base': !count, 'bg-blue-base': count}"
         />
       </div>
     </template>
     <slot />
-  </QExpansionItem>
+  </q-expansion-item>
 </template>
 <script setup>
 defineProps({

package/src/components/ActionTable/Filters/FilterGroupList.vue

@@ -1,52 +1,52 @@
 <template>
-  <QList>
+  <q-list>
     <div class="px-4 py-2 max-w-full">
       <template
-        v-for="(group, index) in filterGroups"
-        :key="'group-' + group.name"
+          v-for="(group, index) in filterGroups"
+          :key="'group-' + group.name"
       >
         <template v-if="group.flat">
           <FilterableField
-            v-for="field in group.fields"
-            :key="'field-' + field.name"
-            :model-value="field.calcValue ? field.calcValue(filter) : filter[field.name]"
-            :field="field"
-            :loading="loading"
-            class="mb-4"
-            @update:model-value="updateFilter(field, $event)"
+              v-for="field in group.fields"
+              :key="'field-' + field.name"
+              :model-value="field.calcValue ? field.calcValue(filter) : filter[field.name]"
+              :field="field"
+              :loading="loading"
+              class="mb-4"
+              @update:model-value="updateFilter(field, $event)"
           />
         </template>
 
         <FilterGroupItem
-          v-else
-          :name="group.name"
-          :count="activeCountByGroup[group.name]"
+            v-else
+            :name="group.name"
+            :count="activeCountByGroup[group.name]"
         >
           <FilterableField
-            v-for="field in group.fields"
-            :key="'field-' + field.name"
-            :model-value="field.calcValue ? field.calcValue(filter) : filter[field.name]"
-            :field="field"
-            :loading="loading"
-            class="mb-4"
-            @update:model-value="updateFilter(field, $event)"
+              v-for="field in group.fields"
+              :key="'field-' + field.name"
+              :model-value="field.calcValue ? field.calcValue(filter) : filter[field.name]"
+              :field="field"
+              :loading="loading"
+              class="mb-4"
+              @update:model-value="updateFilter(field, $event)"
           />
         </FilterGroupItem>
 
-        <QSeparator
-          v-if="index < (filterGroups.length - 1)"
-          class="my-2"
+        <q-separator
+            v-if="index < (filterGroups.length - 1)"
+            class="my-2"
         />
       </template>
     </div>
-  </QList>
+    </q-list>
 </template>
 <script setup>
-import FilterableField from "danx/src/components/ActionTable/Filters/FilterableField";
-import FilterGroupItem from "danx/src/components/ActionTable/Filters/FilterGroupItem";
-import { computed } from "vue";
+import { computed } from 'vue';
+import FilterableField from './FilterableField';
+import FilterGroupItem from './FilterGroupItem';
 
-const emit = defineEmits(["update:filter"]);
+const emit = defineEmits(['update:filter']);
 const props = defineProps({
   filterGroups: {
     type: Array,
@@ -71,6 +71,6 @@ function updateFilter(field, value) {
   if (field.filterBy) {
     fieldFilter = field.filterBy(value);
   }
-  emit("update:filter", { ...props.filter, ...fieldFilter });
+  emit('update:filter', { ...props.filter, ...fieldFilter });
 }
 </script>

package/src/components/ActionTable/Filters/FilterListToggle.vue

@@ -1,31 +1,31 @@
 <template>
   <div class="flex items-center" :class="{'w-72': showFilters}">
     <div class="flex-grow">
-      <QBtn
-        class="btn-blue-highlight"
-        :class="{'highlighted': showFilters}"
-        @click="$emit('update:show-filters', !showFilters)"
+      <q-btn
+          class="btn-blue-highlight"
+          :class="{'highlighted': showFilters}"
+          @click="$emit('update:show-filters', !showFilters)"
       >
         <FilterIcon class="w-5 mr-2" />
-        <QBadge
-          :label="'' + activeCount"
-          rounded
-          :color="activeCount > 0 ? 'blue-base' : 'gray-base'"
+        <q-badge
+            :label="'' + activeCount"
+            rounded
+            :color="activeCount > 0 ? 'blue-base' : 'gray-base'"
         />
-      </QBtn>
+        </q-btn>
     </div>
     <a
-      v-if="activeCount > 0"
-      class="text-blue-base hover:text-blue-plus-1 text-sm ml-4"
-      @click="$emit('update:filter', {})"
+        v-if="activeCount > 0"
+        class="text-blue-base hover:text-blue-plus-1 text-sm ml-4"
+        @click="$emit('update:filter', {})"
     >Clear All</a>
   </div>
 </template>
 <script setup>
-import { FilterIcon } from "@/svg";
-import { computed } from "vue";
+import { FilterIcon } from '@ui/svg';
+import { computed } from 'vue';
 
-defineEmits(["update:show-filters", "update:filter"]);
+defineEmits(['update:show-filters', 'update:filter']);
 const props = defineProps({
   filter: {
     type: Object,