[improvement] use component name (#2450)

packages/utils/use/bem.js

@@ -0,0 +1,40 @@
+/**
+ * bem helper
+ * b() // 'button'
+ * b('text') // 'button__text'
+ * b({ disabled }) // 'button button--disabled'
+ * b('text', { disabled }) // 'button__text button__text--disabled'
+ * b(['disabled', 'primary']) // 'button button--disabled button--primary'
+ */
+
+const ELEMENT = '__';
+const MODS = '--';
+
+const join = (name, el, symbol) => (el ? name + symbol + el : name);
+
+const prefix = (name, mods) => {
+  if (typeof mods === 'string') {
+    return join(name, mods, MODS);
+  }
+
+  if (Array.isArray(mods)) {
+    return mods.map(item => prefix(name, item));
+  }
+
+  const ret = {};
+  mods &&
+    Object.keys(mods).forEach(key => {
+      ret[name + MODS + key] = mods[key];
+    });
+  return ret;
+};
+
+export default name => (el, mods) => {
+  if (el && typeof el !== 'string') {
+    mods = el;
+    el = '';
+  }
+  el = join(name, el, ELEMENT);
+
+  return mods ? [el, prefix(el, mods)] : el;
+};

packages/utils/use/index.js

@@ -0,0 +1,7 @@
+import useBem from './bem';
+import useSfc from './sfc';
+
+export default function (name) {
+  name = 'van-' + name;
+  return [useSfc(name), useBem(name)];
+}

packages/utils/use/sfc.js

@@ -0,0 +1,39 @@
+/**
+ * Create a basic component with common options
+ */
+import '../../locale';
+import { camelize } from '..';
+
+const arrayProp = {
+  type: Array,
+  default: () => []
+};
+
+const numberProp = {
+  type: Number,
+  default: 0
+};
+
+function defaultProps(props) {
+  Object.keys(props).forEach(key => {
+    if (props[key] === Array) {
+      props[key] = arrayProp;
+    } else if (props[key] === Number) {
+      props[key] = numberProp;
+    }
+  });
+}
+
+function install(Vue) {
+  const { name } = this;
+  Vue.component(name, this);
+  Vue.component((camelize(`-${name}`)), this);
+}
+
+export default name => sfc => {
+  sfc.name = name;
+  sfc.install = install;
+  sfc.props && defaultProps(sfc.props);
+
+  return sfc;
+};