sard 1.0.0 → 1.0.2

package/components/card/card.js

@@ -0,0 +1,103 @@
+import { createBem } from "../../utils/bem.js";
+import { isVisibleEmpty } from "../../utils/utils.js";
+import collapse_default from "../collapse/collapse.js";
+import button_default from "../button/button.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, renderSlot, toDisplayString, unref, useModel, useSlots, withCtx } from "vue";
+import { Down, Up } from "@sard/icons";
+//#region packages/sard/components/card/card.vue
+var card_default = /*@__PURE__*/ defineComponent({
+	__name: "card",
+	props: {
+		title: {
+			type: String,
+			required: false
+		},
+		extra: {
+			type: String,
+			required: false
+		},
+		footer: {
+			type: String,
+			required: false
+		},
+		hover: {
+			type: Boolean,
+			required: false
+		},
+		hideHeaderBorder: {
+			type: Boolean,
+			required: false
+		},
+		hideFooterBorder: {
+			type: Boolean,
+			required: false
+		},
+		collapsible: {
+			type: Boolean,
+			required: false
+		},
+		collapsed: {
+			type: Boolean,
+			required: false
+		}
+	},
+	emits: ["click", "update:collapsed"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const slots = useSlots();
+		const emit = __emit;
+		const bem = createBem("card");
+		const headless = computed(() => {
+			return isVisibleEmpty(props.title) && !slots.title && isVisibleEmpty(props.extra) && !slots.extra;
+		});
+		const footless = computed(() => {
+			return isVisibleEmpty(props.footer) && !slots.footer;
+		});
+		const onClick = (event) => {
+			emit("click", event);
+		};
+		const innerCollapsed = useModel(props, "collapsed");
+		const isCollapsed = computed(() => props.collapsible && innerCollapsed.value);
+		const cardClass = computed(() => {
+			return [
+				bem.b(),
+				bem.m("hover", props.hover),
+				bem.m("headless", headless.value),
+				bem.m("footless", footless.value),
+				bem.m("head-borderless", props.hideHeaderBorder),
+				bem.m("foot-borderless", props.hideFooterBorder),
+				bem.m("collapsed", isCollapsed.value),
+				bem.has("icon", slots.icon)
+			];
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(cardClass.value),
+				onClick
+			}, [slots.icon ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: normalizeClass(unref(bem).e("icon"))
+			}, [renderSlot(_ctx.$slots, "icon")], 2)) : createCommentVNode("v-if", true), createElementVNode("div", { class: normalizeClass(unref(bem).e("content")) }, [!headless.value ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: normalizeClass(unref(bem).e("header"))
+			}, [createElementVNode("div", { class: normalizeClass(unref(bem).e("title")) }, [renderSlot(_ctx.$slots, "title", {}, () => [createTextVNode(toDisplayString(__props.title), 1)])], 2), createElementVNode("div", { class: normalizeClass(unref(bem).e("extra")) }, [renderSlot(_ctx.$slots, "extra", {}, () => [createTextVNode(toDisplayString(__props.extra), 1)]), __props.collapsible ? (openBlock(), createBlock(button_default, {
+				key: 0,
+				variant: "link",
+				"auto-height": "",
+				color: "secondary",
+				onClick: _cache[0] || (_cache[0] = ($event) => innerCollapsed.value = !unref(innerCollapsed))
+			}, {
+				icon: withCtx(() => [renderSlot(_ctx.$slots, "arrow", { collapsed: unref(innerCollapsed) }, () => [unref(innerCollapsed) ? (openBlock(), createBlock(unref(Down), { key: 0 })) : (openBlock(), createBlock(unref(Up), { key: 1 }))])]),
+				_: 3
+			})) : createCommentVNode("v-if", true)], 2)], 2)) : createCommentVNode("v-if", true), createVNode(collapse_default, { visible: !isCollapsed.value }, {
+				default: withCtx(() => [createElementVNode("div", { class: normalizeClass(unref(bem).e("body")) }, [renderSlot(_ctx.$slots, "default")], 2), !footless.value ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(unref(bem).e("footer"))
+				}, [renderSlot(_ctx.$slots, "footer", {}, () => [createTextVNode(toDisplayString(__props.footer), 1)])], 2)) : createCommentVNode("v-if", true)]),
+				_: 3
+			}, 8, ["visible"])], 2)], 2);
+		};
+	}
+});
+//#endregion
+export { card_default as default };

package/components/card/common.d.ts

@@ -0,0 +1,26 @@
+import { type DefaultProps } from '../config';
+export interface CardProps {
+    title?: string;
+    extra?: string;
+    footer?: string;
+    hover?: boolean;
+    hideHeaderBorder?: boolean;
+    hideFooterBorder?: boolean;
+    collapsible?: boolean;
+    collapsed?: boolean;
+}
+export declare const defaultCardProps: DefaultProps<CardProps>;
+export interface CardSlots {
+    default?(props: Record<string, never>): any;
+    icon?(props: Record<string, never>): any;
+    title?(props: Record<string, never>): any;
+    extra?(props: Record<string, never>): any;
+    arrow?(props: {
+        collapsed: boolean;
+    }): any;
+    footer?(props: Record<string, never>): any;
+}
+export interface CardEmits {
+    (e: 'click', event: MouseEvent): void;
+    (e: 'update:collapsed', collapsed: boolean): void;
+}

package/components/card/common.js

@@ -0,0 +1,4 @@
+//#region packages/sard/components/card/common.ts
+const defaultCardProps = {};
+//#endregion
+export { defaultCardProps };

package/components/card/index.css

@@ -0,0 +1 @@
+:root{--s-card-border-radius:var(--s-border-radius-lg);--s-card-bg:var(--s-bg-color-container);--s-card-bg-active:var(--s-bg-color-active);--s-card-icon-padding-y:var(--s-size-sm);--s-card-icon-padding-x:var(--s-size);--s-card-header-padding-y:var(--s-size-sm);--s-card-header-padding-x:var(--s-size);--s-card-title-font-size:var(--s-font-size-lg);--s-card-body-padding-y:var(--s-size-sm);--s-card-body-padding-x:var(--s-size);--s-card-footer-padding-y:var(--s-size-sm);--s-card-footer-padding-x:var(--s-size);--s-card-border-color:var(--s-border-color);--s-card-border-style:var(--s-border-style);--s-card-border-width:var(--s-border-width);--s-card-border-left:0px;--s-card-border-right:0px;--s-card-header-border-color:var(--s-card-border-color);--s-card-header-border-style:var(--s-card-border-style);--s-card-header-border-width:var(--s-card-border-width);--s-card-footer-border-color:var(--s-card-border-color);--s-card-footer-border-style:var(--s-card-border-style);--s-card-footer-border-width:var(--s-card-border-width)}.s-card{display:flex;background:var(--s-card-bg);border-radius:var(--s-card-border-radius)}.s-card--hover{cursor:pointer}.s-card--hover:active{background:var(--s-card-bg-active)}.s-card__icon{flex:none;padding:var(--s-card-icon-padding-y) var(--s-card-icon-padding-x)}.s-card__content{flex:1;min-width:0}.s-card__header{position:relative;display:flex;justify-content:space-between;align-items:center;padding:var(--s-card-header-padding-y) var(--s-card-header-padding-x)}.s-card__header::after{position:absolute;z-index:1;pointer-events:none;touch-action:none;opacity:1;content:"";left:0;right:0;transform:scaleY(0.5);bottom:0;border-bottom:var(--s-card-header-border-width, var(--s-card-border-width)) var(--s-card-header-border-style, var(--s-card-border-style)) var(--s-card-header-border-color, var(--s-card-border-color));transform-origin:bottom center;inset-inline-start:var(--s-card-border-left);inset-inline-end:var(--s-card-border-right)}.s-card__title{font-size:var(--s-card-title-font-size);line-height:var(--s-line-height-snug);flex:1;min-width:0}.s-card__extra{display:flex;align-items:center}.s-card__body{padding:var(--s-card-body-padding-y) var(--s-card-body-padding-x)}.s-card__footer{position:relative;padding:var(--s-card-footer-padding-y) var(--s-card-footer-padding-x)}.s-card__footer::before{position:absolute;z-index:1;pointer-events:none;touch-action:none;opacity:1;content:"";left:0;right:0;transform:scaleY(0.5);top:0;border-top:var(--s-card-footer-border-width, var(--s-card-border-width)) var(--s-card-footer-border-style, var(--s-card-border-style)) var(--s-card-footer-border-color, var(--s-card-border-color));transform-origin:top center;inset-inline-start:var(--s-card-border-left);inset-inline-end:var(--s-card-border-right)}.s-card--head-borderless .s-card__header::after,.s-card--collapsed .s-card__header::after{display:none}.s-card--foot-borderless .s-card__footer::before{display:none}.s-card:is(.has-icon) .s-card__header,.s-card:is(.has-icon) .s-card__body,.s-card:is(.has-icon) .s-card__footer{padding-inline-start:0}.s-card:is(.has-icon){--s-card-border-right:var(--s-card-header-padding-x)}

package/components/card/index.d.ts

@@ -0,0 +1,5 @@
+import { type EnhancedComponent } from '../../utils';
+import _Card from './card.vue';
+export declare const Card: EnhancedComponent<typeof _Card>;
+export default Card;
+export type { CardProps, CardEmits, CardSlots } from './common';

package/components/card/index.js

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

package/components/cascader/cascader.d.ts

@@ -0,0 +1,32 @@
+import { type CascaderProps, type CascaderSlots, type CascaderStateNode } from './common';
+type __VLS_Slots = CascaderSlots;
+declare const __VLS_base: import("vue").DefineComponent<CascaderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    select: (option: any, tabIndex: number) => any;
+    change: (value: import("./common").CascaderValue, selectedOptions: any[]) => any;
+    "update:modelValue": (value: import("./common").CascaderValue, selectedOptions: any[]) => any;
+}, string, import("vue").PublicProps, Readonly<CascaderProps> & Readonly<{
+    onSelect?: ((option: any, tabIndex: number) => any) | undefined;
+    onChange?: ((value: import("./common").CascaderValue, selectedOptions: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: import("./common").CascaderValue, selectedOptions: any[]) => any) | undefined;
+}>, {
+    multiple: boolean;
+    options: import("./common").CascaderOption[];
+    load: (node?: CascaderStateNode) => Promise<import("./common").CascaderOption[]> | import("./common").CascaderOption[];
+    lazy: boolean;
+    modelValue: import("./common").CascaderValue;
+    optionKeys: import("../../use").OptionKeys;
+    fieldKeys: import("../../use").OptionKeys;
+    hintText: string;
+    labelRender: (option: import("./common").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;
+    };
+};

package/components/cascader/cascader.js

@@ -0,0 +1,218 @@
+import { createBem } from "../../utils/bem.js";
+import { useOptionKeys } from "../../use/useOptionKeys.js";
+import loading_default from "../loading/loading.js";
+import { useTranslateWithPrefix } from "../../locale/index.js";
+import tabs_default from "../tabs/tabs.js";
+import checkbox_default from "../checkbox/checkbox.js";
+import { defaultCascaderProps } from "./common.js";
+import { useCascaderTree } from "./useCascaderTree.js";
+import { useCascaderTabs } from "./useCascaderTabs.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, isRef, mergeDefaults, normalizeClass, normalizeStyle, openBlock, ref, renderList, renderSlot, toDisplayString, unref, watch, withModifiers } from "vue";
+import { Success } from "@sard/icons";
+//#region packages/sard/components/cascader/cascader.vue
+const _hoisted_1 = ["onClick"];
+const _hoisted_2 = ["onClick"];
+var cascader_default = /*@__PURE__*/ defineComponent({
+	__name: "cascader",
+	props: /*@__PURE__*/ mergeDefaults({
+		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
+		}
+	}, defaultCascaderProps),
+	emits: [
+		"update:modelValue",
+		"change",
+		"select"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const bem = createBem("cascader");
+		const { t } = useTranslateWithPrefix("cascader");
+		const useOptionKeysReturn = useOptionKeys(props);
+		const innerValue = ref();
+		const { treeData, originalTreeData, loadStatus, toStateNodes, setSelectedByNode, updateChecked, setCheckedByNode, isLeaf, getCheckedLeaves, getCheckedNodes, getAncestors, initialize } = useCascaderTree(props, {
+			innerValue,
+			useOptionKeysReturn
+		});
+		initialize();
+		const { panels, currentTab, tabsOptions } = useCascaderTabs(props, { treeData });
+		const triggerMultipleChange = () => {
+			const nodes = props.checkStrictly ? getCheckedNodes() : getCheckedLeaves();
+			const nextValue = props.allLevels ? nodes.map((node) => getAncestors(node).map((node) => node.value)) : nodes.map((node) => node.value);
+			innerValue.value = nextValue;
+			const options = nodes.map((node) => getAncestors(node).map((node) => node.option));
+			emit("update:modelValue", nextValue, options);
+			emit("change", nextValue, options);
+		};
+		const triggerSingleChange = (node) => {
+			const nextValue = props.allLevels ? panels.value.map((panel) => panel.selected).filter(Boolean).map((node) => node.value) : node.value;
+			innerValue.value = nextValue;
+			const options = panels.value.map((panel) => panel.selected).filter(Boolean).map((node) => node.option);
+			emit("update:modelValue", nextValue, options);
+			emit("change", nextValue, options);
+		};
+		const onCheckClick = (node) => {
+			if (node.disabled) return;
+			setCheckedByNode(node, !node.checked);
+			triggerMultipleChange();
+		};
+		const onNodeClick = async (node, panelIndex) => {
+			if (node.disabled) return;
+			if (node.loadStatus === "loading") return;
+			if (props.lazy && props.load && !node.isLeaf && node.loadStatus === "idle") try {
+				node.loadStatus = "loading";
+				const treeNodes = await props.load(node) || [];
+				node.loadStatus = "loaded";
+				node.children = toStateNodes(treeNodes, node);
+				updateChecked(innerValue.value);
+				node.option.children = treeNodes;
+				originalTreeData.value = [...originalTreeData.value];
+				if (node.children.length === 0) node.isLeaf = true;
+				else if (node.checked) setCheckedByNode(node, true);
+			} catch {
+				node.loadStatus = "idle";
+				return;
+			}
+			setSelectedByNode(node);
+			const isLast = isLeaf(node);
+			if (!isLast) currentTab.value = panels.value.length - 1;
+			if (!isLast && node.children && node.children.length === 0) node.loadStatus = "loading";
+			emit("select", node.option, panelIndex);
+			if (props.multiple) {
+				if (isLast) {
+					setCheckedByNode(node, !node.checked);
+					triggerMultipleChange();
+				}
+			} else if (isLast || props.changeOnSelect) triggerSingleChange(node);
+		};
+		watch(() => props.modelValue, (value) => {
+			if (value === innerValue.value) return;
+			innerValue.value = value;
+			updateChecked(value);
+			currentTab.value = panels.value.length - 1;
+		}, { immediate: true });
+		const wrapperStyle = computed(() => {
+			return { "--x": `${-Number(currentTab.value) * 100}%` };
+		});
+		const statusWrapperClass = computed(() => {
+			return [bem.e("status-wrapper"), bem.em("status-wrapper", "show", loadStatus.value !== "loaded" || treeData.value.length === 0)];
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(bem).b()) }, [
+				createVNode(tabs_default, {
+					modelValue: unref(currentTab),
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(currentTab) ? currentTab.value = $event : null),
+					options: unref(tabsOptions),
+					scrollable: ""
+				}, null, 8, ["modelValue", "options"]),
+				renderSlot(_ctx.$slots, "top", { tabIndex: unref(currentTab) }),
+				createElementVNode("div", { class: normalizeClass(unref(bem).e("container")) }, [createElementVNode("div", {
+					class: normalizeClass(unref(bem).e("wrapper")),
+					style: normalizeStyle(wrapperStyle.value)
+				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(panels), (panel, panelIndex) => {
+					return openBlock(), createElementBlock("div", {
+						key: panelIndex,
+						class: normalizeClass(unref(bem).e("pane"))
+					}, [createElementVNode("div", { class: normalizeClass(unref(bem).e("options")) }, [(openBlock(true), createElementBlock(Fragment, null, renderList(panel.nodes, (node, optionIndex) => {
+						return openBlock(), createElementBlock("div", {
+							key: optionIndex,
+							class: normalizeClass([
+								unref(bem).e("option"),
+								unref(bem).is("selected", node.selected),
+								unref(bem).is("disabled", node.disabled)
+							]),
+							onClick: ($event) => onNodeClick(node, panelIndex)
+						}, [
+							__props.multiple ? (openBlock(), createElementBlock("div", {
+								key: 0,
+								class: normalizeClass(unref(bem).e("selection")),
+								onClick: withModifiers(($event) => onCheckClick(node), ["stop"])
+							}, [createVNode(checkbox_default, {
+								readonly: "",
+								checked: node.checked,
+								indeterminate: node.indeterminate,
+								disabled: node.disabled
+							}, null, 8, [
+								"checked",
+								"indeterminate",
+								"disabled"
+							])], 10, _hoisted_2)) : createCommentVNode("v-if", true),
+							createElementVNode("div", { class: normalizeClass([unref(bem).e("option-loading"), unref(bem).is("show", node.loadStatus === "loading")]) }, [createVNode(loading_default)], 2),
+							createElementVNode("div", { class: normalizeClass(unref(bem).e("option-label")) }, toDisplayString(node.label), 3),
+							!__props.multiple ? (openBlock(), createElementBlock("div", {
+								key: 1,
+								class: normalizeClass(unref(bem).e("option-icon"))
+							}, [createVNode(unref(Success))], 2)) : createCommentVNode("v-if", true)
+						], 10, _hoisted_1);
+					}), 128))], 2)], 2);
+				}), 128))], 6), __props.lazy && !!__props.load ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(statusWrapperClass.value)
+				}, [createElementVNode("div", { class: normalizeClass(unref(bem).e("status")) }, [unref(loadStatus) === "loading" ? (openBlock(), createBlock(loading_default, {
+					key: 0,
+					class: normalizeClass(unref(bem).e("loading"))
+				}, null, 8, ["class"])) : unref(loadStatus) === "error" ? (openBlock(), createElementBlock("span", {
+					key: 1,
+					class: normalizeClass(unref(bem).e("error")),
+					onClick: _cache[1] || (_cache[1] = (...args) => unref(initialize) && unref(initialize)(...args))
+				}, toDisplayString(unref(t)("error")), 3)) : unref(loadStatus) === "loaded" && unref(treeData).length === 0 ? (openBlock(), createElementBlock("span", {
+					key: 2,
+					class: normalizeClass(unref(bem).e("empty")),
+					onClick: _cache[2] || (_cache[2] = (...args) => unref(initialize) && unref(initialize)(...args))
+				}, toDisplayString(unref(t)("noData")), 3)) : createCommentVNode("v-if", true)], 2)], 2)) : createCommentVNode("v-if", true)], 2)
+			], 2);
+		};
+	}
+});
+//#endregion
+export { cascader_default as default };

package/components/cascader/common.d.ts

@@ -0,0 +1,62 @@
+import { type OptionKeys, type UseOptionKeysReturn } from '../../use';
+import { type InjectionKey } from 'vue';
+import { type DefaultProps } from '../config';
+export interface CascaderOption {
+    label?: string;
+    value?: string | number;
+    disabled?: boolean;
+    children?: CascaderOption[];
+    isLeaf?: boolean;
+    [key: PropertyKey]: any;
+}
+export interface CascaderStateNode {
+    label: string;
+    value: string | number;
+    key: string | number;
+    disabled: boolean;
+    children?: CascaderStateNode[];
+    parent: CascaderStateNode | null;
+    isLeaf: boolean;
+    loadStatus: 'idle' | 'loading' | 'loaded';
+    depth: number;
+    indeterminate: boolean;
+    checked: boolean;
+    selected: boolean;
+    option: CascaderOption;
+}
+export type CascaderValue = string | number | (string | number)[] | (string | number)[][];
+export interface CascaderProps {
+    modelValue?: CascaderValue;
+    options?: CascaderOption[];
+    fieldKeys?: OptionKeys;
+    optionKeys?: OptionKeys;
+    hintText?: string;
+    labelRender?: (option: CascaderOption) => string;
+    changeOnSelect?: boolean;
+    allLevels?: boolean;
+    multiple?: boolean;
+    checkStrictly?: boolean;
+    lazy?: boolean;
+    load?: (node?: CascaderStateNode) => Promise<CascaderOption[]> | CascaderOption[];
+}
+export declare const defaultCascaderProps: DefaultProps<CascaderProps>;
+export interface CascaderSlots {
+    top?(props: {
+        tabIndex: number;
+    }): any;
+}
+export interface CascaderEmits {
+    (e: 'update:modelValue', value: CascaderValue, selectedOptions: any[]): void;
+    (e: 'change', value: CascaderValue, selectedOptions: any[]): void;
+    (e: 'select', option: any, tabIndex: number): void;
+}
+export interface CascaderPanel {
+    nodes: CascaderStateNode[];
+    selected: CascaderStateNode | null;
+}
+export declare function getSelectedOptionsByValue(options: CascaderOption[], value: CascaderValue, useOptionKeysReturn: UseOptionKeysReturn, multiple?: boolean): CascaderOption[] | CascaderOption[][] | undefined;
+interface CascaderOptionsContext {
+    set: (options: CascaderOption[]) => void;
+}
+export declare const cascaderOptionsContextKey: InjectionKey<CascaderOptionsContext>;
+export {};

package/components/cascader/common.js

@@ -0,0 +1,29 @@
+import { isNullish } from "../../utils/is.js";
+//#region packages/sard/components/cascader/common.ts
+const defaultCascaderProps = { options: () => [] };
+function getSelectedOptionsByValue(options, value, useOptionKeysReturn, multiple) {
+	const { getValue, getChildren } = useOptionKeysReturn;
+	if (multiple) {
+		if (Array.isArray(value)) return value.map((item) => getSelectedOptionsByValue(options, item, useOptionKeysReturn)).filter((item) => Array.isArray(item) ? item.length !== 0 : !isNullish(item));
+	} else if (Array.isArray(value)) {
+		const selectedOptions = [];
+		let list = options;
+		for (const item of value) {
+			const option = list.find((option) => getValue(option) === item);
+			if (!option) break;
+			selectedOptions.push(option);
+			list = getChildren(option);
+			if (!Array.isArray(list)) break;
+		}
+		return selectedOptions;
+	} else for (const option of options) {
+		if (Array.isArray(getChildren(option))) {
+			const selectedOptions = getSelectedOptionsByValue(getChildren(option), value, useOptionKeysReturn, multiple);
+			if (selectedOptions) return [option, ...selectedOptions];
+		}
+		if (getValue(option) === value) return [option];
+	}
+}
+const cascaderOptionsContextKey = Symbol("cascaderOptionsContext");
+//#endregion
+export { cascaderOptionsContextKey, defaultCascaderProps, getSelectedOptionsByValue };

package/components/cascader/index.css

@@ -0,0 +1 @@
+:root{--s-cascader-wrapper-duration:var(--s-duration);--s-cascader-options-height:320px;--s-cascader-option-min-height:var(--s-content-height-sm);--s-cascader-option-padding-y:var(--s-content-padding-y);--s-cascader-option-padding-x:var(--s-content-padding-x);--s-cascader-option-color-selected:var(--s-color-primary);--s-cascader-option-font-weight-selected:var(--s-font-weight-bold);--s-cascader-option-bg-active:var(--s-bg-color-active);--s-cascader-option-loading-margin-end:var(--s-size-xs);--s-cascader-option-loading-font-size:var(--s-font-size);--s-cascader-option-loading-color:var(--s-text-color-fourth);--s-cascader-option-label-font-size:var(--s-font-size);--s-cascader-option-label-line-height:var(--s-line-height-relaxed);--s-cascader-status-font-size:var(--s-font-size);--s-cascader-status-color:var(--s-text-color-fourth);--s-cascader-loading-font-size:var(--s-font-size-xl)}.s-cascader__container{overflow:hidden}.s-cascader__wrapper{display:flex;flex-wrap:nowrap;width:100%;transition:transform var(--s-cascader-wrapper-duration);transform:translate3d(var(--x), 0, 0)}:root[dir=rtl] .s-cascader__wrapper{transform:translate3d(calc(var(--x) * -1), 0, 0)}.s-cascader__pane{width:100%;flex:none}.s-cascader__options{width:100%;height:var(--s-cascader-options-height);overflow-x:hidden;overflow-y:auto}.s-cascader__option{display:flex;align-items:center;min-height:var(--s-cascader-option-min-height);padding:var(--s-cascader-option-padding-y) var(--s-cascader-option-padding-x);cursor:pointer}.s-cascader__option:is(.is-selected){color:var(--s-cascader-option-color-selected);font-weight:var(--s-cascader-option-font-weight-selected)}.s-cascader__option:not(.is-selected) .s-cascader__option-icon{display:none}.s-cascader__option:is(.is-disabled){color:var(--s-text-color-disabled);cursor:var(--s-cursor-disabled)}.s-cascader__option:not(.is-disabled):active{background:var(--s-cascader-option-bg-active)}.s-cascader__selection{display:flex;align-items:center;margin-top:calc(var(--s-cascader-option-padding-y)*-1);margin-bottom:calc(var(--s-cascader-option-padding-y)*-1);margin-inline-start:calc(var(--s-size-sm)*-1);padding:var(--s-cascader-option-padding-y) var(--s-size-sm);font-weight:normal;cursor:pointer}.s-cascader__option-loading{display:flex;align-items:center;margin-inline-end:var(--s-cascader-option-loading-margin-end);font-size:var(--s-cascader-option-loading-font-size);color:var(--s-cascader-option-loading-color)}.s-cascader__option-loading:not(.is-show){display:none}.s-cascader__option-label{font-size:var(--s-cascader-option-label-font-size);line-height:var(--s-cascader-option-label-line-height)}.s-cascader__option-icon{margin-inline-start:auto}.s-cascader__status-wrapper{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;display:flex;justify-content:center;align-items:center;opacity:0;transition:opacity var(--s-duration);pointer-events:none}.s-cascader__status-wrapper--show{opacity:1;pointer-events:auto}.s-cascader__status{font-size:var(--s-cascader-status-font-size);color:var(--s-cascader-status-color)}.s-cascader__error,.s-cascader__empty{cursor:pointer}.s-cascader__loading{font-size:var(--s-cascader-loading-font-size)}

package/components/cascader/index.d.ts

@@ -0,0 +1,5 @@
+import { type EnhancedComponent } from '../../utils';
+import _Cascader from './cascader.vue';
+export declare const Cascader: EnhancedComponent<typeof _Cascader>;
+export default Cascader;
+export type { CascaderOption, CascaderProps, CascaderSlots, CascaderEmits, CascaderValue, CascaderStateNode, } from './common';

package/components/cascader/index.js

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

package/components/cascader/useCascaderTabs.d.ts

@@ -0,0 +1,12 @@
+import { type Ref } from 'vue';
+import { type CascaderPanel, type CascaderProps, type CascaderStateNode } from './common';
+export declare function useCascaderTabs(props: CascaderProps, config: {
+    treeData: Ref<CascaderStateNode[]>;
+}): {
+    panels: import("vue").ComputedRef<CascaderPanel[]>;
+    currentTab: Ref<number, number>;
+    tabsOptions: import("vue").ComputedRef<{
+        label: string;
+        value: number;
+    }[]>;
+};

package/components/cascader/useCascaderTabs.js

@@ -0,0 +1,43 @@
+import { useTranslateWithPrefix } from "../../locale/index.js";
+import { computed, ref } from "vue";
+//#region packages/sard/components/cascader/useCascaderTabs.ts
+function useCascaderTabs(props, config) {
+	const { treeData } = config;
+	const currentTab = ref(0);
+	const panels = computed(() => {
+		let currentPanels = {
+			nodes: treeData.value,
+			selected: null
+		};
+		const panels = [currentPanels];
+		while (currentPanels) {
+			const node = currentPanels.nodes.find((node) => node.selected);
+			if (node) currentPanels.selected = node;
+			if (node && node.children && node.children.length) panels.push(currentPanels = {
+				nodes: node.children,
+				selected: null
+			});
+			else break;
+		}
+		return panels;
+	});
+	const { t } = useTranslateWithPrefix("cascader");
+	const innerPaceholder = computed(() => {
+		return props.hintText || t("pleaseSelect");
+	});
+	return {
+		panels,
+		currentTab,
+		tabsOptions: computed(() => {
+			return panels.value.map((panel, index) => {
+				const { selected } = panel;
+				return {
+					label: selected ? selected.label : innerPaceholder.value,
+					value: index
+				};
+			});
+		})
+	};
+}
+//#endregion
+export { useCascaderTabs };

package/components/cascader/useCascaderTree.d.ts

@@ -0,0 +1,66 @@
+import { type Ref } from 'vue';
+import { type CascaderValue, type CascaderOption, type CascaderProps, type CascaderStateNode } from './common';
+import { type UseOptionKeysReturn } from '../../use';
+export declare function useCascaderTree(props: CascaderProps, config: {
+    useOptionKeysReturn: UseOptionKeysReturn;
+    innerValue: Ref<CascaderValue | undefined>;
+}): {
+    treeData: Ref<{
+        label: string;
+        value: string | number;
+        key: string | number;
+        disabled: boolean;
+        children?: /*elided*/ any[] | undefined;
+        parent: /*elided*/ any | null;
+        isLeaf: boolean;
+        loadStatus: "idle" | "loading" | "loaded";
+        depth: number;
+        indeterminate: boolean;
+        checked: boolean;
+        selected: boolean;
+        option: {
+            [x: string]: any;
+            [x: number]: any;
+            [x: symbol]: any;
+            label?: string | undefined;
+            value?: string | number | undefined;
+            disabled?: boolean | undefined;
+            children?: /*elided*/ any[] | undefined;
+            isLeaf?: boolean | undefined;
+        };
+    }[], CascaderStateNode[] | {
+        label: string;
+        value: string | number;
+        key: string | number;
+        disabled: boolean;
+        children?: /*elided*/ any[] | undefined;
+        parent: /*elided*/ any | null;
+        isLeaf: boolean;
+        loadStatus: "idle" | "loading" | "loaded";
+        depth: number;
+        indeterminate: boolean;
+        checked: boolean;
+        selected: boolean;
+        option: {
+            [x: string]: any;
+            [x: number]: any;
+            [x: symbol]: any;
+            label?: string | undefined;
+            value?: string | number | undefined;
+            disabled?: boolean | undefined;
+            children?: /*elided*/ any[] | undefined;
+            isLeaf?: boolean | undefined;
+        };
+    }[]>;
+    originalTreeData: import("vue").ShallowRef<CascaderOption[], CascaderOption[]>;
+    loadStatus: Ref<"error" | "idle" | "loading" | "loaded", "error" | "idle" | "loading" | "loaded">;
+    toStateNodes: (options: CascaderOption[], parent: CascaderStateNode | null) => CascaderStateNode[];
+    setSelectedByNode: (node: CascaderStateNode) => void;
+    updateChecked: (value?: CascaderValue) => void;
+    setCheckedByNode: (node: CascaderStateNode, checked: boolean) => void;
+    isLeaf: (node: CascaderStateNode) => boolean;
+    getCheckedLeaves: () => CascaderStateNode[];
+    getCheckedNodes: () => CascaderStateNode[];
+    getAncestors: (node: CascaderStateNode) => CascaderStateNode[];
+    initialize: () => Promise<void>;
+};