@globalbrain/sefirot 2.13.0 → 2.14.1

package/LICENSE.md

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022 Global Brain Corporation
+Copyright (c) 2023 Global Brain Corporation
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/lib/components/SInputBase.vue

@@ -1,50 +1,75 @@
 <script setup lang="ts">
-import { computed, unref } from 'vue'
+import IconQuestion from '@iconify-icons/ph/question'
+import { computed, unref, useSlots } from 'vue'
 import { Validatable } from '../composables/Validation'
+import SIcon from './SIcon.vue'
+import STooltip from './STooltip.vue'
 
 const props = defineProps<{
   name?: string
-  note?: string
   label?: string
+  info?: string
+  note?: string
   help?: string
   hideError?: boolean
   validation?: Validatable
 }>()
 
-const hasError = computed(() => {
-  if (!props.validation) {
-    return false
-  }
+const slots = useSlots()
 
-  return props.validation.$dirty && props.validation.$invalid
+const hasInfo = computed(() => {
+  return slots.info || props.info
 })
 
-const errorMsg = computed(() => {
+const error = computed(() => {
   if (!props.validation) {
     return null
   }
 
-  const errors = props.validation.$errors
+  const errorMsg = getErrorMsg(props.validation)
+  const hasError = isDirtyAndInvalid(props.validation)
+  const showError = !props.hideError && hasError && errorMsg
 
-  return errors.length > 0 ? unref(errors[0].$message) : null
+  return {
+    has: hasError,
+    show: showError,
+    msg: errorMsg
+  }
 })
 
-const showError = computed(() => {
-  return !props.hideError && hasError.value && errorMsg.value
-})
+function isDirtyAndInvalid(validation: Validatable) {
+  return validation.$dirty && validation.$invalid
+}
+
+function getErrorMsg(validation: Validatable) {
+  const errors = validation.$errors
+
+  return errors.length > 0 ? unref(errors[0].$message) : null
+}
 </script>
 
 <template>
-  <div class="SInputBase" :class="{ 'has-error': hasError }">
+  <div class="SInputBase" :class="{ 'has-error': error?.has }">
     <label v-if="label" class="label" :for="name">
-      {{ label }} <span class="note">{{ note }}</span>
+      <STooltip v-if="hasInfo" :text="info">
+        <div class="label-text">
+          <span class="label-text-value">{{ label }}</span>
+          <SIcon class="label-text-info" :icon="IconQuestion" />
+        </div>
+        <template v-if="$slots.info" #text><slot name="info" /></template>
+      </STooltip>
+      <div v-else class="label-text">
+        <span class="label-text-value">{{ label }}</span>
+      </div>
+
+      <span class="label-note">{{ note }}</span>
     </label>
 
     <slot />
 
     <div class="help">
       <slot name="before-help" />
-      <p v-if="showError" class="help-error">{{ errorMsg }}</p>
+      <p v-if="error?.show" class="help-error">{{ error.msg }}</p>
       <p v-if="help" class="help-text">{{ help }}</p>
     </div>
   </div>
@@ -52,43 +77,61 @@ const showError = computed(() => {
 
 <style lang="postcss" scoped>
 .SInputBase.mini {
-  .label {
-    padding-bottom: 6px;
-    font-size: 12px;
-  }
+  .label            { padding-bottom: 6px; }
+  .label-text-value { font-size: 12px; }
+  .label-text-info  { width: 14px; height: 14px; }
 }
 
 .SInputBase.small {
-  .label {
-    padding-bottom: 8px;
-    font-size: 14px;
-  }
+  .label            { padding-bottom: 8px; }
+  .label-text-value { font-size: 14px; }
+  .label-note       { transform: translateY(1px); }
 }
 
 .SInputBase.medium {
-  .label {
-    padding-bottom: 8px;
-    font-size: 14px;
-  }
+  .label            { padding-bottom: 8px; }
+  .label-text-value { font-size: 14px; }
+  .label-note       { transform: translateY(1px); }
 }
 
 .SInputBase.has-error {
-  .label {
+  .label-text-value {
     color: var(--input-error-text-color);
   }
 }
 
 .label {
-  display: block;
+  display: flex;
+  align-items: center;
   width: 100%;
   line-height: 16px;
   font-weight: 500;
-  color: var(--input-label-color);
   cursor: pointer;
   transition: color 0.25s;
 }
 
-.note {
+.label-text {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.label-text-value {
+  color: var(--input-label-color);
+}
+
+.label-text-info {
+  width: 16px;
+  height: 16px;
+  color: var(--c-text-2);
+  transition: color 0.25s;
+
+  .label-text:hover & {
+    color: var(--c-info-text);
+  }
+}
+
+.label-note {
   display: inline-block;
   margin-left: 8px;
   font-size: 12px;

package/lib/components/SInputCheckbox.vue

@@ -10,6 +10,7 @@ type Size = 'mini' | 'small' | 'medium'
 const props = defineProps({
   size: { type: String as PropType<Size>, default: 'small' },
   label: { type: String, default: null },
+  info: { type: String, default: null },
   note: { type: String, default: null },
   help: { type: String, default: null },
   text: { type: String, required: true },
@@ -30,6 +31,7 @@ function emitChange() {
     :class="[size]"
     :label="label"
     :note="note"
+    :info="info"
     :help="help"
     :validation="validation"
   >
@@ -44,6 +46,7 @@ function emitChange() {
         <p class="text">{{ text }}</p>
       </div>
     </div>
+    <template v-if="$slots.info" #info><slot name="info" /></template>
   </SInputBase>
 </template>
 

package/lib/components/SInputCheckboxes.vue

@@ -14,6 +14,7 @@ const props = defineProps({
   size: { type: String as PropType<Size>, default: 'small' },
   name: { type: String, default: null },
   label: { type: String, default: null },
+  info: { type: String, default: null },
   note: { type: String, default: null },
   help: { type: String, default: null },
   options: { type: Array as PropType<CheckboxOption[]>, required: true },
@@ -42,6 +43,7 @@ function handleChange(value: unknown): void {
     :name="name"
     :label="label"
     :note="note"
+    :info="info"
     :help="help"
   >
     <div class="container">
@@ -55,6 +57,7 @@ function handleChange(value: unknown): void {
         </div>
       </div>
     </div>
+    <template v-if="$slots.info" #info><slot name="info" /></template>
   </SInputBase>
 </template>
 

package/lib/components/SInputDate.vue

@@ -8,6 +8,7 @@ import SInputBase from './SInputBase.vue'
 const props = defineProps<{
   name?: string
   label?: string
+  info?: string
   note?: string
   help?: string
   hideError?: boolean
@@ -42,6 +43,7 @@ function emitBlur() {
     :name="name"
     :label="label"
     :note="note"
+    :info="info"
     :help="help"
     :hide-error="hideError"
     :validation="validation"
@@ -69,6 +71,7 @@ function emitBlur() {
         >
       </DatePicker>
     </div>
+    <template v-if="$slots.info" #info><slot name="info" /></template>
   </SInputBase>
 </template>
 

package/lib/components/SInputDropdown.vue

@@ -38,6 +38,7 @@ export interface OptionAvatar extends OptionBase {
 const props = defineProps<{
   size?: Size
   label?: string
+  info?: string
   note?: string
   help?: string
   placeholder?: string
@@ -128,6 +129,7 @@ function handleArray(value: OptionValue) {
     :class="classes"
     :label="label"
     :note="note"
+    :info="info"
     :help="help"
     :validation="validation"
   >
@@ -163,6 +165,7 @@ function handleArray(value: OptionValue) {
         <SDropdown :sections="dropdownOptions" />
       </div>
     </div>
+    <template v-if="$slots.info" #info><slot name="info" /></template>
   </SInputBase>
 </template>
 

package/lib/components/SInputFile.vue

@@ -8,35 +8,44 @@ export type Size = 'mini' | 'small' | 'medium'
 const props = defineProps<{
   size?: Size
   label?: string
-  text?: string
+  info?: string
   note?: string
   help?: string
+  text?: string
   placeholder?: string
-  modelValue: File | null
+  value?: File | null
+  modelValue?: File | null
   hideError?: boolean
   validation?: Validatable
 }>()
 
 const emit = defineEmits<{
-  (e: 'update:modelValue', file: File | null): void
+  (e: 'update:model-value', file: File | null): void
+  (e: 'change', file: File | null): void
 }>()
 
+const _value = computed(() => {
+  return props.modelValue !== undefined
+    ? props.modelValue
+    : props.value !== undefined ? props.value : null
+})
+
 const input = ref<HTMLInputElement | null>(null)
 
 const classes = computed(() => [props.size ?? 'small'])
 
-const fileName = computed(() => {
-  return props.modelValue ? props.modelValue.name : null
-})
+const fileName = computed(() => _value.value?.name ?? null)
 
-function open(): void {
+/* c8 ignore next 4 */
+function open() {
   input.value!.click()
 }
 
-function handleChange(e: Event): void {
+function onChange(e: Event) {
   const file = (e.target as any).files[0]
 
-  emit('update:modelValue', file ?? null)
+  emit('update:model-value', file ?? null)
+  emit('change', file ?? null)
 
   file && props.validation?.$touch()
 }
@@ -48,15 +57,16 @@ function handleChange(e: Event): void {
     :class="classes"
     :label="label"
     :note="note"
+    :info="info"
     :help="help"
-    :hide-error="hideError"
     :validation="validation"
+    :hide-error="hideError"
   >
     <input
       ref="input"
       class="input"
       type="file"
-      @change="handleChange"
+      @change="onChange"
     >
 
     <div class="box" role="button" @click="open">
@@ -71,13 +81,14 @@ function handleChange(e: Event): void {
         <p v-else-if="placeholder" class="placeholder">{{ placeholder }}</p>
       </div>
     </div>
+    <template v-if="$slots.info" #info><slot name="info" /></template>
   </SInputBase>
 </template>
 
 <style lang="postcss" scoped>
 .SInputFile.mini {
   .action {
-    padding: 2px 8px 2px 2px;
+    padding: 3px 8px 3px 3px;
   }
 
   .button {
@@ -90,7 +101,7 @@ function handleChange(e: Event): void {
   .file-name,
   .placeholder {
     line-height: 30px;
-    font-size: 12px;
+    font-size: var(--input-font-size, var(--input-mini-font-size));
     font-weight: 500;
   }
 }
@@ -110,7 +121,8 @@ function handleChange(e: Event): void {
   .file-name,
   .placeholder {
     line-height: 38px;
-    font-size: 14px;
+    font-size: var(--input-font-size, var(--input-small-font-size));
+    font-weight: 400;
   }
 
   .placeholder {
@@ -133,7 +145,8 @@ function handleChange(e: Event): void {
   .file-name,
   .placeholder {
     line-height: 46px;
-    font-size: 14px;
+    font-size: var(--input-font-size, var(--input-medium-font-size));
+    font-weight: 400;
   }
 
   .placeholder {
@@ -144,7 +157,7 @@ function handleChange(e: Event): void {
 .SInputFile.has-error {
   .box,
   .box:hover {
-    border-color: var(--c-danger);
+    border-color: var(--input-error-border-color);
   }
 }
 
@@ -154,22 +167,14 @@ function handleChange(e: Event): void {
 
 .box {
   display: flex;
-  border: 1px solid var(--c-divider);
-  border-radius: 4px;
-  background-color: var(--c-bg);
+  border: 1px solid var(--input-border-color);
+  border-radius: 6px;
+  background-color: var(--input-bg-color);
   cursor: pointer;
-  transition: border-color .25s;
+  transition: border-color 0.25s;
 
   &:hover {
-    border-color: var(--c-black);
-
-    .button {
-      background-color: var(--c-bg-soft);
-    }
-  }
-
-  .dark &:hover {
-    border-color: var(--c-gray);
+    border-color: var(--input-hover-border-color);
   }
 }
 
@@ -178,11 +183,11 @@ function handleChange(e: Event): void {
 }
 
 .button {
-  border: 1px solid var(--c-divider-light);
+  border: 1px solid var(--c-divider);
   border-radius: 4px;
   color: var(--c-text-1);
-  background-color: var(--c-bg-mute);
-  transition: background-color .25s;
+  background-color: var(--c-mute);
+  transition: background-color 0.25s;
 }
 
 .text {
@@ -201,8 +206,8 @@ function handleChange(e: Event): void {
   text-overflow: ellipsis;
 }
 
-.file-name,
 .placeholder {
-  color: var(--c-text-2);
+  font-weight: 500;
+  color: var(--input-placeholder-color)
 }
 </style>

package/lib/components/SInputHMS.vue

@@ -16,6 +16,7 @@ export type ValueType = 'hour' | 'minute' | 'second'
 const props = defineProps<{
   size?: Size
   label?: string
+  info?: string
   note?: string
   help?: string
   noHour?: boolean
@@ -111,6 +112,7 @@ function createRequiredTouched(): boolean[] {
     :class="[size, { disabled }]"
     :label="label"
     :note="note"
+    :info="info"
     :help="help"
     :hide-error="hideError"
     :validation="validation"
@@ -147,9 +149,8 @@ function createRequiredTouched(): boolean[] {
       >
     </div>
 
-    <template #before-help>
-      <slot name="before-help" />
-    </template>
+    <template #before-help><slot name="before-help" /></template>
+    <template v-if="$slots.info" #info><slot name="info" /></template>
   </SInputBase>
 </template>
 

package/lib/components/SInputNumber.vue

@@ -11,6 +11,7 @@ const props = defineProps<{
   size?: Size
   name?: string
   label?: string
+  info?: string
   note?: string
   help?: string
   placeholder?: string
@@ -70,6 +71,7 @@ function emitUpdate(value: string | null) {
     type="number"
     :label="label"
     :note="note"
+    :info="info"
     :help="help"
     :align="align"
     :placeholder="placeholder"
@@ -80,5 +82,7 @@ function emitUpdate(value: string | null) {
     :validation="validation"
     @update:model-value="emitUpdate"
     @input="emitUpdate"
-  />
+  >
+    <template v-if="$slots.info" #info><slot name="info" /></template>
+  </SInputText>
 </template>

package/lib/components/SInputRadio.vue

@@ -8,20 +8,23 @@ const props = defineProps<{
   size?: Size
   name?: string
   label?: string
+  info?: string
   note?: string
   help?: string
   text: string
-  hideError?: boolean
   modelValue: boolean
   validation?: Validatable
+  hideError?: boolean
 }>()
 
 const emit = defineEmits<{
-  (e: 'update:modelValue', value: boolean): void
+  (e: 'update:model-value', value: boolean): void
+  (e: 'change', value: boolean): void
 }>()
 
-function emitChange() {
-  emit('update:modelValue', !props.modelValue)
+function onClick() {
+  emit('update:model-value', !props.modelValue)
+  emit('change', !props.modelValue)
 }
 </script>
 
@@ -31,12 +34,13 @@ function emitChange() {
     :class="[size ?? 'small']"
     :label="label"
     :note="note"
+    :info="info"
     :help="help"
-    :hide-error="hideError"
     :validation="validation"
+    :hide-error="hideError"
   >
     <div class="container">
-      <div class="input" :class="{ on: modelValue }" role="button" @click="emitChange">
+      <div class="input" :class="{ on: props.modelValue }" role="button" @click="onClick">
         <div class="box">
           <div class="check" />
         </div>
@@ -44,6 +48,7 @@ function emitChange() {
         <p class="text">{{ text }}</p>
       </div>
     </div>
+    <template v-if="$slots.info" #info><slot name="info" /></template>
   </SInputBase>
 </template>
 
@@ -57,34 +62,34 @@ function emitChange() {
   display: flex;
   align-items: center;
   height: 32px;
+  cursor: pointer;
 
   &:hover {
     .box {
-      border-color: var(--c-info);
+      border-color: var(--c-info-light);
     }
   }
 }
 
 .input.on {
   .box {
-    border-color: var(--c-info);
-    box-shadow: var(--shadow-depth-3);
+    border-color: var(--c-info-light);
   }
 
   .check {
     opacity: 1;
-    transform: scale(.6);
+    transform: scale(0.6);
   }
 }
 
 .box {
   position: relative;
-  border: 1px solid var(--c-divider);
+  border: 1px solid var(--c-divider-1);
   border-radius: 50%;
   width: 16px;
   height: 16px;
-  background-color: var(--c-bg);
-  transition: border-color 0.25s, box-shadow 0.25s;
+  background-color: var(--input-bg-color);
+  transition: border-color 0.25s;
 }
 
 .check {
@@ -98,7 +103,7 @@ function emitChange() {
   align-items: center;
   border-radius: 50%;
   width: 100%;
-  background-color: var(--c-info);
+  background-color: var(--c-info-bg);
   opacity: 0;
   transform: scale(0);
   transition: opacity 0.25s, transform 0.1s;