@histoire/controls 0.16.1 → 0.16.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@histoire/controls",
-  "version": "0.16.1",
+  "version": "0.16.5",
   "description": "Prebuilt controls components",
   "license": "MIT",
   "author": {
@@ -31,33 +31,34 @@
     "*.vue"
   ],
   "dependencies": {
-    "@codemirror/commands": "^6.1.1",
-    "@codemirror/lang-json": "^6.0.0",
-    "@codemirror/language": "^6.2.1",
-    "@codemirror/lint": "^6.0.0",
-    "@codemirror/state": "^6.1.2",
-    "@codemirror/theme-one-dark": "^6.1.0",
-    "@codemirror/view": "^6.3.0",
-    "@histoire/shared": "^0.16.1",
-    "@histoire/vendors": "^0.16.0"
+    "@codemirror/commands": "^6.2.4",
+    "@codemirror/lang-json": "^6.0.1",
+    "@codemirror/language": "^6.8.0",
+    "@codemirror/lint": "^6.4.0",
+    "@codemirror/state": "^6.2.1",
+    "@codemirror/theme-one-dark": "^6.1.2",
+    "@codemirror/view": "^6.16.0",
+    "@histoire/shared": "^0.16.5",
+    "@histoire/vendors": "^0.16.5"
   },
   "devDependencies": {
-    "@peeky/server": "^0.14.0",
-    "@peeky/test": "^0.14.1",
-    "@types/node": "^17.0.32",
-    "@vitejs/plugin-vue": "^4.0.0",
-    "@vue/test-utils": "^2.2.10",
-    "@vueuse/core": "^9.12.0",
-    "autoprefixer": "^10.4.4",
-    "concurrently": "^7.1.0",
-    "floating-vue": "^2.0.0-beta.19",
-    "postcss": "^8.4.12",
+    "@types/node": "^17.0.45",
+    "@vitejs/plugin-vue": "^4.2.3",
+    "@vue/runtime-dom": "^3.3.4",
+    "@vue/test-utils": "^2.4.1",
+    "@vueuse/core": "^9.13.0",
+    "autoprefixer": "^10.4.15",
+    "concurrently": "^7.6.0",
+    "floating-vue": "2.0.0-beta.19",
+    "jsdom": "^22.1.0",
+    "postcss": "^8.4.27",
     "postcss-import": "^14.1.0",
-    "tailwindcss": "^3.0.23",
+    "tailwindcss": "^3.3.3",
     "typescript": "^4.9.5",
-    "vite": "^4.2.0",
-    "vue": "^3.2.47",
-    "vue-tsc": "^1.0.24"
+    "vite": "^4.4.9",
+    "vitest": "^0.34.1",
+    "vue": "^3.3.4",
+    "vue-tsc": "^1.8.8"
   },
   "scripts": {
     "build": "rimraf dist && pnpm run build:css && vite build && pnpm run build:types",
@@ -65,7 +66,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 --port 5010",
-    "test": "peeky run"
+    "test": "vitest run",
+    "test:dev": "vitest"
   }
 }

package/src/components/checkbox/HstCheckbox.vue

@@ -16,17 +16,17 @@ const props = defineProps<{
   title?: string
 }>()
 
-const emits = defineEmits({
+const emit = defineEmits({
   'update:modelValue': (newValue: Booleanish) => true,
 })
 
 function toggle () {
   if (typeof props.modelValue === 'string') {
-    emits('update:modelValue', props.modelValue === 'false' ? 'true' : 'false')
+    emit('update:modelValue', props.modelValue === 'false' ? 'true' : 'false')
     return
   }
 
-  emits('update:modelValue', !props.modelValue)
+  emit('update:modelValue', !props.modelValue)
 }
 
 const isTrue = computed(() => {

package/src/components/checkbox/HstCheckboxList.vue

@@ -29,15 +29,15 @@ const formattedOptions: ComputedRef<Record<string, string>> = computed(() => {
   return props.options
 })
 
-const emits = defineEmits<{
+const emit = defineEmits<{
   (e: 'update:modelValue', value: Array<string>): void
 }>()
 
 function toggleOption (value: string) {
   if (props.modelValue.includes(value)) {
-    emits('update:modelValue', props.modelValue.filter(element => element !== value))
+    emit('update:modelValue', props.modelValue.filter(element => element !== value))
   } else {
-    emits('update:modelValue', [...props.modelValue, value])
+    emit('update:modelValue', [...props.modelValue, value])
   }
 }
 </script>

package/src/components/checkbox/HstSimpleCheckbox.vue

@@ -12,7 +12,7 @@ const props = defineProps<{
   withToggle?: boolean
 }>()
 
-const emits = defineEmits({
+const emit = defineEmits({
   'update:modelValue': (newValue: boolean) => true,
 })
 
@@ -21,7 +21,7 @@ function toggle () {
     return
   }
 
-  emits('update:modelValue', !props.modelValue)
+  emit('update:modelValue', !props.modelValue)
 }
 
 watch(() => props.modelValue, () => {

package/src/components/checkbox/__snapshots__/HstCheckbox.spec.ts.snap

@@ -1,71 +1,5 @@
-// Peeky snapshots v1.0
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`HstCheckbox toggle to checked 1`] = `
-<label
-  class="histoire-wrapper htw-p-2 hover:htw-bg-primary-100 dark:hover:htw-bg-primary-800 htw-flex htw-gap-2 htw-flex-wrap histoire-checkbox htw-cursor-pointer htw-items-center"
-  role="checkbox"
-  tabindex="0"
->
-  <span class="htw-w-28 htw-whitespace-nowrap htw-text-ellipsis htw-overflow-hidden htw-shrink-0 v-popper--has-tooltip">
-    Label
-  </span>
-  <span class="htw-grow htw-max-w-full htw-flex htw-items-center htw-gap-1">
-    <span class="htw-block htw-grow htw-max-w-full">
-      <div class="histoire-simple-checkbox htw-group htw-text-white htw-w-[16px] htw-h-[16px] htw-relative">
-        <div class="htw-border htw-border-solid group-active:htw-bg-gray-500/20 htw-rounded-sm htw-box-border htw-absolute htw-inset-0 htw-transition-border htw-duration-150 htw-ease-out group-hover:htw-border-primary-500 group-hover:dark:htw-border-primary-500 htw-border-black/25 dark:htw-border-white/25 htw-delay-150">
-        </div>
-        <svg
-          width="16"
-          height="16"
-          viewbox="0 0 24 24"
-          class="htw-relative htw-z-10"
-        >
-          <path
-            d="m 4 12 l 5 5 l 10 -10"
-            fill="none"
-            class="htw-stroke-white htw-stroke-2 htw-duration-200 htw-ease-in-out htw-transition-none"
-            stroke-dasharray="21.21"
-            stroke-dashoffset="21.21"
-          >
-          </path>
-        </svg>
-      </div>
-    </span>
-  </span>
-</label>
-`;
+exports[`HstCheckbox > toggle to checked 1`] = `"<label class=\\"histoire-wrapper htw-p-2 hover:htw-bg-primary-100 dark:hover:htw-bg-primary-800 htw-flex htw-gap-2 htw-flex-wrap histoire-checkbox htw-cursor-pointer htw-items-center\\" role=\\"checkbox\\" tabindex=\\"0\\"><span class=\\"htw-w-28 htw-whitespace-nowrap htw-text-ellipsis htw-overflow-hidden htw-shrink-0 v-popper--has-tooltip\\">Label</span><span class=\\"htw-grow htw-max-w-full htw-flex htw-items-center htw-gap-1\\"><span class=\\"htw-block htw-grow htw-max-w-full\\"><div class=\\"histoire-simple-checkbox htw-group htw-text-white htw-w-[16px] htw-h-[16px] htw-relative\\"><div class=\\"htw-border htw-border-solid group-active:htw-bg-gray-500/20 htw-rounded-sm htw-box-border htw-absolute htw-inset-0 htw-transition-border htw-duration-150 htw-ease-out group-hover:htw-border-primary-500 group-hover:dark:htw-border-primary-500 htw-border-black/25 dark:htw-border-white/25 htw-delay-150\\"></div><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 24 24\\" class=\\"htw-relative htw-z-10\\"><path d=\\"m 4 12 l 5 5 l 10 -10\\" fill=\\"none\\" class=\\"htw-stroke-white htw-stroke-2 htw-duration-200 htw-ease-in-out htw-transition-none\\" stroke-dasharray=\\"21.21\\" stroke-dashoffset=\\"21.21\\"></path></svg></div></span></span></label>"`;
 
-exports[`HstCheckbox toggle to unchecked 1`] = `
-<label
-  class="histoire-wrapper htw-p-2 hover:htw-bg-primary-100 dark:hover:htw-bg-primary-800 htw-flex htw-gap-2 htw-flex-wrap histoire-checkbox htw-cursor-pointer htw-items-center"
-  role="checkbox"
-  tabindex="0"
->
-  <span class="htw-w-28 htw-whitespace-nowrap htw-text-ellipsis htw-overflow-hidden htw-shrink-0 v-popper--has-tooltip">
-    Label
-  </span>
-  <span class="htw-grow htw-max-w-full htw-flex htw-items-center htw-gap-1">
-    <span class="htw-block htw-grow htw-max-w-full">
-      <div class="histoire-simple-checkbox htw-group htw-text-white htw-w-[16px] htw-h-[16px] htw-relative">
-        <div class="htw-border htw-border-solid group-active:htw-bg-gray-500/20 htw-rounded-sm htw-box-border htw-absolute htw-inset-0 htw-transition-border htw-duration-150 htw-ease-out group-hover:htw-border-primary-500 group-hover:dark:htw-border-primary-500 htw-border-primary-500 htw-border-8">
-        </div>
-        <svg
-          width="16"
-          height="16"
-          viewbox="0 0 24 24"
-          class="htw-relative htw-z-10"
-        >
-          <path
-            d="m 4 12 l 5 5 l 10 -10"
-            fill="none"
-            class="htw-stroke-white htw-stroke-2 htw-duration-200 htw-ease-in-out htw-transition-none htw-delay-150"
-            stroke-dasharray="21.21"
-            stroke-dashoffset="0"
-          >
-          </path>
-        </svg>
-      </div>
-    </span>
-  </span>
-</label>
-`;
+exports[`HstCheckbox > toggle to unchecked 1`] = `"<label class=\\"histoire-wrapper htw-p-2 hover:htw-bg-primary-100 dark:hover:htw-bg-primary-800 htw-flex htw-gap-2 htw-flex-wrap histoire-checkbox htw-cursor-pointer htw-items-center\\" role=\\"checkbox\\" tabindex=\\"0\\"><span class=\\"htw-w-28 htw-whitespace-nowrap htw-text-ellipsis htw-overflow-hidden htw-shrink-0 v-popper--has-tooltip\\">Label</span><span class=\\"htw-grow htw-max-w-full htw-flex htw-items-center htw-gap-1\\"><span class=\\"htw-block htw-grow htw-max-w-full\\"><div class=\\"histoire-simple-checkbox htw-group htw-text-white htw-w-[16px] htw-h-[16px] htw-relative\\"><div class=\\"htw-border htw-border-solid group-active:htw-bg-gray-500/20 htw-rounded-sm htw-box-border htw-absolute htw-inset-0 htw-transition-border htw-duration-150 htw-ease-out group-hover:htw-border-primary-500 group-hover:dark:htw-border-primary-500 htw-border-primary-500 htw-border-8\\"></div><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 24 24\\" class=\\"htw-relative htw-z-10\\"><path d=\\"m 4 12 l 5 5 l 10 -10\\" fill=\\"none\\" class=\\"htw-stroke-white htw-stroke-2 htw-duration-200 htw-ease-in-out htw-transition-none htw-delay-150\\" stroke-dasharray=\\"21.21\\" stroke-dashoffset=\\"0\\"></path></svg></div></span></span></label>"`;

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/json/HstJson.vue

@@ -38,7 +38,7 @@ const props = defineProps<{
   modelValue: unknown
 }>()
 
-const emits = defineEmits({
+const emit = defineEmits({
   'update:modelValue': (newValue: unknown) => true,
 })
 
@@ -106,7 +106,7 @@ watch(() => props.modelValue, () => {
 watch(() => internalValue.value, () => {
   invalidValue.value = false
   try {
-    emits('update:modelValue', JSON.parse(internalValue.value))
+    emit('update:modelValue', JSON.parse(internalValue.value))
   } catch (e) {
     invalidValue.value = true
   }

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/components/select/CustomSelect.vue

@@ -15,7 +15,7 @@ const props = defineProps<{
   options: Record<string, any> | string[] | number[] | HstControlOption[]
 }>()
 
-const emits = defineEmits<{
+const emit = defineEmits<{
   (e: 'update:modelValue', value: string): void
 }>()
 
@@ -36,7 +36,7 @@ const formattedOptions: ComputedRef<[any, string][]> = computed(() => {
 const selectedLabel = computed(() => formattedOptions.value.find(([value]) => value === props.modelValue)?.[1])
 
 function selectValue (value: any, hide: () => void) {
-  emits('update:modelValue', value)
+  emit('update:modelValue', value)
   hide()
 }
 </script>

package/src/components/select/HstSelect.vue

@@ -15,7 +15,7 @@ defineProps<{
   options: Record<string, any> | string[] | HstControlOption[]
 }>()
 
-const emits = defineEmits<{
+const emit = defineEmits<{
   (e: 'update:modelValue', value: any): void
 }>()
 </script>
@@ -30,7 +30,7 @@ const emits = defineEmits<{
     <CustomSelect
       :options="options"
       :model-value="modelValue"
-      @update:model-value="emits('update:modelValue', $event)"
+      @update:model-value="emit('update:modelValue', $event)"
     />
 
     <template #actions>

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/tsconfig.json

@@ -12,8 +12,7 @@
     "resolveJsonModule": true,
     "skipLibCheck": true,
     "types": [
-      "node",
-      "@peeky/test"
+      "node"
     ],
     "lib": [
       "ESNext",

package/vite.config.ts

@@ -1,3 +1,5 @@
+/// <reference types="vitest" />
+
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 
@@ -5,17 +7,18 @@ export default defineConfig({
   plugins: [
     vue(),
   ],
-
   resolve: {
-    alias: {
-      'floating-vue': '@histoire/vendors/floating-vue',
-      '@iconify/vue': '@histoire/vendors/iconify',
-      pinia: '@histoire/vendors/pinia',
-      'scroll-into-view-if-needed': '@histoire/vendors/scroll',
-      'vue-router': '@histoire/vendors/vue-router',
-      '@vueuse/core': '@histoire/vendors/vue-use',
-      vue: '@histoire/vendors/vue',
-    },
+    alias: process.env.VITEST
+      ? {}
+      : {
+        'floating-vue': '@histoire/vendors/floating-vue',
+        '@iconify/vue': '@histoire/vendors/iconify',
+        pinia: '@histoire/vendors/pinia',
+        'scroll-into-view-if-needed': '@histoire/vendors/scroll',
+        'vue-router': '@histoire/vendors/vue-router',
+        '@vueuse/core': '@histoire/vendors/vue-use',
+        vue: '@histoire/vendors/vue',
+      },
   },
 
   build: {
@@ -35,4 +38,9 @@ export default defineConfig({
       ],
     },
   },
+
+  test: {
+    environment: 'jsdom',
+    globals: true,
+  },
 })

package/dist/peeky-preview.d.ts

@@ -1 +0,0 @@
-import './style/main.css';

package/peeky.config.ts

@@ -1,21 +0,0 @@
-import { defineConfig } from '@peeky/test'
-
-export default defineConfig({
-  runtimeEnv: 'dom',
-  previewSetupFiles: [
-    'src/peeky-preview.ts',
-  ],
-  vite: {
-    resolve: {
-      alias: {
-        'floating-vue': 'floating-vue',
-        '@iconify/vue': '@iconify/vue',
-        pinia: 'pinia',
-        'scroll-into-view-if-needed': 'scroll-into-view-if-needed',
-        'vue-router': 'vue-router',
-        '@vueuse/core': '@vueuse/core',
-        vue: 'vue',
-      },
-    },
-  },
-})

package/src/peeky-preview.ts

@@ -1 +0,0 @@
-import './style/main.css'