newtv-ui-3.0 0.0.1

package/theme/sky_style.scss

@@ -0,0 +1,268 @@
+@import './skyStyle/config.scss';
+$w20: 8rem;
+$mx1: 0.25rem;
+.w-20 {
+  width: $w20;
+}
+.mx-1 {
+  margin-left: $mx1;
+}
+.ml-1 {
+  margin-left: $mx1;
+  margin-bottom: $mx1 + 0.05;
+  vertical-align: middle;
+}
+.ml-2 {
+  margin-left: $mx1 * 2;
+}
+
+// button样式
+.el-button.is-text:not(.is-disabled):active,
+.el-button.is-text:not(.is-disabled):focus,
+.el-button.is-text:not(.is-disabled):hover {
+  background-color: transparent;
+}
+.el-button--default .iconfont,
+.el-button .iconfont {
+  padding-right: 5px;
+  font-size: 14px;
+}
+
+// tag组件样式
+.fg-tag {
+  .el-button,
+  .el-tag {
+    border-style: dashed;
+  }
+}
+
+.fg-avatar-picture-card {
+  span.actions {
+    display: inline-flex;
+    justify-content: flex-end;
+    align-items: baseline;
+    span {
+      margin: 12px 0 0 10px;
+      &:last-child {
+        margin-right: 10px;
+      }
+    }
+  }
+}
+
+// dialog
+.preview-dialog .el-dialog__header {
+  border: 0;
+}
+.el-dialog__header {
+  border-bottom: 1px solid #E6E6E6;
+}
+.el-dialog__headerbtn .el-dialog__close {
+  padding: 2px;
+  background: #A3AEC1;
+  color: #fff;
+  border-radius: 50%;
+  font-size: 12px;
+}
+
+.el-dialog__headerbtn:focus .el-dialog__close,
+.el-dialog__headerbtn:hover .el-dialog__close {
+  color: #fff;
+}
+
+.dialog__info {
+  .el-dialog__header {
+    border: 0
+  }
+}
+.el-dialog__footer {
+  text-align: center;
+  .el-button {
+    padding: 8px 30px;
+  }
+}
+
+// 左侧导航
+.fg-menu {
+  .el-menu {
+    background: transparent;
+  }
+  .el-menu-item,
+  .el-sub-menu__title {
+    color: #fff;
+    border-left: 3px solid transparent;
+  }
+  .el-sub-menu__title:hover,
+  .el-menu-item:hover {
+    background: rgba(255, 255, 255, 0.3);
+    border-left: 3px solid #fff;
+  }
+  .el-menu-item.is-active {
+    background: #082f8c;
+  }
+  
+  // 菜单合上时样式
+  .el-menu--collapse {
+    .el-sub-menu.is-active {
+        background: #082f8c;
+      }
+    .el-sub-menu.is-active .el-sub-menu__title {
+      color: #fff;
+    }
+  }
+}
+
+
+// table 样式
+$tableBottom: 60px;
+.fg-table-body {
+  position: relative;
+  background: #fff;
+  height: 100%;
+  //padding-bottom: $tableBottom;
+  box-sizing: border-box;
+  thead.is-group th.el-table__cell {
+    background: transparent;
+  }
+
+  .el-table .cell {
+    padding: 0 20px;
+  }
+
+  .footer-pagination {
+    padding-top: 15px;
+  }
+  .el-pagination {
+    justify-content: flex-end;
+  }
+  .el-table--border td {
+    border-right: 0;
+  }
+  .el-table__header th {
+    border-color: transparent;
+    position: relative;
+    z-index: 1;
+    &:hover {
+      &::after {
+        display: block;
+      }
+    }
+    &::after {
+      content: '';
+      width: 3px;
+      height: 18px;
+      background: #eee;
+      position: absolute;
+      top: 50%;
+      right: 1px;
+      transform: translate(0, -50%);
+      z-index: 0;
+      display: none;
+    }
+  }
+  .el-table__header .el-table-column--selection, .el-table__header th:last-child {
+    border-right: 0;
+    &:hover {
+      &::after {
+        display: none;
+      }
+    }
+  }
+  .el-table--border:before, .el-table--border:after, .el-table__border-left-patch {
+    display: none;
+  }
+  
+}
+
+
+
+// 分页器阴影样式
+.foot_shadow {
+  padding-bottom: $tableBottom;
+  >.el-table {
+    height: 100%;
+    overflow: auto;
+  }
+  .el-table__inner-wrapper::before {
+    display: none;
+  }
+  .footer-pagination {
+    position: absolute;
+    width: 100%;
+    height: $tableBottom;
+    //height: ($tableBottom + 28);
+    bottom: 0;
+
+    //padding-top: 28px;
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
+    padding-right: 10px;
+    box-sizing: border-box;
+    z-index: 10;
+  }
+
+  .el-table__body-wrapper {
+    //margin-bottom: 30px;
+  }
+}
+
+.el-col:nth-of-type(1) .form_split {
+  margin-top: 0;
+}
+
+// form 分隔线样式
+.form_split {
+  position: relative;
+  line-height: 24px;
+  font-size: 16px;
+  padding: 0 10px;
+  margin: 18px 0;
+  font-weight: 500;
+  color: #74767a;
+  &::before {
+    content: '';
+    position: absolute;
+    line-height: 24px;
+    width: 4px;
+    height: 24px;
+    background-color: var(--el-color-primary);
+    border-radius: 4px;
+    top: 50%;
+    left: 0;
+    transform: translate(0, -50%);
+  }
+}
+
+.el-button:not(.is-text, .is-link, .el-button--text):focus {
+  background-color: var(--el-button-bg-color);
+  border-color: var(--el-button-border-color);
+  color: var(--el-button-text-color);
+}
+
+.el-table .el-table__cell {
+  z-index: auto;
+}
+
+.table-right-btnGroup {
+  .el-dropdown {
+    margin-top: 2px;
+    .el-button {
+      background: transparent;
+      color: #3e89fa;
+      border-radius: 100%;
+      padding: 0;
+      border-width: 2px;
+      height: 20px;
+      width: 20px;
+      position: relative;
+      box-sizing: border-box;
+      span {
+        font-weight: 700;
+        position: absolute;
+        top: 30%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+    }
+  }
+
+}

package/types/component.d.ts

@@ -0,0 +1,7 @@
+import Vue from 'vue'
+
+/** ElementUI component common definition */
+export declare class NewtvUIComponent extends Vue {
+  /** Install component into Vue */
+  static install (vue: typeof Vue): any
+}

package/types/dashboard.d.ts

@@ -0,0 +1,10 @@
+import { NewtvUIComponent } from './component'
+
+export declare class newtvDashboard extends NewtvUIComponent {
+  title: string
+  height: string
+  fillet: string
+  center: boolean
+  isIcon: boolean
+  data: []
+}

package/types/form.d.ts

@@ -0,0 +1,12 @@
+import { NewtvUIComponent } from './component'
+
+export declare class newtvForm extends NewtvUIComponent {
+  inline: boolean
+  formWidth: string
+  labelWidth: string
+  form: {}
+  formData: {}
+  rules: {}
+  formCol: {}
+  disabled: boolean
+}

package/types/header.d.ts

@@ -0,0 +1,10 @@
+import { NewtvUIComponent } from './component'
+
+export declare class newtvHeader extends NewtvUIComponent {
+  title: string
+  logo: string
+  logoHref: string
+  username: string
+  portrait: string
+  mainMenuList: {}
+}

package/types/index.d.ts

@@ -0,0 +1,4 @@
+export * from './newtv-ui'
+
+import * as newtvUI from './newtv-ui'
+export default newtvUI

package/types/leftMenu.d.ts

@@ -0,0 +1,14 @@
+import { NewtvUIComponent } from './component'
+
+export declare class newtvLeftMenu extends NewtvUIComponent {
+  title: string
+  defaultActive: string
+  uniqueOpened: boolean
+  backgroundColor: string
+  textColor: string
+  activeTextColor: string
+  tooltip: boolean
+  router: boolean
+  isCollapse: boolean
+  items: []
+}

package/types/list.d.ts

@@ -0,0 +1,8 @@
+import { NewtvUIComponent } from './component'
+
+export type ListType = 'single' | 'multiple'
+
+export declare class newtvList extends NewtvUIComponent {
+  type: ListType
+  listData: []
+}

package/types/newtv-ui.d.ts

@@ -0,0 +1,23 @@
+import Vue, { PluginObject } from 'vue'
+import { NewtvUIComponent } from './component'
+
+import { newtvDashboard } from './dashboard'
+import { newtvForm } from './form'
+import { newtvHeader } from './header'
+import { newtvLeftMenu } from './leftMenu'
+import { newtvList } from './list'
+import { newtvSecondNav } from './secondNav'
+import { newtvTable } from './table'
+
+
+export function install (vue: typeof Vue): void
+
+export type Component = NewtvUIComponent
+
+export class Dashboard extends newtvDashboard {}
+export class Form extends newtvForm {}
+export class Header extends newtvHeader {}
+export class LeftMenu extends newtvLeftMenu {}
+export class List extends newtvList {}
+export class SecondNav extends newtvSecondNav {}
+export class Table extends newtvTable {}

package/types/secondNav.d.ts

@@ -0,0 +1,13 @@
+import { NewtvUIComponent } from './component'
+
+export declare class newtvSecondNav extends NewtvUIComponent {
+  title: string
+  nodeKey: string
+  tooltip: boolean
+  currentNodeKey: string
+  filter: boolean
+  asideWidth: string
+  filterNodeMethod: (done: Function) => void
+  props: {}
+  data: []
+}

package/types/table.d.ts

@@ -0,0 +1,14 @@
+import { NewtvUIComponent } from './component'
+
+export declare class newtvTable extends NewtvUIComponent {
+  defaultSort: {}
+  tableCols: []
+  tableData: string
+  stripe: boolean
+  border: boolean
+  showPagination: boolean
+  showOverflowTooltip: boolean
+  rowClassName: (done: Function) => any | string
+  spanMethod: () => any
+  paginationOption: {}
+}