@rei/cedar 13.5.2 → 14.0.0-ts.0

package/dist/src/components/popover/CdrPopover.vue.mjs

@@ -1,152 +1,9 @@
-import { defineComponent as P, ref as u, watch as E, onMounted as S, useCssModule as k, resolveComponent as m, openBlock as y, createElementBlock as b, normalizeClass as l, createElementVNode as f, renderSlot as a, createVNode as v, withCtx as h, createTextVNode as q, toDisplayString as T, createCommentVNode as B } from "vue";
-import M from "tabbable";
-import N from "../icon/comps/x-sm.vue.mjs";
-import V from "../button/CdrButton.vue.mjs";
-import w from "../popup/CdrPopup.vue.mjs";
-import A from "../../utils/propValidator.mjs";
-import O from "../../utils/mapClasses.mjs";
-import z from "./styles/CdrPopover.module.scss.mjs";
-import D from "../../../_virtual/_plugin-vue_export-helper.mjs";
-const H = P({
-  name: "CdrPopover",
-  components: {
-    IconXSm: N,
-    CdrButton: V,
-    CdrPopup: w
-  },
-  props: {
-    /**
-     * Sets the position where the popover will render relative to the trigger element.
-     * @demoSelectMultiple false
-     * @values top, bottom, left, right
-     */
-    position: {
-      type: String,
-      required: !1,
-      default: "top",
-      validator: (e) => A(e, ["top", "bottom", "left", "right"])
-    },
-    /**
-     * If set to `true`, popover will attempt to dynamically set it's position to
-     * ensure it renders within the visible browser window.
-     * If `false` the popover will always render in the provided `position`.
-     */
-    autoPosition: {
-      type: Boolean,
-      required: !1,
-      default: !0
-    },
-    /** Sets the title for the popover content. Can also be provided via the `title` slot. */
-    label: {
-      type: String,
-      required: !1
-    },
-    /** ID for the popover element, required for accessibility */
-    id: {
-      type: String,
-      required: !0
-    },
-    /** Add custom class to the popover content wrapper. Allows for overriding size, styling, etc. */
-    contentClass: {
-      type: String,
-      required: !1
-    },
-    /**
-     * Used to programmatically control the popover state. Does not need to be set if you are using the `trigger` slot.
-     * @demoIgnore true
-     */
-    open: {
-      type: Boolean,
-      default: !1,
-      required: !1
-    }
-  },
-  emits: {
-    /** Emits when popover is opened */
-    opened: null,
-    /** Emits when popover is closed */
-    closed: null
-  },
-  setup(e, t) {
-    const s = u(!1);
-    let n;
-    const i = u(null), p = u(null), d = t.slots.trigger, c = t.slots.title || e.label, r = (o) => {
-      if (s.value === !0)
-        return;
-      const {
-        activeElement: $
-      } = document;
-      n = $, s.value = !0, t.emit("opened", o), setTimeout(() => {
-        const C = M(p.value.$el);
-        C[0] && C[0].focus();
-      }, 50);
-    }, g = (o) => {
-      s.value = !1, t.emit("closed", o), n && n.focus();
-    }, _ = () => {
-      const o = i.value.children[0];
-      o && o.addEventListener("click", r);
-    };
-    return E(() => e.open, () => {
-      e.open ? r() : g();
-    }), S(() => {
-      _();
-      const o = i.value.children[0];
-      o && (o.setAttribute("aria-controls", e.id), o.setAttribute("aria-haspopup", "dialog"));
-    }), {
-      style: k(),
-      mapClasses: O,
-      hasTrigger: d,
-      triggerEl: i,
-      popupEl: p,
-      closePopover: g,
-      openPopover: r,
-      isOpen: s,
-      hasTitle: c
-    };
-  }
-}), I = {
-  ref: "triggerEl"
-};
-function L(e, t, s, n, i, p) {
-  const d = m("icon-x-sm"), c = m("cdr-button"), r = m("cdr-popup");
-  return y(), b("div", {
-    class: l(e.mapClasses(e.style, "cdr-popover--wrapper", e.hasTrigger && "cdr-popover--position"))
-  }, [f("div", I, [a(e.$slots, "trigger")], 512), v(r, {
-    role: "dialog",
-    ref: "popupEl",
-    onClosed: e.closePopover,
-    position: e.position,
-    "auto-position": e.autoPosition,
-    opened: e.isOpen,
-    "aria-expanded": `${e.isOpen}`,
-    id: e.id,
-    "content-class": e.contentClass
-  }, {
-    default: h(() => [f("div", {
-      class: l(e.style["cdr-popover__container"])
-    }, [f("div", {
-      class: l(e.style["cdr-popover__content"])
-    }, [e.hasTitle ? (y(), b("div", {
-      key: 0,
-      class: l(e.style["cdr-popover__title"])
-    }, [a(e.$slots, "title", {}, () => [q(T(e.label), 1)])], 2)) : B("", !0), a(e.$slots, "default")], 2), v(c, {
-      class: l(e.style["cdr-popover__close-button"]),
-      "icon-only": "",
-      onClick: e.closePopover,
-      "aria-label": "Close",
-      size: "small"
-    }, {
-      default: h(() => [a(e.$slots, "icon", {}, () => [v(d, {
-        "inherit-color": ""
-      })])]),
-      _: 3
-    }, 8, ["class", "onClick"])], 2)]),
-    _: 3
-  }, 8, ["onClosed", "position", "auto-position", "opened", "aria-expanded", "id", "content-class"])], 2);
-}
-const X = {
-  $style: z
-}, Y = /* @__PURE__ */ D(H, [["render", L], ["__cssModules", X]]);
+import o from "./CdrPopover.vue2.mjs";
+import s from "./styles/CdrPopover.module.scss.mjs";
+import r from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const t = {
+  $style: s
+}, f = /* @__PURE__ */ r(o, [["__cssModules", t]]);
 export {
-  Y as default
+  f as default
 };

package/dist/src/components/popover/CdrPopover.vue2.mjs

@@ -0,0 +1,136 @@
+import { defineComponent as _, useSlots as B, useCssModule as N, ref as u, watch as T, onMounted as V, openBlock as E, createElementBlock as P, normalizeClass as i, unref as r, createElementVNode as f, renderSlot as a, createVNode as m, withCtx as k, createTextVNode as w, toDisplayString as A, createCommentVNode as x } from "vue";
+import z from "tabbable";
+import M from "../icon/comps/x-sm.vue.mjs";
+import D from "../button/CdrButton.vue.mjs";
+import H from "../popup/CdrPopup.vue.mjs";
+import L from "../../utils/propValidator.mjs";
+import O from "../../utils/mapClasses.mjs";
+const R = /* @__PURE__ */ _({
+  name: "CdrPopover",
+  __name: "CdrPopover",
+  props: {
+    /**
+     * Sets the position where the popover will render relative to the trigger element.
+     * @demoSelectMultiple false
+     * @values top, bottom, left, right
+     */
+    position: {
+      type: String,
+      required: !1,
+      default: "top",
+      validator: (o) => L(o, ["top", "bottom", "left", "right"])
+    },
+    /**
+     * If set to `true`, popover will attempt to dynamically set it's position to
+     * ensure it renders within the visible browser window.
+     * If `false` the popover will always render in the provided `position`.
+     */
+    autoPosition: {
+      type: Boolean,
+      required: !1,
+      default: !0
+    },
+    /** Sets the title for the popover content. Can also be provided via the `title` slot. */
+    label: {
+      type: String,
+      required: !1
+    },
+    /** ID for the popover element, required for accessibility */
+    id: {
+      type: String,
+      required: !0
+    },
+    /** Add custom class to the popover content wrapper. Allows for overriding size, styling, etc. */
+    contentClass: {
+      type: String,
+      required: !1
+    },
+    /**
+     * Used to programmatically control the popover state. Does not need to be set if you are using the `trigger` slot.
+     * @demoIgnore true
+     */
+    open: {
+      type: Boolean,
+      default: !1,
+      required: !1
+    }
+  },
+  emits: {
+    /** Emits when popover is opened */
+    opened: null,
+    /** Emits when popover is closed */
+    closed: null
+  },
+  setup(o, {
+    emit: v
+  }) {
+    const n = o, g = B(), l = N(), s = u(!1);
+    let d;
+    const c = u(null), C = u(null), S = g.trigger, $ = g.title || n.label, b = (e) => {
+      if (s.value === !0)
+        return;
+      const {
+        activeElement: t
+      } = document;
+      d = t, s.value = !0, v("opened", e), setTimeout(() => {
+        var h;
+        const y = z((h = C.value) == null ? void 0 : h.$el);
+        y[0] && y[0].focus();
+      }, 50);
+    }, p = (e) => {
+      s.value = !1, v("closed", e), d && d.focus();
+    }, q = () => {
+      var t;
+      const e = (t = c.value) == null ? void 0 : t.children[0];
+      e && e.addEventListener("click", b);
+    };
+    return T(() => n.open, () => {
+      n.open ? b() : p();
+    }), V(() => {
+      var t;
+      q();
+      const e = (t = c.value) == null ? void 0 : t.children[0];
+      e && (e.setAttribute("aria-controls", n.id), e.setAttribute("aria-haspopup", "dialog"));
+    }), (e, t) => (E(), P("div", {
+      class: i(r(O)(r(l), "cdr-popover--wrapper", r(S) ? "cdr-popover--position" : ""))
+    }, [f("div", {
+      ref_key: "triggerEl",
+      ref: c
+    }, [a(e.$slots, "trigger")], 512), m(H, {
+      role: "dialog",
+      ref_key: "popupEl",
+      ref: C,
+      onClosed: p,
+      position: o.position,
+      "auto-position": o.autoPosition,
+      opened: s.value,
+      "aria-expanded": `${s.value}`,
+      id: o.id,
+      "content-class": o.contentClass
+    }, {
+      default: k(() => [f("div", {
+        class: i(r(l)["cdr-popover__container"])
+      }, [f("div", {
+        class: i(r(l)["cdr-popover__content"])
+      }, [r($) ? (E(), P("div", {
+        key: 0,
+        class: i(r(l)["cdr-popover__title"])
+      }, [a(e.$slots, "title", {}, () => [w(A(o.label), 1)])], 2)) : x("", !0), a(e.$slots, "default")], 2), m(D, {
+        class: i(r(l)["cdr-popover__close-button"]),
+        "icon-only": "",
+        onClick: p,
+        "aria-label": "Close",
+        size: "small"
+      }, {
+        default: k(() => [a(e.$slots, "icon", {}, () => [m(M, {
+          "inherit-color": ""
+        })])]),
+        _: 3
+      }, 8, ["class"])], 2)]),
+      _: 3
+    }, 8, ["position", "auto-position", "opened", "aria-expanded", "id", "content-class"])], 2));
+  }
+});
+export {
+  R as default
+};

package/dist/src/components/popover/styles/CdrPopover.module.scss.mjs

@@ -1,68 +1,68 @@
-const r = {
-  "cdr-popup": "cdr-popup_13-5-2",
-  "cdr-popup--open": "cdr-popup--open_13-5-2",
-  "cdr-popup--closed": "cdr-popup--closed_13-5-2",
-  "cdr-popup__content": "cdr-popup__content_13-5-2",
-  "cdr-popup__arrow": "cdr-popup__arrow_13-5-2",
-  "cdr-popup--top": "cdr-popup--top_13-5-2",
-  "cdr-popup--bottom": "cdr-popup--bottom_13-5-2",
-  "cdr-popup--exit": "cdr-popup--exit_13-5-2",
-  "cdr-popup--corner-left": "cdr-popup--corner-left_13-5-2",
-  "cdr-popup--corner-right": "cdr-popup--corner-right_13-5-2",
-  "cdr-popup--left": "cdr-popup--left_13-5-2",
-  "cdr-popup--right": "cdr-popup--right_13-5-2",
-  "cdr-popup--corner-top": "cdr-popup--corner-top_13-5-2",
-  "cdr-popup--corner-bottom": "cdr-popup--corner-bottom_13-5-2",
-  "cdr-button": "cdr-button_13-5-2",
-  "cdr-button--has-icon-left": "cdr-button--has-icon-left_13-5-2",
-  "cdr-button--has-icon-right": "cdr-button--has-icon-right_13-5-2",
-  "cdr-button--primary": "cdr-button--primary_13-5-2",
-  "cdr-button--secondary": "cdr-button--secondary_13-5-2",
-  "cdr-button--dark": "cdr-button--dark_13-5-2",
-  "cdr-button--sale": "cdr-button--sale_13-5-2",
-  "cdr-button--link": "cdr-button--link_13-5-2",
-  "cdr-button--large": "cdr-button--large_13-5-2",
-  "cdr-button--medium": "cdr-button--medium_13-5-2",
-  "cdr-button--small": "cdr-button--small_13-5-2",
-  "cdr-button--icon-only": "cdr-button--icon-only_13-5-2",
-  "cdr-button--icon-only-large": "cdr-button--icon-only-large_13-5-2",
-  "cdr-button--with-background": "cdr-button--with-background_13-5-2",
-  "cdr-button--full-width": "cdr-button--full-width_13-5-2",
-  "cdr-button--small@xs": "cdr-button--small@xs_13-5-2",
-  "cdr-button--medium@xs": "cdr-button--medium@xs_13-5-2",
-  "cdr-button--large@xs": "cdr-button--large@xs_13-5-2",
-  "cdr-button--full-width@xs": "cdr-button--full-width@xs_13-5-2",
-  "cdr-button--small@sm": "cdr-button--small@sm_13-5-2",
-  "cdr-button--medium@sm": "cdr-button--medium@sm_13-5-2",
-  "cdr-button--large@sm": "cdr-button--large@sm_13-5-2",
-  "cdr-button--full-width@sm": "cdr-button--full-width@sm_13-5-2",
-  "cdr-button--small@md": "cdr-button--small@md_13-5-2",
-  "cdr-button--medium@md": "cdr-button--medium@md_13-5-2",
-  "cdr-button--large@md": "cdr-button--large@md_13-5-2",
-  "cdr-button--full-width@md": "cdr-button--full-width@md_13-5-2",
-  "cdr-button--small@lg": "cdr-button--small@lg_13-5-2",
-  "cdr-button--medium@lg": "cdr-button--medium@lg_13-5-2",
-  "cdr-button--large@lg": "cdr-button--large@lg_13-5-2",
-  "cdr-button--full-width@lg": "cdr-button--full-width@lg_13-5-2",
-  "cdr-icon": "cdr-icon_13-5-2",
-  "cdr-icon--small": "cdr-icon--small_13-5-2",
-  "cdr-icon--large": "cdr-icon--large_13-5-2",
-  "cdr-icon--small@xs": "cdr-icon--small@xs_13-5-2",
-  "cdr-icon--large@xs": "cdr-icon--large@xs_13-5-2",
-  "cdr-icon--small@sm": "cdr-icon--small@sm_13-5-2",
-  "cdr-icon--large@sm": "cdr-icon--large@sm_13-5-2",
-  "cdr-icon--small@md": "cdr-icon--small@md_13-5-2",
-  "cdr-icon--large@md": "cdr-icon--large@md_13-5-2",
-  "cdr-icon--small@lg": "cdr-icon--small@lg_13-5-2",
-  "cdr-icon--large@lg": "cdr-icon--large@lg_13-5-2",
-  "cdr-icon--inherit-color": "cdr-icon--inherit-color_13-5-2",
-  "cdr-popover--position": "cdr-popover--position_13-5-2",
-  "cdr-popover--wrapper": "cdr-popover--wrapper_13-5-2",
-  "cdr-popover__title": "cdr-popover__title_13-5-2",
-  "cdr-popover__container": "cdr-popover__container_13-5-2",
-  "cdr-popover__content": "cdr-popover__content_13-5-2",
-  "cdr-popover__close-button": "cdr-popover__close-button_13-5-2"
+const t = {
+  "cdr-popup": "cdr-popup_14-0-0-ts-0",
+  "cdr-popup--open": "cdr-popup--open_14-0-0-ts-0",
+  "cdr-popup--closed": "cdr-popup--closed_14-0-0-ts-0",
+  "cdr-popup__content": "cdr-popup__content_14-0-0-ts-0",
+  "cdr-popup__arrow": "cdr-popup__arrow_14-0-0-ts-0",
+  "cdr-popup--top": "cdr-popup--top_14-0-0-ts-0",
+  "cdr-popup--bottom": "cdr-popup--bottom_14-0-0-ts-0",
+  "cdr-popup--exit": "cdr-popup--exit_14-0-0-ts-0",
+  "cdr-popup--corner-left": "cdr-popup--corner-left_14-0-0-ts-0",
+  "cdr-popup--corner-right": "cdr-popup--corner-right_14-0-0-ts-0",
+  "cdr-popup--left": "cdr-popup--left_14-0-0-ts-0",
+  "cdr-popup--right": "cdr-popup--right_14-0-0-ts-0",
+  "cdr-popup--corner-top": "cdr-popup--corner-top_14-0-0-ts-0",
+  "cdr-popup--corner-bottom": "cdr-popup--corner-bottom_14-0-0-ts-0",
+  "cdr-button": "cdr-button_14-0-0-ts-0",
+  "cdr-button--has-icon-left": "cdr-button--has-icon-left_14-0-0-ts-0",
+  "cdr-button--has-icon-right": "cdr-button--has-icon-right_14-0-0-ts-0",
+  "cdr-button--primary": "cdr-button--primary_14-0-0-ts-0",
+  "cdr-button--secondary": "cdr-button--secondary_14-0-0-ts-0",
+  "cdr-button--dark": "cdr-button--dark_14-0-0-ts-0",
+  "cdr-button--sale": "cdr-button--sale_14-0-0-ts-0",
+  "cdr-button--link": "cdr-button--link_14-0-0-ts-0",
+  "cdr-button--large": "cdr-button--large_14-0-0-ts-0",
+  "cdr-button--medium": "cdr-button--medium_14-0-0-ts-0",
+  "cdr-button--small": "cdr-button--small_14-0-0-ts-0",
+  "cdr-button--icon-only": "cdr-button--icon-only_14-0-0-ts-0",
+  "cdr-button--icon-only-large": "cdr-button--icon-only-large_14-0-0-ts-0",
+  "cdr-button--with-background": "cdr-button--with-background_14-0-0-ts-0",
+  "cdr-button--full-width": "cdr-button--full-width_14-0-0-ts-0",
+  "cdr-button--small@xs": "cdr-button--small@xs_14-0-0-ts-0",
+  "cdr-button--medium@xs": "cdr-button--medium@xs_14-0-0-ts-0",
+  "cdr-button--large@xs": "cdr-button--large@xs_14-0-0-ts-0",
+  "cdr-button--full-width@xs": "cdr-button--full-width@xs_14-0-0-ts-0",
+  "cdr-button--small@sm": "cdr-button--small@sm_14-0-0-ts-0",
+  "cdr-button--medium@sm": "cdr-button--medium@sm_14-0-0-ts-0",
+  "cdr-button--large@sm": "cdr-button--large@sm_14-0-0-ts-0",
+  "cdr-button--full-width@sm": "cdr-button--full-width@sm_14-0-0-ts-0",
+  "cdr-button--small@md": "cdr-button--small@md_14-0-0-ts-0",
+  "cdr-button--medium@md": "cdr-button--medium@md_14-0-0-ts-0",
+  "cdr-button--large@md": "cdr-button--large@md_14-0-0-ts-0",
+  "cdr-button--full-width@md": "cdr-button--full-width@md_14-0-0-ts-0",
+  "cdr-button--small@lg": "cdr-button--small@lg_14-0-0-ts-0",
+  "cdr-button--medium@lg": "cdr-button--medium@lg_14-0-0-ts-0",
+  "cdr-button--large@lg": "cdr-button--large@lg_14-0-0-ts-0",
+  "cdr-button--full-width@lg": "cdr-button--full-width@lg_14-0-0-ts-0",
+  "cdr-icon": "cdr-icon_14-0-0-ts-0",
+  "cdr-icon--small": "cdr-icon--small_14-0-0-ts-0",
+  "cdr-icon--large": "cdr-icon--large_14-0-0-ts-0",
+  "cdr-icon--small@xs": "cdr-icon--small@xs_14-0-0-ts-0",
+  "cdr-icon--large@xs": "cdr-icon--large@xs_14-0-0-ts-0",
+  "cdr-icon--small@sm": "cdr-icon--small@sm_14-0-0-ts-0",
+  "cdr-icon--large@sm": "cdr-icon--large@sm_14-0-0-ts-0",
+  "cdr-icon--small@md": "cdr-icon--small@md_14-0-0-ts-0",
+  "cdr-icon--large@md": "cdr-icon--large@md_14-0-0-ts-0",
+  "cdr-icon--small@lg": "cdr-icon--small@lg_14-0-0-ts-0",
+  "cdr-icon--large@lg": "cdr-icon--large@lg_14-0-0-ts-0",
+  "cdr-icon--inherit-color": "cdr-icon--inherit-color_14-0-0-ts-0",
+  "cdr-popover--position": "cdr-popover--position_14-0-0-ts-0",
+  "cdr-popover--wrapper": "cdr-popover--wrapper_14-0-0-ts-0",
+  "cdr-popover__title": "cdr-popover__title_14-0-0-ts-0",
+  "cdr-popover__container": "cdr-popover__container_14-0-0-ts-0",
+  "cdr-popover__content": "cdr-popover__content_14-0-0-ts-0",
+  "cdr-popover__close-button": "cdr-popover__close-button_14-0-0-ts-0"
 };
 export {
-  r as default
+  t as default
 };

package/dist/src/components/popup/CdrPopup.vue.mjs

@@ -1,111 +1,9 @@
-import { defineComponent as H, ref as n, computed as i, watch as w, onMounted as O, onUnmounted as q, useCssModule as A, openBlock as K, createElementBlock as N, normalizeClass as h, createElementVNode as k, mergeProps as U, renderSlot as V, nextTick as m } from "vue";
-import { debounce as W } from "lodash-es";
-import _ from "../../utils/propValidator.mjs";
-import j from "./calculatePlacement.mjs";
-import D from "../../utils/mapClasses.mjs";
-import F from "./styles/CdrPopup.module.scss.mjs";
-import G from "../../../_virtual/_plugin-vue_export-helper.mjs";
-const I = H({
-  name: "CdrPopup",
-  inheritAttrs: !1,
-  customOptions: {},
-  props: {
-    opened: {
-      type: Boolean,
-      default: !1
-    },
-    position: {
-      type: String,
-      required: !1,
-      default: "top",
-      validator: (e) => _(e, ["top", "bottom", "left", "right"])
-    },
-    autoPosition: {
-      type: Boolean,
-      default: !0
-    },
-    contentClass: {
-      type: String
-    }
-  },
-  emits: ["closed"],
-  setup(e, v) {
-    const f = "cdr-popup", s = n(e.position), l = n(void 0), t = n(!1), C = n(void 0), a = n(!e.opened), d = n(null), E = n(null), P = i(() => e.opened || t.value ? `cdr-popup--${s.value}` : void 0), $ = i(() => l.value ? `cdr-popup--corner-${l.value}` : void 0), L = i(() => e.opened ? "cdr-popup--open" : void 0), B = i(() => a.value && !t.value ? "cdr-popup--closed" : void 0), b = i(() => t.value ? "cdr-popup--exit" : void 0), c = (o) => {
-      v.emit("closed", o);
-    }, r = (o) => {
-      switch (o.key) {
-        case "Escape":
-        case "Esc":
-          c(o);
-          break;
-      }
-    }, u = (o) => {
-      m(() => {
-        o.target !== d.value && !d.value.contains(o.target) && c(o);
-      });
-    }, g = () => {
-      a.value = !1, m(() => {
-        C.value = d.value.getBoundingClientRect(), a.value = !0;
-      });
-    }, p = () => {
-      W(() => {
-        g();
-      }, 300);
-    }, R = () => {
-      document.addEventListener("keydown", r), document.addEventListener("click", u);
-    }, z = () => {
-      s.value = e.position, l.value = void 0, e.autoPosition && m(() => {
-        const o = E.value.parentElement.getBoundingClientRect(), {
-          innerHeight: S,
-          innerWidth: T
-        } = window, y = j(o, C.value, T, S, e.position);
-        s.value = y.pos, l.value = y.corner;
-      }), a.value = !1, setTimeout(() => {
-        R();
-      }, 1);
-    }, M = () => {
-      a.value = !0, document.removeEventListener("keydown", r), document.removeEventListener("click", u), t.value = !0, setTimeout(() => {
-        t.value = !1;
-      }, 200);
-    };
-    return w(() => e.position, () => s.value = e.position), w(() => e.opened, () => {
-      e.opened ? z() : M();
-    }), O(() => {
-      g(), window.addEventListener("resize", p);
-    }), q(() => {
-      document.removeEventListener("keydown", r), document.removeEventListener("click", u), window.removeEventListener("resize", p);
-    }), {
-      style: A(),
-      mapClasses: D,
-      baseClass: f,
-      positionClass: P,
-      cornerClass: $,
-      openClass: L,
-      closedClass: B,
-      exitingClass: b,
-      closePopup: c,
-      handleClick: u,
-      handleKeydown: r,
-      handleResize: p,
-      popupEl: d,
-      rootEl: E
-    };
-  }
-});
-function J(e, v, f, s, l, t) {
-  return K(), N("div", {
-    ref: "rootEl",
-    class: h(e.mapClasses(e.style, e.baseClass, e.openClass, e.exitingClass, e.positionClass, e.cornerClass, e.closedClass))
-  }, [k("div", U(e.$attrs, {
-    class: [e.style["cdr-popup__content"], e.contentClass],
-    ref: "popupEl"
-  }), [V(e.$slots, "default")], 16), k("div", {
-    class: h(e.style["cdr-popup__arrow"])
-  }, null, 2)], 2);
-}
-const Q = {
-  $style: F
-}, te = /* @__PURE__ */ G(I, [["render", J], ["__cssModules", Q]]);
+import o from "./CdrPopup.vue2.mjs";
+import s from "./styles/CdrPopup.module.scss.mjs";
+import t from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const r = {
+  $style: s
+}, c = /* @__PURE__ */ t(o, [["__cssModules", r]]);
 export {
-  te as default
+  c as default
 };

package/dist/src/components/popup/CdrPopup.vue2.mjs

@@ -0,0 +1,94 @@
+import { defineComponent as q, useCssModule as A, ref as t, computed as a, watch as P, onMounted as K, onUnmounted as N, openBlock as U, createElementBlock as V, normalizeClass as L, unref as p, createElementVNode as _, mergeProps as W, renderSlot as j, nextTick as f } from "vue";
+import D from "../../utils/propValidator.mjs";
+import F from "./calculatePlacement.mjs";
+import G from "../../utils/mapClasses.mjs";
+const I = "cdr-popup", Z = /* @__PURE__ */ q({
+  name: "CdrPopup",
+  inheritAttrs: !1,
+  customOptions: {},
+  __name: "CdrPopup",
+  props: {
+    opened: {
+      type: Boolean,
+      default: !1
+    },
+    position: {
+      type: String,
+      required: !1,
+      default: "top",
+      validator: (c) => D(c, ["top", "bottom", "left", "right"])
+    },
+    autoPosition: {
+      type: Boolean,
+      default: !0
+    },
+    contentClass: {
+      type: String
+    }
+  },
+  emits: {
+    closed: null
+  },
+  setup(c, {
+    emit: B
+  }) {
+    const o = c, d = A(), r = t(o.position), u = t(void 0), n = t(!1), C = t(void 0), s = t(!o.opened), i = t(null), E = t(null), R = a(() => o.opened || n.value ? `cdr-popup--${r.value}` : ""), x = a(() => u.value ? `cdr-popup--corner-${u.value}` : ""), z = a(() => o.opened ? "cdr-popup--open" : ""), $ = a(() => s.value && !n.value ? "cdr-popup--closed" : ""), b = a(() => n.value ? "cdr-popup--exit" : ""), g = (e) => {
+      B("closed", e);
+    }, v = (e) => {
+      switch (e.key) {
+        case "Escape":
+        case "Esc":
+          g(e);
+          break;
+      }
+    }, m = (e) => {
+      f(() => {
+        var l;
+        e.target !== i.value && !((l = i.value) != null && l.contains(e.target)) && g(e);
+      });
+    }, S = () => {
+      s.value = !1, f(() => {
+        var e;
+        C.value = (e = i.value) == null ? void 0 : e.getBoundingClientRect(), s.value = !0;
+      });
+    }, k = () => {
+    }, T = () => {
+      document.addEventListener("keydown", v), document.addEventListener("click", m);
+    }, H = () => {
+      r.value = o.position, u.value = void 0, o.autoPosition && f(() => {
+        var h, y;
+        const e = (y = (h = E.value) == null ? void 0 : h.parentElement) == null ? void 0 : y.getBoundingClientRect(), {
+          innerHeight: l,
+          innerWidth: O
+        } = window, w = F(e, C.value, O, l, o.position);
+        r.value = w.pos, u.value = w.corner;
+      }), s.value = !1, setTimeout(() => {
+        T();
+      }, 1);
+    }, M = () => {
+      s.value = !0, document.removeEventListener("keydown", v), document.removeEventListener("click", m), n.value = !0, setTimeout(() => {
+        n.value = !1;
+      }, 200);
+    };
+    return P(() => o.position, () => r.value = o.position), P(() => o.opened, () => {
+      o.opened ? H() : M();
+    }), K(() => {
+      S(), window.addEventListener("resize", k);
+    }), N(() => {
+      document.removeEventListener("keydown", v), document.removeEventListener("click", m), window.removeEventListener("resize", k);
+    }), (e, l) => (U(), V("div", {
+      ref_key: "rootEl",
+      ref: E,
+      class: L(p(G)(p(d), I, z.value, b.value, R.value, x.value, $.value))
+    }, [_("div", W(e.$attrs, {
+      class: [p(d)["cdr-popup__content"], c.contentClass],
+      ref_key: "popupEl",
+      ref: i
+    }), [j(e.$slots, "default")], 16), _("div", {
+      class: L(p(d)["cdr-popup__arrow"])
+    }, null, 2)], 2));
+  }
+});
+export {
+  Z as default
+};