sit-onyx 1.0.0-beta.263 → 1.0.0-beta.265

package/dist/components/OnyxButton/ButtonOrLinkLayout.d.vue.ts

@@ -13,13 +13,17 @@ declare function __VLS_template(): {
          */
         default(): unknown;
     };
-    refs: {};
+    refs: {
+        buttonRef: HTMLButtonElement;
+    };
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     type: import('./types.js', { with: { "resolution-mode": "import" } }).ButtonType;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    buttonRef: HTMLButtonElement;
+}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/dist/components/OnyxDialog/OnyxDialog.d.vue.ts

@@ -30,6 +30,7 @@ declare const __VLS_component: import('vue').DefineComponent<OnyxDialogProps, {}
     alert: boolean;
     open: boolean;
     modal: boolean;
+    disableClosingOnBackdropClick: boolean;
     alignment: import('./types.js', { with: { "resolution-mode": "import" } }).DialogAlignment;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     dialogRef: HTMLDialogElement;

package/dist/components/OnyxDialog/types.d.ts

@@ -14,6 +14,10 @@ export type OnyxDialogProps = DensityProp & {
      * Also the `close` event is emitted when pressing "Escape".
      */
     modal?: boolean;
+    /**
+     * Whether to prevent closing the dialog when clicking outside of it.
+     */
+    disableClosingOnBackdropClick?: boolean;
     /**
      * Whether the dialog is an [alert dialog](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/).
      * Should be set for better accessibility / screen reader support when the dialog

package/dist/components/OnyxFab/types.d.ts

@@ -0,0 +1,13 @@
+import { Nullable } from '../../types/index.js';
+import { OnyxFabButtonProps } from '../OnyxFabButton/types.js';
+export type OnyxFabProps = OnyxFabButtonProps & {
+    /**
+     * How to align the component relative to the viewport.
+     */
+    alignment?: "left" | "right";
+    /**
+     * Whether the element is expanded or collapsed.
+     * If unset, the open state is manged internally.
+     */
+    open?: Nullable<boolean>;
+};

package/dist/components/OnyxFabButton/types.d.ts

@@ -0,0 +1,17 @@
+import { DensityProp } from '../../composables/density.js';
+import { WithLinkProp } from '../OnyxRouterLink/types.js';
+export type OnyxFabButtonProps = DensityProp & WithLinkProp & {
+    /**
+     * (Aria) Label of the action button that describes the action.
+     */
+    label: string;
+    /**
+     * If `true`, the label will be visually hidden.
+     * For accessibility / screen readers, the aria-label will still be set.
+     */
+    hideLabel?: boolean;
+    /**
+     * Icon to show in the action button.
+     */
+    icon?: string;
+};

package/dist/components/OnyxFabItem/types.d.ts

@@ -0,0 +1,17 @@
+import { DensityProp } from '../../composables/density.js';
+import { WithLinkProp } from '../OnyxRouterLink/types.js';
+export type OnyxFabItemProps = DensityProp & WithLinkProp & {
+    /**
+     * Text label to show
+     */
+    label: string;
+    /**
+     * If `true`, the label will be visually hidden.
+     * For accessibility / screen readers, the aria-label will still be set.
+     */
+    hideLabel?: boolean;
+    /**
+     * Optional icon to show.
+     */
+    icon?: string;
+};

package/dist/components/OnyxNavBar/modules/OnyxMenuItem/OnyxMenuItem.d.vue.ts

@@ -83,6 +83,8 @@ declare function __VLS_template(): {
             };
             $refs: {
                 [x: string]: unknown;
+            } & {
+                buttonRef: HTMLButtonElement;
             };
             $slots: Readonly<{
                 [name: string]: import('vue').Slot<any> | undefined;
@@ -258,6 +260,8 @@ declare const __VLS_component: import('vue').DefineComponent<OnyxMenuItemProps,
         };
         $refs: {
             [x: string]: unknown;
+        } & {
+            buttonRef: HTMLButtonElement;
         };
         $slots: Readonly<{
             [name: string]: import('vue').Slot<any> | undefined;

package/dist/components/OnyxPopover/OnyxPopover.d.vue.ts

@@ -34,7 +34,16 @@ declare function __VLS_template(): {
     rootEl: HTMLDivElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<OnyxPopoverProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<OnyxPopoverProps> & Readonly<{}>, {
+declare const __VLS_component: import('vue').DefineComponent<OnyxPopoverProps, {
+    /**
+     * Actual used popover position.
+     */
+    popoverPosition: import('vue').ComputedRef<"top" | "left" | "right" | "bottom" | "top right" | "top left" | "bottom right" | "bottom left">;
+    /**
+     * Actual used popover alignment.
+     */
+    popoverAlignment: import('vue').ComputedRef<import('../../composables/useOpenAlignment.js', { with: { "resolution-mode": "import" } }).OpenAlignment>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<OnyxPopoverProps> & Readonly<{}>, {
     alignment: import('../../composables/useOpenAlignment.js', { with: { "resolution-mode": "import" } }).OpenAlignment | "auto";
     position: import('../../composables/useAnchorPositionPolyfill.js', { with: { "resolution-mode": "import" } }).AnchorPosition | "auto";
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {

package/dist/components/OnyxSidebar/OnyxSidebar.d.vue.ts

@@ -46,6 +46,7 @@ declare function __VLS_template(): {
                 readonly density?: import('../../composables/density.js', { with: { "resolution-mode": "import" } }).Density | undefined;
                 readonly alert?: boolean | undefined;
                 readonly open?: boolean | undefined;
+                readonly disableClosingOnBackdropClick?: boolean | undefined;
                 readonly alignment?: Exclude<import('../OnyxDialog/types.ts', { with: { "resolution-mode": "import" } }).DialogAlignment, "center"> | undefined;
                 readonly modal?: boolean | undefined;
                 readonly onClose?: (() => any) | undefined;
@@ -129,6 +130,7 @@ declare const __VLS_component: import('vue').DefineComponent<OnyxSidebarProps, {
             readonly density?: import('../../composables/density.js', { with: { "resolution-mode": "import" } }).Density | undefined;
             readonly alert?: boolean | undefined;
             readonly open?: boolean | undefined;
+            readonly disableClosingOnBackdropClick?: boolean | undefined;
             readonly alignment?: Exclude<import('../OnyxDialog/types.ts', { with: { "resolution-mode": "import" } }).DialogAlignment, "center"> | undefined;
             readonly modal?: boolean | undefined;
             readonly onClose?: (() => any) | undefined;

package/dist/index.esm-bundler.js

@@ -465,6 +465,7 @@ const _sfc_main$1r = /* @__PURE__ */ defineComponent({
     label: { type: String, required: true },
     open: { type: Boolean, required: false, default: false },
     modal: { type: Boolean, required: false, default: false },
+    disableClosingOnBackdropClick: { type: Boolean, required: false, default: false },
     alert: { type: Boolean, required: false, default: false },
     alignment: { type: null, required: false, default: "center" }
   },
@@ -483,6 +484,16 @@ const _sfc_main$1r = /* @__PURE__ */ defineComponent({
       if (props.open) openDialog();
       else dialog2.value?.close();
     });
+    const handleBackdropClick = (event) => {
+      const dialogElement = dialog2.value;
+      if (!event.detail || !dialogElement || !props.modal || props.disableClosingOnBackdropClick) {
+        return;
+      }
+      const dialogDimensions = dialogElement.getBoundingClientRect();
+      if (event.clientX < dialogDimensions.left || event.clientX > dialogDimensions.right || event.clientY < dialogDimensions.top || event.clientY > dialogDimensions.bottom) {
+        emit("close");
+      }
+    };
     watch(
       () => props.modal,
       () => {
@@ -492,7 +503,7 @@ const _sfc_main$1r = /* @__PURE__ */ defineComponent({
         }
       }
     );
-    const __returned__ = { props, emit, dialog: dialog2, densityClass, openDialog };
+    const __returned__ = { props, emit, dialog: dialog2, densityClass, openDialog, handleBackdropClick };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }
@@ -512,7 +523,8 @@ function _sfc_render$1r(_ctx, _cache, $props, $setup, $data, $options) {
     "aria-modal": $setup.props.modal,
     "aria-label": $setup.props.label,
     role: $setup.props.alert ? "alertdialog" : void 0,
-    onCancel: _cache[0] || (_cache[0] = withModifiers(($event) => $setup.emit("close"), ["prevent"]))
+    onCancel: _cache[0] || (_cache[0] = withModifiers(($event) => $setup.emit("close"), ["prevent"])),
+    onClick: $setup.handleBackdropClick
   }, [
     renderSlot(_ctx.$slots, "default")
   ], 42, _hoisted_1$11)) : createCommentVNode("v-if", true);
@@ -732,6 +744,22 @@ function _sfc_render$1o(_ctx, _cache, $props, $setup, $data, $options) {
   }, 8, ["id", "class"]));
 }
 const OnyxHeadline = /* @__PURE__ */ _export_sfc(_sfc_main$1o, [["render", _sfc_render$1o], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxHeadline/OnyxHeadline.vue"]]);
+const useAutofocus = (inputRef, props) => {
+  if (!props.autofocus) {
+    return;
+  }
+  onMounted(() => {
+    if (!props.loading) {
+      inputRef.value?.focus();
+      return;
+    }
+    watch(
+      () => !!props.loading,
+      () => inputRef.value?.focus(),
+      { once: true }
+    );
+  });
+};
 const FORM_INJECTION_KEY = Symbol();
 const FORM_INJECTED_SYMBOL = Symbol("FORM_INJECTED_SYMBOL");
 const createCompute = (formProps, props, key, defaultValue) => computed(() => {
@@ -778,11 +806,13 @@ const _sfc_main$1n = /* @__PURE__ */ defineComponent({
   setup(__props, { expose: __expose }) {
     __expose();
     const props = __props;
+    const button = useTemplateRef("buttonRef");
     const { disabled } = useFormContext(props);
     const linkProps = computed(
       () => props.link != void 0 ? extractLinkProps(props.link) : void 0
     );
-    const __returned__ = { props, disabled, linkProps, OnyxRouterLink };
+    useAutofocus(button, props);
+    const __returned__ = { props, button, disabled, linkProps, OnyxRouterLink };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }
@@ -803,6 +833,7 @@ function _sfc_render$1n(_ctx, _cache, $props, $setup, $data, $options) {
     /* FULL_PROPS */
   )) : (openBlock(), createElementBlock("button", {
     key: 1,
+    ref: "buttonRef",
     disabled: $setup.disabled || $setup.props.loading,
     type: $setup.props.type,
     autofocus: $setup.props.autofocus
@@ -870,6 +901,7 @@ const _sfc_main$1l = /* @__PURE__ */ defineComponent({
     density: { type: null, required: false },
     label: { type: String, required: true },
     open: { type: Boolean, required: false },
+    disableClosingOnBackdropClick: { type: Boolean, required: false },
     icon: { type: Object, required: false }
   },
   emits: ["close"],
@@ -1652,22 +1684,6 @@ const useRequired = (props, requiredMarker) => ({
     "onyx-optional-marker": !props.required
   }))
 });
-const useAutofocus = (inputRef, props) => {
-  if (!props.autofocus) {
-    return;
-  }
-  onMounted(() => {
-    if (!props.loading) {
-      inputRef.value?.focus();
-      return;
-    }
-    watch(
-      () => !!props.loading,
-      () => inputRef.value?.focus(),
-      { once: true }
-    );
-  });
-};
 const isValidDate = (date) => {
   return date instanceof Date && !isNaN(date);
 };
@@ -2226,7 +2242,7 @@ const useOutsideClick = ({
   const clickListener = (event) => {
     if (isOutsideClick(event.target)) onOutsideClick(event);
   };
-  useGlobalEventListener({ type: "click", listener: clickListener, disabled });
+  useGlobalEventListener({ type: "mousedown", listener: clickListener, disabled });
   if (checkOnTab) {
     const keydownListener = async (event) => {
       if (event.key !== "Tab") return;
@@ -2543,6 +2559,7 @@ const createMenuButton = createBuilder((options) => {
   const rootRef = createElRef();
   const menuRef = createElRef();
   const buttonId = useId();
+  const position = computed(() => toValue(options.position) ?? "bottom");
   useGlobalEventListener({
     type: "keydown",
     listener: (e) => e.key === "Escape" && setExpanded(false),
@@ -2567,6 +2584,7 @@ const createMenuButton = createBuilder((options) => {
     const currentMenu = currentMenuItem?.closest('[role="menu"]') || menuRef.value;
     if (!currentMenu) return;
     const menuItems = Array.from(currentMenu.querySelectorAll('[role="menuitem"]')).filter((item) => item.closest('[role="menu"]') === currentMenu);
+    if (position.value === "top") menuItems.reverse();
     let nextIndex = 0;
     if (currentMenuItem) {
       const currentIndex = menuItems.indexOf(currentMenuItem);
@@ -2592,11 +2610,11 @@ const createMenuButton = createBuilder((options) => {
     switch (event.key) {
       case "ArrowDown":
         event.preventDefault();
-        focusRelativeItem("next");
+        focusRelativeItem(position.value === "bottom" ? "next" : "prev");
         break;
       case "ArrowUp":
         event.preventDefault();
-        focusRelativeItem("prev");
+        focusRelativeItem(position.value === "bottom" ? "prev" : "next");
         break;
       case "Home":
         event.preventDefault();
@@ -2619,7 +2637,7 @@ const createMenuButton = createBuilder((options) => {
     }
   };
   const triggerEvents = computed(() => {
-    if (options.trigger.value !== "hover") return;
+    if (toValue(options.trigger) !== "hover") return;
     return {
       onMouseenter: () => setExpanded(true),
       onMouseleave: () => setExpanded(false, true)
@@ -2645,7 +2663,7 @@ const createMenuButton = createBuilder((options) => {
           "aria-expanded": options.isExpanded.value,
           "aria-haspopup": true,
           onFocus: () => setExpanded(true, true),
-          onClick: () => options.trigger.value == "click" ? setExpanded(!options.isExpanded.value) : void 0,
+          onClick: () => toValue(options.trigger) == "click" ? setExpanded(!options.isExpanded.value) : void 0,
           id: buttonId,
           disabled: options.disabled?.value
         })
@@ -4242,7 +4260,6 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
     disabled: { type: Boolean, required: false }
   },
   setup(__props, { expose: __expose }) {
-    __expose();
     const props = __props;
     const _isVisible = ref(false);
     const isVisible = computed({
@@ -4255,6 +4272,16 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
     const popoverAlignment = computed(
       () => props.alignment === "auto" ? openAlignment.value : props.alignment
     );
+    __expose({
+      /**
+       * Actual used popover position.
+       */
+      popoverPosition,
+      /**
+       * Actual used popover alignment.
+       */
+      popoverAlignment
+    });
     const disabled = computed(() => props.disabled);
     const positionAndAlignment = computed(() => {
       let returnPosition = popoverPosition.value;
@@ -4340,7 +4367,7 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
         "onyx-popover__dialog--dont-support-anchor": !userAgentSupportsAnchorApi.value
       };
     });
-    watch([disabled], () => {
+    watch(disabled, () => {
       if (disabled.value) {
         _isVisible.value = false;
       }
@@ -4412,15 +4439,20 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
       default: false
     });
     const slots = useSlots();
+    const popover = ref();
+    const actualPosition = computed(() => popover.value?.popoverPosition);
     const {
       elements: { root, button, menu: menu2 }
     } = createMenuButton({
       isExpanded: computed(() => !!isExpanded.value),
       onToggle: () => isExpanded.value = !isExpanded.value,
       trigger: computed(() => props.trigger),
-      disabled: computed(() => props.disabled)
+      disabled: computed(() => props.disabled),
+      position: computed(() => actualPosition.value?.includes("top") ? "top" : "bottom")
     });
-    const __returned__ = { props, emit, isExpanded, slots, root, button, menu: menu2, OnyxPopover };
+    const __returned__ = { props, emit, isExpanded, slots, popover, actualPosition, root, button, menu: menu2, get mergeVueProps() {
+      return mergeVueProps;
+    }, OnyxPopover };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }
@@ -4428,7 +4460,8 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
 const _hoisted_1$H = { class: "onyx-flyout-menu__list-header" };
 const _hoisted_2$w = { class: "onyx-flyout-menu__list-footer" };
 function _sfc_render$Z(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createBlock($setup["OnyxPopover"], mergeProps({ class: "onyx-component onyx-flyout-menu" }, $setup.root, {
+  return openBlock(), createBlock($setup["OnyxPopover"], mergeProps($setup.mergeVueProps($setup.root, { ref: $setup.popover }), {
+    class: "onyx-component onyx-flyout-menu",
     open: $setup.isExpanded,
     label: $setup.props.label,
     alignment: $setup.props.alignment,
@@ -7446,6 +7479,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
     density: { type: null, required: false },
     label: { type: String, required: true },
     open: { type: Boolean, required: false },
+    disableClosingOnBackdropClick: { type: Boolean, required: false },
     alert: { type: Boolean, required: false }
   },
   emits: ["close"],
@@ -7534,6 +7568,7 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
     density: { type: null, required: false },
     label: { type: String, required: true },
     open: { type: Boolean, required: false },
+    disableClosingOnBackdropClick: { type: Boolean, required: false },
     alert: { type: Boolean, required: false },
     alignment: { type: null, required: false, default: "left" },
     modal: { type: Boolean, required: false, default: true }