plain-design 1.0.0-beta.43 → 1.0.0-beta.44

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

@@ -0,0 +1,37 @@
+import {designComponent, inject, provide} from "plain-design-composition";
+import DropdownGroup from "../DropdownGroup";
+
+export const SelectGroup = designComponent({
+  name: 'select-group',
+  props: {
+    title: { type: String },
+  },
+  slots: ['default'],
+  setup({ props, slots }) {
+
+    const searchText = useSearchText.inject();
+
+    return () => {
+      return (
+        /*有搜索关键词的时候不显示分组标题*/
+        !searchText?.()?.length && (
+          <DropdownGroup>
+            {slots.default(props.title)}
+          </DropdownGroup>
+        )
+      );
+    };
+  },
+});
+
+export const useSearchText = (() => {
+  const PROVIDE_NAME = '@@SEARCH_TEXT_PROVIDER';
+  return {
+    provide: (getSearchText: () => string | null | undefined) => {
+      provide(PROVIDE_NAME, getSearchText);
+    },
+    inject: () => {
+      return inject(PROVIDE_NAME) as (() => string | null | undefined) | undefined | null;
+    },
+  };
+})();

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

@@ -0,0 +1,30 @@
+import './space.scss';
+import {designComponent, getComponentCls, useClasses} from "plain-design-composition";
+import {StyleProps, useStyle} from "../../uses/useStyle";
+
+export const Space = designComponent({
+  name: 'space',
+  props: {
+    vertical: { type: Boolean },
+    ...StyleProps,
+  },
+  slots: ['default'],
+  setup({ props, slots }) {
+
+    const { styleComputed } = useStyle();
+
+    const classes = useClasses(() => [
+      getComponentCls('space'),
+      `space-${props.vertical ? 'vertical' : 'horizontal'}`,
+      `space-size-${styleComputed.value.size}`,
+    ]);
+
+    return () => (
+      <div className={classes.value}>
+        {slots.default()}
+      </div>
+    );
+  },
+});
+
+export default Space;

package/src/packages/components/Space/space.scss

@@ -0,0 +1,26 @@
+@include comp(space) {
+
+  display: flex;
+
+  @include sizeMixin(space, ()) {
+    &.space-horizontal {
+      & > * + * {
+        margin-left: plv(#{margin-#{$name}});
+      }
+    }
+    &.space-vertical {
+      & > * + * {
+        margin-top: plv(#{margin-#{$name}});
+      }
+    }
+  }
+
+  &.space-horizontal {
+    flex-direction: row;
+  }
+
+  &.space-vertical {
+    flex-direction: column;
+  }
+
+}

package/src/packages/components/Table/standard/PlcOperation/outer-operation.scss

@@ -6,7 +6,7 @@
 
     .table-operation-bar-left {
       flex: 1;
-      overflow: hidden;
+      //overflow: hidden;
       white-space: nowrap;
       text-align: left;
     }
@@ -16,13 +16,13 @@
 @include comp(auto-table) {
   @include sizeMixin(auto-table, ()) {
     .table-operation-bar {
-      margin-bottom: $margin;
+      margin-bottom: 0;
 
       .table-operation-bar-right {
-        margin-left: 12px;
+        margin-left: $margin;
 
         & > * + * {
-          margin-left: calc(#{$margin} - 8px);
+          margin-left: calc(#{$margin});
         }
 
         & > .#{componentName(button-group)} {

package/src/packages/components/Table/table/body/cell.tsx

@@ -127,24 +127,29 @@ export const PltCell = designComponent({
          * @author  韦胜健
          * @date    2023.1.20 14:00
          */
+        const emptyOverflowTooltipOption = { reference: null, message: null, };
         const overflowTooltip = createTooltip({
           overflow: true,
           /*当没有message时注销监听鼠标事件*/
           ignoreEmptyMessage: false,
           tooltip: () => {
             const bodyCell = getBodyCell();
-            return ({
-              /*
-              * 没有开启overflowTooltip
-              * 或者没有初始化getBodyCell
-              * 或者没有bodyCell
-              * 或者当前处于编辑状态
-              *
-              * 则不显示overflowTooltip
-              */
-              reference: !props.plc.props.overflowTooltip || !bodyCell || bodyCell.editable ? null : refs.el,
-              message: bodyCell?.body,
-            });
+            /*
+             * 没有开启overflowTooltip
+             * 或者没有初始化getBodyCell
+             * 或者没有bodyCell
+             * 或者当前处于编辑状态
+             *
+             * 则不显示overflowTooltip
+             */
+            if (!props.plc.props.overflowTooltip || !bodyCell || bodyCell.editable) {
+              return emptyOverflowTooltipOption
+            } else {
+              return {
+                reference: !props.plc.props.overflowTooltip || !bodyCell || bodyCell.editable ? null : refs.el,
+                message: bodyCell?.body,
+              };
+            }
           },
         }, popup);
         effects.push(overflowTooltip.clear);

package/src/packages/components/Table/table/table.scss

@@ -2,10 +2,26 @@
   position: relative;
 
   @include sizeMixin(table, (font-size)) {
+    .plt-cell {
+      padding: 0 plv(input-padding-x-#{$name});
+
+      &.plt-cell-editing {
+        &:not(.plt-cell-add-edit-padding) {
+          padding-left: 2px;
+          @include comp(input) {
+            & > div, & > span, & > input, & > textarea {
+              &:first-child {
+                padding-left: calc(#{plv(input-padding-x-#{$name})} - 3px);
+              }
+            }
+          }
+        }
+      }
+    }
   }
   .virtual-table-head-table {
     td {
-      font-weight: 600;
+      font-weight: 500;
       letter-spacing: 1px;
 
       .plt-head-cell-indicator {
@@ -84,19 +100,6 @@
       padding: 0;
     }
 
-    &.plt-cell-editing {
-      &:not(.plt-cell-add-edit-padding) {
-        padding-left: 2px;
-        @include comp(input) {
-          & > div, & > span, & > input, & > textarea {
-            &:first-child {
-              padding-left: calc(#{plv(input-padding-x)} - 3px);
-            }
-          }
-        }
-      }
-    }
-
     &.plt-cell-link {
       color: plv(primary-6);
       cursor: pointer;

package/src/packages/components/Table/table/use/useTableFormEditor.tsx

@@ -118,6 +118,8 @@ export function useTableFormEditor(
                   ref={onRef.form}
                   column={1}
                   modelValue={node.state.editRow}
+                  labelAlign="right"
+                  validateMessagePosition="bottom-left"
                 >
                   {showPlcArray.value.map((plc, index) => {
                     if (plc.props.editColSpan === 0) {

package/src/packages/components/VirtualList/useVirtualList.tsx

@@ -304,6 +304,20 @@ export function useVirtualList(
         pageIndex,
       };
     },
+    resetPageSize: () => {
+      let hostSize = refs.scroll!.refs.host![props.horizontal ? 'offsetWidth' : 'offsetHeight'];
+      const headEl = refs.scroll!.refs.host!.querySelector('[data-virtual-head]') as undefined | HTMLDivElement;
+      const footEl = refs.scroll!.refs.host!.querySelector('[data-virtual-foot]') as undefined | HTMLDivElement;
+      if (!!headEl) {
+        hostSize -= headEl[props.horizontal ? 'offsetWidth' : 'offsetHeight'];
+      }
+      if (!!footEl) {
+        hostSize -= footEl[props.horizontal ? 'offsetWidth' : 'offsetHeight'];
+      }
+
+      const newPageSize = Math.floor(hostSize / props.size);
+      if (newPageSize != state.pageSize) {state.pageSize = newPageSize;}
+    },
   };
 
   /*---------------------------------------handler-------------------------------------------*/
@@ -325,6 +339,7 @@ export function useVirtualList(
   };
 
   watch(() => props.data, (data: any[]) => {
+    delay().then(() => {utils.resetPageSize();});
     if (props.disabled) {
       return;
     }
@@ -336,17 +351,7 @@ export function useVirtualList(
 
   onMounted(async () => {
     await delay(23);
-    let hostSize = refs.scroll!.refs.host![props.horizontal ? 'offsetWidth' : 'offsetHeight'];
-    const headEl = refs.scroll!.refs.host!.querySelector('[data-virtual-head]') as undefined | HTMLDivElement;
-    const footEl = refs.scroll!.refs.host!.querySelector('[data-virtual-foot]') as undefined | HTMLDivElement;
-    if (!!headEl) {
-      hostSize -= headEl[props.horizontal ? 'offsetWidth' : 'offsetHeight'];
-    }
-    if (!!footEl) {
-      hostSize -= footEl[props.horizontal ? 'offsetWidth' : 'offsetHeight'];
-    }
-
-    state.pageSize = Math.floor(hostSize / props.size);
+    utils.resetPageSize();
   });
 
   onUpdated(async () => {

package/src/packages/components/VirtualTable/virtual-table.scss

@@ -154,7 +154,7 @@ $scrollbarSize: 12px;
 
         box-sizing: border-box;
         position: relative;
-        padding: 1px plv(input-padding-x);
+        padding: 1px 11px;
 
         .cell-fit-height {
           height: 100%;

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

@@ -1,12 +1,15 @@
 import Axios from "axios";
 import {iHttpRequestConfig, iPlainResponseDataType} from "./http.utils";
+import {AutoLoadingObserver} from "../AutoLoadingObserver";
 
 export function createHttp(defaultRequestConfig: iHttpRequestConfig<iPlainResponseDataType>) {
 
   const axios = Axios.create(defaultRequestConfig);
 
   async function request<T>(requestConfig: iHttpRequestConfig<iPlainResponseDataType & T>): Promise<iPlainResponseDataType & T> {
-    return await axios.request(requestConfig);
+    let promise = axios.request(requestConfig);
+    AutoLoadingObserver.subject(promise);
+    return promise as any;
   }
 
   return {

package/src/packages/components/useMessage/message.scss

@@ -61,7 +61,7 @@
   box-shadow: plv(message-box-shadow);
   position: relative;
   overflow: hidden;
-  background-color: plv(background-lite);
+  background-color: plv(bg-4);
   color: plv(text-2);
   border-radius: plv(box-size-normal-border-radius);
 
@@ -85,7 +85,7 @@
     justify-content: center;
 
     @include prefix(icon) {
-      color: plv(background-lite);
+      color: plv(bg-4);
       position: relative;
       z-index: 1;
 

package/src/packages/components/useNotice/notice.scss

@@ -40,7 +40,7 @@
 @include prefix(notice) {
   text-align: initial;
   pointer-events: auto;
-  background-color: plv(background-lite);
+  background-color: plv(bg-4);
   display: inline-block;
   padding: plv(notice-padding);
   box-shadow: plv(notice-box-shadow);

package/src/packages/components/usePopup/PopupItem.tsx

@@ -369,6 +369,8 @@ export const PopupItem = designComponent({
 
     PopupItemProvide.provide(state);
 
+    let prevContent: any;
+
     return () => (
       !!state.option.reference && (
         (() => {
@@ -396,7 +398,18 @@ export const PopupItem = designComponent({
                   className="popup-item-content"
                   onTransitionEnd={handler.onTransitionend}
                 >
-                  {slots.default.isExist() ? slots.default() : state.option.render()}
+                  {(() => {
+                    /*关闭的时候如果content为空，则渲染最后一次不为空的content内容*/
+                    let content = slots.default.isExist() ? slots.default() : state.option.render();
+                    if (!content) {
+                      if (!state.isShow) {
+                        content = prevContent;
+                      }
+                    } else {
+                      prevContent = content;
+                    }
+                    return content;
+                  })()}
                 </div>
               </div>
             </div>

package/src/packages/components/usePopup/popup-item.scss

@@ -12,7 +12,10 @@
 
 @include comp(popup-item) {
 
-  --#{componentName('popup-item-background')}: #{plv(background-lite)};
+  --#{componentName('background-color')}: #{plv(bg-4)};
+  --#{componentName('table-head-background')}: #{plv(bg-4)};
+
+  --#{componentName('popup-item-background')}: #{plv(bg-4)};
 
   position: fixed;
   filter: drop-shadow(0 0 2px #c8c8c8);
@@ -107,6 +110,7 @@
 
   &.popup-item-no-background {
     --#{componentName('popup-item-background')}: transparent !important;
+    filter: none !important;
   }
 
   &.popup-item-no-border {

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

@@ -127,6 +127,9 @@ export function createTooltip(option: iTooltipServiceOption, popup: iPopupServic
           if (reference == null || message == null || (typeof message === "string" && !message.trim().length)) {
             return false;
           }
+          if (option.alwaysShow) {
+            return true;
+          }
           if (!state.isEnter) {
             return false;
           }
@@ -175,6 +178,7 @@ export function useTooltip(option: iTooltipServiceOption) {
 }
 
 export interface iTooltipServiceOption {
+  alwaysShow?: boolean,
   /*传递给tooltip的水星*/
   tooltip: () => Omit<iPopupUseOption, 'id' | 'reference' | 'render'> & { reference: HTMLElement | null | undefined, message: any },
   /*是否在文本溢出时才会显示消息*/

package/src/packages/entry.tsx

@@ -62,6 +62,7 @@ export {TimePicker} from './components/TimePicker';
 export {DatePicker} from './components/DatePicker';
 export {Select} from './components/Select';
 export {SelectOption} from './components/SelectOption';
+export {SelectGroup} from './components/SelectGroup';
 export {Form} from './components/Form';
 export {FormItem} from './components/FormItem';
 export {Cascade} from './components/Cascade';
@@ -114,6 +115,7 @@ export {$previewer} from './components/$previewer';
 export {StackCard} from './components/StackCard';
 export {StackCardItem} from './components/StackCardItem';
 export {SortList} from './components/SortList';
+export {Space} from './components/Space';
 
 export {VirtualTable} from './components/VirtualTable';
 export {Table} from './components/Table';
@@ -207,6 +209,7 @@ export {useEdit, EditProps, EDIT_PROVIDER} from './uses/useEdit';
 export type {tEditComputed, tEditControl, EditProvideData} from './uses/useEdit';
 export {useStyle, StyleProps, ThemeShape, ThemeSize, ThemeStatus} from './uses/useStyle';
 export type {tStyleComputed, UseStyleProvideData} from './uses/useStyle';
+export {AutoLoadingObserver} from './components/AutoLoadingObserver';
 
 // @ts-ignore
 setComponentPrefix(globalComponentPrefix);

package/src/packages/uses/useCollapseStyles.tsx

@@ -0,0 +1,55 @@
+import {computed, iTransitionEvent, reactive, StyleProperties, useStyleCache, watch} from "plain-design-composition";
+import {delay} from "plain-utils/utils/delay";
+
+export function useCollapseStyles(
+  {
+    isShow,
+    active,
+    inactive
+  }: {
+    isShow: () => boolean,
+    active: () => StyleProperties,
+    inactive: () => StyleProperties,
+  }
+) {
+
+  const state = (() => {
+    const show = isShow();
+    return reactive({
+      isMount: show,
+      styles: show ? active() : inactive(),
+
+      onTransitionEnd: undefined as undefined | ((e: iTransitionEvent) => void)
+    });
+  })();
+
+  watch(() => isShow(), async show => {
+    if (show) {
+      if (!state.isMount) {
+        state.isMount = true;
+        await delay(23);
+      }
+      state.styles = active();
+      state.onTransitionEnd = undefined;
+    } else {
+      if (!state.isMount) {
+        return;
+      }
+      state.styles = inactive();
+      state.onTransitionEnd = () => {
+        state.isMount = false;
+        state.onTransitionEnd = undefined;
+      };
+    }
+  });
+
+  const styles = useStyleCache(styles => {
+    Object.assign(styles, state.styles);
+  });
+
+  return reactive({
+    styles,
+    show: computed(() => state.isMount),
+    onTransitionEnd: (e: iTransitionEvent) => state.onTransitionEnd?.(e)
+  });
+}