plain-design 1.0.0-beta.15 → 1.0.0-beta.151

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

@@ -1,5 +1,5 @@
-import {ComponentEvent, ExtractPropTypes, PropType} from "plain-design-composition";
-import {PlainObject} from "plain-utils/utils/event";
+import {ComponentEvent, ExtractPropTypes, PropType} from "@peryl/react-compose";
+import {PlainObject} from "@peryl/utils/event";
 import {iObjectServicePickConfig} from "../$object/object.service.utils";
 import {iObjectService} from "../$object/createObjectService";
 import {iObjectHooks} from "./createObjectHooks";
@@ -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/Ov/index.tsx

@@ -1,4 +1,4 @@
-import {designComponent} from "plain-design-composition";
+import {designComponent} from "@peryl/react-compose";
 import {Select} from "../Select";
 import {OvPropsOption} from "./ov.utils";
 import {usePublicOv} from "./usePublicOv";

package/src/packages/components/Ov/ov.utils.ts

@@ -1,4 +1,4 @@
-import {ExtractPropTypes, PropType} from "plain-design-composition";
+import {ExtractPropTypes, PropType} from "@peryl/react-compose";
 import {iOvService} from "../$ov/createOvService";
 
 export const OvPropsOption = {

package/src/packages/components/Ov/usePublicOv.tsx

@@ -1,4 +1,4 @@
-import {reactive, watch} from "plain-design-composition";
+import {reactive, watch} from "@peryl/react-compose";
 import {iOvMeta} from "../$ov/ov.utils";
 import $configuration from "../$configuration";
 import {iOvPropsType} from "./ov.utils";

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

@@ -0,0 +1,48 @@
+import {designComponent, getComponentCls, useClassCache, useModel} from "@peryl/react-compose";
+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 "@peryl/react-compose";
+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 "@peryl/react-compose";
+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 "@peryl/react-compose";
+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;
+}