sard-uniapp 1.11.1 → 1.12.0

package/components/crop-image/index.scss

@@ -0,0 +1,81 @@
+@use '../style/base' as *;
+
+@include bem(crop-image) {
+  @include b() {
+    @include universal;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #000;
+    touch-action: none;
+  }
+
+  @include e(sensor) {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+
+  @include e(focus) {
+    position: absolute;
+    transition: transform 0.15s;
+  }
+
+  @include e(puppet) {
+    position: relative;
+    transform-origin: top left;
+    transition: transform 0.15s;
+  }
+
+  @include e(image) {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 50%;
+    top: 50%;
+  }
+
+  @include e(mask) {
+    position: absolute;
+    z-index: 10;
+    box-shadow: 0 0 0 9999vh rgba(45, 45, 45, 0.8);
+    pointer-events: none;
+  }
+
+  @include e(toolbar) {
+    @include universal;
+    position: absolute;
+    left: 32rpx;
+    right: 32rpx;
+    bottom: calc(env(safe-area-inset-bottom) + 32rpx);
+    z-index: 20;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+  }
+
+  @include e(canvas-wrapper) {
+    position: fixed;
+    left: 200vw;
+    width: 9999px;
+    height: 9999px;
+  }
+
+  @include e(loading) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 30;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+    font-size: 60rpx;
+    color: #fff;
+    background-color: var(--sar-mask-illegible);
+    touch-action: none;
+  }
+}

package/components/crop-image-agent/common.d.ts

@@ -0,0 +1,19 @@
+import { CropImageProps } from '../crop-image/common';
+export interface CropImageAgentProps extends CropImageProps {
+    id?: string;
+}
+export type CropImageOptions = Omit<CropImageAgentProps, 'src'> & Required<Pick<CropImageAgentProps, 'src'>>;
+export declare const defaultCropImageAgentProps: () => {
+    id: string;
+    duration: number;
+    cropScale: string;
+    type: "png";
+    quality: number;
+};
+export declare const imperativeName = "cropImage";
+export interface CropImageImperative {
+    show(newProps: Record<string, any>): void;
+    hide(): void;
+}
+declare const cropImage: (options: CropImageOptions) => void;
+export { cropImage };

package/components/crop-image-agent/common.js

@@ -0,0 +1,16 @@
+import { getAvailableImperative } from '../../use/useImperative';
+import { defaultConfig } from '../config';
+import { defaultCropImageProps } from '../crop-image/common';
+export const defaultCropImageAgentProps = () => ({
+    ...defaultCropImageProps,
+    ...defaultConfig.cropImageAgent,
+});
+export const imperativeName = 'cropImage';
+const cropImage = (options) => {
+    const { id = defaultConfig.cropImageAgent.id } = options;
+    const imperative = getAvailableImperative(imperativeName, id);
+    if (imperative) {
+        imperative.show(options);
+    }
+};
+export { cropImage };

package/components/crop-image-agent/crop-image-agent.d.ts

@@ -0,0 +1,9 @@
+import { type CropImageAgentProps } from './common';
+declare const _default: import("vue").DefineComponent<CropImageAgentProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CropImageAgentProps> & Readonly<{}>, {
+    type: "png" | "jpg";
+    id: string;
+    duration: number;
+    cropScale: string;
+    quality: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/components/crop-image-agent/crop-image-agent.vue

@@ -0,0 +1,70 @@
+<template>
+  <sar-crop-image v-bind="innerProps" v-model:visible="innerProps.visible" />
+</template>
+
+<script>
+import { mergeDefaults as _mergeDefaults, defineComponent as _defineComponent } from "vue";
+import { computed, ref } from "vue";
+import SarCropImage from "../crop-image/crop-image.vue";
+import {
+  defaultCropImageAgentProps,
+  imperativeName
+} from "./common";
+import { useImperative } from "../../use/useImperative";
+export default  _defineComponent({
+  components: {
+    SarCropImage,
+  },
+  ...{
+    options: {
+      virtualHost: true,
+      styleIsolation: "shared"
+    }
+  },
+  __name: "crop-image-agent",
+  props:  _mergeDefaults({
+    id: { type: String, required: false },
+    rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
+    rootClass: { type: String, required: false },
+    visible: { type: Boolean, required: false },
+    src: { type: String, required: false },
+    cropScale: { type: String, required: false },
+    type: { type: String, required: false },
+    quality: { type: Number, required: false },
+    duration: { type: Number, required: false },
+    success: { type: Function, required: false },
+    fail: { type: Function, required: false },
+    complete: { type: Function, required: false },
+    beforeCrop: { type: Function, required: false },
+    cancelText: { type: String, required: false },
+    confirmText: { type: String, required: false }
+  }, defaultCropImageAgentProps()),
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const innerProps = ref({ ...props });
+    const imperative = {
+      show(newProps) {
+        innerProps.value = {
+          ...props,
+          ...newProps,
+          visible: true
+        };
+      },
+      hide() {
+        innerProps.value = {
+          ...innerProps.value,
+          visible: false
+        };
+      }
+    };
+    useImperative(
+      imperativeName,
+      imperative,
+      computed(() => innerProps.value.id)
+    );
+    const __returned__ = { props, innerProps, imperative, SarCropImage };
+    return __returned__;
+  }
+});
+</script>

package/components/crop-image-agent/index.d.ts

@@ -0,0 +1 @@
+export { type CropImageAgentProps, type CropImageOptions, cropImage, } from './common';

package/components/crop-image-agent/index.js

@@ -0,0 +1 @@
+export { cropImage, } from './common';

package/components/datetime-picker-input/datetime-picker-input.vue

@@ -17,7 +17,7 @@
     @update:visible="onVisible"
     :title="title ?? placeholder"
     @confirm="onConfirm"
-    @visible-hook="onVisibleHook"
+    @enter="onEnter"
   >
     <template #visible="{ already }">
       <sar-datetime-picker
@@ -105,8 +105,8 @@ export default  _defineComponent({
     const onChange = (value) => {
       popoutValue.value = value;
     };
-    const onVisibleHook = (name) => {
-      if (name === "enter" && !isNullish(innerValue.value) && popoutValue.value !== innerValue.value) {
+    const onEnter = () => {
+      if (!isNullish(innerValue.value) && popoutValue.value !== innerValue.value) {
         popoutValue.value = innerValue.value;
       }
     };
@@ -190,7 +190,7 @@ export default  _defineComponent({
       innerVisible.value = true;
       emit("update:visible", true);
     };
-    const __returned__ = { props, emit, formItemContext, innerValue, popoutValue, onChange, onVisibleHook, minDate, maxDate, normalizeValue, onConfirm, inputValue, getOutletText, getInputValue, onClear, innerVisible, onVisible, onInputClick, SarPopoutInput, SarPopout, SarDatetimePicker };
+    const __returned__ = { props, emit, formItemContext, innerValue, popoutValue, onChange, onEnter, minDate, maxDate, normalizeValue, onConfirm, inputValue, getOutletText, getInputValue, onClear, innerVisible, onVisible, onInputClick, SarPopoutInput, SarPopout, SarDatetimePicker };
     return __returned__;
   }
 });

package/components/datetime-range-picker/datetime-range-picker.vue

@@ -33,7 +33,7 @@
 
 <script>
 import { mergeDefaults as _mergeDefaults, defineComponent as _defineComponent } from "vue";
-import { computed, watch } from "vue";
+import { computed, watch, ref } from "vue";
 import {
   classNames,
   stringifyStyle,
@@ -42,10 +42,10 @@ import {
   toDate
 } from "../../utils";
 import SarDatetimePicker from "../datetime-picker/datetime-picker.vue";
+import SarTabs from "../tabs/tabs.vue";
 import {
   defaultDatetimeRangePickerProps
 } from "./common";
-import { ref } from "vue";
 import {
   getInitialValue,
   getMaxDate,
@@ -54,6 +54,7 @@ import {
 export default  _defineComponent({
   components: {
     SarDatetimePicker,
+    SarTabs,
   },
   ...{
     options: {
@@ -132,7 +133,7 @@ export default  _defineComponent({
     });
     const __returned__ = { props, emit, bem, datetimePickerProps, tabsList, tabsCurrent, minDate, maxDate, startValue, endValue, parseValue, onChange, datetimeRangePickerClass, datetimeRangePickerStyle, get stringifyStyle() {
       return stringifyStyle;
-    }, SarDatetimePicker };
+    }, SarDatetimePicker, SarTabs };
     return __returned__;
   }
 });

package/components/datetime-range-picker-input/datetime-range-picker-input.vue

@@ -17,7 +17,7 @@
     @update:visible="onVisible"
     :title="title ?? placeholder"
     @confirm="onConfirm"
-    @visible-hook="onVisibleHook"
+    @enter="onEnter"
   >
     <template #visible="{ already }">
       <sar-datetime-range-picker
@@ -108,8 +108,8 @@ export default  _defineComponent({
     const onChange = (value) => {
       popoutValue.value = value;
     };
-    const onVisibleHook = (name) => {
-      if (name === "enter" && !isNullish(innerValue.value) && popoutValue.value !== innerValue.value) {
+    const onEnter = () => {
+      if (!isNullish(innerValue.value) && popoutValue.value !== innerValue.value) {
         popoutValue.value = innerValue.value;
       }
     };
@@ -187,7 +187,7 @@ export default  _defineComponent({
       innerVisible.value = true;
       emit("update:visible", true);
     };
-    const __returned__ = { props, emit, formItemContext, innerValue, popoutValue, onChange, onVisibleHook, minDate, maxDate, onConfirm, inputValue, t, getOutletTextMayByStr, getOutletText, getInputValue, onClear, innerVisible, onVisible, onInputClick, SarPopoutInput, SarPopout, SarDatetimeRangePicker };
+    const __returned__ = { props, emit, formItemContext, innerValue, popoutValue, onChange, onEnter, minDate, maxDate, onConfirm, inputValue, t, getOutletTextMayByStr, getOutletText, getInputValue, onClear, innerVisible, onVisible, onInputClick, SarPopoutInput, SarPopout, SarDatetimeRangePicker };
     return __returned__;
   }
 });

package/components/dialog/common.d.ts

@@ -1,6 +1,6 @@
 import { type StyleValue } from 'vue';
-import { type TransitionHookName } from '../../use';
 import { type ButtonProps } from '../button';
+import { type TransitionHookEmits } from '../popup/common';
 export interface DialogProps {
     rootStyle?: StyleValue;
     rootClass?: string;
@@ -31,10 +31,9 @@ export declare const defaultDialogProps: {
 export interface DialogSlots {
     default?(props: Record<string, never>): any;
 }
-export interface DialogEmits {
+export interface DialogEmits extends TransitionHookEmits {
     (e: 'update:visible', visible: boolean): void;
     (e: 'close'): void;
     (e: 'cancel'): void;
     (e: 'confirm'): void;
-    (e: 'visible-hook', name: TransitionHookName): void;
 }

package/components/dialog/dialog.d.ts

@@ -1,25 +1,18 @@
 import { type DialogProps, type DialogSlots } from './common';
-import { type TransitionHookName } from '../../use';
 declare function __VLS_template(): Readonly<DialogSlots> & DialogSlots;
-declare const __VLS_component: import("vue").DefineComponent<DialogProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    cancel: () => any;
-    close: () => any;
-    confirm: () => any;
-    "update:visible": (visible: boolean) => any;
-    "visible-hook": (name: TransitionHookName) => any;
+declare const __VLS_component: import("vue").DefineComponent<DialogProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    [x: string]: any;
+} & {
+    [x: string]: any;
 }, string, import("vue").PublicProps, Readonly<DialogProps> & Readonly<{
-    onCancel?: (() => any) | undefined;
-    onClose?: (() => any) | undefined;
-    onConfirm?: (() => any) | undefined;
-    "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
-    "onVisible-hook"?: ((name: TransitionHookName) => any) | undefined;
+    [x: `on${Capitalize<any>}`]: ((...args: any) => any) | undefined;
 }>, {
     buttonType: "round" | "text";
     duration: number;
     overlayClosable: boolean;
+    showCancel: boolean;
     showConfirm: boolean;
     headed: boolean;
-    showCancel: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;

package/components/dialog/dialog.vue

@@ -17,6 +17,7 @@
             type="pale-text"
             theme="neutral"
             size="large"
+            block
             @click="onClose"
           >
             <sar-icon name="close" />
@@ -43,6 +44,7 @@
           :theme="buttonProps.cancel.theme"
           :size="buttonProps.cancel.size"
           :round="buttonProps.confirm.round"
+          block
           v-bind="cancelProps"
           @click="onCancel"
         >
@@ -60,6 +62,7 @@
           :theme="buttonProps.confirm.theme"
           :size="buttonProps.confirm.size"
           :round="buttonProps.confirm.round"
+          block
           v-bind="confirmProps"
           @click="onConfirm"
         >
@@ -73,7 +76,14 @@
 <script>
 import { mergeDefaults as _mergeDefaults, defineComponent as _defineComponent } from "vue";
 import { computed, ref, watch } from "vue";
-import { classNames, stringifyStyle, createBem, noop } from "../../utils";
+import {
+  classNames,
+  stringifyStyle,
+  createBem,
+  noop,
+  isObject,
+  isFunction
+} from "../../utils";
 import { useTranslate } from "../locale";
 import SarPopup from "../popup/popup.vue";
 import SarButton from "../button/button.vue";
@@ -113,7 +123,7 @@ export default  _defineComponent({
     confirmProps: { type: Object, required: false },
     id: { type: String, required: false }
   }, defaultDialogProps),
-  emits: ["update:visible", "close", "cancel", "confirm", "visible-hook"],
+  emits: ["update:visible", "close", "cancel", "confirm", "before-enter", "enter", "after-enter", "enter-cancelled", "before-leave", "leave", "after-leave", "leave-cancelled", "visible-hook"],
   setup(__props, { expose: __expose, emit: __emit }) {
     __expose();
     const props = __props;
@@ -134,9 +144,9 @@ export default  _defineComponent({
     });
     const perhapsClose = (type) => {
       emit(type);
-      if (typeof props.beforeClose === "function") {
+      if (isFunction(props.beforeClose)) {
         const result = props.beforeClose(type);
-        if (result instanceof Promise) {
+        if (isObject(result) && isFunction(result.then)) {
           loading.value[type] = true;
           return result.then(() => {
             innerVisible.value = false;
@@ -195,6 +205,7 @@ export default  _defineComponent({
     });
     const onVisibleHook = (name) => {
       emit("visible-hook", name);
+      emit(name);
     };
     const dialogClass = computed(() => {
       return classNames(

package/components/dialog-agent/dialog-agent.d.ts

@@ -4,8 +4,8 @@ declare const _default: import("vue").DefineComponent<DialogAgentProps, {}, {},
     buttonType: "round" | "text";
     duration: number;
     overlayClosable: boolean;
+    showCancel: boolean;
     showConfirm: boolean;
     headed: boolean;
-    showCancel: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/components/dropdown-item/dropdown-item.vue

@@ -2,7 +2,6 @@
   <view
     :class="dropdownItemClass"
     :style="dropdownItemStyle"
-    :id="itemId"
     @click="onItemClick"
   >
     <view v-if="label" :class="bem.e('label')">
@@ -173,8 +172,8 @@ export default  _defineComponent({
     const popupInset = ref("");
     const awayInset = ref("");
     const setPosition = async () => {
-      const windowInfo = await getWindowInfo();
-      const itemRect = await getBoundingClientRect(`#${itemId}`, instance);
+      const { windowHeight } = getWindowInfo();
+      const itemRect = await getBoundingClientRect(`.${itemId}`, instance);
       const nextPopupInset = {
         left: 0,
         right: 0,
@@ -191,10 +190,10 @@ export default  _defineComponent({
         nextPopupInset.top = `calc(${itemRect.bottom}px + var(--window-top))`;
         nextPopupInset.bottom = 0;
         nextAwayInset.top = 0;
-        nextAwayInset.bottom = `calc(${windowInfo.windowHeight - itemRect.bottom}px + var(--window-top))`;
+        nextAwayInset.bottom = `calc(${windowHeight - itemRect.bottom}px + var(--window-top))`;
       } else {
         nextPopupInset.top = 0;
-        nextPopupInset.bottom = `${windowInfo.windowHeight - itemRect.top}px`;
+        nextPopupInset.bottom = `${windowHeight - itemRect.top}px`;
         nextAwayInset.top = `calc(${itemRect.bottom}px + var(--window-top))`;
         nextAwayInset.bottom = 0;
       }
@@ -259,7 +258,8 @@ export default  _defineComponent({
         bem.m(context.direction),
         bem.m("show", wholeVisible.value),
         bem.m("disabled", context.disabled || props.disabled),
-        props.rootClass
+        props.rootClass,
+        itemId
       );
     });
     const dropdownItemStyle = computed(() => {

package/components/fab/fab.d.ts

@@ -8,7 +8,7 @@ declare const _default: import("vue").DefineComponent<FabProps, {}, {}, {}, {},
 }>, {
     duration: number;
     overlayClosable: boolean;
-    hideName: boolean;
     itemList: FabItem[];
+    hideName: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/components/floating-bubble/floating-bubble.vue

@@ -1,6 +1,5 @@
 <template>
   <view
-    :id="bubbleId"
     :class="floatingBubbleClass"
     :style="floatingBubbleStyle"
     @touchstart="onTouchStart"
@@ -56,7 +55,7 @@ export default  _defineComponent({
     const instance = getCurrentInstance();
     const bubbleId = uniqid();
     let bubbleRect;
-    let windowInfo;
+    const { windowWidth, windowHeight } = getWindowInfo();
     let downCoord = {
       x: 0,
       y: 0
@@ -82,17 +81,16 @@ export default  _defineComponent({
       return props.gapX;
     }
     function getMaxX() {
-      return windowInfo.windowWidth - props.gapX - bubbleRect.width;
+      return windowWidth - props.gapX - bubbleRect.width;
     }
     function getMinY() {
-      return props.gapY + windowInfo.windowTop;
+      return props.gapY + 44 + 25;
     }
     function getMaxY() {
-      return windowInfo.windowHeight - props.gapY - bubbleRect.height + windowInfo.windowTop;
+      return windowHeight - props.gapY - bubbleRect.height;
     }
     onMounted(async () => {
-      windowInfo = await getWindowInfo();
-      bubbleRect = await getBoundingClientRect(`#${bubbleId}`, instance);
+      bubbleRect = await getBoundingClientRect(`.${bubbleId}`, instance);
       position.value = props.offset ?? {
         x: getMaxX(),
         y: getMaxY()
@@ -107,10 +105,10 @@ export default  _defineComponent({
         x: event.touches[0].clientX,
         y: event.touches[0].clientY
       };
-      bubbleRect = await getBoundingClientRect(`#${bubbleId}`, instance);
+      bubbleRect = await getBoundingClientRect(`.${bubbleId}`, instance);
     };
     const onTouchMove = (event) => {
-      if (!bubbleRect || !windowInfo) {
+      if (!bubbleRect) {
         return;
       }
       let x = 0;
@@ -122,7 +120,7 @@ export default  _defineComponent({
         const deltaX = event.touches[0].clientX - downCoord.x;
         const deltaY = event.touches[0].clientY - downCoord.y;
         x = bubbleRect.left + deltaX;
-        y = bubbleRect.top + deltaY + windowInfo.windowTop;
+        y = bubbleRect.top + deltaY;
         x = minmax(x, getMinX(), getMaxX());
         y = minmax(y, getMinY(), getMaxY());
         if (props.axis === "y") {
@@ -139,13 +137,13 @@ export default  _defineComponent({
       emit("update:offset", offset);
     };
     const onTouchEnd = () => {
-      if (windowInfo && bubbleRect) {
+      if (bubbleRect) {
         if (props.magnet) {
           let { x, y } = position.value;
           if (props.magnet === "x") {
-            x = x < (windowInfo.windowWidth - bubbleRect.width) / 2 ? getMinX() : getMaxX();
+            x = x < (windowWidth - bubbleRect.width) / 2 ? getMinX() : getMaxX();
           } else if (props.magnet === "y") {
-            y = y < (windowInfo.windowHeight - bubbleRect.height) / 2 ? getMinY() : getMaxY();
+            y = y < (windowHeight - bubbleRect.height) / 2 ? getMinY() : getMaxY();
           }
           const offset = {
             x,
@@ -168,7 +166,8 @@ export default  _defineComponent({
         bem.b(),
         bem.m("animated", animated.value),
         bem.m("initialized", initialized.value),
-        props.rootClass
+        props.rootClass,
+        bubbleId
       );
     });
     const floatingBubbleStyle = computed(() => {
@@ -180,11 +179,7 @@ export default  _defineComponent({
       return bubbleRect;
     }, set bubbleRect(v) {
       bubbleRect = v;
-    }, get windowInfo() {
-      return windowInfo;
-    }, set windowInfo(v) {
-      windowInfo = v;
-    }, get downCoord() {
+    }, windowWidth, windowHeight, get downCoord() {
       return downCoord;
     }, set downCoord(v) {
       downCoord = v;

package/components/form-item/form-item.vue

@@ -1,5 +1,5 @@
 <template>
-  <view :class="formItemClass" :style="formItemStyle" :id="fieldId">
+  <view :class="formItemClass" :style="formItemStyle">
     <view
       v-if="$slots.label || !isNullish(label)"
       :class="bem.e('label')"
@@ -213,7 +213,7 @@ export default  _defineComponent({
     const scrollToField = async () => {
       const [scrollInfo, fieldRect, windowInfo] = await Promise.all([
         getViewportScrollInfo(),
-        getBoundingClientRect(`#${fieldId}`, instance),
+        getBoundingClientRect(`.${fieldId}`, instance),
         getWindowInfo()
       ]);
       const scrollTop = getScrollIntoViewValue(
@@ -272,7 +272,8 @@ export default  _defineComponent({
         bem.m(`align-${props.labelAlign || formContext.labelAlign}`),
         bem.m(`valign-${props.labelValign || formContext.labelValign}`),
         bem.m(`star-${props.starPosition || formContext.starPosition}`),
-        props.rootClass
+        props.rootClass,
+        fieldId
       );
     });
     const formItemStyle = computed(() => {

package/components/grid/common.d.ts

@@ -1,4 +1,5 @@
 import { type StyleValue } from 'vue';
+import { type BadgeProps } from '../badge';
 export interface GridProps {
     rootStyle?: StyleValue;
     rootClass?: string;
@@ -27,6 +28,9 @@ export interface GridItemProps {
     iconSize?: string;
     iconColor?: string;
     iconFamily?: string;
+    dot?: boolean;
+    badge?: number | string;
+    badgeProps?: BadgeProps;
 }
 export interface GridItemSlots {
     default?(props: Record<string, never>): any;