sard 1.0.0 → 1.0.2

package/components/toast/toast.d.ts

@@ -0,0 +1,42 @@
+import { type ToastProps, type ToastSlots, type ToastExpose } from './common';
+import type { MotionHookName } from '../motion/common';
+type __VLS_Slots = ToastSlots;
+declare const __VLS_base: import("vue").DefineComponent<ToastProps, ToastExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "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: MotionHookName, el: Element) => any;
+    "update:visible": (visible: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<ToastProps> & Readonly<{
+    "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: MotionHookName, el: Element) => any) | undefined;
+    "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
+}>, {
+    title: string | number;
+    position: "top" | "center" | "bottom";
+    type: "text" | "loading" | "success" | "fail";
+    visible: boolean;
+    overlay: boolean;
+    transparent: boolean;
+    timeout: 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/toast/toast.js

@@ -0,0 +1,120 @@
+import { createBem } from "../../utils/bem.js";
+import { useTimeout } from "../../use/useTimeout.js";
+import popup_default from "../popup/popup.js";
+import loading_default from "../loading/loading.js";
+import { defaultToastProps } from "./common.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, mergeDefaults, nextTick, normalizeClass, openBlock, renderSlot, toDisplayString, unref, useSlots, watch, withCtx } from "vue";
+import { Fail, Success } from "@sard/icons";
+//#region packages/sard/components/toast/toast.vue
+var toast_default = /*@__PURE__*/ defineComponent({
+	__name: "toast",
+	props: /*@__PURE__*/ mergeDefaults({
+		type: {
+			type: String,
+			required: false
+		},
+		title: {
+			type: [String, Number],
+			required: false
+		},
+		visible: {
+			type: Boolean,
+			required: false
+		},
+		position: {
+			type: String,
+			required: false
+		},
+		overlay: {
+			type: Boolean,
+			required: false
+		},
+		transparent: {
+			type: Boolean,
+			required: false
+		},
+		timeout: {
+			type: Number,
+			required: false
+		}
+	}, defaultToastProps),
+	emits: [
+		"update:visible",
+		"before-enter",
+		"enter",
+		"after-enter",
+		"enter-cancelled",
+		"before-leave",
+		"leave",
+		"after-leave",
+		"leave-cancelled",
+		"visible-hook"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const slots = useSlots();
+		const emit = __emit;
+		const bem = createBem("toast");
+		const showIcon = computed(() => {
+			return !!(props.type !== "text" || slots.icon);
+		});
+		const hideTimer = useTimeout();
+		const hide = () => {
+			emit("update:visible", false);
+		};
+		const reHideLater = () => {
+			hideTimer.clear();
+			nextTick(() => {
+				if (props.type !== "loading" && props.timeout > 0) hideTimer.set(hide, props.timeout);
+			});
+		};
+		watch(() => props.visible, () => {
+			if (props.visible) {
+				if (props.type !== "loading" && props.timeout > 0) hideTimer.set(hide, props.timeout);
+			}
+		});
+		const onVisibleHook = (name, el) => {
+			emit("visible-hook", name, el);
+			emit(name, el);
+		};
+		__expose({
+			reHideLater,
+			cancelHide: () => {
+				hideTimer.clear();
+			}
+		});
+		const toastClass = computed(() => {
+			return [bem.b(), bem.is("text", props.type === "text")];
+		});
+		const popupClass = computed(() => {
+			return [bem.e("popup"), bem.em("popup", props.position)];
+		});
+		const iconClass = computed(() => {
+			return [bem.e("icon"), bem.is("loading", props.type === "loading")];
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(popup_default, {
+				visible: __props.visible,
+				overlay: __props.overlay,
+				transparent: __props.transparent,
+				class: normalizeClass(popupClass.value),
+				"lock-scroll": false,
+				effect: "fade",
+				onVisibleHook
+			}, {
+				default: withCtx(() => [createElementVNode("div", { class: normalizeClass(toastClass.value) }, [renderSlot(_ctx.$slots, "default", {}, () => [showIcon.value ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(iconClass.value)
+				}, [renderSlot(_ctx.$slots, "icon", {}, () => [__props.type === "loading" ? (openBlock(), createBlock(loading_default, { key: 0 })) : __props.type === "success" ? (openBlock(), createBlock(unref(Success), { key: 1 })) : __props.type === "fail" ? (openBlock(), createBlock(unref(Fail), { key: 2 })) : createCommentVNode("v-if", true)])], 2)) : createCommentVNode("v-if", true), createElementVNode("div", { class: normalizeClass(unref(bem).e("title")) }, [renderSlot(_ctx.$slots, "title", {}, () => [createTextVNode(toDisplayString(__props.title), 1)])], 2)])], 2)]),
+				_: 3
+			}, 8, [
+				"visible",
+				"overlay",
+				"transparent",
+				"class"
+			]);
+		};
+	}
+});
+//#endregion
+export { toast_default as default };

package/components/tree/common.d.ts

@@ -0,0 +1,134 @@
+import type { InjectionKey } from 'vue';
+import { type DefaultProps } from '../config';
+export interface TreeNaturalNode {
+    title?: string | number;
+    key?: any;
+    children?: TreeNaturalNode[];
+    disabled?: boolean;
+    isLeaf?: boolean;
+    [prop: string]: any;
+}
+export interface TreeCleanNode {
+    title: string | number;
+    key: string | number;
+    children?: TreeCleanNode[];
+}
+export interface TreeStateNode {
+    title: string | number;
+    key: string | number;
+    expanded: boolean;
+    checked: boolean;
+    children?: TreeStateNode[];
+    parent: TreeStateNode | null;
+    indeterminate: boolean;
+    level: number;
+    offsetLevel: number;
+    visible: boolean;
+    disabled: boolean;
+    isLeaf: boolean;
+    loadStatus: 'idle' | 'loading' | 'loaded';
+    depth: number;
+}
+export interface TreeNodeKeys {
+    title?: string;
+    key?: string;
+    children?: string;
+    isLeaf?: string;
+}
+export declare const defaultNodeKeys: {
+    title: string;
+    key: string;
+    children: string;
+    isLeaf: string;
+};
+export type TreeDropType = 'before' | 'after' | 'prepend' | 'append';
+export type TreeEditType = 'addSibling' | 'addChild' | 'addRoot' | 'edit' | 'delete';
+export interface TreeProps {
+    data?: TreeNaturalNode[];
+    nodeKeys?: TreeNodeKeys;
+    defaultExpandAll?: boolean;
+    defaultExpandedKeys?: (string | number)[];
+    accordion?: boolean;
+    selectable?: boolean;
+    checkStrictly?: boolean;
+    singleSelectable?: boolean;
+    leafOnly?: boolean;
+    current?: string | number;
+    defaultCheckedKeys?: (string | number)[];
+    draggable?: boolean;
+    editable?: boolean;
+    filterMode?: 'lenient' | 'strict';
+    filterMethod?: (value: string, node: TreeStateNode) => boolean;
+    lazy?: boolean;
+    load?: (node?: TreeStateNode) => Promise<TreeNaturalNode[]> | TreeNaturalNode[];
+    autoHeight?: boolean;
+    allowDrag?: (node: TreeStateNode) => boolean;
+    beforeDrop?: (draggingNode: TreeStateNode, dropNode: TreeStateNode, type: TreeDropType) => any;
+    beforeEdit?: (node: TreeStateNode, title: string, type: TreeEditType) => any;
+}
+export declare const defaultTreeProps: DefaultProps<TreeProps>;
+export interface TreeEmits {
+    (e: 'update:current', key: string | number, node: TreeStateNode): void;
+    (e: 'select', key: string | number, node: TreeStateNode): void;
+    (e: 'check', event: {
+        checked: boolean;
+        node: TreeStateNode;
+    }): void;
+    (e: 'node-click', event: {
+        event: any;
+        node: TreeStateNode;
+    }): void;
+}
+export interface TreeExpose {
+    setExpanded: (key: string | number, expanded: boolean) => void;
+    toggleExpanded: (key: string | number) => void;
+    setExpandedKeys: (keys: (string | number)[]) => void;
+    getExpandedKeys: () => (string | number)[];
+    getCheckedKeys: () => (string | number)[];
+    getHalfCheckedKeys: () => (string | number)[];
+    setCheckedKeys: (keys: (string | number)[]) => void;
+    setChecked: (key: string | number, checked: boolean) => void;
+    addRootNode: () => void;
+    getCleanTreeData: () => TreeCleanNode[];
+    filter: (searchString: string) => void;
+}
+export interface TreeNodeProps {
+    node: TreeStateNode;
+    index: number;
+}
+export interface TreeBranchProps {
+    nodes: TreeStateNode[];
+}
+export interface TreeContext {
+    selectable: TreeProps['selectable'];
+    draggable: TreeProps['draggable'];
+    autoHeight: TreeProps['autoHeight'];
+    editable: TreeProps['editable'];
+    singleSelectable: TreeProps['singleSelectable'];
+    leafOnly: TreeProps['leafOnly'];
+    allowDrag: TreeProps['allowDrag'];
+    treeData: TreeStateNode[];
+    setExpandedByNode: (node: TreeStateNode, expanded: boolean) => void;
+    toggleExpandedByNode: (node: TreeStateNode) => void;
+    setCheckedByNode: (node: TreeStateNode, checked: boolean) => void;
+    toggleCheck: (node: TreeStateNode, checked: boolean) => void;
+    levelup: (node: TreeStateNode) => any;
+    leveldown: (node: TreeStateNode) => any;
+    edit: (node: TreeStateNode, getEditRect: () => DOMRect) => void;
+    drop: (draggingNode: TreeStateNode, dropNode: TreeStateNode, position: number) => any;
+    currentKey: string | number | undefined;
+    singleSelect: (node: TreeStateNode) => void;
+    nodeClick: (node: TreeStateNode, event: any) => void;
+    load: TreeProps['load'];
+    lazy: boolean;
+    toTreeStateNodes: (nodes: TreeNaturalNode[], parent: TreeStateNode | null) => TreeStateNode[];
+    setRenderPosition: () => void;
+    isRtl: boolean;
+    dragIndent: (options: TreeDragOption[], el: Element, resolver: PromiseWithResolvers<TreeDragIndent>) => void;
+}
+export declare const treeContextKey: InjectionKey<TreeContext>;
+export type TreeDragIndent = 'left' | 'right';
+export interface TreeDragOption {
+    icon: 'left' | 'right';
+    id: TreeDragIndent;
+}

package/components/tree/common.js

@@ -0,0 +1,16 @@
+//#region packages/sard/components/tree/common.ts
+const defaultNodeKeys = {
+	title: "title",
+	key: "key",
+	children: "children",
+	isLeaf: "isLeaf"
+};
+const defaultTreeProps = {
+	defaultExpandAll: false,
+	filterMode: "lenient",
+	accordion: false,
+	data: () => []
+};
+const treeContextKey = Symbol("treeContext");
+//#endregion
+export { defaultNodeKeys, defaultTreeProps, treeContextKey };

package/components/tree/index.css

@@ -0,0 +1 @@
+:root{--s-tree-border-color:var(--s-border-color);--s-tree-bg:var(--s-bg-color-container);--s-tree-loading-size:var(--s-font-size);--s-tree-loading-color:var(--s-text-color-fourth);--s-tree-loading-margin-y:10px;--s-tree-node-height:var(--s-content-height-sm);--s-tree-node-padding-x:var(--s-content-padding-x);--s-tree-node-padding-y:var(--s-content-padding-y);--s-tree-node-bg:var(--s-bg-color-container);--s-tree-node-bg-active:var(--s-bg-color-active);--s-tree-node-box-shadow-dragging:var(--s-box-shadow-secondary);--s-tree-node-loading-margin-end:var(--s-size-xs);--s-tree-toolbar-margin-end:-12px;--s-tree-indent-width:var(--s-size-xl);--s-tree-arrow-padding-x:var(--s-size-sm);--s-tree-arrow-font-size:var(--s-font-size-sm);--s-tree-arrow-color:var(--s-text-color-tertiary);--s-tree-selection-padding-x:var(--s-size-sm);--s-tree-edit-padding-x:var(--s-size-sm);--s-tree-edit-font-size:18px;--s-tree-edit-color:var(--s-text-color-fourth);--s-tree-edit-opacity-active:var(--s-opacity-active);--s-tree-level-btn-padding-x:var(--s-size-sm);--s-tree-level-btn-font-size:18px;--s-tree-level-btn-color:var(--s-text-color-fourth);--s-tree-level-btn-opacity-active:var(--s-opacity-active);--s-tree-drag-padding-x:var(--s-size-sm);--s-tree-drag-font-size:18px;--s-tree-drag-color:var(--s-text-color-fourth);--s-tree-drag-opacity-active:var(--s-opacity-active)}.s-tree{position:relative;display:flex;flex-direction:column;background:var(--s-tree-bg);transition:height var(--s-duration)}.s-tree__input-wrapper{padding:0 var(--s-dialog-body-padding-x) var(--s-dialog-body-padding-y)}.s-tree__input-text{text-align:center}.s-tree__status{display:flex;justify-content:center;align-items:center;margin:var(--s-tree-loading-margin-y) 0;font-size:var(--s-tree-loading-size);color:var(--s-tree-loading-color)}.s-tree__error{cursor:pointer}.s-tree__node{position:relative;display:flex;width:100%;min-height:var(--s-tree-node-height);align-items:center;padding:var(--s-tree-node-padding-y) var(--s-tree-node-padding-x);background:var(--s-tree-node-bg)}.s-tree__node::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-border-width) var(--s-border-style) var(--s-tree-border-color);transform-origin:bottom center}.s-tree__node--active{background:var(--s-tree-node-bg-active)}.s-tree__node--draggable{position:absolute;top:0;inset-inline-start:0;height:var(--s-tree-node-height);transition:transform var(--s-duration),opacity var(--s-duration)}.s-tree__node--dragging{z-index:1;box-shadow:var(--s-tree-node-box-shadow-dragging);transition:none}.s-tree__node--truncated .s-tree__title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.s-tree__node--disallowed .s-tree__drag{visibility:hidden}.s-tree__arrow{margin-top:calc(var(--s-tree-node-padding-y)*-1);margin-inline-end:0;margin-bottom:calc(var(--s-tree-node-padding-y)*-1);margin-inline-start:calc(var(--s-tree-arrow-padding-x)*-1);padding:var(--s-tree-node-padding-y) var(--s-tree-arrow-padding-x);font-size:var(--s-tree-arrow-font-size);color:var(--s-tree-arrow-color);transition:transform var(--s-duration)}.s-tree__arrow--expanded{transform:rotate(-90deg)}.s-tree__arrow--is-leaf{visibility:hidden}:root[dir=rtl] .s-tree__arrow--expanded{transform:rotate(90deg)}:root[dir=rtl] .s-tree__arrow-icon{transform:rotateY(180deg)}.s-tree__loading{margin-inline-end:var(--s-tree-node-loading-margin-end);font-size:var(--s-tree-loading-size);color:var(--s-tree-loading-color)}.s-tree__selection{margin-top:calc(var(--s-tree-node-padding-y)*-1);margin-inline-end:0;margin-bottom:calc(var(--s-tree-node-padding-y)*-1);margin-inline-start:calc(var(--s-tree-selection-padding-x)*-1);padding:var(--s-tree-node-padding-y) var(--s-tree-selection-padding-x);cursor:pointer}.s-tree__selection--disabled{cursor:not-allowed}.s-tree__title{flex:1;min-width:0;line-height:var(--s-line-height-snug)}.s-tree__toolbar{display:flex;margin-inline-start:auto;margin-inline-end:var(--s-tree-toolbar-margin-end)}.s-tree__edit{margin:calc(var(--s-tree-node-padding-y)*-1) 0;padding:var(--s-tree-node-padding-y) var(--s-tree-edit-padding-x);font-size:var(--s-tree-edit-font-size);color:var(--s-tree-edit-color);cursor:pointer}.s-tree__edit:active{opacity:var(--s-tree-edit-opacity-active)}.s-tree__drag{position:relative;display:flex;align-items:center;margin:calc(var(--s-tree-node-padding-y)*-1) 0;padding:var(--s-tree-node-padding-y) var(--s-tree-drag-padding-x);font-size:var(--s-tree-drag-font-size);line-height:var(--s-line-height-none);color:var(--s-tree-drag-color);cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none}.s-tree__drag:active{opacity:var(--s-tree-drag-opacity-active)}.s-tree__level-btn{position:absolute;top:50%;inset-inline-start:0;display:flex;flex-direction:column;font-size:var(--s-tree-arrow-padding-x);transform:translateY(-50%) scale(0.8)}:root[dir=rtl] .s-tree__level-btn-icon{transform:rotateY(180deg)}

package/components/tree/index.d.ts

@@ -0,0 +1,9 @@
+import { type EnhancedComponent } from '../../utils';
+import _Tree from './tree.vue';
+import _TreeBranch from './tree-branch.vue';
+import _TreeNode from './tree-node.vue';
+export declare const Tree: EnhancedComponent<typeof _Tree>;
+export declare const TreeBranch: EnhancedComponent<typeof _TreeBranch>;
+export declare const TreeNode: EnhancedComponent<typeof _TreeNode>;
+export default Tree;
+export type { TreeProps, TreeEmits, TreeExpose, TreeNaturalNode, TreeStateNode, TreeDropType, TreeEditType, } from './common';

package/components/tree/index.js

@@ -0,0 +1,10 @@
+import { enhanceComponent } from "../../utils/component.js";
+import tree_node_default from "./tree-node.js";
+import tree_default from "./tree.js";
+import tree_branch_default from "./tree-branch.js";
+//#region packages/sard/components/tree/index.ts
+const Tree = enhanceComponent(tree_default);
+const TreeBranch = enhanceComponent(tree_branch_default);
+const TreeNode = enhanceComponent(tree_node_default);
+//#endregion
+export { Tree, Tree as default, TreeBranch, TreeNode };

package/components/tree/tree-branch.d.ts

@@ -0,0 +1,4 @@
+import { type TreeBranchProps } from './common';
+declare const __VLS_export: import("vue").DefineComponent<TreeBranchProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TreeBranchProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/components/tree/tree-branch.js

@@ -0,0 +1,23 @@
+import tree_node_default from "./tree-node.js";
+import { Fragment, createBlock, createCommentVNode, createElementBlock, defineComponent, openBlock, renderList } from "vue";
+//#region packages/sard/components/tree/tree-branch.vue
+var tree_branch_default = /*@__PURE__*/ defineComponent({
+	__name: "tree-branch",
+	props: { nodes: {
+		type: Array,
+		required: true
+	} },
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(true), createElementBlock(Fragment, null, renderList(__props.nodes, (node, index) => {
+				return openBlock(), createElementBlock(Fragment, { key: node.key }, [node.visible ? (openBlock(), createBlock(tree_node_default, {
+					key: 0,
+					index,
+					node
+				}, null, 8, ["index", "node"])) : createCommentVNode("v-if", true)], 64);
+			}), 128);
+		};
+	}
+});
+//#endregion
+export { tree_branch_default as default };

package/components/tree/tree-node.d.ts

@@ -0,0 +1,4 @@
+import { type TreeNodeProps } from '../tree/common';
+declare const __VLS_export: import("vue").DefineComponent<TreeNodeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TreeNodeProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;