@loickit-v/swiper 0.0.7 → 0.0.8

package/README.md

@@ -1,73 +1,153 @@
 # @loickit-v/swiper
 
+[中文](./README-zh.md)
+
 ## Components
 
 ### LSlide
-
-Slide Component
-
+The Slide Component  
 #### Props
+-   `name`  
+    A unique identifier for the slide, which should be obtained via `defineSlide`.  
+-   `list <Array>`  
+    Only takes effect in `infinite` mode; enables automatic cached rendering.  
+-   `loadMore <Function>`  
+    Only takes effect in `infinite` mode; triggered when the sliding pointer reaches the end of the list.  
 
--   `name`
-    The unique identifier of the slide, which should be obtained via `defineSlide`.
-
--   `list <Array>`
-    Only effective in `infinite` mode; automatic cached rendering will be performed.
-
--   `loadMore <Function>`
-    Only effective in `infinite` mode; triggered when the sliding pointer points to the end of the list.
-
-#### Hooks
-
-##### `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`
-    Only effective in `infinite` mode; caches the list data.
 
 ### LSlideItem
-
+The Slide Item Component  
 #### Props
-
--   `index <number>` _optional_
-    Must be passed in `infinite` mode, used for dynamic rendering calculation.
+-   `index <number>` _optional_  
+    Must be passed in `infinite` mode, used for dynamic rendering calculations.  
+
+
+## Hooks
+
+### `defineSlide`
+Defines a slide  
+
+**Parameters**:  
+-   `provideKey <string>`  
+    Sets a unique identifier for the current slide.  
+
+**Returns**:  
+`[createSlide, useSlide]`  
+
+-   `createSlide`  
+    Creates a slide state; its return value is used to register the `l-slide` component.  
+
+    **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  
+
+    **Returns**:  
+    -   `name`  
+        A unique identifier for the slide, which should be assigned to the `name` prop of `l-slide`.  
+    -   `state <SlideState>`  
+        The slide state  
+
+-   `useSlide`  
+    **Returns**: `<SlideState>`  
+    Use it to get the current slide state in any child component.  
+
+
+## Slot
+**default**  
+-   `cacheList`  
+    Only takes effect in `infinite` mode; caches the list data.  
+
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import {
+    defineSlide,
+    LSlide,
+    LSlideItem,
+    SLIDE_DIRECTION,
+    type SlideSwitchEvent
+} from '@loickit-v/swiper';
+import '@loickit-v/swiper/style';
+import { reactive } from 'vue';
+
+const handleSwitch = (value: SlideSwitchEvent) => {
+    console.log(value);
+};
+
+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 = 1;
+};
+const list = reactive([{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }]);
+const onLoadMore = () => {
+    list.push({ id: list[list.length - 1].id + 1 });
+};
+</script>
+
+<template>
+    <div style="position: fixed; bottom: 0; left: 0; z-index: 999">
+        <p>one currentIndex: {{ oneSlide.state.currentIndex }}</p>
+        <p>two currentIndex: {{ twoSlide.state.currentIndex }}</p>
+
+        <button @click="oneToTwo">click to two "HORIZONTAL-2"</button>
+    </div>
+    <LSlide :name="oneSlide.name" @switch="handleSwitch">
+        <LSlideItem style="background-color: red; width: 30%">
+            <h1>HORIZONTAL-1</h1>
+        </LSlideItem>
+        <LSlideItem style="background-color: blue">
+            <h1>HORIZONTAL-2</h1>
+        </LSlideItem>
+        <LSlideItem style="background-color: green">
+            <LSlide
+                infinite
+                :name="twoSlide.name"
+                :list="list"
+                :load-more="onLoadMore"
+                @switch="handleSwitch"
+            >
+                <template #="{ cacheList }">
+                    <LSlideItem
+                        v-for="(item, idx) in cacheList"
+                        :key="item.id"
+                        :index="idx"
+                    >
+                        <h1>INFINITE-VERTICAL</h1>
+                        <h2>{{ item.id }}</h2>
+                    </LSlideItem>
+                </template>
+            </LSlide>
+        </LSlideItem>
+    </LSlide>
+</template>
+
+<style lang="scss">
+body,
+#app {
+    background-color: #ccc;
+    height: 800px;
+    width: 800px;
+}
+</style>
+```

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

@@ -6,7 +6,7 @@ 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";
+import { createSlidePrivateProvide as K } from "./provide.js";
 const le = /* @__PURE__ */ H({
   name: "LSlide",
   __name: "index",
@@ -30,7 +30,8 @@ const le = /* @__PURE__ */ H({
       ), m(e.direction, r.value, -s.value);
     }, p = K({
       name: t.name,
-      itemsInfo: []
+      itemsInfo: [],
+      infinite: t.infinite
     }), O = () => {
       const n = b(J);
       return j(t.name, n), n;

package/dist/components/Slide/provide.js

@@ -1,7 +1,7 @@
 import { createProvide as e } from "../../utils/createProvide.js";
 import { SLIDE_PROVIDE_KEY as r } from "../constant/private.js";
-const [o, P] = e(r);
+const [o, a] = e(r);
 export {
-  o as useSlidePrivateProvide,
-  P as useSlidePrivateState
+  o as createSlidePrivateProvide,
+  a as useSlidePrivateState
 };

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

@@ -1,45 +1,52 @@
-import { defineComponent as f, ref as l, watch as c, onMounted as m, onBeforeUnmount as p, createElementBlock as u, openBlock as x, createElementVNode as I, renderSlot as h } from "vue";
-import { useSlideState as v } from "../Provide/index.js";
-import { useSlidePrivateState as S } from "../Slide/provide.js";
-const R = /* @__PURE__ */ f({
+import { defineComponent as a, ref as l, watch as c, onMounted as m, onBeforeUnmount as p, createElementBlock as u, openBlock as h, createElementVNode as x, renderSlot as v } from "vue";
+import { useSlideState as I } from "../Provide/index.js";
+import { useSlidePrivateState as w } from "../Slide/provide.js";
+const C = /* @__PURE__ */ a({
   name: "LSlideItem",
   __name: "index",
   props: {
-    index: { default: 0 }
+    index: {}
   },
-  setup(a) {
-    const o = a, t = S(), n = v(t.name), r = l(), s = l();
-    n.infinite && c(
-      () => n.currentIndex,
-      () => {
-        var e;
-        n.currentIndex <= o.index + 1 && n.currentIndex >= o.index - 1 ? (e = r.value) == null || e.appendChild(
-          t.itemsInfo[o.index].el
-        ) : s.value.remove();
-      }
-    );
-    const i = {
-      index: o.index
+  setup(f) {
+    const i = f, e = w(), r = I(e.name), o = l(), s = l();
+    if (e.infinite) {
+      if (typeof i.index != "number")
+        throw new Error(
+          `index is required when infinite is true 
+ please use the second parameter of the "v-for" directive`
+        );
+      c(
+        () => r.currentIndex,
+        () => {
+          var t;
+          r.currentIndex <= i.index + 1 && r.currentIndex >= i.index - 1 ? (t = o.value) == null || t.appendChild(
+            e.itemsInfo[i.index].el
+          ) : s.value.remove();
+        }
+      );
+    }
+    const n = {
+      index: i.index
     };
     return m(() => {
       var d;
-      const e = (d = r.value) == null ? void 0 : d.getBoundingClientRect();
-      i.width = e.width, i.height = e.height, n.infinite && (i.el = s.value), t.itemsInfo.push(i);
+      const t = (d = o.value) == null ? void 0 : d.getBoundingClientRect();
+      n.width = t.width, n.height = t.height, e.infinite && (n.el = s.value), e.itemsInfo.push(n);
     }), p(() => {
-      t.itemsInfo.splice(
-        t.itemsInfo.indexOf(i),
+      e.itemsInfo.splice(
+        e.itemsInfo.indexOf(n),
         1
       );
-    }), (e, d) => (x(), u(
+    }), (t, d) => (h(), u(
       "div",
       {
         ref_key: "slideItemRef",
-        ref: r,
+        ref: o,
         class: "loickit-slide-item",
         style: { position: "relative" }
       },
       [
-        I(
+        x(
           "div",
           {
             ref_key: "slideItemContentWrapperRef",
@@ -47,7 +54,7 @@ const R = /* @__PURE__ */ f({
             class: "loickit-slide-item-content-wrapper"
           },
           [
-            h(e.$slots, "default")
+            v(t.$slots, "default")
           ],
           512
           /* NEED_PATCH */
@@ -59,5 +66,5 @@ const R = /* @__PURE__ */ f({
   }
 });
 export {
-  R as default
+  C as default
 };

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

@@ -2,8 +2,9 @@ import { SlideItemInfo, SlideNameType } from '../types/private';
 type SlidePrivateState = {
     name: SlideNameType;
     itemsInfo: SlideItemInfo[];
+    infinite: boolean;
 };
-export declare const useSlidePrivateProvide: (state: SlidePrivateState) => {
+export declare const createSlidePrivateProvide: (state: SlidePrivateState) => {
     name: SlideNameType;
     itemsInfo: {
         height: number;
@@ -11,5 +12,6 @@ export declare const useSlidePrivateProvide: (state: SlidePrivateState) => {
         index: import("../types/private").SlideItemInfoNameType;
         el?: HTMLElement | undefined;
     }[];
+    infinite: boolean;
 }, useSlidePrivateState: () => SlidePrivateState;
 export {};

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

@@ -1,9 +1,7 @@
 export declare const LSlideItem: {
     new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<{
         index?: number;
-    }> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
-        index: number;
-    }, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+    }> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
         P: {};
         B: {};
         D: {};
@@ -12,17 +10,13 @@ export declare const LSlideItem: {
         Defaults: {};
     }, Readonly<{
         index?: number;
-    }> & Readonly<{}>, {}, {}, {}, {}, {
-        index: number;
-    }>;
+    }> & Readonly<{}>, {}, {}, {}, {}, {}>;
     __isFragment?: never;
     __isTeleport?: never;
     __isSuspense?: never;
 } & import("vue").ComponentOptionsBase<Readonly<{
     index?: number;
-}> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
-    index: number;
-}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+}> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
     $slots: {
         default?: ((props: {}) => any) | undefined;
     };

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

@@ -11,12 +11,8 @@ type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$
 declare const __VLS_self: import("vue").DefineComponent<__VLS_Props, {
     slideItemRef: typeof slideItemRef;
     slideItemContentWrapperRef: typeof slideItemContentWrapperRef;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    index: number;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    index: number;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

package/package.json

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