@globalbrain/sefirot 2.2.0 → 2.3.0

package/lib/components/SInputTextarea.vue

@@ -1,27 +1,3 @@
-<template>
-  <SInputBase
-    class="SInputTextarea"
-    :class="classes"
-    :name="name"
-    :label="label"
-    :note="note"
-    :help="help"
-    :hide-error="hideError"
-    :validation="validation"
-  >
-    <textarea
-      :id="name"
-      class="input"
-      :placeholder="placeholder"
-      :rows="rows ?? 3"
-      :disabled="disabled"
-      :value="modelValue ?? ''"
-      @input="emitInput"
-      @blur="emitBlur"
-    />
-  </SInputBase>
-</template>
-
 <script setup lang="ts">
 import { computed } from 'vue'
 import { Validatable } from '../composables/Validation'
@@ -62,6 +38,30 @@ function emitBlur(e: FocusEvent): void {
 }
 </script>
 
+<template>
+  <SInputBase
+    class="SInputTextarea"
+    :class="classes"
+    :name="name"
+    :label="label"
+    :note="note"
+    :help="help"
+    :hide-error="hideError"
+    :validation="validation"
+  >
+    <textarea
+      :id="name"
+      class="input"
+      :placeholder="placeholder"
+      :rows="rows ?? 3"
+      :disabled="disabled"
+      :value="modelValue ?? ''"
+      @input="emitInput"
+      @blur="emitBlur"
+    />
+  </SInputBase>
+</template>
+
 <style lang="postcss" scoped>
 .SInputTextarea.mini {
   .input {

package/lib/components/SInputYMD.vue

@@ -98,7 +98,7 @@ function createRequiredTouched(): boolean[] {
 <template>
   <SInputBase
     class="SInputYMD"
-    :class="[size, { disabled }]"
+    :class="[size ?? 'small', { disabled }]"
     :label="label"
     :note="note"
     :help="help"

package/lib/components/SLink.vue

@@ -1,17 +1,3 @@
-<template>
-  <component
-    :is="component"
-    class="SLink"
-    :class="{ link: href }"
-    :href="href"
-    :to="href"
-    :target="target"
-    :rel="rel"
-  >
-    <slot />
-  </component>
-</template>
-
 <script setup lang="ts">
 import { computed } from 'vue'
 
@@ -34,3 +20,17 @@ const component = computed(() => {
 const target = computed(() => isExternal.value ? '_blank' : null)
 const rel = computed(() => isExternal.value ? 'noopener noreferrer' : null)
 </script>
+
+<template>
+  <component
+    :is="component"
+    class="SLink"
+    :class="{ link: href }"
+    :href="href"
+    :to="href"
+    :target="target"
+    :rel="rel"
+  >
+    <slot />
+  </component>
+</template>

package/lib/components/SMarkdown.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ref, computed, watch, nextTick } from 'vue'
-import { LinkCallback, LinkSubscriberPayload, useMarkdown, useLink } from '../composables/Markdown'
+import { computed, nextTick, ref, watch } from 'vue'
+import { LinkCallback, LinkSubscriberPayload, useLink, useMarkdown } from '../composables/Markdown'
 
 const props = defineProps<{
   tag?: string
@@ -29,7 +29,7 @@ watch(
   { immediate: true }
 )
 
-subscribe((payload) => emit('clicked', payload))
+subscribe(payload => emit('clicked', payload))
 </script>
 
 <template>

package/lib/components/SMount.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 
 defineProps<{
   tag?: string

package/lib/components/SSheetFooterAction.vue

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

package/lib/components/SSpinner.vue

@@ -1,5 +1,10 @@
 <template>
-  <svg class="SSpinner" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+  <svg
+    class="SSpinner"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 100 100"
+    preserveAspectRatio="xMidYMid"
+  >
     <g transform="rotate(0 50 50)">
       <rect
         class="bar"
@@ -19,7 +24,8 @@
           repeatCount="indefinite"
         />
       </rect>
-    </g><g transform="rotate(30 50 50)">
+    </g>
+    <g transform="rotate(30 50 50)">
       <rect
         class="bar"
         x="48"
@@ -38,7 +44,8 @@
           repeatCount="indefinite"
         />
       </rect>
-    </g><g transform="rotate(60 50 50)">
+    </g>
+    <g transform="rotate(60 50 50)">
       <rect
         class="bar"
         x="48"
@@ -57,7 +64,8 @@
           repeatCount="indefinite"
         />
       </rect>
-    </g><g transform="rotate(90 50 50)">
+    </g>
+    <g transform="rotate(90 50 50)">
       <rect
         class="bar"
         x="48"
@@ -76,7 +84,8 @@
           repeatCount="indefinite"
         />
       </rect>
-    </g><g transform="rotate(120 50 50)">
+    </g>
+    <g transform="rotate(120 50 50)">
       <rect
         class="bar"
         x="48"
@@ -95,7 +104,8 @@
           repeatCount="indefinite"
         />
       </rect>
-    </g><g transform="rotate(150 50 50)">
+    </g>
+    <g transform="rotate(150 50 50)">
       <rect
         class="bar"
         x="48"
@@ -114,7 +124,8 @@
           repeatCount="indefinite"
         />
       </rect>
-    </g><g transform="rotate(180 50 50)">
+    </g>
+    <g transform="rotate(180 50 50)">
       <rect
         class="bar"
         x="48"
@@ -133,7 +144,8 @@
           repeatCount="indefinite"
         />
       </rect>
-    </g><g transform="rotate(210 50 50)">
+    </g>
+    <g transform="rotate(210 50 50)">
       <rect
         class="bar"
         x="48"
@@ -152,7 +164,8 @@
           repeatCount="indefinite"
         />
       </rect>
-    </g><g transform="rotate(240 50 50)">
+    </g>
+    <g transform="rotate(240 50 50)">
       <rect
         class="bar"
         x="48"
@@ -171,7 +184,8 @@
           repeatCount="indefinite"
         />
       </rect>
-    </g><g transform="rotate(270 50 50)">
+    </g>
+    <g transform="rotate(270 50 50)">
       <rect
         class="bar"
         x="48"
@@ -190,7 +204,8 @@
           repeatCount="indefinite"
         />
       </rect>
-    </g><g transform="rotate(300 50 50)">
+    </g>
+    <g transform="rotate(300 50 50)">
       <rect
         class="bar"
         x="48"
@@ -209,7 +224,8 @@
           repeatCount="indefinite"
         />
       </rect>
-    </g><g transform="rotate(330 50 50)">
+    </g>
+    <g transform="rotate(330 50 50)">
       <rect
         class="bar"
         x="48"

package/lib/components/SStep.vue

@@ -1,3 +1,18 @@
+<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 SIcon from './SIcon.vue'
+
+defineProps({
+  status: { type: String as PropType<StepStatus>, required: true },
+  barLeft: { type: String as PropType<BarMode | null>, default: null },
+  barRight: { type: String as PropType<BarMode | null>, default: null },
+  text: { type: String, default: null }
+})
+</script>
+
 <template>
   <div class="SStep" :class="[status]">
     <div class="indicator">
@@ -14,21 +29,6 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import IconCheck from '@iconify-icons/ph/check'
-import IconX from '@iconify-icons/ph/x'
-import { PropType } from 'vue'
-import { StepStatus, BarMode } from '../composables/Step'
-import SIcon from './SIcon.vue'
-
-defineProps({
-  status: { type: String as PropType<StepStatus>, required: true },
-  barLeft: { type: String as PropType<BarMode | null>, default: null },
-  barRight: { type: String as PropType<BarMode | null>, default: null },
-  text: { type: String, default: null }
-})
-</script>
-
 <style lang="postcss" scoped>
 .SStep.upcoming {
   .point { border-color: var(--c-divider); }

package/lib/components/SSteps.vue

@@ -1,20 +1,6 @@
-<template>
-  <div class="SSteps">
-    <SStep
-      v-for="(step, index) in steps"
-      :key="index"
-      class="item"
-      :style="{ width }"
-      :bar-left="getBarLeftMode(index)"
-      :bar-right="getBarRightMode(index)"
-      v-bind="step"
-    />
-  </div>
-</template>
-
 <script setup lang="ts">
-import { computed, PropType } from 'vue'
-import { Step, BarMode } from '../composables/Step'
+import { PropType, computed } from 'vue'
+import { BarMode, Step } from '../composables/Step'
 import SStep from './SStep.vue'
 
 const props = defineProps({
@@ -52,6 +38,20 @@ function isActive(step: Step): boolean {
 }
 </script>
 
+<template>
+  <div class="SSteps">
+    <SStep
+      v-for="(step, index) in steps"
+      :key="index"
+      class="item"
+      :style="{ width }"
+      :bar-left="getBarLeftMode(index)"
+      :bar-right="getBarRightMode(index)"
+      v-bind="step"
+    />
+  </div>
+</template>
+
 <style lang="postcss" scoped>
 .SSteps {
   display: flex;

package/lib/components/STable.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive, ref, computed, watch, toRefs } from 'vue'
+import { computed, reactive, ref, toRefs, watch } from 'vue'
 import { Table } from '../composables/Table'
 import SSpinner from './SSpinner.vue'
 import STableCell from './STableCell.vue'
@@ -24,7 +24,7 @@ const {
   loading,
   onPrev,
   onNext,
-  onReset,
+  onReset
 } = toRefs(props.options)
 
 const head = ref<HTMLElement | null>(null)

package/lib/components/STableCellAvatar.vue

@@ -17,7 +17,7 @@ const _name = computed(() => props.name?.(props.value, props.record))
 </script>
 
 <template>
-  <div class="STableCellAvatar" :class="[{ link}, color]">
+  <div class="STableCellAvatar" :class="[{ link }, color]">
     <SLink class="container" :href="link?.(value, record)">
       <div v-if="_image" class="avatar">
         <SAvatar size="mini" :avatar="_image" :name="_name" />

package/lib/components/STableCellAvatars.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import type { TableCellAvatarsOption } from '../composables/Table'
+import { 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 type { Day } from '../support/Day'
+import { Day } from '../support/Day'
 
 defineProps<{
   value?: Day | null

package/lib/components/STableCellPill.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import type { TableCellPillColor } from '../composables/Table'
+
+export type Color = 'info' | 'success' | 'warning' | 'danger' | 'mute'
 
 const props = defineProps<{
   value?: any
   record: any
   getter?: string | ((value: any) => string)
-  color?: TableCellPillColor | ((value: any) => TableCellPillColor)
+  color?: Color | ((value: any) => Color)
 }>()
 
 const _value = computed(() => {

package/lib/components/STableColumn.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import IconDotsThree from '@iconify-icons/ph/dots-three'
-import { ref, computed, unref, watch, nextTick } from 'vue'
+import { computed, nextTick, ref, unref, watch } from 'vue'
 import { DropdownSection } from '../composables/Dropdown'
 import { useFlyout } from '../composables/Flyout'
 import { isArray } from '../support/Utils'
@@ -93,11 +93,11 @@ async function adjustDialogPosition() {
   const position = (window.innerWidth - rect.right) > dialogWidth ? 'right' : 'left'
 
   top.value = `${rect.top + rect.height - 8}px`
-  left.value =
-    Math.max(
+  left.value
+    = `${Math.max(
       16,
       position === 'right' ? rect.left - 4 : rect.right - dialogWidth - 4
-    ) + 'px'
+    )}px`
 }
 
 function startDialogPositionListener() {

package/lib/components/STooltip.vue

@@ -1,3 +1,20 @@
+<script setup lang="ts">
+import { PropType, computed, ref } from 'vue'
+import { Position, useTooltip } from '../composables/Tooltip'
+import SMarkdown from './SMarkdown.vue'
+
+const props = defineProps({
+  tag: { type: String, default: 'span' },
+  text: { type: String, default: null },
+  position: { type: String as PropType<Position>, default: 'top' }
+})
+
+const tip = ref<HTMLElement | null>(null)
+const content = ref<HTMLElement | null>(null)
+const classes = computed(() => [props.position])
+const { on, show, hide } = useTooltip(content, tip, props.position)
+</script>
+
 <template>
   <component :is="tag" class="STooltip" @mouseenter="show" @mouseleave="hide">
     <template v-if="text">
@@ -20,23 +37,6 @@
   </component>
 </template>
 
-<script setup lang="ts">
-import { computed, PropType, ref } from 'vue'
-import { Position, useTooltip } from '../composables/Tooltip'
-import SMarkdown from './SMarkdown.vue'
-
-const props = defineProps({
-  tag: { type: String, default: 'span' },
-  text: { type: String, default: null },
-  position: { type: String as PropType<Position>, default: 'top' }
-})
-
-const tip = ref<HTMLElement | null>(null)
-const content = ref<HTMLElement | null>(null)
-const classes = computed(() => [props.position])
-const { on, show, hide } = useTooltip(content, tip, props.position)
-</script>
-
 <style lang="postcss" scoped>
 .STooltip {
   position: relative;

package/lib/composables/Form.ts

@@ -1,5 +1,5 @@
 import cloneDeep from 'lodash-es/cloneDeep'
-import { Ref, reactive } from 'vue'
+import { Ref, computed, reactive } from 'vue'
 import { useSnackbars } from '../stores/Snackbars'
 import { Validation, useValidation } from './Validation'
 
@@ -13,7 +13,7 @@ export interface Form<T extends Record<string, any>> {
 }
 
 export interface UseFormOptions<T extends Record<string, any>> {
-  data: T,
+  data: T
   rules?: Record<string, any> | ((state: T) => Record<string, any>)
 }
 
@@ -26,9 +26,11 @@ export function useForm<
 
   const data = reactive(options.data)
 
-  const rules = options.rules
-    ? typeof options.rules === 'function' ? options.rules(data) : options.rules
-    : {}
+  const rules = computed(() => {
+    return options.rules
+      ? typeof options.rules === 'function' ? options.rules(data) : options.rules
+      : {}
+  })
 
   const validation = useValidation(data, rules)
 

package/lib/composables/Grid.ts

@@ -1,4 +1,4 @@
-import { Ref, ref, watchEffect, onMounted, onUnmounted } from 'vue'
+import { Ref, onMounted, onUnmounted, ref, watchEffect } from 'vue'
 
 export interface Grid {
   container: Ref<HTMLElement | null>
@@ -69,7 +69,7 @@ export function useGrid(options: UseGridOptions): Grid {
 }
 
 function toClassSelector(name: string) {
-  return name.startsWith('.') ? name : '.' + name
+  return name.startsWith('.') ? name : `.${name}`
 }
 
 function toClassName(name: string) {
@@ -84,7 +84,7 @@ function createSpacers(size: number, tag: string, classes: string, type: 'fill'
   }
 
   if (type === 'fill') {
-    const spacer = createSpacer(tag, classes, { gridColumn: `span ${size}`})
+    const spacer = createSpacer(tag, classes, { gridColumn: `span ${size}` })
 
     fragment.appendChild(spacer)
 

package/lib/composables/Markdown.ts

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

package/lib/composables/Tooltip.ts

@@ -46,7 +46,8 @@ export function useTooltip(
 
     if (tipRect.x < 0) {
       adjustLeftPosition(contentRect.x)
-    } else if (tipRightX > window.outerWidth) {
+    }
+    else if (tipRightX > window.outerWidth) {
       adjustRightPosition(contentRightX)
     }
 

package/lib/composables/Validation.ts

@@ -1,8 +1,8 @@
 import {
+  ErrorObject,
+  GlobalConfig,
   Validation,
   ValidationArgs,
-  GlobalConfig,
-  ErrorObject,
   useVuelidate
 } from '@vuelidate/core'
 import { Ref, ToRefs } from 'vue'

package/lib/support/Day.ts

@@ -1,4 +1,4 @@
-import dayjs, { Dayjs, ConfigType } from 'dayjs'
+import dayjs, { ConfigType, Dayjs } from 'dayjs'
 
 export type Day = Dayjs
 export type Input = ConfigType

package/lib/validation/rules/email.ts

@@ -1,4 +1,4 @@
-import { helpers, email as baseEmail } from '@vuelidate/validators'
+import { email as baseEmail, helpers } from '@vuelidate/validators'
 
 export function email(msg?: string) {
   return helpers.withMessage(

package/lib/validation/rules/hms.ts

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

package/lib/validation/rules/maxLength.ts

@@ -1,4 +1,4 @@
-import { helpers, maxLength as baseMaxLength } from '@vuelidate/validators'
+import { maxLength as baseMaxLength, helpers } from '@vuelidate/validators'
 
 export function maxLength(length: number, msg?: string) {
   return helpers.withMessage(

package/lib/validation/rules/maxValue.ts

@@ -1,4 +1,4 @@
-import { helpers, maxValue as baseMaxValue } from '@vuelidate/validators'
+import { maxValue as baseMaxValue, helpers } from '@vuelidate/validators'
 
 export function maxValue(value: number, msg?: string) {
   return helpers.withMessage(

package/lib/validation/rules/minLength.ts

@@ -1,4 +1,4 @@
-import { helpers, minLength as baseMinLength } from '@vuelidate/validators'
+import { minLength as baseMinLength, helpers } from '@vuelidate/validators'
 
 export function minLength(length: number, msg?: string) {
   return helpers.withMessage(

package/lib/validation/rules/minValue.ts

@@ -1,4 +1,4 @@
-import { helpers, minValue as baseMinValue } from '@vuelidate/validators'
+import { minValue as baseMinValue, helpers } from '@vuelidate/validators'
 
 export function minValue(value: number, msg?: string) {
   return helpers.withMessage(

package/lib/validation/rules/required.ts

@@ -1,4 +1,4 @@
-import { helpers, required as baseRequired } from '@vuelidate/validators'
+import { required as baseRequired, helpers } from '@vuelidate/validators'
 
 export function required(msg?: string) {
   return helpers.withMessage(

package/lib/validation/rules/requiredHms.ts

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

package/lib/validation/rules/requiredIf.ts

@@ -1,4 +1,4 @@
-import { helpers, requiredIf as baseRequiredIf } from '@vuelidate/validators'
+import { requiredIf as baseRequiredIf, helpers } from '@vuelidate/validators'
 
 export function requiredIf(
   prop: boolean | string | (() => boolean | Promise<boolean>),

package/lib/validation/rules/requiredYmd.ts

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

package/lib/validation/rules/url.ts

@@ -1,4 +1,4 @@
-import { helpers, url as baseUrl } from '@vuelidate/validators'
+import { url as baseUrl, helpers } from '@vuelidate/validators'
 
 export function url(msg?: string) {
   return helpers.withMessage(

package/lib/validation/rules/ymd.ts

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