nuxt-ui-tools 0.1.2 → 1.0.0

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

@@ -1,50 +1,144 @@
 <script setup>
 import UInputNumber from "@nuxt/ui/components/InputNumber.vue";
 import { computed } from "vue";
-import FormFieldShell from "../../components/renderer/FormFieldShell.vue";
+import { useUiToolsLocale } from "../../../i18n/use-locale";
+import FormFieldShell from "../../components/renderer/form-field-shell.vue";
 import { useFieldControl } from "../../composables/use-field-control";
+import { isNumber } from "../../utils/predicate";
+import { resolveFormText } from "../../utils/text";
+import { mergeFormUiClass } from "../../utils/ui";
 const props = defineProps({
-  field: { type: Object, required: true },
+  field: { type: null, required: true },
   path: { type: Array, required: true },
   bare: { type: Boolean, required: false }
 });
-const { form, controlProps, disabled, handleBlur, placeholder } = useFieldControl(
+const { code } = useUiToolsLocale();
+const { fieldProps, form, controlProps, disabled, handleBlur, placeholder } = useFieldControl(
   () => props.field,
-  () => props.path
+  () => props.path,
+  { omit: ["prefix", "suffix", "format", "controls", "mono"] }
 );
 const model = computed({
   get: () => {
     const value = form.getValue(props.path);
-    return typeof value === "number" ? value : void 0;
+    return isNumber(value) ? value : void 0;
   },
   set: (value) => form.setValue(props.path, value ?? null)
 });
+const prefix = computed(() => resolveFormText(fieldProps.value.prefix));
+const suffix = computed(() => resolveFormText(fieldProps.value.suffix));
+const controls = computed(() => fieldProps.value.controls !== false);
+const hasAffix = computed(() => Boolean(prefix.value) || Boolean(suffix.value));
+const inlineAffix = computed(() => hasAffix.value && !controls.value);
+const controlUi = computed(() => ({
+  ...controlProps.value.ui,
+  base: mergeFormUiClass(
+    mergeFormUiClass(
+      controlProps.value.ui?.base,
+      fieldProps.value.mono ? "font-mono tabular-nums" : void 0
+    ),
+    mergeFormUiClass(
+      inlineAffix.value && prefix.value ? "ps-(--nut-form-prefix-width)" : void 0,
+      inlineAffix.value && suffix.value ? "pe-(--nut-form-suffix-width)" : void 0
+    )
+  )
+}));
+const affixStyle = computed(() => ({
+  "--nut-form-prefix-width": `${Math.max(2.25, (prefix.value?.length ?? 0) * 0.6 + 1.5)}rem`,
+  "--nut-form-suffix-width": `${Math.max(2.25, (suffix.value?.length ?? 0) * 0.6 + 1.5)}rem`
+}));
 </script>
 
 <template>
-  <UInputNumber
+  <div
     v-if="bare"
-    v-model="model"
-    v-bind="controlProps"
-    class="w-full"
-    :placeholder="placeholder"
-    :disabled="disabled"
-    :min="field.min"
-    :max="field.max"
-    :step="field.step"
-    @blur="handleBlur"
-  />
-  <FormFieldShell v-else :field="field" :path="path">
+    :class="
+  mergeFormUiClass(
+    'relative flex w-full items-center',
+    hasAffix && !inlineAffix ? 'gap-2' : void 0
+  )
+"
+    :style="affixStyle"
+  >
+    <span
+      v-if="prefix"
+      :class="
+  inlineAffix ? 'pointer-events-none absolute inset-y-0 start-3 z-[1] flex items-center text-sm text-muted' : 'shrink-0 text-sm text-muted'
+"
+      data-form-prefix=""
+    >
+      {{ prefix }}
+    </span>
     <UInputNumber
       v-model="model"
       v-bind="controlProps"
-      class="w-full"
+      class="min-w-0 flex-1"
+      :ui="controlUi"
       :placeholder="placeholder"
       :disabled="disabled"
-      :min="field.min"
-      :max="field.max"
-      :step="field.step"
+      :min="fieldProps.min"
+      :max="fieldProps.max"
+      :step="fieldProps.step"
+      :locale="code"
+      :format-options="fieldProps.format"
+      :increment="controls"
+      :decrement="controls"
       @blur="handleBlur"
     />
+    <span
+      v-if="suffix"
+      :class="
+  inlineAffix ? 'pointer-events-none absolute inset-y-0 end-3 z-[1] flex items-center text-sm text-muted' : 'shrink-0 text-sm text-muted'
+"
+      data-form-suffix=""
+    >
+      {{ suffix }}
+    </span>
+  </div>
+  <FormFieldShell v-else :field="field" :path="path">
+    <div
+      :class="
+  mergeFormUiClass(
+    'relative flex w-full items-center',
+    hasAffix && !inlineAffix ? 'gap-2' : void 0
+  )
+"
+      :style="affixStyle"
+    >
+      <span
+        v-if="prefix"
+        :class="
+  inlineAffix ? 'pointer-events-none absolute inset-y-0 start-3 z-[1] flex items-center text-sm text-muted' : 'shrink-0 text-sm text-muted'
+"
+        data-form-prefix=""
+      >
+        {{ prefix }}
+      </span>
+      <UInputNumber
+        v-model="model"
+        v-bind="controlProps"
+        class="min-w-0 flex-1"
+        :ui="controlUi"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :min="fieldProps.min"
+        :max="fieldProps.max"
+        :step="fieldProps.step"
+        :locale="code"
+        :format-options="fieldProps.format"
+        :increment="controls"
+        :decrement="controls"
+        @blur="handleBlur"
+      />
+      <span
+        v-if="suffix"
+        :class="
+  inlineAffix ? 'pointer-events-none absolute inset-y-0 end-3 z-[1] flex items-center text-sm text-muted' : 'shrink-0 text-sm text-muted'
+"
+        data-form-suffix=""
+      >
+        {{ suffix }}
+      </span>
+    </div>
   </FormFieldShell>
 </template>

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

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

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

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

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

@@ -1,8 +1,15 @@
 import type { FormStatefulFieldBase } from '../../types/field-base.js';
 import type { NullableValue } from '../../types/field-output-utils.js';
-export interface FormNumberField<TContext = {}, TDeps = {}> extends FormStatefulFieldBase<'number', number | null, TContext, TDeps> {
+import type { FormText } from '../../types/utils.js';
+export interface FormNumberProps {
     min?: number;
     max?: number;
     step?: number;
+    prefix?: FormText;
+    suffix?: FormText;
+    format?: Intl.NumberFormatOptions;
+    controls?: boolean;
+    mono?: boolean;
 }
+export type FormNumberField<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>> = FormStatefulFieldBase<'number', number | null, TContext, TDeps, FormNumberProps>;
 export type NumberFieldOutput = number | NullableValue;

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

@@ -1,7 +1,7 @@
 <script setup>
 import UCard from "@nuxt/ui/components/Card.vue";
 import { computed } from "vue";
-import FormFieldRenderer from "../../components/renderer/FormFieldRenderer.vue";
+import FormFieldRenderer from "../../components/renderer/form-field-renderer.vue";
 import { useFormContainerLayout } from "../../composables/use-form-layout";
 import { useFormRuntimeContext } from "../../composables/use-form-runtime";
 import { resolveFormText } from "../../utils/text";
@@ -15,8 +15,8 @@ const title = computed(() => resolveFormText(props.field.label));
 const description = computed(() => resolveFormText(props.field.description));
 const variant = computed(() => props.field.layout?.variant ?? "plain");
 const grid = useFormContainerLayout({
-  layout: () => props.field.layout,
-  formLayout: form.currentLayout
+  formLayout: form.currentLayout,
+  layout: () => props.field.layout
 });
 </script>
 

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

@@ -1,13 +1,13 @@
 export declare const objectFieldKind: {
-    readonly type: "object";
-    readonly state: "passthrough";
-    readonly ui: {
-        readonly label: true;
-        readonly description: true;
-    };
     readonly layout: {
-        readonly item: true;
         readonly container: true;
+        readonly item: true;
     };
+    readonly state: "passthrough";
     readonly transform: true;
+    readonly type: "object";
+    readonly ui: {
+        readonly description: true;
+        readonly label: true;
+    };
 };

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

@@ -1,8 +1,8 @@
 import { defineFormFieldKind } from "../../utils/field-kind.js";
 export const objectFieldKind = defineFormFieldKind({
-  type: "object",
+  layout: { container: true, item: true },
   state: "passthrough",
-  ui: { label: true, description: true },
-  layout: { item: true, container: true },
-  transform: true
+  transform: true,
+  type: "object",
+  ui: { description: true, label: true }
 });

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

@@ -1,6 +1,7 @@
+import type { FormValue } from '../../types/index.js';
 import type { FormContainerFieldBase } from '../../types/field-base.js';
 import type { FormTransformConfig } from '../../types/transform.js';
-export interface FormObjectField<TContext = {}, TDeps = {}> extends FormContainerFieldBase<'object', TContext, TDeps> {
-    transform?: FormTransformConfig<unknown, unknown, TContext, TDeps>;
+export interface FormObjectField<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>> extends FormContainerFieldBase<'object', TContext, TDeps> {
+    transform?: FormTransformConfig<FormValue, FormValue, TContext, TDeps>;
 }
 export type ObjectFieldOutput<TChildren> = TChildren;

package/dist/runtime/form/fields/one-time-code/component.vue

@@ -1,20 +1,32 @@
 <script setup>
 import UPinInput from "@nuxt/ui/components/PinInput.vue";
 import { computed } from "vue";
-import FormFieldShell from "../../components/renderer/FormFieldShell.vue";
+import FormFieldShell from "../../components/renderer/form-field-shell.vue";
 import { useFieldControl } from "../../composables/use-field-control";
+import { isString } from "../../utils/predicate";
 const props = defineProps({
-  field: { type: Object, required: true },
+  field: { type: null, required: true },
   path: { type: Array, required: true }
 });
-const { form, controlProps, disabled, handleBlur, placeholder } = useFieldControl(
+const {
+  fieldProps,
+  form,
+  controlProps,
+  disabled,
+  handleBlur,
+  placeholder: controlPlaceholder
+} = useFieldControl(
   () => props.field,
-  () => props.path
+  () => props.path,
+  { omit: ["inputType"] }
+);
+const placeholder = computed(
+  () => props.field.placeholder === void 0 ? "\xB7" : controlPlaceholder.value
 );
 const model = computed({
   get: () => {
     const value = form.getValue(props.path);
-    return typeof value === "string" ? value.split("") : [];
+    return isString(value) ? [...value] : [];
   },
   set: (value) => form.setValue(props.path, value.join(""))
 });
@@ -26,10 +38,10 @@ const model = computed({
       v-model="model"
       v-bind="controlProps"
       :disabled="disabled"
-      :length="field.length ?? 6"
-      :mask="field.mask"
-      :otp="field.otp ?? true"
-      :type="field.inputType ?? 'text'"
+      :length="fieldProps.length ?? 6"
+      :mask="fieldProps.mask"
+      :otp="fieldProps.otp ?? true"
+      :type="fieldProps.inputType ?? 'text'"
       :placeholder="placeholder"
       @blur="handleBlur"
     />

package/dist/runtime/form/fields/one-time-code/config.d.ts

@@ -1,14 +1,14 @@
 export declare const oneTimeCodeFieldKind: {
-    readonly type: "one-time-code";
+    readonly layout: {
+        readonly item: true;
+    };
     readonly state: "stateful";
+    readonly transform: true;
+    readonly type: "one-time-code";
     readonly ui: {
-        readonly label: true;
         readonly description: true;
         readonly hint: true;
-    };
-    readonly layout: {
-        readonly item: true;
+        readonly label: true;
     };
     readonly validation: true;
-    readonly transform: true;
 };

package/dist/runtime/form/fields/one-time-code/config.js

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

package/dist/runtime/form/fields/one-time-code/types.d.ts

@@ -1,9 +1,10 @@
 import type { FormStatefulFieldBase } from '../../types/field-base.js';
 import type { NullableValue } from '../../types/field-output-utils.js';
-export interface FormOneTimeCodeField<TContext = {}, TDeps = {}> extends FormStatefulFieldBase<'one-time-code', string | null, TContext, TDeps> {
+export interface FormOneTimeCodeProps {
     length?: number;
     mask?: boolean;
     otp?: boolean;
     inputType?: 'text' | 'number';
 }
+export type FormOneTimeCodeField<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>> = FormStatefulFieldBase<'one-time-code', string | null, TContext, TDeps, FormOneTimeCodeProps>;
 export type OneTimeCodeFieldOutput = string | NullableValue;

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

@@ -1,21 +1,43 @@
 <script setup>
+import UButton from "@nuxt/ui/components/Button.vue";
 import UInput from "@nuxt/ui/components/Input.vue";
-import { computed } from "vue";
-import FormFieldShell from "../../components/renderer/FormFieldShell.vue";
+import { computed, ref } from "vue";
+import { useUiToolsLocale } from "../../../i18n/use-locale";
+import FormFieldShell from "../../components/renderer/form-field-shell.vue";
 import { useFieldControl } from "../../composables/use-field-control";
+import { isObject, isString } from "../../utils/predicate";
+import { resolveFormText } from "../../utils/text";
 const props = defineProps({
-  field: { type: Object, required: true },
+  field: { type: null, required: true },
   path: { type: Array, required: true },
   bare: { type: Boolean, required: false }
 });
-const { form, controlProps, disabled, handleBlur, placeholder } = useFieldControl(
+const { t } = useUiToolsLocale();
+const { fieldProps, form, controlProps, controlSize, disabled, handleBlur, placeholder } = useFieldControl(
   () => props.field,
-  () => props.path
+  () => props.path,
+  { omit: ["visibilityToggle"] }
 );
+const visible = ref(false);
+const visibilityToggleEnabled = computed(() => fieldProps.value.visibilityToggle !== false);
+const visibilityToggleConfig = computed(
+  () => isPasswordVisibilityConfig(fieldProps.value.visibilityToggle) ? fieldProps.value.visibilityToggle : void 0
+);
+const inputType = computed(() => visible.value ? "text" : "password");
+const visibilityLabel = computed(() => {
+  const configured = visible.value ? visibilityToggleConfig.value?.hideLabel : visibilityToggleConfig.value?.showLabel;
+  return resolveFormText(configured) ?? t(visible.value ? "form.fields.password.hide" : "form.fields.password.show");
+});
+const visibilityIcon = computed(
+  () => visible.value ? visibilityToggleConfig.value?.hideIcon ?? "i-lucide-eye-off" : visibilityToggleConfig.value?.showIcon ?? "i-lucide-eye"
+);
+function isPasswordVisibilityConfig(value) {
+  return isObject(value);
+}
 const model = computed({
   get: () => {
     const value = form.getValue(props.path);
-    return typeof value === "string" ? value : void 0;
+    return isString(value) ? value : void 0;
   },
   set: (value) => form.setValue(props.path, value ?? null)
 });
@@ -27,20 +49,54 @@ const model = computed({
     v-model="model"
     v-bind="controlProps"
     class="w-full"
-    type="password"
+    :type="inputType"
     :placeholder="placeholder"
     :disabled="disabled"
     @blur="handleBlur"
-  />
+  >
+    <template v-if="visibilityToggleEnabled" #trailing>
+      <UButton
+        type="button"
+        color="neutral"
+        variant="link"
+        :size="controlSize"
+        :icon="visibilityIcon"
+        :aria-label="visibilityLabel"
+        :title="visibilityLabel"
+        :aria-pressed="visible"
+        :disabled="disabled"
+        :ui="{ base: 'p-0' }"
+        @mousedown.prevent
+        @click="visible = !visible"
+      />
+    </template>
+  </UInput>
   <FormFieldShell v-else :field="field" :path="path">
     <UInput
       v-model="model"
       v-bind="controlProps"
       class="w-full"
-      type="password"
+      :type="inputType"
       :placeholder="placeholder"
       :disabled="disabled"
       @blur="handleBlur"
-    />
+    >
+      <template v-if="visibilityToggleEnabled" #trailing>
+        <UButton
+          type="button"
+          color="neutral"
+          variant="link"
+          :size="controlSize"
+          :icon="visibilityIcon"
+          :aria-label="visibilityLabel"
+          :title="visibilityLabel"
+          :aria-pressed="visible"
+          :disabled="disabled"
+          :ui="{ base: 'p-0' }"
+          @mousedown.prevent
+          @click="visible = !visible"
+        />
+      </template>
+    </UInput>
   </FormFieldShell>
 </template>

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

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

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

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

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

@@ -1,5 +1,14 @@
 import type { FormStatefulFieldBase } from '../../types/field-base.js';
 import type { NullableValue } from '../../types/field-output-utils.js';
-export interface FormPasswordField<TContext = {}, TDeps = {}> extends FormStatefulFieldBase<'password', string | null, TContext, TDeps> {
+import type { FormText } from '../../types/utils.js';
+export interface FormPasswordVisibilityToggle {
+    showIcon?: string;
+    hideIcon?: string;
+    showLabel?: FormText;
+    hideLabel?: FormText;
 }
+export interface FormPasswordProps {
+    visibilityToggle?: boolean | FormPasswordVisibilityToggle;
+}
+export type FormPasswordField<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>> = FormStatefulFieldBase<'password', string | null, TContext, TDeps, FormPasswordProps>;
 export type PasswordFieldOutput = string | NullableValue;