@globalbrain/sefirot 2.43.0 → 2.45.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

@@ -34,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

@@ -33,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

@@ -34,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

@@ -30,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;

package/lib/components/SInputCheckbox.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { type IconifyIcon } from '@iconify/vue/dist/offline'
 import IconCheck from '@iconify-icons/ph/check-bold'
+import IconMinus from '@iconify-icons/ph/minus-bold'
 import { computed } from 'vue'
 import { type Validatable } from '../composables/Validation'
 import SIcon from './SIcon.vue'
@@ -19,8 +20,9 @@ const props = withDefaults(defineProps<{
   checkText?: string
   checkColor?: Color
   text?: string
-  value?: boolean
-  modelValue?: boolean
+  disabled?: boolean
+  value?: boolean | 'indeterminate'
+  modelValue?: boolean | 'indeterminate'
   validation?: Validatable
   hideError?: boolean
 }>(), {
@@ -33,22 +35,33 @@ const emit = defineEmits<{
   (e: 'change', value: boolean): void
 }>()
 
+const classes = computed(() => [
+  props.size ?? 'small',
+  { disabled: props.disabled }
+])
+
+const isIndeterminate = computed(() => {
+  return props.modelValue === 'indeterminate' || props.value === 'indeterminate'
+})
+
 const _value = computed(() => {
   return props.modelValue !== undefined
-    ? props.modelValue
-    : props.value !== undefined ? props.value : false
+    ? props.modelValue === true
+    : props.value !== undefined ? props.value === true : false
 })
 
 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,10 +72,19 @@ function onClick() {
     :validation="validation"
   >
     <div class="container">
-      <div class="input" :class="{ on: _value }" role="button" @click="onClick">
+      <div
+        class="input"
+        :class="{ on: _value || isIndeterminate }"
+        role="button"
+        @click="onClick"
+        :aria-disabled="disabled"
+      >
         <div class="box">
           <div class="check">
-            <SIcon :icon="IconCheck" class="check-icon" />
+            <SIcon
+              :icon="isIndeterminate ? IconMinus : IconCheck"
+              class="check-icon"
+            />
           </div>
         </div>
 
@@ -139,4 +161,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/package.json

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