@ui-sdk/vue 0.0.0-stage → 0.1.0-beta.1

package/dist/field.js

@@ -0,0 +1,240 @@
+// src/field.ts
+import {
+  fieldGroup as fieldGroupPrimitive,
+  field as fieldPrimitive,
+  fieldSet as fieldSetPrimitive
+} from "@ui-sdk/core/field";
+import {
+  checkFieldOutside,
+  fieldOutsideAttrs,
+  fieldOutsideErrorShown,
+  fieldOutsideState
+} from "@ui-sdk/core/renderer";
+import {
+  defineComponent,
+  inject,
+  provide,
+  useAttrs,
+  useId,
+  useSlots
+} from "vue";
+import { slotContent } from "./children.js";
+import { withElement } from "./create-parts.js";
+import {
+  optionalBoolean,
+  renderElement,
+  usePart,
+  usePrimitive,
+  useScope
+} from "./use-primitive.js";
+import { FieldKey } from "./field-context.js";
+import { useFieldControl } from "./field-context.js";
+var DescribedKey = /* @__PURE__ */ Symbol("field-described");
+var outsideRefs = {
+  label: (el) => checkFieldOutside(el, "label"),
+  control: (el) => checkFieldOutside(el, "control")
+};
+function useOutside(slot, element, shown = () => true) {
+  const attrs = useAttrs();
+  const slots = useSlots();
+  const ref = outsideRefs[slot];
+  return () => {
+    if (!shown()) {
+      return null;
+    }
+    const props = { ...fieldOutsideAttrs(slot), ...attrs, ...ref && { ref } };
+    return renderElement(props, slots, fieldOutsideState, element);
+  };
+}
+function useIdProp() {
+  const attrs = useAttrs();
+  return () => ({ id: attrs.id });
+}
+var Field = withElement(
+  "div",
+  defineComponent({
+    name: "Field",
+    inheritAttrs: false,
+    props: {
+      name: String,
+      disabled: optionalBoolean,
+      invalid: optionalBoolean,
+      debug: optionalBoolean
+    },
+    slots: Object,
+    setup(props) {
+      const field = usePrimitive(fieldPrimitive, () => ({
+        name: props.name,
+        disabled: props.disabled,
+        invalid: props.invalid,
+        debug: props.debug
+      }));
+      const context = {
+        ...field,
+        name: () => props.name,
+        disabled: () => props.disabled
+      };
+      provide(FieldKey, context);
+      provide(DescribedKey, context);
+      return usePart(field, "root");
+    }
+  })
+);
+var FieldLabel = withElement(
+  "label",
+  defineComponent({
+    name: "FieldLabel",
+    inheritAttrs: false,
+    slots: Object,
+    setup() {
+      const field = inject(FieldKey, null);
+      if (!field) {
+        return useOutside("label", { tag: "label" });
+      }
+      return usePart(field, "label", useIdProp(), void 0, "label");
+    }
+  })
+);
+var FieldDescription = withElement(
+  "p",
+  defineComponent({
+    name: "FieldDescription",
+    inheritAttrs: false,
+    // A field set's description has only the set's state.
+    slots: Object,
+    setup() {
+      const described = inject(DescribedKey, null);
+      if (!described) {
+        return useOutside("description", { tag: "p" });
+      }
+      return usePart(
+        described,
+        "description",
+        useIdProp(),
+        void 0,
+        "p"
+      );
+    }
+  })
+);
+var FieldError = withElement(
+  "div",
+  defineComponent({
+    name: "FieldError",
+    inheritAttrs: false,
+    props: {
+      match: {
+        type: [Boolean, String],
+        default: void 0
+      }
+    },
+    slots: Object,
+    setup(props, { slots }) {
+      const attrs = useAttrs();
+      const made = useId();
+      const field = inject(FieldKey, null);
+      const element = {
+        tag: "div",
+        children: (state) => slotContent(slots.default, { state }) ?? state.message
+      };
+      if (!field) {
+        return useOutside(
+          "error",
+          element,
+          () => fieldOutsideErrorShown({ match: props.match })
+        );
+      }
+      const id = () => attrs.id ?? (props.match === void 0 ? void 0 : made);
+      return usePart(
+        field,
+        "error",
+        () => ({ id: id(), match: props.match }),
+        void 0,
+        element
+      );
+    }
+  })
+);
+var FieldControl = withElement(
+  "input",
+  defineComponent({
+    name: "FieldControl",
+    inheritAttrs: false,
+    slots: Object,
+    setup() {
+      const field = inject(FieldKey, null);
+      if (!field) {
+        return useOutside("control", { tag: "input" });
+      }
+      const attrs = useAttrs();
+      const control = () => ({
+        id: attrs.id,
+        describedBy: attrs["aria-describedby"]
+      });
+      return usePart(
+        field,
+        "control",
+        control,
+        () => ({ name: field.name(), ...attrs }),
+        "input"
+      );
+    }
+  })
+);
+var FieldSet = withElement(
+  "fieldset",
+  defineComponent({
+    name: "FieldSet",
+    inheritAttrs: false,
+    props: { disabled: optionalBoolean, debug: optionalBoolean },
+    slots: Object,
+    setup(props) {
+      const set = usePrimitive(fieldSetPrimitive, () => ({
+        disabled: props.disabled,
+        debug: props.debug
+      }));
+      provide(DescribedKey, set);
+      return usePart(set, "set", void 0, void 0, "fieldset");
+    }
+  })
+);
+var FieldLegend = withElement(
+  "legend",
+  defineComponent({
+    name: "FieldLegend",
+    inheritAttrs: false,
+    slots: Object,
+    setup() {
+      const set = useScope(fieldSetPrimitive)?.handle;
+      if (!set) {
+        throw new Error("FieldLegend must be used inside <FieldSet>.");
+      }
+      return usePart(set, "legend", useIdProp(), void 0, "legend");
+    }
+  })
+);
+var FieldGroup = withElement(
+  "div",
+  defineComponent({
+    name: "FieldGroup",
+    inheritAttrs: false,
+    slots: Object,
+    setup() {
+      return usePart(
+        usePrimitive(fieldGroupPrimitive, () => ({})),
+        "group"
+      );
+    }
+  })
+);
+export {
+  Field,
+  FieldControl,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSet,
+  useFieldControl
+};

package/dist/file-input.d.ts

@@ -0,0 +1,212 @@
+import { type FileInputDropzoneTarget, type FileInputController, type FileInputOptions, type FileInputState, type FileInputValueChangeDetails, type FileInputValueChangeReason, type FileRejection, type FileInputPasteTarget } from "@ui-sdk/core/file-input";
+import type { CommitDetails } from "@ui-sdk/core";
+import { type FunctionalComponent, type PropType, type SlotsType, type VNode } from "vue";
+import { type PartSlots } from "./use-primitive.js";
+/**
+ * The root: it holds the files, and renders the hidden file input that opens
+ * the picker and that a form submits.
+ * @stable
+ */
+declare const FileInput: import("./create-parts.js").ElementPart<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    value: {
+        type: PropType<File[]>;
+        default: undefined;
+    };
+    modelValue: {
+        type: PropType<File[]>;
+        default: undefined;
+    };
+    defaultValue: {
+        type: PropType<File[]>;
+        default: undefined;
+    };
+    accept: PropType<FileInputOptions["accept"]>;
+    multiple: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    directory: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    capture: {
+        type: PropType<FileInputOptions["capture"]>;
+        default: undefined;
+    };
+    maxFiles: NumberConstructor;
+    maxSize: NumberConstructor;
+    minSize: NumberConstructor;
+    validate: PropType<FileInputOptions["validate"]>;
+    name: StringConstructor;
+    form: StringConstructor;
+    required: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    announcement: PropType<FileInputOptions["announcement"]>;
+    controller: PropType<FileInputController>;
+    debug: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+}>, (() => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | null) & {
+    state: NoInfer<FileInputState>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:value": (_value: File[]) => true;
+    "update:modelValue": (_value: File[]) => true;
+    valueChange: (_value: File[], _details: FileInputValueChangeDetails) => true;
+    reject: (_rejected: FileRejection[], _details: CommitDetails<FileInputValueChangeReason>) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    value: {
+        type: PropType<File[]>;
+        default: undefined;
+    };
+    modelValue: {
+        type: PropType<File[]>;
+        default: undefined;
+    };
+    defaultValue: {
+        type: PropType<File[]>;
+        default: undefined;
+    };
+    accept: PropType<FileInputOptions["accept"]>;
+    multiple: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    directory: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    capture: {
+        type: PropType<FileInputOptions["capture"]>;
+        default: undefined;
+    };
+    maxFiles: NumberConstructor;
+    maxSize: NumberConstructor;
+    minSize: NumberConstructor;
+    validate: PropType<FileInputOptions["validate"]>;
+    name: StringConstructor;
+    form: StringConstructor;
+    required: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    announcement: PropType<FileInputOptions["announcement"]>;
+    controller: PropType<FileInputController>;
+    debug: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{
+    onReject?: ((_rejected: FileRejection[], _details: CommitDetails<FileInputValueChangeReason>) => any) | undefined;
+    "onUpdate:modelValue"?: ((_value: File[]) => any) | undefined;
+    "onUpdate:value"?: ((_value: File[]) => any) | undefined;
+    onValueChange?: ((_value: File[], _details: FileInputValueChangeDetails) => any) | undefined;
+}>, {
+    value: File[];
+    disabled: boolean;
+    debug: boolean;
+    capture: boolean | "user" | "environment" | undefined;
+    multiple: boolean;
+    defaultValue: File[];
+    required: boolean;
+    directory: boolean;
+    modelValue: File[];
+}, PartSlots<import("@ui-sdk/core/file-input").FileInputPrimitive, "root">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "div">;
+/**
+ * Opens the file picker. Inside a Field, the field's label names it with the
+ * button's own text. Outside the file input, it connects through `controller`.
+ * @stable
+ */
+declare const FileInputTrigger: import("./create-parts.js").ElementPart<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    controller: PropType<FileInputController>;
+}>, () => unknown, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    controller: PropType<FileInputController>;
+}>> & Readonly<{}>, {}, PartSlots<import("@ui-sdk/core/file-input").FileInputPrimitive, "trigger">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "button">;
+/**
+ * Takes dropped and pasted files. Put the trigger inside it, which is how
+ * keyboard and screen reader users choose files.
+ * @stable
+ */
+declare const FileInputDropzone: import("./create-parts.js").ElementPart<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    target: PropType<FileInputDropzoneTarget>;
+    pasteTarget: PropType<FileInputPasteTarget>;
+}>, (() => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | null) & {
+    state: NoInfer<import("@ui-sdk/core/file-input").FileInputDropzoneState>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    target: PropType<FileInputDropzoneTarget>;
+    pasteTarget: PropType<FileInputPasteTarget>;
+}>> & Readonly<{}>, {}, PartSlots<import("@ui-sdk/core/file-input").FileInputPrimitive, "dropzone">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "div">;
+/**
+ * The files, as a list. Its default slot renders once for each file, so put
+ * a FileInputItem in it.
+ * @stable
+ */
+declare const FileInputList: import("./create-parts.js").ElementPart<import("vue").DefineComponent<{}, (() => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | null) & {
+    state: NoInfer<FileInputState>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, SlotsType<{
+    /** Renders once for each file. */
+    default?: () => VNode[];
+    /** Renders your own element: bind `props` to it, and render the files inside with `<component :is="children" />`. */
+    render?: (scope: {
+        props: Record<string, unknown>;
+        state: FileInputState;
+        children: FunctionalComponent;
+    }) => VNode[];
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "div">;
+/**
+ * One file. Its slot state has the file, for its name, size and preview.
+ * Arrow keys move between items, and Backspace or Delete removes the focused one.
+ * @stable
+ */
+declare const FileInputItem: import("./create-parts.js").ElementPart<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    file: PropType<File>;
+}>, (() => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | null) & {
+    state: NoInfer<import("@ui-sdk/core/file-input").FileInputItemState>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    file: PropType<File>;
+}>> & Readonly<{}>, {}, PartSlots<import("@ui-sdk/core/file-input").FileInputPrimitive, "item">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "div">;
+/**
+ * Removes its item's file, or the `file` it's given. It's named "Remove <file
+ * name>" unless you name it.
+ * @stable
+ */
+declare const FileInputItemRemove: import("./create-parts.js").ElementPart<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    file: PropType<File>;
+}>, (() => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | null) & {
+    state: NoInfer<import("@ui-sdk/core/file-input").FileInputItemRemoveState>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    file: PropType<File>;
+}>> & Readonly<{}>, {}, PartSlots<import("@ui-sdk/core/file-input").FileInputPrimitive, "item-remove">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "button">;
+export { createFileInputController, formatFileSize, relativePath, } from "@ui-sdk/core/file-input";
+export type { FileInputApi, FileInputChange, FileInputChangeOptions, FileInputController, FileInputDropzoneProps, FileInputDropzoneState, FileInputDropzoneTarget, FileInputItemProps, FileInputItemRemoveState, FileInputItemState, FileInputOptions, FileInputPasteTarget, FileInputPrimitive, FileInputState, FileInputTriggerProps, FileInputValueChangeDetails, FileInputValueChangeReason, FileLike, FileRejection, FileRejectionReason, FileRules, } from "@ui-sdk/core/file-input";
+export { FileInput, FileInputDropzone, FileInputItem, FileInputItemRemove, FileInputList, FileInputTrigger, };

package/dist/file-input.js

@@ -0,0 +1,255 @@
+// src/file-input.ts
+import {
+  fileInput as fileInputPrimitive
+} from "@ui-sdk/core/file-input";
+import { fileKey } from "@ui-sdk/core/renderer";
+import {
+  defineComponent,
+  h,
+  inject,
+  provide,
+  useId
+} from "vue";
+import {
+  renderUnbound,
+  useConnectedPart,
+  useControllerEntry,
+  useControllerTarget
+} from "./controller-target.js";
+import { withElement } from "./create-parts.js";
+import { useFieldControl } from "./field-context.js";
+import {
+  optionalBoolean,
+  orModel,
+  usePart,
+  usePrimitive,
+  useScope
+} from "./use-primitive.js";
+import {
+  createFileInputController,
+  formatFileSize,
+  relativePath
+} from "@ui-sdk/core/file-input";
+var FileKey = /* @__PURE__ */ Symbol("file-input-file");
+function useFileInput(part) {
+  const context = useScope(fileInputPrimitive)?.handle;
+  if (!context) {
+    throw new Error(`${part} must be used inside <FileInput>.`);
+  }
+  return context;
+}
+function useItemFile(part, own) {
+  const listed = inject(FileKey, null);
+  return () => {
+    const file = own() ?? listed?.();
+    if (!file) {
+      throw new Error(
+        `${part} must be used inside <FileInputList>, or be given a file.`
+      );
+    }
+    return file;
+  };
+}
+var FileInput = withElement(
+  "div",
+  defineComponent({
+    name: "FileInput",
+    inheritAttrs: false,
+    props: {
+      value: { type: Array, default: void 0 },
+      modelValue: { type: Array, default: void 0 },
+      defaultValue: { type: Array, default: void 0 },
+      accept: [String, Array],
+      multiple: optionalBoolean,
+      directory: optionalBoolean,
+      capture: {
+        type: [Boolean, String],
+        default: void 0
+      },
+      maxFiles: Number,
+      maxSize: Number,
+      minSize: Number,
+      validate: Function,
+      name: String,
+      form: String,
+      required: optionalBoolean,
+      disabled: optionalBoolean,
+      announcement: Function,
+      controller: Object,
+      debug: optionalBoolean
+    },
+    emits: {
+      "update:value": (_value) => true,
+      "update:modelValue": (_value) => true,
+      valueChange: (_value, _details) => true,
+      reject: (_rejected, _details) => true
+    },
+    slots: Object,
+    setup(props, { emit }) {
+      const field = useFieldControl();
+      const fileInput = usePrimitive(fileInputPrimitive, () => ({
+        value: orModel(props.value, props.modelValue),
+        defaultValue: props.defaultValue,
+        accept: props.accept,
+        multiple: props.multiple,
+        directory: props.directory,
+        capture: props.capture,
+        maxFiles: props.maxFiles,
+        maxSize: props.maxSize,
+        minSize: props.minSize,
+        validate: props.validate,
+        name: props.name ?? field?.name(),
+        form: props.form,
+        required: props.required,
+        disabled: props.disabled || field?.disabled(),
+        announcement: props.announcement,
+        controller: props.controller,
+        debug: props.debug,
+        onValueChange: (value, details) => {
+          emit("valueChange", value, details);
+          if (details.canceled) {
+            return;
+          }
+          emit("update:value", value);
+          emit("update:modelValue", value);
+        },
+        onReject: (rejected, details) => emit("reject", rejected, details)
+      }));
+      useControllerEntry(() => props.controller, fileInput);
+      return usePart(fileInput, "root", void 0, void 0, {
+        tag: "div",
+        hidden: () => h("input", fileInput.slot("input"))
+      });
+    }
+  })
+);
+var unconnected = {
+  value: [],
+  disabled: false,
+  required: false,
+  dragging: false
+};
+var FileInputTrigger = withElement(
+  "button",
+  defineComponent({
+    name: "FileInputTrigger",
+    inheritAttrs: false,
+    props: {
+      controller: Object
+    },
+    slots: Object,
+    setup(props, { slots, attrs }) {
+      const connected = useControllerTarget(
+        fileInputPrimitive,
+        () => props.controller
+      );
+      const field = useFieldControl();
+      return useConnectedPart(
+        connected,
+        (fileInput) => usePart(fileInput, "trigger", void 0, void 0, {
+          tag: "button",
+          extend: field?.props
+        }),
+        // Until the file input it names mounts, a trigger outside it is a plain button.
+        () => renderUnbound(
+          "button",
+          { type: "button", ...attrs },
+          { slots, state: unconnected }
+        )
+      );
+    }
+  })
+);
+var FileInputDropzone = withElement(
+  "div",
+  defineComponent({
+    name: "FileInputDropzone",
+    inheritAttrs: false,
+    props: {
+      target: String,
+      pasteTarget: [String, Object, Function]
+    },
+    slots: Object,
+    setup(props) {
+      const fileInput = useFileInput("FileInputDropzone");
+      const id = useId();
+      const zone = () => ({
+        id,
+        target: props.target,
+        pasteTarget: props.pasteTarget
+      });
+      return usePart(fileInput, "dropzone", zone);
+    }
+  })
+);
+var FileScope = defineComponent({
+  name: "FileInputFileScope",
+  props: { file: { type: Object, required: true } },
+  setup(props, { slots }) {
+    provide(FileKey, () => props.file);
+    return () => slots.default?.();
+  }
+});
+var FileInputList = withElement(
+  "div",
+  defineComponent({
+    name: "FileInputList",
+    inheritAttrs: false,
+    slots: Object,
+    setup(_, { slots }) {
+      const fileInput = useFileInput("FileInputList");
+      return usePart(fileInput, "list", void 0, void 0, {
+        tag: "div",
+        children: (state) => state.value.map(
+          (file) => h(FileScope, { file, key: fileKey(file) }, () => slots.default?.())
+        )
+      });
+    }
+  })
+);
+var FileInputItem = withElement(
+  "div",
+  defineComponent({
+    name: "FileInputItem",
+    inheritAttrs: false,
+    props: {
+      file: Object
+    },
+    slots: Object,
+    setup(props) {
+      const fileInput = useFileInput("FileInputItem");
+      const file = useItemFile("FileInputItem", () => props.file);
+      const item = () => ({ file: file(), value: fileKey(file()) });
+      provide(FileKey, file);
+      return usePart(fileInput, "item", item);
+    }
+  })
+);
+var FileInputItemRemove = withElement(
+  "button",
+  defineComponent({
+    name: "FileInputItemRemove",
+    inheritAttrs: false,
+    props: {
+      file: Object
+    },
+    slots: Object,
+    setup(props) {
+      const fileInput = useFileInput("FileInputItemRemove");
+      const file = useItemFile("FileInputItemRemove", () => props.file);
+      const item = () => ({ file: file(), value: fileKey(file()) });
+      return usePart(fileInput, "item-remove", item, void 0, "button");
+    }
+  })
+);
+export {
+  FileInput,
+  FileInputDropzone,
+  FileInputItem,
+  FileInputItemRemove,
+  FileInputList,
+  FileInputTrigger,
+  createFileInputController,
+  formatFileSize,
+  relativePath
+};