vxe-pc-ui 0.0.2 → 0.2.0

package/es/pager/style.css

@@ -0,0 +1,319 @@
+/*pager*/
+.vxe-pager {
+  position: relative;
+  display: flex;
+  align-items: center;
+  color: var(--vxe-font-color);
+  font-family: var(--vxe-font-family);
+  text-align: right;
+  background-color: var(--vxe-ui-pager-background-color);
+}
+.vxe-pager.is--hidden {
+  display: none;
+}
+.vxe-pager.align--left {
+  text-align: left;
+}
+.vxe-pager.align--center {
+  text-align: center;
+}
+.vxe-pager.is--loading:after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: var(--vxe-loading-z-index);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  background-color: var(--vxe-loading-background-color);
+}
+.vxe-pager .vxe-pager--prev-btn,
+.vxe-pager .vxe-pager--next-btn,
+.vxe-pager .vxe-pager--num-btn,
+.vxe-pager .vxe-pager--jump-prev,
+.vxe-pager .vxe-pager--jump-next {
+  color: inherit;
+  outline: 0;
+  padding: 0;
+  border: 1px solid transparent;
+  font-size: inherit;
+}
+.vxe-pager .vxe-pager--prev-btn:not(.is--disabled):focus,
+.vxe-pager .vxe-pager--next-btn:not(.is--disabled):focus,
+.vxe-pager .vxe-pager--num-btn:not(.is--disabled):focus,
+.vxe-pager .vxe-pager--jump-prev:not(.is--disabled):focus,
+.vxe-pager .vxe-pager--jump-next:not(.is--disabled):focus {
+  box-shadow: 0 0 0.25em 0 var(--vxe-primary-color);
+}
+.vxe-pager .vxe-pager--prev-btn:not(.is--disabled):hover,
+.vxe-pager .vxe-pager--next-btn:not(.is--disabled):hover,
+.vxe-pager .vxe-pager--num-btn:not(.is--disabled):hover,
+.vxe-pager .vxe-pager--jump-prev:not(.is--disabled):hover,
+.vxe-pager .vxe-pager--jump-next:not(.is--disabled):hover {
+  color: var(--vxe-primary-lighten-color);
+}
+.vxe-pager .vxe-pager--prev-btn:not(.is--disabled):active,
+.vxe-pager .vxe-pager--next-btn:not(.is--disabled):active,
+.vxe-pager .vxe-pager--num-btn:not(.is--disabled):active,
+.vxe-pager .vxe-pager--jump-prev:not(.is--disabled):active,
+.vxe-pager .vxe-pager--jump-next:not(.is--disabled):active {
+  background-color: #fff;
+}
+.vxe-pager.is--border:not(.is--background) .vxe-pager--prev-btn,
+.vxe-pager.is--border:not(.is--background) .vxe-pager--next-btn,
+.vxe-pager.is--border:not(.is--background) .vxe-pager--num-btn,
+.vxe-pager.is--border:not(.is--background) .vxe-pager--jump-prev,
+.vxe-pager.is--border:not(.is--background) .vxe-pager--jump-next, .vxe-pager.is--perfect:not(.is--background) .vxe-pager--prev-btn,
+.vxe-pager.is--perfect:not(.is--background) .vxe-pager--next-btn,
+.vxe-pager.is--perfect:not(.is--background) .vxe-pager--num-btn,
+.vxe-pager.is--perfect:not(.is--background) .vxe-pager--jump-prev,
+.vxe-pager.is--perfect:not(.is--background) .vxe-pager--jump-next {
+  border-color: var(--vxe-ui-input-border-color);
+}
+.vxe-pager.is--background .vxe-pager--prev-btn,
+.vxe-pager.is--background .vxe-pager--next-btn,
+.vxe-pager.is--background .vxe-pager--jump-prev,
+.vxe-pager.is--background .vxe-pager--num-btn,
+.vxe-pager.is--background .vxe-pager--jump-next, .vxe-pager.is--perfect .vxe-pager--prev-btn,
+.vxe-pager.is--perfect .vxe-pager--next-btn,
+.vxe-pager.is--perfect .vxe-pager--jump-prev,
+.vxe-pager.is--perfect .vxe-pager--num-btn,
+.vxe-pager.is--perfect .vxe-pager--jump-next {
+  background-color: var(--vxe-ui-pager-perfect-button-background-color);
+}
+.vxe-pager.is--background .vxe-pager--jump-prev:not(.is--disabled).is--active,
+.vxe-pager.is--background .vxe-pager--num-btn:not(.is--disabled).is--active,
+.vxe-pager.is--background .vxe-pager--jump-next:not(.is--disabled).is--active, .vxe-pager.is--perfect .vxe-pager--jump-prev:not(.is--disabled).is--active,
+.vxe-pager.is--perfect .vxe-pager--num-btn:not(.is--disabled).is--active,
+.vxe-pager.is--perfect .vxe-pager--jump-next:not(.is--disabled).is--active {
+  color: #fff;
+  background-color: var(--vxe-primary-color);
+}
+.vxe-pager.is--background .vxe-pager--jump-prev:not(.is--disabled).is--active:hover,
+.vxe-pager.is--background .vxe-pager--num-btn:not(.is--disabled).is--active:hover,
+.vxe-pager.is--background .vxe-pager--jump-next:not(.is--disabled).is--active:hover, .vxe-pager.is--perfect .vxe-pager--jump-prev:not(.is--disabled).is--active:hover,
+.vxe-pager.is--perfect .vxe-pager--num-btn:not(.is--disabled).is--active:hover,
+.vxe-pager.is--perfect .vxe-pager--jump-next:not(.is--disabled).is--active:hover {
+  background-color: var(--vxe-primary-lighten-color);
+}
+.vxe-pager.is--background .vxe-pager--jump-prev:not(.is--disabled).is--active:focus,
+.vxe-pager.is--background .vxe-pager--num-btn:not(.is--disabled).is--active:focus,
+.vxe-pager.is--background .vxe-pager--jump-next:not(.is--disabled).is--active:focus, .vxe-pager.is--perfect .vxe-pager--jump-prev:not(.is--disabled).is--active:focus,
+.vxe-pager.is--perfect .vxe-pager--num-btn:not(.is--disabled).is--active:focus,
+.vxe-pager.is--perfect .vxe-pager--jump-next:not(.is--disabled).is--active:focus {
+  border-color: var(--vxe-primary-color);
+}
+.vxe-pager.is--background .vxe-pager--jump-prev:not(.is--disabled).is--active:active,
+.vxe-pager.is--background .vxe-pager--num-btn:not(.is--disabled).is--active:active,
+.vxe-pager.is--background .vxe-pager--jump-next:not(.is--disabled).is--active:active, .vxe-pager.is--perfect .vxe-pager--jump-prev:not(.is--disabled).is--active:active,
+.vxe-pager.is--perfect .vxe-pager--num-btn:not(.is--disabled).is--active:active,
+.vxe-pager.is--perfect .vxe-pager--jump-next:not(.is--disabled).is--active:active {
+  border-color: var(--vxe-primary-darken-color);
+  background-color: var(--vxe-primary-darken-color);
+}
+.vxe-pager.is--perfect {
+  border: 1px solid var(--vxe-table-border-color);
+  border-top-width: 0;
+  background-color: var(--vxe-ui-pager-perfect-background-color);
+}
+.vxe-pager.is--border .vxe-pager--num-btn.is--active {
+  border-color: var(--vxe-primary-color);
+}
+.vxe-pager .vxe-pager--wrapper {
+  flex-grow: 1;
+}
+.vxe-pager .vxe-pager--jump-icon,
+.vxe-pager .vxe-pager--btn-icon {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.vxe-pager .vxe-pager--left-wrapper,
+.vxe-pager .vxe-pager--right-wrapper,
+.vxe-pager .vxe-pager--total,
+.vxe-pager .vxe-pager--prev-btn,
+.vxe-pager .vxe-pager--next-btn,
+.vxe-pager .vxe-pager--jump,
+.vxe-pager .vxe-pager--jump-prev,
+.vxe-pager .vxe-pager--jump-next,
+.vxe-pager .vxe-pager--count,
+.vxe-pager .vxe-pager--sizes {
+  margin: 0 0.4em;
+  vertical-align: middle;
+  display: inline-block;
+}
+.vxe-pager .vxe-pager--prev-btn,
+.vxe-pager .vxe-pager--jump-prev,
+.vxe-pager .vxe-pager--num-btn,
+.vxe-pager .vxe-pager--jump-next,
+.vxe-pager .vxe-pager--next-btn {
+  position: relative;
+  cursor: pointer;
+}
+.vxe-pager .vxe-pager--left-wrapper,
+.vxe-pager .vxe-pager--right-wrapper,
+.vxe-pager .vxe-pager--count,
+.vxe-pager .vxe-pager--prev-btn,
+.vxe-pager .vxe-pager--next-btn,
+.vxe-pager .vxe-pager--jump-prev,
+.vxe-pager .vxe-pager--num-btn,
+.vxe-pager .vxe-pager--jump-next {
+  height: 2.15em;
+  line-height: 2em;
+  display: inline-block;
+}
+.vxe-pager .vxe-pager--jump .vxe-pager--goto,
+.vxe-pager .vxe-pager--sizes > .vxe-input {
+  height: 2.15em;
+  line-height: 2.15em;
+}
+.vxe-pager .vxe-pager--sizes > .vxe-select--panel .vxe-select-option {
+  text-align: center;
+}
+.vxe-pager .vxe-pager--jump-prev,
+.vxe-pager .vxe-pager--prev-btn,
+.vxe-pager .vxe-pager--next-btn,
+.vxe-pager .vxe-pager--jump-next,
+.vxe-pager .vxe-pager--num-btn,
+.vxe-pager .vxe-pager--count {
+  min-width: 2.15em;
+}
+.vxe-pager .vxe-pager--btn-wrapper {
+  padding: 0;
+  margin: 0;
+  display: inline-block;
+  text-align: center;
+}
+.vxe-pager .vxe-pager--btn-wrapper .vxe-pager--jump-prev:hover .vxe-pager--jump-more-icon,
+.vxe-pager .vxe-pager--btn-wrapper .vxe-pager--jump-next:hover .vxe-pager--jump-more-icon {
+  display: none;
+}
+.vxe-pager .vxe-pager--btn-wrapper .vxe-pager--jump-prev:hover .vxe-pager--jump-icon,
+.vxe-pager .vxe-pager--btn-wrapper .vxe-pager--jump-next:hover .vxe-pager--jump-icon {
+  display: inline-block;
+}
+.vxe-pager .vxe-pager--btn-wrapper .vxe-pager--jump-icon {
+  display: none;
+}
+.vxe-pager .vxe-pager--jump-prev,
+.vxe-pager .vxe-pager--prev-btn,
+.vxe-pager .vxe-pager--next-btn,
+.vxe-pager .vxe-pager--jump-next,
+.vxe-pager .vxe-pager--num-btn {
+  text-align: center;
+  border-radius: var(--vxe-border-radius);
+  margin: 0 0.25em;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  background-color: var(--vxe-ui-pager-background-color);
+}
+.vxe-pager .vxe-pager--jump-prev:not(.is--disabled):hover,
+.vxe-pager .vxe-pager--prev-btn:not(.is--disabled):hover,
+.vxe-pager .vxe-pager--next-btn:not(.is--disabled):hover,
+.vxe-pager .vxe-pager--jump-next:not(.is--disabled):hover,
+.vxe-pager .vxe-pager--num-btn:not(.is--disabled):hover {
+  color: var(--vxe-primary-lighten-color);
+}
+.vxe-pager .vxe-pager--jump-prev:not(.is--disabled).is--active, .vxe-pager .vxe-pager--jump-prev:not(.is--disabled):focus,
+.vxe-pager .vxe-pager--prev-btn:not(.is--disabled).is--active,
+.vxe-pager .vxe-pager--prev-btn:not(.is--disabled):focus,
+.vxe-pager .vxe-pager--next-btn:not(.is--disabled).is--active,
+.vxe-pager .vxe-pager--next-btn:not(.is--disabled):focus,
+.vxe-pager .vxe-pager--jump-next:not(.is--disabled).is--active,
+.vxe-pager .vxe-pager--jump-next:not(.is--disabled):focus,
+.vxe-pager .vxe-pager--num-btn:not(.is--disabled).is--active,
+.vxe-pager .vxe-pager--num-btn:not(.is--disabled):focus {
+  color: var(--vxe-primary-color);
+}
+.vxe-pager .vxe-pager--jump-prev:not(.is--disabled):active,
+.vxe-pager .vxe-pager--prev-btn:not(.is--disabled):active,
+.vxe-pager .vxe-pager--next-btn:not(.is--disabled):active,
+.vxe-pager .vxe-pager--jump-next:not(.is--disabled):active,
+.vxe-pager .vxe-pager--num-btn:not(.is--disabled):active {
+  color: var(--vxe-primary-darken-color);
+}
+.vxe-pager .vxe-pager--jump-prev.is--disabled,
+.vxe-pager .vxe-pager--prev-btn.is--disabled,
+.vxe-pager .vxe-pager--next-btn.is--disabled,
+.vxe-pager .vxe-pager--jump-next.is--disabled,
+.vxe-pager .vxe-pager--num-btn.is--disabled {
+  cursor: no-drop;
+  color: var(--vxe-font-disabled-color);
+}
+.vxe-pager .vxe-pager--jump-prev.is--disabled:hover,
+.vxe-pager .vxe-pager--prev-btn.is--disabled:hover,
+.vxe-pager .vxe-pager--next-btn.is--disabled:hover,
+.vxe-pager .vxe-pager--jump-next.is--disabled:hover,
+.vxe-pager .vxe-pager--num-btn.is--disabled:hover {
+  color: var(--vxe-font-disabled-color);
+}
+.vxe-pager .vxe-pager--num-btn {
+  vertical-align: middle;
+}
+.vxe-pager .vxe-pager--num-btn.is--active {
+  font-weight: 700;
+}
+.vxe-pager .vxe-pager--sizes {
+  width: 7em;
+  text-align: center;
+  cursor: pointer;
+}
+.vxe-pager .vxe-pager--sizes .vxe-input--inner {
+  text-align: center;
+}
+.vxe-pager .vxe-pager--count {
+  text-align: center;
+}
+.vxe-pager .vxe-pager--count > span {
+  vertical-align: middle;
+}
+.vxe-pager .vxe-pager--count .vxe-pager--separator {
+  margin-right: 0.2em;
+}
+.vxe-pager .vxe-pager--count .vxe-pager--separator:before {
+  content: "/";
+}
+.vxe-pager .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);
+  transition: border 0.2s ease-in-out;
+  padding: 0 0.4em;
+  background-color: var(--vxe-ui-input-background-color);
+}
+.vxe-pager .vxe-pager--jump .vxe-pager--goto:focus {
+  border: 1px solid var(--vxe-primary-color);
+  outline: 0;
+}
+.vxe-pager .vxe-pager--jump .vxe-pager--goto-text {
+  margin-right: 0.25em;
+}
+.vxe-pager .vxe-pager--jump .vxe-pager--classifier-text {
+  margin-left: 0.25em;
+}
+.vxe-pager .vxe-pager--jump .vxe-pager--goto {
+  width: 3.2em;
+  text-align: center;
+}
+
+.vxe-pager {
+  font-size: var(--vxe-font-size);
+  height: var(--vxe-table-row-height-default);
+}
+.vxe-pager.size--medium {
+  font-size: var(--vxe-font-size-medium);
+  height: var(--vxe-table-row-height-medium);
+}
+.vxe-pager.size--small {
+  font-size: var(--vxe-font-size-small);
+  height: var(--vxe-table-row-height-small);
+}
+.vxe-pager.size--mini {
+  font-size: var(--vxe-font-size-mini);
+  height: var(--vxe-table-row-height-mini);
+}

package/es/pager/style.min.css

@@ -0,0 +1 @@
+.vxe-pager{position:relative;display:flex;align-items:center;color:var(--vxe-font-color);font-family:var(--vxe-font-family);text-align:right;background-color:var(--vxe-ui-pager-background-color)}.vxe-pager.is--hidden{display:none}.vxe-pager.align--left{text-align:left}.vxe-pager.align--center{text-align:center}.vxe-pager.is--loading:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:var(--vxe-loading-z-index);-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:var(--vxe-loading-background-color)}.vxe-pager .vxe-pager--jump-next,.vxe-pager .vxe-pager--jump-prev,.vxe-pager .vxe-pager--next-btn,.vxe-pager .vxe-pager--num-btn,.vxe-pager .vxe-pager--prev-btn{color:inherit;outline:0;padding:0;border:1px solid transparent;font-size:inherit}.vxe-pager .vxe-pager--jump-next:not(.is--disabled):focus,.vxe-pager .vxe-pager--jump-prev:not(.is--disabled):focus,.vxe-pager .vxe-pager--next-btn:not(.is--disabled):focus,.vxe-pager .vxe-pager--num-btn:not(.is--disabled):focus,.vxe-pager .vxe-pager--prev-btn:not(.is--disabled):focus{box-shadow:0 0 .25em 0 var(--vxe-primary-color)}.vxe-pager .vxe-pager--jump-next:not(.is--disabled):hover,.vxe-pager .vxe-pager--jump-prev:not(.is--disabled):hover,.vxe-pager .vxe-pager--next-btn:not(.is--disabled):hover,.vxe-pager .vxe-pager--num-btn:not(.is--disabled):hover,.vxe-pager .vxe-pager--prev-btn:not(.is--disabled):hover{color:var(--vxe-primary-lighten-color)}.vxe-pager .vxe-pager--jump-next:not(.is--disabled):active,.vxe-pager .vxe-pager--jump-prev:not(.is--disabled):active,.vxe-pager .vxe-pager--next-btn:not(.is--disabled):active,.vxe-pager .vxe-pager--num-btn:not(.is--disabled):active,.vxe-pager .vxe-pager--prev-btn:not(.is--disabled):active{background-color:#fff}.vxe-pager.is--border:not(.is--background) .vxe-pager--jump-next,.vxe-pager.is--border:not(.is--background) .vxe-pager--jump-prev,.vxe-pager.is--border:not(.is--background) .vxe-pager--next-btn,.vxe-pager.is--border:not(.is--background) .vxe-pager--num-btn,.vxe-pager.is--border:not(.is--background) .vxe-pager--prev-btn,.vxe-pager.is--perfect:not(.is--background) .vxe-pager--jump-next,.vxe-pager.is--perfect:not(.is--background) .vxe-pager--jump-prev,.vxe-pager.is--perfect:not(.is--background) .vxe-pager--next-btn,.vxe-pager.is--perfect:not(.is--background) .vxe-pager--num-btn,.vxe-pager.is--perfect:not(.is--background) .vxe-pager--prev-btn{border-color:var(--vxe-ui-input-border-color)}.vxe-pager.is--background .vxe-pager--jump-next,.vxe-pager.is--background .vxe-pager--jump-prev,.vxe-pager.is--background .vxe-pager--next-btn,.vxe-pager.is--background .vxe-pager--num-btn,.vxe-pager.is--background .vxe-pager--prev-btn,.vxe-pager.is--perfect .vxe-pager--jump-next,.vxe-pager.is--perfect .vxe-pager--jump-prev,.vxe-pager.is--perfect .vxe-pager--next-btn,.vxe-pager.is--perfect .vxe-pager--num-btn,.vxe-pager.is--perfect .vxe-pager--prev-btn{background-color:var(--vxe-ui-pager-perfect-button-background-color)}.vxe-pager.is--background .vxe-pager--jump-next:not(.is--disabled).is--active,.vxe-pager.is--background .vxe-pager--jump-prev:not(.is--disabled).is--active,.vxe-pager.is--background .vxe-pager--num-btn:not(.is--disabled).is--active,.vxe-pager.is--perfect .vxe-pager--jump-next:not(.is--disabled).is--active,.vxe-pager.is--perfect .vxe-pager--jump-prev:not(.is--disabled).is--active,.vxe-pager.is--perfect .vxe-pager--num-btn:not(.is--disabled).is--active{color:#fff;background-color:var(--vxe-primary-color)}.vxe-pager.is--background .vxe-pager--jump-next:not(.is--disabled).is--active:hover,.vxe-pager.is--background .vxe-pager--jump-prev:not(.is--disabled).is--active:hover,.vxe-pager.is--background .vxe-pager--num-btn:not(.is--disabled).is--active:hover,.vxe-pager.is--perfect .vxe-pager--jump-next:not(.is--disabled).is--active:hover,.vxe-pager.is--perfect .vxe-pager--jump-prev:not(.is--disabled).is--active:hover,.vxe-pager.is--perfect .vxe-pager--num-btn:not(.is--disabled).is--active:hover{background-color:var(--vxe-primary-lighten-color)}.vxe-pager.is--background .vxe-pager--jump-next:not(.is--disabled).is--active:focus,.vxe-pager.is--background .vxe-pager--jump-prev:not(.is--disabled).is--active:focus,.vxe-pager.is--background .vxe-pager--num-btn:not(.is--disabled).is--active:focus,.vxe-pager.is--perfect .vxe-pager--jump-next:not(.is--disabled).is--active:focus,.vxe-pager.is--perfect .vxe-pager--jump-prev:not(.is--disabled).is--active:focus,.vxe-pager.is--perfect .vxe-pager--num-btn:not(.is--disabled).is--active:focus{border-color:var(--vxe-primary-color)}.vxe-pager.is--background .vxe-pager--jump-next:not(.is--disabled).is--active:active,.vxe-pager.is--background .vxe-pager--jump-prev:not(.is--disabled).is--active:active,.vxe-pager.is--background .vxe-pager--num-btn:not(.is--disabled).is--active:active,.vxe-pager.is--perfect .vxe-pager--jump-next:not(.is--disabled).is--active:active,.vxe-pager.is--perfect .vxe-pager--jump-prev:not(.is--disabled).is--active:active,.vxe-pager.is--perfect .vxe-pager--num-btn:not(.is--disabled).is--active:active{border-color:var(--vxe-primary-darken-color);background-color:var(--vxe-primary-darken-color)}.vxe-pager.is--perfect{border:1px solid var(--vxe-table-border-color);border-top-width:0;background-color:var(--vxe-ui-pager-perfect-background-color)}.vxe-pager.is--border .vxe-pager--num-btn.is--active{border-color:var(--vxe-primary-color)}.vxe-pager .vxe-pager--wrapper{flex-grow:1}.vxe-pager .vxe-pager--btn-icon,.vxe-pager .vxe-pager--jump-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.vxe-pager .vxe-pager--count,.vxe-pager .vxe-pager--jump,.vxe-pager .vxe-pager--jump-next,.vxe-pager .vxe-pager--jump-prev,.vxe-pager .vxe-pager--left-wrapper,.vxe-pager .vxe-pager--next-btn,.vxe-pager .vxe-pager--prev-btn,.vxe-pager .vxe-pager--right-wrapper,.vxe-pager .vxe-pager--sizes,.vxe-pager .vxe-pager--total{margin:0 .4em;vertical-align:middle;display:inline-block}.vxe-pager .vxe-pager--jump-next,.vxe-pager .vxe-pager--jump-prev,.vxe-pager .vxe-pager--next-btn,.vxe-pager .vxe-pager--num-btn,.vxe-pager .vxe-pager--prev-btn{position:relative;cursor:pointer}.vxe-pager .vxe-pager--count,.vxe-pager .vxe-pager--jump-next,.vxe-pager .vxe-pager--jump-prev,.vxe-pager .vxe-pager--left-wrapper,.vxe-pager .vxe-pager--next-btn,.vxe-pager .vxe-pager--num-btn,.vxe-pager .vxe-pager--prev-btn,.vxe-pager .vxe-pager--right-wrapper{height:2.15em;line-height:2em;display:inline-block}.vxe-pager .vxe-pager--jump .vxe-pager--goto,.vxe-pager .vxe-pager--sizes>.vxe-input{height:2.15em;line-height:2.15em}.vxe-pager .vxe-pager--sizes>.vxe-select--panel .vxe-select-option{text-align:center}.vxe-pager .vxe-pager--count,.vxe-pager .vxe-pager--jump-next,.vxe-pager .vxe-pager--jump-prev,.vxe-pager .vxe-pager--next-btn,.vxe-pager .vxe-pager--num-btn,.vxe-pager .vxe-pager--prev-btn{min-width:2.15em}.vxe-pager .vxe-pager--btn-wrapper{padding:0;margin:0;display:inline-block;text-align:center}.vxe-pager .vxe-pager--btn-wrapper .vxe-pager--jump-next:hover .vxe-pager--jump-more-icon,.vxe-pager .vxe-pager--btn-wrapper .vxe-pager--jump-prev:hover .vxe-pager--jump-more-icon{display:none}.vxe-pager .vxe-pager--btn-wrapper .vxe-pager--jump-next:hover .vxe-pager--jump-icon,.vxe-pager .vxe-pager--btn-wrapper .vxe-pager--jump-prev:hover .vxe-pager--jump-icon{display:inline-block}.vxe-pager .vxe-pager--btn-wrapper .vxe-pager--jump-icon{display:none}.vxe-pager .vxe-pager--jump-next,.vxe-pager .vxe-pager--jump-prev,.vxe-pager .vxe-pager--next-btn,.vxe-pager .vxe-pager--num-btn,.vxe-pager .vxe-pager--prev-btn{text-align:center;border-radius:var(--vxe-border-radius);margin:0 .25em;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:var(--vxe-ui-pager-background-color)}.vxe-pager .vxe-pager--jump-next:not(.is--disabled):hover,.vxe-pager .vxe-pager--jump-prev:not(.is--disabled):hover,.vxe-pager .vxe-pager--next-btn:not(.is--disabled):hover,.vxe-pager .vxe-pager--num-btn:not(.is--disabled):hover,.vxe-pager .vxe-pager--prev-btn:not(.is--disabled):hover{color:var(--vxe-primary-lighten-color)}.vxe-pager .vxe-pager--jump-next:not(.is--disabled).is--active,.vxe-pager .vxe-pager--jump-next:not(.is--disabled):focus,.vxe-pager .vxe-pager--jump-prev:not(.is--disabled).is--active,.vxe-pager .vxe-pager--jump-prev:not(.is--disabled):focus,.vxe-pager .vxe-pager--next-btn:not(.is--disabled).is--active,.vxe-pager .vxe-pager--next-btn:not(.is--disabled):focus,.vxe-pager .vxe-pager--num-btn:not(.is--disabled).is--active,.vxe-pager .vxe-pager--num-btn:not(.is--disabled):focus,.vxe-pager .vxe-pager--prev-btn:not(.is--disabled).is--active,.vxe-pager .vxe-pager--prev-btn:not(.is--disabled):focus{color:var(--vxe-primary-color)}.vxe-pager .vxe-pager--jump-next:not(.is--disabled):active,.vxe-pager .vxe-pager--jump-prev:not(.is--disabled):active,.vxe-pager .vxe-pager--next-btn:not(.is--disabled):active,.vxe-pager .vxe-pager--num-btn:not(.is--disabled):active,.vxe-pager .vxe-pager--prev-btn:not(.is--disabled):active{color:var(--vxe-primary-darken-color)}.vxe-pager .vxe-pager--jump-next.is--disabled,.vxe-pager .vxe-pager--jump-prev.is--disabled,.vxe-pager .vxe-pager--next-btn.is--disabled,.vxe-pager .vxe-pager--num-btn.is--disabled,.vxe-pager .vxe-pager--prev-btn.is--disabled{cursor:no-drop;color:var(--vxe-font-disabled-color)}.vxe-pager .vxe-pager--jump-next.is--disabled:hover,.vxe-pager .vxe-pager--jump-prev.is--disabled:hover,.vxe-pager .vxe-pager--next-btn.is--disabled:hover,.vxe-pager .vxe-pager--num-btn.is--disabled:hover,.vxe-pager .vxe-pager--prev-btn.is--disabled:hover{color:var(--vxe-font-disabled-color)}.vxe-pager .vxe-pager--num-btn{vertical-align:middle}.vxe-pager .vxe-pager--num-btn.is--active{font-weight:700}.vxe-pager .vxe-pager--sizes{width:7em;text-align:center;cursor:pointer}.vxe-pager .vxe-pager--sizes .vxe-input--inner{text-align:center}.vxe-pager .vxe-pager--count{text-align:center}.vxe-pager .vxe-pager--count>span{vertical-align:middle}.vxe-pager .vxe-pager--count .vxe-pager--separator{margin-right:.2em}.vxe-pager .vxe-pager--count .vxe-pager--separator:before{content:"/"}.vxe-pager .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);transition:border .2s ease-in-out;padding:0 .4em;background-color:var(--vxe-ui-input-background-color)}.vxe-pager .vxe-pager--jump .vxe-pager--goto:focus{border:1px solid var(--vxe-primary-color);outline:0}.vxe-pager .vxe-pager--jump .vxe-pager--goto-text{margin-right:.25em}.vxe-pager .vxe-pager--jump .vxe-pager--classifier-text{margin-left:.25em}.vxe-pager .vxe-pager--jump .vxe-pager--goto{width:3.2em;text-align:center}.vxe-pager{font-size:var(--vxe-font-size);height:var(--vxe-table-row-height-default)}.vxe-pager.size--medium{font-size:var(--vxe-font-size-medium);height:var(--vxe-table-row-height-medium)}.vxe-pager.size--small{font-size:var(--vxe-font-size-small);height:var(--vxe-table-row-height-small)}.vxe-pager.size--mini{font-size:var(--vxe-font-size-mini);height:var(--vxe-table-row-height-mini)}

package/es/pulldown/index.js

@@ -0,0 +1,10 @@
+import VxePulldownComponent from './src/pulldown';
+import { dynamicApp } from '../dynamics';
+export const VxePulldown = Object.assign(VxePulldownComponent, {
+    install: function (app) {
+        app.component(VxePulldownComponent.name, VxePulldownComponent);
+    }
+});
+export const Pulldown = VxePulldown;
+dynamicApp.component(VxePulldownComponent.name, VxePulldownComponent);
+export default VxePulldown;

package/es/pulldown/src/pulldown.js

@@ -0,0 +1,328 @@
+import { defineComponent, h, Teleport, ref, onUnmounted, reactive, nextTick, watch, createCommentVNode } from 'vue';
+import XEUtils from 'xe-utils';
+import globalConfigStore from '../../ui/src/globalStore';
+import { useSize } from '../../hooks/size';
+import { getAbsolutePos, getEventTargetNode } from '../../ui/src/dom';
+import { getLastZIndex, nextZIndex } from '../../ui/src/utils';
+import { GlobalEvent } from '../../ui/src/event';
+export default defineComponent({
+    name: 'VxePulldown',
+    props: {
+        modelValue: Boolean,
+        disabled: Boolean,
+        placement: String,
+        size: { type: String, default: () => globalConfigStore.size },
+        className: [String, Function],
+        popupClassName: [String, Function],
+        destroyOnClose: Boolean,
+        transfer: Boolean
+    },
+    emits: [
+        'update:modelValue',
+        'hide-panel'
+    ],
+    setup(props, context) {
+        const { slots, emit } = context;
+        const xID = XEUtils.uniqueId();
+        const computeSize = useSize(props);
+        const reactData = reactive({
+            inited: false,
+            panelIndex: 0,
+            panelStyle: null,
+            panelPlacement: null,
+            visiblePanel: false,
+            animatVisible: false,
+            isActivated: false
+        });
+        const refElem = ref();
+        const refPulldowContent = ref();
+        const refPulldowPnanel = ref();
+        const refMaps = {
+            refElem
+        };
+        const $xepulldown = {
+            xID,
+            props,
+            context,
+            reactData,
+            getRefMaps: () => refMaps
+        };
+        let pulldownMethods = {};
+        const updateZindex = () => {
+            if (reactData.panelIndex < getLastZIndex()) {
+                reactData.panelIndex = nextZIndex();
+            }
+        };
+        const isPanelVisible = () => {
+            return reactData.visiblePanel;
+        };
+        /**
+         * 手动更新位置
+         */
+        const updatePlacement = () => {
+            return nextTick().then(() => {
+                const { transfer, placement } = props;
+                const { panelIndex, visiblePanel } = reactData;
+                if (visiblePanel) {
+                    const targetElem = refPulldowContent.value;
+                    const panelElem = refPulldowPnanel.value;
+                    if (panelElem && targetElem) {
+                        const targetHeight = targetElem.offsetHeight;
+                        const targetWidth = targetElem.offsetWidth;
+                        const panelHeight = panelElem.offsetHeight;
+                        const panelWidth = panelElem.offsetWidth;
+                        const marginSize = 5;
+                        const panelStyle = {
+                            zIndex: panelIndex
+                        };
+                        const { boundingTop, boundingLeft, visibleHeight, visibleWidth } = getAbsolutePos(targetElem);
+                        let panelPlacement = 'bottom';
+                        if (transfer) {
+                            let left = boundingLeft;
+                            let top = boundingTop + targetHeight;
+                            if (placement === 'top') {
+                                panelPlacement = 'top';
+                                top = boundingTop - panelHeight;
+                            }
+                            else if (!placement) {
+                                // 如果下面不够放，则向上
+                                if (top + panelHeight + marginSize > visibleHeight) {
+                                    panelPlacement = 'top';
+                                    top = boundingTop - panelHeight;
+                                }
+                                // 如果上面不够放，则向下（优先）
+                                if (top < marginSize) {
+                                    panelPlacement = 'bottom';
+                                    top = boundingTop + targetHeight;
+                                }
+                            }
+                            // 如果溢出右边
+                            if (left + panelWidth + marginSize > visibleWidth) {
+                                left -= left + panelWidth + marginSize - visibleWidth;
+                            }
+                            // 如果溢出左边
+                            if (left < marginSize) {
+                                left = marginSize;
+                            }
+                            Object.assign(panelStyle, {
+                                left: `${left}px`,
+                                top: `${top}px`,
+                                minWidth: `${targetWidth}px`
+                            });
+                        }
+                        else {
+                            if (placement === 'top') {
+                                panelPlacement = 'top';
+                                panelStyle.bottom = `${targetHeight}px`;
+                            }
+                            else if (!placement) {
+                                // 如果下面不够放，则向上
+                                if (boundingTop + targetHeight + panelHeight > visibleHeight) {
+                                    // 如果上面不够放，则向下（优先）
+                                    if (boundingTop - targetHeight - panelHeight > marginSize) {
+                                        panelPlacement = 'top';
+                                        panelStyle.bottom = `${targetHeight}px`;
+                                    }
+                                }
+                            }
+                        }
+                        reactData.panelStyle = panelStyle;
+                        reactData.panelPlacement = panelPlacement;
+                    }
+                }
+                return nextTick();
+            });
+        };
+        let hidePanelTimeout;
+        /**
+         * 显示下拉面板
+         */
+        const showPanel = () => {
+            if (!reactData.inited) {
+                reactData.inited = true;
+            }
+            return new Promise(resolve => {
+                if (!props.disabled) {
+                    clearTimeout(hidePanelTimeout);
+                    reactData.isActivated = true;
+                    reactData.animatVisible = true;
+                    setTimeout(() => {
+                        reactData.visiblePanel = true;
+                        emit('update:modelValue', true);
+                        updatePlacement();
+                        setTimeout(() => {
+                            resolve(updatePlacement());
+                        }, 40);
+                    }, 10);
+                    updateZindex();
+                }
+                else {
+                    nextTick(() => {
+                        resolve();
+                    });
+                }
+            });
+        };
+        /**
+         * 隐藏下拉面板
+         */
+        const hidePanel = () => {
+            reactData.visiblePanel = false;
+            emit('update:modelValue', false);
+            return new Promise(resolve => {
+                if (reactData.animatVisible) {
+                    hidePanelTimeout = window.setTimeout(() => {
+                        reactData.animatVisible = false;
+                        nextTick(() => {
+                            resolve();
+                        });
+                    }, 350);
+                }
+                else {
+                    nextTick(() => {
+                        resolve();
+                    });
+                }
+            });
+        };
+        /**
+         * 切换下拉面板
+         */
+        const togglePanel = () => {
+            if (reactData.visiblePanel) {
+                return hidePanel();
+            }
+            return showPanel();
+        };
+        const handleGlobalMousewheelEvent = (evnt) => {
+            const { disabled } = props;
+            const { visiblePanel } = reactData;
+            const panelElem = refPulldowPnanel.value;
+            if (!disabled) {
+                if (visiblePanel) {
+                    if (getEventTargetNode(evnt, panelElem).flag) {
+                        updatePlacement();
+                    }
+                    else {
+                        hidePanel();
+                        pulldownMethods.dispatchEvent('hide-panel', {}, evnt);
+                    }
+                }
+            }
+        };
+        const handleGlobalMousedownEvent = (evnt) => {
+            const { disabled } = props;
+            const { visiblePanel } = reactData;
+            const el = refElem.value;
+            const panelElem = refPulldowPnanel.value;
+            if (!disabled) {
+                reactData.isActivated = getEventTargetNode(evnt, el).flag || getEventTargetNode(evnt, panelElem).flag;
+                if (visiblePanel && !reactData.isActivated) {
+                    hidePanel();
+                    pulldownMethods.dispatchEvent('hide-panel', {}, evnt);
+                }
+            }
+        };
+        const handleGlobalBlurEvent = (evnt) => {
+            if (reactData.visiblePanel) {
+                reactData.isActivated = false;
+                hidePanel();
+                pulldownMethods.dispatchEvent('hide-panel', {}, evnt);
+            }
+        };
+        pulldownMethods = {
+            dispatchEvent(type, params, evnt) {
+                emit(type, Object.assign({ $pulldown: $xepulldown, $event: evnt }, params));
+            },
+            isPanelVisible,
+            togglePanel,
+            showPanel,
+            hidePanel
+        };
+        Object.assign($xepulldown, pulldownMethods);
+        watch(() => props.modelValue, (value) => {
+            if (value) {
+                showPanel();
+            }
+            else {
+                hidePanel();
+            }
+        });
+        nextTick(() => {
+            GlobalEvent.on($xepulldown, 'mousewheel', handleGlobalMousewheelEvent);
+            GlobalEvent.on($xepulldown, 'mousedown', handleGlobalMousedownEvent);
+            GlobalEvent.on($xepulldown, 'blur', handleGlobalBlurEvent);
+        });
+        onUnmounted(() => {
+            GlobalEvent.off($xepulldown, 'mousewheel');
+            GlobalEvent.off($xepulldown, 'mousedown');
+            GlobalEvent.off($xepulldown, 'blur');
+        });
+        const renderVN = () => {
+            const { className, popupClassName, destroyOnClose, transfer, disabled } = props;
+            const { inited, isActivated, animatVisible, visiblePanel, panelStyle, panelPlacement } = reactData;
+            const vSize = computeSize.value;
+            const defaultSlot = slots.default;
+            const headerSlot = slots.header;
+            const footerSlot = slots.footer;
+            const dropdownSlot = slots.dropdown;
+            return h('div', {
+                ref: refElem,
+                class: ['vxe-pulldown', className ? (XEUtils.isFunction(className) ? className({ $pulldown: $xepulldown }) : className) : '', {
+                        [`size--${vSize}`]: vSize,
+                        'is--visivle': visiblePanel,
+                        'is--disabled': disabled,
+                        'is--active': isActivated
+                    }]
+            }, [
+                h('div', {
+                    ref: refPulldowContent,
+                    class: 'vxe-pulldown--content'
+                }, defaultSlot ? defaultSlot({ $pulldown: $xepulldown }) : []),
+                h(Teleport, {
+                    to: 'body',
+                    disabled: transfer ? !inited : true
+                }, [
+                    h('div', {
+                        ref: refPulldowPnanel,
+                        class: ['vxe-table--ignore-clear vxe-pulldown--panel', popupClassName ? (XEUtils.isFunction(popupClassName) ? popupClassName({ $pulldown: $xepulldown }) : popupClassName) : '', {
+                                [`size--${vSize}`]: vSize,
+                                'is--transfer': transfer,
+                                'animat--leave': animatVisible,
+                                'animat--enter': visiblePanel
+                            }],
+                        placement: panelPlacement,
+                        style: panelStyle
+                    }, dropdownSlot
+                        ? [
+                            h('div', {
+                                class: 'vxe-pulldown--panel-wrapper'
+                            }, !inited || (destroyOnClose && !visiblePanel && !animatVisible)
+                                ? []
+                                : [
+                                    headerSlot
+                                        ? h('div', {
+                                            class: 'vxe-pulldown--panel-header'
+                                        }, headerSlot({ $pulldown: $xepulldown }))
+                                        : createCommentVNode(),
+                                    h('div', {
+                                        class: 'vxe-pulldown--panel-body'
+                                    }, dropdownSlot({ $pulldown: $xepulldown })),
+                                    footerSlot
+                                        ? h('div', {
+                                            class: 'vxe-pulldown--panel-footer'
+                                        }, footerSlot({ $pulldown: $xepulldown }))
+                                        : createCommentVNode()
+                                ])
+                        ]
+                        : [])
+                ])
+            ]);
+        };
+        $xepulldown.renderVN = renderVN;
+        return $xepulldown;
+    },
+    render() {
+        return this.renderVN();
+    }
+});