@globalbrain/sefirot 3.22.1 → 3.24.0

package/lib/components/SInputAddon.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import IconCaretDown from '@iconify-icons/ph/caret-down-bold'
+import { computed, ref } from 'vue'
 import {
   type DropdownSection,
   getSelectedOption,
   useManualDropdownPosition
-} from 'sefirot/composables/Dropdown'
-import { useFlyout } from 'sefirot/composables/Flyout'
-import { computed, ref } from 'vue'
+} from '../composables/Dropdown'
+import { useFlyout } from '../composables/Flyout'
 import { isString } from '../support/Utils'
 import SDropdown from './SDropdown.vue'
 import SIcon from './SIcon.vue'

package/lib/components/STableCellNumber.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { format } from 'sefirot/support/Num'
 import { computed } from 'vue'
 import { type TableCellValueColor } from '../composables/Table'
+import { format } from '../support/Num'
 import SIcon from './SIcon.vue'
 import SLink from './SLink.vue'
 

package/lib/composables/Api.ts

@@ -30,7 +30,7 @@ export function useQuery<Data = any>(
   const loading = ref(false)
   const data = ref<Data | undefined>()
 
-  if (options.immediate !== false) {
+  if (options.immediate !== false && !import.meta.env.SSR) {
     execute()
   }
 

package/lib/http/Http.ts

@@ -1,12 +1,36 @@
 import { parse as parseContentDisposition } from '@tinyhttp/content-disposition'
 import { parse as parseCookie } from '@tinyhttp/cookie'
 import FileSaver from 'file-saver'
-import { $fetch, type FetchOptions } from 'ofetch'
+import { type FetchOptions, type FetchRequest, type FetchResponse, ofetch } from 'ofetch'
 import { stringify } from 'qs'
 
+export interface HttpClient {
+  <T = any>(request: FetchRequest, options?: Omit<FetchOptions, 'method'>): Promise<T>
+  raw<T = any>(request: FetchRequest, options?: Omit<FetchOptions, 'method'>): Promise<FetchResponse<T>>
+}
+
+export interface HttpOptions {
+  baseUrl?: string
+  xsrfUrl?: string | false
+  client?: HttpClient
+}
+
 export class Http {
-  static base: string | undefined = undefined
-  static xsrfUrl: string | false = '/api/csrf-cookie'
+  private static baseUrl: string | undefined = undefined
+  private static xsrfUrl: string | false = '/api/csrf-cookie'
+  private static client: HttpClient = ofetch
+
+  static config(options: HttpOptions) {
+    if (options.baseUrl) {
+      Http.baseUrl = options.baseUrl
+    }
+    if (options.xsrfUrl !== undefined) {
+      Http.xsrfUrl = options.xsrfUrl
+    }
+    if (options.client) {
+      Http.client = options.client
+    }
+  }
 
   private async ensureXsrfToken(): Promise<string | undefined> {
     if (!Http.xsrfUrl) {
@@ -40,7 +64,7 @@ export class Http {
     return [
       `${url}${queryString ? `?${queryString}` : ''}`,
       {
-        baseURL: Http.base,
+        baseURL: Http.baseUrl,
         method,
         credentials: 'include',
         ...options,
@@ -54,11 +78,11 @@ export class Http {
   }
 
   private async performRequest<T>(url: string, options: FetchOptions = {}) {
-    return $fetch<T, any>(...(await this.buildRequest(url, options)))
+    return Http.client<T>(...(await this.buildRequest(url, options)))
   }
 
   private async performRequestRaw<T>(url: string, options: FetchOptions = {}) {
-    return $fetch.raw<T, any>(...(await this.buildRequest(url, options)))
+    return Http.client.raw<T>(...(await this.buildRequest(url, options)))
   }
 
   async get<T = any>(url: string, options?: FetchOptions): Promise<T> {
@@ -116,25 +140,23 @@ export class Http {
     const fd = form || new FormData()
     let formKey: string
 
-    for (const property in obj) {
-      if (Reflect.has(obj, property)) {
-        if (namespace) {
-          formKey = `${namespace}[${property}]`
-        } else {
-          formKey = property
-        }
+    Object.keys(obj).forEach((property) => {
+      if (namespace) {
+        formKey = `${namespace}[${property}]`
+      } else {
+        formKey = property
+      }
 
-        if (obj[property] === undefined) {
-          continue
-        }
+      if (obj[property] === undefined) {
+        return
+      }
 
-        if (typeof obj[property] === 'object' && !(obj[property] instanceof Blob)) {
-          this.objectToFormData(obj[property], fd, property)
-        } else {
-          fd.append(formKey, obj[property])
-        }
+      if (typeof obj[property] === 'object' && !(obj[property] instanceof Blob)) {
+        this.objectToFormData(obj[property], fd, property)
+      } else {
+        fd.append(formKey, obj[property])
       }
-    }
+    })
 
     return fd
   }

package/lib/support/Day.ts

@@ -2,6 +2,7 @@ import dayjs, { type ConfigType, type Dayjs } from 'dayjs'
 import PluginRelativeTime from 'dayjs/plugin/relativeTime'
 import PluginTimezone from 'dayjs/plugin/timezone'
 import PluginUtc from 'dayjs/plugin/utc'
+import { isNumber, isObject, isString } from './Utils'
 
 dayjs.extend(PluginUtc)
 dayjs.extend(PluginTimezone)
@@ -19,6 +20,14 @@ export interface Ymd {
   date: number | null
 }
 
+export type YmdType = 'y' | 'm' | 'd'
+
+export const YmdMap = {
+  y: 'year',
+  m: 'month',
+  d: 'date'
+} as const
+
 /**
  * The hour, minute, and second object interface.
  */
@@ -28,6 +37,14 @@ export interface Hms {
   second: string | null
 }
 
+export type HmsType = 'h' | 'm' | 's'
+
+export const HmsMap = {
+  h: 'hour',
+  m: 'minute',
+  s: 'second'
+} as const
+
 export function day(input?: Input): Day {
   return dayjs(input)
 }
@@ -69,3 +86,29 @@ export function createHms(
     second
   }
 }
+
+export function isYmd(value: unknown, required: YmdType[] = ['y', 'm', 'd']): value is Ymd {
+  if (!isObject(value)) {
+    return false
+  }
+
+  return required
+    .reduce<string[]>((keys, type) => {
+      keys.push(YmdMap[type])
+      return keys
+    }, [])
+    .every((key) => value[key] === null || isNumber(value[key]))
+}
+
+export function isHms(value: unknown, required: HmsType[] = ['h', 'm', 's']): value is Hms {
+  if (!isObject(value)) {
+    return false
+  }
+
+  return required
+    .reduce<string[]>((keys, type) => {
+      keys.push(HmsMap[type])
+      return keys
+    }, [])
+    .every((key) => value[key] === null || isString(value[key]))
+}

package/lib/validation/Rule.ts

@@ -5,7 +5,7 @@ import { type Lang, useLang } from '../composables/Lang'
 export interface RuleOptions {
   optional?: boolean
   message(params: MessageProps): string
-  validation(value: unknown): boolean
+  validation(value: unknown): boolean | Promise<boolean>
 }
 
 export interface MessageProps extends VMessageProps {

package/lib/validation/rules/checked.ts

@@ -1,9 +1,15 @@
-import { helpers } from '@vuelidate/validators'
+import { createRule } from '../Rule'
 import { checked as baseChecked } from '../validators/checked'
 
+export const message = {
+  en: 'You must check the field.',
+  ja: 'この項目は選択が必須です。'
+}
+
 export function checked(msg?: string) {
-  return helpers.withMessage(
-    () => msg ?? 'You must check the field.',
-    (value: boolean) => !helpers.req(value) || baseChecked(value)
-  )
+  return createRule({
+    message: ({ lang }) => msg ?? message[lang],
+    optional: true,
+    validation: baseChecked
+  })
 }

package/lib/validation/rules/decimal.ts

@@ -1,9 +1,14 @@
-import { and, decimal as baseDecimal, helpers, not } from '@vuelidate/validators'
-import { hyphen } from '../validators'
+import { createRule } from '../Rule'
+import { decimal as baseDecimal, hyphen } from '../validators'
+
+export const message = {
+  en: 'The value must be valid decimal numbers.',
+  ja: 'この値は小数または10進数である必要があります。'
+}
 
 export function decimal(msg?: string) {
-  return helpers.withMessage(
-    () => msg ?? 'The value must be valid decimal numbers.',
-    and(not(hyphen), baseDecimal)
-  )
+  return createRule({
+    message: ({ lang }) => msg ?? message[lang],
+    validation: (value) => !hyphen(value) && baseDecimal(value)
+  })
 }

package/lib/validation/rules/decimalOrHyphen.ts

@@ -1,8 +1,14 @@
-import { decimal as baseDecimal, helpers } from '@vuelidate/validators'
+import { createRule } from '../Rule'
+import { decimal as baseDecimal, hyphen } from '../validators'
+
+export const message = {
+  en: 'The value must be valid decimal numbers or just a hyphen.',
+  ja: 'この値は小数、10進数、またはハイフンである必要があります。'
+}
 
 export function decimalOrHyphen(msg?: string) {
-  return helpers.withMessage(
-    () => msg ?? 'The value must be valid decimal numbers or just a hyphen.',
-    baseDecimal
-  )
+  return createRule({
+    message: ({ lang }) => msg ?? message[lang],
+    validation: (value) => hyphen(value) || baseDecimal(value)
+  })
 }

package/lib/validation/rules/email.ts

@@ -1,8 +1,14 @@
-import { email as baseEmail, helpers } from '@vuelidate/validators'
+import { createRule } from '../Rule'
+import { email as baseEmail } from '../validators'
+
+export const message = {
+  en: 'The Email is invalid.',
+  ja: 'Emailの形式が正しくありません。'
+}
 
 export function email(msg?: string) {
-  return helpers.withMessage(
-    () => msg ?? 'The Email is invalid.',
-    baseEmail
-  )
+  return createRule({
+    message: ({ lang }) => msg ?? message[lang],
+    validation: baseEmail
+  })
 }

package/lib/validation/rules/fileExtension.ts

@@ -1,11 +1,15 @@
-import { helpers } from '@vuelidate/validators'
+import { createRule } from '../Rule'
 import { fileExtension as baseFileExtension } from '../validators/fileExtension'
 
+export const message = {
+  en: 'The file extension is invalid.',
+  ja: 'ファイル拡張子が正しくありません。'
+}
+
 export function fileExtension(extensions: string[], msg?: string) {
-  return helpers.withMessage(
-    () => msg ?? 'The file extension is invalid.',
-    (value: File) => {
-      return !helpers.req(value) || baseFileExtension(value, extensions)
-    }
-  )
+  return createRule({
+    message: ({ lang }) => msg ?? message[lang],
+    optional: true,
+    validation: (value) => baseFileExtension(value, extensions)
+  })
 }

package/lib/validation/rules/hms.ts

@@ -1,14 +1,17 @@
-import { helpers } from '@vuelidate/validators'
-import { type Hms } from '../../support/Day'
+import { createRule } from '../Rule'
 import { hms as baseHms } from '../validators/hms'
 
 type HmsType = 'h' | 'm' | 's'
 
+export const message = {
+  en: 'The time is invalid.',
+  ja: '時間表記が正しくありません。'
+}
+
 export function hms(required?: HmsType[], msg?: string) {
-  return helpers.withMessage(
-    () => msg ?? 'The time is invalid.',
-    (value: Hms) => {
-      return !helpers.req(value) || baseHms(value, required)
-    }
-  )
+  return createRule({
+    message: ({ lang }) => msg ?? message[lang],
+    optional: true,
+    validation: (value) => baseHms(value, required)
+  })
 }

package/lib/validation/rules/maxFileSize.ts

@@ -1,16 +1,15 @@
-import { helpers } from '@vuelidate/validators'
+import { createRule } from '../Rule'
 import { maxFileSize as baseMaxFileSize } from '../validators/maxFileSize'
 
+export const message = {
+  en: (size: string) => `The file must be smaller than or equal to ${size}.`,
+  ja: (size: string) => `ファイルは${size}よりも小さい必要があります。`
+}
+
 export function maxFileSize(size: string, msg?: string) {
-  return helpers.withParams(
-    { size },
-    helpers.withMessage(
-      ({ $params }) => {
-        return msg ?? `The file must be smaller than ${$params.size}.`
-      },
-      (value: File) => {
-        return !helpers.req(value) || baseMaxFileSize(value, size)
-      }
-    )
-  )
+  return createRule({
+    message: ({ lang }) => msg ?? message[lang](size),
+    optional: true,
+    validation: (value) => baseMaxFileSize(value, size)
+  })
 }

package/lib/validation/rules/maxLength.ts

@@ -1,10 +1,15 @@
-import { maxLength as baseMaxLength, helpers } from '@vuelidate/validators'
+import { createRule } from '../Rule'
+import { maxLength as baseMaxLength } from '../validators'
+
+export const message = {
+  en: (length: number) => `The value must be less than or equal to ${length} characters.`,
+  ja: (length: number) => `この値は、最大${length}文字までです。`
+}
 
 export function maxLength(length: number, msg?: string) {
-  return helpers.withMessage(
-    ({ $params }) => {
-      return msg ?? `The value must be less or equal to ${($params as any).max} characters.`
-    },
-    baseMaxLength(length)
-  )
+  return createRule({
+    message: ({ lang }) => msg ?? message[lang](length),
+    optional: true,
+    validation: (value) => baseMaxLength(value, length)
+  })
 }

package/lib/validation/rules/maxTotalFileSize.ts

@@ -1,16 +1,15 @@
-import { helpers } from '@vuelidate/validators'
+import { createRule } from '../Rule'
 import { maxTotalFileSize as baseMaxTotalFileSize } from '../validators/maxTotalFileSize'
 
+export const message = {
+  en: (size: string) => `The total file size must be smaller than or equal to ${size}.`,
+  ja: (size: string) => `合計ファイルサイズは最大${size}までです。`
+}
+
 export function maxTotalFileSize(size: string, msg?: string) {
-  return helpers.withParams(
-    { size },
-    helpers.withMessage(
-      ({ $params }) => {
-        return msg ?? `The total file size must be smaller than ${$params.size}.`
-      },
-      (files: File[]) => {
-        return !helpers.req(files) || baseMaxTotalFileSize(files, size)
-      }
-    )
-  )
+  return createRule({
+    message: ({ lang }) => msg ?? message[lang](size),
+    optional: true,
+    validation: (value) => baseMaxTotalFileSize(value, size)
+  })
 }

package/lib/validation/rules/maxValue.ts

@@ -1,10 +1,14 @@
-import { maxValue as baseMaxValue, helpers } from '@vuelidate/validators'
+import { createRule } from '../Rule'
+import { maxValue as baseMaxValue } from '../validators'
 
-export function maxValue(value: number, msg?: string) {
-  return helpers.withMessage(
-    ({ $params }) => {
-      return msg ?? `The value must be less or equal to ${($params as any).max}.`
-    },
-    baseMaxValue(value)
-  )
+export const message = {
+  en: (max: number) => `The value must be less than or equal to ${max}.`,
+  ja: (max: number) => `この値は最大${max}です。`
+}
+
+export function maxValue(max: number, msg?: string) {
+  return createRule({
+    message: ({ lang }) => msg ?? message[lang](max),
+    validation: (value) => baseMaxValue(value, max)
+  })
 }

package/lib/validation/rules/minLength.ts

@@ -1,10 +1,15 @@
-import { minLength as baseMinLength, helpers } from '@vuelidate/validators'
+import { createRule } from '../Rule'
+import { minLength as baseMinLength } from '../validators'
+
+export const message = {
+  en: (min: number) => `The value must be greater than or equal to ${min} characters.`,
+  ja: (min: number) => `この値は最小${min}文字です。`
+}
 
 export function minLength(length: number, msg?: string) {
-  return helpers.withMessage(
-    ({ $params }) => {
-      return msg ?? `The value must be greater or equal to ${($params as any).min} characters.`
-    },
-    baseMinLength(length)
-  )
+  return createRule({
+    message: ({ lang }) => msg ?? message[lang](length),
+    optional: true,
+    validation: (value) => baseMinLength(value, length)
+  })
 }

package/lib/validation/rules/minValue.ts

@@ -1,10 +1,14 @@
-import { minValue as baseMinValue, helpers } from '@vuelidate/validators'
+import { createRule } from '../Rule'
+import { minValue as baseMinValue } from '../validators'
 
-export function minValue(value: number, msg?: string) {
-  return helpers.withMessage(
-    ({ $params }) => {
-      return msg ?? `The value must be greater or equal to ${($params as any).min}.`
-    },
-    baseMinValue(value)
-  )
+export const message = {
+  en: (min: number) => `The value must be greater than or equal to ${min}.`,
+  ja: (min: number) => `この値は最大${min}です。`
+}
+
+export function minValue(min: number, msg?: string) {
+  return createRule({
+    message: ({ lang }) => msg ?? message[lang](min),
+    validation: (value) => baseMinValue(value, min)
+  })
 }

package/lib/validation/rules/month.ts

@@ -1,11 +1,15 @@
-import { helpers } from '@vuelidate/validators'
-import { month as baseMonth } from '../validators/month'
+import { createRule } from '../Rule'
+import { month as baseMonth } from '../validators'
+
+export const message = {
+  en: 'The month is invalid.',
+  ja: '月が正しくありません。'
+}
 
 export function month(msg?: string) {
-  return helpers.withMessage(
-    () => msg ?? 'The month is invalid.',
-    (value: number) => {
-      return !helpers.req(value) || baseMonth(value)
-    }
-  )
+  return createRule({
+    message: ({ lang }) => msg ?? message[lang],
+    optional: true,
+    validation: baseMonth
+  })
 }

package/lib/validation/rules/negativeInteger.ts

@@ -1,9 +1,14 @@
-import { helpers } from '@vuelidate/validators'
+import { createRule } from '../Rule'
 import { negativeInteger as baseNegativeInteger } from '../validators'
 
+export const message = {
+  en: 'The value must be valid negative integer.',
+  ja: 'この値は負の整数である必要があります。'
+}
+
 export function negativeInteger(msg?: string) {
-  return helpers.withMessage(
-    () => msg ?? 'The value must be valid negative integer.',
-    baseNegativeInteger
-  )
+  return createRule({
+    message: ({ lang }) => msg ?? message[lang],
+    validation: baseNegativeInteger
+  })
 }

package/lib/validation/rules/positiveInteger.ts

@@ -1,9 +1,14 @@
-import { helpers } from '@vuelidate/validators'
+import { createRule } from '../Rule'
 import { positiveInteger as basePositiveInteger } from '../validators'
 
+export const message = {
+  en: 'The value must be valid positive integer.',
+  ja: 'この値は正の整数である必要があります。'
+}
+
 export function positiveInteger(msg?: string) {
-  return helpers.withMessage(
-    () => msg ?? 'The value must be valid positive integer.',
-    basePositiveInteger
-  )
+  return createRule({
+    message: ({ lang }) => msg ?? message[lang],
+    validation: basePositiveInteger
+  })
 }

package/lib/validation/rules/required.ts

@@ -9,6 +9,6 @@ export const message = {
 export function required(msg?: string) {
   return createRule({
     message: ({ lang }) => msg ?? message[lang],
-    validation: (value) => baseRequired(value)
+    validation: baseRequired
   })
 }

package/lib/validation/rules/requiredHms.ts

@@ -1,14 +1,16 @@
-import { helpers } from '@vuelidate/validators'
-import { type Hms } from '../../support/Day'
+import { createRule } from '../Rule'
 import { requiredHms as baseRequiredHms } from '../validators/requiredHms'
 
 type HmsType = 'h' | 'm' | 's'
 
+export const message = {
+  en: 'The field is required.',
+  ja: 'この項目は必須です。'
+}
+
 export function requiredHms(required?: HmsType[], msg?: string) {
-  return helpers.withMessage(
-    () => msg ?? 'The field is required.',
-    (value: Hms) => {
-      return !helpers.req(value) || baseRequiredHms(value, required)
-    }
-  )
+  return createRule({
+    message: ({ lang }) => msg ?? message[lang],
+    validation: (value) => baseRequiredHms(value, required)
+  })
 }

package/lib/validation/rules/requiredIf.ts

@@ -1,11 +1,17 @@
-import { requiredIf as baseRequiredIf, helpers } from '@vuelidate/validators'
+import { createRule } from '../Rule'
+import { type RequiredIfCondition, requiredIf as baseRequiredIf } from '../validators'
+
+export const message = {
+  en: 'The field is required.',
+  ja: 'この項目は必須です。'
+}
 
 export function requiredIf(
-  prop: boolean | string | (() => boolean | Promise<boolean>),
+  condition: RequiredIfCondition,
   msg?: string
 ) {
-  return helpers.withMessage(
-    () => msg ?? 'The field is required.',
-    baseRequiredIf(prop)
-  )
+  return createRule({
+    message: ({ lang }) => msg ?? message[lang],
+    validation: (value) => baseRequiredIf(value, condition)
+  })
 }

package/lib/validation/rules/requiredYmd.ts

@@ -1,14 +1,17 @@
-import { helpers } from '@vuelidate/validators'
-import { type Ymd } from '../../support/Day'
+import { createRule } from '../Rule'
 import { requiredYmd as baseRequiredYmd } from '../validators/requiredYmd'
 
 type YmdType = 'y' | 'm' | 'd'
 
+export const message = {
+  en: 'The field is required.',
+  ja: 'この項目は必須です。'
+}
+
 export function requiredYmd(required?: YmdType[], msg?: string) {
-  return helpers.withMessage(
-    () => msg ?? 'The field is required.',
-    (value: Ymd) => {
-      return !helpers.req(value) || baseRequiredYmd(value, required)
-    }
-  )
+  return createRule({
+    message: ({ lang }) => msg ?? message[lang],
+    optional: true,
+    validation: (value) => baseRequiredYmd(value, required)
+  })
 }

package/lib/validation/rules/rule.ts

@@ -1,8 +1,14 @@
-import { helpers } from '@vuelidate/validators'
+import { createRule } from '../Rule'
 
-export function rule(validation: (value: any) => boolean, msg?: string) {
-  return helpers.withMessage(
-    () => msg ?? 'The value is invalid.',
-    (value: any) => !helpers.req(value) || validation(value)
-  )
+export const message = {
+  en: 'The value is invalid.',
+  ja: 'この値は正しくありません。'
+}
+
+export function rule(validation: (value: unknown) => boolean, msg?: string) {
+  return createRule({
+    message: ({ lang }) => msg ?? message[lang],
+    optional: true,
+    validation: (value) => validation(value)
+  })
 }

package/lib/validation/rules/url.ts

@@ -1,8 +1,14 @@
-import { url as baseUrl, helpers } from '@vuelidate/validators'
+import { createRule } from '../Rule'
+import { url as baseUrl } from '../validators'
+
+export const message = {
+  en: 'The URL is invalid.',
+  ja: 'URLの形式が正しくありません。'
+}
 
 export function url(msg?: string) {
-  return helpers.withMessage(
-    () => msg ?? 'The URL is invalid.',
-    baseUrl
-  )
+  return createRule({
+    message: ({ lang }) => msg ?? message[lang],
+    validation: baseUrl
+  })
 }

package/lib/validation/rules/ymd.ts

@@ -1,14 +1,17 @@
-import { helpers } from '@vuelidate/validators'
-import { type Ymd } from '../../support/Day'
+import { createRule } from '../Rule'
 import { ymd as baseYmd } from '../validators/ymd'
 
 type YmdType = 'y' | 'm' | 'd'
 
+export const message = {
+  en: 'The field is required.',
+  ja: 'この項目は必須です。'
+}
+
 export function ymd(required?: YmdType[], msg?: string) {
-  return helpers.withMessage(
-    () => msg ?? 'The date is invalid.',
-    (value: Ymd) => {
-      return !helpers.req(value) || baseYmd(value, required)
-    }
-  )
+  return createRule({
+    message: ({ lang }) => msg ?? message[lang],
+    optional: true,
+    validation: (value) => baseYmd(value, required)
+  })
 }

package/lib/validation/rules/zeroOrNegativeInteger.ts

@@ -1,9 +1,14 @@
-import { helpers, or } from '@vuelidate/validators'
-import { negativeInteger, zero } from '../validators'
+import { createRule } from '../Rule'
+import { negativeInteger as baseNegativeInteger, zero } from '../validators'
+
+export const message = {
+  en: 'The value must be zero or valid negative integer.',
+  ja: 'この値はゼロまたは負の整数である必要があります。'
+}
 
 export function zeroOrNegativeInteger(msg?: string) {
-  return helpers.withMessage(
-    () => msg ?? 'The value must be zero or valid negative integer.',
-    or(zero, negativeInteger)
-  )
+  return createRule({
+    message: ({ lang }) => msg ?? message[lang],
+    validation: (value) => zero(value) || baseNegativeInteger(value)
+  })
 }

package/lib/validation/rules/zeroOrPositiveInteger.ts

@@ -1,9 +1,14 @@
-import { helpers, or } from '@vuelidate/validators'
-import { positiveInteger, zero } from '../validators'
+import { createRule } from '../Rule'
+import { positiveInteger as basePositiveInteger, zero } from '../validators'
+
+export const message = {
+  en: 'The value must be zero or valid positive integer.',
+  ja: 'この値はゼロまたは正の整数である必要があります。'
+}
 
 export function zeroOrPositiveInteger(msg?: string) {
-  return helpers.withMessage(
-    () => msg ?? 'The value must be zero or valid positive integer.',
-    or(zero, positiveInteger)
-  )
+  return createRule({
+    message: ({ lang }) => msg ?? message[lang],
+    validation: (value) => zero(value) || basePositiveInteger(value)
+  })
 }

package/lib/validation/validators/checked.ts

@@ -1,3 +1,3 @@
-export function checked(value: boolean): boolean {
+export function checked(value: unknown): boolean {
   return value === true
 }

package/lib/validation/validators/decimal.ts

@@ -0,0 +1,11 @@
+import { isNumber, isString } from '../../support/Utils'
+
+const regExp = /^[-]?\d*(\.\d+)?$/
+
+export function decimal(value: unknown): boolean {
+  if (!(isString(value) || isNumber(value))) {
+    return false
+  }
+
+  return regExp.test(String(value))
+}

package/lib/validation/validators/email.ts

@@ -0,0 +1,12 @@
+import { isString } from '../../support/Utils'
+
+/* eslint-disable-next-line no-control-regex */
+const regExp = /^(?:[A-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[A-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0B\x0C\x0E-\x1F\x21\x23-\x5B\x5D-\x7F]|[\x01-\x09\x0B\x0C\x0E-\x7F])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9]{2,}(?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0B\x0C\x0E-\x1F\x21-\x5A\x53-\x7F]|\\[\x01-\x09\x0B\x0C\x0E-\x7F])+)\])$/i
+
+export function email(value: string): boolean {
+  if (!isString(value)) {
+    return false
+  }
+
+  return regExp.test(value)
+}

package/lib/validation/validators/fileExtension.ts

@@ -1,7 +1,12 @@
 import { getExtension } from '../../support/File'
+import { isFile } from '../../support/Utils'
 
-export function fileExtension(file: File, extensions: string[]): boolean {
-  const fileExtension = getExtension(file)
+export function fileExtension(value: unknown, extensions: string[]): boolean {
+  if (!isFile(value)) {
+    return false
+  }
+
+  const fileExtension = getExtension(value)
 
   return extensions.some((extension) => {
     // If the extention option is `jpg`, we'll consider other variants such as

package/lib/validation/validators/hms.ts

@@ -1,22 +1,18 @@
-import { type Hms } from '../../support/Day'
+import { HmsMap, type HmsType, isHms } from '../../support/Day'
 
-type HmsType = 'h' | 'm' | 's'
+export function hms(value: unknown, required: HmsType[] = ['h', 'm', 's']): boolean {
+  if (!isHms(value, required)) {
+    return false
+  }
 
-const HmsMap = {
-  h: 'hour',
-  m: 'minute',
-  s: 'second'
-} as const
-
-export function hms(hms: Hms, required: HmsType[] = ['h', 'm', 's']): boolean {
   return required.every((r) => {
-    const value = hms[HmsMap[r]]
+    const _value = value[HmsMap[r]]
 
-    if (value === null) {
+    if (_value === null) {
       return true
     }
 
-    const valueAsNumber = Number(value)
+    const valueAsNumber = Number(_value)
 
     return (r === 'h')
       ? (valueAsNumber >= 0 && valueAsNumber < 24)

package/lib/validation/validators/hyphen.ts

@@ -1,3 +1,3 @@
-export function hyphen(value: string): boolean {
+export function hyphen(value: unknown): boolean {
   return value === '-'
 }

package/lib/validation/validators/index.ts

@@ -1,14 +1,22 @@
 export * from './checked'
+export * from './decimal'
+export * from './email'
 export * from './fileExtension'
 export * from './hms'
 export * from './hyphen'
 export * from './maxFileSize'
+export * from './maxLength'
 export * from './maxTotalFileSize'
+export * from './maxValue'
+export * from './minLength'
+export * from './minValue'
 export * from './month'
 export * from './negativeInteger'
 export * from './positiveInteger'
 export * from './required'
 export * from './requiredHms'
+export * from './requiredIf'
 export * from './requiredYmd'
+export * from './url'
 export * from './ymd'
 export * from './zero'

package/lib/validation/validators/maxFileSize.ts

@@ -1,4 +1,10 @@
-export function maxFileSize(file: File, size: string): boolean {
+import { isFile } from '../../support/Utils'
+
+export function maxFileSize(value: unknown, size: string): boolean {
+  if (!isFile(value)) {
+    return false
+  }
+
   const factor = /gb/i.test(size)
     ? 1e9
     : /mb/i.test(size)
@@ -6,5 +12,6 @@ export function maxFileSize(file: File, size: string): boolean {
       : /kb/i.test(size)
         ? 1e3
         : 1
-  return file.size <= factor * +size.replace(/[^\d\.]/g, '')
+
+  return value.size <= factor * +size.replace(/[^\d\.]/g, '')
 }

package/lib/validation/validators/maxLength.ts

@@ -0,0 +1,9 @@
+import { isArray, isString } from '../../support/Utils'
+
+export function maxLength(value: unknown, length: number): boolean {
+  if (!(isString(value) || isArray(value))) {
+    return false
+  }
+
+  return value.length <= length
+}

package/lib/validation/validators/maxTotalFileSize.ts

@@ -1,8 +1,14 @@
+import { isFile } from '../../support/Utils'
+
 /**
  * Validates if the total size of the given files is smaller than the
  * given size.
  */
-export function maxTotalFileSize(files: File[], size: string): boolean {
+export function maxTotalFileSize(value: unknown, size: string): boolean {
+  if (!isArrayOfFiles(value)) {
+    return false
+  }
+
   const factor = /gb/i.test(size)
     ? 1e9
     : /mb/i.test(size)
@@ -11,7 +17,11 @@ export function maxTotalFileSize(files: File[], size: string): boolean {
         ? 1e3
         : 1
 
-  const total = files.reduce((total, file) => total + file.size, 0)
+  const total = value.reduce((total, file) => total + file.size, 0)
 
   return total <= factor * +size.replace(/[^\d\.]/g, '')
 }
+
+function isArrayOfFiles(value: unknown): value is File[] {
+  return Array.isArray(value) && value.every((v) => isFile(v))
+}

package/lib/validation/validators/maxValue.ts

@@ -0,0 +1,7 @@
+export function maxValue(value: unknown, max: number) {
+  if (typeof value === 'string' || value instanceof Date) {
+    return +value <= max
+  }
+
+  return false
+}

package/lib/validation/validators/minLength.ts

@@ -0,0 +1,9 @@
+import { isArray, isString } from '../../support/Utils'
+
+export function minLength(value: unknown, length: number): boolean {
+  if (!(isString(value) || isArray(value))) {
+    return false
+  }
+
+  return value.length >= length
+}

package/lib/validation/validators/minValue.ts

@@ -0,0 +1,7 @@
+export function minValue(value: unknown, min: number) {
+  if (typeof value === 'string' || value instanceof Date) {
+    return +value >= min
+  }
+
+  return false
+}

package/lib/validation/validators/month.ts

@@ -1,3 +1,9 @@
-export function month(value: number): boolean {
+import { isNumber } from '../../support/Utils'
+
+export function month(value: unknown): boolean {
+  if (!isNumber(value)) {
+    return false
+  }
+
   return value > 0 && value < 13
 }

package/lib/validation/validators/negativeInteger.ts

@@ -1,3 +1,9 @@
-export function negativeInteger(value: number): boolean {
+import { isNumber } from '../../support/Utils'
+
+export function negativeInteger(value: unknown): boolean {
+  if (!isNumber(value)) {
+    return false
+  }
+
   return Number.isInteger(value) && value < 0
 }

package/lib/validation/validators/positiveInteger.ts

@@ -1,3 +1,9 @@
-export function positiveInteger(value: number): boolean {
+import { isNumber } from '../../support/Utils'
+
+export function positiveInteger(value: unknown): boolean {
+  if (!isNumber(value)) {
+    return false
+  }
+
   return Number.isInteger(value) && value > 0
 }

package/lib/validation/validators/requiredHms.ts

@@ -1,13 +1,9 @@
-import { type Hms } from '../../support/Day'
+import { HmsMap, type HmsType, isHms } from '../../support/Day'
 
-type HmsType = 'h' | 'm' | 's'
+export function requiredHms(value: unknown, required: HmsType[] = ['h', 'm', 's']): boolean {
+  if (!isHms(value, required)) {
+    return false
+  }
 
-const HmsMap = {
-  h: 'hour',
-  m: 'minute',
-  s: 'second'
-} as const
-
-export function requiredHms(hms: Hms, required: HmsType[] = ['h', 'm', 's']): boolean {
-  return required.every((r) => hms[HmsMap[r]] != null)
+  return required.every((r) => value[HmsMap[r]] != null)
 }

package/lib/validation/validators/requiredIf.ts

@@ -0,0 +1,19 @@
+import { required } from './required'
+
+export type RequiredIfCondition = boolean | string | (() => boolean) | (() => Promise<boolean>)
+
+export async function requiredIf(value: unknown, condition: RequiredIfCondition): Promise<boolean> {
+  if (typeof condition === 'boolean' && condition) {
+    return required(value)
+  }
+
+  if (typeof condition === 'string' && condition) {
+    return required(value)
+  }
+
+  if (typeof condition === 'function' && (await condition())) {
+    return required(value)
+  }
+
+  return true
+}

package/lib/validation/validators/requiredYmd.ts

@@ -1,13 +1,9 @@
-import { type Ymd } from '../../support/Day'
+import { YmdMap, type YmdType, isYmd } from '../../support/Day'
 
-type YmdType = 'y' | 'm' | 'd'
+export function requiredYmd(value: unknown, required: YmdType[] = ['y', 'm', 'd']): boolean {
+  if (!isYmd(value, required)) {
+    return false
+  }
 
-const YmdMap = {
-  y: 'year',
-  m: 'month',
-  d: 'date'
-} as const
-
-export function requiredYmd(ymd: Ymd, required: YmdType[] = ['y', 'm', 'd']): boolean {
-  return required.every((r) => ymd[YmdMap[r]] != null)
+  return required.every((r) => value[YmdMap[r]] != null)
 }

package/lib/validation/validators/url.ts

@@ -0,0 +1,11 @@
+import { isString } from '../../support/Utils'
+
+const regExp = /^(?:(?:(?:https?|ftp):)?\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z0-9\u00A1-\uFFFF][a-z0-9\u00A1-\uFFFF_-]{0,62})?[a-z0-9\u00A1-\uFFFF]\.)+(?:[a-z\u00A1-\uFFFF]{2,}\.?))(?::\d{2,5})?(?:[/?#]\S*)?$/i
+
+export function url(value: unknown): boolean {
+  if (!isString(value)) {
+    return false
+  }
+
+  return regExp.test(value)
+}

package/lib/validation/validators/ymd.ts

@@ -1,33 +1,29 @@
 import day from 'dayjs'
-import { type Ymd } from '../../support/Day'
+import { YmdMap, type YmdType, isYmd } from '../../support/Day'
 
-type YmdType = 'y' | 'm' | 'd'
+export function ymd(value: unknown, required: YmdType[] = ['y', 'm', 'd']): boolean {
+  if (!isYmd(value, required)) {
+    return false
+  }
 
-const YmdMap = {
-  y: 'year',
-  m: 'month',
-  d: 'date'
-} as const
-
-export function ymd(ymd: Ymd, required: YmdType[] = ['y', 'm', 'd']): boolean {
   return required.every((r) => {
-    const value = ymd[YmdMap[r]]
+    const _value = value[YmdMap[r]]
 
-    if (value === null) {
+    if (_value === null) {
       return true
     }
 
     if (r === 'y') {
-      return value > 0 && value <= 9999
+      return _value > 0 && _value <= 9999
     }
 
     if (r === 'm') {
-      return value > 0 && value <= 12
+      return _value > 0 && _value <= 12
     }
 
-    const d = day(new Date(2020, ymd.month ? ymd.month - 1 : 1, value))
+    const d = day(new Date(2020, value.month ? value.month - 1 : 1, _value))
 
-    if (d.month() + 1 !== (ymd.month ?? 1)) {
+    if (d.month() + 1 !== (value.month ?? 1)) {
       return false
     }
 

package/lib/validation/validators/zero.ts

@@ -1,3 +1,3 @@
-export function zero(value: number): boolean {
+export function zero(value: unknown): boolean {
   return value === 0
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@globalbrain/sefirot",
-  "version": "3.22.1",
-  "packageManager": "pnpm@8.14.0",
+  "version": "3.24.0",
+  "packageManager": "pnpm@8.14.1",
   "description": "Vue Components for Global Brain Design System.",
   "author": "Kia Ishii <ka.ishii@globalbrains.com>",
   "license": "MIT",
@@ -56,7 +56,7 @@
     "postcss": "^8.4.33",
     "postcss-nested": "^6.0.1",
     "v-calendar": "^3.1.2",
-    "vue": "^3.4.5",
+    "vue": "^3.4.10",
     "vue-router": "^4.2.5"
   },
   "dependencies": {
@@ -80,9 +80,9 @@
     "@types/body-scroll-lock": "^3.1.2",
     "@types/lodash-es": "^4.17.12",
     "@types/markdown-it": "^13.0.7",
-    "@types/node": "^20.10.6",
-    "@vitejs/plugin-vue": "^5.0.2",
-    "@vitest/coverage-v8": "^1.1.2",
+    "@types/node": "^20.11.0",
+    "@vitejs/plugin-vue": "^5.0.3",
+    "@vitest/coverage-v8": "^1.1.3",
     "@vue/test-utils": "^2.4.3",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
@@ -90,7 +90,7 @@
     "body-scroll-lock": "4.0.0-beta.0",
     "eslint": "^8.56.0",
     "fuse.js": "^7.0.0",
-    "happy-dom": "^12.10.3",
+    "happy-dom": "^13.0.2",
     "histoire": "^0.17.6",
     "lodash-es": "^4.17.21",
     "markdown-it": "^14.0.0",
@@ -102,10 +102,10 @@
     "release-it": "^17.0.1",
     "typescript": "~5.3.3",
     "v-calendar": "^3.1.2",
-    "vite": "^5.0.10",
-    "vitepress": "1.0.0-rc.35",
-    "vitest": "^1.1.2",
-    "vue": "^3.4.5",
+    "vite": "^5.0.11",
+    "vitepress": "1.0.0-rc.36",
+    "vitest": "^1.1.3",
+    "vue": "^3.4.10",
     "vue-router": "^4.2.5",
     "vue-tsc": "^1.8.27"
   }