@nextcloud/vue/dist/chunks/NcColorPicker-Ddm2gbz0.mjs

Nextcloud vue components

import '../assets/NcColorPicker-aCjZY65-.css';
import NcButton from "../Components/NcButton.mjs";
import { N as NcPopover } from "./NcPopover-DbeCmze0.mjs";
import { r as register, j as t1, a as t } from "./_l10n-JYjUKekn.mjs";
import { d as defaultPalette } from "./GenColors-BWE946ht.mjs";
import { G as GenRandomId } from "./GenRandomId-CMooMQt0.mjs";
import { A as ArrowLeft } from "./ArrowLeft-BhAxJBYx.mjs";
import { C as Check } from "./Check-XHAzUBkX.mjs";
import { D as DotsHorizontal } from "./DotsHorizontal-Cd2x8oz2.mjs";
import { Chrome } from "vue-color";
import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
register(t1);
const HEX_REGEX = /^#([a-f0-9]{3}|[a-f0-9]{6})$/i;
const _sfc_main = {
  name: "NcColorPicker",
  components: {
    ArrowLeft,
    Check,
    Chrome,
    DotsHorizontal,
    NcButton,
    NcPopover
  },
  props: {
    /**
     * A HEX color that represents the initial value of the picker
     */
    value: {
      type: String,
      required: true
    },
    /**
     * Set to `true` to enable advanced fields including HEX, RGB, and HSL
     */
    advancedFields: {
      type: Boolean,
      default: false
    },
    /**
     * Limit selectable colors to only the provided palette
     */
    paletteOnly: {
      type: Boolean,
      default: false
    },
    /**
     * Provide a custom array of colors to show.
     * Can be either an array of string hexadecimal colors,
     * or an array of object with a `color` property with hexadecimal color string,
     * and a `name` property for accessibility.
     *
     * @type {string[] | {color: string, name: string}[]}
     */
    palette: {
      type: Array,
      default: () => [...defaultPalette],
      validator: (palette) => palette.every(
        (item) => typeof item === "string" && HEX_REGEX.test(item) || typeof item === "object" && item.color && HEX_REGEX.test(item.color)
      )
    },
    /**
     * Selector for the popover container
     */
    container: {
      type: [String, Object, Element, Boolean],
      default: "body"
    }
  },
  emits: [
    "submit",
    "close",
    "update:open",
    "update:value",
    "input"
  ],
  data() {
    return {
      currentColor: this.value,
      advanced: false,
      ariaBack: t("Back"),
      ariaMore: t("More options")
    };
  },
  computed: {
    normalizedPalette() {
      return this.palette.map((item) => ({
        color: typeof item === "object" ? item.color : item,
        name: typeof item === "object" && item.name ? item.name : t("A color with a HEX value {hex}", { hex: item.color })
      }));
    },
    uid() {
      return GenRandomId();
    },
    contrastColor() {
      const black = "#000000";
      const white = "#FFFFFF";
      return this.calculateLuma(this.currentColor) > 0.5 ? black : white;
    }
  },
  watch: {
    value(color) {
      this.currentColor = color;
    }
  },
  methods: {
    t,
    /**
     * Submit a picked colour and close picker
     */
    handleConfirm() {
      this.$emit("submit", this.currentColor);
      this.handleClose();
      this.advanced = false;
    },
    handleClose() {
      this.$emit("close");
      this.$emit("update:open", false);
    },
    /**
     * Inner navigations
     */
    handleBack() {
      this.advanced = false;
    },
    handleMoreSettings() {
      this.advanced = true;
    },
    /**
     * Pick a colour
     *
     * @param {string} color the picked color
     */
    pickColor(color) {
      if (typeof color !== "string") {
        color = this.currentColor.hex;
      }
      this.currentColor = color;
      this.$emit("update:value", color);
      this.$emit("input", color);
    },
    /**
     * Calculate luminance of provided hex color
     *
     * @param {string} color the hex color
     */
    calculateLuma(color) {
      const [red, green, blue] = this.hexToRGB(color);
      return (0.2126 * red + 0.7152 * green + 0.0722 * blue) / 255;
    },
    /**
     * Convert hex color to RGB
     *
     * @param {string} hex the hex color
     */
    hexToRGB(hex) {
      const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
      return result ? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)] : null;
    }
  }
};
var _sfc_render = function render() {
  var _vm = this, _c = _vm._self._c;
  return _c("NcPopover", _vm._g(_vm._b({ attrs: { "popup-role": "dialog", "container": _vm.container }, on: { "apply-hide": _vm.handleClose }, scopedSlots: _vm._u([{ key: "trigger", fn: function(slotProps) {
    return [_vm._t("default", null, null, slotProps)];
  } }], null, true) }, "NcPopover", _vm.$attrs, false), _vm.$listeners), [_c("div", { staticClass: "color-picker", class: { "color-picker--advanced-fields": _vm.advanced && _vm.advancedFields }, attrs: { "role": "dialog", "aria-modal": "true", "aria-label": _vm.t("Color picker") } }, [_c("Transition", { attrs: { "name": "slide", "mode": "out-in" } }, [!_vm.advanced ? _c("div", { staticClass: "color-picker__simple" }, _vm._l(_vm.normalizedPalette, function({ color, name }, index) {
    return _c("label", { key: index, staticClass: "color-picker__simple-color-circle", class: { "color-picker__simple-color-circle--active": color === _vm.currentColor }, style: { backgroundColor: color } }, [color === _vm.currentColor ? _c("Check", { attrs: { "size": 20, "fill-color": _vm.contrastColor } }) : _vm._e(), _c("input", { staticClass: "hidden-visually", attrs: { "type": "radio", "aria-label": name, "name": "color-picker-".concat(_vm.uid) }, domProps: { "checked": color === _vm.currentColor }, on: { "click": function($event) {
      return _vm.pickColor(color);
    } } })], 1);
  }), 0) : _c("Chrome", { staticClass: "color-picker__advanced", attrs: { "disable-alpha": true, "disable-fields": !_vm.advancedFields }, on: { "input": _vm.pickColor }, model: { value: _vm.currentColor, callback: function($$v) {
    _vm.currentColor = $$v;
  }, expression: "currentColor" } })], 1), !_vm.paletteOnly ? _c("div", { staticClass: "color-picker__navigation" }, [_vm.advanced ? _c("NcButton", { attrs: { "type": "tertiary", "aria-label": _vm.ariaBack }, on: { "click": _vm.handleBack }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
    return [_c("ArrowLeft", { attrs: { "size": 20 } })];
  }, proxy: true }], null, false, 1821202730) }) : _c("NcButton", { attrs: { "type": "tertiary", "aria-label": _vm.ariaMore }, on: { "click": _vm.handleMoreSettings }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
    return [_c("DotsHorizontal", { attrs: { "size": 20 } })];
  }, proxy: true }], null, false, 1056868794) }), _c("NcButton", { attrs: { "type": "primary" }, on: { "click": _vm.handleConfirm } }, [_vm._v(" " + _vm._s(_vm.t("Choose")) + " ")])], 1) : _vm._e()], 1)]);
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ normalizeComponent(
  _sfc_main,
  _sfc_render,
  _sfc_staticRenderFns,
  false,
  null,
  "f18af466"
);
const NcColorPicker = __component__.exports;
export {
  NcColorPicker as N
};