sard-uniapp 1.11.2 → 1.12.0

package/components/search/search.vue

@@ -38,6 +38,7 @@
         v-if="cancel"
         type="pale-text"
         root-style="height: auto"
+        block
         @click="onCancel"
       >
         {{ cancel }}
@@ -46,6 +47,7 @@
         v-if="search"
         type="pale-text"
         root-style="height: auto"
+        block
         @click="onConfirm"
       >
         {{ search }}

package/components/share-sheet/share-sheet.vue

@@ -77,7 +77,8 @@ import {
   stringifyStyle,
   createBem,
   noop,
-  isFileUrl
+  isFileUrl,
+  isFunction
 } from "../../utils";
 import SarPopup from "../popup/popup.vue";
 import SarIcon from "../icon/icon.vue";
@@ -132,7 +133,7 @@ export default  _defineComponent({
       }
     );
     const perhapsClose = (type) => {
-      if (typeof props.beforeClose === "function") {
+      if (isFunction(props.beforeClose)) {
         const result = props.beforeClose(type);
         if (result instanceof Promise) {
           return result.then(() => {

package/components/sidebar/common.d.ts

@@ -0,0 +1,28 @@
+import { type StyleValue } from 'vue';
+import { type ScrollIntoViewOptions, type NodeRect } from '../../utils';
+export interface SidebarProps {
+    rootStyle?: StyleValue;
+    rootClass?: string;
+    current?: string | number;
+    round?: boolean;
+    line?: boolean;
+    scrollIntoViewOptions?: ScrollIntoViewOptions;
+}
+export interface SidebarSlots {
+    default?(props: Record<string, never>): any;
+}
+export interface SidebarEmits {
+    (e: 'update:current', name: string | number): void;
+    (e: 'change', name: string | number): void;
+}
+export interface SidebarExpose {
+}
+export interface SidebarContext {
+    current: any;
+    select: (name: string | number, rect?: NodeRect) => void;
+    register: (name: string | number, getRect: () => Promise<NodeRect>) => void;
+    unregister: (name: string | number) => void;
+    round?: boolean;
+    line?: boolean;
+}
+export declare const sidebarContextSymbol: unique symbol;

package/components/sidebar/common.js

@@ -0,0 +1 @@
+export const sidebarContextSymbol = Symbol('sidebar-context');

package/components/sidebar/index.d.ts

@@ -0,0 +1 @@
+export type { SidebarProps, SidebarSlots, SidebarEmits, SidebarExpose, } from './common';

package/components/sidebar/index.js

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

package/components/sidebar/index.scss

@@ -0,0 +1,15 @@
+@use '../style/base' as *;
+
+@include bem(sidebar) {
+  @include b() {
+    @include universal;
+    width: var(--sar-sidebar-width);
+    background: var(--sar-sidebar-bg);
+  }
+
+  @include e(content) {
+    @include universal;
+
+    min-height: 100%;
+  }
+}

package/components/sidebar/sidebar.d.ts

@@ -0,0 +1,16 @@
+import { type SidebarProps, type SidebarSlots } from './common';
+declare function __VLS_template(): Readonly<SidebarSlots> & SidebarSlots;
+declare const __VLS_component: import("vue").DefineComponent<SidebarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    change: (name: string | number) => any;
+    "update:current": (name: string | number) => any;
+}, string, import("vue").PublicProps, Readonly<SidebarProps> & Readonly<{
+    onChange?: ((name: string | number) => any) | undefined;
+    "onUpdate:current"?: ((name: string | number) => any) | undefined;
+}>, {}, {}, {}, {}, 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/sidebar/sidebar.vue

@@ -0,0 +1,136 @@
+<template>
+  <scroll-view
+    scroll-y
+    :scroll-top="scrollTop"
+    :class="sidebarClass"
+    :style="sidebarStyle"
+    @scroll="onScroll"
+  >
+    <view :class="bem.e('content')">
+      <slot></slot>
+    </view>
+  </scroll-view>
+</template>
+
+<script>
+import { defineComponent as _defineComponent } from "vue";
+import {
+  computed,
+  getCurrentInstance,
+  provide,
+  reactive,
+  ref,
+  toRef,
+  watch
+} from "vue";
+import {
+  classNames,
+  stringifyStyle,
+  createBem,
+  getScrollIntoViewValue,
+  uniqid,
+  getBoundingClientRect,
+  isNullish
+} from "../../utils";
+import {
+  sidebarContextSymbol
+} from "./common";
+export default  _defineComponent({
+  ...{
+    options: {
+      virtualHost: true,
+      styleIsolation: "shared"
+    }
+  },
+  __name: "sidebar",
+  props: {
+    rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
+    rootClass: { type: String, required: false },
+    current: { type: [String, Number], required: false },
+    round: { type: Boolean, required: false },
+    line: { type: Boolean, required: false },
+    scrollIntoViewOptions: { type: Object, required: false }
+  },
+  emits: ["update:current", "change"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const bem = createBem("sidebar");
+    const innerCurrent = ref(props.current);
+    const sidebarItemMap =  new Map();
+    const scrollViewId = uniqid();
+    const scrollTop = ref(0);
+    const instance = getCurrentInstance();
+    let memoScrollTop = 0;
+    const onScroll = (event) => {
+      memoScrollTop = event.detail.scrollTop;
+    };
+    const scrollIntoView = async (name) => {
+      const getRect = sidebarItemMap.get(name);
+      if (!getRect) {
+        return;
+      }
+      const itemRect = await getRect();
+      const scrollViewRect = await getBoundingClientRect(
+        `.${scrollViewId}`,
+        instance
+      );
+      const value = getScrollIntoViewValue(
+        scrollViewRect.height,
+        memoScrollTop,
+        itemRect.height,
+        itemRect.top - scrollViewRect.top + memoScrollTop,
+        props.scrollIntoViewOptions
+      );
+      scrollTop.value = value;
+    };
+    watch(
+      () => props.current,
+      () => {
+        if (!isNullish(props.current) && props.current !== innerCurrent.value) {
+          innerCurrent.value = props.current;
+          scrollIntoView(props.current);
+        }
+      }
+    );
+    provide(
+      sidebarContextSymbol,
+      reactive({
+        current: innerCurrent,
+        round: toRef(() => props.round),
+        line: toRef(() => props.line),
+        register(name, getRect) {
+          sidebarItemMap.set(name, getRect);
+        },
+        unregister(name) {
+          sidebarItemMap.delete(name);
+        },
+        select(name) {
+          if (name !== innerCurrent.value) {
+            innerCurrent.value = name;
+            emit("update:current", name);
+            emit("change", name);
+          }
+        }
+      })
+    );
+    const sidebarClass = computed(() => {
+      return classNames(bem.b(), props.rootClass, scrollViewId);
+    });
+    const sidebarStyle = computed(() => {
+      return stringifyStyle(props.rootStyle);
+    });
+    __expose({});
+    const __returned__ = { props, emit, bem, innerCurrent, sidebarItemMap, scrollViewId, scrollTop, instance, get memoScrollTop() {
+      return memoScrollTop;
+    }, set memoScrollTop(v) {
+      memoScrollTop = v;
+    }, onScroll, scrollIntoView, sidebarClass, sidebarStyle };
+    return __returned__;
+  }
+});
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>

package/components/sidebar/variables.scss

@@ -0,0 +1,20 @@
+// #variables
+page {
+  --sar-sidebar-bg: var(--sar-body-bg);
+  --sar-sidebar-width: 184rpx;
+
+  --sar-sidebar-item-padding-x: 40rpx;
+  --sar-sidebar-item-padding-y: 28rpx;
+  --sar-sidebar-item-font-size: var(--sar-text-sm);
+  --sar-sidebar-item-color: var(--sar-secondary-color);
+  --sar-sidebar-item-active-bg: var(--sar-emphasis-bg);
+  --sar-sidebar-item-active-color: var(--sar-emphasis-color);
+  --sar-sidebar-item-active-font-weight: var(--sar-font-normal);
+
+  --sar-sidebar-line-width: 6rpx;
+  --sar-sidebar-line-height: 24rpx;
+  --sar-sidebar-line-bg: var(--sar-primary);
+
+  --sar-sidebar-round-size: 12rpx;
+}
+// #endvariables

package/components/sidebar-item/common.d.ts

@@ -0,0 +1,16 @@
+import { type StyleValue } from 'vue';
+export interface SidebarItemProps {
+    rootStyle?: StyleValue;
+    rootClass?: string;
+    title?: string;
+    name: string | number;
+    disabled?: boolean;
+}
+export interface SidebarItemSlots {
+    default?(props: Record<string, never>): any;
+}
+export interface SidebarItemEmits {
+    (e: 'click', event: any): void;
+}
+export interface SidebarItemExpose {
+}

package/components/sidebar-item/common.js

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

package/components/sidebar-item/index.d.ts

@@ -0,0 +1 @@
+export type { SidebarItemProps, SidebarItemSlots, SidebarItemEmits, SidebarItemExpose, } from './common';

package/components/sidebar-item/index.js

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

package/components/sidebar-item/index.scss

@@ -0,0 +1,70 @@
+@use '../style/base' as *;
+
+@include bem(sidebar-item) {
+  @include b() {
+    @include universal;
+    padding: var(--sar-sidebar-item-padding-y) var(--sar-sidebar-item-padding-x);
+    cursor: pointer;
+    font-size: var(--sar-sidebar-item-font-size);
+    line-height: var(--sar-leading-snug);
+    color: var(--sar-sidebar-item-color);
+    text-align: center;
+
+    @include m(current) {
+      font-weight: var(--sar-sidebar-item-active-font-weight);
+      color: var(--sar-sidebar-item-active-color);
+      background: var(--sar-sidebar-item-active-bg);
+    }
+
+    @include m(disabled) {
+      @include disabled-text;
+    }
+  }
+
+  @include e(title) {
+    @include line-clamp(2);
+  }
+
+  @include e(line) {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    width: var(--sar-sidebar-line-width);
+    height: var(--sar-sidebar-line-height);
+    transform: translateY(-50%);
+    background: var(--sar-sidebar-line-bg);
+  }
+
+  @include e(round-top, round-bottom) {
+    position: absolute;
+    right: 0;
+    width: var(--sar-sidebar-round-size);
+    height: var(--sar-sidebar-round-size);
+    background: var(--sar-sidebar-item-active-bg);
+    pointer-events: none;
+
+    &::before {
+      content: '';
+      display: flex;
+      width: 100%;
+      height: 100%;
+      background-color: var(--sar-sidebar-bg);
+    }
+  }
+
+  @include e(round-top) {
+    bottom: 100%;
+
+    &::before {
+      border-bottom-right-radius: 100%;
+    }
+  }
+
+  @include e(round-bottom) {
+    top: 100%;
+
+    &::before {
+      border-top-right-radius: 100%;
+    }
+  }
+}

package/components/sidebar-item/sidebar-item.d.ts

@@ -0,0 +1,14 @@
+import { type SidebarItemProps, type SidebarItemSlots } from './common';
+declare function __VLS_template(): Readonly<SidebarItemSlots> & SidebarItemSlots;
+declare const __VLS_component: import("vue").DefineComponent<SidebarItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    click: (event: any) => any;
+}, string, import("vue").PublicProps, Readonly<SidebarItemProps> & Readonly<{
+    onClick?: ((event: any) => any) | undefined;
+}>, {}, {}, {}, {}, 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/sidebar-item/sidebar-item.vue

@@ -0,0 +1,111 @@
+<template>
+  <view :class="sidebarItemClass" :style="sidebarItemStyle" @click="onClick">
+    <view v-if="isCurrent && context.round" :class="bem.e('round-top')"></view>
+    <view v-if="isCurrent && context.line" :class="bem.e('line')"></view>
+    <slot>
+      <view :class="bem.e('title')">
+        {{ title }}
+      </view>
+    </slot>
+    <view
+      v-if="isCurrent && context.round"
+      :class="bem.e('round-bottom')"
+    ></view>
+  </view>
+</template>
+
+<script>
+import { defineComponent as _defineComponent } from "vue";
+import {
+  computed,
+  getCurrentInstance,
+  inject,
+  nextTick,
+  onMounted,
+  onUnmounted
+} from "vue";
+import {
+  classNames,
+  stringifyStyle,
+  createBem,
+  uniqid,
+  getBoundingClientRect
+} from "../../utils";
+import { sidebarContextSymbol } from "../sidebar/common";
+export default  _defineComponent({
+  ...{
+    options: {
+      virtualHost: true,
+      styleIsolation: "shared"
+    }
+  },
+  __name: "sidebar-item",
+  props: {
+    rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
+    rootClass: { type: String, required: false },
+    title: { type: String, required: false },
+    name: { type: [String, Number], required: true },
+    disabled: { type: Boolean, required: false }
+  },
+  emits: ["click"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const bem = createBem("sidebar-item");
+    const context = inject(sidebarContextSymbol);
+    if (!context) {
+      throw new Error("SidebarItem must be included in Sidebar.");
+    }
+    const instance = getCurrentInstance();
+    const isCurrent = computed(() => {
+      return context.current === props.name;
+    });
+    const itemId = uniqid();
+    const getRect = () => {
+      return getBoundingClientRect(`.${itemId}`, instance);
+    };
+    const select = () => {
+      context.select(props.name);
+    };
+    const onClick = (event) => {
+      emit("click", event);
+      if (!props.disabled) {
+        select();
+      }
+    };
+    onMounted(() => {
+      context.register(props.name, getRect);
+      if (isCurrent.value) {
+        nextTick(() => {
+          select();
+        });
+      }
+    });
+    onUnmounted(() => {
+      context.unregister(props.name);
+    });
+    const sidebarItemClass = computed(() => {
+      return classNames(
+        bem.b(),
+        bem.m("current", isCurrent.value),
+        bem.m("disabled", props.disabled),
+        props.rootClass,
+        itemId
+      );
+    });
+    const sidebarItemStyle = computed(() => {
+      return stringifyStyle(props.rootStyle);
+    });
+    __expose({
+      reset: () => {
+      }
+    });
+    const __returned__ = { props, emit, bem, context, instance, isCurrent, itemId, getRect, select, onClick, sidebarItemClass, sidebarItemStyle };
+    return __returned__;
+  }
+});
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>

package/components/signature/common.d.ts

@@ -0,0 +1,41 @@
+import { type StyleValue } from 'vue';
+export interface SignatureProps {
+    rootStyle?: StyleValue;
+    rootClass?: string;
+    color?: string;
+    lineWidth?: number;
+    background?: string;
+    fullScreen?: boolean;
+    duration?: number;
+    visible?: boolean;
+    cancelText?: string;
+    clearText?: string;
+    confirmText?: string;
+    customNavbar?: boolean;
+    type?: 'png' | 'jpg';
+    target?: 'dataURL' | 'filePath';
+    quality?: number;
+}
+export declare const defaultSignatureProps: {
+    lineWidth: number;
+    fullScreen: boolean;
+    color: string;
+    duration: number;
+    type: "png";
+    target: "dataURL";
+    quality: number;
+};
+export interface SignatureSlots {
+    default?(props: Record<string, never>): any;
+}
+export interface SignatureEmits {
+    (e: 'update:visible', visible: boolean): void;
+    (e: 'confirm', dataURL: string): void;
+    (e: 'clear'): void;
+    (e: 'cancel'): void;
+}
+export interface SignatureExpose {
+    resize: () => void;
+    clear: () => void;
+    confirm: () => void;
+}

package/components/signature/common.js

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

package/components/signature/index.d.ts

@@ -0,0 +1 @@
+export type { SignatureProps, SignatureSlots, SignatureEmits, SignatureExpose, } from './common';

package/components/signature/index.js

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

package/components/signature/index.scss

@@ -0,0 +1,109 @@
+@use '../style/base' as *;
+
+@include bem(signature) {
+  @include b() {
+    @include universal;
+  }
+
+  @include e(body) {
+    @include universal;
+    width: 100%;
+    height: var(--sar-signature-canvas-height);
+  }
+
+  @include e(canvas-content) {
+    width: 100%;
+    height: 100%;
+  }
+
+  @include e(canvas) {
+    width: 100%;
+    height: 100%;
+    background-color: var(--sar-signature-canvas-bg);
+  }
+
+  @include e(covert-canvas) {
+    position: fixed;
+    left: 200vw;
+  }
+
+  @include e(footer) {
+    @include universal;
+    margin-top: 20rpx;
+  }
+
+  @include e(footer-content) {
+    @include universal;
+    flex-direction: row;
+  }
+
+  @include e(button-group) {
+    @include universal;
+    flex-direction: row;
+    margin-left: auto;
+    gap: 20rpx;
+  }
+
+  @include m(full) {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var(--sar-signature-full-bg);
+    touch-action: none;
+
+    @include e(content) {
+      @include universal;
+      flex: 1;
+      min-height: 0;
+      flex-direction: row-reverse;
+    }
+
+    @include e(body) {
+      width: calc(100vw - var(--sar-signature-side-width));
+      height: 100%;
+      padding: var(--sar-signature-full-gap) var(--sar-signature-full-gap)
+        calc(var(--sar-signature-full-gap) + env(safe-area-inset-bottom)) 0;
+    }
+
+    @include e(footer) {
+      position: relative;
+      width: var(--sar-signature-side-width);
+      height: 100%;
+      margin-top: 0;
+    }
+
+    @include e(footer-content) {
+      position: absolute;
+      right: 100%;
+      bottom: 0;
+      width: 100vh;
+      height: var(--sar-signature-side-width);
+      padding-left: var(--sar-signature-full-gap);
+      padding-right: calc(
+        var(--sar-signature-full-gap) + env(safe-area-inset-bottom)
+      );
+      align-items: center;
+      transform-origin: right bottom;
+      transform: rotate(90deg);
+    }
+  }
+
+  @include m(fade-enter-from, fade-leave-to) {
+    opacity: 0;
+  }
+
+  @include m(fade-enter-to, fade-leave-from) {
+    opacity: 1;
+  }
+
+  @include m(fade-enter-active, fade-leave-active) {
+    transition: opacity 0s ease;
+  }
+
+  @include m(hidden) {
+    left: 200vw;
+    opacity: 0;
+  }
+}

package/components/signature/signature.d.ts

@@ -0,0 +1,32 @@
+import { type SignatureProps, type SignatureSlots } from './common';
+declare function __VLS_template(): Readonly<SignatureSlots> & SignatureSlots;
+declare const __VLS_component: import("vue").DefineComponent<SignatureProps, {
+    resize: () => void;
+    clear: () => void;
+    confirm: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    cancel: () => any;
+    clear: () => any;
+    confirm: (dataURL: string) => any;
+    "update:visible": (visible: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<SignatureProps> & Readonly<{
+    onCancel?: (() => any) | undefined;
+    onClear?: (() => any) | undefined;
+    onConfirm?: ((dataURL: string) => any) | undefined;
+    "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
+}>, {
+    type: "png" | "jpg";
+    duration: number;
+    color: string;
+    target: "dataURL" | "filePath";
+    quality: number;
+    lineWidth: number;
+    fullScreen: 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;
+    };
+};