@fe6/water-pro/es/color-picker/colors/template.js

An enterprise-class UI design language and Vue-based implementation

import * as _ from './utils/utils';
export default (function (instance) {
  var _instance$options = instance.options,
      components = _instance$options.components,
      useAsButton = _instance$options.useAsButton,
      inline = _instance$options.inline,
      appClass = _instance$options.appClass,
      theme = _instance$options.theme,
      lockOpacity = _instance$options.lockOpacity; // Utils

  var hidden = function hidden(con) {
    return con ? '' : 'style="display:none" hidden';
  };

  var t = function t(str) {
    return instance._t(str);
  };

  var root = _.createFromTemplate("\n      <div :ref=\"root\" class=\"pickr\">\n\n        ".concat(useAsButton ? '' : '<button type="button" :ref="button" class="pcr-button"></button>', "\n\n        <div :ref=\"app\" class=\"pcr-app ").concat(appClass || '', "\" data-theme=\"").concat(theme, "\" ").concat(inline ? 'style="position: unset"' : '', " aria-label=\"").concat(t('ui:dialog', 'color picker dialog'), "\" role=\"window\">\n          <div class=\"pcr-selection\" ").concat(hidden(components.palette), ">\n            <div :obj=\"preview\" class=\"pcr-color-preview\" ").concat(hidden(components.preview), ">\n              <button type=\"button\" :ref=\"lastColor\" class=\"pcr-last-color\" aria-label=\"").concat(t('btn:last-color'), "\"></button>\n              <div :ref=\"currentColor\" class=\"pcr-current-color\"></div>\n            </div>\n\n            <div :obj=\"palette\" class=\"pcr-color-palette\">\n              <div :ref=\"picker\" class=\"pcr-picker\"></div>\n              <div :ref=\"palette\" class=\"pcr-palette\" tabindex=\"0\" aria-label=\"").concat(t('aria:palette'), "\" role=\"listbox\"></div>\n            </div>\n\n            <div :obj=\"hue\" class=\"pcr-color-chooser\" ").concat(hidden(components.hue), ">\n              <div :ref=\"picker\" class=\"pcr-picker\"></div>\n              <div :ref=\"slider\" class=\"pcr-hue pcr-slider\" tabindex=\"0\" aria-label=\"").concat(t('aria:hue'), "\" role=\"slider\"></div>\n            </div>\n\n            <div :obj=\"opacity\" class=\"pcr-color-opacity\" ").concat(hidden(components.opacity), ">\n              <div :ref=\"picker\" class=\"pcr-picker\"></div>\n              <div :ref=\"slider\" class=\"pcr-opacity pcr-slider\" tabindex=\"0\" aria-label=\"").concat(t('aria:opacity', 'opacity selection slider'), "\" role=\"slider\"></div>\n            </div>\n          </div>\n\n          <div class=\"pcr-swatches ").concat(components.palette ? '' : 'pcr-last', "\" :ref=\"swatches\"></div>\n\n          <div :obj=\"interaction\" class=\"pcr-interaction\" ").concat(hidden(Object.keys(components.interaction).length), ">\n            <input :ref=\"result\" class=\"pcr-result\" type=\"text\" spellcheck=\"false\" ").concat(hidden(components.interaction.input), " aria-label=\"").concat(t('aria:input', 'color input field'), "\">\n\n            <input :arr=\"options\" class=\"pcr-type\" data-type=\"HEXA\" value=\"").concat(lockOpacity ? 'HEX' : 'HEXA', "\" type=\"button\" ").concat(hidden(components.interaction.hex), ">\n            <input :arr=\"options\" class=\"pcr-type\" data-type=\"RGBA\" value=\"").concat(lockOpacity ? 'RGB' : 'RGBA', "\" type=\"button\" ").concat(hidden(components.interaction.rgba), ">\n            <input :arr=\"options\" class=\"pcr-type\" data-type=\"HSLA\" value=\"").concat(lockOpacity ? 'HSL' : 'HSLA', "\" type=\"button\" ").concat(hidden(components.interaction.hsla), ">\n            <input :arr=\"options\" class=\"pcr-type\" data-type=\"HSVA\" value=\"").concat(lockOpacity ? 'HSV' : 'HSVA', "\" type=\"button\" ").concat(hidden(components.interaction.hsva), ">\n            <input :arr=\"options\" class=\"pcr-type\" data-type=\"CMYK\" value=\"CMYK\" type=\"button\" ").concat(hidden(components.interaction.cmyk), ">\n\n            <input :ref=\"save\" class=\"pcr-save\" value=\"").concat(t('btn:save'), "\" type=\"button\" ").concat(hidden(components.interaction.save), " aria-label=\"").concat(t('aria:btn:save'), "\">\n            <input :ref=\"cancel\" class=\"pcr-cancel\" value=\"").concat(t('btn:cancel'), "\" type=\"button\" ").concat(hidden(components.interaction.cancel), " aria-label=\"").concat(t('aria:btn:cancel'), "\">\n            <input :ref=\"clear\" class=\"pcr-clear\" value=\"").concat(t('btn:clear'), "\" type=\"button\" ").concat(hidden(components.interaction.clear), " aria-label=\"").concat(t('aria:btn:clear'), "\">\n          </div>\n        </div>\n      </div>\n    "));

  var _int = root.interaction; // Select option which is not hidden

  _int.options.find(function (o) {
    return !o.hidden && !o.classList.add('active');
  }); // Append method to find currently active option


  _int.type = function () {
    return _int.options.find(function (e) {
      return e.classList.contains('active');
    });
  };

  return root;
});