@veltra/styles 1.0.0

package/dist/_functions.scss

@@ -0,0 +1,49 @@
+@use 'vars';
+@use 'sass:list';
+
+// 使用单个变量（全局主题 token，`--u-*`）
+@function use-var($basename, $nodes...) {
+  $suffix: '';
+
+  @each $node in $nodes {
+    $suffix: $suffix + '-' + $node;
+  }
+
+  @return var(--u-#{$basename}#{$suffix});
+}
+
+// 组件级 token：`var(--u-{component}-{property}[, fallback])`
+@function component-var($component, $property, $fallback: null) {
+  @if $fallback == null {
+    @return var(--u-#{$component}-#{$property});
+  }
+
+  @return var(--u-#{$component}-#{$property}, #{$fallback});
+}
+
+// 使用多个变量
+@function use-vars($vars, $separator: ' ') {
+  $result: '';
+  $len: list.length($vars);
+  @for $i from 1 to $len {
+    $result: $result + use-var(list.nth($vars, $i)) + $separator;
+  }
+
+  $result: $result + use-var(list.nth($vars, $len));
+
+  @return $result;
+}
+
+// bem的函数
+@function bem($b, $e: null, $m: null) {
+  $b: '.' + vars.$namespace + $b;
+  @if ($e != null) {
+    $b: $b + '__' + $e;
+  }
+
+  @if ($m != null) {
+    $b: $b + '--' + $m;
+  }
+
+  @return $b;
+}

package/dist/_mixins.scss

@@ -0,0 +1,177 @@
+@use 'vars';
+@use 'sass:list';
+@use 'sass:map';
+@use 'functions' as fn;
+
+/** flex布局 */
+@mixin flex($display: flex, $justify: flex-start, $align: center, $wrap: nowrap) {
+  display: $display;
+  justify-content: $justify;
+  align-items: $align;
+  flex-wrap: $wrap;
+}
+
+@mixin size {
+  @each $size in vars.$sizes {
+    &--#{$size} {
+      @content ($size);
+    }
+  }
+}
+
+@mixin b($blocks...) {
+  @each $block in $blocks {
+    .#{vars.$namespace}#{$block} {
+      @content;
+    }
+  }
+}
+
+@mixin e($elements...) {
+  $selector-list: null;
+
+  @each $element in $elements {
+    @if ($selector-list != null) {
+      $selector-list: #{$selector-list} + ', &__' + #{$element};
+    } @else {
+      $selector-list: '&__' + #{$element};
+    }
+  }
+
+  #{$selector-list} {
+    @content;
+  }
+}
+
+@mixin m($modifiers...) {
+  $selector-list: null;
+
+  @each $modifier in $modifiers {
+    @if ($selector-list != null) {
+      $selector-list: #{$selector-list} + ', &--' + #{$modifier};
+    } @else {
+      $selector-list: '&--' + #{$modifier};
+    }
+  }
+
+  #{$selector-list} {
+    @content;
+  }
+}
+
+@mixin em($element, $modifier) {
+  $selector: '&__' + #{$element} + '--' + $modifier;
+  #{$selector} {
+    @content;
+  }
+}
+
+@mixin is($types...) {
+  @each $type in $types {
+    &.is-#{$type} {
+      @content;
+    }
+  }
+}
+
+@mixin bem($b, $e: null, $m: null) {
+  $b: '.' + vars.$namespace + $b;
+
+  @if ($e != null) {
+    @each $ei in $e {
+      @if ($m != null) {
+        @each $mi in $m {
+          #{$b + '__' + $ei + '--' + $mi} {
+            @content;
+          }
+        }
+      } @else {
+        #{$b + '__' + $ei} {
+          @content;
+        }
+      }
+    }
+  } @else {
+    #{$b} {
+      @content;
+    }
+  }
+}
+
+@mixin ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/**
+* 设置css变量
+* 参数1:变量前缀
+* 参数2: 一个由值组成的列表或者由key, value组成的map
+* css-var(height, (
+*   large: 40px
+*   default: 32px
+*   small: 24px
+* ))
+* 生成的css变量:
+* --u-height-large: 40px;
+* --u-height-default: 32px;
+* --u-height-small: 24px;
+*/
+@mixin css-var($prefix, $list) {
+  @each $type, $value in $list {
+    @if $value == null {
+      --#{$prefix}: #{$type};
+    } @else {
+      // "" + $type用于消除警告
+      --#{$prefix}-#{"" + $type}: #{$value};
+    }
+  }
+}
+
+@function breakpoint($point) {
+  @return var(--u-breakpoint-#{$point});
+}
+
+/** 暗色：data-theme 与系统偏好，与 UITheme.injectBuiltInThemes 选择器策略一致 */
+@mixin dark {
+  html[data-theme='dark'] & {
+    @content;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    html:not([data-theme='light']) & {
+      @content;
+    }
+  }
+}
+
+@mixin xs {
+  @media screen and (min-width: 0) and (max-width: breakpoint(xs)) {
+    @content;
+  }
+}
+
+@mixin sm {
+  @media screen and (min-width: breakpoint(xs)) and (max-width: breakpoint(sm)) {
+    @content;
+  }
+}
+
+@mixin md {
+  @media screen and (min-width: breakpoint(sm)) and (max-width: breakpoint(md)) {
+    @content;
+  }
+}
+
+@mixin lg {
+  @media screen and (min-width: breakpoint( md)) and (max-width: breakpoint(lg)) {
+    @content;
+  }
+}
+
+@mixin xl {
+  @media screen and (min-width: breakpoint(lg)) {
+    @content;
+  }
+}

package/dist/_vars.scss

@@ -0,0 +1,44 @@
+@use 'sass:map';
+
+$namespace: 'u-';
+
+// 与全局 CSS 变量对齐的语义化别名（便于 SCSS 中直接引用）
+$color-primary: var(--u-color-primary);
+$text-color-main: var(--u-text-color-main);
+$border-color: var(--u-border-color);
+$bg-color-top: var(--u-bg-color-top);
+
+// 定义size映射的函数, 保证尺寸的统一性, size-vars(small, default, large)
+// 例子：
+// size-vars((height: 24px), (height: 32px), (height: 40px))
+// 生成:
+//  (small: (height: 24px), default: (height: 32px), large: (height: 40px))
+@function size-vars($sizes...) {
+  $size-types: (small, default, large);
+  $size-result: ();
+
+  @for $i from 1 through length($size-types) {
+    $size-result: map.merge($size-result, (#{nth($size-types, $i)}: nth($sizes, $i)));
+  }
+  @return $size-result;
+}
+
+$sizes: (small, default, large);
+
+// 颜色类别
+$color-types: (
+  // 品牌色
+  primary,
+  // 成功色
+  success,
+  // 警告色
+  warning,
+  // 危险色
+  danger,
+  // 信息
+  info,
+  // 禁用色
+  disabled,
+  // 默认色
+  default
+);

package/dist/anime/fade.css

@@ -0,0 +1,9 @@
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.25s linear;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}

package/dist/anime/fade.scss

@@ -0,0 +1,8 @@
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.25s linear;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}

package/dist/anime/slide.css

@@ -0,0 +1,18 @@
+.slide-down-enter-from, .slide-down-leave-to,
+.slide-up-enter-from,
+.slide-up-leave-to {
+  opacity: 0;
+}
+.slide-down-enter-active, .slide-down-leave-active,
+.slide-up-enter-active,
+.slide-up-leave-active {
+  transition: transform 0.2s cubic-bezier(0, 0, 0.2, 1), opacity 0.2s cubic-bezier(0, 0, 0.2, 1);
+}
+
+.slide-down-enter-from, .slide-down-leave-to {
+  transform: translateY(-10px);
+}
+
+.slide-up-enter-from, .slide-up-leave-to {
+  transform: translateY(10px);
+}

package/dist/anime/slide.scss

@@ -0,0 +1,28 @@
+.slide-down,
+.slide-up {
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+
+  &-enter-active,
+  &-leave-active {
+    transition:
+      transform 0.2s cubic-bezier(0, 0, 0.2, 1),
+      opacity 0.2s cubic-bezier(0, 0, 0.2, 1);
+  }
+}
+
+.slide-down {
+  &-enter-from,
+  &-leave-to {
+    transform: translateY(-10px);
+  }
+}
+
+.slide-up {
+  &-enter-from,
+  &-leave-to {
+    transform: translateY(10px);
+  }
+}

package/dist/anime/spring.css

@@ -0,0 +1,30 @@
+@keyframes spring-in {
+  0% {
+    transform: scale(0);
+  }
+  40% {
+    transform: scale(1.1);
+  }
+  60% {
+    transform: scale(1);
+  }
+  80% {
+    transform: scale(1.02);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+.spring-enter-active {
+  transform-origin: center;
+  animation: spring-in 0.5s ease-in-out;
+}
+
+.spring-leave-active {
+  transition: transform 0.4s cubic-bezier(0.64, -0.32, 0.66, 1.06), opacity 0.4s cubic-bezier(0.64, -0.32, 0.66, 1.06);
+}
+
+.spring-leave-to {
+  transform: scale3d(0, 0, 0) translate3d(0, 0, 0) !important;
+  opacity: 0;
+}

package/dist/anime/spring.scss

@@ -0,0 +1,42 @@
+@keyframes spring-in {
+  0% {
+    transform: scale(0);
+  }
+  40% {
+    transform: scale(1.1);
+  }
+  60% {
+    transform: scale(1);
+  }
+  80% {
+    transform: scale(1.02);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+// @keyframes spring-out {
+//   100% {
+//     transform: scale3d(0, 0, 0) translate3d(0, 0, 0);
+//     opacity: 0;
+//   }
+// }
+
+.spring-enter-active {
+  transform-origin: center;
+  animation: spring-in 0.5s ease-in-out;
+}
+
+.spring-leave-active {
+  // animation: spring-out 0.4s cubic-bezier(0.64, -0.32, 0.66, 1.06);
+
+  transition:
+    transform 0.4s cubic-bezier(0.64, -0.32, 0.66, 1.06),
+    opacity 0.4s cubic-bezier(0.64, -0.32, 0.66, 1.06);
+}
+
+.spring-leave-to {
+  transform: scale3d(0, 0, 0) translate3d(0, 0, 0) !important;
+  opacity: 0;
+}

package/dist/anime/zoom-in.css

@@ -0,0 +1,57 @@
+.zoom-in-enter-from, .zoom-in-leave-to,
+.zoom-in-left-enter-from,
+.zoom-in-left-leave-to,
+.zoom-in-right-enter-from,
+.zoom-in-right-leave-to,
+.zoom-in-top-enter-from,
+.zoom-in-top-leave-to,
+.zoom-in-bottom-enter-from,
+.zoom-in-bottom-leave-to {
+  opacity: 0;
+}
+.zoom-in-enter-active,
+.zoom-in-left-enter-active,
+.zoom-in-right-enter-active,
+.zoom-in-top-enter-active,
+.zoom-in-bottom-enter-active {
+  transition: opacity 0.15s ease-in, transform 0.15s ease-in;
+}
+.zoom-in-leave-active,
+.zoom-in-left-leave-active,
+.zoom-in-right-leave-active,
+.zoom-in-top-leave-active,
+.zoom-in-bottom-leave-active {
+  transition: opacity 0.15s ease-out, transform 0.15s ease-out;
+}
+
+.zoom-in-left-enter-from, .zoom-in-left-leave-to,
+.zoom-in-right-enter-from,
+.zoom-in-right-leave-to {
+  transform: scaleX(0.8);
+}
+
+.zoom-in-top-enter-from, .zoom-in-top-leave-to,
+.zoom-in-bottom-enter-from,
+.zoom-in-bottom-leave-to {
+  transform: scaleY(0.8);
+}
+
+.zoom-in-enter-from, .zoom-in-leave-to {
+  transform: scale(0.8);
+}
+
+.zoom-in-left-enter-active, .zoom-in-left-leave-active {
+  transform-origin: left center;
+}
+
+.zoom-in-right-enter-active, .zoom-in-right-leave-active {
+  transform-origin: right center;
+}
+
+.zoom-in-top-enter-active, .zoom-in-top-leave-active {
+  transform-origin: center top;
+}
+
+.zoom-in-bottom-enter-active, .zoom-in-bottom-leave-active {
+  transform-origin: center bottom;
+}

package/dist/anime/zoom-in.scss

@@ -0,0 +1,73 @@
+.zoom-in,
+.zoom-in-left,
+.zoom-in-right,
+.zoom-in-top,
+.zoom-in-bottom {
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+
+  &-enter-active {
+    transition:
+      opacity 0.15s ease-in,
+      transform 0.15s ease-in;
+  }
+
+  &-leave-active {
+    transition:
+      opacity 0.15s ease-out,
+      transform 0.15s ease-out;
+  }
+}
+
+.zoom-in-left,
+.zoom-in-right {
+  &-enter-from,
+  &-leave-to {
+    transform: scaleX(0.8);
+  }
+}
+
+.zoom-in-top,
+.zoom-in-bottom {
+  &-enter-from,
+  &-leave-to {
+    transform: scaleY(0.8);
+  }
+}
+
+.zoom-in {
+  &-enter-from,
+  &-leave-to {
+    transform: scale(0.8);
+  }
+}
+
+.zoom-in-left {
+  &-enter-active,
+  &-leave-active {
+    transform-origin: left center;
+  }
+}
+
+.zoom-in-right {
+  &-enter-active,
+  &-leave-active {
+    transform-origin: right center;
+  }
+}
+
+.zoom-in-top {
+  &-enter-active,
+  &-leave-active {
+    transform-origin: center top;
+  }
+}
+
+.zoom-in-bottom {
+  &-enter-active,
+  &-leave-active {
+    transform-origin: center bottom;
+  }
+}

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { };

package/dist/index.js

@@ -0,0 +1,5 @@
+/* empty css          */
+/* empty css           */
+/* empty css            */
+/* empty css             */
+/* empty css              */

package/dist/load-theme.d.ts

@@ -0,0 +1,18 @@
+import { UITheme } from "./theme/ui-theme.js";
+import { ShallowRef } from "vue";
+
+//#region src/load-theme.d.ts
+declare const currentTheme: ShallowRef<UITheme | undefined>;
+declare function setTheme(mode: 'light' | 'dark' | 'auto'): void;
+/**
+ * @description 加载主题, 如果你是 SSR 环境,
+ * 请在 `onMounted` 中调用，否则你可以在
+ * 项目的入口环境(通常是 main.ts)或其他全局环境中调用。
+ *
+ * 不传 `theme` 时注入内置 light/dark 变量（支持 `setTheme` 与系统暗色偏好）。
+ * 传入自定义 `UITheme` 时使用单次 `html { }` 注入。
+ */
+declare function loadTheme(theme?: UITheme): void;
+//#endregion
+export { currentTheme, loadTheme, setTheme };
+//# sourceMappingURL=load-theme.d.ts.map

package/dist/load-theme.js

@@ -0,0 +1,38 @@
+import { UITheme } from "./theme/ui-theme.js";
+import { lightTheme } from "./theme/light.js";
+import { darkTheme } from "./theme/dark.js";
+import { shallowRef } from "vue";
+import { useConfig } from "@veltra/compositions";
+//#region src/load-theme.ts
+const currentTheme = shallowRef();
+function setTheme(mode) {
+	UITheme.setTheme(mode);
+}
+/**
+* @description 加载主题, 如果你是 SSR 环境,
+* 请在 `onMounted` 中调用，否则你可以在
+* 项目的入口环境(通常是 main.ts)或其他全局环境中调用。
+*
+* 不传 `theme` 时注入内置 light/dark 变量（支持 `setTheme` 与系统暗色偏好）。
+* 传入自定义 `UITheme` 时使用单次 `html { }` 注入。
+*/
+function loadTheme(theme) {
+	currentTheme.value = theme ?? lightTheme;
+	const { config } = useConfig();
+	if (typeof document !== "undefined") document.documentElement.classList.add(config.size);
+	if (typeof document === "undefined") return;
+	if (!theme) {
+		currentTheme.value = lightTheme;
+		UITheme.injectBuiltInThemes(lightTheme, darkTheme);
+		return;
+	}
+	currentTheme.value = theme;
+	if (theme === lightTheme || theme === darkTheme) {
+		UITheme.injectBuiltInThemes(lightTheme, darkTheme);
+		UITheme.setTheme(theme === darkTheme ? "dark" : "light");
+	} else theme.render();
+}
+//#endregion
+export { currentTheme, loadTheme, setTheme };
+
+//# sourceMappingURL=load-theme.js.map

package/dist/load-theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"load-theme.js","names":[],"sources":["../src/load-theme.ts"],"sourcesContent":["import { useConfig } from '@veltra/compositions'\nimport { shallowRef, type ShallowRef } from 'vue'\n\nimport { darkTheme } from './theme/dark'\nimport { lightTheme } from './theme/light'\nimport { UITheme } from './theme/ui-theme'\n\nexport const currentTheme: ShallowRef<UITheme | undefined> = shallowRef<UITheme>()\n\nexport function setTheme(mode: 'light' | 'dark' | 'auto'): void {\n  UITheme.setTheme(mode)\n}\n\n/**\n * @description 加载主题, 如果你是 SSR 环境,\n * 请在 `onMounted` 中调用，否则你可以在\n * 项目的入口环境(通常是 main.ts)或其他全局环境中调用。\n *\n * 不传 `theme` 时注入内置 light/dark 变量（支持 `setTheme` 与系统暗色偏好）。\n * 传入自定义 `UITheme` 时使用单次 `html { }` 注入。\n */\nexport function loadTheme(theme?: UITheme): void {\n  currentTheme.value = theme ?? lightTheme\n\n  const { config } = useConfig()\n  if (typeof document !== 'undefined') {\n    document.documentElement.classList.add(config.size)\n  }\n\n  if (typeof document === 'undefined') return\n\n  if (!theme) {\n    currentTheme.value = lightTheme\n    UITheme.injectBuiltInThemes(lightTheme, darkTheme)\n    return\n  }\n\n  currentTheme.value = theme\n\n  if (theme === lightTheme || theme === darkTheme) {\n    UITheme.injectBuiltInThemes(lightTheme, darkTheme)\n    UITheme.setTheme(theme === darkTheme ? 'dark' : 'light')\n  } else {\n    theme.render()\n  }\n}\n"],"mappings":";;;;;;AAOA,MAAa,eAAgD,YAAqB;AAElF,SAAgB,SAAS,MAAuC;AAC9D,SAAQ,SAAS,KAAK;;;;;;;;;;AAWxB,SAAgB,UAAU,OAAuB;AAC/C,cAAa,QAAQ,SAAS;CAE9B,MAAM,EAAE,WAAW,WAAW;AAC9B,KAAI,OAAO,aAAa,YACtB,UAAS,gBAAgB,UAAU,IAAI,OAAO,KAAK;AAGrD,KAAI,OAAO,aAAa,YAAa;AAErC,KAAI,CAAC,OAAO;AACV,eAAa,QAAQ;AACrB,UAAQ,oBAAoB,YAAY,UAAU;AAClD;;AAGF,cAAa,QAAQ;AAErB,KAAI,UAAU,cAAc,UAAU,WAAW;AAC/C,UAAQ,oBAAoB,YAAY,UAAU;AAClD,UAAQ,SAAS,UAAU,YAAY,SAAS,QAAQ;OAExD,OAAM,QAAQ"}

package/dist/normalize.css

@@ -0,0 +1,76 @@
+@charset "UTF-8";
+/** flex布局 */
+/**
+* 设置css变量
+* 参数1:变量前缀
+* 参数2: 一个由值组成的列表或者由key, value组成的map
+* css-var(height, (
+*   large: 40px
+*   default: 32px
+*   small: 24px
+* ))
+* 生成的css变量:
+* --u-height-large: 40px;
+* --u-height-default: 32px;
+* --u-height-small: 24px;
+*/
+/** 暗色：data-theme 与系统偏好，与 UITheme.injectBuiltInThemes 选择器策略一致 */
+html {
+  font-family: var(--u-font-family);
+  font-weight: normal;
+  color: var(--u-text-color-main);
+  line-height: 1.4;
+}
+html.small {
+  font-size: var(--u-font-size-main-small);
+}
+html.default {
+  font-size: var(--u-font-size-main-default);
+}
+html.large {
+  font-size: var(--u-font-size-main-large);
+}
+
+body,
+ul,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+}
+
+div,
+section,
+head,
+aside,
+body,
+main,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+article,
+button,
+input,
+textarea {
+  box-sizing: border-box;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+ul {
+  padding: 0;
+}
+
+li {
+  list-style: none;
+}