shineout/es/utils/vars-inject.js

Shein 前端组件库

import _objectSpread from "@babel/runtime/helpers/objectSpread";
import { darken, fade } from './color';
import { set as configSet } from '../config';
import { entries } from './objects';
import { isFunc } from './is';
import hash from './hash';
import { paginationClass } from '../Pagination/styles';
import { checkinputClass } from '../Checkbox/styles';
import { buttonClass } from '../Button/styles';
import { selectClass } from '../Select/styles';
import { formClass } from '../Form/styles';
import { menuClass } from '../Menu/styles';
import { alertClass } from '../Alert/styles';
import { messageClass } from '../Message/styles';
import { modalClass } from '../Modal/styles';
import { popoverClass } from '../Popover/styles';
import { datepickerClass } from '../DatePicker/styles';
import { dropdownClass } from '../Dropdown/styles';
import { inputClass } from '../Input/styles';
import { cardClass } from '../Card/styles';
import { tooltipClass } from '../Tooltip/styles';
import { sliderClass } from '../Slider/styles';
import { tagClass } from '../Tag/styles';
import { exposeClass } from '../styles/expose';
var config = {
  injectType: 'body',
  target: undefined
};
var computedCache = {};
var styleObj = {};
export function setThemeConfig(c) {
  Object.keys(c).forEach(function (key) {
    if (key in config) {
      // @ts-ignore
      config[key] = c[key];
    }
  });
}
export function getThemeConfig(name) {
  return config[name];
}
export function getThemeTarget() {
  var target = config.target;
  if (!target) return document.body;

  if (isFunc(target)) {
    target = target();
  } else if (typeof target === 'string') {
    target = document.querySelector(target);
  }

  if (target instanceof HTMLElement) return target;
  console.error("can not find theme target dom from \"" + config.target + "\"");
  return document.body;
}
export function cleanStyleObj() {
  styleObj = {};
}
export function injectTag(custom) {
  if (custom === void 0) {
    custom = {};
  }

  if (config.target && typeof config.target !== 'string') {
    console.error('The target of themeConfig must use string when injectType = "tag"');
  }

  var selector = config.target || 'body';
  var id = "__shineoutThemeStyleContainer__" + hash(selector);

  var varObj = _objectSpread({}, styleObj, custom);

  var styleText = selector + "{" + Object.keys(varObj).map(function (key) {
    return key + ": " + varObj[key];
  }).join(';') + "}";
  var el = document.getElementById(id);

  if (el) {
    el.innerText = styleText;
  } else {
    var stylee = document.createElement('style');
    stylee.setAttribute('type', 'text/css');
    stylee.setAttribute('id', id);
    stylee.innerText = styleText;
    document.head.appendChild(stylee);
  }

  return id;
}

function getProperty(name, cache) {
  if (name === void 0) {
    name = '--btn-hover-darken';
  }

  if (cache === void 0) {
    cache = true;
  }

  if (cache && computedCache[name]) return computedCache[name];
  computedCache[name] = getComputedStyle(document.body).getPropertyValue(name).trim();
  return computedCache[name];
}

function setBodyProperty(colors, value) {
  for (var _iterator = entries(colors), _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
    var _ref;

    if (_isArray) {
      if (_i >= _iterator.length) break;
      _ref = _iterator[_i++];
    } else {
      _i = _iterator.next();
      if (_i.done) break;
      _ref = _i.value;
    }

    var _ref2 = _ref,
        cssVar = _ref2[0],
        cssValue = _ref2[1];

    if (config.injectType === 'body') {
      var target = getThemeTarget();

      if (value === undefined) {
        target.style.removeProperty(cssVar);
      } else {
        target.style.setProperty(cssVar, cssValue);
      }
    }

    if (config.injectType === 'tag') {
      if (value === undefined) {
        delete styleObj[cssVar];
      } else {
        styleObj[cssVar] = cssValue;
      }
    }
  }
}

var injects = {
  color: {
    info: {
      title: 'Color 颜色',
      name: 'color',
      path: 'Button'
    },
    conf: [{
      name: 'primary',
      type: 'color',
      attr: 'backgroundColor',
      className: buttonClass('primary'),
      desc: '主色'
    }, {
      name: 'infoColor',
      type: 'color',
      attr: 'backgroundColor',
      className: buttonClass('info')
    }, {
      name: 'warning',
      type: 'color',
      attr: 'backgroundColor',
      className: buttonClass('warning')
    }, {
      name: 'danger',
      type: 'color',
      attr: 'backgroundColor',
      className: buttonClass('danger')
    }, {
      name: 'secondary',
      type: 'color',
      attr: 'backgroundColor',
      className: buttonClass('secondary')
    }, {
      name: 'success',
      type: 'color',
      attr: 'backgroundColor',
      className: buttonClass('success')
    }, {
      name: 'gray100',
      type: 'color',
      attr: 'color',
      desc: 'Form, Datepicker, Cascader, Tree, Card, Upload, Pagination, Select',
      className: exposeClass('gray-100')
    }, {
      name: 'gray200',
      type: 'color',
      attr: 'color',
      desc: 'Form, Datepicker, Cascader, Alert, Tabs, Progress',
      className: exposeClass('gray-200')
    }, {
      name: 'gray300',
      type: 'color',
      attr: 'color',
      desc: 'Button, Card, Cascader, Upload, Image, Tooltip',
      className: exposeClass('gray-300')
    }, {
      name: 'gray400',
      type: 'color',
      attr: 'color',
      desc: 'Cascader, Select, TreeSelect, Slider, Upload, Input, Rate',
      className: exposeClass('gray-400')
    }, {
      name: 'gray500',
      type: 'color',
      attr: 'color',
      desc: 'Cascader, Select, Table, TreeSelect, Checkbox, Slider, Tree',
      className: exposeClass('gray-500')
    }, {
      name: 'gray600',
      type: 'color',
      attr: 'color',
      desc: 'Select, Datepicker, TreeSelect, Link-disabled, Table, Pagination, Tree',
      className: exposeClass('gray-600')
    }, {
      name: 'gray700',
      type: 'color',
      attr: 'color',
      desc: 'Table sort icon hover color',
      className: exposeClass('gray-700')
    }, {
      name: 'gray800',
      type: 'color',
      attr: 'color',
      desc: 'Dropdown, Card, Dropdown',
      className: exposeClass('gray-800')
    }, {
      name: 'gray900',
      type: 'color',
      attr: 'color',
      desc: 'text color, Menu',
      className: exposeClass('gray-900')
    }],

    set primary(v) {
      setBodyProperty({
        '--primary-color': v,
        '--primary-color-dark-5': darken(v, 5),
        '--primary-color-dark-15': darken(v, 15),
        '--primary-color-dark-btn-hover': darken(v, getProperty()),
        '--primary-color-lighten-40': darken(v, -40),
        '--primary-color-fade-60': fade(v, 0.6),
        '--primary-color-fade-50': fade(v, 0.5),
        '--primary-color-fade-10': fade(v, 0.1),
        '--primary-color-fade-5': fade(v, 0.05),
        '--primary-color-fade-0': fade(v, 0),
        '--primary-color-dark-5_fade-60': fade(darken(v, 5), 0.6),
        '--primary-color-dark-5_fade-0': fade(darken(v, 5), 0)
      }, v);
    },

    set infoColor(v) {
      setBodyProperty({
        '--info-color': v,
        '--info-color-dark-5': darken(v, 5),
        '--info-color-fade-60': fade(v, 0.6),
        '--info-color-dark-5_fade-60': fade(darken(v, 5), 0.6),
        '--info-color-fade-0': fade(v, 0),
        '--info-color-dark-5_fade-0': fade(darken(v, 5), 0),
        '--info-color-dark-btn-hover': darken(v, getProperty())
      }, v);
    },

    set warning(v) {
      setBodyProperty({
        '--warning-color': v,
        '--warning-color-dark-5': darken(v, 5),
        '--warning-color-fade-60': fade(v, 0.6),
        '--warning-color-dark-5_fade-60': fade(darken(v, 5), 0.6),
        '--warning-color-fade-0': fade(v, 0),
        '--warning-color-dark-5_fade-0': fade(darken(v, 5), 0),
        '--warning-color-dark-btn-hover': darken(v, getProperty())
      }, v);
    },

    set danger(v) {
      setBodyProperty({
        '--danger-color': v,
        '--danger-color-fade-25': fade(v, 0.25),
        '--danger-color-dark-5': darken(v, 5),
        '--danger-color-fade-60': fade(v, 0.6),
        '--danger-color-dark-5_fade-60': fade(darken(v, 5), 0.6),
        '--danger-color-fade-0': fade(v, 0),
        '--danger-color-dark-5_fade-0': fade(darken(v, 5), 0),
        '--danger-color-dark-btn-hover': darken(v, getProperty())
      }, v);
    },

    set success(v) {
      setBodyProperty({
        '--success-color': v,
        '--success-color-dark-5': darken(v, 5),
        '--success-color-fade-60': fade(v, 0.6),
        '--success-color-dark-5_fade-60': fade(darken(v, 5), 0.6),
        '--success-color-fade-0': fade(v, 0),
        '--success-color-dark-5_fade-0': fade(darken(v, 5), 0),
        '--success-color-dark-btn-hover': darken(v, getProperty())
      }, v);
    },

    set secondary(v) {
      setBodyProperty({
        '--secondary-color': v,
        '--secondary-color-dark-5': darken(v, 5),
        '--secondary-color-dark-btn-hover': darken(v, getProperty()),
        '--secondary-color-dark-5_fade-60': fade(darken(v, 5), 0.6),
        '--secondary-color-dark-5_fade-0': fade(darken(v, 5), 0)
      }, v);
    },

    set gray100(v) {
      setBodyProperty({
        '--gray-100': v
      }, v);
    },

    set gray200(v) {
      setBodyProperty({
        '--gray-200': v,
        '--gray-200-darken-5': darken(v, 5)
      }, v);
    },

    set gray300(v) {
      setBodyProperty({
        '--gray-300': v,
        '--gray-300-darken-hover': darken(v, getProperty()),
        '--gray-300-fade-60': fade(v, 0.6),
        '--gray-300-fade-0': fade(v, 0)
      }, v);
    },

    set gray400(v) {
      setBodyProperty({
        '--gray-400': v,
        '--gray-400-darken-20': darken(v, 20)
      }, v);
    },

    set gray500(v) {
      setBodyProperty({
        '--gray-500': v
      }, v);
    },

    set gray600(v) {
      setBodyProperty({
        '--gray-600': v,
        '--gray-600-lighten-15': darken(v, -15)
      }, v);
    },

    set gray700(v) {
      setBodyProperty({
        '--gray-700': v
      }, v);
    },

    set gray800(v) {
      setBodyProperty({
        '--gray-800': v,
        '--gray-800-darken-5': darken(v, 5)
      }, v);
    },

    set gray900(v) {
      setBodyProperty({
        '--gray-900': v,
        '--gray-900-lighten-40': darken(v, -40)
      }, v);
    }

  },
  button: {
    info: {
      title: 'Button 按钮',
      name: 'button',
      path: 'Button'
    },
    conf: [{
      name: 'fontSizeBase',
      attr: 'fontSize',
      type: 'number',
      parser: parseInt,
      className: buttonClass('_'),
      desc: '常规按钮字体大小'
    }, {
      name: 'fontSizeLarge',
      attr: 'fontSize',
      type: 'number',
      parser: parseInt,
      className: buttonClass('large'),
      desc: '大按钮字体大小'
    }, {
      name: 'fontSizeSmall',
      attr: 'fontSize',
      type: 'number',
      parser: parseInt,
      className: buttonClass('small'),
      desc: '小按钮字体大小'
    }, {
      name: 'marginLeft',
      attr: 'marginLeft',
      type: 'number',
      parser: parseInt,
      className: exposeClass('button'),
      desc: '连续按钮间距'
    }, {
      name: 'spinMargin',
      attr: 'marginRight',
      type: 'number',
      parser: parseInt,
      className: buttonClass('spin-ltr'),
      desc: '加载图标与文字间距'
    }, {
      name: 'paddingBaseHorizontal',
      attr: 'paddingLeft',
      type: 'number',
      parser: parseInt,
      className: buttonClass('_'),
      desc: '常规按钮水平内边距'
    }, {
      name: 'paddingBaseVertical',
      attr: 'paddingTop',
      type: 'number',
      parser: parseInt,
      className: buttonClass('_'),
      desc: '常规按钮垂直内边距'
    }, {
      name: 'paddingLargeHorizontal',
      attr: 'paddingLeft',
      type: 'number',
      parser: parseInt,
      className: buttonClass('large'),
      desc: '大按钮水平内边距'
    }, {
      name: 'paddingLargeVertical',
      attr: 'paddingTop',
      type: 'number',
      parser: parseInt,
      className: buttonClass('large'),
      desc: '大按钮垂直内边距'
    }, {
      name: 'paddingSmallHorizontal',
      attr: 'paddingLeft',
      type: 'number',
      parser: parseInt,
      className: buttonClass('small'),
      desc: '小按钮水平内边距'
    }, {
      name: 'paddingSmallVertical',
      attr: 'paddingTop',
      type: 'number',
      parser: parseInt,
      className: buttonClass('small'),
      desc: '小按钮垂直内边距'
    }, {
      name: 'borderRadius',
      attr: 'borderRadius',
      type: 'number',
      parser: parseInt,
      className: buttonClass('_'),
      desc: '常规按钮圆角'
    }, {
      name: 'smallBorderRadius',
      attr: 'borderRadius',
      type: 'number',
      parser: parseInt,
      className: buttonClass('small'),
      desc: '小按钮圆角'
    }, {
      name: 'largeBorderRadius',
      attr: 'borderRadius',
      type: 'number',
      parser: parseInt,
      className: buttonClass('large'),
      desc: '大按钮圆角'
    }, {
      name: 'disabledBg',
      attr: 'backgroundColor',
      type: 'color',
      className: buttonClass('disabled'),
      desc: '禁用按钮背景色'
    }, {
      name: 'disabledDelimiter',
      attr: 'borderColor',
      type: 'color',
      className: exposeClass('button-disabled-delimiter'),
      desc: '按钮组禁用状态下分隔符颜色'
    }, {
      name: 'disabledColor',
      attr: 'color',
      type: 'color',
      className: buttonClass('disabled'),
      desc: '禁用按钮文字颜色'
    }, {
      name: 'disabledBorderColor',
      attr: 'borderColor',
      type: 'color',
      className: buttonClass('disabled'),
      desc: '禁用按钮边框颜色'
    }, {
      name: 'buttonDefaultTextColor',
      attr: 'color',
      type: 'color',
      className: buttonClass('default'),
      desc: '默认样式下文字颜色'
    }, {
      name: 'buttonDefaultBorderColor',
      attr: 'borderColor',
      type: 'color',
      className: buttonClass('default'),
      desc: '默认样式下边框颜色'
    }],

    set fontSizeBase(v) {
      setBodyProperty({
        '--button-font-size-base': parseInt(v, 10) + "px"
      }, v);
    },

    set fontSizeLarge(v) {
      setBodyProperty({
        '--button-font-size-large': parseInt(v, 10) + "px"
      }, v);
    },

    set fontSizeSmall(v) {
      setBodyProperty({
        '--button-font-size-small': parseInt(v, 10) + "px"
      }, v);
    },

    set spinMargin(v) {
      setBodyProperty({
        '--button-spin-margin': parseInt(v, 10) + "px"
      }, v);
    },

    set marginLeft(v) {
      setBodyProperty({
        '--button-margin-left': parseInt(v, 10) + "px"
      }, v);
    },

    set borderRadius(v) {
      setBodyProperty({
        '--button-border-radius': parseInt(v, 10) + "px"
      }, v);
    },

    set smallBorderRadius(v) {
      setBodyProperty({
        '--button-small-border-radius': parseInt(v, 10) + "px"
      }, v);
    },

    set largeBorderRadius(v) {
      setBodyProperty({
        '--button-large-border-radius': parseInt(v, 10) + "px"
      }, v);
    },

    set paddingBaseHorizontal(v) {
      setBodyProperty({
        '--button-padding-base-horizontal': parseInt(v, 10) + "px",
        '--button-padding-base-horizontal-7': parseInt(v, 10) * 0.7 + "px"
      }, v);
    },

    set paddingLargeHorizontal(v) {
      setBodyProperty({
        '--button-padding-large-horizontal': parseInt(v, 10) + "px"
      }, v);
    },

    set paddingSmallHorizontal(v) {
      setBodyProperty({
        '--button-padding-small-horizontal': parseInt(v, 10) + "px"
      }, v);
    },

    set paddingBaseVertical(v) {
      setBodyProperty({
        '--button-padding-base-vertical': parseInt(v, 10) + "px"
      }, v);
    },

    set paddingLargeVertical(v) {
      setBodyProperty({
        '--button-padding-large-vertical': parseInt(v, 10) + "px"
      }, v);
    },

    set paddingSmallVertical(v) {
      setBodyProperty({
        '--button-padding-small-vertical': parseInt(v, 10) + "px"
      }, v);
    },

    set disabledBg(v) {
      setBodyProperty({
        '--button-disabled-bg': v
      }, v);
    },

    set disabledColor(v) {
      setBodyProperty({
        '--button-disabled-color': v
      }, v);
    },

    set disabledBorderColor(v) {
      setBodyProperty({
        '--button-disabled-border-color': v
      }, v);
    },

    set disabledDelimiter(v) {
      setBodyProperty({
        '--button-disabled-delimiter': v
      }, v);
    },

    set buttonDefaultTextColor(v) {
      setBodyProperty({
        '--button-default-text-color': v
      }, v);
    },

    set buttonDefaultBorderColor(v) {
      setBodyProperty({
        '--button-default-border': v,
        '--button-default-border-fade-0': fade(v, 0),
        '--button-default-border-fade-60': fade(v, 0.6)
      }, v);
    }

  },
  dropdown: {
    info: {
      title: 'Dropdown 下拉菜单',
      name: 'dropdown',
      path: 'Dropdown'
    },
    conf: [{
      name: 'borderWidth',
      attr: 'borderWidth',
      type: 'number',
      parser: parseInt,
      className: exposeClass('dropdown-button'),
      desc: '按钮边框宽度'
    }, {
      name: 'columnsPadding',
      attr: 'padding',
      type: 'string',
      className: dropdownClass('box-list'),
      desc: '多列平铺的内边距'
    }, {
      name: 'optionsHoverBgc',
      attr: 'backgroundColor',
      type: 'color',
      className: exposeClass('dropdown-options-hover'),
      desc: 'options hover时背景颜色'
    }, {
      name: 'optionsHoverColor',
      attr: 'color',
      type: 'color',
      className: exposeClass('dropdown-options-hover'),
      desc: 'options hover时字体颜色'
    }],

    set borderWidth(v) {
      setBodyProperty({
        '--dropdown-border-width': parseInt(v, 10) + "px"
      }, v);
    },

    set columnsPadding(v) {
      setBodyProperty({
        '--dropdown-columns-padding': v
      }, v);
    },

    set optionsHoverBgc(v) {
      setBodyProperty({
        '--dropdown-options-hover-bgc': v
      }, v);
    },

    set optionsHoverColor(v) {
      setBodyProperty({
        '--dropdown-options-hover-color': v
      }, v);
    }

  },
  form: {
    info: {
      title: 'Form 表单',
      name: 'form',
      path: 'Form'
    },
    conf: [{
      name: 'itemMarginBottom',
      className: formClass('item'),
      attr: 'marginBottom',
      type: 'number',
      parser: parseInt,
      desc: '条目垂直间隔'
    }, {
      name: 'itemMarginRight',
      className: exposeClass('form-inline'),
      attr: 'marginRight',
      type: 'number',
      parser: parseInt,
      desc: '条目水平间隔'
    }, {
      name: 'tipColor',
      className: exposeClass('form-tip'),
      attr: 'color',
      type: 'color',
      desc: '提示文字颜色'
    }, {
      name: 'labelHorizontalAlign',
      className: exposeClass('form-label'),
      attr: 'textAlign',
      type: ['start', 'center', 'end'],
      desc: '标签对齐方式'
    }, {
      name: 'formTipFontSize',
      className: exposeClass('form-tip'),
      attr: 'fontSize',
      type: 'number',
      parser: parseInt,
      desc: '提示信息字体大小'
    }, {
      name: 'formErrorLineHeight',
      className: exposeClass('form-error'),
      attr: 'lineHeight',
      type: 'number',
      parser: parseFloat,
      desc: '校验错误文字行高'
    }, {
      name: 'formErrorMarginTop',
      className: exposeClass('form-error'),
      attr: 'marginTop',
      type: 'number',
      parser: parseInt,
      desc: '校验错误文字顶部间距'
    }, {
      name: 'formErrorMarginBottom',
      className: exposeClass('form-error'),
      attr: 'marginBottom',
      type: 'number',
      parser: parseInt,
      desc: '校验错误文字底部间距'
    }, {
      name: 'formKeepErrorHeight',
      className: exposeClass('form-keep-error'),
      attr: 'min-height',
      type: 'number',
      parser: parseInt,
      desc: '错误提示不撑开表单高度时的最小间距'
    }],

    set itemMarginBottom(v) {
      setBodyProperty({
        '--form-item-margin-bottom': parseInt(v, 10) + "px"
      }, v);
    },

    set itemMarginRight(v) {
      setBodyProperty({
        '--form-item-margin-right': parseInt(v, 10) + "px"
      }, v);
    },

    set tipColor(v) {
      setBodyProperty({
        '--form-tip-color': v
      }, v);
    },

    set labelHorizontalAlign(v) {
      setBodyProperty({
        '--form-item-label-align': v
      }, v);
    },

    set formTipFontSize(v) {
      setBodyProperty({
        '--form-tip-font-size': parseInt(v, 10) + "px"
      }, v);
    },

    set formErrorLineHeight(v) {
      setBodyProperty({
        '--form-item-error-line-height': parseInt(v, 10) + "px"
      }, v);
    },

    set formErrorMarginTop(v) {
      setBodyProperty({
        '--form-item-error-margin-top': parseInt(v, 10) + "px"
      }, v);
    },

    set formErrorMarginBottom(v) {
      setBodyProperty({
        '--form-item-error-margin-bottom': parseInt(v, 10) + "px"
      }, v);
    },

    set formKeepErrorHeight(v) {
      setBodyProperty({
        '--form-Item-min-keep-height': parseInt(v, 10) + "px"
      }, v);
    }

  },
  checkbox: {
    info: {
      title: 'Checkbox 复选框',
      name: 'checkbox',
      path: 'Checkbox'
    },
    conf: [{
      name: 'marginRight',
      className: checkinputClass('_'),
      attr: 'marginRight',
      type: 'number',
      parser: parseInt,
      desc: '水平间隔'
    }, {
      name: 'borderWidth',
      className: exposeClass('checkbox-indicator'),
      attr: 'width',
      type: 'number',
      parser: parseInt,
      desc: '边框宽度'
    }, {
      name: 'color',
      className: checkinputClass('_'),
      attr: 'color',
      type: 'color',
      desc: '文字颜色'
    }, {
      name: 'borderColor',
      className: exposeClass('checkbox-indicator'),
      attr: 'borderColor',
      type: 'color',
      desc: '边框颜色'
    }, {
      name: 'textPaddingX',
      className: exposeClass('checkbox-text'),
      attr: 'paddingRight',
      type: 'number',
      parser: parseInt,
      desc: '文字水平内间距'
    }, {
      name: 'indicatorBorderRadius',
      className: exposeClass('checkbox-indicator'),
      attr: 'borderRadius',
      type: 'number',
      parser: parseInt,
      min: 3,
      desc: '圆角'
    }, {
      name: 'checkboxDisabledBgc',
      className: exposeClass('checkbox-disabled'),
      attr: 'backgroundColor',
      type: 'color',
      desc: 'Checkbox 和 Radio 未选中状态禁用后的背景色'
    }, {
      name: 'checkboxCheckedDisabledBgc',
      className: exposeClass('checkbox-checked-disabled'),
      attr: 'backgroundColor',
      type: 'color',
      desc: 'Checkbox 和 Radio 选中状态下禁用后的背景色'
    }],

    set marginRight(v) {
      setBodyProperty({
        '--checkbox-margin-right': parseInt(v, 10) + "px"
      }, v);
    },

    set color(v) {
      setBodyProperty({
        '--checkinput-color': v
      }, v);
    },

    set borderColor(v) {
      setBodyProperty({
        '--checkbox-border-color': v
      }, v);
    },

    set borderWidth(v) {
      setBodyProperty({
        '--checkbox-border-width': parseInt(v, 10) + "px"
      }, v);
    },

    set textPaddingX(v) {
      setBodyProperty({
        '--checkbox-text-padding-x': parseInt(v, 10) + "px"
      }, v);
    },

    set indicatorBorderRadius(v) {
      setBodyProperty({
        '--checkbox-indicator-border-radius': parseInt(v, 10) + "px"
      }, v);
    },

    set checkboxDisabledBgc(v) {
      setBodyProperty({
        '--checkbox-disabled-bgc': v
      }, v);
    },

    set checkboxCheckedDisabledBgc(v) {
      setBodyProperty({
        '--checkbox-checked-disabled-bgc': v
      }, v);
    }

  },
  radio: {
    info: {
      title: 'Radio 单选框',
      name: 'radio',
      path: 'Radio'
    },
    conf: [{
      name: 'size',
      className: exposeClass('radio'),
      attr: 'width',
      type: 'number',
      parser: parseInt,
      min: 0,
      max: 40,
      desc: '尺寸'
    }, {
      name: 'borderWidth',
      className: exposeClass('radio'),
      attr: 'borderWidth',
      type: 'number',
      parser: parseInt,
      min: 0,
      max: 10,
      desc: '选中的边框宽度'
    }, {
      name: 'innerWidth',
      className: exposeClass('radio-inner'),
      attr: 'width',
      type: 'number',
      parser: parseInt,
      min: 0,
      max: 10,
      desc: '选中点尺寸'
    }, {
      name: 'uncheckBorderWidth',
      className: exposeClass('radio-uncheck'),
      attr: 'width',
      type: 'number',
      parser: parseInt,
      min: 0,
      desc: '未选中边框宽度'
    }, {
      name: 'color',
      className: exposeClass('radio'),
      attr: 'color',
      type: 'color',
      desc: '文字颜色'
    }],

    set size(v) {
      setBodyProperty({
        '--radio-width': parseInt(v, 10) + "px"
      }, v);
    },

    set borderWidth(v) {
      setBodyProperty({
        '--radio-border-width': parseInt(v, 10) + "px"
      }, v);
    },

    set innerWidth(v) {
      setBodyProperty({
        '--radio-inner-width': parseInt(v, 10) + "px"
      }, v);
    },

    set uncheckBorderWidth(v) {
      setBodyProperty({
        '--radio-border-uncheck-width': parseInt(v, 10) + "px"
      }, v);
    },

    set color(v) {
      setBodyProperty({
        '--radio-text-color': v
      }, v);
    }

  },
  input: {
    info: {
      title: 'Input 输入框',
      name: 'input',
      path: 'Input'
    },
    conf: [{
      name: 'color',
      className: inputClass('_'),
      attr: 'color',
      type: 'color',
      desc: '文字颜色'
    }, {
      name: 'borderRadius',
      className: inputClass('_'),
      attr: 'borderRadius',
      type: 'number',
      parser: parseInt,
      desc: '圆角'
    }, {
      name: 'underlineHeight',
      className: inputClass('_', 'underline'),
      attr: 'borderBottomWidth',
      type: 'number',
      parser: parseInt,
      desc: '下边框宽度(仅在下边框模式生效)'
    }, {
      name: 'dropdownBorderRadius',
      className: datepickerClass('picker'),
      attr: 'borderRadius',
      type: 'number',
      parser: parseInt,
      desc: '下拉框圆角，例如Select Options'
    }, {
      name: 'focusWidth',
      className: inputClass('focus'),
      attr: 'boxShadow',
      type: 'number',
      max: 20,
      parser: function parser(v) {
        return parseInt(v.split(' ').pop(), 10);
      },
      desc: '聚焦发散光宽度'
    }, {
      name: 'disabledBg',
      className: inputClass('disabled'),
      attr: 'backgroundColor',
      type: 'color',
      desc: '禁用背景色'
    }, {
      name: 'disabledColor',
      className: inputClass('disabled'),
      attr: 'color',
      type: 'color',
      desc: '禁用字体色'
    }, {
      name: 'borderColor',
      className: inputClass('_'),
      attr: 'borderColor',
      type: 'color',
      desc: '边框颜色'
    }, {
      name: 'borderHoverColor',
      className: exposeClass('input-focus'),
      attr: 'borderColor',
      type: 'color',
      desc: '鼠标悬浮、聚焦时的边框色'
    }, {
      name: 'placeholderColor',
      className: exposeClass('input-placeholder'),
      attr: 'color',
      type: 'color',
      desc: '占位文字颜色'
    }, {
      name: 'placeholderSize',
      className: exposeClass('input-placeholder'),
      attr: 'fontSize',
      type: 'number',
      parser: parseInt,
      desc: '占位文字大小'
    }, {
      name: 'clearBg',
      className: exposeClass('input-clear'),
      attr: 'backgroundColor',
      type: 'color',
      desc: '清空图标背景色'
    }, {
      name: 'clearHoverBg',
      className: exposeClass('input-clear-hover'),
      attr: 'backgroundColor',
      type: 'color',
      desc: '清空图标鼠标悬浮背景色'
    }],

    set color(v) {
      setBodyProperty({
        '--input-text-color': v
      }, v);
    },

    set borderRadius(v) {
      setBodyProperty({
        '--input-border-radius': parseInt(v, 10) + "px"
      }, v);
    },

    set underlineHeight(v) {
      setBodyProperty({
        '--input-underline-height': parseInt(v, 10) + "px"
      }, v);
    },

    set dropdownBorderRadius(v) {
      setBodyProperty({
        '--input-dropdown-border-radius': parseInt(v, 10) + "px"
      }, v);
    },

    set disabledBg(v) {
      setBodyProperty({
        '--input-bg-disabled': v
      }, v);
    },

    set disabledColor(v) {
      setBodyProperty({
        '--input-disabled-color': v
      }, v);
    },

    set borderColor(v) {
      setBodyProperty({
        '--input-border-color': v
      }, v);
    },

    set borderHoverColor(v) {
      setBodyProperty({
        '--input-border-focus-color': v,
        '--input-border-focus-color-fade-25': fade(v, 0.25)
      }, v);
    },

    set focusWidth(v) {
      setBodyProperty({
        '--input-focus-width': parseInt(v, 10) + "px"
      }, v);
    },

    set placeholderColor(v) {
      setBodyProperty({
        '--input-placeholder-color': v
      }, v);
    },

    set placeholderSize(v) {
      setBodyProperty({
        '--input-placeholder-size': parseInt(v, 10) + "px"
      }, v);
    },

    set clearBg(v) {
      setBodyProperty({
        '--input-clear-bg-color': v
      }, v);
    },

    set clearHoverBg(v) {
      setBodyProperty({
        '--input-clear-bg-hover-color': v
      }, v);
    }

  },
  select: {
    info: {
      title: 'Select 选择框',
      name: 'select',
      path: 'Select'
    },
    conf: [{
      name: 'resultPaddingHorizontal',
      className: exposeClass('select-result-item'),
      attr: 'paddingLeft',
      type: 'number',
      parser: parseInt,
      desc: '选中值水平内边距'
    }, {
      name: 'resultPaddingVertical',
      className: exposeClass('select-result-item'),
      attr: 'paddingTop',
      type: 'number',
      parser: parseInt,
      desc: '选中值垂直内边距'
    }, {
      name: 'itemColor',
      className: selectClass('option'),
      attr: 'color',
      type: 'color',
      desc: '选项文字颜色'
    }, {
      name: 'itemBgColor',
      className: selectClass('option'),
      attr: 'backgroundColor',
      type: 'color',
      desc: '选项背景颜色'
    }, {
      name: 'disabledBg',
      className: selectClass('option', 'disabled'),
      attr: 'backgroundColor',
      type: 'color',
      desc: '禁用选项背景色'
    }, {
      name: 'disabledColor',
      className: selectClass('option', 'disabled'),
      attr: 'color',
      type: 'color',
      desc: '禁用选项文字颜色'
    }, {
      name: 'itemActiveBg',
      className: selectClass('active', 'option'),
      attr: 'backgroundColor',
      type: 'color',
      desc: '选中项背景色'
    }, {
      name: 'itemActiveColor',
      className: selectClass('active', 'option'),
      attr: 'color',
      type: 'color',
      desc: '选中项文字颜色'
    }, {
      name: 'itemHoverBg',
      className: exposeClass('select-option-hover'),
      attr: 'backgroundColor',
      type: 'color',
      desc: '选项鼠标悬浮背景色'
    }, {
      name: 'itemHoverColor',
      className: exposeClass('select-option-hover'),
      attr: 'color',
      type: 'color',
      desc: '选项鼠标悬浮文字颜色'
    }, {
      name: 'compressedMoreHoverBg',
      className: exposeClass('select-compressed'),
      attr: 'backgroundColor',
      type: 'color',
      desc: 'compressed模式按钮鼠标悬浮背景色'
    }, {
      name: 'clearIconBg',
      className: exposeClass('select-close'),
      attr: 'backgroundColor',
      type: 'color',
      desc: '清空按钮背景色'
    }, {
      name: 'treeDisabledBg',
      className: exposeClass('select-tree-disabled'),
      attr: 'backgroundColor',
      type: 'color',
      desc: '树形选择禁用选项背景色'
    }, {
      name: 'treeContentColor',
      className: exposeClass('select-tree'),
      attr: 'color',
      type: 'color',
      desc: '树形选择可点击选项文字颜色'
    }, {
      name: 'treeDisableContentColor',
      className: exposeClass('select-tree-disabled'),
      attr: 'color',
      type: 'color',
      desc: '树形选择禁用选项文字颜色'
    }, {
      name: 'treeIconHoverBg',
      className: exposeClass('select-tree-icon-hover'),
      attr: 'backgroundColor',
      type: 'color',
      desc: '树形选择展开箭头背景色'
    }, {
      name: 'treeNodeHoverBg',
      className: exposeClass('select-tree-node-hover'),
      attr: 'backgroundColor',
      type: 'color',
      desc: '树形选择节点hover状态背景色'
    }, {
      name: 'treeNodeHoverColor',
      className: exposeClass('select-tree-node-hover'),
      attr: 'color',
      type: 'color',
      desc: '树形选择节点hover状态文字颜色'
    }, {
      name: 'treeNodeSelectedBg',
      className: exposeClass('select-tree-node-selected'),
      attr: 'backgroundColor',
      type: 'color',
      desc: '树形选择节点选中状态背景色'
    }, {
      name: 'treeNodeSelectedColor',
      className: exposeClass('select-tree-node-selected'),
      attr: 'color',
      type: 'color',
      desc: '树形选择节点选中状态文字颜色'
    }],

    set resultPaddingVertical(v) {
      setBodyProperty({
        '--select-result-padding-vertical': parseInt(v, 10) + "px"
      }, v);
    },

    set resultPaddingHorizontal(v) {
      setBodyProperty({
        '--select-result-padding-horizontal': parseInt(v, 10) + "px",
        '--select-result-padding-horizontal-16': parseInt(v, 10) + 16 + "px"
      }, v);
    },

    set itemColor(v) {
      setBodyProperty({
        '--select-option-color': v
      }, v);
    },

    set itemBgColor(v) {
      setBodyProperty({
        '--select-option-bg-color': v
      }, v);
    },

    set disabledBg(v) {
      setBodyProperty({
        '--select-disabled-bg-color': v
      }, v);
    },

    set disabledColor(v) {
      setBodyProperty({
        '--select-disabled-color': v
      }, v);
    },

    set itemActiveBg(v) {
      setBodyProperty({
        '--select-item-active-bg': v
      }, v);
    },

    set itemActiveColor(v) {
      setBodyProperty({
        '--select-item-active-color': v
      }, v);
    },

    set itemHoverBg(v) {
      setBodyProperty({
        '--select-option-hover-bg': v
      }, v);
    },

    set itemHoverColor(v) {
      setBodyProperty({
        '--select-option-hover-color': v
      }, v);
    },

    set compressedMoreHoverBg(v) {
      setBodyProperty({
        '--select-compressed-hover-bg': v
      }, v);
    },

    set clearIconBg(v) {
      setBodyProperty({
        '--select-clear-bg-color': v
      }, v);
    },

    set treeDisabledBg(v) {
      setBodyProperty({
        '--select-tree-disabled-bg-color': v
      }, v);
    },

    set treeContentColor(v) {
      setBodyProperty({
        '--select-tree-content-color': v
      }, v);
    },

    set treeDisableContentColor(v) {
      setBodyProperty({
        '--select-tree-disabled-content-color': v
      }, v);
    },

    set treeIconHoverBg(v) {
      setBodyProperty({
        '--select-tree-icon-hover-bg-color': v
      }, v);
    },

    set treeNodeHoverBg(v) {
      setBodyProperty({
        '--select-tree-node-hover-bg': v
      }, v);
    },

    set treeNodeHoverColor(v) {
      setBodyProperty({
        '--select-tree-node-hover-color': v
      }, v);
    },

    set treeNodeSelectedBg(v) {
      setBodyProperty({
        '--select-tree-node-selected-bg': v
      }, v);
    },

    set treeNodeSelectedColor(v) {
      setBodyProperty({
        '--select-tree-node-selected-color': v
      }, v);
    }

  },
  datepicker: {
    info: {
      title: 'Datepicker 日期选择',
      name: 'datepicker',
      path: 'Datepicker'
    },
    conf: [{
      name: 'rectBorderRadius',
      className: exposeClass('datepicker-month-item'),
      attr: 'borderRadius',
      type: 'number',
      parser: parseInt,
      desc: '年份、月份选中项圆角'
    }, {
      name: 'dayHoverBgc',
      className: exposeClass('datepicker-day-hover-bgc'),
      attr: 'backgroundColor',
      type: 'color',
      desc: 'day hover时背景颜色'
    }],

    set rectBorderRadius(v) {
      setBodyProperty({
        '--datepicker-rect-active-border-radius': parseInt(v, 10) + "px"
      }, v);
    },

    set dayHoverBgc(v) {
      setBodyProperty({
        '--datepicker-day-hover-bgc': v
      }, v);
    }

  },
  slider: {
    info: {
      title: 'Slider 滑块',
      name: 'slider',
      path: 'Slider'
    },
    conf: [{
      name: 'indicatorBg',
      className: exposeClass('slider-indicator'),
      attr: 'backgroundColor',
      type: 'color',
      desc: '滑块背景色'
    }, {
      name: 'indicatorSize',
      className: exposeClass('slider-indicator'),
      attr: 'width',
      type: 'number',
      min: 8,
      max: 40,
      parser: parseInt,
      desc: '滑块尺寸'
    }, {
      name: 'indicatorBoxShadow',
      className: exposeClass('slider-indicator'),
      attr: 'boxShadow',
      type: 'string',
      desc: '滑块阴影'
    }, {
      name: 'barBg',
      className: exposeClass('slider-bar'),
      attr: 'backgroundColor',
      type: 'color',
      desc: '滑动条背景色'
    }, {
      name: 'disabledBarBg',
      className: exposeClass('slider-bar-disabled'),
      attr: 'backgroundColor',
      type: 'color',
      desc: '滑动条禁用背景色'
    }, {
      name: 'disabledIndicatorBorder',
      className: exposeClass('slider-indicator-disabled'),
      attr: 'borderColor',
      type: 'color',
      desc: '禁用状态下滑块边框色'
    }, {
      name: 'disabledIndicatorBg',
      className: exposeClass('slider-indicator-disabled'),
      attr: 'background',
      type: 'color',
      desc: '禁用状态下滑块边背景色'
    }, {
      name: 'height',
      className: sliderClass('background'),
      attr: 'height',
      type: 'number',
      parser: parseInt,
      desc: '滑动条高度'
    }, {
      name: 'borderRadius',
      className: sliderClass('background'),
      attr: 'borderRadius',
      type: 'number',
      parser: parseInt,
      desc: '滑动条圆角'
    }, {
      name: 'valueBottom',
      className: exposeClass('slider-value'),
      attr: 'height',
      type: 'number',
      parser: parseInt,
      desc: '当前值距离滑块距离'
    }],

    set indicatorBg(v) {
      setBodyProperty({
        '--slider-indicator-bg': v
      }, v);
    },

    set indicatorSize(v) {
      setBodyProperty({
        '--slider-indicator-size': parseInt(v, 10) + "px",
        '--slider-indicator-size-half': parseInt(v, 10) / 2 + "px"
      }, v);
    },

    set indicatorBoxShadow(v) {
      setBodyProperty({
        '--slider-indicator-box-shadow': v
      }, v);
    },

    set barBg(v) {
      setBodyProperty({
        '--slider-bar-color': v
      }, v);
    },

    set disabledBarBg(v) {
      setBodyProperty({
        '--slider-disabled-bar-bg': v
      }, v);
    },

    set disabledIndicatorBorder(v) {
      setBodyProperty({
        '--slider-disbaled-indicator-border-color': v
      }, v);
    },

    set disabledIndicatorBg(v) {
      setBodyProperty({
        '--slider-disbaled-indicator-bg': v
      }, v);
    },

    set height(v) {
      setBodyProperty({
        '--slider-bar-height': parseInt(v, 10) + "px"
      }, v);
    },

    set borderRadius(v) {
      setBodyProperty({
        '--slider-border-radius': parseInt(v, 10) + "px"
      }, v);
    },

    set valueBottom(v) {
      setBodyProperty({
        '--slider-value-bottom': parseInt(v, 10) + "px"
      }, v);
    }

  },
  table: {
    info: {
      title: 'Table 表格',
      name: 'table',
      path: 'Table'
    },
    conf: [{
      name: 'scrollRatio',
      className: exposeClass('table-scroll-ratio'),
      attr: 'width',
      parser: parseInt,
      type: 'number',
      desc: '滚动速率，仅在 Windows 下有效',
      logic: true,
      max: 500
    }, {
      name: 'headBg',
      className: exposeClass('table-head'),
      attr: 'backgroundColor',
      type: 'color',
      desc: '表头背景色'
    }, {
      name: 'headColor',
      className: exposeClass('table-head'),
      attr: 'color',
      type: 'color',
      desc: '表头文字颜色'
    }, {
      name: 'bodyBg',
      className: exposeClass('table-body'),
      attr: 'backgroundColor',
      type: 'color',
      desc: '表格内容背景色'
    }, {
      name: 'rowSpacing',
      className: exposeClass('table-spacing'),
      attr: 'height',
      type: 'number',
      parser: parseInt,
      desc: '行间距'
    }, {
      name: 'rowBorderRadius',
      className: exposeClass('table-spacing'),
      attr: 'borderRadius',
      type: 'number',
      parser: parseInt,
      desc: '行圆角'
    }, {
      name: 'headFontWeight',
      className: exposeClass('table-head'),
      attr: 'fontWeight',
      type: 'number',
      max: 900,
      min: 100,
      parser: parseInt,
      desc: '表头字重'
    }, {
      name: 'borderColor',
      className: exposeClass('table-head'),
      attr: 'borderColor',
      type: 'color',
      desc: '边框颜色'
    }, {
      name: 'hoverBg',
      className: exposeClass('table-head-hover'),
      attr: 'backgroundColor',
      type: 'color',
      desc: '鼠标悬浮行背景色'
    }, {
      name: 'selectedBg',
      className: exposeClass('table-selected'),
      attr: 'backgroundColor',
      type: 'color',
      desc: '选中行背景色'
    }, {
      name: 'textColor',
      className: exposeClass('table'),
      attr: 'color',
      type: 'color',
      desc: '文字颜色'
    }, {
      name: 'borderRadiusTop',
      className: exposeClass('table-head'),
      attr: 'borderTopLeftRadius',
      type: 'number',
      parser: parseInt,
      desc: '表格头部圆角'
    }, {
      name: 'headerCellPadding',
      className: exposeClass('table-head'),
      attr: 'padding',
      type: 'string',
      desc: '表头分组内边距'
    }, {
      name: 'smallCellPadding',
      className: exposeClass('table-small'),
      attr: 'padding',
      type: 'string',
      desc: '紧凑表格单元格内边距'
    }, {
      name: 'cellPaddingHorizontal',
      className: exposeClass('table-cell'),
      attr: 'paddingLeft',
      type: 'number',
      parser: parseInt,
      desc: '单元格水平内边距'
    }, {
      name: 'cellPaddingVertical',
      className: exposeClass('table-cell'),
      attr: 'paddingTop',
      type: 'number',
      parser: parseInt,
      desc: '单元格垂直内边距'
    }, {
      name: 'treeExpandIconMarginRight',
      className: exposeClass('table-tree-expand'),
      attr: 'marginRight',
      type: 'number',
      parser: parseInt,
      desc: '子表格展开/收起按钮距离文字距离'
    }, {
      name: 'fixedStart',
      className: exposeClass('table-fixed-start'),
      attr: 'backgroundColor',
      type: 'color',
      desc: '固定列渐变色开始颜色'
    }, {
      name: 'fixedEnd',
      className: exposeClass('table-fixed-end'),
      attr: 'backgroundColor',
      type: 'color',
      desc: '固定列渐变色结束颜色'
    }, {
      name: 'tableEvenBgc',
      className: exposeClass('table-even'),
      attr: 'backgroundColor',
      type: 'color',
      desc: '偶数行背景颜色'
    }, {
      name: 'tableOddBgc',
      className: exposeClass('table-odd'),
      attr: 'backgroundColor',
      type: 'color',
      desc: '奇数行背景颜色'
    }, {
      name: 'marginBottom',
      className: exposeClass('table'),
      attr: 'marginBottom',
      type: 'number',
      parser: parseInt,
      desc: '表格底部外边距'
    }, {
      name: 'headerTopDivider',
      className: exposeClass('table-head-top'),
      attr: 'borderWidth',
      type: 'number',
      parser: parseInt,
      desc: '无边框表格头部边框线'
    }],

    set scrollRatio(v) {
      var rate = typeof v === 'number' ? v : parseInt(v, 10);
      configSet('scrollRatio', rate);
      setBodyProperty({
        '--table-scroll-ratio': rate + "px"
      }, v);
    },

    set headBg(v) {
      setBodyProperty({
        '--table-head-bg': v
      }, v);
    },

    set hoverBg(v) {
      setBodyProperty({
        '--table-hover-bg': v
      }, v);
    },

    set selectedBg(v) {
      setBodyProperty({
        '--table-selected-row-bg': v
      }, v);
    },

    set headColor(v) {
      setBodyProperty({
        '--table-head-color': v
      }, v);
    },

    set bodyBg(v) {
      setBodyProperty({
        '--table-body-bg': v
      }, v);
    },

    set rowSpacing(v) {
      setBodyProperty({
        '--table-row-spacing': parseInt(v, 10) + "px"
      }, v);
    },

    set rowBorderRadius(v) {
      setBodyProperty({
        '--table-row-border-radius': parseInt(v, 10) + "px"
      }, v);
    },

    set headFontWeight(v) {
      setBodyProperty({
        '--table-head-font-weight': "" + parseInt(v, 10)
      }, v);
    },

    set borderColor(v) {
      setBodyProperty({
        '--table-border-color': v
      }, v);
    },

    set textColor(v) {
      setBodyProperty({
        '--table-color': v
      }, v);
    },

    set borderRadiusTop(v) {
      setBodyProperty({
        '--table-border-radius-top': parseInt(v, 10) + "px"
      }, v);
    },

    set headerCellPadding(v) {
      setBodyProperty({
        '--table-header-cell-padding': v
      }, v);
    },

    set smallCellPadding(v) {
      setBodyProperty({
        '--table-small-cell-padding': v
      }, v);
    },

    set cellPaddingHorizontal(v) {
      setBodyProperty({
        '--table-cell-padding-horizontal': parseInt(v, 10) + "px"
      }, v);
    },

    set cellPaddingVertical(v) {
      setBodyProperty({
        '--table-cell-padding-vertical': parseInt(v, 10) + "px"
      }, v);
    },

    set treeExpandIconMarginRight(v) {
      setBodyProperty({
        '--table-tree-expand-icon-margin-right': parseInt(v, 10) + "px"
      }, v);
    },

    set fixedStart(v) {
      setBodyProperty({
        '--table-fixed-start-color': v
      }, v);
    },

    set fixedEnd(v) {
      setBodyProperty({
        '--table-fixed-end-color': v
      }, v);
    },

    set tableEvenBgc(v) {
      setBodyProperty({
        '--table-even-td-bgc': v
      }, v);
    },

    set tableOddBgc(v) {
      setBodyProperty({
        '--table-odd-td-bgc': v
      }, v);
    },

    set marginBottom(v) {
      setBodyProperty({
        '--table-margin-bottom': parseInt(v, 10) + "px"
      }, v);
    },

    set headerTopDivider(v) {
      setBodyProperty({
        '--table-header-top-divider-width': parseInt(v, 10) + "px"
      }, v);
    }

  },
  pagination: {
    info: {
      title: 'Pagination 分页',
      name: 'pagination',
      path: 'Pagination'
    },
    conf: [{
      name: 'borderRadius',
      className: paginationClass('item'),
      attr: 'borderRadius',
      type: 'number',
      parser: parseInt,
      desc: '项目圆角'
    }, {
      name: 'borderWidth',
      className: paginationClass('item'),
      attr: 'borderWidth',
      type: 'number',
      parser: parseInt,
      desc: '项目边框宽度'
    }, {
      name: 'hoverBorderColor',
      className: exposeClass('pagination-hover'),
      attr: 'borderColor',
      type: 'color',
      desc: '项目鼠标悬浮边框颜色'
    }, {
      name: 'hoverColor',
      className: exposeClass('pagination-hover'),
      attr: 'color',
      type: 'color',
      desc: '项目鼠标悬浮文字颜色'
    }, {
      name: 'hoverBg',
      className: exposeClass('pagination-hover'),
      attr: 'backgroundColor',
      type: 'color',
      desc: '项目鼠标悬浮背景色'
    }, {
      name: 'fontSize',
      className: exposeClass('pagination'),
      attr: 'fontSize',
      type: 'number',
      parser: parseInt,
      desc: '字体大小'
    }, {
      name: 'defaultSize',
      className: exposeClass('pagination-default'),
      attr: 'width',
      type: 'number',
      parser: parseInt,
      desc: '默认尺寸宽高'
    }, {
      name: 'smallSize',
      className: exposeClass('pagination-small'),
      attr: 'width',
      type: 'number',
      parser: parseInt,
      desc: '小号尺寸宽高'
    }, {
      name: 'largeSize',
      className: exposeClass('pagination-large'),
      attr: 'width',
      type: 'number',
      parser: parseInt,
      desc: '大号尺寸宽高'
    }],

    set borderRadius(v) {
      setBodyProperty({
        '--pagination-border-radius': parseInt(v, 10) + "px"
      }, v);
    },

    set borderWidth(v) {
      setBodyProperty({
        '--pagination-border-width': parseInt(v, 10) + "px"
      }, v);
    },

    set hoverBorderColor(v) {
      setBodyProperty({
        '--pagination-hover-border': v
      }, v);
    },

    set hoverColor(v) {
      setBodyProperty({
        '--pagination-hover-color': v
      }, v);
    },

    set hoverBg(v) {
      setBodyProperty({
        '--pagination-hover-bg': v
      }, v);
    },

    set fontSize(v) {
      setBodyProperty({
        '--pagination-font-size': parseInt(v, 10) + "px"
      }, v);
    },

    set defaultSize(v) {
      setBodyProperty({
        '--pagination-size': parseInt(v, 10) + "px"
      }, v);
    },

    set smallSize(v) {
      setBodyProperty({
        '--pagination-size-small': parseInt(v, 10) + "px"
      }, v);
    },

    set largeSize(v) {
      setBodyProperty({
        '--pagination-size-large': parseInt(v, 10) + "px"
      }, v);
    }

  },
  tag: {
    info: {
      title: 'Tag 标签',
      name: 'tag',
      path: 'Tag'
    },
    conf: [{
      name: 'bg',
      className: tagClass('_'),
      attr: 'backgroundColor',
      type: 'color',
      desc: '默认背景色'
    }, {
      name: 'successBg',
      className: tagClass('success'),
      attr: 'backgroundColor',
      type: 'color',
      desc: 'success类型背景色'
    }, {
      name: 'infoBg',
      className: tagClass('info'),
      attr: 'backgroundColor',
      type: 'color',
      desc: 'info类型背景色'
    }, {
      name: 'warningBg',
      className: tagClass('warning'),
      attr: 'backgroundColor',
      type: 'color',
      desc: 'warning类型背景色'
    }, {
      name: 'dangerBg',
      className: tagClass('danger'),
      attr: 'backgroundColor',
      type: 'color',
      desc: 'danger类型背景色'
    }, {
      name: 'color',
      className: tagClass('_'),
      attr: 'color',
      type: 'color',
      desc: '默认文字颜色'
    }, {
      name: 'successColor',
      className: tagClass('success'),
      attr: 'color',
      type: 'color',
      desc: 'success类型文字颜色'
    }, {
      name: 'infoColor',
      className: tagClass('info'),
      attr: 'color',
      type: 'color',
      desc: 'info类型文字颜色'
    }, {
      name: 'warningColor',
      className: tagClass('warning'),
      attr: 'color',
      type: 'color',
      desc: 'warning类型文字颜色'
    }, {
      name: 'dangerColor',
      className: tagClass('danger'),
      attr: 'color',
      type: 'color',
      desc: 'danger类型文字颜色'
    }, {
      name: 'borderColor',
      className: tagClass('default'),
      attr: 'borderColor',
      type: 'color',
      desc: '边框颜色'
    }, {
      name: 'closeColor',
      className: exposeClass('tag-close'),
      attr: 'color',
      type: 'color',
      desc: '关闭按钮颜色'
    }, {
      name: 'closeHoverCol