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

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

@@ -1,10 +1,211 @@
-import script from './CdrAccordion.vue_vue_type_script_lang.js';
-export { default } from './CdrAccordion.vue_vue_type_script_lang.js';
-import { render } from './CdrAccordion.vue_vue_type_template_id_529b06a4_lang.js';
-import style0 from './styles/CdrAccordion.module.scss_vue_type_style_index_0_src_id_529b06a4_module_true_lang.css.js';
+import { defineComponent, inject, computed, ref, watch, onMounted, useCssModule, resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, resolveDynamicComponent, withCtx, createElementVNode, renderSlot, createTextVNode, toDisplayString, createVNode, normalizeStyle } from 'vue';
+import IconCaretDown from '../icon/comps/caret-down.js';
+import { modifyClassName, buildClass } from '../../utils/buildClass.js';
+import mapClasses from '../../utils/mapClasses.js';
+import _export_sfc from '../../../_virtual/plugin-vue_export-helper.js';
 
-const cssModules = script.__cssModules = {};
-cssModules["$style"] = style0;
+const _sfc_main = defineComponent({
+  name: 'CdrAccordion',
+  components: {
+    IconCaretDown,
+  },
+  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,
+    },
+  },
 
-script.render = render;
-script.__file = "src/components/accordion/CdrAccordion.vue";
+  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,
+    };
+  },
+});
+
+const _hoisted_1 = ["id"];
+const _hoisted_2 = ["id", "aria-expanded", "aria-controls"];
+const _hoisted_3 = ["id"];
+const _hoisted_4 = ["aria-hidden", "id"];
+
+function _sfc_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))
+}
+var CdrAccordion = /*#__PURE__*/_export_sfc(_sfc_main, [['render',_sfc_render]]);
+
+export { CdrAccordion as default };

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

@@ -1,10 +1,112 @@
-import script from './CdrAccordionGroup.vue_vue_type_script_lang.js';
-export { default } from './CdrAccordionGroup.vue_vue_type_script_lang.js';
-import { render } from './CdrAccordionGroup.vue_vue_type_template_id_09b98521_lang.js';
-import style0 from './styles/CdrAccordionGroup.module.scss_vue_type_style_index_0_src_id_09b98521_module_true_lang.css.js';
+import { defineComponent, ref, computed, onMounted, provide, useCssModule, openBlock, createElementBlock, normalizeClass, renderSlot } from 'vue';
+import debounce from 'lodash/debounce';
+import validateProp from '../../utils/propValidator.js';
+import getCurrentBreakpoint from '../../mixins/breakpoints.js';
+import _export_sfc from '../../../_virtual/plugin-vue_export-helper.js';
 
-const cssModules = script.__cssModules = {};
-cssModules["$style"] = style0;
+const _sfc_main = 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);
 
-script.render = render;
-script.__file = "src/components/accordion/CdrAccordionGroup.vue";
+    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,
+    };
+  },
+});
+
+function _sfc_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 */))
+}
+var CdrAccordionGroup = /*#__PURE__*/_export_sfc(_sfc_main, [['render',_sfc_render]]);
+
+export { CdrAccordionGroup as default };

package/dist/lib/src/components/banner/CdrBanner.js

@@ -1,9 +1,91 @@
-import script from './CdrBanner.vue_vue_type_script_setup_true_lang.js';
-export { default } from './CdrBanner.vue_vue_type_script_setup_true_lang.js';
-import style0 from './styles/CdrBanner.module.scss_vue_type_style_index_0_src_id_0217b2ec_module_true_lang.css.js';
+import { useSlots, useCssModule, computed, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, renderSlot, createCommentVNode } from 'vue';
+import validateProp from '../../utils/propValidator.js';
+import { buildClass } from '../../utils/buildClass.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',
+  },
+},
+  setup(__props) {
 
+const props = __props;
 
-script.__file = "src/components/banner/CdrBanner.vue";
+const slots = useSlots();
+
+const baseClass = 'cdr-banner';
+const style = useCssModule();
+const typeClass = computed(() => props.type && buildClass(baseClass, props.type));
+const prominenceClass = computed(() => (slots['message-body']
+  ? buildClass(`${baseClass}__wrapper`, 'prominence')
+  : undefined));
+const hasIconLeft = slots['icon-left'];
+const hasIconRight = slots['icon-right'];
+const hasMessageBody = slots['message-body'];
+const hasInfoAction = slots['info-action'];
+
+
+return (_ctx, _cache) => {
+  return (openBlock(), createElementBlock("div", {
+    class: normalizeClass([unref(style)[baseClass], unref(style)[unref(typeClass)]])
+  }, [
+    createElementVNode("div", {
+      class: normalizeClass([unref(style)['cdr-banner__wrapper'], unref(style)[unref(prominenceClass)]])
+    }, [
+      createElementVNode("div", {
+        class: normalizeClass([unref(style)['cdr-banner__main']])
+      }, [
+        (unref(hasIconLeft))
+          ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              class: normalizeClass([unref(style)['cdr-banner__icon-left']])
+            }, [
+              renderSlot(_ctx.$slots, "icon-left")
+            ], 2 /* CLASS */))
+          : createCommentVNode("v-if", true),
+        createElementVNode("span", {
+          class: normalizeClass([unref(style)['cdr-banner__message']])
+        }, [
+          renderSlot(_ctx.$slots, "default")
+        ], 2 /* CLASS */),
+        (unref(hasIconRight))
+          ? (openBlock(), createElementBlock("div", {
+              key: 1,
+              class: normalizeClass([unref(style)['cdr-banner__icon-right']])
+            }, [
+              renderSlot(_ctx.$slots, "icon-right")
+            ], 2 /* CLASS */))
+          : createCommentVNode("v-if", true)
+      ], 2 /* CLASS */),
+      (unref(hasMessageBody))
+        ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: normalizeClass([unref(style)['cdr-banner__message-body']])
+          }, [
+            renderSlot(_ctx.$slots, "message-body")
+          ], 2 /* CLASS */))
+        : createCommentVNode("v-if", true)
+    ], 2 /* CLASS */),
+    (unref(hasInfoAction))
+      ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: normalizeClass([unref(style)['cdr-banner__info-action']])
+        }, [
+          renderSlot(_ctx.$slots, "info-action")
+        ], 2 /* CLASS */))
+      : createCommentVNode("v-if", true)
+  ], 2 /* CLASS */))
+}
+}
+
+};
+
+var _sfc_main$1 = _sfc_main;
+
+export { _sfc_main$1 as default };

package/dist/lib/src/components/breadcrumb/CdrBreadcrumb.js

@@ -1,10 +1,140 @@
-import script from './CdrBreadcrumb.vue_vue_type_script_lang.js';
-export { default } from './CdrBreadcrumb.vue_vue_type_script_lang.js';
-import { render } from './CdrBreadcrumb.vue_vue_type_template_id_71430df8_lang.js';
-import style0 from './styles/CdrBreadcrumb.module.scss_vue_type_style_index_0_src_id_71430df8_module_true_lang.css.js';
+import { defineComponent, ref, watch, computed, useCssModule, openBlock, createElementBlock, normalizeClass, createElementVNode, createCommentVNode, Fragment, renderList, withDirectives, renderSlot, toDisplayString, vShow } from 'vue';
+import _export_sfc from '../../../_virtual/plugin-vue_export-helper.js';
 
-const cssModules = script.__cssModules = {};
-cssModules["$style"] = style0;
+const _sfc_main = defineComponent({
+  name: 'CdrBreadcrumb',
+  props: {
+    items: {
+      type: Array,
+      default: () => [],
+      validator: (value) => {
+        if (value.length && value.length > 0) {
+          for (let i = 0; i < value.length; i += 1) {
+            if (!(typeof value[i].item === 'object')) {
+              console.error('Breadcrumb items array missing item key at index ', i); // eslint-disable-line no-console
+              return false;
+            }
+            if (!Object.hasOwnProperty.call(value[i].item, 'name')) {
+              console.error('Breadcrumb items array is missing item.name value at index ', i); // eslint-disable-line no-console
+              return false;
+            }
+          }
+        }
+        return true;
+      },
+    },
+    /**
+     * Flag to track container width threshold exceeded
+     */
+    truncationEnabled: {
+      type: Boolean,
+      default: true,
+    },
+    id: {
+      type: String,
+      required: true,
+    },
+  },
+  setup(props) {
+    const truncate = ref(props.truncationEnabled && props.items.length > 2);
 
-script.render = render;
-script.__file = "src/components/breadcrumb/CdrBreadcrumb.vue";
+    watch(() => props.items, () => {
+      truncate.value = props.truncationEnabled && props.items.length > 2;
+    });
+
+    const itemListEl = ref(null);
+    const handleEllipsisClick = () => {
+      truncate.value = false;
+      setTimeout(() => {
+        // TODO: ref does not seem to update children here?
+        console.log(itemListEl.value.querySelector('.cdr-breadcrumb__item'));
+        itemListEl.value.querySelector('.cdr-breadcrumb__item').focus();
+      }, 1000);
+    };
+    const ellipsisLabel = computed(() => {
+      const s = (props.items.length - 2) > 1 ? 's' : '';
+      return `show ${props.items.length - 2} more navigation level${s}`;
+    });
+
+    return {
+      style: useCssModule(),
+      truncate,
+      handleEllipsisClick,
+      itemListEl,
+      ellipsisLabel,
+    };
+  },
+});
+
+const _hoisted_1 = ["id"];
+const _hoisted_2 = ["id"];
+const _hoisted_3 = ["aria-controls", "aria-label"];
+const _hoisted_4 = ["href", "onClick"];
+
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return (openBlock(), createElementBlock("nav", {
+    class: normalizeClass(_ctx.style['cdr-breadcrumb']),
+    id: _ctx.id,
+    "aria-label": "breadcrumbs"
+  }, [
+    createElementVNode("ol", {
+      id: `${_ctx.id}List`,
+      class: normalizeClass(_ctx.style['cdr-breadcrumb__list']),
+      ref: "itemListEl"
+    }, [
+      (_ctx.truncate)
+        ? (openBlock(), createElementBlock("li", {
+            key: 0,
+            class: normalizeClass(_ctx.style['cdr-breadcrumb__item'])
+          }, [
+            createElementVNode("button", {
+              onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.handleEllipsisClick && _ctx.handleEllipsisClick(...args))),
+              "aria-expanded": "false",
+              class: normalizeClass(_ctx.style['cdr-breadcrumb__ellipses']),
+              "aria-controls": `${_ctx.id}List`,
+              "aria-label": _ctx.ellipsisLabel
+            }, [
+              createElementVNode("span", {
+                class: normalizeClass(_ctx.style['cdr-breadcrumb__ellipses-icon']),
+                "aria-hidden": "true"
+              }, " . . . ", 2 /* CLASS */)
+            ], 10 /* CLASS, PROPS */, _hoisted_3),
+            createElementVNode("span", {
+              class: normalizeClass(_ctx.style['cdr-breadcrumb__delimiter']),
+              "aria-hidden": "true"
+            }, " / ", 2 /* CLASS */)
+          ], 2 /* CLASS */))
+        : createCommentVNode("v-if", true),
+      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.items, (breadcrumb, index) => {
+        return withDirectives((openBlock(), createElementBlock("li", {
+          class: normalizeClass(_ctx.style['cdr-breadcrumb__item']),
+          key: breadcrumb.item.id || breadcrumb.item.name.replace(/ /g, '-').toLowerCase()
+        }, [
+          renderSlot(_ctx.$slots, "link", {
+            class: normalizeClass(_ctx.style['cdr-breadcrumb__link']),
+            href: breadcrumb.item.url,
+            content: breadcrumb.item.name
+          }, () => [
+            createElementVNode("a", {
+              class: normalizeClass(_ctx.style['cdr-breadcrumb__link']),
+              href: breadcrumb.item.url,
+              onClick: $event => (_ctx.$emit('navigate', breadcrumb, _ctx.e))
+            }, toDisplayString(breadcrumb.item.name), 11 /* TEXT, CLASS, PROPS */, _hoisted_4)
+          ]),
+          (index < _ctx.items.length - 1)
+            ? (openBlock(), createElementBlock("span", {
+                key: 0,
+                class: normalizeClass(_ctx.style['cdr-breadcrumb__delimiter']),
+                "aria-hidden": "true"
+              }, " / ", 2 /* CLASS */))
+            : createCommentVNode("v-if", true)
+        ], 2 /* CLASS */)), [
+          [vShow, !_ctx.truncate || (index >= _ctx.items.length - 2)]
+        ])
+      }), 128 /* KEYED_FRAGMENT */))
+    ], 10 /* CLASS, PROPS */, _hoisted_2)
+  ], 10 /* CLASS, PROPS */, _hoisted_1))
+}
+var CdrBreadcrumb = /*#__PURE__*/_export_sfc(_sfc_main, [['render',_sfc_render]]);
+
+export { CdrBreadcrumb as default };