@globalbrain/sefirot 2.15.0 → 2.17.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

@@ -17,6 +17,8 @@ const props = defineProps<{
   note?: string
   help?: string
   placeholder?: string
+  unitBefore?: any
+  unitAfter?: any
   checkIcon?: IconifyIcon | DefineComponent
   checkText?: string
   checkColor?: Color
@@ -79,6 +81,8 @@ function emitUpdate(value: string | null) {
     :info="info"
     :help="help"
     :placeholder="placeholder"
+    :unit-before="unitBefore"
+    :unit-after="unitAfter"
     :check-icon="checkIcon"
     :check-text="checkText"
     :check-color="checkColor"

package/lib/components/SInputText.vue

@@ -2,6 +2,7 @@
 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'
 
@@ -18,10 +19,11 @@ const props = defineProps<{
   help?: string
   type?: string
   placeholder?: string
+  unitBefore?: any
+  unitAfter?: any
   checkIcon?: IconifyIcon | DefineComponent
   checkText?: string
   checkColor?: Color
-  icon?: any
   align?: Align
   disabled?: boolean
   modelValue: string | null
@@ -111,27 +113,35 @@ 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">
-        <input
-          class="input entity"
-          :class="{ hide: showDisplay }"
-          :id="name"
-          :type="type ?? 'text'"
-          :placeholder="placeholder"
-          :disabled="disabled"
-          :value="modelValue"
-          ref="input"
-          @focus="onFocus"
-          @blur="emitBlur"
-          @input="emitInput"
-          @keypress.enter="emitEnter"
-        >
-        <div v-if="showDisplay" class="input display">
-          {{ displayValue }}
+        <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 }"
+            :id="name"
+            :type="type ?? 'text'"
+            :placeholder="placeholder"
+            :disabled="disabled"
+            :value="modelValue"
+            ref="input"
+            @focus="onFocus"
+            @blur="emitBlur"
+            @input="emitInput"
+            @keypress.enter="emitEnter"
+          >
+          <div v-if="showDisplay" class="input display">
+            {{ displayValue }}
+          </div>
+        </div>
+
+        <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>
 
@@ -147,6 +157,8 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
 .SInputText.mini {
   .box   { min-height: 32px; }
   .value { min-height: 30px; }
+  .area  { min-height: 30px; }
+  .unit  { min-height: 30px; }
 
   .input {
     padding: 3px 8px;
@@ -155,12 +167,19 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
     font-size: var(--input-font-size, var(--input-mini-font-size));
   }
 
-  .icon {
-    width: 22px;
-    height: 30px;
+  .unit + .area .input      { padding-left: 6px; }
+  .area:has(+ .unit) .input { padding-right: 6px; }
+
+  .unit {
+    padding: 3px 8px;
+    line-height: 24px;
+    font-size: var(--input-font-size, var(--input-mini-font-size));
   }
 
-  .icon-svg {
+  .unit.before { padding-right: 0; }
+  .unit.after  { padding-left: 0; }
+
+  .unit-icon {
     width: 16px;
     height: 16px;
   }
@@ -187,6 +206,8 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
 .SInputText.small {
   .box   { min-height: 40px; }
   .value { min-height: 38px; }
+  .area  { min-height: 38px; }
+  .unit  { min-height: 38px; }
 
   .input {
     padding: 7px 12px;
@@ -195,12 +216,19 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
     font-size: var(--input-font-size, var(--input-small-font-size));
   }
 
-  .icon {
-    width: 26px;
-    height: 38px;
+  .unit + .area .input      { padding-left: 8px; }
+  .area:has(+ .unit) .input { padding-right: 8px; }
+
+  .unit {
+    padding: 7px 12px;
+    line-height: 24px;
+    font-size: var(--input-font-size, var(--input-small-font-size));
   }
 
-  .icon-svg {
+  .unit.before { padding-right: 0; }
+  .unit.after  { padding-left: 0; }
+
+  .unit-icon {
     width: 16px;
     height: 16px;
   }
@@ -227,6 +255,8 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
 .SInputText.medium {
   .box   { min-height: 48px; }
   .value { min-height: 46px; }
+  .area  { min-height: 46px; }
+  .unit  { min-height: 46px; }
 
   .input {
     padding: 11px 12px;
@@ -235,14 +265,21 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
     font-size: var(--input-font-size, var(--input-medium-font-size));
   }
 
-  .icon {
-    width: 28px;
-    height: 46px;
+  .unit + .area .input      { padding-left: 8px; }
+  .area:has(+ .unit) .input { padding-right: 8px; }
+
+  .unit {
+    padding: 11px 12px;
+    line-height: 24px;
+    font-size: var(--input-font-size, var(--input-medium-font-size));
   }
 
-  .icon-svg {
-    width: 18px;
-    height: 18px;
+  .unit.before { padding-right: 0; }
+  .unit.after  { padding-left: 0; }
+
+  .unit-icon {
+    width: 16px;
+    height: 16px;
   }
 
   :slotted(.SInputAddon) .action {
@@ -275,7 +312,8 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
     background-color: var(--input-disabled-bg-color);
   }
 
-  .box:hover .input {
+  .box:hover .input,
+  .box:hover .unit {
     cursor: not-allowed;
   }
 }
@@ -318,8 +356,11 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
   }
 }
 
-.value {
+.value,
+.area {
   position: relative;
+  display: flex;
+  align-items: center;
   flex-grow: 1;
 }
 
@@ -353,15 +394,15 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
   width: 100%;
 }
 
-.icon {
+.unit {
   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.15.0",
-  "packageManager": "pnpm@7.26.0",
+  "version": "2.17.0",
+  "packageManager": "pnpm@7.26.2",
   "description": "Vue Components for Global Brain Design System.",
   "author": "Kia Ishii <ka.ishii@globalbrains.com>",
   "license": "MIT",