@things-factory/shell 4.2.12 → 4.3.0

package/client/app/app-style.js

@@ -1,4 +1,4 @@
-import { css } from 'lit-element'
+import { css } from 'lit'
 
 export const AppStyle = css`
   :host {
@@ -9,6 +9,7 @@ export const AppStyle = css`
     grid-template-areas: var(--app-grid-template-area, 'header header header' 'nav main aside' 'nav footer aside');
     grid-gap: var(--app-grid-gap, 0em);
 
+    max-width: 100vw;
     width: 100vw;
     height: 100vh;
   }

package/client/app/app.js

@@ -1,14 +1,14 @@
 import '@operato/layout'
 
-import { html, LitElement } from 'lit'
-import { connect } from 'pwa-helpers/connect-mixin.js'
-import { installRouter } from 'pwa-helpers/router.js'
+import { LitElement, html } from 'lit'
+import { UPDATE_ACTIVE_PAGE, UPDATE_CONTEXT_PATH, UPDATE_MODULES, navigateWithSilence, store } from '@operato/shell'
 
-import { navigateWithSilence, store, UPDATE_ACTIVE_PAGE, UPDATE_CONTEXT_PATH, UPDATE_MODULES } from '@operato/shell'
+import { AppStyle } from './app-style'
 import { ScrollbarStyles } from '@operato/styles'
+import { connect } from 'pwa-helpers/connect-mixin.js'
 import { getPathInfo } from '@operato/utils'
-
-import { AppStyle } from './app-style'
+import { installRouter } from 'pwa-helpers/router.js'
+import throttle from 'lodash-es/throttle'
 
 class ThingsApp extends connect(store)(LitElement) {
   static get properties() {
@@ -56,6 +56,8 @@ class ThingsApp extends connect(store)(LitElement) {
   connectedCallback() {
     super.connectedCallback()
 
+    window.addEventListener('resize', () => this.resized())
+
     /* 모듈 임포트를 동적으로 처리한다. */
     import(
       /* webpackPrefetch: true */
@@ -111,6 +113,22 @@ class ThingsApp extends connect(store)(LitElement) {
     this.setBase()
   }
 
+  resized() {
+    if (!this._throttledResize) {
+      this._throttledResize = throttle(() => {
+        const aside = this.renderRoot.querySelector('ox-aside-bar').clientWidth
+        const nav = this.renderRoot.querySelector('ox-nav-bar').clientWidth
+
+        this.style.setProperty(
+          '--app-grid-template-columns',
+          `auto minmax(calc(100vw - ${aside}px - ${nav}px), 1fr) auto`
+        )
+      }, 100)
+    }
+
+    this._throttledResize()
+  }
+
   routeToPage() {
     let activePages = this.shadowRoot.querySelectorAll('main > .page[active]')
     activePages.forEach(page => {
@@ -165,6 +183,8 @@ class ThingsApp extends connect(store)(LitElement) {
     if (changedProps.has('_contextPath')) {
       this.setBase()
     }
+
+    this.resized()
   }
 
   shouldUpdate() {

package/client/app/pages/page-404.js

@@ -1,4 +1,4 @@
-import { css, html } from 'lit-element'
+import { css, html } from 'lit'
 
 import { PageView } from '@operato/shell'
 

package/client/elements/oops-note.js

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from 'lit-element'
+import { LitElement, html, css } from 'lit'
 
 import '@material/mwc-icon'
 

package/client/elements/oops-progress.js

@@ -1,4 +1,4 @@
-import { html, LitElement } from 'lit-element'
+import { html, LitElement } from 'lit'
 
 import { subscribe } from '@operato/graphql'
 

package/client/elements/oops-spinner.js

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from 'lit-element'
+import { LitElement, html, css } from 'lit'
 
 export class OopsSpinner extends LitElement {
   static get styles() {

package/client/entries/public/home.js

@@ -1,7 +1,7 @@
 import '@material/mwc-icon-button'
 import '@material/mwc-button'
 
-import { css, html, LitElement } from 'lit-element'
+import { css, html, LitElement } from 'lit'
 
 export class HomePage extends LitElement {
   static get styles() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/shell",
-  "version": "4.2.12",
+  "version": "4.3.0",
   "description": "Core module for framework",
   "bin": {
     "things-factory": "bin/things-factory",
@@ -44,16 +44,16 @@
     "@material/mwc-icon-button": "^0.25.3",
     "@material/mwc-slider": "^0.25.3",
     "@material/mwc-textfield": "^0.25.3",
-    "@operato/board": "^0.3.28",
-    "@operato/graphql": "^0.3.28",
-    "@operato/help": "^0.3.28",
-    "@operato/layout": "^0.3.28",
-    "@operato/shell": "^0.3.28",
-    "@operato/utils": "^0.3.28",
+    "@operato/board": "^0.4.3",
+    "@operato/graphql": "^0.4.3",
+    "@operato/help": "^0.4.3",
+    "@operato/layout": "^0.4.3",
+    "@operato/shell": "^0.4.3",
+    "@operato/utils": "^0.4.3",
     "@things-factory/ejs-remote": "^4.1.40",
     "@things-factory/env": "^4.1.40",
-    "@things-factory/styles": "^4.1.40",
-    "@things-factory/utils": "^4.1.40",
+    "@things-factory/styles": "^4.3.0",
+    "@things-factory/utils": "^4.3.0",
     "@webcomponents/webcomponentsjs": "^2.6.0",
     "@webpack-contrib/schema-utils": "^1.0.0-beta.0",
     "apollo-server-core": "^3.5.0",
@@ -92,9 +92,10 @@
     "koa-static": "^5.0.0",
     "koa-unless": "^1.0.7",
     "koa2-connect-history-api-fallback": "^0.1.2",
-    "lit": "^2.0.2",
+    "lit": "^2.2.0",
     "loader-utils": "^2.0.0",
     "lodash": "^4.17.15",
+    "lodash-es": "^4.17.15",
     "mkdirp": "^1.0.3",
     "mqtt": "^4.3.4",
     "node-fetch": "^2.6.0",
@@ -128,5 +129,5 @@
   "resolutions": {
     "core-js": "^3.16.0"
   },
-  "gitHead": "fea26f2ea238a3a279c7ab6427cd8aedcd68926b"
+  "gitHead": "772c8e6f56a3dda655ad49f7018a49a37e081ee8"
 }