fix(ui): destructure slot data binding for DarkToggle component (#160)

vuejs · Jan 8, 2024 · ed84e63 · ed84e63
1 parent 1e46a51
commit ed84e63
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 9 deletions.
diff --git a/packages/client/src/components/common/DockingPanel.vue b/packages/client/src/components/common/DockingPanel.vue
@@ -52,7 +52,7 @@ watch(activeAppRecordId, (id) => {
  <VueDarkToggle>
  <template #default="{ isDark, toggle }">
  <VueButton outlined type="primary" @click="toggle">
- <div i-carbon-sun dark:i-carbon-moon translate-y--1px /> {{ isDark.value ? 'Dark' : 'Light' }}
+ <div i-carbon-sun dark:i-carbon-moon translate-y--1px /> {{ isDark ? 'Dark' : 'Light' }}
  </VueButton>
  </template>
  </VueDarkToggle>

diff --git a/packages/ui/src/components/DarkToggle.vue b/packages/ui/src/components/DarkToggle.vue
@@ -70,15 +70,10 @@ function toggle(event?: MouseEvent) {
  )
  })
 }
-const context = {
- mode,
- isDark,
- toggle,
-}
 </script>
 
 <template>
  <span class="$ui-dark-toggle-vtr">
- <slot v-bind="context" />
+ <slot v-bind="{ mode, isDark, toggle }" />
  </span>
 </template>
diff --git a/packages/ui/storybook/DarkToggle.story.vue b/packages/ui/storybook/DarkToggle.story.vue
@@ -24,7 +24,7 @@ const dark = computed({
  toggle(e)
  }"
  >
- <Icon :class="isDark.value ? 'i-carbon-moon' : 'i-carbon-sun'" />
+ <Icon :class="isDark ? 'i-carbon-moon' : 'i-carbon-sun'" />
  </Button>
  </template>
  </DarkToggle>
@@ -37,7 +37,7 @@ const dark = computed({
  toggle(e)
  }"
  >
- <Icon :class="isDark.value ? 'i-carbon-moon' : 'i-carbon-sun'" />
+ <Icon :class="isDark ? 'i-carbon-moon' : 'i-carbon-sun'" />
  </Button>
  </template>
  </DarkToggle>