@histoire/controls 0.7.8 → 0.8.1

package/dist/style-standalone.css

@@ -299,6 +299,10 @@
   margin-bottom:0.5rem
 }
 
+.htw-mr-2{
+  margin-right:0.5rem
+}
+
 .htw-ml-auto{
   margin-left:auto
 }
@@ -319,6 +323,10 @@
   display:grid
 }
 
+.htw-hidden{
+  display:none
+}
+
 .htw-h-4{
   height:1rem
 }
@@ -407,6 +415,12 @@
   flex-grow:1
 }
 
+.htw-scale-0{
+  --tw-scale-x:0;
+  --tw-scale-y:0;
+  transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
+}
+
 .htw-cursor-pointer{
   cursor:pointer
 }
@@ -569,6 +583,14 @@
   background-color:rgb(16 185 129 / var(--tw-bg-opacity)) !important
 }
 
+.htw-fill-primary-500{
+  fill:#10b981
+}
+
+.htw-fill-transparent{
+  fill:transparent
+}
+
 .htw-stroke-white{
   stroke:#fff
 }
@@ -672,6 +694,10 @@
   transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)
 }
 
+.htw-will-change-transform{
+  will-change:transform
+}
+
 body {
   font-size: 1.125rem;
 }
@@ -711,6 +737,11 @@ body {
   border-color:rgb(16 185 129 / var(--tw-border-opacity))
 }
 
+.htw-group:hover .group-hover\:htw-border-primary-500{
+  --tw-border-opacity:1;
+  border-color:rgb(16 185 129 / var(--tw-border-opacity))
+}
+
 .htw-group:active .group-active\:htw-bg-gray-500\/20{
   background-color:rgb(113 113 122 / 0.2)
 }

package/dist/types.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@histoire/controls",
-  "version": "0.7.8",
+  "version": "0.8.1",
   "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.1"
   },
   "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.8",
+    "histoire": "0.8.1",
     "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/checkbox/HstCheckbox.vue

@@ -28,9 +28,11 @@ const path = ref<SVGPathElement>()
 const dasharray = ref(0)
 const progress = computed(() => props.modelValue ? 1 : 0)
 const dashoffset = computed(() => (1 - progress.value) * dasharray.value)
+
+// animationEnabled prevents the animation from triggering on mounted
 const animationEnabled = ref(false)
 
-watch(path, value => {
+watch(path, () => {
   dasharray.value = path.value.getTotalLength?.() ?? 21.21
 })
 </script>

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

@@ -0,0 +1,47 @@
+<script lang="ts" setup>
+import HstRadio from './HstRadio.vue'
+
+const options = {
+  'crash-bandicoot': 'Crash Bandicoot',
+  'the-last-of-us': 'The Last of Us',
+  'ghost-of-tsushima': 'Ghost of Tsushima',
+}
+
+const flatOptions = Object.keys(options)
+
+const objectOptions = Object.keys(options).map(key => ({
+  label: options[key],
+  value: key,
+}))
+
+function initState () {
+  return {
+    character: flatOptions[0],
+  }
+}
+</script>
+
+<template>
+  <Story title="HstRadio">
+    <Variant
+      title="playground"
+      :init-state="initState"
+    >
+      <template #default="{ state }">
+        <HstRadio
+          v-model="state.character"
+          title="Label"
+          :options="objectOptions"
+        />
+      </template>
+
+      <template #controls="{ state }">
+        <HstRadio
+          v-model="state.character"
+          title="Label"
+          :options="objectOptions"
+        />
+      </template>
+    </Variant>
+  </Story>
+</template>

package/src/components/radio/HstRadio.vue

@@ -0,0 +1,107 @@
+<script lang="ts">
+export default {
+  name: 'HstRadio',
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, ComputedRef, ref } from 'vue'
+import HstWrapper from '../HstWrapper.vue'
+import { HstControlOption } from '../../types'
+
+const props = defineProps<{
+  title?: string
+  modelValue: string
+  options: HstControlOption[]
+}>()
+
+const formattedOptions: ComputedRef<Record<string, string>> = computed(() => {
+  if (Array.isArray(props.options)) {
+    return Object.fromEntries(props.options.map((value: string | HstControlOption) => {
+      if (typeof value === 'string') {
+        return [value, value]
+      } else {
+        return [value.value, value.label]
+      }
+    }))
+  }
+  return props.options
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+}>()
+
+function selectOption (value: string) {
+  emit('update:modelValue', value)
+  animationEnabled.value = true
+}
+
+// animationEnabled prevents the animation from triggering on mounted
+const animationEnabled = ref(false)
+</script>
+
+<template>
+  <HstWrapper
+    role="group"
+    :title="title"
+    class="htw-cursor-text"
+    :class="$attrs.class"
+    :style="$attrs.style"
+  >
+    <div class="-htw-my-1">
+      <template
+        v-for="( label, value ) in formattedOptions"
+        :key="value"
+      >
+        <input
+          :id="`${value}-radio`"
+          type="radio"
+          :name="`${value}-radio`"
+          :value="value"
+          :checked="value === modelValue"
+          class="htw-hidden"
+          @change="selectOption(value)"
+        >
+        <label
+          tabindex="0"
+          :for="`${value}-radio`"
+          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)"
+        >
+          <svg
+            width="16"
+            height="16"
+            viewBox="-12 -12 24 24"
+            class="htw-relative htw-z-10 htw-border htw-border-solid  htw-text-inherit htw-rounded-full htw-box-border htw-inset-0 htw-transition-border htw-duration-150 htw-ease-out htw-mr-2 group-hover:htw-border-primary-500"
+            :class="[
+              modelValue === value
+                ? 'htw-border-primary-500'
+                : 'htw-border-black/25 dark:htw-border-white/25',
+            ]"
+          >
+            <circle
+              r="7"
+              class="htw-will-change-transform"
+              :class="[
+                animationEnabled ? 'htw-transition-all' : 'htw-transition-none',
+                {
+                  'htw-delay-150': modelValue === value,
+                },
+                modelValue === value
+                  ? 'htw-fill-primary-500'
+                  : 'htw-fill-transparent htw-scale-0',
+              ]"
+            />
+          </svg>
+          {{ label }}
+        </label>
+      </template>
+    </div>
+
+    <template #actions>
+      <slot name="actions" />
+    </template>
+  </HstWrapper>
+</template>

package/src/components/select/CustomSelect.vue

@@ -8,15 +8,11 @@ export default {
 import { Dropdown as VDropdown } from 'floating-vue'
 import { computed, ComputedRef } from 'vue'
 import { Icon } from '@iconify/vue'
-
-export interface SelectOption {
-  label: string
-  value: string
-}
+import { HstControlOption } from '../../types'
 
 const props = defineProps<{
   modelValue: string
-  options: Record<string, string> | string[] | SelectOption[]
+  options: Record<string, string> | string[] | HstControlOption[]
 }>()
 
 const emits = defineEmits<{
@@ -25,7 +21,7 @@ const emits = defineEmits<{
 
 const formattedOptions: ComputedRef<Record<string, string>> = computed(() => {
   if (Array.isArray(props.options)) {
-    return Object.fromEntries(props.options.map((value: string | SelectOption) => {
+    return Object.fromEntries(props.options.map((value: string | HstControlOption) => {
       if (typeof value === 'string') {
         return [value, value]
       } else {

package/src/components/select/HstSelect.vue

@@ -2,26 +2,22 @@
 export default {
   name: 'HstSelect',
 }
-
-export type { SelectOption as HstSelectOption } from './CustomSelect.vue'
 </script>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
 import HstWrapper from '../HstWrapper.vue'
-import CustomSelect, { SelectOption } from './CustomSelect.vue'
+import CustomSelect from './CustomSelect.vue'
+import { HstControlOption } from '../../types'
 
-const props = defineProps<{
+defineProps<{
   title?: string
   modelValue: string
-  options: Record<string, string> | string[] | SelectOption[]
+  options: Record<string, string> | string[] | HstControlOption[]
 }>()
 
 const emits = defineEmits<{
   (e: 'update:modelValue', value: string): void
 }>()
-
-const select = ref<HTMLInputElement>()
 </script>
 
 <template>

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'
@@ -9,25 +8,30 @@ import HstColorShadesVue from './components/design-tokens/HstColorShades.vue'
 import HstTokenListVue from './components/design-tokens/HstTokenList.vue'
 import HstTokenGridVue from './components/design-tokens/HstTokenGrid.vue'
 import HstCopyIconVue from './components/HstCopyIcon.vue'
+import HstRadioVue from './components/radio/HstRadio.vue'
 
 export const HstCheckbox = HstCheckboxVue
 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)
+export const components = {
+  HstCheckbox,
+  HstText,
+  HstNumber,
+  HstSlider,
+  HstTextarea,
+  HstSelect,
+  HstColorShades,
+  HstTokenList,
+  HstTokenGrid,
+  HstCopyIcon,
+  HstRadio,
 }

package/src/types.ts

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

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',
-    ],
-  },
 })

package/.histoire/dist/__sandbox.html

@@ -1,16 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <title>Histoire controls</title>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width,initial-scale=1">
-  <meta name="description" content="">
-  <link rel="stylesheet" href="/assets/style.dc851298.css">
-    <link rel="icon" type="image/svg+xml" href="/histoire.svg"/>
-    
-</head>
-<body>
-  <div id="app"></div>
-    <script type="module" src="/assets/bundle-sandbox.f56c0808.js"></script>
-</body>
-</html>

package/.histoire/dist/assets/BaseEmpty.c5ebb434.js

@@ -1,11 +0,0 @@
-import { a as openBlock, b as createElementBlock, f as renderSlot } from "./vendor.31c91490.js";
-import { _ as _export_sfc } from "./bundle-main.c70a2b14.js";
-const _sfc_main = {};
-const _hoisted_1 = { class: "htw-base-empty htw-flex htw-flex-col htw-items-center htw-justify-center htw-space-y-4 htw-py-12 htw-h-full htw-text-center htw-text-gray-400 htw-text-lg" };
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", _hoisted_1, [
-    renderSlot(_ctx.$slots, "default", {}, void 0, true)
-  ]);
-}
-var BaseEmpty = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-552cc113"]]);
-export { BaseEmpty as B };

package/.histoire/dist/assets/HomeView.2d2d0dfe.js

@@ -1,24 +0,0 @@
-import { d as defineComponent, c as computed, a as openBlock, b as createElementBlock, e as createBaseVNode, i as unref } from "./vendor.31c91490.js";
-import { h as histoireConfig, c as customLogos } from "./global-components.d165b38c.js";
-var HistoireLogo = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgoKPHN2ZwogICB3aWR0aD0iNTEyIgogICBoZWlnaHQ9IjUxMiIKICAgdmlld0JveD0iMCAwIDUxMiA1MTIiCiAgIHZlcnNpb249IjEuMSIKICAgaWQ9InN2ZzUiCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGRlZnMKICAgICBpZD0iZGVmczIiIC8+CiAgPGcKICAgICBpZD0ibGF5ZXIxIj4KICAgIDxyZWN0CiAgICAgICBzdHlsZT0ib3BhY2l0eTowLjU7ZmlsbDojMzRkMzk5O2ZpbGwtb3BhY2l0eToxO3N0cm9rZS13aWR0aDoxLjAwMzc1IgogICAgICAgaWQ9InJlY3QxMzcyIgogICAgICAgd2lkdGg9IjMxNC4zMDkyMyIKICAgICAgIGhlaWdodD0iNDA2LjYwOTAxIgogICAgICAgeD0iLTI2LjU2NTA2MyIKICAgICAgIHk9IjEzNC43NTA3OSIKICAgICAgIHRyYW5zZm9ybT0icm90YXRlKC0yMy44MjEyNjIpIgogICAgICAgcnk9IjgiIC8+CiAgICA8cmVjdAogICAgICAgc3R5bGU9ImZpbGw6IzM0ZDM5OTtmaWxsLW9wYWNpdHk6MTtzdHJva2Utd2lkdGg6MS4wMDM3NSIKICAgICAgIGlkPSJyZWN0ODUwIgogICAgICAgd2lkdGg9IjMxNC4zMDkyMyIKICAgICAgIGhlaWdodD0iNDA2LjYwOTAxIgogICAgICAgeD0iNzcuNTcxODM4IgogICAgICAgeT0iNzIuODA4NzA4IgogICAgICAgcnk9IjgiCiAgICAgICB0cmFuc2Zvcm09InJvdGF0ZSgtNC41NzQ0NTM0KSIgLz4KICA8L2c+CiAgPGcKICAgICBpZD0ibGF5ZXIzIj4KICAgIDxwYXRoCiAgICAgICBpZD0icGF0aDE2NTctMyIKICAgICAgIHN0eWxlPSJkaXNwbGF5OmlubGluZTtmaWxsOiNiNGZhZTI7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiNiNGZhZTI7c3Ryb2tlLXdpZHRoOjguMzQ5MjM7c3Ryb2tlLWxpbmVjYXA6YnV0dDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIKICAgICAgIGQ9Ik0gMzU5LjM4OTQ3LDM1NS45NTEzNCAzMjAuNzI5MzUsMTc2LjUyOTQyIDIzOC4zNDYxMywyMzguOTQxMTggWiBNIDI3My42NDEyNCwyNzMuMDY2MDggMTUyLjU5Nzg4LDE1Ni4wNTU5MSAxOTEuMjU4MDQsMzM1LjQ3Nzg2IFoiIC8+CiAgPC9nPgogIDxnCiAgICAgaWQ9ImxheWVyMiIKICAgICBzdHlsZT0iZGlzcGxheTpub25lIj4KICAgIDxwYXRoCiAgICAgICBpZD0icGF0aDE2NTciCiAgICAgICBzdHlsZT0iZmlsbDojYjRmYWUyO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojYjRmYWUyO3N0cm9rZS13aWR0aDo4O3N0cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiCiAgICAgICBkPSJtIDI5NiwxMDMuOTgyNDIgLTEzNS41MzEyNSwxNzcuOTY2OCBoIDg4LjcwMTE3IHogTSAyNjIuODMwMDgsMjMwLjA1MDc4IDIxNiw0MDguMDE3NTggMzUxLjUzMTI1LDIzMC4wNTA3OCBaIgogICAgICAgdHJhbnNmb3JtPSJyb3RhdGUoLTQuMTU2NTUzLDI1NiwyNTYuMDA2OTEpIiAvPgogIDwvZz4KPC9zdmc+Cg==";
-const _hoisted_1 = { class: "htw-flex htw-items-center htw-justify-center htw-h-full" };
-const _hoisted_2 = ["src"];
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  name: "HomeView",
-  setup(__props) {
-    const logoUrl = computed(() => {
-      var _a, _b;
-      return ((_b = (_a = histoireConfig.theme) == null ? void 0 : _a.logo) == null ? void 0 : _b.square) ? customLogos.square : HistoireLogo;
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1, [
-        createBaseVNode("img", {
-          src: unref(logoUrl),
-          alt: "Logo",
-          class: "htw-w-64 htw-h-64 htw-opacity-25"
-        }, null, 8, _hoisted_2)
-      ]);
-    };
-  }
-});
-export { _sfc_main as default };