@symbo.ls/input 2.11.480 → 2.11.488

package/Checkbox.js

@@ -12,36 +12,30 @@ export const Checkbox = {
   },
 
   Input: {
-    props: {
-      type: 'checkbox',
-      display: 'none',
-      ':checked + div': { theme: 'primary' },
-      ':checked + div > svg': {
-        transform: 'none',
-        opacity: '1'
-      }
+    type: 'checkbox',
+    display: 'none',
+    ':checked + div': { theme: 'primary' },
+    ':checked + div > svg': {
+      transform: 'none',
+      opacity: '1'
     },
     attr: {
-      checked: ({ parent }) => parent.props.checked
+      checked: (el) => el.call('exec', el.parent.props.checked)
     }
   },
 
   Flex: {
-    props: {
-      align: 'center center',
-      fontSize: 'B1',
-      padding: 'V',
-      theme: 'field',
-      round: 'X2',
-      transition: 'background A defaultBezier'
-    },
+    align: 'center center',
+    fontSize: 'B1',
+    padding: 'V',
+    theme: 'field',
+    round: 'X2',
+    transition: 'background A defaultBezier',
     Icon: {
-      props: {
-        icon: 'check',
-        opacity: '0',
-        transform: 'scale(0.9) rotate(-15deg)',
-        transition: 'opacity B defaultBezier'
-      }
+      icon: 'check',
+      opacity: '0',
+      transform: 'scale(0.9) rotate(-15deg)',
+      transition: 'opacity B defaultBezier'
     }
   }
 }

package/Input.js

@@ -1,14 +1,10 @@
 'use strict'
 
-import { isString, replaceLiteralsWithObjectFields } from '@domql/utils'
-
 export const Input = {
   extend: ['Focusable'],
 
   tag: 'input',
 
-  deps: { isString, replaceLiteralsWithObjectFields },
-
   props: {
     border: 'none',
     type: 'input',
@@ -27,11 +23,9 @@ export const Input = {
     autocomplete: ({ props }) => props.autocomplete,
     placeholder: ({ props }) => props.placeholder,
     value: (el, s) => {
-      const { props, state, deps } = el
-      const { isString, exec, replaceLiteralsWithObjectFields } = deps
-      const val = exec(props.value, el)
-      if (isString(val) && val.includes('{{')) {
-        return replaceLiteralsWithObjectFields(val, state)
+      const val = el.call('exec', el.props.value, el)
+      if (el.call('isString', val) && val.includes('{{')) {
+        return el.call('replaceLiteralsWithObjectFields', val, s)
       }
       return val
     },

package/NumberInput.js

@@ -1,9 +1,7 @@
 'use strict'
 
-import { Input } from './Input'
-
 export const NumberInput = {
-  extend: ['Flex', Input],
+  extend: ['Flex', 'Input'],
 
   props: {
     type: 'number',

package/Radio.js

@@ -1,9 +1,7 @@
 'use strict'
 
-import { Checkbox, CheckboxHgroup } from './Checkbox'
-
 export const Radio = {
-  extend: Checkbox,
+  extend: 'Checkbox',
 
   Input: {
     type: 'radio',
@@ -11,26 +9,23 @@ export const Radio = {
   },
 
   Flex: {
-    extend: 'Pseudo',
-    props: {
+    round: '100%',
+    padding: 'Y',
+    ':after': {
+      content: '""',
+      display: 'block',
+      boxSize: 'X+W1',
       round: '100%',
-      padding: 'Y',
-      ':after': {
-        content: '""',
-        display: 'block',
-        boxSize: 'X+W1',
-        round: '100%',
-        background: 'white',
-        opacity: '0',
-        transition: 'opacity .15s ease-in-out'
-      }
+      background: 'white',
+      opacity: '0',
+      transition: 'opacity .15s ease-in-out'
     },
     Icon: null
   }
 }
 
 export const RadioHgroup = {
-  extend: CheckboxHgroup,
+  extend: 'CheckboxHgroup',
   Checkbox: null,
   Radio: {}
 }

package/Textarea.js

@@ -1,11 +1,8 @@
 'use strict'
 
-import { Flex } from '@symbo.ls/atoms'
-import { Input } from './Input'
-
 export const Textarea = {
   tag: 'textarea',
-  extend: [Input, Flex],
+  extend: ['Input', 'Flex'],
 
   props: {
     variant: 'outlined',
@@ -57,9 +54,7 @@ export const TextareaWithButton = {
     minHeight: 'fit-content'
   },
   SquareButton: {
-    props: {
-      background: 'blue',
-      Icon: { name: 'send' }
-    }
+    background: 'blue',
+    Icon: { name: 'send' }
   }
 }

package/Toggle.js

@@ -1,42 +1,36 @@
 'use strict'
 
-import { Checkbox, CheckboxHgroup } from './Checkbox'
-
 export const Toggle = {
-  extend: Checkbox,
+  extend: 'Checkbox',
 
   Input: {
-    props: {
-      ':checked + div': {
-        background: 'green2 +8',
-        justifyContent: 'flex-end'
-      }
+    ':checked + div': {
+      background: 'green2 +8',
+      justifyContent: 'flex-end'
     }
   },
 
   Flex: {
-    props: {
-      boxSize: 'A1 B1',
-      padding: '- W_default',
-      round: 'D',
-      align: 'center flex-start',
-      theme: 'field',
-      border: 'none',
-      transition: 'opacity .15s ease',
-      ':after': {
-        content: '""',
-        boxSize: 'A A',
-        round: '100%',
-        background: 'white',
-        boxShadow: '1px, 1px, Z, gray .2'
-      }
+    boxSize: 'A1 B1',
+    padding: '- W_default',
+    round: 'D',
+    align: 'center flex-start',
+    theme: 'field',
+    border: 'none',
+    transition: 'opacity .15s ease',
+    ':after': {
+      content: '""',
+      boxSize: 'A A',
+      round: '100%',
+      background: 'white',
+      boxShadow: '1px, 1px, Z, gray .2'
     },
     Icon: null
   }
 }
 
 export const ToggleHgroup = {
-  extend: CheckboxHgroup,
+  extend: 'CheckboxHgroup',
   Checkbox: null,
   Toggle: {}
 }

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@symbo.ls/input",
-  "version": "2.11.480",
+  "version": "2.11.488",
   "main": "index.js",
   "source": "index.js",
   "license": "MIT",
-  "gitHead": "14db2b8d241d45fa80f588a2e0a6c50f5dbd8bee",
+  "gitHead": "d84f52f7f995d7c2d04002baa9dc263a67cca0d5",
   "dependencies": {
     "@domql/utils": "^2.5.0",
     "@symbo.ls/atoms": "^2.11.480"