@globalbrain/sefirot 3.13.1 → 3.15.0

package/lib/components/SInputBase.vue

@@ -2,7 +2,7 @@
 import { type IconifyIcon } from '@iconify/vue/dist/offline'
 import IconQuestion from '@iconify-icons/ph/question'
 import { type DefineComponent, computed, unref, useSlots } from 'vue'
-import { type Validatable } from '../composables/Validation'
+import { type Validatable } from '../composables/V'
 import SIcon from './SIcon.vue'
 import STooltip from './STooltip.vue'
 

package/lib/components/SInputCheckbox.vue

@@ -3,7 +3,7 @@ import { type IconifyIcon } from '@iconify/vue/dist/offline'
 import IconCheck from '@iconify-icons/ph/check-bold'
 import IconMinus from '@iconify-icons/ph/minus-bold'
 import { computed } from 'vue'
-import { type Validatable } from '../composables/Validation'
+import { type Validatable } from '../composables/V'
 import SIcon from './SIcon.vue'
 import SInputBase from './SInputBase.vue'
 

package/lib/components/SInputCheckboxes.vue

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

package/lib/components/SInputDate.vue

@@ -2,7 +2,7 @@
 import { type IconifyIcon } from '@iconify/vue/dist/offline'
 import { DatePicker } from 'v-calendar'
 import { computed } from 'vue'
-import { type Validatable } from '../composables/Validation'
+import { type Validatable } from '../composables/V'
 import { type Day, day } from '../support/Day'
 import SInputBase from './SInputBase.vue'
 

package/lib/components/SInputDropdown.vue

@@ -6,7 +6,7 @@ import xor from 'lodash-es/xor'
 import { type DefineComponent, computed, ref } from 'vue'
 import { type DropdownSectionFilter, useManualDropdownPosition } from '../composables/Dropdown'
 import { useFlyout } from '../composables/Flyout'
-import { type Validatable } from '../composables/Validation'
+import { type Validatable } from '../composables/V'
 import { isArray } from '../support/Utils'
 import SDropdown from './SDropdown.vue'
 import SIcon from './SIcon.vue'

package/lib/components/SInputFile.vue

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

package/lib/components/SInputHMS.vue

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

package/lib/components/SInputImage.vue

@@ -3,7 +3,7 @@ import { type IconifyIcon } from '@iconify/vue/dist/offline'
 import IconImage from '@iconify-icons/ph/image-bold'
 import { computed, ref } from 'vue'
 import { useImageSrcFromFile } from '../composables/Image'
-import { type Validatable } from '../composables/Validation'
+import { type Validatable } from '../composables/V'
 import SButton from './SButton.vue'
 import SIcon from './SIcon.vue'
 import SInputBase from './SInputBase.vue'

package/lib/components/SInputNumber.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { type IconifyIcon } from '@iconify/vue/dist/offline'
 import { type DefineComponent, computed } from 'vue'
-import { type Validatable } from '../composables/Validation'
+import { type Validatable } from '../composables/V'
 import { isNullish, isString } from '../support/Utils'
 import SInputText from './SInputText.vue'
 

package/lib/components/SInputRadio.vue

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

package/lib/components/SInputRadios.vue

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

package/lib/components/SInputSegments.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts" generic="T extends string | number | boolean">
 import { type IconifyIcon } from '@iconify/vue/dist/offline'
 import { computed } from 'vue'
-import { type Validatable } from '../composables/Validation'
+import { type Validatable } from '../composables/V'
 import SInputBase from './SInputBase.vue'
 import SInputSegmentsOption, { type Mode } from './SInputSegmentsOption.vue'
 

package/lib/components/SInputSelect.vue

@@ -3,7 +3,7 @@ import { type IconifyIcon } from '@iconify/vue/dist/offline'
 import IconCaretDown from '@iconify-icons/ph/caret-down-bold'
 import IconCaretUp from '@iconify-icons/ph/caret-up-bold'
 import { type DefineComponent, computed, ref } from 'vue'
-import { type Validatable } from '../composables/Validation'
+import { type Validatable } from '../composables/V'
 import SIcon from './SIcon.vue'
 import SInputBase from './SInputBase.vue'
 

package/lib/components/SInputSwitch.vue

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

package/lib/components/SInputSwitches.vue

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

package/lib/components/SInputText.vue

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

package/lib/components/SInputYMD.vue

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

package/lib/components/STrans.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { type Lang, useLang } from '../composables/Lang'
+
+defineProps<{
+  lang: Lang
+}>()
+
+const currentLang = useLang()
+</script>
+
+<template>
+  <slot v-if="currentLang === lang" />
+</template>

package/lib/composables/Card.ts

@@ -1,4 +1,4 @@
-import { type InjectionKey, type Ref, inject, provide, ref } from 'vue'
+import { type Ref, inject, provide, ref } from 'vue'
 
 export interface CardState {
   isCollapsed: Ref<boolean>
@@ -6,7 +6,7 @@ export interface CardState {
   toggleCollapse(): void
 }
 
-export const cardStateKey = Symbol('card-state') as InjectionKey<CardState>
+export const CardStateKey = 'card-state'
 
 export function provideCardState(): CardState {
   const isCollapsed = ref(false)
@@ -25,13 +25,13 @@ export function provideCardState(): CardState {
     toggleCollapse
   }
 
-  provide(cardStateKey, cardState)
+  provide(CardStateKey, cardState)
 
   return cardState
 }
 
 export function useCardState(): CardState {
-  const cardState = inject(cardStateKey)
+  const cardState = inject<CardState | null>(CardStateKey, null)
 
   if (!cardState) {
     throw new Error(

package/lib/composables/D.ts

@@ -0,0 +1,21 @@
+import { type Ref, ref } from 'vue'
+
+export interface D<T extends Record<string, any>> {
+  data: Ref<T>
+  init(): void
+}
+
+export function useD<T extends Record<string, any>>(data: T): D<T> {
+  const initialData = JSON.parse(JSON.stringify(data))
+
+  const refData = ref(data) as Ref<T>
+
+  function init(): void {
+    refData.value = initialData
+  }
+
+  return {
+    data: refData,
+    init
+  }
+}

package/lib/composables/Data.ts

@@ -1,3 +1,7 @@
+/**
+ * @deprecated Use `composables/D` module instead.
+ */
+
 import { watchOnce } from '@vueuse/core'
 import cloneDeep from 'lodash-es/cloneDeep'
 import { type WatchSource, reactive } from 'vue'

package/lib/composables/Form.ts

@@ -1,3 +1,7 @@
+/**
+ * @deprecated Use `composables/D` and `composables/V` modules instead.
+ */
+
 import { type Ref, computed, reactive, toRefs } from 'vue'
 import { type Snackbar, useSnackbars } from '../stores/Snackbars'
 import { type UseDataInput, useData } from './Data'

package/lib/composables/Lang.ts

@@ -0,0 +1,34 @@
+import { inject, provide } from 'vue'
+
+export type Lang = 'en' | 'ja'
+
+export interface Trans<T> {
+  t: T
+}
+
+export interface TransMessages<T> {
+  en: T
+  ja: T
+}
+
+export const SefirotLangKey = 'sefirot-lang-key'
+
+export function provideLang(lang: Lang) {
+  provide(SefirotLangKey, lang)
+}
+
+export function useLang(): Lang {
+  // Doing `||` check here because for some reason it doesn't return
+  // the default value in tests but becomes `undefined`.
+  return inject(SefirotLangKey, 'en') || 'en'
+}
+
+export function useTrans<T>(messages: TransMessages<T>): Trans<T> {
+  const lang = useLang()
+
+  const t = messages[lang]
+
+  return {
+    t
+  }
+}

package/lib/composables/V.ts

@@ -0,0 +1,73 @@
+import { type Validation, type ValidationArgs, useVuelidate } from '@vuelidate/core'
+import { type MaybeRefOrGetter, type Ref, computed, toValue } from 'vue'
+import { type Snackbar, useSnackbars } from '../stores/Snackbars'
+import { useTrans } from './Lang'
+
+export interface V<
+  Data extends { [key in keyof Rules]: any },
+  Rules extends ValidationArgs = ValidationArgs
+> {
+  validation: Ref<Validation<Rules, Data>>
+  validate(): Promise<boolean>
+  validateAndNotify(message?: Snackbar): Promise<boolean>
+  reset(): void
+}
+
+export interface Validatable {
+  readonly $dirty: boolean
+  readonly $invalid: boolean
+  readonly $errors: ValidatableError[]
+  readonly $touch: () => void
+}
+
+export interface ValidatableError {
+  readonly $message: string | Ref<string>
+}
+
+export function useV<
+  Data extends { [key in keyof Rules]: any },
+  Rules extends ValidationArgs = ValidationArgs
+>(
+  data: MaybeRefOrGetter<Data>,
+  rules: MaybeRefOrGetter<Rules>
+): V<Data, Rules> {
+  const { t } = useTrans({
+    en: { notify: 'Form contains errors. Please correct them and try again.' },
+    ja: { notify: 'フォームにエラーがあります。内容を確認し、再度お試しください。' }
+  })
+
+  const snackbars = useSnackbars()
+
+  const d = computed(() => toValue(data))
+  const r = computed(() => toValue(rules))
+
+  const validation = useVuelidate(r, d)
+
+  function reset(): void {
+    validation.value.$reset()
+  }
+
+  function validate(): Promise<boolean> {
+    return validation.value.$validate()
+  }
+
+  async function validateAndNotify(message?: Snackbar): Promise<boolean> {
+    const valid = await validate()
+
+    if (!valid) {
+      snackbars.push(message ?? {
+        mode: 'danger',
+        text: t.notify
+      })
+    }
+
+    return valid
+  }
+
+  return {
+    validation,
+    validate,
+    validateAndNotify,
+    reset
+  }
+}

package/lib/composables/Validation.ts

@@ -1,3 +1,7 @@
+/**
+ * @deprecated Use `composables/V` module instead.
+ */
+
 import {
   type GlobalConfig,
   type Validation,

package/lib/validation/Rule.ts

@@ -0,0 +1,30 @@
+import { type ValidationRuleWithParams } from '@vuelidate/core'
+import { type MessageProps as VMessageProps, helpers } from '@vuelidate/validators'
+import { type Lang, useLang } from '../composables/Lang'
+
+export interface RuleOptions {
+  optional?: boolean
+  message(params: MessageProps): string
+  validation(value: unknown): boolean
+}
+
+export interface MessageProps extends VMessageProps {
+  lang: Lang
+}
+
+export function createRule(
+  options: RuleOptions
+): ValidationRuleWithParams {
+  const lang = useLang()
+
+  return helpers.withMessage(
+    (params) => {
+      return options.message({ ...params, lang })
+    },
+    (value) => {
+      return options.optional && !helpers.req(value)
+        ? true
+        : options.validation(value)
+    }
+  )
+}

package/lib/validation/rules/index.ts

@@ -1,25 +1,25 @@
 export { and, not, or } from '@vuelidate/validators'
-export * from './checked'
-export * from './decimal'
-export * from './decimalOrHyphen'
-export * from './email'
-export * from './fileExtension'
-export * from './hms'
-export * from './maxFileSize'
-export * from './maxTotalFileSize'
-export * from './maxLength'
-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 './rule'
-export * from './url'
-export * from './ymd'
-export * from './zeroOrNegativeInteger'
-export * from './zeroOrPositiveInteger'
+export { checked } from './checked'
+export { decimal } from './decimal'
+export { decimalOrHyphen } from './decimalOrHyphen'
+export { email } from './email'
+export { fileExtension } from './fileExtension'
+export { hms } from './hms'
+export { maxFileSize } from './maxFileSize'
+export { maxLength } from './maxLength'
+export { maxTotalFileSize } from './maxTotalFileSize'
+export { maxValue } from './maxValue'
+export { minLength } from './minLength'
+export { minValue } from './minValue'
+export { month } from './month'
+export { negativeInteger } from './negativeInteger'
+export { positiveInteger } from './positiveInteger'
+export { required } from './required'
+export { requiredHms } from './requiredHms'
+export { requiredIf } from './requiredIf'
+export { requiredYmd } from './requiredYmd'
+export { rule } from './rule'
+export { url } from './url'
+export { ymd } from './ymd'
+export { zeroOrNegativeInteger } from './zeroOrNegativeInteger'
+export { zeroOrPositiveInteger } from './zeroOrPositiveInteger'

package/lib/validation/rules/required.ts

@@ -1,8 +1,14 @@
-import { required as baseRequired, helpers } from '@vuelidate/validators'
+import { createRule } from '../Rule'
+import { required as baseRequired } from '../validators'
+
+export const message = {
+  en: 'The field is required.',
+  ja: 'この項目は必須です。'
+}
 
 export function required(msg?: string) {
-  return helpers.withMessage(
-    () => msg ?? 'The field is required.',
-    baseRequired
-  )
+  return createRule({
+    message: ({ lang }) => msg ?? message[lang],
+    validation: (value) => baseRequired(value)
+  })
 }

package/lib/validation/validators/index.ts

@@ -7,6 +7,7 @@ export * from './maxTotalFileSize'
 export * from './month'
 export * from './negativeInteger'
 export * from './positiveInteger'
+export * from './required'
 export * from './requiredHms'
 export * from './requiredYmd'
 export * from './ymd'

package/lib/validation/validators/required.ts

@@ -0,0 +1,25 @@
+import { isArray, isNullish, isString } from '../../support/Utils'
+
+export function required(value: unknown): boolean {
+  if (isArray(value)) {
+    return !!value.length
+  }
+
+  if (isNullish(value)) {
+    return false
+  }
+
+  if (value === false) {
+    return true
+  }
+
+  if (value instanceof Date) {
+    return !Number.isNaN(value.getTime())
+  }
+
+  if (isString(value)) {
+    value = value.trim()
+  }
+
+  return !!String(value).length
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@globalbrain/sefirot",
-  "version": "3.13.1",
+  "version": "3.15.0",
   "packageManager": "pnpm@8.12.1",
   "description": "Vue Components for Global Brain Design System.",
   "author": "Kia Ishii <ka.ishii@globalbrains.com>",