quasar-ui-danx 0.4.2 → 0.4.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar-ui-danx",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "author": "Dan <dan@flytedesk.com>",
   "description": "DanX Vue / Quasar component library",
   "license": "MIT",
@@ -19,6 +19,7 @@
   },
   "devDependencies": {
     "@quasar/extras": "^1.16.4",
+    "@types/luxon": "^3.4.2",
     "@types/node": "^20.12.7",
     "@typescript-eslint/eslint-plugin": "^7.6.0",
     "@typescript-eslint/parser": "^7.6.0",
@@ -48,6 +49,7 @@
     "@heroicons/vue": "v1",
     "@tinymce/tinymce-vue": "^5.1.1",
     "@vueuse/core": "^10.7.2",
+    "danx-icon": "^1.0.2",
     "exifreader": "^4.21.1",
     "gsap": "^3.12.5",
     "luxon": "^3.4.4"

package/src/components/ActionTable/ActionTable.vue

@@ -62,10 +62,11 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { QTable } from "quasar";
 import { computed, ref } from "vue";
 import { getItem, setItem } from "../../helpers";
+import { ActionTargetItem, ListControlsPagination, TableColumn } from "../../types";
 import { ActionVnode } from "../Utility";
 import { ActionTableColumn, ActionTableHeaderColumn } from "./Columns";
 import EmptyTableState from "./EmptyTableState.vue";
@@ -73,50 +74,36 @@ import { mapSortBy, registerStickyScrolling } from "./listHelpers";
 import TableSummaryRow from "./TableSummaryRow.vue";
 
 defineEmits(["update:selected-rows", "update:pagination"]);
-const props = defineProps({
-	name: {
-		type: String,
-		required: true
-	},
-	label: {
-		type: String,
-		required: true
-	},
-	color: {
-		type: String,
-		default: "blue-600"
-	},
-	selectedRows: {
-		type: Array,
-		required: true
-	},
-	pagination: {
-		type: Object,
-		required: true
-	},
-	loadingList: Boolean,
-	loadingSummary: Boolean,
-	pagedItems: {
-		type: Object,
-		default: null
-	},
-	summary: {
-		type: Object,
-		default: null
-	},
-	columns: {
-		type: Array,
-		required: true
-	},
-	rowsPerPageOptions: {
-		type: Array,
-		default: () => [10, 25, 50, 100]
-	}
+
+export interface Props {
+	name: string;
+	label: string;
+	color?: string;
+	selectedRows: ActionTargetItem[];
+	pagination: ListControlsPagination;
+	loadingList?: boolean;
+	loadingSummary?: boolean;
+	pagedItems?: any;
+	summary: any;
+	columns: TableColumn[];
+	rowsPerPageOptions?: number[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	color: "",
+	pagedItems: null,
+	summary: null,
+	loadingSummary: false,
+	rowsPerPageOptions: () => [10, 25, 50, 100]
 });
+
 const actionTable = ref(null);
 registerStickyScrolling(actionTable);
 
-const tableColumns = computed(() => props.columns.map((column) => ({ ...column, field: column.field || column.name })));
+const tableColumns = computed<TableColumn[]>(() => props.columns.map((column) => ({
+	...column,
+	field: column.field || column.name
+})));
 const hasData = computed(() => props.pagedItems?.data?.length);
 const COLUMN_SETTINGS_KEY = `column-settings-${props.name}`;
 const columnSettings = ref(getItem(COLUMN_SETTINGS_KEY) || {});

package/src/components/ActionTable/Columns/ActionTableColumn.vue

@@ -13,6 +13,7 @@
           <a
             v-if="column.onClick"
             :class="column.innerClass"
+            class="dx-column-link"
             @click="column.onClick(row)"
           >
             <RenderVnode
@@ -62,14 +63,14 @@ import ActionMenu from "../ActionMenu";
 import { TitleColumnFormat } from "./";
 
 const props = defineProps({
-  rowProps: {
-    type: Object,
-    required: true
-  },
-  settings: {
-    type: Object,
-    default: null
-  }
+	rowProps: {
+		type: Object,
+		required: true
+	},
+	settings: {
+		type: Object,
+		default: null
+	}
 });
 
 const row = computed(() => props.rowProps.row);
@@ -78,18 +79,18 @@ const value = computed(() => props.rowProps.value);
 const isSaving = computed(() => row.value.isSaving?.value);
 
 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
-  };
+	const width = props.settings?.width || column.value.width;
+	return {
+		width: width ? `${width}px` : undefined,
+		minWidth: column.value.minWidth ? `${column.value.minWidth}px` : undefined
+	};
 });
 
 const columnClass = computed(() => ({
-  [column.value.class || ""]: true,
-  "is-saving": isSaving.value,
-  "justify-end": column.value.align === "right",
-  "justify-center": column.value.align === "center",
-  "justify-start": column.value.align === "left"
+	[column.value.class || ""]: true,
+	"is-saving": isSaving.value,
+	"justify-end": column.value.align === "right",
+	"justify-center": column.value.align === "center",
+	"justify-start": column.value.align === "left"
 }));
 </script>

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

@@ -8,17 +8,17 @@
     :name="name"
     @update:collapse="$emit('update:show-filters', !$event)"
   >
-    <FilterFieldList
-      :filter="activeFilter"
-      :filter-fields="filters"
+    <FilterList
+      :active-filter="activeFilter"
+      :filters="filters"
       @update:filter="$emit('update:active-filter', $event)"
     />
   </CollapsableSidebar>
 </template>
 <script setup lang="ts">
-import { FilterField, ListControlsFilter } from "src/components/ActionTable/listControls";
-import { FilterFieldList } from ".";
+import { FilterGroup, ListControlsFilter } from "../../../types";
 import { CollapsableSidebar } from "../../Utility";
+import FilterList from "./FilterList";
 
 defineEmits(["update:active-filter", "update:show-filters"]);
 
@@ -28,7 +28,7 @@ export interface Props {
 	activeFilter: ListControlsFilter,
 	minWidth?: string,
 	maxWidth?: string,
-	filters?: FilterField[]
+	filters?: FilterGroup[]
 }
 
 withDefaults(defineProps<Props>(), {

package/src/components/ActionTable/Filters/{FilterFieldList.vue → FilterList.vue}

@@ -2,14 +2,14 @@
   <QList>
     <div class="px-4 py-2 max-w-full">
       <template
-        v-for="(group, index) in filterFields"
+        v-for="(group, index) in filters"
         :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]"
+            :model-value="field.calcValue ? field.calcValue(activeFilter) : activeFilter[field.name]"
             :field="field"
             :loading="loading"
             class="mb-4"
@@ -17,7 +17,7 @@
           />
         </template>
 
-        <FilterFieldItem
+        <FilterItem
           v-else
           :name="group.name"
           :count="activeCountByGroup[group.name]"
@@ -25,16 +25,16 @@
           <FilterableField
             v-for="field in group.fields"
             :key="'field-' + field.name"
-            :model-value="field.calcValue ? field.calcValue(filter) : filter[field.name]"
+            :model-value="field.calcValue ? field.calcValue(activeFilter) : activeFilter[field.name]"
             :field="field"
             :loading="loading"
             class="mb-4"
             @update:model-value="updateFilter(field, $event)"
           />
-        </FilterFieldItem>
+        </FilterItem>
 
         <QSeparator
-          v-if="index < (filterFields.length - 1)"
+          v-if="index < (filters.length - 1)"
           class="my-2"
         />
       </template>
@@ -44,33 +44,33 @@
 <script setup>
 import { computed } from "vue";
 import FilterableField from "./FilterableField";
-import FilterFieldItem from "./FilterFieldItem";
+import FilterItem from "./FilterItem";
 
 const emit = defineEmits(["update:filter"]);
 const props = defineProps({
-  filterFields: {
-    type: Array,
-    required: true
-  },
-  filter: {
-    type: Object,
-    required: true
-  },
-  loading: Boolean
+	filters: {
+		type: Array,
+		required: true
+	},
+	activeFilter: {
+		type: Object,
+		required: true
+	},
+	loading: Boolean
 });
 
 const activeCountByGroup = computed(() => {
-  const activeCountByGroup = {};
-  for (const group of props.filterFields) {
-    activeCountByGroup[group.name] = group.fields.filter(field => props.filter[field.name] !== undefined).length;
-  }
-  return activeCountByGroup;
+	const activeCountByGroup = {};
+	for (const group of props.filters) {
+		activeCountByGroup[group.name] = group.fields.filter(field => props.activeFilter[field.name] !== undefined).length;
+	}
+	return activeCountByGroup;
 });
 function updateFilter(field, value) {
-  let fieldFilter = { [field.name]: value };
-  if (field.filterBy) {
-    fieldFilter = field.filterBy(value);
-  }
-  emit("update:filter", { ...props.filter, ...fieldFilter });
+	let activeFilter = { [field.name]: value };
+	if (field.filterBy) {
+		activeFilter = field.filterBy(value);
+	}
+	emit("update:filter", { ...props.activeFilter, ...activeFilter });
 }
 </script>

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

@@ -5,6 +5,7 @@
         v-if="field.options?.length > 0 || loading"
         :model-value="modelValue"
         :options="field.options"
+        :clearable="field.clearable === undefined ? true : field.clearable"
         multiple
         :loading="loading"
         :chip-limit="1"
@@ -30,6 +31,7 @@
       v-else-if="field.type === 'single-select'"
       :model-value="modelValue"
       :options="field.options"
+      :clearable="field.clearable === undefined ? true : field.clearable"
       :placeholder="field.placeholder"
       :loading="loading"
       :label="field.label"
@@ -46,7 +48,7 @@
       v-else-if="field.type === 'date-range'"
       :model-value="modelValue"
       :label="field.label"
-      :inline="field.inline"
+      :inline="!!field.inline"
       with-time
       class="mt-2 reactive"
       @update:model-value="onUpdate"
@@ -106,43 +108,38 @@
     </template>
   </div>
 </template>
-<script setup>
+<script setup lang="ts">
+import { FormField } from "../../../types";
 import {
-  BooleanField,
-  DateField,
-  DateRangeField,
-  MultiKeywordField,
-  NumberRangeField,
-  SelectField,
-  SelectWithChildrenField
+	BooleanField,
+	DateField,
+	DateRangeField,
+	MultiKeywordField,
+	NumberRangeField,
+	SelectField,
+	SelectWithChildrenField
 } from "../Form/Fields";
 
 const emit = defineEmits(["update:model-value"]);
-const props = defineProps({
-  field: {
-    type: Object,
-    required: true
-  },
-  modelValue: {
-    type: [String, Array, Number, Object, Boolean],
-    default: undefined
-  },
-  loading: Boolean
-});
+const props = defineProps<{
+	field: FormField;
+	modelValue?: any;
+	loading?: boolean;
+}>();
 
 function onUpdate(val) {
-  let newVal = val || undefined;
+	let newVal = val || undefined;
 
-  switch (props.field.type) {
-    case "multi-select":
-      newVal = val.length > 0 ? val : undefined;
-      break;
-    case "single-select":
-    case "boolean":
-      newVal = val === null ? undefined : val;
-      break;
-  }
+	switch (props.field.type) {
+		case "multi-select":
+			newVal = (val && val.length > 0) ? val : undefined;
+			break;
+		case "single-select":
+		case "boolean":
+			newVal = val === null ? undefined : val;
+			break;
+	}
 
-  emit("update:model-value", newVal);
+	emit("update:model-value", newVal);
 }
 </script>

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

@@ -1,6 +1,6 @@
 export { default as CollapsableFiltersSidebar } from "./CollapsableFiltersSidebar.vue";
 export { default as FilterableField } from "./FilterableField.vue";
-export { default as FilterFieldItem } from "./FilterFieldItem.vue";
-export { default as FilterFieldList } from "./FilterFieldList.vue";
+export { default as FilterItem } from "./FilterItem.vue";
+export { default as FilterList } from "./FilterList.vue";
 export { default as FilterListToggle } from "./FilterListToggle.vue";
 export { default as FilterToolbarLayout } from "./FilterToolbarLayout.vue";

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

@@ -0,0 +1,71 @@
+<template>
+  <div
+    class="danx-edit-on-click-text-field flex flex-nowrap items-center rounded overflow-ellipsis"
+    :class="{[props.class]: true, 'is-readonly': readonly, 'cursor-pointer': !isEditing && !readonly}"
+    @click="onEdit"
+  >
+    <div
+      ref="editableBox"
+      :contenteditable="!readonly && isEditing"
+      class="flex-grow p-2 rounded outline-none border-none"
+      :class="{[editingClass]: isEditing}"
+      @input="text = $event.target.innerText"
+    >
+      {{ text }}
+    </div>
+    <div v-if="!readonly">
+      <QBtn
+        v-if="isEditing"
+        @click.stop="isEditing = false"
+      >
+        <DoneIcon class="w-4" />
+      </QBtn>
+      <QBtn
+        v-else
+        class="edit-icon"
+      >
+        <EditIcon class="w-4" />
+      </QBtn>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { FaSolidCheck as DoneIcon, FaSolidPencil as EditIcon } from "danx-icon";
+import { nextTick, ref } from "vue";
+
+export interface Props {
+	class?: "hover:bg-slate-300",
+	editingClass?: "bg-slate-500";
+	readonly?: boolean;
+}
+
+const editableBox = ref<HTMLElement | null>(null);
+const text = defineModel({ type: String });
+const props = defineProps<Props>();
+const isEditing = ref(false);
+function onEdit() {
+	if (props.readonly) return;
+	isEditing.value = true;
+	nextTick(() => {
+		editableBox.value?.focus();
+	});
+}
+
+</script>
+
+<style lang="scss" scoped>
+.danx-edit-on-click-text-field {
+	@apply transition-all;
+
+	.edit-icon {
+		@apply opacity-0 transition-all;
+
+	}
+
+	&:hover {
+		.edit-icon {
+			@apply opacity-100;
+		}
+	}
+}
+</style>

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

@@ -11,21 +11,16 @@
   </span>
 </template>
 
-<script setup>
+<script setup lang="ts">
+import { FormField } from "src/types";
 import { computed } from "vue";
 
-const props = defineProps({
-  field: {
-    type: Object,
-    default: null
-  },
-  label: {
-    type: String,
-    default: null
-  },
-  showName: Boolean,
-  required: Boolean
-});
+const props = defineProps<{
+	field?: FormField;
+	label?: string;
+	showName?: boolean;
+	required?: boolean;
+}>();
 
 const labelText = computed(() => props.label || props.field?.label);
 const requiredLabel = computed(() => props.field?.required_group || (props.required || props.field?.required ? "*" : ""));

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

@@ -1,55 +1,62 @@
 <template>
   <div
     class="max-w-full relative overflow-auto"
-    :class="{'p-4 border rounded border-gray-300': !readonly}"
+    :class="{'p-2': !readonly}"
     @dragover.prevent
     @drop.prevent="onDrop"
   >
     <FieldLabel
       :field="field"
+      :label="label"
       :show-name="showName"
       class="text-sm font-semibold"
     />
-    <div
+
+    <input
       v-if="!disable && !readonly"
-      class="text-sm my-2"
+      ref="file"
+      class="hidden"
+      type="file"
+      multiple
+      @change="onFilesSelected"
     >
-      <a
-        class="text-blue-600"
-        @click="$refs.file.click()"
-      >Upload</a>
-      <a
-        v-if="uploadedFiles.length > 0"
-        class="ml-3 text-red-900"
-        @click="clearUploadedFiles"
-      >Clear</a>
-      <input
-        ref="file"
-        class="hidden"
-        type="file"
-        multiple
-        @change="onFilesSelected"
-      >
-    </div>
 
     <div class="max-w-[50em] flex items-stretch justify-start">
       <FilePreview
         v-for="file in uploadedFiles"
         :key="'file-upload-' + file.id"
-        class="w-32 m-2 cursor-pointer bg-gray-200"
+        class="w-32 h-32 m-2 cursor-pointer bg-gray-200"
         :class="{'border border-dashed border-blue-600': !uploadedFiles.length}"
-        :image="file"
+        :file="file"
         :related-files="uploadedFiles"
         downloadable
         :removable="!readonly && !disable"
         @remove="onRemove(file)"
       />
-      <FilePreview
+      <div
         v-if="!disable && !readonly"
-        class="w-32 m-2 cursor-pointer border border-dashed border-blue-600"
-        disabled
-        @click="$refs.file.click()"
-      />
+        class="dx-add-remove-files w-32 h-32 m-2 rounded-2xl flex flex-col flex-nowrap items-center overflow-hidden cursor-pointer"
+      >
+        <div
+          class="dx-add-file flex-grow p-1 pt-3 flex justify-center items-center bg-green-200 text-green-700 w-full hover:bg-green-100"
+          @click="$refs.file.click()"
+        >
+          <div>
+            <AddFileIcon class="w-10 m-auto" />
+            <div class="mt-1 text-center">
+              Add
+            </div>
+          </div>
+        </div>
+        <div
+          v-if="uploadedFiles.length > 0"
+          class="dx-remove-file flex items-center flex-nowrap p-2 bg-red-200 text-red-800 hover:bg-red-100 w-full justify-center text-xs"
+          @click="clearUploadedFiles"
+        >
+          <RemoveFileIcon class="mr-2 w-3" />
+          Remove All
+        </div>
+      </div>
       <div
         v-if="readonly && uploadedFiles.length === 0"
         class="p-1"
@@ -60,32 +67,29 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { onMounted } from "vue";
 import { useMultiFileUpload } from "../../../../helpers";
+import { ImageIcon as AddFileIcon, TrashIcon as RemoveFileIcon } from "../../../../svg";
+import { FormField, UploadedFile } from "../../../../types";
 import { FilePreview } from "../../../Utility";
 import FieldLabel from "./FieldLabel";
 
 const emit = defineEmits(["update:model-value"]);
-const props = defineProps({
-  modelValue: {
-    type: [Object, String],
-    default: null
-  },
-  field: {
-    type: Object,
-    required: true
-  },
-  showName: Boolean,
-  disable: Boolean,
-  readonly: Boolean
-});
+const props = defineProps<{
+	modelValue?: UploadedFile[];
+	field?: FormField;
+	label?: string;
+	showName?: boolean;
+	disable?: boolean;
+	readonly?: boolean;
+}>();
 
 const { onComplete, onDrop, onFilesSelected, uploadedFiles, clearUploadedFiles, onRemove } = useMultiFileUpload();
 onMounted(() => {
-  if (props.modelValue) {
-    uploadedFiles.value = props.modelValue;
-  }
+	if (props.modelValue) {
+		uploadedFiles.value = props.modelValue;
+	}
 });
 onComplete(() => emit("update:model-value", uploadedFiles.value));
 </script>