@poveste/controls 0.6.0 → 0.7.0

package/src/components/number/HstNumber.vue

@@ -1,95 +0,0 @@
-<script lang="ts">
-export default {
-  name: 'HstNumber',
-  inheritAttrs: false,
-}
-</script>
-
-<script lang="ts" setup>
-import { computed, onUnmounted, ref } from 'vue'
-import HstWrapper from '../HstWrapper.vue'
-
-const props = defineProps<{
-  title?: string
-  modelValue?: number | null
-}>()
-
-const emit = defineEmits({
-  'update:modelValue': (newValue: number) => true,
-})
-
-const numberModel = computed({
-  get: () => props.modelValue,
-  set: (value) => {
-    emit('update:modelValue', value)
-  },
-})
-
-const input = ref<HTMLInputElement>()
-
-function focusAndSelect() {
-  input.value.focus()
-  input.value.select()
-}
-
-// Drag to modify
-
-const isDragging = ref(false)
-let startX: number
-let startValue: number
-
-function onMouseDown(event: MouseEvent) {
-  isDragging.value = true
-  startX = event.clientX
-  startValue = numberModel.value
-  window.addEventListener('mousemove', onMouseMove)
-  window.addEventListener('mouseup', stopDragging)
-}
-
-function onMouseMove(event: MouseEvent) {
-  let step = Number.parseFloat(input.value.step)
-  if (Number.isNaN(step)) {
-    step = 1
-  }
-  numberModel.value = startValue + Math.round((event.clientX - startX) / 10 / step) * step
-}
-
-function stopDragging() {
-  isDragging.value = false
-  window.removeEventListener('mousemove', onMouseMove)
-  window.removeEventListener('mouseup', stopDragging)
-}
-
-onUnmounted(() => {
-  stopDragging()
-})
-</script>
-
-<template>
-  <HstWrapper
-    class="poveste-number cursor-ew-resize items-center"
-    :title="title"
-    :class="[
-      $attrs.class,
-      { 'select-none': isDragging },
-    ]"
-    :style="$attrs.style"
-    @click="focusAndSelect"
-    @mousedown="onMouseDown"
-  >
-    <input
-      ref="input"
-      v-bind="{ ...$attrs, class: null, style: null }"
-      v-model.number="numberModel"
-      type="number"
-      :class="{
-        'select-none': isDragging,
-      }"
-      class="text-inherit bg-transparent w-full outline-none pl-2 py-1 -my-1 border border-solid border-black/25 dark:border-white/25 focus:border-primary-500 dark:focus:border-primary-500 rounded-sm cursor-ew-resize box-border"
-    >
-
-    <template #actions>
-      <slot name="actions" />
-    </template>
-  </HstWrapper>
-</template>

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

@@ -1,51 +0,0 @@
-<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

@@ -1,109 +0,0 @@
-<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 emit = 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 | HstControlOption) => {
-      if (typeof value === 'string') {
-        return [value, value]
-      }
-      else {
-        return [value.value, value.label]
-      }
-    }))
-  }
-  return props.options
-})
-
-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="poveste-radio cursor-text"
-    :class="$attrs.class"
-    :style="$attrs.style"
-  >
-    <div class="-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="hidden!"
-          @change="selectOption(value)"
-        >
-        <label
-          tabindex="0"
-          :for="`${value}-radio_${title}`"
-          class="cursor-pointer flex items-center relative py-1 group"
-          @keydown.enter.prevent="selectOption(value)"
-          @keydown.space.prevent="selectOption(value)"
-        >
-          <svg
-            width="16"
-            height="16"
-            viewBox="-12 -12 24 24"
-            class="relative z-10 border border-solid  text-inherit rounded-full box-border inset-0 transition-border duration-150 ease-out mr-2 group-hover:border-primary-500"
-            :class="[
-              modelValue === value
-                ? 'border-primary-500'
-                : 'border-black/25 dark:border-white/25',
-            ]"
-          >
-            <circle
-              r="7"
-              class="will-change-transform"
-              :class="[
-                animationEnabled ? 'transition-all' : 'transition-none',
-                {
-                  'delay-150': modelValue === value,
-                },
-                modelValue === value
-                  ? 'fill-primary-500'
-                  : 'fill-transparent scale-0',
-              ]"
-            />
-          </svg>
-          {{ label }}
-        </label>
-      </template>
-    </div>
-
-    <template #actions>
-      <slot name="actions" />
-    </template>
-  </HstWrapper>
-</template>

package/src/components/select/CustomSelect.vue

@@ -1,126 +0,0 @@
-<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="cursor-pointer w-full outline-none px-2 h-[27px] -my-1 border border-solid border-black/25 dark:border-white/25 hover:border-primary-500 dark:hover:border-primary-500 rounded-sm flex gap-2 items-center leading-normal"
-    >
-      <div class="flex-1 truncate">
-        <slot :label="selectedLabel">
-          {{ selectedLabel }}
-        </slot>
-      </div>
-      <Icon
-        icon="carbon:chevron-sort"
-        class="w-4 h-4 flex-none ml-auto"
-      />
-    </div>
-    <template #popper="{ hide }">
-      <div class="flex flex-col bg-gray-50 dark:bg-gray-700">
-        <div
-          v-for="[value, label] of formattedOptions"
-          v-bind="{ ...$attrs, class: null, style: null }"
-          :key="label"
-          class="px-2 py-1 cursor-pointer hover:bg-primary-100 dark:hover:bg-primary-700"
-          :class="{
-            'bg-primary-200 dark:bg-primary-800': props.modelValue === value,
-          }"
-          @click="selectValue(value, hide)"
-        >
-          {{ label }}
-        </div>
-      </div>
-    </template>
-  </VDropdown>
-</template>
-
-<style lang="postcss">
-/* v4: @apply in a component <style> needs the theme referenced explicitly. */
-@reference "../../style/main.css";
-
-/* @TODO custom themes */
-
-.v-popper {
-  line-height: 0;
-}
-
-.v-popper--theme-dropdown {
-  /*
-   * `dark:` rather than `.ptw-dark &` — the chrome CSS is wrapped in `@scope`
-   * and `.ptw-dark` lives on `<html>`, above the scope root, so a descendant
-   * rule keyed on it never matches and the select's options fall back to
-   * floating-vue's stock light theme (black text on the dark UI). See #101.
-   */
-  .v-popper__inner {
-    @apply dark:bg-gray-700 dark:border-gray-850 dark:text-gray-100;
-  }
-
-  .v-popper__arrow-inner {
-    @apply dark:border-gray-700;
-  }
-
-  .v-popper__arrow-outer {
-    @apply dark: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,161 +0,0 @@
-<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="text-xs bg-gray-50 dark:bg-gray-600 rounded 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="text-xs bg-gray-50 dark:bg-gray-600 rounded 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="text-xs bg-gray-50 dark:bg-gray-600 rounded 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="text-xs bg-gray-50 dark:bg-gray-600 rounded 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

@@ -1,40 +0,0 @@
-<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="poveste-select cursor-text 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

@@ -1,37 +0,0 @@
-<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>