vanilla-vue-ui 0.0.24 → 0.0.26

package/basic/breadcrumb/WBreadcrumb.vue

@@ -47,7 +47,7 @@ const props = defineProps({
   },
     hideWords: {
     type: Array as PropType<string[]>,
-    default: () => ['ja', 'en', 'p', 'z', 'blog']
+    default: () => []
   }
 })
 

package/package.json

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

package/template/game-dialog/GameDialog.stories.ts

@@ -0,0 +1,34 @@
+// Replace vue3 with vue if you are using Storybook for Vue 2
+import type { Meta, StoryObj } from '@storybook/vue3';
+import GameDialog from './GameDialog.vue';
+
+type GameDialogProps = InstanceType<typeof GameDialog>['$props']
+
+const meta: Meta<typeof GameDialog> = {
+  component: GameDialog,
+};
+
+export default meta;
+type Story = StoryObj<typeof GameDialog>;
+
+/*
+ *👇 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: GameDialogProps) => ({
+    setup() {
+      return { args }
+    },
+    components: { GameDialog },
+    template: '<GameDialog v-bind="args" />',
+  }),
+  args: {
+    text: 'こんにちは',
+    link: '/ja/blog/tag/半年チャレンジ/',
+    linkLabel: 'こちら',
+    speed: 200,
+    autoStart: true,
+  }
+};

package/template/game-dialog/GameDialog.vue

@@ -0,0 +1,109 @@
+<template>
+  <div
+    class="
+      relative max-w-sm text-white select-none
+      bg-black
+      transition-all duration-150 ease-out
+      origin-bottom
+      animate-[dialogPop_0.2s_ease-out]
+    "
+    @click="skip"
+  >
+    <span>{{ displayText }}</span>
+
+    <a
+      v-if="isFinished && link"
+      :href="link"
+      class="
+        ml-2 inline-block text-yellow-400
+        animate-[dialogBlink_1.2s_steps(2)_infinite]
+        hover:underline
+      "
+    >
+      ▶ {{ linkLabel }}
+    </a>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, watch } from 'vue'
+
+const props = withDefaults(defineProps<{
+  text: string
+  speed?: number
+  link?: string
+  linkLabel?: string
+  autoStart?: boolean
+}>(), {
+  speed: 60,
+  link: '',
+  linkLabel: 'つづく',
+  autoStart: true,
+})
+
+const displayText = ref('')
+const isFinished = ref(false)
+
+let index = 0
+let timer: number | null = null
+
+const start = () => {
+  clear()
+  displayText.value = ''
+  isFinished.value = false
+  index = 0
+
+  timer = window.setInterval(() => {
+    displayText.value += props.text[index]
+    index++
+
+    if (index >= props.text.length) finish()
+  }, props.speed)
+}
+
+const finish = () => {
+  clear()
+  isFinished.value = true
+}
+
+const clear = () => {
+  if (timer !== null) {
+    clearInterval(timer)
+    timer = null
+  }
+}
+
+const skip = () => {
+  if (!isFinished.value) {
+    displayText.value = props.text
+    finish()
+  }
+}
+
+onMounted(() => {
+  if (props.autoStart) start()
+})
+
+watch(() => props.text, () => {
+  if (props.autoStart) start()
+})
+
+defineExpose({ start, finish })
+</script>
+
+<style scoped>
+@keyframes dialogPop {
+  from {
+    transform: scale(0.95);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes dialogBlink {
+  50% { opacity: 0.3 }
+}
+</style>

package/template/tag-link/WTagLink.stories.ts

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import WTagLink from './WTagLink.vue';
+
+const meta: Meta<typeof WTagLink> = {
+  component: WTagLink,
+};
+
+export default meta;
+type Story = StoryObj<typeof WTagLink>;
+
+/*
+ *👇 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: () => ({
+    components: { WTagLink },
+    template: '<WTagLink to="/to">content</WTagLink>',
+  }),
+};

package/template/tag-link/WTagLink.vue

@@ -0,0 +1,52 @@
+<template>
+  <a
+    :href="to"
+    class="
+      inline-flex items-center
+      h-8 pr-2 p-0
+      gap-2
+      rounded-full
+      bg-white
+      box-border border-2 border-black
+      shadow-sm
+      hover:shadow-md
+      hover:-translate-y-0.5
+      transition-all duration-150
+      relative
+    "
+  >
+    <span
+      class="
+        flex items-center justify-center
+        h-8 w-8
+        rounded-full
+        bg-orange-400
+        text-white
+        text-2xl
+        shrink-0
+        absolute -top-0.5 -left-1
+        border-2 border-black
+      "
+    >
+      #
+    </span>
+
+    <span
+      class="
+        text-gray-800
+        text-sm
+        font-medium
+        truncate
+        pl-8
+      "
+    >
+      <slot />
+    </span>
+  </a>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  to: string
+}>()
+</script>