@histoire/controls 0.16.4 → 0.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@histoire/controls",
-  "version": "0.16.4",
+  "version": "0.17.0",
   "description": "Prebuilt controls components",
   "license": "MIT",
   "author": {
@@ -31,34 +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.4",
-    "@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.17.0",
+    "@histoire/vendors": "^0.17.0"
   },
   "devDependencies": {
-    "@peeky/server": "^0.14.0",
-    "@peeky/test": "^0.14.1",
-    "@types/node": "^17.0.32",
-    "@vitejs/plugin-vue": "^4.0.0",
+    "@types/node": "^17.0.45",
+    "@vitejs/plugin-vue": "^4.2.3",
     "@vue/runtime-dom": "^3.3.4",
-    "@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",
+    "@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.4.8",
-    "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",
@@ -66,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/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/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/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'
 
@@ -6,15 +8,17 @@ export default defineConfig({
     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: {
@@ -34,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'