sit-onyx 1.1.0 → 1.2.0-dev-20251008133229

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

@@ -10,6 +10,13 @@ declare function __VLS_template(): {
          * Slot to provide optional buttons/actions.
          */
         buttons?(): unknown;
+        /**
+         * Optional custom header actions to display inside a flyout menu.
+         * Note that the `closable` property will not have any effect when custom header actions are set.
+         * Please provide a close menu item manually via the header actions then.
+         * You must only put [OnyxMenuItem](https://storybook.onyx.schwarz/?path=/docs/basic-menuitem--docs) components here.
+         */
+        headerActions?(): unknown;
     }> & {
         /**
          * Slot to provide description / further information.
@@ -19,6 +26,13 @@ declare function __VLS_template(): {
          * Slot to provide optional buttons/actions.
          */
         buttons?(): unknown;
+        /**
+         * Optional custom header actions to display inside a flyout menu.
+         * Note that the `closable` property will not have any effect when custom header actions are set.
+         * Please provide a close menu item manually via the header actions then.
+         * You must only put [OnyxMenuItem](https://storybook.onyx.schwarz/?path=/docs/basic-menuitem--docs) components here.
+         */
+        headerActions?(): unknown;
     };
     refs: {};
     rootEl: HTMLDivElement;

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

@@ -16,6 +16,8 @@ export type OnyxInfoCardProps = DensityProp & {
     icon?: string | false;
     /**
      * Whether the info card can be closed. Will show an "x" icon.
+     * If you provide custom `headerActions`, the close button will not be visible.
+     * Please provide a custom menu item inside your header actions then.
      */
     closable?: boolean;
 };

package/dist/index.esm-bundler.js

@@ -1,5 +1,5 @@
 import { computed, provide, inject, toRef, ref, watch, defineComponent, watchEffect, toRefs, createElementBlock, openBlock, normalizeClass, renderSlot, onMounted, createBlock, resolveDynamicComponent, withCtx, createVNode, createElementVNode, withModifiers, readonly, reactive, onBeforeMount, onBeforeUnmount, useId, toValue, nextTick, unref, shallowRef, useTemplateRef, createCommentVNode, createTextVNode, toDisplayString, normalizeProps, mergeProps, Fragment, useAttrs, isProxy, toRaw, customRef, onUnmounted, normalizeStyle, useSlots, createSlots, renderList, toHandlers, resolveComponent, withDirectives, guardReactiveProps, vShow, Teleport, vModelCheckbox, vModelText, h, vModelDynamic, withKeys, createStaticVNode, useModel } from "vue";
-import { iconChevronDownSmall, iconCircleAttention, iconXSmall, iconX, iconMoreHorizontalSmall, iconCircleCheck, iconCircleX, iconCircleInformation, iconUser, iconArrowSmallUpRight, iconChevronRightSmall, iconArrowSmallLeft, iconMoreHorizontal, iconHome, iconChevronLeftSmall, iconSearch, iconCheck, iconSearchX, iconChevronDownUp, iconCheckSmall, iconPlusSmall, iconEyeDisabled, iconListArrowUp, iconListArrowDown, iconArrowsSort, iconCircleBlock, iconFileDisabled, iconEyeClosed, iconEye, iconCircleContrast, iconTranslate, iconMoreVertical, iconMenu, iconNotificationFlag, iconPlus, iconMinus, iconFile, iconFilePdf, iconFileCsv, iconAudio, iconVideocam, iconPicture, iconFileRtf, iconFilePpt, iconFileXls, iconFileXlsx, iconFileDoc, iconFileGlobe, iconFileArchive, iconFileText, iconTrash, iconCloudArrowUp, iconShareIos, iconSettings, iconLogout, iconArrowSmallRight } from "@sit-onyx/icons";
+import { iconChevronDownSmall, iconCircleAttention, iconXSmall, iconX, iconMoreHorizontalSmall, iconMoreVertical, iconCircleCheck, iconCircleX, iconCircleInformation, iconUser, iconArrowSmallUpRight, iconChevronRightSmall, iconArrowSmallLeft, iconMoreHorizontal, iconHome, iconChevronLeftSmall, iconSearch, iconCheck, iconSearchX, iconChevronDownUp, iconCheckSmall, iconPlusSmall, iconEyeDisabled, iconListArrowUp, iconListArrowDown, iconArrowsSort, iconCircleBlock, iconFileDisabled, iconEyeClosed, iconEye, iconCircleContrast, iconTranslate, iconMenu, iconNotificationFlag, iconPlus, iconMinus, iconFile, iconFilePdf, iconFileCsv, iconAudio, iconVideocam, iconPicture, iconFileRtf, iconFilePpt, iconFileXls, iconFileXlsx, iconFileDoc, iconFileGlobe, iconFileArchive, iconFileText, iconTrash, iconCloudArrowUp, iconShareIos, iconSettings, iconLogout, iconArrowSmallRight } from "@sit-onyx/icons";
 const DENSITIES = ["compact", "default", "cozy"];
 const useDensity = (props) => ({
   densityClass: computed(() => ({ [`onyx-density-${props.density}`]: !!props.density }))
@@ -3156,20 +3156,23 @@ const _sfc_main$1i = /* @__PURE__ */ defineComponent({
     const slots = useSlots();
     const { t } = injectI18n();
     const { densityClass } = useDensity(props);
-    const __returned__ = { props, emit, slots, t, densityClass, get iconXSmall() {
+    const systemButtonColor = computed(() => props.color === "neutral" ? "soft" : "medium");
+    const __returned__ = { props, emit, slots, t, densityClass, systemButtonColor, get iconMoreVertical() {
+      return iconMoreVertical;
+    }, get iconXSmall() {
       return iconXSmall;
-    }, OnyxHeadline, OnyxIcon, OnyxSystemButton };
+    }, OnyxHeadline, OnyxIcon, OnyxFlyoutMenu, OnyxSystemButton };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }
 });
 const _hoisted_1$X = { class: "onyx-info-card__content" };
 const _hoisted_2$J = {
-  key: 2,
+  key: 3,
   class: "onyx-info-card__description onyx-text--small"
 };
 const _hoisted_3$v = {
-  key: 3,
+  key: 4,
   class: "onyx-info-card__buttons onyx-density-compact"
 };
 function _sfc_render$1i(_ctx, _cache, $props, $setup, $data, $options) {
@@ -3200,12 +3203,31 @@ function _sfc_render$1i(_ctx, _cache, $props, $setup, $data, $options) {
           _: 1
           /* STABLE */
         })) : createCommentVNode("v-if", true),
-        $setup.props.closable ? (openBlock(), createBlock($setup["OnyxSystemButton"], {
+        $setup.slots.headerActions ? (openBlock(), createBlock($setup["OnyxFlyoutMenu"], {
           key: 1,
-          class: "onyx-info-card__close",
+          class: "onyx-info-card__action",
+          label: $setup.t("notificationCard.moreActions"),
+          trigger: "click",
+          alignment: "right"
+        }, {
+          button: withCtx(({ trigger }) => [
+            createVNode($setup["OnyxSystemButton"], mergeProps(trigger, {
+              label: $setup.t("notificationCard.toggleActions"),
+              icon: $setup.iconMoreVertical,
+              color: $setup.systemButtonColor
+            }), null, 16, ["label", "icon", "color"])
+          ]),
+          options: withCtx(() => [
+            renderSlot(_ctx.$slots, "headerActions")
+          ]),
+          _: 3
+          /* FORWARDED */
+        }, 8, ["label"])) : $setup.props.closable ? (openBlock(), createBlock($setup["OnyxSystemButton"], {
+          key: 2,
+          class: "onyx-info-card__close onyx-info-card__action",
           icon: $setup.iconXSmall,
           label: $setup.t("close"),
-          color: $setup.props.color === "neutral" ? "soft" : "medium",
+          color: $setup.systemButtonColor,
           onClick: _cache[0] || (_cache[0] = ($event) => $setup.emit("close"))
         }, null, 8, ["icon", "label", "color"])) : createCommentVNode("v-if", true),
         !!$setup.slots.default ? (openBlock(), createElementBlock("p", _hoisted_2$J, [