vanilla-vue-ui 0.0.21 → 0.0.22
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.
|
@@ -27,3 +27,16 @@ export const Primary: Story = {
|
|
|
27
27
|
`,
|
|
28
28
|
}),
|
|
29
29
|
};
|
|
30
|
+
|
|
31
|
+
export const None: Story = {
|
|
32
|
+
render: () => ({
|
|
33
|
+
components: { WHorizontalScroll },
|
|
34
|
+
template: `
|
|
35
|
+
<WHorizontalScroll :scrollbar-width="'none'">
|
|
36
|
+
<img src="/carousel-0.webp" alt="Slide 1">
|
|
37
|
+
<img src="/carousel-1.webp" alt="Slide 2">
|
|
38
|
+
<img src="/carousel-2.webp" alt="Slide 3">
|
|
39
|
+
</WHorizontalScroll>
|
|
40
|
+
`,
|
|
41
|
+
}),
|
|
42
|
+
};
|
package/package.json
CHANGED
|
@@ -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 WVerticalHorizontalText from './WVerticalHorizontalText.vue';
|
|
4
|
+
import {
|
|
5
|
+
HomeIcon,
|
|
6
|
+
BellAlertIcon,
|
|
7
|
+
ChatBubbleBottomCenterTextIcon,
|
|
8
|
+
Cog6ToothIcon,
|
|
9
|
+
CurrencyYenIcon,
|
|
10
|
+
CubeIcon,
|
|
11
|
+
BookOpenIcon,
|
|
12
|
+
MinusIcon
|
|
13
|
+
} from '@heroicons/vue/24/outline'
|
|
14
|
+
|
|
15
|
+
type WVerticalHorizontalTextProps = InstanceType<typeof WVerticalHorizontalText>['$props']
|
|
16
|
+
|
|
17
|
+
const meta: Meta<typeof WVerticalHorizontalText> = {
|
|
18
|
+
component: WVerticalHorizontalText,
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
export default meta;
|
|
22
|
+
type Story = StoryObj<typeof WVerticalHorizontalText>;
|
|
23
|
+
|
|
24
|
+
/*
|
|
25
|
+
*👇 Render functions are a framework specific feature to allow you control on how the component renders.
|
|
26
|
+
* See https://storybook.js.org/docs/api/csf
|
|
27
|
+
* to learn how to use render functions.
|
|
28
|
+
*/
|
|
29
|
+
export const Horizontal: Story = {
|
|
30
|
+
render: (args: WVerticalHorizontalTextProps) => ({
|
|
31
|
+
setup() {
|
|
32
|
+
return {
|
|
33
|
+
...args
|
|
34
|
+
}
|
|
35
|
+
},
|
|
36
|
+
components: { WVerticalHorizontalText },
|
|
37
|
+
template: '<WVerticalHorizontalText :text="text" :fontSize="fontSize" :isVertical="isVertical"></WVerticalHorizontalText>',
|
|
38
|
+
}),
|
|
39
|
+
args: {
|
|
40
|
+
text: 'Horizontal',
|
|
41
|
+
fontSize: 5,
|
|
42
|
+
isVertical: false,
|
|
43
|
+
}
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
export const Vertical: Story = {
|
|
47
|
+
render: (args: WVerticalHorizontalTextProps) => ({
|
|
48
|
+
setup() {
|
|
49
|
+
return {
|
|
50
|
+
...args
|
|
51
|
+
}
|
|
52
|
+
},
|
|
53
|
+
components: { WVerticalHorizontalText },
|
|
54
|
+
template: '<WVerticalHorizontalText :text="text" :fontSize="fontSize" :isVertical="isVertical"></WVerticalHorizontalText>',
|
|
55
|
+
}),
|
|
56
|
+
args: {
|
|
57
|
+
text: 'Vertical',
|
|
58
|
+
fontSize: 5,
|
|
59
|
+
isVertical: true,
|
|
60
|
+
}
|
|
61
|
+
};
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div>
|
|
3
|
+
<div
|
|
4
|
+
v-if="isVertical"
|
|
5
|
+
class="vertical-container"
|
|
6
|
+
>
|
|
7
|
+
<div
|
|
8
|
+
class="vertical-column"
|
|
9
|
+
:style="verticalColumnStyle"
|
|
10
|
+
>
|
|
11
|
+
<span
|
|
12
|
+
v-for="(char, index) in resultArray"
|
|
13
|
+
:key="index"
|
|
14
|
+
class="vertical-char"
|
|
15
|
+
>
|
|
16
|
+
{{ char }}
|
|
17
|
+
</span>
|
|
18
|
+
</div>
|
|
19
|
+
</div>
|
|
20
|
+
|
|
21
|
+
<div
|
|
22
|
+
v-else
|
|
23
|
+
class="horizontal-container"
|
|
24
|
+
>
|
|
25
|
+
<div class="horizontal-scroll">
|
|
26
|
+
<p :style="computedStyle">
|
|
27
|
+
{{ text }}
|
|
28
|
+
</p>
|
|
29
|
+
</div>
|
|
30
|
+
</div>
|
|
31
|
+
</div>
|
|
32
|
+
</template>
|
|
33
|
+
|
|
34
|
+
<script setup lang="ts">
|
|
35
|
+
import { defineProps, computed } from 'vue'
|
|
36
|
+
|
|
37
|
+
const props = defineProps({
|
|
38
|
+
text: {
|
|
39
|
+
type: String,
|
|
40
|
+
required: true,
|
|
41
|
+
},
|
|
42
|
+
fontSize: {
|
|
43
|
+
type: Number,
|
|
44
|
+
default: 4,
|
|
45
|
+
},
|
|
46
|
+
isVertical: {
|
|
47
|
+
type: Boolean,
|
|
48
|
+
default: false,
|
|
49
|
+
},
|
|
50
|
+
})
|
|
51
|
+
|
|
52
|
+
const resultArray = computed(() => props.text.split(''))
|
|
53
|
+
|
|
54
|
+
const verticalColumnStyle = computed(() => ({
|
|
55
|
+
fontSize: `${props.fontSize}rem`,
|
|
56
|
+
lineHeight: '1.2',
|
|
57
|
+
}))
|
|
58
|
+
|
|
59
|
+
const computedStyle = computed(() => ({
|
|
60
|
+
fontSize: `${props.fontSize}rem`,
|
|
61
|
+
lineHeight: `${props.fontSize + 0.5}rem`,
|
|
62
|
+
}))
|
|
63
|
+
</script>
|
|
64
|
+
|
|
65
|
+
<style scoped>
|
|
66
|
+
.serif__app--result p {
|
|
67
|
+
line-height: 3.5rem;
|
|
68
|
+
font-size: 3rem;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.vertical-container {
|
|
72
|
+
writing-mode: initial !important;
|
|
73
|
+
display: flex; /* 中央寄せのために flex 化 */
|
|
74
|
+
justify-content: center; /* 左右中央 */
|
|
75
|
+
align-items: center; /* 上下中央 */
|
|
76
|
+
width: 100%; /* 全幅に広げる */
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.vertical-column {
|
|
80
|
+
display: flex;
|
|
81
|
+
flex-direction: column;
|
|
82
|
+
align-items: center;
|
|
83
|
+
width: 1em;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.vertical-char {
|
|
87
|
+
font-size: inherit;
|
|
88
|
+
line-height: 1.2;
|
|
89
|
+
display: block;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.horizontal-container {
|
|
93
|
+
width: 100%;
|
|
94
|
+
overflow: hidden; /* 親は隠すだけ。スクロールは子が担当 */
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.horizontal-scroll {
|
|
98
|
+
width: 100%;
|
|
99
|
+
overflow-x: auto;
|
|
100
|
+
overflow-y: hidden;
|
|
101
|
+
white-space: nowrap;
|
|
102
|
+
|
|
103
|
+
scrollbar-width: thin;
|
|
104
|
+
}
|
|
105
|
+
</style>
|