@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.cjs.js
CHANGED
|
@@ -1815,11 +1815,11 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
|
|
|
1815
1815
|
}
|
|
1816
1816
|
/**
|
|
1817
1817
|
* 添加className
|
|
1818
|
-
* @param
|
|
1818
|
+
* @param $el 目标元素
|
|
1819
1819
|
* @param className className属性
|
|
1820
1820
|
*/
|
|
1821
|
-
addClassName(
|
|
1822
|
-
if (
|
|
1821
|
+
addClassName($el, className) {
|
|
1822
|
+
if ($el == null) {
|
|
1823
1823
|
return;
|
|
1824
1824
|
}
|
|
1825
1825
|
if (typeof className !== "string") {
|
|
@@ -1828,15 +1828,16 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
|
|
|
1828
1828
|
if (className.trim() === "") {
|
|
1829
1829
|
return;
|
|
1830
1830
|
}
|
|
1831
|
-
|
|
1831
|
+
const classNameList = className.split(" ").filter((item) => item.trim() !== "");
|
|
1832
|
+
$el.classList.add(...classNameList);
|
|
1832
1833
|
}
|
|
1833
1834
|
/**
|
|
1834
1835
|
* 删除className
|
|
1835
|
-
* @param
|
|
1836
|
+
* @param $el 目标元素
|
|
1836
1837
|
* @param className className属性
|
|
1837
1838
|
*/
|
|
1838
|
-
removeClassName(
|
|
1839
|
-
if (
|
|
1839
|
+
removeClassName($el, className) {
|
|
1840
|
+
if ($el == null) {
|
|
1840
1841
|
return;
|
|
1841
1842
|
}
|
|
1842
1843
|
if (typeof className !== "string") {
|
|
@@ -1845,15 +1846,16 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
|
|
|
1845
1846
|
if (className.trim() === "") {
|
|
1846
1847
|
return;
|
|
1847
1848
|
}
|
|
1848
|
-
|
|
1849
|
+
const classNameList = className.split(" ").filter((item) => item.trim() !== "");
|
|
1850
|
+
$el.classList.remove(...classNameList);
|
|
1849
1851
|
}
|
|
1850
1852
|
/**
|
|
1851
1853
|
* 判断元素是否包含某个className
|
|
1852
|
-
* @param
|
|
1854
|
+
* @param $el 目标元素
|
|
1853
1855
|
* @param className className属性
|
|
1854
1856
|
*/
|
|
1855
|
-
containsClassName(
|
|
1856
|
-
if (
|
|
1857
|
+
containsClassName($el, className) {
|
|
1858
|
+
if ($el == null) {
|
|
1857
1859
|
return false;
|
|
1858
1860
|
}
|
|
1859
1861
|
if (typeof className !== "string") {
|
|
@@ -1862,7 +1864,7 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
|
|
|
1862
1864
|
if (className.trim() === "") {
|
|
1863
1865
|
return false;
|
|
1864
1866
|
}
|
|
1865
|
-
return
|
|
1867
|
+
return $el.classList.contains(className);
|
|
1866
1868
|
}
|
|
1867
1869
|
css(element, property, value) {
|
|
1868
1870
|
/**
|
|
@@ -2485,6 +2487,24 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
|
|
|
2485
2487
|
}
|
|
2486
2488
|
return useChangeColor();
|
|
2487
2489
|
}
|
|
2490
|
+
/**
|
|
2491
|
+
* 获取移动元素的transform偏移
|
|
2492
|
+
* @param element 元素
|
|
2493
|
+
*/
|
|
2494
|
+
getTransform(element) {
|
|
2495
|
+
let transform_left = 0;
|
|
2496
|
+
let transform_top = 0;
|
|
2497
|
+
let elementTransform = PopsCore.globalThis.getComputedStyle(element).transform;
|
|
2498
|
+
if (elementTransform !== "none" && elementTransform != null && elementTransform !== "") {
|
|
2499
|
+
let elementTransformSplit = elementTransform.match(/\((.+)\)/)?.[1].split(",");
|
|
2500
|
+
transform_left = Math.abs(parseInt(elementTransformSplit[4]));
|
|
2501
|
+
transform_top = Math.abs(parseInt(elementTransformSplit[5]));
|
|
2502
|
+
}
|
|
2503
|
+
return {
|
|
2504
|
+
transformLeft: transform_left,
|
|
2505
|
+
transformTop: transform_top,
|
|
2506
|
+
};
|
|
2507
|
+
}
|
|
2488
2508
|
}
|
|
2489
2509
|
const popsDOMUtils = new PopsDOMUtils();
|
|
2490
2510
|
|
|
@@ -2756,7 +2776,7 @@ var ninePalaceGridPositionCSS = ".pops[position=\"top_left\"] {\n\tposition: fix
|
|
|
2756
2776
|
|
|
2757
2777
|
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";
|
|
2758
2778
|
|
|
2759
|
-
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";
|
|
2779
|
+
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";
|
|
2760
2780
|
|
|
2761
2781
|
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";
|
|
2762
2782
|
|
|
@@ -3284,23 +3304,6 @@ const PopsInstanceUtils = {
|
|
|
3284
3304
|
popsDOMUtils.css(options.dragElement, {
|
|
3285
3305
|
cursor: "move",
|
|
3286
3306
|
});
|
|
3287
|
-
/**
|
|
3288
|
-
* 获取移动元素的transform偏移
|
|
3289
|
-
*/
|
|
3290
|
-
function getTransform(element) {
|
|
3291
|
-
let transform_left = 0;
|
|
3292
|
-
let transform_top = 0;
|
|
3293
|
-
let elementTransform = PopsCore.globalThis.getComputedStyle(element).transform;
|
|
3294
|
-
if (elementTransform !== "none" && elementTransform != null && elementTransform !== "") {
|
|
3295
|
-
let elementTransformSplit = elementTransform.match(/\((.+)\)/)?.[1].split(",");
|
|
3296
|
-
transform_left = Math.abs(parseInt(elementTransformSplit[4]));
|
|
3297
|
-
transform_top = Math.abs(parseInt(elementTransformSplit[5]));
|
|
3298
|
-
}
|
|
3299
|
-
return {
|
|
3300
|
-
transformLeft: transform_left,
|
|
3301
|
-
transformTop: transform_top,
|
|
3302
|
-
};
|
|
3303
|
-
}
|
|
3304
3307
|
/**
|
|
3305
3308
|
* 修改移动的元素的style
|
|
3306
3309
|
*/
|
|
@@ -3342,9 +3345,8 @@ const PopsInstanceUtils = {
|
|
|
3342
3345
|
};
|
|
3343
3346
|
}
|
|
3344
3347
|
}
|
|
3345
|
-
|
|
3346
|
-
let
|
|
3347
|
-
let transformTop = transformInfo.transformTop;
|
|
3348
|
+
// 获取transform偏移
|
|
3349
|
+
let transformInfo = popsDOMUtils.getTransform(moveElement);
|
|
3348
3350
|
let resumeMoveElementStyle = null;
|
|
3349
3351
|
anyTouchElement.on("pan", function (event) {
|
|
3350
3352
|
if (!isMove) {
|
|
@@ -3352,9 +3354,7 @@ const PopsInstanceUtils = {
|
|
|
3352
3354
|
let rect = options.dragElement.getBoundingClientRect();
|
|
3353
3355
|
clickElementLeftOffset = event.x - rect.left;
|
|
3354
3356
|
clickElementTopOffset = event.y - rect.top;
|
|
3355
|
-
transformInfo = getTransform(moveElement);
|
|
3356
|
-
transformLeft = transformInfo.transformLeft;
|
|
3357
|
-
transformTop = transformInfo.transformTop;
|
|
3357
|
+
transformInfo = popsDOMUtils.getTransform(moveElement);
|
|
3358
3358
|
//if (event.nativeEvent.offsetX) {
|
|
3359
3359
|
// clickElementLeftOffset = parseInt(event.nativeEvent.offsetX);
|
|
3360
3360
|
//} else {
|
|
@@ -3368,9 +3368,9 @@ const PopsInstanceUtils = {
|
|
|
3368
3368
|
resumeMoveElementStyle = changeMoveElementStyle(moveElement);
|
|
3369
3369
|
}
|
|
3370
3370
|
/** 当前移动的left偏移 */
|
|
3371
|
-
let currentMoveLeftOffset = event.x - clickElementLeftOffset + transformLeft;
|
|
3371
|
+
let currentMoveLeftOffset = event.x - clickElementLeftOffset + transformInfo.transformLeft;
|
|
3372
3372
|
/** 当前移动的top偏移 */
|
|
3373
|
-
let currentMoveTopOffset = event.y - clickElementTopOffset + transformTop;
|
|
3373
|
+
let currentMoveTopOffset = event.y - clickElementTopOffset + transformInfo.transformTop;
|
|
3374
3374
|
/* 拖拽移动 */
|
|
3375
3375
|
if (event.phase === "move") {
|
|
3376
3376
|
if (options.limit) {
|
|
@@ -3378,12 +3378,12 @@ const PopsInstanceUtils = {
|
|
|
3378
3378
|
/* left偏移最大值 */
|
|
3379
3379
|
let maxLeftOffset = getContainerWidthOrHeight(options.container).width -
|
|
3380
3380
|
popsDOMUtils.width(moveElement) +
|
|
3381
|
-
transformLeft;
|
|
3381
|
+
transformInfo.transformLeft;
|
|
3382
3382
|
let { left: minLeftOffset, top: minTopOffset } = getContainerTopOrLeft(options.container);
|
|
3383
3383
|
/* top偏移的最大值 */
|
|
3384
3384
|
let maxTopOffset = getContainerWidthOrHeight(options.container).height -
|
|
3385
3385
|
popsDOMUtils.height(moveElement) +
|
|
3386
|
-
transformTop;
|
|
3386
|
+
transformInfo.transformTop;
|
|
3387
3387
|
if (currentMoveLeftOffset > maxLeftOffset) {
|
|
3388
3388
|
/* 不允许超过容器的最大宽度 */
|
|
3389
3389
|
currentMoveLeftOffset = maxLeftOffset;
|
|
@@ -3392,9 +3392,10 @@ const PopsInstanceUtils = {
|
|
|
3392
3392
|
/* 不允许超过容器的最大高度 */
|
|
3393
3393
|
currentMoveTopOffset = maxTopOffset;
|
|
3394
3394
|
}
|
|
3395
|
-
if (currentMoveLeftOffset - options.extraDistance * 2 <
|
|
3395
|
+
if (currentMoveLeftOffset - options.extraDistance * 2 <
|
|
3396
|
+
minLeftOffset + transformInfo.transformLeft) {
|
|
3396
3397
|
/* 不允许left偏移小于容器最小值 */
|
|
3397
|
-
currentMoveLeftOffset = minLeftOffset + transformLeft;
|
|
3398
|
+
currentMoveLeftOffset = minLeftOffset + transformInfo.transformLeft;
|
|
3398
3399
|
/* 最左边 +额外距离 */
|
|
3399
3400
|
currentMoveLeftOffset += options.extraDistance;
|
|
3400
3401
|
}
|
|
@@ -3402,9 +3403,9 @@ const PopsInstanceUtils = {
|
|
|
3402
3403
|
/* 最右边 -额外距离 */
|
|
3403
3404
|
currentMoveLeftOffset -= options.extraDistance;
|
|
3404
3405
|
}
|
|
3405
|
-
if (currentMoveTopOffset - options.extraDistance * 2 < minTopOffset + transformTop) {
|
|
3406
|
+
if (currentMoveTopOffset - options.extraDistance * 2 < minTopOffset + transformInfo.transformTop) {
|
|
3406
3407
|
/* 不允许top偏移小于容器最小值 */
|
|
3407
|
-
currentMoveTopOffset = minTopOffset + transformTop;
|
|
3408
|
+
currentMoveTopOffset = minTopOffset + transformInfo.transformTop;
|
|
3408
3409
|
/* 最上面 +额外距离 */
|
|
3409
3410
|
currentMoveTopOffset += options.extraDistance;
|
|
3410
3411
|
}
|
|
@@ -10295,7 +10296,7 @@ const rightClickMenuConfig = () => {
|
|
|
10295
10296
|
childMenuTopOrBottomDistance: 0,
|
|
10296
10297
|
useShadowRoot: true,
|
|
10297
10298
|
className: "",
|
|
10298
|
-
isAnimation:
|
|
10299
|
+
isAnimation: false,
|
|
10299
10300
|
useScaleAnimation: true,
|
|
10300
10301
|
only: false,
|
|
10301
10302
|
zIndex: 10000,
|
|
@@ -10830,33 +10831,34 @@ const PopsRightClickMenu = {
|
|
|
10830
10831
|
};
|
|
10831
10832
|
|
|
10832
10833
|
const searchSuggestionConfig = () => {
|
|
10834
|
+
const data = [];
|
|
10835
|
+
for (let index = 0; index < 10; index++) {
|
|
10836
|
+
data.push({
|
|
10837
|
+
value: `测试${index}`,
|
|
10838
|
+
text: `测试${index}-html`,
|
|
10839
|
+
});
|
|
10840
|
+
}
|
|
10833
10841
|
return {
|
|
10834
10842
|
// @ts-ignore
|
|
10835
10843
|
target: null,
|
|
10836
10844
|
// @ts-ignore
|
|
10837
10845
|
inputTarget: null,
|
|
10838
10846
|
selfDocument: document,
|
|
10839
|
-
data:
|
|
10840
|
-
{
|
|
10841
|
-
value: "数据1",
|
|
10842
|
-
text: "数据1-html",
|
|
10843
|
-
},
|
|
10844
|
-
{
|
|
10845
|
-
value: "数据2",
|
|
10846
|
-
text: "数据2-html",
|
|
10847
|
-
},
|
|
10848
|
-
],
|
|
10847
|
+
data: data,
|
|
10849
10848
|
deleteIcon: {
|
|
10850
10849
|
enable: true,
|
|
10851
|
-
callback(event, liElement,
|
|
10852
|
-
console.log("删除当前项", [event, liElement,
|
|
10850
|
+
callback(event, liElement, dataItem) {
|
|
10851
|
+
console.log("删除当前项", [event, liElement, dataItem]);
|
|
10852
|
+
data.splice(data.indexOf(dataItem), 1);
|
|
10853
10853
|
liElement.remove();
|
|
10854
10854
|
},
|
|
10855
10855
|
},
|
|
10856
10856
|
useShadowRoot: true,
|
|
10857
10857
|
className: "",
|
|
10858
10858
|
isAbsolute: true,
|
|
10859
|
-
isAnimation:
|
|
10859
|
+
isAnimation: false,
|
|
10860
|
+
useFoldAnimation: true,
|
|
10861
|
+
useArrow: false,
|
|
10860
10862
|
width: "250px",
|
|
10861
10863
|
maxHeight: "300px",
|
|
10862
10864
|
followTargetWidth: true,
|
|
@@ -10871,9 +10873,9 @@ const searchSuggestionConfig = () => {
|
|
|
10871
10873
|
getItemHTML(item) {
|
|
10872
10874
|
return item.text ?? item;
|
|
10873
10875
|
},
|
|
10874
|
-
async getData(value) {
|
|
10876
|
+
async getData(value, data) {
|
|
10875
10877
|
console.log("当前输入框的值是：", value);
|
|
10876
|
-
return
|
|
10878
|
+
return data.filter((it) => it.value.includes(value));
|
|
10877
10879
|
},
|
|
10878
10880
|
itemClickCallBack(event, liElement, data) {
|
|
10879
10881
|
console.log("item项的点击回调", [event, liElement, data]);
|
|
@@ -10945,74 +10947,168 @@ const PopsSearchSuggestion = {
|
|
|
10945
10947
|
/** 是否结果为空 */
|
|
10946
10948
|
isEmpty: true,
|
|
10947
10949
|
},
|
|
10950
|
+
/** 初始化元素变量 */
|
|
10951
|
+
initEl() {
|
|
10952
|
+
this.$el.root = SearchSuggestion.createSearchSelectElement();
|
|
10953
|
+
this.$el.$dynamicCSS = this.$el.root.querySelector("style[data-dynamic]");
|
|
10954
|
+
this.$el.$hintULContainer = SearchSuggestion.$el.root.querySelector("ul");
|
|
10955
|
+
},
|
|
10948
10956
|
/**
|
|
10949
10957
|
* 初始化
|
|
10950
10958
|
*/
|
|
10951
10959
|
init(parentElement = document.body || document.documentElement) {
|
|
10952
10960
|
this.initEl();
|
|
10953
|
-
SearchSuggestion.update(
|
|
10954
|
-
SearchSuggestion.
|
|
10955
|
-
SearchSuggestion.changeHintULElementWidth();
|
|
10956
|
-
SearchSuggestion.changeHintULElementPosition();
|
|
10961
|
+
SearchSuggestion.update(this.getData());
|
|
10962
|
+
SearchSuggestion.updateStyleSheet();
|
|
10957
10963
|
SearchSuggestion.hide();
|
|
10958
|
-
if (config.isAnimation) {
|
|
10959
|
-
SearchSuggestion.$el.root.classList.add(`pops-${popsType}-animation`);
|
|
10960
|
-
}
|
|
10961
10964
|
$shadowRoot.appendChild(SearchSuggestion.$el.root);
|
|
10962
10965
|
parentElement.appendChild($shadowContainer);
|
|
10963
10966
|
},
|
|
10964
|
-
/**
|
|
10965
|
-
|
|
10966
|
-
|
|
10967
|
-
|
|
10968
|
-
|
|
10967
|
+
/**
|
|
10968
|
+
* 获取数据
|
|
10969
|
+
*/
|
|
10970
|
+
getData() {
|
|
10971
|
+
return typeof config.data === "function" ? config.data() : config.data;
|
|
10969
10972
|
},
|
|
10970
10973
|
/**
|
|
10971
10974
|
* 获取显示出搜索建议框的html
|
|
10972
10975
|
*/
|
|
10973
|
-
|
|
10974
|
-
let
|
|
10976
|
+
createSearchSelectElement() {
|
|
10977
|
+
let $el = popsDOMUtils.createElement("div", {
|
|
10975
10978
|
className: `pops pops-${popsType}-search-suggestion`,
|
|
10976
10979
|
innerHTML: /*html*/ `
|
|
10980
|
+
<style>
|
|
10981
|
+
.pops-${popsType}-animation{
|
|
10982
|
+
-moz-animation: searchSelectFalIn 0.5s 1 linear;
|
|
10983
|
+
-webkit-animation: searchSelectFalIn 0.5s 1 linear;
|
|
10984
|
+
-o-animation: searchSelectFalIn 0.5s 1 linear;
|
|
10985
|
+
-ms-animation: searchSelectFalIn 0.5s 1 linear;
|
|
10986
|
+
}
|
|
10987
|
+
</style>
|
|
10988
|
+
<style>
|
|
10989
|
+
.pops-${popsType}-search-suggestion-arrow{
|
|
10990
|
+
--suggestion-arrow-box-shadow-left-color: rgba(0, 0, 0, 0.24);
|
|
10991
|
+
--suggestion-arrow-box-shadow-right-color: rgba(0, 0, 0, 0.12);
|
|
10992
|
+
--suggestion-arrow--after-color: rgb(78, 78, 78);
|
|
10993
|
+
--suggestion-arrow--after-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));
|
|
10994
|
+
--suggestion-arrow--after-width: 10px;
|
|
10995
|
+
--suggestion-arrow--after-height: 10px;
|
|
10996
|
+
}
|
|
10997
|
+
.pops-${popsType}-search-suggestion-arrow{
|
|
10998
|
+
position: absolute;
|
|
10999
|
+
top: 100%;
|
|
11000
|
+
left: 50%;
|
|
11001
|
+
overflow: hidden;
|
|
11002
|
+
width: 100%;
|
|
11003
|
+
height: 12.5px;
|
|
11004
|
+
transform: translateX(-50%);
|
|
11005
|
+
}
|
|
11006
|
+
.pops-${popsType}-search-suggestion-arrow::after{
|
|
11007
|
+
position: absolute;
|
|
11008
|
+
top: 0;
|
|
11009
|
+
left: 50%;
|
|
11010
|
+
width: var(--suggestion-arrow--after-width);
|
|
11011
|
+
height: var(--suggestion-arrow--after-height);
|
|
11012
|
+
background: var(--suggestion-arrow--after-bg-color);
|
|
11013
|
+
color: var(--suggestion-arrow--after-color);
|
|
11014
|
+
box-shadow:
|
|
11015
|
+
0 1px 7px var(--suggestion-arrow-box-shadow-left-color),
|
|
11016
|
+
0 1px 7px var(--suggestion-arrow-box-shadow-right-color);
|
|
11017
|
+
content: "";
|
|
11018
|
+
transform: translateX(-50%) translateY(-50%) rotate(45deg);
|
|
11019
|
+
}
|
|
11020
|
+
.pops-${popsType}-search-suggestion[data-popper-placement^="top"] .pops-${popsType}-search-suggestion-arrow{
|
|
11021
|
+
position: absolute;
|
|
11022
|
+
top: 100%;
|
|
11023
|
+
left: 50%;
|
|
11024
|
+
overflow: hidden;
|
|
11025
|
+
width: 100%;
|
|
11026
|
+
height: 12.5px;
|
|
11027
|
+
transform: translateX(-50%);
|
|
11028
|
+
}
|
|
11029
|
+
.pops-${popsType}-search-suggestion[data-popper-placement^="top"] .pops-${popsType}-search-suggestion-arrow::after{
|
|
11030
|
+
position: absolute;
|
|
11031
|
+
top: 0;
|
|
11032
|
+
left: 50%;
|
|
11033
|
+
width: var(--suggestion-arrow--after-width);
|
|
11034
|
+
height: var(--suggestion-arrow--after-height);
|
|
11035
|
+
background: var(--suggestion-arrow--after-bg-color);
|
|
11036
|
+
box-shadow:
|
|
11037
|
+
0 1px 7px var(--suggestion-arrow-box-shadow-left-color),
|
|
11038
|
+
0 1px 7px var(--suggestion-arrow-box-shadow-right-color);
|
|
11039
|
+
content: "";
|
|
11040
|
+
transform: translateX(-50%) translateY(-50%) rotate(45deg);
|
|
11041
|
+
}
|
|
11042
|
+
.pops-${popsType}-search-suggestion[data-popper-placement^="bottom"] .pops-${popsType}-search-suggestion-arrow{
|
|
11043
|
+
top: -12.5px;
|
|
11044
|
+
left: 50%;
|
|
11045
|
+
transform: translateX(-50%);
|
|
11046
|
+
}
|
|
11047
|
+
.pops-${popsType}-search-suggestion[data-popper-placement^="bottom"] .pops-${popsType}-search-suggestion-arrow::after{
|
|
11048
|
+
position: absolute;
|
|
11049
|
+
top: 100%;
|
|
11050
|
+
left: 50%;
|
|
11051
|
+
content: "";
|
|
11052
|
+
}
|
|
11053
|
+
</style>
|
|
10977
11054
|
<style data-dynamic="true">
|
|
10978
11055
|
${this.getDynamicCSS()}
|
|
10979
11056
|
</style>
|
|
10980
|
-
<
|
|
11057
|
+
<style>
|
|
11058
|
+
.el-zoom-in-top-animation{
|
|
11059
|
+
--el-transition-md-fade: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
|
|
11060
|
+
opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
|
|
11061
|
+
transition: var(--el-transition-md-fade);
|
|
11062
|
+
transform-origin: center top;
|
|
11063
|
+
}
|
|
11064
|
+
.el-zoom-in-top-animation[data-popper-placement^="top"] {
|
|
11065
|
+
transform-origin: center bottom;
|
|
11066
|
+
}
|
|
11067
|
+
.el-zoom-in-top-animation-hide{
|
|
11068
|
+
opacity: 0;
|
|
11069
|
+
transform: scaleY(0);
|
|
11070
|
+
}
|
|
11071
|
+
.el-zoom-in-top-animation-show{
|
|
11072
|
+
opacity: 1;
|
|
11073
|
+
transform: scaleY(1);
|
|
11074
|
+
}
|
|
11075
|
+
</style>
|
|
11076
|
+
<ul class="pops-${popsType}-search-suggestion-hint ${PopsCommonCSSClassName.userSelectNone}">${config.toSearhNotResultHTML}</ul>
|
|
11077
|
+
${config.useArrow ? /*html*/ `<div class="pops-${popsType}-search-suggestion-arrow"></div>` : ""}
|
|
10981
11078
|
`,
|
|
10982
11079
|
}, {
|
|
10983
11080
|
"data-guid": guid,
|
|
10984
11081
|
"type-value": popsType,
|
|
10985
11082
|
});
|
|
10986
11083
|
if (config.className !== "" && config.className != null) {
|
|
10987
|
-
popsDOMUtils.addClassName(
|
|
11084
|
+
popsDOMUtils.addClassName($el, config.className);
|
|
11085
|
+
}
|
|
11086
|
+
if (config.isAnimation) {
|
|
11087
|
+
popsDOMUtils.addClassName($el, `pops-${popsType}-animation`);
|
|
11088
|
+
}
|
|
11089
|
+
if (config.useFoldAnimation) {
|
|
11090
|
+
popsDOMUtils.addClassName($el, "el-zoom-in-top-animation");
|
|
10988
11091
|
}
|
|
10989
|
-
return
|
|
11092
|
+
return $el;
|
|
10990
11093
|
},
|
|
10991
11094
|
/** 动态获取CSS */
|
|
10992
11095
|
getDynamicCSS() {
|
|
10993
11096
|
return /*css*/ `
|
|
10994
|
-
.pops-${popsType}-animation{
|
|
10995
|
-
-moz-animation: searchSelectFalIn 0.5s 1 linear;
|
|
10996
|
-
-webkit-animation: searchSelectFalIn 0.5s 1 linear;
|
|
10997
|
-
-o-animation: searchSelectFalIn 0.5s 1 linear;
|
|
10998
|
-
-ms-animation: searchSelectFalIn 0.5s 1 linear;
|
|
10999
|
-
}
|
|
11000
11097
|
.pops-${popsType}-search-suggestion{
|
|
11001
11098
|
--search-suggestion-bg-color: #ffffff;
|
|
11002
11099
|
--search-suggestion-box-shadow-color: rgb(0 0 0 / 20%);
|
|
11003
11100
|
--search-suggestion-item-color: #515a6e;
|
|
11004
11101
|
--search-suggestion-item-none-color: #8e8e8e;
|
|
11005
|
-
--search-suggestion-item-hover-bg-color:
|
|
11102
|
+
--search-suggestion-item-is-hover-bg-color: #f5f7fa;
|
|
11103
|
+
--search-suggestion-item-is-select-bg-color: #409eff;
|
|
11006
11104
|
}
|
|
11007
11105
|
.pops-${popsType}-search-suggestion{
|
|
11008
11106
|
border: initial;
|
|
11009
11107
|
overflow: initial;
|
|
11010
|
-
}
|
|
11011
|
-
ul.pops-${popsType}-search-suggestion-hint{
|
|
11012
11108
|
position: ${config.isAbsolute ? "absolute" : "fixed"};
|
|
11013
11109
|
z-index: ${PopsHandler.handleZIndex(config.zIndex)};
|
|
11014
|
-
|
|
11015
|
-
|
|
11110
|
+
}
|
|
11111
|
+
ul.pops-${popsType}-search-suggestion-hint{
|
|
11016
11112
|
max-height: ${config.maxHeight};
|
|
11017
11113
|
overflow-x: hidden;
|
|
11018
11114
|
overflow-y: auto;
|
|
@@ -11023,11 +11119,11 @@ const PopsSearchSuggestion = {
|
|
|
11023
11119
|
box-shadow: 0 1px 6px var(--search-suggestion-box-shadow-color);
|
|
11024
11120
|
}
|
|
11025
11121
|
/* 建议框在上面时 */
|
|
11026
|
-
|
|
11122
|
+
.pops-${popsType}-search-suggestion[data-top-reverse] ul.pops-${popsType}-search-suggestion-hint{
|
|
11027
11123
|
display: flex;
|
|
11028
11124
|
flex-direction: column-reverse;
|
|
11029
11125
|
}
|
|
11030
|
-
|
|
11126
|
+
.pops-${popsType}-search-suggestion[data-top-reverse] ul.pops-${popsType}-search-suggestion-hint li{
|
|
11031
11127
|
flex-shrink: 0;
|
|
11032
11128
|
}
|
|
11033
11129
|
ul.pops-${popsType}-search-suggestion-hint li{
|
|
@@ -11048,15 +11144,14 @@ const PopsSearchSuggestion = {
|
|
|
11048
11144
|
font-size: 12px;
|
|
11049
11145
|
color: var(--search-suggestion-item-none-color);
|
|
11050
11146
|
}
|
|
11051
|
-
ul.pops-${popsType}-search-suggestion-hint li:hover{
|
|
11052
|
-
background-color: var(--search-suggestion-item-hover-bg-color);
|
|
11147
|
+
ul.pops-${popsType}-search-suggestion-hint li:not([data-none]):hover{
|
|
11148
|
+
background-color: var(--search-suggestion-item-is-hover-bg-color);
|
|
11053
11149
|
}
|
|
11054
|
-
|
|
11055
11150
|
@media (prefers-color-scheme: dark){
|
|
11056
11151
|
.pops-${popsType}-search-suggestion{
|
|
11057
11152
|
--search-suggestion-bg-color: #1d1e1f;
|
|
11058
11153
|
--search-suggestion-item-color: #cfd3d4;
|
|
11059
|
-
--search-suggestion-item-hover-bg-color: rgba(175, 175, 175, .1);
|
|
11154
|
+
--search-suggestion-item-is-hover-bg-color: rgba(175, 175, 175, .1);
|
|
11060
11155
|
}
|
|
11061
11156
|
}
|
|
11062
11157
|
`;
|
|
@@ -11066,7 +11161,7 @@ const PopsSearchSuggestion = {
|
|
|
11066
11161
|
* @param data 当前项的值
|
|
11067
11162
|
* @param index 当前项的下标
|
|
11068
11163
|
*/
|
|
11069
|
-
|
|
11164
|
+
createSearchItemLiElement(data, index) {
|
|
11070
11165
|
let $li = popsDOMUtils.createElement("li", {
|
|
11071
11166
|
className: `pops-${popsType}-search-suggestion-hint-item`,
|
|
11072
11167
|
"data-index": index,
|
|
@@ -11086,25 +11181,28 @@ const PopsSearchSuggestion = {
|
|
|
11086
11181
|
},
|
|
11087
11182
|
/**
|
|
11088
11183
|
* 设置搜索建议框每一项的点击事件
|
|
11089
|
-
* @param
|
|
11184
|
+
* @param $searchItem
|
|
11090
11185
|
*/
|
|
11091
|
-
setSearchItemClickEvent(
|
|
11092
|
-
popsDOMUtils.on(
|
|
11186
|
+
setSearchItemClickEvent($searchItem) {
|
|
11187
|
+
popsDOMUtils.on($searchItem, "click", (event) => {
|
|
11093
11188
|
popsDOMUtils.preventEvent(event);
|
|
11094
11189
|
let $click = event.target;
|
|
11095
|
-
|
|
11096
|
-
|
|
11190
|
+
let dataValue = Reflect.get($searchItem, "data-value");
|
|
11191
|
+
let isDelete = Boolean($click.closest(`.pops-${popsType}-delete-icon`));
|
|
11192
|
+
if (isDelete) {
|
|
11193
|
+
// 删除
|
|
11097
11194
|
if (typeof config.deleteIcon.callback === "function") {
|
|
11098
|
-
config.deleteIcon.callback(event,
|
|
11195
|
+
config.deleteIcon.callback(event, $searchItem, dataValue);
|
|
11099
11196
|
}
|
|
11100
11197
|
if (!this.$el.$hintULContainer.children.length) {
|
|
11101
11198
|
/* 全删完了 */
|
|
11102
11199
|
this.clear();
|
|
11103
11200
|
}
|
|
11201
|
+
SearchSuggestion.updateStyleSheet();
|
|
11104
11202
|
}
|
|
11105
11203
|
else {
|
|
11106
|
-
|
|
11107
|
-
config.itemClickCallBack(event,
|
|
11204
|
+
// 点击选择项
|
|
11205
|
+
config.itemClickCallBack(event, $searchItem, dataValue);
|
|
11108
11206
|
}
|
|
11109
11207
|
}, {
|
|
11110
11208
|
capture: true,
|
|
@@ -11144,8 +11242,9 @@ const PopsSearchSuggestion = {
|
|
|
11144
11242
|
config.inputTarget.setAttribute("autocomplete", "off");
|
|
11145
11243
|
/* 内容改变事件 */
|
|
11146
11244
|
popsDOMUtils.on(config.inputTarget, "input", void 0, async (event) => {
|
|
11147
|
-
let getListResult = await config.getData(
|
|
11245
|
+
let getListResult = await config.getData(config.inputTarget.value, this.getData());
|
|
11148
11246
|
SearchSuggestion.update(getListResult);
|
|
11247
|
+
SearchSuggestion.updateStyleSheet();
|
|
11149
11248
|
}, option);
|
|
11150
11249
|
},
|
|
11151
11250
|
/**
|
|
@@ -11160,12 +11259,10 @@ const PopsSearchSuggestion = {
|
|
|
11160
11259
|
* 显示搜索建议框的事件
|
|
11161
11260
|
*/
|
|
11162
11261
|
showEvent() {
|
|
11163
|
-
SearchSuggestion.
|
|
11164
|
-
SearchSuggestion.changeHintULElementWidth();
|
|
11165
|
-
SearchSuggestion.changeHintULElementPosition();
|
|
11262
|
+
SearchSuggestion.updateStyleSheet();
|
|
11166
11263
|
if (config.toHideWithNotResult) {
|
|
11167
11264
|
if (SearchSuggestion.$data.isEmpty) {
|
|
11168
|
-
SearchSuggestion.hide();
|
|
11265
|
+
SearchSuggestion.hide(true);
|
|
11169
11266
|
}
|
|
11170
11267
|
else {
|
|
11171
11268
|
SearchSuggestion.show();
|
|
@@ -11224,7 +11321,7 @@ const PopsSearchSuggestion = {
|
|
|
11224
11321
|
/* 点击在目标input内 */
|
|
11225
11322
|
return;
|
|
11226
11323
|
}
|
|
11227
|
-
SearchSuggestion.hide();
|
|
11324
|
+
SearchSuggestion.hide(true);
|
|
11228
11325
|
}
|
|
11229
11326
|
},
|
|
11230
11327
|
/**
|
|
@@ -11349,29 +11446,39 @@ const PopsSearchSuggestion = {
|
|
|
11349
11446
|
else {
|
|
11350
11447
|
// 在下面
|
|
11351
11448
|
position = "bottom";
|
|
11352
|
-
SearchSuggestion.$el.$hintULContainer.removeAttribute("data-top");
|
|
11353
11449
|
}
|
|
11354
11450
|
}
|
|
11355
11451
|
if (position === "top") {
|
|
11452
|
+
// 在上面
|
|
11356
11453
|
if (config.positionTopToReverse) {
|
|
11357
|
-
|
|
11454
|
+
// 自动翻转
|
|
11455
|
+
SearchSuggestion.$el.root.setAttribute("data-top-reverse", "true");
|
|
11358
11456
|
}
|
|
11359
|
-
|
|
11360
|
-
|
|
11361
|
-
|
|
11362
|
-
|
|
11457
|
+
if (config.useFoldAnimation) {
|
|
11458
|
+
// 翻转折叠
|
|
11459
|
+
SearchSuggestion.$el.root.setAttribute("data-popper-placement", "top");
|
|
11460
|
+
}
|
|
11461
|
+
let bottom = documentHeight - targetRect.top + config.topDistance;
|
|
11462
|
+
SearchSuggestion.$el.root.style.top = "";
|
|
11463
|
+
SearchSuggestion.$el.root.style.bottom = bottom + "px";
|
|
11363
11464
|
}
|
|
11364
11465
|
else if (position === "bottom") {
|
|
11365
11466
|
// 在下面
|
|
11366
|
-
|
|
11367
|
-
|
|
11368
|
-
|
|
11369
|
-
|
|
11467
|
+
if (config.useFoldAnimation) {
|
|
11468
|
+
SearchSuggestion.$el.root.setAttribute("data-popper-placement", "bottom-center");
|
|
11469
|
+
}
|
|
11470
|
+
let top = targetRect.height + targetRect.top + config.topDistance;
|
|
11471
|
+
SearchSuggestion.$el.root.removeAttribute("data-top-reverse");
|
|
11472
|
+
SearchSuggestion.$el.root.style.bottom = "";
|
|
11473
|
+
SearchSuggestion.$el.root.style.top = top + "px";
|
|
11370
11474
|
}
|
|
11475
|
+
let left = targetRect.left;
|
|
11371
11476
|
let hintUIWidth = popsDOMUtils.width(SearchSuggestion.$el.$hintULContainer);
|
|
11372
|
-
|
|
11373
|
-
|
|
11374
|
-
|
|
11477
|
+
if (hintUIWidth > documentWidth) {
|
|
11478
|
+
// 超出宽度
|
|
11479
|
+
left = left + documentWidth - hintUIWidth;
|
|
11480
|
+
}
|
|
11481
|
+
SearchSuggestion.$el.root.style.left = left + "px";
|
|
11375
11482
|
},
|
|
11376
11483
|
/**
|
|
11377
11484
|
* 更新搜索建议框的width
|
|
@@ -11393,6 +11500,17 @@ const PopsSearchSuggestion = {
|
|
|
11393
11500
|
let cssText = this.getDynamicCSS();
|
|
11394
11501
|
PopsSafeUtils.setSafeHTML(this.$el.$dynamicCSS, cssText);
|
|
11395
11502
|
},
|
|
11503
|
+
/**
|
|
11504
|
+
* 数据项的数量改变时调用
|
|
11505
|
+
*/
|
|
11506
|
+
updateStyleSheet() {
|
|
11507
|
+
// 更新z-index
|
|
11508
|
+
SearchSuggestion.updateDynamicCSS();
|
|
11509
|
+
// 更新宽度
|
|
11510
|
+
SearchSuggestion.changeHintULElementWidth();
|
|
11511
|
+
// 更新位置
|
|
11512
|
+
SearchSuggestion.changeHintULElementPosition();
|
|
11513
|
+
},
|
|
11396
11514
|
/**
|
|
11397
11515
|
* 更新页面显示的搜索结果
|
|
11398
11516
|
* @param data
|
|
@@ -11411,7 +11529,7 @@ const PopsSearchSuggestion = {
|
|
|
11411
11529
|
SearchSuggestion.clearAllSearchItemLi();
|
|
11412
11530
|
/* 添加进ul中 */
|
|
11413
11531
|
config.data.forEach((item, index) => {
|
|
11414
|
-
let itemElement = SearchSuggestion.
|
|
11532
|
+
let itemElement = SearchSuggestion.createSearchItemLiElement(item, index);
|
|
11415
11533
|
SearchSuggestion.setSearchItemClickEvent(itemElement);
|
|
11416
11534
|
SearchSuggestion.setSearchItemSelectEvent(itemElement);
|
|
11417
11535
|
SearchSuggestion.$el.$hintULContainer.appendChild(itemElement);
|
|
@@ -11435,15 +11553,32 @@ const PopsSearchSuggestion = {
|
|
|
11435
11553
|
},
|
|
11436
11554
|
/**
|
|
11437
11555
|
* 隐藏搜索建议框
|
|
11556
|
+
* @param useAnimationToHide 是否使用动画隐藏
|
|
11438
11557
|
*/
|
|
11439
|
-
hide() {
|
|
11440
|
-
|
|
11558
|
+
hide(useAnimationToHide = false) {
|
|
11559
|
+
if (config.useFoldAnimation) {
|
|
11560
|
+
if (!useAnimationToHide) {
|
|
11561
|
+
// 去掉动画
|
|
11562
|
+
popsDOMUtils.removeClassName(this.$el.root, "el-zoom-in-top-animation");
|
|
11563
|
+
}
|
|
11564
|
+
popsDOMUtils.addClassName(this.$el.root, "el-zoom-in-top-animation");
|
|
11565
|
+
popsDOMUtils.addClassName(this.$el.root, "el-zoom-in-top-animation-hide");
|
|
11566
|
+
popsDOMUtils.removeClassName(this.$el.root, "el-zoom-in-top-animation-show");
|
|
11567
|
+
}
|
|
11568
|
+
else {
|
|
11569
|
+
this.$el.root.style.display = "none";
|
|
11570
|
+
}
|
|
11441
11571
|
},
|
|
11442
11572
|
/**
|
|
11443
11573
|
* 显示搜索建议框
|
|
11444
11574
|
*/
|
|
11445
11575
|
show() {
|
|
11446
11576
|
this.$el.root.style.display = "";
|
|
11577
|
+
if (config.useFoldAnimation) {
|
|
11578
|
+
popsDOMUtils.addClassName(this.$el.root, "el-zoom-in-top-animation");
|
|
11579
|
+
popsDOMUtils.removeClassName(this.$el.root, "el-zoom-in-top-animation-hide");
|
|
11580
|
+
popsDOMUtils.addClassName(this.$el.root, "el-zoom-in-top-animation-show");
|
|
11581
|
+
}
|
|
11447
11582
|
},
|
|
11448
11583
|
};
|
|
11449
11584
|
return SearchSuggestion;
|