quasar-ui-danx 0.3.24 → 0.3.26

package/package.json

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

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"
@@ -108,41 +110,41 @@
 </template>
 <script setup>
 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
+	field: {
+		type: Object,
+		required: true
+	},
+	modelValue: {
+		type: [String, Array, Number, Object, Boolean],
+		default: undefined
+	},
+	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/Form/RenderedForm.vue

@@ -75,6 +75,7 @@
         :label="field.label || undefined"
         :no-label="noLabel"
         :show-name="showName"
+        :clearable="field.clearable || clearable"
         :disable="disable"
         :readonly="readonly"
         @update:model-value="onInput(field.name, $event)"
@@ -111,65 +112,66 @@ import { FlashMessages, incrementName, replace } from "../../../helpers";
 import { TrashIcon as RemoveIcon } from "../../../svg";
 import { ConfirmDialog } from "../../Utility";
 import {
-  BooleanField,
-  DateField,
-  DateRangeField,
-  IntegerField,
-  MultiFileField,
-  NumberField,
-  SingleFileField,
-  TextField,
-  WysiwygField
+	BooleanField,
+	DateField,
+	DateRangeField,
+	IntegerField,
+	MultiFileField,
+	NumberField,
+	SingleFileField,
+	TextField,
+	WysiwygField
 } from "./Fields";
 
 const emit = defineEmits(["update:values"]);
 const props = defineProps({
-  values: {
-    type: Array,
-    default: null
-  },
-  form: {
-    type: Object,
-    required: true
-  },
-  noLabel: Boolean,
-  showName: Boolean,
-  disable: Boolean,
-  readonly: Boolean,
-  saving: Boolean,
-  emptyValue: {
-    type: [String, Number, Boolean],
-    default: undefined
-  },
-  canModifyVariations: Boolean
+	values: {
+		type: Array,
+		default: null
+	},
+	form: {
+		type: Object,
+		required: true
+	},
+	noLabel: Boolean,
+	showName: Boolean,
+	disable: Boolean,
+	clearable: Boolean,
+	readonly: Boolean,
+	saving: Boolean,
+	emptyValue: {
+		type: [String, Number, Boolean],
+		default: undefined
+	},
+	canModifyVariations: Boolean
 });
 
 const FORM_FIELD_MAP = {
-  BOOLEAN: BooleanField,
-  DATE: DateField,
-  DATE_RANGE: DateRangeField,
-  INTEGER: IntegerField,
-  NUMBER: NumberField,
-  TEXT: TextField,
-  SINGLE_FILE: SingleFileField,
-  MULTI_FILE: MultiFileField,
-  WYSIWYG: WysiwygField
+	BOOLEAN: BooleanField,
+	DATE: DateField,
+	DATE_RANGE: DateRangeField,
+	INTEGER: IntegerField,
+	NUMBER: NumberField,
+	TEXT: TextField,
+	SINGLE_FILE: SingleFileField,
+	MULTI_FILE: MultiFileField,
+	WYSIWYG: WysiwygField
 };
 
 const mappedFields = props.form.fields.map((field) => ({
-  placeholder: `Enter ${field.label}`,
-  ...field,
-  component: FORM_FIELD_MAP[field.type],
-  default: field.type === "BOOLEAN" ? false : ""
+	placeholder: `Enter ${field.label}`,
+	...field,
+	component: FORM_FIELD_MAP[field.type],
+	default: field.type === "BOOLEAN" ? false : ""
 }));
 
 const variationNames = computed(() => {
-  const names = [...new Set(props.values.map(v => v.variation))].sort();
-  // Always guarantee that we show the default variation
-  if (names.length === 0) {
-    names.push("");
-  }
-  return names;
+	const names = [...new Set(props.values.map(v => v.variation))].sort();
+	// Always guarantee that we show the default variation
+	if (names.length === 0) {
+		names.push("");
+	}
+	return names;
 });
 
 const currentVariation = ref(variationNames.value[0] || "");
@@ -179,88 +181,88 @@ const variationToDelete = ref("");
 const canAddVariation = computed(() => props.canModifyVariations && !props.readonly && !props.disable && variationNames.value.length < props.form.variations);
 
 function getFieldResponse(name, variation) {
-  if (!props.values) return undefined;
-  return props.values.find((v) => v.variation === (variation !== undefined ? variation : currentVariation.value) && v.name === name);
+	if (!props.values) return undefined;
+	return props.values.find((v) => v.variation === (variation !== undefined ? variation : currentVariation.value) && v.name === name);
 }
 function getFieldValue(name) {
-  return getFieldResponse(name)?.value;
+	return getFieldResponse(name)?.value;
 }
 function onInput(name, value) {
-  const fieldResponse = getFieldResponse(name);
-  const newFieldResponse = {
-    name,
-    variation: currentVariation.value || "",
-    value: value === undefined ? props.emptyValue : value
-  };
-  const newValues = replace(props.values, fieldResponse, newFieldResponse, true);
-  emit("update:values", newValues);
+	const fieldResponse = getFieldResponse(name);
+	const newFieldResponse = {
+		name,
+		variation: currentVariation.value || "",
+		value: value === undefined ? props.emptyValue : value
+	};
+	const newValues = replace(props.values, fieldResponse, newFieldResponse, true);
+	emit("update:values", newValues);
 }
 
 function createVariation(variation) {
-  return props.form.fields.map((field) => ({
-    variation,
-    name: field.name,
-    value: field.type === "BOOLEAN" ? false : null
-  }));
+	return props.form.fields.map((field) => ({
+		variation,
+		name: field.name,
+		value: field.type === "BOOLEAN" ? false : null
+	}));
 }
 
 function onAddVariation() {
-  if (props.saving) return;
-  let newValues = [...props.values];
+	if (props.saving) return;
+	let newValues = [...props.values];
 
-  if (newValues.length === 0) {
-    newValues = createVariation("");
-  }
-  const previousName = variationNames.value[variationNames.value.length - 1];
-  const newName = incrementName(!previousName ? "1" : previousName);
-  const newVariation = createVariation(newName);
-  emit("update:values", [...newValues, ...newVariation]);
-  currentVariation.value = newName;
+	if (newValues.length === 0) {
+		newValues = createVariation("");
+	}
+	const previousName = variationNames.value[variationNames.value.length - 1];
+	const newName = incrementName(!previousName ? "1" : previousName);
+	const newVariation = createVariation(newName);
+	emit("update:values", [...newValues, ...newVariation]);
+	currentVariation.value = newName;
 }
 
 function onChangeVariationName() {
-  if (!newVariationName.value) return;
-  if (variationNames.value.includes(newVariationName.value)) {
-    FlashMessages.error("Variation name already exists");
-    return;
-  }
-  const newValues = props.values.map((v) => {
-    if (v.variation === variationToEdit.value) {
-      return { ...v, variation: newVariationName.value };
-    }
-    return v;
-  });
-  emit("update:values", newValues);
+	if (!newVariationName.value) return;
+	if (variationNames.value.includes(newVariationName.value)) {
+		FlashMessages.error("Variation name already exists");
+		return;
+	}
+	const newValues = props.values.map((v) => {
+		if (v.variation === variationToEdit.value) {
+			return { ...v, variation: newVariationName.value };
+		}
+		return v;
+	});
+	emit("update:values", newValues);
 
-  currentVariation.value = newVariationName.value;
-  variationToEdit.value = false;
-  newVariationName.value = "";
+	currentVariation.value = newVariationName.value;
+	variationToEdit.value = false;
+	newVariationName.value = "";
 }
 
 function onRemoveVariation(name) {
-  if (!name) return;
+	if (!name) return;
 
-  const newValues = props.values.filter((v) => v.variation !== name);
-  emit("update:values", newValues);
+	const newValues = props.values.filter((v) => v.variation !== name);
+	emit("update:values", newValues);
 
-  if (currentVariation.value === name) {
-    currentVariation.value = variationNames.value[0];
-  }
-  variationToDelete.value = "";
+	if (currentVariation.value === name) {
+		currentVariation.value = variationNames.value[0];
+	}
+	variationToDelete.value = "";
 }
 
 function isVariationFormComplete(variation) {
-  const requiredGroups = {};
-  return props.form.fields.filter(r => r.required || r.required_group).every((field) => {
-    const fieldResponse = getFieldResponse(field.name, variation);
-    const hasValue = !!fieldResponse && fieldResponse.value !== null;
-    if (field.required_group) {
-      // This required group has already been satisfied
-      if (requiredGroups[field.required_group]) return true;
-      return requiredGroups[field.required_group] = hasValue;
-    } else {
-      return hasValue;
-    }
-  });
+	const requiredGroups = {};
+	return props.form.fields.filter(r => r.required || r.required_group).every((field) => {
+		const fieldResponse = getFieldResponse(field.name, variation);
+		const hasValue = !!fieldResponse && fieldResponse.value !== null;
+		if (field.required_group) {
+			// This required group has already been satisfied
+			if (requiredGroups[field.required_group]) return true;
+			return requiredGroups[field.required_group] = hasValue;
+		} else {
+			return hasValue;
+		}
+	});
 }
 </script>

package/src/components/ActionTable/tableColumns.ts

@@ -2,81 +2,82 @@ import { computed, ref, watch } from "vue";
 import { getItem, setItem } from "../../helpers";
 
 export interface TableColumn {
-    actionMenu?: object,
-    align?: string,
-    category?: string,
-    class?: string | object,
-    field: string,
-    format?: Function,
-    innerClass?: string | object,
-    style?: string | object,
-    headerStyle?: string | object,
-    isSavingRow?: boolean | Function,
-    label: string,
-    maxWidth?: number,
-    minWidth?: number,
-    name: string,
-    onClick?: Function,
-    required?: boolean,
-    resizeable?: boolean,
-    sortable?: boolean,
-    sortBy?: string,
-    sortByExpression?: string,
-    titleColumns?: Function,
-    vnode?: Function,
+	actionMenu?: object,
+	align?: string,
+	category?: string,
+	class?: string | object,
+	field: string,
+	format?: Function,
+	innerClass?: string | object,
+	style?: string | object,
+	headerStyle?: string | object,
+	isSavingRow?: boolean | Function,
+	label: string,
+	maxWidth?: number,
+	minWidth?: number,
+	name: string,
+	onClick?: Function,
+	required?: boolean,
+	resizeable?: boolean,
+	sortable?: boolean,
+	sortBy?: string,
+	sortByExpression?: string,
+	titleColumns?: Function,
+	vnode?: Function,
 }
 
 export function useTableColumns(name: string, columns: TableColumn[]) {
-    const COLUMN_ORDER_KEY = `${name}-column-order`;
-    const VISIBLE_COLUMNS_KEY = `${name}-visible-columns`;
-    const TITLE_COLUMNS_KEY = `${name}-title-columns`;
+	const COLUMN_ORDER_KEY = `${name}-column-order`;
+	const VISIBLE_COLUMNS_KEY = `${name}-visible-columns`;
+	const TITLE_COLUMNS_KEY = `${name}-title-columns`;
 
-    // The list that defines the order the columns should appear in
-    const columnOrder = ref(getItem(COLUMN_ORDER_KEY) || []);
+	// The list that defines the order the columns should appear in
+	const columnOrder = ref(getItem(COLUMN_ORDER_KEY) || []);
 
-    // Manages visible columns on the table
-    const hiddenColumnNames = ref(getItem(VISIBLE_COLUMNS_KEY, []));
+	// Manages visible columns on the table
+	const hiddenColumnNames = ref(getItem(VISIBLE_COLUMNS_KEY, []));
 
-    // Title columns will have their name appear on the first column of the table as part of the records' title
-    const titleColumnNames = ref(getItem(TITLE_COLUMNS_KEY, []));
+	// Title columns will have their name appear on the first column of the table as part of the records' title
+	const titleColumnNames = ref(getItem(TITLE_COLUMNS_KEY, []));
 
-    // Columns that should be locked to the left side of the table
-    const lockedColumns = computed(() => orderedColumns.value.slice(0, 1));
+	// Columns that should be locked to the left side of the table
+	const lockedColumns = computed(() => orderedColumns.value.slice(0, 1));
 
-    // The resolved list of columns in the order they should appear in
-    const orderedColumns = computed(() => [...columns].sort((a, b) => {
-        const aIndex = columnOrder.value.indexOf(a.name);
-        const bIndex = columnOrder.value.indexOf(b.name);
-        return aIndex === -1 ? 1 : bIndex === -1 ? -1 : aIndex - bIndex;
-    }));
+	// The resolved list of columns in the order they should appear in
+	const orderedColumns = computed(() => [...columns].sort((a, b) => {
+		const aIndex = columnOrder.value.indexOf(a.name);
+		const bIndex = columnOrder.value.indexOf(b.name);
+		return aIndex === -1 ? 1 : bIndex === -1 ? -1 : aIndex - bIndex;
+	}));
 
-    // The ordered list of columns. The ordering of this list is editable and will be stored in localStorage
-    const sortableColumns = computed({
-        get() {
-            return orderedColumns.value.slice(1);
-        },
-        set(newColumns) {
-            columnOrder.value = [...lockedColumns.value.map(c => c.name), ...newColumns.map(c => c.name)];
-            setItem(COLUMN_ORDER_KEY, columnOrder.value);
-        }
-    });
+	// The ordered list of columns. The ordering of this list is editable and will be stored in localStorage
+	const sortableColumns = computed({
+		get() {
+			return orderedColumns.value.slice(1);
+		},
+		set(newColumns) {
+			columnOrder.value = [...lockedColumns.value.map(c => c.name), ...newColumns.map(c => c.name)];
+			setItem(COLUMN_ORDER_KEY, columnOrder.value);
+		}
+	});
 
-    // The list of columns that are visible. To edit the visible columns, edit the hiddenColumnNames list
-    const visibleColumns = computed(() => orderedColumns.value.filter(c => !hiddenColumnNames.value.includes(c.name)));
+	// The list of columns that are visible. To edit the visible columns, edit the hiddenColumnNames list
+	const visibleColumns = computed(() => orderedColumns.value.filter(c => !hiddenColumnNames.value.includes(c.name)));
 
-    // The list of columns that should be included in the title of a row
-    const orderedTitleColumns = computed(() => orderedColumns.value.filter(c => titleColumnNames.value.includes(c.name)));
+	// The list of columns that should be included in the title of a row
+	const orderedTitleColumns = computed(() => orderedColumns.value.filter(c => titleColumnNames.value.includes(c.name)));
 
-    // Save changes to the list of hidden columns in localStorage
-    watch(() => hiddenColumnNames.value, () => setItem(VISIBLE_COLUMNS_KEY, hiddenColumnNames.value));
-    watch(() => titleColumnNames.value, () => setItem(TITLE_COLUMNS_KEY, titleColumnNames.value));
+	// Save changes to the list of hidden columns in localStorage
+	watch(() => hiddenColumnNames.value, () => setItem(VISIBLE_COLUMNS_KEY, hiddenColumnNames.value));
+	watch(() => titleColumnNames.value, () => setItem(TITLE_COLUMNS_KEY, titleColumnNames.value));
 
-    return {
-        sortableColumns,
-        lockedColumns,
-        visibleColumns,
-        hiddenColumnNames,
-        titleColumnNames,
-        orderedTitleColumns
-    };
+	return {
+		sortableColumns,
+		lockedColumns,
+		visibleColumns,
+		hiddenColumnNames,
+		columnOrder,
+		titleColumnNames,
+		orderedTitleColumns
+	};
 }