@rei/cedar 11.0.1 → 13.0.0-alpha.3

package/dist/lib/src/components/select/CdrSelect.mjs

@@ -1,255 +1,10 @@
-import _mergeJSXProps from '@vue/babel-helper-vue-jsx-merge-props';
-import 'core-js/modules/es.symbol.description.js';
-import clsx from 'clsx';
-import toArray from 'lodash-es/toArray';
-import validateProp from '../../utils/propValidator.mjs';
-import IconCaretDown from '../icon/comps/caret-down.mjs';
-import CdrLabelStandalone from '../labelStandalone/CdrLabelStandalone.mjs';
-import CdrFormError from '../formError/CdrFormError.mjs';
-import size from '../../mixins/size.mjs';
-import modules_b8df9d41 from './styles/CdrSelect.mjs';
+import script from './CdrSelect.vue_vue_type_script_lang.mjs';
+export { default } from './CdrSelect.vue_vue_type_script_lang.mjs';
+import { render } from './CdrSelect.vue_vue_type_template_id_039dbe2a_lang.mjs';
+import style0 from './styles/CdrSelect.module.scss_vue_type_style_index_0_src_id_039dbe2a_module_true_lang.css.mjs';
 
-var CdrSelect = {
-  name: 'CdrSelect',
-  components: {
-    IconCaretDown,
-    CdrLabelStandalone,
-    CdrFormError
-  },
-  mixins: [size],
-  inheritAttrs: false,
-  model: {
-    prop: 'value',
-    event: 'change'
-  },
-  props: {
-    /**
-     * `id` for the select that is mapped to the label `for` attribute. If one is not provided, it will be generated.
-    */
-    id: String,
+const cssModules = script.__cssModules = {};
+cssModules["$style"] = style0;
 
-    /**
-     * 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: {
-      type: [String],
-      default: 'primary',
-      validator: value => validateProp(value, ['primary', 'secondary'])
-    },
-    // Set error styling
-    error: {
-      type: [Boolean, String],
-      default: false
-    },
-
-    /**
-    * Override the error message role, default is `status`.
-    */
-    errorRole: {
-      type: String,
-      required: false,
-      default: 'status'
-    },
-    value: {
-      type: [String, Number, Boolean, Object, Array, Symbol, Function]
-    },
-    disabled: Boolean,
-    required: Boolean,
-    optional: Boolean,
-    multiple: Boolean,
-    multipleSize: Number
-  },
-
-  data() {
-    return {
-      style: modules_b8df9d41
-    };
-  },
-
-  computed: {
-    // Use given id or generate one
-    selectId() {
-      return this.id ? this.id : this._uid; // eslint-disable-line no-underscore-dangle
-    },
-
-    baseClass() {
-      return 'cdr-select';
-    },
-
-    selectClass() {
-      return {
-        [this.style['cdr-select']]: true,
-        [this.style['cdr-select__prompt']]: !this.value,
-        [this.style['cdr-select--multiple']]: this.multiple,
-        [this.style["cdr-select--".concat(this.background)]]: true,
-        [this.style['cdr-select--error']]: this.error,
-        [this.style['cdr-select--preicon']]: this.$slots['pre-icon']
-      };
-    },
-
-    caretClass() {
-      return {
-        [this.style['cdr-select__caret']]: true,
-        [this.style['cdr-select__caret--disabled']]: this.disabled
-      };
-    },
-
-    describedby() {
-      return [this.$slots['helper-text'] ? "".concat(this.selectId, "-helper-text-top") : '', 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,
-
-        change(event) {
-          if (vm.multiple) {
-            const optArr = toArray(event.target.options);
-            const selected = optArr.filter(o => o.selected === true).map(o => o.value);
-            vm.$emit('change', selected, event);
-          } else {
-            vm.$emit('change', event.target.value, event);
-          }
-        }
-
-      };
-    },
-
-    selectEl() {
-      const h = this.$createElement;
-      return h("select", _mergeJSXProps([{
-        "on": {
-          "change": $event => {
-            const $$selectedVal = Array.prototype.filter.call($event.target.options, o => o.selected).map(o => "_value" in o ? o._value : o.value);
-            this.value = $event.target.multiple ? $$selectedVal : $$selectedVal[0];
-          },
-          ...this.inputListeners
-        },
-        "class": clsx(this.sizeClass, this.selectClass),
-        "attrs": {
-          "id": this.selectId,
-          "multiple": this.multiple,
-          "size": this.multipleSize,
-          "disabled": this.disabled,
-          "aria-required": this.required,
-          "aria-invalid": !!this.error,
-          "aria-errormessage": !!this.error && "".concat(this.selectId, "-error"),
-          ...this.$attrs,
-          "aria-describedby": this.describedby || false
-        },
-        "ref": "select"
-      }, {
-        directives: [{
-          name: "model",
-          value: this.value,
-          modifiers: {}
-        }]
-      }]), [this.prompt && h("option", {
-        "class": "cdr-select__prompt",
-        "attrs": {
-          "value": "",
-          "disabled": true
-        },
-        "ref": "prompt"
-      }, [this.prompt]), this.computedOpts.map(option => h("option", {
-        "key": option.text,
-        "domProps": {
-          "value": option.value
-        }
-      }, [option.text])), this.$slots.default]);
-    },
-
-    computedOpts() {
-      const optsArr = [];
-
-      if (this.options) {
-        this.options.forEach(o => {
-          const optObj = {};
-          let text = '';
-          let val = '';
-
-          if (typeof o === 'string') {
-            text = o;
-            val = o;
-          } else {
-            const {
-              text: t,
-              value: v
-            } = o;
-            text = t;
-            val = v;
-          }
-
-          optObj.text = text;
-          optObj.value = val;
-          optsArr.push(optObj);
-        });
-      }
-
-      return optsArr;
-    }
-
-  },
-
-  render() {
-    const h = arguments[0];
-    return h("cdr-label-standalone", {
-      "attrs": {
-        "for-id": "".concat(this.selectId),
-        "label": this.label,
-        "hide-label": this.hideLabel,
-        "required": this.required,
-        "optional": this.optional,
-        "disabled": this.disabled
-      }
-    }, [this.$slots['helper-text'] && h("template", {
-      "slot": "helper"
-    }, [this.$slots['helper-text']]), this.$slots.info && h("template", {
-      "slot": "info"
-    }, [this.$slots.info]), this.$slots['info-action'] && h("template", {
-      "slot": "info-action"
-    }, [this.$slots['info-action']]), this.error && h("cdr-form-error", {
-      "attrs": {
-        "role": this.errorRole,
-        "error": this.error,
-        "id": "".concat(this.selectId, "-error")
-      },
-      "slot": "error"
-    }, [h("template", {
-      "slot": "error"
-    }, [this.$slots.error])]), h("div", {
-      "class": this.style['cdr-select-wrap']
-    }, [this.$slots['pre-icon'] && h("span", {
-      "class": this.style['cdr-select__pre-icon']
-    }, [this.$slots['pre-icon']]), this.selectEl, h("icon-caret-down", {
-      "class": this.caretClass
-    })])]);
-  }
-
-};
-
-export default CdrSelect;
+script.render = render;
+script.__file = "src/components/select/CdrSelect.vue";

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

@@ -0,0 +1,155 @@
+import { defineComponent, computed, useCssModule } from 'vue';
+import toArray from 'lodash/toArray';
+import '../icon/comps/caret-down.mjs';
+import '../labelStandalone/CdrLabelStandalone.mjs';
+import '../formError/CdrFormError.mjs';
+import sizeProps from '../../props/size.mjs';
+import backgroundProps from '../../props/background.mjs';
+import { 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';
+import script$2 from '../labelStandalone/CdrLabelStandalone.vue_vue_type_script_lang.mjs';
+import script$3 from '../formError/CdrFormError.vue_vue_type_script_lang.mjs';
+
+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) {
+    const baseClass = 'cdr-select';
+
+    const hasHelper = ctx.slots['helper-text'];
+    const hasInfo = ctx.slots.info;
+    const hasInfoAction = ctx.slots['info-action'];
+    const hasPreIcon = ctx.slots['pre-icon'];
+
+
+    const multipleClass = computed(() => props.multiple && 'cdr-select--multiple');
+
+    const promptClass = computed(() => !props.modelValue && 'cdr-select--preicon');
+    const multilineClass = computed(() => props.rows > 1 && 'cdr-select--multiline');
+    const preIconClass = computed(() => hasPreIcon && 'cdr-select--preicon');
+    const errorClass = computed(() => props.error && 'cdr-select--error');
+    const backgroundClass = computed(() => `cdr-select--${props.background}`);
+    const sizeClass = computed(() => props.size && buildClass(baseClass, props.size));
+    const caretDisabledClass = computed(() => props.disabled && 'cdr-select__caret--disabled');
+
+
+    const describedby = computed(() => {
+      return [
+        ctx.slots['helper-text'] ? `${props.id}-helper-text-top` : '',
+        ctx.attrs['aria-describedby'],
+      ].filter((x) => x).join(' ');
+    });
+
+    // TODO: refactor, would be much clearer as a 1-2 liner
+    const computedOpts = computed(() => {
+      const optsArr = [];
+      if (props.options) {
+        props.options.forEach((o) => {
+          const optObj = {};
+          let text = '';
+          let val = '';
+          if (typeof o === 'string') {
+            text = o;
+            val = o;
+          } else {
+            const { text: t, value: v } = o;
+            text = t;
+            val = v;
+          }
+          optObj.text = text;
+          optObj.value = val;
+          optsArr.push(optObj);
+        });
+      }
+      return optsArr;
+    });
+
+    const processMultiple = (options) => toArray(options)
+      .filter((o) => o.selected === true)
+      .map((o) => 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.mjs

@@ -0,0 +1,126 @@
+import { resolveComponent, openBlock, createBlock, createSlots, withCtx, createElementVNode, normalizeClass, createElementBlock, renderSlot, createCommentVNode, mergeProps, toDisplayString, Fragment, renderList, createVNode } from 'vue';
+
+const _hoisted_1 = ["id", "multiple", "size", "disabled", "aria-required", "aria-invalid", "aria-errormessage", "aria-describedby", "value"];
+const _hoisted_2 = ["value"];
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_icon_caret_down = resolveComponent("icon-caret-down");
+  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.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 && `${_ctx.id}-error`) || null
+        }, _ctx.$attrs, {
+          "aria-describedby": _ctx.describedby || null,
+          value: _ctx.modelValue,
+          onChange: _cache[0] || (_cache[0] = $event => (_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, (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(() => [
+            renderSlot(_ctx.$slots, "helper-text")
+          ])
+        }
+      : 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.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"]))
+}
+
+export { render };

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

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

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

@@ -1,73 +1,10 @@
-import clsx from 'clsx';
-import modifier from '../../mixins/modifier.mjs';
-import size from '../../mixins/size.mjs';
-import modules_6c94c1d4 from './styles/CdrTable.mjs';
+import script from './CdrTable.vue_vue_type_script_lang.mjs';
+export { default } from './CdrTable.vue_vue_type_script_lang.mjs';
+import { render } from './CdrTable.vue_vue_type_template_id_81c7b324_lang.mjs';
+import style0 from './styles/CdrTable.module.scss_vue_type_style_index_0_src_id_81c7b324_module_true_lang.css.mjs';
 
-var CdrTable = {
-  name: 'CdrTable',
-  mixins: [modifier, size],
-  props: {
-    striped: {
-      type: Boolean,
-      default: false
-    },
-    border: {
-      type: Boolean,
-      default: true
-    },
-    // can't use fullWidth mixin because its default is false :(
-    fullWidth: {
-      type: [Boolean, String],
-      default: true
-    },
-    responsive: {
-      type: Boolean,
-      default: true
-    },
-    hover: {
-      type: Boolean,
-      default: false
-    }
-  },
+const cssModules = script.__cssModules = {};
+cssModules["$style"] = style0;
 
-  data() {
-    return {
-      style: modules_6c94c1d4,
-      baseClass: 'cdr-table'
-    };
-  },
-
-  computed: {
-    tableClasses() {
-      return {
-        [this.style[this.baseClass]]: true,
-        [this.sizeClass]: true,
-        [this.modifyClassName(this.baseClass, 'striped')]: this.striped,
-        [this.modifyClassName(this.baseClass, 'hover')]: this.hover,
-        [this.modifyClassName(this.baseClass, 'border')]: this.border && !this.striped,
-        [this.responsiveModifyClass(this.baseClass, 'full-width', this.fullWidth)]: this.fullWidth
-      };
-    },
-
-    wrapperClasses() {
-      return {
-        [this.modifyClassName(this.baseClass, 'responsive')]: this.responsive
-      };
-    }
-
-  },
-
-  render() {
-    const h = arguments[0];
-    return h("div", {
-      "class": clsx(this.wrapperClasses)
-    }, [h("table", {
-      "class": clsx(this.tableClasses),
-      "attrs": { ...this.$attrs
-      }
-    }, [this.$slots.default])]);
-  }
-
-};
-
-export default CdrTable;
+script.render = render;
+script.__file = "src/components/table/CdrTable.vue";

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

@@ -0,0 +1,63 @@
+import { defineComponent, computed, useCssModule } from 'vue';
+import mapClasses from '../../utils/mapClasses.mjs';
+import { buildClass, buildBooleanClass } from '../../utils/buildClass.mjs';
+import validateProp from '../../utils/propValidator.mjs';
+
+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: (value) => validateProp(
+        value,
+        ['small', 'medium', 'large'],
+      ),
+    },
+  },
+  setup(props) {
+    const baseClass = 'cdr-table';
+    const sizeClass = computed(() => props.size && buildClass('cdr-table', props.size));
+    const stripedClass = computed(() => props.striped && buildClass('cdr-table', 'striped'));
+    const hoverClass = computed(() => props.hover && buildClass('cdr-table', 'hover'));
+    const borderClass = computed(() => props.border && !props.striped
+      && buildClass('cdr-table', 'border'));
+    const fullWidthClass = computed(() => props.fullWidth
+      && buildBooleanClass(baseClass, props.fullWidth, 'full-width'));
+    const wrapperClass = computed(() => props.responsive && buildClass('cdr-table', 'responsive'));
+
+    return {
+      style: useCssModule(),
+      mapClasses,
+      wrapperClass,
+      baseClass,
+      sizeClass,
+      stripedClass,
+      hoverClass,
+      borderClass,
+      fullWidthClass,
+    };
+  },
+});
+
+export { script as default };