@globalbrain/sefirot 2.2.0 → 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] : []
 })
@@ -83,6 +83,14 @@ const hasSelected = computed(() => {
   return selected.value.length > 0
 })
 
+const removable = computed(() => {
+  if (isArray(props.modelValue)) {
+    return props.nullable || selected.value.length > 1
+  }
+
+  return !!props.nullable
+})
+
 async function handleOpen() {
   !props.disabled && open()
 }
@@ -137,6 +145,7 @@ function handleArray(value: OptionValue) {
           <SInputDropdownItem
             v-if="hasSelected"
             :items="selected"
+            :removable="removable"
             :disabled="disabled ?? false"
             @remove="handleSelect"
           />
@@ -223,8 +232,8 @@ function handleArray(value: OptionValue) {
   }
 }
 
-.SInputSelect.has-error {
-  .select {
+.SInputDropdown.has-error {
+  .box {
     border-color: var(--c-danger);
   }
 }
@@ -266,6 +275,8 @@ function handleArray(value: OptionValue) {
   padding: 2px 4px;
   font-weight: 500;
   color: var(--c-text-3);
+  overflow: hidden;
+  white-space: nowrap;
 }
 
 .box-icon {

package/lib/components/SInputDropdownItem.vue

@@ -22,6 +22,7 @@ export interface ItemAvatar extends ItemBase {
 
 defineProps<{
   items: Item[]
+  removable: boolean
   disabled: boolean
 }>()
 
@@ -37,6 +38,7 @@ defineEmits<{
         v-if="item.type === 'text' || item.type === undefined"
         :label="item.label"
         :value="item.value"
+        :removable="removable"
         :disabled="disabled"
         @remove="(v) => $emit('remove', v)"
       />
@@ -45,6 +47,7 @@ defineEmits<{
         :label="item.label"
         :image="item.image"
         :value="item.value"
+        :removable="removable"
         :disabled="disabled"
         @remove="(v) => $emit('remove', v)"
       />

package/lib/components/SInputDropdownItemAvatar.vue

@@ -7,6 +7,7 @@ defineProps<{
   label: string
   image?: string | null
   value: string | number | boolean
+  removable: boolean
   disabled: boolean
 }>()
 
@@ -16,7 +17,7 @@ defineEmits<{
 </script>
 
 <template>
-  <div class="SInputDropdownItemAvatar" :class="{ disabled }">
+  <div class="SInputDropdownItemAvatar" :class="{ disabled, removable }">
     <div class="user">
       <div class="avatar">
         <SAvatar size="nano" :avatar="image" :name="label" />
@@ -24,7 +25,7 @@ defineEmits<{
       <p class="name">{{ label }}</p>
     </div>
 
-    <div v-if="!disabled" class="remove" role="button" @click="$emit('remove', value)">
+    <div v-if="!disabled && removable" class="remove" role="button" @click="$emit('remove', value)">
       <div class="remove-box">
         <SIcon :icon="IconX" class="remove-icon" />
       </div>
@@ -37,10 +38,14 @@ defineEmits<{
   display: flex;
   border: 1px solid var(--c-divider-light);
   border-radius: 14px;
-  padding: 0;
+  padding: 0 12px 0 0;
   background-color: var(--c-bg-mute);
 }
 
+.SInputDropdownItemAvatar.removable {
+  padding: 0;
+}
+
 .SInputDropdownItemUserAvatar.disabled {
   padding: 0 10px 0 0;
   background-color: var(--c-gray-light-4);

package/lib/components/SInputDropdownItemText.vue

@@ -5,6 +5,7 @@ import SIcon from './SIcon.vue'
 defineProps<{
   label: string
   value: string | number | boolean
+  removable: boolean
   disabled: boolean
 }>()
 
@@ -14,10 +15,10 @@ defineEmits<{
 </script>
 
 <template>
-  <div class="SInputDropdownItemText" :class="{ disabled }">
+  <div class="SInputDropdownItemText" :class="{ disabled, removable }">
     <p class="text">{{ label }}</p>
 
-    <div v-if="!disabled" class="remove" role="button" @click.stop="$emit('remove', value)">
+    <div v-if="!disabled && removable" class="remove" role="button" @click.stop="$emit('remove', value)">
       <div class="remove-box">
         <SIcon :icon="IconX" class="remove-icon" />
       </div>
@@ -30,12 +31,16 @@ defineEmits<{
   display: flex;
   border: 1px solid var(--c-divider-light);
   border-radius: 14px;
-  padding: 0 0 0 12px;
+  padding: 0 12px;
   background-color: var(--c-bg-mute);
 }
 
+.SInputDropdownItemText.removable {
+  padding: 0 0 0 12px;
+}
+
 .SInputDropdownItemText.disabled {
-  padding: 0 10px 0;
+  padding: 0 10px;
   background-color: var(--c-gray-light-4);
 
   .text {

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'