vanilla-vue-ui 0.0.21 → 0.0.23

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/segment-selector/WSegmentSelector.stories.ts

@@ -0,0 +1,53 @@
+// Replace vue3 with vue if you are using Storybook for Vue 2
+import type { Meta, StoryObj } from '@storybook/vue3';
+import WSegmentSelector from './WSegmentSelector.vue';
+import Button from '../button/WButton.vue'
+import { ref, watch } from 'vue';
+
+type WSegmentSelectorProps = InstanceType<typeof WSegmentSelector>['$props']
+
+const meta: Meta<typeof WSegmentSelector> = {
+  component: WSegmentSelector,
+};
+
+export default meta;
+type Story = StoryObj<typeof WSegmentSelector>;
+
+/*
+ *👇 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 Primary: Story = {
+  render: (args: WSegmentSelectorProps) => ({
+    setup() {
+      const value = ref(args.modelValue)
+
+      return {
+        args,
+        value,
+      }
+    },
+    components: { WSegmentSelector, Button },
+    template: `
+      <div class="space-y-4">
+        <WSegmentSelector
+          v-bind="args"
+          v-model="value"
+        />
+
+        <div class="text-sm">
+          selected: {{ value }}
+        </div>
+      </div>
+    `,
+  }),
+  args: {
+    modelValue: 'life',
+    options: [
+      { label: '暮らし', value: 'life' },
+      { label: 'プログラミング', value: 'programming' },
+    ],
+  },
+};

package/basic/segment-selector/WSegmentSelector.vue

@@ -0,0 +1,44 @@
+<template>
+  <div
+    class="inline-flex items-center rounded-full bg-white p-1 border-4"
+  >
+    <button
+      v-for="option in options"
+      :key="option.value"
+      @click="update(option.value)"
+      :class="[
+        'px-5 py-2 rounded-full text-sm font-bold transition-all duration-200',
+        modelValue === option.value
+          ? activeClass
+          : inactiveClass
+      ]"
+    >
+      {{ option.label }}
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+type Option = {
+  label: string
+  value: string
+}
+
+const props = withDefaults(defineProps<{
+  modelValue: string
+  options: Option[]
+  activeClass?: string
+  inactiveClass?: string
+}>(), {
+  activeClass: 'bg-orange-200 text-black',
+  inactiveClass: 'text-black hover:bg-black/10',
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+}>()
+
+const update = (value: string) => {
+  emit('update:modelValue', value)
+}
+</script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-vue-ui",
-  "version": "0.0.21",
+  "version": "0.0.23",
   "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,106 @@
+<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;
+  /* このコードをリリースする時にWebのCursiveとフォントチェッカーのコードを消す */
+  padding: 25px 15px;
+  scrollbar-width: thin;
+}
+</style>