vanilla-vue-ui 0.0.22 → 0.0.23
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.
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
// Replace vue3 with vue if you are using Storybook for Vue 2
|
|
2
|
+
import type { Meta, StoryObj } from '@storybook/vue3';
|
|
3
|
+
import WSegmentSelector from './WSegmentSelector.vue';
|
|
4
|
+
import Button from '../button/WButton.vue'
|
|
5
|
+
import { ref, watch } from 'vue';
|
|
6
|
+
|
|
7
|
+
type WSegmentSelectorProps = InstanceType<typeof WSegmentSelector>['$props']
|
|
8
|
+
|
|
9
|
+
const meta: Meta<typeof WSegmentSelector> = {
|
|
10
|
+
component: WSegmentSelector,
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
export default meta;
|
|
14
|
+
type Story = StoryObj<typeof WSegmentSelector>;
|
|
15
|
+
|
|
16
|
+
/*
|
|
17
|
+
*👇 Render functions are a framework specific feature to allow you control on how the component renders.
|
|
18
|
+
* See https://storybook.js.org/docs/api/csf
|
|
19
|
+
* to learn how to use render functions.
|
|
20
|
+
*/
|
|
21
|
+
|
|
22
|
+
export const Primary: Story = {
|
|
23
|
+
render: (args: WSegmentSelectorProps) => ({
|
|
24
|
+
setup() {
|
|
25
|
+
const value = ref(args.modelValue)
|
|
26
|
+
|
|
27
|
+
return {
|
|
28
|
+
args,
|
|
29
|
+
value,
|
|
30
|
+
}
|
|
31
|
+
},
|
|
32
|
+
components: { WSegmentSelector, Button },
|
|
33
|
+
template: `
|
|
34
|
+
<div class="space-y-4">
|
|
35
|
+
<WSegmentSelector
|
|
36
|
+
v-bind="args"
|
|
37
|
+
v-model="value"
|
|
38
|
+
/>
|
|
39
|
+
|
|
40
|
+
<div class="text-sm">
|
|
41
|
+
selected: {{ value }}
|
|
42
|
+
</div>
|
|
43
|
+
</div>
|
|
44
|
+
`,
|
|
45
|
+
}),
|
|
46
|
+
args: {
|
|
47
|
+
modelValue: 'life',
|
|
48
|
+
options: [
|
|
49
|
+
{ label: '暮らし', value: 'life' },
|
|
50
|
+
{ label: 'プログラミング', value: 'programming' },
|
|
51
|
+
],
|
|
52
|
+
},
|
|
53
|
+
};
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div
|
|
3
|
+
class="inline-flex items-center rounded-full bg-white p-1 border-4"
|
|
4
|
+
>
|
|
5
|
+
<button
|
|
6
|
+
v-for="option in options"
|
|
7
|
+
:key="option.value"
|
|
8
|
+
@click="update(option.value)"
|
|
9
|
+
:class="[
|
|
10
|
+
'px-5 py-2 rounded-full text-sm font-bold transition-all duration-200',
|
|
11
|
+
modelValue === option.value
|
|
12
|
+
? activeClass
|
|
13
|
+
: inactiveClass
|
|
14
|
+
]"
|
|
15
|
+
>
|
|
16
|
+
{{ option.label }}
|
|
17
|
+
</button>
|
|
18
|
+
</div>
|
|
19
|
+
</template>
|
|
20
|
+
|
|
21
|
+
<script setup lang="ts">
|
|
22
|
+
type Option = {
|
|
23
|
+
label: string
|
|
24
|
+
value: string
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
const props = withDefaults(defineProps<{
|
|
28
|
+
modelValue: string
|
|
29
|
+
options: Option[]
|
|
30
|
+
activeClass?: string
|
|
31
|
+
inactiveClass?: string
|
|
32
|
+
}>(), {
|
|
33
|
+
activeClass: 'bg-orange-200 text-black',
|
|
34
|
+
inactiveClass: 'text-black hover:bg-black/10',
|
|
35
|
+
})
|
|
36
|
+
|
|
37
|
+
const emit = defineEmits<{
|
|
38
|
+
(e: 'update:modelValue', value: string): void
|
|
39
|
+
}>()
|
|
40
|
+
|
|
41
|
+
const update = (value: string) => {
|
|
42
|
+
emit('update:modelValue', value)
|
|
43
|
+
}
|
|
44
|
+
</script>
|
package/package.json
CHANGED