plain-design 1.0.0-beta.11 → 1.0.0-beta.111

package/src/packages/components/InputNumber/useInputNumber.public.tsx

@@ -1,15 +1,15 @@
 import {iInputNumberCompositionParam, iInputNumberEffectiveValueInfo, iInputNumberValueInfo} from "./input-number.utils";
-import {computed, getComponentCls, iHTMLElement, iMouseEvent, reactive, RenderNode, useClasses, useNumber, useRefs} from "plain-design-composition";
+import {computed, getComponentCls, iHTMLElement, iMouseEvent, reactive, RenderNode, useClasses, useNumber, useRefs} from "@peryl/react-compose";
 import {useStyle} from "../../uses/useStyle";
 import {useEdit} from "../../uses/useEdit";
-import {roundFixed} from "plain-utils/utils/roundFixed";
-import {getKey, KEY} from "../KeyboardService";
+import {roundFixed} from "@peryl/utils/roundFixed";
+import {eKeyboardKeys, getKeyNameByKeyboardEvent} from "@peryl/utils/keyboard";
 import {useClickWave} from "../../directives/ClickWave";
 import {NumberResize} from "./NumberResize";
 import {NumberButtonTypes} from "./number.utils";
 import {Input} from "../Input";
 import Icon from "../Icon";
-import {delay} from "plain-utils/utils/delay";
+import {delay} from "@peryl/utils/delay";
 
 const NAN = 'NAN';
 const numberPattern = /([\d.-]+)([a-zA-Z%]*)/;
@@ -41,18 +41,26 @@ export function useInputNumberPublic(param: iInputNumberCompositionParam) {
      */
     getValueInfo: (val: any): iInputNumberValueInfo => {
       if (!props.availableUnits || props.availableUnits.length === 0) {
-        /*不允许带单位*/
+
+        /*---------------------------------------不允许带单位-------------------------------------------*/
+
         if (val == null) return { val: undefined };
         val = String(val).trim();
         if (val === '') return { val: undefined };
         val = Number(val);
         if (isNaN(val)) {
           return { val: NAN };
-        } else {
-          return { val: val };
         }
+        if (!!props.isValueEffective && !props.isValueEffective(val)) {
+          return { val: NAN };
+        }
+
+        return { val: val };
+
       } else {
-        /*允许带单位*/
+
+        /*---------------------------------------允许带单位-------------------------------------------*/
+
         if (val == null) return { val: undefined, unit: props.defaultUnit };
         if (typeof val === "string") {
           val = val.trim();
@@ -69,9 +77,17 @@ export function useInputNumberPublic(param: iInputNumberCompositionParam) {
 
             if (isNaN(num)) {
               return { val: NAN, unit };
-            } else {
-              return { val: num, unit: !!unit ? unit : undefined };
             }
+
+            if (!!props.requireUnit && !unit) {
+              return { val: NAN, unit };
+            }
+
+            if (!!props.isValueEffective && !props.isValueEffective(num, unit)) {
+              return { val: NAN, unit };
+            }
+
+            return { val: num, unit: !!unit ? unit : undefined };
           }
         }
       }
@@ -241,14 +257,14 @@ export function useInputNumberPublic(param: iInputNumberCompositionParam) {
      * @date    2023/2/10 14:55
      */
     onKeydown: (e: KeyboardEvent) => {
-      const key = getKey(e);
+      const key = getKeyNameByKeyboardEvent(e);
       switch (key) {
-        case KEY.up:
+        case eKeyboardKeys.up:
           e.preventDefault();
           e.stopPropagation();
           methods.add();
           break;
-        case KEY.down:
+        case eKeyboardKeys.down:
           e.preventDefault();
           e.stopPropagation();
           methods.minus();
@@ -282,7 +298,7 @@ export function useInputNumberPublic(param: iInputNumberCompositionParam) {
     button: {
       prefix: () => (
         <span
-          className="number-prepend-button plain-click-node"
+          className="number-prepend-button plain-click-node input-icon-button"
           onMouseDown={handler.intervalMinus}
           onClick={stopClickPropagation}
           ref={onRef.sub}>
@@ -291,7 +307,7 @@ export function useInputNumberPublic(param: iInputNumberCompositionParam) {
       ),
       suffix: () => (
         <span
-          className="number-append-button plain-click-node"
+          className="number-append-button plain-click-node input-icon-button"
           onMouseDown={handler.intervalAdd}
           onClick={stopClickPropagation}
           ref={onRef.add}>
@@ -308,14 +324,14 @@ export function useInputNumberPublic(param: iInputNumberCompositionParam) {
       suffix: () => (
         <span className="number-button-container">
             <span
-              className="number-append-button plain-click-node"
+              className="number-append-button plain-click-node input-icon-button"
               onMouseDown={handler.intervalAdd}
               onClick={stopClickPropagation}
               ref={onRef.add}>
               <Icon icon={props.addIcon || 'pi-up'}/>
             </span>
             <span
-              className="number-prepend-button plain-click-node"
+              className="number-prepend-button plain-click-node input-icon-button"
               onMouseDown={handler.intervalMinus}
               onClick={stopClickPropagation}
               ref={onRef.sub}>
@@ -332,8 +348,12 @@ export function useInputNumberPublic(param: iInputNumberCompositionParam) {
     resize: {
       suffix: () => (
         <NumberResize
+          className="input-icon-button"
           value={effectiveInputValue.value?.val || 0}
           step={numberState.step}
+          precision={numberState.precision}
+          max={numberState.max}
+          min={numberState.min}
           onChange={handler.onResize}
           onMouseDown={handler.onMousedownResize}
         />

package/src/packages/components/InputNumber/useInputNumber.single.tsx

@@ -1,6 +1,6 @@
 import {iInputNumberPublic} from "./useInputNumber.public";
-import {reactive, useModel} from "plain-design-composition";
-import {createEffects} from "plain-utils/utils/createEffects";
+import {reactive, useModel} from "@peryl/react-compose";
+import {createEffects} from "@peryl/utils/createEffects";
 
 export function useInputNumberSingle(
   { hooks, props, event, utils }: iInputNumberPublic

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

@@ -1,4 +1,4 @@
-import {designComponent, getComponentCls, useClassCache} from "plain-design-composition";
+import {designComponent, getComponentCls, useClassCache} from "@peryl/react-compose";
 import './layout.scss';
 
 export const Layout = designComponent({

package/src/packages/components/Layout/layout.utils.ts

@@ -1,3 +1,3 @@
-import {createEnum} from "plain-utils/utils/createEnum";
+import {createEnum} from "@peryl/utils/createEnum";
 
 export const eLayoutSectionPosition = createEnum(['top', 'left', 'right', 'bottom', 'center'] as const);

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

@@ -1,5 +1,5 @@
-import {designComponent, getComponentCls, iHTMLDivElement, onMounted, PropType, useClassCache, useModel, useRefs, useStyleCache} from "plain-design-composition";
-import {unit} from "plain-utils/string/unit";
+import {designComponent, getComponentCls, iHTMLDivElement, onMounted, PropType, useClassCache, useModel, useRefs, useStyleCache} from "@peryl/react-compose";
+import {unit} from "@peryl/utils/unit";
 import Layout from "../Layout";
 import {eLayoutSectionPosition} from "../Layout/layout.utils";
 import {useLayoutSectionResizer} from "./useLayoutSectionResizer";

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

@@ -1,7 +1,7 @@
 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 {cacheComputed, computed, getComponentCls, iHTMLDivElement, iMouseEvent, useRefs} from "@peryl/react-compose";
+import {createEffects} from "@peryl/utils/createEffects";
 import {ClientZoom} from "../../utils/ClientZoom";
 
 export function useLayoutSectionResizer(

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

@@ -1,4 +1,4 @@
-import {designComponent, getComponentCls, PropType, useRefs} from "plain-design-composition";
+import {designComponent, getComponentCls, PropType, useRefs} from "@peryl/react-compose";
 import React, {ReactElement} from "react";
 import FlipMove from "react-flip-move";
 import './list.scss';

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

@@ -1,5 +1,5 @@
-import {designComponent, getComponentCls, useClasses} from "plain-design-composition";
-import {PlainLoading} from 'plain-icons/src/packages/component/loading/react';
+import {designComponent, getComponentCls, useClasses} from "@peryl/react-compose";
+import {PlainLoading} from '@peryl/icon/src/packages/component/loading/react';
 import './loading.scss';
 
 export const Loading = designComponent({

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

@@ -1,5 +1,5 @@
-import {designComponent, getComponentCls, mergeAttrs, nextIndex, onMounted, reactive, useClasses, useModel, useRefs, useStyles, watch} from "plain-design-composition";
-import {delay} from "plain-utils/utils/delay";
+import {designComponent, getComponentCls, mergeAttrs, nextIndex, onMounted, reactive, useClasses, useModel, useRefs, useStyles, watch} from "@peryl/react-compose";
+import {delay} from "@peryl/utils/delay";
 import Loading from "../Loading";
 import './loading-mask.scss';
 import Transition from "../Transition";
@@ -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/NumberRange/index.tsx

@@ -1,8 +1,8 @@
-import {computed, designComponent, PropType, useModel} from "plain-design-composition";
+import {computed, designComponent, PropType, useModel} from "@peryl/react-compose";
 import {InputGroup} from "../InputGroup";
 import {InputNumber} from "../InputNumber";
 import {Input} from "../Input";
-import {PlainObject} from "plain-utils/utils/event";
+import {PlainObject} from "@peryl/utils/event";
 
 export const NumberRange = designComponent({
   name: 'number-range',

package/src/packages/components/Object/createObjectHooks.tsx

@@ -1,4 +1,4 @@
-import {createHooks, createRenderHook, iMouseEvent} from "plain-design-composition";
+import {createHooks, createRenderHook, iMouseEvent} from "@peryl/react-compose";
 
 export function createObjectHooks() {
   return {

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

@@ -1,9 +1,8 @@
 import {iObjectCompositionParam, iObjectSelectOption} from "./object.utils";
-import {createEffects} from "plain-utils/utils/createEffects";
 import {Select} from "../Select";
-import {computed, reactive, useModel, useRefs} from "plain-design-composition";
-import {PlainObject} from "plain-utils/utils/event";
-import {delay} from "plain-utils/utils/delay";
+import {createEffectsOfReaction, reactive, useModel, useRefs} from "@peryl/react-compose";
+import {PlainObject} from "@peryl/utils/event";
+import {delay} from "@peryl/utils/delay";
 import {SelectOption} from "../SelectOption";
 import {iSelectProps} from "../Select/select.utils";
 import i18n from "../i18n";
@@ -16,7 +15,7 @@ import i18n from "../i18n";
 export function createObjectRenderMultiple(
   { props, hooks, classes, inputSlots, event, object, loading, loadData, editComputed }: iObjectCompositionParam
 ) {
-  const { effects } = createEffects();
+  const { effects, effectComputed } = createEffectsOfReaction();
 
   const model = useModel(() => props.modelValue as PlainObject[] | null | undefined, event.emit.onUpdateModelValue as any, {
     /**
@@ -32,7 +31,7 @@ export function createObjectRenderMultiple(
       await delay();
       selectHandler.reset();
     }
-  });
+  }, effects);
 
   const { refs, onRef } = useRefs({ select: Select });
 
@@ -110,7 +109,7 @@ export function createObjectRenderMultiple(
         publicHandler.onSelect(modelValue);
       },
     };
-    const inputAttrs = computed(() => {
+    const inputAttrs = effectComputed(() => {
       /*当前选中数据的显示值*/
       const label = props.modelValue;
       /*空值占位符，没有focus的时候就显示真实的placeholder，否则显示当前匹配option的label*/
@@ -224,10 +223,10 @@ export function createObjectRenderMultiple(
       },
     };
     /*监听popper的部分参数*/
-    const popperAttrs = computed(() => ({ ...handler, }));
+    const popperAttrs = effectComputed(() => ({ ...handler, }));
 
     /*给select传递的属性*/
-    const selectAttrs = computed(() => ({
+    const selectAttrs = effectComputed(() => ({
       ...checkHandler,
       modelValue: state.value,
       onUpdateModelValue: onSelectChange,
@@ -241,8 +240,9 @@ 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

@@ -1,9 +1,8 @@
 import {iObjectCompositionParam, iObjectSelectOption} from "./object.utils";
-import {createEffects} from "plain-utils/utils/createEffects";
 import {Select} from "../Select";
-import {computed, reactive, useRefs, watch} from "plain-design-composition";
+import {createEffectsOfReaction, reactive, useRefs} from "@peryl/react-compose";
 import {convertRowToSelected, convertSelectedToRow} from "../$object/object.conver";
-import {PlainObject} from "plain-utils/utils/event";
+import {PlainObject} from "@peryl/utils/event";
 import {SelectOption} from "../SelectOption";
 import i18n from "../i18n";
 
@@ -15,7 +14,7 @@ import i18n from "../i18n";
 export function createObjectRenderSingle(
   { props, event, hooks, classes, inputSlots, object, loading, loadData, editComputed }: iObjectCompositionParam
 ) {
-  const { effects } = createEffects();
+  const { effects, effectComputed, effectWatch } = createEffectsOfReaction();
 
   const { refs, onRef } = useRefs({ select: Select });
 
@@ -38,8 +37,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);
@@ -78,7 +81,7 @@ export function createObjectRenderSingle(
         hooks.onInputChange.exec(val);
       },
     };
-    const inputAttrs = computed(() => {
+    const inputAttrs = effectComputed(() => {
       /*当前选中数据的显示值*/
       const label = props.modelValue;
       /*空值占位符，没有focus的时候就显示真实的placeholder，否则显示当前匹配option的label*/
@@ -94,6 +97,7 @@ export function createObjectRenderSingle(
         clearHandler: publicHandler.onClear
       });
     });
+
     return { state, inputAttrs };
   })();
 
@@ -105,7 +109,7 @@ export function createObjectRenderSingle(
   const selectHandler = (() => {
 
     /*将row转化为selected对象，用来辅助getSelectValue实现功能*/
-    const row2selected = computed(() => {return !props.row || !props.modelValue ? null : convertRowToSelected(props.row, props.map);});
+    const row2selected = effectComputed(() => {return !props.row || !props.modelValue ? null : convertRowToSelected(props.row, props.map);});
 
     /*获取当前select的modelValue以及要渲染的select options数组*/
     const getSelectValue = (): { value: any, option: null | iObjectSelectOption[] } => {
@@ -120,9 +124,7 @@ export function createObjectRenderSingle(
     const state = reactive(getSelectValue());
 
     /*当绑定值变化时，重新计算select的modelValue以及option数组*/
-    effects.push(
-      watch(() => props.modelValue, () => {Object.assign(state, getSelectValue());})
-    );
+    effectWatch(() => props.modelValue, () => {Object.assign(state, getSelectValue());});
 
     /**
      * 根据搜索关键词加载数据
@@ -143,16 +145,17 @@ export function createObjectRenderSingle(
       onClose: () => {Object.assign(state, getSelectValue());},
     };
     /*监听popper的部分参数*/
-    const popperAttrs = computed(() => ({
+    const popperAttrs = effectComputed(() => ({
       ...handler,
     }));
+
     /*监听select的选中选项动作*/
     const onSelectChange = (code: string | null) => {
       const selected = !code ? null : state.option?.find(i => i.val === code)?.data;
       publicHandler.onSelect(selected);
     };
     /*给select传递的属性*/
-    const selectAttrs = computed(() => ({
+    const selectAttrs = effectComputed(() => ({
       onUpdateModelValue: onSelectChange,
       loading: loading.value,
       class: classes.value,
@@ -163,8 +166,9 @@ 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/index.tsx

@@ -1,4 +1,4 @@
-import {designComponent, getComponentCls, iMouseEvent, onBeforeUnmount, reactive, useClasses} from "plain-design-composition";
+import {designComponent, getComponentCls, iMouseEvent, onBeforeUnmount, reactive, useClasses} from "@peryl/react-compose";
 import {Select} from "../Select";
 import {Icon} from "../Icon";
 import './object.scss';
@@ -8,8 +8,8 @@ import {useWatchAutoClear} from "../../utils/watchEffectAutoClear";
 import {createObjectRenderMultiple} from "./createObjectRender.multiple";
 import {createObjectRenderSingle} from "./createObjectRender.single";
 import {$configuration} from "../$configuration";
-import {debounce} from "plain-utils/utils/debounce";
-import {createEffects} from "plain-utils/utils/createEffects";
+import {debounce} from "@peryl/utils/debounce";
+import {createEffects} from "@peryl/utils/createEffects";
 import {eFilterOperator} from "../FilterService/utils/filter.service.utils";
 import {useEdit} from "../../uses/useEdit";
 import {stopPopup} from "../usePopup/utils/stopPopup";

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;