@well-insight/ui 0.1.7 → 0.1.8

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @well-insight/ui
 
+## 0.1.8
+
+### 新功能
+
+- enhance package exports and sideEffects for improved component management
+
 ## 0.1.7
 
 ### 新功能

package/README.md

@@ -26,7 +26,12 @@ pnpm add @well-insight/ui
 
 ## Quick start
 
-Import styles once at your app entry. Two ways to use components:
+Both **full** and **on-demand** imports are supported — pick one per app.
+
+| | Full | On-demand |
+| --- | --- | --- |
+| Styles | `@well-insight/ui/styles.css` | Bundled with subpath imports |
+| Components | Plugin or named imports from `@well-insight/ui` | `@well-insight/ui/button` etc. |
 
 ### Full registration
 
@@ -37,39 +42,39 @@ import App from './App.vue'
 import '@well-insight/ui/styles.css'
 
 createApp(App).use(WellInsight).mount('#app')
-// or with defaults:
-// createApp(App).use(WellInsight, { size: 'small', density: 'compact' }).mount('#app')
 ```
 
-Templates can then use `<WiButton>` / `<WiInput>` without importing.
+Templates can use `<WiButton>` / `<WiInput>` without importing.
 
-### On-demand import
+### Named imports + full CSS
 
-```ts
-import { createApp } from 'vue'
-import App from './App.vue'
-import '@well-insight/ui/styles.css'
-
-createApp(App).mount('#app')
-```
+Tree-shakeable JS; still import full CSS at entry:
 
 ```vue
 <script setup lang="ts">
-import { ref } from 'vue'
 import { WiButton, WiInput } from '@well-insight/ui'
-
-const name = ref('')
 </script>
+```
 
-<template>
-  <div style="display: grid; gap: 1rem; max-width: 20rem">
-    <WiInput v-model="name" label="Name" placeholder="Enter a name" />
-    <WiButton label="Submit" />
-  </div>
-</template>
+Entry: `import '@well-insight/ui/styles.css'`
+
+### On-demand subpaths
+
+Kebab-case subpaths bundle JS, dependencies, and styles — no full CSS import:
+
+```ts
+import { WiButton } from '@well-insight/ui/button'
+import { WiInput } from '@well-insight/ui/input'
 ```
 
-Tree-shaking friendly: import only what you use from `@well-insight/ui`. Styles are separate — always import `@well-insight/ui/styles.css`.
+### Auto on-demand (Vite)
+
+```ts
+import Components from 'unplugin-vue-components/vite'
+import { WellInsightResolver } from '@well-insight/ui/resolver'
+
+Components({ resolvers: [WellInsightResolver()] })
+```
 
 For a fuller walkthrough, see the docs site [Quick start](./playground/src/docs/guide/quick-start.en.md).
 
@@ -164,7 +169,10 @@ You can still render `<WiMessage />` / `<WiToast />` when you need a controlled
 | Import | Purpose |
 | --- | --- |
 | `@well-insight/ui` | Components, `createWellInsight`, `WiConfigProvider`, theme & locale helpers, `message` / `toast` |
-| `@well-insight/ui/styles.css` | Required stylesheet (tokens + component styles) |
+| `@well-insight/ui/styles.css` | Full stylesheet (tokens + all components) |
+| `@well-insight/ui/button` etc. | On-demand subpath (JS + deps + styles; 88 kebab-case entries) |
+| `@well-insight/ui/button/style` | Styles only (side-effect) for that component |
+| `@well-insight/ui/resolver` | `unplugin-vue-components` resolver |
 
 TypeScript types are included via the package `exports`.
 

package/README.zh-CN.md

@@ -4,12 +4,14 @@
 
 面向 Well Insight 的开源 Vue 3 组件库：带主题的表单、浮层、数据展示与反馈等基础控件。
 
-| | |
-| --- | --- |
-| **npm** | [`@well-insight/ui`](https://www.npmjs.com/package/@well-insight/ui) |
-| **文档** | 本地 `pnpm dev` → http://localhost:5182 |
-| **源码** | [GitHub](https://github.com/well-insight/well-insight-ui) |
-| **更新日志** | [CHANGELOG.md](./CHANGELOG.md) · [English](./CHANGELOG.en.md) |
+
+|          |                                                                      |
+| -------- | -------------------------------------------------------------------- |
+| **npm**  | `[@well-insight/ui](https://www.npmjs.com/package/@well-insight/ui)` |
+| **文档**   | 本地 `pnpm dev` → [http://localhost:5182](http://localhost:5182)       |
+| **源码**   | [GitHub](https://github.com/well-insight/well-insight-ui)            |
+| **更新日志** | [CHANGELOG.md](./CHANGELOG.md) · [English](./CHANGELOG.en.md)        |
+
 
 ## 要求
 
@@ -26,7 +28,16 @@ pnpm add @well-insight/ui
 
 ## 快速开始
 
-在应用入口引入样式。两种用法：
+本库**同时支持全量与按需**，按项目选用（同一应用建议保持一致）。
+
+
+|     | 全量                            | 按需                             |
+| --- | ----------------------------- | ------------------------------ |
+| 样式  | `@well-insight/ui/styles.css` | 子路径自动带入                        |
+| 组件  | 插件注册或桶入口按名 import             | `@well-insight/ui/button` 等子路径 |
+
+
+
 
 ### 全量注册
 
@@ -37,39 +48,41 @@ import App from './App.vue'
 import '@well-insight/ui/styles.css'
 
 createApp(App).use(WellInsight).mount('#app')
-// 或带全局默认：
-// createApp(App).use(WellInsight, { size: 'small', density: 'compact' }).mount('#app')
 ```
 
 之后模板里可直接写 `<WiButton>` / `<WiInput>`，无需再 import。
 
-### 按需引入
-
-```ts
-import { createApp } from 'vue'
-import App from './App.vue'
-import '@well-insight/ui/styles.css'
+### 全量样式 + 按名导入
 
-createApp(App).mount('#app')
-```
+JS 可 tree-shake，样式仍需全量 CSS：
 
 ```vue
 <script setup lang="ts">
-import { ref } from 'vue'
 import { WiButton, WiInput } from '@well-insight/ui'
-
-const name = ref('')
 </script>
+```
+
+入口：`import '@well-insight/ui/styles.css'`
 
-<template>
-  <div style="display: grid; gap: 1rem; max-width: 20rem">
-    <WiInput v-model="name" label="姓名" placeholder="请输入姓名" />
-    <WiButton label="提交" />
-  </div>
-</template>
+### 按需子路径
+
+每个组件有 kebab-case 子路径，自动带上 JS、依赖与样式，无需全量 CSS：
+
+```ts
+import { WiButton } from '@well-insight/ui/button'
+import { WiInput } from '@well-insight/ui/input'
 ```
 
-按需导入支持 Tree-shaking。样式需单独引入 `@well-insight/ui/styles.css`。
+
+
+### 自动按需（Vite）
+
+```ts
+import Components from 'unplugin-vue-components/vite'
+import { WellInsightResolver } from '@well-insight/ui/resolver'
+
+Components({ resolvers: [WellInsightResolver()] })
+```
 
 更完整的上手说明见文档站 [快速上手](./playground/src/docs/guide/quick-start.md)。
 
@@ -98,18 +111,20 @@ createApp(App)
 
 只要配置、不注册组件时传 `components: false`。
 
-| 选项 | 作用 |
-| --- | --- |
-| `appendTo` | 浮层默认 Teleport 目标（默认 `'body'`） |
-| `size` | 控件默认尺寸 |
-| `density` | `compact` / `comfortable` / `spacious` |
-| `inputVariant` | `outlined` / `filled` |
-| `zIndex` | 浮层 z-index 基准 |
-| `locale` | 内置文案（默认 `zhCN`，或 `enUS` / 局部覆盖） |
+
+| 选项             | 作用                                     |
+| -------------- | -------------------------------------- |
+| `appendTo`     | 浮层默认 Teleport 目标（默认 `'body'`）          |
+| `size`         | 控件默认尺寸                                 |
+| `density`      | `compact` / `comfortable` / `spacious` |
+| `inputVariant` | `outlined` / `filled`                  |
+| `zIndex`       | 浮层 z-index 基准                          |
+| `locale`       | 内置文案（默认 `zhCN`，或 `enUS` / 局部覆盖）        |
+
 
 子树覆盖使用 `<WiConfigProvider>`。解析顺序：
 
-**组件 Props → `WiConfigProvider` → `createWellInsight` → 内置默认**
+**组件 Props →** `WiConfigProvider` **→** `createWellInsight` **→ 内置默认**
 
 详见文档站 [全局配置](./playground/src/docs/guide/config.md)。
 
@@ -130,6 +145,8 @@ createWellInsight({
 })
 ```
 
+
+
 ## 主题
 
 亮色 / 暗色 token 与辅助 API 同包导出：
@@ -161,10 +178,15 @@ toast.add({ severity: 'info', summary: '提示', detail: '详情在此' })
 
 ## 导出
 
-| 导入 | 用途 |
-| --- | --- |
-| `@well-insight/ui` | 组件、`createWellInsight`、`WiConfigProvider`、主题与语言、`message` / `toast` |
-| `@well-insight/ui/styles.css` | 必需样式（token + 组件样式） |
+
+| 导入                              | 用途                                                                  |
+| ------------------------------- | ------------------------------------------------------------------- |
+| `@well-insight/ui`              | 组件、`createWellInsight`、`WiConfigProvider`、主题与语言、`message` / `toast` |
+| `@well-insight/ui/styles.css`   | 全量样式（token + 全部组件）                                                  |
+| `@well-insight/ui/button` 等     | 按需组件子路径（JS + 依赖 + 样式；共 88 个 kebab-case 入口）                          |
+| `@well-insight/ui/button/style` | 仅该组件（及依赖）样式 side-effect                                             |
+| `@well-insight/ui/resolver`     | `unplugin-vue-components` 解析器                                       |
+
 
 TypeScript 类型已通过包 `exports` 提供。
 
@@ -183,10 +205,10 @@ pnpm typecheck
 
 ## 可选：MCP
 
-若使用支持 [Model Context Protocol](https://modelcontextprotocol.io/) 的 AI 客户端，可额外接入 [`@well-insight/ui-mcp`](https://www.npmjs.com/package/@well-insight/ui-mcp)，让助手按本库文档检索组件 API。**这不替代** `pnpm add @well-insight/ui`。
+若使用支持 [Model Context Protocol](https://modelcontextprotocol.io/) 的 AI 客户端，可额外接入 `[@well-insight/ui-mcp](https://www.npmjs.com/package/@well-insight/ui-mcp)`，让助手按本库文档检索组件 API。**这不替代** `pnpm add @well-insight/ui`。
 
 说明见文档站 [MCP](./playground/src/docs/guide/mcp.md)。
 
 ## 许可证
 
-MIT
+MIT

package/dist/Button-BZzV1X-d.js

@@ -0,0 +1,156 @@
+import { t as e } from "./Icon-B6gOD07E.js";
+import { o as t } from "./config-DWwce9jA.js";
+import { Comment as n, Fragment as r, Text as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, defineComponent as d, normalizeClass as f, normalizeStyle as p, openBlock as m, ref as h, renderSlot as g, resolveDynamicComponent as _, toDisplayString as v, useSlots as y } from "vue";
+//#region src/components/Button/Button.vue?vue&type=script&setup=true&lang.ts
+var b = [
+	"type",
+	"disabled",
+	"autofocus",
+	"aria-busy",
+	"aria-label"
+], x = {
+	key: 1,
+	class: "wi-button__label"
+}, S = /* @__PURE__ */ d({
+	__name: "Button",
+	props: {
+		label: {},
+		icon: {},
+		iconPos: { default: "left" },
+		iconOnly: {
+			type: Boolean,
+			default: !1
+		},
+		severity: {},
+		color: {},
+		raised: {
+			type: Boolean,
+			default: !1
+		},
+		rounded: {
+			type: Boolean,
+			default: !1
+		},
+		text: {
+			type: Boolean,
+			default: !1
+		},
+		outlined: {
+			type: Boolean,
+			default: !1
+		},
+		link: {
+			type: Boolean,
+			default: !1
+		},
+		ghost: {
+			type: Boolean,
+			default: !1
+		},
+		quaternary: {
+			type: Boolean,
+			default: !1
+		},
+		plain: {
+			type: Boolean,
+			default: !1
+		},
+		variant: {},
+		size: {},
+		fluid: {
+			type: Boolean,
+			default: !1
+		},
+		block: {
+			type: Boolean,
+			default: !1
+		},
+		loading: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		badge: {},
+		badgeSeverity: { default: null },
+		autofocus: {
+			type: Boolean,
+			default: !1
+		},
+		nativeType: { default: "button" },
+		ariaLabel: {}
+	},
+	emits: ["click"],
+	setup(d, { expose: S, emit: C }) {
+		let w = d, T = C, E = y(), D = h(null), O = a(() => !!E.default?.().some((e) => W(e))), k = a(() => O.value || !!w.label?.trim()), A = a(() => w.outlined || w.variant === "outlined"), j = a(() => w.text || w.variant === "text"), M = a(() => w.link || w.variant === "link"), N = a(() => w.ghost || w.variant === "ghost"), P = a(() => w.quaternary || w.variant === "quaternary"), F = a(() => w.fluid || w.block), I = t("Button", () => w.size), L = a(() => w.iconOnly || !k.value && !!(w.icon || E.icon || w.loading)), R = a(() => w.severity ?? "primary"), z = a(() => typeof w.icon == "string" ? w.icon : void 0), B = a(() => typeof w.icon == "string" || !w.icon ? void 0 : w.icon), V = a(() => [
+			"wi-button",
+			`wi-button--${R.value}`,
+			`wi-button--${I.value}`,
+			`wi-button--icon-${w.iconPos}`,
+			{
+				"wi-button--raised": w.raised,
+				"wi-button--rounded": w.rounded,
+				"wi-button--text": j.value,
+				"wi-button--outlined": A.value,
+				"wi-button--link": M.value,
+				"wi-button--ghost": N.value,
+				"wi-button--quaternary": P.value,
+				"wi-button--plain": w.plain,
+				"wi-button--fluid": F.value,
+				"wi-button--loading": w.loading,
+				"wi-button--icon-only": L.value,
+				"wi-button--custom": !!w.color
+			}
+		]), H = a(() => w.color ? { "--wi-button-color": w.color } : void 0), U = a(() => ["wi-button__badge", w.badgeSeverity ? `wi-button__badge--${w.badgeSeverity}` : "wi-button__badge--contrast"]);
+		function W(e) {
+			if (e == null || typeof e == "boolean") return !1;
+			if (typeof e == "string" || typeof e == "number") return String(e).trim().length > 0;
+			if (Array.isArray(e)) return e.some((e) => W(e));
+			if (typeof e == "object" && "type" in e) {
+				let t = e;
+				return t.type === n ? !1 : t.type === i ? String(t.children ?? "").trim().length > 0 : t.type !== r || W(t.children);
+			}
+			return !1;
+		}
+		function G(e) {
+			w.disabled || w.loading || T("click", e);
+		}
+		function K() {
+			D.value?.focus();
+		}
+		return S({
+			focus: K,
+			ref: D
+		}), (t, n) => (m(), c("button", {
+			ref_key: "buttonElement",
+			ref: D,
+			class: f(V.value),
+			style: p(H.value),
+			type: d.nativeType,
+			disabled: d.disabled || d.loading,
+			autofocus: d.autofocus || void 0,
+			"aria-busy": d.loading || void 0,
+			"aria-label": d.ariaLabel || (L.value ? d.label : void 0),
+			onClick: G
+		}, [
+			d.loading || d.icon || t.$slots.icon ? (m(), c("span", {
+				key: 0,
+				class: f(["wi-button__icon", { "wi-button__icon--loading": d.loading }]),
+				"aria-hidden": "true"
+			}, [d.loading ? g(t.$slots, "loadingicon", {}, () => [n[0] ||= l("span", { class: "wi-button__spinner" }, null, -1)], void 0, 0) : g(t.$slots, "icon", { class: f("wi-button__icon-slot") }, () => [z.value ? (m(), o(e, {
+				key: 0,
+				name: z.value,
+				size: "sm"
+			}, null, 8, ["name"])) : B.value ? (m(), o(_(B.value), { key: 1 })) : s("", !0)], void 0, 1)], 2)) : s("", !0),
+			k.value && !d.iconOnly ? (m(), c("span", x, [g(t.$slots, "default", {}, () => [u(v(d.label), 1)])])) : s("", !0),
+			d.badge != null && d.badge !== "" ? (m(), c("span", {
+				key: 2,
+				class: f(U.value)
+			}, v(d.badge), 3)) : s("", !0)
+		], 14, b));
+	}
+});
+//#endregion
+export { S as t };

package/dist/Checkbox-BtgWgkHI.js

@@ -0,0 +1,107 @@
+import { o as e } from "./config-DWwce9jA.js";
+import { computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, defineComponent as o, inject as s, mergeProps as c, normalizeClass as l, openBlock as u, renderSlot as d, toDisplayString as f, unref as p, useAttrs as m } from "vue";
+//#region src/components/Checkbox/types.ts
+var h = Symbol("wiCheckboxGroup"), g = ["for"], _ = [
+	"id",
+	"name",
+	"value",
+	"checked",
+	"indeterminate",
+	"disabled",
+	"required",
+	"aria-invalid",
+	"aria-checked"
+], v = {
+	class: "wi-checkbox__control",
+	"aria-hidden": "true"
+}, y = {
+	viewBox: "0 0 16 16",
+	focusable: "false"
+}, b = {
+	key: 0,
+	d: "M4 8h8"
+}, x = {
+	key: 1,
+	d: "m3.5 8.5 3 3 6-7"
+}, S = {
+	key: 0,
+	class: "wi-checkbox__label"
+}, C = /* @__PURE__ */ o({
+	inheritAttrs: !1,
+	__name: "Checkbox",
+	props: {
+		modelValue: {
+			type: Boolean,
+			default: !1
+		},
+		label: {},
+		id: {},
+		name: {},
+		value: { type: [
+			String,
+			Number,
+			Boolean
+		] },
+		indeterminate: {
+			type: Boolean,
+			default: !1
+		},
+		size: {},
+		invalid: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		required: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	emits: ["update:modelValue"],
+	setup(o, { emit: C }) {
+		let w = m(), T = o, E = C, D = s(h, null), O = t(() => T.id ?? `wi-checkbox-${Math.random().toString(36).slice(2, 8)}`), k = e("Checkbox", () => T.size ?? D?.size.value), A = t(() => T.disabled || !!D?.disabled.value), j = t(() => T.invalid || !!D?.invalid.value), M = t(() => T.name ?? D?.name.value), N = t(() => D != null && T.value !== void 0), P = t(() => N.value ? D.modelValue.value.includes(T.value) : T.modelValue), F = t(() => [
+			"wi-checkbox",
+			`wi-checkbox--${k.value}`,
+			{
+				"wi-checkbox--disabled": A.value,
+				"wi-checkbox--invalid": j.value,
+				"wi-checkbox--indeterminate": T.indeterminate
+			}
+		]);
+		function I(e) {
+			if (A.value) return;
+			let t = e.target.checked;
+			if (N.value) {
+				D.toggle(T.value, t);
+				return;
+			}
+			E("update:modelValue", t);
+		}
+		return (e, t) => (u(), r("label", {
+			class: l(F.value),
+			for: O.value
+		}, [
+			i("input", c(p(w), {
+				id: O.value,
+				class: "wi-checkbox__input",
+				type: "checkbox",
+				name: M.value,
+				value: o.value == null ? void 0 : String(o.value),
+				checked: P.value,
+				indeterminate: o.indeterminate,
+				disabled: A.value,
+				required: o.required,
+				"aria-invalid": j.value || void 0,
+				"aria-checked": o.indeterminate ? "mixed" : P.value,
+				onChange: I
+			}), null, 16, _),
+			i("span", v, [(u(), r("svg", y, [o.indeterminate ? (u(), r("path", b)) : (u(), r("path", x))]))]),
+			o.label || e.$slots.default ? (u(), r("span", S, [d(e.$slots, "default", {}, () => [a(f(o.label), 1)])])) : n("", !0)
+		], 10, g));
+	}
+});
+//#endregion
+export { h as n, C as t };