smbls 0.8.12 → 0.8.15

package/package.json

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

package/src/Button/index.js

@@ -5,7 +5,7 @@ import { Shape, Block, IconText, Direction } from '../'
 import style from './style'
 
 export const Button = {
-  proto: [IconText],
+  proto: IconText,
   tag: 'button',
   style,
   props: {

package/src/{Responsive → Media}/index.js

@@ -30,10 +30,10 @@ export const Responsive = {
             }
           }
 
-          const { responsive } = el.class
-          if (responsive) responsive[responsiveKey] = calculatedScreenProps
+          const { MEDIA } = el.class
+          if (MEDIA) MEDIA[responsiveKey] = calculatedScreenProps
           else {
-            el.class.responsive = {
+            el.class.MEDIA = {
               [responsiveKey]: calculatedScreenProps
             }
           }
@@ -58,10 +58,10 @@ export const Responsive = {
             }
           }
 
-          const { selectors } = el.class
-          if (selectors) selectors[selectorKey] = selectorProps
+          const { SELECTORS } = el.class
+          if (SELECTORS) SELECTORS[selectorKey] = selectorProps
           else {
-            el.class.selectors = {
+            el.class.SELECTORS = {
               [selectorKey]: selectorProps
             }
           }

package/src/Shape/index.js

@@ -27,6 +27,7 @@ export const Shape = {
     shapeDirectionColor: ({ props, ...el }) => props.shapeDirection ? { '&:before': { borderColor: el.class.backgroundColor } } : null,
     depth: ({ props }) => depth[props.depth],
     round: ({ props, key, ...el }) => props.round ? (mapSpacing(props.round, 'borderRadius') || ({ borderRadius: props.round })) : null,
+    borderRadius: ({ props, key, ...el }) => props.borderRadius ? (mapSpacing(props.borderRadius, 'borderRadius') || ({ borderRadius: props.borderRadius })) : null,
     theme: ({ props }) => props.theme ? getTheme(props.theme) : null,
     color: ({ props }) => props.color ? ({ color: getColor(props.color) }) : null,
     background: ({ props }) => props.background ? ({ backgroundColor: getColor(props.background) }) : null,

package/src/Slider/index.js

@@ -1,32 +1,35 @@
 'use strict'
 
 import style from './style'
+import { set, opacify } from '@symbo.ls/scratch'
+import { isFunction } from '@domql/utils'
 
 import { SquareButton, Shape } from '..'
-import * as Scratch from '@symbo.ls/scratch'
-import { isFunction } from 'domql/src/utils'
 
-// TODO: fix this
-Scratch.setValue('THEME', {
-  background: 'white 0.2',
+set({
+  theme: {
+    sliderThumb: {
+      background: 'white 0.2',
 
-  '&::-webkit-slider-thumb': {
-    background: '#232526',
-    borderColor: Scratch.opacify('#454646', 0.75)
-  },
+      '&::-webkit-slider-thumb': {
+        background: '#232526',
+        borderColor: opacify('#454646', 0.75)
+      },
 
-  '&:hover': {
-    '&::-webkit-slider-thumb': {
-      borderColor: Scratch.opacify('#fff', 0.35)
-    }
-  },
+      '&:hover': {
+        '&::-webkit-slider-thumb': {
+          borderColor: opacify('#fff', 0.35)
+        }
+      },
 
-  '&:focus, &:active': {
-    '&::-webkit-slider-thumb': {
-      borderColor: '#3C6AC0'
+      '&:focus, &:active': {
+        '&::-webkit-slider-thumb': {
+          borderColor: '#3C6AC0'
+        }
+      }
     }
   }
-}, 'sliderThumb')
+})
 
 export const RangeSlider = {
   style,
@@ -39,50 +42,59 @@ export const RangeSlider = {
   attr: { type: 'range' }
 }
 
-const findOut = (el, s, prop, def) => {
-  const val = el.parent.parent.props[prop]
-  return isFunction(val) ? val(el, s) : val || def
+const listenProp = (el, prop, def) => {
+  const val = el.props && el.props[prop]
+  const r = (isFunction(val) ? val() : val) || (def !== undefined ? def : 50)
+  // if (prop === 'value') console.log(r)
+  return r
 }
 
 export const Slider = {
-  proto: [Shape],
-
-  button0: {
-    proto: [SquareButton],
-    props: {
-      icon: 'minus'
-    },
+  minus: {
+    proto: SquareButton,
+    props: { icon: 'minus' },
     on: {
       click: (ev, el, s) => {
-        el.parent.parent.props.minusClick(ev, el, s)
+        el.props && isFunction(el.props.click) && el.props.click(ev, el, s)
+        const input = el.parent.input
+        const props = input.props
+        const value = isFunction(props.value) ? props.value() : props.value
+        input.node.value = value
       }
     }
   },
   value: {
+    style: { width: '4ch' },
     tag: 'span',
-    // class: { w: { minWidth: `4ch` } },
-    text: (el, s) => `${findOut(el, s, 'value', 50)}${findOut(el, s, 'type') === 'fontSize' ? 'px' : ''}`
+    text: (el, s) => {
+      const value = listenProp(el.parent.input, 'value')
+      const unit = listenProp(el.parent.input, 'unit', '')
+      return '' + value + unit
+    }
   },
-  range: {
+  input: {
     proto: RangeSlider,
     attr: {
-      value: (el, s) => findOut(el, s, 'value', 50),
-      min: (el, s) => findOut(el, s, 'min', 0),
-      max: (el, s) => findOut(el, s, 'max', 100),
-      step: (el, s) => findOut(el, s, 'step', 1)
+      value: (el, s) => listenProp(el, 'value', 50),
+      min: (el, s) => listenProp(el, 'min', 0),
+      max: (el, s) => listenProp(el, 'max', 100),
+      step: (el, s) => listenProp(el, 'step', 1)
     },
     on: {
-      input: (ev, el, s) => el.parent.parent.props.input(ev, el, s)
+      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)
     }
   },
-  button1: {
-    proto: [SquareButton],
-    props: {
-      icon: 'plus'
-    },
+  plus: {
+    proto: SquareButton,
+    props: { icon: 'plus' },
     on: {
       click: (ev, el, s) => {
-        el.parent.parent.props.plusClick(ev, el, s)
+        el.props && isFunction(el.props.click) && el.props.click(ev, el, s)
+        const input = el.parent.input
+        const props = input.props
+        const value = isFunction(props.value) ? props.value() : props.value
+        input.node.value = value
       }
     }
   }

package/src/index.js

@@ -14,7 +14,7 @@ export * from './Position'
 export * from './Overflow'
 export * from './Transform'
 export * from './Transition'
-export * from './Responsive'
+export * from './Media'
 
 export * from './Box'