quasar-ui-danx 0.4.1 → 0.4.2

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

@@ -16,7 +16,7 @@
       option-value="value"
       placeholder=""
       :input-class="{'is-hidden': !isShowing, [inputClass]: true}"
-      class="max-w-full"
+      class="max-w-full dx-select-field"
       @filter="onFilter"
       @clear="onClear"
       @popup-show="onShow"
@@ -71,40 +71,40 @@ import { computed, isRef, nextTick, ref } from "vue";
 
 const emit = defineEmits(["update:model-value", "search", "update"]);
 const props = defineProps({
-  ...QSelect.props,
-  modelValue: {
-    type: [Array, String, Number, Object],
-    default: undefined
-  },
-  placeholder: {
-    type: String,
-    default: ""
-  },
-  selectionLabel: {
-    type: String,
-    default: null
-  },
-  chipLimit: {
-    type: Number,
-    default: 3
-  },
-  inputClass: {
-    type: String,
-    default: ""
-  },
-  selectionClass: {
-    type: String,
-    default: ""
-  },
-  options: {
-    type: Array,
-    default: () => []
-  },
-  filterable: Boolean,
-  filterFn: {
-    type: Function,
-    default: null
-  }
+	...QSelect.props,
+	modelValue: {
+		type: [Array, String, Number, Object],
+		default: undefined
+	},
+	placeholder: {
+		type: String,
+		default: ""
+	},
+	selectionLabel: {
+		type: String,
+		default: null
+	},
+	chipLimit: {
+		type: Number,
+		default: 3
+	},
+	inputClass: {
+		type: String,
+		default: ""
+	},
+	selectionClass: {
+		type: String,
+		default: ""
+	},
+	options: {
+		type: Array,
+		default: () => []
+	},
+	filterable: Boolean,
+	filterFn: {
+		type: Function,
+		default: null
+	}
 });
 
 const selectField = ref(null);
@@ -119,27 +119,27 @@ const isShowing = ref(false);
  * @type {ComputedRef<{selectionLabel: string, label: string, value: string|*}[]>}
  */
 const computedOptions = computed(() => {
-  let options = props.options;
-  if (props.placeholder && !props.multiple && !props.filterable) {
-    options = [{ label: props.placeholder, value: null }, ...props.options];
-  }
-  options = options.map((o) => {
-    let opt = isRef(o) ? o.value : o;
-    return {
-      label: resolveLabel(opt),
-      value: resolveValue(opt),
-      selectionLabel: resolveSelectionLabel(opt)
-    };
-  });
-  return options;
+	let options = props.options;
+	if (props.placeholder && !props.multiple && !props.filterable) {
+		options = [{ label: props.placeholder, value: null }, ...props.options];
+	}
+	options = options.map((o) => {
+		let opt = isRef(o) ? o.value : o;
+		return {
+			label: resolveLabel(opt),
+			value: resolveValue(opt),
+			selectionLabel: resolveSelectionLabel(opt)
+		};
+	});
+	return options;
 });
 
 const filteredOptions = computed(() => {
-  if (filter.value && !props.filterFn) {
-    return computedOptions.value.filter(o => o.label.toLocaleLowerCase().indexOf(filter.value.toLowerCase()) > -1);
-  } else {
-    return computedOptions.value;
-  }
+	if (filter.value && !props.filterFn) {
+		return computedOptions.value.filter(o => o.label.toLocaleLowerCase().indexOf(filter.value.toLowerCase()) > -1);
+	} else {
+		return computedOptions.value;
+	}
 });
 
 /**
@@ -147,14 +147,14 @@ const filteredOptions = computed(() => {
  * @type {ComputedRef<unknown>}
  */
 const selectedValue = computed(() => {
-  if (props.multiple) {
-    const arrVal = Array.isArray(props.modelValue) ? props.modelValue : [];
-    return arrVal.map((v) => {
-      return v === null ? "__null__" : v;
-    }) || [];
-  } else {
-    return props.modelValue === null ? "__null__" : props.modelValue;
-  }
+	if (props.multiple) {
+		const arrVal = Array.isArray(props.modelValue) ? props.modelValue : [];
+		return arrVal.map((v) => {
+			return v === null ? "__null__" : v;
+		}) || [];
+	} else {
+		return props.modelValue === null ? "__null__" : props.modelValue;
+	}
 });
 
 /**
@@ -162,13 +162,13 @@ const selectedValue = computed(() => {
  * @type {ComputedRef<*>}
  */
 const selectedOptions = computed(() => {
-  let values = selectedValue.value;
-  if (!props.multiple) {
-    values = (values || values === 0) ? [values] : [];
-  }
-  return computedOptions.value.filter((o) => {
-    return values.includes(o.value) || values.map(v => typeof v === "object" && v.id).includes(o.value?.id);
-  });
+	let values = selectedValue.value;
+	if (!props.multiple) {
+		values = (values || values === 0) ? [values] : [];
+	}
+	return computedOptions.value.filter((o) => {
+		return values.includes(o.value) || values.map(v => typeof v === "object" && v.id).includes(o.value?.id);
+	});
 });
 
 /**
@@ -177,12 +177,12 @@ const selectedOptions = computed(() => {
  * @type {ComputedRef<unknown>}
  */
 const selectedLabel = computed(() => {
-  if (props.filterable && isShowing.value) return "";
+	if (props.filterable && isShowing.value) return "";
 
-  if (!selectedOptions.value || selectedOptions.value.length === 0) {
-    return props.placeholder || "(Select Option)";
-  }
-  return selectedOptions.value[0].selectionLabel;
+	if (!selectedOptions.value || selectedOptions.value.length === 0) {
+		return props.placeholder || "(Select Option)";
+	}
+	return selectedOptions.value[0].selectionLabel;
 });
 
 /**
@@ -190,7 +190,7 @@ const selectedLabel = computed(() => {
  * @type {ComputedRef<*>}
  */
 const chipOptions = computed(() => {
-  return selectedOptions.value.slice(0, props.chipLimit);
+	return selectedOptions.value.slice(0, props.chipLimit);
 });
 
 /**
@@ -199,16 +199,16 @@ const chipOptions = computed(() => {
  * @returns {*|string}
  */
 function resolveLabel(option) {
-  if (typeof option === "string") {
-    return option;
-  }
-  if (typeof props.optionLabel === "string") {
-    return option[props.optionLabel];
-  }
-  if (typeof props.optionLabel === "function") {
-    return props.optionLabel(option);
-  }
-  return option?.label;
+	if (typeof option === "string") {
+		return option;
+	}
+	if (typeof props.optionLabel === "string") {
+		return option[props.optionLabel];
+	}
+	if (typeof props.optionLabel === "function") {
+		return props.optionLabel(option);
+	}
+	return option?.label;
 }
 
 /**
@@ -218,16 +218,16 @@ function resolveLabel(option) {
  * @returns {*|{default: null, type: String | StringConstructor}|string}
  */
 function resolveSelectionLabel(option) {
-  if (typeof option === "string") {
-    return option;
-  }
-  if (typeof props.selectionLabel === "string") {
-    return option[props.selectionLabel];
-  }
-  if (typeof props.selectionLabel === "function") {
-    return props.selectionLabel(option);
-  }
-  return option?.selectionLabel || option?.label;
+	if (typeof option === "string") {
+		return option;
+	}
+	if (typeof props.selectionLabel === "string") {
+		return option[props.selectionLabel];
+	}
+	if (typeof props.selectionLabel === "function") {
+		return props.selectionLabel(option);
+	}
+	return option?.selectionLabel || option?.label;
 }
 
 /**
@@ -236,17 +236,17 @@ function resolveSelectionLabel(option) {
  * @returns {string|*|string}
  */
 function resolveValue(option) {
-  if (!option || typeof option === "string") {
-    return option;
-  }
-  let value = option.value;
-  if (typeof props.optionValue === "string") {
-    value = option[props.optionValue];
-  } else if (typeof props.optionValue === "function") {
-    value = props.optionValue(option);
-  }
-  // Note the __null__ special case here. See the onUpdate function for more details
-  return value === null ? "__null__" : value;
+	if (!option || typeof option === "string") {
+		return option;
+	}
+	let value = option.value;
+	if (typeof props.optionValue === "string") {
+		value = option[props.optionValue];
+	} else if (typeof props.optionValue === "function") {
+		value = props.optionValue(option);
+	}
+	// Note the __null__ special case here. See the onUpdate function for more details
+	return value === null ? "__null__" : value;
 }
 
 /**
@@ -256,14 +256,14 @@ function resolveValue(option) {
  * @param value
  */
 function onUpdate(value) {
-  if (Array.isArray(value)) {
-    value = value.map((v) => v === "__null__" ? null : v);
-  }
+	if (Array.isArray(value)) {
+		value = value.map((v) => v === "__null__" ? null : v);
+	}
 
-  value = value === "__null__" ? null : value;
+	value = value === "__null__" ? null : value;
 
-  emit("update", value);
-  emit("update:model-value", value);
+	emit("update", value);
+	emit("update:model-value", value);
 }
 
 /** XXX: This tells us when we should apply the filter. QSelect likes to trigger a new filter everytime you open the dropdown
@@ -277,19 +277,19 @@ const shouldFilter = ref(false);
  * @param update
  */
 async function onFilter(val, update) {
-  if (!props.filterFn) {
-    filter.value = val;
-    await nextTick(update);
-  } else {
-    update();
-    if (shouldFilter.value === false) return;
-    if (val !== null && val !== filter.value) {
-      filter.value = val;
-      if (props.filterFn) {
-        await props.filterFn(val);
-      }
-    }
-  }
+	if (!props.filterFn) {
+		filter.value = val;
+		await nextTick(update);
+	} else {
+		update();
+		if (shouldFilter.value === false) return;
+		if (val !== null && val !== filter.value) {
+			filter.value = val;
+			if (props.filterFn) {
+				await props.filterFn(val);
+			}
+		}
+	}
 }
 
 /**
@@ -297,29 +297,29 @@ async function onFilter(val, update) {
  * See the onUpdate function for more details
  */
 function onClear() {
-  emit("update:model-value", undefined);
-  emit("update", undefined);
+	emit("update:model-value", undefined);
+	emit("update", undefined);
 }
 
 /**
  * Handle behavior when showing the dropdown
  */
 function onShow() {
-  isShowing.value = true;
+	isShowing.value = true;
 
-  // XXX: See description on shouldFilter declaration. Only allow filtering after dropdown is ALREADY opened
-  shouldFilter.value = false;
-  nextTick(() => {
-    shouldFilter.value = true;
-    selectField.value.focus();
-  });
+	// XXX: See description on shouldFilter declaration. Only allow filtering after dropdown is ALREADY opened
+	shouldFilter.value = false;
+	nextTick(() => {
+		shouldFilter.value = true;
+		selectField.value.focus();
+	});
 }
 
 /**
  * Handle behavior when hiding the dropdown
  */
 function onHide() {
-  isShowing.value = false;
-  shouldFilter.value = false;
+	isShowing.value = false;
+	shouldFilter.value = false;
 }
 </script>

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

@@ -70,11 +70,7 @@
       <RenderVnode
         v-if="field.vnode"
         :vnode="field.vnode"
-        :readonly="readonly"
-        :disable="disable"
-        :show-name="showName"
-        :no-label="noLabel"
-        :model-value="getFieldValue(field.name)"
+        :props="{field, modelValue: getFieldValue(field.name), readonly, disable, showName, noLabel}"
         @update:model-value="onInput(field.name, $event)"
       />
       <Component

package/src/components/ActionTable/Layouts/ActionTableLayout.vue

@@ -8,7 +8,11 @@
         :action-target="controller.selectedRows.value"
         :exporter="controller.exportList"
         @refresh="controller.refreshAll"
-      />
+      >
+        <template #default>
+          <slot name="action-toolbar" />
+        </template>
+      </ActionToolbar>
     </slot>
     <div class="flex flex-nowrap flex-grow overflow-hidden w-full">
       <slot name="filter-fields">
@@ -18,6 +22,7 @@
           :show-filters="showFilters"
           :filters="filters"
           :active-filter="activeFilter"
+          class="dx-action-table-filters"
           @update:active-filter="controller.setActiveFilter"
         />
       </slot>
@@ -65,7 +70,7 @@ import { PanelsDrawer } from "../../PanelsDrawer";
 import { PreviousNextControls } from "../../Utility";
 import ActionTable from "../ActionTable";
 import { CollapsableFiltersSidebar } from "../Filters";
-import { ActionController, ActionPanel, FilterField } from "../listControls";
+import { ActionController, ActionPanel, FilterGroup } from "../listControls";
 import { TableColumn } from "../tableColumns";
 import { ActionToolbar } from "../Toolbars";
 
@@ -74,7 +79,7 @@ const props = defineProps<{
 	showFilters: boolean,
 	controller: ActionController,
 	columns: TableColumn[],
-	filters?: FilterField[],
+	filters?: FilterGroup[],
 	panels?: ActionPanel[],
 	actions?: ActionOptions[],
 	exporter?: () => Promise<void>,

package/src/components/ActionTable/Toolbars/ActionToolbar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex items-center">
+  <div class="dx-action-toolbar flex items-center">
     <div class="flex-grow px-6">
       <slot name="title">
         <h2 v-if="title">
@@ -36,11 +36,11 @@ import ActionMenu from "../ActionMenu";
 
 defineEmits(["refresh"]);
 defineProps<{
-  title?: string,
-  actions: ActionOptions[],
-  actionTarget?: ActionTargetItem[],
-  refreshButton?: boolean,
-  loading?: boolean,
-  exporter?: () => void
+	title?: string,
+	actions: ActionOptions[],
+	actionTarget?: ActionTargetItem[],
+	refreshButton?: boolean,
+	loading?: boolean,
+	exporter?: () => void
 }>();
 </script>

package/src/components/ActionTable/tableColumns.ts

@@ -1,82 +1,82 @@
-import { computed, ref, watch } from "vue";
-import { getItem, setItem } from "../../helpers";
+import { computed, ref, VNode, watch } from "vue";
+import { ActionOptions, 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?: ActionOptions[],
+	align?: string,
+	category?: string,
+	class?: string | object,
+	field: string,
+	format?: (value: any, options: any) => any,
+	innerClass?: string | object,
+	style?: string | object,
+	headerStyle?: string | object,
+	isSavingRow?: boolean | (() => boolean),
+	label: string,
+	maxWidth?: number,
+	minWidth?: number,
+	name: string,
+	onClick?: (target: any) => void,
+	required?: boolean,
+	resizeable?: boolean,
+	sortable?: boolean,
+	sortBy?: string,
+	sortByExpression?: string,
+	titleColumns?: () => string[],
+	vnode?: () => VNode,
 }
 
 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,
+		titleColumnNames,
+		orderedTitleColumns
+	};
 }