@globalbrain/sefirot 2.16.0 → 2.18.0

package/lib/components/SInputBase.vue

@@ -88,21 +88,19 @@ function getErrorMsg(validation: Validatable) {
 
 <style scoped lang="postcss">
 .SInputBase.mini {
-  .label            { padding-bottom: 6px; }
-  .label-text-value { font-size: 12px; }
+  .label            { padding-bottom: 6px; height: 22px; }
+  .label-text-value { font-size: var(--input-label-font-size, var(--input-mini-label-font-size)); }
   .label-text-info  { width: 14px; height: 14px; }
 }
 
 .SInputBase.small {
-  .label              { padding-bottom: 8px; }
-  .label-text-value   { font-size: 14px; }
-  .label-note, .check { transform: translateY(1px); }
+  .label              { padding-bottom: 8px; height: 24px; }
+  .label-text-value   { font-size: var(--input-label-font-size, var(--input-small-label-font-size)); }
 }
 
 .SInputBase.medium {
-  .label              { padding-bottom: 8px; }
-  .label-text-value   { font-size: 14px; }
-  .label-note, .check { transform: translateY(1px); }
+  .label              { padding-bottom: 8px; height: 24px; }
+  .label-text-value   { font-size: var(--input-label-font-size, var(--input-medium-label-font-size)); }
 }
 
 .SInputBase.has-error {
@@ -113,7 +111,7 @@ function getErrorMsg(validation: Validatable) {
 
 .label {
   display: flex;
-  align-items: center;
+  align-items: baseline;
   width: 100%;
   line-height: 16px;
   font-weight: 500;

package/lib/components/SInputDate.vue

@@ -17,6 +17,7 @@ const props = defineProps<{
   checkIcon?: IconifyIcon | DefineComponent
   checkText?: string
   checkColor?: Color
+  block?: boolean
   modelValue: Day | null
   validation?: Validatable
   hideError?: boolean
@@ -71,6 +72,7 @@ function emitBlur() {
         <input
           :id="name"
           class="input"
+          :class="{ block }"
           type="text"
           placeholder="YYYY-MM-DD"
           :value="inputValue"
@@ -113,5 +115,9 @@ function emitBlur() {
     font-weight: 500;
     color: var(--c-text-3);
   }
+
+  &.block {
+    max-width: none;
+  }
 }
 </style>

package/lib/components/SInputNumber.vue

@@ -2,12 +2,13 @@
 import { IconifyIcon } from '@iconify/vue/dist/offline'
 import { DefineComponent, computed } from 'vue'
 import { Validatable } from '../composables/Validation'
-import { isNullish } from '../support/Utils'
+import { isNullish, isString } from '../support/Utils'
 import SInputText from './SInputText.vue'
 
 export type Size = 'mini' | 'small' | 'medium'
 export type Align = 'left' | 'center' | 'right'
-export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
+export type CheckColor = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
+export type TextColor = 'neutral' | 'info' | 'success' | 'warning' | 'danger'
 
 const props = defineProps<{
   size?: Size
@@ -17,11 +18,12 @@ const props = defineProps<{
   note?: string
   help?: string
   placeholder?: string
-  unitBefore?: string
-  unitAfter?: string
+  unitBefore?: any
+  unitAfter?: any
   checkIcon?: IconifyIcon | DefineComponent
   checkText?: string
-  checkColor?: Color
+  checkColor?: CheckColor
+  textColor?: TextColor | ((value: number | null) => TextColor)
   align?: Align
   separator?: boolean
   disabled?: boolean
@@ -43,6 +45,18 @@ const _value = computed(() => {
     : props.value !== undefined ? props.value : null
 })
 
+const _textColor = computed(() => {
+  if (!props.textColor) {
+    return 'neutral'
+  }
+
+  if (isString(props.textColor)) {
+    return props.textColor
+  }
+
+  return props.textColor(_value.value)
+})
+
 const valueWithSeparator = computed(() => {
   if (isNullish(_value.value)) {
     return null
@@ -86,6 +100,7 @@ function emitUpdate(value: string | null) {
     :check-icon="checkIcon"
     :check-text="checkText"
     :check-color="checkColor"
+    :text-color="_textColor"
     :align="align"
     :disabled="disabled"
     :hide-error="hideError"

package/lib/components/SInputText.vue

@@ -2,12 +2,14 @@
 import { IconifyIcon } from '@iconify/vue/dist/offline'
 import { DefineComponent, computed, ref } from 'vue'
 import { Validatable } from '../composables/Validation'
+import { isString } from '../support/Utils'
 import SIcon from './SIcon.vue'
 import SInputBase from './SInputBase.vue'
 
 export type Size = 'mini' | 'small' | 'medium'
 export type Align = 'left' | 'center' | 'right'
-export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
+export type CheckColor = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
+export type TextColor = 'neutral' | 'info' | 'success' | 'warning' | 'danger'
 
 const props = defineProps<{
   size?: Size
@@ -18,12 +20,12 @@ const props = defineProps<{
   help?: string
   type?: string
   placeholder?: string
-  unitBefore?: string
-  unitAfter?: string
+  unitBefore?: any
+  unitAfter?: any
   checkIcon?: IconifyIcon | DefineComponent
   checkText?: string
-  checkColor?: Color
-  icon?: any
+  checkColor?: CheckColor
+  textColor?: TextColor | ((value: string | null) => TextColor)
   align?: Align
   disabled?: boolean
   modelValue: string | null
@@ -48,6 +50,23 @@ const classes = computed(() => [
   { disabled: props.disabled }
 ])
 
+const inputClasses = computed(() => [
+  textColor.value,
+  { hide: showDisplay.value }
+])
+
+const textColor = computed(() => {
+  if (!props.textColor) {
+    return 'neutral'
+  }
+
+  if (isString(props.textColor)) {
+    return props.textColor
+  }
+
+  return props.textColor(props.modelValue)
+})
+
 const showDisplay = computed(() => {
   return !isFocused.value && props.displayValue
 })
@@ -113,19 +132,16 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
         <slot name="addon-before" />
       </div>
 
-      <div v-if="icon" class="icon">
-        <SIcon :icon="icon" class="icon-svg" />
-      </div>
-
       <div class="value">
-        <div v-if="props.unitBefore" class="unit before">
-          {{ props.unitBefore }}
+        <div v-if="unitBefore" class="unit before">
+          <span v-if="isString(unitBefore)" class="unit-text">{{ unitBefore }}</span>
+          <SIcon v-else class="unit-icon" :icon="unitBefore" />
         </div>
 
         <div class="area">
           <input
             class="input entity"
-            :class="{ hide: showDisplay }"
+            :class="inputClasses"
             :id="name"
             :type="type ?? 'text'"
             :placeholder="placeholder"
@@ -137,13 +153,14 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
             @input="emitInput"
             @keypress.enter="emitEnter"
           >
-          <div v-if="showDisplay" class="input display">
+          <div v-if="showDisplay" class="input display" :class="[textColor]">
             {{ displayValue }}
           </div>
         </div>
 
-        <div v-if="props.unitAfter" class="unit after">
-          {{ props.unitAfter }}
+        <div v-if="unitAfter" class="unit after">
+          <span v-if="isString(unitAfter)" class="unit-text">{{ unitAfter }}</span>
+          <SIcon v-else class="unit-icon" :icon="unitAfter" />
         </div>
       </div>
 
@@ -160,6 +177,7 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
   .box   { min-height: 32px; }
   .value { min-height: 30px; }
   .area  { min-height: 30px; }
+  .unit  { min-height: 30px; }
 
   .input {
     padding: 3px 8px;
@@ -180,12 +198,7 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
   .unit.before { padding-right: 0; }
   .unit.after  { padding-left: 0; }
 
-  .icon {
-    width: 22px;
-    height: 30px;
-  }
-
-  .icon-svg {
+  .unit-icon {
     width: 16px;
     height: 16px;
   }
@@ -213,6 +226,7 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
   .box   { min-height: 40px; }
   .value { min-height: 38px; }
   .area  { min-height: 38px; }
+  .unit  { min-height: 38px; }
 
   .input {
     padding: 7px 12px;
@@ -233,12 +247,7 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
   .unit.before { padding-right: 0; }
   .unit.after  { padding-left: 0; }
 
-  .icon {
-    width: 26px;
-    height: 38px;
-  }
-
-  .icon-svg {
+  .unit-icon {
     width: 16px;
     height: 16px;
   }
@@ -266,6 +275,7 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
   .box   { min-height: 48px; }
   .value { min-height: 46px; }
   .area  { min-height: 46px; }
+  .unit  { min-height: 46px; }
 
   .input {
     padding: 11px 12px;
@@ -286,14 +296,9 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
   .unit.before { padding-right: 0; }
   .unit.after  { padding-left: 0; }
 
-  .icon {
-    width: 28px;
-    height: 46px;
-  }
-
-  .icon-svg {
-    width: 18px;
-    height: 18px;
+  .unit-icon {
+    width: 16px;
+    height: 16px;
   }
 
   :slotted(.SInputAddon) .action {
@@ -385,10 +390,15 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
   bottom: 0;
   left: 0;
   width: 100%;
-  color: var(--input-value-color);
   background-color: transparent;
   cursor: text;
 
+  &.neutral:not(.hide) { color: var(--input-value-color); }
+  &.info:not(.hide)    { color: var(--c-info-text); }
+  &.success:not(.hide) { color: var(--c-success-text); }
+  &.warning:not(.hide) { color: var(--c-warning-text); }
+  &.danger:not(.hide)  { color: var(--c-danger-text); }
+
   &.hide,
   &.hide::placeholder {
     color: transparent;
@@ -409,19 +419,14 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
 }
 
 .unit {
-  font-weight: 500;
-  color: var(--c-text-2);
-}
-
-.icon {
   display: flex;
   align-items: center;
-  cursor: text;
+  justify-content: center;
   color: var(--c-text-2);
 }
 
-.icon-svg {
-  fill: currentColor;
+.unit-text {
+  font-weight: 500;
 }
 
 .addon {

package/lib/components/SInputTextarea.vue

@@ -19,7 +19,7 @@ const props = defineProps<{
   checkColor?: Color
   placeholder?: string
   disabled?: boolean
-  rows?: number
+  rows?: number | 'fill'
   modelValue: string | null
   hideError?: boolean
   validation?: Validatable
@@ -31,7 +31,8 @@ const emit = defineEmits<{
 
 const classes = computed(() => [
   props.size ?? 'small',
-  { disabled: props.disabled }
+  { disabled: props.disabled },
+  { fill: props.rows === 'fill' }
 ])
 
 function emitInput(e: Event): void {
@@ -62,6 +63,7 @@ function emitBlur(e: FocusEvent): void {
     <textarea
       :id="name"
       class="input"
+      :class="{ fill: rows === 'fill' }"
       :placeholder="placeholder"
       :rows="rows ?? 3"
       :disabled="disabled"
@@ -73,7 +75,7 @@ function emitBlur(e: FocusEvent): void {
   </SInputBase>
 </template>
 
-<style lang="postcss" scoped>
+<style scoped lang="postcss">
 .SInputTextarea.mini {
   .input {
     padding: 6px 12px;
@@ -155,5 +157,9 @@ function emitBlur(e: FocusEvent): void {
   .dark &:hover:focus {
     border-color: var(--c-info);
   }
+
+  &.fill {
+    height: 100%;
+  }
 }
 </style>

package/lib/styles/variables.css

@@ -658,4 +658,8 @@
   --input-mini-font-size: 14px;
   --input-small-font-size: 16px;
   --input-medium-font-size: 16px;
+
+  --input-mini-label-font-size: 12px;
+  --input-small-label-font-size: 14px;
+  --input-medium-label-font-size: 14px;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@globalbrain/sefirot",
-  "version": "2.16.0",
-  "packageManager": "pnpm@7.26.0",
+  "version": "2.18.0",
+  "packageManager": "pnpm@7.26.2",
   "description": "Vue Components for Global Brain Design System.",
   "author": "Kia Ishii <ka.ishii@globalbrains.com>",
   "license": "MIT",