@rei/cedar 11.0.1 → 13.0.0-alpha.3

package/dist/lib/src/components/banner/CdrBanner.mjs

@@ -1,61 +1,9 @@
-import clsx from 'clsx';
-import validateProp from '../../utils/propValidator.mjs';
-import BuildClass from '../../mixins/buildClass.mjs';
-import modules_0306f71a from './styles/CdrBanner.mjs';
+import script from './CdrBanner.vue_vue_type_script_setup_true_lang.mjs';
+export { default } from './CdrBanner.vue_vue_type_script_setup_true_lang.mjs';
+import style0 from './styles/CdrBanner.module.scss_vue_type_style_index_0_src_id_0217b2ec_module_true_lang.css.mjs';
 
-var CdrBanner = {
-  name: 'CdrBanner',
-  mixins: [BuildClass],
-  props: {
-    type: {
-      type: String,
-      validator: value => validateProp(value, ['info', 'warning', 'success', 'error', 'default']),
-      default: 'default'
-    }
-  },
+const cssModules = script.__cssModules = {};
+cssModules["$style"] = style0;
 
-  data() {
-    return {
-      style: modules_0306f71a
-    };
-  },
 
-  computed: {
-    baseClass() {
-      return 'cdr-banner';
-    },
-
-    typeClass() {
-      return this.modifyClassName(this.baseClass, this.type);
-    },
-
-    prominenceClass() {
-      return this.$slots['message-body'] ? this.modifyClassName("".concat(this.baseClass, "__wrapper"), 'prominence') : undefined;
-    }
-
-  },
-
-  render() {
-    const h = arguments[0];
-    return h("div", {
-      "class": clsx(this.style[this.baseClass], this.typeClass)
-    }, [h("div", {
-      "class": clsx(this.style['cdr-banner__wrapper'], this.prominenceClass)
-    }, [h("div", {
-      "class": clsx(this.style['cdr-banner__main'])
-    }, [this.$slots['icon-left'] && h("div", {
-      "class": clsx(this.style['cdr-banner__icon-left'])
-    }, [this.$slots['icon-left']]), h("span", {
-      "class": this.style['cdr-banner__message']
-    }, [this.$slots.default]), this.$slots['icon-right'] && h("div", {
-      "class": this.style['cdr-banner__icon-right']
-    }, [this.$slots['icon-right']])]), this.$slots['message-body'] && h("div", {
-      "class": this.style['cdr-banner__message-body']
-    }, [this.$slots['message-body']])]), this.$slots['info-action'] && h("div", {
-      "class": this.style['cdr-banner__info-action']
-    }, [this.$slots['info-action']])]);
-  }
-
-};
-
-export default CdrBanner;
+script.__file = "src/components/banner/CdrBanner.vue";

package/dist/lib/src/components/banner/CdrBanner.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,89 @@
+import { useSlots, useCssModule, computed, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, renderSlot, createCommentVNode } from 'vue';
+import validateProp from '../../utils/propValidator.mjs';
+import { buildClass } from '../../utils/buildClass.mjs';
+
+var script = {
+  props: {
+  type: {
+    type: String,
+    validator: (value) => validateProp(
+      value,
+      ['info', 'warning', 'success', 'error', 'default'],
+    ),
+    default: 'default',
+  },
+},
+  setup(__props) {
+
+const props = __props;
+
+const slots = useSlots();
+
+const baseClass = 'cdr-banner';
+const style = useCssModule();
+const typeClass = computed(() => props.type && buildClass(baseClass, props.type));
+const prominenceClass = computed(() => (slots['message-body']
+  ? buildClass(`${baseClass}__wrapper`, 'prominence')
+  : undefined));
+const hasIconLeft = slots['icon-left'];
+const hasIconRight = slots['icon-right'];
+const hasMessageBody = slots['message-body'];
+const hasInfoAction = slots['info-action'];
+
+
+return (_ctx, _cache) => {
+  return (openBlock(), createElementBlock("div", {
+    class: normalizeClass([unref(style)[baseClass], unref(style)[unref(typeClass)]])
+  }, [
+    createElementVNode("div", {
+      class: normalizeClass([unref(style)['cdr-banner__wrapper'], unref(style)[unref(prominenceClass)]])
+    }, [
+      createElementVNode("div", {
+        class: normalizeClass([unref(style)['cdr-banner__main']])
+      }, [
+        (unref(hasIconLeft))
+          ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              class: normalizeClass([unref(style)['cdr-banner__icon-left']])
+            }, [
+              renderSlot(_ctx.$slots, "icon-left")
+            ], 2 /* CLASS */))
+          : createCommentVNode("v-if", true),
+        createElementVNode("span", {
+          class: normalizeClass([unref(style)['cdr-banner__message']])
+        }, [
+          renderSlot(_ctx.$slots, "default")
+        ], 2 /* CLASS */),
+        (unref(hasIconRight))
+          ? (openBlock(), createElementBlock("div", {
+              key: 1,
+              class: normalizeClass([unref(style)['cdr-banner__icon-right']])
+            }, [
+              renderSlot(_ctx.$slots, "icon-right")
+            ], 2 /* CLASS */))
+          : createCommentVNode("v-if", true)
+      ], 2 /* CLASS */),
+      (unref(hasMessageBody))
+        ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: normalizeClass([unref(style)['cdr-banner__message-body']])
+          }, [
+            renderSlot(_ctx.$slots, "message-body")
+          ], 2 /* CLASS */))
+        : createCommentVNode("v-if", true)
+    ], 2 /* CLASS */),
+    (unref(hasInfoAction))
+      ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: normalizeClass([unref(style)['cdr-banner__info-action']])
+        }, [
+          renderSlot(_ctx.$slots, "info-action")
+        ], 2 /* CLASS */))
+      : createCommentVNode("v-if", true)
+  ], 2 /* CLASS */))
+}
+}
+
+};
+
+export { script as default };

package/dist/lib/src/components/banner/styles/CdrBanner.module.scss_vue_type_style_index_0_src_id_0217b2ec_module_true_lang.css.mjs

@@ -0,0 +1,3 @@
+var style0 = {"cdr-banner":"cdr-banner_13-0-0-alpha-3","cdr-banner__wrapper--prominence":"cdr-banner__wrapper--prominence_13-0-0-alpha-3","cdr-banner__main":"cdr-banner__main_13-0-0-alpha-3","cdr-banner__icon-left":"cdr-banner__icon-left_13-0-0-alpha-3","cdr-banner__message":"cdr-banner__message_13-0-0-alpha-3","cdr-banner__message-body":"cdr-banner__message-body_13-0-0-alpha-3","cdr-banner__icon-right":"cdr-banner__icon-right_13-0-0-alpha-3","cdr-banner__info-action":"cdr-banner__info-action_13-0-0-alpha-3","cdr-banner--default":"cdr-banner--default_13-0-0-alpha-3","cdr-banner__wrapper":"cdr-banner__wrapper_13-0-0-alpha-3","cdr-banner--info":"cdr-banner--info_13-0-0-alpha-3","cdr-banner--warning":"cdr-banner--warning_13-0-0-alpha-3","cdr-banner--success":"cdr-banner--success_13-0-0-alpha-3","cdr-banner--error":"cdr-banner--error_13-0-0-alpha-3"};
+
+export { style0 as default };

package/dist/lib/src/components/breadcrumb/CdrBreadcrumb.mjs

@@ -1,158 +1,10 @@
-import 'core-js/modules/es.string.replace.js';
-import clsx from 'clsx';
-import modules_4b26c135 from './styles/CdrBreadcrumb.mjs';
+import script from './CdrBreadcrumb.vue_vue_type_script_lang.mjs';
+export { default } from './CdrBreadcrumb.vue_vue_type_script_lang.mjs';
+import { render } from './CdrBreadcrumb.vue_vue_type_template_id_71430df8_lang.mjs';
+import style0 from './styles/CdrBreadcrumb.module.scss_vue_type_style_index_0_src_id_71430df8_module_true_lang.css.mjs';
 
-var CdrBreadcrumb = {
-  name: 'CdrBreadcrumb',
-  props: {
-    /**
-     * Required. List of source breadcrumb property objects
-     *
-     * {
-     *   displayText: Breadcrumb Display Text
-     *   url: location breadcrumb should navigate on click
-     * }
-     */
-    items: {
-      type: Array,
-      default: () => [],
-      validator: value => {
-        if (value.length && value.length > 0) {
-          for (let i = 0; i < value.length; i += 1) {
-            if (!(typeof value[i].item === 'object')) {
-              console.error('Breadcrumb items array missing item key at index ', i); // eslint-disable-line no-console
+const cssModules = script.__cssModules = {};
+cssModules["$style"] = style0;
 
-              return false;
-            }
-
-            if (!Object.hasOwnProperty.call(value[i].item, 'name')) {
-              console.error('Breadcrumb items array is missing item.name value at index ', i); // eslint-disable-line no-console
-
-              return false;
-            }
-          }
-        }
-
-        return true;
-      }
-    },
-
-    /**
-     * Flag to track container width threshold exceeded
-     */
-    truncationEnabled: {
-      type: Boolean,
-      default: true
-    }
-  },
-
-  data() {
-    return {
-      truncate: this.truncationEnabled && this.items.length > 2,
-      style: modules_4b26c135,
-      componentID: Math.random().toString(36).substr(2, 9)
-    };
-  },
-
-  computed: {
-    baseClass() {
-      return 'cdr-breadcrumb';
-    },
-
-    ellipsis() {
-      const h = this.$createElement;
-      return this.truncate ? h("li", {
-        "class": this.style['cdr-breadcrumb__item']
-      }, [h("button", {
-        "on": {
-          "click": this.handleEllipsisClick
-        },
-        "ref": "ellipse",
-        "attrs": {
-          "aria-expanded": "false",
-          "aria-controls": "".concat(this.componentID, "List"),
-          "aria-label": "show ".concat(this.items.length - 2, " more navigation level").concat(this.items.length - 2 > 1 ? 's' : '')
-        },
-        "class": this.style['cdr-breadcrumb__ellipses']
-      }, [h("span", {
-        "class": this.style['cdr-breadcrumb__ellipses-icon'],
-        "attrs": {
-          "aria-hidden": "true"
-        }
-      }, [". . ."])]), h("span", {
-        "class": this.style['cdr-breadcrumb__delimiter'],
-        "attrs": {
-          "aria-hidden": "true"
-        }
-      }, ["/"])]) : '';
-    },
-
-    listItems() {
-      const h = this.$createElement;
-      return this.items.map((breadcrumb, index) => {
-        const delimiter = index < this.items.length - 1 ? h("span", {
-          "class": this.style['cdr-breadcrumb__delimiter'],
-          "attrs": {
-            "aria-hidden": "true"
-          }
-        }, ["/"]) : '';
-        return h("li", {
-          "class": clsx(this.style['cdr-breadcrumb__item']),
-          "key": breadcrumb.item.id || breadcrumb.item.name.replace(/ /g, '-').toLowerCase(),
-          "directives": [{
-            name: "show",
-            value: !this.truncate || index >= this.items.length - 2
-          }]
-        }, [this.$scopedSlots.link ? this.$scopedSlots.link({
-          class: this.style['cdr-breadcrumb__link'],
-          href: breadcrumb.item.url,
-          content: breadcrumb.item.name
-        }) : h("a", {
-          "class": this.style['cdr-breadcrumb__link'],
-          "attrs": {
-            "href": breadcrumb.item.url
-          },
-          "on": {
-            "click": e => this.$emit('navigate', breadcrumb, e)
-          }
-        }, [breadcrumb.item.name]), delimiter]);
-      });
-    }
-
-  },
-  watch: {
-    items() {
-      this.truncate = this.truncationEnabled && this.items.length > 2;
-    }
-
-  },
-  methods: {
-    handleEllipsisClick() {
-      this.truncate = false;
-      setTimeout(() => {
-        this.$el.querySelector('li *').focus();
-      }, 1);
-    }
-
-  },
-
-  render() {
-    const h = arguments[0];
-    return h("nav", {
-      "ref": "container",
-      "class": clsx(this.style[this.baseClass], this.modifierClass),
-      "attrs": {
-        "aria-label": "breadcrumbs"
-      }
-    }, [h("ol", {
-      "attrs": {
-        "id": "".concat(this.componentID, "List")
-      },
-      "ref": "cdrBreadcrumbList",
-      "class": this.style['cdr-breadcrumb__list']
-    }, [this.ellipsis, this.listItems])]);
-  }
-
-};
-
-export default CdrBreadcrumb;
+script.render = render;
+script.__file = "src/components/breadcrumb/CdrBreadcrumb.vue";

package/dist/lib/src/components/breadcrumb/CdrBreadcrumb.vue_vue_type_script_lang.mjs

@@ -0,0 +1,68 @@
+import { defineComponent, ref, watch, computed, useCssModule } from 'vue';
+
+var script = defineComponent({
+  name: 'CdrBreadcrumb',
+  props: {
+    items: {
+      type: Array,
+      default: () => [],
+      validator: (value) => {
+        if (value.length && value.length > 0) {
+          for (let i = 0; i < value.length; i += 1) {
+            if (!(typeof value[i].item === 'object')) {
+              console.error('Breadcrumb items array missing item key at index ', i); // eslint-disable-line no-console
+              return false;
+            }
+            if (!Object.hasOwnProperty.call(value[i].item, 'name')) {
+              console.error('Breadcrumb items array is missing item.name value at index ', i); // eslint-disable-line no-console
+              return false;
+            }
+          }
+        }
+        return true;
+      },
+    },
+    /**
+     * Flag to track container width threshold exceeded
+     */
+    truncationEnabled: {
+      type: Boolean,
+      default: true,
+    },
+    id: {
+      type: String,
+      required: true,
+    },
+  },
+  setup(props) {
+    const truncate = ref(props.truncationEnabled && props.items.length > 2);
+
+    watch(() => props.items, () => {
+      truncate.value = props.truncationEnabled && props.items.length > 2;
+    });
+
+    const itemListEl = ref(null);
+    const handleEllipsisClick = () => {
+      truncate.value = false;
+      setTimeout(() => {
+        // TODO: ref does not seem to update children here?
+        console.log(itemListEl.value.querySelector('.cdr-breadcrumb__item'));
+        itemListEl.value.querySelector('.cdr-breadcrumb__item').focus();
+      }, 1000);
+    };
+    const ellipsisLabel = computed(() => {
+      const s = (props.items.length - 2) > 1 ? 's' : '';
+      return `show ${props.items.length - 2} more navigation level${s}`;
+    });
+
+    return {
+      style: useCssModule(),
+      truncate,
+      handleEllipsisClick,
+      itemListEl,
+      ellipsisLabel,
+    };
+  },
+});
+
+export { script as default };

package/dist/lib/src/components/breadcrumb/CdrBreadcrumb.vue_vue_type_template_id_71430df8_lang.mjs

@@ -0,0 +1,73 @@
+import { openBlock, createElementBlock, normalizeClass, createElementVNode, createCommentVNode, Fragment, renderList, withDirectives, renderSlot, toDisplayString, vShow } from 'vue';
+
+const _hoisted_1 = ["id"];
+const _hoisted_2 = ["id"];
+const _hoisted_3 = ["aria-controls", "aria-label"];
+const _hoisted_4 = ["href", "onClick"];
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return (openBlock(), createElementBlock("nav", {
+    class: normalizeClass(_ctx.style['cdr-breadcrumb']),
+    id: _ctx.id,
+    "aria-label": "breadcrumbs"
+  }, [
+    createElementVNode("ol", {
+      id: `${_ctx.id}List`,
+      class: normalizeClass(_ctx.style['cdr-breadcrumb__list']),
+      ref: "itemListEl"
+    }, [
+      (_ctx.truncate)
+        ? (openBlock(), createElementBlock("li", {
+            key: 0,
+            class: normalizeClass(_ctx.style['cdr-breadcrumb__item'])
+          }, [
+            createElementVNode("button", {
+              onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.handleEllipsisClick && _ctx.handleEllipsisClick(...args))),
+              "aria-expanded": "false",
+              class: normalizeClass(_ctx.style['cdr-breadcrumb__ellipses']),
+              "aria-controls": `${_ctx.id}List`,
+              "aria-label": _ctx.ellipsisLabel
+            }, [
+              createElementVNode("span", {
+                class: normalizeClass(_ctx.style['cdr-breadcrumb__ellipses-icon']),
+                "aria-hidden": "true"
+              }, " . . . ", 2 /* CLASS */)
+            ], 10 /* CLASS, PROPS */, _hoisted_3),
+            createElementVNode("span", {
+              class: normalizeClass(_ctx.style['cdr-breadcrumb__delimiter']),
+              "aria-hidden": "true"
+            }, " / ", 2 /* CLASS */)
+          ], 2 /* CLASS */))
+        : createCommentVNode("v-if", true),
+      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.items, (breadcrumb, index) => {
+        return withDirectives((openBlock(), createElementBlock("li", {
+          class: normalizeClass(_ctx.style['cdr-breadcrumb__item']),
+          key: breadcrumb.item.id || breadcrumb.item.name.replace(/ /g, '-').toLowerCase()
+        }, [
+          renderSlot(_ctx.$slots, "link", {
+            class: normalizeClass(_ctx.style['cdr-breadcrumb__link']),
+            href: breadcrumb.item.url,
+            content: breadcrumb.item.name
+          }, () => [
+            createElementVNode("a", {
+              class: normalizeClass(_ctx.style['cdr-breadcrumb__link']),
+              href: breadcrumb.item.url,
+              onClick: $event => (_ctx.$emit('navigate', breadcrumb, _ctx.e))
+            }, toDisplayString(breadcrumb.item.name), 11 /* TEXT, CLASS, PROPS */, _hoisted_4)
+          ]),
+          (index < _ctx.items.length - 1)
+            ? (openBlock(), createElementBlock("span", {
+                key: 0,
+                class: normalizeClass(_ctx.style['cdr-breadcrumb__delimiter']),
+                "aria-hidden": "true"
+              }, " / ", 2 /* CLASS */))
+            : createCommentVNode("v-if", true)
+        ], 2 /* CLASS */)), [
+          [vShow, !_ctx.truncate || (index >= _ctx.items.length - 2)]
+        ])
+      }), 128 /* KEYED_FRAGMENT */))
+    ], 10 /* CLASS, PROPS */, _hoisted_2)
+  ], 10 /* CLASS, PROPS */, _hoisted_1))
+}
+
+export { render };

package/dist/lib/src/components/breadcrumb/styles/CdrBreadcrumb.module.scss_vue_type_style_index_0_src_id_71430df8_module_true_lang.css.mjs

@@ -0,0 +1,3 @@
+var style0 = {"cdr-breadcrumb":"cdr-breadcrumb_13-0-0-alpha-3","cdr-breadcrumb__list":"cdr-breadcrumb__list_13-0-0-alpha-3","cdr-breadcrumb__item":"cdr-breadcrumb__item_13-0-0-alpha-3","cdr-breadcrumb__link":"cdr-breadcrumb__link_13-0-0-alpha-3","cdr-breadcrumb__delimiter":"cdr-breadcrumb__delimiter_13-0-0-alpha-3","cdr-breadcrumb__ellipses":"cdr-breadcrumb__ellipses_13-0-0-alpha-3","cdr-breadcrumb__ellipses-icon":"cdr-breadcrumb__ellipses-icon_13-0-0-alpha-3"};
+
+export { style0 as default };

package/dist/lib/src/components/button/CdrButton.mjs

@@ -1,118 +1,10 @@
-import clsx from 'clsx';
-import modifier from '../../mixins/modifier.mjs';
-import fullWidth from '../../mixins/fullWidth.mjs';
-import size from '../../mixins/size.mjs';
-import modules_1869af45 from './styles/CdrButton.mjs';
+import script from './CdrButton.vue_vue_type_script_lang.mjs';
+export { default } from './CdrButton.vue_vue_type_script_lang.mjs';
+import { render } from './CdrButton.vue_vue_type_template_id_4acc8116_lang.mjs';
+import style0 from './styles/CdrButton.module.scss_vue_type_style_index_0_src_id_4acc8116_module_true_lang.css.mjs';
 
-var CdrButton = {
-  name: 'CdrButton',
-  mixins: [modifier, size, fullWidth],
-  props: {
-    /**
-     * Controls render as button or anchor. {button, a}
-     */
-    tag: {
-      type: String,
-      default: 'button',
-      validator: value => ['button', 'a'].indexOf(value) >= 0 || false
-    },
+const cssModules = script.__cssModules = {};
+cssModules["$style"] = style0;
 
-    /**
-     * Sets the button type. {button, submit, reset}
-     */
-    type: {
-      type: String,
-      default: 'button',
-      validator: value => ['button', 'submit', 'reset'].indexOf(value) >= 0 || false
-    },
-
-    /**
-     * Increases box-shadow around button to enhance contrast against background
-     */
-    elevated: {
-      type: Boolean,
-      default: false
-    },
-
-    /**
-     * Renders an icon-only button. Default slot is disabled. Overrides size and responsiveSize props.
-     */
-    iconOnly: {
-      type: Boolean,
-      default: false
-    },
-
-    /**
-     * Used in conjunction with `icon-only`, renders a border and background around the icon button
-     */
-    withBackground: {
-      type: Boolean,
-      default: false
-    }
-  },
-
-  data() {
-    return {
-      style: modules_1869af45
-    };
-  },
-
-  computed: {
-    baseClass() {
-      return 'cdr-button';
-    },
-
-    defaultClass() {
-      return this.modifier ? undefined : this.modifyClassName(this.baseClass, 'primary');
-    },
-
-    buttonSizeClass() {
-      return !this.iconOnly ? this.sizeClass : this.style["cdr-button--icon-only-".concat(this.size)];
-    },
-
-    iconClass() {
-      const classes = [];
-
-      if ((this.$slots['icon-left'] || this.$slots.icon) && this.$slots.default) {
-        /* only add class for buttons with text + icon on left */
-        classes.push(this.modifyClassName(this.baseClass, 'has-icon-left'));
-      }
-
-      if (this.$slots['icon-right'] && this.$slots.default) {
-        /* only add class for buttons with text + icon on right */
-        classes.push(this.modifyClassName(this.baseClass, 'has-icon-right'));
-      }
-
-      if (this.elevated) {
-        classes.push(this.modifyClassName(this.baseClass, 'elevated'));
-      }
-
-      if (this.iconOnly) {
-        classes.push(this.modifyClassName(this.baseClass, 'icon-only'));
-      }
-
-      if (this.iconOnly && this.withBackground) {
-        classes.push(this.modifyClassName(this.baseClass, 'with-background'));
-      }
-
-      return classes.join(' ');
-    }
-
-  },
-
-  render() {
-    const h = arguments[0];
-    const Component = this.tag;
-    return h(Component, {
-      "class": clsx(this.style[this.baseClass], this.defaultClass, this.modifierClass, this.buttonSizeClass, this.fullWidthClass, this.iconClass),
-      "attrs": {
-        "type": this.tag === 'button' ? this.type : null
-      },
-      "on": { ...this.$listeners
-      }
-    }, [this.$slots['icon-left'] || this.$slots.icon, this.$slots.default, this.$slots['icon-right']]);
-  }
-
-};
-
-export default CdrButton;
+script.render = render;
+script.__file = "src/components/button/CdrButton.vue";