vxe-pc-ui 0.2.0 → 0.4.0

package/styles/components/pager.scss

@@ -5,7 +5,7 @@
   position: relative;
   display: flex;
   align-items: center;
-  color: var(--vxe-font-color);
+  color: var(--vxe-ui-font-color);
   font-family: var(--vxe-font-family);
   text-align: right;
   background-color: var(--vxe-ui-pager-background-color);
@@ -246,7 +246,7 @@
   .vxe-pager--jump .vxe-pager--goto {
     border-radius: var(--vxe-border-radius);
     border: 1px solid var(--vxe-ui-input-border-color);
-    color: var(--vxe-font-color);
+    color: var(--vxe-ui-font-color);
     transition: border .2s ease-in-out;
     padding: 0 0.4em;
     background-color: var(--vxe-ui-input-background-color);

package/styles/components/pulldown.scss

@@ -3,7 +3,7 @@
 .vxe-pulldown {
   position: relative;
   display: inline-block;
-  color: var(--vxe-font-color);
+  color: var(--vxe-ui-font-color);
   text-align: left;
 }
 
@@ -12,7 +12,7 @@
   position: absolute;
   left: 0;
   padding: 4px 0;
-  color: var(--vxe-font-color);
+  color: var(--vxe-ui-font-color);
   text-align: left;
   &:not(.is--transfer) {
     min-width: 100%;

package/styles/components/select.scss

@@ -4,7 +4,7 @@
   position: relative;
   display: inline-block;
   width: 180px;
-  color: var(--vxe-font-color);
+  color: var(--vxe-ui-font-color);
   text-align: left;
   & > .vxe-input {
     .vxe-input--inner {
@@ -52,7 +52,7 @@
   position: absolute;
   left: 0;
   padding: 4px 0;
-  color: var(--vxe-font-color);
+  color: var(--vxe-ui-font-color);
   text-align: left;
   &:not(.is--transfer) {
     min-width: 100%;

package/styles/components/switch.scss

@@ -1,6 +1,6 @@
 .vxe-switch {
   display: inline-block;
-  color: var(--vxe-font-color);
+  color: var(--vxe-ui-font-color);
   vertical-align: middle;
   padding: 0.4em;
   user-select: none;

package/styles/components/tabs.scss

@@ -5,11 +5,6 @@
 }
 .vxe-tabs-header {
   position: relative;
-}
-.vxe-tabs-header--wrapper {
-  position: relative;
-  display: flex;
-  flex-direction: row;
   &::after {
     content: "";
     position: absolute;
@@ -20,6 +15,11 @@
     background-color: #e4e7ed;
   }
 }
+.vxe-tabs-header--wrapper {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+}
 .vxe-tab-header--item {
   position: relative;
   padding: 0 16px;
@@ -28,9 +28,13 @@
     color: var(--vxe-ui-font-primary-color);;
   }
 }
+.vxe-tabs-header--active-line-card,
+.vxe-tabs-header--active-line-border-card,
 .vxe-tab-header--item-name {
   height: 40px;
   line-height: 40px;
+}
+.vxe-tab-header--item-name {
   border-bottom: 2px solid transparent;
   @include createAnimationTransition(color, .3s);
 }
@@ -41,12 +45,22 @@
     display: block;
   }
 }
-.vxe-tabs-header--active-line {
+.vxe-tabs-header--active-line-card,
+.vxe-tabs-header--active-line-border-card {
+  @include createAnimationTransition(all, .3s);
+}
+.vxe-tabs-header--active-line-default,
+.vxe-tabs-header--active-line-card,
+.vxe-tabs-header--active-line-border-card {
   display: none;
 }
+.vxe-tabs-header--active-line-border-card {
+  border-left: 1px solid #e4e7ed;
+  border-right: 1px solid #e4e7ed;
+}
 
 .vxe-tabs--default {
-  .vxe-tabs-header--active-line {
+  .vxe-tabs-header--active-line-default {
     display: block;
     position: absolute;
     bottom: -1px;
@@ -60,6 +74,16 @@
 }
 
 .vxe-tabs--card {
+  .vxe-tabs-header--active-line-card {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 4px;
+    border: 1px solid var(--vxe-ui-font-primary-color);
+    pointer-events: none;
+    z-index: 1;
+  }
   .vxe-tabs-header {
     border-top: 1px solid #e4e7ed;
     border-left: 1px solid #e4e7ed;
@@ -75,6 +99,19 @@
   }
 }
 .vxe-tabs--border-card {
+  .vxe-tabs-header--wrapper {
+    z-index: 2;
+  }
+  .vxe-tabs-header--active-line-border-card {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 4px;
+    background-color: #ffffff;
+    pointer-events: none;
+    z-index: 1;
+  }
   .vxe-tab-pane--item {
     border-bottom: 1px solid #e4e7ed;
     border-left: 1px solid #e4e7ed;
@@ -86,31 +123,4 @@
     border-right: 1px solid #e4e7ed;
     background-color: #f5f7fa;
   }
-  .vxe-tab-header--item {
-    &.is--active {
-      background-color: #ffffff;
-      &::before {
-        content: "";
-        position: absolute;
-        top: 0;
-        left: -1px;
-        width: calc(100% + 2px);
-        height: 100%;
-        border-left: 1px solid #e4e7ed;
-        border-right: 1px solid #e4e7ed;
-        pointer-events: none;
-      }
-      &::after {
-        content: "";
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        width: 100%;
-        height: 1px;
-        background-color: var(--vxe-ui-layout-background-color);
-        pointer-events: none;
-        z-index: 1;
-      }
-    }
-  }
 }

package/styles/components/textarea.scss

@@ -14,7 +14,7 @@
   outline: 0;
   font-size: inherit;
   padding: 0 0.6em;
-  color: var(--vxe-font-color);
+  color: var(--vxe-ui-font-color);
   line-height: inherit;
   border: 1px solid var(--vxe-ui-input-border-color);
   background-color: var(--vxe-ui-textarea-background-color);
@@ -35,7 +35,7 @@
 .vxe-textarea--inner,
 .vxe-textarea--autosize {
   line-height: var(--vxe-ui-textarea-line-height);
-  color: var(--vxe-font-color);
+  color: var(--vxe-ui-font-color);
   font-family: var(--vxe-font-family);
 }
 

package/types/all.d.ts

@@ -84,6 +84,7 @@ export * from './components/layout-container'
 export * from './components/layout-footer'
 export * from './components/layout-header'
 export * from './components/list-design'
+export * from './components/list'
 export * from './components/loading'
 export * from './components/modal'
 export * from './components/optgroup'

package/types/components/list.d.ts

@@ -0,0 +1,166 @@
+import { RenderFunction, SetupContext, Ref, ComponentPublicInstance } from 'vue'
+import { defineVxeComponent, VxeComponentBase, VxeComponentEvent, VxeComponentSize } from '../tool'
+
+/* eslint-disable no-use-before-define,@typescript-eslint/ban-types */
+
+export declare const VxeList: defineVxeComponent<VxeListProps, VxeListEventProps>
+
+export type VxeListInstance = ComponentPublicInstance<VxeListProps, VxeListConstructor>
+
+export interface VxeListConstructor extends VxeComponentBase, VxeListMethods {
+  props: VxeListProps
+  context: SetupContext<VxeListEmits>
+  reactData: ListReactData
+  internalData: ListInternalData
+  getRefMaps(): ListPrivateRef
+  getComputeMaps(): ListPrivateComputed
+  renderVN: RenderFunction
+}
+
+export interface ListPrivateRef {
+  refElem: Ref<HTMLDivElement | undefined>
+}
+export interface VxeListPrivateRef extends ListPrivateRef { }
+
+export namespace VxeListPropTypes {
+  export type Size = VxeComponentSize
+  export type Data = any[]
+  export type Height = number | string
+  export type MaxHeight = number | string
+  export type Loading = boolean
+  export type AutoResize = boolean
+  export type ClassName = string | ((params: { $list: VxeListConstructor }) => string)
+  export type SyncResize = boolean | string | number
+  export interface ScrollY {
+    /**
+     * 指定大于指定行时自动启动纵向虚拟滚动，如果为 0 则总是启用，如果为 -1 则关闭
+     */
+    gt?: number
+    /**
+     * 指定每次渲染的数据偏移量，偏移量越大渲染次数就越少，但每次渲染耗时就越久
+     */
+    oSize?: number
+    /**
+     * 指定列表项的 className
+     */
+    sItem?: string
+    /**
+     * 是否启用
+     */
+    enabled?: boolean
+  }
+}
+
+export type VxeListProps<D = any> = {
+  size?: VxeListPropTypes.Size
+  data?: D[]
+  height?: VxeListPropTypes.Height
+  maxHeight?: VxeListPropTypes.MaxHeight
+  loading?: VxeListPropTypes.Loading
+  autoResize?: VxeListPropTypes.AutoResize
+  syncResize?: VxeListPropTypes.SyncResize
+  className?: VxeListPropTypes.ClassName
+  scrollY?: VxeListPropTypes.ScrollY
+}
+
+export interface ListPrivateComputed {
+}
+export interface VxeListPrivateComputed extends ListPrivateComputed { }
+
+export interface ListReactData {
+  scrollYLoad: boolean
+  bodyHeight: number
+  rowHeight: number
+  topSpaceHeight: number
+  items: any[]
+}
+
+export interface ListInternalData {
+  fullData: any[]
+  lastScrollLeft: number
+  lastScrollTop: number
+  scrollYStore: {
+    startIndex: number
+    endIndex: number
+    visibleSize: number
+    offsetSize: number
+    rowHeight: number
+  }
+}
+
+export interface ListMethods {
+  dispatchEvent(type: ValueOf<VxeListEmits>, params: any, evnt: Event): void
+  /**
+   * 加载数据
+   * @param data 列表数据
+   */
+  loadData(data: any[]): Promise<any>
+
+  /**
+   * 加载数据
+   * @param data 列表数据
+   */
+  reloadData(data: any[]): Promise<any>
+
+  /**
+   * 重新计算列表
+   */
+  recalculate(): Promise<void>
+
+  /**
+   * 如果有滚动条，则滚动到对应的位置
+   * @param scrollLeft 左边距离
+   * @param scrollTop 顶部距离
+   */
+  scrollTo(scrollLeft: number | null, scrollTop?: number | null): Promise<void>
+
+  /**
+   * 刷新滚动操作，手动同步滚动相关位置
+   */
+  refreshScroll(): Promise<void>
+
+  /**
+   * 手动清除滚动相关信息，还原到初始状态
+   */
+  clearScroll(): Promise<void>
+}
+export interface VxeListMethods extends ListMethods { }
+
+export interface ListPrivateMethods { }
+export interface VxeListPrivateMethods extends ListPrivateMethods { }
+
+export type VxeListEmits = [
+  'scroll'
+]
+
+export namespace VxeListDefines {
+  export interface ListEventParams extends VxeEvent {
+    $list: VxeListConstructor
+  }
+
+  export interface ScrollParams { }
+  export interface ScrollEventParams extends ListEventParams, ScrollParams { }
+}
+
+export type VxeListEventProps = {
+  onScroll?: VxeListEvents.Scroll
+}
+
+export interface VxeListListeners {
+  scroll?: VxeListEvents.Scroll
+}
+
+export namespace VxeListEvents {
+  export type Scroll = (params: VxeListDefines.ScrollEventParams) => void
+}
+
+export namespace VxeListSlotTypes {
+  export interface DefaultSlotParams {}
+}
+
+export interface VxeListSlots {
+  default: (params: VxeListSlotTypes.DefaultSlotParams) => any
+}
+
+export const List: typeof VxeList
+export default VxeList

package/types/components/tab-pane.d.ts

@@ -23,7 +23,7 @@ export interface VxeTabPanePrivateRef extends TabPanePrivateRef { }
 
 export namespace VxeTabPanePropTypes {
   export type Title = string | number
-  export type Name = string | number | boolean
+  export type Name = string | number
 }
 
 export type VxeTabPaneProps = {

package/types/components/tabs.d.ts

@@ -1,6 +1,6 @@
 import { RenderFunction, SetupContext, Ref, ComponentPublicInstance } from 'vue'
 import { defineVxeComponent, VxeComponentBase, VxeComponentEvent } from '../tool'
-import { VxeTabPaneProps, VxeTabPaneDefines } from './tab-pane'
+import { VxeTabPaneProps, VxeTabPaneDefines, VxeTabPanePropTypes } from './tab-pane'
 
 /* eslint-disable no-use-before-define,@typescript-eslint/ban-types */
 
@@ -23,7 +23,7 @@ export interface TabsPrivateRef {
 export interface VxeTabsPrivateRef extends TabsPrivateRef { }
 
 export namespace VxeTabsPropTypes {
-  export type ModelValue = undefined | null | string | number | boolean
+  export type ModelValue = undefined | null | VxeTabPanePropTypes.Name
   export type Options = VxeTabPaneProps[]
   export type DestroyOnClose = boolean
   export type Type = null | '' | 'default' | 'card' | 'border-card'

package/types/ui/global-config.d.ts

@@ -1,22 +1,43 @@
 import { VxeComponentSize } from '../tool'
-import { VxeTooltipProps } from '../components/tooltip'
-import { VxePagerProps } from '../components/pager'
-import { VxeFormProps } from '../components/form'
-import { VxeInputProps } from '../components/input'
-import { VxeTextareaProps } from '../components/textarea'
-import { VxeSelectProps } from '../components/select'
+
+import { VxeAnchorProps } from '../components/anchor'
+import { VxeAnchorLinkProps } from '../components/anchor-link'
+import { VxeBreadcrumbProps } from '../components/breadcrumb'
+import { VxeBreadcrumbItemProps } from '../components/breadcrumb-item'
 import { VxeButtonProps } from '../components/button'
 import { VxeButtonGroupProps } from '../components/button-group'
+import { VxeCheckboxProps } from '../components/checkbox'
+import { VxeCheckboxGroupProps } from '../components/checkbox-group'
+import { VxeColProps } from '../components/col'
+import { VxeFormProps } from '../components/form'
+import { VxeFormDesignProps } from '../components/form-design'
+import { VxeFormGatherProps } from '../components/form-gather'
+import { VxeFormItemProps } from '../components/form-item'
+import { VxeIconProps } from '../components/icon'
+import { VxeInputProps } from '../components/input'
+import { VxeLayoutAsideProps } from '../components/layout-aside'
+import { VxeLayoutBodyProps } from '../components/layout-body'
+import { VxeLayoutContainerProps } from '../components/layout-container'
+import { VxeLayoutFooterProps } from '../components/layout-footer'
+import { VxeLayoutHeaderProps } from '../components/layout-header'
+import { VxeListDesignProps } from '../components/list-design'
+import { VxeListProps } from '../components/list'
+import { VxeLoadingProps } from '../components/loading'
+import { VxeModalProps } from '../components/modal'
+import { VxeOptgroupProps } from '../components/optgroup'
+import { VxeOptionProps } from '../components/option'
+import { VxePagerProps } from '../components/pager'
+import { VxePulldownProps } from '../components/pulldown'
 import { VxeRadioProps } from '../components/radio'
 import { VxeRadioButtonProps } from '../components/radio-button'
 import { VxeRadioGroupProps } from '../components/radio-group'
-import { VxeCheckboxProps } from '../components/checkbox'
-import { VxeCheckboxGroupProps } from '../components/checkbox-group'
+import { VxeRowProps } from '../components/row'
+import { VxeSelectProps } from '../components/select'
 import { VxeSwitchProps } from '../components/switch'
-import { VxeModalProps } from '../components/modal'
-import { VxeListProps } from '../components/list'
-import { VxeBreadcrumbProps } from '../components/breadcrumb'
-import { VxeFormDesignProps } from '../components/form-design'
+import { VxeTabPaneProps } from '../components/tab-pane'
+import { VxeTabsProps } from '../components/tabs'
+import { VxeTextareaProps } from '../components/textarea'
+import { VxeTooltipProps } from '../components/tooltip'
 
 /**
  * 全局参数对象
@@ -28,25 +49,46 @@ export interface VxeGlobalConfig {
   theme?: null | '' | 'default' | 'dark'
   emptyCell?: string
   loadingText?: string
+  resizeInterval?: number
 
   i18n?(key: string, args?: any): string
 
-  tooltip?: VxeTooltipProps
-  pager?: VxePagerProps
-  form?: VxeFormProps
-  input?: VxeInputProps
-  textarea?: VxeTextareaProps
-  select?: VxeSelectProps
+  anchor?: VxeAnchorProps
+  anchorLink?: VxeAnchorLinkProps
+  breadcrumb?: VxeBreadcrumbProps
+  breadcrumbItem?: VxeBreadcrumbItemProps
   button?: VxeButtonProps
   buttonGroup?: VxeButtonGroupProps
-  radio?: VxeRadioProps
-  radioButton?: VxeRadioButtonProps
-  radioGroup?: VxeRadioGroupProps
   checkbox?: VxeCheckboxProps
   checkboxGroup?: VxeCheckboxGroupProps
-  switch?: VxeSwitchProps
-  modal?: VxeModalProps
-  list?: VxeListProps
-  breadcrumb?: VxeBreadcrumbProps,
+  col?: VxeColProps
+  form?: VxeFormProps
   formDesign?: VxeFormDesignProps
+  formGather?: VxeFormGatherProps
+  formItem?: VxeFormItemProps
+  icon?: VxeIconProps
+  input?: VxeInputProps
+  layoutAside?: VxeLayoutAsideProps
+  layoutBody?: VxeLayoutBodyProps
+  layoutContainer?: VxeLayoutContainerProps
+  layoutFooter?: VxeLayoutFooterProps
+  layoutHeader?: VxeLayoutHeaderProps
+  listDesign?: VxeListDesignProps
+  list?: VxeListProps
+  loading?: VxeLoadingProps
+  modal?: VxeModalProps
+  optgroup?: VxeOptgroupProps
+  option?: VxeOptionProps
+  pager?: VxePagerProps
+  pulldown?: VxePulldownProps
+  radio?: VxeRadioProps
+  radioButton?: VxeRadioButtonProps
+  radioGroup?: VxeRadioGroupProps
+  row?: VxeRowProps
+  select?: VxeSelectProps
+  'switch'?: VxeSwitchProps
+  tabPane?: VxeTabPaneProps
+  tabs?: VxeTabsProps
+  textarea?: VxeTextareaProps
+  tooltip?: VxeTooltipProps
 }