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

package/dist/lib/src/components/image/CdrImg.js

@@ -0,0 +1,148 @@
+import { defineComponent, computed, useCssModule, openBlock, createElementBlock, normalizeStyle, normalizeClass, createElementVNode, mergeProps } from 'vue';
+import mapClasses from '../../utils/mapClasses.js';
+import { buildClass } from '../../utils/buildClass.js';
+import validateProp from '../../utils/propValidator.js';
+import _export_sfc from '../../../_virtual/plugin-vue_export-helper.js';
+
+const _sfc_main = defineComponent({
+  name: 'CdrImg',
+  inheritAttrs: false,
+  props: {
+    /**
+     * Required. Image source url.
+     */
+    src: {
+      type: String,
+      required: true,
+    },
+    /**
+     * Required. Image alt text.
+     */
+    alt: {
+      type: String,
+      default: '',
+    },
+    /**
+     * Aspect ratio of the media container. {auto, square, 1-2, 2-3, 3-4, 9-16, 2-1, 3-2, 4-3, 16-9}
+     */
+    ratio: {
+      type: String,
+      validator: (value) => ([
+        'auto',
+        'square',
+        '1-2',
+        '2-3',
+        '3-4',
+        '9-16',
+        '2-1',
+        '3-2',
+        '4-3',
+        '16-9'].indexOf(value) >= 0) || false,
+    },
+    /**
+     * Requires a `ratio`. Area to crop the image overflow to. {left, center, right} {top, center, bottom}
+     */
+    crop: {
+      type: String,
+    },
+    /**
+     * Requires a `ratio`. Scale the image to be as large as possible to fill the area (background-position: cover;)
+     */
+    cover: {
+      type: Boolean,
+    },
+    /**
+     * Sets a border radius to an element {square, top, right, bottom, left}
+     */
+    radius: {
+      type: String,
+      validator: (value) => ([
+        'circle',
+        'rounded'].indexOf(value) >= 0) || false,
+    },
+
+    modifier: {
+      type: String,
+      default: '',
+      validator: (value) => validateProp(value, ['', 'responsive']),
+    },
+  },
+
+  setup(props) {
+    const baseClass = 'cdr-image';
+    const ratioClass = 'cdr-image-ratio';
+    const coverWrapperClass = 'cdr-image-ratio__cover';
+    const modifierClass = computed(() => buildClass(baseClass, props.modifier));
+    const radiusClass = computed(() => buildClass(baseClass, props.radius));
+
+    const cropObject = computed(() => ({ objectPosition: props.crop }));
+    const ratioObject = computed(() => {
+      let ratioPct;
+      if (props.ratio === 'square') {
+        ratioPct = '100%';
+      } else if (props.ratio === 'auto') {
+        ratioPct = '0';
+      } else {
+        const [x, y] = props.ratio.split('-');
+        ratioPct = `${(y / x) * 100}%`;
+      }
+      return { '--ratio': ratioPct };
+    });
+
+    const cropClass = computed(() => props.crop && buildClass(coverWrapperClass, 'crop'));
+    const coverClass = computed(() => props.cover && buildClass(coverWrapperClass, 'cover'));
+
+    return {
+      style: useCssModule(),
+      baseClass,
+      ratioClass,
+      coverWrapperClass,
+      modifierClass,
+      radiusClass,
+      cropObject,
+      ratioObject,
+      cropClass,
+      coverClass,
+      mapClasses,
+    };
+  },
+});
+
+const _hoisted_1 = ["src", "alt"];
+const _hoisted_2 = ["src", "alt"];
+
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return (_ctx.ratio)
+    ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        style: normalizeStyle(_ctx.ratioObject),
+        class: normalizeClass(_ctx.style[_ctx.ratioClass])
+      }, [
+        createElementVNode("img", mergeProps({
+          style: _ctx.cropObject,
+          class: _ctx.mapClasses(_ctx.style,
+                         _ctx.baseClass,
+                         _ctx.modifierClass,
+                         _ctx.radiusClass,
+                         _ctx.coverWrapperClass,
+                         _ctx.cropClass,
+                         _ctx.coverClass,
+      ),
+          src: _ctx.src,
+          alt: _ctx.alt
+        }, _ctx.$attrs), null, 16 /* FULL_PROPS */, _hoisted_1)
+      ], 6 /* CLASS, STYLE */))
+    : (openBlock(), createElementBlock("img", mergeProps({
+        key: 1,
+        class: _ctx.mapClasses(_ctx.style,
+                       _ctx.baseClass,
+                       _ctx.modifierClass,
+                       _ctx.radiusClass,
+    ),
+        src: _ctx.src,
+        alt: _ctx.alt
+      }, _ctx.$attrs), null, 16 /* FULL_PROPS */, _hoisted_2))
+}
+var CdrImg = /*#__PURE__*/_export_sfc(_sfc_main, [['render',_sfc_render]]);
+
+export { CdrImg as default };

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

@@ -0,0 +1,305 @@
+import { defineComponent, ref, computed, useCssModule, resolveComponent, openBlock, createBlock, createSlots, withCtx, createElementVNode, normalizeClass, createElementBlock, mergeProps, renderSlot, createCommentVNode } from 'vue';
+import validateProp from '../../utils/propValidator.js';
+import CdrLabelStandalone from '../labelStandalone/CdrLabelStandalone.js';
+import CdrFormError from '../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 _export_sfc from '../../../_virtual/plugin-vue_export-helper.js';
+
+const _sfc_main = defineComponent({
+  name: 'CdrInput',
+  components: {
+    CdrLabelStandalone,
+    CdrFormError,
+  },
+  inheritAttrs: false,
+  props: {
+    /**
+     * `id` for the input that is mapped to the label `for` attribute.
+    */
+    id: {
+      type: String,
+      required: true,
+    },
+    /**
+     *  '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,
+        // TODO: moar types?
+        ['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,
+    },
+    // 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,
+    },
+    /**
+     * Removes the label element but sets the input `aria-label` to `label` text for a11y.
+    */
+    hideLabel: Boolean,
+    /**
+     * 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: backgroundProps,
+    size: sizeProps,
+
+    /**
+     * Override the error message role, default is `status`.
+     */
+    errorRole: {
+      type: String,
+      required: false,
+      default: 'status',
+    },
+    // Set error styling
+    error: {
+      type: [Boolean, String],
+      default: false,
+    },
+    disabled: Boolean,
+    required: Boolean,
+    optional: Boolean,
+    modelValue: {
+      type: [String, Number],
+    },
+  },
+  setup(props, ctx) {
+    const baseClass = 'cdr-input';
+    // console.log(ctx.slots['post-icon']);
+    // TODO: delete un-used hasSlot props
+    const isFocused = ref(false);
+    const hasHelperTop = ctx.slots['helper-text-top'];
+    const hasHelperBottom = ctx.slots['helper-text-bottom'];
+    const hasPreIcon = ctx.slots['pre-icon'];
+    const hasPostIcon = ctx.slots['post-icon'];
+    const hasPostIcons = hasPostIcon && ctx.slots['post-icon']().length > 1;
+    const hasInfo = ctx.slots.info;
+    const hasInfoAction = ctx.slots['info-action'];
+
+    const multilineClass = computed(() => props.rows > 1 && 'cdr-input--multiline');
+    const preIconClass = computed(() => hasPreIcon && 'cdr-input--preicon');
+    // TODO: make one class for this? if possible? there must have been a reason i did it like this.....
+    const postIconClass = computed(() => hasPostIcon && 'cdr-input--posticon');
+    const postIconsClass = computed(() => hasPostIcons && 'cdr-input--posticons');
+    const errorClass = computed(() => props.error && 'cdr-input--error');
+    const backgroundClass = computed(() => `cdr-input--${props.background}`);
+    const sizeClass = computed(() => props.size && buildClass(baseClass, props.size));
+    const focusedClass = computed(() => isFocused.value && 'cdr-input--focus');
+
+    const describedby = computed(() => {
+      return [
+        ctx.slots['helper-text-top'] ? `${props.id}-helper-text-top` : '',
+        ctx.slots['helper-text-bottom'] ? `${props.id}-helper-text-bottom` : '',
+        ctx.attrs['aria-describedby'],
+      ].filter((x) => x).join(' ');
+    });
+
+
+    const inputAttrs = computed(() => {
+      const isNum = props.numeric || props.type === 'number';
+      return {
+        autocorrect: 'off',
+        spellcheck: 'false',
+        autocapitalize: 'off',
+        pattern: (isNum && '[0-9]*') || null,
+        inputmode: (isNum && 'numeric') || null,
+        novalidate: isNum || null,
+        ...ctx.attrs,
+      };
+    });
+
+    return {
+      style: useCssModule(),
+      baseClass,
+      sizeClass,
+      focusedClass,
+      multilineClass,
+      preIconClass,
+      postIconClass,
+      postIconsClass,
+      errorClass,
+      backgroundClass,
+      isFocused,
+      hasHelperTop,
+      hasHelperBottom,
+      hasPreIcon,
+      hasPostIcon,
+      hasInfo,
+      hasInfoAction,
+      inputAttrs,
+      describedby,
+      mapClasses,
+    };
+  },
+});
+
+const _hoisted_1 = ["rows", "id", "disabled", "aria-required", "aria-invalid", "aria-errormessage", "value", "aria-describedby"];
+const _hoisted_2 = ["type", "id", "disabled", "aria-required", "aria-invalid", "aria-errormessage", "aria-describedby", "value"];
+const _hoisted_3 = ["id"];
+
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_cdr_form_error = resolveComponent("cdr-form-error");
+  const _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(() => [
+      createElementVNode("div", {
+        class: normalizeClass(_ctx.mapClasses(_ctx.style, 'cdr-input-wrap', _ctx.focusedClass))
+      }, [
+        (_ctx.rows && _ctx.rows > 1)
+          ? (openBlock(), createElementBlock("textarea", mergeProps({
+              key: 0,
+              rows: _ctx.rows,
+              class: _ctx.mapClasses(_ctx.style,
+                           _ctx.baseClass,
+                           _ctx.multilineClass,
+                           _ctx.preIconClass,
+                           _ctx.postIconClass,
+                           _ctx.postIconsClass,
+                           _ctx.errorClass,
+                           _ctx.backgroundClass,
+                           _ctx.sizeClass,
+        ),
+              id: _ctx.id,
+              disabled: _ctx.disabled,
+              "aria-required": _ctx.required || null,
+              "aria-invalid": !!_ctx.error || null,
+              "aria-errormessage": (!!_ctx.error && `${_ctx.id}-error`) || null
+            }, _ctx.inputAttrs, {
+              value: _ctx.modelValue,
+              "aria-describedby": _ctx.describedby || null,
+              onInput: _cache[0] || (_cache[0] = $event => (_ctx.$emit('update:modelValue', $event.target.value))),
+              onFocus: _cache[1] || (_cache[1] = $event => (_ctx.isFocused = true)),
+              onBlur: _cache[2] || (_cache[2] = $event => (_ctx.isFocused = false))
+            }), null, 16 /* FULL_PROPS */, _hoisted_1))
+          : (openBlock(), createElementBlock("input", mergeProps({
+              key: 1,
+              type: _ctx.type,
+              class: _ctx.mapClasses(_ctx.style,
+                           _ctx.baseClass,
+                           _ctx.preIconClass,
+                           _ctx.postIconClass,
+                           _ctx.postIconsClass,
+                           _ctx.errorClass,
+                           _ctx.backgroundClass,
+                           _ctx.sizeClass,
+        ),
+              id: _ctx.id,
+              disabled: _ctx.disabled,
+              "aria-required": _ctx.required || null,
+              "aria-invalid": !!_ctx.error || null,
+              "aria-errormessage": (!!_ctx.error && `${_ctx.id}-error`) || null
+            }, _ctx.inputAttrs, {
+              "aria-describedby": _ctx.describedby || null,
+              value: _ctx.modelValue,
+              onInput: _cache[3] || (_cache[3] = $event => (_ctx.$emit('update:modelValue', $event.target.value))),
+              onFocus: _cache[4] || (_cache[4] = $event => (_ctx.isFocused = true)),
+              onBlur: _cache[5] || (_cache[5] = $event => (_ctx.isFocused = false))
+            }), null, 16 /* FULL_PROPS */, _hoisted_2)),
+        (_ctx.hasPreIcon)
+          ? (openBlock(), createElementBlock("span", {
+              key: 2,
+              class: normalizeClass(_ctx.style['cdr-input__pre-icon'])
+            }, [
+              renderSlot(_ctx.$slots, "pre-icon")
+            ], 2 /* CLASS */))
+          : createCommentVNode("v-if", true),
+        (_ctx.hasPostIcon)
+          ? (openBlock(), createElementBlock("span", {
+              key: 3,
+              class: normalizeClass(_ctx.style['cdr-input__post-icon'])
+            }, [
+              renderSlot(_ctx.$slots, "post-icon")
+            ], 2 /* CLASS */))
+          : createCommentVNode("v-if", true)
+      ], 2 /* CLASS */)
+    ]),
+    _: 2 /* DYNAMIC */
+  }, [
+    (_ctx.hasHelperTop)
+      ? {
+          name: "helper",
+          fn: withCtx(() => [
+            renderSlot(_ctx.$slots, "helper-text-top")
+          ])
+        }
+      : undefined,
+    (_ctx.hasInfo)
+      ? {
+          name: "info",
+          fn: withCtx(() => [
+            renderSlot(_ctx.$slots, "info")
+          ])
+        }
+      : undefined,
+    (_ctx.hasInfoAction)
+      ? {
+          name: "info-action",
+          fn: withCtx(() => [
+            renderSlot(_ctx.$slots, "info-action")
+          ])
+        }
+      : undefined,
+    (_ctx.hasHelperBottom && !_ctx.error)
+      ? {
+          name: "helper-text-bottom",
+          fn: withCtx(() => [
+            createElementVNode("span", {
+              id: `${_ctx.id}-helper-text-bottom`,
+              class: normalizeClass(_ctx.style['cdr-input__helper-text'])
+            }, [
+              renderSlot(_ctx.$slots, "helper-text-bottom")
+            ], 10 /* CLASS, PROPS */, _hoisted_3)
+          ])
+        }
+      : undefined,
+    (_ctx.error)
+      ? {
+          name: "error",
+          fn: withCtx(() => [
+            (_ctx.error)
+              ? (openBlock(), createBlock(_component_cdr_form_error, {
+                  key: 0,
+                  error: _ctx.error,
+                  role: _ctx.errorRole,
+                  id: `${_ctx.id}-error`
+                }, {
+                  error: withCtx(() => [
+                    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"]))
+}
+var CdrInput = /*#__PURE__*/_export_sfc(_sfc_main, [['render',_sfc_render]]);
+
+export { CdrInput as default };

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

@@ -0,0 +1,116 @@
+import { defineComponent, computed, useCssModule, openBlock, createElementBlock, normalizeClass, createElementVNode, createTextVNode, toDisplayString, createCommentVNode, renderSlot } from 'vue';
+import mapClasses from '../../utils/mapClasses.js';
+import _export_sfc from '../../../_virtual/plugin-vue_export-helper.js';
+
+const _sfc_main = defineComponent({
+  name: 'CdrLabelStandalone',
+  props: {
+    forId: {
+      type: String,
+      required: true,
+    },
+    label: String,
+    disabled: Boolean,
+    required: Boolean,
+    optional: Boolean,
+    hideLabel: Boolean,
+  },
+  setup(props, ctx) {
+    const baseClass = 'cdr-label-standalone';
+    const hasHelper = ctx.slots.helper;
+    const hasInfo = ctx.slots.info;
+    const hasInfoAction = ctx.slots['info-action'];
+    const disabledLabelClass = computed(() => props.disabled
+      && 'cdr-label-standalone__label--disabled');
+    const srOnlyLabelClass = computed(() => props.hideLabel
+      && 'cdr-label-standalone__label--sr-only');
+    const inputSpacingClass = computed(() => (!props.hideLabel || hasHelper || hasInfo)
+      && 'cdr-label-standalone__input--spacing');
+    return {
+      style: useCssModule(),
+      mapClasses,
+      hasHelper,
+      hasInfo,
+      hasInfoAction,
+      baseClass,
+      disabledLabelClass,
+      srOnlyLabelClass,
+      inputSpacingClass,
+    };
+  },
+});
+
+const _hoisted_1 = ["for"];
+const _hoisted_2 = {
+  key: 0,
+  "aria-label": "required"
+};
+const _hoisted_3 = { key: 0 };
+const _hoisted_4 = ["id"];
+
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return (openBlock(), createElementBlock("div", {
+    class: normalizeClass(_ctx.style[_ctx.baseClass])
+  }, [
+    createElementVNode("div", {
+      class: normalizeClass(_ctx.style['cdr-label-standalone__label-wrapper'])
+    }, [
+      createElementVNode("label", {
+        class: normalizeClass(_ctx.mapClasses(_ctx.style, 'cdr-label-standalone__label', _ctx.disabledLabelClass, _ctx.srOnlyLabelClass)),
+        for: _ctx.forId
+      }, [
+        createTextVNode(toDisplayString(_ctx.label) + toDisplayString(_ctx.required || _ctx.optional ? '' : '') + " ", 1 /* TEXT */),
+        (_ctx.required)
+          ? (openBlock(), createElementBlock("span", _hoisted_2, "*"))
+          : (_ctx.optional)
+            ? (openBlock(), createElementBlock("span", {
+                key: 1,
+                class: normalizeClass(_ctx.style['cdr-label-standalone__optional'])
+              }, "(optional)", 2 /* CLASS */))
+            : createCommentVNode("v-if", true)
+      ], 10 /* CLASS, PROPS */, _hoisted_1),
+      (!_ctx.hideLabel && _ctx.hasHelper)
+        ? (openBlock(), createElementBlock("br", _hoisted_3))
+        : createCommentVNode("v-if", true),
+      (_ctx.hasHelper)
+        ? (openBlock(), createElementBlock("span", {
+            key: 1,
+            class: normalizeClass(_ctx.style['cdr-label-standalone__helper']),
+            id: `${_ctx.forId}-helper-text-top`
+          }, [
+            renderSlot(_ctx.$slots, "helper")
+          ], 10 /* CLASS, PROPS */, _hoisted_4))
+        : createCommentVNode("v-if", true)
+    ], 2 /* CLASS */),
+    createElementVNode("div", {
+      class: normalizeClass(_ctx.mapClasses(_ctx.style, 'cdr-label-standalone__input-wrap', _ctx.inputSpacingClass))
+    }, [
+      renderSlot(_ctx.$slots, "default"),
+      (_ctx.hasInfoAction)
+        ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: normalizeClass(_ctx.style['cdr-label-standalone__info-action'])
+          }, [
+            renderSlot(_ctx.$slots, "info-action")
+          ], 2 /* CLASS */))
+        : createCommentVNode("v-if", true)
+    ], 2 /* CLASS */),
+    (_ctx.hasInfo)
+      ? (openBlock(), createElementBlock("span", {
+          key: 0,
+          class: normalizeClass(_ctx.style['cdr-label-standalone__info'])
+        }, [
+          renderSlot(_ctx.$slots, "info")
+        ], 2 /* CLASS */))
+      : createCommentVNode("v-if", true),
+    createElementVNode("div", {
+      class: normalizeClass(_ctx.style['cdr-label-standalone__post-content'])
+    }, [
+      renderSlot(_ctx.$slots, "helper-text-bottom"),
+      renderSlot(_ctx.$slots, "error")
+    ], 2 /* CLASS */)
+  ], 2 /* CLASS */))
+}
+var CdrLabelStandalone = /*#__PURE__*/_export_sfc(_sfc_main, [['render',_sfc_render]]);
+
+export { CdrLabelStandalone as default };

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

@@ -0,0 +1,60 @@
+import { defineComponent, computed, useCssModule, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot } from 'vue';
+import { buildClass } from '../../utils/buildClass.js';
+import backgroundProps from '../../props/background.js';
+import mapClasses from '../../utils/mapClasses.js';
+import _export_sfc from '../../../_virtual/plugin-vue_export-helper.js';
+
+const _sfc_main = defineComponent({
+  name: 'CdrLabelWrapper',
+  props: {
+    labelClass: String,
+    contentClass: String,
+    background: backgroundProps,
+    disabled: Boolean,
+    modifier: String,
+    size: String,
+  },
+  setup(props) {
+    const baseClass = 'cdr-label-wrapper';
+    const modifierClass = computed(() => buildClass(baseClass, props.modifier));
+    const sizeClass = computed(() => props.size && buildClass(baseClass, props.size));
+    const disabledClass = computed(() => props.disabled && buildClass(baseClass, 'disabled')); // TODO: this works right?
+    return {
+      style: useCssModule(),
+      mapClasses,
+      baseClass,
+      modifierClass,
+      sizeClass,
+      disabledClass,
+    };
+  },
+});
+
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return (openBlock(), createElementBlock("div", {
+    class: normalizeClass(_ctx.style['cdr-label-wrapper__container'])
+  }, [
+    createElementVNode("label", {
+      class: normalizeClass(_ctx.mapClasses(_ctx.style,
+                         'cdr-label-wrapper',
+                         `cdr-label-wrapper--${_ctx.background}`,
+                         _ctx.disabledClass,
+                         _ctx.modifierClass,
+                         _ctx.sizeClass,
+      ).concat(` ${_ctx.labelClass || ''}`))
+    }, [
+      renderSlot(_ctx.$slots, "input"),
+      createElementVNode("span", {
+        class: normalizeClass(_ctx.style['cdr-label-wrapper__figure'])
+      }, null, 2 /* CLASS */),
+      createElementVNode("div", {
+        class: normalizeClass(_ctx.mapClasses(_ctx.style, 'cdr-label-wrapper__content', _ctx.contentClass))
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 2 /* CLASS */)
+    ], 2 /* CLASS */)
+  ], 2 /* CLASS */))
+}
+var CdrLabelWrapper = /*#__PURE__*/_export_sfc(_sfc_main, [['render',_sfc_render]]);
+
+export { CdrLabelWrapper as default };