feat: export base box component

Author: vis97c

packages/common-enums/src/components.ts

@@ -8,6 +8,7 @@ export const componentNames = [
 	"BaseInput",
 	"BaseSelect",
 	"BaseWrapper",
+	"BaseBox",
 	"BaseErrorBoundary",
 	// icon
 	"Icon",

packages/components-vue/src/components/loader/Content.vue

@@ -40,7 +40,7 @@
 			</template>
 			<LoaderSimple v-else-if="!noLoader" :label="label" :theme="theme" />
 		</div>
-		<BaseWrapper v-else :wrap="!unwrap" :el="el" :class="$attrs.class">
+		<BaseWrapper v-else :wrap="!unwrap" :el="el" v-bind="$attrs">
 			<div v-if="loading && !noLoader" class="back --overlay is--active">
 				<LoaderSimple :label="label" :theme="theme" />
 			</div>

packages/components-vue/src/components/slider/Simple.vue

@@ -1,7 +1,11 @@
 <template>
-	<header
+	<LoaderContent
 		ref="wrapperRef"
+		:loading="loading"
+		content
 		class="xamu-slider"
+		el="header"
+		:theme="theme"
 		@mouseover="mouseOnTabs = true"
 		@mouseleave="mouseOnTabs = false"
 	>
@@ -19,7 +23,6 @@
 				>
 					<slot></slot>
 				</component>
-				<LoaderSimple v-if="loading" :theme="theme" />
 			</div>
 			<ul
 				v-if="childCount > 1 && controls"
@@ -64,7 +67,7 @@
 				</li>
 			</ul>
 		</div>
-	</header>
+	</LoaderContent>
 </template>
 
 <script setup lang="ts">
@@ -78,7 +81,7 @@
 	import IconFa from "../icon/Fa.vue";
 	import ActionButton from "../action/Button.vue";
 	import ActionButtonToggle from "../action/ButtonToggle.vue";
-	import LoaderSimple from "../loader/Simple.vue";
+	import LoaderContent from "../loader/Content.vue";
 
 	import { useHelpers } from "../../composables/utils";
 	import type { iUseThemeProps } from "../../types/props";
@@ -284,8 +287,6 @@
 	 * Set slider interval
 	 */
 	function launchInterval() {
-		loading.value = true;
-
 		if (!sliderRef.value || !sliderContainerRef.value) return;
 
 		const slides = Array.from(sliderRef.value.children || []) as HTMLElement[];
@@ -307,7 +308,6 @@
 
 			debouncedTab(false);
 		}, props.intervalDuration);
-		loading.value = false;
 	}
 
 	/**
@@ -318,7 +318,9 @@
 	// lifecycle
 	if (isBrowser) {
 		onMounted(() => {
+			loading.value = true;
 			launchInterval();
+			loading.value = false;
 		});
 
 		onBeforeUnmount(() => {

packages/components-vue/src/index.ts

@@ -4,6 +4,7 @@ export { default as BaseAction } from "./components/base/Action.vue";
 export { default as BaseInput } from "./components/base/Input.vue";
 export { default as BaseSelect } from "./components/base/Select.vue";
 export { default as BaseWrapper } from "./components/base/Wrapper.vue";
+export { default as BaseBox } from "./components/base/Box.vue";
 export { default as BaseErrorBoundary } from "./components/base/ErrorBoundary.vue";
 
 // icon

packages/styles/src/components/action/_box.scss

@@ -36,9 +36,9 @@
 				@include module.flex-box(column, nowrap, flex-start, stretch);
 
 				@layer defaults {
-					> :not(:last-child) {
-						// @defaults mBottom
-						margin-bottom: 1rem;
+					& {
+						// @defaults
+						gap: 1rem;
 					}
 				}
 			}
@@ -115,7 +115,30 @@
 				}
 			}
 
-			> .#{module.$component-box} {
+			// Square shape
+			// this assummes there is only one child
+			//
+			// @group Modifiers
+			&[class*="--square"] {
+				margin-left: auto;
+				margin-right: auto;
+				overflow: hidden;
+
+				&::before {
+					content: "";
+					display: block;
+					width: 100%;
+					height: 0;
+					padding-bottom: 100%;
+				}
+
+				> * {
+					position: absolute;
+					top: 50%;
+					left: 50%;
+					transform: translate(-50%, -50%);
+				}
+
 				&:has(img) {
 					padding: 0;
 				}
@@ -128,38 +151,16 @@
 						}
 					}
 				}
+			}
 
-				// Square shape
-				// this assummes there is only one child
-				//
-				// @group Modifiers
-				@include module.extend-maps(
-						module.$element-sizes,
-						meta.get-function("box-square-size-selector"),
-						md,
-						".#{module.$prefix-default}--square"
-					)
-					using($name, $value, $is-default) {
-					width: $value;
-					margin-left: auto;
-					margin-right: auto;
-					overflow: hidden;
-
-					&::before {
-						content: "";
-						display: block;
-						width: 100%;
-						height: 0;
-						padding-bottom: 100%;
-					}
-
-					> * {
-						position: absolute;
-						top: 50%;
-						left: 50%;
-						transform: translate(-50%, -50%);
-					}
-				}
+			@include module.extend-maps(
+					module.$element-sizes,
+					meta.get-function("box-square-size-selector"),
+					md,
+					".#{module.$prefix-default}--square"
+				)
+				using($name, $value, $is-default) {
+				width: $value;
 			}
 		}
 	}