@rei/cedar 13.5.3 → 14.0.0-beta.0

package/dist/src/components/toggleButton/CdrToggleGroup.vue.mjs

@@ -1,87 +1,9 @@
-import { defineComponent as C, ref as g, provide as b, computed as $, onMounted as T, watch as V, useCssModule as z, openBlock as M, createElementBlock as P, mergeProps as G, withModifiers as i, withKeys as c, renderSlot as N } from "vue";
-import S from "../../utils/mapClasses.mjs";
-import k from "../../utils/propValidator.mjs";
-import w from "./styles/CdrToggleGroup.module.scss.mjs";
-import A from "../../../_virtual/_plugin-vue_export-helper.mjs";
-const O = C({
-  name: "CdrToggleGroup",
-  props: {
-    /** @ignore */
-    modelValue: {
-      type: [String, Number, Boolean, Object, Array],
-      required: !0
-    },
-    /**
-     * Sets toggle button size
-     * @demoSelectMultiple false
-     * @values medium, large
-    */
-    size: {
-      type: String,
-      default: "medium",
-      validator: (e) => k(e, ["medium", "large"])
-    }
-  },
-  emits: {
-    /**
-     * Event emitted by v-model
-     * @param modelValue
-     */
-    "update:modelValue": null
-  },
-  setup(e, t) {
-    const a = g(null), u = g(e.modelValue);
-    b("selectedToggleValue", u);
-    const d = $(() => e.size ? `cdr-toggle-group--${e.size}` : "cdr-toggle-group--medium");
-    let o;
-    T(() => {
-      o = Array.from(a.value.querySelectorAll("button"));
-    }), V(() => e.modelValue, (s) => {
-      u.value = s;
-    });
-    const r = (s) => {
-      if (!s.target.closest("button"))
-        return;
-      const n = s.target.closest("button");
-      u.value = n.value, t.emit("update:modelValue", n.value), n.focus();
-    }, m = (s) => {
-      const n = s.target, l = o.indexOf(n);
-      if (l === o.length - 1)
-        return;
-      o[l + 1].focus();
-    }, f = (s) => {
-      const n = s.target, l = o.indexOf(n);
-      if (l === 0)
-        return;
-      o[l - 1].focus();
-    }, p = "cdr-toggle-group", B = z();
-    return {
-      toggleGroup: a,
-      selectedToggleValue: u,
-      toggleButtonElements: o,
-      selectToggleButton: r,
-      focusNext: m,
-      focusPrev: f,
-      sizeClass: d,
-      baseClass: p,
-      mapClasses: S,
-      style: B
-    };
-  }
-});
-function q(e, t, a, u, d, o) {
-  return M(), P("ul", G({
-    ref: "toggleGroup",
-    role: "radiogroup"
-  }, e.$attrs, {
-    class: e.mapClasses(e.style, e.baseClass, e.sizeClass),
-    onClick: t[0] || (t[0] = i((...r) => e.selectToggleButton && e.selectToggleButton(...r), ["prevent"])),
-    onKeyup: [t[1] || (t[1] = c(i((...r) => e.focusNext && e.focusNext(...r), ["prevent"]), ["right"])), t[2] || (t[2] = c(i((...r) => e.focusPrev && e.focusPrev(...r), ["prevent"]), ["left"]))]
-  }), [N(e.$slots, "default")], 16);
-}
-const x = {
-  $style: w
-}, j = /* @__PURE__ */ A(O, [["render", q], ["__cssModules", x]]);
+import o from "./CdrToggleGroup.vue2.mjs";
+import s from "./styles/CdrToggleGroup.module.scss.mjs";
+import r from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const t = {
+  $style: s
+}, f = /* @__PURE__ */ r(o, [["__cssModules", t]]);
 export {
-  j as default
+  f as default
 };

package/dist/src/components/toggleButton/CdrToggleGroup.vue2.mjs

@@ -0,0 +1,74 @@
+import { defineComponent as C, useCssModule as b, ref as a, provide as h, computed as _, onMounted as V, watch as k, openBlock as T, createElementBlock as z, mergeProps as G, unref as i, withModifiers as c, withKeys as d, renderSlot as K } from "vue";
+import S from "../../utils/mapClasses.mjs";
+import w from "../../utils/propValidator.mjs";
+import { selectedToggleKey as A } from "./symbols.mjs";
+const M = ["onClick", "onKeyup"], O = "cdr-toggle-group", F = /* @__PURE__ */ C({
+  name: "CdrToggleGroup",
+  __name: "CdrToggleGroup",
+  props: {
+    /** @ignore */
+    modelValue: {
+      type: [String, Number, Boolean, Object, Array],
+      required: !0
+    },
+    /**
+     * Sets toggle button size
+     * @demoSelectMultiple false
+     * @values medium, large
+    */
+    size: {
+      type: String,
+      default: "medium",
+      validator: (u) => w(u, ["medium", "large"])
+    }
+  },
+  emits: {
+    /**
+     * Event emitted by v-model
+     * @param modelValue
+     */
+    "update:modelValue": null
+  },
+  setup(u, {
+    emit: g
+  }) {
+    const n = u, p = b(), s = a(null), l = a(n.modelValue);
+    h(A, l);
+    const m = _(() => n.size ? `cdr-toggle-group--${n.size}` : "cdr-toggle-group--medium");
+    let r;
+    V(() => {
+      s.value && (r = Array.from(s.value.querySelectorAll("button")));
+    }), k(() => n.modelValue, (e) => {
+      l.value = e;
+    });
+    const f = (e) => {
+      var o;
+      if (!((o = e.target) != null && o.closest("button")))
+        return;
+      const t = e.target.closest("button");
+      t && (l.value = t.value, g("update:modelValue", t.value), t.focus());
+    }, B = (e) => {
+      const t = e.target, o = r.indexOf(t);
+      if (o === r.length - 1)
+        return;
+      r[o + 1].focus();
+    }, v = (e) => {
+      const t = e.target, o = r.indexOf(t);
+      if (o === 0)
+        return;
+      r[o - 1].focus();
+    };
+    return (e, t) => (T(), z("ul", G({
+      ref_key: "toggleGroup",
+      ref: s,
+      role: "radiogroup"
+    }, e.$attrs, {
+      class: i(S)(i(p), O, m.value),
+      onClick: c(f, ["prevent"]),
+      onKeyup: [d(c(B, ["prevent"]), ["right"]), d(c(v, ["prevent"]), ["left"])]
+    }), [K(e.$slots, "default")], 16, M));
+  }
+});
+export {
+  F as default
+};

package/dist/src/components/toggleButton/styles/CdrToggleButton.module.scss.mjs

@@ -1,6 +1,6 @@
 const t = {
-  "cdr-toggle-button__item": "cdr-toggle-button__item_13-5-3",
-  "cdr-toggle-button__container": "cdr-toggle-button__container_13-5-3"
+  "cdr-toggle-button__item": "cdr-toggle-button__item_14-0-0-beta-0",
+  "cdr-toggle-button__container": "cdr-toggle-button__container_14-0-0-beta-0"
 };
 export {
   t as default

package/dist/src/components/toggleButton/styles/CdrToggleGroup.module.scss.mjs

@@ -1,10 +1,10 @@
-const g = {
-  "cdr-toggle-group": "cdr-toggle-group_13-5-3",
-  "cdr-toggle-group--medium": "cdr-toggle-group--medium_13-5-3",
-  "cdr-toggle-button__item": "cdr-toggle-button__item_13-5-3",
-  "cdr-toggle-button__container": "cdr-toggle-button__container_13-5-3",
-  "cdr-toggle-group--large": "cdr-toggle-group--large_13-5-3"
+const t = {
+  "cdr-toggle-group": "cdr-toggle-group_14-0-0-beta-0",
+  "cdr-toggle-group--medium": "cdr-toggle-group--medium_14-0-0-beta-0",
+  "cdr-toggle-button__item": "cdr-toggle-button__item_14-0-0-beta-0",
+  "cdr-toggle-button__container": "cdr-toggle-button__container_14-0-0-beta-0",
+  "cdr-toggle-group--large": "cdr-toggle-group--large_14-0-0-beta-0"
 };
 export {
-  g as default
+  t as default
 };

package/dist/src/components/toggleButton/symbols.mjs

@@ -0,0 +1,4 @@
+const e = Symbol();
+export {
+  e as selectedToggleKey
+};

package/dist/src/components/tooltip/CdrTooltip.vue.mjs

@@ -1,115 +1,9 @@
-import { defineComponent as v, useCssModule as C, ref as a, watch as E, onMounted as y, resolveComponent as h, openBlock as T, createElementBlock as $, normalizeClass as L, createElementVNode as b, renderSlot as f, createVNode as _, withCtx as B } from "vue";
-import M from "../../utils/mapClasses.mjs";
-import P from "../popup/CdrPopup.vue.mjs";
-import S from "../../utils/propValidator.mjs";
-import q from "./styles/CdrTooltip.module.scss.mjs";
-import w from "../../../_virtual/_plugin-vue_export-helper.mjs";
-const k = v({
-  name: "CdrTooltip",
-  components: {
-    CdrPopup: P
-  },
-  props: {
-    /**
-     * Sets the position where the tooltip will render relative to the trigger element.
-     * @demoSelectMultiple false
-     * @values top, bottom, left, right
-     */
-    position: {
-      type: String,
-      required: !1,
-      default: "top",
-      validator: (e) => S(e, ["top", "bottom", "left", "right"])
-    },
-    /**
-     * If set to `true`, tooltip will attempt to dynamically set it's position to
-     * ensure it renders within the visible browser window.
-     * If `false` the tooltip will always render in the provided `position`.
-     */
-    autoPosition: {
-      type: Boolean,
-      default: !0
-    },
-    /** ID for the tooltip element, required for accessibility */
-    id: {
-      type: String,
-      required: !0
-    },
-    /** Add custom class to the tooltip content wrapper. Allows for overriding size, styling, etc. */
-    contentClass: {
-      type: String,
-      required: !1
-    },
-    /**
-     * Used to programmatically control the tooltip state. Does not need to be set if you are using the `trigger` slot.
-     * @demoIgnore true
-     */
-    open: {
-      type: Boolean,
-      default: !1
-    }
-  },
-  emits: {
-    /** Emits when tooltip is opened */
-    opened: null,
-    /** Emits when tooltip is closed */
-    closed: null
-  },
-  setup(e, r) {
-    const u = C(), i = a(!1);
-    let l, t;
-    const p = a(null), d = a(null), g = r.slots.trigger, s = (o) => {
-      l && clearTimeout(l), i.value = !0, r.emit("opened", o);
-    }, n = (o) => {
-      l = setTimeout(() => {
-        i.value = !1, r.emit("closed", o);
-      }, 250);
-    }, c = () => {
-      var m;
-      const o = d.value.children[0];
-      t = (m = p.value) == null ? void 0 : m.$el, o && (o.addEventListener("mouseover", s), o.addEventListener("focus", s), o.addEventListener("mouseleave", n), o.addEventListener("blur", n), t.addEventListener("mouseover", s), t.addEventListener("mouseleave", n));
-    };
-    return E(() => e.open, () => e.open ? s() : n()), y(() => {
-      c();
-      const o = d.value.children[0];
-      o && o.setAttribute("aria-describedby", e.id);
-    }), {
-      style: u,
-      isOpen: i,
-      popupElement: t,
-      popupEl: p,
-      triggerEl: d,
-      hasTrigger: g,
-      openTooltip: s,
-      closeTooltip: n,
-      addHandlers: c,
-      mapClasses: M
-    };
-  }
-}), N = {
-  ref: "triggerEl"
-};
-function O(e, r, u, i, l, t) {
-  const p = h("cdr-popup");
-  return T(), $("div", {
-    class: L(e.mapClasses(e.style, "cdr-tooltip--wrapper", e.hasTrigger && "cdr-tooltip--position"))
-  }, [b("div", N, [f(e.$slots, "trigger")], 512), _(p, {
-    "content-class": e.contentClass,
-    role: "tooltip",
-    ref: "popupEl",
-    position: e.position,
-    "auto-position": e.autoPosition,
-    opened: e.isOpen,
-    id: e.id,
-    onClosed: e.closeTooltip
-  }, {
-    default: B(() => [f(e.$slots, "default")]),
-    _: 3
-  }, 8, ["content-class", "position", "auto-position", "opened", "id", "onClosed"])], 2);
-}
-const V = {
-  $style: q
-}, G = /* @__PURE__ */ w(k, [["render", O], ["__cssModules", V]]);
+import o from "./CdrTooltip.vue2.mjs";
+import s from "./styles/CdrTooltip.module.scss.mjs";
+import t from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const r = {
+  $style: s
+}, f = /* @__PURE__ */ t(o, [["__cssModules", r]]);
 export {
-  G as default
+  f as default
 };

package/dist/src/components/tooltip/CdrTooltip.vue2.mjs

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

package/dist/src/components/tooltip/styles/CdrTooltip.module.scss.mjs

@@ -1,20 +1,20 @@
 const p = {
-  "cdr-popup": "cdr-popup_13-5-3",
-  "cdr-popup--open": "cdr-popup--open_13-5-3",
-  "cdr-popup--closed": "cdr-popup--closed_13-5-3",
-  "cdr-popup__content": "cdr-popup__content_13-5-3",
-  "cdr-popup__arrow": "cdr-popup__arrow_13-5-3",
-  "cdr-popup--top": "cdr-popup--top_13-5-3",
-  "cdr-popup--bottom": "cdr-popup--bottom_13-5-3",
-  "cdr-popup--exit": "cdr-popup--exit_13-5-3",
-  "cdr-popup--corner-left": "cdr-popup--corner-left_13-5-3",
-  "cdr-popup--corner-right": "cdr-popup--corner-right_13-5-3",
-  "cdr-popup--left": "cdr-popup--left_13-5-3",
-  "cdr-popup--right": "cdr-popup--right_13-5-3",
-  "cdr-popup--corner-top": "cdr-popup--corner-top_13-5-3",
-  "cdr-popup--corner-bottom": "cdr-popup--corner-bottom_13-5-3",
-  "cdr-tooltip--position": "cdr-tooltip--position_13-5-3",
-  "cdr-tooltip--wrapper": "cdr-tooltip--wrapper_13-5-3"
+  "cdr-popup": "cdr-popup_14-0-0-beta-0",
+  "cdr-popup--open": "cdr-popup--open_14-0-0-beta-0",
+  "cdr-popup--closed": "cdr-popup--closed_14-0-0-beta-0",
+  "cdr-popup__content": "cdr-popup__content_14-0-0-beta-0",
+  "cdr-popup__arrow": "cdr-popup__arrow_14-0-0-beta-0",
+  "cdr-popup--top": "cdr-popup--top_14-0-0-beta-0",
+  "cdr-popup--bottom": "cdr-popup--bottom_14-0-0-beta-0",
+  "cdr-popup--exit": "cdr-popup--exit_14-0-0-beta-0",
+  "cdr-popup--corner-left": "cdr-popup--corner-left_14-0-0-beta-0",
+  "cdr-popup--corner-right": "cdr-popup--corner-right_14-0-0-beta-0",
+  "cdr-popup--left": "cdr-popup--left_14-0-0-beta-0",
+  "cdr-popup--right": "cdr-popup--right_14-0-0-beta-0",
+  "cdr-popup--corner-top": "cdr-popup--corner-top_14-0-0-beta-0",
+  "cdr-popup--corner-bottom": "cdr-popup--corner-bottom_14-0-0-beta-0",
+  "cdr-tooltip--position": "cdr-tooltip--position_14-0-0-beta-0",
+  "cdr-tooltip--wrapper": "cdr-tooltip--wrapper_14-0-0-beta-0"
 };
 export {
   p as default