@symbo.ls/uikit 3.7.3 → 3.7.4

package/Input/Toggle.js

@@ -0,0 +1,36 @@
+'use strict'
+
+export const Toggle = {
+  extends: 'Checkbox',
+
+  Input: {
+    ':checked + div': {
+      background: 'green2+8',
+      justifyContent: 'flex-end'
+    }
+  },
+
+  Flex: {
+    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: 'gray.2 1px 1px Z'
+    },
+    Icon: null
+  }
+}
+
+export const ToggleHgroup = {
+  extends: 'CheckboxHgroup',
+  Checkbox: null,
+  Toggle: {}
+}

package/Link.js

@@ -0,0 +1,97 @@
+'use strict'
+
+import { router as defaultRouter } from '@domql/router'
+import { resolvePropValue } from 'attrs-in-props'
+
+export const Link = {
+  extends: 'Focusable',
+  tag: 'a',
+
+  aria: {},
+  fontWeight: 'bold',
+  textDecoration: 'none',
+  color: 'currentColor',
+  draggable: false,
+
+  attr: {
+    href: (el) => {
+      const props = el.props
+      return resolvePropValue(el, props.href) ||
+        resolvePropValue(el, el.call('exec', props, el).href)
+    },
+    'aria-label': ({ props }) => (props.aria ? props.aria.label : props.text)
+  }
+}
+
+export const A = {
+  extends: 'Link'
+}
+
+export const RouterLink = {
+  onClick: (event, el, s) => {
+    const { props, context: ctx } = el
+    const { href: h, scrollToTop, stopPropagation } = props
+    let href = el.call('exec', h, el)
+
+    if (el.call('isString', href) && href.includes('{{')) {
+      href = el.call('replaceLiteralsWithObjectFields', href)
+    }
+
+    if (stopPropagation) event.stopPropagation()
+    if (!href) return
+    const { utils, snippets, functions, routerOptions } = ctx
+    const root = el.__ref.root
+    const linkIsExternal =
+      href.startsWith('http://') ||
+      href.startsWith('https://') ||
+      href.startsWith('mailto:') ||
+      href.startsWith('tel:') ||
+      href.startsWith('sketch:') ||
+      href.startsWith('whatsapp:') ||
+      href.startsWith('sms:') ||
+      href.startsWith('skype:') ||
+      href.startsWith('viber:') ||
+      href.startsWith('callto:') ||
+      href.startsWith('facetime:') ||
+      href.startsWith('facetime-audio:') ||
+      href.startsWith('geo:') ||
+      href.startsWith('maps:')
+    if (href && !linkIsExternal) {
+      event.preventDefault()
+      try {
+        let targetEl = root
+        if (routerOptions && routerOptions.customRouterElement) {
+          const parts = Array.isArray(routerOptions.customRouterElement)
+            ? routerOptions.customRouterElement
+            : routerOptions.customRouterElement.split('.')
+          let resolved = root
+          for (const part of parts) {
+            if (!resolved || !resolved[part]) { resolved = null; break }
+            resolved = resolved[part]
+          }
+          if (resolved) {
+            targetEl = resolved
+            if (root.routes) targetEl.routes = root.routes
+          }
+        }
+        ;(functions.router || snippets.router || utils.router || defaultRouter)(
+          href,
+          targetEl,
+          {},
+          {
+            scrollToOptions: { behaviour: 'instant' },
+            scrollToTop: el.call('isDefined', scrollToTop) ? scrollToTop : true,
+            ...routerOptions,
+            ...props.routerOptions
+          }
+        )
+      } catch (e) {
+        console.warn(e)
+      }
+    }
+  }
+}
+
+export const RouteLink = {
+  extends: [Link, RouterLink]
+}

package/Notification.js

@@ -0,0 +1,43 @@
+'use strict'
+
+export const Notification = {
+  display: 'flex',
+  theme: 'alert',
+  padding: 'Z1 B Z A',
+  round: 'A A A Y2',
+  gap: 'X2',
+  cursor: 'pointer',
+  align: 'flex-start center',
+
+  IconText: {
+    Icon: {
+      name: 'info outline'
+    },
+    Text: {
+      ':empty': { hide: true }
+    }
+  },
+
+  Hgroup: {
+    extends: ['Flex', 'Hgroup'],
+    flow: 'y',
+    align: 'flex-start',
+    gap: 'X2',
+
+    H: {
+      tag: 'h6',
+      margin: '0',
+      fontWeight: '600',
+      lineHeight: '1em',
+      text: 'Notification',
+      ':empty': { hide: true }
+    },
+
+    P: {
+      fontSize: 'Z',
+      margin: '0',
+      text: 'is not always a distraction',
+      ':empty': { hide: true }
+    }
+  }
+}

package/Range.js

@@ -0,0 +1,108 @@
+'use strict'
+
+import { opacify } from '@symbo.ls/scratch'
+
+export const Range = {
+  tag: 'input',
+
+  appearance: 'none',
+  width: '100%',
+  height: '2px',
+  outline: 'none',
+  flex: 1,
+
+  onInput: (ev, el, s) => {
+    const props = el.props
+    if (el.call('isFunction', props.onInput)) {
+      props.onInput(ev, el, s)
+    } else {
+      s.update({ value: parseFloat(el.node.value) })
+    }
+  },
+  onChange: (ev, el, s) => {
+    const props = el.props
+    if (el.call('isFunction', props.onChange)) {
+      props.onChange(ev, el, s)
+    } else {
+      s.update({ value: parseFloat(el.node.value) })
+    }
+  },
+
+  '::-webkit-slider-thumb': {
+    boxSizing: 'content-box',
+    width: '8px',
+    height: '8px',
+    borderWidth: '2px',
+    borderStyle: 'solid',
+    borderRadius: '100%',
+    opacity: '.8',
+    appearance: 'none'
+  },
+
+  '::-webkit-slider-runnable-track': {},
+
+  '@dark': {
+    background: 'white.2',
+
+    '::-webkit-slider-thumb': {
+      background: '#232526',
+      borderColor: opacify('#454646', 0.75)
+    },
+
+    ':hover': {
+      '::-webkit-slider-thumb': {
+        borderColor: opacify('#fff', 0.35)
+      }
+    },
+
+    ':focus': {
+      '::-webkit-slider-thumb': {
+        borderColor: '#3C6AC0'
+      }
+    }
+  },
+
+  '@light': {
+    background: 'gray9',
+
+    '::-webkit-slider-thumb': {
+      background: 'white',
+      borderColor: 'gray9'
+    },
+
+    ':hover': {
+      '::-webkit-slider-thumb': {
+        borderColor: 'gray7'
+      }
+    },
+
+    ':focus': {
+      '::-webkit-slider-thumb': {
+        borderColor: 'blue'
+      }
+    }
+  },
+
+  deps: {
+    returnPropertyValue: (el, property, def) => {
+      const val = el.props && el.call('exec', el.props[property], el)
+      const r = el.call('isFunction', val)
+        ? val(el, el.state)
+        : val !== undefined
+        ? val
+        : def !== undefined
+        ? def
+        : 0
+      return r + ''
+    }
+  },
+
+  attr: {
+    type: 'range',
+    value: (el, s) =>
+      el.call('exec', s.value || el.props.value || el.props.defaultValue, el),
+    min: (el, s) => el.deps.returnPropertyValue(el, 'min', 0),
+    max: (el, s) => el.deps.returnPropertyValue(el, 'max', 100),
+    step: (el, s) => el.deps.returnPropertyValue(el, 'step', 1)
+  }
+}

package/Select.js

@@ -0,0 +1,33 @@
+'use strict'
+
+export const Select = {
+  extends: 'Focusable',
+  tag: 'select',
+
+  fontSize: 'A',
+  border: 'none',
+  boxSizing: 'border-box',
+  theme: 'field',
+  cursor: 'pointer',
+  childProps: {
+    tag: 'option',
+    attr: {
+      value: ({ props }) => props.value,
+      selected: ({ props }) => props.selected,
+      disabled: ({ props }) => props.disabled
+    }
+  },
+
+  attr: {
+    name: ({ props }) => props.name,
+    disabled: ({ props }) => props.disabled,
+    value: el => {
+      if (!el.props || !el.props.value) return
+      const val = el.call('exec', el.props.value, el)
+      if (el.call('isString', val) && val.includes('{{')) {
+        return el.call('replaceLiteralsWithObjectFields', val)
+      }
+      return val
+    }
+  }
+}

package/Tooltip/index.js

@@ -0,0 +1,128 @@
+'use strict'
+
+import { isDefined } from '@domql/utils'
+
+export const Tooltip = {
+  display: 'flex',
+
+  theme: 'dialog',
+  background: 'black',
+  flow: 'column',
+  shape: 'tooltip',
+  shapeDirection: 'left',
+  padding: 'Z1 A',
+  round: 'Y2',
+  width: 'fit-content',
+  minWidth: 'D2',
+  maxWidth: 'F2',
+  gap: 'X',
+  textAlign: 'center',
+  attr: { tooltip: true },
+
+  Title: {
+    if: ({ parent, props }) => isDefined(parent.props.title) || props.text,
+    width: 'fit-content',
+    fontWeight: 500,
+    color: 'gray12',
+    text: ({ parent }) => parent.props.title
+  },
+
+  P: {
+    if: (el, s) =>
+      el.call('isDefined', el.call('exec', el.parent.props.description, el)) ||
+      el.props.text,
+    width: 'fit-content',
+    fontSize: 'Z2',
+    margin: '0',
+    color: 'gray6',
+    fontWeight: '400',
+    text: (el, s) => el.call('exec', el.parent.props.description, el)
+  }
+}
+
+export const TooltipHidden = {
+  extends: 'Tooltip',
+
+  position: 'absolute',
+  pointerEvents: 'none',
+  opacity: '0',
+  visibility: 'hidden',
+  transition:
+    'C defaultBezier opacity, C defaultBezier visibility, B defaultBezier transform',
+
+  props: ({ props }) => ({
+    ...(!props.shapeDirection || props.shapeDirection === 'top'
+      ? {
+          top: '112%',
+          left: '50%',
+          transform: 'translate3d(-50%,10%,0)',
+
+          '.isActive': {
+            transform: 'translate3d(-50%,0,0)',
+            opacity: 1,
+            visibility: 'visible'
+          }
+        }
+      : props.shapeDirection === 'right'
+      ? {
+          transform: 'translate3d(10%,-50%,0)',
+          left: '112%',
+          top: '50%',
+
+          '.isActive': {
+            transform: 'translate3d(0%,-50%,0)',
+            opacity: 1,
+            visibility: 'visible'
+          }
+        }
+      : ({ props }) =>
+          props.shapeDirection === 'bottom'
+            ? {
+                transform: 'translate3d(-50%,-10%,0)',
+                bottom: '112%',
+                left: '50%',
+
+                '.isActive': {
+                  transform: 'translate3d(-50%,0,0)',
+                  opacity: 1,
+                  visibility: 'visible'
+                }
+              }
+            : props.shapeDirection === 'left'
+            ? {
+                transform: 'translate3d(10%,-50%,0)',
+                right: '112%',
+                top: '50%',
+
+                '.isActive': {
+                  transform: 'translate3d(0%,-50%,0)',
+                  opacity: 1,
+                  visibility: 'visible'
+                }
+              }
+            : {})
+  })
+}
+
+export const TooltipParent = {
+  position: 'relative',
+  zIndex: 999,
+
+  props: el => {
+    const { Tooltip, TooltipHidden } = el
+    const TooltipElem = Tooltip || TooltipHidden
+    if (!TooltipElem) return
+    const TooltipActive =
+      TooltipElem && TooltipElem.props && TooltipElem.props['.isActive']
+    return {
+      ':hover, &:focus-visible': {
+        zIndex: 1000,
+        '& [tooltip]': TooltipActive || {
+          transform: 'translate3d(-50%, 0, 0)',
+          opacity: 1,
+          visibility: 'visible'
+        }
+      }
+    }
+  }
+}

package/Tooltip/style.js

@@ -0,0 +1,12 @@
+'use strict'
+
+export default {
+  textAlign: 'center',
+  padding: '1.2em',
+  caption: {
+    whiteSpace: 'nowrap'
+  },
+  span: {
+    opacity: '.5'
+  }
+}

package/index.js

@@ -1,14 +1,35 @@
 'use strict'
 
-export * from '@symbo.ls/atoms'
-export * from '@symbo.ls/icon'
-export * from '@symbo.ls/link'
-export * from '@symbo.ls/input'
-export * from '@symbo.ls/select'
-export * from '@symbo.ls/button'
-export * from '@symbo.ls/dialog'
-export * from '@symbo.ls/tooltip'
-export * from '@symbo.ls/avatar'
-export * from '@symbo.ls/range'
-export * from '@symbo.ls/dropdown'
-export * from '@symbo.ls/notification'
+// Atoms
+export * from './Atoms/Block.js'
+export * from './Atoms/Img.js'
+export * from './Atoms/Form.js'
+export * from './Atoms/Iframe.js'
+export * from './Atoms/InteractiveComponent.js'
+export * from './Atoms/Picture.js'
+export * from './Atoms/Svg.js'
+export * from './Atoms/Shape.js'
+export * from './Atoms/Video.js'
+export * from './Atoms/Theme.js'
+export * from './Atoms/Text.js'
+export * from './Atoms/Box.js'
+export * from './Atoms/Hgroup.js'
+
+// Input
+export * from './Input/Input.js'
+export * from './Input/NumberInput.js'
+export * from './Input/Checkbox.js'
+export * from './Input/Radio.js'
+export * from './Input/Toggle.js'
+export * from './Input/Textarea.js'
+
+export * from './Icon/index.js'
+export * from './Link.js'
+export * from './Select.js'
+export * from './Button.js'
+export * from './Dialog.js'
+export * from './Tooltip/index.js'
+export * from './Avatar.js'
+export * from './Range.js'
+export * from './Dropdown.js'
+export * from './Notification.js'

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@symbo.ls/uikit",
   "description": "UI Library built on Scratch and DOMQL",
-  "version": "3.7.3",
+  "version": "3.7.4",
   "author": "symbo.ls",
   "repository": "https://github.com/symbo-ls/smbls",
   "main": "index.js",
@@ -12,25 +12,22 @@
   },
   "files": [
     "*.js",
+    "Atoms",
+    "Datepicker",
+    "Icon",
+    "Input",
+    "TimePicker",
+    "Tooltip",
     "dist"
   ],
   "dependencies": {
-    "attrs-in-props": "^3.7.3",
-    "css-in-props": "^3.7.3",
-    "@domql/utils": "^3.7.3",
-    "@symbo.ls/atoms": "^3.7.3",
-    "@symbo.ls/avatar": "^3.7.3",
-    "@symbo.ls/button": "^3.7.3",
-    "@symbo.ls/dialog": "^3.7.3",
-    "@symbo.ls/dropdown": "^3.7.3",
-    "@symbo.ls/icon": "^3.7.3",
-    "@symbo.ls/input": "^3.7.3",
-    "@symbo.ls/link": "^3.7.3",
-    "@symbo.ls/notification": "^3.7.3",
-    "@symbo.ls/range": "^3.7.3",
-    "@symbo.ls/scratch": "^3.7.3",
-    "@symbo.ls/select": "^3.7.3",
-    "@symbo.ls/tooltip": "^3.7.3"
+    "@domql/router": "^3.7.4",
+    "@domql/state": "^3.7.4",
+    "@domql/utils": "^3.7.4",
+    "@symbo.ls/scratch": "^3.7.4",
+    "@symbo.ls/smbls-utils": "^3.7.4",
+    "attrs-in-props": "^3.7.4",
+    "css-in-props": "^3.7.4"
   },
   "scripts": {
     "prepublish": "rm -rf dist && npx esbuild index.js --target=es2017 --format=cjs --sourcemap=external --outfile=dist/index.cjs.js"

package/LICENSE

@@ -1,34 +0,0 @@
-Creative Commons Attribution-NonCommercial 4.0 International License
-
-Copyright (c) 2023 symbo.ls
-
-This work is licensed under the Creative Commons Attribution-NonCommercial
-4.0 International License. To view a copy of this license, visit
-https://creativecommons.org/licenses/by-nc/4.0/ or send a letter to
-Creative Commons, PO Box 1866, Mountain View, CA 94042, USA.
-
-You are free to:
-
-  Share — copy and redistribute the material in any medium or format
-  Adapt — remix, transform, and build upon the material
-
-Under the following terms:
-
-  Attribution — You must give appropriate credit, provide a link to the
-  license, and indicate if changes were made. You may do so in any
-  reasonable manner, but not in any way that suggests the licensor endorses
-  you or your use.
-
-  NonCommercial — You may not use the material for commercial purposes.
-
-  No additional restrictions — You may not apply legal terms or
-  technological measures that legally restrict others from doing anything
-  the license permits.
-
-THE WORK IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE WORK OR THE USE OR OTHER DEALINGS IN THE
-WORK.