@yeepay/yee-boss-ui 0.1.16 → 0.1.18

package/README.md

@@ -19,18 +19,26 @@
 - `YeeFileUpload` 业务无关的文件选择与上传生命周期。
 - `YeeModal` 统一的 Modal / Drawer 容器。
 - `YeeSelect` 带完整文案提示的选择器。
+- `YeeAppShell`、`YeeHeader`、`YeeSidebar` 应用壳层布局。
+- `YeeMenu` 路由菜单样式与 `YeeTabs` 标签栏样式。
 - Tailwind CSS 语义主题 preset。
 
-不提供主题切换器、业务组件或对 Ant Design Vue 基础组件的机械封装，也不依赖任何 `@vben-*` 包。
+不提供业务组件或对 Ant Design Vue 基础组件的机械封装，也不依赖任何 `@vben-*` 包。
 
 ## 安装
 
+基础组件和应用壳层：
+
 ```bash
-pnpm add @yeepay/yee-boss-ui ant-design-vue vue vxe-table vxe-pc-ui
+pnpm add @yeepay/yee-boss-ui ant-design-vue vue
 ```
 
+`yee-boss-ui` 会自动安装 `YeeGrid` 所需的 VXE 运行时依赖。
+
 ## 使用
 
+根入口适合兼容已有接入；它会导出全部公共组件。新页面建议使用下方的 feature entry，让 bundler 只加载实际使用的功能。
+
 ```vue
 <script setup lang="ts">
 import {
@@ -53,6 +61,104 @@ const theme: PlatformTheme = {
 
 Portal 负责决定当前主题并通过 Runtime Context 传给子应用；组件库只负责映射和消费。语言与 locale 继续由应用国际化层负责。
 
+### 按需引入
+
+根入口保留完整 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'
+```
+
+`@yeepay/yee-boss-ui/grid` 仅在页面确实使用 `YeeGrid` 时引入；VXE 由 `yee-boss-ui` 作为运行时依赖提供，不需要业务项目重复声明。`app-shell`、`core` 及其它入口不会主动加载 Grid/VXE。所有入口共用 `@yeepay/yee-boss-ui/style.css`。
+
+### 应用壳层
+
+应用壳层只提供布局和展示状态，不读取路由、权限、用户 Store 或 Wujie 上下文。菜单权限、路由跳转、标签增删、刷新、主题切换、全屏和用户操作由应用处理，再通过 Props、Events 和插槽接入。
+
+```vue
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+import {
+  YeeAppShell,
+  YeeHeader,
+  YeeSidebar,
+  YeeTabs,
+} from '@yeepay/yee-boss-ui/app-shell'
+
+const sidebarCollapsed = shallowRef(false)
+const activeTab = shallowRef('overview')
+const menuItems = [
+  { key: 'overview', label: '概览' },
+  { key: 'settings', label: '系统设置' },
+]
+const tabs = [
+  { key: 'overview', label: '概览', closable: false },
+  { key: 'settings', label: '系统设置' },
+]
+</script>
+
+<template>
+  <YeeAppShell v-model:sidebar-collapsed="sidebarCollapsed">
+    <template #header>
+      <YeeHeader
+        v-model:sidebar-collapsed="sidebarCollapsed"
+        title="运营管理平台"
+      >
+        <template #content>
+          <YeeTabs v-model:active-key="activeTab" :items="tabs" />
+        </template>
+        <template #actions>
+          <!-- 可在默认刷新、主题、全屏按钮后追加用户模块等自定义内容。 -->
+        </template>
+      </YeeHeader>
+    </template>
+
+    <template #sidebar>
+      <YeeSidebar
+        v-model:collapsed="sidebarCollapsed"
+        :items="menuItems"
+        :selected-keys="[activeTab]"
+      />
+    </template>
+
+    <RouterView />
+  </YeeAppShell>
+</template>
+```
+
+`YeeSidebar` 的默认插槽是菜单区域，未提供时自动渲染 `YeeMenu`；需要替换或扩展菜单内容时可以使用默认插槽。`YeeMenu` 同一时间只展开当前父级菜单，打开新的父级菜单会自动收起其它父级菜单；受控或未受控模式下，选中子项都会自动展开其父级。菜单项点击会触发 `click` 事件，菜单选中变化仍触发 `select` 事件，因此重复点击当前选中项也可以由业务层处理。`extra` 插槽固定在菜单区域底部，可放帮助入口、版本信息或快捷操作。`YeeHeader` 的 `brand` 插槽可以完整替换左侧品牌区域；不需要完全接管时，可以单独使用 `logo` 和 `title` 插槽覆盖默认 Logo 或标题。`content` 插槽位于 Sidebar 按钮右侧，用于放置 `YeeTabs` 或任意自定义内容；`actions` 插槽用于在默认操作后追加用户模块等内容。Header 默认提供刷新、主题切换和全屏按钮，可通过 `showRefresh`、`showThemeToggle`、`showFullscreen` 关闭对应按钮；刷新通过 `refresh` 事件通知应用，主题通过 `themeMode` 属性和 `theme-change` 事件与 `PlatformConfigProvider` 的受控主题状态连接，全屏由 Header 管理浏览器 Fullscreen API，并通过 `fullscreen-change` 事件同步状态。默认 Sidebar 宽度为 `224px`，收起宽度为 `64px`；在 `YeeAppShell` 内由 Shell 统一控制，单独使用 `YeeHeader` 或 `YeeSidebar` 时再使用它们各自的尺寸 Props。
+
+`YeeTabs` 固定使用 Vben 风格的卡片式标签样式，支持图标、固定/取消固定、关闭按钮、鼠标滚轮横向滚动、溢出时的左右滚动按钮、激活标签自动定位、中键关闭和桌面端拖拽排序。固定标签始终显示在未固定标签之前，各组内保持调用方传入的相对顺序。标签支持右键菜单，组件右侧也提供同一套更多操作菜单，默认包含关闭、固定/取消固定、刷新、在新窗口打开、关闭左右侧、关闭其它和关闭全部；可以通过 `contextMenus` 按标签和上下文自定义菜单，或通过 `:show-actions="false"` 隐藏右侧菜单。刷新只通过 `refresh` 事件通知应用，组件不自行重新加载页面。组件不直接修改调用方的路由或标签列表，菜单操作、固定状态和排序都通过事件交给应用处理；需要在其它业务入口触发相同操作时，可以使用组件 ref 调用 `YeeTabsExpose`：
+
+```vue
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+import type { YeeTabsExpose } from '@yeepay/yee-boss-ui/app-shell'
+
+const tabsRef = shallowRef<YeeTabsExpose>()
+</script>
+
+<template>
+  <YeeTabs ref="tabsRef" :items="tabs" v-model:active-key="activeKey"
+    :draggable="true" :middle-click-to-close="true"
+    @close="handleClose" @close-left="handleCloseLeft"
+    @close-right="handleCloseRight" @close-others="handleCloseOthers"
+    @close-all="handleCloseAll" @pin="handlePin" @sort-tabs="handleSort"
+    @refresh="handleRefresh" @open-in-new-window="handleOpen" />
+</template>
+```
+
+`YeeTabItem.pinned` 表示固定状态；固定标签不能关闭或拖拽，组件展示和 `getTabs` 返回值都会将固定标签置于未固定标签之前。实例方法包括 `activateTab`、`closeTab`、`closeLeftTabs`、`closeRightTabs`、`closeOtherTabs`、`closeAllTabs`、`getTabs`、`getTab`、`pinTab`、`refreshTab` 和 `openTabInNewWindow`。方法只发出操作事件并返回是否找到目标标签，标签数组和路由状态仍由调用方维护。
+
 只需要公共主题、不使用组件时，可以只引入：
 
 ```ts
@@ -76,7 +182,7 @@ import '@yeepay/yee-boss-ui/theme.css'
 
 ## TypeScript 类型
 
-组件的公共类型都可以从包根入口导入。命名统一使用 `组件名 + Props / Emits / Slots`；存在组件实例方法时额外提供 `Expose`，例如 `YeeFileUploadExpose`。公共字段带中文 JSDoc，业务项目在编写 Props、监听事件、使用插槽或组件 `ref` 时可以直接获得 IDE 提示。
+组件的公共类型可以从包根入口或对应的 feature entry 导入。命名统一使用 `组件名 + Props / Emits / Slots`；存在组件实例方法时额外提供 `Expose`，例如 `YeeFileUploadExpose`。公共字段带中文 JSDoc，业务项目在编写 Props、监听事件、使用插槽或组件 `ref` 时可以直接获得 IDE 提示。
 
 ```ts
 import type {
@@ -152,7 +258,7 @@ export default {
 自动上传模式通过回调接入项目统一请求层：
 
 ```ts
-import type { YeeUploadRequestOptions } from '@yeepay/yee-boss-ui'
+import type { YeeUploadRequestOptions } from '@yeepay/yee-boss-ui/file-upload'
 
 async function uploadFile(options: YeeUploadRequestOptions): Promise<void> {
   try {
@@ -175,7 +281,7 @@ import {
   type YeeFileSelectPayload,
   type YeeFileUploadExpose,
   type YeeUploadFile,
-} from '@yeepay/yee-boss-ui'
+} from '@yeepay/yee-boss-ui/file-upload'
 
 const uploadRef = shallowRef<YeeFileUploadExpose>()
 const fileList = shallowRef<YeeUploadFile[]>([])
@@ -203,47 +309,6 @@ async function handleFileSelect({ file, uid }: YeeFileSelectPayload): Promise<vo
 
 组件实例还提供 `getFiles()`，用于读取当前列表中的原始 `File[]`。
 
-### YeeFilePreview
-
-`YeeFilePreview` 不依赖业务请求层，支持传入文件地址、`Blob`、`File` 或 `ArrayBuffer`。解析器由组件库统一提供，并按文件类型动态加载；消费者不需要额外安装 `xlsx`、`docx-preview`、`postal-mime` 等解析依赖。
-
-```vue
-<script setup lang="ts">
-import { ref } from 'vue'
-import {
-  YeeFilePreview,
-  type YeeFilePreviewError,
-  type YeeFilePreviewLoadResult,
-} from '@yeepay/yee-boss-ui'
-
-const source = ref<string | Blob>('https://example.com/report.pdf')
-
-function handlePreviewLoad(result: YeeFilePreviewLoadResult): void {
-  console.info(result.kind, result.fileName)
-}
-
-function handlePreviewError(error: YeeFilePreviewError): void {
-  console.error(error.message)
-}
-</script>
-
-<template>
-  <YeeFilePreview
-    :source="source"
-    :max-file-size="50 * 1024 * 1024"
-    height="640"
-    @error="handlePreviewError"
-    @load="handlePreviewLoad"
-  />
-</template>
-```
-
-`source` 也可以直接传入 `Blob`、`File` 或 `ArrayBuffer`；需要兼容只提供地址的调用方时，可以使用 `url`。通常组件会根据文件名或 MIME 类型识别格式，也可以通过 `file-name`、`file-type` 显式指定。
-
-当前支持图片、PDF、文本、JSON、XML、CSV、Markdown、HTML、音视频、DOCX、XLS/XLSX 和 EML。EML 会解析正文及 `cid:` 内嵌图片；DOCX 和 Excel 属于基础预览，不保证还原原始复杂排版。PPT/PPTX、DOC 等暂不支持在线解析，会提供下载回退。
-
-远程地址的解析型文件需要服务端允许 CORS；图片、PDF、音视频仍由浏览器原生能力加载。远程下载会先读取为 Blob 再触发下载，不会主动打开新窗口。解析默认限制 50 MB、表格 200 行和 50 列，可通过 `max-file-size`、`max-rows`、`max-columns` 调整。
-
 ### YeeModal
 
 使用标准 `v-model:open`。Modal 默认在 header 右侧显示全屏切换按钮，可通过 `v-model:fullscreen` 控制状态，或通过 `:fullscreen-button="false"` 隐藏。`type="drawer"` 适合长详情或复杂表单，不显示全屏按钮；`confirm` 只通知父组件，不会主动关闭，便于父组件在异步提交成功后再更新 `open`。
@@ -251,7 +316,7 @@ function handlePreviewError(error: YeeFilePreviewError): void {
 ```vue
 <script setup lang="ts">
 import { shallowRef } from 'vue'
-import { YeeModal } from '@yeepay/yee-boss-ui'
+import { YeeModal } from '@yeepay/yee-boss-ui/modal'
 
 const open = shallowRef(false)
 const submitting = shallowRef(false)
@@ -294,7 +359,7 @@ import {
   type YeeSelectExpose,
   type YeeSelectOption,
   type YeeSelectValue,
-} from '@yeepay/yee-boss-ui'
+} from '@yeepay/yee-boss-ui/select'
 
 const status = shallowRef<YeeSelectValue>()
 const selectRef = shallowRef<YeeSelectExpose>()
@@ -340,7 +405,7 @@ import {
   YeeForm,
   YeeFormApi,
   type YeeFormOptions,
-} from '@yeepay/yee-boss-ui'
+} from '@yeepay/yee-boss-ui/form'
 
 interface QueryValues {
   channel?: 'OFFLINE' | 'ONLINE'
@@ -396,16 +461,14 @@ 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`，无需额外加载样式文件。
+
 ```vue
 <script setup lang="ts">
-import type {
-  YeeFormOptions,
-  YeeGridOptions,
-} from '@yeepay/yee-boss-ui'
-import {
-  YeePage,
-  useYeeGrid,
-} from '@yeepay/yee-boss-ui'
+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'
 
 interface OrderItem {
   orderNo: string
@@ -483,7 +546,7 @@ defineExpose({ reload: gridApi.reload })
 </template>
 ```
 
-`table-title`、`toolbar-actions`、`toolbar-tools` 以及列配置中的具名插槽都有类型提示，其中列插槽的 `row` 会保持 `OrderItem` 类型。`YeeGridApi` 提供 `query`、`reload`、`setGridOptions`、`setLoading`、`setState` 和 `toggleSearchForm`。
+`table-title`、`toolbar-actions`、`toolbar-tools` 以及列配置中的具名插槽都有类型提示，其中列插槽的 `row` 会保持 `OrderItem` 类型。`YeeGridApi` 提供 `query`、`reload`、`setGridOptions`、`setLoading`、`setState` 和 `toggleSearchForm`；需要隐藏查询区时，可在 `useYeeGrid` 配置中设置 `showSearchForm: false`，不再提供工具栏显隐按钮。
 
 组件的 TypeScript 导出使用 `YeeForm`、`YeeGrid`、`YeePage`，Vue 模板标签对应 `yee-form`、`yee-grid`、`yee-page`。新代码统一使用 `useYeeGrid`，不提供旧命名兼容别名。查询接口统一返回 `{ items, total }`。
 
@@ -497,10 +560,12 @@ pnpm pack --dry-run
 
 ## 组件演示
 
+在线预览：[Yee Boss UI 组件演示](https://qaboss.yeepay.com/boss-ui-example/index.html)
+
 本地演示入口覆盖当前公共组件与 light/dark 主题切换：
 
 ```bash
 pnpm example
 ```
 
-执行 `pnpm build:example` 可验证演示入口的生产构建。示例仅用于本地开发，不会打入 npm 包。
+执行 `pnpm build:example` 可验证演示入口的生产构建。演示产物独立部署，不会打入 npm 包。

package/dist/PlatformConfigProvider-BwqlDDcK.js

@@ -0,0 +1,34 @@
+import { defineComponent as n, computed as t, provide as l, openBlock as i, createBlock as f, unref as d, withCtx as c, createElementVNode as p, normalizeStyle as h, renderSlot as _ } from "vue";
+import { ConfigProvider as u } from "ant-design-vue";
+import { r as v, t as C, a as P } from "./tokens-Dw6w0SSs.js";
+import { p as T } from "./context-DJQ4f46a.js";
+import { _ as g } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const N = "--yee-content-height", y = ["data-theme"], x = /* @__PURE__ */ n({
+  name: "PlatformConfigProvider",
+  __name: "PlatformConfigProvider",
+  props: {
+    theme: { default: () => ({}) }
+  },
+  setup(o) {
+    const r = o, e = t(() => v(r.theme)), a = t(() => C(e.value)), s = t(() => P(e.value));
+    return l(T, e), (m, A) => (i(), f(d(u), {
+      "prefix-cls": "yee",
+      theme: a.value
+    }, {
+      default: c(() => [
+        p("div", {
+          class: "yee-ui-platform-theme",
+          "data-theme": e.value.mode,
+          style: h(s.value)
+        }, [
+          _(m.$slots, "default", {}, void 0, !0)
+        ], 12, y)
+      ]),
+      _: 3
+    }, 8, ["theme"]));
+  }
+}), b = /* @__PURE__ */ g(x, [["__scopeId", "data-v-7e0afdd9"]]);
+export {
+  N as C,
+  b as P
+};

package/dist/YeeDescriptions-BZ33odSs.js

@@ -0,0 +1,128 @@
+import { defineComponent as D, computed as d, reactive as E, onBeforeUnmount as Y, openBlock as n, createBlock as c, unref as i, mergeProps as N, withCtx as y, createElementBlock as f, Fragment as V, renderList as I, createElementVNode as _, renderSlot as b, createTextVNode as h, toDisplayString as m, normalizeClass as K, createCommentVNode as k, normalizeStyle as O } from "vue";
+import { CheckOutlined as x, CopyOutlined as A } from "@ant-design/icons-vue";
+import { Descriptions as C, Tooltip as g } from "ant-design-vue";
+import { p as v } from "./platform-message-BgD7E-34.js";
+import { _ as F } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+async function L(r) {
+  if (!r) return !1;
+  try {
+    return await navigator.clipboard.writeText(r), !0;
+  } catch {
+    const o = document.createElement("textarea");
+    o.value = r, o.style.position = "fixed", o.style.opacity = "0", document.body.append(o), o.focus(), o.select();
+    try {
+      return document.execCommand("copy");
+    } catch {
+      return !1;
+    } finally {
+      o.remove();
+    }
+  }
+}
+const M = { class: "yee-ui-descriptions__item" }, P = { class: "yee-ui-descriptions__content-row" }, U = { class: "yee-ui-descriptions__value yee-ui-descriptions__value--ellipsis" }, j = {
+  key: 1,
+  class: "yee-ui-descriptions__value"
+}, q = ["aria-label", "disabled", "onClick"], G = /* @__PURE__ */ D({
+  name: "YeeDescriptions",
+  __name: "YeeDescriptions",
+  props: {
+    bordered: { type: Boolean },
+    colon: { type: Boolean, default: !0 },
+    column: {},
+    items: {},
+    layout: {},
+    size: {},
+    title: {}
+  },
+  setup(r) {
+    const o = r, w = d(() => o.bordered ?? !1), z = d(() => o.colon), S = d(() => o.column ?? 3), T = d(() => o.layout ?? "horizontal"), $ = d(() => o.size ?? "default"), a = E(/* @__PURE__ */ new Set()), p = /* @__PURE__ */ new Set();
+    function l(s, u) {
+      return s.name ?? `${s.label}-${u}`;
+    }
+    async function B(s, u) {
+      const e = String(s.value ?? "");
+      if (!e.trim()) {
+        v.warning("没有可复制的内容");
+        return;
+      }
+      if (!await L(e)) {
+        v.error("复制失败");
+        return;
+      }
+      a.add(u), v.success("已复制");
+      const t = setTimeout(() => {
+        a.delete(u), p.delete(t);
+      }, 1500);
+      p.add(t);
+    }
+    return Y(() => {
+      p.forEach((s) => clearTimeout(s)), p.clear();
+    }), (s, u) => (n(), c(i(C), N({
+      class: "yee-ui-descriptions",
+      bordered: w.value,
+      colon: z.value,
+      column: S.value,
+      layout: T.value,
+      size: $.value
+    }, o.title === void 0 ? {} : { title: o.title }), {
+      default: y(() => [
+        (n(!0), f(V, null, I(r.items, (e, t) => (n(), c(i(C).Item, {
+          key: l(e, t),
+          label: e.label,
+          span: e.span ?? 1
+        }, {
+          default: y(() => [
+            _("div", M, [
+              _("div", P, [
+                e.ellipsis ? (n(), c(i(g), {
+                  key: 0,
+                  title: String(e.value ?? "")
+                }, {
+                  default: y(() => [
+                    _("span", U, [
+                      b(s.$slots, `content-${e.name ?? e.label}`, { item: e }, () => [
+                        h(m(e.value), 1)
+                      ], !0)
+                    ])
+                  ]),
+                  _: 2
+                }, 1032, ["title"])) : (n(), f("span", j, [
+                  b(s.$slots, `content-${e.name ?? e.label}`, { item: e }, () => [
+                    h(m(e.value), 1)
+                  ], !0)
+                ])),
+                e.copyable ? (n(), c(i(g), {
+                  key: 2,
+                  title: a.has(l(e, t)) ? "已复制" : "复制"
+                }, {
+                  default: y(() => [
+                    _("button", {
+                      class: K(["yee-ui-descriptions__copy", { "yee-ui-descriptions__copy--copied": a.has(l(e, t)) }]),
+                      "aria-label": a.has(l(e, t)) ? "已复制" : "复制",
+                      disabled: a.has(l(e, t)),
+                      type: "button",
+                      onClick: (H) => B(e, l(e, t))
+                    }, [
+                      a.has(l(e, t)) ? (n(), c(i(x), { key: 0 })) : (n(), c(i(A), { key: 1 }))
+                    ], 10, q)
+                  ]),
+                  _: 2
+                }, 1032, ["title"])) : k("", !0)
+              ]),
+              e.info ? (n(), f("span", {
+                key: 0,
+                class: "yee-ui-descriptions__info",
+                style: O(e.infoStyle)
+              }, m(e.info), 5)) : k("", !0)
+            ])
+          ]),
+          _: 2
+        }, 1032, ["label", "span"]))), 128))
+      ]),
+      _: 3
+    }, 16, ["bordered", "colon", "column", "layout", "size"]));
+  }
+}), Z = /* @__PURE__ */ F(G, [["__scopeId", "data-v-cd55dc37"]]);
+export {
+  Z as Y
+};

package/dist/YeeEllipsisText-CR94Jym2.js

@@ -0,0 +1,100 @@
+import { defineComponent as w, inject as O, useTemplateRef as F, shallowRef as d, computed as l, onMounted as R, onUpdated as Y, watch as K, onBeforeUnmount as N, openBlock as j, createBlock as A, unref as H, mergeProps as m, withCtx as y, createElementVNode as I, renderSlot as v, nextTick as L } from "vue";
+import { Tooltip as P } from "ant-design-vue";
+import { p as U } from "./context-DJQ4f46a.js";
+import { _ as D } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const V = ["aria-expanded", "role", "tabindex"], q = /* @__PURE__ */ w({
+  inheritAttrs: !1,
+  name: "YeeEllipsisText",
+  __name: "YeeEllipsisText",
+  props: {
+    expand: { type: Boolean, default: !1 },
+    ellipsisThreshold: { default: 3 },
+    line: { default: 1 },
+    maxWidth: { default: "100%" },
+    placement: { default: "top" },
+    tooltip: { type: Boolean, default: !0 },
+    tooltipBackgroundColor: {},
+    tooltipColor: {},
+    tooltipFontSize: {},
+    tooltipMaxWidth: {},
+    tooltipOverlayStyle: { default: () => ({ textAlign: "justify" }) },
+    tooltipWhenEllipsis: { type: Boolean, default: !1 }
+  },
+  emits: ["expandChange"],
+  setup(W, { emit: g }) {
+    const t = W, C = g, n = O(U, void 0), c = F("text"), p = d(!1), o = d(!1), u = d(0), i = l(() => Number.isFinite(t.line) ? Math.max(1, Math.floor(t.line)) : 1), T = l(() => Number.isFinite(t.ellipsisThreshold) ? Math.max(0, t.ellipsisThreshold) : 3), b = l(() => typeof t.maxWidth == "number" ? `${t.maxWidth}px` : t.maxWidth), k = l(() => {
+      const e = { maxWidth: b.value };
+      return !o.value && i.value > 1 && (e.webkitLineClamp = i.value), e;
+    }), E = l(() => ({
+      "yee-ui-ellipsis-text--expandable": t.expand,
+      "yee-ui-ellipsis-text--expanded": o.value,
+      "yee-ui-ellipsis-text--multi-line": !o.value && i.value > 1,
+      "yee-ui-ellipsis-text--single-line": !o.value && i.value === 1
+    })), a = l(() => t.tooltipMaxWidth !== void 0 ? t.tooltipMaxWidth : u.value > 0 ? u.value + 24 : void 0), S = l(() => {
+      const e = {};
+      return a.value !== void 0 && (e.maxWidth = `${a.value}px`), e;
+    }), B = l(() => {
+      const e = {
+        ...t.tooltipOverlayStyle,
+        backgroundColor: f.value,
+        color: t.tooltipColor || n?.value.tokens.popoverForeground || "var(--yee-popover-foreground)",
+        fontSize: t.tooltipFontSize === void 0 ? n ? `${n.value.tokens.fontSize}px` : "var(--yee-font-size)" : `${t.tooltipFontSize}px`
+      };
+      return a.value !== void 0 && (e.maxWidth = `${a.value}px`), e;
+    }), f = l(() => t.tooltipBackgroundColor || n?.value.tokens.popover || "var(--yee-popover)"), M = l(() => t.tooltip && !o.value && (!t.tooltipWhenEllipsis || p.value)), _ = l(() => M.value ? {} : { open: !1 });
+    let s;
+    function r() {
+      const e = c.value;
+      if (!e) return;
+      const h = e.getBoundingClientRect().width || e.clientWidth;
+      if (u.value = Math.ceil(h), !t.tooltipWhenEllipsis || o.value || !e.textContent?.trim()) {
+        p.value = !1;
+        return;
+      }
+      const $ = i.value === 1 ? e.scrollWidth - e.clientWidth : e.scrollHeight - e.clientHeight;
+      p.value = $ > T.value;
+    }
+    function x() {
+      t.expand && (o.value = !o.value, C("expandChange", o.value), L(r));
+    }
+    function z(e) {
+      !t.expand || e.key !== "Enter" && e.key !== " " || (e.preventDefault(), x());
+    }
+    return R(() => {
+      const e = c.value;
+      e && typeof ResizeObserver < "u" && (s = new ResizeObserver(r), s.observe(e)), r();
+    }), Y(r), K(() => t.expand, (e) => {
+      e || (o.value = !1);
+    }), N(() => {
+      s?.disconnect(), s = void 0;
+    }), (e, h) => (j(), A(H(P), m(_.value, {
+      color: f.value,
+      "overlay-inner-style": B.value,
+      "overlay-style": S.value,
+      placement: t.placement
+    }), {
+      title: y(() => [
+        v(e.$slots, "tooltip", {}, () => [
+          v(e.$slots, "default", {}, void 0, !0)
+        ], !0)
+      ]),
+      default: y(() => [
+        I("div", m({ ref: "text" }, e.$attrs, {
+          "aria-expanded": t.expand ? o.value : void 0,
+          class: ["yee-ui-ellipsis-text", E.value],
+          role: t.expand ? "button" : void 0,
+          style: k.value,
+          tabindex: t.expand ? 0 : void 0,
+          onClick: x,
+          onKeydown: z
+        }), [
+          v(e.$slots, "default", {}, void 0, !0)
+        ], 16, V)
+      ]),
+      _: 3
+    }, 16, ["color", "overlay-inner-style", "overlay-style", "placement"]));
+  }
+}), Z = /* @__PURE__ */ D(q, [["__scopeId", "data-v-3aaa7ae9"]]);
+export {
+  Z as Y
+};