@globalbrain/sefirot 2.20.0 → 2.22.0

package/lib/components/SInputSwitches.vue

@@ -1,12 +1,13 @@
 <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 SInputSwitch from './SInputSwitch.vue'
 
 export type Size = 'mini' | 'small' | 'medium'
-export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
+export type CheckColor = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
 
 export interface Option {
   label: string
@@ -22,7 +23,7 @@ const props = defineProps<{
   help?: string
   checkIcon?: IconifyIcon | DefineComponent
   checkText?: string
-  checkColor?: Color
+  checkColor?: CheckColor
   options: Option[]
   disabled?: boolean
   modelValue: (string | number | boolean)[]

package/lib/components/SInputText.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 { isString } from '../support/Utils'
 import SIcon from './SIcon.vue'
 import SInputBase from './SInputBase.vue'

package/lib/components/SInputTextarea.vue

@@ -1,7 +1,7 @@
 <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 { computed } from 'vue'
+import type { Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 
 export type Size = 'mini' | 'small' | 'medium'
@@ -14,21 +14,30 @@ const props = defineProps<{
   info?: string
   note?: string
   help?: string
-  checkIcon?: IconifyIcon | DefineComponent
+  checkIcon?: IconifyIcon
   checkText?: string
   checkColor?: Color
   placeholder?: string
   disabled?: boolean
   rows?: number | 'fill'
-  modelValue: string | null
+  value?: string | null
+  modelValue?: string | null
   hideError?: boolean
   validation?: Validatable
 }>()
 
 const emit = defineEmits<{
-  (e: 'update:modelValue', value: string): void
+  (e: 'update:model-value', value: string | null): void
+  (e: 'input', value: string | null): void
+  (e: 'blur', value: string | null): void
 }>()
 
+const _value = computed(() => {
+  return props.modelValue !== undefined
+    ? props.modelValue
+    : props.value !== undefined ? props.value : null
+})
+
 const classes = computed(() => [
   props.size ?? 'small',
   { disabled: props.disabled },
@@ -36,12 +45,17 @@ const classes = computed(() => [
 ])
 
 function emitInput(e: Event): void {
-  emit('update:modelValue', (e.target as HTMLInputElement).value)
+  const v = (e.target as HTMLInputElement).value || null
+  emit('update:model-value', v)
+  emit('input', v)
 }
 
 function emitBlur(e: FocusEvent): void {
   props.validation?.$touch()
-  emit('update:modelValue', (e.target as HTMLInputElement).value)
+
+  const v = (e.target as HTMLInputElement).value || null
+  emit('update:model-value', v)
+  emit('blur', v)
 }
 </script>
 
@@ -67,7 +81,7 @@ function emitBlur(e: FocusEvent): void {
       :placeholder="placeholder"
       :rows="rows ?? 3"
       :disabled="disabled"
-      :value="modelValue ?? ''"
+      :value="_value ?? undefined"
       @input="emitInput"
       @blur="emitBlur"
     />
@@ -78,21 +92,21 @@ function emitBlur(e: FocusEvent): void {
 <style scoped lang="postcss">
 .SInputTextarea.mini {
   .input {
-    padding: 6px 12px;
+    padding: 6px 10px;
     width: 100%;
     min-height: 80px;
     line-height: 20px;
-    font-size: 14px;
+    font-size: var(--input-font-size, var(--input-mini-font-size));
   }
 }
 
 .SInputTextarea.small {
   .input {
-    padding: 12px;
+    padding: 7px 12px;
     width: 100%;
     min-height: 96px;
     line-height: 24px;
-    font-size: 16px;
+    font-size: var(--input-font-size, var(--input-small-font-size));
   }
 }
 
@@ -102,25 +116,27 @@ function emitBlur(e: FocusEvent): void {
     width: 100%;
     min-height: 96px;
     line-height: 24px;
-    font-size: 16px;
+    font-size: var(--input-font-size, var(--input-medium-font-size));
   }
 }
 
 .SInputTextarea.disabled {
   .input,
   .input:hover {
-    background-color: var(--input-disabled-bg);
+    border-color: var(--input-disabled-border-color);
+    color: var(--input-disabled-value-color);
+    background-color: var(--input-disabled-bg-color);
     cursor: not-allowed;
   }
 }
 
 .SInputTextarea.has-error {
   .input {
-    border-color: var(--c-danger);
+    border-color: var(--input-error-border-color);
 
     &:hover,
     &:focus {
-      border-color: var(--c-danger);
+      border-color: var(--input-error-border-color);
     }
   }
 }
@@ -128,34 +144,24 @@ function emitBlur(e: FocusEvent): void {
 .input {
   display: block;
   flex-grow: 1;
-  border: 1px solid var(--c-divider);
+  border: 1px solid var(--input-border-color);
   border-radius: 6px;
   width: 100%;
   font-weight: 400;
-  background-color: var(--c-bg);
+  background-color: var(--input-bg-color);
   transition: border-color 0.25s, background-color 0.25s;
 
   &::placeholder {
-    font-weight: 500;
-    color: var(--c-text-3);
+    color: var(--input-placeholder-color);
   }
 
   &:hover {
-    border-color: var(--c-black);
+    border-color: var(--input-hover-border-color);
   }
 
   &:focus,
   &:hover:focus {
-    border-color: var(--c-info);
-  }
-
-  .dark &:hover {
-    border-color: var(--c-gray);
-  }
-
-  .dark &:focus,
-  .dark &:hover:focus {
-    border-color: var(--c-info);
+    border-color: var(--input-focus-border-color);
   }
 
   &.fill {

package/lib/components/SInputYMD.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/SMarkdown.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, nextTick, ref, watch } from 'vue'
-import { LinkCallback, LinkSubscriberPayload, useLink, useMarkdown } from '../composables/Markdown'
+import type { LinkCallback, LinkSubscriberPayload } from '../composables/Markdown'
+import { useLink, useMarkdown } from '../composables/Markdown'
 
 const props = defineProps<{
   tag?: string

package/lib/components/SSheetFooterAction.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import SButton, { Mode, Type } from './SButton.vue'
+import type { Mode, Type } from './SButton.vue'
+import SButton from './SButton.vue'
 
 defineProps<{
   type?: Type

package/lib/components/SSnackbar.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import IconX from '@iconify-icons/ph/x'
-import { SnackbarAction, useSnackbars } from '../stores/Snackbars'
+import type { SnackbarAction } from '../stores/Snackbars'
+import { useSnackbars } from '../stores/Snackbars'
 import SButton from './SButton.vue'
 import SIcon from './SIcon.vue'
 

package/lib/components/SStep.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import IconCheck from '@iconify-icons/ph/check'
 import IconX from '@iconify-icons/ph/x'
-import { PropType } from 'vue'
-import { BarMode, StepStatus } from '../composables/Step'
+import type { PropType } from 'vue'
+import type { BarMode, StepStatus } from '../composables/Step'
 import SIcon from './SIcon.vue'
 
 defineProps({

package/lib/components/SSteps.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { PropType, computed } from 'vue'
-import { BarMode, Step } from '../composables/Step'
+import type { PropType } from 'vue'
+import { computed } from 'vue'
+import type { BarMode, Step } from '../composables/Step'
 import SStep from './SStep.vue'
 
 const props = defineProps({
@@ -19,7 +20,7 @@ function getBarLeftMode(index: number): BarMode | null {
   const current = props.steps[index]
   const prev = props.steps[index - 1]
 
-  return isActive(prev) && isActive(current) ? 'active' : 'mute'
+  return (isActive(prev) && isActive(current)) ? 'active' : 'mute'
 }
 
 function getBarRightMode(index: number): BarMode | null {
@@ -30,7 +31,7 @@ function getBarRightMode(index: number): BarMode | null {
   const current = props.steps[index]
   const next = props.steps[index + 1]
 
-  return isActive(current) && isActive(next) ? 'active' : 'mute'
+  return (isActive(current) && isActive(next)) ? 'active' : 'mute'
 }
 
 function isActive(step: Step): boolean {

package/lib/components/STable.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, reactive, ref, toRefs, watch } from 'vue'
-import { Table } from '../composables/Table'
+import type { Table } from '../composables/Table'
 import SSpinner from './SSpinner.vue'
 import STableCell from './STableCell.vue'
 import STableColumn from './STableColumn.vue'

package/lib/components/STableCell.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { TableCell } from '../composables/Table'
+import type { TableCell } from '../composables/Table'
 import STableCellAvatar from './STableCellAvatar.vue'
 import STableCellAvatars from './STableCellAvatars.vue'
 import STableCellDay from './STableCellDay.vue'

package/lib/components/STableCellAvatars.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { TableCellAvatarsOption } from '../composables/Table'
+import type { TableCellAvatarsOption } from '../composables/Table'
 import SAvatar from './SAvatar.vue'
 
 const props = defineProps<{

package/lib/components/STableCellDay.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Day } from '../support/Day'
+import type { Day } from '../support/Day'
 
 defineProps<{
   value?: Day | null

package/lib/components/STableCellPills.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { TableCellPillColor } from '../composables/Table'
+import type { TableCellPillColor } from '../composables/Table'
 import STableCellPill from './STableCellPill.vue'
 
 export interface Pill {

package/lib/components/STableColumn.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import IconDotsThree from '@iconify-icons/ph/dots-three'
 import { computed, nextTick, ref, unref, watch } from 'vue'
-import { DropdownSection } from '../composables/Dropdown'
+import type { DropdownSection } from '../composables/Dropdown'
 import { useFlyout } from '../composables/Flyout'
 import { isArray } from '../support/Utils'
 import SDropdown from './SDropdown.vue'

package/lib/components/STooltip.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-import { Position, useTooltip } from '../composables/Tooltip'
+import type { Position } from '../composables/Tooltip'
+import { useTooltip } from '../composables/Tooltip'
 import SMarkdown from './SMarkdown.vue'
 
 const props = defineProps<{

package/lib/composables/Data.ts

@@ -1,6 +1,7 @@
 import { watchOnce } from '@vueuse/core'
 import cloneDeep from 'lodash-es/cloneDeep'
-import { WatchSource, reactive } from 'vue'
+import type { WatchSource } from 'vue'
+import { reactive } from 'vue'
 import { isNullish, isObject } from '../support/Utils'
 
 export interface Data<T extends Record<string, any>> {

package/lib/composables/Dropdown.ts

@@ -1,11 +1,15 @@
-import { MaybeRef, useElementBounding, useWindowSize } from '@vueuse/core'
-import { Ref, ref, unref } from 'vue'
+import type { MaybeRef } from '@vueuse/core'
+import { useElementBounding, useWindowSize } from '@vueuse/core'
+import type { Ref } from 'vue'
+import { ref, unref } from 'vue'
 
 export type DropdownSection =
   | DropdownSectionMenu
   | DropdownSectionFilter
+  | DropdownSectionComponent
+  | DropdownSectionActions
 
-export type DropdownSectionType = 'menu' | 'filter'
+export type DropdownSectionType = 'menu' | 'filter' | 'actions' | 'component'
 
 export interface DropdownSectionBase {
   type: DropdownSectionType
@@ -56,6 +60,22 @@ export interface DropdownSectionFilterOptionAvatar extends DropdownSectionFilter
   image?: string | null
 }
 
+export interface DropdownSectionActions extends DropdownSectionBase {
+  type: 'actions'
+  options: DropdownSectionActionsOption[]
+}
+
+export interface DropdownSectionActionsOption {
+  mode?: 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
+  label: string
+  onClick(): void
+}
+
+export interface DropdownSectionComponent extends DropdownSectionBase {
+  type: 'component'
+  component: any
+}
+
 export interface ManualDropdownPosition {
   container: Ref<any>
   position: Ref<'top' | 'bottom'>

package/lib/composables/Flyout.ts

@@ -1,4 +1,5 @@
-import { Ref, ref, watch } from 'vue'
+import type { Ref } from 'vue'
+import { ref, watch } from 'vue'
 
 export function useFlyout(container?: Ref<any>) {
   const el = container ?? ref<any>(null)

package/lib/composables/Form.ts

@@ -1,7 +1,10 @@
-import { Ref, computed } from 'vue'
+import type { Ref } from 'vue'
+import { computed } from 'vue'
 import { useSnackbars } from '../stores/Snackbars'
-import { UseDataInput, useData } from './Data'
-import { Validation, useValidation } from './Validation'
+import type { UseDataInput } from './Data'
+import { useData } from './Data'
+import type { Validation } from './Validation'
+import { useValidation } from './Validation'
 
 export interface Form<T extends Record<string, any>> {
   data: T

package/lib/composables/Grid.ts

@@ -1,4 +1,5 @@
-import { Ref, onMounted, onUnmounted, ref, watchEffect } from 'vue'
+import type { Ref } from 'vue'
+import { onMounted, onUnmounted, ref, watchEffect } from 'vue'
 
 export interface Grid {
   container: Ref<HTMLElement | null>

package/lib/composables/Markdown.ts

@@ -1,7 +1,9 @@
 import MarkdownIt from 'markdown-it'
-import { Ref, onUnmounted } from 'vue'
+import type { Ref } from 'vue'
+import { onUnmounted } from 'vue'
 import { useRouter } from 'vue-router'
-import { LinkAttrs, isCallbackUrl, isExternalUrl, linkPlugin } from './markdown/LinkPlugin'
+import type { LinkAttrs } from './markdown/LinkPlugin'
+import { isCallbackUrl, isExternalUrl, linkPlugin } from './markdown/LinkPlugin'
 
 export type UseMarkdown = (source: string, inline: boolean) => string
 

package/lib/composables/Table.ts

@@ -1,6 +1,7 @@
-import { MaybeRef } from '@vueuse/core'
-import { Component, reactive } from 'vue'
-import { DropdownSection } from './Dropdown'
+import type { MaybeRef } from '@vueuse/core'
+import type { Component } from 'vue'
+import { reactive } from 'vue'
+import type { DropdownSection } from './Dropdown'
 
 export interface Table {
   orders: string[]

package/lib/composables/Tooltip.ts

@@ -1,4 +1,5 @@
-import { Ref, ref } from 'vue'
+import type { Ref } from 'vue'
+import { ref } from 'vue'
 
 export type Position = 'top' | 'right' | 'bottom' | 'left'
 

package/lib/composables/Utils.ts

@@ -1,5 +1,7 @@
-import { MaybeComputedRef, resolveUnref } from '@vueuse/core'
-import { ComputedRef, computed } from 'vue'
+import type { MaybeComputedRef } from '@vueuse/core'
+import { resolveUnref } from '@vueuse/core'
+import type { ComputedRef } from 'vue'
+import { computed } from 'vue'
 
 export type WhenCondition<T> = MaybeComputedRef<T>
 

package/lib/composables/Validation.ts

@@ -1,10 +1,12 @@
-import {
+import type {
   GlobalConfig,
   Validation,
-  ValidationArgs,
+  ValidationArgs
+} from '@vuelidate/core'
+import {
   useVuelidate
 } from '@vuelidate/core'
-import { Ref, ToRefs } from 'vue'
+import type { Ref, ToRefs } from 'vue'
 
 export type { Validation, ValidationArgs, GlobalConfig }
 

package/lib/composables/markdown/LinkPlugin.ts

@@ -1,4 +1,4 @@
-import MarkdownIt from 'markdown-it'
+import type MarkdownIt from 'markdown-it'
 
 export type LinkAttrs = Record<string, string>
 

package/lib/mixins/Sheet.ts

@@ -1,4 +1,4 @@
-import { App } from 'vue'
+import type { App } from 'vue'
 import SSheet from '../components/SSheet.vue'
 import SSheetFooter from '../components/SSheetFooter.vue'
 import SSheetFooterAction from '../components/SSheetFooterAction.vue'

package/lib/styles/variables.css

@@ -65,16 +65,16 @@
   --c-text-dark-2: rgba(235, 235, 245, 0.6);
   --c-text-dark-3: rgba(235, 235, 245, 0.3);
 
-  --c-info: #0284c7;
-  --c-info-light: #0ea5e9;
-  --c-info-lighter: #38bdf8;
-  --c-info-lghtest: #7dd3fc;
-  --c-info-dark: #0369a1;
-  --c-info-darker: #075985;
-  --c-info-darkest: #0c4a6e;
-  --c-info-dimm-1: rgba(2, 132, 199, 0.12);
-  --c-info-dimm-2: rgba(2, 132, 199, 0.2);
-  --c-info-dimm-3: rgba(2, 132, 199, 0.28);
+  --c-info: #1668b6;
+  --c-info-light: #2997ff;
+  --c-info-lighter: #5bafff;
+  --c-info-lghtest: #7dc0ff;
+  --c-info-dark: #104c85;
+  --c-info-darker: #0c3963;
+  --c-info-darkest: #092e51;
+  --c-info-dimm-1: rgba(22, 104, 182, 0.12);
+  --c-info-dimm-2: rgba(22, 104, 182, 0.2);
+  --c-info-dimm-3: rgba(22, 104, 182, 0.28);
   --c-info-text: var(--c-info-light);
   --c-info-text-light: var(--c-info-lighter);
   --c-info-text-lighter: var(--c-info-lightest);
@@ -666,4 +666,14 @@
   --input-mini-label-font-size: 12px;
   --input-small-label-font-size: 14px;
   --input-medium-label-font-size: 14px;
+
+  --input-switch-toggle-color: var(--c-neutral-1);
+  --input-switch-bg-color: var(--c-mute);
+  --input-switch-disabled-toggle-color: var(--c-gray);
+  --input-switch-disabled-bg-color: var(--c-mute);
+}
+
+.dark {
+  --input-switch-bg-color: var(--c-bg-elv-1);
+  --input-switch-disabled-bg-color: var(--c-mute);
 }

package/lib/support/Day.ts

@@ -1,4 +1,5 @@
-import dayjs, { ConfigType, Dayjs } from 'dayjs'
+import type { ConfigType, Dayjs } from 'dayjs'
+import dayjs from 'dayjs'
 import PluginRelativeTime from 'dayjs/plugin/relativeTime'
 import PluginTimezone from 'dayjs/plugin/timezone'
 import PluginUtc from 'dayjs/plugin/utc'

package/lib/validation/rules/hms.ts

@@ -1,5 +1,6 @@
 import { helpers } from '@vuelidate/validators'
-import { Hms, HmsType, hms as baseHms } from '../validators/hms'
+import type { Hms, HmsType } from '../validators/hms'
+import { hms as baseHms } from '../validators/hms'
 
 export function hms(required?: HmsType[], msg?: string) {
   return helpers.withMessage(

package/lib/validation/rules/requiredHms.ts

@@ -1,5 +1,6 @@
 import { helpers } from '@vuelidate/validators'
-import { Hms, HmsType, requiredHms as baseRequiredHms } from '../validators/requiredHms'
+import type { Hms, HmsType } from '../validators/requiredHms'
+import { requiredHms as baseRequiredHms } from '../validators/requiredHms'
 
 export function requiredHms(required?: HmsType[], msg?: string) {
   return helpers.withMessage(

package/lib/validation/rules/requiredYmd.ts

@@ -1,5 +1,6 @@
 import { helpers } from '@vuelidate/validators'
-import { Ymd, YmdType, requiredYmd as baseRequiredYmd } from '../validators/requiredYmd'
+import type { Ymd, YmdType } from '../validators/requiredYmd'
+import { requiredYmd as baseRequiredYmd } from '../validators/requiredYmd'
 
 export function requiredYmd(required?: YmdType[], msg?: string) {
   return helpers.withMessage(

package/lib/validation/rules/ymd.ts

@@ -1,5 +1,6 @@
 import { helpers } from '@vuelidate/validators'
-import { Ymd, YmdType, ymd as baseYmd } from '../validators/ymd'
+import type { Ymd, YmdType } from '../validators/ymd'
+import { ymd as baseYmd } from '../validators/ymd'
 
 export function ymd(required?: YmdType[], msg?: string) {
   return helpers.withMessage(

package/lib/validation/validators/hms.ts

@@ -1,7 +1,7 @@
 export interface Hms {
-  hour?: string
-  minute?: string
-  second?: string
+  hour?: string | null
+  minute?: string | null
+  second?: string | null
 }
 
 export type HmsType = 'h' | 'm' | 's'
@@ -22,8 +22,8 @@ export function hms(hms: Hms, required: HmsType[] = ['h', 'm', 's']): boolean {
 
     const valueAsNumber = Number(value)
 
-    return r === 'h'
-      ? valueAsNumber >= 0 && valueAsNumber < 24
-      : valueAsNumber >= 0 && valueAsNumber < 60
+    return (r === 'h')
+      ? (valueAsNumber >= 0 && valueAsNumber < 24)
+      : (valueAsNumber >= 0 && valueAsNumber < 60)
   })
 }

package/lib/validation/validators/requiredHms.ts

@@ -1,7 +1,7 @@
 export interface Hms {
-  hour?: string
-  minute?: string
-  second?: string
+  hour?: string | null
+  minute?: string | null
+  second?: string | null
 }
 
 export type HmsType = 'h' | 'm' | 's'
@@ -13,5 +13,5 @@ export const HmsMap = {
 } as const
 
 export function requiredHms(hms: Hms, required: HmsType[] = ['h', 'm', 's']): boolean {
-  return required.every((r) => hms[HmsMap[r]] !== undefined)
+  return required.every((r) => hms[HmsMap[r]] != null)
 }