sard-uniapp 1.1.7 → 1.2.0

package/components/notice-bar/index.d.ts

@@ -1 +1 @@
-export type { NoticeBarProps, NoticeBarSlots, NoticeBarEmits } from './common';
+export type { NoticeBarProps, NoticeBarSlots, NoticeBarEmits, NoticeBarExpose, } from './common';

package/components/notice-bar/notice-bar.d.ts

@@ -4,7 +4,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     speed: number;
     scrollable: "auto";
     visible: boolean;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+}>, {
+    update: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: (event: any) => void;
     close: () => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<NoticeBarProps>, {

package/components/notice-bar/notice-bar.vue

@@ -41,6 +41,7 @@ import SarIcon from "../icon/icon.vue";
 import {
   noticeBarPropsDefaults
 } from "./common";
+import { useSetTimeout } from "../../use";
 export default  _defineComponent({
   ...{
     options: {
@@ -66,7 +67,6 @@ export default  _defineComponent({
   }, noticeBarPropsDefaults),
   emits: ["click", "close"],
   setup(__props, { expose: __expose, emit: __emit }) {
-    __expose();
     const props = __props;
     const emit = __emit;
     const bem = createBem("notice-bar");
@@ -82,7 +82,7 @@ export default  _defineComponent({
     const getWidth = async (id) => {
       return (await getBoundingClientRect(`#${id}`, instance)).width;
     };
-    const updateWrapperData = async () => {
+    const update = async () => {
       if (props.scrollable === "never") {
         shouldScroll.value = false;
         return;
@@ -114,14 +114,20 @@ export default  _defineComponent({
         emit("close");
       }
     };
+    const [updateLater] = useSetTimeout(() => {
+      update();
+    });
     onMounted(() => {
       if (props.scrollable) {
-        updateWrapperData();
+        updateLater(props.delay);
       }
     });
     const onClick = (event) => {
       emit("click", event);
     };
+    __expose({
+      update
+    });
     const noticeBarClass = computed(() => {
       return classNames(
         bem.b(),
@@ -146,11 +152,10 @@ export default  _defineComponent({
     const wrapperStyle = computed(() => {
       return stringifyStyle({
         transform: `translateX(${firstLap.value ? 0 : wrapperData.value.contentWidth}px)`,
-        animationDelay: `${firstLap.value ? props.delay : 0}ms`,
         animationDuration: `${firstLap.value ? wrapperData.value.first : wrapperData.value.later}ms`
       });
     });
-    const __returned__ = { props, emit, bem, instance, contentId, wrapperId, shouldScroll, wrapperData, getWidth, updateWrapperData, firstLap, onAnimationEnd, innerVisible, onRightIconClick, onClick, noticeBarClass, noticeBarStyle, wrapperStyle, SarIcon };
+    const __returned__ = { props, emit, bem, instance, contentId, wrapperId, shouldScroll, wrapperData, getWidth, update, firstLap, onAnimationEnd, innerVisible, onRightIconClick, updateLater, onClick, noticeBarClass, noticeBarStyle, wrapperStyle, SarIcon };
     return __returned__;
   }
 });

package/components/search/common.d.ts

@@ -13,9 +13,11 @@ export interface SearchProps {
     align?: 'left' | 'center' | 'right';
     cancel?: string;
     search?: string;
+    focus?: boolean;
 }
 export declare const searchPropsDefaults: {
     shape: "square";
+    focus: boolean;
 };
 export interface SearchSlots {
     prepend?(props: Record<string, never>): any;
@@ -27,4 +29,5 @@ export interface SearchEmits {
     (e: 'update:model-value', value: string): void;
     (e: 'cancel'): void;
     (e: 'search', value: string): void;
+    (e: 'click', event: any): void;
 }

package/components/search/search.d.ts

@@ -1,18 +1,23 @@
 import { type SearchProps, type SearchSlots } from './common';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<SearchProps>, {
     shape: "square";
+    focus: boolean;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:model-value": (value: string) => void;
     cancel: () => void;
     search: (value: string) => void;
+    click: (event: any) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<SearchProps>, {
     shape: "square";
+    focus: boolean;
 }>>> & {
     "onUpdate:model-value"?: ((value: string) => any) | undefined;
+    onClick?: ((event: any) => any) | undefined;
     onCancel?: (() => any) | undefined;
     onSearch?: ((value: string) => any) | undefined;
 }, {
     shape: "round" | "square";
+    focus: boolean;
 }, {}>, Readonly<SearchSlots> & SearchSlots>;
 export default _default;
 type __VLS_WithDefaults<P, D> = {

package/components/search/search.vue

@@ -1,12 +1,11 @@
 <template>
-  <view :class="searchClass" :style="searchStyle">
+  <view :class="searchClass" :style="searchStyle" @click="onClick">
     <view v-if="$slots.prepend" :class="bem.e('prepend')">
       <slot name="prepend"></slot>
     </view>
     <view :class="bem.e('input-wrapper')">
       <sar-input
         :model-value="innerValue"
-        @update:model-value="onInput"
         clearable
         confirm-type="search"
         showClearOnlyFocus
@@ -16,6 +15,8 @@
         borderless
         :root-class="inputClass"
         :root-style="inputStyle"
+        :focus="focus"
+        @update:model-value="onInput"
         @confirm="onConfirm"
       >
         <template #prepend>
@@ -81,9 +82,10 @@ export default  _defineComponent({
     disabled: { type: Boolean, required: false },
     align: { type: String, required: false },
     cancel: { type: String, required: false },
-    search: { type: String, required: false }
+    search: { type: String, required: false },
+    focus: { type: Boolean, required: false }
   }, searchPropsDefaults),
-  emits: ["update:model-value", "cancel", "search"],
+  emits: ["update:model-value", "cancel", "search", "click"],
   setup(__props, { expose: __expose, emit: __emit }) {
     __expose();
     const props = __props;
@@ -107,6 +109,9 @@ export default  _defineComponent({
       innerValue.value = "";
       emit("cancel");
     };
+    const onClick = (event) => {
+      emit("click", event);
+    };
     const searchClass = computed(() => {
       return classNames(
         bem.b(),
@@ -133,7 +138,7 @@ export default  _defineComponent({
         backgroundColor: props.inputBackground
       });
     });
-    const __returned__ = { props, emit, bem, innerValue, onInput, onConfirm, onCancel, searchClass, searchStyle, inputClass, inputStyle, SarInput, SarIcon, SarButton };
+    const __returned__ = { props, emit, bem, innerValue, onInput, onConfirm, onCancel, onClick, searchClass, searchStyle, inputClass, inputStyle, SarInput, SarIcon, SarButton };
     return __returned__;
   }
 });

package/components/stepper/index.scss

@@ -8,6 +8,7 @@
     align-items: stretch;
     gap: var(--sar-stepper-gap);
     height: var(--sar-stepper-height);
+    color: var(--sar-body-color);
   }
 
   @include e(button) {

package/components/style/variables.scss

@@ -184,7 +184,7 @@ page {
   // # 加载状态
   --sar-loading-pointer-events: none;
   --sar-loading-opacity: 0.6;
-  --sar-loading-cursor: default;
+  --sar-loading-cursor: wait;
 
   // # 过渡时间
   --sar-duration-slow: 500ms;

package/global.d.ts

@@ -16,6 +16,7 @@ import SarCheckboxGroup from './components/checkbox-group/checkbox-group'
 import SarCol from './components/col/col'
 import SarCollapse from './components/collapse/collapse'
 import SarCountDown from './components/count-down/count-down'
+import SarCountTo from './components/count-to/count-to'
 import SarDatetimePicker from './components/datetime-picker/datetime-picker'
 import SarDatetimePickerInput from './components/datetime-picker-input/datetime-picker-input'
 import SarDialog from './components/dialog/dialog'
@@ -36,6 +37,7 @@ import SarList from './components/list/list'
 import SarListItem from './components/list-item/list-item'
 import SarLoading from './components/loading/loading'
 import SarLoadMore from './components/load-more/load-more'
+import SarMarquee from './components/marquee/marquee'
 import SarMenu from './components/menu/menu'
 import SarNavbar from './components/navbar/navbar'
 import SarNavbarItem from './components/navbar-item/navbar-item'
@@ -100,6 +102,7 @@ declare module '@vue/runtime-core' {
     SarCol: typeof SarCol
     SarCollapse: typeof SarCollapse
     SarCountDown: typeof SarCountDown
+    SarCountTo: typeof SarCountTo
     SarDatetimePicker: typeof SarDatetimePicker
     SarDatetimePickerInput: typeof SarDatetimePickerInput
     SarDialog: typeof SarDialog
@@ -120,6 +123,7 @@ declare module '@vue/runtime-core' {
     SarListItem: typeof SarListItem
     SarLoading: typeof SarLoading
     SarLoadMore: typeof SarLoadMore
+    SarMarquee: typeof SarMarquee
     SarMenu: typeof SarMenu
     SarNavbar: typeof SarNavbar
     SarNavbarItem: typeof SarNavbarItem

package/index.d.ts

@@ -12,6 +12,7 @@ export * from './components/checkbox';
 export * from './components/collapse';
 export * from './components/config';
 export * from './components/count-down';
+export * from './components/count-to';
 export * from './components/datetime-picker';
 export * from './components/datetime-picker-input';
 export * from './components/dialog';
@@ -29,6 +30,7 @@ export * from './components/list';
 export * from './components/loading';
 export * from './components/load-more';
 export * from './components/locale';
+export * from './components/marquee';
 export * from './components/menu';
 export * from './components/navbar';
 export * from './components/notice-bar';

package/index.js

@@ -12,6 +12,7 @@ export * from './components/checkbox';
 export * from './components/collapse';
 export * from './components/config';
 export * from './components/count-down';
+export * from './components/count-to';
 export * from './components/datetime-picker';
 export * from './components/datetime-picker-input';
 export * from './components/dialog';
@@ -29,6 +30,7 @@ export * from './components/list';
 export * from './components/loading';
 export * from './components/load-more';
 export * from './components/locale';
+export * from './components/marquee';
 export * from './components/menu';
 export * from './components/navbar';
 export * from './components/notice-bar';

package/index.scss

@@ -21,6 +21,7 @@
 @use './components/list/variables.scss' as *;
 @use './components/loading/variables.scss' as *;
 @use './components/load-more/variables.scss' as *;
+@use './components/marquee/variables.scss' as *;
 @use './components/menu/variables.scss' as *;
 @use './components/navbar/variables.scss' as *;
 @use './components/notice-bar/variables.scss' as *;

package/package.json

@@ -2,7 +2,7 @@
   "id": "sard-uniapp",
   "name": "sard-uniapp",
   "displayName": "sard-uniapp",
-  "version": "1.1.7",
+  "version": "1.2.0",
   "type": "module",
   "description": "sard-uniapp 是一套基于 Uniapp + Vue3 框架开发的兼容多端的 UI 组件库",
   "keywords": [
@@ -114,5 +114,8 @@
   },
   "engines": {
     "HBuilderX": "^3.6.0"
+  },
+  "dependencies": {
+    "lwa": "^0.2.2"
   }
 }

package/use/index.d.ts

@@ -2,3 +2,7 @@ export * from './useTransition';
 export * from './useSetTimeout';
 export * from './useZIndex';
 export * from './useImperative';
+export * from './useLuckyGrid';
+export * from './useLuckyWheel';
+export * from './useLuckyDraw';
+export * from './useSlotMachine';

package/use/index.js

@@ -2,3 +2,7 @@ export * from './useTransition';
 export * from './useSetTimeout';
 export * from './useZIndex';
 export * from './useImperative';
+export * from './useLuckyGrid';
+export * from './useLuckyWheel';
+export * from './useLuckyDraw';
+export * from './useSlotMachine';

package/use/useImperative.d.ts

@@ -1,4 +1,4 @@
-import { Ref } from 'vue';
+import { type Ref } from 'vue';
 type ImperativeItem<T = any> = {
     show: boolean;
     imperative: T;

package/use/useLuckyDraw.d.ts

@@ -0,0 +1,22 @@
+import { type Ref } from 'vue';
+export interface UseLuckyDrawOptions {
+    count: number | Ref<number>;
+    minSpeed?: number | Ref<number>;
+    maxSpeed?: number | Ref<number>;
+    accelTime?: number | Ref<number>;
+    decelTime?: number | Ref<number>;
+    easeIn?: (progress: number) => number;
+    easeOut?: (progress: number) => number;
+    startDelay?: number | Ref<number>;
+    endDelay?: number | Ref<number>;
+    complete?: (index: number) => void;
+}
+export declare const useLuckyDraw: (options: UseLuckyDrawOptions) => {
+    play: () => void;
+    stop: (index?: number) => void;
+    pause: () => void;
+    reset: () => void;
+    playing: import("vue").ComputedRef<boolean>;
+    activeIndex: import("vue").ComputedRef<number | undefined>;
+};
+export type UseLuckyDrawReturn = ReturnType<typeof useLuckyDraw>;

package/use/useLuckyDraw.js

@@ -0,0 +1,160 @@
+import { computed, onScopeDispose, ref, unref } from 'vue';
+import { random } from '../utils';
+import { ticker } from 'lwa';
+const defaultOptions = {
+    minSpeed: 0.1,
+    maxSpeed: 0.4,
+    accelTime: 2500,
+    decelTime: 2500,
+    easeIn: (k) => k * k,
+    easeOut: (k) => k * (2 - k),
+    startDelay: 0,
+    endDelay: 0,
+};
+export const useLuckyDraw = (options) => {
+    const { count, minSpeed, maxSpeed, accelTime, decelTime, complete, easeIn, easeOut, startDelay, endDelay, } = Object.assign({}, defaultOptions, options);
+    let stage = 'INITIAL';
+    let currentIndex = 0;
+    const activeIndex = ref();
+    const playing = ref(false);
+    let startTime = 0;
+    let accelFrames = 0;
+    let decelStopIndex;
+    let decelStopActiveIndex;
+    let decelStartIndex = 0;
+    const getDecelStopIndex = () => {
+        const interval = unref(accelTime) / accelFrames;
+        let i = 0;
+        let mockCurrentIndex = currentIndex;
+        let mockActiveIndex = 0;
+        while (++i) {
+            let progress = (interval * i) / unref(decelTime);
+            if (progress >= 1) {
+                progress = 1;
+            }
+            const currentSpeed = unref(maxSpeed) -
+                easeOut(progress) * (unref(maxSpeed) - unref(minSpeed));
+            mockCurrentIndex += currentSpeed;
+            mockActiveIndex = mockCurrentIndex % unref(count) >> 0;
+            if (progress === 1 && mockActiveIndex === decelStopActiveIndex) {
+                break;
+            }
+        }
+        return mockCurrentIndex >> 0;
+    };
+    const tick = () => {
+        switch (stage) {
+            case 'START_DELAY': {
+                if (Date.now() - startTime >= unref(startDelay)) {
+                    stage = 'ACCELERATED';
+                    startTime = Date.now();
+                }
+                break;
+            }
+            case 'ACCELERATED': {
+                accelFrames++;
+                let progress = (Date.now() - startTime) / unref(accelTime);
+                if (progress >= 1) {
+                    progress = 1;
+                }
+                const currentSpeed = unref(minSpeed) +
+                    easeIn(progress) * (unref(maxSpeed) - unref(minSpeed));
+                currentIndex += currentSpeed;
+                if (progress === 1) {
+                    stage = 'CONSTANT_SPEED';
+                }
+                break;
+            }
+            case 'CONSTANT_SPEED': {
+                currentIndex += unref(maxSpeed);
+                if (decelStopActiveIndex !== undefined) {
+                    stage = 'DECELERATED';
+                    startTime = Date.now();
+                }
+                break;
+            }
+            case 'DECELERATED': {
+                if (decelStopIndex === undefined) {
+                    decelStopIndex = getDecelStopIndex();
+                    decelStartIndex = currentIndex;
+                }
+                let progress = (Date.now() - startTime) / unref(decelTime);
+                if (progress >= 1) {
+                    progress = 1;
+                }
+                currentIndex =
+                    decelStartIndex +
+                        easeOut(progress) * (decelStopIndex - decelStartIndex);
+                if (progress === 1) {
+                    if (unref(endDelay) === 0) {
+                        stage = 'DONE';
+                    }
+                    else {
+                        stage = 'END_DELAY';
+                        startTime = Date.now();
+                    }
+                }
+                break;
+            }
+            case 'END_DELAY': {
+                if (Date.now() - startTime >= unref(endDelay)) {
+                    stage = 'DONE';
+                }
+                break;
+            }
+            case 'DONE': {
+                const index = decelStopActiveIndex;
+                pause();
+                complete?.(index);
+                break;
+            }
+        }
+        activeIndex.value = currentIndex;
+    };
+    const play = () => {
+        if (playing.value) {
+            return;
+        }
+        playing.value = true;
+        startTime = Date.now();
+        if (unref(startDelay) === 0) {
+            stage = 'ACCELERATED';
+        }
+        else {
+            stage = 'START_DELAY';
+        }
+        ticker.add(tick);
+    };
+    const pause = () => {
+        ticker.remove(tick);
+        playing.value = false;
+        startTime = 0;
+        accelFrames = 0;
+        decelStopIndex = undefined;
+        decelStopActiveIndex = undefined;
+        decelStartIndex = 0;
+    };
+    const reset = () => {
+        pause();
+        stage = 'INITIAL';
+        currentIndex = 0;
+        activeIndex.value = undefined;
+    };
+    const stop = (index) => {
+        if (decelStopActiveIndex === undefined) {
+            decelStopActiveIndex =
+                index === undefined ? random(0, unref(count) - 1) : index;
+        }
+    };
+    onScopeDispose(() => {
+        pause();
+    });
+    return {
+        play,
+        stop,
+        pause,
+        reset,
+        playing: computed(() => playing.value),
+        activeIndex: computed(() => activeIndex.value),
+    };
+};

package/use/useLuckyGrid.d.ts

@@ -0,0 +1,26 @@
+import { type Ref } from 'vue';
+import { type UseLuckyDrawOptions } from './useLuckyDraw';
+export declare function getGridPrizeCount(row: number, column: number): number;
+export declare function getGridCenterSize(row: number, column: number): {
+    row: number;
+    column: number;
+};
+export declare function getGridIndex(row: number, column: number, index: number): number;
+export interface UseLuckyGridOptions extends Omit<UseLuckyDrawOptions, 'count'> {
+    row?: number | Ref<number>;
+    column?: number | Ref<number>;
+}
+export declare function useLuckyGrid(options?: UseLuckyGridOptions): {
+    activeIndex: import("vue").ComputedRef<number | undefined>;
+    grids: import("vue").ComputedRef<number[]>;
+    centerSize: import("vue").ComputedRef<{
+        row: number;
+        column: number;
+    }>;
+    play: () => void;
+    stop: (index?: number | undefined) => void;
+    pause: () => void;
+    reset: () => void;
+    playing: import("vue").ComputedRef<boolean>;
+};
+export type UseLuckyGridReturn = ReturnType<typeof useLuckyGrid>;

package/use/useLuckyGrid.js

@@ -0,0 +1,62 @@
+import { computed, unref } from 'vue';
+import { useLuckyDraw } from './useLuckyDraw';
+export function getGridPrizeCount(row, column) {
+    return row === 1 ? column : column === 1 ? row : row * 2 + column * 2 - 4;
+}
+export function getGridCenterSize(row, column) {
+    return {
+        row: Math.max(row - 2, 0),
+        column: Math.max(column - 2, 0),
+    };
+}
+export function getGridIndex(row, column, index) {
+    if (index < column) {
+        return index;
+    }
+    if (index % column === column - 1) {
+        return column - 1 + ((index / column) >> 0);
+    }
+    if ((index / column) >> 0 === row - 1) {
+        return column * 2 + row - 3 - (index % column);
+    }
+    if (index % column === 0) {
+        return column * 2 + row * 2 - 4 - ((index / column) >> 0);
+    }
+    const rowNo = (index / column) >> 0;
+    const columnNo = index % column;
+    return ((rowNo - 1) * (column - 2) + columnNo) * -1;
+}
+const defaultOptions = {
+    row: 3,
+    column: 3,
+    endDelay: 500,
+};
+export function useLuckyGrid(options) {
+    const { row, column, ...restOptions } = Object.assign({}, defaultOptions, options);
+    const prizeCount = computed(() => getGridPrizeCount(unref(row), unref(column)));
+    const grids = computed(() => {
+        if (prizeCount.value === 0) {
+            return [];
+        }
+        return Array(unref(row) * unref(column))
+            .fill(0)
+            .map((_, index) => getGridIndex(unref(row), unref(column), index));
+    });
+    const centerSize = computed(() => {
+        return getGridCenterSize(unref(row), unref(column));
+    });
+    const { activeIndex, ...restResult } = useLuckyDraw({
+        ...restOptions,
+        count: prizeCount,
+    });
+    return {
+        ...restResult,
+        activeIndex: computed(() => {
+            return activeIndex.value !== undefined
+                ? activeIndex.value % prizeCount.value >> 0
+                : undefined;
+        }),
+        grids,
+        centerSize,
+    };
+}

package/use/useLuckyWheel.d.ts

@@ -0,0 +1,15 @@
+import { type Ref } from 'vue';
+import { type UseLuckyDrawOptions } from './useLuckyDraw';
+export interface UseLuckyWheelOptions extends Omit<UseLuckyDrawOptions, 'count'> {
+    count?: number | Ref<number>;
+}
+export declare function useLuckyWheel(options?: UseLuckyWheelOptions): {
+    degrees: import("vue").ComputedRef<number>;
+    sectorDegrees: import("vue").ComputedRef<number>;
+    play: () => void;
+    stop: (index?: number | undefined) => void;
+    pause: () => void;
+    reset: () => void;
+    playing: import("vue").ComputedRef<boolean>;
+};
+export type UseLuckyWheelReturn = ReturnType<typeof useLuckyWheel>;

package/use/useLuckyWheel.js

@@ -0,0 +1,25 @@
+import { computed, unref } from 'vue';
+import { useLuckyDraw } from './useLuckyDraw';
+const defaultOptions = {
+    count: 8,
+    minSpeed: 0.01,
+    endDelay: 300,
+};
+export function useLuckyWheel(options) {
+    const { count, ...restOptions } = Object.assign({}, defaultOptions, options);
+    const { activeIndex, ...restResult } = useLuckyDraw({
+        ...restOptions,
+        count,
+    });
+    return {
+        ...restResult,
+        degrees: computed(() => {
+            return unref(count) === 0
+                ? 0
+                : ((activeIndex.value || 0) / unref(count)) * 360;
+        }),
+        sectorDegrees: computed(() => {
+            return unref(count) === 0 ? 0 : 360 / unref(count);
+        }),
+    };
+}

package/use/useSlotMachine.d.ts

@@ -0,0 +1,16 @@
+import { type Ref } from 'vue';
+import { type UseLuckyDrawOptions } from './useLuckyDraw';
+export interface UseSlotMachineOptions extends Omit<UseLuckyDrawOptions, 'count' | 'complete'> {
+    columns: number[] | unknown[][] | Ref<number[] | unknown[][]>;
+    staggerDelay?: number | Ref<number>;
+    complete?: (index: number[]) => void;
+}
+export declare function useSlotMachine(options: UseSlotMachineOptions): {
+    play: () => void;
+    stop: (index?: number[]) => void;
+    pause: () => void;
+    reset: () => void;
+    playing: import("vue").ComputedRef<boolean>;
+    offset: import("vue").ComputedRef<number[]>;
+};
+export type UseSlotMachineReturn = ReturnType<typeof useSlotMachine>;