@globalbrain/sefirot 2.2.0 → 2.3.0

package/lib/components/SInputNumber.vue

@@ -1,56 +1,35 @@
-<template>
-  <SInputText
-    class="SInputNumber"
-    :name="name"
-    :size="size"
-    type="number"
-    :label="label"
-    :note="note"
-    :help="help"
-    :align="align"
-    :placeholder="placeholder"
-    :disabled="disabled"
-    :error-message="errorMessage"
-    :display-value="displayValue"
-    :model-value="String(modelValue)"
-    :validation="validation"
-    @update:model-value="emitUpdate"
-  >
-    <template #before-help>
-      <p v-if="helpFormat" class="help-text">
-        {{ valueWithSeparator }}
-      </p>
-    </template>
-  </SInputText>
-</template>
-
 <script setup lang="ts">
-import { computed, PropType } from 'vue'
+import { computed } from 'vue'
 import { Validatable } from '../composables/Validation'
 import { isNullish } from '../support/Utils'
-import SInputText, { Size, Align } from './SInputText.vue'
+import SInputText from './SInputText.vue'
 
-const props = defineProps({
-  size: { type: String as PropType<Size>, default: 'small' },
-  name: { type: String, default: null },
-  label: { type: String, default: null },
-  note: { type: String, default: null },
-  help: { type: String, default: null },
-  placeholder: { type: String, default: null },
-  align: { type: String as PropType<Align>, default: null },
-  separator: { type: Boolean, default: false },
-  helpFormat: { type: Boolean, default: false },
-  disabled: { type: Boolean, default: false },
-  errorMessage: { type: Boolean, default: true },
-  modelValue: { type: Number as PropType<number | null>, default: null },
-  validation: { type: Object as PropType<Validatable>, default: null }
-})
+export type Size = 'mini' | 'small' | 'medium'
+export type Align = 'left' | 'center' | 'right'
+
+const props = defineProps<{
+  size?: Size
+  name?: string
+  label?: string
+  note?: string
+  help?: string
+  placeholder?: string
+  align?: Align
+  separator?: boolean
+  disabled?: boolean
+  modelValue: number | null
+  displayValue?: string | null
+  hideError?: boolean
+  validation?: Validatable
+}>()
 
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: number | null): void
+}>()
 
 const valueWithSeparator = computed(() => {
   if (isNullish(props.modelValue)) {
-    return '0'
+    return null
   }
 
   return props.modelValue >= 100000000000000000000
@@ -59,14 +38,36 @@ const valueWithSeparator = computed(() => {
 })
 
 const displayValue = computed(() => {
-  if (!props.separator || valueWithSeparator.value === '0') {
-    return null
+  if (!isNullish(props.displayValue)) {
+    return props.displayValue
   }
 
-  return valueWithSeparator.value
+  return !props.separator || valueWithSeparator.value === null
+    ? null
+    : valueWithSeparator.value
 })
 
-function emitUpdate(value: string | null): void {
-  emit('update:modelValue', value ? Number(value) : null)
+function emitUpdate(value: string | null) {
+  emit('update:modelValue', isNullish(value) ? null : Number(value))
 }
 </script>
+
+<template>
+  <SInputText
+    class="SInputNumber"
+    :name="name"
+    :size="size"
+    type="number"
+    :label="label"
+    :note="note"
+    :help="help"
+    :align="align"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    :hide-error="hideError"
+    :display-value="displayValue"
+    :model-value="String(modelValue)"
+    :validation="validation"
+    @update:model-value="emitUpdate"
+  />
+</template>

package/lib/components/SInputSelect.vue

@@ -1,54 +1,7 @@
-<template>
-  <SInputBase
-    class="SInputSelect"
-    :class="classes"
-    :label="label"
-    :note="note"
-    :help="help"
-    :error-message="errorMessage ?? true"
-    :validation="validation"
-  >
-    <div class="box" :class="{ focus: isFocused }">
-      <select
-        class="select"
-        :class="{ 'is-not-selected': isNotSelected }"
-        :disabled="disabled"
-        @focus="focus"
-        @blur="blur"
-        @change="emitChange"
-      >
-        <option
-          v-if="placeholder || nullable"
-          :value="JSON.stringify({ value: null })"
-          :selected="isNotSelected"
-          :disabled="!nullable"
-        >
-          {{ placeholder || 'Please select' }}
-        </option>
-
-        <option
-          v-for="(option, index) in options"
-          :key="index"
-          :style="{ display: option.disabled ? 'none' : undefined }"
-          :value="JSON.stringify(option)"
-          :selected="isSelectedOption(option)"
-        >
-          {{ option.label }}
-        </option>
-      </select>
-
-      <div class="icon" role="button">
-        <SIcon :icon="IconCaretUp" class="icon-svg up" />
-        <SIcon :icon="IconCaretDown" class="icon-svg down" />
-      </div>
-    </div>
-  </SInputBase>
-</template>
-
 <script setup lang="ts">
 import IconCaretDown from '@iconify-icons/ph/caret-down'
 import IconCaretUp from '@iconify-icons/ph/caret-up'
-import { PropType, ref, computed } from 'vue'
+import { PropType, computed, ref } from 'vue'
 import { Validatable } from '../composables/Validation'
 import SIcon from './SIcon.vue'
 import SInputBase from './SInputBase.vue'
@@ -109,6 +62,53 @@ function emitChange(e: any): void {
 }
 </script>
 
+<template>
+  <SInputBase
+    class="SInputSelect"
+    :class="classes"
+    :label="label"
+    :note="note"
+    :help="help"
+    :error-message="errorMessage ?? true"
+    :validation="validation"
+  >
+    <div class="box" :class="{ focus: isFocused }">
+      <select
+        class="select"
+        :class="{ 'is-not-selected': isNotSelected }"
+        :disabled="disabled"
+        @focus="focus"
+        @blur="blur"
+        @change="emitChange"
+      >
+        <Option
+          v-if="placeholder || nullable"
+          :value="JSON.stringify({ value: null })"
+          :selected="isNotSelected"
+          :disabled="!nullable"
+        >
+          {{ placeholder || 'Please select' }}
+        </Option>
+
+        <Option
+          v-for="(option, index) in options"
+          :key="index"
+          :style="{ display: option.disabled ? 'none' : undefined }"
+          :value="JSON.stringify(option)"
+          :selected="isSelectedOption(option)"
+        >
+          {{ option.label }}
+        </Option>
+      </select>
+
+      <div class="icon" role="button">
+        <SIcon :icon="IconCaretUp" class="icon-svg up" />
+        <SIcon :icon="IconCaretDown" class="icon-svg down" />
+      </div>
+    </div>
+  </SInputBase>
+</template>
+
 <style scoped lang="postcss">
 .SInputSelect.mini {
   .box {

package/lib/components/SInputSwitch.vue

@@ -1,3 +1,37 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Validatable } from '../composables/Validation'
+import SInputBase from './SInputBase.vue'
+
+export type Size = 'mini' | 'small' | 'medium'
+
+const props = defineProps<{
+  size?: Size
+  name?: string
+  label?: string
+  note?: string
+  text?: string
+  help?: string
+  disabled?: boolean
+  modelValue: boolean
+  hideError?: boolean
+  validation?: Validatable
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+}>()
+
+const classes = computed(() => [
+  [props.size ?? 'small'],
+  { disabled: props.disabled }
+])
+
+function emitChange(): void {
+  !props.disabled && emit('update:modelValue', !props.modelValue)
+}
+</script>
+
 <template>
   <SInputBase
     class="SInputSwitch"
@@ -6,188 +40,80 @@
     :label="label"
     :note="note"
     :help="help"
+    :hide-error="hideError"
   >
-    <div class="SInputSwitch-container">
-      <div class="SInputSwitch-input" :class="{ on: modelValue }" role="button" @click="emitChange">
-        <p v-if="text" class="SInputSwitch-text" :class="[textMode]">{{ text }}</p>
+    <div class="container">
+      <div class="input" :class="{ on: modelValue }" role="button" @click="emitChange">
+        <p v-if="text" class="text">{{ text }}</p>
 
-        <div class="SInputSwitch-box">
-          <div class="SInputSwitch-check" />
+        <div class="box">
+          <div class="check" />
         </div>
-
-        <p v-if="textAfter" class="SInputSwitch-text after" :class="[textMode]">{{ textAfter }}</p>
       </div>
     </div>
   </SInputBase>
 </template>
 
-<script setup lang="ts">
-import { computed, PropType } from 'vue'
-import SInputBase from './SInputBase.vue'
-
-type Size = 'mini' | 'small'
-type Mode = 'neutral' | 'info' | 'success' | 'warning' | 'danger'
-type TextMode = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
-
-const props = defineProps({
-  size: { type: String as PropType<Size>, default: 'small' },
-  mode: { type: String as PropType<Mode>, default: 'neutral' },
-  name: { type: String, default: null },
-  label: { type: String, default: null },
-  note: { type: String, default: null },
-  text: { type: String, default: null },
-  textAfter: { type: String, default: null },
-  textMode: { type: String as PropType<TextMode>, default: 'neutral' },
-  disabled: { type: Boolean, default: false },
-  help: { type: String, default: null },
-  modelValue: { type: Boolean, required: true }
-})
-
-const emit = defineEmits(['update:modelValue'])
-
-const classes = computed(() => ({
-  mini: props.size === 'mini',
-  small: props.size === 'small',
-  neutral: props.mode === 'neutral',
-  info: props.mode === 'info',
-  success: props.mode === 'success',
-  warning: props.mode === 'warning',
-  danger: props.mode === 'danger',
-  disabled: props.disabled
-}))
-
-function emitChange(): void {
-  !props.disabled && emit('update:modelValue', !props.modelValue)
-}
-</script>
-
 <style lang="postcss" scoped>
-.SInputSwitch.mini {
-  .SInputSwitch-box {
-    margin: 1px 0 0;
-    border-radius: 9px;
-    width: 36px;
-    height: 18px;
-  }
-
-  .SInputSwitch-check {
-    top: 2px;
-    left: 2px;
-    width: 12px;
-    height: 12px;
-    transition: background-color .25s, transform .25s;
-  }
-}
-
-.SInputSwitch.small {
-  .SInputSwitch-box {
-    margin: -1px 0 -1px;
-    border-radius: 11px;
-    width: 40px;
-    height: 22px;
-  }
-
-  .SInputSwitch-check {
-    top: 2px;
-    left: 2px;
-    width: 16px;
-    height: 16px;
-    transition: background-color .25s, transform .25s;
-  }
-}
-
-.SInputSwitch.neutral .SInputSwitch-input.on .SInputSwitch-box {
-  border-color: var(--c-black);
-  background-color: var(--c-black);
-}
-
-.SInputSwitch.info .SInputSwitch-input.on .SInputSwitch-box {
-  border-color: var(--c-info);
-  background-color: var(--c-info);
-}
-
-.SInputSwitch.success .SInputSwitch-input.on .SInputSwitch-box {
-  border-color: var(--c-success);
-  background-color: var(--c-success);
-}
-
-.SInputSwitch.warning .SInputSwitch-input.on .SInputSwitch-box {
-  border-color: var(--c-warning);
-  background-color: var(--c-warning);
-}
-
-.SInputSwitch.danger .SInputSwitch-input.on .SInputSwitch-box {
-  border-color: var(--c-danger);
-  background-color: var(--c-danger);
-}
-
-.SInputSwitch.disabled .SInputSwitch-input {
-  .SInputSwitch-box {
-    cursor: not-allowed;
-    opacity: .6;
-  }
-
-  &:hover .SInputSwitch-box { border-color: var(--c-gray); }
-}
-
-.SInputSwitch.disabled .SInputSwitch-input.on {
-  &:hover .SInputSwitch-box { border-color: transparent; }
-}
-
-.SInputSwitch-container {
+.container {
   display: flex;
 }
 
-.SInputSwitch-input {
+.input {
   position: relative;
   display: flex;
   justify-content: space-between;
+  align-items: center;
   width: 100%;
+  height: 32px;
 
   &:hover {
-    .SInputSwitch-box   { border-color: var(--c-black); }
-    .SInputSwitch-check { background-color: var(--c-black); }
+    .box { border-color: var(--c-info); }
   }
 }
 
-.SInputSwitch-input.on .SInputSwitch-check {
+.input.on .box {
+  border-color: var(--c-info-lighter);
+  background-color: var(--c-info);
+}
+
+.input.on .check {
   background-color: var(--c-white);
   transform: translateX(18px);
 }
 
-.SInputSwitch-text {
+.text {
   flex-grow: 1;
   margin: 0;
   padding-right: 16px;
   line-height: 20px;
   font-size: 14px;
-}
-
-.SInputSwitch-text.mute {
-  color: var(--c-text-light-2);
   font-weight: 500;
 }
 
-.SInputSwitch-text.info    { color: var(--c-info); }
-.SInputSwitch-text.success { color: var(--c-success); }
-.SInputSwitch-text.warning { color: var(--c-warning); }
-.SInputSwitch-text.danger  { color: var(--c-danger); }
-.SInputSwitch-text.after {
-  padding-left: 12px;
-}
-
-.SInputSwitch-box {
+.box {
   position: relative;
   flex-shrink: 0;
-  border: 1px solid var(--c-gray);
-  background-color: var(--c-white-mute);
-  transition: border-color .25s, background-color .25s, box-shadow .25s;
+  border: 1px solid var(--c-divider);
+  border-radius: 11px;
+  width: 40px;
+  height: 22px;
+  background-color: var(--c-bg-elv-down);
+  transition: border-color 0.25s, background-color 0.25s, box-shadow 0.25s;
 }
 
-.SInputSwitch-check {
+.check {
   position: absolute;
   border-radius: 50%;
   background-color: var(--c-black);
+  top: 2px;
+  left: 2px;
+  width: 16px;
+  height: 16px;
   transition: background-color .25s, transform .25s;
+
+  .dark & {
+    background-color: var(--c-white);
+  }
 }
 </style>

package/lib/components/SInputSwitches.vue

@@ -1,88 +1,81 @@
-<template>
-  <SInputBase
-    class="SInputSwitches"
-    :class="classes"
-    :name="name"
-    :label="label"
-    :note="note"
-    :help="help"
-  >
-    <div class="SInputSwitches-container">
-      <div class="SInputSwitches-row">
-        <div v-for="option in options" :key="option.value" class="SInputSwitches-col">
-          <SInputSwitch
-            :size="size"
-            :mode="mode"
-            :text="option.label"
-            :model-value="isChecked(option.value)"
-            @update:model-value="handleChange(option.value)"
-          />
-        </div>
-      </div>
-    </div>
-  </SInputBase>
-</template>
-
 <script setup lang="ts">
-import { computed, PropType } from 'vue'
+import { computed } from 'vue'
+import { Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 import SInputSwitch from './SInputSwitch.vue'
 
-type Size = 'mini' | 'small'
-type Mode = 'neutral' | 'info' | 'success' | 'warning' | 'danger'
+export type Size = 'mini' | 'small' | 'medium'
 
-
-interface Option {
+export interface Option {
   label: string
-  value: any
+  value: string | number | boolean
 }
 
-const props = defineProps({
-  size: { type: String as PropType<Size>, default: 'small' },
-  mode: { type: String as PropType<Mode>, default: 'neutral' },
-  name: { type: String, default: null },
-  label: { type: String, default: null },
-  note: { type: String, default: null },
-  help: { type: String, default: null },
-  options: { type: Array as PropType<Option[]>, required: true },
-  modelValue: { type: Array as PropType<unknown[]>, required: true }
-})
+const props = defineProps<{
+  size?: Size
+  name?: string
+  label?: string
+  note?: string
+  help?: string
+  options: Option[]
+  disabled?: boolean
+  modelValue: (string | number | boolean)[]
+  hideError?: boolean
+  validation?: Validatable
+}>()
 
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: (string | number | boolean)[]): void
+}>()
 
 const classes = computed(() => [
-  props.size,
-  props.mode
+  props.size ?? 'small'
 ])
 
-function isChecked(value: unknown): boolean {
+function isChecked(value: string | number | boolean): boolean {
   return props.modelValue.includes(value)
 }
 
-function handleChange(value: unknown): void {
+function handleChange(value: string | number | boolean): void {
   const difference = props.modelValue
     .filter(v => v !== value)
     .concat(props.modelValue.includes(value) ? [] : [value])
+
   emit('update:modelValue', difference)
 }
 </script>
 
-<style lang="postcss" scoped>
-.SInputSwitches.mini {
-  .SInputSwitches-row { margin: -2px -8px; }
-  .SInputSwitches-col { padding: 2px 8px; }
-}
-
-.SInputSwitches.small {
-  .SInputSwitches-row { margin: -4px -8px; }
-  .SInputSwitches-col { padding: 4px 8px; }
-}
+<template>
+  <SInputBase
+    class="SInputSwitches"
+    :class="classes"
+    :name="name"
+    :label="label"
+    :note="note"
+    :help="help"
+    :hide-error="hideError"
+  >
+    <div class="container">
+      <div class="row">
+        <div v-for="(option, index) in options" :key="index" class="col">
+          <SInputSwitch
+            :size="size"
+            :text="option.label"
+            :model-value="isChecked(option.value)"
+            @update:model-value="handleChange(option.value)"
+          />
+        </div>
+      </div>
+    </div>
+  </SInputBase>
+</template>
 
-.SInputSwitches-container {
+<style lang="postcss" scoped>
+.container {
   display: flex;
 }
 
-.SInputSwitches-row {
+.row {
   width: 100%;
 }
 </style>

package/lib/components/SInputText.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { computed, ref } from 'vue'
 import { Validatable } from '../composables/Validation'
 import SIcon from './SIcon.vue'
 import SInputBase from './SInputBase.vue'
@@ -141,6 +141,10 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
     font-size: 14px;
   }
 
+  .display {
+    top: 0;
+  }
+
   .icon {
     width: 22px;
     height: 30px;
@@ -172,6 +176,10 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
     font-size: 16px;
   }
 
+  .display {
+    top: 2px;
+  }
+
   .icon {
     width: 26px;
     height: 38px;
@@ -203,6 +211,10 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
     font-size: 16px;
   }
 
+  .display {
+    top: 0;
+  }
+
   .icon {
     width: 28px;
     height: 46px;
@@ -288,7 +300,6 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
 
 .display {
   position: absolute;
-  top: 0;
   left: 0;
   width: 100%;
 }