smbls 0.13.5 → 0.13.7

package/package.json

@@ -3,7 +3,7 @@
   "description": "UI Library built on Scratch and DOMQL",
   "private": false,
   "author": "symbo.ls",
-  "version": "0.13.5",
+  "version": "0.13.7",
   "repository": "https://github.com/symbo-ls/smbls",
   "main": "src/index.js",
   "files": [
@@ -23,7 +23,8 @@
   "dependencies": {
     "@domql/utils": "latest",
     "@symbo.ls/init": "latest",
-    "@symbo.ls/scratch": "latest"
+    "@symbo.ls/scratch": "latest",
+    "@symbo.ls/utils": "latest"
   },
   "devDependencies": {
     "@babel/core": "^7.11.5",

package/src/Box.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { Shape, Position, Theme, Block, Text, Overflow, Transition, Transform, Responsive, Interaction } from '.'
+import { Shape, Position, Theme, Block, Text, Overflow, Transition, Transform, Responsive, Interaction, XYZ } from '.'
 
 const PropsCSS = {
   class: {
@@ -9,5 +9,5 @@ const PropsCSS = {
 }
 
 export const Box = {
-  extend: [Shape, Position, Theme, Block, Text, Overflow, Transition, Transform, Responsive, PropsCSS, Interaction]
+  extend: [Shape, Position, Theme, Block, Text, Overflow, Transition, Transform, Responsive, PropsCSS, Interaction, XYZ]
 }

package/src/Icon.js

@@ -3,12 +3,7 @@
 import { SVG } from '.'
 
 import { ICONS } from '@symbo.ls/scratch'
-
-function camelize (str) {
-  return str.replace(/(?:^\w|[A-Z]|\b\w)/g, function (word, index) {
-    return index === 0 ? word.toLowerCase() : word.toUpperCase()
-  }).replace(/\s+/g, '')
-}
+import { camelize } from '@symbo.ls/utils'
 
 export const Icon = {
   extend: SVG,

package/src/Input.js

@@ -7,8 +7,9 @@ export const Input = {
     type: 'input',
     // value: s[el.key],
     // placeholder: '',
+    fontSize: 'A',
     round: 'C',
-    padding: 'A B',
+    padding: 'Z B',
     theme: 'transparent'
   },
 

package/src/Interaction.js

@@ -2,6 +2,7 @@
 
 export const Interaction = {
   class: {
-    cursor: ({ props }) => ({ cursor: props.cursor })
+    pointerEvents: ({ props }) => props.pointerEvents && ({ pointerEvents: props.pointerEvents }),
+    cursor: ({ props }) => props.cursor && ({ cursor: props.cursor })
   }
 }

package/src/Media.js

@@ -119,7 +119,7 @@ export const initUpdate = element => {
   for (const key in props) {
     const setter = keySetters[key.slice(0, 1)]
     if (key === 'theme') {
-      props.update({ themeModifier: globalTheme }, { preventRecursive: true, ignoreInitUpdate: true })
+      props.update({ themeModifier: `@${globalTheme}` }, { preventRecursive: true, ignoreInitUpdate: true })
     } else if (key === 'true') applyTrueProps(props[key], CLASS_NAMES, element)
 
     if (setter) setter(key, props[key], CLASS_NAMES, element)

package/src/XYZ.js

@@ -0,0 +1,7 @@
+'use strict'
+
+export const XYZ = {
+  class: {
+    zIndex: ({ props }) => props.zIndex && ({ zIndex: props.zIndex })
+  }
+}

package/src/index.js

@@ -20,6 +20,7 @@ export * from './Transform'
 export * from './Transition'
 export * from './Media'
 export * from './Interaction'
+export * from './XYZ'
 
 export * from './Box'