@nextcloud/vue
Version:
Nextcloud vue components
124 lines (123 loc) • 3.9 kB
JavaScript
import '../assets/NcInputConfirmCancel-BrdZEfr2.css';
import { I as IconArrowRight } from "./ArrowRight-DRKHUZMH.mjs";
import { I as IconClose } from "./Close-D6ngJ4t9.mjs";
import { r as register, g as t14, a as t } from "./_l10n-DrTiip5c.mjs";
import { N as NcButton } from "./NcButton-Dc8V4Urj.mjs";
import { resolveComponent, createElementBlock, openBlock, createElementVNode, withModifiers, withKeys, withDirectives, createVNode, vModelText, withCtx } from "vue";
import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
register(t14);
const _sfc_main = {
name: "NcInputConfirmCancel",
components: {
IconArrowRight,
IconClose,
NcButton
},
props: {
/**
* If this element is used on a primary element set to true for primary styling.
*/
primary: {
default: false,
type: Boolean
},
/**
* Placeholder of the edit field
*/
placeholder: {
default: "",
type: String
},
/**
* The current name (model value)
*/
modelValue: {
default: "",
type: String
}
},
emits: [
"cancel",
"confirm",
"update:modelValue"
],
data() {
return {
labelConfirm: t("Confirm changes"),
labelCancel: t("Cancel changes")
};
},
computed: {
valueModel: {
get() {
return this.modelValue;
},
set(newValue) {
this.$emit("update:modelValue", newValue);
}
}
},
methods: {
confirm() {
this.$emit("confirm");
},
cancel() {
this.$emit("cancel");
},
focusInput() {
this.$refs.input.focus();
}
}
};
const _hoisted_1 = { class: "app-navigation-input-confirm" };
const _hoisted_2 = ["placeholder"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_IconArrowRight = resolveComponent("IconArrowRight");
const _component_NcButton = resolveComponent("NcButton");
const _component_IconClose = resolveComponent("IconClose");
return openBlock(), createElementBlock("div", _hoisted_1, [
createElementVNode("form", {
onSubmit: _cache[1] || (_cache[1] = withModifiers((...args) => $options.confirm && $options.confirm(...args), ["prevent"])),
onKeydown: _cache[2] || (_cache[2] = withKeys(withModifiers((...args) => $options.cancel && $options.cancel(...args), ["exact", "stop", "prevent"]), ["esc"])),
onClick: _cache[3] || (_cache[3] = withModifiers(() => {
}, ["stop", "prevent"]))
}, [
withDirectives(createElementVNode("input", {
ref: "input",
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => $options.valueModel = $event),
type: "text",
class: "app-navigation-input-confirm__input",
placeholder: $props.placeholder
}, null, 8, _hoisted_2), [
[vModelText, $options.valueModel]
]),
createVNode(_component_NcButton, {
"aria-label": $data.labelConfirm,
type: "submit",
variant: "primary",
onClick: withModifiers($options.confirm, ["stop", "prevent"])
}, {
icon: withCtx(() => [
createVNode(_component_IconArrowRight, { size: 20 })
]),
_: 1
}, 8, ["aria-label", "onClick"]),
createVNode(_component_NcButton, {
"aria-label": $data.labelCancel,
type: "reset",
variant: $props.primary ? "primary" : "tertiary",
onClick: withModifiers($options.cancel, ["stop", "prevent"])
}, {
icon: withCtx(() => [
createVNode(_component_IconClose, { size: 20 })
]),
_: 1
}, 8, ["aria-label", "variant", "onClick"])
], 32)
]);
}
const NcInputConfirmCancel = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-dd457d48"]]);
export {
NcInputConfirmCancel as N
};
//# sourceMappingURL=NcInputConfirmCancel-CSO9hp4z.mjs.map