fix(grid): [grid] change custom components to tinyvue components to a… (

#1724) * fix(grid): [grid] change custom components to tinyvue components to adapt difference theme * Update package.json
opentiny · Jul 7, 2024 · 2c7685e · 2c7685e
1 parent 8a324c9
commit 2c7685e
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 111 deletions.
diff --git a/packages/theme/package.json b/packages/theme/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-theme",
-  "version": "3.17.2",
+  "version": "3.17.3",
   "description": "An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.",
   "main": "index.css",
   "homepage": "https://opentiny.design/tiny-vue",

diff --git a/packages/theme/src/grid/custom.less b/packages/theme/src/grid/custom.less
@@ -21,70 +21,17 @@
   width: 100%;
 
   & &__tabs {
-    .@{grid-custom-prefix-cls}__tabs-head {
-      white-space: nowrap;
+    .@{css-prefix}tabs__content {
       margin: 0;
-      overflow: hidden;
-      height: var(--ti-grid-custom-head-height);
-      width: 100%;
-      position: relative;
-
-      ul {
-        height: var(--ti-grid-custom-head-height);
-        border-bottom: 1px solid var(--ti-grid-border-color);
-        list-style: none;
-        box-sizing: border-box;
-
-        li {
-          float: left;
-          margin-right: -1px;
-          cursor: pointer;
-          line-height: 28px;
-          padding: 0 20px;
-          color: var(--ti-grid-text-color);
-          min-width: 90px;
-          height: var(--ti-grid-custom-head-height);
-          line-height: var(--ti-grid-custom-head-height);
-
-          &.@{grid-custom-prefix-cls}__tabs-selected {
-            color: var(--ti-grid-primary-color);
-            border-bottom: 3px solid var(--ti-grid-primary-color);
-            font-weight: 700;
-          }
-        }
-      }
     }
-
     .@{grid-custom-prefix-cls}__tabs-body {
       overflow-y: auto;
       border: 0;
       padding: 12px 0;
 
       .tabs-body-item {
         .@{grid-custom-prefix-cls}__alert {
-          position: relative;
-          border: 1px solid;
-          border-radius: var(--ti-grid-border-radius);
-          height: var(--ti-grid-custom-body-list-height);
-          line-height: var(--ti-grid-custom-body-list-height);
-          padding-left: 8px;
-          overflow: hidden;
-          background: var(--ti-grid-row-hover-background-color);
-          border-color: #91d5ff;
-          color: var(--ti-grid-text-color);
-          display: flex;
-          align-items: center;
-
-          .@{svg-prefix-cls} {
-            font-size: var(--ti-common-font-size-3);
-            fill: var(--ti-grid-primary-color);
-          }
-
-          p {
-            display: inline-block;
-            line-height: 16px;
-            padding-left: 8px;
-          }
+          margin: 0;
         }
 
         .@{grid-custom-prefix-cls}__setting {

diff --git a/packages/vue/src/grid-toolbar/package.json b/packages/vue/src/grid-toolbar/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-grid-toolbar",
-  "version": "3.17.0",
+  "version": "3.17.1",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -40,9 +40,11 @@
     "@opentiny/vue-dropdown-item": "workspace:~",
     "@opentiny/vue-tooltip": "workspace:~",
     "@opentiny/vue-theme": "workspace:~",
+    "@opentiny/vue-tabs": "workspace:~",
+    "@opentiny/vue-tab-item": "workspace:~",
     "@opentiny/vue-input": "workspace:~",
     "@opentiny/vue-popover": "workspace:~",
     "@opentiny/vue-tree": "workspace:~"
   },
   "license": "MIT"
-}
+}
diff --git a/packages/vue/src/grid-toolbar/src/custom.vue b/packages/vue/src/grid-toolbar/src/custom.vue
@@ -1,14 +1,14 @@
 <!--
- * Copyright (c) 2022 - present TinyVue Authors.
- * Copyright (c) 2022 - 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.
- *
- -->
+* Copyright (c) 2022 - present TinyVue Authors.
+* Copyright (c) 2022 - 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.
+*
+-->
 <template>
   <tiny-modal
     width="600"
@@ -20,37 +20,14 @@
   >
     <template #default>
       <div class="tiny-grid-custom tiny-grid__wrapper" v-if="visible">
-        <div class="tiny-grid-custom__tabs">
-          <div class="tiny-grid-custom__tabs-head">
-            <ul>
-              <li
-                @click="activeName = 'base'"
-                :class="{
-                  'tiny-grid-custom__tabs-selected': activeName === 'base'
-                }"
-              >
-                <span>{{ t('ui.grid.individuation.tabs.base.title') }}</span>
-              </li>
-              <li
-                v-if="other"
-                @click="activeName = 'other'"
-                :class="{
-                  'tiny-grid-custom__tabs-selected': activeName === 'other'
-                }"
-              >
-                <span>{{ t('ui.grid.individuation.tabs.other.title') }}</span>
-              </li>
-            </ul>
-          </div>
+        <tiny-tabs v-model="activeName" class="tiny-grid-custom__tabs">
           <div class="tiny-grid-custom__tabs-body">
-            <div
-              v-show="activeName === 'base'"
-              :class="['tabs-body-item', animateShow === 'base' ? 'active-item' : '']"
-            >
-              <div class="tiny-grid-custom__alert">
-                <component class="tiny-svg-size" is="icon-help" />
-                <p>{{ t('ui.grid.individuation.tabs.base.tips') }}</p>
-              </div>
+            <tiny-tab-item class="tabs-body-item" :title="t('ui.grid.individuation.tabs.base.title')" name="base">
+              <tiny-alert
+                class="tiny-grid-custom__alert"
+                :description="t('ui.grid.individuation.tabs.base.tips')"
+                :closable="false"
+              ></tiny-alert>
               <tiny-grid
                 class="tiny-grid-custom__setting"
                 :auto-resize="true"
@@ -108,15 +85,13 @@
                   </template>
                 </tiny-grid-column>
               </tiny-grid>
-            </div>
-            <div
-              v-show="activeName === 'other'"
-              :class="['tabs-body-item', animateShow === 'other' ? 'active-item' : '']"
-            >
-              <div class="tiny-grid-custom__alert">
-                <component class="tiny-svg-size" is="icon-help" />
-                <p>{{ t('ui.grid.individuation.tabs.other.tips') }}</p>
-              </div>
+            </tiny-tab-item>
+            <tiny-tab-item class="tabs-body-item" :title="t('ui.grid.individuation.tabs.other.title')" name="other">
+              <tiny-alert
+                class="tiny-grid-custom__alert"
+                :description="t('ui.grid.individuation.tabs.other.tips')"
+                :closable="false"
+              ></tiny-alert>
               <ul class="tiny-grid-custom__setting other-setting">
                 <li class="setting-item">
                   <span class="label">{{ t('ui.grid.individuation.tabs.other.sortType') }}</span>
@@ -142,14 +117,15 @@
                   </span>
                 </li>
               </ul>
-            </div>
+            </tiny-tab-item>
             <tiny-custom-switch
               v-if="multipleHistory && activeName === 'base'"
               ref="switch"
               :history-config="historyConfig"
             ></tiny-custom-switch>
           </div>
-        </div>
+        </tiny-tabs>
+
         <div
           v-if="!multipleHistory || (multipleHistory && activeName === 'base')"
           class="tiny-grid-custom__footer"
@@ -187,18 +163,23 @@ import {
   IconMinus,
   IconDescending,
   IconAscending,
-  IconHelp,
   IconLeftFrozen,
   IconRightFrozen
 } from '@opentiny/vue-icon'
 import Select from '@opentiny/vue-select'
+import Alert from '@opentiny/vue-alert'
+import Tabs from '@opentiny/vue-tabs'
+import TabItem from '@opentiny/vue-tab-item'
 import Option from '@opentiny/vue-option'
 import CustomSwitch from './custom-switch.vue'
 import { extend } from '@opentiny/vue-renderless/common/object'
 import { $props, defineComponent, appProperties } from '@opentiny/vue-common'
 
 export default defineComponent({
   components: {
+    TinyAlert: Alert,
+    TinyTabs: Tabs,
+    TinyTabItem: TabItem,
     TinyModal: Modal,
     TinyButton: Button,
     TinyRadio: GridRadio,
@@ -215,7 +196,6 @@ export default defineComponent({
     IconMinus: IconMinus(),
     IconDescending: IconDescending(),
     IconAscending: IconAscending(),
-    IconHelp: IconHelp(),
     TinyCustomSwitch: CustomSwitch
   },
   name: 'TinyGridCustom',