@histoire/controls 0.1.5 → 0.2.2

package/src/components/HstWrapper.vue

@@ -0,0 +1,31 @@
+<script lang="ts">
+export default {
+  name: 'HstWrapper',
+}
+</script>
+
+<script lang="ts" setup>
+import { VTooltip as vTooltip } from 'floating-vue'
+
+const props = defineProps<{
+  title?: string
+}>()
+</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">
+    <span
+      v-tooltip="{
+        content: title,
+        placement: 'left',
+        distance: 12,
+      }"
+      class="htw-w-28 htw-whitespace-nowrap htw-text-ellipsis htw-overflow-hidden htw-shrink-0"
+    >
+      {{ title }}
+    </span>
+    <span class="htw-block htw-grow">
+      <slot />
+    </span>
+  </label>
+</template>

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

@@ -17,17 +17,15 @@ function initState () {
       <template #default="{ state }">
         <HstCheckbox
           v-model="state.checked"
-        >
-          Label
-        </HstCheckbox>
+          title="Label"
+        />
       </template>
 
       <template #controls="{ state }">
         <HstCheckbox
           v-model="state.checked"
-        >
-          Label
-        </HstCheckbox>
+          title="Label"
+        />
       </template>
     </Variant>
   </Story>

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

@@ -6,9 +6,7 @@ describe('HstCheckbox', () => {
     const wrapper = mount(HstCheckbox, {
       props: {
         modelValue: false,
-      },
-      slots: {
-        default: 'Label',
+        title: 'Label',
       },
     })
     await wrapper.trigger('click')
@@ -20,9 +18,7 @@ describe('HstCheckbox', () => {
     const wrapper = mount(HstCheckbox, {
       props: {
         modelValue: true,
-      },
-      slots: {
-        default: 'Label',
+        title: 'Label',
       },
     })
     await wrapper.trigger('click')

package/src/components/checkbox/HstCheckbox.vue

@@ -6,13 +6,12 @@ export default {
 
 <script lang="ts" setup>
 import { computed, ref, watch } from 'vue'
+import HstWrapper from '../HstWrapper.vue'
 
-const props = defineProps({
-  modelValue: {
-    type: Boolean,
-    default: false,
-  },
-})
+const props = defineProps<{
+  modelValue: boolean
+  title?: string
+}>()
 
 const emit = defineEmits({
   'update:modelValue': (newValue: boolean) => true,
@@ -37,21 +36,22 @@ watch(path, value => {
 </script>
 
 <template>
-  <div
+  <HstWrapper
     role="checkbox"
     tabindex="0"
-    class="htw-flex htw-items-center htw-gap-2 htw-select-none htw-px-4 htw-py-3 htw-cursor-pointer hover:htw-bg-primary-100 dark:hover:htw-bg-primary-700"
+    class="htw-cursor-pointer htw-items-center"
+    :title="title"
     @click="toggle()"
     @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 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="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-gray-300 dark:htw-border-gray-500 htw-delay-150',
+            : 'htw-border-black/25 dark:htw-border-white/25 htw-delay-150',
         ]"
       />
       <svg
@@ -76,7 +76,5 @@ watch(path, value => {
         />
       </svg>
     </div>
-
-    <slot />
-  </div>
+  </HstWrapper>
 </template>

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

@@ -1,59 +1,67 @@
 // Peeky snapshots v1.0
 
 exports[`HstCheckbox toggle to checked 1`] = `
-<div
+<label
+  class="htw-p-2 hover:htw-bg-primary-100 dark:hover:htw-bg-primary-800 htw-flex htw-gap-2 htw-flex-wrap htw-cursor-pointer htw-items-center"
   role="checkbox"
   tabindex="0"
-  class="htw-flex htw-items-center htw-gap-2 htw-select-none htw-px-4 htw-py-3 htw-cursor-pointer hover:htw-bg-primary-100 dark:hover:htw-bg-primary-700"
 >
-  <div class="htw-text-white htw-w-[16px] htw-h-[16px] htw-relative">
-    <div class="htw-border 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-gray-300 dark:htw-border-gray-500 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-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>
-    </svg>
-  </div>
-  Label
-</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>
+</label>
 `;
 
 exports[`HstCheckbox toggle to unchecked 1`] = `
-<div
+<label
+  class="htw-p-2 hover:htw-bg-primary-100 dark:hover:htw-bg-primary-800 htw-flex htw-gap-2 htw-flex-wrap htw-cursor-pointer htw-items-center"
   role="checkbox"
   tabindex="0"
-  class="htw-flex htw-items-center htw-gap-2 htw-select-none htw-px-4 htw-py-3 htw-cursor-pointer hover:htw-bg-primary-100 dark:hover:htw-bg-primary-700"
 >
-  <div class="htw-text-white htw-w-[16px] htw-h-[16px] htw-relative">
-    <div class="htw-border 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-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>
-    </svg>
-  </div>
-  Label
-</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>
+</label>
 `;

package/src/components/number/HstNumber.story.vue

@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+import HstNumber from './HstNumber.vue'
+
+function initState () {
+  return {
+    count: 20,
+    step: 1,
+  }
+}
+</script>
+
+<template>
+  <Story
+    title="HstNumber"
+  >
+    <Variant
+      title="default"
+      :init-state="initState"
+    >
+      <template #default="{ state }">
+        <HstNumber
+          v-model="state.count"
+          :step="state.step"
+          title="Count"
+        />
+      </template>
+
+      <template #controls="{ state }">
+        <HstNumber
+          v-model="state.count"
+          title="Count"
+        />
+
+        <HstNumber
+          v-model="state.step"
+          title="Step"
+        />
+      </template>
+    </Variant>
+  </Story>
+</template>

package/src/components/number/HstNumber.vue

@@ -0,0 +1,92 @@
+<script lang="ts">
+export default {
+  name: 'HstNumber',
+
+  inheritAttrs: false,
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, ref, onUnmounted } from 'vue'
+import HstWrapper from '../HstWrapper.vue'
+
+const props = defineProps<{
+  title?: string
+  modelValue: number
+}>()
+
+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 = parseFloat(input.value.step)
+  if (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="htw-cursor-ew-resize htw-items-center"
+    :title="title"
+    :class="[
+      $attrs.class,
+      { 'htw-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="{
+        'htw-select-none': isDragging,
+      }"
+      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"
+    >
+  </HstWrapper>
+</template>

package/src/components/{input/HstInput.story.vue → text/HstText.story.vue}

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

package/src/components/text/HstText.vue

@@ -0,0 +1,40 @@
+<script lang="ts">
+export default {
+  name: 'HstText',
+}
+</script>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import HstWrapper from '../HstWrapper.vue'
+
+const props = defineProps<{
+  title?: string
+  modelValue: string
+}>()
+
+const emit = defineEmits({
+  'update:modelValue': (newValue: string) => true,
+})
+
+const input = ref<HTMLInputElement>()
+</script>
+
+<template>
+  <HstWrapper
+    :title="title"
+    class="htw-cursor-text htw-items-center"
+    :class="$attrs.class"
+    :style="$attrs.style"
+    @click="input.focus()"
+  >
+    <input
+      ref="input"
+      v-bind="{ ...$attrs, class: null, style: null }"
+      type="text"
+      :value="modelValue"
+      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)"
+    >
+  </HstWrapper>
+</template>

package/src/components/textarea/HstTextarea.story.vue

@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import HstTextarea from './HstTextarea.vue'
+
+function initState () {
+  return {
+    text: '',
+  }
+}
+</script>
+
+<template>
+  <Story title="HstTextarea">
+    <Variant
+      title="default"
+      :init-state="initState"
+    >
+      <template #default="{ state }">
+        <HstTextarea
+          v-model="state.text"
+          title="Textarea"
+        />
+      </template>
+
+      <template #controls="{ state }">
+        <HstTextarea
+          v-model="state.text"
+          title="Text"
+        />
+      </template>
+    </Variant>
+  </Story>
+</template>

package/src/components/textarea/HstTextarea.vue

@@ -0,0 +1,40 @@
+<script lang="ts">
+export default {
+  name: 'HstTextarea',
+  inheritAttrs: false,
+}
+</script>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import HstWrapper from '../HstWrapper.vue'
+
+const props = defineProps<{
+  title?: string
+  modelValue: string
+}>()
+
+const emit = defineEmits({
+  'update:modelValue': (newValue: string) => true,
+})
+
+const input = ref<HTMLInputElement>()
+</script>
+
+<template>
+  <HstWrapper
+    :title="title"
+    class="htw-cursor-text"
+    :class="$attrs.class"
+    :style="$attrs.style"
+    @click="input.focus()"
+  >
+    <textarea
+      ref="input"
+      v-bind="{ ...$attrs, class: null, style: null }"
+      :value="modelValue"
+      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)"
+    />
+  </HstWrapper>
+</template>

package/src/index.ts

@@ -1,11 +1,17 @@
 import type { App } from 'vue'
 import HstCheckboxVue from './components/checkbox/HstCheckbox.vue'
-import HstInputVue from './components/input/HstInput.vue'
+import HstTextVue from './components/text/HstText.vue'
+import HstNumberVue from './components/number/HstNumber.vue'
+import HstTextareaVue from './components/textarea/HstTextarea.vue'
 
 export const HstCheckbox = HstCheckboxVue
-export const HstInput = HstInputVue
+export const HstText = HstTextVue
+export const HstNumber = HstNumberVue
+export const HstTextarea = HstTextareaVue
 
 export function registerVueComponents (app: App) {
   app.component('HstCheckbox', HstCheckboxVue)
-  app.component('HstInput', HstInputVue)
+  app.component('HstText', HstTextVue)
+  app.component('HstNumber', HstNumberVue)
+  app.component('HstTextarea', HstTextareaVue)
 }

package/src/style/main.css

@@ -1,7 +1,17 @@
+@import 'floating-vue/dist/style.css';
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
+
 body {
+  font-size: 18px;
   @apply dark:htw-text-gray-100;
 }
+
+@media (min-width: 640px) {
+  body {
+    font-size: 14px;
+  }
+}

package/dist/components/input/HstInput.vue.d.ts

@@ -1,18 +0,0 @@
-declare const _default: import("vue").DefineComponent<{
-    modelValue: {
-        type: (StringConstructor | NumberConstructor)[];
-        default: string;
-    };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    'update:modelValue': (newValue: string | number) => true;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    modelValue: {
-        type: (StringConstructor | NumberConstructor)[];
-        default: string;
-    };
-}>> & {
-    "onUpdate:modelValue"?: (newValue: string | number) => any;
-}, {
-    modelValue: string | number;
-}>;
-export default _default;

package/src/components/input/HstInput.vue

@@ -1,47 +0,0 @@
-<script lang="ts">
-export default {
-  name: 'HstInput',
-
-  inheritAttrs: false,
-}
-</script>
-
-<script lang="ts" setup>
-import { ref } from 'vue'
-
-const props = defineProps({
-  modelValue: {
-    type: [String, Number],
-    default: '',
-  },
-})
-
-const emit = defineEmits({
-  'update:modelValue': (newValue: string | number) => true,
-})
-
-const input = ref<HTMLInputElement>()
-</script>
-
-<template>
-  <div
-    class="htw-p-2 hover:htw-bg-primary-100 dark:hover:htw-bg-primary-700 htw-cursor-text"
-    :class="$attrs.class"
-    :style="$attrs.style"
-    @click="input.focus()"
-  >
-    <label
-      v-if="$slots.default"
-      class="htw-text-sm htw-px-2 htw-cursor-text"
-    >
-      <slot />
-    </label>
-    <input
-      ref="input"
-      v-bind="{ ...$attrs, style: null, class: null }"
-      :value="modelValue"
-      class="htw-text-inherit htw-bg-transparent htw-w-full htw-outline-none htw-px-2 htw-py-0 htw-border htw-border-gray-300 dark:htw-border-gray-500 focus:htw-border-primary-500 dark:focus:htw-border-primary-500 htw-rounded-sm"
-      @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
-    >
-  </div>
-</template>