@rei/cedar 11.0.0-beta.7 → 13.0.0-alpha.1

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

@@ -1,425 +0,0 @@
-import clsx from 'clsx';
-import IconCaretLeft from '../icon/comps/caret-left.mjs';
-import IconCaretRight from '../icon/comps/caret-right.mjs';
-import CdrSelect from '../select/CdrSelect.mjs';
-import validateProp from '../../utils/propValidator.mjs';
-import modules_951394a1 from './styles/CdrPagination.mjs';
-
-var CdrPagination = {
-  name: 'CdrPagination',
-  components: {
-    IconCaretLeft,
-    IconCaretRight,
-    CdrSelect
-  },
-  model: {
-    prop: 'value',
-    event: 'update-pagination'
-  },
-  props: {
-    /**
-     * 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 */
-    value: {
-      type: Number
-    }
-  },
-
-  data() {
-    return {
-      style: modules_951394a1,
-      componentID: Math.random().toString(36).substr(2, 9),
-      currentIdx: 0
-    };
-  },
-
-  computed: {
-    // track value internally (for use with select vmodel) and update external value when internal changes
-    innerValue: {
-      get() {
-        return this.value;
-      },
-
-      set(newValue) {
-        this.setCurrentIdx(newValue);
-        this.$emit('update-pagination', newValue);
-      }
-
-    },
-
-    currentUrl() {
-      return this.pages[this.currentIdx].url;
-    },
-
-    totalPageData() {
-      return this.pages.length;
-    },
-
-    prevPageIdx() {
-      return this.currentIdx - 1;
-    },
-
-    nextPageIdx() {
-      return this.currentIdx + 1;
-    },
-
-    ariaLabel() {
-      return this.forLabel || 'Pagination';
-    },
-
-    /**
-     * Creates an array of the pages that should be shown as links with logic for truncation.
-     *
-     * If total = 20 ([#] indicates current page)
-     * [1] 2 3 4 5 ... 20
-     * 1 2 3 [4] 5 ... 20
-     * 1 ... 4 [5] 6 ... 20
-     * 1 ... 15 [16] 17 ... 20
-     * 1 ... 16 [17] 18 19 20
-     *
-     * If total 5 (or anything <= 7)
-     * [1] 2 3 4 5
-     * 1 2 [3] 4 5
-     * 1 2 3 4 [5]
-     *
-     * Degrades for prev/next only scenario
-     * urls = {"4": "url4", "5": "url5", "6": "url6"} (assuming current page is 5)
-     * 4 [5] 6
-     */
-    paginationData() {
-      const total = this.totalPageData;
-      const current = this.innerValue;
-      const delta = 1;
-      let range = [];
-      let over5 = true;
-      let over5remain = true;
-
-      if (total <= 7) {
-        // all pages
-        return this.pages;
-      }
-
-      if (current < 5) {
-        // if first 5 pages
-        over5 = false; // [2-5]
-
-        range = this.pages.slice(1, 5);
-      } else if (total - current < 4) {
-        // if last 5 pages
-        over5remain = false;
-        range = this.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(this.pages[i - 1]);
-        }
-      }
-
-      if (current - delta > 2 && over5) {
-        range.unshift('&hellip;');
-      }
-
-      if (current + delta < total - 1 && over5remain) {
-        range.push('&hellip;');
-      }
-
-      range.unshift(this.pages[0]);
-      range.push(this.pages[total - 1]);
-      return range;
-    },
-
-    prevElAttrs() {
-      const prevPageData = this.pages[this.prevPageIdx];
-      return {
-        // things that we want to be able to easily bulk bind to scoped slot (for a11y, styling, etc.)
-        attrs: {
-          class: clsx(this.style['cdr-pagination__link'], this.style['cdr-pagination__prev']),
-          'aria-label': 'Go to previous Page',
-          ref: "prev-link-".concat(this.componentID)
-        },
-        // The rest of this is available for binding if needed by user (i.e. optional with vue-router)
-        href: prevPageData === undefined ? null : prevPageData.url,
-        page: prevPageData === undefined ? null : prevPageData.page,
-        content: 'Prev',
-        iconClass: this.style['cdr-pagination__caret--prev'],
-        iconComponent: 'icon-caret-left',
-        iconPath: '#caret-left',
-        click: e => this.navigate(prevPageData.page, e)
-      };
-    },
-
-    prevEl() {
-      const h = this.$createElement;
-      const LinkTag = this.linkTag;
-      return this.innerValue > this.pages[0].page ? h("li", [this.$scopedSlots.prevLink ? this.$scopedSlots.prevLink(this.prevElAttrs) : h(LinkTag, {
-        "attrs": { ...this.prevElAttrs.attrs,
-          "href": LinkTag === 'a' && this.prevElAttrs.href
-        },
-        "ref": this.prevElAttrs.attrs.ref,
-        "on": {
-          "click": this.prevElAttrs.click
-        }
-      }, [h(this.prevElAttrs.iconComponent, {
-        "class": this.prevElAttrs.iconClass
-      }), this.prevElAttrs.content])]) : h("li", {
-        "attrs": {
-          "aria-hidden": "true"
-        }
-      }, [h("span", {
-        "attrs": {
-          "aria-disabled": "true"
-        },
-        "class": [this.prevElAttrs.attrs.class, this.style['cdr-pagination__link--disabled']]
-      }, [h(this.prevElAttrs.iconComponent, {
-        "class": this.prevElAttrs.iconClass,
-        "attrs": {
-          "inherit-color": true
-        }
-      }), this.prevElAttrs.content])]);
-    },
-
-    nextElAttrs() {
-      const nextPageData = this.pages[this.nextPageIdx];
-      return {
-        // things that we want to be able to easily bulk bind to scoped slot (for a11y, styling, etc.)
-        attrs: {
-          class: clsx(this.style['cdr-pagination__link'], this.style['cdr-pagination__next']),
-          'aria-label': 'Go to next page',
-          ref: "next-link-".concat(this.componentID)
-        },
-        // The rest of this is available for binding if needed by user (i.e. optional with vue-router)
-        href: nextPageData === undefined ? null : nextPageData.url,
-        page: nextPageData === undefined ? null : nextPageData.page,
-        content: 'Next',
-        iconClass: this.style['cdr-pagination__caret--next'],
-        iconComponent: 'icon-caret-right',
-        iconPath: '#caret-right',
-        click: e => this.navigate(nextPageData.page, e)
-      };
-    },
-
-    nextEl() {
-      const h = this.$createElement;
-      const LinkTag = this.linkTag;
-      return this.innerValue < this.pages[this.totalPageData - 1].page ? h("li", [this.$scopedSlots.nextLink ? this.$scopedSlots.nextLink(this.nextElAttrs) : h(LinkTag, {
-        "attrs": { ...this.nextElAttrs.attrs,
-          "href": LinkTag === 'a' && this.nextElAttrs.href
-        },
-        "ref": this.nextElAttrs.attrs.ref,
-        "on": {
-          "click": this.nextElAttrs.click
-        }
-      }, [this.nextElAttrs.content, h(this.nextElAttrs.iconComponent, {
-        "class": this.nextElAttrs.iconClass
-      })])]) : h("li", {
-        "attrs": {
-          "aria-hidden": "true"
-        }
-      }, [h("span", {
-        "attrs": {
-          "aria-disabled": "true"
-        },
-        "class": [this.nextElAttrs.attrs.class, this.style['cdr-pagination__link--disabled']]
-      }, [this.nextElAttrs.content, h(this.nextElAttrs.iconComponent, {
-        "class": this.nextElAttrs.iconClass,
-        "attrs": {
-          "inherit-color": true
-        }
-      })])]);
-    },
-
-    desktopEl() {
-      const h = this.$createElement;
-      return this.paginationData.map(n => h("li", {
-        "key": "".concat(n, "-").concat(this.guid()),
-        "class": this.style['cdr-pagination__li--links']
-      }, [n === '&hellip;' && h("span", {
-        "class": this.style['cdr-pagination__ellipse'],
-        "domProps": {
-          "innerHTML": n
-        }
-      }), n !== '&hellip;' && this.renderLinkEl(n)]));
-    },
-
-    mobileEl() {
-      const h = this.$createElement;
-      return h("li", {
-        "class": this.style['cdr-pagination__li--select']
-      }, [h("cdr-select", {
-        "attrs": {
-          "label": "Navigate to page",
-          "hide-label": true,
-          "id": "select-".concat(this.componentID)
-        },
-        "on": {
-          "change": this.select
-        },
-        "ref": "select-".concat(this.componentID),
-        "model": {
-          value: this.innerValue,
-          callback: $$v => {
-            this.innerValue = $$v;
-          }
-        }
-      }, [this.paginationData.map(n => n !== '&hellip;' && h("option", {
-        "key": "".concat(n, "-").concat(this.guid()),
-        "domProps": {
-          "value": n.page
-        }
-      }, ["Page ", n.page, this.totalPages === null ? '' : " of ".concat(this.totalPages)]))])]);
-    }
-
-  },
-  watch: {
-    pages() {
-      this.setCurrentIdx(this.innerValue);
-    }
-
-  },
-
-  beforeMount() {
-    this.setCurrentIdx(this.innerValue);
-  },
-
-  methods: {
-    setCurrentIdx(page) {
-      this.currentIdx = this.pages.map(x => x.page).indexOf(page);
-    },
-
-    navigate(pageNum, e) {
-      // Dont do anything if clicking the current active page
-      if (pageNum === this.innerValue) {
-        e.preventDefault();
-        return;
-      }
-
-      this.innerValue = pageNum;
-      this.$emit('navigate', pageNum, this.currentUrl, e);
-      this.$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);
-        }
-      });
-    },
-
-    select(page, e) {
-      e.preventDefault();
-
-      if (this.$scopedSlots.link) {
-        const ref = this.$scopedSlots.link()[0].context.$refs["page-link-".concat(page, "-").concat(this.componentID)]; // eslint-disable-line max-len
-
-        if (ref.$el) {
-          // it's a component (like vue-router)
-          ref.$el.click();
-        } else {
-          // it's standard markup
-          ref.click();
-        }
-      } else {
-        this.$refs["page-link-".concat(page, "-").concat(this.componentID)].click();
-      }
-    },
-
-    guid() {
-      function s4() {
-        return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
-      }
-
-      return "".concat(s4()).concat(s4(), "-").concat(s4(), "-").concat(s4(), "-").concat(s4(), "-").concat(s4()).concat(s4()).concat(s4());
-    },
-
-    renderLinkEl(n) {
-      const h = this.$createElement;
-      const linkData = {
-        // things that we want to be able to easily bulk bind to scoped slot (for a11y, styling, etc.)
-        attrs: {
-          class: clsx(this.style['cdr-pagination__link'], {
-            current: n.page === this.innerValue
-          }),
-          'aria-label': n.page === this.innerValue ? "Current page, page ".concat(n.page) : "Go to page ".concat(n.page),
-          'aria-current': n.page === this.innerValue ? 'page' : null,
-          ref: "page-link-".concat(n.page, "-").concat(this.componentID)
-        },
-        // The rest of this is available for binding if needed by user (i.e. optional with vue-router)
-        href: n.url,
-        click: e => this.navigate(n.page, e),
-        page: n.page,
-        content: n.page
-      };
-      const LinkTag = this.linkTag;
-      return this.$scopedSlots.link ? this.$scopedSlots.link(linkData) : h(LinkTag, {
-        "attrs": { ...linkData.attrs,
-          "href": LinkTag === 'a' && linkData.href
-        },
-        "on": {
-          "click": linkData.click
-        },
-        "ref": linkData.attrs.ref
-      }, [linkData.content]);
-    }
-
-  },
-
-  render() {
-    const h = arguments[0];
-    return h("nav", {
-      "attrs": {
-        "aria-label": this.ariaLabel
-      }
-    }, [h("ol", {
-      "class": this.style['cdr-pagination']
-    }, [this.prevEl, this.desktopEl, this.mobileEl, this.nextEl])]);
-  }
-
-};
-
-export default CdrPagination;

package/dist/lib/src/components/pagination/styles/CdrPagination.mjs

@@ -1,3 +0,0 @@
-var modules_951394a1 = {"cdr-pagination":"cdr-pagination_11-0-0-beta-7","cdr-pagination__li--links":"cdr-pagination__li--links_11-0-0-beta-7","cdr-pagination__li--select":"cdr-pagination__li--select_11-0-0-beta-7","cdr-pagination__link":"cdr-pagination__link_11-0-0-beta-7","cdr-pagination__link--disabled":"cdr-pagination__link--disabled_11-0-0-beta-7","cdr-pagination__ellipse":"cdr-pagination__ellipse_11-0-0-beta-7","cdr-pagination__prev":"cdr-pagination__prev_11-0-0-beta-7","cdr-pagination__next":"cdr-pagination__next_11-0-0-beta-7","cdr-pagination__caret--prev":"cdr-pagination__caret--prev_11-0-0-beta-7","cdr-pagination__caret--next":"cdr-pagination__caret--next_11-0-0-beta-7"};
-
-export default modules_951394a1;

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

@@ -1,155 +0,0 @@
-import tabbable from 'tabbable';
-import clsx from 'clsx';
-import modules_36d90b1f from './styles/CdrPopover.mjs';
-import validateProp from '../../utils/propValidator.mjs';
-import IconXSm from '../icon/comps/x-sm.mjs';
-import CdrButton from '../button/CdrButton.mjs';
-import CdrPopup from '../popup/CdrPopup.mjs';
-
-var CdrPopover = {
-  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
-    }
-  },
-
-  data() {
-    return {
-      style: modules_36d90b1f,
-      isOpen: false,
-      openHandler: undefined,
-      lastActive: undefined
-    };
-  },
-
-  watch: {
-    open() {
-      if (this.open) {
-        this.openPopover();
-      } else {
-        this.closePopover();
-      }
-    }
-
-  },
-
-  mounted() {
-    this.addHandlers();
-    const trigger = this.$refs.trigger.children[0];
-
-    if (trigger) {
-      trigger.setAttribute('aria-controls', this.id);
-      trigger.setAttribute('aria-haspopup', 'dialog');
-    }
-  },
-
-  methods: {
-    openPopover(e) {
-      const {
-        activeElement
-      } = document;
-      this.lastActive = activeElement;
-      this.isOpen = true;
-      this.$emit('opened', e);
-      this.$nextTick(() => {
-        const tabbables = tabbable(this.$refs.popup.$el);
-        if (tabbables[0]) tabbables[0].focus();
-      });
-    },
-
-    closePopover(e) {
-      this.isOpen = false;
-      this.$emit('closed', e);
-      if (this.lastActive) this.lastActive.focus();
-    },
-
-    addHandlers() {
-      this.openHandler = this.openPopover.bind(this);
-      const triggerElement = this.$refs.trigger.children[0];
-
-      if (triggerElement) {
-        triggerElement.addEventListener('click', this.openHandler);
-      }
-    }
-
-  },
-
-  render() {
-    const h = arguments[0];
-    return h("div", {
-      "class": clsx(this.style['cdr-popover--wrapper'], this.$slots.trigger ? this.style['cdr-popover--position'] : '')
-    }, [h("div", {
-      "ref": "trigger"
-    }, [this.$slots.trigger]), h("cdr-popup", {
-      "class": this.style['cdr-popover'],
-      "attrs": {
-        "role": "dialog",
-        "position": this.position,
-        "autoPosition": this.autoPosition,
-        "opened": this.isOpen,
-        "aria-expanded": "".concat(this.isOpen),
-        "id": this.id,
-        "contentClass": this.contentClass
-      },
-      "ref": "popup",
-      "on": {
-        "closed": this.closePopover
-      }
-    }, [h("div", {
-      "class": this.style['cdr-popover__container']
-    }, [h("div", {
-      "class": this.style['cdr-popover__content']
-    }, [(this.$slots.title || this.label) && h("div", {
-      "class": this.style['cdr-popover__title']
-    }, [this.$slots.title, !this.$slots.title && this.label && h("span", [this.label])]), this.$slots.default]), h("cdr-button", {
-      "class": this.style['cdr-popover__close-button'],
-      "attrs": {
-        "icon-only": true,
-        "aria-label": "Close",
-        "size": "small"
-      },
-      "on": {
-        "click": this.closePopover
-      }
-    }, [h("icon-x-sm", {
-      "slot": "icon",
-      "attrs": {
-        "inherit-color": true
-      }
-    })])])])]);
-  }
-
-};
-
-export default CdrPopover;

package/dist/lib/src/components/popover/styles/CdrPopover.mjs

@@ -1,3 +0,0 @@
-var modules_36d90b1f = {"cdr-popover--position":"cdr-popover--position_11-0-0-beta-7","cdr-popover--wrapper":"cdr-popover--wrapper_11-0-0-beta-7","cdr-popup--closed":"cdr-popup--closed_11-0-0-beta-7","cdr-popover__title":"cdr-popover__title_11-0-0-beta-7","cdr-popover__container":"cdr-popover__container_11-0-0-beta-7","cdr-popover__content":"cdr-popover__content_11-0-0-beta-7","cdr-popover__close-button":"cdr-popover__close-button_11-0-0-beta-7"};
-
-export default modules_36d90b1f;