@rei/cedar 11.0.1 → 13.0.0-alpha.3

package/dist/lib/src/components/table/CdrTable.vue_vue_type_template_id_81c7b324_lang.mjs

@@ -0,0 +1,22 @@
+import { openBlock, createElementBlock, normalizeClass, createElementVNode, mergeProps, renderSlot } from 'vue';
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return (openBlock(), createElementBlock("div", {
+    class: normalizeClass(_ctx.style[_ctx.wrapperClass])
+  }, [
+    createElementVNode("table", mergeProps(_ctx.$attrs, {
+      class: _ctx.mapClasses(_ctx.style,
+                         _ctx.baseClass,
+                         _ctx.sizeClass,
+                         _ctx.stripedClass,
+                         _ctx.hoverClass,
+                         _ctx.borderClass,
+                         _ctx.fullWidthClass,
+      )
+    }), [
+      renderSlot(_ctx.$slots, "default")
+    ], 16 /* FULL_PROPS */)
+  ], 2 /* CLASS */))
+}
+
+export { render };

package/dist/lib/src/components/table/styles/CdrTable.module.scss_vue_type_style_index_0_src_id_81c7b324_module_true_lang.css.mjs

@@ -0,0 +1,3 @@
+var style0 = {"cdr-table":"cdr-table_13-0-0-alpha-3","cdr-table--small":"cdr-table--small_13-0-0-alpha-3","cdr-table--medium":"cdr-table--medium_13-0-0-alpha-3","cdr-table--large":"cdr-table--large_13-0-0-alpha-3","cdr-table--striped":"cdr-table--striped_13-0-0-alpha-3","cdr-table--border":"cdr-table--border_13-0-0-alpha-3","cdr-table--full-width":"cdr-table--full-width_13-0-0-alpha-3","cdr-table--responsive":"cdr-table--responsive_13-0-0-alpha-3","cdr-table--hover":"cdr-table--hover_13-0-0-alpha-3","cdr-table--full-width@xs":"cdr-table--full-width@xs_13-0-0-alpha-3","cdr-table--full-width@sm":"cdr-table--full-width@sm_13-0-0-alpha-3","cdr-table--full-width@md":"cdr-table--full-width@md_13-0-0-alpha-3","cdr-table--full-width@lg":"cdr-table--full-width@lg_13-0-0-alpha-3"};
+
+export { style0 as default };

package/dist/lib/src/components/tabs/CdrTabPanel.mjs

@@ -1,105 +1,10 @@
-import clsx from 'clsx';
-import modifier from '../../mixins/modifier.mjs';
-import modules_7f8cc96c from './styles/CdrTabPanel.mjs';
+import script from './CdrTabPanel.vue_vue_type_script_lang.mjs';
+export { default } from './CdrTabPanel.vue_vue_type_script_lang.mjs';
+import { render } from './CdrTabPanel.vue_vue_type_template_id_2950521f_lang.mjs';
+import style0 from './styles/CdrTabPanel.module.scss_vue_type_style_index_0_src_id_2950521f_module_true_lang.css.mjs';
 
-var CdrTabPanel = {
-  name: 'CdrTabPanel',
-  mixins: [modifier],
-  props: {
-    /**
-     * Required string value that shows up on tab header
-     */
-    name: {
-      type: String,
-      required: true
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    ariaLabelledby: {
-      type: String,
-      required: true
-    },
-    id: {
-      type: String,
-      required: true
-    }
-  },
+const cssModules = script.__cssModules = {};
+cssModules["$style"] = style0;
 
-  data() {
-    return {
-      active: false,
-      hidden: true,
-      offsetX: 0,
-      animationDirection: null,
-      style: modules_7f8cc96c
-    };
-  },
-
-  computed: {
-    baseClass() {
-      return 'cdr-tab-panel';
-    },
-
-    animationClass() {
-      return this.animationDirection ? modules_7f8cc96c["cdr-tab-panel-".concat(this.animationDirection)] : null;
-    }
-
-  },
-  methods: {
-    setActive(state) {
-      if (state) this.hidden = false;
-      this.active = state;
-      this.$emit('tab-change', state, this.id);
-    },
-
-    setAnimationDirection(direction) {
-      this.animationDirection = direction;
-    },
-
-    setOffsetX(x) {
-      this.offsetX = x;
-    },
-
-    handleUpArrowNav() {
-      this.$parent.setFocusToActiveTabHeader();
-    },
-
-    animationEnd(event) {
-      if (event.animationName.split('-')[0] === 'exit') {
-        this.hidden = true;
-        this.animationDirection = null;
-      }
-    }
-
-  },
-
-  render() {
-    const h = arguments[0];
-    return h("div", {
-      "attrs": {
-        "aria-hidden": !this.active,
-        "aria-labelledby": this.ariaLabelledby,
-        "hidden": this.hidden,
-        "id": this.id,
-        "tabindex": "0",
-        "role": "tabpanel"
-      },
-      "class": clsx(this.style[this.baseClass], this.modifierClass, this.animationClass),
-      "ref": "cdrTabPanelContainer",
-      "key": this.name,
-      "on": {
-        "keydown": $event => {
-          if (!("button" in $event) && this._k($event.keyCode, "up", 38, $event.key, ["Up", "ArrowUp"])) return null;
-          $event.preventDefault();
-          return this.handleUpArrowNav($event);
-        },
-        "animationend": this.animationEnd
-      }
-    }, [this.$slots.default]);
-  }
-
-};
-
-export default CdrTabPanel;
+script.render = render;
+script.__file = "src/components/tabs/CdrTabPanel.vue";

package/dist/lib/src/components/tabs/CdrTabPanel.vue_vue_type_script_lang.mjs

@@ -0,0 +1,96 @@
+import { defineComponent, ref, computed, inject, onBeforeMount, useCssModule } from 'vue';
+import { buildClass } from '../../utils/buildClass.mjs';
+import validateProp from '../../utils/propValidator.mjs';
+import mapClasses from '../../utils/mapClasses.mjs';
+
+var script = defineComponent({
+  name: 'CdrTabPanel',
+  props: {
+    /**
+     * Required string value that shows up on tab header
+     */
+    name: {
+      type: String,
+      required: true,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    ariaLabelledby: {
+      type: String,
+      required: true,
+    },
+    id: {
+      type: String,
+      required: true,
+    },
+    modifier: {
+      type: String,
+      default: '',
+      validator: (value) => validateProp(value, ['centered', 'compact', 'full-width', 'no-border', '']),
+    },
+  },
+
+  setup(props, ctx) {
+    const baseClass = 'cdr-tab-panel';
+    const active = ref(false);
+    const hidden = ref(true);
+    const animationDirection = ref(null);
+
+    const modifierClass = computed(() => buildClass(baseClass, props.modifier));
+
+    const setActive = (state) => {
+      // TODO: provide/inject current active tab index or something?
+      if (state) hidden.value = false;
+      active.value = state;
+      ctx.emit('tab-change', state, props.id);
+    };
+    const setAnimationDirection = (direction) => {
+      // TODO Use provide/inject here?
+      // console.log(direction, 'YOOOOOO')
+      animationDirection.value = direction;
+    };
+    const handleUpArrowNav = () => {
+      // YOU WAHT NOW?!?!?!
+      // TODO: emit event for tabPanel to deal with????
+      ctx.emit('tab-arrow-up');
+      // $parent.setFocusToActiveTabHeader();
+    };
+    const animationEnd = (event) => {
+      if (event.animationName.split('-')[0] === 'exit') {
+        hidden.value = true;
+        animationDirection.value = null;
+      }
+    };
+
+    const tabs = inject('tabs');
+
+    onBeforeMount(() => {
+      tabs.value.push({
+        name: props.name,
+        id: props.id,
+        disabled: props.disabled,
+        ariaLabelledby: props.ariaLabelledby,
+        setActive,
+        setAnimationDirection,
+      });
+    });
+
+    return {
+      style: useCssModule(),
+      modifierClass,
+      animationDirection,
+      baseClass,
+      mapClasses,
+      animationEnd,
+      active,
+      hidden,
+      handleUpArrowNav,
+      setActive,
+      setAnimationDirection,
+    };
+  },
+});
+
+export { script as default };

package/dist/lib/src/components/tabs/CdrTabPanel.vue_vue_type_template_id_2950521f_lang.mjs

@@ -0,0 +1,22 @@
+import { openBlock, createElementBlock, normalizeClass, withKeys, withModifiers, renderSlot } from 'vue';
+
+const _hoisted_1 = ["aria-hidden", "aria-labelledby", "hidden", "id"];
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return (openBlock(), createElementBlock("div", {
+    "aria-hidden": !_ctx.active,
+    "aria-labelledby": _ctx.ariaLabelledby,
+    class: normalizeClass(_ctx.mapClasses(_ctx.style, _ctx.baseClass, _ctx.modifierClass, _ctx.animationDirection && `cdr-tab-panel-${_ctx.animationDirection}`)),
+    hidden: _ctx.hidden,
+    id: _ctx.id,
+    tabindex: "0",
+    role: "tabpanel",
+    onKeydown: _cache[0] || (_cache[0] = withKeys(withModifiers((...args) => (_ctx.handleUpArrowNav && _ctx.handleUpArrowNav(...args)), ["prevent"]), ["up"])),
+    onAnimationend: _cache[1] || (_cache[1] = (...args) => (_ctx.animationEnd && _ctx.animationEnd(...args))),
+    key: _ctx.name
+  }, [
+    renderSlot(_ctx.$slots, "default")
+  ], 42 /* CLASS, PROPS, HYDRATE_EVENTS */, _hoisted_1))
+}
+
+export { render };

package/dist/lib/src/components/tabs/CdrTabs.mjs

@@ -1,353 +1,10 @@
-import debounce from 'lodash-es/debounce';
-import clsx from 'clsx';
-import { CdrColorBackgroundPrimary, CdrSpaceHalfX, CdrSpaceOneX } from '../../../node_modules/@rei/cdr-tokens/dist/js/cdr-tokens.esm.mjs';
-import modifier from '../../mixins/modifier.mjs';
-import size from '../../mixins/size.mjs';
-import modules_722543cf from './styles/CdrTabs.mjs';
+import script from './CdrTabs.vue_vue_type_script_lang.mjs';
+export { default } from './CdrTabs.vue_vue_type_script_lang.mjs';
+import { render } from './CdrTabs.vue_vue_type_template_id_0b62a2ae_lang.mjs';
+import style0 from './styles/CdrTabs.module.scss_vue_type_style_index_0_src_id_0b62a2ae_module_true_lang.css.mjs';
 
-var CdrTabs = {
-  name: 'CdrTabs',
-  mixins: [modifier, size],
-  props: {
-    height: {
-      type: String,
-      default: '240px'
-    },
-    activeTab: {
-      type: Number,
-      default: 0
-    },
-    backgroundColor: {
-      type: String,
-      default: CdrColorBackgroundPrimary
-    }
-  },
+const cssModules = script.__cssModules = {};
+cssModules["$style"] = style0;
 
-  data() {
-    return {
-      tabs: [],
-      underlineOffsetX: 0,
-      underlineWidth: 0,
-      underlineScrollX: 0,
-      activeTabIndex: 0,
-      headerWidth: 0,
-      headerOverflow: false,
-      overflowLeft: false,
-      overflowRight: false,
-      animationInProgress: false,
-      style: modules_722543cf
-    };
-  },
-
-  computed: {
-    baseClass() {
-      return 'cdr-tabs';
-    },
-
-    underlineStyle() {
-      return {
-        transform: "translateX(".concat(this.underlineOffsetX, "px)"),
-        width: "".concat(this.underlineWidth, "px")
-      };
-    },
-
-    gradientLeftStyle() {
-      const gradient = "linear-gradient(to left, rgba(255, 255, 255, 0), ".concat(this.backgroundColor, ")");
-      return {
-        background: gradient
-      };
-    },
-
-    gradientRightStyle() {
-      const gradient = "linear-gradient(to right, rgba(255, 255, 255, 0), ".concat(this.backgroundColor, ")");
-      return {
-        background: gradient
-      };
-    }
-
-  },
-
-  mounted() {
-    this.tabs = (this.$slots.default || []).map(vnode => vnode.componentInstance).filter(tab => tab); // get vue component children in the slot
-
-    this.activeTabIndex = this.getNextTab(this.activeTab);
-
-    if (this.tabs[this.activeTabIndex] && this.tabs[this.activeTabIndex].setActive) {
-      this.tabs[this.activeTabIndex].setActive(true);
-    }
-
-    this.$nextTick(() => {
-      this.headerWidth = this.getHeaderWidth();
-      this.calculateOverflow();
-      setTimeout(() => {
-        this.updateUnderline();
-      }, 500);
-    }); // Check for header overflow on window resize for gradient behavior.
-
-    window.addEventListener('resize', debounce(() => {
-      this.headerWidth = this.getHeaderWidth();
-      this.calculateOverflow();
-      this.updateUnderline();
-    }, 500)); // Check for header overflow on widow resize for gradient behavior.
-
-    this.$refs.cdrTabsHeader.parentElement.addEventListener('scroll', debounce(() => {
-      this.calculateOverflow();
-      this.updateUnderline();
-    }, 50));
-  },
-
-  methods: {
-    getNextTab(startIndex) {
-      for (let i = startIndex; i < this.tabs.length; i += 1) {
-        if (!this.tabs[i].disabled) {
-          return i;
-        }
-      }
-
-      if (startIndex !== 0) {
-        for (let k = 0; k < startIndex; k += 1) {
-          if (!this.tabs[k].disabled) {
-            return k;
-          }
-        }
-      }
-
-      return -1;
-    },
-
-    getPreviousTab(startIndex) {
-      for (let i = startIndex; i > -1; i -= 1) {
-        if (!this.tabs[i].disabled) {
-          return i;
-        }
-      }
-
-      if (startIndex !== this.tabs.length - 1) {
-        for (let k = this.tabs.length - 1; k > startIndex; k -= 1) {
-          if (!this.tabs[k].disabled) {
-            return k;
-          }
-        }
-      }
-
-      return -1;
-    },
-
-    handleClick: debounce(function handleClickCallback(tabClicked) {
-      const newIndex = this.tabs.findIndex(tab => tabClicked.name === tab.name);
-      this.changeTab(newIndex);
-    }, 500, {
-      leading: true,
-      trailing: false
-    }),
-
-    changeTab(newIndex) {
-      const oldIndex = this.activeTabIndex;
-      this.hideScrollBar();
-
-      if (newIndex > oldIndex) {
-        this.tabs[oldIndex].setAnimationDirection('exit-left');
-        this.tabs[oldIndex].setActive(false);
-        setTimeout(() => {
-          this.tabs[newIndex].setActive(true);
-          this.tabs[newIndex].setAnimationDirection('enter-right');
-        }, 200);
-      } else {
-        this.tabs[oldIndex].setAnimationDirection('exit-right');
-        this.tabs[oldIndex].setActive(false);
-        setTimeout(() => {
-          this.tabs[newIndex].setActive(true);
-          this.tabs[newIndex].setAnimationDirection('enter-left');
-        }, 200);
-      }
-
-      this.activeTabIndex = newIndex;
-      this.updateUnderline();
-      this.$refs.cdrTabsHeader.children[this.activeTabIndex].focus();
-    },
-
-    rightArrowNav: debounce(function handleRightArrow() {
-      const nextTab = this.getNextTab(this.activeTabIndex + 1);
-
-      if (nextTab !== -1) {
-        this.changeTab(nextTab);
-      }
-    }, 300, {
-      leading: true,
-      trailing: false
-    }),
-    leftArrowNav: debounce(function handleLeftArrow() {
-      const previousTab = this.getPreviousTab(this.activeTabIndex - 1);
-
-      if (previousTab !== -1) {
-        this.changeTab(previousTab);
-      }
-    }, 300, {
-      leading: true,
-      trailing: false
-    }),
-
-    calculateOverflow() {
-      let containerWidth = 0;
-
-      if (this.$refs.cdrTabsContainer) {
-        containerWidth = this.$refs.cdrTabsContainer.offsetWidth;
-      }
-
-      this.headerOverflow = this.headerWidth > containerWidth;
-
-      if (this.headerOverflow) {
-        // Get Scroll Position
-        const scrollX = this.$refs.cdrTabsHeader.parentElement.scrollLeft;
-        this.overflowLeft = scrollX > 1;
-        this.overflowRight = scrollX + 1 < this.headerWidth - containerWidth;
-      } else {
-        this.overflowLeft = false;
-        this.overflowRight = false;
-      }
-    },
-
-    updateUnderline() {
-      const elements = Array.from(this.$refs.cdrTabsHeader.children);
-
-      if (elements.length > 0) {
-        const activeTab = elements[this.activeTabIndex];
-        const activeRect = activeTab.getBoundingClientRect();
-        const parentRect = this.$refs.cdrTabsHeader.getBoundingClientRect();
-        const offset = activeRect.x - parentRect.x;
-        this.underlineOffsetX = offset - this.$refs.cdrTabsHeader.parentElement.scrollLeft;
-        this.underlineWidth = activeRect.width; // shrink/hide the underline if it scrolls outside the container
-
-        if (this.underlineOffsetX + this.underlineWidth >= parentRect.width) {
-          this.underlineWidth = Math.max(0, parentRect.width - this.underlineOffsetX);
-          this.underlineOffsetX = Math.min(this.underlineOffsetX, parentRect.width);
-        } else if (this.underlineOffsetX < 0) {
-          this.underlineWidth = Math.max(0, this.underlineWidth + this.underlineOffsetX);
-          this.underlineOffsetX = 0;
-        }
-      }
-    },
-
-    handleDownArrowNav() {
-      if (!this.animationInProgress) {
-        this.$el.lastElementChild.children[this.activeTabIndex].focus();
-      }
-    },
-
-    setFocusToActiveTabHeader() {
-      this.$refs.cdrTabsHeader.children[this.activeTabIndex].focus();
-    },
-
-    getHeaderWidth() {
-      let headerElements = [];
-
-      if (this.$refs.cdrTabsHeader) {
-        headerElements = Array.from(this.$refs.cdrTabsHeader.children);
-      }
-
-      let totalWidth = 0;
-      headerElements.forEach((element, i) => {
-        // account for margin-left on header elements
-        if (i > 0) {
-          totalWidth += this.size === 'small' ? Number(CdrSpaceHalfX) : Number(CdrSpaceOneX);
-        }
-
-        totalWidth += element.offsetWidth || 0;
-      });
-      return totalWidth;
-    },
-
-    hideScrollBar() {
-      const containerRef = this.$refs.cdrTabsContainer.style;
-      const slotRef = this.$refs.slotWrapper.style;
-      window.addEventListener('transitionend', () => {
-        containerRef.setProperty('overflow-x', 'unset');
-        slotRef.setProperty('overflow-y', 'unset');
-      }, {
-        once: true
-      });
-      containerRef.setProperty('overflow-x', 'hidden');
-      slotRef.setProperty('overflow-y', 'hidden');
-    },
-
-    getTabEl(tab) {
-      const h = this.$createElement;
-      return tab.disabled ? h("button", {
-        "class": clsx(this.style['cdr-tabs__header-item'], this.style['cdr-tabs__header-item--disabled']),
-        "attrs": {
-          "disabled": true
-        }
-      }, [tab.name]) : h("button", {
-        "attrs": {
-          "role": "tab",
-          "aria-selected": tab.active,
-          "aria-controls": tab.id,
-          "id": tab.ariaLabelledby,
-          "tabIndex": tab.active ? 0 : -1,
-          "js-name": tab.name
-        },
-        "key": tab.id,
-        "class": clsx(tab.active ? this.style['cdr-tabs__header-item-active'] : '', this.style['cdr-tabs__header-item']),
-        "on": {
-          "click": $event => {
-            $event.preventDefault();
-            return (e => this.handleClick(tab, e))($event);
-          }
-        }
-      }, [tab.name]);
-    }
-
-  },
-
-  render() {
-    const h = arguments[0];
-    return h("div", {
-      "class": clsx(this.style[this.baseClass], this.modifierClass, this.sizeClass),
-      "ref": "cdrTabsContainer",
-      "style": {
-        height: this.height
-      }
-    }, [h("div", {
-      "class": this.style['cdr-tabs__gradient-container'],
-      "on": {
-        "keyup": [$event => {
-          if (!("button" in $event) && this._k($event.keyCode, "right", 39, $event.key, ["Right", "ArrowRight"])) return null;
-          if ("button" in $event && $event.button !== 2) return null;
-          return this.rightArrowNav($event);
-        }, $event => {
-          if (!("button" in $event) && this._k($event.keyCode, "left", 37, $event.key, ["Left", "ArrowLeft"])) return null;
-          if ("button" in $event && $event.button !== 0) return null;
-          return this.leftArrowNav($event);
-        }],
-        "keydown": $event => {
-          if (!("button" in $event) && this._k($event.keyCode, "down", 40, $event.key, ["Down", "ArrowDown"])) return null;
-          $event.preventDefault();
-          return this.handleDownArrowNav($event);
-        }
-      }
-    }, [h("div", {
-      "class": clsx(this.style['cdr-tabs__gradient'], this.style['cdr-tabs__gradient--left'], this.overflowLeft ? this.style['cdr-tabs__gradient--active'] : ''),
-      "style": this.gradientLeftStyle
-    }), h("nav", {
-      "class": this.style['cdr-tabs__header-container']
-    }, [h("div", {
-      "class": this.style['cdr-tabs__header'],
-      "attrs": {
-        "role": "tablist"
-      },
-      "ref": "cdrTabsHeader"
-    }, [this.tabs.map(tab => this.getTabEl(tab))])]), h("div", {
-      "class": clsx(this.style['cdr-tabs__gradient'], this.style['cdr-tabs__gradient--right'], this.overflowRight ? this.style['cdr-tabs__gradient--active'] : ''),
-      "style": this.gradientRightStyle
-    }), h("div", {
-      "class": this.style['cdr-tabs__underline'],
-      "style": this.underlineStyle
-    })]), h("div", {
-      "class": this.style['cdr-tabs__content-container'],
-      "ref": "slotWrapper"
-    }, [this.$slots.default])]);
-  }
-
-};
-
-export default CdrTabs;
+script.render = render;
+script.__file = "src/components/tabs/CdrTabs.vue";