@cling-se/widget 0.9.2 → 0.9.3

package/dist/CDropdownItem-05d84f95.js

@@ -0,0 +1,610 @@
+import { V as N, a8 as P, i as T, a9 as R, f as L, n as E } from "./main-2d9b8259.js";
+class F {
+  constructor({ defaults: e = { width: 800, height: 600 }, delay: i = 50 } = {}) {
+    this._width = e.width, this._height = e.height, this._delay = i, this._timer = null, this._initialized = !1, this._handler = this._handleResize.bind(this);
+  }
+  _handleResize() {
+    clearTimeout(this._timer), this._timer = setTimeout(() => {
+      this.update();
+    }, this._delay);
+  }
+  get width() {
+    return this._width;
+  }
+  get height() {
+    return this._height;
+  }
+  get initialized() {
+    return this._initialized;
+  }
+  update() {
+    this._width = window.innerWidth, this._height = window.innerHeight;
+  }
+  setDelay(e) {
+    this._delay = e;
+  }
+  init() {
+    return typeof window > "u" ? this : this.initialized ? this : (this.update(), window.addEventListener("resize", this._handler, { passive: !0 }), this._initialized = !0, this);
+  }
+  destroy() {
+    return this.initialized ? (window.removeEventListener("resize", this._handler, { passive: !0 }), this._initialized = !1, this) : this;
+  }
+}
+const H = new F().init(), g = new N({ data: { windowSize: H } }), j = {
+  computed: {
+    windowWidth() {
+      return g.windowSize.width;
+    },
+    windowHeight() {
+      return g.windowSize.height;
+    },
+    mq() {
+      const { width: t } = g.windowSize, e = {
+        sm: 576,
+        md: 1024,
+        lg: 1280,
+        xl: 1 / 0
+      };
+      let i = "lg";
+      return Object.keys(e).reverse().forEach((a) => {
+        t <= e[a] && (i = a);
+      }), i;
+    }
+  }
+};
+var W = P, q = function() {
+  return W.Date.now();
+}, K = q, V = /\s/;
+function Y(t) {
+  for (var e = t.length; e-- && V.test(t.charAt(e)); )
+    ;
+  return e;
+}
+var U = Y, X = U, G = /^\s+/;
+function J(t) {
+  return t && t.slice(0, X(t) + 1).replace(G, "");
+}
+var Q = J, Z = Q, I = T, ee = R, O = 0 / 0, te = /^[-+]0x[0-9a-f]+$/i, ie = /^0b[01]+$/i, se = /^0o[0-7]+$/i, ne = parseInt;
+function oe(t) {
+  if (typeof t == "number")
+    return t;
+  if (ee(t))
+    return O;
+  if (I(t)) {
+    var e = typeof t.valueOf == "function" ? t.valueOf() : t;
+    t = I(e) ? e + "" : e;
+  }
+  if (typeof t != "string")
+    return t === 0 ? t : +t;
+  t = Z(t);
+  var i = ie.test(t);
+  return i || se.test(t) ? ne(t.slice(2), i ? 2 : 8) : te.test(t) ? O : +t;
+}
+var ae = oe, re = T, w = K, A = ae, le = "Expected a function", de = Math.max, ce = Math.min;
+function ue(t, e, i) {
+  var a, s, d, r, n, l, u = 0, C = !1, h = !1, v = !0;
+  if (typeof t != "function")
+    throw new TypeError(le);
+  e = A(e) || 0, re(i) && (C = !!i.leading, h = "maxWait" in i, d = h ? de(A(i.maxWait) || 0, e) : d, v = "trailing" in i ? !!i.trailing : v);
+  function b(o) {
+    var c = a, f = s;
+    return a = s = void 0, u = o, r = t.apply(f, c), r;
+  }
+  function S(o) {
+    return u = o, n = setTimeout(p, e), C ? b(o) : r;
+  }
+  function M(o) {
+    var c = o - l, f = o - u, B = e - c;
+    return h ? ce(B, d - f) : B;
+  }
+  function $(o) {
+    var c = o - l, f = o - u;
+    return l === void 0 || c >= e || c < 0 || h && f >= d;
+  }
+  function p() {
+    var o = w();
+    if ($(o))
+      return k(o);
+    n = setTimeout(p, M(o));
+  }
+  function k(o) {
+    return n = void 0, v && a ? b(o) : (a = s = void 0, r);
+  }
+  function z() {
+    n !== void 0 && clearTimeout(n), u = 0, a = l = s = n = void 0;
+  }
+  function D() {
+    return n === void 0 ? r : k(w());
+  }
+  function y() {
+    var o = w(), c = $(o);
+    if (a = arguments, s = this, l = o, c) {
+      if (n === void 0)
+        return S(l);
+      if (h)
+        return clearTimeout(n), n = setTimeout(p, e), b(l);
+    }
+    return n === void 0 && (n = setTimeout(p, e)), r;
+  }
+  return y.cancel = z, y.flush = D, y;
+}
+var he = ue;
+const Te = /* @__PURE__ */ L(he), m = (t, e = !1) => t ? e ? t.querySelectorAll('*[tabindex="-1"]') : t.querySelectorAll(`a[href]:not([tabindex="-1"]),
+                                   area[href],
+                                   input:not([disabled]),
+                                   select:not([disabled]),
+                                   textarea:not([disabled]),
+                                   button:not([disabled]),
+                                   iframe,
+                                   object,
+                                   embed,
+                                   *[tabindex]:not([tabindex="-1"]),
+                                   *[contenteditable]`) : null;
+let _;
+const fe = (t, { value: e = !0 }) => {
+  if (e) {
+    let i = m(t), a = m(t, !0);
+    i && i.length > 0 && (_ = (s) => {
+      i = m(t), a = m(t, !0);
+      const d = i[0], r = i[i.length - 1];
+      s.target === d && s.shiftKey && s.key === "Tab" ? (s.preventDefault(), r.focus()) : (s.target === r || Array.from(a).indexOf(s.target) >= 0) && !s.shiftKey && s.key === "Tab" && (s.preventDefault(), d.focus());
+    }, t.addEventListener("keydown", _));
+  }
+}, pe = (t) => {
+  t.removeEventListener("keydown", _);
+}, me = {
+  bind: fe,
+  unbind: pe
+};
+var x = { exports: {} };
+(function(t, e) {
+  Object.defineProperty(e, "__esModule", {
+    value: !0
+  }), e.default = i;
+  function i() {
+    return !!(typeof window < "u" && ("ontouchstart" in window || window.DocumentTouch && typeof document < "u" && document instanceof window.DocumentTouch)) || !!(typeof navigator < "u" && (navigator.maxTouchPoints || navigator.msMaxTouchPoints));
+  }
+  t.exports = e.default;
+})(x, x.exports);
+var ve = x.exports;
+const be = /* @__PURE__ */ L(ve), Le = be();
+function Ee(t, e) {
+  return e.split(".").reduce((a, s) => a ? a[s] : null, t);
+}
+function ye(t) {
+  typeof t.remove < "u" ? t.remove() : typeof t.parentNode < "u" && t.parentNode !== null && t.parentNode.removeChild(t);
+}
+function ge(t) {
+  const e = document.createElement("div");
+  e.style.position = "absolute", e.style.left = "0px", e.style.top = "0px";
+  const i = document.createElement("div");
+  return e.appendChild(i), i.appendChild(t), document.body.appendChild(e), e;
+}
+function Se(t, e, i) {
+  return Math.max(e, Math.min(i, t));
+}
+const we = ["escape", "outside"], _e = {
+  name: "CDropdown",
+  directives: {
+    trapFocus: me
+  },
+  mixins: [j],
+  props: {
+    value: {
+      type: [String, Number, Boolean, Object, Array, Function],
+      default: null
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    hoverable: {
+      type: Boolean,
+      default: !1
+    },
+    inline: {
+      type: Boolean,
+      default: !1
+    },
+    scrollable: {
+      type: Boolean,
+      default: !1
+    },
+    maxHeight: {
+      type: [String, Number],
+      default: 200
+    },
+    position: {
+      type: String,
+      default: "is-bottom-left",
+      validator(t) {
+        return [
+          "is-top-right",
+          "is-top-left",
+          "is-bottom-left",
+          "is-bottom-right"
+        ].indexOf(t) > -1;
+      }
+    },
+    mobileModal: {
+      type: Boolean,
+      default: () => !0
+      // config.defaultDropdownMobileModal,
+    },
+    ariaRole: {
+      type: String,
+      validator(t) {
+        return ["menu", "list", "dialog"].indexOf(t) > -1;
+      },
+      default: null
+    },
+    animation: {
+      type: String,
+      default: "fade-bounce"
+    },
+    multiple: {
+      type: Boolean,
+      default: !1
+    },
+    trapFocus: {
+      type: Boolean,
+      default: () => !1
+      // config.defaultTrapFocus,
+    },
+    closeOnClick: {
+      type: Boolean,
+      default: !0
+    },
+    canClose: {
+      type: [Array, Boolean],
+      default: !0
+    },
+    expanded: {
+      type: Boolean,
+      default: !1
+    },
+    appendToBody: {
+      type: Boolean,
+      default: !1
+    },
+    appendToBodyCopyParent: {
+      type: Boolean,
+      default: !1
+    },
+    menuStyling: {
+      type: Object,
+      default: () => ({})
+    },
+    mobileLabel: {
+      type: String,
+      default: ""
+    },
+    paddingless: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  data() {
+    return {
+      selected: this.value,
+      style: {},
+      isActive: !1,
+      isHoverable: this.hoverable,
+      _isDropdown: !0,
+      // Used internally by DropdownItem
+      _bodyEl: void 0,
+      // Used to append to body
+      uniquePopoverClass: `dropdown-popover-${this._uid}`
+      // Used internally by DropdownItem
+    };
+  },
+  computed: {
+    rootClasses() {
+      return [
+        this.position,
+        {
+          "is-disabled": this.disabled,
+          "is-hoverable": this.hoverable,
+          "is-inline": this.inline,
+          "is-active": this.isActive || this.inline,
+          "is-mobile-modal": this.isMobileModal,
+          "is-expanded": this.expanded
+        }
+      ];
+    },
+    isMobileModal() {
+      return this.mobileModal && this.mq === "sm";
+    },
+    cancelOptions() {
+      return typeof this.canClose == "boolean" ? this.canClose ? we : [] : this.canClose;
+    },
+    contentStyle() {
+      return {
+        maxHeight: this.scrollable ? this.maxHeight === void 0 ? null : isNaN(this.maxHeight) ? this.maxHeight : `${this.maxHeight}px` : null,
+        overflow: this.scrollable ? "auto" : null,
+        padding: this.paddingless ? "0" : null
+      };
+    }
+  },
+  watch: {
+    /**
+     * When v-model is changed set the new selected item.
+     */
+    value(t) {
+      this.selected = t;
+    },
+    /**
+     * Emit event when isActive value is changed.
+     */
+    isActive(t) {
+      this.$emit("active-change", t), this.appendToBody && this.$nextTick(() => {
+        this.updateAppendToBody();
+      });
+    }
+  },
+  mounted() {
+    this.appendToBody && (this.$data._bodyEl = ge(this.$refs.dropdownMenu), this.updateAppendToBody());
+  },
+  created() {
+    typeof window < "u" && (document.addEventListener("click", this.clickedOutside), document.addEventListener("keyup", this.keyPress));
+  },
+  beforeDestroy() {
+    typeof window < "u" && (document.removeEventListener("click", this.clickedOutside), document.removeEventListener("keyup", this.keyPress)), this.appendToBody && ye(this.$data._bodyEl);
+  },
+  methods: {
+    /**
+     * Click listener from DropdownItem.
+     *   1. Set new selected item.
+     *   2. Emit input event to update the user v-model.
+     *   3. Close the dropdown.
+     */
+    selectItem(t, e) {
+      if (this.multiple) {
+        if (this.selected) {
+          const i = this.selected.indexOf(t);
+          i === -1 ? this.selected.push(t) : this.selected.splice(i, 1);
+        } else
+          this.selected = [t];
+        this.$emit("change", this.selected);
+      } else
+        this.selected !== t && (this.selected = t, this.$emit("change", this.selected));
+      this.$emit("input", this.selected), this.multiple || (this.isActive = e.closeOnClick ? !this.closeOnClick : !0, this.hoverable && this.closeOnClick && (this.isHoverable = !1));
+    },
+    /**
+     * White-listed items to not close when clicked.
+     */
+    isInWhiteList(t) {
+      if (t === this.$refs.dropdownMenu || t === this.$refs.trigger)
+        return !0;
+      if (this.$refs.dropdownMenu !== void 0) {
+        const e = this.$refs.dropdownMenu.querySelectorAll("*");
+        for (const i of e)
+          if (t === i)
+            return !0;
+      }
+      if (this.$refs.trigger !== void 0) {
+        const e = this.$refs.trigger.querySelectorAll("*");
+        for (const i of e)
+          if (t === i)
+            return !0;
+      }
+      return !1;
+    },
+    /**
+     * Close dropdown if clicked outside.
+     */
+    clickedOutside(t) {
+      var i;
+      if (this.cancelOptions.indexOf("outside") < 0 || this.inline)
+        return;
+      const e = ((i = t.path) == null ? void 0 : i[0]) || t.target;
+      this.isInWhiteList(e) || (this.isActive = !1);
+    },
+    /**
+     * Keypress event that is bound to the document
+     */
+    keyPress(t) {
+      if (this.isActive && t.keyCode === 27) {
+        if (this.cancelOptions.indexOf("escape") < 0)
+          return;
+        this.isActive = !1;
+      }
+    },
+    /**
+     * Toggle dropdown if it's not disabled.
+     */
+    toggle() {
+      this.disabled || (this.isActive ? this.isActive = !this.isActive : this.$nextTick(() => {
+        const t = !this.isActive;
+        this.isActive = t, setTimeout(() => this.isActive = t);
+      }));
+    },
+    checkHoverable() {
+      this.hoverable && (this.isHoverable = !0);
+    },
+    updateAppendToBody() {
+      const t = this.$refs.dropdownMenu, e = this.$refs.trigger;
+      if (t && e) {
+        const i = this.$data._bodyEl.children[0];
+        if (i.classList.forEach((r) => i.classList.remove(r)), i.classList.add("dropdown"), i.classList.add("dropdown-menu-animation"), this.$vnode && this.$vnode.data && this.$vnode.data.staticClass && i.classList.add(this.$vnode.data.staticClass), this.rootClasses.forEach((r) => {
+          if (r && typeof r == "object")
+            for (const n in r)
+              r[n] && i.classList.add(n);
+        }), this.appendToBodyCopyParent) {
+          const r = this.$refs.dropdown.parentNode, n = this.$data._bodyEl;
+          n.classList.forEach((l) => n.classList.remove(l)), r.classList.forEach((l) => {
+            n.classList.add(l);
+          });
+        }
+        const a = e.getBoundingClientRect();
+        let s = a.top + window.scrollY, d = a.left + window.scrollX;
+        !this.position || this.position.indexOf("bottom") >= 0 ? s += e.clientHeight : s -= t.clientHeight, this.position && this.position.indexOf("left") >= 0 && (d -= t.clientWidth - e.clientWidth), this.style = {
+          position: "absolute",
+          top: `${s}px`,
+          left: `${d}px`,
+          zIndex: "1001"
+        };
+      }
+    }
+  }
+};
+var xe = function() {
+  var e = this, i = e._self._c;
+  return i("div", { ref: "dropdown", staticClass: "dropdown dropdown-menu-animation", class: e.rootClasses }, [e.inline ? e._e() : i("div", { ref: "trigger", staticClass: "dropdown-trigger", attrs: { role: "button", "aria-haspopup": "true" }, on: { click: e.toggle, mouseenter: e.checkHoverable } }, [e._t("trigger", null, { active: e.isActive })], 2), i("transition", { attrs: { name: "fade-in" } }, [e.isMobileModal ? i("div", { directives: [{ name: "show", rawName: "v-show", value: e.isActive, expression: "isActive" }], staticClass: "background", attrs: { "aria-hidden": !e.isActive } }) : e._e()]), i("transition", { attrs: { name: e.isMobileModal ? "slide-in-bottom" : e.animation } }, [i("div", { directives: [{ name: "trap-focus", rawName: "v-trap-focus", value: e.trapFocus, expression: "trapFocus" }, { name: "show", rawName: "v-show", value: !e.disabled && (e.isActive || e.isHoverable) || e.inline, expression: "(!disabled && (isActive || isHoverable)) || inline" }], ref: "dropdownMenu", staticClass: "dropdown-menu", style: {
+    ...e.style,
+    ...e.menuStyling
+  }, attrs: { "aria-hidden": !e.isActive } }, [e.isActive ? [e._t("header"), i("div", { staticClass: "dropdown-content", class: `${e.uniquePopoverClass}`, style: e.contentStyle, attrs: { role: e.ariaRole } }, [e.isMobileModal && e.mobileLabel ? e._t("mobileLabel", function() {
+    return [i("div", { staticClass: "dropdown-content-label" }, [e._v(e._s(e.mobileLabel))])];
+  }) : e._e(), e._t("default")], 2), e._t("footer")] : e._e()], 2)])], 1);
+}, Ce = [], $e = /* @__PURE__ */ E(
+  _e,
+  xe,
+  Ce,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const Me = $e.exports;
+const ke = {
+  name: "CDropdownItem",
+  props: {
+    value: {
+      type: [String, Number, Boolean, Object, Array, Function],
+      default: null
+    },
+    separator: Boolean,
+    disabled: Boolean,
+    custom: Boolean,
+    focusable: {
+      type: Boolean,
+      default: !0
+    },
+    paddingless: Boolean,
+    hasLink: Boolean,
+    ariaRole: {
+      type: String,
+      default: ""
+    },
+    type: {
+      type: String,
+      default: null
+    },
+    toggle: {
+      type: Boolean,
+      default: !1
+    },
+    title: {
+      type: String,
+      default: ""
+    },
+    tooltip: {
+      type: [Object, String],
+      default: null
+    },
+    closeOnClick: {
+      type: Boolean,
+      default: !0
+    },
+    iconLeft: String,
+    iconRight: String,
+    iconProps: {
+      type: Object,
+      default: () => ({})
+    },
+    to: {
+      type: Object,
+      default: null
+    },
+    // Allows for parent communication on arbitrary depth
+    customParent: {
+      type: Object,
+      default: null
+    }
+  },
+  computed: {
+    parent() {
+      return this.customParent || this.$parent;
+    },
+    anchorClasses() {
+      return {
+        "is-disabled": this.parent.disabled || this.disabled,
+        "is-paddingless": this.paddingless,
+        "is-active": this.isActive,
+        "has-toggle": this.toggle
+      };
+    },
+    itemClasses() {
+      return {
+        "dropdown-item": !this.hasLink,
+        "is-disabled": this.disabled,
+        "is-paddingless": this.paddingless,
+        "is-active": this.isActive,
+        "has-link": this.hasLink
+      };
+    },
+    ariaRoleItem() {
+      return this.ariaRole === "menuitem" || this.ariaRole === "listitem" ? this.ariaRole : null;
+    },
+    isClickable() {
+      return !this.parent.disabled && !this.separator && !this.disabled && !this.custom;
+    },
+    isActive() {
+      return this.toggle || this.parent.selected === null ? !1 : this.parent.multiple ? this.parent.selected.indexOf(this.value) >= 0 : this.value === this.parent.selected;
+    },
+    isFocusable() {
+      return this.hasLink ? !1 : this.focusable;
+    },
+    tooltipItem() {
+      if (!this.tooltip)
+        return null;
+      const t = typeof this.tooltip == "string" ? { content: this.tooltip } : this.tooltip;
+      return {
+        boundariesElement: `.${this.parent.uniquePopoverClass}`,
+        classes: "dropdown-tooltip-class",
+        offset: 7,
+        placement: "left",
+        ...t
+      };
+    }
+  },
+  created() {
+    if (!this.parent.$data._isDropdown)
+      throw this.$destroy(), new Error("You should wrap cDropdownItem on a cDropdown");
+  },
+  methods: {
+    /**
+        * Click listener, select the item.
+        */
+    selectItem() {
+      this.isClickable && (this.parent.selectItem(this.value, { closeOnClick: this.closeOnClick }), this.$emit("click"), typeof this.value == "boolean" && this.$emit("input", !this.value));
+    }
+  }
+};
+var Be = function() {
+  var e = this, i = e._self._c;
+  return e.separator ? i("hr", { staticClass: "dropdown-divider" }) : !e.custom && !e.hasLink ? i(e.to && !e.disabled ? "router-link" : "a", { directives: [{ name: "tooltip", rawName: "v-tooltip", value: e.tooltipItem, expression: "tooltipItem" }], tag: "component", staticClass: "dropdown-item truncate-text", class: [e.anchorClasses, `is-${e.type}`], attrs: { to: e.to, role: e.ariaRoleItem, tabindex: e.isFocusable ? 0 : null }, on: { click: e.selectItem } }, [e.iconLeft ? i("BaseIcon", e._b({ staticClass: "icon dropdown-item-icon", attrs: { type: e.iconLeft } }, "BaseIcon", { size: 18, ...e.iconProps }, !1)) : e._e(), e._t("default"), e.toggle ? i("CSwitch", { directives: [{ name: "tooltip", rawName: "v-tooltip", value: e.tooltipItem, expression: "tooltipItem" }], staticStyle: { display: "inline-flex", "pointer-events": "none", position: "absolute", right: "0", top: "50%", transform: "translateY(-50%)", "margin-right": "0" }, attrs: { value: e.value, size: "tiny", type: "success" } }) : e._e(), e.iconRight ? i("BaseIcon", e._b({ staticClass: "icon dropdown-item-icon is-right", attrs: { type: e.iconRight || "chevron-up-down" } }, "BaseIcon", { size: 18, ...e.iconProps }, !1)) : e._e()], 2) : i("div", { staticClass: "truncate-text", class: [e.itemClasses, `is-${e.type}`], attrs: { role: e.ariaRoleItem, tabindex: e.isFocusable ? 0 : null }, on: { click: e.selectItem } }, [e.iconLeft ? i("BaseIcon", e._b({ staticClass: "icon dropdown-item-icon", attrs: { type: e.iconLeft } }, "BaseIcon", { size: 18, ...e.iconProps }, !1)) : e._e(), e._t("default"), e.iconRight ? i("BaseIcon", e._b({ staticClass: "icon dropdown-item-icon is-right", attrs: { type: e.iconRight } }, "BaseIcon", { size: 18, ...e.iconProps }, !1)) : e._e()], 2);
+}, Ie = [], Oe = /* @__PURE__ */ E(
+  ke,
+  Be,
+  Ie,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const ze = Oe.exports;
+export {
+  Me as C,
+  he as a,
+  ze as b,
+  ge as c,
+  Te as d,
+  Se as e,
+  Ee as g,
+  Le as i,
+  ye as r,
+  j as w
+};