@globalbrain/sefirot 2.29.0 → 2.31.0

package/lib/components/SButton.vue

@@ -24,7 +24,9 @@ const props = defineProps<{
   type?: Type
   mode?: Mode
   icon?: any
+  iconMode?: Mode
   label?: string
+  labelMode?: Mode
   href?: string
   rounded?: boolean
   block?: boolean
@@ -60,7 +62,7 @@ function handleClick(): void {
 </script>
 
 <template>
-  <component
+  <Component
     :is="computedTag"
     class="SButton"
     :class="classes"
@@ -69,16 +71,20 @@ function handleClick(): void {
     @click="handleClick"
   >
     <span class="content">
-      <span v-if="icon" class="icon"><SIcon :icon="icon" class="icon-svg" /></span>
-      <span v-if="label" class="label">{{ label }}</span>
+      <span v-if="icon" class="icon" :class="iconMode">
+        <SIcon :icon="icon" class="icon-svg" />
+      </span>
+      <span v-if="label" class="label" :class="labelMode">
+        {{ label }}
+      </span>
     </span>
 
-    <transition name="fade">
+    <Transition name="fade">
       <span v-if="loading" key="loading" class="loader">
         <SSpinner class="loader-icon" />
       </span>
-    </transition>
-  </component>
+    </Transition>
+  </Component>
 </template>
 
 <style scoped lang="postcss">
@@ -247,6 +253,18 @@ function handleClick(): void {
   }
 }
 
+.SButton.fill .icon,
+.SButton.fill .label {
+  &.neutral { color: var(--button-fill-neutral-content-color);}
+  &.mute    { color: var(--button-fill-mute-content-color); }
+  &.white   { color: var(--button-fill-white-content-color); }
+  &.black   { color: var(--button-fill-black-content-color); }
+  &.info    { color: var(--button-fill-info-content-color); }
+  &.success { color: var(--button-fill-success-content-color); }
+  &.warning { color: var(--button-fill-warning-content-color); }
+  &.danger  { color: var(--button-fill-danger-content-color); }
+}
+
 .SButton.fill.disabled {
   &.neutral {
     border-color: var(--button-fill-neutral-disabled-border-color);
@@ -321,6 +339,18 @@ function handleClick(): void {
   }
 }
 
+.SButton.fill.disabled .icon,
+.SButton.fill.disabled .label {
+  &.neutral { color: var(--button-fill-neutral-disabled-content-color); }
+  &.white   { color: var(--button-fill-white-disabled-content-color); }
+  &.black   { color: var(--button-fill-black-disabled-content-color); }
+  &.mute    { color: var(--button-fill-mute-disabled-content-color); }
+  &.info    { color: var(--button-fill-info-disabled-content-color); }
+  &.success { color: var(--button-fill-success-disabled-content-color); }
+  &.warning { color: var(--button-fill-warning-disabled-content-color); }
+  &.danger  { color: var(--button-fill-danger-disabled-content-color); }
+}
+
 .SButton.outline {
   font-weight: 500;
 
@@ -405,6 +435,18 @@ function handleClick(): void {
   }
 }
 
+.SButton.outline .icon,
+.SButton.outline .label {
+  &.neutral { color: var(--button-outline-neutral-content-color); }
+  &.white   { color: var(--button-outline-white-content-color); }
+  &.black   { color: var(--button-outline-black-content-color); }
+  &.mute    { color: var(--button-outline-mute-content-color); }
+  &.info    { color: var(--button-outline-info-content-color); }
+  &.success { color: var(--button-outline-success-content-color); }
+  &.warning { color: var(--button-outline-warning-content-color); }
+  &.danger  { color: var(--button-outline-danger-content-color); }
+}
+
 .SButton.outline.disabled {
   &.neutral {
     border-color: var(--button-outline-neutral-disabled-border-color);
@@ -471,6 +513,18 @@ function handleClick(): void {
   }
 }
 
+.SButton.outline.disabled .icon,
+.SButton.outline.disabled .label {
+  &.neutral { color: var(--button-outline-neutral-disabled-content-color); }
+  &.white   { color: var(--button-outline-white-disabled-content-color); }
+  &.black   { color: var(--button-outline-black-disabled-content-color); }
+  &.mute    { color: var(--button-outline-mute-disabled-content-color); }
+  &.info    { color: var(--button-outline-info-disabled-content-color); }
+  &.success { color: var(--button-outline-success-disabled-content-color); }
+  &.warning { color: var(--button-outline-warning-disabled-content-color); }
+  &.danger  { color: var(--button-outline-danger-disabled-content-color); }
+}
+
 .SButton.text {
   font-weight: 500;
 
@@ -533,6 +587,18 @@ function handleClick(): void {
   }
 }
 
+.SButton.text .icon,
+.SButton.text .label {
+  &.neutral { color: var(--button-text-neutral-content-color); }
+  &.white   { color: var(--button-text-white-content-color); }
+  &.black   { color: var(--button-text-black-content-color); }
+  &.mute    { color: var(--button-text-mute-content-color); }
+  &.info    { color: var(--button-text-info-content-color); }
+  &.success { color: var(--button-text-success-content-color); }
+  &.warning { color: var(--button-text-warning-content-color); }
+  &.danger  { color: var(--button-text-danger-content-color); }
+}
+
 .SButton.text.disabled {
   &.neutral {
     color: var(--button-text-neutral-disabled-text-color);
@@ -591,6 +657,18 @@ function handleClick(): void {
   }
 }
 
+.SButton.text.disabled .icon,
+.SButton.text.disabled .label {
+  &.neutral { color: var(--button-text-neutral-disabled-content-color); }
+  &.white   { color: var(--button-text-white-disabled-content-color); }
+  &.black   { color: var(--button-text-black-disabled-content-color); }
+  &.mute    { color: var(--button-text-mute-disabled-content-color); }
+  &.info    { color: var(--button-text-info-disabled-content-color); }
+  &.success { color: var(--button-text-success-disabled-content-color); }
+  &.warning { color: var(--button-text-warning-disabled-content-color); }
+  &.danger  { color: var(--button-text-danger-disabled-content-color); }
+}
+
 .SButton.block {
   display: flex;
   width: 100%;

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/SInputHMS.vue

@@ -14,6 +14,12 @@ export interface Value {
   second: string | null
 }
 
+export interface Placeholder {
+  hour: string
+  minute: string
+  second: string
+}
+
 export type ValueType = 'hour' | 'minute' | 'second'
 
 const props = defineProps<{
@@ -22,6 +28,7 @@ const props = defineProps<{
   info?: string
   note?: string
   help?: string
+  placeholder?: Placeholder
   checkIcon?: IconifyIcon | DefineComponent
   checkText?: string
   checkColor?: Color
@@ -46,6 +53,22 @@ const _value = computed(() => {
     : props.value !== undefined ? props.value : null
 })
 
+const padValue = computed(() => {
+  return {
+    hour: _value.value?.hour?.padStart(2, '0') ?? null,
+    minute: _value.value?.minute?.padStart(2, '0') ?? null,
+    second: _value.value?.second?.padStart(2, '0') ?? null
+  }
+})
+
+const padPlaceholder = computed(() => {
+  return {
+    hour: props.placeholder?.hour.toString().padStart(2, '0') ?? '00',
+    minute: props.placeholder?.minute.toString().padStart(2, '0') ?? '00',
+    second: props.placeholder?.second.toString().padStart(2, '0') ?? '00'
+  }
+})
+
 const isFocused = ref(false)
 
 const touched = {
@@ -81,7 +104,7 @@ function update(type: ValueType, value: string | null) {
 
   const newValue = {
     ..._value.value,
-    [type]: value !== null ? value.padStart(2, '0') : null
+    [type]: value ?? null
   }
 
   emit('update:model-value', newValue)
@@ -145,8 +168,8 @@ function createRequiredTouched(): boolean[] {
       <input
         v-if="!noHour"
         class="input hour"
-        :value="_value?.hour"
-        placeholder="00"
+        :value="padValue?.hour"
+        :placeholder="padPlaceholder.hour"
         :maxlength="2"
         :disabled="disabled"
         @focus="onFocus"
@@ -156,8 +179,8 @@ function createRequiredTouched(): boolean[] {
       <input
         v-if="!noMinute"
         class="input minute"
-        :value="_value?.minute"
-        placeholder="00"
+        :value="padValue?.minute"
+        :placeholder="padPlaceholder.minute"
         :maxlength="2"
         :disabled="disabled"
         @focus="onFocus"
@@ -167,8 +190,8 @@ function createRequiredTouched(): boolean[] {
       <input
         v-if="!noSecond"
         class="input second"
-        :value="_value?.second"
-        placeholder="00"
+        :value="padValue?.second"
+        :placeholder="padPlaceholder.second"
         :maxlength="2"
         :disabled="disabled"
         @focus="onFocus"

package/lib/components/SInputText.vue

@@ -417,6 +417,7 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
   bottom: 0;
   left: 0;
   width: 100%;
+  overflow: hidden;
 }
 
 .unit {

package/lib/components/SInputYMD.vue

@@ -16,18 +16,26 @@ export interface Value {
 
 export type ValueType = 'year' | 'month' | 'date'
 
+export interface Placeholder {
+  year: number
+  month: number
+  date: number
+}
+
 const props = defineProps<{
   size?: Size
   label?: string
   info?: string
   note?: string
   help?: string
+  placeholder?: Placeholder
   checkIcon?: IconifyIcon | DefineComponent
   checkText?: string
   checkColor?: Color
   noYear?: boolean
   noMonth?: boolean
   noDate?: boolean
+  block?: boolean
   disabled?: boolean
   value?: Value
   modelValue?: Value
@@ -54,6 +62,14 @@ const padValue = computed(() => {
   }
 })
 
+const padPlaceholder = computed(() => {
+  return {
+    year: props.placeholder?.year.toString().padStart(4, '0') ?? '1998',
+    month: props.placeholder?.month.toString().padStart(2, '0') ?? '01',
+    date: props.placeholder?.date.toString().padStart(2, '0') ?? '14'
+  }
+})
+
 const isFocused = ref(false)
 
 const touched = {
@@ -139,12 +155,12 @@ 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"
         :value="padValue?.year"
-        placeholder="1998"
+        :placeholder="padPlaceholder.year"
         :maxlength="4"
         :disabled="disabled"
         @focus="onFocus"
@@ -158,7 +174,7 @@ function createRequiredTouched(): boolean[] {
         v-if="!noMonth"
         class="input month"
         :value="padValue?.month"
-        placeholder="01"
+        :placeholder="padPlaceholder.month"
         :maxlength="2"
         :disabled="disabled"
         @focus="onFocus"
@@ -172,7 +188,7 @@ function createRequiredTouched(): boolean[] {
         v-if="!noDate"
         class="input date"
         :value="padValue?.date"
-        placeholder="14"
+        :placeholder="padPlaceholder.date"
         :maxlength="2"
         :disabled="disabled"
         @focus="onFocus"
@@ -278,11 +294,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/SState.vue

@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+export type Size = 'mini' | 'small' | 'medium' | 'large'
+export type Mode = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
+
+const props = defineProps<{
+  as?: string
+  size?: Size
+  mode?: Mode
+  label: string
+}>()
+
+const classes = computed(() => [
+  props.size ?? 'small',
+  props.mode ?? 'neutral'
+])
+</script>
+
+<template>
+  <component :is="as ?? 'span'" class="SState" :class="classes">
+    <span class="indicator" />
+    <span class="label">{{ label }}</span>
+  </component>
+</template>
+
+<style scoped lang="postcss">
+.SState {
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid var(--c-divider-2);
+  border-radius: 6px;
+  font-weight: 500;
+  white-space: nowrap;
+  background-color: var(--c-mute);
+}
+
+.SState.mini {
+  gap: 6px;
+  padding: 0 6px;
+  height: 20px;
+
+  .indicator {
+    border-radius: 2px;
+    width: 8px;
+    height: 8px;
+  }
+
+  .label {
+    font-size: 12px;
+  }
+}
+
+.SState.small {
+  gap: 8px;
+  padding: 0 8px;
+  height: 24px;
+
+  .indicator {
+    border-radius: 3px;
+    width: 10px;
+    height: 10px;
+  }
+
+  .label {
+    font-size: 12px;
+  }
+}
+
+.SState.medium {
+  gap: 8px;
+  padding: 0 8px;
+  height: 28px;
+
+  .indicator {
+    border-radius: 3px;
+    width: 10px;
+    height: 10px;
+  }
+
+  .label {
+    font-size: 12px;
+  }
+}
+
+.SState.large {
+  gap: 10px;
+  padding: 0 10px;
+  height: 32px;
+
+  .indicator {
+    border-radius: 4px;
+    width: 12px;
+    height: 12px;
+  }
+
+  .label {
+    font-size: 14px;
+  }
+}
+
+.SState.neutral {
+  .indicator { background-color: var(--c-neutral-1); }
+}
+
+.SState.mute  {
+  .label     { color: var(--c-text-2); }
+  .indicator { background-color: var(--c-mute-darker); }
+}
+
+.SState.info  {
+  .indicator { background-color: var(--c-info-text); }
+}
+
+.SState.success  {
+  .indicator { background-color: var(--c-success-text); }
+}
+
+.SState.warning  {
+  .indicator { background-color: var(--c-warning-text); }
+}
+
+.SState.danger  {
+  .indicator { background-color: var(--c-danger-text); }
+}
+
+.label {
+  transition: color 0.25s;
+}
+
+.indicator {
+  display: block;
+  transition: background-color 0.25s;
+}
+</style>