@histoire/controls 0.2.3 → 0.3.0

package/dist/style.css

@@ -1,598 +1 @@
-.resize-observer[data-v-b329ee4c]{
-  position:absolute;
-  top:0;
-  left:0;
-  z-index:-1;
-  width:100%;
-  height:100%;
-  border:none;
-  background-color:transparent;
-  pointer-events:none;
-  display:block;
-  overflow:hidden;
-  opacity:0
-}
-
-.resize-observer[data-v-b329ee4c] object{
-  display:block;
-  position:absolute;
-  top:0;
-  left:0;
-  height:100%;
-  width:100%;
-  overflow:hidden;
-  pointer-events:none;
-  z-index:-1
-}
-
-.v-popper__popper{
-  z-index:10000;
-  top:0;
-  left:0
-}
-
-.v-popper__popper.v-popper__popper--hidden{
-  visibility:hidden;
-  opacity:0;
-  transition:opacity .15s,visibility .15s;
-  pointer-events:none
-}
-
-.v-popper__popper.v-popper__popper--shown{
-  visibility:visible;
-  opacity:1;
-  transition:opacity .15s
-}
-
-.v-popper__popper.v-popper__popper--skip-transition,.v-popper__popper.v-popper__popper--skip-transition>.v-popper__wrapper{
-  transition:none!important
-}
-
-.v-popper__backdrop{
-  position:absolute;
-  top:0;
-  left:0;
-  width:100%;
-  height:100%;
-  display:none
-}
-
-.v-popper__inner{
-  position:relative;
-  box-sizing:border-box;
-  overflow-y:auto
-}
-
-.v-popper__inner>div{
-  position:relative;
-  z-index:1;
-  max-width:inherit;
-  max-height:inherit
-}
-
-.v-popper__arrow-container{
-  position:absolute;
-  width:10px;
-  height:10px
-}
-
-.v-popper__popper--arrow-overflow .v-popper__arrow-container,.v-popper__popper--no-positioning .v-popper__arrow-container{
-  display:none
-}
-
-.v-popper__arrow-inner,.v-popper__arrow-outer{
-  border-style:solid;
-  position:absolute;
-  top:0;
-  left:0;
-  width:0;
-  height:0
-}
-
-.v-popper__arrow-inner{
-  visibility:hidden;
-  border-width:7px
-}
-
-.v-popper__arrow-outer{
-  border-width:6px
-}
-
-.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{
-  left:-2px
-}
-
-.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{
-  left:-1px
-}
-
-.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer{
-  border-bottom-width:0;
-  border-left-color:transparent!important;
-  border-right-color:transparent!important;
-  border-bottom-color:transparent!important
-}
-
-.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner{
-  top:-2px
-}
-
-.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-container{
-  top:0
-}
-
-.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{
-  border-top-width:0;
-  border-left-color:transparent!important;
-  border-right-color:transparent!important;
-  border-top-color:transparent!important
-}
-
-.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{
-  top:-4px
-}
-
-.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{
-  top:-6px
-}
-
-.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{
-  top:-2px
-}
-
-.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{
-  top:-1px
-}
-
-.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{
-  border-left-width:0;
-  border-left-color:transparent!important;
-  border-top-color:transparent!important;
-  border-bottom-color:transparent!important
-}
-
-.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{
-  left:-4px
-}
-
-.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{
-  left:-6px
-}
-
-.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-container{
-  right:-10px
-}
-
-.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer{
-  border-right-width:0;
-  border-top-color:transparent!important;
-  border-right-color:transparent!important;
-  border-bottom-color:transparent!important
-}
-
-.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner{
-  left:-2px
-}
-
-.v-popper--theme-dropdown .v-popper__inner{
-  background:#fff;
-  color:#000;
-  border-radius:6px;
-  border:1px solid #ddd;
-  box-shadow:0 6px 30px #0000001a
-}
-
-.v-popper--theme-dropdown .v-popper__arrow-inner{
-  visibility:visible;
-  border-color:#fff
-}
-
-.v-popper--theme-dropdown .v-popper__arrow-outer{
-  border-color:#ddd
-}
-
-.v-popper--theme-tooltip .v-popper__inner{
-  background:rgba(0,0,0,.8);
-  color:#fff;
-  border-radius:6px;
-  padding:7px 12px 6px
-}
-
-.v-popper--theme-tooltip .v-popper__arrow-outer{
-  border-color:#000c
-}
-
-*, ::before, ::after{
-  --tw-translate-x:0;
-  --tw-translate-y:0;
-  --tw-rotate:0;
-  --tw-skew-x:0;
-  --tw-skew-y:0;
-  --tw-scale-x:1;
-  --tw-scale-y:1;
-  --tw-pan-x: ;
-  --tw-pan-y: ;
-  --tw-pinch-zoom: ;
-  --tw-scroll-snap-strictness:proximity;
-  --tw-ordinal: ;
-  --tw-slashed-zero: ;
-  --tw-numeric-figure: ;
-  --tw-numeric-spacing: ;
-  --tw-numeric-fraction: ;
-  --tw-ring-inset: ;
-  --tw-ring-offset-width:0px;
-  --tw-ring-offset-color:#fff;
-  --tw-ring-color:rgb(59 130 246 / 0.5);
-  --tw-ring-offset-shadow:0 0 #0000;
-  --tw-ring-shadow:0 0 #0000;
-  --tw-shadow:0 0 #0000;
-  --tw-shadow-colored:0 0 #0000;
-  --tw-blur: ;
-  --tw-brightness: ;
-  --tw-contrast: ;
-  --tw-grayscale: ;
-  --tw-hue-rotate: ;
-  --tw-invert: ;
-  --tw-saturate: ;
-  --tw-sepia: ;
-  --tw-drop-shadow: ;
-  --tw-backdrop-blur: ;
-  --tw-backdrop-brightness: ;
-  --tw-backdrop-contrast: ;
-  --tw-backdrop-grayscale: ;
-  --tw-backdrop-hue-rotate: ;
-  --tw-backdrop-invert: ;
-  --tw-backdrop-opacity: ;
-  --tw-backdrop-saturate: ;
-  --tw-backdrop-sepia: 
-}
-
-.htw-absolute{
-  position:absolute
-}
-
-.htw-relative{
-  position:relative
-}
-
-.htw-inset-0{
-  top:0px;
-  right:0px;
-  bottom:0px;
-  left:0px
-}
-
-.htw-z-10{
-  z-index:10
-}
-
-.htw-m-4{
-  margin:1rem
-}
-
-.htw-my-0{
-  margin-top:0px;
-  margin-bottom:0px
-}
-
-.-htw-my-1{
-  margin-top:-0.25rem;
-  margin-bottom:-0.25rem
-}
-
-.htw-box-border{
-  box-sizing:border-box
-}
-
-.htw-block{
-  display:block
-}
-
-.htw-flex{
-  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-min-h-\[26px\]{
-  min-height:26px
-}
-
-.htw-w-4{
-  width:1rem
-}
-
-.htw-w-28{
-  width:7rem
-}
-
-.htw-w-\[16px\]{
-  width:16px
-}
-
-.htw-w-16{
-  width:4rem
-}
-
-.htw-w-full{
-  width:100%
-}
-
-.htw-shrink-0{
-  flex-shrink:0
-}
-
-.htw-grow{
-  flex-grow:1
-}
-
-.htw-cursor-pointer{
-  cursor:pointer
-}
-
-.htw-cursor-ew-resize{
-  cursor:ew-resize
-}
-
-.htw-cursor-text{
-  cursor:text
-}
-
-.htw-select-none{
-  -webkit-user-select:none;
-     -moz-user-select:none;
-      -ms-user-select:none;
-          user-select:none
-}
-
-.htw-resize-y{
-  resize:vertical
-}
-
-.htw-grid-cols-\[repeat\(auto-fill\,minmax\(100px\,1fr\)\)\]{
-  grid-template-columns:repeat(auto-fill,minmax(100px,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
-}
-
-.htw-gap-2{
-  gap:0.5rem
-}
-
-.htw-gap-4{
-  gap:1rem
-}
-
-.htw-gap-1{
-  gap:0.25rem
-}
-
-.htw-overflow-hidden{
-  overflow:hidden
-}
-
-.htw-text-ellipsis{
-  text-overflow:ellipsis
-}
-
-.htw-whitespace-nowrap{
-  white-space:nowrap
-}
-
-.htw-rounded-sm{
-  border-radius:0.25rem
-}
-
-.htw-rounded{
-  border-radius:0.375rem
-}
-
-.htw-rounded-full{
-  border-radius:9999px
-}
-
-.htw-border{
-  border-width:1px
-}
-
-.htw-border-8{
-  border-width:8px
-}
-
-.htw-border-2{
-  border-width:2px
-}
-
-.htw-border-solid{
-  border-style:solid
-}
-
-.htw-border-primary-500{
-  --tw-border-opacity:1;
-  border-color:rgb(16 185 129 / var(--tw-border-opacity))
-}
-
-.htw-border-black\/25{
-  border-color:rgb(0 0 0 / 0.25)
-}
-
-.htw-bg-transparent{
-  background-color:transparent
-}
-
-.htw-stroke-white{
-  stroke:#fff
-}
-
-.htw-stroke-2{
-  stroke-width:2
-}
-
-.htw-p-2{
-  padding:0.5rem
-}
-
-.htw-py-1{
-  padding-top:0.25rem;
-  padding-bottom:0.25rem
-}
-
-.htw-px-2{
-  padding-left:0.5rem;
-  padding-right:0.5rem
-}
-
-.htw-pl-2{
-  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))
-}
-
-.htw-text-inherit{
-  color:inherit
-}
-
-.htw-opacity-50{
-  opacity:0.5
-}
-
-.htw-outline-none{
-  outline:2px solid transparent;
-  outline-offset:2px
-}
-
-.htw-transition-border{
-  transition-property:border;
-  transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration:150ms
-}
-
-.htw-transition-all{
-  transition-property:all;
-  transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration:150ms
-}
-
-.htw-transition-none{
-  transition-property:none
-}
-
-.htw-delay-150{
-  transition-delay:150ms
-}
-
-.htw-duration-150{
-  transition-duration:150ms
-}
-
-.htw-duration-200{
-  transition-duration:200ms
-}
-
-.htw-ease-out{
-  transition-timing-function:cubic-bezier(0, 0, 0.2, 1)
-}
-
-.htw-ease-in-out{
-  transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)
-}
-
-body {
-  font-size: 18px;
-}
-
-.htw-dark body{
-  --tw-text-opacity:1;
-  color:rgb(244 244 245 / var(--tw-text-opacity))
-}
-
-@media (min-width: 640px) {
-  body {
-    font-size: 14px;
-  }
-}
-
-.hover\:htw-bg-primary-100:hover{
-  --tw-bg-opacity:1;
-  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)
-}
-
-.htw-dark .dark\:htw-border-white\/25{
-  border-color:rgb(255 255 255 / 0.25)
-}
-
-.htw-dark .dark\:hover\:htw-bg-primary-800:hover{
-  --tw-bg-opacity:1;
-  background-color:rgb(6 95 70 / var(--tw-bg-opacity))
-}
-
-.htw-dark .dark\:focus\:htw-border-primary-500:focus{
-  --tw-border-opacity:1;
-  border-color:rgb(16 185 129 / var(--tw-border-opacity))
-}
+.htw-bind-col-size{grid-template-columns:repeat(auto-fill,minmax(var(--histoire-col-size),1fr))}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@histoire/controls",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "description": "Prebuilt controls components",
   "license": "MIT",
   "author": {
@@ -44,22 +44,22 @@
     "autoprefixer": "^10.4.4",
     "concurrently": "^7.1.0",
     "floating-vue": "^2.0.0-beta.14",
-    "histoire": "^0.2.2",
+    "histoire": "0.3.0",
     "postcss": "^8.4.12",
     "postcss-import": "^14.1.0",
     "tailwindcss": "^3.0.23",
     "typescript": "^4.6.3",
     "vite": "^2.9.1",
     "vue": "^3.2.31",
-    "vue-tsc": "^0.33.9"
+    "vue-tsc": "^0.34.10"
   },
   "scripts": {
-    "build": "rimraf dist && vite build && pnpm run build:types && pnpm run build:css",
-    "build:css": "tailwindcss -i src/style/main.css -o ./dist/style.css -c tailwind.config.cjs --postcss postcss.config.cjs",
+    "build": "rimraf dist && pnpm run build:css && vite build && pnpm run build:types",
+    "build:css": "tailwindcss -i src/style/main.css -o ./dist/style-standalone.css -c tailwind.config.cjs --postcss postcss.config.cjs",
     "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/design-tokens/HstColorShades.story.vue

@@ -377,5 +377,14 @@ const colors = {
         />
       </template>
     </Variant>
+
+    <Variant title="long names">
+      <HstColorShades
+        v-for="(shades, key) of colors"
+        :key="key"
+        :shades="shades"
+        :get-name="shade => `${'\'very-'.repeat(5)}long-${key}-${shade}`"
+      />
+    </Variant>
   </Story>
 </template>

package/src/components/design-tokens/HstColorShades.vue

@@ -6,12 +6,11 @@ export default {
 
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
+import { VTooltip as vTooltip } from 'floating-vue'
 import HstCopyIcon from '../HstCopyIcon.vue'
 
 const props = defineProps<{
   shades: Record<string, string>
-  // @TODO report eslint bug
-  // eslint-disable-next-line func-call-spacing
   getName?: (key: string, color: string) => string
   search?: string
 }>()
@@ -37,17 +36,21 @@ const displayedShades = computed(() => {
   }
   return list
 })
+
+const hover = ref<string>(null)
 </script>
 
 <template>
   <div
     v-if="displayedShades.length"
-    class="htw-grid htw-gap-4 htw-grid-cols-[repeat(auto-fill,minmax(100px,1fr))] htw-m-4"
+    class="htw-grid htw-gap-4 htw-grid-cols-[repeat(auto-fill,minmax(200px,1fr))] htw-m-4"
   >
     <div
       v-for="shade of displayedShades"
       :key="shade.key"
-      class="htw-flex htw-flex-col htw-gap-2 htw-group"
+      class="htw-flex htw-flex-col htw-gap-2"
+      @mouseenter="hover = shade.key"
+      @mouseleave="hover = null"
     >
       <slot
         :color="shade.color"
@@ -61,17 +64,25 @@ const displayedShades = computed(() => {
       </slot>
       <div>
         <div class="htw-flex htw-gap-1">
-          <pre class="htw-my-0">{{ shade.name }}</pre>
+          <pre
+            v-tooltip="shade.name.length > 23 ? shade.name : ''"
+            class="htw-my-0 htw-truncate htw-shrink"
+          >{{ shade.name }}</pre>
           <HstCopyIcon
+            v-if="hover === shade.key"
             :content="shade.name"
-            class="htw-hidden group-hover:htw-block"
+            class="htw-flex-none"
           />
         </div>
         <div class="htw-flex htw-gap-1">
-          <pre class="htw-my-0 htw-opacity-50">{{ shade.color }}</pre>
+          <pre
+            v-tooltip="shade.color.length > 23 ? shade.color : ''"
+            class="htw-my-0 htw-opacity-50 htw-truncate htw-shrink"
+          >{{ shade.color }}</pre>
           <HstCopyIcon
+            v-if="hover === shade.key"
             :content="shade.color"
-            class="htw-hidden group-hover:htw-block"
+            class="htw-flex-none"
           />
         </div>
       </div>