sard-uniapp 1.24.7 → 1.25.1

package/components/image/image.vue

@@ -0,0 +1,222 @@
+<template>
+  <view :class="imageClass" :style="imageStyle" @click="onClick">
+    <view
+      v-if="props.showLoading && status & STATUS.FIRST_LOADING"
+      :class="bem.e('loading')"
+    >
+      <slot v-if="$slots.loading" name="loading"></slot>
+      <sar-icon v-else :family="iconFamily || 'sari'" :name="loadingIcon" />
+    </view>
+    <view
+      v-else-if="props.showError && status & STATUS.ERROR"
+      :class="bem.e('error')"
+    >
+      <slot v-if="$slots.error" name="error"></slot>
+      <sar-icon v-else :family="iconFamily || 'sari'" :name="errorIcon" />
+    </view>
+    <view v-else :class="displayClass" :style="displayStyle"></view>
+    <!-- #ifdef WEB -->
+    <img
+      :src="src"
+      :loading="lazyLoad ? 'lazy' : 'eager'"
+      :class="interactionClass"
+      @load="onLoad"
+      @error="onError"
+    />
+    <!-- #endif -->
+    <!-- #ifndef WEB -->
+    <image
+      :src="src"
+      :lazy-load="lazyLoad"
+      :webp="webp"
+      :show-menu-by-longpress="showMenuByLongpress"
+      :class="interactionClass"
+      @load="onLoad"
+      @error="onError"
+    ></image>
+    <!-- #endif -->
+    <sar-resize-sensor
+      v-if="resizeSensorVisible"
+      initial
+      :threshold="0"
+      @resize="onResize"
+    />
+  </view>
+</template>
+
+<script>
+import { mergeDefaults as _mergeDefaults, defineComponent as _defineComponent } from "vue";
+import { computed, ref, watch } from "vue";
+import {
+  classNames,
+  stringifyStyle,
+  createBem,
+  isNullish
+} from "../../utils";
+import {
+  defaultImageProps,
+  FIX_MODES,
+  IMAGE_MODES
+} from "./common";
+import SarResizeSensor from "../resize-sensor/resize-sensor.vue";
+import SarIcon from "../icon/icon.vue";
+var STATUS =  ((STATUS2) => {
+  STATUS2[STATUS2["UNSTATED"] = 0] = "UNSTATED";
+  STATUS2[STATUS2["FIRST_LOADING"] = 1] = "FIRST_LOADING";
+  STATUS2[STATUS2["LATER_LOADING"] = 4] = "LATER_LOADING";
+  STATUS2[STATUS2["LOADED"] = 8] = "LOADED";
+  STATUS2[STATUS2["ERROR"] = 16] = "ERROR";
+  return STATUS2;
+})(STATUS || {});
+/**
+ * @property {string} rootClass 组件根元素类名，默认值：-。
+ * @property {StyleValue} rootStyle 组件根元素样式，默认值：-。
+ * @property {string} src 图片资源地址，默认值：-。
+ * @property {'scaleToFill' | 'aspectFit' | 'aspectFill' | 'widthFix' | 'heightFix' | 'top' | 'bottom' | 'center' | 'left' | 'right' | 'top left' | 'top right' | 'bottom left' | 'bottom right'} mode 图片资源地址，默认值：'aspectFill'。
+ * @property {boolean} lazyLoad 图片懒加载，默认值：false。
+ * @property {boolean} fade 是否需要淡入效果，默认值：true。
+ * @property {boolean} webp 在系统不支持webp的情况下是否单独启用webp，默认值：false。
+ * @property {boolean} showMenuByLongpress 开启长按图片显示识别小程序码菜单，默认值：true。
+ * @property {string} width 图片宽度，默认值：'320px'。
+ * @property {string} height 图片高度，默认值：'240px'。
+ * @property {'circle' | 'square'} shape 图片形状，默认值：'square'。
+ * @property {string} radius 图片圆角，默认值：-。
+ * @property {string} loadingIcon 加载中的图标，默认值：'image'。
+ * @property {string} errorIcon 加载失败的图标，默认值：'image-error'。
+ * @property {string} iconFamily 图标族，默认值：'sari'。
+ * @property {boolean} showLoading 是否显示加载中的图标或者自定义的插槽，默认值：true。
+ * @property {boolean} showError 是否显示加载失败的图标或者自定义的插槽，默认值：true。
+ * @property {string} background 图片背景颜色，默认值：-。
+ * @event {(event: any) => void} click 点击图片时触发
+ * @event {(event: any) => void} load 图片加载成功时触发
+ * @event {(event: any) => void} error 图片加载失败时触发
+ */
+export default  _defineComponent({
+  components: {
+    SarResizeSensor,
+    SarIcon,
+  },
+  ...{
+    options: {
+      virtualHost: true,
+      styleIsolation: "shared"
+    }
+  },
+  __name: "image",
+  props:  _mergeDefaults({
+    rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
+    rootClass: { type: String, required: false },
+    src: { type: String, required: false },
+    mode: { type: String, required: false },
+    lazyLoad: { type: Boolean, required: false },
+    webp: { type: Boolean, required: false },
+    showMenuByLongpress: { type: Boolean, required: false },
+    width: { type: String, required: false },
+    height: { type: String, required: false },
+    shape: { type: String, required: false },
+    radius: { type: String, required: false },
+    loadingIcon: { type: String, required: false },
+    errorIcon: { type: String, required: false },
+    iconFamily: { type: String, required: false },
+    showLoading: { type: Boolean, required: false },
+    showError: { type: Boolean, required: false },
+    background: { type: String, required: false },
+    fade: { type: Boolean, required: false },
+    customLoad: { type: Function, required: false }
+  }, defaultImageProps),
+  emits: ["click", "load", "error"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const bem = createBem("image");
+    const status = ref(0 /* UNSTATED */);
+    const isLoaded = ref(false);
+    const resizeSensorVisible = computed(
+      () => FIX_MODES[props.mode]
+    );
+    const sensorWidth = ref(0);
+    const sensorHeight = ref(0);
+    const onResize = (res) => {
+      sensorWidth.value = res.width;
+      sensorHeight.value = res.height;
+    };
+    const aspectRatio = ref(0);
+    const loadedUrl = ref("");
+    const doLoad = (event) => {
+      const { width, height } = event.target && !isNullish(event.target.naturalWidth) ? {
+        width: event.target.naturalWidth,
+        height: event.target.naturalHeight
+      } : event.detail;
+      aspectRatio.value = width / height;
+      status.value = 8 /* LOADED */;
+      isLoaded.value = true;
+      loadedUrl.value = props.src;
+      emit("load", event);
+    };
+    const onLoad = async (event) => {
+      if (!props.customLoad) {
+        doLoad(event);
+      }
+    };
+    const onError = (event) => {
+      status.value = 16 /* ERROR */;
+      emit("error", event);
+    };
+    const onClick = (event) => {
+      emit("click", event);
+    };
+    watch(
+      () => props.src,
+      async () => {
+        if (props.src) {
+          status.value = isLoaded.value && !(status.value & 16 /* ERROR */) ? 4 /* LATER_LOADING */ : 1 /* FIRST_LOADING */;
+        }
+        if (props.customLoad) {
+          props.customLoad((event) => {
+            doLoad(event);
+          });
+        }
+      },
+      {
+        immediate: true
+      }
+    );
+    __expose({});
+    const imageClass = computed(() => {
+      return classNames(
+        bem.b(),
+        bem.m(props.shape),
+        bem.m("animated", props.fade),
+        props.rootClass
+      );
+    });
+    const imageStyle = computed(() => {
+      return stringifyStyle(props.rootStyle, {
+        width: status.value & 8 /* LOADED */ && props.mode === "heightFix" ? aspectRatio.value * sensorHeight.value + "px" : props.width,
+        height: status.value & 8 /* LOADED */ && props.mode === "widthFix" ? sensorWidth.value / aspectRatio.value + "px" : props.height,
+        borderRadius: props.shape === "square" ? props.radius : void 0,
+        background: status.value & 8 /* LOADED */ ? "transparent" : props.background
+      });
+    });
+    const displayClass = computed(() => {
+      return classNames(bem.e("display"));
+    });
+    const displayStyle = computed(() => {
+      return stringifyStyle({
+        backgroundImage: loadedUrl.value ? `url(${loadedUrl.value})` : "none",
+        backgroundPosition: IMAGE_MODES[props.mode][0],
+        backgroundSize: IMAGE_MODES[props.mode][1]
+      });
+    });
+    const interactionClass = computed(() => {
+      return classNames(bem.e("interaction"));
+    });
+    const __returned__ = { props, emit, bem, STATUS, status, isLoaded, resizeSensorVisible, sensorWidth, sensorHeight, onResize, aspectRatio, loadedUrl, doLoad, onLoad, onError, onClick, imageClass, imageStyle, displayClass, displayStyle, interactionClass, SarResizeSensor, SarIcon };
+    return __returned__;
+  }
+});
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>

package/components/image/index.d.ts

@@ -0,0 +1 @@
+export type { ImageProps, ImageSlots, ImageEmits, ImageExpose } from './common';

package/components/image/index.js

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

package/components/image/index.scss

@@ -0,0 +1,72 @@
+@use '../style/base' as *;
+
+@include bem(image) {
+  @include b() {
+    position: relative;
+    display: inline-block;
+    width: var(--sar-image-width);
+    height: var(--sar-image-height);
+    overflow: hidden;
+    background: var(--sar-image-bg);
+
+    @include m(circle) {
+      border-radius: 9999px;
+    }
+  }
+
+  @include e(display) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-repeat: no-repeat;
+  }
+
+  @include m(animated) {
+    @include e(display) {
+      animation: #{bem-ns(image-fade)} var(--sar-image-fade-duration);
+    }
+  }
+
+  @keyframes #{bem-ns(image-fade)} {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @include e(interaction) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: block;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    -webkit-touch-callout: none;
+    user-select: none;
+  }
+
+  @include e(loading) {
+    @include universal;
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+    font-size: var(--sar-image-loading-font-size);
+    color: var(--sar-image-loading-color);
+  }
+
+  @include e(error) {
+    @include universal;
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+    font-size: var(--sar-image-error-font-size);
+    color: var(--sar-image-error-color);
+  }
+}

package/components/image/variables.scss

@@ -0,0 +1,13 @@
+// #variables
+page,
+.sar-portal {
+  --sar-image-bg: var(--sar-secondary-bg);
+  --sar-image-width: 320px;
+  --sar-image-height: 240px;
+  --sar-image-loading-font-size: 48rpx;
+  --sar-image-loading-color: var(--sar-fourth-color);
+  --sar-image-error-font-size: 48rpx;
+  --sar-image-error-color: var(--sar-fourth-color);
+  --sar-image-fade-duration: var(--sar-duration-slow);
+}
+// #endvariables

package/components/loading/loading.vue

@@ -1,5 +1,5 @@
 <template>
-  <view :class="loadingClass">
+  <view :class="loadingClass" :style="loadingStyle">
     <view :class="iconClass" :style="iconStyle">
       <slot v-if="type === 'circular'" name="circular">
         <view :class="bem.e('spinner')"></view>
@@ -89,7 +89,10 @@ export default  _defineComponent({
       return Math.max(Math.floor(props.progress * 12), 1);
     });
     const loadingClass = computed(() => {
-      return classNames(bem.b(), bem.m("vertical", props.vertical));
+      return classNames(bem.b(), bem.m("vertical", props.vertical), props.rootClass);
+    });
+    const loadingStyle = computed(() => {
+      return stringifyStyle(props.rootStyle);
     });
     const iconClass = computed(() => {
       return classNames(
@@ -106,17 +109,13 @@ export default  _defineComponent({
         },
         props.type === "circular" && !props.animated ? {
           transform: `rotate(${props.progress * 360}deg)`
-        } : null,
-        props.rootClass
+        } : null
       );
     });
     const loadingTextStyle = computed(() => {
-      return stringifyStyle(
-        { color: props.textColor, fontSize: props.textSize },
-        props.rootStyle
-      );
+      return stringifyStyle({ color: props.textColor, fontSize: props.textSize });
     });
-    const __returned__ = { props, bem, scaleShowNum, loadingClass, iconClass, iconStyle, loadingTextStyle, get classNames() {
+    const __returned__ = { props, bem, scaleShowNum, loadingClass, loadingStyle, iconClass, iconStyle, loadingTextStyle, get classNames() {
       return classNames;
     }, get isRenderVisible() {
       return isRenderVisible;

package/components/locale/lang/vi-VN.d.ts

@@ -0,0 +1,126 @@
+declare const _default: {
+    calendar: {
+        weeks: {
+            0: string;
+            1: string;
+            2: string;
+            3: string;
+            4: string;
+            5: string;
+            6: string;
+        };
+        monthTitle: string;
+        start: string;
+        end: string;
+        to: string;
+        multipleOutlet: string;
+    };
+    cascader: {
+        pleaseSelect: string;
+    };
+    cropImage: {
+        confirm: string;
+        cancel: string;
+    };
+    datetimePicker: {
+        y: string;
+        M: string;
+        d: string;
+        h: string;
+        m: string;
+        s: string;
+    };
+    datetimeRangePickerInput: {
+        to: string;
+    };
+    dialog: {
+        confirm: string;
+        cancel: string;
+    };
+    empty: {
+        noData: string;
+    };
+    form: {
+        defaultValidateMessages: {
+            default: string;
+            required: string;
+            enum: string;
+            whitespace: string;
+            date: {
+                format: string;
+                parse: string;
+                invalid: string;
+            };
+            types: {
+                string: string;
+                function: string;
+                array: string;
+                object: string;
+                number: string;
+                date: string;
+                boolean: string;
+                integer: string;
+                float: string;
+                regexp: string;
+                email: string;
+                url: string;
+                hex: string;
+            };
+            string: {
+                len: string;
+                min: string;
+                max: string;
+                range: string;
+            };
+            number: {
+                len: string;
+                min: string;
+                max: string;
+                range: string;
+            };
+            array: {
+                len: string;
+                min: string;
+                max: string;
+                range: string;
+            };
+            pattern: {
+                mismatch: string;
+            };
+        };
+    };
+    loadMore: {
+        incompleteText: string;
+        loadingText: string;
+        completeText: string;
+        errorText: string;
+    };
+    pagination: {
+        previous: string;
+        next: string;
+    };
+    popout: {
+        confirm: string;
+        cancel: string;
+    };
+    readMore: {
+        fold: string;
+        unfold: string;
+    };
+    signature: {
+        confirm: string;
+        clear: string;
+        cancel: string;
+    };
+    tree: {
+        addSibling: string;
+        addChild: string;
+        addRoot: string;
+        removeNode: string;
+        edit: string;
+        please: string;
+        error: string;
+        noData: string;
+    };
+};
+export default _default;

package/components/locale/lang/vi-VN.js

@@ -0,0 +1,126 @@
+const formTypeTemplate = '${label}không phải là một ${type} hợp lệ';
+export default {
+    calendar: {
+        weeks: {
+            0: 'CN',
+            1: 'T2',
+            2: 'T3',
+            3: 'T4',
+            4: 'T5',
+            5: 'T6',
+            6: 'T7',
+        },
+        monthTitle: 'Tháng ${month} năm ${year}',
+        start: 'Bắt đầu',
+        end: 'Kết thúc',
+        to: 'đến',
+        multipleOutlet: 'Đã chọn ${count} ngày',
+    },
+    cascader: {
+        pleaseSelect: 'Vui lòng chọn',
+    },
+    cropImage: {
+        confirm: 'Xác nhận',
+        cancel: 'Hủy',
+    },
+    datetimePicker: {
+        y: 'năm',
+        M: 'tháng',
+        d: 'ngày',
+        h: 'giờ',
+        m: 'phút',
+        s: 'giây',
+    },
+    datetimeRangePickerInput: {
+        to: 'đến',
+    },
+    dialog: {
+        confirm: 'Xác nhận',
+        cancel: 'Hủy',
+    },
+    empty: {
+        noData: 'Không có dữ liệu',
+    },
+    form: {
+        defaultValidateMessages: {
+            default: 'Lỗi xác thực trường ${label}',
+            required: '${label} là bắt buộc',
+            enum: '${label} phải là một trong [${enum}]',
+            whitespace: '${label} không được chứa khoảng trắng trống',
+            date: {
+                format: 'Định dạng ngày ${label} không hợp lệ',
+                parse: 'Không thể chuyển đổi ${label} thành ngày',
+                invalid: '${label} là một ngày không hợp lệ',
+            },
+            types: {
+                string: formTypeTemplate,
+                function: formTypeTemplate,
+                array: formTypeTemplate,
+                object: formTypeTemplate,
+                number: formTypeTemplate,
+                date: formTypeTemplate,
+                boolean: formTypeTemplate,
+                integer: formTypeTemplate,
+                float: formTypeTemplate,
+                regexp: formTypeTemplate,
+                email: formTypeTemplate,
+                url: formTypeTemplate,
+                hex: formTypeTemplate,
+            },
+            string: {
+                len: '${label} phải có ${len} ký tự',
+                min: '${label} tối thiểu ${min} ký tự',
+                max: '${label} tối đa ${max} ký tự',
+                range: '${label} phải nằm trong khoảng ${min}-${max} ký tự',
+            },
+            number: {
+                len: '${label} phải bằng ${len}',
+                min: 'Giá trị tối thiểu của ${label} là ${min}',
+                max: 'Giá trị tối đa của ${label} là ${max}',
+                range: '${label} phải nằm trong khoảng ${min}-${max}',
+            },
+            array: {
+                len: 'Phải có ${len} ${label}',
+                min: 'Tối thiểu ${min} ${label}',
+                max: 'Tối đa ${max} ${label}',
+                range: 'Số lượng ${label} phải nằm trong khoảng ${min}-${max}',
+            },
+            pattern: {
+                mismatch: '${label} không khớp với mẫu ${pattern}',
+            },
+        },
+    },
+    loadMore: {
+        incompleteText: 'Nhấn để tải thêm',
+        loadingText: 'Đang tải...',
+        completeText: 'Không còn nữa',
+        errorText: 'Yêu cầu thất bại, nhấn để tải lại',
+    },
+    pagination: {
+        previous: 'Trang trước',
+        next: 'Trang sau',
+    },
+    popout: {
+        confirm: 'Xác nhận',
+        cancel: 'Hủy',
+    },
+    readMore: {
+        fold: 'Thu gọn',
+        unfold: 'Mở rộng',
+    },
+    signature: {
+        confirm: 'Xác nhận',
+        clear: 'Xóa',
+        cancel: 'Hủy',
+    },
+    tree: {
+        addSibling: 'Thêm nút kế tiếp',
+        addChild: 'Thêm nút con',
+        addRoot: 'Thêm nút gốc',
+        removeNode: 'Xóa nút',
+        edit: 'Chỉnh sửa nút',
+        please: 'Vui lòng nhập tiêu đề',
+        error: 'Yêu cầu thất bại, nhấn để tải lại',
+        noData: 'Không có dữ liệu',
+    },
+};

package/components/popout/README.md

@@ -39,23 +39,28 @@ import Popout from 'sard-uniapp/components/popout/popout.vue'
 
 ### PopoutProps
 
-| 属性                           | 描述                                                                                   | 类型                 | 默认值  |
-| ------------------------------ | -------------------------------------------------------------------------------------- | -------------------- | ------- |
-| root-class                     | 组件根元素类名                                                                         | string               | -       |
-| root-style                     | 组件根元素样式                                                                         | StyleValue           | -       |
-| title                          | 弹出框标题                                                                             | string               | -       |
-| show-cancel                    | 是否显示取消按钮，适用 `loose` 类型                                                    | boolean              | false   |
-| cancel-text                    | 取消按钮文案                                                                           | string               | '取消'  |
-| show-confirm                   | 是否显示确定按钮，适用 `loose` 类型                                                    | boolean              | true    |
-| confirm-text                   | 确定按钮文案                                                                           | string               | '确定'  |
-| show-close                     | 是否显示关闭按钮，适用 `loose` 类型                                                    | boolean              | true    |
-| show-footer                    | 是否显示底部按钮                                                                       | boolean              | true    |
-| type                           | 弹出框按钮排版方式                                                                     | 'compact' \| 'loose' | 'loose' |
-| visible (v-model)              | 是否显示弹出框                                                                         | boolean              | -       |
-| before-close                   | 关闭前的回调，返回 `false` 或 `rejected` 状态的 `Promise` 可阻止关闭                   | PopoutBeforeClose    | -       |
-| duration                       | 显隐动画时长，单位 ms                                                                  | number               | 300     |
-| overlay-closable               | 点击遮罩是否关闭                                                                       | boolean              | true    |
-| keep-render <sup>1.24.3+</sup> | 无论刚挂载还是隐藏，都始终不设置 display 为 none，一般用于内部包含计算尺寸的组件的情况 | boolean              | false   |
+| 属性                             | 描述                                                                                   | 类型                 | 默认值  |
+| -------------------------------- | -------------------------------------------------------------------------------------- | -------------------- | ------- |
+| root-class                       | 组件根元素类名                                                                         | string               | -       |
+| root-style                       | 组件根元素样式                                                                         | StyleValue           | -       |
+| title                            | 弹出框标题                                                                             | string               | -       |
+| show-cancel                      | 是否显示取消按钮，适用 `loose` 类型                                                    | boolean              | false   |
+| cancel-text                      | 取消按钮文案                                                                           | string               | '取消'  |
+| show-confirm                     | 是否显示确定按钮，适用 `loose` 类型                                                    | boolean              | true    |
+| confirm-text                     | 确定按钮文案                                                                           | string               | '确定'  |
+| show-close                       | 是否显示关闭按钮，适用 `loose` 类型                                                    | boolean              | true    |
+| show-footer                      | 是否显示底部按钮                                                                       | boolean              | true    |
+| type                             | 弹出框按钮排版方式                                                                     | 'compact' \| 'loose' | 'loose' |
+| visible (v-model)                | 是否显示弹出框                                                                         | boolean              | -       |
+| before-close                     | 关闭前的回调，返回 `false` 或 `rejected` 状态的 `Promise` 可阻止关闭                   | PopoutBeforeClose    | -       |
+| duration                         | 显隐动画时长，单位 ms                                                                  | number               | 300     |
+| overlay <sup>1.25.1+</sup>       | 是否显示遮罩                                                                           | boolean              | true    |
+| overlay-class <sup>1.25.1+</sup> | 添加到遮罩的类名                                                                       | string               | -       |
+| overlay-style <sup>1.25.1+</sup> | 添加到遮罩的样式                                                                       | string               | -       |
+| background <sup>1.25.1+</sup>    | 遮罩背景色                                                                             | string               | -       |
+| transparent <sup>1.25.1+</sup>   | 透明遮罩                                                                               | boolean              | false   |
+| overlay-closable                 | 点击遮罩是否关闭                                                                       | boolean              | true    |
+| keep-render <sup>1.24.3+</sup>   | 无论刚挂载还是隐藏，都始终不设置 display 为 none，一般用于内部包含计算尺寸的组件的情况 | boolean              | false   |
 
 ### PopoutBeforeClose