plain-design 1.0.0-beta.10 → 1.0.0-beta.101

package/src/packages/components/Input/useTextareaInput.tsx

@@ -4,7 +4,7 @@ import {unit} from "plain-utils/string/unit";
 import {createEffects} from "plain-utils/utils/createEffects";
 import {ClientZoom} from "../ClientZoom";
 
-const _Textarea = fixInputCursor('textarea')
+const _Textarea = fixInputCursor('textarea');
 
 export function useTextareaInput(data: iInputCompositionData) {
 
@@ -56,24 +56,27 @@ export function useTextareaInput(data: iInputCompositionData) {
 
   effects.push(hooks.onRenderDefault.use(() => (
     <span className={classes.value}>
-      <span style={takeoverStyles.value}>
-        {(model.value?.split('\n') as string[] | undefined)?.map((item, index) => (
-          <div key={index}>
-            {item}
-          </div>
-        ))}
-        {!model.value && <>&nbsp;</>}
-      </span>
-      <_Textarea
-        ref={handler.onRef}
-        value={model.value}
-        onInput={handler.onInput}
-        onKeyDown={handler.onKeydown}
-        placeholder={editComputed.value.placeholder!}
-        disabled={!!editComputed.value.disabled}
-        readOnly={!!editComputed.value.readonly || !!props.customReadonly || !!editComputed.value.loading}
-        {...props.nativeAttrs}
-      />
+      {data.styleComputed.value.inputMode === 'text' ?
+        <span className="input-text">{model.value}</span> : <>
+          <span style={takeoverStyles.value} className="input-textarea-shadow">
+            {(model.value?.split('\n') as string[] | undefined)?.map((item, index) => (
+              <div key={index}>
+                {item}
+              </div>
+            ))}
+            {!model.value && <>&nbsp;</>}
+          </span>
+          <_Textarea
+            ref={handler.onRef}
+            value={model.value}
+            onInput={handler.onInput}
+            onKeyDown={handler.onKeydown}
+            placeholder={editComputed.value.placeholder!}
+            disabled={!!editComputed.value.disabled}
+            readOnly={!!editComputed.value.readonly || !!props.customReadonly || !!editComputed.value.loading}
+            {...props.nativeAttrs}
+          />
+        </>}
     </span>
   )));
 
@@ -100,7 +103,7 @@ function useTextareaResize({ hooks, onResize }: iInputCompositionData & { onResi
     mousedown: (e: MouseEvent) => {
       const { offsetX, offsetY, clientY } = ClientZoom.getClientPosition(e);
       let { offsetWidth, offsetHeight } = e.target as any;
-      const dragSize = 12
+      const dragSize = 12;
       if (!(offsetWidth - offsetX < dragSize && offsetHeight - offsetY < dragSize)) {
         return;
       }

package/src/packages/components/Input/uses/useInputEnterHandler.tsx

@@ -1,5 +1,5 @@
 import {reactive, watch} from "plain-design-composition";
-import {doNothing} from "../../../utils/doNothing";
+import {doNothing} from "plain-utils/utils/doNothing";
 import {throttle} from "plain-utils/utils/throttle";
 import {iInputCompositionData} from "../input.utils";
 import {getKey, KEY} from "../../KeyboardService";

package/src/packages/components/Input/uses/useInputHooks.tsx

@@ -3,18 +3,18 @@ import {iSelectOptionProps} from "../../Select/select.utils";
 
 export function useInputHooks() {
   return {
-    onRenderDefault: createSyncHooks<(content: RenderNode) => void>(),              // 渲染默认插槽
-    onRenderSuffix: createSyncHooks<(content: RenderNode) => void>(),               // 渲染suffix插槽
-    onRefInput: createHooks<(el: HTMLInputElement | null) => void>(),               // input dom对象引用
-    onRefWrapper: createHooks<(el: HTMLElement | null) => void>(),                  // 容器节点dom对象引用
-    onInputKeydown: createHooks<(e: iKeyboardEvent) => void>(),                   // input触发按键事件
-    onInput: createHooks<(val: any) => void>(),                                     // input的输入动作
-    onClasses: createSyncHooks<(val: any[]) => void>(),                             // 计算根节点classes
+    onRenderDefault: createSyncHooks<(content: RenderNode) => void>(true),              // 渲染默认插槽
+    onRenderSuffix: createSyncHooks<(content: RenderNode) => void>(true),               // 渲染suffix插槽
+    onRefInput: createHooks<(el: HTMLInputElement | null) => void>(),                   // input dom对象引用
+    onRefWrapper: createHooks<(el: HTMLElement | null) => void>(),                      // 容器节点dom对象引用
+    onInputKeydown: createHooks<(e: iKeyboardEvent) => void>(),                         // input触发按键事件
+    onInput: createHooks<(val: any) => void>(),                                         // input的输入动作
+    onClasses: createSyncHooks<(val: any[]) => void>(true),                             // 计算根节点classes
     onSuggestion: createHooks<(data: { val: string, optionProps: iSelectOptionProps }) => void>(),// 点击了某个推荐选项
-    onTagChange: createHooks<() => void>(),                                         // 多值输入的时候的变化动作
-    onTriggerOpenSuggestion: createHooks<() => void>(),                             // 触发打开suggestion的动作
-    onTriggerCloseSuggestion: createHooks<() => void>(),                            // 触发打开suggestion的动作
-    onGetSuggestionIsShow: createSyncHooks<(flag: boolean) => void>(),              // suggestion 面板是否已经打开
+    onTagChange: createHooks<() => void>(),                                             // 多值输入的时候的变化动作
+    onTriggerOpenSuggestion: createHooks<() => void>(),                                 // 触发打开suggestion的动作
+    onTriggerCloseSuggestion: createHooks<() => void>(),                                // 触发打开suggestion的动作
+    onGetSuggestionIsShow: createSyncHooks<(flag: boolean) => void>(true),              // suggestion 面板是否已经打开
   };
 }
 

package/src/packages/components/Input/uses/useInputSuffixIcon.tsx

@@ -4,7 +4,7 @@ import Icon from "../../Icon";
 import Loading from "../../Loading";
 import {delay} from "plain-utils/utils/delay";
 
-export function useInputSuffixIcon({ slots, hooks, props, editComputed, model, emit, methods, isEmpty }: iInputCompositionData) {
+export function useInputSuffixIcon({ slots, hooks, props, editComputed, model, emit, methods, isEmpty, styleComputed }: iInputCompositionData) {
 
   const hasSuffixClear = computed(() => !props.textarea && !props.noClear && (!editComputed.value.disabled && !editComputed.value.readonly));
   const hasSuffixIcon = computed(() => !props.textarea && (slots.suffixIconContent.isExist() || !!props.suffixIcon));
@@ -51,13 +51,17 @@ export function useInputSuffixIcon({ slots, hooks, props, editComputed, model, e
     }
   ]);
 
-  const render = () => (hasSuffixIcon.value || hasSuffixClear.value || editComputed.value.loading) && !props.textarea && (
-    <span className="input-suffix-icon-wrapper" onMouseDown={handler.onMousedownSuffix}>
-      {hasSuffixIcon.value && slots.suffixIconContent(<Icon icon={props.suffixIcon} className="input-suffix-icon"/>)}
-      {hasSuffixClear.value && (<Icon icon="pi-close-circle-fill" className="input-suffix-clear"/>)}
-      {editComputed.value.loading && <Loading/>}
-    </span>
-  );
+  const render = () =>
+    (hasSuffixIcon.value || hasSuffixClear.value || editComputed.value.loading) &&
+    styleComputed.value.inputMode !== 'text' &&
+    !props.textarea &&
+    (
+      <span className="input-suffix-icon-wrapper" onMouseDown={handler.onMousedownSuffix}>
+        {hasSuffixIcon.value && slots.suffixIconContent(<Icon icon={props.suffixIcon} className="input-suffix-icon"/>)}
+        {hasSuffixClear.value && (<Icon icon="pi-close-circle-fill" className="input-suffix-clear"/>)}
+        {editComputed.value.loading && <Loading type={props.loadingType}/>}
+      </span>
+    );
 
   return { render };
 }

package/src/packages/components/InputNumber/NumberResize.tsx

@@ -3,6 +3,7 @@ import {Icon} from "../Icon";
 import {createEffects} from "plain-utils/utils/createEffects";
 import {addClass} from "plain-utils/dom/addClass";
 import {ClientZoom} from "../ClientZoom";
+import {roundFixed} from "plain-utils/utils/roundFixed";
 
 export const NumberResize = designComponent({
   name: "number-resize",
@@ -10,6 +11,9 @@ export const NumberResize = designComponent({
   props: {
     step: { type: Number, default: 1 },
     value: { type: Number },
+    precision: { type: Number },
+    max: { type: Number },
+    min: { type: Number }
   },
   emits: {
     onChange: (val: number) => true,
@@ -78,7 +82,16 @@ export const NumberResize = designComponent({
           const durY = (clientY - staticState.startY);
           const elMoveTop = staticState.startTop + durY;
           staticState.el.style.transform = `translate3d(${staticState.startLeft}px,${elMoveTop}px,0)`;
-          const newValue = Math.ceil(staticState.startValue + (durY * -1) / unit) * props.step;
+          let newValue = Math.ceil(staticState.startValue + (durY * -1) / unit) * props.step;
+          if (props.precision != null) {
+            newValue = roundFixed(newValue, props.precision)!;
+          }
+          if (props.max != null && newValue > props.max) {
+            newValue = props.max;
+          }
+          if (props.min != null && newValue < props.min) {
+            newValue = props.min;
+          }
           event.emit.onChange(newValue);
           // console.log(newValue);
         },

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

@@ -8,7 +8,7 @@ import {useInputNumberSingle} from "./useInputNumber.single";
 import {useInputNumberMultiple} from "./useInputNumber.multiple";
 
 export const InputNumber = designComponent({
-  name: '-number',
+  name: '-input-number',
   inheritPropsType: Input,
   props: InputNumberPropsOption,
   emits: InputNumberEmitsOption,

package/src/packages/components/InputNumber/input-number.utils.tsx

@@ -12,13 +12,15 @@ export const InputNumberPropsOption = {
   min: { type: [String, Number] },                              // 最小值
   max: { type: [String, Number] },                              // 最大值
   step: { type: [String, Number], default: 1 },                 // 计数器步长
-  stepStrictly: { type: Boolean },                                    // 是否只能输入 step 的倍数
+  stepStrictly: { type: Boolean },                              // 是否只能输入 step 的倍数
   precision: { type: [Number, String] },                        // 数值精度
   button: { type: [String, Boolean] as PropType<boolean | typeof NumberButtonTypes.TYPE | null>, default: NumberButtonTypes.right },// 按钮模式 false, 'none','button','right'
-  availableUnits: { type: Array as PropType<string[]> },              // 允许输入的数字单位
-  defaultUnit: { type: String },                                      // 默认的数字单位，当没有值的时候点击加减号默认给的单位
-  addIcon: { type: String },                                          // add按钮图标
-  subIcon: { type: String },                                          // sub按钮图标
+  availableUnits: { type: Array as PropType<string[]> },        // 允许输入的数字单位
+  defaultUnit: { type: String },                                // 默认的数字单位，当没有值的时候点击加减号默认给的单位
+  addIcon: { type: String },                                    // add按钮图标
+  subIcon: { type: String },                                    // sub按钮图标
+  requireUnit: { type: Boolean },                               // 输入的值必须带单位，否则视为无效输入(不会触发change，并且失焦之后恢复上一次有效值)
+  isValueEffective: { type: Function as PropType<(val: string | number, unit?: string | null) => boolean> }, // 判断值是否有效，否则视为无效输入
 
   /*---------------------------------------input-------------------------------------------*/
   inputAttrs: { type: Object },                                       // input属性配置对象

package/src/packages/components/InputNumber/number.scss

@@ -33,7 +33,7 @@
       flex-direction: column;
       align-items: stretch;
       justify-content: center;
-      padding: 0;
+      padding: 0 !important;
       position: relative;
 
       &:after {
@@ -47,12 +47,27 @@
       }
     }
 
+    .number-prepend-button, .number-append-button {
+      transform: scale(0.9);
+    }
+
     @include sizeMixin(input, ()) {
       .number-button-container {
-        width: $height,
+        width: $height;
+        height: calc(#{$height} - 2px);
       }
     }
   }
+
+  .input-box {
+    align-self: center;
+  }
+
+  &.input-mode-text {
+    .number-prepend-button, .number-append-button, .number-button-container {
+      display: none;
+    }
+  }
 }
 
 @include prefix(number-resize) {

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

@@ -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 };
           }
         }
       }
@@ -334,6 +350,9 @@ export function useInputNumberPublic(param: iInputNumberCompositionParam) {
         <NumberResize
           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/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>
+      )
+    );
+  },
+});