smbls 2.6.11 → 2.6.12

package/package.json

@@ -3,7 +3,7 @@
   "description": "UI Library built on Scratch and DOMQL",
   "private": false,
   "author": "symbo.ls",
-  "version": "2.6.11",
+  "version": "2.6.12",
   "repository": "https://github.com/symbo-ls/smbls",
   "main": "src/index.js",
   "files": [

package/src/Input.js

@@ -13,6 +13,7 @@ export const Input = {
     fontSize: 'A',
     round: 'C',
     lineHeight: 1,
+    fontFamily: 'smbls',
     padding: 'Z A'
   },
 

package/src/TextArea.js

@@ -0,0 +1,15 @@
+'use strict'
+
+import { Input, Focusable } from '.'
+
+const props = {
+  height: 'E',
+  lineHeight: 1.4,
+  style: { resize: 'none' }
+}
+
+export const TextArea = {
+  extend: [Input, Focusable],
+  props,
+  tag: 'textarea'
+}

package/src/atoms/Grid.js

@@ -10,13 +10,17 @@ export const Grid = {
     template: ({ props }) => props.template ? ({ gridTemplate: props.template }) : null,
     templateAreas: ({ props }) => props.templateAreas ? ({ gridTemplateAreas: props.templateAreas }) : null,
 
+    column: ({ props }) => props.column ? ({ gridColumn: props.column }) : null,
     columns: ({ props }) => props.columns ? ({ gridTemplateColumns: props.columns }) : null,
     templateColumns: ({ props }) => props.templateColumns ? ({ gridTemplateColumns: props.templateColumns }) : null,
     autoColumns: ({ props }) => props.autoColumns ? ({ gridAutoColumns: props.autoColumns }) : null,
+    columnStart: ({ props }) => props.columnStart ? ({ gridColumnStart: props.columnStart }) : null,
 
+    row: ({ props }) => props.row ? ({ gridRow: props.row }) : null,
     rows: ({ props }) => props.rows ? ({ gridTemplateRows: props.rows }) : null,
     templateRows: ({ props }) => props.templateRows ? ({ gridTemplateRows: props.templateRows }) : null,
     autoRows: ({ props }) => props.autoRows ? ({ gridAutoRows: props.autoRows }) : null,
+    rowStart: ({ props }) => props.rowStart ? ({ gridRowStart: props.rowStart }) : null,
 
     autoFlow: ({ props }) => props.autoFlow ? ({ gridAutoFlow: props.autoFlow }) : null,
 

package/src/atoms/InteractiveComponent.js

@@ -51,10 +51,6 @@ export const Focusable = {
       opacity: 1,
       outline: 'solid, X, blue .3'
     }
-
-    // ':not(:focus-visible):invalid': {
-    //   outline: 'solid, X, red .3'
-    // }
   },
 
   attr: {

package/src/atoms/Media.js

@@ -146,7 +146,7 @@ export const initUpdate = element => {
       if (key === 'theme') {
         props.update({
           themeModifier: globalTheme
-        }, { preventRecursive: true, ignoreInitUpdate: true })
+        }, { preventRecursive: true, ignoreInitUpdate: true, preventDefineUpdate: '$setStateCollection' })
       } else if (key === 'true') applyTrueProps(props[key], CLASS_NAMES, element)
       if (setter) setter(key, props[key], CLASS_NAMES, element)
     }

package/src/atoms/Text.js

@@ -3,7 +3,10 @@
 import { getFontSizeByKey, getFontFamily } from '@symbo.ls/scratch'
 
 export const Text = {
-  text: ({ props }) => props.text,
+  text: ({ key, props, state }) => {
+    if (props.text === true) return (state && state[key]) || (props && props[key])
+    return props.text
+  },
   class: {
     fontSize: ({ props }) => props.fontSize ? getFontSizeByKey(props.fontSize) : null,
     fontFamily: ({ props }) => props.fontFamily && ({ fontFamily: getFontFamily(props.fontFamily) || props.fontFamily }),

package/src/index.js

@@ -12,6 +12,7 @@ export * from './Icon'
 export * from './Link'
 export * from './IconText'
 export * from './Input'
+export * from './TextArea'
 export * from './Field'
 export * from './Button'