@histoire/controls 0.4.4 → 0.5.0

package/dist/style-standalone.css

@@ -28,7 +28,8 @@
 .v-popper__popper{
   z-index:10000;
   top:0;
-  left:0
+  left:0;
+  outline:none
 }
 
 .v-popper__popper.v-popper__popper--hidden{
@@ -294,6 +295,10 @@
   margin-bottom:0.5rem
 }
 
+.htw-ml-auto{
+  margin-left:auto
+}
+
 .htw-box-border{
   box-sizing:border-box
 }
@@ -334,6 +339,10 @@
   height:5rem
 }
 
+.htw-h-\[27px\]{
+  height:27px
+}
+
 .htw-min-h-\[26px\]{
   min-height:26px
 }
@@ -366,6 +375,10 @@
   flex:none
 }
 
+.htw-flex-1{
+  flex:1 1 0%
+}
+
 .htw-shrink-0{
   flex-shrink:0
 }
@@ -425,14 +438,14 @@
   gap:0.5rem
 }
 
-.htw-gap-4{
-  gap:1rem
-}
-
 .htw-gap-1{
   gap:0.25rem
 }
 
+.htw-gap-4{
+  gap:1rem
+}
+
 .htw-overflow-hidden{
   overflow:hidden
 }
@@ -488,6 +501,11 @@
   border-color:rgb(0 0 0 / 0.25)
 }
 
+.htw-border-gray-850{
+  --tw-border-opacity:1;
+  border-color:rgb(31 31 33 / var(--tw-border-opacity))
+}
+
 .htw-bg-white{
   --tw-bg-opacity:1;
   background-color:rgb(255 255 255 / var(--tw-bg-opacity))
@@ -510,6 +528,16 @@
   background-color:rgb(250 250 250 / var(--tw-bg-opacity))
 }
 
+.htw-bg-primary-200{
+  --tw-bg-opacity:1;
+  background-color:rgb(167 243 208 / var(--tw-bg-opacity))
+}
+
+.htw-bg-gray-700{
+  --tw-bg-opacity:1;
+  background-color:rgb(63 63 70 / var(--tw-bg-opacity))
+}
+
 .htw-stroke-white{
   stroke:#fff
 }
@@ -550,6 +578,10 @@
   line-height:1rem
 }
 
+.htw-leading-normal{
+  line-height:1.5
+}
+
 .htw-text-white{
   --tw-text-opacity:1;
   color:rgb(255 255 255 / var(--tw-text-opacity))
@@ -619,6 +651,11 @@ body {
   }
 }
 
+.hover\:htw-border-primary-500:hover{
+  --tw-border-opacity:1;
+  border-color:rgb(16 185 129 / var(--tw-border-opacity))
+}
+
 .hover\:htw-bg-primary-100:hover{
   --tw-bg-opacity:1;
   background-color:rgb(209 250 229 / var(--tw-bg-opacity))
@@ -651,16 +688,36 @@ body {
   background-color:rgb(0 0 0 / var(--tw-bg-opacity))
 }
 
+.htw-dark .dark\:htw-bg-gray-700{
+  --tw-bg-opacity:1;
+  background-color:rgb(63 63 70 / var(--tw-bg-opacity))
+}
+
+.htw-dark .dark\:htw-bg-primary-800{
+  --tw-bg-opacity:1;
+  background-color:rgb(6 95 70 / var(--tw-bg-opacity))
+}
+
 .htw-dark .dark\:htw-bg-gray-600{
   --tw-bg-opacity:1;
   background-color:rgb(82 82 91 / var(--tw-bg-opacity))
 }
 
+.htw-dark .dark\:hover\:htw-border-primary-500:hover{
+  --tw-border-opacity:1;
+  border-color:rgb(16 185 129 / var(--tw-border-opacity))
+}
+
 .htw-dark .dark\:hover\:htw-bg-primary-800:hover{
   --tw-bg-opacity:1;
   background-color:rgb(6 95 70 / var(--tw-bg-opacity))
 }
 
+.htw-dark .dark\:hover\:htw-bg-primary-700:hover{
+  --tw-bg-opacity:1;
+  background-color:rgb(4 120 87 / var(--tw-bg-opacity))
+}
+
 .htw-dark .dark\:focus\:htw-border-primary-500:focus{
   --tw-border-opacity:1;
   border-color:rgb(16 185 129 / var(--tw-border-opacity))

package/dist/style.css

@@ -1 +1 @@
-.htw-bind-col-size{grid-template-columns:repeat(auto-fill,minmax(var(--histoire-col-size),1fr))}
+.v-popper{line-height:0}.htw-dark .v-popper--theme-dropdown .v-popper__inner{--tw-border-opacity: 1;border-color:rgb(31 31 33 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(63 63 70 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(244 244 245 / var(--tw-text-opacity))}.htw-dark .v-popper--theme-dropdown .v-popper__arrow-inner{--tw-border-opacity: 1;border-color:rgb(63 63 70 / var(--tw-border-opacity))}.htw-dark .v-popper--theme-dropdown .v-popper__arrow-outer{--tw-border-opacity: 1;border-color:rgb(31 31 33 / var(--tw-border-opacity))}.v-popper--theme-dropdown.v-popper__popper--show-from .v-popper__wrapper{transform:scale(.75)}.v-popper--theme-dropdown.v-popper__popper--show-to .v-popper__wrapper{transform:none;transition:transform .15s cubic-bezier(0,1,.5,1)}.v-popper__popper:focus-visible{outline:none}.htw-bind-col-size{grid-template-columns:repeat(auto-fill,minmax(var(--histoire-col-size),1fr))}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@histoire/controls",
-  "version": "0.4.4",
+  "version": "0.5.0",
   "description": "Prebuilt controls components",
   "license": "MIT",
   "author": {
@@ -37,14 +37,14 @@
   },
   "devDependencies": {
     "@peeky/test": "^0.13.5",
-    "@types/node": "^17.0.23",
+    "@types/node": "^17.0.32",
     "@vitejs/plugin-vue": "^2.3.1",
     "@vue/test-utils": "^2.0.0-rc.19",
     "@vueuse/core": "^8.2.5",
     "autoprefixer": "^10.4.4",
     "concurrently": "^7.1.0",
     "floating-vue": "^2.0.0-beta.16",
-    "histoire": "0.4.4",
+    "histoire": "0.5.0",
     "postcss": "^8.4.12",
     "postcss-import": "^14.1.0",
     "tailwindcss": "^3.0.23",

package/src/components/HstWrapper.vue

@@ -24,8 +24,11 @@ const props = defineProps<{
     >
       {{ title }}
     </span>
-    <span class="htw-block htw-grow">
-      <slot />
+    <span class="htw-grow htw-flex htw-items-center htw-gap-1">
+      <span class="htw-block htw-grow">
+        <slot />
+      </span>
+      <slot name="actions" />
     </span>
   </label>
 </template>

package/src/components/checkbox/HstCheckbox.vue

@@ -76,5 +76,9 @@ watch(path, value => {
         />
       </svg>
     </div>
+
+    <template #actions>
+      <slot name="actions" />
+    </template>
   </HstWrapper>
 </template>

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

@@ -9,26 +9,28 @@ exports[`HstCheckbox toggle to checked 1`] = `
   <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-block htw-grow">
-    <div class="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 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-all"
-          stroke-dasharray="21.21"
-          stroke-dashoffset="21.21"
+  <span class="htw-grow htw-flex htw-items-center htw-gap-1">
+    <span class="htw-block htw-grow">
+      <div class="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 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>
-      </svg>
-    </div>
+          <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-all"
+            stroke-dasharray="21.21"
+            stroke-dashoffset="21.21"
+          >
+          </path>
+        </svg>
+      </div>
+    </span>
   </span>
 </label>
 `;
@@ -42,26 +44,28 @@ exports[`HstCheckbox toggle to unchecked 1`] = `
   <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-block htw-grow">
-    <div class="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 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-all htw-delay-150"
-          stroke-dasharray="21.21"
-          stroke-dashoffset="0"
+  <span class="htw-grow htw-flex htw-items-center htw-gap-1">
+    <span class="htw-block htw-grow">
+      <div class="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 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>
-      </svg>
-    </div>
+          <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-all htw-delay-150"
+            stroke-dasharray="21.21"
+            stroke-dashoffset="0"
+          >
+          </path>
+        </svg>
+      </div>
+    </span>
   </span>
 </label>
 `;

package/src/components/number/HstNumber.vue

@@ -88,5 +88,9 @@ onUnmounted(() => {
       }"
       class="htw-text-inherit htw-bg-transparent htw-w-full htw-outline-none htw-pl-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 htw-cursor-ew-resize"
     >
+
+    <template #actions>
+      <slot name="actions" />
+    </template>
   </HstWrapper>
 </template>

package/src/components/select/CustomSelect.vue

@@ -0,0 +1,119 @@
+<script lang="ts">
+export default {
+  name: 'CustomSelect',
+}
+</script>
+
+<script lang="ts" setup>
+import { Dropdown as VDropdown } from 'floating-vue'
+import { computed, ComputedRef } from 'vue'
+import { Icon } from '@iconify/vue'
+
+export interface SelectOption {
+  label: string
+  value: string
+}
+
+const props = defineProps<{
+  modelValue: string
+  options: Record<string, string> | string[] | SelectOption[]
+}>()
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+}>()
+
+const formattedOptions: ComputedRef<Record<string, string>> = computed(() => {
+  if (Array.isArray(props.options)) {
+    return Object.fromEntries(props.options.map((value: string | SelectOption) => {
+      if (typeof value === 'string') {
+        return [value, value]
+      } else {
+        return [value.value, value.label]
+      }
+    }))
+  }
+  return props.options
+})
+
+const selectedLabel = computed(() => formattedOptions.value[props.modelValue])
+
+function selectValue (value: string, hide: () => void) {
+  emits('update:modelValue', value)
+  hide()
+}
+</script>
+
+<template>
+  <VDropdown
+    auto-size
+  >
+    <div
+      class="htw-cursor-pointer htw-w-full htw-outline-none htw-px-2 htw-h-[27px] -htw-my-1 htw-border htw-border-solid htw-border-black/25 dark:htw-border-white/25 hover:htw-border-primary-500 dark:hover:htw-border-primary-500 htw-rounded-sm htw-flex htw-gap-2 htw-items-center htw-leading-normal"
+    >
+      <div class="htw-flex-1 htw-truncate">
+        <slot :label="selectedLabel">
+          {{ selectedLabel }}
+        </slot>
+      </div>
+      <Icon
+        icon="carbon:chevron-sort"
+        class="htw-w-4 htw-h-4 htw-flex-none htw-ml-auto"
+      />
+    </div>
+    <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-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"
+          :class="{
+            'htw-bg-primary-200 dark:htw-bg-primary-800': props.modelValue === value,
+          }"
+          @click="selectValue(value, hide)"
+        >
+          {{ label }}
+        </div>
+      </div>
+    </template>
+  </VDropdown>
+</template>
+
+<style lang="postcss">
+/* @TODO custom themes */
+
+.v-popper {
+  line-height: 0;
+}
+
+.v-popper--theme-dropdown {
+  .htw-dark & {
+    .v-popper__inner {
+      @apply htw-bg-gray-700 htw-border-gray-850 htw-text-gray-100;
+    }
+
+    .v-popper__arrow-inner {
+      @apply htw-border-gray-700;
+    }
+
+    .v-popper__arrow-outer {
+      @apply htw-border-gray-850;
+    }
+  }
+
+  &.v-popper__popper--show-from .v-popper__wrapper {
+    transform: scale(.75);
+  }
+
+  &.v-popper__popper--show-to .v-popper__wrapper {
+    transform: none;
+    transition: transform .15s cubic-bezier(0, 1, .5, 1);
+  }
+}
+
+.v-popper__popper:focus-visible {
+  outline: none;
+}
+
+</style>

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

@@ -1,13 +1,18 @@
 <script lang="ts" setup>
 import HstSelect from './HstSelect.vue'
 
-const options = [
-  { label: 'Crash Bandicoot', value: 'crash-bandicoot' },
-  { label: 'The Last of Us', value: 'the-last-of-us' },
-  { label: 'Ghost of Tsushima', value: 'ghost-of-tsushima' },
-]
+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 flatOptions = options.map(option => option.label)
+const objectOptions = Object.keys(options).map(key => ({
+  label: options[key],
+  value: key,
+}))
 
 function initState () {
   return {
@@ -66,7 +71,7 @@ function initState () {
     </Variant>
 
     <Variant
-      title="options-as-array-of-objects"
+      title="options-as-object"
       :init-state="initState"
     >
       <template #default="{ state }">
@@ -86,6 +91,27 @@ function initState () {
       </template>
     </Variant>
 
+    <Variant
+      title="options-as-array-of-objects"
+      :init-state="initState"
+    >
+      <template #default="{ state }">
+        <pre class="htw-text-xs htw-bg-gray-50 dark:htw-bg-gray-600 htw-rounded htw-p-4">{{ objectOptions }}</pre>
+        <HstSelect
+          v-model="state.select"
+          title="Games"
+          :options="objectOptions"
+        />
+      </template>
+      <template #controls="{ state }">
+        <HstSelect
+          v-model="state.select"
+          title="Games"
+          :options="objectOptions"
+        />
+      </template>
+    </Variant>
+
     <Variant
       title="options-as-array-of-strings"
       :init-state="initState"

package/src/components/select/HstSelect.vue

@@ -2,39 +2,24 @@
 export default {
   name: 'HstSelect',
 }
+
+export type { SelectOption as HstSelectOption } from './CustomSelect.vue'
 </script>
 
 <script lang="ts" setup>
-import { ref, computed, ComputedRef, PropType } from 'vue'
+import { ref } from 'vue'
 import HstWrapper from '../HstWrapper.vue'
+import CustomSelect, { SelectOption } from './CustomSelect.vue'
 
-export interface HstSelectOptions {
-  label: string
-  value: string
-}
-
-const props = defineProps({
-  title: {
-    type: String,
-    default: '',
-  },
-  modelValue: {
-    type: String,
-    default: null,
-  },
-  options: {
-    type: Array as PropType<HstSelectOptions[] | string[]>,
-    required: true,
-    default: () => [],
-  },
-})
+const props = defineProps<{
+  title?: string
+  modelValue: string
+  options: Record<string, string> | string[] | SelectOption[]
+}>()
 
-const formattedOtions: ComputedRef<HstSelectOptions[]> =
-  computed(() => props.options.map(option => typeof option === 'string' ? { label: option, value: option } as HstSelectOptions : option as HstSelectOptions))
-
-const emit = defineEmits({
-  'update:modelValue': (newValue: string) => true,
-})
+const emits = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+}>()
 
 const select = ref<HTMLInputElement>()
 </script>
@@ -45,23 +30,15 @@ const select = ref<HTMLInputElement>()
     class="htw-cursor-text htw-items-center"
     :class="$attrs.class"
     :style="$attrs.style"
-    @click="select.focus()"
   >
-    <select
-      ref="select"
-      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"
-      :value="modelValue"
-      @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
-    >
-      <option
-        v-for="{ label, value } in formattedOtions"
-        v-bind="{ ...$attrs, class: null, style: null }"
-        :key="label"
-        class="dark:htw-bg-gray-600"
-        :value="value"
-      >
-        {{ label }}
-      </option>
-    </select>
+    <CustomSelect
+      :options="options"
+      :model-value="modelValue"
+      @update:model-value="emits('update:modelValue', $event)"
+    />
+
+    <template #actions>
+      <slot name="actions" />
+    </template>
   </HstWrapper>
 </template>

package/src/components/text/HstText.vue

@@ -36,5 +36,9 @@ const input = ref<HTMLInputElement>()
       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="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
     >
+
+    <template #actions>
+      <slot name="actions" />
+    </template>
   </HstWrapper>
 </template>

package/src/components/textarea/HstTextarea.vue

@@ -36,5 +36,9 @@ const input = ref<HTMLInputElement>()
       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 htw-box-border htw-resize-y htw-min-h-[26px]"
       @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
     />
+
+    <template #actions>
+      <slot name="actions" />
+    </template>
   </HstWrapper>
 </template>