fix(form): fix error when form item not inside <Form> (#1420)

* fix(form): fix error when form item not inside `<Form>`

* fix: use fieldContext error without computed cause it's a ref

* fix: remove fieldItemContext check cause FormItem is always in the form Anatomy

* chore: build registry

* chore: build registry v4

---------

Co-authored-by: Sadegh Barati <sadeghbaratiwork@gmail.com>

Author: Waleed-KH

apps/v4/registry/new-york-v4/ui/form/useFormField.ts

@@ -1,5 +1,5 @@
-import { FieldContextKey, useFieldError, useIsFieldDirty, useIsFieldTouched, useIsFieldValid } from "vee-validate"
-import { inject } from "vue"
+import { FieldContextKey } from "vee-validate"
+import { computed, inject } from "vue"
 import { FORM_ITEM_INJECTION_KEY } from "./injectionKeys"
 
 export function useFormField() {
@@ -9,14 +9,14 @@ export function useFormField() {
   if (!fieldContext)
     throw new Error("useFormField should be used within <FormField>")
 
-  const { name } = fieldContext
+  const { name, errorMessage: error, meta } = fieldContext
   const id = fieldItemContext
 
   const fieldState = {
-    valid: useIsFieldValid(name),
-    isDirty: useIsFieldDirty(name),
-    isTouched: useIsFieldTouched(name),
-    error: useFieldError(name),
+    valid: computed(() => meta.valid),
+    isDirty: computed(() => meta.dirty),
+    isTouched: computed(() => meta.touched),
+    error,
   }
 
   return {

apps/www/src/public/r/styles/default/form.json

@@ -55,7 +55,7 @@
     },
     {
       "path": "ui/form/useFormField.ts",
-      "content": "import { FieldContextKey, useFieldError, useIsFieldDirty, useIsFieldTouched, useIsFieldValid } from \"vee-validate\"\r\nimport { inject } from \"vue\"\r\nimport { FORM_ITEM_INJECTION_KEY } from \"./injectionKeys\"\r\n\r\nexport function useFormField() {\r\n  const fieldContext = inject(FieldContextKey)\r\n  const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY)\r\n\r\n  if (!fieldContext)\r\n    throw new Error(\"useFormField should be used within <FormField>\")\r\n\r\n  const { name } = fieldContext\r\n  const id = fieldItemContext\r\n\r\n  const fieldState = {\r\n    valid: useIsFieldValid(name),\r\n    isDirty: useIsFieldDirty(name),\r\n    isTouched: useIsFieldTouched(name),\r\n    error: useFieldError(name),\r\n  }\r\n\r\n  return {\r\n    id,\r\n    name,\r\n    formItemId: `${id}-form-item`,\r\n    formDescriptionId: `${id}-form-item-description`,\r\n    formMessageId: `${id}-form-item-message`,\r\n    ...fieldState,\r\n  }\r\n}\r\n",
+      "content": "import { FieldContextKey } from \"vee-validate\"\r\nimport { computed, inject } from \"vue\"\r\nimport { FORM_ITEM_INJECTION_KEY } from \"./injectionKeys\"\r\n\r\nexport function useFormField() {\r\n  const fieldContext = inject(FieldContextKey)\r\n  const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY)\r\n\r\n  if (!fieldContext)\r\n    throw new Error(\"useFormField should be used within <FormField>\")\r\n\r\n  const { name, errorMessage: error, meta } = fieldContext\r\n  const id = fieldItemContext\r\n\r\n  const fieldState = {\r\n    valid: computed(() => meta.valid),\r\n    isDirty: computed(() => meta.dirty),\r\n    isTouched: computed(() => meta.touched),\r\n    error,\r\n  }\r\n\r\n  return {\r\n    id,\r\n    name,\r\n    formItemId: `${id}-form-item`,\r\n    formDescriptionId: `${id}-form-item-description`,\r\n    formMessageId: `${id}-form-item-message`,\r\n    ...fieldState,\r\n  }\r\n}\r\n",
       "type": "registry:ui",
       "target": ""
     }

apps/www/src/public/r/styles/default/navigation-menu.json

@@ -57,7 +57,7 @@
     },
     {
       "path": "ui/navigation-menu/NavigationMenuViewport.vue",
-      "content": "<script setup lang=\"ts\">\r\nimport type { NavigationMenuViewportProps } from \"reka-ui\"\r\nimport type { HTMLAttributes } from \"vue\"\r\nimport { reactiveOmit } from \"@vueuse/core\"\r\nimport {\r\n  NavigationMenuViewport,\r\n\r\n  useForwardProps,\r\n} from \"reka-ui\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes[\"class\"] }>()\r\n\r\nconst delegatedProps = reactiveOmit(props, \"class\")\r\n\r\nconst forwardedProps = useForwardProps(delegatedProps)\r\n</script>\r\n\r\n<template>\r\n  <div class=\"absolute left-0 top-full flex justify-center\">\r\n    <NavigationMenuViewport\r\n      v-bind=\"forwardedProps\"\r\n      :class=\"\r\n        cn(\r\n          'origin-top-center relative mt-1.5 h-[--reka-navigation-menu-viewport-height] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[--reka-navigation-menu-viewport-width]',\r\n          props.class,\r\n        )\r\n      \"\r\n    />\r\n  </div>\r\n</template>\r\n",
+      "content": "<script setup lang=\"ts\">\r\nimport type { NavigationMenuViewportProps } from \"reka-ui\"\r\nimport type { HTMLAttributes } from \"vue\"\r\nimport { reactiveOmit } from \"@vueuse/core\"\r\nimport {\r\n  NavigationMenuViewport,\r\n\r\n  useForwardProps,\r\n} from \"reka-ui\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes[\"class\"] }>()\r\n\r\nconst delegatedProps = reactiveOmit(props, \"class\")\r\n\r\nconst forwardedProps = useForwardProps(delegatedProps)\r\n</script>\r\n\r\n<template>\r\n  <div class=\"absolute left-0 top-full flex justify-center\">\r\n    <NavigationMenuViewport\r\n      v-bind=\"forwardedProps\"\r\n      :class=\"\r\n        cn(\r\n          'origin-top-center relative mt-1.5 h-[--reka-navigation-menu-viewport-height] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[--reka-navigation-menu-viewport-width] left-[var(--reka-navigation-menu-viewport-left)]',\r\n          props.class,\r\n        )\r\n      \"\r\n    />\r\n  </div>\r\n</template>\r\n",
       "type": "registry:ui",
       "target": ""
     }

apps/www/src/public/r/styles/new-york-v4/chart-area.json

@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "ui/chart-area/AreaChart.vue",
-      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\r\nimport type { BaseChartProps } from \".\"\r\nimport { type BulletLegendItemInterface, CurveType } from \"@unovis/ts\"\r\nimport { Area, Axis, Line } from \"@unovis/ts\"\r\nimport { VisArea, VisAxis, VisLine, VisXYContainer } from \"@unovis/vue\"\r\nimport { useMounted } from \"@vueuse/core\"\r\nimport { useId } from \"reka-ui\"\r\nimport { type Component, computed, ref } from \"vue\"\r\nimport { cn } from \"@/lib/utils\"\r\nimport { ChartCrosshair, ChartLegend, defaultColors } from \"@/registry/new-york/ui/chart\"\r\n\r\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\r\n  /**\r\n   * Render custom tooltip component.\r\n   */\r\n  customTooltip?: Component\r\n  /**\r\n   * Type of curve\r\n   */\r\n  curveType?: CurveType\r\n  /**\r\n   * Controls the visibility of gradient.\r\n   * @default true\r\n   */\r\n  showGradient?: boolean\r\n}>(), {\r\n  curveType: CurveType.MonotoneX,\r\n  filterOpacity: 0.2,\r\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\r\n  showXAxis: true,\r\n  showYAxis: true,\r\n  showTooltip: true,\r\n  showLegend: true,\r\n  showGridLine: true,\r\n  showGradient: true,\r\n})\r\n\r\nconst emits = defineEmits<{\r\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\r\n}>()\r\n\r\ntype KeyOfT = Extract<keyof T, string>\r\ntype Data = typeof props.data[number]\r\n\r\nconst chartRef = useId()\r\n\r\nconst index = computed(() => props.index as KeyOfT)\r\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\r\n\r\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\r\n  name: category,\r\n  color: colors.value[i],\r\n  inactive: false,\r\n})))\r\n\r\nconst isMounted = useMounted()\r\n\r\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\r\n  emits(\"legendItemClick\", d, i)\r\n}\r\n</script>\r\n\r\n<template>\r\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\r\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\r\n\r\n    <VisXYContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\r\n      <svg width=\"0\" height=\"0\">\r\n        <defs>\r\n          <linearGradient v-for=\"(color, i) in colors\" :id=\"`${chartRef}-color-${i}`\" :key=\"i\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\r\n            <template v-if=\"showGradient\">\r\n              <stop offset=\"5%\" :stop-color=\"color\" stop-opacity=\"0.4\" />\r\n              <stop offset=\"95%\" :stop-color=\"color\" stop-opacity=\"0\" />\r\n            </template>\r\n            <template v-else>\r\n              <stop offset=\"0%\" :stop-color=\"color\" />\r\n            </template>\r\n          </linearGradient>\r\n        </defs>\r\n      </svg>\r\n\r\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" :custom-tooltip=\"customTooltip\" />\r\n\r\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\r\n        <VisArea\r\n          :x=\"(d: Data, i: number) => i\"\r\n          :y=\"(d: Data) => d[category]\"\r\n          color=\"auto\"\r\n          :curve-type=\"curveType\"\r\n          :attributes=\"{\r\n            [Area.selectors.area]: {\r\n              fill: `url(#${chartRef}-color-${i})`,\r\n            },\r\n          }\"\r\n          :opacity=\"legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1\"\r\n        />\r\n      </template>\r\n\r\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\r\n        <VisLine\r\n          :x=\"(d: Data, i: number) => i\"\r\n          :y=\"(d: Data) => d[category]\"\r\n          :color=\"colors[i]\"\r\n          :curve-type=\"curveType\"\r\n          :attributes=\"{\r\n            [Line.selectors.line]: {\r\n              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\r\n            },\r\n          }\"\r\n        />\r\n      </template>\r\n\r\n      <VisAxis\r\n        v-if=\"showXAxis\"\r\n        type=\"x\"\r\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\r\n        :grid-line=\"false\"\r\n        :tick-line=\"false\"\r\n        tick-text-color=\"hsl(var(--vis-text-color))\"\r\n      />\r\n      <VisAxis\r\n        v-if=\"showYAxis\"\r\n        type=\"y\"\r\n        :tick-line=\"false\"\r\n        :tick-format=\"yFormatter\"\r\n        :domain-line=\"false\"\r\n        :grid-line=\"showGridLine\"\r\n        :attributes=\"{\r\n          [Axis.selectors.grid]: {\r\n            class: 'text-muted',\r\n          },\r\n        }\"\r\n        tick-text-color=\"hsl(var(--vis-text-color))\"\r\n      />\r\n\r\n      <slot />\r\n    </VisXYContainer>\r\n  </div>\r\n</template>\r\n",
+      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\r\nimport type { BulletLegendItemInterface } from \"@unovis/ts\"\r\nimport type { Component } from \"vue\"\r\nimport type { BaseChartProps } from \".\"\r\nimport { Area, Axis, CurveType, Line } from \"@unovis/ts\"\r\n\r\nimport { VisArea, VisAxis, VisLine, VisXYContainer } from \"@unovis/vue\"\r\nimport { useMounted } from \"@vueuse/core\"\r\nimport { useId } from \"reka-ui\"\r\nimport { computed, ref } from \"vue\"\r\nimport { cn } from \"@/lib/utils\"\r\nimport { ChartCrosshair, ChartLegend, defaultColors } from \"@/registry/new-york/ui/chart\"\r\n\r\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\r\n  /**\r\n   * Render custom tooltip component.\r\n   */\r\n  customTooltip?: Component\r\n  /**\r\n   * Type of curve\r\n   */\r\n  curveType?: CurveType\r\n  /**\r\n   * Controls the visibility of gradient.\r\n   * @default true\r\n   */\r\n  showGradient?: boolean\r\n}>(), {\r\n  curveType: CurveType.MonotoneX,\r\n  filterOpacity: 0.2,\r\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\r\n  showXAxis: true,\r\n  showYAxis: true,\r\n  showTooltip: true,\r\n  showLegend: true,\r\n  showGridLine: true,\r\n  showGradient: true,\r\n})\r\n\r\nconst emits = defineEmits<{\r\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\r\n}>()\r\n\r\ntype KeyOfT = Extract<keyof T, string>\r\ntype Data = typeof props.data[number]\r\n\r\nconst chartRef = useId()\r\n\r\nconst index = computed(() => props.index as KeyOfT)\r\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\r\n\r\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\r\n  name: category,\r\n  color: colors.value[i],\r\n  inactive: false,\r\n})))\r\n\r\nconst isMounted = useMounted()\r\n\r\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\r\n  emits(\"legendItemClick\", d, i)\r\n}\r\n</script>\r\n\r\n<template>\r\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\r\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\r\n\r\n    <VisXYContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\r\n      <svg width=\"0\" height=\"0\">\r\n        <defs>\r\n          <linearGradient v-for=\"(color, i) in colors\" :id=\"`${chartRef}-color-${i}`\" :key=\"i\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\r\n            <template v-if=\"showGradient\">\r\n              <stop offset=\"5%\" :stop-color=\"color\" stop-opacity=\"0.4\" />\r\n              <stop offset=\"95%\" :stop-color=\"color\" stop-opacity=\"0\" />\r\n            </template>\r\n            <template v-else>\r\n              <stop offset=\"0%\" :stop-color=\"color\" />\r\n            </template>\r\n          </linearGradient>\r\n        </defs>\r\n      </svg>\r\n\r\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" :custom-tooltip=\"customTooltip\" />\r\n\r\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\r\n        <VisArea\r\n          :x=\"(d: Data, i: number) => i\"\r\n          :y=\"(d: Data) => d[category]\"\r\n          color=\"auto\"\r\n          :curve-type=\"curveType\"\r\n          :attributes=\"{\r\n            [Area.selectors.area]: {\r\n              fill: `url(#${chartRef}-color-${i})`,\r\n            },\r\n          }\"\r\n          :opacity=\"legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1\"\r\n        />\r\n      </template>\r\n\r\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\r\n        <VisLine\r\n          :x=\"(d: Data, i: number) => i\"\r\n          :y=\"(d: Data) => d[category]\"\r\n          :color=\"colors[i]\"\r\n          :curve-type=\"curveType\"\r\n          :attributes=\"{\r\n            [Line.selectors.line]: {\r\n              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\r\n            },\r\n          }\"\r\n        />\r\n      </template>\r\n\r\n      <VisAxis\r\n        v-if=\"showXAxis\"\r\n        type=\"x\"\r\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\r\n        :grid-line=\"false\"\r\n        :tick-line=\"false\"\r\n        tick-text-color=\"hsl(var(--vis-text-color))\"\r\n      />\r\n      <VisAxis\r\n        v-if=\"showYAxis\"\r\n        type=\"y\"\r\n        :tick-line=\"false\"\r\n        :tick-format=\"yFormatter\"\r\n        :domain-line=\"false\"\r\n        :grid-line=\"showGridLine\"\r\n        :attributes=\"{\r\n          [Axis.selectors.grid]: {\r\n            class: 'text-muted',\r\n          },\r\n        }\"\r\n        tick-text-color=\"hsl(var(--vis-text-color))\"\r\n      />\r\n\r\n      <slot />\r\n    </VisXYContainer>\r\n  </div>\r\n</template>\r\n",
       "type": "registry:ui",
       "target": ""
     },