@esportsplus/ui 0.0.102 → 0.0.103

package/build/components/index.d.ts

@@ -2,6 +2,7 @@ export { default as alert } from './alert';
 export { default as field } from './field';
 export { default as form } from './form';
 export { default as number } from './number';
+export { default as page } from './page';
 export { default as root } from './root';
 export { default as scrollbar } from './scrollbar';
 export { default as site } from './site';

package/build/components/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.tooltip = exports.site = exports.scrollbar = exports.root = exports.number = exports.form = exports.field = exports.alert = void 0;
+exports.tooltip = exports.site = exports.scrollbar = exports.root = exports.page = exports.number = exports.form = exports.field = exports.alert = void 0;
 var alert_1 = require("./alert");
 Object.defineProperty(exports, "alert", { enumerable: true, get: function () { return __importDefault(alert_1).default; } });
 var field_1 = require("./field");
@@ -12,6 +12,8 @@ var form_1 = require("./form");
 Object.defineProperty(exports, "form", { enumerable: true, get: function () { return __importDefault(form_1).default; } });
 var number_1 = require("./number");
 Object.defineProperty(exports, "number", { enumerable: true, get: function () { return __importDefault(number_1).default; } });
+var page_1 = require("./page");
+Object.defineProperty(exports, "page", { enumerable: true, get: function () { return __importDefault(page_1).default; } });
 var root_1 = require("./root");
 Object.defineProperty(exports, "root", { enumerable: true, get: function () { return __importDefault(root_1).default; } });
 var scrollbar_1 = require("./scrollbar");

package/build/components/page/index.d.ts

@@ -1,15 +1,14 @@
-import header from './header';
-import layout from './layout';
+declare const header: ({ subtitle, suptitle, title }: {
+    subtitle?: string | undefined;
+    suptitle?: string | undefined;
+    title?: string | undefined;
+}) => import("@esportsplus/template/build/types").Renderable;
 declare const _default: {
-    header: (data: {
+    header: ({ subtitle, suptitle, title }: {
         subtitle?: string | undefined;
         suptitle?: string | undefined;
         title?: string | undefined;
     }) => import("@esportsplus/template/build/types").Renderable;
-    layout: (data?: {
-        class?: string | undefined;
-        content?: any;
-    }) => import("@esportsplus/template/build/types").Renderable;
 };
 export default _default;
-export { header, layout };
+export { header };

package/build/components/page/index.js

@@ -1,11 +1,25 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.layout = exports.header = void 0;
-const header_1 = __importDefault(require("./header"));
-exports.header = header_1.default;
-const layout_1 = __importDefault(require("./layout"));
-exports.layout = layout_1.default;
-exports.default = { header: header_1.default, layout: layout_1.default };
+exports.header = void 0;
+const template_1 = require("@esportsplus/template");
+const header = ({ subtitle, suptitle, title }) => (0, template_1.html) `
+    ${suptitle ? (0, template_1.html) `
+        <span class="page-suptitle --text-bold --text-crop --text-uppercase --text-200" style="--color-default: var(--color-primary-400);letter-spacing: 0.24px;">
+            ${suptitle}
+        </span>
+    ` : ''}
+
+    ${title ? (0, template_1.html) `
+        <h1 class="page-title --line-height-200 --margin-300 ${!subtitle && '--text-crop-bottom'} ${suptitle ? '--margin-top' : '--text-crop-top'}">
+            ${title}
+        </h1>
+    ` : ''}
+
+    ${subtitle ? (0, template_1.html) `
+        <span class="page-subtitle --margin-top --margin-300 --text-crop-bottom">
+            ${subtitle}
+        </span>
+    ` : ''}
+`;
+exports.header = header;
+exports.default = { header };

package/package.json

@@ -21,5 +21,5 @@
         "prepublishOnly": "npm run build"
     },
     "types": "build/index.d.ts",
-    "version": "0.0.102"
+    "version": "0.0.103"
 }

package/src/components/index.ts

@@ -2,6 +2,7 @@ export { default as alert }from './alert';
 export { default as field }from './field';
 export { default as form }from './form';
 export { default as number }from './number';
+export { default as page }from './page';
 export { default as root }from './root';
 export { default as scrollbar }from './scrollbar';
 export { default as site }from './site';

package/src/components/page/index.ts

@@ -0,0 +1,26 @@
+import { html } from '@esportsplus/template';
+
+
+const header = ({ subtitle, suptitle, title }: { subtitle?: string, suptitle?: string, title?: string }) => html`
+    ${suptitle ? html`
+        <span class="page-suptitle --text-bold --text-crop --text-uppercase --text-200" style="--color-default: var(--color-primary-400);letter-spacing: 0.24px;">
+            ${suptitle}
+        </span>
+    ` : ''}
+
+    ${title ? html`
+        <h1 class="page-title --line-height-200 --margin-300 ${!subtitle && '--text-crop-bottom'} ${suptitle ? '--margin-top' : '--text-crop-top'}">
+            ${title}
+        </h1>
+    ` : ''}
+
+    ${subtitle ? html`
+        <span class="page-subtitle --margin-top --margin-300 --text-crop-bottom">
+            ${subtitle}
+        </span>
+    ` : ''}
+`;
+
+
+export default { header };
+export { header };