@rei/cedar 13.0.0-alpha.2 → 13.0.0-alpha.kurt-test

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

@@ -1,10 +1,188 @@
-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';
+import { defineComponent, ref, computed, watch, onMounted, onUnmounted, useCssModule, openBlock, createElementBlock, normalizeClass, createElementVNode, mergeProps, renderSlot, 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';
+import _export_sfc from '../../../_virtual/plugin-vue_export-helper.js';
 
-const cssModules = script.__cssModules = {};
-cssModules["$style"] = style0;
+const _sfc_main = defineComponent({
+  name: 'CdrPopup',
+  inheritAttrs: false,
+  props: {
+    opened: {
+      type: Boolean,
+      default: false,
+    },
+    position: {
+      type: String,
+      required: false,
+      default: 'top',
+      validator: (value) => validateProp(
+        value,
+        ['top', 'bottom', 'left', 'right'],
+      ),
+    },
+    autoPosition: {
+      type: Boolean,
+      default: true,
+    },
+    contentClass: {
+      type: String,
+    },
+  },
+  setup(props, ctx) {
+    const baseClass = 'cdr-popup';
 
-script.render = render;
-script.__file = "src/components/popup/CdrPopup.vue";
+    // const keyHandler = ref(undefined);
+    // const clickHandler = ref(undefined);
+    // const resizeHandler = ref(undefined); // NOT NEEDED?
+    const pos = ref(props.position);
+    const corner = ref(undefined);
+    const exiting = ref(false);
+    const popupRect = ref(undefined); // DOES this have to be a ref?
+    const closed = ref(!props.opened);
+
+    const popupEl = ref(null);
+    const rootEl = ref(null);
+
+    const positionClass = computed(() => (props.opened || exiting.value ? `cdr-popup--${pos.value}` : undefined));
+    const cornerClass = computed(() => (corner.value ? `cdr-popup--corner-${corner.value}` : undefined));
+    const openClass = computed(() => (props.opened ? 'cdr-popup--open' : undefined));
+    const closedClass = computed(() => (closed.value && !exiting.value ? 'cdr-popup--closed' : undefined));
+    const exitingClass = computed(() => (exiting.value ? 'cdr-popup--exit' : undefined));
+
+    const closePopup = (e) => {
+      ctx.emit('closed', e);
+    };
+
+    const handleKeydown = (e) => {
+      switch (e.key) {
+        case 'Escape':
+        case 'Esc':
+          closePopup(e);
+          break;
+      }
+    };
+
+    const handleClick = (e) => {
+      nextTick(() => {
+        if (e.target !== popupEl.value && !popupEl.value.contains(e.target)) {
+          closePopup(e);
+        }
+      });
+    };
+
+    const handleResize = () => {
+      debounce(() => {
+        measurePopup();
+      }, 300);
+    };
+
+    const addHandlers = () => {
+      document.addEventListener('keydown', handleKeydown);
+      document.addEventListener('click', handleClick);
+    };
+
+    const measurePopup = () => {
+      closed.value = false;
+      nextTick(() => {
+        popupRect.value = popupEl.value.getBoundingClientRect();
+        closed.value = true;
+      });
+    };
+
+    const handleOpened = () => {
+      closed.value = false;
+      pos.value = props.position;
+      corner.value = undefined;
+
+      if (props.autoPosition) {
+        nextTick(() => {
+          // TODO: how to get $el?????
+          const triggerRect = rootEl.value.parentElement.getBoundingClientRect();
+          const { innerHeight, innerWidth } = window;
+          calculatePlacement(triggerRect, popupRect.value, innerWidth, innerHeight, props.position);
+        });
+      }
+
+      setTimeout(() => {
+        addHandlers();
+      }, 1);
+    };
+
+    const handleClosed = () => {
+      closed.value = true;
+      document.removeEventListener('keydown', handleKeydown);
+      document.removeEventListener('click', handleClick);
+      exiting.value = true;
+      setTimeout(() => {
+        exiting.value = false;
+      }, 200); // $cdr-duration-2;
+    };
+
+    watch(() => props.position, () => pos.value = props.position);
+    watch(() => props.opened, () => {
+      // if (!!newValue === !!oldValue) return;
+      // TODO: watch doesnt run unless it changes???? might need to use `watch`
+      if (props.opened) {
+        handleOpened();
+      } else {
+        handleClosed();
+      }
+    });
+
+    onMounted(() => {
+      measurePopup();
+      // resizeHandler = handleResize.bind(this); TODO: bind this?
+      window.addEventListener('resize', handleResize);
+    });
+    onUnmounted(() => {
+      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,
+    };
+  },
+});
+
+function _sfc_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 */))
+}
+var CdrPopup = /*#__PURE__*/_export_sfc(_sfc_main, [['render',_sfc_render]]);
+
+export { CdrPopup as default };

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

@@ -1,10 +1,64 @@
-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';
+import { defineComponent, computed, useCssModule, openBlock, createBlock, resolveDynamicComponent, normalizeClass, withCtx, createElementBlock, toDisplayString, createCommentVNode, renderSlot } from 'vue';
+import mapClasses from '../../utils/mapClasses.js';
+import { buildClass } from '../../utils/buildClass.js';
+import validateProp from '../../utils/propValidator.js';
+import _export_sfc from '../../../_virtual/plugin-vue_export-helper.js';
 
-const cssModules = script.__cssModules = {};
-cssModules["$style"] = style0;
+const _sfc_main = defineComponent({
+  name: 'CdrQuote',
+  props: {
+    tag: {
+      type: String,
+      default: 'blockquote',
+      validator: (value) => validateProp(value, ['blockquote', 'aside', 'q', 'div']),
+    },
+    modifier: {
+      type: String,
+      default: '',
+      validator: (value) => validateProp(value, ['', 'pull']),
+    },
+    /** Caption summary text */
+    summary: String,
+    /** Caption credit text */
+    citation: String,
+  },
+  setup(props) {
+    const baseClass = 'cdr-quote';
+    const modifierClass = computed(() => buildClass(baseClass, props.modifier));
+    return {
+      style: useCssModule(),
+      mapClasses,
+      baseClass,
+      modifierClass,
+      summaryClass: 'cdr-quote__summary',
+      citationClass: 'cdr-quote__citation',
+    };
+  },
+});
 
-script.render = render;
-script.__file = "src/components/quote/CdrQuote.vue";
+function _sfc_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(() => [
+      (_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"]))
+}
+var CdrQuote = /*#__PURE__*/_export_sfc(_sfc_main, [['render',_sfc_render]]);
+
+export { CdrQuote as default };

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

@@ -1,10 +1,110 @@
-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';
+import { defineComponent, ref, watch, useCssModule, resolveComponent, openBlock, createBlock, normalizeClass, withCtx, createElementVNode, mergeProps, renderSlot } from 'vue';
+import validateProp from '../../utils/propValidator.js';
+import CdrLabelWrapper from '../labelWrapper/CdrLabelWrapper.js';
+import sizeProps from '../../props/size.js';
+import backgroundProps from '../../props/background.js';
+import _export_sfc from '../../../_virtual/plugin-vue_export-helper.js';
 
-const cssModules = script.__cssModules = {};
-cssModules["$style"] = style0;
+const _sfc_main = defineComponent({
+  name: 'CdrRadio',
+  components: {
+    CdrLabelWrapper,
+  },
+  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,
+    },
 
-script.render = render;
-script.__file = "src/components/radio/CdrRadio.vue";
+    modifier: {
+      type: String,
+      default: '',
+      validator: (value) => validateProp(value, ['', 'hide-figure']),
+    },
+
+    size: sizeProps,
+
+    // Set which background type the input renders on
+    background: backgroundProps,
+
+    /**
+     * Sets the value of the radio. Required.
+    */
+    customValue: {
+      type: [String, Number, Boolean, Object, Array, Symbol, Function],
+    },
+
+    /** @ignore v-model binding */
+    modelValue: {
+      type: [String, Number, Boolean, Object, Array, Symbol, Function],
+    },
+  },
+
+  setup(props) {
+    const baseClass = 'cdr-radio';
+
+
+    const newValue = ref(props.modelValue);
+
+    watch(() => props.value, (val) => {
+      newValue.value = val;
+    });
+
+    return {
+      style: useCssModule(),
+      baseClass,
+      newValue,
+    };
+  },
+});
+
+const _hoisted_1 = ["name", "checked", "value"];
+
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_cdr_label_wrapper = resolveComponent("cdr-label-wrapper");
+
+  return (openBlock(), createBlock(_component_cdr_label_wrapper, {
+    class: normalizeClass(_ctx.style[_ctx.baseClass]),
+    size: _ctx.size,
+    modifier: _ctx.modifier,
+    "label-class": _ctx.labelClass,
+    "content-class": _ctx.contentClass,
+    background: _ctx.background,
+    disabled: _ctx.$attrs.disabled
+  }, {
+    input: withCtx(() => [
+      createElementVNode("input", mergeProps({
+        class: [_ctx.style['cdr-radio__input'], _ctx.inputClass],
+        type: "radio",
+        name: _ctx.name,
+        checked: _ctx.newValue == _ctx.customValue,
+        value: _ctx.customValue
+      }, _ctx.$attrs, {
+        onChange: _cache[0] || (_cache[0] = $event => (_ctx.$emit('update:modelValue', $event.target.checked && _ctx.customValue, $event)))
+      }), null, 16 /* FULL_PROPS */, _hoisted_1)
+    ]),
+    default: withCtx(() => [
+      renderSlot(_ctx.$slots, "default")
+    ]),
+    _: 3 /* FORWARDED */
+  }, 8 /* PROPS */, ["class", "size", "modifier", "label-class", "content-class", "background", "disabled"]))
+}
+var CdrRadio = /*#__PURE__*/_export_sfc(_sfc_main, [['render',_sfc_render]]);
+
+export { CdrRadio as default };

package/dist/lib/src/components/rating/CdrRating.js

@@ -1,10 +1,184 @@
-import script from './CdrRating.vue_vue_type_script_lang.js';
-export { default } from './CdrRating.vue_vue_type_script_lang.js';
-import { render } from './CdrRating.vue_vue_type_template_id_4cfe512c_lang.js';
-import style0 from './styles/CdrRating.module.scss_vue_type_style_index_0_src_id_4cfe512c_module_true_lang.css.js';
+import { defineComponent, computed, useCssModule, openBlock, createBlock, resolveDynamicComponent, normalizeClass, withCtx, createElementVNode, createElementBlock, Fragment, renderList, createCommentVNode, toDisplayString } from 'vue';
+import { buildClass } from '../../utils/buildClass.js';
+import validateProp from '../../utils/propValidator.js';
+import mapClasses from '../../utils/mapClasses.js';
+import _export_sfc from '../../../_virtual/plugin-vue_export-helper.js';
 
-const cssModules = script.__cssModules = {};
-cssModules["$style"] = style0;
+const _sfc_main = defineComponent({
+  name: 'CdrRating',
+  props: {
+    /**
+     * Rating value (out of 5)
+     */
+    rating: {
+      required: true,
+      type: [String, Number],
+      default: 0,
+    },
+    /**
+     * Total number of ratings
+     */
+    count: {
+      required: false,
+      type: [String, Number],
+      default: null,
+    },
+    /**
+     * Hides the word 'reviews' if true
+     */
+    compact: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * Allows the ratings to act as a link
+     */
+    href: {
+      type: String,
+    },
+    size: {
+      type: String,
+      default: 'medium',
+      validator: (value) => validateProp(
+        value,
+        ['small', 'medium', 'large'],
+      ),
+    },
+  },
+  setup(props) {
+    const baseClass = 'cdr-rating';
+    const sizeClass = computed(() => props.size && buildClass(baseClass, props.size));
+    const linkedClass = computed(() => props.href && buildClass(baseClass, 'linked'));
+    const emptyClass = computed(() => ((props.rounded > 0 || props.count > 0)
+      ? 'cdr-rating__placeholder'
+      : 'cdr-rating__placeholder--no-reviews'));
+    const tag = computed(() => (props.href ? 'a' : 'div'));
 
-script.render = render;
-script.__file = "src/components/rating/CdrRating.vue";
+    const displayRating = computed(() => (Math.round(props.rating * 10) / 10).toFixed(1));
+
+    const rounded = computed(() => Math.round(props.rating * 4) / 4);
+
+    const whole = computed(() => Math.floor(rounded.value));
+
+    const remainder = computed(() => rounded.value.toFixed(2).split('.')[1]);
+
+    const empties = computed(() => 5 - whole.value - (remainder.value > 0 ? 1 : 0));
+
+    const formattedCount = computed(() => (props.compact ? `(${props.count})` : `${props.count}`));
+
+    const srText = computed(() => {
+      // linked
+      if (props.href) {
+        // no reviews
+        if (props.count === 0 || props.count === '0') {
+          return 'No reviews yet; be the first!';
+        }
+        // no count
+        if (props.count === null) {
+          return `View the reviews with an average rating of ${displayRating.value} out of 5 stars`;
+        }
+        // default
+        return `View the ${props.count} reviews with an average rating of ${displayRating.value} out of 5 stars`; // eslint-disable-line max-len
+      }
+
+      // non-linked
+      // no reviews
+      if (props.count === 0 || props.count === '0') {
+        return '0 reviews';
+      }
+      // no count
+      if (props.count === null) {
+        return `Rated ${displayRating.value} out of 5 stars`;
+      }
+      // default
+      // eslint-disable-next-line
+      return `${props.count} reviews with an average rating of ${displayRating.value} out of 5 stars`;
+    });
+
+    return {
+      style: useCssModule(),
+      tag,
+      baseClass,
+      sizeClass,
+      linkedClass,
+      emptyClass,
+      displayRating,
+      rounded,
+      whole,
+      remainder,
+      empties,
+      formattedCount,
+      srText,
+      mapClasses,
+    };
+  },
+});
+
+const _hoisted_1 = { key: 1 };
+
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return (openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), {
+    href: _ctx.href,
+    class: normalizeClass(_ctx.mapClasses(_ctx.style,
+                       _ctx.baseClass,
+                       _ctx.sizeClass,
+                       _ctx.linkedClass,
+    ))
+  }, {
+    default: withCtx(() => [
+      createElementVNode("div", {
+        class: normalizeClass(_ctx.style['cdr-rating__ratings'])
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(Array(_ctx.whole).keys(), (star) => {
+          return (openBlock(), createElementBlock("span", {
+            class: normalizeClass(_ctx.mapClasses(_ctx.style, 'cdr-rating__icon', 'cdr-rating__100')),
+            key: `rating-whole-${star}`,
+            "aria-hidden": "true"
+          }, null, 2 /* CLASS */))
+        }), 128 /* KEYED_FRAGMENT */)),
+        (_ctx.remainder)
+          ? (openBlock(), createElementBlock("span", {
+              key: 0,
+              class: normalizeClass(_ctx.mapClasses(_ctx.style, 'cdr-rating__icon', `cdr-rating__${_ctx.remainder}`)),
+              "aria-hidden": "true"
+            }, null, 2 /* CLASS */))
+          : createCommentVNode("v-if", true),
+        (openBlock(true), createElementBlock(Fragment, null, renderList(Array(_ctx.empties).keys(), (empty) => {
+          return (openBlock(), createElementBlock("span", {
+            class: normalizeClass(_ctx.mapClasses(_ctx.style,
+                           'cdr-rating__icon',
+                           _ctx.emptyClass,
+        )),
+            key: `rating-empty-${empty}`,
+            "aria-hidden": "true"
+          }, null, 2 /* CLASS */))
+        }), 128 /* KEYED_FRAGMENT */))
+      ], 2 /* CLASS */),
+      (_ctx.count !== null)
+        ? (openBlock(), createElementBlock("span", {
+            key: 0,
+            "aria-hidden": "true",
+            class: normalizeClass(_ctx.style['cdr-rating__count'])
+          }, [
+            (_ctx.href)
+              ? (openBlock(), createElementBlock("span", {
+                  key: 0,
+                  class: normalizeClass(_ctx.style['cdr-rating__number'])
+                }, toDisplayString(_ctx.displayRating), 3 /* TEXT, CLASS */))
+              : createCommentVNode("v-if", true),
+            createElementVNode("span", null, toDisplayString(_ctx.formattedCount), 1 /* TEXT */),
+            (!_ctx.compact)
+              ? (openBlock(), createElementBlock("span", _hoisted_1, "  Reviews "))
+              : createCommentVNode("v-if", true)
+          ], 2 /* CLASS */))
+        : createCommentVNode("v-if", true),
+      createElementVNode("span", {
+        class: normalizeClass(_ctx.style['cdr-rating__caption-sr'])
+      }, toDisplayString(_ctx.srText), 3 /* TEXT, CLASS */)
+    ]),
+    _: 1 /* STABLE */
+  }, 8 /* PROPS */, ["href", "class"]))
+}
+var CdrRating = /*#__PURE__*/_export_sfc(_sfc_main, [['render',_sfc_render]]);
+
+export { CdrRating as default };