@histoire/controls 0.17.15 → 0.17.17

package/src/components/colorselect/HstColorSelect.vue

@@ -6,7 +6,7 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
 import HstWrapper from '../HstWrapper.vue'
 
 const props = defineProps<{
@@ -18,8 +18,6 @@ const emit = defineEmits({
   'update:modelValue': (newValue: string) => true,
 })
 
-const input = ref<HTMLInputElement>(null)
-
 const stringModel = computed({
   get: () => props.modelValue,
   set: value => {
@@ -72,7 +70,6 @@ function processChange(inp) {
   >
     <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"

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

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import HstColorShades from './HstColorShades.vue'
 import type { CSSProperties } from 'vue'
+import HstColorShades from './HstColorShades.vue'
 
 const colors = {
   slate: {
@@ -329,7 +329,7 @@ const colors = {
           <div
             class="htw-rounded htw-h-[100px] htw-text-5xl htw-flex htw-items-end"
             :style="{
-              color: color,
+              color,
             } as CSSProperties"
           >
             Aa

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

@@ -7,8 +7,8 @@ export default {
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
 import { VTooltip as vTooltip } from 'floating-vue'
-import HstCopyIcon from '../HstCopyIcon.vue'
 import type { CSSProperties } from 'vue'
+import HstCopyIcon from '../HstCopyIcon.vue'
 
 const props = defineProps<{
   shades: Record<string, any>
@@ -16,7 +16,7 @@ const props = defineProps<{
   search?: string
 }>()
 
-const flattenShades = (shades: Record<string, any>, path = ''): Record<string, string> => {
+function flattenShades(shades: Record<string, any>, path = ''): Record<string, string> {
   return Object.entries(shades).reduce((acc, [key, color]) => {
     const nextPath = path ? key === 'DEFAULT' ? path : `${path}-${key}` : key
     const obj = typeof color === 'object' ? flattenShades(color, nextPath) : { [nextPath]: color }

package/src/components/design-tokens/HstTokenGrid.story.vue

@@ -2,13 +2,13 @@
 import HstTokenGrid from './HstTokenGrid.vue'
 
 const tokens = {
-  sm: 'filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05))',
-  DEFAULT: 'filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06))',
-  md: 'filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06))',
-  lg: 'filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1))',
-  xl: 'filter: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08))',
+  'sm': 'filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05))',
+  'DEFAULT': 'filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06))',
+  'md': 'filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06))',
+  'lg': 'filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1))',
+  'xl': 'filter: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08))',
   '2xl': 'filter: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15))',
-  none: 'filter: drop-shadow(0 0 #0000)',
+  'none': 'filter: drop-shadow(0 0 #0000)',
 }
 </script>
 

package/src/components/design-tokens/HstTokenList.story.vue

@@ -1,29 +1,29 @@
 <script lang="ts" setup>
-import HstTokenList from './HstTokenList.vue'
 import type { CSSProperties } from 'vue'
+import HstTokenList from './HstTokenList.vue'
 
 const tokens = {
-  0: 0,
-  1: '0.25rem',
-  2: '0.5rem',
-  3: '0.75rem',
-  4: '1rem',
-  5: '1.25rem',
-  6: '1.5rem',
-  8: '2rem',
-  10: '2.5rem',
-  12: '3rem',
-  16: '4rem',
-  20: '5rem',
-  24: '6rem',
-  32: '8rem',
-  40: '10rem',
-  48: '12rem',
-  56: '14rem',
-  64: '16rem',
-  auto: 'auto',
-  px: '1px',
-  screen: '100vw',
+  '0': 0,
+  '1': '0.25rem',
+  '2': '0.5rem',
+  '3': '0.75rem',
+  '4': '1rem',
+  '5': '1.25rem',
+  '6': '1.5rem',
+  '8': '2rem',
+  '10': '2.5rem',
+  '12': '3rem',
+  '16': '4rem',
+  '20': '5rem',
+  '24': '6rem',
+  '32': '8rem',
+  '40': '10rem',
+  '48': '12rem',
+  '56': '14rem',
+  '64': '16rem',
+  'auto': 'auto',
+  'px': '1px',
+  'screen': '100vw',
   '1/2': '50%',
   '1/3': '33.333333%',
   '2/3': '66.666667%',
@@ -50,7 +50,7 @@ const tokens = {
   '9/12': '75%',
   '10/12': '83.333333%',
   '11/12': '91.666667%',
-  full: '100%',
+  'full': '100%',
 }
 </script>
 

package/src/components/json/HstJson.story.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import HstJson from './HstJson.vue'
 
-function initState () {
+function initState() {
   return {
     film: {
       year: 2017,

package/src/components/json/HstJson.vue

@@ -6,31 +6,33 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { ref, onMounted, watch, watchEffect } from 'vue'
+import { onMounted, ref, watch, watchEffect } from 'vue'
 import { Icon } from '@iconify/vue'
-import HstWrapper from '../HstWrapper.vue'
 import { VTooltip as vTooltip } from 'floating-vue'
 import { Compartment } from '@codemirror/state'
+import type {
+  ViewUpdate,
+} from '@codemirror/view'
 import {
   EditorView,
-  keymap,
-  highlightActiveLineGutter,
   highlightActiveLine,
+  highlightActiveLineGutter,
   highlightSpecialChars,
-  ViewUpdate,
+  keymap,
 } from '@codemirror/view'
 import { defaultKeymap } from '@codemirror/commands'
 import { json } from '@codemirror/lang-json'
 import {
-  defaultHighlightStyle,
-  syntaxHighlighting,
-  indentOnInput,
   bracketMatching,
+  defaultHighlightStyle,
   foldGutter,
   foldKeymap,
+  indentOnInput,
+  syntaxHighlighting,
 } from '@codemirror/language'
 import { lintKeymap } from '@codemirror/lint'
-import { oneDarkTheme, oneDarkHighlightStyle } from '@codemirror/theme-one-dark'
+import { oneDarkHighlightStyle, oneDarkTheme } from '@codemirror/theme-one-dark'
+import HstWrapper from '../HstWrapper.vue'
 import { isDark } from '../../utils'
 
 const props = defineProps<{
@@ -94,7 +96,8 @@ watch(() => props.modelValue, () => {
 
   try {
     sameDocument = (JSON.stringify(JSON.parse(internalValue.value)) === JSON.stringify(props.modelValue))
-  } catch (e) {
+  }
+  catch (e) {
     sameDocument = false
   }
 
@@ -107,11 +110,11 @@ watch(() => internalValue.value, () => {
   invalidValue.value = false
   try {
     emit('update:modelValue', JSON.parse(internalValue.value))
-  } catch (e) {
+  }
+  catch (e) {
     invalidValue.value = true
   }
 })
-
 </script>
 
 <template>

package/src/components/number/HstNumber.story.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import HstNumber from './HstNumber.vue'
 
-function initState () {
+function initState() {
   return {
     count: 20,
     step: 1,

package/src/components/number/HstNumber.vue

@@ -6,7 +6,7 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { computed, ref, onUnmounted } from 'vue'
+import { computed, onUnmounted, ref } from 'vue'
 import HstWrapper from '../HstWrapper.vue'
 
 const props = defineProps<{
@@ -20,14 +20,14 @@ const emit = defineEmits({
 
 const numberModel = computed({
   get: () => props.modelValue,
-  set: value => {
+  set: (value) => {
     emit('update:modelValue', value)
   },
 })
 
 const input = ref<HTMLInputElement>()
 
-function focusAndSelect () {
+function focusAndSelect() {
   input.value.focus()
   input.value.select()
 }
@@ -38,7 +38,7 @@ const isDragging = ref(false)
 let startX: number
 let startValue: number
 
-function onMouseDown (event: MouseEvent) {
+function onMouseDown(event: MouseEvent) {
   isDragging.value = true
   startX = event.clientX
   startValue = numberModel.value
@@ -46,15 +46,15 @@ function onMouseDown (event: MouseEvent) {
   window.addEventListener('mouseup', stopDragging)
 }
 
-function onMouseMove (event: MouseEvent) {
-  let step = parseFloat(input.value.step)
-  if (isNaN(step)) {
+function onMouseMove(event: MouseEvent) {
+  let step = Number.parseFloat(input.value.step)
+  if (Number.isNaN(step)) {
     step = 1
   }
   numberModel.value = startValue + Math.round((event.clientX - startX) / 10 / step) * step
 }
 
-function stopDragging () {
+function stopDragging() {
   isDragging.value = false
   window.removeEventListener('mousemove', onMouseMove)
   window.removeEventListener('mouseup', stopDragging)

package/src/components/radio/HstRadio.story.vue

@@ -14,7 +14,7 @@ const objectOptions = Object.keys(options).map(key => ({
   value: key,
 }))
 
-function initState () {
+function initState() {
   return {
     character: flatOptions[0],
   }

package/src/components/radio/HstRadio.vue

@@ -5,9 +5,10 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { computed, ComputedRef, ref } from 'vue'
+import type { ComputedRef } from 'vue'
+import { computed, ref } from 'vue'
 import HstWrapper from '../HstWrapper.vue'
-import { HstControlOption } from '../../types'
+import type { HstControlOption } from '../../types'
 
 const props = defineProps<{
   title?: string
@@ -20,7 +21,8 @@ const formattedOptions: ComputedRef<Record<string, string>> = computed(() => {
     return Object.fromEntries(props.options.map((value: string | HstControlOption) => {
       if (typeof value === 'string') {
         return [value, value]
-      } else {
+      }
+      else {
         return [value.value, value.label]
       }
     }))
@@ -32,7 +34,7 @@ const emit = defineEmits<{
   (e: 'update:modelValue', value: string): void
 }>()
 
-function selectOption (value: string) {
+function selectOption(value: string) {
   emit('update:modelValue', value)
   animationEnabled.value = true
 }
@@ -51,7 +53,7 @@ const animationEnabled = ref(false)
   >
     <div class="-htw-my-1">
       <template
-        v-for="( label, value ) in formattedOptions"
+        v-for="(label, value) in formattedOptions"
         :key="value"
       >
         <input

package/src/components/select/CustomSelect.vue

@@ -6,9 +6,10 @@ export default {
 
 <script lang="ts" setup>
 import { Dropdown as VDropdown } from 'floating-vue'
-import { computed, ComputedRef } from 'vue'
+import type { ComputedRef } from 'vue'
+import { computed } from 'vue'
 import { Icon } from '@iconify/vue'
-import { HstControlOption } from '../../types'
+import type { HstControlOption } from '../../types'
 
 const props = defineProps<{
   modelValue: string
@@ -21,21 +22,23 @@ const emit = defineEmits<{
 
 const formattedOptions: ComputedRef<[any, string][]> = computed(() => {
   if (Array.isArray(props.options)) {
-    return props.options.map(option => {
+    return props.options.map((option) => {
       if (typeof option === 'string' || typeof option === 'number') {
         return [option, String(option)] as [any, string]
-      } else {
+      }
+      else {
         return [option.value, option.label] as [any, string]
       }
     })
-  } else {
+  }
+  else {
     return Object.entries(props.options)
   }
 })
 
 const selectedLabel = computed(() => formattedOptions.value.find(([value]) => value === props.modelValue)?.[1])
 
-function selectValue (value: any, hide: () => void) {
+function selectValue(value: any, hide: () => void) {
   emit('update:modelValue', value)
   hide()
 }
@@ -113,5 +116,4 @@ function selectValue (value: any, hide: () => void) {
 .v-popper__popper:focus-visible {
   outline: none;
 }
-
 </style>

package/src/components/select/HstSelect.story.vue

@@ -16,7 +16,7 @@ const objectOptions = Object.keys(options).map(key => ({
 
 const numberOptions = [0, 1, 2, 3, 4, 5]
 
-function initState () {
+function initState() {
   return {
     label: 'My really long label',
     select: 'crash-bandicoot',

package/src/components/select/HstSelect.vue

@@ -6,8 +6,8 @@ export default {
 
 <script lang="ts" setup>
 import HstWrapper from '../HstWrapper.vue'
+import type { HstControlOption } from '../../types'
 import CustomSelect from './CustomSelect.vue'
-import { HstControlOption } from '../../types'
 
 defineProps<{
   title?: string

package/src/components/slider/HstSlider.vue

@@ -8,8 +8,8 @@ export default {
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
 import type { CSSProperties } from 'vue'
-import HstWrapper from '../HstWrapper.vue'
 import { VTooltip as vTooltip } from 'floating-vue'
+import HstWrapper from '../HstWrapper.vue'
 
 const props = defineProps<{
   title?: string
@@ -27,7 +27,7 @@ const input = ref<HTMLInputElement>(null)
 
 const numberModel = computed({
   get: () => props.modelValue,
-  set: value => {
+  set: (value) => {
     emit('update:modelValue', value)
   },
 })
@@ -41,7 +41,7 @@ const tooltipStyle = computed<CSSProperties>(() => {
   if (input.value) {
     const position = gap + ((input.value.clientWidth - 2 * gap) * percentage.value)
     return {
-      left: position + 'px',
+      left: `${position}px`,
     }
   }
   return {}

package/src/components/text/HstText.story.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import HstText from './HstText.vue'
 
-function initState () {
+function initState() {
   return {
     label: 'My really long label',
     text: '',

package/src/components/textarea/HstTextarea.story.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import HstTextarea from './HstTextarea.vue'
 
-function initState () {
+function initState() {
   return {
     text: '',
   }

package/tailwind.config.cjs

@@ -1,4 +1,4 @@
-const path = require('path')
+const path = require('node:path')
 const inheritedConfig = require('../../tailwind.config.cjs')
 
 module.exports = {

package/tsconfig.json

@@ -1,34 +1,16 @@
 {
   "compilerOptions": {
     "target": "ESNext",
-    "module": "ESNext",
-    "moduleResolution": "node",
-    "outDir": "dist",
-    "rootDir": "src",
-    "baseUrl": ".",
-    "allowSyntheticDefaultImports": true,
-    "esModuleInterop": true,
-    "removeComments": false,
-    "resolveJsonModule": true,
-    "skipLibCheck": true,
-    "types": [
-      "node"
-    ],
+    // Volar
+    "jsx": "preserve",
     "lib": [
       "ESNext",
       "DOM"
     ],
-    "sourceMap": false,
-    "preserveWatchOutput": true,
-    "preserveSymlinks": true,
-    // Strict
-    "noImplicitAny": false,
-    "noImplicitThis": true,
-    "alwaysStrict": true,
-    "strictBindCallApply": true,
-    "strictFunctionTypes": true,
-    // Volar
-    "jsx": "preserve",
+    "baseUrl": ".",
+    "rootDir": "src",
+    "module": "ESNext",
+    "moduleResolution": "node",
     // Alias
     "paths": {
       "floating-vue": ["./node_modules/@histoire/vendors/floating-vue"],
@@ -38,7 +20,25 @@
       "vue-router": ["./node_modules/@histoire/vendors/vue-router"],
       "@vueuse/core": ["./node_modules/@histoire/vendors/vue-use"],
       "vue": ["./node_modules/@histoire/vendors/vue"]
-    }
+    },
+    "resolveJsonModule": true,
+    "types": [
+      "node"
+    ],
+    "strictBindCallApply": true,
+    "strictFunctionTypes": true,
+    "alwaysStrict": true,
+    // Strict
+    "noImplicitAny": false,
+    "noImplicitThis": true,
+    "outDir": "dist",
+    "removeComments": false,
+    "sourceMap": false,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "preserveSymlinks": true,
+    "skipLibCheck": true,
+    "preserveWatchOutput": true
   },
   "include": [
     "src"

package/vite.config.ts

@@ -11,14 +11,14 @@ export default defineConfig({
     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',
-      },
+          '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: {