@reni-corp/reni-2c-ui 0.4.9 → 0.4.10
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.
- package/dist/components/elements/Pagination.vue.d.ts +20 -0
- package/dist/components/elements/Pagination.vue.d.ts.map +1 -0
- package/dist/components/features/VariationSelector.vue.d.ts +38 -0
- package/dist/components/features/VariationSelector.vue.d.ts.map +1 -0
- package/dist/components/navigation/Drawer.vue.d.ts +3 -0
- package/dist/components/navigation/Drawer.vue.d.ts.map +1 -1
- package/dist/composable/usePagination.d.ts +31 -0
- package/dist/composable/usePagination.d.ts.map +1 -0
- package/dist/index.d.ts +5 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.es.js +3745 -3506
- package/dist/script.es.js +5740 -5499
- package/dist/script.umd.js +26 -26
- package/dist/style.css +1 -1
- package/dist/utils.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/stories/Pagination.stories.ts +133 -0
- package/src/stories/VariationSelector.stories.ts +241 -0
package/dist/utils.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;
|
|
1
|
+
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/vue3-vite'
|
|
2
|
+
import { ref } from 'vue'
|
|
3
|
+
import Pagination, {
|
|
4
|
+
type PaginationProps,
|
|
5
|
+
} from '@/components/elements/Pagination.vue'
|
|
6
|
+
|
|
7
|
+
const meta: Meta<typeof Pagination> = {
|
|
8
|
+
title: 'Elements/Pagination',
|
|
9
|
+
component: Pagination,
|
|
10
|
+
tags: ['autodocs'],
|
|
11
|
+
argTypes: {
|
|
12
|
+
totalPages: { control: 'number' },
|
|
13
|
+
siblingCount: { control: 'number' },
|
|
14
|
+
boundaryCount: { control: 'number' },
|
|
15
|
+
},
|
|
16
|
+
args: {
|
|
17
|
+
totalPages: 20,
|
|
18
|
+
siblingCount: 1,
|
|
19
|
+
boundaryCount: 1,
|
|
20
|
+
},
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
export default meta
|
|
24
|
+
type StoryArgs = PaginationProps & { currentPage?: number }
|
|
25
|
+
type Story = StoryObj<StoryArgs>
|
|
26
|
+
type OverridesStory = Omit<Story, 'argTypes'> & {
|
|
27
|
+
argTypes?: Record<string, any>
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
export const 基本: OverridesStory = {
|
|
31
|
+
args: {
|
|
32
|
+
totalPages: 20,
|
|
33
|
+
},
|
|
34
|
+
render: (args: StoryArgs) => ({
|
|
35
|
+
components: { 'rn-pagination': Pagination },
|
|
36
|
+
setup() {
|
|
37
|
+
const page = ref(1)
|
|
38
|
+
return { args, page }
|
|
39
|
+
},
|
|
40
|
+
template: /* html */ `
|
|
41
|
+
<div class='sb-canvas'>
|
|
42
|
+
<rn-pagination
|
|
43
|
+
v-model:current-page="page"
|
|
44
|
+
:total-pages="args.totalPages"
|
|
45
|
+
:sibling-count="args.siblingCount"
|
|
46
|
+
:boundary-count="args.boundaryCount"
|
|
47
|
+
/>
|
|
48
|
+
<p style="margin-top: 16px; font-size: 14px; color: #666;">
|
|
49
|
+
現在のページ: {{ page }}
|
|
50
|
+
</p>
|
|
51
|
+
</div>
|
|
52
|
+
`,
|
|
53
|
+
}),
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
export const SSRモード: OverridesStory = {
|
|
57
|
+
args: {
|
|
58
|
+
totalPages: 20,
|
|
59
|
+
},
|
|
60
|
+
render: (args: StoryArgs) => ({
|
|
61
|
+
components: { 'rn-pagination': Pagination },
|
|
62
|
+
setup() {
|
|
63
|
+
const page = ref(5)
|
|
64
|
+
const href = (p: number) => `#page=${p}`
|
|
65
|
+
return { args, page, href }
|
|
66
|
+
},
|
|
67
|
+
template: /* html */ `
|
|
68
|
+
<div class='sb-canvas'>
|
|
69
|
+
<rn-pagination
|
|
70
|
+
v-model:current-page="page"
|
|
71
|
+
:total-pages="args.totalPages"
|
|
72
|
+
:sibling-count="args.siblingCount"
|
|
73
|
+
:boundary-count="args.boundaryCount"
|
|
74
|
+
:href="href"
|
|
75
|
+
/>
|
|
76
|
+
<p style="margin-top: 16px; font-size: 14px; color: #666;">
|
|
77
|
+
現在のページ: {{ page }}（SSR: <a> タグでレンダリング）
|
|
78
|
+
</p>
|
|
79
|
+
</div>
|
|
80
|
+
`,
|
|
81
|
+
}),
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
export const ページ数が少ない: OverridesStory = {
|
|
85
|
+
args: {
|
|
86
|
+
totalPages: 5,
|
|
87
|
+
},
|
|
88
|
+
render: (args: StoryArgs) => ({
|
|
89
|
+
components: { 'rn-pagination': Pagination },
|
|
90
|
+
setup() {
|
|
91
|
+
const page = ref(3)
|
|
92
|
+
return { args, page }
|
|
93
|
+
},
|
|
94
|
+
template: /* html */ `
|
|
95
|
+
<div class='sb-canvas'>
|
|
96
|
+
<rn-pagination
|
|
97
|
+
v-model:current-page="page"
|
|
98
|
+
:total-pages="args.totalPages"
|
|
99
|
+
:sibling-count="args.siblingCount"
|
|
100
|
+
:boundary-count="args.boundaryCount"
|
|
101
|
+
/>
|
|
102
|
+
<p style="margin-top: 16px; font-size: 14px; color: #666;">
|
|
103
|
+
現在のページ: {{ page }}
|
|
104
|
+
</p>
|
|
105
|
+
</div>
|
|
106
|
+
`,
|
|
107
|
+
}),
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
export const _1ページのみ: OverridesStory = {
|
|
111
|
+
name: '1ページのみ',
|
|
112
|
+
args: {
|
|
113
|
+
totalPages: 1,
|
|
114
|
+
},
|
|
115
|
+
render: (args: StoryArgs) => ({
|
|
116
|
+
components: { 'rn-pagination': Pagination },
|
|
117
|
+
setup() {
|
|
118
|
+
const page = ref(1)
|
|
119
|
+
return { args, page }
|
|
120
|
+
},
|
|
121
|
+
template: /* html */ `
|
|
122
|
+
<div class='sb-canvas'>
|
|
123
|
+
<rn-pagination
|
|
124
|
+
v-model:current-page="page"
|
|
125
|
+
:total-pages="args.totalPages"
|
|
126
|
+
/>
|
|
127
|
+
<p style="margin-top: 16px; font-size: 14px; color: #666;">
|
|
128
|
+
totalPages=1 のため非表示
|
|
129
|
+
</p>
|
|
130
|
+
</div>
|
|
131
|
+
`,
|
|
132
|
+
}),
|
|
133
|
+
}
|
|
@@ -0,0 +1,241 @@
|
|
|
1
|
+
import { ref } from 'vue'
|
|
2
|
+
import type { Meta, StoryObj } from '@storybook/vue3-vite'
|
|
3
|
+
import VariationSelector, {
|
|
4
|
+
type VariationSelectorProps,
|
|
5
|
+
} from '@/components/features/VariationSelector.vue'
|
|
6
|
+
|
|
7
|
+
const meta: Meta<typeof VariationSelector> = {
|
|
8
|
+
title: 'Features/VariationSelector',
|
|
9
|
+
component: VariationSelector,
|
|
10
|
+
tags: ['autodocs'],
|
|
11
|
+
parameters: {
|
|
12
|
+
docs: {
|
|
13
|
+
description: {
|
|
14
|
+
component:
|
|
15
|
+
'バリエーション選択用コンポーネント。フラットモード（単純な選択肢）とグループモード（カテゴリ→商品名のようなカスケード選択）に対応。chip（横並びボタン）と list（縦リスト）の2つの表示バリアントをサポート。',
|
|
16
|
+
},
|
|
17
|
+
},
|
|
18
|
+
},
|
|
19
|
+
argTypes: {
|
|
20
|
+
variant: {
|
|
21
|
+
control: 'select',
|
|
22
|
+
options: ['chip', 'list'],
|
|
23
|
+
description: 'アイテムの表示バリアント',
|
|
24
|
+
},
|
|
25
|
+
groupVariant: {
|
|
26
|
+
control: 'select',
|
|
27
|
+
options: ['chip', 'list'],
|
|
28
|
+
description: 'グループの表示バリアント',
|
|
29
|
+
},
|
|
30
|
+
color: {
|
|
31
|
+
control: 'select',
|
|
32
|
+
options: [
|
|
33
|
+
'primary',
|
|
34
|
+
'secondary',
|
|
35
|
+
'warning',
|
|
36
|
+
'danger',
|
|
37
|
+
'success',
|
|
38
|
+
'info',
|
|
39
|
+
'default',
|
|
40
|
+
'subtle',
|
|
41
|
+
'muted',
|
|
42
|
+
'light',
|
|
43
|
+
],
|
|
44
|
+
description: '選択状態のアクセントカラー',
|
|
45
|
+
},
|
|
46
|
+
label: {
|
|
47
|
+
control: 'text',
|
|
48
|
+
description: 'アイテム側のラベル',
|
|
49
|
+
},
|
|
50
|
+
groupLabel: {
|
|
51
|
+
control: 'text',
|
|
52
|
+
description: 'グループ側のラベル',
|
|
53
|
+
},
|
|
54
|
+
},
|
|
55
|
+
args: {
|
|
56
|
+
variant: 'chip',
|
|
57
|
+
color: 'default',
|
|
58
|
+
},
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
export default meta
|
|
62
|
+
type Story = StoryObj<VariationSelectorProps>
|
|
63
|
+
|
|
64
|
+
const sizeItems = [
|
|
65
|
+
{ label: 'S', value: 's' },
|
|
66
|
+
{ label: 'M', value: 'm' },
|
|
67
|
+
{ label: 'L', value: 'l' },
|
|
68
|
+
{ label: 'XL', value: 'xl' },
|
|
69
|
+
]
|
|
70
|
+
|
|
71
|
+
export const 基本: Story = {
|
|
72
|
+
args: {
|
|
73
|
+
label: 'サイズ',
|
|
74
|
+
items: sizeItems,
|
|
75
|
+
variant: 'chip',
|
|
76
|
+
},
|
|
77
|
+
render: (args) => ({
|
|
78
|
+
components: { 'rn-variation-selector': VariationSelector },
|
|
79
|
+
setup() {
|
|
80
|
+
const selectedValue = ref('')
|
|
81
|
+
return { args, selectedValue }
|
|
82
|
+
},
|
|
83
|
+
template: /* html */ `
|
|
84
|
+
<div class="sb-canvas" style="max-width: 480px;">
|
|
85
|
+
<rn-variation-selector v-bind="args" v-model="selectedValue" />
|
|
86
|
+
<p style="margin-top: 16px; font-size: 13px; color: #666;">
|
|
87
|
+
選択中: {{ selectedValue || '未選択' }}
|
|
88
|
+
</p>
|
|
89
|
+
</div>
|
|
90
|
+
`,
|
|
91
|
+
}),
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
export const リストバリアント: Story = {
|
|
95
|
+
args: {
|
|
96
|
+
label: '商品名',
|
|
97
|
+
items: [
|
|
98
|
+
{ label: '白上フブキ', value: 'fubuki' },
|
|
99
|
+
{ label: '百鬼あやめ', value: 'ayame' },
|
|
100
|
+
{ label: '癒月ちょこ', value: 'choco' },
|
|
101
|
+
{ label: '猫又おかゆ', value: 'okayu' },
|
|
102
|
+
{ label: '兎田ぺこら', value: 'pekora' },
|
|
103
|
+
],
|
|
104
|
+
variant: 'list',
|
|
105
|
+
},
|
|
106
|
+
render: (args) => ({
|
|
107
|
+
components: { 'rn-variation-selector': VariationSelector },
|
|
108
|
+
setup() {
|
|
109
|
+
const selectedValue = ref('')
|
|
110
|
+
return { args, selectedValue }
|
|
111
|
+
},
|
|
112
|
+
template: /* html */ `
|
|
113
|
+
<div class="sb-canvas" style="max-width: 480px;">
|
|
114
|
+
<rn-variation-selector v-bind="args" v-model="selectedValue" />
|
|
115
|
+
<p style="margin-top: 16px; font-size: 13px; color: #666;">
|
|
116
|
+
選択中: {{ selectedValue || '未選択' }}
|
|
117
|
+
</p>
|
|
118
|
+
</div>
|
|
119
|
+
`,
|
|
120
|
+
}),
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
export const グループモード: Story = {
|
|
124
|
+
render: () => ({
|
|
125
|
+
components: { 'rn-variation-selector': VariationSelector },
|
|
126
|
+
setup() {
|
|
127
|
+
const categories = [
|
|
128
|
+
{ label: '7th fes. STAGE1', value: 'stage1' },
|
|
129
|
+
{ label: '7th fes. STAGE2', value: 'stage2' },
|
|
130
|
+
{ label: '7th fes. STAGE3', value: 'stage3' },
|
|
131
|
+
{ label: '7th fes. STAGE4', value: 'stage4' },
|
|
132
|
+
]
|
|
133
|
+
const products = [
|
|
134
|
+
{ label: '白上フブキ', value: 'fubuki', stageId: 'stage1' },
|
|
135
|
+
{ label: '百鬼あやめ', value: 'ayame', stageId: 'stage1' },
|
|
136
|
+
{ label: '癒月ちょこ', value: 'choco', stageId: 'stage1' },
|
|
137
|
+
{ label: '猫又おかゆ', value: 'okayu', stageId: 'stage2' },
|
|
138
|
+
{ label: '兎田ぺこら', value: 'pekora', stageId: 'stage2' },
|
|
139
|
+
{ label: '不知火フレア', value: 'flare', stageId: 'stage2' },
|
|
140
|
+
{ label: '角巻わため', value: 'watame', stageId: 'stage3' },
|
|
141
|
+
{ label: '雪花ラミィ', value: 'lamy', stageId: 'stage3' },
|
|
142
|
+
{ label: '尾丸ポルカ', value: 'polka', stageId: 'stage4' },
|
|
143
|
+
{ label: '鷹嶺ルイ', value: 'lui', stageId: 'stage4' },
|
|
144
|
+
]
|
|
145
|
+
|
|
146
|
+
const selectedCategory = ref('stage1')
|
|
147
|
+
const selectedProduct = ref('')
|
|
148
|
+
|
|
149
|
+
return { categories, products, selectedCategory, selectedProduct }
|
|
150
|
+
},
|
|
151
|
+
template: /* html */ `
|
|
152
|
+
<div class="sb-canvas" style="max-width: 480px;">
|
|
153
|
+
<rn-variation-selector
|
|
154
|
+
group-label="商品カテゴリ"
|
|
155
|
+
label="商品名"
|
|
156
|
+
:groups="categories"
|
|
157
|
+
:items="products"
|
|
158
|
+
item-group="stageId"
|
|
159
|
+
group-variant="chip"
|
|
160
|
+
variant="list"
|
|
161
|
+
v-model:group="selectedCategory"
|
|
162
|
+
v-model="selectedProduct"
|
|
163
|
+
/>
|
|
164
|
+
<div style="margin-top: 16px; font-size: 13px; color: #666;">
|
|
165
|
+
<p>カテゴリ: {{ selectedCategory || '未選択' }}</p>
|
|
166
|
+
<p>商品: {{ selectedProduct || '未選択' }}</p>
|
|
167
|
+
</div>
|
|
168
|
+
</div>
|
|
169
|
+
`,
|
|
170
|
+
}),
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
export const 無効化オプション: Story = {
|
|
174
|
+
args: {
|
|
175
|
+
label: 'サイズ',
|
|
176
|
+
items: [
|
|
177
|
+
{ label: 'S', value: 's' },
|
|
178
|
+
{ label: 'M', value: 'm' },
|
|
179
|
+
{ label: 'L', value: 'l', disabled: true },
|
|
180
|
+
{ label: 'XL', value: 'xl', disabled: true },
|
|
181
|
+
],
|
|
182
|
+
variant: 'chip',
|
|
183
|
+
},
|
|
184
|
+
render: (args) => ({
|
|
185
|
+
components: { 'rn-variation-selector': VariationSelector },
|
|
186
|
+
setup() {
|
|
187
|
+
const selectedValue = ref('')
|
|
188
|
+
return { args, selectedValue }
|
|
189
|
+
},
|
|
190
|
+
template: /* html */ `
|
|
191
|
+
<div class="sb-canvas" style="max-width: 480px;">
|
|
192
|
+
<rn-variation-selector v-bind="args" v-model="selectedValue" />
|
|
193
|
+
<p style="margin-top: 16px; font-size: 13px; color: #666;">
|
|
194
|
+
選択中: {{ selectedValue || '未選択' }}
|
|
195
|
+
</p>
|
|
196
|
+
</div>
|
|
197
|
+
`,
|
|
198
|
+
}),
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
export const Shopify商品バリアント: Story = {
|
|
202
|
+
render: () => ({
|
|
203
|
+
components: { 'rn-variation-selector': VariationSelector },
|
|
204
|
+
setup() {
|
|
205
|
+
const selectedColor = ref('')
|
|
206
|
+
const selectedSize = ref('')
|
|
207
|
+
return { selectedColor, selectedSize }
|
|
208
|
+
},
|
|
209
|
+
template: /* html */ `
|
|
210
|
+
<div class="sb-canvas" style="max-width: 480px; display: flex; flex-direction: column; gap: 24px;">
|
|
211
|
+
<rn-variation-selector
|
|
212
|
+
label="カラー"
|
|
213
|
+
:items="[
|
|
214
|
+
{ label: 'ホワイト', value: 'white' },
|
|
215
|
+
{ label: 'ブラック', value: 'black' },
|
|
216
|
+
{ label: 'ネイビー', value: 'navy' },
|
|
217
|
+
]"
|
|
218
|
+
variant="chip"
|
|
219
|
+
v-model="selectedColor"
|
|
220
|
+
/>
|
|
221
|
+
<rn-variation-selector
|
|
222
|
+
label="サイズ"
|
|
223
|
+
:items="[
|
|
224
|
+
{ label: 'S', value: 's' },
|
|
225
|
+
{ label: 'M', value: 'm' },
|
|
226
|
+
{ label: 'L', value: 'l' },
|
|
227
|
+
{ label: 'XL', value: 'xl', disabled: true },
|
|
228
|
+
]"
|
|
229
|
+
variant="chip"
|
|
230
|
+
v-model="selectedSize"
|
|
231
|
+
/>
|
|
232
|
+
<div style="padding: 16px; background: var(--rn-bg-muted); border-radius: 8px;">
|
|
233
|
+
<p style="margin: 0; font-size: 14px; font-weight: 600;">選択中のバリアント</p>
|
|
234
|
+
<p style="margin: 8px 0 0; font-size: 13px; color: #666;">
|
|
235
|
+
カラー: {{ selectedColor || '未選択' }} / サイズ: {{ selectedSize || '未選択' }}
|
|
236
|
+
</p>
|
|
237
|
+
</div>
|
|
238
|
+
</div>
|
|
239
|
+
`,
|
|
240
|
+
}),
|
|
241
|
+
}
|