@citizenplane/pimp 14.1.4 → 15.0.0
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/pimp.es.js +56 -57
- package/dist/pimp.umd.js +8 -8
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/src/components/CpBadge.vue +102 -165
- package/src/components/CpMenuItem.vue +1 -3
- package/src/constants/colors/Colors.ts +0 -5
- package/src/constants/colors/ToggleColors.ts +1 -4
- package/src/stories/CpBadge.stories.ts +205 -100
|
@@ -2,6 +2,15 @@ import type { Args, Meta, StoryObj } from '@storybook/vue3'
|
|
|
2
2
|
|
|
3
3
|
import CpBadge from '@/components/CpBadge.vue'
|
|
4
4
|
|
|
5
|
+
import {
|
|
6
|
+
docCellStyle,
|
|
7
|
+
docLabelStyle,
|
|
8
|
+
docPageStyle,
|
|
9
|
+
docRowWrapStyle,
|
|
10
|
+
docSectionStyle,
|
|
11
|
+
docTitleStyle,
|
|
12
|
+
} from '@/stories/documentationStyles'
|
|
13
|
+
|
|
5
14
|
const meta = {
|
|
6
15
|
title: 'Visual/CpBadge',
|
|
7
16
|
component: CpBadge,
|
|
@@ -13,16 +22,21 @@ const meta = {
|
|
|
13
22
|
},
|
|
14
23
|
size: {
|
|
15
24
|
control: 'select',
|
|
16
|
-
options: ['xs', 'sm', 'md'],
|
|
25
|
+
options: ['2xs', 'xs', 'sm', 'md'],
|
|
17
26
|
description: 'The size of the badge',
|
|
18
27
|
},
|
|
19
|
-
|
|
28
|
+
style: {
|
|
29
|
+
control: 'select',
|
|
30
|
+
options: ['outline', 'soft', 'solid'],
|
|
31
|
+
description: 'The style of the badge',
|
|
32
|
+
},
|
|
33
|
+
hasClose: {
|
|
20
34
|
control: 'boolean',
|
|
21
|
-
description: 'Whether the badge has a
|
|
35
|
+
description: 'Whether the badge has a close button',
|
|
22
36
|
},
|
|
23
|
-
|
|
37
|
+
disabled: {
|
|
24
38
|
control: 'boolean',
|
|
25
|
-
description: 'Whether the badge
|
|
39
|
+
description: 'Whether the badge is disabled',
|
|
26
40
|
},
|
|
27
41
|
isSquare: {
|
|
28
42
|
control: 'boolean',
|
|
@@ -58,14 +72,197 @@ const defaultRender = (args: Args) => ({
|
|
|
58
72
|
template: defaultTemplate,
|
|
59
73
|
})
|
|
60
74
|
|
|
75
|
+
export const Documentation: Story = {
|
|
76
|
+
args: {},
|
|
77
|
+
render: () => ({
|
|
78
|
+
components: { CpBadge },
|
|
79
|
+
setup: () => ({}),
|
|
80
|
+
template: `
|
|
81
|
+
<div>
|
|
82
|
+
<div style="${docPageStyle}">
|
|
83
|
+
<h1 style="margin: 0 0 32px 0; font-size: 28px; font-weight: 700; color: #111;">CpBadge</h1>
|
|
84
|
+
|
|
85
|
+
<section style="${docSectionStyle}">
|
|
86
|
+
<h2 style="${docTitleStyle}">Size</h2>
|
|
87
|
+
<div style="${docRowWrapStyle}">
|
|
88
|
+
<div style="${docCellStyle}">
|
|
89
|
+
<span style="${docLabelStyle}">2xs</span>
|
|
90
|
+
<CpBadge color="accent" size="2xs" label="Badge" />
|
|
91
|
+
</div>
|
|
92
|
+
<div style="${docCellStyle}">
|
|
93
|
+
<span style="${docLabelStyle}">xs</span>
|
|
94
|
+
<CpBadge color="accent" size="xs" label="Badge" />
|
|
95
|
+
</div>
|
|
96
|
+
<div style="${docCellStyle}">
|
|
97
|
+
<span style="${docLabelStyle}">sm</span>
|
|
98
|
+
<CpBadge color="accent" size="sm" label="Badge" />
|
|
99
|
+
</div>
|
|
100
|
+
<div style="${docCellStyle}">
|
|
101
|
+
<span style="${docLabelStyle}">md</span>
|
|
102
|
+
<CpBadge color="accent" size="md" label="Badge" />
|
|
103
|
+
</div>
|
|
104
|
+
</div>
|
|
105
|
+
</section>
|
|
106
|
+
|
|
107
|
+
<section style="${docSectionStyle}">
|
|
108
|
+
<h2 style="${docTitleStyle}">Color</h2>
|
|
109
|
+
<div style="${docRowWrapStyle}">
|
|
110
|
+
<div style="${docCellStyle}">
|
|
111
|
+
<span style="${docLabelStyle}">neutral</span>
|
|
112
|
+
<CpBadge color="neutral" label="Badge" />
|
|
113
|
+
</div>
|
|
114
|
+
<div style="${docCellStyle}">
|
|
115
|
+
<span style="${docLabelStyle}">accent</span>
|
|
116
|
+
<CpBadge color="accent" label="Badge" />
|
|
117
|
+
</div>
|
|
118
|
+
<div style="${docCellStyle}">
|
|
119
|
+
<span style="${docLabelStyle}">error</span>
|
|
120
|
+
<CpBadge color="error" label="Badge" />
|
|
121
|
+
</div>
|
|
122
|
+
<div style="${docCellStyle}">
|
|
123
|
+
<span style="${docLabelStyle}">warning</span>
|
|
124
|
+
<CpBadge color="warning" label="Badge" />
|
|
125
|
+
</div>
|
|
126
|
+
<div style="${docCellStyle}">
|
|
127
|
+
<span style="${docLabelStyle}">success</span>
|
|
128
|
+
<CpBadge color="success" label="Badge" />
|
|
129
|
+
</div>
|
|
130
|
+
<div style="${docCellStyle}">
|
|
131
|
+
<span style="${docLabelStyle}">blue</span>
|
|
132
|
+
<CpBadge color="blue" label="Badge" />
|
|
133
|
+
</div>
|
|
134
|
+
<div style="${docCellStyle}">
|
|
135
|
+
<span style="${docLabelStyle}">pink</span>
|
|
136
|
+
<CpBadge color="pink" label="Badge" />
|
|
137
|
+
</div>
|
|
138
|
+
<div style="${docCellStyle}">
|
|
139
|
+
<span style="${docLabelStyle}">magenta</span>
|
|
140
|
+
<CpBadge color="magenta" label="Badge" />
|
|
141
|
+
</div>
|
|
142
|
+
<div style="${docCellStyle}">
|
|
143
|
+
<span style="${docLabelStyle}">yellow</span>
|
|
144
|
+
<CpBadge color="yellow" label="Badge" />
|
|
145
|
+
</div>
|
|
146
|
+
<div style="${docCellStyle}">
|
|
147
|
+
<span style="${docLabelStyle}">white</span>
|
|
148
|
+
<CpBadge color="white" label="Badge" />
|
|
149
|
+
</div>
|
|
150
|
+
</div>
|
|
151
|
+
</section>
|
|
152
|
+
|
|
153
|
+
<section style="${docSectionStyle}">
|
|
154
|
+
<h2 style="${docTitleStyle}">Style</h2>
|
|
155
|
+
<table style="border-collapse: collapse; width: 100%;">
|
|
156
|
+
<thead>
|
|
157
|
+
<tr>
|
|
158
|
+
<th style="text-align: left; padding: 8px 12px; font-size: 12px; color: #666; font-weight: 500;"></th>
|
|
159
|
+
<th v-for="color in ['neutral', 'accent', 'error', 'warning', 'success', 'blue', 'pink', 'magenta', 'yellow', 'white']" :key="color" style="text-align: center; padding: 8px 12px; font-size: 12px; color: #666; font-weight: 500;">{{ color }}</th>
|
|
160
|
+
</tr>
|
|
161
|
+
</thead>
|
|
162
|
+
<tbody>
|
|
163
|
+
<tr v-for="s in ['outline', 'soft', 'solid']" :key="s">
|
|
164
|
+
<td style="padding: 8px 12px; font-size: 12px; color: #666;">{{ s }}</td>
|
|
165
|
+
<td v-for="color in ['neutral', 'accent', 'error', 'warning', 'success', 'blue', 'pink', 'magenta', 'yellow', 'white']" :key="color" style="padding: 8px 12px; text-align: center;">
|
|
166
|
+
<CpBadge :color="color" :style="s" label="Badge" />
|
|
167
|
+
</td>
|
|
168
|
+
</tr>
|
|
169
|
+
</tbody>
|
|
170
|
+
</table>
|
|
171
|
+
</section>
|
|
172
|
+
|
|
173
|
+
<section style="${docSectionStyle}">
|
|
174
|
+
<h2 style="${docTitleStyle}">disabled</h2>
|
|
175
|
+
<div style="${docRowWrapStyle}">
|
|
176
|
+
<div style="${docCellStyle}">
|
|
177
|
+
<span style="${docLabelStyle}">false</span>
|
|
178
|
+
<CpBadge color="accent" label="Badge" />
|
|
179
|
+
</div>
|
|
180
|
+
<div style="${docCellStyle}">
|
|
181
|
+
<span style="${docLabelStyle}">true</span>
|
|
182
|
+
<CpBadge color="accent" :disabled="true" label="Badge" />
|
|
183
|
+
</div>
|
|
184
|
+
</div>
|
|
185
|
+
</section>
|
|
186
|
+
|
|
187
|
+
<section style="${docSectionStyle}">
|
|
188
|
+
<h2 style="${docTitleStyle}">is-square</h2>
|
|
189
|
+
<div style="${docRowWrapStyle}">
|
|
190
|
+
<div style="${docCellStyle}">
|
|
191
|
+
<span style="${docLabelStyle}">false</span>
|
|
192
|
+
<CpBadge color="accent" :is-square="false" label="Badge" />
|
|
193
|
+
</div>
|
|
194
|
+
<div style="${docCellStyle}">
|
|
195
|
+
<span style="${docLabelStyle}">true</span>
|
|
196
|
+
<CpBadge color="accent" :is-square="true" label="Badge" />
|
|
197
|
+
</div>
|
|
198
|
+
</div>
|
|
199
|
+
</section>
|
|
200
|
+
|
|
201
|
+
<section style="${docSectionStyle}">
|
|
202
|
+
<h2 style="${docTitleStyle}">leading-icon & trailing-icon</h2>
|
|
203
|
+
<div style="${docRowWrapStyle}">
|
|
204
|
+
<div style="${docCellStyle}">
|
|
205
|
+
<span style="${docLabelStyle}">default</span>
|
|
206
|
+
<CpBadge color="accent" label="Badge" />
|
|
207
|
+
</div>
|
|
208
|
+
<div style="${docCellStyle}">
|
|
209
|
+
<span style="${docLabelStyle}">leading</span>
|
|
210
|
+
<CpBadge color="accent" leading-icon="check" label="Badge" />
|
|
211
|
+
</div>
|
|
212
|
+
<div style="${docCellStyle}">
|
|
213
|
+
<span style="${docLabelStyle}">leading + trailing</span>
|
|
214
|
+
<CpBadge color="accent" leading-icon="check" trailing-icon="arrow-right" label="Badge" />
|
|
215
|
+
</div>
|
|
216
|
+
<div style="${docCellStyle}">
|
|
217
|
+
<span style="${docLabelStyle}">trailing</span>
|
|
218
|
+
<CpBadge color="accent" trailing-icon="arrow-right" label="Badge" />
|
|
219
|
+
</div>
|
|
220
|
+
<div style="${docCellStyle}">
|
|
221
|
+
<span style="${docLabelStyle}">without label</span>
|
|
222
|
+
<CpBadge color="accent" leading-icon="check" />
|
|
223
|
+
</div>
|
|
224
|
+
</div>
|
|
225
|
+
</section>
|
|
226
|
+
|
|
227
|
+
<section style="${docSectionStyle}">
|
|
228
|
+
<h2 style="${docTitleStyle}">has-close</h2>
|
|
229
|
+
<div style="${docRowWrapStyle}">
|
|
230
|
+
<div style="${docCellStyle}">
|
|
231
|
+
<span style="${docLabelStyle}">false</span>
|
|
232
|
+
<CpBadge color="accent" label="Badge" />
|
|
233
|
+
</div>
|
|
234
|
+
<div style="${docCellStyle}">
|
|
235
|
+
<span style="${docLabelStyle}">true</span>
|
|
236
|
+
<CpBadge color="accent" :has-close="true" label="Badge" />
|
|
237
|
+
</div>
|
|
238
|
+
<div style="${docCellStyle}">
|
|
239
|
+
<span style="${docLabelStyle}">with disabled close</span>
|
|
240
|
+
<CpBadge color="accent" :has-close="true" disabled label="Badge" />
|
|
241
|
+
</div>
|
|
242
|
+
</div>
|
|
243
|
+
</section>
|
|
244
|
+
</div>
|
|
245
|
+
</div>
|
|
246
|
+
`,
|
|
247
|
+
}),
|
|
248
|
+
parameters: {
|
|
249
|
+
controls: { disable: true },
|
|
250
|
+
docs: {
|
|
251
|
+
source: {
|
|
252
|
+
code: null,
|
|
253
|
+
},
|
|
254
|
+
},
|
|
255
|
+
},
|
|
256
|
+
}
|
|
257
|
+
|
|
61
258
|
export const Default: Story = {
|
|
62
259
|
args: {
|
|
63
260
|
color: 'neutral',
|
|
64
261
|
size: 'md',
|
|
65
|
-
|
|
262
|
+
style: 'outline',
|
|
66
263
|
isSquare: false,
|
|
67
|
-
|
|
68
|
-
|
|
264
|
+
hasClose: false,
|
|
265
|
+
disabled: false,
|
|
69
266
|
leadingIcon: '',
|
|
70
267
|
trailingIcon: '',
|
|
71
268
|
label: 'Badge',
|
|
@@ -146,79 +343,11 @@ export const IconOnly: Story = {
|
|
|
146
343
|
render: defaultRender,
|
|
147
344
|
}
|
|
148
345
|
|
|
149
|
-
export const IsStroked: Story = {
|
|
150
|
-
render: (args: Args) => ({
|
|
151
|
-
components: { CpBadge },
|
|
152
|
-
setup() {
|
|
153
|
-
return { args }
|
|
154
|
-
},
|
|
155
|
-
template: `
|
|
156
|
-
<div style="display: flex; gap: 8px; align-items: center;">
|
|
157
|
-
<CpBadge v-bind="args" is-stroked color="neutral" leading-icon="plus" trailing-icon="plus" label="Label" />
|
|
158
|
-
<CpBadge v-bind="args" is-stroked color="accent" leading-icon="plus" trailing-icon="plus" label="Label" />
|
|
159
|
-
<CpBadge v-bind="args" is-stroked color="error" leading-icon="plus" trailing-icon="plus" label="Label" />
|
|
160
|
-
<CpBadge v-bind="args" is-stroked color="warning" leading-icon="plus" trailing-icon="plus" label="Label" />
|
|
161
|
-
<CpBadge v-bind="args" is-stroked color="success" leading-icon="plus" trailing-icon="plus" label="Label" />
|
|
162
|
-
<CpBadge v-bind="args" is-stroked color="blue" leading-icon="plus" trailing-icon="plus" label="Label" />
|
|
163
|
-
<CpBadge v-bind="args" is-stroked color="pink" leading-icon="plus" trailing-icon="plus" label="Label" />
|
|
164
|
-
<CpBadge v-bind="args" is-stroked color="magenta" leading-icon="plus" trailing-icon="plus" label="Label" />
|
|
165
|
-
<CpBadge v-bind="args" is-stroked color="yellow" leading-icon="plus" trailing-icon="plus" label="Label" />
|
|
166
|
-
<CpBadge v-bind="args" is-stroked color="white" leading-icon="plus" trailing-icon="plus" label="Label" />
|
|
167
|
-
</div>
|
|
168
|
-
`,
|
|
169
|
-
}),
|
|
170
|
-
}
|
|
171
|
-
|
|
172
|
-
export const IsDashed: Story = {
|
|
173
|
-
render: (args: Args) => ({
|
|
174
|
-
components: { CpBadge },
|
|
175
|
-
setup() {
|
|
176
|
-
return { args }
|
|
177
|
-
},
|
|
178
|
-
template: `
|
|
179
|
-
<div style="display: flex; gap: 8px; align-items: center;">
|
|
180
|
-
<CpBadge v-bind="args" is-dashed is-stroked color="neutral" leading-icon="plus" trailing-icon="plus" label="Label" />
|
|
181
|
-
<CpBadge v-bind="args" is-dashed is-stroked color="accent" leading-icon="plus" trailing-icon="plus" label="Label" />
|
|
182
|
-
<CpBadge v-bind="args" is-dashed is-stroked color="error" leading-icon="plus" trailing-icon="plus" label="Label" />
|
|
183
|
-
<CpBadge v-bind="args" is-dashed is-stroked color="warning" leading-icon="plus" trailing-icon="plus" label="Label" />
|
|
184
|
-
<CpBadge v-bind="args" is-dashed is-stroked color="success" leading-icon="plus" trailing-icon="plus" label="Label" />
|
|
185
|
-
<CpBadge v-bind="args" is-dashed is-stroked color="blue" leading-icon="plus" trailing-icon="plus" label="Label" />
|
|
186
|
-
<CpBadge v-bind="args" is-dashed is-stroked color="pink" leading-icon="plus" trailing-icon="plus" label="Label" />
|
|
187
|
-
<CpBadge v-bind="args" is-dashed is-stroked color="magenta" leading-icon="plus" trailing-icon="plus" label="Label" />
|
|
188
|
-
<CpBadge v-bind="args" is-dashed is-stroked color="yellow" leading-icon="plus" trailing-icon="plus" label="Label" />
|
|
189
|
-
<CpBadge v-bind="args" is-dashed is-stroked color="white" leading-icon="plus" trailing-icon="plus" label="Label" />
|
|
190
|
-
</div>
|
|
191
|
-
`,
|
|
192
|
-
}),
|
|
193
|
-
}
|
|
194
|
-
|
|
195
346
|
export const IsSquare: Story = {
|
|
196
347
|
args: { ...Default.args, isSquare: true, label: 'Square' },
|
|
197
348
|
render: defaultRender,
|
|
198
349
|
}
|
|
199
350
|
|
|
200
|
-
export const IsClearable: Story = {
|
|
201
|
-
args: { ...Default.args, isClearable: true, label: 'Clearable' },
|
|
202
|
-
render: defaultRender,
|
|
203
|
-
}
|
|
204
|
-
|
|
205
|
-
export const IsDisabled: Story = {
|
|
206
|
-
args: { ...Default.args, isDisabled: true, label: 'Disabled' },
|
|
207
|
-
render: defaultRender,
|
|
208
|
-
}
|
|
209
|
-
|
|
210
|
-
export const IsDisabledWithIcon: Story = {
|
|
211
|
-
args: {
|
|
212
|
-
...Default.args,
|
|
213
|
-
isDisabled: true,
|
|
214
|
-
label: 'Disabled',
|
|
215
|
-
color: 'red',
|
|
216
|
-
leadingIcon: 'check',
|
|
217
|
-
trailingIcon: 'arrow-right',
|
|
218
|
-
},
|
|
219
|
-
render: defaultRender,
|
|
220
|
-
}
|
|
221
|
-
|
|
222
351
|
export const WithSlot: Story = {
|
|
223
352
|
render: (args: Args) => ({
|
|
224
353
|
components: { CpBadge },
|
|
@@ -240,27 +369,3 @@ export const WithSlot: Story = {
|
|
|
240
369
|
`,
|
|
241
370
|
}),
|
|
242
371
|
}
|
|
243
|
-
|
|
244
|
-
export const FullWidth: Story = {
|
|
245
|
-
render: (args: Args) => ({
|
|
246
|
-
components: { CpBadge },
|
|
247
|
-
setup() {
|
|
248
|
-
return { args }
|
|
249
|
-
},
|
|
250
|
-
template: `
|
|
251
|
-
<div style="width: 300px;">
|
|
252
|
-
<CpBadge v-bind="args" style="width: 100%;">
|
|
253
|
-
<template #leading-icon>
|
|
254
|
-
<span style="font-size: 16px; margin-right: 4px;">🌟</span>
|
|
255
|
-
</template>
|
|
256
|
-
<div>
|
|
257
|
-
Label
|
|
258
|
-
</div>
|
|
259
|
-
<template #trailing-icon>
|
|
260
|
-
<span style="font-size: 16px; margin-left: 4px;">🚀</span>
|
|
261
|
-
</template>
|
|
262
|
-
</CpBadge>
|
|
263
|
-
</div>
|
|
264
|
-
`,
|
|
265
|
-
}),
|
|
266
|
-
}
|