@narrative.io/jsonforms-provider-protocols 3.0.0-beta.3 → 3.0.0-beta.5

package/src/vue/components/ProviderSelect.vue

@@ -3,6 +3,7 @@ import type { ControlElement, JsonSchema } from "@jsonforms/core";
 import { useJsonFormsControl } from "@jsonforms/vue";
 import { computed, inject, watch } from "vue";
 import { useProvider } from "../composables/useProvider";
+import { useDeriveInitialValue } from "../composables/useDeriveInitialValue";
 import { useProjection } from "../composables/useProjection";
 import { shouldAutoSelect } from "../utils/autoSelect";
 import Dropdown from "primevue/dropdown";
@@ -13,7 +14,10 @@ const props = defineProps<{
   path: string;
 }>();
 const { control, handleChange: rawHandleChange } = useJsonFormsControl(props);
-const { projectedData, handleProjectedChange: handleChange } = useProjection(control, rawHandleChange);
+const { projectedData, handleProjectedChange: handleChange } = useProjection(
+  control,
+  rawHandleChange,
+);
 
 const binding = computed(() => {
   const provider = control.value.uischema?.options?.provider;
@@ -46,6 +50,9 @@ const { items, loading, error } = useProvider(binding, {
 
 // Provider will automatically reload when rootData changes due to reactive cache key
 
+// deriveInitialValue — async API-based initial value seeding
+useDeriveInitialValue({ control, handleChange });
+
 // Auto-select when provider returns only one item (enabled by default)
 watch(
   [items, loading],
@@ -62,7 +69,7 @@ watch(
       handleChange(control.value.path, valueToSelect);
     }
   },
-  { immediate: true }
+  { immediate: true },
 );
 
 const value = computed({
@@ -81,16 +88,16 @@ const placeholder = computed(() => {
 </script>
 
 <template>
-  <div class="flex flex-column gap-2">
-    <label v-if="control.schema.title" class="text-color text-left">{{
+  <div class="jf-control">
+    <label v-if="control.schema.title" class="jf-label">{{
       control.schema.title
     }}</label>
-    <div v-if="control.description" class="text-color-secondary text-left">
+    <div v-if="control.description" class="jf-description">
       {{ control.description }}
     </div>
     <Dropdown
       v-model="value"
-      class="w-full"
+      class="w-full!"
       :options="items"
       option-label="label"
       option-value="value"

package/src/vue/composables/useDerive.ts

@@ -1,4 +1,11 @@
-import { computed, watch, unref, inject, type Ref, type ComputedRef } from "vue";
+import {
+  computed,
+  watch,
+  unref,
+  inject,
+  type Ref,
+  type ComputedRef,
+} from "vue";
 import { type ControlElement } from "@jsonforms/core";
 import { useDataLayer } from "./useDataLayer";
 
@@ -14,7 +21,11 @@ interface DeriveOptions {
   data?: Ref<unknown> | ComputedRef<unknown>;
 }
 
-export function useDerive({ control, handleChange, data: dataOverride }: DeriveOptions) {
+export function useDerive({
+  control,
+  handleChange,
+  data: dataOverride,
+}: DeriveOptions) {
   // Get the root form data from JSONForms context
   const injectedFormData = inject<{ value: unknown }>("formData", {
     value: {},
@@ -50,7 +61,9 @@ export function useDerive({ control, handleChange, data: dataOverride }: DeriveO
           data,
           extData,
         );
-        const compareData = dataOverride ? unref(dataOverride) : control.value.data;
+        const compareData = dataOverride
+          ? unref(dataOverride)
+          : control.value.data;
         if (derivedValue !== compareData) {
           handleChange(control.value.path, derivedValue);
         }

package/src/vue/composables/useDeriveInitialValue.ts

@@ -0,0 +1,195 @@
+import { computed, inject, ref, watch, type Ref, type ComputedRef } from "vue";
+import { type ControlElement } from "@jsonforms/core";
+import { renderTpl, renderObj } from "../../core/templating";
+import { jp } from "../../core/jsonpath";
+import {
+  applyTransformPipeline,
+  type TransformPipeline,
+} from "../../core/transforms";
+import type { AuthConfig } from "../../core/types";
+
+export interface DeriveInitialValueCfg {
+  protocol: string;
+  config: {
+    url: string;
+    method?: "GET" | "POST";
+    headers?: Record<string, string>;
+    query?: Record<string, unknown>;
+    body?: unknown;
+    auth?: AuthConfig;
+    items: string;
+    map: { value: string };
+    transforms?: TransformPipeline;
+    showError?: boolean;
+  };
+}
+
+interface DeriveInitialValueOptions {
+  control: Ref<{
+    uischema: ControlElement;
+    path: string;
+    data: unknown;
+  }>;
+  handleChange: (path: string, value: unknown) => void;
+  data?: Ref<unknown> | ComputedRef<unknown>;
+}
+
+function buildAuthHeaders(
+  auth?: AuthConfig,
+  globalAuth?: Record<string, unknown>,
+): Record<string, string> {
+  const headers: Record<string, string> = {};
+  if (!auth) return headers;
+
+  if (auth.use && globalAuth?.[auth.use]) {
+    const globalValue = globalAuth[auth.use];
+    const value =
+      typeof globalValue === "function" ? globalValue() : globalValue;
+    if (auth.use === "apiKey") headers["X-API-Key"] = String(value);
+    else if (auth.use === "bearer")
+      headers["Authorization"] = `Bearer ${value}`;
+    else if (auth.use === "token") headers["Authorization"] = `Token ${value}`;
+    return headers;
+  }
+
+  if (auth.bearer) {
+    const v = typeof auth.bearer === "function" ? auth.bearer() : auth.bearer;
+    headers["Authorization"] = `Bearer ${v}`;
+  }
+  if (auth.apiKey) {
+    const v = typeof auth.apiKey === "function" ? auth.apiKey() : auth.apiKey;
+    headers["X-API-Key"] = String(v);
+  }
+  if (auth.token) {
+    const v = typeof auth.token === "function" ? auth.token() : auth.token;
+    headers["Authorization"] = `Token ${v}`;
+  }
+
+  return headers;
+}
+
+/**
+ * Returns true when the template URL contains `{{…}}` placeholders but
+ * one or more of those placeholders resolved to an empty string, which
+ * means a required data dependency hasn't been set yet.
+ */
+function hasUnresolvedTemplates(
+  templateUrl: string,
+  renderedUrl: string,
+): boolean {
+  if (!templateUrl.includes("{{")) return false;
+  // After protocol, empty segments indicate unresolved vars
+  const pathPart = renderedUrl.replace(/^https?:\/\/[^/]+/, "");
+  if (pathPart.includes("//")) return true;
+  // Trailing slash when the template didn't have one
+  if (renderedUrl.endsWith("/") && !templateUrl.endsWith("/")) return true;
+  return false;
+}
+
+export function useDeriveInitialValue({
+  control,
+  handleChange,
+}: DeriveInitialValueOptions) {
+  const injectedFormData = inject<{ value: unknown }>("formData", {
+    value: {},
+  });
+  const rootData = computed(() => injectedFormData.value || {});
+  const auth = inject("providerAuth", {}) as Record<string, unknown>;
+
+  const cfg = computed<DeriveInitialValueCfg | undefined>(() => {
+    return control.value.uischema?.options?.deriveInitialValue as
+      | DeriveInitialValueCfg
+      | undefined;
+  });
+
+  // Compute the resolved URL reactively
+  const resolvedUrl = computed<string | null>(() => {
+    const c = cfg.value;
+    if (!c?.config?.url) return null;
+    const rendered = renderTpl(c.config.url, { data: rootData.value });
+    if (hasUnresolvedTemplates(c.config.url, rendered)) return null;
+    return rendered;
+  });
+
+  const lastFetchedUrl = ref<string | null>(null);
+  const loading = ref(false);
+  const error = ref<string | undefined>(undefined);
+
+  watch(
+    resolvedUrl,
+    async (url) => {
+      if (!url || !cfg.value) return;
+      // Only fetch when the URL changes (new context).
+      // Same URL = same context; don't override user selection.
+      if (url === lastFetchedUrl.value) return;
+      lastFetchedUrl.value = url;
+
+      loading.value = true;
+      error.value = undefined;
+
+      try {
+        const c = cfg.value.config;
+        const fullUrl = new URL(url);
+
+        // Query params
+        const q = renderObj(c.query ?? {}, {
+          data: rootData.value,
+        }) as Record<string, unknown>;
+        for (const [k, v] of Object.entries(q)) {
+          if (v !== undefined && v !== "")
+            fullUrl.searchParams.set(k, String(v));
+        }
+
+        // Headers
+        const baseHeaders = renderObj(c.headers ?? {}, {
+          data: rootData.value,
+        }) as Record<string, string>;
+        const authHeaders = buildAuthHeaders(c.auth, auth);
+        const headers = { ...baseHeaders, ...authHeaders };
+
+        const method = c.method ?? "GET";
+        const requestInit: RequestInit = { method, headers };
+        if (method !== "GET" && c.body) {
+          requestInit.body = JSON.stringify(
+            renderObj(c.body, { data: rootData.value }),
+          );
+        }
+
+        const res = await fetch(fullUrl.toString(), requestInit);
+        if (!res.ok) {
+          if (c.showError !== false) {
+            throw new Error(`REST ${res.status}`);
+          }
+          return;
+        }
+
+        const json = await res.json();
+        let items = jp(json, c.items);
+
+        // Apply transforms if provided
+        if (c.transforms && c.transforms.length > 0) {
+          items = applyTransformPipeline(items, c.transforms);
+        }
+
+        if (items.length === 0) return; // No items → leave field empty
+
+        // Extract value from first item
+        const derivedValue = jp(items[0], c.map.value)[0];
+        if (derivedValue !== undefined) {
+          handleChange(control.value.path, derivedValue);
+        }
+      } catch (e) {
+        error.value = (e as Error)?.message ?? String(e);
+        console.warn(
+          `deriveInitialValue fetch failed for ${control.value.path}:`,
+          e,
+        );
+      } finally {
+        loading.value = false;
+      }
+    },
+    { immediate: true },
+  );
+
+  return { loading, error };
+}

package/src/vue/composables/useProjection.ts

@@ -27,15 +27,9 @@ interface ErrorLike {
  * Resolve the display label for a control.
  * Priority: uischema options.label → schemaTitle (projected sub-schema) → control.label.
  */
-function resolveLabel(
-  ctrl: ProjectionControl,
-  schemaTitle?: string,
-): string {
+function resolveLabel(ctrl: ProjectionControl, schemaTitle?: string): string {
   return (
-    (ctrl.uischema?.options?.label as string) ??
-    schemaTitle ??
-    ctrl.label ??
-    ""
+    (ctrl.uischema?.options?.label as string) ?? schemaTitle ?? ctrl.label ?? ""
   );
 }
 
@@ -69,7 +63,9 @@ function prefixErrors(label: string, errors: string): string {
 function getErrorPath(error: ErrorLike): string {
   let p = (error.instancePath || "").replace(/\//g, ".").replace(/^\./, "");
   if (error.keyword === "required" && error.params?.missingProperty) {
-    p = p ? p + "." + error.params.missingProperty : error.params.missingProperty;
+    p = p
+      ? p + "." + error.params.missingProperty
+      : error.params.missingProperty;
   }
   return p;
 }
@@ -160,9 +156,7 @@ export function useProjection(
       errStr = baseErrors;
     } else {
       const projMsg = matching
-        .map((e) =>
-          e.keyword === "required" ? "is required" : e.message,
-        )
+        .map((e) => (e.keyword === "required" ? "is required" : e.message))
         .filter(Boolean)
         .join("\n");
       errStr = [baseErrors, projMsg].filter(Boolean).join("\n");

package/src/vue/index.ts

@@ -22,8 +22,11 @@ const isIntegerScope = (uischema: unknown, schema: unknown) => {
   const ui = uischema as { type?: string; scope?: string };
   if (ui?.type !== "Control" || !ui?.scope) return false;
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const propertySchema = resolveScopeSchema(ui.scope, schema as Record<string, any>);
+  const propertySchema = resolveScopeSchema(
+    ui.scope,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    schema as Record<string, any>,
+  );
   return propertySchema?.type === "integer";
 };
 
@@ -53,8 +56,11 @@ const isArrayControl = (uischema: UISchemaElement, schema: unknown) => {
     return false;
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const propertySchema = resolveScopeSchema(controlSchema.scope, schema as Record<string, any>);
+  const propertySchema = resolveScopeSchema(
+    controlSchema.scope,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    schema as Record<string, any>,
+  );
   return propertySchema?.type === "array";
 };
 
@@ -79,6 +85,8 @@ export { useProjection } from "./composables/useProjection";
 export type { ProjectionResult } from "./composables/useProjection";
 export { createDataLayer, useDataLayer } from "./composables/useDataLayer";
 export type { DataLayer } from "./composables/useDataLayer";
+export { useDeriveInitialValue } from "./composables/useDeriveInitialValue";
+export type { DeriveInitialValueCfg } from "./composables/useDeriveInitialValue";
 export { useDirtyValidation } from "./composables/useDirtyValidation";
 export * from "./testers";
 

package/src/vue/primevue/JfBoolean.vue

@@ -49,7 +49,12 @@ import Checkbox from "primevue/checkbox";
 const instance = getCurrentInstance()!;
 const props = instance.props as unknown as ControlProps;
 const { control, handleChange: rawHandleChange } = useJsonFormsControl(props);
-const { projectedData, handleProjectedChange: handleChange, projectedErrors, projectedLabel } = useProjection(control, rawHandleChange);
+const {
+  projectedData,
+  handleProjectedChange: handleChange,
+  projectedErrors,
+  projectedLabel,
+} = useProjection(control, rawHandleChange);
 
 // Track user interaction — errors only show after first toggle
 const { showErrors, markDirty } = useDirtyValidation(control, projectedErrors);
@@ -61,7 +66,7 @@ const onToggle = (val: boolean) => {
 </script>
 
 <template>
-  <div class="flex items-center gap-2">
+  <div class="jf-control" style="flex-direction: row; align-items: center">
     <Checkbox
       :binary="true"
       :model-value="!!projectedData"
@@ -70,7 +75,7 @@ const onToggle = (val: boolean) => {
       :aria-invalid="showErrors || undefined"
       @update:model-value="onToggle"
     />
-    <label v-if="projectedLabel">{{ projectedLabel }}</label>
+    <label v-if="projectedLabel" class="jf-label">{{ projectedLabel }}</label>
     <small v-if="showErrors" class="p-error">{{ projectedErrors }}</small>
   </div>
 </template>

package/src/vue/primevue/JfEnum.vue

@@ -45,6 +45,7 @@ import { useJsonFormsControl } from "@jsonforms/vue";
 import { computed, inject, getCurrentInstance, watch } from "vue";
 import { useProvider } from "../composables/useProvider";
 import { useDerive } from "../composables/useDerive";
+import { useDeriveInitialValue } from "../composables/useDeriveInitialValue";
 import { useProjection } from "../composables/useProjection";
 import { useDirtyValidation } from "../composables/useDirtyValidation";
 import { shouldAutoSelect } from "../utils/autoSelect";
@@ -54,7 +55,12 @@ import Dropdown from "primevue/dropdown";
 const instance = getCurrentInstance()!;
 const props = instance.props as unknown as ControlProps;
 const { control, handleChange: rawHandleChange } = useJsonFormsControl(props);
-const { projectedData, handleProjectedChange: handleChange, projectedErrors, projectedLabel } = useProjection(control, rawHandleChange);
+const {
+  projectedData,
+  handleProjectedChange: handleChange,
+  projectedErrors,
+  projectedLabel,
+} = useProjection(control, rawHandleChange);
 
 type Opt = { label: string; value: unknown };
 const toOptions = (schema?: JsonSchema): Opt[] => {
@@ -142,6 +148,9 @@ const options = computed(() => {
 // Add derive functionality
 useDerive({ control, handleChange, data: projectedData });
 
+// Add deriveInitialValue — async API-based initial value seeding
+useDeriveInitialValue({ control, handleChange });
+
 // Auto-select when provider returns only one item (enabled by default)
 watch(
   [providerItems, loading],
@@ -158,7 +167,7 @@ watch(
       handleChange(control.value.path, valueToSelect);
     }
   },
-  { immediate: true }
+  { immediate: true },
 );
 
 // Track user interaction — errors only show after blur
@@ -170,15 +179,13 @@ const onSelect = (val: unknown) => {
 </script>
 
 <template>
-  <div class="flex flex-column gap-2">
-    <label v-if="projectedLabel" class="text-color text-left">{{
-      projectedLabel
-    }}</label>
-    <div v-if="control.description" class="text-color-secondary text-left">
+  <div class="jf-control">
+    <label v-if="projectedLabel" class="jf-label">{{ projectedLabel }}</label>
+    <div v-if="control.description" class="jf-description">
       {{ control.description }}
     </div>
     <Dropdown
-      :class="['w-full', { 'p-invalid': showErrors }]"
+      :class="['w-full!', { 'p-invalid': showErrors }]"
       :options="options"
       option-label="label"
       option-value="value"

package/src/vue/primevue/JfEnumArray.vue

@@ -53,7 +53,12 @@ import MultiSelect from "primevue/multiselect";
 const instance = getCurrentInstance()!;
 const props = instance.props as unknown as ControlProps;
 const { control, handleChange: rawHandleChange } = useJsonFormsControl(props);
-const { projectedData, handleProjectedChange: handleChange, projectedErrors, projectedLabel } = useProjection(control, rawHandleChange);
+const {
+  projectedData,
+  handleProjectedChange: handleChange,
+  projectedErrors,
+  projectedLabel,
+} = useProjection(control, rawHandleChange);
 
 type Opt = { label: string; value: unknown };
 const toOptions = (schema?: JsonSchema): Opt[] => {
@@ -145,14 +150,16 @@ watch(
         control.value.uischema?.options?.autoSelectSingle === true,
       isLoading,
       items,
-      currentValue: Array.isArray(projectedData.value) ? projectedData.value : [],
+      currentValue: Array.isArray(projectedData.value)
+        ? projectedData.value
+        : [],
     });
 
     if (valueToSelect !== null) {
       handleChange(control.value.path, valueToSelect);
     }
   },
-  { immediate: true }
+  { immediate: true },
 );
 
 const placeholder = computed<string | undefined>(() => {
@@ -190,17 +197,15 @@ const model = computed<unknown[]>({
 </script>
 
 <template>
-  <div class="flex flex-column gap-2">
-    <label v-if="projectedLabel" class="text-color text-left">{{
-      projectedLabel
-    }}</label>
-    <div v-if="control.description" class="text-color-secondary text-left">
+  <div class="jf-control">
+    <label v-if="projectedLabel" class="jf-label">{{ projectedLabel }}</label>
+    <div v-if="control.description" class="jf-description">
       {{ control.description }}
     </div>
 
     <MultiSelect
       v-model="model"
-      :class="['w-full', { 'p-invalid': showErrors }]"
+      :class="['w-full!', { 'p-invalid': showErrors }]"
       :options="options"
       option-label="label"
       option-value="value"
@@ -214,8 +219,6 @@ const model = computed<unknown[]>({
     <small v-if="error" class="p-error" role="alert"
       >Failed to load: {{ error }}</small
     >
-    <small v-else-if="showErrors" class="p-error">{{
-      projectedErrors
-    }}</small>
+    <small v-else-if="showErrors" class="p-error">{{ projectedErrors }}</small>
   </div>
 </template>

package/src/vue/primevue/JfNumber.vue

@@ -50,7 +50,12 @@ import InputNumber from "primevue/inputnumber";
 const instance = getCurrentInstance()!;
 const props = instance.props as unknown as ControlProps;
 const { control, handleChange: rawHandleChange } = useJsonFormsControl(props);
-const { projectedData, handleProjectedChange: handleChange, projectedErrors, projectedLabel } = useProjection(control, rawHandleChange);
+const {
+  projectedData,
+  handleProjectedChange: handleChange,
+  projectedErrors,
+  projectedLabel,
+} = useProjection(control, rawHandleChange);
 
 const options = computed(
   () =>
@@ -110,16 +115,14 @@ const onNumber = (val: number | null) => {
 </script>
 
 <template>
-  <div class="flex flex-column gap-2">
-    <label v-if="projectedLabel" class="text-color text-left">{{
-      projectedLabel
-    }}</label>
-    <div v-if="control.description" class="text-color-secondary text-left">
+  <div class="jf-control">
+    <label v-if="projectedLabel" class="jf-label">{{ projectedLabel }}</label>
+    <div v-if="control.description" class="jf-description">
       {{ control.description }}
     </div>
     <InputNumber
-      :class="['w-full', { 'p-invalid': showErrors }]"
-      :input-class="['w-full', { 'p-invalid': showErrors }]"
+      :class="['w-full!', { 'p-invalid': showErrors }]"
+      :input-class="['w-full!', { 'p-invalid': showErrors }]"
       :use-grouping="useGrouping"
       :mode="mode"
       :currency="currency"

package/src/vue/primevue/JfText.vue

@@ -43,6 +43,7 @@ import { useJsonFormsControl } from "@jsonforms/vue";
 import { computed, ref, inject, watch, getCurrentInstance } from "vue";
 import { useProvider } from "../composables/useProvider";
 import { useDerive } from "../composables/useDerive";
+import { useDeriveInitialValue } from "../composables/useDeriveInitialValue";
 import { useProjection } from "../composables/useProjection";
 import { useDirtyValidation } from "../composables/useDirtyValidation";
 import InputText from "primevue/inputtext";
@@ -52,7 +53,12 @@ import AutoComplete from "primevue/autocomplete";
 const instance = getCurrentInstance()!;
 const props = instance.props as unknown as ControlProps;
 const { control, handleChange: rawHandleChange } = useJsonFormsControl(props);
-const { projectedData, handleProjectedChange: handleChange, projectedErrors, projectedLabel } = useProjection(control, rawHandleChange);
+const {
+  projectedData,
+  handleProjectedChange: handleChange,
+  projectedErrors,
+  projectedLabel,
+} = useProjection(control, rawHandleChange);
 
 // Provider support for autocomplete functionality
 const binding = computed(() => {
@@ -118,6 +124,9 @@ const isAutocomplete = computed(() => !!binding.value);
 // Add derive functionality
 useDerive({ control, handleChange, data: projectedData });
 
+// Add deriveInitialValue — async API-based initial value seeding
+useDeriveInitialValue({ control, handleChange });
+
 // Track user interaction — errors only show after blur
 const { showErrors, markDirty } = useDirtyValidation(control, projectedErrors);
 
@@ -150,16 +159,14 @@ const onSelect = (event: { value?: { value?: unknown } | unknown }) => {
 </script>
 
 <template>
-  <div class="flex flex-column gap-2">
-    <label v-if="projectedLabel" class="text-color text-left">{{
-      projectedLabel
-    }}</label>
-    <div v-if="control.description" class="text-color-secondary text-left">
+  <div class="jf-control">
+    <label v-if="projectedLabel" class="jf-label">{{ projectedLabel }}</label>
+    <div v-if="control.description" class="jf-description">
       {{ control.description }}
     </div>
     <AutoComplete
       v-if="isAutocomplete"
-      :class="['w-full', { 'p-invalid': showErrors }]"
+      :class="['w-full!', { 'p-invalid': showErrors }]"
       :model-value="projectedData ?? ''"
       :suggestions="items"
       option-label="label"
@@ -173,7 +180,7 @@ const onSelect = (event: { value?: { value?: unknown } | unknown }) => {
     />
     <InputText
       v-else
-      :class="['w-full', { 'p-invalid': showErrors }]"
+      :class="['w-full!', { 'p-invalid': showErrors }]"
       :model-value="(projectedData as string) ?? ''"
       :disabled="!control.enabled"
       :aria-invalid="showErrors || undefined"

package/src/vue/primevue/JfTextArea.vue

@@ -49,7 +49,12 @@ import Textarea from "primevue/textarea";
 const instance = getCurrentInstance()!;
 const props = instance.props as unknown as ControlProps;
 const { control, handleChange: rawHandleChange } = useJsonFormsControl(props);
-const { projectedData, handleProjectedChange: handleChange, projectedErrors, projectedLabel } = useProjection(control, rawHandleChange);
+const {
+  projectedData,
+  handleProjectedChange: handleChange,
+  projectedErrors,
+  projectedLabel,
+} = useProjection(control, rawHandleChange);
 
 const placeholder = computed<string | undefined>(
   () =>
@@ -79,15 +84,13 @@ function onBlur() {
 </script>
 
 <template>
-  <div class="flex flex-column gap-2">
-    <label v-if="projectedLabel" class="text-color text-left">{{
-      projectedLabel
-    }}</label>
-    <div v-if="control.description" class="text-color-secondary text-left">
+  <div class="jf-control">
+    <label v-if="projectedLabel" class="jf-label">{{ projectedLabel }}</label>
+    <div v-if="control.description" class="jf-description">
       {{ control.description }}
     </div>
     <Textarea
-      :class="['w-full', { 'p-invalid': showErrors }]"
+      :class="['w-full!', { 'p-invalid': showErrors }]"
       :model-value="(projectedData as string) ?? ''"
       :disabled="!control.enabled"
       :aria-invalid="showErrors || undefined"