@rei/cedar 11.0.1 → 13.0.0-alpha.3

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

@@ -1,425 +1,10 @@
-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';
+import script from './CdrPagination.vue_vue_type_script_lang.mjs';
+export { default } from './CdrPagination.vue_vue_type_script_lang.mjs';
+import { render } from './CdrPagination.vue_vue_type_template_id_15a761e6_lang.mjs';
+import style0 from './styles/CdrPagination.module.scss_vue_type_style_index_0_src_id_15a761e6_module_true_lang.css.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
-    },
+const cssModules = script.__cssModules = {};
+cssModules["$style"] = style0;
 
-    /**
-     * 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;
+script.render = render;
+script.__file = "src/components/pagination/CdrPagination.vue";

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

@@ -0,0 +1,189 @@
+import { defineComponent, ref, computed, onMounted, watch, useCssModule, nextTick } from 'vue';
+import mapClasses from '../../utils/mapClasses.mjs';
+import validateProp from '../../utils/propValidator.mjs';
+import '../icon/comps/caret-left.mjs';
+import '../icon/comps/caret-right.mjs';
+import '../select/CdrSelect.mjs';
+import script$1 from '../icon/comps/caret-left.vue_vue_type_script_lang.mjs';
+import script$2 from '../icon/comps/caret-right.vue_vue_type_script_lang.mjs';
+import script$3 from '../select/CdrSelect.vue_vue_type_script_lang.mjs';
+
+var script = defineComponent({
+  name: 'CdrPagination',
+  components: {
+    IconCaretLeft: script$1,
+    IconCaretRight: script$2,
+    CdrSelect: script$3,
+  },
+  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,
+    };
+  },
+});
+
+export { script as default };