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

package/dist/select.js

@@ -0,0 +1,468 @@
+// src/select.ts
+import {
+  selectAllKey,
+  selectItemIcons,
+  selectSelectAll
+} from "@ui-sdk/core/renderer";
+import {
+  select as selectPrimitive
+} from "@ui-sdk/core/select";
+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 { ListItems } from "./list-items.js";
+import { markSegments, slotText } from "./list-text.js";
+import {
+  containerProp,
+  provideConnected,
+  renderPopup,
+  renderUnbound,
+  useConnectedHandle,
+  useConnectedPart,
+  sheetViewport,
+  useControllerTarget,
+  useControllerEntry
+} from "./popup.js";
+import {
+  createParts,
+  withElement
+} from "./create-parts.js";
+import {
+  defaultSlot,
+  optionalBoolean,
+  orModel,
+  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 { createSelectController } from "@ui-sdk/core/select";
+var ContainerKey = /* @__PURE__ */ Symbol("select-container");
+var useSelect = () => useHandle(selectPrimitive);
+var parts = createParts(selectPrimitive, {
+  label: "div",
+  input: "input",
+  status: "div",
+  item: "div",
+  "item-indicator": "span",
+  group: "div",
+  "group-label": "div",
+  separator: "div",
+  clear: "button",
+  arrow: "div"
+});
+var anyValue = { type: null };
+var Select = /* @__PURE__ */ renderless(
+  defineComponent({
+    name: "Select",
+    props: {
+      value: anyValue,
+      modelValue: anyValue,
+      defaultValue: anyValue,
+      open: optionalBoolean,
+      defaultOpen: optionalBoolean,
+      multiple: optionalBoolean,
+      items: Array,
+      emptyItems: Array,
+      query: { type: String, default: void 0 },
+      defaultQuery: String,
+      filter: {
+        type: [String, Boolean, Function],
+        default: void 0
+      },
+      status: String,
+      announcement: Function,
+      placeholder: String,
+      itemToValue: Function,
+      itemToLabel: Function,
+      isItemEqualToValue: Function,
+      loop: optionalBoolean,
+      modal: {
+        type: [Boolean, String],
+        default: void 0
+      },
+      presentation: String,
+      disabled: optionalBoolean,
+      readOnly: optionalBoolean,
+      required: optionalBoolean,
+      name: String,
+      form: String,
+      autoComplete: String,
+      controller: Object,
+      dismissible: optionalBoolean,
+      debug: optionalBoolean,
+      container: containerProp
+    },
+    emits: {
+      "update:value": (_value) => true,
+      "update:modelValue": (_value) => true,
+      valueChange: (_value, _details) => true,
+      "update:open": (_open) => true,
+      openChange: (_open, _details) => true,
+      openChangeComplete: (_open) => true,
+      dismissAttempt: (_details) => true,
+      highlight: (_value, _details) => true,
+      "update:query": (_query) => true,
+      queryChange: (_query, _details) => true,
+      loadMore: () => true
+    },
+    setup(props, { slots, attrs, emit }) {
+      const field = useFieldControl();
+      provide(ContainerKey, () => props.container);
+      const select = usePrimitive(selectPrimitive, () => ({
+        ...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);
+        },
+        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),
+        onQueryChange: (query, details) => {
+          emit("queryChange", query, details);
+          if (!details.canceled) {
+            emit("update:query", query);
+          }
+        },
+        onLoadMore: () => emit("loadMore")
+      }));
+      useControllerEntry(() => props.controller, select);
+      const placed = usePlacedContent();
+      return () => {
+        const children = slots.default?.() ?? [];
+        learnLabels(select.api.internal, children, itemDecorations);
+        const own = !props.items || placed() || hasChild(children, SelectContent);
+        return [
+          children,
+          props.items && !own && h(NotPlaced, () => h(SelectContent)),
+          h(FormInputs, { handle: select })
+        ];
+      };
+    }
+  })
+);
+var SelectLabel = parts.Label;
+var SelectTrigger = withElement(
+  "button",
+  defineComponent({
+    name: "SelectTrigger",
+    inheritAttrs: false,
+    props: {
+      disabled: optionalBoolean,
+      // Connects a trigger outside the select to the select with this controller.
+      controller: Object
+    },
+    slots: Object,
+    setup(props, { slots, attrs }) {
+      const connected = useControllerTarget(
+        selectPrimitive,
+        () => props.controller
+      );
+      provideConnected(selectPrimitive, connected);
+      const field = useFieldControl(attrs);
+      return useConnectedPart(
+        connected,
+        (select) => usePart(
+          select,
+          "trigger",
+          () => ({
+            disabled: props.disabled,
+            named: !!field || attrs["aria-labelledby"] != null
+          }),
+          void 0,
+          {
+            tag: "button",
+            // Its content, or without any, the value.
+            children: (state) => slotContent(slots.default, { state }) ?? h(SelectValue),
+            extend: field?.props
+          }
+        ),
+        // Until its select mounts, a trigger outside it is a plain button.
+        () => {
+          const state = {
+            open: false,
+            disabled: !!props.disabled,
+            readOnly: false,
+            required: false,
+            placeholder: true
+          };
+          return renderUnbound(
+            "button",
+            { type: "button", ...attrs },
+            { slots, state }
+          );
+        }
+      );
+    }
+  })
+);
+var unselected = {
+  value: null,
+  label: "",
+  labels: [],
+  placeholder: true
+};
+var SelectValue = withElement(
+  "span",
+  defineComponent({
+    name: "SelectValue",
+    inheritAttrs: false,
+    props: {
+      placeholder: String,
+      maxLabels: Number,
+      getMoreLabel: Function
+    },
+    slots: Object,
+    setup(props, { slots, attrs }) {
+      const part = () => ({
+        placeholder: props.placeholder,
+        maxLabels: props.maxLabels,
+        getMoreLabel: props.getMoreLabel
+      });
+      const content = (state, placeholder) => slotContent(slots.default, { state }) ?? (state.placeholder ? props.placeholder ?? placeholder ?? "" : state.label);
+      return useConnectedPart(
+        useConnectedHandle(selectPrimitive),
+        (select) => usePart(select, "value", part, void 0, {
+          tag: "span",
+          children: (state) => content(state, select.state.placeholder)
+        }),
+        // Inside a trigger outside its select, the placeholder until the select mounts.
+        () => renderUnbound("span", attrs, {
+          slots,
+          state: unselected,
+          children: content
+        })
+      );
+    }
+  })
+);
+var SelectContent = withElement(
+  "div",
+  defineComponent({
+    name: "SelectContent",
+    inheritAttrs: false,
+    props: {
+      side: String,
+      align: String,
+      sideOffset: Number,
+      alignOffset: Number,
+      collisionPadding: Number,
+      arrowPadding: Number,
+      anchor: [Object, String],
+      alignItemWithTrigger: optionalBoolean,
+      keepMounted: optionalBoolean,
+      container: containerProp
+    },
+    slots: Object,
+    setup(props, { slots }) {
+      usePlaceContent();
+      const select = useSelect();
+      const inherited = inject(ContainerKey, () => void 0);
+      const content = () => {
+        const { container, ...content2 } = props;
+        return content2;
+      };
+      const part = usePart(select, "content", content, void 0, {
+        tag: "div",
+        children: (state) => defaultSlot(
+          slots,
+          state,
+          () => select.state.items && h(SelectItems, { items: state.items })
+        )
+      });
+      return () => {
+        const element = part();
+        if (!element) {
+          return null;
+        }
+        return renderPopup(
+          sheetViewport(select, element),
+          props.container ?? inherited()
+        );
+      };
+    }
+  })
+);
+var SelectList = withElement(
+  "div",
+  defineComponent({
+    name: "SelectList",
+    inheritAttrs: false,
+    slots: Object,
+    setup(_, { slots }) {
+      const select = useSelect();
+      return usePart(select, "list", void 0, void 0, {
+        tag: "div",
+        children: (state) => defaultSlot(
+          slots,
+          state,
+          () => select.state.items && h(SelectItems, { items: state.items })
+        )
+      });
+    }
+  })
+);
+var SelectInput = parts.Input;
+var SelectEmpty = withElement(
+  "div",
+  defineComponent({
+    name: "SelectEmpty",
+    inheritAttrs: false,
+    slots: Object,
+    setup(_, { slots }) {
+      return usePart(selectPrimitive, "empty", void 0, void 0, {
+        tag: "div",
+        children: (state) => state.empty ? slots.default?.({ state }) : null
+      });
+    }
+  })
+);
+var SelectStatus = parts.Status;
+var SelectItem = parts.Item;
+var SelectItemIndicator = parts.ItemIndicator;
+var SelectItemText = withElement(
+  "span",
+  defineComponent({
+    name: "SelectItemText",
+    inheritAttrs: false,
+    slots: Object,
+    setup(_, { slots }) {
+      const item = useScope(selectPrimitive)?.around.item;
+      if (!item) {
+        throw new Error("<SelectItemText> must be used inside <SelectItem>.");
+      }
+      let text = "";
+      let own;
+      let ownText;
+      const part = usePart(
+        selectPrimitive,
+        "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 SelectSelectAll = /* @__PURE__ */ withElement(
+  "div",
+  /* @__PURE__ */ defineComponent({
+    name: "SelectSelectAll",
+    inheritAttrs: false,
+    slots: Object,
+    setup() {
+      const select = useSelect();
+      select.instance.use(selectSelectAll);
+      const part = {
+        id: selectAllKey(
+          useScope(selectPrimitive)?.around.group?.().id
+        )
+      };
+      return usePart(select, "select-all", () => part);
+    }
+  })
+);
+var SelectItemIcon = /* @__PURE__ */ notLabel(
+  /* @__PURE__ */ defineItemIcon(
+    "SelectItemIcon",
+    selectPrimitive,
+    "item-icon",
+    selectItemIcons
+  )
+);
+var itemDecorations = /* @__PURE__ */ new Set([SelectItemIndicator]);
+var SelectValueIcon = /* @__PURE__ */ defineValueIcon(
+  "SelectValueIcon",
+  selectPrimitive,
+  selectItemIcons
+);
+var SelectGroup = parts.Group;
+var SelectGroupLabel = parts.GroupLabel;
+var SelectSeparator = parts.Separator;
+var SelectClear = parts.Clear;
+var SelectArrow = parts.Arrow;
+var SelectItems = defineComponent({
+  name: "SelectItems",
+  props: {
+    items: { type: Array, required: true }
+  },
+  setup(props) {
+    const select = useSelect();
+    return () => h(ListItems, {
+      items: props.items,
+      parts: listParts,
+      keyOf: select.api.internal.keyOf
+    });
+  }
+});
+var listParts = {
+  Item: SelectItem,
+  Group: SelectGroup,
+  GroupLabel: SelectGroupLabel,
+  Separator: SelectSeparator
+};
+export {
+  Select,
+  SelectArrow,
+  SelectClear,
+  SelectContent,
+  SelectEmpty,
+  SelectGroup,
+  SelectGroupLabel,
+  SelectInput,
+  SelectItem,
+  SelectItemIcon,
+  SelectItemIndicator,
+  SelectItemText,
+  SelectItems,
+  SelectLabel,
+  SelectList,
+  SelectSelectAll,
+  SelectSeparator,
+  SelectStatus,
+  SelectTrigger,
+  SelectValue,
+  SelectValueIcon,
+  createSelectController
+};

package/dist/separator.d.ts

@@ -0,0 +1,14 @@
+/**
+ * A line between groups of content, announced as a separator unless it's `decorative`.
+ * @stable
+ */
+declare const Separator: import("./create-parts.js").ElementPart<new (props: Omit<import("@ui-sdk/core").OptionsOf<import("@ui-sdk/core/separator").SeparatorPrimitive> & import("@ui-sdk/core/renderer").BaseSlotProps, never> & {} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps) => import("vue").CreateComponentPublicInstanceWithMixins<Omit<import("@ui-sdk/core").OptionsOf<import("@ui-sdk/core/separator").SeparatorPrimitive> & import("@ui-sdk/core/renderer").BaseSlotProps, never> & {}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {}, import("vue").PublicProps, {}, false, {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/separator").SeparatorState>>, {}, {}, string, {}, any, import("vue").ComponentProvideOptions, {
+    P: {};
+    B: {};
+    D: {};
+    C: {};
+    M: {};
+    Defaults: {};
+}, Omit<import("@ui-sdk/core").OptionsOf<import("@ui-sdk/core/separator").SeparatorPrimitive> & import("@ui-sdk/core/renderer").BaseSlotProps, never> & {}, {}, {}, {}, {}, {}>, "div">;
+export { Separator };
+export type { SeparatorOptions, SeparatorOrientation, SeparatorPrimitive, SeparatorState, } from "@ui-sdk/core/separator";

package/dist/separator.js

@@ -0,0 +1,8 @@
+// src/separator.ts
+import { separator } from "@ui-sdk/core/separator";
+import { createParts } from "./create-parts.js";
+var parts = createParts(separator, { root: "div" });
+var Separator = parts.Root;
+export {
+  Separator
+};

package/dist/shortcuts.d.ts

@@ -0,0 +1,32 @@
+import { type ShortcutHandler, type ShortcutOptions } from "@ui-sdk/core/shortcuts";
+import { type MaybeRefOrGetter } from "vue";
+/**
+ * Options for `useShortcut`. `layer` also takes a template ref.
+ * @stable
+ */
+type UseShortcutOptions = Omit<ShortcutOptions, "layer"> & {
+    /** An element inside a popup, a ref or a getter of one. The shortcut belongs to that popup. */
+    layer?: MaybeRefOrGetter<Element | null | undefined>;
+};
+/**
+ * Registers a keyboard shortcut for the life of the component, in the shared
+ * `shortcuts`. Keys can be a ref or a getter, and nothing registers for `null`.
+ * Options can be a ref or a getter too, like `() => ({ scope: props.scope })`,
+ * and it registers again when they change.
+ * @stable
+ */
+declare function useShortcut(keys: MaybeRefOrGetter<string | null | undefined>, handler: ShortcutHandler, options?: MaybeRefOrGetter<UseShortcutOptions>): void;
+/**
+ * Keys formatted for this platform, like `⌘S` on Apple platforms and `Ctrl+S`
+ * elsewhere, with the matching `aria-keyshortcuts`, as computed refs. The
+ * server and the first client render use the same platform, so hydration
+ * matches, and they update after mount. Keys can be a ref or a getter.
+ * @stable
+ */
+declare function useShortcutHint(keys: MaybeRefOrGetter<string>): {
+    text: import("vue").ComputedRef<string>;
+    ariaKeyshortcuts: import("vue").ComputedRef<string>;
+};
+export { ariaKeyshortcuts, formatShortcut, registerShortcut, shortcuts, } from "@ui-sdk/core/shortcuts";
+export type { ShortcutHandler, ShortcutInfo, ShortcutKeys, ShortcutOptions, Shortcuts, } from "@ui-sdk/core/shortcuts";
+export { useShortcut, useShortcutHint, type UseShortcutOptions };

package/dist/shortcuts.js

@@ -0,0 +1,56 @@
+// src/shortcuts.ts
+import { initialApple, isApple } from "@ui-sdk/core/renderer";
+import {
+  ariaKeyshortcuts,
+  formatShortcut,
+  shortcuts
+} from "@ui-sdk/core/shortcuts";
+import {
+  computed,
+  onMounted,
+  onScopeDispose,
+  shallowRef,
+  toValue,
+  watchEffect
+} from "vue";
+import {
+  ariaKeyshortcuts as ariaKeyshortcuts2,
+  formatShortcut as formatShortcut2,
+  registerShortcut,
+  shortcuts as shortcuts2
+} from "@ui-sdk/core/shortcuts";
+function useShortcut(keys, handler, options = {}) {
+  let off;
+  watchEffect(() => {
+    off?.();
+    off = void 0;
+    const current = toValue(keys);
+    if (!current || typeof document === "undefined") {
+      return;
+    }
+    const { layer, ...rest } = toValue(options);
+    off = shortcuts.register(current, handler, {
+      ...rest,
+      layer: layer === void 0 ? void 0 : () => toValue(layer)
+    });
+  });
+  onScopeDispose(() => off?.());
+}
+function useShortcutHint(keys) {
+  const apple = shallowRef(initialApple());
+  onMounted(() => apple.value = isApple());
+  return {
+    text: computed(() => formatShortcut(toValue(keys), apple.value)),
+    ariaKeyshortcuts: computed(
+      () => ariaKeyshortcuts(toValue(keys), apple.value)
+    )
+  };
+}
+export {
+  ariaKeyshortcuts2 as ariaKeyshortcuts,
+  formatShortcut2 as formatShortcut,
+  registerShortcut,
+  shortcuts2 as shortcuts,
+  useShortcut,
+  useShortcutHint
+};

package/dist/slider.d.ts

@@ -0,0 +1,65 @@
+import type { StateOf } from "@ui-sdk/core";
+import { slider as sliderPrimitive, type SliderOptions } from "@ui-sdk/core/slider";
+import { type RootInstanceOf, type RootPropsOf } from "./create-parts.js";
+import { type PartSlots } from "./use-primitive.js";
+type Value = number | number[];
+type SliderProps<V extends Value> = SliderOptions<V>;
+type SliderComponent = new <V extends Value = Value>(props: RootPropsOf<SliderProps<V>, "div">) => RootInstanceOf<SliderProps<V>, StateOf<typeof sliderPrimitive, "root">, "div">;
+/**
+ * The root: a group around the thumbs, and the hidden input the form submits.
+ * @stable
+ */
+declare const Slider: SliderComponent;
+/**
+ * Where presses land. A press on the track moves the nearest thumb there.
+ * @stable
+ */
+declare const SliderControl: Pick<import("vue").DefineSetupFnComponent<Omit<import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/slider").SliderState>>>, never> & import("./create-parts.js").ElementConstructor<import("vue").DefineSetupFnComponent<Omit<import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/slider").SliderState>>>, "div">;
+/**
+ * The rail the thumbs move along. Positions are percentages of it.
+ * @stable
+ */
+declare const SliderTrack: Pick<import("vue").DefineSetupFnComponent<Omit<import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/slider").SliderState>>>, never> & import("./create-parts.js").ElementConstructor<import("vue").DefineSetupFnComponent<Omit<import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/slider").SliderState>>>, "div">;
+/**
+ * The filled part of the track: up to a single thumb, or between a range's thumbs.
+ * @stable
+ */
+declare const SliderIndicator: Pick<import("vue").DefineSetupFnComponent<Omit<import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/slider").SliderState>>>, never> & import("./create-parts.js").ElementConstructor<import("vue").DefineSetupFnComponent<Omit<import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/slider").SliderState>>>, "div">;
+/**
+ * A thumb, with the native range input that takes focus inside it. Its
+ * `aria-label`, `aria-labelledby` and `aria-describedby` go to that input.
+ * @stable
+ */
+declare const SliderThumb: import("./create-parts.js").ElementPart<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    index: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>, (() => 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/slider").SliderThumbState>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    index: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>> & Readonly<{}>, {
+    index: number;
+}, PartSlots<import("@ui-sdk/core/slider").SliderPrimitive, "thumb">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "div">;
+/**
+ * The formatted value, a range joined with an en dash. Content replaces it.
+ * @stable
+ */
+declare const SliderValue: import("./create-parts.js").ElementPart<import("vue").DefineComponent<{}, (() => 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/slider").SliderValueState>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, PartSlots<import("@ui-sdk/core/slider").SliderPrimitive, "value">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "output">;
+export { createSliderController } from "@ui-sdk/core/slider";
+export type { NumberFormat, SliderApi, SliderChangeOptions, SliderController, SliderOptions, SliderPrimitive, SliderState, SliderThumbProps, SliderThumbState, SliderValueChangeDetails, SliderValueChangeReason, SliderValueCommitDetails, SliderValueState, } from "@ui-sdk/core/slider";
+export { Slider, SliderControl, SliderIndicator, SliderThumb, SliderTrack, SliderValue, };