@globalbrain/sefirot 3.14.0 → 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/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/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/package.json

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