@vuestic/formkit/dist/index.js

Custom FormKit inputs done with Vuestic UI.

// src/index.ts
import { group, hidden, list, meta } from "@formkit/inputs";

// src/inputs/button.ts
import {
  outer,
  wrapper,
  prefix,
  suffix,
  createSection as createSection2,
  buttonLabel,
  localize,
  ignores
} from "@formkit/inputs";
import { token } from "@formkit/utils";
import { VaButton, VaMessageList, VaIcon } from "vuestic-ui";

// src/features/vuesticInputs.ts
import { computed } from "vue";
function vuesticInputs(node) {
  node.addProps(["loading"]);
  node.on("created", () => {
    const errorMessages = computed(
      () => node.context.fns.arrayMessages(node.context.messages)
    );
    const error = computed(
      () => node.context.defaultMessagePlacement && Boolean(node.context.fns.length(node.context.messages))
    );
    node.context.fns.arrayMessages = (obj) => Object.values(obj).filter((m) => m.visible).map((m) => m.value);
    node.context.errorMessages = errorMessages;
    node.context.error = error;
  });
}

// src/sections/index.ts
import { createSection } from "@formkit/inputs";
var icon = (sectionKey, el) => {
  return createSection(`${sectionKey}Icon`, () => {
    return {
      if: `$${sectionKey}Icon`,
      $cmp: "VaIcon",
      props: {
        tag: el,
        for: {
          if: `${el === "label"}`,
          then: "$id"
        },
        class: "material-icons",
        onClick: `$handlers.iconClick(${sectionKey})`,
        role: `$fns.iconRole(${sectionKey})`,
        tabindex: `$fns.iconRole(${sectionKey}) === "button" && "0" || undefined`
      },
      children: "$prefixIcon"
    };
  })();
};
var help = createSection("help", () => ({
  $cmp: "VaMessageList",
  if: "$help",
  props: {
    id: '$: "help-" + $id',
    modelValue: "$help"
  }
}));
var messages = createSection("messages", () => ({
  $cmp: "VaMessageList",
  if: "$defaultMessagePlacement && $fns.length($messages)",
  props: {
    id: '$: "errors-" + $id',
    modelValue: "$fns.arrayMessages($messages)",
    color: "danger"
  }
}));

// src/inputs/button.ts
var buttonInput = createSection2("input", () => ({
  $cmp: "VaButton",
  bind: "$attrs",
  props: {
    type: "$type",
    disabled: "$disabled",
    name: "$node.name",
    id: "$id",
    loading: "$loading"
  }
}));
var button = {
  /**
   * The actual schema of the input, or a function that returns the schema.
   */
  schema: outer(
    messages(),
    wrapper(
      buttonInput(
        icon("prefix"),
        prefix(),
        buttonLabel("$label || $ui.submit.value"),
        suffix(),
        icon("suffix")
      )
    ),
    help()
  ),
  /**
   * The type of node, can be a list, group, or input.
   */
  type: "input",
  /**
   * The family of inputs this one belongs too. For example "text" and "email"
   * are both part of the "text" family. This is primary used for styling.
   */
  family: "button",
  /**
   * An array of extra props to accept for this input.
   */
  props: [],
  /**
   * Forces node.props.type to be this explicit value.
   */
  forceTypeProp: "button",
  library: {
    VaButton,
    VaMessageList,
    VaIcon
  },
  /**
   * Additional features that should be added to your input
   */
  features: [localize("submit"), ignores, vuesticInputs],
  /**
   * A key to use for memoizing the schema. This is used to prevent the schema
   * from needing to be stringified when performing a memo lookup.
   */
  schemaMemoKey: token()
};

// src/inputs/checkbox.ts
import { createSection as createSection3 } from "@formkit/inputs";
import { token as token2 } from "@formkit/utils";
import { VaCheckbox } from "vuestic-ui";

// src/createInputWrapper.ts
import { defineComponent, h } from "vue";
import { VaIcon as VaIcon2 } from "vuestic-ui";
var createInputWrapper = (component) => {
  return defineComponent({
    name: `${component.name ?? "Va"}FormKitWrapper`,
    props: {
      context: {
        type: Object,
        required: true
      },
      prefixIcon: String,
      suffixIcon: String
    },
    setup(props, { slots, attrs }) {
      return () => {
        return h(component, {
          ...attrs,
          modelValue: props.context._value,
          "onUpdate:modelValue": props.context.node.input,
          onBlur: props.context.handlers.blur,
          error: props.context.error,
          messages: props.context.help,
          errorMessages: props.context.errorMessages,
          disabled: props.context.disabled,
          label: props.context.label,
          loading: props.context.loading,
          dirty: props.context.state.validationVisible
        }, {
          ...props.prefixIcon && { prependInner: () => h(VaIcon2, { class: "material-icons" }, props.prefixIcon) },
          ...props.suffixIcon && { appendInner: () => h(VaIcon2, { class: "material-icons" }, props.suffixIcon) },
          ...slots
        });
      };
    }
  });
};

// src/inputs/checkbox.ts
var FormKitInputWrapper = createInputWrapper(VaCheckbox);
var boxInput = createSection3("input", () => ({
  $cmp: "FormKitInputWrapper",
  bind: "$attrs",
  props: {
    context: "$node.context",
    prefixIcon: "$prefixIcon",
    suffixIcon: "$suffixIcon"
  }
}));
var checkbox = {
  /**
   * The actual schema of the input, or a function that returns the schema.
   */
  schema: boxInput(),
  /**
   * The type of node, can be a list, group, or input.
   */
  type: "input",
  /**
   * The family of inputs this one belongs too. For example "text" and "email"
   * are both part of the "text" family. This is primary used for styling.
   */
  family: "text",
  /**
   * An array of extra props to accept for this input.
   */
  props: [],
  /**
   * A library of components to provide to the internal input schema
   */
  library: {
    FormKitInputWrapper
  },
  /**
   * Forces node.props.type to be this explicit value.
   */
  forceTypeProp: "checkbox",
  /**
   * Additional features that should be added to your input
   */
  features: [vuesticInputs],
  /**
   * The key used to memoize the schema.
   */
  schemaMemoKey: token2()
};

// src/inputs/colorpicker.ts
import { createSection as createSection4 } from "@formkit/inputs";
import { token as token3 } from "@formkit/utils";
import { VaColorInput } from "vuestic-ui";
var FormKitInputWrapper2 = createInputWrapper(VaColorInput);
var colorInput = createSection4("input", () => ({
  $cmp: "FormKitInputWrapper",
  bind: "$attrs",
  props: {
    context: "$node.context",
    prefixIcon: "$prefixIcon",
    suffixIcon: "$suffixIcon"
  }
}));
var colorpicker = {
  /**
   * The actual schema of the input, or a function that returns the schema.
   */
  schema: colorInput(),
  /**
   * The type of node, can be a list, group, or input.
   */
  type: "input",
  /**
   * The family of inputs this one belongs too. For example "text" and "email"
   * are both part of the "text" family. This is primary used for styling.
   */
  family: "text",
  /**
   * An array of extra props to accept for this input.
   */
  props: [],
  /**
   * A library of components to provide to the internal input schema
   */
  library: {
    FormKitInputWrapper: FormKitInputWrapper2
  },
  /**
   * Forces node.props.type to be this explicit value.
   */
  forceTypeProp: "text",
  /**
   * Additional features that should be added to your input
   */
  features: [vuesticInputs],
  /**
   * The key used to memoize the schema.
   */
  schemaMemoKey: token3()
};

// src/inputs/counter.ts
import { createSection as createSection5 } from "@formkit/inputs";
import { token as token4 } from "@formkit/utils";
import { VaCounter } from "vuestic-ui";
var FormKitInputWrapper3 = createInputWrapper(VaCounter);
var counterInput = createSection5("input", () => ({
  $cmp: "FormKitInputWrapper",
  bind: "$attrs",
  props: {
    context: "$node.context",
    prefixIcon: "$prefixIcon",
    suffixIcon: "$suffixIcon"
  }
}));
var counter = {
  /**
   * The actual schema of the input, or a function that returns the schema.
   */
  schema: counterInput(),
  /**
   * The type of node, can be a list, group, or input.
   */
  type: "input",
  /**
   * The family of inputs this one belongs too. For example "text" and "email"
   * are both part of the "text" family. This is primary used for styling.
   */
  family: "text",
  /**
   * An array of extra props to accept for this input.
   */
  props: [],
  /**
   * A library of components to provide to the internal input schema
   */
  library: {
    FormKitInputWrapper: FormKitInputWrapper3
  },
  /**
   * Forces node.props.type to be this explicit value.
   */
  forceTypeProp: "text",
  /**
   * Additional features that should be added to your input
   */
  features: [vuesticInputs],
  /**
   * The key used to memoize the schema.
   */
  schemaMemoKey: token4()
};

// src/inputs/datepicker.ts
import { createSection as createSection6 } from "@formkit/inputs";
import { token as token5 } from "@formkit/utils";
import { VaDateInput } from "vuestic-ui";
var dateInput = createSection6("input", () => ({
  $cmp: "VaDateInput",
  bind: "$attrs",
  props: {
    modelValue: "$node.context._value",
    "onUpdate:modelValue": "$node.context.node.input",
    onBlur: "$node.context.handlers.blur",
    error: "$node.context.error",
    messages: "$node.context.help",
    errorMessages: "$node.context.errorMessages",
    disabled: "$node.context.disabled",
    label: "$node.context.label",
    loading: "$node.context.loading",
    dirty: "$node.context.state.validationVisible"
  }
}));
var datepicker = {
  /**
   * The actual schema of the input, or a function that returns the schema.
   */
  schema: dateInput(),
  /**
   * The type of node, can be a list, group, or input.
   */
  type: "input",
  /**
   * The family of inputs this one belongs too. For example "text" and "email"
   * are both part of the "text" family. This is primary used for styling.
   */
  family: "text",
  /**
   * An array of extra props to accept for this input.
   */
  props: [],
  /**
   * A library of components to provide to the internal input schema
   */
  library: {
    VaDateInput
  },
  /**
   * Additional features that should be added to your input
   */
  features: [vuesticInputs],
  /**
   * The key used to memoize the schema.
   */
  schemaMemoKey: token5()
};

// src/inputs/email.ts
import { token as token7 } from "@formkit/utils";

// src/inputs/text.ts
import { createSection as createSection7 } from "@formkit/inputs";
import { token as token6 } from "@formkit/utils";
import { VaInput } from "vuestic-ui";
var FormKitInputWrapper4 = createInputWrapper(VaInput);
var textInput = createSection7("input", () => ({
  $cmp: "FormKitInputWrapper",
  bind: "$attrs",
  props: {
    context: "$node.context",
    prefixIcon: "$prefixIcon",
    suffixIcon: "$suffixIcon"
  }
}));
var text = {
  /**
   * The actual schema of the input, or a function that returns the schema.
   */
  schema: textInput(),
  /**
   * The type of node, can be a list, group, or input.
   */
  type: "input",
  /**
   * The family of inputs this one belongs too. For example "text" and "email"
   * are both part of the "text" family. This is primary used for styling.
   */
  family: "text",
  /**
   * An array of extra props to accept for this input.
   */
  props: [],
  /**
   * A library of components to provide to the internal input schema
   */
  library: {
    FormKitInputWrapper: FormKitInputWrapper4
  },
  /**
   * Forces node.props.type to be this explicit value.
   */
  forceTypeProp: "text",
  /**
   * Additional features that should be added to your input
   */
  features: [vuesticInputs],
  /**
   * The key used to memoize the schema.
   */
  schemaMemoKey: token6()
};

// src/inputs/email.ts
var email = {
  ...text,
  forceTypeProp: "email",
  schemaMemoKey: token7()
};

// src/inputs/file.ts
import { createSection as createSection8, outer as outer2 } from "@formkit/inputs";
import { token as token8 } from "@formkit/utils";
import { VaFileUpload } from "vuestic-ui";
var FormKitInputWrapper5 = createInputWrapper(VaFileUpload);
var fileInput = createSection8("input", () => ({
  $cmp: "FormKitInputWrapper",
  bind: "$attrs",
  props: {
    context: "$node.context",
    prefixIcon: "$prefixIcon",
    suffixIcon: "$suffixIcon"
  }
}));
var file = {
  /**
   * The actual schema of the input, or a function that returns the schema.
   */
  schema: outer2(
    messages(),
    fileInput(),
    help()
  ),
  /**
   * The type of node, can be a list, group, or input.
   */
  type: "input",
  /**
   * The family of inputs this one belongs too. For example "text" and "email"
   * are both part of the "text" family. This is primary used for styling.
   */
  family: "text",
  /**
   * An array of extra props to accept for this input.
   */
  props: [],
  /**
   * A library of components to provide to the internal input schema
   */
  library: {
    FormKitInputWrapper: FormKitInputWrapper5
  },
  /**
   * Additional features that should be added to your input
   */
  features: [vuesticInputs],
  /**
   * The key used to memoize the schema.
   */
  schemaMemoKey: token8()
};

// src/inputs/form.ts
import { token as token10 } from "@formkit/utils";
import { VaForm, VaMessageList as VaMessageList2 } from "vuestic-ui";
import {
  actions,
  createSection as createSection9,
  forms,
  disablesChildren
} from "@formkit/inputs";

// src/inputs/submit.ts
import { token as token9 } from "@formkit/utils";
var submit = {
  ...button,
  forceTypeProp: "submit",
  schemaMemoKey: token9()
};

// src/inputs/form.ts
var formInput = createSection9("form", () => ({
  $cmp: "VaForm",
  bind: "$attrs",
  props: {
    id: "$id",
    name: "$node.name",
    onSubmit: "$handlers.submit",
    "data-loading": "$state.loading || undefined"
  }
}));
var submitInput = createSection9("submit", () => ({
  $cmp: "FormKit",
  bind: "$submitAttrs",
  props: {
    type: submit
  },
  children: "$submitLabel || Submit"
}));
var form = {
  /**
   * The actual schema of the input, or a function that returns the schema.
   */
  schema: formInput(
    "$slots.default",
    messages(),
    actions(submitInput())
  ),
  /**
   * The type of node, can be a list, group, or input.
   */
  type: "group",
  /**
   * An array of extra props to accept for this input.
   */
  props: [
    "actions",
    "submit",
    "submitLabel",
    "submitAttrs",
    "submitBehavior",
    "incompleteMessage"
  ],
  library: {
    VaForm,
    VaMessageList: VaMessageList2
  },
  /**
   * Additional features that should be added to your input
   */
  features: [vuesticInputs, forms, disablesChildren],
  /**
   * The key used to memoize the schema.
   */
  schemaMemoKey: token10()
};

// src/inputs/number.ts
import { token as token11 } from "@formkit/utils";
var number = {
  ...text,
  forceTypeProp: "number",
  schemaMemoKey: token11()
};

// src/inputs/password.ts
import { token as token12 } from "@formkit/utils";
var password = {
  ...text,
  forceTypeProp: "password",
  schemaMemoKey: token12()
};

// src/inputs/radio.ts
import { createSection as createSection10 } from "@formkit/inputs";
import { token as token13 } from "@formkit/utils";
import { VaRadio, VaFormField } from "vuestic-ui";
var radioInput = createSection10("input", () => ({
  $cmp: "VaFormField",
  props: {
    error: "$node.context.error",
    messages: "$node.context.help",
    errorMessages: "$node.context.errorMessages",
    loading: "$node.context.loading",
    dirty: "$node.context.state.validationVisible",
    label: "$node.context.label"
  },
  children: [
    {
      for: ["option", "$attrs.options"],
      $cmp: "VaRadio",
      bind: "$attrs",
      props: {
        option: "$option",
        modelValue: "$node.context._value",
        "onUpdate:modelValue": "$node.context.node.input",
        onBlur: "$node.context.handlers.blur",
        disabled: "$node.context.disabled"
      }
    }
  ]
}));
var radio = {
  /**
   * The actual schema of the input, or a function that returns the schema.
   */
  schema: radioInput(),
  /**
   * The type of node, can be a list, group, or input.
   */
  type: "input",
  /**
   * The family of inputs this one belongs too. For example "text" and "email"
   * are both part of the "text" family. This is primary used for styling.
   */
  family: "text",
  /**
   * An array of extra props to accept for this input.
   */
  props: [],
  /**
   * A library of components to provide to the internal input schema
   */
  library: {
    VaFormField,
    VaRadio
  },
  /**
   * Additional features that should be added to your input
   */
  features: [vuesticInputs],
  /**
   * The key used to memoize the schema.
   */
  schemaMemoKey: token13()
};

// src/inputs/rating.ts
import { createSection as createSection11 } from "@formkit/inputs";
import { token as token14 } from "@formkit/utils";
import { VaRating } from "vuestic-ui";
var FormKitInputWrapper6 = createInputWrapper(VaRating);
var ratingInput = createSection11("input", () => ({
  $cmp: "FormKitInputWrapper",
  bind: "$attrs",
  props: {
    context: "$node.context",
    prefixIcon: "$prefixIcon",
    suffixIcon: "$suffixIcon"
  }
}));
var rating = {
  /**
   * The actual schema of the input, or a function that returns the schema.
   */
  schema: ratingInput(),
  /**
   * The type of node, can be a list, group, or input.
   */
  type: "input",
  /**
   * The family of inputs this one belongs too. For example "text" and "email"
   * are both part of the "text" family. This is primary used for styling.
   */
  family: "text",
  /**
   * An array of extra props to accept for this input.
   */
  props: [],
  /**
   * A library of components to provide to the internal input schema
   */
  library: {
    FormKitInputWrapper: FormKitInputWrapper6
  },
  /**
   * Additional features that should be added to your input
   */
  features: [vuesticInputs],
  /**
   * The key used to memoize the schema.
   */
  schemaMemoKey: token14()
};

// src/inputs/select.ts
import { createSection as createSection12 } from "@formkit/inputs";
import { token as token15 } from "@formkit/utils";
import { VaSelect } from "vuestic-ui";
var FormKitInputWrapper7 = createInputWrapper(VaSelect);
var dropdownInput = createSection12("input", () => ({
  $cmp: "FormKitInputWrapper",
  bind: "$attrs",
  props: {
    context: "$node.context",
    prefixIcon: "$prefixIcon",
    suffixIcon: "$suffixIcon"
  }
}));
var select = {
  /**
   * The actual schema of the input, or a function that returns the schema.
   */
  schema: dropdownInput(),
  /**
   * The type of node, can be a list, group, or input.
   */
  type: "input",
  /**
   * The family of inputs this one belongs too. For example "text" and "email"
   * are both part of the "text" family. This is primary used for styling.
   */
  family: "text",
  /**
   * An array of extra props to accept for this input.
   */
  props: [],
  /**
   * A library of components to provide to the internal input schema
   */
  library: {
    FormKitInputWrapper: FormKitInputWrapper7
  },
  /**
   * Additional features that should be added to your input
   */
  features: [vuesticInputs],
  /**
   * The key used to memoize the schema.
   */
  schemaMemoKey: token15()
};

// src/inputs/slider.ts
import { createSection as createSection13 } from "@formkit/inputs";
import { token as token16 } from "@formkit/utils";
import { VaSlider, VaFormField as VaFormField2 } from "vuestic-ui";
var sliderInput = createSection13("input", () => ({
  $cmp: "VaFormField",
  props: {
    error: "$node.context.error",
    messages: "$node.context.help",
    errorMessages: "$node.context.errorMessages",
    loading: "$node.context.loading",
    dirty: "$node.context.state.validationVisible"
  },
  children: [
    {
      $cmp: "VaSlider",
      bind: "$attrs",
      props: {
        modelValue: "$node.context._value",
        "onUpdate:modelValue": "$node.context.node.input",
        onBlur: "$node.context.handlers.blur",
        disabled: "$node.context.disabled",
        label: "$node.context.label"
      }
    }
  ]
}));
var slider = {
  /**
   * The actual schema of the input, or a function that returns the schema.
   */
  schema: sliderInput(),
  /**
   * The type of node, can be a list, group, or input.
   */
  type: "input",
  /**
   * The family of inputs this one belongs too. For example "text" and "email"
   * are both part of the "text" family. This is primary used for styling.
   */
  family: "text",
  /**
   * An array of extra props to accept for this input.
   */
  props: [],
  /**
   * A library of components to provide to the internal input schema
   */
  library: {
    VaFormField: VaFormField2,
    VaSlider
  },
  /**
   * Additional features that should be added to your input
   */
  features: [vuesticInputs],
  /**
   * The key used to memoize the schema.
   */
  schemaMemoKey: token16()
};

// src/inputs/tel.ts
import { token as token17 } from "@formkit/utils";
var tel = {
  ...text,
  forceTypeProp: "tel",
  schemaMemoKey: token17()
};

// src/inputs/textarea.ts
import { createSection as createSection14 } from "@formkit/inputs";
import { token as token18 } from "@formkit/utils";
import { VaTextarea } from "vuestic-ui";
var FormKitInputWrapper8 = createInputWrapper(VaTextarea);
var textareaInput = createSection14("input", () => ({
  $cmp: "FormKitInputWrapper",
  bind: "$attrs",
  props: {
    context: "$node.context",
    prefixIcon: "$prefixIcon",
    suffixIcon: "$suffixIcon"
  }
}));
var textarea = {
  /**
   * The actual schema of the input, or a function that returns the schema.
   */
  schema: textareaInput(),
  /**
   * The type of node, can be a list, group, or input.
   */
  type: "input",
  /**
   * The family of inputs this one belongs too. For example "text" and "email"
   * are both part of the "text" family. This is primary used for styling.
   */
  family: "text",
  /**
   * An array of extra props to accept for this input.
   */
  props: [],
  /**
   * A library of components to provide to the internal input schema
   */
  library: {
    FormKitInputWrapper: FormKitInputWrapper8
  },
  /**
   * Forces node.props.type to be this explicit value.
   */
  forceTypeProp: "text",
  /**
   * Additional features that should be added to your input
   */
  features: [vuesticInputs],
  /**
   * The key used to memoize the schema.
   */
  schemaMemoKey: token18()
};

// src/inputs/timepicker.ts
import { createSection as createSection15 } from "@formkit/inputs";
import { token as token19 } from "@formkit/utils";
import { VaTimeInput } from "vuestic-ui";
var timeInput = createSection15("input", () => ({
  $cmp: "VaTimeInput",
  bind: "$attrs",
  props: {
    modelValue: "$node.context._value",
    "onUpdate:modelValue": "$node.context.node.input",
    onBlur: "$node.context.handlers.blur",
    error: "$node.context.error",
    messages: "$node.context.help",
    errorMessages: "$node.context.errorMessages",
    disabled: "$node.context.disabled",
    label: "$node.context.label",
    loading: "$node.context.loading",
    dirty: "$node.context.state.validationVisible"
  }
}));
var timepicker = {
  /**
   * The actual schema of the input, or a function that returns the schema.
   */
  schema: timeInput(),
  /**
   * The type of node, can be a list, group, or input.
   */
  type: "input",
  /**
   * The family of inputs this one belongs too. For example "text" and "email"
   * are both part of the "text" family. This is primary used for styling.
   */
  family: "text",
  /**
   * An array of extra props to accept for this input.
   */
  props: [],
  /**
   * A library of components to provide to the internal input schema
   */
  library: {
    VaTimeInput
  },
  /**
   * Additional features that should be added to your input
   */
  features: [vuesticInputs],
  /**
   * The key used to memoize the schema.
   */
  schemaMemoKey: token19()
};

// src/inputs/toggle.ts
import { createSection as createSection16 } from "@formkit/inputs";
import { token as token20 } from "@formkit/utils";
import { VaSwitch } from "vuestic-ui";
var FormKitInputWrapper9 = createInputWrapper(VaSwitch);
var toggleInput = createSection16("input", () => ({
  $cmp: "FormKitInputWrapper",
  bind: "$attrs",
  props: {
    context: "$node.context",
    prefixIcon: "$prefixIcon",
    suffixIcon: "$suffixIcon"
  }
}));
var toggle = {
  /**
   * The actual schema of the input, or a function that returns the schema.
   */
  schema: toggleInput(),
  /**
   * The type of node, can be a list, group, or input.
   */
  type: "input",
  /**
   * The family of inputs this one belongs too. For example "text" and "email"
   * are both part of the "text" family. This is primary used for styling.
   */
  family: "text",
  /**
   * An array of extra props to accept for this input.
   */
  props: [],
  /**
   * A library of components to provide to the internal input schema
   */
  library: {
    FormKitInputWrapper: FormKitInputWrapper9
  },
  /**
   * Additional features that should be added to your input
   */
  features: [vuesticInputs],
  /**
   * The key used to memoize the schema.
   */
  schemaMemoKey: token20()
};

// src/inputs/togglebuttons.ts
import { createSection as createSection17 } from "@formkit/inputs";
import { token as token21 } from "@formkit/utils";
import { VaButtonToggle } from "vuestic-ui";
var FormKitInputWrapper10 = createInputWrapper(VaButtonToggle);
var toggleButtonsInput = createSection17("input", () => ({
  $cmp: "FormKitInputWrapper",
  bind: "$attrs",
  props: {
    context: "$node.context",
    prefixIcon: "$prefixIcon",
    suffixIcon: "$suffixIcon"
  }
}));
var togglebuttons = {
  /**
   * The actual schema of the input, or a function that returns the schema.
   */
  schema: toggleButtonsInput(),
  /**
   * The type of node, can be a list, group, or input.
   */
  type: "input",
  /**
   * The family of inputs this one belongs too. For example "text" and "email"
   * are both part of the "text" family. This is primary used for styling.
   */
  family: "text",
  /**
   * An array of extra props to accept for this input.
   */
  props: [],
  /**
   * A library of components to provide to the internal input schema
   */
  library: {
    FormKitInputWrapper: FormKitInputWrapper10
  },
  /**
   * Forces node.props.type to be this explicit value.
   */
  forceTypeProp: "text",
  /**
   * Additional features that should be added to your input
   */
  features: [vuesticInputs],
  /**
   * The key used to memoize the schema.
   */
  schemaMemoKey: token21()
};

// src/inputs/url.ts
import { token as token22 } from "@formkit/utils";
var url = {
  ...text,
  forceTypeProp: "url",
  schemaMemoKey: token22()
};
export {
  button,
  checkbox,
  colorpicker,
  counter,
  datepicker,
  email,
  file,
  form,
  group,
  hidden,
  list,
  meta,
  number,
  password,
  radio,
  rating,
  select,
  slider,
  submit,
  tel,
  text,
  textarea,
  timepicker,
  toggle,
  togglebuttons,
  url
};