@web-utils/form-ui 1.0.0-beta85 → 1.0.0-beta87

package/fy-input/index.d.ts

@@ -0,0 +1,316 @@
+declare const _default: import('vue').DefineComponent<globalThis.ExtractPropTypes<{
+    showPassword: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showWordLimit: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    prefixIcon: {
+        type: StringConstructor;
+    };
+    suffixIcon: {
+        type: StringConstructor;
+    };
+    prependClick: {
+        type: FunctionConstructor;
+        default: () => void;
+    };
+    prepend: {
+        type: StringConstructor;
+    };
+    appendClick: {
+        type: FunctionConstructor;
+        default: () => void;
+    };
+    append: {
+        type: StringConstructor;
+    };
+    minlength: {
+        type: NumberConstructor;
+    };
+    maxlength: {
+        type: NumberConstructor;
+    };
+    rows: NumberConstructor;
+    minRows: {
+        type: NumberConstructor;
+        default: number;
+    };
+    maxRows: {
+        type: NumberConstructor;
+        default: number;
+    };
+    autocomplete: {
+        type: StringConstructor;
+    };
+}>, {}, {}, {
+    isSearch(): boolean;
+    typeParam(): "text" | "textarea" | "password";
+}, {}, {
+    mixins: {
+        methods: {
+            getSlotName(item: any | undefined, type: string | undefined, slot: string): any;
+            getSlotList(list: never[] | undefined, slot: string, propList: Array<any>): string[];
+        };
+    }[];
+    data(): {
+        stringMode: boolean;
+        name: string;
+        text: undefined;
+        propsHttpDefault: {
+            name: string;
+            url: string;
+            fileName: string;
+            res: string;
+        };
+        propsDefault: {
+            rowKey: string;
+            rowParentKey: string;
+            nodeKey: string;
+            label: string;
+            value: string;
+            desc: string;
+            groups: string;
+            title: string;
+            leaf: string;
+            children: string;
+            hasChildren: string;
+            labelText: string;
+            disabled: string;
+        };
+    };
+    props: {
+        blur: FunctionConstructor;
+        focus: FunctionConstructor;
+        change: FunctionConstructor;
+        click: FunctionConstructor;
+        typeformat: FunctionConstructor;
+        control: FunctionConstructor;
+        separator: {
+            type: StringConstructor;
+            default: string;
+        };
+        params: {
+            type: ObjectConstructor;
+            default: () => {};
+        };
+        listType: {
+            type: StringConstructor;
+        };
+        tableData: {
+            type: ObjectConstructor;
+        };
+        modelValue: {};
+        column: {
+            type: ObjectConstructor;
+            default: () => {};
+        };
+        label: {
+            type: StringConstructor;
+            default: string;
+        };
+        readonly: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        size: StringConstructor;
+        tip: {
+            type: StringConstructor;
+            default: string;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        dataType: {
+            type: StringConstructor;
+        };
+        clearable: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        type: {
+            type: StringConstructor;
+            default: string;
+        };
+        dicUrl: {
+            type: StringConstructor;
+            default: string;
+        };
+        dicMethod: {
+            type: StringConstructor;
+            default: string;
+        };
+        dicFormatter: FunctionConstructor;
+        dicQuery: {
+            type: ObjectConstructor;
+            default: () => {};
+        };
+        dic: {
+            type: ArrayConstructor;
+            default: () => never[];
+        };
+        placeholder: {
+            type: StringConstructor;
+            default: string;
+        };
+        rules: {
+            type: ArrayConstructor;
+        };
+        min: {
+            type: NumberConstructor;
+        };
+        max: {
+            type: NumberConstructor;
+        };
+        multiple: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        button: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        group: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        row: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        prop: {
+            type: StringConstructor;
+            default: string;
+        };
+        border: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        popperClass: {
+            type: StringConstructor;
+        };
+        propsHttp: {
+            type: ObjectConstructor;
+            default: () => {
+                name: string;
+                url: string;
+                fileName: string;
+                res: string;
+            };
+        };
+        props: {
+            type: ObjectConstructor;
+            default: () => {
+                rowKey: string;
+                rowParentKey: string;
+                nodeKey: string;
+                label: string;
+                value: string;
+                desc: string;
+                groups: string;
+                title: string;
+                leaf: string;
+                children: string;
+                hasChildren: string;
+                labelText: string;
+                disabled: string;
+            };
+        };
+    };
+    watch: {
+        text: {
+            handler(this: any, n: any): void;
+        };
+        modelValue: {
+            handler(this: any): void;
+        };
+    };
+    computed: {
+        clearableVal(this: any): any;
+        componentName(this: any): string;
+        required(this: any): boolean;
+        isArray(this: any): boolean;
+        isString(this: any): boolean;
+        isNumber(this: any): boolean;
+        nameKey(this: any): any;
+        urlKey(this: any): any;
+        resKey(this: any): any;
+        groupsKey(this: any): any;
+        valueKey(this: any): any;
+        descKey(this: any): any;
+        leafKey(this: any): any;
+        labelKey(this: any): any;
+        childrenKey(this: any): any;
+        disabledKey(this: any): any;
+        idKey(this: any): any;
+    };
+    created(this: any): void;
+} | {
+    methods: {
+        bindEvent(this: any, name: any, params: any): void;
+        initVal(this: any): void;
+        getLabelText(this: any, item: any): any;
+        handleFocus(this: any, event: any): void;
+        handleBlur(this: any, event: any): void;
+        handleClick(this: any, event: any): void;
+        handleChange(this: any, value: any): void;
+    };
+}, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<globalThis.ExtractPropTypes<{
+    showPassword: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showWordLimit: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    prefixIcon: {
+        type: StringConstructor;
+    };
+    suffixIcon: {
+        type: StringConstructor;
+    };
+    prependClick: {
+        type: FunctionConstructor;
+        default: () => void;
+    };
+    prepend: {
+        type: StringConstructor;
+    };
+    appendClick: {
+        type: FunctionConstructor;
+        default: () => void;
+    };
+    append: {
+        type: StringConstructor;
+    };
+    minlength: {
+        type: NumberConstructor;
+    };
+    maxlength: {
+        type: NumberConstructor;
+    };
+    rows: NumberConstructor;
+    minRows: {
+        type: NumberConstructor;
+        default: number;
+    };
+    maxRows: {
+        type: NumberConstructor;
+        default: number;
+    };
+    autocomplete: {
+        type: StringConstructor;
+    };
+}>> & Readonly<{}>, {
+    showWordLimit: boolean;
+    showPassword: boolean;
+    prependClick: Function;
+    appendClick: Function;
+    minRows: number;
+    maxRows: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/fy-input/index.mjs

@@ -0,0 +1,123 @@
+import "../chunks/B2vpUK0j.mjs";
+import "../chunks/cvUTkWmm.mjs";
+import { t as e } from "../chunks/DA1LVvTS.mjs";
+import "../chunks/CNcSX5f1.mjs";
+import { t } from "../chunks/hFCEXdXW.mjs";
+import { t as n } from "../chunks/_wUx1zSH2.mjs";
+import { n as r, t as i } from "../chunks/BsBVCVnp2.mjs";
+import { createBlock as a, createElementVNode as o, createSlots as s, createVNode as c, openBlock as l, toDisplayString as u, withCtx as d, withKeys as f } from "vue";
+//#region src/components/avue/fy-from/input/FyInput.vue
+var p = {
+	name: "FyInput",
+	mixins: [r, i],
+	props: {
+		showPassword: {
+			type: Boolean,
+			default: !0
+		},
+		showWordLimit: {
+			type: Boolean,
+			default: !1
+		},
+		prefixIcon: { type: String },
+		suffixIcon: { type: String },
+		prependClick: {
+			type: Function,
+			default: () => {}
+		},
+		prepend: { type: String },
+		appendClick: {
+			type: Function,
+			default: () => {}
+		},
+		append: { type: String },
+		minlength: { type: Number },
+		maxlength: { type: Number },
+		rows: Number,
+		minRows: {
+			type: Number,
+			default: 5
+		},
+		maxRows: {
+			type: Number,
+			default: 10
+		},
+		autocomplete: { type: String }
+	},
+	computed: {
+		isSearch() {
+			return this.type === "search";
+		},
+		typeParam() {
+			return this.type === "textarea" ? "textarea" : this.type === "password" ? "password" : "text";
+		}
+	}
+};
+function m(t, r, i, p, m, h) {
+	let g = n, _ = e;
+	return l(), a(_, {
+		modelValue: t.text,
+		"onUpdate:modelValue": r[3] || (r[3] = (e) => t.text = e),
+		class: "avue-input",
+		size: t.size,
+		clearable: t.clearableVal,
+		type: h.typeParam,
+		maxlength: i.maxlength,
+		minlength: i.minlength,
+		"show-password": h.typeParam === "password" ? i.showPassword : !1,
+		rows: i.rows,
+		autosize: {
+			minRows: i.minRows,
+			maxRows: i.maxRows
+		},
+		"prefix-icon": i.prefixIcon,
+		"suffix-icon": i.suffixIcon,
+		readonly: t.readonly,
+		placeholder: t.placeholder,
+		"show-word-limit": i.showWordLimit,
+		disabled: t.disabled,
+		autocomplete: i.autocomplete,
+		onKeyup: r[4] || (r[4] = f((e) => h.isSearch ? i.appendClick() : "", ["enter"])),
+		onClick: t.handleClick,
+		onFocus: t.handleFocus,
+		onBlur: t.handleBlur
+	}, s({ _: 2 }, [i.prepend ? {
+		name: "prepend",
+		fn: d(() => [o("span", { onClick: r[0] || (r[0] = (e) => i.prependClick()) }, u(i.prepend), 1)]),
+		key: "0"
+	} : void 0, i.append ? {
+		name: "append",
+		fn: d(() => [o("span", { onClick: r[1] || (r[1] = (e) => i.appendClick()) }, u(i.append), 1)]),
+		key: "1"
+	} : h.isSearch ? {
+		name: "append",
+		fn: d(() => [c(g, {
+			icon: "el-icon-search",
+			onClick: r[2] || (r[2] = (e) => i.appendClick())
+		})]),
+		key: "2"
+	} : void 0]), 1032, [
+		"modelValue",
+		"size",
+		"clearable",
+		"type",
+		"maxlength",
+		"minlength",
+		"show-password",
+		"rows",
+		"autosize",
+		"prefix-icon",
+		"suffix-icon",
+		"readonly",
+		"placeholder",
+		"show-word-limit",
+		"disabled",
+		"autocomplete",
+		"onClick",
+		"onFocus",
+		"onBlur"
+	]);
+}
+var h = /* @__PURE__ */ t(p, [["render", m]]);
+//#endregion
+export { h as default };

package/fy-input-color/index.d.ts

@@ -0,0 +1,235 @@
+declare const _default: import('vue').DefineComponent<globalThis.ExtractPropTypes<{
+    colorFormat: StringConstructor;
+    predefine: {
+        type: ArrayConstructor;
+        default: () => string[];
+    };
+    showAlpha: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, {
+    mixins: {
+        methods: {
+            getSlotName(item: any | undefined, type: string | undefined, slot: string): any;
+            getSlotList(list: never[] | undefined, slot: string, propList: Array<any>): string[];
+        };
+    }[];
+    data(): {
+        stringMode: boolean;
+        name: string;
+        text: undefined;
+        propsHttpDefault: {
+            name: string;
+            url: string;
+            fileName: string;
+            res: string;
+        };
+        propsDefault: {
+            rowKey: string;
+            rowParentKey: string;
+            nodeKey: string;
+            label: string;
+            value: string;
+            desc: string;
+            groups: string;
+            title: string;
+            leaf: string;
+            children: string;
+            hasChildren: string;
+            labelText: string;
+            disabled: string;
+        };
+    };
+    props: {
+        blur: FunctionConstructor;
+        focus: FunctionConstructor;
+        change: FunctionConstructor;
+        click: FunctionConstructor;
+        typeformat: FunctionConstructor;
+        control: FunctionConstructor;
+        separator: {
+            type: StringConstructor;
+            default: string;
+        };
+        params: {
+            type: ObjectConstructor;
+            default: () => {};
+        };
+        listType: {
+            type: StringConstructor;
+        };
+        tableData: {
+            type: ObjectConstructor;
+        };
+        modelValue: {};
+        column: {
+            type: ObjectConstructor;
+            default: () => {};
+        };
+        label: {
+            type: StringConstructor;
+            default: string;
+        };
+        readonly: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        size: StringConstructor;
+        tip: {
+            type: StringConstructor;
+            default: string;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        dataType: {
+            type: StringConstructor;
+        };
+        clearable: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        type: {
+            type: StringConstructor;
+            default: string;
+        };
+        dicUrl: {
+            type: StringConstructor;
+            default: string;
+        };
+        dicMethod: {
+            type: StringConstructor;
+            default: string;
+        };
+        dicFormatter: FunctionConstructor;
+        dicQuery: {
+            type: ObjectConstructor;
+            default: () => {};
+        };
+        dic: {
+            type: ArrayConstructor;
+            default: () => never[];
+        };
+        placeholder: {
+            type: StringConstructor;
+            default: string;
+        };
+        rules: {
+            type: ArrayConstructor;
+        };
+        min: {
+            type: NumberConstructor;
+        };
+        max: {
+            type: NumberConstructor;
+        };
+        multiple: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        button: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        group: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        row: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        prop: {
+            type: StringConstructor;
+            default: string;
+        };
+        border: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        popperClass: {
+            type: StringConstructor;
+        };
+        propsHttp: {
+            type: ObjectConstructor;
+            default: () => {
+                name: string;
+                url: string;
+                fileName: string;
+                res: string;
+            };
+        };
+        props: {
+            type: ObjectConstructor;
+            default: () => {
+                rowKey: string;
+                rowParentKey: string;
+                nodeKey: string;
+                label: string;
+                value: string;
+                desc: string;
+                groups: string;
+                title: string;
+                leaf: string;
+                children: string;
+                hasChildren: string;
+                labelText: string;
+                disabled: string;
+            };
+        };
+    };
+    watch: {
+        text: {
+            handler(this: any, n: any): void;
+        };
+        modelValue: {
+            handler(this: any): void;
+        };
+    };
+    computed: {
+        clearableVal(this: any): any;
+        componentName(this: any): string;
+        required(this: any): boolean;
+        isArray(this: any): boolean;
+        isString(this: any): boolean;
+        isNumber(this: any): boolean;
+        nameKey(this: any): any;
+        urlKey(this: any): any;
+        resKey(this: any): any;
+        groupsKey(this: any): any;
+        valueKey(this: any): any;
+        descKey(this: any): any;
+        leafKey(this: any): any;
+        labelKey(this: any): any;
+        childrenKey(this: any): any;
+        disabledKey(this: any): any;
+        idKey(this: any): any;
+    };
+    created(this: any): void;
+} | {
+    methods: {
+        bindEvent(this: any, name: any, params: any): void;
+        initVal(this: any): void;
+        getLabelText(this: any, item: any): any;
+        handleFocus(this: any, event: any): void;
+        handleBlur(this: any, event: any): void;
+        handleClick(this: any, event: any): void;
+        handleChange(this: any, value: any): void;
+    };
+}, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<globalThis.ExtractPropTypes<{
+    colorFormat: StringConstructor;
+    predefine: {
+        type: ArrayConstructor;
+        default: () => string[];
+    };
+    showAlpha: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    predefine: unknown[];
+    showAlpha: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/fy-input-color/index.mjs

@@ -0,0 +1,2 @@
+import { t as e } from "../chunks/DK7E0MrC2.mjs";
+export { e as default };

package/fy-input-color/style.css

@@ -0,0 +1 @@
+.el-color-picker-panel{--el-colorpicker-bg-color:var(--el-bg-color-overlay);--el-fill-color-blank:var(--el-colorpicker-bg-color);box-sizing:content-box;background:var(--el-colorpicker-bg-color);width:300px;padding:12px}.el-color-picker-panel.is-border{border:solid 1px var(--el-border-color-lighter);border-radius:4px}.el-color-picker-panel__wrapper{margin-bottom:6px}.el-color-picker-panel__footer{text-align:right;justify-content:space-between;margin-top:12px;display:flex}.el-color-picker-panel__footer .el-input{color:#000;width:160px;font-size:12px;line-height:26px}.el-color-picker-panel.is-disabled .el-color-svpanel,.el-color-picker-panel.is-disabled .el-color-hue-slider{cursor:not-allowed;opacity:.3}.el-color-picker-panel.is-disabled .el-color-hue-slider__thumb{cursor:not-allowed}.el-color-picker-panel.is-disabled .el-color-alpha-slider,.el-color-picker-panel.is-disabled .el-color-predefine .el-color-predefine__color-selector{cursor:not-allowed;opacity:.3}.el-color-predefine{width:280px;margin-top:8px;font-size:12px;display:flex}.el-color-predefine__colors{flex-wrap:wrap;flex:1;gap:8px;display:flex}.el-color-predefine__color-selector{border-radius:var(--el-border-radius-base);cursor:pointer;border:none;outline:none;width:20px;height:20px;padding:0;overflow:hidden}.el-color-predefine__color-selector.selected{box-shadow:0 0 3px 2px var(--el-color-primary)}.el-color-predefine__color-selector:focus-visible{outline:2px solid var(--el-color-primary);outline-offset:2px}.el-color-predefine__color-selector>div{height:100%;display:flex}.el-color-predefine__color-selector.is-alpha{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)}.el-color-hue-slider{box-sizing:border-box;float:right;background-color:red;width:280px;height:12px;padding:0 2px;position:relative}.el-color-hue-slider__bar{background:linear-gradient(90deg,red 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%);height:100%;position:relative}.el-color-hue-slider__thumb{cursor:pointer;box-sizing:border-box;border:1px solid var(--el-border-color-lighter);z-index:1;background:#fff;border-radius:1px;width:4px;height:100%;position:absolute;top:0;left:0;box-shadow:0 0 2px #0009}.el-color-hue-slider__thumb:focus-visible{outline:2px solid var(--el-color-primary);outline-offset:1px}.el-color-hue-slider.is-vertical{width:12px;height:180px;padding:2px 0}.el-color-hue-slider.is-vertical .el-color-hue-slider__bar{background:linear-gradient(red 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}.el-color-hue-slider.is-vertical .el-color-hue-slider__thumb{width:100%;height:4px;top:0;left:0}.el-color-svpanel{background-image:linear-gradient(#0000,#000),linear-gradient(90deg,#fff,#fff0);width:280px;height:180px;position:relative}.el-color-svpanel__cursor{cursor:pointer;border-radius:50%;width:4px;height:4px;position:absolute;transform:translate(-2px,-2px);box-shadow:0 0 0 1.5px #fff,inset 0 0 1px 1px #0000004d,0 0 1px 2px #0006}.el-color-svpanel__cursor:focus-visible{outline:2px solid var(--el-color-primary);outline-offset:2px}.el-color-alpha-slider{box-sizing:border-box;background-image:linear-gradient(45deg, var(--el-color-picker-alpha-bg-a) 25%, var(--el-color-picker-alpha-bg-b) 25%), linear-gradient(135deg, var(--el-color-picker-alpha-bg-a) 25%, var(--el-color-picker-alpha-bg-b) 25%), linear-gradient(45deg, var(--el-color-picker-alpha-bg-b) 75%, var(--el-color-picker-alpha-bg-a) 75%), linear-gradient(135deg, var(--el-color-picker-alpha-bg-b) 75%, var(--el-color-picker-alpha-bg-a) 75%);background-position:0 0,6px 0,6px -6px,0 6px;background-size:12px 12px;width:280px;height:12px;position:relative}.el-color-alpha-slider.is-disabled .el-color-alpha-slider__thumb{cursor:not-allowed}.el-color-alpha-slider__bar{background:linear-gradient(to right, #fff0 0%, var(--el-bg-color) 100%);height:100%;position:relative}.el-color-alpha-slider__thumb{cursor:pointer;box-sizing:border-box;border:1px solid var(--el-border-color-lighter);z-index:1;background:#fff;border-radius:1px;width:4px;height:100%;position:absolute;top:0;left:0;box-shadow:0 0 2px #0009}.el-color-alpha-slider__thumb:focus-visible{outline:2px solid var(--el-color-primary);outline-offset:1px}.el-color-alpha-slider.is-vertical{width:20px;height:180px}.el-color-alpha-slider.is-vertical .el-color-alpha-slider__bar{background:linear-gradient(#fff0 0%,#fff 100%)}.el-color-alpha-slider.is-vertical .el-color-alpha-slider__thumb{width:100%;height:4px;top:0;left:0}.el-color-picker-panel{--el-color-picker-alpha-bg-a:#ccc;--el-color-picker-alpha-bg-b:transparent}.dark .el-color-picker-panel{--el-color-picker-alpha-bg-a:#333}.el-color-picker{outline:none;width:32px;height:32px;line-height:normal;display:inline-block;position:relative}.el-color-picker:hover:not(:-webkit-any(.is-disabled,.is-focused)) .el-color-picker__trigger{border-color:var(--el-border-color-hover)}.el-color-picker:hover:not(:-webkit-any(.is-disabled,.is-focused)) .el-color-picker__trigger{border-color:var(--el-border-color-hover)}.el-color-picker:hover:not(:-moz-any(.is-disabled,.is-focused)) .el-color-picker__trigger{border-color:var(--el-border-color-hover)}.el-color-picker:hover:not(:is(.is-disabled,.is-focused)) .el-color-picker__trigger{border-color:var(--el-border-color-hover)}.el-color-picker:focus-visible:not(.is-disabled) .el-color-picker__trigger{outline:2px solid var(--el-color-primary);outline-offset:1px}.el-color-picker.is-focused .el-color-picker__trigger{border-color:var(--el-color-primary)}.el-color-picker.is-disabled .el-color-picker__trigger{cursor:not-allowed;background-color:var(--el-fill-color-light)}.el-color-picker.is-disabled .el-color-picker__color{opacity:.3}.el-color-picker--large{width:40px;height:40px}.el-color-picker--small{width:24px;height:24px}.el-color-picker--small .el-color-picker__icon,.el-color-picker--small .el-color-picker__empty{transform:scale(.8)}.el-color-picker__trigger{box-sizing:border-box;border:1px solid var(--el-border-color);cursor:pointer;border-radius:4px;justify-content:center;align-items:center;width:100%;height:100%;padding:4px;font-size:0;display:inline-flex;position:relative}.el-color-picker__color{box-sizing:border-box;border:1px solid var(--el-text-color-secondary);border-radius:var(--el-border-radius-small);text-align:center;width:100%;height:100%;display:block;position:relative}.el-color-picker__color.is-alpha{background-image:linear-gradient(45deg, var(--el-color-picker-alpha-bg-a) 25%, var(--el-color-picker-alpha-bg-b) 25%), linear-gradient(135deg, var(--el-color-picker-alpha-bg-a) 25%, var(--el-color-picker-alpha-bg-b) 25%), linear-gradient(45deg, var(--el-color-picker-alpha-bg-b) 75%, var(--el-color-picker-alpha-bg-a) 75%), linear-gradient(135deg, var(--el-color-picker-alpha-bg-b) 75%, var(--el-color-picker-alpha-bg-a) 75%);background-position:0 0,6px 0,6px -6px,0 6px;background-size:12px 12px}.el-color-picker__color-inner{justify-content:center;align-items:center;width:100%;height:100%;display:inline-flex}.el-color-picker .el-color-picker__empty{color:var(--el-text-color-secondary);font-size:12px}.el-color-picker .el-color-picker__icon{color:#fff;justify-content:center;align-items:center;font-size:12px;display:inline-flex}.el-color-picker__panel{border-radius:var(--el-border-radius-base);box-shadow:var(--el-box-shadow-light);background-color:#fff}.el-color-picker__panel.el-popper{border:1px solid var(--el-border-color-lighter)}.el-color-picker,.el-color-picker__panel{--el-color-picker-alpha-bg-a:#ccc;--el-color-picker-alpha-bg-b:transparent}.dark .el-color-picker,.dark .el-color-picker__panel{--el-color-picker-alpha-bg-a:#333}