@rei/cedar 11.0.1 → 13.0.0-alpha.3

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

@@ -1,71 +1,10 @@
-import clsx from 'clsx';
-import modifier from '../../mixins/modifier.mjs';
-import modules_ec342341 from './styles/CdrLink.mjs';
+import script from './CdrLink.vue_vue_type_script_lang.mjs';
+export { default } from './CdrLink.vue_vue_type_script_lang.mjs';
+import { render } from './CdrLink.vue_vue_type_template_id_6c2e23a6_lang.mjs';
+import style0 from './styles/CdrLink.module.scss_vue_type_style_index_0_src_id_6c2e23a6_module_true_lang.css.mjs';
 
-var CdrLink = {
-  name: 'CdrLink',
-  mixins: [modifier],
-  props: {
-    tag: {
-      type: String,
-      default: 'a'
-    },
-    href: {
-      type: String,
-      default: '#'
-    },
-    inheritColor: {
-      type: Boolean,
-      default: false
-    },
+const cssModules = script.__cssModules = {};
+cssModules["$style"] = style0;
 
-    /** @ignore */
-    target: String,
-
-    /** @ignore */
-    rel: String
-  },
-
-  data() {
-    return {
-      style: modules_ec342341
-    };
-  },
-
-  computed: {
-    baseClass() {
-      return 'cdr-link';
-    },
-
-    computedRel() {
-      if (this.target === '_blank') {
-        return this.rel || 'noopener noreferrer';
-      }
-
-      return this.rel;
-    },
-
-    inheritColorClass() {
-      return this.inheritColor ? this.style['cdr-link--inherit-color'] : '';
-    }
-
-  },
-
-  render() {
-    const h = arguments[0];
-    const Component = this.tag;
-    return h(Component, {
-      "class": clsx(this.style[this.baseClass], this.modifierClass, this.inheritColorClass),
-      "attrs": {
-        "target": this.target,
-        "rel": this.computedRel,
-        "href": this.tag === 'a' ? this.href : null
-      },
-      "on": { ...this.$listeners
-      }
-    }, [this.$slots.default || this.href]);
-  }
-
-};
-
-export default CdrLink;
+script.render = render;
+script.__file = "src/components/link/CdrLink.vue";

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

@@ -0,0 +1,55 @@
+import { defineComponent, computed, useCssModule } from 'vue';
+import mapClasses from '../../utils/mapClasses.mjs';
+import { buildClass } from '../../utils/buildClass.mjs';
+import validateProp from '../../utils/propValidator.mjs';
+
+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: (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,
+    };
+  },
+});
+
+export { script as default };

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

@@ -0,0 +1,17 @@
+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(() => [
+      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.mjs

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

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

@@ -1,42 +1,10 @@
-import clsx from 'clsx';
-import modifier from '../../mixins/modifier.mjs';
-import modules_c3de6696 from './styles/CdrList.mjs';
+import script from './CdrList.vue_vue_type_script_lang.mjs';
+export { default } from './CdrList.vue_vue_type_script_lang.mjs';
+import { render } from './CdrList.vue_vue_type_template_id_41255cee_lang.mjs';
+import style0 from './styles/CdrList.module.scss_vue_type_style_index_0_src_id_41255cee_module_true_lang.css.mjs';
 
-var CdrList = {
-  name: 'CdrList',
-  mixins: [modifier],
-  props: {
-    /**
-     * Tag accepts a user defined element and expects either: 'ul' = Unordered List or 'ol' = Ordered List.
-     */
-    tag: {
-      type: String,
-      default: 'ul',
-      validator: value => ['ul', 'ol'].indexOf(value) >= 0 || false
-    }
-  },
+const cssModules = script.__cssModules = {};
+cssModules["$style"] = style0;
 
-  data() {
-    return {
-      style: modules_c3de6696
-    };
-  },
-
-  computed: {
-    baseClass() {
-      return 'cdr-list';
-    }
-
-  },
-
-  render() {
-    const h = arguments[0];
-    const Component = this.tag;
-    return h(Component, {
-      "class": clsx(this.style[this.baseClass], this.modifierClass)
-    }, [this.$slots.default]);
-  }
-
-};
-
-export default CdrList;
+script.render = render;
+script.__file = "src/components/list/CdrList.vue";

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

@@ -0,0 +1,33 @@
+import { defineComponent, computed, useCssModule } from 'vue';
+import { buildClass } from '../../utils/buildClass.mjs';
+import validateProp from '../../utils/propValidator.mjs';
+
+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: (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,
+    };
+  },
+});
+
+export { script as default };

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

@@ -0,0 +1,14 @@
+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(() => [
+      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.mjs

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

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

@@ -1,365 +1,10 @@
-import debounce from 'lodash-es/debounce';
-import tabbable from 'tabbable';
-import clsx from 'clsx';
-import { CdrBreakpointSm, CdrSpaceTwoX, CdrSpaceOneX } from '../../../node_modules/@rei/cdr-tokens/dist/js/cdr-tokens.esm.mjs';
-import modules_11cadc74 from './styles/CdrModal.mjs';
-import onTransitionEnd from './onTransitionEnd.mjs';
-import CdrButton from '../button/CdrButton.mjs';
-import IconXLg from '../icon/comps/x-lg.mjs';
+import script from './CdrModal.vue_vue_type_script_lang.mjs';
+export { default } from './CdrModal.vue_vue_type_script_lang.mjs';
+import { render } from './CdrModal.vue_vue_type_template_id_57e9fd64_lang.mjs';
+import style0 from './styles/CdrModal.module.scss_vue_type_style_index_0_src_id_57e9fd64_module_true_lang.css.mjs';
 
-var CdrModal = {
-  name: 'CdrModal',
-  components: {
-    CdrButton,
-    IconXLg
-  },
-  props: {
-    opened: {
-      type: Boolean,
-      required: true
-    },
-    label: {
-      type: String,
-      required: true
-    },
-    role: {
-      type: String,
-      required: false,
-      default: 'dialog'
-    },
-    showTitle: {
-      type: Boolean,
-      required: false,
-      default: true
-    },
-    ariaDescribedby: {
-      type: String,
-      required: false,
-      default: null
-    },
-    id: {
-      type: String,
-      required: false,
-      default: null
-    },
-    overlayClass: String,
-    wrapperClass: String,
-    contentClass: String,
-    animationDuration: {
-      type: Number,
-      default: 300
-    }
-  },
+const cssModules = script.__cssModules = {};
+cssModules["$style"] = style0;
 
-  data() {
-    return {
-      style: modules_11cadc74,
-      unsubscribe: null,
-      keyHandler: null,
-      lastActive: null,
-      focusHandler: null,
-      resizeHandler: null,
-      isOpening: false,
-      offset: null,
-      headerHeight: 0,
-      totalHeight: 0,
-      isScrolling: false,
-      hasScrollbar: false,
-      fullscreen: false
-    };
-  },
-
-  computed: {
-    dialogAttrs() {
-      return {
-        'aria-describedby': this.ariaDescribedby,
-        'aria-modal': 'true',
-        id: this.id
-      };
-    },
-
-    scrollPadding() {
-      if (this.isScrolling && this.hasScrollbar) {
-        // content is scrolling, scrollbar is always present
-        return 4;
-      }
-
-      if (this.isScrolling) {
-        // content is scrolling, scrollbar only appears on scroll
-        return 12;
-      }
-
-      return 0;
-    },
-
-    verticalSpace() {
-      // contentWrap vertical padding
-      const fullscreen = Number(CdrSpaceTwoX);
-      const windowed = Number(CdrSpaceTwoX) + Number(CdrSpaceOneX);
-      return this.fullscreen ? fullscreen : windowed + fullscreen; // fullscreen, here, would account for outerWrap padding, which is the same CdrSpaceTwoX
-    },
-
-    scrollMaxHeight() {
-      return this.totalHeight - this.headerHeight - this.verticalSpace;
-    }
-
-  },
-  watch: {
-    opened(newValue, oldValue) {
-      if (!!newValue === !!oldValue) return;
-
-      if (newValue) {
-        this.handleOpened();
-      } else {
-        this.handleClosed();
-      }
-    }
-
-  },
-
-  mounted() {
-    if (this.opened) {
-      this.handleOpened();
-    }
-
-    this.resizeHandler = debounce(() => {
-      this.measureContent();
-    }, 300);
-    window.addEventListener('resize', this.resizeHandler);
-  },
-
-  beforeDestroy() {
-    if (this.unsubscribe) this.unsubscribe();
-    if (this.opened) this.removeNoScroll();
-    document.removeEventListener('focusin', this.focusHandler, true);
-    document.removeEventListener('keydown', this.keyHandler);
-    window.removeEventListener('resize', this.resizeHandler);
-  },
-
-  methods: {
-    measureContent() {
-      this.$nextTick(() => {
-        var _this$$refs$header, _this$$refs$content, _this$$refs$content2, _this$$refs$content3, _this$$refs$content4;
-
-        this.totalHeight = window.innerHeight;
-        this.fullscreen = window.innerWidth < CdrBreakpointSm;
-        this.headerHeight = (_this$$refs$header = this.$refs.header) === null || _this$$refs$header === void 0 ? void 0 : _this$$refs$header.offsetHeight;
-        this.isScrolling = ((_this$$refs$content = this.$refs.content) === null || _this$$refs$content === void 0 ? void 0 : _this$$refs$content.scrollHeight) > ((_this$$refs$content2 = this.$refs.content) === null || _this$$refs$content2 === void 0 ? void 0 : _this$$refs$content2.offsetHeight);
-        this.hasScrollbar = ((_this$$refs$content3 = this.$refs.content) === null || _this$$refs$content3 === void 0 ? void 0 : _this$$refs$content3.offsetWidth) - ((_this$$refs$content4 = this.$refs.content) === null || _this$$refs$content4 === void 0 ? void 0 : _this$$refs$content4.clientWidth) > 0;
-      });
-    },
-
-    handleKeyDown({
-      key
-    }) {
-      switch (key) {
-        case 'Escape':
-        case 'Esc':
-          this.onClick();
-          break;
-      }
-    },
-
-    handleFocus(e) {
-      const {
-        documentElement
-      } = document;
-      if (this.$refs.modal.contains(e.target) || !documentElement) return;
-      const tabbables = tabbable(documentElement);
-      const these = tabbable(this.$refs.modal);
-      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();
-      documentElement.scrollTop = this.scrollTop;
-      documentElement.scrollLeft = this.scrollLeft;
-    },
-
-    handleOpened() {
-      const {
-        activeElement
-      } = document;
-      this.addNoScroll();
-      this.isOpening = true;
-      this.lastActive = activeElement;
-      this.$nextTick(() => {
-        if (this.$refs.modal) this.$refs.modal.focus(); // wrapped in if so testing error isn't thrown
-
-        this.measureContent();
-        this.addHandlers();
-        setTimeout(() => {
-          // for some reason Safari scrolls the wrapper down a bit?
-          // doesn't work without setTimeout for some unknown reason
-          if (this.$refs.wrapper) this.$refs.wrapper.scrollTop = 0; // there is a race condition for measuring overflow when modal defaults to open,
-          // this seems to cover that
-
-          this.measureContent();
-        });
-      });
-    },
-
-    handleClosed() {
-      const {
-        documentElement
-      } = document;
-      document.removeEventListener('keydown', this.keyHandler);
-      document.removeEventListener('focusin', this.focusHandler, true);
-      this.isOpening = false;
-      this.unsubscribe = onTransitionEnd(this.$refs.wrapper, () => {
-        if (this.isOpening) return;
-        this.unsubscribe();
-        this.removeNoScroll();
-        this.unsubscribe = null; // handle scroll-behavior: smooth
-
-        if (documentElement) documentElement.style.scrollBehavior = 'auto'; // restore previous scroll position
-
-        window.scrollTo(this.offset.x, this.offset.y);
-        if (documentElement) documentElement.style.scrollBehavior = '';
-        if (this.lastActive) this.lastActive.focus();
-      }, this.animationDuration + 16);
-    },
-
-    addNoScroll() {
-      const {
-        documentElement,
-        body
-      } = document;
-      const offset = {
-        x: window.scrollX || (documentElement || {}).scrollLeft || (body || {}).scrollLeft || 0,
-        y: window.scrollY || (documentElement || {}).scrollTop || (body || {}).scrollTop || 0
-      };
-      this.offset = offset;
-
-      if (documentElement) {
-        documentElement.classList.add(modules_11cadc74['cdr-modal__noscroll']); // keep current scroll position manually
-
-        documentElement.style.top = "-".concat(offset.y, "px");
-        documentElement.style.left = "-".concat(offset.x, "px");
-      }
-
-      if (body) {
-        body.classList.add(modules_11cadc74['cdr-modal__noscroll']);
-      }
-    },
-
-    removeNoScroll() {
-      const {
-        documentElement,
-        body
-      } = document;
-
-      if (body) {
-        body.classList.remove(modules_11cadc74['cdr-modal__noscroll']);
-      }
-
-      if (documentElement) {
-        documentElement.classList.remove(modules_11cadc74['cdr-modal__noscroll']);
-        documentElement.style.top = '';
-        documentElement.style.left = '';
-      }
-    },
-
-    addHandlers() {
-      this.focusHandler = this.handleFocus.bind(this);
-      this.keyHandler = this.handleKeyDown.bind(this);
-      document.addEventListener('focusin', this.focusHandler, true);
-      document.addEventListener('keydown', this.keyHandler);
-    },
-
-    onClick(e) {
-      this.$emit('closed', e);
-    }
-
-  },
-
-  render() {
-    const h = arguments[0];
-    const {
-      onClick,
-      opened,
-      label,
-      wrapperClass,
-      overlayClass,
-      contentClass
-    } = this;
-    return h("div", {
-      "class": clsx(this.style['cdr-modal'], {
-        [this.style.closed]: !opened
-      }),
-      "ref": "wrapper"
-    }, [h("div", {
-      "class": clsx(this.style['cdr-modal__outerWrap'], wrapperClass)
-    }, [h("div", {
-      "attrs": {
-        "aria-hidden": "true"
-      },
-      "on": {
-        "click": onClick
-      },
-      "class": clsx(this.style['cdr-modal__overlay'], overlayClass)
-    }), h("div", {
-      "attrs": {
-        "tabIndex": opened ? '0' : undefined
-      }
-    }), h("div", {
-      "ref": "modal",
-      "class": clsx(this.style['cdr-modal__contentWrap'], this.style['cdr-modal__dialog']),
-      "attrs": {
-        "tabIndex": "-1",
-        "role": this.role,
-        "aria-modal": !!opened,
-        "aria-label": label,
-        ...this.dialogAttrs
-      }
-    }, [this.$slots.modal || h("div", {
-      "class": clsx(this.style['cdr-modal__innerWrap'], contentClass),
-      "style": !opened ? {
-        display: 'none'
-      } : undefined
-    }, [h("section", [h("div", {
-      "class": this.style['cdr-modal__content']
-    }, [h("div", {
-      "class": this.style['cdr-modal__header'],
-      "ref": "header"
-    }, [h("div", {
-      "class": this.style['cdr-modal__title']
-    }, [this.showTitle && this.$slots.title, this.showTitle && !this.$slots.title && h("h1", [this.label])]), h("cdr-button", {
-      "class": this.style['cdr-modal__close-button'],
-      "attrs": {
-        "icon-only": true,
-        "with-background": true,
-        "aria-label": "Close"
-      },
-      "on": {
-        "click": onClick
-      }
-    }, [h(IconXLg, {
-      "slot": "icon",
-      "attrs": {
-        "inherit-color": true
-      }
-    })])]), h("div", {
-      "attrs": {
-        "role": "document"
-      },
-      "class": this.style['cdr-modal__text']
-    }, [h("div", {
-      "class": this.style['cdr-modal__text-content'],
-      "style": {
-        maxHeight: "".concat(this.scrollMaxHeight, "px"),
-        paddingRight: "".concat(this.scrollPadding, "px")
-      },
-      "ref": "content",
-      "attrs": {
-        "tabindex": "0"
-      }
-    }, [this.$slots.default])])])])])]), h("div", {
-      "attrs": {
-        "tabIndex": opened ? '0' : undefined
-      }
-    })])]);
-  }
-
-};
-
-export default CdrModal;
+script.render = render;
+script.__file = "src/components/modal/CdrModal.vue";