@histoire/controls 0.2.2 → 0.2.5

package/dist/style.css

@@ -266,11 +266,34 @@
   z-index:10
 }
 
+.htw-m-4{
+  margin:1rem
+}
+
+.htw-my-0{
+  margin-top:0px;
+  margin-bottom:0px
+}
+
+.htw-my-8{
+  margin-top:2rem;
+  margin-bottom:2rem
+}
+
+.htw-mx-4{
+  margin-left:1rem;
+  margin-right:1rem
+}
+
 .-htw-my-1{
   margin-top:-0.25rem;
   margin-bottom:-0.25rem
 }
 
+.htw-mb-2{
+  margin-bottom:0.5rem
+}
+
 .htw-box-border{
   box-sizing:border-box
 }
@@ -283,14 +306,46 @@
   display:flex
 }
 
+.htw-grid{
+  display:grid
+}
+
+.htw-hidden{
+  display:none
+}
+
+.htw-h-4{
+  height:1rem
+}
+
 .htw-h-\[16px\]{
   height:16px
 }
 
+.htw-h-\[100px\]{
+  height:100px
+}
+
+.htw-h-16{
+  height:4rem
+}
+
+.htw-h-32{
+  height:8rem
+}
+
+.htw-h-20{
+  height:5rem
+}
+
 .htw-min-h-\[26px\]{
   min-height:26px
 }
 
+.htw-w-4{
+  width:1rem
+}
+
 .htw-w-28{
   width:7rem
 }
@@ -299,14 +354,30 @@
   width:16px
 }
 
+.htw-w-16{
+  width:4rem
+}
+
+.htw-w-32{
+  width:8rem
+}
+
 .htw-w-full{
   width:100%
 }
 
+.htw-flex-none{
+  flex:none
+}
+
 .htw-shrink-0{
   flex-shrink:0
 }
 
+.htw-shrink{
+  flex-shrink:1
+}
+
 .htw-grow{
   flex-grow:1
 }
@@ -334,10 +405,22 @@
   resize:vertical
 }
 
+.htw-grid-cols-\[repeat\(auto-fill\,minmax\(200px\,1fr\)\)\]{
+  grid-template-columns:repeat(auto-fill,minmax(200px,1fr))
+}
+
+.htw-flex-col{
+  flex-direction:column
+}
+
 .htw-flex-wrap{
   flex-wrap:wrap
 }
 
+.htw-items-end{
+  align-items:flex-end
+}
+
 .htw-items-center{
   align-items:center
 }
@@ -346,10 +429,24 @@
   gap:0.5rem
 }
 
+.htw-gap-4{
+  gap:1rem
+}
+
+.htw-gap-1{
+  gap:0.25rem
+}
+
 .htw-overflow-hidden{
   overflow:hidden
 }
 
+.htw-truncate{
+  overflow:hidden;
+  text-overflow:ellipsis;
+  white-space:nowrap
+}
+
 .htw-text-ellipsis{
   text-overflow:ellipsis
 }
@@ -362,6 +459,14 @@
   border-radius:0.25rem
 }
 
+.htw-rounded{
+  border-radius:0.375rem
+}
+
+.htw-rounded-full{
+  border-radius:9999px
+}
+
 .htw-border{
   border-width:1px
 }
@@ -370,6 +475,10 @@
   border-width:8px
 }
 
+.htw-border-2{
+  border-width:2px
+}
+
 .htw-border-solid{
   border-style:solid
 }
@@ -383,6 +492,19 @@
   border-color:rgb(0 0 0 / 0.25)
 }
 
+.htw-bg-white{
+  --tw-bg-opacity:1;
+  background-color:rgb(255 255 255 / var(--tw-bg-opacity))
+}
+
+.htw-bg-gray-500\/10{
+  background-color:rgb(113 113 122 / 0.1)
+}
+
+.htw-bg-gray-500\/50{
+  background-color:rgb(113 113 122 / 0.5)
+}
+
 .htw-bg-transparent{
   background-color:transparent
 }
@@ -413,6 +535,11 @@
   padding-left:0.5rem
 }
 
+.htw-text-5xl{
+  font-size:3rem;
+  line-height:1
+}
+
 .htw-text-white{
   --tw-text-opacity:1;
   color:rgb(255 255 255 / var(--tw-text-opacity))
@@ -422,6 +549,10 @@
   color:inherit
 }
 
+.htw-opacity-50{
+  opacity:0.5
+}
+
 .htw-outline-none{
   outline:2px solid transparent;
   outline-offset:2px
@@ -483,11 +614,24 @@ body {
   background-color:rgb(209 250 229 / var(--tw-bg-opacity))
 }
 
+.hover\:htw-text-primary-500:hover{
+  --tw-text-opacity:1;
+  color:rgb(16 185 129 / var(--tw-text-opacity))
+}
+
+.hover\:htw-opacity-100:hover{
+  opacity:1
+}
+
 .focus\:htw-border-primary-500:focus{
   --tw-border-opacity:1;
   border-color:rgb(16 185 129 / var(--tw-border-opacity))
 }
 
+.htw-group:hover .group-hover\:htw-block{
+  display:block
+}
+
 .htw-group:active .group-active\:htw-bg-gray-500\/20{
   background-color:rgb(113 113 122 / 0.2)
 }
@@ -496,6 +640,11 @@ body {
   border-color:rgb(255 255 255 / 0.25)
 }
 
+.htw-dark .dark\:htw-bg-black{
+  --tw-bg-opacity:1;
+  background-color:rgb(0 0 0 / var(--tw-bg-opacity))
+}
+
 .htw-dark .dark\:hover\:htw-bg-primary-800:hover{
   --tw-bg-opacity:1;
   background-color:rgb(6 95 70 / var(--tw-bg-opacity))

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@histoire/controls",
-  "version": "0.2.2",
+  "version": "0.2.5",
   "description": "Prebuilt controls components",
   "license": "MIT",
   "author": {
@@ -30,23 +30,28 @@
     "*.postcss",
     "*.vue"
   ],
+  "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.18",
+    "@types/node": "^17.0.23",
     "@vitejs/plugin-vue": "^2.3.1",
-    "@vue/test-utils": "^2.0.0-rc.17",
-    "@vueuse/core": "^8.1.1",
-    "autoprefixer": "^10.4.2",
-    "concurrently": "^7.0.0",
-    "floating-vue": "^2.0.0-beta.6",
+    "@vue/test-utils": "^2.0.0-rc.19",
+    "@vueuse/core": "^8.2.5",
+    "autoprefixer": "^10.4.4",
+    "concurrently": "^7.1.0",
+    "floating-vue": "^2.0.0-beta.14",
     "histoire": "^0.2.2",
-    "postcss": "^8.4.6",
-    "postcss-import": "^14.0.2",
+    "postcss": "^8.4.12",
+    "postcss-import": "^14.1.0",
     "tailwindcss": "^3.0.23",
-    "typescript": "^4.5.5",
-    "vite": "^2.9.0",
+    "typescript": "^4.6.3",
+    "vite": "^2.9.1",
     "vue": "^3.2.31",
-    "vue-tsc": "^0.33.0"
+    "vue-tsc": "^0.33.9"
   },
   "scripts": {
     "build": "rimraf dist && vite build && pnpm run build:types && pnpm run build:css",
@@ -54,7 +59,7 @@
     "build:types": "vue-tsc --declaration --emitDeclarationOnly",
     "watch": "concurrently \"vite build --watch\" \"pnpm run build:types -- --watch\"",
     "watch:full": "concurrently \"vite build --watch\" \"pnpm run build:css -- --watch\" \"pnpm run build:types -- --watch\"",
-    "test:open": "peeky open",
+    "test:open": "peeky open --port 5010",
     "test": "peeky run",
     "story:dev": "histoire dev",
     "story:build": "histoire build"

package/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>