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