init

.gitignore

@@ -0,0 +1,10 @@
+*.log*
+.cache
+.DS_Store
+.idea
+packages/**/lib
+lib/*
+!lib/index.js
+!lib/style.css
+node_modules
+example/dist

build/bin/build-all.js

@@ -0,0 +1,25 @@
+'use strict';
+
+const components = require('../../components.json');
+const execSync = require('child_process').execSync;
+const existsSync = require('fs').existsSync;
+const path = require('path');
+
+let componentPaths = [];
+
+delete components.font;
+
+Object.keys(components).forEach(key => {
+  const filePath = path.join(__dirname, `../../packages/${key}/cooking.conf.js`);
+
+  if (existsSync(filePath)) {
+    componentPaths.push(`packages/${key}/cooking.conf.js`);
+  }
+});
+
+const paths = componentPaths.join(',');
+const cli = `node_modules/.bin/cooking build -c ${paths} -p`;
+
+execSync(cli, {
+  stdio: 'inherit'
+});

build/bin/build-entry.js

@@ -0,0 +1,84 @@
+var Components = require('../../components.json');
+var fs = require('fs');
+var render = require('json-templater/string');
+var uppercamelcase = require('uppercamelcase');
+var path = require('path');
+
+var OUTPUT_PATH = path.join(__dirname, '../../src/index.js');
+var IMPORT_TEMPLATE = 'import {{name}} from \'../packages/{{package}}/index.js\';';
+var ISNTALL_COMPONENT_TEMPLATE = '  Vue.component({{name}}.name, {{name}});';
+var MAIN_TEMPLATE = `{{include}}
+import '../src/assets/font/iconfont.css';
+
+const install = function(Vue) {
+  if (install.installed) return;
+
+{{install}}
+  Vue.use(InfiniteScroll);
+  Vue.use(Lazyload, {
+    loading: require('./assets/loading-spin.svg'),
+    try: 3
+  });
+
+  Vue.$messagebox = Vue.prototype.$messagebox = MessageBox;
+  Vue.$toast = Vue.prototype.$toast = Toast;
+  Vue.$indicator = Vue.prototype.$indicator = Indicator;
+};
+
+// auto install
+if (typeof window !== 'undefined' && window.Vue) {
+  install(window.Vue);
+};
+
+module.exports = {
+  install,
+  version: '{{version}}',
+{{list}}
+};
+`;
+
+delete Components.font;
+
+var ComponentNames = Object.keys(Components);
+
+var includeComponentTemplate = [];
+var installTemplate = [];
+var listTemplate = [];
+
+ComponentNames.forEach(name => {
+  var componentName = uppercamelcase(name);
+
+  includeComponentTemplate.push(render(IMPORT_TEMPLATE, {
+    name: componentName,
+    package: name
+  }));
+
+  if ([
+      // directives
+    'InfiniteScroll',
+    'Lazyload',
+
+      // services
+    'MessageBox',
+    'Toast',
+    'Indicator'
+  ].indexOf(componentName) === -1) {
+    installTemplate.push(render(ISNTALL_COMPONENT_TEMPLATE, {
+      name: componentName,
+      component: name
+    }));
+  }
+
+  listTemplate.push(`  ${componentName}`);
+});
+
+var template = render(MAIN_TEMPLATE, {
+  include: includeComponentTemplate.join('\n'),
+  install: installTemplate.join('\n'),
+  version: process.env.VERSION || require('../../package.json').version,
+  list: listTemplate.join(',\n')
+});
+
+fs.writeFileSync(OUTPUT_PATH, template);
+console.log('[build entry] DONE:', OUTPUT_PATH);
+

build/config.js

@@ -0,0 +1,30 @@
+var Components = require('../components.json');
+var path = require('path');
+var dependencies = require('../package.json').dependencies;
+var externals = {};
+
+Object.keys(Components).forEach(function(key) {
+  externals[`oxygen/packages/${key}/index.js`] = `oxygen/lib/${key}`;
+  externals[`oxygen/packages/${key}/style.css`] = `oxygen/lib/${key}/style.css`;
+});
+Object.keys(dependencies).forEach(function(key) {
+  externals[key] = key;
+});
+exports.externals = Object.assign({
+  vue: {
+    root: 'Vue',
+    commonjs: 'vue',
+    commonjs2: 'vue',
+    amd: 'vue'
+  }
+}, externals);
+
+exports.alias = {
+  'oxygen': path.join(__dirname, '..'),
+  'src': path.join(__dirname, '../src')
+};
+
+exports.jsexclude = /node_modules|lib/;
+
+exports.extends = ['vue2', 'buble'];
+

build/release.sh

@@ -0,0 +1,23 @@
+set -e
+echo "[Mint UI for Vue 2.0]Enter release version: "
+read VERSION
+
+read -p "Releasing $VERSION - are you sure? (y/n)" -n 1 -r
+echo    # (optional) move to a new line
+if [[ $REPLY =~ ^[Yy]$ ]]
+then
+  echo "Releasing $VERSION ..."
+
+  # build
+  VERSION=$VERSION npm run dist
+
+  # commit
+  git add -A
+  git commit -m "[build] $VERSION"
+  npm version $VERSION --message "[release] $VERSION"
+
+  # publish
+  git push eleme refs/tags/v$VERSION
+  git push eleme master
+  npm publish
+fi

components.json

@@ -0,0 +1,3 @@
+{
+  "cell": "./packages/cell/index.js"
+}

lerna.json

@@ -0,0 +1,4 @@
+{
+  "lerna": "2.0.0-beta.31",
+  "version": "independent"
+}

package.json

@@ -0,0 +1,62 @@
+{
+  "name": "oxygen",
+  "version": "0.0.1",
+  "description": "有赞vue wap组件库",
+  "main": "lib/oxygen.common.js",
+  "style": "lib/style.css",
+  "files": [
+    "lib",
+    "src",
+    "packages"
+  ],
+  "scripts": {
+    "dev": "npm run bootstrap && npm run build:entry",
+    "bootstrap": "npm i",
+    "dist": "npm run clean && npm run build:entry",
+    "deploy": "npm run build:entry",
+    "build:entry": "node build/bin/build-entry",
+    "pub": "sh build/release.sh",
+    "pub:all": "node build/bin/build-all.js && lerna publish",
+    "clean": "rimraf lib && rimraf packages/*/lib"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@gitlab.qima-inc.com:fe/oxygen.git"
+  },
+  "keywords": [
+    "youzan",
+    "vue"
+  ],
+  "author": "youzanfe",
+  "license": "ISC",
+  "dependencies": {
+    "array-find-index": "^1.0.2",
+    "raf.js": "0.0.4",
+    "wind-dom": "0.0.3"
+  },
+  "devDependencies": {
+    "css-loader": "^0.25.0",
+    "extract-text-webpack-plugin": "^1.0.1",
+    "fastclick": "^1.0.6",
+    "file-loader": "^0.9.0",
+    "gh-pages": "^0.11.0",
+    "html-loader": "^0.4.3",
+    "html-webpack-plugin": "^2.22.0",
+    "json-loader": "^0.5.4",
+    "json-templater": "^1.0.4",
+    "lerna": "2.0.0-beta.31",
+    "my-local-ip": "^1.0.0",
+    "postcss": "^5.2.0",
+    "postcss-loader": "^0.13.0",
+    "rimraf": "^2.5.4",
+    "style-loader": "^0.13.1",
+    "uppercamelcase": "^1.1.0",
+    "url-loader": "^0.5.7",
+    "vue": "^2.1.7",
+    "vue-loader": "^9.5.3",
+    "vue-router": "^2.0.0",
+    "webpack": "^1.13.2",
+    "webpack-dev-server": "^1.15.1",
+    "webpack-shell-plugin": "^0.4.3"
+  }
+}

packages/cell/cooking.conf.js

@@ -0,0 +1,19 @@
+var cooking = require('cooking');
+var path = require('path');
+var config = require('../../build/config');
+
+cooking.set({
+  entry: {
+    index: path.join(__dirname, 'index.js')
+  },
+  dist: path.join(__dirname, 'lib'),
+  template: false,
+  format: 'umd',
+  moduleName: 'OxygenCell',
+  extractCSS: 'style.css',
+  extends: config.extends,
+  alias: config.alias,
+  externals: config.externals
+});
+
+module.exports = cooking.resolve();

packages/cell/index.js

@@ -0,0 +1,2 @@
+import Cell from './src/cell.vue';
+module.exports = Cell;

packages/cell/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "oxygen-cell",
+  "description": "",
+  "version": "0.1.5",
+  "main": "lib/index.js",
+  "author": "elemefe",
+  "dependencies": {}
+}

packages/cell/src/cell.vue

@@ -0,0 +1,204 @@
+<template>
+  <a class="oxygen-cell" :href="href">
+    <span class="oxygen-cell-mask" v-if="isLink"></span>
+    <div class="oxygen-cell-left">
+      <slot name="left"></slot>
+    </div>
+    <div class="oxygen-cell-wrapper">
+      <div class="oxygen-cell-title">
+        <slot name="icon">
+          <i v-if="icon" class="oxygenui" :class="'oxygenui-' + icon"></i>
+        </slot>
+        <slot name="title">
+          <span class="oxygen-cell-text" v-text="title"></span>
+          <span v-if="label" class="oxygen-cell-label" v-text="label"></span>
+        </slot>
+      </div>
+      <div class="oxygen-cell-value" :class="{ 'is-link' : isLink }">
+        <slot>
+          <span v-text="value"></span>
+        </slot>
+      </div>
+    </div>
+    <div class="oxygen-cell-right">
+      <slot name="right"></slot>
+    </div>
+    <i v-if="isLink" class="oxygen-cell-allow-right"></i>
+  </a>
+</template>
+
+<script>
+if (process.env.NODE_ENV === 'component') {
+  require('oxygen/packages/font/style.css');
+}
+
+/**
+ * o2-cell
+ * @module components/cell
+ * @desc 单元格
+ * @param {string|Object} [to] - 跳转链接，使用 vue-router 的情况下 to 会传递给 router.push，否则作为 a 标签的 href 属性处理
+ * @param {string} [icon] - 图标，提供 more, back，或者自定义的图标（传入不带前缀的图标类名，最后拼接成 .oxygenui-xxx）
+ * @param {string} [title] - 标题
+ * @param {string} [label] - 备注信息
+ * @param {boolean} [is-link=false] - 可点击的链接
+ * @param {string} [value] - 右侧显示文字
+ * @param {slot} - 同 value, 会覆盖 value 属性
+ * @param {slot} [title] - 同 title, 会覆盖 title 属性
+ * @param {slot} [icon] - 同 icon, 会覆盖 icon 属性，例如可以传入图片
+ *
+ * @example
+ * <o2-cell title="标题文字" icon="back" is-link value="描述文字"></o2-cell>
+ * <o2-cell title="标题文字" icon="back">
+ *   <div slot="value">描述文字啊哈</div>
+ * </o2-cell>
+ */
+export default {
+  name: 'o2-cell',
+
+  props: {
+    to: [String, Object],
+    icon: String,
+    title: String,
+    label: String,
+    isLink: Boolean,
+    value: {}
+  },
+
+  computed: {
+    href() {
+      if (this.to && !this.added && this.$router) {
+        const resolved = this.$router.match(this.to);
+        if (!resolved.matched.length) return this.to;
+
+        this.$nextTick(() => {
+          this.added = true;
+          this.$el.addEventListener('click', this.handleClick);
+        });
+        return resolved.path;
+      }
+      return this.to;
+    }
+  },
+
+  methods: {
+    handleClick($event) {
+      $event.preventDefault();
+      this.$router.push(this.href);
+    }
+  }
+};
+</script>
+
+<style lang="css">
+  @import "../../../src/style/var.css";
+
+  @component-namespace oxygen {
+    @component cell {
+      background-color: $color-white;
+      box-sizing: border-box;
+      color: inherit;
+      min-height: 48px;
+      display: block;
+      overflow: hidden;
+      position: relative;
+      text-decoration: none;
+
+      &:first-child {
+        .oxygen-cell-wrapper {
+          background-origin: border-box;
+        }
+      }
+
+      &:last-child {
+        background-image: linear-gradient(0deg, $color-grey, $color-grey 50%, transparent 50%);
+        background-size: 100% 1px;
+        background-repeat: no-repeat;
+        background-position: bottom;
+      }
+
+      @descendent wrapper {
+        background-image:linear-gradient(180deg, $color-grey, $color-grey 50%, transparent 50%);
+        background-size: 120% 1px;
+        background-repeat: no-repeat;
+        background-position: top left;
+        background-origin: content-box;
+        align-items: center;
+        box-sizing: border-box;
+        display: flex;
+        font-size: 16px;
+        line-height: 1;
+        min-height: inherit;
+        overflow: hidden;
+        padding: 0 10px;
+        width: 100%;
+      }
+
+      @descendent mask {
+        &::after {
+          background-color: #000;
+          content: " ";
+          opacity: 0;
+          position: absolute 0;
+        }
+
+        &:active::after {
+          opacity: .1;
+        }
+      }
+
+      @descendent text {
+        vertical-align: middle;
+      }
+
+      @descendent label {
+        color: #888;
+        display: block;
+        font-size: 12px;
+        margin-top: 6px;
+      }
+
+      img {
+        vertical-align: middle;
+      }
+
+      @descendent title {
+        flex: 1;
+      }
+
+      @descendent value {
+        color: $cell-value-color;
+        display: flex;
+        align-items: center;
+
+        @when link {
+          margin-right: 24px;
+        }
+      }
+
+      @descendent left {
+        position: absolute;
+        height: 100%;
+        left: 0;
+        transform: translate3d(-100%, 0, 0);
+      }
+
+      @descendent right {
+        position: absolute;
+        height: 100%;
+        right: 0;
+        top: 0;
+        transform: translate3d(100%, 0, 0);
+      }
+
+      @descendent allow-right::after {
+        border: solid 2px $border-color;
+        border-bottom-width: 0;
+        border-left-width: 0;
+        content: " ";
+        position: absolute 50% 20px * *;
+        size: 5px;
+        transform: translateY(-50%) rotate(45deg);
+      }
+    }
+  }
+</style>

src/index.js

@@ -0,0 +1,51 @@
+import Button from '../packages/button/index.js';
+import Cell from '../packages/cell/index.js';
+import Field from '../packages/field/index.js';
+import Popup from '../packages/popup/index.js';
+import Picker from '../packages/picker/index.js';
+import Toast from '../packages/toast/index.js';
+import Indicator from '../packages/indicator/index.js';
+import MessageBox from '../packages/message-box/index.js';
+import Lazyload from '../packages/lazyload/index.js';
+import Spinner from '../packages/spinner/index.js';
+import '../src/assets/font/iconfont.css';
+
+const install = function(Vue) {
+  if (install.installed) return;
+
+  Vue.component(Button.name, Button);
+  Vue.component(Cell.name, Cell);
+  Vue.component(Field.name, Field);
+  Vue.component(Popup.name, Popup);
+  Vue.component(Picker.name, Picker);
+  Vue.component(Spinner.name, Spinner);
+  Vue.use(InfiniteScroll);
+  Vue.use(Lazyload, {
+    loading: require('./assets/loading-spin.svg'),
+    try: 3
+  });
+
+  Vue.$messagebox = Vue.prototype.$messagebox = MessageBox;
+  Vue.$toast = Vue.prototype.$toast = Toast;
+  Vue.$indicator = Vue.prototype.$indicator = Indicator;
+};
+
+// auto install
+if (typeof window !== 'undefined' && window.Vue) {
+  install(window.Vue);
+};
+
+module.exports = {
+  install,
+  version: '1.0.0',
+  Button,
+  Cell,
+  Field,
+  Popup,
+  Picker,
+  Toast,
+  Indicator,
+  MessageBox,
+  Lazyload,
+  Spinner
+};

src/style/empty.css

@@ -0,0 +1 @@
+

src/style/var.css

@@ -0,0 +1,10 @@
+/* UI标准色 */
+$o2-c-orange: #f60;
+$o2-c-green: #06bf04;
+$o2-c-red: #ed5050;
+$o2-c-black: #333;
+$o2-c-gray-darker: #666;
+$o2-c-gray-dark: #999;
+$o2-c-gray: #c9c9c9;
+$o2-c-gray-light: #e5e5e5;
+$o2-c-background: #f8f8f8;