@globalbrain/sefirot 2.16.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,8 +17,8 @@ const props = defineProps<{
   note?: string
   help?: string
   placeholder?: string
-  unitBefore?: string
-  unitAfter?: string
+  unitBefore?: any
+  unitAfter?: any
   checkIcon?: IconifyIcon | DefineComponent
   checkText?: string
   checkColor?: Color

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,12 +19,11 @@ 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
   align?: Align
   disabled?: boolean
   modelValue: string | null
@@ -113,13 +113,10 @@ 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">
@@ -142,8 +139,9 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
           </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 +158,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 +179,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 +207,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 +228,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 +256,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 +277,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 {
@@ -409,19 +395,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.17.0",
+  "packageManager": "pnpm@7.26.2",
   "description": "Vue Components for Global Brain Design System.",
   "author": "Kia Ishii <ka.ishii@globalbrains.com>",
   "license": "MIT",