straw-ui-vue 0.1.0

package/dist/components/st-tree/st-tree-node.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,87 @@
+import { Fragment as e, Transition as t, computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createVNode as s, defineComponent as c, normalizeClass as l, normalizeStyle as u, openBlock as d, renderList as f, resolveComponent as p, toDisplayString as m, unref as h, useAttrs as g, withCtx as _, withModifiers as v } from "vue";
+//#region src/components/st-tree/st-tree-node.vue?vue&type=script&setup=true&lang.ts
+var y = { class: "flex-1 min-w-0 truncate" }, b = {
+	key: 0,
+	class: "grid grid-rows-[1fr]"
+}, x = { class: "overflow-hidden" }, S = /*@__PURE__*/ c({
+	inheritAttrs: !1,
+	__name: "st-tree-node",
+	props: {
+		node: {},
+		level: {},
+		indent: {},
+		labelKey: {},
+		valueKey: {},
+		childrenKey: {},
+		selectedValue: {},
+		expandedKeys: {},
+		onSelect: { type: Function },
+		onToggle: { type: Function }
+	},
+	setup(c) {
+		let S = c, C = g();
+		function w(e) {
+			return e[S.valueKey];
+		}
+		let T = n(() => w(S.node)), E = n(() => S.node[S.labelKey]), D = n(() => S.node[S.childrenKey] || []), O = n(() => D.value.length === 0), k = n(() => D.value.length > 0), A = n(() => S.expandedKeys.includes(T.value)), j = n(() => S.selectedValue === T.value);
+		function M() {
+			S.onSelect(T.value);
+		}
+		function N() {
+			O.value || S.onToggle(T.value);
+		}
+		return (n, g) => {
+			let S = p("StTreeNode", !0);
+			return d(), a("div", { class: l(h(C).class) }, [o("div", {
+				class: l(["flex items-center gap-2 px-3 py-1.25 rounded-radius cursor-pointer transition-colors duration-100 select-none whitespace-nowrap text-3.25 leading-5 text-foreground", {
+					"hover:bg-accent": !j.value,
+					"bg-accent": j.value
+				}]),
+				style: u({ paddingLeft: `${c.level * c.indent + 12}px` }),
+				onClick: M
+			}, [o("span", {
+				class: l(["flex items-center justify-center flex-shrink-0 w-4.5 h-4.5 rounded-radius color-muted-foreground transition-all duration-200 ease-in-out", {
+					"rotate-90": A.value,
+					invisible: O.value,
+					"hover:bg-accent hover:color-foreground": !O.value
+				}]),
+				onClick: v(N, ["stop"])
+			}, [...g[0] ||= [o("i", { class: "i-ri-arrow-right-s-line text-3.5" }, null, -1)]], 2), o("p", y, m(E.value), 1)], 6), s(t, {
+				"enter-active-class": "transition-[grid-template-rows] duration-250 ease-[var(--animate-ease-menu)]",
+				"enter-from-class": "!grid-rows-[0fr]",
+				"enter-to-class": "grid-rows-[1fr]",
+				"leave-active-class": "transition-[grid-template-rows] duration-200 ease-[var(--animate-ease-menu)]",
+				"leave-from-class": "grid-rows-[1fr]",
+				"leave-to-class": "!grid-rows-[0fr]"
+			}, {
+				default: _(() => [k.value && A.value ? (d(), a("div", b, [o("div", x, [(d(!0), a(e, null, f(D.value, (e) => (d(), r(S, {
+					key: w(e),
+					"children-key": c.childrenKey,
+					"expanded-keys": c.expandedKeys,
+					indent: c.indent,
+					"label-key": c.labelKey,
+					level: c.level + 1,
+					node: e,
+					"on-select": c.onSelect,
+					"on-toggle": c.onToggle,
+					"selected-value": c.selectedValue,
+					"value-key": c.valueKey
+				}, null, 8, [
+					"children-key",
+					"expanded-keys",
+					"indent",
+					"label-key",
+					"level",
+					"node",
+					"on-select",
+					"on-toggle",
+					"selected-value",
+					"value-key"
+				]))), 128))])])) : i("", !0)]),
+				_: 1
+			})], 2);
+		};
+	}
+});
+//#endregion
+export { S as default };

package/dist/components/st-tree/st-tree.vue.cjs

@@ -0,0 +1 @@
+var e=require("./st-tree.vue_vue_type_script_setup_true_lang.cjs").default;exports.default=e;

package/dist/components/st-tree/st-tree.vue.d.ts

@@ -0,0 +1,50 @@
+import type { TreeListItem } from './types.d.ts';
+type __VLS_Props = {
+    /**
+     * 树数据列表
+     * */
+    list: TreeListItem[];
+    /**
+     * 显示文本的字段名
+     * */
+    labelKey?: string;
+    /**
+     * 值的字段名
+     * */
+    valueKey?: string;
+    /**
+     * 子节点的字段名
+     * */
+    childrenKey?: string;
+    /**
+     * 节点缩进距离
+     * */
+    indent?: number;
+};
+type __VLS_ModelProps = {
+    /**
+     * 选中值的双向绑定
+     * */
+    modelValue?: string | number | undefined;
+    /**
+     * 展开的节点值列表的双向绑定
+     * */
+    'expandedKeys'?: (string | number)[];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (value: string | number) => any;
+    "update:modelValue": (value: string | number) => any;
+    "update:expandedKeys": (value: (string | number)[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSelect?: (value: string | number) => any;
+    "onUpdate:modelValue"?: (value: string | number) => any;
+    "onUpdate:expandedKeys"?: (value: (string | number)[]) => any;
+}>, {
+    indent: number;
+    labelKey: string;
+    valueKey: string;
+    childrenKey: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/st-tree/st-tree.vue.js

@@ -0,0 +1,5 @@
+import e from "./st-tree.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/st-tree/st-tree.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/components/st-tree/st-tree.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const e=require("../../utils/cn.cjs"),t=require("./st-tree-node.vue.cjs");let n=require("vue");var r={class:`py-1`},i=(0,n.defineComponent)({inheritAttrs:!1,__name:`st-tree`,props:(0,n.mergeModels)({list:{},labelKey:{default:`label`},valueKey:{default:`value`},childrenKey:{default:`children`},indent:{default:20}},{modelValue:{},modelModifiers:{},expandedKeys:{default:()=>[]},expandedKeysModifiers:{}}),emits:(0,n.mergeModels)([`select`],[`update:modelValue`,`update:expandedKeys`]),setup(i,{emit:a}){let o=(0,n.useAttrs)(),s=i,c=(0,n.useModel)(i,`modelValue`),l=(0,n.useModel)(i,`expandedKeys`),u=a;function d(e){return e[s.valueKey]}function f(e){c.value=e,u(`select`,e)}function p(e){l.value.indexOf(e)>-1?l.value=l.value.filter(t=>t!==e):l.value=[...l.value,e]}return(a,s)=>((0,n.openBlock)(),(0,n.createElementBlock)(`div`,{class:(0,n.normalizeClass)((0,n.unref)(e.cn)(`text-3.5 text-foreground`,(0,n.unref)(o).class)),style:(0,n.normalizeStyle)((0,n.unref)(o).style)},[(0,n.createElementVNode)(`div`,r,[((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(i.list,e=>((0,n.openBlock)(),(0,n.createBlock)(t.default,{key:d(e),"children-key":i.childrenKey,"expanded-keys":l.value,indent:i.indent,"label-key":i.labelKey,level:0,node:e,"on-select":f,"on-toggle":p,"selected-value":c.value,"value-key":i.valueKey},null,8,[`children-key`,`expanded-keys`,`indent`,`label-key`,`node`,`selected-value`,`value-key`]))),128))])],6))}});exports.default=i;

package/dist/components/st-tree/st-tree.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,59 @@
+import { cn as e } from "../../utils/cn.js";
+import t from "./st-tree-node.vue.js";
+import { Fragment as n, createBlock as r, createElementBlock as i, createElementVNode as a, defineComponent as o, mergeModels as s, normalizeClass as c, normalizeStyle as l, openBlock as u, renderList as d, unref as f, useAttrs as p, useModel as m } from "vue";
+//#region src/components/st-tree/st-tree.vue?vue&type=script&setup=true&lang.ts
+var h = { class: "py-1" }, g = /*@__PURE__*/ o({
+	inheritAttrs: !1,
+	__name: "st-tree",
+	props: /*@__PURE__*/ s({
+		list: {},
+		labelKey: { default: "label" },
+		valueKey: { default: "value" },
+		childrenKey: { default: "children" },
+		indent: { default: 20 }
+	}, {
+		modelValue: {},
+		modelModifiers: {},
+		expandedKeys: { default: () => [] },
+		expandedKeysModifiers: {}
+	}),
+	emits: /*@__PURE__*/ s(["select"], ["update:modelValue", "update:expandedKeys"]),
+	setup(o, { emit: s }) {
+		let g = p(), _ = o, v = m(o, "modelValue"), y = m(o, "expandedKeys"), b = s;
+		function x(e) {
+			return e[_.valueKey];
+		}
+		function S(e) {
+			v.value = e, b("select", e);
+		}
+		function C(e) {
+			y.value.indexOf(e) > -1 ? y.value = y.value.filter((t) => t !== e) : y.value = [...y.value, e];
+		}
+		return (s, p) => (u(), i("div", {
+			class: c(f(e)("text-3.5 text-foreground", f(g).class)),
+			style: l(f(g).style)
+		}, [a("div", h, [(u(!0), i(n, null, d(o.list, (e) => (u(), r(t, {
+			key: x(e),
+			"children-key": o.childrenKey,
+			"expanded-keys": y.value,
+			indent: o.indent,
+			"label-key": o.labelKey,
+			level: 0,
+			node: e,
+			"on-select": S,
+			"on-toggle": C,
+			"selected-value": v.value,
+			"value-key": o.valueKey
+		}, null, 8, [
+			"children-key",
+			"expanded-keys",
+			"indent",
+			"label-key",
+			"node",
+			"selected-value",
+			"value-key"
+		]))), 128))])], 6));
+	}
+});
+//#endregion
+export { g as default };

package/dist/components/st-tree/types.d.ts

@@ -0,0 +1,87 @@
+/**
+ * 树节点数据接口
+ * */
+export interface TreeListItem {
+	/**
+	 * 子节点列表
+	 * */
+	children?: TreeListItem[];
+	/**
+	 * 其他自定义属性
+	 * */
+	[key: string]: unknown;
+}
+
+/**
+ * 树组件属性接口
+ * */
+export interface StTreeProps {
+	/**
+	 * 树数据列表
+	 * */
+	list: TreeListItem[];
+	/**
+	 * 显示文本的字段名
+	 * */
+	labelKey?: string;
+	/**
+	 * 值的字段名
+	 * */
+	valueKey?: string;
+	/**
+	 * 子节点的字段名
+	 * */
+	childrenKey?: string;
+	/**
+	 * 节点缩进距离
+	 * */
+	indent?: number;
+}
+
+/**
+ * 树节点属性接口
+ * */
+export interface StTreeNodeProps {
+	/**
+	 * 节点数据
+	 * */
+	node: TreeListItem;
+	/**
+	 * 节点层级
+	 * */
+	level: number;
+	/**
+	 * 节点缩进距离
+	 * */
+	indent?: number;
+	/**
+	 * 显示文本的字段名
+	 * */
+	labelKey: string;
+	/**
+	 * 值的字段名
+	 * */
+	valueKey: string;
+	/**
+	 * 子节点的字段名
+	 * */
+	childrenKey: string;
+	/**
+	 * 当前选中的值
+	 * */
+	selectedValue: string | number | undefined;
+	/**
+	 * 展开的节点值列表
+	 * */
+	expandedKeys: (string | number)[];
+	/**
+	 * 处理节点选择
+	 * */
+	onSelect: (value: string | number) => void;
+	/**
+	 * 处理节点展开/收起
+	 * */
+	onToggle: (value: string | number) => void;
+}
+
+export {};

package/dist/components/st-tree.cjs

@@ -0,0 +1 @@
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../utils/with-install.cjs"),t=require("./st-tree/st-tree.vue.cjs");var n=e.withInstall(t.default);exports.StTree=n,exports.default=n;

package/dist/components/st-tree.js

@@ -0,0 +1,6 @@
+import { withInstall as e } from "../utils/with-install.js";
+import t from "./st-tree/st-tree.vue.js";
+//#region src/components/st-tree/index.ts
+var n = e(t);
+//#endregion
+export { n as StTree, n as default };

package/dist/components/types.d.ts

@@ -0,0 +1,41 @@
+/**
+ * 组件尺寸类型
+ * 用于定义组件的尺寸变体
+ */
+export type Size = 'small' | 'default' | 'large';
+
+/**
+ * 按钮变体类型
+ * 用于定义按钮的颜色变体
+ */
+export type ButtonVariant = 'primary' | 'default' | 'destructive';
+
+/**
+ * 弹出层触发方式类型
+ * 用于定义弹出组件的触发方式
+ */
+export type PopoverTrigger = 'click' | 'focus' | 'hover' | 'contextmenu';
+
+/**
+ * 弹出层位置类型
+ * 用于定义弹出组件的显示位置
+ */
+export type PopoverPlacement = 'top' | 'bottom' | 'left' | 'right';
+
+/**
+ * 列表项基础类型
+ * 用于定义列表数据的通用结构
+ */
+export interface ListItemBase {
+	[key: string]: unknown;
+}
+
+/**
+ * 分组列表项类型
+ * 用于定义带分组的列表数据结构
+ */
+export interface GroupListItem extends ListItemBase {
+	group?: string;
+}
+
+export {};

package/dist/index.cjs

@@ -0,0 +1 @@
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("./utils/directive/index.cjs"),t=require("./utils/cn.cjs"),n=require("./utils/cva/index.cjs"),r=require("./components/st-button.cjs"),i=require("./components/st-checkbox.cjs"),a=require("./components/st-checkbox-group.cjs"),o=require("./components/st-radio.cjs"),s=require("./components/st-radio-group.cjs"),c=require("./components/st-input.cjs"),l=require("./components/st-popover.cjs"),u=require("./components/st-tooltip.cjs"),d=require("./components/st-select.cjs"),f=require("./components/st-dialog.cjs"),p=require("./components/st-menu.cjs"),m=require("./components/st-sidebar.cjs"),h=require("./components/st-sidebar-item.cjs"),g=require("./components/st-splitter.cjs"),_=require("./components/st-splitter-panel.cjs"),v=require("./components/st-tree.cjs"),y=require("./components/st-toggle.cjs");var b={install(t){t.use(e.default),t.use(r.StButton),t.use(i.StCheckbox),t.use(a.StCheckboxGroup),t.use(o.StRadio),t.use(s.StRadioGroup),t.use(c.StInput),t.use(l.StPopover),t.use(u.StTooltip),t.use(d.StSelect),t.use(f.StDialog),t.use(p.StMenu),t.use(p.StMenuNode),t.use(m.StSidebar),t.use(h.StSidebarItem),t.use(g.StSplitter),t.use(_.StSplitterPanel),t.use(v.StTree),t.use(y.StToggle)},Directive:e.default,StButton:r.StButton,StCheckbox:i.StCheckbox,StCheckboxGroup:a.StCheckboxGroup,StRadio:o.StRadio,StRadioGroup:s.StRadioGroup,StInput:c.StInput,StPopover:l.StPopover,StTooltip:u.StTooltip,StSelect:d.StSelect,StDialog:f.StDialog,StMenu:p.StMenu,StMenuNode:p.StMenuNode,StSidebar:m.StSidebar,StSidebarItem:h.StSidebarItem,StSplitter:g.StSplitter,StSplitterPanel:_.StSplitterPanel,StTree:v.StTree,StToggle:y.StToggle};exports.Directive=e.default,exports.StButton=r.StButton,exports.StCheckbox=i.StCheckbox,exports.StCheckboxGroup=a.StCheckboxGroup,exports.StDialog=f.StDialog,exports.StInput=c.StInput,exports.StMenu=p.StMenu,exports.StMenuNode=p.StMenuNode,exports.StPopover=l.StPopover,exports.StRadio=o.StRadio,exports.StRadioGroup=s.StRadioGroup,exports.StSelect=d.StSelect,exports.StSidebar=m.StSidebar,exports.StSidebarItem=h.StSidebarItem,exports.StSplitter=g.StSplitter,exports.StSplitterPanel=_.StSplitterPanel,exports.StToggle=y.StToggle,exports.StTooltip=u.StTooltip,exports.StTree=v.StTree,exports.cn=t.cn,exports.cva=n.cva,exports.default=b;

package/dist/index.css

@@ -0,0 +1,2 @@
+.st-input__inner[data-v-19943572]::-webkit-credentials-auto-fill-button{visibility:hidden;pointer-events:none;position:absolute;right:0}.st-input__inner[data-v-19943572]::-webkit-caps-lock-indicator{visibility:hidden}.st-input__inner[data-v-19943572]::-ms-reveal{display:none}
+/*$vite$:1*/