plain-design 1.0.0-beta.11 → 1.0.0-beta.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plain-design",
-  "version": "1.0.0-beta.11",
+  "version": "1.0.0-beta.13",
   "description": "",
   "main": "dist/plain-design.min.js",
   "module": "dist/plain-design.commonjs.min.js",

package/src/packages/components/StepGroup/step-group.scss

@@ -1,12 +1,12 @@
 @include prefix(step-group) {
   .#{componentName(step)} {
     .step-title {
-      font-size: 16px;
+      font-size: plv(font-size-normal);
       color: plv(text-1);
     }
 
     .step-content {
-      font-size: 14px;
+      font-size: plv(font-size-small);
     }
 
     .step-dot {
@@ -21,7 +21,7 @@
     .step-icon {
       width: 32px;
       height: 32px;
-      font-size: 16px;
+      font-size: plv(font-size-normal);
       line-height: 32px;
       text-align: center;
       border-radius: 32px;
@@ -304,7 +304,7 @@
       .step-icon {
         width: 20px;
         height: 20px;
-        font-size: 12px;
+        font-size: plv(font-size-small);
         line-height: 20px;
         text-align: center;
         border-radius: 20px;
@@ -328,11 +328,11 @@
     }
 
     .step-title {
-      font-size: 14px;
+      font-size: plv(font-size-normal);
     }
 
     .step-content {
-      font-size: 12px;
+      font-size: plv(font-size-small);
     }
 
     &.step-group-vertical {

package/src/packages/components/TabGroup/TabsInner.tsx

@@ -6,7 +6,8 @@ export const TabsInner = designComponent({
     item: { type: Object as PropType<PlTabComponent>, required: true },
     active: { type: Boolean },
   },
-  setup({ props }) {
+  slots: ['default'],
+  setup({ props, slots }) {
 
     const state = reactive({
       show: false,
@@ -50,7 +51,7 @@ export const TabsInner = designComponent({
           { class: 'inner-tab', style: styles.value },
           props.item.attrs
         )}>
-          {!!state.init && props.item.slots.default()}
+          {!!state.init && slots.default()}
         </div>
       )
     };

package/src/packages/components/TabGroup/header/horizontal/tabs-header-horizontal.scss

@@ -14,7 +14,6 @@
 
     .tabs-header-item {
       display: inline-block;
-      font-size: 14px;
     }
 
     &.tabs-header-show-more {

package/src/packages/components/TabGroup/index.tsx

@@ -6,10 +6,12 @@ import {TabsHeaderHorizontal} from "./header/horizontal/TabsHeaderHorizontal";
 import {TabsHeaderVertical} from "./header/vertical/TabsHeaderVertical";
 import Tab from "../Tab";
 import Icon from "../Icon";
+import {StyleProps, useStyle} from "../../uses/useStyle";
 
 export const TabGroup = designComponent({
   name: 'tab-group',
   props: {
+    ...StyleProps,
     modelValue: { type: [String, Number] },                   // 双向绑定值，控制当前显示的tab
     closeable: { type: Boolean },                             // 是否显示关闭按钮，会派发onClose事件
     fitHeight: { type: Boolean },                             // 适配高度
@@ -21,6 +23,7 @@ export const TabGroup = designComponent({
   slots: ['default', 'operator'],
   setup({ props, event: { emit }, slots }) {
 
+    const { styleComputed } = useStyle();
     const model = useModel(() => props.modelValue, emit.onUpdateModelValue);
     const items = TabCollector.parent();
 
@@ -53,6 +56,7 @@ export const TabGroup = designComponent({
       getComponentCls('tab-group'),
       `tabs-head-position-${props.headPosition}`,
       `tabs-head-type-${props.headType}`,
+      `tab-group-size-${styleComputed.value.size}`,
       {
         'tabs-fit-height': props.fitHeight
       },
@@ -97,7 +101,9 @@ export const TabGroup = designComponent({
         const body = (
           <div className="tabs-body">
             {[...tabs.value].sort((a, b) => String(a.val).localeCompare(String(b.val))).map((tab, index) => (
-              <TabsInner item={tab.item} key={index} active={tab.active}/>
+              <TabsInner item={tab.item} key={index} active={tab.active}>
+                {tab.item.slots.default()}
+              </TabsInner>
             ))}
           </div>
         );

package/src/packages/components/TabGroup/tabs.scss

@@ -33,4 +33,7 @@
       margin-left: 4px;
     }
   }
+
+  @include sizeMixin(tab-group, (font-size)) {
+  }
 }

package/src/pages/index/components/normal/DemoTab.tsx

@@ -313,23 +313,23 @@ export const demoInit = designPage(() => {
         <Tab title="用户管理" style={{ padding: '20px 0' }}>
           <span>用户管理：</span>
           <Input
-            onMounted={() => console.log('用户管理 mouinted',)}
-            onBeforeMount={() => console.log('用户管理 unmount',)}
+            onMounted={() => console.log('用户管理 mounted',)}
+            onUnmounted={() => console.log('用户管理 unmount',)}
           />
         </Tab>
         <Tab title="立即初始化" style={{ padding: '20px 0' }} init>
           <span>子模块数据管理：</span>
           <Input
-            onMounted={() => console.log('立即初始化 mouinted',)}
-            onBeforeMount={() => console.log('立即初始化 unmount',)}
+            onMounted={() => console.log('立即初始化 mounted',)}
+            onUnmounted={() => console.log('立即初始化 unmount',)}
           />
         </Tab>
         <Tab title="关闭的时候销毁" style={{ padding: '20px 0' }} destroyOnHide>
           <span>数据集：</span>
           <Input
             modelValue={'初始值'}
-            onMounted={() => console.log('关闭的时候销毁 mouinted',)}
-            onBeforeMount={() => console.log('关闭的时候销毁 unmount',)}
+            onMounted={() => console.log('关闭的时候销毁 mounted',)}
+            onUnmounted={() => console.log('关闭的时候销毁 unmount',)}
           />
         </Tab>
       </TabGroup>