@whitesev/pops 2.2.4 → 2.2.5

package/dist/types/src/components/panel/types/components-selectMultiple.d.ts

@@ -65,7 +65,7 @@ export interface PopsPanelSelectMultipleDetails<T = any> extends PopsPanelCommon
     /**
      * （可选）是否禁用
      */
-    disabled?: boolean | ((value: T) => boolean);
+    disabled?: boolean | (() => boolean);
     /**
      * 提示文字
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@whitesev/pops",
-  "version": "2.2.4",
+  "version": "2.2.5",
   "type": "module",
   "description": "弹窗库",
   "main": "dist/index.cjs.js",

package/src/components/panel/config.ts

@@ -34,7 +34,6 @@ export const PopsPanelConfig = (): DeepRequired<PopsPanelDetails> => {
 								type: "switch",
 								// @ts-ignore
 								props: {},
-								disabled: false,
 								attributes: [],
 								getValue() {
 									return true;
@@ -59,6 +58,21 @@ export const PopsPanelConfig = (): DeepRequired<PopsPanelDetails> => {
 								min: 1,
 								max: 100,
 							},
+							{
+								className: "panel-button",
+								text: "button",
+								type: "button",
+								// @ts-ignore
+								props: {},
+								attributes: [],
+								buttonIcon: "view",
+								buttonIconIsLoading: true,
+								buttonType: "default",
+								buttonText: "default按钮",
+								callback(event) {
+									console.log("点击按钮", event);
+								},
+							},
 							{
 								className: "panel-button",
 								text: "button",
@@ -173,6 +187,7 @@ export const PopsPanelConfig = (): DeepRequired<PopsPanelDetails> => {
 						className: "panel-select",
 						text: "select",
 						type: "select",
+						disabled: true,
 						// @ts-ignore
 						props: {},
 						attributes: [],
@@ -215,6 +230,7 @@ export const PopsPanelConfig = (): DeepRequired<PopsPanelDetails> => {
 						className: "panel-select-multiple",
 						type: "select-multiple",
 						text: "select-multiple",
+						disabled: true,
 						// @ts-ignore
 						props: {},
 

package/src/components/panel/handlerComponents.ts

@@ -317,14 +317,14 @@ export const PanelHandlerComponents = () => {
 					value: Boolean(formConfig.getValue()),
 				},
 				$ele: {
+					itemLeftTextContainer: $li.querySelector<HTMLElement>(
+						".pops-panel-item-left-text"
+					),
 					switch: $li.querySelector<HTMLDivElement>(".pops-panel-switch")!,
 					input: $li.querySelector<HTMLInputElement>(
 						".pops-panel-switch__input"
 					)!,
 					core: $li.querySelector<HTMLSpanElement>(".pops-panel-switch__core")!,
-					itemLeftTextContainer: $li.querySelector<HTMLDivElement>(
-						".pops-panel-item-left-text"
-					),
 				},
 				init() {
 					this.setStatus(this.$data.value);
@@ -590,6 +590,9 @@ export const PanelHandlerComponents = () => {
 					tooltip: null as any as ReturnType<typeof PopsTooltip.init>,
 				},
 				$ele: {
+					itemLeftTextContainer: $li.querySelector<HTMLElement>(
+						".pops-panel-item-left-text"
+					),
 					slider: $li.querySelector<HTMLElement>(".pops-slider")!,
 					runAway: $li.querySelector<HTMLElement>(".pops-slider__runway")!,
 					bar: $li.querySelector<HTMLElement>(".pops-slider__bar")!,
@@ -855,19 +858,34 @@ export const PanelHandlerComponents = () => {
 				 * 禁止拖拽
 				 */
 				disableDrag() {
-					this.$ele.runAway.classList.add("pops-slider-is-disabled");
+					popsDOMUtils.addClassName(
+						this.$ele.runAway,
+						"pops-slider-is-disabled"
+					);
+					popsDOMUtils.addClassName(
+						this.$ele.runAway,
+						PopsCommonCSSClassName.textIsDisabled
+					);
 				},
 				/**
 				 * 允许拖拽
 				 */
 				allowDrag() {
-					this.$ele.runAway.classList.remove("pops-slider-is-disabled");
+					popsDOMUtils.removeClassName(
+						this.$ele.runAway,
+						"pops-slider-is-disabled"
+					);
+					popsDOMUtils.removeClassName(
+						this.$ele.runAway,
+						PopsCommonCSSClassName.textIsDisabled
+					);
 				},
 				/**
 				 * 判断当前滑块是否被禁用
 				 */
 				isDisabledDrag() {
-					return this.$ele.runAway.classList.contains(
+					return popsDOMUtils.containsClassName(
+						this.$ele.runAway,
 						"pops-slider-is-disabled"
 					);
 				},
@@ -875,14 +893,11 @@ export const PanelHandlerComponents = () => {
 				 * 判断当前滑块是否被禁用（配置中判断）
 				 */
 				isFormConfigDisabledDrag() {
-					if (
-						typeof formConfig.disabled === "function" ||
-						typeof formConfig.disabled === "boolean"
-					) {
-						let isDisabled =
-							typeof formConfig.disabled === "function"
-								? formConfig.disabled()
-								: formConfig.disabled;
+					let isDisabled =
+						typeof formConfig.disabled === "function"
+							? formConfig.disabled()
+							: formConfig.disabled;
+					if (typeof isDisabled === "boolean") {
 						return isDisabled;
 					} else {
 						return false;
@@ -895,7 +910,6 @@ export const PanelHandlerComponents = () => {
 					popsDOMUtils.on<PointerEvent | MouseEvent>(
 						this.$ele.runAway,
 						"click",
-						void 0,
 						(event) => {
 							if (
 								event.target !== this.$ele.runAway &&
@@ -904,7 +918,10 @@ export const PanelHandlerComponents = () => {
 								return;
 							}
 							let clickX = parseFloat(event.offsetX.toString());
-							this.dragStartCallBack();
+							let dragStartResult = this.dragStartCallBack();
+							if (!dragStartResult) {
+								return;
+							}
 							this.dragMoveCallBack(event, clickX, this.value);
 							this.dragEndCallBack(clickX);
 						},
@@ -917,17 +934,18 @@ export const PanelHandlerComponents = () => {
 				 * 拖拽开始的回调，如果返回false，禁止拖拽
 				 */
 				dragStartCallBack() {
+					if (this.isFormConfigDisabledDrag()) {
+						// 禁止
+						this.disableDrag();
+						return false;
+					}
 					if (!this.$data.isMove) {
-						if (this.isFormConfigDisabledDrag()) {
-							// 禁止
-							this.disableDrag();
-							return false;
-						} else {
+						// 非移动中
+						if (this.isDisabledDrag()) {
 							// 允许
-							if (this.isDisabledDrag()) {
-								this.allowDrag();
-							}
+							this.allowDrag();
 						}
+
 						this.$data.isMove = true;
 					}
 					return true;
@@ -1139,6 +1157,9 @@ export const PanelHandlerComponents = () => {
 			const PopsPanelInput = {
 				[Symbol.toStringTag]: "PopsPanelInput",
 				$ele: {
+					itemLeftTextContainer: $li.querySelector<HTMLElement>(
+						".pops-panel-item-left-text"
+					),
 					panelInput: $li.querySelector<HTMLDivElement>(".pops-panel-input")!,
 					input: $li.querySelector<HTMLInputElement>("input")!,
 					inputSpanIcon: document.createElement("span"),
@@ -1212,14 +1233,28 @@ export const PanelHandlerComponents = () => {
 				 */
 				disable() {
 					this.$ele.input.disabled = true;
-					this.$ele.panelInput.classList.add("pops-input-disabled");
+					popsDOMUtils.addClassName(
+						this.$ele.panelInput,
+						"pops-input-disabled"
+					);
+					popsDOMUtils.addClassName(
+						this.$ele.itemLeftTextContainer,
+						PopsCommonCSSClassName.textIsDisabled
+					);
 				},
 				/**
 				 * 取消禁用
 				 */
 				notDisable() {
 					this.$ele.input.disabled = false;
-					this.$ele.panelInput.classList.remove("pops-input-disabled");
+					popsDOMUtils.removeClassName(
+						this.$ele.panelInput,
+						"pops-input-disabled"
+					);
+					popsDOMUtils.removeClassName(
+						this.$ele.itemLeftTextContainer,
+						PopsCommonCSSClassName.textIsDisabled
+					);
 				},
 				/**
 				 * 判断是否已被禁用
@@ -1365,6 +1400,9 @@ export const PanelHandlerComponents = () => {
 			const PopsPanelTextArea = {
 				[Symbol.toStringTag]: "PopsPanelTextArea",
 				$ele: {
+					itemLeftTextContainer: $li.querySelector<HTMLElement>(
+						".pops-panel-item-left-text"
+					),
 					panelTextarea: $li.querySelector<HTMLDivElement>(
 						".pops-panel-textarea"
 					)!,
@@ -1388,18 +1426,31 @@ export const PanelHandlerComponents = () => {
 				},
 				disable() {
 					this.$ele.textarea.setAttribute("disabled", "true");
-					this.$ele.panelTextarea.classList.add("pops-panel-textarea-disable");
+					popsDOMUtils.addClassName(
+						this.$ele.panelTextarea,
+						"pops-panel-textarea-disable"
+					);
+					popsDOMUtils.addClassName(
+						this.$ele.itemLeftTextContainer,
+						PopsCommonCSSClassName.textIsDisabled
+					);
 				},
 				notDisable() {
 					this.$ele.textarea.removeAttribute("disabled");
-					this.$ele.panelTextarea.classList.remove(
+					popsDOMUtils.removeClassName(
+						this.$ele.panelTextarea,
 						"pops-panel-textarea-disable"
 					);
+					popsDOMUtils.removeClassName(
+						this.$ele.itemLeftTextContainer,
+						PopsCommonCSSClassName.textIsDisabled
+					);
 				},
 				isDisabled() {
 					return (
 						this.$ele.textarea.hasAttribute("disabled") ||
-						this.$ele.panelTextarea.classList.contains(
+						popsDOMUtils.containsClassName(
+							this.$ele.panelTextarea,
 							"pops-panel-textarea-disable"
 						)
 					);
@@ -1414,7 +1465,6 @@ export const PanelHandlerComponents = () => {
 					popsDOMUtils.on<InputEvent>(
 						this.$ele.textarea,
 						["input", "propertychange"],
-						void 0,
 						(event) => {
 							let value = this.$ele.textarea.value;
 							this.$data.value = value;
@@ -1467,6 +1517,9 @@ export const PanelHandlerComponents = () => {
 			const PopsPanelSelect = {
 				[Symbol.toStringTag]: "PopsPanelSelect",
 				$ele: {
+					itemLeftTextContainer: $li.querySelector<HTMLElement>(
+						".pops-panel-item-left-text"
+					),
 					panelSelect: $li.querySelector<HTMLDivElement>(".pops-panel-select")!,
 					select: $li.querySelector<HTMLSelectElement>(
 						".pops-panel-select select"
@@ -1519,14 +1572,28 @@ export const PanelHandlerComponents = () => {
 				 */
 				disable() {
 					this.$ele.select.setAttribute("disabled", "true");
-					this.$ele.panelSelect.classList.add("pops-panel-select-disable");
+					popsDOMUtils.addClassName(
+						this.$ele.panelSelect,
+						"pops-panel-select-disable"
+					);
+					popsDOMUtils.addClassName(
+						this.$ele.itemLeftTextContainer,
+						PopsCommonCSSClassName.textIsDisabled
+					);
 				},
 				/**
 				 * 取消禁用
 				 */
 				notDisable() {
 					this.$ele.select.removeAttribute("disabled");
-					this.$ele.panelSelect.classList.remove("pops-panel-select-disable");
+					popsDOMUtils.removeClassName(
+						this.$ele.panelSelect,
+						"pops-panel-select-disable"
+					);
+					popsDOMUtils.removeClassName(
+						this.$ele.itemLeftTextContainer,
+						PopsCommonCSSClassName.textIsDisabled
+					);
 				},
 				/**
 				 * 判断是否禁用
@@ -1534,7 +1601,8 @@ export const PanelHandlerComponents = () => {
 				isDisabled() {
 					return (
 						this.$ele.select.hasAttribute("disabled") ||
-						this.$ele.panelSelect.classList.contains(
+						popsDOMUtils.containsClassName(
+							this.$ele.panelSelect,
 							"pops-panel-select-disable"
 						)
 					);
@@ -1726,6 +1794,10 @@ export const PanelHandlerComponents = () => {
 			const PopsPanelSelectMultiple = {
 				[Symbol.toStringTag]: "PopsPanelSelectMultiple",
 				$el: {
+					/** 左侧文本容器 */
+					itemLeftTextContainer: $li.querySelector<HTMLElement>(
+						".pops-panel-item-left-text"
+					),
 					/** 容器 */
 					$container: void 0 as any as HTMLElement,
 					/** 包括的容器 */
@@ -1755,6 +1827,14 @@ export const PanelHandlerComponents = () => {
 					this.initPlaceHolder();
 					this.initTagElement();
 					this.setSelectContainerClickEvent();
+
+					let disabled =
+						typeof formConfig.disabled === "function"
+							? formConfig.disabled()
+							: formConfig.disabled;
+					if (disabled) {
+						this.disable();
+					}
 				},
 				/** 初始化默认值 */
 				initDefault() {
@@ -2184,6 +2264,9 @@ export const PanelHandlerComponents = () => {
 				setSelectContainerClickEvent() {
 					const that = this;
 					popsDOMUtils.on(this.$el.$container, "click", (event) => {
+						if (this.isDisabled()) {
+							return;
+						}
 						/** 弹窗的选中的值 */
 						let selectedInfo = that.$data.selectInfo;
 						let { style, ...userConfirmDetails } =
@@ -2334,6 +2417,9 @@ export const PanelHandlerComponents = () => {
 						"click",
 						(event) => {
 							popsDOMUtils.preventEvent(event);
+							if (this.isDisabled()) {
+								return;
+							}
 							if (typeof formConfig.closeIconClickCallBack === "function") {
 								let result = formConfig.closeIconClickCallBack(event, {
 									$tag: data.$tag,
@@ -2423,6 +2509,41 @@ export const PanelHandlerComponents = () => {
 				removeSectionIsNear() {
 					this.$el.$section.classList.remove("is-near");
 				},
+				/**
+				 * 禁用标签
+				 */
+				disable() {
+					popsDOMUtils.addClassName(
+						this.$el.itemLeftTextContainer,
+						PopsCommonCSSClassName.textIsDisabled
+					);
+					popsDOMUtils.addClassName(
+						this.$el.$container,
+						"pops-panel-select-multiple-disable"
+					);
+				},
+				/**
+				 * 判断是否被禁用
+				 */
+				isDisabled() {
+					return popsDOMUtils.containsClassName(
+						this.$el.$container,
+						"pops-panel-select-multiple-disable"
+					);
+				},
+				/**
+				 * 取消禁用标签
+				 */
+				cancleDisable() {
+					popsDOMUtils.removeClassName(
+						this.$el.itemLeftTextContainer,
+						PopsCommonCSSClassName.textIsDisabled
+					);
+					popsDOMUtils.removeClassName(
+						this.$el.$container,
+						"pops-panel-select-multiple-disable"
+					);
+				},
 			};
 
 			PopsPanelSelectMultiple.init();
@@ -2978,7 +3099,7 @@ export const PanelHandlerComponents = () => {
 					);
 					formContainerListElement.setAttribute("data-fold-enable", "");
 					popsDOMUtils.addClassName(
-						formHeaderDivElement,
+						formContainerListElement,
 						"pops-panel-forms-fold"
 					);
 					formContainerListElement.appendChild(formHeaderDivElement);

package/src/components/panel/index.css

@@ -24,12 +24,7 @@
 	--pops-panel-forms-container-item-margin-left-right: var(
 		--pops-panel-forms-margin-left-right
 	);
-	--pops-panel-forms-container-li-border-color: rgb(
-		229,
-		229,
-		229,
-		var(--pops-bd-opacity)
-	);
+	--pops-panel-forms-container-li-border-color: var(--pops-bd-color);
 	--pops-panel-forms-container-li-padding-top-bottom: 12px;
 	--pops-panel-forms-container-li-padding-left-right: 16px;
 }
@@ -82,7 +77,7 @@ section.pops-panel-container {
 }
 section.pops-panel-container .pops-panel-container-header-ul,
 section.pops-panel-container .pops-panel-deepMenu-container-header-ul {
-	border-bottom: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));
+	border-bottom: 1px solid rgba(223, 223, 223, var(--pops-bg-opacity));
 	flex: 0 auto;
 }
 section.pops-panel-container .pops-panel-container-header-ul li,
@@ -139,6 +134,7 @@ section.pops-panel-container .pops-panel-forms-container-item-header-text {
 	color: var(--pops-panel-forms-container-item-title-color);
 }
 section.pops-panel-container li.pops-panel-forms-container-item {
+	/* 去除<li>左侧的圆点 */
 	display: block;
 }
 section.pops-panel-container
@@ -194,7 +190,6 @@ section.pops-panel-container .pops-panel-item-left-desc-text {
 }
 
 /* 折叠面板 */
-
 section.pops-panel-container .pops-panel-forms-fold {
 	border-radius: var(--pops-panel-forms-container-item-border-radius);
 	background: var(--pops-panel-forms-container-item-bg-color);
@@ -226,11 +221,18 @@ section.pops-panel-container
 	transform: rotate(-90deg);
 	transition: transform 0.3s;
 }
+/* 折叠状态 */
 section.pops-panel-container
 	.pops-panel-forms-fold[data-fold-enable]
 	.pops-panel-forms-container-item-formlist {
 	height: 0;
 }
+/* 非折叠状态 */
+section.pops-panel-container
+	.pops-panel-forms-fold
+	ul.pops-panel-forms-container-item-formlist {
+	margin: 0;
+}
 section.pops-panel-container
 	.pops-panel-forms-fold
 	.pops-panel-forms-container-item-formlist {
@@ -239,7 +241,6 @@ section.pops-panel-container
 	border-radius: unset;
 	background: unset;
 	margin: 0;
-	height: auto;
 	height: calc-size(auto, size);
 }
 /* 折叠面板 */
@@ -771,10 +772,7 @@ section.pops-panel-container
 }
 
 .pops-input-disabled {
-	background-color: var(--el-disabled-bg-color);
-}
-.pops-panel-input.pops-input-disabled {
-	border: none;
+	background-color: var(--pops-components-is-disabled-bg-color);
 }
 .pops-panel-input.pops-input-disabled:hover {
 	--pops-panel-components-input-hover-bd-color: var(
@@ -833,8 +831,16 @@ section.pops-panel-container
 		--pops-panel-components-textarea-bd-color
 	);
 }
-.pops-panel-textarea-disable .pops-panel-textarea textarea:hover {
-	box-shadow: none;
+.pops-panel-textarea-disable {
+	--pops-panel-components-textarea-text-bg-color: var(
+		--pops-components-is-disabled-bg-color
+	) !important;
+	--pops-panel-components-textarea-text-color: var(
+		--pops-components-is-disabled-text-color
+	);
+}
+.pops-panel-textarea-disable textarea {
+	cursor: not-allowed;
 }
 .pops-panel-textarea textarea:focus {
 	outline: 0;
@@ -851,13 +857,18 @@ section.pops-panel-container
 		184,
 		var(--pops-bd-opacity)
 	);
+	--pops-panel-components-select-hover-bd-color: rgb(
+		184,
+		184,
+		184,
+		var(--pops-bd-opacity)
+	);
 	--pops-panel-components-select-bg-color: rgb(
 		255,
 		255,
 		255,
 		var(--pops-bg-opacity)
 	);
-	--pops-panel-components-select-hover-bd-color: #c0c4cc;
 }
 .pops-panel-select {
 	border: 0;
@@ -876,12 +887,24 @@ section.pops-panel-container
 	box-shadow: none;
 }
 .pops-panel-select select:hover {
-	--pops-panel-components-select-bd-color: var(
-		--pops-panel-components-select-hover-bd-color
+	border: 1px solid var(--pops-panel-components-select-hover-bd-color);
+}
+.pops-panel-select-disable {
+	--pops-panel-components-select-text-color: var(
+		--pops-components-is-disabled-text-color
+	);
+	--pops-panel-components-select-bg-color: var(
+		--pops-components-is-disabled-bg-color
 	);
 }
-.pops-panel-select-disable .pops-panel-select select:hover {
+.pops-panel-select-disable select {
+	cursor: not-allowed;
+}
+.pops-panel-select-disable select:hover {
 	box-shadow: none;
+	--pops-panel-components-select-hover-bd-color: var(
+		--pops-panel-components-select-bd-color
+	);
 }
 .pops-panel-select select:focus {
 	border: 1px solid rgb(64, 158, 255, var(--pops-bd-opacity));
@@ -894,7 +917,7 @@ section.pops-panel-container
 	--el-border-radius-base: 4px;
 	--el-fill-color-blank: #ffffff;
 	--el-transition-duration: 0.3s;
-	--el-border-color: #dcdfe6;
+	--el-border-color: #cbcbcb;
 	--el-text-color-placeholder: #a8abb2;
 	--color: inherit;
 	--el-select-input-color: #a8abb2;
@@ -926,10 +949,10 @@ section.pops-panel-container
 	background-color: var(--el-fill-color-blank);
 	transition: var(--el-transition-duration);
 	transform: translateZ(0);
-	box-shadow: 0 0 0 1px var(--el-border-color) inset;
+	border: 1px solid var(--el-border-color);
 }
 .pops-panel-select-multiple .el-select__wrapper.is-focused {
-	box-shadow: 0 0 0 1px var(--el-color-primary) inset;
+	--el-border-color: var(--el-color-primary);
 }
 .pops-panel-select-multiple .el-select__selection {
 	position: relative;
@@ -1078,6 +1101,21 @@ section.pops-panel-container
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
+.pops-panel-select-multiple-disable {
+	--el-fill-color-blank: #f5f7fa;
+	--color: #a8abb2;
+	--el-border-color: #cbcbcb;
+}
+.pops-panel-select-multiple-disable .el-tag.el-tag--info {
+	--el-tag-bg-color: #e7e7e7;
+	--el-tag-text-color: var(--pops-components-is-disabled-text-color);
+}
+.pops-panel-select-multiple-disable .el-select__selection .el-tag,
+.pops-panel-select-multiple-disable .el-tag .el-tag__close:hover,
+.pops-panel-select-multiple-disable .el-select__wrapper,
+.pops-panel-select-multiple-disable .el-select__caret {
+	cursor: not-allowed;
+}
 /* select-multiple的CSS*/
 
 /* deepMenu的css */
@@ -1208,10 +1246,16 @@ section.pops-panel-deepMenu-container
 		--el-color-primary: #409eff;
 		--el-color-white: #ffffff;
 	}
-	/* select-multiple的CSS*/
 	.pops-panel-select-multiple .el-tag {
 		--el-color-info-light-9: #202121;
 	}
+	.pops-panel-select-multiple-disable {
+		--el-border-color: rgb(51, 51, 51, var(--pops-bd-opacity));
+	}
+	.pops-panel-select-multiple-disable .el-tag.el-tag--info {
+		--el-tag-bg-color: #2f2f2f;
+	}
+	/* select-multiple的CSS*/
 	/* slider的CSS */
 	.pops-slider {
 		--pops-slider-border-color-light: #414243;
@@ -1233,4 +1277,16 @@ section.pops-panel-deepMenu-container
 		--pops-panel-components-textarea-hover-bd-color: #6f7175;
 		--pops-panel-components-textarea-focus-bd-color: #409eff;
 	}
+	.pops-panel-textarea-disable {
+		--pops-panel-components-textarea-text-color: var(
+			--pops-components-is-disabled-text-color
+		);
+		--pops-panel-components-textarea-text-bg-color: var(
+			--pops-components-is-disabled-bg-color
+		);
+	}
+	/* slider */
+	.pops-slider {
+		--pops-slider-text-color-placeholder: #8d9095;
+	}
 }

package/src/components/panel/types/components-selectMultiple.ts

@@ -75,7 +75,7 @@ export interface PopsPanelSelectMultipleDetails<T = any>
 	/**
 	 * （可选）是否禁用
 	 */
-	disabled?: boolean | ((value: T) => boolean);
+	disabled?: boolean | (() => boolean);
 	/**
 	 * 提示文字
 	 */

package/src/css/index.css

@@ -18,14 +18,11 @@
 	--pops-bd-color: rgb(235, 238, 245, var(--pops-bd-opacity));
 	--pops-box-shadow-color: rgba(0, 0, 0, 0.12);
 	--pops-title-color: #000000;
-	--pops-title-border-color: rgb(229, 229, 229, var(--pops-bd-opacity));
+	--pops-title-border-color: var(--pops-bd-color);
 	--pops-content-color: #000000;
-	--pops-bottom-btn-controls-border-color: rgb(
-		229,
-		229,
-		229,
-		var(--pops-bd-opacity)
-	);
+	--pops-bottom-btn-controls-border-color: var(--pops-bd-color);
+	--pops-components-is-disabled-text-color: #a8abb2;
+	--pops-components-is-disabled-bg-color: #f5f7fa;
 }
 @media (prefers-color-scheme: dark) {
 	.pops {
@@ -35,8 +32,10 @@
 		--pops-bd-color: rgb(55, 55, 55, var(--pops-bd-opacity));
 		--pops-box-shadow-color: rgba(81, 81, 81, 0.12);
 		--pops-title-color: #e8e8e8;
-		--pops-title-border-color: rgb(229, 229, 229, var(--pops-bd-opacity));
+		--pops-title-border-color: var(--pops-bd-color);
 		--pops-content-color: #e5e5e5;
+		--pops-components-is-disabled-text-color: #a8abb2;
+		--pops-components-is-disabled-bg-color: #262727;
 	}
 }
 .pops {