mvframe 1.0.93 → 1.0.95

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mvframe",
   "packageManager": "yarn@4.4.1",
-  "version": "1.0.93",
+  "version": "1.0.95",
   "author": "matt avis",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -34,6 +34,7 @@
       "import": "./dist/util.js",
       "require": "./dist/util.js"
     },
+    "./style/mixin": "./src/style/chip/mixin.scss",
     "./style": "./dist/css/style.css",
     "./style/cpt": "./dist/css/cpt.css",
     "./package.json": "./package.json"
@@ -59,6 +60,7 @@
   },
   "files": [
     "dist/*",
+    "src/style/chip/mixin.scss",
     "scripts/build-host.js",
     "scripts/dev-with-notify.js",
     "scripts/install-codex-agents.js",

package/scripts/scaffold-app.js

@@ -594,7 +594,8 @@ export {};
     "src/assets/style/index.scss",
     `/* 项目全局样式入口（main.js 已 import 本文件） */
 /* MVFrame：main.js 已 import "mvframe/style" 与 "mvframe/style/cpt"（发布包 CSS），勿在此处再 @import 同一路径，避免重复。 */
-/* 若需在 SCSS 内 @use 变量/mixin，可指向 node_modules 内 mvframe 源码路径或 monorepo workspace 路径。 */
+/* 若需在业务 SCSS 内复用 mvframe 断点 / mixin，直接：@use "mvframe/style/mixin" as *; */
+/* 例如：@include media-down(sm) { ... } */
 
 body {
   margin: 0;
@@ -867,6 +868,30 @@ yarn exec mvframe-d
 
 \`src/main.js\` 已包含 \`import "mvframe/style"\` 与 \`import "mvframe/style/cpt"\`（分别对应工具类/变量与 **Mvc\*** 组件 scoped 等样式），一般 **无需** 在 \`index.scss\` 再引一遍 mvframe 的 dist CSS，以免重复。项目级覆盖写在 \`src/assets/style/index.scss\` 即可。
 
+宿主项目如需在 SCSS 内复用 MVFrame 断点，直接：
+
+\`\`\`scss
+@use "mvframe/style/mixin" as *;
+
+.Panel {
+  padding: 1.5rem;
+
+  @include media-down(sm) {
+    padding: 1rem;
+  }
+}
+\`\`\`
+
+发布包的 \`mvframe/style\` 还额外提供响应式工具类：\`{断点}-{up|down|only}-{工具类}\`，如 \`md-down-hide\`、\`lg-up-flexMode\`、\`xs-only-block\`。适合直接写在 template 上；复杂宽高/间距调整仍建议在业务 SCSS 里配合 media mixin 写。
+
+做 Grid 列数切换时，也可以直接在容器上写断点列数类，例如：
+
+\`\`\`html
+<div class="grid col2 md2 lg3 sm1 g16"></div>
+\`\`\`
+
+表示默认 2 列，\`sm\` 1 列，\`md\` 2 列，\`lg\` 3 列。
+
 ## 表单 Label
 
 \`Input\`、\`Textarea\`、\`Select\`、\`SelectV2\` 支持统一的 label 接口：

package/src/style/chip/mixin.scss

@@ -0,0 +1,141 @@
+@use "sass:list";
+@use "sass:map";
+
+// 响应式断点：xs < 40rem，sm 40rem~47.99875rem，md 48rem~63.99875rem，
+// lg 64rem~79.99875rem，xl 80rem~95.99875rem，xxl >= 96rem。
+$media-breakpoints: (
+  "xs": 0,
+  "sm": 40rem,
+  "md": 48rem,
+  "lg": 64rem,
+  "xl": 80rem,
+  "xxl": 96rem,
+) !default;
+
+@function media-breakpoint($name) {
+  $value: map.get($media-breakpoints, $name);
+  @if $value == null {
+    @error "[mvframe media] Unknown breakpoint `#{$name}`. Available: #{map.keys($media-breakpoints)}";
+  }
+  @return $value;
+}
+
+@function media-next($name) {
+  $keys: map.keys($media-breakpoints);
+  $index: list.index($keys, $name);
+
+  @if $index == null {
+    @error "[mvframe media] Unknown breakpoint `#{$name}`. Available: #{$keys}";
+  }
+  @if $index == list.length($keys) {
+    @return null;
+  }
+  @return list.nth($keys, $index + 1);
+}
+
+@function media-range-max($name) {
+  $next: media-next($name);
+  @if $next == null {
+    @return null;
+  }
+  @return calc(#{media-breakpoint($next)} - 0.02px);
+}
+
+@mixin media-up($name) {
+  $min: media-breakpoint($name);
+  @if $min == 0 {
+    @content;
+  } @else {
+    @media (min-width: #{$min}) {
+      @content;
+    }
+  }
+}
+
+@mixin media-down($name) {
+  $max: media-range-max($name);
+  @if $max == null {
+    @content;
+  } @else {
+    @media (max-width: #{$max}) {
+      @content;
+    }
+  }
+}
+
+@mixin media-only($name) {
+  $min: media-breakpoint($name);
+  $max: media-range-max($name);
+
+  @if $min == 0 and $max == null {
+    @content;
+  } @else if $min == 0 {
+    @media (max-width: #{$max}) {
+      @content;
+    }
+  } @else if $max == null {
+    @media (min-width: #{$min}) {
+      @content;
+    }
+  } @else {
+    @media (min-width: #{$min}) and (max-width: #{$max}) {
+      @content;
+    }
+  }
+}
+
+@mixin media-between($from, $to) {
+  $keys: map.keys($media-breakpoints);
+  $from-index: list.index($keys, $from);
+  $to-index: list.index($keys, $to);
+
+  @if $from-index == null or $to-index == null {
+    @error "[mvframe media] Unknown breakpoint in `media-between(#{$from}, #{$to})`. Available: #{$keys}";
+  }
+  @if $from-index > $to-index {
+    @error "[mvframe media] `media-between` expects `$from <= $to`, got `#{$from}` > `#{$to}`.";
+  }
+
+  $min: media-breakpoint($from);
+  $max: media-range-max($to);
+
+  @if $min == 0 and $max == null {
+    @content;
+  } @else if $min == 0 {
+    @media (max-width: #{$max}) {
+      @content;
+    }
+  } @else if $max == null {
+    @media (min-width: #{$min}) {
+      @content;
+    }
+  } @else {
+    @media (min-width: #{$min}) and (max-width: #{$max}) {
+      @content;
+    }
+  }
+}
+
+// 发光阴影效果：::after 伪元素，可被 @include 复用
+@mixin glow-shadow-after($css-var) {
+  position: relative;
+  isolation: isolate;
+  &::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0.25;
+    background-color: var(#{$css-var});
+    transform: translateY(20%);
+    pointer-events: none;
+    filter: blur(0.625rem);
+    z-index: -1;
+  }
+}
+@mixin hover-box-shadow() {
+  box-shadow: 0 0.5rem 0.5rem
+    color-mix(in srgb, var(--color-body) 6%, rgba(0, 0, 0, 0.05));
+}