plain-design 1.0.0-beta.23 → 1.0.0-beta.25

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

@@ -1,131 +1,131 @@
-import {classnames, computed, designComponent, getComponentCls, useClasses, useCollect, useModel, watch} from "plain-design-composition";
-import './tabs.scss';
-import {TabCommonProps, TabData} from "./tabs.utils";
-import {TabsInner} from "./TabsInner";
-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 },                             // 适配高度
-    ...TabCommonProps,
-  },
-  emits: {
-    onUpdateModelValue: (val?: string | number) => true,
-  },
-  slots: ['default', 'operator'],
-  setup({ props, event: { emit }, slots }) {
-
-    const { styleComputed } = useStyle();
-    const model = useModel(() => props.modelValue, emit.onUpdateModelValue);
-    const items = TabCollector.parent();
-
-    const tabs = computed(() => items.map((item, index) => {
-      const { val } = item.props;
-      return {
-        item,
-        index,
-        val: val == null ? index : val,
-        active: (() => {
-          if (val != null) {
-            return model.value == val;
-          }
-          if (model.value != null) {
-            return model.value == index;
-          }
-          return index == 0;
-        })(),
-      };
-    }));
-
-    watch(() => tabs.value.map(i => i.val).join('_'), () => {
-      const activeItem = tabs.value.find(i => i.active);
-      if (!activeItem) {
-        model.value = tabs.value[0]?.val;
-      }
-    });
-
-    const classes = useClasses(() => [
-      getComponentCls('tab-group'),
-      `tabs-head-position-${props.headPosition}`,
-      `tabs-head-type-${props.headType}`,
-      `tab-group-size-${styleComputed.value.size}`,
-      {
-        'tabs-fit-height': props.fitHeight
-      },
-    ]);
-
-    const handler = {
-      onClickTabHeader: ({ item, index, active }: TabData) => {
-        const { props: { val } } = item;
-        if (active) {return;}
-        model.value = val == null ? index : val;
-      }
-    };
-
-    return {
-      render: () => {
-
-        const head = (() => {
-          const Header = props.headPosition === 'top' || props.headPosition === 'bottom' ? TabsHeaderHorizontal : TabsHeaderVertical;
-          return (
-            <Header headType={props.headType} headPosition={props.headPosition}>
-              {tabs.value.map((tab, index) => (
-                <div className={classnames([
-                  'tabs-header-item',
-                  { 'tabs-header-item-active': tab.active }
-                ])} key={index}
-                     onClick={() => handler.onClickTabHeader(tab)} data-active={tab.active ? 1 : 0}>
-                  <span>{tab.item.scopeSlots.head({ active: false }, tab.item.props.title)}</span>
-                  {props.closeable && <Icon icon="pi-close" onClick={e => {
-                    e.stopPropagation();
-                    tab.item.event.emit.onClose();
-                  }}/>}
-                </div>
-              ))}
-              {slots.operator.isExist() && (
-                <div className="tabs-header-item-operator">
-                  {slots.operator()}
-                </div>
-              )}
-            </Header>
-          );
-        })();
-        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} render={() => tab.item.slots.default()}/>
-            ))}
-          </div>
-        );
-
-        return (
-          <div className={classes.value}>
-            <div className="tabs-collector">{slots.default()}</div>
-            {props.headPosition === 'top' || props.headPosition === 'left' ? <>
-              {head}
-              {body}
-            </> : <>
-              {body}
-              {head}
-            </>}
-          </div>
-        );
-      }
-    };
-  },
-});
-
-export const TabCollector = useCollect(() => ({
-  parent: TabGroup,
-  child: Tab,
-}));
-
-export default TabGroup;
+import {classnames, computed, designComponent, getComponentCls, useClasses, useCollect, useModel, watch} from "plain-design-composition";
+import './tabs.scss';
+import {TabCommonProps, TabData} from "./tabs.utils";
+import {TabsInner} from "./TabsInner";
+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 },                             // 适配高度
+    ...TabCommonProps,
+  },
+  emits: {
+    onUpdateModelValue: (val?: string | number) => true,
+  },
+  slots: ['default', 'operator'],
+  setup({ props, event: { emit }, slots }) {
+
+    const { styleComputed } = useStyle();
+    const model = useModel(() => props.modelValue, emit.onUpdateModelValue);
+    const items = TabCollector.parent();
+
+    const tabs = computed(() => items.map((item, index) => {
+      const { val } = item.props;
+      return {
+        item,
+        index,
+        val: val == null ? index : val,
+        active: (() => {
+          if (val != null) {
+            return model.value == val;
+          }
+          if (model.value != null) {
+            return model.value == index;
+          }
+          return index == 0;
+        })(),
+      };
+    }));
+
+    watch(() => tabs.value.map(i => i.val).join('_'), () => {
+      const activeItem = tabs.value.find(i => i.active);
+      if (!activeItem) {
+        model.value = tabs.value[0]?.val;
+      }
+    });
+
+    const classes = useClasses(() => [
+      getComponentCls('tab-group'),
+      `tabs-head-position-${props.headPosition}`,
+      `tabs-head-type-${props.headType}`,
+      `tab-group-size-${styleComputed.value.size}`,
+      {
+        'tabs-fit-height': props.fitHeight
+      },
+    ]);
+
+    const handler = {
+      onClickTabHeader: ({ item, index, active }: TabData) => {
+        const { props: { val } } = item;
+        if (active) {return;}
+        model.value = val == null ? index : val;
+      }
+    };
+
+    return {
+      render: () => {
+
+        const head = (() => {
+          const Header = props.headPosition === 'top' || props.headPosition === 'bottom' ? TabsHeaderHorizontal : TabsHeaderVertical;
+          return (
+            <Header headType={props.headType} headPosition={props.headPosition}>
+              {tabs.value.map((tab, index) => (
+                <div className={classnames([
+                  'tabs-header-item',
+                  { 'tabs-header-item-active': tab.active }
+                ])} key={index}
+                     onClick={() => handler.onClickTabHeader(tab)} data-active={tab.active ? 1 : 0}>
+                  <span>{tab.item.scopeSlots.head({ active: false }, tab.item.props.title)}</span>
+                  {props.closeable && <Icon icon="pi-close" onClick={e => {
+                    e.stopPropagation();
+                    tab.item.event.emit.onClose();
+                  }}/>}
+                </div>
+              ))}
+              {slots.operator.isExist() && (
+                <div className="tabs-header-item-operator">
+                  {slots.operator()}
+                </div>
+              )}
+            </Header>
+          );
+        })();
+        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} render={() => tab.item.slots.default()}/>
+            ))}
+          </div>
+        );
+
+        return (
+          <div className={classes.value}>
+            <div className="tabs-collector">{slots.default()}</div>
+            {props.headPosition === 'top' || props.headPosition === 'left' ? <>
+              {head}
+              {body}
+            </> : <>
+              {body}
+              {head}
+            </>}
+          </div>
+        );
+      }
+    };
+  },
+});
+
+export const TabCollector = useCollect(() => ({
+  parent: TabGroup,
+  child: Tab,
+}));
+
+export default TabGroup;

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

@@ -1,39 +1,39 @@
-@include prefix(tab-group) {
-  .tabs-collector {
-    height: 0;
-    width: 0;
-    overflow: hidden;
-    display: block;
-  }
-
-  .tabs-header-item {
-    cursor: pointer;
-    user-select: none;
-
-    @include prefix(icon) {
-      margin-left: 8px;
-    }
-  }
-
-  .tabs-header-item-operator {
-    flex-grow: 1;
-    flex-shrink: 0;
-    position: sticky;
-    right: 4px;
-    height: 45px;
-    line-height: 45px;
-    padding-left: 16px;
-    justify-self: flex-end;
-    display: inline-flex;
-    align-items: center;
-    justify-content: flex-end;
-    background-color: plv(background-color);
-
-    & > * + * {
-      margin-left: 4px;
-    }
-  }
-
-  @include sizeMixin(tab-group, (font-size)) {
-  }
-}
+@include prefix(tab-group) {
+  .tabs-collector {
+    height: 0;
+    width: 0;
+    overflow: hidden;
+    display: block;
+  }
+
+  .tabs-header-item {
+    cursor: pointer;
+    user-select: none;
+
+    @include prefix(icon) {
+      margin-left: 8px;
+    }
+  }
+
+  .tabs-header-item-operator {
+    flex-grow: 1;
+    flex-shrink: 0;
+    position: sticky;
+    right: 4px;
+    height: 45px;
+    line-height: 45px;
+    padding-left: 16px;
+    justify-self: flex-end;
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-end;
+    background-color: plv(background-color);
+
+    & > * + * {
+      margin-left: 4px;
+    }
+  }
+
+  @include sizeMixin(tab-group, (font-size)) {
+  }
+}

package/src/packages/components/TabGroup/tabs.utils.tsx

@@ -1,22 +1,22 @@
-import {PropType} from "plain-design-composition";
-import {PlTabComponent} from "../Tab";
-
-export enum TabHeadType {
-  text = 'text',
-  card = 'card',
-  shadow = 'shadow',
-}
-
-export enum TabHeadPosition {
-  top = 'top',
-  bottom = 'bottom',
-  left = 'left',
-  right = 'right',
-}
-
-export const TabCommonProps = {
-  headType: { type: String as PropType<keyof typeof TabHeadType>, default: TabHeadType.text },                      // 页签样式
-  headPosition: { type: String as PropType<keyof typeof TabHeadPosition>, default: TabHeadPosition.top },           // 页签位置
-};
-
-export type TabData = { item: PlTabComponent, index: number, active: boolean }
+import {PropType} from "plain-design-composition";
+import {PlTabComponent} from "../Tab";
+
+export enum TabHeadType {
+  text = 'text',
+  card = 'card',
+  shadow = 'shadow',
+}
+
+export enum TabHeadPosition {
+  top = 'top',
+  bottom = 'bottom',
+  left = 'left',
+  right = 'right',
+}
+
+export const TabCommonProps = {
+  headType: { type: String as PropType<keyof typeof TabHeadType>, default: TabHeadType.text },                      // 页签样式
+  headPosition: { type: String as PropType<keyof typeof TabHeadPosition>, default: TabHeadPosition.top },           // 页签位置
+};
+
+export type TabData = { item: PlTabComponent, index: number, active: boolean }

package/src/packages/components/Table/editor/PlcAddress.tsx

@@ -1,91 +1,91 @@
-import {designComponent, PropType} from "plain-design-composition";
-import {iAddressService} from "../../$address/createAddressService";
-import {nextPlcBindId} from "../plc/utils/plc.utils";
-import {PlcAddressItem} from "./PlcAddressItem";
-import {AddressCascade} from "../../AddressCascade";
-import i18n from "../../i18n";
-
-export const PlcAddress = designComponent({
-  name: 'plc-address',
-  props: {
-    types: { type: String, default: 'pcd' },
-    service: { type: Object as PropType<iAddressService> },
-
-    provinceTitle: { type: String, default: () => i18n('base.province').d('省') },
-    provinceField: { type: String, default: 'province' },
-    cityTitle: { type: String, default: () => i18n('base.city').d('市') },
-    cityField: { type: String, default: 'city' },
-    districtTitle: { type: String, default: () => i18n('base.district').d('区县') },
-    districtField: { type: String, default: 'district' },
-  },
-  setup({ props }) {
-
-    const plcBindIds = {
-      province: nextPlcBindId(),
-      city: nextPlcBindId(),
-    };
-
-    return () => {
-      const renderList: any[] = [];
-
-      if (props.types.indexOf('p') > -1) {
-        renderList.push(
-          <PlcAddressItem
-            key={plcBindIds.province}
-            bindId={plcBindIds.province}
-            title={props.provinceTitle}
-            field={props.provinceField}
-            province
-            editColSpan={props.types.length}
-            formLabel={i18n('base.address').d("地址")}
-            filterType="province"
-            filterHandler="like"
-            v-slots={{
-              edit: ({ row }) => (
-                <AddressCascade
-                  v-model:province={row[props.provinceField]}
-                  v-model:city={row[props.cityField]}
-                  v-model:district={row[props.districtField]}
-                  types={props.types}
-                />
-              )
-            }}
-          />
-        );
-      }
-      if (props.types.indexOf('c') > -1) {
-        renderList.push(
-          <PlcAddressItem
-            key={plcBindIds.city}
-            parentBindId={plcBindIds.province}
-            bindId={plcBindIds.city}
-            title={props.cityTitle}
-            field={props.cityField}
-            city
-            parentField={props.provinceField}
-            editColSpan={0}
-            filterType="city"
-            filterHandler="like"
-          />
-        );
-      }
-      if (props.types.indexOf('d') > -1) {
-        renderList.push(
-          <PlcAddressItem
-            key="district"
-            parentBindId={plcBindIds.city}
-            title={props.districtTitle}
-            field={props.districtField}
-            district
-            parentField={props.cityField}
-            editColSpan={0}
-            filterType="district"
-            filterHandler="like"
-          />
-        );
-      }
-
-      return renderList;
-    };
-  },
-});
+import {designComponent, PropType} from "plain-design-composition";
+import {iAddressService} from "../../$address/createAddressService";
+import {nextPlcBindId} from "../plc/utils/plc.utils";
+import {PlcAddressItem} from "./PlcAddressItem";
+import {AddressCascade} from "../../AddressCascade";
+import i18n from "../../i18n";
+
+export const PlcAddress = designComponent({
+  name: 'plc-address',
+  props: {
+    types: { type: String, default: 'pcd' },
+    service: { type: Object as PropType<iAddressService> },
+
+    provinceTitle: { type: String, default: () => i18n('base.province').d('省') },
+    provinceField: { type: String, default: 'province' },
+    cityTitle: { type: String, default: () => i18n('base.city').d('市') },
+    cityField: { type: String, default: 'city' },
+    districtTitle: { type: String, default: () => i18n('base.district').d('区县') },
+    districtField: { type: String, default: 'district' },
+  },
+  setup({ props }) {
+
+    const plcBindIds = {
+      province: nextPlcBindId(),
+      city: nextPlcBindId(),
+    };
+
+    return () => {
+      const renderList: any[] = [];
+
+      if (props.types.indexOf('p') > -1) {
+        renderList.push(
+          <PlcAddressItem
+            key={plcBindIds.province}
+            bindId={plcBindIds.province}
+            title={props.provinceTitle}
+            field={props.provinceField}
+            province
+            editColSpan={props.types.length}
+            formLabel={i18n('base.address').d("地址")}
+            filterType="province"
+            filterHandler="like"
+            v-slots={{
+              edit: ({ row }) => (
+                <AddressCascade
+                  v-model:province={row[props.provinceField]}
+                  v-model:city={row[props.cityField]}
+                  v-model:district={row[props.districtField]}
+                  types={props.types}
+                />
+              )
+            }}
+          />
+        );
+      }
+      if (props.types.indexOf('c') > -1) {
+        renderList.push(
+          <PlcAddressItem
+            key={plcBindIds.city}
+            parentBindId={plcBindIds.province}
+            bindId={plcBindIds.city}
+            title={props.cityTitle}
+            field={props.cityField}
+            city
+            parentField={props.provinceField}
+            editColSpan={0}
+            filterType="city"
+            filterHandler="like"
+          />
+        );
+      }
+      if (props.types.indexOf('d') > -1) {
+        renderList.push(
+          <PlcAddressItem
+            key="district"
+            parentBindId={plcBindIds.city}
+            title={props.districtTitle}
+            field={props.districtField}
+            district
+            parentField={props.cityField}
+            editColSpan={0}
+            filterType="district"
+            filterHandler="like"
+          />
+        );
+      }
+
+      return renderList;
+    };
+  },
+});