@sfxcode/formkit-openvue 0.0.0-stage → 0.8.1

package/dist/composables/useInputEditorSchema.mjs

@@ -0,0 +1,315 @@
+import { useFormKitRepeater } from "./useFormKitRepeater.mjs";
+import { useFormKitSchema } from "./useFormKitSchema.mjs";
+import { useInputEditor } from "./useInputEditor.mjs";
+export function useInputEditorSchema() {
+  const { addList, addListGroup } = useFormKitSchema();
+  const { addInsertButton, addGroupButtons } = useFormKitRepeater();
+  const { formInputNames, formOutputNames } = useInputEditor();
+  function formInputOptions(list) {
+    return list.map((name) => {
+      return { label: name, value: `form${name}` };
+    });
+  }
+  const selectOptions = [
+    { label: "Base", value: "showBasic" },
+    { label: "Display", value: "showDisplay" },
+    { label: "Style", value: "showStyle" },
+    { label: "Validation", value: "showValidation" },
+    { label: "Options", value: "showOptions" },
+    { label: "OpenVue", value: "showOpenVue" }
+  ];
+  const validationOptions = [
+    { label: "Blur", value: "blur" },
+    { label: "Live", value: "live" },
+    { label: "Dirty", value: "dirty" },
+    { label: "Submit", value: "submit" }
+  ];
+  function editorSchema(inputOptions = formInputOptions([...formInputNames, ...formOutputNames])) {
+    return [
+      {
+        $formkit: "formSelect",
+        id: "inputSelection",
+        name: "_dollar_formkit",
+        label: "OpenVue Input",
+        value: "formInputText",
+        optionLabel: "label",
+        optionValue: "value",
+        options: inputOptions,
+        filter: true,
+        key: "schema_inputSelection",
+        outerClass: "col-6",
+        preserve: true
+      },
+      {
+        $formkit: "formInputText",
+        name: "name",
+        label: "Field Name",
+        validation: "required",
+        validationVisibility: "live",
+        key: "schema_name",
+        outerClass: "col-6",
+        preserve: true
+      },
+      {
+        $formkit: "formSelectButton",
+        id: "selectButton",
+        name: "selectButton",
+        options: selectOptions,
+        optionLabel: "label",
+        optionValue: "value",
+        value: "showBasic",
+        allowEmpty: false,
+        key: "schema_selectButton",
+        preserve: true
+      },
+      {
+        $formkit: "formInputText",
+        if: "$get(selectButton).value === 'showBasic'",
+        name: "label",
+        label: "Input Label",
+        key: "schema_label",
+        preserve: true
+      },
+      {
+        $formkit: "formInputText",
+        if: "$get(selectButton).value === 'showBasic'",
+        name: "help",
+        label: "Input Help",
+        key: "schema_help",
+        preserve: true
+      },
+      {
+        $formkit: "formInputText",
+        if: "$get(selectButton).value === 'showBasic'",
+        name: "value",
+        label: "Input Value",
+        key: "schema_value",
+        outerClass: "col-6",
+        preserve: true
+      },
+      {
+        $formkit: "formInputText",
+        if: "$get(selectButton).value === 'showBasic'",
+        name: "format",
+        label: "Value Format",
+        key: "schema_format",
+        outerClass: "col-6",
+        preserve: true
+      },
+      {
+        $formkit: "formInputText",
+        if: "$get(selectButton).value === 'showBasic'",
+        name: "id",
+        label: "Input ID",
+        key: "schema_id",
+        outerClass: "col-6",
+        preserve: true
+      },
+      {
+        $formkit: "formInputText",
+        if: "$get(selectButton).value === 'showBasic'",
+        name: "key",
+        label: "Input Key",
+        key: "schema_key",
+        outerClass: "col-6",
+        preserve: true
+      },
+      {
+        $formkit: "formInputText",
+        if: "$get(selectButton).value === 'showBasic'",
+        name: "tabindex",
+        label: "Tab Index",
+        key: "schema_tabindex",
+        outerClass: "col-6",
+        preserve: true
+      },
+      {
+        $formkit: "formCheckbox",
+        if: "$get(selectButton).value === 'showBasic'",
+        name: "preserve",
+        label: "Preserve",
+        key: "schema_preserve",
+        value: false,
+        suffix: "Input Preserve",
+        outerClass: "col-3",
+        preserve: true
+      },
+      {
+        $formkit: "formInputText",
+        if: "$get(selectButton).value === 'showDisplay'",
+        name: "class",
+        label: "Input StyleClass",
+        key: "schema_class",
+        outerClass: "col-6",
+        preserve: true
+      },
+      {
+        $formkit: "formInputText",
+        if: "$get(selectButton).value === 'showDisplay'",
+        name: "style",
+        label: "Input Style",
+        key: "schema_style",
+        outerClass: "col-6",
+        preserve: true
+      },
+      {
+        $formkit: "formInputText",
+        if: "$get(selectButton).value === 'showDisplay'",
+        name: "if",
+        label: "Should Render (if-Expression)",
+        key: "schema_if",
+        preserve: true
+      },
+      {
+        $formkit: "formInputText",
+        if: "$get(selectButton).value === 'showDisplay'",
+        name: "iconPrefix",
+        label: "Prefix Icon",
+        key: "schema_prefix_icon",
+        outerClass: "col-6",
+        preserve: true
+      },
+      {
+        $formkit: "formInputText",
+        if: "$get(selectButton).value === 'showDisplay'",
+        name: "prefix",
+        label: "Prefix",
+        key: "schema_prefix",
+        outerClass: "col-6",
+        preserve: true
+      },
+      {
+        $formkit: "formInputText",
+        if: "$get(selectButton).value === 'showDisplay'",
+        name: "suffix",
+        label: "Suffix",
+        key: "schema_suffix",
+        outerClass: "col-6",
+        preserve: true
+      },
+      {
+        $formkit: "formInputText",
+        if: "$get(selectButton).value === 'showDisplay'",
+        name: "iconSuffix",
+        label: "Suffix Icon",
+        key: "schema_suffix_icon",
+        outerClass: "col-6",
+        preserve: true
+      },
+      {
+        $formkit: "formCheckbox",
+        if: "$get(selectButton).value === 'showDisplay'",
+        name: "disabled",
+        label: "Input Disabled",
+        key: "schema_disabled",
+        value: false,
+        outerClass: "col-3",
+        preserve: true
+      },
+      {
+        $formkit: "formCheckbox",
+        if: "$get(selectButton).value === 'showDisplay'",
+        name: "readonly",
+        label: "Input Read Only",
+        key: "schema_readonly",
+        value: false,
+        outerClass: "col-3",
+        preserve: true
+      },
+      {
+        $formkit: "formInputText",
+        if: "$get(selectButton).value === 'showStyle'",
+        name: "outerClass",
+        label: "Outer Class",
+        key: "schema_outerClass",
+        preserve: true
+      },
+      {
+        $formkit: "formInputText",
+        if: "$get(selectButton).value === 'showStyle'",
+        name: "wrapperClass",
+        label: "Wrapper Class",
+        key: "schema_wrapperClass",
+        preserve: true
+      },
+      {
+        $formkit: "formInputText",
+        if: "$get(selectButton).value === 'showStyle'",
+        name: "innerClass",
+        label: "Inner Class",
+        key: "schema_innerClass",
+        preserve: true
+      },
+      {
+        $formkit: "formInputText",
+        if: "$get(selectButton).value === 'showValidation'",
+        name: "validation",
+        label: "Field Validation",
+        key: "schema_validation",
+        outerClass: "col-6",
+        preserve: true
+      },
+      {
+        $formkit: "formSelect",
+        if: "$get(selectButton).value === 'showValidation'",
+        name: "validation-visibility",
+        label: "Field Validation Visibility",
+        optionLabel: "label",
+        optionValue: "value",
+        options: validationOptions,
+        key: "schema_validation-visibility",
+        outerClass: "col-6",
+        preserve: true
+      },
+      {
+        $formkit: "formInputText",
+        if: "$get(selectButton).value === 'showValidation'",
+        name: "validation-label",
+        label: "Field Validation Label",
+        key: "schema_validation-label",
+        preserve: true
+      },
+      addList("options", [
+        addInsertButton("Add Option"),
+        addListGroup(
+          [
+            {
+              $formkit: "formInputText",
+              label: "Label",
+              name: "label",
+              outerClass: "col-4"
+            },
+            {
+              $formkit: "formInputText",
+              label: "Value",
+              name: "value",
+              outerClass: "col-4"
+            },
+            addGroupButtons()
+          ]
+        )
+      ], true, "$get(selectButton).value === 'showOptions'", { key: "schema_options", preserve: true }),
+      addList("form", [
+        addInsertButton("Add OpenVue Attribute"),
+        addListGroup(
+          [
+            {
+              $formkit: "formInputText",
+              label: "OpenVue Key",
+              name: "form_key",
+              outerClass: "col-3"
+            },
+            {
+              $formkit: "formInputText",
+              label: "Value",
+              name: "form_value",
+              outerClass: "col-3"
+            },
+            addGroupButtons()
+          ]
+        )
+      ], true, "$get(selectButton).value === 'showOpenVue'", { key: "schema_openvue", preserve: true })
+    ];
+  }
+  return { editorSchema, formInputOptions };
+}

package/dist/composables/useOutputDuration.d.ts

@@ -0,0 +1,4 @@
+export declare function useOutputDuration(): {
+    durationToMinutes: (duration: string) => number;
+    formattedDuration: (duration: string) => string;
+};

package/dist/composables/useOutputDuration.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useOutputDuration = useOutputDuration;
+function useOutputDuration() {
+  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;
+  }
+  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` : ""}`;
+  }
+  return {
+    durationToMinutes,
+    formattedDuration
+  };
+}

package/dist/composables/useOutputDuration.mjs

@@ -0,0 +1,35 @@
+export function useOutputDuration() {
+  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;
+  }
+  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` : ""}`;
+  }
+  return { durationToMinutes, formattedDuration };
+}

package/dist/definitions/index.d.ts

@@ -0,0 +1,35 @@
+export declare const formInputs: {
+    formAutoComplete: import("@formkit/core").FormKitTypeDefinition;
+    formInputText: import("@formkit/core").FormKitTypeDefinition;
+    formInputNumber: import("@formkit/core").FormKitTypeDefinition;
+    formInputMask: import("@formkit/core").FormKitTypeDefinition;
+    formPassword: import("@formkit/core").FormKitTypeDefinition;
+    formCheckbox: import("@formkit/core").FormKitTypeDefinition;
+    formToggleSwitch: import("@formkit/core").FormKitTypeDefinition;
+    formTextarea: import("@formkit/core").FormKitTypeDefinition;
+    formSelect: import("@formkit/core").FormKitTypeDefinition;
+    formMultiSelect: import("@formkit/core").FormKitTypeDefinition;
+    formDatePicker: import("@formkit/core").FormKitTypeDefinition;
+    formSlider: import("@formkit/core").FormKitTypeDefinition;
+    formKnob: import("@formkit/core").FormKitTypeDefinition;
+    formRating: import("@formkit/core").FormKitTypeDefinition;
+    formRadioButton: import("@formkit/core").FormKitTypeDefinition;
+    formColorPicker: import("@formkit/core").FormKitTypeDefinition;
+    formToggleButton: import("@formkit/core").FormKitTypeDefinition;
+    formListbox: import("@formkit/core").FormKitTypeDefinition;
+    formSelectButton: import("@formkit/core").FormKitTypeDefinition;
+    formCascadeSelect: import("@formkit/core").FormKitTypeDefinition;
+    formTreeSelect: import("@formkit/core").FormKitTypeDefinition;
+    formInputOtp: import("@formkit/core").FormKitTypeDefinition;
+    formRepeater: import("@formkit/core").FormKitTypeDefinition;
+};
+export declare const formOutputs: {
+    formOutputText: import("@formkit/core").FormKitTypeDefinition;
+    formOutputLink: import("@formkit/core").FormKitTypeDefinition;
+    formOutputReference: import("@formkit/core").FormKitTypeDefinition;
+    formOutputNumber: import("@formkit/core").FormKitTypeDefinition;
+    formOutputDate: import("@formkit/core").FormKitTypeDefinition;
+    formOutputBoolean: import("@formkit/core").FormKitTypeDefinition;
+    formOutputDuration: import("@formkit/core").FormKitTypeDefinition;
+    formOutputList: import("@formkit/core").FormKitTypeDefinition;
+};

package/dist/definitions/index.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.formOutputs = exports.formInputs = void 0;
+var _input = require("./input");
+var _output = require("./output");
+var _repeater = require("./repeater");
+const formInputs = exports.formInputs = {
+  formAutoComplete: _input.formAutoCompleteDefinition,
+  formInputText: _input.formInputTextDefinition,
+  formInputNumber: _input.formInputNumberDefinition,
+  formInputMask: _input.formInputMaskDefinition,
+  formPassword: _input.formPasswordDefinition,
+  formCheckbox: _input.formCheckboxDefinition,
+  formToggleSwitch: _input.formToggleSwitchDefinition,
+  formTextarea: _input.formTextareaDefinition,
+  formSelect: _input.formSelectDefinition,
+  formMultiSelect: _input.formMultiSelectDefinition,
+  formDatePicker: _input.formDatePickerDefinition,
+  formSlider: _input.formSliderDefinition,
+  formKnob: _input.formKnobDefinition,
+  formRating: _input.formRatingDefinition,
+  formRadioButton: _input.formRadioButtonDefinition,
+  formColorPicker: _input.formColorPickerDefinition,
+  formToggleButton: _input.formToggleButtonDefinition,
+  formListbox: _input.formListboxDefinition,
+  formSelectButton: _input.formSelectButtonDefinition,
+  formCascadeSelect: _input.formCascadeSelectDefinition,
+  formTreeSelect: _input.formTreeSelectDefinition,
+  formInputOtp: _input.formInputOtpDefinition,
+  formRepeater: _repeater.formRepeaterDefinition
+};
+const formOutputs = exports.formOutputs = {
+  formOutputText: _output.formOutputTextDefinition,
+  formOutputLink: _output.formOutputLinkDefinition,
+  formOutputReference: _output.formOutputReferenceDefinition,
+  formOutputNumber: _output.formOutputNumberDefinition,
+  formOutputDate: _output.formOutputDateDefinition,
+  formOutputBoolean: _output.formOutputBooleanDefinition,
+  formOutputDuration: _output.formOutputDurationDefinition,
+  formOutputList: _output.formOutputListDefinition
+};

package/dist/definitions/index.mjs

@@ -0,0 +1,70 @@
+import {
+  formAutoCompleteDefinition,
+  formCascadeSelectDefinition,
+  formCheckboxDefinition,
+  formColorPickerDefinition,
+  formDatePickerDefinition,
+  formInputMaskDefinition,
+  formInputNumberDefinition,
+  formInputOtpDefinition,
+  formInputTextDefinition,
+  formKnobDefinition,
+  formListboxDefinition,
+  formMultiSelectDefinition,
+  formPasswordDefinition,
+  formRadioButtonDefinition,
+  formRatingDefinition,
+  formSelectButtonDefinition,
+  formSelectDefinition,
+  formSliderDefinition,
+  formTextareaDefinition,
+  formToggleButtonDefinition,
+  formToggleSwitchDefinition,
+  formTreeSelectDefinition
+} from "./input.mjs";
+import {
+  formOutputBooleanDefinition,
+  formOutputDateDefinition,
+  formOutputDurationDefinition,
+  formOutputLinkDefinition,
+  formOutputListDefinition,
+  formOutputNumberDefinition,
+  formOutputReferenceDefinition,
+  formOutputTextDefinition
+} from "./output.mjs";
+import { formRepeaterDefinition } from "./repeater.mjs";
+export const formInputs = {
+  formAutoComplete: formAutoCompleteDefinition,
+  formInputText: formInputTextDefinition,
+  formInputNumber: formInputNumberDefinition,
+  formInputMask: formInputMaskDefinition,
+  formPassword: formPasswordDefinition,
+  formCheckbox: formCheckboxDefinition,
+  formToggleSwitch: formToggleSwitchDefinition,
+  formTextarea: formTextareaDefinition,
+  formSelect: formSelectDefinition,
+  formMultiSelect: formMultiSelectDefinition,
+  formDatePicker: formDatePickerDefinition,
+  formSlider: formSliderDefinition,
+  formKnob: formKnobDefinition,
+  formRating: formRatingDefinition,
+  formRadioButton: formRadioButtonDefinition,
+  formColorPicker: formColorPickerDefinition,
+  formToggleButton: formToggleButtonDefinition,
+  formListbox: formListboxDefinition,
+  formSelectButton: formSelectButtonDefinition,
+  formCascadeSelect: formCascadeSelectDefinition,
+  formTreeSelect: formTreeSelectDefinition,
+  formInputOtp: formInputOtpDefinition,
+  formRepeater: formRepeaterDefinition
+};
+export const formOutputs = {
+  formOutputText: formOutputTextDefinition,
+  formOutputLink: formOutputLinkDefinition,
+  formOutputReference: formOutputReferenceDefinition,
+  formOutputNumber: formOutputNumberDefinition,
+  formOutputDate: formOutputDateDefinition,
+  formOutputBoolean: formOutputBooleanDefinition,
+  formOutputDuration: formOutputDurationDefinition,
+  formOutputList: formOutputListDefinition
+};

package/dist/definitions/input.d.ts

@@ -0,0 +1,23 @@
+import type { FormKitTypeDefinition } from '@formkit/core';
+export declare const formAutoCompleteDefinition: FormKitTypeDefinition;
+export declare const formInputTextDefinition: FormKitTypeDefinition;
+export declare const formInputNumberDefinition: FormKitTypeDefinition;
+export declare const formInputMaskDefinition: FormKitTypeDefinition;
+export declare const formPasswordDefinition: FormKitTypeDefinition;
+export declare const formTextareaDefinition: FormKitTypeDefinition;
+export declare const formCheckboxDefinition: FormKitTypeDefinition;
+export declare const formToggleSwitchDefinition: FormKitTypeDefinition;
+export declare const formInputOtpDefinition: FormKitTypeDefinition;
+export declare const formSelectDefinition: FormKitTypeDefinition;
+export declare const formMultiSelectDefinition: FormKitTypeDefinition;
+export declare const formListboxDefinition: FormKitTypeDefinition;
+export declare const formDatePickerDefinition: FormKitTypeDefinition;
+export declare const formSliderDefinition: FormKitTypeDefinition;
+export declare const formRatingDefinition: FormKitTypeDefinition;
+export declare const formRadioButtonDefinition: FormKitTypeDefinition;
+export declare const formKnobDefinition: FormKitTypeDefinition;
+export declare const formColorPickerDefinition: FormKitTypeDefinition;
+export declare const formToggleButtonDefinition: FormKitTypeDefinition;
+export declare const formSelectButtonDefinition: FormKitTypeDefinition;
+export declare const formCascadeSelectDefinition: FormKitTypeDefinition;
+export declare const formTreeSelectDefinition: FormKitTypeDefinition;