lh-ui-next 0.1.7-beta.8 → 0.1.7

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lh-ui-next",
   "description": "a friendly ui for vue3",
-  "version": "0.1.7-beta.8",
+  "version": "0.1.7",
   "author": "Tinylj(lujin.pt@163.com)",
   "license": "MIT",
   "private": false,
@@ -14,15 +14,14 @@
   "main": "lib/lh-ui-next.umd.js",
   "dependencies": {
     "mitt": "^3.0.0",
-    "vue": "^3.2.45",
-    "vuex": "^4.0.0"
+    "vue": "^3.3.9"
   },
   "devDependencies": {
     "vue-router": "^4.0.3",
     "vuex": "^4.0.0",
     "jsencrypt": "3.2.1",
-    "@vitejs/plugin-vue": "^3.2.0",
+    "@vitejs/plugin-vue": "^4.2.3",
     "less": "^4.1.3",
-    "vite": "^3.2.3"
+    "vite": "^5.0.0"
   }
 }

package/static/css/compact/compact.less

@@ -8,6 +8,13 @@
     font-size: 14px;
     padding-left: 16px;
     padding-right: 16px;
+    i {
+      font-size:14px;
+    }
+    &.has-icon {
+      padding-left: 12px;
+      padding-right: 12px;
+    }
   }
   &.mini{
     height: 22px;
@@ -39,6 +46,9 @@
       margin-left: 2px;
     }
   }
+  &.mini{
+    height: 22px;
+  }
 }
 
 
@@ -86,9 +96,11 @@
     }
   }
   .lh-tab-div-n5 {
+    width: 100%;
+    height: 30px;
     .lh-tab-content {
-      height: 30px;
-      line-height: 30px;
+      height: 28px;
+      line-height: 28px;
       padding-left: 12px;
       padding-right: 12px;
       font-size: 12px;
@@ -115,6 +127,38 @@
       top:6px;
     }
   }
+  &.mini {
+    .lh-select-text {
+      height:22px;
+      .lh-select-single {
+        line-height: 20px;
+      }
+      .lh-select-placeholder {
+        line-height: 20px;
+      }
+      .lh-select-node {
+        margin-top: 2px;
+      }
+      .dropdown-icon {
+        top: 3px;
+      }
+    }
+  }
+}
+.lh-select-ul {
+  .lh-select-search {
+    padding-left: 8px;
+    padding-right:8px;
+  }
+  ul {
+    li {
+      height: 28px;
+      line-height: 28px;
+      padding-left: 8px;
+      padding-right: 8px;
+      font-size: 13px;
+    }
+  }
 }
 .lh-input {
   .lh-input-cornInput {
@@ -122,16 +166,25 @@
     font-size: 12px;
   }
   .lh-input__prefix {
-    height: 28px;
     line-height: 28px;
   }
   .lh-input__suffix {
-    height: 28px;
     line-height: 28px;
   }
+  &.mini {
+    .lh-input-cornInput {
+      height: 22px;
+    }
+    .lh-input__prefix {
+      line-height: 22px;
+    }
+    .lh-input__suffix {
+      line-height: 22px;
+    }
+  }
 }
 .lh-select-tile {
-  .lh-select-ul {
+  .lh-select-tile-ul {
     .tile-left-title {
       font-size: 12px;
     }
@@ -143,36 +196,131 @@
       padding-right: 6px;
       font-size: 12px;
       margin-right: 4px;
-      margin-bottom: 3px;
+      margin-bottom: 7px;
     }
   }
 }
 .lh-dialog {
   .lh-dialog__container {
-    .lh-dialog-header {
-      padding-left: 18px;
-      padding-right: 12px;
-      height: 36px;
-      > .title {
-        font-size: 15px;
-        line-height: 36px;
-        font-weight: bold;
+
+  }
+}
+.lh-dialog-header {
+  padding-left: 18px;
+  padding-right: 40px;
+  height: 36px;
+  > .title {
+    font-size: 15px;
+    line-height: 36px;
+    font-weight: bold;
+  }
+  > .closeIt {
+    width: 40px;
+    height: 36px;
+    line-height: 35px;
+    i {
+      font-size: 16px;
+    }
+  }
+}
+
+
+.lh-date {
+  .lh-date-header {
+    .lh-date-header-label {
+      font-size: 12px;
+    }
+  }
+  .lh-date-content {
+    .lh-date-table {
+      th {
+        font-size: 12px;
       }
-      > .closeIt {
-        width: 36px;
-        height: 36px;
-        line-height: 35px;
-        i {
-          font-size: 16px;
-        }
+      td {
+        font-size: 13px;
       }
     }
   }
-
 }
 .lh-date-picker {
   .lh-date-picker__suffix {
     line-height: 28px;
   }
+  &.mini {
+    .lh-date-picker__suffix {
+      line-height: 22px;
+    }
+  }
+}
+.lh-date-range-picker {
+  height: 28px;
+  .icon_component_arrow_right {
+    line-height: 26px;
+  }
+  .range__suffix {
+    line-height: 26px;
+  }
+  .lh-input {
+    .lh-input-cornInput {
+      height: 26px;
+    }
+  }
+  &.mini {
+    height: 22px;
+    .icon_component_arrow_right {
+      line-height: 20px;
+    }
+    .range__suffix {
+      line-height: 20px;
+    }
+    .lh-input {
+      .lh-input-cornInput {
+        height: 20px;
+      }
+    }
+  }
+
+
 }
+.lh-switch{
+  height: 20px;
+  line-height: 20px;
+  .lh-switch-core {
+    height: 20px;
+    width: 40px;
+    border-radius: 10px;
+    &::after {
+      width: 16px;
+      height: 16px;
+    }
+  }
+  .lh-switch-checked {
+    .lh-switch-core {
+      &::after {
+        left:22px;
+      }
+    }
+  }
+  &.mini {
+    height: 14px;
+    line-height: 14px;
 
+    .lh-switch-core {
+      height: 14px;
+      width: 24px;
+      border-radius: 7px;
+      &::after {
+        width: 10px;
+        height: 10px;
+      }
+    }
+
+    .lh-switch-checked {
+      .lh-switch-core {
+        &::after {
+          left:12px;
+        }
+      }
+    }
+  }
+}

package/static/css/lhseer/class.less

@@ -25,6 +25,11 @@
   height: 40px;
   padding-top: 2px;
 }
+
+.lh-scroll-common {
+  scrollbar-color:  @color_b5 transparent;  /* 第一个方块颜色，第二个轨道颜色(用于更改火狐浏览器样式) */
+  scrollbar-width: thin;  /* 火狐滚动条无法自定义宽度，只能通过此属性使滚动条宽度变细 */
+}
 //通用滚动条样式，你懂的
 .lh-scroll-common::-webkit-scrollbar {
   width: 6px;
@@ -39,7 +44,9 @@
   border-radius: 0;
   background-color: transparent;
 }
+
+
 .lh-number-fontFamily {
-  font-family: Helvetica Neue,Helvetica,Arial,pingfang sc,Hiragino Sans GB,Microsoft YaHei,STHeiti,SimSun,sans-serif;
+  font-family: Roboto,Helvetica Neue,Helvetica,Arial,pingfang sc,Hiragino Sans GB,Microsoft YaHei,STHeiti,SimSun,sans-serif;
 }
 

package/static/css/lhseer/lhseerColor.less

@@ -8,32 +8,15 @@
 @color_b7:rgba(0,0,0,0.04);//网站背景，选择器里元素hover背景【一般用于控件的backgroud】
 @color_b8:rgba(0,0,0,0.02);//表头背景，表格hover
 
-@color_plate1:#5B8FF9;//极客蓝
-@color_plate2:#5AD8A6;//翡翠绿
-@color_plate3:#5D7092;//商务灰
-@color_plate4:#F6BD16;//旭日黄
-@color_plate5:#E86452;//薄暮红
-@color_plate6:#6DC8EC;//破晓蓝
-@color_plate7:#945FB9;//罗兰紫
-@color_plate8:#FF9845;//落日橘
-@color_plate9:#1E9493;//天水青
-@color_plate10:#FF99C3;//桃花粉
-
-@color_plate1_light:#CDDDFD;//极客浅蓝
-@color_plate2_light:#CDF3E4;//翡翠浅绿
-@color_plate3_light:#CED4DE;//商务浅灰
-@color_plate4_light:#FCEBB9;//旭日浅黄
-@color_plate5_light:#F8D0CB;//薄暮浅红
-@color_plate6_light:#D3EEF9;//破晓浅蓝
-@color_plate7_light:#DECFEA;//罗兰浅紫
-@color_plate8_light:#FFE0C7;//落日浅橘
-@color_plate9_light:#BBDEDE;//天水浅青
-@color_plate10_light:#FFE0ED;//桃花浅粉
 
 @color_error:#F4664A;//语义红：表达负面的、不可行、严重、危险、失败、热量等含义。
 @color_warning:#FAAD14;//语义黄：表达警告、注意、阻止等含义
 @color_success:#30BF78;//表达正面的、可行、植物、安全、成功等含义。
 
+//违约符号专用色
+@color_warning_red:#F5222D;
+
+
 .no-meaning {
 
 }

package/static/css/package/button.less

@@ -16,6 +16,8 @@
   color: white;
   border-radius: 2px;
   i {
+    margin-top: 1px;
+    line-height: 1;
     font-size:14px;
     &.prefix-icon {
       margin-right: 4px;
@@ -73,6 +75,8 @@
   border-radius: 2px;
   border: 1px solid @color_b5;
   i {
+    margin-top: 1px;
+    line-height: 1;
     font-size:14px;
     &.prefix-icon {
       margin-right: 4px;
@@ -130,12 +134,11 @@
 .lh-button-text {
   padding-left: 0;
   padding-right: 0;
+  height: 32px;
   background-color: transparent;
   color: @color_theme4;
   font-size: 14px;
-  height: 32px;
   border: none;
-
   i {
     font-size:14px;
     &.prefix-icon {
@@ -145,6 +148,15 @@
       margin-left: 4px;
     }
   }
+
+  &.mini {
+    font-size: 12px;
+    height: 24px;
+    i {
+      font-size:12px;
+    }
+  }
+
   &.lh-button-text-type2 {
     color: @color_theme7;
     &:hover {

package/static/css/package/checkbox.less

@@ -30,6 +30,7 @@
         content: '';
         position: absolute;
         width: 8px;
+        top:5px;
         height: 3px;
         border: 2px solid #fff;
         border-left: 0;
@@ -74,58 +75,74 @@
     float: left;
   }
 
-  &.lh-checkbox-checked{
-    .lh-checkbox-innerbox{
-      background-color: @color_theme4;
-      border-color: @color_theme4;
-      &::after{
-        transform:translateY(-2px) rotateY(180deg) rotateZ(45deg) scale(1);
+  &.checked{
+    .lh-checkbox-outbox {
+      .lh-checkbox-innerbox{
+        background-color: @color_theme4;
+        border-color: @color_theme4;
+        &::after{
+          transform:translateY(-2px) rotateY(180deg) rotateZ(45deg) scale(1);
+        }
       }
     }
-    .lh-checkbox-text{
-      color: @color_b1;
-    }
-
   }
-  &.lh-checkbox-disabled{
+  &.disabled{
     cursor: not-allowed;
-    .lh-checkbox-innerbox{
-      background-color:@color_b7;
-      border: solid 1px @color_b5;
-      cursor: not-allowed;
-      &::after{
-        border-color: @color_b4;
-      }
-    }
-    .lh-checkbox-innerbox.indeterminate{
-      background-color:@color_b7;
-      border: solid 1px @color_b5;
-      &::after {
-        background-color: @color_b4;
-        border-color: @color_b4;
+    .lh-checkbox-outbox {
+      .lh-checkbox-innerbox{
+        background-color:@color_b7;
+        border: solid 1px @color_b5;
+        cursor: not-allowed;
+        &::after{
+          border-color: @color_b4;
+        }
+        &.indeterminate{
+          background-color:@color_b7;
+          border: solid 1px @color_b5;
+          &::after {
+            background-color: @color_b4;
+            border-color: @color_b4;
+          }
+        }
       }
     }
     .lh-checkbox-text{
       color: @color_b4;
     }
   }
-  &.lh-checkbox-mini{
-    + .lh-checkbox{
-      margin-left:14px;
-    }
-    .lh-checkbox-innerbox{
-      width: 14px;
-      height: 14px;
-      border-radius:2px;
-      margin-top: 1px;
+  &.mini{
+    .lh-checkbox-outbox {
+      .lh-checkbox-innerbox{
+        width: 14px;
+        height: 14px;
+        border-radius:2px;
+        margin-top: 1px;
+        &.indeterminate{
+          &::after {
+            height: 6px;
+            width: 6px;
+          }
+        }
+      }
     }
     .lh-checkbox-text{
       font-size: 12px;
-      padding-left: 4px;
     }
+
+    &.checked{
+      .lh-checkbox-outbox {
+        .lh-checkbox-innerbox{
+          &::after{
+            top:4px;
+            transform:translateY(-2px) rotateY(180deg) rotateZ(45deg) scale(0.9);
+          }
+        }
+      }
+    }
+
   }
 
-  &:not(.lh-checkbox-disabled):hover{
+  &:not(.disabled):hover{
     .lh-checkbox-innerbox{
       border-color:@color_theme4;
     }

package/static/css/package/contextMenu.less

@@ -0,0 +1,18 @@
+.lh-context-menu {
+  position: relative;
+  .menu-list {
+    display: none;
+    position: fixed;
+    z-index:2;
+    width: 140px;
+    min-height: 90px;
+    background: white;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+    border-radius: 2px;
+  }
+  &.right-active {
+    .menu-list {
+      display: block;
+    }
+  }
+}