sard-uniapp 1.23.5 → 1.24.0

package/CHANGELOG.md

@@ -1,3 +1,30 @@
+# [1.24.0](https://github.com/sutras/sard-uniapp/compare/v1.23.5...v1.24.0) (2025-08-24)
+
+
+### Bug Fixes
+
+* *-input 类组件允许修改输入框箭头图标 ([2d2a719](https://github.com/sutras/sard-uniapp/commit/2d2a7199fcdf9cd9760a151edae8c28bb39c6f8a))
+* **cascader-input:** 修复arrow属性失效; ([5b67a7a](https://github.com/sutras/sard-uniapp/commit/5b67a7a631abb04f86de28507d4195268338a0e1))
+* **datetime-picker-input:** 修复arrow属性失效; ([f530c73](https://github.com/sutras/sard-uniapp/commit/f530c7384f78ed14e1af7f2fc5978fdcf26be17e))
+
+
+### Features
+
+* card 组件新增 collapsed 属性 ([9e6ec3b](https://github.com/sutras/sard-uniapp/commit/9e6ec3bd5e9b7a7e9834d7c1cdd69d0f0b8efaac))
+* **keyboard:** 扩展键盘toggle方法支持传入mode参数 ([25c6767](https://github.com/sutras/sard-uniapp/commit/25c67671fc35dd349380c80e83eb1d26dc582ad5))
+* **keyboard:** 添加键盘模式配置支持 ([e1dda90](https://github.com/sutras/sard-uniapp/commit/e1dda90788460c3c3b7af9f7c82d9c7a704fa910))
+* tree 组件新增 check 事件 ([4985f46](https://github.com/sutras/sard-uniapp/commit/4985f4629029744cd6298b37d04a40235379fb89))
+* 新增 cool-icon 组件 ([ba51ef1](https://github.com/sutras/sard-uniapp/commit/ba51ef12a312a7cde65d629170f8c9da2394cebb))
+* 新增 segmented 组件 ([f70464a](https://github.com/sutras/sard-uniapp/commit/f70464aa3bbef71ed44be967995c210f64d1a536))
+* 新增 watermark 组件 ([ce36afd](https://github.com/sutras/sard-uniapp/commit/ce36afd833dbc4eba4a06741faea3ba47dc704fd))
+
+
+### Performance Improvements
+
+* 压缩图片 ([8cd341f](https://github.com/sutras/sard-uniapp/commit/8cd341f601449bb8ab8d2b0c65da1faedbe3373f))
+
+
+
 ## [1.23.5](https://github.com/sutras/sard-uniapp/compare/v1.23.4...v1.23.5) (2025-08-12)
 
 

package/README.md

@@ -25,7 +25,7 @@
 
 ## 特性
 
-- 🧩 96+个高质量组件，覆盖移动端主流场景
+- 🧩 101+个高质量组件，覆盖移动端主流场景
 - 💪 支持一套代码同时开发 H5 / 小程序 / App
 - 🌿 支持按需引入和 `Tree Shaking`
 - 📖 详尽的文档和案例展示
@@ -137,7 +137,7 @@ npm run release
 
 - 运行 `npm run nc` 命令创建组件
 - 运行 `npm run nsc` 命令创建子组件
-- 编写组件代码
+- 编写组件代码（接口、类型、结构、样式、交互）
 - 编写案例代码
 - 编写组件文档
 - 编写测试用例

package/components/calendar-input/calendar-input.vue

@@ -7,6 +7,7 @@
     :clearable="clearable"
     :root-class="rootClass"
     :root-style="rootStyle"
+    :arrow="arrow"
     :internal-arrow="$slots.arrow ? 1 : 0"
     :input-props="inputProps"
     @clear="onClear"

package/components/card/README.md

@@ -53,6 +53,12 @@ import Card from 'sard-uniapp/components/card/card.vue'
 
 @code('${DEMO_PATH}/card/demo/Style.vue')
 
+### 折叠 <sup>1.24+</sup>
+
+可使用 `collapsed` 属性设置卡片折叠，折叠时将隐藏主体和底部，只显示头部。
+
+@code('${DEMO_PATH}/card/demo/Collapsed.vue')
+
 ## API
 
 ### CardProps
@@ -67,6 +73,7 @@ import Card from 'sard-uniapp/components/card/card.vue'
 | hover <sup>1.12.3+</sup>            | 是否开启点击反馈 | boolean    | false  |
 | hide-header-border <sup>1.20+</sup> | 是否隐藏头部边框 | boolean    | false  |
 | hide-footer-border <sup>1.20+</sup> | 是否隐藏底部边框 | boolean    | false  |
+| collapsed <sup>1.24+</sup>          | 是否折叠         | boolean    | false  |
 
 ### CardSlots
 

package/components/card/card.vue

@@ -8,12 +8,14 @@
         <slot name="extra">{{ extra }}</slot>
       </view>
     </view>
-    <view :class="bem.e('body')">
-      <slot></slot>
-    </view>
-    <view v-if="!footless" :class="bem.e('footer')">
-      <slot name="footer">{{ footer }}</slot>
-    </view>
+    <sar-collapse :visible="!collapsed">
+      <view :class="bem.e('body')">
+        <slot></slot>
+      </view>
+      <view v-if="!footless" :class="bem.e('footer')">
+        <slot name="footer">{{ footer }}</slot>
+      </view>
+    </sar-collapse>
   </view>
 </template>
 
@@ -26,6 +28,7 @@ import {
   createBem,
   isVisibleEmpty
 } from "../../utils";
+import SarCollapse from "../collapse/collapse.vue";
 /**
  * @property {string} rootClass 组件根元素类名，默认值：-。
  * @property {StyleValue} rootStyle 组件根元素样式，默认值：-。
@@ -35,9 +38,13 @@ import {
  * @property {boolean} hover 是否开启点击反馈，默认值：false。
  * @property {boolean} hideHeaderBorder 是否隐藏头部边框，默认值：false。
  * @property {boolean} hideFooterBorder 是否隐藏底部边框，默认值：false。
+ * @property {boolean} collapsed 是否折叠，默认值：false。
  * @event {(event: any) => void} click 点击卡片时触发
  */
 export default  _defineComponent({
+  components: {
+    SarCollapse,
+  },
   ...{
     options: {
       virtualHost: true,
@@ -53,7 +60,8 @@ export default  _defineComponent({
     footer: { type: String, required: false },
     hover: { type: Boolean, required: false },
     hideHeaderBorder: { type: Boolean, required: false },
-    hideFooterBorder: { type: Boolean, required: false }
+    hideFooterBorder: { type: Boolean, required: false },
+    collapsed: { type: Boolean, required: false }
   },
   emits: ["click"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -79,13 +87,14 @@ export default  _defineComponent({
         bem.m("footless", footless.value),
         bem.m("head-borderless", props.hideHeaderBorder),
         bem.m("foot-borderless", props.hideFooterBorder),
+        bem.m("collapsed", props.collapsed),
         props.rootClass
       );
     });
     const cardStyle = computed(() => {
       return stringifyStyle(props.rootStyle);
     });
-    const __returned__ = { props, slots, emit, bem, headless, footless, onClick, cardClass, cardStyle };
+    const __returned__ = { props, slots, emit, bem, headless, footless, onClick, cardClass, cardStyle, SarCollapse };
     return __returned__;
   }
 });

package/components/card/common.d.ts

@@ -8,6 +8,7 @@ export interface CardProps {
     hover?: boolean;
     hideHeaderBorder?: boolean;
     hideFooterBorder?: boolean;
+    collapsed?: boolean;
 }
 export interface CardSlots {
     default?(props: Record<string, never>): any;

package/components/card/index.scss

@@ -63,7 +63,7 @@
     }
   }
 
-  @include m(head-borderless) {
+  @include m(head-borderless, collapsed) {
     @include e(header) {
       &::after {
         display: none;

package/components/cascader-input/cascader-input.vue

@@ -8,6 +8,7 @@
     :loading="loading"
     :root-class="rootClass"
     :root-style="rootStyle"
+    :arrow="arrow"
     :internal-arrow="$slots.arrow ? 1 : 0"
     :input-props="inputProps"
     @clear="onClear"

package/components/checkbox-input/checkbox-input.vue

@@ -8,6 +8,7 @@
     multiline
     :root-class="rootClass"
     :root-style="rootStyle"
+    :arrow="arrow"
     :internal-arrow="$slots.arrow ? 1 : 0"
     :input-props="inputProps"
     @clear="onClear"

package/components/config/index.d.ts

@@ -6,6 +6,7 @@ import { type CalendarProps } from '../calendar';
 import { type CascaderInputProps } from '../cascader-input';
 import { type CheckboxGroupProps } from '../checkbox';
 import { type CheckboxInputProps } from '../checkbox-input';
+import { type CoolIconProps } from '../cool-icon';
 import { type DatetimePickerInputProps } from '../datetime-picker-input';
 import { type DatetimeRangePickerInputProps } from '../datetime-range-picker-input';
 import { type DialogProps } from '../dialog';
@@ -34,6 +35,7 @@ import { type RadioInputProps } from '../radio-input';
 import { type RadioPopoutProps } from '../radio-popout';
 import { type ResultProps } from '../result';
 import { type SearchProps } from '../search';
+import { type SegmentedProps } from '../segmented';
 import { type SpaceProps } from '../space';
 import { type StepperProps } from '../stepper';
 import { type StepsProps } from '../steps';
@@ -43,6 +45,7 @@ import { type TagProps } from '../tag';
 import { type ToastProps } from '../toast';
 import { type TreeProps } from '../tree';
 import { type UploadPreviewProps, type UploadProps } from '../upload';
+import { type WatermarkProps } from '../watermark';
 type DeepPartial<T> = {
     [P in keyof T]?: T[P] extends Record<any, any> ? DeepPartial<T[P]> : T[P];
 };
@@ -125,6 +128,9 @@ export declare const defaultConfig: {
     checkboxPopout: {
         validateEvent: boolean;
     };
+    coolIcon: {
+        shape: CoolIconProps["shape"];
+    };
     countDown: {
         time: number;
         autoStart: boolean;
@@ -248,6 +254,7 @@ export declare const defaultConfig: {
     };
     keyboard: {
         type: KeyboardProps["type"];
+        mode: KeyboardProps["mode"];
     };
     listItem: {
         arrowDirection: ListItemProps["arrowDirection"];
@@ -381,6 +388,12 @@ export declare const defaultConfig: {
         shape: SearchProps["shape"];
         focus: boolean;
     };
+    segmented: {
+        size: SegmentedProps["size"];
+        shape: SegmentedProps["shape"];
+        direction: SegmentedProps["direction"];
+        validateEvent: boolean;
+    };
     shareSheet: {
         overlayClosable: boolean;
         duration: number;
@@ -490,6 +503,13 @@ export declare const defaultConfig: {
         columnGap: number;
         rowGap: number;
     };
+    watermark: {
+        width: number;
+        height: number;
+        rotate: number;
+        zIndex: number;
+        gap: () => NonNullable<WatermarkProps["gap"]>;
+    };
 };
 export type ConfigOptions = typeof defaultConfig;
 export declare function setConfig(...optionsArgs: DeepPartial<ConfigOptions>[]): void;

package/components/config/index.js

@@ -79,6 +79,9 @@ export const defaultConfig = {
     checkboxPopout: {
         validateEvent: true,
     },
+    coolIcon: {
+        shape: 'oval',
+    },
     countDown: {
         time: 0,
         autoStart: true,
@@ -194,7 +197,7 @@ export const defaultConfig = {
         modelValue: '',
         validateEvent: true,
         cursorSpacing: 30,
-        confirmType: 'done',
+        confirmType: undefined,
         cursor: -1,
         selectionStart: -1,
         selectionEnd: -1,
@@ -202,6 +205,7 @@ export const defaultConfig = {
     },
     keyboard: {
         type: 'number',
+        mode: 'chinese',
     },
     listItem: {
         arrowDirection: 'right',
@@ -335,6 +339,12 @@ export const defaultConfig = {
         shape: 'square',
         focus: false,
     },
+    segmented: {
+        size: 'middle',
+        shape: 'square',
+        direction: 'horizontal',
+        validateEvent: true,
+    },
     shareSheet: {
         overlayClosable: true,
         duration: 250,
@@ -444,6 +454,13 @@ export const defaultConfig = {
         columnGap: 16,
         rowGap: 16,
     },
+    watermark: {
+        width: 120,
+        height: 64,
+        rotate: -22,
+        zIndex: 9,
+        gap: () => [30, 30],
+    },
 };
 function extendProps(source, target) {
     Object.keys(target).forEach((key) => {

package/components/cool-icon/README.md

@@ -0,0 +1,81 @@
+---
+nav: 组件
+title: CoolIcon
+subtitle: 酷炫图标
+group: 数据展示
+version: 1.24+
+---
+
+## 介绍
+
+为一般的图标添加颜色、外框、背景和装饰物等元素，让其变得炫酷，可在缺少设计时也能展示不一般的效果。
+
+## 引入
+
+```ts
+import CoolIcon from 'sard-uniapp/components/cool-icon/cool-icon.vue'
+```
+
+## 代码演示
+
+### 椭圆
+
+把图标放置在默认插槽，使用 `background` 属性设置外框背景色，使用 `color` 属性设置图标颜色，使用 `shape="oval"` 属性设置外框为椭圆形，就能得到一个精致漂亮的图标。
+
+@code('${DEMO_PATH}/cool-icon/demo/Oval.vue')
+
+### 圆形
+
+使用 `shape="circle"` 属性设置外框为圆形。
+
+@code('${DEMO_PATH}/cool-icon/demo/Circle.vue')
+
+### 方形
+
+使用 `shape="square"` 属性设置外框为方形。
+
+@code('${DEMO_PATH}/cool-icon/demo/Square.vue')
+
+### 三角形
+
+使用 `shape="triangle"` 属性设置外框为三角形。
+
+@code('${DEMO_PATH}/cool-icon/demo/Triangle.vue')
+
+### 花朵
+
+使用 `shape="flower"` 属性设置外框为花朵形状。
+
+@code('${DEMO_PATH}/cool-icon/demo/Flower.vue')
+
+### 尺寸
+
+使用 `size` 属性设置外框尺寸，使用 `icon-size` 设置图标尺寸。
+
+@code('${DEMO_PATH}/cool-icon/demo/Size.vue')
+
+## API
+
+### CoolIconProps
+
+| 属性       | 描述               | 类型                                                     | 默认值 |
+| ---------- | ------------------ | -------------------------------------------------------- | ------ |
+| root-class | 组件根元素类名     | string                                                   | -      |
+| root-style | 组件根元素样式     | StyleValue                                               | -      |
+| shape      | 设置外框的形状     | 'circle' \| 'square' \| 'oval' \| 'triangle' \| 'flower' | 'oval' |
+| color      | 设置图标颜色       | string                                                   | -      |
+| background | 设置外框背景色颜色 | string                                                   | -      |
+| size       | 设置外框尺寸       | string                                                   | -      |
+| icon-size  | 设置图标尺寸       | string                                                   | -      |
+
+### CoolIconSlots
+
+| 插槽    | 描述           | 属性 |
+| ------- | -------------- | ---- |
+| default | 自定义默认内容 | -    |
+
+## 主题定制
+
+### CSS 变量
+
+@code('./variables.scss#variables')

package/components/cool-icon/common.d.ts

@@ -0,0 +1,21 @@
+import { type StyleValue } from 'vue';
+export interface CoolIconProps {
+    rootStyle?: StyleValue;
+    rootClass?: string;
+    shape?: 'circle' | 'square' | 'oval' | 'triangle' | 'flower';
+    size?: string;
+    iconSize?: string;
+    color?: string;
+    background?: string;
+}
+export declare const defaultCoolIconProps: {
+    shape: CoolIconProps["shape"];
+};
+export interface CoolIconSlots {
+    default?(props: Record<string, never>): any;
+}
+export interface CoolIconEmits {
+    (e: 'click', event: any): void;
+}
+export interface CoolIconExpose {
+}

package/components/cool-icon/common.js

@@ -0,0 +1,2 @@
+import { defaultConfig } from '../config';
+export const defaultCoolIconProps = defaultConfig.coolIcon;

package/components/cool-icon/cool-icon.d.ts

@@ -0,0 +1,16 @@
+import { type CoolIconProps, type CoolIconSlots } from './common';
+declare function __VLS_template(): Readonly<CoolIconSlots> & CoolIconSlots;
+declare const __VLS_component: import("vue").DefineComponent<CoolIconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    click: (event: any) => any;
+}, string, import("vue").PublicProps, Readonly<CoolIconProps> & Readonly<{
+    onClick?: ((event: any) => any) | undefined;
+}>, {
+    shape: "circle" | "square" | "oval" | "triangle" | "flower";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/cool-icon/cool-icon.vue

@@ -0,0 +1,86 @@
+<template>
+  <view :class="coolIconClass" :style="coolIconStyle" @click="onClick">
+    <view :class="bgClass" :style="bgStyle">
+      <view :class="bem.e('adorns')">
+        <view v-for="i in 6" :key="i" :class="bem.e('adorn')"></view>
+      </view>
+    </view>
+    <view :class="bem.e('icon')">
+      <slot></slot>
+    </view>
+  </view>
+</template>
+
+<script>
+import { mergeDefaults as _mergeDefaults, defineComponent as _defineComponent } from "vue";
+import { computed } from "vue";
+import { classNames, stringifyStyle, createBem } from "../../utils";
+import {
+  defaultCoolIconProps
+} from "./common";
+/**
+ * @property {string} rootClass 组件根元素类名，默认值：-。
+ * @property {StyleValue} rootStyle 组件根元素样式，默认值：-。
+ * @property {'circle' | 'square' | 'oval' | 'triangle' | 'flower'} shape 设置外框的形状，默认值：'oval'。
+ * @property {string} color 设置图标颜色，默认值：-。
+ * @property {string} background 设置外框背景色颜色，默认值：-。
+ * @property {string} size 设置外框尺寸，默认值：-。
+ * @property {string} iconSize 设置图标尺寸，默认值：-。
+ */
+export default  _defineComponent({
+  ...{
+    options: {
+      virtualHost: true,
+      styleIsolation: "shared"
+    }
+  },
+  __name: "cool-icon",
+  props:  _mergeDefaults({
+    rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
+    rootClass: { type: String, required: false },
+    shape: { type: String, required: false },
+    size: { type: String, required: false },
+    iconSize: { type: String, required: false },
+    color: { type: String, required: false },
+    background: { type: String, required: false }
+  }, defaultCoolIconProps),
+  emits: ["click"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const bem = createBem("cool-icon");
+    const onClick = (event) => {
+      emit("click", event);
+    };
+    __expose({});
+    const coolIconClass = computed(() => {
+      return classNames(bem.b(), bem.m(props.shape), props.rootClass);
+    });
+    const coolIconStyle = computed(() => {
+      return stringifyStyle(
+        {
+          width: props.size,
+          height: props.size,
+          fontSize: props.iconSize,
+          color: props.color
+        },
+        props.rootStyle
+      );
+    });
+    const bgClass = computed(() => {
+      return classNames(bem.e("bg"));
+    });
+    const bgStyle = computed(() => {
+      return stringifyStyle({
+        background: props.background
+      });
+    });
+    const __returned__ = { props, emit, bem, onClick, coolIconClass, coolIconStyle, bgClass, bgStyle };
+    return __returned__;
+  }
+});
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>

package/components/cool-icon/index.d.ts

@@ -0,0 +1 @@
+export type { CoolIconProps, CoolIconSlots, CoolIconEmits, CoolIconExpose, } from './common';

package/components/cool-icon/index.js

@@ -0,0 +1 @@
+export {};