quasar-ui-danx 0.0.49 → 0.1.0

package/package.json

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

package/src/components/ActionTable/ActionTable.vue

@@ -1,64 +1,65 @@
 <template>
-  <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, __sort: mapSortBy($event.pagination, columns)})"
-  >
-    <template #no-data>
-      <slot name="empty">
-        <EmptyTableState :text="`There are no ${label.toLowerCase()} matching the applied filter`" />
-      </slot>
-    </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',  [])"
-      />
-    </template>
-    <template #header-cell="rowProps">
-      <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="onResizeColumn(rowProps.col, $event)"
+  <div class="overflow-hidden">
+    <ActionVnode />
+    <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, __sort: mapSortBy($event.pagination, columns)})"
+    >
+      <template #no-data>
+        <slot name="empty">
+          <EmptyTableState :text="`There are no ${label.toLowerCase()} matching the applied filter`" />
+        </slot>
+      </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',  [])"
+        />
+      </template>
+      <template #header-cell="rowProps">
+        <q-th
+            :key="rowProps.key"
+            :props="rowProps"
+            :data-drop-zone="`resize-column-` + rowProps.col.name"
         >
-          <RowResizeIcon class="w-4 text-neutral-base" />
-        </HandleDraggable>
-      </q-th>
-    </template>
-    <template #body-cell="rowProps">
-      <ActionTableColumn
-          :row-props="rowProps"
-          :settings="columnSettings[rowProps.col.name]"
-      >
-        <slot :column-name="rowProps.col.name" :row="rowProps.row" :value="rowProps.value" />
-      </ActionTableColumn>
-    </template>
-    <template #bottom>
-      <ActionVnode />
-    </template>
-  </q-table>
+          {{ rowProps.col.label }}
+          <HandleDraggable
+              v-if="rowProps.col.resizeable"
+              :drop-zone="`resize-column-` + rowProps.col.name"
+              class="resize-handle"
+              @resize="onResizeColumn(rowProps.col, $event)"
+          >
+            <RowResizeIcon class="w-4 text-neutral-base" />
+          </HandleDraggable>
+        </q-th>
+      </template>
+      <template #body-cell="rowProps">
+        <ActionTableColumn
+            :key="rowProps.key"
+            :row-props="rowProps"
+            :settings="columnSettings[rowProps.col.name]"
+        >
+          <slot :column-name="rowProps.col.name" :row="rowProps.row" :value="rowProps.value" />
+        </ActionTableColumn>
+      </template>
+    </q-table>
+  </div>
 </template>
 
 <script setup>

package/src/components/ActionTable/ActionTableColumn.vue

@@ -1,30 +1,33 @@
 <template>
-  <q-td :key="rowProps.key" :props="rowProps" :style="columnStyle">
-    <div
-        class="flex items-center flex-nowrap"
-        :class="columnClass"
-    >
-      <a
-          v-if="column.onClick"
-          class="flex-grow"
-          @click="column.onClick(row)"
+  <q-td :key="rowProps.key" :props="rowProps">
+    <div :style="columnStyle">
+      <div
+          class="flex items-center flex-nowrap"
+          :class="columnClass"
       >
-        <RenderVnode v-if="column.vnode" :vnode="column.vnode(row)" />
-        <slot v-else>{{ value }}</slot>
-      </a>
-      <div v-else class="flex-grow">
-        <RenderVnode v-if="column.vnode" :vnode="column.vnode(row)" />
-        <slot v-else>{{ value }}</slot>
-      </div>
-      <div v-if="column.actionMenu" class="flex flex-shrink-0 pl-2">
-        <ActionMenu
-            :actions="column.actionMenu"
-            :target="row"
-            :loading="isSaving"
-        />
+        <div class="flex-grow">
+          <a
+              v-if="column.onClick"
+              @click="column.onClick(row)"
+          >
+            <RenderVnode v-if="column.vnode" :vnode="column.vnode(row)" />
+            <slot v-else>{{ value }}</slot>
+          </a>
+          <div v-else>
+            <RenderVnode v-if="column.vnode" :vnode="column.vnode(row)" />
+            <slot v-else>{{ value }}</slot>
+          </div>
+          <TitleColumnFormat v-if="column.titleColumns" :row="row" :columns="column.titleColumns()" />
+        </div>
+        <div v-if="column.actionMenu" class="flex flex-shrink-0 pl-2">
+          <ActionMenu
+              :actions="column.actionMenu"
+              :target="row"
+              :loading="isSaving"
+          />
+        </div>
       </div>
     </div>
-    <TitleColumnFormat v-if="column.titleColumns" :row="row" :columns="column.titleColumns" />
   </q-td>
 </template>
 <script setup>

package/src/components/ActionTable/Columns/index.ts

@@ -1,4 +1,4 @@
 export { default as ColumnListItem } from "./ColumnListItem.vue";
 export { default as ColumnSettingsDialog } from "./ColumnSettingsDialog.vue";
-export { default as TitleColumnFormat } from "src/components/ActionTable/Columns/TitleColumnFormat.vue";
+export { default as TitleColumnFormat } from "./TitleColumnFormat.vue";
 export { default as VisibleColumnsToggleButtons } from "./VisibleColumnsToggleButtons.vue";

package/src/components/ActionTable/Form/Fields/SelectField.vue

@@ -67,7 +67,7 @@ import { ChevronDownIcon as DropDownIcon } from '@heroicons/vue/outline';
 import { QSelect } from 'quasar';
 import { computed, isRef, nextTick, ref } from 'vue';
 
-const emit = defineEmits(['update:model-value', 'search']);
+const emit = defineEmits(['update:model-value', 'search', 'update']);
 const props = defineProps({
   ...QSelect.props,
   modelValue: {
@@ -260,7 +260,7 @@ function onUpdate(value) {
 
   value = value === '__null__' ? null : value;
 
-  emit('change', value);
+  emit('update', value);
   emit('update:model-value', value);
 }
 
@@ -296,7 +296,7 @@ async function onFilter(val, update) {
  */
 function onClear() {
   emit('update:model-value', undefined);
-  emit('change', undefined);
+  emit('update', undefined);
 }
 
 /**

package/src/components/ActionTable/listControls.ts

@@ -115,6 +115,9 @@ export function useListControls(name: string, {
 
             if (Object.keys(urlFilter).length > 0) {
                 filter.value = urlFilter;
+                
+                // Override whatever is in local storage with this new filter
+                updateSettings("filter", filter.value);
             }
         }
     }
@@ -182,6 +185,17 @@ export function useListControls(name: string, {
         return Promise.all([loadList(), loadSummary(), loadFilterFieldOptions(), getActiveItemDetails()]);
     }
 
+    /**
+     * Updates the settings in local storage
+     * @param key
+     * @param value
+     */
+    function updateSettings(key, value) {
+        const settings = getItem(PAGE_SETTINGS_KEY) || {};
+        settings[key] = value;
+        setItem(PAGE_SETTINGS_KEY, settings);
+    }
+
     /**
      * Loads the filter and pagination settings from local storage.
      */

package/src/components/ActionTable/listHelpers.ts

@@ -28,6 +28,8 @@ export function mapSortBy(pagination, columns) {
     if (!pagination.sortBy) return null;
 
     const column = columns.find(c => c.name === pagination.sortBy);
+    if (!column) return null;
+    
     return [
         {
             column: column.sortBy || column.name,

package/src/components/PanelsDrawer/PanelsDrawerTabs.vue

@@ -1,21 +1,21 @@
 <template>
   <QTabs
-    :model-value="modelValue"
-    vertical
-    align="left"
-    class="panel-tabs p-4 h-auto"
-    no-caps
-    @update:model-value="$emit('update:model-value', $event)"
+      :model-value="modelValue"
+      vertical
+      align="left"
+      class="panel-tabs p-4 h-auto"
+      no-caps
+      @update:model-value="$emit('update:model-value', $event)"
   >
     <template v-for="panel in panels">
-      <template v-if="panel.enabled !== false">
+      <template v-if="panel.enabled === undefined || !!panel.enabled">
         <RenderVnode
-          v-if="panel.tabVnode"
-          :key="panel.name"
-          :vnode="panel.tabVnode"
-          :is-active="modelValue === panel.name"
-          :name="panel.name"
-          :label="panel.label"
+            v-if="panel.tabVnode"
+            :key="panel.name"
+            :vnode="panel.tabVnode"
+            :is-active="modelValue === panel.name"
+            :name="panel.name"
+            :label="panel.label"
         />
         <QTab v-else :key="panel.name" :name="panel.name" :label="panel.label" />
       </template>
@@ -23,14 +23,14 @@
   </QTabs>
 </template>
 <script setup>
-import { QTab } from "quasar";
-import { RenderVnode } from "quasar-ui-danx";
+import { QTab } from 'quasar';
+import { RenderVnode } from 'quasar-ui-danx';
 
-defineEmits(["update:model-value"]);
+defineEmits(['update:model-value']);
 defineProps({
   modelValue: {
     type: String,
-    default: "general"
+    default: 'general'
   },
   panels: {
     type: Array,
@@ -40,8 +40,8 @@ defineProps({
 </script>
 
 <style
-  lang="scss"
-  scoped
+    lang="scss"
+    scoped
 >
 .panel-tabs {
   :deep(.q-tab) {

package/src/helpers/actions.ts

@@ -74,6 +74,10 @@ export function useActions(actions: ActionOptions[], globalOptions: ActionOption
             throw new Error(`Unknown action: ${name}`);
         }
 
+        if (!action.activeTarget) {
+            throw new Error(`Action ${action.name} does not have an activeTarget ref. Please use useActions() or manually set the activeTarget ref`);
+        }
+
         const vnode = action.vnode && action.vnode(target);
         let result: any;