@fangzhongya/fang-ui 0.0.14 → 0.0.16

package/dist/components/box/index.css

@@ -1,35 +1,23 @@
 :root {
-  --el-icon-picker-on: rgb(91, 189, 246);
-  --el-icon-picker-border: #eee;
-  --el-color-primary: #409eff;
-  --el-bag-primary: #409eff;
-  --el-bag-primary-text: #fff;
-  --el-border: #eee;
-  --el-layout-panel-gap: 10px;
-  --el-layout-panel-padding: 20px;
-  --el-layout-form-item-padding-right: var(
-  	--el-layout-panel-gap
+  --icon-picker-on: rgb(91, 189, 246);
+  --icon-picker-border: #eee;
+  --color-primary: #409eff;
+  --bag-primary: #409eff;
+  --bag-primary-text: #fff;
+  --border: #eee;
+  --layout-panel-gap: 10px;
+  --layout-panel-padding: 20px;
+  --layout-form-item-padding-right: var(
+  	--layout-panel-gap
   );
-  --el-g-main-bg: var(--el-bg-color-page);
+  --g-main-bg: var(--bg-color-page);
 }
 
-.el-com {
+.com {
   font-size: 20px;
 }
 
-.el-box-mask {
-  display: block;
-  opacity: 0.5;
-  z-index: 0;
-  position: fixed;
-  top: 0;
-  right: 0;
-  left: 0;
-  bottom: 0;
-  background: rgba(2, 28, 39, 0.4);
-}
-
-.el-box-title {
+.box-title {
   padding: 10px;
   position: relative;
   background-color: #467ddc;
@@ -37,23 +25,35 @@
   align-items: center;
   display: flex;
 }
-.el-box-title-name {
+.box-title-name {
   flex: 1;
 }
-.el-box-title-close {
+.box-title-close {
   right: 10px;
   font-size: 18px;
   display: flex;
   align-items: center;
 }
-.el-box-title-close i {
+.box-title-close i {
   width: 20px;
   height: 20px;
   margin: 0 4px;
   cursor: pointer;
 }
 
-.el-box {
+.box-mask {
+  display: block;
+  opacity: 0.5;
+  z-index: 0;
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  background: rgba(2, 28, 39, 0.4);
+}
+
+.box {
   position: fixed;
   width: 100%;
   height: 100%;
@@ -65,7 +65,7 @@
   align-items: center;
   justify-content: center;
 }
-.el-box-body {
+.box-body {
   position: relative;
   z-index: 100;
   background: #fff;
@@ -75,12 +75,12 @@
   display: flex;
   flex-direction: column;
 }
-.el-box-body-div {
+.box-body-div {
   flex: 1;
   overflow-y: auto;
   padding: 20px;
 }
-.el-box-body.popup-center .el-box-body-div {
+.box-body.popup-center .box-body-div {
   display: flex;
   flex-direction: column;
   align-items: center;

package/dist/components/box/index.d.ts

@@ -1,5 +1,6 @@
+import { CreateComponentPublicInstanceWithMixins, ExtractPropTypes, ComponentOptionsMixin, PublicProps, GlobalComponents, GlobalDirectives, ComponentProvideOptions, ComponentOptionsBase, VNodeProps, AllowedComponentProps, ComponentCustomProps, Plugin } from 'vue';
 declare const Box: {
-    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
+    new (...args: any[]): CreateComponentPublicInstanceWithMixins<Readonly< ExtractPropTypes<{
         title: {
             type: StringConstructor;
         };
@@ -15,17 +16,17 @@ declare const Box: {
         boxClass: {
             type: StringConstructor;
         };
-    }>> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
+    }>> & Readonly<{}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, PublicProps, {
         modelValue: boolean;
         disabled: boolean;
-    }, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
+    }, true, {}, {}, GlobalComponents, GlobalDirectives, string, {}, any, ComponentProvideOptions, {
         P: {};
         B: {};
         D: {};
         C: {};
         M: {};
         Defaults: {};
-    }, Readonly<import('vue').ExtractPropTypes<{
+    }, Readonly< ExtractPropTypes<{
         title: {
             type: StringConstructor;
         };
@@ -48,7 +49,7 @@ declare const Box: {
     __isFragment?: never;
     __isTeleport?: never;
     __isSuspense?: never;
-} & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
+} & ComponentOptionsBase<Readonly< ExtractPropTypes<{
     title: {
         type: StringConstructor;
     };
@@ -64,12 +65,12 @@ declare const Box: {
     boxClass: {
         type: StringConstructor;
     };
-}>> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
+}>> & Readonly<{}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, {
     modelValue: boolean;
     disabled: boolean;
-}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+}, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & VNodeProps & AllowedComponentProps & ComponentCustomProps & (new () => {
     $slots: Partial<Record<string, (_: {}) => any>> & Partial<Record<string, (_: {}) => any>> & {
         default?(_: {}): any;
     };
-}) & import('vue').Plugin;
+}) & Plugin;
 export { Box, Box as default };

package/dist/components/box/index.scss

@@ -1,11 +1,11 @@
-// @use '../common.scss' as *;
+@use '../css/common.scss' as *;
 
-// @use '../box-mask/src/index.scss' as *;
-// @use '../box-title/src/index.scss' as *;
+// @use '../../box-mask/src/index.scss' as *;
+@use '../box-title/index.scss' as *;
 
-@use '../css/common.scss' as *;
+// @use '@components/css/common.scss' as *;
 @use '../box-mask/index.scss' as *;
-@use '../box-title/index.scss' as *;
+// @use '@components/box-title/style/index.scss' as *;
 
 $box: 'box';
 @include b($box) {

package/dist/components/box/index.ts

@@ -0,0 +1,8 @@
+import './index.scss';
+import { withInstall } from '../../utils/vues/withInstall'
+import SrcVue from './src/index.vue'
+const Box = withInstall(SrcVue, 'Box');
+export {
+   Box,
+   Box as default
+};

package/dist/components/box/src/data.ts

@@ -0,0 +1,56 @@
+import type { ExtractPublicPropTypes } from 'vue';
+
+import { buildProps } from '../../../utils/vues/buildProps';
+
+export const dataProps = buildProps({
+	/**
+	 * @props title 弹框头
+	 * @type String
+	 * @default
+	 * @selectable
+	 * @description
+	 */
+	title: {
+		type: String,
+	},
+	/**
+	 * @props {Boolean} modelValue=false 是否显示
+	 */
+	modelValue: {
+		type: Boolean,
+	},
+	to: {
+		type: String,
+	},
+	disabled: {
+		type: Boolean,
+	},
+	boxClass: {
+		type: String,
+	},
+});
+
+export type DataProps = ExtractPublicPropTypes<typeof dataProps>;
+
+/**
+ * @emits close ()
+ * 关闭弹框
+ */
+export const dataEmits = ['close', 'update:modelValue'];
+
+export type DataEmits = typeof dataEmits;
+
+/**
+ * @slot default 默认插槽
+ * @slot title 头部插槽
+ * @slot footer 底部插槽
+ */
+export const dataSlot = {
+	default: 'default',
+	title: 'title',
+	footer: 'footer',
+};
+
+/**
+ */
+export const dataExpose = {};

package/dist/components/box/src/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const require$$0 = require("vue");
+const vue = require("vue");
 const data = require("./data.cjs");
 const index$1 = require("../../../hooks/cssname/index.cjs");
 const index = require("../../../hooks/locale/index.cjs");
@@ -8,17 +8,17 @@ const index$4 = require("../../box-title/index.cjs");
 const index$3 = require("../../box-mask/index.cjs");
 const index$2 = require("../../box-teleport/index.cjs");
 const _hoisted_1 = ["name"];
-const _sfc_main = /* @__PURE__ */ require$$0.defineComponent({
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "index",
   props: data.dataProps,
   emits: data.dataEmits,
   setup(__props, { expose: __expose, emit: __emit }) {
-    const isInit = require$$0.shallowRef(false);
+    const isInit = vue.shallowRef(false);
     index.useLocale();
     const cs = index$1.useCssName("box");
     const props = __props;
     const emit = __emit;
-    require$$0.watch(
+    vue.watch(
       () => props.modelValue,
       () => {
         if (props.modelValue) {
@@ -35,40 +35,40 @@ const _sfc_main = /* @__PURE__ */ require$$0.defineComponent({
       ...data.dataExpose
     });
     return (_ctx, _cache) => {
-      return require$$0.openBlock(), require$$0.createBlock(require$$0.unref(index$2.BoxTeleport), {
+      return vue.openBlock(), vue.createBlock(vue.unref(index$2.BoxTeleport), {
         disabled: props.disabled,
         to: props.to
       }, {
-        default: require$$0.withCtx(() => [
-          isInit.value ? require$$0.withDirectives((require$$0.openBlock(), require$$0.createElementBlock("div", {
+        default: vue.withCtx(() => [
+          isInit.value ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
             key: 0,
-            class: require$$0.normalizeClass([require$$0.unref(cs).z(), props.boxClass])
+            class: vue.normalizeClass([vue.unref(cs).z(), props.boxClass])
           }, [
-            require$$0.createVNode(require$$0.unref(index$3.BoxMask), {
+            vue.createVNode(vue.unref(index$3.BoxMask), {
               onClick: onClose,
-              cssprefix: require$$0.unref(cs).z()
+              cssprefix: vue.unref(cs).z()
             }, null, 8, ["cssprefix"]),
-            require$$0.createElementVNode("div", {
-              class: require$$0.normalizeClass(require$$0.unref(cs).z("body"))
+            vue.createElementVNode("div", {
+              class: vue.normalizeClass(vue.unref(cs).z("body"))
             }, [
-              require$$0.renderSlot(_ctx.$slots, require$$0.unref(data.dataSlot).title, {}, () => [
-                require$$0.createVNode(require$$0.unref(index$4.BoxTitle), {
-                  cssprefix: require$$0.unref(cs).z(),
+              vue.renderSlot(_ctx.$slots, vue.unref(data.dataSlot).title, {}, () => [
+                vue.createVNode(vue.unref(index$4.BoxTitle), {
+                  cssprefix: vue.unref(cs).z(),
                   onClose,
                   title: props.title
                 }, null, 8, ["cssprefix", "title"])
               ]),
-              require$$0.createElementVNode("div", {
-                name: require$$0.unref(data.dataSlot).default,
-                class: require$$0.normalizeClass(require$$0.unref(cs).z("body-div"))
+              vue.createElementVNode("div", {
+                name: vue.unref(data.dataSlot).default,
+                class: vue.normalizeClass(vue.unref(cs).z("body-div"))
               }, [
-                require$$0.renderSlot(_ctx.$slots, "default")
+                vue.renderSlot(_ctx.$slots, "default")
               ], 10, _hoisted_1),
-              require$$0.renderSlot(_ctx.$slots, require$$0.unref(data.dataSlot).footer)
+              vue.renderSlot(_ctx.$slots, vue.unref(data.dataSlot).footer)
             ], 2)
           ], 2)), [
-            [require$$0.vShow, props.modelValue]
-          ]) : require$$0.createCommentVNode("", true)
+            [vue.vShow, props.modelValue]
+          ]) : vue.createCommentVNode("", true)
         ]),
         _: 3
       }, 8, ["disabled", "to"]);

package/dist/components/box/src/index.d.ts

@@ -1,3 +1,4 @@
+import { DefineComponent, ExtractPropTypes, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: Partial<Record<string, (_: {}) => any>> & Partial<Record<string, (_: {}) => any>> & {
@@ -7,7 +8,7 @@ declare function __VLS_template(): {
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+declare const __VLS_component: DefineComponent<ExtractPropTypes<{
     title: {
         type: StringConstructor;
     };
@@ -23,7 +24,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     boxClass: {
         type: StringConstructor;
     };
-}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly< ExtractPropTypes<{
     title: {
         type: StringConstructor;
     };
@@ -42,7 +43,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
 }>> & Readonly<{}>, {
     modelValue: boolean;
     disabled: boolean;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/dist/components/box/src/index.vue

@@ -0,0 +1,61 @@
+<template>
+	<BoxTeleport :disabled="props.disabled" :to="props.to">
+		<template v-if="isInit">
+			<div :class="[cs.z(), props.boxClass]" v-show="props.modelValue">
+				<BoxMask @click="onClose" :cssprefix="cs.z()"></BoxMask>
+				<div :class="cs.z('body')">
+					<slot :name="dataSlot.title">
+						<BoxTitle
+							:cssprefix="cs.z()"
+							@close="onClose"
+							:title="props.title"
+						></BoxTitle>
+					</slot>
+					<div :name="dataSlot.default" :class="cs.z('body-div')">
+						<slot></slot>
+					</div>
+					<slot :name="dataSlot.footer"> </slot>
+				</div>
+			</div>
+		</template>
+	</BoxTeleport>
+</template>
+<script lang="ts" setup>
+	import { dataProps, dataEmits, dataExpose, dataSlot } from './data';
+	import { useCssName } from '../../../hooks/cssname';
+	import { useLocale } from '../../../hooks/locale';
+	// import BoxTitle from '../../common/box-title.vue';
+	// import BoxMask from '../../common/box-mask.vue';
+	// import BoxTeleport from '../../common/box-teleport.vue';
+	import BoxTitle from '../../box-title/index';
+	import BoxMask from '../../box-mask/index';
+	import BoxTeleport from '../../box-teleport/index';
+
+	import { watch, shallowRef } from 'vue';
+	const isInit = shallowRef(false);
+
+	// 获取国际化字段
+	const { getLocale } = useLocale();
+	// 样式设置方法
+	const cs = useCssName('box');
+	const props = defineProps(dataProps);
+	const emit = defineEmits(dataEmits);
+
+	watch(
+		() => props.modelValue,
+		() => {
+			if (props.modelValue) {
+				isInit.value = true;
+			}
+		},
+		{ immediate: true },
+	);
+
+	function onClose() {
+		emit('update:modelValue', false);
+		emit('close');
+	}
+	defineExpose({
+		...dataExpose,
+	});
+</script>

package/dist/components/box-adjust/index.css

@@ -1,23 +1,23 @@
 :root {
-  --el-icon-picker-on: rgb(91, 189, 246);
-  --el-icon-picker-border: #eee;
-  --el-color-primary: #409eff;
-  --el-bag-primary: #409eff;
-  --el-bag-primary-text: #fff;
-  --el-border: #eee;
-  --el-layout-panel-gap: 10px;
-  --el-layout-panel-padding: 20px;
-  --el-layout-form-item-padding-right: var(
-  	--el-layout-panel-gap
+  --icon-picker-on: rgb(91, 189, 246);
+  --icon-picker-border: #eee;
+  --color-primary: #409eff;
+  --bag-primary: #409eff;
+  --bag-primary-text: #fff;
+  --border: #eee;
+  --layout-panel-gap: 10px;
+  --layout-panel-padding: 20px;
+  --layout-form-item-padding-right: var(
+  	--layout-panel-gap
   );
-  --el-g-main-bg: var(--el-bg-color-page);
+  --g-main-bg: var(--bg-color-page);
 }
 
-.el-com {
+.com {
   font-size: 20px;
 }
 
-.el-box-mask {
+.box-mask {
   display: block;
   opacity: 0.5;
   z-index: 0;
@@ -29,7 +29,7 @@
   background: rgba(2, 28, 39, 0.4);
 }
 
-.el-box-title {
+.box-title {
   padding: 10px;
   position: relative;
   background-color: #467ddc;
@@ -37,23 +37,23 @@
   align-items: center;
   display: flex;
 }
-.el-box-title-name {
+.box-title-name {
   flex: 1;
 }
-.el-box-title-close {
+.box-title-close {
   right: 10px;
   font-size: 18px;
   display: flex;
   align-items: center;
 }
-.el-box-title-close i {
+.box-title-close i {
   width: 20px;
   height: 20px;
   margin: 0 4px;
   cursor: pointer;
 }
 
-.el-box-adjust {
+.box-adjust {
   position: fixed;
   width: 100vw;
   height: 100vh;
@@ -61,7 +61,7 @@
   top: 0;
   left: 0;
 }
-.el-box-adjust-body {
+.box-adjust-body {
   position: absolute;
   top: 30%;
   left: 30%;
@@ -72,12 +72,12 @@
   display: flex;
   flex-direction: column;
 }
-.el-box-adjust-body-div {
+.box-adjust-body-div {
   flex: 1;
   overflow-y: auto;
   padding: 20px;
 }
-.el-box-adjust-body.popup-center .el-box-adjust-body-div {
+.box-adjust-body.popup-center .box-adjust-body-div {
   display: flex;
   flex-direction: column;
   align-items: center;

package/dist/components/box-adjust/index.d.ts

@@ -1,5 +1,6 @@
+import { CreateComponentPublicInstanceWithMixins, ExtractPropTypes, ComponentOptionsMixin, PublicProps, GlobalComponents, GlobalDirectives, ComponentProvideOptions, ComponentOptionsBase, VNodeProps, AllowedComponentProps, ComponentCustomProps, Plugin } from 'vue';
 declare const BoxAdjust: {
-    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
+    new (...args: any[]): CreateComponentPublicInstanceWithMixins<Readonly< ExtractPropTypes<{
         drag: {
             type: (BooleanConstructor | StringConstructor)[];
             default: string;
@@ -22,19 +23,19 @@ declare const BoxAdjust: {
         boxClass: {
             type: StringConstructor;
         };
-    }>> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
+    }>> & Readonly<{}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, PublicProps, {
         modelValue: boolean;
         disabled: boolean;
         drag: string | boolean;
         often: boolean;
-    }, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
+    }, true, {}, {}, GlobalComponents, GlobalDirectives, string, {}, any, ComponentProvideOptions, {
         P: {};
         B: {};
         D: {};
         C: {};
         M: {};
         Defaults: {};
-    }, Readonly<import('vue').ExtractPropTypes<{
+    }, Readonly< ExtractPropTypes<{
         drag: {
             type: (BooleanConstructor | StringConstructor)[];
             default: string;
@@ -66,7 +67,7 @@ declare const BoxAdjust: {
     __isFragment?: never;
     __isTeleport?: never;
     __isSuspense?: never;
-} & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
+} & ComponentOptionsBase<Readonly< ExtractPropTypes<{
     drag: {
         type: (BooleanConstructor | StringConstructor)[];
         default: string;
@@ -89,12 +90,12 @@ declare const BoxAdjust: {
     boxClass: {
         type: StringConstructor;
     };
-}>> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
+}>> & Readonly<{}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, {
     modelValue: boolean;
     disabled: boolean;
     drag: string | boolean;
     often: boolean;
-}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+}, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & VNodeProps & AllowedComponentProps & ComponentCustomProps & (new () => {
     $slots: Partial<Record<string, (_: {}) => any>> & Partial<Record<string, (_: {}) => any>> & Partial<Record<string, (_: {}) => any>>;
-}) & import('vue').Plugin;
+}) & Plugin;
 export { BoxAdjust, BoxAdjust as default };

package/dist/components/box-adjust/index.scss

@@ -1,7 +1,7 @@
-// @use '../common.scss' as *;
+// @use '../../../common.scss' as *;
 
-// @use '../box-mask/src/index.scss' as *;
-// @use '../box-title/src/index.scss' as *;
+// @use '../../box-mask/src/index.scss' as *;
+// @use '../../box-title/src/index.scss' as *;
 
 @use '../css/common.scss' as *;
 @use '../box-mask/index.scss' as *;

package/dist/components/box-adjust/index.ts

@@ -0,0 +1,8 @@
+import './index.scss';
+import { withInstall } from '../../utils/vues/withInstall'
+import SrcVue from './src/index.vue'
+const BoxAdjust = withInstall(SrcVue, 'BoxAdjust');
+export {
+   BoxAdjust,
+   BoxAdjust as default
+};

package/dist/components/box-adjust/src/data.ts

@@ -0,0 +1,45 @@
+import type { ExtractPublicPropTypes } from 'vue';
+
+import { buildProps } from '../../../utils/vues/buildProps';
+
+import {
+	dataProps as BoxProps,
+	dataEmits as BoxEmits,
+	dataExpose as BoxExpose,
+	dataSlot as BoxSlot,
+} from '../../box/src/data';
+
+export const dataProps = buildProps({
+	...BoxProps,
+	/**
+	 * @props { } drag= ( ) 可拖拽的元素样式
+	 */
+	drag: {
+		type: [String, Boolean],
+		default: '.com-title-name',
+	},
+	/**
+	 * @props { Boolean } often= ( ) 是否时时变化
+	 */
+	often: {
+		type: Boolean,
+	},
+});
+
+export type DataProps = ExtractPublicPropTypes<typeof dataProps>;
+
+/**
+ */
+export const dataEmits = [...BoxEmits];
+
+export type DataEmits = typeof dataEmits;
+
+/**
+ */
+export const dataSlot = {
+	...BoxSlot,
+};
+
+/**
+ */
+export const dataExpose = { ...BoxExpose };