md-iview 1.0.12

package/src/directives/style/height.js

@@ -0,0 +1,23 @@
+function bind(el, binding, vnode) {
+  const callback = parseFloat(binding.value);
+  const options = binding.options || { passive: true};
+  const target = binding.arg
+
+  el.style.height = `${callback}px`;
+  el._height = {
+    callback,
+    options,
+    target
+  }
+}
+
+
+function unbind(el) {
+  if (!el._height) return;
+  delete el._height
+}
+
+export default {
+  bind,
+  unbind
+}

package/src/directives/style/lineHeight.js

@@ -0,0 +1,23 @@
+function bind(el, binding, vnode) {
+  const callback = parseFloat(binding.value);
+  const options = binding.options || { passive: true};
+  const target = binding.arg
+
+  el.style.lineHeight = `${callback}px`;
+  el._lineHeight = {
+    callback,
+    options,
+    target
+  }
+}
+
+
+function unbind(el) {
+  if (!el._lineHeight) return;
+  delete el._lineHeight
+}
+
+export default {
+  bind,
+  unbind
+}

package/src/directives/style/margin.js

@@ -0,0 +1,48 @@
+function bind(el, binding, vnode) {
+  const callback = binding.value;//parseFloat();
+  const options = binding.options || { passive: true};
+  const target = binding.arg
+  const type = Object.prototype.toString.call(binding.value);
+  let marginValue = binding.value;
+  if (!target) {
+    if (type === '[object Array]') {
+      marginValue = callback.map(e=>{
+        let numberValue = parseFloat(e);
+        return `${numberValue}px`
+      }).join(' ')
+      el.style.margin = marginValue
+      console.log(el.style);
+    } else {
+      marginValue = parseFloat(binding.value);
+      el.style.margin = `${marginValue}px`;
+    }
+  } else {
+    marginValue = parseFloat(binding.value);
+    if (target === 'top') {
+      el.style.marginTop = `${marginValue}px`;
+    }else if (target === 'bottom') {
+      el.style.marginBottom = `${marginValue}px`;
+    }else if (target === 'left') {
+      el.style.marginLeft = `${marginValue}px`;
+    }else if (target === 'right') {
+      el.style.marginRight = `${marginValue}px`;
+    }
+  }
+
+  el._margin = {
+    callback,
+    options,
+    target
+  }
+}
+
+
+function unbind(el) {
+  if (!el._margin) return;
+  delete el._margin
+}
+
+export default {
+  bind,
+  unbind
+}

package/src/directives/style/opacity.js

@@ -0,0 +1,23 @@
+function bind(el, binding, vnode) {
+  const callback = parseFloat(binding.value);
+  const options = binding.options || { passive: true};
+  const target = binding.arg
+
+  el.style.opacity = callback;
+  el._opacity = {
+    callback,
+    options,
+    target
+  }
+}
+
+
+function unbind(el) {
+  if (!el._opacity) return;
+  delete el._opacity
+}
+
+export default {
+  bind,
+  unbind
+}

package/src/directives/style/padding.js

@@ -0,0 +1,48 @@
+function bind(el, binding, vnode) {
+  const callback = binding.value;//parseFloat();
+  const options = binding.options || { passive: true};
+  const target = binding.arg
+  const type = Object.prototype.toString.call(binding.value);
+  let paddingValue = binding.value;
+  if (!target) {
+    if (type === '[object Array]') {
+      paddingValue = callback.map(e=>{
+        let numberValue = parseFloat(e);
+        return `${numberValue}px`
+      }).join(' ')
+      el.style.padding = paddingValue
+      console.log(el.style);
+    } else {
+      paddingValue = parseFloat(binding.value);
+      el.style.padding = `${paddingValue}px`;
+    }
+  } else {
+    paddingValue = parseFloat(binding.value);
+    if (target === 'top') {
+      el.style.paddingTop = `${paddingValue}px`;
+    }else if (target === 'bottom') {
+      el.style.paddingBottom = `${paddingValue}px`;
+    }else if (target === 'left') {
+      el.style.paddingLeft = `${paddingValue}px`;
+    }else if (target === 'right') {
+      el.style.paddingRight = `${paddingValue}px`;
+    }
+  }
+
+  el._padding = {
+    callback,
+    options,
+    target
+  }
+}
+
+
+function unbind(el) {
+  if (!el._padding) return;
+  delete el._padding
+}
+
+export default {
+  bind,
+  unbind
+}

package/src/directives/style/width.js

@@ -0,0 +1,24 @@
+function bind(el, binding, vnode) {
+  const callback = parseFloat(binding.value);
+  const options = binding.options || { passive: true};
+  const target = binding.arg
+
+  el.style.width = `${callback}px`;
+
+  el._width = {
+    callback,
+    options,
+    target
+  }
+}
+
+
+function unbind(el) {
+  if (!el._width) return;
+  delete el._width
+}
+
+export default {
+  bind,
+  unbind
+}

package/src/index.js

@@ -0,0 +1,442 @@
+import MdAffix from 'iview/src/components/affix';
+import MdAlert from 'iview/src/components/alert';
+import MdAnchor from 'iview/src/components/anchor';
+import MdAnchorLink from 'iview/src/components/anchor-link';
+import MdAutoComplete from 'iview/src/components/auto-complete';
+import MdAvatar from 'iview/src/components/avatar';
+import MdBackTop from 'iview/src/components/back-top';
+import MdBadge from 'iview/src/components/badge';
+import MdBreadcrumb from 'iview/src/components/breadcrumb';
+import MdButton from 'iview/src/components/button';
+import MdBtn from 'iview/src/components/button';
+import MdCard from 'iview/src/components/card';
+import MdCarousel from 'iview/src/components/carousel';
+import MdCascader from 'iview/src/components/cascader';
+import MdCell from 'iview/src/components/cell';
+import MdCheckbox from 'iview/src/components/checkbox';
+import MdCircle from 'iview/src/components/circle';
+import MdCollapse from 'iview/src/components/collapse';
+import MdColorPicker from 'iview/src/components/color-picker';
+import MdContent from 'iview/src/components/content';
+import MdDatePicker from 'iview/src/components/date-picker';
+import MdDivider from 'iview/src/components/divider';
+import MdDrawer from 'iview/src/components/drawer';
+import MdDropdown from 'iview/src/components/dropdown';
+import MdFooter from 'iview/src/components/footer';
+import MdForm from 'iview/src/components/form';
+import MdHeader from 'iview/src/components/header';
+// import MdIcon from 'iview/src/components/icon';
+import MdInput from 'iview/src/components/input';
+import MdInputNumber from 'iview/src/components/input-number';
+import MdScroll from 'iview/src/components/scroll';
+import MdSplit from 'iview/src/components/split';
+import MdLayout from 'iview/src/components/layout';
+import MdLoadingBar from 'iview/src/components/loading-bar';
+import MdMenu from 'iview/src/components/menu';
+import MdMessage from 'iview/src/components/message';
+import MdModal from 'iview/src/components/modal';
+import MdNotice from 'iview/src/components/notice';
+import MdPage from 'iview/src/components/page';
+import MdPoptip from 'iview/src/components/poptip';
+import MdProgress from 'iview/src/components/progress';
+import MdRadio from 'iview/src/components/radio';
+import MdRate from 'iview/src/components/rate';
+import MdSider from 'iview/src/components/sider';
+import MdSlider from 'iview/src/components/slider';
+import MdSpin from 'iview/src/components/spin';
+import MdSteps from 'iview/src/components/steps';
+import MdSwitch from 'iview/src/components/switch';
+import MdTable from 'iview/src/components/table';
+// import MdTable from './components/md-table/index';
+import MdTabs from 'iview/src/components/tabs';
+import MdTag from 'iview/src/components/tag';
+import MdTime from 'iview/src/components/time';
+import MdTimeline from 'iview/src/components/timeline';
+import MdTimePicker from 'iview/src/components/time-picker';
+import MdTooltip from 'iview/src/components/tooltip';
+import MdTransfer from 'iview/src/components/transfer';
+// import MdTree from 'iview/src/components/tree';
+import MdUpload from 'iview/src/components/upload';
+import {Row as MdRow, Col as MdCol} from 'iview/src/components/grid';
+// import { Select as MdSelect, Option as MdOption, OptionGroup as MdOptionGroup} from 'iview/src/components/select';
+import locale from 'iview/src/locale/index';
+
+// 漫道扩展
+import MdLoading from './components/md-loading';
+import Can from './components/utilities/can.js';
+import directives from './directives'
+import MdShrinkableMenu from "./components/md-shrinkable-menu/sidebar.vue";
+import MdToolbar from "./components/md-toolbar";
+import MdRichEditor from './components/md-rich-editor'
+import MdIcon from './components/md-icon/icon'
+import { Select as MdSelect, Option as MdOption, OptionGroup as MdOptionGroup} from './components/md-select';
+// import MdSelect from './components/md-select/index'
+import MdTree from './components/md-tree'
+import MdPrint from './components/md-print'
+import MdChart from 'md-d3'
+// Vue.use(MdPrint)
+
+import '@/style/index.less'
+import iView from 'iview';
+let components = {
+  MdAffix,
+  MdAlert,
+  MdAnchor,
+  MdAnchorLink,
+  MdAutoComplete,
+  MdAvatar,
+  MdBackTop,
+  MdBadge,
+  MdBreadcrumb,
+  MdBreadcrumbItem: MdBreadcrumb.Item,
+  MdButton,
+  MdBtn,
+  MdButtonGroup: MdButton.Group,
+  MdBtnGroup: MdBtn.Group,
+  MdCard,
+  MdCarousel,
+  MdCarouselItem: MdCarousel.Item,
+  MdCascader,
+  MdCell,
+  MdCellGroup: MdCell.Group,
+  MdCheckbox,
+  MdCheckboxGroup: MdCheckbox.Group,
+  MdCircle,
+  MdCol,
+  MdCollapse,
+  MdColorPicker,
+  MdContent: MdContent,
+  MdDatePicker,
+  MdDivider,
+  MdDrawer,
+  MdDropdown,
+  MdDropdownItem: MdDropdown.Item,
+  MdDropdownMenu: MdDropdown.Menu,
+  MdFooter: MdFooter,
+  MdForm,
+  MdFormItem: MdForm.Item,
+  MdHeader: MdHeader,
+  // MdIcon,
+  MdInput,
+  MdInputNumber,
+  MdScroll,
+  MdSider: MdSider,
+  MdSplit,
+  MdSubmenu: MdMenu.Sub,
+  MdSwitch,
+  MdLayout: MdLayout,
+  MdLoadingBar,
+  MdMenu,
+  MdMenuGroup: MdMenu.Group,
+  MdMenuItem: MdMenu.Item,
+  MdMessage,
+  MdModal,
+  MdNotice,
+  MdOption: MdOption,
+  MdOptionGroup,
+  MdPage,
+  MdPanel: MdCollapse.Panel,
+  MdPoptip,
+  MdProgress,
+  MdRadio,
+  MdRadioGroup: MdRadio.Group,
+  MdRate,
+  MdRow,
+  // MdSelect,
+  MdSlider,
+  MdSpin,
+  MdStep: MdSteps.Step,
+  MdSteps,
+  MdTable,
+  MdTabs: MdTabs,
+  MdTabPane: MdTabs.Pane,
+  MdTag,
+  MdTime,
+  MdTimeline,
+  MdTimelineItem: MdTimeline.Item,
+  MdTimePicker,
+  MdTooltip,
+  MdTransfer,
+  // MdTree,
+  MdUpload,
+  // 漫道扩展
+  MdLoading,
+  MdShrinkableMenu,
+  MdToolbar,
+  Can,
+  // MdRichEditor,
+  MdIcon,
+  MdChart,
+  MdSelect,
+  MdTree,
+  // MdPrint
+};
+
+import loadCssJs from './utils/load'
+
+let MdView = {
+  ...components,
+  iButton: MdButton,
+  iCircle: MdCircle,
+  iCol: MdCol,
+  iContent: MdContent,
+  iForm: MdForm,
+  iFooter: MdFooter,
+  iHeader: MdHeader,
+  iInput: MdInput,
+  iMenu: MdMenu,
+  iOption: MdOption,
+  iProgress: MdProgress,
+  iSelect: MdSelect,
+  iSwitch: MdSwitch,
+  iTable: MdTable,
+  iTime: MdTime
+};
+
+const install = function (Vue, opts = {}) {
+  if (install.installed) return;
+  locale.use(opts.locale);
+  locale.i18n(opts.i18n);
+
+  if (opts.hasOwnProperty('richEditor') && opts.richEditor) {
+    // components  = {
+    //   ...components,
+    //   ... {
+    //     MdRichEditor,
+    //   }
+    // };
+
+    Object.assign(components, { 'MdRichEditor': MdRichEditor })
+    Object.assign(MdView, { 'MdRichEditor': MdRichEditor })
+    /*let importCss = function(files,ver=__MDVIEW_VERSION__){
+      files.forEach(elem=>{
+        let link = document.createElement("link");
+
+        link.rel = "stylesheet";
+
+        link.type = "text/css";
+
+        link.href = elem + "?v=" + ver;
+
+        document.getElementsByTagName("head")[0].appendChild(link);
+        // document.write("<link rel=\"stylesheet\" href=" + elem +"?ver="+ ver +" type=\"text/css\" media=\"screen\"/>");
+      })
+    };
+    importCss(quills);*/
+    let quills = [
+      "https://cdn.bootcss.com/quill/1.3.6/quill.core.css",
+      "https://cdn.bootcss.com/quill/1.3.6/quill.snow.css",
+      "https://cdn.bootcss.com/quill/1.3.6/quill.bubble.css",
+    ];
+    if (Object.prototype.toString.call(opts.richEditor) === "[object Array]" && opts.richEditor.length>0) {
+      opts.richEditor.forEach(elem =>{
+        loadCssJs(elem)
+      })
+    } else {
+      quills.forEach(elem =>{
+        loadCssJs(elem)
+      })
+    }
+    // Vue.component('MdRichEditor', MdRichEditor);
+  }
+  Object.keys(MdView).forEach(key => {
+    Vue.component(key, MdView[key]);
+  });
+
+  Vue.use(MdPrint)
+
+  Vue.prototype.$MDVIEW = Vue.prototype.$IVIEW = {
+    size: opts.size || '',
+    transfer: 'transfer' in opts ? opts.transfer : '',
+    select: {
+      arrow: opts.select ? opts.select.arrow ? opts.select.arrow : '' : '',
+      customArrow: opts.select ? opts.select.customArrow ? opts.select.customArrow : '' : '',
+      arrowSize: opts.select ? opts.select.arrowSize ? opts.select.arrowSize : '' : ''
+    },
+    cell: {
+      arrow: opts.cell ? opts.cell.arrow ? opts.cell.arrow : '' : '',
+      customArrow: opts.cell ? opts.cell.customArrow ? opts.cell.customArrow : '' : '',
+      arrowSize: opts.cell ? opts.cell.arrowSize ? opts.cell.arrowSize : '' : ''
+    },
+    menu: {
+      arrow: opts.menu ? opts.menu.arrow ? opts.menu.arrow : '' : '',
+      customArrow: opts.menu ? opts.menu.customArrow ? opts.menu.customArrow : '' : '',
+      arrowSize: opts.menu ? opts.menu.arrowSize ? opts.menu.arrowSize : '' : ''
+    },
+    tree: {
+      arrow: opts.tree ? opts.tree.arrow ? opts.tree.arrow : '' : '',
+      customArrow: opts.tree ? opts.tree.customArrow ? opts.tree.customArrow : '' : '',
+      arrowSize: opts.tree ? opts.tree.arrowSize ? opts.tree.arrowSize : '' : ''
+    },
+    cascader: {
+      arrow: opts.cascader ? opts.cascader.arrow ? opts.cascader.arrow : '' : '',
+      customArrow: opts.cascader ? opts.cascader.customArrow ? opts.cascader.customArrow : '' : '',
+      arrowSize: opts.cascader ? opts.cascader.arrowSize ? opts.cascader.arrowSize : '' : '',
+      itemArrow: opts.cascader ? opts.cascader.itemArrow ? opts.cascader.itemArrow : '' : '',
+      customItemArrow: opts.cascader ? opts.cascader.customItemArrow ? opts.cascader.customItemArrow : '' : '',
+      itemArrowSize: opts.cascader ? opts.cascader.itemArrowSize ? opts.cascader.itemArrowSize : '' : ''
+    },
+    colorPicker: {
+      arrow: opts.colorPicker ? opts.colorPicker.arrow ? opts.colorPicker.arrow : '' : '',
+      customArrow: opts.colorPicker ? opts.colorPicker.customArrow ? opts.colorPicker.customArrow : '' : '',
+      arrowSize: opts.colorPicker ? opts.colorPicker.arrowSize ? opts.colorPicker.arrowSize : '' : ''
+    },
+    datePicker: {
+      icon: opts.datePicker ? opts.datePicker.icon ? opts.datePicker.icon : '' : '',
+      customIcon: opts.datePicker ? opts.datePicker.customIcon ? opts.datePicker.customIcon : '' : '',
+      iconSize: opts.datePicker ? opts.datePicker.iconSize ? opts.datePicker.iconSize : '' : ''
+    },
+    timePicker: {
+      icon: opts.timePicker ? opts.timePicker.icon ? opts.timePicker.icon : '' : '',
+      customIcon: opts.timePicker ? opts.timePicker.customIcon ? opts.timePicker.customIcon : '' : '',
+      iconSize: opts.timePicker ? opts.timePicker.iconSize ? opts.timePicker.iconSize : '' : ''
+    },
+    tabs: {
+      closeIcon: opts.tabs ? opts.tabs.closeIcon ? opts.tabs.closeIcon : '' : '',
+      customCloseIcon: opts.tabs ? opts.tabs.customCloseIcon ? opts.tabs.customCloseIcon : '' : '',
+      closeIconSize: opts.tabs ? opts.tabs.closeIconSize ? opts.tabs.closeIconSize : '' : ''
+    },
+    modal: {
+      maskClosable: opts.modal ? 'maskClosable' in opts.modal ? opts.modal.maskClosable : '' : ''
+    },
+  };
+
+  Vue.prototype.$MdLoading = MdLoadingBar;
+  Vue.prototype.$MdMessage = MdMessage;
+  Vue.prototype.$MdMdModal = MdModal;
+  Vue.prototype.$MdNotice = MdNotice;
+  Vue.prototype.$MdSpin = MdSpin;
+  Vue.use(iView);
+  /**
+   * 漫道扩展
+   */
+  Object.keys(directives).forEach(key => {
+    Vue.directive(key, directives[key])
+  })
+
+
+  opts.iconfonts && opts.iconfonts.forEach(elem =>{
+    loadCssJs(elem)
+  })
+};
+
+
+
+// auto install
+if (typeof window !== 'undefined' && window.Vue) {
+  install(window.Vue);
+}
+
+const API = {
+  version: __MDVIEW_VERSION__,
+  locale: locale.use,
+  i18n: locale.i18n,
+  install,
+  MdCircle,
+  MdSwitch,
+  ...components
+};
+
+API.lang = (code) => {
+  const langObject = window['iview/locale'].default;
+  if (code === langObject.i.locale) locale.use(langObject);
+  else console.log(`The ${code} language pack is not loaded.`); // eslint-disable-line no-console
+};
+/*
+export {
+  MdAffix,
+  MdAlert,
+  MdAnchor,
+  MdAnchorLink,
+  MdAutoComplete,
+  MdAvatar,
+  MdBackTop,
+  MdBadge,
+  MdBreadcrumb,
+  MdBreadcrumbItem,
+  MdButton,
+  MdBtn,
+  MdButtonGroup,
+  MdBtnGroup,
+  MdCard,
+  MdCarousel,
+  MdCarouselItem,
+  MdCascader,
+  MdCell,
+  MdCellGroup,
+  MdCheckbox,
+  MdCheckboxGroup,
+  MdCol,
+  MdCollapse,
+  MdColorPicker,
+  MdContent,
+  MdDatePicker,
+  MdDivider,
+  MdDrawer,
+  MdDropdown,
+  MdDropdownItem,
+  MdDropdownMenu,
+  MdFooter,
+  MdForm,
+  MdFormItem,
+  MdHeader,
+  // MdIcon,
+  MdInput,
+  MdInputNumber,
+  MdScroll,
+  MdSider,
+  MdSplit,
+  MdSubmenu,
+  MdLayout,
+  MdLoadingBar,
+  MdMenu,
+  MdMenuGroup,
+  MdMenuItem,
+  MdMessage,
+  MdModal,
+  MdNotice,
+  MdOption,
+  MdOptionGroup,
+  MdPage,
+  MdPanel,
+  MdPoptip,
+  MdProgress,
+  MdRadio,
+  MdRadioGroup,
+  MdRate,
+  MdRow,
+  // MdSelect,
+  MdSlider,
+  MdSpin,
+  MdStep,
+  MdSteps,
+  MdTable,
+  MdTabs,
+  MdTabPane,
+  MdTag,
+  MdTime,
+  MdTimeline,
+  MdTimelineItem,
+  MdTimePicker,
+  MdTooltip,
+  MdTransfer,
+  // MdTree,
+  MdUpload,
+  // 漫道扩展
+  MdLoading,
+  MdShrinkableMenu,
+  MdToolbar,
+  Can,
+  MdRichEditor,
+  MdIcon,
+  MdChart,
+  MdSelect,
+  MdTree,
+  MdPrint
+};*/
+
+export default API
+// module.exports.default = module.exports = API;   // eslint-disable-line no-undef
+// module.exports.default = module.exports = API;   // eslint-disable-line no-undef
+// module.exports = API
+// export default API

package/src/locale/lang.js

@@ -0,0 +1,5 @@
+import zh from 'iview/dist/locale/zh-CN'
+import en from 'iview/dist/locale/en-US'
+import { locale } from 'iview'
+
+export { zh, en, locale }

package/src/mixins/colorable.js

@@ -0,0 +1,51 @@
+import Vue from 'vue'
+
+function isCssColor(color) {
+    return !!color && !!color.match(/^(#|(rgb|hsl)a?\()/)
+}
+
+export default Vue.extend({
+    name: 'colorable',
+
+    props: {
+        color: String
+    },
+
+    methods: {
+        setBackgroundColor(color, data = {}) {
+            if (isCssColor(color)) {
+                data.style = {
+                    ...data.style,
+                    'background-color': `${color}`,
+                    'border-color': `${color}`
+                }
+            } else if (color) {
+                data.class = {
+                    ...data.class,
+                    [color]: true
+                }
+            }
+
+            return data
+        },
+        setTextColor(color, data = {}) {
+            if (isCssColor(color)) {
+                data.style = {
+                    ...data.style,
+                    'color': `${color}`,
+                    'caret-color': `${color}`
+                }
+            } else if (color) {
+                const [colorName, colorModifier] = color.toString().trim().split(' ', 2);
+                data.class = {
+                    ...data.class,
+                    [colorName + '--text']: true
+                }
+                if (colorModifier) {
+                    data.class['text--' + colorModifier] = true
+                }
+            }
+            return data
+        }
+    },
+})