vxe-pc-ui 4.11.28 → 4.11.29

package/packages/timeline/src/timeline.ts

@@ -0,0 +1,71 @@
+import { ref, h, reactive, PropType } from 'vue'
+import { defineVxeComponent } from '../../ui/src/comp'
+import XEUtils from 'xe-utils'
+import { getConfig, createEvent } from '../../ui'
+
+import type { TimelineReactData, VxeTimelinePropTypes, TimelinePrivateRef, VxeTimelineEmits, VxeTimelinePrivateComputed, TimelineMethods, TimelinePrivateMethods, VxeTimelineConstructor, VxeTimelinePrivateMethods, ValueOf } from '../../../types'
+
+export default defineVxeComponent({
+  name: 'VxeTimeline',
+  props: {
+    size: {
+      type: String as PropType<VxeTimelinePropTypes.Size>,
+      default: () => getConfig().timeline.size || getConfig().size
+    }
+  },
+  emits: [
+  ] as VxeTimelineEmits,
+  setup (props, context) {
+    const { emit } = context
+
+    const xID = XEUtils.uniqueId()
+
+    const refElem = ref<HTMLDivElement>()
+
+    const reactData = reactive<TimelineReactData>({})
+
+    const refMaps: TimelinePrivateRef = {
+      refElem
+    }
+
+    const computeMaps: VxeTimelinePrivateComputed = {
+    }
+
+    const $xeTimeline = {
+      xID,
+      props,
+      context,
+      reactData,
+
+      getRefMaps: () => refMaps,
+      getComputeMaps: () => computeMaps
+    } as unknown as VxeTimelineConstructor & VxeTimelinePrivateMethods
+
+    const dispatchEvent = (type: ValueOf<VxeTimelineEmits>, params: Record<string, any>, evnt: Event | null) => {
+      emit(type, createEvent(evnt, { $timeline: $xeTimeline }, params))
+    }
+
+    const tagMethods: TimelineMethods = {
+      dispatchEvent
+    }
+
+    const tagPrivateMethods: TimelinePrivateMethods = {
+    }
+
+    Object.assign($xeTimeline, tagMethods, tagPrivateMethods)
+
+    const renderVN = () => {
+      return h('div', {
+        ref: refElem,
+        class: 'vxe-timeline'
+      })
+    }
+
+    $xeTimeline.renderVN = renderVN
+
+    return $xeTimeline
+  },
+  render () {
+    return this.renderVN()
+  }
+})

package/packages/timeline-item/index.ts

@@ -0,0 +1,16 @@
+import { App } from 'vue'
+import { VxeUI } from '@vxe-ui/core'
+import VxeTimelineItemComponent from '../timeline/src/timeline-item'
+import { dynamicApp } from '../dynamics'
+
+export const VxeTimelineItem = Object.assign({}, VxeTimelineItemComponent, {
+  install (app: App) {
+    app.component(VxeTimelineItemComponent.name as string, VxeTimelineItemComponent)
+  }
+})
+
+dynamicApp.use(VxeTimelineItem)
+VxeUI.component(VxeTimelineItemComponent)
+
+export const TimelineItem = VxeTimelineItem
+export default VxeTimelineItem

package/packages/tour/index.ts

@@ -0,0 +1,16 @@
+import { App } from 'vue'
+import { VxeUI } from '@vxe-ui/core'
+import VxeTourComponent from './src/tour'
+import { dynamicApp } from '../dynamics'
+
+export const VxeTour = Object.assign({}, VxeTourComponent, {
+  install (app: App) {
+    app.component(VxeTourComponent.name as string, VxeTourComponent)
+  }
+})
+
+dynamicApp.use(VxeTour)
+VxeUI.component(VxeTourComponent)
+
+export const Tour = VxeTour
+export default VxeTour

package/packages/tour/src/tour.ts

@@ -0,0 +1,71 @@
+import { ref, h, reactive, PropType } from 'vue'
+import { defineVxeComponent } from '../../ui/src/comp'
+import XEUtils from 'xe-utils'
+import { getConfig, createEvent } from '../../ui'
+
+import type { TourReactData, VxeTourPropTypes, TourPrivateRef, VxeTourEmits, VxeTourPrivateComputed, TourMethods, TourPrivateMethods, VxeTourConstructor, VxeTourPrivateMethods, ValueOf } from '../../../types'
+
+export default defineVxeComponent({
+  name: 'VxeTour',
+  props: {
+    size: {
+      type: String as PropType<VxeTourPropTypes.Size>,
+      default: () => getConfig().tour.size || getConfig().size
+    }
+  },
+  emits: [
+  ] as VxeTourEmits,
+  setup (props, context) {
+    const { emit } = context
+
+    const xID = XEUtils.uniqueId()
+
+    const refElem = ref<HTMLDivElement>()
+
+    const reactData = reactive<TourReactData>({})
+
+    const refMaps: TourPrivateRef = {
+      refElem
+    }
+
+    const computeMaps: VxeTourPrivateComputed = {
+    }
+
+    const $xeTour = {
+      xID,
+      props,
+      context,
+      reactData,
+
+      getRefMaps: () => refMaps,
+      getComputeMaps: () => computeMaps
+    } as unknown as VxeTourConstructor & VxeTourPrivateMethods
+
+    const dispatchEvent = (type: ValueOf<VxeTourEmits>, params: Record<string, any>, evnt: Event | null) => {
+      emit(type, createEvent(evnt, { $tour: $xeTour }, params))
+    }
+
+    const tagMethods: TourMethods = {
+      dispatchEvent
+    }
+
+    const tagPrivateMethods: TourPrivateMethods = {
+    }
+
+    Object.assign($xeTour, tagMethods, tagPrivateMethods)
+
+    const renderVN = () => {
+      return h('div', {
+        ref: refElem,
+        class: 'vxe-tour'
+      })
+    }
+
+    $xeTour.renderVN = renderVN
+
+    return $xeTour
+  },
+  render () {
+    return this.renderVN()
+  }
+})

package/packages/ui/index.ts

@@ -28,6 +28,11 @@ setConfig({
   anchor: {},
   anchorLink: {},
   avatar: {},
+  backtop: {
+    showIcon: true,
+    showContent: true,
+    threshold: 20
+  },
   badge: {},
   breadcrumb: {
     separator: '/'
@@ -60,6 +65,9 @@ setConfig({
     interval: 5000
   },
   carouselItem: {},
+  cascader: {
+    autoClose: true
+  },
   checkbox: {},
   checkboxButton: {},
   checkboxGroup: {},
@@ -297,6 +305,7 @@ setConfig({
   rate: {},
   result: {},
   row: {},
+  segmented: {},
   select: {
     multiCharOverflow: 8,
     remoteConfig: {
@@ -361,6 +370,8 @@ setConfig({
   textarea: {
     resize: 'none'
   },
+  timeline: {},
+  timelineItem: {},
   tip: {},
   tooltip: {
     // size: null,
@@ -658,7 +669,10 @@ setIcon({
   SPLIT_TOP_ACTION: iconPrefix + 'arrow-up',
   SPLIT_BOTTOM_ACTION: iconPrefix + 'arrow-down',
   SPLIT_LEFT_ACTION: iconPrefix + 'arrow-left',
-  SPLIT_RIGHT_ACTION: iconPrefix + 'arrow-right'
+  SPLIT_RIGHT_ACTION: iconPrefix + 'arrow-right',
+
+  // backtop
+  BACKTOP_TOP: iconPrefix + 'top'
 })
 
 export * from '@vxe-ui/core'

package/styles/all.scss

@@ -4,6 +4,7 @@
 @use './components/anchor.scss';
 @use './components/anchor-link.scss';
 @use './components/avatar.scss';
+@use './components/backtop.scss';
 @use './components/badge.scss';
 @use './components/breadcrumb.scss';
 @use './components/breadcrumb-item.scss';
@@ -13,6 +14,7 @@
 @use './components/card.scss';
 @use './components/carousel.scss';
 @use './components/carousel-item.scss';
+@use './components/cascader.scss';
 @use './components/checkbox.scss';
 @use './components/checkbox-button.scss';
 @use './components/checkbox-group.scss';
@@ -44,6 +46,7 @@
 @use './components/link.scss';
 @use './components/list.scss';
 @use './components/loading.scss';
+@use './components/mention.scss';
 @use './components/menu.scss';
 @use './components/modal.scss';
 @use './components/notice-bar.scss';
@@ -61,6 +64,7 @@
 @use './components/rate.scss';
 @use './components/result.scss';
 @use './components/row.scss';
+@use './components/segmented.scss';
 @use './components/select.scss';
 @use './components/split.scss';
 @use './components/split-pane.scss';
@@ -74,8 +78,11 @@
 @use './components/text-ellipsis.scss';
 @use './components/text.scss';
 @use './components/textarea.scss';
+@use './components/timeline.scss';
+@use './components/timeline-item.scss';
 @use './components/tip.scss';
 @use './components/tooltip.scss';
+@use './components/tour.scss';
 @use './components/tree.scss';
 @use './components/tree-select.scss';
 @use './components/upload.scss';

package/styles/components/backtop.scss

@@ -0,0 +1,111 @@
+@use "sass:map";
+@use "sass:list";
+
+$backtopThemeList: (
+  (
+    name: "primary",
+    fontColot: #fff,
+    bgColor: var(--vxe-ui-font-primary-color)
+  ),
+  (
+    name: "success",
+    fontColot: #fff,
+    bgColor: var(--vxe-ui-status-success-color)
+  ),
+  (
+    name: "info",
+    fontColot: #fff,
+    bgColor: var(--vxe-ui-status-info-color)
+  ),
+  (
+    name: "warning",
+    fontColot: #fff,
+    bgColor: var(--vxe-ui-status-warning-color)
+  ),
+  (
+    name: "danger",
+    fontColot: #fff,
+    bgColor: var(--vxe-ui-status-danger-color)
+  ),
+  (
+    name: "error",
+    fontColot: #fff,
+    bgColor: var(--vxe-ui-status-error-color)
+  )
+);
+
+.vxe-backtop {
+  display: inline-flex;
+  position: absolute;
+  opacity: 0;
+  right: 1.6em;
+  bottom: 1.6em;
+  color: var(--vxe-ui-font-color);
+  font-family: var(--vxe-ui-font-family);
+  background-color: var(--vxe-ui-layout-background-color);
+  border-radius: var(--vxe-ui-base-border-radius);;
+  transition: all 0.3s;
+  cursor: pointer;
+  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3);
+  z-index: 9;
+  &.is--visible {
+    opacity: 1;
+  }
+  &.is--circle {
+    border-radius: 50%;
+    .vxe-backtop--inner {
+      border-radius: 50%;
+    }
+  }
+  &.is--fixed {
+    position: fixed;
+  }
+  &.is--absolute {
+    position: absolute;
+  }
+}
+
+.vxe-backtop--inner {
+  min-width: 3em;
+  min-height: 3em;
+  padding: 0.4em;
+  display: flex;
+  text-align: center;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--vxe-ui-base-border-radius);;
+}
+
+.vxe-backtop {
+  &:hover {
+    color: var(--vxe-ui-font-primary-color);
+    .vxe-backtop--inner {
+      background-color: rgba(0, 0, 0, 0.1);
+    }
+  }
+  @for $index from 0 to list.length($backtopThemeList) {
+    $item: list.nth($backtopThemeList, $index + 1);
+    &.theme--#{map.get($item, name)} {
+      color: map.get($item, fontColot);
+      background-color: map.get($item, bgColor);
+    }
+  }
+}
+
+.vxe-backtop--icon {
+  font-size: 1.4em;
+}
+
+.vxe-backtop {
+  font-size: var(--vxe-ui-font-size-default);
+  &.size--medium {
+    font-size: var(--vxe-ui-font-size-medium);
+  }
+  &.size--small {
+    font-size: var(--vxe-ui-font-size-small);
+  }
+  &.size--mini {
+    font-size: var(--vxe-ui-font-size-mini);
+  }
+}

package/styles/components/cascader.scss

@@ -0,0 +1,140 @@
+@use '../helpers/baseMixin.scss';
+@use '../helpers/placement.scss';
+
+.vxe-cascader {
+  position: relative;
+  display: inline-block;
+  width: 180px;
+  color: var(--vxe-ui-font-color);
+  text-align: left;
+  & > .vxe-input {
+    .vxe-input--inner {
+      cursor: pointer;
+    }
+  }
+  &.is--filterable {
+    .vxe-cascader-tree--wrapper {
+      padding-top: 0;
+    }
+    .vxe-cascader--panel-header {
+      border-top: 1px solid var(--vxe-ui-base-popup-border-color);
+    }
+  }
+  &.is--disabled {
+    & > .vxe-input {
+      .vxe-input--inner {
+        cursor: no-drop;
+      }
+    }
+  }
+  &.is--loading {
+    & > .vxe-input {
+      .vxe-input--inner {
+        cursor: progress;
+      }
+    }
+  }
+  & > .vxe-input {
+    width: 100%;
+    .vxe-input--suffix-icon > i {
+      display: inline-block;
+      @include baseMixin.createAnimationTransition(transform, .2s);
+    }
+  }
+  &.is--active {
+    &:not(.is--filter) {
+      & > .vxe-input {
+        border-color: var(--vxe-ui-font-primary-color);
+      }
+    }
+  }
+}
+.vxe-cascader--readonly {
+  color: var(--vxe-ui-font-color);
+  display: inline-flex;
+}
+
+.vxe-cascader--panel {
+  pointer-events: none;
+  @include placement.createPlacementPanel();
+}
+
+.vxe-cascader--panel-search {
+  display: block;
+  .vxe-cascader-search--input {
+    width: 100%;
+  }
+}
+
+.vxe-cascader--header-button {
+  display: flex;
+  flex-direction: row;
+  white-space: nowrap;
+}
+.vxe-cascader--header-total {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  padding-left: 0.8em;
+}
+.vxe-cascader--header-btns {
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+  justify-content: right;
+}
+
+.vxe-cascader--panel-wrapper {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  border-radius: var(--vxe-ui-base-border-radius);
+  border: 1px solid var(--vxe-ui-base-popup-border-color);
+  box-shadow: var(--vxe-ui-base-popup-box-shadow);
+  background-color: var(--vxe-ui-layout-background-color);
+  pointer-events: auto;
+}
+
+.vxe-cascader--panel-search {
+  display: block;
+  padding: var(--vxe-ui-layout-padding-default);
+  .vxe-cascader-search--input {
+    width: 100%;
+  }
+}
+
+.vxe-cascader--panel-header {
+  border-bottom: 1px solid var(--vxe-ui-base-popup-border-color);
+}
+
+.vxe-cascader--panel-footer {
+  border-top: 1px solid var(--vxe-ui-base-popup-border-color);
+}
+
+.vxe-cascader--panel-header,
+.vxe-cascader--panel-footer {
+  padding: 4px 0;
+}
+
+.vxe-cascader-tree--wrapper {
+  position: relative;
+  overflow: auto;
+  padding: var(--vxe-ui-layout-padding-default);
+  outline: 0;
+}
+
+.vxe-cascader,
+.vxe-cascader--panel {
+  font-size: var(--vxe-ui-font-size-default);
+  &.size--medium {
+    font-size: var(--vxe-ui-font-size-medium);
+  }
+  &.size--small {
+    font-size: var(--vxe-ui-font-size-small);
+  }
+  &.size--mini {
+    font-size: var(--vxe-ui-font-size-mini);
+  }
+}