vanilla-vue-ui 0.0.0 → 0.0.1
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,17 @@
|
|
|
1
|
+
import { describe, it, expect } from 'vitest'
|
|
2
|
+
import { mount } from '@vue/test-utils'
|
|
3
|
+
import Button from './WButton.vue'; // コンポーネントのパスを適切に設定してください
|
|
4
|
+
|
|
5
|
+
describe('PrimaryButton', () => {
|
|
6
|
+
it('renders correctly', () => {
|
|
7
|
+
const wrapper = mount(Button, {
|
|
8
|
+
slots: {
|
|
9
|
+
default: 'Click Me'
|
|
10
|
+
}
|
|
11
|
+
});
|
|
12
|
+
|
|
13
|
+
expect(wrapper.html()).toContain('Click Me');
|
|
14
|
+
expect(wrapper.classes()).toContain('bg-gradient-to-r');
|
|
15
|
+
expect(wrapper.classes()).toContain('from-primary');
|
|
16
|
+
});
|
|
17
|
+
});
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
// Replace vue3 with vue if you are using Storybook for Vue 2
|
|
2
|
+
import type { Meta, StoryObj } from '@storybook/vue3';
|
|
3
|
+
import WButton from './WButton.vue';
|
|
4
|
+
|
|
5
|
+
type WButtonProps = InstanceType<typeof WButton>['$props']
|
|
6
|
+
|
|
7
|
+
const meta: Meta<typeof WButton> = {
|
|
8
|
+
component: WButton,
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
export default meta;
|
|
12
|
+
type Story = StoryObj<typeof WButton>;
|
|
13
|
+
|
|
14
|
+
/*
|
|
15
|
+
*👇 Render functions are a framework specific feature to allow you control on how the component renders.
|
|
16
|
+
* See https://storybook.js.org/docs/api/csf
|
|
17
|
+
* to learn how to use render functions.
|
|
18
|
+
*/
|
|
19
|
+
export const Primary: Story = {
|
|
20
|
+
render: (args: WButtonProps) => ({
|
|
21
|
+
setup() {
|
|
22
|
+
return {
|
|
23
|
+
...args
|
|
24
|
+
}
|
|
25
|
+
},
|
|
26
|
+
components: { WButton },
|
|
27
|
+
template: `
|
|
28
|
+
<div><w-button :classes="classes">OK</w-button></div>
|
|
29
|
+
<div><w-button :classes="classes" href="/">OK</w-button></div>
|
|
30
|
+
`,
|
|
31
|
+
}),
|
|
32
|
+
args: {
|
|
33
|
+
classes: {
|
|
34
|
+
color: 'text-onSurface dark:text-onSurface-dark',
|
|
35
|
+
backgroundColor: '',
|
|
36
|
+
border: 'border border-outline-100 dark:border-outline-dark'
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
export const Block: Story = {
|
|
42
|
+
render: () => ({
|
|
43
|
+
components: { WButton },
|
|
44
|
+
template: '<w-button block>OK</w-button>',
|
|
45
|
+
}),
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
export const Size: Story = {
|
|
49
|
+
render: () => ({
|
|
50
|
+
components: { WButton },
|
|
51
|
+
template: `
|
|
52
|
+
<div><w-button size="xs">xs</w-button></div>
|
|
53
|
+
<div><w-button size="sm">sm</w-button></div>
|
|
54
|
+
<div><w-button>OK</w-button></div>
|
|
55
|
+
<div><w-button size="lg">lg</w-button></div>
|
|
56
|
+
<div><w-button size="2xl">2xl</w-button></div>
|
|
57
|
+
<div><w-button size="3xl">3xl</w-button></div>
|
|
58
|
+
<div><w-button size="6xl">6xl</w-button></div>
|
|
59
|
+
`,
|
|
60
|
+
}),
|
|
61
|
+
};
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<button
|
|
3
|
+
v-if="!href"
|
|
4
|
+
:disabled="disabled"
|
|
5
|
+
:class="[
|
|
6
|
+
mergedClasses.base,
|
|
7
|
+
mergedClasses.border,
|
|
8
|
+
mergedClasses.rounded,
|
|
9
|
+
mergedClasses.spacing,
|
|
10
|
+
mergedClasses.color,
|
|
11
|
+
mergedClasses.backgroundColor,
|
|
12
|
+
mergedClasses.size,
|
|
13
|
+
textSize,
|
|
14
|
+
{ 'w-full': block, 'opacity-30': disabled }
|
|
15
|
+
]"
|
|
16
|
+
>
|
|
17
|
+
<slot/>
|
|
18
|
+
</button>
|
|
19
|
+
|
|
20
|
+
<a
|
|
21
|
+
v-else
|
|
22
|
+
:href="href"
|
|
23
|
+
:class="[
|
|
24
|
+
mergedClasses.base,
|
|
25
|
+
mergedClasses.border,
|
|
26
|
+
mergedClasses.rounded,
|
|
27
|
+
mergedClasses.spacing,
|
|
28
|
+
mergedClasses.color,
|
|
29
|
+
mergedClasses.size,
|
|
30
|
+
mergedClasses.backgroundColor,
|
|
31
|
+
textSize,
|
|
32
|
+
{ 'w-full text-center': block }
|
|
33
|
+
]"
|
|
34
|
+
class="inline-block"
|
|
35
|
+
>
|
|
36
|
+
<slot/>
|
|
37
|
+
</a>
|
|
38
|
+
</template>
|
|
39
|
+
|
|
40
|
+
<script setup lang="ts">
|
|
41
|
+
import { defineProps, ref, type PropType } from 'vue';
|
|
42
|
+
import type { ButtonSize } from './ButtonSize'
|
|
43
|
+
import type { ClassObject } from '../../types/ClassObject';
|
|
44
|
+
import { deepMergeClassObject } from '../../util';
|
|
45
|
+
|
|
46
|
+
const props = defineProps({
|
|
47
|
+
block: {
|
|
48
|
+
type: Boolean,
|
|
49
|
+
default: false
|
|
50
|
+
},
|
|
51
|
+
href: {
|
|
52
|
+
type: String,
|
|
53
|
+
},
|
|
54
|
+
disabled: {
|
|
55
|
+
type: Boolean,
|
|
56
|
+
default: false
|
|
57
|
+
},
|
|
58
|
+
size: {
|
|
59
|
+
type: String as PropType<ButtonSize>,
|
|
60
|
+
default: 'base',
|
|
61
|
+
},
|
|
62
|
+
classes: {
|
|
63
|
+
type: Object as PropType<ClassObject>,
|
|
64
|
+
}
|
|
65
|
+
})
|
|
66
|
+
|
|
67
|
+
const defaultClasses: ClassObject = {
|
|
68
|
+
base: 'font-bold',
|
|
69
|
+
spacing: 'py-2 px-4',
|
|
70
|
+
backgroundColor: 'bg-white',
|
|
71
|
+
rounded: 'rounded-full',
|
|
72
|
+
color: 'hover:bg-gray-50',
|
|
73
|
+
border: 'border border-gray-200',
|
|
74
|
+
size: '',
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
// props.classesが渡されていない場合、defaultClassesを使用する
|
|
78
|
+
const mergedClasses = props.classes ? deepMergeClassObject(defaultClasses, props.classes) : defaultClasses;
|
|
79
|
+
|
|
80
|
+
const textSize = ref('text-' + props.size)
|
|
81
|
+
</script>
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
// Replace vue3 with vue if you are using Storybook for Vue 2
|
|
2
|
+
import type { Meta, StoryObj } from '@storybook/vue3';
|
|
3
|
+
import WTooltip from './WTooltip.vue';
|
|
4
|
+
import Button from '../button/WButton.vue'
|
|
5
|
+
import { ref, watch } from 'vue';
|
|
6
|
+
|
|
7
|
+
type WTooltipProps = InstanceType<typeof WTooltip>['$props']
|
|
8
|
+
|
|
9
|
+
const meta: Meta<typeof WTooltip> = {
|
|
10
|
+
component: WTooltip,
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
export default meta;
|
|
14
|
+
type Story = StoryObj<typeof WTooltip>;
|
|
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: WTooltipProps) => ({
|
|
24
|
+
setup() {
|
|
25
|
+
return {
|
|
26
|
+
...args,
|
|
27
|
+
};
|
|
28
|
+
},
|
|
29
|
+
components: { WTooltip, Button },
|
|
30
|
+
template: `
|
|
31
|
+
<w-tooltip hoverText="ホバー" reactiveText="text" :isReact="isReact">
|
|
32
|
+
<Button>Text</Button>
|
|
33
|
+
</w-tooltip>
|
|
34
|
+
`,
|
|
35
|
+
}),
|
|
36
|
+
args: {
|
|
37
|
+
isReact: false
|
|
38
|
+
},
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
export const isReact: Story = {
|
|
42
|
+
render: (args) => ({
|
|
43
|
+
setup() {
|
|
44
|
+
// isReact を ref 化
|
|
45
|
+
const isReact = ref(args.isReact);
|
|
46
|
+
|
|
47
|
+
watch(() => args.isReact, (val) => {
|
|
48
|
+
isReact.value = val;
|
|
49
|
+
});
|
|
50
|
+
|
|
51
|
+
return {
|
|
52
|
+
isReact,
|
|
53
|
+
};
|
|
54
|
+
},
|
|
55
|
+
components: { WTooltip, Button },
|
|
56
|
+
template: `
|
|
57
|
+
<w-tooltip
|
|
58
|
+
reactiveText="Clicked."
|
|
59
|
+
:isReact="isReact"
|
|
60
|
+
>
|
|
61
|
+
<Button @click="isReact = true">Text</Button>
|
|
62
|
+
</w-tooltip>
|
|
63
|
+
`,
|
|
64
|
+
}),
|
|
65
|
+
args: {
|
|
66
|
+
isReact: false,
|
|
67
|
+
},
|
|
68
|
+
};
|
|
69
|
+
|
|
70
|
+
export const init: Story = {
|
|
71
|
+
render: (args: WTooltipProps) => ({
|
|
72
|
+
setup() {
|
|
73
|
+
return {
|
|
74
|
+
...args,
|
|
75
|
+
};
|
|
76
|
+
},
|
|
77
|
+
components: { WTooltip, Button },
|
|
78
|
+
template: `
|
|
79
|
+
<w-tooltip hoverText="ホバー" :showHoverOnMount="true">
|
|
80
|
+
<Button>Text</Button>
|
|
81
|
+
</w-tooltip>
|
|
82
|
+
`,
|
|
83
|
+
}),
|
|
84
|
+
args: {
|
|
85
|
+
isReact: false
|
|
86
|
+
},
|
|
87
|
+
};
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<span class="relative group">
|
|
3
|
+
<div @mouseenter="showTooltip" @mouseleave="hideTooltip">
|
|
4
|
+
<slot />
|
|
5
|
+
</div>
|
|
6
|
+
<span v-show="isReact" class="absolute z-50 whitespace-nowrap -bottom-12 left-1/2 -translate-x-1/2 bg-gray-600 py-1 px-2 text-white rounded">{{ reactiveText }}</span>
|
|
7
|
+
<span v-show="!isReact && isShowTooltip" class="absolute z-50 whitespace-nowrap -bottom-12 left-1/2 -translate-x-1/2 bg-gray-600 py-1 px-2 text-white rounded">{{ hoverText }}</span>
|
|
8
|
+
</span>
|
|
9
|
+
</template>
|
|
10
|
+
|
|
11
|
+
<script setup lang="ts">
|
|
12
|
+
import { ref, defineProps, defineEmits, watch, type PropType, onMounted } from 'vue';
|
|
13
|
+
|
|
14
|
+
const isShowTooltip = ref(false)
|
|
15
|
+
|
|
16
|
+
const props = defineProps({
|
|
17
|
+
reactiveText: {
|
|
18
|
+
type: String,
|
|
19
|
+
default: ''
|
|
20
|
+
},
|
|
21
|
+
hoverText: {
|
|
22
|
+
type: String,
|
|
23
|
+
required: false,
|
|
24
|
+
default: ''
|
|
25
|
+
},
|
|
26
|
+
isReact: {
|
|
27
|
+
type: Boolean,
|
|
28
|
+
default: false
|
|
29
|
+
},
|
|
30
|
+
showHoverOnMount: {
|
|
31
|
+
type: Boolean as PropType<boolean>,
|
|
32
|
+
default: false,
|
|
33
|
+
}
|
|
34
|
+
})
|
|
35
|
+
|
|
36
|
+
const emit = defineEmits(['update:isReact'])
|
|
37
|
+
|
|
38
|
+
// currentStep の変更を監視
|
|
39
|
+
watch(
|
|
40
|
+
() => props.isReact, (newValue) => {
|
|
41
|
+
if (newValue === true) {
|
|
42
|
+
setTimeout(() => { emit('update:isReact', false) }, 1000)
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
)
|
|
46
|
+
|
|
47
|
+
onMounted(() => {
|
|
48
|
+
if (props.showHoverOnMount) {
|
|
49
|
+
showTooltip()
|
|
50
|
+
setTimeout(() => { hideTooltip() }, 3000)
|
|
51
|
+
}
|
|
52
|
+
})
|
|
53
|
+
|
|
54
|
+
function showTooltip() {
|
|
55
|
+
if (props.hoverText.length) {
|
|
56
|
+
isShowTooltip.value = true
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
function hideTooltip() {
|
|
61
|
+
isShowTooltip.value = false
|
|
62
|
+
}
|
|
63
|
+
</script>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vanilla-vue-ui",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.1",
|
|
4
4
|
"private": false,
|
|
5
5
|
"type": "module",
|
|
6
6
|
"files": [
|
|
@@ -31,39 +31,53 @@
|
|
|
31
31
|
"copy": "npm run copy-template && npm run copy-basic && npm run copy-custom && npm run copy-icon && npm run copy-types && npm run copy-util"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"vue": "^
|
|
34
|
+
"@headlessui/vue": "^1.7.17",
|
|
35
|
+
"@heroicons/vue": "^2.1.1",
|
|
36
|
+
"dayjs": "^1.11.11",
|
|
37
|
+
"japanjs": "^0.1.6",
|
|
38
|
+
"konva": "^9.3.15",
|
|
39
|
+
"pinia": "^2.1.7",
|
|
40
|
+
"vue": "^3.3.11",
|
|
41
|
+
"vue-konva": "^3.1.0",
|
|
42
|
+
"vue-router": "^4.3.2"
|
|
35
43
|
},
|
|
36
44
|
"devDependencies": {
|
|
37
|
-
"@
|
|
38
|
-
"@storybook/addon-essentials": "^
|
|
39
|
-
"@storybook/addon-interactions": "^
|
|
40
|
-
"@storybook/addon-
|
|
41
|
-
"@storybook/
|
|
42
|
-
"@storybook/
|
|
43
|
-
"@storybook/
|
|
44
|
-
"@storybook/vue3
|
|
45
|
+
"@rushstack/eslint-patch": "^1.3.3",
|
|
46
|
+
"@storybook/addon-essentials": "^7.6.10",
|
|
47
|
+
"@storybook/addon-interactions": "^7.6.10",
|
|
48
|
+
"@storybook/addon-links": "^7.6.10",
|
|
49
|
+
"@storybook/addon-themes": "^7.6.20",
|
|
50
|
+
"@storybook/blocks": "^7.6.10",
|
|
51
|
+
"@storybook/test": "^7.6.10",
|
|
52
|
+
"@storybook/vue3": "^7.6.10",
|
|
53
|
+
"@storybook/vue3-vite": "^7.6.10",
|
|
54
|
+
"@tsconfig/node18": "^18.2.2",
|
|
45
55
|
"@tsconfig/node22": "^22.0.0",
|
|
46
|
-
"@types/jsdom": "^21.1.
|
|
47
|
-
"@types/node": "^
|
|
48
|
-
"@vitejs/plugin-vue": "^5.2
|
|
49
|
-
"@
|
|
50
|
-
"@vue/eslint-config-
|
|
51
|
-
"@vue/
|
|
52
|
-
"@vue/
|
|
53
|
-
"
|
|
56
|
+
"@types/jsdom": "^21.1.6",
|
|
57
|
+
"@types/node": "^18.19.3",
|
|
58
|
+
"@vitejs/plugin-vue": "^4.5.2",
|
|
59
|
+
"@vue/eslint-config-prettier": "^8.0.0",
|
|
60
|
+
"@vue/eslint-config-typescript": "^12.0.0",
|
|
61
|
+
"@vue/test-utils": "^2.4.3",
|
|
62
|
+
"@vue/tsconfig": "^0.5.0",
|
|
63
|
+
"autoprefixer": "^10.4.17",
|
|
54
64
|
"copyfiles": "^2.4.1",
|
|
55
|
-
"eslint": "^
|
|
56
|
-
"eslint-plugin-storybook": "^0.
|
|
57
|
-
"eslint-plugin-vue": "^9.
|
|
58
|
-
"jsdom": "^
|
|
59
|
-
"npm-run-all2": "^
|
|
60
|
-
"
|
|
61
|
-
"
|
|
62
|
-
"
|
|
63
|
-
"
|
|
64
|
-
"
|
|
65
|
-
"
|
|
66
|
-
"
|
|
65
|
+
"eslint": "^8.57.0",
|
|
66
|
+
"eslint-plugin-storybook": "^0.6.15",
|
|
67
|
+
"eslint-plugin-vue": "^9.27.0",
|
|
68
|
+
"jsdom": "^23.0.1",
|
|
69
|
+
"npm-run-all2": "^6.1.1",
|
|
70
|
+
"postcss": "^8.4.33",
|
|
71
|
+
"prettier": "^3.0.3",
|
|
72
|
+
"react": "^18.2.0",
|
|
73
|
+
"react-dom": "^18.2.0",
|
|
74
|
+
"storybook": "^7.6.10",
|
|
75
|
+
"tailwindcss": "^3.4.1",
|
|
76
|
+
"typescript": "~5.3.0",
|
|
77
|
+
"vite": "^5.0.10",
|
|
78
|
+
"vite-plugin-vue-devtools": "^7.7.2",
|
|
79
|
+
"vitest": "^1.0.4",
|
|
80
|
+
"vue-tsc": "^1.8.25"
|
|
67
81
|
},
|
|
68
82
|
"eslintConfig": {
|
|
69
83
|
"extends": [
|