@neatui/css 1.0.2

package/table/table@a.scss

@@ -0,0 +1,230 @@
+// 主题
+
+[ui-table~='@a'] {
+  width: 100%;
+
+  th {
+    @include theme {
+      color: co(text);
+    }
+    // text-align: left;
+    font-weight: normal;
+  }
+
+  .table-sort {
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    background-color: #fff;
+  }
+
+  td {
+    @include theme {
+      color: co(read);
+    }
+  }
+
+  &[tirm*='n'] {
+    border-collapse: separate;
+  }
+
+  // 固定宽度
+  &[ui-table~='fix'] {
+    table-layout: fixed;
+  }
+
+  // 线条
+  &[ui-table~='line'] {
+    th,
+    td {
+      @include theme {
+        border-bottom: 1px solid co(line);
+      }
+      padding: 0.75em 1em;
+
+      &:first-child {
+        padding-left: 0;
+      }
+      &:last-child {
+        padding-right: 0;
+      }
+    }
+
+    tr:last-child {
+      td {
+        border-bottom: 0;
+      }
+    }
+  }
+
+  // 格子
+  &[ui-table~='grid'],
+  &[ui-table~='cube'] {
+    tr {
+      @include theme {
+        box-shadow: inset 0 -1px 0 0 co(line);
+      }
+      // &:last-child {
+      //   box-shadow: 0 0 0 0;
+      // }
+    }
+    th,
+    td {
+      @include theme {
+        // border-left: 1px solid co(line);
+        box-shadow: inset 1px 0 0 0 co(line);
+        // border-top: 1px solid co(line);
+        &:first-child {
+          box-shadow: 0 0 0 0;
+        }
+      }
+      // padding: 0.75em 1em;
+    }
+  }
+  &[ui-table~='grid'] {
+    @include theme {
+      // border: 1px solid co(line);
+      box-shadow: inset 0 0 0px 1px co(line);
+    }
+    border-radius: 0.25em;
+    border-left: 0;
+    border-top: 0;
+    &[trim*='n'] {
+      th,
+      td {
+        @include theme {
+          border-right: 1px solid co(line);
+        }
+        &:first-child {
+          @include theme {
+            border-left: 1px solid co(line);
+          }
+        }
+      }
+      tr:last-child {
+        td {
+          @include theme {
+            border-bottom: 1px solid co(line);
+          }
+        }
+      }
+      tr:first-child {
+        th,
+        td {
+          @include theme {
+            border-top: 1px solid co(line);
+          }
+        }
+      }
+    }
+
+    tr {
+      &:first-child {
+        th,
+        td {
+          &:first-child {
+            border-radius: 0.2rem 0 0 0;
+          }
+          &:last-child {
+            border-radius: 0 0.2rem 0 0;
+          }
+        }
+      }
+      &:last-child {
+        th,
+        td {
+          &:first-child {
+            border-radius: 0 0 0 0.2rem;
+          }
+          &:last-child {
+            border-radius: 0 0 0.2rem 0;
+          }
+        }
+      }
+    }
+  }
+
+  // 分割
+  &[ui-table~='cube'] {
+    border: 0;
+    &:first-child {
+      padding-left: 0;
+    }
+    &:last-child {
+      padding-right: 0;
+    }
+
+    [ui-hide] {
+      & + th,
+      & + td {
+        border-left: 0;
+      }
+      & + tr {
+        th,
+        td {
+          border-top: 0;
+        }
+      }
+    }
+
+    &[trim*='n'] {
+      @include theme {
+        border: 1px solid co(line);
+      }
+    }
+
+    th,
+    td {
+      &:first-child {
+        border-left: 0;
+      }
+    }
+    tr:first-child {
+      th,
+      td {
+        border-top: 0;
+      }
+    }
+  }
+
+  // // 小行
+  // &[ui-table~='s'] {
+  //   th,
+  //   td {
+  //     padding: 0.5em 1em;
+  //   }
+  // }
+
+  // // 大行
+  // &[ui-table~='l'] {
+  //   th,
+  //   td {
+  //     padding: 1em 1em;
+  //   }
+  // }
+
+  &[ui-table~=':hover'] {
+    tr {
+      transition: all 0.3s;
+      &:hover {
+        @include theme {
+          background-color: rgba(co(weak), 0.5);
+        }
+      }
+    }
+  }
+
+  // 对齐
+  &[ui-table~=':vt'] {
+    th,
+    td {
+      vertical-align: top;
+    }
+  }
+  &[ui-table~=':vb'] {
+    th,
+    td {
+      vertical-align: bottom;
+    }
+  }
+}

package/table/table@b.scss

@@ -0,0 +1,78 @@
+// 主题
+@import './base.scss';
+
+[ui-table~='@b'] {
+  // 固定头部
+  thead > tr,
+  thead > tr th,
+  .table-head-fixed {
+    @include theme {
+      background: co(fore);
+    }
+  }
+  // 表格主体
+  tbody {
+    tr {
+      &:nth-child(even) {
+        &,
+        th,
+        td {
+          @include theme {
+            background-color: co(fore);
+          }
+        }
+      }
+      &:nth-child(odd) {
+        &,
+        th,
+        td {
+          @include theme {
+            background-color: mix(co(weak), co(fore), 75%);
+          }
+        }
+      }
+    }
+  }
+  // 移入效果
+  &[ui-table~='ux:hover'] {
+    tbody {
+      tr {
+        &:nth-child(even) {
+          &:hover {
+            @include theme {
+              box-shadow:
+                0 0 0 2px co(fore),
+                0 0 0 3px co(line);
+              z-index: 1;
+              position: relative;
+            }
+          }
+        }
+        &:nth-child(odd) {
+          &:hover {
+            @include theme {
+              box-shadow:
+                0 0 0 2px co(weak),
+                0 0 0 3px co(line);
+              z-index: 1;
+              position: relative;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // 滚动固定补白
+  // &[ui-table~='ui:sticky'] {
+  //   th,
+  //   td {
+  //     &:first-child {
+  //       box-shadow: -3em 0 0 0 co(fore);
+  //     }
+  //     &:last-child {
+  //       box-shadow: 3em 0 0 0 co(fore);
+  //     }
+  //   }
+  // }
+}

package/table/table@c.scss

@@ -0,0 +1,18 @@
+// 主题
+@import './base.scss';
+
+[ui-table~='@c'] {
+  & {
+    border-collapse: separate;
+    border-spacing: 0 0.5em;
+  }
+
+  tbody {
+    tr {
+      @include theme {
+        box-shadow: inset 0 0 0 1px co(line);
+        border-radius: 0.2em;
+      }
+    }
+  }
+}

package/tabs/README.md

@@ -0,0 +1,62 @@
+# @neatui/core
+
+MCUI 选项卡组件。本组件依赖框架核心 @neatui/core 。更多详情请访问官网 [https://mcui.fekit.cn/](https://mcui.fekit.cn/)
+
+## 安装
+
+### 安装核心
+
+```
+npm i @neatui/core
+```
+
+### 安装组件
+
+```
+npm i @neatui/tabs
+```
+
+## 引用
+
+### scss
+
+```scss
+$theme: (
+  light: (
+    main: #d52932,
+    vice: #67337d,
+    text: #000000,
+    back: #ffffff,
+    link: #0d66d0,
+    code: #e23861,
+    well: #4bbc73,
+    warn: #fb9a2a,
+    risk: #f95850,
+    info: #0889e4
+  )
+  // 添加更多主题...
+);
+
+// 引用框架核心
+@import '~@neatui/core';
+
+// 引用业务组件
+@import '~@neatui/tabs/tabs@a';
+// 引用更多组件...
+```
+
+### html
+
+```html
+<div ui-tabs="@a">
+  <div class="active">选择卡1</div>
+  <div>选择卡2</div>
+  <div>选择卡3</div>
+</div>
+```
+
+## 使用
+
+## 更多
+
+详细文档请到 MCUI 官网 [https://mcui.fekit.cn](https://mcui.fekit.cn)

package/tabs/mcui@tabs.scss

@@ -0,0 +1 @@
+@import './tabs@a.scss';

package/tabs/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@neatui/tabs",
+  "version": "1.0.8",
+  "description": "",
+  "main": "mcui@tabs.scss",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://gitlab.com/mcui/mcui.desktop.git"
+  },
+  "keywords": [
+    "mcui"
+  ],
+  "author": "xiaojunbo",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://gitlab.com/mcui/mcui.desktop/issues"
+  },
+  "homepage": "https://gitlab.com/mcui/mcui.desktop#readme"
+}

package/tabs/tabs@a.scss

@@ -0,0 +1,62 @@
+$co: 'main', 'well', 'warn', 'risk', 'info';
+$sz: 'xs', 's', 'm', 'l', 'xl';
+
+[ui-tabs~='@a'] {
+  position: relative;
+  max-width: 100%;
+  height: 2.5em;
+  line-height: 2.5em;
+  white-space: nowrap;
+  overflow-x: auto;
+  overflow-y: hidden;
+
+  @include theme {
+    box-shadow: inset 0 -0.2em 0 rgba(co(line), 0.4);
+  }
+
+  & > * {
+    position: relative;
+    display: inline-block;
+    cursor: pointer;
+    margin-left: 1rem;
+    margin-right: 1rem;
+
+    &:first-child {
+      margin-left: 0;
+    }
+    &:last-child {
+      margin-right: 0;
+    }
+
+    &.active {
+      -webkit-font-smoothing: auto;
+      @include theme {
+        color: co(main);
+        box-shadow: inset 0 -0.2em 0 co(main);
+      }
+    }
+  }
+
+  // 对齐
+  &,
+  &[ui-tabs~='al'] {
+    text-align: left;
+  }
+  &[ui-tabs~='ac'] {
+    text-align: center;
+  }
+  &[ui-tabs~='ar'] {
+    text-align: right;
+  }
+
+  // 尺寸
+  $base: 2em;
+  @each $i in $sz {
+    // @debug $i;
+    &[ui-tabs~='#{$i}'] {
+      height: $base;
+      line-height: $base;
+    }
+    $base: $base + 0.5;
+  }
+}

package/tags/README.md

@@ -0,0 +1,71 @@
+# @neatui/tags
+
+MCUI 选项卡组件。本组件依赖框架核心 @neatui/core 。更多详情请访问官网 [https://mcui.fekit.cn/](https://mcui.fekit.cn/)
+
+## 安装
+
+### 安装核心
+
+```
+npm i @neatui/core
+```
+
+### 安装组件
+
+```
+npm i @neatui/tags
+```
+
+## 引用
+
+### scss
+
+```scss
+$theme: (
+  light: (
+    main: #d52932,
+    vice: #67337d,
+    text: #000000,
+    back: #ffffff,
+    link: #0d66d0,
+    code: #e23861,
+    well: #4bbc73,
+    warn: #fb9a2a,
+    risk: #f95850,
+    info: #0889e4
+  )
+  // 添加更多主题...
+);
+
+// 引用框架核心
+@import '~@neatui/core';
+
+// 引用业务组件
+@import '~@neatui/tags/tags@a';
+// 引用更多组件...
+```
+
+### html
+
+```html
+<!-- 群组 -->
+<div ui-tags="@a main">
+  <div class="active">标签1</div>
+  <div>标签1</div>
+  <div>标签1</div>
+</div>
+
+<!-- 单个 -->
+<ul>
+  <li ui-tag="@a info">信息</li>
+  <li ui-tag="@a well">提倡</li>
+  <li ui-tag="@a warn">警告</li>
+  <li ui-tag="@a risk">风险</li>
+</ul>
+```
+
+## 使用
+
+## 更多
+
+详细文档请到 MCUI 官网 [https://mcui.fekit.cn](https://mcui.fekit.cn)

package/tags/mcui@tags.scss

@@ -0,0 +1,2 @@
+@import './tags@a.scss';
+@import './tags@b.scss';

package/tags/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@neatui/tags",
+  "version": "1.1.2",
+  "description": "",
+  "main": "mcui@tags.scss",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://gitlab.com/mcui/mcui.desktop.git"
+  },
+  "keywords": [
+    "mcui"
+  ],
+  "author": "xiaojunbo",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://gitlab.com/mcui/mcui.desktop/issues"
+  },
+  "homepage": "https://gitlab.com/mcui/mcui.desktop#readme"
+}

package/tags/tags@a.scss

@@ -0,0 +1,125 @@
+$state: 'main', 'well', 'warn', 'risk', 'info', 'read', 'note', 'idle';
+$sz: 'xs', 's', 'm', 'l', 'xl';
+
+// 单个
+[ui-tag~='@a'] {
+  display: inline-block;
+  padding: 0.25em 0.5em;
+  border-radius: 0.2rem;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+
+  // 圆角
+  &[ui-tag~=':round'] {
+    border-radius: 10em;
+    padding: 0.25em 0.65em;
+  }
+  // 叶型
+  &[ui-tag~=':leaf'] {
+    border-radius: 0.5em 0;
+  }
+  // 弹头
+  &[ui-tag~=':bullet'] {
+    padding: 0.25em 0.5em 0.25em 0.65em;
+    border-radius: 1em 0.2em 0.2em 1em;
+  }
+
+  @each $key in $state {
+    @include theme {
+      $val: co($key);
+      $co: mix($val, co(text), 95%);
+      $bg: saturate(rgba($val, 0.06), 20%);
+      $bk: $val;
+
+      @if ($key== 'main') {
+        &,
+        &[ui-tag~='#{$key}'] {
+          color: $co;
+          box-shadow: inset 0 0 0 1px rgba($bk, 0.15);
+          background: $bg;
+        }
+      } @else {
+        &[ui-tag~='#{$key}'] {
+          color: $co;
+          box-shadow: inset 0 0 0 1px rgba($bk, 0.15);
+          background: $bg;
+        }
+      }
+    }
+  }
+}
+
+// 群组
+[ui-tags~='@a'] {
+  // 容器
+  & {
+    position: relative;
+    width: 100%;
+
+    &[ui-tags~='al'] {
+      & > * {
+        margin-right: 0.5rem;
+      }
+    }
+    &[ui-tags~='ac'] {
+      & > * {
+        margin-left: 0.5rem;
+        margin-right: 0.5rem;
+      }
+    }
+    &[ui-tags~='ar'] {
+      & > * {
+        margin-left: 0.5rem;
+      }
+    }
+  }
+
+  // 子项
+  & > * {
+    display: inline-block;
+    padding: 0.25em 0.5em;
+    border-radius: 0.2rem;
+    line-height: 1;
+    white-space: nowrap;
+  }
+
+  // 圆角
+  &[ui-tags~=':round'] > * {
+    border-radius: 10em;
+  }
+  // 叶型
+  &[ui-tags~=':leaf'] > * {
+    border-radius: 10em 0;
+  }
+  // 弹头
+  &[ui-tag~=':bullet'] > * {
+    padding: 0.25em 0.65em 0.25em 0.5em;
+    border-radius: 1em 0.2em 0.2em 1em;
+  }
+
+  // 主题
+  @each $key in $state {
+    @include theme {
+      $val: co($key);
+      $co: mix($val, co(text), 85%);
+      $bg: saturate(rgba($val, 0.06), 20%);
+      $bk: $val;
+
+      @if ($key== 'main') {
+        & > *,
+        &[ui-tags~='#{$key}'] > * {
+          color: $co;
+          box-shadow: inset 0 0 0 1px rgba($bk, 0.15);
+          background: $bg;
+        }
+      } @else {
+        &[ui-tags~='#{$key}'] > * {
+          color: $co;
+          box-shadow: inset 0 0 0 1px rgba($bk, 0.15);
+          background: $bg;
+        }
+      }
+    }
+  }
+}