@histoire/controls 0.7.9 → 0.8.2

package/dist/types.d.ts

@@ -1,4 +1,4 @@
 export interface HstControlOption {
     label: string;
-    value: string;
+    value: any;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@histoire/controls",
-  "version": "0.7.9",
+  "version": "0.8.2",
   "description": "Prebuilt controls components",
   "license": "MIT",
   "author": {
@@ -31,9 +31,7 @@
     "*.vue"
   ],
   "dependencies": {
-    "@iconify/vue": "^3.2.1",
-    "@vueuse/core": "^8.2.5",
-    "floating-vue": "^2.0.0-beta.16"
+    "@histoire/vendors": "^0.8.2"
   },
   "devDependencies": {
     "@peeky/test": "^0.13.5",
@@ -44,11 +42,11 @@
     "autoprefixer": "^10.4.4",
     "concurrently": "^7.1.0",
     "floating-vue": "^2.0.0-beta.16",
-    "histoire": "0.7.9",
+    "histoire": "0.8.2",
     "postcss": "^8.4.12",
     "postcss-import": "^14.1.0",
     "tailwindcss": "^3.0.23",
-    "typescript": "^4.6.3",
+    "typescript": "^4.7.4",
     "vite": "^2.9.1",
     "vue": "^3.2.31",
     "vue-tsc": "^0.35.2"

package/peeky.config.ts

@@ -0,0 +1,21 @@
+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/components/HstWrapper.vue

@@ -7,7 +7,7 @@ export default {
 <script lang="ts" setup>
 import { VTooltip as vTooltip } from 'floating-vue'
 
-const props = defineProps<{
+defineProps<{
   title?: string
 }>()
 </script>

package/src/components/radio/HstRadio.vue

@@ -32,8 +32,6 @@ const emit = defineEmits<{
   (e: 'update:modelValue', value: string): void
 }>()
 
-const input = ref<HTMLInputElement>()
-
 function selectOption (value: string) {
   emit('update:modelValue', value)
   animationEnabled.value = true

package/src/components/select/CustomSelect.vue

@@ -12,29 +12,30 @@ import { HstControlOption } from '../../types'
 
 const props = defineProps<{
   modelValue: string
-  options: Record<string, string> | string[] | HstControlOption[]
+  options: Record<string, any> | string[] | HstControlOption[]
 }>()
 
 const emits = defineEmits<{
   (e: 'update:modelValue', value: string): void
 }>()
 
-const formattedOptions: ComputedRef<Record<string, string>> = computed(() => {
+const formattedOptions: ComputedRef<[any, string][]> = computed(() => {
   if (Array.isArray(props.options)) {
-    return Object.fromEntries(props.options.map((value: string | HstControlOption) => {
-      if (typeof value === 'string') {
-        return [value, value]
+    return props.options.map(option => {
+      if (typeof option === 'string') {
+        return [option, option] as [string, string]
       } else {
-        return [value.value, value.label]
+        return [option.value, option.label] as [any, string]
       }
-    }))
+    })
+  } else {
+    return Object.entries(props.options)
   }
-  return props.options
 })
 
-const selectedLabel = computed(() => formattedOptions.value[props.modelValue])
+const selectedLabel = computed(() => formattedOptions.value.find(([value]) => value === props.modelValue)?.[1])
 
-function selectValue (value: string, hide: () => void) {
+function selectValue (value: any, hide: () => void) {
   emits('update:modelValue', value)
   hide()
 }
@@ -60,7 +61,7 @@ function selectValue (value: string, hide: () => void) {
     <template #popper="{ hide }">
       <div class="htw-flex htw-flex-col htw-bg-gray-50 dark:htw-bg-gray-700">
         <div
-          v-for="( label, value ) in formattedOptions"
+          v-for="[value, label] of formattedOptions"
           v-bind="{ ...$attrs, class: null, style: null }"
           :key="label"
           class="htw-px-2 htw-py-1 htw-cursor-pointer hover:htw-bg-primary-100 dark:hover:htw-bg-primary-700"

package/src/components/select/HstSelect.vue

@@ -12,11 +12,11 @@ import { HstControlOption } from '../../types'
 defineProps<{
   title?: string
   modelValue: string
-  options: Record<string, string> | string[] | HstControlOption[]
+  options: Record<string, any> | string[] | HstControlOption[]
 }>()
 
 const emits = defineEmits<{
-  (e: 'update:modelValue', value: string): void
+  (e: 'update:modelValue', value: any): void
 }>()
 </script>
 

package/src/components/slider/HstSlider.vue

@@ -64,7 +64,7 @@ const tooltipStyle = computed<CSSProperties>(() => {
         v-model.number="numberModel"
         class="htw-range-input htw-appearance-none htw-border-0 htw-bg-transparent htw-cursor-pointer htw-relative htw-w-full htw-m-0 htw-text-gray-700"
         type="range"
-        v-bind="{ ...$attrs, class: null, style: null }"
+        v-bind="{ ...$attrs, class: null, style: null, min, max }"
         @mouseover="showTooltip = true"
         @mouseleave="showTooltip = false"
       >

package/src/components/text/HstText.vue

@@ -8,7 +8,7 @@ export default {
 import { ref } from 'vue'
 import HstWrapper from '../HstWrapper.vue'
 
-const props = defineProps<{
+defineProps<{
   title?: string
   modelValue: string
 }>()

package/src/components/textarea/HstTextarea.vue

@@ -9,7 +9,7 @@ export default {
 import { ref } from 'vue'
 import HstWrapper from '../HstWrapper.vue'
 
-const props = defineProps<{
+defineProps<{
   title?: string
   modelValue: string
 }>()

package/src/index.ts

@@ -1,4 +1,3 @@
-import type { App } from 'vue'
 import HstCheckboxVue from './components/checkbox/HstCheckbox.vue'
 import HstTextVue from './components/text/HstText.vue'
 import HstNumberVue from './components/number/HstNumber.vue'
@@ -16,21 +15,23 @@ export const HstText = HstTextVue
 export const HstNumber = HstNumberVue
 export const HstSlider = HstSliderVue
 export const HstTextarea = HstTextareaVue
+export const HstSelect = HstSelectVue
 export const HstColorShades = HstColorShadesVue
 export const HstTokenList = HstTokenListVue
 export const HstTokenGrid = HstTokenGridVue
 export const HstCopyIcon = HstCopyIconVue
 export const HstRadio = HstRadioVue
 
-export function registerVueComponents (app: App) {
-  app.component('HstCheckbox', HstCheckboxVue)
-  app.component('HstText', HstTextVue)
-  app.component('HstNumber', HstNumberVue)
-  app.component('HstSlider', HstSliderVue)
-  app.component('HstSelect', HstSelectVue)
-  app.component('HstTextarea', HstTextareaVue)
-  app.component('HstColorShades', HstColorShadesVue)
-  app.component('HstTokenList', HstTokenListVue)
-  app.component('HstTokenGrid', HstTokenGridVue)
-  app.component('HstRadio', HstRadioVue)
+export const components = {
+  HstCheckbox,
+  HstText,
+  HstNumber,
+  HstSlider,
+  HstTextarea,
+  HstSelect,
+  HstColorShades,
+  HstTokenList,
+  HstTokenGrid,
+  HstCopyIcon,
+  HstRadio,
 }

package/src/types.ts

@@ -1,4 +1,4 @@
 export interface HstControlOption {
   label: string
-  value: string
+  value: any
 }

package/tsconfig.json

@@ -29,6 +29,16 @@
     "strictFunctionTypes": true,
     // Volar
     "jsx": "preserve",
+    // Alias
+    "paths": {
+      "floating-vue": ["./node_modules/@histoire/vendors/dist/client/floating-vue"],
+      "@iconify/vue": ["./node_modules/@histoire/vendors/dist/client/iconify"],
+      "pinia": ["./node_modules/@histoire/vendors/dist/client/pinia"],
+      "scroll-into-view-if-needed": ["./node_modules/@histoire/vendors/dist/client/scroll"],
+      "vue-router": ["./node_modules/@histoire/vendors/dist/client/vue-router"],
+      "@vueuse/core": ["./node_modules/@histoire/vendors/dist/client/vue-use"],
+      "vue": ["./node_modules/@histoire/vendors/dist/client/vue"]
+    }
   },
   "include": [
     "src"

package/vite.config.ts

@@ -1,4 +1,3 @@
-/// <reference types="@peeky/test"/>
 /// <reference types="histoire"/>
 
 import { defineConfig } from 'vite'
@@ -9,6 +8,18 @@ export default defineConfig({
     vue(),
   ],
 
+  resolve: {
+    alias: {
+      'floating-vue': '@histoire/vendors/dist/client/floating-vue.js',
+      '@iconify/vue': '@histoire/vendors/dist/client/iconify.js',
+      pinia: '@histoire/vendors/dist/client/pinia.js',
+      'scroll-into-view-if-needed': '@histoire/vendors/dist/client/scroll.js',
+      'vue-router': '@histoire/vendors/dist/client/vue-router.js',
+      '@vueuse/core': '@histoire/vendors/dist/client/vue-use.js',
+      vue: '@histoire/vendors/dist/client/vue.js',
+    },
+  },
+
   build: {
     emptyOutDir: false,
 
@@ -23,7 +34,6 @@ export default defineConfig({
     rollupOptions: {
       external: [
         /@histoire/,
-        'vue',
       ],
     },
   },
@@ -45,11 +55,4 @@ export default defineConfig({
       favicon: '/histoire.svg',
     },
   },
-
-  test: {
-    runtimeEnv: 'dom',
-    previewSetupFiles: [
-      'src/peeky-preview.ts',
-    ],
-  },
 })