vanilla-vue-ui 0.0.25 → 0.0.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-vue-ui",
-  "version": "0.0.25",
+  "version": "0.0.27",
   "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/twitter-widget-loader/TwitterWidgetLoader.vue

@@ -0,0 +1,24 @@
+<template>
+  <span class="hidden"></span>
+</template>
+
+<script setup lang="ts">
+import { onMounted } from 'vue'
+
+const SCRIPT_SRC = 'https://platform.twitter.com/widgets.js'
+
+onMounted(() => {
+  // すでに読み込まれていたら二重読み込みしない
+  const exists = document.querySelector<HTMLScriptElement>(
+    `script[src="${SCRIPT_SRC}"]`,
+  )
+  if (exists) return
+
+  const script = document.createElement('script')
+  script.src = SCRIPT_SRC
+  script.async = true
+  script.charset = 'utf-8'
+
+  document.head.appendChild(script)
+})
+</script>