Merge pull request #18 from laranatech/dev

v0.2.13

CHANGELOG.md

@@ -1,3 +1,11 @@
+# 0.2.13
+
+- **fix:** tabs height
+- **fix:** DEBUG warning position
+- **feat:** provide/inject
+- **feat:** `row` and `column` components
+- **feat:** removed `lastW` and `lastH`, added `useResolution()`
+
 # 0.2.12
 
 - **fix:** removed duplicate client code

example/components/header.js

@@ -1,17 +1,24 @@
-const { BaseComponent, layout, text } = require('larana-js')
+const { BaseComponent, row, text } = require('larana-js')
+const { TitleComponent } = require('./title.js')
 
 class HeaderComponent extends BaseComponent {
 	defaultStyle = {
 		height: 80,
 		gap: 'var:u2',
 		bg: 'var:accent',
 	}
-	root() {
+
+	init() {
 		const page = this.usePage()
-		return layout({
+
+		this.provide('title', page.title())
+	}
+
+	root() {
+		return row({
 			children: [
 				text({ value: 'LaranaJS', style: 'h1' }),
-				text({ value: page.title(), style: 'h3' }),
+				new TitleComponent({}),
 			],
 		})
 	}

example/components/title.js

@@ -0,0 +1,15 @@
+const { BaseComponent, text, layout } = require('larana-js')
+
+class TitleComponent extends BaseComponent {
+	root() {
+		const title = this.inject('title', 'Nothing')
+
+		return layout({
+			children: [
+				text({ value: title, style: 'h2' }),
+			],
+		})
+	}
+}
+
+module.exports = { TitleComponent }

example/components/todo-item.js

@@ -1,4 +1,4 @@
-const { BaseComponent, text, layout, button, checkbox } = require('larana-js')
+const { BaseComponent, text, row, button, checkbox } = require('larana-js')
 
 class TodoItemComponent extends BaseComponent {
 	defaultStyle = {
@@ -24,13 +24,13 @@ class TodoItemComponent extends BaseComponent {
 	}
 
 	root() {
-		return layout({
+		return row({
 			children: [
 				text({
 					value: this.item.label,
 					style: ['text', { size: 9 }],
 				}),
-				layout({
+				row({
 					style: ['gap_2', { height: 'var:componentHeight' }],
 					children: [
 						checkbox({

example/pages/404-page.js

@@ -1,4 +1,4 @@
-const { Page, layout, text, laranaLogo } = require('larana-js')
+const { Page, layout, column, text, laranaLogo } = require('larana-js')
 
 const { header } = require('../components')
 
@@ -8,15 +8,12 @@ class NotFoundPage extends Page {
 	}
 
 	root({ w }) {
-		const logoH = 512
+		// const logoH = 512
 
-		return layout({
+		return column({
 			outlineColor: '#00f',
 			id: 'body',
-			style: [
-				'body',
-				'column',
-			],
+			style: 'body',
 			children: [
 				header({}),
 				// layout({}),

example/pages/bar-page.js

@@ -1,6 +1,7 @@
 const {
 	Page,
-	layout,
+	column,
+	row,
 	text,
 	barChart,
 } = require('larana-js')
@@ -24,7 +25,7 @@ class BarPage extends Page {
 			loadingText: 'Loading',
 		})
 
-		this.initialRoot = layout({
+		this.initialRoot = row({
 			children: [
 				text({ value: 'Loading...', style: 'text' }),
 			],
@@ -36,25 +37,22 @@ class BarPage extends Page {
 	root() {
 		const { state } = this.useState()
 
-		return layout({
+		return column({
 			style: [
 				'body',
-				{
-					gap: 'var:u2',
-					direction: 'column',
-				},
+				{ gap: 'var:u2' },
 			],
 			children: [
 				header({}),
-				layout({
+				row({
 					children: [
 						text({
 							value: 'Loading data for chart',
 							style: 'h1',
 						}),
 					],
 				}),
-				layout({
+				row({
 					style: { size: 9 },
 					children: [
 						state.loaded

example/pages/counter-page.js

@@ -1,7 +1,8 @@
 const {
 	Page,
 	text,
-	layout,
+	row,
+	column,
 	button,
 } = require('larana-js')
 
@@ -21,15 +22,15 @@ class CounterPage extends Page {
 	root() {
 		const { state, setState } = this.useState()
 
-		return layout({
+		return column({
 			style: [
 				'body',
-				{ gap: 'var:u2', direction: 'column' },
+				{ gap: 'var:u2' },
 			],
 			children: [
 				header({}),
-				layout({
-					style: { size: 9, direction: 'column' },
+				column({
+					style: { size: 9 },
 					children: [
 						text({
 							style: [
@@ -38,9 +39,8 @@ class CounterPage extends Page {
 							],
 							value: `Counter: ${state.counter}`,
 						}),
-						layout({
+						row({
 							style: {
-								direction: 'row',
 								size: 1,
 								gap: 'var:u2',
 								padding: 'var:u2',

example/pages/game-page.js

@@ -1,4 +1,4 @@
-const { Page, text, layout } = require('larana-js')
+const { Page, text, layout, column } = require('larana-js')
 
 const { header } = require('../components')
 
@@ -8,11 +8,8 @@ class GamePage extends Page {
 	}
 
 	root({ w }) {
-		return layout({
-			style: [
-				'body',
-				{ direction: 'column' },
-			],
+		return column({
+			style: 'body',
 			children: [
 				header({}),
 				layout({

example/pages/home-page.js

@@ -1,6 +1,7 @@
 const {
 	Page,
-	layout,
+	row,
+	column,
 	text,
 	radio,
 	checkbox,
@@ -35,18 +36,15 @@ class HomePage extends Page {
 	}
 
 	root() {
-		return layout({
-			style: [
-				'body',
-				{
-					gap: 'var:u2',
-					direction: 'column',
-				},
-			],
+		const { state } = this.useState()
+		const { disabledCheckbox } = state
+
+		return column({
+			style: 'body',
 			children: [
 				header({}),
-				layout({
-					style: ['gap_2', 'size_1'],
+				row({
+					style: ['gap_2', 'size_1', 'p_2'],
 					children: [
 						list({
 							style: ['column', 'gap_2'],
@@ -55,30 +53,36 @@ class HomePage extends Page {
 								{ name: 'checkbox2', text: 'checkbox2', fg: '#f0f' },
 								{ name: 'checkbox3', text: 'checkbox3', fg: '#00f' },
 							],
-							template: (item) => layout({
-								style: 'gap_1',
+							template: (item) => row({
+								style: ['gap_1', 'hug'],
 								children: [
 									radio({
 										model: 'disabledCheckbox',
 										name: item.name,
 										style: { fg: item.fg },
 									}),
-									text({ value: item.text, style: 'h2' }),
+									text({ value: item.text, style: ['h2', { textAlign: 'left' }] }),
 								],
 							}),
 						}),
-						layout({
+						row({
 							style: ['column', 'gap_2'],
 							children: [
 								list({
 									style: ['column', 'gap_2'],
 									value: ['checkbox1', 'checkbox2', 'checkbox3'],
-									template: (item) => checkbox({ model: item }),
+									template: (item) => checkbox({
+										model: item,
+										disabled: disabledCheckbox === item,
+									}),
 								}),
 								list({
 									style: ['column', 'gap_2'],
 									value: ['checkbox1', 'checkbox2', 'checkbox3'],
-									template: (item) => toggle({ model: item }),
+									template: (item) => toggle({
+										model: item,
+										disabled: disabledCheckbox === item,
+									}),
 								}),
 							],
 						}),

example/pages/image-page.js

@@ -1,4 +1,4 @@
-const { Page, layout, image, button } = require('larana-js')
+const { Page, layout, column, image, button } = require('larana-js')
 
 const { header } = require('../components')
 
@@ -12,13 +12,10 @@ class ImagePage extends Page {
 	}
 
 	root({ w }) {
-		return layout({
+		return column({
 			outlineColor: '#00f',
 			id: 'body',
-			style: [
-				'body',
-				'column',
-			],
+			style: 'body',
 			children: [
 				header({}),
 				layout({
@@ -34,8 +31,8 @@ class ImagePage extends Page {
 						image({
 							src: '/static/images/larana.svg',
 						}),
-						layout({
-							style: ['column', 'gap_2'],
+						column({
+							style: 'gap_2',
 							children: [
 								image({
 									src: '/static/images/96x96.jpg',

example/pages/quiz-page.js

@@ -1,4 +1,4 @@
-const { Page, layout, text, list, radio, button } = require('larana-js')
+const { Page, layout, row, column, text, list, radio, button } = require('larana-js')
 
 const { header } = require('../components')
 
@@ -69,14 +69,13 @@ class QuizPage extends Page {
 
 		const question = questions[current]
 
-		return layout({
-			style: 'column',
+		return column({
 			children: [
 				text({ value: question.caption, style: 'h1' }),
 				list({
 					value: question.options,
 					template: (item) => {
-						return layout({
+						return row({
 							style: { gap: 'var:u2', height: 'var:componentHeight' },
 							children: [
 								layout({ style: { size: 2 } }),
@@ -91,7 +90,7 @@ class QuizPage extends Page {
 					},
 				}),
 				layout({}),
-				layout({
+				row({
 					children: [
 						layout({}),
 						button({
@@ -135,8 +134,7 @@ class QuizPage extends Page {
 			}
 		})
 
-		return layout({
-			style: 'column',
+		return column({
 			children: [
 				text({ value: `Your score: ${score}/${totalScore}`, style: 'h1' }),
 				list({
@@ -147,7 +145,7 @@ class QuizPage extends Page {
 						const correct = answer === item.correctAnswer
 						const selectedOption = item.options.find((o) => o.value === answer)
 
-						return layout({
+						return row({
 							children: [
 								layout({ style: { size: 1 } }),
 								text({ value: item.caption, style: 'h3' }),
@@ -174,17 +172,14 @@ class QuizPage extends Page {
 
 		const allAnswered = state.answers.length === state.questions.length
 
-		return layout({
+		return column({
 			outlineColor: '#00f',
 			id: 'body',
-			style: [
-				'body',
-				'column',
-			],
+			style: 'body',
 			children: [
 				header({}),
 				text({ value: 'Larana Quiz', style: 'h1' }),
-				layout({
+				row({
 					id: 'layout1',
 					style: {
 						size: 9,