@rei/cedar 11.0.1 → 13.0.0-alpha.3

package/dist/lib/src/components/toast/CdrToast.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,160 @@
+import { useSlots, useCssModule, ref, computed, watch, onUpdated, openBlock, createBlock, Transition, unref, withCtx, createElementBlock, normalizeClass, createElementVNode, renderSlot, createCommentVNode, createVNode } from 'vue';
+import validateProp from '../../utils/propValidator.mjs';
+import { buildClass } from '../../utils/buildClass.mjs';
+import '../icon/comps/x-sm.mjs';
+import '../button/CdrButton.mjs';
+import script$1 from '../button/CdrButton.vue_vue_type_script_lang.mjs';
+import script$2 from '../icon/comps/x-sm.vue_vue_type_script_lang.mjs';
+
+var script = {
+  props: {
+  type: {
+    type: String,
+    validator: (value) => validateProp(
+      value,
+      ['info', 'warning', 'success', 'error', 'default'],
+    ),
+    default: 'default',
+  },
+  open: {
+    type: Boolean,
+    default: false,
+  },
+  autoDismiss: {
+    type: Boolean,
+    default: true,
+  },
+  dismissDelay: {
+    type: Number,
+    default: 5000,
+  },
+},
+  emits: ['open', 'closed'],
+  setup(__props, { emit }) {
+
+const props = __props;
+
+const slots = useSlots();
+
+
+
+const baseClass = 'cdr-toast';
+const style = useCssModule();
+const hasIconLeft = slots['icon-left'];
+const opened = ref(null);
+const toastEl = ref(null);
+let timeout;
+let toastElement;
+
+const typeClass = computed(() => props.type && buildClass(baseClass, props.type));
+
+const openToast = (e) => {
+  if (timeout) {
+    clearTimeout(timeout);
+  } else {
+    emit('open', e);
+  }
+  opened.value = true;
+  if (props.autoDismiss && !e) {
+    closeToastWithDelay();
+  }
+};
+
+const closeToast = (e) => {
+  removeHandlers();
+  opened.value = false;
+  emit('closed', e);
+};
+
+const closeToastWithDelay = (e) => {
+  timeout = setTimeout(() => {
+    removeHandlers();
+    opened.value = false;
+    emit('closed', e);
+  }, props.dismissDelay);
+};
+
+const addHandlers = () => {
+  toastElement = toastEl.value;
+  if (toastElement) {
+    toastElement.addEventListener('mouseover', openToast);
+    toastElement.addEventListener('mouseleave', closeToastWithDelay);
+  }
+};
+
+const removeHandlers = () => {
+  if (toastElement) {
+    toastElement.removeEventListener('mouseover', openToast);
+    toastElement.removeEventListener('mouseleave', closeToastWithDelay);
+  }
+};
+
+watch(() => props.open, () => {
+  if (props.open) openToast();
+});
+
+onUpdated(() => {
+  if (props.autoDismiss) addHandlers();
+});
+
+return (_ctx, _cache) => {
+  return (openBlock(), createBlock(Transition, {
+    "enter-from-class": unref(style)['cdr-toast__transition--toast-enter-from'],
+    "enter-active-class": unref(style)['cdr-toast__transition--toast-enter-active'],
+    "leave-to-class": unref(style)['cdr-toast__transition--toast-leave-to'],
+    "leave-active-class": unref(style)['cdr-toast__transition--toast-leave-active']
+  }, {
+    default: withCtx(() => [
+      (opened.value)
+        ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: normalizeClass([unref(style)[baseClass], unref(style)[unref(typeClass)]]),
+            role: "status",
+            ref: (_value, _refs) => {
+              _refs['toastEl'] = _value;
+              toastEl.value = _value;
+            }
+          }, [
+            createElementVNode("div", {
+              class: normalizeClass([unref(style)['cdr-toast__main']])
+            }, [
+              (unref(hasIconLeft))
+                ? (openBlock(), createElementBlock("div", {
+                    key: 0,
+                    class: normalizeClass([unref(style)['cdr-toast__icon-left']])
+                  }, [
+                    renderSlot(_ctx.$slots, "icon-left")
+                  ], 2 /* CLASS */))
+                : createCommentVNode("v-if", true),
+              createElementVNode("span", {
+                class: normalizeClass([unref(style)['cdr-toast__message']])
+              }, [
+                renderSlot(_ctx.$slots, "default")
+              ], 2 /* CLASS */),
+              createVNode(unref(script$1), {
+                class: normalizeClass([unref(style)['cdr-toast__close-button']]),
+                "icon-only": "",
+                onClick: closeToast,
+                "aria-label": "Close",
+                size: "small"
+              }, {
+                default: withCtx(() => [
+                  createVNode(unref(script$2), {
+                    slot: "icon",
+                    "inherit-color": ""
+                  })
+                ]),
+                _: 1 /* STABLE */
+              }, 8 /* PROPS */, ["class"])
+            ], 2 /* CLASS */)
+          ], 2 /* CLASS */))
+        : createCommentVNode("v-if", true)
+    ]),
+    _: 3 /* FORWARDED */
+  }, 8 /* PROPS */, ["enter-from-class", "enter-active-class", "leave-to-class", "leave-active-class"]))
+}
+}
+
+};
+
+export { script as default };

package/dist/lib/src/components/toast/styles/CdrToast.module.scss_vue_type_style_index_0_src_id_7e02aa8e_module_true_lang.css.mjs

@@ -0,0 +1,3 @@
+var style0 = {"cdr-toast":"cdr-toast_13-0-0-alpha-3","cdr-toast__transition--toast-enter-from":"cdr-toast__transition--toast-enter-from_13-0-0-alpha-3","cdr-toast__transition--toast-enter-active":"cdr-toast__transition--toast-enter-active_13-0-0-alpha-3","cdr-toast__transition--toast-leave-to":"cdr-toast__transition--toast-leave-to_13-0-0-alpha-3","cdr-toast__transition--toast-leave-active":"cdr-toast__transition--toast-leave-active_13-0-0-alpha-3","cdr-toast__main":"cdr-toast__main_13-0-0-alpha-3","cdr-toast__icon-left":"cdr-toast__icon-left_13-0-0-alpha-3","cdr-toast__message":"cdr-toast__message_13-0-0-alpha-3","cdr-toast__close-button":"cdr-toast__close-button_13-0-0-alpha-3","cdr-toast--default":"cdr-toast--default_13-0-0-alpha-3","cdr-toast--info":"cdr-toast--info_13-0-0-alpha-3","cdr-toast--warning":"cdr-toast--warning_13-0-0-alpha-3","cdr-toast--success":"cdr-toast--success_13-0-0-alpha-3","cdr-toast--error":"cdr-toast--error_13-0-0-alpha-3"};
+
+export { style0 as default };

package/dist/lib/src/components/tooltip/CdrTooltip.mjs

@@ -1,121 +1,10 @@
-import clsx from 'clsx';
-import modules_b81b4c73 from './styles/CdrTooltip.mjs';
-import CdrPopup from '../popup/CdrPopup.mjs';
-import validateProp from '../../utils/propValidator.mjs';
+import script from './CdrTooltip.vue_vue_type_script_lang.mjs';
+export { default } from './CdrTooltip.vue_vue_type_script_lang.mjs';
+import { render } from './CdrTooltip.vue_vue_type_template_id_5abb534e_lang.mjs';
+import style0 from './styles/CdrTooltip.module.scss_vue_type_style_index_0_src_id_5abb534e_module_true_lang.css.mjs';
 
-var CdrTooltip = {
-  name: 'CdrTooltip',
-  components: {
-    CdrPopup
-  },
-  props: {
-    position: {
-      type: String,
-      required: false,
-      default: 'top',
-      validator: value => validateProp(value, ['top', 'bottom', 'left', 'right'])
-    },
-    autoPosition: {
-      type: Boolean,
-      default: true
-    },
-    id: {
-      type: String,
-      required: true
-    },
-    contentClass: {
-      type: String,
-      required: false
-    },
-    open: {
-      type: Boolean,
-      default: false,
-      required: false
-    }
-  },
+const cssModules = script.__cssModules = {};
+cssModules["$style"] = style0;
 
-  data() {
-    return {
-      style: modules_b81b4c73,
-      isOpen: false,
-      openHandler: undefined,
-      closeHandler: undefined,
-      timeout: undefined
-    };
-  },
-
-  watch: {
-    open() {
-      if (this.open) {
-        this.openTooltip();
-      } else {
-        this.closeTooltip();
-      }
-    }
-
-  },
-
-  mounted() {
-    this.addHandlers();
-    const trigger = this.$refs.trigger.children[0];
-    if (trigger) trigger.setAttribute('aria-describedby', this.id);
-  },
-
-  methods: {
-    openTooltip(e) {
-      if (this.timeout) clearTimeout(this.timeout);
-      this.isOpen = true;
-      this.$emit('opened', e);
-    },
-
-    closeTooltip(e) {
-      this.timeout = setTimeout(() => {
-        this.isOpen = false;
-        this.$emit('closed', e);
-      }, 250);
-    },
-
-    addHandlers() {
-      this.openHandler = this.openTooltip.bind(this);
-      this.closeHandler = this.closeTooltip.bind(this);
-      const triggerElement = this.$refs.trigger.children[0];
-      const popupElement = this.$refs.popup.$el;
-
-      if (triggerElement) {
-        triggerElement.addEventListener('mouseover', this.openHandler);
-        triggerElement.addEventListener('focus', this.openHandler);
-        triggerElement.addEventListener('mouseleave', this.closeHandler);
-        triggerElement.addEventListener('blur', this.closeHandler);
-        popupElement.addEventListener('mouseover', this.openHandler);
-        popupElement.addEventListener('mouseleave', this.closeHandler);
-      }
-    }
-
-  },
-
-  render() {
-    const h = arguments[0];
-    return h("div", {
-      "class": clsx(this.style['cdr-tooltip--wrapper'], this.$slots.trigger ? this.style['cdr-tooltip--position'] : '')
-    }, [h("div", {
-      "ref": "trigger"
-    }, [this.$slots.trigger]), h("cdr-popup", {
-      "class": this.style['cdr-tooltip'],
-      "attrs": {
-        "contentClass": this.contentClass,
-        "role": "tooltip",
-        "position": this.position,
-        "autoPosition": this.autoPosition,
-        "opened": this.isOpen,
-        "id": this.id
-      },
-      "ref": "popup",
-      "on": {
-        "closed": this.closeTooltip
-      }
-    }, [this.$slots.default])]);
-  }
-
-};
-
-export default CdrTooltip;
+script.render = render;
+script.__file = "src/components/tooltip/CdrTooltip.vue";

package/dist/lib/src/components/tooltip/CdrTooltip.vue_vue_type_script_lang.mjs

@@ -0,0 +1,97 @@
+import { defineComponent, ref, watch, onMounted, useCssModule } from 'vue';
+import mapClasses from '../../utils/mapClasses.mjs';
+import '../popup/CdrPopup.mjs';
+import validateProp from '../../utils/propValidator.mjs';
+import script$1 from '../popup/CdrPopup.vue_vue_type_script_lang.mjs';
+
+var script = defineComponent({
+  name: 'CdrTooltip',
+  components: {
+    CdrPopup: script$1,
+  },
+  props: {
+    position: {
+      type: String,
+      required: false,
+      default: 'top',
+      validator: (value) => validateProp(
+        value,
+        ['top', 'bottom', 'left', 'right'],
+      ),
+    },
+    autoPosition: {
+      type: Boolean,
+      default: true,
+    },
+    id: {
+      type: String,
+      required: true,
+    },
+    contentClass: {
+      type: String,
+      required: false,
+    },
+    open: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+  },
+  setup(props, ctx) {
+
+    const isOpen = ref(false);
+    let timeout;
+
+    const popupEl = ref(null);
+    const triggerEl = ref(null);
+
+    const hasTrigger = ctx.slots.trigger;
+// TODO: https://v3.vuejs.org/guide/migration/emits-option.html#overview
+    const openTooltip = (e) => {
+      if (timeout) clearTimeout(timeout);
+      isOpen.value = true;
+      ctx.emit('opened', e);
+    };
+    const closeTooltip = (e) => {
+      timeout = setTimeout(() => {
+        isOpen.value = false;
+        ctx.emit('closed', e);
+      }, 250);
+    };
+    const addHandlers = () => {
+      const triggerElement = triggerEl.value.children[0];
+      popupEl.value;
+      if (triggerElement) {
+        triggerElement.addEventListener('mouseover', openTooltip);
+        triggerElement.addEventListener('focus', openTooltip);
+
+        triggerElement.addEventListener('mouseleave', closeTooltip);
+        triggerElement.addEventListener('blur', closeTooltip);
+
+        // popupElement.addEventListener('mouseover', openTooltip);
+        // popupElement.addEventListener('mouseleave', closeTooltip);
+      }
+    };
+
+    watch(() => props.open, () => (props.open ? openTooltip() : closeTooltip()));
+
+    onMounted(() => {
+      addHandlers();
+      const trigger = triggerEl.value.children[0];
+      if (trigger) trigger.setAttribute('aria-describedby', props.id);
+    });
+
+    return {
+      style: useCssModule(),
+      hasTrigger,
+      isOpen,
+      mapClasses,
+      closeTooltip,
+      openTooltip,
+      popupEl,
+      triggerEl,
+    };
+  },
+});
+
+export { script as default };

package/dist/lib/src/components/tooltip/CdrTooltip.vue_vue_type_template_id_5abb534e_lang.mjs

@@ -0,0 +1,34 @@
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, createVNode, withCtx } from 'vue';
+
+const _hoisted_1 = { ref: "triggerEl" };
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_cdr_popup = resolveComponent("cdr-popup");
+
+  return (openBlock(), createElementBlock("div", {
+    class: normalizeClass(_ctx.mapClasses(
+    _ctx.style, 'cdr-tooltip--wrapper', _ctx.hasTrigger && 'cdr-tooltip--position'
+  ))
+  }, [
+    createElementVNode("div", _hoisted_1, [
+      renderSlot(_ctx.$slots, "trigger")
+    ], 512 /* NEED_PATCH */),
+    createVNode(_component_cdr_popup, {
+      "content-class": _ctx.contentClass,
+      role: "tooltip",
+      ref: "popupEl",
+      position: _ctx.position,
+      "auto-position": _ctx.autoPosition,
+      opened: _ctx.isOpen,
+      id: _ctx.id,
+      onClosed: _ctx.closeTooltip
+    }, {
+      default: withCtx(() => [
+        renderSlot(_ctx.$slots, "default")
+      ]),
+      _: 3 /* FORWARDED */
+    }, 8 /* PROPS */, ["content-class", "position", "auto-position", "opened", "id", "onClosed"])
+  ], 2 /* CLASS */))
+}
+
+export { render };

package/dist/lib/src/components/tooltip/styles/CdrTooltip.module.scss_vue_type_style_index_0_src_id_5abb534e_module_true_lang.css.mjs

@@ -0,0 +1,3 @@
+var style0 = {"cdr-tooltip--position":"cdr-tooltip--position_13-0-0-alpha-3","cdr-tooltip--wrapper":"cdr-tooltip--wrapper_13-0-0-alpha-3","cdr-popup--closed":"cdr-popup--closed_13-0-0-alpha-3","cdr-popup__content":"cdr-popup__content_13-0-0-alpha-3","cdr-popup--bottom":"cdr-popup--bottom_13-0-0-alpha-3","cdr-popup__arrow":"cdr-popup__arrow_13-0-0-alpha-3","cdr-popup--top":"cdr-popup--top_13-0-0-alpha-3","cdr-popup--right":"cdr-popup--right_13-0-0-alpha-3","cdr-popup--left":"cdr-popup--left_13-0-0-alpha-3"};
+
+export { style0 as default };