yy-vue-easytable 2.27.2

package/packages/style/ve-dropdown.less

@@ -0,0 +1,204 @@
+.ve-dropdown {
+    display: inline-table;
+    margin: 0;
+
+    a,
+    a:visited {
+        color: #000;
+        text-decoration: none;
+        outline: none;
+    }
+
+    .ve-dropdown-dt,
+    .ve-dropdown-items {
+        margin: 0px;
+        padding: 0px;
+    }
+
+    .ve-dropdown-dt-selected {
+        position: relative;
+        display: block;
+        border: 1px solid @ve-dropdown-border-color;
+        border-radius: 2px;
+        font-size: 14px;
+        height: 32px;
+        line-height: 32px;
+
+        &:hover {
+            color: @ve-dropdown-item-hover-text-color;
+            border-color: @ve-dropdown-item-hover-text-color;
+        }
+
+        .ve-dropdown-dt-selected-span {
+            width: 80%;
+            display: block !important; /*修复会被别的样式覆盖的问题*/
+            text-align: center;
+            cursor: pointer;
+            white-space: nowrap;
+            overflow: hidden;
+            padding-left: 2px;
+        }
+
+        .ve-dropdown-input {
+            appearance: none;
+            background-color: #fff;
+            background-image: none;
+            border: 1px solid #fff;
+            box-sizing: border-box;
+            color: #1f2d3d;
+            display: inline-block;
+            font-size: inherit;
+            line-height: 1;
+            outline: none;
+            padding-left: 2px;
+            transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+            width: 80%;
+            text-align: left;
+        }
+    }
+}
+
+// dropdown popper
+.ve-dropdown-popper {
+    z-index: @ve-dropdown-z-index;
+
+    .ve-dropdown-dd,
+    .ve-dropdown-items {
+        margin: 0px;
+        padding: 0px;
+    }
+
+    // 下拉项
+    .ve-dropdown-dd {
+        display: block;
+
+        .ve-dropdown-items {
+            min-height: 50px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            word-wrap: normal;
+            white-space: nowrap;
+            top: 2px;
+            left: 0px;
+            list-style: none;
+            border-radius: 2px;
+            background-color: @ve-dropdown-background-color;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12),
+                0 0 6px rgba(0, 0, 0, 0.04);
+            border: 1px solid @ve-dropdown-item-border-color;
+
+            padding: 5px 0px;
+            width: auto;
+
+            .ve-dropdown-items-warpper {
+                overflow: auto;
+
+                /* 单选 */
+                .ve-dropdown-items-li {
+                    a {
+                        text-decoration: none;
+                    }
+                    white-space: nowrap;
+                    font-size: 14px;
+                    height: 32px;
+                    line-height: 32px;
+                    background-color: @ve-dropdown-item-background-color;
+
+                    &:hover {
+                        background-color: @ve-dropdown-item-hover-background-color;
+                        color: @ve-dropdown-item-hover-text-color;
+                    }
+
+                    &.active {
+                        background-color: @ve-dropdown-item-active-background-color;
+                        a {
+                            color: @ve-dropdown-active-text-color;
+                        }
+                    }
+
+                    &.active:hover {
+                        background-color: @ve-dropdown-item-active-background-color;
+                    }
+
+                    .ve-dropdown-items-li-a {
+                        width: 100%;
+                        display: block;
+                        padding-left: 8px;
+                        padding-right: 8px;
+                        color: @ve-dropdown-text-color;
+                    }
+
+                    .ve-dropdown-items-li-a-left {
+                        text-align: left;
+                    }
+
+                    .ve-dropdown-items-li-a-center {
+                        text-align: center;
+                    }
+
+                    .ve-dropdown-items-li-a-right {
+                        text-align: right;
+                    }
+                }
+
+                /* 多选 */
+                .ve-dropdown-items-multiple {
+                    display: table;
+                    width: 100%;
+                    padding: 0 5px;
+                    width: 100%;
+                    text-align: left;
+
+                    .ve-checkbox {
+                        width: 100%;
+                        .ve-checkbox-label {
+                            padding-left: 5px;
+                        }
+                    }
+
+                    span {
+                        font-size: 14px;
+                        font-weight: normal;
+                        color: @ve-dropdown-item-hover-text-color;
+                    }
+
+                    &:hover {
+                        background-color: @ve-dropdown-item-hover-background-color;
+                    }
+                }
+            }
+        }
+    }
+
+    /*操作功能开始*/
+    .ve-dropdown-operation {
+        width: 100%;
+        margin-top: 5px;
+        padding: 8px 0 3px 0;
+        font-size: 14px;
+        border-top: 1px solid #e8e8e8;
+
+        display: flex;
+        justify-content: space-around;
+
+        .ve-dropdown-operation-item {
+            color: @ve-dropdown-operation-item-text-color;
+
+            &.ve-dropdown-filter-disable {
+                color: #999;
+            }
+
+            &:not(.ve-dropdown-filter-disable):hover {
+                color: @ve-dropdown-operation-item-hover-text-color;
+            }
+        }
+
+        &:last-child {
+            float: right;
+        }
+
+        &:hover {
+            color: @ve-dropdown-item-hover-background-color;
+        }
+    }
+}

package/packages/style/ve-icon.less

@@ -0,0 +1,3 @@
+.ve-icon {
+    display: inline-block;
+}

package/packages/style/ve-loading.less

@@ -0,0 +1,242 @@
+.ve-loading-parent-relative {
+    position: relative !important;
+}
+
+.ve-loading-parent-lock {
+    overflow: hidden !important;
+}
+
+.ve-loading {
+    // overlay
+    &.ve-loading-overlay {
+        position: absolute;
+        z-index: 1999;
+        margin: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+    }
+
+    // fixed
+    &.ve-loading-fixed {
+        position: fixed !important;
+    }
+
+    // hide
+    &.ve-loading-hide {
+        display: none;
+    }
+
+    // spin container
+    &-spin-container {
+        position: absolute;
+        top: 50%;
+        margin-top: -20px;
+        margin-left: -20px;
+        width: 100%;
+        text-align: center;
+        .ve-loading-spin {
+            display: inline-block;
+        }
+    }
+
+    /* plane */
+    &-plane {
+        animation: sk-plane 1.2s infinite ease-in-out;
+    }
+
+    @keyframes sk-plane {
+        0% {
+            transform: perspective(120px) rotateX(0deg) rotateY(0deg);
+        }
+        50% {
+            transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
+        }
+        100% {
+            transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
+        }
+    }
+
+    /* bounce */
+    &-bounce {
+        position: relative;
+
+        &-dot {
+            width: 100%;
+            height: 100%;
+            border-radius: 50%;
+            /* background-color: var(--sk-color); */
+            opacity: 0.6;
+            position: absolute;
+            top: 0;
+            left: 0;
+            animation: sk-bounce 2s infinite
+                cubic-bezier(0.455, 0.03, 0.515, 0.955);
+        }
+
+        &-dot:nth-child(2) {
+            animation-delay: -1s;
+        }
+    }
+
+    @keyframes sk-bounce {
+        0%,
+        100% {
+            transform: scale(0);
+        }
+        45%,
+        55% {
+            transform: scale(1);
+        }
+    }
+
+    /* wave */
+    &-wave {
+        display: flex;
+        justify-content: space-between;
+
+        &-rect {
+            height: 100%;
+            width: 15%;
+            animation: sk-wave 1.2s infinite ease-in-out;
+        }
+
+        &-rect:nth-child(1) {
+            animation-delay: -1.2s;
+        }
+        &-rect:nth-child(2) {
+            animation-delay: -1.1s;
+        }
+        &-rect:nth-child(3) {
+            animation-delay: -1s;
+        }
+        &-rect:nth-child(4) {
+            animation-delay: -0.9s;
+        }
+        &-rect:nth-child(5) {
+            animation-delay: -0.8s;
+        }
+    }
+
+    @keyframes sk-wave {
+        0%,
+        40%,
+        100% {
+            transform: scaleY(0.4);
+        }
+        20% {
+            transform: scaleY(1);
+        }
+    }
+
+    /* pulse */
+    &-pulse {
+        width: var(--sk-size);
+        height: var(--sk-size);
+        background-color: var(--sk-color);
+        border-radius: 100%;
+        animation: sk-pulse 1.2s infinite
+            cubic-bezier(0.455, 0.03, 0.515, 0.955);
+    }
+
+    @keyframes sk-pulse {
+        0% {
+            transform: scale(0);
+        }
+        100% {
+            transform: scale(1);
+            opacity: 0;
+        }
+    }
+
+    /* flow */
+    &-flow {
+        width: calc(var(--sk-size) * 1.3);
+        height: calc(var(--sk-size) * 1.3);
+        display: flex;
+        justify-content: space-between;
+
+        &-dot {
+            width: 25%;
+            height: 25%;
+            background-color: var(--sk-color);
+            border-radius: 50%;
+            animation: sk-flow 1.4s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s
+                infinite both;
+        }
+
+        &-dot:nth-child(1) {
+            animation-delay: -0.3s;
+        }
+        &-dot:nth-child(2) {
+            animation-delay: -0.15s;
+        }
+
+        @keyframes sk-flow {
+            0%,
+            80%,
+            100% {
+                transform: scale(0.3);
+            }
+            40% {
+                transform: scale(1);
+            }
+        }
+    }
+
+    /* grid */
+    &-grid {
+        /* Cube positions
+     * 1 2 3
+     * 4 5 6
+     * 7 8 9
+     */
+
+        &-cube {
+            width: 33.33%;
+            height: 33.33%;
+            background-color: var(--sk-color);
+            float: left;
+            animation: sk-grid 1.3s infinite ease-in-out;
+        }
+        &-cube:nth-child(1) {
+            animation-delay: 0.2s;
+        }
+        &-cube:nth-child(2) {
+            animation-delay: 0.3s;
+        }
+        &-cube:nth-child(3) {
+            animation-delay: 0.4s;
+        }
+        &-cube:nth-child(4) {
+            animation-delay: 0.1s;
+        }
+        &:nth-child(5) {
+            animation-delay: 0.2s;
+        }
+        &-cube:nth-child(6) {
+            animation-delay: 0.3s;
+        }
+        &-cube:nth-child(7) {
+            animation-delay: 0s;
+        }
+        &-cube:nth-child(8) {
+            animation-delay: 0.1s;
+        }
+        &-cube:nth-child(9) {
+            animation-delay: 0.2s;
+        }
+
+        @keyframes sk-grid {
+            0%,
+            70%,
+            100% {
+                transform: scale3D(1, 1, 1);
+            }
+            35% {
+                transform: scale3D(0, 0, 1);
+            }
+        }
+    }
+}

package/packages/style/ve-pagination.less

@@ -0,0 +1,153 @@
+*,
+:after,
+:before {
+    box-sizing: border-box;
+}
+
+.ve-pagination {
+    font-size: 14px;
+    height: 32px;
+    line-height: 32px;
+    background-color: @ve-pagination-background-color;
+    margin: 0;
+    padding: 0;
+    display: inline-block;
+    margin: 0 4px;
+    list-style-type: none;
+
+    // 总页数信息
+    .ve-pagination-total {
+        float: left;
+        margin: 0 4px;
+        color: @ve-pagination-item-text-color;
+    }
+
+    // 分页大小
+    .ve-pagination-select {
+        float: left;
+        margin: 0 4px;
+        margin: 0 4px;
+    }
+
+    // 数字项
+    .ve-pagination-pager {
+        float: left;
+    }
+
+    // 跳转器
+    .ve-pagination-goto {
+        float: left;
+        margin: 0 4px;
+        color: @ve-pagination-item-text-color;
+
+        .ve-pagination-goto-input {
+            width: 50px;
+            height: 32px;
+            padding: 1px 7px;
+            display: inline-block;
+            border: 1px solid @ve-pagination-item-border-color;
+            background-color: @ve-pagination-goto-background-color;
+            background-image: none;
+            transition: border 0.2s ease-in-out,
+                background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+            border-radius: 4px;
+            color: @ve-pagination-goto-input-color;
+            &:focus {
+                outline: none !important;
+                border-color: @ve-pagination-goto-input-hover-color;
+            }
+            &:hover {
+                border-color: @ve-pagination-goto-input-hover-color;
+            }
+        }
+    }
+
+    // 共用部分
+    .ve-pagination-li {
+        min-width: 32px;
+        height: 32px;
+        float: left;
+        margin-right: 4px;
+        cursor: pointer;
+        transition: all 0.1s ease-in-out;
+        text-align: center;
+        list-style: none;
+        background-color: @ve-pagination-item-background-color;
+        border: 1px solid @ve-pagination-item-border-color;
+        border-radius: 4px;
+        a {
+            color: @ve-pagination-item-text-color;
+        }
+
+        &:hover {
+            border-color: @ve-pagination-li-color;
+            a {
+                color: @ve-pagination-li-color;
+            }
+        }
+
+        &.ve-pagination-li-active {
+            border-color: @ve-pagination-li-color;
+            a {
+                font-weight: bold;
+                color: @ve-pagination-li-color;
+            }
+            &:hover {
+                border-color: @ve-pagination-li-color;
+                a {
+                    font-weight: bold;
+                    color: @ve-pagination-li-color;
+                }
+            }
+        }
+    }
+
+    .ve-pagination-prev i,
+    .ve-pagination-next i {
+        color: #666;
+    }
+
+    .ve-pagination-prev:hover i,
+    .ve-pagination-next:hover i {
+        color: @ve-pagination-jump-hover-color;
+    }
+
+    .ve-pagination-jump-prev:after,
+    .ve-pagination-jump-next:after {
+        content: "\2022\2022\2022";
+        display: block;
+        letter-spacing: 1px;
+        color: #666;
+        text-align: center;
+    }
+
+    .ve-pagination-jump-prev i,
+    .ve-pagination-jump-prev:hover:after,
+    .ve-pagination-jump-next i,
+    .ve-pagination-jump-next:hover:after {
+        display: none;
+    }
+
+    .ve-pagination-jump-prev:hover i,
+    .ve-pagination-jump-next:hover i {
+        display: inline;
+        color: @ve-pagination-jump-hover-color;
+    }
+
+    .ve-pagination-disabled {
+        cursor: not-allowed;
+        border-color: @ve-pagination-item-border-color;
+
+        &:hover {
+            border-color: @ve-pagination-item-border-color;
+            i {
+                color: #ccc;
+                cursor: not-allowed;
+            }
+        }
+
+        i {
+            color: #ccc;
+        }
+    }
+}

package/packages/style/ve-radio.less

@@ -0,0 +1,126 @@
+.ve-radio *,
+.ve-radio *:before,
+.ve-radio *:after {
+    box-sizing: border-box;
+}
+
+.ve-radio {
+    margin: 0 8px 0 0;
+
+    &,
+    .ve-radio-container {
+        padding: 0;
+        color: #000000d9;
+        font-size: 14px;
+        line-height: 22px;
+        list-style: none;
+        position: relative;
+        display: inline-block;
+        white-space: nowrap;
+        cursor: pointer;
+    }
+
+    // container
+    .ve-radio-container {
+        margin: 0;
+        top: -1px;
+        line-height: 1;
+        vertical-align: sub;
+        outline: none;
+
+        // radio input
+        .ve-radio-input {
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            z-index: 1;
+            cursor: pointer;
+            opacity: 0;
+        }
+
+        // radio inner
+        .ve-radio-inner {
+            position: relative;
+            top: 0;
+            left: 0;
+            display: block;
+            width: 16px;
+            height: 16px;
+            background-color: #fff;
+            border: 1px solid #d9d9d9;
+            border-radius: 100px;
+            transition: all 0.3s;
+
+            &:after {
+                position: absolute;
+                top: 3px;
+                left: 3px;
+                display: table;
+                width: 8px;
+                height: 8px;
+                background-color: @ve-radio-checked-background-color;
+                border-top: 0;
+                border-left: 0;
+                border-radius: 8px;
+                transform: scale(0);
+                opacity: 0;
+                transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+                content: " ";
+            }
+        }
+
+        // 选中效果
+        &.ve-radio-checked {
+            &:after {
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                border: 1px solid @ve-radio-checked-border-color;
+                border-radius: 50%;
+                visibility: hidden;
+                animation-fill-mode: both;
+                content: "";
+            }
+
+            .ve-radio-inner {
+                border-color: @ve-radio-checked-border-color;
+            }
+
+            .ve-radio-inner:after {
+                transform: scale(1);
+                opacity: 1;
+                transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+            }
+        }
+
+        // 禁用效果
+        &.ve-radio-disabled {
+            .ve-radio-input {
+                cursor: not-allowed;
+            }
+            .ve-radio-inner {
+                background-color: #f5f5f5;
+                border-color: #d9d9d9 !important;
+                cursor: not-allowed;
+
+                &:after {
+                    background-color: #00000033;
+                }
+            }
+            & + span {
+                color: rgba(0, 0, 0, 0.25);
+                cursor: not-allowed;
+            }
+        }
+    }
+
+    // label
+    &-label {
+        padding: 0 4px;
+        color: @ve-radio-label-text-color;
+    }
+}