smbls 0.8.13 → 0.8.16

package/package.json

@@ -3,7 +3,7 @@
   "description": "UI Library built on Scratch and DOMQL",
   "private": false,
   "author": "symbo.ls",
-  "version": "0.8.13",
+  "version": "0.8.16",
   "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

@@ -1,9 +1,9 @@
 'use strict'
 
-import { isArray, isObject } from '@domql/utils'
+import { isArray, isObject, exec } from '@domql/utils'
 import { mapSpacing, getTheme, getColor } from '@symbo.ls/scratch'
 
-import style, { shape, depth } from './style'
+import style, { SHAPES, depth } from './style'
 
 const isBorderStyle = str =>
   ['none','hidden','dotted','dashed','solid','double','groove','ridge','inset','outset','initial'].some(v => str.includes(v))
@@ -22,8 +22,17 @@ const diffBorder = (border, key = 'border') => {
 export const Shape = {
   class: {
     default: style,
-    shape: ({ props }) => props.shape ? shape[props.shape] : null,
-    shapeDirection: ({ props }) => props.shape ? shape[props.shape][props.shapeDirection || 'top'] : null,
+    shape: (element) => {
+      const { props } = element
+      const { shape } = props
+      return shape ? exec(SHAPES[shape], element) : null
+    },
+    shapeDirection: ({ props }) => {
+      const { shape, shapeDirection } = props
+      if (!shape || !shapeDirection) return
+      const shapeDir = SHAPES[shape + 'Direction']
+      return shape ? shapeDir[shapeDirection || 'top'] : null
+    },
     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,

package/src/Shape/style.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { UNIT } from '@symbo.ls/scratch'
+import { UNIT, getColor } from '@symbo.ls/scratch'
 
 export default {
   boxSizing: 'border-box'
@@ -15,21 +15,25 @@ export const depth = {
   42: { boxShadow: `rgba(0,0,0,.10) 0 20${UNIT.default} 42${UNIT.default}` }
 }
 
-export const shape = {
+export const SHAPES = {
   rectangle: {},
   circle: { borderRadius: '100%' },
   bubble: {},
-  tooltip: {
+
+  tooltip: ({ props }) => ({
     position: 'relative',
     '&:before': {
       content: '""',
       display: 'block',
       width: '0px',
       height: '0px',
-      border: '6px solid #343434',
+      border: `6px solid ${getColor(props.background)}`,
       position: 'absolute',
       borderRadius: '2px'
-    },
+    }
+  }),
+
+  tooltipDirection: {
     top: {
       '&:before': {
         top: '2px',
@@ -59,17 +63,21 @@ export const shape = {
       }
     }
   },
-  tag: {
+
+  tag: ({ props }) => ({
     position: 'relative',
     '&:before': {
       content: '""',
       display: 'block',
       width: '0',
       height: '0',
-      border: '16px solid #343434',
+      border: `16px solid ${getColor(props.background)}`,
       borderRadius: '6px',
       position: 'absolute'
     },
+  }),
+
+  tagDirection: {
     top: {
       '&:before': {
         bottom: '100%',

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'