@rei/cedar 13.0.0-alpha.0 → 13.0.0-alpha.1

package/dist/lib/src/components/select/CdrSelect.vue_vue_type_script_lang.js

@@ -0,0 +1,185 @@
+import _Symbol from '@babel/runtime-corejs3/core-js-stable/symbol';
+import _filterInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/filter';
+import _mapInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/map';
+import { defineComponent, computed, useCssModule } from 'vue';
+import toArray from 'lodash/toArray';
+import '../icon/comps/caret-down.js';
+import '../labelStandalone/CdrLabelStandalone.js';
+import '../formError/CdrFormError.js';
+import sizeProps from '../../props/size.js';
+import backgroundProps from '../../props/background.js';
+import { buildClass } from '../../utils/buildClass.js';
+import mapClasses from '../../utils/mapClasses.js';
+import script$1 from '../icon/comps/caret-down.vue_vue_type_script_lang.js';
+import script$2 from '../labelStandalone/CdrLabelStandalone.vue_vue_type_script_lang.js';
+import script$3 from '../formError/CdrFormError.vue_vue_type_script_lang.js';
+
+var script = defineComponent({
+  name: 'CdrSelect',
+  components: {
+    IconCaretDown: script$1,
+    CdrLabelStandalone: script$2,
+    CdrFormError: script$3
+  },
+  inheritAttrs: false,
+  props: {
+    /**
+     * `id` for the select that is mapped to the label `for` attribute. If one is not provided, it will be generated.
+    */
+    id: {
+      type: String,
+      required: true
+    },
+
+    /**
+     * Label text. This is required for a11y even if hiding the label with `hideLabel`.
+    */
+    label: {
+      type: String,
+      required: true
+    },
+
+    /**
+     * Removes the label element but sets the select `aria-label` to `label` text for a11y.
+    */
+    hideLabel: Boolean,
+
+    /**
+     * Adds an option that is disabled and selected by default to serve as a `placeholder` for the select.
+    */
+    prompt: String,
+
+    /**
+     * Build options programatically with data. Array of objects [{ text: String, value: String}] to give greater control. Array of strings ['String'] for simpler setup (value and text will be the same).
+    */
+    options: {
+      type: Array
+    },
+    // Set which background type the select renders on
+    background: backgroundProps,
+    size: sizeProps,
+    // Set error styling
+    error: {
+      type: [Boolean, String],
+      default: false
+    },
+
+    /**
+    * Override the error message role, default is `status`.
+    */
+    errorRole: {
+      type: String,
+      required: false,
+      default: 'status'
+    },
+    modelValue: {
+      type: [String, Number, Boolean, Object, Array, _Symbol, Function]
+    },
+    disabled: Boolean,
+    required: Boolean,
+    optional: Boolean,
+    multiple: Boolean,
+    multipleSize: Number
+  },
+
+  setup(props, ctx) {
+    var baseClass = 'cdr-select';
+    var hasHelper = ctx.slots['helper-text'];
+    var hasInfo = ctx.slots.info;
+    var hasInfoAction = ctx.slots['info-action'];
+    var hasPreIcon = ctx.slots['pre-icon'];
+    var multipleClass = computed(function () {
+      return props.multiple && 'cdr-select--multiple';
+    });
+    var promptClass = computed(function () {
+      return !props.modelValue && 'cdr-select--preicon';
+    });
+    var multilineClass = computed(function () {
+      return props.rows > 1 && 'cdr-select--multiline';
+    });
+    var preIconClass = computed(function () {
+      return hasPreIcon && 'cdr-select--preicon';
+    });
+    var errorClass = computed(function () {
+      return props.error && 'cdr-select--error';
+    });
+    var backgroundClass = computed(function () {
+      return "cdr-select--".concat(props.background);
+    });
+    var sizeClass = computed(function () {
+      return props.size && buildClass(baseClass, props.size);
+    });
+    var caretDisabledClass = computed(function () {
+      return props.disabled && 'cdr-select__caret--disabled';
+    });
+    var describedby = computed(function () {
+      var _context;
+
+      return _filterInstanceProperty(_context = [ctx.slots['helper-text'] ? "".concat(props.id, "-helper-text-top") : '', ctx.attrs['aria-describedby']]).call(_context, function (x) {
+        return x;
+      }).join(' ');
+    }); // TODO: refactor, would be much clearer as a 1-2 liner
+
+    var computedOpts = computed(function () {
+      var optsArr = [];
+
+      if (props.options) {
+        props.options.forEach(function (o) {
+          var optObj = {};
+          var text = '';
+          var val = '';
+
+          if (typeof o === 'string') {
+            text = o;
+            val = o;
+          } else {
+            var t = o.text,
+                v = o.value;
+            text = t;
+            val = v;
+          }
+
+          optObj.text = text;
+          optObj.value = val;
+          optsArr.push(optObj);
+        });
+      }
+
+      return optsArr;
+    });
+
+    var processMultiple = function processMultiple(options) {
+      var _context2, _context3;
+
+      return _mapInstanceProperty(_context2 = _filterInstanceProperty(_context3 = toArray(options)).call(_context3, function (o) {
+        return o.selected === true;
+      })).call(_context2, function (o) {
+        return o.value;
+      });
+    };
+
+    return {
+      style: useCssModule(),
+      baseClass,
+      computedOpts,
+      hasHelper,
+      hasInfo,
+      hasInfoAction,
+      hasPreIcon,
+      describedby,
+      processMultiple,
+      multipleClass,
+      promptClass,
+      multilineClass,
+      preIconClass,
+      errorClass,
+      backgroundClass,
+      sizeClass,
+      caretDisabledClass,
+      mapClasses
+    };
+  }
+
+});
+
+export { script as default };

package/dist/lib/src/components/select/CdrSelect.vue_vue_type_template_id_039dbe2a_lang.js

@@ -0,0 +1,111 @@
+import { resolveComponent, openBlock, createBlock, createSlots, withCtx, createElementVNode, normalizeClass, createElementBlock, renderSlot, createCommentVNode, mergeProps, toDisplayString, Fragment, renderList, createVNode } from 'vue';
+
+var _hoisted_1 = ["id", "multiple", "size", "disabled", "aria-required", "aria-invalid", "aria-errormessage", "aria-describedby", "value"];
+var _hoisted_2 = ["value"];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_icon_caret_down = resolveComponent("icon-caret-down");
+
+  var _component_cdr_form_error = resolveComponent("cdr-form-error");
+
+  var _component_cdr_label_standalone = resolveComponent("cdr-label-standalone");
+
+  return openBlock(), createBlock(_component_cdr_label_standalone, {
+    "for-id": _ctx.id,
+    label: _ctx.label,
+    "hide-label": _ctx.hideLabel,
+    required: _ctx.required,
+    optional: _ctx.optional,
+    disabled: _ctx.disabled
+  }, createSlots({
+    default: withCtx(function () {
+      return [createElementVNode("div", {
+        class: normalizeClass(_ctx.style['cdr-select-wrap'])
+      }, [_ctx.hasPreIcon ? (openBlock(), createElementBlock("span", {
+        key: 0,
+        class: normalizeClass(_ctx.style['cdr-select__pre-icon'])
+      }, [renderSlot(_ctx.$slots, "pre-icon")], 2
+      /* CLASS */
+      )) : createCommentVNode("v-if", true), createElementVNode("select", mergeProps({
+        class: _ctx.mapClasses(_ctx.style, _ctx.baseClass, _ctx.sizeClass, _ctx.promptClass, _ctx.multipleClass, _ctx.backgroundClass, _ctx.errorClass, _ctx.preIconClass),
+        id: _ctx.id,
+        multiple: _ctx.multiple,
+        size: _ctx.multipleSize,
+        disabled: _ctx.disabled,
+        "aria-required": _ctx.required || null,
+        "aria-invalid": !!_ctx.error || null,
+        "aria-errormessage": !!_ctx.error && "".concat(_ctx.id, "-error") || null
+      }, _ctx.$attrs, {
+        "aria-describedby": _ctx.describedby || null,
+        value: _ctx.modelValue,
+        onChange: _cache[0] || (_cache[0] = function ($event) {
+          return _ctx.$emit('update:modelValue', _ctx.multiple ? _ctx.processMultiple($event.target.options) : $event.target.value);
+        })
+      }), [_ctx.prompt ? (openBlock(), createElementBlock("option", {
+        key: 0,
+        class: normalizeClass(_ctx.style['cdr-select__prompt']),
+        value: "",
+        disabled: ""
+      }, toDisplayString(_ctx.prompt), 3
+      /* TEXT, CLASS */
+      )) : createCommentVNode("v-if", true), (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.computedOpts, function (option) {
+        return openBlock(), createElementBlock("option", {
+          key: option.text,
+          value: option.value
+        }, toDisplayString(option.text), 9
+        /* TEXT, PROPS */
+        , _hoisted_2);
+      }), 128
+      /* KEYED_FRAGMENT */
+      )), renderSlot(_ctx.$slots, "default")], 16
+      /* FULL_PROPS */
+      , _hoisted_1), createVNode(_component_icon_caret_down, {
+        class: normalizeClass(_ctx.mapClasses(_ctx.style, 'cdr-select__caret', _ctx.caretDisabledClass))
+      }, null, 8
+      /* PROPS */
+      , ["class"])], 2
+      /* CLASS */
+      )];
+    }),
+    _: 2
+    /* DYNAMIC */
+
+  }, [_ctx.hasHelper ? {
+    name: "helper",
+    fn: withCtx(function () {
+      return [renderSlot(_ctx.$slots, "helper-text")];
+    })
+  } : undefined, _ctx.hasInfo ? {
+    name: "info",
+    fn: withCtx(function () {
+      return [renderSlot(_ctx.$slots, "info")];
+    })
+  } : undefined, _ctx.hasInfoAction ? {
+    name: "info-action",
+    fn: withCtx(function () {
+      return [renderSlot(_ctx.$slots, "info-action")];
+    })
+  } : undefined, _ctx.error ? {
+    name: "error",
+    fn: withCtx(function () {
+      return [_ctx.error ? (openBlock(), createBlock(_component_cdr_form_error, {
+        key: 0,
+        error: _ctx.error,
+        role: _ctx.errorRole,
+        id: "".concat(_ctx.id, "-error")
+      }, {
+        error: withCtx(function () {
+          return [renderSlot(_ctx.$slots, "error")];
+        }),
+        _: 3
+        /* FORWARDED */
+
+      }, 8
+      /* PROPS */
+      , ["error", "role", "id"])) : createCommentVNode("v-if", true)];
+    })
+  } : undefined]), 1032
+  /* PROPS, DYNAMIC_SLOTS */
+  , ["for-id", "label", "hide-label", "required", "optional", "disabled"]);
+}
+
+export { render };

package/dist/lib/src/components/select/styles/CdrSelect.module.scss_vue_type_style_index_0_src_id_039dbe2a_module_true_lang.css.js

@@ -0,0 +1,20 @@
+var style0 = {
+  "cdr-select": "cdr-select_13-0-0-alpha-1",
+  "cdr-select--primary": "cdr-select--primary_13-0-0-alpha-1",
+  "cdr-select--secondary": "cdr-select--secondary_13-0-0-alpha-1",
+  "cdr-select--error": "cdr-select--error_13-0-0-alpha-1",
+  "cdr-select--preicon": "cdr-select--preicon_13-0-0-alpha-1",
+  "cdr-select__prompt": "cdr-select__prompt_13-0-0-alpha-1",
+  "cdr-select__caret": "cdr-select__caret_13-0-0-alpha-1",
+  "cdr-select__caret--disabled": "cdr-select__caret--disabled_13-0-0-alpha-1",
+  "cdr-select__pre-icon": "cdr-select__pre-icon_13-0-0-alpha-1",
+  "cdr-select--multiple": "cdr-select--multiple_13-0-0-alpha-1",
+  "cdr-select--large@xs": "cdr-select--large@xs_13-0-0-alpha-1",
+  "cdr-select--large": "cdr-select--large_13-0-0-alpha-1",
+  "cdr-select--large@sm": "cdr-select--large@sm_13-0-0-alpha-1",
+  "cdr-select--large@md": "cdr-select--large@md_13-0-0-alpha-1",
+  "cdr-select--large@lg": "cdr-select--large@lg_13-0-0-alpha-1",
+  "cdr-select-wrap": "cdr-select-wrap_13-0-0-alpha-1"
+};
+
+export { style0 as default };

package/dist/lib/src/components/table/CdrTable.js

@@ -1,7 +1,7 @@
-import script from './CdrTable.vue_vue&type=script&lang.js';
-export { default } from './CdrTable.vue_vue&type=script&lang.js';
-import { render } from './CdrTable.vue_vue&type=template&id=81c7b324&lang.js';
-import style0 from './styles/CdrTable.module.scss_vue&type=style&index=0&src&id=81c7b324&module=true&lang.css.js';
+import script from './CdrTable.vue_vue_type_script_lang.js';
+export { default } from './CdrTable.vue_vue_type_script_lang.js';
+import { render } from './CdrTable.vue_vue_type_template_id_81c7b324_lang.js';
+import style0 from './styles/CdrTable.module.scss_vue_type_style_index_0_src_id_81c7b324_module_true_lang.css.js';
 
 const cssModules = script.__cssModules = {};
 cssModules["$style"] = style0;

package/dist/lib/src/components/table/CdrTable.vue_vue_type_script_lang.js

@@ -0,0 +1,73 @@
+import { defineComponent, computed, useCssModule } from 'vue';
+import mapClasses from '../../utils/mapClasses.js';
+import { buildClass, buildBooleanClass } from '../../utils/buildClass.js';
+import validateProp from '../../utils/propValidator.js';
+
+var script = defineComponent({
+  name: 'CdrTable',
+  props: {
+    striped: {
+      type: Boolean,
+      default: false
+    },
+    border: {
+      type: Boolean,
+      default: true
+    },
+    fullWidth: {
+      type: [Boolean, String],
+      default: true
+    },
+    responsive: {
+      type: Boolean,
+      default: true
+    },
+    hover: {
+      type: Boolean,
+      default: false
+    },
+    size: {
+      type: String,
+      default: 'medium',
+      validator: function validator(value) {
+        return validateProp(value, ['small', 'medium', 'large']);
+      }
+    }
+  },
+
+  setup(props) {
+    var baseClass = 'cdr-table';
+    var sizeClass = computed(function () {
+      return props.size && buildClass('cdr-table', props.size);
+    });
+    var stripedClass = computed(function () {
+      return props.striped && buildClass('cdr-table', 'striped');
+    });
+    var hoverClass = computed(function () {
+      return props.hover && buildClass('cdr-table', 'hover');
+    });
+    var borderClass = computed(function () {
+      return props.border && !props.striped && buildClass('cdr-table', 'border');
+    });
+    var fullWidthClass = computed(function () {
+      return props.fullWidth && buildBooleanClass(baseClass, props.fullWidth, 'full-width');
+    });
+    var wrapperClass = computed(function () {
+      return props.responsive && buildClass('cdr-table', 'responsive');
+    });
+    return {
+      style: useCssModule(),
+      mapClasses,
+      wrapperClass,
+      baseClass,
+      sizeClass,
+      stripedClass,
+      hoverClass,
+      borderClass,
+      fullWidthClass
+    };
+  }
+
+});
+
+export { script as default };

package/dist/lib/src/components/table/CdrTable.vue_vue_type_template_id_81c7b324_lang.js

@@ -0,0 +1,15 @@
+import { openBlock, createElementBlock, normalizeClass, createElementVNode, mergeProps, renderSlot } from 'vue';
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(_ctx.style[_ctx.wrapperClass])
+  }, [createElementVNode("table", mergeProps(_ctx.$attrs, {
+    class: _ctx.mapClasses(_ctx.style, _ctx.baseClass, _ctx.sizeClass, _ctx.stripedClass, _ctx.hoverClass, _ctx.borderClass, _ctx.fullWidthClass)
+  }), [renderSlot(_ctx.$slots, "default")], 16
+  /* FULL_PROPS */
+  )], 2
+  /* CLASS */
+  );
+}
+
+export { render };

package/dist/lib/src/components/table/styles/CdrTable.module.scss_vue_type_style_index_0_src_id_81c7b324_module_true_lang.css.js

@@ -0,0 +1,17 @@
+var style0 = {
+  "cdr-table": "cdr-table_13-0-0-alpha-1",
+  "cdr-table--small": "cdr-table--small_13-0-0-alpha-1",
+  "cdr-table--medium": "cdr-table--medium_13-0-0-alpha-1",
+  "cdr-table--large": "cdr-table--large_13-0-0-alpha-1",
+  "cdr-table--striped": "cdr-table--striped_13-0-0-alpha-1",
+  "cdr-table--border": "cdr-table--border_13-0-0-alpha-1",
+  "cdr-table--full-width": "cdr-table--full-width_13-0-0-alpha-1",
+  "cdr-table--responsive": "cdr-table--responsive_13-0-0-alpha-1",
+  "cdr-table--hover": "cdr-table--hover_13-0-0-alpha-1",
+  "cdr-table--full-width@xs": "cdr-table--full-width@xs_13-0-0-alpha-1",
+  "cdr-table--full-width@sm": "cdr-table--full-width@sm_13-0-0-alpha-1",
+  "cdr-table--full-width@md": "cdr-table--full-width@md_13-0-0-alpha-1",
+  "cdr-table--full-width@lg": "cdr-table--full-width@lg_13-0-0-alpha-1"
+};
+
+export { style0 as default };

package/dist/lib/src/components/tabs/CdrTabPanel.js

@@ -1,7 +1,7 @@
-import script from './CdrTabPanel.vue_vue&type=script&lang.js';
-export { default } from './CdrTabPanel.vue_vue&type=script&lang.js';
-import { render } from './CdrTabPanel.vue_vue&type=template&id=2950521f&lang.js';
-import style0 from './styles/CdrTabPanel.module.scss_vue&type=style&index=0&src&id=2950521f&module=true&lang.css.js';
+import script from './CdrTabPanel.vue_vue_type_script_lang.js';
+export { default } from './CdrTabPanel.vue_vue_type_script_lang.js';
+import { render } from './CdrTabPanel.vue_vue_type_template_id_2950521f_lang.js';
+import style0 from './styles/CdrTabPanel.module.scss_vue_type_style_index_0_src_id_2950521f_module_true_lang.css.js';
 
 const cssModules = script.__cssModules = {};
 cssModules["$style"] = style0;

package/dist/lib/src/components/tabs/CdrTabPanel.vue_vue_type_script_lang.js

@@ -0,0 +1,100 @@
+import { defineComponent, ref, computed, inject, onBeforeMount, useCssModule } from 'vue';
+import { buildClass } from '../../utils/buildClass.js';
+import validateProp from '../../utils/propValidator.js';
+import mapClasses from '../../utils/mapClasses.js';
+
+var script = defineComponent({
+  name: 'CdrTabPanel',
+  props: {
+    /**
+     * Required string value that shows up on tab header
+     */
+    name: {
+      type: String,
+      required: true
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    ariaLabelledby: {
+      type: String,
+      required: true
+    },
+    id: {
+      type: String,
+      required: true
+    },
+    modifier: {
+      type: String,
+      default: '',
+      validator: function validator(value) {
+        return validateProp(value, ['centered', 'compact', 'full-width', 'no-border', '']);
+      }
+    }
+  },
+
+  setup(props, ctx) {
+    var baseClass = 'cdr-tab-panel';
+    var active = ref(false);
+    var hidden = ref(true);
+    var animationDirection = ref(null);
+    var modifierClass = computed(function () {
+      return buildClass(baseClass, props.modifier);
+    });
+
+    var setActive = function setActive(state) {
+      // TODO: provide/inject current active tab index or something?
+      if (state) hidden.value = false;
+      active.value = state;
+      ctx.emit('tab-change', state, props.id);
+    };
+
+    var setAnimationDirection = function setAnimationDirection(direction) {
+      // TODO Use provide/inject here?
+      // console.log(direction, 'YOOOOOO')
+      animationDirection.value = direction;
+    };
+
+    var handleUpArrowNav = function handleUpArrowNav() {
+      // YOU WAHT NOW?!?!?!
+      // TODO: emit event for tabPanel to deal with????
+      ctx.emit('tab-arrow-up'); // $parent.setFocusToActiveTabHeader();
+    };
+
+    var animationEnd = function animationEnd(event) {
+      if (event.animationName.split('-')[0] === 'exit') {
+        hidden.value = true;
+        animationDirection.value = null;
+      }
+    };
+
+    var tabs = inject('tabs');
+    onBeforeMount(function () {
+      tabs.value.push({
+        name: props.name,
+        id: props.id,
+        disabled: props.disabled,
+        ariaLabelledby: props.ariaLabelledby,
+        setActive,
+        setAnimationDirection
+      });
+    });
+    return {
+      style: useCssModule(),
+      modifierClass,
+      animationDirection,
+      baseClass,
+      mapClasses,
+      animationEnd,
+      active,
+      hidden,
+      handleUpArrowNav,
+      setActive,
+      setAnimationDirection
+    };
+  }
+
+});
+
+export { script as default };

package/dist/lib/src/components/tabs/CdrTabPanel.vue_vue_type_template_id_2950521f_lang.js

@@ -0,0 +1,25 @@
+import { openBlock, createElementBlock, normalizeClass, withKeys, withModifiers, renderSlot } from 'vue';
+
+var _hoisted_1 = ["aria-hidden", "aria-labelledby", "hidden", "id"];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    "aria-hidden": !_ctx.active,
+    "aria-labelledby": _ctx.ariaLabelledby,
+    class: normalizeClass(_ctx.mapClasses(_ctx.style, _ctx.baseClass, _ctx.modifierClass, _ctx.animationDirection && "cdr-tab-panel-".concat(_ctx.animationDirection))),
+    hidden: _ctx.hidden,
+    id: _ctx.id,
+    tabindex: "0",
+    role: "tabpanel",
+    onKeydown: _cache[0] || (_cache[0] = withKeys(withModifiers(function () {
+      return _ctx.handleUpArrowNav && _ctx.handleUpArrowNav.apply(_ctx, arguments);
+    }, ["prevent"]), ["up"])),
+    onAnimationend: _cache[1] || (_cache[1] = function () {
+      return _ctx.animationEnd && _ctx.animationEnd.apply(_ctx, arguments);
+    }),
+    key: _ctx.name
+  }, [renderSlot(_ctx.$slots, "default")], 42
+  /* CLASS, PROPS, HYDRATE_EVENTS */
+  , _hoisted_1);
+}
+
+export { render };

package/dist/lib/src/components/tabs/CdrTabs.js

@@ -1,7 +1,7 @@
-import script from './CdrTabs.vue_vue&type=script&lang.js';
-export { default } from './CdrTabs.vue_vue&type=script&lang.js';
-import { render } from './CdrTabs.vue_vue&type=template&id=0b62a2ae&lang.js';
-import style0 from './styles/CdrTabs.module.scss_vue&type=style&index=0&src&id=0b62a2ae&module=true&lang.css.js';
+import script from './CdrTabs.vue_vue_type_script_lang.js';
+export { default } from './CdrTabs.vue_vue_type_script_lang.js';
+import { render } from './CdrTabs.vue_vue_type_template_id_0b62a2ae_lang.js';
+import style0 from './styles/CdrTabs.module.scss_vue_type_style_index_0_src_id_0b62a2ae_module_true_lang.css.js';
 
 const cssModules = script.__cssModules = {};
 cssModules["$style"] = style0;