vanilla-vue-ui 0.0.20 → 0.0.22

package/basic/horizontal-scroll/HorizontalScroll.stories.ts

@@ -27,3 +27,16 @@ export const Primary: Story = {
     `,
   }),
 };
+
+export const None: Story = {
+  render: () => ({
+    components: { WHorizontalScroll },
+    template: `
+      <WHorizontalScroll :scrollbar-width="'none'">
+        <img src="/carousel-0.webp" alt="Slide 1">
+        <img src="/carousel-1.webp" alt="Slide 2">
+        <img src="/carousel-2.webp" alt="Slide 3">
+      </WHorizontalScroll>
+    `,
+  }),
+};

package/basic/horizontal-scroll/WHorizontalScroll.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, onMounted } from 'vue'
 
 type ScrollbarWidth = 'auto' | 'thin' | 'none'
 
@@ -39,22 +39,29 @@ const cssVars = computed(() => {
 })
 
 const scrollbarWidth = props.scrollbarWidth
-</script>
 
-<style scoped>
-.custom-scrollbar {
-  /* Firefox */
-  scrollbar-width: var(--scrollbar-width);
-}
-
-/* Chromium / Safari */
-.custom-scrollbar::-webkit-scrollbar {
-  width: var(--webkit-scrollbar-size);
-  height: var(--webkit-scrollbar-size);
-}
-
-/* 完全に非表示（スクロール自体は可能） */
-.no-scrollbar::-webkit-scrollbar {
-  display: none;
-}
-</style>
+onMounted(() => {
+  if (!document.getElementById('scrollbar-style')) {
+    const style = document.createElement('style')
+    style.id = 'scrollbar-style'
+    style.textContent = `
+      .custom-scrollbar {
+        /* Firefox */
+        scrollbar-width: var(--scrollbar-width);
+      }
+
+      /* Chromium / Safari */
+      .custom-scrollbar::-webkit-scrollbar {
+        width: var(--webkit-scrollbar-size);
+        height: var(--webkit-scrollbar-size);
+      }
+
+      /* 完全に非表示（スクロール自体は可能） */
+      .no-scrollbar::-webkit-scrollbar {
+        display: none;
+      }
+    `
+    document.head.appendChild(style)
+  }
+})
+</script>

package/basic/range/WRange.vue

@@ -116,6 +116,30 @@ onMounted(() => {
       updateSliderBg({ value: Number(modelValue.value), max: props.max, min: props.min })
     })
   }
+
+  if (!document.getElementById('range-thumb-style')) {
+    const style = document.createElement('style')
+    style.id = 'range-thumb-style'
+    style.textContent = `
+      input[type="range"]::-webkit-slider-thumb {
+        background-color: white;
+        appearance: none;
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        border: 2px solid rgb(251, 191, 36);
+      }
+      input[type="range"]::-moz-range-thumb {
+        background-color: white;
+        appearance: none;
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        border: 2px solid rgb(251, 191, 36);
+      }
+    `
+    document.head.appendChild(style)
+  }
 })
 
 // props.classesが渡されていない場合、defaultClassesを使用する
@@ -168,23 +192,3 @@ function emitCustomEvent(value: string) {
   emit('customInput', event)
 }
 </script>
-
-<style>
-input[type="range"]::-webkit-slider-thumb {
-  background-color: white;
-  appearance: none;
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  border: 2px solid rgb(251, 191, 36);
-}
-
-input[type="range"]::-moz-range-thumb {
-  background-color: white;
-  appearance: none;
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  border: 2px solid rgb(251, 191, 36);
-}
-</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-vue-ui",
-  "version": "0.0.20",
+  "version": "0.0.22",
   "private": false,
   "type": "module",
   "files": [

package/template/vertical-horizontal-text/WVerticalHorizontalText.stories.ts

@@ -0,0 +1,61 @@
+// Replace vue3 with vue if you are using Storybook for Vue 2
+import type { Meta, StoryObj } from '@storybook/vue3';
+import WVerticalHorizontalText from './WVerticalHorizontalText.vue';
+import {
+  HomeIcon,
+  BellAlertIcon,
+  ChatBubbleBottomCenterTextIcon,
+  Cog6ToothIcon,
+  CurrencyYenIcon,
+  CubeIcon,
+  BookOpenIcon,
+  MinusIcon
+} from '@heroicons/vue/24/outline'
+
+type WVerticalHorizontalTextProps = InstanceType<typeof WVerticalHorizontalText>['$props']
+
+const meta: Meta<typeof WVerticalHorizontalText> = {
+  component: WVerticalHorizontalText,
+};
+
+export default meta;
+type Story = StoryObj<typeof WVerticalHorizontalText>;
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/api/csf
+ * to learn how to use render functions.
+ */
+export const Horizontal: Story = {
+  render: (args: WVerticalHorizontalTextProps) => ({
+    setup() {
+      return {
+        ...args
+      }
+    },
+    components: { WVerticalHorizontalText },
+    template: '<WVerticalHorizontalText :text="text" :fontSize="fontSize" :isVertical="isVertical"></WVerticalHorizontalText>',
+  }),
+  args: {
+    text: 'Horizontal',
+    fontSize: 5,
+    isVertical: false,
+  }
+};
+
+export const Vertical: Story = {
+  render: (args: WVerticalHorizontalTextProps) => ({
+    setup() {
+      return {
+        ...args
+      }
+    },
+    components: { WVerticalHorizontalText },
+    template: '<WVerticalHorizontalText :text="text" :fontSize="fontSize" :isVertical="isVertical"></WVerticalHorizontalText>',
+  }),
+  args: {
+    text: 'Vertical',
+    fontSize: 5,
+    isVertical: true,
+  }
+};

package/template/vertical-horizontal-text/WVerticalHorizontalText.vue

@@ -0,0 +1,105 @@
+<template>
+  <div>
+    <div
+      v-if="isVertical"
+      class="vertical-container"
+    >
+      <div
+        class="vertical-column"
+        :style="verticalColumnStyle"
+      >
+        <span
+          v-for="(char, index) in resultArray"
+          :key="index"
+          class="vertical-char"
+        >
+          {{ char }}
+        </span>
+      </div>
+    </div>
+
+    <div
+      v-else
+      class="horizontal-container"
+    >
+      <div class="horizontal-scroll">
+        <p :style="computedStyle">
+          {{ text }}
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps, computed } from 'vue'
+
+const props = defineProps({
+  text: {
+    type: String,
+    required: true,
+  },
+  fontSize: {
+    type: Number,
+    default: 4,
+  },
+  isVertical: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const resultArray = computed(() => props.text.split(''))
+
+const verticalColumnStyle = computed(() => ({
+  fontSize: `${props.fontSize}rem`,
+  lineHeight: '1.2',
+}))
+
+const computedStyle = computed(() => ({
+  fontSize: `${props.fontSize}rem`,
+  lineHeight: `${props.fontSize + 0.5}rem`,
+}))
+</script>
+
+<style scoped>
+.serif__app--result p {
+  line-height: 3.5rem;
+  font-size: 3rem;
+}
+
+.vertical-container {
+  writing-mode: initial !important;
+  display: flex;            /* 中央寄せのために flex 化 */
+  justify-content: center;  /* 左右中央 */
+  align-items: center;      /* 上下中央 */
+  width: 100%;              /* 全幅に広げる */
+}
+
+.vertical-column {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 1em;
+}
+
+.vertical-char {
+  font-size: inherit;
+  line-height: 1.2;
+  display: block;
+}
+
+.horizontal-container {
+  width: 100%;
+  overflow: hidden; /* 親は隠すだけ。スクロールは子が担当 */
+}
+
+.horizontal-scroll {
+  width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+  white-space: nowrap;
+
+  scrollbar-width: thin;
+}
+</style>