@globalbrain/sefirot 2.29.0 → 2.30.0

package/lib/components/SInputDate.vue

@@ -20,6 +20,7 @@ const props = defineProps<{
   checkText?: string
   checkColor?: Color
   block?: boolean
+  disabled?: boolean
   modelValue: Day | null
   validation?: Validatable
   hideError?: boolean
@@ -79,12 +80,13 @@ function emitBlur() {
         <input
           :id="name"
           class="input"
-          :class="{ block }"
+          :class="{ block, disabled }"
           type="text"
           placeholder="YYYY-MM-DD"
-          :value="inputValue"
           autocomplete="off"
-          v-on="inputEvents"
+          :value="inputValue"
+          :disabled="disabled"
+          v-on="disabled || inputEvents"
           @blur="emitBlur"
         >
       </DatePicker>
@@ -97,31 +99,43 @@ function emitBlur() {
 .SInputDate.mini {
   .input {
     padding: 3px 8px;
-    max-width: 120px;
+    max-width: 114px;
     height: 32px;
     line-height: 24px;
     font-size: var(--input-font-size, var(--input-mini-font-size));
   }
+
+  .input.block {
+    max-width: 100%;
+  }
 }
 
 .SInputDate.small {
   .input {
     padding: 5px 12px;
-    max-width: 128px;
+    max-width: 136px;
     height: 40px;
     line-height: 24px;
     font-size: var(--input-font-size, var(--input-small-font-size));
   }
+
+  .input.block {
+    max-width: 100%;
+  }
 }
 
 .SInputDate.medium {
   .input {
     padding: 11px 12px;
-    max-width: 160px;
+    max-width: 136px;
     height: 48px;
     line-height: 24px;
     font-size: var(--input-font-size, var(--input-medium-font-size));
   }
+
+  .input.block {
+    max-width: 100%;
+  }
 }
 
 .SInputDate.has-error {
@@ -139,8 +153,8 @@ function emitBlur() {
   border: 1px solid var(--input-border-color);
   border-radius: 6px;
   width: 100%;
-  font-family: var(--font-family-number);
   font-weight: 400;
+  font-feature-settings: 'tnum';
   background-color: var(--input-bg-color);
   transition: border-color 0.25s, background-color 0.25s;
 
@@ -148,8 +162,10 @@ function emitBlur() {
     color: var(--input-placeholder-color);
   }
 
-  &.block {
-    max-width: none;
+  &.disabled {
+    border-color: var(--input-disabled-border-color);
+    background-color: var(--input-disabled-bg-color);
+    cursor: not-allowed;
   }
 }
 </style>

package/lib/components/SInputDropdown.vue

@@ -241,11 +241,12 @@ function handleArray(value: OptionValue) {
 
 .SInputDropdown.disabled {
   .box {
-    background-color: var(--c-bg);
+    border-color: var(--input-disabled-border-color);
+    background-color: var(--input-disabled-bg-color);
     cursor: not-allowed;
 
-    &:hover                     { border-color: var(--c-divider); }
-    &:focus:not(:focus-visible) { border-color: var(--c-divider); }
+    &:hover                     { border-color: var(--input-disabled-border-color); }
+    &:focus:not(:focus-visible) { border-color: var(--input-disabled-border-color); }
   }
 
   .box-icon {

package/lib/components/SInputYMD.vue

@@ -28,6 +28,7 @@ const props = defineProps<{
   noYear?: boolean
   noMonth?: boolean
   noDate?: boolean
+  block?: boolean
   disabled?: boolean
   value?: Value
   modelValue?: Value
@@ -139,7 +140,7 @@ function createRequiredTouched(): boolean[] {
     :hide-error="hideError"
     :validation="validation"
   >
-    <div class="container" :class="{ focus: isFocused }">
+    <div class="container" :class="{ focus: isFocused, block }">
       <input
         v-if="!noYear"
         class="input year"
@@ -278,11 +279,15 @@ function createRequiredTouched(): boolean[] {
 
   &:hover { border-color: var(--input-hover-border-color); }
   &.focus { border-color: var(--input-focus-border-color); }
+
+  &.block {
+    width: 100%;
+  }
 }
 
 .input {
-  font-family: var(--font-family-number);
   line-height: 24px;
+  font-feature-settings: "tnum";
   background-color: transparent;
 
   &::placeholder {

package/lib/components/STableCell.vue

@@ -95,7 +95,7 @@ const computedCell = computed<TableCell | undefined>(() =>
   overflow: hidden;
 
   .row:hover & {
-    background-color: var(--c-bg-elv-1);
+    background-color: var(--c-bg-elv-2);
   }
 
   .summary & {

package/package.json

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