@gf-ui/components/dist/components/gf-button.js

跨框架核心库

import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';

/**
 * @constant 正则表达式常量
 */
const DATA_REGEX_PATTERN = {
  color16: /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/,
  colorRgb: /^(rgb|RGB)/ // 匹配是否是rgb颜色
};

/**
* @overview 16进制颜色转rgb
* @author gf
* @param { color, opacity }
* @return { string }
* @example color16ToRgb("#BF0060")
*/
function color16ToRgb(color, opacity = 1) {
  const regColor = DATA_REGEX_PATTERN.color16;
  if (!regColor.test(color)) {
    return;
  }
  let newStr = (color.toLowerCase()).replace(/\#/g, '');
  let len = newStr.length;
  if (len === 3) {
    let t = '';
    for (let i = 0; i < len; i++) {
      t += newStr.slice(i, i + 1).concat(newStr.slice(i, i + 1));
    }
    newStr = t;
  }
  let arr = [];
  for (let i = 0; i < 6; i = i + 2) {
    let s = newStr.slice(i, i + 2);
    arr.push(parseInt("0x" + s));
  }
  return `rgba(${arr.join(",")}, ${opacity})`;
}

/**
* @overview 设置样式表
* @author gf
* @param { v }  类名和样式
*/
function setStyleSheet(v) {
  let styleSheet = document.styleSheets[0];
  styleSheet.insertRule(v);
}

let tepId = 0;
function checkInternalColor(color) {
  const defaultColor = ["default", "primary", "success", "info", "warning", "danger"];
  return defaultColor.includes(color);
}
function getButtonColor(color) {
  if (checkInternalColor(color)) {
    return `gf-button--${color}`;
  }
  return `gf-button-${++tepId}`;
}
function getButtonStyle(color, textColor) {
  if (checkInternalColor(color))
    return {};
  let rgb = color16ToRgb(color, 0.8);
  const tempClass = `gf-button-${tepId}`;
  const colorTemplate = (colors) => ` border-color:${colors} !important; background-color:${colors} !important;`;
  const classHover = `.${tempClass}:hover{ ${colorTemplate(rgb)}  }`;
  const classActive = `.${tempClass}:active{ ${colorTemplate(color)} }`;
  [classActive, classHover].forEach(css => setStyleSheet(css));
  return {
    background: color,
    color: textColor
  };
}

const GfButton$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.displayOnClick = createEvent(this, "on-click", 7);
    this.color = "default"; // 按钮颜色
    this.disabled = false; // 禁用
    this.textColor = "#FFFFFF"; // 文字颜色
    this.classNames = ""; // 自定义类名
    this.plain = false; // 朴素按钮
    this.size = ""; // 大 中 小
    this.circle = false; // 圆形
    this.nativeType = 'button'; // 原生类型
  }
  componentWillLoad() {
    console.log('lifecycle load');
  }
  changeDisabled(newValue, oldValue) {
    console.log('[watch]--改变disabled状态', newValue, oldValue);
  }
  async _internal() {
    console.log('外部调用内部方法');
  }
  handClick() {
    if (this.disabled)
      return;
    this.displayOnClick.emit({
      data: {
        eventName: 'on-click',
        componentsName: "gf-button"
      }
    });
  }
  render() {
    return (h(Host, null, h("button", { onClick: this.handClick.bind(this), type: this.nativeType, class: `gf-button 
                        ${this.classNames} 
                        ${getButtonColor(this.color)} 
                        ${this.disabled ? 'is-disabled' : ''}
                        ${this.plain && "is-plain" || ''}
                        ${this.circle && "is-circle" || ''}
                        ${this.size && 'gf-button--' + this.size || ''}
                    `, style: getButtonStyle(this.color, this.textColor) }, h("slot", { name: 'icon-left' }), h("slot", null), h("slot", { name: 'icon-right' }))));
  }
  static get watchers() { return {
    "disabled": ["changeDisabled"]
  }; }
}, [4, "gf-button", {
    "color": [1],
    "disabled": [4],
    "textColor": [1, "text-color"],
    "classNames": [1, "class-names"],
    "plain": [4],
    "size": [1],
    "circle": [4],
    "nativeType": [1, "native-type"],
    "_internal": [64]
  }]);
function defineCustomElement$1() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["gf-button"];
  components.forEach(tagName => { switch (tagName) {
    case "gf-button":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, GfButton$1);
      }
      break;
  } });
}

const GfButton = GfButton$1;
const defineCustomElement = defineCustomElement$1;

export { GfButton, defineCustomElement };