nuxt-ui-tools 0.1.0

package/dist/runtime/form/fields/phone-number/config.d.ts

@@ -0,0 +1,14 @@
+export declare const phoneNumberFieldKind: {
+    readonly type: "phone-number";
+    readonly state: "stateful";
+    readonly ui: {
+        readonly label: true;
+        readonly description: true;
+        readonly hint: true;
+    };
+    readonly layout: {
+        readonly item: true;
+    };
+    readonly validation: true;
+    readonly transform: true;
+};

package/dist/runtime/form/fields/phone-number/config.js

@@ -0,0 +1,9 @@
+import { defineFormFieldKind } from "../../utils/field-kind.js";
+export const phoneNumberFieldKind = defineFormFieldKind({
+  type: "phone-number",
+  state: "stateful",
+  ui: { label: true, description: true, hint: true },
+  layout: { item: true },
+  validation: true,
+  transform: true
+});

package/dist/runtime/form/fields/phone-number/index.d.ts

@@ -0,0 +1,2 @@
+export { phoneNumberFieldKind } from './config.js';
+export type * from './types';

package/dist/runtime/form/fields/phone-number/index.js

@@ -0,0 +1 @@
+export { phoneNumberFieldKind } from "./config.js";

package/dist/runtime/form/fields/phone-number/types.d.ts

@@ -0,0 +1,20 @@
+import type { CountryCode, NumberType } from 'libphonenumber-js';
+import type { FormStatefulFieldBase } from '../../types/field-base.js';
+import type { NullableValue } from '../../types/field-output-utils.js';
+export interface FormPhoneCountryOption {
+    code: CountryCode;
+    value: CountryCode;
+    label: string;
+    dialCode: string;
+    flag: string;
+}
+export interface FormPhoneNumberField<TContext = {}, TDeps = {}> extends FormStatefulFieldBase<'phone-number', string | null, TContext, TDeps> {
+    countryCodes?: readonly CountryCode[] | ((option: FormPhoneCountryOption) => boolean);
+    defaultCountryCode?: 'detect' | CountryCode;
+    storedCountryCode?: CountryCode;
+    numberType?: readonly NumberType[];
+    format?: 'international' | 'national' | 'uri' | 'e164';
+    resetOnCountryChange?: boolean;
+    clearable?: boolean;
+}
+export type PhoneNumberFieldOutput = string | NullableValue;

package/dist/runtime/form/fields/radio/component.d.vue.ts

@@ -0,0 +1,8 @@
+import type { FormRadioField } from '../../types/index.js';
+type __VLS_Props = {
+    field: FormRadioField;
+    path: readonly string[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/form/fields/radio/component.vue

@@ -0,0 +1,38 @@
+<script setup>
+import URadioGroup from "@nuxt/ui/components/RadioGroup.vue";
+import { computed } from "vue";
+import FormFieldShell from "../../components/renderer/FormFieldShell.vue";
+import { useFieldControl } from "../../composables/use-field-control";
+const props = defineProps({
+  field: { type: Object, required: true },
+  path: { type: Array, required: true }
+});
+const { form, controlProps, disabled, handleBlur, options } = useFieldControl(
+  () => props.field,
+  () => props.path
+);
+const model = computed({
+  get: () => {
+    const value = form.getValue(props.path);
+    if (typeof value === "string" || typeof value === "number" || typeof value === "boolean")
+      return value;
+    return void 0;
+  },
+  set: (value) => form.setValue(props.path, value)
+});
+const items = computed(() => [...options.items.value]);
+</script>
+
+<template>
+  <FormFieldShell :field="field" :path="path">
+    <URadioGroup
+      v-model="model"
+      v-bind="controlProps"
+      value-key="value"
+      label-key="label"
+      :items="items"
+      :disabled="disabled"
+      @blur="handleBlur"
+    />
+  </FormFieldShell>
+</template>

package/dist/runtime/form/fields/radio/component.vue.d.ts

@@ -0,0 +1,8 @@
+import type { FormRadioField } from '../../types/index.js';
+type __VLS_Props = {
+    field: FormRadioField;
+    path: readonly string[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/form/fields/radio/config.d.ts

@@ -0,0 +1,17 @@
+export declare const radioFieldKind: {
+    readonly type: "radio";
+    readonly state: "stateful";
+    readonly ui: {
+        readonly label: true;
+        readonly description: true;
+        readonly hint: true;
+    };
+    readonly layout: {
+        readonly item: true;
+    };
+    readonly options: {
+        readonly enabled: true;
+    };
+    readonly validation: true;
+    readonly transform: true;
+};

package/dist/runtime/form/fields/radio/config.js

@@ -0,0 +1,10 @@
+import { defineFormFieldKind } from "../../utils/field-kind.js";
+export const radioFieldKind = defineFormFieldKind({
+  type: "radio",
+  state: "stateful",
+  ui: { label: true, description: true, hint: true },
+  layout: { item: true },
+  options: { enabled: true },
+  validation: true,
+  transform: true
+});

package/dist/runtime/form/fields/radio/index.d.ts

@@ -0,0 +1,2 @@
+export { radioFieldKind } from './config.js';
+export type * from './types';

package/dist/runtime/form/fields/radio/index.js

@@ -0,0 +1 @@
+export { radioFieldKind } from "./config.js";

package/dist/runtime/form/fields/radio/types.d.ts

@@ -0,0 +1,7 @@
+import type { FormStatefulFieldBase } from '../../types/field-base.js';
+import type { FieldOptionValue, NullableValue } from '../../types/field-output-utils.js';
+import type { FormOptionItem, FormOptionValue, FormOptionsSource } from '../../types/options.js';
+export interface FormRadioField<TContext = {}, TDeps = {}, TValue extends FormOptionValue = FormOptionValue, TOption extends FormOptionItem<TValue> = FormOptionItem<TValue>> extends FormStatefulFieldBase<'radio', TValue | null, TContext, TDeps> {
+    options: FormOptionsSource<TOption, TContext, TDeps, TValue | null>;
+}
+export type RadioFieldOutput<TField> = FieldOptionValue<TField> | NullableValue;

package/dist/runtime/form/fields/radio-card/component.d.vue.ts

@@ -0,0 +1,8 @@
+import type { FormRadioCardField } from '../../types/index.js';
+type __VLS_Props = {
+    field: FormRadioCardField;
+    path: readonly string[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/form/fields/radio-card/component.vue

@@ -0,0 +1,40 @@
+<script setup>
+import URadioGroup from "@nuxt/ui/components/RadioGroup.vue";
+import { computed } from "vue";
+import FormFieldShell from "../../components/renderer/FormFieldShell.vue";
+import { useFieldControl } from "../../composables/use-field-control";
+const props = defineProps({
+  field: { type: Object, required: true },
+  path: { type: Array, required: true }
+});
+const { form, controlProps, disabled, handleBlur, options } = useFieldControl(
+  () => props.field,
+  () => props.path
+);
+const model = computed({
+  get: () => {
+    const value = form.getValue(props.path);
+    if (typeof value === "string" || typeof value === "number" || typeof value === "boolean")
+      return value;
+    return void 0;
+  },
+  set: (value) => form.setValue(props.path, value)
+});
+const items = computed(() => [...options.items.value]);
+</script>
+
+<template>
+  <FormFieldShell :field="field" :path="path">
+    <URadioGroup
+      v-model="model"
+      v-bind="controlProps"
+      value-key="value"
+      label-key="label"
+      variant="card"
+      :items="items"
+      :orientation="field.orientation"
+      :disabled="disabled"
+      @blur="handleBlur"
+    />
+  </FormFieldShell>
+</template>

package/dist/runtime/form/fields/radio-card/component.vue.d.ts

@@ -0,0 +1,8 @@
+import type { FormRadioCardField } from '../../types/index.js';
+type __VLS_Props = {
+    field: FormRadioCardField;
+    path: readonly string[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/form/fields/radio-card/config.d.ts

@@ -0,0 +1,17 @@
+export declare const radioCardFieldKind: {
+    readonly type: "radio-card";
+    readonly state: "stateful";
+    readonly ui: {
+        readonly label: true;
+        readonly description: true;
+        readonly hint: true;
+    };
+    readonly layout: {
+        readonly item: true;
+    };
+    readonly options: {
+        readonly enabled: true;
+    };
+    readonly validation: true;
+    readonly transform: true;
+};

package/dist/runtime/form/fields/radio-card/config.js

@@ -0,0 +1,10 @@
+import { defineFormFieldKind } from "../../utils/field-kind.js";
+export const radioCardFieldKind = defineFormFieldKind({
+  type: "radio-card",
+  state: "stateful",
+  ui: { label: true, description: true, hint: true },
+  layout: { item: true },
+  options: { enabled: true },
+  validation: true,
+  transform: true
+});

package/dist/runtime/form/fields/radio-card/index.d.ts

@@ -0,0 +1,2 @@
+export { radioCardFieldKind } from './config.js';
+export type { FormRadioCardField, RadioCardFieldOutput } from './types.js';

package/dist/runtime/form/fields/radio-card/index.js

@@ -0,0 +1 @@
+export { radioCardFieldKind } from "./config.js";

package/dist/runtime/form/fields/radio-card/types.d.ts

@@ -0,0 +1,8 @@
+import type { FormStatefulFieldBase } from '../../types/field-base.js';
+import type { FieldOptionValue, NullableValue } from '../../types/field-output-utils.js';
+import type { FormOptionItem, FormOptionValue, FormOptionsSource } from '../../types/options.js';
+export interface FormRadioCardField<TContext = {}, TDeps = {}, TValue extends FormOptionValue = FormOptionValue, TOption extends FormOptionItem<TValue> = FormOptionItem<TValue>> extends FormStatefulFieldBase<'radio-card', TValue | null, TContext, TDeps> {
+    options: FormOptionsSource<TOption, TContext, TDeps, TValue | null>;
+    orientation?: 'horizontal' | 'vertical';
+}
+export type RadioCardFieldOutput<TField> = FieldOptionValue<TField> | NullableValue;

package/dist/runtime/form/fields/rating/component.d.vue.ts

@@ -0,0 +1,8 @@
+import type { FormRatingField } from '../../types/index.js';
+type __VLS_Props = {
+    field: FormRatingField;
+    path: readonly string[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/form/fields/rating/component.vue

@@ -0,0 +1,54 @@
+<script setup>
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import { computed, ref } from "vue";
+import FormFieldShell from "../../components/renderer/FormFieldShell.vue";
+import { useFieldControl } from "../../composables/use-field-control";
+const props = defineProps({
+  field: { type: Object, required: true },
+  path: { type: Array, required: true }
+});
+const { form, controlProps, disabled, handleBlur } = useFieldControl(
+  () => props.field,
+  () => props.path
+);
+const model = computed({
+  get: () => {
+    const value = form.getValue(props.path);
+    return typeof value === "number" ? value : null;
+  },
+  set: (value) => form.setValue(props.path, value)
+});
+const max = computed(() => Math.max(1, props.field.max ?? 5));
+const icon = computed(() => props.field.icon ?? "i-lucide-star");
+const hoverValue = ref(null);
+const visualValue = computed(() => hoverValue.value ?? model.value ?? 0);
+function setRating(value) {
+  if (disabled.value) return;
+  if (props.field.clearable === true && model.value === value) {
+    model.value = null;
+    return;
+  }
+  model.value = value;
+}
+</script>
+
+<template>
+  <FormFieldShell :field="field" :path="path">
+    <div v-bind="controlProps" class="flex items-center gap-1" @blur="handleBlur">
+      <button
+        v-for="value in max"
+        :key="value"
+        type="button"
+        :disabled="disabled"
+        :aria-pressed="model === value"
+        class="grid size-8 place-items-center rounded-md text-warning transition-colors hover:bg-elevated disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
+        :class="value <= visualValue ? 'opacity-100' : 'opacity-40'"
+        @mouseenter="hoverValue = value"
+        @mouseleave="hoverValue = null"
+        @click="setRating(value)"
+      >
+        <UIcon :name="icon" class="size-5" :class="value <= visualValue ? 'fill-current' : ''" />
+      </button>
+    </div>
+  </FormFieldShell>
+</template>

package/dist/runtime/form/fields/rating/component.vue.d.ts

@@ -0,0 +1,8 @@
+import type { FormRatingField } from '../../types/index.js';
+type __VLS_Props = {
+    field: FormRatingField;
+    path: readonly string[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/form/fields/rating/config.d.ts

@@ -0,0 +1,14 @@
+export declare const ratingFieldKind: {
+    readonly type: "rating";
+    readonly state: "stateful";
+    readonly ui: {
+        readonly label: true;
+        readonly description: true;
+        readonly hint: true;
+    };
+    readonly layout: {
+        readonly item: true;
+    };
+    readonly validation: true;
+    readonly transform: true;
+};

package/dist/runtime/form/fields/rating/config.js

@@ -0,0 +1,9 @@
+import { defineFormFieldKind } from "../../utils/field-kind.js";
+export const ratingFieldKind = defineFormFieldKind({
+  type: "rating",
+  state: "stateful",
+  ui: { label: true, description: true, hint: true },
+  layout: { item: true },
+  validation: true,
+  transform: true
+});

package/dist/runtime/form/fields/rating/index.d.ts

@@ -0,0 +1,2 @@
+export { ratingFieldKind } from './config.js';
+export type { FormRatingField, RatingFieldOutput } from './types.js';

package/dist/runtime/form/fields/rating/index.js

@@ -0,0 +1 @@
+export { ratingFieldKind } from "./config.js";

package/dist/runtime/form/fields/rating/types.d.ts

@@ -0,0 +1,8 @@
+import type { FormStatefulFieldBase } from '../../types/field-base.js';
+import type { NullableValue } from '../../types/field-output-utils.js';
+export interface FormRatingField<TContext = {}, TDeps = {}> extends FormStatefulFieldBase<'rating', number | null, TContext, TDeps> {
+    max?: number;
+    clearable?: boolean;
+    icon?: string;
+}
+export type RatingFieldOutput = number | NullableValue;

package/dist/runtime/form/fields/select/component.d.vue.ts

@@ -0,0 +1,9 @@
+import type { FormSelectField } from '../../types/index.js';
+type __VLS_Props = {
+    field: FormSelectField;
+    path: readonly string[];
+    bare?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/form/fields/select/component.vue

@@ -0,0 +1,173 @@
+<script setup>
+import UButton from "@nuxt/ui/components/Button.vue";
+import USelectMenu from "@nuxt/ui/components/SelectMenu.vue";
+import { computed, ref } from "vue";
+import FormFieldShell from "../../components/renderer/FormFieldShell.vue";
+import { useFieldControl } from "../../composables/use-field-control";
+const props = defineProps({
+  field: { type: Object, required: true },
+  path: { type: Array, required: true },
+  bare: { type: Boolean, required: false }
+});
+const { form, controlProps, disabled, handleBlur, options, placeholder } = useFieldControl(
+  () => props.field,
+  () => props.path
+);
+const searchTerm = ref("");
+const model = computed({
+  get: () => {
+    const value = form.getValue(props.path);
+    if (Array.isArray(value)) return value.filter(isOptionValue);
+    if (isOptionValue(value)) return value;
+    return null;
+  },
+  set: (value) => form.setValue(props.path, value)
+});
+const items = computed(() => [...options.items.value]);
+const createItem = computed(
+  () => options.creatable.value ? props.field.createItem ?? { position: "bottom", when: "empty" } : false
+);
+const showFooterActions = computed(() => options.refreshable.value || options.creatable.value);
+const footerActionsClass = computed(
+  () => options.refreshable.value && options.creatable.value ? "sm:grid-cols-2" : "grid-cols-1"
+);
+const createActionLabel = computed(() => options.createLabel.value ?? "Create option");
+async function handleCreate(label) {
+  const option = await options.create(label);
+  if (!option) return;
+  if (!options.selectCreatedOption.value) return;
+  if (props.field.multiple) {
+    const current = Array.isArray(model.value) ? model.value.filter(isOptionValue) : [];
+    model.value = [...current, option.value];
+    return;
+  }
+  model.value = option.value;
+}
+async function handleCreateAction() {
+  await handleCreate(searchTerm.value);
+}
+async function refreshOptions() {
+  await options.refresh();
+}
+function isOptionValue(value) {
+  return typeof value === "string" || typeof value === "number" || typeof value === "boolean";
+}
+</script>
+
+<template>
+  <USelectMenu
+    v-if="bare"
+    v-model="model"
+    v-model:search-term="searchTerm"
+    v-bind="controlProps"
+    class="w-full"
+    value-key="value"
+    label-key="label"
+    :items="items"
+    :multiple="field.multiple"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    :loading="options.loading.value || options.creating.value"
+    :search-input="field.searchable ?? false"
+    :clear="field.clearable === true"
+    :create-item="createItem"
+    @create="handleCreate"
+    @blur="handleBlur"
+  >
+    <template #content-bottom>
+      <div
+        v-if="showFooterActions"
+        class="grid gap-1 border-t border-default p-1"
+        :class="footerActionsClass"
+      >
+        <UButton
+          v-if="options.refreshable.value"
+          block
+          size="xs"
+          variant="ghost"
+          color="neutral"
+          icon="i-lucide-refresh-cw"
+          :loading="options.pending.value || options.fetching.value"
+          @click.stop="refreshOptions"
+        >
+          Refresh
+        </UButton>
+        <UButton
+          v-if="options.creatable.value"
+          block
+          size="xs"
+          variant="ghost"
+          color="primary"
+          icon="i-lucide-plus"
+          :loading="options.creating.value"
+          :disabled="disabled || options.creating.value"
+          @click.stop="handleCreateAction"
+        >
+          {{ createActionLabel }}
+        </UButton>
+      </div>
+    </template>
+
+    <template #create-item-label="{ item }">
+      {{ options.creating.value ? "Creating..." : `Create "${item}"` }}
+    </template>
+  </USelectMenu>
+  <FormFieldShell v-else :field="field" :path="path">
+    <USelectMenu
+      v-model="model"
+      v-model:search-term="searchTerm"
+      v-bind="controlProps"
+      class="w-full"
+      value-key="value"
+      label-key="label"
+      :items="items"
+      :multiple="field.multiple"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :loading="options.loading.value || options.creating.value"
+      :search-input="field.searchable ?? false"
+      :clear="field.clearable === true"
+      :create-item="createItem"
+      @create="handleCreate"
+      @blur="handleBlur"
+    >
+      <template #content-bottom>
+        <div
+          v-if="showFooterActions"
+          class="grid gap-1 border-t border-default p-1"
+          :class="footerActionsClass"
+        >
+          <UButton
+            v-if="options.refreshable.value"
+            block
+            size="xs"
+            variant="ghost"
+            color="neutral"
+            icon="i-lucide-refresh-cw"
+            :loading="options.pending.value || options.fetching.value"
+            @click.stop="refreshOptions"
+          >
+            Refresh
+          </UButton>
+          <UButton
+            v-if="options.creatable.value"
+            block
+            size="xs"
+            variant="ghost"
+            color="primary"
+            icon="i-lucide-plus"
+            :loading="options.creating.value"
+            :disabled="disabled || options.creating.value"
+            @click.stop="handleCreateAction"
+          >
+            {{ createActionLabel }}
+          </UButton>
+        </div>
+      </template>
+
+      <template #create-item-label="{ item }">
+        {{ options.creating.value ? "Creating..." : `Create "${item}"` }}
+      </template>
+    </USelectMenu>
+  </FormFieldShell>
+</template>

package/dist/runtime/form/fields/select/component.vue.d.ts

@@ -0,0 +1,9 @@
+import type { FormSelectField } from '../../types/index.js';
+type __VLS_Props = {
+    field: FormSelectField;
+    path: readonly string[];
+    bare?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/form/fields/select/config.d.ts

@@ -0,0 +1,17 @@
+export declare const selectFieldKind: {
+    readonly type: "select";
+    readonly state: "stateful";
+    readonly ui: {
+        readonly label: true;
+        readonly description: true;
+        readonly hint: true;
+    };
+    readonly layout: {
+        readonly item: true;
+    };
+    readonly options: {
+        readonly enabled: true;
+    };
+    readonly validation: true;
+    readonly transform: true;
+};

package/dist/runtime/form/fields/select/config.js

@@ -0,0 +1,10 @@
+import { defineFormFieldKind } from "../../utils/field-kind.js";
+export const selectFieldKind = defineFormFieldKind({
+  type: "select",
+  state: "stateful",
+  ui: { label: true, description: true, hint: true },
+  layout: { item: true },
+  options: { enabled: true },
+  validation: true,
+  transform: true
+});

package/dist/runtime/form/fields/select/index.d.ts

@@ -0,0 +1,2 @@
+export { selectFieldKind } from './config.js';
+export type * from './types';

package/dist/runtime/form/fields/select/index.js

@@ -0,0 +1 @@
+export { selectFieldKind } from "./config.js";