feat: new data and validation (#423)

docs/validation/validators.md

@@ -1,6 +1,6 @@
 # Validators
 
-The `Validators` provides set of functions to validate values. Sefirot encourages to use builtin validatoes provided by [Vuelidate](https://github.com/vuelidate/vuelidate) library. These validators are which is not provided by Vuelidate.
+The `Validators` provides set of functions to validate values.
 
 You may import functions from `validation/validators`.
 
@@ -17,8 +17,6 @@ function checked(value: boolean): boolean
 ```
 
 ```ts
-import { checked } from '@globalbrain/sefirot/lib/validation/validators'
-
 checked(false)
 ```
 
@@ -31,8 +29,6 @@ function fileExtension(file: File, extensions: string[]): boolean
 ```
 
 ```ts
-import { fileExtension } from '@globalbrain/sefirot/lib/validation/validators'
-
 fileExtension(file, ['jpg', 'png'])
 ```
 
@@ -50,8 +46,6 @@ function hms(
 ```
 
 ```ts
-import { hms } from '@globalbrain/sefirot/lib/validation/validators'
-
 const time = {
   hour: '10',
   minute: '61', // Invalid value.
@@ -82,8 +76,6 @@ function maxFileSize(file: File, size: string): boolean
 ```
 
 ```ts
-import { maxFileSize } from '@globalbrain/sefirot/lib/validation/validators'
-
 maxFileSize(file, '100mb')
 ```
 
@@ -96,8 +88,6 @@ function maxTotalFileSize(files: File[], size: string): boolean
 ```
 
 ```ts
-import { maxTotalFileSize } from '@globalbrain/sefirot/lib/validation/validators'
-
 maxTotalFileSize([fileA, fileB], '100mb')
 ```
 
@@ -110,8 +100,6 @@ function month(value: number): boolean
 ```
 
 ```ts
-import { month } from '@globalbrain/sefirot/lib/validation/validators'
-
 month(13) // <- false
 ```
 
@@ -129,8 +117,6 @@ function requiredHms(
 ```
 
 ```ts
-import { requiredHms } from '@globalbrain/sefirot/lib/validation/validators'
-
 const time = {
   hour: '10',
   minute: null, // Value missing.
@@ -166,8 +152,6 @@ function requiredYmd(
 ```
 
 ```ts
-import { requiredYmd } from '@globalbrain/sefirot/lib/validation/validators'
-
 const date = {
   year: 1985,
   month: null, // Value missing.
@@ -203,8 +187,6 @@ function ymd(
 ```
 
 ```ts
-import { ymd } from '@globalbrain/sefirot/lib/validation/validators'
-
 const date = {
   year: 1985,
   month: 15, // Invalid value.

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'
 

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'
 

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'
 

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'
 

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'

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'

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'

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'

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'
 

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'

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'
 

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'
 

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'
 

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'

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'
 

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'

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'

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'

lib/composables/Card.ts

@@ -1,12 +1,12 @@
-import { type InjectionKey, type Ref, inject, provide, ref } from 'vue'
+import { type Ref, inject, provide, ref } from 'vue'
 
 export interface CardState {
   isCollapsed: Ref<boolean>
   setCollapse(value: boolean): void
   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(

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
+  }
+}

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'

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'

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
+  }
+}