plain-design 1.0.0-beta.145 → 1.0.0-beta.147

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

@@ -1,24 +1,24 @@
-@include comp(object) {
-  .object-icon {
-    cursor: pointer;
-
-    &: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
-  }
-}
+@include comp(object) {
+  .object-icon {
+    cursor: pointer;
+
+    &: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,56 +1,56 @@
-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";
-import {EditProps, tEditComputed} from "../../uses/useEdit";
-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对象
-  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> },                                    // 自定义服务
-  config: { type: Object as PropType<iObjectServicePickConfig> },                           // 自定义服务配置
-  labelField: { type: String, required: true },                                             // 选中数据中用来显示的字段名
-  keyField: { type: String, default: 'id' },                                                // 选中数据中用来做唯一标识的字段名
-  queryField: { type: String as PropType<string> },                                         // 输入查询时的字段名
-  disableFilter: { type: Boolean },                                                         // 禁用输入搜索
-  searchPlaceholder: { type: String },                                                      // 输入搜索关键词提示
-  beforeOpenPicker: { type: Function as PropType<() => void | Promise<void>> },             // 打开object弹窗之前
-} as const;
-
-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,
-  onPick: (selected: any) => true,
-} as const;
-
-export type iObjectEventType = ComponentEvent<typeof ObjectEmitsOption>
-
-export interface iObjectSelectOption {
-  label: string,
-  val: string,
-  data: PlainObject
-}
-
-export type iObjectCompositionParam = {
-  props: iObjectPropsType,
-  event: iObjectEventType,
-  hooks: iObjectHooks,
-  inputSlots: PlainObject,
-  classes: { value: any[] },
-  object: iObjectService,
-  loadData: (filterText: string, handler: (options: iObjectSelectOption[]) => void) => void,
-  loading: { value: boolean },
-  editComputed: tEditComputed,
-}
+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";
+import {EditProps, tEditComputed} from "../../uses/useEdit";
+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对象
+  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> },                                    // 自定义服务
+  config: { type: Object as PropType<iObjectServicePickConfig> },                           // 自定义服务配置
+  labelField: { type: String, required: true },                                             // 选中数据中用来显示的字段名
+  keyField: { type: String, default: 'id' },                                                // 选中数据中用来做唯一标识的字段名
+  queryField: { type: String as PropType<string> },                                         // 输入查询时的字段名
+  disableFilter: { type: Boolean },                                                         // 禁用输入搜索
+  searchPlaceholder: { type: String },                                                      // 输入搜索关键词提示
+  beforeOpenPicker: { type: Function as PropType<() => void | Promise<void>> },             // 打开object弹窗之前
+} as const;
+
+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,
+  onPick: (selected: any) => true,
+} as const;
+
+export type iObjectEventType = ComponentEvent<typeof ObjectEmitsOption>
+
+export interface iObjectSelectOption {
+  label: string,
+  val: string,
+  data: PlainObject
+}
+
+export type iObjectCompositionParam = {
+  props: iObjectPropsType,
+  event: iObjectEventType,
+  hooks: iObjectHooks,
+  inputSlots: PlainObject,
+  classes: { value: any[] },
+  object: iObjectService,
+  loadData: (filterText: string, handler: (options: iObjectSelectOption[]) => void) => void,
+  loading: { value: boolean },
+  editComputed: tEditComputed,
+}

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

@@ -1,5 +1,5 @@
-import OuterOperation from "../Table/standard/PlcOperation/OuterOperation";
-
-export default OuterOperation;
-
-export {OuterOperation};
+import OuterOperation from "../Table/standard/PlcOperation/OuterOperation";
+
+export default OuterOperation;
+
+export {OuterOperation};

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

@@ -1,23 +1,23 @@
-import {designComponent} from "@peryl/react-compose";
-import {Select} from "../Select";
-import {OvPropsOption} from "./ov.utils";
-import {usePublicOv} from "./usePublicOv";
-import {SelectOption} from "../SelectOption";
-
-export const Ov = designComponent({
-  name: 'ov',
-  inheritPropsType: Select,
-  props: OvPropsOption,
-  setup({ props }) {
-
-    const { state } = usePublicOv({ props });
-
-    return () => (
-      <Select loading={state.loading}>
-        {state.ovMetas.map(meta => (<SelectOption label={meta.name} val={meta.code} key={meta.code}/>))}
-      </Select>
-    );
-  },
-});
-
-export default Ov;
+import {designComponent} from "@peryl/react-compose";
+import {Select} from "../Select";
+import {OvPropsOption} from "./ov.utils";
+import {usePublicOv} from "./usePublicOv";
+import {SelectOption} from "../SelectOption";
+
+export const Ov = designComponent({
+  name: 'ov',
+  inheritPropsType: Select,
+  props: OvPropsOption,
+  setup({ props }) {
+
+    const { state } = usePublicOv({ props });
+
+    return () => (
+      <Select loading={state.loading}>
+        {state.ovMetas.map(meta => (<SelectOption label={meta.name} val={meta.code} key={meta.code}/>))}
+      </Select>
+    );
+  },
+});
+
+export default Ov;

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

@@ -1,9 +1,9 @@
-import {ExtractPropTypes, PropType} from "@peryl/react-compose";
-import {iOvService} from "../$ov/createOvService";
-
-export const OvPropsOption = {
-  ov: { type: String },
-  service: { type: Object as PropType<iOvService> },
-} as const;
-
-export type iOvPropsType = ExtractPropTypes<typeof OvPropsOption>
+import {ExtractPropTypes, PropType} from "@peryl/react-compose";
+import {iOvService} from "../$ov/createOvService";
+
+export const OvPropsOption = {
+  ov: { type: String },
+  service: { type: Object as PropType<iOvService> },
+} as const;
+
+export type iOvPropsType = ExtractPropTypes<typeof OvPropsOption>

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

@@ -1,35 +1,35 @@
-import {reactive, watch} from "@peryl/react-compose";
-import {iOvMeta} from "../$ov/ov.utils";
-import $configuration from "../$configuration";
-import {iOvPropsType} from "./ov.utils";
-
-export function usePublicOv({ props }: { props: iOvPropsType }) {
-  const service = props.service || $configuration.use('ov')!;
-
-  const state = reactive({
-    type: null as null | undefined | string,
-    ovMetas: [] as iOvMeta[],
-    loading: false,
-  });
-
-  watch(() => props.ov, async type => {
-    if (state.type == type) {
-      return;
-    }
-    state.type = type;
-    if (!type) {
-      if (!!state.ovMetas.length) {
-        state.ovMetas = [];
-      }
-    } else {
-      state.loading = true;
-      try {
-        state.ovMetas = await service.getOvByTypes(type);
-      } finally {
-        state.loading = false;
-      }
-    }
-  }, { immediate: true });
-
-  return { service, state };
-}
+import {reactive, watch} from "@peryl/react-compose";
+import {iOvMeta} from "../$ov/ov.utils";
+import $configuration from "../$configuration";
+import {iOvPropsType} from "./ov.utils";
+
+export function usePublicOv({ props }: { props: iOvPropsType }) {
+  const service = props.service || $configuration.use('ov')!;
+
+  const state = reactive({
+    type: null as null | undefined | string,
+    ovMetas: [] as iOvMeta[],
+    loading: false,
+  });
+
+  watch(() => props.ov, async type => {
+    if (state.type == type) {
+      return;
+    }
+    state.type = type;
+    if (!type) {
+      if (!!state.ovMetas.length) {
+        state.ovMetas = [];
+      }
+    } else {
+      state.loading = true;
+      try {
+        state.ovMetas = await service.getOvByTypes(type);
+      } finally {
+        state.loading = false;
+      }
+    }
+  }, { immediate: true });
+
+  return { service, state };
+}

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

@@ -1,48 +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;
+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

@@ -1,124 +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)} {
-    }
-  }
-
-
-}
+@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)} {
+    }
+  }
+
+
+}