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

package/dist/toast-parts.js

@@ -0,0 +1,270 @@
+// src/toast-parts.ts
+import {
+  createToaster as createCoreToaster,
+  toast as coreToast,
+  toastRegion
+} from "@ui-sdk/core/toast";
+import {
+  defineComponent,
+  h,
+  inject,
+  onBeforeUpdate,
+  provide,
+  shallowRef,
+  useId
+} from "vue";
+import { slotContent } from "./children.js";
+import { withElement } from "./create-parts.js";
+import { containerProp, renderPopup } from "./popup.js";
+import {
+  optionalBoolean,
+  usePart,
+  usePrimitive
+} from "./use-primitive.js";
+var ToastKey = /* @__PURE__ */ Symbol("toast");
+function useToast(part) {
+  const context = inject(ToastKey, null);
+  if (!context) {
+    throw new Error(`${part} must be used inside <Toast>, in a <ToastRegion>.`);
+  }
+  return context;
+}
+var ToastScope = defineComponent({
+  name: "ToastScope",
+  props: {
+    region: { type: Object, required: true },
+    toast: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props, { slots }) {
+    provide(ToastKey, { region: props.region, toast: () => props.toast });
+    return () => slots.default?.();
+  }
+});
+var regionProps = {
+  toaster: Function,
+  side: String,
+  align: String,
+  maxVisible: Number,
+  expanded: optionalBoolean,
+  // `null` turns the shortcut off.
+  shortcut: { type: String, default: void 0 },
+  pendingAnnouncement: String,
+  debug: optionalBoolean,
+  container: containerProp
+};
+function createRegion(placed) {
+  return withElement(
+    "section",
+    defineComponent({
+      name: placed ? "ToastRegion" : "HostedToastRegion",
+      inheritAttrs: false,
+      props: regionProps,
+      slots: Object,
+      setup(props, { slots, attrs }) {
+        const label = shallowRef(attrs["aria-label"]);
+        onBeforeUpdate(
+          () => label.value = attrs["aria-label"]
+        );
+        const region = usePrimitive(
+          toastRegion,
+          () => ({
+            toaster: props.toaster,
+            side: props.side,
+            align: props.align,
+            maxVisible: props.maxVisible,
+            expanded: props.expanded,
+            shortcut: props.shortcut,
+            pendingAnnouncement: props.pendingAnnouncement,
+            debug: props.debug,
+            placed,
+            label: label.value
+          })
+        );
+        let list;
+        const part = usePart(
+          region,
+          "region",
+          void 0,
+          () => {
+            const { "aria-label": _, ...rest } = attrs;
+            return rest;
+          },
+          { tag: "section", children: () => list }
+        );
+        return () => {
+          const toasts = part.state.toasts;
+          list = h(
+            "ol",
+            region.slot("list"),
+            toasts.map(
+              (item) => h(
+                ToastScope,
+                { key: item.toast.id, region, toast: item.toast },
+                () => slots.default ? slots.default({ toast: item.toast, item }) : h(DataToast, { toast: item.toast })
+              )
+            )
+          );
+          const element = part();
+          return element && renderPopup(element, props.container);
+        };
+      }
+    })
+  );
+}
+var ToastRegion = createRegion(true);
+var HostedToastRegion = createRegion(false);
+var DataToast = defineComponent({
+  name: "DataToast",
+  props: {
+    toast: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props) {
+    return () => {
+      const { toast: toast2 } = props;
+      return h(Toast, null, () => [
+        h("div", [
+          toast2.title != null ? h(ToastTitle) : null,
+          toast2.description != null ? h(ToastDescription) : null
+        ]),
+        toast2.action ? h(ToastAction) : null,
+        toast2.cancel ? h(
+          ToastClose,
+          { action: toast2.cancel.onCancel },
+          () => toast2.cancel.label
+        ) : null
+      ]);
+    };
+  }
+});
+var Toast = withElement(
+  "li",
+  defineComponent({
+    name: "Toast",
+    inheritAttrs: false,
+    slots: Object,
+    setup() {
+      const { region, toast: toast2 } = useToast("Toast");
+      return usePart(
+        region,
+        "root",
+        () => ({ id: toast2().id }),
+        void 0,
+        "li"
+      );
+    }
+  })
+);
+function contentPart(name, slot) {
+  return withElement(
+    "div",
+    defineComponent({
+      name,
+      inheritAttrs: false,
+      slots: Object,
+      setup(_, { slots }) {
+        const { region, toast: toast2 } = useToast(name);
+        let content;
+        const part = usePart(
+          region,
+          slot,
+          () => ({ id: toast2().id }),
+          void 0,
+          {
+            tag: "div",
+            children: () => content
+          }
+        );
+        return () => {
+          content = slotContent(slots.default, { state: part.state }) ?? toast2()[slot];
+          return content == null ? null : part();
+        };
+      }
+    })
+  );
+}
+var ToastTitle = contentPart("ToastTitle", "title");
+var ToastDescription = contentPart("ToastDescription", "description");
+var ToastAction = withElement(
+  "button",
+  defineComponent({
+    name: "ToastAction",
+    inheritAttrs: false,
+    props: {
+      // Runs instead of the toast's own `action.onAction`. `@action="undo"` binds here.
+      onAction: Function,
+      // Whether pressing it dismisses the toast. Defaults to the toast's `action.dismiss`, else true.
+      dismiss: optionalBoolean
+    },
+    slots: Object,
+    setup(props, { slots, attrs }) {
+      const { region, toast: toast2 } = useToast("ToastAction");
+      const id = useId();
+      const part = () => ({
+        id,
+        toast: toast2().id,
+        onAction: props.onAction,
+        dismiss: props.dismiss
+      });
+      const element = () => {
+        const href = toast2().action?.href;
+        return href ? { href, ...attrs } : { type: "button", ...attrs };
+      };
+      const render = usePart(region, "action", part, element, {
+        get tag() {
+          return toast2().action?.href ? "a" : "button";
+        },
+        children: (state) => slotContent(slots.default, { state }) ?? toast2().action?.label
+      });
+      return () => !toast2().action && !props.onAction ? null : render();
+    }
+  })
+);
+var ToastClose = withElement(
+  "button",
+  defineComponent({
+    name: "ToastClose",
+    inheritAttrs: false,
+    props: {
+      // Runs before the toast closes. A returned Promise keeps it open and pending until it settles.
+      action: Function,
+      // `@action="save"` binds here, so the part gets the handler's Promise.
+      onAction: Function
+    },
+    slots: Object,
+    setup(props, { attrs }) {
+      const { region, toast: toast2 } = useToast("ToastClose");
+      const id = useId();
+      const part = () => ({
+        id,
+        toast: toast2().id,
+        action: props.action ?? props.onAction
+      });
+      return usePart(
+        region,
+        "close",
+        part,
+        () => ({ type: "button", ...attrs }),
+        "button"
+      );
+    }
+  })
+);
+var toast = coreToast;
+var createToaster = createCoreToaster;
+export {
+  HostedToastRegion,
+  Toast,
+  ToastAction,
+  ToastClose,
+  ToastDescription,
+  ToastRegion,
+  ToastTitle,
+  createToaster,
+  toast
+};

package/dist/toast.d.ts

@@ -0,0 +1,2 @@
+export type { Toast as ToastData, ToastAction as ToastActionData, ToastActionDetails, ToastActionProps, ToastButtonState, ToastCancel, ToastCloseProps, ToastDismissDetails, ToastDismissReason, Toaster, ToastItem, ToastOptions, ToastPauseReason, ToastRegionOptions, ToastRegionPrimitive, ToastRegionState, ToastState, ToastType, } from "@ui-sdk/core/toast";
+export { createToaster, toast, Toast, ToastAction, ToastClose, type ToastContent, ToastDescription, ToastRegion, ToastTitle, } from "./toast-parts.js";

package/dist/toast.js

@@ -0,0 +1,21 @@
+// src/toast.ts
+import {
+  createToaster,
+  toast,
+  Toast,
+  ToastAction,
+  ToastClose,
+  ToastDescription,
+  ToastRegion,
+  ToastTitle
+} from "./toast-parts.js";
+export {
+  Toast,
+  ToastAction,
+  ToastClose,
+  ToastDescription,
+  ToastRegion,
+  ToastTitle,
+  createToaster,
+  toast
+};

package/dist/toggle-props.d.ts

@@ -0,0 +1,22 @@
+declare const toggleProps: {
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    readOnly: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    required: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    name: StringConstructor;
+    value: StringConstructor;
+    form: StringConstructor;
+    debug: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+};
+export { toggleProps };

package/dist/toggle-props.js

@@ -0,0 +1,14 @@
+// src/toggle-props.ts
+import { optionalBoolean } from "./use-primitive.js";
+var toggleProps = {
+  disabled: optionalBoolean,
+  readOnly: optionalBoolean,
+  required: optionalBoolean,
+  name: String,
+  value: String,
+  form: String,
+  debug: optionalBoolean
+};
+export {
+  toggleProps
+};

package/dist/toggle.d.ts

@@ -0,0 +1,199 @@
+import type { ChangeDetails } from "@ui-sdk/core";
+import { type ToggleController, type ToggleGroupController, type ToggleGroupOrientation, type ToggleGroupValueChangeReason, type TogglePressedChangeReason } from "@ui-sdk/core/toggle";
+import { type PropType } from "vue";
+import { type PartSlots } from "./use-primitive.js";
+/**
+ * A button that stays pressed. Inside a ToggleGroup, the group decides whether it's pressed.
+ * @stable
+ */
+declare const Toggle: import("./create-parts.js").ElementPart<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    pressed: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    modelValue: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    defaultPressed: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    value: StringConstructor;
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    focusableWhenDisabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    controller: PropType<ToggleController>;
+    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/toggle").ToggleState>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:pressed": (_pressed: boolean) => true;
+    "update:modelValue": (_pressed: boolean) => true;
+    pressedChange: (_pressed: boolean, _details: ChangeDetails<TogglePressedChangeReason>) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    pressed: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    modelValue: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    defaultPressed: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    value: StringConstructor;
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    focusableWhenDisabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    controller: PropType<ToggleController>;
+    debug: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((_pressed: boolean) => any) | undefined;
+    "onUpdate:pressed"?: ((_pressed: boolean) => any) | undefined;
+    onPressedChange?: ((_pressed: boolean, _details: ChangeDetails<TogglePressedChangeReason>) => any) | undefined;
+}>, {
+    disabled: boolean;
+    debug: boolean;
+    focusableWhenDisabled: boolean;
+    pressed: boolean;
+    modelValue: boolean;
+    defaultPressed: boolean;
+}, PartSlots<import("@ui-sdk/core/toggle").TogglePrimitive, "root">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "button">;
+/**
+ * An icon inside a toggle. A toggle with only an icon needs an `aria-label`.
+ * Screen readers skip it, and `mirror` flips it in right-to-left text.
+ * @stable
+ */
+declare const ToggleIcon: Pick<import("vue").DefineSetupFnComponent<Omit<NoInfer<import("@ui-sdk/core/renderer").ItemIconProps & {
+    item?: string;
+}> & import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<{
+    mirror: boolean;
+}>>>, never> & import("./create-parts.js").ElementConstructor<import("vue").DefineSetupFnComponent<Omit<NoInfer<import("@ui-sdk/core/renderer").ItemIconProps & {
+    item?: string;
+}> & import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<{
+    mirror: boolean;
+}>>>, "span">;
+/**
+ * Toggles that share one value, with one tab stop and arrow keys between them.
+ * @stable
+ */
+declare const ToggleGroup: import("./create-parts.js").ElementPart<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    value: {
+        type: PropType<string[]>;
+        default: undefined;
+    };
+    modelValue: {
+        type: PropType<string[]>;
+        default: undefined;
+    };
+    defaultValue: {
+        type: PropType<string[]>;
+        default: undefined;
+    };
+    multiple: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    deselectable: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    orientation: PropType<ToggleGroupOrientation>;
+    loop: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    controller: PropType<ToggleGroupController>;
+    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/toggle").ToggleGroupState<string>>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:value": (_value: string[]) => true;
+    "update:modelValue": (_value: string[]) => true;
+    valueChange: (_value: string[], _details: ChangeDetails<ToggleGroupValueChangeReason>) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    value: {
+        type: PropType<string[]>;
+        default: undefined;
+    };
+    modelValue: {
+        type: PropType<string[]>;
+        default: undefined;
+    };
+    defaultValue: {
+        type: PropType<string[]>;
+        default: undefined;
+    };
+    multiple: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    deselectable: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    orientation: PropType<ToggleGroupOrientation>;
+    loop: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    controller: PropType<ToggleGroupController>;
+    debug: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((_value: string[]) => any) | undefined;
+    "onUpdate:value"?: ((_value: string[]) => any) | undefined;
+    onValueChange?: ((_value: string[], _details: ChangeDetails<ToggleGroupValueChangeReason>) => any) | undefined;
+}>, {
+    value: string[];
+    disabled: boolean;
+    debug: boolean;
+    multiple: boolean;
+    defaultValue: string[];
+    loop: boolean;
+    deselectable: boolean;
+    modelValue: string[];
+}, PartSlots<import("@ui-sdk/core/toggle").ToggleGroupPrimitive, "group">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "div">;
+export { createToggleController, createToggleGroupController, } from "@ui-sdk/core/toggle";
+export type { ToggleApi, ToggleChangeOptions, ToggleController, ToggleGroupApi, ToggleGroupChangeOptions, ToggleGroupController, ToggleGroupOptions, ToggleGroupOrientation, ToggleGroupPrimitive, ToggleGroupState, ToggleGroupValueChangeReason, ToggleIconProps, ToggleIconState, ToggleOptions, TogglePressedChangeReason, TogglePrimitive, ToggleState, } from "@ui-sdk/core/toggle";
+export { Toggle, ToggleGroup, ToggleIcon };

package/dist/toggle.js

@@ -0,0 +1,129 @@
+// src/toggle.ts
+import {
+  toggle as togglePrimitive,
+  toggleGroup as toggleGroupPrimitive
+} from "@ui-sdk/core/toggle";
+import {
+  defineComponent,
+  inject,
+  provide
+} from "vue";
+import { useToolbarScope } from "./toolbar-context.js";
+import { createParts, withElement } from "./create-parts.js";
+import {
+  optionalBoolean,
+  orModel,
+  usePart,
+  usePrimitive
+} from "./use-primitive.js";
+import {
+  createToggleController,
+  createToggleGroupController
+} from "@ui-sdk/core/toggle";
+var parts = createParts(togglePrimitive, { icon: "span" });
+var ToggleGroupKey = /* @__PURE__ */ Symbol("toggle-group");
+var Toggle = withElement(
+  "button",
+  defineComponent({
+    name: "Toggle",
+    inheritAttrs: false,
+    props: {
+      pressed: optionalBoolean,
+      modelValue: optionalBoolean,
+      defaultPressed: optionalBoolean,
+      value: String,
+      disabled: optionalBoolean,
+      focusableWhenDisabled: optionalBoolean,
+      controller: Object,
+      debug: optionalBoolean
+    },
+    emits: {
+      "update:pressed": (_pressed) => true,
+      "update:modelValue": (_pressed) => true,
+      pressedChange: (_pressed, _details) => true
+    },
+    slots: Object,
+    setup(props, { emit }) {
+      const group = inject(ToggleGroupKey, null);
+      const toolbar = useToolbarScope();
+      const toggle = usePrimitive(togglePrimitive, () => ({
+        pressed: orModel(props.pressed, props.modelValue),
+        defaultPressed: props.defaultPressed,
+        value: props.value,
+        disabled: props.disabled,
+        focusableWhenDisabled: props.focusableWhenDisabled,
+        group: group ? () => group.api : void 0,
+        toolbar: toolbar.value,
+        controller: props.controller,
+        debug: props.debug,
+        onPressedChange: (pressed, details) => {
+          emit("pressedChange", pressed, details);
+          if (details.canceled) {
+            return;
+          }
+          emit("update:pressed", pressed);
+          emit("update:modelValue", pressed);
+        }
+      }));
+      return usePart(toggle, "root", void 0, void 0, "button");
+    }
+  })
+);
+var ToggleIcon = parts.Icon;
+var ToggleGroup = /* @__PURE__ */ withElement(
+  "div",
+  /* @__PURE__ */ defineComponent({
+    name: "ToggleGroup",
+    inheritAttrs: false,
+    props: {
+      value: { type: Array, default: void 0 },
+      modelValue: { type: Array, default: void 0 },
+      defaultValue: { type: Array, default: void 0 },
+      multiple: optionalBoolean,
+      deselectable: optionalBoolean,
+      disabled: optionalBoolean,
+      orientation: String,
+      loop: optionalBoolean,
+      controller: Object,
+      debug: optionalBoolean
+    },
+    emits: {
+      "update:value": (_value) => true,
+      "update:modelValue": (_value) => true,
+      valueChange: (_value, _details) => true
+    },
+    slots: Object,
+    setup(props, { emit }) {
+      const toolbar = useToolbarScope();
+      const group = usePrimitive(toggleGroupPrimitive, () => ({
+        toolbar: toolbar.value,
+        value: orModel(props.value, props.modelValue),
+        defaultValue: props.defaultValue,
+        multiple: props.multiple,
+        deselectable: props.deselectable,
+        disabled: props.disabled,
+        orientation: props.orientation,
+        loop: props.loop,
+        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);
+        }
+      }));
+      provide(ToggleGroupKey, group);
+      return usePart(group, "group", void 0, void 0, "div");
+    }
+  })
+);
+export {
+  Toggle,
+  ToggleGroup,
+  ToggleIcon,
+  createToggleController,
+  createToggleGroupController
+};