fix: Fix binding issue and add type annotations to CSSProperties

histoire-dev · Nov 24, 2023 · ca169bf · ca169bf
1 parent 08c082c
commit ca169bf
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 6 deletions.
diff --git a/packages/histoire-controls/src/components/button/HstButton.story.vue b/packages/histoire-controls/src/components/button/HstButton.story.vue
@@ -20,7 +20,7 @@ const variants: Array<{name: string, bind?: unknown}> = [
  :title="variant.name"
  >
  <HstButton
- v-bind="variant.bind"
+ v-bind="variant.bind as {}"
  class="htw-p-2"
  >
  Click me!

diff --git a/packages/histoire-controls/src/components/design-tokens/HstColorShades.story.vue b/packages/histoire-controls/src/components/design-tokens/HstColorShades.story.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import HstColorShades from './HstColorShades.vue'
+import type { CSSProperties } from 'vue'
 
 const colors = {
  slate: {
@@ -311,7 +312,7 @@ const colors = {
  class="htw-rounded htw-h-[100px]"
  :style="{
  backgroundColor: color,
- }"
+ } as CSSProperties"
  />
  </template>
  </HstColorShades>
@@ -329,7 +330,7 @@ const colors = {
  class="htw-rounded htw-h-[100px] htw-text-5xl htw-flex htw-items-end"
  :style="{
  color: color,
- }"
+ } as CSSProperties"
  >
  Aa
  </div>
@@ -349,7 +350,7 @@ const colors = {
  class="htw-rounded htw-h-[100px] htw-border-solid htw-border-2"
  :style="{
  borderColor: color,
- }"
+ } as CSSProperties"
  />
  </template>
  </HstColorShades>

diff --git a/packages/histoire-controls/src/components/design-tokens/HstColorShades.vue b/packages/histoire-controls/src/components/design-tokens/HstColorShades.vue
@@ -8,6 +8,7 @@ export default {
 import { computed, ref } from 'vue'
 import { VTooltip as vTooltip } from 'floating-vue'
 import HstCopyIcon from '../HstCopyIcon.vue'
+import type { CSSProperties } from 'vue'
 
 const props = defineProps<{
  shades: Record<string, any>
@@ -68,7 +69,7 @@ const hover = ref<string>(null)
  class="htw-rounded-full htw-w-16 htw-h-16"
  :style="{
  backgroundColor: shade.color,
- }"
+ } as CSSProperties"
  />
  </slot>
  <div>

diff --git a/packages/histoire-controls/src/components/design-tokens/HstTokenList.story.vue b/packages/histoire-controls/src/components/design-tokens/HstTokenList.story.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import HstTokenList from './HstTokenList.vue'
+import type { CSSProperties } from 'vue'
 
 const tokens = {
  0: 0,
@@ -70,7 +71,7 @@ const tokens = {
  class="htw-h-20 htw-bg-gray-500/50"
  :style="{
  width: token.value as string,
- }"
+ } as CSSProperties"
  />
  </div>
  </template>