shopee-ui v1.3.2-beta.9

Shopee UI

A set of components written with Vue2.0

Quick Start

Install

npm install shopee-ui

Then,

import ShopeeUI from 'shopee-ui';
import Vue from 'vue';
// i18n, English for default, you need to add json-loader if useing webpack
import zhLang from 'shopee-ui/src/locale/lang/zh-CN';
// import styles of shopee-ui
import 'shopee-ui/lib/index.css';
Vue.use(ShopeeUI);
ShopeeUI.locale(zhLang);

...

Contributing Guide

Development Setup

• Install dependencies

npm install

• Create new component

node bin/new.js <component-name> <export-component>

eg. It export three components from checkbox component, `Checkbox`, `CheckboxGroup`, `CheckboxButton`, so the command is:

node bin/new.js checkbox checkbox,checkbox-group,checkbox-button

• Setup Development Environment

npm run dev

• i18n

node bin/new-transify-key.js //add transify key

the language file as below:

{
  "shopee": {
    "date-picker": {
      "weeks": {
        "sun": "S",
        "mon": "M",
        "tue": "T",
        "wed": "W",
        "thu": "T",
        "fri": "F",
        "sat": "S"
      },
      "months": {
        "normal": {
          "jan": "January",
          "feb": "February",
          "mar": "March",
          "apr": "April",
          "may": "May",
          "jun": "June",
          "jul": "July",
          "aug": "August",
          "sep": "September",
          "oct": "October",
          "nov": "November",
          "dec": "December"
        },
        "short": {
          "jan": "Jan",
          "feb": "Feb",
          "mar": "Mar",
          "apr": "Apr",
          "may": "May",
          "jun": "Jun",
          "jul": "Jul",
          "aug": "Aug",
          "sep": "Sep",
          "oct": "Oct",
          "nov": "Nov",
          "dec": "Dec"
        }
      },
      "confirm": "OK",
      "dateFormat": "YYYY-MM-DD",
      "datetimeFormat": "YYYY-MM-DD HH:mm"
    },
    "modal": {
      "confirm": "Confirm",
      "cancel": "Cancel"
    }
  }
}

You should group translation of each component by the comopnent name in the json.

• Run lint

npm run eslint:all // run eslint of all components
npm run eslint:single <component-name> // run eslint of single component
npm run sass-lint // run sass-lint of all components
npm run lint // run eslint:all and sass-lint

• Run test

npm run test <component-name> // run test of single component
npm run test // run test of the whole library

• Build

sh build/build.sh <component-name> // build single component
sh build/buils.sh // build the whole library

• Publish

lerna publish --force-publish=<component> // publish the specified component
lerna publish // publish all components in packages