@globalbrain/sefirot 2.14.1 → 2.15.0

package/lib/components/SInputSwitch.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { IconifyIcon } from '@iconify/vue/dist/offline'
+import { DefineComponent, computed } from 'vue'
 import { Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 
 export type Size = 'mini' | 'small' | 'medium'
+export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
 
 const props = defineProps<{
   size?: Size
@@ -13,6 +15,9 @@ const props = defineProps<{
   note?: string
   text?: string
   help?: string
+  checkIcon?: IconifyIcon | DefineComponent
+  checkText?: string
+  checkColor?: Color
   disabled?: boolean
   modelValue: boolean
   hideError?: boolean
@@ -41,6 +46,9 @@ function emitChange(): void {
     :label="label"
     :note="note"
     :info="info"
+    :check-icon="checkIcon"
+    :check-text="checkText"
+    :check-color="checkColor"
     :help="help"
     :hide-error="hideError"
   >

package/lib/components/SInputSwitches.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { IconifyIcon } from '@iconify/vue/dist/offline'
+import { DefineComponent, computed } from 'vue'
 import { Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 import SInputSwitch from './SInputSwitch.vue'
 
 export type Size = 'mini' | 'small' | 'medium'
+export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
 
 export interface Option {
   label: string
@@ -18,6 +20,9 @@ const props = defineProps<{
   info?: string
   note?: string
   help?: string
+  checkIcon?: IconifyIcon | DefineComponent
+  checkText?: string
+  checkColor?: Color
   options: Option[]
   disabled?: boolean
   modelValue: (string | number | boolean)[]
@@ -55,6 +60,9 @@ function handleChange(value: string | number | boolean): void {
     :note="note"
     :info="info"
     :help="help"
+    :check-icon="checkIcon"
+    :check-text="checkText"
+    :check-color="checkColor"
     :hide-error="hideError"
   >
     <div class="container">

package/lib/components/SInputText.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { IconifyIcon } from '@iconify/vue/dist/offline'
+import { DefineComponent, computed, ref } from 'vue'
 import { Validatable } from '../composables/Validation'
 import SIcon from './SIcon.vue'
 import SInputBase from './SInputBase.vue'
 
 export type Size = 'mini' | 'small' | 'medium'
 export type Align = 'left' | 'center' | 'right'
+export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
 
 const props = defineProps<{
   size?: Size
@@ -16,6 +18,9 @@ const props = defineProps<{
   help?: string
   type?: string
   placeholder?: string
+  checkIcon?: IconifyIcon | DefineComponent
+  checkText?: string
+  checkColor?: Color
   icon?: any
   align?: Align
   disabled?: boolean
@@ -26,7 +31,7 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
-  (e: 'update:modelValue', value: string | null): void
+  (e: 'update:model-value', value: string | null): void
   (e: 'input', value: string | null): void
   (e: 'blur', value: string | null): void
   (e: 'enter', value: string | null): void
@@ -58,7 +63,7 @@ function emitBlur(e: FocusEvent): void {
 
   props.validation?.$touch()
 
-  emit('update:modelValue', value)
+  emit('update:model-value', value)
   emit('blur', value)
 
   isFocused.value = false
@@ -66,7 +71,7 @@ function emitBlur(e: FocusEvent): void {
 
 function emitInput(e: Event): void {
   const v = getValue(e)
-  emit('update:modelValue', v)
+  emit('update:model-value', v)
   emit('input', v)
 }
 
@@ -75,7 +80,7 @@ function emitEnter(e: KeyboardEvent): void {
 
   props.validation?.$touch()
 
-  emit('update:modelValue', value)
+  emit('update:model-value', value)
   emit('enter', value)
 }
 
@@ -95,17 +100,24 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
     :note="note"
     :info="info"
     :help="help"
+    :check-icon="checkIcon"
+    :check-text="checkText"
+    :check-color="checkColor"
     :hide-error="hideError"
     :validation="validation"
   >
     <div class="box" :class="{ focus: isFocused }" @click="focus">
+      <div v-if="$slots['addon-before']" class="addon before">
+        <slot name="addon-before" />
+      </div>
+
       <div v-if="icon" class="icon">
         <SIcon :icon="icon" class="icon-svg" />
       </div>
 
       <div class="value">
         <input
-          class="input"
+          class="input entity"
           :class="{ hide: showDisplay }"
           :id="name"
           :type="type ?? 'text'"
@@ -118,38 +130,29 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
           @input="emitInput"
           @keypress.enter="emitEnter"
         >
-        <div v-if="showDisplay" class="display">
+        <div v-if="showDisplay" class="input display">
           {{ displayValue }}
         </div>
       </div>
+
+      <div v-if="$slots['addon-after']" class="addon after">
+        <slot name="addon-after" />
+      </div>
     </div>
     <template v-if="$slots.info" #info><slot name="info" /></template>
   </SInputBase>
 </template>
 
-<style lang="postcss" scoped>
+<style scoped lang="postcss">
 .SInputText.mini {
-  .box {
-    padding: 0 8px;
-    min-height: 32px;
-  }
+  .box   { min-height: 32px; }
+  .value { min-height: 30px; }
 
-  .value,
-  .input,
-  .display {
-    min-height: 30px;
-  }
-
-  .input,
-  .display {
-    padding: 3px 0;
+  .input {
+    padding: 3px 8px;
     letter-spacing: 0;
     line-height: 24px;
-    font-size: 14px;
-  }
-
-  .display {
-    top: 0;
+    font-size: var(--input-font-size, var(--input-mini-font-size));
   }
 
   .icon {
@@ -161,30 +164,35 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
     width: 16px;
     height: 16px;
   }
-}
 
-.SInputText.small {
-  .box {
-    padding: 0 12px;
-    min-height: 40px;
+  :slotted(.SInputAddon) .action {
+    padding: 0 10px;
+    font-size: 12px;
+    font-weight: 500;
   }
 
-  .value,
-  .input,
-  .display {
-    min-height: 38px;
+  :slotted(.SInputAddon) .action-icon {
+    width: 16px;
+    height: 16px;
   }
 
-  .input,
-  .display {
-    padding: 5px 0;
-    letter-spacing: 0;
-    line-height: 24px;
-    font-size: 16px;
+  :slotted(.SInputAddon) .caret {
+    margin-left: 4px;
+    margin-right: -2px;
+    width: 10px;
+    height: 10px;
   }
+}
 
-  .display {
-    top: 2px;
+.SInputText.small {
+  .box   { min-height: 40px; }
+  .value { min-height: 38px; }
+
+  .input {
+    padding: 7px 12px;
+    letter-spacing: 0;
+    line-height: 24px;
+    font-size: var(--input-font-size, var(--input-small-font-size));
   }
 
   .icon {
@@ -196,30 +204,35 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
     width: 16px;
     height: 16px;
   }
-}
 
-.SInputText.medium {
-  .box {
+  :slotted(.SInputAddon) .action {
     padding: 0 12px;
-    min-height: 48px;
+    font-size: 14px;
+    font-weight: 500;
+  }
+
+  :slotted(.SInputAddon) .action-icon {
+    width: 16px;
+    height: 16px;
   }
 
-  .value,
-  .input,
-  .display {
-    min-height: 46px;
+  :slotted(.SInputAddon) .caret {
+    margin-left: 6px;
+    margin-right: -2px;
+    width: 12px;
+    height: 12px;
   }
+}
+
+.SInputText.medium {
+  .box   { min-height: 48px; }
+  .value { min-height: 46px; }
 
-  .input,
-  .display {
-    padding: 11px 0;
+  .input {
+    padding: 11px 12px;
     letter-spacing: 0;
     line-height: 24px;
-    font-size: 16px;
-  }
-
-  .display {
-    top: 0;
+    font-size: var(--input-font-size, var(--input-medium-font-size));
   }
 
   .icon {
@@ -231,48 +244,51 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
     width: 18px;
     height: 18px;
   }
-}
 
-.SInputText.disabled {
-  .input {
-    background-color: var(--input-outlined-bg-disabled);
+  :slotted(.SInputAddon) .action {
+    padding: 0 14px;
+    font-size: 14px;
+    font-weight: 500;
   }
 
-  .box:hover .input {
-    cursor: not-allowed;
-    border-color: var(--input-outlined-border);
+  :slotted(.SInputAddon) .action-icon {
+    width: 16px;
+    height: 16px;
   }
-}
 
-.SInputText.left {
-  .input,
-  .display {
-    text-align: left;
+  :slotted(.SInputAddon) .caret {
+    margin-left: 6px;
+    margin-right: -2px;
+    width: 12px;
+    height: 12px;
   }
 }
 
-.SInputText.center {
-  .input,
-  .display {
-    text-align: center;
+.SInputText.disabled {
+  .box,
+  .box:hover,
+  .box:hover:has(.SInputAddon:is(.focused, :hover)),
+  .box:hover.focus,
+  .box.focus:has(.SInputAddon:is(.focused, :hover)),
+  .box:hover.focus:has(.SInputAddon:is(.focused, :hover)) {
+    border-color: var(--input-disabled-border-color);
+    background-color: var(--input-disabled-bg-color);
   }
-}
 
-.SInputText.right {
-  .input,
-  .display {
-    text-align: right;
+  .box:hover .input {
+    cursor: not-allowed;
   }
 }
 
-.SInputText.has-error {
-  .box {
-    border-color: var(--c-danger);
+.SInputText.left .input   { text-align: left; }
+.SInputText.center .input { text-align: center; }
+.SInputText.right .input  { text-align: right; }
 
-    &:hover,
-    &:focus {
-      border-color: var(--c-danger);
-    }
+.SInputText.has-error {
+  .box,
+  .box:hover,
+  .box:focus {
+    border-color: var(--input-error-border-color);
   }
 }
 
@@ -281,28 +297,24 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
   display: flex;
   flex-grow: 1;
   max-width: 100%;
-  border: 1px solid var(--c-divider);
+  border: 1px solid var(--input-border-color);
   border-radius: 6px;
-  background-color: var(--c-bg);
-  cursor: text;
+  background-color: var(--input-bg-color);
   transition: border-color 0.25s;
 
   &:hover {
-    border-color: var(--c-black);
+    border-color: var(--input-hover-border-color);
   }
 
-  &.focus,
-  &:hover.focus {
-    border-color: var(--c-info);
+  &:hover:has(.SInputAddon:is(.focused, :hover)) {
+    border-color: var(--input-border-color);
   }
 
-  .dark &:hover {
-    border-color: var(--c-gray);
-  }
-
-  .dark &.focus,
-  .dark &:hover.focus {
-    border-color: var(--c-info);
+  &.focus,
+  &:hover.focus,
+  &.focus:has(.SInputAddon:is(.focused, :hover)),
+  &:hover.focus:has(.SInputAddon:is(.focused, :hover)) {
+    border-color: var(--input-focus-border-color);
   }
 }
 
@@ -312,8 +324,15 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
 }
 
 .input {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   width: 100%;
+  color: var(--input-value-color);
   background-color: transparent;
+  cursor: text;
 
   &.hide,
   &.hide::placeholder {
@@ -321,13 +340,15 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
   }
 
   &::placeholder {
-    font-weight: 500;
-    color: var(--c-text-3);
+    color: var(--input-placeholder-color);
   }
 }
 
 .display {
   position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
   left: 0;
   width: 100%;
 }
@@ -342,4 +363,35 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
 .icon-svg {
   fill: currentColor;
 }
+
+.addon {
+  display: flex;
+  flex-shrink: 0;
+}
+
+.addon :slotted(.SInputAddon) .caret {
+  color: var(--c-text-2);
+}
+
+.addon.before :slotted(.SInputAddon) {
+  .action {
+    border-right: 1px solid var(--input-border-color);
+    border-radius: 5px 0 0 5px;
+  }
+
+  .dialog {
+    left: 0;
+  }
+}
+
+.addon.after :slotted(.SInputAddon) {
+  .action {
+    border-left: 1px solid var(--input-border-color);
+    border-radius: 0 5px 5px 0;
+  }
+
+  .dialog {
+    right: 0;
+  }
+}
 </style>

package/lib/components/SInputTextarea.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { IconifyIcon } from '@iconify/vue/dist/offline'
+import { DefineComponent, computed } from 'vue'
 import { Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 
 export type Size = 'mini' | 'small' | 'medium'
+export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
 
 const props = defineProps<{
   size?: Size
@@ -12,6 +14,9 @@ const props = defineProps<{
   info?: string
   note?: string
   help?: string
+  checkIcon?: IconifyIcon | DefineComponent
+  checkText?: string
+  checkColor?: Color
   placeholder?: string
   disabled?: boolean
   rows?: number
@@ -48,6 +53,9 @@ function emitBlur(e: FocusEvent): void {
     :note="note"
     :info="info"
     :help="help"
+    :check-icon="checkIcon"
+    :check-text="checkText"
+    :check-color="checkColor"
     :hide-error="hideError"
     :validation="validation"
   >

package/lib/components/SInputYMD.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { IconifyIcon } from '@iconify/vue/dist/offline'
+import { DefineComponent, ref } from 'vue'
 import { Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 
 export type Size = 'mini' | 'small' | 'medium'
+export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
 
 export interface Value {
   year: number | null
@@ -19,6 +21,9 @@ const props = defineProps<{
   info?: string
   note?: string
   help?: string
+  checkIcon?: IconifyIcon | DefineComponent
+  checkText?: string
+  checkColor?: Color
   noYear?: boolean
   noMonth?: boolean
   noDate?: boolean
@@ -104,6 +109,9 @@ function createRequiredTouched(): boolean[] {
     :note="note"
     :info="info"
     :help="help"
+    :check-icon="checkIcon"
+    :check-text="checkText"
+    :check-color="checkColor"
     :hide-error="hideError"
     :validation="validation"
   >

package/lib/composables/Dropdown.ts

@@ -1,4 +1,5 @@
-import { MaybeRef } from '@vueuse/core'
+import { MaybeRef, useElementBounding, useWindowSize } from '@vueuse/core'
+import { Ref, ref, unref } from 'vue'
 
 export type DropdownSection =
   | DropdownSectionMenu
@@ -55,6 +56,70 @@ export interface DropdownSectionFilterOptionAvatar extends DropdownSectionFilter
   image?: string | null
 }
 
+export interface ManualDropdownPosition {
+  position: Ref<'top' | 'bottom'>
+  update(): void
+}
+
 export function createDropdown(section: DropdownSection[]): DropdownSection[] {
   return section
 }
+
+export function useManualDropdownPosition(
+  container?: Ref<any>,
+  initPosition?: 'top' | 'bottom'
+): ManualDropdownPosition {
+  const el = container ?? ref<any>(null)
+
+  const { top, bottom } = useElementBounding(el)
+  const { height } = useWindowSize()
+
+  const position = ref<'top' | 'bottom'>('bottom')
+
+  const dialogHeight = 400
+
+  function update(): void {
+    if (initPosition) {
+      return
+    }
+
+    // If the space top of the input is not enough to show dialog, just show
+    // the dialog at the bottom of the input.
+    if (top.value < dialogHeight) {
+      position.value = 'bottom'
+      return
+    }
+
+    // Else show dialog depending on the space bottom of the input.
+    if (bottom.value + dialogHeight <= height.value) {
+      position.value = 'bottom'
+      return
+    }
+
+    position.value = 'top'
+  }
+
+  return {
+    position,
+    update
+  }
+}
+
+export function getSelectedOption(
+  sections: DropdownSection[]
+): DropdownSectionFilterOption | null {
+  for (const section of sections) {
+    if (section.type === 'filter') {
+      const options = unref(section.options)
+      const selected = unref(section.selected)
+
+      for (const option of options) {
+        if (option.value === selected) {
+          return option
+        }
+      }
+    }
+  }
+
+  return null
+}

package/lib/composables/Flyout.ts

@@ -1,7 +1,7 @@
-import { ref, watch } from 'vue'
+import { Ref, ref, watch } from 'vue'
 
-export function useFlyout() {
-  const container = ref<any>(null)
+export function useFlyout(container?: Ref<any>) {
+  const el = container ?? ref<any>(null)
 
   const isOpen = ref(false)
 
@@ -18,7 +18,7 @@ export function useFlyout() {
   }
 
   function closeOnClickOutside(event: any) {
-    if (!container.value.contains(event.target) && isVisible(container.value)) {
+    if (!el.value.contains(event.target) && isVisible(el.value)) {
       isOpen.value = false
     }
   }
@@ -37,7 +37,7 @@ export function useFlyout() {
   })
 
   return {
-    container,
+    container: el,
     isOpen,
     open,
     close,

package/lib/styles/variables.css

@@ -651,6 +651,7 @@
   --input-focus-border-color: var(--c-info-light);
   --input-error-text-color: var(--c-danger-text);
   --input-error-border-color: var(--c-danger-light);
+  --input-disabled-border-color: var(--c-divider-1);
   --input-disabled-value-color: var(--c-text-1);
   --input-disabled-bg-color: var(--c-mute);