@chelone/vue 0.0.0-stage → 0.1.0

package/dist/components/admin/inputs/loading-input.vue.d.ts

@@ -0,0 +1,15 @@
+/** Props for {@link LoadingInput}. */
+export interface LoadingInputProps {
+    label?: string;
+    helperText?: string;
+    /** Milliseconds before the spinner replaces the empty placeholder. Defaults to 1000. */
+    timeout?: number;
+    size?: "default" | "sm";
+    fullWidth?: boolean;
+    class?: string;
+}
+declare const _default: import("vue").DefineComponent<LoadingInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LoadingInputProps> & Readonly<{}>, {
+    size: "default" | "sm";
+    timeout: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/admin/inputs/loading-input.vue.js

@@ -0,0 +1,65 @@
+import { defineComponent, useId, computed, openBlock, createElementBlock, normalizeClass, unref, toDisplayString, createCommentVNode, createElementVNode, createVNode, createBlock } from "vue";
+import { cn } from "../../../lib/utils.js";
+import _sfc_main$1 from "../../ui/input.vue.js";
+import _sfc_main$2 from "../feedback/spinner.vue.js";
+import { useTimeout } from "../feedback/use-timeout.js";
+const _hoisted_1 = ["for"];
+const _hoisted_2 = { class: "relative" };
+const _hoisted_3 = { class: "pointer-events-none absolute inset-y-0 right-3 flex w-5 items-center justify-center" };
+const _hoisted_4 = {
+  key: 1,
+  class: "text-xs text-muted-foreground"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "loading-input",
+  props: {
+    label: {},
+    helperText: {},
+    timeout: { default: 1e3 },
+    size: { default: "default" },
+    fullWidth: { type: Boolean },
+    class: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const id = useId();
+    const showSpinner = useTimeout(props.timeout);
+    const classes = computed(
+      () => cn("flex flex-col gap-1", props.fullWidth && "w-full", props.class)
+    );
+    const inputClasses = computed(() => cn("pr-10", props.size === "sm" && "h-8"));
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("fieldset", {
+        "data-slot": "loading-input",
+        class: normalizeClass(classes.value)
+      }, [
+        __props.label ? (openBlock(), createElementBlock("label", {
+          key: 0,
+          for: unref(id),
+          class: "text-sm font-medium"
+        }, toDisplayString(__props.label), 9, _hoisted_1)) : createCommentVNode("", true),
+        createElementVNode("div", _hoisted_2, [
+          createVNode(_sfc_main$1, {
+            id: unref(id),
+            "model-value": "",
+            disabled: "",
+            readonly: "",
+            "aria-busy": "true",
+            class: normalizeClass(inputClasses.value)
+          }, null, 8, ["id", "class"]),
+          createElementVNode("span", _hoisted_3, [
+            unref(showSpinner) ? (openBlock(), createBlock(_sfc_main$2, {
+              key: 0,
+              size: "small",
+              class: "size-5"
+            })) : createCommentVNode("", true)
+          ])
+        ]),
+        __props.helperText ? (openBlock(), createElementBlock("p", _hoisted_4, toDisplayString(__props.helperText), 1)) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/admin/inputs/loading-input2.vue.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./loading-input.vue.js";
+export {
+  _sfc_main as default
+};

package/dist/components/admin/inputs/nullable-boolean-input.vue.d.ts

@@ -0,0 +1,29 @@
+/**
+ * `<NullableBooleanInput>` — a tri-state select for a `boolean | null` field,
+ * the Vue analog of `@chelone/react`'s `inputs/nullable-boolean-input.tsx`.
+ * Renders three options (default labels "", "No", "Yes") over the `q`-less
+ * `NativeSelect`. Binds via `useInput` with the twin's `format`/`parse`:
+ * `boolean → "true"|"false"|""` on read and back to `true|false|null` on write.
+ *
+ * Idiom note: Radix's Select (React) rejects `""` as an item value, so the twin
+ * routed `null` through a `"__null__"` sentinel. The Vue slice uses a NATIVE
+ * `<select>`, which accepts `""` directly — so the empty option IS the null
+ * value, no sentinel round-trip.
+ */
+import type { Validator } from "@chelone/core";
+/** Props for {@link NullableBooleanInput}. */
+export interface NullableBooleanInputProps {
+    source: string;
+    label?: string | false;
+    nullLabel?: string;
+    trueLabel?: string;
+    falseLabel?: string;
+    validate?: Validator | readonly Validator[];
+    disabled?: boolean;
+    helperText?: string;
+    class?: string;
+}
+declare const _default: import("vue").DefineComponent<NullableBooleanInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NullableBooleanInputProps> & Readonly<{}>, {
+    label: string | false;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/admin/inputs/nullable-boolean-input.vue.js

@@ -0,0 +1,103 @@
+import { defineComponent, computed, openBlock, createBlock, unref, normalizeClass, withCtx, createTextVNode, toDisplayString, createElementBlock, createCommentVNode, createVNode } from "vue";
+import { useInput } from "../../../form/use-input.js";
+import { useTranslate } from "../../../i18n/use-translate.js";
+import { cn } from "../../../lib/utils.js";
+import { Field, FieldLabel, FieldError } from "../../ui/field.js";
+import _sfc_main$1 from "../../ui/native-select.vue.js";
+import _sfc_main$2 from "../common/validation-error.vue.js";
+import { humanizeSource } from "./label-text.js";
+const _hoisted_1 = { key: 0 };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "nullable-boolean-input",
+  props: {
+    source: {},
+    label: { type: [String, Boolean], default: void 0 },
+    nullLabel: {},
+    trueLabel: {},
+    falseLabel: {},
+    validate: {},
+    disabled: { type: Boolean },
+    helperText: {},
+    class: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const getStringFromBoolean = (v) => {
+      if (v === true) return "true";
+      if (v === false) return "false";
+      return "";
+    };
+    const getBooleanFromString = (v) => {
+      if (v === "true") return true;
+      if (v === "false") return false;
+      return null;
+    };
+    const translate = useTranslate();
+    const { id, value, setValue, blur, error, touched, isRequired } = useInput({
+      source: props.source,
+      validate: props.validate,
+      format: getStringFromBoolean,
+      parse: getBooleanFromString
+    });
+    const selectValue = computed(() => value.value);
+    const invalid = computed(() => touched.value && error.value != null);
+    const labelText = computed(
+      () => props.label === false || props.label === "" ? null : props.label ?? humanizeSource(props.source)
+    );
+    const options = computed(() => [
+      {
+        value: "",
+        label: props.nullLabel ? translate(props.nullLabel, { _: props.nullLabel }) : translate("ra.boolean.null", { _: "" })
+      },
+      {
+        value: "false",
+        label: props.falseLabel ? translate(props.falseLabel, { _: props.falseLabel }) : translate("ra.boolean.false", { _: "No" })
+      },
+      {
+        value: "true",
+        label: props.trueLabel ? translate(props.trueLabel, { _: props.trueLabel }) : translate("ra.boolean.true", { _: "Yes" })
+      }
+    ]);
+    function onChange(next) {
+      setValue(next);
+      blur();
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Field), {
+        class: normalizeClass(unref(cn)("w-full min-w-20", props.class)),
+        "data-invalid": invalid.value
+      }, {
+        default: withCtx(() => [
+          labelText.value != null ? (openBlock(), createBlock(unref(FieldLabel), {
+            key: 0,
+            "html-for": unref(id)
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(labelText.value), 1),
+              unref(isRequired) ? (openBlock(), createElementBlock("span", _hoisted_1, " *")) : createCommentVNode("", true)
+            ]),
+            _: 1
+          }, 8, ["html-for"])) : createCommentVNode("", true),
+          createVNode(_sfc_main$1, {
+            id: unref(id),
+            "model-value": selectValue.value,
+            options: options.value,
+            disabled: __props.disabled,
+            "aria-invalid": invalid.value,
+            "onUpdate:modelValue": onChange
+          }, null, 8, ["id", "model-value", "options", "disabled", "aria-invalid"]),
+          invalid.value ? (openBlock(), createBlock(unref(FieldError), { key: 1 }, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$2, { error: unref(error) }, null, 8, ["error"])
+            ]),
+            _: 1
+          })) : createCommentVNode("", true)
+        ]),
+        _: 1
+      }, 8, ["class", "data-invalid"]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/admin/inputs/nullable-boolean-input2.vue.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./nullable-boolean-input.vue.js";
+export {
+  _sfc_main as default
+};

package/dist/components/admin/inputs/number-input.vue.d.ts

@@ -0,0 +1,19 @@
+/**
+ * `<NumberInput>` — numeric input, the Vue analog of `@chelone/react`'s
+ * `inputs/number-input.tsx`. Keeps a LOCAL string buffer so a user can type an
+ * incomplete number (`-`, `0.`) before it is parsed, and writes `null` (not `0`)
+ * on empty so required validation still triggers. Binds through `useInput`.
+ */
+import type { Validator } from "@chelone/core";
+/** Props for {@link NumberInput}. */
+export interface NumberInputProps {
+    source: string;
+    label?: string | false;
+    defaultValue?: unknown;
+    validate?: Validator | readonly Validator[];
+    class?: string;
+}
+declare const _default: import("vue").DefineComponent<NumberInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NumberInputProps> & Readonly<{}>, {
+    label: string | false;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/admin/inputs/number-input.vue.js

@@ -0,0 +1,88 @@
+import { defineComponent, ref, watch, computed, openBlock, createBlock, unref, normalizeClass, withCtx, createTextVNode, toDisplayString, createElementBlock, createCommentVNode, createVNode } from "vue";
+import { useInput } from "../../../form/use-input.js";
+import { Field, FieldLabel, FieldError } from "../../ui/field.js";
+import _sfc_main$1 from "../../ui/input.vue.js";
+import _sfc_main$2 from "../common/validation-error.vue.js";
+import { humanizeSource } from "./label-text.js";
+const _hoisted_1 = { key: 0 };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "number-input",
+  props: {
+    source: {},
+    label: { type: [String, Boolean], default: void 0 },
+    defaultValue: {},
+    validate: {},
+    class: {}
+  },
+  setup(__props) {
+    const props = __props;
+    function toNumber(raw) {
+      if (raw == null || raw === "") return null;
+      const parsed = Number.parseFloat(raw);
+      return Number.isNaN(parsed) ? null : parsed;
+    }
+    const { id, value, setValue, blur, error, touched, isRequired } = useInput({
+      source: props.source,
+      defaultValue: props.defaultValue,
+      validate: props.validate,
+      // Store a real number (or null), not the display string.
+      parse: (input) => toNumber(String(input ?? ""))
+    });
+    const buffer = ref(value.value == null ? "" : String(value.value));
+    const focused = ref(false);
+    watch(value, (next) => {
+      if (!focused.value) buffer.value = next == null ? "" : String(next);
+    });
+    const invalid = computed(() => touched.value && error.value != null);
+    const labelText = computed(
+      () => props.label === false ? null : props.label ?? humanizeSource(props.source)
+    );
+    function onInput(raw) {
+      buffer.value = raw;
+      setValue(toNumber(raw));
+    }
+    function onBlur() {
+      focused.value = false;
+      blur();
+      buffer.value = value.value == null ? "" : String(value.value);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Field), {
+        class: normalizeClass(props.class),
+        "data-invalid": invalid.value
+      }, {
+        default: withCtx(() => [
+          labelText.value != null ? (openBlock(), createBlock(unref(FieldLabel), {
+            key: 0,
+            "html-for": unref(id)
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(labelText.value), 1),
+              unref(isRequired) ? (openBlock(), createElementBlock("span", _hoisted_1, " *")) : createCommentVNode("", true)
+            ]),
+            _: 1
+          }, 8, ["html-for"])) : createCommentVNode("", true),
+          createVNode(_sfc_main$1, {
+            id: unref(id),
+            type: "number",
+            "model-value": buffer.value,
+            "aria-invalid": invalid.value,
+            onFocus: _cache[0] || (_cache[0] = ($event) => focused.value = true),
+            "onUpdate:modelValue": onInput,
+            onBlur
+          }, null, 8, ["id", "model-value", "aria-invalid"]),
+          invalid.value ? (openBlock(), createBlock(unref(FieldError), { key: 1 }, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$2, { error: unref(error) }, null, 8, ["error"])
+            ]),
+            _: 1
+          })) : createCommentVNode("", true)
+        ]),
+        _: 1
+      }, 8, ["class", "data-invalid"]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/admin/inputs/number-input2.vue.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./number-input.vue.js";
+export {
+  _sfc_main as default
+};

package/dist/components/admin/inputs/password-input.vue.d.ts

@@ -0,0 +1,30 @@
+/**
+ * `<PasswordInput>` — text input for passwords with a reveal toggle, the Vue
+ * analog of `@chelone/react`'s `inputs/password-input.tsx`. Wraps `<TextInput>`
+ * and forces `type="password"`; the ghost button flips the type to `text` (and
+ * back) so the value can be read. `initiallyVisible` renders it plain on mount.
+ *
+ * Icon note: the Vue slice is dependency-free (no `lucide-vue-next`), so the
+ * eye / eye-off glyphs are inlined SVGs mirroring lucide's paths.
+ */
+import type { Validator } from "@chelone/core";
+/** Props for {@link PasswordInput}. */
+export interface PasswordInputProps {
+    source: string;
+    label?: string | false;
+    initiallyVisible?: boolean;
+    defaultValue?: unknown;
+    validate?: Validator | readonly Validator[];
+    helperText?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    autocomplete?: string;
+    autofocus?: boolean;
+    inputClass?: string;
+    class?: string;
+}
+declare const _default: import("vue").DefineComponent<PasswordInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PasswordInputProps> & Readonly<{}>, {
+    label: string | false;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/admin/inputs/password-input.vue.js

@@ -0,0 +1,110 @@
+import { defineComponent, ref, computed, openBlock, createElementBlock, normalizeClass, unref, createVNode, withCtx, createElementVNode } from "vue";
+import { useTranslate } from "../../../i18n/use-translate.js";
+import { cn } from "../../../lib/utils.js";
+import _sfc_main$2 from "../../ui/button.vue.js";
+import _sfc_main$1 from "./text-input.vue.js";
+const _hoisted_1 = {
+  key: 0,
+  xmlns: "http://www.w3.org/2000/svg",
+  class: "size-4",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round",
+  "aria-hidden": "true"
+};
+const _hoisted_2 = {
+  key: 1,
+  xmlns: "http://www.w3.org/2000/svg",
+  class: "size-4",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round",
+  "aria-hidden": "true"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "password-input",
+  props: {
+    source: {},
+    label: { type: [String, Boolean], default: void 0 },
+    initiallyVisible: { type: Boolean },
+    defaultValue: {},
+    validate: {},
+    helperText: {},
+    placeholder: {},
+    disabled: { type: Boolean },
+    readonly: { type: Boolean },
+    autocomplete: {},
+    autofocus: { type: Boolean },
+    inputClass: {},
+    class: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const visible = ref(props.initiallyVisible === true);
+    const translate = useTranslate();
+    const hasLabel = computed(() => props.label !== false);
+    const toggleLabel = computed(
+      () => visible.value ? translate("ra.input.password.toggle_visible", { _: "Hide password" }) : translate("ra.input.password.toggle_hidden", { _: "Show password" })
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(unref(cn)("relative", props.class))
+      }, [
+        createVNode(_sfc_main$1, {
+          source: __props.source,
+          label: __props.label,
+          type: visible.value ? "text" : "password",
+          "default-value": __props.defaultValue,
+          validate: __props.validate,
+          "helper-text": __props.helperText,
+          placeholder: __props.placeholder,
+          disabled: __props.disabled,
+          readonly: __props.readonly,
+          autocomplete: __props.autocomplete,
+          autofocus: __props.autofocus,
+          "input-class": unref(cn)("pr-10", __props.inputClass)
+        }, null, 8, ["source", "label", "type", "default-value", "validate", "helper-text", "placeholder", "disabled", "readonly", "autocomplete", "autofocus", "input-class"]),
+        createVNode(_sfc_main$2, {
+          type: "button",
+          variant: "ghost",
+          size: "icon",
+          class: normalizeClass(unref(cn)("absolute right-1 size-7 text-muted-foreground", hasLabel.value ? "top-6" : "top-1")),
+          "aria-label": toggleLabel.value,
+          tabindex: -1,
+          onClick: _cache[0] || (_cache[0] = ($event) => visible.value = !visible.value)
+        }, {
+          default: withCtx(() => [
+            visible.value ? (openBlock(), createElementBlock("svg", _hoisted_1, [..._cache[1] || (_cache[1] = [
+              createElementVNode("path", { d: "M9.88 9.88a3 3 0 1 0 4.24 4.24" }, null, -1),
+              createElementVNode("path", { d: "M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68" }, null, -1),
+              createElementVNode("path", { d: "M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61" }, null, -1),
+              createElementVNode("line", {
+                x1: "2",
+                x2: "22",
+                y1: "2",
+                y2: "22"
+              }, null, -1)
+            ])])) : (openBlock(), createElementBlock("svg", _hoisted_2, [..._cache[2] || (_cache[2] = [
+              createElementVNode("path", { d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" }, null, -1),
+              createElementVNode("circle", {
+                cx: "12",
+                cy: "12",
+                r: "3"
+              }, null, -1)
+            ])]))
+          ]),
+          _: 1
+        }, 8, ["class", "aria-label"])
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/admin/inputs/password-input2.vue.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./password-input.vue.js";
+export {
+  _sfc_main as default
+};

package/dist/components/admin/inputs/phone-input.vue.d.ts

@@ -0,0 +1,26 @@
+/**
+ * `<PhoneInput>` — stores E.164 (`+14155552671`) and renders a country selector
+ * plus a national-format `tel` input, the Vue analog of `@chelone/react`'s
+ * `inputs/phone-input.tsx`. National formatting + E.164 normalization come from
+ * `libphonenumber-js` (the same dep the twin uses); `AsYouType` formats while
+ * typing and `parsePhoneNumber(...).number` normalizes on write-back.
+ */
+import type { Validator } from "@chelone/core";
+import { type CountryCode } from "libphonenumber-js";
+/** Props for {@link PhoneInput}. */
+export interface PhoneInputProps {
+    source: string;
+    label?: string | false;
+    defaultValue?: unknown;
+    validate?: Validator | readonly Validator[];
+    defaultCountry?: CountryCode;
+    allowedCountries?: readonly CountryCode[];
+    disabled?: boolean;
+    helperText?: string;
+    class?: string;
+}
+declare const _default: import("vue").DefineComponent<PhoneInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PhoneInputProps> & Readonly<{}>, {
+    label: string | false;
+    defaultCountry: CountryCode;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/admin/inputs/phone-input.vue.js

@@ -0,0 +1,138 @@
+import { defineComponent, computed, ref, watch, openBlock, createBlock, unref, normalizeClass, withCtx, createTextVNode, toDisplayString, createElementBlock, createCommentVNode, createElementVNode, Fragment, renderList, createVNode } from "vue";
+import { getCountries, getCountryCallingCode, parsePhoneNumber, AsYouType } from "libphonenumber-js";
+import { useInput } from "../../../form/use-input.js";
+import { cn } from "../../../lib/utils.js";
+import { Field, FieldLabel, FieldError } from "../../ui/field.js";
+import _sfc_main$1 from "../../ui/input.vue.js";
+import _sfc_main$2 from "../common/validation-error.vue.js";
+import { humanizeSource } from "./label-text.js";
+const _hoisted_1 = { key: 0 };
+const _hoisted_2 = ["value", "disabled"];
+const _hoisted_3 = ["value"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "phone-input",
+  props: {
+    source: {},
+    label: { type: [String, Boolean], default: void 0 },
+    defaultValue: {},
+    validate: {},
+    defaultCountry: { default: "US" },
+    allowedCountries: {},
+    disabled: { type: Boolean },
+    helperText: {},
+    class: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const { id, value, setValue, blur, error, touched, isRequired } = useInput({
+      source: props.source,
+      defaultValue: props.defaultValue,
+      validate: props.validate
+    });
+    function inferCountry(v, fallback) {
+      try {
+        const p = parsePhoneNumber(v);
+        if (p.country) return p.country;
+      } catch {
+      }
+      return fallback;
+    }
+    function formatNational(v, country2) {
+      try {
+        return parsePhoneNumber(v, country2).formatNational();
+      } catch {
+        return v;
+      }
+    }
+    const stored = computed(() => String(value.value ?? ""));
+    const countries = computed(
+      () => props.allowedCountries ?? getCountries()
+    );
+    const country = ref(inferCountry(stored.value, props.defaultCountry));
+    const display = ref(formatNational(stored.value, country.value));
+    watch(stored, (next) => {
+      const c = inferCountry(next, props.defaultCountry);
+      country.value = c;
+      display.value = formatNational(next, c);
+    });
+    const invalid = computed(() => touched.value && error.value != null);
+    const labelText = computed(
+      () => props.label === false ? null : props.label ?? humanizeSource(props.source)
+    );
+    function writeBack(nationalText, cc) {
+      display.value = nationalText;
+      try {
+        setValue(parsePhoneNumber(nationalText, cc).number);
+      } catch {
+        setValue(nationalText);
+      }
+    }
+    function onCountryChange(event) {
+      const cc = event.target.value;
+      country.value = cc;
+      writeBack(display.value, cc);
+    }
+    function onTelInput(raw) {
+      const formatted = new AsYouType(country.value).input(raw);
+      writeBack(formatted, country.value);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Field), {
+        class: normalizeClass(props.class),
+        "data-invalid": invalid.value
+      }, {
+        default: withCtx(() => [
+          labelText.value != null ? (openBlock(), createBlock(unref(FieldLabel), {
+            key: 0,
+            "html-for": unref(id)
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(labelText.value), 1),
+              unref(isRequired) ? (openBlock(), createElementBlock("span", _hoisted_1, " *")) : createCommentVNode("", true)
+            ]),
+            _: 1
+          }, 8, ["html-for"])) : createCommentVNode("", true),
+          createElementVNode("div", {
+            class: normalizeClass(unref(cn)("flex items-center gap-2"))
+          }, [
+            createElementVNode("select", {
+              "data-country-select": "",
+              "aria-label": "Country",
+              value: country.value,
+              disabled: __props.disabled,
+              class: "rounded-md border border-input bg-background px-2 py-1 text-sm",
+              onChange: onCountryChange
+            }, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(countries.value, (c) => {
+                return openBlock(), createElementBlock("option", {
+                  key: c,
+                  value: c
+                }, toDisplayString(c) + " +" + toDisplayString(unref(getCountryCallingCode)(c)), 9, _hoisted_3);
+              }), 128))
+            ], 40, _hoisted_2),
+            createVNode(_sfc_main$1, {
+              id: unref(id),
+              type: "tel",
+              "model-value": display.value,
+              disabled: __props.disabled,
+              "aria-invalid": invalid.value,
+              class: "flex-1",
+              "onUpdate:modelValue": onTelInput,
+              onBlur: unref(blur)
+            }, null, 8, ["id", "model-value", "disabled", "aria-invalid", "onBlur"])
+          ], 2),
+          invalid.value ? (openBlock(), createBlock(unref(FieldError), { key: 1 }, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$2, { error: unref(error) }, null, 8, ["error"])
+            ]),
+            _: 1
+          })) : createCommentVNode("", true)
+        ]),
+        _: 1
+      }, 8, ["class", "data-invalid"]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/admin/inputs/phone-input2.vue.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./phone-input.vue.js";
+export {
+  _sfc_main as default
+};