@sfxcode/formkit-nuxt-ui 0.7.2 → 0.7.4

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=4.0.0"
   },
-  "version": "0.7.2",
+  "version": "0.7.4",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/FUDataView.d.vue.ts

@@ -1,8 +1,8 @@
 import type { FormKitSchemaDefinition } from '@formkit/core';
 import type { PropType } from 'vue';
-declare var __VLS_6: {};
+declare var __VLS_12: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_6) => any;
+    default?: (props: typeof __VLS_12) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     data: {

package/dist/runtime/components/FUDataView.vue

@@ -30,11 +30,19 @@ if (props.data) {
 </script>
 
 <template>
-  <FormKitSchema
-    v-if="schema"
-    :schema="schema"
-    :data="formData"
-  />
+  <FormKit
+    v-model="formData"
+    :actions="false"
+    :form-class="formClass"
+    type="form"
+  >
+    <FormKitSchema
+      v-if="schema"
+      :schema="schema"
+      :data="formData"
+    />
+  </FormKit>
+
   <slot />
   <FuDataDebug
     v-if="debugData"

package/dist/runtime/components/FUDataView.vue.d.ts

@@ -1,8 +1,8 @@
 import type { FormKitSchemaDefinition } from '@formkit/core';
 import type { PropType } from 'vue';
-declare var __VLS_6: {};
+declare var __VLS_12: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_6) => any;
+    default?: (props: typeof __VLS_12) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     data: {

package/dist/runtime/components/output/FUIcon.vue

@@ -15,7 +15,6 @@ defineProps({
 <template>
   <UIcon
     :name="name"
-    :class="iconClass"
     @click="onClick"
   />
 </template>

package/dist/runtime/components/output/FUOutputBoolean.vue

@@ -36,20 +36,20 @@ const { containerClass, iconClass, leadingIconName, trailingIconName } = useForm
     <FUIcon
       v-if="leadingIconName"
       :name="leadingIconName"
-      :icon-class="iconClass"
+      :class="iconClass"
       :on-click="context?.onLeadingIconClicked"
     />
     <FUIcon
       v-if="booleanIcon"
       :name="booleanIcon"
-      :icon-class="iconClass"
+      :class="iconClass"
       :on-click="context?.onIconClicked"
     />
     <span>{{ displayValue }}</span>
     <FUIcon
       v-if="trailingIconName"
       :name="trailingIconName"
-      :icon-class="iconClass"
+      :class="iconClass"
       :on-click="context?.onTrailingIconClicked"
     />
   </div>

package/dist/runtime/components/output/FUOutputDate.vue

@@ -30,7 +30,7 @@ const { containerClass, iconClass, leadingIconName, trailingIconName } = useForm
     <FUIcon
       v-if="leadingIconName"
       :name="leadingIconName"
-      :icon-class="iconClass"
+      :class="iconClass"
       :on-click="context?.onLeadingIconClicked"
     />
     <NuxtTime
@@ -45,7 +45,7 @@ const { containerClass, iconClass, leadingIconName, trailingIconName } = useForm
     <FUIcon
       v-if="trailingIconName"
       :name="trailingIconName"
-      :icon-class="iconClass"
+      :class="iconClass"
       :on-click="context?.onTrailingIconClicked"
     />
   </div>

package/dist/runtime/components/output/FUOutputLink.vue

@@ -46,7 +46,7 @@ const linkClass = computed(() => {
     <FUIcon
       v-if="leadingIconName"
       :name="leadingIconName"
-      :icon-class="iconClass"
+      :class="iconClass"
       :on-click="context?.onLeadingIconClicked"
     />
     <ULink
@@ -71,7 +71,7 @@ const linkClass = computed(() => {
     <FUIcon
       v-if="trailingIconName"
       :name="trailingIconName"
-      :icon-class="iconClass"
+      :class="iconClass"
       :on-click="context?.onTrailingIconClicked"
     />
   </div>

package/dist/runtime/components/output/FUOutputList.vue

@@ -56,7 +56,7 @@ const { containerClass, iconClass, leadingIconName, trailingIconName } = useForm
     <FUIcon
       v-if="leadingIconName"
       :name="leadingIconName"
-      :icon-class="iconClass"
+      :class="iconClass"
       :on-click="context?.onLeadingIconClicked"
     />
 
@@ -136,7 +136,7 @@ const { containerClass, iconClass, leadingIconName, trailingIconName } = useForm
     <FUIcon
       v-if="trailingIconName"
       :name="trailingIconName"
-      :icon-class="iconClass"
+      :class="iconClass"
       :on-click="context?.onTrailingIconClicked"
     />
   </div>

package/dist/runtime/components/output/FUOutputNumber.vue

@@ -38,14 +38,14 @@ const { containerClass, iconClass, leadingIconName, trailingIconName } = useForm
     <FUIcon
       v-if="leadingIconName"
       :name="leadingIconName"
-      :icon-class="iconClass"
+      :class="iconClass"
       :on-click="context?.onLeadingIconClicked"
     />
     <span>{{ displayValue }}</span>
     <FUIcon
       v-if="trailingIconName"
       :name="trailingIconName"
-      :icon-class="iconClass"
+      :class="iconClass"
       :on-click="context?.onTrailingIconClicked"
     />
   </div>

package/dist/runtime/components/output/FUOutputText.d.vue.ts

@@ -10,6 +10,7 @@ export interface FormKitOutputTextProps {
     trailing?: boolean;
     trailingIcon?: string;
     variant?: 'outline' | 'soft' | 'subtle' | 'ghost' | 'none';
+    outputType?: 'text' | 'email' | 'url' | 'tel' | 'color' | 'duration';
 }
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     context: {

package/dist/runtime/components/output/FUOutputText.vue

@@ -1,6 +1,8 @@
 <script setup>
 import { computed } from "vue";
 import { useFormKitOutput } from "../../utils/useFormKitOutput";
+import { convertColorToHex } from "../../utils/colorConverter";
+import { formattedDuration } from "../../utils/durationConverter";
 import FUIcon from "./FUIcon.vue";
 const props = defineProps({
   context: {
@@ -8,7 +10,42 @@ const props = defineProps({
     required: true
   }
 });
-const displayValue = computed(() => props.context._value ?? "");
+const outputType = computed(() => props.context.outputType ?? "text");
+const displayValue = computed(() => {
+  let result = props.context._value ?? "";
+  if (outputType.value === "duration") {
+    result = formattedDuration(result);
+  }
+  return result;
+});
+const isLink = computed(() => ["email", "url", "tel"].includes(outputType.value));
+const linkHref = computed(() => {
+  const value = displayValue.value;
+  if (!value)
+    return "";
+  switch (outputType.value) {
+    case "email":
+      return value.startsWith("mailto:") ? value : `mailto:${value}`;
+    case "tel":
+      return value.startsWith("tel:") ? value : `tel:${value}`;
+    case "url":
+      return value;
+    default:
+      return "";
+  }
+});
+const colorValue = computed(() => {
+  if (outputType.value === "color") {
+    return convertColorToHex(displayValue.value);
+  }
+  return void 0;
+});
+const colorStyle = computed(() => {
+  if (outputType.value === "color") {
+    return `color: ${colorValue.value} `;
+  }
+  return " ";
+});
 const { containerClass, iconClass, leadingIconName, trailingIconName } = useFormKitOutput(props.context);
 </script>
 
@@ -21,14 +58,32 @@ const { containerClass, iconClass, leadingIconName, trailingIconName } = useForm
     <FUIcon
       v-if="leadingIconName"
       :name="leadingIconName"
-      :icon-class="iconClass"
+      :class="iconClass"
+      :style="colorStyle"
       :on-click="context?.onLeadingIconClicked"
     />
-    <span>{{ displayValue }}</span>
+
+    <!-- Link output types (email, url, tel) -->
+    <ULink
+      v-if="isLink && displayValue"
+      :href="linkHref"
+      :target="outputType === 'url' ? '_blank' : void 0"
+      :rel="outputType === 'url' ? 'noopener noreferrer' : void 0"
+    >
+      {{ displayValue }}
+    </ULink>
+
+    <!-- Default text output -->
+    <span
+      v-else
+      :style="colorStyle"
+    >{{ displayValue }}</span>
+
     <FUIcon
       v-if="trailingIconName"
       :name="trailingIconName"
-      :icon-class="iconClass"
+      :class="iconClass"
+      :style="colorStyle"
       :on-click="context?.onTrailingIconClicked"
     />
   </div>

package/dist/runtime/components/output/FUOutputText.vue.d.ts

@@ -10,6 +10,7 @@ export interface FormKitOutputTextProps {
     trailing?: boolean;
     trailingIcon?: string;
     variant?: 'outline' | 'soft' | 'subtle' | 'ghost' | 'none';
+    outputType?: 'text' | 'email' | 'url' | 'tel' | 'color' | 'duration';
 }
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     context: {

package/dist/runtime/definitions/output.js

@@ -6,7 +6,7 @@ import FUOutputLink from "../components/output/FUOutputLink.vue";
 import FUOutputNumber from "../components/output/FUOutputNumber.vue";
 import FUOutputList from "../components/output/FUOutputList.vue";
 export const nuxtUIOutputTextDefinition = createInput(FUOutputText, {
-  props: ["size", "color", "variant", "icon", "leadingIcon", "trailingIcon", "leading", "trailing", "onIconClicked", "onLeadingIconClicked", "onTrailingIconClicked"],
+  props: ["size", "color", "variant", "icon", "leadingIcon", "trailingIcon", "leading", "trailing", "onIconClicked", "onLeadingIconClicked", "onTrailingIconClicked", "outputType"],
   family: "NuxtUIOutput"
 });
 export const nuxtUIOutputBooleanDefinition = createInput(FUOutputBoolean, {

package/dist/runtime/index.d.ts

@@ -0,0 +1,71 @@
+import type { FormKitInputs } from '@formkit/inputs';
+declare module '@formkit/inputs' {
+    interface FormKitInputProps<Props extends FormKitInputs<Props>> {
+        nuxtUICheckbox: {
+            type: 'nuxtUICheckbox';
+        };
+        nuxtUICheckboxGroup: {
+            type: 'nuxtUICheckboxGroup';
+        };
+        nuxtUIColorPicker: {
+            type: 'nuxtUIColorPicker';
+        };
+        nuxtUIInput: {
+            type: 'nuxtUIInput';
+        };
+        nuxtUIInputDate: {
+            type: 'nuxtUIInputDate';
+        };
+        nuxtUIInputMenu: {
+            type: 'nuxtUIInputMenu';
+        };
+        nuxtUIInputNumber: {
+            type: 'nuxtUIInputNumber';
+        };
+        nuxtUIInputTags: {
+            type: 'nuxtUIInputTags';
+        };
+        nuxtUIInputTime: {
+            type: 'nuxtUIInputTime';
+        };
+        nuxtUIPinInput: {
+            type: 'nuxtUIPinInput';
+        };
+        nuxtUIRadioGroup: {
+            type: 'nuxtUIRadioGroup';
+        };
+        nuxtUISelect: {
+            type: 'nuxtUISelect';
+        };
+        nuxtUISelectMenu: {
+            type: 'nuxtUISelectMenu';
+        };
+        nuxtUISlider: {
+            type: 'nuxtUISlider';
+        };
+        nuxtUISwitch: {
+            type: 'nuxtUISwitch';
+        };
+        nuxtUITextarea: {
+            type: 'nuxtUITextarea';
+        };
+        nuxtUIOutputText: {
+            type: 'nuxtUIOutputText';
+        };
+        nuxtUIOutputBoolean: {
+            type: 'nuxtUIOutputBoolean';
+        };
+        nuxtUIOutputDate: {
+            type: 'nuxtUIOutputDate';
+        };
+        nuxtUIOutputLink: {
+            type: 'nuxtUIOutputLink';
+        };
+        nuxtUIOutputNumber: {
+            type: 'nuxtUIOutputNumber';
+        };
+        nuxtUIOutputList: {
+            type: 'nuxtUIOutputList';
+        };
+    }
+}

package/dist/runtime/plugins/index.js

@@ -1,5 +1,5 @@
 export function addNuxtAsteriskPlugin(node) {
-  if (!node.props.type.startsWith("nuxtUI") || node.props.type.startsWith("UFOutput"))
+  if (!node.props.type.startsWith("nuxtUI") || node.props.type.startsWith("FUOutput"))
     return;
   node.on("created", () => {
     if (node.props.definition?.schema) {

package/dist/runtime/utils/colorConverter.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Converts various color formats to hex
+ * Supports: hex, rgb, rgba, hsl, hsla, cmyk, lab
+ */
+export declare function convertColorToHex(color: string): string;

package/dist/runtime/utils/colorConverter.js

@@ -0,0 +1,134 @@
+export function convertColorToHex(color) {
+  if (!color)
+    return "#000000";
+  const trimmedColor = color.trim();
+  if (trimmedColor.startsWith("#")) {
+    return normalizeHex(trimmedColor);
+  }
+  if (trimmedColor.toLowerCase().startsWith("rgb")) {
+    return rgbToHex(trimmedColor);
+  }
+  if (trimmedColor.toLowerCase().startsWith("hsl")) {
+    return hslToHex(trimmedColor);
+  }
+  if (trimmedColor.toLowerCase().startsWith("cmyk")) {
+    return cmykToHex(trimmedColor);
+  }
+  if (trimmedColor.toLowerCase().startsWith("lab")) {
+    return labToHex(trimmedColor);
+  }
+  if (/^[\da-f]{3,8}$/i.test(trimmedColor)) {
+    return normalizeHex(`#${trimmedColor}`);
+  }
+  return "#000000";
+}
+function normalizeHex(hex) {
+  const cleaned = hex.replace("#", "").toLowerCase();
+  if (!/^[\da-f]+$/i.test(cleaned) || cleaned.length === 0) {
+    return "#000000";
+  }
+  if (cleaned.length === 3) {
+    return `#${cleaned[0]}${cleaned[0]}${cleaned[1]}${cleaned[1]}${cleaned[2]}${cleaned[2]}`;
+  }
+  if (cleaned.length === 4) {
+    return `#${cleaned[0]}${cleaned[0]}${cleaned[1]}${cleaned[1]}${cleaned[2]}${cleaned[2]}`;
+  }
+  if (cleaned.length === 8) {
+    return `#${cleaned.substring(0, 6)}`;
+  }
+  if (cleaned.length === 6) {
+    return `#${cleaned}`;
+  }
+  if (cleaned.length < 6) {
+    return `#${cleaned.padEnd(6, "0")}`;
+  }
+  return `#${cleaned.substring(0, 6)}`;
+}
+function rgbToHex(rgb) {
+  const match = rgb.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*[\d.]+)?\)/i);
+  if (!match)
+    return "#000000";
+  const r = Number.parseInt(match[1], 10);
+  const g = Number.parseInt(match[2], 10);
+  const b = Number.parseInt(match[3], 10);
+  return `#${componentToHex(r)}${componentToHex(g)}${componentToHex(b)}`;
+}
+function hslToHex(hsl) {
+  const match = hsl.match(/hsla?\((\d+),\s*([\d.]+)%,\s*([\d.]+)%(?:,\s*[\d.]+)?\)/);
+  if (!match)
+    return "#000000";
+  const h = Number.parseInt(match[1], 10) / 360;
+  const s = Number.parseFloat(match[2]) / 100;
+  const l = Number.parseFloat(match[3]) / 100;
+  let r, g, b;
+  if (s === 0) {
+    r = g = b = l;
+  } else {
+    const hue2rgb = (p2, q2, t) => {
+      if (t < 0)
+        t += 1;
+      if (t > 1)
+        t -= 1;
+      if (t < 1 / 6)
+        return p2 + (q2 - p2) * 6 * t;
+      if (t < 1 / 2)
+        return q2;
+      if (t < 2 / 3)
+        return p2 + (q2 - p2) * (2 / 3 - t) * 6;
+      return p2;
+    };
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+    r = hue2rgb(p, q, h + 1 / 3);
+    g = hue2rgb(p, q, h);
+    b = hue2rgb(p, q, h - 1 / 3);
+  }
+  return `#${componentToHex(Math.round(r * 255))}${componentToHex(Math.round(g * 255))}${componentToHex(Math.round(b * 255))}`;
+}
+function cmykToHex(cmyk) {
+  const match = cmyk.match(/cmyk\(([\d.]+)%?,\s*([\d.]+)%?,\s*([\d.]+)%?,\s*([\d.]+)%?\)/);
+  if (!match)
+    return "#000000";
+  const c = Number.parseFloat(match[1]) / 100;
+  const m = Number.parseFloat(match[2]) / 100;
+  const y = Number.parseFloat(match[3]) / 100;
+  const k = Number.parseFloat(match[4]) / 100;
+  const r = Math.round(255 * (1 - c) * (1 - k));
+  const g = Math.round(255 * (1 - m) * (1 - k));
+  const b = Math.round(255 * (1 - y) * (1 - k));
+  return `#${componentToHex(r)}${componentToHex(g)}${componentToHex(b)}`;
+}
+function labToHex(lab) {
+  const match = lab.match(/lab\(([\d.]+)%?,\s*([-\d.]+),\s*([-\d.]+)\)/);
+  if (!match)
+    return "#000000";
+  const l = Number.parseFloat(match[1]);
+  const a = Number.parseFloat(match[2]);
+  const b = Number.parseFloat(match[3]);
+  let y = (l + 16) / 116;
+  let x = a / 500 + y;
+  let z = y - b / 200;
+  const labToXyzHelper = (t) => {
+    return t > 0.206897 ? t ** 3 : (t - 16 / 116) / 7.787;
+  };
+  x = 95.047 * labToXyzHelper(x);
+  y = 100 * labToXyzHelper(y);
+  z = 108.883 * labToXyzHelper(z);
+  x = x / 100;
+  y = y / 100;
+  z = z / 100;
+  let r = x * 3.2406 + y * -1.5372 + z * -0.4986;
+  let g = x * -0.9689 + y * 1.8758 + z * 0.0415;
+  let bl = x * 0.0557 + y * -0.204 + z * 1.057;
+  const xyzToRgbHelper = (t) => {
+    return t > 31308e-7 ? 1.055 * t ** (1 / 2.4) - 0.055 : 12.92 * t;
+  };
+  r = xyzToRgbHelper(r);
+  g = xyzToRgbHelper(g);
+  bl = xyzToRgbHelper(bl);
+  return `#${componentToHex(Math.max(0, Math.min(255, Math.round(r * 255))))}${componentToHex(Math.max(0, Math.min(255, Math.round(g * 255))))}${componentToHex(Math.max(0, Math.min(255, Math.round(bl * 255))))}`;
+}
+function componentToHex(c) {
+  const hex = Math.max(0, Math.min(255, c)).toString(16);
+  return hex.length === 1 ? `0${hex}` : hex;
+}

package/dist/runtime/utils/durationConverter.d.ts

@@ -0,0 +1,2 @@
+export declare function durationToMinutes(duration: string): number;
+export declare function formattedDuration(duration: string): string;

package/dist/runtime/utils/durationConverter.js

@@ -0,0 +1,32 @@
+export function durationToMinutes(duration) {
+  let hours = 0;
+  let minutes = 0;
+  const lowerDuration = duration.toLowerCase();
+  if (lowerDuration.includes(":")) {
+    const [h, m] = lowerDuration.split(":").map((part) => +(part?.trim() || "0"));
+    hours = h ?? 0;
+    minutes = m ?? 0;
+  } else {
+    if (lowerDuration.includes("h")) {
+      hours = +(lowerDuration.split("h")[0]?.trim() || "0");
+      const remainder = lowerDuration.split("h")[1] || "";
+      if (remainder.includes("m"))
+        minutes = +(remainder.split("m")[0]?.trim() || "0");
+      else if (/^\d+$/.test(remainder))
+        minutes = +remainder;
+    } else if (lowerDuration.includes("m")) {
+      minutes = +(lowerDuration.split("m")[0]?.trim() || "0");
+    } else if (/^\d+$/.test(lowerDuration)) {
+      minutes = +lowerDuration;
+    }
+  }
+  return hours * 60 + minutes;
+}
+export function formattedDuration(duration) {
+  const minutes = durationToMinutes(duration);
+  const hours = Math.trunc(minutes / 60);
+  const remainingMinutes = minutes % 60;
+  if (minutes === 0)
+    return "0";
+  return `${hours > 0 ? `${hours}h` : ""}${hours > 0 && remainingMinutes > 0 ? " " : ""}${remainingMinutes > 0 ? `${remainingMinutes}m` : ""}`;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sfxcode/formkit-nuxt-ui",
-  "version": "0.7.2",
+  "version": "0.7.4",
   "description": "FormKit integration for Nuxt UI - Seamlessly connect FormKit form handling with Nuxt UI components",
   "author": {
     "name": "Tom",
@@ -46,7 +46,8 @@
   "typesVersions": {
     "*": {
       ".": [
-        "./dist/types.d.mts"
+        "./dist/types.d.mts",
+        "./dist/runtime/index.d.ts"
       ]
     }
   },