vanilla-vue-ui 0.0.13 → 0.0.14
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,29 @@
|
|
|
1
|
+
// Replace vue3 with vue if you are using Storybook for Vue 2
|
|
2
|
+
import type { Meta, StoryObj } from '@storybook/vue3';
|
|
3
|
+
|
|
4
|
+
import WHorizontalScroll from './WHorizontalScroll.vue';
|
|
5
|
+
|
|
6
|
+
const meta: Meta<typeof WHorizontalScroll> = {
|
|
7
|
+
component: WHorizontalScroll,
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
export default meta;
|
|
11
|
+
type Story = StoryObj<typeof WHorizontalScroll>;
|
|
12
|
+
|
|
13
|
+
/*
|
|
14
|
+
*👇 Render functions are a framework specific feature to allow you control on how the component renders.
|
|
15
|
+
* See https://storybook.js.org/docs/api/csf
|
|
16
|
+
* to learn how to use render functions.
|
|
17
|
+
*/
|
|
18
|
+
export const Primary: Story = {
|
|
19
|
+
render: () => ({
|
|
20
|
+
components: { WHorizontalScroll },
|
|
21
|
+
template: `
|
|
22
|
+
<WHorizontalScroll>
|
|
23
|
+
<img src="/carousel-0.webp" alt="Slide 1">
|
|
24
|
+
<img src="/carousel-1.webp" alt="Slide 2">
|
|
25
|
+
<img src="/carousel-2.webp" alt="Slide 3">
|
|
26
|
+
</WHorizontalScroll>
|
|
27
|
+
`,
|
|
28
|
+
}),
|
|
29
|
+
};
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div
|
|
3
|
+
class="flex overflow-x-scroll custom-scrollbar"
|
|
4
|
+
:class="{ 'no-scrollbar': scrollbarWidth === 'none' }"
|
|
5
|
+
:style="cssVars"
|
|
6
|
+
>
|
|
7
|
+
<slot />
|
|
8
|
+
</div>
|
|
9
|
+
</template>
|
|
10
|
+
|
|
11
|
+
<script setup lang="ts">
|
|
12
|
+
import { computed } from 'vue'
|
|
13
|
+
|
|
14
|
+
type ScrollbarWidth = 'auto' | 'thin' | 'none'
|
|
15
|
+
|
|
16
|
+
const props = withDefaults(defineProps<{
|
|
17
|
+
/** Firefox の scrollbar-width に渡す（auto | thin | none） */
|
|
18
|
+
scrollbarWidth?: ScrollbarWidth
|
|
19
|
+
}>(), {
|
|
20
|
+
scrollbarWidth: 'thin',
|
|
21
|
+
})
|
|
22
|
+
|
|
23
|
+
/**
|
|
24
|
+
* CSS 変数を使って各ブラウザに反映
|
|
25
|
+
* - Firefox: scrollbar-width（キーワードのみ）
|
|
26
|
+
* - WebKit系: ::-webkit-scrollbar の width/height をサイズ対応
|
|
27
|
+
*/
|
|
28
|
+
const cssVars = computed(() => {
|
|
29
|
+
// WebKit のサイズをキーワードに合わせてだいたいの幅にマッピング
|
|
30
|
+
const webkitSize =
|
|
31
|
+
props.scrollbarWidth === 'thin' ? '8px'
|
|
32
|
+
: props.scrollbarWidth === 'none' ? '0px'
|
|
33
|
+
: '16px' // auto 相当
|
|
34
|
+
|
|
35
|
+
return {
|
|
36
|
+
'--scrollbar-width': props.scrollbarWidth, // Firefox 向け（auto/thin/none）
|
|
37
|
+
'--webkit-scrollbar-size': webkitSize, // Chromium/Safari 向け
|
|
38
|
+
} as Record<string, string>
|
|
39
|
+
})
|
|
40
|
+
|
|
41
|
+
const scrollbarWidth = props.scrollbarWidth
|
|
42
|
+
</script>
|
|
43
|
+
|
|
44
|
+
<style scoped>
|
|
45
|
+
.custom-scrollbar {
|
|
46
|
+
/* Firefox */
|
|
47
|
+
scrollbar-width: var(--scrollbar-width);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
/* Chromium / Safari */
|
|
51
|
+
.custom-scrollbar::-webkit-scrollbar {
|
|
52
|
+
width: var(--webkit-scrollbar-size);
|
|
53
|
+
height: var(--webkit-scrollbar-size);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
/* 完全に非表示（スクロール自体は可能） */
|
|
57
|
+
.no-scrollbar::-webkit-scrollbar {
|
|
58
|
+
display: none;
|
|
59
|
+
}
|
|
60
|
+
</style>
|