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

package/dist/lib/src/components/pagination/CdrPagination.js

@@ -0,0 +1,315 @@
+import { defineComponent, ref, computed, onMounted, watch, useCssModule, resolveComponent, openBlock, createElementBlock, createElementVNode, normalizeClass, createBlock, resolveDynamicComponent, withCtx, createVNode, Fragment, renderList, createTextVNode, toDisplayString, nextTick } from 'vue';
+import mapClasses from '../../utils/mapClasses.js';
+import validateProp from '../../utils/propValidator.js';
+import IconCaretLeft from '../icon/comps/caret-left.js';
+import IconCaretRight from '../icon/comps/caret-right.js';
+import CdrSelect from '../select/CdrSelect.js';
+import _export_sfc from '../../../_virtual/plugin-vue_export-helper.js';
+
+const _sfc_main = defineComponent({
+  name: 'CdrPagination',
+  components: {
+    IconCaretLeft,
+    IconCaretRight,
+    CdrSelect,
+  },
+  props: {
+    // NOTE pagination now requires an ID
+    id: {
+      type: String,
+      required: true,
+    },
+    /**
+     * Total number of pages. Sometimes the total number of pages is different than total page data
+     * and this prop allows for that.
+     */
+    totalPages: {
+      type: Number,
+      default: null,
+    },
+    /**
+     * Array of objects. Objects have structure of { page: Number, url: String }
+     */
+    pages: {
+      type: Array,
+      required: true,
+      validator: (value) => {
+        const result = value.every((obj) => {
+          if (!Object.prototype.hasOwnProperty.call(obj, 'page')
+          || typeof obj.page !== 'number') {
+            console.error('Property "page" is missing or is not a number', obj); // eslint-disable-line
+            return false;
+          } if (!Object.prototype.hasOwnProperty.call(obj, 'url')
+          || typeof obj.url !== 'string') {
+            console.error('Property "url" is missing or is not a string', obj); // eslint-disable-line
+            return false;
+          }
+          return true;
+        });
+        return result;
+      },
+    },
+    linkTag: {
+      type: String,
+      default: 'a',
+      validator: (value) => validateProp(
+        value,
+        ['a', 'button'],
+      ),
+    },
+    forLabel: {
+      type: String,
+      default: '',
+    },
+    /** @ignore used for binding v-model, represents the current page */
+    modelValue: {
+      type: Number,
+    },
+  },
+  setup(props, ctx) {
+    const currentIdx = ref(0);
+
+    const innerValue = computed({
+      get: () => props.modelValue,
+      set: val => {
+        setCurrentIdx(val);
+        ctx.emit('update:modelValue', val);
+      }
+    });
+
+    const setCurrentIdx = (page) => {
+      currentIdx.value = props.pages.map((x) => x.page).indexOf(page);
+    };
+
+    const navigate = (pageNum, e) => {
+      // TODO: provide option to just emit without navigating to support vue-router?
+      // Dont do anything if clicking the current active page
+      if (pageNum === innerValue.value) {
+        e.preventDefault();
+        return;
+      }
+      innerValue.value = pageNum;
+      ctx.emit('navigate', pageNum, currentUrl.value, e);
+
+      // TODO: is this still necessary?
+      nextTick(() => {
+        // Done in a nextTick() to ensure rendering complete
+        try {
+          // Emulate native link click page reloading behaviour by blurring the
+          // paginator and returning focus to the document
+          const target = e.currentTarget || e.target;
+          target.blur();
+        } catch (err) {
+          // eslint-disable-next-line no-console
+          console.error(err);
+        }
+      });
+    };
+    const select = (page, e) => {
+      e.preventDefault();
+      console.log('IMPLEMENT ME!', page);
+      // TODO: add page links to refs array? better way to do this???
+      // $refs[`page-link-${page}-${componentID}`].click();
+    };
+
+    const currentUrl = computed(() => props.pages[currentIdx.value].url);
+    const ariaLabel = computed(() => props.forLabel || 'Pagination');
+
+    const prevPageData = computed(() => props.pages[currentIdx.value - 1]);
+    const nextPageData = computed(() => props.pages[currentIdx.value + 1]);
+
+
+    const paginationData = computed(() => {
+      const total = props.pages.length;
+      const current = innerValue.value;
+      const delta = 1;
+      let range = [];
+      let over5 = true;
+      let over5remain = true;
+
+      if (total <= 7) {
+        // all pages
+        return props.pages;
+      }
+
+      if (current < 5) {
+      // if first 5 pages
+        over5 = false;
+        // [2-5]
+        range = props.pages.slice(1, 5);
+      } else if (total - current < 4) {
+      // if last 5 pages
+        over5remain = false;
+        range = props.pages.slice(-5, -1);
+      } else {
+      // else in between
+        for (
+          let i = Math.max(2, current - delta);
+          i <= Math.min(total - 1, current + delta);
+          i += 1
+        ) {
+          range.push(props.pages[i - 1]);
+        }
+      }
+
+      if ((current - delta > 2) && over5) {
+        range.unshift('&hellip;');
+      }
+      if ((current + delta < total - 1) && over5remain) {
+        range.push('&hellip;');
+      }
+
+      range.unshift(props.pages[0]);
+      range.push(props.pages[total - 1]);
+
+      return range;
+    });
+
+    onMounted(() => setCurrentIdx(innerValue.value));
+
+    watch(() => props.pages, () => setCurrentIdx(innerValue.value));
+
+    return {
+      style: useCssModule(),
+      innerValue,
+      currentIdx,
+      ariaLabel,
+      prevPageData,
+      nextPageData,
+      paginationData,
+      select,
+      navigate,
+      mapClasses,
+    };
+  },
+});
+
+const _hoisted_1 = ["aria-label"];
+const _hoisted_2 = { key: 0 };
+const _hoisted_3 = {
+  key: 1,
+  "aria-hidden": "true"
+};
+const _hoisted_4 = ["value"];
+const _hoisted_5 = { key: 2 };
+const _hoisted_6 = {
+  key: 3,
+  "aria-hidden": "true"
+};
+
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_icon_caret_left = resolveComponent("icon-caret-left");
+  const _component_cdr_select = resolveComponent("cdr-select");
+  const _component_icon_caret_right = resolveComponent("icon-caret-right");
+
+  return (openBlock(), createElementBlock("nav", { "aria-label": _ctx.ariaLabel }, [
+    createElementVNode("ol", {
+      class: normalizeClass(_ctx.style['cdr-pagination'])
+    }, [
+      (_ctx.innerValue > _ctx.pages[0].page)
+        ? (openBlock(), createElementBlock("li", _hoisted_2, [
+            (openBlock(), createBlock(resolveDynamicComponent(_ctx.linkTag), {
+              "aria-label": "Go to previous page",
+              href: (_ctx.linkTag === 'a' && _ctx.prevPageData && _ctx.prevPageData.url) || undefined,
+              class: normalizeClass(_ctx.mapClasses(_ctx.style, 'cdr-pagination__link', 'cdr-pagination__prev')),
+              onClick: _cache[0] || (_cache[0] = (e) => _ctx.navigate(_ctx.prevPageData.page, e))
+            }, {
+              default: withCtx(() => [
+                createVNode(_component_icon_caret_left, {
+                  class: normalizeClass(_ctx.style['cdr-pagination_caret--prev'])
+                }, null, 8 /* PROPS */, ["class"])
+              ]),
+              _: 1 /* STABLE */
+            }, 8 /* PROPS */, ["href", "class"]))
+          ]))
+        : (openBlock(), createElementBlock("li", _hoisted_3, [
+            createElementVNode("span", {
+              "aria-disabled": "true",
+              class: normalizeClass(_ctx.mapClasses(_ctx.style, 'cdr-pagination__link', 'cdr-pagination__prev', 'cdr-pagination__link--disabled'))
+            }, [
+              createVNode(_component_icon_caret_left, {
+                class: normalizeClass(_ctx.style['cdr-pagination_caret--prev']),
+                "inherit-color": ""
+              }, null, 8 /* PROPS */, ["class"])
+            ], 2 /* CLASS */)
+          ])),
+      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.paginationData, (n) => {
+        return (openBlock(), createElementBlock("li", {
+          key: `pagination-${_ctx.id}-li-${n.page}`,
+          class: normalizeClass(_ctx.style['cdr-pagination__li--links'])
+        }, [
+          (n.page)
+            ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.linkTag), {
+                key: 0,
+                class: normalizeClass(_ctx.mapClasses(_ctx.style, 'cdr-pagination__link', n.page === _ctx.innerValue && 'cdr-pagination__link--current')),
+                "aria-label": n.page === _ctx.innerValue ? `Current page, page ${n.page}` : `Go to page ${n.page}`,
+                "aria-current": n.page === _ctx.innerValue ? 'page' : null,
+                href: (_ctx.linkTag === 'a' && n.url) || undefined,
+                onClick: (e) => _ctx.navigate(n.page, e)
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(n.page), 1 /* TEXT */)
+                ]),
+                _: 2 /* DYNAMIC */
+              }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["class", "aria-label", "aria-current", "href", "onClick"]))
+            : (openBlock(), createElementBlock("span", {
+                key: 1,
+                class: normalizeClass(_ctx.style['cdr-pagination__ellipse'])
+              }, " … ", 2 /* CLASS */))
+        ], 2 /* CLASS */))
+      }), 128 /* KEYED_FRAGMENT */)),
+      createElementVNode("li", {
+        class: normalizeClass(_ctx.style['cdr-pagination__li--select'])
+      }, [
+        createVNode(_component_cdr_select, {
+          id: `pagination-select-${_ctx.id}`,
+          modelValue: _ctx.innerValue,
+          "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => ((_ctx.innerValue) = $event)),
+          label: "Navigate to page",
+          "hide-label": "",
+          onChange: _ctx.select
+        }, {
+          default: withCtx(() => [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.paginationData.filter(n => n.page), (page) => {
+              return (openBlock(), createElementBlock("option", {
+                key: `pagination-${_ctx.id}-select-${page.page}`,
+                value: page.page
+              }, " Page " + toDisplayString(page.page) + toDisplayString(_ctx.totalPages === null ? '' : ` of ${_ctx.totalPages}`), 9 /* TEXT, PROPS */, _hoisted_4))
+            }), 128 /* KEYED_FRAGMENT */))
+          ]),
+          _: 1 /* STABLE */
+        }, 8 /* PROPS */, ["id", "modelValue", "onChange"])
+      ], 2 /* CLASS */),
+      (_ctx.innerValue < _ctx.pages[_ctx.pages.length - 1].page)
+        ? (openBlock(), createElementBlock("li", _hoisted_5, [
+            (openBlock(), createBlock(resolveDynamicComponent(_ctx.linkTag), {
+              "aria-label": "Go to next page",
+              href: (_ctx.linkTag === 'a' && _ctx.nextPageData && _ctx.nextPageData.url) || undefined,
+              class: normalizeClass(_ctx.mapClasses(_ctx.style, 'cdr-pagination__link', 'cdr-pagination__next')),
+              onClick: _cache[2] || (_cache[2] = (e) => _ctx.navigate(_ctx.nextPageData.page, e))
+            }, {
+              default: withCtx(() => [
+                createVNode(_component_icon_caret_right, {
+                  class: normalizeClass(_ctx.style['cdr-pagination_caret--next'])
+                }, null, 8 /* PROPS */, ["class"])
+              ]),
+              _: 1 /* STABLE */
+            }, 8 /* PROPS */, ["href", "class"]))
+          ]))
+        : (openBlock(), createElementBlock("li", _hoisted_6, [
+            createElementVNode("span", {
+              "aria-disabled": "true",
+              class: normalizeClass(_ctx.mapClasses(_ctx.style, 'cdr-pagination__link', 'cdr-pagination__next', 'cdr-pagination__link--disabled'))
+            }, [
+              createVNode(_component_icon_caret_right, {
+                class: normalizeClass(_ctx.style['cdr-pagination_caret--next']),
+                "inherit-color": ""
+              }, null, 8 /* PROPS */, ["class"])
+            ], 2 /* CLASS */)
+          ]))
+    ], 2 /* CLASS */)
+  ], 8 /* PROPS */, _hoisted_1))
+}
+var CdrPagination = /*#__PURE__*/_export_sfc(_sfc_main, [['render',_sfc_render]]);
+
+export { CdrPagination as default };

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

@@ -0,0 +1,183 @@
+import { defineComponent, ref, watch, onMounted, useCssModule, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, createVNode, withCtx, createTextVNode, toDisplayString, createCommentVNode, nextTick } from 'vue';
+import tabbable from 'tabbable';
+import IconXSm from '../icon/comps/x-sm.js';
+import CdrButton from '../button/CdrButton.js';
+import CdrPopup from '../popup/CdrPopup.js';
+import validateProp from '../../utils/propValidator.js';
+import mapClasses from '../../utils/mapClasses.js';
+import _export_sfc from '../../../_virtual/plugin-vue_export-helper.js';
+
+const _sfc_main = defineComponent({
+  name: 'CdrPopover',
+  components: {
+    CdrPopup,
+    CdrButton,
+    IconXSm,
+  },
+  props: {
+    position: {
+      type: String,
+      required: false,
+      default: 'top',
+      validator: (value) => 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) {
+    const isOpen = ref(false);
+    let lastActive;
+
+    const triggerEl = ref(null);
+    const popupEl = ref(null);
+
+    const hasTrigger = ctx.slots.trigger;
+    const hasTitle = ctx.slots.title || props.label;
+
+    const openPopover = (e) => {
+      const { activeElement } = document;
+
+      lastActive = activeElement;
+      isOpen.value = true;
+      ctx.emit('opened', e);
+      nextTick(() => {
+        const tabbables = tabbable(popupEl.value);
+        if (tabbables[0]) tabbables[0].focus();
+      });
+    };
+
+    const closePopover = (e) => {
+      isOpen.value = false;
+      ctx.emit('closed', e);
+      if (lastActive) lastActive.focus();
+    };
+
+    const addHandlers = ()  =>{
+      const triggerElement = triggerEl.value.children[0];
+      if (triggerElement) {
+        triggerElement.addEventListener('click', openPopover);
+      }
+    };
+
+    watch(() => props.open, () => {
+      // TODO: if eslint yells about this then eslint must go :)
+      props.open ? openPopover() : closePopover();
+    });
+
+    onMounted(() => {
+      addHandlers();
+
+      const 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,
+    };
+  },
+});
+
+const _hoisted_1 = { ref: "triggerEl" };
+
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_icon_x_sm = resolveComponent("icon-x-sm");
+  const _component_cdr_button = resolveComponent("cdr-button");
+  const _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": `${_ctx.isOpen}`,
+      id: _ctx.id,
+      "content-class": _ctx.contentClass
+    }, {
+      default: withCtx(() => [
+        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", {}, () => [
+                    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(() => [
+              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 */))
+}
+var CdrPopover = /*#__PURE__*/_export_sfc(_sfc_main, [['render',_sfc_render]]);
+
+export { CdrPopover as default };

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

@@ -0,0 +1,188 @@
+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 _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';
+
+    // 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 };