@globalbrain/sefirot 2.14.1 → 2.16.0

package/lib/components/SInputSwitch.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { IconifyIcon } from '@iconify/vue/dist/offline'
+import { DefineComponent, computed } from 'vue'
 import { Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 
 export type Size = 'mini' | 'small' | 'medium'
+export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
 
 const props = defineProps<{
   size?: Size
@@ -13,6 +15,9 @@ const props = defineProps<{
   note?: string
   text?: string
   help?: string
+  checkIcon?: IconifyIcon | DefineComponent
+  checkText?: string
+  checkColor?: Color
   disabled?: boolean
   modelValue: boolean
   hideError?: boolean
@@ -41,6 +46,9 @@ function emitChange(): void {
     :label="label"
     :note="note"
     :info="info"
+    :check-icon="checkIcon"
+    :check-text="checkText"
+    :check-color="checkColor"
     :help="help"
     :hide-error="hideError"
   >

package/lib/components/SInputSwitches.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { IconifyIcon } from '@iconify/vue/dist/offline'
+import { DefineComponent, computed } from 'vue'
 import { Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 import SInputSwitch from './SInputSwitch.vue'
 
 export type Size = 'mini' | 'small' | 'medium'
+export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
 
 export interface Option {
   label: string
@@ -18,6 +20,9 @@ const props = defineProps<{
   info?: string
   note?: string
   help?: string
+  checkIcon?: IconifyIcon | DefineComponent
+  checkText?: string
+  checkColor?: Color
   options: Option[]
   disabled?: boolean
   modelValue: (string | number | boolean)[]
@@ -55,6 +60,9 @@ function handleChange(value: string | number | boolean): void {
     :note="note"
     :info="info"
     :help="help"
+    :check-icon="checkIcon"
+    :check-text="checkText"
+    :check-color="checkColor"
     :hide-error="hideError"
   >
     <div class="container">

package/lib/components/SInputText.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { IconifyIcon } from '@iconify/vue/dist/offline'
+import { DefineComponent, computed, ref } from 'vue'
 import { Validatable } from '../composables/Validation'
 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'
 
 const props = defineProps<{
   size?: Size
@@ -16,6 +18,11 @@ const props = defineProps<{
   help?: string
   type?: string
   placeholder?: string
+  unitBefore?: string
+  unitAfter?: string
+  checkIcon?: IconifyIcon | DefineComponent
+  checkText?: string
+  checkColor?: Color
   icon?: any
   align?: Align
   disabled?: boolean
@@ -26,7 +33,7 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
-  (e: 'update:modelValue', value: string | null): void
+  (e: 'update:model-value', value: string | null): void
   (e: 'input', value: string | null): void
   (e: 'blur', value: string | null): void
   (e: 'enter', value: string | null): void
@@ -58,7 +65,7 @@ function emitBlur(e: FocusEvent): void {
 
   props.validation?.$touch()
 
-  emit('update:modelValue', value)
+  emit('update:model-value', value)
   emit('blur', value)
 
   isFocused.value = false
@@ -66,7 +73,7 @@ function emitBlur(e: FocusEvent): void {
 
 function emitInput(e: Event): void {
   const v = getValue(e)
-  emit('update:modelValue', v)
+  emit('update:model-value', v)
   emit('input', v)
 }
 
@@ -75,7 +82,7 @@ function emitEnter(e: KeyboardEvent): void {
 
   props.validation?.$touch()
 
-  emit('update:modelValue', value)
+  emit('update:model-value', value)
   emit('enter', value)
 }
 
@@ -95,63 +102,84 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
     :note="note"
     :info="info"
     :help="help"
+    :check-icon="checkIcon"
+    :check-text="checkText"
+    :check-color="checkColor"
     :hide-error="hideError"
     :validation="validation"
   >
     <div class="box" :class="{ focus: isFocused }" @click="focus">
+      <div v-if="$slots['addon-before']" class="addon before">
+        <slot name="addon-before" />
+      </div>
+
       <div v-if="icon" class="icon">
         <SIcon :icon="icon" class="icon-svg" />
       </div>
 
       <div class="value">
-        <input
-          class="input"
-          :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="display">
-          {{ displayValue }}
+        <div v-if="props.unitBefore" class="unit before">
+          {{ props.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="props.unitAfter" class="unit after">
+          {{ props.unitAfter }}
         </div>
       </div>
+
+      <div v-if="$slots['addon-after']" class="addon after">
+        <slot name="addon-after" />
+      </div>
     </div>
     <template v-if="$slots.info" #info><slot name="info" /></template>
   </SInputBase>
 </template>
 
-<style lang="postcss" scoped>
+<style scoped lang="postcss">
 .SInputText.mini {
-  .box {
-    padding: 0 8px;
-    min-height: 32px;
-  }
+  .box   { min-height: 32px; }
+  .value { min-height: 30px; }
+  .area  { min-height: 30px; }
 
-  .value,
-  .input,
-  .display {
-    min-height: 30px;
-  }
-
-  .input,
-  .display {
-    padding: 3px 0;
+  .input {
+    padding: 3px 8px;
     letter-spacing: 0;
     line-height: 24px;
-    font-size: 14px;
+    font-size: var(--input-font-size, var(--input-mini-font-size));
   }
 
-  .display {
-    top: 0;
+  .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));
   }
 
+  .unit.before { padding-right: 0; }
+  .unit.after  { padding-left: 0; }
+
   .icon {
     width: 22px;
     height: 30px;
@@ -161,32 +189,50 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
     width: 16px;
     height: 16px;
   }
-}
 
-.SInputText.small {
-  .box {
-    padding: 0 12px;
-    min-height: 40px;
+  :slotted(.SInputAddon) .action {
+    padding: 0 10px;
+    font-size: 12px;
+    font-weight: 500;
   }
 
-  .value,
-  .input,
-  .display {
-    min-height: 38px;
+  :slotted(.SInputAddon) .action-icon {
+    width: 16px;
+    height: 16px;
   }
 
-  .input,
-  .display {
-    padding: 5px 0;
+  :slotted(.SInputAddon) .caret {
+    margin-left: 4px;
+    margin-right: -2px;
+    width: 10px;
+    height: 10px;
+  }
+}
+
+.SInputText.small {
+  .box   { min-height: 40px; }
+  .value { min-height: 38px; }
+  .area  { min-height: 38px; }
+
+  .input {
+    padding: 7px 12px;
     letter-spacing: 0;
     line-height: 24px;
-    font-size: 16px;
+    font-size: var(--input-font-size, var(--input-small-font-size));
   }
 
-  .display {
-    top: 2px;
+  .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));
   }
 
+  .unit.before { padding-right: 0; }
+  .unit.after  { padding-left: 0; }
+
   .icon {
     width: 26px;
     height: 38px;
@@ -196,32 +242,50 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
     width: 16px;
     height: 16px;
   }
-}
 
-.SInputText.medium {
-  .box {
+  :slotted(.SInputAddon) .action {
     padding: 0 12px;
-    min-height: 48px;
+    font-size: 14px;
+    font-weight: 500;
+  }
+
+  :slotted(.SInputAddon) .action-icon {
+    width: 16px;
+    height: 16px;
   }
 
-  .value,
-  .input,
-  .display {
-    min-height: 46px;
+  :slotted(.SInputAddon) .caret {
+    margin-left: 6px;
+    margin-right: -2px;
+    width: 12px;
+    height: 12px;
   }
+}
 
-  .input,
-  .display {
-    padding: 11px 0;
+.SInputText.medium {
+  .box   { min-height: 48px; }
+  .value { min-height: 46px; }
+  .area  { min-height: 46px; }
+
+  .input {
+    padding: 11px 12px;
     letter-spacing: 0;
     line-height: 24px;
-    font-size: 16px;
+    font-size: var(--input-font-size, var(--input-medium-font-size));
   }
 
-  .display {
-    top: 0;
+  .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));
   }
 
+  .unit.before { padding-right: 0; }
+  .unit.after  { padding-left: 0; }
+
   .icon {
     width: 28px;
     height: 46px;
@@ -231,48 +295,52 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
     width: 18px;
     height: 18px;
   }
-}
 
-.SInputText.disabled {
-  .input {
-    background-color: var(--input-outlined-bg-disabled);
+  :slotted(.SInputAddon) .action {
+    padding: 0 14px;
+    font-size: 14px;
+    font-weight: 500;
   }
 
-  .box:hover .input {
-    cursor: not-allowed;
-    border-color: var(--input-outlined-border);
+  :slotted(.SInputAddon) .action-icon {
+    width: 16px;
+    height: 16px;
   }
-}
 
-.SInputText.left {
-  .input,
-  .display {
-    text-align: left;
+  :slotted(.SInputAddon) .caret {
+    margin-left: 6px;
+    margin-right: -2px;
+    width: 12px;
+    height: 12px;
   }
 }
 
-.SInputText.center {
-  .input,
-  .display {
-    text-align: center;
+.SInputText.disabled {
+  .box,
+  .box:hover,
+  .box:hover:has(.SInputAddon:is(.focused, :hover)),
+  .box:hover.focus,
+  .box.focus:has(.SInputAddon:is(.focused, :hover)),
+  .box:hover.focus:has(.SInputAddon:is(.focused, :hover)) {
+    border-color: var(--input-disabled-border-color);
+    background-color: var(--input-disabled-bg-color);
   }
-}
 
-.SInputText.right {
-  .input,
-  .display {
-    text-align: right;
+  .box:hover .input,
+  .box:hover .unit {
+    cursor: not-allowed;
   }
 }
 
-.SInputText.has-error {
-  .box {
-    border-color: var(--c-danger);
+.SInputText.left .input   { text-align: left; }
+.SInputText.center .input { text-align: center; }
+.SInputText.right .input  { text-align: right; }
 
-    &:hover,
-    &:focus {
-      border-color: var(--c-danger);
-    }
+.SInputText.has-error {
+  .box,
+  .box:hover,
+  .box:focus {
+    border-color: var(--input-error-border-color);
   }
 }
 
@@ -281,39 +349,45 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
   display: flex;
   flex-grow: 1;
   max-width: 100%;
-  border: 1px solid var(--c-divider);
+  border: 1px solid var(--input-border-color);
   border-radius: 6px;
-  background-color: var(--c-bg);
-  cursor: text;
+  background-color: var(--input-bg-color);
   transition: border-color 0.25s;
 
   &:hover {
-    border-color: var(--c-black);
+    border-color: var(--input-hover-border-color);
   }
 
-  &.focus,
-  &:hover.focus {
-    border-color: var(--c-info);
+  &:hover:has(.SInputAddon:is(.focused, :hover)) {
+    border-color: var(--input-border-color);
   }
 
-  .dark &:hover {
-    border-color: var(--c-gray);
-  }
-
-  .dark &.focus,
-  .dark &:hover.focus {
-    border-color: var(--c-info);
+  &.focus,
+  &:hover.focus,
+  &.focus:has(.SInputAddon:is(.focused, :hover)),
+  &:hover.focus:has(.SInputAddon:is(.focused, :hover)) {
+    border-color: var(--input-focus-border-color);
   }
 }
 
-.value {
+.value,
+.area {
   position: relative;
+  display: flex;
+  align-items: center;
   flex-grow: 1;
 }
 
 .input {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   width: 100%;
+  color: var(--input-value-color);
   background-color: transparent;
+  cursor: text;
 
   &.hide,
   &.hide::placeholder {
@@ -321,17 +395,24 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
   }
 
   &::placeholder {
-    font-weight: 500;
-    color: var(--c-text-3);
+    color: var(--input-placeholder-color);
   }
 }
 
 .display {
   position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
   left: 0;
   width: 100%;
 }
 
+.unit {
+  font-weight: 500;
+  color: var(--c-text-2);
+}
+
 .icon {
   display: flex;
   align-items: center;
@@ -342,4 +423,35 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
 .icon-svg {
   fill: currentColor;
 }
+
+.addon {
+  display: flex;
+  flex-shrink: 0;
+}
+
+.addon :slotted(.SInputAddon) .caret {
+  color: var(--c-text-2);
+}
+
+.addon.before :slotted(.SInputAddon) {
+  .action {
+    border-right: 1px solid var(--input-border-color);
+    border-radius: 5px 0 0 5px;
+  }
+
+  .dialog {
+    left: 0;
+  }
+}
+
+.addon.after :slotted(.SInputAddon) {
+  .action {
+    border-left: 1px solid var(--input-border-color);
+    border-radius: 0 5px 5px 0;
+  }
+
+  .dialog {
+    right: 0;
+  }
+}
 </style>

package/lib/components/SInputTextarea.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { IconifyIcon } from '@iconify/vue/dist/offline'
+import { DefineComponent, computed } from 'vue'
 import { Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 
 export type Size = 'mini' | 'small' | 'medium'
+export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
 
 const props = defineProps<{
   size?: Size
@@ -12,6 +14,9 @@ const props = defineProps<{
   info?: string
   note?: string
   help?: string
+  checkIcon?: IconifyIcon | DefineComponent
+  checkText?: string
+  checkColor?: Color
   placeholder?: string
   disabled?: boolean
   rows?: number
@@ -48,6 +53,9 @@ function emitBlur(e: FocusEvent): void {
     :note="note"
     :info="info"
     :help="help"
+    :check-icon="checkIcon"
+    :check-text="checkText"
+    :check-color="checkColor"
     :hide-error="hideError"
     :validation="validation"
   >

package/lib/components/SInputYMD.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { IconifyIcon } from '@iconify/vue/dist/offline'
+import { DefineComponent, ref } from 'vue'
 import { Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 
 export type Size = 'mini' | 'small' | 'medium'
+export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
 
 export interface Value {
   year: number | null
@@ -19,6 +21,9 @@ const props = defineProps<{
   info?: string
   note?: string
   help?: string
+  checkIcon?: IconifyIcon | DefineComponent
+  checkText?: string
+  checkColor?: Color
   noYear?: boolean
   noMonth?: boolean
   noDate?: boolean
@@ -104,6 +109,9 @@ function createRequiredTouched(): boolean[] {
     :note="note"
     :info="info"
     :help="help"
+    :check-icon="checkIcon"
+    :check-text="checkText"
+    :check-color="checkColor"
     :hide-error="hideError"
     :validation="validation"
   >