sard 1.0.0 → 1.0.2

package/components/cascader/useCascaderTree.js

@@ -0,0 +1,156 @@
+import { isNumber, isString } from "../../utils/is.js";
+import { setCheckedRecursively, walkAncestor, walkNodes } from "../../utils/tree.js";
+import { cascaderOptionsContextKey } from "./common.js";
+import { computed, inject, reactive, ref, shallowRef, watch } from "vue";
+//#region packages/sard/components/cascader/useCascaderTree.ts
+function useCascaderTree(props, config) {
+	const { useOptionKeysReturn: { getValue, getLabel, getDisabled, getIsLeaf, getChildren }, innerValue } = config;
+	const options = computed(() => props.options || []);
+	const treeData = ref([]);
+	const originalTreeData = shallowRef([]);
+	const loadStatus = ref("loaded");
+	const toStateNodes = (options, parent) => {
+		return options.map((option) => {
+			const key = getValue(option);
+			const stateNode = reactive({
+				label: getLabel(option),
+				value: getValue(option),
+				key,
+				disabled: !!getDisabled(option),
+				parent,
+				isLeaf: !!getIsLeaf(option),
+				depth: parent ? parent.depth + 1 : 0,
+				indeterminate: false,
+				checked: false,
+				selected: false,
+				loadStatus: "idle",
+				option
+			});
+			const children = getChildren(option);
+			if (children) stateNode.children = toStateNodes(children, stateNode);
+			treeMap.value[key] = stateNode;
+			return stateNode;
+		});
+	};
+	const isLeaf = (node) => {
+		return node.isLeaf || !Array.isArray(node.children);
+	};
+	const clearSelected = () => {
+		walkNodes(treeData.value, (node) => {
+			node.selected = false;
+		});
+	};
+	const setAncestorSelected = (node) => {
+		walkAncestor(node, (node) => {
+			node.selected = true;
+		});
+	};
+	const setSelectedByNode = (node) => {
+		clearSelected();
+		setAncestorSelected(node);
+	};
+	const clearChecked = () => {
+		walkNodes(treeData.value, (node) => {
+			node.checked = false;
+			node.indeterminate = false;
+		});
+	};
+	const setCheckedByNode = (node, checked) => {
+		setCheckedRecursively(node, checked, props.checkStrictly);
+	};
+	const getCheckedLeaves = () => {
+		const nodes = [];
+		walkNodes(treeData.value, (node) => {
+			if (node.checked && isLeaf(node)) nodes.push(node);
+		});
+		return nodes;
+	};
+	const getCheckedNodes = () => {
+		const nodes = [];
+		walkNodes(treeData.value, (node) => {
+			if (node.checked) nodes.push(node);
+		});
+		return nodes;
+	};
+	const getAncestors = (node) => {
+		const nodes = [];
+		walkAncestor(node, (node) => {
+			nodes.unshift(node);
+		});
+		return nodes;
+	};
+	const updateChecked = (value) => {
+		clearSelected();
+		if (props.multiple) {
+			clearChecked();
+			if (Array.isArray(value)) {
+				let lastNode;
+				const maySetChecked = (value) => {
+					if (isString(value) || isNumber(value)) {
+						const node = treeMap.value[value];
+						if (node) {
+							lastNode = node;
+							setCheckedByNode(node, true);
+						}
+					}
+				};
+				if (props.allLevels) value.forEach((item) => {
+					if (Array.isArray(item)) maySetChecked(item[item.length - 1]);
+				});
+				else value.forEach(maySetChecked);
+				if (lastNode) setAncestorSelected(lastNode);
+			}
+		} else {
+			const maySetSelected = (value) => {
+				if (isString(value) || isNumber(value)) {
+					const node = treeMap.value[value];
+					if (node) setAncestorSelected(node);
+				}
+			};
+			if (props.allLevels) {
+				if (Array.isArray(value)) maySetSelected(value[value.length - 1]);
+			} else maySetSelected(value);
+		}
+	};
+	const initialize = async () => {
+		if (props.lazy && props.load) try {
+			loadStatus.value = "loading";
+			const data = await props.load();
+			loadStatus.value = "loaded";
+			initializeTree(data);
+		} catch {
+			loadStatus.value = "error";
+		}
+		else initializeTree(options.value);
+	};
+	const treeMap = shallowRef({});
+	const initializeTree = (data) => {
+		treeMap.value = {};
+		treeData.value = toStateNodes(data, null);
+		updateChecked(innerValue.value);
+		originalTreeData.value = data;
+	};
+	watch(options, () => {
+		initializeTree(options.value);
+	});
+	const optionsContext = inject(cascaderOptionsContextKey, null);
+	watch(originalTreeData, () => {
+		if (optionsContext) optionsContext.set(originalTreeData.value);
+	});
+	return {
+		treeData,
+		originalTreeData,
+		loadStatus,
+		toStateNodes,
+		setSelectedByNode,
+		updateChecked,
+		setCheckedByNode,
+		isLeaf,
+		getCheckedLeaves,
+		getCheckedNodes,
+		getAncestors,
+		initialize
+	};
+}
+//#endregion
+export { useCascaderTree };

package/components/cascader-input/cascader-input.d.ts

@@ -0,0 +1,69 @@
+import { type CascaderOption, type CascaderValue } from '../cascader/common';
+import { type CascaderInputProps, type CascaderInputSlots } from './common';
+type __VLS_Slots = CascaderInputSlots;
+declare const __VLS_base: import("vue").DefineComponent<CascaderInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    select: (option: CascaderOption, tabIndex: number) => any;
+    change: (value: any, selectedOptions: CascaderOption[]) => any;
+    "before-enter": (el: Element) => any;
+    enter: (el: Element) => any;
+    "after-enter": (el: Element) => any;
+    "enter-cancelled": (el: Element) => any;
+    "before-leave": (el: Element) => any;
+    leave: (el: Element) => any;
+    "after-leave": (el: Element) => any;
+    "leave-cancelled": (el: Element) => any;
+    "visible-hook": (name: import("../index.ts").MotionHookName, el: Element) => any;
+    "update:visible": (visible: boolean) => any;
+    "update:modelValue": (value: any, selectedOptions: CascaderOption[]) => any;
+    confirm: () => any;
+}, string, import("vue").PublicProps, Readonly<CascaderInputProps> & Readonly<{
+    onSelect?: ((option: CascaderOption, tabIndex: number) => any) | undefined;
+    onChange?: ((value: any, selectedOptions: CascaderOption[]) => any) | undefined;
+    "onBefore-enter"?: ((el: Element) => any) | undefined;
+    onEnter?: ((el: Element) => any) | undefined;
+    "onAfter-enter"?: ((el: Element) => any) | undefined;
+    "onEnter-cancelled"?: ((el: Element) => any) | undefined;
+    "onBefore-leave"?: ((el: Element) => any) | undefined;
+    onLeave?: ((el: Element) => any) | undefined;
+    "onAfter-leave"?: ((el: Element) => any) | undefined;
+    "onLeave-cancelled"?: ((el: Element) => any) | undefined;
+    "onVisible-hook"?: ((name: import("../index.ts").MotionHookName, el: Element) => any) | undefined;
+    "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: any, selectedOptions: CascaderOption[]) => any) | undefined;
+    onConfirm?: (() => any) | undefined;
+}>, {
+    title: string;
+    multiple: boolean;
+    options: CascaderOption[];
+    readonly: boolean;
+    load: (node?: import("../index.ts").CascaderStateNode) => Promise<CascaderOption[]> | CascaderOption[];
+    visible: boolean;
+    lazy: boolean;
+    loading: boolean;
+    disabled: boolean;
+    modelValue: CascaderValue;
+    showConfirm: boolean;
+    optionKeys: import("../../use").OptionKeys;
+    placeholder: string;
+    clearable: boolean;
+    validateEvent: boolean;
+    multiline: boolean;
+    inputProps: import("../index.ts").InputProps;
+    valueOnClear: () => any;
+    resettable: boolean;
+    fieldKeys: import("../../use").OptionKeys;
+    hintText: string;
+    labelRender: (option: CascaderOption) => string;
+    changeOnSelect: boolean;
+    allLevels: boolean;
+    checkStrictly: boolean;
+    maxRows: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/cascader-input/cascader-input.js

@@ -0,0 +1,243 @@
+import { isEmptyArray, isNullish } from "../../utils/is.js";
+import { isEmptyBinding } from "../../utils/utils.js";
+import { useOptionKeys } from "../../use/useOptionKeys.js";
+import popout_input_default from "../popout-input/popout-input.js";
+import { partitionPopoutInputProps, usePopoutInput } from "../popout-input/usePopoutInput.js";
+import { cascaderOptionsContextKey, getSelectedOptionsByValue } from "../cascader/common.js";
+import cascader_popout_default from "../cascader-popout/cascader-popout.js";
+import { defaultCascaderInputProps } from "./common.js";
+import { computed, createBlock, createSlots, createVNode, defineComponent, isRef, mergeDefaults, mergeProps, openBlock, provide, renderSlot, shallowRef, unref, useSlots, watch, withCtx } from "vue";
+//#region packages/sard/components/cascader-input/cascader-input.vue
+var cascader_input_default = /*@__PURE__*/ defineComponent({
+	__name: "cascader-input",
+	props: /*@__PURE__*/ mergeDefaults({
+		maxRows: {
+			type: Number,
+			required: false
+		},
+		visible: {
+			type: Boolean,
+			required: false
+		},
+		title: {
+			type: String,
+			required: false
+		},
+		resettable: {
+			type: Boolean,
+			required: false
+		},
+		validateEvent: {
+			type: Boolean,
+			required: false
+		},
+		showConfirm: {
+			type: Boolean,
+			required: false
+		},
+		modelValue: {
+			type: [
+				String,
+				Number,
+				Array
+			],
+			required: false
+		},
+		options: {
+			type: Array,
+			required: false
+		},
+		fieldKeys: {
+			type: Object,
+			required: false
+		},
+		optionKeys: {
+			type: Object,
+			required: false
+		},
+		hintText: {
+			type: String,
+			required: false
+		},
+		labelRender: {
+			type: Function,
+			required: false
+		},
+		changeOnSelect: {
+			type: Boolean,
+			required: false
+		},
+		allLevels: {
+			type: Boolean,
+			required: false
+		},
+		multiple: {
+			type: Boolean,
+			required: false
+		},
+		checkStrictly: {
+			type: Boolean,
+			required: false
+		},
+		lazy: {
+			type: Boolean,
+			required: false
+		},
+		load: {
+			type: Function,
+			required: false
+		},
+		placeholder: {
+			type: String,
+			required: false
+		},
+		readonly: {
+			type: Boolean,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		clearable: {
+			type: Boolean,
+			required: false
+		},
+		loading: {
+			type: Boolean,
+			required: false
+		},
+		multiline: {
+			type: Boolean,
+			required: false
+		},
+		inputProps: {
+			type: Object,
+			required: false
+		},
+		valueOnClear: {
+			type: Function,
+			required: false
+		}
+	}, defaultCascaderInputProps),
+	emits: [
+		"update:visible",
+		"update:modelValue",
+		"change",
+		"select",
+		"confirm",
+		"before-enter",
+		"enter",
+		"after-enter",
+		"enter-cancelled",
+		"before-leave",
+		"leave",
+		"after-leave",
+		"leave-cancelled",
+		"visible-hook"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const slots = useSlots();
+		const emit = __emit;
+		const useOptionKeysReturn = useOptionKeys(props);
+		const partitionedProps = partitionPopoutInputProps(props);
+		const { innerVisible, innerValue, inputValue, show, onChange, onClear, onVisibleHook } = usePopoutInput(props, emit, { onClear(value) {
+			emit("update:modelValue", value, []);
+			emit("change", value, []);
+		} });
+		const { getLabel } = useOptionKeysReturn;
+		const lazyOptions = shallowRef([]);
+		provide(cascaderOptionsContextKey, { set(options) {
+			lazyOptions.value = options;
+		} });
+		const renderedOptions = computed(() => {
+			return props.lazy && !!props.load ? lazyOptions.value : props.options;
+		});
+		function getOutletText(options, value) {
+			const selectedOptions = getSelectedOptionsByValue(options, value, useOptionKeysReturn, props.multiple);
+			if (!selectedOptions || selectedOptions.length === 0) return getValueDisplay(value);
+			const labels = selectedOptions.map((option) => {
+				return Array.isArray(option) ? option.map((item) => getLabel(item)) : getLabel(option);
+			});
+			return props.multiple ? labels.map((item) => item.join("/")) : labels.join("/");
+		}
+		function getValueDisplay(value) {
+			if (Array.isArray(value)) return value.map((item) => Array.isArray(item) ? item.join("/") : item);
+			return isNullish(value) ? "" : String(value);
+		}
+		function getInputValue(options) {
+			if (isEmptyBinding(innerValue.value) || isEmptyArray(innerValue.value)) return "";
+			if (!options || isEmptyArray(options)) return getValueDisplay(innerValue.value);
+			return getOutletText(options, innerValue.value);
+		}
+		function getMayMultilineText(value) {
+			if (Array.isArray(value)) {
+				const maxRows = props.maxRows === -1 ? Number.MAX_SAFE_INTEGER : props.maxRows;
+				const diff = value.length - maxRows;
+				const rows = value.slice(0, maxRows);
+				if (diff > 0) rows.push(`+${diff}`);
+				return rows.join("\n");
+			}
+			return value;
+		}
+		watch([innerValue, renderedOptions], () => {
+			inputValue.value = getMayMultilineText(getInputValue(renderedOptions.value));
+		}, { immediate: true });
+		const onConfirm = () => {
+			emit("confirm");
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(popout_input_default, mergeProps(unref(partitionedProps)[0], {
+				modelValue: unref(inputValue),
+				"onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => isRef(inputValue) ? inputValue.value = $event : null),
+				multiline: __props.multiple,
+				onClear: unref(onClear),
+				onClick: unref(show)
+			}), createSlots({
+				default: withCtx(() => [createVNode(cascader_popout_default, mergeProps(unref(partitionedProps)[1], {
+					visible: unref(innerVisible),
+					"onUpdate:visible": _cache[0] || (_cache[0] = ($event) => isRef(innerVisible) ? innerVisible.value = $event : null),
+					modelValue: unref(innerValue),
+					"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isRef(innerValue) ? innerValue.value = $event : null),
+					onChange: unref(onChange),
+					onVisibleHook: unref(onVisibleHook),
+					onConfirm,
+					onSelect: _cache[2] || (_cache[2] = (option, tabIndex) => _ctx.$emit("select", option, tabIndex))
+				}), {
+					top: withCtx(({ tabIndex }) => [renderSlot(_ctx.$slots, "top", { tabIndex })]),
+					_: 3
+				}, 16, [
+					"visible",
+					"modelValue",
+					"onChange",
+					"onVisibleHook"
+				])]),
+				_: 2
+			}, [
+				slots.prepend ? {
+					name: "prepend",
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "prepend")]),
+					key: "0"
+				} : void 0,
+				slots.append ? {
+					name: "append",
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "append")]),
+					key: "1"
+				} : void 0,
+				slots.arrow ? {
+					name: "arrow",
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "arrow")]),
+					key: "2"
+				} : void 0
+			]), 1040, [
+				"modelValue",
+				"multiline",
+				"onClear",
+				"onClick"
+			]);
+		};
+	}
+});
+//#endregion
+export { cascader_input_default as default };

package/components/cascader-input/common.d.ts

@@ -0,0 +1,11 @@
+import { type PopoutInputSlots, type PopoutInputProps } from '../popout-input/common';
+import { type DefaultProps } from '../config';
+import { type CascaderPopoutProps, type CascaderPopoutEmits, type CascaderPopoutSlots } from '../cascader-popout/common';
+export interface CascaderInputProps extends CascaderPopoutProps, Omit<PopoutInputProps, 'modelValue'> {
+    maxRows?: number;
+}
+export declare const defaultCascaderInputProps: DefaultProps<CascaderInputProps>;
+export interface CascaderInputSlots extends CascaderPopoutSlots, PopoutInputSlots {
+}
+export interface CascaderInputEmits extends CascaderPopoutEmits {
+}

package/components/cascader-input/common.js

@@ -0,0 +1,8 @@
+//#region packages/sard/components/cascader-input/common.ts
+const defaultCascaderInputProps = {
+	showConfirm: true,
+	validateEvent: true,
+	maxRows: 3
+};
+//#endregion
+export { defaultCascaderInputProps };

package/components/cascader-input/index.d.ts

@@ -0,0 +1,5 @@
+import { type EnhancedComponent } from '../../utils';
+import _CascaderInput from './cascader-input.vue';
+export declare const CascaderInput: EnhancedComponent<typeof _CascaderInput>;
+export default CascaderInput;
+export type { CascaderInputProps, CascaderInputSlots, CascaderInputEmits } from './common';

package/components/cascader-input/index.js

@@ -0,0 +1,6 @@
+import { enhanceComponent } from "../../utils/component.js";
+import cascader_input_default from "./cascader-input.js";
+//#region packages/sard/components/cascader-input/index.ts
+const CascaderInput = enhanceComponent(cascader_input_default);
+//#endregion
+export { CascaderInput, CascaderInput as default };

package/components/cascader-popout/cascader-popout.d.ts

@@ -0,0 +1,59 @@
+import { type CascaderPopoutProps, type CascaderPopoutSlots } from './common';
+type __VLS_Slots = CascaderPopoutSlots;
+declare const __VLS_base: import("vue").DefineComponent<CascaderPopoutProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    select: (option: import("../index.ts").CascaderOption, tabIndex: number) => any;
+    change: (value: any, selectedOptions: import("../index.ts").CascaderOption[]) => any;
+    "before-enter": (el: Element) => any;
+    enter: (el: Element) => any;
+    "after-enter": (el: Element) => any;
+    "enter-cancelled": (el: Element) => any;
+    "before-leave": (el: Element) => any;
+    leave: (el: Element) => any;
+    "after-leave": (el: Element) => any;
+    "leave-cancelled": (el: Element) => any;
+    "visible-hook": (name: import("../index.ts").MotionHookName, el: Element) => any;
+    "update:visible": (visible: boolean) => any;
+    "update:modelValue": (value: any, selectedOptions: import("../index.ts").CascaderOption[]) => any;
+    confirm: () => any;
+}, string, import("vue").PublicProps, Readonly<CascaderPopoutProps> & Readonly<{
+    onSelect?: ((option: import("../index.ts").CascaderOption, tabIndex: number) => any) | undefined;
+    onChange?: ((value: any, selectedOptions: import("../index.ts").CascaderOption[]) => any) | undefined;
+    "onBefore-enter"?: ((el: Element) => any) | undefined;
+    onEnter?: ((el: Element) => any) | undefined;
+    "onAfter-enter"?: ((el: Element) => any) | undefined;
+    "onEnter-cancelled"?: ((el: Element) => any) | undefined;
+    "onBefore-leave"?: ((el: Element) => any) | undefined;
+    onLeave?: ((el: Element) => any) | undefined;
+    "onAfter-leave"?: ((el: Element) => any) | undefined;
+    "onLeave-cancelled"?: ((el: Element) => any) | undefined;
+    "onVisible-hook"?: ((name: import("../index.ts").MotionHookName, el: Element) => any) | undefined;
+    "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: any, selectedOptions: import("../index.ts").CascaderOption[]) => any) | undefined;
+    onConfirm?: (() => any) | undefined;
+}>, {
+    title: string;
+    multiple: boolean;
+    options: import("../index.ts").CascaderOption[];
+    load: (node?: import("../index.ts").CascaderStateNode) => Promise<import("../index.ts").CascaderOption[]> | import("../index.ts").CascaderOption[];
+    visible: boolean;
+    lazy: boolean;
+    modelValue: import("../index.ts").CascaderValue;
+    showConfirm: boolean;
+    optionKeys: import("../../index.ts").OptionKeys;
+    validateEvent: boolean;
+    resettable: boolean;
+    fieldKeys: import("../../index.ts").OptionKeys;
+    hintText: string;
+    labelRender: (option: import("../index.ts").CascaderOption) => string;
+    changeOnSelect: boolean;
+    allLevels: boolean;
+    checkStrictly: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};