sard-uniapp 1.23.5 → 1.24.0

package/components/cool-icon/index.scss

@@ -0,0 +1,186 @@
+@use '../style/base' as *;
+
+@mixin box-shadow {
+  &::before {
+    content: '';
+    display: block;
+    background: inherit;
+    filter: blur(5px);
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 5px;
+    left: 5px;
+    z-index: -1;
+    opacity: var(--sar-cool-icon-shadow-opacity);
+    transform-origin: 0 0;
+    border-radius: inherit;
+    transform: scale(1);
+  }
+}
+
+@include bem(cool-icon) {
+  @include b() {
+    @include universal;
+
+    position: relative;
+    display: inline-block;
+
+    width: var(--sar-cool-icon-size);
+    height: var(--sar-cool-icon-size);
+    font-size: var(--sar-cool-icon-icon-size);
+
+    @include m(square) {
+      border-radius: var(--sar-cool-icon-square-border-radius);
+
+      @include e(bg) {
+        @include box-shadow;
+      }
+    }
+
+    @include m(oval) {
+      border-radius: var(--sar-cool-icon-oval-border-radius);
+
+      @include e(bg) {
+        transform: rotate(-19deg);
+        @include box-shadow;
+      }
+    }
+
+    @include m(triangle) {
+      border-radius: var(--sar-cool-icon-triangle-border-radius);
+
+      @include e(bg) {
+        @include box-shadow;
+      }
+    }
+
+    @include m(circle) {
+      border-radius: 50%;
+
+      @include e(bg) {
+        @include box-shadow;
+      }
+    }
+
+    @include m(flower) {
+      border-radius: var(--sar-cool-icon-oval-border-radius);
+
+      @include e(bg) {
+        width: 62.5%;
+        margin: auto;
+        border-radius: var(--sar-rounded-full);
+
+        &::before,
+        &::after {
+          content: '';
+          position: absolute;
+          left: 0;
+          right: 0;
+          top: 0;
+          bottom: 0;
+          width: 100%;
+          height: 100%;
+          background: inherit;
+          border-radius: inherit;
+          transform-origin: center center;
+          opacity: 0.8;
+        }
+
+        &::before {
+          transform: rotate(60deg);
+        }
+
+        &::after {
+          transform: rotate(-60deg);
+        }
+
+        @include e(adorns) {
+          display: none;
+        }
+      }
+    }
+  }
+
+  @include e(bg) {
+    @include universal;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+    z-index: 1;
+  }
+
+  @include e(icon) {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: inherit;
+    line-height: 1;
+    z-index: 2;
+    border-radius: inherit;
+  }
+
+  @include e(adorns) {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    z-index: 1;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+    overflow: hidden;
+  }
+
+  @include e(adorn) {
+    position: absolute;
+    border-radius: 50%;
+    background: var(--sar-cool-icon-adorn-bg);
+
+    &:nth-child(1) {
+      top: -13.33%;
+      left: -9.46%;
+      width: 45.33%;
+      height: 45.33%;
+    }
+    &:nth-child(2) {
+      top: 8.66%;
+      left: 66.66%;
+      width: 10%;
+      height: 10%;
+    }
+    &:nth-child(3) {
+      top: 79.33%;
+      left: 18%;
+      width: 6.66%;
+      height: 6.66%;
+    }
+    &:nth-child(4) {
+      top: 86%;
+      left: 26.66%;
+      width: 4%;
+      height: 4%;
+    }
+    &:nth-child(5) {
+      top: 72%;
+      left: 44.66%;
+      width: 47.33%;
+      height: 38.66%;
+    }
+    &:nth-child(6) {
+      top: 42%;
+      left: 58.66%;
+      width: 72.66%;
+      height: 66.66%;
+    }
+  }
+}

package/components/cool-icon/variables.scss

@@ -0,0 +1,12 @@
+// #variables
+page,
+.sar-portal {
+  --sar-cool-icon-size: 100rpx;
+  --sar-cool-icon-icon-size: 60rpx;
+  --sar-cool-icon-oval-border-radius: 43% 57% / 57% 43%;
+  --sar-cool-icon-square-border-radius: 25%;
+  --sar-cool-icon-triangle-border-radius: 68% 32% 40% 60%/44% 34% 66% 56%;
+  --sar-cool-icon-shadow-opacity: 0.4;
+  --sar-cool-icon-adorn-bg: rgba(255, 255, 255, 0.2);
+}
+// #endvariables

package/components/datetime-picker-input/datetime-picker-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/datetime-range-picker-input/datetime-range-picker-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/keyboard/README.md

@@ -51,26 +51,27 @@ import Keyboard from 'sard-uniapp/components/keyboard/keyboard.vue'
 
 ### KeyboardProps
 
-| 属性       | 描述           | 类型                                                   | 默认值   |
-| ---------- | -------------- | ------------------------------------------------------ | -------- |
-| root-class | 组件根元素类名 | string                                                 | -        |
-| root-style | 组件根元素样式 | StyleValue                                             | -        |
-| type       | 键盘类型       | 'number' \| 'digit' \| 'idcard' \| 'random' \| 'plate' | 'number' |
+| 属性                 | 描述               | 类型                                                   | 默认值    |
+| -------------------- | ------------------ | ------------------------------------------------------ | --------- |
+| root-class           | 组件根元素类名     | string                                                 | -         |
+| root-style           | 组件根元素样式     | StyleValue                                             | -         |
+| type                 | 键盘类型           | 'number' \| 'digit' \| 'idcard' \| 'random' \| 'plate' | 'number'  |
+| mode<sup>1.24+</sup> | plate 键盘时的模式 | 'chinese' \| 'english'                                 | 'chinese' |
 
 ### KeyboardEmits
 
-| 事件                      | 描述                     | 类型                                   |
-| ------------------------- | ------------------------ | -------------------------------------- |
-| input                     | 可输入按键点击时触发     | (key: string) => void                  |
-| delete                    | 点击删除按钮时触发       | () => void                             |
-| toggle <sup>1.23.3+</sup> | 切换车牌号的中英文时触发 | (mode: 'chinese' \| 'english') => void |
+| 事件                     | 描述                     | 类型                                   |
+| ------------------------ | ------------------------ | -------------------------------------- |
+| input                    | 可输入按键点击时触发     | (key: string) => void                  |
+| delete                   | 点击删除按钮时触发       | () => void                             |
+| toggle<sup>1.23.3+</sup> | 切换车牌号的中英文时触发 | (mode: 'chinese' \| 'english') => void |
 
 ### KeyBoardExpose
 
-| 属性    | 描述                   | 类型       |
-| ------- | ---------------------- | ---------- |
-| shuffle | 重新打乱随机键盘按键   | () => void |
-| toggle  | 切换车牌号的中英文按键 | () => void |
+| 属性                     | 描述                                 | 类型                                   |
+| ------------------------ | ------------------------------------ | -------------------------------------- |
+| shuffle                  | 重新打乱随机键盘按键                 | () => void                             |
+| toggle<sup>1.23.6+</sup> | 切换车牌号的中英文按键，可选传入mode | (mode?: 'chinese'\| 'english') => void |
 
 ## 主题定制
 

package/components/keyboard/common.d.ts

@@ -3,9 +3,11 @@ export interface KeyboardProps {
     rootStyle?: StyleValue;
     rootClass?: string;
     type?: 'number' | 'digit' | 'idcard' | 'random' | 'plate';
+    mode?: KeyboardPlateMode;
 }
 export declare const defaultKeyboardProps: {
     type: KeyboardProps["type"];
+    mode: KeyboardProps["mode"];
 };
 export interface KeyboardSlots {
     default?(props: Record<string, never>): any;
@@ -18,7 +20,7 @@ export interface KeyboardEmits {
 }
 export interface KeyBoardExpose {
     shuffle: () => void;
-    toggle: () => void;
+    toggle: (mode?: KeyboardPlateMode) => void;
 }
 export declare const numberKeys: string[];
 export declare const digitKeys: string[];

package/components/keyboard/keyboard.d.ts

@@ -2,7 +2,7 @@ import { type KeyboardProps, type KeyboardSlots, type KeyboardPlateMode } from '
 declare function __VLS_template(): Readonly<KeyboardSlots> & KeyboardSlots;
 declare const __VLS_component: import("vue").DefineComponent<KeyboardProps, {
     shuffle: () => void;
-    toggle: () => void;
+    toggle: (mode?: KeyboardPlateMode) => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     delete: () => any;
     input: (key: string) => any;
@@ -13,6 +13,7 @@ declare const __VLS_component: import("vue").DefineComponent<KeyboardProps, {
     onToggle?: ((mode: KeyboardPlateMode) => any) | undefined;
 }>, {
     type: "number" | "digit" | "idcard" | "random" | "plate";
+    mode: KeyboardPlateMode;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;

package/components/keyboard/keyboard.vue

@@ -87,7 +87,7 @@
         <view
           :class="toggleClass"
           :style="`order: ${interceptOrder}`"
-          @click="onToggle"
+          @click="onToggle()"
         >
           <view :class="bem.e('key')">
             {{ toggleKey }}
@@ -121,6 +121,7 @@ import SarIcon from "../icon/icon.vue";
  * @property {string} rootClass 组件根元素类名，默认值：-。
  * @property {StyleValue} rootStyle 组件根元素样式，默认值：-。
  * @property {'number' | 'digit' | 'idcard' | 'random' | 'plate'} type 键盘类型，默认值：'number'。
+ * @property {'chinese' | 'english'} mode plate 键盘时的模式，默认值：'chinese'。
  * @event {(key: string) => void} input 可输入按键点击时触发
  * @event {() => void} delete 点击删除按钮时触发
  * @event {(mode: 'chinese' | 'english') => void} toggle 切换车牌号的中英文时触发
@@ -139,7 +140,8 @@ export default  _defineComponent({
   props:  _mergeDefaults({
     rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
     rootClass: { type: String, required: false },
-    type: { type: String, required: false }
+    type: { type: String, required: false },
+    mode: { type: String, required: false }
   }, defaultKeyboardProps),
   emits: ["input", "delete", "toggle"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -156,8 +158,8 @@ export default  _defineComponent({
       shuffle() {
         randomKeys.value = getRandomKeys();
       },
-      toggle() {
-        onToggle();
+      toggle(mode2) {
+        onToggle(mode2);
       }
     });
     const randomKeys = ref([]);
@@ -172,7 +174,7 @@ export default  _defineComponent({
         immediate: true
       }
     );
-    const mode = ref("chinese");
+    const mode = ref(props.mode);
     const toggleKey = computed(() => {
       return {
         chinese: "ABC",
@@ -186,8 +188,8 @@ export default  _defineComponent({
       const overflow = chineseKeys.length % 10;
       return chineseKeys.length - (overflow > 7 ? 0 : overflow + 1);
     });
-    const onToggle = () => {
-      mode.value = mode.value === "chinese" ? "english" : "chinese";
+    const onToggle = (newMode) => {
+      mode.value = newMode || (mode.value === "chinese" ? "english" : "chinese");
       emit("toggle", mode.value);
     };
     const keyboardClass = computed(() => {

package/components/radio-input/radio-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/segmented/README.md

@@ -0,0 +1,147 @@
+---
+nav: 组件
+title: Segmented
+subtitle: 分段控制器
+group: 表单组件
+version: 1.24+
+---
+
+## 介绍
+
+用于展示多个选项并允许用户选择其中单个选项。
+
+## 引入
+
+```ts
+import Segmented from 'sard-uniapp/components/segmented/segmented.vue'
+```
+
+## 代码演示
+
+### 基础使用
+
+使用 `v-model` 双向绑定当前值，使用 `options` 定义选项内容。
+
+@code('${DEMO_PATH}/segmented/demo/Basic.vue')
+
+### 尺寸
+
+通过 `size` 属性来定义尺寸大小。
+
+@code('${DEMO_PATH}/segmented/demo/Size.vue')
+
+### 胶囊形状
+
+使用 `shape="round"` 属性可定义胶囊形状。
+
+@code('${DEMO_PATH}/segmented/demo/Shape.vue')
+
+### 设置图标
+
+选项的 `icon` 属性可定义放置在 `label` 左边的图标。
+
+@code('${DEMO_PATH}/segmented/demo/Icon.vue')
+
+### 只设置图标
+
+可以不配置 `label` 而只配置 `icon`。
+
+@code('${DEMO_PATH}/segmented/demo/OnlyIcon.vue')
+
+### 垂直方向
+
+设置 `direction="vertical"` 属性可垂直排列分段器。
+
+@code('${DEMO_PATH}/segmented/demo/Direction.vue')
+
+### 禁用
+
+可在 `segmented` 上设置 `disabled` 禁用所有选项，或者在选项上设置 `disabled` 禁用单个选项。
+
+如果置于表单组件中，也受表单组件 `disabled` 属性的影响。
+
+@code('${DEMO_PATH}/segmented/demo/Disabled.vue')
+
+### 自定义内容
+
+如果需要自定义内容，可使用 `segmented-item` 组件，需自定义循环和传递 `value` 属性。`options` 属性也需要传递，以便获取当前值的下标。
+
+@code('${DEMO_PATH}/segmented/demo/Custom.vue')
+
+## API
+
+### SegmentedProps
+
+| 属性           | 描述                                  | 类型                           | 默认值                           |
+| -------------- | ------------------------------------- | ------------------------------ | -------------------------------- |
+| root-class     | 组件根元素类名                        | string                         | -                                |
+| root-style     | 组件根元素样式                        | StyleValue                     | -                                |
+| model-value    | 绑定值                                | any                            | -                                |
+| disabled       | 是否禁用                              | boolean                        | false                            |
+| readonly       | 是否只读                              | boolean                        | false                            |
+| size           | 组件大小                              | 'small' \| 'middle' \| 'large' | 'middle'                         |
+| direction      | 展示的方向                            | 'horizontal' \| 'vertical'     | 'horizontal'                     |
+| shape          | 形状                                  | 'square' \| 'round'            | 'square'                         |
+| options        | 选项的数据                            | SegmentedOption[]              | -                                |
+| option-keys    | 自定义 options 的 label、value 的字段 | SegmentedOptionKeys            | {label: 'label', value: 'value'} |
+| validate-event | 是否触发表单验证                      | boolean                        | true                             |
+
+### SegmentedOption
+
+```ts
+type SegmentedOption =
+  | {
+      [key: PropertyKey]: any
+    }
+  | string
+  | number
+  | boolean
+```
+
+### SegmentedOptionKeys
+
+```ts
+export interface SegmentedOptionKeys {
+  label?: string
+  value?: string
+}
+```
+
+### SegmentedSlots
+
+| 插槽    | 描述           | 属性 |
+| ------- | -------------- | ---- |
+| default | 自定义默认内容 | -    |
+
+### SegmentedEmits
+
+| 事件               | 描述               | 类型                 |
+| ------------------ | ------------------ | -------------------- |
+| update:model-value | 当所选值更改时触发 | (value: any) => void |
+| change             | 当所选值更改时触发 | (value: any) => void |
+
+### SegmentedItemProps
+
+| 属性        | 描述           | 类型                        | 默认值 |
+| ----------- | -------------- | --------------------------- | ------ |
+| root-class  | 组件根元素类名 | string                      | -      |
+| root-style  | 组件根元素样式 | StyleValue                  | -      |
+| label       | 展示文本       | string \| number            | -      |
+| value       | 用于绑定的值   | string \| number \| boolean | -      |
+| icon        | 图标           | string                      | -      |
+| icon-family | 图标字体       | string                      | -      |
+| icon-size   | 图标大小       | string                      | -      |
+| disabled    | 禁用状态       | boolean                     | false  |
+| readonly    | 只读状态       | boolean                     | false  |
+
+### SegmentedItemSlots
+
+| 插槽    | 描述           | 属性 |
+| ------- | -------------- | ---- |
+| default | 自定义默认内容 | -    |
+
+## 主题定制
+
+### CSS 变量
+
+@code('./variables.scss#variables')

package/components/segmented/common.d.ts

@@ -0,0 +1,52 @@
+import { type StyleValue } from 'vue';
+export type SegmentedOption = {
+    [key: PropertyKey]: any;
+} | string | number | boolean;
+export interface SegmentedOptionKeys {
+    label?: string;
+    value?: string;
+    disabled?: string;
+}
+export declare const defaultOptionKeys: {
+    label: string;
+    value: string;
+    disabled: string;
+};
+export type SegmentedSize = 'small' | 'middle' | 'large';
+export interface SegmentedProps {
+    rootStyle?: StyleValue;
+    rootClass?: string;
+    modelValue?: any;
+    disabled?: boolean;
+    readonly?: boolean;
+    size?: SegmentedSize;
+    direction?: 'horizontal' | 'vertical';
+    shape?: 'square' | 'round';
+    options?: SegmentedOption[];
+    optionKeys?: SegmentedOptionKeys;
+    validateEvent?: boolean;
+}
+export declare const defaultSegmentedProps: {
+    size: SegmentedProps["size"];
+    shape: SegmentedProps["shape"];
+    direction: SegmentedProps["direction"];
+    validateEvent: boolean;
+};
+export interface SegmentedSlots {
+    default?(props: Record<string, never>): any;
+}
+export interface SegmentedEmits {
+    (e: 'update:model-value', value: any): void;
+    (e: 'change', value: any): void;
+}
+export interface SegmentedExpose {
+}
+export interface SegmentedContext {
+    disabled: SegmentedProps['disabled'];
+    readonly: SegmentedProps['readonly'];
+    size: SegmentedProps['size'];
+    shape: SegmentedProps['shape'];
+    value: any;
+    toggle: (value: any) => void;
+}
+export declare const segmentedContextSymbol: unique symbol;

package/components/segmented/common.js

@@ -0,0 +1,8 @@
+import { defaultConfig } from '../config';
+export const defaultOptionKeys = {
+    label: 'label',
+    value: 'value',
+    disabled: 'disabled',
+};
+export const defaultSegmentedProps = defaultConfig.segmented;
+export const segmentedContextSymbol = Symbol('segmented-context');

package/components/segmented/index.d.ts

@@ -0,0 +1 @@
+export type { SegmentedProps, SegmentedSlots, SegmentedEmits, SegmentedExpose, SegmentedSize, } from './common';

package/components/segmented/index.js

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

package/components/segmented/index.scss

@@ -0,0 +1,60 @@
+@use '../style/base' as *;
+
+@include bem(segmented) {
+  @include b() {
+    @include universal;
+    flex-direction: row;
+    align-items: stretch;
+    min-height: var(--sar-segmented-min-height);
+    padding: var(--sar-segmented-padding);
+    border-radius: var(--sar-segmented-border-radius);
+    background-color: var(--sar-segmented-bg);
+    font-size: var(--sar-segmented-font-size);
+
+    @include m(vertical) {
+      display: inline-flex;
+
+      @include e(group) {
+        flex-direction: column;
+      }
+
+      @include e(pointer) {
+        width: 100%;
+      }
+    }
+
+    @include m(small) {
+      min-height: var(--sar-segmented-small-min-height);
+    }
+
+    @include m(large) {
+      min-height: var(--sar-segmented-large-min-height);
+    }
+
+    @include m(round) {
+      border-radius: var(--sar-rounded-full);
+
+      @include e(pointer) {
+        border-radius: var(--sar-rounded-full);
+      }
+    }
+  }
+
+  @include e(pointer) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    border-radius: calc(var(--sar-segmented-border-radius) - 4rpx);
+    background-color: var(--sar-segmented-pointer-bg);
+    box-shadow: var(--sar-segmented-pointer-box-shadow);
+    transition: transform var(--sar-segmented-pointer-duration);
+  }
+
+  @include e(group) {
+    @include universal;
+    flex-direction: row;
+    align-items: stretch;
+    width: 100%;
+  }
+}

package/components/segmented/segmented.d.ts

@@ -0,0 +1,21 @@
+import { type SegmentedProps, type SegmentedSlots } from './common';
+declare function __VLS_template(): Readonly<SegmentedSlots> & SegmentedSlots;
+declare const __VLS_component: import("vue").DefineComponent<SegmentedProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:model-value": (value: any) => any;
+    change: (value: any) => any;
+}, string, import("vue").PublicProps, Readonly<SegmentedProps> & Readonly<{
+    "onUpdate:model-value"?: ((value: any) => any) | undefined;
+    onChange?: ((value: any) => any) | undefined;
+}>, {
+    size: import("./common").SegmentedSize;
+    shape: "square" | "round";
+    direction: "horizontal" | "vertical";
+    validateEvent: boolean;
+}, {}, {}, {}, 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;
+    };
+};