@histoire/controls 0.2.5 → 0.3.2

package/src/components/design-tokens/HstColorShades.vue

@@ -5,14 +5,12 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { VTooltip as vTooltip } from 'floating-vue'
 import HstCopyIcon from '../HstCopyIcon.vue'
 
 const props = defineProps<{
   shades: Record<string, string>
-  // @TODO report eslint bug
-  // eslint-disable-next-line func-call-spacing
   getName?: (key: string, color: string) => string
   search?: string
 }>()
@@ -38,6 +36,8 @@ const displayedShades = computed(() => {
   }
   return list
 })
+
+const hover = ref<string>(null)
 </script>
 
 <template>
@@ -48,7 +48,9 @@ const displayedShades = computed(() => {
     <div
       v-for="shade of displayedShades"
       :key="shade.key"
-      class="htw-flex htw-flex-col htw-gap-2 htw-group"
+      class="htw-flex htw-flex-col htw-gap-2"
+      @mouseenter="hover = shade.key"
+      @mouseleave="hover = null"
     >
       <slot
         :color="shade.color"
@@ -67,8 +69,9 @@ const displayedShades = computed(() => {
             class="htw-my-0 htw-truncate htw-shrink"
           >{{ shade.name }}</pre>
           <HstCopyIcon
+            v-if="hover === shade.key"
             :content="shade.name"
-            class="htw-hidden group-hover:htw-block htw-flex-none"
+            class="htw-flex-none"
           />
         </div>
         <div class="htw-flex htw-gap-1">
@@ -77,8 +80,9 @@ const displayedShades = computed(() => {
             class="htw-my-0 htw-opacity-50 htw-truncate htw-shrink"
           >{{ shade.color }}</pre>
           <HstCopyIcon
+            v-if="hover === shade.key"
             :content="shade.color"
-            class="htw-hidden group-hover:htw-block htw-flex-none"
+            class="htw-flex-none"
           />
         </div>
       </div>

package/src/components/design-tokens/HstTokenGrid.vue

@@ -1,20 +1,18 @@
 <script lang="ts">
 export default {
-  name: 'HstDesignTokens',
+  name: 'HstTokenGrid',
 }
 </script>
 
 <script lang="ts" setup>
-import { computed, withDefaults } from 'vue'
+import { computed, ref, withDefaults } from 'vue'
 import { VTooltip as vTooltip } from 'floating-vue'
 import HstCopyIcon from '../HstCopyIcon.vue'
 
 const props = withDefaults(defineProps<{
-  tokens: Record<string, string | number>
+  tokens: Record<string, string | number | any[] | Record<string, any>>
   colSize?: number
-  // @TODO report eslint bug
-  // eslint-disable-next-line func-call-spacing
-  getName?: (key: string, value: string | number) => string
+  getName?: (key: string, value: string | number | any[] | Record<string, any>) => string
 }>(), {
   colSize: 180,
   getName: null,
@@ -28,20 +26,29 @@ const processedTokens = computed(() => {
     return {
       key,
       name,
-      value: typeof value === 'string' ? value : value.toString(),
+      value: typeof value === 'number' ? value.toString() : value,
     }
   })
 })
 
 const colSizePx = computed(() => `${props.colSize}px`)
+
+const hover = ref<string>(null)
 </script>
 
 <template>
-  <div class="htw-bind-col-size htw-grid htw-gap-4 htw-m-4">
+  <div
+    class="htw-bind-col-size htw-grid htw-gap-4 htw-m-4"
+    :style="{
+      '--histoire-col-size': colSizePx,
+    }"
+  >
     <div
       v-for="token of processedTokens"
       :key="token.key"
-      class="htw-flex htw-flex-col htw-gap-2 htw-group"
+      class="htw-flex htw-flex-col htw-gap-2"
+      @mouseenter="hover = token.key"
+      @mouseleave="hover = null"
     >
       <slot
         :token="token"
@@ -53,8 +60,9 @@ const colSizePx = computed(() => `${props.colSize}px`)
             class="htw-my-0 htw-truncate htw-shrink"
           >{{ token.name }}</pre>
           <HstCopyIcon
+            v-if="hover === token.key"
             :content="token.name"
-            class="htw-hidden group-hover:htw-block htw-flex-none"
+            class="htw-flex-none"
           />
         </div>
         <div class="htw-flex htw-gap-1">
@@ -63,8 +71,9 @@ const colSizePx = computed(() => `${props.colSize}px`)
             class="htw-my-0 htw-opacity-50 htw-truncate htw-shrink"
           >{{ token.value }}</pre>
           <HstCopyIcon
-            :content="token.value"
-            class="htw-hidden group-hover:htw-block htw-flex-none"
+            v-if="hover === token.key"
+            :content="typeof token.value === 'string' ? token.value : JSON.stringify(token.value)"
+            class="htw-flex-none"
           />
         </div>
       </div>
@@ -72,8 +81,8 @@ const colSizePx = computed(() => `${props.colSize}px`)
   </div>
 </template>
 
-<style scoped>
+<style>
 .htw-bind-col-size {
-  grid-template-columns: repeat(auto-fill, minmax(v-bind(colSizePx), 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(var(--histoire-col-size), 1fr));
 }
 </style>

package/src/components/design-tokens/HstTokenList.vue

@@ -1,18 +1,16 @@
 <script lang="ts">
 export default {
-  name: 'HstDesignTokens',
+  name: 'HstTokenList',
 }
 </script>
 
 <script lang="ts" setup>
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import HstCopyIcon from '../HstCopyIcon.vue'
 
 const props = defineProps<{
-  tokens: Record<string, string | number>
-  // @TODO report eslint bug
-  // eslint-disable-next-line func-call-spacing
-  getName?: (key: string, value: string | number) => string
+  tokens: Record<string, string | number | any[] | Record<string, any>>
+  getName?: (key: string, value: string | number | any[] | Record<string, any>) => string
 }>()
 
 const processedTokens = computed(() => {
@@ -23,17 +21,21 @@ const processedTokens = computed(() => {
     return {
       key,
       name,
-      value: typeof value === 'string' ? value : value.toString(),
+      value: typeof value === 'number' ? value.toString() : value,
     }
   })
 })
+
+const hover = ref<string>(null)
 </script>
 
 <template>
   <div
     v-for="token of processedTokens"
     :key="token.key"
-    class="htw-flex htw-flex-col htw-gap-2 htw-group htw-my-8"
+    class="htw-flex htw-flex-col htw-gap-2 htw-my-8"
+    @mouseenter="hover = token.key"
+    @mouseleave="hover = null"
   >
     <slot
       :token="token"
@@ -42,15 +44,17 @@ const processedTokens = computed(() => {
       <div class="htw-flex htw-gap-1">
         <pre class="htw-my-0 htw-truncate htw-shrink">{{ token.name }}</pre>
         <HstCopyIcon
+          v-if="hover === token.key"
           :content="token.name"
-          class="htw-hidden group-hover:htw-block htw-flex-none"
+          class="htw-flex-none"
         />
       </div>
       <div class="htw-flex htw-gap-1">
         <pre class="htw-my-0 htw-opacity-50 htw-truncate htw-shrink">{{ token.value }}</pre>
         <HstCopyIcon
-          :content="token.value"
-          class="htw-hidden group-hover:htw-block htw-flex-none"
+          v-if="hover === token.key"
+          :content="typeof token.value === 'string' ? token.value : JSON.stringify(token.value)"
+          class="htw-flex-none"
         />
       </div>
     </div>

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

@@ -0,0 +1,110 @@
+<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 flatOptions = options.map(option => option.label)
+
+function initState () {
+  return {
+    label: 'My really long label',
+    select: 'crash-bandicoot',
+  }
+}
+</script>
+
+<template>
+  <Story
+    title="HstSelect"
+    :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-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">{{ 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-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>
+  </Story>
+</template>

package/src/components/select/HstSelect.vue

@@ -0,0 +1,67 @@
+<script lang="ts">
+export default {
+  name: 'HstSelect',
+}
+</script>
+
+<script lang="ts" setup>
+import { ref, computed, ComputedRef, PropType } from 'vue'
+import HstWrapper from '../HstWrapper.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 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 select = ref<HTMLInputElement>()
+</script>
+
+<template>
+  <HstWrapper
+    :title="title"
+    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>
+  </HstWrapper>
+</template>

package/src/index.ts

@@ -3,7 +3,10 @@ import HstCheckboxVue from './components/checkbox/HstCheckbox.vue'
 import HstTextVue from './components/text/HstText.vue'
 import HstNumberVue from './components/number/HstNumber.vue'
 import HstTextareaVue from './components/textarea/HstTextarea.vue'
+import HstSelectVue from './components/select/HstSelect.vue'
 import HstColorShadesVue from './components/design-tokens/HstColorShades.vue'
+import HstTokenListVue from './components/design-tokens/HstTokenList.vue'
+import HstTokenGridVue from './components/design-tokens/HstTokenGrid.vue'
 import HstCopyIconVue from './components/HstCopyIcon.vue'
 
 export const HstCheckbox = HstCheckboxVue
@@ -11,11 +14,17 @@ export const HstText = HstTextVue
 export const HstNumber = HstNumberVue
 export const HstTextarea = HstTextareaVue
 export const HstColorShades = HstColorShadesVue
+export const HstTokenList = HstTokenListVue
+export const HstTokenGrid = HstTokenGridVue
 export const HstCopyIcon = HstCopyIconVue
 
 export function registerVueComponents (app: App) {
   app.component('HstCheckbox', HstCheckboxVue)
   app.component('HstText', HstTextVue)
   app.component('HstNumber', HstNumberVue)
+  app.component('HstSelect', HstSelectVue)
   app.component('HstTextarea', HstTextareaVue)
+  app.component('HstColorShades', HstColorShadesVue)
+  app.component('HstTokenList', HstTokenListVue)
+  app.component('HstTokenGrid', HstTokenGridVue)
 }