sard-uniapp 1.5.0 → 1.6.0-rc

package/changelog.md

@@ -1,3 +1,12 @@
+# [1.6.0-rc](https://github.com/sutras/sard-uniapp/compare/v1.5.0...v1.6.0-rc) (2024-08-19)
+
+
+### Features
+
+* 新增Tree, Timeline, BackTop 组件 close [#36](https://github.com/sutras/sard-uniapp/issues/36), close [#41](https://github.com/sutras/sard-uniapp/issues/41), close 43 ([4b7a222](https://github.com/sutras/sard-uniapp/commit/4b7a222a55ca25e85026a9028717c61ea8b2bbea))
+
+
+
 # [1.5.0](https://github.com/sutras/sard-uniapp/compare/v1.4.1...v1.5.0) (2024-08-08)
 
 

package/components/accordion/accordion.vue

@@ -61,7 +61,7 @@ export default  _defineComponent({
       accoridonContextSymbol,
       reactive({
         value: innerValue,
-        multiple: toRef(props, "multiple"),
+        multiple: toRef(() => props.multiple),
         toggle
       })
     );

package/components/accordion-item/accordion-item.vue

@@ -1,11 +1,6 @@
 <template>
   <view :class="accordionItemClass" :style="accordionItemStyle">
-    <view
-      :class="
-        classNames(bem.e('header'), bem.em('header', 'disabled', disabled))
-      "
-      @click="onClick"
-    >
+    <view :class="classNames(bem.e('header'))" @click="onClick">
       <view :class="bem.e('title')">{{ title }}</view>
       <view v-if="value" :class="bem.e('value')">{{ value }}</view>
       <view :class="bem.e('arrow')">
@@ -70,7 +65,7 @@ export default  _defineComponent({
       return visible.value ? "up" : "down";
     });
     const accordionItemClass = computed(() => {
-      return classNames(bem.b(), props.rootClass);
+      return classNames(bem.b(), bem.m("disabled", props.disabled), props.rootClass);
     });
     const accordionItemStyle = computed(() => {
       return stringifyStyle(props.rootStyle);

package/components/accordion-item/index.scss

@@ -24,17 +24,6 @@
     padding: var(--sar-accordion-item-header-padding-y)
       var(--sar-accordion-item-header-padding-x);
     cursor: pointer;
-
-    @include m-not(disabled) {
-      &:active {
-        background-color: var(--sar-accordion-active-bg);
-      }
-    }
-
-    @include m(disabled) {
-      cursor: not-allowed;
-      @include disabled;
-    }
   }
 
   @include e(title) {
@@ -62,4 +51,21 @@
       right: var(--sar-accordion-item-body-padding-x);
     }
   }
+
+  @include m(disabled) {
+    @include e(header) {
+      cursor: not-allowed;
+    }
+    @include e(title, arrow) {
+      color: var(--sar-disabled-color);
+    }
+  }
+
+  @include m-not(disabled) {
+    @include e(header) {
+      &:active {
+        background-color: var(--sar-accordion-active-bg);
+      }
+    }
+  }
 }

package/components/action-sheet/action-sheet.d.ts

@@ -12,8 +12,8 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     duration: number;
 }>>> & {
     onSelect?: ((item: ActionSheetItem, index: number) => any) | undefined;
-    onClose?: (() => any) | undefined;
     onCancel?: (() => any) | undefined;
+    onClose?: (() => any) | undefined;
     "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
 }, {
     overlayClosable: boolean;

package/components/back-top/back-top.d.ts

@@ -0,0 +1,38 @@
+import { type BackTopProps, type BackTopSlots } from './common';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<BackTopProps>, {
+    scrollTop: number;
+    visibleHeight: number;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (event: any) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<BackTopProps>, {
+    scrollTop: number;
+    visibleHeight: number;
+}>>> & {
+    onClick?: ((event: any) => any) | undefined;
+}, {
+    visibleHeight: number;
+    scrollTop: number;
+}, {}>, Readonly<BackTopSlots> & BackTopSlots>;
+export default _default;
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/components/back-top/back-top.vue

@@ -0,0 +1,62 @@
+<template>
+  <view :class="backTopClass" :style="backTopStyle" @click="onClick">
+    <slot>
+      <sar-icon name="backtop" />
+    </slot>
+  </view>
+</template>
+
+<script>
+import { mergeDefaults as _mergeDefaults, defineComponent as _defineComponent } from "vue";
+import { computed } from "vue";
+import { classNames, stringifyStyle, createBem } from "../../utils";
+import {
+  backTopPropsDefaults
+} from "./common";
+import SarIcon from "../icon/icon.vue";
+export default  _defineComponent({
+  ...{
+    options: {
+      virtualHost: true,
+      styleIsolation: "shared"
+    }
+  },
+  __name: "back-top",
+  props:  _mergeDefaults({
+    rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
+    rootClass: { type: String, required: false },
+    scrollTop: { type: Number, required: false },
+    visibleHeight: { type: Number, required: false },
+    right: { type: String, required: false },
+    bottom: { type: String, required: false }
+  }, backTopPropsDefaults),
+  emits: ["click"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    __expose();
+    const props = __props;
+    const emit = __emit;
+    const bem = createBem("back-top");
+    const visible = computed(() => {
+      return props.scrollTop >= props.visibleHeight;
+    });
+    const onClick = (event) => {
+      emit("click", event);
+    };
+    const backTopClass = computed(() => {
+      return classNames(bem.b(), bem.m("visible", visible.value), props.rootClass);
+    });
+    const backTopStyle = computed(() => {
+      return stringifyStyle(props.rootStyle, {
+        right: props.right,
+        bottom: props.bottom
+      });
+    });
+    const __returned__ = { props, emit, bem, visible, onClick, backTopClass, backTopStyle, SarIcon };
+    return __returned__;
+  }
+});
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>

package/components/back-top/common.d.ts

@@ -0,0 +1,19 @@
+import { type StyleValue } from 'vue';
+export interface BackTopProps {
+    rootStyle?: StyleValue;
+    rootClass?: string;
+    scrollTop?: number;
+    visibleHeight?: number;
+    right?: string;
+    bottom?: string;
+}
+export declare const backTopPropsDefaults: {
+    scrollTop: number;
+    visibleHeight: number;
+};
+export interface BackTopSlots {
+    default?(props: Record<string, never>): any;
+}
+export interface BackTopEmits {
+    (e: 'click', event: any): void;
+}

package/components/back-top/common.js

@@ -0,0 +1,5 @@
+import { defaultConfig } from '../config';
+export const backTopPropsDefaults = {
+    ...defaultConfig.backTop,
+    scrollTop: 0,
+};

package/components/back-top/index.d.ts

@@ -0,0 +1,3 @@
+export type { BackTopProps, BackTopSlots, BackTopEmits } from './common';
+export { usePageBackTop } from './usePageBackTop';
+export { useScrollViewBackTop } from './useScrollViewBackTop';

package/components/back-top/index.js

@@ -0,0 +1,2 @@
+export { usePageBackTop } from './usePageBackTop';
+export { useScrollViewBackTop } from './useScrollViewBackTop';

package/components/back-top/index.scss

@@ -0,0 +1,34 @@
+@use '../style/base' as *;
+
+@include bem(back-top) {
+  @include b() {
+    @include universal;
+    position: fixed;
+    right: var(--sar-back-top-right);
+    bottom: var(--sar-back-top-bottom);
+    z-index: var(--sar-back-top-z-index);
+    justify-content: center;
+    align-items: center;
+    min-width: var(--sar-back-top-min-width);
+    height: var(--sar-back-top-height);
+    padding: 0 var(--sar-back-top-padding-x);
+    border-radius: var(--sar-back-top-border-radius);
+    font-size: var(--sar-back-top-font-size);
+    color: var(--sar-back-top-color);
+    background-color: var(--sar-back-top-bg);
+    box-shadow: var(--sar-back-top-box-shadow);
+    cursor: pointer;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity var(--sar-back-top-duration);
+
+    &:active {
+      opacity: var(--sar-back-top-active-opacity);
+    }
+
+    @include m(visible) {
+      pointer-events: auto;
+      opacity: 1;
+    }
+  }
+}

package/components/back-top/usePageBackTop.d.ts

@@ -0,0 +1,4 @@
+export declare function usePageBackTop(duration?: number): {
+    scrollTop: import("vue").Ref<number>;
+    onClick: () => void;
+};

package/components/back-top/usePageBackTop.js

@@ -0,0 +1,18 @@
+import { onPageScroll } from '@dcloudio/uni-app';
+import { ref } from 'vue';
+export function usePageBackTop(duration = 300) {
+    const scrollTop = ref(0);
+    onPageScroll((event) => {
+        scrollTop.value = event.scrollTop;
+    });
+    const onClick = () => {
+        uni.pageScrollTo({
+            scrollTop: 0,
+            duration,
+        });
+    };
+    return {
+        scrollTop,
+        onClick,
+    };
+}

package/components/back-top/useScrollViewBackTop.d.ts

@@ -0,0 +1,5 @@
+export declare function useScrollViewBackTop(): {
+    scrollTop: import("vue").Ref<number>;
+    onScroll: (event: any) => void;
+    onClick: () => void;
+};

package/components/back-top/useScrollViewBackTop.js

@@ -0,0 +1,15 @@
+import { ref } from 'vue';
+export function useScrollViewBackTop() {
+    const scrollTop = ref(0);
+    const onScroll = (event) => {
+        scrollTop.value = event.detail.scrollTop;
+    };
+    const onClick = () => {
+        scrollTop.value = 0;
+    };
+    return {
+        scrollTop,
+        onScroll,
+        onClick,
+    };
+}

package/components/back-top/variables.scss

@@ -0,0 +1,17 @@
+// #variables
+page {
+  --sar-back-top-right: 48rpx;
+  --sar-back-top-bottom: 96rpx;
+  --sar-back-top-z-index: 1000;
+  --sar-back-top-height: 96rpx;
+  --sar-back-top-min-width: 96rpx;
+  --sar-back-top-padding-x: 24rpx;
+  --sar-back-top-border-radius: var(--sar-rounded-full);
+  --sar-back-top-font-size: 48rpx;
+  --sar-back-top-color: var(--sar-white);
+  --sar-back-top-bg: var(--sar-primary);
+  --sar-back-top-box-shadow: var(--sar-shadow-lg);
+  --sar-back-top-active-opacity: var(--sar-active-opacity);
+  --sar-back-top-duration: var(--sar-duration);
+}
+// #endvariables

package/components/cascader/index.scss

@@ -51,7 +51,7 @@
     }
 
     @include m(disabled) {
-      @include disabled;
+      @include disabled-text;
     }
 
     @include m-not(disabled) {

package/components/check-icon/check-icon.d.ts

@@ -0,0 +1,29 @@
+import { type CheckIconProps } from './common';
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<CheckIconProps>, {
+    shape: string;
+    type: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<CheckIconProps>, {
+    shape: string;
+    type: string;
+}>>>, {
+    type: "empty" | "dot" | "check" | "dash";
+    shape: "circle" | "square";
+}, {}>;
+export default _default;
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/components/check-icon/check-icon.vue

@@ -0,0 +1,50 @@
+<template>
+  <view :class="checkIconClass">
+    <sar-icon v-if="iconName" :name="iconName" />
+  </view>
+</template>
+
+<script>
+import { defineComponent as _defineComponent } from "vue";
+import { computed } from "vue";
+import { classNames, createBem } from "../../utils";
+import SarIcon from "../icon/icon.vue";
+export default  _defineComponent({
+  ...{
+    options: {
+      virtualHost: true,
+      styleIsolation: "shared"
+    }
+  },
+  __name: "check-icon",
+  props: {
+    rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
+    rootClass: { type: String, required: false },
+    disabled: { type: Boolean, required: false },
+    shape: { type: String, required: false, default: "square" },
+    type: { type: String, required: false, default: "check" }
+  },
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const bem = createBem("check-icon");
+    const iconName = computed(() => {
+      return props.disabled && props.type === "check" ? "check" : props.disabled && props.type === "dash" ? "dash" : props.type === "check" ? `check-${props.shape}-fill` : props.type === "dash" ? `dash-${props.shape}-fill` : props.type === "dot" ? `record-circle` : void 0;
+    });
+    const checkIconClass = computed(() => {
+      return classNames(
+        bem.b(),
+        bem.m(props.shape),
+        bem.m(props.type),
+        bem.m("disabled", props.disabled)
+      );
+    });
+    const __returned__ = { props, bem, iconName, checkIconClass, SarIcon };
+    return __returned__;
+  }
+});
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>

package/components/check-icon/common.d.ts

@@ -0,0 +1,8 @@
+import { StyleValue } from 'vue';
+export interface CheckIconProps {
+    rootStyle?: StyleValue;
+    rootClass?: string;
+    disabled?: boolean;
+    shape?: 'circle' | 'square';
+    type?: 'empty' | 'check' | 'dot' | 'dash';
+}

package/components/check-icon/common.js

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

package/components/check-icon/index.scss

@@ -0,0 +1,30 @@
+@use '../style/base' as *;
+
+@include bem(check-icon) {
+  @include b() {
+    @include universal;
+    justify-content: center;
+    align-items: center;
+    width: var(--sar-check-icon-size);
+    height: var(--sar-check-icon-size);
+    border: 1px solid var(--sar-check-icon-border-color);
+
+    @include m(square) {
+      border-radius: var(--sar-check-icon-square-border-radius);
+    }
+
+    @include m(circle) {
+      border-radius: 50%;
+    }
+
+    @include m(check, dot, dash) {
+      border-color: transparent;
+    }
+
+    @include m(disabled) {
+      color: var(--sar-check-icon-disabled-color);
+      background-color: var(--sar-check-icon-disabled-bg);
+      border-color: var(--sar-check-icon-disabled-border-color);
+    }
+  }
+}

package/components/check-icon/variables.scss

@@ -0,0 +1,11 @@
+// #variables
+page {
+  --sar-check-icon-size: 1em;
+  --sar-check-icon-square-border-radius: 0.15em;
+  --sar-check-icon-border-color: var(--sar-quaternary-color);
+
+  --sar-check-icon-disabled-color: var(--sar-disabled-color);
+  --sar-check-icon-disabled-bg: var(--sar-disabled-shallow-bg);
+  --sar-check-icon-disabled-border-color: var(--sar-disabled-border-color);
+}
+// #endvariables

package/components/checkbox/checkbox.d.ts

@@ -4,9 +4,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: (event: any) => void;
     "update:checked": (checked: boolean) => void;
+    change: (checked: boolean) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<CheckboxProps>, {
     validateEvent: boolean;
 }>>> & {
+    onChange?: ((checked: boolean) => any) | undefined;
     onClick?: ((event: any) => any) | undefined;
     "onUpdate:checked"?: ((checked: boolean) => any) | undefined;
 }, {

package/components/checkbox/checkbox.vue

@@ -2,7 +2,11 @@
   <view :class="checkboxClass" :style="checkboxStyle" @click="onClick">
     <view :class="iconClass" :style="iconStyle">
       <slot name="icon" :checked="innerChecked">
-        <sar-icon v-if="!$slots.icon" :name="iconName" />
+        <sar-check-icon
+          :shape="checkIconShape"
+          :type="checkIconType"
+          :disabled="isDisabled"
+        />
       </slot>
     </view>
     <view v-if="$slots.default || label" :class="labelClass">
@@ -17,10 +21,9 @@ import { computed, provide, inject, ref, watch } from "vue";
 import { classNames, createBem, stringifyStyle } from "../../utils";
 import {
   checkboxContextSymbol,
-  mapTypeIcon,
   checkboxPropsDefaults
 } from "./common";
-import SarIcon from "../icon/icon.vue";
+import SarCheckIcon from "../check-icon/check-icon.vue";
 import { useFormContext, useFormItemContext } from "../form/common";
 export default  _defineComponent({
   ...{
@@ -34,6 +37,7 @@ export default  _defineComponent({
     rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
     rootClass: { type: String, required: false },
     checked: { type: Boolean, required: false },
+    indeterminate: { type: Boolean, required: false },
     value: { type: null, required: false },
     label: { type: String, required: false },
     disabled: { type: Boolean, required: false },
@@ -43,7 +47,7 @@ export default  _defineComponent({
     checkedColor: { type: String, required: false },
     validateEvent: { type: Boolean, required: false }
   }, checkboxPropsDefaults),
-  emits: ["click", "update:checked"],
+  emits: ["click", "update:checked", "change"],
   setup(__props, { expose: __expose, emit: __emit }) {
     __expose();
     const props = __props;
@@ -88,6 +92,7 @@ export default  _defineComponent({
         } else {
           innerChecked.value = !innerChecked.value;
           emit("update:checked", innerChecked.value);
+          emit("change", innerChecked.value);
         }
       }
       emit("click", event);
@@ -105,9 +110,11 @@ export default  _defineComponent({
     const checkboxStyle = computed(() => {
       return stringifyStyle(props.rootStyle);
     });
-    const iconName = computed(() => {
-      const type = props.type ?? groupContext?.type ?? "square";
-      return mapTypeIcon[type][innerChecked.value ? 1 : 0];
+    const checkIconShape = computed(() => {
+      return props.type ?? groupContext?.type ?? "square";
+    });
+    const checkIconType = computed(() => {
+      return innerChecked.value ? "check" : props.indeterminate ? "dash" : "empty";
     });
     const iconColor = computed(() => {
       return innerChecked.value && !isDisabled.value ? props.checkedColor ?? groupContext?.checkedColor : void 0;
@@ -115,7 +122,8 @@ export default  _defineComponent({
     const iconClass = computed(() => {
       return classNames(
         bem.e("icon"),
-        bem.em("icon", "checked", innerChecked.value)
+        bem.em("icon", "checked", innerChecked.value),
+        bem.em("icon", "indeterminate", props.indeterminate)
       );
     });
     const iconStyle = computed(() => {
@@ -127,7 +135,7 @@ export default  _defineComponent({
     const labelClass = computed(() => {
       return classNames(bem.e("label"));
     });
-    const __returned__ = { props, emit, bem, groupContext, formContext, formItemContext, isDisabled, isReadonly, innerChecked, onClick, checkboxClass, checkboxStyle, iconName, iconColor, iconClass, iconStyle, labelClass, SarIcon };
+    const __returned__ = { props, emit, bem, groupContext, formContext, formItemContext, isDisabled, isReadonly, innerChecked, onClick, checkboxClass, checkboxStyle, checkIconShape, checkIconType, iconColor, iconClass, iconStyle, labelClass, SarCheckIcon };
     return __returned__;
   }
 });

package/components/checkbox/common.d.ts

@@ -4,6 +4,7 @@ export interface CheckboxProps {
     rootStyle?: StyleValue;
     rootClass?: string;
     checked?: boolean;
+    indeterminate?: boolean;
     value?: any;
     label?: string;
     disabled?: boolean;
@@ -25,6 +26,7 @@ export interface CheckboxSlots {
 export interface CheckboxEmits {
     (e: 'click', event: any): void;
     (e: 'update:checked', checked: boolean): void;
+    (e: 'change', checked: boolean): void;
 }
 export declare const defaultOptionKeys: {
     label: string;
@@ -65,6 +67,7 @@ export interface CheckboxGroupSlots {
 export interface CheckboxGroupEmits {
     (e: 'click', event: any): void;
     (e: 'update:model-value', value: any[]): void;
+    (e: 'change', value: any[]): void;
 }
 export interface CheckboxContext {
     disabled: CheckboxGroupProps['disabled'];
@@ -76,7 +79,3 @@ export interface CheckboxContext {
     toggle: (value: any) => void;
 }
 export declare const checkboxContextSymbol: unique symbol;
-export declare const mapTypeIcon: {
-    square: string[];
-    circle: string[];
-};

package/components/checkbox/common.js

@@ -6,7 +6,3 @@ export const defaultOptionKeys = {
 };
 export const checkboxGroupPropsDefaults = defaultConfig.checkboxGroup;
 export const checkboxContextSymbol = Symbol('checkbox-context');
-export const mapTypeIcon = {
-    square: ['square', 'check-square-fill'],
-    circle: ['circle', 'check-circle-fill'],
-};

package/components/checkbox/index.scss

@@ -15,7 +15,7 @@
     color: var(--sar-checkbox-icon-color);
     transition: color var(--sar-checkbox-icon-transition-duration);
 
-    @include m(checked) {
+    @include m(checked, indeterminate) {
       color: var(--sar-checkbox-icon-checked-color);
     }
   }
@@ -27,14 +27,14 @@
   }
 
   @include m(readonly) {
-    cursor: default;
+    cursor: unset;
   }
 
   @include m(disabled) {
     cursor: var(--sar-disabled-cursor);
 
     @include e(icon) {
-      @include disabled;
+      color: var(--sar-checkbox-icon-disabled-color);
     }
 
     @include e(label) {

package/components/checkbox/variables.scss

@@ -6,6 +6,7 @@ page {
   --sar-checkbox-icon-font-size: 40rpx;
   --sar-checkbox-icon-color: var(--sar-quaternary-color);
   --sar-checkbox-icon-checked-color: var(--sar-primary);
+  --sar-checkbox-icon-disabled-color: var(--sar-disabled-color);
   --sar-checkbox-icon-transition-duration: var(--sar-duration);
 
   --sar-checkbox-label-margin-left: 16rpx;