@fangzhongya/fang-ui 0.0.53 → 0.0.55

package/dist/components/tables/common/pagin.js

@@ -70,6 +70,7 @@ const useInit = (props2, emit, refTable, isEl) => {
   const pagconfig = ref(mpagconfig);
   const paginat = reactive({
     front: false,
+    scroll: false,
     current: 1,
     pageSize: mpagconfig.pageSize,
     order: "",
@@ -79,6 +80,7 @@ const useInit = (props2, emit, refTable, isEl) => {
     total: 0,
     list: [],
     front: false,
+    scroll: false,
     current: 1,
     pageSize: mpagconfig.pageSize,
     order: "",
@@ -167,6 +169,7 @@ const useInit = (props2, emit, refTable, isEl) => {
     }
     const pagin = config.paginat ?? {};
     paginat.front = pagin.front || false;
+    paginat.scroll = pagin.scroll || false;
     paginat.pageSize = pagin.size || mpagconfig.pageSize;
     pagconfig.value = Object.assign({}, mpagconfig, pagin.config || {});
     tableConfig.value = config;
@@ -285,9 +288,9 @@ const useInit = (props2, emit, refTable, isEl) => {
   }
   function toggleCrossPage() {
     var _a2;
-    const datas = data.list;
     const cross = (_a2 = tableConfig.value.config) == null ? void 0 : _a2.crossPage;
-    if (cross) {
+    if (cross && !paginat.scroll) {
+      const datas = data.list;
       const vs = getCrossPageValue();
       if (typeof cross == "string") {
         const iss = vs.map((o) => o[cross]);
@@ -314,7 +317,7 @@ const useInit = (props2, emit, refTable, isEl) => {
   }
   function getSelectionValue(arr, i) {
     var _a2;
-    if ((_a2 = tableConfig.value.config) == null ? void 0 : _a2.crossPage) {
+    if (((_a2 = tableConfig.value.config) == null ? void 0 : _a2.crossPage) && !paginat.scroll) {
       return getCrossPageValue(arr, i);
     } else {
       return arr;
@@ -330,13 +333,13 @@ const useInit = (props2, emit, refTable, isEl) => {
       emit("selection", getSelectionValue(arr, paginat.current));
     }
   }
-  function onRowClick(row, obj) {
+  function onRowClick(row) {
     var _a2, _b2, _c, _d;
     if (!((_a2 = tableConfig.value.config) == null ? void 0 : _a2.noRowSelect)) {
       const selectable = (_b2 = tableConfig.value.config) == null ? void 0 : _b2.selectable;
       if (selectable) {
-        const index = data.list.findIndex((obj2) => {
-          obj2 === row;
+        const index = data.list.findIndex((obj) => {
+          obj === row;
         });
         if (selectable(row, index)) {
           if ((_c = tableConfig.value.config) == null ? void 0 : _c.isradio) {
@@ -524,7 +527,11 @@ const useInit = (props2, emit, refTable, isEl) => {
       if (((_a3 = tableConfig.value.paginat) == null ? void 0 : _a3.is) && dlist.length > paginat.pageSize) {
         dlist = dlist.slice(0, paginat.pageSize);
       }
-      data.list = defaultSort(dlist);
+      if (paginat.current != 1 && paginat.scroll) {
+        data.list.push(...dlist);
+      } else {
+        data.list = defaultSort(dlist);
+      }
       data.total = (list == null ? void 0 : list.total) || dlist.length;
       toggleCrossPage();
       loading.value = false;
@@ -578,6 +585,14 @@ const useInit = (props2, emit, refTable, isEl) => {
     var _a2;
     return ((_a2 = tableConfig.value.config) == null ? void 0 : _a2.height) ?? "auto";
   });
+  const onScroll = () => {
+    if (paginat.scroll) {
+      if (data.total && data.pageSize * data.current < data.total) {
+        paginat.current++;
+        getData();
+      }
+    }
+  };
   return {
     height,
     tableConfig,
@@ -589,6 +604,7 @@ const useInit = (props2, emit, refTable, isEl) => {
     clean,
     empty,
     loading,
+    onScroll,
     onSortChange,
     onListEvents,
     onSelect,

package/dist/components/tables/index.css

@@ -26,8 +26,5 @@
 }
 .tables-table.is-absolute {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
 }

package/dist/components/tables/index.scss

@@ -12,10 +12,7 @@ $tables: 'tables';
 	&-table {
 		&.#{is('absolute')} {
 			position: absolute;
-			top: 0;
-			right: 0;
-			bottom: 0;
-			left: 0;
+			inset: 0;
 		}
 		// flex: 1;
 		// width: 100%;

package/dist/components/tablesp/index.css

@@ -26,10 +26,7 @@
 }
 .tables-table.is-absolute {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
 }
 
 .paging {

package/dist/css/index.css

@@ -401,97 +401,97 @@
   height: 100%;
 }
 
-.lists-div .lists-table {
+.menus .menu-li-item {
+  display: flex;
+  align-items: center;
+}
+.menus .menu-li-icon {
+  margin-right: 10px;
+}
+
+.list-div .list-table {
   width: 100%;
   height: 100%;
 }
-.lists-div .lists-table td {
+.list-div .list-table td {
   text-align: left;
 }
-.lists-div .lists-table th {
+.list-div .list-table th {
   font-weight: initial;
 }
-.lists-div .lists-table .is-whole .lists-table-auto {
+.list-div .list-table .is-whole .list-table-auto {
   width: 100%;
 }
-.lists-div .lists-table .is-whole .lists-table-value {
+.list-div .list-table .is-whole .list-table-value {
   width: 100%;
   display: block;
 }
-.lists-div .lists-table .lists-table-td,
-.lists-div .lists-table .lists-table-th {
+.list-div .list-table .list-table-td,
+.list-div .list-table .list-table-th {
   padding: 6px;
 }
-.lists-div .lists-table .lists-table-auto {
+.list-div .list-table .list-table-auto {
   display: inline-flex;
   align-items: center;
 }
-.lists-div .lists-table .lists-table-auto .lists-table-label {
+.list-div .list-table .list-table-auto .list-table-label {
   white-space: nowrap;
 }
-.lists-div .lists-table .lists-table-th {
+.list-div .list-table .list-table-th {
   text-align: left;
 }
-.lists-div .lists-table.right .lists-table-th {
+.list-div .list-table.right .list-table-th {
   text-align: right;
 }
-.lists-div .lists-table.center .lists-table-th {
+.list-div .list-table.center .list-table-th {
   text-align: center;
 }
-.lists-div .lists-table.auto .lists-table-th {
+.list-div .list-table.auto .list-table-th {
   padding-right: 0;
 }
-.lists-div .lists-table.top .lists-table-th {
+.list-div .list-table.top .list-table-th {
   padding-bottom: 0;
 }
-.lists-div .lists-table.is-aliquots {
+.list-div .list-table.is-aliquots {
   table-layout: fixed;
 }
-.lists-div .lists-table.is-border {
-  border-right: 1px solid var(--lists-border-color);
-  border-top: 1px solid var(--lists-border-color);
-  border-bottom: 1px solid var(--lists-border-color);
+.list-div .list-table.is-border {
+  border-right: 1px solid var(--list-border-color);
+  border-top: 1px solid var(--list-border-color);
+  border-bottom: 1px solid var(--list-border-color);
 }
-.lists-div .lists-table.is-border > tr > td {
-  border-bottom: 1px solid var(--lists-border-color);
-  border-left: 1px solid var(--lists-border-color);
+.list-div .list-table.is-border > tr > td {
+  border-bottom: 1px solid var(--list-border-color);
+  border-left: 1px solid var(--list-border-color);
 }
-.lists-div .lists-table.is-border > tr > td:last-child {
-  border-right: 1px solid var(--lists-border-color);
+.list-div .list-table.is-border > tr > td:last-child {
+  border-right: 1px solid var(--list-border-color);
 }
-.lists-div .lists-table.is-border > tr > th {
-  border-left: 1px solid var(--lists-border-color);
-  border-bottom: 1px solid var(--lists-border-color);
+.list-div .list-table.is-border > tr > th {
+  border-left: 1px solid var(--list-border-color);
+  border-bottom: 1px solid var(--list-border-color);
 }
-.lists-div .lists-table.is-border > tr > th:last-child {
-  border-right: 1px solid var(--lists-border-color);
+.list-div .list-table.is-border > tr > th:last-child {
+  border-right: 1px solid var(--list-border-color);
 }
-.lists-div .lists-table.is-border > tr:last-child > td {
+.list-div .list-table.is-border > tr:last-child > td {
   border-bottom: 0;
 }
-.lists-div .lists-table.is-border > tr:last-child > th {
+.list-div .list-table.is-border > tr:last-child > th {
   border-bottom: 0;
 }
-.lists-div .lists-table.is-border.top > tr > th {
+.list-div .list-table.is-border.top > tr > th {
   border-bottom: 0;
 }
-.lists-div .lists-table .lists-com {
+.list-div .list-table .list-com {
   display: flex;
   align-items: center;
 }
-.lists-div .lists-table .lists-com-img {
+.list-div .list-table .list-com-img {
   width: 50px;
   height: 50px;
 }
 
-.menus .menu-li-item {
-  display: flex;
-  align-items: center;
-}
-.menus .menu-li-icon {
-  margin-right: 10px;
-}
-
 .tables {
   width: 100%;
   min-height: 100px;
@@ -506,10 +506,7 @@
 }
 .tables-table.is-absolute {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
 }
 
 .paging {
@@ -892,6 +889,63 @@
   height: 100%;
 }
 
+.lists {
+  width: 100%;
+  min-height: 100px;
+  position: relative;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background-color: #eee;
+}
+.lists-list {
+  padding: 0 var(--lists-interval);
+}
+.lists-list.is-absolute {
+  position: absolute;
+  inset: 0;
+  overflow-y: auto;
+}
+.lists-list--column .lists-list-item {
+  display: inline-block;
+}
+.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.is-active {
+  background-color: rgb(250, 235, 215);
+}
+.lists-list-item.is-selected {
+  background-color: rgb(215, 250, 224);
+}
+.lists-list-item .el-card {
+  background-color: transparent;
+}
+
+.listsp {
+  width: 100%;
+  height: var(--listsp-height);
+  display: flex;
+  flex-direction: column;
+}
+.listsp-main {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  width: 100%;
+}
+.listsp-paginat {
+  overflow: hidden;
+}
+.listsp-paginat .el-pagination {
+  justify-content: flex-end;
+}
+
 .tabless {
   width: 100%;
   height: var(--tabless-height);

package/dist/css/list.css

@@ -0,0 +1,96 @@
+:root {
+  --on: rgb(91, 189, 246);
+  --color-primary: #409eff;
+  --bag-primary: #409eff;
+  --bag-primary-text: #fff;
+  --border: #eee;
+  --layout-panel-gap: 10px;
+  --layout-panel-padding: 20px;
+  --layout-form-item-padding-right: var(
+  	--layout-panel-gap
+  );
+  --g-main-bg: var(--bg-color-page);
+}
+
+.list-div .list-table {
+  width: 100%;
+  height: 100%;
+}
+.list-div .list-table td {
+  text-align: left;
+}
+.list-div .list-table th {
+  font-weight: initial;
+}
+.list-div .list-table .is-whole .list-table-auto {
+  width: 100%;
+}
+.list-div .list-table .is-whole .list-table-value {
+  width: 100%;
+  display: block;
+}
+.list-div .list-table .list-table-td,
+.list-div .list-table .list-table-th {
+  padding: 6px;
+}
+.list-div .list-table .list-table-auto {
+  display: inline-flex;
+  align-items: center;
+}
+.list-div .list-table .list-table-auto .list-table-label {
+  white-space: nowrap;
+}
+.list-div .list-table .list-table-th {
+  text-align: left;
+}
+.list-div .list-table.right .list-table-th {
+  text-align: right;
+}
+.list-div .list-table.center .list-table-th {
+  text-align: center;
+}
+.list-div .list-table.auto .list-table-th {
+  padding-right: 0;
+}
+.list-div .list-table.top .list-table-th {
+  padding-bottom: 0;
+}
+.list-div .list-table.is-aliquots {
+  table-layout: fixed;
+}
+.list-div .list-table.is-border {
+  border-right: 1px solid var(--list-border-color);
+  border-top: 1px solid var(--list-border-color);
+  border-bottom: 1px solid var(--list-border-color);
+}
+.list-div .list-table.is-border > tr > td {
+  border-bottom: 1px solid var(--list-border-color);
+  border-left: 1px solid var(--list-border-color);
+}
+.list-div .list-table.is-border > tr > td:last-child {
+  border-right: 1px solid var(--list-border-color);
+}
+.list-div .list-table.is-border > tr > th {
+  border-left: 1px solid var(--list-border-color);
+  border-bottom: 1px solid var(--list-border-color);
+}
+.list-div .list-table.is-border > tr > th:last-child {
+  border-right: 1px solid var(--list-border-color);
+}
+.list-div .list-table.is-border > tr:last-child > td {
+  border-bottom: 0;
+}
+.list-div .list-table.is-border > tr:last-child > th {
+  border-bottom: 0;
+}
+.list-div .list-table.is-border.top > tr > th {
+  border-bottom: 0;
+}
+.list-div .list-table .list-com {
+  display: flex;
+  align-items: center;
+}
+.list-div .list-table .list-com-img {
+  width: 50px;
+  height: 50px;
+}

package/dist/css/lists.css

@@ -12,85 +12,40 @@
   --g-main-bg: var(--bg-color-page);
 }
 
-.lists-div .lists-table {
+.lists {
   width: 100%;
-  height: 100%;
-}
-.lists-div .lists-table td {
-  text-align: left;
-}
-.lists-div .lists-table th {
-  font-weight: initial;
-}
-.lists-div .lists-table .is-whole .lists-table-auto {
-  width: 100%;
-}
-.lists-div .lists-table .is-whole .lists-table-value {
-  width: 100%;
-  display: block;
-}
-.lists-div .lists-table .lists-table-td,
-.lists-div .lists-table .lists-table-th {
-  padding: 6px;
-}
-.lists-div .lists-table .lists-table-auto {
-  display: inline-flex;
-  align-items: center;
-}
-.lists-div .lists-table .lists-table-auto .lists-table-label {
-  white-space: nowrap;
-}
-.lists-div .lists-table .lists-table-th {
-  text-align: left;
-}
-.lists-div .lists-table.right .lists-table-th {
-  text-align: right;
-}
-.lists-div .lists-table.center .lists-table-th {
-  text-align: center;
-}
-.lists-div .lists-table.auto .lists-table-th {
-  padding-right: 0;
-}
-.lists-div .lists-table.top .lists-table-th {
-  padding-bottom: 0;
-}
-.lists-div .lists-table.is-aliquots {
-  table-layout: fixed;
-}
-.lists-div .lists-table.is-border {
-  border-right: 1px solid var(--lists-border-color);
-  border-top: 1px solid var(--lists-border-color);
-  border-bottom: 1px solid var(--lists-border-color);
-}
-.lists-div .lists-table.is-border > tr > td {
-  border-bottom: 1px solid var(--lists-border-color);
-  border-left: 1px solid var(--lists-border-color);
+  min-height: 100px;
+  position: relative;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background-color: #eee;
 }
-.lists-div .lists-table.is-border > tr > td:last-child {
-  border-right: 1px solid var(--lists-border-color);
+.lists-list {
+  padding: 0 var(--lists-interval);
 }
-.lists-div .lists-table.is-border > tr > th {
-  border-left: 1px solid var(--lists-border-color);
-  border-bottom: 1px solid var(--lists-border-color);
+.lists-list.is-absolute {
+  position: absolute;
+  inset: 0;
+  overflow-y: auto;
 }
-.lists-div .lists-table.is-border > tr > th:last-child {
-  border-right: 1px solid var(--lists-border-color);
+.lists-list--column .lists-list-item {
+  display: inline-block;
 }
-.lists-div .lists-table.is-border > tr:last-child > td {
-  border-bottom: 0;
+.lists-list-item {
+  background-color: #fff;
+  margin: 0 var(--lists-interval);
+  margin-top: calc(var(--lists-interval) * 2);
 }
-.lists-div .lists-table.is-border > tr:last-child > th {
-  border-bottom: 0;
+.lists-list-item:last-child {
+  margin-bottom: calc(var(--lists-interval) * 2);
 }
-.lists-div .lists-table.is-border.top > tr > th {
-  border-bottom: 0;
+.lists-list-item.is-active {
+  background-color: rgb(250, 235, 215);
 }
-.lists-div .lists-table .lists-com {
-  display: flex;
-  align-items: center;
+.lists-list-item.is-selected {
+  background-color: rgb(215, 250, 224);
 }
-.lists-div .lists-table .lists-com-img {
-  width: 50px;
-  height: 50px;
+.lists-list-item .el-card {
+  background-color: transparent;
 }

package/dist/css/listsp.css

@@ -0,0 +1,86 @@
+:root {
+  --on: rgb(91, 189, 246);
+  --color-primary: #409eff;
+  --bag-primary: #409eff;
+  --bag-primary-text: #fff;
+  --border: #eee;
+  --layout-panel-gap: 10px;
+  --layout-panel-padding: 20px;
+  --layout-form-item-padding-right: var(
+  	--layout-panel-gap
+  );
+  --g-main-bg: var(--bg-color-page);
+}
+
+.lists {
+  width: 100%;
+  min-height: 100px;
+  position: relative;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background-color: #eee;
+}
+.lists-list {
+  padding: 0 var(--lists-interval);
+}
+.lists-list.is-absolute {
+  position: absolute;
+  inset: 0;
+  overflow-y: auto;
+}
+.lists-list--column .lists-list-item {
+  display: inline-block;
+}
+.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.is-active {
+  background-color: rgb(250, 235, 215);
+}
+.lists-list-item.is-selected {
+  background-color: rgb(215, 250, 224);
+}
+.lists-list-item .el-card {
+  background-color: transparent;
+}
+
+.paging {
+  padding: 10px;
+}
+.paging-slot {
+  padding-left: 10px;
+  font-size: 14px;
+  font-weight: 400;
+  color: #9b9b9b;
+  white-space: pre-wrap;
+}
+.paging .el-pagination__total {
+  font-size: 14px;
+  font-weight: 400;
+  color: #9b9b9b;
+}
+
+.listsp {
+  width: 100%;
+  height: var(--listsp-height);
+  display: flex;
+  flex-direction: column;
+}
+.listsp-main {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  width: 100%;
+}
+.listsp-paginat {
+  overflow: hidden;
+}
+.listsp-paginat .el-pagination {
+  justify-content: flex-end;
+}