feat: HstCopyIcon

packages/histoire-controls/package.json

@@ -41,6 +41,11 @@
     "story:dev": "histoire dev",
     "story:build": "histoire build"
   },
+  "dependencies": {
+    "@iconify/vue": "^3.2.1",
+    "@vueuse/core": "^8.2.5",
+    "floating-vue": "^2.0.0-beta.14"
+  },
   "devDependencies": {
     "@peeky/test": "^0.13.5",
     "@types/node": "^17.0.23",

packages/histoire-controls/src/components/HstCopyIcon.vue

@@ -0,0 +1,34 @@
+<script lang="ts">
+export default {
+  name: 'HstCopyIcon',
+}
+</script>
+
+<script lang="ts" setup>
+import { Icon } from '@iconify/vue'
+import { useClipboard } from '@vueuse/core'
+import { VTooltip as vTooltip } from 'floating-vue'
+
+const props = defineProps<{
+  content: string
+}>()
+
+const { copy, copied } = useClipboard()
+
+const action = () => copy(props.content)
+</script>
+
+<template>
+  <Icon
+    v-tooltip="{
+      content: 'Copied!',
+      triggers: [],
+      shown: copied,
+      distance: 12,
+      delay: 0,
+    }"
+    icon="carbon:copy-file"
+    class="htw-w-4 htw-h-4 htw-opacity-50 hover:htw-opacity-100 hover:htw-text-primary-500 htw-cursor-pointer"
+    @click="action()"
+  />
+</template>

packages/histoire-controls/src/index.ts

@@ -3,11 +3,13 @@ import HstCheckboxVue from './components/checkbox/HstCheckbox.vue'
 import HstTextVue from './components/text/HstText.vue'
 import HstNumberVue from './components/number/HstNumber.vue'
 import HstTextareaVue from './components/textarea/HstTextarea.vue'
+import HstCopyIconVue from './components/HstCopyIcon.vue'
 
 export const HstCheckbox = HstCheckboxVue
 export const HstText = HstTextVue
 export const HstNumber = HstNumberVue
 export const HstTextarea = HstTextareaVue
+export const HstCopyIcon = HstCopyIconVue
 
 export function registerVueComponents (app: App) {
   app.component('HstCheckbox', HstCheckboxVue)

packages/histoire/src/client/app/components/story/StorySourceCode.vue

@@ -1,12 +1,11 @@
 <script lang="ts" setup>
 import { computed, onMounted, PropType, ref, shallowRef, watch } from 'vue'
 import { getHighlighter, Highlighter, setCDN } from 'shiki'
-import { Icon } from '@iconify/vue'
+import { HstCopyIcon } from '@histoire/controls'
 import { generateSourceCode } from '../../codegen/vue3'
 import type { Variant } from '../../types'
 import { isDark } from '../../util/dark'
 import { unindent } from '../../codegen/util'
-import { useClipboard } from '@vueuse/core'
 
 const props = defineProps({
   variant: {
@@ -59,11 +58,6 @@ const sourceHtml = computed(() => highlighter.value?.codeToHtml(sourceCode.value
   lang: 'html',
   theme: isDark.value ? 'github-dark' : 'github-light',
 }))
-
-// Copy
-const { copy, copied } = useClipboard()
-
-const copySourceCode = () => copy(sourceCode.value)
 </script>
 
 <template>
@@ -97,16 +91,8 @@ const copySourceCode = () => copy(sourceCode.value)
       v-if="!error"
       class="htw-absolute htw-top-2 htw-right-6 htw-p-1 htw-bg-gray-100 dark:htw-bg-gray-800"
     >
-      <Icon
-        v-tooltip="{
-          content: 'Copied!',
-          triggers: [],
-          shown: copied,
-          distance: 12,
-        }"
-        icon="carbon:copy-file"
-        class="htw-w-4 htw-h-4 htw-opacity-50 hover:htw-opacity-100 hover:htw-text-primary-500 htw-cursor-pointer"
-        @click="copySourceCode()"
+      <HstCopyIcon
+        :content="sourceCode"
       />
     </div>
   </div>