smbls 0.13.7 → 0.14.0

package/package.json

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

package/src/Block.js

@@ -1,34 +1,6 @@
 'use strict'
 
-import { SPACING, getSpacingByKey } from '@symbo.ls/scratch'
-
-export const getSpacingBasedOnRatio = (props, propertyName, unit) => {
-  const { spacingRatio } = props
-
-  // if (spacingRatio) console.log(propertyName, props)
-
-  const val = props[propertyName]
-  // TODO: move this to getSpacingByKey
-  if (spacingRatio) {
-    let params = SPACING[spacingRatio]
-
-    if (!params) {
-      params = SPACING[spacingRatio] = {
-        base: props.base || SPACING.base,
-        type: SPACING.type + '-' + spacingRatio,
-        ratio: spacingRatio,
-        range: SPACING.range,
-        subSequence: SPACING.subSequence,
-        sequence: {},
-        scales: {},
-        vars: {}
-      }
-    }
-
-    return getSpacingByKey(val, propertyName, params, unit, false)
-  }
-  return getSpacingByKey(val, propertyName, null, unit)
-}
+import { getSpacingBasedOnRatio, getSpacingByKey } from '@symbo.ls/scratch'
 
 export const Block = {
   class: {

package/src/DatePicker/index.js

@@ -2,111 +2,153 @@
 
 import style from './style'
 
-import { Icon } from '../Icon'
+import { SquareButton, Flex, Button, Grid } from '../'
 
-export const DatePicker = {
-  style,
+const buttonProps = {
+  theme: 'transparent',
+  color: '--theme-quinary-dark-color',
+  ':hover': {
+    theme: 'quinary .child'
+  }
+}
 
+const aside = {
   props: {
-    theme: 'lightDark',
-    padding: 'A',
-    round: 'Z',
-    depth: 16
+    gap: 'X2',
+    margin: '-Z - -Z -X2',
+    padding: 'Z - Z X2',
+    minHeight: '100%',
+    height: '100%',
+    width: '--spacing-D'
   },
 
-  aside: {
-    childExtend: { tag: 'button' },
-    ...[
-      { text: '2020' },
-      { text: '2021' },
-      { text: '2022' },
-      { text: '2023' },
-      { text: '2024' },
-      { text: '2025' },
-      { text: '2026' },
-      { text: '2026' },
-      { text: '2026' }
-    ]
-  },
+  cnt: {
+    extend: Flex,
+    props: {
+      flow: 'column',
+      overflow: 'hidden auto',
+      boxSize: '100% --spacing-D',
+      top: '0',
+      position: 'absolute',
+      maxHeight: '100%',
+      justifyContent: 'flex-end'
+    },
 
-  main: {
-    header: {
-      icon: {
-        extend: Icon,
-        props: { icon: 'arrowMediumLeft' }
-      },
-      month: {
-        childExtend: { tag: 'span' },
-        ...[
-          { text: 'january' },
-          { text: 'february' },
-          { text: 'march' },
-          { text: 'april' },
-          { text: 'may' },
-          { text: 'june' },
-          { text: 'july' },
-          { text: 'august' },
-          { text: 'september' },
-          { text: 'october' },
-          { text: 'november' },
-          { text: 'december' }
-        ]
+    childExtend: {
+      extend: Button,
+      props: {
+        ...buttonProps,
+        fontSize: 'Z1'
       },
-      icon2: {
-        extend: Icon,
-        props: { icon: 'arrowMediumRight' }
+      text: ({ state }) => state.value
+    },
+    $setCollection: () => {
+      return new Array(30).fill(undefined).map((_, i) => (2022 - i)).reverse()
+    }
+  }
+
+}
+
+const main = {
+  extend: Flex,
+
+  props: {
+    flex: 1,
+    gap: 'X2',
+    flow: 'column',
+
+    header: {
+      align: 'center space-between'
+    }
+  },
+
+  header: {
+    extend: Flex,
+    left: {
+      extend: SquareButton,
+      props: {
+        ...buttonProps,
+        round: 'C',
+        icon: 'arrowAngleLeft'
       }
     },
-    days: {
-      tag: 'section',
-      header: {
-        childExtend: { tag: 'span' },
-        ...[
-          { text: 'Mo' },
-          { text: 'Tu' },
-          { text: 'We' },
-          { text: 'Th' },
-          { text: 'Fr' },
-          { text: 'Sa' },
-          { text: 'Su' }
-        ]
-      },
-      content: {
-        childExtend: { tag: 'button' },
-        ...[
-          { text: '1' },
-          { text: '2' },
-          { text: '3' },
-          { text: '4' },
-          { text: '5' },
-          { text: '6' },
-          { text: '7' },
-          { text: '8' },
-          { text: '9' },
-          { text: '10' },
-          { text: '11' },
-          { text: '12' },
-          { text: '13' },
-          { text: '14' },
-          { text: '15' },
-          { text: '16' },
-          { text: '17' },
-          { text: '18' },
-          { text: '19' },
-          { text: '20' },
-          { text: '21' },
-          { text: '22' },
-          { text: '23' },
-          { text: '24' },
-          { text: '25' },
-          { text: '26' },
-          { text: '27' },
-          { text: '28' },
-          { text: '29' },
-          { text: '30' },
-          { text: '31' }
-        ]
+    month: {
+      tag: 'span',
+      text: 'December'
+    },
+    right: {
+      extend: SquareButton,
+      props: {
+        ...buttonProps,
+        round: 'C',
+        icon: 'arrowAngleRight'
       }
     }
+  },
+  days: {
+    extend: Flex,
+    props: {
+      flow: 'column',
+      gap: 'X2'
+    },
+    childExtend: {
+      extend: Grid,
+      props: {
+        columns: 'repeat(7, 1fr)',
+        gap: 'X2'
+      }
+    },
+    weekDays: {
+      childExtend: {
+        extend: Button,
+        props: {
+          ...buttonProps,
+          fontSize: 'Z1',
+          padding: 'X2'
+        }
+      },
+      ...[
+        { text: 'Mo' },
+        { text: 'Tu' },
+        { text: 'We' },
+        { text: 'Th' },
+        { text: 'Fr' },
+        { text: 'Sa' },
+        { text: 'Su' }
+      ]
+    },
+
+    cnt: {
+      childExtend: {
+        extend: SquareButton,
+        props: {
+          ...buttonProps,
+          theme: 'quinary'
+        }
+      },
+
+      // Generate days
+      ...new Array(31).fill(undefined).map((_, i) => ({ text: i + 1 }))
+    }
   }
 }
+
+export const DatePicker = {
+  style,
+  extend: Flex,
+
+  props: {
+    position: 'relative',
+    theme: 'quinary',
+    transition: 'A all',
+    round: 'Z',
+    padding: 'Z Z2 Z X2',
+    gap: 'X2',
+    depth: 16,
+    minHeight: '0',
+    align: 'stretch center'
+  },
+
+  aside,
+  main
+}

package/src/DatePicker/style.js

@@ -1,95 +1,13 @@
 'use strict'
 
 export default {
-  maxWidth: `${336 / 16}em`,
-  maxHeight: `${260 / 16}em`,
-  display: 'flex',
-  padding: '0 1em',
-  boxSizing: 'border-box',
-  borderRadius: '10px',
-  button: {
-    border: 'none',
-    outline: 'none',
-    background: 'transparent',
-    cursor: 'pointer'
-  },
-
-  aside: {
-    display: 'flex',
-    flexDirection: 'column',
-    overflowX: 'auto',
-    paddingRight: `${10 / 16}em`,
-
-    button: {
-      opacity: 0.5,
-      marginBottom: `${22 / 12}em`
-    }
-  },
-
   main: {
-    flex: 1,
-    paddingTop: `${14 / 16}em`,
-    paddingBottom: `${10 / 16}em`,
-    overflow: 'hidden',
-
-    display: 'flex',
-    flexDirection: 'column',
-
-    '> header': {
-      display: 'flex',
-      alignItems: 'center',
-      height: 'auto',
-      overflow: 'hidden',
-      width: '100%',
-      padding: `0 ${8 / 16}em ${14 / 16}em ${8 / 16}em`,
-      boxSizing: 'border-box'
-    },
-    '> header > svg': {
-      cursor: 'pointer'
-    },
-
-    '> header > div': {
-      display: 'flex',
-      overflow: 'hidden',
-      flex: 1
-    },
-    '> header span': {
-      minWidth: '100%',
-      textTransform: 'capitalize',
-      textAlign: 'center',
-      fontWeight: 'bold'
-    },
-
-    section: {
-      flex: 1,
-      display: 'flex',
-      flexDirection: 'column'
-    },
-    'section > header': {
-      height: 'auto',
-      display: 'grid',
-      gridTemplateColumns: 'repeat(7, 1fr)',
-      gap: '6px',
-      paddingBottom: `${2 / 16}em`
-    },
-    'section > header span': {
-      textAlign: 'center',
-      fontWeight: 'bold'
-    },
     'section > header span:nth-child(6)': {
       opacity: 0.5
     },
     'section > header span:nth-child(7)': {
       opacity: 0.5
     },
-    'section > div': {
-      flex: 1,
-      display: 'grid',
-      gridTemplateColumns: 'repeat(7, 1fr)',
-      gap: '6px'
-    },
-    'section > div button': {
-    },
     'section > div button:nth-child(7n)': {
       opacity: 0.5
     },

package/src/Grid.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { getSpacingBasedOnRatio } from './Block'
+import { getSpacingBasedOnRatio } from '@symbo.ls/scratch'
 
 export const Grid = {
   props: { display: 'grid' },

package/src/Input.js

@@ -5,12 +5,10 @@ export const Input = {
 
   props: {
     type: 'input',
-    // value: s[el.key],
-    // placeholder: '',
     fontSize: 'A',
     round: 'C',
-    padding: 'Z B',
-    theme: 'transparent'
+    lineHeight: 1,
+    padding: 'Z A'
   },
 
   attr: {

package/src/Media.js

@@ -106,6 +106,18 @@ const beforeClassAssign = (element, s) => {
 export const initUpdate = element => {
   const { props, class: className } = element
   const rootState = element.__root ? element.__root.state : element.state
+
+  const parentProps = element.parent.props
+  if (parentProps?.spacingRatio && parentProps?.inheritSpacingRatio) {
+    element.setProps({
+      spacingRatio: parentProps.spacingRatio,
+      inheritSpacingRatio: true
+    }, {
+      preventRecursive: true,
+      ignoreInitUpdate: true
+    })
+  }
+
   const { globalTheme } = rootState
 
   if (!globalTheme) return
@@ -125,7 +137,9 @@ export const initUpdate = element => {
     if (setter) setter(key, props[key], CLASS_NAMES, element)
   }
 
-  if (Object.keys(CLASS_NAMES.media).length) className.media = CLASS_NAMES.media
+  if (Object.keys(CLASS_NAMES.media).length) {
+    className.media = CLASS_NAMES.media
+  }
   className.selector = CLASS_NAMES.selector
   className.case = CLASS_NAMES.case
 }

package/src/Shape/index.js

@@ -2,12 +2,12 @@
 
 import { exec, isString } from '@domql/utils'
 import { SHAPES } from './style'
-import { getSpacingByKey } from '@symbo.ls/scratch'
+import { getSpacingBasedOnRatio } from '@symbo.ls/scratch'
 
-const transformBorderRadius = (radius, props) => {
+const transformBorderRadius = (radius, props, propertyName) => {
   if (!isString(radius)) return
   return {
-    borderRadius: radius.split(' ').map((v, k) => getSpacingByKey(v, 'radius').radius).join(' ')
+    borderRadius: radius.split(' ').map((v, k) => getSpacingBasedOnRatio(props, propertyName, v)[propertyName]).join(' ')
   }
 }
 
@@ -26,8 +26,8 @@ export const Shape = {
     },
     shapeDirectionColor: ({ props, ...el }) => props.shapeDirection ? { '&:before': { borderColor: el.class.backgroundColor } } : null,
 
-    round: ({ props, key, ...el }) => transformBorderRadius(props.round || props.borderRadius, props),
-    borderRadius: ({ props, key, ...el }) => transformBorderRadius(props.borderRadius || props.round, props)
+    round: ({ props, key, ...el }) => transformBorderRadius(props.round || props.borderRadius, props, 'round'),
+    borderRadius: ({ props, key, ...el }) => transformBorderRadius(props.borderRadius || props.round, props, 'borderRadius')
   }
 }
 

package/src/Theme.js

@@ -37,6 +37,16 @@ const transformShadow = shadow => ({
   }).join(' ')
 })
 
+const transformBackgroundImage = (backgroundImage, ctx) => ({
+  backgroundImage: backgroundImage.split(', ').map(v => {
+    if (v.includes('url') || v.includes('gradient')) return v
+    else if (ctx.SYSTEM.GRADIENT[backgroundImage]) {
+      return getMediaColor(backgroundImage, 'backgroundImage')
+    }
+    return `url(${v})`
+  }).join(' ')
+})
+
 export const Theme = {
   class: {
     depth: ({ props }) => depth[props.depth],
@@ -49,8 +59,9 @@ export const Theme = {
     color: ({ props }) => (props.color) && getMediaColor(props.color, 'color'),
     background: ({ props }) => (props.background) && getMediaColor(props.background, 'background'),
     backgroundColor: ({ props }) => (props.backgroundColor) && getMediaColor(props.backgroundColor, 'backgroundColor'),
-    backgroundImage: ({ props }) => (props.backgroundImage) && getMediaColor(props.backgroundImage, 'backgroundImage'),
+    backgroundImage: ({ props, context }) => (props.backgroundImage) && transformBackgroundImage(props.backgroundImage, context),
     backgroundSize: ({ props }) => props.backgroundSize ? ({ backgroundSize: props.backgroundSize }) : null,
+    backgroundPosition: ({ props }) => props.backgroundPosition ? ({ backgroundPosition: props.backgroundPosition }) : null,
 
     textStroke: ({ props }) => props.textStroke ? transformTextStroke(props.textStroke) : null,