quasar-ui-danx 0.4.27 → 0.4.29

package/package.json

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

package/src/components/ActionTable/ActionTable.vue

@@ -3,7 +3,6 @@
     class="dx-action-table overflow-hidden"
     :class="{'dx-no-data': !hasData, 'dx-is-loading': loadingList || loadingSummary, 'dx-is-loading-list': loadingList}"
   >
-    <ActionVnode />
     <QTable
       ref="actionTable"
       :selected="selectedRows"
@@ -67,8 +66,7 @@
 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 { ActionTargetItem, ListControlsPagination, ResourceAction, TableColumn } from "../../types";
 import { ActionTableColumn, ActionTableHeaderColumn } from "./Columns";
 import EmptyTableState from "./EmptyTableState.vue";
 import { mapSortBy, registerStickyScrolling } from "./listHelpers";
@@ -86,6 +84,7 @@ export interface Props {
 	loadingSummary?: boolean;
 	pagedItems?: any;
 	summary: any;
+	menuActions?: ResourceAction[];
 	columns: TableColumn[];
 	rowsPerPageOptions?: number[];
 	summaryColSpan?: number;
@@ -105,10 +104,33 @@ const props = withDefaults(defineProps<Props>(), {
 const actionTable = ref(null);
 registerStickyScrolling(actionTable);
 
-const tableColumns = computed<TableColumn[]>(() => props.columns.map((column) => ({
-	...column,
-	field: column.field || column.name
-})));
+const tableColumns = computed<TableColumn[]>(() => {
+	const columns = [...props.columns].map((column: TableColumn) => ({
+		...column,
+		field: column.field || column.name
+	}));
+
+	// Inject the Action Menu column if there are menu actions
+	if (props.menuActions?.length) {
+		const menuColumn = columns.find((column) => column.name === "menu");
+		const menuColumnOptions: TableColumn = {
+			name: "menu",
+			label: "",
+			required: true,
+			hideContent: true,
+			shrink: true,
+			actionMenu: props.menuActions
+		};
+
+		if (menuColumn) {
+			Object.assign(menuColumn, menuColumnOptions);
+		} else {
+			columns.unshift(menuColumnOptions);
+		}
+	}
+
+	return columns;
+});
 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/Filters/FilterableField.vue

@@ -1,6 +1,15 @@
 <template>
   <div>
-    <template v-if="field.type === 'multi-select'">
+    <template v-if="field.type === 'text'">
+      <TextField
+        :model-value="modelValue"
+        :label="field.label"
+        :placeholder="field.placeholder"
+        :debounce="1000"
+        @update:model-value="onUpdate"
+      />
+    </template>
+    <template v-else-if="field.type === 'multi-select'">
       <SelectField
         v-if="field.options?.length > 0 || loading"
         :model-value="modelValue"
@@ -41,6 +50,7 @@
       v-else-if="field.type === 'date'"
       :model-value="modelValue"
       :label="field.label"
+      :clearable="field.clearable === undefined ? true : field.clearable"
       class="mt-2"
       @update:model-value="onUpdate"
     />
@@ -49,6 +59,7 @@
       :model-value="modelValue"
       :label="field.label"
       :inline="!!field.inline"
+      :clearable="field.clearable === undefined ? true : field.clearable"
       with-time
       class="mt-2 reactive"
       @update:model-value="onUpdate"
@@ -117,7 +128,8 @@ import {
 	MultiKeywordField,
 	NumberRangeField,
 	SelectField,
-	SelectWithChildrenField
+	SelectWithChildrenField,
+	TextField
 } from "../Form/Fields";
 
 const emit = defineEmits(["update:model-value"]);

package/src/components/ActionTable/Form/ActionForm.vue

@@ -1,16 +1,14 @@
 <template>
-	<div>
-		<RenderedForm
-			v-bind="renderedFormProps"
-			v-model:values="input"
-			empty-value=""
-			:saved-at="target.updated_at"
-			:saving="action.isApplying"
-			@update:values="action.trigger(target, input)"
-		>
-			<slot />
-		</RenderedForm>
-	</div>
+  <RenderedForm
+    v-bind="renderedFormProps"
+    v-model:values="input"
+    empty-value=""
+    :saved-at="hideSavedAt ? undefined : target.updated_at"
+    :saving="action.isApplying"
+    @update:values="onUpdate"
+  >
+    <slot />
+  </RenderedForm>
 </template>
 <script setup lang="ts">
 import { Ref, ref, watch } from "vue";
@@ -28,8 +26,10 @@ interface ActionFormProps {
 	clearable?: boolean;
 	fieldClass?: string;
 	savingClass?: string;
+	hideSavedAt?: boolean;
 }
 
+const emit = defineEmits(["saved"]);
 const props = withDefaults(defineProps<ActionFormProps>(), {
 	fieldClass: "",
 	savingClass: undefined
@@ -58,4 +58,9 @@ watch(() => props.target, (target: ActionTargetItem) => {
 		}
 	}
 });
+
+async function onUpdate() {
+	await props.action.trigger(props.target, input.value);
+	emit("saved");
+}
 </script>

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

@@ -7,8 +7,8 @@
       {{ label }}
     </div>
     <div class="flex items-center cursor-pointer">
-      <DateIcon class="w-5 text-blue-600" />
-      <div class="font-bold ml-3 hover:text-blue-600">
+      <DateIcon class="w-5" />
+      <div class="flex-grow font-bold ml-3 hover:opacity-70">
         <template v-if="date">
           {{ formattedDate }}
         </template>
@@ -16,6 +16,15 @@
           -&nbsp;-
         </template>
       </div>
+      <div v-if="clearable && date">
+        <QBtn
+          icon="close"
+          size="sm"
+          round
+          flat
+          @click.stop.prevent="(date = null) || onSave()"
+        />
+      </div>
     </div>
     <QPopupProxy>
       <QDate
@@ -26,34 +35,29 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { CalendarIcon as DateIcon } from "@heroicons/vue/outline";
 import { computed, ref, watch } from "vue";
-import { fDate, parseQDate } from "../../../../helpers";
+import { fDate, parseDateTime } from "../../../../helpers";
 
 const emit = defineEmits(["update:model-value"]);
-const props = defineProps({
-  modelValue: {
-    type: [String, Object],
-    default: null
-  },
-  label: {
-    type: String,
-    default: null
-  }
-});
+const props = defineProps<{
+	modelValue?: string | null;
+	label: string | null;
+	clearable: boolean;
+}>();
 
 const formattedDate = computed(() => {
-  if (props.modelValue) {
-    return fDate(parseQDate(props.modelValue || "0000-00-00"));
-  }
-  return null;
+	if (props.modelValue) {
+		return fDate(parseDateTime(props.modelValue || "0000-00-00"));
+	}
+	return "- -";
 });
 
-const date = ref(props.modelValue);
+const date = ref(parseDateTime(props.modelValue));
 watch(() => props.modelValue, val => date.value = val);
 
 function onSave() {
-  emit("update:model-value", date.value);
+	emit("update:model-value", date.value);
 }
 </script>

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

@@ -13,8 +13,8 @@
     </template>
     <template v-else>
       <div class="flex items-center cursor-pointer">
-        <DateIcon class="w-5 text-blue-600" />
-        <div class="font-bold ml-3 hover:text-blue-600">
+        <DateIcon class="w-5 py-2" />
+        <div class="flex-grow font-bold ml-3 hover:opacity-70">
           <template v-if="dateRangeValue">
             {{ formattedDates.from }} - {{ formattedDates.to }}
           </template>
@@ -22,6 +22,15 @@
             -&nbsp;-
           </template>
         </div>
+        <div v-if="clearable && dateRange">
+          <QBtn
+            icon="close"
+            size="sm"
+            round
+            flat
+            @click.stop.prevent="(dateRange = null) || onSave()"
+          />
+        </div>
       </div>
       <QPopupProxy>
         <QDate
@@ -34,80 +43,75 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { CalendarIcon as DateIcon } from "@heroicons/vue/outline";
 import { computed, ref, watch } from "vue";
 import { fDate, parseQDate, parseQDateTime } from "../../../../helpers";
 import FieldLabel from "./FieldLabel";
 
 const emit = defineEmits(["update:model-value"]);
-const props = defineProps({
-  modelValue: {
-    type: Object,
-    default: null
-  },
-  label: {
-    type: String,
-    default: null
-  },
-  inline: Boolean,
-  withTime: Boolean
-});
+const props = defineProps<{
+	modelValue?: { from: string; to: string } | null;
+	label: string | null;
+	inline: boolean;
+	clearable: boolean;
+	withTime: boolean;
+}>();
 
 const formattedDates = computed(() => {
-  if (dateRangeValue.value) {
-    if (props.withTime) {
-      return {
-        from: fDate(parseQDateTime(dateRangeValue.value.from || "0000-00-00")),
-        to: fDate(parseQDateTime(dateRangeValue.value.to || "9999-12-31"))
-      };
-    }
+	if (dateRangeValue.value) {
+		if (props.withTime) {
+			return {
+				from: fDate(parseQDateTime(dateRangeValue.value.from || "0000-00-00")),
+				to: fDate(parseQDateTime(dateRangeValue.value.to || "9999-12-31"))
+			};
+		}
 
-    return {
-      from: fDate(parseQDate(dateRangeValue.value.from || "0000-00-00")),
-      to: fDate(parseQDate(dateRangeValue.value.to || "9999-12-31"))
-    };
-  }
-  return {
-    from: null,
-    to: null
-  };
+		return {
+			from: fDate(parseQDate(dateRangeValue.value.from || "0000-00-00")),
+			to: fDate(parseQDate(dateRangeValue.value.to || "9999-12-31"))
+		};
+	}
+	return {
+		from: null,
+		to: null
+	};
 });
 
 const dateRange = ref(toQDateValue(props.modelValue));
 watch(() => props.modelValue, val => dateRange.value = toQDateValue(val));
 
 function toQDateValue(val) {
-  if (val?.from && val?.to) {
-    return fDate(val.from) === fDate(val.to) ? val.from : val;
-  }
-  return null;
+	if (val?.from && val?.to) {
+		return fDate(val.from) === fDate(val.to) ? val.from : val;
+	}
+	return null;
 }
 
 const dateRangeValue = computed(() => {
-  let range;
+	let range;
 
-  if (typeof dateRange.value === "string") {
-    range = {
-      from: dateRange.value,
-      to: dateRange.value
-    };
-  } else if (dateRange.value) {
-    range = {
-      from: dateRange.value.from,
-      to: dateRange.value.to
-    };
-  }
+	if (typeof dateRange.value === "string") {
+		range = {
+			from: dateRange.value,
+			to: dateRange.value
+		};
+	} else if (dateRange.value) {
+		range = {
+			from: dateRange.value.from,
+			to: dateRange.value.to
+		};
+	}
 
-  if (range?.from && range?.to && props.withTime && !range.from.includes("00:00:00")) {
-    range.from += " 00:00:00";
-    range.to += " 23:59:59";
-  }
+	if (range?.from && range?.to && props.withTime && !range.from.includes("00:00:00")) {
+		range.from += " 00:00:00";
+		range.to += " 23:59:59";
+	}
 
-  return range;
+	return range;
 });
 
 function onSave() {
-  emit("update:model-value", dateRangeValue.value);
+	emit("update:model-value", dateRangeValue.value);
 }
 </script>

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

@@ -10,9 +10,9 @@
       :contenteditable="!readonly && isEditing"
       class="flex-grow p-2 rounded outline-none border-none"
       :class="{[editingClass]: isEditing, [inputClass]: true}"
-      @input="text = $event.target.innerText"
+      @input="onUpdate($event.target.innerText)"
     >
-      {{ text }}
+      {{ isEditing ? editingText : text }}
     </div>
     <div v-if="!readonly">
       <QBtn
@@ -43,6 +43,7 @@ export interface EditOnClickTextFieldProps {
 
 const editableBox = ref<HTMLElement | null>(null);
 const text = defineModel({ type: String });
+const editingText = ref(text.value);
 const props = withDefaults(defineProps<EditOnClickTextFieldProps>(), {
 	class: "hover:bg-slate-300",
 	editingClass: "bg-slate-500",
@@ -52,11 +53,17 @@ const isEditing = ref(false);
 function onEdit() {
 	if (props.readonly) return;
 	isEditing.value = true;
+	editingText.value = text.value;
 	nextTick(() => {
 		editableBox.value?.focus();
 	});
 }
 
+function onUpdate(newText: string) {
+	editingText.value = newText;
+	text.value = newText;
+}
+
 </script>
 
 <style lang="scss" scoped>

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

@@ -1,39 +1,69 @@
 <template>
-  <div
-    contenteditable
-    class="inline-block hover:bg-blue-200 focus:bg-blue-200 transition duration-300 outline-none"
-    @input="onInput"
-  >
-    {{ text }}
+  <div class="inline-block relative">
+    <div
+      contenteditable
+      class="relative inline-block transition duration-300 outline-none outline-offset-0 border-none focus:outline-4 hover:outline-4 rounded-sm z-10"
+      :style="{minWidth, minHeight}"
+      :class="contentClass"
+      @input="onInput"
+    >
+      {{ text }}
+    </div>
+    <div
+      v-if="!text && placeholder"
+      ref="placeholderDiv"
+      class="text-gray-600 absolute-top-left whitespace-nowrap z-1"
+    >
+      {{ placeholder }}
+    </div>
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { useDebounceFn } from "@vueuse/core";
-import { ref } from "vue";
+import { computed, onMounted, ref } from "vue";
 
 const emit = defineEmits(["update:model-value", "change"]);
-const props = defineProps({
-  modelValue: {
-    type: String,
-    required: true
-  },
-  debounceDelay: {
-    type: Number,
-    default: 500
-  }
+const props = withDefaults(defineProps<{
+	modelValue: string;
+	color?: string;
+	debounceDelay?: number;
+	placeholder?: string;
+}>(), {
+	// NOTE: You must safe-list required colors in tailwind.config.js
+	//       Add text-blue-900, hover:bg-blue-200, hover:outline-blue-200, focus:outline-blue-200 and focus:bg-blue-200 for the following config
+	color: "blue-200",
+	textColor: "blue-900",
+	debounceDelay: 1000,
+	placeholder: "Enter Text..."
 });
 
 const text = ref(props.modelValue);
+const placeholderDiv = ref(null);
+const minWidth = ref(0);
+const minHeight = ref(0);
+
+onMounted(() => {
+	// Set the min-width to the width of the placeholder
+	if (placeholderDiv.value) {
+		minWidth.value = placeholderDiv.value.offsetWidth + "px";
+		minHeight.value = placeholderDiv.value.offsetHeight + "px";
+	}
+});
 
 const debouncedChange = useDebounceFn(() => {
-  emit("update:model-value", text.value);
-  emit("change", text.value);
+	emit("update:model-value", text.value);
+	emit("change", text.value);
 }, props.debounceDelay);
 
 function onInput(e) {
-  text.value = e.target.innerText;
-  debouncedChange();
+	text.value = e.target.innerText;
+	debouncedChange();
 }
 
+const contentClass = computed(() => [
+	`hover:bg-${props.color} focus:bg-${props.color}`,
+	`hover:text-${props.textColor} focus:text-${props.textColor}`,
+	`hover:outline-${props.color} focus:outline-${props.color}`
+]);
 </script>

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

@@ -22,7 +22,7 @@
 
 <script setup lang="ts">
 defineProps<{
-	label?: string;
+	label?: string | null;
 	name?: string;
 	required?: boolean;
 	requiredLabel?: string;

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

@@ -86,6 +86,8 @@ export interface Props extends QSelectProps {
 	options?: unknown[];
 	filterable?: boolean;
 	filterFn?: (val: string) => void;
+	selectByObject?: boolean;
+	optionLabel?: string | ((option) => string);
 }
 
 const emit = defineEmits(["update:model-value", "search", "update"]);
@@ -97,7 +99,8 @@ const props = withDefaults(defineProps<Props>(), {
 	inputClass: "",
 	selectionClass: "",
 	options: () => [],
-	filterFn: null
+	filterFn: null,
+	optionLabel: "label"
 });
 
 const selectField = ref(null);
@@ -146,7 +149,11 @@ const selectedValue = computed(() => {
 			return v === null ? "__null__" : v;
 		}) || [];
 	} else {
-		return props.modelValue === null ? "__null__" : props.modelValue;
+		if (props.modelValue === null) return "__null__";
+
+		if (props.selectByObject) return props.modelValue.value || props.modelValue.id;
+
+		return props.modelValue;
 	}
 });
 
@@ -159,8 +166,14 @@ const selectedOptions = computed(() => {
 	if (!props.multiple) {
 		values = (values || values === 0) ? [values] : [];
 	}
+
+	const comparableValues = values.map((v) => {
+		if (v === "__null__") return null;
+		if (typeof v === "object") return v.value || v.id;
+		return v;
+	});
 	return computedOptions.value.filter((o) => {
-		return values.includes(o.value) || values.map(v => typeof v === "object" && v.id).includes(o.value?.id);
+		return comparableValues.includes(o.value);
 	});
 });
 
@@ -175,6 +188,7 @@ const selectedLabel = computed(() => {
 	if (!selectedOptions.value || selectedOptions.value.length === 0) {
 		return props.placeholder || "(Select Option)";
 	}
+
 	return selectedOptions.value[0].selectionLabel;
 });
 
@@ -220,7 +234,7 @@ function resolveSelectionLabel(option) {
 	if (typeof props.selectionLabel === "function") {
 		return props.selectionLabel(option);
 	}
-	return option?.selectionLabel || option?.label;
+	return option?.selectionLabel || option?.label || (option && option[props.optionLabel]);
 }
 
 /**
@@ -232,7 +246,7 @@ function resolveValue(option) {
 	if (!option || typeof option === "string") {
 		return option;
 	}
-	let value = option.value;
+	let value = option.value || option.id;
 	if (typeof props.optionValue === "string") {
 		value = option[props.optionValue];
 	} else if (typeof props.optionValue === "function") {
@@ -255,6 +269,13 @@ function onUpdate(value) {
 
 	value = value === "__null__" ? null : value;
 
+	if (props.selectByObject && value !== null && value !== undefined && typeof value !== "object") {
+		if (props.multiple) {
+			value = props.options.filter((o) => value.includes(resolveValue(o)));
+		} else {
+			value = props.options.find((o) => resolveValue(o) === value);
+		}
+	}
 	emit("update:model-value", value);
 	emit("update", value);
 }
@@ -275,7 +296,7 @@ async function onFilter(val, update) {
 		await nextTick(update);
 	} else {
 		update();
-		if (shouldFilter.value === false) return;
+		if (!shouldFilter.value) return;
 		if (val !== null && val !== filter.value) {
 			filter.value = val;
 			if (props.filterFn) {

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

@@ -0,0 +1,56 @@
+<template>
+  <div class="flex items-stretch flex-nowrap gap-x-4">
+    <QBtn
+      class="bg-green-900 px-4"
+      :loading="loading"
+      @click="$emit('create')"
+    >
+      <CreateIcon
+        class="w-4"
+        :class="createText ? 'mr-2' : ''"
+      />
+      {{ createText }}
+    </QBtn>
+    <SelectField
+      v-model="selected"
+      class="flex-grow"
+      :options="options"
+      :clearable="clearable"
+      :select-by-object="selectByObject"
+      :option-label="optionLabel"
+    />
+    <ShowHideButton
+      v-if="showEdit"
+      v-model="editing"
+      :disable="!canEdit"
+      :label="editText"
+      class="bg-sky-800 w-1/5"
+    />
+  </div>
+</template>
+<script setup lang="ts">
+import { FaSolidPlus as CreateIcon } from "danx-icon";
+import { QSelectOption } from "quasar";
+import { ActionTargetItem } from "../../../../types";
+import { ShowHideButton } from "../../../Utility/Buttons";
+import SelectField from "./SelectField";
+
+defineEmits(["create"]);
+const selected = defineModel<string | number | object | null>("selected");
+const editing = defineModel<boolean>("editing");
+withDefaults(defineProps<{
+	options: QSelectOption[] | ActionTargetItem[];
+	showEdit?: boolean;
+	canEdit?: boolean;
+	loading?: boolean;
+	selectByObject?: boolean;
+	optionLabel?: string;
+	createText?: string;
+	editText?: string;
+	clearable?: boolean;
+}>(), {
+	optionLabel: "label",
+	createText: "Create",
+	editText: "Edit"
+});
+</script>