@histoire/controls 0.2.2 → 0.2.5

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

@@ -0,0 +1,58 @@
+<script lang="ts">
+export default {
+  name: 'HstDesignTokens',
+}
+</script>
+
+<script lang="ts" setup>
+import { computed } 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
+}>()
+
+const processedTokens = computed(() => {
+  const list = props.tokens
+  const getName = props.getName
+  return Object.entries(list).map(([key, value]) => {
+    const name = getName ? getName(key, value) : key
+    return {
+      key,
+      name,
+      value: typeof value === 'string' ? value : value.toString(),
+    }
+  })
+})
+</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"
+  >
+    <slot
+      :token="token"
+    />
+    <div class="htw-mx-4">
+      <div class="htw-flex htw-gap-1">
+        <pre class="htw-my-0 htw-truncate htw-shrink">{{ token.name }}</pre>
+        <HstCopyIcon
+          :content="token.name"
+          class="htw-hidden group-hover:htw-block 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"
+        />
+      </div>
+    </div>
+  </div>
+</template>

package/src/index.ts

@@ -3,11 +3,15 @@ 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 HstColorShadesVue from './components/design-tokens/HstColorShades.vue'
+import HstCopyIconVue from './components/HstCopyIcon.vue'
 
 export const HstCheckbox = HstCheckboxVue
 export const HstText = HstTextVue
 export const HstNumber = HstNumberVue
 export const HstTextarea = HstTextareaVue
+export const HstColorShades = HstColorShadesVue
+export const HstCopyIcon = HstCopyIconVue
 
 export function registerVueComponents (app: App) {
   app.component('HstCheckbox', HstCheckboxVue)

package/tsconfig.json

@@ -27,6 +27,8 @@
     "alwaysStrict": true,
     "strictBindCallApply": true,
     "strictFunctionTypes": true,
+    // Volar
+    "jsx": "preserve",
   },
   "include": [
     "src"