@rei/cedar 11.0.1 → 13.0.0-alpha.3

package/dist/lib/src/components/accordion/CdrAccordion.mjs

@@ -1,198 +1,10 @@
-import clsx from 'clsx';
-import IconCaretDown from '../icon/comps/caret-down.mjs';
-import modifier from '../../mixins/modifier.mjs';
-import modules_b5678f63 from './styles/CdrAccordion.mjs';
+import script from './CdrAccordion.vue_vue_type_script_lang.mjs';
+export { default } from './CdrAccordion.vue_vue_type_script_lang.mjs';
+import { render } from './CdrAccordion.vue_vue_type_template_id_529b06a4_lang.mjs';
+import style0 from './styles/CdrAccordion.module.scss_vue_type_style_index_0_src_id_529b06a4_module_true_lang.css.mjs';
 
-var CdrAccordion = {
-  name: 'CdrAccordion',
-  components: {
-    IconCaretDown
-  },
-  mixins: [modifier],
-  inject: {
-    unwrap: {
-      default: {
-        value: false
-      }
-    }
-  },
-  props: {
-    /**
-     * The unique id of an accordion.
-     */
-    id: {
-      type: String,
-      required: true
-    },
+const cssModules = script.__cssModules = {};
+cssModules["$style"] = style0;
 
-    /**
-     * Toggle this value to open/close the accordion.
-     */
-    opened: {
-      type: Boolean,
-      default: false
-    },
-
-    /**
-     * Sets a compact style.
-     */
-    compact: {
-      type: Boolean,
-      default: false
-    },
-
-    /**
-     * Sets a border-aligned style.
-     */
-    borderAligned: {
-      type: Boolean,
-      default: false
-    },
-    // Sets the heading level
-    level: {
-      type: [String, Number],
-      required: true
-    }
-  },
-
-  data() {
-    return {
-      focused: false,
-      maxHeight: this.opened ? 'none' : 0,
-      // set maxHeight to none if initialized as open
-      style: modules_b5678f63
-    };
-  },
-
-  computed: {
-    baseClass() {
-      return 'cdr-accordion';
-    },
-
-    styleClass() {
-      const styles = [];
-
-      if (this.compact) {
-        styles.push(this.modifyClassName(this.baseClass, 'compact'));
-      }
-
-      if (this.borderAligned) {
-        styles.push(this.modifyClassName(this.baseClass, 'border-aligned'));
-      }
-
-      return styles.join(' ');
-    },
-
-    unwrapClass() {
-      return this.unwrap.value ? this.modifyClassName(this.baseClass, 'unwrap') : null;
-    },
-
-    focusedClass() {
-      return this.focused ? this.modifyClassName(this.baseClass, 'focused') : null;
-    },
-
-    isOpenClass() {
-      return this.opened || this.unwrap.value ? 'open' : 'closed';
-    },
-
-    listeners() {
-      return this.unwrap.value ? {} : {
-        click: this.onClick,
-        focus: this.onFocus,
-        blur: this.onBlur
-      };
-    }
-
-  },
-  watch: {
-    opened() {
-      // reset maxHeight before animating
-      this.maxHeight = !this.opened ? "".concat(this.$refs['accordion-content'].clientHeight, "px") : 0; // nextTick is not sufficient here, must wait for CSS to re-paint
-
-      setTimeout(() => {
-        // on next frame, set maxHeight to new value
-        this.maxHeight = this.opened ? "".concat(this.$refs['accordion-content'].clientHeight, "px") : 0;
-        setTimeout(() => {
-          // after animation is complete, remove max-height so content can reflow
-          this.maxHeight = this.opened ? 'none' : 0;
-        }, 350); // cdr-duration-3x + 50ms
-      }, 50);
-    }
-
-  },
-
-  mounted() {
-    /*
-      The intent here is to give maxHeight an actual pixel value when the accordion
-      is initialized as open. This guarantees that the open-to-close animation is
-      nice and smooth the first time they click it.
-    */
-    if (this.opened && this.$refs['accordion-content']) {
-      this.maxHeight = 'none';
-    }
-  },
-
-  methods: {
-    onClick(event) {
-      this.$emit('accordion-toggle', event);
-    },
-
-    onFocus() {
-      this.focused = true;
-    },
-
-    onBlur() {
-      this.focused = false;
-    }
-
-  },
-
-  render() {
-    const h = arguments[0];
-    const Heading = "h".concat(this.level);
-    const HeadingContent = this.unwrap.value ? 'div' : 'button';
-    return h("div", {
-      "class": !this.unwrap.value && clsx(this.style[this.baseClass], this.modifierClass, this.styleClass, this.focusedClass),
-      "attrs": {
-        "id": "".concat(this.id, "-accordion")
-      },
-      "ref": "accordion-container"
-    }, [h(Heading, {
-      "class": this.unwrap.value ? this.style['cdr-accordion__header--unwrapped'] : this.style['cdr-accordion__header']
-    }, [h(HeadingContent, {
-      "class": [!this.unwrap.value && this.style['cdr-accordion__button'], 'js-cdr-accordion-button'],
-      "attrs": {
-        "id": this.id,
-        "aria-expanded": !this.unwrap.value && "".concat(this.opened),
-        "aria-controls": !this.unwrap.value && "".concat(this.id, "-collapsible")
-      },
-      "on": { ...this.listeners
-      }
-    }, [h("span", {
-      "class": this.style['cdr-accordion__label'],
-      "attrs": {
-        "id": "".concat(this.id, "-label")
-      }
-    }, [this.$slots.label]), !this.unwrap.value && h("icon-caret-down", {
-      "class": clsx(this.style['cdr-accordion__icon'], this.isOpenClass),
-      "attrs": {
-        "size": this.compact ? 'small' : null
-      }
-    })])]), h("div", {
-      "class": clsx(this.style['cdr-accordion__content-container'], this.isOpenClass),
-      "style": {
-        maxHeight: this.unwrap.value ? 'none' : this.maxHeight
-      }
-    }, [h("div", {
-      "class": clsx(this.style['cdr-accordion__content'], this.isOpenClass, this.unwrapClass),
-      "attrs": {
-        "aria-hidden": !this.unwrap.value && "".concat(!this.opened),
-        "id": "".concat(this.id, "-collapsible")
-      },
-      "ref": "accordion-content"
-    }, [this.$slots.default])])]);
-  }
-
-};
-
-export default CdrAccordion;
+script.render = render;
+script.__file = "src/components/accordion/CdrAccordion.vue";

package/dist/lib/src/components/accordion/CdrAccordion.vue_vue_type_script_lang.mjs

@@ -0,0 +1,153 @@
+import { defineComponent, inject, computed, ref, watch, onMounted, useCssModule } from 'vue';
+import '../icon/comps/caret-down.mjs';
+import { modifyClassName, buildClass } from '../../utils/buildClass.mjs';
+import mapClasses from '../../utils/mapClasses.mjs';
+import script$1 from '../icon/comps/caret-down.vue_vue_type_script_lang.mjs';
+
+var script = defineComponent({
+  name: 'CdrAccordion',
+  components: {
+    IconCaretDown: script$1,
+  },
+  props: {
+    /**
+     * The unique id of an accordion.
+     */
+    id: {
+      type: String,
+      required: true,
+    },
+    /**
+     * Toggle this value to open/close the accordion.
+     */
+    opened: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * Sets a compact style.
+     */
+    compact: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * Sets a border-aligned style.
+     */
+    borderAligned: {
+      type: Boolean,
+      default: false,
+    },
+    // Sets the heading level
+    level: {
+      type: [String, Number],
+      required: true,
+    },
+    label: {
+      type: String,
+    },
+  },
+
+  setup(props, ctx) {
+
+    const unwrap = inject('unwrap', {val: false});
+
+    console.log('HEY', unwrap.value);
+
+    const headingTag = `h${props.level}`;
+    const headingClass = computed(() => (unwrap.value && unwrap.value.val
+      ? 'cdr-accordion__header--unwrapped'
+      : 'cdr-accordion__header'));
+
+    const buttonClass = 'cdr-accordion__button js-cdr-accordion-button';
+
+    const accordionContentEl = ref(null);
+    const focused = ref(false);
+    const maxHeight = ref(props.opened ? 'none' : 0);
+
+    const labelClass = 'cdr-accordion__label';
+
+    const baseClass = 'cdr-accordion';
+    const compactClass = computed(() => (props.compact
+      ? modifyClassName('cdr-accordion', 'compact')
+      : ''));
+    const borderAlignedClass = computed(() => (props.borderAligned
+      ? modifyClassName('cdr-accordion', 'border-aligned')
+      : ''));
+    const focusedClass = computed(() => (focused.value
+      ? modifyClassName('cdr-accordion', 'focused')
+      : null));
+
+
+    const unwrapClass = computed(() => {
+      return unwrap.value && unwrap.value.val ? modifyClassName('cdr-accordion', 'unwrap') : null;
+    });
+
+    const modifierClass = computed(() => buildClass(baseClass, props.modifier));
+
+    const iconClass = 'cdr-accordion__icon';
+
+    const containerClass = 'cdr-accordion__content-container';
+
+    // is this class really not scoped?!?!?!?
+    const isOpenClass = computed(() => (props.opened ? 'cdr-tabs--open' : 'cdr-tabs--closed'));
+    const contentClass = 'cdr-accordion__content';
+
+    const onClick = (event) => {
+      ctx.emit('accordion-toggle', event);
+    };
+    const onFocus = () => {
+      focused.value = true;
+    };
+    const onBlur = () => {
+      focused.value = false;
+    };
+
+    watch(() => props.opened, (opened) => {
+      maxHeight.value = !opened ? `${accordionContentEl.value.clientHeight}px` : 0;
+      // nextTick is not sufficient here, must wait for CSS to re-paint
+      setTimeout(() => {
+        // on next frame, set maxHeight to new value
+        maxHeight.value = opened ? `${accordionContentEl.value.clientHeight}px` : 0;
+        setTimeout(() => {
+          // after animation is complete, remove max-height so content can reflow
+          maxHeight.value = opened ? 'none' : 0;
+        }, 350); // cdr-duration-3x + 50ms
+      }, 50);
+    });
+
+    onMounted(() => {
+      if (props.opened && accordionContentEl.value) {
+        maxHeight.value = 'none';
+      }
+    });
+
+
+    return {
+      style: useCssModule(),
+      headingTag,
+      headingClass,
+      buttonClass,
+      accordionContentEl,
+      focused,
+      maxHeight,
+      baseClass,
+      labelClass,
+      compactClass,
+      borderAlignedClass,
+      focusedClass,
+      iconClass,
+      containerClass,
+      isOpenClass,
+      contentClass,
+      modifierClass,
+      onClick,
+      onFocus,
+      onBlur,
+      unwrapClass,
+      mapClasses,
+    };
+  },
+});
+
+export { script as default };

package/dist/lib/src/components/accordion/CdrAccordion.vue_vue_type_template_id_529b06a4_lang.mjs

@@ -0,0 +1,60 @@
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, resolveDynamicComponent, withCtx, createElementVNode, renderSlot, createTextVNode, toDisplayString, createVNode, normalizeStyle } from 'vue';
+
+const _hoisted_1 = ["id"];
+const _hoisted_2 = ["id", "aria-expanded", "aria-controls"];
+const _hoisted_3 = ["id"];
+const _hoisted_4 = ["aria-hidden", "id"];
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_icon_caret_down = resolveComponent("icon-caret-down");
+
+  return (openBlock(), createElementBlock("li", {
+    class: normalizeClass(_ctx.mapClasses(_ctx.style, _ctx.baseClass, _ctx.modifierClass, _ctx.compactClass, _ctx.borderAlignedClass, _ctx.focusedClass)),
+    id: `${_ctx.id}-accordion`
+  }, [
+    (openBlock(), createBlock(resolveDynamicComponent(_ctx.headingTag), {
+      class: normalizeClass(_ctx.style[_ctx.headingClass])
+    }, {
+      default: withCtx(() => [
+        createElementVNode("button", {
+          class: normalizeClass([_ctx.style['cdr-accordion__button'], 'js-cdr-accordion-button']),
+          id: _ctx.id,
+          onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.onClick && _ctx.onClick(...args))),
+          onFocus: _cache[1] || (_cache[1] = (...args) => (_ctx.onFocus && _ctx.onFocus(...args))),
+          onBlur: _cache[2] || (_cache[2] = (...args) => (_ctx.onBlur && _ctx.onBlur(...args))),
+          "aria-expanded": `${_ctx.opened}`,
+          "aria-controls": `${_ctx.id}-collapsible`
+        }, [
+          createElementVNode("span", {
+            class: normalizeClass(_ctx.style['cdr-accordion__label']),
+            id: `${_ctx.id}-label`
+          }, [
+            renderSlot(_ctx.$slots, "label", {}, () => [
+              createTextVNode(toDisplayString(_ctx.label), 1 /* TEXT */)
+            ])
+          ], 10 /* CLASS, PROPS */, _hoisted_3),
+          createVNode(_component_icon_caret_down, {
+            class: normalizeClass(_ctx.mapClasses(_ctx.style, _ctx.iconClass, _ctx.isOpenClass)),
+            size: _ctx.compact ? 'small' : null
+          }, null, 8 /* PROPS */, ["class", "size"])
+        ], 42 /* CLASS, PROPS, HYDRATE_EVENTS */, _hoisted_2)
+      ]),
+      _: 3 /* FORWARDED */
+    }, 8 /* PROPS */, ["class"])),
+    createElementVNode("div", {
+      class: normalizeClass(_ctx.mapClasses(_ctx.style, _ctx.containerClass, _ctx.isOpenClass)),
+      style: normalizeStyle({ maxHeight: _ctx.maxHeight })
+    }, [
+      createElementVNode("div", {
+        class: normalizeClass(_ctx.mapClasses(_ctx.style, _ctx.contentClass, _ctx.isOpenClass)),
+        "aria-hidden": `${!_ctx.opened}`,
+        id: `${_ctx.id}-collapsible`,
+        ref: "accordionContentEl"
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 10 /* CLASS, PROPS */, _hoisted_4)
+    ], 6 /* CLASS, STYLE */)
+  ], 10 /* CLASS, PROPS */, _hoisted_1))
+}
+
+export { render };

package/dist/lib/src/components/accordion/CdrAccordionGroup.mjs

@@ -1,119 +1,10 @@
-import debounce from 'lodash-es/debounce';
-import clsx from 'clsx';
-import validateProp from '../../utils/propValidator.mjs';
-import breakpoints from '../../mixins/breakpoints.mjs';
-import modules_6e2f679e from './styles/CdrAccordionGroup.mjs';
+import script from './CdrAccordionGroup.vue_vue_type_script_lang.mjs';
+export { default } from './CdrAccordionGroup.vue_vue_type_script_lang.mjs';
+import { render } from './CdrAccordionGroup.vue_vue_type_template_id_09b98521_lang.mjs';
+import style0 from './styles/CdrAccordionGroup.module.scss_vue_type_style_index_0_src_id_09b98521_module_true_lang.css.mjs';
 
-var CdrAccordionGroup = {
-  name: 'CdrAccordionGroup',
-  mixins: [breakpoints],
+const cssModules = script.__cssModules = {};
+cssModules["$style"] = style0;
 
-  provide() {
-    return {
-      unwrap: this.isUnwrapped
-    };
-  },
-
-  props: {
-    unwrap: {
-      type: [String, Boolean],
-      default: false,
-      validator: value => {
-        if (typeof value === 'string') {
-          return validateProp(value, ['@xs', '@sm', '@md', '@lg'], false);
-        }
-
-        return typeof value === 'boolean';
-      }
-    }
-  },
-
-  data() {
-    return {
-      style: modules_6e2f679e,
-      accordionButtons: [],
-      currentIdx: 0,
-      isUnwrapped: {
-        value: this.unwrap
-      }
-    };
-  },
-
-  computed: {
-    nextIdx() {
-      const idx = this.currentIdx + 1;
-      return idx >= this.accordionButtons.length ? 0 : idx; // if at the last, go to first
-    },
-
-    prevIdx() {
-      const idx = this.currentIdx - 1;
-      return idx <= -1 ? this.accordionButtons.length - 1 : idx; // if at first, go to last
-    }
-
-  },
-
-  mounted() {
-    // get all of the buttons in the group
-    this.accordionButtons = this.$el.querySelectorAll('.js-cdr-accordion-button');
-
-    if (typeof this.unwrap === 'string') {
-      this.isUnwrapped.value = this.unwrap.indexOf(this.getCurrentBreakpoint()) !== -1;
-      window.addEventListener('resize', debounce(() => {
-        this.isUnwrapped.value = this.unwrap.indexOf(this.getCurrentBreakpoint()) !== -1;
-      }, 300));
-    }
-  },
-
-  methods: {
-    handleKeyDown(e) {
-      // something besides the button is focused
-      if (this.currentIdx === -1) return;
-      const {
-        key
-      } = e;
-
-      switch (key) {
-        case 'Home':
-          e.preventDefault();
-          this.accordionButtons[0].focus();
-          break;
-
-        case 'End':
-          e.preventDefault();
-          this.accordionButtons[this.accordionButtons.length - 1].focus();
-          break;
-
-        case 'ArrowDown':
-        case 'Down':
-          e.preventDefault();
-          this.accordionButtons[this.nextIdx].focus();
-          break;
-
-        case 'ArrowUp':
-        case 'Up':
-          e.preventDefault();
-          this.accordionButtons[this.prevIdx].focus();
-          break;
-      }
-    },
-
-    focusin(e) {
-      // find out which, if any, button is focused
-      this.currentIdx = Array.prototype.indexOf.call(this.accordionButtons, e.target);
-    }
-
-  },
-
-  render(h) {
-    return h("ul", {
-      "class": clsx(this.style['cdr-accordion-group']),
-      "on": {
-        "focusin": this.focusin,
-        "keydown": this.handleKeyDown
-      }
-    }, [this.$slots.default.map(vNode => vNode.tag !== undefined ? h('li', vNode, [vNode]) : '')]);
-  }
-
-};
-
-export default CdrAccordionGroup;
+script.render = render;
+script.__file = "src/components/accordion/CdrAccordionGroup.vue";

package/dist/lib/src/components/accordion/CdrAccordionGroup.vue_vue_type_script_lang.mjs

@@ -0,0 +1,99 @@
+import { defineComponent, ref, computed, onMounted, provide, useCssModule } from 'vue';
+import debounce from 'lodash/debounce';
+import validateProp from '../../utils/propValidator.mjs';
+import getCurrentBreakpoint from '../../mixins/breakpoints.mjs';
+
+var script = defineComponent({
+  name: 'CdrAccordionGroup',
+  props: {
+    unwrap: {
+      type: [String, Boolean],
+      default: false,
+      validator: (value) => {
+        if (typeof value === 'string') {
+          return validateProp(
+            value,
+            ['@xs', '@sm', '@md', '@lg'],
+            false,
+          );
+        }
+        return typeof value === 'boolean';
+      },
+    },
+  },
+  setup(props, ctx) {
+    const baseClass = 'cdr-accordion-group';
+    const currentIdx = ref(0);
+    const accordionButtons = ref([]);
+    const accordionGroupEl = ref(null);
+
+    const isUnwrapped = ref(!!props.unwrap);
+  //
+    const nextIdx = computed(() => {
+      const idx = currentIdx.value + 1;
+      return idx >= accordionButtons.value.length ? 0 : idx;
+    });
+
+    const prevIdx = computed(() => {
+      const idx = currentIdx.value - 1;
+      return idx <= -1 ? accordionButtons.value.length - 1 : idx;
+    });
+
+      console.log('what', props);
+    // TODO: how to handle $el?
+    onMounted(() => {
+      console.log('what', props.unwrap);
+      accordionButtons.value = accordionGroupEl.value.querySelectorAll('.js-cdr-accordion-button');
+      if (typeof props.unwrap === 'string') {
+        console.log('unwrappy', props.unwrap);
+        isUnwrapped.value = props.unwrap.indexOf(getCurrentBreakpoint()) !== -1;
+        window.addEventListener('resize', debounce(() => {
+          isUnwrapped.value = props.unwrap.indexOf(getCurrentBreakpoint()) !== -1;
+        }, 300));
+      }
+    });
+// TODO: unwrap logic needs to be refactored. Might need to pass a reactive object into provide? Is not currently working
+    provide('unwrap', {val: isUnwrapped.value});
+
+    const handleKeyDown = (e) => {
+      // something besides the button is focused
+      if (currentIdx.value === -1) return;
+
+      const { key } = e;
+      switch (key) {
+        case 'Home':
+          e.preventDefault();
+          accordionButtons.value[0].focus();
+          break;
+        case 'End':
+          e.preventDefault();
+          accordionButtons.value[accordionButtons.value.length - 1].focus();
+          break;
+        case 'ArrowDown':
+        case 'Down':
+          e.preventDefault();
+          accordionButtons.value[nextIdx.value].focus();
+          break;
+        case 'ArrowUp':
+        case 'Up':
+          e.preventDefault();
+          accordionButtons.value[prevIdx.value].focus();
+          break;
+      }
+    };
+    const focusin = (e) => {
+      // find out which, if any, button is focused
+      currentIdx.value = Array.prototype.indexOf.call(accordionButtons, e.target);
+    };
+
+    return {
+      style: useCssModule(),
+      handleKeyDown,
+      focusin,
+      baseClass,
+      accordionGroupEl,
+    };
+  },
+});
+
+export { script as default };

package/dist/lib/src/components/accordion/CdrAccordionGroup.vue_vue_type_template_id_09b98521_lang.mjs

@@ -0,0 +1,14 @@
+import { openBlock, createElementBlock, normalizeClass, renderSlot } from 'vue';
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return (openBlock(), createElementBlock("ul", {
+    class: normalizeClass(_ctx.style[_ctx.baseClass]),
+    ref: "accordionGroupEl",
+    onFocusin: _cache[0] || (_cache[0] = (...args) => (_ctx.focusin && _ctx.focusin(...args))),
+    onKeydown: _cache[1] || (_cache[1] = (...args) => (_ctx.handleKeyDown && _ctx.handleKeyDown(...args)))
+  }, [
+    renderSlot(_ctx.$slots, "default")
+  ], 34 /* CLASS, HYDRATE_EVENTS */))
+}
+
+export { render };

package/dist/lib/src/components/accordion/styles/CdrAccordion.module.scss_vue_type_style_index_0_src_id_529b06a4_module_true_lang.css.mjs

@@ -0,0 +1,3 @@
+var style0 = {"cdr-accordion":"cdr-accordion_13-0-0-alpha-3","cdr-accordion__button":"cdr-accordion__button_13-0-0-alpha-3","cdr-accordion__label":"cdr-accordion__label_13-0-0-alpha-3","cdr-accordion__header":"cdr-accordion__header_13-0-0-alpha-3","cdr-accordion__header--unwrapped":"cdr-accordion__header--unwrapped_13-0-0-alpha-3","cdr-accordion__icon":"cdr-accordion__icon_13-0-0-alpha-3","cdr-tabs--open":"cdr-tabs--open_13-0-0-alpha-3","cdr-accordion__content-container":"cdr-accordion__content-container_13-0-0-alpha-3","cdr-accordion__content":"cdr-accordion__content_13-0-0-alpha-3","cdr-tabs--closed":"cdr-tabs--closed_13-0-0-alpha-3","cdr-accordion--unwrap":"cdr-accordion--unwrap_13-0-0-alpha-3","cdr-accordion--border-aligned":"cdr-accordion--border-aligned_13-0-0-alpha-3","cdr-accordion--compact":"cdr-accordion--compact_13-0-0-alpha-3","cdr-accordion--focused":"cdr-accordion--focused_13-0-0-alpha-3"};
+
+export { style0 as default };

package/dist/lib/src/components/accordion/styles/CdrAccordionGroup.module.scss_vue_type_style_index_0_src_id_09b98521_module_true_lang.css.mjs

@@ -0,0 +1,3 @@
+var style0 = {"cdr-accordion-group":"cdr-accordion-group_13-0-0-alpha-3","cdr-accordion":"cdr-accordion_13-0-0-alpha-3"};
+
+export { style0 as default };