@poveste/controls 0.1.0

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

@@ -0,0 +1,51 @@
+<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"
+    group="controls"
+    :layout="{ type: 'single', iframe: false }"
+  >
+    <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,109 @@
+<script lang="ts">
+export default {
+  name: 'HstRadio',
+}
+</script>
+
+<script lang="ts" setup>
+import type { ComputedRef } from 'vue'
+import type { HstControlOption } from '../../types'
+import { computed, ref } from 'vue'
+import HstWrapper from '../HstWrapper.vue'
+
+const props = defineProps<{
+  title?: string
+  modelValue?: string | null
+  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="histoire-radio 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_${title}`"
+          type="radio"
+          :name="`${value}-radio_${title}`"
+          :value="value"
+          :checked="value === modelValue"
+          class="!htw-hidden"
+          @change="selectOption(value)"
+        >
+        <label
+          tabindex="0"
+          :for="`${value}-radio_${title}`"
+          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

@@ -0,0 +1,119 @@
+<script lang="ts">
+export default {
+  name: 'CustomSelect',
+}
+</script>
+
+<script lang="ts" setup>
+import type { ComputedRef } from 'vue'
+import type { HstControlOption } from '../../types'
+import { Icon } from '@iconify/vue'
+import { Dropdown as VDropdown } from 'floating-vue'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  modelValue: string
+  options: Record<string, any> | string[] | number[] | HstControlOption[]
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+}>()
+
+const formattedOptions: ComputedRef<[any, string][]> = computed(() => {
+  if (Array.isArray(props.options)) {
+    return props.options.map((option) => {
+      if (typeof option === 'string' || typeof option === 'number') {
+        return [option, String(option)] as [any, string]
+      }
+      else {
+        return [option.value, option.label] as [any, string]
+      }
+    })
+  }
+  else {
+    return Object.entries(props.options)
+  }
+})
+
+const selectedLabel = computed(() => formattedOptions.value.find(([value]) => value === props.modelValue)?.[1])
+
+function selectValue(value: any, hide: () => void) {
+  emit('update:modelValue', value)
+  hide()
+}
+</script>
+
+<template>
+  <VDropdown
+    auto-size
+    auto-boundary-max-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="[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"
+          :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

@@ -0,0 +1,161 @@
+<script lang="ts" setup>
+import HstSelect from './HstSelect.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,
+}))
+
+const numberOptions = [0, 1, 2, 3, 4, 5]
+
+function initState() {
+  return {
+    label: 'My really long label',
+    select: 'crash-bandicoot',
+    count: 0,
+  }
+}
+</script>
+
+<template>
+  <Story
+    title="HstSelect"
+    group="controls"
+    :layout="{
+      type: 'grid',
+      width: '100%',
+    }"
+  >
+    <Variant
+      title="default"
+      :init-state="initState"
+    >
+      <template #default="{ state }">
+        <HstSelect
+          v-model="state.select"
+          :title="state.label"
+          :options="options"
+        />
+      </template>
+
+      <template #controls="{ state }">
+        <HstSelect
+          v-model="state.select"
+          title="Select"
+          :options="options"
+        />
+      </template>
+    </Variant>
+
+    <Variant
+      title="no-label"
+      :init-state="initState"
+    >
+      <template #default="{ state }">
+        <HstSelect
+          v-model="state.select"
+          :options="options"
+        />
+      </template>
+      <template #controls="{ state }">
+        <HstSelect
+          v-model="state.select"
+          title="Select"
+          :options="options"
+        />
+      </template>
+    </Variant>
+
+    <Variant
+      title="options-as-object"
+      :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">{{ options }}</pre>
+        <HstSelect
+          v-model="state.select"
+          title="Games"
+          :options="options"
+        />
+      </template>
+      <template #controls="{ state }">
+        <HstSelect
+          v-model="state.select"
+          title="Games"
+          :options="options"
+        />
+      </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"
+    >
+      <template #default="{ state }">
+        <pre class="htw-text-xs htw-bg-gray-50 dark:htw-bg-gray-600 htw-rounded htw-p-4">{{ flatOptions }}</pre>
+        <HstSelect
+          v-model="state.select"
+          title="Select"
+          :options="flatOptions"
+        />
+      </template>
+      <template #controls="{ state }">
+        <HstSelect
+          v-model="state.select"
+          title="Select"
+          :options="flatOptions"
+        />
+      </template>
+    </Variant>
+
+    <Variant
+      title="options-as-array-of-numbers"
+      :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">{{ numberOptions }}</pre>
+        <HstSelect
+          v-model="state.count"
+          title="Select"
+          :options="numberOptions"
+        />
+      </template>
+      <template #controls="{ state }">
+        <HstSelect
+          v-model="state.count"
+          title="Select"
+          :options="numberOptions"
+        />
+      </template>
+    </Variant>
+  </Story>
+</template>

package/src/components/select/HstSelect.vue

@@ -0,0 +1,40 @@
+<script lang="ts">
+export default {
+  name: 'HstSelect',
+}
+</script>
+
+<script lang="ts" setup>
+import type { HstControlOption } from '../../types'
+import HstWrapper from '../HstWrapper.vue'
+import CustomSelect from './CustomSelect.vue'
+
+defineProps<{
+  title?: string
+  modelValue?: any
+  options: Record<string, any> | string[] | HstControlOption[]
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: any): void
+}>()
+</script>
+
+<template>
+  <HstWrapper
+    :title="title"
+    class="histoire-select htw-cursor-text htw-items-center"
+    :class="$attrs.class"
+    :style="$attrs.style"
+  >
+    <CustomSelect
+      :options="options"
+      :model-value="modelValue"
+      @update:model-value="emit('update:modelValue', $event)"
+    />
+
+    <template #actions>
+      <slot name="actions" />
+    </template>
+  </HstWrapper>
+</template>

package/src/components/slider/HstSlider.story.vue

@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+import { reactive } from 'vue'
+import HstSlider from './HstSlider.vue'
+
+const state = reactive({
+  value: 20,
+  min: 0,
+  max: 100,
+  step: 5,
+})
+</script>
+
+<template>
+  <Story
+    title="HstSlider"
+    group="controls"
+    :layout="{ type: 'single', iframe: false }"
+  >
+    <HstSlider
+      v-model="state.value"
+      :step="state.step"
+      :min="state.min"
+      :max="state.max"
+      title="Slide"
+    />
+    <pre>{{ state }}</pre>
+    <template #controls>
+      <HstSlider
+        v-model="state.value"
+        :step="state.step"
+        :min="state.min"
+        :max="state.max"
+        title="Value"
+      />
+    </template>
+  </Story>
+</template>

package/src/components/slider/HstSlider.vue

@@ -0,0 +1,103 @@
+<script lang="ts">
+export default {
+  name: 'HstSlider',
+  inheritAttrs: false,
+}
+</script>
+
+<script lang="ts" setup>
+import type { CSSProperties } from 'vue'
+import { VTooltip as vTooltip } from 'floating-vue'
+import { computed, ref } from 'vue'
+import HstWrapper from '../HstWrapper.vue'
+
+const props = defineProps<{
+  title?: string
+  modelValue?: number | null
+  min: number
+  max: number
+}>()
+
+const emit = defineEmits({
+  'update:modelValue': (newValue: number) => true,
+})
+
+const showTooltip = ref(false)
+const input = ref<HTMLInputElement>(null)
+
+const numberModel = computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    emit('update:modelValue', value)
+  },
+})
+
+const percentage = computed(() => {
+  return (props.modelValue - props.min) / (props.max - props.min)
+})
+
+const tooltipStyle = computed<CSSProperties>(() => {
+  const gap = 8
+  if (input.value) {
+    const position = gap + ((input.value.clientWidth - 2 * gap) * percentage.value)
+    return {
+      left: `${position}px`,
+    }
+  }
+  return {}
+})
+</script>
+
+<template>
+  <HstWrapper
+    class="histoire-slider htw-items-center"
+    :title="title"
+    :class="$attrs.class"
+    :style="$attrs.style"
+  >
+    <div class="htw-relative htw-w-full htw-flex htw-items-center">
+      <div class="htw-absolute htw-inset-0 htw-flex htw-items-center">
+        <div class="htw-border htw-border-black/25 dark:htw-border-white/25 htw-h-1 htw-w-full htw-rounded-full" />
+      </div>
+      <input
+        ref="input"
+        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, min, max }"
+        @mouseover="showTooltip = true"
+        @mouseleave="showTooltip = false"
+      >
+      <div
+        v-if="showTooltip"
+        v-tooltip="{ content: modelValue.toString(), shown: true, distance: 16, delay: 0 }"
+        class="htw-absolute"
+        :style="tooltipStyle"
+      />
+    </div>
+  </HstWrapper>
+</template>
+
+<style lang="pcss">
+.htw-range-input {
+  &::-webkit-slider-thumb {
+    @apply htw-appearance-none htw-h-3 htw-w-3 htw-bg-white dark:htw-bg-gray-700 htw-border htw-border-solid htw-border-black/25 dark:htw-border-white/25 htw-rounded-full;
+  }
+
+  &:hover::-webkit-slider-thumb {
+    @apply !htw-bg-primary-500  !htw-border-primary-500;
+  }
+}
+
+/* Separate rules for -moz-range-thumb to prevent a bug with Safari that causes it to ignore custom style */
+
+.htw-range-input {
+  &::-moz-range-thumb {
+    @apply htw-appearance-none htw-h-3 htw-w-3 htw-bg-white dark:htw-bg-gray-700 htw-border htw-border-solid htw-border-black/25 dark:htw-border-white/25 htw-rounded-full;
+  }
+
+  &:hover::-moz-range-thumb {
+    @apply !htw-bg-primary-500  !htw-border-primary-500;
+  }
+}
+</style>

package/src/components/text/HstText.story.vue

@@ -0,0 +1,63 @@
+<script lang="ts" setup>
+import HstText from './HstText.vue'
+
+function initState() {
+  return {
+    label: 'My really long label',
+    text: '',
+  }
+}
+</script>
+
+<template>
+  <Story
+    title="HstText"
+    group="controls"
+    :layout="{
+      type: 'grid',
+      width: '100%',
+    }"
+  >
+    <Variant
+      title="default"
+      :init-state="initState"
+    >
+      <template #default="{ state }">
+        <HstText
+          v-model="state.text"
+          :title="state.label"
+        />
+      </template>
+
+      <template #controls="{ state }">
+        <HstText
+          v-model="state.label"
+          title="Label"
+        />
+        <HstText
+          v-model="state.text"
+          title="Text"
+        />
+      </template>
+    </Variant>
+
+    <Variant
+      title="no-label"
+      :init-state="initState"
+    >
+      <template #default="{ state }">
+        <HstText
+          v-model="state.text"
+          placeholder="Enter some text..."
+        />
+      </template>
+
+      <template #controls="{ state }">
+        <HstText
+          v-model="state.text"
+          title="Text"
+        />
+      </template>
+    </Variant>
+  </Story>
+</template>