@rei/cedar 13.4.0-alpha.1 → 13.4.1

package/dist/src/components/select/CdrSelect.vue.mjs

@@ -0,0 +1,198 @@
+import "core-js/modules/es.array.push.js";
+import { defineComponent as L, computed as o, useCssModule as j, resolveComponent as h, openBlock as a, createBlock as S, createSlots as F, withCtx as n, createElementVNode as q, normalizeClass as u, createElementBlock as m, renderSlot as i, createCommentVNode as g, withDirectives as H, mergeProps as R, toDisplayString as I, Fragment as U, renderList as T, vModelSelect as G, createVNode as J } from "vue";
+import K from "../icon/comps/caret-down.vue.mjs";
+import Q from "../labelStandalone/CdrLabelStandalone.vue.mjs";
+import W from "../formError/CdrFormError.vue.mjs";
+import X from "../../props/size.mjs";
+import Y from "../../props/background.mjs";
+import Z from "../../utils/mapClasses.mjs";
+import _ from "../../utils/uid.mjs";
+import x from "./styles/CdrSelect.module.scss.mjs";
+import ee from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const re = L({
+  name: "CdrSelect",
+  components: {
+    IconCaretDown: K,
+    CdrLabelStandalone: Q,
+    CdrFormError: W
+  },
+  inheritAttrs: !1,
+  props: {
+    /**
+     * `id` for the select that is mapped to the label `for` attribute. If one is not provided, it will be generated.
+    */
+    id: {
+      type: String
+    },
+    /**
+     * Label text. This is required for a11y even if hiding the label with `hideLabel`.
+    */
+    label: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Removes the label element but sets the select `aria-label` to `label` text for a11y.
+    */
+    hideLabel: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Adds an option that is disabled and selected by default to serve as a `placeholder` for the select.
+    */
+    prompt: String,
+    /**
+     * Build options programatically with data. Array of objects [{ text: String, value: String}] to give greater control. Array of strings ['String'] for simpler setup (value and text will be the same).
+    */
+    options: {
+      type: Array
+    },
+    // Set which background type the select renders on
+    background: Y,
+    size: X,
+    // Set error styling
+    error: {
+      type: [Boolean, String],
+      default: !1
+    },
+    /**
+    * Override the error message role, default is `status`.
+    */
+    errorRole: {
+      type: String,
+      required: !1
+    },
+    modelValue: {
+      type: [String, Number, Boolean, Object, Array, Symbol, Function]
+    },
+    disabled: Boolean,
+    required: Boolean,
+    optional: Boolean,
+    multiple: Boolean,
+    multipleSize: Number
+  },
+  emits: ["update:modelValue"],
+  customOptions: {},
+  setup(e, r) {
+    const p = "cdr-select", $ = r.slots["helper-text"], k = r.slots.info, v = r.slots["info-action"], d = r.slots["pre-icon"], c = e.id ? e.id : _(), f = o(() => e.multiple && "cdr-select--multiple"), l = o(() => !e.modelValue && "cdr-select__prompt"), z = o(() => d && "cdr-select--preicon"), B = o(() => e.error && "cdr-select--error"), V = o(() => `cdr-select--${e.background}`), M = o(() => e.size && `${p}--${e.size}`), w = o(() => e.disabled && "cdr-select__caret--disabled"), A = o(() => {
+      const s = [r.slots["helper-text"] ? `${e.id}-helper-text-top` : "", r.attrs["aria-describedby"]].filter((t) => t).join(" ");
+      return e.error ? `${e.id}-error` : s;
+    }), D = o(() => {
+      const s = [];
+      return e.options && e.options.forEach((t) => {
+        const b = {};
+        let y = "", C = "";
+        if (typeof t == "string")
+          y = t, C = t;
+        else {
+          const {
+            text: P,
+            value: E
+          } = t;
+          y = P, C = E;
+        }
+        b.text = y, b.value = C, s.push(b);
+      }), s;
+    }), N = o({
+      get() {
+        return e.modelValue;
+      },
+      set(s) {
+        r.emit("update:modelValue", s);
+      }
+    }), O = j();
+    return {
+      mapClasses: Z,
+      baseClass: p,
+      hasHelper: $,
+      hasInfo: k,
+      hasInfoAction: v,
+      hasPreIcon: d,
+      uniqueId: c,
+      multipleClass: f,
+      promptClass: l,
+      preIconClass: z,
+      errorClass: B,
+      backgroundClass: V,
+      sizeClass: M,
+      caretDisabledClass: w,
+      describedby: A,
+      computedOpts: D,
+      selectModel: N,
+      style: O
+    };
+  }
+}), oe = ["id", "multiple", "size", "disabled", "aria-required", "aria-invalid", "aria-errormessage", "aria-describedby", "value"], le = ["value"];
+function se(e, r, p, $, k, v) {
+  const d = h("icon-caret-down"), c = h("cdr-form-error"), f = h("cdr-label-standalone");
+  return a(), S(f, {
+    "for-id": e.uniqueId,
+    label: e.label,
+    "hide-label": e.hideLabel,
+    required: e.required,
+    optional: e.optional,
+    disabled: e.disabled
+  }, F({
+    default: n(() => [q("div", {
+      class: u(e.style["cdr-select-wrap"])
+    }, [e.hasPreIcon ? (a(), m("span", {
+      key: 0,
+      class: u(e.style["cdr-select__pre-icon"])
+    }, [i(e.$slots, "pre-icon")], 2)) : g("", !0), H(q("select", R({
+      id: e.uniqueId,
+      class: e.mapClasses(e.style, e.baseClass, e.sizeClass, e.promptClass, e.multipleClass, e.backgroundClass, e.errorClass, e.preIconClass),
+      multiple: e.multiple,
+      size: e.multipleSize,
+      disabled: e.disabled,
+      "aria-required": e.required || null,
+      "aria-invalid": !!e.error || null,
+      "aria-errormessage": !!e.error && `${e.uniqueId}-error` || null
+    }, e.$attrs, {
+      "aria-describedby": e.describedby || null,
+      value: e.modelValue,
+      "onUpdate:modelValue": r[0] || (r[0] = (l) => e.selectModel = l)
+    }), [e.prompt ? (a(), m("option", {
+      key: 0,
+      class: u(e.style["cdr-select__prompt"]),
+      value: "",
+      disabled: ""
+    }, I(e.prompt), 3)) : g("", !0), (a(!0), m(U, null, T(e.computedOpts, (l) => (a(), m("option", {
+      key: l.text,
+      value: l.value
+    }, I(l.text), 9, le))), 128)), i(e.$slots, "default")], 16, oe), [[G, e.selectModel]]), J(d, {
+      class: u(e.mapClasses(e.style, "cdr-select__caret", e.caretDisabledClass))
+    }, null, 8, ["class"])], 2)]),
+    _: 2
+  }, [e.hasHelper ? {
+    name: "helper",
+    fn: n(() => [i(e.$slots, "helper-text")]),
+    key: "0"
+  } : void 0, e.hasInfo ? {
+    name: "info",
+    fn: n(() => [i(e.$slots, "info")]),
+    key: "1"
+  } : void 0, e.hasInfoAction ? {
+    name: "info-action",
+    fn: n(() => [i(e.$slots, "info-action")]),
+    key: "2"
+  } : void 0, e.error ? {
+    name: "error",
+    fn: n(() => [e.error ? (a(), S(c, {
+      key: 0,
+      error: e.error,
+      role: e.errorRole,
+      id: `${e.uniqueId}-error`
+    }, {
+      error: n(() => [i(e.$slots, "error")]),
+      _: 3
+    }, 8, ["error", "role", "id"])) : g("", !0)]),
+    key: "3"
+  } : void 0]), 1032, ["for-id", "label", "hide-label", "required", "optional", "disabled"]);
+}
+const te = {
+  $style: x
+}, Ce = /* @__PURE__ */ ee(re, [["render", se], ["__cssModules", te]]);
+export {
+  Ce as default
+};

package/dist/src/components/select/styles/CdrSelect.module.scss.mjs

@@ -0,0 +1,47 @@
+const l = {
+  "cdr-icon": "cdr-icon_13-4-1",
+  "cdr-icon--small": "cdr-icon--small_13-4-1",
+  "cdr-icon--large": "cdr-icon--large_13-4-1",
+  "cdr-icon--small@xs": "cdr-icon--small@xs_13-4-1",
+  "cdr-icon--large@xs": "cdr-icon--large@xs_13-4-1",
+  "cdr-icon--small@sm": "cdr-icon--small@sm_13-4-1",
+  "cdr-icon--large@sm": "cdr-icon--large@sm_13-4-1",
+  "cdr-icon--small@md": "cdr-icon--small@md_13-4-1",
+  "cdr-icon--large@md": "cdr-icon--large@md_13-4-1",
+  "cdr-icon--small@lg": "cdr-icon--small@lg_13-4-1",
+  "cdr-icon--large@lg": "cdr-icon--large@lg_13-4-1",
+  "cdr-icon--inherit-color": "cdr-icon--inherit-color_13-4-1",
+  "cdr-label-standalone": "cdr-label-standalone_13-4-1",
+  "cdr-label-standalone__label-wrapper": "cdr-label-standalone__label-wrapper_13-4-1",
+  "cdr-label-standalone__label": "cdr-label-standalone__label_13-4-1",
+  "cdr-label-standalone__label--sr-only": "cdr-label-standalone__label--sr-only_13-4-1",
+  "cdr-label-standalone__label--disabled": "cdr-label-standalone__label--disabled_13-4-1",
+  "cdr-label-standalone__optional": "cdr-label-standalone__optional_13-4-1",
+  "cdr-label-standalone__helper": "cdr-label-standalone__helper_13-4-1",
+  "cdr-label-standalone__info": "cdr-label-standalone__info_13-4-1",
+  "cdr-label-standalone__post-content": "cdr-label-standalone__post-content_13-4-1",
+  "cdr-label-standalone__info-action": "cdr-label-standalone__info-action_13-4-1",
+  "cdr-label-standalone__input-wrap": "cdr-label-standalone__input-wrap_13-4-1",
+  "cdr-label-standalone__input-spacing": "cdr-label-standalone__input-spacing_13-4-1",
+  "cdr-form-error": "cdr-form-error_13-4-1",
+  "cdr-form-error__icon": "cdr-form-error__icon_13-4-1",
+  "cdr-select": "cdr-select_13-4-1",
+  "cdr-select--primary": "cdr-select--primary_13-4-1",
+  "cdr-select--secondary": "cdr-select--secondary_13-4-1",
+  "cdr-select--error": "cdr-select--error_13-4-1",
+  "cdr-select--preicon": "cdr-select--preicon_13-4-1",
+  "cdr-select__prompt": "cdr-select__prompt_13-4-1",
+  "cdr-select__caret": "cdr-select__caret_13-4-1",
+  "cdr-select__caret--disabled": "cdr-select__caret--disabled_13-4-1",
+  "cdr-select__pre-icon": "cdr-select__pre-icon_13-4-1",
+  "cdr-select--multiple": "cdr-select--multiple_13-4-1",
+  "cdr-select--large@xs": "cdr-select--large@xs_13-4-1",
+  "cdr-select--large": "cdr-select--large_13-4-1",
+  "cdr-select--large@sm": "cdr-select--large@sm_13-4-1",
+  "cdr-select--large@md": "cdr-select--large@md_13-4-1",
+  "cdr-select--large@lg": "cdr-select--large@lg_13-4-1",
+  "cdr-select-wrap": "cdr-select-wrap_13-4-1"
+};
+export {
+  l as default
+};

package/dist/src/components/skeleton/CdrSkeleton.vue.mjs

@@ -0,0 +1,32 @@
+import { defineComponent as t, toRef as n, provide as r, useCssModule as l, openBlock as a, createElementBlock as i, normalizeClass as p, renderSlot as c } from "vue";
+import d from "./styles/CdrSkeleton.module.scss.mjs";
+import m from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const u = t({
+  name: "CdrSkeleton",
+  props: {
+    motion: {
+      type: Boolean,
+      default: !0
+    }
+  },
+  setup(e) {
+    const o = "cdr-skeleton", s = n(e, "motion");
+    return r("motionToggle", s), {
+      baseClass: o,
+      style: l()
+    };
+  }
+});
+function f(e, o, s, _, y, $) {
+  return a(), i("div", {
+    class: p(e.style[e.baseClass]),
+    "aria-live": "polite",
+    "aria-busy": "true"
+  }, [c(e.$slots, "default")], 2);
+}
+const C = {
+  $style: d
+}, g = /* @__PURE__ */ m(u, [["render", f], ["__cssModules", C]]);
+export {
+  g as default
+};

package/dist/src/components/skeleton/CdrSkeletonBone.vue.mjs

@@ -0,0 +1,38 @@
+import { defineComponent as a, inject as r, computed as n, useCssModule as p, openBlock as m, createElementBlock as i, normalizeClass as d } from "vue";
+import c from "../../utils/propValidator.mjs";
+import u from "../../utils/mapClasses.mjs";
+import f from "./styles/CdrSkeletonBone.module.scss.mjs";
+import C from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const y = a({
+  name: "CdrSkeletonBone",
+  props: {
+    type: {
+      type: String,
+      required: !1,
+      default: "default",
+      validator: (e) => c(e, ["default", "heading", "line", "rectangle", "square"])
+    }
+  },
+  setup(e) {
+    const s = "cdr-skeleton-bone", o = r("motionToggle"), t = n(() => `${s}--${e.type}`), l = n(() => o.value ? `${s}__shimmer` : null);
+    return {
+      style: p(),
+      baseClass: s,
+      typeClass: t,
+      motionToggle: o,
+      motionClass: l,
+      mapClasses: u
+    };
+  }
+});
+function $(e, s, o, t, l, _) {
+  return m(), i("div", {
+    class: d(e.mapClasses(e.style, e.baseClass, e.typeClass, e.motionClass))
+  }, null, 2);
+}
+const g = {
+  $style: f
+}, M = /* @__PURE__ */ C(y, [["render", $], ["__cssModules", g]]);
+export {
+  M as default
+};

package/dist/src/components/skeleton/styles/CdrSkeleton.module.scss.mjs

@@ -0,0 +1,6 @@
+const e = {
+  "cdr-skeleton": "cdr-skeleton_13-4-1"
+};
+export {
+  e as default
+};

package/dist/src/components/skeleton/styles/CdrSkeletonBone.module.scss.mjs

@@ -0,0 +1,13 @@
+const e = "shimmer_13-4-1", n = {
+  "cdr-skeleton-bone": "cdr-skeleton-bone_13-4-1",
+  "cdr-skeleton-bone__shimmer": "cdr-skeleton-bone__shimmer_13-4-1",
+  shimmer: e,
+  "cdr-skeleton-bone--line": "cdr-skeleton-bone--line_13-4-1",
+  "cdr-skeleton-bone--heading": "cdr-skeleton-bone--heading_13-4-1",
+  "cdr-skeleton-bone--rectangle": "cdr-skeleton-bone--rectangle_13-4-1",
+  "cdr-skeleton-bone--square": "cdr-skeleton-bone--square_13-4-1"
+};
+export {
+  n as default,
+  e as shimmer
+};

package/dist/src/components/switch/CdrSwitch.vue.mjs

@@ -0,0 +1,76 @@
+import { defineComponent as h, useCssModule as p, computed as m, resolveComponent as u, openBlock as C, createElementBlock as y, normalizeClass as s, createElementVNode as n, renderSlot as _, createVNode as f } from "vue";
+import b from "../../utils/propValidator.mjs";
+import { buildBooleanClass as w } from "../../utils/buildClass.mjs";
+import k from "../icon/comps/check-sm.vue.mjs";
+import $ from "../icon/comps/x-sm.vue.mjs";
+import v from "../../utils/mapClasses.mjs";
+import S from "../../utils/uid.mjs";
+import V from "./styles/CdrSwitch.module.scss.mjs";
+import z from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const B = h({
+  name: "CdrSwitch",
+  components: {
+    IconCheckSm: k,
+    IconXSm: $
+  },
+  props: {
+    id: {
+      type: String
+    },
+    size: {
+      type: String,
+      default: "medium",
+      validator: (e) => b(e, ["medium", "large"])
+    },
+    fullWidth: {
+      type: Boolean,
+      default: !1
+    },
+    modelValue: {
+      type: Boolean,
+      required: !0
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(e, l) {
+    const d = p(), a = e.id ? e.id : S(), c = (r) => {
+      l.emit("update:modelValue", !r);
+    }, o = "cdr-switch", t = m(() => e.size ? `cdr-switch--${e.size}` : "cdr-switch--medium"), i = m(() => e.fullWidth && w(o, e.fullWidth, "full-width"));
+    return {
+      style: d,
+      mapClasses: v,
+      uniqueId: a,
+      onClick: c,
+      baseClass: o,
+      sizeClass: t,
+      fullWidthClass: i
+    };
+  }
+}), I = ["id"], W = ["aria-checked", "aria-labelledby"];
+function g(e, l, d, a, c, o) {
+  const t = u("icon-check-sm"), i = u("icon-x-sm");
+  return C(), y("div", {
+    class: s(e.mapClasses(e.style, e.baseClass, e.fullWidthClass, e.sizeClass))
+  }, [n("div", {
+    id: e.uniqueId,
+    class: s(e.style["cdr-switch__label"])
+  }, [_(e.$slots, "default")], 10, I), n("button", {
+    onClick: l[0] || (l[0] = (r) => e.onClick(e.modelValue)),
+    class: s(e.style["cdr-switch__button"]),
+    role: "switch",
+    "aria-checked": e.modelValue,
+    "aria-labelledby": e.uniqueId
+  }, [f(t, {
+    class: s(e.style["cdr-switch__button-icon"])
+  }, null, 8, ["class"]), f(i, {
+    class: s(e.style["cdr-switch__button-icon"])
+  }, null, 8, ["class"]), n("div", {
+    class: s(e.style["cdr-switch__handle"])
+  }, null, 2)], 10, W)], 2);
+}
+const q = {
+  $style: V
+}, F = /* @__PURE__ */ z(B, [["render", g], ["__cssModules", q]]);
+export {
+  F as default
+};

package/dist/src/components/switch/styles/CdrSwitch.module.scss.mjs

@@ -0,0 +1,13 @@
+const c = {
+  "cdr-switch": "cdr-switch_13-4-1",
+  "cdr-switch__button": "cdr-switch__button_13-4-1",
+  "cdr-switch__button-icon": "cdr-switch__button-icon_13-4-1",
+  "cdr-switch__handle": "cdr-switch__handle_13-4-1",
+  "cdr-switch__label": "cdr-switch__label_13-4-1",
+  "cdr-switch--full-width": "cdr-switch--full-width_13-4-1",
+  "cdr-switch--large": "cdr-switch--large_13-4-1",
+  "cdr-switch--medium": "cdr-switch--medium_13-4-1"
+};
+export {
+  c as default
+};

package/dist/src/components/table/CdrTable.vue.mjs

@@ -0,0 +1,63 @@
+import { defineComponent as u, computed as l, useCssModule as f, openBlock as m, createElementBlock as p, normalizeClass as C, createElementVNode as c, mergeProps as $, renderSlot as b } from "vue";
+import h from "../../utils/mapClasses.mjs";
+import { buildBooleanClass as v } from "../../utils/buildClass.mjs";
+import y from "../../utils/propValidator.mjs";
+import B from "./styles/CdrTable.module.scss.mjs";
+import z from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const W = u({
+  name: "CdrTable",
+  props: {
+    striped: {
+      type: Boolean,
+      default: !1
+    },
+    border: {
+      type: Boolean,
+      default: !0
+    },
+    fullWidth: {
+      type: [Boolean, String],
+      default: !0
+    },
+    responsive: {
+      type: Boolean,
+      default: !0
+    },
+    hover: {
+      type: Boolean,
+      default: !1
+    },
+    size: {
+      type: String,
+      default: "medium",
+      validator: (e) => y(e, ["small", "medium", "large"])
+    }
+  },
+  setup(e) {
+    const s = "cdr-table", t = l(() => e.size && `${s}--${e.size}`), o = l(() => e.striped && `${s}--striped`), r = l(() => e.hover && `${s}--hover`), a = l(() => e.border && !e.striped && `${s}--border`), d = l(() => e.fullWidth && v(s, e.fullWidth, "full-width")), i = l(() => e.responsive && `${s}--responsive`), n = f();
+    return {
+      mapClasses: h,
+      baseClass: s,
+      sizeClass: t,
+      stripedClass: o,
+      hoverClass: r,
+      borderClass: a,
+      fullWidthClass: d,
+      wrapperClass: i,
+      style: n
+    };
+  }
+});
+function g(e, s, t, o, r, a) {
+  return m(), p("div", {
+    class: C(e.style[e.wrapperClass])
+  }, [c("table", $(e.$attrs, {
+    class: e.mapClasses(e.style, e.baseClass, e.sizeClass, e.stripedClass, e.hoverClass, e.borderClass, e.fullWidthClass)
+  }), [b(e.$slots, "default")], 16)], 2);
+}
+const w = {
+  $style: B
+}, N = /* @__PURE__ */ z(W, [["render", g], ["__cssModules", w]]);
+export {
+  N as default
+};

package/dist/src/components/table/styles/CdrTable.module.scss.mjs

@@ -0,0 +1,18 @@
+const l = {
+  "cdr-table": "cdr-table_13-4-1",
+  "cdr-table--small": "cdr-table--small_13-4-1",
+  "cdr-table--medium": "cdr-table--medium_13-4-1",
+  "cdr-table--large": "cdr-table--large_13-4-1",
+  "cdr-table--striped": "cdr-table--striped_13-4-1",
+  "cdr-table--border": "cdr-table--border_13-4-1",
+  "cdr-table--full-width": "cdr-table--full-width_13-4-1",
+  "cdr-table--responsive": "cdr-table--responsive_13-4-1",
+  "cdr-table--hover": "cdr-table--hover_13-4-1",
+  "cdr-table--full-width@xs": "cdr-table--full-width@xs_13-4-1",
+  "cdr-table--full-width@sm": "cdr-table--full-width@sm_13-4-1",
+  "cdr-table--full-width@md": "cdr-table--full-width@md_13-4-1",
+  "cdr-table--full-width@lg": "cdr-table--full-width@lg_13-4-1"
+};
+export {
+  l as default
+};

package/dist/src/components/tabs/CdrTabPanel.vue.mjs

@@ -0,0 +1,38 @@
+import { defineComponent as r, inject as c, computed as i, useCssModule as d, watch as m, withDirectives as p, openBlock as u, createElementBlock as b, normalizeClass as f, renderSlot as h, vShow as v } from "vue";
+import { kebabCase as $ } from "lodash-es";
+import y from "./styles/CdrTabPanel.module.scss.mjs";
+import C from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const _ = r({
+  name: "CdrTabPanel",
+  props: {
+    name: String
+  },
+  emits: ["tab-change"],
+  setup(e, s) {
+    const a = c("selectedTabName"), t = i(() => e.name === (a == null ? void 0 : a.value)), n = i(() => `${$(e.name)}-panel`), o = d();
+    return m(t, (l) => {
+      s.emit("tab-change", l, n.value);
+    }), {
+      selectedTabName: a,
+      isActive: t,
+      panelId: n,
+      style: o
+    };
+  }
+}), g = ["aria-hidden", "id", "aria-labelledby"];
+function k(e, s, a, t, n, o) {
+  return p((u(), b("section", {
+    tabindex: "0",
+    "aria-hidden": !e.isActive,
+    role: "tabpanel",
+    class: f(e.style["cdr-tab-panel"]),
+    id: e.panelId,
+    "aria-labelledby": e.name
+  }, [h(e.$slots, "default")], 10, g)), [[v, e.isActive]]);
+}
+const w = {
+  $style: y
+}, I = /* @__PURE__ */ C(_, [["render", k], ["__cssModules", w]]);
+export {
+  I as default
+};