@cldemo/ui-kit 1.0.17 → 1.1.1

package/docs/components/Mobile/{AreaM.md → PickerArea.md}

@@ -1,9 +1,9 @@
-# ClAreaM AreaM
+# ClPickerArea PickerArea
 
-> 省市区三级联动选择器（Picker 滚轮效果：惯性滑动 + 吸附定位），支持内置全国数据（2024 最新、含港澳台）自动按需加载与外部数据传入
+> PickerArea 组件
 
-- **标签名**: `<cl-area-m>`
-- **引入**: `import { ClAreaM } from '@cldemo/ui-kit'`
+- **标签名**: `<cl-picker-area>`
+- **引入**: `import { ClPickerArea } from '@cldemo/ui-kit'`
 
 ## Props
 
@@ -14,8 +14,8 @@
 | value | `Array, String` | `() => []` | 否 | 选中值（省市区名数组），支持 v-model |
 | show | `Boolean` | `` | 否 | 是否显示选择器，支持 v-model:show |
 | title | `String` | `` | 否 | 顶部标题 |
-| confirmButtonText | `String` | `` | 否 | 确认按钮文字 |
-| cancelButtonText | `String` | `` | 否 | 取消按钮文字 |
+| submitLabel | `String` | `` | 否 | 确认按钮文字 |
+| closeLabel | `String` | `` | 否 | 取消按钮文字 |
 | areaList | `Array as PropType&lt;AreaNode[]&gt;` | `() => []` | 否 | 省市区数据（{ name, children }[]）。为空时自动按需加载内置全国数据（2024 最新、含港澳台），加载期间列区显示 loading |
 | columnsNum | `Number` | `3` | 否 | 显示列数，可选: 2, 3 |
 | isOverlay | `Boolean` | `true` | 否 | 是否显示遮罩层 |
@@ -42,12 +42,12 @@
 `v-model:show` 显示选择器，`:areaList` 省市区数据，`@onConfirm` 确认回调
 
 ```vue
-<cl-area-m
+<cl-picker-area
   v-model:show="optShowBasic"
   :areaList="optAreaData"
   v-model:value="optValueBasic"
   @onConfirm="onConfirmBasic"
-></cl-area-m>
+></cl-picker-area>
 ```
 
 ### columnsNum 两列模式
@@ -55,13 +55,13 @@
 `:columnsNum="2"` 只显示省/市两级
 
 ```vue
-<cl-area-m
+<cl-picker-area
   v-model:show="optShowTwo"
   :areaList="optAreaData"
   :columnsNum="2"
   v-model:value="optValueTwo"
   @onConfirm="onConfirmTwo"
-></cl-area-m>
+></cl-picker-area>
 ```
 
 ### 内置全国数据
@@ -74,10 +74,10 @@
 const optShow = ref(false);
 const optValue = ref<string[]>([]);
 
-<cl-area-m
+<cl-picker-area
   v-model:show="optShow"
   v-model:value="optValue"
   @onConfirm="onConfirmNational"
-></cl-area-m>
+></cl-picker-area>
 ```
 

package/docs/components/Mobile/PickerDate.md

@@ -18,15 +18,15 @@
 | minDate | `Date as PropType<Date>` | `` | 否 | 可选的最小日期（精确到日），默认十年前 |
 | maxDate | `Date as PropType<Date>` | `` | 否 | 可选的最大日期（精确到日），默认十年后 |
 | title | `String` | `` | 否 | 顶部栏标题 |
-| confirmButtonText | `String` | `'确认'` | 否 | 确认按钮文字 |
-| cancelButtonText | `String` | `'取消'` | 否 | 取消按钮文字 |
+| submitLabel | `String` | `'确认'` | 否 | 确认按钮文字 |
+| closeLabel | `String` | `'取消'` | 否 | 取消按钮文字 |
 | isShowToolbar | `Boolean` | `true` | 否 | 是否显示顶部栏（确认/取消按钮） |
 | isLoading | `Boolean` | `` | 否 | 是否显示加载状态 |
 | isReadonly | `Boolean` | `` | 否 | 是否只读（禁止滑动切换选项） |
 | isAllowHtml | `Boolean` | `` | 否 | 是否允许选项内容渲染 HTML（默认关闭，防注入） |
-| optionHeight | `Number` | `44` | 否 | 选项高度(px) |
-| visibleOptionNum | `Number` | `6` | 否 | 可见选项个数（建议奇数，居中效果更好） |
-| swipeDuration | `Number` | `1000` | 否 | 快速滑动时惯性滚动的动画时长(ms) |
+| itemHeight | `Number` | `44` | 否 | 选项高度(px) |
+| showNum | `Number` | `6` | 否 | 可见选项个数（建议奇数，居中效果更好） |
+| inertiaDuration | `Number` | `1000` | 否 | 快速滑动时惯性滚动的动画时长(ms) |
 | teleportTarget | `String` | `` | 否 | 弹层挂载目标，可选: body（默认）、#id（指定容器 id） |
 
 ## Events

package/docs/components/Mobile/PickerTime.md

@@ -22,15 +22,15 @@
 | minSecond | `Number` | `0` | 否 | 可选的最小秒 |
 | maxSecond | `Number` | `59` | 否 | 可选的最大秒 |
 | title | `String` | `` | 否 | 顶部栏标题 |
-| confirmButtonText | `String` | `'确认'` | 否 | 确认按钮文字 |
-| cancelButtonText | `String` | `'取消'` | 否 | 取消按钮文字 |
+| submitLabel | `String` | `'确认'` | 否 | 确认按钮文字 |
+| closeLabel | `String` | `'取消'` | 否 | 取消按钮文字 |
 | isShowToolbar | `Boolean` | `true` | 否 | 是否显示顶部栏（确认/取消按钮） |
 | isLoading | `Boolean` | `` | 否 | 是否显示加载状态 |
 | isReadonly | `Boolean` | `` | 否 | 是否只读（禁止滑动切换选项） |
 | isAllowHtml | `Boolean` | `` | 否 | 是否允许选项内容渲染 HTML（默认关闭，防注入） |
-| optionHeight | `Number` | `44` | 否 | 选项高度(px) |
-| visibleOptionNum | `Number` | `6` | 否 | 可见选项个数（建议奇数，居中效果更好） |
-| swipeDuration | `Number` | `1000` | 否 | 快速滑动时惯性滚动的动画时长(ms) |
+| itemHeight | `Number` | `44` | 否 | 选项高度(px) |
+| showNum | `Number` | `6` | 否 | 可见选项个数（建议奇数，居中效果更好） |
+| inertiaDuration | `Number` | `1000` | 否 | 快速滑动时惯性滚动的动画时长(ms) |
 | teleportTarget | `String` | `` | 否 | 弹层挂载目标，可选: body（默认）、#id（指定容器 id） |
 
 ## Events

package/docs/components/Mobile/ScrollCard.md

@@ -20,16 +20,18 @@
 | totalLength | `Number` | `0` | 否 | 数据总条数（服务端模式按钮分页用，计算总页数） |
 | orderSort | `Object as () => OrderSortItem` | `() => ({ field: '' })` | 否 | 排序配置；field 为空则不排序按 list 原序 |
 | isElastic | `Boolean` | `false` | 否 | 是否启用展开行 |
+| elasticClickKey | `String` | `'.scrollcard-click-elastic'` | 否 | 展开点击区域选择器 |
 | isLoading | `Boolean` | `false` | 否 | 是否加载中（初始/刷新/加载更多） |
 | isFinished | `Boolean` | `false` | 否 | 无限加载是否已全部加载完（服务端模式由父控制） |
 | emptyText | `String` | `'暂无数据'` | 否 | 空数据文案 |
+| loadingText | `String` | `'加载中...'` | 否 | 加载更多提示文字 |
+| finishedText | `String` | `'没有更多了'` | 否 | 已加载全部提示文字 |
 
 ## Slots
 
 | 名称 | 说明 |
 |------|------|
 | default | 默认插槽 |
-| elasticIcon | elasticIcon 插槽 |
 | elastic | elastic 插槽 |
 
 ## 方法
@@ -49,7 +51,7 @@
 ```vue
 <cl-scroll-card
   :list="listAll"
-  :paginateLimit="6"
+  :paginateLimit="15"
   @onClickCard="onClickCard"
 >
   <template v-slot="{ info, index, onClickCard }">
@@ -64,6 +66,33 @@
 </cl-scroll-card>
 ```
 
+### 服务端模式（isServer）
+
+`isServer="true"` 服务端模式：组件不自己取数，只抛 `onGetData`，父拿到 `{ pages, limit, offset, field, order, action }` 请求后回填 `list`。演示中父端模拟接口 `1s` 延时，期间下拉指示器显示「加载中...」；下拉刷新（`refresh`）回到第一页，上滑触底（`loadmore`）追加下一页。数据回来后父端需调 `finishRefresh()` 复位下拉指示器，否则会一直停在「加载中」
+
+```vue
+<cl-scroll-card
+  ref="refElScroll"
+  :list="pageList"
+  :isServer="true"
+  :totalLength="totalLength"
+  :isLoading="isLoading"
+  :isFinished="optIsFinished"
+  :paginateLimit="15"
+  @onGetData="onGetData"
+>
+  <template v-slot="{ info, index, onClickCard }">
+    <div class="sc-demo-card" @click="onClickCard(info, index)">
+      <div class="sc-demo-card-row">
+        <span class="sc-demo-card-name">{{ info.name }}</span>
+        <span class="sc-demo-card-score">得分 {{ info.score }}</span>
+      </div>
+      <div class="sc-demo-card-status">{{ info.status }}</div>
+    </div>
+  </template>
+</cl-scroll-card>
+```
+
 ### orderSort 本地排序
 
 本地模式 `orderSort` 按字段排序：`field` 排序字段、`order` 升降序、`format` 比较格式。field 为空则不排序按 list 原序
@@ -71,7 +100,7 @@
 ```vue
 <cl-scroll-card
   :list="listAll"
-  :paginateLimit="6"
+  :paginateLimit="15"
   :orderSort="{ field: 'score', order: 'desc', format: 'number' }"
 >
   <template v-slot="{ info }">
@@ -88,7 +117,7 @@
 <cl-scroll-card
   :list="listAll"
   :paginateType="'button'"
-  :paginateLimit="5"
+  :paginateLimit="15"
   @onClickCard="onClickCard"
 >
   <template v-slot="{ info, index, onClickCard }">
@@ -104,20 +133,24 @@
 
 ### 展开行（isElastic）
 
-`:isElastic="true"` 卡片下方渲染 `elasticIcon` 展开图标 + 展开区 `elastic` 插槽。展开进入 loading，父把异步结果放入页面 `pageElasticData[info.id]` 后调 `loadElasticStop(id)` 结束动画
+`:isElastic="true"` 启用展开行：在默认插槽内任意位置放一个带 `elasticClickKey`（默认 `.scrollcard-click-elastic`）类名的元素即为展开触发区，点击它展开/收起，位置完全由业务决定。展开区内容由 `elastic` 插槽渲染，展开进入 loading，父把异步结果放入页面 `pageElasticData[info.id]` 后调 `loadElasticStop(id)` 结束动画。本示例叠加服务端模式：共 90 条、每页 15 条，滑到底演示 1s 延时加载下一页（加载中显示 `loadingText`，全部加载完显示 `finishedText`），展开行在分页加载后仍可正常展开
 
 ```vue
 <cl-scroll-card
   ref="refElScroll"
-  :list="listElastic"
+  :list="pageList"
+  :isServer="true"
   :isElastic="true"
+  :totalLength="totalLength"
+  :isLoading="isLoading"
+  :isFinished="optIsFinished"
+  :paginateLimit="15"
+  @onGetData="onGetData"
   @onClickElastic="onClickElastic"
 >
-  <template v-slot="{ info }">
+  <template v-slot="{ info, isOpen }">
     <div>卡片主体内容</div>
-  </template>
-  <template v-slot:elasticIcon="{ isOpen }">
-    <span>{{ isOpen ? '▲ 收起' : '▼ 展开' }}</span>
+    <span class="scrollcard-click-elastic">{{ isOpen ? '▲ 收起' : '▼ 展开' }}</span>
   </template>
   <template v-slot:elastic="{ info }">
     <div v-if="pageElasticData[info.id]">{{ pageElasticData[info.id].detail }}</div>

package/docs/components/Mobile/{ShareSheet.md → SharePanel.md}

@@ -1,9 +1,9 @@
-# ClShareSheet ShareSheet
+# ClSharePanel SharePanel
 
-> ShareSheet 组件
+> SharePanel 组件
 
-- **标签名**: `<cl-share-sheet>`
-- **引入**: `import { ClShareSheet } from '@cldemo/ui-kit'`
+- **标签名**: `<cl-share-panel>`
+- **引入**: `import { ClSharePanel } from '@cldemo/ui-kit'`
 
 ## Props
 
@@ -14,7 +14,7 @@
 | show | `Boolean` | `` | 否 | 是否显示面板，支持 v-model:show |
 | title | `String` | `` | 否 | 面板标题 |
 | description | `String` | `` | 否 | 标题下方的描述文字 |
-| optionsList | `Array as PropType&lt;ShareSheetOptionItem[]&gt;` | `` | 否 | 分享选项列表（ShareSheetOptionItem[]，元素需含 name） |
+| optionsList | `Array as PropType&lt;SharePanelOptionItem[]&gt;` | `` | 否 | 分享选项列表（SharePanelOptionItem[]，元素需含 name） |
 | cancelText | `String` | `` | 否 | 底部取消按钮文字（不传则不显示） |
 | isOverlay | `Boolean` | `true` | 否 | 是否显示遮罩层 |
 | isCloseOnClickOverlay | `Boolean` | `true` | 否 | 点击遮罩层后是否关闭 |
@@ -40,12 +40,12 @@
 `v-model:show` 控制显示，`:optionsList` 选项列表，`@onSelect` 监听选项点击
 
 ```vue
-<cl-share-sheet
+<cl-share-panel
   v-model:show="optShowBasic"
   :optionsList="optOptionsBasic"
   cancelText="取消"
   @onSelect="onSelectBasic"
-></cl-share-sheet>
+></cl-share-panel>
 ```
 
 ### title 与 description
@@ -53,13 +53,13 @@
 `title` 面板标题，`description` 标题下方描述文字
 
 ```vue
-<cl-share-sheet
+<cl-share-panel
   v-model:show="optShowTitle"
   title="立即分享给好友"
   description="每个应用都可以被分享"
   :optionsList="optOptionsTitle"
   cancelText="取消"
-></cl-share-sheet>
+></cl-share-panel>
 ```
 
 ### isSafeAreaInsetBottom 安全区
@@ -67,11 +67,11 @@
 `isSafeAreaInsetBottom` 开启底部安全区适配（iPhone 刘海屏）
 
 ```vue
-<cl-share-sheet
+<cl-share-panel
   v-model:show="optShowSafe"
   :optionsList="optOptionsSafe"
   cancelText="取消"
   :isSafeAreaInsetBottom="true"
-></cl-share-sheet>
+></cl-share-panel>
 ```
 

package/docs/components/Mobile/Signature.md

@@ -15,7 +15,7 @@
 | lineWidth | `Number` | `3` | 否 | 线条宽度 |
 | backgroundColor | `String` | `` | 否 | 背景颜色，为空时透明背景 |
 | clearButtonText | `String` | `'清空'` | 否 | 清除按钮文案 |
-| confirmButtonText | `String` | `'确认'` | 否 | 确认按钮文案 |
+| submitLabel | `String` | `'确认'` | 否 | 确认按钮文案 |
 
 ## 方法
 
@@ -61,9 +61,9 @@
 <cl-signature type="jpeg" />
 ```
 
-### clearButtonText / confirmButtonText
+### clearButtonText / submitLabel
 
-设置 `clear-button-text` 与 `confirm-button-text` 自定义按钮文案
+设置 `clear-button-text` 与 `submit-label` 自定义按钮文案
 
 ```vue
 <cl-signature clear-button-text="重置" confirm-button-text="完成" />

package/docs/tokens/design-token.md

@@ -139,7 +139,7 @@ Token 遵循 CSS 自定义属性的作用域规则，**在任意容器上覆盖
 
 ## 五、Token 速查表
 
-共 **207** 个 token。
+共 **212** 个 token。
 
 ### 5.1 日常最常用
 
@@ -233,6 +233,19 @@ Token 遵循 CSS 自定义属性的作用域规则，**在任意容器上覆盖
 | `--cl-highlight-bg` | `#ffff80` |  |
 | `--cl-highlight-text` | `#323233` | 映射自 `var(--cl-neutral-900)` |
 
+**通知条（NoticeBar 等常驻提示）**
+
+| Token | 值 | 用途 |
+|-------|-----|------|
+| `--cl-notice-text` | `#ed6a0c` |  |
+| `--cl-notice-bg` | `#fffbe8` |  |
+
+**拖拽把手（可拖拽面板的抓取条）**
+
+| Token | 值 | 用途 |
+|-------|-----|------|
+| `--cl-handle` | `#e5e5e5` |  |
+
 **功能色语义**
 
 | Token | 值 | 用途 |
@@ -376,6 +389,8 @@ Token 遵循 CSS 自定义属性的作用域规则，**在任意容器上覆盖
 | `--cl-transition-base` | `250ms` |  |
 | `--cl-transition-slow` | `400ms` |  |
 | `--cl-transition-ease` | `ease` |  |
+| `--cl-dropdown-enter-duration` | `400ms` |  |
+| `--cl-dropdown-leave-duration` | `500ms` |  |
 
 **透明度档位**
 
@@ -583,4 +598,4 @@ Token 是 CSS 自定义属性，遵循**就近生效**原则：
 
 ### Q6：Token 会影响打包体积吗？
 
-Token 定义约 13.3 KB（未压缩），且全站只加载一次。
+Token 定义约 13.4 KB（未压缩），且全站只加载一次。

package/docs/tools/CommonDay.md

@@ -11,7 +11,7 @@
 | `initDay(d?: any)` | 将值转为 dayjs 时区对象 |
 | `getDayjsObject(day: any)` | 将 string/number/Date/dayjs 转为 dayjs 对象 |
 | `initFormat(options?: any)` | 格式化日期，默认格式 YYYY-MM-DD |
-| `addTime(time: any, num: number, type = "days")` | 时间加法 |
-| `subtractTime(time: any, num: number, type = "days")` | 时间减法 |
-| `diffTime(time1: any, timeDiff2: any, type = "millisecond")` | 时间差值计算 |
+| `addTime(time: any, num: number, type = 'days')` | 时间加法 |
+| `subtractTime(time: any, num: number, type = 'days')` | 时间减法 |
+| `diffTime(time1: any, timeDiff2: any, type = 'millisecond')` | 时间差值计算 |
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cldemo/ui-kit",
-  "version": "1.0.17",
+  "version": "1.1.1",
   "type": "module",
   "preview": false,
   "author": "lei.che  Email: chelei_714@126.com",
@@ -42,6 +42,7 @@
     "preview": "vite preview",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
+    "lint:stat": "node scripts/lint-stat.cjs",
     "format": "prettier --write src/**/*.{vue,js,jsx,ts,tsx,json,css}",
     "docs:generate": "node generateAuto/generate-catalog.js && node scripts/generate-token-doc.cjs",
     "manifest:generate": "node scripts/generate-resolver.cjs && node scripts/generate-components.cjs",