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

package/dist/lib/src/components/labelWrapper/CdrLabelWrapper.vue_vue_type_script_lang.js

@@ -0,0 +1,41 @@
+import { defineComponent, computed, useCssModule } from 'vue';
+import { buildClass } from '../../utils/buildClass.js';
+import backgroundProps from '../../props/background.js';
+import mapClasses from '../../utils/mapClasses.js';
+
+var script = defineComponent({
+  name: 'CdrLabelWrapper',
+  props: {
+    labelClass: String,
+    contentClass: String,
+    background: backgroundProps,
+    disabled: Boolean,
+    modifier: String,
+    size: String
+  },
+
+  setup(props) {
+    var baseClass = 'cdr-label-wrapper';
+    var modifierClass = computed(function () {
+      return buildClass(baseClass, props.modifier);
+    });
+    var sizeClass = computed(function () {
+      return props.size && buildClass(baseClass, props.size);
+    });
+    var disabledClass = computed(function () {
+      return props.disabled && buildClass(baseClass, 'disabled');
+    }); // TODO: this works right?
+
+    return {
+      style: useCssModule(),
+      mapClasses,
+      baseClass,
+      modifierClass,
+      sizeClass,
+      disabledClass
+    };
+  }
+
+});
+
+export { script as default };

package/dist/lib/src/components/labelWrapper/CdrLabelWrapper.vue_vue_type_template_id_1b3bfeb0_lang.js

@@ -0,0 +1,26 @@
+import _concatInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/concat';
+import { openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot } from 'vue';
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _context;
+
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(_ctx.style['cdr-label-wrapper__container'])
+  }, [createElementVNode("label", {
+    class: normalizeClass(_concatInstanceProperty(_context = _ctx.mapClasses(_ctx.style, 'cdr-label-wrapper', "cdr-label-wrapper--".concat(_ctx.background), _ctx.disabledClass, _ctx.modifierClass, _ctx.sizeClass)).call(_context, " ".concat(_ctx.labelClass || '')))
+  }, [renderSlot(_ctx.$slots, "input"), createElementVNode("span", {
+    class: normalizeClass(_ctx.style['cdr-label-wrapper__figure'])
+  }, null, 2
+  /* CLASS */
+  ), createElementVNode("div", {
+    class: normalizeClass(_ctx.mapClasses(_ctx.style, 'cdr-label-wrapper__content', _ctx.contentClass))
+  }, [renderSlot(_ctx.$slots, "default")], 2
+  /* CLASS */
+  )], 2
+  /* CLASS */
+  )], 2
+  /* CLASS */
+  );
+}
+
+export { render };

package/dist/lib/src/components/labelWrapper/styles/CdrLabelWrapper.module.scss_vue_type_style_index_0_src_id_1b3bfeb0_module_true_lang.css.js

@@ -0,0 +1,27 @@
+var style0 = {
+  "cdr-label-wrapper": "cdr-label-wrapper_13-0-0-alpha-1",
+  "cdr-label-wrapper__container": "cdr-label-wrapper__container_13-0-0-alpha-1",
+  "cdr-label-wrapper--primary": "cdr-label-wrapper--primary_13-0-0-alpha-1",
+  "cdr-label-wrapper--secondary": "cdr-label-wrapper--secondary_13-0-0-alpha-1",
+  "cdr-label-wrapper--disabled": "cdr-label-wrapper--disabled_13-0-0-alpha-1",
+  "cdr-label-wrapper__figure": "cdr-label-wrapper__figure_13-0-0-alpha-1",
+  "cdr-label-wrapper__content": "cdr-label-wrapper__content_13-0-0-alpha-1",
+  "cdr-label-wrapper--hide-figure": "cdr-label-wrapper--hide-figure_13-0-0-alpha-1",
+  "cdr-label-wrapper--small": "cdr-label-wrapper--small_13-0-0-alpha-1",
+  "cdr-label-wrapper--medium": "cdr-label-wrapper--medium_13-0-0-alpha-1",
+  "cdr-label-wrapper--large": "cdr-label-wrapper--large_13-0-0-alpha-1",
+  "cdr-label-wrapper--small@xs": "cdr-label-wrapper--small@xs_13-0-0-alpha-1",
+  "cdr-label-wrapper--medium@xs": "cdr-label-wrapper--medium@xs_13-0-0-alpha-1",
+  "cdr-label-wrapper--large@xs": "cdr-label-wrapper--large@xs_13-0-0-alpha-1",
+  "cdr-label-wrapper--small@sm": "cdr-label-wrapper--small@sm_13-0-0-alpha-1",
+  "cdr-label-wrapper--medium@sm": "cdr-label-wrapper--medium@sm_13-0-0-alpha-1",
+  "cdr-label-wrapper--large@sm": "cdr-label-wrapper--large@sm_13-0-0-alpha-1",
+  "cdr-label-wrapper--small@md": "cdr-label-wrapper--small@md_13-0-0-alpha-1",
+  "cdr-label-wrapper--medium@md": "cdr-label-wrapper--medium@md_13-0-0-alpha-1",
+  "cdr-label-wrapper--large@md": "cdr-label-wrapper--large@md_13-0-0-alpha-1",
+  "cdr-label-wrapper--small@lg": "cdr-label-wrapper--small@lg_13-0-0-alpha-1",
+  "cdr-label-wrapper--medium@lg": "cdr-label-wrapper--medium@lg_13-0-0-alpha-1",
+  "cdr-label-wrapper--large@lg": "cdr-label-wrapper--large@lg_13-0-0-alpha-1"
+};
+
+export { style0 as default };

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

@@ -0,0 +1,10 @@
+import script from './CdrLink.vue_vue_type_script_lang.js';
+export { default } from './CdrLink.vue_vue_type_script_lang.js';
+import { render } from './CdrLink.vue_vue_type_template_id_6c2e23a6_lang.js';
+import style0 from './styles/CdrLink.module.scss_vue_type_style_index_0_src_id_6c2e23a6_module_true_lang.css.js';
+
+const cssModules = script.__cssModules = {};
+cssModules["$style"] = style0;
+
+script.render = render;
+script.__file = "src/components/link/CdrLink.vue";

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

@@ -0,0 +1,67 @@
+import { defineComponent, computed, useCssModule } from 'vue';
+import mapClasses from '../../utils/mapClasses.js';
+import { buildClass } from '../../utils/buildClass.js';
+import validateProp from '../../utils/propValidator.js';
+
+var script = defineComponent({
+  name: 'CdrLink',
+  props: {
+    tag: {
+      type: String,
+      default: 'a'
+    },
+    href: {
+      type: String,
+      default: '#'
+    },
+    inheritColor: {
+      type: Boolean,
+      default: false
+    },
+    modifier: {
+      type: String,
+      default: '',
+      validator: function validator(value) {
+        return validateProp(value, ['', 'standalone']);
+      }
+    },
+
+    /** @ignore */
+    target: String,
+
+    /** @ignore */
+    rel: String
+  },
+
+  setup(props) {
+    var computedHref = computed(function () {
+      return props.tag === 'a' ? props.href : null;
+    });
+    var computedRel = computed(function () {
+      if (props.target === '_blank') {
+        return props.rel || 'noopener noreferrer';
+      }
+
+      return props.rel;
+    });
+    var baseClass = 'cdr-link';
+    var modifierClass = computed(function () {
+      return props.modifier && buildClass(baseClass, props.modifier);
+    });
+    var inheritColorClass = computed(function () {
+      return props.inheritColor && 'cdr-link--inherit-color';
+    });
+    return {
+      style: useCssModule(),
+      mapClasses,
+      computedHref,
+      computedRel,
+      baseClass,
+      modifierClass,
+      inheritColorClass
+    };
+  }
+
+});
+
+export { script as default };

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

@@ -0,0 +1,21 @@
+import { openBlock, createBlock, resolveDynamicComponent, normalizeClass, withCtx, renderSlot } from 'vue';
+
+function 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(function () {
+      return [renderSlot(_ctx.$slots, "default")];
+    }),
+    _: 3
+    /* FORWARDED */
+
+  }, 8
+  /* PROPS */
+  , ["class", "target", "rel", "href"]);
+}
+
+export { render };

package/dist/lib/src/components/link/styles/CdrLink.module.scss_vue_type_style_index_0_src_id_6c2e23a6_module_true_lang.css.js

@@ -0,0 +1,7 @@
+var style0 = {
+  "cdr-link": "cdr-link_13-0-0-alpha-1",
+  "cdr-link--standalone": "cdr-link--standalone_13-0-0-alpha-1",
+  "cdr-link--inherit-color": "cdr-link--inherit-color_13-0-0-alpha-1"
+};
+
+export { style0 as default };

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

@@ -0,0 +1,10 @@
+import script from './CdrList.vue_vue_type_script_lang.js';
+export { default } from './CdrList.vue_vue_type_script_lang.js';
+import { render } from './CdrList.vue_vue_type_template_id_41255cee_lang.js';
+import style0 from './styles/CdrList.module.scss_vue_type_style_index_0_src_id_41255cee_module_true_lang.css.js';
+
+const cssModules = script.__cssModules = {};
+cssModules["$style"] = style0;
+
+script.render = render;
+script.__file = "src/components/list/CdrList.vue";

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

@@ -0,0 +1,41 @@
+import { defineComponent, computed, useCssModule } from 'vue';
+import { buildClass } from '../../utils/buildClass.js';
+import validateProp from '../../utils/propValidator.js';
+
+var script = 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: function validator(value) {
+        return validateProp(value, ['ul', 'ol']);
+      }
+    },
+    modifier: {
+      type: String,
+      default: '',
+      validator: function validator(value) {
+        return validateProp(value, ['', 'ordered', 'unordered', 'compact', 'inline']);
+      }
+    }
+  },
+
+  setup(props) {
+    var baseClass = 'cdr-list';
+    var modifierClass = computed(function () {
+      return props.modifier && buildClass(baseClass, props.modifier);
+    });
+    return {
+      style: useCssModule(),
+      baseClass,
+      modifierClass
+    };
+  }
+
+});
+
+export { script as default };

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

@@ -0,0 +1,18 @@
+import { openBlock, createBlock, resolveDynamicComponent, normalizeClass, withCtx, renderSlot } from 'vue';
+
+function 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(function () {
+      return [renderSlot(_ctx.$slots, "default")];
+    }),
+    _: 3
+    /* FORWARDED */
+
+  }, 8
+  /* PROPS */
+  , ["class"]);
+}
+
+export { render };

package/dist/lib/src/components/list/styles/CdrList.module.scss_vue_type_style_index_0_src_id_41255cee_module_true_lang.css.js

@@ -0,0 +1,9 @@
+var style0 = {
+  "cdr-list": "cdr-list_13-0-0-alpha-1",
+  "cdr-list--compact": "cdr-list--compact_13-0-0-alpha-1",
+  "cdr-list--ordered": "cdr-list--ordered_13-0-0-alpha-1",
+  "cdr-list--unordered": "cdr-list--unordered_13-0-0-alpha-1",
+  "cdr-list--inline": "cdr-list--inline_13-0-0-alpha-1"
+};
+
+export { style0 as default };

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

@@ -0,0 +1,10 @@
+import script from './CdrModal.vue_vue_type_script_lang.js';
+export { default } from './CdrModal.vue_vue_type_script_lang.js';
+import { render } from './CdrModal.vue_vue_type_template_id_57e9fd64_lang.js';
+import style0 from './styles/CdrModal.module.scss_vue_type_style_index_0_src_id_57e9fd64_module_true_lang.css.js';
+
+const cssModules = script.__cssModules = {};
+cssModules["$style"] = style0;
+
+script.render = render;
+script.__file = "src/components/modal/CdrModal.vue";

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

@@ -0,0 +1,283 @@
+import _Object$getOwnPropertySymbols from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols';
+import _filterInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/filter';
+import _Object$getOwnPropertyDescriptors from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors';
+import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
+import debounce from 'lodash/debounce';
+import tabbable from 'tabbable';
+import { defineComponent, ref, computed, watch, onMounted, onUnmounted, useCssModule, nextTick } from 'vue';
+import { CdrSpaceTwoX, CdrSpaceOneX, CdrBreakpointSm } from '../../../node_modules/@rei/cdr-tokens/dist/js/cdr-tokens.esm.js';
+import onTransitionEnd from './onTransitionEnd.js';
+import '../button/CdrButton.js';
+import '../icon/comps/x-lg.js';
+import mapClasses from '../../utils/mapClasses.js';
+import script$2 from '../icon/comps/x-lg.vue_vue_type_script_lang.js';
+import script$1 from '../button/CdrButton.vue_vue_type_script_lang.js';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) { symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+var script = defineComponent({
+  name: 'CdrModal',
+  components: {
+    CdrButton: script$1,
+    IconXLg: script$2
+  },
+  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) {
+    var baseClass = 'cdr-modal';
+    var reallyClosed = ref(!props.opened); // REFS or LET?
+
+    var unsubscribe;
+    var lastActive;
+    var isOpening = ref(false);
+    var offset = ref(null);
+    var headerHeight = ref(0);
+    var totalHeight = ref(0);
+    var scrollHeight = ref(0);
+    var offsetHeight = ref(0);
+    var offsetWidth = ref(0);
+    var clientWidth = ref(0);
+    var fullscreen = ref(false);
+    var modalEl = ref(null);
+    var wrapperEl = ref(null);
+    var contentEl = ref(null);
+    var headerEl = ref(null);
+
+    var measureContent = function measureContent() {
+      nextTick(function () {
+        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;
+      });
+    };
+
+    var handleKeyDown = function handleKeyDown(_ref) {
+      var key = _ref.key;
+
+      switch (key) {
+        case 'Escape':
+        case 'Esc':
+          onClick();
+          break;
+      }
+    };
+
+    var handleFocus = function handleFocus(e) {
+      var _document = document,
+          documentElement = _document.documentElement;
+      if (modalEl.value.contains(e.target) || !documentElement) return;
+      var tabbables = tabbable(documentElement);
+      var these = tabbable(modalEl.value);
+      var nextIx = tabbables.indexOf(e.target);
+      var firstModalIx = tabbables.indexOf(these[0]);
+      var nextRef = nextIx < firstModalIx ? these[these.length - 1] : these[0];
+      if (nextRef) nextRef.focus(); // ...uhhh???? what?
+      // documentElement.scrollTop = this.scrollTop;
+      // documentElement.scrollLeft = this.scrollLeft;
+    };
+
+    var handleResize = debounce(function () {
+      measureContent();
+    }, 300);
+
+    var handleOpened = function handleOpened() {
+      var _document2 = document,
+          activeElement = _document2.activeElement;
+      addNoScroll();
+      isOpening.value = true;
+      reallyClosed.value = false;
+      lastActive = activeElement;
+      nextTick(function () {
+        if (modalEl.value) modalEl.value.focus(); // wrapped in if so testing error isn't thrown
+
+        measureContent();
+        addHandlers();
+        setTimeout(function () {
+          // 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();
+        });
+      });
+    };
+
+    var handleClosed = function handleClosed() {
+      var _document3 = document,
+          documentElement = _document3.documentElement;
+      document.removeEventListener('keydown', handleKeyDown);
+      document.removeEventListener('focusin', handleFocus, true);
+      isOpening.value = false;
+      unsubscribe = onTransitionEnd(wrapperEl.value, function () {
+        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);
+    };
+
+    var addNoScroll = function addNoScroll() {
+      var _document4 = document,
+          documentElement = _document4.documentElement,
+          body = _document4.body;
+      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 = "-".concat(offset.value.y, "px");
+        documentElement.style.left = "-".concat(offset.value.x, "px");
+      }
+
+      if (body) {
+        body.classList.add('cdr-modal__noscroll');
+      }
+    };
+
+    var removeNoScroll = function removeNoScroll() {
+      var _document5 = document,
+          documentElement = _document5.documentElement,
+          body = _document5.body;
+
+      if (body) {
+        body.classList.remove('cdr-modal__noscroll');
+      }
+
+      if (documentElement) {
+        documentElement.classList.remove('cdr-modal__noscroll');
+        documentElement.style.top = '';
+        documentElement.style.left = '';
+      }
+    };
+
+    var addHandlers = function addHandlers() {
+      document.addEventListener('focusin', handleFocus, true);
+      document.addEventListener('keydown', handleKeyDown);
+    };
+
+    var onClick = function onClick(e) {
+      ctx.emit('closed', e);
+    };
+
+    var dialogAttrs = computed(function () {
+      // TODO: remove aria-desc and id from props? just ingest as attrs?
+      return _objectSpread(_objectSpread({}, ctx.attrs), {}, {
+        'aria-describedby': props.ariaDescribedby,
+        'aria-modal': 'true',
+        id: props.id
+      });
+    });
+    var verticalSpace = computed(function () {
+      // contentWrap vertical padding
+      var fullscreenSpace = Number(CdrSpaceTwoX);
+      var windowedSpace = Number(CdrSpaceTwoX) + Number(CdrSpaceOneX);
+      return fullscreen.value ? fullscreenSpace : windowedSpace + fullscreenSpace; // fullscreen, here, would account for outerWrap padding, which is the same CdrSpaceTwoX
+    });
+    var scrollMaxHeight = computed(function () {
+      return totalHeight.value - headerHeight.value - verticalSpace.value;
+    });
+    var scrollPadding = computed(function () {
+      var isScrolling = scrollHeight.value > offsetHeight.value;
+      var hasScrollbar = offsetWidth.value - clientWidth.value > 0;
+
+      if (isScrolling && hasScrollbar) {
+        return 4;
+      } else if (isScrolling) {
+        return 12;
+      } else {
+        return 0;
+      }
+    });
+    watch(function () {
+      return props.opened;
+    }, function (newValue, oldValue) {
+      if (!!newValue === !!oldValue) return;
+      newValue ? handleOpened() : handleClosed();
+    });
+    onMounted(function () {
+      if (props.opened) {
+        handleOpened();
+      }
+
+      window.addEventListener('resize', handleResize);
+    });
+    onUnmounted(function () {
+      window.removeEventListener('resize', handleResize);
+    });
+    return {
+      style: useCssModule(),
+      baseClass,
+      mapClasses,
+      dialogAttrs,
+      verticalSpace,
+      scrollMaxHeight,
+      reallyClosed,
+      modalEl,
+      wrapperEl,
+      contentEl,
+      headerEl,
+      onClick,
+      handleClosed,
+      measureContent,
+      removeNoScroll,
+      scrollPadding,
+      handleFocus
+    };
+  }
+
+});
+
+export { script as default };