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

Nextcloud vue components

import "../assets/index4.css";
import n from "./NcButton.mjs";
import c from "./NcPopover.mjs";
import { t as o } from "../chunks/l10n-9a5a6afc.mjs";
import { G as l } from "../chunks/GenColors-85cb6194.mjs";
import s from "vue-material-design-icons/ArrowLeft.vue";
import d from "vue-material-design-icons/Check.vue";
import u from "vue-material-design-icons/DotsHorizontal.vue";
import { Chrome as p } from "vue-color";
import { n as m } from "../chunks/_plugin-vue2_normalizer-5b4c43a4.mjs";
const a = function(e) {
  const t = e.toString(16);
  return t.length === 1 ? "0" + t : t;
}, h = { name: "NcColorPicker", components: { ArrowLeft: s, Check: d, Chrome: p, DotsHorizontal: u, NcButton: n, NcPopover: c }, props: { value: { type: String, required: !0 }, advancedFields: { type: Boolean, default: !1 }, palette: { type: Array, default: () => l(4).map((e) => "#" + a(e.r) + a(e.g) + a(e.b)), validator(e) {
  return e.every((t) => /^#([a-f0-9]{3}|[a-f0-9]{6})$/i.test(t));
} } }, emits: ["submit", "close", "update:open", "update:value", "input"], data() {
  return { currentColor: this.value, advanced: !1, ariaBack: o("Back"), ariaMore: o("More options") };
}, watch: { value(e) {
  this.currentColor = e;
} }, methods: { t: o, handleConfirm() {
  this.$emit("submit", this.currentColor), this.handleClose(), this.advanced = !1;
}, handleClose() {
  this.$emit("close"), this.$emit("update:open", !1);
}, handleBack() {
  this.advanced = !1;
}, handleMoreSettings() {
  this.advanced = !0;
}, pickColor(e) {
  typeof e != "string" && (e = this.currentColor.hex), this.currentColor = e, this.$emit("update:value", e), this.$emit("input", e);
} } };
var f = function() {
  var e = this, t = e._self._c;
  return t("NcPopover", e._g(e._b({ on: { "apply-hide": e.handleClose }, scopedSlots: e._u([{ key: "trigger", fn: function() {
    return [e._t("default")];
  }, proxy: !0 }], null, !0) }, "NcPopover", e.$attrs, !1), e.$listeners), [t("div", { staticClass: "color-picker", class: { "color-picker--advanced-fields": e.advanced && e.advancedFields } }, [t("transition", { attrs: { name: "slide", mode: "out-in" } }, [e.advanced ? e._e() : t("div", { staticClass: "color-picker__simple" }, e._l(e.palette, function(r, i) {
    return t("button", { key: i, staticClass: "color-picker__simple-color-circle", class: { "color-picker__simple-color-circle--active": r === e.currentColor }, style: { "background-color": r }, attrs: { type: "button" }, on: { click: function(k) {
      return e.pickColor(r);
    } } }, [r === e.currentColor ? t("Check", { attrs: { size: 20 } }) : e._e()], 1);
  }), 0), e.advanced ? t("Chrome", { staticClass: "color-picker__advanced", attrs: { "disable-alpha": !0, "disable-fields": !e.advancedFields }, on: { input: e.pickColor }, model: { value: e.currentColor, callback: function(r) {
    e.currentColor = r;
  }, expression: "currentColor" } }) : e._e()], 1), t("div", { staticClass: "color-picker__navigation" }, [e.advanced ? t("NcButton", { attrs: { type: "tertiary", "aria-label": e.ariaBack }, on: { click: e.handleBack }, scopedSlots: e._u([{ key: "icon", fn: function() {
    return [t("ArrowLeft", { attrs: { size: 20 } })];
  }, proxy: !0 }], null, !1, 1821202730) }) : e._e(), e.advanced ? e._e() : t("NcButton", { attrs: { type: "tertiary", "aria-label": e.ariaMore }, on: { click: e.handleMoreSettings }, scopedSlots: e._u([{ key: "icon", fn: function() {
    return [t("DotsHorizontal", { attrs: { size: 20 } })];
  }, proxy: !0 }], null, !1, 1056868794) }), e.advanced ? t("NcButton", { attrs: { type: "primary" }, on: { click: e.handleConfirm } }, [e._v(" " + e._s(e.t("Choose")) + " ")]) : e._e()], 1)], 1)]);
}, v = [], C = m(h, f, v, !1, null, "c959ec5a", null, null);
const z = C.exports;
export {
  z as default
};