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

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

@@ -0,0 +1,277 @@
+import { defineComponent, computed, useCssModule, resolveComponent, openBlock, createBlock, createSlots, withCtx, createElementVNode, normalizeClass, createElementBlock, renderSlot, createCommentVNode, mergeProps, toDisplayString, Fragment, renderList, createVNode } from 'vue';
+import toArray from 'lodash/toArray';
+import IconCaretDown from '../icon/comps/caret-down.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: 'CdrSelect',
+  components: {
+    IconCaretDown,
+    CdrLabelStandalone,
+    CdrFormError,
+  },
+  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,
+    };
+  },
+});
+
+const _hoisted_1 = ["id", "multiple", "size", "disabled", "aria-required", "aria-invalid", "aria-errormessage", "aria-describedby", "value"];
+const _hoisted_2 = ["value"];
+
+function _sfc_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"]))
+}
+var CdrSelect = /*#__PURE__*/_export_sfc(_sfc_main, [['render',_sfc_render]]);
+
+export { CdrSelect as default };

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

@@ -0,0 +1,84 @@
+import { defineComponent, computed, useCssModule, openBlock, createElementBlock, normalizeClass, createElementVNode, mergeProps, renderSlot } from 'vue';
+import mapClasses from '../../utils/mapClasses.js';
+import { buildClass, buildBooleanClass } 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: '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,
+    };
+  },
+});
+
+function _sfc_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 */))
+}
+var CdrTable = /*#__PURE__*/_export_sfc(_sfc_main, [['render',_sfc_render]]);
+
+export { CdrTable as default };

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

@@ -0,0 +1,117 @@
+import { defineComponent, ref, computed, inject, onBeforeMount, useCssModule, openBlock, createElementBlock, normalizeClass, withKeys, withModifiers, renderSlot } from 'vue';
+import { buildClass } from '../../utils/buildClass.js';
+import validateProp from '../../utils/propValidator.js';
+import mapClasses from '../../utils/mapClasses.js';
+import _export_sfc from '../../../_virtual/plugin-vue_export-helper.js';
+
+const _sfc_main = 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: (value) => validateProp(value, ['centered', 'compact', 'full-width', 'no-border', '']),
+    },
+  },
+
+  setup(props, ctx) {
+    const baseClass = 'cdr-tab-panel';
+    const active = ref(false);
+    const hidden = ref(true);
+    const animationDirection = ref(null);
+
+    const modifierClass = computed(() => buildClass(baseClass, props.modifier));
+
+    const 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);
+    };
+    const setAnimationDirection = (direction) => {
+      // TODO Use provide/inject here?
+      // console.log(direction, 'YOOOOOO')
+      animationDirection.value = direction;
+    };
+    const handleUpArrowNav = () => {
+      // YOU WAHT NOW?!?!?!
+      // TODO: emit event for tabPanel to deal with????
+      ctx.emit('tab-arrow-up');
+      // $parent.setFocusToActiveTabHeader();
+    };
+    const animationEnd = (event) => {
+      if (event.animationName.split('-')[0] === 'exit') {
+        hidden.value = true;
+        animationDirection.value = null;
+      }
+    };
+
+    const tabs = inject('tabs');
+
+    onBeforeMount(() => {
+      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,
+    };
+  },
+});
+
+const _hoisted_1 = ["aria-hidden", "aria-labelledby", "hidden", "id"];
+
+function _sfc_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-${_ctx.animationDirection}`)),
+    hidden: _ctx.hidden,
+    id: _ctx.id,
+    tabindex: "0",
+    role: "tabpanel",
+    onKeydown: _cache[0] || (_cache[0] = withKeys(withModifiers((...args) => (_ctx.handleUpArrowNav && _ctx.handleUpArrowNav(...args)), ["prevent"]), ["up"])),
+    onAnimationend: _cache[1] || (_cache[1] = (...args) => (_ctx.animationEnd && _ctx.animationEnd(...args))),
+    key: _ctx.name
+  }, [
+    renderSlot(_ctx.$slots, "default")
+  ], 42 /* CLASS, PROPS, HYDRATE_EVENTS */, _hoisted_1))
+}
+var CdrTabPanel = /*#__PURE__*/_export_sfc(_sfc_main, [['render',_sfc_render]]);
+
+export { CdrTabPanel as default };