@progress/kendo-vue-dialogs/Dialog.mjs

TODO

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { defineComponent as I, createVNode as o } from "vue";
import { DialogTitleBar as C } from "./DialogTitleBar.mjs";
import { validatePackage as k, shouldShowValidationUI as y, Keys as S, hasListener as D, guid as c, templateRendering as $, getListeners as x, getDefaultSlots as b, WatermarkOverlay as v } from "@progress/kendo-vue-common";
import { packageMetadata as h } from "./package-metadata.mjs";
import { DEFAULT_DIALOGS_ZINDEX as L } from "./constants.mjs";
const R = /* @__PURE__ */ I({
  name: "KendoDialog",
  emits: {
    close: null,
    overlayclick: null
  },
  props: {
    appendTo: String,
    title: String,
    titleRender: [String, Function],
    id: String,
    wrapperId: String,
    dir: String,
    closeIcon: {
      type: Boolean,
      default: !0
    },
    width: [String, Number],
    height: [String, Number],
    minWidth: [String, Number],
    className: String,
    dialogClass: String,
    themeColor: {
      type: String,
      validator: function(e) {
        return ["primary", "dark", "light"].includes(e);
      }
    },
    onClose: Function
  },
  provide() {
    return {
      kCurrentZIndex: L
    };
  },
  data() {
    return {
      showLicenseWatermark: !1
    };
  },
  created() {
    k(h), this.showLicenseWatermark = y(h), this.titleId = this.generateTitleId(), this.contentId = this.generateContentId();
  },
  computed: {
    wrapperClass() {
      const {
        className: e
      } = this.$props;
      return {
        "k-dialog-wrapper": !0,
        [e]: e
      };
    },
    dialogElementClass() {
      const {
        dialogClass: e,
        themeColor: n
      } = this.$props;
      return {
        "k-window": !0,
        "k-dialog": !0,
        [e]: e,
        [`k-window-${n}`]: n
      };
    }
  },
  mounted() {
    if (this.$props.appendTo) {
      const e = document.querySelector(this.$props.appendTo);
      this.windowElement = this.$refs.wrapper, e.append(this.windowElement);
    }
  },
  beforeUnmount() {
    this.$props.appendTo && this.windowElement.remove();
  },
  methods: {
    handleCloseDialog(e) {
      e.preventDefault(), this.$emit("close", {
        event: e,
        target: this
      });
    },
    handleKeyDown(e) {
      e.keyCode === S.esc && D.call(this, "close") && (e.preventDefault(), this.handleCloseDialog(e));
    },
    transformDimesion(e) {
      return typeof e == "string" && (e.endsWith("px") || e.endsWith("%")) ? e : e + "px";
    },
    getActionBarIndex(e) {
      return e.findIndex((t) => t && t.tag && t.tag.toLowerCase().indexOf("dialogactionsbar") !== -1 || t.componentOptions && t.componentOptions.tag && t.componentOptions.tag.toLowerCase().indexOf("actions-bar") !== -1 || t.type && t.type.name && t.type.name.toLowerCase().indexOf("dialogactionsbar") !== -1);
    },
    generateTitleId() {
      return "dialog-title" + c();
    },
    generateContentId() {
      return "dialog-content" + c();
    },
    handleClick(e) {
      this.$emit("overlayclick", e);
    }
  },
  render() {
    const e = this.$props.id !== void 0 ? this.$props.id : this.titleId;
    let {
      title: n,
      width: t,
      height: r,
      minWidth: s,
      dir: m,
      contentStyle: g,
      wrapperId: u
    } = this.$props;
    const a = this.$props.titleRender ? $.call(this, this.$props.titleRender, x.call(this)) : null, i = b(this) || [];
    t = this.transformDimesion(t), r = this.transformDimesion(r), s = this.transformDimesion(s);
    const f = this.showLicenseWatermark ? o(v, null, null) : null, l = this.getActionBarIndex(i);
    let d;
    l !== -1 && (d = i[l], i.splice(l, 1));
    const w = this.$props.closeIcon !== void 0 ? this.$props.closeIcon : !0, p = o("div", {
      ref: "wrapper",
      class: this.wrapperClass,
      onKeydown: this.handleKeyDown,
      tabindex: 0,
      id: u,
      dir: m
    }, [o("div", {
      class: "k-overlay",
      onClick: this.handleClick
    }, null), o("div", {
      "aria-labelledby": n || a ? e : void 0,
      "aria-describedby": this.contentId,
      "aria-modal": !0,
      class: this.dialogElementClass,
      role: "dialog",
      style: {
        width: t,
        height: r,
        minWidth: s
      }
    }, [(n || a) && o(C, {
      closeIcon: w,
      onClosebuttonclick: this.handleCloseDialog,
      id: e,
      title: n,
      titleRender: a
    }, null), o("div", {
      class: "k-window-content k-dialog-content",
      style: g,
      id: this.contentId
    }, [i]), d, f])]);
    return this.$props.appendTo ? o("div", null, [p]) : p;
  }
});
export {
  R as Dialog
};