zartui 0.1.112 → 3.0.2

package/es/swipe/Swipe.mjs

@@ -0,0 +1,353 @@
+import { createVNode as _createVNode } from "vue";
+import { ref, watch, reactive, computed, onMounted, onActivated, onDeactivated, onBeforeUnmount, defineComponent, nextTick } from "vue";
+import { clamp, isHidden, truthProp, numericProp, windowWidth, windowHeight, preventDefault, createNamespace, makeNumericProp } from "../utils/index.mjs";
+import { doubleRaf, useChildren, usePageVisibility } from "@zartui/use";
+import { useTouch } from "../composables/use-touch.mjs";
+import { useExpose } from "../composables/use-expose.mjs";
+import { onPopupReopen } from "../composables/on-popup-reopen.mjs";
+const [name, bem] = createNamespace("swipe");
+const swipeProps = {
+  loop: truthProp,
+  width: numericProp,
+  height: numericProp,
+  vertical: Boolean,
+  autoplay: makeNumericProp(0),
+  duration: makeNumericProp(500),
+  touchable: truthProp,
+  lazyRender: Boolean,
+  initialSwipe: makeNumericProp(0),
+  indicatorColor: String,
+  showIndicators: truthProp,
+  stopPropagation: truthProp
+};
+const SWIPE_KEY = Symbol(name);
+var stdin_default = defineComponent({
+  name,
+  props: swipeProps,
+  emits: ["change"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const root = ref();
+    const state = reactive({
+      rect: null,
+      width: 0,
+      height: 0,
+      offset: 0,
+      active: 0,
+      swiping: false
+    });
+    const touch = useTouch();
+    const {
+      children,
+      linkChildren
+    } = useChildren(SWIPE_KEY);
+    const count = computed(() => children.length);
+    const size = computed(() => state[props.vertical ? "height" : "width"]);
+    const delta = computed(() => props.vertical ? touch.deltaY.value : touch.deltaX.value);
+    const minOffset = computed(() => {
+      if (state.rect) {
+        const base = props.vertical ? state.rect.height : state.rect.width;
+        return base - size.value * count.value;
+      }
+      return 0;
+    });
+    const maxCount = computed(() => Math.ceil(Math.abs(minOffset.value) / size.value));
+    const trackSize = computed(() => count.value * size.value);
+    const activeIndicator = computed(() => (state.active + count.value) % count.value);
+    const isCorrectDirection = computed(() => {
+      const expect = props.vertical ? "vertical" : "horizontal";
+      return touch.direction.value === expect;
+    });
+    const trackStyle = computed(() => {
+      const style = {
+        transitionDuration: `${state.swiping ? 0 : props.duration}ms`,
+        transform: `translate${props.vertical ? "Y" : "X"}(${state.offset}px)`
+      };
+      if (size.value) {
+        const mainAxis = props.vertical ? "height" : "width";
+        const crossAxis = props.vertical ? "width" : "height";
+        style[mainAxis] = `${trackSize.value}px`;
+        style[crossAxis] = props[crossAxis] ? `${props[crossAxis]}px` : "";
+      }
+      return style;
+    });
+    const getTargetActive = (pace) => {
+      const {
+        active
+      } = state;
+      if (pace) {
+        if (props.loop) {
+          return clamp(active + pace, -1, count.value);
+        }
+        return clamp(active + pace, 0, maxCount.value);
+      }
+      return active;
+    };
+    const getTargetOffset = (targetActive, offset = 0) => {
+      let currentPosition = targetActive * size.value;
+      if (!props.loop) {
+        currentPosition = Math.min(currentPosition, -minOffset.value);
+      }
+      let targetOffset = offset - currentPosition;
+      if (!props.loop) {
+        targetOffset = clamp(targetOffset, minOffset.value, 0);
+      }
+      return targetOffset;
+    };
+    const move = ({
+      pace = 0,
+      offset = 0,
+      emitChange
+    }) => {
+      if (count.value <= 1) {
+        return;
+      }
+      const {
+        active
+      } = state;
+      const targetActive = getTargetActive(pace);
+      const targetOffset = getTargetOffset(targetActive, offset);
+      if (props.loop) {
+        if (children[0] && targetOffset !== minOffset.value) {
+          const outRightBound = targetOffset < minOffset.value;
+          children[0].setOffset(outRightBound ? trackSize.value : 0);
+        }
+        if (children[count.value - 1] && targetOffset !== 0) {
+          const outLeftBound = targetOffset > 0;
+          children[count.value - 1].setOffset(outLeftBound ? -trackSize.value : 0);
+        }
+      }
+      state.active = targetActive;
+      state.offset = targetOffset;
+      if (emitChange && targetActive !== active) {
+        emit("change", activeIndicator.value);
+      }
+    };
+    const correctPosition = () => {
+      state.swiping = true;
+      if (state.active <= -1) {
+        move({
+          pace: count.value
+        });
+      } else if (state.active >= count.value) {
+        move({
+          pace: -count.value
+        });
+      }
+    };
+    const prev = () => {
+      correctPosition();
+      touch.reset();
+      doubleRaf(() => {
+        state.swiping = false;
+        move({
+          pace: -1,
+          emitChange: true
+        });
+      });
+    };
+    const next = () => {
+      correctPosition();
+      touch.reset();
+      doubleRaf(() => {
+        state.swiping = false;
+        move({
+          pace: 1,
+          emitChange: true
+        });
+      });
+    };
+    let autoplayTimer;
+    const stopAutoplay = () => clearTimeout(autoplayTimer);
+    const autoplay = () => {
+      stopAutoplay();
+      if (props.autoplay > 0 && count.value > 1) {
+        autoplayTimer = setTimeout(() => {
+          next();
+          autoplay();
+        }, +props.autoplay);
+      }
+    };
+    const initialize = (active = +props.initialSwipe) => {
+      if (!root.value) {
+        return;
+      }
+      const cb = () => {
+        var _a, _b;
+        if (!isHidden(root)) {
+          const rect = {
+            width: root.value.offsetWidth,
+            height: root.value.offsetHeight
+          };
+          state.rect = rect;
+          state.width = +((_a = props.width) != null ? _a : rect.width);
+          state.height = +((_b = props.height) != null ? _b : rect.height);
+        }
+        if (count.value) {
+          active = Math.min(count.value - 1, active);
+        }
+        state.active = active;
+        state.swiping = true;
+        state.offset = getTargetOffset(active);
+        children.forEach((swipe) => {
+          swipe.setOffset(0);
+        });
+        autoplay();
+      };
+      if (isHidden(root)) {
+        nextTick().then(cb);
+      } else {
+        cb();
+      }
+    };
+    const resize = () => initialize(state.active);
+    let touchStartTime;
+    const onTouchStart = (event) => {
+      if (!props.touchable)
+        return;
+      touch.start(event);
+      touchStartTime = Date.now();
+      stopAutoplay();
+      correctPosition();
+    };
+    const onTouchMove = (event) => {
+      if (props.touchable && state.swiping) {
+        touch.move(event);
+        if (isCorrectDirection.value) {
+          preventDefault(event, props.stopPropagation);
+          move({
+            offset: delta.value
+          });
+        }
+      }
+    };
+    const onTouchEnd = () => {
+      if (!props.touchable || !state.swiping) {
+        return;
+      }
+      const duration = Date.now() - touchStartTime;
+      const speed = delta.value / duration;
+      const shouldSwipe = Math.abs(speed) > 0.25 || Math.abs(delta.value) > size.value / 2;
+      if (shouldSwipe && isCorrectDirection.value) {
+        const offset = props.vertical ? touch.offsetY.value : touch.offsetX.value;
+        let pace = 0;
+        if (props.loop) {
+          pace = offset > 0 ? delta.value > 0 ? -1 : 1 : 0;
+        } else {
+          pace = -Math[delta.value > 0 ? "ceil" : "floor"](delta.value / size.value);
+        }
+        move({
+          pace,
+          emitChange: true
+        });
+      } else if (delta.value) {
+        move({
+          pace: 0
+        });
+      }
+      state.swiping = false;
+      autoplay();
+    };
+    const swipeTo = (index, options = {}) => {
+      correctPosition();
+      touch.reset();
+      doubleRaf(() => {
+        let targetIndex;
+        if (props.loop && index === count.value) {
+          targetIndex = state.active === 0 ? 0 : index;
+        } else {
+          targetIndex = index % count.value;
+        }
+        if (options.immediate) {
+          doubleRaf(() => {
+            state.swiping = false;
+          });
+        } else {
+          state.swiping = false;
+        }
+        move({
+          pace: targetIndex - state.active,
+          emitChange: true
+        });
+      });
+    };
+    const renderDot = (_, index) => {
+      const active = index === activeIndicator.value;
+      const style = active ? {
+        backgroundColor: props.indicatorColor
+      } : void 0;
+      return _createVNode("i", {
+        "style": style,
+        "class": bem("indicator", {
+          active
+        })
+      }, null);
+    };
+    const renderIndicator = () => {
+      if (slots.indicator) {
+        return slots.indicator({
+          active: activeIndicator.value,
+          total: count.value
+        });
+      }
+      if (props.showIndicators && count.value > 1) {
+        return _createVNode("div", {
+          "class": bem("indicators", {
+            vertical: props.vertical
+          })
+        }, [Array(count.value).fill("").map(renderDot)]);
+      }
+    };
+    useExpose({
+      prev,
+      next,
+      state,
+      resize,
+      swipeTo
+    });
+    linkChildren({
+      size,
+      props,
+      count,
+      activeIndicator
+    });
+    watch(() => props.initialSwipe, (value) => initialize(+value));
+    watch(count, () => initialize(state.active));
+    watch(() => props.autoplay, autoplay);
+    watch([windowWidth, windowHeight], resize);
+    watch(usePageVisibility(), (visible) => {
+      if (visible === "visible") {
+        autoplay();
+      } else {
+        stopAutoplay();
+      }
+    });
+    onMounted(initialize);
+    onActivated(() => initialize(state.active));
+    onPopupReopen(() => initialize(state.active));
+    onDeactivated(stopAutoplay);
+    onBeforeUnmount(stopAutoplay);
+    return () => {
+      var _a;
+      return _createVNode("div", {
+        "ref": root,
+        "class": bem()
+      }, [_createVNode("div", {
+        "style": trackStyle.value,
+        "class": bem("track", {
+          vertical: props.vertical
+        }),
+        "onTouchstart": onTouchStart,
+        "onTouchmove": onTouchMove,
+        "onTouchend": onTouchEnd,
+        "onTouchcancel": onTouchEnd
+      }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]), renderIndicator()]);
+    };
+  }
+});
+export {
+  SWIPE_KEY,
+  stdin_default as default
+};

package/es/swipe/index.css

@@ -0,0 +1 @@
+body{--zt-swipe-indicator-size: 6px;--zt-swipe-indicator-margin: var(--zt-padding-sm);--zt-swipe-indicator-active-opacity: 1;--zt-swipe-indicator-inactive-opacity: .3;--zt-swipe-indicator-active-background: var(--zt-primary-color);--zt-swipe-indicator-inactive-background: var(--zt-border-color)}.zt-swipe{position:relative;overflow:hidden;transform:translateZ(0);cursor:-webkit-grab;cursor:grab;-webkit-user-select:none;user-select:none}.zt-swipe__track{display:flex;height:100%}.zt-swipe__track--vertical{flex-direction:column}.zt-swipe__indicators{position:absolute;bottom:var(--zt-swipe-indicator-margin);left:50%;display:flex;transform:translate(-50%)}.zt-swipe__indicators--vertical{top:50%;bottom:auto;left:var(--zt-swipe-indicator-margin);flex-direction:column;transform:translateY(-50%)}.zt-swipe__indicators--vertical .zt-swipe__indicator:not(:last-child){margin-bottom:var(--zt-swipe-indicator-size)}.zt-swipe__indicator{width:var(--zt-swipe-indicator-size);height:var(--zt-swipe-indicator-size);background-color:var(--zt-swipe-indicator-inactive-background);border-radius:100%;opacity:var(--zt-swipe-indicator-inactive-opacity);transition:opacity var(--zt-duration-fast),background-color var(--zt-duration-fast)}.zt-swipe__indicator:not(:last-child){margin-right:var(--zt-swipe-indicator-size)}.zt-swipe__indicator--active{background-color:var(--zt-swipe-indicator-active-background);opacity:var(--zt-swipe-indicator-active-opacity)}

package/es/swipe/index.d.ts

@@ -0,0 +1,90 @@
+import { SwipeProps } from './Swipe';
+export declare const Swipe: import("../utils").WithInstall<import("vue").DefineComponent<{
+    loop: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    width: (NumberConstructor | StringConstructor)[];
+    height: (NumberConstructor | StringConstructor)[];
+    vertical: BooleanConstructor;
+    autoplay: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    duration: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    touchable: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    lazyRender: BooleanConstructor;
+    initialSwipe: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    indicatorColor: StringConstructor;
+    showIndicators: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    stopPropagation: {
+        type: BooleanConstructor;
+        default: true;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "change"[], "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    loop: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    width: (NumberConstructor | StringConstructor)[];
+    height: (NumberConstructor | StringConstructor)[];
+    vertical: BooleanConstructor;
+    autoplay: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    duration: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    touchable: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    lazyRender: BooleanConstructor;
+    initialSwipe: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    indicatorColor: StringConstructor;
+    showIndicators: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    stopPropagation: {
+        type: BooleanConstructor;
+        default: true;
+    };
+}>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+}, {
+    autoplay: string | number;
+    loop: boolean;
+    vertical: boolean;
+    duration: string | number;
+    lazyRender: boolean;
+    touchable: boolean;
+    initialSwipe: string | number;
+    showIndicators: boolean;
+    stopPropagation: boolean;
+}>>;
+export default Swipe;
+export type { SwipeProps };
+export type { SwipeInstance, SwipeToOptions } from './types';
+declare module 'vue' {
+    interface GlobalComponents {
+        ZtSwipe: typeof Swipe;
+    }
+}

package/es/swipe/index.mjs

@@ -0,0 +1,8 @@
+import { withInstall } from "../utils/index.mjs";
+import _Swipe from "./Swipe.mjs";
+const Swipe = withInstall(_Swipe);
+var stdin_default = Swipe;
+export {
+  Swipe,
+  stdin_default as default
+};

package/es/swipe/style/index.d.ts

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

package/es/swipe/style/index.mjs

@@ -0,0 +1,2 @@
+import "../../style/base.css";
+import "../index.css";

package/es/swipe/types.d.ts

@@ -0,0 +1,31 @@
+import type { ComponentPublicInstance, ComputedRef } from 'vue';
+import type { SwipeProps } from './Swipe';
+export declare type SwipeState = {
+    rect: {
+        width: number;
+        height: number;
+    } | null;
+    width: number;
+    height: number;
+    offset: number;
+    active: number;
+    swiping: boolean;
+};
+export declare type SwipeToOptions = {
+    immediate?: boolean;
+};
+export declare type SwipeExpose = {
+    prev: () => void;
+    next: () => void;
+    resize: () => void;
+    swipeTo: (index: number, options?: SwipeToOptions) => void;
+    /** @private */
+    state: SwipeState;
+};
+export declare type SwipeProvide = {
+    props: SwipeProps;
+    size: ComputedRef<number>;
+    count: ComputedRef<number>;
+    activeIndicator: ComputedRef<number>;
+};
+export declare type SwipeInstance = ComponentPublicInstance<SwipeProps, SwipeExpose>;

package/es/swipe-item/SwipeItem.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, (() => JSX.Element) | undefined, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+export default _default;

package/es/swipe-item/SwipeItem.mjs

@@ -0,0 +1,82 @@
+import { createVNode as _createVNode } from "vue";
+import { computed, nextTick, reactive, onMounted, defineComponent } from "vue";
+import { createNamespace } from "../utils/index.mjs";
+import { SWIPE_KEY } from "../swipe/Swipe.mjs";
+import { useParent } from "@zartui/use";
+import { useExpose } from "../composables/use-expose.mjs";
+const [name, bem] = createNamespace("swipe-item");
+var stdin_default = defineComponent({
+  name,
+  setup(props, {
+    slots
+  }) {
+    let rendered;
+    const state = reactive({
+      offset: 0,
+      inited: false,
+      mounted: false
+    });
+    const {
+      parent,
+      index
+    } = useParent(SWIPE_KEY);
+    if (!parent) {
+      if (process.env.NODE_ENV !== "production") {
+        console.error("[Zart] <SwipeItem> must be a child component of <Swipe>.");
+      }
+      return;
+    }
+    const style = computed(() => {
+      const style2 = {};
+      const {
+        vertical
+      } = parent.props;
+      if (parent.size.value) {
+        style2[vertical ? "height" : "width"] = `${parent.size.value}px`;
+      }
+      if (state.offset) {
+        style2.transform = `translate${vertical ? "Y" : "X"}(${state.offset}px)`;
+      }
+      return style2;
+    });
+    const shouldRender = computed(() => {
+      const {
+        loop,
+        lazyRender
+      } = parent.props;
+      if (!lazyRender || rendered) {
+        return true;
+      }
+      if (!state.mounted) {
+        return false;
+      }
+      const active = parent.activeIndicator.value;
+      const maxActive = parent.count.value - 1;
+      const prevActive = active === 0 && loop ? maxActive : active - 1;
+      const nextActive = active === maxActive && loop ? 0 : active + 1;
+      rendered = index.value === active || index.value === prevActive || index.value === nextActive;
+      return rendered;
+    });
+    const setOffset = (offset) => {
+      state.offset = offset;
+    };
+    onMounted(() => {
+      nextTick(() => {
+        state.mounted = true;
+      });
+    });
+    useExpose({
+      setOffset
+    });
+    return () => {
+      var _a;
+      return _createVNode("div", {
+        "class": bem(),
+        "style": style.value
+      }, [shouldRender.value ? (_a = slots.default) == null ? void 0 : _a.call(slots) : null]);
+    };
+  }
+});
+export {
+  stdin_default as default
+};

package/es/swipe-item/index.css

@@ -0,0 +1 @@
+.zt-swipe-item{position:relative;flex-shrink:0;width:100%;height:100%}

package/es/swipe-item/index.d.ts

@@ -0,0 +1,7 @@
+export declare const SwipeItem: import("../utils").WithInstall<import("vue").DefineComponent<{}, (() => JSX.Element) | undefined, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>>;
+export default SwipeItem;
+declare module 'vue' {
+    interface GlobalComponents {
+        ZtSwipeItem: typeof SwipeItem;
+    }
+}

package/es/swipe-item/index.mjs

@@ -0,0 +1,8 @@
+import { withInstall } from "../utils/index.mjs";
+import _SwipeItem from "./SwipeItem.mjs";
+const SwipeItem = withInstall(_SwipeItem);
+var stdin_default = SwipeItem;
+export {
+  SwipeItem,
+  stdin_default as default
+};

package/es/swipe-item/style/index.d.ts

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

package/es/swipe-item/style/index.mjs

@@ -0,0 +1,3 @@
+import "../../style/base.css";
+import "../../swipe/index.css";
+import "../index.css";

package/es/switch/Switch.d.ts

@@ -0,0 +1,58 @@
+import { ExtractPropTypes } from 'vue';
+declare const switchProps: {
+    size: (NumberConstructor | StringConstructor)[];
+    loading: BooleanConstructor;
+    disabled: BooleanConstructor;
+    modelValue: import("vue").PropType<unknown>;
+    activeColor: StringConstructor;
+    inactiveColor: StringConstructor;
+    activeValue: {
+        type: import("vue").PropType<unknown>;
+        default: unknown;
+    };
+    inactiveValue: {
+        type: import("vue").PropType<unknown>;
+        default: unknown;
+    };
+};
+export declare type SwitchProps = ExtractPropTypes<typeof switchProps>;
+declare const _default: import("vue").DefineComponent<{
+    size: (NumberConstructor | StringConstructor)[];
+    loading: BooleanConstructor;
+    disabled: BooleanConstructor;
+    modelValue: import("vue").PropType<unknown>;
+    activeColor: StringConstructor;
+    inactiveColor: StringConstructor;
+    activeValue: {
+        type: import("vue").PropType<unknown>;
+        default: unknown;
+    };
+    inactiveValue: {
+        type: import("vue").PropType<unknown>;
+        default: unknown;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    size: (NumberConstructor | StringConstructor)[];
+    loading: BooleanConstructor;
+    disabled: BooleanConstructor;
+    modelValue: import("vue").PropType<unknown>;
+    activeColor: StringConstructor;
+    inactiveColor: StringConstructor;
+    activeValue: {
+        type: import("vue").PropType<unknown>;
+        default: unknown;
+    };
+    inactiveValue: {
+        type: import("vue").PropType<unknown>;
+        default: unknown;
+    };
+}>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    disabled: boolean;
+    loading: boolean;
+    activeValue: unknown;
+    inactiveValue: unknown;
+}>;
+export default _default;