@globalbrain/sefirot 4.19.1 → 4.21.0

package/lib/components/SInputRadios.vue

@@ -88,15 +88,15 @@ function onChange(value: ValueType) {
   <SInputBase
     class="SInputRadios"
     :class="[size ?? 'small']"
-    :label="label"
-    :note="note"
-    :info="info"
-    :help="help"
-    :check-icon="checkIcon"
-    :check-text="checkText"
-    :check-color="checkColor"
-    :hide-error="hideError"
-    :validation="validation"
+    :label
+    :note
+    :info
+    :help
+    :check-icon
+    :check-text
+    :check-color
+    :hide-error
+    :validation
   >
     <div class="container">
       <div class="row">

package/lib/components/SInputSegments.vue

@@ -61,15 +61,15 @@ function onSelect(value: T) {
   <SInputBase
     class="SInputSegments"
     :class="[size ?? 'small', { block }]"
-    :label="label"
-    :note="note"
-    :info="info"
-    :help="help"
-    :check-icon="checkIcon"
-    :check-text="checkText"
-    :check-color="checkColor"
-    :hide-error="hideError"
-    :validation="validation"
+    :label
+    :note
+    :info
+    :help
+    :check-icon
+    :check-text
+    :check-color
+    :hide-error
+    :validation
   >
     <div class="box">
       <SInputSegmentsOption

package/lib/components/SInputSelect.vue

@@ -84,7 +84,7 @@ function emitChange(e: any): void {
       <select
         class="select"
         :class="{ 'is-not-selected': isNotSelected }"
-        :disabled="disabled"
+        :disabled
         @focus="isFocused = true"
         @blur="isFocused = false"
         @change="emitChange"

package/lib/components/SInputSwitch.vue

@@ -58,15 +58,15 @@ function emitChange(): void {
   <SInputBase
     class="SInputSwitch"
     :class="classes"
-    :name="name"
-    :label="label"
-    :note="note"
-    :info="info"
-    :check-icon="checkIcon"
-    :check-text="checkText"
-    :check-color="checkColor"
-    :help="help"
-    :hide-error="hideError"
+    :name
+    :label
+    :note
+    :info
+    :check-icon
+    :check-text
+    :check-color
+    :help
+    :hide-error
   >
     <div class="container">
       <div class="input" :class="{ on: _value }" role="button" @click="emitChange">

package/lib/components/SInputSwitches.vue

@@ -54,21 +54,21 @@ function handleChange(value: any): void {
   <SInputBase
     class="SInputSwitches"
     :class="classes"
-    :name="name"
-    :label="label"
-    :note="note"
-    :info="info"
-    :help="help"
-    :check-icon="checkIcon"
-    :check-text="checkText"
-    :check-color="checkColor"
-    :hide-error="hideError"
+    :name
+    :label
+    :note
+    :info
+    :help
+    :check-icon
+    :check-text
+    :check-color
+    :hide-error
   >
     <div class="container">
       <div class="row">
         <div v-for="(option, index) in options" :key="index" class="col">
           <SInputSwitch
-            :size="size"
+            :size
             :text="option.label"
             :model-value="isChecked(option.value)"
             @update:model-value="handleChange(option.value)"

package/lib/components/SInputText.vue

@@ -101,19 +101,19 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
   <SInputBase
     class="SInputText"
     :class="classes"
-    :size="size"
-    :name="name"
-    :label="label"
-    :note="note"
-    :info="info"
-    :help="help"
-    :check-icon="checkIcon"
-    :check-text="checkText"
-    :check-color="checkColor"
-    :validation="validation"
-    :warning="warning"
-    :hide-error="hideError"
-    :hide-warning="hideWarning"
+    :size
+    :name
+    :label
+    :note
+    :info
+    :help
+    :check-icon
+    :check-text
+    :check-color
+    :validation
+    :warning
+    :hide-error
+    :hide-warning
   >
     <div class="box" :class="{ focus: isFocused }" @click="focus">
       <div v-if="$slots['addon-before']" class="addon before">
@@ -132,8 +132,8 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
             :class="inputClasses"
             :id="name"
             :type="type ?? 'text'"
-            :placeholder="placeholder"
-            :disabled="disabled"
+            :placeholder
+            :disabled
             :value="modelValue"
             ref="input"
             @focus="onFocus"

package/lib/components/SInputTextarea.vue

@@ -80,19 +80,19 @@ const isPreview = ref(false)
   <SInputBase
     class="SInputTextarea"
     :class="classes"
-    :size="size"
-    :name="name"
-    :label="label"
-    :note="note"
-    :info="info"
-    :help="help"
-    :check-icon="checkIcon"
-    :check-text="checkText"
-    :check-color="checkColor"
-    :validation="validation"
-    :warning="warning"
-    :hide-error="hideError"
-    :hide-warning="hideWarning"
+    :size
+    :name
+    :label
+    :note
+    :info
+    :help
+    :check-icon
+    :check-text
+    :check-color
+    :validation
+    :warning
+    :hide-error
+    :hide-warning
   >
     <div class="box">
       <div v-if="preview !== undefined" class="control">
@@ -109,10 +109,10 @@ const isPreview = ref(false)
         v-show="!isPreview"
         :id="name"
         class="input"
-        :style="style"
-        :placeholder="placeholder"
+        :style
+        :placeholder
         :rows="rows === 'fill' ? 3 : rows"
-        :disabled="disabled"
+        :disabled
         :value="_value ?? undefined"
         @input="emitInput"
         @blur="emitBlur"

package/lib/components/SInputYMD.vue

@@ -143,15 +143,15 @@ function createRequiredTouched(): boolean[] {
   <SInputBase
     class="SInputYMD"
     :class="[size ?? 'small', { disabled }]"
-    :label="label"
-    :note="note"
-    :info="info"
-    :help="help"
-    :check-icon="checkIcon"
-    :check-text="checkText"
-    :check-color="checkColor"
-    :hide-error="hideError"
-    :validation="validation"
+    :label
+    :note
+    :info
+    :help
+    :check-icon
+    :check-text
+    :check-color
+    :hide-error
+    :validation
   >
     <div class="container" :class="{ focus: isFocused, block }">
       <input
@@ -160,7 +160,7 @@ function createRequiredTouched(): boolean[] {
         :value="padValue?.year"
         :placeholder="padPlaceholder.year"
         :maxlength="4"
-        :disabled="disabled"
+        :disabled
         @focus="onFocus"
         @blur="updateYear"
       >
@@ -174,7 +174,7 @@ function createRequiredTouched(): boolean[] {
         :value="padValue?.month"
         :placeholder="padPlaceholder.month"
         :maxlength="2"
-        :disabled="disabled"
+        :disabled
         @focus="onFocus"
         @blur="updateMonth"
       >
@@ -188,7 +188,7 @@ function createRequiredTouched(): boolean[] {
         :value="padValue?.date"
         :placeholder="padPlaceholder.date"
         :maxlength="2"
-        :disabled="disabled"
+        :disabled
         @focus="onFocus"
         @blur="updateDate"
       >

package/lib/components/SLink.vue

@@ -39,10 +39,10 @@ const rel = computed(() => isExternal.value ? 'noopener noreferrer' : null)
     :is="component"
     class="SLink"
     :class="{ link: href }"
-    :href="href"
+    :href
     :to="href"
-    :target="target"
-    :rel="rel"
+    :target
+    :rel
   >
     <slot />
   </component>

package/lib/components/SLocalNav.vue

@@ -40,8 +40,8 @@ const normalizedMenu = computed(() => {
       </div>
       <div class="title-bar-body">
         <div class="title-bar-title">
-          <SLocalNavTitle :title="title" />
-          <SLocalNavActions v-if="actions?.length" :actions="actions" />
+          <SLocalNavTitle :title />
+          <SLocalNavActions v-if="actions?.length" :actions />
         </div>
         <SLocalNavDescription v-if="description" :text="description" />
       </div>

package/lib/components/SLocalNavAvatar.vue

@@ -12,7 +12,7 @@ defineProps<{
     <SAvatar
       size="fill"
       :avatar="image"
-      :name="name"
+      :name
     />
   </div>
 </template>

package/lib/components/SLoginPagePasswordDialog.vue

@@ -85,7 +85,7 @@ async function onSubmit() {
           <SControlButton
             mode="info"
             label="Sign in"
-            :loading="loading"
+            :loading
             @click="onSubmit"
           />
         </SControlRight>

package/lib/components/SM.vue

@@ -35,7 +35,7 @@ const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => {
 
 <template>
   <component :is="as" class="SM" :class="{ on }" ref="target">
-    <slot :on="on" />
+    <slot :on />
   </component>
 </template>
 

package/lib/components/SMFade.vue

@@ -9,6 +9,6 @@ withDefaults(defineProps<Props>(), {
 
 <template>
   <SM class="SMFade" v-bind="$props" v-slot="{ on }">
-    <slot :on="on" />
+    <slot :on />
   </SM>
 </template>

package/lib/components/SPagination.vue

@@ -11,16 +11,18 @@ export type Align = 'left' | 'center' | 'right'
 
 const props = withDefaults(defineProps<{
   size?: Size
+  disabled?: boolean
   align?: Align
   total: number
   page: number
   perPage: number
 }>(), {
   size: 'medium',
+  disabled: false,
   align: 'center'
 })
 
-const emit = defineEmits<{
+defineEmits<{
   prev: []
   next: []
 }>()
@@ -47,14 +49,6 @@ const hasPrev = computed(() => {
 const hasNext = computed(() => {
   return to.value < props.total
 })
-
-function prev() {
-  hasPrev.value && emit('prev')
-}
-
-function next() {
-  hasNext.value && emit('next')
-}
 </script>
 
 <template>
@@ -63,11 +57,11 @@ function next() {
       <SButton
         type="outline"
         mode="mute"
-        :size="size"
+        :size
         :lead-icon="IconCaretLeft"
         :label="t.prev"
-        :disabled="!hasPrev"
-        @click="prev"
+        :disabled="disabled || !hasPrev"
+        @click="$emit('prev')"
       />
     </div>
     <div class="text">
@@ -77,11 +71,11 @@ function next() {
       <SButton
         type="outline"
         mode="mute"
-        :size="size"
+        :size
         :trail-icon="IconCaretRight"
         :label="t.next"
-        :disabled="!hasNext"
-        @click="next"
+        :disabled="disabled || !hasNext"
+        @click="$emit('next')"
       />
     </div>
   </div>

package/lib/components/STable.vue

@@ -401,7 +401,7 @@ function getStyles(key: string) {
             <div class="row" ref="row">
               <STableItem
                 v-for="key in ordersToShow"
-                :key="key"
+                :key
                 :name="key"
                 :class-name="unref(options.columns)[key]?.className"
                 :style="getStyles(key)"
@@ -460,7 +460,7 @@ function getStyles(key: string) {
               >
                 <STableItem
                   v-for="key in ordersToShow"
-                  :key="key"
+                  :key
                   :name="key"
                   :class-name="unref(options.columns)[key]?.className"
                   :style="getStyles(key)"

package/lib/components/STableCell.vue

@@ -35,8 +35,8 @@ const computedCell = computed<TableCell | undefined>(() =>
   <div class="STableCell" :class="[className, `col-${name}`]">
     <STableCellText
       v-if="!computedCell || computedCell.type === 'text'"
-      :value="value"
-      :record="record"
+      :value
+      :record
       :align="computedCell?.align"
       :icon="computedCell?.icon"
       :text="computedCell?.value"
@@ -47,8 +47,8 @@ const computedCell = computed<TableCell | undefined>(() =>
     />
     <STableCellNumber
       v-else-if="computedCell.type === 'number'"
-      :value="value"
-      :record="record"
+      :value
+      :record
       :align="computedCell.align"
       :icon="computedCell.icon"
       :number="computedCell.value"
@@ -90,8 +90,8 @@ const computedCell = computed<TableCell | undefined>(() =>
     />
     <STableCellAvatar
       v-else-if="computedCell.type === 'avatar'"
-      :value="value"
-      :record="record"
+      :value
+      :record
       :image="computedCell.image"
       :name="computedCell.name"
       :link="computedCell.link"
@@ -108,7 +108,7 @@ const computedCell = computed<TableCell | undefined>(() =>
     />
     <STableCellActions
       v-else-if="computedCell.type === 'actions'"
-      :record="record"
+      :record
       :actions="computedCell.actions"
     />
     <STableCellCustom
@@ -122,8 +122,8 @@ const computedCell = computed<TableCell | undefined>(() =>
     <component
       v-else-if="computedCell.type === 'component'"
       :is="computedCell.component"
-      :value="value"
-      :record="record"
+      :value
+      :record
       v-bind="computedCell.props"
     />
   </div>

package/lib/components/STableCellAvatar.vue

@@ -22,7 +22,7 @@ defineProps<{
       @click="() => onClick?.(value, record)"
     >
       <div v-if="image || name" class="avatar">
-        <SAvatar size="mini" :avatar="image" :name="name" />
+        <SAvatar size="mini" :avatar="image" :name />
       </div>
       <span v-if="name" class="name">
         {{ name }}

package/lib/components/STableCellAvatars.vue

@@ -50,7 +50,7 @@ const displayNames = computed(() => {
       <div v-if="displayAvatars.length" class="avatars">
         <div v-for="(avatar, index) in displayAvatars" :key="index" class="avatar">
           <div class="avatar-box">
-            <SAvatar size="mini" :avatar="avatar.image" :name="avatar.name" :tooltip="tooltip" />
+            <SAvatar size="mini" :avatar="avatar.image" :name="avatar.name" :tooltip />
           </div>
         </div>
         <div v-if="avatarDiff > 0" class="avatar">

package/lib/components/STableCellIndicator.vue

@@ -9,7 +9,7 @@ defineProps<{
 
 <template>
   <div class="STableCellIndicator" :class="[state]">
-    <SIndicator size="nano" :state="state" />
+    <SIndicator size="nano" :state />
     <div v-if="label" class="text">{{ label }}</div>
   </div>
 </template>

package/lib/components/STableCellState.vue

@@ -12,7 +12,7 @@ defineProps<{
     <SState
       v-if="state"
       size="mini"
-      :mode="mode"
+      :mode
       :label="state"
     />
   </div>

package/lib/components/STableHeader.vue

@@ -32,7 +32,7 @@ const stats = computed(() => {
         </div>
       </div>
       <div v-if="menu && menu.length" class="menu">
-        <STableHeaderMenu :menu="menu" />
+        <STableHeaderMenu :menu />
       </div>
     </div>
   </div>

package/lib/components/STableHeaderActionItem.vue

@@ -13,9 +13,9 @@ withDefaults(defineProps<TableHeaderAction>(), {
   <div v-if="show" class="STableHeaderActionItem">
     <SButton
       size="mini"
-      :mode="mode"
-      :label="label"
-      :label-mode="labelMode"
+      :mode
+      :label
+      :label-mode
       @click="onClick"
     />
   </div>

package/lib/components/STooltip.vue

@@ -97,7 +97,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <component ref="root" :is="tag" class="STooltip" :class="rootClasses" :tabindex="tabindex">
+  <component ref="root" :is="tag" class="STooltip" :class="rootClasses" :tabindex>
     <component :is="triggerTag" class="trigger" ref="trigger">
       <slot />
     </component>

package/lib/support/Day.ts

@@ -132,3 +132,7 @@ export function isHms(value: unknown, required: HmsType[] = ['h', 'm', 's']): va
     }, [])
     .every((key) => value[key] === null || isString(value[key]))
 }
+
+export function isDay(value: unknown): value is Day {
+  return dayjs.isDayjs(value)
+}

package/lib/validation/rules/after.ts

@@ -0,0 +1,16 @@
+import { type Day } from '../../support/Day'
+import { createRule } from '../Rule'
+import { after as baseAfter } from '../validators/after'
+
+export const message = {
+  en: (date: string) => `Date must be after ${date}.`,
+  ja: (date: string) => `${date}より後の日付を指定してください。`
+}
+
+export function after(date: Day, msg?: string) {
+  return createRule({
+    message: ({ lang }) => msg ?? message[lang](date.format('YYYY-MM-DD')),
+    optional: true,
+    validation: (value) => baseAfter(value, date)
+  })
+}

package/lib/validation/rules/afterOrEqual.ts

@@ -0,0 +1,16 @@
+import { type Day } from '../../support/Day'
+import { createRule } from '../Rule'
+import { afterOrEqual as baseAfterOrEqual } from '../validators/afterOrEqual'
+
+export const message = {
+  en: (date: string) => `Date must be after or equal to ${date}.`,
+  ja: (date: string) => `${date}より後、または同じ日付を指定してください。`
+}
+
+export function afterOrEqual(date: Day, msg?: string) {
+  return createRule({
+    message: ({ lang }) => msg ?? message[lang](date.format('YYYY-MM-DD')),
+    optional: true,
+    validation: (value) => baseAfterOrEqual(value, date)
+  })
+}

package/lib/validation/rules/before.ts

@@ -0,0 +1,16 @@
+import { type Day } from '../../support/Day'
+import { createRule } from '../Rule'
+import { before as baseBefore } from '../validators/before'
+
+export const message = {
+  en: (date: string) => `Date must be before ${date}.`,
+  ja: (date: string) => `${date}より前の日付を指定してください。`
+}
+
+export function before(date: Day, msg?: string) {
+  return createRule({
+    message: ({ lang }) => msg ?? message[lang](date.format('YYYY-MM-DD')),
+    optional: true,
+    validation: (value) => baseBefore(value, date)
+  })
+}

package/lib/validation/rules/beforeOrEqual.ts

@@ -0,0 +1,16 @@
+import { type Day } from '../../support/Day'
+import { createRule } from '../Rule'
+import { beforeOrEqual as baseBeforeOrEqual } from '../validators/beforeOrEqual'
+
+export const message = {
+  en: (date: string) => `Date must be before or equal to ${date}.`,
+  ja: (date: string) => `${date}より前、または同じ日付を指定してください。`
+}
+
+export function beforeOrEqual(date: Day, msg?: string) {
+  return createRule({
+    message: ({ lang }) => msg ?? message[lang](date.format('YYYY-MM-DD')),
+    optional: true,
+    validation: (value) => baseBeforeOrEqual(value, date)
+  })
+}

package/lib/validation/rules/index.ts

@@ -1,4 +1,8 @@
 export { and, not, or } from '@vuelidate/validators'
+export { after } from './after'
+export { afterOrEqual } from './afterOrEqual'
+export { before } from './before'
+export { beforeOrEqual } from './beforeOrEqual'
 export { checked } from './checked'
 export { decimal } from './decimal'
 export { decimalOrHyphen } from './decimalOrHyphen'

package/lib/validation/validators/after.ts

@@ -0,0 +1,9 @@
+import { type Day, isDay } from '../../support/Day'
+
+export function after(value: unknown, date: Day): boolean {
+  if (!isDay(value) || !isDay(date)) {
+    return false
+  }
+
+  return value.isAfter(date)
+}

package/lib/validation/validators/afterOrEqual.ts

@@ -0,0 +1,9 @@
+import { type Day, isDay } from '../../support/Day'
+
+export function afterOrEqual(value: unknown, date: Day): boolean {
+  if (!isDay(value) || !isDay(date)) {
+    return false
+  }
+
+  return value.isAfter(date) || value.isSame(date)
+}