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

package/dist/combobox.js

@@ -0,0 +1,531 @@
+// src/combobox.ts
+import {
+  combobox as comboboxPrimitive
+} from "@ui-sdk/core/combobox";
+import {
+  comboboxChips,
+  comboboxCreate,
+  comboboxItemIcons,
+  comboboxSelectAll,
+  selectAllKey
+} from "@ui-sdk/core/renderer";
+import {
+  defineComponent,
+  h,
+  inject,
+  provide
+} from "vue";
+import {
+  hasChild,
+  learnLabels,
+  NotPlaced,
+  notLabel,
+  slotContent,
+  usePlaceContent,
+  usePlacedContent
+} from "./children.js";
+import { useFieldControl } from "./field-context.js";
+import { defineItemIcon, defineValueIcon } from "./item-icon.js";
+import { markSegments, slotText } from "./list-text.js";
+import {
+  containerProp,
+  provideSheetHeader,
+  renderPopup,
+  sheetViewport,
+  useControllerEntry,
+  useInSheetHeader,
+  useSheetHeader
+} from "./popup.js";
+import { ListItems } from "./list-items.js";
+import {
+  createParts,
+  withElement
+} from "./create-parts.js";
+import {
+  defaultSlot,
+  optionalBoolean,
+  orModel,
+  provideProps,
+  useHandle,
+  usePart,
+  usePrimitive,
+  useScope
+} from "./use-primitive.js";
+import { FormInputs } from "./form-inputs.js";
+import { renderless } from "./renderless.js";
+import { readOnlyOf } from "./text-control.js";
+import { createComboboxController } from "@ui-sdk/core/combobox";
+var ContainerKey = /* @__PURE__ */ Symbol("combobox-container");
+var useCombobox = () => useHandle(comboboxPrimitive);
+var parts = createParts(comboboxPrimitive, {
+  label: "label",
+  trigger: "button",
+  item: "div",
+  "item-indicator": "span",
+  group: "div",
+  "group-label": "div",
+  separator: "div",
+  status: "div",
+  clear: "button",
+  arrow: "div"
+});
+var anyValue = { type: null };
+var Combobox = /* @__PURE__ */ renderless(
+  defineComponent({
+    name: "Combobox",
+    props: {
+      value: anyValue,
+      modelValue: anyValue,
+      defaultValue: anyValue,
+      query: { type: String, default: void 0 },
+      defaultQuery: { type: String, default: void 0 },
+      open: optionalBoolean,
+      defaultOpen: optionalBoolean,
+      multiple: optionalBoolean,
+      maxSelected: Number,
+      items: Array,
+      emptyItems: Array,
+      filter: {
+        type: [String, Boolean, Function],
+        default: void 0
+      },
+      announcement: Function,
+      itemToValue: Function,
+      itemToLabel: Function,
+      isItemEqualToValue: Function,
+      autoHighlight: {
+        type: [Boolean, String],
+        default: void 0
+      },
+      keepQuery: optionalBoolean,
+      pendingAnnouncement: String,
+      allowCustomValue: optionalBoolean,
+      status: String,
+      loop: optionalBoolean,
+      modal: {
+        type: [Boolean, String],
+        default: void 0
+      },
+      presentation: String,
+      disabled: optionalBoolean,
+      readOnly: optionalBoolean,
+      required: optionalBoolean,
+      name: String,
+      form: String,
+      controller: Object,
+      dismissible: optionalBoolean,
+      debug: optionalBoolean,
+      container: containerProp
+    },
+    emits: {
+      "update:value": (_value) => true,
+      "update:modelValue": (_value) => true,
+      valueChange: (_value, _details) => true,
+      "update:query": (_query) => true,
+      queryChange: (_query, _details) => true,
+      "update:open": (_open) => true,
+      openChange: (_open, _details) => true,
+      openChangeComplete: (_open) => true,
+      dismissAttempt: (_details) => true,
+      highlight: (_value, _details) => true,
+      loadMore: () => true
+    },
+    setup(props, { slots, attrs, emit }) {
+      const field = useFieldControl();
+      provide(ContainerKey, () => props.container);
+      const combobox = usePrimitive(comboboxPrimitive, () => ({
+        ...props,
+        value: orModel(props.value, props.modelValue),
+        container: void 0,
+        name: props.name ?? field?.name(),
+        disabled: props.disabled || field?.disabled(),
+        readOnly: readOnlyOf(props, attrs),
+        onValueChange: (value, details) => {
+          emit("valueChange", value, details);
+          if (details.canceled) {
+            return;
+          }
+          emit("update:value", value);
+          emit("update:modelValue", value);
+        },
+        onQueryChange: (query, details) => {
+          emit("queryChange", query, details);
+          if (!details.canceled) {
+            emit("update:query", query);
+          }
+        },
+        onOpenChange: (open, details) => {
+          emit("openChange", open, details);
+          if (!details.canceled) {
+            emit("update:open", open);
+          }
+        },
+        onOpenChangeComplete: (open) => emit("openChangeComplete", open),
+        onDismissAttempt: (details) => emit("dismissAttempt", details),
+        onHighlight: (value, details) => emit("highlight", value, details),
+        onLoadMore: () => emit("loadMore")
+      }));
+      useControllerEntry(() => props.controller, combobox);
+      provideSheetHeader();
+      const placed = usePlacedContent();
+      return () => {
+        const children = slots.default?.() ?? [];
+        learnLabels(combobox.api.internal, children, itemDecorations);
+        const own = !props.items || placed() || hasChild(children, ComboboxContent);
+        return [
+          children,
+          props.items && !own && h(NotPlaced, () => h(ComboboxContent)),
+          h(FormInputs, { handle: combobox })
+        ];
+      };
+    }
+  })
+);
+var ComboboxLabel = parts.Label;
+var ComboboxChips = /* @__PURE__ */ withElement(
+  "div",
+  /* @__PURE__ */ defineComponent({
+    name: "ComboboxChips",
+    inheritAttrs: false,
+    slots: Object,
+    setup() {
+      const combobox = useCombobox();
+      combobox.instance.use(comboboxChips);
+      return usePart(combobox, "chips");
+    }
+  })
+);
+var ComboboxChipsOverflow = /* @__PURE__ */ withElement(
+  "span",
+  /* @__PURE__ */ defineComponent({
+    name: "ComboboxChipsOverflow",
+    inheritAttrs: false,
+    slots: Object,
+    setup(_, { slots }) {
+      const combobox = useCombobox();
+      combobox.instance.use(comboboxChips);
+      return usePart(combobox, "chips-overflow", void 0, void 0, {
+        tag: "span",
+        children: (state) => slotContent(slots.default, { state }) ?? `+${state.count} more`
+      });
+    }
+  })
+);
+var ComboboxInput = withElement(
+  "input",
+  defineComponent({
+    name: "ComboboxInput",
+    inheritAttrs: false,
+    slots: Object,
+    setup(_, { attrs }) {
+      const field = useFieldControl(attrs);
+      const inHeader = useInSheetHeader();
+      const part = usePart(comboboxPrimitive, "input", void 0, void 0, {
+        tag: "input",
+        extend: field?.props
+      });
+      return () => {
+        const element = part();
+        return element && inHeader(element);
+      };
+    }
+  })
+);
+var ComboboxTrigger = parts.Trigger;
+var ComboboxContent = withElement(
+  "div",
+  defineComponent({
+    name: "ComboboxContent",
+    inheritAttrs: false,
+    props: {
+      side: String,
+      align: String,
+      sideOffset: Number,
+      alignOffset: Number,
+      collisionPadding: Number,
+      arrowPadding: Number,
+      anchor: [Object, String],
+      keepMounted: optionalBoolean,
+      container: containerProp
+    },
+    slots: Object,
+    setup(props, { slots }) {
+      usePlaceContent();
+      const combobox = useCombobox();
+      const inherited = inject(ContainerKey, () => void 0);
+      const content = () => {
+        const { container, ...content2 } = props;
+        return content2;
+      };
+      const header = useSheetHeader(combobox);
+      const part = usePart(combobox, "content", content, void 0, {
+        tag: "div",
+        children: (state) => [
+          header(),
+          defaultSlot(
+            slots,
+            state,
+            () => combobox.state.items && h(ComboboxList)
+          )
+        ]
+      });
+      return () => {
+        const element = part();
+        if (!element) {
+          return null;
+        }
+        return renderPopup(
+          sheetViewport(combobox, element),
+          props.container ?? inherited()
+        );
+      };
+    }
+  })
+);
+var ComboboxList = withElement(
+  "div",
+  defineComponent({
+    name: "ComboboxList",
+    inheritAttrs: false,
+    slots: Object,
+    setup(_, { slots }) {
+      const combobox = useCombobox();
+      return usePart(combobox, "list", void 0, void 0, {
+        tag: "div",
+        children: (state) => defaultSlot(
+          slots,
+          state,
+          () => combobox.state.items && h(ComboboxItems, { items: state.items })
+        )
+      });
+    }
+  })
+);
+var ComboboxItem = parts.Item;
+var ComboboxItemIndicator = parts.ItemIndicator;
+var ComboboxItemText = withElement(
+  "span",
+  defineComponent({
+    name: "ComboboxItemText",
+    inheritAttrs: false,
+    slots: Object,
+    setup(_, { slots }) {
+      const item = useScope(comboboxPrimitive)?.around.item;
+      if (!item) {
+        throw new Error(
+          "<ComboboxItemText> must be used inside <ComboboxItem>."
+        );
+      }
+      let text = "";
+      let own;
+      let ownText;
+      const part = usePart(
+        comboboxPrimitive,
+        "item-text",
+        () => ({ id: item().value, text }),
+        void 0,
+        {
+          tag: "span",
+          children: (state) => own && ownText === void 0 ? own : markSegments(state.segments)
+        }
+      );
+      return () => {
+        own = slotContent(slots.default, { state: part.state });
+        ownText = slotText(own);
+        text = ownText ?? (item().label ?? item().value);
+        return part();
+      };
+    }
+  })
+);
+var ComboboxSelectAll = /* @__PURE__ */ withElement(
+  "div",
+  /* @__PURE__ */ defineComponent({
+    name: "ComboboxSelectAll",
+    inheritAttrs: false,
+    slots: Object,
+    setup() {
+      const combobox = useCombobox();
+      combobox.instance.use(comboboxSelectAll);
+      const part = {
+        id: selectAllKey(
+          useScope(comboboxPrimitive)?.around.group?.().id
+        )
+      };
+      return usePart(combobox, "select-all", () => part);
+    }
+  })
+);
+var ComboboxItemIcon = /* @__PURE__ */ notLabel(
+  /* @__PURE__ */ defineItemIcon(
+    "ComboboxItemIcon",
+    comboboxPrimitive,
+    "item-icon",
+    comboboxItemIcons
+  )
+);
+var itemDecorations = /* @__PURE__ */ new Set([ComboboxItemIndicator]);
+var ComboboxValueIcon = /* @__PURE__ */ defineValueIcon(
+  "ComboboxValueIcon",
+  comboboxPrimitive,
+  comboboxItemIcons
+);
+var ComboboxGroup = parts.Group;
+var ComboboxGroupLabel = parts.GroupLabel;
+var ComboboxSeparator = parts.Separator;
+var ComboboxCreate = /* @__PURE__ */ (() => withElement(
+  "div",
+  defineComponent({
+    name: "ComboboxCreate",
+    inheritAttrs: false,
+    props: {
+      // A function prop beside the emit, so a returned Promise marks the option pending.
+      onCreate: Function,
+      minLength: Number
+    },
+    slots: Object,
+    setup(props, { slots }) {
+      const combobox = useCombobox();
+      combobox.instance.use(comboboxCreate);
+      const part = () => ({
+        onCreate: props.onCreate,
+        minLength: props.minLength
+      });
+      return usePart(combobox, "create", part, void 0, {
+        tag: "div",
+        children: (state) => slotContent(slots.default, { state }) ?? `Create \u201C${state.query}\u201D`
+      });
+    }
+  })
+))();
+var ComboboxEmpty = withElement(
+  "div",
+  defineComponent({
+    name: "ComboboxEmpty",
+    inheritAttrs: false,
+    slots: Object,
+    setup(_, { slots }) {
+      return usePart(comboboxPrimitive, "empty", void 0, void 0, {
+        tag: "div",
+        children: (state) => state.empty ? slots.default?.({ state }) : null
+      });
+    }
+  })
+);
+var ComboboxStatus = parts.Status;
+var ComboboxClear = parts.Clear;
+var ComboboxValue = /* @__PURE__ */ renderless(
+  defineComponent({
+    name: "ComboboxValue",
+    props: {
+      maxLabels: Number,
+      getMoreLabel: Function
+    },
+    slots: Object,
+    setup(props, { slots }) {
+      const { state } = usePart(comboboxPrimitive, "value", () => ({
+        maxLabels: props.maxLabels,
+        getMoreLabel: props.getMoreLabel
+      }));
+      return () => slotContent(slots.default, { state, value: state.value }) ?? (state.label || null);
+    }
+  })
+);
+var ComboboxChip = /* @__PURE__ */ (() => withElement(
+  "div",
+  defineComponent({
+    name: "ComboboxChip",
+    inheritAttrs: false,
+    props: {
+      value: { type: null, required: true }
+    },
+    slots: Object,
+    setup(props, { slots }) {
+      const combobox = useCombobox();
+      combobox.instance.use(comboboxChips);
+      provideProps(comboboxPrimitive, "chip", () => ({ value: props.value }));
+      const part = () => ({
+        id: combobox.api.internal.keyOf(props.value),
+        value: props.value
+      });
+      return usePart(combobox, "chip", part, void 0, {
+        tag: "div",
+        children: (state) => slotContent(slots.default, { state }) ?? state.label
+      });
+    }
+  })
+))();
+var ComboboxChipRemove = /* @__PURE__ */ withElement(
+  "button",
+  /* @__PURE__ */ defineComponent({
+    name: "ComboboxChipRemove",
+    inheritAttrs: false,
+    slots: Object,
+    setup() {
+      const combobox = useCombobox();
+      combobox.instance.use(comboboxChips);
+      const chip = useScope(comboboxPrimitive)?.around.chip;
+      if (!chip) {
+        throw new Error(
+          "<ComboboxChipRemove> must be used inside <ComboboxChip>."
+        );
+      }
+      const value = () => chip().value;
+      const part = () => ({
+        id: combobox.api.internal.keyOf(value()),
+        value: value()
+      });
+      return usePart(combobox, "chip-remove", part, void 0, "button");
+    }
+  })
+);
+var ComboboxArrow = parts.Arrow;
+var ComboboxItems = defineComponent({
+  name: "ComboboxItems",
+  props: {
+    items: { type: Array, required: true }
+  },
+  setup(props) {
+    const combobox = useCombobox();
+    return () => h(ListItems, {
+      items: props.items,
+      parts: listParts,
+      keyOf: combobox.api.internal.keyOf
+    });
+  }
+});
+var listParts = {
+  Item: ComboboxItem,
+  Group: ComboboxGroup,
+  GroupLabel: ComboboxGroupLabel,
+  Separator: ComboboxSeparator
+};
+export {
+  Combobox,
+  ComboboxArrow,
+  ComboboxChip,
+  ComboboxChipRemove,
+  ComboboxChips,
+  ComboboxChipsOverflow,
+  ComboboxClear,
+  ComboboxContent,
+  ComboboxCreate,
+  ComboboxEmpty,
+  ComboboxGroup,
+  ComboboxGroupLabel,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxItemIcon,
+  ComboboxItemIndicator,
+  ComboboxItemText,
+  ComboboxItems,
+  ComboboxLabel,
+  ComboboxList,
+  ComboboxSelectAll,
+  ComboboxSeparator,
+  ComboboxStatus,
+  ComboboxTrigger,
+  ComboboxValue,
+  ComboboxValueIcon,
+  createComboboxController
+};