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

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

@@ -1,10 +1,361 @@
-import script from './CdrTabs.vue_vue_type_script_lang.js';
-export { default } from './CdrTabs.vue_vue_type_script_lang.js';
-import { render } from './CdrTabs.vue_vue_type_template_id_0b62a2ae_lang.js';
-import style0 from './styles/CdrTabs.module.scss_vue_type_style_index_0_src_id_0b62a2ae_module_true_lang.css.js';
+import { buildClass } from '../../utils/buildClass.js';
+import { defineComponent, ref, provide, computed, onMounted, nextTick, useCssModule, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, withKeys, withModifiers, Fragment, renderList, toDisplayString, renderSlot } from 'vue';
+import debounce from 'lodash/debounce';
+import mapClasses from '../../utils/mapClasses.js';
+import { CdrColorBackgroundPrimary, CdrSpaceHalfX, CdrSpaceOneX } from '../../../node_modules/@rei/cdr-tokens/dist/js/cdr-tokens.esm.js';
+import _export_sfc from '../../../_virtual/plugin-vue_export-helper.js';
 
-const cssModules = script.__cssModules = {};
-cssModules["$style"] = style0;
+const _sfc_main = defineComponent({
+  name: 'CdrTabs',
+  props: {
+    height: {
+      type: String,
+      default: '240px',
+    },
+    activeTab: {
+      type: Number,
+      default: 0,
+    },
+    modifier: String,
+    size: String,
+    backgroundColor: {
+      type: String,
+      default: CdrColorBackgroundPrimary,
+    },
+  },
+  setup(props, ctx) {
 
-script.render = render;
-script.__file = "src/components/tabs/CdrTabs.vue";
+    const tabs = ref([]);
+    provide('tabs', tabs);
+
+    const underlineOffsetX = ref(0);
+    const underlineWidth = ref(0);
+    // const underlineScrollX = ref(0); // ????
+    const activeTabIndex = ref(0);
+    const headerWidth = ref(0);
+    const headerOverflow = ref(false);
+    const overflowLeft = ref(false);
+    const overflowRight = ref(false);
+
+
+    const containerEl = ref(null);
+    const slotWrapperEl = ref(null);
+    const cdrTabsHeaderEl = ref(null);
+
+    const baseClass = 'cdr-tabs';
+    const modifierClass = computed(() => buildClass('cdr-tabs', props.modifier));
+    const sizeClass = computed(() => props.size && buildClass('cdr-tabs', props.size));
+
+    const underlineStyle = computed(() => {
+      return {
+        transform: `translateX(${underlineOffsetX.value}px)`,
+        width: `${underlineWidth.value}px`,
+      };
+    });
+    const gradientLeftStyle = computed(() => {
+      const gradient = `linear-gradient(to left, rgba(255, 255, 255, 0), ${props.backgroundColor})`;
+      return {
+        background: gradient,
+      };
+    });
+    const gradientRightStyle = computed(() => {
+      const gradient = `linear-gradient(to right, rgba(255, 255, 255, 0), ${props.backgroundColor})`;
+      return {
+        background: gradient,
+      };
+    });
+
+// TODO: i feel it in my heart that these 2 function can be 1-liners
+    const getNextTab = (startIndex) => {
+      for (let i = startIndex; i < tabs.value.length; i += 1) {
+        if (!tabs.value[i].disabled) {
+          return i;
+        }
+      }
+
+      if (startIndex !== 0) {
+        for (let k = 0; k < startIndex; k += 1) {
+          if (!tabs.value[k].disabled) {
+            return k;
+          }
+        }
+      }
+
+      return -1;
+    };
+
+    const getPreviousTab = (startIndex) => {
+      for (let i = startIndex; i > -1; i -= 1) {
+        if (!tabs.value[i].disabled) {
+          return i;
+        }
+      }
+
+      if (startIndex !== tabs.value.length - 1) {
+        for (let k = tabs.value.length - 1; k > startIndex; k -= 1) {
+          if (!tabs.value[k].disabled) {
+            return k;
+          }
+        }
+      }
+
+      return -1;
+    };
+
+    const handleClick = debounce(function handleClickCallback(tabClicked) {
+      // TODO: render index in buttons to bind this event, no need to find index????
+      const newIndex = tabs.value.findIndex((tab) => tabClicked.name === tab.name);
+      changeTab(newIndex);
+    }, 500, { leading: true, trailing: false });
+
+    const changeTab = (newIndex) => {
+      const oldIndex = activeTabIndex.value;
+
+      hideScrollBar();
+      if (newIndex > oldIndex) {
+        tabs.value[oldIndex].setAnimationDirection('exit-left');
+        tabs.value[oldIndex].setActive(false);
+        setTimeout(() => {
+          tabs.value[newIndex].setActive(true);
+          tabs.value[newIndex].setAnimationDirection('enter-right');
+        }, 200);
+      } else {
+        tabs.value[oldIndex].setAnimationDirection('exit-right');
+        tabs.value[oldIndex].setActive(false);
+        setTimeout(() => {
+          tabs.value[newIndex].setActive(true);
+          tabs.value[newIndex].setAnimationDirection('enter-left');
+        }, 200);
+      }
+      activeTabIndex.value = newIndex;
+      updateUnderline();
+      cdrTabsHeaderEl.value.children[activeTabIndex.value].focus();
+    };
+    const rightArrowNav = debounce(function handleRightArrow() {
+      const nextTab = getNextTab(activeTabIndex.value + 1);
+      if (nextTab !== -1) {
+        changeTab(nextTab);
+      }
+    }, 300, { leading: true, trailing: false });
+
+    const leftArrowNav = debounce(function handleLeftArrow() {
+      const previousTab = getPreviousTab(activeTabIndex.value - 1);
+      if (previousTab !== -1) {
+        changeTab(previousTab);
+      }
+    }, 300, { leading: true, trailing: false });
+
+    const calculateOverflow = () => {
+      let containerWidth = 0;
+      if (containerEl.value) {
+        containerWidth = containerEl.value.offsetWidth;
+      }
+      headerOverflow.value = headerWidth.value > containerWidth;
+      if (headerOverflow.value) {
+        // Get Scroll Position
+        const scrollX = cdrTabsHeaderEl.value.parentElement.scrollLeft;
+        overflowLeft.value = scrollX > 1;
+        overflowRight.value = (scrollX + 1) < (headerWidth.value - containerWidth);
+      } else {
+        overflowLeft.value = false;
+        overflowRight.value = false;
+      }
+    };
+    const updateUnderline = () => {
+      const elements = Array.from(cdrTabsHeaderEl.value.children); // TODO: cache this? probably?
+      if (elements.length > 0) {
+        const activeTab = elements[activeTabIndex.value];
+        const activeRect = activeTab.getBoundingClientRect();
+        const parentRect = cdrTabsHeaderEl.value.getBoundingClientRect();
+        const offset = activeRect.x - parentRect.x;
+
+        underlineOffsetX.value = offset
+          - cdrTabsHeaderEl.value.parentElement.scrollLeft;
+        underlineWidth.value = activeRect.width;
+
+        // shrink/hide the underline if it scrolls outside the container
+        if (underlineOffsetX.value + underlineWidth.value >= parentRect.width) {
+          underlineWidth.value = Math.max(0, parentRect.width - underlineOffsetX.value);
+          underlineOffsetX.value = Math.min(underlineOffsetX.value, parentRect.width);
+        } else if (underlineOffsetX.value < 0) {
+          underlineWidth.value = Math.max(0, underlineWidth.value + underlineOffsetX.value);
+          underlineOffsetX.value = 0;
+        }
+      }
+    };
+    // TODO: what?
+    const handleDownArrowNav = () => {
+    };
+    // TODO: listen for events emitted from tabs???
+    const setFocusToActiveTabHeader = () => {
+      cdrTabsHeaderEl.value.children[activeTabIndex.value].focus();
+    };
+    const getHeaderWidth = () => {
+      let headerElements = [];
+      if (cdrTabsHeaderEl.value) {
+        headerElements = Array.from(cdrTabsHeaderEl.value.children);
+      }
+      let totalWidth = 0;
+      headerElements.forEach((element, i) => {
+        // account for margin-left on header elements
+        if (i > 0) {
+          totalWidth += props.size === 'small' ? Number(CdrSpaceHalfX) : Number(CdrSpaceOneX);
+        }
+        totalWidth += element.offsetWidth || 0;
+      });
+      return totalWidth;
+    };
+    const hideScrollBar = () => {
+      const containerRef = containerEl.value.style;
+      const slotRef = slotWrapperEl.value.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');
+    };
+
+    onMounted(() => {
+
+      activeTabIndex.value = getNextTab(props.activeTab);
+
+      if (tabs.value[activeTabIndex.value] && tabs.value[activeTabIndex.value].setActive) {
+        tabs.value[activeTabIndex.value].setActive(true);
+      }
+
+      nextTick(() => {
+        headerWidth.value = getHeaderWidth();
+        calculateOverflow();
+        setTimeout(() => {
+          updateUnderline();
+        }, 500);
+      });
+      // Check for header overflow on window resize for gradient behavior.
+      window.addEventListener('resize', debounce(() => {
+        headerWidth.value = getHeaderWidth();
+        calculateOverflow();
+        updateUnderline();
+      }, 500));
+      // Check for header overflow on widow resize for gradient behavior.
+      cdrTabsHeaderEl.value.parentElement.addEventListener('scroll', debounce(() => {
+        calculateOverflow();
+        updateUnderline();
+      }, 50));
+    });
+
+    return {
+      style: useCssModule(),
+      mapClasses,
+      baseClass,
+      modifierClass,
+      sizeClass,
+      tabs,
+
+      // containerHeight, // ????
+      overflowLeft,
+      overflowRight,
+
+      rightArrowNav,
+      leftArrowNav,
+      handleDownArrowNav,
+      handleClick,
+
+      cdrTabsHeaderEl,
+      slotWrapperEl,
+      containerEl,
+
+      underlineStyle,
+      gradientLeftStyle,
+      gradientRightStyle,
+
+
+      getHeaderWidth,
+      calculateOverflow,
+      updateUnderline,
+      hideScrollBar,
+      changeTab,
+      getNextTab,
+      getPreviousTab,
+
+      activeTabIndex,
+      setFocusToActiveTabHeader,
+      headerOverflow,
+    };
+  },
+});
+
+const _hoisted_1 = ["aria-selected", "aria-controls", "id", "tabIndex", "onClick"];
+
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return (openBlock(), createElementBlock("div", {
+    class: normalizeClass(_ctx.mapClasses(_ctx.style, _ctx.baseClass, _ctx.modifierClass, _ctx.sizeClass)),
+    ref: "containerEl",
+    style: normalizeStyle({ height: _ctx.height })
+  }, [
+    createElementVNode("div", {
+      class: normalizeClass(_ctx.style['cdr-tabs__gradient-container']),
+      onKeyup: [
+        _cache[0] || (_cache[0] = withKeys((...args) => (_ctx.rightArrowNav && _ctx.rightArrowNav(...args)), ["right"])),
+        _cache[1] || (_cache[1] = withKeys((...args) => (_ctx.leftArrowNav && _ctx.leftArrowNav(...args)), ["left"]))
+      ],
+      onKeydown: _cache[2] || (_cache[2] = withKeys(withModifiers((...args) => (_ctx.handleDownArrowNav && _ctx.handleDownArrowNav(...args)), ["prevent"]), ["down"]))
+    }, [
+      createElementVNode("div", {
+        class: normalizeClass(_ctx.mapClasses(_ctx.style,
+        'cdr-tabs__gradient',
+        'cdr-tabs__gradient--left',
+          _ctx.overflowLeft ? 'cdr-tabs__gradient--active' : ''
+        )),
+        style: normalizeStyle(_ctx.gradientLeftStyle)
+      }, null, 6 /* CLASS, STYLE */),
+      createElementVNode("nav", {
+        class: normalizeClass(_ctx.style['cdr-tabs__header-container'])
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass(_ctx.style['cdr-tabs__header']),
+          role: "tablist",
+          ref: "cdrTabsHeaderEl"
+        }, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.tabs, (tab, i) => {
+            return (openBlock(), createElementBlock("button", {
+              role: "tab",
+              "aria-selected": tab.disabled ? '' : _ctx.activeTabIndex === i,
+              "aria-controls": tab.disabled ? '' : tab.id,
+              id: tab.disabled ? '' : tab.ariaLabelledby,
+              key: tab.id,
+              class: normalizeClass(_ctx.mapClasses(_ctx.style,
+              (_ctx.activeTabIndex === i && !tab.disabled) ? 'cdr-tabs__header-item-active' : '',
+              'cdr-tabs__header-item',
+              tab.disabled ? 'cdr-tabs__header-item--disabled' : '',
+            )),
+              tabIndex: (_ctx.activeTabIndex === i && !tab.disabled) ? 0 : -1,
+              onClick: withModifiers((e) => tab.disabled ? null : _ctx.handleClick(tab, e), ["prevent"])
+            }, toDisplayString(tab.name), 11 /* TEXT, CLASS, PROPS */, _hoisted_1))
+          }), 128 /* KEYED_FRAGMENT */))
+        ], 2 /* CLASS */)
+      ], 2 /* CLASS */),
+      createElementVNode("div", {
+        class: normalizeClass(_ctx.mapClasses(_ctx.style,
+        'cdr-tabs__gradient',
+        'cdr-tabs__gradient--right',
+        _ctx.overflowRight ? 'cdr-tabs__gradient--active' : '',
+      )),
+        style: normalizeStyle(_ctx.gradientRightStyle)
+      }, null, 6 /* CLASS, STYLE */),
+      createElementVNode("div", {
+        class: normalizeClass(_ctx.style['cdr-tabs__underline']),
+        style: normalizeStyle(_ctx.underlineStyle)
+      }, null, 6 /* CLASS, STYLE */)
+    ], 34 /* CLASS, HYDRATE_EVENTS */),
+    createElementVNode("div", {
+      class: normalizeClass(_ctx.style['cdr-tabs__content-container']),
+      ref: "slotWrapperEl"
+    }, [
+      renderSlot(_ctx.$slots, "default")
+    ], 2 /* CLASS */)
+  ], 6 /* CLASS, STYLE */))
+}
+var CdrTabs = /*#__PURE__*/_export_sfc(_sfc_main, [['render',_sfc_render]]);
+
+export { CdrTabs as default };

package/dist/lib/src/components/text/CdrText.js

@@ -1,10 +1,31 @@
-import script from './CdrText.vue_vue_type_script_lang.js';
-export { default } from './CdrText.vue_vue_type_script_lang.js';
-import { render } from './CdrText.vue_vue_type_template_id_78d76fe8_lang.js';
-import style0 from './styles/CdrText.module.scss_vue_type_style_index_0_src_id_78d76fe8_module_true_lang.css.js';
+import { defineComponent, useCssModule, openBlock, createBlock, resolveDynamicComponent, normalizeClass, withCtx, renderSlot } from 'vue';
+import _export_sfc from '../../../_virtual/plugin-vue_export-helper.js';
 
-const cssModules = script.__cssModules = {};
-cssModules["$style"] = style0;
+const _sfc_main = defineComponent({
+  name: 'CdrText',
+  props: {
+    tag: {
+      type: String,
+      default: 'p',
+    },
+  },
+  setup() {
+    return {
+      style: useCssModule(),
+    }
+  }
+});
 
-script.render = render;
-script.__file = "src/components/text/CdrText.vue";
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return (openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), {
+    class: normalizeClass(_ctx.style['cdr-text'])
+  }, {
+    default: withCtx(() => [
+      renderSlot(_ctx.$slots, "default")
+    ]),
+    _: 3 /* FORWARDED */
+  }, 8 /* PROPS */, ["class"]))
+}
+var CdrText = /*#__PURE__*/_export_sfc(_sfc_main, [['render',_sfc_render]]);
+
+export { CdrText as default };

package/dist/lib/src/components/toast/CdrToast.js

@@ -1,9 +1,160 @@
-import script from './CdrToast.vue_vue_type_script_setup_true_lang.js';
-export { default } from './CdrToast.vue_vue_type_script_setup_true_lang.js';
-import style0 from './styles/CdrToast.module.scss_vue_type_style_index_0_src_id_7e02aa8e_module_true_lang.css.js';
+import { useSlots, useCssModule, ref, computed, watch, onUpdated, openBlock, createBlock, Transition, unref, withCtx, createElementBlock, normalizeClass, createElementVNode, renderSlot, createCommentVNode, createVNode } from 'vue';
+import validateProp from '../../utils/propValidator.js';
+import { buildClass } from '../../utils/buildClass.js';
+import IconXSm from '../icon/comps/x-sm.js';
+import CdrButton from '../button/CdrButton.js';
 
-const cssModules = script.__cssModules = {};
-cssModules["$style"] = style0;
+const _sfc_main = {
+  props: {
+  type: {
+    type: String,
+    validator: (value) => validateProp(
+      value,
+      ['info', 'warning', 'success', 'error', 'default'],
+    ),
+    default: 'default',
+  },
+  open: {
+    type: Boolean,
+    default: false,
+  },
+  autoDismiss: {
+    type: Boolean,
+    default: true,
+  },
+  dismissDelay: {
+    type: Number,
+    default: 5000,
+  },
+},
+  emits: ['open', 'closed'],
+  setup(__props, { emit }) {
 
+const props = __props;
 
-script.__file = "src/components/toast/CdrToast.vue";
+const slots = useSlots();
+
+
+
+const baseClass = 'cdr-toast';
+const style = useCssModule();
+const hasIconLeft = slots['icon-left'];
+const opened = ref(null);
+const toastEl = ref(null);
+let timeout;
+let toastElement;
+
+const typeClass = computed(() => props.type && buildClass(baseClass, props.type));
+
+const openToast = (e) => {
+  if (timeout) {
+    clearTimeout(timeout);
+  } else {
+    emit('open', e);
+  }
+  opened.value = true;
+  if (props.autoDismiss && !e) {
+    closeToastWithDelay();
+  }
+};
+
+const closeToast = (e) => {
+  removeHandlers();
+  opened.value = false;
+  emit('closed', e);
+};
+
+const closeToastWithDelay = (e) => {
+  timeout = setTimeout(() => {
+    removeHandlers();
+    opened.value = false;
+    emit('closed', e);
+  }, props.dismissDelay);
+};
+
+const addHandlers = () => {
+  toastElement = toastEl.value;
+  if (toastElement) {
+    toastElement.addEventListener('mouseover', openToast);
+    toastElement.addEventListener('mouseleave', closeToastWithDelay);
+  }
+};
+
+const removeHandlers = () => {
+  if (toastElement) {
+    toastElement.removeEventListener('mouseover', openToast);
+    toastElement.removeEventListener('mouseleave', closeToastWithDelay);
+  }
+};
+
+watch(() => props.open, () => {
+  if (props.open) openToast();
+});
+
+onUpdated(() => {
+  if (props.autoDismiss) addHandlers();
+});
+
+return (_ctx, _cache) => {
+  return (openBlock(), createBlock(Transition, {
+    "enter-from-class": unref(style)['cdr-toast__transition--toast-enter-from'],
+    "enter-active-class": unref(style)['cdr-toast__transition--toast-enter-active'],
+    "leave-to-class": unref(style)['cdr-toast__transition--toast-leave-to'],
+    "leave-active-class": unref(style)['cdr-toast__transition--toast-leave-active']
+  }, {
+    default: withCtx(() => [
+      (opened.value)
+        ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: normalizeClass([unref(style)[baseClass], unref(style)[unref(typeClass)]]),
+            role: "status",
+            ref: (_value, _refs) => {
+              _refs['toastEl'] = _value;
+              toastEl.value = _value;
+            }
+          }, [
+            createElementVNode("div", {
+              class: normalizeClass([unref(style)['cdr-toast__main']])
+            }, [
+              (unref(hasIconLeft))
+                ? (openBlock(), createElementBlock("div", {
+                    key: 0,
+                    class: normalizeClass([unref(style)['cdr-toast__icon-left']])
+                  }, [
+                    renderSlot(_ctx.$slots, "icon-left")
+                  ], 2 /* CLASS */))
+                : createCommentVNode("v-if", true),
+              createElementVNode("span", {
+                class: normalizeClass([unref(style)['cdr-toast__message']])
+              }, [
+                renderSlot(_ctx.$slots, "default")
+              ], 2 /* CLASS */),
+              createVNode(unref(CdrButton), {
+                class: normalizeClass([unref(style)['cdr-toast__close-button']]),
+                "icon-only": "",
+                onClick: closeToast,
+                "aria-label": "Close",
+                size: "small"
+              }, {
+                default: withCtx(() => [
+                  createVNode(unref(IconXSm), {
+                    slot: "icon",
+                    "inherit-color": ""
+                  })
+                ]),
+                _: 1 /* STABLE */
+              }, 8 /* PROPS */, ["class"])
+            ], 2 /* CLASS */)
+          ], 2 /* CLASS */))
+        : createCommentVNode("v-if", true)
+    ]),
+    _: 3 /* FORWARDED */
+  }, 8 /* PROPS */, ["enter-from-class", "enter-active-class", "leave-to-class", "leave-active-class"]))
+}
+}
+
+};
+
+var _sfc_main$1 = _sfc_main;
+
+export { _sfc_main$1 as default };