@rei/cedar 11.0.0-alpha.0

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

@@ -0,0 +1,284 @@
+import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
+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';
+import _Object$getOwnPropertySymbols from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols';
+import _Object$getOwnPropertyDescriptors from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors';
+import clsx from 'clsx';
+import debounce from 'lodash-es/debounce';
+import modules_5ecd7efb from './styles/CdrPopup.mjs';
+import validateProp from '../../utils/propValidator.mjs';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) { symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+var CdrPopup = {
+  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
+    }
+  },
+
+  data() {
+    return {
+      style: modules_5ecd7efb,
+      keyHandler: undefined,
+      clickHandler: undefined,
+      resizeHandler: undefined,
+      pos: this.position,
+      corner: undefined,
+      exiting: false,
+      popupRect: undefined,
+      closed: !this.opened
+    };
+  },
+
+  computed: {
+    positionClass() {
+      return this.opened || this.exiting ? this.style["cdr-popup--".concat(this.pos)] : undefined;
+    },
+
+    cornerClass() {
+      return this.corner ? this.style["cdr-popup--corner-".concat(this.corner)] : undefined;
+    },
+
+    openClass() {
+      return this.opened ? this.style['cdr-popup--open'] : undefined;
+    },
+
+    closedClass() {
+      return this.closed && !this.exiting ? this.style['cdr-popup--closed'] : undefined;
+    },
+
+    exitingClass() {
+      return this.exiting ? this.style['cdr-popup--exit'] : undefined;
+    }
+
+  },
+  watch: {
+    position() {
+      this.pos = this.position;
+    },
+
+    opened(newValue, oldValue) {
+      if (!!newValue === !!oldValue) return;
+
+      if (newValue) {
+        this.handleOpened();
+      } else {
+        this.handleClosed();
+      }
+    }
+
+  },
+
+  mounted() {
+    this.measurePopup();
+    this.resizeHandler = this.handleResize.bind(this);
+    window.addEventListener('resize', this.resizeHandler);
+  },
+
+  destroyed() {
+    document.removeEventListener('keydown', this.keyHandler);
+    document.removeEventListener('click', this.clickHandler);
+    window.removeEventListener('resize', this.resizeHandler);
+  },
+
+  methods: {
+    closePopup(e) {
+      this.$emit('closed', e);
+    },
+
+    handleKeyDown(e) {
+      switch (e.key) {
+        case 'Escape':
+        case 'Esc':
+          this.closePopup(e);
+          break;
+      }
+    },
+
+    handleClick(e) {
+      var _this = this;
+
+      this.$nextTick(function () {
+        if (e.target !== _this.$refs.popup && !_this.$refs.popup.contains(e.target)) {
+          _this.closePopup(e);
+        }
+      });
+    },
+
+    handleResize() {
+      var _this2 = this;
+
+      debounce(function () {
+        _this2.measurePopup();
+      }, 300);
+    },
+
+    addHandlers() {
+      this.keyHandler = this.handleKeyDown.bind(this);
+      document.addEventListener('keydown', this.keyHandler);
+      this.clickHandler = this.handleClick.bind(this);
+      document.addEventListener('click', this.clickHandler);
+    },
+
+    measurePopup() {
+      var _this3 = this;
+
+      this.closed = false;
+      this.$nextTick(function () {
+        _this3.popupRect = _this3.$refs.popup.getBoundingClientRect();
+        _this3.closed = true;
+      });
+    },
+
+    calculatePlacement(triggerRect, popupRect, screenWidth, screenHeight) {
+      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 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[this.position];
+
+      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[this.position] > 0) {
+        // selected position is valid, or no positions are valid
+        this.pos = this.position;
+      } else if (dirs[inverse] > 0) {
+        // inverted position is valid
+        this.pos = inverse;
+      } else if (validDirs.length) {
+        // try the angles
+        var _validDirs = _slicedToArray(validDirs, 1);
+
+        this.pos = _validDirs[0];
+      } else {
+        // use whichever direction has the most space
+        var _sortedDirs = _slicedToArray(sortedDirs, 1);
+
+        this.pos = _sortedDirs[0];
+      }
+
+      if (this.pos === 'bottom' || this.pos === 'top') {
+        if (corners.left) {
+          this.corner = 'left';
+        } else if (corners.right) {
+          this.corner = 'right';
+        }
+      } else if (corners.top) {
+        this.corner = 'top';
+      } else if (corners.bottom) {
+        this.corner = 'bottom';
+      }
+    },
+
+    handleOpened() {
+      var _this4 = this;
+
+      this.closed = false;
+      this.pos = this.position;
+      this.corner = undefined;
+
+      if (this.autoPosition) {
+        this.$nextTick(function () {
+          var triggerRect = _this4.$el.parentElement.getBoundingClientRect();
+
+          var popupRect = _this4.popupRect;
+          var _window = window,
+              innerHeight = _window.innerHeight,
+              innerWidth = _window.innerWidth;
+
+          _this4.calculatePlacement(triggerRect, popupRect, innerWidth, innerHeight);
+        });
+      }
+
+      setTimeout(function () {
+        _this4.addHandlers();
+      }, 1);
+    },
+
+    handleClosed() {
+      var _this5 = this;
+
+      this.closed = true;
+      document.removeEventListener('keydown', this.keyHandler);
+      document.removeEventListener('click', this.clickHandler);
+      this.exiting = true;
+      setTimeout(function () {
+        _this5.exiting = false;
+      }, 200); // $cdr-duration-2;
+    }
+
+  },
+
+  render() {
+    var h = arguments[0];
+    return h("div", {
+      "class": clsx(this.style['cdr-popup'], this.openClass, this.exitingClass, this.positionClass, this.cornerClass, this.closedClass)
+    }, [h("div", {
+      "class": clsx(this.style['cdr-popup__content'], this.contentClass),
+      "ref": "popup",
+      "attrs": _objectSpread({}, this.$attrs)
+    }, [this.$slots.default]), h("div", {
+      "class": this.style['cdr-popup__arrow']
+    })]);
+  }
+
+};
+
+export default CdrPopup;

package/dist/lib/src/components/popup/styles/CdrPopup.mjs

@@ -0,0 +1,3 @@
+var modules_5ecd7efb = {"cdr-popup":"cdr-popup_11-0-0-alpha-0","cdr-popup--open":"cdr-popup--open_11-0-0-alpha-0","cdr-popup--closed":"cdr-popup--closed_11-0-0-alpha-0","cdr-popup__content":"cdr-popup__content_11-0-0-alpha-0","cdr-popup__arrow":"cdr-popup__arrow_11-0-0-alpha-0","cdr-popup--top":"cdr-popup--top_11-0-0-alpha-0","cdr-popup--bottom":"cdr-popup--bottom_11-0-0-alpha-0","cdr-popup--exit":"cdr-popup--exit_11-0-0-alpha-0","cdr-popup--corner-left":"cdr-popup--corner-left_11-0-0-alpha-0","cdr-popup--corner-right":"cdr-popup--corner-right_11-0-0-alpha-0","cdr-popup--left":"cdr-popup--left_11-0-0-alpha-0","cdr-popup--right":"cdr-popup--right_11-0-0-alpha-0","cdr-popup--corner-top":"cdr-popup--corner-top_11-0-0-alpha-0","cdr-popup--corner-bottom":"cdr-popup--corner-bottom_11-0-0-alpha-0"};
+
+export default modules_5ecd7efb;

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

@@ -0,0 +1,68 @@
+import clsx from 'clsx';
+import CdrText from '../text/CdrText.mjs';
+import modifier from '../../mixins/modifier.mjs';
+import modules_b1efd5d7 from './styles/CdrQuote.mjs';
+
+var CdrQuote = {
+  name: 'CdrQuote',
+  components: {
+    CdrText
+  },
+  mixins: [modifier],
+  props: {
+    tag: {
+      type: String,
+      default: 'blockquote',
+      validator: function validator(value) {
+        return ['blockquote', 'aside', 'q', 'div'].indexOf(value) >= 0 || false;
+      }
+    },
+
+    /** Caption summary text */
+    summary: String,
+
+    /** Caption credit text */
+    citation: String
+  },
+
+  data() {
+    return {
+      style: modules_b1efd5d7
+    };
+  },
+
+  computed: {
+    baseClass() {
+      return 'cdr-quote';
+    },
+
+    summaryBlock() {
+      var h = this.$createElement;
+      return this.summary ? h("p", {
+        "class": this.style['cdr-quote__summary']
+      }, [this.summary]) : '';
+    },
+
+    citationBlock() {
+      var h = this.$createElement;
+      return this.citation ? h("cdr-text", {
+        "attrs": {
+          "tag": "cite"
+        },
+        "class": this.style['cdr-quote__citation']
+      }, [this.citation]) : '';
+    }
+
+  },
+
+  render() {
+    var h = arguments[0];
+    var Component = this.tag;
+    return h(Component, {
+      "class": clsx(this.style[this.baseClass], this.modifierClass)
+    }, [this.summaryBlock, this.$slots.default, this.citationBlock]);
+  }
+
+};
+
+export default CdrQuote;

package/dist/lib/src/components/quote/styles/CdrQuote.mjs

@@ -0,0 +1,3 @@
+var modules_b1efd5d7 = {"cdr-quote":"cdr-quote_11-0-0-alpha-0","cdr-quote__summary":"cdr-quote__summary_11-0-0-alpha-0","cdr-quote--pull":"cdr-quote--pull_11-0-0-alpha-0"};
+
+export default modules_b1efd5d7;

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

@@ -0,0 +1,154 @@
+import _Object$getOwnPropertySymbols from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols';
+import _filterInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/filter';
+import _Object$getOwnPropertyDescriptors from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors';
+import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
+import _mergeJSXProps from '@vue/babel-helper-vue-jsx-merge-props';
+import _Symbol from '@babel/runtime-corejs3/core-js-stable/symbol';
+import clsx from 'clsx';
+import modifier from '../../mixins/modifier.mjs';
+import size from '../../mixins/size.mjs';
+import validateProp from '../../utils/propValidator.mjs';
+import modules_f3ed737b from './styles/CdrRadio.mjs';
+import CdrLabelWrapper from '../labelWrapper/CdrLabelWrapper.mjs';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) { symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+var CdrRadio = {
+  name: 'CdrRadio',
+  components: {
+    CdrLabelWrapper
+  },
+  mixins: [modifier, size],
+  inheritAttrs: false,
+  props: {
+    /**
+     * Class that is added to the label for custom styles
+     */
+    labelClass: String,
+
+    /**
+     * Class that is added to the input for custom styles
+     */
+    inputClass: String,
+
+    /**
+     * Class that is added to the slot wrapper for custom styles
+     */
+    contentClass: String,
+
+    /**
+     * Sets the name of the radio. Required.
+    */
+    name: {
+      type: String,
+      required: true
+    },
+    // Set which background type the input renders on
+    background: {
+      type: [String],
+      default: 'primary',
+      validator: function validator(value) {
+        return validateProp(value, ['primary', 'secondary']);
+      }
+    },
+
+    /**
+     * Sets the value of the radio. Required.
+    */
+    customValue: {
+      type: [String, Number, Boolean, Object, Array, _Symbol, Function]
+    },
+
+    /** @ignore v-model binding */
+    value: {
+      type: [String, Number, Boolean, Object, Array, _Symbol, Function]
+    }
+  },
+
+  data() {
+    return {
+      newValue: this.value,
+      style: modules_f3ed737b
+    };
+  },
+
+  computed: {
+    baseClass() {
+      return 'cdr-radio';
+    }
+
+  },
+  watch: {
+    value(val) {
+      this.newValue = val;
+    },
+
+    newValue(val) {
+      /**
+       * `v-model` value. Fires on check/uncheck.
+       * @event input
+       * @type value | event
+       * */
+      this.$emit('input', val);
+    }
+
+  },
+  methods: {
+    updateValue(newValue, e) {
+      /**
+       * Selected radio value. Fires on section.
+       * @event change
+       * @type boolean|array
+       */
+      this.$emit('change', newValue, e);
+    }
+
+  },
+
+  render() {
+    var _this = this;
+
+    var h = arguments[0];
+    return h("cdr-label-wrapper", {
+      "class": this.style['cdr-radio'],
+      "ref": "label",
+      "attrs": {
+        "size": this.size,
+        "modifier": this.modifier,
+        "labelClass": this.labelClass,
+        "contentClass": this.contentClass,
+        "background": this.background,
+        "disabled": this.$attrs.disabled
+      }
+    }, [h("input", _mergeJSXProps([{
+      "on": {
+        "change": [function ($event) {
+          _this.newValue = _this.customValue;
+        }, function (e) {
+          return _this.updateValue(_this.newValue, e);
+        }]
+      },
+      "class": clsx(this.style['cdr-radio__input'], this.inputClass),
+      "attrs": _objectSpread(_objectSpread({
+        "type": "radio"
+      }, this.$attrs), {}, {
+        "name": this.name
+      }),
+      "ref": "radio",
+      "slot": "input",
+      "domProps": {
+        "checked": this._q(_this.newValue, _this.customValue)
+      }
+    }, {
+      directives: [{
+        name: "model",
+        value: _this.newValue,
+        modifiers: {}
+      }]
+    }])), this.$slots.default]);
+  }
+
+};
+
+export default CdrRadio;

package/dist/lib/src/components/radio/styles/CdrRadio.mjs

@@ -0,0 +1,3 @@
+var modules_f3ed737b = {"cdr-radio":"cdr-radio_11-0-0-alpha-0","cdr-label-wrapper__figure":"cdr-label-wrapper__figure_11-0-0-alpha-0","cdr-radio__input":"cdr-radio__input_11-0-0-alpha-0"};
+
+export default modules_f3ed737b;