Alpha

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "bsts-test",
-	"version": "0.3.11",
+	"version": "5.3.2.0",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/printf83/bsts-test.git"
@@ -33,20 +33,20 @@
 	},
 	"devDependencies": {
 		"@total-typescript/ts-reset": "^0.4.2",
-		"@types/bootstrap": "^5.2.6",
-		"@types/js-beautify": "^1.14.0",
+		"@types/bootstrap": "^5.2.7",
+		"@types/js-beautify": "^1.14.1",
 		"compression-webpack-plugin": "^10.0.0",
 		"gh-pages": "^5.0.0",
 		"terser-webpack-plugin": "^5.3.9",
 		"ts-loader": "^9.4.4",
-		"typescript": "^5.1.6",
+		"typescript": "^5.2.2",
 		"webpack": "^5.88.2",
 		"webpack-cli": "^5.1.4"
 	},
 	"dependencies": {
-		"@printf83/bsts": "^0.3.11",
-		"bootstrap": "^5.3.1",
-		"chart.js": "^4.3.3",
+		"@printf83/bsts": "^0.3.12",
+		"bootstrap": "^5.3.2",
+		"chart.js": "^4.4.0",
 		"chartjs-plugin-datalabels": "^2.2.0",
 		"highlight.js": "^11.8.0",
 		"js-beautify": "^1.14.9"

src/ctl/example/_fn.ts

@@ -266,11 +266,6 @@ export const getCSSBaseOnSource = (attr?: core.IAttr) => {
 
 		if (attrHasClass(attr, "color-pallet-big-box")) {
 			result.push(`
-				.color-pallet-big {
-					display: flex;
-					justify-content: center;
-				}
-
 				.color-pallet-big div {
 					width: 3rem;
 					height: 3rem;
@@ -285,11 +280,6 @@ export const getCSSBaseOnSource = (attr?: core.IAttr) => {
 
 		if (attrHasClass(attr, "color-pallet-box")) {
 			result.push(`
-				.color-pallet {
-					display: flex;
-					justify-content: center;
-				}
-
 				.color-pallet div {
 					width: 1.5rem;
 					height: 1.5rem;

src/ctl/main/_db.ts

@@ -1,7 +1,7 @@
 import { IMenu, IMenuItem } from "./menu.js";
 
 export const DEFAULTDOCUMENT = "docs/gettingstarted/home";
-export const CURRENTVERSION = "0.3.11";
+export const CURRENTVERSION = "0.3.12";
 
 export const THEMEDB = [
 	{
@@ -58,6 +58,7 @@ export const menuFS = [
 	{ label: "Pricing", value: "docs/example/pricing" },
 	{ label: "Checkout", value: "docs/example/checkout" },
 	{ label: "Product", value: "docs/example/product" },
+	{ label: "Cover", value: "docs/example/cover" },
 ];
 
 export const menu: IMenu[] = [

src/docs/_index.ts

@@ -35,6 +35,11 @@ export const doc = (value: string, callback: (result: IContent | null) => void)
 				callback(res.product);
 			});
 			break;
+		case "docs/example/cover":
+			example.cover().then((res) => {
+				callback(res.cover);
+			});
+			break;
 
 		//--------------------------
 

src/docs/bsts/accent_color.ts

@@ -359,8 +359,10 @@ export const accent_color: IContent = {
 						},
 					],
 					output: () => {
+						const id = core.UUID();
+
 						return new h.div([
-							"Accent color :",
+							new b.label({ for: id }, "Accent color :"),
 							new h.div(
 								{
 									rounded: true,
@@ -371,6 +373,7 @@ export const accent_color: IContent = {
 								},
 
 								new b.input({
+									id: id,
 									type: "color",
 									width: 100,
 									height: 100,
@@ -475,17 +478,27 @@ export const accent_color: IContent = {
 								})
 							),
 
-							"Color preview :",
-							new h.div({ class: "color-pallet-big", marginBottom: 3 }, [
-								new h.div({ bgColor: "primary", title: "primary" }),
-								new h.div({ bgColor: "secondary", title: "Secondary" }),
-								new h.div({ bgColor: "success", title: "Success" }),
-								new h.div({ bgColor: "danger", title: "Danger" }),
-								new h.div({ bgColor: "warning", title: "Warning" }),
-								new h.div({ bgColor: "info", title: "Info" }),
-								new h.div({ bgColor: "light", title: "Light" }),
-								new h.div({ bgColor: "dark", title: "Dark" }),
-							]),
+							new b.label("Color preview :"),
+							new h.div(
+								{
+									class: "color-pallet-big",
+									marginBottom: 3,
+									display: "flex",
+									flex: "wrap",
+									justifyContent: "center",
+									gap: 1,
+								},
+								[
+									new h.div({ bgColor: "primary", title: "primary" }),
+									new h.div({ bgColor: "secondary", title: "Secondary" }),
+									new h.div({ bgColor: "success", title: "Success" }),
+									new h.div({ bgColor: "danger", title: "Danger" }),
+									new h.div({ bgColor: "warning", title: "Warning" }),
+									new h.div({ bgColor: "info", title: "Info" }),
+									new h.div({ bgColor: "light", title: "Light" }),
+									new h.div({ bgColor: "dark", title: "Dark" }),
+								]
+							),
 						]);
 					},
 				}),
@@ -593,8 +606,9 @@ export const accent_color: IContent = {
 							"dark",
 							"body",
 						].map((i) => {
+							const id = core.UUID();
 							return new h.div([
-								core.uppercaseFirst(`${i} color`),
+								new b.label({ id: id }, core.uppercaseFirst(`${i} color`)),
 								new h.div(
 									{
 										rounded: true,
@@ -604,6 +618,7 @@ export const accent_color: IContent = {
 									},
 
 									new b.input({
+										id: id,
 										type: "color",
 										width: 100,
 										height: 100,
@@ -654,7 +669,14 @@ export const accent_color: IContent = {
 						const colorPalletItem = (value?: colorPalletItem) => {
 							if (value) {
 								return new h.div(
-									{ class: "color-pallet", paddingStart: 3, paddingEnd: 1 },
+									{
+										class: "color-pallet",
+										paddingStart: 3,
+										paddingEnd: 1,
+										display: "flex",
+										flex: value ? undefined : "wrap",
+										justifyContent: "center",
+									},
 									[
 										new h.div({ style: { backgroundColor: value.primary } }),
 										new h.div({ style: { backgroundColor: value.secondary } }),
@@ -668,7 +690,13 @@ export const accent_color: IContent = {
 								);
 							} else {
 								return new h.div(
-									{ class: "color-pallet", paddingStart: 3, paddingEnd: 1 },
+									{
+										class: "color-pallet",
+										paddingStart: 3,
+										paddingEnd: 1,
+										display: "flex",
+										justifyContent: "center",
+									},
 									[
 										new h.div({ bgColor: "primary" }),
 										new h.div({ bgColor: "secondary" }),