bl-common-vue3 3.8.82 → 3.8.83

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bl-common-vue3",
-  "version": "3.8.82",
+  "version": "3.8.83",
   "main": "index.js",
   "module": "index.js",
   "description": "bailing vue3 common components lib",

package/src/components/ColumnSetting/index.vue

@@ -4,6 +4,7 @@
     :visible="visible"
     :destroyOnClose="true"
     :width="1200"
+    wrapClassName="column-setting-drawer-wrap"
     :body-style="{
       paddingBottom: '80px',
       boxSizing: 'border-box',
@@ -17,8 +18,8 @@
         <a-button type="primary" ghost @click="restoreDefault">{{ t('ColumnSetting.index.391089-1') }}</a-button>
       </a-space>
     </template>
-    <div class="setting-content">
-      <div class="fake-table">
+    <div class="setting-content beauty-scroller-bar">
+      <div class="fake-table" :style="{ minWidth: tableMinWidth }">
         <div class="fake-table-tr fake-table-title">
           <div class="draggable-icon-box"></div>
           <div class="column" :style="columnStyle('name')">{{ t('ColumnSetting.index.391089-2') }}</div>
@@ -260,6 +261,14 @@ export default defineComponent({
       loadLanguageAsync(newLang);
     });
 
+    const tableMinWidth = computed(() => {
+      let width = 900;
+      if (props.hasExportSetting) width += 100;
+      if (props.hasSearchSetting) width += 100;
+      if (props.hasCountsSetting) width += 100;
+      return `${width}px`;
+    });
+
     const columnStyle = computed(() => {
       return (field) => {
         let _style = {
@@ -287,6 +296,7 @@ export default defineComponent({
       handleClose,
       onSubmit,
       restoreDefault,
+      tableMinWidth,
       columnStyle,
       isSystemAdmin
     };
@@ -303,6 +313,11 @@ export default defineComponent({
 .fake-table {
   border: 1px solid #f0f0f0;
 }
+.setting-content {
+  width: 100%;
+  overflow-x: auto;
+  overflow-y: visible;
+}
 .fake-table-title {
   background: #fafafa;
   position: sticky;
@@ -341,4 +356,66 @@ export default defineComponent({
   justify-content: space-between;
   align-items: center;
 }
+
+:global(.column-setting-drawer-wrap .ant-drawer-content-wrapper) {
+  max-width: 100vw;
+}
+
+@media (max-width: 767px) {
+  :global(.column-setting-drawer-wrap .ant-drawer-body) {
+    padding: 12px 8px 72px !important;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+
+  :global(.column-setting-drawer-wrap .ant-drawer-header) {
+    padding: 12px;
+  }
+
+  :global(.column-setting-drawer-wrap .ant-drawer-title) {
+    min-width: 0;
+  }
+
+  :global(.column-setting-drawer-wrap .ant-drawer-extra) {
+    margin-left: 8px;
+  }
+
+  .setting-content {
+    padding-bottom: 6px;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .fake-table-title {
+    top: -12px;
+  }
+
+  .fake-table-tr {
+    min-height: 42px;
+
+    .column {
+      padding: 0 8px;
+      white-space: nowrap;
+    }
+  }
+
+  .drawer-footer {
+    padding: 8px;
+    gap: 8px;
+    align-items: stretch;
+
+    > div {
+      min-width: 0;
+    }
+
+    .text-right {
+      display: flex;
+      justify-content: flex-end;
+    }
+
+    :deep(.ant-btn) {
+      padding-left: 8px;
+      padding-right: 8px;
+    }
+  }
+}
 </style>