@zuzjs/ui 0.3.0 → 0.3.1

package/dist/index.js

@@ -6,6 +6,7 @@ import Cookies from 'js-cookie';
 import axios from 'axios';
 import { nanoid } from 'nanoid';
 import { ClassNames } from '@emotion/react';
+import ReactDOM from 'react-dom/client';
 export { Link } from 'react-router-dom';
 import styled from '@emotion/styled';
 
@@ -80,7 +81,7 @@ class AppTheme {
         };
         const conf = _conf || {};
         __classPrivateFieldSet(this, _AppTheme_listen, "listen" in conf ? conf.listen : (mod) => { console.log(`Theme switched to ${mod}`); }, "f");
-        __classPrivateFieldSet(this, _AppTheme_mode, conf.mode || "auto", "f");
+        __classPrivateFieldSet(this, _AppTheme_mode, conf.mode || conf.theme.mode || "auto", "f");
         __classPrivateFieldSet(this, _AppTheme_lightTheme, Object.assign({ 
             //CORE
             tag: "light", dark: false, primary: '#edeef5', secondary: '#f9f9f9', textColor: '#111111' }, ("theme" in conf && "light" in conf.theme ? Object.assign({}, conf.theme.light) : {})), "f");
@@ -581,14 +582,14 @@ const UPDATE_FORM_FIELD = (formName, field, value, forms) => {
 };
 
 const Input = forwardRef((props, ref) => {
-    const { as, accept, multiple, onChange, onKeyUp, onClick, readOnly, type, tag, placeholder, name, form, touched, onSubmit, value, defaultValue, fref } = props;
+    const { as, accept, multiple, onChange, onKeyUp, onClick, readOnly, type, tag, placeholder, name, form, touched, onSubmit, value, defaultValue, fref, autoComplete } = props;
     const dispatch = useDispatch(STORE_FORM_KEY);
     const { forms } = useStore(state => state[STORE_FORM_KEY], false);
     let Tag = tag || 'input';
     const El = Tag;
     const _ref = fref || useRef();
     const _defaultCSS = `width: 100%;border-radius: var(--radius-base);padding-left: 4px;padding-right: 4px;border-style: solid;border-width: 1px;border-color: var(--colors-gray-200);`;
-    return (jsx(ClassNames, { children: ({ css, cx }) => jsx(El, { type: type || `text`, placeholder: placeholder || undefined, name: name || nanoid(), multiple: type == 'file' ? multiple : undefined, accept: accept || `*`, className: `${as ? `${as} ` : ``}f ${cx(css `${_defaultCSS}${buildCSS(props)}&:hover {${buildCSS(props.hover || {})}} &:focus {${buildCSS(props.focus || {})}}`)}`, ref: _ref, value: value || undefined, defaultValue: defaultValue || ``, onKeyUp: (e) => {
+    return (jsx(ClassNames, { children: ({ css, cx }) => jsx(El, Object.assign({}, cleanProps(props), { type: type || `text`, placeholder: placeholder || undefined, autoComplete: autoComplete || undefined, name: name || nanoid(), multiple: type == 'file' ? multiple : undefined, accept: accept || `*`, className: `${as ? `${as} ` : ``}f ${cx(css `${_defaultCSS}${buildCSS(props)}&:hover {${buildCSS(props.hover || {})}} &:focus {${buildCSS(props.focus || {})}}`)}`, ref: _ref, value: value || undefined, defaultValue: defaultValue || ``, onKeyUp: (e) => {
                 let k = e['keyCode'] || ['which'];
                 if (El != 'textarea' && k == 13 && form && onSubmit) {
                     onSubmit(forms[form]);
@@ -600,7 +601,7 @@ const Input = forwardRef((props, ref) => {
                 dispatch(dispatch(UPDATE_FORM_FIELD(form || 'orphan', name, val == "" ? null : val, forms)));
                 onChange && onChange(val == "" ? null : val);
             }, onClick: onClick ? onClick : () => { }, readOnly: readOnly || false, onBlur: e => {
-            }, onFocus: e => touched == false && dispatch(UPDATE_FORM_FIELD(form || 'orphan', `touched`, true, forms)) }) }));
+            }, onFocus: e => touched == false && dispatch(UPDATE_FORM_FIELD(form || 'orphan', `touched`, true, forms)) })) }));
 });
 
 const Select = forwardRef((props, ref) => {
@@ -947,13 +948,81 @@ const useLang = (mod = 'en') => {
     return state['lang'] || {};
 };
 
+const Box = forwardRef((props, ref) => {
+    const _noClick = () => { };
+    // console.log(props)
+    return (jsx(ClassNames, { children: ({ css, cx }) => jsx("div", Object.assign({}, cleanProps(props), { title: props.title || undefined, id: props.id || undefined, onClick: props.onClick || _noClick, className: `${props.as ? `${props.as} ` : ``}${cx(css `${buildCSS(props)} &:hover {${buildCSS(props.hover || {})}} &:active {${buildCSS(props.active || {})}}`)}`, ref: props.bref || ref }, { children: props.html ? jsx("span", { dangerouslySetInnerHTML: { __html: props.html } }) : props.children })) }));
+});
+
+const useContextMenu = (contextID) => {
+    const ID = `context-${contextID}`;
+    useState(false);
+    const [root, setRoot] = useState(null);
+    const nodeRef = useRef(null);
+    const el = (e) => window.document.createElement(e);
+    function checkBoundaries(x, y) {
+        if (nodeRef.current) {
+            const { innerWidth, innerHeight } = window;
+            const { offsetWidth, offsetHeight } = nodeRef.current;
+            if (x + offsetWidth > innerWidth)
+                x -= x + offsetWidth - innerWidth;
+            if (y + offsetHeight > innerHeight)
+                y -= y + offsetHeight - innerHeight;
+        }
+        return { x, y };
+    }
+    const hide = () => {
+        try {
+            root === null || root === void 0 ? void 0 : root.unmount();
+            setRoot(null);
+        }
+        catch (e) { }
+    };
+    const Menu = (e, items) => {
+        const p = getMousePosition(e);
+        const { x, y } = checkBoundaries(p.x, p.y);
+        return (jsx(Box, Object.assign({ bref: nodeRef, flex: true, dir: `cols`, fixed: true, top: y, left: x, as: `zuz-contextmenu ${ID}` }, { children: items && items.map((m, i) => m.id == `line` ? jsx(Box, { as: `line` }, `line-${i}-${m.id}`) : jsx("button", Object.assign({ onClick: ev => {
+                    if (m.onClick) {
+                        m.onClick(ev, m);
+                    }
+                    else {
+                        console.log(`No onClick eventFound`);
+                    }
+                    hide();
+                } }, { children: m.label }), `cm-${i}-${m.id}`)) })));
+    };
+    const show = (e, items) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!window.document.querySelector(`#context-${contextID}`)) {
+            let div = el(`div`);
+            div.id = ID;
+            window.document.body.appendChild(div);
+        }
+        root.render(Menu(e, items));
+    };
+    useEffect(() => {
+        if (!window.document.querySelector(`#context-${contextID}`)) {
+            let div = el(`div`);
+            div.id = ID;
+            window.document.body.appendChild(div);
+        }
+        if (!root)
+            setRoot(ReactDOM.createRoot(document.getElementById(ID)));
+    }, [root]);
+    return {
+        show,
+        hide
+    };
+};
+
 const Button = forwardRef((props, ref) => {
     const { forms } = useStore(state => state[STORE_FORM_KEY], false);
     if (props.html) {
         ({ __html: props.html });
     }
     return (jsx(ClassNames, { children: ({ css, cx }) => {
-            return (jsx("button", Object.assign({ title: "title" in props ? props.title : undefined, type: props.type, className: `button${props.as ? ` ${props.as}` : ``} ${cx(css `
+            return (jsx("button", Object.assign({}, cleanProps(props), { title: "title" in props ? props.title : undefined, type: props.type, className: `button${props.as ? ` ${props.as}` : ``} ${cx(css `
                 padding: 5px 10px;
                 border-radius: 2px;
                 ${buildCSS(props)} &:hover {${buildCSS(props.hover || {})}} &:active {${buildCSS(props.active || {})}}`)}`, ref: ref, onClick: e => {
@@ -1058,6 +1127,17 @@ const makeCSSValue = (k, v, o) => {
     }
     return `${k}:${v}${unit};`;
 };
+const cleanProps = (props) => {
+    let _props = Object.assign({}, props);
+    Object.keys(_props).map(k => {
+        if (k in cssProps) {
+            delete _props[k];
+        }
+    });
+    let _extras = [`as`, `hover`, `bref`];
+    _extras.map(x => x in _props && delete _props[x]);
+    return _props;
+};
 const buildCSS = (props) => {
     let css = ``;
     Object.keys(props).map(k => {
@@ -1270,6 +1350,30 @@ const imgPromiseFactory = ({ decode = true, crossOrigin = '' }) => (src) => {
         i.src = src;
     });
 };
+const parseFilename = nm => {
+    var re = /(?:\.([^.]+))?$/;
+    return {
+        name: nm.split('.').slice(0, -1).join('.'),
+        ext: re.exec(nm)[1]
+    };
+};
+const camelCase = str => str.replace(":", "-").replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); });
+const getMousePosition = e => {
+    const pos = {
+        x: e.clientX,
+        y: e.clientY,
+    };
+    const touch = e.changedTouches;
+    if (touch) {
+        pos.x = touch[0].clientX;
+        pos.y = touch[0].clientY;
+    }
+    if (!pos.x || pos.x < 0)
+        pos.x = 0;
+    if (!pos.y || pos.y < 0)
+        pos.y = 0;
+    return pos;
+};
 
 const AppMain = forwardRef((props, ref) => {
     // const { dispatch } = useStore()
@@ -1282,11 +1386,6 @@ const App = forwardRef((props, ref) => {
     return (jsx(AppProvider, { children: jsx(AppMain, {}) }));
 });
 
-const Box = forwardRef((props, ref) => {
-    const _noClick = () => { };
-    return (jsx(ClassNames, { children: ({ css, cx }) => jsx("div", Object.assign({ id: props.id || undefined, onClick: props.onClick || _noClick, className: `${props.as ? `${props.as} ` : ``}${cx(css `${buildCSS(props)} &:hover {${buildCSS(props.hover || {})}} &:active {${buildCSS(props.active || {})}}`)}`, ref: props.bref || ref }, { children: props.html ? jsx("span", { dangerouslySetInnerHTML: { __html: props.html } }) : props.children })) }));
-});
-
 // const CoreBlock = styled.section`display: block;`
 // const buildComponent = (props: any) => Block.withComponent(props.for || `div`)`${buildCSS(props)}`
 const Component = forwardRef((props, ref) => {
@@ -1617,7 +1716,7 @@ const Tweet = (props) => {
 
 const ContextMenu = forwardRef((props, ref) => {
     const { as, size, color, hover, pos, items } = props;
-    return (jsx(Box, Object.assign({ hover: hover || {}, flex: true, fixed: true, top: (pos === null || pos === void 0 ? void 0 : pos.y) || 0, left: (pos === null || pos === void 0 ? void 0 : pos.x) || 0, bref: ref, as: `contextmenu-${as}`, ai: `c`, jc: `c`, size: size || 24, color: color || `#111111` }, { children: items && items.map((m, i) => jsx(Button, Object.assign({ onClick: m.on ? m.on : () => { } }, { children: m.label }), `cm-${i}-${m.id}`)) })));
+    return (jsx(Box, Object.assign({ hover: hover || {}, flex: true, dir: `cols`, fixed: true, top: (pos === null || pos === void 0 ? void 0 : pos.y) || 0, left: (pos === null || pos === void 0 ? void 0 : pos.x) || 0, bref: ref, as: `contextmenu-${as}`, size: size || 24, color: color || `#111111` }, { children: items && items.map((m, i) => jsx(Button, Object.assign({ onClick: m.on ? m.on : () => { } }, { children: m.label }), `cm-${i}-${m.id}`)) })));
 });
 
 const buildElement = (el) => {
@@ -1637,4 +1736,4 @@ const Header = forwardRef((props, ref) => {
     return (jsx(Fragment, { children: buildComponent(data) }));
 });
 
-export { App, Component as Block, Box, Button, Checkbox, ContextMenu, Cover, Form, Header, Heading, Icon, Image$1 as Image, Input, Masonry, Placeholder, AppProvider as Provider, Select, Spacer, Spinner, Text, Toaster, Tweet, addProps, addScript, buildCSS, buildFormData, byId, byName, createSlice, el, filterHTMLProps, filterStyleProps, generateModalRoutes, generatePreservedRoutes, generateRegularRoutes, getCookie, getHostname, getUriParams, grab, imgPromiseFactory, isEmail, isIPv4, isUrl, randstr, removeCookie, rgb2hex, setCSSVar, setCookie, shuffleArray, ucfirst, useDevice, useDispatch, useImage, useLang, useResizeObserver, useStore, useTheme, useToast, uuid };
+export { App, Component as Block, Box, Button, Checkbox, ContextMenu, Cover, Form, Header, Heading, Icon, Image$1 as Image, Input, Masonry, Placeholder, AppProvider as Provider, Select, Spacer, Spinner, Text, Toaster, Tweet, addProps, addScript, buildCSS, buildFormData, byId, byName, camelCase, cleanProps, createSlice, el, filterHTMLProps, filterStyleProps, generateModalRoutes, generatePreservedRoutes, generateRegularRoutes, getCookie, getHostname, getMousePosition, getUriParams, grab, imgPromiseFactory, isEmail, isIPv4, isUrl, parseFilename, randstr, removeCookie, rgb2hex, setCSSVar, setCookie, shuffleArray, ucfirst, useContextMenu, useDevice, useDispatch, useImage, useLang, useResizeObserver, useStore, useTheme, useToast, uuid };

package/dist/styles.css

@@ -455,4 +455,31 @@ button {
 }
 .zuz-checkbox:checked + label:after {
   left: 20px;
+}
+
+.zuz-contextmenu {
+  min-width: 220px;
+  border-radius: 5px;
+  padding: 4px;
+  background: rgba(34, 34, 34, 0.5);
+  border: 1px rgba(255, 255, 255, 0.25) solid;
+  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.45);
+  backdrop-filter: blur(20px);
+}
+.zuz-contextmenu button {
+  border: 0px;
+  text-align: left;
+  padding: 4px 6px;
+  background: rgba(0, 0, 0, 0);
+  cursor: pointer;
+  color: #fff;
+  border-radius: 4px;
+}
+.zuz-contextmenu button:hover {
+  background: #385fd2;
+}
+.zuz-contextmenu .line {
+  height: 1px;
+  background: rgba(255, 255, 255, 0.25);
+  margin: 4px 6px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zuzjs/ui",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "type": "module",
   "main": "dist/index.js",
   "exports": {

package/src/comps/box.tsx

@@ -3,15 +3,19 @@ import {
     useEffect
 } from 'react';
 import { ClassNames } from '@emotion/react'
-import { buildCSS } from '../core'
+import { cleanProps, buildCSS } from '../core'
 
 const Box = forwardRef((props : { [ key: string ] : any }, ref) => {
 
     const _noClick = () => {}
 
+    // console.log(props)
+
     return (
         <ClassNames>
             {({ css, cx }) => <div 
+                {...cleanProps(props)}
+                title={props.title || undefined}
                 id={props.id || undefined}
                 onClick={props.onClick || _noClick}
                 className={`${props.as ? `${props.as} ` : ``}${cx(css`${buildCSS(props)} &:hover {${buildCSS(props.hover || {})}} &:active {${buildCSS(props.active || {})}}`)}`} 

package/src/comps/button.tsx

@@ -5,7 +5,7 @@ import React, {
 import { ClassNames } from '@emotion/react'
 import { 
   buildCSS,
-  filterStyleProps
+  cleanProps
 } from '../core'
 import { useStore } from '../hooks'
 import { STORE_FORM_KEY } from '../context/AppProvider'
@@ -22,6 +22,7 @@ const Button = forwardRef((props: { [ key: string ] : any }, ref : LegacyRef<HTM
         {({ css, cx }) => {
           return (
             <button
+              {...cleanProps(props)}
               title={"title" in props ? props.title : undefined}
               type={props.type}
               className={`button${props.as ? ` ${props.as}` : ``} ${cx(css`

package/src/comps/contextmenu.tsx

@@ -22,14 +22,12 @@ const ContextMenu = forwardRef((props : { [ key: string ] : any }, ref : LegacyR
     return (
         <Box 
             hover={hover || {}}
-            flex
+            flex dir={`cols`}
             fixed
             top={pos?.y || 0}
             left={pos?.x || 0}
             bref={ref}
             as={`contextmenu-${as}`}
-            ai={`c`}
-            jc={`c`}
             size={size || 24}
             color={color || `#111111`}
         >

package/src/comps/input.tsx

@@ -7,7 +7,7 @@ import {
 } from 'react';
 import { ClassNames } from '@emotion/react'
 import { nanoid } from 'nanoid';
-import { buildCSS } from '../core'
+import { cleanProps, buildCSS } from '../core'
 import { STORE_FORM_KEY } from '../context/AppProvider'
 import useDispatch from '../hooks/useDispatch'
 import useStore from '../hooks/useStore'
@@ -34,7 +34,8 @@ const Input = forwardRef((props : { [ key: string ] : any }, ref : LegacyRef<HTM
         onSubmit,
         value,
         defaultValue,
-        fref
+        fref,
+        autoComplete
     } = props;
 
     const dispatch = useDispatch(STORE_FORM_KEY)
@@ -49,8 +50,10 @@ const Input = forwardRef((props : { [ key: string ] : any }, ref : LegacyRef<HTM
     return (
         <ClassNames>
             {({ css, cx }) => <El
+                {...cleanProps(props)}
                 type={type || `text`} 
                 placeholder={placeholder || undefined}
+                autoComplete={autoComplete || undefined}
                 name={name || nanoid()}
                 multiple={type == 'file' ? multiple : undefined}
                 accept={accept || `*`}

package/src/context/store/theme.tsx

@@ -8,7 +8,7 @@ class AppTheme {
     constructor(_conf){
         const conf = _conf || {}
         this.#listen = "listen" in conf ? conf.listen : (mod) => { console.log(`Theme switched to ${mod}`); };
-        this.#mode = conf.mode || "auto";
+        this.#mode = conf.mode || conf.theme.mode || "auto";
         this.#lightTheme = {
             //CORE
             tag: "light",

package/src/core/index.ts

@@ -38,6 +38,18 @@ const makeCSSValue = (k : any, v : any, o : any) => {
     return `${k}:${v}${unit};`;
 }
 
+const cleanProps = (props : any) => {
+    let _props = { ...props }
+    Object.keys(_props).map(k => {
+        if(k in cssProps){
+            delete _props[k]
+        }
+    });
+    let _extras = [`as`, `hover`, `bref`]
+    _extras.map(x => x in _props && delete _props[x])
+    return _props
+}
+
 const buildCSS = (props : any) => {
     let css = ``;
     Object.keys(props).map(k => {
@@ -278,10 +290,41 @@ const imgPromiseFactory = ({decode = true, crossOrigin = ''}) =>
   })
 }
 
+const parseFilename = nm => {
+    var re = /(?:\.([^.]+))?$/;
+    return {
+        name: nm.split('.').slice(0, -1).join('.'),
+        ext: re.exec(nm)[1]
+    }
+}
+
+const camelCase = str => str.replace(":", "-").replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); });
+
+const getMousePosition = e => {
+    const pos = {
+      x: (e as MouseEvent).clientX,
+      y: (e as MouseEvent).clientY,
+    };
+  
+    const touch = (e as TouchEvent).changedTouches;
+  
+    if (touch) {
+      pos.x = touch[0].clientX;
+      pos.y = touch[0].clientY;
+    }
+  
+    if (!pos.x || pos.x < 0) pos.x = 0;
+  
+    if (!pos.y || pos.y < 0) pos.y = 0;
+  
+    return pos;
+}
+
 export {
     addProps,
     addScript,
     buildCSS,
+    cleanProps,
     buildFormData,
     byName,
     byId,
@@ -306,6 +349,9 @@ export {
     generateModalRoutes, 
     generatePreservedRoutes, 
     generateRegularRoutes,
-    getHostname
+    getHostname,
+    parseFilename,
+    camelCase,
+    getMousePosition
 }
 

package/src/hooks/index.tsx

@@ -5,4 +5,5 @@ export { default as useDispatch } from './useDispatch'
 export { default as useResizeObserver } from './useResizeObserver'
 export { default as useDevice } from './useDevice'
 export { default as useToast } from './useToast'
-export { default as useLang } from './useLang'
+export { default as useLang } from './useLang'
+export { default as useContextMenu } from './useContextMenu'

package/src/hooks/useContextMenu.tsx

@@ -0,0 +1,88 @@
+import { SyntheticEvent, useEffect, useState, useRef } from "react"
+import ReactDOM from 'react-dom/client'
+import Box from '../comps/box'
+import { getMousePosition } from "../core"
+
+const useContextMenu = (contextID : string) => {
+
+    const ID = `context-${contextID}`
+    const [visible, setVisible] = useState(false)
+    const [root, setRoot] = useState(null)
+    const nodeRef = useRef<HTMLDivElement>(null);
+
+    const el = (e : string) => window.document.createElement(e)
+
+    function checkBoundaries(x: number, y: number) {
+        if (nodeRef.current) {
+          const { innerWidth, innerHeight } = window;
+          const { offsetWidth, offsetHeight } = nodeRef.current;
+    
+          if (x + offsetWidth > innerWidth) x -= x + offsetWidth - innerWidth;
+    
+          if (y + offsetHeight > innerHeight) y -= y + offsetHeight - innerHeight;
+        }
+    
+        return { x, y };
+    }
+
+    const hide = () => {
+        try{
+            root?.unmount()
+            setRoot(null)
+        }catch(e){}
+    }
+
+    const Menu = (e: MouseEvent, items : Array<any>) => {
+
+        const p = getMousePosition(e);
+        const { x, y } = checkBoundaries(p.x, p.y);
+
+        return (
+            <Box 
+                bref={nodeRef}
+                flex dir={`cols`}
+                fixed
+                top={y}
+                left={x}
+                as={`zuz-contextmenu ${ID}`}>
+                {items && items.map((m, i) => m.id == `line` ? <Box as={`line`} key={`line-${i}-${m.id}`} /> : <button 
+                    key={`cm-${i}-${m.id}`} 
+                    onClick={ev => {
+                        if(m.onClick){
+                            m.onClick(ev, m)
+                        }else{
+                            console.log(`No onClick eventFound`)
+                        }
+                        hide()
+                    }}>{m.label}</button>)}
+            </Box>
+        )
+    }
+
+    const show = (e : MouseEvent, items : Array<any>) => {
+        e.preventDefault(); e.stopPropagation();
+        if(!window.document.querySelector(`#context-${contextID}`)){
+            let div = el(`div`)
+            div.id = ID
+            window.document.body.appendChild(div)
+        }
+        root.render(Menu(e, items))        
+    }
+
+    useEffect(() => {
+        if(!window.document.querySelector(`#context-${contextID}`)){
+            let div = el(`div`)
+            div.id = ID
+            window.document.body.appendChild(div)
+        }
+        if(!root) setRoot(ReactDOM.createRoot(document.getElementById(ID)))
+    }, [root])
+
+    return {
+        show,
+        hide
+    }
+
+}
+
+export default useContextMenu

package/src/scss/style.scss

@@ -103,4 +103,31 @@
           left: 20px;
         }
     }
+}
+
+.zuz-contextmenu{
+    min-width: 220px;
+    border-radius: 5px;
+    padding: 4px;
+    background: rgba(34,34,34,0.5);
+    border: 1px rgba(255,255,255,0.25) solid;
+    box-shadow: 0px 1px 3px rgba(0, 0, 0, .45);
+    backdrop-filter: blur(20px);
+    button{
+        border: 0px;
+        text-align: left;
+        padding: 4px 6px;
+        background: rgba(0, 0, 0, 0);
+        cursor: pointer;
+        color: #fff;
+        border-radius: 4px;
+        &:hover{
+            background: #385fd2;
+        }
+    }
+    .line{
+        height: 1px;
+        background: rgba(255,255,255,0.25);
+        margin: 4px 6px;
+    }
 }