@histoire/controls 0.16.1 → 0.16.4

package/dist/style-standalone.css

@@ -440,6 +440,10 @@
   width:16px
 }
 
+.htw-w-full{
+  width:100%
+}
+
 .htw-w-16{
   width:4rem
 }
@@ -448,10 +452,6 @@
   width:8rem
 }
 
-.htw-w-full{
-  width:100%
-}
-
 .htw-w-3{
   width:0.75rem
 }
@@ -518,6 +518,10 @@
   grid-template-columns:repeat(auto-fill,minmax(200px,1fr))
 }
 
+.htw-flex-row{
+  flex-direction:row
+}
+
 .htw-flex-col{
   flex-direction:column
 }
@@ -749,15 +753,15 @@
   color:rgb(255 255 255 / var(--tw-text-opacity))
 }
 
+.htw-text-inherit{
+  color:inherit
+}
+
 .htw-text-orange-500{
   --tw-text-opacity:1;
   color:rgb(249 115 22 / var(--tw-text-opacity))
 }
 
-.htw-text-inherit{
-  color:inherit
-}
-
 .htw-text-gray-700{
   --tw-text-opacity:1;
   color:rgb(63 63 70 / var(--tw-text-opacity))

package/dist/style.css

@@ -1 +1 @@
-.htw-range-input::-webkit-slider-thumb{height:.75rem;width:.75rem;-webkit-appearance:none;appearance:none;border-radius:9999px;border-width:1px;border-style:solid;border-color:#00000040;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.htw-dark .htw-range-input::-webkit-slider-thumb{border-color:#ffffff40;--tw-bg-opacity: 1;background-color:rgb(63 63 70 / var(--tw-bg-opacity))}.htw-range-input:hover::-webkit-slider-thumb{--tw-border-opacity: 1 !important;border-color:rgb(16 185 129 / var(--tw-border-opacity))!important;--tw-bg-opacity: 1 !important;background-color:rgb(16 185 129 / var(--tw-bg-opacity))!important}.htw-range-input::-moz-range-thumb{height:.75rem;width:.75rem;-moz-appearance:none;appearance:none;border-radius:9999px;border-width:1px;border-style:solid;border-color:#00000040;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.htw-dark .htw-range-input::-moz-range-thumb{border-color:#ffffff40;--tw-bg-opacity: 1;background-color:rgb(63 63 70 / var(--tw-bg-opacity))}.htw-range-input:hover::-moz-range-thumb{--tw-border-opacity: 1 !important;border-color:rgb(16 185 129 / var(--tw-border-opacity))!important;--tw-bg-opacity: 1 !important;background-color:rgb(16 185 129 / var(--tw-bg-opacity))!important}.v-popper{line-height:0}.htw-dark .v-popper--theme-dropdown .v-popper__inner{--tw-border-opacity: 1;border-color:rgb(31 31 33 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(63 63 70 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(244 244 245 / var(--tw-text-opacity))}.htw-dark .v-popper--theme-dropdown .v-popper__arrow-inner{--tw-border-opacity: 1;border-color:rgb(63 63 70 / var(--tw-border-opacity))}.htw-dark .v-popper--theme-dropdown .v-popper__arrow-outer{--tw-border-opacity: 1;border-color:rgb(31 31 33 / var(--tw-border-opacity))}.v-popper--theme-dropdown.v-popper__popper--show-from .v-popper__wrapper{transform:scale(.75)}.v-popper--theme-dropdown.v-popper__popper--show-to .v-popper__wrapper{transform:none;transition:transform .15s cubic-bezier(0,1,.5,1)}.v-popper__popper:focus-visible{outline:none}.htw-bind-col-size{grid-template-columns:repeat(auto-fill,minmax(var(--histoire-col-size),1fr))}.__histoire-json-code[data-v-e5fbff29] .cm-editor{height:100%;min-width:280px}
+.htw-range-input::-webkit-slider-thumb{height:.75rem;width:.75rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:9999px;border-width:1px;border-style:solid;border-color:#00000040;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.htw-dark .htw-range-input::-webkit-slider-thumb{border-color:#ffffff40;--tw-bg-opacity: 1;background-color:rgb(63 63 70 / var(--tw-bg-opacity))}.htw-range-input:hover::-webkit-slider-thumb{--tw-border-opacity: 1 !important;border-color:rgb(16 185 129 / var(--tw-border-opacity))!important;--tw-bg-opacity: 1 !important;background-color:rgb(16 185 129 / var(--tw-bg-opacity))!important}.htw-range-input::-moz-range-thumb{height:.75rem;width:.75rem;-moz-appearance:none;-webkit-appearance:none;appearance:none;border-radius:9999px;border-width:1px;border-style:solid;border-color:#00000040;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.htw-dark .htw-range-input::-moz-range-thumb{border-color:#ffffff40;--tw-bg-opacity: 1;background-color:rgb(63 63 70 / var(--tw-bg-opacity))}.htw-range-input:hover::-moz-range-thumb{--tw-border-opacity: 1 !important;border-color:rgb(16 185 129 / var(--tw-border-opacity))!important;--tw-bg-opacity: 1 !important;background-color:rgb(16 185 129 / var(--tw-bg-opacity))!important}.v-popper{line-height:0}.htw-dark .v-popper--theme-dropdown .v-popper__inner{--tw-border-opacity: 1;border-color:rgb(31 31 33 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(63 63 70 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(244 244 245 / var(--tw-text-opacity))}.htw-dark .v-popper--theme-dropdown .v-popper__arrow-inner{--tw-border-opacity: 1;border-color:rgb(63 63 70 / var(--tw-border-opacity))}.htw-dark .v-popper--theme-dropdown .v-popper__arrow-outer{--tw-border-opacity: 1;border-color:rgb(31 31 33 / var(--tw-border-opacity))}.v-popper--theme-dropdown.v-popper__popper--show-from .v-popper__wrapper{transform:scale(.75)}.v-popper--theme-dropdown.v-popper__popper--show-to .v-popper__wrapper{transform:none;transition:transform .15s cubic-bezier(0,1,.5,1)}.v-popper__popper:focus-visible{outline:none}.htw-bind-col-size{grid-template-columns:repeat(auto-fill,minmax(var(--histoire-col-size),1fr))}.__histoire-json-code[data-v-e5fbff29] .cm-editor{height:100%;min-width:280px}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@histoire/controls",
-  "version": "0.16.1",
+  "version": "0.16.4",
   "description": "Prebuilt controls components",
   "license": "MIT",
   "author": {
@@ -38,7 +38,7 @@
     "@codemirror/state": "^6.1.2",
     "@codemirror/theme-one-dark": "^6.1.0",
     "@codemirror/view": "^6.3.0",
-    "@histoire/shared": "^0.16.1",
+    "@histoire/shared": "^0.16.4",
     "@histoire/vendors": "^0.16.0"
   },
   "devDependencies": {
@@ -46,6 +46,7 @@
     "@peeky/test": "^0.14.1",
     "@types/node": "^17.0.32",
     "@vitejs/plugin-vue": "^4.0.0",
+    "@vue/runtime-dom": "^3.3.4",
     "@vue/test-utils": "^2.2.10",
     "@vueuse/core": "^9.12.0",
     "autoprefixer": "^10.4.4",
@@ -55,7 +56,7 @@
     "postcss-import": "^14.1.0",
     "tailwindcss": "^3.0.23",
     "typescript": "^4.9.5",
-    "vite": "^4.2.0",
+    "vite": "^4.4.8",
     "vue": "^3.2.47",
     "vue-tsc": "^1.0.24"
   },

package/src/components/colorselect/HstColorSelect.story.vue

@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+import { reactive } from 'vue'
+import HstColorSelect from './HstColorSelect.vue'
+
+const state = reactive({
+  value: '#000000',
+})
+</script>
+
+<template>
+  <Story
+    title="HstColorSelect"
+    group="controls"
+    :layout="{ type: 'single', iframe: false }"
+  >
+    <HstColorSelect
+      v-model="state.value"
+      title="Color Select"
+    />
+    <pre>{{ state }}</pre>
+    <template #controls>
+      <HstColorSelect
+        v-model="state.value"
+        title="Value"
+      />
+    </template>
+  </Story>
+</template>

package/src/components/colorselect/HstColorSelect.vue

@@ -0,0 +1,92 @@
+<script lang="ts">
+export default {
+  name: 'HstColorSelector',
+  inheritAttrs: false,
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+import HstWrapper from '../HstWrapper.vue'
+
+const props = defineProps<{
+  title?: string
+  modelValue?: string
+}>()
+
+const emit = defineEmits({
+  'update:modelValue': (newValue: string) => true,
+})
+
+const input = ref<HTMLInputElement>(null)
+
+const stringModel = computed({
+  get: () => props.modelValue,
+  set: value => {
+    emit('update:modelValue', value)
+  },
+})
+
+function throttle(cb, delay = 15) {
+  let shouldWait = false
+  let waitingArgs
+  const timeoutFunc = () => {
+    if (waitingArgs == null) {
+      shouldWait = false
+    } else {
+      cb(...waitingArgs)
+      waitingArgs = null
+      setTimeout(timeoutFunc, delay)
+    }
+  }
+
+  return (...args) => {
+    if (shouldWait) {
+      waitingArgs = args
+      return
+    }
+
+    cb(...args)
+    shouldWait = true
+    setTimeout(timeoutFunc, delay)
+  }
+}
+const updateValue = throttle((value: string) => {
+  emit('update:modelValue', value)
+})
+function processChange(inp) {
+  updateValue(inp)
+}
+</script>
+
+<script>
+
+</script>
+
+<template>
+  <HstWrapper
+    :title="title"
+    class="histoire-select htw-cursor-text htw-items-center"
+    :class="$attrs.class"
+    :style="$attrs.style"
+  >
+    <div class="htw-flex htw-flex-row htw-gap-1">
+      <input
+        ref="input"
+        v-bind="{ ...$attrs, class: null, style: null }"
+        v-model="stringModel"
+        type="text"
+        class="htw-text-inherit htw-bg-transparent htw-w-full htw-outline-none htw-px-2 htw-py-1 -htw-my-1 htw-border htw-border-solid htw-border-black/25 dark:htw-border-white/25 focus:htw-border-primary-500 dark:focus:htw-border-primary-500 htw-rounded-sm"
+      >
+      <input
+        type="color"
+        :value="modelValue"
+        @input="((e) => processChange((e.target as HTMLInputElement).value as string))"
+      >
+    </div>
+
+    <template #actions>
+      <slot name="actions" />
+    </template>
+  </HstWrapper>
+</template>

package/src/components/radio/HstRadio.vue

@@ -55,9 +55,9 @@ const animationEnabled = ref(false)
         :key="value"
       >
         <input
-          :id="`${value}-radio`"
+          :id="`${value}-radio_${title}`"
           type="radio"
-          :name="`${value}-radio`"
+          :name="`${value}-radio_${title}`"
           :value="value"
           :checked="value === modelValue"
           class="htw-hidden"
@@ -65,7 +65,7 @@ const animationEnabled = ref(false)
         >
         <label
           tabindex="0"
-          :for="`${value}-radio`"
+          :for="`${value}-radio_${title}`"
           class="htw-cursor-pointer htw-flex htw-items-center htw-relative htw-py-1 htw-group"
           @keydown.enter.prevent="selectOption(value)"
           @keydown.space.prevent="selectOption(value)"

package/src/index.ts

@@ -13,6 +13,7 @@ import HstTokenGridVue from './components/design-tokens/HstTokenGrid.vue'
 import HstCopyIconVue from './components/HstCopyIcon.vue'
 import HstRadioVue from './components/radio/HstRadio.vue'
 import HstJsonVue from './components/json/HstJson.vue'
+import HstColorSelectVue from './components/colorselect/HstColorSelect.vue'
 
 export const HstButton = HstButtonVue
 export const HstButtonGroup = HstButtonGroupVue
@@ -29,6 +30,7 @@ export const HstTokenGrid = HstTokenGridVue
 export const HstCopyIcon = HstCopyIconVue
 export const HstRadio = HstRadioVue
 export const HstJson = HstJsonVue
+export const HstColorSelect = HstColorSelectVue
 
 export const components = {
   HstButton,
@@ -46,6 +48,7 @@ export const components = {
   HstTokenList,
   HstTokenGrid,
   HstCopyIcon,
+  HstColorSelect,
 }
 
 export * from './types'

package/vite.config.ts

@@ -5,7 +5,6 @@ export default defineConfig({
   plugins: [
     vue(),
   ],
-
   resolve: {
     alias: {
       'floating-vue': '@histoire/vendors/floating-vue',