@progress/kendo-themes-html 4.41.3-dev.3 → 5.0.0-alpha.0

package/lib/jsx-runtime.js

@@ -1,5 +1,7 @@
+/* eslint-disable no-new */
+/* global kendo */
 import { isFunction, isArray, isObject } from '../utils/object';
-import { classNames } from '../utils/styles';
+import { classNames, cssStyle } from '../utils/styles';
 
 const JSX_FRAGMENT = '#fragment';
 const JSX_TEXT = '#text';
@@ -8,7 +10,32 @@ const attrMap = {
     'class': 'className',
     themecolor: 'themeColor',
     fillmode: 'fillMode',
-    showspinbuttons: 'showSpinButtons'
+
+    // Inputs
+    showtext: 'showText',
+    showvalue: 'showValue',
+    valueicon: 'valueIcon',
+    valueiconname: 'valueIconName',
+    showicon: 'showIcon',
+    iconposition: 'iconPosition',
+    iconname: 'iconName',
+    showarrow: 'showArrow',
+    arrowicon: 'arrowIcon',
+    arrowiconname: 'arrowIconName',
+    showarrowbutton: 'showArrowButton',
+    arrowbutton: 'arrowButton',
+    showdropdownbutton: 'showDropdownButton',
+    dropdownbutton: 'dropdownButton',
+    showspinbutton: 'showSpinButton',
+    spinbutton: 'spinButton',
+    showclearbutton: 'showClearButton',
+    clearbutton: 'clearButton',
+
+    // Switch
+    onlabel: 'onLabel',
+    offlabel: 'offLabel',
+    trackrounded: 'trackRounded',
+    thumbrounded: 'thumbRounded'
 };
 
 const booleanAttr = new Set([
@@ -19,18 +46,27 @@ const booleanAttr = new Set([
     'active',
     'disabled',
 
-    'selected',
-
     'checked',
     'indeterminate',
 
     'valid',
     'invalid',
+    'required',
+
+    'selected',
+    'loading',
+
+    'showText',
+    'showValue',
+    'showIcon',
+    'showClearButton',
+    'showSpinButton',
 
     'aria'
 ]);
 
 const skipAttr = new Set([
+    'is',
     'aria',
     'legacy'
 ]);
@@ -38,6 +74,7 @@ const skipAttr = new Set([
 const setAttr = new Set([
     // Global
     'id',
+    'style',
 
     // Related to forms
     'type',
@@ -46,8 +83,56 @@ const setAttr = new Set([
     'autocomplete'
 ]);
 
-function attrToProps( element ) {
-    let attributes = element.attributes;
+function htmlToProps( element ) {
+    let props = attrToProps( element.attributes );
+    let children = Array.from( element.childNodes );
+
+    props.children = [];
+
+    children.forEach( child => {
+        let childProps;
+        let nodeType = child.nodeType;
+
+        if ( nodeType === Node.TEXT_NODE ) {
+            let textContent = child.textContent.trim();
+
+            if ( textContent !== '' ) {
+                childProps = {
+                    type: JSX_TEXT,
+                    props: {
+                        text: textContent
+                    }
+                };
+
+                props.children.push( childProps );
+            }
+        }
+
+        if ( nodeType === Node.ELEMENT_NODE ) {
+            let componentName = child.getAttribute('is');
+            let component = kendo.Html[componentName];
+
+            if (isFunction( component )) {
+                component = new component( child );
+                childProps = component.render();
+                childProps._component = componentName;
+            } else {
+                childProps = {
+                    type: child.nodeName,
+                    props: htmlToProps( child )
+                };
+
+            }
+
+            props.children.push( childProps );
+        }
+
+    });
+
+    return props;
+}
+
+function attrToProps( attributes ) {
     let props = {};
 
     Array.from(attributes).forEach((attrObj) => {
@@ -58,8 +143,16 @@ function attrToProps( element ) {
             attrName = attrMap[attrName];
         }
 
-        if (booleanAttr.has(attrName) && attrValue === '') {
-            props[ attrName ] = true;
+        if (booleanAttr.has(attrName) && typeof attrValue === 'string') {
+            switch (attrValue) {
+                case '':
+                case 'true':
+                    props[ attrName ] = true;
+                    break;
+                default:
+                    props[ attrName ] = false;
+                    break;
+            }
         } else {
             props[ attrName ] = attrValue;
         }
@@ -144,14 +237,17 @@ function renderDOM( jsxNode, container = null ) {
     }
 
     props.className = classNames( props.className );
+    props.style = cssStyle( props.style );
 
     for (let [ attr, val ] of Object.entries(props)) {
         if (skipAttr.has(attr)) {
             continue;
         }
 
-        if (setAttr.has(attr) && val !== '') {
-            element.setAttribute( attr, val );
+        if (setAttr.has(attr)) {
+            if (val !== '') {
+                element.setAttribute( attr, val );
+            }
         } else {
             element[attr] = val;
         }
@@ -161,6 +257,10 @@ function renderDOM( jsxNode, container = null ) {
         element.append( children );
     } else {
         children.forEach( child => {
+            if (child === null) {
+                return;
+            }
+
             renderDOM( child, element );
         });
     }
@@ -177,5 +277,6 @@ export {
     jsxs,
     JSX_FRAGMENT as Fragment,
     renderDOM,
-    attrToProps
+    attrToProps,
+    htmlToProps
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-themes-html",
   "description": "A collection of HTML helpers used for developing Kendo UI themes",
-  "version": "4.41.3-dev.3",
+  "version": "5.0.0-alpha.0",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -34,13 +34,13 @@
     "dev": "rollup -cw"
   },
   "devDependencies": {
-    "@babel/core": "^7.15.5",
-    "@babel/preset-env": "^7.15.6",
+    "@babel/core": "^7.15.8",
+    "@babel/preset-env": "^7.15.8",
     "@babel/preset-react": "^7.14.5",
     "@rollup/plugin-babel": "^5.3.0",
-    "@rollup/plugin-commonjs": "^20.0.0",
+    "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-node-resolve": "^13.0.5",
-    "rollup": "^2.57.0"
+    "rollup": "^2.58.0"
   },
-  "gitHead": "fa5c9603df4ce625274a6478de659303b4d7b871"
+  "gitHead": "3fd060a3f688d79324c6e976857536557f71dc11"
 }

package/src/autocomplete/README.md

@@ -0,0 +1,24 @@
+```html
+<!-- default rendering -->
+<span class="k-autocomplete k-input k-input-md k-rounded-md k-input-solid">
+    <input type="text" class="k-input-inner" value="..." placeholder="..." />
+</span>
+
+<!-- canonical rendering -->
+<span class="
+    k-autocomplete
+    k-input
+    k-input-${size}
+    k-rounded-${rounded}
+    k-input-${fillMode}
+
+    ${valid && 'k-valid'}
+    ${invalid && 'k-invalid'}
+    ${required && 'k-required'}
+    ${disabled && 'k-disabled'}
+">
+    <input type={type} class="k-input-inner" value={value} placeholder={placeholder} disabled={disabled} />
+    {valid && <span class="k-input-icon k-icon k-i-check"></span>}
+    {invalid && <span class="k-input-icon k-icon k-i-check"></span>}
+</span>
+```

package/src/autocomplete/autocomplete.jsx

@@ -0,0 +1,160 @@
+import { globalDefaultProps } from '../component';
+import { Input, InputStatic, InputInnerInputStatic } from '../input/index';
+import { InputValidationIconStatic, InputLoadingIconStatic, InputClearValueStatic } from '../input/index';
+
+class Autocomplete extends Input {
+    render() {
+        return <AutocompleteStatic {...this.props} />;
+    }
+}
+
+function AutocompleteStatic(props) {
+
+    const {
+        className: ownClassName,
+
+        type,
+        value,
+        placeholder,
+        autocomplete,
+
+        prefix,
+        suffix,
+
+        size,
+        rounded,
+
+        fillMode,
+
+        hover,
+        focus,
+        valid,
+        invalid,
+        required,
+        disabled,
+
+        aria,
+        legacy,
+
+        ...htmlAttributes
+    } = props;
+
+    htmlAttributes.size = size;
+    htmlAttributes.rounded = rounded;
+    htmlAttributes.fillMode = fillMode;
+    htmlAttributes.hover = hover;
+    htmlAttributes.focus = focus;
+    htmlAttributes.valid = valid;
+    htmlAttributes.invalid = invalid;
+    htmlAttributes.required = required;
+    htmlAttributes.disabled = disabled;
+
+    const inputAttributes = {
+        type,
+        value,
+        placeholder,
+        autocomplete,
+
+        disabled
+    };
+
+    let autocompleteClasses = [
+        ownClassName,
+        'k-autocomplete'
+    ];
+
+    let ariaAttr = aria
+        ? {}
+        : {};
+
+    if (legacy) {
+
+        let legacyClasses = [
+            ownClassName,
+            'k-widget',
+            'k-autocomplete',
+            {
+                'k-state-hover': hover === true,
+                'k-state-focused': focus === true,
+                'k-state-invalid': invalid === true,
+                'k-state-required': required === true,
+                'k-state-disabled': disabled === true
+            }
+        ];
+
+        return (
+            <InputStatic className={legacyClasses} {...htmlAttributes}>
+                <input type={type} className="k-input" {...inputAttributes} />
+                <InputValidationIconStatic {...props} />
+                <InputLoadingIconStatic {...props} />
+                <InputClearValueStatic {...props} />
+            </InputStatic>
+        );
+    }
+
+    return (
+        <InputStatic className={autocompleteClasses} {...ariaAttr} {...htmlAttributes}>
+            {prefix}
+            <InputInnerInputStatic {...inputAttributes} />
+            {suffix}
+            <InputValidationIconStatic {...props} />
+            <InputLoadingIconStatic {...props} />
+            <InputClearValueStatic {...props} />
+        </InputStatic>
+    );
+}
+
+AutocompleteStatic.defaultProps = {
+    ...globalDefaultProps,
+
+    type: 'text',
+    value: '',
+    placeholder: '',
+    autocomplete: 'off',
+
+    showValidationIcon: true,
+    showLoadingIcon: true,
+    showClearButton: true,
+
+    size: 'medium',
+    rounded: 'medium',
+
+    fillMode: 'solid'
+};
+
+AutocompleteStatic.propTypes = {
+    children: typeof [],
+    className: typeof '',
+
+    type: typeof [ 'text', 'password' ],
+    value: typeof '',
+    placeholder: typeof '',
+    autocomplete: typeof [ 'on', 'off' ],
+
+    showValidationIcon: typeof true,
+    showLoadingIcon: typeof true,
+    showClearButton: typeof true,
+
+    prefix: typeof '#fragment',
+    suffix: typeof '#fragment',
+
+    size: typeof [ 'none', 'small', 'medium', 'large' ],
+    rounded: typeof [ 'none', 'small', 'medium', 'large', 'pill' ],
+
+    fillMode: typeof [ 'none', 'solid', 'flat', 'outline' ],
+
+    hover: typeof false,
+    focus: typeof false,
+    valid: typeof false,
+    invalid: typeof false,
+    loading: typeof false,
+    required: typeof false,
+    disabled: typeof false,
+
+    aria: typeof false,
+    legacy: typeof false,
+
+    htmlAttributes: typeof []
+};
+
+export { Autocomplete, AutocompleteStatic };

package/src/autocomplete/index.js

@@ -0,0 +1 @@
+export * from './autocomplete.jsx';

package/src/button/README.md

@@ -0,0 +1,22 @@
+```html
+<!-- default rendering -->
+<button type="button" class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base">
+    <span class="k-button-text">Text</span>
+</button>
+
+<!-- canonical rendering -->
+<button class="
+    k-button
+    ${text === '' && icon !== '' && 'k-icon-button'}
+    k-button-${size}
+    k-button-${shape}
+    k-rounded-${rounded}
+    k-button-${fillMode}
+    k-button-${fillMode}-${themeColor}
+
+    ${disabled && 'k-disabled'}
+" type={type} disabled={disabled}>
+    {icon !== '' && <span class="k-button-icon k-icon k-i-${icon}"></span>}
+    {text !== '' && <span class="k-button-text">Button</span>}
+</button>
+```

package/src/button/button.jsx

@@ -41,6 +41,8 @@ function ButtonStatic(props) {
         ...htmlAttributes
     } = props;
 
+    const isIconButton = Boolean( icon ) === true && Boolean( text ) === false;
+
     let buttonClasses = [
         ownClassName,
         'k-button',
@@ -55,7 +57,7 @@ function ButtonStatic(props) {
             'k-active': active === true,
             'k-selected': selected === true,
             'k-disabled': disabled === true,
-            'k-icon-button': Boolean( icon ) === true && Boolean( text ) === false
+            'k-icon-button': isIconButton
         }
     ];
 

package/src/checkbox/README.md

@@ -0,0 +1,22 @@
+```html
+<!-- default rendering -->
+<input type="checkbox" class="k-checkbox k-checkbox-md k-rounded-md" />
+
+<!-- canonical rendering -->
+<input type="checkbox"
+    class="
+        k-checkbox
+        k-checkbox-${size}
+        k-rounded-${rounded}
+
+        ${checked && 'k-checked'}
+        ${indeterminate && 'k-indeterminate'}
+
+        ${valid && 'k-valid'}
+        ${invalid && 'k-invalid'}
+        ${required && 'k-required'}
+        ${disabled && 'k-disabled'}
+    "
+    disabled={disabled}
+/>
+```

package/src/checkbox/checkbox.jsx

@@ -0,0 +1,123 @@
+import * as styles from '../../utils/styles';
+import { Component, globalDefaultProps } from '../component';
+
+class Checkbox extends Component {
+    render() {
+        return <CheckboxStatic {...this.props} />;
+    }
+}
+
+function CheckboxStatic(props) {
+
+    const {
+        className: ownClassName,
+
+        checked,
+        indeterminate,
+
+        size,
+        rounded,
+
+        hover,
+        focus,
+        invalid,
+        required,
+        disabled,
+
+        aria,
+        legacy,
+
+        ...htmlAttributes
+
+    } = props;
+
+    htmlAttributes.checked = checked;
+    htmlAttributes.indeterminate = indeterminate;
+    htmlAttributes.required = required;
+    htmlAttributes.disabled = disabled;
+
+    let ariaAttr = aria
+        ? {}
+        : {};
+
+    const isIndeterminate = checked === false && indeterminate === true;
+
+    let checkboxClasses = [
+        ownClassName,
+        'k-checkbox',
+        styles.sizeClass( size, 'k-checkbox' ),
+        styles.roundedClass( rounded ),
+        {
+            'k-hover': hover === true,
+            'k-focus': focus === true,
+            'k-invalid': invalid === true,
+            'k-required': required === true,
+            'k-disabled': disabled === true,
+            'k-checked': checked === true,
+            'k-indeterminate': isIndeterminate,
+        }
+    ];
+
+    if (legacy) {
+
+        let legacyClasses = [
+            ownClassName,
+            'k-checkbox',
+            {
+                'k-state-hover': hover === true,
+                'k-state-focus': focus === true,
+                'k-state-invalid': invalid === true,
+                'k-state-disabled': disabled === true,
+                'k-checked': checked === true,
+                'k-state-indeterminate': isIndeterminate,
+            }
+        ];
+
+        return (
+            <input type="checkbox" className={legacyClasses} {...ariaAttr} {...htmlAttributes} />
+        );
+    }
+
+    return (
+        <input type="checkbox" className={checkboxClasses} {...ariaAttr} {...htmlAttributes} />
+    );
+}
+
+CheckboxStatic.defaultProps = {
+    ...globalDefaultProps,
+
+    id: '',
+    name: '',
+
+    size: 'medium',
+    rounded: 'medium'
+};
+
+CheckboxStatic.propTypes = {
+    className: typeof '',
+
+    id: typeof '',
+    name: typeof '',
+    value: typeof '',
+
+    checked: typeof false,
+    indeterminate: typeof false,
+
+    size: typeof [ 'none', 'small', 'medium', 'large' ],
+    rounded: typeof [ 'none', 'small', 'medium', 'large' ],
+
+    hover: typeof false,
+    focus: typeof false,
+    valid: typeof false,
+    invalid: typeof false,
+    required: typeof false,
+    disabled: typeof false,
+
+    aria: typeof false,
+    legacy: typeof false,
+
+    htmlAttributes: typeof []
+};
+
+
+export { Checkbox, CheckboxStatic };

package/src/checkbox/index.js

@@ -0,0 +1 @@
+export * from './checkbox.jsx';

package/src/colorpicker/README.md

@@ -0,0 +1,30 @@
+```html
+<!-- default rendering -->
+<span class="k-combobox k-input k-input-md k-rounded-md k-input-solid">
+    <input type="text" class="k-input-inner" value="..." placeholder="..." />
+    <button type="button" class="k-input-button k-button k-icon-button k-button-md k-button-solid k-button-solid-base">
+        <span class="k-button-icon k-icon k-i-arrow-s"></span>
+    </button>
+</span>
+
+<!-- canonical rendering -->
+<span class="
+    k-combobox
+    k-input
+    k-input-${size}
+    k-rounded-${rounded}
+    k-input-${fillMode}
+
+    ${valid && 'k-valid'}
+    ${invalid && 'k-invalid'}
+    ${required && 'k-required'}
+    ${disabled && 'k-disabled'}
+">
+    <input type={type} class="k-input-inner" value={value} placeholder={placeholder} disabled={disabled} />
+    {valid && <span class="k-input-icon k-icon k-i-check"></span>}
+    {invalid && <span class="k-input-icon k-icon k-i-check"></span>}
+    <button type="button" class="k-input-button k-button k-icon-button k-button-{size} k-button-{fillMode} k-button-{fillMode}-base">
+        <span class="k-button-icon k-icon k-i-arrow-s"></span>
+    </button>
+</span>
+```