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

package/dist/lib/src/components/link/CdrLink.js

@@ -0,0 +1,71 @@
+import { defineComponent, computed, useCssModule, openBlock, createBlock, resolveDynamicComponent, normalizeClass, withCtx, renderSlot } from 'vue';
+import mapClasses from '../../utils/mapClasses.js';
+import { buildClass } from '../../utils/buildClass.js';
+import validateProp from '../../utils/propValidator.js';
+import _export_sfc from '../../../_virtual/plugin-vue_export-helper.js';
+
+const _sfc_main = defineComponent({
+  name: 'CdrLink',
+  props: {
+    tag: {
+      type: String,
+      default: 'a',
+    },
+    href: {
+      type: String,
+      default: '#',
+    },
+    inheritColor: {
+      type: Boolean,
+      default: false,
+    },
+    modifier: {
+      type: String,
+      default: '',
+      validator: (value) => validateProp(value, ['', 'standalone']),
+    },
+    /** @ignore */
+    target: String,
+    /** @ignore */
+    rel: String,
+  },
+  setup(props) {
+    const computedHref = computed(() => (props.tag === 'a' ? props.href : null));
+    const computedRel = computed(() => {
+      if (props.target === '_blank') {
+        return props.rel || 'noopener noreferrer';
+      }
+      return props.rel;
+    });
+    const baseClass = 'cdr-link';
+    const modifierClass = computed(() => props.modifier && buildClass(baseClass, props.modifier));
+    const inheritColorClass = computed(() => props.inheritColor && 'cdr-link--inherit-color');
+
+    return {
+      style: useCssModule(),
+      mapClasses,
+      computedHref,
+      computedRel,
+      baseClass,
+      modifierClass,
+      inheritColorClass,
+    };
+  },
+});
+
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return (openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), {
+    class: normalizeClass(_ctx.mapClasses(_ctx.style, _ctx.baseClass, _ctx.modifierClass, _ctx.inheritColorClass)),
+    target: _ctx.target,
+    rel: _ctx.computedRel,
+    href: _ctx.computedHref
+  }, {
+    default: withCtx(() => [
+      renderSlot(_ctx.$slots, "default")
+    ]),
+    _: 3 /* FORWARDED */
+  }, 8 /* PROPS */, ["class", "target", "rel", "href"]))
+}
+var CdrLink = /*#__PURE__*/_export_sfc(_sfc_main, [['render',_sfc_render]]);
+
+export { CdrLink as default };

package/dist/lib/src/components/list/CdrList.js

@@ -0,0 +1,46 @@
+import { defineComponent, computed, useCssModule, openBlock, createBlock, resolveDynamicComponent, normalizeClass, withCtx, renderSlot } from 'vue';
+import { buildClass } from '../../utils/buildClass.js';
+import validateProp from '../../utils/propValidator.js';
+import _export_sfc from '../../../_virtual/plugin-vue_export-helper.js';
+
+const _sfc_main = defineComponent({
+  name: 'CdrList',
+  props: {
+    /**
+     * Tag accepts a user defined element and expects either: 'ul' = Unordered List or 'ol' = Ordered List.
+     */
+    tag: {
+      type: String,
+      default: 'ul',
+      validator: (value) => validateProp(value, ['ul', 'ol']),
+    },
+    modifier: {
+      type: String,
+      default: '',
+      validator: (value) => validateProp(value, ['', 'ordered', 'unordered', 'compact', 'inline']),
+    },
+  },
+  setup(props) {
+    const baseClass = 'cdr-list';
+    const modifierClass = computed(() => props.modifier && buildClass(baseClass, props.modifier));
+    return {
+      style: useCssModule(),
+      baseClass,
+      modifierClass,
+    };
+  },
+});
+
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return (openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), {
+    class: normalizeClass([_ctx.style[_ctx.baseClass], _ctx.style[_ctx.modifierClass]])
+  }, {
+    default: withCtx(() => [
+      renderSlot(_ctx.$slots, "default")
+    ]),
+    _: 3 /* FORWARDED */
+  }, 8 /* PROPS */, ["class"]))
+}
+var CdrList = /*#__PURE__*/_export_sfc(_sfc_main, [['render',_sfc_render]]);
+
+export { CdrList as default };

package/dist/lib/src/components/modal/CdrModal.js

@@ -0,0 +1,383 @@
+import debounce from 'lodash/debounce';
+import tabbable from 'tabbable';
+import { defineComponent, ref, computed, watch, onMounted, onUnmounted, useCssModule, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, mergeProps, renderSlot, normalizeStyle, toDisplayString, createCommentVNode, createVNode, withCtx, nextTick } from 'vue';
+import { CdrBreakpointSm, CdrSpaceTwoX, CdrSpaceOneX } from '../../../node_modules/@rei/cdr-tokens/dist/js/cdr-tokens.esm.js';
+import onTransitionEnd from './onTransitionEnd.js';
+import CdrButton from '../button/CdrButton.js';
+import IconXLg from '../icon/comps/x-lg.js';
+import mapClasses from '../../utils/mapClasses.js';
+import _export_sfc from '../../../_virtual/plugin-vue_export-helper.js';
+
+const _sfc_main = defineComponent({
+  name: 'CdrModal',
+  components: {
+    CdrButton,
+    IconXLg,
+  },
+  props: {
+    opened: {
+      type: Boolean,
+      required: true,
+    },
+    label: {
+      type: String,
+      required: true,
+    },
+    showTitle: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    ariaDescribedby: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    role: {
+       type: String,
+       required: false,
+       default: 'dialog',
+     },
+    id: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    overlayClass: String,
+    wrapperClass: String,
+    contentClass: String,
+    animationDuration: {
+      type: Number,
+      default: 300,
+    },
+  },
+  setup(props, ctx) {
+    const baseClass = 'cdr-modal';
+
+
+    const reallyClosed = ref(!props.opened);
+
+  // REFS or LET?
+    let unsubscribe;
+    let lastActive;
+    const isOpening = ref(false);
+    const offset = ref(null);
+    const headerHeight = ref(0);
+    const totalHeight = ref(0);
+    const scrollHeight = ref(0);
+    const offsetHeight = ref(0);
+    const offsetWidth = ref(0);
+    const clientWidth = ref(0);
+    const fullscreen = ref(false);
+
+    const modalEl = ref(null);
+    const wrapperEl = ref(null);
+    const contentEl = ref(null);
+    const headerEl = ref(null);
+
+    const measureContent = () => {
+      nextTick(() => {
+        totalHeight.value = window.innerHeight;
+        fullscreen.value = window.innerWidth < CdrBreakpointSm; // wrap breakpoint in Number() here???
+        headerHeight.value = headerEl.value.offsetHeight;
+        scrollHeight.value = contentEl.value.scrollHeight;
+        offsetHeight.value = contentEl.value.offsetHeight;
+        offsetWidth.value = contentEl.value.offsetWidth;
+        clientWidth.value = contentEl.value.clientWidth;
+      });
+    };
+    const handleKeyDown = ({ key }) => {
+      switch (key) {
+        case 'Escape':
+        case 'Esc':
+          onClick();
+          break;
+      }
+    };
+    const handleFocus = (e) => {
+      const { documentElement } = document;
+      if (modalEl.value.contains(e.target) || !documentElement) return;
+
+      const tabbables = tabbable(documentElement);
+      const these = tabbable(modalEl.value);
+      const nextIx = tabbables.indexOf(e.target);
+      const firstModalIx = tabbables.indexOf(these[0]);
+      const nextRef = nextIx < firstModalIx ? these[these.length - 1] : these[0];
+      if (nextRef) nextRef.focus();
+
+  // ...uhhh???? what?
+      // documentElement.scrollTop = this.scrollTop;
+      // documentElement.scrollLeft = this.scrollLeft;
+    };
+
+    const handleResize = debounce(() => {
+      measureContent();
+    }, 300);
+
+    const handleOpened = () => {
+      const { activeElement } = document;
+      addNoScroll();
+      isOpening.value = true;
+      reallyClosed.value = false;
+      lastActive = activeElement;
+
+      nextTick(() => {
+        if (modalEl.value) modalEl.value.focus(); // wrapped in if so testing error isn't thrown
+        measureContent();
+        addHandlers();
+
+        setTimeout(() => {
+          // for some reason Safari scrolls the wrapper down a bit?
+          // doesn't work without setTimeout for some unknown reason
+          if (wrapperEl.value) wrapperEl.value.scrollTop = 0;
+
+          // there is a race condition for measuring overflow when modal defaults to open,
+          // this seems to cover that
+          measureContent();
+        });
+      });
+    };
+
+    const handleClosed = () => {
+      const { documentElement } = document;
+      document.removeEventListener('keydown', handleKeyDown);
+      document.removeEventListener('focusin', handleFocus, true);
+      isOpening.value = false;
+
+      unsubscribe = onTransitionEnd(
+        wrapperEl.value,
+        () => {
+          if (isOpening.value) return;
+          unsubscribe();
+          removeNoScroll();
+          unsubscribe = null;
+          reallyClosed.value = true;
+
+          // handle scroll-behavior: smooth
+          if (documentElement) documentElement.style.scrollBehavior = 'auto';
+          // restore previous scroll position
+          window.scrollTo(offset.value.x, offset.value.y);
+          if (documentElement) documentElement.style.scrollBehavior = '';
+
+          if (lastActive) lastActive.focus();
+        },
+        props.animationDuration + 16,
+      );
+    };
+
+    const addNoScroll = () => {
+      const { documentElement, body } = document;
+      offset.value = {
+        x: window.scrollX
+          || (documentElement || {}).scrollLeft
+          || (body || {}).scrollLeft
+          || 0,
+        y: window.scrollY
+          || (documentElement || {}).scrollTop
+          || (body || {}).scrollTop
+          || 0,
+      };
+
+      if (documentElement) {
+        documentElement.classList.add('cdr-modal__noscroll');
+        // keep current scroll position manually
+        documentElement.style.top = `-${offset.value.y}px`;
+        documentElement.style.left = `-${offset.value.x}px`;
+      }
+
+      if (body) {
+        body.classList.add('cdr-modal__noscroll');
+      }
+    };
+
+    const removeNoScroll = () => {
+      const { documentElement, body } = document;
+
+      if (body) {
+        body.classList.remove('cdr-modal__noscroll');
+      }
+
+      if (documentElement) {
+        documentElement.classList.remove('cdr-modal__noscroll');
+        documentElement.style.top = '';
+        documentElement.style.left = '';
+      }
+    };
+
+    const addHandlers = () => {
+      document.addEventListener('focusin', handleFocus, true);
+      document.addEventListener('keydown', handleKeyDown);
+    };
+
+    const onClick = (e) => {
+      ctx.emit('closed', e);
+    };
+
+    const dialogAttrs = computed(() => {
+      // TODO: remove aria-desc and id from props? just ingest as attrs?
+      return {
+        ...ctx.attrs,
+        'aria-describedby': props.ariaDescribedby,
+        'aria-modal': 'true',
+        id: props.id,
+      };
+    });
+    const verticalSpace = computed(() => {
+      // contentWrap vertical padding
+      const fullscreenSpace = Number(CdrSpaceTwoX);
+      const windowedSpace = Number(CdrSpaceTwoX) + Number(CdrSpaceOneX);
+
+      return fullscreen.value
+        ? fullscreenSpace
+        : windowedSpace + fullscreenSpace;
+      // fullscreen, here, would account for outerWrap padding, which is the same CdrSpaceTwoX
+    });
+    const scrollMaxHeight = computed(() => {
+      return totalHeight.value
+        - headerHeight.value
+        - verticalSpace.value;
+    });
+
+    const scrollPadding = computed(() => {
+      const isScrolling = scrollHeight.value > offsetHeight.value;
+      const hasScrollbar = offsetWidth.value - clientWidth.value > 0;
+      if (isScrolling && hasScrollbar) {
+        return 4;
+      } else if (isScrolling) {
+        return 12;
+      } else {
+        return 0
+      }
+    });
+
+    watch(() => props.opened, (newValue, oldValue) => {
+      if (!!newValue === !!oldValue) return;
+      newValue ? handleOpened() : handleClosed();
+    });
+
+    onMounted(() => {
+      if (props.opened) {
+        handleOpened();
+      }
+      window.addEventListener('resize', handleResize);
+    });
+
+    onUnmounted(() => {
+      window.removeEventListener('resize', handleResize);
+    });
+
+    return {
+      style: useCssModule(),
+      baseClass,
+      mapClasses,
+      dialogAttrs,
+      verticalSpace,
+      scrollMaxHeight,
+      reallyClosed,
+      modalEl,
+      wrapperEl,
+      contentEl,
+      headerEl,
+      onClick,
+      handleClosed,
+      measureContent,
+      removeNoScroll,
+      scrollPadding,
+      handleFocus,
+    };
+  },
+});
+
+const _hoisted_1 = ["tabIndex"];
+const _hoisted_2 = ["role", "aria-modal", "aria-label"];
+const _hoisted_3 = ["tabIndex"];
+
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_icon_x_lg = resolveComponent("icon-x-lg");
+  const _component_cdr_button = resolveComponent("cdr-button");
+
+  return (openBlock(), createElementBlock("div", {
+    class: normalizeClass(_ctx.mapClasses(_ctx.style, _ctx.baseClass, !_ctx.opened && 'cdr-modal--closed')),
+    ref: "wrapperEl"
+  }, [
+    createElementVNode("div", {
+      class: normalizeClass([_ctx.style['cdr-modal__outerWrap'], _ctx.wrapperClass])
+    }, [
+      createElementVNode("div", {
+        "aria-hidden": "true",
+        onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.onClick && _ctx.onClick(...args))),
+        class: normalizeClass([_ctx.style['cdr-modal__overlay'], _ctx.overlayClass])
+      }, null, 2 /* CLASS */),
+      createElementVNode("div", {
+        tabIndex: _ctx.opened ? '0' : undefined
+      }, null, 8 /* PROPS */, _hoisted_1),
+      createElementVNode("div", mergeProps({
+        ref: "modalEl",
+        class: _ctx.mapClasses(_ctx.style, 'cdr-modal__contentWrap', 'cdr-modal__dialog'),
+        tabIndex: "-1",
+        role: _ctx.role,
+        "aria-modal": !!_ctx.opened,
+        "aria-label": _ctx.label
+      }, _ctx.dialogAttrs), [
+        renderSlot(_ctx.$slots, "modal", {}, () => [
+          createElementVNode("div", {
+            class: normalizeClass([_ctx.style['cdr-modal__innerWrap'], _ctx.contentClass]),
+            style: normalizeStyle(_ctx.reallyClosed ? {display: 'none'} : undefined)
+          }, [
+            createElementVNode("section", null, [
+              createElementVNode("div", {
+                class: normalizeClass(_ctx.style['cdr-modal__content'])
+              }, [
+                createElementVNode("div", {
+                  class: normalizeClass(_ctx.style['cdr-modal__header']),
+                  ref: "headerEl"
+                }, [
+                  createElementVNode("div", {
+                    class: normalizeClass(_ctx.style['cdr-modal__title'])
+                  }, [
+                    (_ctx.showTitle)
+                      ? renderSlot(_ctx.$slots, "title", { key: 0 }, () => [
+                          createElementVNode("h1", null, toDisplayString(_ctx.label), 1 /* TEXT */)
+                        ])
+                      : createCommentVNode("v-if", true)
+                  ], 2 /* CLASS */),
+                  createVNode(_component_cdr_button, {
+                    class: normalizeClass(_ctx.style['cdr-modal__close-button']),
+                    "icon-only": "",
+                    "with-background": true,
+                    onClick: _ctx.onClick,
+                    "aria-label": "Close"
+                  }, {
+                    default: withCtx(() => [
+                      createVNode(_component_icon_x_lg, { "inherit-color": "" })
+                    ]),
+                    _: 1 /* STABLE */
+                  }, 8 /* PROPS */, ["class", "onClick"])
+                ], 2 /* CLASS */),
+                createElementVNode("div", {
+                  role: "document",
+                  class: normalizeClass(_ctx.style['cdr-modal__text'])
+                }, [
+                  createElementVNode("div", {
+                    class: normalizeClass(_ctx.style['cdr-modal__text-content']),
+                    style: normalizeStyle({ maxHeight: `${_ctx.scrollMaxHeight}px`, paddingRight: `${_ctx.scrollPadding}px`}),
+                    ref: "contentEl",
+                    tabindex: "0"
+                  }, [
+                    renderSlot(_ctx.$slots, "default")
+                  ], 6 /* CLASS, STYLE */)
+                ], 2 /* CLASS */)
+              ], 2 /* CLASS */)
+            ])
+          ], 6 /* CLASS, STYLE */)
+        ])
+      ], 16 /* FULL_PROPS */, _hoisted_2),
+      createElementVNode("div", {
+        tabIndex: _ctx.opened ? '0' : undefined
+      }, null, 8 /* PROPS */, _hoisted_3)
+    ], 2 /* CLASS */)
+  ], 2 /* CLASS */))
+}
+var CdrModal = /*#__PURE__*/_export_sfc(_sfc_main, [['render',_sfc_render]]);
+
+export { CdrModal as default };

package/dist/lib/src/components/modal/{onTransitionEnd.mjs → onTransitionEnd.js}

@@ -1,42 +1,44 @@
 /* eslint-env browser */
-const transitions = {
+var transitions = {
   transition: 'transitionend',
   WebkitTransition: 'webkitTransitionEnd',
   MozTransition: 'transitionend',
   OTransition: 'oTransitionEnd otransitionend'
-};
-let transitionEvent;
+}; // Also has to run on transitioncancel? if modal removed before this runs...
+
+var transitionEvent;
 
 if (typeof document !== 'undefined') {
-  const {
-    style
-  } = document.createElement('div');
-  const keys = Object.keys(transitions);
+  var _document$createEleme = document.createElement('div'),
+      style = _document$createEleme.style;
+
+  var keys = Object.keys(transitions);
 
-  for (let i = 0, key = keys[i]; i < keys.length; i += 1, key = keys[i]) {
+  for (var i = 0, key = keys[i]; i < keys.length; i += 1, key = keys[i]) {
     if (key in style) {
       transitionEvent = transitions[key];
+      console.log(transitionEvent, key);
       break;
     }
   }
 }
 
-var onTransitionEnd = ((element, callback, timeout) => {
+var onTransitionEnd = (function (element, callback, timeout) {
   element.addEventListener(transitionEvent, callback);
-  let timeoutId;
+  var timeoutId;
 
   if (timeout) {
     // console.log('onTransitionEnd timeout', timeout);
-    timeoutId = setTimeout(() => {
+    timeoutId = setTimeout(function () {
       element.removeEventListener(transitionEvent, callback);
       callback();
     }, timeout);
   }
 
-  return () => {
+  return function () {
     clearTimeout(timeoutId);
     element.removeEventListener(transitionEvent, callback);
   };
 });
 
-export default onTransitionEnd;
+export { onTransitionEnd as default };