@progress/kendo-themes-html 4.41.3-dev.2

package/LICENSE.md

@@ -0,0 +1,17 @@
+# Kendo UI Themes HTML Helpers
+
+This package is part of the following suites:
+
+* [Kendo UI for Angular](http://www.telerik.com/kendo-angular-ui/)
+* [KendoReact](http://www.telerik.com/kendo-react-ui/)
+* [Kendo UI for jQuery](http://www.telerik.com/kendo-ui)
+* [UI for ASP.NET MVC](http://www.telerik.com/aspnet-mvc)
+* [UI for ASP.NET Core](http://www.telerik.com/aspnet-core-ui)
+
+## License
+
+All available Kendo UI commercial licenses may be obtained at http://www.telerik.com/purchase/kendo-ui.
+
+If you do not own a commercial license, the usage of this software shall be governed by the [Apache License, Version 2.0](http://www.apache.org/licenses/LICENSE-2.0).
+
+*Copyright © 2020 Progress Software Corporation and/or one of its subsidiaries or affiliates. All rights reserved.*

package/lib/jsx-runtime.js

@@ -0,0 +1,112 @@
+import { isFunction, isArray, isObject } from '../utils/object';
+import { classNames } from '../utils/styles';
+
+const JSX_FRAGMENT = '#fragment';
+const JSX_TEXT = '#text';
+
+const attrMap = {
+    'class': 'className',
+    themecolor: 'themeColor',
+    fillmode: 'fillMode'
+};
+
+function attrToProps( element ) {
+    let attributes = element.attributes;
+    let props = {};
+
+    Array.from(attributes).forEach((attrObj) => {
+        let attrName = attrObj.name;
+
+        if (attrMap[attrName]) {
+            attrName = attrMap[attrName];
+        }
+
+        props[ attrName ] = attrObj.value;
+    });
+
+    return props;
+}
+
+function jsx( type, config ) {
+
+    if ( isFunction( type ) ) {
+        return type( { ...type.defaultProps, ...config } );
+    }
+
+    let { children = [], ...props } = config;
+
+    if (!isArray( children) ) {
+        children = [ children ];
+    }
+
+    children.forEach( ( child, index ) => {
+        if ( !isObject( child ) ) {
+            children[index] = {
+                type: JSX_TEXT,
+                props: {
+                    text: child
+                }
+            };
+        }
+    });
+
+    return {
+        type,
+        props: {
+            ...props,
+            children
+        }
+    };
+}
+
+function jsxs( type, config ) {
+    return jsx( type, config );
+}
+
+function renderDOM( jsxNode, container = null ) {
+
+    const nodeType = jsxNode.type;
+    const { children = [], ...props } = jsxNode.props;
+    let element;
+    let textNode;
+
+    if ( nodeType === JSX_TEXT ) {
+        textNode = document.createTextNode( props.text || '' );
+
+        if ( container !== null ) {
+            container.appendChild( textNode );
+        }
+
+        return textNode;
+    }
+
+    if ( nodeType === JSX_FRAGMENT ) {
+        element = document.createDocumentFragment();
+    } else {
+        element = document.createElement(nodeType);
+    }
+
+    props.className = classNames( props.className );
+
+    for (let [ attr, val ] of Object.entries(props)) {
+        element[attr] = val;
+    }
+
+    children.forEach( child => {
+        renderDOM( child, element );
+    });
+
+    if ( container !== null ) {
+        container.appendChild( element );
+    }
+
+    return element;
+}
+
+export {
+    jsx,
+    jsxs,
+    JSX_FRAGMENT as Fragment,
+    renderDOM,
+    attrToProps
+};

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@progress/kendo-themes-html",
+  "description": "A collection of HTML helpers used for developing Kendo UI themes",
+  "version": "4.41.3-dev.2",
+  "author": "Progress",
+  "license": "Apache-2.0",
+  "keywords": [
+    "Kendo UI",
+    "Theme",
+    "HTML",
+    "Helpers"
+  ],
+  "main": "index.js",
+  "files": [
+    "dist/",
+    "src/",
+    "lib/",
+    "utils/"
+  ],
+  "homepage": "https://github.com/telerik/kendo-themes/tree/master/packages/html",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/telerik/kendo-themes.git",
+    "directory": "packages/html"
+  },
+  "bugs": {
+    "url": "https://github.com/telerik/kendo-themes/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "rollup -c",
+    "dev": "rollup -cw"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.15.5",
+    "@babel/preset-env": "^7.15.6",
+    "@babel/preset-react": "^7.14.5",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-commonjs": "^20.0.0",
+    "@rollup/plugin-node-resolve": "^13.0.5",
+    "rollup": "^2.57.0"
+  },
+  "gitHead": "dac8c87fd7d383c2f551aad1075492fe8422b173"
+}

package/src/button.jsx

@@ -0,0 +1,114 @@
+import * as styles from '../utils/styles';
+import { Component } from './component';
+import { IconStatic } from './icon.jsx';
+
+class Button extends Component {
+
+    init() {
+        this._props.text = this.element.innerHTML;
+    }
+
+    render() {
+        return <ButtonStatic {...this.props} />;
+    }
+}
+
+function ButtonStatic(props) {
+    const {
+        text,
+        className: ownClassName,
+        type,
+
+        size,
+        rounded,
+        shape,
+
+        fillMode,
+        themeColor,
+
+        icon,
+
+        aria,
+        legacy
+    } = props;
+
+    let buttonClasses = [
+        ownClassName,
+        'k-button',
+        styles.sizeClass( size, 'k-button' ),
+        styles.roundedClass( rounded ),
+        styles.shapeClass( shape, 'k-button' ),
+        styles.fillModeClass( fillMode, 'k-button' ),
+        styles.themeColorClass( fillMode, themeColor, 'k-button' )
+    ];
+
+    let legacyClasses = [
+        ownClassName,
+        'k-button',
+        {
+            'k-primary': themeColor === 'primary',
+            'k-flat': fillMode === 'flat',
+            'k-outline': fillMode === 'outline'
+        }
+    ];
+
+    let ariaAttr = aria
+        ? {}
+        : {};
+
+    if (legacy) {
+        return (
+            <button type={type} className={legacyClasses} {...ariaAttr}>
+                <IconStatic name={icon} />
+                { text }
+            </button>
+        );
+    }
+
+    return (
+        <button type={type} className={buttonClasses} {...ariaAttr}>
+            <IconStatic className="k-button-icon" name={icon} />
+            <span className="k-button-text">{ text }</span>
+        </button>
+    );
+}
+
+ButtonStatic.defaultProps = {
+    text: '',
+    icon: '',
+
+    className: '',
+    type: 'button',
+
+    size: 'medium',
+    rounded: 'medium',
+    shape: 'rectangle',
+
+    fillMode: 'solid',
+    themeColor: 'base',
+
+    aria: false,
+    legacy: false
+};
+
+ButtonStatic.propTypes = {
+    text: typeof '',
+    icon: typeof '',
+
+    className: typeof '',
+    type: typeof [ 'button', 'submit', 'reset' ],
+
+    size: typeof [ 'none', 'small', 'medium', 'large' ],
+    rounded: typeof [ 'none', '0', 'small', 'medium', 'large', 'pill', 'circle' ],
+    shape: typeof [ 'none', 'rectangle', 'square' ],
+
+    fillMode: typeof [ 'none', 'solid', 'flat', 'outline' ],
+    themeColor: typeof [ 'none', 'surface', 'base', 'primary' ],
+
+    aria: typeof false,
+    legacy: typeof false,
+
+    htmlAttributes: typeof []
+};
+
+export { Button, ButtonStatic };

package/src/component.js

@@ -0,0 +1,43 @@
+import { isFunction } from '../utils/object';
+import { renderDOM, attrToProps } from '../lib/jsx-runtime';
+
+const globalDefaultProps = {
+    legacy: true,
+
+    aria: false,
+    disabled: false,
+};
+
+class Component {
+
+    get element() {
+        return this._element;
+    }
+
+    get props() {
+        return this._props;
+    }
+
+    constructor( element ) {
+
+        this._element = element;
+        this._props = { ...globalDefaultProps, ...attrToProps( element ) };
+
+        delete this._props.is;
+
+        if (isFunction( this.init )) {
+            this.init();
+        }
+
+        if (isFunction( this.render )) {
+            let htmlObj = this.render();
+            let htmlFragment = renderDOM(htmlObj);
+            let html = htmlFragment.outerHTML;
+
+            this.element.outerHTML = html;
+        }
+    }
+
+}
+
+export { Component };

package/src/icon.jsx

@@ -0,0 +1,37 @@
+import { Component } from './component';
+
+class Icon extends Component {
+    render() {
+        return <IconStatic {...this.props} />;
+    }
+}
+
+function IconStatic(props) {
+    const {
+        name,
+        className: ownClassName
+    } = props;
+
+    let iconClassName = [
+        ownClassName,
+        'k-icon',
+        `k-i-${name}`
+    ];
+
+    return (
+        <>
+            { name && <span className={iconClassName}></span> }
+        </>
+    );
+}
+
+IconStatic.defaultProps = {
+    name: '',
+    className: ''
+};
+IconStatic.propTypes = {
+    name: typeof '',
+    className: typeof ''
+};
+
+export { Icon, IconStatic };

package/src/index.js

@@ -0,0 +1,20 @@
+/* eslint-disable no-new */
+/* global kendo */
+import { isFunction } from '../utils/object';
+import { Button } from './button.jsx';
+
+
+export {
+    Button
+};
+
+window.addEventListener('DOMContentLoaded', () => {
+    document.querySelectorAll('[is]').forEach( element => {
+        const componentName = element.getAttribute('is');
+        const component = kendo.Html[componentName];
+
+        if (isFunction( component )) {
+            new component( element );
+        }
+    });
+});

package/utils/object.js

@@ -0,0 +1,28 @@
+function isString( obj ) {
+    return typeof obj === 'string';
+}
+
+function isFunction( obj ) {
+    return typeof obj === 'function';
+}
+
+function isElement( obj ) {
+    return obj instanceof HTMLElement;
+}
+
+function isArray( obj ) {
+    return Array.isArray( obj );
+}
+
+function isObject( obj ) {
+    return typeof obj === 'object';
+}
+
+
+export {
+    isString,
+    isFunction,
+    isElement,
+    isArray,
+    isObject
+};

package/utils/styles.js

@@ -0,0 +1,101 @@
+import { isString, isObject } from './object';
+
+const SPACE = ' ';
+
+const sizeMap = {
+    'small': 'sm',
+    'medium': 'md',
+    'large': 'lg'
+};
+
+const roundedMap = {
+    'small': 'sm',
+    'medium': 'md',
+    'large': 'lg'
+};
+
+function lookup( map, key ) {
+    let result = map[key];
+
+    if (result) {
+        return result;
+    }
+
+    return key;
+}
+
+function sizeClass( size, prefix ) {
+    if ( size === 'none' ) {
+        return '';
+    }
+
+    return `${prefix}-${lookup(sizeMap, size)}`;
+}
+
+function roundedClass( rounded ) {
+    if ( rounded === 'none' ) {
+        return '';
+    }
+
+    return `k-rounded-${lookup(roundedMap, rounded)}`;
+}
+
+function shapeClass( shape, prefix ) {
+    if ( shape === 'none' ) {
+        return '';
+    }
+
+    return `${prefix}-${shape}`;
+}
+
+function fillModeClass( fill, prefix ) {
+    if ( fill === 'none' ) {
+        return '';
+    }
+
+    return `${prefix}-${fill}`;
+}
+
+function themeColorClass( fill, color, prefix ) {
+    if ( fill === 'none' || color === 'none' ) {
+        return '';
+    }
+
+    return `${prefix}-${fill}-${color}`;
+}
+
+function classNames( ...args ) {
+
+    /* eslint-disable arrow-body-style, no-nested-ternary */
+    let result = new Set();
+    let temp = args.flat().filter( arg => arg !== true && Boolean( arg ) );
+
+    temp.forEach( className => {
+        if ( isString( className ) ) {
+            className.split( SPACE ).forEach( part => result.add( part ) );
+            return;
+        }
+
+        if ( isObject( className ) ) {
+            for (let [ key, val ] of Object.entries( className )) {
+                if (val === true) {
+                    key.split( SPACE ).forEach( part => result.add( part ) );
+                }
+            }
+        }
+    });
+
+    return [ ...result ].join( SPACE );
+    /* eslint-enable */
+}
+
+
+export {
+    sizeClass,
+    roundedClass,
+    shapeClass,
+    fillModeClass,
+    themeColorClass,
+
+    classNames
+};