@globalbrain/sefirot 2.0.0-draft.8 → 2.1.0

package/lib/components/SInputDropdownItemText.vue

@@ -1,28 +1,91 @@
+<script setup lang="ts">
+import IconX from '@iconify-icons/ph/x'
+import SIcon from './SIcon.vue'
+
+defineProps<{
+  label: string
+  value: string | number | boolean
+  disabled: boolean
+}>()
+
+defineEmits<{
+  (e: 'remove', value: string | number | boolean): void
+}>()
+</script>
+
 <template>
-  <div class="SInputDropdownItemText" :class="{ mute, disabled }">
-    <p class="text">{{ item.text }}</p>
+  <div class="SInputDropdownItemText" :class="{ disabled }">
+    <p class="text">{{ label }}</p>
+
+    <div v-if="!disabled" class="remove" role="button" @click.stop="$emit('remove', value)">
+      <div class="remove-box">
+        <SIcon :icon="IconX" class="remove-icon" />
+      </div>
+    </div>
   </div>
 </template>
 
-<script setup lang="ts">
-import { PropType } from 'vue'
+<style lang="postcss" scoped>
+.SInputDropdownItemText {
+  display: flex;
+  border: 1px solid var(--c-divider-light);
+  border-radius: 14px;
+  padding: 0 0 0 12px;
+  background-color: var(--c-bg-mute);
+}
 
-const props = defineProps({
-  mute: { type: Boolean, default: false },
-  item: { type: Object as PropType<any>, required: true },
-  disabled: { type: Boolean, default: false }
-})
-</script>
+.SInputDropdownItemText.disabled {
+  padding: 0 10px 0;
+  background-color: var(--c-gray-light-4);
 
-<style lang="postcss" scoped>
-.SInputDropdownItemText.mute .text {
-  color: var(--input-placeholder);
+  .text {
+    color: var(--c-text-2);
+  }
+}
+
+.dark .SInputDropdownItemText.disabled {
+  background-color: var(--c-gray-dark-2);
 }
 
 .text {
   margin: 0;
-  padding: 0 8px;
-  font-size: 14px;
-  font-weight: 400;
+  line-height: 26px;
+  font-size: 12px;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.remove {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 26px;
+  height: 26px;
+}
+
+.remove-box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  color: var(--c-text-2);
+  transition: color 0.25s, background-color 0.25s;
+
+  .remove:hover & {
+    color: var(--c-text-1);
+    background-color: var(--c-gray-light-3)
+  }
+
+  .dark .remove:hover & {
+    color: var(--c-text-1);
+    background-color: var(--c-gray-dark-3)
+  }
+}
+
+.remove-icon {
+  width: 12px;
+  height: 12px;
 }
 </style>

package/lib/components/SInputFile.vue

@@ -1,3 +1,47 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { Validatable } from '../composables/Validation'
+import SInputBase from './SInputBase.vue'
+
+export type Size = 'mini' | 'small' | 'medium'
+
+const props = defineProps<{
+  size?: Size
+  label?: string
+  text?: string
+  note?: string
+  help?: string
+  placeholder?: string
+  modelValue: File | null
+  hideError?: boolean
+  validation?: Validatable
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', file: File | null): void
+}>()
+
+const input = ref<HTMLInputElement | null>(null)
+
+const classes = computed(() => [props.size ?? 'small'])
+
+const fileName = computed(() => {
+  return props.modelValue ? props.modelValue.name : null
+})
+
+function open(): void {
+  input.value!.click()
+}
+
+function handleChange(e: Event): void {
+  const file = (e.target as any).files[0]
+
+  emit('update:modelValue', file ?? null)
+
+  file && props.validation?.$touch()
+}
+</script>
+
 <template>
   <SInputBase
     class="SInputFile"
@@ -5,7 +49,7 @@
     :label="label"
     :note="note"
     :help="help"
-    :error-message="errorMessage"
+    :hide-error="hideError"
     :validation="validation"
   >
     <input
@@ -18,7 +62,7 @@
     <div class="box" role="button" @click="open">
       <div class="action">
         <button class="button">
-          {{ text }}
+          {{ text ?? 'Choose File' }}
         </button>
       </div>
 
@@ -30,48 +74,6 @@
   </SInputBase>
 </template>
 
-<script setup lang="ts">
-import { PropType, ref, computed } from 'vue'
-import { Validation, Validatable } from '../composables/Validation'
-import SInputBase from './SInputBase.vue'
-
-type Size = 'mini' | 'small' | 'medium'
-
-const props = defineProps({
-  size: { type: String as PropType<Size>, default: 'small' },
-  label: { type: String, default: null },
-  note: { type: String, default: null },
-  text: { type: String, default: 'Choose File' },
-  help: { type: String, default: null },
-  placeholder: { type: String, default: null },
-  errorMessage: { type: Boolean, default: true },
-  modelValue: { type: Object as PropType<File | null>, default: null },
-  validation: { type: Object as PropType<Validatable>, default: null }
-})
-
-const emit = defineEmits(['update:modelValue'])
-
-const input = ref<HTMLInputElement | null>(null)
-
-const classes = computed(() => [props.size])
-
-const fileName = computed(() => {
-  return props.modelValue ? props.modelValue.name : null
-})
-
-function open(): void {
-  input.value!.click()
-}
-
-function handleChange(e: Event): void {
-  const file = (e.target as any).files[0]
-
-  emit('update:modelValue', file ?? null)
-
-  file && props.validation?.$touch()
-}
-</script>
-
 <style lang="postcss" scoped>
 .SInputFile.mini {
   .action {
@@ -152,25 +154,22 @@ function handleChange(e: Event): void {
 
 .box {
   display: flex;
-  border: 1px solid var(--input-border);
+  border: 1px solid var(--c-divider);
   border-radius: 4px;
+  background-color: var(--c-bg);
   cursor: pointer;
   transition: border-color .25s;
 
   &:hover {
-    border-color: var(--input-focus-border);
+    border-color: var(--c-black);
 
     .button {
-      background-color: var(--c-gray-light-4);
+      background-color: var(--c-bg-soft);
     }
   }
-}
 
-.dark .box {
-  &:hover {
-    .button {
-      background-color: var(--c-gray-dark-3);
-    }
+  .dark &:hover {
+    border-color: var(--c-gray);
   }
 }
 
@@ -182,17 +181,13 @@ function handleChange(e: Event): void {
   border: 1px solid var(--c-divider-light);
   border-radius: 4px;
   color: var(--c-text-1);
-  background-color: var(--c-white-mute);
-  transition: background-color .25s;
-}
-
-.dark .button {
-  background-color: var(--c-black-mute);
+  background-color: var(--c-bg-mute);
   transition: background-color .25s;
 }
 
 .text {
   flex-grow: 1;
+  font-weight: 500;
   overflow: hidden;
 }
 
@@ -206,7 +201,8 @@ function handleChange(e: Event): void {
   text-overflow: ellipsis;
 }
 
+.file-name,
 .placeholder {
-  color: var(--input-placeholder);
+  color: var(--c-text-2);
 }
 </style>

package/lib/components/SInputHMS.vue

@@ -1,86 +1,37 @@
-<template>
-  <SInputBase
-    class="SInputHMS"
-    :class="[size, { disabled }]"
-    :label="label"
-    :note="note"
-    :help="help"
-    :error-message="errorMessage"
-    :validation="validation"
-  >
-    <div class="container">
-      <input
-        v-if="hour"
-        class="input hour"
-        :value="modelValue?.hour ?? null"
-        placeholder="00"
-        :disabled="disabled"
-        @blur="updateHour"
-      >
-      <div v-if="hour && minute" class="separator" />
-      <input
-        v-if="minute"
-        class="input minute"
-        :value="modelValue?.minute ?? null"
-        placeholder="00"
-        :disabled="disabled"
-        @blur="updateMinute"
-      >
-      <div v-if="minute && second" class="separator" />
-      <input
-        v-if="second"
-        class="input second"
-        :value="modelValue?.second ?? null"
-        placeholder="00"
-        :disabled="disabled"
-        @blur="updateSecond"
-      >
-    </div>
-
-    <template #before-help>
-      <slot name="before-help" />
-    </template>
-  </SInputBase>
-</template>
-
 <script setup lang="ts">
-import { PropType } from 'vue'
-import { SyntheticInputEvent } from '../types/Utils'
+import { ref } from 'vue'
 import { Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 
-type Size = 'mini' | 'small' | 'medium'
+export type Size = 'mini' | 'small' | 'medium'
 
-interface Value {
-  hour?: string
-  minute?: string
-  second?: string
+export interface Value {
+  hour: string | null
+  minute: string | null
+  second: string | null
 }
 
-type ValueType = 'hour' | 'minute' | 'second'
+export type ValueType = 'hour' | 'minute' | 'second'
 
-interface Fields {
-  hour?: boolean
-  minute?: boolean
-  second?: boolean
-}
+const props = defineProps<{
+  size?: Size
+  label?: string
+  note?: string
+  help?: string
+  noHour?: boolean
+  noMinute?: boolean
+  noSecond?: boolean
+  disabled?: boolean
+  hideError?: boolean
+  modelValue: Value
+  validation?: Validatable
+}>()
 
-const props = defineProps({
-  size: { type: String as PropType<Size>, default: 'small' },
-  label: { type: String, default: null },
-  note: { type: String, default: null },
-  help: { type: String, default: null },
-  placeholder: { type: String, default: null },
-  hour: { type: Boolean, default: true },
-  minute: { type: Boolean, default: true },
-  second: { type: Boolean, default: true },
-  disabled: { type: Boolean, default: false },
-  errorMessage: { type: Boolean, default: true },
-  modelValue: { type: Object as PropType<Value>, default: null },
-  validation: { type: Object as PropType<Validatable>, default: null }
-})
-
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: Value): void
+}>()
+
+const isFocused = ref(false)
 
 const touched = {
   hour: false,
@@ -88,53 +39,45 @@ const touched = {
   second: false
 }
 
-function updateHour(e: FocusEvent): void {
-  const value = getValue((e.target as HTMLInputElement).value)
+function onFocus() {
+  isFocused.value = true
+}
 
-  update('hour', value)
+function blur() {
+  isFocused.value = false
 }
 
-function updateMinute(e: FocusEvent): void {
-  const value = getValue((e.target as HTMLInputElement).value)
+function updateHour(e: FocusEvent): void {
+  update('hour', getValue((e.target as HTMLInputElement).value))
+}
 
-  update('minute', value ? value.padStart(2, '0') : undefined)
+function updateMinute(e: FocusEvent): void {
+  update('minute', getValue((e.target as HTMLInputElement).value))
 }
 
 function updateSecond(e: FocusEvent): void {
-  const value = getValue((e.target as HTMLInputElement).value)
-
-  update('second', value ? value.padStart(2, '0') : undefined)
+  update('second', getValue((e.target as HTMLInputElement).value))
 }
 
-function update(type: ValueType, value?: string): void {
-  const data = { ...props.modelValue } as Value
-
-  setValue(data, type, value)
-
-  data.hour === undefined && data.minute === undefined && data.second === undefined
-    ? emit('update:modelValue', null)
-    : emit('update:modelValue', data)
+function update(type: ValueType, value: string | null) {
+  emit('update:modelValue', {
+    ...props.modelValue,
+    [type]: value !== null ? value.padStart(2, '0') : null
+  })
 
   emitTouch(type)
+
+  blur()
 }
 
-function getValue(value: string): string | undefined {
+function getValue(value: string): string | null {
   if (value === '') {
-    return undefined
+    return null
   }
 
   const input = Number(value)
 
-  return isNaN(input) ? undefined : String(input)
-}
-
-function setValue(data: Value, type: ValueType, value?: string): void {
-  if (value === undefined) {
-    delete data[type]
-    return
-  }
-
-  data[type] = value
+  return isNaN(input) ? null : String(input)
 }
 
 function emitTouch(type: ValueType): void {
@@ -153,7 +96,7 @@ function createRequiredTouched(): boolean[] {
   const requiredTouched = [] as boolean[]
 
   for (const key in touched) {
-    if ((props as any)[key]) {
+    if (!(props as any)[`no${key.charAt(0).toUpperCase() + key.slice(1)}`]) {
       requiredTouched.push((touched as any)[key])
     }
   }
@@ -162,6 +105,54 @@ function createRequiredTouched(): boolean[] {
 }
 </script>
 
+<template>
+  <SInputBase
+    class="SInputHMS"
+    :class="[size, { disabled }]"
+    :label="label"
+    :note="note"
+    :help="help"
+    :hide-error="hideError"
+    :validation="validation"
+  >
+    <div class="container" :class="{ focus: isFocused }">
+      <input
+        v-if="!noHour"
+        class="input hour"
+        :value="modelValue.hour"
+        placeholder="00"
+        :disabled="disabled"
+        @focus="onFocus"
+        @blur="updateHour"
+      >
+      <div v-if="!noHour && !noMinute" class="separator" />
+      <input
+        v-if="!noMinute"
+        class="input minute"
+        :value="modelValue.minute"
+        placeholder="00"
+        :disabled="disabled"
+        @focus="onFocus"
+        @blur="updateMinute"
+      >
+      <div v-if="!noMinute && !noSecond" class="separator" />
+      <input
+        v-if="!noSecond"
+        class="input second"
+        :value="modelValue.second"
+        placeholder="00"
+        :disabled="disabled"
+        @focus="onFocus"
+        @blur="updateSecond"
+      >
+    </div>
+
+    <template #before-help>
+      <slot name="before-help" />
+    </template>
+  </SInputBase>
+</template>
+
 <style lang="postcss" scoped>
 .SInputHMS.mini {
   .container {
@@ -253,22 +244,41 @@ function createRequiredTouched(): boolean[] {
 
 .container {
   display: inline-flex;
-  border: 1px solid var(--input-border);
-  border-radius: 4px;
-  transition: border-color .25s;
+  border: 1px solid var(--c-divider);
+  border-radius: 6px;
+  background-color: var(--c-bg);
+  transition: border-color 0.25s;
 
   &:hover {
-    border-color: var(--input-focus-border);
+    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);
   }
 }
 
 .input {
-  margin: 0;
   background-color: transparent;
+
+  &::placeholder {
+    font-weight: 500;
+    color: var(--c-text-3);
+  }
 }
 
 .separator::before {
-  color: var(--c-text-2);
+  color: var(--c-text-3);
   content: ":";
 }
 </style>

package/lib/components/SInputNumber.vue

@@ -1,34 +1,45 @@
 <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"
-    :model-value="modelValue"
+    :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 { PropType } from 'vue'
+import { computed, PropType } from 'vue'
+import { Validatable } from '../composables/Validation'
 import { isNullish } from '../support/Utils'
-import { Validation, Validatable } from '../composables/Validation'
-import SInputText from './SInputText.vue'
+import SInputText, { Size, Align } from './SInputText.vue'
 
-type Size = 'mini' | 'small' | 'medium'
-
-defineProps({
+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 },
@@ -37,7 +48,25 @@ defineProps({
 
 const emit = defineEmits(['update:modelValue'])
 
+const valueWithSeparator = computed(() => {
+  if (isNullish(props.modelValue)) {
+    return '0'
+  }
+
+  return props.modelValue >= 100000000000000000000
+    ? 'The number is too big'
+    : props.modelValue.toLocaleString('en-US', { maximumSignificantDigits: 20 })
+})
+
+const displayValue = computed(() => {
+  if (!props.separator || valueWithSeparator.value === '0') {
+    return null
+  }
+
+  return valueWithSeparator.value
+})
+
 function emitUpdate(value: string | null): void {
-  emit('update:modelValue', value ? Number(value): null)
+  emit('update:modelValue', value ? Number(value) : null)
 }
 </script>