@nextcloud/vue
Version:
Nextcloud vue components
109 lines (108 loc) • 3.51 kB
JavaScript
import '../assets/NcInputConfirmCancel-SGr0-6w8.css';
import NcButton from "../Components/NcButton.mjs";
import { r as register, p as t13, a as t } from "./_l10n-JYjUKekn.mjs";
import { A as ArrowRight } from "./ArrowRight-KsL2PC-o.mjs";
import { C as Close } from "./Close-B6ccm1RP.mjs";
import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
register(t13);
const _sfc_main = {
name: "NcInputConfirmCancel",
components: {
NcButton,
ArrowRight,
Close
},
props: {
/**
* If this element is used on a primary element set to true for primary styling.
*/
primary: {
default: false,
type: Boolean
},
placeholder: {
default: "",
type: String
},
value: {
default: "",
type: String
}
},
emits: [
"input",
"confirm",
"cancel"
],
data() {
return {
labelConfirm: t("Confirm changes"),
labelCancel: t("Cancel changes")
};
},
computed: {
valueModel: {
get() {
return this.value;
},
set(newValue) {
this.$emit("input", newValue);
}
}
},
methods: {
confirm() {
this.$emit("confirm");
},
cancel() {
this.$emit("cancel");
},
focusInput() {
this.$refs.input.focus();
}
}
};
var _sfc_render = function render() {
var _vm = this, _c = _vm._self._c;
return _c("div", { staticClass: "app-navigation-input-confirm" }, [_c("form", { on: { "submit": function($event) {
$event.preventDefault();
return _vm.confirm.apply(null, arguments);
}, "keydown": function($event) {
if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "esc", 27, $event.key, ["Esc", "Escape"])) return null;
if ($event.ctrlKey || $event.shiftKey || $event.altKey || $event.metaKey) return null;
$event.stopPropagation();
$event.preventDefault();
return _vm.cancel.apply(null, arguments);
}, "click": function($event) {
$event.stopPropagation();
$event.preventDefault();
} } }, [_c("input", { directives: [{ name: "model", rawName: "v-model", value: _vm.valueModel, expression: "valueModel" }], ref: "input", staticClass: "app-navigation-input-confirm__input", attrs: { "type": "text", "placeholder": _vm.placeholder }, domProps: { "value": _vm.valueModel }, on: { "input": function($event) {
if ($event.target.composing) return;
_vm.valueModel = $event.target.value;
} } }), _c("NcButton", { attrs: { "native-type": "submit", "type": "primary", "aria-label": _vm.labelConfirm }, on: { "click": function($event) {
$event.stopPropagation();
$event.preventDefault();
return _vm.confirm.apply(null, arguments);
} }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
return [_c("ArrowRight", { attrs: { "size": 20 } })];
}, proxy: true }]) }), _c("NcButton", { attrs: { "native-type": "reset", "type": _vm.primary ? "primary" : "tertiary", "aria-label": _vm.labelCancel }, on: { "click": function($event) {
$event.stopPropagation();
$event.preventDefault();
return _vm.cancel.apply(null, arguments);
} }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
return [_c("Close", { attrs: { "size": 20 } })];
}, proxy: true }]) })], 1)]);
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ normalizeComponent(
_sfc_main,
_sfc_render,
_sfc_staticRenderFns,
false,
null,
"0e795eb7"
);
const NcInputConfirmCancel = __component__.exports;
export {
NcInputConfirmCancel as N
};