@rei/cedar 11.0.0 → 13.0.0-alpha.2

package/dist/lib/src/components/popover/CdrPopover.vue_vue_type_script_lang.js

@@ -0,0 +1,115 @@
+import { defineComponent, ref, watch, onMounted, useCssModule, nextTick } from 'vue';
+import tabbable from 'tabbable';
+import '../icon/comps/x-sm.js';
+import '../button/CdrButton.js';
+import '../popup/CdrPopup.js';
+import validateProp from '../../utils/propValidator.js';
+import mapClasses from '../../utils/mapClasses.js';
+import script$1 from '../popup/CdrPopup.vue_vue_type_script_lang.js';
+import script$3 from '../icon/comps/x-sm.vue_vue_type_script_lang.js';
+import script$2 from '../button/CdrButton.vue_vue_type_script_lang.js';
+
+var script = defineComponent({
+  name: 'CdrPopover',
+  components: {
+    CdrPopup: script$1,
+    CdrButton: script$2,
+    IconXSm: script$3
+  },
+  props: {
+    position: {
+      type: String,
+      required: false,
+      default: 'top',
+      validator: function validator(value) {
+        return validateProp(value, ['top', 'bottom', 'left', 'right']);
+      }
+    },
+    autoPosition: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    label: {
+      type: String,
+      required: false
+    },
+    id: {
+      type: String,
+      required: true
+    },
+    contentClass: {
+      type: String,
+      required: false
+    },
+    open: {
+      type: Boolean,
+      default: false,
+      required: false
+    }
+  },
+
+  setup(props, ctx) {
+    var isOpen = ref(false);
+    var lastActive;
+    var triggerEl = ref(null);
+    var popupEl = ref(null);
+    var hasTrigger = ctx.slots.trigger;
+    var hasTitle = ctx.slots.title || props.label;
+
+    var openPopover = function openPopover(e) {
+      var _document = document,
+          activeElement = _document.activeElement;
+      lastActive = activeElement;
+      isOpen.value = true;
+      ctx.emit('opened', e);
+      nextTick(function () {
+        var tabbables = tabbable(popupEl.value);
+        if (tabbables[0]) tabbables[0].focus();
+      });
+    };
+
+    var closePopover = function closePopover(e) {
+      isOpen.value = false;
+      ctx.emit('closed', e);
+      if (lastActive) lastActive.focus();
+    };
+
+    var addHandlers = function addHandlers() {
+      var triggerElement = triggerEl.value.children[0];
+
+      if (triggerElement) {
+        triggerElement.addEventListener('click', openPopover);
+      }
+    };
+
+    watch(function () {
+      return props.open;
+    }, function () {
+      // TODO: if eslint yells about this then eslint must go :)
+      props.open ? openPopover() : closePopover();
+    });
+    onMounted(function () {
+      addHandlers();
+      var trigger = triggerEl.value.children[0];
+
+      if (trigger) {
+        trigger.setAttribute('aria-controls', props.id);
+        trigger.setAttribute('aria-haspopup', 'dialog');
+      }
+    });
+    return {
+      style: useCssModule(),
+      mapClasses,
+      hasTrigger,
+      triggerEl,
+      hasTitle,
+      closePopover,
+      openPopover,
+      isOpen
+    };
+  }
+
+});
+
+export { script as default };

package/dist/lib/src/components/popover/CdrPopover.vue_vue_type_template_id_764fda0e_lang.js

@@ -0,0 +1,76 @@
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, createVNode, withCtx, createTextVNode, toDisplayString, createCommentVNode } from 'vue';
+
+var _hoisted_1 = {
+  ref: "triggerEl"
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_icon_x_sm = resolveComponent("icon-x-sm");
+
+  var _component_cdr_button = resolveComponent("cdr-button");
+
+  var _component_cdr_popup = resolveComponent("cdr-popup");
+
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(_ctx.mapClasses(_ctx.style, 'cdr-popover--wrapper', _ctx.hasTrigger && 'cdr-popover--position'))
+  }, [createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, "trigger")], 512
+  /* NEED_PATCH */
+  ), createVNode(_component_cdr_popup, {
+    role: "dialog",
+    ref: "popupEl",
+    onClosed: _ctx.closePopover,
+    position: _ctx.position,
+    "auto-position": _ctx.autoPosition,
+    opened: _ctx.isOpen,
+    "aria-expanded": "".concat(_ctx.isOpen),
+    id: _ctx.id,
+    "content-class": _ctx.contentClass
+  }, {
+    default: withCtx(function () {
+      return [createElementVNode("div", {
+        class: normalizeClass(_ctx.style['cdr-popover__container'])
+      }, [createElementVNode("div", {
+        class: normalizeClass(_ctx.style['cdr-popover__content'])
+      }, [_ctx.hasTitle ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        class: normalizeClass(_ctx.style['cdr-popover__title'])
+      }, [renderSlot(_ctx.$slots, "title", {}, function () {
+        return [createTextVNode(toDisplayString(_ctx.label), 1
+        /* TEXT */
+        )];
+      })], 2
+      /* CLASS */
+      )) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "default")], 2
+      /* CLASS */
+      ), createVNode(_component_cdr_button, {
+        class: normalizeClass(_ctx.style['cdr-popover__close-button']),
+        "icon-only": "",
+        onClick: _ctx.closePopover,
+        "aria-label": "Close",
+        size: "small"
+      }, {
+        default: withCtx(function () {
+          return [createVNode(_component_icon_x_sm, {
+            slot: "icon",
+            "inherit-color": ""
+          })];
+        }),
+        _: 1
+        /* STABLE */
+
+      }, 8
+      /* PROPS */
+      , ["class", "onClick"])], 2
+      /* CLASS */
+      )];
+    }),
+    _: 3
+    /* FORWARDED */
+
+  }, 8
+  /* PROPS */
+  , ["onClosed", "position", "auto-position", "opened", "aria-expanded", "id", "content-class"])], 2
+  /* CLASS */
+  );
+}
+
+export { render };

package/dist/lib/src/components/popover/styles/CdrPopover.module.scss_vue_type_style_index_0_src_id_764fda0e_module_true_lang.css.js

@@ -0,0 +1,11 @@
+var style0 = {
+  "cdr-popover--position": "cdr-popover--position_13-0-0-alpha-2",
+  "cdr-popover--wrapper": "cdr-popover--wrapper_13-0-0-alpha-2",
+  "cdr-popup--closed": "cdr-popup--closed_13-0-0-alpha-2",
+  "cdr-popover__title": "cdr-popover__title_13-0-0-alpha-2",
+  "cdr-popover__container": "cdr-popover__container_13-0-0-alpha-2",
+  "cdr-popover__content": "cdr-popover__content_13-0-0-alpha-2",
+  "cdr-popover__close-button": "cdr-popover__close-button_13-0-0-alpha-2"
+};
+
+export { style0 as default };

package/dist/lib/src/components/popup/CdrPopup.js

@@ -0,0 +1,10 @@
+import script from './CdrPopup.vue_vue_type_script_lang.js';
+export { default } from './CdrPopup.vue_vue_type_script_lang.js';
+import { render } from './CdrPopup.vue_vue_type_template_id_c9b83fa4_lang.js';
+import style0 from './styles/CdrPopup.module.scss_vue_type_style_index_0_src_id_c9b83fa4_module_true_lang.css.js';
+
+const cssModules = script.__cssModules = {};
+cssModules["$style"] = style0;
+
+script.render = render;
+script.__file = "src/components/popup/CdrPopup.vue";

package/dist/lib/src/components/popup/CdrPopup.vue_vue_type_script_lang.js

@@ -0,0 +1,176 @@
+import { defineComponent, ref, computed, watch, onMounted, onUnmounted, useCssModule, nextTick } from 'vue';
+import debounce from 'lodash/debounce';
+import validateProp from '../../utils/propValidator.js';
+import calculatePlacement from './calculatePlacement.js';
+import mapClasses from '../../utils/mapClasses.js';
+
+var script = defineComponent({
+  name: 'CdrPopup',
+  inheritAttrs: false,
+  props: {
+    opened: {
+      type: Boolean,
+      default: false
+    },
+    position: {
+      type: String,
+      required: false,
+      default: 'top',
+      validator: function validator(value) {
+        return validateProp(value, ['top', 'bottom', 'left', 'right']);
+      }
+    },
+    autoPosition: {
+      type: Boolean,
+      default: true
+    },
+    contentClass: {
+      type: String
+    }
+  },
+
+  setup(props, ctx) {
+    var baseClass = 'cdr-popup'; // const keyHandler = ref(undefined);
+    // const clickHandler = ref(undefined);
+    // const resizeHandler = ref(undefined); // NOT NEEDED?
+
+    var pos = ref(props.position);
+    var corner = ref(undefined);
+    var exiting = ref(false);
+    var popupRect = ref(undefined); // DOES this have to be a ref?
+
+    var closed = ref(!props.opened);
+    var popupEl = ref(null);
+    var rootEl = ref(null);
+    var positionClass = computed(function () {
+      return props.opened || exiting.value ? "cdr-popup--".concat(pos.value) : undefined;
+    });
+    var cornerClass = computed(function () {
+      return corner.value ? "cdr-popup--corner-".concat(corner.value) : undefined;
+    });
+    var openClass = computed(function () {
+      return props.opened ? 'cdr-popup--open' : undefined;
+    });
+    var closedClass = computed(function () {
+      return closed.value && !exiting.value ? 'cdr-popup--closed' : undefined;
+    });
+    var exitingClass = computed(function () {
+      return exiting.value ? 'cdr-popup--exit' : undefined;
+    });
+
+    var closePopup = function closePopup(e) {
+      ctx.emit('closed', e);
+    };
+
+    var handleKeydown = function handleKeydown(e) {
+      switch (e.key) {
+        case 'Escape':
+        case 'Esc':
+          closePopup(e);
+          break;
+      }
+    };
+
+    var handleClick = function handleClick(e) {
+      nextTick(function () {
+        if (e.target !== popupEl.value && !popupEl.value.contains(e.target)) {
+          closePopup(e);
+        }
+      });
+    };
+
+    var handleResize = function handleResize() {
+      debounce(function () {
+        measurePopup();
+      }, 300);
+    };
+
+    var addHandlers = function addHandlers() {
+      document.addEventListener('keydown', handleKeydown);
+      document.addEventListener('click', handleClick);
+    };
+
+    var measurePopup = function measurePopup() {
+      closed.value = false;
+      nextTick(function () {
+        popupRect.value = popupEl.value.getBoundingClientRect();
+        closed.value = true;
+      });
+    };
+
+    var handleOpened = function handleOpened() {
+      closed.value = false;
+      pos.value = props.position;
+      corner.value = undefined;
+
+      if (props.autoPosition) {
+        nextTick(function () {
+          // TODO: how to get $el?????
+          var triggerRect = rootEl.value.parentElement.getBoundingClientRect();
+          var _window = window,
+              innerHeight = _window.innerHeight,
+              innerWidth = _window.innerWidth;
+          calculatePlacement(triggerRect, popupRect.value, innerWidth, innerHeight, props.position);
+        });
+      }
+
+      setTimeout(function () {
+        addHandlers();
+      }, 1);
+    };
+
+    var handleClosed = function handleClosed() {
+      closed.value = true;
+      document.removeEventListener('keydown', handleKeydown);
+      document.removeEventListener('click', handleClick);
+      exiting.value = true;
+      setTimeout(function () {
+        exiting.value = false;
+      }, 200); // $cdr-duration-2;
+    };
+
+    watch(function () {
+      return props.position;
+    }, function () {
+      return pos.value = props.position;
+    });
+    watch(function () {
+      return props.opened;
+    }, function () {
+      // if (!!newValue === !!oldValue) return;
+      // TODO: watch doesnt run unless it changes???? might need to use `watch`
+      if (props.opened) {
+        handleOpened();
+      } else {
+        handleClosed();
+      }
+    });
+    onMounted(function () {
+      measurePopup(); // resizeHandler = handleResize.bind(this); TODO: bind this?
+
+      window.addEventListener('resize', handleResize);
+    });
+    onUnmounted(function () {
+      document.removeEventListener('keydown', handleKeydown);
+      document.removeEventListener('click', handleClick);
+      window.removeEventListener('resize', handleResize);
+    });
+    return {
+      style: useCssModule(),
+      mapClasses,
+      rootEl,
+      popupEl,
+      baseClass,
+      openClass,
+      exitingClass,
+      positionClass,
+      cornerClass,
+      closedClass,
+      handleClick,
+      handleKeydown
+    };
+  }
+
+});
+
+export { script as default };

package/dist/lib/src/components/popup/CdrPopup.vue_vue_type_template_id_c9b83fa4_lang.js

@@ -0,0 +1,21 @@
+import { openBlock, createElementBlock, normalizeClass, createElementVNode, mergeProps, renderSlot } from 'vue';
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    ref: "rootEl",
+    class: normalizeClass(_ctx.mapClasses(_ctx.style, _ctx.baseClass, _ctx.openClass, _ctx.exitingClass, _ctx.positionClass, _ctx.cornerClass, _ctx.closedClass))
+  }, [createElementVNode("div", mergeProps(_ctx.$attrs, {
+    class: _ctx.mapClasses(_ctx.style, 'cdr-popup__content', _ctx.contentClass),
+    ref: "popupEl"
+  }), [renderSlot(_ctx.$slots, "default")], 16
+  /* FULL_PROPS */
+  ), createElementVNode("div", {
+    class: normalizeClass(_ctx.style['cdr-popup__arrow'])
+  }, null, 2
+  /* CLASS */
+  )], 2
+  /* CLASS */
+  );
+}
+
+export { render };

package/dist/lib/src/components/popup/calculatePlacement.js

@@ -0,0 +1,88 @@
+import _slicedToArray from '@babel/runtime-corejs3/helpers/esm/slicedToArray';
+import _filterInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/filter';
+import _sortInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/sort';
+
+function calculatePlacement (triggerRect, popupRect, screenWidth, screenHeight, originalPosition) {
+  var _context, _context2;
+
+  var offset = 14; // 10px for arrow 4px for spacing
+
+  var borderSize = 2; // need to include border for corner calculations
+
+  var triggerCenterY = triggerRect.top + triggerRect.height / 2;
+  var triggerCenterX = triggerRect.left + triggerRect.width / 2;
+  var pos;
+  var corner;
+  var dirs = {
+    top: triggerRect.top - popupRect.height - offset,
+    bottom: screenHeight - triggerRect.bottom - popupRect.height - offset,
+    left: triggerRect.left - popupRect.width - offset,
+    right: screenWidth - triggerRect.right - popupRect.width - offset
+  };
+  var corners = {
+    left: triggerCenterX - popupRect.width / 2 - borderSize <= 0,
+    right: triggerCenterX + popupRect.width / 2 + borderSize >= screenWidth,
+    top: triggerCenterY - popupRect.height / 2 - borderSize <= 0,
+    bottom: triggerCenterY + popupRect.height / 2 + borderSize >= screenHeight
+  };
+  var invert = {
+    top: 'bottom',
+    bottom: 'top',
+    left: 'right',
+    right: 'left'
+  };
+  var inverse = invert[originalPosition];
+
+  var validDirs = _filterInstanceProperty(_context = Object.keys(dirs)).call(_context, function (dir) {
+    return dirs[dir] > 0;
+  });
+
+  var sortedDirs = _sortInstanceProperty(_context2 = Object.keys(dirs)).call(_context2, function (a, b) {
+    if (dirs[a] > dirs[b]) {
+      return -1;
+    }
+
+    if (dirs[a] < dirs[b]) {
+      return 1;
+    }
+
+    return 0;
+  });
+
+  if (dirs[originalPosition] > 0) {
+    // selected position is valid, or no positions are valid
+    pos = originalPosition;
+  } else if (dirs[inverse] > 0) {
+    // inverted position is valid
+    pos = inverse;
+  } else if (validDirs.length) {
+    // try the angles
+    var _validDirs = _slicedToArray(validDirs, 1);
+
+    pos = _validDirs[0];
+  } else {
+    // use whichever direction has the most space
+    var _sortedDirs = _slicedToArray(sortedDirs, 1);
+
+    pos = _sortedDirs[0];
+  }
+
+  if (pos === 'bottom' || pos === 'top') {
+    if (corners.left) {
+      corner = 'left';
+    } else if (corners.right) {
+      corner = 'right';
+    }
+  } else if (corners.top) {
+    corner = 'top';
+  } else if (corners.bottom) {
+    corner = 'bottom';
+  }
+
+  return {
+    pos,
+    corner
+  };
+}
+
+export { calculatePlacement as default };

package/dist/lib/src/components/popup/styles/CdrPopup.module.scss_vue_type_style_index_0_src_id_c9b83fa4_module_true_lang.css.js

@@ -0,0 +1,18 @@
+var style0 = {
+  "cdr-popup": "cdr-popup_13-0-0-alpha-2",
+  "cdr-popup--open": "cdr-popup--open_13-0-0-alpha-2",
+  "cdr-popup--closed": "cdr-popup--closed_13-0-0-alpha-2",
+  "cdr-popup__content": "cdr-popup__content_13-0-0-alpha-2",
+  "cdr-popup__arrow": "cdr-popup__arrow_13-0-0-alpha-2",
+  "cdr-popup--top": "cdr-popup--top_13-0-0-alpha-2",
+  "cdr-popup--bottom": "cdr-popup--bottom_13-0-0-alpha-2",
+  "cdr-popup--exit": "cdr-popup--exit_13-0-0-alpha-2",
+  "cdr-popup--corner-left": "cdr-popup--corner-left_13-0-0-alpha-2",
+  "cdr-popup--corner-right": "cdr-popup--corner-right_13-0-0-alpha-2",
+  "cdr-popup--left": "cdr-popup--left_13-0-0-alpha-2",
+  "cdr-popup--right": "cdr-popup--right_13-0-0-alpha-2",
+  "cdr-popup--corner-top": "cdr-popup--corner-top_13-0-0-alpha-2",
+  "cdr-popup--corner-bottom": "cdr-popup--corner-bottom_13-0-0-alpha-2"
+};
+
+export { style0 as default };

package/dist/lib/src/components/quote/CdrQuote.js

@@ -0,0 +1,10 @@
+import script from './CdrQuote.vue_vue_type_script_lang.js';
+export { default } from './CdrQuote.vue_vue_type_script_lang.js';
+import { render } from './CdrQuote.vue_vue_type_template_id_20116a2e_lang.js';
+import style0 from './styles/CdrQuote.module.scss_vue_type_style_index_0_src_id_20116a2e_module_true_lang.css.js';
+
+const cssModules = script.__cssModules = {};
+cssModules["$style"] = style0;
+
+script.render = render;
+script.__file = "src/components/quote/CdrQuote.vue";

package/dist/lib/src/components/quote/CdrQuote.vue_vue_type_script_lang.js

@@ -0,0 +1,48 @@
+import { defineComponent, computed, useCssModule } from 'vue';
+import mapClasses from '../../utils/mapClasses.js';
+import { buildClass } from '../../utils/buildClass.js';
+import validateProp from '../../utils/propValidator.js';
+
+var script = defineComponent({
+  name: 'CdrQuote',
+  props: {
+    tag: {
+      type: String,
+      default: 'blockquote',
+      validator: function validator(value) {
+        return validateProp(value, ['blockquote', 'aside', 'q', 'div']);
+      }
+    },
+    modifier: {
+      type: String,
+      default: '',
+      validator: function validator(value) {
+        return validateProp(value, ['', 'pull']);
+      }
+    },
+
+    /** Caption summary text */
+    summary: String,
+
+    /** Caption credit text */
+    citation: String
+  },
+
+  setup(props) {
+    var baseClass = 'cdr-quote';
+    var modifierClass = computed(function () {
+      return buildClass(baseClass, props.modifier);
+    });
+    return {
+      style: useCssModule(),
+      mapClasses,
+      baseClass,
+      modifierClass,
+      summaryClass: 'cdr-quote__summary',
+      citationClass: 'cdr-quote__citation'
+    };
+  }
+
+});
+
+export { script as default };

package/dist/lib/src/components/quote/CdrQuote.vue_vue_type_template_id_20116a2e_lang.js

@@ -0,0 +1,29 @@
+import { openBlock, createBlock, resolveDynamicComponent, normalizeClass, withCtx, createElementBlock, toDisplayString, createCommentVNode, renderSlot } from 'vue';
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), {
+    class: normalizeClass(_ctx.mapClasses(_ctx.style, _ctx.baseClass, _ctx.modifierClass))
+  }, {
+    default: withCtx(function () {
+      return [_ctx.summary ? (openBlock(), createElementBlock("p", {
+        key: 0,
+        class: normalizeClass(_ctx.style[_ctx.summaryClass])
+      }, toDisplayString(_ctx.summary), 3
+      /* TEXT, CLASS */
+      )) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "default"), _ctx.citation ? (openBlock(), createElementBlock("cite", {
+        key: 1,
+        class: normalizeClass(_ctx.style[_ctx.citationClass]),
+        tag: "cite"
+      }, toDisplayString(_ctx.citation), 3
+      /* TEXT, CLASS */
+      )) : createCommentVNode("v-if", true)];
+    }),
+    _: 3
+    /* FORWARDED */
+
+  }, 8
+  /* PROPS */
+  , ["class"]);
+}
+
+export { render };

package/dist/lib/src/components/quote/styles/CdrQuote.module.scss_vue_type_style_index_0_src_id_20116a2e_module_true_lang.css.js

@@ -0,0 +1,7 @@
+var style0 = {
+  "cdr-quote": "cdr-quote_13-0-0-alpha-2",
+  "cdr-quote__summary": "cdr-quote__summary_13-0-0-alpha-2",
+  "cdr-quote--pull": "cdr-quote--pull_13-0-0-alpha-2"
+};
+
+export { style0 as default };

package/dist/lib/src/components/radio/CdrRadio.js

@@ -0,0 +1,10 @@
+import script from './CdrRadio.vue_vue_type_script_lang.js';
+export { default } from './CdrRadio.vue_vue_type_script_lang.js';
+import { render } from './CdrRadio.vue_vue_type_template_id_0a348de4_lang.js';
+import style0 from './styles/CdrRadio.module.scss_vue_type_style_index_0_src_id_0a348de4_module_true_lang.css.js';
+
+const cssModules = script.__cssModules = {};
+cssModules["$style"] = style0;
+
+script.render = render;
+script.__file = "src/components/radio/CdrRadio.vue";