@globalbrain/sefirot 2.14.1 → 2.16.0

package/lib/components/SInputAddon.vue

@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import IconCaretDown from '@iconify-icons/ph/caret-down-bold'
+import {
+  DropdownSection,
+  getSelectedOption,
+  useManualDropdownPosition
+} from 'sefirot/composables/Dropdown'
+import { useFlyout } from 'sefirot/composables/Flyout'
+import { computed, ref } from 'vue'
+import { isString } from '../support/Utils'
+import SDropdown from './SDropdown.vue'
+import SIcon from './SIcon.vue'
+
+const props = withDefaults(defineProps<{
+  label?: any
+  clickable?: boolean
+  dropdown?: DropdownSection[]
+  dropdownCaret?: boolean
+  dropdowpPosition?: 'top' | 'bottom'
+  disabled?: boolean
+}>(), {
+  clickable: true,
+  dropdown: () => [],
+  dropdownCaret: true
+})
+
+const emit = defineEmits<{
+  (e: 'click'): void
+}>()
+
+const container = ref<any>(null)
+
+const isFocused = ref(false)
+
+const classes = computed(() => [
+  { clickable: props.clickable },
+  { focused: isFocused.value },
+  { disabled: props.disabled }
+])
+
+const selectedOptionLabel = computed(() => {
+  return getSelectedOption(props.dropdown)?.label ?? null
+})
+
+const { isOpen, open } = useFlyout(container)
+const { position, update: updatePosition } = useManualDropdownPosition(container)
+
+function handleFocus() {
+  if (!props.disabled) {
+    isFocused.value = true
+  }
+}
+
+function handleBlur() {
+  if (!props.disabled) {
+    isFocused.value = false
+  }
+}
+
+function handleClickButton() {
+  if (!props.disabled) {
+    emit('click')
+
+    if (props.dropdown.length) {
+      updatePosition()
+      open()
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="SInputAddon" :class="classes" ref="container" @click.stop>
+    <component
+      :is="clickable ? 'button' : 'div'"
+      class="action"
+      :disabled="clickable ? props.disabled : null"
+      @focus="handleFocus"
+      @blur="handleBlur"
+      @click="handleClickButton"
+    >
+      <span class="action-label">
+        <SIcon
+          v-if="props.label && !isString(props.label)"
+          class="action-icon"
+          :icon="props.label"
+        />
+        <span v-else>
+          {{ props.label ?? selectedOptionLabel }}
+        </span>
+      </span>
+
+      <SIcon
+        v-if="props.dropdown.length && props.dropdownCaret"
+        class="caret"
+        :icon="IconCaretDown"
+      />
+    </component>
+
+    <div v-if="isOpen" class="dialog" :class="position">
+      <SDropdown :sections="dropdown" />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.SInputAddon {
+  position: relative;
+}
+
+.action {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  background-color: var(--button-fill-mute-bg-color);
+  transition: background-color 0.25s;
+
+  .SInputAddon.clickable &:hover,
+  .SInputAddon.clickable.focused & {
+    background-color: var(--button-fill-mute-hover-bg-color);
+  }
+
+  .SInputAddon.clickable &:active {
+    background-color: var(--button-fill-mute-active-bg-color);
+  }
+
+  .SInputAddon.disabled &,
+  .SInputAddon.disabled.clickable &:hover,
+  .SInputAddon.disabled.clickable &:active,
+  .SInputAddon.disabled.clickable.focused & {
+    background-color: var(--button-fill-mute-bg-color);
+    cursor: not-allowed;
+  }
+}
+
+.dialog {
+  position: absolute;
+  z-index: var(--z-index-dropdown);
+
+  &.top    { bottom: calc(100% + 8px); }
+  &.bottom { top: calc(100% + 8px); }
+}
+</style>

package/lib/components/SInputBase.vue

@@ -1,18 +1,24 @@
 <script setup lang="ts">
 import IconQuestion from '@iconify-icons/ph/question'
-import { computed, unref, useSlots } from 'vue'
+import { IconifyIcon } from '@iconify/vue/dist/offline'
+import { DefineComponent, computed, unref, useSlots } from 'vue'
 import { Validatable } from '../composables/Validation'
 import SIcon from './SIcon.vue'
 import STooltip from './STooltip.vue'
 
+type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
+
 const props = defineProps<{
   name?: string
   label?: string
   info?: string
   note?: string
   help?: string
-  hideError?: boolean
+  checkIcon?: IconifyIcon | DefineComponent
+  checkText?: string
+  checkColor?: Color
   validation?: Validatable
+  hideError?: boolean
 }>()
 
 const slots = useSlots()
@@ -63,6 +69,11 @@ function getErrorMsg(validation: Validatable) {
       </div>
 
       <span class="label-note">{{ note }}</span>
+
+      <span v-if="checkIcon || checkText" class="check" :class="checkColor || 'neutral'">
+        <SIcon v-if="checkIcon" class="check-icon" :icon="checkIcon" />
+        <span v-if="checkText" class="check-text">{{ checkText }}</span>
+      </span>
     </label>
 
     <slot />
@@ -75,7 +86,7 @@ function getErrorMsg(validation: Validatable) {
   </div>
 </template>
 
-<style lang="postcss" scoped>
+<style scoped lang="postcss">
 .SInputBase.mini {
   .label            { padding-bottom: 6px; }
   .label-text-value { font-size: 12px; }
@@ -83,15 +94,15 @@ function getErrorMsg(validation: Validatable) {
 }
 
 .SInputBase.small {
-  .label            { padding-bottom: 8px; }
-  .label-text-value { font-size: 14px; }
-  .label-note       { transform: translateY(1px); }
+  .label              { padding-bottom: 8px; }
+  .label-text-value   { font-size: 14px; }
+  .label-note, .check { transform: translateY(1px); }
 }
 
 .SInputBase.medium {
-  .label            { padding-bottom: 8px; }
-  .label-text-value { font-size: 14px; }
-  .label-note       { transform: translateY(1px); }
+  .label              { padding-bottom: 8px; }
+  .label-text-value   { font-size: 14px; }
+  .label-note, .check { transform: translateY(1px); }
 }
 
 .SInputBase.has-error {
@@ -168,4 +179,31 @@ function getErrorMsg(validation: Validatable) {
 .help-text + .help-text {
   padding: 0;
 }
+
+.check {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin-left: auto;
+  line-height: 16px;
+  font-size: 12px;
+
+  &.neutral { color: var(--c-text-1); }
+  &.mute    { color: var(--c-text-2); }
+  &.info    { color: var(--c-info-text); }
+  &.success { color: var(--c-success-text); }
+  &.warning { color: var(--c-warning-text); }
+  &.danger  { color: var(--c-danger-text); }
+}
+
+.check-icon {
+  width: 14px;
+  height: 14px;
+}
+
+.check-icon.SSpinner {
+  margin: -4px;
+  width: 24px;
+  height: 24px;
+}
 </style>

package/lib/components/SInputCheckbox.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import IconCheck from '@iconify-icons/ph/check'
-import { PropType } from 'vue'
+import { IconifyIcon } from '@iconify/vue/dist/offline'
+import { DefineComponent, PropType } from 'vue'
 import { Validatable } from '../composables/Validation'
 import SIcon from './SIcon.vue'
 import SInputBase from './SInputBase.vue'
 
-type Size = 'mini' | 'small' | 'medium'
+export type Size = 'mini' | 'small' | 'medium'
+export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
 
 const props = defineProps({
   size: { type: String as PropType<Size>, default: 'small' },
@@ -13,6 +15,9 @@ const props = defineProps({
   info: { type: String, default: null },
   note: { type: String, default: null },
   help: { type: String, default: null },
+  checkIcon: { type: Object as PropType<IconifyIcon | DefineComponent>, default: null },
+  checkText: { type: String, default: null },
+  checkColor: { type: String as PropType<Color>, default: null },
   text: { type: String, required: true },
   modelValue: { type: Boolean, required: true },
   validation: { type: Object as PropType<Validatable>, default: null }
@@ -33,6 +38,9 @@ function emitChange() {
     :note="note"
     :info="info"
     :help="help"
+    :check-icon="checkIcon"
+    :check-text="checkText"
+    :check-color="checkColor"
     :validation="validation"
   >
     <div class="container">

package/lib/components/SInputCheckboxes.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
-import { PropType } from 'vue'
+import { IconifyIcon } from '@iconify/vue/dist/offline'
+import { DefineComponent, PropType } from 'vue'
 import SInputBase from './SInputBase.vue'
 import SInputCheckbox from './SInputCheckbox.vue'
 
-type Size = 'mini' | 'small' | 'medium'
+export type Size = 'mini' | 'small' | 'medium'
+export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
 
 interface CheckboxOption {
   label: string
@@ -17,6 +19,9 @@ const props = defineProps({
   info: { type: String, default: null },
   note: { type: String, default: null },
   help: { type: String, default: null },
+  checkIcon: { type: Object as PropType<IconifyIcon | DefineComponent>, default: null },
+  checkText: { type: String, default: null },
+  checkColor: { type: String as PropType<Color>, default: null },
   options: { type: Array as PropType<CheckboxOption[]>, required: true },
   modelValue: { type: Array, required: true }
 })
@@ -45,6 +50,9 @@ function handleChange(value: unknown): void {
     :note="note"
     :info="info"
     :help="help"
+    :check-icon="checkIcon"
+    :check-text="checkText"
+    :check-color="checkColor"
   >
     <div class="container">
       <div class="row">

package/lib/components/SInputDate.vue

@@ -1,19 +1,25 @@
 <script setup lang="ts">
+import { IconifyIcon } from '@iconify/vue/dist/offline'
 import { DatePicker } from 'v-calendar'
-import { computed } from 'vue'
+import { DefineComponent, computed } from 'vue'
 import { Validatable } from '../composables/Validation'
 import { Day, day } from '../support/Day'
 import SInputBase from './SInputBase.vue'
 
+export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
+
 const props = defineProps<{
   name?: string
   label?: string
   info?: string
   note?: string
   help?: string
-  hideError?: boolean
+  checkIcon?: IconifyIcon | DefineComponent
+  checkText?: string
+  checkColor?: Color
   modelValue: Day | null
   validation?: Validatable
+  hideError?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -45,6 +51,9 @@ function emitBlur() {
     :note="note"
     :info="info"
     :help="help"
+    :check-icon="checkIcon"
+    :check-text="checkText"
+    :check-color="checkColor"
     :hide-error="hideError"
     :validation="validation"
   >

package/lib/components/SInputDropdown.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import IconCaretDown from '@iconify-icons/ph/caret-down-bold'
 import IconCaretUp from '@iconify-icons/ph/caret-up-bold'
+import { IconifyIcon } from '@iconify/vue/dist/offline'
 import xor from 'lodash-es/xor'
-import { computed } from 'vue'
-import { DropdownSectionFilter } from '../composables/Dropdown'
+import { DefineComponent, computed, ref } from 'vue'
+import { DropdownSectionFilter, useManualDropdownPosition } from '../composables/Dropdown'
 import { useFlyout } from '../composables/Flyout'
 import { Validatable } from '../composables/Validation'
 import { isArray } from '../support/Utils'
@@ -13,6 +14,8 @@ import SInputBase from './SInputBase.vue'
 import SInputDropdownItem from './SInputDropdownItem.vue'
 
 export type Size = 'mini' | 'small' | 'medium'
+export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
+
 export type PrimitiveValue = string | number | boolean | null
 export type ArrayValue = (string | number | boolean)[]
 export type OptionValue = string | number | boolean
@@ -42,10 +45,14 @@ const props = defineProps<{
   note?: string
   help?: string
   placeholder?: string
+  checkIcon?: IconifyIcon | DefineComponent
+  checkText?: string
+  checkColor?: Color
+  options: Option[]
+  position?: 'top' | 'bottom'
   noSearch?: boolean
   nullable?: boolean
   closeOnClick?: boolean
-  options: Option[]
   disabled?: boolean
   modelValue: PrimitiveValue | ArrayValue
   validation?: Validatable
@@ -55,7 +62,10 @@ const emit = defineEmits<{
   (e: 'update:modelValue', value: PrimitiveValue | ArrayValue): void
 }>()
 
-const { container, isOpen, open } = useFlyout()
+const container = ref<any>(null)
+
+const { isOpen, open } = useFlyout(container)
+const { position, update: updatePosition } = useManualDropdownPosition(container)
 
 const classes = computed(() => [
   props.size ?? 'small',
@@ -93,7 +103,10 @@ const removable = computed(() => {
 })
 
 async function handleOpen() {
-  !props.disabled && open()
+  if (!props.disabled) {
+    updatePosition()
+    open()
+  }
 }
 
 function handleSelect(value: OptionValue) {
@@ -131,6 +144,9 @@ function handleArray(value: OptionValue) {
     :note="note"
     :info="info"
     :help="help"
+    :check-icon="checkIcon"
+    :check-text="checkText"
+    :check-color="checkColor"
     :validation="validation"
   >
     <div class="container" ref="container">
@@ -161,7 +177,7 @@ function handleArray(value: OptionValue) {
         </div>
       </div>
 
-      <div v-if="isOpen" class="dropdown">
+      <div v-if="isOpen" class="dropdown" :class="position">
         <SDropdown :sections="dropdownOptions" />
       </div>
     </div>
@@ -169,7 +185,7 @@ function handleArray(value: OptionValue) {
   </SInputBase>
 </template>
 
-<style lang="postcss" scoped>
+<style scoped lang="postcss">
 .SInputDropdown.mini {
   .box {
     min-height: 32px;
@@ -301,8 +317,10 @@ function handleArray(value: OptionValue) {
 
 .dropdown {
   position: absolute;
-  top: calc(100% + 8px);
   left: 0;
   z-index: var(--z-index-dropdown);
+
+  &.top    { bottom: calc(100% + 8px); }
+  &.bottom { top: calc(100% + 8px); }
 }
 </style>

package/lib/components/SInputFile.vue

@@ -1,9 +1,11 @@
 <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 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<{
   help?: string
   text?: string
   placeholder?: string
+  checkIcon?: IconifyIcon | DefineComponent
+  checkText?: string
+  checkColor?: Color
   value?: File | null
   modelValue?: File | null
   hideError?: boolean
@@ -59,6 +64,9 @@ function onChange(e: Event) {
     :note="note"
     :info="info"
     :help="help"
+    :check-icon="checkIcon"
+    :check-text="checkText"
+    :check-color="checkColor"
     :validation="validation"
     :hide-error="hideError"
   >

package/lib/components/SInputHMS.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 {
   hour: string | null
@@ -19,6 +21,9 @@ const props = defineProps<{
   info?: string
   note?: string
   help?: string
+  checkIcon?: IconifyIcon | DefineComponent
+  checkText?: string
+  checkColor?: Color
   noHour?: boolean
   noMinute?: boolean
   noSecond?: boolean
@@ -114,6 +119,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/components/SInputNumber.vue

@@ -1,11 +1,13 @@
 <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 { isNullish } from '../support/Utils'
 import SInputText from './SInputText.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
@@ -15,6 +17,11 @@ const props = defineProps<{
   note?: string
   help?: string
   placeholder?: string
+  unitBefore?: string
+  unitAfter?: string
+  checkIcon?: IconifyIcon | DefineComponent
+  checkText?: string
+  checkColor?: Color
   align?: Align
   separator?: boolean
   disabled?: boolean
@@ -73,8 +80,13 @@ function emitUpdate(value: string | null) {
     :note="note"
     :info="info"
     :help="help"
-    :align="align"
     :placeholder="placeholder"
+    :unit-before="unitBefore"
+    :unit-after="unitAfter"
+    :check-icon="checkIcon"
+    :check-text="checkText"
+    :check-color="checkColor"
+    :align="align"
     :disabled="disabled"
     :hide-error="hideError"
     :display-value="displayValue"
@@ -84,5 +96,7 @@ function emitUpdate(value: string | null) {
     @input="emitUpdate"
   >
     <template v-if="$slots.info" #info><slot name="info" /></template>
+    <template v-if="$slots['addon-before']" #addon-before><slot name="addon-before" /></template>
+    <template v-if="$slots['addon-after']" #addon-after><slot name="addon-after" /></template>
   </SInputText>
 </template>

package/lib/components/SInputRadio.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
+import { IconifyIcon } from '@iconify/vue/dist/offline'
+import { DefineComponent } 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
@@ -11,6 +14,9 @@ const props = defineProps<{
   info?: string
   note?: string
   help?: string
+  checkIcon?: IconifyIcon | DefineComponent
+  checkText?: string
+  checkColor?: Color
   text: string
   modelValue: boolean
   validation?: Validatable
@@ -36,6 +42,9 @@ function onClick() {
     :note="note"
     :info="info"
     :help="help"
+    :check-icon="checkIcon"
+    :check-text="checkText"
+    :check-color="checkColor"
     :validation="validation"
     :hide-error="hideError"
   >

package/lib/components/SInputRadios.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 SInputRadio from './SInputRadio.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 = withDefaults(defineProps<{
   info?: string
   note?: string
   help?: string
+  checkIcon?: IconifyIcon | DefineComponent
+  checkText?: string
+  checkColor?: Color
   options: Option[]
   nullable?: boolean
   value?: string | number | boolean | null
@@ -75,6 +80,9 @@ function onChange(value: string | number | boolean) {
     :note="note"
     :info="info"
     :help="help"
+    :check-icon="checkIcon"
+    :check-text="checkText"
+    :check-color="checkColor"
     :hide-error="hideError"
     :validation="validation"
   >

package/lib/components/SInputSelect.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import IconCaretDown from '@iconify-icons/ph/caret-down-bold'
 import IconCaretUp from '@iconify-icons/ph/caret-up-bold'
-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 Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
 export type Value = string | number | boolean | null
 
 export interface Option {
@@ -22,6 +24,9 @@ const props = withDefaults(defineProps<{
   note?: string
   help?: string
   placeholder?: string
+  checkIcon?: IconifyIcon | DefineComponent
+  checkText?: string
+  checkColor?: Color
   options: Option[]
   nullable?: boolean
   disabled?: boolean
@@ -81,6 +86,9 @@ function emitChange(e: any): void {
     :note="note"
     :info="info"
     :help="help"
+    :check-icon="checkIcon"
+    :check-text="checkText"
+    :check-color="checkColor"
     :hide-error="hideError"
     :validation="validation"
   >