@reni-corp/reni-2c-ui 0.4.1 → 0.4.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.
- package/dist/components/interactive/Disclosure.vue.d.ts +4 -1
- package/dist/components/interactive/Disclosure.vue.d.ts.map +1 -1
- package/dist/components/interactive/Lightbox.vue.d.ts.map +1 -1
- package/dist/index.es.js +420 -425
- package/dist/script.es.js +2313 -2316
- package/dist/script.umd.js +17 -17
- package/dist/style.css +1 -1
- package/dist/utils.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/stories/Disclosure.stories.ts +87 -39
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
|
@@ -4,7 +4,10 @@ import Disclosure, {
|
|
|
4
4
|
DisclosureProps,
|
|
5
5
|
} from '@/components/interactive/Disclosure.vue'
|
|
6
6
|
import Stack from '@/components/layouts/Stack.vue'
|
|
7
|
+
import Card from '@/components/layouts/Card.vue'
|
|
7
8
|
import Text from '@/components/elements/Text.vue'
|
|
9
|
+
import Icon from '@/components/elements/Icon.vue'
|
|
10
|
+
import Divider from '@/components/elements/Divider.vue'
|
|
8
11
|
import Button from '@/components/elements/Button.vue'
|
|
9
12
|
import './assets/css/style.css'
|
|
10
13
|
|
|
@@ -60,7 +63,7 @@ export const Default: Story = {
|
|
|
60
63
|
template: /* html */ `
|
|
61
64
|
<div class="sb-canvas" style="max-width: 400px;">
|
|
62
65
|
<rn-disclosure v-bind="args">
|
|
63
|
-
<rn-stack direction="vertical" gap="sm"
|
|
66
|
+
<rn-stack direction="vertical" gap="sm" paddingY="sm">
|
|
64
67
|
<a href="/faq">FAQ</a>
|
|
65
68
|
<a href="/contact">お問い合わせ</a>
|
|
66
69
|
<a href="/shipping">配送について</a>
|
|
@@ -87,7 +90,7 @@ export const 初期状態オープン: Story = {
|
|
|
87
90
|
template: /* html */ `
|
|
88
91
|
<div class="sb-canvas" style="max-width: 400px;">
|
|
89
92
|
<rn-disclosure v-bind="args">
|
|
90
|
-
<rn-stack direction="vertical" gap="sm"
|
|
93
|
+
<rn-stack direction="vertical" gap="sm" paddingY="sm">
|
|
91
94
|
<a href="/terms">利用規約</a>
|
|
92
95
|
<a href="/privacy">プライバシーポリシー</a>
|
|
93
96
|
<a href="/legal">特定商取引法に基づく表記</a>
|
|
@@ -103,31 +106,38 @@ export const 複数並べた場合: Story = {
|
|
|
103
106
|
components: {
|
|
104
107
|
'rn-disclosure': Disclosure,
|
|
105
108
|
'rn-stack': Stack,
|
|
109
|
+
'rn-divider': Divider,
|
|
106
110
|
},
|
|
107
111
|
template: /* html */ `
|
|
108
112
|
<div class="sb-canvas" style="max-width: 400px;">
|
|
109
|
-
<rn-
|
|
110
|
-
<rn-
|
|
111
|
-
<
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
<rn-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
<
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
113
|
+
<rn-stack direction="vertical">
|
|
114
|
+
<rn-disclosure title="サポート">
|
|
115
|
+
<rn-stack direction="vertical" gap="sm" paddingY="sm">
|
|
116
|
+
<a href="/faq">FAQ</a>
|
|
117
|
+
<a href="/contact">お問い合わせ</a>
|
|
118
|
+
<a href="/shipping">配送について</a>
|
|
119
|
+
</rn-stack>
|
|
120
|
+
</rn-disclosure>
|
|
121
|
+
|
|
122
|
+
<rn-divider />
|
|
123
|
+
|
|
124
|
+
<rn-disclosure title="規約・免責">
|
|
125
|
+
<rn-stack direction="vertical" gap="sm" paddingY="sm">
|
|
126
|
+
<a href="/terms">利用規約</a>
|
|
127
|
+
<a href="/privacy">プライバシーポリシー</a>
|
|
128
|
+
<a href="/legal">特定商取引法に基づく表記</a>
|
|
129
|
+
</rn-stack>
|
|
130
|
+
</rn-disclosure>
|
|
131
|
+
|
|
132
|
+
<rn-divider />
|
|
133
|
+
|
|
134
|
+
<rn-disclosure title="アカウント">
|
|
135
|
+
<rn-stack direction="vertical" gap="sm" paddingY="sm">
|
|
136
|
+
<a href="/signup">サインアップ</a>
|
|
137
|
+
<a href="/login">ログイン</a>
|
|
138
|
+
</rn-stack>
|
|
139
|
+
</rn-disclosure>
|
|
140
|
+
</rn-stack>
|
|
131
141
|
</div>
|
|
132
142
|
`,
|
|
133
143
|
}),
|
|
@@ -144,6 +154,7 @@ export const SPフッター想定: Story = {
|
|
|
144
154
|
'rn-disclosure': Disclosure,
|
|
145
155
|
'rn-stack': Stack,
|
|
146
156
|
'rn-text': Text,
|
|
157
|
+
'rn-divider': Divider,
|
|
147
158
|
},
|
|
148
159
|
template: /* html */ `
|
|
149
160
|
<div class="sb-canvas">
|
|
@@ -154,21 +165,25 @@ export const SPフッター想定: Story = {
|
|
|
154
165
|
<div style="border: 1px solid #ccc; padding: 8px 16px;">SNS Links</div>
|
|
155
166
|
</rn-stack>
|
|
156
167
|
|
|
157
|
-
<!--
|
|
158
|
-
<rn-
|
|
159
|
-
<rn-
|
|
160
|
-
<
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
168
|
+
<!-- メニュー部分（Divider で区切る） -->
|
|
169
|
+
<rn-stack direction="vertical">
|
|
170
|
+
<rn-disclosure title="サポート">
|
|
171
|
+
<rn-stack direction="vertical" gap="sm" paddingY="sm">
|
|
172
|
+
<a href="/faq">FAQ</a>
|
|
173
|
+
<a href="/contact">お問い合わせ</a>
|
|
174
|
+
<a href="/shipping">配送について</a>
|
|
175
|
+
</rn-stack>
|
|
176
|
+
</rn-disclosure>
|
|
165
177
|
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
<
|
|
170
|
-
|
|
171
|
-
|
|
178
|
+
<rn-divider />
|
|
179
|
+
|
|
180
|
+
<rn-disclosure title="規約・免責">
|
|
181
|
+
<rn-stack direction="vertical" gap="sm" paddingY="sm">
|
|
182
|
+
<a href="/terms">利用規約</a>
|
|
183
|
+
<a href="/privacy">プライバシーポリシー</a>
|
|
184
|
+
</rn-stack>
|
|
185
|
+
</rn-disclosure>
|
|
186
|
+
</rn-stack>
|
|
172
187
|
|
|
173
188
|
<!-- Copyright -->
|
|
174
189
|
<rn-stack direction="vertical" align="center" style="padding: 24px 0;">
|
|
@@ -180,6 +195,39 @@ export const SPフッター想定: Story = {
|
|
|
180
195
|
}),
|
|
181
196
|
}
|
|
182
197
|
|
|
198
|
+
export const Cardとのコンポジション: Story = {
|
|
199
|
+
render: () => ({
|
|
200
|
+
components: {
|
|
201
|
+
'rn-disclosure': Disclosure,
|
|
202
|
+
'rn-card': Card,
|
|
203
|
+
'rn-stack': Stack,
|
|
204
|
+
'rn-text': Text,
|
|
205
|
+
'rn-icon': Icon,
|
|
206
|
+
'rn-divider': Divider,
|
|
207
|
+
},
|
|
208
|
+
template: /* html */ `
|
|
209
|
+
<div class="sb-canvas" style="max-width: 640px;">
|
|
210
|
+
<rn-card color="info" variant="tonal" :elevation="false">
|
|
211
|
+
<rn-disclosure :open="true">
|
|
212
|
+
<template #trigger="{ isOpen }">
|
|
213
|
+
<rn-stack direction="horizontal" gap="sm" vertical-align="center">
|
|
214
|
+
<rn-icon icon="circle-info" color="info" />
|
|
215
|
+
<rn-text size="subtitle" color="info" weight="bold">Information</rn-text>
|
|
216
|
+
</rn-stack>
|
|
217
|
+
</template>
|
|
218
|
+
<rn-stack direction="vertical" gap="md" paddingY="md">
|
|
219
|
+
<rn-text>一人でも多くの方にご利用頂くため、ご注文はお一人様につき月1回まで、お買い物1回あたりの商品ご購入金額の上限は¥25,000(税込)までとさせて頂いております。</rn-text>
|
|
220
|
+
<rn-text size="caption">※受注商品等がある場合は、これに限りません。</rn-text>
|
|
221
|
+
<rn-divider />
|
|
222
|
+
<rn-text>当ONLINE SHOPは一度に入荷する商品数が限られております。また商品によっては購入数を制限させて頂いているものもございますので、あらかじめご了承ください。</rn-text>
|
|
223
|
+
</rn-stack>
|
|
224
|
+
</rn-disclosure>
|
|
225
|
+
</rn-card>
|
|
226
|
+
</div>
|
|
227
|
+
`,
|
|
228
|
+
}),
|
|
229
|
+
}
|
|
230
|
+
|
|
183
231
|
export const 外部から制御: Story = {
|
|
184
232
|
args: {
|
|
185
233
|
title: 'v-modelで制御',
|
|
@@ -205,7 +253,7 @@ export const 外部から制御: Story = {
|
|
|
205
253
|
</rn-button>
|
|
206
254
|
<p>現在の状態: {{ isOpen ? '開いている' : '閉じている' }}</p>
|
|
207
255
|
<rn-disclosure v-bind="args" v-model:open="isOpen">
|
|
208
|
-
<rn-stack direction="vertical" gap="sm"
|
|
256
|
+
<rn-stack direction="vertical" gap="sm" paddingY="sm">
|
|
209
257
|
<p>v-model:openで外部から開閉状態を制御できます。</p>
|
|
210
258
|
<p>内部のトリガークリックでも状態が同期されます。</p>
|
|
211
259
|
</rn-stack>
|