@mekari/pixel3-broadcast 0.0.1-dev.0

package/dist/broadcast.d.mts

@@ -0,0 +1,81 @@
+import * as vue_jsx_runtime from 'vue/jsx-runtime';
+import { BroadcastVariant } from './modules/broadcast.types.mjs';
+import * as vue from 'vue';
+import '@mekari/pixel3-utils';
+
+/**
+ * MpBroadcast component used to global information for users in the app.
+ */
+declare const MpBroadcast: vue.DefineComponent<{
+    id: {
+        type: vue.PropType<string | undefined>;
+    };
+    variant: {
+        type: vue.PropType<BroadcastVariant | undefined>;
+        default: string;
+    };
+    content: {
+        type: vue.PropType<string | undefined>;
+    };
+    textLink: {
+        type: vue.PropType<string | undefined>;
+    };
+    textLinkHref: {
+        type: vue.PropType<string | undefined>;
+    };
+    iconName: {
+        type: vue.PropType<string | undefined>;
+    };
+    textAdditionalAction: {
+        type: vue.PropType<string | undefined>;
+    };
+    hasAdditionalAction: {
+        type: vue.PropType<boolean | undefined>;
+        default: boolean;
+    };
+    isClosable: {
+        type: vue.PropType<boolean | undefined>;
+        default: boolean;
+    };
+}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("click-additional-action" | "click-text-link" | "click-close-button")[], "click-additional-action" | "click-text-link" | "click-close-button", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    id: {
+        type: vue.PropType<string | undefined>;
+    };
+    variant: {
+        type: vue.PropType<BroadcastVariant | undefined>;
+        default: string;
+    };
+    content: {
+        type: vue.PropType<string | undefined>;
+    };
+    textLink: {
+        type: vue.PropType<string | undefined>;
+    };
+    textLinkHref: {
+        type: vue.PropType<string | undefined>;
+    };
+    iconName: {
+        type: vue.PropType<string | undefined>;
+    };
+    textAdditionalAction: {
+        type: vue.PropType<string | undefined>;
+    };
+    hasAdditionalAction: {
+        type: vue.PropType<boolean | undefined>;
+        default: boolean;
+    };
+    isClosable: {
+        type: vue.PropType<boolean | undefined>;
+        default: boolean;
+    };
+}>> & {
+    "onClick-additional-action"?: ((...args: any[]) => any) | undefined;
+    "onClick-text-link"?: ((...args: any[]) => any) | undefined;
+    "onClick-close-button"?: ((...args: any[]) => any) | undefined;
+}, {
+    variant: BroadcastVariant | undefined;
+    hasAdditionalAction: boolean | undefined;
+    isClosable: boolean | undefined;
+}, {}>;
+
+export { MpBroadcast };

package/dist/broadcast.d.ts

@@ -0,0 +1,81 @@
+import * as vue_jsx_runtime from 'vue/jsx-runtime';
+import { BroadcastVariant } from './modules/broadcast.types.js';
+import * as vue from 'vue';
+import '@mekari/pixel3-utils';
+
+/**
+ * MpBroadcast component used to global information for users in the app.
+ */
+declare const MpBroadcast: vue.DefineComponent<{
+    id: {
+        type: vue.PropType<string | undefined>;
+    };
+    variant: {
+        type: vue.PropType<BroadcastVariant | undefined>;
+        default: string;
+    };
+    content: {
+        type: vue.PropType<string | undefined>;
+    };
+    textLink: {
+        type: vue.PropType<string | undefined>;
+    };
+    textLinkHref: {
+        type: vue.PropType<string | undefined>;
+    };
+    iconName: {
+        type: vue.PropType<string | undefined>;
+    };
+    textAdditionalAction: {
+        type: vue.PropType<string | undefined>;
+    };
+    hasAdditionalAction: {
+        type: vue.PropType<boolean | undefined>;
+        default: boolean;
+    };
+    isClosable: {
+        type: vue.PropType<boolean | undefined>;
+        default: boolean;
+    };
+}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("click-additional-action" | "click-text-link" | "click-close-button")[], "click-additional-action" | "click-text-link" | "click-close-button", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    id: {
+        type: vue.PropType<string | undefined>;
+    };
+    variant: {
+        type: vue.PropType<BroadcastVariant | undefined>;
+        default: string;
+    };
+    content: {
+        type: vue.PropType<string | undefined>;
+    };
+    textLink: {
+        type: vue.PropType<string | undefined>;
+    };
+    textLinkHref: {
+        type: vue.PropType<string | undefined>;
+    };
+    iconName: {
+        type: vue.PropType<string | undefined>;
+    };
+    textAdditionalAction: {
+        type: vue.PropType<string | undefined>;
+    };
+    hasAdditionalAction: {
+        type: vue.PropType<boolean | undefined>;
+        default: boolean;
+    };
+    isClosable: {
+        type: vue.PropType<boolean | undefined>;
+        default: boolean;
+    };
+}>> & {
+    "onClick-additional-action"?: ((...args: any[]) => any) | undefined;
+    "onClick-text-link"?: ((...args: any[]) => any) | undefined;
+    "onClick-close-button"?: ((...args: any[]) => any) | undefined;
+}, {
+    variant: BroadcastVariant | undefined;
+    hasAdditionalAction: boolean | undefined;
+    isClosable: boolean | undefined;
+}, {}>;
+
+export { MpBroadcast };

package/dist/broadcast.js

@@ -0,0 +1,201 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/broadcast.tsx
+var broadcast_exports = {};
+__export(broadcast_exports, {
+  MpBroadcast: () => MpBroadcast
+});
+module.exports = __toCommonJS(broadcast_exports);
+var import_vue2 = require("vue");
+var import_vue3 = require("vue");
+
+// src/modules/broadcast.props.ts
+var import_pixel3_utils = require("@mekari/pixel3-utils");
+var broadcastProps = {
+  id: {
+    type: String
+  },
+  variant: {
+    type: String,
+    default: "announcement"
+  },
+  content: {
+    type: String
+  },
+  textLink: {
+    type: String
+  },
+  textLinkHref: {
+    type: String
+  },
+  iconName: {
+    type: String
+  },
+  textAdditionalAction: {
+    type: String
+  },
+  hasAdditionalAction: {
+    type: Boolean,
+    default: false
+  },
+  isClosable: {
+    type: Boolean,
+    default: false
+  }
+};
+var broadcastEmits = (0, import_pixel3_utils.declareEmit)(["click-additional-action", "click-text-link", "click-close-button"]);
+
+// src/modules/broadcast.hooks.ts
+var import_vue = require("vue");
+var import_recipes = require("@mekari/pixel3-styled-system/recipes");
+
+// src/modules/broadcast.connects.ts
+var import_pixel3_utils2 = require("@mekari/pixel3-utils");
+function broadcastConnect(state, emit, classes) {
+  const {
+    id,
+    variant,
+    iconName,
+    content,
+    hasAdditionalAction,
+    isClosable,
+    textLink,
+    textLinkHref,
+    textAdditionalAction
+  } = state;
+  const idx = id != null ? id : `mp-broadcast-${(0, import_pixel3_utils2.useId)()}`;
+  return {
+    variant,
+    iconName,
+    content,
+    textLink,
+    textAdditionalAction,
+    hasAdditionalAction,
+    isClosable,
+    rootProps: {
+      id: idx,
+      class: classes.root,
+      "data-pixel-component": "MpBroadcast"
+    },
+    containerProps: {
+      id: `${idx}-container`,
+      class: classes.container,
+      "data-pixel-component": "MpBroadcastContainer"
+    },
+    wrapperProps: {
+      id: `${idx}-wrapper`,
+      class: classes.wrapper,
+      "data-pixel-component": "MpBroadcastWrapper"
+    },
+    iconProps: {
+      id: `${idx}-icon`,
+      name: iconName,
+      size: "md",
+      variant: "fill",
+      class: classes.icon,
+      "data-pixel-component": "MpBroadcastIcon"
+    },
+    contentProps: {
+      id: `${idx}-content`,
+      class: classes.content,
+      "data-pixel-component": "MpBroadcastContent"
+    },
+    textLinkProps: {
+      id: `${idx}-text-link`,
+      as: "a",
+      href: textLinkHref,
+      weight: "semiBold",
+      onClick: (evt) => emit("click-text-link", evt),
+      class: classes.textLink,
+      "data-pixel-component": "MpBroadcastTextLink"
+    },
+    actionProps: {
+      id: `${idx}-action`,
+      variant: "secondary",
+      size: "sm",
+      "aria-labelledby": textAdditionalAction,
+      onClick: (evt) => emit("click-additional-action", evt),
+      class: classes.action,
+      "data-pixel-component": "MpBroadcastAction"
+    },
+    closeProps: {
+      id: `${idx}-close`,
+      leftIcon: "close",
+      variant: "ghost",
+      size: "sm",
+      "aria-label": "Close button",
+      onClick: (evt) => emit("click-close-button", evt),
+      class: classes.close,
+      "data-pixel-component": "MpBroadcastClose"
+    }
+  };
+}
+__name(broadcastConnect, "broadcastConnect");
+
+// src/modules/broadcast.hooks.ts
+var useBroadcast = /* @__PURE__ */ __name((props, emit) => {
+  const context = (0, import_vue.ref)(props);
+  const [value] = import_recipes.broadcastSlotRecipe.splitVariantProps(context.value);
+  const classes = (0, import_recipes.broadcastSlotRecipe)(value);
+  return (0, import_vue.computed)(() => broadcastConnect(context.value, emit, classes));
+}, "useBroadcast");
+
+// src/modules/broadcast.utils.ts
+var getMaxWidthContent = /* @__PURE__ */ __name((hasAdditionalAction, isClosable) => {
+  let actionWidth = 0;
+  if (hasAdditionalAction)
+    actionWidth += 112;
+  if (isClosable)
+    actionWidth += 42;
+  return `calc(100% - ${actionWidth}px)`;
+}, "getMaxWidthContent");
+
+// src/broadcast.tsx
+var import_pixel3_button = require("@mekari/pixel3-button");
+var import_pixel3_icon = require("@mekari/pixel3-icon");
+var import_pixel3_text = require("@mekari/pixel3-text");
+var MpBroadcast = (0, import_vue3.defineComponent)({
+  name: "MpBroadcast",
+  props: broadcastProps,
+  emits: broadcastEmits,
+  setup(props, {
+    emit
+  }) {
+    const api = useBroadcast(props, emit);
+    return () => (0, import_vue2.createVNode)("div", api.value.rootProps, [(0, import_vue2.createVNode)("div", api.value.containerProps, [(0, import_vue2.createVNode)("div", (0, import_vue2.mergeProps)({
+      "style": {
+        "--mp-broadcast--width": getMaxWidthContent(api.value.hasAdditionalAction, api.value.isClosable)
+      }
+    }, api.value.wrapperProps), [api.value.variant !== "announcement" && api.value.iconName && (0, import_vue2.createVNode)(import_pixel3_icon.MpIcon, api.value.iconProps, null), (0, import_vue2.createVNode)(import_pixel3_text.MpText, (0, import_vue2.mergeProps)(api.value.contentProps, {
+      "is-truncated": true
+    }), {
+      default: () => [api.value.content]
+    }), api.value.textLink && (0, import_vue2.createVNode)(import_pixel3_text.MpText, api.value.textLinkProps, {
+      default: () => [api.value.textLink]
+    })]), (0, import_vue2.createVNode)("div", api.value.wrapperProps, [api.value.hasAdditionalAction && (0, import_vue2.createVNode)(import_pixel3_button.MpButton, api.value.actionProps, {
+      default: () => [api.value.textAdditionalAction]
+    }), api.value.isClosable && (0, import_vue2.createVNode)(import_pixel3_button.MpButton, api.value.closeProps, null)])])]);
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MpBroadcast
+});

package/dist/broadcast.mjs

@@ -0,0 +1,11 @@
+import {
+  MpBroadcast
+} from "./chunk-2MCZAW3F.mjs";
+import "./chunk-PTIK2HZP.mjs";
+import "./chunk-JP4CQC7M.mjs";
+import "./chunk-5IQVO6NS.mjs";
+import "./chunk-P5REXKKG.mjs";
+import "./chunk-QZ7VFGWC.mjs";
+export {
+  MpBroadcast
+};

package/dist/chunk-2MCZAW3F.mjs

@@ -0,0 +1,44 @@
+import {
+  useBroadcast
+} from "./chunk-PTIK2HZP.mjs";
+import {
+  broadcastEmits,
+  broadcastProps
+} from "./chunk-5IQVO6NS.mjs";
+import {
+  getMaxWidthContent
+} from "./chunk-P5REXKKG.mjs";
+
+// src/broadcast.tsx
+import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
+import { defineComponent } from "vue";
+import { MpButton } from "@mekari/pixel3-button";
+import { MpIcon } from "@mekari/pixel3-icon";
+import { MpText } from "@mekari/pixel3-text";
+var MpBroadcast = defineComponent({
+  name: "MpBroadcast",
+  props: broadcastProps,
+  emits: broadcastEmits,
+  setup(props, {
+    emit
+  }) {
+    const api = useBroadcast(props, emit);
+    return () => _createVNode("div", api.value.rootProps, [_createVNode("div", api.value.containerProps, [_createVNode("div", _mergeProps({
+      "style": {
+        "--mp-broadcast--width": getMaxWidthContent(api.value.hasAdditionalAction, api.value.isClosable)
+      }
+    }, api.value.wrapperProps), [api.value.variant !== "announcement" && api.value.iconName && _createVNode(MpIcon, api.value.iconProps, null), _createVNode(MpText, _mergeProps(api.value.contentProps, {
+      "is-truncated": true
+    }), {
+      default: () => [api.value.content]
+    }), api.value.textLink && _createVNode(MpText, api.value.textLinkProps, {
+      default: () => [api.value.textLink]
+    })]), _createVNode("div", api.value.wrapperProps, [api.value.hasAdditionalAction && _createVNode(MpButton, api.value.actionProps, {
+      default: () => [api.value.textAdditionalAction]
+    }), api.value.isClosable && _createVNode(MpButton, api.value.closeProps, null)])])]);
+  }
+});
+
+export {
+  MpBroadcast
+};

package/dist/chunk-5IQVO6NS.mjs

@@ -0,0 +1,40 @@
+// src/modules/broadcast.props.ts
+import { declareEmit } from "@mekari/pixel3-utils";
+var broadcastProps = {
+  id: {
+    type: String
+  },
+  variant: {
+    type: String,
+    default: "announcement"
+  },
+  content: {
+    type: String
+  },
+  textLink: {
+    type: String
+  },
+  textLinkHref: {
+    type: String
+  },
+  iconName: {
+    type: String
+  },
+  textAdditionalAction: {
+    type: String
+  },
+  hasAdditionalAction: {
+    type: Boolean,
+    default: false
+  },
+  isClosable: {
+    type: Boolean,
+    default: false
+  }
+};
+var broadcastEmits = declareEmit(["click-additional-action", "click-text-link", "click-close-button"]);
+
+export {
+  broadcastProps,
+  broadcastEmits
+};

package/dist/chunk-JP4CQC7M.mjs

@@ -0,0 +1,90 @@
+import {
+  __name
+} from "./chunk-QZ7VFGWC.mjs";
+
+// src/modules/broadcast.connects.ts
+import { useId } from "@mekari/pixel3-utils";
+function broadcastConnect(state, emit, classes) {
+  const {
+    id,
+    variant,
+    iconName,
+    content,
+    hasAdditionalAction,
+    isClosable,
+    textLink,
+    textLinkHref,
+    textAdditionalAction
+  } = state;
+  const idx = id != null ? id : `mp-broadcast-${useId()}`;
+  return {
+    variant,
+    iconName,
+    content,
+    textLink,
+    textAdditionalAction,
+    hasAdditionalAction,
+    isClosable,
+    rootProps: {
+      id: idx,
+      class: classes.root,
+      "data-pixel-component": "MpBroadcast"
+    },
+    containerProps: {
+      id: `${idx}-container`,
+      class: classes.container,
+      "data-pixel-component": "MpBroadcastContainer"
+    },
+    wrapperProps: {
+      id: `${idx}-wrapper`,
+      class: classes.wrapper,
+      "data-pixel-component": "MpBroadcastWrapper"
+    },
+    iconProps: {
+      id: `${idx}-icon`,
+      name: iconName,
+      size: "md",
+      variant: "fill",
+      class: classes.icon,
+      "data-pixel-component": "MpBroadcastIcon"
+    },
+    contentProps: {
+      id: `${idx}-content`,
+      class: classes.content,
+      "data-pixel-component": "MpBroadcastContent"
+    },
+    textLinkProps: {
+      id: `${idx}-text-link`,
+      as: "a",
+      href: textLinkHref,
+      weight: "semiBold",
+      onClick: (evt) => emit("click-text-link", evt),
+      class: classes.textLink,
+      "data-pixel-component": "MpBroadcastTextLink"
+    },
+    actionProps: {
+      id: `${idx}-action`,
+      variant: "secondary",
+      size: "sm",
+      "aria-labelledby": textAdditionalAction,
+      onClick: (evt) => emit("click-additional-action", evt),
+      class: classes.action,
+      "data-pixel-component": "MpBroadcastAction"
+    },
+    closeProps: {
+      id: `${idx}-close`,
+      leftIcon: "close",
+      variant: "ghost",
+      size: "sm",
+      "aria-label": "Close button",
+      onClick: (evt) => emit("click-close-button", evt),
+      class: classes.close,
+      "data-pixel-component": "MpBroadcastClose"
+    }
+  };
+}
+__name(broadcastConnect, "broadcastConnect");
+
+export {
+  broadcastConnect
+};

package/dist/chunk-P5REXKKG.mjs

@@ -0,0 +1,17 @@
+import {
+  __name
+} from "./chunk-QZ7VFGWC.mjs";
+
+// src/modules/broadcast.utils.ts
+var getMaxWidthContent = /* @__PURE__ */ __name((hasAdditionalAction, isClosable) => {
+  let actionWidth = 0;
+  if (hasAdditionalAction)
+    actionWidth += 112;
+  if (isClosable)
+    actionWidth += 42;
+  return `calc(100% - ${actionWidth}px)`;
+}, "getMaxWidthContent");
+
+export {
+  getMaxWidthContent
+};

package/dist/chunk-PTIK2HZP.mjs

@@ -0,0 +1,20 @@
+import {
+  broadcastConnect
+} from "./chunk-JP4CQC7M.mjs";
+import {
+  __name
+} from "./chunk-QZ7VFGWC.mjs";
+
+// src/modules/broadcast.hooks.ts
+import { computed, ref } from "vue";
+import { broadcastSlotRecipe } from "@mekari/pixel3-styled-system/recipes";
+var useBroadcast = /* @__PURE__ */ __name((props, emit) => {
+  const context = ref(props);
+  const [value] = broadcastSlotRecipe.splitVariantProps(context.value);
+  const classes = broadcastSlotRecipe(value);
+  return computed(() => broadcastConnect(context.value, emit, classes));
+}, "useBroadcast");
+
+export {
+  useBroadcast
+};

package/dist/chunk-QZ7VFGWC.mjs

@@ -0,0 +1,6 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+export {
+  __name
+};

package/dist/index.d.mts

@@ -0,0 +1,5 @@
+export { MpBroadcast } from './broadcast.mjs';
+export { BroadcastProps } from './modules/broadcast.types.mjs';
+import 'vue/jsx-runtime';
+import 'vue';
+import '@mekari/pixel3-utils';

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { MpBroadcast } from './broadcast.js';
+export { BroadcastProps } from './modules/broadcast.types.js';
+import 'vue/jsx-runtime';
+import 'vue';
+import '@mekari/pixel3-utils';