quasar-ui-danx 0.1.2 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar-ui-danx",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "author": "Dan <dan@flytedesk.com>",
   "description": "DanX Vue / Quasar component library",
   "license": "MIT",

package/src/components/ActionTable/ActionTable.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="overflow-hidden">
+  <div class="overflow-hidden w-full">
     <ActionVnode />
-    <q-table
+    <QTable
         ref="actionTable"
         :selected="selectedRows"
         :pagination="quasarPagination"
@@ -10,7 +10,7 @@
         :rows="pagedItems?.data || []"
         selection="multiple"
         :rows-per-page-options="rowsPerPageOptions"
-        class="sticky-column sticky-header w-full !border-0"
+        class="sticky-column sticky-header w-full h-full !border-0"
         color="blue-base"
         @update:selected="$emit('update:selected-rows', $event)"
         @update:pagination="() => {}"
@@ -33,7 +33,7 @@
         />
       </template>
       <template #header-cell="rowProps">
-        <q-th
+        <QTh
             :key="rowProps.key"
             :props="rowProps"
             :data-drop-zone="`resize-column-` + rowProps.col.name"
@@ -47,7 +47,7 @@
           >
             <RowResizeIcon class="w-4 text-neutral-base" />
           </HandleDraggable>
-        </q-th>
+        </QTh>
       </template>
       <template #body-cell="rowProps">
         <ActionTableColumn
@@ -58,11 +58,12 @@
           <slot :column-name="rowProps.col.name" :row="rowProps.row" :value="rowProps.value" />
         </ActionTableColumn>
       </template>
-    </q-table>
+    </QTable>
   </div>
 </template>
 
 <script setup>
+import { QTable, QTh } from 'quasar';
 import { ref } from 'vue';
 import { getItem, setItem } from '../../helpers';
 import { DragHandleIcon as RowResizeIcon } from '../../svg';

package/src/components/ActionTable/ActionTableColumn.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-td :key="rowProps.key" :props="rowProps">
+  <q-td :key="rowProps.key" :props="rowProps" :style="columnStyle">
     <div :style="columnStyle">
       <div
           class="flex items-center flex-nowrap"

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex items-center" :class="{'w-72': showFilters}">
+  <div class="flex items-center transition-all" :class="{'w-72': showFilters, 'w-[6.5rem]': !showFilters}">
     <div class="flex-grow">
       <q-btn
           class="btn-blue-highlight"

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

@@ -1,11 +1,11 @@
 <template>
   <div class="w-full flex justify-end items-center flex-nowrap border-b">
     <FilterListToggle
-      :show-filters="showFilters"
-      :filter="filter"
-      class="border-r p-4 flex-shrink-0"
-      @update:show-filters="$emit('update:show-filters', $event)"
-      @update:filter="$emit('update:filter', $event)"
+        :show-filters="showFilters"
+        :filter="filter"
+        class="border-r p-4 flex-shrink-0"
+        @update:show-filters="$emit('update:show-filters', $event)"
+        @update:filter="$emit('update:filter', $event)"
     />
 
     <div class="flex-grow">
@@ -20,9 +20,10 @@
   </div>
 </template>
 <script setup>
-import { FilterListToggle } from "quasar-ui-danx";
+import { QSeparator } from 'quasar';
+import { FilterListToggle } from '../Filters';
 
-defineEmits(["update:show-filters", "update:filter"]);
+defineEmits(['update:show-filters', 'update:filter']);
 defineProps({
   filter: {
     type: Object,