rw-admin-ui 1.0.0

package/packages/color-picker/src/components/picker-dropdown.vue

@@ -0,0 +1,122 @@
+<template>
+  <transition name="el-zoom-in-top" @after-leave="doDestroy">
+    <div
+      class="el-color-dropdown"
+      v-show="showPopper">
+      <div class="el-color-dropdown__main-wrapper">
+        <hue-slider ref="hue" :color="color" vertical style="float: right;"/>
+        <sv-panel ref="sl" :color="color"/>
+      </div>
+      <alpha-slider v-if="showAlpha" ref="alpha" :color="color"/>
+      <predefine v-if="predefine" :color="color" :colors="predefine"/>
+      <div class="el-color-dropdown__btns">
+        <span class="el-color-dropdown__value">
+          <el-input
+            v-model="customInput"
+            @keyup.native.enter="handleConfirm"
+            @blur="handleConfirm"
+            :validate-event="false"
+            size="mini"/>
+        </span>
+        <el-button
+          size="mini"
+          type="text"
+          class="el-color-dropdown__link-btn"
+          @click="$emit('clear')">
+          {{ t('el.colorpicker.clear') }}
+        </el-button>
+        <el-button
+          plain
+          size="mini"
+          class="el-color-dropdown__btn"
+          @click="confirmValue">
+          {{ t('el.colorpicker.confirm') }}
+        </el-button>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+  import SvPanel from './sv-panel';
+  import HueSlider from './hue-slider';
+  import AlphaSlider from './alpha-slider';
+  import Predefine from './predefine';
+  import Popper from 'rowinself-ui/src/utils/vue-popper';
+  import Locale from 'rowinself-ui/src/mixins/locale';
+  import ElInput from 'rowinself-ui/packages/input';
+  import ElButton from 'rowinself-ui/packages/button';
+
+  export default {
+    name: 'ElColorPickerDropdown',
+
+    components: {
+      SvPanel,
+      HueSlider,
+      AlphaSlider,
+      ElInput,
+      ElButton,
+      Predefine
+    },
+
+    mixins: [Popper, Locale],
+
+    props: {
+      color: {
+        required: true,
+        type: Object
+      },
+      showAlpha: Boolean,
+      predefine: Array
+    },
+
+    data() {
+      return {
+        customInput: ''
+      };
+    },
+
+    computed: {
+      currentColor() {
+        const parent = this.$parent;
+        return !parent.value && !parent.showPanelColor ? '' : parent.color.value;
+      }
+    },
+
+    watch: {
+      showPopper(val) {
+        if (val === true) {
+          this.$nextTick(() => {
+            const { sl, hue, alpha } = this.$refs;
+            sl && sl.update();
+            hue && hue.update();
+            alpha && alpha.update();
+          });
+        }
+      },
+
+      currentColor: {
+        immediate: true,
+        handler(val) {
+          this.customInput = val;
+        }
+      }
+    },
+
+    mounted() {
+      this.$parent.popperElm = this.popperElm = this.$el;
+      const parent = this.$parent;
+      this.referenceElm = (parent && parent.$refs && parent.$refs.trigger) ? parent.$refs.trigger : parent.$el;
+    },
+
+    methods: {
+      confirmValue() {
+        this.$emit('pick');
+      },
+
+      handleConfirm() {
+        this.color.fromString(this.customInput);
+      }
+    },
+  };
+</script>

package/packages/color-picker/src/components/predefine.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="el-color-predefine">
+    <div class="el-color-predefine__colors">
+      <div 
+        class="el-color-predefine__color-selector"
+        :class="{selected: item.selected, 'is-alpha': item._alpha < 100}"
+        v-for="(item, index) in rgbaColors"
+        :key="colors[index]"
+        @click="handleSelect(index)">
+        <div :style="{'background-color': item.value}">
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import Color from '../color';
+
+  export default {
+    props: {
+      colors: { type: Array, required: true },
+      color: { required: true, type: Object }
+    },
+    data() {
+      return {
+        rgbaColors: this.parseColors(this.colors, this.color)
+      };
+    },
+    watch: {
+      '$parent.currentColor'(val) {
+        const color = new Color();
+        color.fromString(val);
+
+        this.rgbaColors.forEach(item => {
+          item.selected = color.compare(item);
+        });
+      },
+      colors(newVal) {
+        this.rgbaColors = this.parseColors(newVal, this.color);
+      },
+      color(newVal) {
+        this.rgbaColors = this.parseColors(this.colors, newVal);
+      }
+    },
+    methods: {
+      handleSelect(index) {
+        this.color.fromString(this.colors[index]);
+      },
+      parseColors(colors, color) {
+        return colors.map(value => {
+          const c = new Color();
+          c.enableAlpha = true;
+          c.format = 'rgba';
+          c.fromString(value);
+          c.selected = c.value === color.value;
+          return c;
+        });
+      }
+    },
+  };
+</script>

package/packages/color-picker/src/components/sv-panel.vue

@@ -0,0 +1,103 @@
+<template>
+  <div 
+    class="el-color-svpanel"
+    :style="{
+      backgroundColor: background
+  }">
+    <div class="el-color-svpanel__white"></div>
+    <div class="el-color-svpanel__black"></div>
+    <div 
+      class="el-color-svpanel__cursor"
+      :style="{
+        top: cursorTop + 'px',
+        left: cursorLeft + 'px'
+    }">
+      <div></div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import draggable from '../draggable';
+
+  export default {
+    name: 'ElSlPanel',
+
+    props: {
+      color: {
+        required: true,
+        type: Object
+      }
+    },
+
+    data() {
+      return {
+        cursorTop: 0,
+        cursorLeft: 0,
+        background: 'hsl(0, 100%, 50%)'
+      };
+    },
+
+    computed: {
+      colorValue() {
+        const hue = this.color.get('hue');
+        const value = this.color.get('value');
+        return { hue, value };
+      }
+    },
+
+    watch: {
+      colorValue() {
+        this.update();
+      }
+    },
+
+    mounted() {
+      draggable(this.$el, {
+        drag: (event) => {
+          this.handleDrag(event);
+        },
+        end: (event) => {
+          this.handleDrag(event);
+        }
+      });
+
+      this.update();
+    },
+
+    methods: {
+      update() {
+        const saturation = this.color.get('saturation');
+        const value = this.color.get('value');
+
+        const el = this.$el;
+        let { clientWidth: width, clientHeight: height } = el;
+
+        this.cursorLeft = saturation * width / 100;
+        this.cursorTop = (100 - value) * height / 100;
+
+        this.background = 'hsl(' + this.color.get('hue') + ', 100%, 50%)';
+      },
+
+      handleDrag(event) {
+        const el = this.$el;
+        const rect = el.getBoundingClientRect();
+
+        let left = event.clientX - rect.left;
+        let top = event.clientY - rect.top;
+        left = Math.max(0, left);
+        left = Math.min(left, rect.width);
+
+        top = Math.max(0, top);
+        top = Math.min(top, rect.height);
+
+        this.cursorLeft = left;
+        this.cursorTop = top;
+        this.color.set({
+          saturation: left / rect.width * 100,
+          value: 100 - top / rect.height * 100
+        });
+      }
+    },
+  };
+</script>

package/packages/color-picker/src/draggable.js

@@ -0,0 +1,36 @@
+import Vue from 'vue';
+let isDragging = false;
+
+export default function(element, options) {
+  if (Vue.prototype.$isServer) return;
+  const moveFn = function(event) {
+    if (options.drag) {
+      options.drag(event);
+    }
+  };
+  const upFn = function(event) {
+    document.removeEventListener('mousemove', moveFn);
+    document.removeEventListener('mouseup', upFn);
+    document.onselectstart = null;
+    document.ondragstart = null;
+
+    isDragging = false;
+
+    if (options.end) {
+      options.end(event);
+    }
+  };
+  element.addEventListener('mousedown', function(event) {
+    if (isDragging) return;
+    document.onselectstart = function() { return false; };
+    document.ondragstart = function() { return false; };
+
+    document.addEventListener('mousemove', moveFn);
+    document.addEventListener('mouseup', upFn);
+    isDragging = true;
+
+    if (options.start) {
+      options.start(event);
+    }
+  });
+}

package/packages/color-picker/src/main.vue

@@ -0,0 +1,308 @@
+<template>
+  <div
+    :class="[
+      'el-color-picker',
+      type === 'input' ? 'el-color-picker--input' : '',
+      colorDisabled ? 'is-disabled' : '',
+      colorSize ? `el-color-picker--${ colorSize }` : ''
+    ]"
+    v-clickoutside="hide">
+    <div class="el-color-picker__mask" v-if="colorDisabled && type !== 'input'"></div>
+
+    <el-input
+      v-if="type === 'input'"
+      :value="inputValue"
+      :style="inputStyle"
+      :disabled="colorDisabled"
+      :size="colorSize"
+      :validate-event="false"
+      @input="handleInputValue"
+      @focus="handleInputFocus"
+      @blur="handleInputBlur"
+      @keyup.native.enter="handleInputConfirm"
+    >
+      <template #suffix>
+        <span
+          ref="trigger"
+          class="el-color-picker__trigger el-color-picker__trigger--in-input"
+          @click.stop="handleTrigger"
+        >
+          <span class="el-color-picker__color" :class="{ 'is-alpha': showAlpha }">
+            <span
+              class="el-color-picker__color-inner"
+              :style="{
+                backgroundColor: displayedColor
+              }"
+            ></span>
+            <span class="el-color-picker__empty el-icon-close" v-if="!value && !showPanelColor"></span>
+          </span>
+        </span>
+      </template>
+    </el-input>
+
+    <div v-else ref="trigger" class="el-color-picker__trigger" @click="handleTrigger">
+      <span class="el-color-picker__color" :class="{ 'is-alpha': showAlpha }">
+        <span 
+          class="el-color-picker__color-inner"
+          :style="{
+            backgroundColor: displayedColor
+        }"></span>
+        <span class="el-color-picker__empty el-icon-close" v-if="!value && !showPanelColor"></span>
+      </span>
+      <span class="el-color-picker__icon el-icon-arrow-down" v-show="value || showPanelColor"></span>
+    </div>
+    <picker-dropdown
+      ref="dropdown"
+      :class="['el-color-picker__panel', popperClass || '']"
+      v-model="showPicker"
+      @pick="confirmValue"
+      @clear="clearValue"
+      :color="color"
+      :show-alpha="showAlpha"
+      :predefine="predefine"/>
+  </div>
+</template>
+
+<script>
+  import Color from './color';
+  import PickerDropdown from './components/picker-dropdown.vue';
+  import Clickoutside from 'rowinself-ui/src/utils/clickoutside';
+  import Emitter from 'rowinself-ui/src/mixins/emitter';
+  import ElInput from 'rowinself-ui/packages/input';
+
+  export default {
+    name: 'ElColorPicker',
+
+    directives: { Clickoutside },
+
+    components: {
+      PickerDropdown,
+      ElInput
+    },
+
+    mixins: [Emitter],
+
+    props: {
+      value: String,
+      showAlpha: Boolean,
+      colorFormat: String,
+      disabled: Boolean,
+      size: String,
+      width: [String, Number],
+      popperClass: String,
+      predefine: Array,
+      type: {
+        type: String,
+        default: 'default'
+      }
+    },
+
+    inject: {
+      elForm: {
+        default: ''
+      },
+      elFormItem: {
+        default: ''
+      }
+    },
+
+    data() {
+      const color = new Color({
+        enableAlpha: this.showAlpha,
+        format: this.colorFormat
+      });
+
+      return {
+        color,
+        showPicker: false,
+        showPanelColor: false,
+        inputValue: '',
+        inputFocused: false
+      };
+    },
+
+    computed: {
+      displayedColor() {
+        if (!this.value && !this.showPanelColor) {
+          return 'transparent';
+        }
+
+        return this.displayedRgb(this.color, this.showAlpha);
+      },
+
+      _elFormItemSize() {
+        return (this.elFormItem || {}).elFormItemSize;
+      },
+
+      colorSize() {
+        return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
+      },
+
+      colorDisabled() {
+        return this.disabled || (this.elForm || {}).disabled;
+      },
+
+      inputStyle() {
+        if (this.type !== 'input') return undefined;
+
+        const min_width_px = 120;
+        const width_value = this.width;
+        let width_css_value = '';
+
+        if (typeof width_value === 'number' && Number.isFinite(width_value)) {
+          width_css_value = `${Math.max(width_value, 0)}px`;
+        } else if (typeof width_value === 'string' && width_value.trim()) {
+          const trimmed = width_value.trim();
+          if (/^\d+(\.\d+)?$/.test(trimmed)) {
+            width_css_value = `${Math.max(Number(trimmed), 0)}px`;
+          } else {
+            width_css_value = trimmed;
+          }
+        } else {
+          const text_length = String(this.inputValue || '').length;
+          width_css_value = `calc(${Math.max(text_length, 0)}ch + 64px)`;
+        }
+
+        return {
+          minWidth: `${min_width_px}px`,
+          width: width_css_value
+        };
+      }
+    },
+
+    watch: {
+      value(val) {
+        if (this.type === 'input' && !this.inputFocused) {
+          this.inputValue = typeof val === 'string' ? val : '';
+        }
+        if (!val) {
+          this.showPanelColor = false;
+        } else if (val && val !== this.color.value) {
+          this.color.fromString(val);
+        }
+      },
+      color: {
+        deep: true,
+        handler() {
+          this.showPanelColor = true;
+        }
+      },
+      displayedColor(val) {
+        if (!this.showPicker) return;
+        const currentValueColor = new Color({
+          enableAlpha: this.showAlpha,
+          format: this.colorFormat
+        });
+        currentValueColor.fromString(this.value);
+
+        const currentValueColorRgb = this.displayedRgb(currentValueColor, this.showAlpha);
+        if (val !== currentValueColorRgb) {
+          this.$emit('active-change', val);
+        }
+      }
+    },
+
+    mounted() {
+      const value = this.value;
+      if (value) {
+        this.color.fromString(value);
+      }
+      this.popperElm = this.$refs.dropdown.$el;
+      if (this.type === 'input') this.inputValue = typeof value === 'string' ? value : '';
+    },
+
+    methods: {
+      handleTrigger() {
+        if (this.colorDisabled) return;
+        this.showPicker = !this.showPicker;
+      },
+      normalizeInputColor(value) {
+        const raw = (value || '').trim();
+        if (!raw) return '';
+        if (/^[0-9a-fA-F]{3}$/.test(raw) || /^[0-9a-fA-F]{6}$/.test(raw) || /^[0-9a-fA-F]{8}$/.test(raw)) {
+          return `#${raw}`;
+        }
+        return raw;
+      },
+      resolveColorValue(value) {
+        const normalized = this.normalizeInputColor(value);
+        if (!normalized) return '';
+        const candidate = new Color({
+          enableAlpha: this.showAlpha,
+          format: this.colorFormat
+        });
+        candidate.fromString(normalized);
+        return candidate.value || '';
+      },
+      handleInputValue(val) {
+        this.inputValue = typeof val === 'string' ? val : '';
+      },
+      handleInputFocus() {
+        this.inputFocused = true;
+      },
+      handleInputBlur() {
+        this.inputFocused = false;
+        this.handleInputConfirm();
+      },
+      handleInputConfirm() {
+        if (this.type !== 'input') return;
+        if (this.colorDisabled) return;
+        const next = this.resolveColorValue(this.inputValue);
+        if (!this.inputValue || !String(this.inputValue).trim()) {
+          this.clearValue();
+          return;
+        }
+        if (!next) {
+          this.inputValue = typeof this.value === 'string' ? this.value : '';
+          return;
+        }
+        this.color.fromString(next);
+        const value = this.color.value;
+        this.$emit('input', value);
+        this.$emit('change', value);
+        this.dispatch('ElFormItem', 'el.form.change', value);
+      },
+      confirmValue() {
+        const value = this.color.value;
+        this.$emit('input', value);
+        this.$emit('change', value);
+        this.dispatch('ElFormItem', 'el.form.change', value);
+        this.showPicker = false;
+      },
+      clearValue() {
+        this.$emit('input', null);
+        this.$emit('change', null);
+        if (this.value !== null) {
+          this.dispatch('ElFormItem', 'el.form.change', null);
+        }
+        this.showPanelColor = false;
+        this.showPicker = false;
+        if (this.type === 'input') this.inputValue = '';
+        this.resetColor();
+      },
+      hide() {
+        this.showPicker = false;
+        this.resetColor();
+      },
+      resetColor() {
+        this.$nextTick(_ => {
+          if (this.value) {
+            this.color.fromString(this.value);
+          } else {
+            this.showPanelColor = false;
+          }
+        });
+      },
+      displayedRgb(color, showAlpha) {
+        if (!(color instanceof Color)) {
+          throw Error('color should be instance of Color Class');
+        }
+
+        const { r, g, b } = color.toRgb();
+        return showAlpha
+          ? `rgba(${ r }, ${ g }, ${ b }, ${ color.get('alpha') / 100 })`
+          : `rgb(${ r }, ${ g }, ${ b })`;
+      }
+    },
+  };
+</script>

package/packages/container/index.js

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

package/packages/container/src/main.vue

@@ -0,0 +1,33 @@
+<template>
+  <section class="el-container" :class="{ 'is-vertical': isVertical }">
+    <slot></slot>
+  </section>
+</template>
+
+<script>
+  export default {
+    name: 'ElContainer',
+
+    componentName: 'ElContainer',
+
+    props: {
+      direction: String
+    },
+
+    computed: {
+      isVertical() {
+        if (this.direction === 'vertical') {
+          return true;
+        } else if (this.direction === 'horizontal') {
+          return false;
+        }
+        return this.$slots && this.$slots.default
+          ? this.$slots.default.some(vnode => {
+            const tag = vnode.componentOptions && vnode.componentOptions.tag;
+            return tag === 'el-header' || tag === 'el-footer';
+          })
+          : false;
+      }
+    }
+  };
+</script>