plain-design 1.0.0-beta.4 → 1.0.0-beta.40

package/src/packages/components/CascadePanel/list/CascadeListPanelItem.tsx

@@ -59,13 +59,13 @@ export const CascadeListPanelItem = designComponent({
               return (
                 <VirtualList data={props.treeNodes} size={CascadePanelVirtualSize[panel.styleComputed.value.size]} dynamicSize>
                   {{
-                    default: ({ item: treeNode, index, virtualIndex }: { item: iTreeNode, index: number, virtualIndex: number }) => (
+                    default: ({ item: treeNode, index, vIndex, vid }: { item: iTreeNode, index: number, vIndex: number, vid: string }) => (
                       <CascadeListPanelNode
-                        data-vid={index}
+                        data-vid={vid}
                         treeNode={treeNode}
                         treeNodes={props.treeNodes}
                         index={index}
-                        key={virtualIndex}
+                        key={vIndex}
                         handleClickNode={props.handleClickNode}
                         {...props.nodeAttrs}
                       >

package/src/packages/components/CheckboxInner/checkbox-inner.scss

@@ -14,7 +14,7 @@
 
     .checkbox-inner-check-polyline {
       fill: transparent;
-      stroke: white;
+      stroke: plv(pbfc);
       stroke-width: 10;
     }
   }

package/src/packages/components/ColorPicker/sub/ColorSlider.tsx

@@ -5,6 +5,7 @@ import {createEffects} from "plain-utils/utils/createEffects";
 import {disabledUserSelect} from "plain-utils/dom/disabledUserSelect";
 import {enableUserSelect} from "plain-utils/dom/enableUserSelect";
 import './color-slider.scss';
+import {ClientZoom} from "../../ClientZoom";
 
 export const ColorSlider = designComponent({
   name: 'color-slider',
@@ -110,12 +111,13 @@ export const ColorSlider = designComponent({
       };
       const handler = {
         onMousedown: (e: iMouseEvent) => {
-          utils.setOffsetX(e.nativeEvent.offsetX);
+          const { clientX, clientY, offsetX } = ClientZoom.getClientPosition(e);
+          utils.setOffsetX(offsetX);
           staticState = {
             start: {
-              x: e.clientX,
-              y: e.clientY,
-              offsetX: e.nativeEvent.offsetX,
+              x: clientX,
+              y: clientY,
+              offsetX: offsetX,
             }
           };
           draggierEffects.push(() => staticState = null);
@@ -129,7 +131,8 @@ export const ColorSlider = designComponent({
         },
         onMousemove: (e: MouseEvent) => {
           if (!staticState) {return;}
-          const durX = e.clientX - staticState.start.x;
+          const { clientX } = ClientZoom.getClientPosition(e);
+          const durX = clientX - staticState.start.x;
           const newOffsetX = durX + staticState.start.offsetX;
           utils.setOffsetX(newOffsetX);
         },

package/src/packages/components/ColorPicker/sub/ColorSvPanel.tsx

@@ -5,6 +5,7 @@ import {disabledUserSelect} from "plain-utils/dom/disabledUserSelect";
 import {enableUserSelect} from "plain-utils/dom/enableUserSelect";
 import {getRgbColor} from "../../../utils/color.utils";
 import Color from 'color';
+import {ClientZoom} from "../../..";
 
 export const ColorSvPanel = designComponent({
   name: 'color-sv-panel',
@@ -71,14 +72,16 @@ export const ColorSvPanel = designComponent({
         document.body.addEventListener('mousemove', handler.mousemove);
         document.body.addEventListener('mouseup', handler.mouseup);
         disabledUserSelect();
-        methods.updatePosition(e.nativeEvent.offsetX, e.nativeEvent.offsetY);
-        state.startX = e.clientX;
-        state.startY = e.clientY;
+        const { offsetX, offsetY, clientX, clientY } = ClientZoom.getClientPosition(e);
+        methods.updatePosition(offsetX, offsetY);
+        state.startX = clientX;
+        state.startY = clientY;
         state.tempSaturation = state.saturation as number;
         state.tempValue = state.val as number;
       },
       mousemove: (e: MouseEvent) => {
-        methods.updatePosition(e.clientX - state.startX, e.clientY - state.startY, false);
+        const { clientX, clientY } = ClientZoom.getClientPosition(e);
+        methods.updatePosition(clientX - state.startX, clientY - state.startY, false);
       },
       mouseup: () => {
         document.body.removeEventListener('mousemove', handler.mousemove);

package/src/packages/components/DatePicker/date.scss

@@ -141,7 +141,7 @@ $width: 276px;
 
           & > span {
             background-color: plv(primary-6);
-            color: white;
+            color: plv(pbfc);
           }
         }
       }

package/src/packages/components/Dialog/dialog.scss

@@ -138,7 +138,7 @@
 
           &:hover {
             @include prefix(icon) {
-              color: white;
+              color: plv(pbfc);
             }
 
             &:after {

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

@@ -42,6 +42,7 @@ export const Dialog = designComponent({
 
     noContentPadding: { type: Boolean },                                                    // 去掉内容默认内边距
     noHead: { type: Boolean, },                                                             // 去掉默认弹框标题
+    noFoot: { type: Boolean },                                                              // 去掉底部内容
     noMask: { type: Boolean },                                                              // 去掉遮罩
     noClose: { type: Boolean },                                                             // 去掉关闭按钮
 
@@ -253,9 +254,9 @@ export const Dialog = designComponent({
         showing.start();
         if (!state.init) {
           state.init = true;
-          await delay();
+          await delay(23);
           if (!refs.content) {
-            await delay();
+            await delay(23);
           }
         } else {
           await nextTick();
@@ -417,7 +418,7 @@ export const Dialog = designComponent({
                 <div className="dialog-body">
                   {slots.default()}
                 </div>
-                {(!!props.confirmButton || !!props.cancelButton || slots.foot.isExist()) && (
+                {!props.noFoot && (!!props.confirmButton || !!props.cancelButton || slots.foot.isExist()) && (
                   <div className="dialog-foot">
                     {slots.foot()}
                     {(() => {

package/src/packages/components/Dialog/useDialogMovable.tsx

@@ -1,4 +1,5 @@
 import {watchEffect} from "plain-design-composition";
+import {ClientZoom} from "../..";
 
 export function useDialogMovable({ refs, movable }: { refs: { head: HTMLElement | undefined | null, content: HTMLElement | undefined | null }, movable: { value: boolean } }) {
 
@@ -20,9 +21,10 @@ export function useDialogMovable({ refs, movable }: { refs: { head: HTMLElement
 
   const handler = {
     mousedown: (e: MouseEvent) => {
+      const { clientX, clientY } = ClientZoom.getClientPosition(e);
       staticState.start = {
-        x: e.clientX,
-        y: e.clientY,
+        x: clientX,
+        y: clientY,
         left: staticState.move.left,
         top: staticState.move.top,
       };
@@ -30,8 +32,9 @@ export function useDialogMovable({ refs, movable }: { refs: { head: HTMLElement
       document.documentElement.addEventListener('mouseup', handler.mouseup);
     },
     mousemove: (e: MouseEvent) => {
-      staticState.move.x = e.clientX;
-      staticState.move.y = e.clientY;
+      const { clientX, clientY } = ClientZoom.getClientPosition(e);
+      staticState.move.x = clientX;
+      staticState.move.y = clientY;
 
       const durX = staticState.move.x - staticState.start.x;
       const durY = staticState.move.y - staticState.start.y;

package/src/packages/components/Dialog/utils/dialog.mouse.ts

@@ -1,12 +1,14 @@
 import {isSSR} from "../../../utils/isSSR";
+import {ClientZoom} from "../../..";
 
 export const DialogMouse = (() => {
   const state = { x: 0, y: 0 };
 
   if (!isSSR()) {
     document.documentElement.addEventListener('mousedown', e => {
-      state.x = e.clientX;
-      state.y = e.clientY;
+      const { clientX, clientY } = ClientZoom.getClientPosition(e);
+      state.x = clientX;
+      state.y = clientY;
     }, true);
   }
 

package/src/packages/components/Dropdown/dropdown.public.scss

@@ -22,6 +22,16 @@
       transform-origin: left;
       font-weight: 700;
     }
+
+    &.dropdown-panel-size-equal {
+      width: 100%;
+    }
+
+    .dropdown-separator {
+      height: 1px;
+      background-color: plv(border-color);
+      margin: 2px 0;
+    }
   }
 
   &.dropdown-panel-align-center {

package/src/packages/components/Dropdown/dropdown.utils.tsx

@@ -89,17 +89,19 @@ export function renderDropdownPanel(
     attrs,
     externalClass,
     content,
+    sizeEqual,
   }: {
     size: string,
     align?: string,
     attrs?: any,
     externalClass?: any,
     content: RenderNode,
+    sizeEqual?: boolean,
   }
 ) {
   return (
     <div {...mergeAttrs({
-      class: [externalClass, getComponentCls('dropdown-panel'), `dropdown-panel-size-${size}`, `dropdown-panel-align-${align || DropdownOptionAlign.start}`],
+      class: [externalClass, getComponentCls('dropdown-panel'), `dropdown-panel-size-${size}`, `dropdown-panel-align-${align || DropdownOptionAlign.start}`, sizeEqual ? 'dropdown-panel-size-equal' : ''],
     }, attrs)}>
       {content}
     </div>

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

@@ -44,7 +44,7 @@ export const Dropdown = designComponent({
   scopeSlots: {
     reference: (scope: { open?: boolean }) => {},
   },
-  setup({ props, slots, event: { emit }, scopeSlots }) {
+  setup({ props, slots, event: { emit }, scopeSlots, attrs }) {
 
     const { styleComputed } = useStyle();
 
@@ -99,7 +99,7 @@ export const Dropdown = designComponent({
         return node?.type?.use?.name === DropdownOption.use.name || node?.type?.use?.name === DropdownGroup.use.name;
       });
 
-      const publicDropdownPanelParams = { size: styleComputed.value.size, align: props.align };
+      const publicDropdownPanelParams = { size: styleComputed.value.size, align: props.align, sizeEqual: attrs.sizeEqual };
 
       if (hasScroll || !dropdownOptions || dropdownOptions.length <= props.scrollOptionLength) {
         return renderDropdownPanel({

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

@@ -1,4 +1,4 @@
-import {computed, designComponent, PropType} from "plain-design-composition";
+import {computed, designComponent, iMouseEvent, PropType} from "plain-design-composition";
 import {DropdownContextProvider, DropdownOptionContextProvider, DropdownOptionTrigger, iDropdownOptionContext, renderDropdownOption} from "../Dropdown/dropdown.utils";
 import Icon from "../Icon";
 import {createCounter} from "plain-utils/utils/createCounter";
@@ -18,7 +18,7 @@ export const DropdownOption = designComponent({
   },
   slots: ['default', 'content'],
   emits: {
-    onClick: (e: MouseEvent) => true,
+    onClick: (e: iMouseEvent) => true,
   },
   setup({ props, event: { emit }, slots }) {
 
@@ -38,7 +38,7 @@ export const DropdownOption = designComponent({
     };
 
     const handler = {
-      onClick: (e: MouseEvent) => {
+      onClick: (e: iMouseEvent) => {
         if (props.disabled || props.readonly) {return;}
         emit.onClick(e);
         dropdown.handler.onClickOption(dropdownOptionContext);

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

@@ -0,0 +1,8 @@
+import {designComponent} from "plain-design-composition";
+
+export const DropdownSeparator = designComponent({
+  name: 'dropdown-separator',
+  setup() {
+    return () => (<div className="dropdown-separator"/>);
+  },
+});

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

@@ -1,4 +1,4 @@
-import {computed, designComponent, getComponentCls, PropType, reactive, useClasses, watch} from "plain-design-composition";
+import {computed, designComponent, getComponentCls, mergeAttrs, PropType, reactive, useClasses, watch} from "plain-design-composition";
 import {PlainObject} from "plain-utils/utils/event";
 import {Form} from "../Form";
 import {FormItem} from "../FormItem";
@@ -44,10 +44,14 @@ export type iFilterFormMultipleData = iFilterFormMultipleState & { filterQueryPa
 export const FilterFormMultiple = designComponent({
   name: 'filter-form-multiple',
   props: {
-    filterOptions: { type: Array as PropType<iFilterOption[]> },
-    initialState: { type: Object as PropType<iFilterFormMultipleState> },
-    formAttrs: { type: Object as PropType<typeof Form.use.props> },
-    column: { type: Number, default: 3 },
+    filterOptions: { type: Array as PropType<iFilterOption[]> },            // 删选表单配置对象
+    initialState: { type: Object as PropType<iFilterFormMultipleState> },   // 初始值
+    formAttrs: { type: Object as PropType<typeof Form.use.props> },         // 给Form传递的属性
+    column: { type: Number, default: 3 },                                   // 列数
+    hideSearchButton: { type: Boolean },                                    // 隐藏查询按钮
+    hideResetButton: { type: Boolean },                                     // 隐藏重置按钮
+    searchButtonAttrs: { type: Object as PropType<PlainObject> },           // 给查询按钮传递的属性
+    resetButtonAttrs: { type: Object as PropType<PlainObject> },            // 给重置按钮传递的属性
   },
   slots: ['operation'],
   emits: {
@@ -246,11 +250,28 @@ export const FilterFormMultiple = designComponent({
               if (formColumn == null) {return 1;}
               return Number(formColumn) - usingFilterOptions.value.length % Number(formColumn);
             })()}>
-              <div className="filter-form-multiple-operation">
-                {slots.operation()}
-                <Button label={i18n('base.reset').d('重置')} icon="pi-delete" onClick={methods.reset}/>
-                <Button label={i18n('base.query').d('查询')} mode="fill" icon="pi-search" onClick={methods.search}/>
-              </div>
+              {(!props.hideResetButton || !props.hideSearchButton || slots.operation.isExist()) && (
+                <div className="filter-form-multiple-operation">
+                  {slots.operation()}
+                  {!props.hideResetButton && (
+                    <Button {...mergeAttrs({
+                      label: i18n('base.reset').d('重置'),
+                      icon: "pi-delete",
+                      onClick: methods.reset
+                    }, props.resetButtonAttrs)}/>
+                  )}
+                  {!props.hideSearchButton && (
+                    <Button
+                      {...mergeAttrs({
+                        label: i18n('base.query').d('查询'),
+                        mode: "fill",
+                        icon: "pi-search",
+                        onClick: methods.search,
+                      }, props.searchButtonAttrs)}
+                    />
+                  )}
+                </div>
+              )}
             </FormItem>
           </Form>
         </div>

package/src/packages/components/Image/image.scss

@@ -6,7 +6,7 @@
   right: 0;
   bottom: 0;
   background-color: rgba(black, 0.85);
-  color: white;
+  color: plv(pbfc);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -213,7 +213,7 @@
   &.image-uploader-status-fail {
     .image-uploader-fail {
       background-color: rgba(black, 0.85);
-      color: white;
+      color: plv(pbfc);
     }
   }
 
@@ -247,7 +247,7 @@
       }
 
       .#{componentName(icon)} {
-        color: white;
+        color: plv(pbfc);
       }
     }
   }