@rei/cedar 13.4.0-alpha.0 → 13.5.0-alpha.0

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

@@ -0,0 +1,38 @@
+import { defineComponent as s, inject as r, computed as a, useCssModule as n, openBlock as i, createElementBlock as u, normalizeClass as l, createElementVNode as c, renderSlot as d, createTextVNode as g, toDisplayString as p } from "vue";
+import m from "./styles/CdrToggleButton.module.scss.mjs";
+import f from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const V = s({
+  name: "CdrToggleButton",
+  props: {
+    toggleValue: {
+      type: String,
+      required: !0
+    }
+  },
+  setup(e) {
+    const t = r("selectedToggleValue"), o = a(() => e.toggleValue === t.value);
+    return {
+      style: n(),
+      isActive: o
+    };
+  }
+}), _ = ["value", "aria-label", "aria-checked", "tabindex"];
+function b(e, t, o, v, $, C) {
+  return i(), u("li", {
+    role: "presentation",
+    class: l(e.style["cdr-toggle-button__container"])
+  }, [c("button", {
+    role: "radio",
+    class: l(e.style["cdr-toggle-button__item"]),
+    value: e.toggleValue,
+    "aria-label": e.toggleValue,
+    "aria-checked": e.isActive ? "true" : "false",
+    tabindex: e.isActive ? 0 : -1
+  }, [d(e.$slots, "default", {}, () => [g(p(e.toggleValue), 1)])], 10, _)], 2);
+}
+const y = {
+  $style: m
+}, B = /* @__PURE__ */ f(V, [["render", b], ["__cssModules", y]]);
+export {
+  B as default
+};

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

@@ -0,0 +1,75 @@
+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: {
+    modelValue: {
+      type: [String, Number, Boolean, Object, Array],
+      required: !0
+    },
+    size: {
+      type: String,
+      default: "medium",
+      validator: (e) => k(e, ["medium", "large"])
+    }
+  },
+  emits: ["update:modelValue"],
+  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]]);
+export {
+  j as default
+};

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

@@ -0,0 +1,7 @@
+const t = {
+  "cdr-toggle-button__item": "cdr-toggle-button__item_13-5-0-alpha-0",
+  "cdr-toggle-button__container": "cdr-toggle-button__container_13-5-0-alpha-0"
+};
+export {
+  t as default
+};

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

@@ -0,0 +1,10 @@
+const g = {
+  "cdr-toggle-group": "cdr-toggle-group_13-5-0-alpha-0",
+  "cdr-toggle-group--medium": "cdr-toggle-group--medium_13-5-0-alpha-0",
+  "cdr-toggle-button__item": "cdr-toggle-button__item_13-5-0-alpha-0",
+  "cdr-toggle-button__container": "cdr-toggle-button__container_13-5-0-alpha-0",
+  "cdr-toggle-group--large": "cdr-toggle-group--large_13-5-0-alpha-0"
+};
+export {
+  g as default
+};

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

@@ -0,0 +1,94 @@
+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: {
+    position: {
+      type: String,
+      required: !1,
+      default: "top",
+      validator: (e) => S(e, ["top", "bottom", "left", "right"])
+    },
+    autoPosition: {
+      type: Boolean,
+      default: !0
+    },
+    id: {
+      type: String,
+      required: !0
+    },
+    contentClass: {
+      type: String,
+      required: !1
+    },
+    open: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["opened", "closed"],
+  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]]);
+export {
+  G as default
+};

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

@@ -0,0 +1,21 @@
+const p = {
+  "cdr-popup": "cdr-popup_13-5-0-alpha-0",
+  "cdr-popup--open": "cdr-popup--open_13-5-0-alpha-0",
+  "cdr-popup--closed": "cdr-popup--closed_13-5-0-alpha-0",
+  "cdr-popup__content": "cdr-popup__content_13-5-0-alpha-0",
+  "cdr-popup__arrow": "cdr-popup__arrow_13-5-0-alpha-0",
+  "cdr-popup--top": "cdr-popup--top_13-5-0-alpha-0",
+  "cdr-popup--bottom": "cdr-popup--bottom_13-5-0-alpha-0",
+  "cdr-popup--exit": "cdr-popup--exit_13-5-0-alpha-0",
+  "cdr-popup--corner-left": "cdr-popup--corner-left_13-5-0-alpha-0",
+  "cdr-popup--corner-right": "cdr-popup--corner-right_13-5-0-alpha-0",
+  "cdr-popup--left": "cdr-popup--left_13-5-0-alpha-0",
+  "cdr-popup--right": "cdr-popup--right_13-5-0-alpha-0",
+  "cdr-popup--corner-top": "cdr-popup--corner-top_13-5-0-alpha-0",
+  "cdr-popup--corner-bottom": "cdr-popup--corner-bottom_13-5-0-alpha-0",
+  "cdr-tooltip--position": "cdr-tooltip--position_13-5-0-alpha-0",
+  "cdr-tooltip--wrapper": "cdr-tooltip--wrapper_13-5-0-alpha-0"
+};
+export {
+  p as default
+};