@loickit-v/swiper 0.0.2 → 0.0.4

package/README.md

@@ -1 +1,152 @@
 # @loickit-v/swiper
+
+## Components
+
+### LSlide
+
+the Slide Component
+
+#### Props
+
+- name
+
+  identification of this slide, get by `defineSlide`
+
+- 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.
+
+#### 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
+
+#### Slot
+
+**default**
+
+- cacheList
+
+  the cache data of list, just cache 3, just avaliable `infinite` mode
+
+### 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>
+```

package/package.json

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