@globalbrain/sefirot 2.42.0 → 2.44.0

package/lib/components/SDesc.vue

@@ -1,14 +1,28 @@
 <script setup lang="ts">
+import { provide } from 'vue'
 import SGrid from './SGrid.vue'
 
-defineProps<{
+const props = withDefaults(defineProps<{
   cols?: string | number
   gap?: string | number
-}>()
+  dir?: 'column' | 'row'
+  labelWidth?: string | number
+  divider?: boolean
+}>(), {
+  dir: 'column',
+  divider: true
+})
+
+provide('sefirot-desc-label-wdith', () => props.labelWidth)
 </script>
 
 <template>
-  <SGrid class="SDesc" :cols="cols" :gap="gap">
+  <SGrid
+    class="SDesc"
+    :class="[dir, { divider }]"
+    :cols="cols"
+    :gap="gap"
+  >
     <slot />
   </SGrid>
 </template>

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) {
@@ -35,11 +34,6 @@ const _value = computed(() => {
 </template>
 
 <style scoped lang="postcss">
-.SDescDay {
-  border-bottom: 1px dashed var(--c-divider-1);
-  padding-bottom: 7px;
-}
-
 .value {
   line-height: 24px;
   font-size: 14px;

package/lib/components/SDescEmpty.vue

@@ -5,11 +5,6 @@
 </template>
 
 <style scoped lang="postcss">
-.SDescEmpty {
-  border-bottom: 1px dashed var(--c-divider-1);
-  padding-bottom: 7px;
-}
-
 .value {
   line-height: 24px;
   font-size: 14px;

package/lib/components/SDescItem.vue

@@ -1,9 +1,17 @@
 <script setup lang="ts">
+import { computed, inject } from 'vue'
 import SGridItem from './SGridItem.vue'
 
 defineProps<{
   span?: string | number
 }>()
+
+const labelWidthProp = inject<() => string | number | undefined>('sefirot-desc-label-wdith')
+
+const labelWidth = computed(() => {
+  const w = labelWidthProp?.()
+  return w ? `${w}px` : '1fr'
+})
 </script>
 
 <template>
@@ -11,3 +19,18 @@ defineProps<{
     <slot />
   </SGridItem>
 </template>
+
+<style scoped lang="postcss">
+.SDescItem {
+  display: grid;
+}
+
+.SDesc.row > .SDescItem {
+  grid-template-columns: var(--desc-label-width, v-bind(labelWidth)) 1fr;
+}
+
+.SDesc.divider > .SDescItem {
+  border-bottom: 1px dashed var(--c-divider-1);
+  padding-bottom: 7px;
+}
+</style>

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>
@@ -36,11 +33,6 @@ const link = computed(() => {
 </template>
 
 <style scoped lang="postcss">
-.SDescLink {
-  border-bottom: 1px dashed var(--c-divider-1);
-  padding-bottom: 7px;
-}
-
 .value {
   display: block;
   line-height: 24px;

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
@@ -33,11 +34,6 @@ const _value = computed(() => {
 </template>
 
 <style scoped lang="postcss">
-.SDescNumber {
-  border-bottom: 1px dashed var(--c-divider-1);
-  padding-bottom: 7px;
-}
-
 .value {
   line-height: 24px;
   font-size: 14px;

package/lib/components/SDescPill.vue

@@ -32,11 +32,6 @@ const pills = computed(() => {
 </template>
 
 <style scoped lang="postcss">
-.SDescPill {
-  border-bottom: 1px dashed var(--c-divider-1);
-  padding-bottom: 7px;
-}
-
 .value {
   display: flex;
   gap: 4px 6px;

package/lib/components/SDescState.vue

@@ -22,11 +22,6 @@ defineProps<{
 </template>
 
 <style scoped lang="postcss">
-.SDescState {
-  border-bottom: 1px dashed var(--c-divider-1);
-  padding-bottom: 7px;
-}
-
 .value {
   display: flex;
   align-items: center;

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>
@@ -27,11 +30,6 @@ const lineClamp = computed(() => props.lineClamp ?? 'none')
 </template>
 
 <style scoped lang="postcss">
-.SDescText {
-  border-bottom: 1px dashed var(--c-divider-1);
-  padding-bottom: 7px;
-}
-
 .value {
   line-height: 24px;
   font-size: 14px;
@@ -50,6 +48,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/SInputCheckbox.vue

@@ -19,6 +19,7 @@ const props = withDefaults(defineProps<{
   checkText?: string
   checkColor?: Color
   text?: string
+  disabled?: boolean
   value?: boolean
   modelValue?: boolean
   validation?: Validatable
@@ -33,6 +34,11 @@ const emit = defineEmits<{
   (e: 'change', value: boolean): void
 }>()
 
+const classes = computed(() => [
+  props.size ?? 'small',
+  { disabled: props.disabled }
+])
+
 const _value = computed(() => {
   return props.modelValue !== undefined
     ? props.modelValue
@@ -40,15 +46,17 @@ const _value = computed(() => {
 })
 
 function onClick() {
-  emit('update:model-value', !_value.value)
-  emit('change', !_value.value)
+  if (!props.disabled) {
+    emit('update:model-value', !_value.value)
+    emit('change', !_value.value)
+  }
 }
 </script>
 
 <template>
   <SInputBase
     class="SInputCheckbox"
-    :class="[size ?? 'small']"
+    :class="classes"
     :label="label"
     :note="note"
     :info="info"
@@ -59,7 +67,13 @@ function onClick() {
     :validation="validation"
   >
     <div class="container">
-      <div class="input" :class="{ on: _value }" role="button" @click="onClick">
+      <div
+        class="input"
+        :class="{ on: _value }"
+        role="button"
+        @click="onClick"
+        :aria-disabled="disabled"
+      >
         <div class="box">
           <div class="check">
             <SIcon :icon="IconCheck" class="check-icon" />
@@ -139,4 +153,16 @@ function onClick() {
   font-size: 14px;
   font-weight: 400;
 }
+
+.SInputCheckbox.disabled {
+  .box {
+    border-color: var(--input-disabled-border-color);
+    background-color: var(--input-disabled-bg-color);
+
+    &:hover                     { border-color: var(--input-disabled-border-color); }
+    &:focus:not(:focus-visible) { border-color: var(--input-disabled-border-color); }
+  }
+
+  .input { cursor: not-allowed; }
+}
 </style>

package/lib/components/SInputCheckboxes.vue

@@ -13,6 +13,7 @@ export type Value = string | number | boolean
 export interface Option {
   label: string
   value: Value
+  disabled?: boolean
 }
 
 const props = withDefaults(defineProps<{
@@ -27,6 +28,7 @@ const props = withDefaults(defineProps<{
   checkColor?: Color
   options: Option[]
   nullable?: boolean
+  disabled?: boolean
   value?: Value[]
   modelValue?: Value[]
   validation?: Validatable
@@ -82,6 +84,7 @@ function handleChange(value: Value): void {
         <div v-for="option in options" :key="String(option.value)" class="col">
           <SInputCheckbox
             :text="option.label"
+            :disabled="option.disabled ?? disabled"
             :model-value="isChecked(option.value)"
             @update:model-value="handleChange(option.value)"
           />

package/lib/components/SInputRadio.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { type IconifyIcon } from '@iconify/vue/dist/offline'
-import { type DefineComponent } from 'vue'
+import { type DefineComponent, computed } from 'vue'
 import { type Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 
@@ -18,6 +18,7 @@ const props = defineProps<{
   checkText?: string
   checkColor?: Color
   text: string
+  disabled?: boolean
   modelValue: boolean
   validation?: Validatable
   hideError?: boolean
@@ -28,16 +29,23 @@ const emit = defineEmits<{
   (e: 'change', value: boolean): void
 }>()
 
+const classes = computed(() => [
+  props.size ?? 'small',
+  { disabled: props.disabled }
+])
+
 function onClick() {
-  emit('update:model-value', !props.modelValue)
-  emit('change', !props.modelValue)
+  if (!props.disabled) {
+    emit('update:model-value', !props.modelValue)
+    emit('change', !props.modelValue)
+  }
 }
 </script>
 
 <template>
   <SInputBase
     class="SInputRadio"
-    :class="[size ?? 'small']"
+    :class="classes"
     :label="label"
     :note="note"
     :info="info"
@@ -49,7 +57,13 @@ function onClick() {
     :hide-error="hideError"
   >
     <div class="container">
-      <div class="input" :class="{ on: props.modelValue }" role="button" @click="onClick">
+      <div
+        class="input"
+        :class="{ on: props.modelValue }"
+        role="button"
+        @click="onClick"
+        :aria-disabled="disabled"
+      >
         <div class="box">
           <div class="check" />
         </div>
@@ -125,4 +139,16 @@ function onClick() {
   font-size: 14px;
   font-weight: 400;
 }
+
+.SInputRadio.disabled {
+  .box {
+    border-color: var(--input-disabled-border-color);
+    background-color: var(--input-disabled-bg-color);
+
+    &:hover                     { border-color: var(--input-disabled-border-color); }
+    &:focus:not(:focus-visible) { border-color: var(--input-disabled-border-color); }
+  }
+
+  .input { cursor: not-allowed; }
+}
 </style>

package/lib/components/SInputRadios.vue

@@ -12,6 +12,7 @@ export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'dange
 export interface Option {
   label: string
   value: string | number | boolean
+  disabled?: boolean
 }
 
 const props = withDefaults(defineProps<{
@@ -26,6 +27,7 @@ const props = withDefaults(defineProps<{
   checkColor?: Color
   options: Option[]
   nullable?: boolean
+  disabled?: boolean
   value?: string | number | boolean | null
   modelValue?: string | number | boolean | null
   validation?: Validatable
@@ -92,6 +94,7 @@ function onChange(value: string | number | boolean) {
         <div v-for="(option, index) in options" :key="index" class="col">
           <SInputRadio
             :text="option.label"
+            :disabled="option.disabled ?? disabled"
             :model-value="isChecked(option.value)"
             @update:model-value="onUpdate(option.value)"
             @change="onChange(option.value)"

package/lib/components/SInputYMD.vue

@@ -277,6 +277,9 @@ function createRequiredTouched(): boolean[] {
   .container {
     background-color: var(--input-disabled-bg-color);
   }
+
+  .container:hover { border-color: var(--input-border-color); }
+  .container.focus { border-color: var(--input-border-color); }
 }
 
 .SInputYMD.has-error {

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.42.0",
+  "version": "2.44.0",
   "packageManager": "pnpm@8.6.2",
   "description": "Vue Components for Global Brain Design System.",
   "author": "Kia Ishii <ka.ishii@globalbrains.com>",