add extractClass and classNames to omi and omio

README.CN.md

@@ -1,6 +1,6 @@
 [English](./README.md) | 简体中文 | [한국어](./README.KR.md)
 
-<p align="right">v<strong>5.0.18</strong></p>
+<p align="right">v<strong>5.0.19</strong></p>
 <p align="center"><img src="./assets/omi3.png" alt="omi" width="300"/></p>
 <h2 align="center">Omi - 下一代 Web 框架，去万物糟粕，合精华为一点点 JS</h2>
 <p align="center"><b>基于 Web Components 并使用 omio 兼容老浏览器(IE8+)</b></p>

README.KR.md

@@ -1,6 +1,6 @@
 [English](./README.md) | [简体中文](./README.CN.md) | 한국어
 
-<p align="right">v<strong>5.0.18</strong></p>
+<p align="right">v<strong>5.0.19</strong></p>
 <p align="center"><img src="./assets/omi3.png" alt="omi" width="300"/></p>
 <h2 align="center">Omi - Web Components를 사용한 차세대 웹 프레임워크. 구 버전 브라우저 지원(IE8+) by Omio. 4kb 경량의 자바스크립트 프레임워크. MVVM 하기 쉬움 </h2>
 

README.md

@@ -1,6 +1,6 @@
 English | [简体中文](./README.CN.md) | [한국어](./README.KR.md)
 
-<p align="right">v<strong>5.0.18</strong></p>
+<p align="right">v<strong>5.0.19</strong></p>
 <p align="center"><img src="./assets/omi3.png" alt="omi" width="300"/></p>
 <h2 align="center">Omi - Next generation web framework using web components with omio fallback(IE8+) in tiny js.</h2>
 

packages/omi/package.json

@@ -1,6 +1,6 @@
 {
   "name": "omi",
-  "version": "5.0.18",
+  "version": "5.0.19",
   "description": "Next generation web framework.",
   "main": "dist/omi.js",
   "jsnext:main": "dist/omi.esm.js",

packages/omi/src/class.js

@@ -0,0 +1,51 @@
+/**
+ * classNames based on https://github.com/JedWatson/classnames
+ * by Jed Watson
+ * Licensed under the MIT License
+ * https://github.com/JedWatson/classnames/blob/master/LICENSE
+ * modified by dntzhang
+ */
+
+var hasOwn = {}.hasOwnProperty;
+
+export function classNames() {
+  var classes = [];
+
+  for (var i = 0; i < arguments.length; i++) {
+    var arg = arguments[i];
+    if (!arg) continue;
+
+    var argType = typeof arg;
+
+    if (argType === 'string' || argType === 'number') {
+      classes.push(arg);
+    } else if (Array.isArray(arg) && arg.length) {
+      var inner = classNames.apply(null, arg);
+      if (inner) {
+        classes.push(inner);
+      }
+    } else if (argType === 'object') {
+      for (var key in arg) {
+        if (hasOwn.call(arg, key) && arg[key]) {
+          classes.push(key);
+        }
+      }
+    }
+  }
+
+  return classes.join(' ');
+}
+
+export function extractClass() {
+  const [props, ...args] = Array.prototype.slice.call(arguments, 0)
+  if (props.class) {
+    args.unshift(props.class)
+    delete props.class
+  } else if (props.className) {
+    args.unshift(props.className)
+    delete props.className
+  }
+  if (args.length > 0) {
+    return { class: classNames.apply(null, args) }
+  }
+}

packages/omi/src/omi.js

@@ -10,6 +10,7 @@ import { getHost } from './get-host'
 import { rpx } from './rpx'
 import { tick, nextTick } from './tick'
 import ModelView from './model-view'
+import { classNames, extractClass } from './class'
 
 const Component = WeElement
 const defineElement = define
@@ -30,12 +31,14 @@ const omi = {
   tick,
   nextTick,
   ModelView,
-  defineElement
+  defineElement,
+  classNames,
+  extractClass
 }
 
 options.root.Omi = omi
 options.root.omi = omi
-options.root.Omi.version = '5.0.18'
+options.root.Omi.version = '5.0.19'
 
 export default omi
 
@@ -55,5 +58,7 @@ export {
   tick,
   nextTick,
   ModelView,
-  defineElement
+  defineElement,
+  classNames,
+  extractClass
 }

packages/omio/package.json

@@ -1,6 +1,6 @@
 {
   "name": "omio",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "description": "Omi for old browsers(IE8+ and mobile browsers).",
   "main": "dist/omi.js",
   "jsnext:main": "dist/omi.esm.js",

packages/omio/src/class.js

@@ -0,0 +1,51 @@
+/**
+ * classNames based on https://github.com/JedWatson/classnames
+ * by Jed Watson
+ * Licensed under the MIT License
+ * https://github.com/JedWatson/classnames/blob/master/LICENSE
+ * modified by dntzhang
+ */
+
+var hasOwn = {}.hasOwnProperty;
+
+export function classNames() {
+  var classes = [];
+
+  for (var i = 0; i < arguments.length; i++) {
+    var arg = arguments[i];
+    if (!arg) continue;
+
+    var argType = typeof arg;
+
+    if (argType === 'string' || argType === 'number') {
+      classes.push(arg);
+    } else if (Array.isArray(arg) && arg.length) {
+      var inner = classNames.apply(null, arg);
+      if (inner) {
+        classes.push(inner);
+      }
+    } else if (argType === 'object') {
+      for (var key in arg) {
+        if (hasOwn.call(arg, key) && arg[key]) {
+          classes.push(key);
+        }
+      }
+    }
+  }
+
+  return classes.join(' ');
+}
+
+export function extractClass() {
+  const [props, ...args] = Array.prototype.slice.call(arguments, 0)
+  if (props.class) {
+    args.unshift(props.class)
+    delete props.class
+  } else if (props.className) {
+    args.unshift(props.className)
+    delete props.className
+  }
+  if (args.length > 0) {
+    return { class: classNames.apply(null, args) }
+  }
+}

packages/omio/src/omi.js

@@ -7,6 +7,7 @@ import options from './options'
 import { define } from './define'
 import { rpx } from './rpx'
 import ModelView from './model-view'
+import { classNames, extractClass } from './class'
 
 const WeElement = Component
 const defineElement = define
@@ -23,10 +24,12 @@ options.root.Omi = {
   define,
   rpx,
   ModelView,
-  defineElement
+  defineElement,
+  classNames,
+  extractClass
 }
 options.root.omi = Omi
-options.root.Omi.version = 'omio-1.2.2'
+options.root.Omi.version = 'omio-1.2.3'
 
 export default {
   h,
@@ -40,7 +43,9 @@ export default {
   define,
   rpx,
   ModelView,
-  defineElement
+  defineElement,
+  classNames,
+  extractClass
 }
 
 export {
@@ -55,5 +60,7 @@ export {
   define,
   rpx,
   ModelView,
-  defineElement
+  defineElement,
+  classNames,
+  extractClass
 }

packages/omiu/src/equal-space/index.js

@@ -1,4 +1,4 @@
-import { define, WeElement } from 'omi'
+import { define, WeElement, extractClass } from 'omi'
 import css from './_index.css'
 
 define('o-equal-space', class extends WeElement {
@@ -7,17 +7,15 @@ define('o-equal-space', class extends WeElement {
   }
 
   render(props) {
-    const className = 'o-equal-space' + (props.class ? (' ' + props.class) : '')
-    delete props.class
 
     let itemProps = null
     if (props.itemMargin) {
       itemProps = { style: `margin:${props.itemMargin};` }
+      delete props.itemMargin
     }
-    delete props.itemMargin
+    const cls = extractClass(props, 'o-equal-space')
 
-
-    return <ul class={className} {...props}>
+    return <ul {...cls} {...props}>
       {props.children.map((child) => {
         return <li class="item" {...itemProps}>{child}</li>
       })}