@gf-ui/components
Version:
348 lines (318 loc) • 16.5 kB
JavaScript
import { r as registerInstance, h, H as Host, c as createEvent } from './index-e22013e4.js';
import { I as Icons } from './index-22c022f8.js';
const svgData$4 = {"name":"svg","type":"element","value":"","attributes":{"class":"icon","viewBox":"0 0 1024 1024","version":"1.1","xmlns":"http://www.w3.org/2000/svg"},"children":[{"name":"path","type":"element","value":"","attributes":{"fill":"currentColor","d":"M553.936 504l79.2 79.2a16 16 0 0 1 0 22.624l-11.312 11.312a16 16 0 0 1-22.624 0l-79.2-79.2-79.2 79.2a16 16 0 0 1-22.624 0l-11.312-11.312a16 16 0 0 1 0-22.624l79.2-79.2-79.2-79.2a16 16 0 0 1 0-22.624l11.312-11.312a16 16 0 0 1 22.624 0l79.2 79.2 79.2-79.2a16 16 0 0 1 22.624 0l11.312 11.312a16 16 0 0 1 0 22.624l-79.2 79.2zM512 800c159.056 0 288-128.944 288-288s-128.944-288-288-288-288 128.944-288 288 128.944 288 288 288z m0 48c-185.568 0-336-150.432-336-336s150.432-336 336-336 336 150.432 336 336-150.432 336-336 336z"},"children":[]}],"_name":"clear","_isColor":false};
const svgData$3 = {"name":"svg","type":"element","value":"","attributes":{"class":"icon","viewBox":"0 0 1024 1024","version":"1.1","xmlns":"http://www.w3.org/2000/svg"},"children":[{"name":"path","type":"element","value":"","attributes":{"fill":"currentColor","d":"M509.92 795.84c157.904 0 285.92-128.016 285.92-285.92C795.84 352 667.808 224 509.92 224 352 224 224 352 224 509.92c0 157.904 128 285.92 285.92 285.92z m0 48C325.504 843.84 176 694.32 176 509.92 176 325.504 325.504 176 509.92 176c184.416 0 333.92 149.504 333.92 333.92 0 184.416-149.504 333.92-333.92 333.92z m-2.448-400.704h16a16 16 0 0 1 16 16v201.728a16 16 0 0 1-16 16h-16a16 16 0 0 1-16-16V459.136a16 16 0 0 1 16-16z m0-100.176h16a16 16 0 0 1 16 16v23.648a16 16 0 0 1-16 16h-16a16 16 0 0 1-16-16v-23.648a16 16 0 0 1 16-16z"},"children":[]}],"_name":"info","_isColor":false};
const svgData$2 = {"name":"svg","type":"element","value":"","attributes":{"class":"icon","width":"32px","height":"32.00px","viewBox":"0 0 1024 1024","version":"1.1","xmlns":"http://www.w3.org/2000/svg"},"children":[{"name":"path","type":"element","value":"","attributes":{"d":"M102.4 102.4m307.2 0l204.8 0q307.2 0 307.2 307.2l0 204.8q0 307.2-307.2 307.2l-204.8 0q-307.2 0-307.2-307.2l0-204.8q0-307.2 307.2-307.2Z","fill":"#867EFC","fill-opacity":".2"},"children":[]},{"name":"path","type":"element","value":"","attributes":{"d":"M286.72 460.8m40.96 0l61.44 0q40.96 0 40.96 40.96l0 122.88q0 40.96-40.96 40.96l-61.44 0q-40.96 0-40.96-40.96l0-122.88q0-40.96 40.96-40.96Z","fill":"#867EFC"},"children":[]},{"name":"path","type":"element","value":"","attributes":{"d":"M440.32 307.2m40.96 0l61.44 0q40.96 0 40.96 40.96l0 276.48q0 40.96-40.96 40.96l-61.44 0q-40.96 0-40.96-40.96l0-276.48q0-40.96 40.96-40.96Z","fill":"#867EFC"},"children":[]},{"name":"path","type":"element","value":"","attributes":{"d":"M737.28 686.08m0 30.72l0 20.48q0 30.72-30.72 30.72l-389.12 0q-30.72 0-30.72-30.72l0-20.48q0-30.72 30.72-30.72l389.12 0q30.72 0 30.72 30.72Z","fill":"#867EFC","fill-opacity":".6"},"children":[]},{"name":"path","type":"element","value":"","attributes":{"d":"M593.92 399.36m40.96 0l61.44 0q40.96 0 40.96 40.96l0 184.32q0 40.96-40.96 40.96l-61.44 0q-40.96 0-40.96-40.96l0-184.32q0-40.96 40.96-40.96Z","fill":"#867EFC"},"children":[]}],"_name":"paihangbang-c","_isColor":true};
const svgData$1 = {"name":"svg","type":"element","value":"","attributes":{"class":"icon","viewBox":"0 0 1024 1024","version":"1.1","xmlns":"http://www.w3.org/2000/svg"},"children":[{"name":"path","type":"element","value":"","attributes":{"fill":"currentColor","d":"M512 149.333333c200.298667 0 362.666667 162.368 362.666667 362.666667s-162.368 362.666667-362.666667 362.666667S149.333333 712.298667 149.333333 512 311.701333 149.333333 512 149.333333z m169.045333 191.04L455.317333 572.650667l-90.944-94.336-46.08 44.416 136.832 141.952 271.829334-279.722667-45.909334-44.586667z"},"children":[]}],"_name":"success-fill","_isColor":false};
const svgData = {"name":"svg","type":"element","value":"","attributes":{"class":"icon","viewBox":"0 0 1024 1024","version":"1.1","xmlns":"http://www.w3.org/2000/svg"},"children":[{"name":"path","type":"element","value":"","attributes":{"fill":"currentColor","d":"M512 243.712c164.949333 0 298.666667 133.717333 298.666667 298.666667s-133.717333 298.666667-298.666667 298.666666-298.666667-133.717333-298.666667-298.666666 133.717333-298.666667 298.666667-298.666667z m0 64c-129.6 0-234.666667 105.066667-234.666667 234.666667s105.066667 234.666667 234.666667 234.666666 234.666667-105.066667 234.666667-234.666666-105.066667-234.666667-234.666667-234.666667z m27.477333 59.157333v126.378667l69.824-69.824 45.226667 45.269333-124.416 124.437334c-20.16 20.16-54.634667 5.888-54.634667-22.613334v-203.648h64zM620.586667 139.306667v67.882666H394.346667V139.306667H620.586667z"},"children":[]}],"_name":"task-management","_isColor":false};
const GfIconclear = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.size = 30;
this.styles = {};
this.color = "#606266";
this.rotate = 0;
this.spin = false;
this.opacity = 1;
}
render() {
const { size, styles, color, rotate, spin, opacity } = this;
const hostStyles = { width: size + 'px', height: size + 'px' };
return (h(Host, { style: hostStyles }, h(Icons, Object.assign({}, { svgData: svgData$4, size, styles, color, rotate, spin, opacity }))));
}
};
const GfIconinfo = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.size = 30;
this.styles = {};
this.color = "#606266";
this.rotate = 0;
this.spin = false;
this.opacity = 1;
}
render() {
const { size, styles, color, rotate, spin, opacity } = this;
const hostStyles = { width: size + 'px', height: size + 'px' };
return (h(Host, { style: hostStyles }, h(Icons, Object.assign({}, { svgData: svgData$3, size, styles, color, rotate, spin, opacity }))));
}
};
const GfIconpaihangbangC = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.size = 30;
this.styles = {};
this.color = "#606266";
this.rotate = 0;
this.spin = false;
this.opacity = 1;
}
render() {
const { size, styles, color, rotate, spin, opacity } = this;
const hostStyles = { width: size + 'px', height: size + 'px' };
return (h(Host, { style: hostStyles }, h(Icons, Object.assign({}, { svgData: svgData$2, size, styles, color, rotate, spin, opacity }))));
}
};
const GfIconsuccessFill = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.size = 30;
this.styles = {};
this.color = "#606266";
this.rotate = 0;
this.spin = false;
this.opacity = 1;
}
render() {
const { size, styles, color, rotate, spin, opacity } = this;
const hostStyles = { width: size + 'px', height: size + 'px' };
return (h(Host, { style: hostStyles }, h(Icons, Object.assign({}, { svgData: svgData$1, size, styles, color, rotate, spin, opacity }))));
}
};
const GfIcontaskManagement = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.size = 30;
this.styles = {};
this.color = "#606266";
this.rotate = 0;
this.spin = false;
this.opacity = 1;
}
render() {
const { size, styles, color, rotate, spin, opacity } = this;
const hostStyles = { width: size + 'px', height: size + 'px' };
return (h(Host, { style: hostStyles }, h(Icons, Object.assign({}, { svgData, size, styles, color, rotate, spin, opacity }))));
}
};
/**
* https://github.com/ElemeFE/element/blob/dev/packages/input/src/calcTextareaHeight.js
*/
let hiddenTextarea;
const HIDDEN_STYLE = [
'position: absolute !important;',
'top: 0 !important;',
'right: 0 !important;',
'height: 0 !important;',
'visibility: hidden !important;',
'overflow: hidden !important;',
'z-index: -1000 !important;'
];
const CONTEXT_STYLE = [
'letter-spacing',
'line-height',
'padding-top',
'padding-bottom',
'font-family',
'font-weight',
'font-size',
'text-rendering',
'text-transform',
'width',
'text-indent',
'padding-left',
'padding-right',
'border-width',
'box-sizing'
];
function calculateNodeStyling(node) {
const style = window.getComputedStyle(node);
const boxSizing = style.getPropertyValue('box-sizing');
const paddingSize = (
parseFloat(style.getPropertyValue('padding-bottom')) +
parseFloat(style.getPropertyValue('padding-top'))
);
const borderSize = (
parseFloat(style.getPropertyValue('border-bottom-width')) +
parseFloat(style.getPropertyValue('border-top-width'))
);
const contextStyle = CONTEXT_STYLE.map(name => `${name}:${style.getPropertyValue(name)}`).join(';');
return { boxSizing, paddingSize, borderSize, contextStyle }
}
function calcTextareaHeight(targetNode, minRows = 1, maxRows = null) {
if (!hiddenTextarea) {
hiddenTextarea = document.createElement('textarea');
document.body.appendChild(hiddenTextarea);
}
const { boxSizing, paddingSize, borderSize, contextStyle } = calculateNodeStyling(targetNode);
hiddenTextarea.setAttribute('style', `${contextStyle};${HIDDEN_STYLE.join('')}`);
hiddenTextarea.value = targetNode.value || targetNode.placeholder || '';
const result = {};
let height = hiddenTextarea.scrollHeight;
if (boxSizing === 'border-box') {
height += borderSize;
} else if (boxSizing === 'content-box') {
height -= paddingSize;
}
hiddenTextarea.value = '';
const singleRowHeight = hiddenTextarea.scrollHeight - paddingSize;
if (minRows !== null) {
let minHeight = singleRowHeight * minRows;
if (boxSizing === 'border-box') {
minHeight = minHeight + paddingSize + borderSize;
}
height = Math.max(minHeight, height);
result.minHeight = `${minHeight}px`;
}
if (maxRows !== null) {
let maxHeight = singleRowHeight * maxRows;
if (boxSizing === 'border-box') {
maxHeight = maxHeight + paddingSize + borderSize;
}
height = Math.min(maxHeight, height);
}
result.height = `${height}px`;
hiddenTextarea.parentNode && hiddenTextarea.parentNode.removeChild(hiddenTextarea);
hiddenTextarea = null;
return result
}
function injectComponents(componentsList) {
console.log(componentsList);
for (const cName in componentsList) {
const elements = componentsList[cName];
const elementsName = cName
.replace(/([A-Z])/g, "-$1")
.toLowerCase()
.substring(1);
customElements.define(elementsName, elements);
}
}
injectComponents({
GfIconclear, GfIconinfo, GfIconsuccessFill
});
const STATUS = {
"success": {
color: "#67C23A"
},
"info": {
color: "#346FC2"
},
"warning": {
color: "#ffc82c"
},
"error": {
color: "#ff4949"
}
};
const GfInput = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.eventFocus = createEvent(this, "eventFocus", 7);
this.eventBlur = createEvent(this, "eventBlur", 7);
this.eventInput = createEvent(this, "eventInput", 7);
this.eventChange = createEvent(this, "eventChange", 7);
this.eventClear = createEvent(this, "eventClear", 7);
this.disabled = false; //禁用
this.clearable = false; //清除
this.value = '';
this.type = 'text'; // 原生类型
this.status = ''; // 输入框状态
this.iconFontSize = 20;
this.iconColor = '#ccc';
this.autofocus = false; // 自动获取焦点
this.resize = 'vertical'; // 是否缩放 none|both|horizontal|vertical;
this.rows = 2;
this.autosize = false;
this.curentValue = '';
this.calculateStyle = {
resize: this.resize
};
this.isComposing = false;
this.handleFocus = (e) => {
this.eventFocus.emit(e);
};
this.handleBlur = (e) => {
this.eventBlur.emit(e);
};
this.handleInput = (e) => {
if (this.isComposing)
return;
const value = e.target.value;
this.eventInput.emit(value);
this.setCurrentValue(value);
this.resizeTextarea();
};
this.handleChange = (e) => {
this.eventChange.emit(e.target.value);
};
this.handClearClick = () => {
this.setCurrentValue('');
this.eventClear.emit('');
this.eventInput.emit('');
this.eventChange.emit('');
};
this.setCurrentValue = (value) => {
this.curentValue = value;
};
this.handleCompositionStart = () => {
this.isComposing = true;
};
this.handleCompositionEnd = (e) => {
if (this.isComposing) {
this.isComposing = false;
this.handleInput(e);
}
};
this.onKeydown = (ev) => {
if (ev.key === 'Enter') {
console.log('enter');
}
};
// 获取个个元素节点
this.getClearInstance = () => {
return h("div", { class: "gf-input__clear" }, h("gf-icon-clear", { size: this.iconFontSize, color: this.iconColor, onClick: this.handClearClick.bind(this) }));
};
this.getStatusInstance = () => {
return h("div", { class: "gf-input__status_icon" }, this.status === 'success' && h("gf-icon-success-fill", { size: this.iconFontSize, color: STATUS[this.status].color }), ['info', 'warning'].includes(this.status) && h("gf-icon-info", { size: this.iconFontSize, color: STATUS[this.status].color }), this.status === 'error' && h("gf-icon-clear", { size: this.iconFontSize, color: STATUS[this.status].color }));
};
this.getMaxLengthInstance = () => {
return h("div", { class: "gf-input__maxlength" }, h("span", null, this.curentValue.length), "/", this.maxlength);
};
this.getInputInstance = () => {
return this.type !== 'textarea' ?
h("input", { type: this.type, disabled: this.disabled, class: "gf-input__inner", value: this.curentValue, minLength: this.maxlength, maxLength: this.maxlength, placeholder: this.placeholder, onFocus: this.handleFocus, onBlur: this.handleBlur, onInput: this.handleInput, onChange: this.handleChange, ref: input => this.nativeInput = input, onKeyDown: this.onKeydown })
: h("textarea", { class: "gf-textarea__inner", style: this.calculateStyle, disabled: this.disabled, value: this.curentValue, autofocus: this.autofocus, minLength: this.maxlength, maxLength: this.maxlength, placeholder: this.placeholder, rows: +this.rows, onFocus: this.handleFocus, onBlur: this.handleBlur, onInput: this.handleInput, onChange: this.handleChange, ref: input => this.nativeInput = input });
};
}
watchPropHandler(newValue) {
if (newValue !== this.curentValue) {
this.setCurrentValue(newValue);
}
}
// 数据初始化
componentWillLoad() {
this.setCurrentValue(this.value);
Promise.resolve().then(() => { this.resizeTextarea(); });
}
// dom渲染完成
componentDidLoad() {
const nativeInput = this.nativeInput;
if (nativeInput) {
nativeInput.addEventListener('compositionstart', this.handleCompositionStart);
nativeInput.addEventListener('compositionend', this.handleCompositionEnd);
}
}
// 销毁
disconnectedCallback() {
const nativeInput = this.nativeInput;
if (nativeInput) {
nativeInput.removeEventListener('compositionstart', this.handleCompositionStart);
nativeInput.removeEventListener('compositionEnd', this.handleCompositionEnd);
}
}
resizeTextarea() {
if (!this.autosize && !this.minRows && !this.maxRows)
return;
this.calculateStyle = Object.assign(Object.assign({}, calcTextareaHeight(this.nativeInput, this.minRows, this.maxRows)), { resize: this.resize });
}
render() {
return (h(Host, null, h("div", { class: `
${this.type !== 'textarea' ? 'gf-input' : 'gf-textarea'}
${this.disabled ? 'is-disabled' : ''}
${this.status ? 'is-input-' + this.status : ''}` }, h("slot", { name: 'before' }), this.getInputInstance(), this.clearable && this.curentValue ? this.getClearInstance() : '', Number(this.maxlength) > 0 ? this.getMaxLengthInstance() : '', this.status ? this.getStatusInstance() : '', h("slot", { name: 'after' }))));
}
static get watchers() { return {
"value": ["watchPropHandler"]
}; }
};
export { GfIconclear as gf_icon_clear, GfIconinfo as gf_icon_info, GfIconpaihangbangC as gf_icon_paihangbang_c, GfIconsuccessFill as gf_icon_success_fill, GfIcontaskManagement as gf_icon_task_management, GfInput as gf_input };