@neatui/css 1.0.2

package/anim/am-view-at.scss

@@ -0,0 +1,103 @@
+// 显示动画
+@keyframes am-show-at {
+  0% {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  25% {
+    transform: scale(0.9);
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+// 隐藏动画
+@keyframes am-hide-at {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(0.9);
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+// 引用显示
+%am-show-at {
+  transform: translateY(-15px);
+  opacity: 0;
+  transform-style: preserve-3d;
+}
+
+// 引用隐藏
+%am-hide-at {
+  transform: translateY(0);
+  opacity: 1;
+  transform-style: preserve-3d;
+}
+
+// 传参调用
+@mixin am-view-at($time: 250ms, $delay: 100ms) {
+  &.show,
+  &[view='2'] {
+    & > * {
+      @extend %am-show-at;
+      animation: am-show-at $time cubic-bezier(0.25, 0.1, 0.25, 1) $delay 1 both;
+    }
+  }
+
+  &.hide,
+  &[view='1'] {
+    opacity: 0;
+    transition: ($time + $delay) * (5/10) ($time + $delay) * (5/10);
+    // transition: $delay $time;
+    pointer-events: none;
+
+    & > * {
+      @extend %am-hide-at;
+      animation: am-hide-at $time $delay both;
+    }
+  }
+
+  &.none,
+  &[view='0'] {
+    display: none;
+  }
+}
+
+// 动画时间
+$time: 250ms;
+$delay: 100ms;
+
+// 全套引用
+[am-view='at'] {
+  &.show,
+  &[view='2'] {
+    & > * {
+      @extend %am-show-at;
+      animation: am-show-at $time cubic-bezier(0.25, 0.1, 0.25, 1) $delay 1 both;
+    }
+  }
+
+  &.hide,
+  &[view='1'] {
+    opacity: 0;
+    transition: ($time + $delay) * (4 * 0.1) ($time + $delay) * (6 * 0.1);
+    pointer-events: none;
+
+    & > * {
+      @extend %am-hide-at;
+      animation: am-hide-at $time $delay both;
+    }
+  }
+
+  &.none,
+  &[view='0'] {
+    display: none;
+  }
+}

package/anim/mcui@anim.scss

@@ -0,0 +1,22 @@
+@import './am-loading.scss';
+@import './am-rotate.scss';
+@import './am-view-aa.scss';
+@import './am-view-ab.scss';
+@import './am-view-ac.scss';
+@import './am-view-ad.scss';
+@import './am-view-ae.scss';
+@import './am-view-af.scss';
+@import './am-view-ag.scss';
+@import './am-view-ah.scss';
+@import './am-view-ai.scss';
+@import './am-view-aj.scss';
+@import './am-view-ak.scss';
+@import './am-view-al.scss';
+@import './am-view-am.scss';
+@import './am-view-an.scss';
+@import './am-view-ao.scss';
+@import './am-view-ap.scss';
+@import './am-view-aq.scss';
+@import './am-view-ar.scss';
+@import './am-view-as.scss';
+@import './am-view-at.scss';

package/anim/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@neatui/anim",
+  "version": "1.0.0",
+  "description": "MCUI 核心组件，MCUI 全局架构性组件。官网 https://mcui.fekit.cn",
+  "main": "mcui@anim.scss",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "xiaojunbo",
+  "license": "MIT",
+  "dependencies": {},
+  "keywords": [
+    "mcui",
+    "ui"
+  ]
+}

package/badge/badge@theme=aa.scss

@@ -0,0 +1,36 @@
+/*
+ * 组件：气泡
+ * 组件注册编号：02-0002
+ * 标准结构1级
+ * 属性：
+ * sz    规格（默认：m   s | m | l）
+ * co    颜色 (默认：read  read | back | main | vice | info | success | warn | error)
+ * 示例：
+ *  <span class="xui-btn" mc="02-0002"></span> 默认的这样就行了
+ *  <div class="xui-btn" mc="02-0002" btn-sz="s"></div> 小号的这样写
+ * 关联：html+css
+ */
+
+.xui-bubble[theme="default"]{
+  font-style: normal;
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  line-height: 1em;
+  // background: $bg-main;
+  border-radius: 3px;
+  color:#fff;
+  margin-right:3px;
+  box-sizing: content-box;
+  -webkit-box-sizing: content-box;
+  padding: 2px;
+  transform: scale(.8);
+  -webkit-transform: scale(.8);
+}
+
+// .xui-bubble[theme="default"][co="main"]{background: $bg-main;}
+// .xui-bubble[theme="default"][co="vice"]{background: $bg-vice;}
+// .xui-bubble[theme="default"][co="info"]{background: $bg-info;}
+// .xui-bubble[theme="default"][co="success"]{background: $bg-success;}
+// .xui-bubble[theme="default"][co="warn"]{background: $bg-warn;}
+// .xui-bubble[theme="default"][co="danger"]{background: $bg-danger;}

package/badge/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@neatui/mcui",
+  "version": "1.0.0",
+  "description": "",
+  "main": "mcui.esm.js",
+  "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/btns/README.md

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

package/btns/base.scss

@@ -0,0 +1,152 @@
+@use 'sass:math';
+$size: 'xs', 's', 'm', 'l', 'xl';
+
+[ui-btn] {
+  & {
+    position: relative;
+    display: inline-flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    align-content: center;
+    flex-wrap: wrap;
+
+    height: 2.5em;
+    padding: 0 1em;
+    border-radius: 0.25em;
+    cursor: pointer;
+    transition: all 50ms;
+    text-align: center;
+    vertical-align: middle;
+    border: 0;
+    user-select: none;
+    white-space: nowrap;
+    color: inherit;
+    border: 1px solid currentColor;
+    @include theme {
+      background: co(weak);
+    }
+  }
+
+  // 按钮尺寸
+  $base: 1.5;
+  @each $i in $size {
+    &[ui-btn~='sz:#{$i}'] {
+      height: #{$base}em;
+      padding: 0 #{calc(($base - 0.5) / 2)}em;
+
+      // 方形按钮
+      &[ui-btn~=':square'] {
+        width: #{$base}em;
+        padding: 0;
+      }
+
+      &[ui-btn~=':abs'] {
+        height: #{$base}rem;
+        padding: 0 #{calc(($base - 0.5) / 2)}rem;
+      }
+    }
+
+    @include med('=mob') {
+      &[ui-btn~='mob-#{$i}'] {
+        height: #{$base}em;
+        padding: 0 #{calc(($base - 0.5) / 2)}em;
+
+        // 方形按钮
+        &[ui-btn~=':square'] {
+          width: #{$base}em;
+          padding: 0;
+        }
+
+        &[ui-btn~=':abs'] {
+          height: #{$base}rem;
+          padding: 0 #{calc(($base - 0.5) / 2)}rem;
+        }
+      }
+    }
+    @include med('=pad') {
+      &[ui-btn~='pad-#{$i}'] {
+        height: #{$base}em;
+        padding: 0 #{calc(($base - 0.5) / 2)}em;
+
+        // 方形按钮
+        &[ui-btn~=':square'] {
+          width: #{$base}em;
+          padding: 0;
+        }
+
+        &[ui-btn~=':abs'] {
+          height: #{$base}rem;
+          padding: 0 #{calc(($base - 0.5) / 2)}rem;
+        }
+      }
+    }
+
+    $base: $base + 0.5;
+  }
+}
+
+[ui-btns] {
+  // 按钮尺寸
+  $base: 1.5;
+  @each $i in $size {
+    &[ui-btns~='sz:#{$i}'] {
+      & > * {
+        height: #{$base}em;
+        padding: 0 #{calc(($base - 0.5) / 2)}em;
+      }
+
+      // 方形按钮
+      &[ui-btns~=':square'] > * {
+        width: #{$base}em;
+        padding: 0;
+      }
+
+      &[ui-btns~=':abs'] > * {
+        height: #{$base}rem;
+        padding: 0 #{calc(($base - 0.5) / 2)}rem;
+      }
+    }
+
+    @include med('=mob') {
+      &[ui-btns~='mob-#{$i}'] {
+        & > * {
+          height: #{$base}em;
+          padding: 0 #{calc(($base - 0.5) / 2)}em;
+        }
+
+        // 方形按钮
+        &[ui-btns~=':square'] > * {
+          width: #{$base}em;
+          padding: 0;
+        }
+
+        &[ui-btns~=':abs'] > * {
+          height: #{$base}rem;
+          padding: 0 #{calc(($base - 0.5) / 2)}rem;
+        }
+      }
+    }
+    @include med('=pad') {
+      &[ui-btns~='pad-#{$i}'] {
+        & > * {
+          height: #{$base}em;
+          padding: 0 #{calc(($base - 0.5) / 2)}em;
+        }
+
+        // 方形按钮
+        &[ui-btns~=':square'] > * {
+          width: #{$base}em;
+          padding: 0;
+        }
+
+        &[ui-btns~=':abs'] > * {
+          height: #{$base}rem;
+          padding: 0 #{calc(($base - 0.5) / 2)}rem;
+        }
+      }
+    }
+
+    $base: $base + 0.5;
+  }
+}