@yeepay/yee-boss-ui 0.1.18 → 0.1.19

package/README.md

@@ -37,7 +37,7 @@ pnpm add @yeepay/yee-boss-ui ant-design-vue vue
 
 ## 使用
 
-根入口适合兼容已有接入；它会导出全部公共组件。新页面建议使用下方的 feature entry，让 bundler 只加载实际使用的功能。
+组件库同时支持根入口的按需导入和全量导入。根入口按名称导入时，ESM bundler 会通过 tree-shaking 移除未使用组件。
 
 ```vue
 <script setup lang="ts">
@@ -61,24 +61,54 @@ const theme: PlatformTheme = {
 
 Portal 负责决定当前主题并通过 Runtime Context 传给子应用；组件库只负责映射和消费。语言与 locale 继续由应用国际化层负责。
 
+### 全量引入
+
+如果希望一次注册全部公开组件，可以使用插件形式：
+
+```ts
+import { createApp } from 'vue'
+import YeeBossUI from '@yeepay/yee-boss-ui'
+import '@yeepay/yee-boss-ui/style.css'
+
+createApp(App).use(YeeBossUI).mount('#app')
+```
+
+组件库会自动注册 `YeeAppShell`、`YeeDescriptions`、`YeeEllipsisText`、`YeeFileUpload`、`YeeForm`、`YeeModal`、`YeePage`、`YeeSelect` 以及应用壳层组件。`useYeeGrid` 仍按组合式 API 使用，首次调用时会由组件库自动加载 Grid 样式。
+
+如果只希望在脚本中使用全部导出，也可以从包根入口统一导入：
+
+```ts
+import {
+  PlatformConfigProvider,
+  YeeAppShell,
+  YeeDescriptions,
+  YeeEllipsisText,
+  YeeFileUpload,
+  YeeForm,
+  YeeFormApi,
+  YeeHeader,
+  YeeModal,
+  YeePage,
+  YeeSelect,
+  YeeSidebar,
+  YeeTabs,
+  useYeeGrid,
+} from '@yeepay/yee-boss-ui'
+```
+
+根入口导出全部公共组件和公共类型；VXE 由 `yee-boss-ui` 作为运行时依赖提供，不需要业务项目重复声明。按需和全量场景都只需要引入 `@yeepay/yee-boss-ui/style.css`。
+
 ### 按需引入
 
-根入口保留完整 API 兼容性；业务项目如果只使用部分能力，建议使用对应的 feature entry，避免把未使用的 Grid/VXE 代码带入页面：
+页面只使用少量能力、需要减少初始体积时，从根入口只导入实际使用的组件：
 
 ```ts
-import { YeeAppShell, YeeHeader, YeeSidebar, YeeTabs } from '@yeepay/yee-boss-ui/app-shell'
-import { PlatformConfigProvider } from '@yeepay/yee-boss-ui/core'
-import { YeeDescriptions } from '@yeepay/yee-boss-ui/descriptions'
-import { YeeEllipsisText } from '@yeepay/yee-boss-ui/ellipsis-text'
-import { YeeFileUpload } from '@yeepay/yee-boss-ui/file-upload'
-import { YeeForm, YeeFormApi } from '@yeepay/yee-boss-ui/form'
-import { useYeeGrid } from '@yeepay/yee-boss-ui/grid'
-import { YeeModal } from '@yeepay/yee-boss-ui/modal'
-import { YeePage } from '@yeepay/yee-boss-ui/page'
-import { YeeSelect } from '@yeepay/yee-boss-ui/select'
+import { YeeModal, YeePage, YeeSelect } from '@yeepay/yee-boss-ui'
+import type { YeeSelectOption } from '@yeepay/yee-boss-ui'
+import '@yeepay/yee-boss-ui/style.css'
 ```
 
-`@yeepay/yee-boss-ui/grid` 仅在页面确实使用 `YeeGrid` 时引入；VXE 由 `yee-boss-ui` 作为运行时依赖提供，不需要业务项目重复声明。`app-shell`、`core` 及其它入口不会主动加载 Grid/VXE。所有入口共用 `@yeepay/yee-boss-ui/style.css`。
+`style.css` 是唯一需要业务引入的组件样式入口。`useYeeGrid()` 首次执行时，组件库会自动加载内部 Grid 样式；业务不需要区分或引入其它样式文件。
 
 ### 应用壳层
 
@@ -92,7 +122,7 @@ import {
   YeeHeader,
   YeeSidebar,
   YeeTabs,
-} from '@yeepay/yee-boss-ui/app-shell'
+} from '@yeepay/yee-boss-ui'
 
 const sidebarCollapsed = shallowRef(false)
 const activeTab = shallowRef('overview')
@@ -142,7 +172,7 @@ const tabs = [
 ```vue
 <script setup lang="ts">
 import { shallowRef } from 'vue'
-import type { YeeTabsExpose } from '@yeepay/yee-boss-ui/app-shell'
+import type { YeeTabsExpose } from '@yeepay/yee-boss-ui'
 
 const tabsRef = shallowRef<YeeTabsExpose>()
 </script>
@@ -159,13 +189,13 @@ const tabsRef = shallowRef<YeeTabsExpose>()
 
 `YeeTabItem.pinned` 表示固定状态；固定标签不能关闭或拖拽，组件展示和 `getTabs` 返回值都会将固定标签置于未固定标签之前。实例方法包括 `activateTab`、`closeTab`、`closeLeftTabs`、`closeRightTabs`、`closeOtherTabs`、`closeAllTabs`、`getTabs`、`getTab`、`pinTab`、`refreshTab` 和 `openTabInNewWindow`。方法只发出操作事件并返回是否找到目标标签，标签数组和路由状态仍由调用方维护。
 
-只需要公共主题、不使用组件时，可以只引入：
+即使只需要公共主题、不使用组件，也只引入统一样式入口：
 
 ```ts
-import '@yeepay/yee-boss-ui/theme.css'
+import '@yeepay/yee-boss-ui/style.css'
 ```
 
-`theme.css` 在 `:root` 提供 light 默认值，并同时支持 `html.dark` 和 `[data-theme="dark"]`。Portal 需要在根节点同步主题标识；子应用不自行维护另一套主题变量。
+`style.css` 同时包含主题变量和公共组件样式，并在 `:root` 提供 light 默认值，同时支持 `html.dark` 和 `[data-theme="dark"]`。Portal 需要在根节点同步主题标识；子应用不自行维护另一套主题变量。
 
 所有公共变量统一使用 `--yee-*`，例如：
 
@@ -182,7 +212,7 @@ import '@yeepay/yee-boss-ui/theme.css'
 
 ## TypeScript 类型
 
-组件的公共类型可以从包根入口或对应的 feature entry 导入。命名统一使用 `组件名 + Props / Emits / Slots`；存在组件实例方法时额外提供 `Expose`，例如 `YeeFileUploadExpose`。公共字段带中文 JSDoc，业务项目在编写 Props、监听事件、使用插槽或组件 `ref` 时可以直接获得 IDE 提示。
+组件的公共类型统一从包根入口导入。命名统一使用 `组件名 + Props / Emits / Slots`；存在组件实例方法时额外提供 `Expose`，例如 `YeeFileUploadExpose`。公共字段带中文 JSDoc，业务项目在编写 Props、监听事件、使用插槽或组件 `ref` 时可以直接获得 IDE 提示。
 
 ```ts
 import type {
@@ -258,7 +288,7 @@ export default {
 自动上传模式通过回调接入项目统一请求层：
 
 ```ts
-import type { YeeUploadRequestOptions } from '@yeepay/yee-boss-ui/file-upload'
+import type { YeeUploadRequestOptions } from '@yeepay/yee-boss-ui'
 
 async function uploadFile(options: YeeUploadRequestOptions): Promise<void> {
   try {
@@ -281,7 +311,7 @@ import {
   type YeeFileSelectPayload,
   type YeeFileUploadExpose,
   type YeeUploadFile,
-} from '@yeepay/yee-boss-ui/file-upload'
+} from '@yeepay/yee-boss-ui'
 
 const uploadRef = shallowRef<YeeFileUploadExpose>()
 const fileList = shallowRef<YeeUploadFile[]>([])
@@ -316,7 +346,7 @@ async function handleFileSelect({ file, uid }: YeeFileSelectPayload): Promise<vo
 ```vue
 <script setup lang="ts">
 import { shallowRef } from 'vue'
-import { YeeModal } from '@yeepay/yee-boss-ui/modal'
+import { YeeModal } from '@yeepay/yee-boss-ui'
 
 const open = shallowRef(false)
 const submitting = shallowRef(false)
@@ -359,7 +389,7 @@ import {
   type YeeSelectExpose,
   type YeeSelectOption,
   type YeeSelectValue,
-} from '@yeepay/yee-boss-ui/select'
+} from '@yeepay/yee-boss-ui'
 
 const status = shallowRef<YeeSelectValue>()
 const selectRef = shallowRef<YeeSelectExpose>()
@@ -405,7 +435,7 @@ import {
   YeeForm,
   YeeFormApi,
   type YeeFormOptions,
-} from '@yeepay/yee-boss-ui/form'
+} from '@yeepay/yee-boss-ui'
 
 interface QueryValues {
   channel?: 'OFFLINE' | 'ONLINE'
@@ -461,14 +491,12 @@ function query(values: QueryValues): void {
 
 `YeeGrid` 在普通 `YeePage` 或未使用 `YeePage` 时按表格内容自然撑高；放在开启 `auto-content-height` 的 `YeePage` 中时会自动占满查询表单之后的剩余高度，工具栏和分页器固定在可用区域内，数据超出后由表格内部滚动。表头和单元格内容超出时默认省略并提供 Tooltip；列宽默认允许拖拽调整，可通过 `gridOptions.columnConfig.resizable: false` 关闭。显式传入 `gridOptions.height` 时仍以该配置为准。
 
-VXE Grid 样式已随公共 `style.css` 一起发布。使用 `YeeGrid` 或 `useYeeGrid` 时只需引入 `style.css`，无需额外加载样式文件。
+`style.css` 提供公共主题和组件样式；使用 `YeeGrid` 或 `useYeeGrid` 时，组件库会在运行时自动加载内部 VXE Grid 样式。
 
 ```vue
 <script setup lang="ts">
-import type { YeeFormOptions } from '@yeepay/yee-boss-ui/form'
-import type { YeeGridOptions } from '@yeepay/yee-boss-ui/grid'
-import { useYeeGrid } from '@yeepay/yee-boss-ui/grid'
-import { YeePage } from '@yeepay/yee-boss-ui/page'
+import type { YeeFormOptions, YeeGridOptions } from '@yeepay/yee-boss-ui'
+import { useYeeGrid, YeePage } from '@yeepay/yee-boss-ui'
 
 interface OrderItem {
   orderNo: string

package/dist/YeeForm-COND7XQj.js

@@ -0,0 +1,160 @@
+import { defineComponent as O, shallowRef as m, computed as p, onMounted as U, nextTick as D, onBeforeUnmount as z, openBlock as i, createElementBlock as d, withModifiers as L, createElementVNode as f, Fragment as G, renderList as K, toDisplayString as R, renderSlot as $, createBlock as F, resolveDynamicComponent as A, mergeProps as j, createCommentVNode as V, createVNode as x, unref as v, withCtx as y, createTextVNode as h } from "vue";
+import { TreeSelect as q, TimeRangePicker as H, TimePicker as J, Textarea as Q, Switch as W, Slider as X, Select as Z, Segmented as ee, Rate as te, RangePicker as oe, RadioGroup as ne, Radio as ae, Mentions as ie, InputPassword as le, InputNumber as re, Input as se, DatePicker as ue, CheckboxGroup as ce, Checkbox as me, Cascader as pe, AutoComplete as de, Button as C } from "ant-design-vue";
+import { Y as fe } from "./YeeFileUpload-BUFoWs8x.js";
+import { _ as ve } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const ye = {
+  AutoComplete: de,
+  Cascader: pe,
+  Checkbox: me,
+  CheckboxGroup: ce,
+  DatePicker: ue,
+  Input: se,
+  InputNumber: re,
+  InputPassword: le,
+  Mentions: ie,
+  Radio: ae,
+  RadioGroup: ne,
+  RangePicker: oe,
+  Rate: te,
+  Segmented: ee,
+  Select: Z,
+  Slider: X,
+  Switch: W,
+  Textarea: Q,
+  TimePicker: J,
+  TimeRangePicker: H,
+  TreeSelect: q,
+  Upload: fe
+}, he = {
+  Checkbox: "checked",
+  Radio: "checked",
+  Switch: "checked",
+  Upload: "fileList"
+}, Ce = { class: "yee-ui-form__label" }, ge = { class: "yee-ui-form__actions" }, ke = /* @__PURE__ */ O({
+  name: "YeeForm",
+  __name: "YeeForm",
+  props: {
+    api: {},
+    onReset: { type: Function },
+    onSubmit: { type: Function },
+    options: {}
+  },
+  setup(r) {
+    const t = r, a = m(t.options.collapsed ?? !0), g = m(3), l = m(null);
+    let s;
+    t.api.configure(t.options);
+    const k = p(() => t.api.schema.value.filter((e) => !e.hide)), B = p(() => Math.max(1, t.options.collapsedRows ?? 1) * g.value), P = p(() => !t.options.showCollapseButton || !a.value ? k.value : k.value.slice(0, B.value));
+    function b() {
+      const e = l.value;
+      if (!e) return;
+      const n = getComputedStyle(e).gridTemplateColumns.split(" ").map((o) => o.trim()).filter(Boolean);
+      n.length > 0 && (g.value = n.length);
+    }
+    U(async () => {
+      await D(), b(), typeof ResizeObserver < "u" && l.value && (s = new ResizeObserver(b), s.observe(l.value));
+    }), z(() => {
+      s?.disconnect();
+    });
+    function _(e) {
+      return t.api.getFieldValue(e.fieldName);
+    }
+    function w(e) {
+      return e !== "Custom";
+    }
+    function N(e) {
+      return w(e.component) ? ye[e.component] : void 0;
+    }
+    function M(e) {
+      return w(e.component) ? he[e.component] ?? "value" : "value";
+    }
+    function T(e) {
+      const n = _(e), o = M(e);
+      return {
+        ...e.componentProps,
+        ...n === void 0 ? {} : { [o]: n },
+        [`onUpdate:${o}`]: (c) => S(e, c)
+      };
+    }
+    function S(e, n) {
+      t.api.setFieldValue(
+        e.fieldName,
+        n
+      ), t.options.submitOnChange && u();
+    }
+    async function E() {
+      t.api.resetForm(), await t.onReset?.();
+    }
+    async function u() {
+      await t.onSubmit?.(t.api.getValues());
+    }
+    function Y(e) {
+      e.key === "Enter" && t.options.submitOnEnter && (e.preventDefault(), u());
+    }
+    function I() {
+      a.value = !a.value, t.options.handleCollapsedChange?.(a.value);
+    }
+    return (e, n) => (i(), d("form", {
+      class: "yee-ui-form",
+      onKeydown: Y,
+      onSubmit: L(u, ["prevent"])
+    }, [
+      f("div", {
+        ref_key: "fieldsElement",
+        ref: l,
+        class: "yee-ui-form__fields"
+      }, [
+        (i(!0), d(G, null, K(P.value, (o) => (i(), d("label", {
+          key: o.fieldName,
+          class: "yee-ui-form__field"
+        }, [
+          f("span", Ce, R(o.label), 1),
+          $(e.$slots, o.fieldName, {
+            field: o,
+            setValue: (c) => S(o, c),
+            value: _(o),
+            values: r.api.getValues()
+          }, () => [
+            o.component !== "Custom" ? (i(), F(A(N(o)), j({
+              key: 0,
+              ref_for: !0
+            }, T(o)), null, 16)) : V("", !0)
+          ], !0)
+        ]))), 128))
+      ], 512),
+      f("div", ge, [
+        x(v(C), {
+          "html-type": "button",
+          onClick: E
+        }, {
+          default: y(() => [...n[0] || (n[0] = [
+            h(" 重置 ", -1)
+          ])]),
+          _: 1
+        }),
+        x(v(C), {
+          type: "primary",
+          "html-type": "submit"
+        }, {
+          default: y(() => [...n[1] || (n[1] = [
+            h(" 查询 ", -1)
+          ])]),
+          _: 1
+        }),
+        r.options.showCollapseButton ? (i(), F(v(C), {
+          key: 0,
+          type: "link",
+          "html-type": "button",
+          onClick: I
+        }, {
+          default: y(() => [
+            h(R(a.value ? "展开" : "收起"), 1)
+          ]),
+          _: 1
+        })) : V("", !0)
+      ])
+    ], 32));
+  }
+}), Re = /* @__PURE__ */ ve(ke, [["__scopeId", "data-v-13cadc25"]]);
+export {
+  Re as Y
+};