sard-uniapp 1.4.0 → 1.5.0-rc

package/changelog.md

@@ -1,3 +1,16 @@
+# [1.5.0-rc](https://github.com/sutras/sard-uniapp/compare/v1.4.1...v1.5.0-rc) (2024-08-08)
+
+
+
+## [1.4.1](https://github.com/sutras/sard-uniapp/compare/v1.4.0...v1.4.1) (2024-08-02)
+
+
+### Features
+
+* search组件新增clear, focus, blur事件 ([05dc641](https://github.com/sutras/sard-uniapp/commit/05dc641947e83a6d9e9c92b46cfc33135116eb22))
+
+
+
 # [1.4.0](https://github.com/sutras/sard-uniapp/compare/v1.3.0...v1.4.0) (2024-08-01)
 
 

package/components/card/card.d.ts

@@ -1,8 +1,8 @@
 import { type CardProps, type CardSlots } from './common';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<CardProps>, {}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    click: (...args: any[]) => void;
+    click: (event: any) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<CardProps>, {}>>> & {
-    onClick?: ((...args: any[]) => any) | undefined;
+    onClick?: ((event: any) => any) | undefined;
 }, {}, {}>, Readonly<CardSlots> & CardSlots>;
 export default _default;
 type __VLS_WithDefaults<P, D> = {

package/components/card/common.d.ts

@@ -6,12 +6,12 @@ export interface CardProps {
     extra?: string;
     footer?: string;
 }
-export interface CardEmits {
-    (e: 'click', event: any): void;
-}
 export interface CardSlots {
     default?(props: Record<string, never>): any;
     title?(props: Record<string, never>): any;
     extra?(props: Record<string, never>): any;
     footer?(props: Record<string, never>): any;
 }
+export interface CardEmits {
+    (e: 'click', event: any): void;
+}

package/components/config/index.d.ts

@@ -80,6 +80,16 @@ export declare const defaultConfig: {
     empty: {
         icon: string;
     };
+    fab: {
+        overlayClosable: boolean;
+        hideName: boolean;
+        duration: number;
+    };
+    floatingBubble: {
+        axis: "y";
+        gapX: number;
+        gapY: number;
+    };
     form: {
         validateTrigger: "change";
         validateOnRuleChange: boolean;
@@ -428,6 +438,16 @@ export declare function useConfigContext(): DeepPartial<{
     empty: {
         icon: string;
     };
+    fab: {
+        overlayClosable: boolean;
+        hideName: boolean;
+        duration: number;
+    };
+    floatingBubble: {
+        axis: "y";
+        gapX: number;
+        gapY: number;
+    };
     form: {
         validateTrigger: "change";
         validateOnRuleChange: boolean;

package/components/config/index.js

@@ -81,6 +81,16 @@ export const defaultConfig = {
     empty: {
         icon: 'empty',
     },
+    fab: {
+        overlayClosable: false,
+        hideName: false,
+        duration: 150,
+    },
+    floatingBubble: {
+        axis: 'y',
+        gapX: 24,
+        gapY: 24,
+    },
     form: {
         validateTrigger: 'change',
         validateOnRuleChange: true,

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

@@ -92,7 +92,7 @@ import {
   createBem,
   uniqid,
   getBoundingClientRect,
-  getViewportSize,
+  getWindowInfo,
   isNullish
 } from "../../utils";
 import SarPopup from "../popup/popup.vue";
@@ -167,7 +167,7 @@ export default  _defineComponent({
     const popupInset = ref("");
     const awayInset = ref("");
     const setPosition = async () => {
-      const viewportSize = await getViewportSize();
+      const windowInfo = await getWindowInfo();
       const itemRect = await getBoundingClientRect(`#${itemId}`, instance);
       const nextPopupInset = {
         left: 0,
@@ -185,10 +185,10 @@ export default  _defineComponent({
         nextPopupInset.top = `calc(${itemRect.bottom}px + var(--window-top))`;
         nextPopupInset.bottom = 0;
         nextAwayInset.top = 0;
-        nextAwayInset.bottom = `calc(${viewportSize.height - itemRect.bottom}px + var(--window-top))`;
+        nextAwayInset.bottom = `calc(${windowInfo.windowHeight - itemRect.bottom}px + var(--window-top))`;
       } else {
         nextPopupInset.top = 0;
-        nextPopupInset.bottom = `${viewportSize.height - itemRect.top}px`;
+        nextPopupInset.bottom = `${windowInfo.windowHeight - itemRect.top}px`;
         nextAwayInset.top = `calc(${itemRect.bottom}px + var(--window-top))`;
         nextAwayInset.bottom = 0;
       }

package/components/fab/common.d.ts

@@ -0,0 +1,34 @@
+import { type StyleValue } from 'vue';
+export interface FabProps {
+    rootStyle?: StyleValue;
+    rootClass?: string;
+    top?: string;
+    right?: string;
+    bottom?: string;
+    left?: string;
+    color?: string;
+    background?: string;
+    icon?: string;
+    iconFamily?: string;
+    itemList?: FabItem[];
+    hideName?: boolean;
+    overlayClosable?: boolean;
+    duration?: number;
+}
+export declare const fabPropsDefaults: {
+    itemList: () => never[];
+    overlayClosable: boolean;
+    hideName: boolean;
+    duration: number;
+};
+export interface FabEmits {
+    (e: 'click', event: any): void;
+    (e: 'select', item: FabItem, index: number): void;
+}
+export interface FabItem {
+    name?: string;
+    color?: string;
+    background?: string;
+    icon?: string;
+    iconFamily?: string;
+}

package/components/fab/common.js

@@ -0,0 +1,5 @@
+import { defaultConfig } from '../config';
+export const fabPropsDefaults = {
+    ...defaultConfig.fab,
+    itemList: () => [],
+};

package/components/fab/fab.d.ts

@@ -0,0 +1,41 @@
+import { type FabProps, FabItem } from './common';
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<FabProps>, {
+    itemList: () => never[];
+    overlayClosable: boolean;
+    hideName: boolean;
+    duration: number;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (event: any) => void;
+    select: (item: FabItem, index: number) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<FabProps>, {
+    itemList: () => never[];
+    overlayClosable: boolean;
+    hideName: boolean;
+    duration: number;
+}>>> & {
+    onClick?: ((event: any) => any) | undefined;
+    onSelect?: ((item: FabItem, index: number) => any) | undefined;
+}, {
+    overlayClosable: boolean;
+    duration: number;
+    hideName: boolean;
+    itemList: FabItem[];
+}, {}>;
+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/fab/fab.vue

@@ -0,0 +1,159 @@
+<template>
+  <sar-overlay
+    :visible="visible"
+    :z-index="zIndex"
+    background="var(--sar-fab-mask)"
+    @click="onOverlayClick"
+  />
+
+  <view :class="fabClass" :style="fabStyle">
+    <view
+      :class="contentClass"
+      :style="contentStyle"
+      @transitionend="onTransitionEnd"
+    >
+      <view
+        v-for="(item, index) in itemList"
+        :key="index"
+        :class="itemClass"
+        @click="onItemClick(item, index)"
+      >
+        <view v-if="!hideName" :class="bem.e('item-name')">
+          {{ item.name }}
+        </view>
+        <view
+          :class="bem.e('item-btn')"
+          :style="
+            stringifyStyle({ background: item.background, color: item.color })
+          "
+        >
+          <sar-icon :family="item.iconFamily" :name="item.icon" />
+        </view>
+      </view>
+    </view>
+    <view :class="itemEntryClass" @click="onItemEntryClick">
+      <view :class="bem.e('item-btn')" :style="itemEntryBtnStyle">
+        <sar-icon name="plus" />
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { mergeDefaults as _mergeDefaults, defineComponent as _defineComponent } from "vue";
+import { computed, reactive, ref } from "vue";
+import { classNames, stringifyStyle, createBem, isNullish } from "../../utils";
+import {
+  fabPropsDefaults
+} from "./common";
+import { useTransition, useZIndex } from "../../use";
+import SarIcon from "../icon/icon.vue";
+import SarOverlay from "../overlay/overlay.vue";
+export default  _defineComponent({
+  ...{
+    options: {
+      virtualHost: true,
+      styleIsolation: "shared"
+    }
+  },
+  __name: "fab",
+  props:  _mergeDefaults({
+    rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
+    rootClass: { type: String, required: false },
+    top: { type: String, required: false },
+    right: { type: String, required: false },
+    bottom: { type: String, required: false },
+    left: { type: String, required: false },
+    color: { type: String, required: false },
+    background: { type: String, required: false },
+    icon: { type: String, required: false },
+    iconFamily: { type: String, required: false },
+    itemList: { type: Array, required: false },
+    hideName: { type: Boolean, required: false },
+    overlayClosable: { type: Boolean, required: false },
+    duration: { type: Number, required: false }
+  }, fabPropsDefaults),
+  emits: ["click", "select"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    __expose();
+    const props = __props;
+    const emit = __emit;
+    const bem = createBem("fab");
+    const visible = ref(false);
+    const [zIndex, increaseZIndex] = useZIndex();
+    const { realVisible, transitionClass, onTransitionEnd } = useTransition(
+      reactive({
+        visible,
+        duration: props.duration,
+        prefix: bem.m("zoom-")
+      })
+    );
+    const onItemEntryClick = (event) => {
+      if (props.itemList && props.itemList.length > 0) {
+        visible.value = !visible.value;
+        if (visible.value) {
+          increaseZIndex();
+        }
+      }
+      emit("click", event);
+    };
+    const onItemClick = (item, index) => {
+      visible.value = false;
+      emit("select", item, index);
+    };
+    const onOverlayClick = () => {
+      if (props.overlayClosable) {
+        visible.value = false;
+      }
+    };
+    const fabClass = computed(() => {
+      return classNames(
+        bem.b(),
+        bem.m(isNullish(props.top) ? "bottom" : "top"),
+        bem.m(isNullish(props.left) ? "right" : "left"),
+        bem.m("visible", visible.value),
+        props.rootClass
+      );
+    });
+    const fabStyle = computed(() => {
+      return stringifyStyle(props.rootStyle, {
+        zIndex: visible.value ? zIndex.value : null,
+        top: props.top,
+        left: props.left,
+        right: !isNullish(props.left) ? "auto" : props.right,
+        bottom: !isNullish(props.top) ? "auto" : props.bottom
+      });
+    });
+    const contentClass = computed(() => {
+      return classNames(bem.e("content"), transitionClass.value);
+    });
+    const contentStyle = computed(() => {
+      return stringifyStyle({
+        display: realVisible.value ? "flex" : "none",
+        transitionDuration: props.duration + "ms",
+        transformOrigin: `${isNullish(props.top) ? "bottom" : "top"} ${isNullish(props.left) ? "right" : "left"}`
+      });
+    });
+    const itemEntryClass = computed(() => {
+      return classNames(bem.e("item"), bem.em("item", "entry"));
+    });
+    const itemEntryBtnStyle = computed(() => {
+      return stringifyStyle({
+        color: props.color,
+        background: props.background
+      });
+    });
+    const itemClass = computed(() => {
+      return classNames(bem.e("item"));
+    });
+    const __returned__ = { props, emit, bem, visible, zIndex, increaseZIndex, realVisible, transitionClass, onTransitionEnd, onItemEntryClick, onItemClick, onOverlayClick, fabClass, fabStyle, contentClass, contentStyle, itemEntryClass, itemEntryBtnStyle, itemClass, get stringifyStyle() {
+      return stringifyStyle;
+    }, SarIcon, SarOverlay };
+    return __returned__;
+  }
+});
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>

package/components/fab/index.d.ts

@@ -0,0 +1 @@
+export type { FabProps, FabEmits, FabItem } from './common';

package/components/fab/index.js

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

package/components/fab/index.scss

@@ -0,0 +1,95 @@
+@use '../style/base' as *;
+
+@include bem(fab) {
+  @include b() {
+    @include universal;
+    position: fixed;
+    right: var(--sar-fab-right);
+    bottom: var(--sar-fab-bottom);
+    z-index: var(--sar-fab-z-index);
+    gap: var(--sar-fab-item-gap);
+  }
+
+  @include e(content) {
+    @include universal;
+    gap: var(--sar-fab-item-gap);
+  }
+
+  @include m(zoom-enter-from, zoom-leave-to) {
+    opacity: 0;
+    transform: scale(0.4);
+  }
+
+  @include m(zoom-enter-to, zoom-leave-from) {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  @include m(zoom-enter-active, zoom-leave-active) {
+    transition: transform var(--sar-fab-duration) ease-out,
+      opacity var(--sar-fab-duration) ease-out;
+  }
+
+  @include e(item) {
+    @include universal;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--sar-fab-item-name-gap);
+    cursor: pointer;
+
+    &:active {
+      opacity: var(--sar-fab-item-active-opacity);
+    }
+
+    @include m(entry) {
+      @include e(item-btn) {
+        transition: transform var(--sar-fab-duration);
+      }
+    }
+  }
+
+  @include e(item-name) {
+    @include universal;
+    font-size: var(--sar-fab-item-name-font-size);
+    color: var(--sar-fab-item-name-color);
+  }
+
+  @include e(item-btn) {
+    @include universal;
+    justify-content: center;
+    align-items: center;
+    width: var(--sar-fab-item-btn-size);
+    height: var(--sar-fab-item-btn-size);
+    border-radius: var(--sar-rounded-full);
+    font-size: var(--sar-fab-item-btn-font-size);
+    color: var(--sar-fab-item-btn-color);
+    background-color: var(--sar-fab-item-btn-bg);
+    box-shadow: var(--sar-fab-item-btn-shadow);
+  }
+
+  @include m(top) {
+    flex-direction: column-reverse;
+  }
+
+  @include m(left) {
+    align-items: flex-start;
+
+    @include e(item) {
+      flex-direction: row-reverse;
+    }
+  }
+
+  @include m(right) {
+    align-items: flex-end;
+  }
+
+  @include m(visible) {
+    @include e(item) {
+      @include m(entry) {
+        @include e(item-btn) {
+          transform: rotate(45deg);
+        }
+      }
+    }
+  }
+}

package/components/fab/variables.scss

@@ -0,0 +1,22 @@
+// #variables
+page {
+  --sar-fab-z-index: 1000;
+  --sar-fab-right: 48rpx;
+  --sar-fab-bottom: 96rpx;
+  --sar-fab-mask: var(--sar-mask-illegible);
+  --sar-fab-duration: var(--sar-duration-fast);
+
+  --sar-fab-item-gap: 32rpx;
+  --sar-fab-item-active-opacity: var(--sar-active-opacity);
+
+  --sar-fab-item-btn-size: 96rpx;
+  --sar-fab-item-btn-font-size: 48rpx;
+  --sar-fab-item-btn-color: var(--sar-white);
+  --sar-fab-item-btn-bg: var(--sar-primary);
+  --sar-fab-item-btn-shadow: var(--sar-shadow);
+
+  --sar-fab-item-name-gap: 16rpx;
+  --sar-fab-item-name-font-size: var(--sar-text-base);
+  --sar-fab-item-name-color: var(--sar-white);
+}
+// #endvariables

package/components/floating-bubble/common.d.ts

@@ -0,0 +1,28 @@
+import { type StyleValue } from 'vue';
+export interface FloatingBubbleProps {
+    rootStyle?: StyleValue;
+    rootClass?: string;
+    axis?: 'x' | 'y' | 'both' | 'none';
+    magnet?: 'x' | 'y';
+    gapX?: number;
+    gapY?: number;
+    offset?: {
+        x: number;
+        y: number;
+    };
+}
+export declare const floatingBubblePropsDefaults: {
+    axis: "y";
+    gapX: number;
+    gapY: number;
+};
+export interface FloatingBubbleSlots {
+    default?(props: Record<string, never>): any;
+}
+export interface FloatingBubbleEmits {
+    (e: 'click', event: any): void;
+    (e: 'update:offset', offset: {
+        x: number;
+        y: number;
+    }): void;
+}

package/components/floating-bubble/common.js

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

package/components/floating-bubble/floating-bubble.d.ts

@@ -0,0 +1,49 @@
+import { type FloatingBubbleProps, type FloatingBubbleSlots } from './common';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<FloatingBubbleProps>, {
+    axis: "y";
+    gapX: number;
+    gapY: number;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (event: any) => void;
+    "update:offset": (offset: {
+        x: number;
+        y: number;
+    }) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<FloatingBubbleProps>, {
+    axis: "y";
+    gapX: number;
+    gapY: number;
+}>>> & {
+    onClick?: ((event: any) => any) | undefined;
+    "onUpdate:offset"?: ((offset: {
+        x: number;
+        y: number;
+    }) => any) | undefined;
+}, {
+    axis: "y" | "none" | "both" | "x";
+    gapX: number;
+    gapY: number;
+}, {}>, Readonly<FloatingBubbleSlots> & FloatingBubbleSlots>;
+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;
+    };
+};