sard-uniapp 1.19.4 → 1.20.0

package/components/radio-popout/README.md

@@ -24,18 +24,32 @@ import RadioPopout from 'sard-uniapp/components/radio-popout/radio-popout.vue'
 
 @code('${DEMO_PATH}/radio-popout/demo/Basic.vue')
 
+### 禁用选项 <sup>1.20+</sup>
+
+设置了 `disabled` 的选项可禁止选择。
+
+@code('${DEMO_PATH}/radio-popout/demo/Disabled.vue')
+
+### 可搜索的 <sup>1.20+</sup>
+
+使用 `searchable` 显示搜索框，可用于过滤选项列表。
+
+@code('${DEMO_PATH}/radio-popout/demo/Search.vue')
+
 ## API
 
 ### RadioPopoutProps
 
 继承 [`RadioGroupProps`](./radio#RadioGroupProps) 并有以下额外属性：
 
-| 属性              | 描述             | 类型       | 默认值 |
-| ----------------- | ---------------- | ---------- | ------ |
-| popout-class      | 弹窗框根元素类名 | string     | -      |
-| popout-style      | 弹窗框根元素样式 | StyleValue | -      |
-| visible (v-model) | 是否显示弹出框   | boolean    | -      |
-| title             | 弹出框标题       | string     | -      |
+| 属性                                | 描述                 | 类型       | 默认值 |
+| ----------------------------------- | -------------------- | ---------- | ------ |
+| popout-class                        | 弹窗框根元素类名     | string     | -      |
+| popout-style                        | 弹窗框根元素样式     | StyleValue | -      |
+| visible (v-model)                   | 是否显示弹出框       | boolean    | -      |
+| title                               | 弹出框标题           | string     | -      |
+| searchable <sup>1.20+</sup>         | 是否可搜索           | boolean    | false  |
+| filter-placeholder <sup>1.20+</sup> | 搜索输入框占位符内容 | string     | -      |
 
 ### RadioPopoutEmits
 

package/components/radio-popout/common.d.ts

@@ -5,6 +5,8 @@ export interface RadioPopoutProps extends RadioGroupProps {
     title?: string;
     popoutClass?: string;
     popoutStyle?: StyleValue;
+    searchable?: boolean;
+    filterPlaceholder?: string;
 }
 export declare const defaultRadioPopoutProps: () => {
     options: () => never[];

package/components/radio-popout/index.scss

@@ -7,5 +7,9 @@
 
   @include e(scroll) {
     max-height: var(--sar-radio-popout-max-height);
+
+    @include m(searchable) {
+      height: var(--sar-checkbox-popout-max-height);
+    }
   }
 }

package/components/radio-popout/radio-popout.vue

@@ -7,49 +7,61 @@
     @confirm="onConfirm"
   >
     <template #visible="{ already }">
-      <view v-if="already" :class="containerClass">
-        <scroll-view
-          :class="bem.e('scroll')"
-          scroll-y
-          trap-scroll
-          :upper-threshold="0"
-          :lower-threshold="0"
-          :throttle="false"
-          @scroll="onScroll"
-          @scrolltoupper="onScrolltoupper"
-          @scrolltolower="onScrolltolower"
-        >
-          <sar-radio-group
-            :size="size"
-            :type="type"
-            :checkedColor="checkedColor"
-            :direction="direction"
-            :validate-event="false"
-            :model-value="popoutValue"
-            @change="onChange"
+      <view v-if="already">
+        <sar-list-item v-if="searchable">
+          <sar-input
+            v-model="searchValue"
+            :placeholder="filterPlaceholder"
+            clearable
           >
-            <template #custom="{ toggle }">
-              <sar-list inlaid>
-                <sar-list-item
-                  v-for="option in options"
-                  :key="getMayPrimitiveOption(option, fieldKeys.value)"
-                  :title="getMayPrimitiveOption(option, fieldKeys.label)"
-                  hover
-                  @click="
-                    toggle(getMayPrimitiveOption(option, fieldKeys.value))
-                  "
-                >
-                  <template #value>
-                    <sar-radio
-                      readonly
-                      :value="getMayPrimitiveOption(option, fieldKeys.value)"
-                    />
-                  </template>
-                </sar-list-item>
-              </sar-list>
+            <template #prepend>
+              <sar-icon family="sari" name="search" />
             </template>
-          </sar-radio-group>
-        </scroll-view>
+          </sar-input>
+        </sar-list-item>
+        <view :class="containerClass">
+          <scroll-view
+            :class="scrollClass"
+            scroll-y
+            trap-scroll
+            :upper-threshold="0"
+            :lower-threshold="0"
+            :throttle="false"
+            @scroll="onScroll"
+            @scrolltoupper="onScrolltoupper"
+            @scrolltolower="onScrolltolower"
+          >
+            <sar-radio-group
+              :size="size"
+              :type="type"
+              :checkedColor="checkedColor"
+              :direction="direction"
+              :validate-event="false"
+              :model-value="popoutValue"
+              @change="onChange"
+            >
+              <template #custom="{ toggle }">
+                <sar-list inlaid>
+                  <sar-list-item
+                    v-for="option in filteredOptions"
+                    :key="option.value"
+                    :title="option.label"
+                    :hover="!option.disabled"
+                    @click="select(option, toggle)"
+                  >
+                    <template #icon>
+                      <sar-radio
+                        readonly
+                        :disabled="option.disabled"
+                        :value="option.value"
+                      />
+                    </template>
+                  </sar-list-item>
+                </sar-list>
+              </template>
+            </sar-radio-group>
+          </scroll-view>
+        </view>
       </view>
     </template>
   </sar-popout>
@@ -57,12 +69,14 @@
 
 <script>
 import { mergeDefaults as _mergeDefaults, defineComponent as _defineComponent } from "vue";
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import SarPopout from "../popout/popout.vue";
 import SarRadioGroup from "../radio-group/radio-group.vue";
 import SarRadio from "../radio/radio.vue";
 import SarList from "../list/list.vue";
 import SarListItem from "../list-item/list-item.vue";
+import SarIcon from "../icon/icon.vue";
+import SarInput from "../input/input.vue";
 import { classNames, createBem, getMayPrimitiveOption } from "../../utils";
 import {
   defaultRadioPopoutProps
@@ -86,6 +100,8 @@ import { useScrollSide, useFormPopout } from "../../use";
  * @property {StyleValue} popoutStyle 弹窗框根元素样式，默认值：-。
  * @property {boolean} visible 是否显示弹出框，默认值：-。
  * @property {string} title 弹出框标题，默认值：-。
+ * @property {boolean} searchable 是否可搜索，默认值：false。
+ * @property {string} filterPlaceholder 搜索输入框占位符内容，默认值：-。
  * @event {(visible: boolean) => void} update 弹出框显隐时触发
  * @event {(value: any | undefined) => void} change 单选输入组件值改变时触发
  */
@@ -96,6 +112,8 @@ export default  _defineComponent({
     SarRadio,
     SarList,
     SarListItem,
+    SarIcon,
+    SarInput,
   },
   ...{
     options: {
@@ -109,6 +127,8 @@ export default  _defineComponent({
     title: { type: String, required: false },
     popoutClass: { type: String, required: false },
     popoutStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
+    searchable: { type: Boolean, required: false },
+    filterPlaceholder: { type: String, required: false },
     rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
     rootClass: { type: String, required: false },
     modelValue: { type: null, required: false },
@@ -135,6 +155,28 @@ export default  _defineComponent({
     const fieldKeys = computed(() => {
       return Object.assign({}, defaultOptionKeys, props.optionKeys);
     });
+    const objectOptions = computed(() => {
+      return props.options.map((option) => {
+        return {
+          label: getMayPrimitiveOption(option, fieldKeys.value.label),
+          value: getMayPrimitiveOption(option, fieldKeys.value.value),
+          disabled: getMayPrimitiveOption(option, fieldKeys.value.disabled) === true
+        };
+      });
+    });
+    const select = (option, toggle) => {
+      if (!option.disabled) {
+        toggle(option.value);
+      }
+    };
+    const searchValue = ref("");
+    const filteredOptions = computed(() => {
+      const searchString = searchValue.value;
+      if (!searchString) return objectOptions.value;
+      return objectOptions.value.filter((option) => {
+        return option.label.includes(searchString);
+      });
+    });
     const { scrollSide, onScroll, onScrolltoupper, onScrolltolower } = useScrollSide();
     const containerClass = computed(() => {
       return classNames(
@@ -142,9 +184,13 @@ export default  _defineComponent({
         bem.em("container", scrollSide.value, scrollSide.value)
       );
     });
-    const __returned__ = { props, emit, bem, innerVisible, popoutValue, onChange, onConfirm, fieldKeys, scrollSide, onScroll, onScrolltoupper, onScrolltolower, containerClass, SarPopout, SarRadioGroup, SarRadio, SarList, SarListItem, get getMayPrimitiveOption() {
-      return getMayPrimitiveOption;
-    } };
+    const scrollClass = computed(() => {
+      return classNames(
+        bem.e("scroll"),
+        bem.em("scroll", "searchable", props.searchable)
+      );
+    });
+    const __returned__ = { props, emit, bem, innerVisible, popoutValue, onChange, onConfirm, fieldKeys, objectOptions, select, searchValue, filteredOptions, scrollSide, onScroll, onScrolltoupper, onScrolltolower, containerClass, scrollClass, SarPopout, SarRadioGroup, SarRadio, SarList, SarListItem, SarIcon, SarInput };
     return __returned__;
   }
 });

package/components/read-more/README.md

@@ -0,0 +1,82 @@
+---
+nav: 组件
+title: ReadMore
+subtitle: 阅读更多
+group: 数据展示
+version: 1.20+
+---
+
+## 介绍
+
+该组件一般用于内容较长，预先收起一部分，点击再展开全部内容的场景。
+
+## 引入
+
+```ts
+import ReadMore from 'sard-uniapp/components/read-more/read-more.vue'
+```
+
+## 代码演示
+
+### 基础使用
+
+在默认插槽放置任意内容，默认会收起来，点击展开按钮时全部显示。
+
+为了避免滚动到一定位置再收起来的位置跳跃，可以使用 `keep-location` 属性保持收起后，按钮下面的内容依然在屏幕中原来的位置。
+
+只可用在页面滚动中，如果在 `scroll-view` 中，需要在 `close` 事件回调中自行实现。
+
+@code('${DEMO_PATH}/read-more/demo/Basic.vue')
+
+### 收起时最大高度
+
+可以使用 `max-height` 设置收起时的最大高度。
+
+@code('${DEMO_PATH}/read-more/demo/MaxHeight.vue')
+
+### 按钮文案
+
+使用 `open-text` 和 `close-text` 设置展开状态和收起状态时的按钮文案。
+
+@code('${DEMO_PATH}/read-more/demo/Text.vue')
+
+### 隐藏收起按钮
+
+设置 `hide-close` 后，在展开时不会再显示收起按钮。
+
+@code('${DEMO_PATH}/read-more/demo/HideClose.vue')
+
+## API
+
+### ReadMoreProps
+
+| 属性              | 描述                                                           | 类型       | 默认值 |
+| ----------------- | -------------------------------------------------------------- | ---------- | ------ |
+| root-class        | 组件根元素类名                                                 | string     | -      |
+| root-style        | 组件根元素样式                                                 | StyleValue | -      |
+| max-height        | 收起时最大展示高度                                             | number     | 200    |
+| hide-close        | 是否隐藏收起按钮，打开后就不能手动收起来了                     | boolean    | false  |
+| open-text         | 展开状态按钮文案                                               | string     | '收起' |
+| close-text        | 收起状态按钮文案                                               | string     | '展开' |
+| visible (v-model) | 控制展开和收起                                                 | boolean    | false  |
+| keep-location     | 收起时保持按钮下面的内容在屏幕中原来的位置，只可用在页面滚动中 | boolean    | false  |
+
+### ReadMoreSlots
+
+| 插槽    | 描述           | 属性 |
+| ------- | -------------- | ---- |
+| default | 自定义默认内容 | -    |
+
+### ReadMoreEmits
+
+| 事件           | 描述            | 类型                      |
+| -------------- | --------------- | ------------------------- |
+| update:visible | 展开/收起时触发 | (visible: boolean)=> void |
+| open           | 展开时触发      | () => void                |
+| close          | 收起时触发      | () => void                |
+
+## 主题定制
+
+### CSS 变量
+
+@code('./variables.scss#variables')

package/components/read-more/common.d.ts

@@ -0,0 +1,24 @@
+import { type StyleValue } from 'vue';
+export interface ReadMoreProps {
+    rootStyle?: StyleValue;
+    rootClass?: string;
+    maxHeight?: number;
+    hideClose?: boolean;
+    openText?: string;
+    closeText?: string;
+    visible?: boolean;
+    keepLocation?: boolean;
+}
+export declare const defaultReadMoreProps: {
+    maxHeight: number;
+};
+export interface ReadMoreSlots {
+    default?(props: Record<string, never>): any;
+}
+export interface ReadMoreEmits {
+    (e: 'update:visible', visible: boolean): void;
+    (e: 'open'): void;
+    (e: 'close'): void;
+}
+export interface ReadMoreExpose {
+}

package/components/read-more/common.js

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

package/components/read-more/index.d.ts

@@ -0,0 +1 @@
+export type { ReadMoreProps, ReadMoreSlots, ReadMoreEmits, ReadMoreExpose, } from './common';

package/components/read-more/index.js

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

package/components/read-more/index.scss

@@ -0,0 +1,41 @@
+@use '../style/base' as *;
+
+@include bem(read-more) {
+  @include b() {
+    @include universal;
+  }
+
+  @include e(content) {
+    position: relative;
+  }
+
+  @include e(shadow) {
+    @include universal;
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    max-height: var(--sar-read-more-shadow-max-height);
+    height: var(--sar-read-more-shadow-height);
+    background-image: var(--sar-read-more-shadow-bg-image);
+    display: none;
+  }
+
+  @include e(toggle) {
+    @include universal;
+    justify-content: center;
+    align-items: center;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  @include m(close) {
+    @include e(content) {
+      overflow: hidden;
+    }
+
+    @include e(shadow) {
+      display: flex;
+    }
+  }
+}

package/components/read-more/read-more.d.ts

@@ -0,0 +1,20 @@
+import { type ReadMoreProps, type ReadMoreSlots } from './common';
+declare function __VLS_template(): Readonly<ReadMoreSlots> & ReadMoreSlots;
+declare const __VLS_component: import("vue").DefineComponent<ReadMoreProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    close: () => any;
+    "update:visible": (visible: boolean) => any;
+    open: () => any;
+}, string, import("vue").PublicProps, Readonly<ReadMoreProps> & Readonly<{
+    onClose?: (() => any) | undefined;
+    "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
+    onOpen?: (() => any) | undefined;
+}>, {
+    maxHeight: number;
+}, {}, {}, {}, 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/read-more/read-more.vue

@@ -0,0 +1,168 @@
+<template>
+  <view :class="readMoreClass" :style="readMoreStyle">
+    <view :id="contentId" :class="bem.e('content')" :style="contentStyle">
+      <slot></slot>
+      <view :class="bem.e('shadow')"></view>
+    </view>
+    <view
+      v-if="!hideToggle"
+      :id="toggleId"
+      :class="bem.e('toggle')"
+      @touchstart="onTouchStart"
+      @mousedown="onMouseDown"
+    >
+      <sar-button type="pale-text" @click="onButtonClick">
+        <text>{{ toggleText }}</text>
+        <sar-icon family="sari" :name="toggleIcon" />
+      </sar-button>
+    </view>
+  </view>
+</template>
+
+<script>
+import { mergeDefaults as _mergeDefaults, defineComponent as _defineComponent } from "vue";
+import { computed, getCurrentInstance, ref, watch } from "vue";
+import {
+  classNames,
+  stringifyStyle,
+  createBem,
+  uniqid,
+  getBoundingClientRect
+} from "../../utils";
+import {
+  defaultReadMoreProps
+} from "./common";
+import SarButton from "../button/button.vue";
+import SarIcon from "../icon/icon.vue";
+import { useTranslate } from "../locale";
+import { useMouseDown, useSingleTask } from "../../use";
+/**
+ * @property {string} rootClass 组件根元素类名，默认值：-。
+ * @property {StyleValue} rootStyle 组件根元素样式，默认值：-。
+ * @property {number} maxHeight 收起时最大展示高度，默认值：200。
+ * @property {boolean} hideClose 是否隐藏收起按钮，打开后就不能手动收起来了，默认值：false。
+ * @property {string} openText 展开状态按钮文案，默认值：'收起'。
+ * @property {string} closeText 收起状态按钮文案，默认值：'展开'。
+ * @property {boolean} visible 控制展开和收起，默认值：false。
+ * @property {boolean} keepLocation 收起时保持按钮下面的内容在屏幕中原来的位置，只可用在页面滚动中，默认值：false。
+ * @event {(visible: boolean)=> void} update 展开/收起时触发
+ * @event {() => void} open 展开时触发
+ * @event {() => void} close 收起时触发
+ */
+export default  _defineComponent({
+  components: {
+    SarButton,
+    SarIcon,
+  },
+  ...{
+    options: {
+      virtualHost: true,
+      styleIsolation: "shared"
+    }
+  },
+  __name: "read-more",
+  props:  _mergeDefaults({
+    rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
+    rootClass: { type: String, required: false },
+    maxHeight: { type: Number, required: false },
+    hideClose: { type: Boolean, required: false },
+    openText: { type: String, required: false },
+    closeText: { type: String, required: false },
+    visible: { type: Boolean, required: false },
+    keepLocation: { type: Boolean, required: false }
+  }, defaultReadMoreProps),
+  emits: ["update:visible", "open", "close"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const bem = createBem("read-more");
+    const { t } = useTranslate("readMore");
+    const innerVisible = ref(props.visible);
+    const { startTask, onFinishTask } = useSingleTask();
+    watch(
+      () => props.visible,
+      () => {
+        onFinishTask(() => {
+          innerVisible.value = props.visible;
+        });
+      }
+    );
+    const handleClick = () => {
+      innerVisible.value = !innerVisible.value;
+      emit("update:visible", innerVisible.value);
+      if (innerVisible.value) {
+        emit("open");
+      } else {
+        onClose();
+        emit("close");
+      }
+    };
+    const onButtonClick = () => {
+      onFinishTask(handleClick);
+    };
+    const toggleText = computed(() => {
+      return innerVisible.value ? props.openText || t("fold") : props.closeText || t("unfold");
+    });
+    const toggleIcon = computed(() => {
+      return innerVisible.value ? "up" : "down";
+    });
+    const hideToggle = computed(() => {
+      return innerVisible.value && props.hideClose;
+    });
+    const contentId = uniqid();
+    const toggleId = uniqid();
+    const instance = getCurrentInstance();
+    let scrollTop = 0;
+    const onTouchStart = (event) => {
+      if (props.keepLocation && innerVisible.value) {
+        startTask(async () => {
+          const { clientY, pageY } = event.touches[0];
+          const contentRect = await getBoundingClientRect(`#${contentId}`, instance);
+          const toggleRect = await getBoundingClientRect(`#${toggleId}`, instance);
+          const closeContentHeight = Math.min(props.maxHeight, contentRect.height);
+          const openContentHeight = contentRect.height;
+          const offsetTop = clientY - toggleRect.top;
+          const openContentPageY = pageY - offsetTop - openContentHeight;
+          const closeContentClientY = toggleRect.top - closeContentHeight;
+          scrollTop = openContentPageY - closeContentClientY;
+        });
+      }
+    };
+    const onMouseDown = useMouseDown(onTouchStart);
+    const onClose = () => {
+      if (props.keepLocation) {
+        uni.pageScrollTo({
+          scrollTop,
+          duration: 0
+        });
+      }
+    };
+    __expose({});
+    const readMoreClass = computed(() => {
+      return classNames(
+        bem.b(),
+        bem.m("close", !innerVisible.value),
+        props.rootClass
+      );
+    });
+    const readMoreStyle = computed(() => {
+      return stringifyStyle(props.rootStyle);
+    });
+    const contentStyle = computed(() => {
+      return {
+        maxHeight: innerVisible.value ? "none" : props.maxHeight + "px"
+      };
+    });
+    const __returned__ = { props, emit, bem, t, innerVisible, startTask, onFinishTask, handleClick, onButtonClick, toggleText, toggleIcon, hideToggle, contentId, toggleId, instance, get scrollTop() {
+      return scrollTop;
+    }, set scrollTop(v) {
+      scrollTop = v;
+    }, onTouchStart, onMouseDown, onClose, readMoreClass, readMoreStyle, contentStyle, SarButton, SarIcon };
+    return __returned__;
+  }
+});
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>

package/components/read-more/variables.scss

@@ -0,0 +1,12 @@
+// #variables
+page,
+.sar-portal {
+  --sar-read-more-shadow-max-height: 80%;
+  --sar-read-more-shadow-height: 200rpx;
+  --sar-read-more-shadow-bg-image: linear-gradient(
+    to bottom,
+    rgba(var(--sar-emphasis-bg-rgb), 0),
+    rgba(var(--sar-emphasis-bg-rgb), 1) 95%
+  );
+}
+// #endvariables

package/components/resize-sensor/README.md

@@ -0,0 +1,55 @@
+---
+nav: 组件
+title: ResizeSensor
+subtitle: 尺寸传感器
+group: 反馈组件
+version: 1.20+
+---
+
+## 介绍
+
+可感知元素尺寸的变化，在元素宽度或高度变化时触发事件。
+
+## 引入
+
+```ts
+import ResizeSensor from 'sard-uniapp/components/resize-sensor/resize-sensor.vue'
+```
+
+## 代码演示
+
+### 基础使用
+
+将 `ResizeSensor` 组件放置在要监听尺寸变化的元素里面，此元素需要设置相对、绝对或固定定位；监听 `resize` 事件，此事件会在被监听元素尺寸发生变化时触发。
+
+@code('${DEMO_PATH}/resize-sensor/demo/Basic.vue')
+
+## API
+
+### ResizeSensorProps
+
+| 属性       | 描述                               | 类型       | 默认值 |
+| ---------- | ---------------------------------- | ---------- | ------ |
+| root-class | 组件根元素类名                     | string     | -      |
+| root-style | 组件根元素样式                     | StyleValue | -      |
+| initial    | 是否在初始化时触发 `resize` 事件   | boolean    | false  |
+| threshold  | 触发 `resize` 事件的阈值，单位毫秒 | number     | 150    |
+
+### ResizeSensorEmits
+
+| 事件   | 描述                       | 类型                      |
+| ------ | -------------------------- | ------------------------- |
+| resize | 在元素宽或高发生变化时触发 | (value: NodeRect) => void |
+
+#### NodeRect
+
+```ts
+interface NodeRect {
+  top: number
+  right: number
+  bottom: number
+  left: number
+  height: number
+  width: number
+}
+```