@loickit-v/swiper 0.0.6 → 0.0.7

package/README.md

@@ -4,149 +4,70 @@
 
 ### LSlide
 
-the Slide Component
+Slide Component
 
 #### Props
 
-- name
+-   `name`
+    The unique identifier of the slide, which should be obtained via `defineSlide`.
 
-  identification of this slide, get by `defineSlide`
+-   `list <Array>`
+    Only effective in `infinite` mode; automatic cached rendering will be performed.
 
-- list \<Array>
-
-  just avaliable `infinite` mode, the long list of render, will cached by `slotScope.cacheList`
-
-- loadMore \<Function>
-
-  just avaliable `infinite` mode, when the pointer points to the cacheList end, will trigger.
+-   `loadMore <Function>`
+    Only effective in `infinite` mode; triggered when the sliding pointer points to the end of the list.
 
 #### Hooks
 
-**defineSlide**
-
-define a slide object
-
-argument:
-
-- provideKey \<string>
-
-  the identification of target slide
-
-return \[createSlide, useSlide]
-
-- createSlide
-
-  create a slide states, use return value to registe a slide
-
-  params:
-
-  - initial \<SlideState>
-
-    - direction \<SLIDE\*DIRECTION> _optional_
-
-      default: SLIDE_DIRECTION.HORIZONTAL
-
-      direction
-
-    - currentIndex \<number> _optional_
-
-      pointer
-
-    - duration \<number> _optional_
-
-      slide switch animation duration
-
-    - infinite \<boolean> `infinite` _optional_
-
-      mode enable
-
-  return:
-
-  - name
-
-    the identification of target slide
-
-  - state \<SlideState>
-
-    the slide state
-
-- useSlide
-
-  return: \<SlideSate>
-
-  use it to get slide state in any child component
+##### `defineSlide`
+
+Define a slide.
+
+Parameters:
+
+-   `provideKey <string>`
+    Set a unique identifier for the current slide.
+
+Returns:
+`[createSlide, useSlide]`
+
+-   `createSlide`
+    Create a slide state; register the `l-slide` component through its return value.
+    Parameters:
+
+    -   `initial <SlideState>`
+        -   `direction <SLIDE_DIRECTION>` _optional_
+            Sliding direction.
+            Default value: SLIDE_DIRECTION.HORIZONTAL
+        -   `currentIndex <number>` _optional_
+            Pointer.
+            Default value: 0
+        -   `duration <number>` _optional_
+            Animation duration for slide switching.
+            Default value: 300 (ms)
+        -   `infinite <boolean>` _optional_
+            Whether to enable infinite mode.
+            Default value: false
+            Return value:
+    -   `name`
+        The unique identifier of the slide, which should be assigned to the `name` prop of `l-slide`.
+    -   `state <SlideState>`
+        The slide state.
+
+-   `useSlide`
+    Return value: `<SlideState>`
+    Use it to get the slide state in any child component.
 
 #### Slot
 
 **default**
 
-- cacheList
-
-  the cache data of list, just cache 3, just avaliable `infinite` mode
+-   `cacheList`
+    Only effective in `infinite` mode; caches the list data.
 
 ### LSlideItem
 
 #### Props
 
-- index \<number> optional
-
-  the index of this slide item, required when `infinite` mode
-
-### Usage
-
-```vue
-<script setup lang="ts">
-import {
-  defineSlide,
-  LSlide,
-  LSlideItem,
-  SLIDE_DIRECTION
-} from '@loickit-v/swiper';
-
-defineOptions({ name: 'App' });
-
-const [createSlide] = defineSlide('one');
-
-const oneSlide = createSlide({
-  currentIndex: 1
-});
-
-const [createSlide2] = defineSlide('two');
-
-const twoSlide = createSlide2({
-  direction: SLIDE_DIRECTION.VERTICAL
-});
-
-const oneToTwo = () => {
-  oneSlide.state.currentIndex = 2;
-};
-</script>
-
-<template>
-  <LSlide :name="oneSlide.name">
-    <LSlideItem style="background-color: red; width: 30%">1</LSlideItem>
-    <LSlideItem style="background-color: blue">2</LSlideItem>
-    <LSlideItem style="background-color: green">
-      <LSlide :name="twoSlide.name">
-        <LSlideItem style="background-color: pink; height: 30%">1</LSlideItem>
-        <LSlideItem style="background-color: orange">2</LSlideItem>
-        <LSlideItem style="background-color: yellow">3</LSlideItem>
-      </LSlide>
-    </LSlideItem>
-  </LSlide>
-
-  <p>one currentIndex: {{ oneSlide.state.currentIndex }}</p>
-  <p>two currentIndex: {{ twoSlide.state.currentIndex }}</p>
-
-  <button @click="oneToTwo">click to two slide</button>
-</template>
-
-<style lang="scss">
-body,
-#app {
-  background-color: #ccc;
-  height: 800px;
-  width: 800px;
-}
-</style>
-```
+-   `index <number>` _optional_
+    Must be passed in `infinite` mode, used for dynamic rendering calculation.

package/dist/components/Slide/index.vue.js

@@ -1,99 +1,109 @@
-import { defineComponent as T, reactive as A, provide as H, ref as N, watch as k, computed as _, onMounted as V, createElementBlock as Z, openBlock as $, withModifiers as f, createElementVNode as B, normalizeStyle as X, unref as c, renderSlot as y, nextTick as Y } from "vue";
-import { u_setStyle as b } from "@likcheung/shared";
-import { u_setTransform as m, u_setFlush as j } from "../../utils/index.js";
+import { defineComponent as H, ref as w, watch as y, computed as g, onMounted as V, createElementBlock as Z, openBlock as $, withModifiers as d, createElementVNode as X, normalizeStyle as Y, unref as f, renderSlot as k, reactive as b, provide as j, nextTick as q } from "vue";
+import { u_setStyle as z } from "@likcheung/shared";
+import { u_setTransform as m, u_setFlush as F } from "../../utils/index.js";
 import { SLIDE_DIRECTION as v } from "../constant/index.js";
-import { checkDirection as z } from "../../utils/slide.js";
-import { COMMON_SLIDE_PROVIDE_NAME as O } from "../constant/private.js";
-import { useSlideState as F } from "../Provide/index.js";
-import { defaultState as U } from "../../hooks/defineSlide/default.js";
-import { useSlidePrivateProvide as q } from "./provide.js";
-const oe = /* @__PURE__ */ T({
+import { checkDirection as U } from "../../utils/slide.js";
+import { COMMON_SLIDE_PROVIDE_NAME as M } from "../constant/private.js";
+import { useSlideState as G } from "../Provide/index.js";
+import { defaultState as J } from "../../hooks/defineSlide/default.js";
+import { useSlidePrivateProvide as K } from "./provide.js";
+const le = /* @__PURE__ */ H({
   name: "LSlide",
   __name: "index",
   props: {
-    name: { default: O },
+    name: { default: M },
+    infinite: { type: Boolean },
     list: { default: () => [] },
     loadMore: {}
   },
   emits: ["switch"],
-  setup(S, { emit: g }) {
-    const n = S, w = g, a = () => {
-      b(r.value, "transition-duration", `${e.duration}ms`), m(e.direction, r.value, -s.value);
-    }, x = q({
-      name: n.name,
+  setup(S, { emit: _ }) {
+    var I;
+    const t = S;
+    if (t.infinite && !((I = t.list) != null && I.length))
+      throw new Error("list is required when infinite is true");
+    const L = _, c = () => {
+      z(
+        r.value,
+        "transition-duration",
+        `${e.duration}ms`
+      ), m(e.direction, r.value, -s.value);
+    }, p = K({
+      name: t.name,
       itemsInfo: []
-    }), e = n.name !== O ? F(n.name) : (() => {
-      const t = A(U);
-      return H(n.name, t), t;
-    })(), p = () => n.list.slice(e.currentIndex, e.currentIndex + 3), o = e.infinite ? N(p()) : null;
-    e.infinite && k(
-      () => n.list,
+    }), O = () => {
+      const n = b(J);
+      return j(t.name, n), n;
+    }, e = t.name !== M ? G(t.name) : O(), x = () => t.list.slice(e.currentIndex, e.currentIndex + 3), o = t.infinite ? w(x()) : null;
+    t.infinite && y(
+      () => t.list,
       () => {
-        o.value = p();
+        o.value = x();
       },
       { once: !0 }
-    ), k(() => e.currentIndex, a);
-    const r = N(), s = _(
+    ), y(() => e.currentIndex, c);
+    const r = w(), s = g(
       () => (
         // 通过收集所有 slide-item 的宽和高, 叠加计算
-        x.itemsInfo.slice(0, e.currentIndex).reduce((t, i) => (t += i[e.direction === v.HORIZONTAL ? "width" : "height"], t), 0)
+        p.itemsInfo.slice(0, e.currentIndex).reduce((n, i) => (n += i[e.direction === v.HORIZONTAL ? "width" : "height"], n), 0)
       )
-    ), D = _(
-      () => e.currentIndex === 0 && !e.isNext || e.currentIndex === x.itemsInfo.length - 1 && e.isNext
+    ), P = g(
+      () => e.currentIndex === 0 && !e.isNext || e.currentIndex === p.itemsInfo.length - 1 && e.isNext
     ), l = { x: 0, y: 0 };
-    let u = !1;
-    const L = (t) => {
-      u = !0, l.x = t.pageX, l.y = t.pageY;
-    }, { isConsistent: M, checkDirectionConsistent: P, resetCheckDirection: C } = z(e.direction), E = (t) => {
-      if (!u) return;
-      const i = t.pageX - l.x, I = t.pageY - l.y, d = e.direction === v.HORIZONTAL ? i : I;
-      e.isNext = d < 0, !D.value && (P(i, I), M.value && (j(r.value), m(
+    let a = !1;
+    const D = (n) => {
+      a = !0, l.x = n.pageX, l.y = n.pageY;
+    }, { isConsistent: E, checkDirectionConsistent: C, resetCheckDirection: R } = U(e.direction), T = (n) => {
+      if (!a) return;
+      const i = n.pageX - l.x, N = n.pageY - l.y, u = e.direction === v.HORIZONTAL ? i : N;
+      e.isNext = u < 0, !P.value && (C(i, N), E.value && (F(r.value), m(
         e.direction,
         r.value,
-        Math.min(-s.value + d, e.isNext ? -s.value : 0)
-      ), e.shouldNext = Math.abs(d) > e.judgeValue));
+        Math.min(-s.value + u, e.isNext ? -s.value : 0)
+      ), e.shouldNext = Math.abs(u) > e.judgeValue));
     }, h = () => {
-      e.shouldNext = !1, u = !1, C();
-    }, R = () => {
+      e.shouldNext = !1, a = !1, R();
+    }, A = () => t.infinite ? e.currentIndex === o.value.length - 1 : !1, B = () => {
       if (!e.shouldNext)
-        return a(), h();
-      e.currentIndex += e.isNext ? 1 : -1, a(), w("switch", {
+        return c(), h();
+      e.currentIndex += e.isNext ? 1 : -1, c();
+      const n = {
         index: e.currentIndex
-      }), h(), e.infinite && e.currentIndex === o.value.length - 1 && Y(async () => {
-        var i;
-        (o == null ? void 0 : o.value.length) === n.list.length && await ((i = n.loadMore) == null ? void 0 : i.call(n));
-        const t = n.list[e.currentIndex + 1];
-        t && o.value.push(t);
+      };
+      t.infinite && (n.item = t.list[e.currentIndex]), L("switch", n), h(), A() && q(async () => {
+        (o == null ? void 0 : o.value.length) === t.list.length && t.loadMore && await t.loadMore();
+        const i = t.list[e.currentIndex + 1];
+        i && o.value.push(i);
       });
     };
     return V(() => {
       m(e.direction, r.value, -s.value);
-    }), (t, i) => ($(), Z(
+    }), (n, i) => ($(), Z(
       "div",
       {
         class: "loickit-slide",
         id: "loickit-slide",
-        onPointerdown: f(L, ["prevent"]),
-        onPointermove: f(E, ["prevent"]),
-        onPointerup: f(R, ["prevent"])
+        onPointerdown: d(D, ["prevent"]),
+        onPointermove: d(T, ["prevent"]),
+        onPointerup: d(B, ["prevent"])
       },
       [
-        B(
+        X(
           "div",
           {
             class: "loickit-slide-list",
-            style: X({
+            style: Y({
               // 根据方向设置 flex-direction
-              flexDirection: c(e).direction === c(v).HORIZONTAL ? "row" : "column"
+              flexDirection: f(e).direction === f(v).HORIZONTAL ? "row" : "column"
             }),
             ref_key: "slideListRef",
             ref: r
           },
           [
-            c(e).infinite ? y(t.$slots, "default", {
+            t.infinite ? k(n.$slots, "default", {
               key: 1,
-              cacheList: c(o)
-            }) : y(t.$slots, "default", { key: 0 })
+              cacheList: f(o)
+            }) : k(n.$slots, "default", { key: 0 })
           ],
           4
           /* STYLE */
@@ -105,5 +115,5 @@ const oe = /* @__PURE__ */ T({
   }
 });
 export {
-  oe as default
+  le as default
 };

package/dist/types/components/Slide/index.d.ts

@@ -1,4 +1,4 @@
-export declare const LSlide: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: {
+export declare const LSlide: <T = any>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: {
     attrs: any;
     emit: (e: "switch", value: import("../types/index.js").SlideSwitchEvent) => void;
     slots: {
@@ -10,8 +10,9 @@ export declare const LSlide: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_s
     props: {
         readonly onSwitch?: ((value: import("../types/index.js").SlideSwitchEvent) => any) | undefined;
         name?: import("../types/private.js").SlideNameType | undefined;
+        infinite?: boolean | undefined;
         list?: T[] | undefined;
-        loadMore?: (() => Promise<T>) | undefined;
+        loadMore?: (() => any) | undefined;
     } & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
     attrs: any;

package/dist/types/components/Slide/index.vue.d.ts

@@ -1,12 +1,13 @@
 import type { SlideNameType } from '../types/private';
 import type { SlideSwitchEvent } from '../types';
-declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+declare const _default: <T = any>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
         readonly onSwitch?: ((value: SlideSwitchEvent) => any) | undefined;
     } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onSwitch"> & {
         name?: SlideNameType;
+        infinite?: boolean;
         list?: T[];
-        loadMore?: () => Promise<T>;
+        loadMore?: () => any;
     } & Partial<{}>> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
     attrs: any;

package/dist/types/components/types/index.d.ts

@@ -6,8 +6,8 @@ export type SlideState = {
     currentIndex: number;
     shouldNext: boolean;
     isNext: boolean;
-    infinite?: boolean;
 };
 export type SlideSwitchEvent = {
     index: number;
+    item?: any;
 };

package/dist/types/hooks/defineSlide/index.d.ts

@@ -8,7 +8,6 @@ export declare const defineSlide: (provideKey: SlideNameType) => readonly [(init
         currentIndex: number;
         shouldNext: boolean;
         isNext: boolean;
-        infinite?: boolean | undefined;
     };
     name: symbol;
 }, () => SlideState];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loickit-v/swiper",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "loickit swiper components for vue",
   "type": "module",
   "types": "./dist/types/index.d.ts",