quasar-ui-danx 0.4.1 → 0.4.3

package/package.json

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

@@ -8,7 +8,7 @@
       ref="actionTable"
       :selected="selectedRows"
       :pagination="pagination"
-      :columns="columns"
+      :columns="tableColumns"
       :loading="loadingList"
       :rows="pagedItems?.data || []"
       :binary-state-sort="false"
@@ -18,7 +18,7 @@
       :color="color"
       @update:selected="$emit('update:selected-rows', $event)"
       @update:pagination="() => {}"
-      @request="(e) => $emit('update:pagination', {...e.pagination, __sort: mapSortBy(e.pagination, columns)})"
+      @request="(e) => $emit('update:pagination', {...e.pagination, __sort: mapSortBy(e.pagination, tableColumns)})"
     >
       <template #no-data>
         <slot name="empty">
@@ -33,7 +33,7 @@
           :selected-count="selectedRows.length"
           :loading="loadingSummary"
           :summary="summary"
-          :columns="columns"
+          :columns="tableColumns"
           @clear="$emit('update:selected-rows', [])"
         />
       </template>
@@ -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,49 +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<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

@@ -1,5 +1,6 @@
 <template>
   <CollapsableSidebar
+    class="dx-collapsable-filters-sidebar"
     :collapse="!showFilters"
     disabled
     :min-width="minWidth"
@@ -7,32 +8,32 @@
     :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"]);
 
 export interface Props {
-  name: string,
-  showFilters?: boolean,
-  activeFilter: ListControlsFilter,
-  minWidth?: string,
-  maxWidth?: string,
-  filters?: FilterField[]
+	name: string,
+	showFilters?: boolean,
+	activeFilter: ListControlsFilter,
+	minWidth?: string,
+	maxWidth?: string,
+	filters?: FilterGroup[]
 }
 
 withDefaults(defineProps<Props>(), {
-  minWidth: "5rem",
-  maxWidth: "18rem",
-  filters: () => []
+	minWidth: "5rem",
+	maxWidth: "18rem",
+	filters: () => []
 });
 </script>

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/FileUploadButton.vue

@@ -12,8 +12,8 @@
       ref="fileUpload"
       data-testid="file-upload"
       type="file"
-      :accept="geolocation ? 'image/*;capture=camera' : undefined"
-      :capture="geolocation ? 'environment' : undefined"
+      :accept="(geolocation && cameraOnly) ? 'image/*;capture=camera' : undefined"
+      :capture="(geolocation && cameraOnly) ? 'environment' : undefined"
       class="hidden"
       multiple
       @change="onAttachFiles"
@@ -28,28 +28,29 @@ import { FileUpload } from "../../../../helpers";
 
 defineExpose({ upload });
 const emit = defineEmits([
-  "uploading",
-  "file-progress",
-  "file-complete",
-  "complete"
+	"uploading",
+	"file-progress",
+	"file-complete",
+	"complete"
 ]);
 const props = defineProps({
-  ...QBtn.props,
-  text: {
-    type: String,
-    default: "Add File"
-  },
-  locationWaitMessage: {
-    type: String,
-    default: "Waiting for location..."
-  },
-  geolocation: Boolean
+	...QBtn.props,
+	text: {
+		type: String,
+		default: "Add File"
+	},
+	locationWaitMessage: {
+		type: String,
+		default: "Waiting for location..."
+	},
+	cameraOnly: Boolean,
+	geolocation: Boolean
 });
 
 const fileUpload = ref(null);
 
 function upload() {
-  fileUpload.value.click();
+	fileUpload.value.click();
 }
 
 /**
@@ -59,23 +60,23 @@ function upload() {
  * @returns {Promise<void>}
  */
 async function onAttachFiles({ target: { files } }) {
-  emit("uploading", files);
-  let fileUpload = new FileUpload(files)
-    .onProgress(({ file, progress }) => {
-      file.progress = progress;
-      emit("file-progress", file);
-    })
-    .onComplete(({ file, uploadedFile }) => {
-      emit("file-complete", { file, uploadedFile });
-    })
-    .onAllComplete(() => {
-      emit("complete", fileUpload.files);
-    });
+	emit("uploading", files);
+	let fileUpload = new FileUpload(files)
+		.onProgress(({ file, progress }) => {
+			file.progress = progress;
+			emit("file-progress", file);
+		})
+		.onComplete(({ file, uploadedFile }) => {
+			emit("file-complete", { file, uploadedFile });
+		})
+		.onAllComplete(() => {
+			emit("complete", fileUpload.files);
+		});
 
-  if (props.geolocation) {
-    await fileUpload.resolveLocation(props.locationWaitMessage);
-  }
+	if (props.geolocation) {
+		await fileUpload.resolveLocation(props.locationWaitMessage);
+	}
 
-  fileUpload.upload();
+	fileUpload.upload();
 }
 </script>