@ebiz/designer-components 0.0.19-beta.9 → 0.0.20

package/src/components/charts/feature/expandLegend/mutiSelect/item.js

@@ -1,133 +1,133 @@
-/**
- * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
- * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
- *
- * Use of this source code is governed by an MIT-style license.
- *
- * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
- * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
- * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
- *
- */
-import { CSS_CLASS, SVG_ICON } from "./constants";
-import { svgTransform } from "../../../util/convert";
-const CIRCLE = "circle";
-const LINE = "line";
-// 创建每条下拉选项
-function item(data, index,color,itemStyle) {
-
-    // 整个选项的dom，每个选项由图例和文字组成(图例可以是checkbox)
-    const itemDom = document.createElement("div");
-    itemDom.classList.add(CSS_CLASS.ITEM);
-    itemDom.dataset.id = index;
-    if(color){
-        itemDom.style.setProperty("--active-color", color);
-        const itemIcon = document.createElement("div");
-        if (itemStyle?.icon === LINE) {
-            itemIcon.classList.add(CSS_CLASS.ITEM_ICON_LINE);
-        } else {
-            itemIcon.classList.add(CSS_CLASS.ITEM_ICON_CIRCLE);
-        }
-        const itemName = document.createElement("span");
-        itemName.innerText = data.name;
-        itemName.title = data.name;
-        itemName.classList.add(CSS_CLASS.ITEM_NAME);
-        if (data.selected) {
-            itemIcon.classList.add("active");
-            itemName.classList.add("active");
-        }
-
-        const copy = document.createElement('img')
-        copy.classList.add('copy')
-        if(itemStyle?.copy){
-            const svg1 = svgTransform(SVG_ICON.COPY1)
-            const svg2 = svgTransform(SVG_ICON.COPY2)
-            copy.src = svg1
-
-            copy.addEventListener('mouseover', (e) => {
-                e.stopPropagation()
-                copy.src = svg2
-            })
-            copy.addEventListener('mouseleave', (e) => {
-                e.stopPropagation()
-                copy.src = svg1
-            })
-            copy.addEventListener('click', async (e) => {
-                e.stopPropagation()
-                let clipboard = navigator.clipboard || {
-                    writeText: (text) => {
-                        let copyInput = document.createElement('input');
-                        copyInput.value = text;
-                        document.body.appendChild(copyInput);
-                        copyInput.select();
-                        document.execCommand('copy');
-                        document.body.removeChild(copyInput);
-                    }
-                }
-                if (clipboard) {
-                    await clipboard.writeText(data.name);
-                    // new Message({text:"复制成功"})
-                }
-            })
-        }
-        itemDom.append(itemIcon, itemName, copy);
-    }else{
-
-        // 创建checkbox的dom
-        const checkbox = document.createElement("div");
-        checkbox.classList.add(CSS_CLASS.CHECKBOX);
-        const checkboxIcon = document.createElement("img");
-        checkboxIcon.src = svgTransform(SVG_ICON.TICK);
-        checkboxIcon.classList.add(CSS_CLASS.CHECKBOX_ICON);
-        if (data.selected) {
-            checkbox.classList.add("active");
-            checkboxIcon.classList.add("active");
-        }
-        checkbox.appendChild(checkboxIcon);
-
-        // 文字的dom
-        const itemName = document.createElement("span");
-        itemName.innerText = data.name;
-        itemName.title = data.name;
-        itemName.classList.add(CSS_CLASS.ITEM_NAME);
-
-        const copy = document.createElement('img')
-        copy.classList.add('copy')
-        if(itemStyle?.copy){
-            const svg1 = svgTransform(SVG_ICON.COPY1)
-            const svg2 = svgTransform(SVG_ICON.COPY2)
-            copy.src = svg1
-
-            copy.addEventListener('mouseover', (e) => {
-                e.stopPropagation()
-                copy.src = svg2
-            })
-            copy.addEventListener('mouseleave', (e) => {
-                e.stopPropagation()
-                copy.src = svg1
-            })
-            copy.addEventListener('click', async (e) => {
-                e.stopPropagation()
-                let clipboard = navigator.clipboard || {
-                    writeText: (text) => {
-                        let copyInput = document.createElement('input');
-                        copyInput.value = text;
-                        document.body.appendChild(copyInput);
-                        copyInput.select();
-                        document.execCommand('copy');
-                        document.body.removeChild(copyInput);
-                    }
-                }
-                if (clipboard) {
-                    await clipboard.writeText(data.name);
-                    // new Message({text:"复制成功"})
-                }
-            })
-        }
-        itemDom.append(checkbox, itemName, copy);
-    }
-    
-    return itemDom;
-}
-
-export { item };
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import { CSS_CLASS, SVG_ICON } from "./constants";
+import { svgTransform } from "../../../util/convert";
+const CIRCLE = "circle";
+const LINE = "line";
+// 创建每条下拉选项
+function item(data, index,color,itemStyle) {
+
+    // 整个选项的dom，每个选项由图例和文字组成(图例可以是checkbox)
+    const itemDom = document.createElement("div");
+    itemDom.classList.add(CSS_CLASS.ITEM);
+    itemDom.dataset.id = index;
+    if(color){
+        itemDom.style.setProperty("--active-color", color);
+        const itemIcon = document.createElement("div");
+        if (itemStyle?.icon === LINE) {
+            itemIcon.classList.add(CSS_CLASS.ITEM_ICON_LINE);
+        } else {
+            itemIcon.classList.add(CSS_CLASS.ITEM_ICON_CIRCLE);
+        }
+        const itemName = document.createElement("span");
+        itemName.innerText = data.name;
+        itemName.title = data.name;
+        itemName.classList.add(CSS_CLASS.ITEM_NAME);
+        if (data.selected) {
+            itemIcon.classList.add("active");
+            itemName.classList.add("active");
+        }
+
+        const copy = document.createElement('img')
+        copy.classList.add('copy')
+        if(itemStyle?.copy){
+            const svg1 = svgTransform(SVG_ICON.COPY1)
+            const svg2 = svgTransform(SVG_ICON.COPY2)
+            copy.src = svg1
+
+            copy.addEventListener('mouseover', (e) => {
+                e.stopPropagation()
+                copy.src = svg2
+            })
+            copy.addEventListener('mouseleave', (e) => {
+                e.stopPropagation()
+                copy.src = svg1
+            })
+            copy.addEventListener('click', async (e) => {
+                e.stopPropagation()
+                let clipboard = navigator.clipboard || {
+                    writeText: (text) => {
+                        let copyInput = document.createElement('input');
+                        copyInput.value = text;
+                        document.body.appendChild(copyInput);
+                        copyInput.select();
+                        document.execCommand('copy');
+                        document.body.removeChild(copyInput);
+                    }
+                }
+                if (clipboard) {
+                    await clipboard.writeText(data.name);
+                    // new Message({text:"复制成功"})
+                }
+            })
+        }
+        itemDom.append(itemIcon, itemName, copy);
+    }else{
+
+        // 创建checkbox的dom
+        const checkbox = document.createElement("div");
+        checkbox.classList.add(CSS_CLASS.CHECKBOX);
+        const checkboxIcon = document.createElement("img");
+        checkboxIcon.src = svgTransform(SVG_ICON.TICK);
+        checkboxIcon.classList.add(CSS_CLASS.CHECKBOX_ICON);
+        if (data.selected) {
+            checkbox.classList.add("active");
+            checkboxIcon.classList.add("active");
+        }
+        checkbox.appendChild(checkboxIcon);
+
+        // 文字的dom
+        const itemName = document.createElement("span");
+        itemName.innerText = data.name;
+        itemName.title = data.name;
+        itemName.classList.add(CSS_CLASS.ITEM_NAME);
+
+        const copy = document.createElement('img')
+        copy.classList.add('copy')
+        if(itemStyle?.copy){
+            const svg1 = svgTransform(SVG_ICON.COPY1)
+            const svg2 = svgTransform(SVG_ICON.COPY2)
+            copy.src = svg1
+
+            copy.addEventListener('mouseover', (e) => {
+                e.stopPropagation()
+                copy.src = svg2
+            })
+            copy.addEventListener('mouseleave', (e) => {
+                e.stopPropagation()
+                copy.src = svg1
+            })
+            copy.addEventListener('click', async (e) => {
+                e.stopPropagation()
+                let clipboard = navigator.clipboard || {
+                    writeText: (text) => {
+                        let copyInput = document.createElement('input');
+                        copyInput.value = text;
+                        document.body.appendChild(copyInput);
+                        copyInput.select();
+                        document.execCommand('copy');
+                        document.body.removeChild(copyInput);
+                    }
+                }
+                if (clipboard) {
+                    await clipboard.writeText(data.name);
+                    // new Message({text:"复制成功"})
+                }
+            })
+        }
+        itemDom.append(checkbox, itemName, copy);
+    }
+    
+    return itemDom;
+}
+
+export { item };

package/src/components/charts/feature/expandLegend/mutiSelect/position.js

@@ -1,44 +1,44 @@
-/**
- * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
- * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
- *
- * Use of this source code is governed by an MIT-style license.
- *
- * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
- * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
- * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
- *
- */
-// 对于父元素y轴的偏移
-const DELTA_Y = 5;
-
-// 确定多选框的位置
-function position(mutiselect) {
-
-    // 获取根元素的位置
-    const distance = this.root.getBoundingClientRect();
-
-    // 上一次多选框的位置
-    let preTopPosition = mutiselect.dataset.top;
-    let topPosition = distance.bottom + DELTA_Y;
-    let leftPosition = distance.left + distance.width - mutiselect.clientWidth;
-
-    // 根元素左边放不下，则放右边
-    if (leftPosition <= 0) {
-        leftPosition = distance.left;
-    }
-
-    // 用于处理，当上一次多选框出现在根元素的上方，又在搜索框中搜索数据后，保持上一次多选框的位置，不要乱跳
-    if (Number(preTopPosition) < topPosition || topPosition + mutiselect.clientHeight > window.innerHeight) {
-        topPosition = distance.top - mutiselect.clientHeight;
-    }
-    mutiselect.style.left = leftPosition + "px";
-    mutiselect.style.top = topPosition + "px";
-    mutiselect.dataset.scrollY = window.scrollY;
-    mutiselect.dataset.top = topPosition;
-    mutiselect.dataset.scrollX = window.scrollX;
-    mutiselect.dataset.left = leftPosition;
-    mutiselect.dataset.id = this.root.id;
-}
-
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+// 对于父元素y轴的偏移
+const DELTA_Y = 5;
+
+// 确定多选框的位置
+function position(mutiselect) {
+
+    // 获取根元素的位置
+    const distance = this.root.getBoundingClientRect();
+
+    // 上一次多选框的位置
+    let preTopPosition = mutiselect.dataset.top;
+    let topPosition = distance.bottom + DELTA_Y;
+    let leftPosition = distance.left + distance.width - mutiselect.clientWidth;
+
+    // 根元素左边放不下，则放右边
+    if (leftPosition <= 0) {
+        leftPosition = distance.left;
+    }
+
+    // 用于处理，当上一次多选框出现在根元素的上方，又在搜索框中搜索数据后，保持上一次多选框的位置，不要乱跳
+    if (Number(preTopPosition) < topPosition || topPosition + mutiselect.clientHeight > window.innerHeight) {
+        topPosition = distance.top - mutiselect.clientHeight;
+    }
+    mutiselect.style.left = leftPosition + "px";
+    mutiselect.style.top = topPosition + "px";
+    mutiselect.dataset.scrollY = window.scrollY;
+    mutiselect.dataset.top = topPosition;
+    mutiselect.dataset.scrollX = window.scrollX;
+    mutiselect.dataset.left = leftPosition;
+    mutiselect.dataset.id = this.root.id;
+}
+
 export default position;

package/src/components/charts/feature/expandLegend/mutiSelect/search.js

@@ -1,79 +1,79 @@
-/**
- * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
- * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
- *
- * Use of this source code is governed by an MIT-style license.
- *
- * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
- * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
- * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
- *
- */
-import { CSS_CLASS, SVG_ICON } from "./constants";
-import position from "./position";
-import { svgTransform } from "../../../util/convert";
-import debounce from "../../../util/debounce";
-import { item as createItem } from "./item";
-
-// 创建搜索框
-function search(container) {
-    const searchDom = document.createElement("div");
-    searchDom.classList.add(CSS_CLASS.SEARCH);
-    searchDom.addEventListener("wheel", (e) => {
-        e.stopPropagation();
-        e.preventDefault();
-    });
-    const searchIcon = document.createElement("img");
-    searchIcon.src = svgTransform(SVG_ICON.SEARCH);
-    searchIcon.classList.add(CSS_CLASS.SEARCH_ICON);
-    const searchInput = document.createElement("input");
-    searchInput.name = "searchDom";
-    searchInput.placeholder = "请输入关键词";
-    searchInput.addEventListener("wheel", function (e) {
-        e.preventDefault();
-        e.stopPropagation();
-    });
-
-    // 搜索时防抖
-    searchInput.addEventListener(
-        "input",
-        debounce(() => {
-            container.classList.remove(CSS_CLASS.CONTAINER_EMPTY);
-            container.innerHTML = "";
-            let isEmpty = true;
-            let colorLength = this.color.length;
-            this.data.forEach((item, index) => {
-                if (item.name.toString().includes(searchInput.value)) {
-                    let color = this.color[index % colorLength];
-                    if(item.display&&item.display!=='none'){
-                        container.appendChild(createItem(item, index, color,this.itemStyle));
-                    }else if(item.display===undefined){
-                        container.appendChild(createItem(item, index, color,this.itemStyle));
-                    }
-                    isEmpty = false;
-                }
-            });
-
-            // 搜索结果为空时显示空内容
-            if (isEmpty) {
-                container.classList.add(CSS_CLASS.CONTAINER_EMPTY);
-                const emptyIcon = document.createElement("img");
-                emptyIcon.src = svgTransform(SVG_ICON.EMPTY);
-                emptyIcon.style.opacity = "0.2";
-                const emptyText = document.createElement("div");
-                emptyText.innerText = "无数据";
-                emptyText.classList.add(CSS_CLASS.CONTAINER_EMPTY_TEXT);
-                container.append(emptyIcon, emptyText);
-            }
-            let mutiselectDom = container.querySelector(`.${CSS_CLASS.MUTISELECT}`);
-            
-            // 搜索后重新计算下位置
-            if (mutiselectDom) position.call(this, mutiselectDom);
-        })
-    );
-    searchInput.classList.add(CSS_CLASS.SEARCH_INPUT);
-    searchDom.append(searchIcon, searchInput);
-    return searchDom;
-}
-
-export default search;
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import { CSS_CLASS, SVG_ICON } from "./constants";
+import position from "./position";
+import { svgTransform } from "../../../util/convert";
+import debounce from "../../../util/debounce";
+import { item as createItem } from "./item";
+
+// 创建搜索框
+function search(container) {
+    const searchDom = document.createElement("div");
+    searchDom.classList.add(CSS_CLASS.SEARCH);
+    searchDom.addEventListener("wheel", (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+    });
+    const searchIcon = document.createElement("img");
+    searchIcon.src = svgTransform(SVG_ICON.SEARCH);
+    searchIcon.classList.add(CSS_CLASS.SEARCH_ICON);
+    const searchInput = document.createElement("input");
+    searchInput.name = "searchDom";
+    searchInput.placeholder = "请输入关键词";
+    searchInput.addEventListener("wheel", function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+    });
+
+    // 搜索时防抖
+    searchInput.addEventListener(
+        "input",
+        debounce(() => {
+            container.classList.remove(CSS_CLASS.CONTAINER_EMPTY);
+            container.innerHTML = "";
+            let isEmpty = true;
+            let colorLength = this.color.length;
+            this.data.forEach((item, index) => {
+                if (item.name.toString().includes(searchInput.value)) {
+                    let color = this.color[index % colorLength];
+                    if(item.display&&item.display!=='none'){
+                        container.appendChild(createItem(item, index, color,this.itemStyle));
+                    }else if(item.display===undefined){
+                        container.appendChild(createItem(item, index, color,this.itemStyle));
+                    }
+                    isEmpty = false;
+                }
+            });
+
+            // 搜索结果为空时显示空内容
+            if (isEmpty) {
+                container.classList.add(CSS_CLASS.CONTAINER_EMPTY);
+                const emptyIcon = document.createElement("img");
+                emptyIcon.src = svgTransform(SVG_ICON.EMPTY);
+                emptyIcon.style.opacity = "0.2";
+                const emptyText = document.createElement("div");
+                emptyText.innerText = "无数据";
+                emptyText.classList.add(CSS_CLASS.CONTAINER_EMPTY_TEXT);
+                container.append(emptyIcon, emptyText);
+            }
+            let mutiselectDom = container.querySelector(`.${CSS_CLASS.MUTISELECT}`);
+            
+            // 搜索后重新计算下位置
+            if (mutiselectDom) position.call(this, mutiselectDom);
+        })
+    );
+    searchInput.classList.add(CSS_CLASS.SEARCH_INPUT);
+    searchDom.append(searchIcon, searchInput);
+    return searchDom;
+}
+
+export default search;

package/src/components/charts/feature/expandLegend/mutiSelectLegend/constants.js

@@ -1,41 +1,41 @@
-/**
- * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
- * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
- *
- * Use of this source code is governed by an MIT-style license.
- *
- * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
- * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
- * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
- *
- */
-export const CSS_CLASS = {
-    SCROLL: "hui_expand_legend_scroll",
-    MORE: "hui_expand_legend_more",
-    PLACEHOLDER: "hui_expand_legend_placeholder",
-    PAGING_ICON_ROTATE: "hui_expand_legend_paging_icon_rotate",
-    ITEM: "hui_expand_legend_scroll_item",
-    ITEM_ICON: "hui_expand_legend_scroll_item_icon",
-    ITEM_ICON_LINE: "hui_expand_legend_scroll_item_icon_line",
-    ITEM_ICON_CIRCLE: "hui_expand_legend_scroll_item_icon_circle",
-    ITEM_ICON_UNACTIVE: "hui_expand_legend_scroll_item_icon_unactive",
-    ITEM_TEXT: "hui_expand_legend_scroll_item_text",
-    ITEM_TEXT_UNACTIVE: "hui_expand_legend_scroll_item_text_unactive",
-    PAGING: "hui_expand_legend_paging",
-    PAGING_TEXT: "hui_expand_legend_paging_text",
-    PAGING_ICON: "hui_expand_legend_paging_icon",
-    PAGING_LEFT: "hui_expand_legend_paging_left",
-    PAGING_RIGHT: "hui_expand_legend_paging_right",
-};
-
-export const SVG_ICON = {
-    LEFT_ARROW: `<svg width="4.773438" height="8.336914" viewBox="0 0 4.77344 8.33691" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><desc>Created with Pixso.</desc><defs/><path id="合并" d="M4.06 8.21L0.15 4.46C0.05 4.36 0 4.25 0 4.15C0 4.06 0.05 3.96 0.15 3.86L4.06 0.11C4.23 -0.05 4.49 -0.04 4.65 0.12C4.81 0.29 4.81 0.55 4.64 0.71L1.04 4.16L4.64 7.61C4.81 7.77 4.81 8.03 4.65 8.2C4.49 8.37 4.23 8.38 4.06 8.21Z" fill="#C9C9C9" fill-opacity="1.000000" fill-rule="evenodd"/></svg>`,
-    RIGHT_ARROW: `<svg width="4.773438" height="8.336914" viewBox="0 0 4.77344 8.33691" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><desc>Created with Pixso.</desc><defs/><path id="合并" d="M0.7 8.21L4.62 4.46C4.71 4.36 4.77 4.25 4.77 4.15C4.76 4.06 4.71 3.96 4.62 3.86L0.7 0.11C0.53 -0.05 0.27 -0.04 0.11 0.12C-0.05 0.29 -0.04 0.55 0.12 0.71L3.73 4.16L0.12 7.61C-0.04 7.77 -0.05 8.03 0.11 8.2C0.27 8.37 0.53 8.38 0.7 8.21Z" fill="#191919" fill-opacity="1.000000" fill-rule="evenodd"/></svg>`,
-    EVEN_MORE: `<svg width="12.000000" height="12.000000" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><desc>Created with Pixso.</desc><defs/><path id="合并" d="M0 6C0 5.58 0.33 5.25 0.75 5.25C1.16 5.25 1.5 5.58 1.5 6C1.5 6.41 1.16 6.75 0.75 6.75C0.33 6.75 0 6.41 0 6ZM6 5.25C5.58 5.25 5.25 5.58 5.25 6C5.25 6.41 5.58 6.75 6 6.75C6.41 6.75 6.75 6.41 6.75 6C6.75 5.58 6.41 5.25 6 5.25ZM10.5 6C10.5 5.58 10.83 5.25 11.25 5.25C11.66 5.25 12 5.58 12 6C12 6.41 11.66 6.75 11.25 6.75C10.83 6.75 10.5 6.41 10.5 6Z" fill="#191919" fill-opacity="1.000000" fill-rule="evenodd"/></svg>`,
-    COPY1:`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-    <path fill="#808080" d="m14.25,6c2.07,0,3.75,1.68,3.75,3.75v9c0,2.07-1.68,3.75-3.75,3.75H5.25c-2.07,0-3.75-1.68-3.75-3.75v-9c0-2.07,1.68-3.75,3.75-3.75h9Zm0,1.5H5.25c-1.24,0-2.25,1.01-2.25,2.25v9c0,1.24,1.01,2.25,2.25,2.25h9c1.24,0,2.25-1.01,2.25-2.25v-9c0-1.24-1.01-2.25-2.25-2.25Zm4.5-5.99c2.07,0,3.75,1.68,3.75,3.75v7.5c0,.41-.34.75-.75.75s-.75-.34-.75-.75v-7.5c0-1.24-1.01-2.25-2.25-2.25h-7.5c-.41,0-.75-.34-.75-.75s.34-.75.75-.75h7.5Z"></path>
-  </svg>`,
-    COPY2:`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-    <path fill="#000000" d="m14.25,6c2.07,0,3.75,1.68,3.75,3.75v9c0,2.07-1.68,3.75-3.75,3.75H5.25c-2.07,0-3.75-1.68-3.75-3.75v-9c0-2.07,1.68-3.75,3.75-3.75h9Zm0,1.5H5.25c-1.24,0-2.25,1.01-2.25,2.25v9c0,1.24,1.01,2.25,2.25,2.25h9c1.24,0,2.25-1.01,2.25-2.25v-9c0-1.24-1.01-2.25-2.25-2.25Zm4.5-5.99c2.07,0,3.75,1.68,3.75,3.75v7.5c0,.41-.34.75-.75.75s-.75-.34-.75-.75v-7.5c0-1.24-1.01-2.25-2.25-2.25h-7.5c-.41,0-.75-.34-.75-.75s.34-.75.75-.75h7.5Z"></path>
-  </svg>`,
-};
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+export const CSS_CLASS = {
+    SCROLL: "hui_expand_legend_scroll",
+    MORE: "hui_expand_legend_more",
+    PLACEHOLDER: "hui_expand_legend_placeholder",
+    PAGING_ICON_ROTATE: "hui_expand_legend_paging_icon_rotate",
+    ITEM: "hui_expand_legend_scroll_item",
+    ITEM_ICON: "hui_expand_legend_scroll_item_icon",
+    ITEM_ICON_LINE: "hui_expand_legend_scroll_item_icon_line",
+    ITEM_ICON_CIRCLE: "hui_expand_legend_scroll_item_icon_circle",
+    ITEM_ICON_UNACTIVE: "hui_expand_legend_scroll_item_icon_unactive",
+    ITEM_TEXT: "hui_expand_legend_scroll_item_text",
+    ITEM_TEXT_UNACTIVE: "hui_expand_legend_scroll_item_text_unactive",
+    PAGING: "hui_expand_legend_paging",
+    PAGING_TEXT: "hui_expand_legend_paging_text",
+    PAGING_ICON: "hui_expand_legend_paging_icon",
+    PAGING_LEFT: "hui_expand_legend_paging_left",
+    PAGING_RIGHT: "hui_expand_legend_paging_right",
+};
+
+export const SVG_ICON = {
+    LEFT_ARROW: `<svg width="4.773438" height="8.336914" viewBox="0 0 4.77344 8.33691" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><desc>Created with Pixso.</desc><defs/><path id="合并" d="M4.06 8.21L0.15 4.46C0.05 4.36 0 4.25 0 4.15C0 4.06 0.05 3.96 0.15 3.86L4.06 0.11C4.23 -0.05 4.49 -0.04 4.65 0.12C4.81 0.29 4.81 0.55 4.64 0.71L1.04 4.16L4.64 7.61C4.81 7.77 4.81 8.03 4.65 8.2C4.49 8.37 4.23 8.38 4.06 8.21Z" fill="#C9C9C9" fill-opacity="1.000000" fill-rule="evenodd"/></svg>`,
+    RIGHT_ARROW: `<svg width="4.773438" height="8.336914" viewBox="0 0 4.77344 8.33691" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><desc>Created with Pixso.</desc><defs/><path id="合并" d="M0.7 8.21L4.62 4.46C4.71 4.36 4.77 4.25 4.77 4.15C4.76 4.06 4.71 3.96 4.62 3.86L0.7 0.11C0.53 -0.05 0.27 -0.04 0.11 0.12C-0.05 0.29 -0.04 0.55 0.12 0.71L3.73 4.16L0.12 7.61C-0.04 7.77 -0.05 8.03 0.11 8.2C0.27 8.37 0.53 8.38 0.7 8.21Z" fill="#191919" fill-opacity="1.000000" fill-rule="evenodd"/></svg>`,
+    EVEN_MORE: `<svg width="12.000000" height="12.000000" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><desc>Created with Pixso.</desc><defs/><path id="合并" d="M0 6C0 5.58 0.33 5.25 0.75 5.25C1.16 5.25 1.5 5.58 1.5 6C1.5 6.41 1.16 6.75 0.75 6.75C0.33 6.75 0 6.41 0 6ZM6 5.25C5.58 5.25 5.25 5.58 5.25 6C5.25 6.41 5.58 6.75 6 6.75C6.41 6.75 6.75 6.41 6.75 6C6.75 5.58 6.41 5.25 6 5.25ZM10.5 6C10.5 5.58 10.83 5.25 11.25 5.25C11.66 5.25 12 5.58 12 6C12 6.41 11.66 6.75 11.25 6.75C10.83 6.75 10.5 6.41 10.5 6Z" fill="#191919" fill-opacity="1.000000" fill-rule="evenodd"/></svg>`,
+    COPY1:`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path fill="#808080" d="m14.25,6c2.07,0,3.75,1.68,3.75,3.75v9c0,2.07-1.68,3.75-3.75,3.75H5.25c-2.07,0-3.75-1.68-3.75-3.75v-9c0-2.07,1.68-3.75,3.75-3.75h9Zm0,1.5H5.25c-1.24,0-2.25,1.01-2.25,2.25v9c0,1.24,1.01,2.25,2.25,2.25h9c1.24,0,2.25-1.01,2.25-2.25v-9c0-1.24-1.01-2.25-2.25-2.25Zm4.5-5.99c2.07,0,3.75,1.68,3.75,3.75v7.5c0,.41-.34.75-.75.75s-.75-.34-.75-.75v-7.5c0-1.24-1.01-2.25-2.25-2.25h-7.5c-.41,0-.75-.34-.75-.75s.34-.75.75-.75h7.5Z"></path>
+  </svg>`,
+    COPY2:`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path fill="#000000" d="m14.25,6c2.07,0,3.75,1.68,3.75,3.75v9c0,2.07-1.68,3.75-3.75,3.75H5.25c-2.07,0-3.75-1.68-3.75-3.75v-9c0-2.07,1.68-3.75,3.75-3.75h9Zm0,1.5H5.25c-1.24,0-2.25,1.01-2.25,2.25v9c0,1.24,1.01,2.25,2.25,2.25h9c1.24,0,2.25-1.01,2.25-2.25v-9c0-1.24-1.01-2.25-2.25-2.25Zm4.5-5.99c2.07,0,3.75,1.68,3.75,3.75v7.5c0,.41-.34.75-.75.75s-.75-.34-.75-.75v-7.5c0-1.24-1.01-2.25-2.25-2.25h-7.5c-.41,0-.75-.34-.75-.75s.34-.75.75-.75h7.5Z"></path>
+  </svg>`,
+};