@rei/cedar 11.0.1 → 13.0.0-alpha.3

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

@@ -1,256 +1,10 @@
-import 'core-js/modules/web.dom-collections.iterator.js';
-import clsx from 'clsx';
-import debounce from 'lodash-es/debounce';
-import modules_5ecd7efb from './styles/CdrPopup.mjs';
-import validateProp from '../../utils/propValidator.mjs';
+import script from './CdrPopup.vue_vue_type_script_lang.mjs';
+export { default } from './CdrPopup.vue_vue_type_script_lang.mjs';
+import { render } from './CdrPopup.vue_vue_type_template_id_c9b83fa4_lang.mjs';
+import style0 from './styles/CdrPopup.module.scss_vue_type_style_index_0_src_id_c9b83fa4_module_true_lang.css.mjs';
 
-var CdrPopup = {
-  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
-    }
-  },
+const cssModules = script.__cssModules = {};
+cssModules["$style"] = style0;
 
-  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) {
-      this.$nextTick(() => {
-        if (e.target !== this.$refs.popup && !this.$refs.popup.contains(e.target)) {
-          this.closePopup(e);
-        }
-      });
-    },
-
-    handleResize() {
-      debounce(() => {
-        this.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() {
-      this.closed = false;
-      this.$nextTick(() => {
-        this.popupRect = this.$refs.popup.getBoundingClientRect();
-        this.closed = true;
-      });
-    },
-
-    calculatePlacement(triggerRect, popupRect, screenWidth, screenHeight) {
-      const offset = 14; // 10px for arrow 4px for spacing
-
-      const borderSize = 2; // need to include border for corner calculations
-
-      const triggerCenterY = triggerRect.top + triggerRect.height / 2;
-      const triggerCenterX = triggerRect.left + triggerRect.width / 2;
-      const 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
-      };
-      const 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
-      };
-      const invert = {
-        top: 'bottom',
-        bottom: 'top',
-        left: 'right',
-        right: 'left'
-      };
-      const inverse = invert[this.position];
-      const validDirs = Object.keys(dirs).filter(dir => dirs[dir] > 0);
-      const sortedDirs = Object.keys(dirs).sort((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
-        [this.pos] = validDirs;
-      } else {
-        // use whichever direction has the most space
-        [this.pos] = sortedDirs;
-      }
-
-      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() {
-      this.closed = false;
-      this.pos = this.position;
-      this.corner = undefined;
-
-      if (this.autoPosition) {
-        this.$nextTick(() => {
-          const triggerRect = this.$el.parentElement.getBoundingClientRect();
-          const {
-            popupRect
-          } = this;
-          const {
-            innerHeight,
-            innerWidth
-          } = window;
-          this.calculatePlacement(triggerRect, popupRect, innerWidth, innerHeight);
-        });
-      }
-
-      setTimeout(() => {
-        this.addHandlers();
-      }, 1);
-    },
-
-    handleClosed() {
-      this.closed = true;
-      document.removeEventListener('keydown', this.keyHandler);
-      document.removeEventListener('click', this.clickHandler);
-      this.exiting = true;
-      setTimeout(() => {
-        this.exiting = false;
-      }, 200); // $cdr-duration-2;
-    }
-
-  },
-
-  render() {
-    const 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": { ...this.$attrs
-      }
-    }, [this.$slots.default]), h("div", {
-      "class": this.style['cdr-popup__arrow']
-    })]);
-  }
-
-};
-
-export default CdrPopup;
+script.render = render;
+script.__file = "src/components/popup/CdrPopup.vue";

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

@@ -0,0 +1,161 @@
+import { defineComponent, ref, computed, watch, onMounted, onUnmounted, useCssModule, nextTick } from 'vue';
+import debounce from 'lodash/debounce';
+import validateProp from '../../utils/propValidator.mjs';
+import calculatePlacement from './calculatePlacement.mjs';
+import mapClasses from '../../utils/mapClasses.mjs';
+
+var script = 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';
+
+    // 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,
+    };
+  },
+});
+
+export { script as default };

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

@@ -0,0 +1,28 @@
+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.mjs

@@ -0,0 +1,76 @@
+import 'core-js/modules/web.dom-collections.iterator.js';
+
+function calculatePlacement (triggerRect, popupRect, screenWidth, screenHeight, originalPosition) {
+  const offset = 14; // 10px for arrow 4px for spacing
+
+  const borderSize = 2; // need to include border for corner calculations
+
+  const triggerCenterY = triggerRect.top + triggerRect.height / 2;
+  const triggerCenterX = triggerRect.left + triggerRect.width / 2;
+  let pos;
+  let corner;
+  const 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
+  };
+  const 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
+  };
+  const invert = {
+    top: 'bottom',
+    bottom: 'top',
+    left: 'right',
+    right: 'left'
+  };
+  const inverse = invert[originalPosition];
+  const validDirs = Object.keys(dirs).filter(dir => dirs[dir] > 0);
+  const sortedDirs = Object.keys(dirs).sort((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
+    [pos] = validDirs;
+  } else {
+    // use whichever direction has the most space
+    [pos] = sortedDirs;
+  }
+
+  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.mjs

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

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

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

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

@@ -0,0 +1,38 @@
+import { defineComponent, computed, useCssModule } from 'vue';
+import mapClasses from '../../utils/mapClasses.mjs';
+import { buildClass } from '../../utils/buildClass.mjs';
+import validateProp from '../../utils/propValidator.mjs';
+
+var script = 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',
+    };
+  },
+});
+
+export { script as default };

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

@@ -0,0 +1,27 @@
+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(() => [
+      (_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.mjs

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