@globalbrain/sefirot 2.23.0 → 2.25.0

package/lib/components/SMarkdown.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, nextTick, ref, watch } from 'vue'
+import { computed, nextTick, shallowRef, watch } from 'vue'
 import type { LinkCallback, LinkSubscriberPayload } from '../composables/Markdown'
 import { useLink, useMarkdown } from '../composables/Markdown'
 
@@ -14,7 +14,7 @@ const emit = defineEmits<{
   (e: 'clicked', payload: LinkSubscriberPayload): void
 }>()
 
-const container = ref<Element | null>(null)
+const container = shallowRef<Element | null>(null)
 
 const { addListeners, subscribe } = useLink({
   container,

package/lib/components/STable.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, reactive, ref, toRefs, watch } from 'vue'
+import { computed, reactive, shallowRef, toRefs, watch } from 'vue'
 import type { Table } from '../composables/Table'
 import SSpinner from './SSpinner.vue'
 import STableCell from './STableCell.vue'
@@ -29,8 +29,8 @@ const {
   onReset
 } = toRefs(props.options)
 
-const head = ref<HTMLElement | null>(null)
-const body = ref<HTMLElement | null>(null)
+const head = shallowRef<HTMLElement | null>(null)
+const body = shallowRef<HTMLElement | null>(null)
 
 let headLock = false
 let bodyLock = false

package/lib/components/STooltip.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, shallowRef } from 'vue'
 import type { Position } from '../composables/Tooltip'
 import { useTooltip } from '../composables/Tooltip'
 import SMarkdown from './SMarkdown.vue'
@@ -10,8 +10,8 @@ const props = defineProps<{
   position?: Position
 }>()
 
-const tip = ref<HTMLElement | null>(null)
-const content = ref<HTMLElement | null>(null)
+const tip = shallowRef<HTMLElement | null>(null)
+const content = shallowRef<HTMLElement | null>(null)
 const classes = computed(() => [props.position ?? 'top'])
 
 const { on, show, hide } = useTooltip(

package/lib/composables/Form.ts

@@ -1,10 +1,7 @@
-import type { Ref } from 'vue'
-import { computed } from 'vue'
+import { type Ref, computed, reactive, toRefs } from 'vue'
 import { useSnackbars } from '../stores/Snackbars'
-import type { UseDataInput } from './Data'
-import { useData } from './Data'
-import type { Validation } from './Validation'
-import { useValidation } from './Validation'
+import { type UseDataInput, useData } from './Data'
+import { type Validation, useValidation } from './Validation'
 
 export interface Form<T extends Record<string, any>> {
   data: T
@@ -15,25 +12,49 @@ export interface Form<T extends Record<string, any>> {
   validateAndNotify(): Promise<boolean>
 }
 
-export interface UseFormOptions<T extends Record<string, any>> {
-  data: UseDataInput<T>
-  rules?: Record<string, any> | ((state: T) => Record<string, any>)
+export type ComputedData<T extends Record<string, () => any>> = {
+  [K in keyof T]: ReturnType<T[K]>
+}
+
+export type AllData<
+  D extends Record<string, any>,
+  C extends Record<string, () => any>
+> = D & ComputedData<C>
+
+export interface UseFormOptions<
+  D extends Record<string, any>,
+  C extends Record<string, () => any>
+> {
+  data: UseDataInput<D>
+  computed?: (data: D) => C
+  rules?: Record<string, any> | ((data: AllData<D, C>) => Record<string, any>)
 }
 
 export function useForm<
-  T extends Record<string, any>
->(options: UseFormOptions<T>): Form<T> {
+  D extends Record<string, any> = Record<string, any>,
+  C extends Record<string, () => any> = Record<string, () => any>
+>(options: UseFormOptions<D, C>): Form<AllData<D, C>> {
   const snackbars = useSnackbars()
 
   const data = useData(options.data)
+  const dataStateRef = toRefs(data.state)
+
+  const computedData = options.computed
+    ? createComputedData(options.computed(data.state))
+    : {}
+
+  const allData = reactive({
+    ...dataStateRef,
+    ...computedData
+  }) as AllData<D, C>
 
   const rules = computed(() => {
     return options.rules
-      ? typeof options.rules === 'function' ? options.rules(data.state) : options.rules
+      ? typeof options.rules === 'function' ? options.rules(allData) : options.rules
       : {}
   })
 
-  const validation = useValidation(data.state, rules)
+  const validation = useValidation(allData, rules)
 
   function init(): void {
     data.init()
@@ -62,7 +83,7 @@ export function useForm<
   }
 
   return {
-    data: data.state,
+    data: allData,
     init,
     reset,
     validation,
@@ -70,3 +91,15 @@ export function useForm<
     validateAndNotify
   }
 }
+
+function createComputedData<
+  C extends Record<string, () => any>
+>(input: C): ComputedData<C> {
+  const computedData = {} as any
+
+  for (const [key, fn] of Object.entries(input)) {
+    computedData[key] = computed(() => fn())
+  }
+
+  return computedData
+}

package/lib/support/Day.ts

@@ -4,13 +4,31 @@ import PluginRelativeTime from 'dayjs/plugin/relativeTime'
 import PluginTimezone from 'dayjs/plugin/timezone'
 import PluginUtc from 'dayjs/plugin/utc'
 
-export type Day = Dayjs
-export type Input = ConfigType
-
 dayjs.extend(PluginUtc)
 dayjs.extend(PluginTimezone)
 dayjs.extend(PluginRelativeTime)
 
+export type Day = Dayjs
+export type Input = ConfigType
+
+/**
+ * The year, month, and date object interface.
+ */
+export interface Ymd {
+  year: number | null
+  month: number | null
+  date: number | null
+}
+
+/**
+ * The hour, minute, and second object interface.
+ */
+export interface Hms {
+  hour: string | null
+  minute: string | null
+  second: string | null
+}
+
 export function day(input?: Input): Day {
   return dayjs(input)
 }
@@ -22,3 +40,33 @@ export function utc(input?: Input): Day {
 export function tz(input?: Input, timezone?: string): Day {
   return dayjs.tz(input, timezone)
 }
+
+/**
+ * Creates a new `Ymd` object.
+ */
+export function createYmd(
+  year: number | null = null,
+  month: number | null = null,
+  date: number | null = null
+): Ymd {
+  return {
+    year,
+    month,
+    date
+  }
+}
+
+/**
+ * Creates a new `Hms` object.
+ */
+export function createHms(
+  hour: string | null = null,
+  minute: string | null = null,
+  second: string | null = null
+): Hms {
+  return {
+    hour,
+    minute,
+    second
+  }
+}

package/lib/validation/rules/hms.ts

@@ -1,7 +1,9 @@
 import { helpers } from '@vuelidate/validators'
-import type { Hms, HmsType } from '../validators/hms'
+import type { Hms } from '../../support/Day'
 import { hms as baseHms } from '../validators/hms'
 
+type HmsType = 'h' | 'm' | 's'
+
 export function hms(required?: HmsType[], msg?: string) {
   return helpers.withMessage(
     () => msg ?? 'The time is invalid.',

package/lib/validation/rules/index.ts

@@ -5,6 +5,7 @@ export * from './email'
 export * from './fileExtension'
 export * from './hms'
 export * from './maxFileSize'
+export * from './maxTotalFileSize'
 export * from './maxLength'
 export * from './maxValue'
 export * from './minLength'

package/lib/validation/rules/maxTotalFileSize.ts

@@ -0,0 +1,16 @@
+import { helpers } from '@vuelidate/validators'
+import { maxTotalFileSize as baseMaxTotalFileSize } from '../validators/maxTotalFileSize'
+
+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)
+      }
+    )
+  )
+}

package/lib/validation/rules/requiredHms.ts

@@ -1,7 +1,9 @@
 import { helpers } from '@vuelidate/validators'
-import type { Hms, HmsType } from '../validators/requiredHms'
+import type { Hms } from '../../support/Day'
 import { requiredHms as baseRequiredHms } from '../validators/requiredHms'
 
+type HmsType = 'h' | 'm' | 's'
+
 export function requiredHms(required?: HmsType[], msg?: string) {
   return helpers.withMessage(
     () => msg ?? 'The field is required.',

package/lib/validation/rules/requiredYmd.ts

@@ -1,7 +1,9 @@
 import { helpers } from '@vuelidate/validators'
-import type { Ymd, YmdType } from '../validators/requiredYmd'
+import type { Ymd } from '../../support/Day'
 import { requiredYmd as baseRequiredYmd } from '../validators/requiredYmd'
 
+type YmdType = 'y' | 'm' | 'd'
+
 export function requiredYmd(required?: YmdType[], msg?: string) {
   return helpers.withMessage(
     () => msg ?? 'The field is required.',

package/lib/validation/rules/ymd.ts

@@ -1,7 +1,9 @@
 import { helpers } from '@vuelidate/validators'
-import type { Ymd, YmdType } from '../validators/ymd'
+import type { Ymd } from '../../support/Day'
 import { ymd as baseYmd } from '../validators/ymd'
 
+type YmdType = 'y' | 'm' | 'd'
+
 export function ymd(required?: YmdType[], msg?: string) {
   return helpers.withMessage(
     () => msg ?? 'The date is invalid.',

package/lib/validation/validators/hms.ts

@@ -1,12 +1,8 @@
-export interface Hms {
-  hour?: string | null
-  minute?: string | null
-  second?: string | null
-}
+import type { Hms } from '../../support/Day'
 
-export type HmsType = 'h' | 'm' | 's'
+type HmsType = 'h' | 'm' | 's'
 
-export const HmsMap = {
+const HmsMap = {
   h: 'hour',
   m: 'minute',
   s: 'second'
@@ -16,7 +12,7 @@ export function hms(hms: Hms, required: HmsType[] = ['h', 'm', 's']): boolean {
   return required.every((r) => {
     const value = hms[HmsMap[r]]
 
-    if (value === undefined) {
+    if (value === null) {
       return true
     }
 

package/lib/validation/validators/index.ts

@@ -0,0 +1,9 @@
+export * from './checked'
+export * from './fileExtension'
+export * from './hms'
+export * from './maxFileSize'
+export * from './maxTotalFileSize'
+export * from './month'
+export * from './requiredHms'
+export * from './requiredYmd'
+export * from './ymd'

package/lib/validation/validators/maxTotalFileSize.ts

@@ -0,0 +1,17 @@
+/**
+ * Validates if the total size of the given files is smaller than the
+ * given size.
+ */
+export function maxTotalFileSize(files: File[], size: string): boolean {
+  const factor = /gb/i.test(size)
+    ? 1e9
+    : /mb/i.test(size)
+      ? 1e6
+      : /kb/i.test(size)
+        ? 1e3
+        : 1
+
+  const total = files.reduce((total, file) => total + file.size, 0)
+
+  return total <= factor * +size.replace(/[^\d\.]/g, '')
+}

package/lib/validation/validators/requiredHms.ts

@@ -1,12 +1,8 @@
-export interface Hms {
-  hour?: string | null
-  minute?: string | null
-  second?: string | null
-}
+import type { Hms } from '../../support/Day'
 
-export type HmsType = 'h' | 'm' | 's'
+type HmsType = 'h' | 'm' | 's'
 
-export const HmsMap = {
+const HmsMap = {
   h: 'hour',
   m: 'minute',
   s: 'second'

package/lib/validation/validators/requiredYmd.ts

@@ -1,7 +1,12 @@
-import type { Ymd, YmdType } from './ymd'
-import { YmdMap } from './ymd'
+import type { Ymd } from '../../support/Day'
 
-export type { Ymd, YmdType, YmdMap }
+type YmdType = 'y' | 'm' | 'd'
+
+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)

package/lib/validation/validators/ymd.ts

@@ -1,14 +1,9 @@
 import day from 'dayjs'
+import type { Ymd } from '../../support/Day'
 
-export interface Ymd {
-  year: number | null
-  month: number | null
-  date: number | null
-}
-
-export type YmdType = 'y' | 'm' | 'd'
+type YmdType = 'y' | 'm' | 'd'
 
-export const YmdMap = {
+const YmdMap = {
   y: 'year',
   m: 'month',
   d: 'date'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@globalbrain/sefirot",
-  "version": "2.23.0",
+  "version": "2.25.0",
   "packageManager": "pnpm@7.26.2",
   "description": "Vue Components for Global Brain Design System.",
   "author": "Kia Ishii <ka.ishii@globalbrains.com>",
@@ -53,10 +53,10 @@
     "@types/body-scroll-lock": "^3.1.0",
     "@types/lodash-es": "^4.17.6",
     "@types/markdown-it": "^12.2.3",
-    "@types/node": "^18.11.18",
+    "@types/node": "^18.14.6",
     "@vitejs/plugin-vue": "^4.0.0",
-    "@vitest/coverage-c8": "^0.28.1",
-    "@vue/test-utils": "^2.2.7",
+    "@vitest/coverage-c8": "^0.29.2",
+    "@vue/test-utils": "^2.3.0",
     "@vuelidate/core": "^2.0.0",
     "@vuelidate/validators": "^2.0.0",
     "@vueuse/core": "^9.11.1",
@@ -77,12 +77,12 @@
     "semver": "^7.3.8",
     "typescript": "^4.9.4",
     "v-calendar": "3.0.0-alpha.8",
-    "vite": "^4.0.4",
-    "vitepress": "1.0.0-alpha.40",
-    "vitest": "^0.28.1",
+    "vite": "^4.1.4",
+    "vitepress": "1.0.0-alpha.50",
+    "vitest": "^0.29.2",
     "vue": "^3.2.45",
     "vue-router": "^4.1.6",
-    "vue-tsc": "^1.0.24"
+    "vue-tsc": "^1.2.0"
   },
   "scripts": {
     "docs": "vitepress dev docs --port 4000",