nuxt-ui-tools 0.1.0

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

@@ -0,0 +1,34 @@
+<script setup>
+import UTextarea from "@nuxt/ui/components/Textarea.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, placeholder } = useFieldControl(
+  () => props.field,
+  () => props.path
+);
+const model = computed({
+  get: () => {
+    const value = form.getValue(props.path);
+    return typeof value === "string" ? value : void 0;
+  },
+  set: (value) => form.setValue(props.path, value ?? null)
+});
+</script>
+
+<template>
+  <FormFieldShell :field="field" :path="path">
+    <UTextarea
+      v-model="model"
+      v-bind="controlProps"
+      class="w-full"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      @blur="handleBlur"
+    />
+  </FormFieldShell>
+</template>

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

@@ -0,0 +1,8 @@
+import type { FormTextareaField } from '../../types/index.js';
+type __VLS_Props = {
+    field: FormTextareaField;
+    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/textarea/config.d.ts

@@ -0,0 +1,14 @@
+export declare const textareaFieldKind: {
+    readonly type: "textarea";
+    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/textarea/config.js

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

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

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

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

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

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

@@ -0,0 +1,5 @@
+import type { FormStatefulFieldBase } from '../../types/field-base.js';
+import type { NullableValue } from '../../types/field-output-utils.js';
+export interface FormTextareaField<TContext = {}, TDeps = {}> extends FormStatefulFieldBase<'textarea', string | null, TContext, TDeps> {
+}
+export type TextareaFieldOutput = string | NullableValue;

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

@@ -0,0 +1,8 @@
+import type { FormTimeField } from '../../types/index.js';
+type __VLS_Props = {
+    field: FormTimeField;
+    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/time/component.vue

@@ -0,0 +1,218 @@
+<script setup>
+import UButton from "@nuxt/ui/components/Button.vue";
+import UInput from "@nuxt/ui/components/Input.vue";
+import UPopover from "@nuxt/ui/components/Popover.vue";
+import USelect from "@nuxt/ui/components/Select.vue";
+import { computed, ref, watch } 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, placeholder } = useFieldControl(
+  () => props.field,
+  () => props.path
+);
+const open = ref(false);
+const inputFocused = ref(false);
+const inputValue = ref("");
+const model = computed({
+  get: () => {
+    const value = form.getValue(props.path);
+    return typeof value === "string" ? value : void 0;
+  },
+  set: (value) => form.setValue(props.path, value || null)
+});
+const minuteStep = computed(() => resolveMinuteStep(props.field.minuteStep, props.field.step));
+const hours = computed(() => Array.from({ length: 24 }, (_item, hour) => padTimePart(hour)));
+const minutes = computed(() => {
+  const step = minuteStep.value;
+  const values = [];
+  for (let minute = 0; minute < 60; minute += step) values.push(padTimePart(minute));
+  return values;
+});
+const selectedParts = computed(() => parseTime(model.value));
+const selectedHour = computed({
+  get: () => selectedParts.value?.hour,
+  set: (value) => {
+    if (typeof value === "string") selectPart("hour", value);
+  }
+});
+const selectedMinute = computed({
+  get: () => selectedParts.value?.minute,
+  set: (value) => {
+    if (typeof value === "string") selectPart("minute", value);
+  }
+});
+watch(
+  model,
+  (value) => {
+    if (!inputFocused.value) inputValue.value = value ?? "";
+  },
+  { immediate: true }
+);
+function handleFocus() {
+  inputFocused.value = true;
+  inputValue.value = model.value ?? "";
+  open.value = true;
+}
+function handleInput(value) {
+  inputValue.value = maskTime(String(value));
+}
+async function handleInputBlur() {
+  inputFocused.value = false;
+  const parsed = normalizeTime(inputValue.value);
+  if (parsed) model.value = parsed;
+  inputValue.value = model.value ?? "";
+  await handleBlur();
+}
+function selectPart(type, value) {
+  const current = parseTime(model.value) ?? { hour: "09", minute: "00" };
+  const next = type === "hour" ? `${value}:${current.minute}` : `${current.hour}:${value}`;
+  model.value = next;
+  inputValue.value = next;
+}
+function selectTime(value) {
+  model.value = value;
+  inputValue.value = value;
+}
+async function clearTime() {
+  model.value = void 0;
+  inputValue.value = "";
+  await handleBlur();
+}
+function resolveMinuteStep(configuredMinuteStep, secondStep) {
+  if (typeof configuredMinuteStep === "number" && configuredMinuteStep > 0)
+    return Math.min(60, Math.max(1, Math.round(configuredMinuteStep)));
+  if (typeof secondStep === "number" && secondStep >= 60)
+    return Math.min(60, Math.max(1, Math.round(secondStep / 60)));
+  return 5;
+}
+function maskTime(value) {
+  const digits = value.replace(/\D/g, "").slice(0, 4);
+  if (digits.length <= 2) return digits;
+  return `${digits.slice(0, 2)}:${digits.slice(2)}`;
+}
+function normalizeTime(value) {
+  const parts = parseTime(value);
+  if (!parts) return void 0;
+  return `${parts.hour}:${parts.minute}`;
+}
+function parseTime(value) {
+  const match = /^(\d{1,2})(?::?(\d{1,2}))?$/.exec(value ?? "");
+  if (!match) return void 0;
+  const hour = Number(match[1]);
+  const minute = Number(match[2] ?? 0);
+  if (hour < 0 || hour > 23 || minute < 0 || minute > 59) return void 0;
+  return {
+    hour: padTimePart(hour),
+    minute: padTimePart(minute)
+  };
+}
+function padTimePart(value) {
+  return String(value).padStart(2, "0");
+}
+</script>
+
+<template>
+  <FormFieldShell :field="field" :path="path">
+    <UPopover
+      v-model:open="open"
+      :content="{ side: 'bottom', sideOffset: 8, collisionPadding: 12, avoidCollisions: true }"
+    >
+      <template #anchor>
+        <UInput
+          :model-value="inputValue"
+          v-bind="controlProps"
+          class="w-full"
+          inputmode="numeric"
+          leading-icon="i-lucide-clock"
+          :placeholder="placeholder ?? 'HH:mm'"
+          :disabled="disabled"
+          @update:model-value="handleInput"
+          @focus="handleFocus"
+          @click="handleFocus"
+          @blur="handleInputBlur"
+        >
+          <template v-if="field.clearable === true && model" #trailing>
+            <UButton
+              icon="i-lucide-x"
+              color="neutral"
+              variant="ghost"
+              size="xs"
+              :disabled="disabled"
+              aria-label="Clear time"
+              @mousedown.prevent
+              @click="clearTime"
+            />
+          </template>
+        </UInput>
+      </template>
+
+      <template #content>
+        <div class="grid w-72 gap-3 p-1">
+          <div class="grid grid-cols-2 gap-2">
+            <USelect
+              v-model="selectedHour"
+              :items="hours"
+              class="min-w-0"
+              size="sm"
+              placeholder="Hour"
+              :portal="false"
+            />
+            <USelect
+              v-model="selectedMinute"
+              :items="minutes"
+              class="min-w-0"
+              size="sm"
+              placeholder="Minute"
+              :portal="false"
+            />
+          </div>
+          <div class="grid grid-cols-4 gap-1">
+            <UButton
+              size="xs"
+              variant="soft"
+              color="neutral"
+              block
+              @mousedown.prevent
+              @click="selectTime('09:00')"
+              >09:00</UButton
+            >
+            <UButton
+              size="xs"
+              variant="soft"
+              color="neutral"
+              block
+              @mousedown.prevent
+              @click="selectTime('12:00')"
+              >12:00</UButton
+            >
+            <UButton
+              size="xs"
+              variant="soft"
+              color="neutral"
+              block
+              @mousedown.prevent
+              @click="selectTime('14:00')"
+              >14:00</UButton
+            >
+            <UButton
+              size="xs"
+              variant="soft"
+              color="neutral"
+              block
+              @mousedown.prevent
+              @click="selectTime('18:00')"
+              >18:00</UButton
+            >
+          </div>
+          <p class="text-xs text-muted">
+            {{ model ?? "HH:mm" }}
+          </p>
+        </div>
+      </template>
+    </UPopover>
+  </FormFieldShell>
+</template>

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

@@ -0,0 +1,8 @@
+import type { FormTimeField } from '../../types/index.js';
+type __VLS_Props = {
+    field: FormTimeField;
+    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/time/config.d.ts

@@ -0,0 +1,14 @@
+export declare const timeFieldKind: {
+    readonly type: "time";
+    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/time/config.js

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

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

@@ -0,0 +1,2 @@
+export { timeFieldKind } from './config.js';
+export type { FormTimeField, TimeFieldOutput } from './types.js';

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

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

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

@@ -0,0 +1,10 @@
+import type { FormStatefulFieldBase } from '../../types/field-base.js';
+import type { NullableValue } from '../../types/field-output-utils.js';
+export interface FormTimeField<TContext = {}, TDeps = {}> extends FormStatefulFieldBase<'time', string | null, TContext, TDeps> {
+    min?: string;
+    max?: string;
+    step?: number;
+    minuteStep?: number;
+    clearable?: boolean;
+}
+export type TimeFieldOutput = string | NullableValue;

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

@@ -0,0 +1,17 @@
+export declare const treeFieldKind: {
+    readonly type: "tree";
+    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/tree/config.js

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

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

@@ -0,0 +1 @@
+export type { FormHierarchyOption, FormTreeField, HierarchyFieldOutput as TreeFieldOutput, } from '../hierarchy/types.js';

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

@@ -0,0 +1,17 @@
+export declare const treeSelectFieldKind: {
+    readonly type: "tree-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/tree-select/config.js

@@ -0,0 +1,10 @@
+import { defineFormFieldKind } from "../../utils/field-kind.js";
+export const treeSelectFieldKind = defineFormFieldKind({
+  type: "tree-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/tree-select/types.d.ts

@@ -0,0 +1 @@
+export type { FormHierarchyOption, FormTreeSelectField, HierarchyFieldOutput as TreeSelectFieldOutput, } from '../hierarchy/types.js';

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

@@ -0,0 +1,8 @@
+import type { FormUploadField } from '../../types/index.js';
+type __VLS_Props = {
+    field: FormUploadField;
+    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/upload/component.vue

@@ -0,0 +1,132 @@
+<script setup>
+import UAlert from "@nuxt/ui/components/Alert.vue";
+import UButton from "@nuxt/ui/components/Button.vue";
+import UFileUpload from "@nuxt/ui/components/FileUpload.vue";
+import { computed, onScopeDispose, 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, params } = useFieldControl(
+  () => props.field,
+  () => props.path
+);
+const selectedFiles = ref(null);
+const uploadPending = ref(false);
+const uploadError = ref(null);
+const uploadRun = ref(0);
+const uploadedValue = computed(() => {
+  const value = form.getValue(props.path);
+  if (typeof value === "string" || value === null) return value;
+  if (Array.isArray(value) && value.every((item) => typeof item === "string")) return value;
+  if (Array.isArray(value) && value.every(isFormObject)) return value;
+  return isFormObject(value) ? value : null;
+});
+const files = computed(() => {
+  if (Array.isArray(selectedFiles.value)) return selectedFiles.value;
+  return selectedFiles.value ? [selectedFiles.value] : [];
+});
+async function uploadFiles() {
+  const run = uploadRun.value + 1;
+  uploadRun.value = run;
+  uploadError.value = null;
+  if (!files.value.length) return;
+  uploadPending.value = true;
+  try {
+    const value = await props.field.upload.handler({
+      ...params.value,
+      files: files.value
+    });
+    if (uploadRun.value !== run) return;
+    form.setValue(props.path, value);
+    selectedFiles.value = null;
+  } catch (error) {
+    if (uploadRun.value !== run) return;
+    uploadError.value = error instanceof Error ? error.message : "Upload failed.";
+  } finally {
+    if (uploadRun.value === run) uploadPending.value = false;
+  }
+}
+async function removeUpload(value) {
+  uploadPending.value = true;
+  try {
+    await props.field.upload.onDelete?.({
+      ...params.value,
+      value: typeof value === "undefined" ? uploadedValue.value : value
+    });
+    form.setValue(props.path, null);
+    selectedFiles.value = null;
+  } finally {
+    uploadPending.value = false;
+  }
+}
+async function cancelUpload() {
+  uploadRun.value += 1;
+  uploadPending.value = false;
+}
+async function retryUpload() {
+  await uploadFiles();
+}
+const unregisterUpload = form.registerFieldUpload(props.path, {
+  start: uploadFiles,
+  cancel: cancelUpload,
+  retry: retryUpload,
+  remove: removeUpload
+});
+onScopeDispose(unregisterUpload);
+function handleFileChange() {
+  void handleBlur();
+  if (props.field.autoUpload ?? false) void uploadFiles();
+}
+function isFormObject(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+</script>
+
+<template>
+  <FormFieldShell :field="field" :path="path">
+    <div class="grid gap-3">
+      <UFileUpload
+        v-model="selectedFiles"
+        v-bind="controlProps"
+        class="w-full"
+        :accept="field.accept"
+        :multiple="field.multiple"
+        :disabled="disabled || uploadPending"
+        @change="handleFileChange"
+      />
+
+      <div class="flex flex-wrap items-center gap-2">
+        <UButton
+          icon="i-lucide-upload"
+          :loading="uploadPending"
+          :disabled="disabled || !files.length"
+          @click="uploadFiles"
+        >
+          Upload
+        </UButton>
+        <UButton
+          v-if="uploadedValue"
+          icon="i-lucide-trash-2"
+          color="neutral"
+          variant="soft"
+          :loading="uploadPending"
+          :disabled="disabled"
+          @click="removeUpload"
+        >
+          Remove
+        </UButton>
+      </div>
+
+      <UAlert
+        v-if="uploadError"
+        color="error"
+        variant="soft"
+        icon="i-lucide-circle-alert"
+        :description="uploadError"
+      />
+    </div>
+  </FormFieldShell>
+</template>

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

@@ -0,0 +1,8 @@
+import type { FormUploadField } from '../../types/index.js';
+type __VLS_Props = {
+    field: FormUploadField;
+    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/upload/config.d.ts

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

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

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

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

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

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

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

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

@@ -0,0 +1,28 @@
+import type { FormFieldCallbackParams } from '../../types/callbacks.js';
+import type { FormStatefulFieldBase } from '../../types/field-base.js';
+import type { NullableValue } from '../../types/field-output-utils.js';
+import type { FormObject } from '../../types/utils.js';
+export interface FormUploadCallbackParams<TContext = {}, TDeps = {}> extends FormFieldCallbackParams<TContext, TDeps> {
+    files: readonly File[];
+}
+export type FormUploadHandler<TContext = {}, TDeps = {}> = (params: FormUploadCallbackParams<TContext, TDeps>) => Promise<string | FormObject | readonly string[] | readonly FormObject[] | null>;
+export interface FormUploadDeleteParams<TContext = {}, TDeps = {}> extends FormFieldCallbackParams<TContext, TDeps> {
+    value: unknown;
+}
+export interface FormUploadField<TContext = {}, TDeps = {}> extends FormStatefulFieldBase<'upload', string | FormObject | readonly string[] | readonly FormObject[] | null, TContext, TDeps> {
+    output: 'url' | 'object';
+    multiple?: boolean;
+    accept?: string;
+    autoUpload?: boolean;
+    upload: {
+        handler: FormUploadHandler<TContext, TDeps>;
+        onDelete?: (params: FormUploadDeleteParams<TContext, TDeps>) => Promise<void> | void;
+    };
+}
+export type UploadFieldOutput<TField> = TField extends {
+    output: 'object';
+} ? TField extends {
+    multiple: true;
+} ? readonly FormObject[] | NullableValue : FormObject | NullableValue : TField extends {
+    multiple: true;
+} ? readonly string[] | NullableValue : string | NullableValue;