plain-design 1.0.0-beta.1 → 1.0.0-beta.100

package/src/packages/components/LayoutSection/useLayoutSectionResizer.tsx

@@ -0,0 +1,184 @@
+import Icon from "../Icon";
+import {eLayoutSectionPosition} from "../Layout/layout.utils";
+import {cacheComputed, computed, getComponentCls, iHTMLDivElement, iMouseEvent, useRefs} from "plain-design-composition";
+import {createEffects} from "plain-utils/utils/createEffects";
+import {ClientZoom} from "../../utils/ClientZoom";
+
+export function useLayoutSectionResizer(
+  {
+    model,
+    collapseModel,
+    props
+  }: {
+    model: { value?: number },
+    collapseModel: { value?: boolean },
+    props: { position: typeof eLayoutSectionPosition.TYPE }
+  }
+) {
+
+  const { refs, onRef } = useRefs({ sep: iHTMLDivElement });
+
+  const isVertical = computed(() => props.position === eLayoutSectionPosition.top || props.position === eLayoutSectionPosition.bottom);
+
+  const icon = cacheComputed(() => {
+    switch (props.position) {
+      case "center":
+        return null;
+      case "left":
+        return collapseModel.value ? 'pi-caret-right' : 'pi-caret-left';
+      case "right":
+        return collapseModel.value ? 'pi-caret-left' : 'pi-caret-right';
+      case "top":
+        return collapseModel.value ? 'pi-caret-down' : 'pi-caret-up';
+      case "bottom":
+        return collapseModel.value ? 'pi-caret-up' : 'pi-caret-down';
+    }
+    return null;
+  });
+
+  const draggier = computed(() => {
+    return isVertical.value ? (() => {
+      const { effects } = createEffects();
+
+      let staticState = null as null | {
+        startY: number,
+        moveY: number,
+        startValue: number,
+        shadowEl: HTMLDivElement,
+      };
+
+      const onMousedown = (e: iMouseEvent) => {
+
+        const { clientY } = ClientZoom.getClientPosition(e);
+
+        const shadowEl = (() => {
+          const rect = refs.sep!.getBoundingClientRect();
+          const el = document.createElement('div');
+          el.style.height = '1px';
+          el.style.position = 'fixed';
+          el.style.left = `${rect.left}px`;
+          el.style.top = `${clientY}px`;
+          el.style.width = `${rect.width}px`;
+          el.style.zIndex = "10";
+          el.style.backgroundColor = `var(--${getComponentCls('primary-6')})`;
+          document.body.appendChild(el);
+          effects.push(() => {
+            document.body.removeChild(el);
+          });
+          return el;
+        })();
+
+        staticState = {
+          startY: clientY,
+          moveY: clientY,
+          startValue: model.value!,
+          shadowEl,
+        };
+
+        window.addEventListener('mousemove', onMousemove);
+        window.addEventListener('mouseup', effects.clear);
+        effects.push(() => {
+          if (!staticState) {return;}
+          let durY = staticState!.moveY - staticState!.startY;
+          if (props.position === eLayoutSectionPosition.bottom) {
+            durY = -durY;
+          }
+          model.value = staticState.startValue + durY;
+          staticState = null;
+          window.removeEventListener('mousemove', onMousemove);
+          window.removeEventListener('mouseup', effects.clear);
+        });
+      };
+
+      const onMousemove = (e: MouseEvent) => {
+        if (!staticState) {return;}
+        const { clientY } = ClientZoom.getClientPosition(e);
+        staticState.moveY = clientY;
+        staticState.shadowEl.style.top = `${clientY}px`;
+      };
+
+      return {
+        onMousedown
+      };
+    })() : (() => {
+      const { effects } = createEffects();
+
+      let staticState = null as null | {
+        startX: number,
+        moveX: number,
+        startValue: number,
+        shadowEl: HTMLDivElement,
+      };
+
+      const onMousedown = (e: iMouseEvent) => {
+
+        const { clientX } = ClientZoom.getClientPosition(e);
+
+        const shadowEl = (() => {
+          const rect = refs.sep!.getBoundingClientRect();
+          const el = document.createElement('div');
+          el.style.width = '1px';
+          el.style.position = 'fixed';
+          el.style.top = `${rect.top}px`;
+          el.style.left = `${clientX}px`;
+          el.style.height = `${rect.height}px`;
+          el.style.zIndex = "10";
+          el.style.backgroundColor = `var(--${getComponentCls('primary-6')})`;
+          document.body.appendChild(el);
+          effects.push(() => {
+            document.body.removeChild(el);
+          });
+          return el;
+        })();
+
+        staticState = {
+          startX: clientX,
+          moveX: clientX,
+          startValue: model.value!,
+          shadowEl,
+        };
+
+        window.addEventListener('mousemove', onMousemove);
+        window.addEventListener('mouseup', effects.clear);
+        effects.push(() => {
+          if (!staticState) {return;}
+          let durX = staticState!.moveX - staticState!.startX;
+          if (props.position === eLayoutSectionPosition.right) {
+            durX = -durX;
+          }
+          model.value = staticState.startValue + durX;
+          staticState = null;
+          window.removeEventListener('mousemove', onMousemove);
+          window.removeEventListener('mouseup', effects.clear);
+        });
+      };
+
+      const onMousemove = (e: MouseEvent) => {
+        if (!staticState) {return;}
+        const { clientX } = ClientZoom.getClientPosition(e);
+        staticState.moveX = clientX;
+        staticState.shadowEl.style.left = `${clientX}px`;
+      };
+
+      return {
+        onMousedown
+      };
+    })();
+  });
+
+  const toggleCollapse = () => collapseModel.value = !collapseModel.value;
+
+  const render = () => {
+    return (
+      !icon.value ? null :
+        <>
+          {!collapseModel.value && <div className="layout-section-separator" onMouseDown={draggier.value.onMousedown} ref={onRef.sep}/>}
+          <div className="layout-section-collapse-btn" onClick={toggleCollapse}>
+            <Icon icon={icon.value}/>
+          </div>
+        </>
+    );
+  };
+
+  return { render };
+}

package/src/packages/components/Loading/loading.scss

@@ -1,4 +1,6 @@
 @include prefix(loading) {
+  transform: scale(0.88);
+  transform-origin: center;
   @include statusMixin(loading) {
     color: $color-6;
   }

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

@@ -53,7 +53,7 @@ export const LoadingMask = designComponent({
         if (props.fixedPosition) {
           return;
         }
-        await delay();
+        await delay(23);
         const el = refs.el;
         if (el) {
           let parentNode = el.parentNode as HTMLElement;

package/src/packages/components/Object/createObjectRender.multiple.tsx

@@ -241,7 +241,7 @@ export function createObjectRenderMultiple(
       /*禁用select的输入筛选，让select不处理搜索关键词避免隐藏部分option选项*/
       disableFilter: true,
       /*没有关键词的时候，提示输入关键词，已经有关键词并且没有选项的情况下提示placeholder*/
-      noDataLabel: !inputHandler.state.multipleText && state.option == null ? (props.searchPlaceholder || i18n('table.pleaseEnterSearchKey').d('请输入搜索关键词')) : undefined
+      noDataLabel: !inputHandler.state.multipleText && state.option == null ? (props.searchPlaceholder || i18n.$it('table.pleaseEnterSearchKey').d('请输入搜索关键词')) : undefined
     }));
     return { state, popperAttrs, onSelectChange, selectAttrs, reset };
 

package/src/packages/components/Object/createObjectRender.single.tsx

@@ -38,8 +38,12 @@ export function createObjectRenderSingle(
       if (!selected) {
         publicHandler.onClear();
       } else {
-        const newRow = convertSelectedToRow(selected, props.map);
-        !!props.row && Object.assign(props.row, newRow);
+        if (props.bindRowModel) {
+          event.emit.onUpdateRow(selected);
+        } else {
+          const newRow = convertSelectedToRow(selected, props.map);
+          !!props.row && Object.assign(props.row, newRow);
+        }
       }
       inputHandler.state.inputValue = selected?.[props.labelField];
       event.emit.onSelect(selected);
@@ -163,7 +167,7 @@ export function createObjectRenderSingle(
       /*禁用select的输入筛选，让select不处理搜索关键词避免隐藏部分option选项*/
       disableFilter: true,
       /*没有关键词的时候，提示输入关键词，已经有关键词并且没有选项的情况下提示placeholder*/
-      noDataLabel: !inputHandler.state.inputValue && state.option == null ? (props.searchPlaceholder || i18n('table.pleaseEnterSearchKey').d('请输入搜索关键词')) : undefined
+      noDataLabel: !inputHandler.state.inputValue && state.option == null ? (props.searchPlaceholder || i18n.$it('table.pleaseEnterSearchKey').d('请输入搜索关键词')) : undefined
     }));
     return { state, popperAttrs, onSelectChange, selectAttrs };
   })();

package/src/packages/components/Object/object.scss

@@ -1,11 +1,24 @@
 @include comp(object) {
   .object-icon {
     cursor: pointer;
-    padding-right: calc(#{plv(input-padding-x)} - 4px);
-    padding-left: calc(#{plv(input-padding-x)} - 4px);
 
     &:active {
       background-color: plv(secondary-light-2);
     }
   }
+  @include sizeMixin(input, ()) {
+    span.object-icon {
+      width: calc(#{$height} - 2px);
+      padding: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}
+
+@include comp(object-dialog) {
+  .auto-table-title {
+    display: none
+  }
 }

package/src/packages/components/Object/object.utils.ts

@@ -9,8 +9,9 @@ import {TableOptionSpace} from "../AutoTable/utils/TableOption.space";
 export const ObjectPropsOption = {
   ...EditProps,
   modelValue: { type: [Array, String, Number] as PropType<any[] | string | number> },       // 双向绑定值，单选的时候是显示值，多选时为绑定的数组
-  option: { type: Object as PropType<TableOptionSpace.iTableOption>, required: true },                       // TableOption对象
+  option: { type: Object as PropType<TableOptionSpace.iTableOption>, required: true },      // TableOption对象
   row: { type: Object as PropType<PlainObject> },                                           // 行对象或者说是表单对象，单选完毕时会根据map将选中行的字段值更新到row对象上
+  bindRowModel: { type: Boolean },                                                          // 绑定row，在单选的情况下选中行数据时，会将行数据通过onUpdateRow事件派发以更新v-model:row的绑定值
   map: { type: Object as PropType<iObjectServicePickConfig['map']> },                       // 映射关系，选择完毕时会根据map将值映射到结果对象中
   multiple: { type: Boolean },                                                              // 是否为多选
   service: { type: Object as PropType<iObjectService> },                                    // 自定义服务
@@ -27,6 +28,7 @@ export type iObjectPropsType = ExtractPropTypes<typeof ObjectPropsOption>
 
 export const ObjectEmitsOption = {
   onUpdateModelValue: (val?: string | number | any[]) => true,
+  onUpdateRow: (val?: PlainObject) => true,
   onFocus: (e: FocusEvent) => true,
   onBlur: (e: FocusEvent) => true,
   onSelect: (selected: any) => true,

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

@@ -0,0 +1,48 @@
+import {designComponent, getComponentCls, useClassCache, useModel} from "plain-design-composition";
+import {StyleProps, useStyle} from "../../uses/useStyle";
+import {Box} from "../Box";
+import './page-card.scss';
+
+export const PageCard = designComponent({
+  name: 'page-card',
+  inheritPropsType: Box,
+  provideRefer: true,
+  props: {
+    modelValue: { type: Boolean, default: null },
+    collapsable: { type: Boolean },
+    full: { type: Boolean },
+    ...StyleProps,
+  },
+  slots: ['default'],
+  emits: {
+    onUpdateModelValue: (val: boolean) => true,
+  },
+  setup({ props, slots, event: { emit } }) {
+
+    const model = useModel(() => props.modelValue, emit.onUpdateModelValue);
+
+    const { styleComputed } = useStyle();
+
+    const classes = useClassCache(() => [
+      getComponentCls('page-card'),
+      `page-card-size-${styleComputed.value.size}`,
+      {
+        'page-card-full': props.full,
+      }
+    ]);
+
+    return {
+      refer: {
+        props,
+        model,
+      },
+      render: () => (
+        <div className={classes.value}>
+          {slots.default()}
+        </div>
+      )
+    };
+  },
+});
+
+export default PageCard;

package/src/packages/components/PageCard/page-card.scss

@@ -0,0 +1,124 @@
+@include comp(page-card) {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+
+  & > * {
+    background-color: plv(bg-2);
+
+    & + * {
+      border-top: solid 1px plv(border-color);
+    }
+  }
+
+  &.page-card-full {
+    height: 100%;
+    width: 100%;
+  }
+
+  .#{componentName(page-card-title)} {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .page-card-title-left {
+      display: flex;
+      align-items: center;
+
+      .page-card-title-icon {
+        color: plv(primary-6);
+        height: 1em;
+        width: 1em;
+        position: relative;
+        margin-right: 0.75em;
+
+        .page-card-title-icon-inner {
+          position: absolute;
+          inset: -4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background-color: plv(primary-1);
+        }
+
+        &.page-card-title-icon-collapse {
+          .page-card-title-icon-inner {
+            cursor: pointer;
+            user-select: none;
+            background-color: transparent;
+          }
+        }
+      }
+    }
+
+    .page-card-title-right {
+      color: plv(primary-6);
+      cursor: pointer;
+    }
+  }
+
+  /*@formatter:off*/
+  @include comp(page-card-content) {
+    box-sizing: border-box;
+    &.page-card-content-align-left{text-align: left}
+    &.page-card-content-align-center{text-align: center}
+    &.page-card-content-align-right{text-align: right}
+    @include sizeMixin(page-card-content, ()) {}
+    &.page-card-content-full {
+      flex: 1;
+      position: relative;
+      .page-card-content-full-inner{
+        position: absolute;
+        inset: 0;
+        padding: inherit;
+      }
+    }
+  }
+  @include comp(page-card-title) {
+    box-sizing: border-box;
+    @include sizeMixin(page-card-title, ()) {}
+  }
+  /*@formatter:on*/
+
+  @include sizeMixin(page-card, (font-size)) {
+    & + * {
+      margin-top: $margin;
+    }
+
+    & > *:not(.no-padding) {
+      padding: $margin;
+    }
+
+    & > * {
+      &:first-child {
+        border-top-left-radius: $border-radius;
+        border-top-right-radius: $border-radius;
+      }
+
+      &:last-child {
+        border-bottom-left-radius: $border-radius;
+        border-bottom-right-radius: $border-radius;
+      }
+    }
+
+    .#{componentName(page-card-title)} {
+
+      .page-card-title-left {
+        .page-card-title-icon-inner {
+          border-radius: $border-radius;
+        }
+      }
+
+      .page-card-title-right {
+        & > * + * {
+          margin-left: $margin;
+        }
+      }
+    }
+
+    .#{componentName(page-card-content)} {
+    }
+  }
+
+
+}

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

@@ -0,0 +1,44 @@
+import {designComponent, getComponentCls, PropType, useClassCache} from "plain-design-composition";
+import {StyleProps, useStyle} from "../../uses/useStyle";
+import PageCard from "../PageCard";
+
+export const PageCardContent = designComponent({
+  name: 'page-card-content',
+  props: {
+    align: { type: String as PropType<'left' | 'center' | 'right'> },
+    full: { type: Boolean },
+    noPadding: { type: Boolean },
+    ...StyleProps,
+  },
+  slots: ['default'],
+  setup({ props, slots }) {
+
+    const pageCard = PageCard.use.inject();
+
+    const { styleComputed } = useStyle();
+
+    const classes = useClassCache(() => [
+      getComponentCls('page-card-content'),
+      `page-card-content-size-${styleComputed.value.size}`,
+      {
+        [`page-card-content-align-${props.align}`]: !!props.align,
+        'page-card-content-full': props.full,
+        'no-padding': props.noPadding,
+      }
+    ]);
+
+    return () => (
+      pageCard.model.value != false && (
+        <div className={classes.value}>
+          {
+            props.full ?
+              (<div className="page-card-content-full-inner">
+                {slots.default()}
+              </div>) :
+              slots.default()
+          }
+        </div>
+      )
+    );
+  },
+});

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

@@ -0,0 +1,51 @@
+import {designComponent, getComponentCls, useClassCache} from "plain-design-composition";
+import {StyleProps, useStyle} from "../../uses/useStyle";
+import Icon from "../Icon";
+import PageCard from "../PageCard";
+
+export const PageCardTitle = designComponent({
+  name: 'page-card-title',
+  props: {
+    title: { type: String },
+    icon: { type: String },
+    ...StyleProps,
+  },
+  slots: ['default', 'titleContent'],
+  setup({ props, slots }) {
+
+    const pageCard = PageCard.use.inject();
+
+    const { styleComputed } = useStyle();
+
+    const classes = useClassCache(() => [
+      getComponentCls('page-card-title'),
+      `page-card-title-size-${styleComputed.value.size}`
+    ]);
+
+    return () => (
+      <div className={classes.value}>
+        <div className="page-card-title-left">
+          {pageCard.props.collapsable && (
+            <div className="page-card-title-icon page-card-title-icon-collapse">
+              <div className="page-card-title-icon-inner" onClick={() => pageCard.model.value = pageCard.model.value === false}>
+                <Icon icon={pageCard.model.value == false ? 'pi-caret-right' : 'pi-caret-down'}/>
+              </div>
+            </div>
+          )}
+          {!!props.icon && (
+            <div className="page-card-title-icon">
+              <div className="page-card-title-icon-inner">
+                <Icon icon={props.icon}/>
+              </div>
+            </div>
+          )}
+          <span>{slots.titleContent(props.title)}</span>
+        </div>
+        <div className="page-card-title-right">
+          {slots.default()}
+        </div>
+      </div>
+    );
+
+  },
+});

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

@@ -0,0 +1,22 @@
+import {designComponent, onBeforeUnmount} from "plain-design-composition";
+import {usePageRenderContext} from "../usePageRenderContext";
+
+export const PageRenderList = designComponent({
+  name: 'page-render-list',
+  props: {},
+  slots: ['default'],
+  setup({ props, slots }) {
+
+    const pageRenderContext = usePageRenderContext();
+
+    onBeforeUnmount(pageRenderContext.renderHook.use({
+      separate: false,
+      processor: ({ list, render }) => {list.push({ render, key: '', seq: 1 });},
+      render: () => slots.default()
+    }));
+
+    return () => {
+      return pageRenderContext.renderHook.exec();
+    };
+  },
+});

package/src/packages/components/PageThemeUtils/deepmerge.ts

@@ -0,0 +1,21 @@
+export function deepmerge(...list: any[]): any {
+  list = list.filter(i => i != null);
+  if (!list.length || list.length == 1) {
+    return list[0];
+  }
+  let result: any = {};
+  list.forEach((item) => {
+    for (let key in item) {
+      if (typeof item[key] !== "object") {
+        result[key] = item[key];
+      } else {
+        if (result[key] == undefined) {
+          result[key] = item[key];
+        } else {
+          result[key] = deepmerge(result[key], item[key]);
+        }
+      }
+    }
+  });
+  return result;
+}