@globalbrain/sefirot 2.2.1 → 2.3.0

package/lib/components/SButton.vue

@@ -807,7 +807,6 @@ function handleClick(): void {
   }
 }
 
-
 .SButton.mute {
   color: var(--button-mute-text);
 

package/lib/components/SButtonGroup.vue

@@ -1,21 +1,5 @@
-<template>
-  <div class="SButtonGroup" :class="classes">
-    <button
-      v-for="item in items"
-      :key="item.value"
-      class="button"
-      :class="getButtonClasses(item)"
-      @click="handleClick(item.value)"
-    >
-      <span class="content">
-        {{ item.label }}
-      </span>
-    </button>
-  </div>
-</template>
-
 <script setup lang="ts">
-import { computed, PropType } from 'vue'
+import { PropType, computed } from 'vue'
 
 export interface ButtonGroupItem {
   label: string
@@ -48,6 +32,22 @@ function handleClick(value: string) {
 }
 </script>
 
+<template>
+  <div class="SButtonGroup" :class="classes">
+    <button
+      v-for="item in items"
+      :key="item.value"
+      class="button"
+      :class="getButtonClasses(item)"
+      @click="handleClick(item.value)"
+    >
+      <span class="content">
+        {{ item.label }}
+      </span>
+    </button>
+  </div>
+</template>
+
 <style lang="postcss" scoped>
 .SButtonGroup {
   display: flex;

package/lib/components/SDropdownSectionFilter.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import IconCheck from '@iconify-icons/ph/check'
-import type { MaybeRef } from '@vueuse/core'
+import { MaybeRef } from '@vueuse/core'
 import Fuse from 'fuse.js'
-import { ref, computed, unref, onMounted } from 'vue'
-import { DropdownSectionFilterSelectedValue, DropdownSectionFilterOption } from '../composables/Dropdown'
+import { computed, onMounted, ref, unref } from 'vue'
+import { DropdownSectionFilterOption, DropdownSectionFilterSelectedValue } from '../composables/Dropdown'
 import { isArray } from '../support/Utils'
 import SDropdownSectionFilterItem from './SDropdownSectionFilterItem.vue'
 import SIcon from './SIcon.vue'
@@ -25,7 +25,7 @@ const fuse = computed(() => {
 const filteredOptions = computed(() => {
   return !props.search || !query.value
     ? unref(props.options)
-    : fuse.value.search(query.value).map((r) => r.item)
+    : fuse.value.search(query.value).map(r => r.item)
 })
 
 onMounted(() => {
@@ -36,7 +36,7 @@ function isActive(value: string | number | boolean) {
   const selected = unref(props.selected)
 
   return isArray(selected)
-    ? selected.some((sv) => sv === value)
+    ? selected.includes(value)
     : selected === value
 }
 

package/lib/components/SIcon.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Icon, IconifyIcon } from '@iconify/vue/dist/offline'
-import type { DefineComponent } from 'vue'
+import { DefineComponent } from 'vue'
 
 defineProps<{
   icon: IconifyIcon | DefineComponent
@@ -8,6 +8,6 @@ defineProps<{
 </script>
 
 <template>
-  <Icon v-if="typeof icon['body'] === 'string'" :icon="(icon as IconifyIcon)" />
+  <Icon v-if="typeof icon.body === 'string'" :icon="icon as IconifyIcon" />
   <component v-else :is="icon" />
 </template>

package/lib/components/SInputBase.vue

@@ -3,10 +3,10 @@ import { computed, unref } from 'vue'
 import { Validatable } from '../composables/Validation'
 
 const props = defineProps<{
-  name?: string,
-  note?: string,
-  label?: string,
-  help?: string,
+  name?: string
+  note?: string
+  label?: string
+  help?: string
   hideError?: boolean
   validation?: Validatable
 }>()
@@ -98,7 +98,6 @@ const showError = computed(() => {
 
 .help {
   position: relative;
-  word-break: break-all;
 }
 
 .help-error {

package/lib/components/SInputCheckbox.vue

@@ -1,26 +1,3 @@
-<template>
-  <SInputBase
-    class="SInputCheckbox"
-    :class="[size]"
-    :label="label"
-    :note="note"
-    :help="help"
-    :validation="validation"
-  >
-    <div class="container">
-      <div class="input" :class="{ on: modelValue }" role="button" @click="emitChange">
-        <div class="box">
-          <div class="check">
-            <SIcon :icon="IconCheck" class="check-icon" />
-          </div>
-        </div>
-
-        <p class="text">{{ text }}</p>
-      </div>
-    </div>
-  </SInputBase>
-</template>
-
 <script setup lang="ts">
 import IconCheck from '@iconify-icons/ph/check'
 import { PropType } from 'vue'
@@ -47,6 +24,29 @@ function emitChange() {
 }
 </script>
 
+<template>
+  <SInputBase
+    class="SInputCheckbox"
+    :class="[size]"
+    :label="label"
+    :note="note"
+    :help="help"
+    :validation="validation"
+  >
+    <div class="container">
+      <div class="input" :class="{ on: modelValue }" role="button" @click="emitChange">
+        <div class="box">
+          <div class="check">
+            <SIcon :icon="IconCheck" class="check-icon" />
+          </div>
+        </div>
+
+        <p class="text">{{ text }}</p>
+      </div>
+    </div>
+  </SInputBase>
+</template>
+
 <style lang="postcss" scoped>
 .container {
   display: flex;

package/lib/components/SInputCheckboxes.vue

@@ -1,26 +1,3 @@
-<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'
@@ -58,6 +35,29 @@ function handleChange(value: unknown): void {
 }
 </script>
 
+<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>
+
 <style lang="postcss" scoped>
 .container {
   display: flex;

package/lib/components/SInputDate.vue

@@ -1,30 +1,67 @@
+<script setup lang="ts">
+import { DatePicker } from 'v-calendar'
+import { computed } from 'vue'
+import { Validatable } from '../composables/Validation'
+import { Day, day } from '../support/Day'
+import SInputBase from './SInputBase.vue'
+
+const props = defineProps<{
+  name?: string
+  label?: string
+  note?: string
+  help?: string
+  hideError?: boolean
+  modelValue: Day | null
+  validation?: Validatable
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: Day | null): void
+}>()
+
+const value = computed(() => {
+  return props.modelValue
+    ? props.modelValue.format('YYYY-MM-DD')
+    : null
+})
+
+function emitInput(date?: string) {
+  emit('update:modelValue', date ? day(date) : null)
+}
+
+function emitBlur(e: FocusEvent) {
+  setTimeout(() => {
+    props.validation && props.validation.$touch()
+  }, 100)
+}
+</script>
+
 <template>
   <SInputBase
-    class="SInputDate"
-    :class="classes"
+    class="SInputDate small"
     :name="name"
     :label="label"
     :note="note"
     :help="help"
+    :hide-error="hideError"
     :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"
+        :model-value="value"
+        @update:model-value="emitInput"
       >
         <input
           :id="name"
           class="input"
           type="text"
-          :placeholder="placeholder"
-          :disabled="disabled"
+          placeholder="YYYY-MM-DD"
           :value="inputValue"
           autocomplete="off"
           v-on="inputEvents"
@@ -35,78 +72,7 @@
   </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);
@@ -117,66 +83,23 @@ function emitBlur(e: FocusEvent) {
   }
 }
 
-.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;
+  border: 1px solid var(--c-divider);
+  border-radius: 6px;
+  padding: 5px 12px;
   width: 100%;
-  color: var(--input-text);
-  transition: border-color .25s, background-color .25s;
+  max-width: 144px;
+  height: 40px;
+  letter-spacing: 0;
+  line-height: 24px;
+  font-size: 16px;
+  background-color: var(--c-bg);
+  transition: border-color 0.25s, background-color 0.25s;
 
   &::placeholder {
-    color: var(--input-placeholder);
+    font-weight: 500;
+    color: var(--c-text-3);
   }
 }
 </style>

package/lib/components/SInputDropdown.vue

@@ -3,7 +3,7 @@ import IconCaretDown from '@iconify-icons/ph/caret-down'
 import IconCaretUp from '@iconify-icons/ph/caret-up'
 import xor from 'lodash-es/xor'
 import { computed } from 'vue'
-import type { DropdownSectionFilter } from '../composables/Dropdown'
+import { DropdownSectionFilter } from '../composables/Dropdown'
 import { useFlyout } from '../composables/Flyout'
 import { Validatable } from '../composables/Validation'
 import { isArray } from '../support/Utils'
@@ -71,10 +71,10 @@ const dropdownOptions = computed<DropdownSectionFilter[]>(() => [{
 
 const selected = computed(() => {
   if (isArray(props.modelValue)) {
-    return props.options.filter((o) => (props.modelValue as ArrayValue).includes(o.value))
+    return props.options.filter(o => (props.modelValue as ArrayValue).includes(o.value))
   }
 
-  const item = props.options.find((o) => o.value === props.modelValue)
+  const item = props.options.find(o => o.value === props.modelValue)
 
   return item ? [item] : []
 })

package/lib/components/SInputFile.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 SInputBase from './SInputBase.vue'
 

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 {