niuma-ui 1.0.2 → 1.1.0

package/src/components/date-picker-utils.ts

@@ -25,8 +25,28 @@ export interface RsDateRangeValue {
   end?: string
 }
 
-/** v-model 取值格式：string 为默认字符串；timestamp 为毫秒时间戳 */
-export type RsDatePickerValueFormat = 'string' | 'timestamp'
+/** valueFormat 预设：string 墙钟、timestamp 毫秒、iso 本地偏移 RFC3339 */
+export const RS_DATE_PICKER_VALUE_FORMAT_PRESETS = ['string', 'timestamp', 'iso'] as const
+
+/**
+ * valueFormat 预设名。
+ * string 为默认墙钟字符串；timestamp 为毫秒；iso 为带本地偏移的 RFC3339。
+ */
+export type RsDatePickerValueFormatPreset = (typeof RS_DATE_PICKER_VALUE_FORMAT_PRESETS)[number]
+
+/**
+ * v-model 取值格式，对齐 Element Plus `value-format` / Ant Design Vue `valueFormat`：
+ * 展示格式与绑定格式分离。预设之外可传入任意 dayjs 模板，如 `YYYY-MM-DDTHH:mm:ssZ`。
+ */
+export type RsDatePickerValueFormat = RsDatePickerValueFormatPreset | (string & {})
+
+/**
+ * 内部墙钟字符串与对外 valueFormat 互转时的选项。
+ */
+export interface RsDatePickerValueConvertOptions {
+  valueFormat: string
+  withTime: boolean
+}
 
 /** 时间戳范围（毫秒），用于 valueFormat=timestamp 的 range 模式 */
 export type RsDatePickerTimestampRange = [number, number]
@@ -65,6 +85,97 @@ export function parseTimestampValue(value?: string): number | null {
   return parsed ? parsed.valueOf() : null
 }
 
+function parsePickerDayjs(value: string) {
+  return parseRsDateTimeDayjs(value) ?? parseRsDayjs(value)
+}
+
+function isTimestampFormat(valueFormat: string): boolean {
+  return valueFormat === 'timestamp'
+}
+
+function isIsoFormat(valueFormat: string): boolean {
+  return valueFormat === 'iso'
+}
+
+function isStringFormat(valueFormat: string): boolean {
+  return valueFormat === 'string' || valueFormat === ''
+}
+
+/**
+ * 将对外 v-model 规范为控件内部墙钟字符串（`YYYY-MM-DD` / `YYYY-MM-DD HH:mm:ss`）。
+ * 解析 ISO 时去掉 Z/偏移，按墙钟分量展示，不按浏览器时区换算。
+ * @param value - 对外绑定值（字符串、毫秒时间戳或空）
+ * @param options - valueFormat 与是否含时分秒
+ * @returns 内部墙钟字符串；无法解析时尽量原样返回
+ */
+export function toInternalPickerValue(
+  value: unknown,
+  options: RsDatePickerValueConvertOptions,
+): string {
+  if (value == null || value === '') return ''
+  if (typeof value === 'number') {
+    return formatTimestampValue(value, options.withTime)
+  }
+  if (typeof value !== 'string') return ''
+
+  const format = options.valueFormat || 'string'
+  if (!isStringFormat(format) && !isTimestampFormat(format) && !isIsoFormat(format)) {
+    const strict = dayjs(value, format, true)
+    if (strict.isValid()) {
+      return options.withTime ? strict.format(RS_DATETIME_FORMAT) : strict.format(RS_DATE_FORMAT)
+    }
+  }
+
+  const parsed = parsePickerDayjs(value)
+  if (!parsed) return value
+  return options.withTime ? parsed.format(RS_DATETIME_FORMAT) : parsed.format(RS_DATE_FORMAT)
+}
+
+/**
+ * 将控件内部墙钟字符串转为对外 valueFormat。
+ * iso 空值返回 null，避免 JSON `""` 无法绑定到 Go `time.Time`。
+ * @param internal - 内部墙钟字符串
+ * @param options - valueFormat 与是否含时分秒
+ * @returns 字符串、毫秒时间戳或 null
+ */
+export function fromInternalPickerValue(
+  internal: string,
+  options: RsDatePickerValueConvertOptions,
+): string | number | null {
+  const format = options.valueFormat || 'string'
+  if (!internal) {
+    return isTimestampFormat(format) || isIsoFormat(format) ? null : ''
+  }
+  if (isTimestampFormat(format)) {
+    return parseTimestampValue(internal)
+  }
+  if (isStringFormat(format)) {
+    return internal
+  }
+
+  const parsed = parsePickerDayjs(internal)
+  if (!parsed) return internal
+
+  if (isIsoFormat(format)) {
+    const body = options.withTime
+      ? parsed.format('YYYY-MM-DDTHH:mm:ss')
+      : parsed.format('YYYY-MM-DDT00:00:00')
+    return `${body}${parsed.format('Z')}`
+  }
+
+  return parsed.format(format)
+}
+
+/**
+ * 将 fromInternalPickerValue 的结果写入 range.start/end（范围端点始终为字符串）。
+ * @param value - 转换后的端点
+ * @returns 范围对象可用的字符串；空为 `''`
+ */
+export function toRangeEndpointString(value: string | number | null): string {
+  if (value == null) return ''
+  return typeof value === 'number' ? String(value) : value
+}
+
 /** 判断是否为时间戳范围元组 */
 export function isTimestampRange(value: unknown): value is RsDatePickerTimestampRange {
   return (

package/src/components/dialog-utils.ts

@@ -1,14 +1,16 @@
 import type { Component } from 'vue'
 import type { RsLocale } from '../locale/types'
 import type { RsThemeMode } from '../theme/types'
+import { dialogViewportSize } from './dialog-viewport'
 import type { RsFeedbackTone } from './overlay-utils'
 
 /** 宽度预设（与历史 sm/md/lg 一致） */
 export type RsDialogWidthPreset = 'sm' | 'md' | 'lg'
 
 /**
- * 对话框宽度：预设或自定义（number 按 px；string 原样写入 CSS，如 `40rem` / `60%`）。
- * 仅传入预设时行为与旧版完全一致。
+ * 对话框宽度：预设或自定义（number 按 px；string 为 CSS 长度，如 `40rem` / `60%`）。
+ * window 布局会在打开时把 px / rem / % 折成像素再居中（% 相对视口扣除 inset）；
+ * confirm 布局仍把自定义宽度当作 CSS 写入。
  */
 export type RsDialogWidth = RsDialogWidthPreset | number | string
 
@@ -46,6 +48,39 @@ export function resolveRsDialogCssWidth(width: RsDialogWidth): string | undefine
   return trimmed || undefined
 }
 
+function rootFontSizePx(): number {
+  if (typeof document === 'undefined') return 16
+  return Number.parseFloat(getComputedStyle(document.documentElement).fontSize) || 16
+}
+
+/**
+ * 将自定义宽度折成 px，供 window 布局计算 bounds / 居中。
+ * 支持 number、`px`、`rem`、`%`（相对视口可用宽度）；预设与无法解析的单位返回 undefined。
+ */
+export function resolveRsDialogWidthPx(
+  width: RsDialogWidth,
+  viewportWidth = dialogViewportSize().width,
+): number | undefined {
+  if (isRsDialogWidthPreset(width)) return undefined
+  if (typeof width === 'number') {
+    if (!Number.isFinite(width) || width <= 0) return undefined
+    return Math.round(width)
+  }
+  const trimmed = String(width).trim()
+  if (!trimmed) return undefined
+  if (/^\d+(\.\d+)?px$/i.test(trimmed)) {
+    return Math.round(Number.parseFloat(trimmed))
+  }
+  if (/^\d+(\.\d+)?rem$/i.test(trimmed)) {
+    return Math.round(Number.parseFloat(trimmed) * rootFontSizePx())
+  }
+  if (/^\d+(\.\d+)?%$/.test(trimmed)) {
+    if (!Number.isFinite(viewportWidth) || viewportWidth <= 0) return undefined
+    return Math.round((Number.parseFloat(trimmed) / 100) * viewportWidth)
+  }
+  return undefined
+}
+
 export async function runRsDialogBeforeClose(
   beforeClose: RsDialogBeforeClose | undefined,
   reason: RsDialogCloseReason,

package/src/components/form-item-control.ts

@@ -0,0 +1,55 @@
+import { Comment, Fragment, Text, cloneVNode, isVNode, type VNode, type VNodeArrayChildren } from 'vue'
+
+function flattenVNodes(nodes: VNodeArrayChildren, out: VNode[] = []): VNode[] {
+  for (const node of nodes) {
+    if (node == null || typeof node === 'boolean') continue
+    if (Array.isArray(node)) {
+      flattenVNodes(node, out)
+      continue
+    }
+    if (!isVNode(node)) continue
+    if (node.type === Fragment && Array.isArray(node.children)) {
+      flattenVNodes(node.children as VNodeArrayChildren, out)
+      continue
+    }
+    out.push(node)
+  }
+  return out
+}
+
+function isControlVNode(node: VNode): boolean {
+  if (node.type === Comment || node.type === Text) return false
+  return true
+}
+
+/**
+ * 把 Form.Item 的 id / aria / invalid / v-model 注入到默认插槽的第一个控件（对齐 Ant cloneElement）。
+ * 只有这个直接子节点跟 Item 的 error；子孙里的搜索框不吃 invalid。
+ * 子节点已绑定 v-model 时不覆盖（switch Y/N、select 类型映射等）。
+ */
+export function bindFormItemControl(
+  children: VNode[] | undefined,
+  extra: Record<string, unknown>,
+): VNode[] | undefined {
+  if (!children?.length) return children
+  const flat = flattenVNodes(children)
+  const index = flat.findIndex(isControlVNode)
+  if (index < 0) return children
+  const target = flat[index]
+  if (!target) return children
+  const next = flat.slice()
+  next[index] = cloneVNode(target, pickControlInject(target, extra), true)
+  return next
+}
+
+function pickControlInject(
+  node: VNode,
+  extra: Record<string, unknown>,
+): Record<string, unknown> {
+  const props = node.props
+  if (!props || !('modelValue' in props || 'onUpdate:modelValue' in props)) {
+    return extra
+  }
+  const { modelValue: _model, 'onUpdate:modelValue': _update, ...rest } = extra
+  return rest
+}

package/src/components/form-path.ts

@@ -0,0 +1,92 @@
+/** 字段路径：`'user.email'` 或 `['user', 'email']`（对齐 Ant Design NamePath） */
+export type RsFormNamePath = string | Array<string | number>
+
+/** 路径段是否为数组下标（Form.List 相对 name 的第一段）。 */
+export function isIndexSegment(seg: string | number): boolean {
+  if (typeof seg === 'number') return Number.isInteger(seg) && seg >= 0
+  return /^\d+$/.test(seg)
+}
+
+/**
+ * 将 NamePath 规范为路径段。字符串按 `.` 拆分。
+ */
+export function normalizeNamePath(name?: RsFormNamePath | null): Array<string | number> {
+  if (name == null || name === '') return []
+  if (Array.isArray(name)) return name.filter((seg) => seg !== '')
+  return String(name)
+    .split('.')
+    .filter((seg) => seg !== '')
+}
+
+/**
+ * 拼接多段 NamePath（List 前缀 + Item name）。
+ */
+export function concatNamePath(
+  ...parts: Array<RsFormNamePath | undefined | null>
+): Array<string | number> {
+  return parts.flatMap((part) => normalizeNamePath(part))
+}
+
+/**
+ * 路径转 rules / DOM 使用的稳定键。
+ */
+export function namePathKey(name?: RsFormNamePath | null): string {
+  return normalizeNamePath(name).map(String).join('.')
+}
+
+/**
+ * 路径是否已存在于对象树上（含值为 null / undefined 的叶子）。
+ */
+export function hasByNamePath(source: unknown, name?: RsFormNamePath | null): boolean {
+  const keys = normalizeNamePath(name)
+  if (!keys.length) return false
+  let current: unknown = source
+  for (const key of keys) {
+    if (current == null || typeof current !== 'object') return false
+    if (!Object.prototype.hasOwnProperty.call(current, String(key))) return false
+    current = (current as Record<string, unknown>)[String(key)]
+  }
+  return true
+}
+
+/**
+ * 按 NamePath 读取对象字段。
+ */
+export function getByNamePath(source: unknown, name?: RsFormNamePath | null): unknown {
+  const keys = normalizeNamePath(name)
+  if (!keys.length) return undefined
+  let current: unknown = source
+  for (const key of keys) {
+    if (current == null || typeof current !== 'object') return undefined
+    current = (current as Record<string, unknown>)[String(key)]
+  }
+  return current
+}
+
+/**
+ * 按 NamePath 写入对象字段。
+ * 中间缺失的容器按下一段是否为下标补 `[]` 或 `{}`，已有数组不会被覆盖成对象。
+ */
+export function setByNamePath(
+  target: Record<string, unknown>,
+  name: RsFormNamePath,
+  value: unknown,
+): void {
+  const keys = normalizeNamePath(name)
+  if (!keys.length) return
+  let current: unknown = target
+  for (let i = 0; i < keys.length - 1; i += 1) {
+    if (current == null || typeof current !== 'object') return
+    const obj = current as Record<string, unknown>
+    const key = String(keys[i])
+    const nextKey = keys[i + 1]
+    let next = obj[key]
+    if (next == null || typeof next !== 'object') {
+      next = isIndexSegment(nextKey!) ? [] : {}
+      obj[key] = next
+    }
+    current = next
+  }
+  if (current == null || typeof current !== 'object') return
+  ;(current as Record<string, unknown>)[String(keys[keys.length - 1])] = value
+}

package/src/components/form-rules.ts

@@ -1,6 +1,7 @@
-import type { RsTranslateFn } from '../composables/useRsI18n'
+import { interpolateRsMessage, type RsTranslateFn } from '../locale/interpolate'
 import { createTranslator } from '../composables/useRsI18n'
 import { defaultLocale } from '../locale/types'
+import type { RsFormNamePath } from './form-path'
 import {
   getInputRuleMessage,
   validateInputRule,
@@ -10,6 +11,15 @@ import {
 /** 校验触发时机（对齐 Ant Design Form） */
 export type RsFormRuleTrigger = 'blur' | 'change' | 'submit'
 
+/**
+ * validator 第二参：读取整表数据，供跨字段校验（B 依赖 A）。
+ */
+export interface RsFormValidatorContext {
+  name?: string
+  getFieldValue: (name: RsFormNamePath) => unknown
+  getFieldsValue: () => Record<string, unknown>
+}
+
 /**
  * 单条表单规则（声明式 + 自定义校验）。
  * 对标 Ant Design / Element Plus Form rules 的常用子集。
@@ -37,9 +47,11 @@ export interface RsFormRuleItem {
   type?: RsInputRule | 'string' | 'number' | 'array'
   /**
    * 自定义校验。返回 true 通过；false / 字符串为失败；支持 Promise。
+   * 第二参可读取其它字段（`getFieldValue` / `getFieldsValue`）。
    */
   validator?: (
     value: unknown,
+    ctx: RsFormValidatorContext,
   ) => boolean | string | void | Promise<boolean | string | void>
   trigger?: RsFormRuleTrigger | RsFormRuleTrigger[]
 }
@@ -52,6 +64,24 @@ export interface RsFormRuleValidateResult {
   message?: string
 }
 
+/**
+ * Form.validateMessages 模板（`{label}` 插值）。
+ * 对标 Ant Design Form.validateMessages。
+ */
+export interface RsFormValidateMessages {
+  required?: string
+}
+
+export interface RsFormFieldRulesOptions {
+  trigger?: RsFormRuleTrigger
+  t?: RsTranslateFn
+  label?: string
+  name?: string
+  validateMessages?: RsFormValidateMessages
+  getFieldValue?: (name: RsFormNamePath) => unknown
+  getFieldsValue?: () => Record<string, unknown>
+}
+
 export function normalizeFormRules(
   rules?: RsFormRuleItem | RsFormRuleItem[] | null,
 ): RsFormRuleItem[] {
@@ -179,13 +209,31 @@ async function checkValidatorRule(
   value: unknown,
   rule: RsFormRuleItem,
   tr: RsTranslateFn,
+  options?: RsFormFieldRulesOptions,
 ): Promise<RsFormRuleValidateResult | null> {
   if (!rule.validator) return null
 
-  const result = await rule.validator(value)
+  const ctx: RsFormValidatorContext = {
+    name: options?.name,
+    getFieldValue: options?.getFieldValue ?? (() => undefined),
+    getFieldsValue: options?.getFieldsValue ?? (() => ({})),
+  }
+  let result: unknown
+  try {
+    result = await rule.validator(value, ctx)
+  } catch (err) {
+    const message =
+      err instanceof Error && err.message
+        ? err.message
+        : formatInvalid(rule, value, tr)
+    return fail(message)
+  }
   if (result === true || result === undefined || result === null) return null
   if (result === false) return fail(formatInvalid(rule, value, tr))
   if (typeof result === 'string') return fail(result)
+  if (result instanceof Error) {
+    return fail(result.message || formatInvalid(rule, value, tr))
+  }
   return null
 }
 
@@ -197,17 +245,26 @@ async function evaluateFormRule(
   value: unknown,
   rule: RsFormRuleItem,
   tr: RsTranslateFn,
+  options?: RsFormFieldRulesOptions,
 ): Promise<RsFormRuleValidateResult | null> {
   if (rule.required && isEmptyValue(value)) {
-    return fail(resolveRuleMessage(rule, value, tr('input.required')))
+    const label = options?.label?.trim()
+    const template =
+      options?.validateMessages?.required ??
+      (label ? tr('form.validate.required') : tr('input.required'))
+    const fallback = interpolateRsMessage(template, { label: label || tr('form.field') })
+    return fail(resolveRuleMessage(rule, value, fallback))
+  }
+  // 空值跳过格式类规则；自定义 validator 仍执行，以便 B 依赖 A（如 A=email 则 B 必填）
+  if (isEmptyValue(value)) {
+    return checkValidatorRule(value, rule, tr, options)
   }
-  if (isEmptyValue(value)) return null
 
   return (
     checkTypeRule(value, rule, tr) ??
     checkPatternRule(value, rule, tr) ??
     checkLengthRule(value, rule, tr) ??
-    (await checkValidatorRule(value, rule, tr))
+    (await checkValidatorRule(value, rule, tr, options))
   )
 }
 
@@ -217,17 +274,14 @@ async function evaluateFormRule(
 export async function runFormFieldRules(
   value: unknown,
   rules: RsFormRuleItem[],
-  options?: {
-    trigger?: RsFormRuleTrigger
-    t?: RsTranslateFn
-  },
+  options?: RsFormFieldRulesOptions,
 ): Promise<RsFormRuleValidateResult> {
   const tr = options?.t ?? createTranslator(defaultLocale)
   const trigger = options?.trigger
 
   for (const rule of rules) {
     if (!matchFormRuleTrigger(rule, trigger)) continue
-    const failed = await evaluateFormRule(value, rule, tr)
+    const failed = await evaluateFormRule(value, rule, tr, options)
     if (failed) return failed
   }
 

package/src/components/form-utils.ts

@@ -9,8 +9,9 @@ import {
   type Ref,
   type VNodeChild,
 } from 'vue'
-import type { RsFormRuleItem, RsFormRuleTrigger, RsFormRules } from './form-rules'
+import type { RsFormRuleItem, RsFormRuleTrigger, RsFormRules, RsFormValidateMessages } from './form-rules'
 import { normalizeFormRules } from './form-rules'
+import { namePathKey, type RsFormNamePath } from './form-path'
 
 /** 自定义错误渲染上下文（Form / 字段共用） */
 export interface RsFormErrorRenderContext {
@@ -33,6 +34,9 @@ export type RsFormSize = 'ssm' | 'sm' | 'md' | 'lg'
 export type RsFormGap = 'sm' | 'md' | 'lg'
 export type RsFormMaxWidth = 'sm' | 'md' | 'lg' | 'full' | 'none'
 
+/** Form.Item 校验态（对齐 Ant Design validateStatus） */
+export type RsFormValidateStatus = 'success' | 'warning' | 'error' | 'validating' | ''
+
 /** 整表校验结果（含按字段名聚合的错误） */
 export interface RsFormValidationResult {
   valid: boolean
@@ -72,6 +76,12 @@ export interface RsFormContext {
   renderError?: RsFormErrorRender
   registerField: (id: symbol, field: RsFormFieldExpose) => void
   unregisterField: (id: symbol) => void
+  /** 可选数据中枢（Form.model） */
+  model: Readonly<Ref<Record<string, unknown> | undefined>>
+  validateMessages: ComputedRef<RsFormValidateMessages | undefined>
+  getFieldValue: (name: RsFormNamePath) => unknown
+  setFieldValue: (name: RsFormNamePath, value: unknown) => void
+  getFieldsValue: () => Record<string, unknown>
 }
 
 export const RS_FORM_INJECTION_KEY: InjectionKey<RsFormContext> = Symbol('RsForm')
@@ -86,6 +96,68 @@ export function cloneFormFieldValue(value: unknown): unknown {
   }
 }
 
+/**
+ * Form.Item 上下文（对齐 Element `elFormItem` / Ant Design Form.Item）。
+ * invalid 只属于绑定控件：Item 通过 cloneElement 打到直接子节点，
+ * 子孙里的搜索框等应先用 isRsFormItemBoundControl 判断，不要一律跟 Item 变红。
+ */
+export interface RsFormItemContext {
+  name: ComputedRef<string | undefined>
+  /** 已声明 name 时 Item 拥有字段，内置控件不再向 Form 注册 */
+  ownsField: ComputedRef<boolean>
+  invalid: ComputedRef<boolean>
+  message: ComputedRef<string>
+  status: ComputedRef<RsFormValidateStatus>
+  fieldId: ComputedRef<string>
+  errorId: ComputedRef<string>
+  describedBy: ComputedRef<string | undefined>
+}
+
+export const RS_FORM_ITEM_INJECTION_KEY: InjectionKey<RsFormItemContext> =
+  Symbol('RsFormItem')
+
+export function provideRsFormItemContext(context: RsFormItemContext): void {
+  provide(RS_FORM_ITEM_INJECTION_KEY, context)
+}
+
+export function useRsFormItemContext(): RsFormItemContext | null {
+  return inject(RS_FORM_ITEM_INJECTION_KEY, null)
+}
+
+/**
+ * Form.List 上下文：子 Item 的 name 会拼上 List 前缀（users + [0, 'name'] → users.0.name）。
+ */
+export interface RsFormListContext {
+  prefix: ComputedRef<Array<string | number>>
+}
+
+/** Form.List 默认插槽中的一行 */
+export interface RsFormListField {
+  /** 稳定行键，用于 v-for */
+  key: number
+  /** 当前下标，作为子 Item name 的第一段 */
+  name: number
+  index: number
+}
+
+/** Form.List 增删改操作 */
+export interface RsFormListOperations {
+  add: (defaultValue?: unknown) => void
+  remove: (index: number) => void
+  move: (from: number, to: number) => void
+}
+
+export const RS_FORM_LIST_INJECTION_KEY: InjectionKey<RsFormListContext> =
+  Symbol('RsFormList')
+
+export function provideRsFormListContext(context: RsFormListContext): void {
+  provide(RS_FORM_LIST_INJECTION_KEY, context)
+}
+
+export function useRsFormListContext(): RsFormListContext | null {
+  return inject(RS_FORM_LIST_INJECTION_KEY, null)
+}
+
 export function provideRsFormContext(context: RsFormContext): void {
   provide(RS_FORM_INJECTION_KEY, context)
 }
@@ -94,15 +166,35 @@ export function useRsFormContext(): RsFormContext | null {
   return inject(RS_FORM_INJECTION_KEY, null)
 }
 
+/**
+ * 是否为 Form.Item 的绑定控件（对齐 Ant Design cloneElement）。
+ * name 与 Item 相同，或 id 等于 Item 注入的 fieldId。
+ */
+export function isRsFormItemBoundControl(
+  item: RsFormItemContext | null | undefined,
+  control: { id?: string; name?: string },
+): boolean {
+  if (!item?.ownsField.value) return false
+  const itemName = item.name.value
+  if (control.name && itemName && namePathKey(control.name) === itemName) return true
+  if (control.id && control.id === item.fieldId.value) return true
+  return false
+}
+
 export function useRsFormField(getExpose: () => RsFormFieldExpose | undefined): void {
   const form = useRsFormContext()
+  const item = useRsFormItemContext()
   if (!form) return
 
   const fieldId = Symbol('rs-form-field')
 
   onMounted(() => {
+    // Item 已按 name 注册时，内置控件只负责录入，避免重复校验
+    if (item?.ownsField.value) return
     const expose = getExpose()
-    if (expose) form.registerField(fieldId, expose)
+    // 对齐 Ant / RHF：无 name 不进字段表，弹层搜索框不参与外层校验
+    if (!expose?.name) return
+    form.registerField(fieldId, expose)
   })
 
   onUnmounted(() => {