@globalbrain/sefirot 2.20.0 → 2.22.0

package/lib/components/SDropdown.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { DropdownSection } from '../composables/Dropdown'
+import type { DropdownSection } from '../composables/Dropdown'
 import SDropdownSection from './SDropdownSection.vue'
 
 defineProps<{

package/lib/components/SDropdownSection.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { DropdownSection } from '../composables/Dropdown'
+import type { DropdownSection } from '../composables/Dropdown'
+import SDropdownSectionActions from './SDropdownSectionActions.vue'
+import SDropdownSectionComponent from './SDropdownSectionComponent.vue'
 import SDropdownSectionFilter from './SDropdownSectionFilter.vue'
 import SDropdownSectionMenu from './SDropdownSectionMenu.vue'
 
@@ -20,6 +22,14 @@ defineProps<{
     :options="section.options"
     :on-click="section.onClick"
   />
+  <SDropdownSectionActions
+    v-if="section.type === 'actions'"
+    :options="section.options"
+  />
+  <SDropdownSectionComponent
+    v-else-if="section.type === 'component'"
+    :comp="section.component"
+  />
 </template>
 
 <style scoped lang="postcss">

package/lib/components/SDropdownSectionActions.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import type { DropdownSectionActionsOption } from '../composables/Dropdown'
+
+defineProps<{
+  options: DropdownSectionActionsOption[]
+}>()
+</script>
+
+<template>
+  <div class="SDropdownSectionActions">
+    <div v-for="option in options" :key="option.label" class="item">
+      <button class="button" :class="[option.mode ?? 'neutral']" @click="option.onClick">
+        {{ option.label }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.SDropdownSectionActions {
+  display: flex;
+  justify-content: flex-end;
+  padding: 8px;
+}
+
+.button {
+  display: block;
+  border-radius: 6px;
+  padding: 0 8px;
+  width: 100%;
+  text-align: left;
+  line-height: 32px;
+  font-size: 12px;
+  font-weight: 500;
+  transition: color 0.25s, background-color 0.25s;
+
+  &.neutral        { color: var(--button-text-neutral-text-color); }
+  &.neutral:hover  { background-color: var(--button-text-neutral-hover-bg-color); }
+  &.neutral:active { background-color: var(--button-text-neutral-active-bg-color); }
+
+  &.mute        { color: var(--button-text-mute-text-color); }
+  &.mute:hover  { background-color: var(--button-text-mute-hover-bg-color); }
+  &.mute:active { background-color: var(--button-text-mute-active-bg-color); }
+
+  &.info        { color: var(--button-text-info-text-color); }
+  &.info:hover  { background-color: var(--button-text-info-hover-bg-color); }
+  &.info:active { background-color: var(--button-text-info-active-bg-color); }
+
+  &.success        { color: var(--button-text-success-text-color); }
+  &.success:hover  { background-color: var(--button-text-success-hover-bg-color); }
+  &.success:active { background-color: var(--button-text-success-active-bg-color); }
+
+  &.warning        { color: var(--button-text-warning-text-color); }
+  &.warning:hover  { background-color: var(--button-text-warning-hover-bg-color); }
+  &.warning:active { background-color: var(--button-text-warning-active-bg-color); }
+
+  &.danger        { color: var(--button-text-danger-text-color); }
+  &.danger:hover  { background-color: var(--button-text-danger-hover-bg-color); }
+  &.danger:active { background-color: var(--button-text-danger-active-bg-color); }
+}
+</style>

package/lib/components/SDropdownSectionComponent.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import type { DefineComponent } from 'vue'
+
+defineProps<{
+  comp: DefineComponent
+}>()
+</script>
+
+<template>
+  <Component :is="comp" />
+</template>

package/lib/components/SDropdownSectionFilter.vue

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

package/lib/components/SDropdownSectionFilterItem.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { DropdownSectionFilterOption } from '../composables/Dropdown'
+import type { DropdownSectionFilterOption } from '../composables/Dropdown'
 import SDropdownSectionFilterItemAvatar from './SDropdownSectionFilterItemAvatar.vue'
 import SDropdownSectionFilterItemText from './SDropdownSectionFilterItemText.vue'
 

package/lib/components/SDropdownSectionMenu.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { DropdownSectionMenuOption } from '../composables/Dropdown'
+import type { DropdownSectionMenuOption } from '../composables/Dropdown'
 
 defineProps<{
   options: DropdownSectionMenuOption[]

package/lib/components/SIcon.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Icon, IconifyIcon } from '@iconify/vue/dist/offline'
-import { DefineComponent } from 'vue'
+import type { DefineComponent } from 'vue'
 
 defineProps<{
   icon: IconifyIcon | DefineComponent

package/lib/components/SInputAddon.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import IconCaretDown from '@iconify-icons/ph/caret-down-bold'
+import type { DropdownSection } from 'sefirot/composables/Dropdown'
 import {
-  DropdownSection,
   getSelectedOption,
   useManualDropdownPosition
 } from 'sefirot/composables/Dropdown'

package/lib/components/SInputBase.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
+import type { IconifyIcon } from '@iconify/vue/dist/offline'
 import IconQuestion from '@iconify-icons/ph/question'
-import { IconifyIcon } from '@iconify/vue/dist/offline'
-import { DefineComponent, computed, unref, useSlots } from 'vue'
-import { Validatable } from '../composables/Validation'
+import type { DefineComponent } from 'vue'
+import { computed, unref, useSlots } from 'vue'
+import type { Validatable } from '../composables/Validation'
 import SIcon from './SIcon.vue'
 import STooltip from './STooltip.vue'
 
@@ -122,11 +123,13 @@ function getErrorMsg(validation: Validatable) {
   display: flex;
   align-items: center;
   gap: 4px;
+  transition: color 0.25s;
 }
 
 .label-text-value {
   font-weight: 500;
   color: var(--input-label-color);
+  transition: color 0.25s;
 }
 
 .label-text-info {

package/lib/components/SInputCheckbox.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
+import type { IconifyIcon } from '@iconify/vue/dist/offline'
 import IconCheck from '@iconify-icons/ph/check'
-import { IconifyIcon } from '@iconify/vue/dist/offline'
-import { DefineComponent, PropType } from 'vue'
-import { Validatable } from '../composables/Validation'
+import type { DefineComponent, PropType } from 'vue'
+import type { Validatable } from '../composables/Validation'
 import SIcon from './SIcon.vue'
 import SInputBase from './SInputBase.vue'
 

package/lib/components/SInputCheckboxes.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { IconifyIcon } from '@iconify/vue/dist/offline'
-import { DefineComponent, PropType } from 'vue'
+import type { IconifyIcon } from '@iconify/vue/dist/offline'
+import type { DefineComponent, PropType } from 'vue'
 import SInputBase from './SInputBase.vue'
 import SInputCheckbox from './SInputCheckbox.vue'
 

package/lib/components/SInputDate.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
-import { IconifyIcon } from '@iconify/vue/dist/offline'
+import type { IconifyIcon } from '@iconify/vue/dist/offline'
 import { DatePicker } from 'v-calendar'
-import { DefineComponent, computed } from 'vue'
-import { Validatable } from '../composables/Validation'
-import { Day, day } from '../support/Day'
+import type { DefineComponent } from 'vue'
+import { computed } from 'vue'
+import type { Validatable } from '../composables/Validation'
+import type { Day } from '../support/Day'
+import { day } from '../support/Day'
 import SInputBase from './SInputBase.vue'
 
 export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'

package/lib/components/SInputDropdown.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
+import type { IconifyIcon } from '@iconify/vue/dist/offline'
 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 { DefineComponent, computed, ref } from 'vue'
-import { DropdownSectionFilter, useManualDropdownPosition } from '../composables/Dropdown'
+import type { DefineComponent } from 'vue'
+import { computed, ref } from 'vue'
+import type { DropdownSectionFilter } from '../composables/Dropdown'
+import { useManualDropdownPosition } from '../composables/Dropdown'
 import { useFlyout } from '../composables/Flyout'
-import { Validatable } from '../composables/Validation'
+import type { Validatable } from '../composables/Validation'
 import { isArray } from '../support/Utils'
 import SDropdown from './SDropdown.vue'
 import SIcon from './SIcon.vue'

package/lib/components/SInputFile.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { IconifyIcon } from '@iconify/vue/dist/offline'
-import { DefineComponent, computed, ref } from 'vue'
-import { Validatable } from '../composables/Validation'
+import type { IconifyIcon } from '@iconify/vue/dist/offline'
+import type { DefineComponent } from 'vue'
+import { computed, ref } from 'vue'
+import type { Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 
 export type Size = 'mini' | 'small' | 'medium'

package/lib/components/SInputHMS.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { IconifyIcon } from '@iconify/vue/dist/offline'
-import { DefineComponent, computed, ref } from 'vue'
-import { Validatable } from '../composables/Validation'
+import type { IconifyIcon } from '@iconify/vue/dist/offline'
+import type { DefineComponent } from 'vue'
+import { computed, ref } from 'vue'
+import type { Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 
 export type Size = 'mini' | 'small' | 'medium'

package/lib/components/SInputNumber.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { IconifyIcon } from '@iconify/vue/dist/offline'
-import { DefineComponent, computed } from 'vue'
-import { Validatable } from '../composables/Validation'
+import type { IconifyIcon } from '@iconify/vue/dist/offline'
+import type { DefineComponent } from 'vue'
+import { computed } from 'vue'
+import type { Validatable } from '../composables/Validation'
 import { isNullish, isString } from '../support/Utils'
 import SInputText from './SInputText.vue'
 
@@ -40,7 +41,7 @@ const emit = defineEmits<{
 }>()
 
 const _value = computed(() => {
-  return props.modelValue !== undefined
+  return (props.modelValue !== undefined)
     ? props.modelValue
     : props.value !== undefined ? props.value : null
 })
@@ -72,7 +73,7 @@ const displayValue = computed(() => {
     return props.displayValue
   }
 
-  return !props.separator || valueWithSeparator.value === null
+  return (!props.separator || valueWithSeparator.value === null)
     ? null
     : valueWithSeparator.value
 })

package/lib/components/SInputRadio.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { IconifyIcon } from '@iconify/vue/dist/offline'
-import { DefineComponent } from 'vue'
-import { Validatable } from '../composables/Validation'
+import type { IconifyIcon } from '@iconify/vue/dist/offline'
+import type { DefineComponent } from 'vue'
+import type { Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 
 export type Size = 'mini' | 'small' | 'medium'

package/lib/components/SInputRadios.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { IconifyIcon } from '@iconify/vue/dist/offline'
-import { DefineComponent, computed } from 'vue'
-import { Validatable } from '../composables/Validation'
+import type { IconifyIcon } from '@iconify/vue/dist/offline'
+import type { DefineComponent } from 'vue'
+import { computed } from 'vue'
+import type { Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 import SInputRadio from './SInputRadio.vue'
 

package/lib/components/SInputSelect.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
+import type { IconifyIcon } from '@iconify/vue/dist/offline'
 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 { DefineComponent, computed, ref } from 'vue'
-import { Validatable } from '../composables/Validation'
+import type { DefineComponent } from 'vue'
+import { computed, ref } from 'vue'
+import type { Validatable } from '../composables/Validation'
 import SIcon from './SIcon.vue'
 import SInputBase from './SInputBase.vue'
 

package/lib/components/SInputSwitch.vue

@@ -1,40 +1,58 @@
 <script setup lang="ts">
-import { IconifyIcon } from '@iconify/vue/dist/offline'
-import { DefineComponent, computed } from 'vue'
-import { Validatable } from '../composables/Validation'
+import type { IconifyIcon } from '@iconify/vue/dist/offline'
+import type { DefineComponent } from 'vue'
+import { computed } from 'vue'
+import type { 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 type ActiveColor = 'info' | 'success' | 'warning' | 'danger'
+export type CheckColor = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   size?: Size
   name?: string
   label?: string
   info?: string
   note?: string
   text?: string
+  color?: ActiveColor
   help?: string
   checkIcon?: IconifyIcon | DefineComponent
   checkText?: string
-  checkColor?: Color
+  checkColor?: CheckColor
   disabled?: boolean
-  modelValue: boolean
+  value?: boolean
+  modelValue?: boolean
   hideError?: boolean
   validation?: Validatable
-}>()
+}>(), {
+  value: undefined,
+  modelValue: undefined
+})
 
 const emit = defineEmits<{
-  (e: 'update:modelValue', value: boolean): void
+  (e: 'update:model-value', value: boolean): void
+  (e: 'change', value: boolean): void
 }>()
 
+const _value = computed(() => {
+  return props.modelValue !== undefined
+    ? props.modelValue
+    : props.value !== undefined ? props.value : false
+})
+
 const classes = computed(() => [
-  [props.size ?? 'small'],
+  props.size ?? 'small',
+  props.color ?? 'info',
   { disabled: props.disabled }
 ])
 
 function emitChange(): void {
-  !props.disabled && emit('update:modelValue', !props.modelValue)
+  if (!props.disabled) {
+    emit('update:model-value', !_value.value)
+    emit('change', !_value.value)
+  }
 }
 </script>
 
@@ -53,11 +71,10 @@ function emitChange(): void {
     :hide-error="hideError"
   >
     <div class="container">
-      <div class="input" :class="{ on: modelValue }" role="button" @click="emitChange">
+      <div class="input" :class="{ on: _value }" role="button" @click="emitChange">
         <p v-if="text" class="text">{{ text }}</p>
-
         <div class="box">
-          <div class="check" />
+          <div class="toggle" />
         </div>
       </div>
     </div>
@@ -65,7 +82,185 @@ function emitChange(): void {
   </SInputBase>
 </template>
 
-<style lang="postcss" scoped>
+<style scoped lang="postcss">
+.SInputSwitch.mini {
+  .input {
+    height: 32px;
+  }
+
+  .text {
+    line-height: 20px;
+    font-size: 14px;
+  }
+
+  .box {
+    border-radius: 9px;
+    width: 32px;
+    height: 18px;
+  }
+
+  .toggle {
+    top: 1px;
+    left: 1px;
+    width: 14px;
+    height: 14px;
+  }
+
+  .input.on .toggle {
+    transform: translateX(14px);
+  }
+}
+
+.SInputSwitch.small {
+  .input {
+    height: 32px;
+  }
+
+  .text {
+    line-height: 20px;
+    font-size: 14px;
+  }
+
+  .box {
+    border-radius: 11px;
+    width: 40px;
+    height: 22px;
+  }
+
+  .toggle {
+    top: 2px;
+    left: 2px;
+    width: 16px;
+    height: 16px;
+  }
+
+  .input.on .toggle {
+    transform: translateX(18px);
+  }
+}
+
+.SInputSwitch.medium {
+  .input {
+    height: 32px;
+  }
+
+  .text {
+    line-height: 20px;
+    font-size: 14px;
+  }
+
+  .box {
+    border-radius: 13px;
+    width: 46px;
+    height: 26px;
+  }
+
+  .toggle {
+    top: 3px;
+    left: 3px;
+    width: 18px;
+    height: 18px;
+  }
+
+  .input.on .toggle {
+    transform: translateX(20px);
+  }
+}
+
+.SInputSwitch.info {
+  .box:hover {
+    border-color: var(--c-info-light);
+  }
+
+  .input.on .box {
+    border-color: var(--c-info-light);
+    background-color: var(--c-info);
+  }
+}
+
+.SInputSwitch.success {
+  .box:hover {
+    border-color: var(--c-success-light);
+  }
+
+  .input.on .box {
+    border-color: var(--c-success-light);
+    background-color: var(--c-success);
+  }
+}
+
+.SInputSwitch.warning {
+  .box:hover {
+    border-color: var(--c-warning-light);
+  }
+
+  .input.on .box {
+    border-color: var(--c-warning-light);
+    background-color: var(--c-warning);
+  }
+}
+
+.SInputSwitch.danger {
+  .box:hover {
+    border-color: var(--c-danger-light);
+  }
+
+  .input.on .box {
+    border-color: var(--c-danger-light);
+    background-color: var(--c-danger);
+  }
+}
+
+.SInputSwitch.disabled {
+  .input {
+    cursor: not-allowed;
+  }
+
+  .box {
+    background-color: var(--input-switch-disabled-bg-color);
+  }
+
+  .box:hover {
+    border-color: var(--c-divider-1);
+  }
+
+  .toggle {
+    background-color: var(--input-switch-disabled-toggle-color);
+  }
+
+  .input.on .toggle {
+    opacity: 0.5;
+  }
+
+  &.info {
+    .input.on .box {
+      border-color: var(--c-info);
+      background-color: var(--c-info-dark);
+    }
+  }
+
+  &.success {
+    .input.on .box {
+      border-color: var(--c-success);
+      background-color: var(--c-success-dark);
+    }
+  }
+
+  &.warning {
+    .input.on .box {
+      border-color: var(--c-warning);
+      background-color: var(--c-warning-dark);
+    }
+  }
+
+  &.danger {
+    .input.on .box {
+      border-color: var(--c-danger);
+      background-color: var(--c-danger-dark);
+    }
+  }
+}
+
 .container {
   display: flex;
 }
@@ -76,11 +271,7 @@ function emitChange(): void {
   justify-content: space-between;
   align-items: center;
   width: 100%;
-  height: 32px;
-
-  &:hover {
-    .box { border-color: var(--c-info); }
-  }
+  cursor: pointer;
 }
 
 .input.on .box {
@@ -88,43 +279,28 @@ function emitChange(): void {
   background-color: var(--c-info);
 }
 
-.input.on .check {
+.input.on .toggle {
   background-color: var(--c-white);
-  transform: translateX(18px);
 }
 
 .text {
   flex-grow: 1;
   margin: 0;
   padding-right: 16px;
-  line-height: 20px;
-  font-size: 14px;
-  font-weight: 500;
 }
 
 .box {
   position: relative;
   flex-shrink: 0;
-  border: 1px solid var(--c-divider);
-  border-radius: 11px;
-  width: 40px;
-  height: 22px;
-  background-color: var(--c-bg-elv-down);
+  border: 1px solid var(--c-divider-1);
+  background-color: var(--input-switch-bg-color);
   transition: border-color 0.25s, background-color 0.25s, box-shadow 0.25s;
 }
 
-.check {
+.toggle {
   position: absolute;
   border-radius: 50%;
-  background-color: var(--c-black);
-  top: 2px;
-  left: 2px;
-  width: 16px;
-  height: 16px;
-  transition: background-color .25s, transform .25s;
-
-  .dark & {
-    background-color: var(--c-white);
-  }
+  background-color: var(--input-switch-toggle-color);
+  transition: background-color 0.25s, transform 0.25s;
 }
 </style>