@nextcloud/vue/dist/Components/NcActionInput.mjs

Nextcloud vue components

import "../assets/index39.css";
import l from "./NcDatetimePicker.mjs";
import s from "./NcDateTimePickerNative.mjs";
import n from "./NcPasswordField.mjs";
import r from "./NcSelect.mjs";
import c from "./NcTextField.mjs";
import { A as o } from "../chunks/actionGlobal-cda46023.mjs";
import { G as a } from "../chunks/GenRandomId-1e1b509a.mjs";
import { n as u } from "../chunks/_plugin-vue2_normalizer-5b4c43a4.mjs";
const d = { name: "NcActionInput", components: { NcDatetimePicker: l, NcDateTimePickerNative: s, NcPasswordField: n, NcSelect: r, NcTextField: c }, mixins: [o], props: { id: { type: String, default: () => "action-" + a(), validator: (t) => t.trim() !== "" }, inputId: { type: String, default: () => "action-input-" + a(), validator: (t) => t.trim() !== "" }, icon: { type: String, default: "" }, type: { type: String, default: "text", validator(t) {
  return ["date", "datetime-local", "month", "multiselect", "number", "password", "search", "tel", "text", "time", "url", "week", "color", "email"].indexOf(t) > -1;
} }, idNativeDateTimePicker: { type: String, default: "date-time-picker_id" }, isNativePicker: { type: Boolean, default: !1 }, label: { type: String, default: null }, labelOutside: { type: Boolean, default: !0 }, value: { type: [String, Date, Number, Array], default: "" }, disabled: { type: Boolean, default: !1 }, ariaLabel: { type: String, default: "" }, ariaHidden: { type: Boolean, default: null }, showTrailingButton: { type: Boolean, default: !0 } }, emits: ["input", "submit", "change", "update:value"], computed: { isIconUrl() {
  try {
    return new URL(this.icon);
  } catch {
    return !1;
  }
}, isMultiselectType() {
  return this.type === "multiselect";
}, nativeDatePickerType() {
  switch (this.type) {
    case "date":
    case "month":
    case "time":
    case "week":
    case "datetime-local":
      return this.type;
  }
  return !1;
}, datePickerType() {
  if (!this.isNativePicker)
    switch (this.type) {
      case "date":
      case "month":
      case "time":
        return this.type;
      case "datetime-local":
        return "datetime";
    }
  return !1;
}, isFocusable() {
  return !this.disabled;
} }, methods: { onLeave() {
  this.$refs.datetimepicker && this.$refs.datetimepicker.$refs.datepicker && this.$refs.datetimepicker.$refs.datepicker.closePopup();
}, onInput(t) {
  this.$emit("input", t), this.$emit("update:value", t.target ? t.target.value : t);
}, onSubmit(t) {
  if (t.preventDefault(), t.stopPropagation(), !this.disabled)
    this.$emit("submit", t);
  else
    return !1;
}, onChange(t) {
  this.$emit("change", t);
} } };
var p = function() {
  var t = this, e = t._self._c;
  return e("li", { staticClass: "action", class: { "action--disabled": t.disabled } }, [e("span", { staticClass: "action-input", class: { "action-input-picker--disabled": t.disabled, "action-input--visible-label": t.labelOutside && t.label }, on: { mouseleave: t.onLeave } }, [e("span", { staticClass: "action-input__icon-wrapper" }, [t._t("icon", function() {
    return [e("span", { staticClass: "action-input__icon", class: [t.isIconUrl ? "action-input__icon--url" : t.icon], style: { backgroundImage: t.isIconUrl ? `url(${t.icon})` : null }, attrs: { "aria-hidden": t.ariaHidden } })];
  })], 2), e("form", { ref: "form", staticClass: "action-input__form", attrs: { disabled: t.disabled }, on: { submit: function(i) {
    return i.preventDefault(), t.onSubmit.apply(null, arguments);
  } } }, [e("div", { staticClass: "action-input__container" }, [t.label && t.labelOutside ? e("label", { staticClass: "action-input__text-label", class: { "action-input__text-label--hidden": !t.labelOutside }, attrs: { for: t.inputId } }, [t._v(" " + t._s(t.label) + " ")]) : t._e(), e("div", { staticClass: "action-input__input-container" }, [t.datePickerType ? e("NcDatetimePicker", t._b({ ref: "datetimepicker", staticClass: "action-input__datetimepicker", staticStyle: { "z-index": "99999999999" }, attrs: { value: t.value, placeholder: t.text, disabled: t.disabled, type: t.datePickerType, "input-class": ["mx-input", { focusable: t.isFocusable }] }, on: { input: t.onInput, change: t.onChange } }, "NcDatetimePicker", t.$attrs, !1)) : t.isNativePicker ? e("NcDateTimePickerNative", t._b({ staticClass: "action-input__datetimepicker", attrs: { id: t.idNativeDateTimePicker, value: t.value, type: t.nativeDatePickerType, "input-class": { focusable: t.isFocusable } }, on: { input: function(i) {
    return t.$emit("input", i);
  }, change: function(i) {
    return t.$emit("change", i);
  } } }, "NcDateTimePickerNative", t.$attrs, !1)) : t.isMultiselectType ? e("NcSelect", t._g(t._b({ staticClass: "action-input__multi", attrs: { value: t.value, placeholder: t.text, disabled: t.disabled, "append-to-body": !1, "input-class": { focusable: t.isFocusable } } }, "NcSelect", t.$attrs, !1), t.$listeners)) : t.type === "password" ? e("NcPasswordField", t._g(t._b({ attrs: { id: t.inputId, value: t.value, label: t.label, "label-outside": !t.label || t.labelOutside, placeholder: t.text, disabled: t.disabled, "input-class": { focusable: t.isFocusable }, "trailing-button-icon": "arrowRight", "show-trailing-button": t.showTrailingButton && !t.disabled }, on: { "trailing-button-click": function(i) {
    return t.$refs.form.requestSubmit();
  }, input: t.onInput, change: t.onChange } }, "NcPasswordField", t.$attrs, !1), t.$listeners)) : t.type === "color" ? e("div", { staticClass: "action-input__container" }, [t.label && t.type === "color" ? e("label", { staticClass: "action-input__text-label", class: { "action-input__text-label--hidden": !t.labelOutside }, attrs: { for: t.inputId } }, [t._v(" " + t._s(t.label) + " ")]) : t._e(), e("div", { staticClass: "action-input__input-container" }, [e("NcColorPicker", t._g(t._b({ staticClass: "colorpicker__trigger", attrs: { id: "inputId", value: t.value }, on: { input: t.onInput, submit: function(i) {
    return t.$refs.form.requestSubmit();
  } } }, "NcColorPicker", t.$attrs, !1), t.$listeners), [e("button", { staticClass: "colorpicker__preview", class: { focusable: t.isFocusable }, style: { "background-color": t.value } })])], 1)]) : e("NcTextField", t._g(t._b({ attrs: { id: t.inputId, value: t.value, label: t.label, "label-outside": !t.label || t.labelOutside, placeholder: t.text, disabled: t.disabled, "input-class": { focusable: t.isFocusable }, type: t.type, "trailing-button-icon": "arrowRight", "show-trailing-button": t.showTrailingButton && !t.disabled }, on: { "trailing-button-click": function(i) {
    return t.$refs.form.requestSubmit();
  }, input: t.onInput, change: t.onChange } }, "NcTextField", t.$attrs, !1), t.$listeners))], 1)])])])]);
}, b = [], m = u(d, p, b, !1, null, "eddb045f", null, null);
const P = m.exports;
export {
  P as default
};