fix(desc): empty slot not showing empty state (#328)

docs/composables/utils.md

@@ -84,3 +84,39 @@ const menu = computedArray((arr) => {
   }
 })
 ```
+
+## `useHasSlotContent`
+
+Checks whether the slot has a non empty value. If the slot contains empty string, it will return `false`. If the slot contains child nodes, it will return `true`.
+
+You may pass slot name as an argument. If you do not pass it, it will check the default slot.
+
+```ts
+function useHasSlotContent(name: string): ComputedRef<boolean>
+```
+
+```ts
+import { useHasSlotContent } from '@globalbrain/sefirot/lib/composables/Utils'
+
+const hasSlotContent = useHasSlotContent('default')
+
+hasSlotContent.value // <- true or false
+```
+
+## `useSlotValue`
+
+Get the slot value. If the slot contains child nodes, it will get ignored and treated as if it was empty. This composable is useful to get the plain text out of the slot content.
+
+You may pass the slot name as an argument. If you do not pass it, it will check the default slot.
+
+```ts
+function useSlotValue(name: string): ComputedRef<string | null>
+```
+
+```ts
+import { useSlotValue } from '@globalbrain/sefirot/lib/composables/Utils'
+
+const slotValue = useSlotValue('default')
+
+slotValue.value // <- string or null
+```

lib/components/SDescDay.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { computed, useSlots } from 'vue'
+import { computed } from 'vue'
+import { useSlotValue } from '../composables/Utils'
 import { type Day } from '../support/Day'
 import SDescEmpty from './SDescEmpty.vue'
 
@@ -8,13 +9,11 @@ const props = defineProps<{
   format?: string
 }>()
 
-const slots = useSlots()
+const slotValue = useSlotValue()
 
 const _value = computed(() => {
-  const slotValue = slots.default?.()[0].children
-
-  if (typeof slotValue === 'string') {
-    return slotValue
+  if (slotValue.value) {
+    return slotValue.value
   }
 
   if (props.value) {

lib/components/SDescLink.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { computed, useSlots } from 'vue'
+import { computed } from 'vue'
+import { useSlotValue } from '../composables/Utils'
 import SDescEmpty from './SDescEmpty.vue'
 import SLink from './SLink.vue'
 
@@ -8,27 +9,23 @@ const props = defineProps<{
   href?: string
 }>()
 
-const slots = useSlots()
+const slotValue = useSlotValue()
 
 const link = computed(() => {
   if (props.href) {
     return props.href
   }
 
-  const slotValue = slots.default?.()[0].children
-
-  if (typeof slotValue === 'string') {
-    return slotValue
-  }
-
-  return props.value
+  return slotValue.value
+    ? slotValue.value
+    : props.value
 })
 </script>
 
 <template>
-  <div v-if="$slots.default || value" class="SDescLink">
+  <div v-if="slotValue || value" class="SDescLink">
     <SLink class="value" :href="link">
-      <slot v-if="$slots.default" />
+      <slot v-if="slotValue" />
       <template v-else>{{ value }}</template>
     </SLink>
   </div>

lib/components/SDescNumber.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { computed, useSlots } from 'vue'
+import { computed } from 'vue'
+import { useSlotValue } from '../composables/Utils'
 import { format } from '../support/Num'
 import SDescEmpty from './SDescEmpty.vue'
 
@@ -8,12 +9,12 @@ const props = defineProps<{
   separator?: boolean
 }>()
 
-const slots = useSlots()
+const slotValue = useSlotValue()
 
 const _value = computed(() => {
-  const slotValue = slots.default?.()[0].children
+  const sv = slotValue.value
 
-  const v = (typeof slotValue === 'string') ? Number(slotValue) : props.value
+  const v = sv ? Number(sv) : props.value
 
   if (v == null) {
     return null

lib/components/SDescText.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { useHasSlotContent } from '../composables/Utils'
 import SDescEmpty from './SDescEmpty.vue'
 
 const props = defineProps<{
@@ -13,13 +14,15 @@ const classes = computed(() => [
   { 'pre-wrap': props.preWrap }
 ])
 
+const hasSlot = useHasSlotContent()
+
 const lineClamp = computed(() => props.lineClamp ?? 'none')
 </script>
 
 <template>
-  <div v-if="$slots.default || value" class="SDescText" :class="classes">
+  <div v-if="hasSlot || value" class="SDescText" :class="classes">
     <div class="value">
-      <slot v-if="$slots.default" />
+      <slot v-if="hasSlot" />
       <template v-else>{{ value }}</template>
     </div>
   </div>

lib/composables/Utils.ts

@@ -1,5 +1,6 @@
 import { type MaybeRefOrGetter, resolveUnref } from '@vueuse/core'
-import { type ComputedRef, computed } from 'vue'
+import { type ComputedRef, computed, useSlots } from 'vue'
+import { isArray, isString } from '../support/Utils'
 
 export type WhenCondition<T> = MaybeRefOrGetter<T>
 
@@ -33,3 +34,31 @@ export function computedArray<T = any>(fn: (arr: T[]) => void): ComputedRef<T[]>
     return arr
   })
 }
+
+/**
+ * Checks whether the slot has a non empty value.
+ */
+export function useHasSlotContent(name = 'default'): ComputedRef<boolean> {
+  const slots = useSlots()
+
+  return computed(() => {
+    return !!slots[name]?.().some((s) => {
+      return isArray(s.children) ? true : !!(s.children as string).trim()
+    })
+  })
+}
+
+/**
+ * Get the slot value. If the slot contains child nodes, it will get ignored
+ * and treated as if it was empty. This composable is useful to get the plain
+ * text out of the slot content.
+ */
+export function useSlotValue(name = 'default'): ComputedRef<string | null> {
+  const slots = useSlots()
+
+  return computed(() => {
+    const c = slots[name]?.()[0]?.children
+    const v = isString(c) ? c.trim() : null
+    return v !== '' ? v : null
+  })
+}

tests/components/SDesc.spec.ts

@@ -9,6 +9,7 @@ import SDescPill from 'sefirot/components/SDescPill.vue'
 import SDescState from 'sefirot/components/SDescState.vue'
 import SDescText from 'sefirot/components/SDescText.vue'
 import { day } from 'sefirot/support/Day'
+import { h } from 'vue'
 
 describe('components/SDesc', () => {
   describe('SDesc', () => {
@@ -58,6 +59,27 @@ describe('components/SDesc', () => {
       expect(wrapper.find('.SDescText .value').text()).toBe('John Doe')
     })
 
+    test('renders child nodes if passed', () => {
+      const wrapper = mount(SDescText, {
+        slots: {
+          default: h('div', [h('p', 'John Doe')])
+        }
+      })
+
+      expect(wrapper.find('.SDescText .value p').text()).toBe('John Doe')
+    })
+
+    test('shows `SDescEmpty` when the #default is empty', () => {
+      const wrapper = mount(SDescText, {
+        slots: {
+          default: h('div', '')
+        }
+      })
+
+      expect(wrapper.find('.SDescText').exists()).toBe(false)
+      expect(wrapper.find('.SDescEmpty').exists()).toBe(true)
+    })
+
     test('shows `SDescEmpty` when the value is empty', () => {
       const wrapper = mount(SDescText)
 
@@ -101,6 +123,17 @@ describe('components/SDesc', () => {
       expect(wrapper.find('.SDescNumber .value').text()).toBe('123,456')
     })
 
+    test('shows `SDescEmpty` when the #default is empty', () => {
+      const wrapper = mount(SDescNumber, {
+        slots: {
+          default: h('div', '')
+        }
+      })
+
+      expect(wrapper.find('.SDescNumber').exists()).toBe(false)
+      expect(wrapper.find('.SDescEmpty').exists()).toBe(true)
+    })
+
     test('shows `SDescEmpty` when the value is empty', () => {
       const wrapper = mount(SDescNumber)