@neatui/css 3.15.0 → 3.16.0

package/core/container.scss

@@ -0,0 +1,281 @@
+@use 'sass:list';
+@use 'sass:string';
+
+// ============================================
+// NeatUI Container Queries (可选模块)
+// 使用: @import '@neatui/css/core/container';
+// ============================================
+
+// 容器查询断点 (纯尺寸命名，不涉及设备语义)
+// s = small, m = medium, l = large
+// ss/sm/sl = 小尺寸段
+// ms/mm/ml = 中尺寸段
+// ls/lm/ll = 大尺寸段
+$clevel: (
+  ss: 320px,
+  sm: 480px,
+  sl: 640px,
+  ms: 800px,
+  mm: 960px,
+  ml: 1120px,
+  ls: 1280px,
+  lm: 1440px,
+  ll: 1600px
+);
+
+// ============================================
+// 定义容器
+// ============================================
+[ui-container] {
+  container-type: inline-size;
+}
+
+// ============================================
+// 容器查询 Mixins
+// ============================================
+
+// 小尺寸段 (< 800px)
+@mixin cs() {
+  $this: #{list.nth(&, 1)};
+  @container (max-width: 799px) {
+    @if ($this == '') {
+      @content;
+    } @else {
+      & {
+        @content;
+      }
+    }
+  }
+}
+
+// 中尺寸段 (800px - 1279px)
+@mixin cm() {
+  $this: #{list.nth(&, 1)};
+  @container (min-width: 800px) and (max-width: 1279px) {
+    @if ($this == '') {
+      @content;
+    } @else {
+      & {
+        @content;
+      }
+    }
+  }
+}
+
+// 大尺寸段 (>= 1280px)
+@mixin cl() {
+  $this: #{list.nth(&, 1)};
+  @container (min-width: 1280px) {
+    @if ($this == '') {
+      @content;
+    } @else {
+      & {
+        @content;
+      }
+    }
+  }
+}
+
+// 容器尺寸查询
+@mixin cq($p) {
+  $this: #{list.nth(&, 1)};
+  $r: string.slice($p, 1, 1);
+
+  // 大于某节点时
+  @if ($r == '>') {
+    @if ($p == '>ss') {
+      @container (min-width: 320px) {
+        @if ($this == '') { @content; } @else { & { @content; } }
+      }
+    } @else if ($p == '>sm') {
+      @container (min-width: 480px) {
+        @if ($this == '') { @content; } @else { & { @content; } }
+      }
+    } @else if ($p == '>sl') {
+      @container (min-width: 640px) {
+        @if ($this == '') { @content; } @else { & { @content; } }
+      }
+    } @else if ($p == '>ms') {
+      @container (min-width: 800px) {
+        @if ($this == '') { @content; } @else { & { @content; } }
+      }
+    } @else if ($p == '>mm') {
+      @container (min-width: 960px) {
+        @if ($this == '') { @content; } @else { & { @content; } }
+      }
+    } @else if ($p == '>ml') {
+      @container (min-width: 1120px) {
+        @if ($this == '') { @content; } @else { & { @content; } }
+      }
+    } @else if ($p == '>ls') {
+      @container (min-width: 1280px) {
+        @if ($this == '') { @content; } @else { & { @content; } }
+      }
+    } @else if ($p == '>lm') {
+      @container (min-width: 1440px) {
+        @if ($this == '') { @content; } @else { & { @content; } }
+      }
+    } @else if ($p == '>ll') {
+      @container (min-width: 1600px) {
+        @if ($this == '') { @content; } @else { & { @content; } }
+      }
+    }
+  }
+  // 小于某节点时
+  @else if ($r == '<') {
+    @if ($p == '<ss') {
+      @container (max-width: 319px) {
+        @if ($this == '') { @content; } @else { & { @content; } }
+      }
+    } @else if ($p == '<sm') {
+      @container (max-width: 479px) {
+        @if ($this == '') { @content; } @else { & { @content; } }
+      }
+    } @else if ($p == '<sl') {
+      @container (max-width: 639px) {
+        @if ($this == '') { @content; } @else { & { @content; } }
+      }
+    } @else if ($p == '<ms') {
+      @container (max-width: 799px) {
+        @if ($this == '') { @content; } @else { & { @content; } }
+      }
+    } @else if ($p == '<mm') {
+      @container (max-width: 959px) {
+        @if ($this == '') { @content; } @else { & { @content; } }
+      }
+    } @else if ($p == '<ml') {
+      @container (max-width: 1119px) {
+        @if ($this == '') { @content; } @else { & { @content; } }
+      }
+    } @else if ($p == '<ls') {
+      @container (max-width: 1279px) {
+        @if ($this == '') { @content; } @else { & { @content; } }
+      }
+    } @else if ($p == '<lm') {
+      @container (max-width: 1439px) {
+        @if ($this == '') { @content; } @else { & { @content; } }
+      }
+    } @else if ($p == '<ll') {
+      @container (max-width: 1599px) {
+        @if ($this == '') { @content; } @else { & { @content; } }
+      }
+    }
+  }
+}
+
+// ============================================
+// 容器隐藏工具类 (ui-chide)
+// ============================================
+
+// 大于某节点时隐藏
+@each $sz in $clevel {
+  $n: #{list.nth($sz, 1)};
+  [ui-chide~='>#{$n}'] {
+    @include cq('>#{$n}') {
+      display: none !important;
+    }
+  }
+}
+
+// 小于某节点时隐藏
+@each $sz in $clevel {
+  $n: #{list.nth($sz, 1)};
+  [ui-chide~='<#{$n}'] {
+    @include cq('<#{$n}') {
+      display: none !important;
+    }
+  }
+}
+
+// ============================================
+// 容器显示工具类 (ui-cshow)
+// ============================================
+
+// 大于某节点时显示为 block
+@each $sz in $clevel {
+  $n: #{list.nth($sz, 1)};
+  [ui-cshow~='>#{$n}'] {
+    display: none;
+    @include cq('>#{$n}') {
+      display: block !important;
+    }
+  }
+  [ui-cshow~='>#{$n}:flex'] {
+    display: none;
+    @include cq('>#{$n}') {
+      display: flex !important;
+    }
+  }
+  [ui-cshow~='>#{$n}:grid'] {
+    display: none;
+    @include cq('>#{$n}') {
+      display: grid !important;
+    }
+  }
+}
+
+// 小于某节点时显示为 block
+@each $sz in $clevel {
+  $n: #{list.nth($sz, 1)};
+  [ui-cshow~='<#{$n}'] {
+    display: none;
+    @include cq('<#{$n}') {
+      display: block !important;
+    }
+  }
+  [ui-cshow~='<#{$n}:flex'] {
+    display: none;
+    @include cq('<#{$n}') {
+      display: flex !important;
+    }
+  }
+}
+
+// ============================================
+// 容器 Flex 方向
+// ============================================
+@each $sz in $clevel {
+  $n: #{list.nth($sz, 1)};
+  [ui-cflex~='>#{$n}:row'] {
+    @include cq('>#{$n}') {
+      flex-direction: row !important;
+    }
+  }
+  [ui-cflex~='>#{$n}:col'] {
+    @include cq('>#{$n}') {
+      flex-direction: column !important;
+    }
+  }
+  [ui-cflex~='<#{$n}:row'] {
+    @include cq('<#{$n}') {
+      flex-direction: row !important;
+    }
+  }
+  [ui-cflex~='<#{$n}:col'] {
+    @include cq('<#{$n}') {
+      flex-direction: column !important;
+    }
+  }
+}
+
+// ============================================
+// 容器文本对齐
+// ============================================
+@each $sz in $clevel {
+  $n: #{list.nth($sz, 1)};
+  [ui-ctext~='>#{$n}:left'] {
+    @include cq('>#{$n}') {
+      text-align: left !important;
+    }
+  }
+  [ui-ctext~='>#{$n}:center'] {
+    @include cq('>#{$n}') {
+      text-align: center !important;
+    }
+  }
+  [ui-ctext~='>#{$n}:right'] {
+    @include cq('>#{$n}') {
+      text-align: right !important;
+    }
+  }
+}

package/core/size.scss

@@ -1,12 +1,11 @@
 /*
  * 模块：字号
  * 模块类型：b(基础模块)
- * 精度：9 +
- * 分级：3 +
- * 适配：桌面 | 平析 | 移动
- * 兼容：
- * 版本：v0.0.1
- * 备注：s->Small 小，m->Middle 中，l->Large 大；x->Extra 特大
+ * 精度：11档 (xs ss sm sl ms mm ml ls lm ll xl)
+ * 分级：3 (s/m/l)
+ * 适配：桌面 | 平板 | 移动
+ * 版本：v0.0.2
+ * 备注：s->Small 小，m->Middle 中，l->Large 大；x->Extra
  */
 
 @use 'sass:list';
@@ -27,7 +26,7 @@
 
 // 分级字号
 @mixin randSize($d: '') {
-  $rank: 'xxs', 'xs', 'ss', 'sm', 'sl', 'ms', 'mm', 'ml', 'ls', 'lm', 'll', 'xl', 'xxl';
+  $rank: 'xs', 'ss', 'sm', 'sl', 'ms', 'mm', 'ml', 'ls', 'lm', 'll', 'xl';
   // 分级字号
   .#{$d}fs-no {
     font-size: 0rem;
@@ -36,7 +35,7 @@
     line-height: 0;
   }
 
-  $sz: 0.6;
+  $sz: 0.7;
   $add: 0.05;
   @each $k in $rank {
     @if ($sz<1.2) {

package/core/trim.scss

@@ -1,6 +1,6 @@
-@use './media.scss' as *;
+@use "./media.scss" as *;
 
-@mixin trim($media: '') {
+@mixin trim($media: "") {
   $size: (no, xs, ss, sm, sl, ms, mm, ml, ls, lm, ll, xl);
 
   // 栅格
@@ -56,7 +56,7 @@
   // 圆角
   $br_base: 0;
   .#{$media}r-full {
-    border-radius: 50%;
+    border-radius: 10000em;
   }
   @each $sz in $size {
     // 四角
@@ -626,11 +626,11 @@
 @include trim();
 
 // 平板
-@include med('<dpc') {
-  @include trim('pad\\:');
+@include med("<dpc") {
+  @include trim("pad\\:");
 }
 
 // 移动
-@include med('<pad') {
-  @include trim('mob\\:');
+@include med("<pad") {
+  @include trim("mob\\:");
 }

package/package.json

@@ -1,9 +1,12 @@
 {
   "name": "@neatui/css",
-  "version": "3.15.0",
+  "version": "3.16.0",
   "description": "neatui",
   "main": "./neatui.scss",
   "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
   "author": "xiaojunbo",
   "scripts": {
     "build": "yarn build:scss && yarn build:optimize && yarn build:minify",

package/core/README.md

@@ -1,142 +0,0 @@
-# @neatui/core
-
-MCUI 核心组件，MCUI 全局架构性组件。官网 [https://mcui.fekit.cn/](https://mcui.fekit.cn/)
-
-## 安装
-
-### 安装核心
-
-```
-npm i @neatui/core
-```
-
-### 安装组件
-
-```
-npm i @neatui/btns
-```
-
-## 引用
-
-```scss
-// main.scss
-
-// 添加主题
-$theme: (
-  light: (
-    main: #d52932,
-    // 主体
-    vice: #67337d,
-    // 辅助
-    text: #000000,
-    // 文本
-    back: #ffffff,
-    // 底色
-    link: #0d66d0,
-    // 链接
-    code: #e23861,
-    // 代码
-    well: #4bbc73,
-    // 提倡
-    warn: #fb9a2a,
-    // 警告
-    risk: #f95850,
-    // 风险
-    info: #0889e4 // 信息
-  ),
-  dark: (
-    main: #91cc48,
-    vice: #ffa60f,
-    text: rgba(255, 255, 255, 0.9),
-    back: #262629,
-    link: #00b9ff,
-    code: #e23861,
-    well: #49ca74,
-    warn: #fb9a2a,
-    risk: #fd7466,
-    info: #949af9
-  )
-  // 添加更多主题...
-);
-
-// 引用框架核心
-@import '~@neatui/core';
-
-// 引用业务组件
-@import '~@neatui/btns';
-// 引用更多组件...
-```
-
-## 使用
-
-### 颜色
-
-```scss
-@import '~@neatui/core';
-
-.header {
-  position: fixed;
-  width: 100%;
-  height: 4rem;
-  left: 0;
-  top: 0;
-
-  @include theme {
-    background-color: var(--co-back);
-    color: var(--co-text);
-  }
-}
-```
-
-↓
-
-```css
-/* 编译成css: */
-.header {
-  position: fixed;
-  width: 100%;
-  height: 4rem;
-  left: 0;
-  top: 0;
-}
-[mcui~='light'] .header {
-  background-color: #ffffff;
-  color: #000000;
-}
-[mcui~='dark'] .header {
-  background-color: #262629;
-  color: rgba(255, 255, 255, 0.9);
-}
-```
-
-### 响应三端
-
-```scss
-@import '~@neatui/core';
-
-body {
-  font-size: 14px;
-
-  @include mob {
-    font-size: 12px;
-  }
-}
-```
-
-↓
-
-```css
-/* 编译成css: */
-body {
-  font-size: 14px;
-}
-@media screen and (max-width: 767px) {
-  body {
-    font-size: 12px;
-  }
-}
-```
-
-## 更多
-
-详细文档请到MCUI官网 [https://mcui.fekit.cn](https://mcui.fekit.cn)

package/core/package.json

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