@loickit-v/swiper 0.0.1 → 0.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +151 -0
  3. package/package.json +3 -4
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2025 likCheung
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in
13
+ all copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21
+ THE SOFTWARE.
package/README.md CHANGED
@@ -1 +1,152 @@
1
1
  # @loickit-v/swiper
2
+
3
+ ## Components
4
+
5
+ ### LSlide
6
+
7
+ the Slide Component
8
+
9
+ #### Props
10
+
11
+ - name
12
+
13
+ identification of this slide, get by `defineSlide`
14
+
15
+ - list
16
+ \<Array>
17
+
18
+ just avaliable `infinite` mode, the long list of render, will cached by `slotScope.cacheList`
19
+
20
+ - loadMore
21
+ \<Function>
22
+
23
+ just avaliable `infinite` mode, when the pointer points to the cacheList end, will trigger.
24
+
25
+ #### Hooks
26
+
27
+ **defineSlide**
28
+
29
+ define a slide object
30
+
31
+ argument:
32
+
33
+ - provideKey \<Symbol> | <String>
34
+
35
+ the identification of target slide
36
+
37
+ return \[createSlide, useSlide]
38
+
39
+ - createSlide
40
+
41
+ create a slide states, use return value to registe a slide
42
+
43
+ params:
44
+
45
+ - initial \<SlideState>
46
+
47
+ - direction \<SLIDE\*DIRECTION> _optional_
48
+
49
+ default: SLIDE_DIRECTION.HORIZONTAL
50
+
51
+ direction
52
+
53
+ - currentIndex \<number> _optional_
54
+
55
+ pointer
56
+
57
+ - duration \<number> _optional_
58
+
59
+ slide switch animation duration
60
+
61
+ - infinite \<boolean> `infinite` _optional_
62
+
63
+ mode enable
64
+
65
+ return:
66
+
67
+ - name
68
+
69
+ the identification of target slide
70
+
71
+ - state \<SlideState>
72
+
73
+ the slide state
74
+
75
+ - useSlide
76
+
77
+ return: \<SlideSate>
78
+
79
+ #### Slot
80
+
81
+ **default**
82
+
83
+ - cacheList
84
+
85
+ the cache data of list, just cache 3, just avaliable `infinite` mode
86
+
87
+ ### LSlideItem
88
+
89
+ #### Props
90
+
91
+ - index \<number> optional
92
+
93
+ the index of this slide item, required when `infinite` mode
94
+
95
+ ### Usage
96
+
97
+ ```vue
98
+ <script setup lang="ts">
99
+ import {
100
+ defineSlide,
101
+ LSlide,
102
+ LSlideItem,
103
+ SLIDE_DIRECTION
104
+ } from '@loickit-v/swiper';
105
+
106
+ defineOptions({ name: 'App' });
107
+
108
+ const [createSlide] = defineSlide('one');
109
+
110
+ const oneSlide = createSlide({
111
+ currentIndex: 1
112
+ });
113
+
114
+ const [createSlide2] = defineSlide('two');
115
+
116
+ const twoSlide = createSlide2({
117
+ direction: SLIDE_DIRECTION.VERTICAL
118
+ });
119
+
120
+ const oneToTwo = () => {
121
+ oneSlide.state.currentIndex = 2;
122
+ };
123
+ </script>
124
+
125
+ <template>
126
+ <LSlide :name="oneSlide.name">
127
+ <LSlideItem style="background-color: red; width: 30%">1</LSlideItem>
128
+ <LSlideItem style="background-color: blue">2</LSlideItem>
129
+ <LSlideItem style="background-color: green">
130
+ <LSlide :name="twoSlide.name">
131
+ <LSlideItem style="background-color: pink; height: 30%">1</LSlideItem>
132
+ <LSlideItem style="background-color: orange">2</LSlideItem>
133
+ <LSlideItem style="background-color: yellow">3</LSlideItem>
134
+ </LSlide>
135
+ </LSlideItem>
136
+ </LSlide>
137
+
138
+ <p>one currentIndex: {{ oneSlide.state.currentIndex }}</p>
139
+ <p>two currentIndex: {{ twoSlide.state.currentIndex }}</p>
140
+
141
+ <button @click="oneToTwo">click to two slide</button>
142
+ </template>
143
+
144
+ <style lang="scss">
145
+ body,
146
+ #app {
147
+ background-color: #ccc;
148
+ height: 800px;
149
+ width: 800px;
150
+ }
151
+ </style>
152
+ ```
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@loickit-v/swiper",
3
- "version": "0.0.1",
3
+ "version": "0.0.3",
4
4
  "description": "loickit swiper components for vue",
5
5
  "type": "module",
6
6
  "types": "./dist/types/index.d.ts",
@@ -23,8 +23,7 @@
23
23
  "devDependencies": {
24
24
  "@iconify/vue": "^4.3.0",
25
25
  "@types/node": "^22.13.10",
26
- "@vue/tsconfig": "^0.7.0",
27
- "@loickit-v/cli": "^1.0.0"
26
+ "@vue/tsconfig": "^0.7.0"
28
27
  },
29
28
  "dependencies": {
30
29
  "@likcheung/shared": "^0.0.7"
@@ -35,7 +34,7 @@
35
34
  "publishConfig": {
36
35
  "access": "public"
37
36
  },
38
- "license": "UNLICENSED",
37
+ "license": "MIT",
39
38
  "author": "licheung228",
40
39
  "scripts": {
41
40
  "build": "loickit-cli build"