@uxland/primary-shell 1.0.1 → 1.0.3

package/dist/index.js

@@ -94,7 +94,7 @@
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */function Bs(r,t){return(e,i,s)=>{const n=o=>{var a;return((a=o.renderRoot)==null?void 0:a.querySelector(r))??null};if(t){const{get:o,set:a}=typeof i=="object"?e:s??(()=>{const c=Symbol();return{get(){return this[c]},set(l){this[c]=l}}})();return Qe(e,i,{get(){let c=o.call(this);return c===void 0&&(c=n(this),(c!==null||this.hasUpdated)&&a.call(this,c)),c}})}return Qe(e,i,{get(){return n(this)}})}}const lt={header:"header-region",actionsToolbar:"actions-toolbar-region",main:"main-region",sidebar:"asidebar-region"};function v(r,t,e,i){var s=arguments.length,n=s<3?t:i===null?i=Object.getOwnPropertyDescriptor(t,e):i,o;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")n=Reflect.decorate(r,t,e,i);else for(var a=r.length-1;a>=0;a--)(o=r[a])&&(n=(s<3?o(n):s>3?o(t,e,n):o(t,e))||n);return s>3&&n&&Object.defineProperty(t,e,n),n}/**
+ */function Bs(r,t){return(e,i,s)=>{const n=o=>{var a;return((a=o.renderRoot)==null?void 0:a.querySelector(r))??null};if(t){const{get:o,set:a}=typeof i=="object"?e:s??(()=>{const c=Symbol();return{get(){return this[c]},set(l){this[c]=l}}})();return Qe(e,i,{get(){let c=o.call(this);return c===void 0&&(c=n(this),(c!==null||this.hasUpdated)&&a.call(this,c)),c}})}return Qe(e,i,{get(){return n(this)}})}}const lt={header:"header-region",actionsToolbar:"actions-toolbar-region",main:"main-region",sidebar:"asidebar-region",footer:"footer-region"};function v(r,t,e,i){var s=arguments.length,n=s<3?t:i===null?i=Object.getOwnPropertyDescriptor(t,e):i,o;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")n=Reflect.decorate(r,t,e,i);else for(var a=r.length-1;a>=0;a--)(o=r[a])&&(n=(s<3?o(n):s>3?o(t,e,n):o(t,e))||n);return s>3&&n&&Object.defineProperty(t,e,n),n}/**
  * @license
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0

package/dist/index.mjs

@@ -2278,7 +2278,8 @@ const Pt = {
   header: "header-region",
   actionsToolbar: "actions-toolbar-region",
   main: "main-region",
-  sidebar: "asidebar-region"
+  sidebar: "asidebar-region",
+  footer: "footer-region"
 };
 function v(r, t, e, i) {
   var s = arguments.length, n = s < 3 ? t : i === null ? i = Object.getOwnPropertyDescriptor(t, e) : i, o;

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@uxland/primary-shell",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Framework Integració modular",
   "author": "UXLand <dev@uxland.es>",
   "homepage": "https://github.com/uxland/fim-sandbox/tree/app#readme",
   "license": "UNLICENSED",
   "main": "index.ts",
   "types": "lib/index.d.ts",
-  "module": "dist/index.js",
   "files": [
+    "src",
     "lib",
     "es",
     "dist"
@@ -25,8 +25,8 @@
     "url": "https://github.com/uxland/fim-sandbox-region-test/issues"
   },
   "dependencies": {
-    "@fim-sandbox/core": "^1.0.0",
-    "@primary/ui-components": "^1.0.0",
+    "@uxland/fim-core": "^1.0.0",
+    "@uxland/primary-ui-components": "^1.0.0",
     "@uxland/regions": "^1.0.0",
     "tslib": "^2.3.0",
     "lit": "^3.1.0",

package/src/initializer.ts

@@ -0,0 +1,5 @@
+import { PrimaryShell } from "./primary-shell";
+
+export const initializeShell = (element : HTMLElement) => {
+    element.appendChild(new PrimaryShell());
+}

package/src/primary-shell.ts

@@ -0,0 +1,78 @@
+import {ShellLitRegionHost} from '@uxland/fim-core';
+import {IRegion, region} from '@uxland/regions';
+import {LitElement, css, html} from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { regions} from './regions';
+import '@uxland/primary-ui-components';
+
+//@ts-ignore
+@customElement('primary-shell')
+//@ts-ignore
+export class PrimaryShell extends ShellLitRegionHost(LitElement) {
+  override render() {
+    return html` <div class="container">
+      <div class="header">
+        <div id="header-region-container"></div>
+        <div id="actions-toolbar-region-container"></div>
+      </div>
+
+      <div class="main-container">
+        <div id="sidebar-region-region-container"></div>
+        <div id="main-region-region-container"></div>
+      </div>
+    </div>`;
+  }
+
+  static styles = css`
+  :host {
+    width: 100%;
+    overflow: hidden;
+  }
+  .container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    background: aliceblue;
+  }
+  .header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    background-color: blue;
+    height: 60px;
+    background-color: white;
+    color: black;
+    box-shadow: rgba(0, 0, 0, 0.12) 0px 4px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
+    z-index: 1;
+
+    #actions-toolbar-region-container{
+      display: flex;
+      flex-direction:row;
+    }
+  }
+  .main-container {
+    min-height: 1px;
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    #sidebar-region-region-container {
+      background: white;
+      width: 15vw;
+      box-shadow: rgba(0, 0, 0, 0.12) 4px -1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
+    }
+  }
+  `;
+
+  @region({targetId: 'header-region-container', name: regions.header})
+  headerRegion: IRegion | undefined;
+
+  @region({targetId: 'actions-toolbar-region-container', name: regions.actionsToolbar})
+  actionsToolbarRegion: IRegion | undefined;
+
+  @region({targetId: 'sidebar-region-region-container', name: regions.sidebar})
+  sidebarRegion: IRegion | undefined;
+
+  @region({targetId: 'main-region-region-container', name: regions.main})
+  mainRegion: IRegion | undefined;
+}

package/src/regions.ts

@@ -0,0 +1,7 @@
+export const regions = {
+  header: 'header-region',
+  actionsToolbar: 'actions-toolbar-region',
+  main: 'main-region',
+  sidebar: 'asidebar-region',
+  footer: 'footer-region'
+};