smbls 0.15.0 → 0.15.2

package/package.json

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

package/src/Icon.js

@@ -3,13 +3,13 @@
 import { SVG } from './atoms'
 
 import { ICONS } from '@symbo.ls/scratch'
-import { camelize } from '@symbo.ls/utils'
+import { toCamelCase } from '@symbo.ls/utils'
 
 export const Icon = {
   extend: SVG,
   props: ({ key, props, parent }) => {
     const iconName = props.inheritedString || props.name || props.icon || key
-    const camelCase = camelize(iconName)
+    const camelCase = toCamelCase(iconName)
     const isArray = camelCase.split(/([a-z])([A-Z])/g)
 
     const iconFromLibrary = ICONS[camelCase] || (ICONS[isArray[0] + isArray[1]]) || ICONS[isArray[0]] || ICONS['noIcon']

package/src/Range/index.js

@@ -69,7 +69,7 @@ export const RangeWithButtons = {
     props: { theme: 'tertiary', icon: 'minus' },
     on: {
       click: (ev, el, s) => {
-        el.props && isFunction(el.props.click) && el.props.click(ev, el, s)
+        el.props && isFunction(el.props.onClick) && el.props.onClick(ev, el, s)
         const input = el.parent.input
         const props = input.props
         const value = isFunction(props.value) ? props.value() : props.value
@@ -95,8 +95,8 @@ export const RangeWithButtons = {
       step: (el, s) => listenProp(el, 'step', 1)
     },
     on: {
-      input: (ev, el, s) => el.props && isFunction(el.props.input) && el.props.input(ev, el, s),
-      change: (ev, el, s) => el.props && isFunction(el.props.change) && el.props.change(ev, el, s)
+      input: (ev, el, s) => el.props && isFunction(el.props.onInput) && el.props.onInput(ev, el, s),
+      change: (ev, el, s) => el.props && isFunction(el.props.onChange) && el.props.onChange(ev, el, s)
     }
   },
   plus: {
@@ -104,7 +104,7 @@ export const RangeWithButtons = {
     props: { theme: 'tertiary', icon: 'plus' },
     on: {
       click: (ev, el, s) => {
-        el.props && isFunction(el.props.click) && el.props.click(ev, el, s)
+        el.props && isFunction(el.props.onClick) && el.props.onClick(ev, el, s)
         const input = el.parent.input
         const props = input.props
         const value = isFunction(props.value) ? props.value() : props.value

package/src/atoms/Shape/style.js

@@ -14,22 +14,22 @@ export const depth = {
 const getComputedBackgroundColor = el => {
   const { props, node } = el
   const propsColor = getColor(props.borderColor) || getColor(props.backgroundColor) || getColor(props.background)
-  const propsTheme = getTheme(props.theme)
+  // const propsTheme = getTheme(props.theme)
 
   if (!propsColor) {
     const computedStyle = window.getComputedStyle(node)
-    if (props.shapeDirection) {
-      console.group(el.parent.parent.parent.key + ' - ' + el.parent.key)
-      console.log(propsTheme)
-      console.log(getColor(props.borderColor))
-      console.log(getColor(props.backgroundColor))
-      console.log(getColor(props.background))
-      console.log(computedStyle.getPropertyValue('border-color'))
-      console.log(computedStyle.getPropertyValue('background'))
-      console.log(computedStyle.getPropertyValue('background-color'))
-      console.log(el)
-      console.groupEnd(el.parent.parent.parent.key + ' - ' + el.parent.key)
-    }
+    // if (props.shapeDirection) {
+    //   console.group(el.parent.parent.parent.key + ' - ' + el.parent.key)
+    //   console.log(propsTheme)
+    //   console.log(getColor(props.borderColor))
+    //   console.log(getColor(props.backgroundColor))
+    //   console.log(getColor(props.background))
+    //   console.log(computedStyle.getPropertyValue('border-color'))
+    //   console.log(computedStyle.getPropertyValue('background'))
+    //   console.log(computedStyle.getPropertyValue('background-color'))
+    //   console.log(el)
+    //   console.groupEnd(el.parent.parent.parent.key + ' - ' + el.parent.key)
+    // }
     return computedStyle.getPropertyValue('border-color') ||
       computedStyle.getPropertyValue('background') ||
       computedStyle.getPropertyValue('background-color')