rw-admin-ui 1.0.0

package/packages/descriptions/src/descriptions-row.js

@@ -0,0 +1,116 @@
+export default {
+  name: 'ElDescriptionsRow',
+  props: {
+    row: {
+      type: Array
+    }
+  },
+  inject: ['elDescriptions'],
+  render(h) {
+    const { elDescriptions } = this;
+    const row = (this.row || []).map(item => {
+      return {
+        ...item,
+        label: item.slots.label || item.props.label,
+        ...['labelClassName', 'contentClassName', 'labelStyle', 'contentStyle'].reduce((res, key) => {
+          res[key] = item.props[key] || elDescriptions[key];
+          return res;
+        }, {})
+      };
+    });
+    if (elDescriptions.direction === 'vertical') {
+      return (
+        <tbody>
+          <tr class="el-descriptions-row">
+            {
+              row.map(item => {
+                return (
+                  <th
+                    class={{
+                      'el-descriptions-item__cell': true,
+                      'el-descriptions-item__label': true,
+                      'has-colon': elDescriptions.border ? false : elDescriptions.colon,
+                      'is-bordered-label': elDescriptions.border,
+                      [item.labelClassName]: true
+                    }}
+                    style={item.labelStyle}
+                    colSpan={item.props.span}
+                  >{item.label}</th>
+                );
+              })
+            }
+          </tr>
+          <tr class="el-descriptions-row">
+            {
+              row.map(item =>{
+                return (
+                  <td
+                    class={['el-descriptions-item__cell', 'el-descriptions-item__content', item.contentClassName]}
+                    style={item.contentStyle}
+                    colSpan={item.props.span}
+                  >{item.slots.default}</td>
+                );
+              })
+            }
+          </tr>
+        </tbody>
+      );
+    }
+    if (elDescriptions.border) {
+      return (
+        <tbody>
+          <tr class="el-descriptions-row">
+            {
+              row.map(item=> {
+                return ([
+                  <th
+                    class={{
+                      'el-descriptions-item__cell': true,
+                      'el-descriptions-item__label': true,
+                      'is-bordered-label': elDescriptions.border,
+                      [item.labelClassName]: true
+                    }}
+                    style={item.labelStyle}
+                    colSpan="1"
+                  >{item.label}</th>,
+                  <td
+                    class={['el-descriptions-item__cell', 'el-descriptions-item__content', item.contentClassName]}
+                    style={item.contentStyle}
+                    colSpan={item.props.span * 2 - 1}
+                  >{item.slots.default}</td>
+                ]);
+              })
+            }
+          </tr>
+        </tbody>
+      );
+    }
+    return (
+      <tbody>
+        <tr class="el-descriptions-row">
+          {
+            row.map(item=> {
+              return (
+                <td class="el-descriptions-item el-descriptions-item__cell" colSpan={item.props.span}>
+                  <div class="el-descriptions-item__container">
+                    <span
+                      class={{
+                        'el-descriptions-item__label': true,
+                        'has-colon': elDescriptions.colon,
+                        [item.labelClassName]: true
+                      }}
+                      style={item.labelStyle}
+                    >{item.label}</span>
+                    <span
+                      class={['el-descriptions-item__content', item.contentClassName]}
+                      style={item.contentStyle}
+                    >{item.slots.default}</span>
+                  </div>
+                </td>);
+            })
+          }
+        </tr>
+      </tbody>
+    );
+  }
+};

package/packages/descriptions/src/index.js

@@ -0,0 +1,180 @@
+import DescriptionsRow from './descriptions-row';
+import { isFunction } from 'rowinself-ui/src/utils/types';
+
+export default {
+  name: 'ElDescriptions',
+  components: {
+    [DescriptionsRow.name]: DescriptionsRow
+  },
+  props: {
+    border: {
+      type: Boolean,
+      default: false
+    },
+    column: {
+      type: Number,
+      default: 3
+    },
+    direction: {
+      type: String,
+      default: 'horizontal'
+    },
+    size: {
+      type: String
+      // validator: isValidComponentSize,
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    extra: {
+      type: String,
+      default: ''
+    },
+    labelStyle: {
+      type: Object
+    },
+    contentStyle: {
+      type: Object
+    },
+    labelClassName: {
+      type: String,
+      default: ''
+    },
+    contentClassName: {
+      type: String,
+      default: ''
+    },
+    colon: {
+      type: Boolean,
+      default: true
+    }
+  },
+  computed: {
+    descriptionsSize() {
+      return this.size || (this.$ELEMENT || {}).size;
+    }
+  },
+  provide() {
+    return {
+      elDescriptions: this
+    };
+  },
+  methods: {
+    getOptionProps(vnode) {
+      if (vnode.componentOptions) {
+        const componentOptions = vnode.componentOptions;
+        const { propsData = {}, Ctor = {} } = componentOptions;
+        const props = (Ctor.options || {}).props || {};
+        const res = {};
+        for (const k in props) {
+          const v = props[k];
+          const defaultValue = v.default;
+          if (defaultValue !== undefined) {
+            res[k] = isFunction(defaultValue) ? defaultValue.call(vnode) : defaultValue;
+          }
+        }
+        return { ...res, ...propsData };
+      }
+      return {};
+    },
+    getSlots(vnode) {
+      let componentOptions = vnode.componentOptions || {};
+      const children = vnode.children || componentOptions.children || [];
+      const slots = {};
+      children.forEach(child => {
+        if (!this.isEmptyElement(child)) {
+          const name = (child.data && child.data.slot) || 'default';
+          slots[name] = slots[name] || [];
+          if (child.tag === 'template') {
+            slots[name].push(child.children);
+          } else {
+            slots[name].push(child);
+          }
+        }
+      });
+      return { ...slots };
+    },
+    isEmptyElement(c) {
+      return !(c.tag || (c.text && c.text.trim() !== ''));
+    },
+    filledNode(node, span, count, isLast = false) {
+      if (!node.props) {
+        node.props = {};
+      }
+      if (span > count) {
+        node.props.span = count;
+      }
+      if (isLast) {
+        // set the max span, cause of the last td
+        node.props.span = count;
+      }
+      return node;
+    },
+    getRows() {
+      const children = ((this.$slots.default || []).filter(vnode => vnode.tag &&
+            vnode.componentOptions && vnode.componentOptions.Ctor.options.name === 'ElDescriptionsItem'));
+      const nodes = children.map(vnode => {
+        return {
+          props: this.getOptionProps(vnode),
+          slots: this.getSlots(vnode),
+          vnode
+        };
+      });
+      const rows = [];
+      let temp = [];
+      let count = this.column;
+
+      nodes.forEach((node, index) => {
+        const span = node.props.span || 1;
+
+        if (index === children.length - 1) {
+          temp.push(this.filledNode(node, span, count, true));
+          rows.push(temp);
+          return;
+        }
+
+        if (span < count) {
+          count -= span;
+          temp.push(node);
+        } else {
+          temp.push(this.filledNode(node, span, count));
+          rows.push(temp);
+          count = this.column;
+          temp = [];
+        }
+      });
+
+      return rows;
+    }
+  },
+  render() {
+    const { title, extra, border, descriptionsSize, $slots } = this;
+    const rows = this.getRows();
+
+    return (
+      <div class="el-descriptions">
+        {
+          (title || extra || $slots.title || $slots.extra)
+            ? <div class="el-descriptions__header">
+              <div class="el-descriptions__title">
+                { $slots.title ? $slots.title : title}
+              </div>
+              <div class="el-descriptions__extra">
+                { $slots.extra ? $slots.extra : extra }
+              </div>
+            </div>
+            : null
+        }
+
+        <div class="el-descriptions__body">
+          <table class={['el-descriptions__table', {'is-bordered': border}, descriptionsSize ? `el-descriptions--${descriptionsSize}` : '']}>
+            {rows.map(row => (
+              <DescriptionsRow row={row}></DescriptionsRow>
+            ))}
+          </table>
+        </div>
+      </div>
+    );
+  }
+};

package/packages/descriptions-item/index.js

@@ -0,0 +1,8 @@
+import DescriptionsItem from '../descriptions/src/descriptions-item';
+
+/* istanbul ignore next */
+DescriptionsItem.install = function install(Vue) {
+  Vue.component(DescriptionsItem.name, DescriptionsItem);
+};
+
+export default DescriptionsItem;

package/packages/dialog/index.js

@@ -0,0 +1,8 @@
+import ElDialog from './src/component';
+
+/* istanbul ignore next */
+ElDialog.install = function(Vue) {
+  Vue.component(ElDialog.name, ElDialog);
+};
+
+export default ElDialog;

package/packages/dialog/src/component.vue

@@ -0,0 +1,212 @@
+<template>
+  <transition
+    name="dialog-fade"
+    @after-enter="afterEnter"
+    @after-leave="afterLeave">
+    <div
+      v-show="visible"
+      class="el-dialog__wrapper"
+      @click.self="handleWrapperClick">
+      <div
+        role="dialog"
+        :key="key"
+        aria-modal="true"
+        :aria-label="title || 'dialog'"
+        :class="['el-dialog', { 'is-fullscreen': fullscreen, 'el-dialog--center': center }, customClass]"
+        ref="dialog"
+        :style="style">
+        <div class="el-dialog__header">
+          <slot name="title">
+            <span class="el-dialog__title">{{ title }}</span>
+          </slot>
+          <button
+            type="button"
+            class="el-dialog__headerbtn"
+            aria-label="Close"
+            v-if="showClose"
+            @click="handleClose">
+            <i class="el-dialog__close el-icon el-icon-close"></i>
+          </button>
+        </div>
+        <div class="el-dialog__body" v-if="rendered"><slot></slot></div>
+        <div class="el-dialog__footer" v-if="$slots.footer">
+          <slot name="footer"></slot>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+  import Popup from 'rowinself-ui/src/utils/popup';
+  import Migrating from 'rowinself-ui/src/mixins/migrating';
+  import emitter from 'rowinself-ui/src/mixins/emitter';
+
+  export default {
+    name: 'ElDialog',
+
+    mixins: [Popup, emitter, Migrating],
+
+    props: {
+      title: {
+        type: String,
+        default: ''
+      },
+
+      modal: {
+        type: Boolean,
+        default: true
+      },
+
+      modalAppendToBody: {
+        type: Boolean,
+        default: true
+      },
+
+      appendToBody: {
+        type: Boolean,
+        default: false
+      },
+
+      lockScroll: {
+        type: Boolean,
+        default: true
+      },
+
+      closeOnClickModal: {
+        type: Boolean,
+        default: true
+      },
+
+      closeOnPressEscape: {
+        type: Boolean,
+        default: true
+      },
+
+      showClose: {
+        type: Boolean,
+        default: true
+      },
+
+      width: String,
+
+      fullscreen: Boolean,
+
+      customClass: {
+        type: String,
+        default: ''
+      },
+
+      top: {
+        type: String,
+        default: '15vh'
+      },
+      beforeClose: Function,
+      center: {
+        type: Boolean,
+        default: false
+      },
+
+      destroyOnClose: Boolean
+    },
+
+    data() {
+      return {
+        closed: false,
+        key: 0
+      };
+    },
+
+    computed: {
+      style() {
+        let style = {};
+        if (!this.fullscreen) {
+          style.marginTop = this.top;
+          if (this.width) {
+            style.width = this.width;
+          }
+        }
+        return style;
+      }
+    },
+
+    watch: {
+      visible(val) {
+        if (val) {
+          this.closed = false;
+          this.$emit('open');
+          this.$el.addEventListener('scroll', this.updatePopper);
+          this.$nextTick(() => {
+            this.$refs.dialog.scrollTop = 0;
+          });
+          if (this.appendToBody) {
+            document.body.appendChild(this.$el);
+          }
+        } else {
+          this.$el.removeEventListener('scroll', this.updatePopper);
+          if (!this.closed) this.$emit('close');
+          if (this.destroyOnClose) {
+            this.$nextTick(() => {
+              this.key++;
+            });
+          }
+        }
+      }
+    },
+
+    mounted() {
+      if (this.visible) {
+        this.rendered = true;
+        this.open();
+        if (this.appendToBody) {
+          document.body.appendChild(this.$el);
+        }
+      }
+    },
+
+    destroyed() {
+      // if appendToBody is true, remove DOM node after destroy
+      if (this.appendToBody && this.$el && this.$el.parentNode) {
+        this.$el.parentNode.removeChild(this.$el);
+      }
+    },
+
+    methods: {
+      getMigratingConfig() {
+        return {
+          props: {
+            'size': 'size is removed.'
+          }
+        };
+      },
+      handleWrapperClick() {
+        if (!this.closeOnClickModal) return;
+        this.handleClose();
+      },
+      handleClose() {
+        if (typeof this.beforeClose === 'function') {
+          this.beforeClose(this.hide);
+        } else {
+          this.hide();
+        }
+      },
+      hide(cancel) {
+        if (cancel !== false) {
+          this.$emit('update:visible', false);
+          this.$emit('close');
+          this.closed = true;
+        }
+      },
+      updatePopper() {
+        this.broadcast('ElSelectDropdown', 'updatePopper');
+        this.broadcast('ElDropdownMenu', 'updatePopper');
+      },
+      afterEnter() {
+        this.$emit('opened');
+      },
+      afterLeave() {
+        this.$emit('closed');
+      }
+    },
+  };
+</script>

package/packages/divider/index.js

@@ -0,0 +1,8 @@
+import Divider from './src/main';
+
+/* istanbul ignore next */
+Divider.install = function(Vue) {
+  Vue.component(Divider.name, Divider);
+};
+
+export default Divider;

package/packages/divider/src/main.vue

@@ -0,0 +1,42 @@
+<template functional>
+  <div
+    v-bind="data.attrs"
+    v-on="listeners"
+    :class="[data.staticClass, 'el-divider', `el-divider--${props.direction}`]"
+    :style="[data.style, props.style]"
+  >
+    <div
+      v-if="slots().default && props.direction !== 'vertical'"
+      :class="['el-divider__text', `is-${props.contentPosition}`]"
+    >
+      <slot ></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ElDivider',
+  props: {
+    style: {
+      type: [Object, Array, String],
+      default: ''
+    },
+    direction: {
+      type: String,
+      default: 'horizontal',
+      validator(val) {
+        return ['horizontal', 'vertical'].indexOf(val) !== -1;
+      }
+    },
+    contentPosition: {
+      type: String,
+      default: 'center',
+      validator(val) {
+        return ['left', 'center', 'right'].indexOf(val) !== -1;
+      }
+    }
+  }
+};
+
+</script>

package/packages/drawer/index.js

@@ -0,0 +1,8 @@
+import Drawer from './src/main';
+
+/* istanbul ignore next */
+Drawer.install = function(Vue) {
+  Vue.component(Drawer.name, Drawer);
+};
+
+export default Drawer;