@whitesev/pops 2.3.2 → 2.3.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.amd.js +260 -125
- package/dist/index.amd.js.map +1 -1
- package/dist/index.cjs.js +260 -125
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +260 -125
- package/dist/index.esm.js.map +1 -1
- package/dist/index.iife.js +260 -125
- package/dist/index.iife.js.map +1 -1
- package/dist/index.system.js +260 -125
- package/dist/index.system.js.map +1 -1
- package/dist/index.umd.js +260 -125
- package/dist/index.umd.js.map +1 -1
- package/dist/types/src/Pops.d.ts +14 -8
- package/dist/types/src/components/rightClickMenu/types/index.d.ts +2 -2
- package/dist/types/src/components/searchSuggestion/index.d.ts +16 -7
- package/dist/types/src/components/searchSuggestion/types/index.d.ts +21 -10
- package/dist/types/src/utils/PopsDOMUtils.d.ts +14 -6
- package/package.json +1 -1
package/dist/index.iife.js
CHANGED
|
@@ -1816,11 +1816,11 @@ var pops = (function () {
|
|
|
1816
1816
|
}
|
|
1817
1817
|
/**
|
|
1818
1818
|
* 添加className
|
|
1819
|
-
* @param
|
|
1819
|
+
* @param $el 目标元素
|
|
1820
1820
|
* @param className className属性
|
|
1821
1821
|
*/
|
|
1822
|
-
addClassName(
|
|
1823
|
-
if (
|
|
1822
|
+
addClassName($el, className) {
|
|
1823
|
+
if ($el == null) {
|
|
1824
1824
|
return;
|
|
1825
1825
|
}
|
|
1826
1826
|
if (typeof className !== "string") {
|
|
@@ -1829,15 +1829,16 @@ var pops = (function () {
|
|
|
1829
1829
|
if (className.trim() === "") {
|
|
1830
1830
|
return;
|
|
1831
1831
|
}
|
|
1832
|
-
|
|
1832
|
+
const classNameList = className.split(" ").filter((item) => item.trim() !== "");
|
|
1833
|
+
$el.classList.add(...classNameList);
|
|
1833
1834
|
}
|
|
1834
1835
|
/**
|
|
1835
1836
|
* 删除className
|
|
1836
|
-
* @param
|
|
1837
|
+
* @param $el 目标元素
|
|
1837
1838
|
* @param className className属性
|
|
1838
1839
|
*/
|
|
1839
|
-
removeClassName(
|
|
1840
|
-
if (
|
|
1840
|
+
removeClassName($el, className) {
|
|
1841
|
+
if ($el == null) {
|
|
1841
1842
|
return;
|
|
1842
1843
|
}
|
|
1843
1844
|
if (typeof className !== "string") {
|
|
@@ -1846,15 +1847,16 @@ var pops = (function () {
|
|
|
1846
1847
|
if (className.trim() === "") {
|
|
1847
1848
|
return;
|
|
1848
1849
|
}
|
|
1849
|
-
|
|
1850
|
+
const classNameList = className.split(" ").filter((item) => item.trim() !== "");
|
|
1851
|
+
$el.classList.remove(...classNameList);
|
|
1850
1852
|
}
|
|
1851
1853
|
/**
|
|
1852
1854
|
* 判断元素是否包含某个className
|
|
1853
|
-
* @param
|
|
1855
|
+
* @param $el 目标元素
|
|
1854
1856
|
* @param className className属性
|
|
1855
1857
|
*/
|
|
1856
|
-
containsClassName(
|
|
1857
|
-
if (
|
|
1858
|
+
containsClassName($el, className) {
|
|
1859
|
+
if ($el == null) {
|
|
1858
1860
|
return false;
|
|
1859
1861
|
}
|
|
1860
1862
|
if (typeof className !== "string") {
|
|
@@ -1863,7 +1865,7 @@ var pops = (function () {
|
|
|
1863
1865
|
if (className.trim() === "") {
|
|
1864
1866
|
return false;
|
|
1865
1867
|
}
|
|
1866
|
-
return
|
|
1868
|
+
return $el.classList.contains(className);
|
|
1867
1869
|
}
|
|
1868
1870
|
css(element, property, value) {
|
|
1869
1871
|
/**
|
|
@@ -2486,6 +2488,24 @@ var pops = (function () {
|
|
|
2486
2488
|
}
|
|
2487
2489
|
return useChangeColor();
|
|
2488
2490
|
}
|
|
2491
|
+
/**
|
|
2492
|
+
* 获取移动元素的transform偏移
|
|
2493
|
+
* @param element 元素
|
|
2494
|
+
*/
|
|
2495
|
+
getTransform(element) {
|
|
2496
|
+
let transform_left = 0;
|
|
2497
|
+
let transform_top = 0;
|
|
2498
|
+
let elementTransform = PopsCore.globalThis.getComputedStyle(element).transform;
|
|
2499
|
+
if (elementTransform !== "none" && elementTransform != null && elementTransform !== "") {
|
|
2500
|
+
let elementTransformSplit = elementTransform.match(/\((.+)\)/)?.[1].split(",");
|
|
2501
|
+
transform_left = Math.abs(parseInt(elementTransformSplit[4]));
|
|
2502
|
+
transform_top = Math.abs(parseInt(elementTransformSplit[5]));
|
|
2503
|
+
}
|
|
2504
|
+
return {
|
|
2505
|
+
transformLeft: transform_left,
|
|
2506
|
+
transformTop: transform_top,
|
|
2507
|
+
};
|
|
2508
|
+
}
|
|
2489
2509
|
}
|
|
2490
2510
|
const popsDOMUtils = new PopsDOMUtils();
|
|
2491
2511
|
|
|
@@ -2757,7 +2777,7 @@ var pops = (function () {
|
|
|
2757
2777
|
|
|
2758
2778
|
var scrollbarCSS = "/* ::-webkit-scrollbar 是非标准的css */\n/* https://caniuse.com/?search=%20%3A%3A-webkit-scrollbar */\n.pops ::-webkit-scrollbar {\n\twidth: 6px;\n\theight: 0;\n}\n\n/* 滚动条轨道 */\n.pops ::-webkit-scrollbar-track {\n\twidth: 0;\n}\n/* 滚动条滑块 */\n.pops ::-webkit-scrollbar-thumb {\n\tmin-height: 28px;\n\tborder-radius: 2em;\n\tbackground: rgb(204, 204, 204, var(--pops-bg-opacity, 1));\n\tbackground-clip: padding-box;\n}\n/* 滚动条滑块 */\n.pops ::-webkit-scrollbar-thumb:hover {\n\tbackground: rgb(178, 178, 178, var(--pops-bg-opacity, 1));\n}\n";
|
|
2759
2779
|
|
|
2760
|
-
var buttonCSS = ".pops {\n\t--button-font-size: 14px;\n\t--button-height: 32px;\n\t--button-color: rgb(51, 51, 51);\n\t--button-bd-color: rgb(220, 223, 230, var(--pops-bd-opacity));\n\t--button-bg-color: rgb(220, 223, 230, var(--pops-bg-opacity));\n\t--button-margin-top: 0px;\n\t--button-margin-bottom: 0px;\n\t--button-margin-left: 5px;\n\t--button-margin-right: 5px;\n\t--button-padding-top: 6px;\n\t--button-padding-bottom: 6px;\n\t--button-padding-left: 12px;\n\t--button-padding-right: 12px;\n\t--button-radius: 4px;\n\n\t--container-title-height: 55px;\n\t--container-bottom-btn-height: 55px;\n\n\t/* default按钮 */\n\t--button-default-color: #333333;\n\t--button-default-bd-color: #dcdfe6;\n\t--button-default-bg-color: #ffffff;\n\t--button-default-active-color: #409eff;\n\t--button-default-active-bd-color: #409eff;\n\t--button-default-active-bg-color: #ecf5ff;\n\t--button-default-hover-color: #409eff;\n\t--button-default-hover-bd-color: #c6e2ff;\n\t--button-default-hover-bg-color: #ecf5ff;\n\t--button-default-focus-visible-outline-color: #a0cfff;\n\t--button-default-focus-visible-outline: 2px solid var(--button-default-focus-visible-outline-color);\n\t--button-default-focus-visible-outline-offset: 1px;\n\t--button-default-disabled-color: #a8abb2;\n\t--button-default-disabled-bd-color: #ffffff;\n\t--button-default-disabled-bg-color: #e4e7ed;\n\n\t/* primary按钮 */\n\t--button-primary-color: #ffffff;\n\t--button-primary-bd-color: #409eff;\n\t--button-primary-bg-color: #409eff;\n\t--button-primary-active-color: #ffffff;\n\t--button-primary-active-bd-color: #337ecc;\n\t--button-primary-active-bg-color: #337ecc;\n\t--button-primary-hover-color: #ffffff;\n\t--button-primary-hover-bd-color: #79bbff;\n\t--button-primary-hover-bg-color: #79bbff;\n\t--button-primary-focus-visible-outline-color: #a0cfff;\n\t--button-primary-focus-visible-outline: 2px solid var(--button-primary-focus-visible-outline-color);\n\t--button-primary-focus-visible-outline-offset: 1px;\n\t--button-primary-disabled-color: #ffffff80;\n\t--button-primary-disabled-bd-color: #a0cfff;\n\t--button-primary-disabled-bg-color: #a0cfff;\n\n\t/* success按钮 */\n\t--button-success-color: #ffffff;\n\t--button-success-bd-color: #4cae4c;\n\t--button-success-bg-color: #5cb85c;\n\t--button-success-active-color: #ffffff;\n\t--button-success-active-bd-color: #529b2e;\n\t--button-success-active-bg-color: #529b2e;\n\t--button-success-hover-color: #ffffff;\n\t--button-success-hover-bd-color: #95d475;\n\t--button-success-hover-bg-color: #95d475;\n\t--button-success-focus-visible-outline-color: #b3e19d;\n\t--button-success-focus-visible-outline: 2px solid var(--button-success-focus-visible-outline-color);\n\t--button-success-focus-visible-outline-offset: 1px;\n\t--button-success-disabled-color: #ffffff80;\n\t--button-success-disabled-bd-color: #b3e19d;\n\t--button-success-disabled-bg-color: #b3e19d;\n\n\t/* info按钮 */\n\t--button-info-color: #ffffff;\n\t--button-info-bd-color: #909399;\n\t--button-info-bg-color: #909399;\n\t--button-info-active-color: #ffffff;\n\t--button-info-active-bd-color: #73767a;\n\t--button-info-active-bg-color: #73767a;\n\t--button-info-hover-color: #ffffff;\n\t--button-info-hover-bd-color: #b1b3b8;\n\t--button-info-hover-bg-color: #b1b3b8;\n\t--button-info-focus-visible-outline-color: #c8c9cc;\n\t--button-info-focus-visible-outline: 2px solid var(--button-info-focus-visible-outline-color);\n\t--button-info-focus-visible-outline-offset: 1px;\n\t--button-info-disabled-color: #ffffff80;\n\t--button-info-disabled-bd-color: #c8c9cc;\n\t--button-info-disabled-bg-color: #c8c9cc;\n\n\t/* warning按钮 */\n\t--button-warning-color: #ffffff;\n\t--button-warning-bd-color: #e6a23c;\n\t--button-warning-bg-color: #e6a23c;\n\t--button-warning-active-color: #ffffff;\n\t--button-warning-active-bd-color: #b88230;\n\t--button-warning-active-bg-color: #b88230;\n\t--button-warning-hover-color: #ffffff80;\n\t--button-warning-hover-bd-color: #eebe77;\n\t--button-warning-hover-bg-color: #eebe77;\n\t--button-warning-focus-visible-outline-color: #f3d19e;\n\t--button-warning-focus-visible-outline: 2px solid var(--button-warning-focus-visible-outline-color);\n\t--button-warning-focus-visible-outline-offset: 1px;\n\t--button-warning-disabled-color: #ffffff80;\n\t--button-warning-disabled-bd-color: #f3d19e;\n\t--button-warning-disabled-bg-color: #f3d19e;\n\n\t/* danger按钮 */\n\t--button-danger-color: #ffffff;\n\t--button-danger-bd-color: #f56c6c;\n\t--button-danger-bg-color: #f56c6c;\n\t--button-danger-active-color: #ffffff;\n\t--button-danger-active-bd-color: #c45656;\n\t--button-danger-active-bg-color: #c45656;\n\t--button-danger-hover-color: #ffffff;\n\t--button-danger-hover-bd-color: #f89898;\n\t--button-danger-hover-bg-color: #f89898;\n\t--button-danger-focus-visible-outline-color: #fab6b6;\n\t--button-danger-focus-visible-outline: 2px solid var(--button-danger-focus-visible-outline-color);\n\t--button-danger-focus-visible-outline-offset: 1px;\n\t--button-danger-disabled-color: #ffffff80;\n\t--button-danger-disabled-bd-color: #fab6b6;\n\t--button-danger-disabled-bg-color: #fab6b6;\n\n\t/* xiaomi-primary按钮 */\n\t--button-xiaomi-primary-color: #ffffff;\n\t--button-xiaomi-primary-bd-color: #ff5c00;\n\t--button-xiaomi-primary-bg-color: #ff5c00;\n\t--button-xiaomi-primary-active-color: #ffffff;\n\t--button-xiaomi-primary-active-bd-color: #da4f00;\n\t--button-xiaomi-primary-active-bg-color: #da4f00;\n\t--button-xiaomi-primary-hover-color: #ffffff;\n\t--button-xiaomi-primary-hover-bd-color: #ff7e29;\n\t--button-xiaomi-primary-hover-bg-color: #ff7e29;\n\t--button-xiaomi-primary-focus-visible-outline-color: #ffa061;\n\t--button-xiaomi-primary-focus-visible-outline: 2px solid\n\t\tvar(--button-xiaomi-primary-focus-visible-outline-color);\n\t--button-xiaomi-primary-focus-visible-outline-offset: 1px;\n\t--button-xiaomi-primary-disabled-color: #ffffff80;\n\t--button-xiaomi-primary-disabled-bd-color: #fad5b6;\n\t--button-xiaomi-primary-disabled-bg-color: #fad5b6;\n\n\t/* violet按钮 */\n\t--button-violet-color: #ffffff;\n\t--button-violet-bd-color: #626aef;\n\t--button-violet-bg-color: #626aef;\n\t--button-violet-active-color: #ffffff;\n\t--button-violet-active-bd-color: #8188f2;\n\t--button-violet-active-bg-color: #8188f2;\n\t--button-violet-hover-color: #ffffff;\n\t--button-violet-hover-bd-color: #4b50ad;\n\t--button-violet-hover-bg-color: #4b50ad;\n\t--button-violet-focus-visible-outline-color: #2a598a;\n\t--button-violet-focus-visible-outline: 2px solid var(--button-violet-focus-visible-outline-color);\n\t--button-violet-focus-visible-outline-offset: 1px;\n\t--button-violet-disabled-color: #ffffff80;\n\t--button-violet-disabled-bd-color: #3b3f82;\n\t--button-violet-disabled-bg-color: #3b3f82;\n}\n\n@media (prefers-color-scheme: dark) {\n\t.pops {\n\t\t/* default按钮 */\n\t\t--button-default-color: #cfd3dc;\n\t\t--button-default-bd-color: #4c4d4f;\n\t\t--button-default-bg-color: transparent;\n\t\t--button-default-active-color: #409eff;\n\t\t--button-default-active-bd-color: #409eff;\n\t\t--button-default-active-bg-color: #18222c;\n\t\t--button-default-hover-color: #409eff;\n\t\t--button-default-hover-bd-color: #213d5b;\n\t\t--button-default-hover-bg-color: #18222c;\n\t\t--button-default-focus-visible-outline-color: #2a598a;\n\t\t--button-default-focus-visible-outline: 2px solid var(--button-default-focus-visible-outline-color);\n\t\t--button-default-focus-visible-outline-offset: 1px;\n\t\t--button-default-disabled-color: #ffffff80;\n\t\t--button-default-disabled-bd-color: #414243;\n\t\t--button-default-disabled-bg-color: transparent;\n\n\t\t/* primary按钮 */\n\t\t--button-primary-color: #ffffff;\n\t\t--button-primary-bd-color: #409eff;\n\t\t--button-primary-bg-color: #409eff;\n\t\t--button-primary-active-color: #ffffff;\n\t\t--button-primary-active-bd-color: #66b1ff;\n\t\t--button-primary-active-bg-color: #66b1ff;\n\t\t--button-primary-hover-color: #ffffff;\n\t\t--button-primary-hover-bd-color: #3375b9;\n\t\t--button-primary-hover-bg-color: #3375b9;\n\t\t--button-primary-focus-visible-outline-color: #2a598a;\n\t\t--button-primary-focus-visible-outline: 2px solid var(--button-primary-focus-visible-outline-color);\n\t\t--button-primary-focus-visible-outline-offset: 1px;\n\t\t--button-primary-disabled-color: #ffffff80;\n\t\t--button-primary-disabled-bd-color: #2a598a;\n\t\t--button-primary-disabled-bg-color: #2a598a;\n\n\t\t/* success按钮 */\n\t\t--button-success-color: #ffffff;\n\t\t--button-success-bd-color: #67c23a;\n\t\t--button-success-bg-color: #67c23a;\n\t\t--button-success-active-color: #ffffff;\n\t\t--button-success-active-bd-color: #85ce61;\n\t\t--button-success-active-bg-color: #85ce61;\n\t\t--button-success-hover-color: #ffffff;\n\t\t--button-success-hover-bd-color: #4e8e2f;\n\t\t--button-success-hover-bg-color: #4e8e2f;\n\t\t--button-success-focus-visible-outline-color: #3e6b27;\n\t\t--button-success-focus-visible-outline: 2px solid var(--button-success-focus-visible-outline-color);\n\t\t--button-success-focus-visible-outline-offset: 1px;\n\t\t--button-success-disabled-color: #ffffff80;\n\t\t--button-success-disabled-bd-color: #3e6b27;\n\t\t--button-success-disabled-bg-color: #3e6b27;\n\n\t\t/* info按钮 */\n\t\t--button-info-color: #ffffff;\n\t\t--button-info-bd-color: #909399;\n\t\t--button-info-bg-color: #909399;\n\t\t--button-info-active-color: #ffffff;\n\t\t--button-info-active-bd-color: #a6a9ad;\n\t\t--button-info-active-bg-color: #a6a9ad;\n\t\t--button-info-hover-color: #ffffff;\n\t\t--button-info-hover-bd-color: #6b6d71;\n\t\t--button-info-hover-bg-color: #6b6d71;\n\t\t--button-info-focus-visible-outline-color: #525457;\n\t\t--button-info-focus-visible-outline: 2px solid var(--button-info-focus-visible-outline-color);\n\t\t--button-info-focus-visible-outline-offset: 1px;\n\t\t--button-info-disabled-color: #ffffff80;\n\t\t--button-info-disabled-bd-color: #525457;\n\t\t--button-info-disabled-bg-color: #525457;\n\n\t\t/* warning按钮 */\n\t\t--button-warning-color: #ffffff;\n\t\t--button-warning-bd-color: #e6a23c;\n\t\t--button-warning-bg-color: #e6a23c;\n\t\t--button-warning-active-color: #ffffff;\n\t\t--button-warning-active-bd-color: #ebb563;\n\t\t--button-warning-active-bg-color: #ebb563;\n\t\t--button-warning-hover-color: #ffffff80;\n\t\t--button-warning-hover-bd-color: #a77730;\n\t\t--button-warning-hover-bg-color: #a77730;\n\t\t--button-warning-focus-visible-outline-color: #7d5b28;\n\t\t--button-warning-focus-visible-outline: 2px solid var(--button-warning-focus-visible-outline-color);\n\t\t--button-warning-focus-visible-outline-offset: 1px;\n\t\t--button-warning-disabled-color: #ffffff80;\n\t\t--button-warning-disabled-bd-color: #7d5b28;\n\t\t--button-warning-disabled-bg-color: #7d5b28;\n\n\t\t/* danger按钮 */\n\t\t--button-danger-color: #ffffff;\n\t\t--button-danger-bd-color: #f56c6c;\n\t\t--button-danger-bg-color: #f56c6c;\n\t\t--button-danger-active-color: #ffffff;\n\t\t--button-danger-active-bd-color: #f78989;\n\t\t--button-danger-active-bg-color: #f78989;\n\t\t--button-danger-hover-color: #ffffff;\n\t\t--button-danger-hover-bd-color: #b25252;\n\t\t--button-danger-hover-bg-color: #b25252;\n\t\t--button-danger-focus-visible-outline-color: #854040;\n\t\t--button-danger-focus-visible-outline: 2px solid var(--button-danger-focus-visible-outline-color);\n\t\t--button-danger-focus-visible-outline-offset: 1px;\n\t\t--button-danger-disabled-color: #ffffff80;\n\t\t--button-danger-disabled-bd-color: #854040;\n\t\t--button-danger-disabled-bg-color: #854040;\n\t}\n}\n.pops[data-bottom-btn=\"false\"] {\n\t--container-bottom-btn-height: 0px;\n}\n.pops button {\n\twhite-space: nowrap;\n\tfloat: right;\n\tdisplay: inline-block;\n\tmargin: var(--button-margin-top) var(--button-margin-right) var(--button-margin-bottom)\n\t\tvar(--button-margin-left);\n\tpadding: var(--button-padding-top) var(--button-padding-right) var(--button-padding-bottom)\n\t\tvar(--button-padding-left);\n\toutline: 0;\n}\n.pops button[data-has-icon=\"false\"] .pops-bottom-icon {\n\tdisplay: none;\n}\n.pops button {\n\tborder-radius: var(--button-radius);\n\tbox-shadow: none;\n\tfont-weight: 400;\n\tfont-size: var(--button-font-size);\n\tcursor: pointer;\n\ttransition: all 0.3s ease-in-out;\n}\n.pops button {\n\tdisplay: flex;\n\talign-items: center;\n\theight: var(--button-height);\n\tline-height: normal;\n\tbox-sizing: border-box;\n\tuser-select: none;\n\t-webkit-user-select: none;\n\t-moz-user-select: none;\n\t-ms-user-select: none;\n\tborder: 1px solid var(--button-bd-color);\n}\n.pops button {\n\tcolor: var(--button-color);\n\tborder-color: var(--button-bd-color);\n\tbackground-color: var(--button-bg-color);\n}\n.pops button:active {\n\tcolor: var(--button-color);\n\tborder-color: var(--button-bd-color);\n\tbackground-color: var(--button-bg-color);\n\toutline: 0;\n}\n.pops button:hover {\n\tcolor: var(--button-color);\n\tborder-color: var(--button-bd-color);\n\tbackground-color: var(--button-bg-color);\n}\n.pops button:focus-visible {\n\tcolor: var(--button-color);\n\tborder-color: var(--button-bd-color);\n\tbackground-color: var(--button-bg-color);\n}\n.pops button:disabled {\n\tcursor: not-allowed;\n\tcolor: var(--button-color);\n\tborder-color: var(--button-bd-color);\n\tbackground-color: var(--button-bg-color);\n}\n.pops button.pops-button-large {\n\t--button-height: 32px;\n\t--button-padding-top: 12px;\n\t--button-padding-bottom: 12px;\n\t--button-padding-left: 19px;\n\t--button-padding-right: 19px;\n\t--button-font-size: 14px;\n\t--button-border-radius: 4px;\n}\n\n.pops button.pops-button-small {\n\t--button-height: 24px;\n\t--button-padding-top: 5px;\n\t--button-padding-bottom: 5px;\n\t--button-padding-left: 11px;\n\t--button-padding-right: 11px;\n\t--button-font-size: 12px;\n\t--button-border-radius: 4px;\n}\n.pops-panel-button-no-icon .pops-panel-button_inner i {\n\tdisplay: none;\n}\n.pops-panel-button-right-icon .pops-panel-button_inner {\n\tflex-direction: row-reverse;\n}\n.pops-panel-button .pops-panel-button_inner i:has(svg),\n.pops-panel-button-right-icon .pops-panel-button-text {\n\tmargin-right: 6px;\n}\n\n.pops button[data-type=\"default\"] {\n\t--button-color: var(--button-default-color);\n\t--button-bd-color: var(--button-default-bd-color);\n\t--button-bg-color: var(--button-default-bg-color);\n}\n.pops button[data-type=\"default\"]:active {\n\t--button-color: var(--button-default-active-color);\n\t--button-bd-color: var(--button-default-active-bd-color);\n\t--button-bg-color: var(--button-default-active-bg-color);\n}\n.pops button[data-type=\"default\"]:hover {\n\t--button-color: var(--button-default-hover-color);\n\t--button-bd-color: var(--button-default-hover-bd-color);\n\t--button-bg-color: var(--button-default-hover-bg-color);\n}\n.pops button[data-type=\"default\"]:focus-visible {\n\toutline: var(--button-default-focus-visible-outline);\n\toutline-offset: var(--button-default-focus-visible-outline-offset);\n}\n.pops button[data-type=\"default\"]:disabled {\n\t--button-color: var(--button-default-disabled-color);\n\t--button-bd-color: var(--button-default-disabled-bd-color);\n\t--button-bg-color: var(--button-default-disabled-bg-color);\n}\n\n.pops button[data-type=\"primary\"] {\n\t--button-color: var(--button-primary-color);\n\t--button-bd-color: var(--button-primary-bd-color);\n\t--button-bg-color: var(--button-primary-bg-color);\n}\n.pops button[data-type=\"primary\"]:active {\n\t--button-color: var(--button-primary-active-color);\n\t--button-bd-color: var(--button-primary-active-bd-color);\n\t--button-bg-color: var(--button-primary-active-bg-color);\n}\n.pops button[data-type=\"primary\"]:hover {\n\t--button-color: var(--button-primary-hover-color);\n\t--button-bd-color: var(--button-primary-hover-bd-color);\n\t--button-bg-color: var(--button-primary-hover-bg-color);\n}\n.pops button[data-type=\"primary\"]:focus-visible {\n\toutline: var(--button-primary-focus-visible-outline);\n\toutline-offset: var(--button-primary-focus-visible-outline-offset);\n}\n.pops button[data-type=\"primary\"]:disabled {\n\t--button-color: var(--button-primary-disabled-color);\n\t--button-bd-color: var(--button-primary-disabled-bd-color);\n\t--button-bg-color: var(--button-primary-disabled-bg-color);\n}\n\n.pops button[data-type=\"success\"] {\n\t--button-color: var(--button-success-color);\n\t--button-bd-color: var(--button-success-bd-color);\n\t--button-bg-color: var(--button-success-bg-color);\n}\n.pops button[data-type=\"success\"]:active {\n\t--button-color: var(--button-success-active-color);\n\t--button-bd-color: var(--button-success-active-bd-color);\n\t--button-bg-color: var(--button-success-active-bg-color);\n}\n.pops button[data-type=\"success\"]:hover {\n\t--button-color: var(--button-success-hover-color);\n\t--button-bd-color: var(--button-success-hover-bd-color);\n\t--button-bg-color: var(--button-success-hover-bg-color);\n}\n.pops button[data-type=\"success\"]:focus-visible {\n\toutline: var(--button-success-focus-visible-outline);\n\toutline-offset: var(--button-success-focus-visible-outline-offset);\n}\n.pops button[data-type=\"success\"]:disabled {\n\t--button-color: var(--button-success-disabled-color);\n\t--button-bd-color: var(--button-success-disabled-bd-color);\n\t--button-bg-color: var(--button-success-disabled-bg-color);\n}\n\n.pops button[data-type=\"info\"] {\n\t--button-color: var(--button-info-color);\n\t--button-bd-color: var(--button-info-bd-color);\n\t--button-bg-color: var(--button-info-bg-color);\n}\n.pops button[data-type=\"info\"]:active {\n\t--button-color: var(--button-info-active-color);\n\t--button-bd-color: var(--button-info-active-bd-color);\n\t--button-bg-color: var(--button-info-active-bg-color);\n}\n.pops button[data-type=\"info\"]:hover {\n\t--button-color: var(--button-info-hover-color);\n\t--button-bd-color: var(--button-info-hover-bd-color);\n\t--button-bg-color: var(--button-info-hover-bg-color);\n}\n.pops button[data-type=\"info\"]:focus-visible {\n\toutline: var(--button-info-focus-visible-outline);\n\toutline-offset: var(--button-info-focus-visible-outline-offset);\n}\n.pops button[data-type=\"info\"]:disabled {\n\t--button-color: var(--button-success-disabled-color);\n\t--button-bd-color: var(--button-success-disabled-bd-color);\n\t--button-bg-color: var(--button-success-disabled-bg-color);\n}\n\n.pops button[data-type=\"warning\"] {\n\t--button-color: var(--button-warning-color);\n\t--button-bd-color: var(--button-warning-bd-color);\n\t--button-bg-color: var(--button-warning-bg-color);\n}\n.pops button[data-type=\"warning\"]:active {\n\t--button-color: var(--button-warning-active-color);\n\t--button-bd-color: var(--button-warning-active-bd-color);\n\t--button-bg-color: var(--button-warning-active-bg-color);\n}\n.pops button[data-type=\"warning\"]:hover {\n\t--button-color: var(--button-warning-hover-color);\n\t--button-bd-color: var(--button-warning-hover-bd-color);\n\t--button-bg-color: var(--button-warning-hover-bg-color);\n}\n.pops button[data-type=\"warning\"]:focus-visible {\n\toutline: var(--button-warning-focus-visible-outline);\n\toutline-offset: var(--button-warning-focus-visible-outline-offset);\n}\n.pops button[data-type=\"warning\"]:disabled {\n\t--button-color: var(--button-success-disabled-color);\n\t--button-bd-color: var(--button-success-disabled-bd-color);\n\t--button-bg-color: var(--button-success-disabled-bg-color);\n}\n\n.pops button[data-type=\"danger\"] {\n\t--button-color: var(--button-danger-color);\n\t--button-bd-color: var(--button-danger-bd-color);\n\t--button-bg-color: var(--button-danger-bg-color);\n}\n.pops button[data-type=\"danger\"]:active {\n\t--button-color: var(--button-danger-active-color);\n\t--button-bd-color: var(--button-danger-active-bd-color);\n\t--button-bg-color: var(--button-danger-active-bg-color);\n}\n.pops button[data-type=\"danger\"]:hover {\n\t--button-color: var(--button-danger-hover-color);\n\t--button-bd-color: var(--button-danger-hover-bd-color);\n\t--button-bg-color: var(--button-danger-hover-bg-color);\n}\n.pops button[data-type=\"danger\"]:focus-visible {\n\toutline: var(--button-danger-focus-visible-outline);\n\toutline-offset: var(--button-danger-focus-visible-outline-offset);\n}\n.pops button[data-type=\"danger\"]:disabled {\n\t--button-color: var(--button-success-disabled-color);\n\t--button-bd-color: var(--button-success-disabled-bd-color);\n\t--button-bg-color: var(--button-success-disabled-bg-color);\n}\n\n.pops button[data-type=\"xiaomi-primary\"] {\n\t--button-color: var(--button-xiaomi-primary-color);\n\t--button-bd-color: var(--button-xiaomi-primary-bd-color);\n\t--button-bg-color: var(--button-xiaomi-primary-bg-color);\n}\n.pops button[data-type=\"xiaomi-primary\"]:active {\n\t--button-color: var(--button-xiaomi-primary-active-color);\n\t--button-bd-color: var(--button-xiaomi-primary-active-bd-color);\n\t--button-bg-color: var(--button-xiaomi-primary-active-bg-color);\n}\n.pops button[data-type=\"xiaomi-primary\"]:hover {\n\t--button-color: var(--button-xiaomi-primary-hover-color);\n\t--button-bd-color: var(--button-xiaomi-primary-hover-bd-color);\n\t--button-bg-color: var(--button-xiaomi-primary-hover-bg-color);\n}\n.pops button[data-type=\"xiaomi-primary\"]:focus-visible {\n\toutline: var(--button-xiaomi-primary-focus-visible-outline);\n\toutline-offset: var(--button-xiaomi-primary-focus-visible-outline-offset);\n}\n.pops button[data-type=\"xiaomi-primary\"]:disabled {\n\t--button-color: var(--button-success-disabled-color);\n\t--button-bd-color: var(--button-success-disabled-bd-color);\n\t--button-bg-color: var(--button-success-disabled-bg-color);\n}\n";
|
|
2780
|
+
var buttonCSS = ".pops {\n\t--button-font-size: 14px;\n\t--button-height: 32px;\n\t--button-color: rgb(51, 51, 51);\n\t--button-bd-color: rgb(220, 223, 230, var(--pops-bd-opacity));\n\t--button-bg-color: rgb(220, 223, 230, var(--pops-bg-opacity));\n\t--button-margin-top: 0px;\n\t--button-margin-bottom: 0px;\n\t--button-margin-left: 5px;\n\t--button-margin-right: 5px;\n\t--button-padding-top: 6px;\n\t--button-padding-bottom: 6px;\n\t--button-padding-left: 12px;\n\t--button-padding-right: 12px;\n\t--button-radius: 4px;\n\n\t--container-title-height: 55px;\n\t--container-bottom-btn-height: 55px;\n\n\t/* default按钮 */\n\t--button-default-color: #333333;\n\t--button-default-bd-color: #dcdfe6;\n\t--button-default-bg-color: #ffffff;\n\t--button-default-active-color: #409eff;\n\t--button-default-active-bd-color: #409eff;\n\t--button-default-active-bg-color: #ecf5ff;\n\t--button-default-hover-color: #409eff;\n\t--button-default-hover-bd-color: #c6e2ff;\n\t--button-default-hover-bg-color: #ecf5ff;\n\t--button-default-focus-visible-outline-color: #a0cfff;\n\t--button-default-focus-visible-outline: 2px solid var(--button-default-focus-visible-outline-color);\n\t--button-default-focus-visible-outline-offset: 1px;\n\t--button-default-disabled-color: #a8abb2;\n\t--button-default-disabled-bd-color: #ffffff;\n\t--button-default-disabled-bg-color: #e4e7ed;\n\n\t/* primary按钮 */\n\t--button-primary-color: #ffffff;\n\t--button-primary-bd-color: #409eff;\n\t--button-primary-bg-color: #409eff;\n\t--button-primary-active-color: #ffffff;\n\t--button-primary-active-bd-color: #337ecc;\n\t--button-primary-active-bg-color: #337ecc;\n\t--button-primary-hover-color: #ffffff;\n\t--button-primary-hover-bd-color: #79bbff;\n\t--button-primary-hover-bg-color: #79bbff;\n\t--button-primary-focus-visible-outline-color: #a0cfff;\n\t--button-primary-focus-visible-outline: 2px solid var(--button-primary-focus-visible-outline-color);\n\t--button-primary-focus-visible-outline-offset: 1px;\n\t--button-primary-disabled-color: #ffffff80;\n\t--button-primary-disabled-bd-color: #a0cfff;\n\t--button-primary-disabled-bg-color: #a0cfff;\n\n\t/* success按钮 */\n\t--button-success-color: #ffffff;\n\t--button-success-bd-color: #4cae4c;\n\t--button-success-bg-color: #5cb85c;\n\t--button-success-active-color: #ffffff;\n\t--button-success-active-bd-color: #529b2e;\n\t--button-success-active-bg-color: #529b2e;\n\t--button-success-hover-color: #ffffff;\n\t--button-success-hover-bd-color: #95d475;\n\t--button-success-hover-bg-color: #95d475;\n\t--button-success-focus-visible-outline-color: #b3e19d;\n\t--button-success-focus-visible-outline: 2px solid var(--button-success-focus-visible-outline-color);\n\t--button-success-focus-visible-outline-offset: 1px;\n\t--button-success-disabled-color: #ffffff80;\n\t--button-success-disabled-bd-color: #b3e19d;\n\t--button-success-disabled-bg-color: #b3e19d;\n\n\t/* info按钮 */\n\t--button-info-color: #ffffff;\n\t--button-info-bd-color: #909399;\n\t--button-info-bg-color: #909399;\n\t--button-info-active-color: #ffffff;\n\t--button-info-active-bd-color: #73767a;\n\t--button-info-active-bg-color: #73767a;\n\t--button-info-hover-color: #ffffff;\n\t--button-info-hover-bd-color: #b1b3b8;\n\t--button-info-hover-bg-color: #b1b3b8;\n\t--button-info-focus-visible-outline-color: #c8c9cc;\n\t--button-info-focus-visible-outline: 2px solid var(--button-info-focus-visible-outline-color);\n\t--button-info-focus-visible-outline-offset: 1px;\n\t--button-info-disabled-color: #ffffff80;\n\t--button-info-disabled-bd-color: #c8c9cc;\n\t--button-info-disabled-bg-color: #c8c9cc;\n\n\t/* warning按钮 */\n\t--button-warning-color: #ffffff;\n\t--button-warning-bd-color: #e6a23c;\n\t--button-warning-bg-color: #e6a23c;\n\t--button-warning-active-color: #ffffff;\n\t--button-warning-active-bd-color: #b88230;\n\t--button-warning-active-bg-color: #b88230;\n\t--button-warning-hover-color: #ffffff80;\n\t--button-warning-hover-bd-color: #eebe77;\n\t--button-warning-hover-bg-color: #eebe77;\n\t--button-warning-focus-visible-outline-color: #f3d19e;\n\t--button-warning-focus-visible-outline: 2px solid var(--button-warning-focus-visible-outline-color);\n\t--button-warning-focus-visible-outline-offset: 1px;\n\t--button-warning-disabled-color: #ffffff80;\n\t--button-warning-disabled-bd-color: #f3d19e;\n\t--button-warning-disabled-bg-color: #f3d19e;\n\n\t/* danger按钮 */\n\t--button-danger-color: #ffffff;\n\t--button-danger-bd-color: #f56c6c;\n\t--button-danger-bg-color: #f56c6c;\n\t--button-danger-active-color: #ffffff;\n\t--button-danger-active-bd-color: #c45656;\n\t--button-danger-active-bg-color: #c45656;\n\t--button-danger-hover-color: #ffffff;\n\t--button-danger-hover-bd-color: #f89898;\n\t--button-danger-hover-bg-color: #f89898;\n\t--button-danger-focus-visible-outline-color: #fab6b6;\n\t--button-danger-focus-visible-outline: 2px solid var(--button-danger-focus-visible-outline-color);\n\t--button-danger-focus-visible-outline-offset: 1px;\n\t--button-danger-disabled-color: #ffffff80;\n\t--button-danger-disabled-bd-color: #fab6b6;\n\t--button-danger-disabled-bg-color: #fab6b6;\n\n\t/* xiaomi-primary按钮 */\n\t--button-xiaomi-primary-color: #ffffff;\n\t--button-xiaomi-primary-bd-color: #ff5c00;\n\t--button-xiaomi-primary-bg-color: #ff5c00;\n\t--button-xiaomi-primary-active-color: #ffffff;\n\t--button-xiaomi-primary-active-bd-color: #da4f00;\n\t--button-xiaomi-primary-active-bg-color: #da4f00;\n\t--button-xiaomi-primary-hover-color: #ffffff;\n\t--button-xiaomi-primary-hover-bd-color: #ff7e29;\n\t--button-xiaomi-primary-hover-bg-color: #ff7e29;\n\t--button-xiaomi-primary-focus-visible-outline-color: #ffa061;\n\t--button-xiaomi-primary-focus-visible-outline: 2px solid\n\t\tvar(--button-xiaomi-primary-focus-visible-outline-color);\n\t--button-xiaomi-primary-focus-visible-outline-offset: 1px;\n\t--button-xiaomi-primary-disabled-color: #ffffff80;\n\t--button-xiaomi-primary-disabled-bd-color: #fad5b6;\n\t--button-xiaomi-primary-disabled-bg-color: #fad5b6;\n\n\t/* violet按钮 */\n\t--button-violet-color: #ffffff;\n\t--button-violet-bd-color: #626aef;\n\t--button-violet-bg-color: #626aef;\n\t--button-violet-active-color: #ffffff;\n\t--button-violet-active-bd-color: #8188f2;\n\t--button-violet-active-bg-color: #8188f2;\n\t--button-violet-hover-color: #ffffff;\n\t--button-violet-hover-bd-color: #4b50ad;\n\t--button-violet-hover-bg-color: #4b50ad;\n\t--button-violet-focus-visible-outline-color: #2a598a;\n\t--button-violet-focus-visible-outline: 2px solid var(--button-violet-focus-visible-outline-color);\n\t--button-violet-focus-visible-outline-offset: 1px;\n\t--button-violet-disabled-color: #ffffff80;\n\t--button-violet-disabled-bd-color: #3b3f82;\n\t--button-violet-disabled-bg-color: #3b3f82;\n}\n\n@media (prefers-color-scheme: dark) {\n\t.pops {\n\t\t/* default按钮 */\n\t\t--button-default-color: #cfd3dc;\n\t\t--button-default-bd-color: #4c4d4f;\n\t\t--button-default-bg-color: transparent;\n\t\t--button-default-active-color: #409eff;\n\t\t--button-default-active-bd-color: #409eff;\n\t\t--button-default-active-bg-color: #18222c;\n\t\t--button-default-hover-color: #409eff;\n\t\t--button-default-hover-bd-color: #213d5b;\n\t\t--button-default-hover-bg-color: #18222c;\n\t\t--button-default-focus-visible-outline-color: #2a598a;\n\t\t--button-default-focus-visible-outline: 2px solid var(--button-default-focus-visible-outline-color);\n\t\t--button-default-focus-visible-outline-offset: 1px;\n\t\t--button-default-disabled-color: #ffffff80;\n\t\t--button-default-disabled-bd-color: #414243;\n\t\t--button-default-disabled-bg-color: transparent;\n\n\t\t/* primary按钮 */\n\t\t--button-primary-color: #ffffff;\n\t\t--button-primary-bd-color: #409eff;\n\t\t--button-primary-bg-color: #409eff;\n\t\t--button-primary-active-color: #ffffff;\n\t\t--button-primary-active-bd-color: #66b1ff;\n\t\t--button-primary-active-bg-color: #66b1ff;\n\t\t--button-primary-hover-color: #ffffff;\n\t\t--button-primary-hover-bd-color: #3375b9;\n\t\t--button-primary-hover-bg-color: #3375b9;\n\t\t--button-primary-focus-visible-outline-color: #2a598a;\n\t\t--button-primary-focus-visible-outline: 2px solid var(--button-primary-focus-visible-outline-color);\n\t\t--button-primary-focus-visible-outline-offset: 1px;\n\t\t--button-primary-disabled-color: #ffffff80;\n\t\t--button-primary-disabled-bd-color: #2a598a;\n\t\t--button-primary-disabled-bg-color: #2a598a;\n\n\t\t/* success按钮 */\n\t\t--button-success-color: #ffffff;\n\t\t--button-success-bd-color: #67c23a;\n\t\t--button-success-bg-color: #67c23a;\n\t\t--button-success-active-color: #ffffff;\n\t\t--button-success-active-bd-color: #85ce61;\n\t\t--button-success-active-bg-color: #85ce61;\n\t\t--button-success-hover-color: #ffffff;\n\t\t--button-success-hover-bd-color: #4e8e2f;\n\t\t--button-success-hover-bg-color: #4e8e2f;\n\t\t--button-success-focus-visible-outline-color: #3e6b27;\n\t\t--button-success-focus-visible-outline: 2px solid var(--button-success-focus-visible-outline-color);\n\t\t--button-success-focus-visible-outline-offset: 1px;\n\t\t--button-success-disabled-color: #ffffff80;\n\t\t--button-success-disabled-bd-color: #3e6b27;\n\t\t--button-success-disabled-bg-color: #3e6b27;\n\n\t\t/* info按钮 */\n\t\t--button-info-color: #ffffff;\n\t\t--button-info-bd-color: #909399;\n\t\t--button-info-bg-color: #909399;\n\t\t--button-info-active-color: #ffffff;\n\t\t--button-info-active-bd-color: #a6a9ad;\n\t\t--button-info-active-bg-color: #a6a9ad;\n\t\t--button-info-hover-color: #ffffff;\n\t\t--button-info-hover-bd-color: #6b6d71;\n\t\t--button-info-hover-bg-color: #6b6d71;\n\t\t--button-info-focus-visible-outline-color: #525457;\n\t\t--button-info-focus-visible-outline: 2px solid var(--button-info-focus-visible-outline-color);\n\t\t--button-info-focus-visible-outline-offset: 1px;\n\t\t--button-info-disabled-color: #ffffff80;\n\t\t--button-info-disabled-bd-color: #525457;\n\t\t--button-info-disabled-bg-color: #525457;\n\n\t\t/* warning按钮 */\n\t\t--button-warning-color: #ffffff;\n\t\t--button-warning-bd-color: #e6a23c;\n\t\t--button-warning-bg-color: #e6a23c;\n\t\t--button-warning-active-color: #ffffff;\n\t\t--button-warning-active-bd-color: #ebb563;\n\t\t--button-warning-active-bg-color: #ebb563;\n\t\t--button-warning-hover-color: #ffffff80;\n\t\t--button-warning-hover-bd-color: #a77730;\n\t\t--button-warning-hover-bg-color: #a77730;\n\t\t--button-warning-focus-visible-outline-color: #7d5b28;\n\t\t--button-warning-focus-visible-outline: 2px solid var(--button-warning-focus-visible-outline-color);\n\t\t--button-warning-focus-visible-outline-offset: 1px;\n\t\t--button-warning-disabled-color: #ffffff80;\n\t\t--button-warning-disabled-bd-color: #7d5b28;\n\t\t--button-warning-disabled-bg-color: #7d5b28;\n\n\t\t/* danger按钮 */\n\t\t--button-danger-color: #ffffff;\n\t\t--button-danger-bd-color: #f56c6c;\n\t\t--button-danger-bg-color: #f56c6c;\n\t\t--button-danger-active-color: #ffffff;\n\t\t--button-danger-active-bd-color: #f78989;\n\t\t--button-danger-active-bg-color: #f78989;\n\t\t--button-danger-hover-color: #ffffff;\n\t\t--button-danger-hover-bd-color: #b25252;\n\t\t--button-danger-hover-bg-color: #b25252;\n\t\t--button-danger-focus-visible-outline-color: #854040;\n\t\t--button-danger-focus-visible-outline: 2px solid var(--button-danger-focus-visible-outline-color);\n\t\t--button-danger-focus-visible-outline-offset: 1px;\n\t\t--button-danger-disabled-color: #ffffff80;\n\t\t--button-danger-disabled-bd-color: #854040;\n\t\t--button-danger-disabled-bg-color: #854040;\n\t}\n}\n.pops[data-bottom-btn=\"false\"] {\n\t--container-bottom-btn-height: 0px;\n}\n.pops button {\n\twhite-space: nowrap;\n\tfloat: right;\n\tdisplay: inline-block;\n\tmargin: var(--button-margin-top) var(--button-margin-right) var(--button-margin-bottom)\n\t\tvar(--button-margin-left);\n\tpadding: var(--button-padding-top) var(--button-padding-right) var(--button-padding-bottom)\n\t\tvar(--button-padding-left);\n\toutline: 0;\n}\n.pops button[data-has-icon=\"false\"] .pops-bottom-icon {\n\tdisplay: none;\n}\n.pops button {\n\tborder-radius: var(--button-radius);\n\tbox-shadow: none;\n\tfont-weight: 400;\n\tfont-size: var(--button-font-size);\n\tcursor: pointer;\n\ttransition: all 0.3s ease-in-out;\n}\n.pops button {\n\tdisplay: flex;\n\talign-items: center;\n\theight: var(--button-height);\n\tline-height: normal;\n\tbox-sizing: border-box;\n\tuser-select: none;\n\t-webkit-user-select: none;\n\t-moz-user-select: none;\n\t-ms-user-select: none;\n\tborder: 1px solid var(--button-bd-color);\n}\n.pops button {\n\tcolor: var(--button-color);\n\tborder-color: var(--button-bd-color);\n\tbackground-color: var(--button-bg-color);\n}\n.pops button:active {\n\tcolor: var(--button-color);\n\tborder-color: var(--button-bd-color);\n\tbackground-color: var(--button-bg-color);\n\toutline: 0;\n}\n.pops button:hover {\n\tcolor: var(--button-color);\n\tborder-color: var(--button-bd-color);\n\tbackground-color: var(--button-bg-color);\n}\n.pops button:focus-visible {\n\tcolor: var(--button-color);\n\tborder-color: var(--button-bd-color);\n\tbackground-color: var(--button-bg-color);\n}\n.pops button:disabled {\n\tcursor: not-allowed;\n\tcolor: var(--button-color);\n\tborder-color: var(--button-bd-color);\n\tbackground-color: var(--button-bg-color);\n}\n.pops button.pops-button-large {\n\t--button-height: 32px;\n\t--button-padding-top: 12px;\n\t--button-padding-bottom: 12px;\n\t--button-padding-left: 19px;\n\t--button-padding-right: 19px;\n\t--button-font-size: 14px;\n\t--button-border-radius: 4px;\n}\n\n.pops button.pops-button-small {\n\t--button-height: 24px;\n\t--button-padding-top: 5px;\n\t--button-padding-bottom: 5px;\n\t--button-padding-left: 11px;\n\t--button-padding-right: 11px;\n\t--button-font-size: 12px;\n\t--button-border-radius: 4px;\n}\n.pops-panel-button-no-icon .pops-panel-button_inner i {\n\tdisplay: none;\n}\n.pops-panel-button-right-icon .pops-panel-button_inner {\n\tflex-direction: row-reverse;\n}\n.pops-panel-button .pops-panel-button_inner i:has(svg),\n.pops-panel-button-right-icon .pops-panel-button-text {\n\tmargin-right: 6px;\n}\n\n.pops button[data-type=\"default\"] {\n\t--button-color: var(--button-default-color);\n\t--button-bd-color: var(--button-default-bd-color);\n\t--button-bg-color: var(--button-default-bg-color);\n}\n.pops button[data-type=\"default\"]:active {\n\t--button-color: var(--button-default-active-color);\n\t--button-bd-color: var(--button-default-active-bd-color);\n\t--button-bg-color: var(--button-default-active-bg-color);\n}\n.pops button[data-type=\"default\"]:hover {\n\t--button-color: var(--button-default-hover-color);\n\t--button-bd-color: var(--button-default-hover-bd-color);\n\t--button-bg-color: var(--button-default-hover-bg-color);\n}\n.pops button[data-type=\"default\"]:focus-visible {\n\toutline: var(--button-default-focus-visible-outline);\n\toutline-offset: var(--button-default-focus-visible-outline-offset);\n}\n.pops button[data-type=\"default\"]:disabled {\n\t--button-color: var(--button-default-disabled-color);\n\t--button-bd-color: var(--button-default-disabled-bd-color);\n\t--button-bg-color: var(--button-default-disabled-bg-color);\n}\n\n.pops button[data-type=\"primary\"] {\n\t--button-color: var(--button-primary-color);\n\t--button-bd-color: var(--button-primary-bd-color);\n\t--button-bg-color: var(--button-primary-bg-color);\n}\n.pops button[data-type=\"primary\"]:active {\n\t--button-color: var(--button-primary-active-color);\n\t--button-bd-color: var(--button-primary-active-bd-color);\n\t--button-bg-color: var(--button-primary-active-bg-color);\n}\n.pops button[data-type=\"primary\"]:hover {\n\t--button-color: var(--button-primary-hover-color);\n\t--button-bd-color: var(--button-primary-hover-bd-color);\n\t--button-bg-color: var(--button-primary-hover-bg-color);\n}\n.pops button[data-type=\"primary\"]:focus-visible {\n\toutline: var(--button-primary-focus-visible-outline);\n\toutline-offset: var(--button-primary-focus-visible-outline-offset);\n}\n.pops button[data-type=\"primary\"]:disabled {\n\t--button-color: var(--button-primary-disabled-color);\n\t--button-bd-color: var(--button-primary-disabled-bd-color);\n\t--button-bg-color: var(--button-primary-disabled-bg-color);\n}\n\n.pops button[data-type=\"success\"] {\n\t--button-color: var(--button-success-color);\n\t--button-bd-color: var(--button-success-bd-color);\n\t--button-bg-color: var(--button-success-bg-color);\n}\n.pops button[data-type=\"success\"]:active {\n\t--button-color: var(--button-success-active-color);\n\t--button-bd-color: var(--button-success-active-bd-color);\n\t--button-bg-color: var(--button-success-active-bg-color);\n}\n.pops button[data-type=\"success\"]:hover {\n\t--button-color: var(--button-success-hover-color);\n\t--button-bd-color: var(--button-success-hover-bd-color);\n\t--button-bg-color: var(--button-success-hover-bg-color);\n}\n.pops button[data-type=\"success\"]:focus-visible {\n\toutline: var(--button-success-focus-visible-outline);\n\toutline-offset: var(--button-success-focus-visible-outline-offset);\n}\n.pops button[data-type=\"success\"]:disabled {\n\t--button-color: var(--button-success-disabled-color);\n\t--button-bd-color: var(--button-success-disabled-bd-color);\n\t--button-bg-color: var(--button-success-disabled-bg-color);\n}\n\n.pops button[data-type=\"info\"] {\n\t--button-color: var(--button-info-color);\n\t--button-bd-color: var(--button-info-bd-color);\n\t--button-bg-color: var(--button-info-bg-color);\n}\n.pops button[data-type=\"info\"]:active {\n\t--button-color: var(--button-info-active-color);\n\t--button-bd-color: var(--button-info-active-bd-color);\n\t--button-bg-color: var(--button-info-active-bg-color);\n}\n.pops button[data-type=\"info\"]:hover {\n\t--button-color: var(--button-info-hover-color);\n\t--button-bd-color: var(--button-info-hover-bd-color);\n\t--button-bg-color: var(--button-info-hover-bg-color);\n}\n.pops button[data-type=\"info\"]:focus-visible {\n\toutline: var(--button-info-focus-visible-outline);\n\toutline-offset: var(--button-info-focus-visible-outline-offset);\n}\n.pops button[data-type=\"info\"]:disabled {\n\t--button-color: var(--button-info-disabled-color);\n\t--button-bd-color: var(--button-info-disabled-bd-color);\n\t--button-bg-color: var(--button-info-disabled-bg-color);\n}\n\n.pops button[data-type=\"warning\"] {\n\t--button-color: var(--button-warning-color);\n\t--button-bd-color: var(--button-warning-bd-color);\n\t--button-bg-color: var(--button-warning-bg-color);\n}\n.pops button[data-type=\"warning\"]:active {\n\t--button-color: var(--button-warning-active-color);\n\t--button-bd-color: var(--button-warning-active-bd-color);\n\t--button-bg-color: var(--button-warning-active-bg-color);\n}\n.pops button[data-type=\"warning\"]:hover {\n\t--button-color: var(--button-warning-hover-color);\n\t--button-bd-color: var(--button-warning-hover-bd-color);\n\t--button-bg-color: var(--button-warning-hover-bg-color);\n}\n.pops button[data-type=\"warning\"]:focus-visible {\n\toutline: var(--button-warning-focus-visible-outline);\n\toutline-offset: var(--button-warning-focus-visible-outline-offset);\n}\n.pops button[data-type=\"warning\"]:disabled {\n\t--button-color: var(--button-warning-disabled-color);\n\t--button-bd-color: var(--button-warning-disabled-bd-color);\n\t--button-bg-color: var(--button-warning-disabled-bg-color);\n}\n\n.pops button[data-type=\"danger\"] {\n\t--button-color: var(--button-danger-color);\n\t--button-bd-color: var(--button-danger-bd-color);\n\t--button-bg-color: var(--button-danger-bg-color);\n}\n.pops button[data-type=\"danger\"]:active {\n\t--button-color: var(--button-danger-active-color);\n\t--button-bd-color: var(--button-danger-active-bd-color);\n\t--button-bg-color: var(--button-danger-active-bg-color);\n}\n.pops button[data-type=\"danger\"]:hover {\n\t--button-color: var(--button-danger-hover-color);\n\t--button-bd-color: var(--button-danger-hover-bd-color);\n\t--button-bg-color: var(--button-danger-hover-bg-color);\n}\n.pops button[data-type=\"danger\"]:focus-visible {\n\toutline: var(--button-danger-focus-visible-outline);\n\toutline-offset: var(--button-danger-focus-visible-outline-offset);\n}\n.pops button[data-type=\"danger\"]:disabled {\n\t--button-color: var(--button-danger-disabled-color);\n\t--button-bd-color: var(--button-danger-disabled-bd-color);\n\t--button-bg-color: var(--button-danger-disabled-bg-color);\n}\n\n.pops button[data-type=\"xiaomi-primary\"] {\n\t--button-color: var(--button-xiaomi-primary-color);\n\t--button-bd-color: var(--button-xiaomi-primary-bd-color);\n\t--button-bg-color: var(--button-xiaomi-primary-bg-color);\n}\n.pops button[data-type=\"xiaomi-primary\"]:active {\n\t--button-color: var(--button-xiaomi-primary-active-color);\n\t--button-bd-color: var(--button-xiaomi-primary-active-bd-color);\n\t--button-bg-color: var(--button-xiaomi-primary-active-bg-color);\n}\n.pops button[data-type=\"xiaomi-primary\"]:hover {\n\t--button-color: var(--button-xiaomi-primary-hover-color);\n\t--button-bd-color: var(--button-xiaomi-primary-hover-bd-color);\n\t--button-bg-color: var(--button-xiaomi-primary-hover-bg-color);\n}\n.pops button[data-type=\"xiaomi-primary\"]:focus-visible {\n\toutline: var(--button-xiaomi-primary-focus-visible-outline);\n\toutline-offset: var(--button-xiaomi-primary-focus-visible-outline-offset);\n}\n.pops button[data-type=\"xiaomi-primary\"]:disabled {\n\t--button-color: var(--button-xiaomi-primary-disabled-color);\n\t--button-bd-color: var(--button-xiaomi-primary-disabled-bd-color);\n\t--button-bg-color: var(--button-xiaomi-primary-disabled-bg-color);\n}\n\n.pops button[data-type=\"violet\"] {\n\t--button-color: var(--button-violet-color);\n\t--button-bd-color: var(--button-violet-bd-color);\n\t--button-bg-color: var(--button-violet-bg-color);\n}\n.pops button[data-type=\"violet\"]:active {\n\t--button-color: var(--button-violet-active-color);\n\t--button-bd-color: var(--button-violet-active-bd-color);\n\t--button-bg-color: var(--button-violet-active-bg-color);\n}\n.pops button[data-type=\"violet\"]:hover {\n\t--button-color: var(--button-violet-hover-color);\n\t--button-bd-color: var(--button-violet-hover-bd-color);\n\t--button-bg-color: var(--button-violet-hover-bg-color);\n}\n.pops button[data-type=\"violet\"]:focus-visible {\n\toutline: var(--button-violet-focus-visible-outline);\n\toutline-offset: var(--button-violet-focus-visible-outline-offset);\n}\n.pops button[data-type=\"violet\"]:disabled {\n\t--button-color: var(--button-violet-disabled-color);\n\t--button-bd-color: var(--button-violet-disabled-bd-color);\n\t--button-bg-color: var(--button-violet-disabled-bg-color);\n}\n";
|
|
2761
2781
|
|
|
2762
2782
|
var commonCSS = ".pops-flex-items-center {\n\tdisplay: flex;\n\talign-items: center;\n}\n.pops-flex-y-center {\n\tdisplay: flex;\n\tjustify-content: space-between;\n}\n.pops-flex-x-center {\n\tdisplay: flex;\n\talign-content: center;\n}\n.pops-hide {\n\tdisplay: none;\n}\n.pops-hide-important {\n\tdisplay: none !important;\n}\n.pops-no-border {\n\tborder: 0;\n}\n.pops-no-border-important {\n\tborder: 0 !important;\n}\n.pops-user-select-none {\n\tuser-select: none;\n\t-webkit-user-select: none;\n\t-ms-user-select: none;\n\t-moz-user-select: none;\n}\n.pops-line-height-center {\n\tline-height: normal;\n\talign-content: center;\n}\n.pops-width-fill {\n\twidth: -webkit-fill-available;\n\twidth: -moz-available;\n}\n.pops-text-is-disabled {\n\t--pops-text-is-disabled-color: #a8abb2;\n\tcolor: var(--pops-text-is-disabled-color);\n\t--pops-panel-forms-container-item-left-desc-text-color: var(--pops-text-is-disabled-color);\n}\n.pops-text-is-disabled-important {\n\t--pops-text-is-disabled-color: #a8abb2;\n\tcolor: var(--pops-text-is-disabled-color) !important;\n\t--pops-panel-forms-container-item-left-desc-text-color: var(--pops-text-is-disabled-color) !important;\n}\n";
|
|
2763
2783
|
|
|
@@ -3285,23 +3305,6 @@ var pops = (function () {
|
|
|
3285
3305
|
popsDOMUtils.css(options.dragElement, {
|
|
3286
3306
|
cursor: "move",
|
|
3287
3307
|
});
|
|
3288
|
-
/**
|
|
3289
|
-
* 获取移动元素的transform偏移
|
|
3290
|
-
*/
|
|
3291
|
-
function getTransform(element) {
|
|
3292
|
-
let transform_left = 0;
|
|
3293
|
-
let transform_top = 0;
|
|
3294
|
-
let elementTransform = PopsCore.globalThis.getComputedStyle(element).transform;
|
|
3295
|
-
if (elementTransform !== "none" && elementTransform != null && elementTransform !== "") {
|
|
3296
|
-
let elementTransformSplit = elementTransform.match(/\((.+)\)/)?.[1].split(",");
|
|
3297
|
-
transform_left = Math.abs(parseInt(elementTransformSplit[4]));
|
|
3298
|
-
transform_top = Math.abs(parseInt(elementTransformSplit[5]));
|
|
3299
|
-
}
|
|
3300
|
-
return {
|
|
3301
|
-
transformLeft: transform_left,
|
|
3302
|
-
transformTop: transform_top,
|
|
3303
|
-
};
|
|
3304
|
-
}
|
|
3305
3308
|
/**
|
|
3306
3309
|
* 修改移动的元素的style
|
|
3307
3310
|
*/
|
|
@@ -3343,9 +3346,8 @@ var pops = (function () {
|
|
|
3343
3346
|
};
|
|
3344
3347
|
}
|
|
3345
3348
|
}
|
|
3346
|
-
|
|
3347
|
-
let
|
|
3348
|
-
let transformTop = transformInfo.transformTop;
|
|
3349
|
+
// 获取transform偏移
|
|
3350
|
+
let transformInfo = popsDOMUtils.getTransform(moveElement);
|
|
3349
3351
|
let resumeMoveElementStyle = null;
|
|
3350
3352
|
anyTouchElement.on("pan", function (event) {
|
|
3351
3353
|
if (!isMove) {
|
|
@@ -3353,9 +3355,7 @@ var pops = (function () {
|
|
|
3353
3355
|
let rect = options.dragElement.getBoundingClientRect();
|
|
3354
3356
|
clickElementLeftOffset = event.x - rect.left;
|
|
3355
3357
|
clickElementTopOffset = event.y - rect.top;
|
|
3356
|
-
transformInfo = getTransform(moveElement);
|
|
3357
|
-
transformLeft = transformInfo.transformLeft;
|
|
3358
|
-
transformTop = transformInfo.transformTop;
|
|
3358
|
+
transformInfo = popsDOMUtils.getTransform(moveElement);
|
|
3359
3359
|
//if (event.nativeEvent.offsetX) {
|
|
3360
3360
|
// clickElementLeftOffset = parseInt(event.nativeEvent.offsetX);
|
|
3361
3361
|
//} else {
|
|
@@ -3369,9 +3369,9 @@ var pops = (function () {
|
|
|
3369
3369
|
resumeMoveElementStyle = changeMoveElementStyle(moveElement);
|
|
3370
3370
|
}
|
|
3371
3371
|
/** 当前移动的left偏移 */
|
|
3372
|
-
let currentMoveLeftOffset = event.x - clickElementLeftOffset + transformLeft;
|
|
3372
|
+
let currentMoveLeftOffset = event.x - clickElementLeftOffset + transformInfo.transformLeft;
|
|
3373
3373
|
/** 当前移动的top偏移 */
|
|
3374
|
-
let currentMoveTopOffset = event.y - clickElementTopOffset + transformTop;
|
|
3374
|
+
let currentMoveTopOffset = event.y - clickElementTopOffset + transformInfo.transformTop;
|
|
3375
3375
|
/* 拖拽移动 */
|
|
3376
3376
|
if (event.phase === "move") {
|
|
3377
3377
|
if (options.limit) {
|
|
@@ -3379,12 +3379,12 @@ var pops = (function () {
|
|
|
3379
3379
|
/* left偏移最大值 */
|
|
3380
3380
|
let maxLeftOffset = getContainerWidthOrHeight(options.container).width -
|
|
3381
3381
|
popsDOMUtils.width(moveElement) +
|
|
3382
|
-
transformLeft;
|
|
3382
|
+
transformInfo.transformLeft;
|
|
3383
3383
|
let { left: minLeftOffset, top: minTopOffset } = getContainerTopOrLeft(options.container);
|
|
3384
3384
|
/* top偏移的最大值 */
|
|
3385
3385
|
let maxTopOffset = getContainerWidthOrHeight(options.container).height -
|
|
3386
3386
|
popsDOMUtils.height(moveElement) +
|
|
3387
|
-
transformTop;
|
|
3387
|
+
transformInfo.transformTop;
|
|
3388
3388
|
if (currentMoveLeftOffset > maxLeftOffset) {
|
|
3389
3389
|
/* 不允许超过容器的最大宽度 */
|
|
3390
3390
|
currentMoveLeftOffset = maxLeftOffset;
|
|
@@ -3393,9 +3393,10 @@ var pops = (function () {
|
|
|
3393
3393
|
/* 不允许超过容器的最大高度 */
|
|
3394
3394
|
currentMoveTopOffset = maxTopOffset;
|
|
3395
3395
|
}
|
|
3396
|
-
if (currentMoveLeftOffset - options.extraDistance * 2 <
|
|
3396
|
+
if (currentMoveLeftOffset - options.extraDistance * 2 <
|
|
3397
|
+
minLeftOffset + transformInfo.transformLeft) {
|
|
3397
3398
|
/* 不允许left偏移小于容器最小值 */
|
|
3398
|
-
currentMoveLeftOffset = minLeftOffset + transformLeft;
|
|
3399
|
+
currentMoveLeftOffset = minLeftOffset + transformInfo.transformLeft;
|
|
3399
3400
|
/* 最左边 +额外距离 */
|
|
3400
3401
|
currentMoveLeftOffset += options.extraDistance;
|
|
3401
3402
|
}
|
|
@@ -3403,9 +3404,9 @@ var pops = (function () {
|
|
|
3403
3404
|
/* 最右边 -额外距离 */
|
|
3404
3405
|
currentMoveLeftOffset -= options.extraDistance;
|
|
3405
3406
|
}
|
|
3406
|
-
if (currentMoveTopOffset - options.extraDistance * 2 < minTopOffset + transformTop) {
|
|
3407
|
+
if (currentMoveTopOffset - options.extraDistance * 2 < minTopOffset + transformInfo.transformTop) {
|
|
3407
3408
|
/* 不允许top偏移小于容器最小值 */
|
|
3408
|
-
currentMoveTopOffset = minTopOffset + transformTop;
|
|
3409
|
+
currentMoveTopOffset = minTopOffset + transformInfo.transformTop;
|
|
3409
3410
|
/* 最上面 +额外距离 */
|
|
3410
3411
|
currentMoveTopOffset += options.extraDistance;
|
|
3411
3412
|
}
|
|
@@ -10296,7 +10297,7 @@ var pops = (function () {
|
|
|
10296
10297
|
childMenuTopOrBottomDistance: 0,
|
|
10297
10298
|
useShadowRoot: true,
|
|
10298
10299
|
className: "",
|
|
10299
|
-
isAnimation:
|
|
10300
|
+
isAnimation: false,
|
|
10300
10301
|
useScaleAnimation: true,
|
|
10301
10302
|
only: false,
|
|
10302
10303
|
zIndex: 10000,
|
|
@@ -10831,33 +10832,34 @@ var pops = (function () {
|
|
|
10831
10832
|
};
|
|
10832
10833
|
|
|
10833
10834
|
const searchSuggestionConfig = () => {
|
|
10835
|
+
const data = [];
|
|
10836
|
+
for (let index = 0; index < 10; index++) {
|
|
10837
|
+
data.push({
|
|
10838
|
+
value: `测试${index}`,
|
|
10839
|
+
text: `测试${index}-html`,
|
|
10840
|
+
});
|
|
10841
|
+
}
|
|
10834
10842
|
return {
|
|
10835
10843
|
// @ts-ignore
|
|
10836
10844
|
target: null,
|
|
10837
10845
|
// @ts-ignore
|
|
10838
10846
|
inputTarget: null,
|
|
10839
10847
|
selfDocument: document,
|
|
10840
|
-
data:
|
|
10841
|
-
{
|
|
10842
|
-
value: "数据1",
|
|
10843
|
-
text: "数据1-html",
|
|
10844
|
-
},
|
|
10845
|
-
{
|
|
10846
|
-
value: "数据2",
|
|
10847
|
-
text: "数据2-html",
|
|
10848
|
-
},
|
|
10849
|
-
],
|
|
10848
|
+
data: data,
|
|
10850
10849
|
deleteIcon: {
|
|
10851
10850
|
enable: true,
|
|
10852
|
-
callback(event, liElement,
|
|
10853
|
-
console.log("删除当前项", [event, liElement,
|
|
10851
|
+
callback(event, liElement, dataItem) {
|
|
10852
|
+
console.log("删除当前项", [event, liElement, dataItem]);
|
|
10853
|
+
data.splice(data.indexOf(dataItem), 1);
|
|
10854
10854
|
liElement.remove();
|
|
10855
10855
|
},
|
|
10856
10856
|
},
|
|
10857
10857
|
useShadowRoot: true,
|
|
10858
10858
|
className: "",
|
|
10859
10859
|
isAbsolute: true,
|
|
10860
|
-
isAnimation:
|
|
10860
|
+
isAnimation: false,
|
|
10861
|
+
useFoldAnimation: true,
|
|
10862
|
+
useArrow: false,
|
|
10861
10863
|
width: "250px",
|
|
10862
10864
|
maxHeight: "300px",
|
|
10863
10865
|
followTargetWidth: true,
|
|
@@ -10872,9 +10874,9 @@ var pops = (function () {
|
|
|
10872
10874
|
getItemHTML(item) {
|
|
10873
10875
|
return item.text ?? item;
|
|
10874
10876
|
},
|
|
10875
|
-
async getData(value) {
|
|
10877
|
+
async getData(value, data) {
|
|
10876
10878
|
console.log("当前输入框的值是：", value);
|
|
10877
|
-
return
|
|
10879
|
+
return data.filter((it) => it.value.includes(value));
|
|
10878
10880
|
},
|
|
10879
10881
|
itemClickCallBack(event, liElement, data) {
|
|
10880
10882
|
console.log("item项的点击回调", [event, liElement, data]);
|
|
@@ -10946,74 +10948,168 @@ var pops = (function () {
|
|
|
10946
10948
|
/** 是否结果为空 */
|
|
10947
10949
|
isEmpty: true,
|
|
10948
10950
|
},
|
|
10951
|
+
/** 初始化元素变量 */
|
|
10952
|
+
initEl() {
|
|
10953
|
+
this.$el.root = SearchSuggestion.createSearchSelectElement();
|
|
10954
|
+
this.$el.$dynamicCSS = this.$el.root.querySelector("style[data-dynamic]");
|
|
10955
|
+
this.$el.$hintULContainer = SearchSuggestion.$el.root.querySelector("ul");
|
|
10956
|
+
},
|
|
10949
10957
|
/**
|
|
10950
10958
|
* 初始化
|
|
10951
10959
|
*/
|
|
10952
10960
|
init(parentElement = document.body || document.documentElement) {
|
|
10953
10961
|
this.initEl();
|
|
10954
|
-
SearchSuggestion.update(
|
|
10955
|
-
SearchSuggestion.
|
|
10956
|
-
SearchSuggestion.changeHintULElementWidth();
|
|
10957
|
-
SearchSuggestion.changeHintULElementPosition();
|
|
10962
|
+
SearchSuggestion.update(this.getData());
|
|
10963
|
+
SearchSuggestion.updateStyleSheet();
|
|
10958
10964
|
SearchSuggestion.hide();
|
|
10959
|
-
if (config.isAnimation) {
|
|
10960
|
-
SearchSuggestion.$el.root.classList.add(`pops-${popsType}-animation`);
|
|
10961
|
-
}
|
|
10962
10965
|
$shadowRoot.appendChild(SearchSuggestion.$el.root);
|
|
10963
10966
|
parentElement.appendChild($shadowContainer);
|
|
10964
10967
|
},
|
|
10965
|
-
/**
|
|
10966
|
-
|
|
10967
|
-
|
|
10968
|
-
|
|
10969
|
-
|
|
10968
|
+
/**
|
|
10969
|
+
* 获取数据
|
|
10970
|
+
*/
|
|
10971
|
+
getData() {
|
|
10972
|
+
return typeof config.data === "function" ? config.data() : config.data;
|
|
10970
10973
|
},
|
|
10971
10974
|
/**
|
|
10972
10975
|
* 获取显示出搜索建议框的html
|
|
10973
10976
|
*/
|
|
10974
|
-
|
|
10975
|
-
let
|
|
10977
|
+
createSearchSelectElement() {
|
|
10978
|
+
let $el = popsDOMUtils.createElement("div", {
|
|
10976
10979
|
className: `pops pops-${popsType}-search-suggestion`,
|
|
10977
10980
|
innerHTML: /*html*/ `
|
|
10981
|
+
<style>
|
|
10982
|
+
.pops-${popsType}-animation{
|
|
10983
|
+
-moz-animation: searchSelectFalIn 0.5s 1 linear;
|
|
10984
|
+
-webkit-animation: searchSelectFalIn 0.5s 1 linear;
|
|
10985
|
+
-o-animation: searchSelectFalIn 0.5s 1 linear;
|
|
10986
|
+
-ms-animation: searchSelectFalIn 0.5s 1 linear;
|
|
10987
|
+
}
|
|
10988
|
+
</style>
|
|
10989
|
+
<style>
|
|
10990
|
+
.pops-${popsType}-search-suggestion-arrow{
|
|
10991
|
+
--suggestion-arrow-box-shadow-left-color: rgba(0, 0, 0, 0.24);
|
|
10992
|
+
--suggestion-arrow-box-shadow-right-color: rgba(0, 0, 0, 0.12);
|
|
10993
|
+
--suggestion-arrow--after-color: rgb(78, 78, 78);
|
|
10994
|
+
--suggestion-arrow--after-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));
|
|
10995
|
+
--suggestion-arrow--after-width: 10px;
|
|
10996
|
+
--suggestion-arrow--after-height: 10px;
|
|
10997
|
+
}
|
|
10998
|
+
.pops-${popsType}-search-suggestion-arrow{
|
|
10999
|
+
position: absolute;
|
|
11000
|
+
top: 100%;
|
|
11001
|
+
left: 50%;
|
|
11002
|
+
overflow: hidden;
|
|
11003
|
+
width: 100%;
|
|
11004
|
+
height: 12.5px;
|
|
11005
|
+
transform: translateX(-50%);
|
|
11006
|
+
}
|
|
11007
|
+
.pops-${popsType}-search-suggestion-arrow::after{
|
|
11008
|
+
position: absolute;
|
|
11009
|
+
top: 0;
|
|
11010
|
+
left: 50%;
|
|
11011
|
+
width: var(--suggestion-arrow--after-width);
|
|
11012
|
+
height: var(--suggestion-arrow--after-height);
|
|
11013
|
+
background: var(--suggestion-arrow--after-bg-color);
|
|
11014
|
+
color: var(--suggestion-arrow--after-color);
|
|
11015
|
+
box-shadow:
|
|
11016
|
+
0 1px 7px var(--suggestion-arrow-box-shadow-left-color),
|
|
11017
|
+
0 1px 7px var(--suggestion-arrow-box-shadow-right-color);
|
|
11018
|
+
content: "";
|
|
11019
|
+
transform: translateX(-50%) translateY(-50%) rotate(45deg);
|
|
11020
|
+
}
|
|
11021
|
+
.pops-${popsType}-search-suggestion[data-popper-placement^="top"] .pops-${popsType}-search-suggestion-arrow{
|
|
11022
|
+
position: absolute;
|
|
11023
|
+
top: 100%;
|
|
11024
|
+
left: 50%;
|
|
11025
|
+
overflow: hidden;
|
|
11026
|
+
width: 100%;
|
|
11027
|
+
height: 12.5px;
|
|
11028
|
+
transform: translateX(-50%);
|
|
11029
|
+
}
|
|
11030
|
+
.pops-${popsType}-search-suggestion[data-popper-placement^="top"] .pops-${popsType}-search-suggestion-arrow::after{
|
|
11031
|
+
position: absolute;
|
|
11032
|
+
top: 0;
|
|
11033
|
+
left: 50%;
|
|
11034
|
+
width: var(--suggestion-arrow--after-width);
|
|
11035
|
+
height: var(--suggestion-arrow--after-height);
|
|
11036
|
+
background: var(--suggestion-arrow--after-bg-color);
|
|
11037
|
+
box-shadow:
|
|
11038
|
+
0 1px 7px var(--suggestion-arrow-box-shadow-left-color),
|
|
11039
|
+
0 1px 7px var(--suggestion-arrow-box-shadow-right-color);
|
|
11040
|
+
content: "";
|
|
11041
|
+
transform: translateX(-50%) translateY(-50%) rotate(45deg);
|
|
11042
|
+
}
|
|
11043
|
+
.pops-${popsType}-search-suggestion[data-popper-placement^="bottom"] .pops-${popsType}-search-suggestion-arrow{
|
|
11044
|
+
top: -12.5px;
|
|
11045
|
+
left: 50%;
|
|
11046
|
+
transform: translateX(-50%);
|
|
11047
|
+
}
|
|
11048
|
+
.pops-${popsType}-search-suggestion[data-popper-placement^="bottom"] .pops-${popsType}-search-suggestion-arrow::after{
|
|
11049
|
+
position: absolute;
|
|
11050
|
+
top: 100%;
|
|
11051
|
+
left: 50%;
|
|
11052
|
+
content: "";
|
|
11053
|
+
}
|
|
11054
|
+
</style>
|
|
10978
11055
|
<style data-dynamic="true">
|
|
10979
11056
|
${this.getDynamicCSS()}
|
|
10980
11057
|
</style>
|
|
10981
|
-
<
|
|
11058
|
+
<style>
|
|
11059
|
+
.el-zoom-in-top-animation{
|
|
11060
|
+
--el-transition-md-fade: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
|
|
11061
|
+
opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
|
|
11062
|
+
transition: var(--el-transition-md-fade);
|
|
11063
|
+
transform-origin: center top;
|
|
11064
|
+
}
|
|
11065
|
+
.el-zoom-in-top-animation[data-popper-placement^="top"] {
|
|
11066
|
+
transform-origin: center bottom;
|
|
11067
|
+
}
|
|
11068
|
+
.el-zoom-in-top-animation-hide{
|
|
11069
|
+
opacity: 0;
|
|
11070
|
+
transform: scaleY(0);
|
|
11071
|
+
}
|
|
11072
|
+
.el-zoom-in-top-animation-show{
|
|
11073
|
+
opacity: 1;
|
|
11074
|
+
transform: scaleY(1);
|
|
11075
|
+
}
|
|
11076
|
+
</style>
|
|
11077
|
+
<ul class="pops-${popsType}-search-suggestion-hint ${PopsCommonCSSClassName.userSelectNone}">${config.toSearhNotResultHTML}</ul>
|
|
11078
|
+
${config.useArrow ? /*html*/ `<div class="pops-${popsType}-search-suggestion-arrow"></div>` : ""}
|
|
10982
11079
|
`,
|
|
10983
11080
|
}, {
|
|
10984
11081
|
"data-guid": guid,
|
|
10985
11082
|
"type-value": popsType,
|
|
10986
11083
|
});
|
|
10987
11084
|
if (config.className !== "" && config.className != null) {
|
|
10988
|
-
popsDOMUtils.addClassName(
|
|
11085
|
+
popsDOMUtils.addClassName($el, config.className);
|
|
11086
|
+
}
|
|
11087
|
+
if (config.isAnimation) {
|
|
11088
|
+
popsDOMUtils.addClassName($el, `pops-${popsType}-animation`);
|
|
11089
|
+
}
|
|
11090
|
+
if (config.useFoldAnimation) {
|
|
11091
|
+
popsDOMUtils.addClassName($el, "el-zoom-in-top-animation");
|
|
10989
11092
|
}
|
|
10990
|
-
return
|
|
11093
|
+
return $el;
|
|
10991
11094
|
},
|
|
10992
11095
|
/** 动态获取CSS */
|
|
10993
11096
|
getDynamicCSS() {
|
|
10994
11097
|
return /*css*/ `
|
|
10995
|
-
.pops-${popsType}-animation{
|
|
10996
|
-
-moz-animation: searchSelectFalIn 0.5s 1 linear;
|
|
10997
|
-
-webkit-animation: searchSelectFalIn 0.5s 1 linear;
|
|
10998
|
-
-o-animation: searchSelectFalIn 0.5s 1 linear;
|
|
10999
|
-
-ms-animation: searchSelectFalIn 0.5s 1 linear;
|
|
11000
|
-
}
|
|
11001
11098
|
.pops-${popsType}-search-suggestion{
|
|
11002
11099
|
--search-suggestion-bg-color: #ffffff;
|
|
11003
11100
|
--search-suggestion-box-shadow-color: rgb(0 0 0 / 20%);
|
|
11004
11101
|
--search-suggestion-item-color: #515a6e;
|
|
11005
11102
|
--search-suggestion-item-none-color: #8e8e8e;
|
|
11006
|
-
--search-suggestion-item-hover-bg-color:
|
|
11103
|
+
--search-suggestion-item-is-hover-bg-color: #f5f7fa;
|
|
11104
|
+
--search-suggestion-item-is-select-bg-color: #409eff;
|
|
11007
11105
|
}
|
|
11008
11106
|
.pops-${popsType}-search-suggestion{
|
|
11009
11107
|
border: initial;
|
|
11010
11108
|
overflow: initial;
|
|
11011
|
-
}
|
|
11012
|
-
ul.pops-${popsType}-search-suggestion-hint{
|
|
11013
11109
|
position: ${config.isAbsolute ? "absolute" : "fixed"};
|
|
11014
11110
|
z-index: ${PopsHandler.handleZIndex(config.zIndex)};
|
|
11015
|
-
|
|
11016
|
-
|
|
11111
|
+
}
|
|
11112
|
+
ul.pops-${popsType}-search-suggestion-hint{
|
|
11017
11113
|
max-height: ${config.maxHeight};
|
|
11018
11114
|
overflow-x: hidden;
|
|
11019
11115
|
overflow-y: auto;
|
|
@@ -11024,11 +11120,11 @@ var pops = (function () {
|
|
|
11024
11120
|
box-shadow: 0 1px 6px var(--search-suggestion-box-shadow-color);
|
|
11025
11121
|
}
|
|
11026
11122
|
/* 建议框在上面时 */
|
|
11027
|
-
|
|
11123
|
+
.pops-${popsType}-search-suggestion[data-top-reverse] ul.pops-${popsType}-search-suggestion-hint{
|
|
11028
11124
|
display: flex;
|
|
11029
11125
|
flex-direction: column-reverse;
|
|
11030
11126
|
}
|
|
11031
|
-
|
|
11127
|
+
.pops-${popsType}-search-suggestion[data-top-reverse] ul.pops-${popsType}-search-suggestion-hint li{
|
|
11032
11128
|
flex-shrink: 0;
|
|
11033
11129
|
}
|
|
11034
11130
|
ul.pops-${popsType}-search-suggestion-hint li{
|
|
@@ -11049,15 +11145,14 @@ var pops = (function () {
|
|
|
11049
11145
|
font-size: 12px;
|
|
11050
11146
|
color: var(--search-suggestion-item-none-color);
|
|
11051
11147
|
}
|
|
11052
|
-
ul.pops-${popsType}-search-suggestion-hint li:hover{
|
|
11053
|
-
background-color: var(--search-suggestion-item-hover-bg-color);
|
|
11148
|
+
ul.pops-${popsType}-search-suggestion-hint li:not([data-none]):hover{
|
|
11149
|
+
background-color: var(--search-suggestion-item-is-hover-bg-color);
|
|
11054
11150
|
}
|
|
11055
|
-
|
|
11056
11151
|
@media (prefers-color-scheme: dark){
|
|
11057
11152
|
.pops-${popsType}-search-suggestion{
|
|
11058
11153
|
--search-suggestion-bg-color: #1d1e1f;
|
|
11059
11154
|
--search-suggestion-item-color: #cfd3d4;
|
|
11060
|
-
--search-suggestion-item-hover-bg-color: rgba(175, 175, 175, .1);
|
|
11155
|
+
--search-suggestion-item-is-hover-bg-color: rgba(175, 175, 175, .1);
|
|
11061
11156
|
}
|
|
11062
11157
|
}
|
|
11063
11158
|
`;
|
|
@@ -11067,7 +11162,7 @@ var pops = (function () {
|
|
|
11067
11162
|
* @param data 当前项的值
|
|
11068
11163
|
* @param index 当前项的下标
|
|
11069
11164
|
*/
|
|
11070
|
-
|
|
11165
|
+
createSearchItemLiElement(data, index) {
|
|
11071
11166
|
let $li = popsDOMUtils.createElement("li", {
|
|
11072
11167
|
className: `pops-${popsType}-search-suggestion-hint-item`,
|
|
11073
11168
|
"data-index": index,
|
|
@@ -11087,25 +11182,28 @@ var pops = (function () {
|
|
|
11087
11182
|
},
|
|
11088
11183
|
/**
|
|
11089
11184
|
* 设置搜索建议框每一项的点击事件
|
|
11090
|
-
* @param
|
|
11185
|
+
* @param $searchItem
|
|
11091
11186
|
*/
|
|
11092
|
-
setSearchItemClickEvent(
|
|
11093
|
-
popsDOMUtils.on(
|
|
11187
|
+
setSearchItemClickEvent($searchItem) {
|
|
11188
|
+
popsDOMUtils.on($searchItem, "click", (event) => {
|
|
11094
11189
|
popsDOMUtils.preventEvent(event);
|
|
11095
11190
|
let $click = event.target;
|
|
11096
|
-
|
|
11097
|
-
|
|
11191
|
+
let dataValue = Reflect.get($searchItem, "data-value");
|
|
11192
|
+
let isDelete = Boolean($click.closest(`.pops-${popsType}-delete-icon`));
|
|
11193
|
+
if (isDelete) {
|
|
11194
|
+
// 删除
|
|
11098
11195
|
if (typeof config.deleteIcon.callback === "function") {
|
|
11099
|
-
config.deleteIcon.callback(event,
|
|
11196
|
+
config.deleteIcon.callback(event, $searchItem, dataValue);
|
|
11100
11197
|
}
|
|
11101
11198
|
if (!this.$el.$hintULContainer.children.length) {
|
|
11102
11199
|
/* 全删完了 */
|
|
11103
11200
|
this.clear();
|
|
11104
11201
|
}
|
|
11202
|
+
SearchSuggestion.updateStyleSheet();
|
|
11105
11203
|
}
|
|
11106
11204
|
else {
|
|
11107
|
-
|
|
11108
|
-
config.itemClickCallBack(event,
|
|
11205
|
+
// 点击选择项
|
|
11206
|
+
config.itemClickCallBack(event, $searchItem, dataValue);
|
|
11109
11207
|
}
|
|
11110
11208
|
}, {
|
|
11111
11209
|
capture: true,
|
|
@@ -11145,8 +11243,9 @@ var pops = (function () {
|
|
|
11145
11243
|
config.inputTarget.setAttribute("autocomplete", "off");
|
|
11146
11244
|
/* 内容改变事件 */
|
|
11147
11245
|
popsDOMUtils.on(config.inputTarget, "input", void 0, async (event) => {
|
|
11148
|
-
let getListResult = await config.getData(
|
|
11246
|
+
let getListResult = await config.getData(config.inputTarget.value, this.getData());
|
|
11149
11247
|
SearchSuggestion.update(getListResult);
|
|
11248
|
+
SearchSuggestion.updateStyleSheet();
|
|
11150
11249
|
}, option);
|
|
11151
11250
|
},
|
|
11152
11251
|
/**
|
|
@@ -11161,12 +11260,10 @@ var pops = (function () {
|
|
|
11161
11260
|
* 显示搜索建议框的事件
|
|
11162
11261
|
*/
|
|
11163
11262
|
showEvent() {
|
|
11164
|
-
SearchSuggestion.
|
|
11165
|
-
SearchSuggestion.changeHintULElementWidth();
|
|
11166
|
-
SearchSuggestion.changeHintULElementPosition();
|
|
11263
|
+
SearchSuggestion.updateStyleSheet();
|
|
11167
11264
|
if (config.toHideWithNotResult) {
|
|
11168
11265
|
if (SearchSuggestion.$data.isEmpty) {
|
|
11169
|
-
SearchSuggestion.hide();
|
|
11266
|
+
SearchSuggestion.hide(true);
|
|
11170
11267
|
}
|
|
11171
11268
|
else {
|
|
11172
11269
|
SearchSuggestion.show();
|
|
@@ -11225,7 +11322,7 @@ var pops = (function () {
|
|
|
11225
11322
|
/* 点击在目标input内 */
|
|
11226
11323
|
return;
|
|
11227
11324
|
}
|
|
11228
|
-
SearchSuggestion.hide();
|
|
11325
|
+
SearchSuggestion.hide(true);
|
|
11229
11326
|
}
|
|
11230
11327
|
},
|
|
11231
11328
|
/**
|
|
@@ -11350,29 +11447,39 @@ var pops = (function () {
|
|
|
11350
11447
|
else {
|
|
11351
11448
|
// 在下面
|
|
11352
11449
|
position = "bottom";
|
|
11353
|
-
SearchSuggestion.$el.$hintULContainer.removeAttribute("data-top");
|
|
11354
11450
|
}
|
|
11355
11451
|
}
|
|
11356
11452
|
if (position === "top") {
|
|
11453
|
+
// 在上面
|
|
11357
11454
|
if (config.positionTopToReverse) {
|
|
11358
|
-
|
|
11455
|
+
// 自动翻转
|
|
11456
|
+
SearchSuggestion.$el.root.setAttribute("data-top-reverse", "true");
|
|
11359
11457
|
}
|
|
11360
|
-
|
|
11361
|
-
|
|
11362
|
-
|
|
11363
|
-
|
|
11458
|
+
if (config.useFoldAnimation) {
|
|
11459
|
+
// 翻转折叠
|
|
11460
|
+
SearchSuggestion.$el.root.setAttribute("data-popper-placement", "top");
|
|
11461
|
+
}
|
|
11462
|
+
let bottom = documentHeight - targetRect.top + config.topDistance;
|
|
11463
|
+
SearchSuggestion.$el.root.style.top = "";
|
|
11464
|
+
SearchSuggestion.$el.root.style.bottom = bottom + "px";
|
|
11364
11465
|
}
|
|
11365
11466
|
else if (position === "bottom") {
|
|
11366
11467
|
// 在下面
|
|
11367
|
-
|
|
11368
|
-
|
|
11369
|
-
|
|
11370
|
-
|
|
11468
|
+
if (config.useFoldAnimation) {
|
|
11469
|
+
SearchSuggestion.$el.root.setAttribute("data-popper-placement", "bottom-center");
|
|
11470
|
+
}
|
|
11471
|
+
let top = targetRect.height + targetRect.top + config.topDistance;
|
|
11472
|
+
SearchSuggestion.$el.root.removeAttribute("data-top-reverse");
|
|
11473
|
+
SearchSuggestion.$el.root.style.bottom = "";
|
|
11474
|
+
SearchSuggestion.$el.root.style.top = top + "px";
|
|
11371
11475
|
}
|
|
11476
|
+
let left = targetRect.left;
|
|
11372
11477
|
let hintUIWidth = popsDOMUtils.width(SearchSuggestion.$el.$hintULContainer);
|
|
11373
|
-
|
|
11374
|
-
|
|
11375
|
-
|
|
11478
|
+
if (hintUIWidth > documentWidth) {
|
|
11479
|
+
// 超出宽度
|
|
11480
|
+
left = left + documentWidth - hintUIWidth;
|
|
11481
|
+
}
|
|
11482
|
+
SearchSuggestion.$el.root.style.left = left + "px";
|
|
11376
11483
|
},
|
|
11377
11484
|
/**
|
|
11378
11485
|
* 更新搜索建议框的width
|
|
@@ -11394,6 +11501,17 @@ var pops = (function () {
|
|
|
11394
11501
|
let cssText = this.getDynamicCSS();
|
|
11395
11502
|
PopsSafeUtils.setSafeHTML(this.$el.$dynamicCSS, cssText);
|
|
11396
11503
|
},
|
|
11504
|
+
/**
|
|
11505
|
+
* 数据项的数量改变时调用
|
|
11506
|
+
*/
|
|
11507
|
+
updateStyleSheet() {
|
|
11508
|
+
// 更新z-index
|
|
11509
|
+
SearchSuggestion.updateDynamicCSS();
|
|
11510
|
+
// 更新宽度
|
|
11511
|
+
SearchSuggestion.changeHintULElementWidth();
|
|
11512
|
+
// 更新位置
|
|
11513
|
+
SearchSuggestion.changeHintULElementPosition();
|
|
11514
|
+
},
|
|
11397
11515
|
/**
|
|
11398
11516
|
* 更新页面显示的搜索结果
|
|
11399
11517
|
* @param data
|
|
@@ -11412,7 +11530,7 @@ var pops = (function () {
|
|
|
11412
11530
|
SearchSuggestion.clearAllSearchItemLi();
|
|
11413
11531
|
/* 添加进ul中 */
|
|
11414
11532
|
config.data.forEach((item, index) => {
|
|
11415
|
-
let itemElement = SearchSuggestion.
|
|
11533
|
+
let itemElement = SearchSuggestion.createSearchItemLiElement(item, index);
|
|
11416
11534
|
SearchSuggestion.setSearchItemClickEvent(itemElement);
|
|
11417
11535
|
SearchSuggestion.setSearchItemSelectEvent(itemElement);
|
|
11418
11536
|
SearchSuggestion.$el.$hintULContainer.appendChild(itemElement);
|
|
@@ -11436,15 +11554,32 @@ var pops = (function () {
|
|
|
11436
11554
|
},
|
|
11437
11555
|
/**
|
|
11438
11556
|
* 隐藏搜索建议框
|
|
11557
|
+
* @param useAnimationToHide 是否使用动画隐藏
|
|
11439
11558
|
*/
|
|
11440
|
-
hide() {
|
|
11441
|
-
|
|
11559
|
+
hide(useAnimationToHide = false) {
|
|
11560
|
+
if (config.useFoldAnimation) {
|
|
11561
|
+
if (!useAnimationToHide) {
|
|
11562
|
+
// 去掉动画
|
|
11563
|
+
popsDOMUtils.removeClassName(this.$el.root, "el-zoom-in-top-animation");
|
|
11564
|
+
}
|
|
11565
|
+
popsDOMUtils.addClassName(this.$el.root, "el-zoom-in-top-animation");
|
|
11566
|
+
popsDOMUtils.addClassName(this.$el.root, "el-zoom-in-top-animation-hide");
|
|
11567
|
+
popsDOMUtils.removeClassName(this.$el.root, "el-zoom-in-top-animation-show");
|
|
11568
|
+
}
|
|
11569
|
+
else {
|
|
11570
|
+
this.$el.root.style.display = "none";
|
|
11571
|
+
}
|
|
11442
11572
|
},
|
|
11443
11573
|
/**
|
|
11444
11574
|
* 显示搜索建议框
|
|
11445
11575
|
*/
|
|
11446
11576
|
show() {
|
|
11447
11577
|
this.$el.root.style.display = "";
|
|
11578
|
+
if (config.useFoldAnimation) {
|
|
11579
|
+
popsDOMUtils.addClassName(this.$el.root, "el-zoom-in-top-animation");
|
|
11580
|
+
popsDOMUtils.removeClassName(this.$el.root, "el-zoom-in-top-animation-hide");
|
|
11581
|
+
popsDOMUtils.addClassName(this.$el.root, "el-zoom-in-top-animation-show");
|
|
11582
|
+
}
|
|
11448
11583
|
},
|
|
11449
11584
|
};
|
|
11450
11585
|
return SearchSuggestion;
|