vxe-pc-ui 3.0.0 → 3.0.2

package/es/calendar/style.css

@@ -0,0 +1,247 @@
+.vxe-calendar {
+  display: inline-flex;
+  flex-direction: column;
+  width: 100%;
+  height: 38em;
+  border: 1px solid var(--vxe-ui-base-popup-border-color);
+  border-radius: var(--vxe-ui-base-border-radius);
+}
+.vxe-calendar.type--date .vxe-calendar--body td {
+  width: 14.28571%;
+}
+.vxe-calendar.type--week .vxe-calendar--body td {
+  width: 12%;
+}
+.vxe-calendar.type--week .vxe-calendar--body td:first-child {
+  width: 14%;
+}
+.vxe-calendar.type--quarter .vxe-calendar--body td {
+  width: 50%;
+}
+.vxe-calendar.type--month .vxe-calendar--body td, .vxe-calendar.type--year .vxe-calendar--body td {
+  width: 25%;
+}
+
+.vxe-calendar--confirm {
+  outline: 0;
+  border: 1px solid var(--vxe-ui-input-border-color);
+  border-radius: var(--vxe-ui-base-border-radius);
+  cursor: pointer;
+  color: var(--vxe-ui-input-date-time-confirm-button-color);
+  border-color: var(--vxe-ui-font-primary-color);
+  background-color: var(--vxe-ui-font-primary-color);
+  padding: 0 0.5em;
+}
+.vxe-calendar--confirm:hover {
+  background-color: var(--vxe-ui-font-primary-lighten-color);
+  border-color: var(--vxe-ui-font-primary-lighten-color);
+}
+.vxe-calendar--confirm:active {
+  background-color: var(--vxe-ui-font-primary-darken-color);
+  border-color: var(--vxe-ui-font-primary-darken-color);
+}
+
+.vxe-calendar--header {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: row;
+  padding: var(--vxe-ui-layout-padding-default);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  border-bottom: 1px solid var(--vxe-ui-input-border-color);
+}
+.vxe-calendar--header .vxe-calendar--type-wrapper {
+  flex-grow: 1;
+}
+.vxe-calendar--header .vxe-calendar--btn-wrapper {
+  flex-shrink: 0;
+  text-align: center;
+}
+
+.vxe-calendar--btn-wrapper {
+  display: flex;
+  flex-direction: row;
+}
+
+.vxe-calendar--btn.is--disabled {
+  color: var(--vxe-ui-font-disabled-color);
+  cursor: no-drop;
+}
+.vxe-calendar--btn:not(.is--disabled) {
+  cursor: pointer;
+}
+.vxe-calendar--btn:not(.is--disabled):hover {
+  background-color: #fff;
+}
+.vxe-calendar--btn:not(.is--disabled):active {
+  background-color: #fff;
+}
+
+.vxe-calendar--body {
+  position: relative;
+  flex-grow: 1;
+  overflow: hidden;
+}
+.vxe-calendar--body table {
+  border: 0;
+  width: 100%;
+  height: 100%;
+  border-spacing: 0;
+  border-collapse: separate;
+  text-align: center;
+  table-layout: fixed;
+}
+
+.vxe-calendar--view-th {
+  font-weight: 700;
+}
+
+.vxe-calendar--view-td {
+  font-weight: normal;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  transition: all 0.1s ease-in-out;
+}
+.vxe-calendar--view-td.is--prev, .vxe-calendar--view-td.is--next {
+  color: var(--vxe-ui-font-disabled-color);
+}
+.vxe-calendar--view-td.is--prev .vxe-calendar--date-label,
+.vxe-calendar--view-td.is--prev .vxe-calendar--date-festival, .vxe-calendar--view-td.is--next .vxe-calendar--date-label,
+.vxe-calendar--view-td.is--next .vxe-calendar--date-festival {
+  color: var(--vxe-ui-font-disabled-color);
+}
+.vxe-calendar--view-td.is--now:not(.is--selected).is--current {
+  color: var(--vxe-ui-font-primary-color);
+}
+.vxe-calendar--view-td.is--now:not(.is--selected).is--current .vxe-calendar--date-label,
+.vxe-calendar--view-td.is--now:not(.is--selected).is--current .vxe-calendar--date-festival {
+  color: var(--vxe-ui-font-primary-color);
+}
+.vxe-calendar--view-td.is--hover {
+  background-color: var(--vxe-ui-base-hover-background-color);
+}
+.vxe-calendar--view-td.is--selected {
+  color: var(--vxe-ui-calendar-selected-color);
+  background-color: var(--vxe-ui-font-primary-color);
+}
+.vxe-calendar--view-td.is--selected.is--prev, .vxe-calendar--view-td.is--selected.is--next {
+  background-color: var(--vxe-ui-font-primary-lighten-color);
+}
+.vxe-calendar--view-td.is--selected .vxe-calendar--date-label,
+.vxe-calendar--view-td.is--selected .vxe-calendar--date-festival {
+  color: var(--vxe-ui-calendar-festival-selected-color);
+}
+.vxe-calendar--view-td.is--selected .vxe-calendar--date-label.is-notice:before {
+  background-color: var(--vxe-ui-calendar-notice-selected-background-color);
+}
+.vxe-calendar--view-td:not(.is--disabled) {
+  cursor: pointer;
+}
+.vxe-calendar--view-td.is--disabled {
+  cursor: no-drop;
+  color: var(--vxe-ui-input-disabled-color);
+  background-color: var(--vxe-ui-input-disabled-background-color);
+}
+.vxe-calendar--view-td.is--disabled .vxe-calendar--date-label,
+.vxe-calendar--view-td.is--disabled .vxe-calendar--date-festival {
+  color: var(--vxe-ui-input-disabled-color);
+}
+
+.vxe-calendar--date-label,
+.vxe-calendar--date-festival {
+  display: block;
+  overflow: hidden;
+}
+
+.vxe-calendar--date-label {
+  position: relative;
+}
+.vxe-calendar--date-label.is-notice:before {
+  content: "";
+  position: absolute;
+  width: 4px;
+  height: 4px;
+  left: 0.8em;
+  top: 0.1em;
+  transform: translateX(-50%);
+  border-radius: 100%;
+  background-color: var(--vxe-ui-input-date-notice-background-color);
+}
+
+.vxe-calendar--date-label--extra {
+  position: absolute;
+  right: 0.1em;
+  top: -0.2em;
+  transform: scale(0.9);
+  color: var(--vxe-ui-input-date-extra-color);
+}
+.vxe-calendar--date-label--extra.is-important {
+  color: var(--vxe-ui-input-date-extra-important-color);
+}
+
+.vxe-calendar--date-festival {
+  color: var(--vxe-ui-input-date-festival-color);
+  height: 14px;
+  line-height: 1;
+  overflow: hidden;
+}
+.vxe-calendar--date-festival.is-important {
+  color: var(--vxe-ui-input-date-festival-important-color);
+}
+
+.vxe-calendar--date-festival--label {
+  display: block;
+  transform: scale(0.8);
+}
+
+@keyframes festivalOverlap2 {
+  0%, 45%, 100% {
+    transform: translateY(0);
+  }
+  50%, 95% {
+    transform: translateY(-14px);
+  }
+}
+@keyframes festivalOverlap3 {
+  0%, 20%, 100% {
+    transform: translateY(0);
+  }
+  25%, 45%, 75%, 95% {
+    transform: translateY(-14px);
+  }
+  50%, 70% {
+    transform: translateY(-28px);
+  }
+}
+.vxe-calendar--date-festival--overlap {
+  display: block;
+  font-size: 12px;
+}
+.vxe-calendar--date-festival--overlap.overlap--2 {
+  animation: festivalOverlap2 6s infinite ease-in-out;
+}
+.vxe-calendar--date-festival--overlap.overlap--3 {
+  animation: festivalOverlap3 9s infinite ease-in-out;
+}
+.vxe-calendar--date-festival--overlap > span {
+  height: 14px;
+  display: block;
+  transform: scale(0.8);
+}
+
+.vxe-calendar {
+  font-size: var(--vxe-ui-font-size-default);
+}
+.vxe-calendar.size--medium {
+  font-size: var(--vxe-ui-font-size-medium);
+}
+.vxe-calendar.size--small {
+  font-size: var(--vxe-ui-font-size-small);
+}
+.vxe-calendar.size--mini {
+  font-size: var(--vxe-ui-font-size-mini);
+}

package/es/calendar/style.min.css

@@ -0,0 +1 @@
+.vxe-calendar{display:inline-flex;flex-direction:column;width:100%;height:38em;border:1px solid var(--vxe-ui-base-popup-border-color);border-radius:var(--vxe-ui-base-border-radius)}.vxe-calendar.type--date .vxe-calendar--body td{width:14.28571%}.vxe-calendar.type--week .vxe-calendar--body td{width:12%}.vxe-calendar.type--week .vxe-calendar--body td:first-child{width:14%}.vxe-calendar.type--quarter .vxe-calendar--body td{width:50%}.vxe-calendar.type--month .vxe-calendar--body td,.vxe-calendar.type--year .vxe-calendar--body td{width:25%}.vxe-calendar--confirm{outline:0;border:1px solid var(--vxe-ui-input-border-color);border-radius:var(--vxe-ui-base-border-radius);cursor:pointer;color:var(--vxe-ui-input-date-time-confirm-button-color);border-color:var(--vxe-ui-font-primary-color);background-color:var(--vxe-ui-font-primary-color);padding:0 .5em}.vxe-calendar--confirm:hover{background-color:var(--vxe-ui-font-primary-lighten-color);border-color:var(--vxe-ui-font-primary-lighten-color)}.vxe-calendar--confirm:active{background-color:var(--vxe-ui-font-primary-darken-color);border-color:var(--vxe-ui-font-primary-darken-color)}.vxe-calendar--header{flex-shrink:0;display:flex;flex-direction:row;padding:var(--vxe-ui-layout-padding-default);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-bottom:1px solid var(--vxe-ui-input-border-color)}.vxe-calendar--header .vxe-calendar--type-wrapper{flex-grow:1}.vxe-calendar--header .vxe-calendar--btn-wrapper{flex-shrink:0;text-align:center}.vxe-calendar--btn-wrapper{display:flex;flex-direction:row}.vxe-calendar--btn.is--disabled{color:var(--vxe-ui-font-disabled-color);cursor:no-drop}.vxe-calendar--btn:not(.is--disabled){cursor:pointer}.vxe-calendar--btn:not(.is--disabled):hover{background-color:#fff}.vxe-calendar--btn:not(.is--disabled):active{background-color:#fff}.vxe-calendar--body{position:relative;flex-grow:1;overflow:hidden}.vxe-calendar--body table{border:0;width:100%;height:100%;border-spacing:0;border-collapse:separate;text-align:center;table-layout:fixed}.vxe-calendar--view-th{font-weight:700}.vxe-calendar--view-td{font-weight:400;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;transition:all .1s ease-in-out}.vxe-calendar--view-td.is--next,.vxe-calendar--view-td.is--prev{color:var(--vxe-ui-font-disabled-color)}.vxe-calendar--view-td.is--next .vxe-calendar--date-festival,.vxe-calendar--view-td.is--next .vxe-calendar--date-label,.vxe-calendar--view-td.is--prev .vxe-calendar--date-festival,.vxe-calendar--view-td.is--prev .vxe-calendar--date-label{color:var(--vxe-ui-font-disabled-color)}.vxe-calendar--view-td.is--now:not(.is--selected).is--current{color:var(--vxe-ui-font-primary-color)}.vxe-calendar--view-td.is--now:not(.is--selected).is--current .vxe-calendar--date-festival,.vxe-calendar--view-td.is--now:not(.is--selected).is--current .vxe-calendar--date-label{color:var(--vxe-ui-font-primary-color)}.vxe-calendar--view-td.is--hover{background-color:var(--vxe-ui-base-hover-background-color)}.vxe-calendar--view-td.is--selected{color:var(--vxe-ui-calendar-selected-color);background-color:var(--vxe-ui-font-primary-color)}.vxe-calendar--view-td.is--selected.is--next,.vxe-calendar--view-td.is--selected.is--prev{background-color:var(--vxe-ui-font-primary-lighten-color)}.vxe-calendar--view-td.is--selected .vxe-calendar--date-festival,.vxe-calendar--view-td.is--selected .vxe-calendar--date-label{color:var(--vxe-ui-calendar-festival-selected-color)}.vxe-calendar--view-td.is--selected .vxe-calendar--date-label.is-notice:before{background-color:var(--vxe-ui-calendar-notice-selected-background-color)}.vxe-calendar--view-td:not(.is--disabled){cursor:pointer}.vxe-calendar--view-td.is--disabled{cursor:no-drop;color:var(--vxe-ui-input-disabled-color);background-color:var(--vxe-ui-input-disabled-background-color)}.vxe-calendar--view-td.is--disabled .vxe-calendar--date-festival,.vxe-calendar--view-td.is--disabled .vxe-calendar--date-label{color:var(--vxe-ui-input-disabled-color)}.vxe-calendar--date-festival,.vxe-calendar--date-label{display:block;overflow:hidden}.vxe-calendar--date-label{position:relative}.vxe-calendar--date-label.is-notice:before{content:"";position:absolute;width:4px;height:4px;left:.8em;top:.1em;transform:translateX(-50%);border-radius:100%;background-color:var(--vxe-ui-input-date-notice-background-color)}.vxe-calendar--date-label--extra{position:absolute;right:.1em;top:-.2em;transform:scale(.9);color:var(--vxe-ui-input-date-extra-color)}.vxe-calendar--date-label--extra.is-important{color:var(--vxe-ui-input-date-extra-important-color)}.vxe-calendar--date-festival{color:var(--vxe-ui-input-date-festival-color);height:14px;line-height:1;overflow:hidden}.vxe-calendar--date-festival.is-important{color:var(--vxe-ui-input-date-festival-important-color)}.vxe-calendar--date-festival--label{display:block;transform:scale(.8)}@keyframes festivalOverlap2{0%,100%,45%{transform:translateY(0)}50%,95%{transform:translateY(-14px)}}@keyframes festivalOverlap3{0%,100%,20%{transform:translateY(0)}25%,45%,75%,95%{transform:translateY(-14px)}50%,70%{transform:translateY(-28px)}}.vxe-calendar--date-festival--overlap{display:block;font-size:12px}.vxe-calendar--date-festival--overlap.overlap--2{animation:festivalOverlap2 6s infinite ease-in-out}.vxe-calendar--date-festival--overlap.overlap--3{animation:festivalOverlap3 9s infinite ease-in-out}.vxe-calendar--date-festival--overlap>span{height:14px;display:block;transform:scale(.8)}.vxe-calendar{font-size:var(--vxe-ui-font-size-default)}.vxe-calendar.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-calendar.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-calendar.size--mini{font-size:var(--vxe-ui-font-size-mini)}

package/es/carousel/index.js

@@ -0,0 +1,12 @@
+import { VxeUI } from '@vxe-ui/core';
+import VxeCarouselComponent from './src/carousel';
+import { dynamicApp } from '../dynamics';
+export const VxeCarousel = Object.assign({}, VxeCarouselComponent, {
+    install(app) {
+        app.component(VxeCarouselComponent.name, VxeCarouselComponent);
+    }
+});
+dynamicApp.use(VxeCarousel);
+VxeUI.component(VxeCarouselComponent);
+export const Carousel = VxeCarousel;
+export default VxeCarousel;

package/es/carousel/src/carousel-item.js

@@ -0,0 +1,100 @@
+import { defineVxeComponent } from '../../ui/src/comp';
+import XEUtils from 'xe-utils';
+import { globalMixins, createEvent } from '../../ui';
+import { assembleCarouselItem, destroyCarouselItem } from './util';
+export default defineVxeComponent({
+    name: 'VxeCarouselItem',
+    mixins: [
+        globalMixins.sizeMixin
+    ],
+    props: {
+        name: [String, Number],
+        className: String,
+        url: String
+    },
+    inject: {
+        $xeCarousel: {
+            default: null
+        }
+    },
+    data() {
+        const xID = XEUtils.uniqueId();
+        const reactData = {
+            currentDate: null
+        };
+        const itemConfig = {
+            id: xID,
+            name: '',
+            url: '',
+            className: '',
+            slots: {}
+        };
+        return {
+            xID,
+            reactData,
+            itemConfig
+        };
+    },
+    computed: Object.assign({}, {}),
+    methods: {
+        //
+        // Method
+        //
+        dispatchEvent(type, params, evnt) {
+            const $xeCarouselItem = this;
+            $xeCarouselItem.$emit(type, createEvent(evnt, { $carouselItem: $xeCarouselItem }, params));
+        },
+        //
+        // Render
+        //
+        renderVN(h) {
+            return h('div', {
+                ref: 'refElem'
+            });
+        }
+    },
+    watch: {
+        name(val) {
+            const $xeCarouselItem = this;
+            const itemConfig = $xeCarouselItem.itemConfig;
+            itemConfig.name = val;
+        },
+        url(val) {
+            const $xeCarouselItem = this;
+            const itemConfig = $xeCarouselItem.itemConfig;
+            itemConfig.url = val;
+        }
+    },
+    created() {
+        const $xeCarouselItem = this;
+        const props = $xeCarouselItem;
+        const slots = $xeCarouselItem.$scopedSlots;
+        const itemConfig = $xeCarouselItem.itemConfig;
+        Object.assign(itemConfig, {
+            name: props.name,
+            url: props.url,
+            className: props.className,
+            slots
+        });
+    },
+    mounted() {
+        const $xeCarouselItem = this;
+        const itemConfig = $xeCarouselItem.itemConfig;
+        const $xeCarousel = $xeCarouselItem.$xeCarousel;
+        const elem = $xeCarouselItem.$refs.refElem;
+        if ($xeCarousel && elem) {
+            assembleCarouselItem($xeCarousel, elem, itemConfig);
+        }
+    },
+    beforeDestroy() {
+        const $xeCarouselItem = this;
+        const itemConfig = $xeCarouselItem.itemConfig;
+        const $xeCarousel = $xeCarouselItem.$xeCarousel;
+        if ($xeCarousel) {
+            destroyCarouselItem($xeCarousel, itemConfig);
+        }
+    },
+    render(h) {
+        return this.renderVN(h);
+    }
+});