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

package/dist/menu.js

@@ -0,0 +1,607 @@
+// src/menu.ts
+import {
+  formatShortcut
+} from "@ui-sdk/core";
+import {
+  menu as menuPrimitive
+} from "@ui-sdk/core/menu";
+import {
+  menuCheckable,
+  menuContextTrigger,
+  menuItemIcons
+} from "@ui-sdk/core/renderer";
+import {
+  defineComponent,
+  h,
+  inject,
+  provide,
+  useId
+} from "vue";
+import {
+  hasChild,
+  NotPlaced,
+  usePlaceContent,
+  usePlacedContent
+} from "./children.js";
+import { defineItemIcon } from "./item-icon.js";
+import { MenubarKey } from "./menubar-context.js";
+import {
+  containerProp,
+  renderPopup,
+  renderUnbound,
+  sheetViewport,
+  useConnectedPart,
+  useControllerEntry,
+  useControllerTarget,
+  usePopupContainer,
+  withPayload
+} from "./popup.js";
+import { createParts, withElement } from "./create-parts.js";
+import {
+  optionalBoolean,
+  orModel,
+  provideProps,
+  useHandle,
+  usePart,
+  usePrimitive,
+  useScope
+} from "./use-primitive.js";
+import { renderless } from "./renderless.js";
+import { createMenuController } from "@ui-sdk/core/menu";
+var ContainerKey = /* @__PURE__ */ Symbol("menu-container");
+var ItemKey = /* @__PURE__ */ Symbol("menu-item");
+var useMenu = () => useHandle(menuPrimitive);
+var useGroup = () => {
+  const around = useScope(menuPrimitive)?.around;
+  return around?.["radio-group"]?.().name ?? around?.group?.().id;
+};
+var parts = createParts(menuPrimitive, { shortcut: "span", separator: "div" });
+var Menu = /* @__PURE__ */ renderless(
+  defineComponent({
+    name: "Menu",
+    props: {
+      open: optionalBoolean,
+      modelValue: optionalBoolean,
+      defaultOpen: optionalBoolean,
+      items: Array,
+      itemShortcuts: optionalBoolean,
+      loop: optionalBoolean,
+      delay: Number,
+      presentation: String,
+      modal: {
+        type: [Boolean, String],
+        default: void 0
+      },
+      controller: Object,
+      dismissible: optionalBoolean,
+      pendingAnnouncement: String,
+      debug: optionalBoolean,
+      container: containerProp,
+      // A function prop beside the emits, so a returned Promise marks the item pending.
+      onAction: Function
+    },
+    emits: {
+      "update:open": (_open) => true,
+      "update:modelValue": (_open) => true,
+      openChange: (_open, _details) => true,
+      openChangeComplete: (_open) => true,
+      dismissAttempt: (_details) => true,
+      payloadChange: (_payload, _details) => true,
+      checkedChange: (_checked, _details) => true,
+      valueChange: (_value, _details) => true
+    },
+    setup(props, { slots, emit }) {
+      provide(ContainerKey, () => props.container);
+      const menubar = inject(MenubarKey, null);
+      provide(MenubarKey, null);
+      const menu = usePrimitive(menuPrimitive, () => ({
+        ...props,
+        open: orModel(props.open, props.modelValue),
+        container: void 0,
+        menubar: menubar ? () => menubar.api : void 0,
+        onOpenChange: (open, details) => {
+          emit("openChange", open, details);
+          if (details.canceled) {
+            return;
+          }
+          emit("update:open", open);
+          emit("update:modelValue", open);
+        },
+        onOpenChangeComplete: (open) => emit("openChangeComplete", open),
+        onDismissAttempt: (details) => emit("dismissAttempt", details),
+        onPayloadChange: (payload, details) => emit("payloadChange", payload, details),
+        onCheckedChange: (checked, details) => emit("checkedChange", checked, details),
+        onValueChange: (value, details) => emit("valueChange", value, details)
+      }));
+      useControllerEntry(() => props.controller, menu);
+      const placed = usePlacedContent();
+      return () => {
+        const children = slots.default?.() ?? [];
+        const own = !props.items || placed() || hasChild(children, MenuContent);
+        return [
+          children,
+          props.items && !own && h(
+            NotPlaced,
+            () => h(MenuContent, null, () => h(MenuItems, { items: props.items }))
+          )
+        ];
+      };
+    }
+  })
+);
+function triggerPart(name, slot, tag, feature) {
+  return withElement(
+    tag,
+    defineComponent({
+      name,
+      inheritAttrs: false,
+      props: {
+        disabled: optionalBoolean,
+        focusableWhenDisabled: optionalBoolean,
+        payload: null,
+        // A keyboard shortcut that opens the menu, like "mod+j". Root triggers only.
+        shortcut: String,
+        // Connects a trigger outside the menu to the menu with this controller.
+        controller: Object
+      },
+      slots: Object,
+      setup(props, { slots, attrs }) {
+        const connected = useControllerTarget(
+          menuPrimitive,
+          () => props.controller
+        );
+        const id = useId();
+        const part = () => ({
+          id,
+          disabled: props.disabled,
+          focusableWhenDisabled: props.focusableWhenDisabled,
+          payload: props.payload,
+          shortcut: props.shortcut
+        });
+        return useConnectedPart(
+          connected,
+          (menu) => {
+            if (feature) {
+              menu.instance.use(feature);
+            }
+            return usePart(menu, slot, part, void 0, tag);
+          },
+          // Until the menu it names mounts, a trigger outside the menu is a plain element.
+          () => renderUnbound(
+            tag,
+            {
+              ...tag === "button" && {
+                type: "button",
+                disabled: props.disabled && !props.focusableWhenDisabled,
+                "aria-disabled": props.disabled && props.focusableWhenDisabled || void 0
+              },
+              ...attrs
+            },
+            { slots, state: { open: false, disabled: !!props.disabled } }
+          )
+        );
+      }
+    })
+  );
+}
+var MenuTrigger = triggerPart("MenuTrigger", "trigger", "button");
+var MenuContextTrigger = /* @__PURE__ */ triggerPart(
+  "MenuContextTrigger",
+  "context-trigger",
+  "div",
+  menuContextTrigger
+);
+var MenuContent = withPayload(
+  withElement(
+    "div",
+    defineComponent({
+      name: "MenuContent",
+      inheritAttrs: false,
+      props: {
+        side: String,
+        align: String,
+        sideOffset: Number,
+        alignOffset: Number,
+        collisionPadding: Number,
+        arrowPadding: Number,
+        anchor: [Object, String],
+        finalFocus: [String, Object, Function],
+        keepMounted: optionalBoolean,
+        // Renders the popup into this element instead of in place. Submenus stay
+        // inside their parent's popup.
+        container: containerProp
+      },
+      slots: Object,
+      setup(props) {
+        usePlaceContent();
+        const menu = useMenu();
+        const fromRoot = inject(ContainerKey, () => void 0);
+        const target = usePopupContainer(() => props.container ?? fromRoot());
+        const position = () => {
+          const { container, ...position2 } = props;
+          return position2;
+        };
+        const part = usePart(menu, "content", position);
+        return () => {
+          const element = part();
+          if (!element) {
+            return null;
+          }
+          return menu.api.root() !== menu.api ? element : renderPopup(sheetViewport(menu, element), target());
+        };
+      }
+    })
+  )
+);
+var MenuShortcut = parts.Shortcut;
+var MenuItem = withElement(
+  "div",
+  defineComponent({
+    name: "MenuItem",
+    inheritAttrs: false,
+    props: {
+      value: String,
+      label: String,
+      disabled: optionalBoolean,
+      shortcut: String,
+      closeOnSelect: optionalBoolean,
+      destructive: optionalBoolean,
+      // A function prop beside the emit, so a returned Promise marks the item pending.
+      onSelect: Function
+    },
+    slots: Object,
+    setup(props, { slots }) {
+      const menu = useMenu();
+      const id = useId();
+      const item = () => ({ ...props, id });
+      return usePart(menu, "item", item, void 0, {
+        tag: "div",
+        children: (state) => [
+          slots.default?.({ state }),
+          props.shortcut && h(
+            MenuShortcut,
+            null,
+            () => formatShortcut(props.shortcut, menu.state.apple)
+          )
+        ]
+      });
+    }
+  })
+);
+var MenuCheckboxItem = /* @__PURE__ */ withElement(
+  "div",
+  /* @__PURE__ */ defineComponent({
+    name: "MenuCheckboxItem",
+    inheritAttrs: false,
+    props: {
+      value: { type: String, required: true },
+      label: String,
+      disabled: optionalBoolean,
+      checked: optionalBoolean,
+      modelValue: optionalBoolean,
+      defaultChecked: optionalBoolean,
+      closeOnSelect: optionalBoolean
+    },
+    emits: {
+      "update:checked": (_checked) => true,
+      "update:modelValue": (_checked) => true,
+      checkedChange: (_checked, _details) => true
+    },
+    slots: Object,
+    setup(props, { emit }) {
+      const menu = useMenu();
+      menu.instance.use(menuCheckable);
+      provide(ItemKey, () => ({ item: "checkbox-item", itemKey: props.value }));
+      const item = () => ({
+        ...props,
+        checked: orModel(props.checked, props.modelValue),
+        onCheckedChange: (checked, details) => {
+          emit("checkedChange", checked, details);
+          if (details.canceled) {
+            return;
+          }
+          emit("update:checked", checked);
+          emit("update:modelValue", checked);
+        }
+      });
+      return usePart(menu, "checkbox-item", item);
+    }
+  })
+);
+var MenuRadioGroup = /* @__PURE__ */ withElement(
+  "div",
+  /* @__PURE__ */ defineComponent({
+    name: "MenuRadioGroup",
+    inheritAttrs: false,
+    props: {
+      // Identifies the group in the menu's `valueChange`. Defaults to a generated id.
+      name: String,
+      value: { type: String, default: void 0 },
+      modelValue: {
+        type: String,
+        default: void 0
+      },
+      defaultValue: {
+        type: String,
+        default: void 0
+      }
+    },
+    emits: {
+      "update:value": (_value) => true,
+      "update:modelValue": (_value) => true,
+      valueChange: (_value, _details) => true
+    },
+    slots: Object,
+    setup(props, { emit }) {
+      const menu = useMenu();
+      menu.instance.use(menuCheckable);
+      const generated = useId();
+      const name = props.name ?? generated;
+      provideProps(menuPrimitive, "radio-group", () => ({ name }));
+      const group = () => ({
+        value: orModel(props.value, props.modelValue),
+        defaultValue: props.defaultValue,
+        id: name,
+        name,
+        onValueChange: (value, details) => {
+          emit("valueChange", value, details);
+          if (details.canceled) {
+            return;
+          }
+          emit("update:value", value);
+          emit("update:modelValue", value);
+        }
+      });
+      return usePart(menu, "radio-group", group);
+    }
+  })
+);
+var MenuRadioItem = /* @__PURE__ */ withElement(
+  "div",
+  /* @__PURE__ */ defineComponent({
+    name: "MenuRadioItem",
+    inheritAttrs: false,
+    props: {
+      value: { type: String, required: true },
+      label: String,
+      disabled: optionalBoolean,
+      closeOnSelect: optionalBoolean
+    },
+    slots: Object,
+    setup(props) {
+      const menu = useMenu();
+      menu.instance.use(menuCheckable);
+      const group = useScope(menuPrimitive)?.around["radio-group"]?.().name;
+      if (!group) {
+        throw new Error("<MenuRadioItem> must be used inside <MenuRadioGroup>.");
+      }
+      provide(ItemKey, () => ({
+        item: "radio-item",
+        itemKey: props.value,
+        group
+      }));
+      const item = () => ({ ...props, group });
+      return usePart(menu, "radio-item", item);
+    }
+  })
+);
+var MenuItemIndicator = /* @__PURE__ */ withElement(
+  "span",
+  /* @__PURE__ */ defineComponent({
+    name: "MenuItemIndicator",
+    inheritAttrs: false,
+    props: { keepMounted: optionalBoolean },
+    slots: Object,
+    setup(props) {
+      const menu = useMenu();
+      menu.instance.use(menuCheckable);
+      const id = useId();
+      const item = inject(ItemKey, null);
+      if (!item) {
+        throw new Error(
+          "<MenuItemIndicator> must be used inside a checkbox or radio item."
+        );
+      }
+      const indicator = () => ({
+        id,
+        ...item(),
+        keepMounted: props.keepMounted
+      });
+      return usePart(menu, "item-indicator", indicator, void 0, "span");
+    }
+  })
+);
+var MenuItemIcon = /* @__PURE__ */ defineItemIcon(
+  "MenuItemIcon",
+  menuPrimitive,
+  "item-icon",
+  menuItemIcons
+);
+var MenuGroup = withElement(
+  "div",
+  defineComponent({
+    name: "MenuGroup",
+    inheritAttrs: false,
+    slots: Object,
+    setup() {
+      const id = useId();
+      provideProps(menuPrimitive, "group", () => ({ id }));
+      return usePart(menuPrimitive, "group", () => ({ id }));
+    }
+  })
+);
+var MenuGroupLabel = withElement(
+  "div",
+  defineComponent({
+    name: "MenuGroupLabel",
+    inheritAttrs: false,
+    slots: Object,
+    setup() {
+      const group = useGroup();
+      if (!group) {
+        throw new Error(
+          "<MenuGroupLabel> must be used inside <MenuGroup> or <MenuRadioGroup>."
+        );
+      }
+      return usePart(menuPrimitive, "group-label", () => ({ id: group, group }));
+    }
+  })
+);
+var MenuSeparator = parts.Separator;
+var MenuSub = /* @__PURE__ */ renderless(
+  defineComponent({
+    name: "MenuSub",
+    props: {
+      open: optionalBoolean,
+      modelValue: optionalBoolean,
+      defaultOpen: optionalBoolean,
+      delay: Number,
+      loop: optionalBoolean,
+      controller: Object,
+      debug: optionalBoolean
+    },
+    emits: {
+      "update:open": (_open) => true,
+      "update:modelValue": (_open) => true,
+      openChange: (_open, _details) => true,
+      openChangeComplete: (_open) => true
+    },
+    setup(props, { slots, emit }) {
+      const parent = useMenu();
+      usePrimitive(menuPrimitive, () => ({
+        ...props,
+        open: orModel(props.open, props.modelValue),
+        parent: parent.api,
+        onOpenChange: (open, details) => {
+          emit("openChange", open, details);
+          if (details.canceled) {
+            return;
+          }
+          emit("update:open", open);
+          emit("update:modelValue", open);
+        },
+        onOpenChangeComplete: (open) => emit("openChangeComplete", open)
+      }));
+      return () => slots.default?.();
+    }
+  })
+);
+var MenuSubTrigger = withElement(
+  "div",
+  defineComponent({
+    name: "MenuSubTrigger",
+    inheritAttrs: false,
+    props: { disabled: optionalBoolean },
+    slots: Object,
+    setup(props) {
+      return usePart(menuPrimitive, "trigger", () => ({
+        disabled: props.disabled
+      }));
+    }
+  })
+);
+var MenuSubContent = MenuContent;
+var MenuItems = /* @__PURE__ */ renderless(
+  defineComponent({
+    name: "MenuItems",
+    props: {
+      items: { type: Array, required: true }
+    },
+    setup(props) {
+      const render = (items) => items.map((entry, index) => {
+        const item = typeof entry === "string" ? { value: entry, label: entry } : entry;
+        switch (item.type) {
+          case void 0:
+          case "item":
+            return h(
+              MenuItem,
+              {
+                key: item.value,
+                value: item.value,
+                disabled: item.disabled,
+                shortcut: item.shortcut,
+                closeOnSelect: item.closeOnSelect,
+                destructive: item.destructive
+              },
+              () => item.label
+            );
+          case "separator":
+            return h(MenuSeparator, { key: `separator-${index}` });
+          case "group":
+            return h(MenuGroup, { key: `group-${index}` }, () => [
+              item.label && h(MenuGroupLabel, null, () => item.label),
+              ...render(item.items)
+            ]);
+          case "checkbox":
+            return h(
+              MenuCheckboxItem,
+              {
+                key: item.value,
+                value: item.value,
+                disabled: item.disabled,
+                checked: item.checked,
+                defaultChecked: item.defaultChecked,
+                closeOnSelect: item.closeOnSelect
+              },
+              () => item.label
+            );
+          case "radio-group":
+            return h(
+              MenuRadioGroup,
+              {
+                key: item.name,
+                name: item.name,
+                value: item.value,
+                defaultValue: item.defaultValue
+              },
+              () => [
+                item.label && h(MenuGroupLabel, null, () => item.label),
+                ...item.items.map(
+                  (radio) => h(
+                    MenuRadioItem,
+                    {
+                      key: radio.value,
+                      value: radio.value,
+                      disabled: radio.disabled
+                    },
+                    () => radio.label
+                  )
+                )
+              ]
+            );
+          case "submenu":
+            return h(MenuSub, { key: `submenu-${index}` }, () => [
+              h(
+                MenuSubTrigger,
+                { disabled: item.disabled },
+                () => item.label
+              ),
+              h(MenuSubContent, null, () => render(item.items))
+            ]);
+        }
+      });
+      return () => render(props.items);
+    }
+  })
+);
+export {
+  Menu,
+  MenuCheckboxItem,
+  MenuContent,
+  MenuContextTrigger,
+  MenuGroup,
+  MenuGroupLabel,
+  MenuItem,
+  MenuItemIcon,
+  MenuItemIndicator,
+  MenuItems,
+  MenuRadioGroup,
+  MenuRadioItem,
+  MenuSeparator,
+  MenuShortcut,
+  MenuSub,
+  MenuSubContent,
+  MenuSubTrigger,
+  MenuTrigger,
+  createMenuController
+};

package/dist/menubar-context.d.ts

@@ -0,0 +1,5 @@
+import type { menubar } from "@ui-sdk/core/menubar";
+import type { InjectionKey } from "vue";
+import type { PrimitiveHandle } from "./use-primitive.js";
+declare const MenubarKey: InjectionKey<PrimitiveHandle<typeof menubar> | null>;
+export { MenubarKey };

package/dist/menubar-context.js

@@ -0,0 +1,5 @@
+// src/menubar-context.ts
+var MenubarKey = /* @__PURE__ */ Symbol("menubar");
+export {
+  MenubarKey
+};

package/dist/menubar.d.ts

@@ -0,0 +1,61 @@
+import { type MenubarController, type MenubarOrientation } from "@ui-sdk/core/menubar";
+import { type PropType } from "vue";
+import { type PartSlots } from "./use-primitive.js";
+/**
+ * A row of menus, like a desktop app's: one tab stop, arrow keys between the
+ * triggers and between open menus. Each `Menu` inside joins it.
+ * @stable
+ */
+declare const Menubar: import("./create-parts.js").ElementPart<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    orientation: PropType<MenubarOrientation>;
+    loop: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    modal: {
+        type: PropType<boolean | "pointer">;
+        default: undefined;
+    };
+    controller: PropType<MenubarController>;
+    debug: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+}>, (() => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | null) & {
+    state: NoInfer<import("@ui-sdk/core/menubar").MenubarState>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    orientation: PropType<MenubarOrientation>;
+    loop: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    modal: {
+        type: PropType<boolean | "pointer">;
+        default: undefined;
+    };
+    controller: PropType<MenubarController>;
+    debug: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    disabled: boolean;
+    debug: boolean;
+    loop: boolean;
+    modal: boolean | "pointer";
+}, PartSlots<import("@ui-sdk/core/menubar").MenubarPrimitive, "root">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "div">;
+export { createMenubarController } from "@ui-sdk/core/menubar";
+export type { MenubarApi, MenubarController, MenubarMember, MenubarOptions, MenubarOrientation, MenubarPrimitive, MenubarState, } from "@ui-sdk/core/menubar";
+export { Menubar };