quasar-ui-danx 0.1.1 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar-ui-danx",
-  "version": "0.1.1",
+  "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,

package/src/components/PanelsDrawer/PanelsDrawerPanels.vue

@@ -18,7 +18,7 @@ import { RenderVnode } from '../Utility';
 defineProps({
   activePanel: {
     type: String,
-    required: true
+    default: null
   },
   panels: {
     type: Array,

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

@@ -1,11 +1,12 @@
 <template>
   <QTooltip
+      class="interactive-tooltip"
       ref="tooltipBox"
       v-model="show"
       no-parent-event
-      class="!pointer-events-auto"
       @mouseenter="onEnterTooltip"
       @mouseleave="onLeaveTooltip"
+      :transition-duration="200"
   >
     <slot>{{ tooltip }}</slot>
   </QTooltip>
@@ -18,6 +19,7 @@ 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);
@@ -25,25 +27,40 @@ onMounted(() => {
 function onEnterParent() {
   show.value = true;
   isHoveringParent.value = true;
+  if (timeout) clearTimeout(timeout);
 }
 function onLeaveParent() {
   isHoveringParent.value = false;
-  if (!show.value) return;
-
-  setTimeout(() => {
-    if (isHovering.value || isHoveringParent.value) {
-      onLeaveParent();
-    } else {
-      show.value = false;
-    }
-  }, 200);
+  if (show.value) delayClose();
 }
 function onEnterTooltip() {
   isHovering.value = true;
   show.value = true;
+  if (timeout) clearTimeout(timeout);
 }
 function onLeaveTooltip() {
   isHovering.value = false;
-  show.value = false;
+  if (show.value) delayClose();
+}
+function delayClose() {
+  if (timeout) clearTimeout(timeout);
+  timeout = setTimeout(() => {
+    if (isHovering.value || isHoveringParent.value) {
+      delayClose();
+    } else {
+      show.value = false;
+    }
+  }, 200);
 }
+
 </script>
+<style lang="scss">
+body .q-tooltip {
+  &.interactive-tooltip {
+    pointer-events: auto !important;
+    background: white;
+    color: inherit;
+    box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.2);
+  }
+}
+</style>