@globalbrain/sefirot 2.17.0 → 2.19.0

package/lib/components/SInputHMS.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { IconifyIcon } from '@iconify/vue/dist/offline'
-import { DefineComponent, ref } from 'vue'
+import { DefineComponent, computed, ref } from 'vue'
 import { Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 
@@ -28,15 +28,23 @@ const props = defineProps<{
   noMinute?: boolean
   noSecond?: boolean
   disabled?: boolean
-  hideError?: boolean
-  modelValue: Value
+  value?: Value
+  modelValue?: Value
   validation?: Validatable
+  hideError?: boolean
 }>()
 
 const emit = defineEmits<{
-  (e: 'update:modelValue', value: Value): void
+  (e: 'update:model-value', value: Value): void
+  (e: 'change', value: Value): void
 }>()
 
+const _value = computed(() => {
+  return props.modelValue !== undefined
+    ? props.modelValue
+    : props.value !== undefined ? props.value : null
+})
+
 const isFocused = ref(false)
 
 const touched = {
@@ -66,10 +74,17 @@ function updateSecond(e: FocusEvent): void {
 }
 
 function update(type: ValueType, value: string | null) {
-  emit('update:modelValue', {
-    ...props.modelValue,
+  if (_value.value === null) {
+    return
+  }
+
+  const newValue = {
+    ..._value.value,
     [type]: value !== null ? value.padStart(2, '0') : null
-  })
+  }
+
+  emit('update:model-value', newValue)
+  emit('change', newValue)
 
   emitTouch(type)
 
@@ -114,7 +129,7 @@ function createRequiredTouched(): boolean[] {
 <template>
   <SInputBase
     class="SInputHMS"
-    :class="[size, { disabled }]"
+    :class="[size ?? 'small', { disabled }]"
     :label="label"
     :note="note"
     :info="info"
@@ -129,8 +144,9 @@ function createRequiredTouched(): boolean[] {
       <input
         v-if="!noHour"
         class="input hour"
-        :value="modelValue.hour"
+        :value="_value?.hour"
         placeholder="00"
+        :maxlength="2"
         :disabled="disabled"
         @focus="onFocus"
         @blur="updateHour"
@@ -139,8 +155,9 @@ function createRequiredTouched(): boolean[] {
       <input
         v-if="!noMinute"
         class="input minute"
-        :value="modelValue.minute"
+        :value="_value?.minute"
         placeholder="00"
+        :maxlength="2"
         :disabled="disabled"
         @focus="onFocus"
         @blur="updateMinute"
@@ -149,8 +166,9 @@ function createRequiredTouched(): boolean[] {
       <input
         v-if="!noSecond"
         class="input second"
-        :value="modelValue.second"
+        :value="_value?.second"
         placeholder="00"
+        :maxlength="2"
         :disabled="disabled"
         @focus="onFocus"
         @blur="updateSecond"
@@ -170,15 +188,15 @@ function createRequiredTouched(): boolean[] {
 
   .input {
     padding: 3px 0;
-    text-align: center;
-    font-size: 14px;
     width: 20px;
+    text-align: center;
+    font-size: var(--input-font-size, var(--input-mini-font-size));
   }
 
   .separator {
     padding: 3px 0;
     line-height: 24px;
-    font-size: 14px;
+    font-size: var(--input-font-size, var(--input-mini-font-size));
   }
 
   .separator::before {
@@ -189,20 +207,21 @@ function createRequiredTouched(): boolean[] {
 .SInputHMS.small {
   .container {
     padding: 0 12px;
+    min-height: 40px;
   }
 
   .input {
     flex-shrink: 0;
-    padding: 8px 0 6px;
-    text-align: center;
-    font-size: 16px;
+    padding: 7px 0 6px;
     width: 20px;
+    text-align: center;
+    font-size: var(--input-font-size, var(--input-small-font-size));
   }
 
   .separator {
     padding: 7px 0;
     line-height: 24px;
-    font-size: 16px;
+    font-size: var(--input-font-size, var(--input-small-font-size));
   }
 
   .separator::before {
@@ -218,14 +237,14 @@ function createRequiredTouched(): boolean[] {
   .input {
     padding: 12px 0 10px;
     text-align: center;
-    font-size: 16px;
+    font-size: var(--input-font-size, var(--input-medium-font-size));
     width: 24px;
   }
 
   .separator {
     padding: 11px 0;
     line-height: 24px;
-    font-size: 16px;
+    font-size: var(--input-font-size, var(--input-medium-font-size));
   }
 
   .separator::before {
@@ -240,49 +259,37 @@ function createRequiredTouched(): boolean[] {
   }
 
   .container {
-    border-color: var(--input-border);
-    background-color: var(--input-disabled-bg);
+    background-color: var(--input-disabled-bg-color);
   }
+
+  .container:hover { border-color: var(--input-border-color); }
+  .container.focus { border-color: var(--input-border-color); }
 }
 
 .SInputHMS.has-error {
   .container {
-    border-color: var(--c-danger);
+    border-color: var(--input-error-border-color);
   }
 }
 
 .container {
   display: inline-flex;
-  border: 1px solid var(--c-divider);
+  border: 1px solid var(--input-border-color);
   border-radius: 6px;
-  background-color: var(--c-bg);
+  background-color: var(--input-bg-color);
   transition: border-color 0.25s;
 
-  &:hover {
-    border-color: var(--c-black);
-  }
-
-  &.focus,
-  &:hover.focus {
-    border-color: var(--c-info);
-  }
-
-  .dark &:hover {
-    border-color: var(--c-gray);
-  }
-
-  .dark &.focus,
-  .dark &:hover.focus {
-    border-color: var(--c-info);
-  }
+  &:hover { border-color: var(--input-hover-border-color); }
+  &.focus { border-color: var(--input-focus-border-color); }
 }
 
 .input {
+  font-family: var(--font-family-number);
+  line-height: 24px;
   background-color: transparent;
 
   &::placeholder {
-    font-weight: 500;
-    color: var(--c-text-3);
+    color: var(--input-placeholder-color);
   }
 }
 

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
@@ -21,7 +22,8 @@ const props = defineProps<{
   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

@@ -8,7 +8,8 @@ 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
@@ -23,7 +24,8 @@ const props = defineProps<{
   unitAfter?: any
   checkIcon?: IconifyIcon | DefineComponent
   checkText?: string
-  checkColor?: Color
+  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
 })
@@ -122,7 +141,7 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
         <div class="area">
           <input
             class="input entity"
-            :class="{ hide: showDisplay }"
+            :class="inputClasses"
             :id="name"
             :type="type ?? 'text'"
             :placeholder="placeholder"
@@ -134,7 +153,7 @@ 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>
@@ -371,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;

package/lib/components/SInputYMD.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { IconifyIcon } from '@iconify/vue/dist/offline'
-import { DefineComponent, ref } from 'vue'
+import { DefineComponent, computed, ref } from 'vue'
 import { Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 
@@ -28,15 +28,31 @@ const props = defineProps<{
   noMonth?: boolean
   noDate?: boolean
   disabled?: boolean
-  hideError?: boolean
-  modelValue: Value
+  value?: Value
+  modelValue?: Value
   validation?: Validatable
+  hideError?: boolean
 }>()
 
 const emit = defineEmits<{
-  (e: 'update:modelValue', value: Value): void
+  (e: 'update:model-value', value: Value): void
+  (e: 'change', value: Value): void
 }>()
 
+const _value = computed(() => {
+  return props.modelValue !== undefined
+    ? props.modelValue
+    : props.value !== undefined ? props.value : null
+})
+
+const padValue = computed(() => {
+  return {
+    year: _value.value?.year?.toString().padStart(4, '0') ?? null,
+    month: _value.value?.month?.toString().padStart(2, '0') ?? null,
+    date: _value.value?.date?.toString().padStart(2, '0') ?? null
+  }
+})
+
 const isFocused = ref(false)
 
 const touched = {
@@ -54,22 +70,29 @@ function blur() {
 }
 
 function updateYear(e: FocusEvent) {
-  update('year', Number((e.target as HTMLInputElement).value))
+  update('year', (e.target as HTMLInputElement).value)
 }
 
 function updateMonth(e: FocusEvent) {
-  update('month', Number((e.target as HTMLInputElement).value))
+  update('month', (e.target as HTMLInputElement).value)
 }
 
 function updateDate(e: FocusEvent) {
-  update('date', Number((e.target as HTMLInputElement).value))
+  update('date', (e.target as HTMLInputElement).value)
 }
 
-function update(type: ValueType, value: number) {
-  emit('update:modelValue', {
-    ...props.modelValue,
-    [type]: value === 0 ? null : value
-  })
+function update(type: ValueType, value: string) {
+  if (_value.value === null) {
+    return
+  }
+
+  const newValue = {
+    ..._value.value,
+    [type]: value ? Number(value) : null
+  }
+
+  emit('update:model-value', newValue)
+  emit('change', newValue)
 
   emitTouch(type)
 
@@ -119,9 +142,9 @@ function createRequiredTouched(): boolean[] {
       <input
         v-if="!noYear"
         class="input year"
-        type="number"
-        :value="modelValue.year"
-        placeholder="YYYY"
+        :value="padValue?.year"
+        placeholder="1998"
+        :maxlength="4"
         :disabled="disabled"
         @focus="onFocus"
         @blur="updateYear"
@@ -133,9 +156,9 @@ function createRequiredTouched(): boolean[] {
       <input
         v-if="!noMonth"
         class="input month"
-        type="number"
-        :value="modelValue.month"
-        placeholder="M"
+        :value="padValue?.month"
+        placeholder="01"
+        :maxlength="2"
         :disabled="disabled"
         @focus="onFocus"
         @blur="updateMonth"
@@ -147,9 +170,9 @@ function createRequiredTouched(): boolean[] {
       <input
         v-if="!noDate"
         class="input date"
-        type="number"
-        :value="modelValue.date"
-        placeholder="D"
+        :value="padValue?.date"
+        placeholder="14"
+        :maxlength="2"
         :disabled="disabled"
         @focus="onFocus"
         @blur="updateDate"
@@ -159,7 +182,7 @@ function createRequiredTouched(): boolean[] {
   </SInputBase>
 </template>
 
-<style lang="postcss" scoped>
+<style scoped lang="postcss">
 .SInputYMD.mini {
   .container {
     padding: 0 4px;
@@ -168,7 +191,7 @@ function createRequiredTouched(): boolean[] {
   .input {
     padding: 3px 0;
     text-align: center;
-    font-size: 14px;
+    font-size: var(--input-font-size, var(--input-mini-font-size));
   }
 
   .input.year  { width: 48px; }
@@ -178,51 +201,53 @@ function createRequiredTouched(): boolean[] {
   .separator {
     padding: 3px 0;
     line-height: 24px;
-    font-size: 14px;
+    font-size: var(--input-font-size, var(--input-mini-font-size));
   }
 }
 
 .SInputYMD.small {
   .container {
-    padding: 0 6px;
+    padding: 0 8px;
   }
 
   .input {
-    padding: 7px 0;
+    padding: 7px 0 6px;
     text-align: center;
-    font-size: 16px;
+    font-size: var(--input-font-size, var(--input-small-font-size));
   }
 
-  .input.year  { width: 56px; }
+  .input.year  { margin-right: 2px; }
+  .input.year  { width: 48px; }
   .input.month { width: 32px; }
-  .input.date  { width: 40px; }
+  .input.date  { width: 32px; }
 
   .separator {
     padding: 7px 0;
     line-height: 24px;
-    font-size: 16px;
+    font-size: var(--input-font-size, var(--input-small-font-size));
   }
 }
 
 .SInputYMD.medium {
   .container {
-    padding: 0 4px;
+    padding: 0 8px;
   }
 
   .input {
     padding: 11px 0;
     text-align: center;
-    font-size: 16px;
+    font-size: var(--input-font-size, var(--input-medium-font-size));
   }
 
-  .input.year  { width: 56px; }
-  .input.month { width: 40px; }
-  .input.date  { width: 40px; }
+  .input.year  { margin-right: 2px; }
+  .input.year  { width: 52px; }
+  .input.month { width: 36px; }
+  .input.date  { width: 36px; }
 
   .separator {
     padding: 11px 0;
     line-height: 24px;
-    font-size: 16px;
+    font-size: var(--input-font-size, var(--input-medium-font-size));
   }
 }
 
@@ -233,48 +258,34 @@ function createRequiredTouched(): boolean[] {
   }
 
   .container {
-    background-color: var(--input-disabled-bg);
+    background-color: var(--input-disabled-bg-color);
   }
 }
 
 .SInputYMD.has-error {
   .container {
-    border-color: var(--c-danger);
+    border-color: var(--input-error-border-color);
   }
 }
 
 .container {
   display: inline-flex;
-  border: 1px solid var(--c-divider);
+  border: 1px solid var(--input-border-color);
   border-radius: 6px;
-  background-color: var(--c-bg);
-  transition: border-color 0.25s;
-
-  &:hover {
-    border-color: var(--c-black);
-  }
+  background-color: var(--input-bg-color);
+  transition: border-color 0.25s, background-color 0.25s;
 
-  &.focus,
-  &:hover.focus {
-    border-color: var(--c-info);
-  }
-
-  .dark &:hover {
-    border-color: var(--c-gray);
-  }
-
-  .dark &.focus,
-  .dark &:hover.focus {
-    border-color: var(--c-info);
-  }
+  &:hover { border-color: var(--input-hover-border-color); }
+  &.focus { border-color: var(--input-focus-border-color); }
 }
 
 .input {
+  font-family: var(--font-family-number);
+  line-height: 24px;
   background-color: transparent;
 
   &::placeholder {
-    font-weight: 500;
-    color: var(--c-text-3);
+    color: var(--input-placeholder-color);
   }
 }
 

package/lib/composables/Dropdown.ts

@@ -57,6 +57,7 @@ export interface DropdownSectionFilterOptionAvatar extends DropdownSectionFilter
 }
 
 export interface ManualDropdownPosition {
+  container: Ref<any>
   position: Ref<'top' | 'bottom'>
   update(): void
 }
@@ -74,7 +75,7 @@ export function useManualDropdownPosition(
   const { top, bottom } = useElementBounding(el)
   const { height } = useWindowSize()
 
-  const position = ref<'top' | 'bottom'>('bottom')
+  const position = ref<'top' | 'bottom'>(initPosition ?? 'bottom')
 
   const dialogHeight = 400
 
@@ -100,6 +101,7 @@ export function useManualDropdownPosition(
   }
 
   return {
+    container: el,
     position,
     update
   }

package/package.json

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