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

跨框架核心库

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-d66348cc.js');

/**
 * @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 = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.displayOnClick = index.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 (index.h(index.Host, null, index.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) }, index.h("slot", { name: 'icon-left' }), index.h("slot", null), index.h("slot", { name: 'icon-right' }))));
  }
  static get watchers() { return {
    "disabled": ["changeDisabled"]
  }; }
};

exports.gf_button = GfButton;