@globalbrain/sefirot 2.0.0-draft.8 → 2.1.0

package/lib/components/SInputBase.vue

@@ -1,31 +1,15 @@
-<template>
-  <div class="SInputBase" :class="{ 'has-error': hasError }">
-    <label v-if="label" class="label" :for="name">
-      {{ label }} <span class="note">{{ note }}</span>
-    </label>
-
-    <slot />
-
-    <div class="help">
-      <slot name="before-help" />
-      <p v-if="showError" class="help-error">{{ errorMsg }}</p>
-      <p v-if="help" class="help-text">{{ help }}</p>
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
-import { PropType, computed } from 'vue'
+import { computed, unref } from 'vue'
 import { Validatable } from '../composables/Validation'
 
-const props = defineProps({
-  name: { type: String, default: null },
-  note: { type: String, default: null },
-  label: { type: String, default: null },
-  help: { type: String, default: null },
-  errorMessage: { type: Boolean, default: true },
-  validation: { type: Object as PropType<Validatable>, default: null }
-})
+const props = defineProps<{
+  name?: string,
+  note?: string,
+  label?: string,
+  help?: string,
+  hideError?: boolean
+  validation?: Validatable
+}>()
 
 const hasError = computed(() => {
   if (!props.validation) {
@@ -42,14 +26,30 @@ const errorMsg = computed(() => {
 
   const errors = props.validation.$errors
 
-  return errors.length > 0 ? errors[0].$message : null
+  return errors.length > 0 ? unref(errors[0].$message) : null
 })
 
 const showError = computed(() => {
-  return props.errorMessage && hasError.value && errorMsg.value
+  return !props.hideError && hasError.value && errorMsg.value
 })
 </script>
 
+<template>
+  <div class="SInputBase" :class="{ 'has-error': hasError }">
+    <label v-if="label" class="label" :for="name">
+      {{ label }} <span class="note">{{ note }}</span>
+    </label>
+
+    <slot />
+
+    <div class="help">
+      <slot name="before-help" />
+      <p v-if="showError" class="help-error">{{ errorMsg }}</p>
+      <p v-if="help" class="help-text">{{ help }}</p>
+    </div>
+  </div>
+</template>
+
 <style lang="postcss" scoped>
 .SInputBase.mini {
   .label {
@@ -83,9 +83,9 @@ const showError = computed(() => {
   width: 100%;
   line-height: 16px;
   font-weight: 500;
-  color: var(--input-label);
+  color: var(--c-text-1);
   cursor: pointer;
-  transition: color .25s;
+  transition: color 0.25s;
 }
 
 .note {
@@ -93,7 +93,7 @@ const showError = computed(() => {
   margin-left: 8px;
   font-size: 12px;
   font-weight: 500;
-  color: var(--input-note);
+  color: var(--c-text-2);
 }
 
 .help {
@@ -118,7 +118,7 @@ const showError = computed(() => {
   line-height: 20px;
   font-size: 12px;
   font-weight: 500;
-  color: var(--input-help);
+  color: var(--c-text-2);
 }
 
 .help-error + .help-text,

package/lib/components/SInputCheckbox.vue

@@ -11,7 +11,7 @@
       <div class="input" :class="{ on: modelValue }" role="button" @click="emitChange">
         <div class="box">
           <div class="check">
-            <SIconCheck class="check-icon" />
+            <SIcon :icon="IconCheck" class="check-icon" />
           </div>
         </div>
 
@@ -22,9 +22,10 @@
 </template>
 
 <script setup lang="ts">
+import IconCheck from '@iconify-icons/ph/check'
 import { PropType } from 'vue'
 import { Validatable } from '../composables/Validation'
-import SIconCheck from './icons/SIconCheck.vue'
+import SIcon from './SIcon.vue'
 import SInputBase from './SInputBase.vue'
 
 type Size = 'mini' | 'small' | 'medium'
@@ -101,7 +102,7 @@ function emitChange() {
 .check-icon {
   width: 10px;
   height: 10px;
-  fill: var(--c-white);
+  color: var(--c-white);
 }
 
 .text {

package/lib/components/SInputCheckboxes.vue

@@ -0,0 +1,74 @@
+<template>
+  <SInputBase
+    class="SInputCheckboxes"
+    :class="[size]"
+    :name="name"
+    :label="label"
+    :note="note"
+    :help="help"
+  >
+    <div class="container">
+      <div class="row">
+        <div v-for="option in options" :key="option.value" class="col">
+          <SInputCheckbox
+            :text="option.label"
+            :model-value="isChecked(option.value)"
+            @update:model-value="handleChange(option.value)"
+          />
+        </div>
+      </div>
+    </div>
+  </SInputBase>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import SInputBase from './SInputBase.vue'
+import SInputCheckbox from './SInputCheckbox.vue'
+
+type Size = 'mini' | 'small' | 'medium'
+
+interface CheckboxOption {
+  label: string
+  value: any
+}
+
+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 },
+  options: { type: Array as PropType<CheckboxOption[]>, required: true },
+  modelValue: { type: Array, required: true }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+function isChecked(value: unknown): boolean {
+  return props.modelValue.includes(value)
+}
+
+function handleChange(value: unknown): void {
+  const distinct = props.modelValue
+    .filter(v => v !== value)
+    .concat(props.modelValue.includes(value) ? [] : [value])
+
+  emit('update:modelValue', distinct)
+}
+</script>
+
+<style lang="postcss" scoped>
+.container {
+  display: flex;
+}
+
+.row {
+  margin: -2px -8px;
+}
+
+.col {
+  padding: 2px 8px;
+}
+</style>
+

package/lib/components/SInputDate.vue

@@ -0,0 +1,182 @@
+<template>
+  <SInputBase
+    class="SInputDate"
+    :class="classes"
+    :name="name"
+    :label="label"
+    :note="note"
+    :help="help"
+    :validation="validation"
+  >
+    <div class="container">
+      <DatePicker
+        v-slot="{ inputValue, inputEvents }"
+        :value="modelValue"
+        color="blue"
+        is-dark
+        :masks="{ input: 'YYYY-MM-DD' }"
+        :model-config="{ type: 'string', mask: 'YYYY-MM-DD' }"
+        :popover="{ placement: 'bottom', visibility: 'click' }"
+        @input="emitInput"
+      >
+        <input
+          :id="name"
+          class="input"
+          type="text"
+          :placeholder="placeholder"
+          :disabled="disabled"
+          :value="inputValue"
+          autocomplete="off"
+          v-on="inputEvents"
+          @blur="emitBlur"
+        >
+      </DatePicker>
+    </div>
+  </SInputBase>
+</template>
+
+<script setup lang="ts">
+import { DatePicker } from 'v-calendar'
+import { PropType, computed } from 'vue'
+import { Validation } from '../composables/Validation'
+import SInputBase from './SInputBase.vue'
+
+type Size = 'medium' | 'mini'
+type Mode = 'filled' | 'outlined'
+
+const props = defineProps({
+  size: { type: String as PropType<Size>, default: 'medium' },
+  mode: { type: String as PropType<Mode>, default: 'filled' },
+  name: { type: String, default: null },
+  label: { type: String, default: null },
+  note: { type: String, default: null },
+  help: { type: String, default: null },
+  placeholder: { type: String, default: 'YYYY-MM-DD' },
+  disabled: { type: Boolean, default: false },
+  modelValue: { type: String, default: null },
+  validation: { type: Object as PropType<Validation>, default: null }
+})
+
+const emit = defineEmits(['update:modelValue', 'blur'])
+
+const classes = computed(() => [
+  props.size,
+  props.mode,
+  {
+    disabled: props.disabled
+  }
+])
+
+function emitInput(date: string | null) {
+  emit('update:modelValue', date)
+}
+
+function emitBlur(e: FocusEvent) {
+  setTimeout(() => {
+    props.validation && props.validation.$touch()
+
+    emit('blur', (e.target as HTMLInputElement).value)
+  }, 100)
+}
+</script>
+
+<style lang="postcss" scoped>
+.SInputDate.mini {
+  .input {
+    padding: 3px 12px;
+    width: 100%;
+    line-height: 24px;
+    font-size: 14px;
+  }
+
+  .container {
+    height: 32px;
+  }
+}
+
+.SInputDate.medium {
+  .input {
+    padding: 11px 16px;
+    width: 100%;
+    line-height: 24px;
+    font-size: 16px;
+  }
+
+  .container {
+    height: 48px;
+  }
+}
+
+.SInputDate.has-error {
+  .input {
+    border-color: var(--c-danger);
+
+    &:focus {
+      border-color: var(--c-danger);
+    }
+  }
+}
+
+.SInputDate.filled {
+  .input {
+    background-color: var(--input-filled-bg);
+
+    &:hover {
+      border-color: var(--input-focus-border);
+    }
+
+    &:focus {
+      border-color: var(--input-focus-border);
+      background-color: var(--input-filled-bg-focus);
+    }
+  }
+
+  &.disabled .input {
+    background-color: var(--input-filled-bg-disabled);
+  }
+}
+
+.SInputDate.outlined {
+  .input {
+    border-color: var(--input-outlined-border);
+    background-color: transparent;
+
+    &:hover {
+      border-color: var(--input-focus-border);
+    }
+
+    &:focus {
+      border-color: var(--input-focus-border);
+    }
+  }
+
+  &.disabled .input:hover {
+    border-color: var(--input-outlined-border);
+  }
+
+  &.disabled .input {
+    background-color: var(--input-outlined-bg-disabled);
+  }
+}
+
+.SInputDate.disabled {
+  .input:hover {
+    cursor: not-allowed;
+    border-color: transparent;
+  }
+}
+
+
+.input {
+  display: block;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  width: 100%;
+  color: var(--input-text);
+  transition: border-color .25s, background-color .25s;
+
+  &::placeholder {
+    color: var(--input-placeholder);
+  }
+}
+</style>