xianniu-ui 0.1.1

package/src/index.js

@@ -0,0 +1,44 @@
+
+import XnDialog from '../packages/dialog/index'
+import XnTable from '../packages/table/index'
+import XnPage from '../packages/page/index'
+
+import Utils from 'xn-ui/src/utils/index'
+const components = [
+    XnDialog,
+    XnTable,
+    XnPage
+]
+const version = require('../package.json').version
+
+const install = function (Vue) {
+    console.log(Vue.prototype);
+    if (install.installed) return
+    if (!Vue.prototype.$ELEMENT) throw new Error('缺失 element-ui，请进行安装')
+    install.installed = true
+    components.map(component => {
+        Vue.component(component.name, component)
+    })
+
+    Vue.prototype.$XN = {
+        uploadUrl: ''
+    }
+    Vue.prototype.$utils = Utils.$utils
+    Vue.prototype.$reg = Utils.$reg
+    Vue.prototype.$format = Utils.$format
+    Vue.prototype.$dayjs = Utils.$dayjs
+    Vue.prototype.$lodash = Utils.$lodash
+    Vue.prototype.$storage = Utils.$storage
+
+}
+if (typeof window !== 'undefined' && window.Vue) {
+    install(window.Vue)
+}
+
+export default {
+    version,
+    install,
+    XnDialog,
+    XnTable,
+    XnPage
+}

package/src/plugins/index.js

@@ -0,0 +1,6 @@
+import Vue from 'vue'
+import Element from 'element-ui'
+import '@/theme/index.scss'
+Vue.use(Element, {
+    size: 'small'
+})

package/src/theme/element-variables.scss

@@ -0,0 +1,28 @@
+
+/* theme color */
+$--color-primary: #FF745C;
+$--color-success: #52C41A;
+$--color-warning: #FAAD14;
+$--color-danger: #FF4D4F;
+$--button-font-weight: 400;
+
+$--border-color-light: #dfe4ed;
+$--border-color-lighter: #e6ebf5;
+
+$--table-border: 1px solid #dfe6ec;
+
+$--box-shadow-light: none;
+$--fade-linear-transition:none;
+$--fade-transition:none;
+// $--table-border-color:#f00;
+$--table-border:1px solid #f0f0f0;
+// $--table-header-background-color: #fafafa;
+
+$--font-path: "~element-ui/lib/theme-chalk/fonts";
+
+@import "element-ui/packages/theme-chalk/src/index";
+
+
+:export {
+  theme: $--color-primary;
+}

package/src/theme/index.scss

@@ -0,0 +1 @@
+@import './element-variables.scss';

package/src/theme/mixin.scss

@@ -0,0 +1,270 @@
+@mixin clearfix {
+  &:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+}
+
+@mixin scrollBar {
+  &::-webkit-scrollbar-track-piece {
+    background: #d3dce6;
+  }
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #99a9bf;
+    border-radius: 20px;
+  }
+}
+
+@mixin relative {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+@mixin pct($pct) {
+  width: #{$pct};
+  position: relative;
+  margin: 0 auto;
+}
+
+@mixin triangle($width, $height, $color, $direction) {
+  $width: $width/2;
+  $color-border-style: $height solid $color;
+  $transparent-border-style: $width solid transparent;
+  height: 0;
+  width: 0;
+
+  @if $direction==up {
+    border-bottom: $color-border-style;
+    border-left: $transparent-border-style;
+    border-right: $transparent-border-style;
+  }
+
+  @else if $direction==right {
+    border-left: $color-border-style;
+    border-top: $transparent-border-style;
+    border-bottom: $transparent-border-style;
+  }
+
+  @else if $direction==down {
+    border-top: $color-border-style;
+    border-left: $transparent-border-style;
+    border-right: $transparent-border-style;
+  }
+
+  @else if $direction==left {
+    border-right: $color-border-style;
+    border-top: $transparent-border-style;
+    border-bottom: $transparent-border-style;
+  }
+}
+
+
+
+// flex
+// @ref http://w3.org/tr/css3-flexbox/#flex-containers
+@mixin flex($display: block) {
+  @if ($display == block) {
+    display: -webkit-box;
+    display: -moz-box;
+    display: -webkit-flexbox;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+  } @else {
+    display: -webkit-inline-flex;
+    display: inline-flex;
+  }
+}
+
+//----------------------------------------------------------------------
+
+// flex 方向
+// 取值: row | row-reverse | column | column-reverse
+// 默认：row
+@mixin flex-direction($flex-direction: row) {
+  $box-orient: horizontal;
+  $box-direction: inherit;
+
+  @if ($flex-direction == column) {
+    $box-orient: vertical;
+    $box-direction: inherit;
+  } @else if ($flex-direction == column-reverse) {
+    $box-orient: vertical;
+    $box-direction: reverse;
+  } @else if ($flex-direction == row-reverse) {
+    $box-orient: horizontal;
+    $box-direction: reverse;
+  } @else {
+    $direction: row;
+  }
+
+  -webkit-box-orient: $box-orient;
+  -moz-box-orient: $box-orient;
+  -webkit-box-direction: $box-direction;
+  -moz-box-direction: $box-direction;
+  -webkit-flex-direction: $flex-direction;
+  -moz-flex-direction: $flex-direction;
+  -ms-flex-direction: $flex-direction;
+  flex-direction: $flex-direction;
+}
+
+//----------------------------------------------------------------------
+
+// flex 换行
+// 取值: nowrap | wrap | wrap-reverse
+// 默认: nowrap
+@mixin flex-wrap($value: nowrap) {
+  -webkit-flex-wrap: $value;
+  -moz-flex-wrap: $value;
+
+  @if ($value == nowrap) {
+    -ms-flex-wrap: none;
+  } @else {
+    -ms-flex-wrap: $value;
+  }
+
+  flex-wrap: $value;
+}
+
+//----------------------------------------------------------------------
+
+// 扩展收缩基准值
+// 默认: auto，数值
+@mixin flex-basis($value: auto) {
+  -webkit-flex-basis: $value;
+  -moz-flex-basis: $value;
+  -ms-flex-preferred-size: $value;
+  flex-basis: $value;
+}
+
+//----------------------------------------------------------------------
+
+// flex 扩展值
+// 默认: 0
+@mixin flex-grow($int: 0) {
+  -webkit-box-flex: $int;
+  -webkit-flex-grow: $int;
+  -moz-flex-grow: $int;
+  -ms-flex-positive: $int;
+  flex-grow: $int;
+}
+
+//----------------------------------------------------------------------
+
+// flex 收缩值
+// 默认: 1
+@mixin flex-shrink($int: 1) {
+  -webkit-flex-shrink: $int;
+  -moz-flex-shrink: $int;
+  -ms-flex-negative: $int;
+  flex-shrink: $int;
+}
+
+//----------------------------------------------------------------------
+
+// flex 排序
+// 默认: 0
+@mixin order($int: 0) {
+  -webkit-box-ordinal-group: $int + 1;
+  -webkit-order: $int;
+  -moz-order: $int;
+  -ms-flex-order: $int;
+  order: $int;
+}
+
+//----------------------------------------------------------------------
+
+// flex 主轴对齐
+// 取值: flex-start | flex-end | center | space-between | space-around
+// 默认: flex-start
+@mixin justify-content($value: flex-start) {
+  @if ($value == flex-start) {
+    -webkit-box-pack: start;
+    -ms-flex-pack: start;
+  } @else if ($value == flex-end) {
+    -webkit-box-pack: end;
+    -ms-flex-pack: end;
+  } @else if ($value == space-between) {
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+  } @else if ($value == space-around) {
+    -ms-flex-pack: distribute;
+  } @else {
+    -webkit-box-pack: $value;
+    -ms-flex-pack: $value;
+  }
+
+  -webkit-justify-content: $value;
+  -moz-justify-content: $value;
+  justify-content: $value;
+}
+
+//----------------------------------------------------------------------
+
+// flex 交叉轴对齐方式
+// 取值：flex-start | flex-end | center | baseline | stretch
+// 默认：stretch
+@mixin align-items($value: stretch) {
+  @if ($value == flex-start) {
+    -webkit-box-align: start;
+    -ms-flex-align: start;
+  } @else if ($value == flex-end) {
+    -webkit-box-align: end;
+    -ms-flex-align: end;
+  } @else {
+    -webkit-box-align: $value;
+    -ms-flex-align: $value;
+  }
+
+  -webkit-align-items: $value;
+  -moz-align-items: $value;
+  align-items: $value;
+}
+
+//----------------------------------------------------------------------
+
+// flex 自身在交叉轴对齐方式
+//
+// 取值：auto | flex-start | flex-end | center | baseline | stretch
+// 默认：auto
+@mixin align-self($value: auto) {
+  -webkit-align-self: $value;
+  -moz-align-self: $value;
+
+  @if ($value == flex-start) {
+    -ms-flex-item-align: start;
+  } @else if ($value == flex-end) {
+    -ms-flex-item-align: end;
+  } @else {
+    -ms-flex-item-align: $value;
+  }
+
+  align-self: $value;
+}
+
+//----------------------------------------------------------------------
+
+// flex 内容在交叉轴上的对齐方式
+// 取值：flex-start | flex-end | center | space-between | space-around | stretch
+// 默认：stretch
+@mixin align-content($value: stretch) {
+  -webkit-align-content: $value;
+  -moz-align-content: $value;
+
+  @if ($value == flex-start) {
+    -ms-flex-line-pack: start;
+  } @else if $value == (flex-end) {
+    -ms-flex-line-pack: end;
+  } @else {
+    -ms-flex-line-pack: $value;
+  }
+
+  align-content: $value;
+}

package/src/theme/sidebar.scss

@@ -0,0 +1,271 @@
+#app {
+
+    .main-container {
+      min-height: 100%;
+      transition: margin-left .28s;
+      margin-left: $sideBarWidth;
+      position: relative;
+      background-color: #f3f3f3;
+    }
+  
+    .sidebar-container {
+      transition: width 0.28s;
+      width: $sideBarWidth !important;
+      background-color: $menuBg;
+      height: 100%;
+      position: fixed;
+      font-size: 0px;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      z-index: 1001;
+      overflow: hidden;
+  
+      // reset element-ui css
+      .horizontal-collapse-transition {
+        transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
+      }
+  
+      .scrollbar-wrapper {
+        overflow-x: hidden !important;
+      }
+  
+      .el-scrollbar__bar.is-vertical {
+        right: 0px;
+      }
+  
+      .el-scrollbar {
+        height: 100%
+      }
+  
+      &.has-logo {
+        .el-scrollbar {
+          // height: calc(100% - 100px);
+          height: 100%;
+        }
+      }
+  
+      .is-horizontal {
+        display: none;
+      }
+  
+      a {
+        display: inline-block;
+        width: 100%;
+        overflow: hidden;
+      }
+  
+      .svg-icon {
+        margin-right: 16px;
+      }
+  
+      .sub-el-icon {
+        margin-right: 12px;
+        margin-left: -2px;
+      }
+  
+      .el-menu {
+        border: none;
+        height: 100%;
+        width: 100% !important;
+        &-item{
+          position: relative;
+          &::before{
+            content:"";
+            position: absolute;
+            left: 0;
+            height: 100%;
+            width: 3px;
+            background-color: transparent;
+            transition: all .3s ease-in-out;
+          }
+          &.is-active.submenu-title-noDropdown{
+            background-color: $subMenuActiveBg !important;
+            &::before{
+              background-color:  $menuActiveText !important;
+              z-index: 1;
+            }
+          }
+        }
+      }
+  
+      // menu hover
+      .submenu-title-noDropdown,
+      .el-submenu__title {
+        &:hover {
+          background-color: $menuHover !important;
+          color: $menuActiveText !important;
+        }
+      }
+  
+      .is-active>.el-submenu__title {
+        color: $subMenuActiveText !important;
+        background-color: $subMenuActiveBg !important;
+      }
+      .el-submenu{
+        // border-left: 3px solid transparent;
+        position: relative;
+        &::before{
+          content:"";
+          position: absolute;
+          left: 0;
+          height: 100%;
+          width: 3px;
+          background-color: transparent;
+          transition: all .3s ease-in-out;
+        }
+        &.is-active.is-opened{
+          // border-left-color: $menuActiveText;
+          &::before{
+            background-color:  $menuActiveText !important;
+            z-index: 1;
+          }
+          // border-left: 3px solid $menuActiveText;
+        }
+      }
+      & .nest-menu .el-submenu>.el-submenu__title,
+      & .el-submenu .el-menu-item {
+        min-width: $sideBarWidth !important;
+        background-color: $subMenuBg !important;
+        &:hover {
+          background-color: $subMenuHover !important;
+          color: $menuActiveText !important;
+        }
+  
+      }
+    }
+  
+    .hideSidebar {
+      .sidebar-container {
+        width: 54px !important;
+      }
+  
+      .main-container {
+        margin-left: 54px;
+      }
+  
+      .submenu-title-noDropdown {
+        padding: 0 !important;
+        position: relative;
+  
+        .el-tooltip {
+          padding: 0 !important;
+  
+          .svg-icon {
+            margin-left: 20px;
+          }
+  
+          .sub-el-icon {
+            margin-left: 19px;
+          }
+        }
+      }
+  
+      .el-submenu {
+        overflow: hidden;
+        
+        &>.el-submenu__title {
+          padding: 0 !important;
+  
+          .svg-icon {
+            margin-left: 20px;
+          }
+  
+          .sub-el-icon {
+            margin-left: 19px;
+          }
+  
+          .el-submenu__icon-arrow {
+            display: none;
+          }
+        }
+      }
+  
+      .el-menu--collapse {
+        .el-submenu {
+          &>.el-submenu__title {
+            &>span {
+              height: 0;
+              width: 0;
+              overflow: hidden;
+              visibility: hidden;
+              display: inline-block;
+            }
+          }
+        }
+      }
+    }
+    
+    .el-menu--collapse .el-menu .el-submenu {
+      min-width: $sideBarWidth !important;
+    }
+  
+    // mobile responsive
+    .mobile {
+      .main-container {
+        margin-left: 0px;
+      }
+  
+      .sidebar-container {
+        transition: transform .28s;
+        width: $sideBarWidth !important;
+      }
+  
+      &.hideSidebar {
+        .sidebar-container {
+          pointer-events: none;
+          transition-duration: 0.3s;
+          transform: translate3d(-$sideBarWidth, 0, 0);
+        }
+      }
+    }
+  
+    .withoutAnimation {
+  
+      .main-container,
+      .sidebar-container {
+        transition: none;
+      }
+    }
+  }
+  
+  // when menu collapsed
+  .el-menu--vertical {
+    &>.el-menu {
+      .svg-icon {
+        margin-right: 16px;
+      }
+      .sub-el-icon {
+        margin-right: 12px;
+        margin-left: -2px;
+      }
+    }
+  
+    .nest-menu .el-submenu>.el-submenu__title,
+    .el-menu-item {
+      &:hover {
+        // you can use $subMenuHover
+        background-color: $menuHover !important;
+      }
+    }
+  
+    // the scroll bar appears when the subMenu is too long
+    >.el-menu--popup {
+      max-height: 100vh;
+      overflow-y: auto;
+  
+      &::-webkit-scrollbar-track-piece {
+        background: #d3dce6;
+      }
+  
+      &::-webkit-scrollbar {
+        width: 6px;
+      }
+  
+      &::-webkit-scrollbar-thumb {
+        background: #99a9bf;
+        border-radius: 20px;
+      }
+    }
+  }
+  

package/src/theme/transition.scss

@@ -0,0 +1,52 @@
+// global transition css
+
+/* fade */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.28s;
+}
+
+.fade-enter,
+.fade-leave-active {
+  opacity: 0;
+}
+
+/* fade-transform */
+.fade-transform-leave-active,
+.fade-transform-enter-active {
+  transition: all .3s;
+}
+
+.fade-transform-enter {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+
+.fade-transform-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+/* breadcrumb transition */
+.breadcrumb-enter-active,
+.breadcrumb-leave-active {
+  transition: all .3s;
+}
+
+.breadcrumb-enter,
+.breadcrumb-leave-active {
+  opacity: 0;
+  transform: translateX(20px);
+}
+
+.breadcrumb-move {
+  transition: all .3s;
+}
+
+.breadcrumb-leave-active {
+  position: absolute;
+}
+.el-list-enter-active,
+.el-list-leave-active {
+  transition: none !important;
+}

package/src/theme/variables.scss

@@ -0,0 +1,36 @@
+// base color
+$blue:#324157;
+$light-blue:#3A71A8;
+$red:#C03639;
+$pink: #E65D6E;
+$green: #30B08F;
+$tiffany: #4AB7BD;
+$yellow:#FEC171;
+$panGreen: #30B08F;
+
+// sidebar
+$menuText:#4A4A53;
+$menuActiveText:#FF745C;
+$subMenuActiveText:#FF745C;
+$subMenuActiveBg:#FFEDEA;
+
+$menuBg:#fff;
+$menuHover:#FFEDEA;
+
+$subMenuBg:#fff;
+$subMenuHover:#FFEDEA;
+
+$sideBarWidth: 200px;
+
+// the :export directive is the magic sauce for webpack
+// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
+:export {
+  menuText: $menuText;
+  menuActiveText: $menuActiveText;
+  subMenuActiveText: $subMenuActiveText;
+  menuBg: $menuBg;
+  menuHover: $menuHover;
+  subMenuBg: $subMenuBg;
+  subMenuHover: $subMenuHover;
+  sideBarWidth: $sideBarWidth;
+}

package/src/utils/dayjs.js

@@ -0,0 +1,2 @@
+import dayjs from 'dayjs'
+export default dayjs