yks-element 1.0.0 → 1.0.4

package/packages/index.js

@@ -0,0 +1,221 @@
+/* element-ui */
+import elementUI, {
+    Pagination,
+    Dialog,
+    Autocomplete,
+    Dropdown,
+    DropdownMenu,
+    DropdownItem,
+    Menu,
+    Submenu,
+    MenuItem,
+    MenuItemGroup,
+    Input,
+    InputNumber,
+    Radio,
+    RadioGroup,
+    RadioButton,
+    Checkbox,
+    CheckboxButton,
+    CheckboxGroup,
+    Switch,
+    Select,
+    Option,
+    OptionGroup,
+    Button,
+    ButtonGroup,
+    Table,
+    TableColumn,
+    DatePicker,
+    TimeSelect,
+    TimePicker,
+    Popover,
+    Tooltip,
+    Breadcrumb,
+    BreadcrumbItem,
+    Form,
+    FormItem,
+    Tabs,
+    TabPane,
+    Tag,
+    Tree,
+    Alert,
+    Slider,
+    Icon,
+    Row,
+    Col,
+    Upload,
+    Progress,
+    Spinner,
+    Badge,
+    Card,
+    Rate,
+    Steps,
+    Step,
+    Carousel,
+    CarouselItem,
+    Collapse,
+    CollapseItem,
+    Cascader,
+    ColorPicker,
+    Transfer,
+    Container,
+    Header,
+    Aside,
+    Main,
+    Footer,
+    Timeline,
+    TimelineItem,
+    Link,
+    Divider,
+    Image,
+    Calendar,
+    Backtop,
+    PageHeader,
+    CascaderPanel,
+    Loading,
+    MessageBox,
+    Message,
+    Notification,
+    InfiniteScroll
+} from 'element-ui'
+
+/* element-ui */
+
+import YksDialog from './Dialog'
+import YksMultimedia from './Multimedia'
+import YksTinymce from './Tinymce'
+import YksPagination from './Pagination'
+import YksSelect from './Select'
+import YksScrollbar from './Scrollbar'
+import YksTable from './Table'
+import YksUploadfile from './UploadFile'
+import YksVideo from './Video'
+import YksOption from './option'
+import YksTopic from './Topic'
+
+import locale from 'element-ui/src/locale'
+const components = [
+    YksDialog,
+    YksMultimedia,
+    YksTinymce,
+    YksPagination,
+    YksSelect,
+    YksScrollbar,
+    YksTable,
+    YksUploadfile,
+    YksOption,
+    YksVideo,
+    ...YksTopic
+]
+const install = function (Vue, opts = {}) {
+    locale.use(opts.locale)
+    locale.i18n(opts.i18n)
+
+    components.forEach((item) => {
+        Vue.component(item.name, item)
+    })
+
+    Vue.use(InfiniteScroll)
+    Vue.use(Loading.directive)
+
+    Vue.prototype.$ELEMENT = {
+        size: opts.size || '',
+        zIndex: opts.zIndex || 2000
+    }
+    Vue.use(elementUI)
+    Vue.prototype.$loading = Loading.service
+    Vue.prototype.$msgbox = MessageBox
+    Vue.prototype.$alert = MessageBox.alert
+    Vue.prototype.$confirm = MessageBox.confirm
+    Vue.prototype.$prompt = MessageBox.prompt
+    Vue.prototype.$notify = Notification
+    Vue.prototype.$message = Message
+}
+if (typeof window !== 'undefined' && window.Vue) {
+    install(window.Vue)
+}
+export default {
+    version: '1.0.4',
+    locale: locale.use,
+    i18n: locale.i18n,
+    install,
+    /* element-ui */
+    Pagination,
+    Dialog,
+    Autocomplete,
+    Dropdown,
+    DropdownMenu,
+    DropdownItem,
+    Menu,
+    Submenu,
+    MenuItem,
+    MenuItemGroup,
+    Input,
+    InputNumber,
+    Radio,
+    RadioGroup,
+    RadioButton,
+    Checkbox,
+    CheckboxButton,
+    CheckboxGroup,
+    Switch,
+    Select,
+    Option,
+    OptionGroup,
+    Button,
+    ButtonGroup,
+    Table,
+    TableColumn,
+    DatePicker,
+    TimeSelect,
+    TimePicker,
+    Popover,
+    Tooltip,
+    Breadcrumb,
+    BreadcrumbItem,
+    Form,
+    FormItem,
+    Tabs,
+    TabPane,
+    Tag,
+    Tree,
+    Alert,
+    Slider,
+    Icon,
+    Row,
+    Col,
+    Upload,
+    Progress,
+    Spinner,
+    Badge,
+    Card,
+    Rate,
+    Steps,
+    Step,
+    Carousel,
+    CarouselItem,
+    Collapse,
+    CollapseItem,
+    Cascader,
+    ColorPicker,
+    Transfer,
+    Container,
+    Header,
+    Aside,
+    Main,
+    Footer,
+    Timeline,
+    TimelineItem,
+    Link,
+    Divider,
+    Image,
+    Calendar,
+    Backtop,
+    PageHeader,
+    CascaderPanel,
+    Loading,
+    MessageBox,
+    Message,
+    Notification
+}

package/packages/option/index.js

@@ -0,0 +1,6 @@
+import YksOption from '../Select/src/option.vue'
+
+YksOption.install = function (Vue) {
+    Vue.component(YksOption.name, YksOption)
+}
+export default YksOption

package/packages/styles/_mixin.scss

@@ -0,0 +1,93 @@
+// 清除浮动
+@mixin clearfix {
+    &:after {
+        content: '';
+        display: table;
+        clear: both;
+    }
+}
+
+// 单行位置省略号， `$substract`单位为%
+@mixin ellipsis($substract: 0) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 100% - $substract;
+}
+
+// 圆角
+@mixin rounded($radius) {
+    -webkit-border-radius: $radius;
+    -moz-border-radius: $radius;
+    border-radius: $radius;
+}
+
+// 阴影
+@mixin shadow($x, $y, $blur, $color) {
+    -webkit-box-shadow: $x $y $blur $color;
+    -moz-box-shadow: $x $y $blur $color;
+    box-shadow: $x $y $blur $color;
+}
+
+// 内阴影
+@mixin shadow-inset($x, $y, $blur, $color) {
+    -webkit-box-shadow: inset $x $y $blur $color;
+    -moz-box-shadow: inset $x $y $blur $color;
+    box-shadow: inset $x $y $blur $color;
+}
+
+// 过渡动画
+@mixin transition($property) {
+    -webkit-transition: $property 0.2s ease;
+    -moz-transition: $property 0.2s ease;
+    -o-transition: $property 0.2s ease;
+    transition: $property 0.2s ease;
+}
+
+@mixin box-sizing {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+// 线性渐变背景色
+@mixin linear-gradient($from, $to) {
+    /* Fallback for sad browsers */
+    background-color: $to;
+    /* Mozilla Firefox */
+    background-image: -moz-linear-gradient($from, $to);
+    /* Opera */
+    background-image: -o-linear-gradient($from, $to);
+    /* WebKit (Safari 4+, Chrome 1+) */
+    background-image: -webkit-gradient(
+        linear,
+        left top,
+        left bottom,
+        color-stop(0, $from),
+        color-stop(1, $to)
+    );
+    /* WebKit (Chrome 11+) */
+    background-image: -webkit-linear-gradient($from, $to);
+    /* IE10 */
+    background-image: -ms-linear-gradient($from, $to);
+    /* W3C */
+    background-image: linear-gradient($from, $to);
+}
+
+@mixin inline-block {
+    display: inline-block;
+    vertical-align: top;
+}
+
+// 虚线树组件 的 自定义indent（缩进）样式调整
+@mixin tree-indent($indent) {
+    .el-tree {
+        div[role='group'] {
+            .el-tree-node__expand-icon::after {
+                content: '';
+                width: $indent - 6px; //calc(12px + 48px - 18px);
+                left: $indent * -1 + 12px; //calc( 48px * -1 + 12px );
+            }
+        }
+    }
+}

package/packages/styles/_variables.scss

@@ -0,0 +1,40 @@
+$--color-primary: #3b7cec !default;
+$--color-success: #4de2b3 !default;
+$--color-warning: #ffba00 !default;
+$--color-danger: #F5222D !default;
+$--color-text-regular: #5d5d5d !default;
+$--color-text-primary: #5d5d5d !default;
+$--color-text-secondary: #8998ac !default;
+$--color-text-placeholder: #8998ac !default;
+$--border-color-base: #dfe4ed !default;
+$--border-color-deeper: #aeb9ca !default;
+$--border-color-light: #dfe4ed !default;
+$--border-color-lighter: #e6ebf5 !default;
+$--border-color-extra-light: #dfe4ed !default;
+$--background-color-base: #f5f8fc !default;
+$--button-font-weight: 400;
+
+$--color-info: #8998ac !default;
+$--input-font-color: #5d5d5d !default;
+$--input-icon-color: #5d5d5d !default;
+$--input-placeholder-color: #8998ac !default;
+$--base-hover-color: #f9fafc !default;
+/*radio*/
+$--radio-border-color: #aeb9ca !default;
+/*switch*/
+$--switch-off-color: #e0e4ea !default;
+/*select*/
+$--select-color: #f9fafc !default;
+
+$--select-border-color: #f5f6f5 !default;
+$--select-shadow-color: #d0d0d0 !default;
+/*dialog*/
+$--dialog-border-radius: 6px !default;
+
+/*table*/
+$--table-padding: 14px 0 !default;
+$--table-hover-color: #f9fafc !default;
+$--table-border: 1px solid #dfe6ec;
+
+/*Typography*/
+$--yks-font-path: 'fonts' !default;

package/packages/styles/alert.scss

@@ -0,0 +1,147 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(alert) {
+  width: 100%;
+  padding: $--alert-padding;
+  margin: 0;
+  box-sizing: border-box;
+  border-radius: $--alert-border-radius;
+  position: relative;
+  background-color: $--color-white;
+  overflow: hidden;
+  opacity: 1;
+  display: flex;
+  align-items: center;
+  transition: opacity .2s;
+
+  @include when(light) {
+    .el-alert__closebtn {
+      color: $--color-text-placeholder;
+    }
+  }
+
+  @include when(dark) {
+    .el-alert__closebtn {
+      color: $--color-white;
+    }
+    .el-alert__description {
+      color: $--color-white;
+    }
+  }
+
+  @include when(center) {
+    justify-content: center;
+  }
+
+  @include m(success) {
+    &.is-light {
+      background-color: $--alert-success-color;
+      color: $--color-success;
+
+      .el-alert__description {
+        color: $--color-success;
+      }
+    }
+
+    &.is-dark {
+      background-color: $--color-success;
+      color: $--color-white;
+    }
+  }
+
+  @include m(info) {
+    &.is-light {
+      background-color: $--alert-info-color;
+      color: $--color-info;
+    }
+
+    &.is-dark {
+      background-color: $--color-info;
+      color: $--color-white;
+    }
+
+    .el-alert__description {
+      color: $--color-info;
+    }
+  }
+
+  @include m(warning) {
+    &.is-light {
+      background-color: $--alert-warning-color;
+      color: $--color-warning;
+
+      .el-alert__description {
+        color: $--color-warning;
+      }
+    }
+
+    &.is-dark {
+      background-color: $--color-warning;
+      color: $--color-white;
+    }
+  }
+
+  @include m(error) {
+    &.is-light {
+      background-color: $--alert-danger-color;
+      color: $--color-danger;
+
+      .el-alert__description {
+        color: $--color-danger;
+      }
+    }
+
+    &.is-dark {
+      background-color: $--color-danger;
+      color: $--color-white;
+    }
+  }
+
+  @include e(content) {
+    display: table-cell;
+    padding: 0 8px;
+  }
+
+  @include e(icon) {
+    font-size: $--alert-icon-size;
+    width: $--alert-icon-size;
+    @include when(big) {
+      font-size: $--alert-icon-large-size;
+      width: $--alert-icon-large-size;
+    }
+  }
+
+  @include e(title) {
+    font-size: $--alert-title-font-size;
+    line-height: 18px;
+    @include when(bold) {
+      font-weight: bold;
+    }
+  }
+
+  & .el-alert__description {
+    font-size: $--alert-description-font-size;
+    margin: 5px 0 0 0;
+  }
+
+  @include e(closebtn) {
+    font-size: $--alert-close-font-size;
+    opacity: 1;
+    position: absolute;
+    top: 12px;
+    right: 15px;
+    cursor: pointer;
+
+    @include when(customed) {
+      font-style: normal;
+      font-size: $--alert-close-customed-font-size;
+      top: 9px;
+    }
+  }
+}
+
+.el-alert-fade-enter,
+.el-alert-fade-leave-active {
+  opacity: 0;
+}

package/packages/styles/aside.scss

@@ -0,0 +1,7 @@
+@import "mixins/mixins";
+
+@include b(aside) {
+  overflow: auto;
+  box-sizing: border-box;
+  flex-shrink: 0;
+}

package/packages/styles/autocomplete.scss

@@ -0,0 +1,80 @@
+@import "mixins/mixins";
+@import "mixins/utils";
+@import "common/var";
+@import "./input.scss";
+@import "./scrollbar.scss";
+@import "./popper";
+
+@include b(autocomplete) {
+  position: relative;
+  display: inline-block;
+}
+
+@include b(autocomplete-suggestion) {
+  margin: 5px 0;
+  box-shadow: $--box-shadow-light;
+  border-radius: $--border-radius-base;
+  border: 1px solid $--border-color-light;
+  box-sizing: border-box;
+  background-color: $--color-white;
+
+  @include e(wrap) {
+    max-height: 280px;
+    padding: 10px 0;
+    box-sizing: border-box;
+  }
+
+  @include e(list) {
+    margin: 0;
+    padding: 0;
+  }
+
+  & li {
+    padding: 0 20px;
+    margin: 0;
+    line-height: 34px;
+    cursor: pointer;
+    color: $--color-text-regular;
+    font-size: $--font-size-base;
+    list-style: none;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    &:hover {
+      background-color: $--select-option-hover-background;
+    }
+
+    &.highlighted {
+      background-color: $--select-option-hover-background;
+    }
+
+    &.divider {
+      margin-top: 6px;
+      border-top: 1px solid $--color-black;
+    }
+
+    &.divider:last-child {
+      margin-bottom: -6px;
+    }
+  }
+
+  @include when(loading) {
+    li {
+      text-align: center;
+      height: 100px;
+      line-height: 100px;
+      font-size: 20px;
+      color: #999;
+      @include utils-vertical-center;
+
+      &:hover {
+        background-color: $--color-white;
+      }
+    }
+
+    & .el-icon-loading {
+      vertical-align: middle;
+    }
+  }
+}

package/packages/styles/avatar.scss

@@ -0,0 +1,51 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(avatar) {
+  display: inline-block;
+  box-sizing: border-box;
+  text-align: center;
+  overflow: hidden;
+  color: $--avatar-font-color;
+  background: $--avatar-background-color;
+  width: $--avatar-large-size;
+  height: $--avatar-large-size;
+  line-height: $--avatar-large-size;
+  font-size: $--avatar-text-font-size;
+
+  >img {
+    display: block;
+    height: 100%;
+    vertical-align: middle;
+  }
+
+  @include m(circle) {
+    border-radius: 50%;
+  }
+
+  @include m(square) {
+    border-radius: $--avatar-border-radius;
+  }
+
+  @include m(icon) {
+    font-size: $--avatar-icon-font-size;
+  }
+
+  @include m(large) {
+    width: $--avatar-large-size;
+    height: $--avatar-large-size;
+    line-height: $--avatar-large-size;
+  }
+
+  @include m(medium) {
+    width: $--avatar-medium-size;
+    height: $--avatar-medium-size;
+    line-height: $--avatar-medium-size;
+  }
+
+  @include m(small) {
+    width: $--avatar-small-size;
+    height: $--avatar-small-size;
+    line-height: $--avatar-small-size;
+  }
+}

package/packages/styles/backtop.scss

@@ -0,0 +1,22 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(backtop) {
+  position: fixed;
+  background-color: $--backtop-background-color;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  color: $--backtop-font-color;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  box-shadow: 0 0 6px rgba(0,0,0, .12);
+  cursor: pointer;
+  z-index: 5;
+
+  &:hover {
+    background-color: $--backtop-hover-background-color
+  }
+}