@xleddyl/443-components-vue 0.2.3 → 0.4.0

package/dist/composables/useField.mjs

@@ -1,25 +1,56 @@
-import { computed, inject, toValue } from "vue";
-import { FIELD_KEY } from "../internal/keys.mjs";
+import { computed, getCurrentScope, inject, onScopeDispose, toValue, watch } from "vue";
+import { FIELD_KEY, FIELD_ROLE_KEY } from "../internal/keys.mjs";
 export function useField() {
   return inject(FIELD_KEY, null);
 }
 export function useFieldControl(options = {}) {
-  const field = useField();
-  const id = computed(() => toValue(options.id) ?? field?.id);
-  const invalid = computed(() => Boolean(toValue(options.invalid) ?? field?.invalid.value));
-  const required = computed(() => Boolean(toValue(options.required) || field?.required.value));
-  const disabled = computed(() => Boolean(toValue(options.disabled) || field?.disabled.value));
+  const parent = useField();
+  const inheritedRole = inject(FIELD_ROLE_KEY, "primary");
+  const auxiliary = computed(() => (toValue(options.role) ?? inheritedRole) === "auxiliary");
+  const field = computed(() => auxiliary.value ? null : parent);
+  const id = computed(() => toValue(options.id) ?? field.value?.id);
+  const invalid = computed(() => Boolean(toValue(options.invalid) ?? field.value?.invalid.value));
+  const required = computed(
+    () => Boolean(toValue(options.required) || field.value?.required.value)
+  );
+  const disabled = computed(() => Boolean(toValue(options.disabled) || parent?.disabled.value));
   const describedBy = computed(() => {
-    const ids = [toValue(options.describedBy), field?.describedBy.value].filter(Boolean);
+    const ids = [toValue(options.describedBy), field.value?.describedBy.value].filter(Boolean);
     return ids.length ? ids.join(" ") : void 0;
   });
   const attrs = computed(() => ({
     id: id.value,
-    name: field?.name.value,
+    name: field.value?.name.value,
     "aria-invalid": invalid.value ? "true" : void 0,
     "aria-describedby": describedBy.value,
     "aria-required": required.value ? "true" : void 0,
     disabled: disabled.value || void 0
   }));
-  return { field, id, invalid, required, disabled, describedBy, attrs };
+  const source = {};
+  const setControlError = (message) => parent?.setControlError(message || void 0, source);
+  if (parent && getCurrentScope()) {
+    if (parent.setLabelable && options.labelable !== void 0)
+      watch(
+        () => auxiliary.value ? void 0 : toValue(options.labelable),
+        (labelable) => parent.setLabelable?.(labelable, source),
+        { immediate: true }
+      );
+    onScopeDispose(() => {
+      parent.setControlError(void 0, source);
+      parent.setLabelable?.(void 0, source);
+    });
+  }
+  return {
+    get field() {
+      return field.value;
+    },
+    id,
+    invalid,
+    required,
+    disabled,
+    describedBy,
+    attrs,
+    auxiliary,
+    setControlError
+  };
 }

package/dist/composables/useFieldBoundary.d.ts

@@ -0,0 +1,2 @@
+export declare function provideFieldBoundary(): void;
+export declare function provideAuxiliaryControls(): void;

package/dist/composables/useFieldBoundary.mjs

@@ -0,0 +1,9 @@
+import { provide } from "vue";
+import { FIELD_KEY, FIELD_ROLE_KEY } from "../internal/keys.mjs";
+export function provideFieldBoundary() {
+  provide(FIELD_KEY, null);
+  provide(FIELD_ROLE_KEY, "primary");
+}
+export function provideAuxiliaryControls() {
+  provide(FIELD_ROLE_KEY, "auxiliary");
+}

package/dist/composables/useFileDrop.d.ts

@@ -1,8 +1,28 @@
 import type { MaybeRefOrGetter } from 'vue';
 export interface UseFileDropOptions {
     disabled?: MaybeRefOrGetter<boolean | undefined>;
+    ignore?: (event: DragEvent) => boolean;
     onDrop: (files: File[], event: DragEvent) => void;
 }
+export interface DroppedFile {
+    file: File;
+    path: string;
+}
+export interface DroppedTree {
+    files: DroppedFile[];
+    directories: string[];
+}
+export interface ReadDroppedFilesOptions {
+    directories?: boolean;
+    skipHidden?: boolean;
+}
+export declare function readDroppedFiles(transfer: DataTransfer | null | undefined, options: ReadDroppedFilesOptions & {
+    directories: true;
+}): Promise<DroppedTree>;
+export declare function readDroppedFiles(transfer: DataTransfer | null | undefined, options?: ReadDroppedFilesOptions & {
+    directories?: false;
+}): Promise<DroppedFile[]>;
 export declare function useFileDrop(target: MaybeRefOrGetter<HTMLElement | null | undefined>, options: UseFileDropOptions): {
     over: import("vue").Ref<boolean, boolean>;
+    reset: () => void;
 };

package/dist/composables/useFileDrop.mjs

@@ -1,35 +1,142 @@
 import { onScopeDispose, ref, toValue, watch } from "vue";
+import { filesTree, isHiddenName } from "../internal/forms/files.mjs";
+const claimedEvents = /* @__PURE__ */ new WeakSet();
 function carriesFiles(event) {
   return Array.from(event.dataTransfer?.types ?? []).includes("Files");
 }
+function readFileEntry(entry) {
+  return new Promise((resolve, reject) => entry.file(resolve, reject));
+}
+function readDirectoryBatch(reader) {
+  return new Promise((resolve, reject) => reader.readEntries(resolve, reject));
+}
+async function walkEntry(entry, prefix, tree, skipHidden) {
+  if (skipHidden && isHiddenName(entry.name)) return;
+  const path = `${prefix}${entry.name}`;
+  if (entry.isFile) {
+    try {
+      const file = await readFileEntry(entry);
+      tree.files.push({ file, path });
+    } catch {
+      return;
+    }
+    return;
+  }
+  if (!entry.isDirectory) return;
+  tree.directories.push(path);
+  const reader = entry.createReader();
+  const children = [];
+  for (; ; ) {
+    let batch;
+    try {
+      batch = await readDirectoryBatch(reader);
+    } catch {
+      break;
+    }
+    if (!batch.length) break;
+    children.push(...batch);
+  }
+  for (const child of children) await walkEntry(child, `${path}/`, tree, skipHidden);
+}
+async function readDroppedTree(transfer, skipHidden) {
+  if (!transfer) return { files: [], directories: [] };
+  const pending = [];
+  for (const item of Array.from(transfer.items ?? [])) {
+    if (item.kind !== "file") continue;
+    const entry = typeof item.webkitGetAsEntry === "function" ? item.webkitGetAsEntry() : null;
+    const fallback = entry ? null : item.getAsFile();
+    if (entry) pending.push(entry);
+    else if (fallback) pending.push(fallback);
+  }
+  if (!pending.length) return filesTree(Array.from(transfer.files ?? []), { skipHidden });
+  const tree = { files: [], directories: [] };
+  for (const entry of pending) {
+    if (!(entry instanceof File)) await walkEntry(entry, "", tree, skipHidden);
+    else if (!skipHidden || !isHiddenName(entry.name))
+      tree.files.push({ file: entry, path: entry.name });
+  }
+  return tree;
+}
+export async function readDroppedFiles(transfer, options = {}) {
+  const tree = await readDroppedTree(transfer, Boolean(options.skipHidden));
+  return options.directories ? tree : tree.files;
+}
 export function useFileDrop(target, options) {
   const over = ref(false);
   let depth = 0;
+  let covered = false;
+  let watching = false;
   function isDisabled() {
     return Boolean(toValue(options.disabled));
   }
+  function isIgnored(event) {
+    return claimedEvents.has(event) || Boolean(options.ignore?.(event));
+  }
+  function sync() {
+    over.value = depth > 0 && !covered;
+  }
+  function watchWindow(enable) {
+    if (typeof window === "undefined" || watching === enable) return;
+    watching = enable;
+    const method = enable ? "addEventListener" : "removeEventListener";
+    window[method]("drop", reset, true);
+    window[method]("dragend", reset, true);
+  }
+  function reset() {
+    depth = 0;
+    covered = false;
+    over.value = false;
+    watchWindow(false);
+  }
+  function track(event) {
+    covered = isIgnored(event);
+    if (!covered) claimedEvents.add(event);
+    sync();
+  }
   function onDragEnter(event) {
     if (!carriesFiles(event) || isDisabled()) return;
-    event.preventDefault();
     depth++;
-    over.value = true;
+    watchWindow(true);
+    if (isIgnored(event)) {
+      covered = true;
+      sync();
+      return;
+    }
+    event.preventDefault();
+    track(event);
   }
   function onDragOver(event) {
     if (!carriesFiles(event)) return;
+    if (isDisabled()) {
+      if (!isIgnored(event)) {
+        event.preventDefault();
+        if (event.dataTransfer) event.dataTransfer.dropEffect = "none";
+      }
+      return;
+    }
+    if (isIgnored(event)) {
+      covered = true;
+      sync();
+      return;
+    }
     event.preventDefault();
-    if (event.dataTransfer) event.dataTransfer.dropEffect = isDisabled() ? "none" : "copy";
+    if (event.dataTransfer) event.dataTransfer.dropEffect = "copy";
+    track(event);
   }
   function onDragLeave(event) {
     if (!carriesFiles(event)) return;
     depth = Math.max(0, depth - 1);
-    if (depth === 0) over.value = false;
+    if (depth === 0) reset();
+    else sync();
   }
   function onDropEvent(event) {
     if (!carriesFiles(event)) return;
+    const ignored = isIgnored(event);
+    reset();
+    if (ignored) return;
     event.preventDefault();
-    depth = 0;
-    over.value = false;
     if (isDisabled()) return;
+    claimedEvents.add(event);
     options.onDrop(Array.from(event.dataTransfer?.files ?? []), event);
   }
   const handlers = {
@@ -57,6 +164,7 @@ export function useFileDrop(target, options) {
   onScopeDispose(() => {
     stop();
     bind(toValue(target), false);
+    watchWindow(false);
   }, true);
-  return { over };
+  return { over, reset };
 }

package/dist/composables/useForm.d.ts

@@ -1,9 +1,9 @@
-import type { ComputedRef, Ref, UnwrapRef } from 'vue';
-import type { StandardSchemaV1 } from '../internal/forms/standard-schema';
-export type { StandardSchemaIssue, StandardSchemaResult, StandardSchemaV1, } from '../internal/forms/standard-schema';
+import type { ComputedRef, MaybeRefOrGetter, Ref, UnwrapRef } from 'vue';
+import type { IssueKeyResolver, StandardSchemaIssue, StandardSchemaV1 } from '../internal/forms/standard-schema';
+export type { IssuePath as FormIssuePath, StandardSchemaIssue, StandardSchemaResult, StandardSchemaV1, } from '../internal/forms/standard-schema';
 export type FieldValidationResult = string | undefined | null | boolean;
 export interface FieldDefinition<T = unknown> {
-    initial: T | (() => T);
+    initial?: T | (() => T);
     label?: string;
     required?: boolean;
     min?: number;
@@ -37,17 +37,29 @@ export interface FormMessages {
     invalid: (context: FormMessageContext) => string;
 }
 export type FormValidationTrigger = 'submit' | 'blur' | 'input';
-export interface UseFormOptions<S extends FormSchema> {
-    schema: S;
-    validator?: StandardSchemaV1;
+export type FormIssueKey = IssueKeyResolver;
+export type FormMessageMap = Record<string, string | undefined>;
+export type FormWarningsResult = Record<string, string | undefined> | ReadonlyArray<StandardSchemaIssue> | null | undefined;
+export type FormWarningsFunction<V> = (values: V) => FormWarningsResult | Promise<FormWarningsResult>;
+export type FormWarnings<V> = StandardSchemaV1 | Readonly<Ref<StandardSchemaV1 | undefined>> | FormWarningsFunction<V>;
+export type FormPath<V> = (keyof V & string) | (string & {});
+export interface UseFormOptions<S extends FormSchema = FormSchema, V extends object = FormValues<S>> {
+    schema?: S;
+    values?: MaybeRefOrGetter<V>;
+    validator?: MaybeRefOrGetter<StandardSchemaV1 | undefined>;
+    warnings?: FormWarnings<V>;
+    issueKey?: FormIssueKey;
     messages?: Partial<FormMessages>;
     validateOn?: FormValidationTrigger;
-    onSubmit?: (values: FormValues<S>) => unknown;
+    onSubmit?: (values: V) => unknown;
     onInvalid?: (errors: FormErrors<S>) => unknown;
 }
-export type FormErrors<S extends FormSchema> = Partial<Record<keyof S & string, string>>;
+export type FormErrors<S extends FormSchema = FormSchema> = Partial<Record<keyof S & string, string>> & FormMessageMap;
 export interface FormContext {
-    errors: Readonly<Record<string, string | undefined>>;
+    errors: Readonly<FormMessageMap>;
+    warnings?: Readonly<FormMessageMap>;
+    rootErrors?: Readonly<Ref<readonly string[]>>;
+    rootWarnings?: Readonly<Ref<readonly string[]>>;
     submitCount: Readonly<Ref<number>>;
     submitting: Readonly<Ref<boolean>>;
     touch: (name: string) => void;
@@ -55,26 +67,31 @@ export interface FormContext {
     submit: () => Promise<boolean>;
     reset: () => void;
 }
-export interface UseFormReturn<S extends FormSchema> extends FormContext {
+export interface UseFormReturn<S extends FormSchema = FormSchema, V extends object = FormValues<S>> extends FormContext {
     schema: S;
-    values: UnwrapRef<FormValues<S>>;
+    values: UnwrapRef<V>;
     errors: FormErrors<S>;
-    touched: Partial<Record<keyof S & string, boolean>>;
+    warnings: Readonly<FormMessageMap>;
+    rootErrors: Readonly<Ref<readonly string[]>>;
+    rootWarnings: Readonly<Ref<readonly string[]>>;
+    touched: Partial<Record<keyof V & string, boolean>> & Record<string, boolean | undefined>;
     dirty: ComputedRef<boolean>;
-    dirtyFields: ComputedRef<(keyof S & string)[]>;
+    dirtyFields: ComputedRef<(keyof V & string)[]>;
     valid: ComputedRef<boolean>;
     submitCount: Ref<number>;
     submitting: Ref<boolean>;
-    isDirty: (name: keyof S & string) => boolean;
+    isDirty: (name: keyof V & string) => boolean;
     validate: () => Promise<boolean>;
-    validateField: (name: keyof S & string) => Promise<boolean>;
-    setError: (name: keyof S & string, message: string | undefined) => void;
+    validateSync: () => boolean;
+    validateField: (name: keyof V & string) => Promise<boolean>;
+    setError: (name: FormPath<V>, message: string | undefined) => void;
     setErrors: (errors: FormErrors<S>) => void;
     clearErrors: () => void;
     touch: (name: string) => void;
-    reset: (values?: Partial<FormValues<S>>) => void;
+    reset: (values?: Partial<V>) => void;
     submit: () => Promise<boolean>;
 }
 export declare function isEmptyValue(value: unknown): boolean;
-export declare function useForm<S extends FormSchema>(options: UseFormOptions<S>): UseFormReturn<S>;
+export declare function useForm<S extends FormSchema = FormSchema, V extends object = FormValues<S>>(options: UseFormOptions<S, V>): UseFormReturn<S, V>;
 export declare function useFormContext(): FormContext | null;
+export declare function provideForm(form: FormContext): FormContext;