@nextcloud/vue
Version:
Nextcloud vue components
353 lines (352 loc) • 13.5 kB
JavaScript
import '../assets/NcActionInput-BxRA_Skn.css';
import { defineAsyncComponent, resolveComponent, createElementBlock, openBlock, normalizeClass, createElementVNode, renderSlot, normalizeStyle, withModifiers, createCommentVNode, toDisplayString, createBlock, mergeProps, createVNode, withCtx } from "vue";
import { r as register, h as t48, a as t } from "./_l10n-DrTiip5c.mjs";
import { A as ActionGlobalMixin } from "./actionGlobal-BZFdtdJL.mjs";
import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
import { N as NcDateTimePickerNative } from "./NcDateTimePickerNative-DXF3-uR3.mjs";
import { N as NcPasswordField } from "./NcPasswordField-djttkA5Q.mjs";
import { _ as _sfc_main$1 } from "./NcTextField.vue_vue_type_script_setup_true_lang-D1y_LfGJ.mjs";
import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
register(t48);
const _sfc_main = {
name: "NcActionInput",
components: {
NcDateTimePickerNative,
NcPasswordField,
NcTextField: _sfc_main$1,
// Lazy load components with more than 50kB bundle size impact
NcColorPicker: defineAsyncComponent(() => import("../components/NcColorPicker/index.mjs")),
NcDateTimePicker: defineAsyncComponent(() => import("../components/NcDateTimePicker/index.mjs")),
NcSelect: defineAsyncComponent(() => import("../components/NcSelect/index.mjs"))
},
mixins: [ActionGlobalMixin],
inheritAttrs: false,
props: {
/**
* id attribute of the checkbox element
*/
id: {
type: String,
default: () => "action-" + createElementId(),
validator: (id) => id.trim() !== ""
},
/**
* id attribute of the text input element
*/
inputId: {
type: String,
default: () => "action-input-" + createElementId(),
validator: (id) => id.trim() !== ""
},
/**
* Icon to show with the action, can be either a CSS class or an URL
*/
icon: {
type: String,
default: ""
},
/**
* type attribute of the input field
*/
type: {
type: String,
default: "text",
validator(type) {
return [
"date",
"datetime-local",
"month",
"multiselect",
"number",
"password",
"search",
"tel",
"text",
"time",
"url",
"week",
"color",
"email"
].includes(type);
}
},
/**
* id attribute for the native date time picker
*/
idNativeDateTimePicker: {
type: String,
default: "date-time-picker_id"
},
/**
* Flag to use a native date time picker
*/
isNativePicker: {
type: Boolean,
default: false
},
/**
* The visible input label for accessibility purposes.
*/
label: {
type: String,
default: null
},
/**
* If you want to show the label just above the
* input field, pass in `true` to this prop.
*/
labelOutside: {
type: Boolean,
default: true
},
/**
* value attribute of the input field
*/
modelValue: {
type: [String, Date, Number, Array],
default: ""
},
/**
* disabled state of the input field
*/
disabled: {
type: Boolean,
default: false
},
/**
* aria-label attribute of the input field
*/
ariaLabel: {
type: String,
default: ""
},
/**
* Attribute forwarded to the underlying NcPasswordField and NcTextField
*/
showTrailingButton: {
type: Boolean,
default: true
},
/**
* Trailing button label forwarded to the underlying NcTextField
*/
trailingButtonLabel: {
type: String,
default: t("Submit")
},
/**
* CSS class to apply to the root element.
*/
class: {
type: [String, Array, Object],
default: ""
}
},
emits: [
"submit",
"update:modelValue"
],
computed: {
isIconUrl() {
try {
return new URL(this.icon);
} catch {
return false;
}
},
isMultiselectType() {
return this.type === "multiselect";
},
nativeDatePickerType() {
switch (this.type) {
case "date":
case "month":
case "time":
case "week":
case "datetime-local":
return this.type;
}
return false;
},
datePickerType() {
if (!this.isNativePicker) {
switch (this.type) {
case "date":
case "month":
case "time":
return this.type;
case "datetime-local":
return "datetime";
}
}
return false;
},
/**
* determines if the action is focusable
*
* @return {boolean} is the action focusable ?
*/
isFocusable() {
return !this.disabled;
}
},
methods: {
// closing datepicker popup on mouseleave = unfocus
onLeave() {
if (this.$refs.datetimepicker && this.$refs.datetimepicker.$refs.datepicker) {
this.$refs.datetimepicker.$refs.datepicker.closePopup();
}
},
onSubmit(event) {
event.preventDefault();
event.stopPropagation();
if (!this.disabled) {
this.$emit("submit", event);
} else {
return false;
}
},
onUpdateModelValue(event) {
this.$emit("update:modelValue", event);
}
}
};
const _hoisted_1 = { class: "action-input__icon-wrapper" };
const _hoisted_2 = ["disabled"];
const _hoisted_3 = { class: "action-input__container" };
const _hoisted_4 = ["for"];
const _hoisted_5 = { class: "action-input__input-container" };
const _hoisted_6 = {
key: 4,
class: "action-input__container"
};
const _hoisted_7 = ["for"];
const _hoisted_8 = { class: "action-input__input-container" };
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_NcDateTimePicker = resolveComponent("NcDateTimePicker");
const _component_NcDateTimePickerNative = resolveComponent("NcDateTimePickerNative");
const _component_NcSelect = resolveComponent("NcSelect");
const _component_NcPasswordField = resolveComponent("NcPasswordField");
const _component_NcColorPicker = resolveComponent("NcColorPicker");
const _component_NcTextField = resolveComponent("NcTextField");
return openBlock(), createElementBlock("li", {
class: normalizeClass(["action", [{ "action--disabled": $props.disabled }, _ctx.$props.class]])
}, [
createElementVNode("span", {
class: normalizeClass(["action-input", {
"action-input-picker--disabled": $props.disabled,
"action-input--visible-label": $props.labelOutside && $props.label
}]),
onMouseleave: _cache[3] || (_cache[3] = (...args) => $options.onLeave && $options.onLeave(...args))
}, [
createElementVNode("span", _hoisted_1, [
renderSlot(_ctx.$slots, "icon", {}, () => [
createElementVNode("span", {
"aria-hidden": "true",
class: normalizeClass(["action-input__icon", [$options.isIconUrl ? "action-input__icon--url" : $props.icon]]),
style: normalizeStyle({ backgroundImage: $options.isIconUrl ? `url(${$props.icon})` : null })
}, null, 6)
], true)
]),
createElementVNode("form", {
ref: "form",
class: "action-input__form",
disabled: $props.disabled,
onSubmit: _cache[2] || (_cache[2] = withModifiers((...args) => $options.onSubmit && $options.onSubmit(...args), ["prevent"]))
}, [
createElementVNode("div", _hoisted_3, [
$props.label && $props.labelOutside && !$props.isNativePicker ? (openBlock(), createElementBlock("label", {
key: 0,
class: normalizeClass(["action-input__text-label", { "action-input__text-label--hidden": !$props.labelOutside }]),
for: $props.inputId
}, toDisplayString($props.label), 11, _hoisted_4)) : createCommentVNode("", true),
createElementVNode("div", _hoisted_5, [
$options.datePickerType ? (openBlock(), createBlock(_component_NcDateTimePicker, mergeProps({
key: 0,
ref: "datetimepicker",
"model-value": $props.modelValue,
style: { "z-index": "99999999999" },
placeholder: _ctx.text,
disabled: $props.disabled,
type: $options.datePickerType,
"input-class": ["mx-input", { focusable: $options.isFocusable }],
class: "action-input__datetimepicker",
"append-to-body": ""
}, _ctx.$attrs, { "onUpdate:modelValue": $options.onUpdateModelValue }), null, 16, ["model-value", "placeholder", "disabled", "type", "input-class", "onUpdate:modelValue"])) : $props.isNativePicker ? (openBlock(), createBlock(_component_NcDateTimePickerNative, mergeProps({
key: 1,
id: $props.idNativeDateTimePicker,
"model-value": $props.modelValue,
label: $props.label,
type: $options.nativeDatePickerType,
"input-class": { focusable: $options.isFocusable },
class: "action-input__datetimepicker"
}, _ctx.$attrs, { "onUpdate:modelValue": $options.onUpdateModelValue }), null, 16, ["id", "model-value", "label", "type", "input-class", "onUpdate:modelValue"])) : $options.isMultiselectType ? (openBlock(), createBlock(_component_NcSelect, mergeProps({
key: 2,
"model-value": $props.modelValue,
placeholder: _ctx.text,
disabled: $props.disabled,
"append-to-body": false,
"input-class": { focusable: $options.isFocusable },
class: "action-input__multi"
}, _ctx.$attrs, { "onUpdate:modelValue": $options.onUpdateModelValue }), null, 16, ["model-value", "placeholder", "disabled", "input-class", "onUpdate:modelValue"])) : $props.type === "password" ? (openBlock(), createBlock(_component_NcPasswordField, mergeProps({
key: 3,
id: $props.inputId,
"model-value": $props.modelValue,
label: $props.label,
"label-outside": !$props.label || $props.labelOutside,
placeholder: _ctx.text,
disabled: $props.disabled,
"input-class": { focusable: $options.isFocusable },
"show-trailing-button": $props.showTrailingButton && !$props.disabled
}, _ctx.$attrs, { "onUpdate:modelValue": $options.onUpdateModelValue }), null, 16, ["id", "model-value", "label", "label-outside", "placeholder", "disabled", "input-class", "show-trailing-button", "onUpdate:modelValue"])) : $props.type === "color" ? (openBlock(), createElementBlock("div", _hoisted_6, [
$props.label && $props.type === "color" ? (openBlock(), createElementBlock("label", {
key: 0,
class: normalizeClass(["action-input__text-label", { "action-input__text-label--hidden": !$props.labelOutside }]),
for: $props.inputId
}, toDisplayString($props.label), 11, _hoisted_7)) : createCommentVNode("", true),
createElementVNode("div", _hoisted_8, [
createVNode(_component_NcColorPicker, mergeProps({
id: "inputId",
"model-value": $props.modelValue,
class: "colorpicker__trigger"
}, _ctx.$attrs, {
"onUpdate:modelValue": $options.onUpdateModelValue,
onSubmit: _cache[0] || (_cache[0] = ($event) => _ctx.$refs.form.requestSubmit())
}), {
default: withCtx(() => [
createElementVNode("button", {
class: normalizeClass(["colorpicker__preview", { focusable: $options.isFocusable }]),
style: normalizeStyle({ "background-color": $props.modelValue })
}, null, 6)
]),
_: 1
}, 16, ["model-value", "onUpdate:modelValue"])
])
])) : (openBlock(), createBlock(_component_NcTextField, mergeProps({
key: 5,
id: $props.inputId,
"model-value": $props.modelValue,
label: $props.label,
"label-outside": !$props.label || $props.labelOutside,
placeholder: _ctx.text,
disabled: $props.disabled,
"input-class": { focusable: $options.isFocusable },
type: $props.type,
"trailing-button-icon": "arrowRight",
"trailing-button-label": $props.trailingButtonLabel,
"show-trailing-button": $props.showTrailingButton && !$props.disabled
}, _ctx.$attrs, {
onTrailingButtonClick: _cache[1] || (_cache[1] = ($event) => _ctx.$refs.form.requestSubmit()),
"onUpdate:modelValue": $options.onUpdateModelValue
}), null, 16, ["id", "model-value", "label", "label-outside", "placeholder", "disabled", "input-class", "type", "trailing-button-label", "show-trailing-button", "onUpdate:modelValue"]))
])
])
], 40, _hoisted_2)
], 34)
], 2);
}
const NcActionInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-67b3d681"]]);
export {
NcActionInput as N
};
//# sourceMappingURL=NcActionInput-uL5aa-A2.mjs.map