@progress/kendo-vue-editor
Version:
212 lines (211 loc) • 6.81 kB
JavaScript
/**
* @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 L, createVNode as t, isVNode as T } from "vue";
import { Window as j, DialogActionsBar as x } from "@progress/kendo-vue-dialogs";
import { Button as S } from "@progress/kendo-vue-buttons";
import { NodeSelection as C, insertNode as z } from "@progress/kendo-editor-common";
import { provideLocalizationService as A } from "@progress/kendo-vue-intl";
import { messages as r } from "../messages/main.mjs";
import { getRef as c, setRef as g } from "@progress/kendo-vue-common";
import { Form as N, FormElement as O, FieldWrapper as m } from "@progress/kendo-vue-form";
import { Input as f } from "@progress/kendo-vue-inputs";
function k(e) {
return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !T(e);
}
const K = /* @__PURE__ */ L({
name: "KendoInsertImageDialog",
emits: {
close: null
},
props: {
view: Object,
settings: Object,
dir: String
},
inject: {
kendoLocalizationService: {
default: null
}
},
data() {
const {
view: e,
settings: n
} = this.$props, l = e && e.state;
let i = {};
return l && l.selection instanceof C && l.selection.node.type === l.schema.nodes[n.node] && (i = l.selection.node.attrs), {
srcValue: i.src,
altValue: i.alt,
titleValue: i.title,
widthValue: i.width,
heightValue: i.height
};
},
mounted() {
this.src = c(this, "src"), this.altText = c(this, "altText"), this.title = c(this, "title"), this.width = c(this, "width"), this.height = c(this, "height"), this.src && this.src.focus();
},
render() {
let e, n;
const {
view: l,
settings: i,
dir: s
} = this.$props, {
insertImageDialogTitle: d,
insertImageAddress: p,
insertImageTitle: I,
insertImageAltText: a,
insertImageWidth: h,
insertImageHeight: v,
insertImageCancel: V,
insertImageInsert: b
} = i.messages, o = A(this), u = l && l.state;
u && u.selection instanceof C && u.selection.node.type === u.schema.nodes[i.node] && u.selection.node.attrs;
const y = t(N, null, {
default: () => [t(O, {
horizontal: !0
}, {
default: () => [t(m, null, {
default: () => [t("label", {
for: "k-editor-image-url",
class: "k-form-label"
}, [o.toLanguageString(p, r[p])]), t("div", {
class: "k-form-field-wrap"
}, [t(f, {
id: "k-editor-image-url",
value: this.srcValue,
onInput: this.handleSrcInput,
ref: g(this, "src")
}, null)])]
}), t(m, null, {
default: () => [t("label", {
for: "k-editor-image-url",
class: "k-form-label"
}, [o.toLanguageString(a, r[a])]), t("div", {
class: "k-form-field-wrap"
}, [t(f, {
id: "k-editor-image-alt",
value: this.altValue,
onInput: this.handleAltInput,
ref: g(this, "altText")
}, null)])]
}), t(m, null, {
default: () => [t("label", {
for: "k-editor-image-title",
class: "k-form-label"
}, [o.toLanguageString(I, r[I])]), t("div", {
class: "k-form-field-wrap"
}, [t(f, {
id: "k-editor-image-title",
value: this.titleValue,
onInput: this.handleTitleInput,
ref: g(this, "title")
}, null)])]
}), t(m, null, {
default: () => [t("label", {
for: "k-editor-image-width",
class: "k-form-label"
}, [o.toLanguageString(h, r[h])]), t("div", {
class: "k-form-field-wrap"
}, [t(f, {
id: "k-editor-image-width",
value: this.widthValue,
onInput: this.handleWidthInput,
ref: g(this, "width")
}, null)])]
}), t(m, null, {
default: () => [t("label", {
for: "k-editor-image-height",
class: "k-form-label"
}, [o.toLanguageString(v, r[v])]), t("div", {
class: "k-form-field-wrap"
}, [t(f, {
id: "k-editor-image-height",
value: this.heightValue,
onInput: this.handleHeightInput,
ref: g(this, "height")
}, null)])]
})]
})]
}), w = [t(S, {
type: "button",
onClick: this.onClose,
dir: s,
key: "cancel"
}, k(e = o.toLanguageString(V, r[V])) ? e : {
default: () => [e]
}), t(S, {
type: "button",
disabled: !this.srcValue,
onClick: this.onInsert,
themeColor: "primary",
dir: s,
key: "insert"
}, k(n = o.toLanguageString(b, r[b])) ? n : {
default: () => [n]
})];
return t(j, {
initialWidth: 500,
initialHeight: 360,
windowClass: "k-editor-window",
title: o.toLanguageString(d, r[d]),
onClose: this.onClose,
key: "dialog",
dir: s,
style: s === "rtl" ? {
textAlign: "right"
} : void 0,
modal: !0,
minimizeButton: () => null,
maximizeButton: () => null,
resizable: !1
}, {
default: () => [y, t(x, null, k(w) ? w : {
default: () => [w]
})]
});
},
methods: {
handleSrcInput(e) {
this.srcValue = e.value;
},
handleAltInput(e) {
this.altValue = e.value;
},
handleTitleInput(e) {
this.titleValue = e.value;
},
handleWidthInput(e) {
this.widthValue = e.value;
},
handleHeightInput(e) {
this.heightValue = e.value;
},
onClose() {
this.$props.view.focus(), this.$emit("close");
},
onInsert() {
const {
view: e,
settings: n
} = this.$props, i = e.state.schema.nodes[n.node], s = {
src: this.src ? this.srcValue : null,
title: this.title ? this.titleValue : null,
alt: this.altText ? this.altValue : null,
width: this.width ? this.widthValue : null,
height: this.height ? this.heightValue : null
}, d = Object.keys(s).filter((a) => s[a] !== null && s[a] !== "").reduce((a, h) => Object.assign(a, {
[h]: s[h]
}), {}), p = i.createAndFill(d);
z(p, !0)(e.state, (a) => e.dispatch(a.setMeta("commandName", n.commandName).setMeta("args", d))), this.onClose();
}
}
});
export {
K as InsertImageDialog
};