@globalbrain/sefirot 2.41.0 → 2.43.0

package/lib/components/SCard.vue

@@ -1,17 +1,26 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import { provideCardState } from '../composables/Card'
 
 export type Size = 'small' | 'medium' | 'large'
+export type Mode = 'neutral' | 'info' | 'success' | 'warning' | 'danger'
 
-defineProps<{
+const props = defineProps<{
   size?: Size
+  mode?: Mode
 }>()
 
 const { isCollapsed } = provideCardState()
+
+const classes = computed(() => [
+  props.size,
+  props.mode ?? 'neutral',
+  { collapsed: isCollapsed.value }
+])
 </script>
 
 <template>
-  <div class="SCard" :class="[size, { collapsed: isCollapsed }]">
+  <div class="SCard" :class="classes">
     <slot />
   </div>
 </template>
@@ -20,11 +29,17 @@ const { isCollapsed } = provideCardState()
 .SCard {
   display: grid;
   gap: 1px;
-  border: 1px solid var(--c-divider-2);
+  border: 1px solid transparent;
   border-radius: 6px;
   background-color: var(--c-gutter);
 }
 
+.SCard.neutral { border-color: var(--c-divider-2); }
+.SCard.info    { border-color: var(--c-info-border); }
+.SCard.success { border-color: var(--c-success-border); }
+.SCard.warning { border-color: var(--c-warning-border); }
+.SCard.danger  { border-color: var(--c-danger-border); }
+
 .SCard.collapsed {
   height: 48px;
   overflow: hidden;

package/lib/components/SCardHeaderTitle.vue

@@ -1,5 +1,13 @@
+<script setup lang="ts">
+export type Mode = 'neutral' | 'info' | 'success' | 'warning' | 'danger'
+
+defineProps<{
+  mode?: Mode
+}>()
+</script>
+
 <template>
-  <p class="SCardHeaderTitle">
+  <p class="SCardHeaderTitle" :class="[mode ?? 'neutral']">
     <slot />
   </p>
 </template>
@@ -12,4 +20,10 @@
   font-size: 14px;
   font-weight: 600;
 }
+
+.SCardHeaderTitle.neutral { color: var(--c-text-1); }
+.SCardHeaderTitle.info    { color: var(--c-info-text); }
+.SCardHeaderTitle.success { color: var(--c-success-text); }
+.SCardHeaderTitle.warning { color: var(--c-warning-text); }
+.SCardHeaderTitle.danger  { color: var(--c-danger-text); }
 </style>

package/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) {

package/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>

package/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

package/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>
@@ -50,6 +53,10 @@ const lineClamp = computed(() => props.lineClamp ?? 'none')
   }
 }
 
+.value :deep(p + p) {
+  margin-top: 12px;
+}
+
 .value :deep(a) {
   color: var(--c-info-text);
   transition: color 0.25s;

package/lib/components/SHeadTitle.vue

@@ -1,5 +1,13 @@
+<script setup lang="ts">
+export type Mode = 'neutral' | 'info' | 'success' | 'warning' | 'danger'
+
+defineProps<{
+  mode?: Mode
+}>()
+</script>
+
 <template>
-  <div class="SHeadTitle">
+  <div class="SHeadTitle" :class="[mode]">
     <slot />
   </div>
 </template>
@@ -11,4 +19,10 @@
   font-weight: 500;
   color: var(--c-text-1);
 }
+
+.SHeadTitle.neutral { color: var(--c-text-1); }
+.SHeadTitle.info    { color: var(--c-info-text); }
+.SHeadTitle.success { color: var(--c-success-text); }
+.SHeadTitle.warning { color: var(--c-warning-text); }
+.SHeadTitle.danger  { color: var(--c-danger-text); }
 </style>

package/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
+  })
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@globalbrain/sefirot",
-  "version": "2.41.0",
+  "version": "2.43.0",
   "packageManager": "pnpm@8.6.2",
   "description": "Vue Components for Global Brain Design System.",
   "author": "Kia Ishii <ka.ishii@globalbrains.com>",