@otwb/ui 2.0.2 → 2.0.4

package/README.md

@@ -1 +1 @@
-# @otwb/ui
+# @otwb/ui

package/auto-imports.d.ts

@@ -1,15 +1,15 @@
-export declare const UIDirectives: {
-    type: 'directive'
-    resolve: (name: string) => string | undefined
-}[]
-
-export declare const UIComponents: {
-    type: 'component'
-    resolve: (name: string) => string | undefined
-}[]
-
-export declare const UI: {
-    from: string
-    imports: (string | { name: string, type: boolean })[]
-}[]
-export default UI
+export declare const UIDirectives: {
+    type: 'directive'
+    resolve: (name: string) => string | undefined
+}[]
+
+export declare const UIComponents: {
+    type: 'component'
+    resolve: (name: string) => string | undefined
+}[]
+
+export declare const UI: {
+    from: string
+    imports: (string | { name: string, type: boolean })[]
+}[]
+export default UI

package/auto-imports.js

@@ -1,34 +1,34 @@
-export const UIDirectives = [
-    {
-        type: 'directive',
-        resolve(name) {
-            return ['Spin', 'Tooltip'].includes(name)
-                ? { name: `v${name}`, from: '@otwb/ui/directives' }
-                : undefined
-        },
-    },
-]
-
-export const UIComponents = [
-    {
-        type: 'component',
-        resolve(name) {
-            return ['DataTable', 'DataForm', 'DataCustom', 'DataFilter', 'DataSelection', 'DataPagination'].includes(name)
-                ? { name, from: '@otwb/ui/components' }
-                : undefined
-        },
-    },
-]
-
-export const UI = [
-    {
-        from: '@otwb/ui/directives',
-        imports: ['vSpin', 'vTooltip'],
-    },
-    {
-        from: '@otwb/ui/components',
-        imports: ['DataTable', 'DataForm', 'DataCustom', 'DataFilter', 'DataSelection', 'DataPagination'],
-    },
-]
-
-export default UI
+export const UIDirectives = [
+    {
+        type: 'directive',
+        resolve(name) {
+            return ['Spin', 'Tooltip'].includes(name)
+                ? { name: `v${name}`, from: '@otwb/ui/directives' }
+                : undefined
+        },
+    },
+]
+
+export const UIComponents = [
+    {
+        type: 'component',
+        resolve(name) {
+            return ['DataTable', 'DataForm', 'DataCustom', 'DataFilter', 'DataSelection', 'DataPagination'].includes(name)
+                ? { name, from: '@otwb/ui/components' }
+                : undefined
+        },
+    },
+]
+
+export const UI = [
+    {
+        from: '@otwb/ui/directives',
+        imports: ['vSpin', 'vTooltip'],
+    },
+    {
+        from: '@otwb/ui/components',
+        imports: ['DataTable', 'DataForm', 'DataCustom', 'DataFilter', 'DataSelection', 'DataPagination'],
+    },
+]
+
+export default UI

package/dist/index.js

@@ -303,8 +303,7 @@ var style = /* @__PURE__ */ c([
 		gridArea: "header",
 		overflow: "hidden",
 		zIndex: 2,
-		height: "var(--app-header-height, 44px)",
-		zIndex: "2"
+		height: "var(--app-header-height, 44px)"
 	}),
 	cB("sider", {
 		gridArea: "sider",
@@ -812,43 +811,7 @@ function useContentScroll(d, z, B) {
 		content: z
 	};
 }
-var IBg = (d) => createVNode("svg", d, [
-	createVNode("defs", null, [
-		createVNode("symbol", {
-			id: "geometry-left",
-			viewBox: "0 0 214 36"
-		}, [createVNode("path", { d: "M17 0h197v36H0v-2c4.5 0 9-3.5 9-8V8c0-4.5 3.5-8 8-8z" }, null)]),
-		createVNode("symbol", {
-			id: "geometry-right",
-			viewBox: "0 0 214 36"
-		}, [createVNode("use", { "xlink:href": "#geometry-left" }, null)]),
-		createVNode("clipPath", null, [createVNode("rect", {
-			width: "100%",
-			height: "100%",
-			x: "0"
-		}, null)])
-	]),
-	createVNode("svg", {
-		width: "50%",
-		height: "100%"
-	}, [createVNode("use", {
-		"xlink:href": "#geometry-left",
-		width: "214",
-		height: "36",
-		fill: "currentColor"
-	}, null)]),
-	createVNode("g", { transform: "scale(-1, 1)" }, [createVNode("svg", {
-		width: "50%",
-		height: "100%",
-		x: "-100%",
-		y: "0"
-	}, [createVNode("use", {
-		"xlink:href": "#geometry-right",
-		width: "214",
-		height: "36",
-		fill: "currentColor"
-	}, null)])])
-]), AppTab = /* @__PURE__ */ defineComponent({
+var AppTab = /* @__PURE__ */ defineComponent({
 	name: "AppTab",
 	props: {
 		path: String,
@@ -865,10 +828,15 @@ var IBg = (d) => createVNode("svg", d, [
 		});
 		let K = useThemeVars(), q = computed(() => ({
 			fontSize: "14px",
-			color: d.isCurrent ? K.value.primaryColor : K.value.textColor3,
-			maxWidth: "355px",
-			overflow: "hidden"
+			color: d.isCurrent ? "#595959" : K.value.textColor3,
+			maxWidth: "350px",
+			overflow: "hidden",
+			marginRight: "5px"
 		})), J = computed(() => ({
+			height: "34px",
+			padding: "0 12px 0 15px"
+		}));
+		return computed(() => ({
 			width: "calc(100% + 27px)",
 			height: "100%",
 			position: "absolute",
@@ -876,34 +844,30 @@ var IBg = (d) => createVNode("svg", d, [
 			left: "-14px",
 			zIndex: d.isCurrent ? -1 : -2,
 			color: d.isCurrent ? getOpaqueColor(K.value.primaryColor, d.dark ? .3 : .12, d.dark ? "#000" : "#fff") : H.value ? K.value.borderColor : "transparent"
-		}));
-		return () => createVNode("div", {
+		})), () => createVNode("div", {
 			ref: V,
-			style: "position: relative; padding: 2px 10px 5px; cursor: pointer"
-		}, [
-			createVNode("div", {
-				ref: U,
-				style: "transition: width 300ms; overflow: hidden"
-			}, [createVNode("div", {
-				ref: W,
-				style: "display: flex; align-items: center; gap: 4px; width: fit-content"
-			}, [createVNode("span", { style: q.value }, [B.default?.()]), d.closable !== !1 && (d.isCurrent || H.value) ? createVNode("span", { style: "line-height: 0; display: inline-block; text-align: right; padding-top: 2px" }, [createVNode(NButton, {
-				text: !0,
-				onClick: (d) => {
-					d.stopPropagation(), z("close");
-				}
-			}, { default: () => [createVNode(NIcon, { size: 18 }, { default: () => [createVNode("svg", {
-				xmlns: "http://www.w3.org/2000/svg",
-				width: "1em",
-				height: "1em",
-				viewBox: "0 0 24 24"
-			}, [createVNode("path", {
-				fill: "currentColor",
-				d: "m6.4 18.308l-.708-.708l5.6-5.6l-5.6-5.6l.708-.708l5.6 5.6l5.6-5.6l.708.708l-5.6 5.6l5.6 5.6l-.708.708l-5.6-5.6z"
-			}, null)])] })] })]) : void 0])]),
-			createVNode("span", { style: "height: 50%; width: 1px; background: #aaa; display: inline-block; position: absolute; top: 20%; right: -4px; z-index: -3" }, null),
-			createVNode(IBg, { style: J.value }, null)
-		]);
+			style: "position: relative; padding: 0px 0px 0px; cursor: pointer"
+		}, [createVNode("div", { style: "transition: width 300ms; overflow: hidden" }, [createVNode("div", {
+			ref: W,
+			style: ["display: flex; align-items: center; width: fit-content", J.value],
+			class: d.isCurrent ? "bg-[#f0f2f5]" : ""
+		}, [createVNode("span", {
+			class: "whitespace-nowrap",
+			style: q.value
+		}, [B.default?.()]), createVNode("span", { style: "line-height: 0; display: inline-block; text-align: right; padding-top: 2px" }, [createVNode(NButton, {
+			text: !0,
+			onClick: (d) => {
+				d.stopPropagation(), z("close");
+			}
+		}, { default: () => [createVNode(NIcon, { size: 18 }, { default: () => [createVNode("svg", {
+			xmlns: "http://www.w3.org/2000/svg",
+			width: "1em",
+			height: "1em",
+			viewBox: "0 0 24 24"
+		}, [createVNode("path", {
+			fill: "currentColor",
+			d: "m6.4 18.308l-.708-.708l5.6-5.6l-5.6-5.6l.708-.708l5.6 5.6l5.6-5.6l.708.708l-5.6 5.6l5.6 5.6l-.708.708l-5.6-5.6z"
+		}, null)])] })] })])])])]);
 	}
 });
 const AppMultiTabs = /* @__PURE__ */ defineComponent({
@@ -923,33 +887,29 @@ const AppMultiTabs = /* @__PURE__ */ defineComponent({
 		return useContentScroll(Y, Z, J), () => createVNode("div", { style: "width: 100%; height: 100%; overflow: hidden; display: flex; justify-content: space-between" }, [createVNode("div", {
 			ref: Y,
 			style: "flex: 1 1 100%; height: 100%; display: flex; overflow: hidden; align-items: center; position: relative"
-		}, [
-			createVNode("div", { style: "height: 100%; flex: 0 0 16px; z-index: 1; position: sticky; left: 0; backdrop-filter: opacity(0.9) blur(5px)" }, null),
-			createVNode("div", {
-				ref: Z,
-				style: "padding-inline: 12px; flex: 1 1 auto; display: flex; align-items: end; gap: 8px; height: 100%",
-				onContextmenu: (d) => W(d)
-			}, [d.tabs.map((z, V, U) => {
-				let G = d.current?.key === z.key, K = z.title ?? z.path;
-				return createVNode(AppTab, {
-					key: z.key,
-					isCurrent: G,
-					isLast: V === U.length - 1,
-					onClose: z.close,
-					closable: z.closable,
-					dark: d.dark,
-					onClick: () => {
-						G || H.push(z.fullPath);
-					},
-					onContextmenu: (d) => W(d, z)
-				}, { default: () => [B.name ? B.name({
-					isCurrent: G,
-					name: K,
-					tab: z
-				}) : K] });
-			})]),
-			createVNode("div", { style: "height: 100%; flex: 0 0 16px; z-index: 1; position: sticky; right: 0; backdrop-filter: opacity(0.9) blur(5px)" }, null)
-		]), createVNode(NDropdown, {
+		}, [createVNode("div", {
+			ref: Z,
+			style: "flex: 1 1 auto; display: flex; align-items: end; height: 100%",
+			onContextmenu: (d) => W(d)
+		}, [d.tabs.map((z, V, U) => {
+			let G = d.current?.key === z.key, K = z.title ?? z.path;
+			return createVNode(AppTab, {
+				key: z.key,
+				isCurrent: G,
+				isLast: V === U.length - 1,
+				onClose: z.close,
+				closable: z.closable,
+				dark: d.dark,
+				onClick: () => {
+					G || H.push(z.fullPath);
+				},
+				onContextmenu: (d) => W(d, z)
+			}, { default: () => [B.name ? B.name({
+				isCurrent: G,
+				name: K,
+				tab: z
+			}) : K] });
+		})]), createVNode("div", { style: "height: 100%; flex: 0 0 16px; z-index: 1; position: sticky; right: 0; backdrop-filter: opacity(0.9) blur(5px)" }, null)]), createVNode(NDropdown, {
 			placement: "bottom-start",
 			trigger: "manual",
 			show: U.visible,