plain-design 1.0.0-beta.75 → 1.0.0-beta.76

package/src/packages/components/Toggle/toggle.scss

@@ -1,79 +1,53 @@
 @include prefix(toggle) {
-  background-color: plv(secondary-2);
-  position: relative;
-  outline: none;
-  display: inline-block;
-  vertical-align: middle;
-  user-select: none;
-  transition: background-color 300ms;
-  cursor: pointer;
-  border-radius: 100px;
-
-  .toggle-inner {
-    content: '';
-    position: absolute;
-    left: 2px;
-    top: 2px;
-    bottom: 2px;
-    background: white;
-    box-shadow: 0 3px 12px rgba(0, 0, 0, .16), 0 3px 1px rgba(0, 0, 0, .1);
-    transition: all 0.3s cubic-bezier(0.3, 1.3, 0.3, 1);
-    border-radius: inherit;
-  }
 
-  &:before {
-    position: absolute;
-    left: 2px;
-    right: 2px;
-    top: 2px;
-    bottom: 2px;
-    border-radius: inherit;
+  &:not(.toggle-input-mode-text) {
     background-color: plv(secondary-2);
-    content: "";
-    transform: scaleX(1);
-    /*transform: scale3d(0, 0, 0);*/
-    transition: transform .3s;
-  }
+    position: relative;
+    outline: none;
+    display: inline-block;
+    vertical-align: middle;
+    user-select: none;
+    transition: background-color 300ms;
+    cursor: pointer;
+    border-radius: 100px;
 
-  @include sizeMixin(toggle, ()) {
-    height: calc(#{$height} - 6px);
-    width: calc((#{$height} - 6px) * 52 / 32);
-
-    &.toggle-on {
-      .toggle-inner {
-        left: calc((#{$height} - 6px) * 52 / 32 - 2px - (#{$height} - 6px - 4px));
-      }
-    }
     .toggle-inner {
-      right: calc((#{$height} - 6px) * 52 / 32 - 2px - (#{$height} - 6px - 4px));
-    }
-    &.toggle-active {
-      .toggle-inner {
-        right: calc((#{$height} - 6px) / 2);
-      }
-
-      &.toggle-on .toggle-inner {
-        left: calc((#{$height} - 6px) / 2);
-      }
+      content: '';
+      position: absolute;
+      left: 2px;
+      top: 2px;
+      bottom: 2px;
+      background: white;
+      box-shadow: 0 3px 12px rgba(0, 0, 0, .16), 0 3px 1px rgba(0, 0, 0, .1);
+      transition: all 0.3s cubic-bezier(0.3, 1.3, 0.3, 1);
+      border-radius: inherit;
     }
-  }
 
-  &.toggle-square {
-    &, & > .toggle-inner & > :before {
-      border-radius: plv(box-size-normal-border-radius);;
+    &:before {
+      position: absolute;
+      left: 2px;
+      right: 2px;
+      top: 2px;
+      bottom: 2px;
+      border-radius: inherit;
+      background-color: plv(secondary-2);
+      content: "";
+      transform: scaleX(1);
+      /*transform: scale3d(0, 0, 0);*/
+      transition: transform .3s;
     }
 
     @include sizeMixin(toggle, ()) {
       height: calc(#{$height} - 6px);
-      width: calc((#{$height} - 6px) * 52 / 30);
+      width: calc((#{$height} - 6px) * 52 / 32);
 
       &.toggle-on {
         .toggle-inner {
-          left: calc((#{$height} - 6px) / 2 + 8px);
+          left: calc((#{$height} - 6px) * 52 / 32 - 2px - (#{$height} - 6px - 4px));
         }
       }
       .toggle-inner {
-        right: calc((#{$height} - 6px) / 2 + 8px);
+        right: calc((#{$height} - 6px) * 52 / 32 - 2px - (#{$height} - 6px - 4px));
       }
       &.toggle-active {
         .toggle-inner {
@@ -85,63 +59,93 @@
         }
       }
     }
-  }
 
-  &.toggle-on {
-    &, &.toggle-square {
-      &:before {
-        transform: scale3d(0, 0, 0);
+    &.toggle-square {
+      &, & > .toggle-inner & > :before {
+        border-radius: plv(box-size-normal-border-radius);;
       }
 
-      .toggle-inner {
-        right: 2px;
+      @include sizeMixin(toggle, ()) {
+        height: calc(#{$height} - 6px);
+        width: calc((#{$height} - 6px) * 52 / 30);
+
+        &.toggle-on {
+          .toggle-inner {
+            left: calc((#{$height} - 6px) / 2 + 8px);
+          }
+        }
+        .toggle-inner {
+          right: calc((#{$height} - 6px) / 2 + 8px);
+        }
+        &.toggle-active {
+          .toggle-inner {
+            right: calc((#{$height} - 6px) / 2);
+          }
+
+          &.toggle-on .toggle-inner {
+            left: calc((#{$height} - 6px) / 2);
+          }
+        }
       }
     }
-  }
 
-  &.toggle-active {
-    &, &.toggle-square {
-      .toggle-inner {
-        left: 2px;
-      }
+    &.toggle-on {
+      &, &.toggle-square {
+        &:before {
+          transform: scale3d(0, 0, 0);
+        }
 
-      &.toggle-on .toggle-inner {
-        right: 2px;
+        .toggle-inner {
+          right: 2px;
+        }
       }
     }
-  }
 
-  @include statusMixin(toggle) {
-    &.toggle-on {
-      background-color: $color-6;
-    }
-    &:after {
-      border-color: $color-6;
-    }
-    /*&:focus {
-      .toggle-inner {
-        background-color: $color-4;
+    &.toggle-active {
+      &, &.toggle-square {
+        .toggle-inner {
+          left: 2px;
+        }
+
+        &.toggle-on .toggle-inner {
+          right: 2px;
+        }
       }
-    }*/
-  }
+    }
 
-  &.toggle-disabled {
-    cursor: not-allowed;
+    @include statusMixin(toggle) {
+      &.toggle-on {
+        background-color: $color-6;
+      }
+      &:after {
+        border-color: $color-6;
+      }
+      /*&:focus {
+        .toggle-inner {
+          background-color: $color-4;
+        }
+      }*/
+    }
 
-    background-color: plv(secondary-3);
+    &.toggle-disabled {
+      cursor: not-allowed;
 
-    &:before {
       background-color: plv(secondary-3);
-    }
 
-    .toggle-inner {
-      background-color: #eee;
-    }
+      &:before {
+        background-color: plv(secondary-3);
+      }
 
-    &.toggle-on {
-      @include statusMixin(toggle) {
-        background-color: $color-3;
+      .toggle-inner {
+        background-color: #eee;
+      }
+
+      &.toggle-on {
+        @include statusMixin(toggle) {
+          background-color: $color-3;
+        }
       }
     }
   }
+
 }

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

@@ -1,4 +1,4 @@
-import {computed, getComponentCls, onMounted, onUpdated, reactive, useClasses, useStyles, watch} from "plain-design-composition";
+import {computed, getComponentCls, onBeforeUnmount, onMounted, onUpdated, reactive, useClasses, useStyles, watch} from "plain-design-composition";
 import {createCounter} from 'plain-utils/utils/createCounter';
 import {delay} from "plain-utils/utils/delay";
 import './virtual-list.scss';
@@ -6,6 +6,7 @@ import Scroll from "../Scroll";
 import {unit} from "plain-utils/string/unit";
 import {createEnum} from "plain-utils/utils/createEnum";
 import {PlainObject} from "plain-utils/utils/event";
+import {addWindowListener} from "plain-utils/dom/addWindowListener";
 
 interface DataNode {
   start: number;
@@ -71,12 +72,17 @@ export function useVirtualList(
   /*响应式属性*/
   const state = reactive({
     scrollValue: 0,                               // 当前滚动scrollTop（非实时的）
-    pageSize: 0,                                // 页大小
+    hostSize: null as null | number,              // 容器高度
     scrollDirection: ScrollDirection.none as typeof ScrollDirection.TYPE,
     id2size: {} as Record<string, number | undefined>,
     avgSize: props.size
   });
 
+  const _pageSize = computed(() => {
+    if (state.hostSize == null) {return null;}
+    return Math.floor(state.hostSize / (state.avgSize == null ? props.size : state.avgSize));
+  });
+
   const idMap = new WeakMap<PlainObject, string>();
   let prevEnd = 0;
 
@@ -102,7 +108,8 @@ export function useVirtualList(
    * @date    2020/11/15 9:28
    */
   const offsetData = computed((): { list: { item: any, id: string, index: number }[], startPageIndex: number, startIndex: number } => {
-    const { pageSize, scrollValue } = state;
+    const pageSize = _pageSize.value;
+    const { scrollValue } = state;
     if (!pageSize) {
       return { list: [], startPageIndex: 0, startIndex: 0 };
     }
@@ -142,7 +149,7 @@ export function useVirtualList(
    * @date    2020/12/16 10:48
    */
   const strutStyles = useStyles(style => {
-    if (!state.pageSize) {
+    if (!_pageSize.value) {
       return;
     }
     if (props.disabled) {
@@ -180,7 +187,7 @@ export function useVirtualList(
    */
   const contentStyles = useStyles(style => {
 
-    if (!state.pageSize) {
+    if (!_pageSize.value) {
       return;
     }
     if (props.disabled) {
@@ -257,11 +264,19 @@ export function useVirtualList(
      * @author  韦胜健
      * @date    2020/12/14 22:44
      */
-    getPageIndex: (scrollValue: number, pageSize: number) => {
+    getPageIndex: (scrollValue: number, pageSize: number | null | undefined) => {
       if (scrollValue < 0) {
         scrollValue = 0;
       }
       const data = dataModel.value || [];
+      if (pageSize == null) {
+        return {
+          data,
+          startIndex: 0,
+          endIndex: 0,
+          pageIndex: 0,
+        };
+      }
       /*当前scrollTop对应的数据中数据的索引*/
       let scrollIndex = utils.getIndex(scrollValue);
       let pageIndex = Math.floor(scrollIndex / pageSize);
@@ -306,7 +321,7 @@ export function useVirtualList(
         pageIndex,
       };
     },
-    resetPageSize: () => {
+    resetHostSize: () => {
       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;
@@ -316,10 +331,8 @@ export function useVirtualList(
       if (!!footEl) {
         hostSize -= footEl[props.horizontal ? 'offsetWidth' : 'offsetHeight'];
       }
-
-      const newPageSize = Math.floor(hostSize / props.size);
-      if (newPageSize != state.pageSize) {
-        state.pageSize = newPageSize;
+      if (state.hostSize != hostSize) {
+        state.hostSize = hostSize;
       }
     },
   };
@@ -335,7 +348,7 @@ export function useVirtualList(
       const newScrollValue = (e.target as HTMLDivElement)[props.horizontal ? 'scrollLeft' : 'scrollTop'];
       state.scrollDirection = newScrollValue > freezeState.scrollValue ? ScrollDirection.end : ScrollDirection.start;
       freezeState.scrollValue = newScrollValue;
-      const current = utils.getPageIndex((e.target as HTMLDivElement).scrollTop, state.pageSize);
+      const current = utils.getPageIndex((e.target as HTMLDivElement).scrollTop, _pageSize.value);
       state.scrollValue = (e.target as HTMLDivElement)[props.horizontal ? 'scrollLeft' : 'scrollTop'];
       freezeState.current = current;
       emit.onPageIndexChange(current);
@@ -344,7 +357,7 @@ export function useVirtualList(
 
   watch(() => dataModel.value || [], (data: any[]) => {
     delay().then(() => {
-      utils.resetPageSize();
+      utils.resetHostSize();
     });
     if (props.disabled) {
       return;
@@ -357,9 +370,13 @@ export function useVirtualList(
 
   onMounted(async () => {
     await delay(23);
-    utils.resetPageSize();
+    utils.resetHostSize();
   });
 
+  onBeforeUnmount(
+    addWindowListener('resize', () => delay(23).then(utils.resetHostSize))
+  );
+
   onUpdated(async () => {
     if (props.disabled) {
       return;

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

@@ -2,6 +2,7 @@ import {createEffects} from 'plain-utils/utils/createEffects';
 import {getComponentCls, nextTick, onBeforeUnmount, reactive, watch} from "plain-design-composition";
 import {iPopupService, usePopup} from "../usePopup/usePopup";
 import {iPopupUseOption} from "../usePopup/utils/popup.utils";
+import {delay} from "plain-utils/utils/delay";
 
 /**
  * 提供两种用法，第一种实时地创建tooltip
@@ -147,7 +148,7 @@ export function createTooltip(option: iTooltipServiceOption, popup: iPopupServic
         },
       )
     );
-    const close = () => popup.$popup.hide(popup.popupId);
+    const close = () => {delay(23).then(() => {popup.$popup.hide(popup.popupId);});};
     effects.push(close);
     return { close };
   })();

package/src/packages/entry.tsx

@@ -116,6 +116,11 @@ export {StackCard} from './components/StackCard';
 export {StackCardItem} from './components/StackCardItem';
 export {SortList} from './components/SortList';
 export {Space} from './components/Space';
+export {Box} from './components/Box';
+export {PageCard} from './components/PageCard';
+export {PageCardTitle} from './components/PageCardTitle';
+export {PageCardContent} from './components/PageCardContent';
+export {RollingNumber} from './components/RollingNumber';
 
 export {VirtualTable} from './components/VirtualTable';
 export {Table} from './components/Table';
@@ -174,7 +179,7 @@ export type {
   iTableOuterOperationConfig,
   iTableOperationPermitConfig
 } from './components/Table/standard/PlcOperation/PlcOperation.utils';
-export {iTreeProps, iTreeState, iTreeKey2CheckStatus, iTreeKeyOrNode, iTreeNodeComputedData} from './components/TreeCore/TreeCore.type';
+export type {iTreeProps, iTreeState, iTreeKey2CheckStatus, iTreeKeyOrNode, iTreeNodeComputedData} from './components/TreeCore/TreeCore.type';
 
 export {$configuration} from './components/$configuration';
 export {createAddressService} from './components/createAddressService';
@@ -216,6 +221,19 @@ export {FormToggle} from './components/FormToggle';
 export {FilterFormSingle} from './components/FilterFormSingle';
 export {FilterFormMultiple} from './components/FilterFormMultiple';
 export {FilterService} from './components/FilterService';
+export type {
+  iValidateRule,
+  iValidateState,
+  iAnotherRule,
+  iFormItemValidatePropsType,
+  iFormValidatePropsType,
+  iRegistrationValidator,
+  iValidateResult,
+  iValidateValueGetter,
+  iValidationDisabledFields,
+  iValidationReadonlyFields,
+  iValidatorParam,
+} from './components/Form/validate/validate.utils';
 
 export {TableOptionUtils} from './components/TableOptionUtils';
 export {TableOptionSpace} from './components/TableOptionSpace';
@@ -238,7 +256,7 @@ export {createProvider} from './components/createProvider';
 export {usePopupManager} from './components/usePopupManager';
 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 {useStyle, StyleProps, ThemeShape, ThemeSize, ThemeStatus, InputMode} from './uses/useStyle';
 export type {tStyleComputed, UseStyleProvideData} from './uses/useStyle';
 export {AutoLoadingObserver} from './components/AutoLoadingObserver';
 export {lighter, darken} from './utils/color.utils';

package/src/packages/i18n/lang/en-us.ts

@@ -117,6 +117,8 @@ export const EnUsLocale: tZhCnLocale = {
       save: 'Save',
       done: 'Done',
     },
+    yes: 'YES',
+    no: 'NO',
   },
   formatter: {
     week: 'Year gggg,week ww',

package/src/packages/i18n/lang/zh-cn.ts

@@ -115,6 +115,8 @@ export const ZhCnLocale = {
       save: '保存',
       done: '完成',
     },
+    yes:'是',
+    no:'否',
   },
   formatter: {
     week: 'gggg年第ww周',

package/src/packages/styles/global.import.scss

@@ -98,6 +98,22 @@
         #{$attr}: plv(box-size-#{$key}-#{$attr});
       }
       @content;
+
+      &.mt{margin-top: $margin}
+      &.mb{margin-bottom: $margin}
+      &.ml{margin-left: $margin}
+      &.mr{margin-right: $margin}
+      &.mx{margin-left: $margin;margin-right: $margin}
+      &.my{margin-top: $margin;margin-bottom: $margin}
+      &.margin {margin: $margin}
+
+      &.pt{padding-top: $margin}
+      &.pb{padding-bottom: $margin}
+      &.pl{padding-left: $margin}
+      &.pr{padding-right: $margin}
+      &.px{padding-left: $margin;padding-right: $margin}
+      &.py{padding-top: $margin;padding-bottom: $margin}
+      &.padding {padding: $margin}
     }
   }
 }

package/src/packages/uses/useStyle.tsx

@@ -12,22 +12,25 @@ export const ThemeMode = createEnum(['fill', 'flat', 'outline', 'text', 'stroke'
 export const ThemeStatus = createEnum(['secondary', 'primary', 'success', 'warn', 'error'] as const);
 export const ThemeShape = createEnum(['square', 'round', 'none'] as const);
 export const ThemeSize = createEnum(['large', 'normal', 'small', 'mini'] as const);
-export const InputMode = createEnum(['flat', 'stroke'] as const);
+export const InputMode = createEnum(['flat', 'stroke', 'text'] as const);
 
 export const StyleProps = {
   shape: { type: String as PropType<typeof ThemeShape.TYPE> },                      //  'square', 'round'
   size: { type: String as PropType<typeof ThemeSize.TYPE> },                        //  'large', 'normal', 'small', 'mini'
   status: { type: String as PropType<typeof ThemeStatus.TYPE> },                    //  'secondary', 'primary', 'success', 'warn', 'error'
+  inputMode: { type: String as PropType<typeof InputMode.TYPE> },                   // input的样式类型,flat填充，stroke线型
 } as const;
 
 export interface UseStyleProvideData {
   shape: typeof ThemeShape.TYPE,
   size: typeof ThemeSize.TYPE,
   status?: typeof ThemeStatus.TYPE,
+  inputMode?: typeof InputMode.TYPE,
+
   default: {
     shape: typeof ThemeShape.TYPE,
     size: typeof ThemeSize.TYPE,
-    inputMode: 'stroke' | 'flat',
+    inputMode: typeof InputMode.TYPE,
     buttonMode: typeof ThemeMode.TYPE,
   },
 }
@@ -44,14 +47,15 @@ export const useStyle = useFunctionWrapper('style', (ctx, option: UseStyleOption
   const parent = inject(USE_STYLE_PROVIDER, null) as null | { value: UseStyleProvideData };
 
   const styleComputed = computed(() => {
-    const defaultData = Object.assign({ shape: applicationConfiguration.value.default.shape, size: applicationConfiguration.value.default.size }, option);
+    const defaultData = Object.assign({ shape: applicationConfiguration.value.default.shape, size: applicationConfiguration.value.default.size, inputMode: applicationConfiguration.value.default.inputMode }, option);
 
-    const { shape, size, status } = ctx.props;
+    const { shape, size, status, inputMode } = ctx.props;
     const parentData = !!parent ? parent.value : {} as any;
     let data: UseStyleProvideData = {
       shape: shape || parentData.shape || defaultData.shape,
       size: size || parentData.size || defaultData.size,
       status: status || parentData.status || defaultData.status,
+      inputMode: inputMode || parentData.inputMode || defaultData.inputMode,
       default: applicationConfiguration.value.default
     };
     if (!!defaultData.adjust) {

package/src/packages/utils/renderInputModeTextRangeValue.tsx

@@ -0,0 +1,25 @@
+import {tStyleComputed} from "../uses/useStyle";
+import Icon from "../components/Icon";
+
+export const renderInputModeTextRangeValue = (
+  {
+    styleComputed,
+    startValue,
+    endValue,
+    defaultRender,
+  }: {
+    styleComputed: tStyleComputed,
+    startValue: any,
+    endValue: any,
+    defaultRender: () => any,
+  }) => {
+  if (styleComputed.value.inputMode !== 'text') {
+    return defaultRender();
+  } else {
+    return <>
+      {startValue != null && <span>{startValue}</span>}
+      <Icon icon="pi-arrow-right" className="input-mode-text-separate-icon"/>
+      {endValue != null && <span>{endValue}</span>}
+    </>;
+  }
+};