@globalbrain/sefirot 2.0.0-draft.8 → 2.0.0

package/lib/components/SInputText.vue

@@ -1,45 +1,27 @@
-<template>
-  <SInputBase
-    class="SInputText"
-    :class="classes"
-    :label="label"
-    :note="note"
-    :help="help"
-    :error-message="errorMessage"
-    :validation="validation"
-  >
-    <input
-      class="input"
-      :type="type"
-      :placeholder="placeholder"
-      :disabled="disabled"
-      :value="modelValue"
-      @input="emitInput"
-      @blur="emitBlur"
-      @keypress.enter="emitEnter"
-    >
-  </SInputBase>
-</template>
-
 <script setup lang="ts">
-import { PropType, computed } from 'vue'
-import { Validation, Validatable } from '../composables/Validation'
+import { ref, computed } from 'vue'
+import { 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 },
-  help: { type: String, default: null },
-  type: { type: String, default: 'text' },
-  placeholder: { type: String, default: null },
-  disabled: { type: Boolean, default: false },
-  errorMessage: { type: Boolean, default: true },
-  modelValue: { type: [String, Number] as PropType<string | 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
+  type?: string
+  placeholder?: string
+  icon?: any
+  align?: Align
+  disabled?: boolean
+  modelValue: string | null
+  displayValue?: string | null
+  hideError?: boolean
+  validation?: Validatable
+}>()
 
 const emit = defineEmits<{
   (e: 'update:modelValue', value: string | null): void
@@ -47,13 +29,24 @@ const emit = defineEmits<{
   (e: 'enter', value: string | null): void
 }>()
 
+const input = ref<HTMLElement | null>(null)
+const isFocused = ref(false)
+
 const classes = computed(() => [
-  props.size,
+  props.size ?? 'small',
   { disabled: props.disabled }
 ])
 
-function emitInput(e: Event): void {
-  emit('update:modelValue', getValue(e))
+const showDisplay = computed(() => {
+  return !isFocused.value && props.displayValue
+})
+
+function focus(): void {
+  input.value?.focus()
+}
+
+function onFocus(): void {
+  isFocused.value = true
 }
 
 function emitBlur(e: FocusEvent): void {
@@ -63,6 +56,12 @@ function emitBlur(e: FocusEvent): void {
 
   emit('update:modelValue', value)
   emit('blur', value)
+
+  isFocused.value = false
+}
+
+function emitInput(e: Event): void {
+  emit('update:modelValue', getValue(e))
 }
 
 function emitEnter(e: KeyboardEvent): void {
@@ -81,37 +80,139 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
 }
 </script>
 
+<template>
+  <SInputBase
+    class="SInputText"
+    :class="classes"
+    :name="name"
+    :label="label"
+    :note="note"
+    :help="help"
+    :hide-error="hideError"
+    :validation="validation"
+  >
+    <div class="box" :class="{ focus: isFocused }" @click="focus">
+      <div v-if="icon" class="icon">
+        <component :is="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>
+      </div>
+    </div>
+  </SInputBase>
+</template>
+
 <style lang="postcss" scoped>
 .SInputText.mini {
-  .input {
+  .input,
+  .input-area {
+    min-height: 32px;
     padding: 3px 12px;
     font-size: 14px;
+
+    &.has-icon {
+      padding-left: 30px;
+    }
+  }
+
+  .icon {
+    top: 9px;
+    left: 10px;
+  }
+
+  .icon-svg {
+    width: 14px;
+    height: 14px;
   }
 }
 
 .SInputText.small {
-  .input {
-    padding: 7px 12px;
+  .box {
+    min-height: 40px;
+  }
+
+  .value,
+  .input,
+  .display {
+    min-height: 38px;
+  }
+
+  .box {
+    padding: 0 12px;
+  }
+
+  .input,
+  .display {
+    padding: 5px 0;
+    letter-spacing: 0;
+    line-height: 24px;
     font-size: 16px;
   }
+
+  .icon {
+    width: 26px;
+    height: 38px;
+  }
+
+  .icon-svg {
+    width: 16px;
+    height: 16px;
+  }
 }
 
 .SInputText.medium {
-  .input {
+  .input,
+  .input-area {
+    min-height: 48px;
     padding: 11px 16px;
     font-size: 16px;
+
+    &.has-icon {
+      padding-left: 36px;
+    }
+  }
+
+  .icon {
+    top: 16px;
+    left: 12px;
+  }
+
+  .icon-svg {
+    width: 16px;
+    height: 16px;
   }
 }
 
 .SInputText.disabled {
   .input {
+    background-color: var(--input-outlined-bg-disabled);
+  }
+
+  .box:hover .input {
     cursor: not-allowed;
-    border-color: transparent;
+    border-color: var(--input-outlined-border);
   }
 }
 
 .SInputText.has-error {
-  .input {
+  .box {
     border-color: var(--c-danger);
 
     &:hover,
@@ -121,28 +222,71 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
   }
 }
 
-.input {
-  display: block;
+.box {
+  position: relative;
+  display: flex;
   flex-grow: 1;
-  border: 1px solid var(--input-border);
-  border-radius: 4px;
+  max-width: 100%;
+  border: 1px solid var(--c-divider);
+  border-radius: 6px;
+  background-color: var(--c-bg);
+  cursor: text;
+  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);
+  }
+}
+
+.value {
+  position: relative;
+  flex-grow: 1;
+}
+
+.input {
   width: 100%;
-  font-weight: 400;
   background-color: transparent;
-  transition: border-color .25s, background-color .25s;
+
+  &.hide,
+  &.hide::placeholder {
+    color: transparent;
+  }
 
   &::placeholder {
     font-weight: 500;
-    color: var(--input-placeholder);
+    color: var(--c-text-3);
   }
+}
 
-  &:hover {
-    border-color: var(--input-hover-border);
-  }
+.display {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+}
 
-  &:focus {
-    border-color: var(--input-focus-border);
-    background-color: transparent;
-  }
+.icon {
+  display: flex;
+  align-items: center;
+  cursor: text;
+  color: var(--c-text-2);
+}
+
+.icon-svg {
+  fill: currentColor;
 }
 </style>

package/lib/components/SInputTextarea.vue

@@ -2,18 +2,20 @@
   <SInputBase
     class="SInputTextarea"
     :class="classes"
+    :name="name"
     :label="label"
     :note="note"
     :help="help"
-    :error-message="errorMessage"
+    :hide-error="hideError"
     :validation="validation"
   >
     <textarea
+      :id="name"
       class="input"
       :placeholder="placeholder"
-      :rows="rows"
+      :rows="rows ?? 3"
       :disabled="disabled"
-      :value="modelValue ?? undefined"
+      :value="modelValue ?? ''"
       @input="emitInput"
       @blur="emitBlur"
     />
@@ -21,29 +23,32 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, computed } from 'vue'
+import { computed } from 'vue'
 import { 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 },
-  help: { type: String, default: null },
-  placeholder: { type: String, default: null },
-  disabled: { type: Boolean, default: false },
-  rows: { type: Number, default: 3 },
-  errorMessage: { type: Boolean, default: true },
-  modelValue: { type: String as PropType<string | null>, default: null },
-  validation: { type: Object as PropType<Validatable>, default: null }
-})
-
-const emit = defineEmits(['update:modelValue'])
+export type Size = 'mini' | 'small' | 'medium'
+
+const props = defineProps<{
+  size?: Size
+  name?: string
+  label?: string
+  note?: string
+  help?: string
+  placeholder?: string
+  disabled?: boolean
+  rows?: number
+  modelValue: string | null
+  hideError?: boolean
+  validation?: Validatable
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+}>()
 
 const classes = computed(() => [
-  props.size,
+  props.size ?? 'small',
   { disabled: props.disabled }
 ])
 
@@ -70,9 +75,9 @@ function emitBlur(e: FocusEvent): void {
 
 .SInputTextarea.small {
   .input {
-    padding: 7px 12px;
+    padding: 12px;
     width: 100%;
-    min-height: 88px;
+    min-height: 96px;
     line-height: 24px;
     font-size: 16px;
   }
@@ -110,25 +115,34 @@ function emitBlur(e: FocusEvent): void {
 .input {
   display: block;
   flex-grow: 1;
-  border: 1px solid var(--input-border);
-  border-radius: 4px;
+  border: 1px solid var(--c-divider);
+  border-radius: 6px;
   width: 100%;
   font-weight: 400;
-  background-color: transparent;
-  transition: border-color .25s, background-color .25s;
+  background-color: var(--c-bg);
+  transition: border-color 0.25s, background-color 0.25s;
 
   &::placeholder {
     font-weight: 500;
-    color: var(--input-placeholder);
+    color: var(--c-text-3);
   }
 
   &:hover {
-    border-color: var(--input-hover-border);
+    border-color: var(--c-black);
+  }
+
+  &:focus,
+  &:hover:focus {
+    border-color: var(--c-info);
+  }
+
+  .dark &:hover {
+    border-color: var(--c-gray);
   }
 
-  &:focus {
-    border-color: var(--input-focus-border);
-    background-color: transparent;
+  .dark &:focus,
+  .dark &:hover:focus {
+    border-color: var(--c-info);
   }
 }
 </style>