@veltra/mobile 1.0.0 → 1.1.0

package/src/components/button/style.scss

@@ -0,0 +1,207 @@
+@use 'sass:map';
+@use 'pkg:@veltra/styles/mixins' as m with ($namespace: um);
+@use 'pkg:@veltra/styles/functions' as fn;
+@use 'pkg:@veltra/styles/vars';
+@use '../../styles/tokens' as t;
+
+$root-name: button;
+
+// 密度移动档：小档 14 号字（辅助场景），默认 / 大档主字号 16
+$size-font: (
+  small: font-size-secondary,
+  default: font-size-main,
+  large: font-size-main
+);
+
+// 控件高度档 32 / 40 / 48，热区另有 44px 下限兜底
+$size-height: (
+  small: control-height-small,
+  default: control-height-default,
+  large: control-height-large
+);
+
+$size-padding: (
+  small: spacing-sm,
+  default: spacing-lg,
+  large: spacing-xl
+);
+
+@keyframes um-button-icon-rotating {
+  0% {
+    transform: rotateZ(0deg);
+  }
+  100% {
+    transform: rotateZ(360deg);
+  }
+}
+
+@include m.b($root-name) {
+  color: fn.component-var(button, default-color, fn.use-var(text-color, main));
+  box-sizing: border-box;
+  line-height: 1;
+  outline: none;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  -webkit-appearance: none;
+  -webkit-tap-highlight-color: transparent;
+  border: 1px solid fn.component-var(button, default-border, transparent);
+  background-color: fn.component-var(button, default-bg, fn.use-var(color, default));
+  box-shadow: fn.use-var(shadow, emboss);
+  transition:
+    background-color fn.use-var(transition, fast) fn.use-var(transition, ease),
+    border-color fn.use-var(transition, fast) fn.use-var(transition, ease),
+    color fn.use-var(transition, fast) fn.use-var(transition, ease),
+    box-shadow fn.use-var(transition, fast) fn.use-var(transition, ease);
+  gap: t.use-var(spacing-sm);
+
+  @include m.flex($display: inline-flex, $justify: center);
+
+  // 触控热区：任何尺寸的可点击区域不小于 44×44
+  @include m.size using ($size) {
+    $touch-size: max(
+      #{t.use-var(map.get($size-height, $size))},
+      #{t.use-var(touch-target)}
+    );
+
+    min-height: $touch-size;
+    font-size: t.use-var(map.get($size-font, $size));
+    padding: 0 t.use-var(map.get($size-padding, $size));
+    border-radius: t.control-radius($size);
+
+    @include m.is(circle) {
+      min-width: $touch-size;
+    }
+  }
+
+  // 按压态（移动端无 hover，用 :active 提供触控反馈）
+  &:active {
+    background-color: fn.component-var(
+      button,
+      default-hover-bg,
+      fn.use-var(color, default, 'dark-1')
+    );
+    border-color: fn.component-var(button, default-hover-border, transparent);
+  }
+
+  @include m.is(disabled, loading) {
+    cursor: not-allowed;
+    color: fn.use-var(text-color, second);
+    box-shadow: none !important;
+  }
+
+  @include m.is(plain) {
+    border-color: transparent;
+    box-shadow: none;
+  }
+
+  @include m.bem(icon) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    fill: currentColor;
+    color: inherit;
+    width: 1em;
+    height: 1em;
+    user-select: none;
+
+    svg {
+      width: 1em;
+      height: 1em;
+    }
+
+    @include m.is(loading) {
+      transform-origin: center;
+      animation: um-button-icon-rotating 2s linear infinite;
+    }
+  }
+
+  // 颜色
+  @each $type, $_ in vars.$color-types {
+    @include m.m(color-#{$type}) {
+      background-color: fn.use-var(color, $type);
+      border-color: fn.component-var(button, #{$type}-border, fn.use-var(color, $type));
+      color: fn.component-var(button, #{$type}-text-color, fn.use-var(text-color, white));
+
+      &:active {
+        background-color: fn.component-var(
+          button,
+          #{$type}-hover-bg,
+          fn.use-var(color, $type, dark-1)
+        );
+        border-color: fn.component-var(
+          button,
+          #{$type}-hover-border,
+          fn.use-var(color, $type, dark-1)
+        );
+      }
+
+      // 禁用
+      @include m.is(disabled, loading) {
+        background-color: fn.use-var(color, $type, 'light-5');
+        border-color: fn.use-var(color, $type, 'light-5');
+        color: fn.use-var(text-color, white);
+        box-shadow: none;
+      }
+
+      @include m.is(text) {
+        color: fn.use-var(color, $type);
+        border-color: transparent;
+        box-shadow: none;
+
+        &:active {
+          background-color: fn.component-var(
+            button,
+            #{$type}-plain-bg,
+            fn.use-var(color, $type, 'light-9')
+          );
+        }
+
+        @include m.is(disabled, loading) {
+          border-color: transparent;
+          color: fn.use-var(color, $type, 'light-5');
+        }
+      }
+
+      @include m.is(plain) {
+        border-color: transparent;
+        color: fn.component-var(button, #{$type}-plain-color, fn.use-var(color, $type));
+        background-color: fn.component-var(
+          button,
+          #{$type}-plain-bg,
+          fn.use-var(color, $type, light-9)
+        );
+
+        &:active {
+          background-color: fn.use-var(color, $type, light-7);
+        }
+
+        @include m.is(disabled, loading) {
+          border-color: transparent;
+          color: fn.use-var(color, $type, light-5);
+          background-color: fn.use-var(color, $type, light-9);
+        }
+      }
+    }
+  }
+
+  // 圆形
+  @include m.is(circle) {
+    border-radius: 50%;
+    padding: 0;
+  }
+
+  // 文本形态
+  @include m.is(text) {
+    background-color: transparent;
+    border: none;
+    box-shadow: none;
+  }
+
+  // 焦点环放在块尾并提升优先级，确保不被 plain/text 等变体的
+  // box-shadow: none 覆盖（焦点指示必须始终可见）
+  &:focus-visible:not(.is-disabled):not(.is-loading) {
+    box-shadow: fn.use-var(focus-ring);
+  }
+}

package/src/components/button/style.ts

@@ -0,0 +1 @@
+import './style.scss'

package/src/components/card/card.vue

@@ -0,0 +1,24 @@
+<template>
+  <div :class="classList" :style="style">
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { withUnit } from '@veltra/utils'
+import { computed } from 'vue'
+
+import { bem } from '../../shared/bem'
+import type { CardProps } from '../../types/card'
+
+defineOptions({ name: 'UCard' })
+
+const { width, integrate, size } = defineProps<CardProps>()
+
+const cls = bem('card')
+
+// 移动端没有 header/content/action 子区块，尺寸档位直接作用于根节点（字号 + 内边距密度）
+const classList = computed(() => [cls.b, cls.m(size ?? 'default'), bem.is('integrate', integrate)])
+
+const style = computed(() => ({ width: withUnit(width, 'px') }))
+</script>

package/src/components/card/index.ts

@@ -0,0 +1 @@
+export { default as UCard } from './card.vue'

package/src/components/card/style.scss

@@ -0,0 +1,35 @@
+@use 'sass:map';
+@use 'pkg:@veltra/styles/mixins' as m with ($namespace: um);
+@use 'pkg:@veltra/styles/functions' as fn;
+@use '../../styles/tokens' as t;
+
+$root-name: card;
+
+// 内边距走移动端间距刻度：8 / 12 / 16（4px 基），字号统一主字号 16
+$size-padding: (
+  small: spacing-sm,
+  default: spacing-md,
+  large: spacing-lg
+);
+
+@include m.b($root-name) {
+  border-radius: fn.component-var(card, radius, t.use-var('panel-radius'));
+  background-color: fn.use-var(bg-color, top);
+  box-shadow: fn.use-var(shadow, sm);
+  backdrop-filter: fn.use-var(bg-filter);
+  -webkit-backdrop-filter: fn.use-var(bg-filter);
+  overflow: hidden;
+
+  @include m.size using ($size) {
+    font-size: t.use-var(font-size-main);
+    padding: fn.component-var(
+      card,
+      padding-#{$size},
+      t.use-var(map.get($size-padding, $size))
+    );
+  }
+
+  @include m.is(integrate) {
+    box-shadow: none;
+  }
+}

package/src/components/card/style.ts

@@ -0,0 +1 @@
+import './style.scss'