@whitesev/pops 2.1.4 → 2.1.6

package/src/components/prompt/index.ts

@@ -6,7 +6,7 @@ import { popsDOMUtils } from "../../utils/PopsDOMUtils";
 import { PopsInstanceUtils } from "../../utils/PopsInstanceUtils";
 import { popsUtils } from "../../utils/PopsUtils";
 import { PopsPromptConfig } from "./config";
-import type { PopsPromptDetails } from "./indexType";
+import type { PopsPromptDetails } from "./types/index";
 
 export const PopsPrompt = {
 	init(details: PopsPromptDetails) {
@@ -49,19 +49,19 @@ export const PopsPrompt = {
 			PopsType,
 			config,
 			/*html*/ `
-            <div class="pops-prompt-title" style="text-align: ${
-							config.title.position
-						};${headerStyle}">${
+            <div class="pops-title pops-${PopsType}-title" style="text-align: ${
+				config.title.position
+			};${headerStyle}">${
 				config.title.html
 					? config.title.text
 					: `<p pops style="${headerPStyle}">${config.title.text}</p>`
 			}${headerBtnHTML}</div>
-            <div class="pops-prompt-content" style="${contentPStyle}">${
+            <div class="pops-content pops-${PopsType}-content" style="${contentPStyle}">${
 				config.content.row
-					? '<textarea pops="" placeholder="' +
+					? '<textarea name="pops-input-text" pops="" placeholder="' +
 					  config.content.placeholder +
 					  '"></textarea>'
-					: '<input pops="" placeholder="' +
+					: '<input name="pops-input-text" pops="" placeholder="' +
 					  config.content.placeholder +
 					  '" type="' +
 					  (config.content.password ? "password" : "text") +

package/src/components/prompt/{indexType.ts → types/index.ts}

@@ -3,7 +3,7 @@ import type {
 	PopsDragConfig,
 	PopsCommonConfig,
 	PopsMoreButtonConfig,
-} from "../../types/components";
+} from "../../../types/components";
 
 /**
  * pops.prompt

package/src/components/rightClickMenu/config.ts

@@ -1,5 +1,5 @@
 import { PopsIcon } from "../../PopsIcon";
-import type { PopsRightClickMenuDetails } from "./indexType";
+import type { PopsRightClickMenuDetails } from "./types";
 
 export const rightClickMenuConfig =
 	(): DeepRequired<PopsRightClickMenuDetails> => {

package/src/components/rightClickMenu/index.css

@@ -1,3 +1,8 @@
+.pops-rightClickMenu {
+	--right-context-menu-shadow-color: #cacaca;
+	--right-context-menu-row-visited-color: #dfdfdf;
+	--right-context-menu-row-hover-color: #dfdfdf;
+}
 .pops-rightClickMenu * {
 	-webkit-box-sizing: border-box;
 	box-sizing: border-box;
@@ -14,7 +19,7 @@
 	font-size: 16px;
 	font-weight: 500;
 	background: #fff;
-	box-shadow: 0px 1px 6px 1px #cacaca;
+	box-shadow: 0px 1px 6px 1px var(--right-context-menu-shadow-color);
 }
 .pops-rightClickMenu-anim-grid {
 	display: grid;
@@ -25,7 +30,7 @@
 	grid-template-rows: 1fr;
 }
 .pops-rightClickMenu-is-visited {
-	background: #dfdfdf;
+	background: var(--right-context-menu-row-visited-color);
 }
 i.pops-rightClickMenu-icon {
 	height: 1em;
@@ -45,7 +50,7 @@ i.pops-rightClickMenu-icon[is-loading="true"] {
 	animation: rotating 2s linear infinite;
 }
 .pops-rightClickMenu li:hover {
-	background: #dfdfdf;
+	background: var(--right-context-menu-row-hover-color);
 	cursor: pointer;
 }
 .pops-rightClickMenu ul {
@@ -71,3 +76,9 @@ i.pops-rightClickMenu-icon[is-loading="true"] {
 	-ms-user-select: none;
 	align-items: center;
 }
+
+@media (prefers-color-scheme: dark) {
+	.pops-rightClickMenu {
+		--right-context-menu-shadow-color: #3c3c3c;
+	}
+}

package/src/components/rightClickMenu/index.ts

@@ -1,4 +1,4 @@
-import { OriginPrototype } from "../../Core";
+import { OriginPrototype } from "../../PopsCore";
 import { GlobalConfig } from "../../GlobalConfig";
 import { PopsHandler } from "../../handler/PopsHandler";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
@@ -8,7 +8,7 @@ import { rightClickMenuConfig as PopsRightClickMenuConfig } from "./config";
 import type {
 	PopsRightClickMenuDataDetails,
 	PopsRightClickMenuDetails,
-} from "./indexType";
+} from "./types";
 import { PopsCSS } from "../../PopsCSS";
 import { PopsIcon } from "../../PopsIcon";
 

package/src/components/rightClickMenu/{indexType.ts → types/index.ts}

@@ -1,5 +1,5 @@
-import type { PopsCommonConfig } from "../../types/components";
-import type { PopsIconType } from "../../types/icon";
+import type { PopsCommonConfig } from "../../../types/components";
+import type { PopsIconType } from "../../../types/icon";
 
 /**
  * pops.rightClickMenu的右键菜单配置

package/src/components/searchSuggestion/config.ts

@@ -1,4 +1,4 @@
-import type { PopsSearchSuggestionDetails } from "./indexType";
+import type { PopsSearchSuggestionDetails } from "./types/index";
 
 export const searchSuggestionConfig =
 	(): DeepRequired<PopsSearchSuggestionDetails> => {

package/src/components/searchSuggestion/index.ts

@@ -4,7 +4,7 @@ import { popsUtils } from "../../utils/PopsUtils";
 import { searchSuggestionConfig as PopsSearchSuggestionConfig } from "./config";
 import { GlobalConfig } from "../../GlobalConfig";
 import { PopsSafeUtils } from "../../utils/PopsSafeUtils";
-import type { PopsSearchSuggestionDetails } from "./indexType";
+import type { PopsSearchSuggestionDetails } from "./types/index";
 import { PopsCSS } from "../../PopsCSS";
 
 export const PopsSearchSuggestion = {
@@ -129,6 +129,13 @@ export const PopsSearchSuggestion = {
 					-o-animation: searchSelectFalIn 0.5s 1 linear;
 					-ms-animation: searchSelectFalIn 0.5s 1 linear;
 				}
+				.pops-${PopsType}-search-suggestion{
+					--search-suggestion-bg-color: #ffffff;
+					--search-suggestion-box-shadow-color: rgb(0 0 0 / 20%);
+					--search-suggestion-item-color: #515a6e;
+					--search-suggestion-item-none-color: #8e8e8e;
+					--search-suggestion-item-hover-bg-color: rgba(0, 0, 0, .1);
+				}
 				.pops-${PopsType}-search-suggestion{
 					border: initial;
 					overflow: initial;
@@ -142,10 +149,10 @@ export const PopsSearchSuggestion = {
 					overflow-x: hidden;
 					overflow-y: auto;
 					padding: 5px 0;
-					background-color: #fff;
+					background-color: var(--search-suggestion-bg-color);
 					box-sizing: border-box;
 					border-radius: 4px;
-					box-shadow: 0 1px 6px rgb(0 0 0 / 20%);
+					box-shadow: 0 1px 6px var(--search-suggestion-box-shadow-color);
 				}
 				/* 建议框在上面时 */
 				ul.pops-${PopsType}-search-suggestion-hint[data-top-reverse]{
@@ -159,7 +166,7 @@ export const PopsSearchSuggestion = {
 					padding: 7px;
 					margin: 0;
 					clear: both;
-					color: #515a6e;
+					color: var(--search-suggestion-item-color);
 					font-size: 14px;
 					list-style: none;
 					cursor: pointer;
@@ -171,10 +178,18 @@ export const PopsSearchSuggestion = {
 				ul.pops-${PopsType}-search-suggestion-hint li[data-none]{
 					text-align: center;
 					font-size: 12px;
-					color: #8e8e8e;
+					color: var(--search-suggestion-item-none-color);
 				}
 				ul.pops-${PopsType}-search-suggestion-hint li:hover{
-					background-color: rgba(0, 0, 0, .1);
+					background-color: var(--search-suggestion-item-hover-bg-color);
+				}
+
+				@media (prefers-color-scheme: dark){
+					.pops-${PopsType}-search-suggestion{
+						--search-suggestion-bg-color: #1d1e1f;
+						--search-suggestion-item-color: #cfd3d4;
+						--search-suggestion-item-hover-bg-color: rgba(175, 175, 175, .1);
+					}
 				}
 				`;
 			},

package/src/components/searchSuggestion/{indexType.ts → types/index.ts}

@@ -1,4 +1,4 @@
-import type { PopsCommonConfig } from "../../types/components";
+import type { PopsCommonConfig } from "../../../types/components";
 
 /**
  * 搜索建议悬浮窗

package/src/components/tooltip/config.ts

@@ -1,4 +1,4 @@
-import type { PopsToolTipDetails } from "./indexType";
+import type { PopsToolTipDetails } from "./types/index";
 
 export const PopsTooltipConfig = (): DeepRequired<PopsToolTipDetails> => {
 	// @ts-ignore

package/src/components/tooltip/index.css

@@ -1,25 +1,32 @@
 .pops-tip {
+	--pops-bg-opacity: 1;
 	--tooltip-color: #4e4e4e;
 	--tooltip-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));
 	--tooltip-bd-radius: 2px;
+	--tooltip-box-shadow-left-color: rgba(0, 0, 0, 0.24);
+	--tooltip-box-shadow-right-color: rgba(0, 0, 0, 0.12);
 	--tooltip-font-size: 14px;
 	--tooltip-padding-top: 13px;
 	--tooltip-padding-right: 13px;
 	--tooltip-padding-bottom: 13px;
 	--tooltip-padding-left: 13px;
 
+	--tooltip-arrow-box-shadow-left-color: rgba(0, 0, 0, 0.24);
+	--tooltip-arrow-box-shadow-right-color: rgba(0, 0, 0, 0.12);
 	--tooltip-arrow--after-color: rgb(78, 78, 78);
 	--tooltip-arrow--after-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));
 	--tooltip-arrow--after-width: 12px;
 	--tooltip-arrow--after-height: 12px;
-
+}
+.pops-tip {
 	padding: var(--tooltip-padding-top) var(--tooltip-padding-right)
 		var(--tooltip-padding-bottom) var(--tooltip-padding-left);
 	max-width: 400px;
 	max-height: 300px;
 	border-radius: var(--tooltip-bd-radius);
 	background-color: var(--tooltip-bg-color);
-	box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
+	box-shadow: 0 1.5px 4px var(--tooltip-box-shadow-left-color),
+		0 1.5px 6px var(--tooltip-box-shadow-right-color);
 	color: var(--tooltip-color);
 	font-size: var(--tooltip-font-size);
 }
@@ -29,22 +36,7 @@
 .pops-tip[data-position="fixed"] {
 	position: fixed;
 }
-/* github的样式 */
-.pops-tip.github-tooltip {
-	--tooltip-bg-opacity: 1;
-	--tooltip-color: rgb(255, 255, 255);
-	--tooltip-bg-color: rgb(36, 41, 47, var(--tooltip-bg-opacity));
-	--tooltip-bd-radius: 6px;
-	--tooltip-padding-top: 6px;
-	--tooltip-padding-right: 8px;
-	--tooltip-padding-bottom: 6px;
-	--tooltip-padding-left: 8px;
 
-	--tooltip-arrow--after-color: rgb(255, 255, 255);
-	--tooltip-arrow--after-bg-color: rgb(36, 41, 47, var(--tooltip-bg-opacity));
-	--tooltip-arrow--after-width: 8px;
-	--tooltip-arrow--after-height: 8px;
-}
 .pops-tip .pops-tip-arrow {
 	position: absolute;
 	top: 100%;
@@ -63,7 +55,8 @@
 	height: var(--tooltip-arrow--after-height);
 	background: var(--tooltip-arrow--after-bg-color);
 	color: var(--tooltip-arrow--after-color);
-	box-shadow: 0 1px 7px rgba(0, 0, 0, 0.24), 0 1px 7px rgba(0, 0, 0, 0.12);
+	box-shadow: 0 1px 7px var(--tooltip-arrow-box-shadow-left-color),
+		0 1px 7px var(--tooltip-arrow-box-shadow-right-color);
 	content: "";
 	transform: translateX(-50%) translateY(-50%) rotate(45deg);
 }
@@ -85,7 +78,8 @@
 	width: var(--tooltip-arrow--after-width);
 	height: var(--tooltip-arrow--after-height);
 	background: var(--tooltip-arrow--after-bg-color);
-	box-shadow: 0 1px 7px rgba(0, 0, 0, 0.24), 0 1px 7px rgba(0, 0, 0, 0.12);
+	box-shadow: 0 1px 7px var(--tooltip-arrow-box-shadow-left-color),
+		0 1px 7px var(--tooltip-arrow-box-shadow-right-color);
 	content: "";
 	transform: translateX(-50%) translateY(-50%) rotate(45deg);
 }
@@ -174,3 +168,29 @@
 	-webkit-animation-name: pops-motion-fadeInRight;
 	animation-name: pops-motion-fadeInRight;
 }
+
+/* github的样式 */
+.pops-tip.github-tooltip {
+	--tooltip-bg-opacity: 1;
+	--tooltip-color: #ffffff;
+	--tooltip-bg-color: rgb(36, 41, 47, var(--tooltip-bg-opacity));
+	--tooltip-bd-radius: 6px;
+	--tooltip-padding-top: 6px;
+	--tooltip-padding-right: 8px;
+	--tooltip-padding-bottom: 6px;
+	--tooltip-padding-left: 8px;
+
+	--tooltip-arrow--after-color: rgb(255, 255, 255);
+	--tooltip-arrow--after-bg-color: rgb(36, 41, 47, var(--tooltip-bg-opacity));
+	--tooltip-arrow--after-width: 8px;
+	--tooltip-arrow--after-height: 8px;
+}
+
+@media (prefers-color-scheme: dark) {
+	.pops-tip {
+		--tooltip-color: #ffffff;
+		--tooltip-bg-color: #fafafa;
+		--tooltip-arrow--after-color: #fafafa;
+		--tooltip-arrow--after-bg-color: rgb(250, 250, 250, var(--pops-bg-opacity));
+	}
+}

package/src/components/tooltip/index.ts

@@ -5,7 +5,7 @@ import { popsDOMUtils } from "../../utils/PopsDOMUtils";
 import { PopsSafeUtils } from "../../utils/PopsSafeUtils";
 import { popsUtils } from "../../utils/PopsUtils";
 import { PopsTooltipConfig } from "./config";
-import type { PopsToolTipDetails } from "./indexType";
+import type { PopsToolTipDetails } from "./types/index";
 
 type ToolTipEventTypeName = "MouseEvent" | "TouchEvent";
 

package/src/components/tooltip/{indexType.ts → types/index.ts}

@@ -1,4 +1,4 @@
-import type { PopsCommonConfig } from "../../types/components";
+import type { PopsCommonConfig } from "../../../types/components";
 
 /** tooltip的出现位置 */
 export type PopsTooltipPosition =