@fangzhongya/fang-ui 0.0.55 → 0.0.57

package/dist/components/tablesp/src/index2.js

@@ -1,6 +1,7 @@
-import { defineComponent, useSlots, ref, createElementBlock, openBlock, normalizeStyle, unref, normalizeClass, createVNode, createBlock, createCommentVNode, mergeProps, toHandlers, createSlots, renderList, withCtx, renderSlot, normalizeProps, guardReactiveProps } from "vue";
+import { defineComponent, useSlots, ref, createElementBlock, openBlock, normalizeStyle, unref, normalizeClass, withDirectives, createBlock, createCommentVNode, mergeProps, toHandlers, createSlots, renderList, withCtx, renderSlot, normalizeProps, guardReactiveProps } from "vue";
 import { Tables } from "../../tables/index.js";
 import { Paging } from "../../paging/index.js";
+import vScroll from "../../../directives/scroll/index.js";
 import { useInit, dataEmit, dataProps } from "../../tables/common/pagin.js";
 import { useCssName } from "../../../hooks/cssname/index.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -22,6 +23,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       loading,
       tableList,
       tableConfig,
+      scroll,
       onSortChange,
       onListEvents,
       onSelect,
@@ -47,16 +49,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         class: normalizeClass(unref(cs).z()),
         style: normalizeStyle(unref(cs).vdo({ height: unref(height) }))
       }, [
-        createVNode(unref(Tables), mergeProps(unref(tableConfig).config, toHandlers(unref(formEvent)), {
+        withDirectives((openBlock(), createBlock(unref(Tables), mergeProps(unref(tableConfig).config, toHandlers(unref(formEvent)), {
           height: unref(height),
           ref_key: "refTable",
           ref: refTable,
-          class: [unref(cs).z("main"), unref(cs).is("radio", (_a = unref(tableConfig).config) == null ? void 0 : _a.isradio)],
+          class: [
+            unref(cs).z("main"),
+            unref(cs).is("radio", (_a = unref(tableConfig).config) == null ? void 0 : _a.isradio),
+            unref(cs).is("scroll", unref(paginat).is && unref(paginat).scroll)
+          ],
+          "scroll-selector": "." + unref(cs).ec("scrollbar") + " ." + unref(cs).ec("scrollbar", "", "wrap"),
           value: unref(data).list,
           list: unref(tableList),
           size: (_b = unref(tableConfig).config) == null ? void 0 : _b.size,
           paginat: unref(paginat),
-          loading: unref(loading),
+          loading: unref(paginat).scroll && unref(paginat).current > 1 ? false : unref(loading),
           options: props.options,
           compons: props.compons,
           onSortChange: unref(onSortChange),
@@ -73,8 +80,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               ])
             };
           })
-        ]), 1040, ["height", "class", "value", "list", "size", "paginat", "loading", "options", "compons", "onSortChange", "onListEvents", "onSelect", "onRowClick", "onSelectionChange"]),
-        ((_c = unref(tableConfig).paginat) == null ? void 0 : _c.is) ? (openBlock(), createBlock(unref(Paging), mergeProps({ key: 0 }, unref(pagconfig), {
+        ]), 1040, ["height", "class", "scroll-selector", "value", "list", "size", "paginat", "loading", "options", "compons", "onSortChange", "onListEvents", "onSelect", "onRowClick", "onSelectionChange"])), [
+          [unref(vScroll), unref(scroll)]
+        ]),
+        ((_c = unref(paginat)) == null ? void 0 : _c.is) && !unref(paginat).scroll ? (openBlock(), createBlock(unref(Paging), mergeProps({ key: 0 }, unref(pagconfig), {
           class: unref(cs).z("paginat"),
           paginat: unref(paginat),
           total: unref(data).total,

package/dist/components/tablesv/src/column.cjs

@@ -192,13 +192,14 @@ function setSslot(obj, scope, emit, slots, props, index2) {
   return defaultDom(obj, scope, props, index2);
 }
 function defaultDom(obj, scope, props, index2) {
+  var _a;
   const table = props.table;
   let domValue = "";
   if (obj.type == "index") {
     if (obj.index) {
       domValue = obj.index(scope.$rowIndex, table.paginat);
     } else {
-      if (table.paginat && table.paginat.current && table.paginat.pageSize) {
+      if (((_a = table.paginat) == null ? void 0 : _a.is) && !table.paginat.scroll && table.paginat.current && table.paginat.pageSize) {
         domValue = (table.paginat.current - 1) * table.paginat.pageSize + scope.$rowIndex + 1;
       } else {
         domValue = scope.$rowIndex + 1;

package/dist/components/tablesv/src/column.js

@@ -190,13 +190,14 @@ function setSslot(obj, scope, emit, slots, props, index) {
   return defaultDom(obj, scope, props, index);
 }
 function defaultDom(obj, scope, props, index) {
+  var _a;
   const table = props.table;
   let domValue = "";
   if (obj.type == "index") {
     if (obj.index) {
       domValue = obj.index(scope.$rowIndex, table.paginat);
     } else {
-      if (table.paginat && table.paginat.current && table.paginat.pageSize) {
+      if (((_a = table.paginat) == null ? void 0 : _a.is) && !table.paginat.scroll && table.paginat.current && table.paginat.pageSize) {
         domValue = (table.paginat.current - 1) * table.paginat.pageSize + scope.$rowIndex + 1;
       } else {
         domValue = scope.$rowIndex + 1;

package/dist/css/index.css

@@ -540,6 +540,12 @@
 .tablesp-main.is-radio .el-table__header .el-table-column--selection .el-checkbox {
   display: none;
 }
+.tablesp-main.is-scroll .v-scroll-add {
+  text-align: center;
+  padding: 10px;
+  color: #999;
+  background-color: #eee;
+}
 .tablesp-paginat {
   overflow: hidden;
 }
@@ -912,11 +918,11 @@
 .lists-list-item {
   background-color: #fff;
   margin: 0 var(--lists-interval);
-  margin-top: calc(var(--lists-interval) * 2);
-}
-.lists-list-item:last-child {
   margin-bottom: calc(var(--lists-interval) * 2);
 }
+.lists-list-item:first-child {
+  margin-top: calc(var(--lists-interval) * 2);
+}
 .lists-list-item.is-active {
   background-color: rgb(250, 235, 215);
 }
@@ -939,6 +945,11 @@
   flex: 1;
   width: 100%;
 }
+.listsp-main.is-scroll .v-scroll-add {
+  text-align: center;
+  padding: 10px;
+  color: #999;
+}
 .listsp-paginat {
   overflow: hidden;
 }

package/dist/css/lists.css

@@ -35,11 +35,11 @@
 .lists-list-item {
   background-color: #fff;
   margin: 0 var(--lists-interval);
-  margin-top: calc(var(--lists-interval) * 2);
-}
-.lists-list-item:last-child {
   margin-bottom: calc(var(--lists-interval) * 2);
 }
+.lists-list-item:first-child {
+  margin-top: calc(var(--lists-interval) * 2);
+}
 .lists-list-item.is-active {
   background-color: rgb(250, 235, 215);
 }

package/dist/css/listsp.css

@@ -35,11 +35,11 @@
 .lists-list-item {
   background-color: #fff;
   margin: 0 var(--lists-interval);
-  margin-top: calc(var(--lists-interval) * 2);
-}
-.lists-list-item:last-child {
   margin-bottom: calc(var(--lists-interval) * 2);
 }
+.lists-list-item:first-child {
+  margin-top: calc(var(--lists-interval) * 2);
+}
 .lists-list-item.is-active {
   background-color: rgb(250, 235, 215);
 }
@@ -78,6 +78,11 @@
   flex: 1;
   width: 100%;
 }
+.listsp-main.is-scroll .v-scroll-add {
+  text-align: center;
+  padding: 10px;
+  color: #999;
+}
 .listsp-paginat {
   overflow: hidden;
 }

package/dist/css/page.css

@@ -234,6 +234,12 @@
 .tablesp-main.is-radio .el-table__header .el-table-column--selection .el-checkbox {
   display: none;
 }
+.tablesp-main.is-scroll .v-scroll-add {
+  text-align: center;
+  padding: 10px;
+  color: #999;
+  background-color: #eee;
+}
 .tablesp-paginat {
   overflow: hidden;
 }

package/dist/css/tablesp.css

@@ -60,6 +60,12 @@
 .tablesp-main.is-radio .el-table__header .el-table-column--selection .el-checkbox {
   display: none;
 }
+.tablesp-main.is-scroll .v-scroll-add {
+  text-align: center;
+  padding: 10px;
+  color: #999;
+  background-color: #eee;
+}
 .tablesp-paginat {
   overflow: hidden;
 }

package/dist/directives/scroll/index.cjs

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
 const vScroll = {
   name: "scroll",
   mounted(el, binding) {
@@ -9,7 +10,12 @@ const vScroll = {
     let is = true;
     let selector = el.getAttribute(`scroll-selector`);
     let distance = el.getAttribute(`scroll-distance`) || 10;
+    let loadText = "加载中...";
+    let endText = "无更多数据";
+    let cssname = "v-scroll-add";
+    let isf = false;
     if (typeof value === "function") {
+      isf = true;
       fun = value;
     } else {
       fun = value.onChange;
@@ -20,12 +26,27 @@ const vScroll = {
       if (value.distance) {
         distance = value.distance;
       }
+      if (value.loadText) {
+        loadText = value.loadText;
+      }
+      if (value.endText) {
+        endText = value.endText;
+      }
+      if (value.cssname) {
+        cssname = value.cssname;
+      }
     }
     let t;
     let tm = () => {
       clearTimeout(t);
       t = setTimeout(() => {
-        fun();
+        if (isf) {
+          fun();
+        } else {
+          if (!vue.toValue(value.load) && !vue.toValue(value.end)) {
+            fun();
+          }
+        }
       }, 100);
     };
     let dom = el;
@@ -36,25 +57,51 @@ const vScroll = {
         dom = selector;
       }
     }
-    if (is) {
+    if (dom && is) {
+      if (!isf) {
+        const adddmm = document.createElement("div");
+        adddmm.className = cssname;
+        adddmm.style.display = "none";
+        dom.appendChild(adddmm);
+        vue.watch(value.load, () => {
+          const v = vue.toValue(value.load);
+          if (v) {
+            adddmm.className = cssname + " " + cssname + "-load";
+            adddmm.style.display = "block";
+            adddmm.innerText = loadText;
+          } else {
+            adddmm.style.display = "none";
+          }
+        });
+        vue.watch(value.end, () => {
+          const v = vue.toValue(value.end);
+          if (v) {
+            setTimeout(() => {
+              adddmm.className = cssname + " " + cssname + "-end";
+              adddmm.style.display = "block";
+              adddmm.innerText = endText;
+            }, 100);
+          } else {
+            adddmm.style.display = "none";
+          }
+        });
+      }
       dom.style.overflowY = "auto";
-    }
-    dom.addEventListener(
-      "scroll",
-      function() {
-        if (is) {
+      dom.addEventListener(
+        "scroll",
+        function() {
           let d = this;
           const s = d.scrollHeight - d.scrollTop;
           const h = d.clientHeight;
           if (s - distance < h) {
             tm();
           }
+        },
+        {
+          passive: true
         }
-      },
-      {
-        passive: true
-      }
-    );
+      );
+    }
   }
 };
 exports.default = vScroll;

package/dist/directives/scroll/index.js

@@ -1,3 +1,4 @@
+import { toValue, watch } from "vue";
 const vScroll = {
   name: "scroll",
   mounted(el, binding) {
@@ -7,7 +8,12 @@ const vScroll = {
     let is = true;
     let selector = el.getAttribute(`scroll-selector`);
     let distance = el.getAttribute(`scroll-distance`) || 10;
+    let loadText = "加载中...";
+    let endText = "无更多数据";
+    let cssname = "v-scroll-add";
+    let isf = false;
     if (typeof value === "function") {
+      isf = true;
       fun = value;
     } else {
       fun = value.onChange;
@@ -18,12 +24,27 @@ const vScroll = {
       if (value.distance) {
         distance = value.distance;
       }
+      if (value.loadText) {
+        loadText = value.loadText;
+      }
+      if (value.endText) {
+        endText = value.endText;
+      }
+      if (value.cssname) {
+        cssname = value.cssname;
+      }
     }
     let t;
     let tm = () => {
       clearTimeout(t);
       t = setTimeout(() => {
-        fun();
+        if (isf) {
+          fun();
+        } else {
+          if (!toValue(value.load) && !toValue(value.end)) {
+            fun();
+          }
+        }
       }, 100);
     };
     let dom = el;
@@ -34,25 +55,51 @@ const vScroll = {
         dom = selector;
       }
     }
-    if (is) {
+    if (dom && is) {
+      if (!isf) {
+        const adddmm = document.createElement("div");
+        adddmm.className = cssname;
+        adddmm.style.display = "none";
+        dom.appendChild(adddmm);
+        watch(value.load, () => {
+          const v = toValue(value.load);
+          if (v) {
+            adddmm.className = cssname + " " + cssname + "-load";
+            adddmm.style.display = "block";
+            adddmm.innerText = loadText;
+          } else {
+            adddmm.style.display = "none";
+          }
+        });
+        watch(value.end, () => {
+          const v = toValue(value.end);
+          if (v) {
+            setTimeout(() => {
+              adddmm.className = cssname + " " + cssname + "-end";
+              adddmm.style.display = "block";
+              adddmm.innerText = endText;
+            }, 100);
+          } else {
+            adddmm.style.display = "none";
+          }
+        });
+      }
       dom.style.overflowY = "auto";
-    }
-    dom.addEventListener(
-      "scroll",
-      function() {
-        if (is) {
+      dom.addEventListener(
+        "scroll",
+        function() {
           let d = this;
           const s = d.scrollHeight - d.scrollTop;
           const h = d.clientHeight;
           if (s - distance < h) {
             tm();
           }
+        },
+        {
+          passive: true
         }
-      },
-      {
-        passive: true
-      }
-    );
+      );
+    }
   }
 };
 export {

package/dist/hooks/cssname/index.cjs

@@ -50,6 +50,7 @@ function getElSpace() {
   return namespace ? namespace + com.common : "";
 }
 const useCssName = (block) => {
+  const c = (name = "", blockSuffix = "", element = "", modifier = "") => getClassName(name, blockSuffix, element, modifier);
   const z = (blockSuffix = "", element = "", modifier = "") => getClassName(block, blockSuffix, element, modifier);
   const is = (name, state) => {
     return name && state ? `${com.state}${name}` : "";
@@ -68,6 +69,19 @@ const useCssName = (block) => {
     }
     return cls;
   };
+  const ec = (name = "", blockSuffix = "", element = "", modifier = "") => {
+    let cls = e() + name;
+    if (blockSuffix) {
+      cls += `${com.common}${blockSuffix}`;
+    }
+    if (element) {
+      cls += `${com.element}${element}`;
+    }
+    if (modifier) {
+      cls += `${com.modifier}${modifier}`;
+    }
+    return cls;
+  };
   const zis = (blockSuffix = "", modifier = "", state) => {
     return state ? z(blockSuffix, "", modifier) : "";
   };
@@ -93,9 +107,11 @@ const useCssName = (block) => {
   const vdm = (name) => `--${getName() + block + com.common + name}`;
   return {
     name: getName(),
+    c,
     z,
     e,
     el,
+    ec,
     is,
     zis,
     vo,

package/dist/hooks/cssname/index.d.ts

@@ -1,8 +1,10 @@
 export declare const useCssName: (block: string) => {
     name: string;
+    c: (name?: string, blockSuffix?: string, element?: string, modifier?: string) => string;
     z: (blockSuffix?: string, element?: string, modifier?: string) => string;
     e: () => string;
     el: (blockSuffix?: string, element?: string, modifier?: string) => string;
+    ec: (name?: string, blockSuffix?: string, element?: string, modifier?: string) => string;
     is: (name: string, state?: boolean) => string;
     zis: (blockSuffix?: string, modifier?: string, state?: boolean) => string;
     vo: (object: Record<string, string>) => Record<string, string>;

package/dist/hooks/cssname/index.js

@@ -48,6 +48,7 @@ function getElSpace() {
   return namespace ? namespace + com.common : "";
 }
 const useCssName = (block) => {
+  const c = (name = "", blockSuffix = "", element = "", modifier = "") => getClassName(name, blockSuffix, element, modifier);
   const z = (blockSuffix = "", element = "", modifier = "") => getClassName(block, blockSuffix, element, modifier);
   const is = (name, state) => {
     return name && state ? `${com.state}${name}` : "";
@@ -66,6 +67,19 @@ const useCssName = (block) => {
     }
     return cls;
   };
+  const ec = (name = "", blockSuffix = "", element = "", modifier = "") => {
+    let cls = e() + name;
+    if (blockSuffix) {
+      cls += `${com.common}${blockSuffix}`;
+    }
+    if (element) {
+      cls += `${com.element}${element}`;
+    }
+    if (modifier) {
+      cls += `${com.modifier}${modifier}`;
+    }
+    return cls;
+  };
   const zis = (blockSuffix = "", modifier = "", state) => {
     return state ? z(blockSuffix, "", modifier) : "";
   };
@@ -91,9 +105,11 @@ const useCssName = (block) => {
   const vdm = (name) => `--${getName() + block + com.common + name}`;
   return {
     name: getName(),
+    c,
     z,
     e,
     el,
+    ec,
     is,
     zis,
     vo,

package/dist/icons/index.css

@@ -1,16 +1,16 @@
 :root {
   --icon-svg-bar: url("data:image/svg+xml;utf8,%3Csvg id='icon-bar' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' %3E %3Cpath fill='currentColor' d='M128 544h768a32 32 0 1 0 0-64H128a32 32 0 0 0 0 64z' %3E%3C/path%3E %3C/svg%3E");
-  --icon-svg-below: url("data:image/svg+xml;utf8,%3Csvg id='icon-below' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' data-v-ea893728='' %3E %3Cpath fill='currentColor' d='M831.872 340.864 512 652.672 192.128 340.864a30.592 30.592 0 0 0-42.752 0 29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728 30.592 30.592 0 0 0-42.752 0z' %3E%3C/path%3E %3C/svg%3E");
-  --icon-svg-bottom-right: url("data:image/svg+xml;utf8,%3Csvg id='icon-bottom-right' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M352 768a32 32 0 1 0 0 64h448a32 32 0 0 0 32-32V352a32 32 0 0 0-64 0v416H352z'/%3E%3Cpath fill='currentColor' d='M777.344 822.656a32 32 0 0 0 45.312-45.312l-544-544a32 32 0 0 0-45.312 45.312l544 544z'/%3E%3C/svg%3E");
   --icon-svg-bicycle: url("data:image/svg+xml;utf8,%3Csvg id='icon-bicycle' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M256 832a128 128 0 1 0 0-256 128 128 0 0 0 0 256zm0 64a192 192 0 1 1 0-384 192 192 0 0 1 0 384z'/%3E%3Cpath fill='currentColor' d='M288 672h320q32 0 32 32t-32 32H288q-32 0-32-32t32-32z'/%3E%3Cpath fill='currentColor' d='M768 832a128 128 0 1 0 0-256 128 128 0 0 0 0 256zm0 64a192 192 0 1 1 0-384 192 192 0 0 1 0 384z'/%3E%3Cpath fill='currentColor' d='M480 192a32 32 0 0 1 0-64h160a32 32 0 0 1 31.04 24.256l96 384a32 32 0 0 1-62.08 15.488L615.04 192H480zM96 384a32 32 0 0 1 0-64h128a32 32 0 0 1 30.336 21.888l64 192a32 32 0 1 1-60.672 20.224L200.96 384H96z'/%3E%3Cpath fill='currentColor' d='m373.376 599.808-42.752-47.616 320-288 42.752 47.616z'/%3E%3C/svg%3E");
+  --icon-svg-bottom: url("data:image/svg+xml;utf8,%3Csvg id='icon-bottom' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M544 805.888V168a32 32 0 1 0-64 0v637.888L246.656 557.952a30.72 30.72 0 0 0-45.312 0 35.52 35.52 0 0 0 0 48.064l288 306.048a30.72 30.72 0 0 0 45.312 0l288-306.048a35.52 35.52 0 0 0 0-48 30.72 30.72 0 0 0-45.312 0L544 805.824z'/%3E%3C/svg%3E");
   --icon-svg-bottom-left: url("data:image/svg+xml;utf8,%3Csvg id='icon-bottom-left' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M256 768h416a32 32 0 1 1 0 64H224a32 32 0 0 1-32-32V352a32 32 0 0 1 64 0v416z'/%3E%3Cpath fill='currentColor' d='M246.656 822.656a32 32 0 0 1-45.312-45.312l544-544a32 32 0 0 1 45.312 45.312l-544 544z'/%3E%3C/svg%3E");
+  --icon-svg-below: url("data:image/svg+xml;utf8,%3Csvg id='icon-below' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' data-v-ea893728='' %3E %3Cpath fill='currentColor' d='M831.872 340.864 512 652.672 192.128 340.864a30.592 30.592 0 0 0-42.752 0 29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728 30.592 30.592 0 0 0-42.752 0z' %3E%3C/path%3E %3C/svg%3E");
+  --icon-svg-bottom-right: url("data:image/svg+xml;utf8,%3Csvg id='icon-bottom-right' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M352 768a32 32 0 1 0 0 64h448a32 32 0 0 0 32-32V352a32 32 0 0 0-64 0v416H352z'/%3E%3Cpath fill='currentColor' d='M777.344 822.656a32 32 0 0 0 45.312-45.312l-544-544a32 32 0 0 0-45.312 45.312l544 544z'/%3E%3C/svg%3E");
   --icon-svg-clear: url("data:image/svg+xml;utf8,%3Csvg id='icon-clear' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' data-v-ea893728='' %3E %3Cpath fill='currentColor' d='m466.752 512-90.496-90.496a32 32 0 0 1 45.248-45.248L512 466.752l90.496-90.496a32 32 0 1 1 45.248 45.248L557.248 512l90.496 90.496a32 32 0 1 1-45.248 45.248L512 557.248l-90.496 90.496a32 32 0 0 1-45.248-45.248L466.752 512z' %3E%3C/path%3E %3Cpath fill='currentColor' d='M512 896a384 384 0 1 0 0-768 384 384 0 0 0 0 768zm0 64a448 448 0 1 1 0-896 448 448 0 0 1 0 896z' %3E%3C/path%3E %3C/svg%3E");
-  --icon-svg-bottom: url("data:image/svg+xml;utf8,%3Csvg id='icon-bottom' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M544 805.888V168a32 32 0 1 0-64 0v637.888L246.656 557.952a30.72 30.72 0 0 0-45.312 0 35.52 35.52 0 0 0 0 48.064l288 306.048a30.72 30.72 0 0 0 45.312 0l288-306.048a35.52 35.52 0 0 0 0-48 30.72 30.72 0 0 0-45.312 0L544 805.824z'/%3E%3C/svg%3E");
   --icon-svg-close: url("data:image/svg+xml;utf8,%3Csvg id='icon-close' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill='currentColor' d='M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z' %3E%3C/path%3E %3C/svg%3E");
   --icon-svg-left: url("data:image/svg+xml;utf8,%3Csvg id='icon-left' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' data-v-ea893728='' %3E %3Cpath fill='currentColor' d='M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.592 30.592 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0z' %3E%3C/path%3E %3C/svg%3E");
-  --icon-svg-right: url("data:image/svg+xml;utf8,%3Csvg id='icon-right' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' %3E %3Cpath fill='currentColor' d='M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z' %3E%3C/path%3E %3C/svg%3E");
-  --icon-svg-edit: url("data:image/svg+xml;utf8,%3Csvg id='icon-edit' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill='currentColor' d='M832 512a32 32 0 1 1 64 0v352a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32h352a32 32 0 0 1 0 64H192v640h640V512z' %3E%3C/path%3E %3Cpath fill='currentColor' d='m469.952 554.24 52.8-7.552L847.104 222.4a32 32 0 1 0-45.248-45.248L477.44 501.44l-7.552 52.8zm422.4-422.4a96 96 0 0 1 0 135.808l-331.84 331.84a32 32 0 0 1-18.112 9.088L436.8 623.68a32 32 0 0 1-36.224-36.224l15.104-105.6a32 32 0 0 1 9.024-18.112l331.904-331.84a96 96 0 0 1 135.744 0z' %3E%3C/path%3E %3C/svg%3E");
   --icon-svg-frame: url("data:image/svg+xml;utf8,%3Csvg id='icon-frame' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' data-v-ea893728='' %3E %3Cpath fill='currentColor' d='m160 96.064 192 .192a32 32 0 0 1 0 64l-192-.192V352a32 32 0 0 1-64 0V96h64v.064zm0 831.872V928H96V672a32 32 0 1 1 64 0v191.936l192-.192a32 32 0 1 1 0 64l-192 .192zM864 96.064V96h64v256a32 32 0 1 1-64 0V160.064l-192 .192a32 32 0 1 1 0-64l192-.192zm0 831.872-192-.192a32 32 0 0 1 0-64l192 .192V672a32 32 0 1 1 64 0v256h-64v-.064z' %3E%3C/path%3E %3C/svg%3E");
+  --icon-svg-edit: url("data:image/svg+xml;utf8,%3Csvg id='icon-edit' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill='currentColor' d='M832 512a32 32 0 1 1 64 0v352a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32h352a32 32 0 0 1 0 64H192v640h640V512z' %3E%3C/path%3E %3Cpath fill='currentColor' d='m469.952 554.24 52.8-7.552L847.104 222.4a32 32 0 1 0-45.248-45.248L477.44 501.44l-7.552 52.8zm422.4-422.4a96 96 0 0 1 0 135.808l-331.84 331.84a32 32 0 0 1-18.112 9.088L436.8 623.68a32 32 0 0 1-36.224-36.224l15.104-105.6a32 32 0 0 1 9.024-18.112l331.904-331.84a96 96 0 0 1 135.744 0z' %3E%3C/path%3E %3C/svg%3E");
+  --icon-svg-right: url("data:image/svg+xml;utf8,%3Csvg id='icon-right' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' %3E %3Cpath fill='currentColor' d='M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z' %3E%3C/path%3E %3C/svg%3E");
   --icon-svg-star: url("data:image/svg+xml;utf8,%3Csvg id='icon-star' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' data-v-ea893728='' %3E %3Cpath fill='currentColor' d='m512 747.84 228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72L512 747.84zM313.6 924.48a70.4 70.4 0 0 1-102.144-74.24l37.888-220.928L88.96 472.96A70.4 70.4 0 0 1 128 352.896l221.76-32.256 99.2-200.96a70.4 70.4 0 0 1 126.208 0l99.2 200.96 221.824 32.256a70.4 70.4 0 0 1 39.04 120.064L774.72 629.376l37.888 220.928a70.4 70.4 0 0 1-102.144 74.24L512 820.096l-198.4 104.32z' %3E%3C/path%3E %3C/svg%3E");
 }
 .icon-bar  {
@@ -23,62 +23,62 @@
   mask-size: 100% 100%;
   color: inherit;
 }
-.icon-below  {
+.icon-bicycle  {
   height: 1em;
   width: 1em;
   background-color: currentColor;
-  -webkit-mask: var(--icon-svg-below) no-repeat;
-  mask: var(--icon-svg-below) no-repeat;
+  -webkit-mask: var(--icon-svg-bicycle) no-repeat;
+  mask: var(--icon-svg-bicycle) no-repeat;
   -webkit-mask-size: 100% 100%;
   mask-size: 100% 100%;
   color: inherit;
 }
-.icon-bottom-right  {
+.icon-bottom  {
   height: 1em;
   width: 1em;
   background-color: currentColor;
-  -webkit-mask: var(--icon-svg-bottom-right) no-repeat;
-  mask: var(--icon-svg-bottom-right) no-repeat;
+  -webkit-mask: var(--icon-svg-bottom) no-repeat;
+  mask: var(--icon-svg-bottom) no-repeat;
   -webkit-mask-size: 100% 100%;
   mask-size: 100% 100%;
   color: inherit;
 }
-.icon-bicycle  {
+.icon-bottom-left  {
   height: 1em;
   width: 1em;
   background-color: currentColor;
-  -webkit-mask: var(--icon-svg-bicycle) no-repeat;
-  mask: var(--icon-svg-bicycle) no-repeat;
+  -webkit-mask: var(--icon-svg-bottom-left) no-repeat;
+  mask: var(--icon-svg-bottom-left) no-repeat;
   -webkit-mask-size: 100% 100%;
   mask-size: 100% 100%;
   color: inherit;
 }
-.icon-bottom-left  {
+.icon-below  {
   height: 1em;
   width: 1em;
   background-color: currentColor;
-  -webkit-mask: var(--icon-svg-bottom-left) no-repeat;
-  mask: var(--icon-svg-bottom-left) no-repeat;
+  -webkit-mask: var(--icon-svg-below) no-repeat;
+  mask: var(--icon-svg-below) no-repeat;
   -webkit-mask-size: 100% 100%;
   mask-size: 100% 100%;
   color: inherit;
 }
-.icon-clear  {
+.icon-bottom-right  {
   height: 1em;
   width: 1em;
   background-color: currentColor;
-  -webkit-mask: var(--icon-svg-clear) no-repeat;
-  mask: var(--icon-svg-clear) no-repeat;
+  -webkit-mask: var(--icon-svg-bottom-right) no-repeat;
+  mask: var(--icon-svg-bottom-right) no-repeat;
   -webkit-mask-size: 100% 100%;
   mask-size: 100% 100%;
   color: inherit;
 }
-.icon-bottom  {
+.icon-clear  {
   height: 1em;
   width: 1em;
   background-color: currentColor;
-  -webkit-mask: var(--icon-svg-bottom) no-repeat;
-  mask: var(--icon-svg-bottom) no-repeat;
+  -webkit-mask: var(--icon-svg-clear) no-repeat;
+  mask: var(--icon-svg-clear) no-repeat;
   -webkit-mask-size: 100% 100%;
   mask-size: 100% 100%;
   color: inherit;
@@ -103,12 +103,12 @@
   mask-size: 100% 100%;
   color: inherit;
 }
-.icon-right  {
+.icon-frame  {
   height: 1em;
   width: 1em;
   background-color: currentColor;
-  -webkit-mask: var(--icon-svg-right) no-repeat;
-  mask: var(--icon-svg-right) no-repeat;
+  -webkit-mask: var(--icon-svg-frame) no-repeat;
+  mask: var(--icon-svg-frame) no-repeat;
   -webkit-mask-size: 100% 100%;
   mask-size: 100% 100%;
   color: inherit;
@@ -123,12 +123,12 @@
   mask-size: 100% 100%;
   color: inherit;
 }
-.icon-frame  {
+.icon-right  {
   height: 1em;
   width: 1em;
   background-color: currentColor;
-  -webkit-mask: var(--icon-svg-frame) no-repeat;
-  mask: var(--icon-svg-frame) no-repeat;
+  -webkit-mask: var(--icon-svg-right) no-repeat;
+  mask: var(--icon-svg-right) no-repeat;
   -webkit-mask-size: 100% 100%;
   mask-size: 100% 100%;
   color: inherit;