quasar-ui-danx 0.2.31 → 0.2.32

package/package.json

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

package/src/components/ActionTable/ActionTable.vue

@@ -34,22 +34,12 @@
         />
       </template>
       <template #header-cell="rowProps">
-        <QTh
-            :key="rowProps.key"
-            :props="rowProps"
-            :data-drop-zone="`resize-column-` + rowProps.col.name"
-            :class="cls['handle-drop-zone']"
-        >
-          {{ rowProps.col.label }}
-          <HandleDraggable
-              v-if="rowProps.col.resizeable"
-              :drop-zone="`resize-column-` + rowProps.col.name"
-              :class="cls['resize-handle']"
-              @resize="onResizeColumn(rowProps.col, $event)"
-          >
-            <RowResizeIcon class="w-4 text-gray-600" />
-          </HandleDraggable>
-        </QTh>
+        <ActionTableHeaderColumn
+            v-model="columnSettings"
+            :row-props="rowProps"
+            :name="name"
+            @update:model-value="onUpdateColumnSettings"
+        />
       </template>
       <template #body-cell="rowProps">
         <ActionTableColumn
@@ -65,13 +55,12 @@
 </template>
 
 <script setup>
-import { QTable, QTh } from "quasar";
+import { QTable } from "quasar";
 import { ref } from "vue";
 import { getItem, setItem } from "../../helpers";
-import { DragHandleIcon as RowResizeIcon } from "../../svg";
-import { HandleDraggable } from "../DragAndDrop";
 import { ActionVnode } from "../Utility";
 import ActionTableColumn from "./ActionTableColumn.vue";
+import ActionTableHeaderColumn from "./ActionTableHeaderColumn";
 import EmptyTableState from "./EmptyTableState.vue";
 import { mapSortBy, registerStickyScrolling } from "./listHelpers";
 import TableSummaryRow from "./TableSummaryRow.vue";
@@ -118,32 +107,7 @@ registerStickyScrolling(actionTable);
 
 const COLUMN_SETTINGS_KEY = `column-settings-${props.name}`;
 const columnSettings = ref(getItem(COLUMN_SETTINGS_KEY) || {});
-function onResizeColumn(column, val) {
-  columnSettings.value = {
-    ...columnSettings.value,
-    [column.name]: {
-      width: Math.max(Math.min(val.distance + val.startDropZoneSize, column.maxWidth || 500), column.minWidth || 80)
-    }
-  };
+function onUpdateColumnSettings() {
   setItem(COLUMN_SETTINGS_KEY, columnSettings.value);
 }
 </script>
-
-<style lang="scss" module="cls">
-.handle-drop-zone {
-  .resize-handle {
-    position: absolute;
-    top: 0;
-    right: -.45em;
-    width: .9em;
-    opacity: 0;
-    transition: all .3s;
-  }
-
-  &:hover {
-    .resize-handle {
-      opacity: 1;
-    }
-  }
-}
-</style>

package/src/components/ActionTable/ActionTableHeaderColumn.vue

@@ -0,0 +1,82 @@
+<template>
+  <QTh
+      :key="rowProps.key"
+      :props="rowProps"
+      :data-drop-zone="isResizeable && `resize-column-` + column.name"
+      :class="isResizeable && cls['handle-drop-zone']"
+      :style="columnStyle"
+  >
+    {{ column.label }}
+    <HandleDraggable
+        v-if="isResizeable"
+        :drop-zone="`resize-column-` + column.name"
+        :class="cls['resize-handle']"
+        @resize="onResizeColumn"
+    >
+      <RowResizeIcon class="w-4 text-gray-600" />
+    </HandleDraggable>
+  </QTh>
+</template>
+<script setup>
+import { QTh } from "quasar";
+import { computed } from "vue";
+import { DragHandleIcon as RowResizeIcon } from "../../svg";
+import { HandleDraggable } from "../DragAndDrop";
+
+const emit = defineEmits(["update:model-value"]);
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    required: true
+  },
+  name: {
+    type: String,
+    required: true
+  },
+  rowProps: {
+    type: Object,
+    required: true
+  }
+});
+
+const column = computed(() => props.rowProps.col);
+const isResizeable = computed(() => column.value.resizeable);
+
+const columnStyle = computed(() => {
+  const width = props.settings?.width || column.value.width;
+  return {
+    width: width ? `${width}px` : undefined,
+    minWidth: column.value.minWidth ? `${column.value.minWidth}px` : undefined
+  };
+});
+
+
+function onResizeColumn(val) {
+  const settings = {
+    ...props.modelValue,
+    [column.value.name]: {
+      width: Math.max(Math.min(val.distance + val.startDropZoneSize, column.value.maxWidth || 500), column.value.minWidth || 80)
+    }
+  };
+  emit("update:model-value", settings);
+}
+</script>
+
+<style lang="scss" module="cls">
+.handle-drop-zone {
+  .resize-handle {
+    position: absolute;
+    top: 0;
+    right: -.45em;
+    width: .9em;
+    opacity: 0;
+    transition: all .3s;
+  }
+
+  &:hover {
+    .resize-handle {
+      opacity: 1;
+    }
+  }
+}
+</style>

package/src/components/ActionTable/index.ts

@@ -8,5 +8,6 @@ export * from "./tableColumns";
 export { default as ActionMenu } from "./ActionMenu.vue";
 export { default as ActionTable } from "./ActionTable.vue";
 export { default as ActionTableColumn } from "./ActionTableColumn.vue";
+export { default as ActionTableHeaderColumn } from "./ActionTableHeaderColumn.vue";
 export { default as EmptyTableState } from "./EmptyTableState.vue";
 export { default as TableSummaryRow } from "./TableSummaryRow.vue";