@neatui/css 1.0.2

package/icon/icon@upload.scss

@@ -0,0 +1,26 @@
+// 添加
+%icon-upload {
+  background:
+    radial-gradient(circle at 50% 23%, currentColor 4%, transparent 5%),
+    radial-gradient(circle at 47% 25%, currentColor 4%, transparent 5%),
+    radial-gradient(circle at 53% 25%, currentColor 4%, transparent 5%),
+    radial-gradient(circle at 44% 27%, currentColor 3.7%, transparent 4.7%),
+    radial-gradient(circle at 56% 27%, currentColor 3.7%, transparent 4.7%),
+    \radial-gradient(circle at 41% 29%, currentColor 3.5%, transparent 4.5%),
+    radial-gradient(circle at 59% 29%, currentColor 3.5%, transparent 4.5%),
+    radial-gradient(circle at 38% 31%, currentColor 3.3%, transparent 4.3%),
+    radial-gradient(circle at 62% 31%, currentColor 3.3%, transparent 4.3%),
+    radial-gradient(circle at 35% 33%, currentColor 3.1%, transparent 4.1%),
+    radial-gradient(circle at 65% 33%, currentColor 3.1%, transparent 4.1%),
+    radial-gradient(circle at 32% 35%, currentColor 2.9%, transparent 3.9%),
+    radial-gradient(circle at 68% 35%, currentColor 2.9%, transparent 3.9%),
+    radial-gradient(circle at 80% 82%, currentColor 3.5%, transparent 4.5%),
+    radial-gradient(circle at 20% 82%, currentColor 3.5%, transparent 4.5%),
+    linear-gradient(90deg, transparent 0%, currentColor 2%, currentColor 10%, transparent 13%, transparent 87%, currentColor 90%, currentColor 98%, transparent 100%) no-repeat 50%
+      75% / 70% 20%,
+    linear-gradient(0deg, transparent 42%, currentColor 45%, currentColor 55%, transparent 58%) no-repeat 50% 116% / 60% 50%,
+    linear-gradient(90deg, transparent 42%, currentColor 45%, currentColor 55%, transparent 58%) no-repeat 50% 40% / 50% 40%;
+}
+[ui-icon~='upload'] {
+  @extend %icon-upload;
+}

package/icon/icon@view.scss

@@ -0,0 +1,20 @@
+%icon-view {
+  background:
+    radial-gradient(at 50% 50%, transparent 53%, currentColor 56%, currentColor 67%, transparent 70%) no-repeat center / 100% 70%,
+    radial-gradient(circle at 50% 50%, transparent 15%, currentColor 18%, currentColor 27%, transparent 30%);
+}
+
+%icon-unview {
+  background:
+    radial-gradient(at 50% 50%, transparent 53%, currentColor 56%, currentColor 67%, transparent 70%) no-repeat center / 100% 70%,
+    radial-gradient(circle at 50% 50%, transparent 15%, currentColor 18%, currentColor 27%, transparent 30%),
+    linear-gradient(-45deg, transparent 45%, currentColor 48%, currentColor 52%, transparent 55%) no-repeat center / 75% 75%;
+}
+
+[ui-icon~='view'] {
+  @extend %icon-view;
+}
+
+[ui-icon~='unview'] {
+  @extend %icon-unview;
+}

package/icon/mcui@icon.scss

@@ -0,0 +1,21 @@
+@import './icon@add.scss';
+@import './icon@close.scss';
+@import './icon@down.scss';
+@import './icon@except.scss';
+@import './icon@hook.scss';
+@import './icon@left.scss';
+@import './icon@link.scss';
+@import './icon@menu.scss';
+@import './icon@minus.scss';
+@import './icon@more.scss';
+@import './icon@omit.scss';
+@import './icon@refresh.scss';
+@import './icon@right.scss';
+@import './icon@search.scss';
+@import './icon@time.scss';
+@import './icon@top.scss';
+@import './icon@view.scss';
+@import './icon@drag.scss';
+@import './icon@quit.scss';
+@import './icon@upload.scss';
+@import './icon@download.scss';

package/icon/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@neatui/icon",
+  "version": "1.1.1",
+  "description": "",
+  "main": "mcui@icon.scss",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "icon"
+  ],
+  "author": "xiaojunbo",
+  "license": "MIT",
+  "dependencies": {}
+}

package/imgs/README.md

@@ -0,0 +1,78 @@
+# @neatui/imgs
+
+MCUI图片组件，依赖@neatui/core核心，文档详见官网 https://mcui.fekit.cn/
+
+## 安装组件
+
+```
+npm i @neatui/imgs
+```
+
+或
+
+```
+yarn add @neatui/imgs
+```
+
+## 可选主题
+
+- imgs@a.scss
+- imgs@b.scss
+  使用示例：
+
+```html
+<button ui-btn="@a">按钮</button>
+```
+
+## 指定语义
+
+| 语议 | 属性 | 备注                                                     |
+| ---- | ---- | -------------------------------------------------------- |
+| 主体 | main | 跟随主题风格主体色                                       |
+| 主体 | vice | 跟随主题风格辅助色                                       |
+| 提倡 | well | 代表提倡的，安全的，推荐的，成功的，建议用户点击的       |
+| 警告 | warn | 代表警告的，需再次确认的，并非绝对安全的，需要用户慎重的 |
+| 风险 | risk | 代表失败的，危险的，错误的，有风险的，不建议用户操作的   |
+| 信息 | info | 代表只读的，上面三个状态之外使用                         |
+
+使用示例：
+
+```html
+<button ui-btn="@a well"></button>
+```
+
+## 指定大小
+
+| 大小 | 属性 |
+| ---- | ---- |
+| 小   | ss   |
+| 中   | sm   |
+| 大   | sl   |
+
+使用示例：
+
+```html
+<button ui-btn="@a s"></button>
+```
+
+## 线形按钮
+
+```html
+<button ui-btn="@a :line"></button>
+```
+
+## 圆角按钮
+
+```html
+<button ui-btn="@a round"></button>
+```
+
+## 按钮群组
+
+```html
+<div ui-imgs="@a line :border">
+  <button>Button1</button>
+  <button>Button2</button>
+  <button>Button3</button>
+</div>
+```

package/imgs/base.scss

@@ -0,0 +1,8 @@
+[ui-imgs~=':strand'] {
+  & > * {
+    margin-right: -0.5em;
+    @include theme {
+      background-color: co(fore);
+    }
+  }
+}

package/imgs/imgs@a.scss

@@ -0,0 +1,171 @@
+@use 'sass:math';
+@import './base.scss';
+
+@mixin imgs($n: 'ui-img', $sub: '') {
+  [#{$n}~='@a'] {
+    &#{$sub} {
+      position: relative;
+      display: inline-flex;
+      vertical-align: middle;
+      width: 2.5rem;
+      height: 2.5rem;
+      border-radius: 0.25rem;
+      padding: 3px;
+      overflow: hidden;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      box-shadow: inset 0 0 0 1px currentColor;
+      transition: all 0.3s;
+
+      & > * {
+        width: 100%;
+        height: 100%;
+        transform: scale3d(1, 1, 1);
+        border-radius: 2px;
+        overflow: hidden;
+        transition: all 0.3s;
+        background-size: cover;
+        background-position: center;
+        background-repeat: no-repeat;
+      }
+      & > img {
+        width: 100%;
+        height: 100%;
+        // max-width: 100%;
+        // max-height: 100%;
+        object-fit: cover;
+      }
+
+      &:hover {
+        @include theme {
+          // border: 1px solid co(text);
+          box-shadow: inset 0 0 0 1px co(text);
+        }
+        & > * {
+          transform: scale3d(0.85, 0.85, 1);
+        }
+      }
+
+      // 激活
+      &.active {
+        @include theme {
+          // border: 1px solid co(main) !important;
+          box-shadow: inset 0 0 0 1px co(main);
+        }
+      }
+      // 选中
+      &.selected,
+      &[selected~='1'] {
+        @include theme {
+          // border: 1px solid co(main) !important;
+          box-shadow: inset 0 0 0 1px co(main);
+        }
+
+        &::after {
+          position: absolute;
+          display: block;
+          content: '';
+          width: 0.6rem;
+          height: 0.6rem;
+          max-width: 1rem;
+          max-height: 1rem;
+          top: 3%;
+          right: 3%;
+          border-radius: 0.2rem;
+          background-image: radial-gradient(circle at 26% 56%, currentColor 8%, transparent 9%), radial-gradient(circle at 32% 62%, currentColor 8%, transparent 9%),
+            radial-gradient(circle at 35% 65%, currentColor 8%, transparent 9%), radial-gradient(circle at 41% 71%, currentColor 8%, transparent 9%),
+            radial-gradient(circle at 47% 70%, currentColor 9%, transparent 10%), radial-gradient(circle at 53% 62%, currentColor 9%, transparent 10%),
+            radial-gradient(circle at 59% 54%, currentColor 9%, transparent 10%), radial-gradient(circle at 65% 46%, currentColor 9%, transparent 10%),
+            radial-gradient(circle at 71% 38%, currentColor 8%, transparent 9%);
+          @include theme {
+            background-color: co(main);
+            color: co(back);
+          }
+          animation: am-selected 0.2s 0.1s both;
+        }
+      }
+    }
+
+    // 文本类
+    &[#{$n}~=':text']#{$sub} {
+      width: auto;
+    }
+
+    // 圆形
+    &[#{$n}~=':round']#{$sub} {
+      border-radius: 50%;
+      &.selected,
+      &[selected~='1'] {
+        &::after {
+          width: 1rem;
+          height: 1rem;
+          top: 15%;
+          right: 15%;
+          border-radius: 2rem;
+        }
+      }
+
+      & > * {
+        border-radius: 50%;
+      }
+    }
+    // 叶形
+    &[#{$n}~=':leaf']#{$sub} {
+      border-radius: 30% 0.3rem;
+      & > * {
+        border-radius: 28% 0.1rem;
+      }
+    }
+
+    // 颜色
+    $color: 'none', 'main', 'text', 'read', 'case', 'line', 'note', 'weak', 'back', 'fore';
+    @each $co in $color {
+      &[#{$n}~='#{$co}'] {
+        &#{$sub} {
+          @include theme {
+            box-shadow: inset 0 0 0 1px co($co);
+          }
+        }
+      }
+    }
+
+    // 尺寸
+    $size: 'xs', 'ss', 'sm', 'sl', 'ms', 'mm', 'ml', 'ls', 'lm', 'll', 'xl';
+    $base: 1.5em;
+    $padd: 2px;
+    @each $sz in $size {
+      &[#{$n}~='sz:#{$sz}'] {
+        &#{$sub} {
+          width: $base;
+          min-width: $base;
+          height: $base;
+          padding: $padd;
+        }
+
+        &.selected,
+        &[selected~='1'] {
+          &::after {
+            width: calc($base / 5);
+            height: calc($base / 5);
+          }
+        }
+
+        &[#{$n}~=':text']#{$sub} {
+          width: auto;
+        }
+      }
+      @if ($base<3) {
+        $base: $base + 0.5;
+      } @else {
+        $base: $base + 1;
+      }
+      $padd: $padd + 1;
+    }
+  }
+}
+
+// 单个
+@include imgs('ui-img');
+// 群组
+@include imgs('ui-imgs', '>*');

package/imgs/imgs@b.scss

@@ -0,0 +1,173 @@
+@use 'sass:math';
+@mixin imgs($n: 'ui-img', $sub: '') {
+  [#{$n}~='@b'] {
+    &#{$sub} {
+      position: relative;
+      display: inline-flex;
+      vertical-align: middle;
+      width: 2.5rem;
+      height: 2.5rem;
+      border-radius: 0.25rem;
+      padding: 3px;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      box-shadow: inset 0 0 0 1px currentColor;
+      transition: all 0.3s;
+
+      & > * {
+        // width: 200%;
+        // height: 200%;
+        min-width: 200% !important;
+        min-height: 200% !important;
+        max-width: 200% !important;
+        max-height: 200% !important;
+        transform: scale3d(0.5, 0.5, 1);
+        border-radius: 2px;
+        overflow: hidden;
+        transition: all 0.35s;
+        background-size: cover;
+        background-position: center;
+        background-repeat: no-repeat;
+        flex-shrink: 0;
+      }
+      & > img {
+        width: auto;
+        height: auto;
+        max-width: 100%;
+        max-height: 100%;
+      }
+
+      &:hover {
+        @include theme {
+          border: 1px solid co(text);
+          box-shadow: inset 0 0 0 1px co(text);
+        }
+        & > * {
+          transform: scale3d(1, 1, 1);
+          z-index: 2;
+        }
+      }
+
+      // 激活
+      &.active {
+        @include theme {
+          // border: 1px solid co(main) !important;
+          box-shadow: inset 0 0 0 1px co(main);
+        }
+      }
+      // 选中
+      &.selected,
+      &[selected~='1'] {
+        @include theme {
+          // border: 1px solid co(main) !important;
+          box-shadow: inset 0 0 0 1px co(main);
+        }
+
+        &::after {
+          position: absolute;
+          display: block;
+          content: '';
+          width: 0.6rem;
+          height: 0.6rem;
+          max-width: 1rem;
+          max-height: 1rem;
+          top: 3%;
+          right: 3%;
+          border-radius: 0.2rem;
+          background-image: radial-gradient(circle at 26% 56%, currentColor 8%, transparent 9%), radial-gradient(circle at 32% 62%, currentColor 8%, transparent 9%),
+            radial-gradient(circle at 35% 65%, currentColor 8%, transparent 9%), radial-gradient(circle at 41% 71%, currentColor 8%, transparent 9%),
+            radial-gradient(circle at 47% 70%, currentColor 9%, transparent 10%), radial-gradient(circle at 53% 62%, currentColor 9%, transparent 10%),
+            radial-gradient(circle at 59% 54%, currentColor 9%, transparent 10%), radial-gradient(circle at 65% 46%, currentColor 9%, transparent 10%),
+            radial-gradient(circle at 71% 38%, currentColor 8%, transparent 9%);
+          @include theme {
+            background-color: co(main);
+            color: co(back);
+          }
+          animation: am-selected 0.2s 0.1s both;
+        }
+      }
+    }
+
+    // 文本类
+    &[#{$n}~=':text']#{$sub} {
+      width: auto;
+    }
+
+    // 圆形
+    &[#{$n}~=':round']#{$sub} {
+      border-radius: 50%;
+      &.selected,
+      &[selected~='1'] {
+        &::after {
+          width: 1rem;
+          height: 1rem;
+          top: 15%;
+          right: 15%;
+          border-radius: 2rem;
+        }
+      }
+
+      & > * {
+        border-radius: 50%;
+      }
+    }
+    // 叶形
+    &[#{$n}~=':leaf']#{$sub} {
+      border-radius: 30% 0.3rem;
+      & > * {
+        border-radius: 28% 0.1rem;
+      }
+    }
+
+    // 颜色
+    $color: 'none', 'main', 'text', 'read', 'case', 'line', 'note', 'weak', 'back', 'fore';
+    @each $co in $color {
+      &[#{$n}~='#{$co}'] {
+        &#{$sub} {
+          @include theme {
+            box-shadow: inset 0 0 0 1px co($co);
+          }
+        }
+      }
+    }
+
+    // 尺寸
+    $size: 'xs', 'ss', 'sm', 'sl', 'ms', 'mm', 'ml', 'ls', 'lm', 'll', 'xl';
+    $base: 1.5em;
+    $padd: 2px;
+    @each $sz in $size {
+      &[#{$n}~='sz:#{$sz}'] {
+        &#{$sub} {
+          width: $base;
+          min-width: $base;
+          height: $base;
+          padding: $padd;
+        }
+
+        &.selected,
+        &[selected~='1'] {
+          &::after {
+            width: calc($base / 5);
+            height: calc($base / 5);
+          }
+        }
+
+        &[#{$n}~=':text']#{$sub} {
+          width: auto;
+        }
+      }
+      @if ($base<3) {
+        $base: $base + 0.5;
+      } @else {
+        $base: $base + 1;
+      }
+      $padd: $padd + 1;
+    }
+  }
+}
+
+// 单个
+@include imgs('ui-img');
+// 群组
+@include imgs('ui-imgs', '>*');

package/imgs/mcui@imgs.scss

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

package/imgs/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@neatui/imgs",
+  "version": "1.1.17",
+  "description": "",
+  "main": "mcui@imgs.scss",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "xiaojunbo",
+  "license": "MIT",
+  "dependencies": {},
+  "keywords": [
+    "mcui",
+    "ui"
+  ]
+}

package/index.js

@@ -0,0 +1,28 @@
+const mcui = {
+  theme: {
+    set: function (theme) {
+      document.documentElement.attr('theme', theme);
+    },
+    get: function () {
+      return document.documentElement.attr('theme');
+    }
+  },
+  size: {
+    set(size) {
+      document.documentElement.attr('size', size);
+    },
+    get: function () {
+      return document.documentElement.attr('size');
+    }
+  },
+  layout: {
+    set(layout) {
+      document.documentElement.attr('layout', layout);
+    },
+    get: function () {
+      return document.documentElement.attr('layout');
+    }
+  }
+};
+
+module.exports = mcui;

package/line/line@a.scss

@@ -0,0 +1,51 @@
+[ui-line~='@a'] {
+  $szs: xs, s, m, l, xl;
+  $cos: main, read, case, weak;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  justify-items: center;
+  white-space: nowrap;
+
+  &::before,
+  &::after {
+    content: '';
+    display: block;
+    width: 50%;
+    height: 1px;
+    flex-grow: 1;
+    flex-shrink: 1;
+    @include theme {
+      background: co(line);
+    }
+  }
+
+  & > * {
+    padding: 0 0.5em;
+  }
+
+  // 粗细
+  $sz_base: 0px;
+  @each $sz in $szs {
+    $sz_base: $sz_base + 1;
+    &[ui-line~='sz:#{$sz}'] {
+      &::before,
+      &::after {
+        height: $sz_base;
+      }
+    }
+  }
+
+  // 颜色
+  @each $co in $cos {
+    &[ui-line~='co:#{$co}'] {
+      &::before,
+      &::after {
+        @include theme {
+          background: co($co);
+        }
+      }
+    }
+  }
+}

package/line/line@b.scss

@@ -0,0 +1,63 @@
+[ui-line~='@b'] {
+  $szs: xs, s, m, l, xl;
+  $cos: main, read, case, weak;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  justify-items: center;
+  white-space: nowrap;
+
+  &::before,
+  &::after {
+    content: '';
+    display: block;
+    width: 50%;
+    height: 1px;
+    flex-grow: 1;
+    flex-shrink: 1;
+  }
+
+  &::before {
+    @include theme {
+      background: linear-gradient(90deg, transparent 0%, co(line) 10%);
+    }
+  }
+  &::after {
+    @include theme {
+      background: linear-gradient(270deg, transparent 0%, co(line) 10%);
+    }
+  }
+
+  & > * {
+    padding: 0 0.5em;
+  }
+
+  // 粗细
+  $sz_base: 0px;
+  @each $sz in $szs {
+    $sz_base: $sz_base + 1;
+    &[ui-line~='sz:#{$sz}'] {
+      &::before,
+      &::after {
+        height: $sz_base;
+      }
+    }
+  }
+
+  // 颜色
+  @each $co in $cos {
+    &[ui-line~='co:#{$co}'] {
+      &::before {
+        @include theme {
+          background: linear-gradient(90deg, transparent 0%, co($co) 10%);
+        }
+      }
+      &::after {
+        @include theme {
+          background: linear-gradient(270deg, transparent 0%, co($co) 10%);
+        }
+      }
+    }
+  }
+}

package/line/mcui@line.scss

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

package/line/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@neatui/line",
+  "version": "1.0.5",
+  "description": "",
+  "main": "mcui@line.scss",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "xiaojunbo",
+  "license": "MIT",
+  "dependencies": {},
+  "keywords": [
+    "mcui",
+    "ui"
+  ]
+}