@histoire/controls 0.11.0 → 0.11.1

package/dist/style-standalone.css

@@ -324,6 +324,11 @@
   margin:0px
 }
 
+.-htw-my-1{
+  margin-top:-0.25rem;
+  margin-bottom:-0.25rem
+}
+
 .htw-my-0{
   margin-top:0px;
   margin-bottom:0px
@@ -339,19 +344,14 @@
   margin-right:1rem
 }
 
-.-htw-my-1{
-  margin-top:-0.25rem;
-  margin-bottom:-0.25rem
+.htw-mr-2{
+  margin-right:0.5rem
 }
 
 .htw-mb-2{
   margin-bottom:0.5rem
 }
 
-.htw-mr-2{
-  margin-right:0.5rem
-}
-
 .htw-ml-auto{
   margin-left:auto
 }
@@ -380,6 +380,10 @@
   height:1rem
 }
 
+.htw-h-\[22px\]{
+  height:22px
+}
+
 .htw-h-\[16px\]{
   height:16px
 }
@@ -444,14 +448,14 @@
   width:0.75rem
 }
 
-.htw-flex-none{
-  flex:none
-}
-
 .htw-flex-1{
   flex:1 1 0%
 }
 
+.htw-flex-none{
+  flex:none
+}
+
 .htw-shrink-0{
   flex-shrink:0
 }
@@ -474,14 +478,14 @@
   cursor:pointer
 }
 
-.htw-cursor-ew-resize{
-  cursor:ew-resize
-}
-
 .htw-cursor-text{
   cursor:text
 }
 
+.htw-cursor-ew-resize{
+  cursor:ew-resize
+}
+
 .htw-select-none{
   -webkit-user-select:none;
      -moz-user-select:none;
@@ -510,6 +514,10 @@
   flex-wrap:wrap
 }
 
+.htw-flex-nowrap{
+  flex-wrap:nowrap
+}
+
 .htw-items-end{
   align-items:flex-end
 }
@@ -526,6 +534,10 @@
   gap:0.25rem
 }
 
+.htw-gap-px{
+  gap:1px
+}
+
 .htw-gap-4{
   gap:1rem
 }
@@ -552,6 +564,10 @@
   border-radius:0.25rem
 }
 
+.\!htw-rounded-\[3px\]{
+  border-radius:3px !important
+}
+
 .htw-rounded{
   border-radius:0.375rem
 }
@@ -580,20 +596,34 @@
   border-style:solid
 }
 
+.htw-border-black\/25{
+  border-color:rgb(0 0 0 / 0.25)
+}
+
 .htw-border-primary-500{
   --tw-border-opacity:1;
   border-color:rgb(16 185 129 / var(--tw-border-opacity))
 }
 
-.htw-border-black\/25{
-  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-gray-200{
+  --tw-bg-opacity:1;
+  background-color:rgb(228 228 231 / var(--tw-bg-opacity))
+}
+
+.htw-bg-primary-500{
+  --tw-bg-opacity:1;
+  background-color:rgb(16 185 129 / var(--tw-bg-opacity))
+}
+
+.htw-bg-transparent{
+  background-color:transparent
+}
+
 .htw-bg-white{
   --tw-bg-opacity:1;
   background-color:rgb(255 255 255 / var(--tw-bg-opacity))
@@ -607,10 +637,6 @@
   background-color:rgb(113 113 122 / 0.5)
 }
 
-.htw-bg-transparent{
-  background-color:transparent
-}
-
 .htw-bg-gray-50{
   --tw-bg-opacity:1;
   background-color:rgb(250 250 250 / var(--tw-bg-opacity))
@@ -656,10 +682,19 @@
   padding:0.5rem
 }
 
+.htw-p-px{
+  padding:1px
+}
+
 .htw-p-4{
   padding:1rem
 }
 
+.htw-px-1{
+  padding-left:0.25rem;
+  padding-right:0.25rem
+}
+
 .htw-py-1{
   padding-top:0.25rem;
   padding-bottom:0.25rem
@@ -688,6 +723,11 @@
   line-height:1.5
 }
 
+.htw-text-gray-900{
+  --tw-text-opacity:1;
+  color:rgb(24 24 27 / var(--tw-text-opacity))
+}
+
 .htw-text-white{
   --tw-text-opacity:1;
   color:rgb(255 255 255 / var(--tw-text-opacity))
@@ -776,6 +816,20 @@ body {
   background-color:rgb(209 250 229 / var(--tw-bg-opacity))
 }
 
+.hover\:htw-bg-primary-200:hover{
+  --tw-bg-opacity:1;
+  background-color:rgb(167 243 208 / var(--tw-bg-opacity))
+}
+
+.hover\:htw-bg-primary-600:hover{
+  --tw-bg-opacity:1;
+  background-color:rgb(5 150 105 / var(--tw-bg-opacity))
+}
+
+.hover\:htw-bg-gray-500\/20:hover{
+  background-color:rgb(113 113 122 / 0.2)
+}
+
 .hover\:htw-text-primary-500:hover{
   --tw-text-opacity:1;
   color:rgb(16 185 129 / var(--tw-text-opacity))
@@ -803,6 +857,11 @@ body {
   border-color:rgb(255 255 255 / 0.25)
 }
 
+.htw-dark .dark\:htw-bg-gray-750{
+  --tw-bg-opacity:1;
+  background-color:rgb(50 50 56 / var(--tw-bg-opacity))
+}
+
 .htw-dark .dark\:htw-bg-black{
   --tw-bg-opacity:1;
   background-color:rgb(0 0 0 / var(--tw-bg-opacity))
@@ -823,6 +882,16 @@ body {
   background-color:rgb(82 82 91 / var(--tw-bg-opacity))
 }
 
+.htw-dark .dark\:htw-text-gray-100{
+  --tw-text-opacity:1;
+  color:rgb(244 244 245 / var(--tw-text-opacity))
+}
+
+.htw-dark .dark\:htw-text-black{
+  --tw-text-opacity:1;
+  color:rgb(0 0 0 / var(--tw-text-opacity))
+}
+
 .htw-dark .dark\:hover\:htw-border-primary-500:hover{
   --tw-border-opacity:1;
   border-color:rgb(16 185 129 / var(--tw-border-opacity))
@@ -833,6 +902,11 @@ body {
   background-color:rgb(6 95 70 / var(--tw-bg-opacity))
 }
 
+.htw-dark .dark\:hover\:htw-bg-primary-900:hover{
+  --tw-bg-opacity:1;
+  background-color:rgb(6 78 59 / 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))
@@ -842,3 +916,8 @@ body {
   --tw-border-opacity:1;
   border-color:rgb(16 185 129 / var(--tw-border-opacity))
 }
+
+.htw-group:hover .htw-dark .group-hover\:dark\:htw-border-primary-500{
+  --tw-border-opacity:1;
+  border-color:rgb(16 185 129 / var(--tw-border-opacity))
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@histoire/controls",
-  "version": "0.11.0",
+  "version": "0.11.1",
   "description": "Prebuilt controls components",
   "license": "MIT",
   "author": {
@@ -31,7 +31,7 @@
     "*.vue"
   ],
   "dependencies": {
-    "@histoire/vendors": "^0.11.0"
+    "@histoire/vendors": "^0.11.1"
   },
   "devDependencies": {
     "@peeky/server": "^0.14.0",

package/src/components/HstWrapper.vue

@@ -5,15 +5,23 @@ export default {
 </script>
 
 <script lang="ts" setup>
+import { withDefaults, computed } from 'vue'
 import { VTooltip as vTooltip } from 'floating-vue'
 
-defineProps<{
+const props = withDefaults(defineProps<{
   title?: string
-}>()
+  tag?: string
+}>(), {
+  tag: 'label',
+})
+
 </script>
 
 <template>
-  <label class="htw-p-2 hover:htw-bg-primary-100 dark:hover:htw-bg-primary-800 htw-flex htw-gap-2 htw-flex-wrap">
+  <component
+    :is="tag"
+    class="htw-p-2 hover:htw-bg-primary-100 dark:hover:htw-bg-primary-800 htw-flex htw-gap-2 htw-flex-wrap"
+  >
     <span
       v-tooltip="{
         content: title,
@@ -30,5 +38,5 @@ defineProps<{
       </span>
       <slot name="actions" />
     </span>
-  </label>
+  </component>
 </template>

package/src/components/button/HstButton.story.vue

@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import HstButton from './HstButton.vue'
+
+const variants: Array<{name: string, bind?: unknown}> = [
+  { name: 'Default' },
+  { name: 'Primary', bind: { color: 'primary' } },
+  { name: 'Flat', bind: { color: 'flat' } },
+]
+</script>
+
+<template>
+  <Story
+    title="HstButton"
+    group="controls"
+    :layout="{ type: 'grid', width: '200px', iframe: false }"
+  >
+    <Variant
+      v-for="(variant, key) of variants"
+      :key="key"
+      :title="variant.name"
+    >
+      <HstButton
+        v-bind="variant.bind"
+        class="htw-p-2"
+      >
+        Click me!
+      </HstButton>
+    </Variant>
+  </Story>
+</template>

package/src/components/button/HstButton.vue

@@ -0,0 +1,26 @@
+<script lang="ts">
+export default {
+  name: 'HstButton',
+}
+</script>
+
+<script setup lang="ts">
+const colors = {
+  default: 'htw-bg-gray-200 dark:htw-bg-gray-750 htw-text-gray-900 dark:htw-text-gray-100 hover:htw-bg-primary-200 dark:hover:htw-bg-primary-900',
+  primary: 'htw-bg-primary-500 hover:htw-bg-primary-600 htw-text-white dark:htw-text-black',
+  flat: 'htw-bg-transparent hover:htw-bg-gray-500/20 htw-text-gray-900 dark:htw-text-gray-100',
+}
+
+defineProps<{
+  color?: keyof typeof colors
+}>()
+</script>
+
+<template>
+  <button
+    class="htw-cursor-pointer htw-rounded-sm"
+    :class="colors[color ?? 'default']"
+  >
+    <slot />
+  </button>
+</template>

package/src/components/button/HstButtonGroup.story.vue

@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+import HstButtonGroup from './HstButtonGroup.vue'
+
+const options = {
+  slow: 'Slow',
+  fast: 'Fast',
+  max: 'Max',
+}
+
+const flatOptions = Object.keys(options)
+
+const objectOptions = Object.keys(options).map(key => ({
+  label: options[key],
+  value: key,
+}))
+
+function initState () {
+  return {
+    speed: flatOptions[0],
+  }
+}
+</script>
+
+<template>
+  <Story
+    title="HstButtonGroup"
+    group="controls"
+    :layout="{ type: 'single', iframe: false }"
+  >
+    <Variant
+      title="playground"
+      :init-state="initState"
+    >
+      <template #default="{ state }">
+        <HstButtonGroup
+          v-model="state.speed"
+          title="Label"
+          :options="objectOptions"
+        />
+      </template>
+
+      <template #controls="{ state }">
+        <HstButtonGroup
+          v-model="state.speed"
+          title="Label"
+          :options="objectOptions"
+        />
+      </template>
+    </Variant>
+  </Story>
+</template>

package/src/components/button/HstButtonGroup.vue

@@ -0,0 +1,64 @@
+<script lang="ts">
+export default {
+  name: 'HstButtonGroup',
+}
+</script>
+
+<script setup lang="ts">
+import { computed, ComputedRef } from 'vue'
+import HstWrapper from '../HstWrapper.vue'
+import { HstControlOption } from '../../types'
+import HstButton from './HstButton.vue'
+
+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)
+}
+</script>
+
+<template>
+  <HstWrapper
+    tag="div"
+    role="group"
+    :title="title"
+    class="htw-flex-nowrap htw-items-center"
+  >
+    <div class="htw-flex htw-gap-px htw-border htw-border-solid htw-border-black/25 dark:htw-border-white/25 htw-rounded-sm htw-p-px">
+      <HstButton
+        v-for="( label, value ) in formattedOptions"
+        :key="value"
+        class="htw-px-1 htw-h-[22px] htw-flex-1 !htw-rounded-[3px]"
+        :color="value === modelValue ? 'primary' : 'flat'"
+        :rounded="false"
+        @click="selectOption(value)"
+      >
+        {{ label }}
+      </HstButton>
+    </div>
+    <template #actions>
+      <slot name="actions" />
+    </template>
+  </HstWrapper>
+</template>

package/src/components/checkbox/HstCheckbox.story.vue

@@ -9,7 +9,11 @@ function initState () {
 </script>
 
 <template>
-  <Story title="HstCheckbox">
+  <Story
+    title="HstCheckbox"
+    group="controls"
+    :layout="{ type: 'single', iframe: false }"
+  >
     <Variant
       title="playground"
       :init-state="initState"

package/src/components/checkbox/HstCheckbox.vue

@@ -5,36 +5,21 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { computed, ref, watch } from 'vue'
 import HstWrapper from '../HstWrapper.vue'
+import HstSimpleCheckbox from './HstSimpleCheckbox.vue'
 
 const props = defineProps<{
   modelValue: boolean
   title?: string
 }>()
 
-const emit = defineEmits({
+const emits = defineEmits({
   'update:modelValue': (newValue: boolean) => true,
 })
 
 function toggle () {
-  emit('update:modelValue', !props.modelValue)
-  animationEnabled.value = true
+  emits('update:modelValue', !props.modelValue)
 }
-
-// SVG check
-
-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, () => {
-  dasharray.value = path.value.getTotalLength?.() ?? 21.21
-})
 </script>
 
 <template>
@@ -47,38 +32,7 @@ watch(path, () => {
     @keydown.enter.prevent="toggle()"
     @keydown.space.prevent="toggle()"
   >
-    <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"
-        :class="[
-          modelValue
-            ? 'htw-border-primary-500 htw-border-8'
-            : 'htw-border-black/25 dark:htw-border-white/25 htw-delay-150',
-        ]"
-      />
-      <svg
-        width="16"
-        height="16"
-        viewBox="0 0 24 24"
-        class="htw-relative htw-z-10"
-      >
-        <path
-          ref="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"
-          :class="[
-            animationEnabled ? 'htw-transition-all' : 'htw-transition-none',
-            {
-              'htw-delay-150': modelValue,
-            },
-          ]"
-          :stroke-dasharray="dasharray"
-          :stroke-dashoffset="dashoffset"
-        />
-      </svg>
-    </div>
-
+    <HstSimpleCheckbox :model-value="modelValue" />
     <template #actions>
       <slot name="actions" />
     </template>

package/src/components/checkbox/HstCheckboxList.story.vue

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

package/src/components/checkbox/HstCheckboxList.vue

@@ -0,0 +1,79 @@
+<script lang="ts">
+export default {
+  name: 'HstCheckboxList',
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, ComputedRef } from 'vue'
+import HstWrapper from '../HstWrapper.vue'
+import { HstControlOption } from '../../types'
+import HstSimpleCheckbox from './HstSimpleCheckbox.vue'
+
+const props = defineProps<{
+  title?: string
+  modelValue: Array<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 emits = 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))
+  } else {
+    emits('update:modelValue', [...props.modelValue, value])
+  }
+}
+</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"
+      >
+        <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="toggleOption(value)"
+          @keydown.space.prevent="toggleOption(value)"
+          @click="toggleOption(value)"
+        >
+          <HstSimpleCheckbox
+            :model-value="modelValue.includes(value)"
+            class="htw-mr-2"
+          />
+          {{ label }}
+        </label>
+      </template>
+    </div>
+
+    <template #actions>
+      <slot name="actions" />
+    </template>
+  </HstWrapper>
+</template>