@rei/cedar 11.0.0 → 13.0.0-alpha.2

package/dist/lib/src/components/input/CdrInput.mjs

@@ -1,283 +0,0 @@
-import _mergeJSXProps from '@vue/babel-helper-vue-jsx-merge-props';
-import clsx from 'clsx';
-import size from '../../mixins/size.mjs';
-import validateProp from '../../utils/propValidator.mjs';
-import CdrLabelStandalone from '../labelStandalone/CdrLabelStandalone.mjs';
-import CdrFormError from '../formError/CdrFormError.mjs';
-import modules_3bf8b288 from './styles/CdrInput.mjs';
-
-/**
- * Cedar 2 component for input
- * **NOTE:** `v-model` is required.
- * @version 1.0.0
- * @author [REI Software Engineering](https://rei.github.io/rei-cedar/)
- */
-
-var CdrInput = {
-  name: 'CdrInput',
-  components: {
-    CdrLabelStandalone,
-    CdrFormError
-  },
-  mixins: [size],
-  inheritAttrs: false,
-  props: {
-    /**
-     * `id` for the input that is mapped to the label `for` attribute.
-     *  If one is not provided, it will be auto generated.
-    */
-    id: String,
-
-    /**
-     *  'type' attribute for the input as defined by w3c.
-     *  Only supporting text|email|number|password|search|url.
-     *  The increment/decrement webkit psuedo element is hidden for number.
-    */
-    type: {
-      type: [String],
-      default: 'text',
-      validator: value => validateProp(value, ['text', 'email', 'number', 'password', 'search', 'url', 'tel'])
-    },
-
-    /**
-     * Label text. This is required for a11y even if hiding the label with `hideLabel`.
-    */
-    label: {
-      type: String,
-      required: true
-    },
-
-    /**
-     * Override the error message role, default is `status`.
-     */
-    errorRole: {
-      type: String,
-      required: false,
-      default: 'status'
-    },
-
-    /**
-     * Removes the label element but sets the input `aria-label` to `label` text for a11y.
-    */
-    hideLabel: Boolean,
-    // sets default attrs for inputs that should use a numeric keyboard but are not strictly "numbers" (security code, CC number, postal code)
-    numeric: {
-      type: Boolean,
-      default: false
-    },
-
-    /**
-     * Number of rows for input.  Converts component to text-area if rows greater than 1.
-    */
-    rows: Number,
-    // Set which background type the input renders on
-    background: {
-      type: [String],
-      default: 'primary',
-      validator: value => validateProp(value, ['primary', 'secondary'])
-    },
-    // Set error styling
-    error: {
-      type: [Boolean, String],
-      default: false
-    },
-    disabled: Boolean,
-    required: Boolean,
-    optional: Boolean,
-    value: {
-      type: [String, Number]
-    }
-  },
-
-  data() {
-    return {
-      style: modules_3bf8b288,
-      isFocused: false
-    };
-  },
-
-  computed: {
-    // Use given id or generate one
-    inputId() {
-      return this.id ? this.id : this._uid; // eslint-disable-line no-underscore-dangle
-    },
-
-    baseClass() {
-      return 'cdr-input';
-    },
-
-    inputAttrs() {
-      const isNum = this.numeric || this.type === 'number';
-      return {
-        pattern: isNum && '[0-9]*',
-        inputmode: isNum && 'numeric',
-        novalidate: isNum,
-        autocorrect: 'off',
-        spellcheck: 'false',
-        autocapitalize: 'off',
-        ...this.$attrs
-      };
-    },
-
-    inputClass() {
-      const hasPostIcon = !!this.$slots['post-icon'];
-      const hasPostIcons = hasPostIcon && this.$slots['post-icon'].length > 1;
-      return {
-        [this.style['cdr-input']]: true,
-        [this.style['cdr-input--multiline']]: this.rows > 1,
-        [this.style['cdr-input--preicon']]: this.$slots['pre-icon'],
-        [this.style['cdr-input--posticon']]: hasPostIcon,
-        [this.style['cdr-input--posticons']]: hasPostIcons,
-        [this.style['cdr-input--error']]: this.error,
-        [this.style["cdr-input--".concat(this.background)]]: true
-      };
-    },
-
-    wrapperClass() {
-      return {
-        [this.style['cdr-input-wrap']]: true,
-        [this.style['cdr-input--focus']]: this.isFocused
-      };
-    },
-
-    describedby() {
-      return [this.$slots['helper-text-top'] ? "".concat(this.inputId, "-helper-text-top") : '', this.$slots['helper-text-bottom'] ? "".concat(this.inputId, "-helper-text-bottom") : '', this.$attrs['aria-describedby']].filter(x => x).join(' ');
-    },
-
-    inputListeners() {
-      // https://vuejs.org/v2/guide/components-custom-events.html#Binding-Native-Events-to-Components
-      // handles conflict between v-model and v-on="$listeners"
-      const vm = this;
-      return { ...this.$listeners,
-
-        input(event) {
-          vm.$emit('input', event.target.value);
-        },
-
-        focus(event) {
-          vm.isFocused = true;
-          vm.$emit('focus', event);
-        },
-
-        blur(event) {
-          vm.isFocused = false;
-          vm.$emit('blur', event);
-        }
-
-      };
-    },
-
-    inputEl() {
-      const h = this.$createElement;
-
-      if (this.rows && this.rows > 1) {
-        return h("textarea", _mergeJSXProps([{
-          "on": {
-            "input": $event => {
-              if ($event.target.composing) return;
-              this.value = $event.target.value;
-            },
-            ...this.inputListeners
-          },
-          "attrs": {
-            "rows": this.rows,
-            "id": this.inputId,
-            "disabled": this.disabled,
-            "aria-required": this.required,
-            "aria-invalid": !!this.error,
-            "aria-errormessage": !!this.error && "".concat(this.inputId, "-error"),
-            ...this.inputAttrs,
-            "aria-describedby": this.describedby || false
-          },
-          "class": clsx(this.inputClass, this.sizeClass),
-          "ref": "input",
-          "domProps": {
-            "value": this.value
-          }
-        }, {
-          directives: [{
-            name: "model",
-            value: this.value,
-            modifiers: {}
-          }]
-        }]));
-      }
-
-      return h("input", _mergeJSXProps([{
-        "on": {
-          "input": $event => {
-            if ($event.target.composing) return;
-            this.value = $event.target.value;
-          },
-          ...this.inputListeners
-        },
-        "attrs": {
-          "type": this.type,
-          "id": this.inputId,
-          "disabled": this.disabled,
-          "aria-required": this.required,
-          "aria-invalid": !!this.error,
-          "aria-errormessage": !!this.error && "".concat(this.inputId, "-error"),
-          ...this.inputAttrs,
-          "aria-describedby": this.describedby || false
-        },
-        "class": clsx(this.inputClass, this.sizeClass),
-        "ref": "input",
-        "domProps": {
-          "value": this.value
-        }
-      }, {
-        directives: [{
-          name: "model",
-          value: this.value,
-          modifiers: {}
-        }]
-      }]));
-    }
-
-  },
-
-  render() {
-    const h = arguments[0];
-    return h("cdr-label-standalone", {
-      "attrs": {
-        "for-id": "".concat(this.inputId),
-        "label": this.label,
-        "hide-label": this.hideLabel,
-        "required": this.required,
-        "optional": this.optional,
-        "disabled": this.disabled
-      }
-    }, [this.$slots['helper-text-top'] && h("template", {
-      "slot": "helper"
-    }, [this.$slots['helper-text-top']]), this.$slots.info && h("template", {
-      "slot": "info"
-    }, [this.$slots.info]), h("div", {
-      "class": this.wrapperClass
-    }, [this.inputEl, this.$slots['pre-icon'] && h("span", {
-      "class": this.style['cdr-input__pre-icon']
-    }, [this.$slots['pre-icon']]), this.$slots['post-icon'] && h("span", {
-      "class": this.style['cdr-input__post-icon']
-    }, [this.$slots['post-icon']])]), this.$slots['info-action'] && h("template", {
-      "slot": "info-action"
-    }, [this.$slots['info-action']]), this.$slots['helper-text-bottom'] && !this.error && h("span", {
-      "class": this.style['cdr-input__helper-text'],
-      "attrs": {
-        "id": "".concat(this.inputId, "-helper-text-bottom")
-      },
-      "slot": "helper-text-bottom"
-    }, [this.$slots['helper-text-bottom']]), this.error && h("cdr-form-error", {
-      "attrs": {
-        "role": this.errorRole,
-        "error": this.error,
-        "id": "".concat(this.inputId, "-error")
-      },
-      "slot": "error"
-    }, [h("template", {
-      "slot": "error"
-    }, [this.$slots.error])])]);
-  }
-
-};
-
-export default CdrInput;

package/dist/lib/src/components/input/styles/CdrInput.mjs

@@ -1,3 +0,0 @@
-var modules_3bf8b288 = {"cdr-input":"cdr-input_11-0-0","cdr-input--focus":"cdr-input--focus_11-0-0","cdr-input--multiline":"cdr-input--multiline_11-0-0","cdr-input--preicon":"cdr-input--preicon_11-0-0","cdr-input--posticon":"cdr-input--posticon_11-0-0","cdr-input--posticons":"cdr-input--posticons_11-0-0","cdr-input--primary":"cdr-input--primary_11-0-0","cdr-input--secondary":"cdr-input--secondary_11-0-0","cdr-input--error":"cdr-input--error_11-0-0","cdr-input--large":"cdr-input--large_11-0-0","cdr-input--large@xs":"cdr-input--large@xs_11-0-0","cdr-input--large@sm":"cdr-input--large@sm_11-0-0","cdr-input--large@md":"cdr-input--large@md_11-0-0","cdr-input--large@lg":"cdr-input--large@lg_11-0-0","cdr-input__pre-icon":"cdr-input__pre-icon_11-0-0","cdr-input__post-icon":"cdr-input__post-icon_11-0-0","cdr-input__helper-text":"cdr-input__helper-text_11-0-0","cdr-input-wrap":"cdr-input-wrap_11-0-0"};
-
-export default modules_3bf8b288;

package/dist/lib/src/components/labelStandalone/CdrLabelStandalone.mjs

@@ -1,85 +0,0 @@
-import modules_2157aaf7 from './styles/CdrLabelStandalone.mjs';
-
-var CdrLabelStandalone = {
-  name: 'CdrLabelStandalone',
-  props: {
-    forId: {
-      type: String,
-      required: true
-    },
-    label: String,
-    disabled: Boolean,
-    required: Boolean,
-    optional: Boolean,
-    hideLabel: Boolean
-  },
-
-  data() {
-    return {
-      style: modules_2157aaf7
-    };
-  },
-
-  computed: {
-    labelClass() {
-      return {
-        [this.style['cdr-label-standalone__label']]: true,
-        [this.style['cdr-label-standalone__label--disabled']]: this.disabled,
-        [this.style['cdr-label-standalone__label--sr-only']]: this.hideLabel
-      };
-    },
-
-    inputClass() {
-      const hasLabelContent = !this.hideLabel || this.$slots.helper || this.$slots.info;
-      return {
-        [this.style['cdr-label-standalone__input-wrap']]: true,
-        [this.style['cdr-label-standalone__input-spacing']]: hasLabelContent
-      };
-    },
-
-    labelEl() {
-      const h = this.$createElement;
-      const requiredEl = this.required ? h("span", {
-        "attrs": {
-          "aria-label": "required"
-        }
-      }, ["*"]) : '';
-      const optionalEl = this.optional ? h("span", {
-        "class": this.style['cdr-label-standalone__optional']
-      }, ["(optional)"]) : '';
-      return h("label", {
-        "class": this.labelClass,
-        "attrs": {
-          "for": this.forId
-        },
-        "ref": "label"
-      }, [this.label, requiredEl || optionalEl ? ' ' : '', requiredEl || optionalEl]);
-    }
-
-  },
-
-  render() {
-    const h = arguments[0];
-    return h("div", {
-      "class": this.style['cdr-label-standalone']
-    }, [h("div", {
-      "class": this.style['cdr-label-standalone__label-wrapper']
-    }, [this.labelEl, !this.hideLabel && this.$slots.helper && h("br"), this.$slots.helper && h("span", {
-      "class": this.style['cdr-label-standalone__helper'],
-      "attrs": {
-        "id": "".concat(this.forId, "-helper-text-top")
-      }
-    }, [this.$slots.helper])]), h("div", {
-      "class": this.inputClass
-    }, [this.$slots.default, this.$slots['info-action'] && h("div", {
-      "class": this.style['cdr-label-standalone__info-action']
-    }, [this.$slots['info-action']])]), this.$slots.info && h("span", {
-      "class": this.style['cdr-label-standalone__info']
-    }, [this.$slots.info]), h("div", {
-      "class": this.style['cdr-label-standalone__post-content']
-    }, [this.$slots['helper-text-bottom'], this.$slots.error])]);
-  }
-
-};
-
-export default CdrLabelStandalone;

package/dist/lib/src/components/labelStandalone/styles/CdrLabelStandalone.mjs

@@ -1,3 +0,0 @@
-var modules_2157aaf7 = {"cdr-label-standalone":"cdr-label-standalone_11-0-0","cdr-label-standalone__label-wrapper":"cdr-label-standalone__label-wrapper_11-0-0","cdr-label-standalone__label":"cdr-label-standalone__label_11-0-0","cdr-label-standalone__label--sr-only":"cdr-label-standalone__label--sr-only_11-0-0","cdr-label-standalone__label--disabled":"cdr-label-standalone__label--disabled_11-0-0","cdr-label-standalone__optional":"cdr-label-standalone__optional_11-0-0","cdr-label-standalone__helper":"cdr-label-standalone__helper_11-0-0","cdr-label-standalone__info":"cdr-label-standalone__info_11-0-0","cdr-label-standalone__post-content":"cdr-label-standalone__post-content_11-0-0","cdr-label-standalone__info-action":"cdr-label-standalone__info-action_11-0-0","cdr-label-standalone__input-wrap":"cdr-label-standalone__input-wrap_11-0-0","cdr-label-standalone__input-spacing":"cdr-label-standalone__input-spacing_11-0-0"};
-
-export default modules_2157aaf7;

package/dist/lib/src/components/labelWrapper/CdrLabelWrapper.mjs

@@ -1,54 +0,0 @@
-import clsx from 'clsx';
-import modules_fba16867 from './styles/CdrLabelWrapper.mjs';
-import modifier from '../../mixins/modifier.mjs';
-import size from '../../mixins/size.mjs';
-import validateProp from '../../utils/propValidator.mjs';
-
-var CdrLabelWrapper = {
-  name: 'CdrLabelWrapper',
-  mixins: [modifier, size],
-  inheritAttrs: false,
-  props: {
-    labelClass: String,
-    contentClass: String,
-    background: {
-      type: [String],
-      default: 'primary',
-      validator: value => validateProp(value, ['primary', 'secondary'])
-    },
-    disabled: Boolean
-  },
-
-  data() {
-    return {
-      style: modules_fba16867
-    };
-  },
-
-  computed: {
-    baseClass() {
-      return 'cdr-label-wrapper';
-    },
-
-    disabledClass() {
-      return this.disabled ? this.style['cdr-label-wrapper--disabled'] : '';
-    }
-
-  },
-
-  render() {
-    const h = arguments[0];
-    return h("div", {
-      "class": this.style['cdr-label-wrapper__container']
-    }, [h("label", {
-      "class": clsx(this.style['cdr-label-wrapper'], this.style["cdr-label-wrapper--".concat(this.background)], this.disabledClass, this.modifierClass, this.sizeClass, this.labelClass)
-    }, [this.$slots.input, h("span", {
-      "class": this.style['cdr-label-wrapper__figure']
-    }), h("div", {
-      "class": clsx(this.style['cdr-label-wrapper__content'], this.contentClass)
-    }, [this.$slots.default])])]);
-  }
-
-};
-
-export default CdrLabelWrapper;

package/dist/lib/src/components/labelWrapper/styles/CdrLabelWrapper.mjs

@@ -1,3 +0,0 @@
-var modules_fba16867 = {"cdr-label-wrapper":"cdr-label-wrapper_11-0-0","cdr-label-wrapper__container":"cdr-label-wrapper__container_11-0-0","cdr-label-wrapper--primary":"cdr-label-wrapper--primary_11-0-0","cdr-label-wrapper--secondary":"cdr-label-wrapper--secondary_11-0-0","cdr-label-wrapper--disabled":"cdr-label-wrapper--disabled_11-0-0","cdr-label-wrapper__figure":"cdr-label-wrapper__figure_11-0-0","cdr-label-wrapper__content":"cdr-label-wrapper__content_11-0-0","cdr-label-wrapper--hide-figure":"cdr-label-wrapper--hide-figure_11-0-0","cdr-label-wrapper--small":"cdr-label-wrapper--small_11-0-0","cdr-label-wrapper--medium":"cdr-label-wrapper--medium_11-0-0","cdr-label-wrapper--large":"cdr-label-wrapper--large_11-0-0","cdr-label-wrapper--small@xs":"cdr-label-wrapper--small@xs_11-0-0","cdr-label-wrapper--medium@xs":"cdr-label-wrapper--medium@xs_11-0-0","cdr-label-wrapper--large@xs":"cdr-label-wrapper--large@xs_11-0-0","cdr-label-wrapper--small@sm":"cdr-label-wrapper--small@sm_11-0-0","cdr-label-wrapper--medium@sm":"cdr-label-wrapper--medium@sm_11-0-0","cdr-label-wrapper--large@sm":"cdr-label-wrapper--large@sm_11-0-0","cdr-label-wrapper--small@md":"cdr-label-wrapper--small@md_11-0-0","cdr-label-wrapper--medium@md":"cdr-label-wrapper--medium@md_11-0-0","cdr-label-wrapper--large@md":"cdr-label-wrapper--large@md_11-0-0","cdr-label-wrapper--small@lg":"cdr-label-wrapper--small@lg_11-0-0","cdr-label-wrapper--medium@lg":"cdr-label-wrapper--medium@lg_11-0-0","cdr-label-wrapper--large@lg":"cdr-label-wrapper--large@lg_11-0-0"};
-
-export default modules_fba16867;

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

@@ -1,71 +0,0 @@
-import clsx from 'clsx';
-import modifier from '../../mixins/modifier.mjs';
-import modules_ec342341 from './styles/CdrLink.mjs';
-
-var CdrLink = {
-  name: 'CdrLink',
-  mixins: [modifier],
-  props: {
-    tag: {
-      type: String,
-      default: 'a'
-    },
-    href: {
-      type: String,
-      default: '#'
-    },
-    inheritColor: {
-      type: Boolean,
-      default: false
-    },
-
-    /** @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;

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

@@ -1,3 +0,0 @@
-var modules_ec342341 = {"cdr-link":"cdr-link_11-0-0","cdr-link--standalone":"cdr-link--standalone_11-0-0","cdr-link--inherit-color":"cdr-link--inherit-color_11-0-0"};
-
-export default modules_ec342341;

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

@@ -1,42 +0,0 @@
-import clsx from 'clsx';
-import modifier from '../../mixins/modifier.mjs';
-import modules_c3de6696 from './styles/CdrList.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
-    }
-  },
-
-  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;

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

@@ -1,3 +0,0 @@
-var modules_c3de6696 = {"cdr-list":"cdr-list_11-0-0","cdr-list--compact":"cdr-list--compact_11-0-0","cdr-list--ordered":"cdr-list--ordered_11-0-0","cdr-list--unordered":"cdr-list--unordered_11-0-0","cdr-list--inline":"cdr-list--inline_11-0-0"};
-
-export default modules_c3de6696;