balm-ui-lite - npm Package Compare versions

Comparing version 0.5.21 to 0.6.0-alpha

CHANGELOG.md

 # [BalmUI Lite](http://balmjs.com/ui-vue-lite/)
 
+## 0.6.0 (Coming Up)
+
+🎉 __New feature: Individual Components__
+
+### Components
+
+- `<ui-card-text>` rename to `<ui-card-body>`
+- `<ui-item-textbody>` rename to `<ui-item-body>`
+- add `<ui-item-primary>` & `<ui-item-secondary>`
+- remove `<ui-loading>`
+- add `<ui-progress>` & `<ui-spinner>`
+
+---
+
 ## 0.5.21 (2017.11.24)
@@ -4,0 +18,0 @@

package.json

 {
   "name": "balm-ui-lite",
-  "version": "0.5.21",
+  "version": "0.6.0-alpha",
   "description": "Material Design Lite + Vue",
@@ -19,4 +19,8 @@ "homepage": "http://balmjs.com/ui-vue-lite/",
   "files": [
+    "src",
     "dist",
-    "src"
+    "components",
+    "helpers",
+    "mixins",
+    "plugins"
   ],
@@ -43,3 +47,3 @@ "main": "dist/js/balm-ui-lite.js",
     "babel-preset-stage-2": "^6.24.1",
-    "balm": "^0.11.0",
+    "balm": "^0.11.1",
     "core-js": "^2.5.1",
@@ -51,3 +55,3 @@ "gulp": "^3.9.1",
     "prismjs": "^1.8.4",
-    "vue": "^2.5.8",
+    "vue": "^2.5.9",
     "vue-i18n": "^7.3.2",
@@ -57,7 +61,7 @@ "vue-loader": "^13.5.0",
     "vue-router": "^3.0.1",
-    "vue-template-compiler": "^2.5.8"
+    "vue-template-compiler": "^2.5.9"
   },
   "dependencies": {
-    "flatpickr": "^4.1.2"
+    "flatpickr": "^4.1.4"
   }
 }

src/scripts/helpers/index.js

 // BalmUI helpers
+import getType from './typeof';
 
-const getType = any => Object.prototype.toString.call(any).replace(/\[object\s(.*)\]/, '$1').toLowerCase();
-
 // Boolean, null, undefined, Number, String, and Symbol
@@ -73,8 +72,2 @@
 
-const generateRandomAlphaNum = len => {
-  var rdmString = '';
-  for (; rdmString.length < len; rdmString += Math.random().toString(36).substr(2));
-  return rdmString.substr(0, len);
-};
-
 export {
@@ -92,4 +85,3 @@ getType,
   jsonEqual,
-  detectIE,
-  generateRandomAlphaNum
+  detectIE
 };

src/scripts/index.js

@@ -50,5 +50,5 @@ /**
  */
-import UiBadge from './components/badge';
-import UiBadgeLink from './components/badge-link';
-import UiButton from './components/button';
+import UiBadge from './components/common/badge';
+import UiBadgeLink from './components/common/badge-link';
+import UiButton from './components/common/button';
 import UiChip from './components/chip/chip';
@@ -58,8 +58,7 @@ import UiChipText from './components/chip/chip-text';
 import UiChipContact from './components/chip/chip-contact';
-import UiLoading from './components/loading';
 import UiMenu from './components/menu/menu';
 import UiMenuItem from './components/menu/menuitem';
-import UiTooltip from './components/tooltip';
-import UiDivider from './components/divider';
-import UiIcon from './components/icon';
+import UiTooltip from './components/common/tooltip';
+import UiDivider from './components/common/divider';
+import UiIcon from './components/common/icon';
 /**
@@ -80,2 +79,7 @@ * Form
 /**
+ * Loading
+ */
+import UiProgress from './components/loading/progress';
+import UiSpinner from './components/loading/spinner';
+/**
  * Data
@@ -85,6 +89,6 @@ */
 import UiCardTitle from './components/card/card-title';
+import UiCardMedia from './components/card/card-media';
+import UiCardBody from './components/card/card-body';
 import UiCardActions from './components/card/card-actions';
 import UiCardMenu from './components/card/card-menu';
-import UiCardMedia from './components/card/card-media';
-import UiCardText from './components/card/card-text';
 import UiList from './components/list/list';
@@ -97,3 +101,3 @@ import UiItem from './components/list/item';
 import UiItemAction from './components/list/item-action';
-import UiItemTextbody from './components/list/item-textbody';
+import UiItemBody from './components/list/item-body';
 import UiTable from './components/data/table';
@@ -108,3 +112,3 @@ import UiPagination from './components/data/pagination';
 import UiDialogActions from './components/dialog/dialog-actions';
-import UiSnackbar from './components/snackbar';
+import UiSnackbar from './components/common/snackbar';
 /**
@@ -119,2 +123,3 @@ * Plugins
 
+const version = require('../../package.json').version;
 const helpers = Object.assign({}, BalmUI_Helpers);
@@ -151,3 +156,2 @@ const mixins = Object.assign({}, BalmUI_Mixins);
   UiChipContact,
-  UiLoading,
   UiMenu,
@@ -170,2 +174,5 @@ UiMenuItem,
   UiRangepicker,
+  // Loading
+  UiProgress,
+  UiSpinner,
   // Data
@@ -177,3 +184,3 @@ UiCard,
   UiCardMedia,
-  UiCardText,
+  UiCardBody,
   UiList,
@@ -186,3 +193,3 @@ UiItem,
   UiItemAction,
-  UiItemTextbody,
+  UiItemBody,
   UiTable,
@@ -217,3 +224,11 @@ UiPagination,
 
-const BalmUI = Object.assign({}, { helpers }, { mixins }, { components }, { plugins }, registers);
+const BalmUI = Object.assign(
+  {},
+  { version },
+  { helpers },
+  { mixins },
+  { components },
+  { plugins },
+  registers
+);
 
@@ -230,75 +245,2 @@ // Auto install in dist mode
 
-export {
-  // Layout
-  UiLayout,
-  UiLayoutHeader,
-  UiLayoutHeaderRow,
-  UiLayoutTitle,
-  UiLayoutDrawer,
-  UiLayoutContent,
-  UiLayoutSpacer,
-  UiLayoutTabBar,
-  UiLayoutTab,
-  UiLayoutTabPanel,
-  UiNav,
-  UiNavLink,
-  UiGrid,
-  UiCell,
-  UiTabs,
-  UiTabBar,
-  UiTab,
-  UiPanel,
-  // Common
-  UiBadge,
-  UiBadgeLink,
-  UiButton,
-  UiChip,
-  UiChipText,
-  UiChipAction,
-  UiChipContact,
-  UiLoading,
-  UiMenu,
-  UiMenuItem,
-  UiTooltip,
-  UiDivider,
-  UiIcon,
-  // Form
-  UiSlider,
-  UiCheckbox,
-  UiRadio,
-  UiIconToggle,
-  UiSwitch,
-  UiTextfield,
-  UiSelect,
-  UiAutocomplete,
-  UiDatepicker,
-  UiFileupload,
-  UiRangepicker,
-  // Data
-  UiCard,
-  UiCardTitle,
-  UiCardActions,
-  UiCardMenu,
-  UiCardMedia,
-  UiCardText,
-  UiList,
-  UiItem,
-  UiItemAvatar,
-  UiItemIcon,
-  UiItemSubtitle,
-  UiItemInfo,
-  UiItemAction,
-  UiItemTextbody,
-  UiTable,
-  UiPagination,
-  // Popup
-  UiDialog,
-  UiDialogTitle,
-  UiDialogContent,
-  UiDialogActions,
-  UiSnackbar,
-  // Others
-  helpers,
-  mixins,
-  plugins
-};
+export { helpers, mixins };

src/scripts/mixins/form-validator.js

@@ -1,2 +0,2 @@
-import { isUndefined } from '../helpers';
+import getType from '../helpers/typeof';
 
@@ -82,11 +82,14 @@ /**
 
-      const VALIDATION = Object.assign({}, this.$options.validation, extraRules) || {};
+      const VALIDATION =
+        Object.assign({}, this.$options.validation, extraRules) || {};
       const RULES = this.$options.validationRules || {};
 
       for (let key in VALIDATION) {
-        if (!isUndefined(formData[key])) {
+        if (getType(formData[key]) !== 'undefined') {
           let value = formData[key];
           let field = VALIDATION[key];
 
-          let validators = field.validator.split(',').map(validator => validator.trim());
+          let validators = field.validator
+            .split(',')
+            .map(validator => validator.trim());
           let label = field.label || '';
@@ -113,3 +116,6 @@
 
-                let message = curValidator.message.replace(LABEL_PLACEHOLDER, label);
+                let message = curValidator.message.replace(
+                  LABEL_PLACEHOLDER,
+                  label
+                );
                 if (!result.message) {
@@ -122,3 +128,5 @@ result.message = message;
             } else {
-              console.warn(`The '${key}' is missing a validation rule: [${curRuleName}]`);
+              console.warn(
+                `The '${key}' is missing a validation rule: [${curRuleName}]`
+              );
             }
@@ -125,0 +133,0 @@ }

src/scripts/mixins/index.js

 import formValidator from './form-validator';
 
-export {
-  formValidator
-};
+export { formValidator };

src/scripts/plugins/alert.js

@@ -0,1 +1,2 @@
+import getType from '../helpers/typeof';
 import UiDialog from '../components/dialog/dialog';
@@ -5,4 +6,3 @@ import UiDialogTitle from '../components/dialog/dialog-title';
 import UiDialogActions from '../components/dialog/dialog-actions';
-import UiButton from '../components/button';
-import {isString, isObject, isFunction} from '../helpers';
+import UiButton from '../components/common/button';
 
@@ -18,4 +18,3 @@ const DEFAULT_OPTIONS = {
 
-const template =
-`<ui-dialog
+const template = `<ui-dialog
   :class="['mdl-alert', options.className]"
@@ -63,3 +62,3 @@ :open="open"
               this.handleClose();
-              if (isFunction(this.options.callback)) {
+              if (getType(this.options.callback) === 'function') {
                 this.options.callback();
@@ -72,5 +71,5 @@ } else {
           created() {
-            if (isString(options)) {
+            if (getType(options) === 'string') {
               this.options.message = options;
-            } else if (isObject(options)) {
+            } else if (getType(options) === 'object') {
               this.options = Object.assign(DEFAULT_OPTIONS, options);
@@ -77,0 +76,0 @@ }

src/scripts/plugins/confirm.js

@@ -0,1 +1,2 @@
+import getType from '../helpers/typeof';
 import UiDialog from '../components/dialog/dialog';
@@ -5,4 +6,3 @@ import UiDialogTitle from '../components/dialog/dialog-title';
 import UiDialogActions from '../components/dialog/dialog-actions';
-import UiButton from '../components/button';
-import {isString, isObject, isFunction} from '../helpers';
+import UiButton from '../components/common/button';
 
@@ -19,4 +19,3 @@ const DEFAULT_OPTIONS = {
 
-const template =
-`<ui-dialog
+const template = `<ui-dialog
   :class="['mdl-confirm', options.className]"
@@ -67,3 +66,3 @@ :open="open"
               this.handleClose();
-              if (isFunction(this.options.callback)) {
+              if (getType(this.options.callback) === 'function') {
                 this.options.callback(result);
@@ -80,5 +79,5 @@ } else {
           created() {
-            if (isString(options)) {
+            if (getType(options) === 'string') {
               this.options.message = options;
-            } else if (isObject(options)) {
+            } else if (getType(options) === 'object') {
               this.options = Object.assign(DEFAULT_OPTIONS, options);
@@ -85,0 +84,0 @@ }

src/scripts/plugins/event.js

 const methods = {
   onChange(_property, value, fn = () => {}) {
-    (new Function('value', `this.${_property} = value;`)).call(this, value);
+    new Function('value', `this.${_property} = value;`).call(this, value);
     fn(value);
@@ -8,3 +8,3 @@ return this;
   openDialog(_property, fn = () => {}) {
-    (new Function(`this.${_property} = true;`)).call(this);
+    new Function(`this.${_property} = true;`).call(this);
     fn();
@@ -14,3 +14,3 @@ return this;
   closeDialog(_property, fn = () => {}) {
-    (new Function(`this.${_property} = false;`)).call(this);
+    new Function(`this.${_property} = false;`).call(this);
     fn();
@@ -20,3 +20,3 @@ return this;
   showDialog(_property, fn = () => {}) {
-    (new Function(`this.${_property} = true;`)).call(this);
+    new Function(`this.${_property} = true;`).call(this);
     fn();
@@ -26,3 +26,3 @@ return this;
   hideDialog(_property, fn = () => {}) {
-    (new Function(`this.${_property} = false;`)).call(this);
+    new Function(`this.${_property} = false;`).call(this);
     fn();
@@ -29,0 +29,0 @@ return this;

src/scripts/plugins/notify.js

@@ -0,9 +1,16 @@
+import getType from '../helpers/typeof';
+
 const YES = true;
 const NO = false;
 
-const getType = (o) => ({}).toString.call(o).replace(/\[object\s(.*)]/, '$1').toLowerCase();
-
 const template = `<div class="mdl-notify" v-if="open">
   <transition-group class="mdl-notify__list" :name="transitionName" tag="div">
-    <div :class="['mdl-notify__item', notify.className, notify.type + '-type']"
+    <div :class="[
+    'mdl-notify__item',
+    notify.className,
+    notify.type + '-type',
+    {
+      'with-avatar': notify.avatar,
+      'with-buttons': notify.buttons && notify.buttons.length
+    }]"
     v-for="(notify, index) in notifies"
@@ -35,16 +42,18 @@ :key="notify.id">
 const itemProps = {
-  type: 'info',   // 消息类型
-  timeout: 5000,  // 自动关闭时间，设置为0则不会关闭
-  avatar: null,   // 头像
-  className: '',  // 自定义css class
-  color: null,    // 字体颜色
-  title: '',      // 标题
-  content: '',    // 内容
-  progressColor: '',    // 单独设置当前的进度条颜色
-  buttons: [{     // 自定义按钮 {className: String, text: String, handler: Function|String, autoClose: Boolean}
-    className: '',      // 自定义按钮css class
-    text: 'Close',      // 按钮文本
-    handler: 'close',   // 按钮点击处理方法
-    autoClose: YES       // 点击按钮是否自动关闭 默认: 关闭
-  }],
+  type: 'info', // 消息类型
+  timeout: 5000, // 自动关闭时间，设置为0则不会关闭
+  avatar: null, // 头像
+  className: '', // 自定义css class
+  title: '', // 标题
+  content: '', // 内容
+  progressColor: '', // 单独设置当前的进度条颜色
+  buttons: [
+    {
+      // 自定义按钮 {className: String, text: String, handler: Function|String, autoClose: Boolean}
+      className: '', // 自定义按钮css class
+      text: 'Close', // 按钮文本
+      handler: 'close', // 按钮点击处理方法
+      autoClose: YES // 点击按钮是否自动关闭 默认: 关闭
+    }
+  ]
 };
@@ -55,4 +64,3 @@
 export default {
-  install (Vue) {
-
+  install(Vue) {
     const notifyContainer = document.createElement('div');
@@ -63,3 +71,3 @@
       template,
-      data () {
+      data() {
         return {
@@ -71,63 +79,74 @@ open: YES,
           btnHandlers: {}
-        }
+        };
       },
       methods: {
-        setProgressColor (color) {
+        setProgressColor(color) {
           this.progressColor = color;
         },
-        setTransitionName (name) {
+        setTransitionName(name) {
           this.transitionName = name;
         },
-        resetTransitionName () {
+        resetTransitionName() {
           this.transitionName = 'notify-list';
         },
-        resetProgressColor () {
+        resetProgressColor() {
           this.progressColor = '#3f51b5';
         },
-        add (newNotify = {}) {
-          !this.open && console.warn(`[BalmUI]:Plugin $notify has not open yet. use 'this.$notify.open = true' to open the notify plugin in Vue instance.` );
+        add(newNotify = {}) {
+          !this.open &&
+            console.warn(
+              `[BalmUI]:Plugin $notify has not open yet. use 'this.$notify.open = true' to open the notify plugin in Vue instance.`
+            );
 
-          newNotify = Object.assign({
-            id: `${s4()}-${Date.now()}`
-          }, itemProps, newNotify);
+          newNotify = Object.assign(
+            {
+              id: `${s4()}-${Date.now()}`
+            },
+            itemProps,
+            newNotify
+          );
 
           this.notifies.push(newNotify);
         },
-        addButtonHandler (handlerName = '', fn) {
+        addButtonHandler(handlerName = '', fn) {
           let type = getType(handlerName);
 
-          let method = ({
+          let method = {
             object: () => {
-              let {name, method} = handlerName;
+              let { name, method } = handlerName;
               this.btnHandlers[name] = method;
             },
             string: () => {
-              if(getType(fn) === 'function') {
+              if (getType(fn) === 'function') {
                 this.btnHandlers[handlerName] = fn;
               } else {
-                console.error(`[BalmUI]:Plugin $notify added method '${handlerName}' failed. The 2nd argument of method 'addButtonHandler' should be a 'function' type, but received is '${getType(fn)}'.`);
+                console.error(
+                  `[BalmUI]:Plugin $notify added method '${handlerName}' failed. The 2nd argument of method 'addButtonHandler' should be a 'function' type, but received is '${getType(
+                    fn
+                  )}'.`
+                );
               }
             },
             array: () => {
-              handlerName.forEach( (item) => {
+              handlerName.forEach(item => {
                 this.btnHandlers[item.name] = item.method;
               });
             }
-          })[type];
+          }[type];
 
           method && method();
         },
-        findNotifyIndex (notify) {
-          return this.notifies.findIndex(function (item) {
+        findNotifyIndex(notify) {
+          return this.notifies.findIndex(function(item) {
             return notify.id === item.id;
           });
         },
-        close (notify) {
+        close(notify) {
           let index = this.findNotifyIndex(notify);
-          (getType(index)  === 'number') && this.notifies.splice(index, 1);
+          getType(index) === 'number' && this.notifies.splice(index, 1);
         },
-        $_hasProgress ({timeout}) {
-          return timeout && (getType(timeout) === 'number');
+        $_hasProgress({ timeout }) {
+          return timeout && getType(timeout) === 'number';
         },
-        $_buttonHandler ({handler, autoClose}, notify) {
+        $_buttonHandler({ handler, autoClose }, notify) {
           switch (typeof handler) {
@@ -141,8 +160,8 @@ case 'string':
           }
-          (autoClose !== NO) && this.close(notify);
+          autoClose !== NO && this.close(notify);
         },
-        $_setBackgroundImage (src) {
-          return {backgroundImage: `url(${src})`};
+        $_setBackgroundImage(src) {
+          return { backgroundImage: `url(${src})` };
         },
-        $_setProgressStyle ({timeout, progressColor}) {
+        $_setProgressStyle({ timeout, progressColor }) {
           let duration = `${timeout}ms`;
@@ -152,10 +171,10 @@ return {
             animationDuration: duration,
-            webkitAnimationDuration: duration,
-          }
+            webkitAnimationDuration: duration
+          };
         },
-        $_autoClose (notify) {
-          if(this.$_hasProgress(notify)){
+        $_autoClose(notify) {
+          if (this.$_hasProgress(notify)) {
             this.close(notify);
           }
-        },
+        }
       },
@@ -166,5 +185,3 @@ created() {
     });
-
-
   }
-}
+};

src/scripts/plugins/toast.js

@@ -1,3 +0,3 @@
-import UiSnackbar from '../components/snackbar';
-import {isString, isObject} from '../helpers';
+import getType from '../helpers/typeof';
+import UiSnackbar from '../components/common/snackbar';
 
@@ -11,4 +11,3 @@ const DEFAULT_OPTIONS = {
 
-const template =
-`<ui-snackbar
+const template = `<ui-snackbar
   :class="['mdl-toast', options.className]"
@@ -37,5 +36,5 @@ :active="active"
           created() {
-            if (isString(options)) {
+            if (getType(options) === 'string') {
               this.options.message = options;
-            } else if (isObject(options)) {
+            } else if (getType(options) === 'object') {
               this.options = Object.assign(DEFAULT_OPTIONS, options);
@@ -42,0 +41,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

2832844

25.88%

Number of package files

299

54.92%

Lines of code

5362

4.18%

Dependency changes

• Updated

  flatpickr@^4.1.4