@veltra/mobile 1.0.0 → 1.1.0

package/src/components/switch/style.scss

@@ -0,0 +1,137 @@
+@use 'pkg:@veltra/styles/mixins' as m with ($namespace: um);
+@use 'pkg:@veltra/styles/functions' as fn;
+@use '../../styles/tokens' as t;
+
+$root-name: switch;
+
+@include m.b($root-name) {
+  display: inline-flex;
+  align-items: center;
+  user-select: none;
+  vertical-align: middle;
+  -webkit-tap-highlight-color: transparent;
+  gap: t.spacing(default);
+
+  @include m.size using ($size) {
+    // 拨动热区：整个 label 可点，不小于触控下限；轨道尺寸走 --um-* 移动档
+    $touch-size: max(t.control-height($size), t.use-var(touch-target));
+    $track: t.switch-track($size);
+
+    min-height: $touch-size;
+    min-width: t.use-var(touch-target);
+
+    @include m.bem($root-name, button) {
+      height: $track;
+      width: calc($track * 2);
+    }
+
+    @include m.bem($root-name, thumb) {
+      width: calc($track - 4px);
+      height: calc($track - 4px);
+    }
+  }
+
+  // 状态样式
+  @include m.is(disabled) {
+    cursor: not-allowed;
+
+    @include m.bem($root-name, button) {
+      background-color: fn.use-var(bg-color, bottom);
+    }
+
+    @include m.bem($root-name, thumb) {
+      background-color: fn.use-var(bg-color, middle);
+    }
+
+    @include m.is(checked) {
+      @include m.bem($root-name, button) {
+        background-color: fn.use-var(color, primary, light-5);
+      }
+    }
+  }
+
+  @include m.is(readonly) {
+    cursor: default;
+  }
+
+  @include m.is-not(disabled, readonly) {
+    // label 不可聚焦，ring 由视觉隐藏的原生 input 驱动；移动端无 hover，按压反馈走 :active
+    &:active {
+      @include m.bem($root-name, button) {
+        background-color: fn.use-var(color, primary, light-7);
+        border-color: fn.use-var(color, primary, light-5);
+      }
+
+      @include m.is(checked) {
+        @include m.bem($root-name, button) {
+          background-color: fn.use-var(color, primary, dark-1);
+        }
+      }
+    }
+
+    .um-#{$root-name}__native:focus-visible ~ .um-#{$root-name}__button {
+      box-shadow: fn.use-var(focus-ring);
+    }
+  }
+
+  @include m.e(native) {
+    position: absolute;
+    width: 0;
+    height: 0;
+    opacity: 0;
+    margin: 0;
+    pointer-events: none;
+  }
+
+  @include m.e(button) {
+    display: flex;
+    align-items: center;
+    // 胶囊圆角（远大于轨道高度，保证两端全圆）
+    border-radius: 999px;
+    background-color: fn.use-var(bg-color, bottom);
+    border: 1px solid fn.use-var(border, muted-color);
+    box-sizing: border-box;
+    transition:
+      background-color fn.use-var(transition, normal) fn.use-var(transition, ease),
+      border-color fn.use-var(transition, normal) fn.use-var(transition, ease),
+      box-shadow fn.use-var(transition, normal) fn.use-var(transition, ease);
+    padding: 2px;
+    flex-shrink: 0;
+  }
+
+  @include m.e(thumb) {
+    display: block;
+    background-color: fn.use-var(bg-color, top);
+    border-radius: 50%;
+    box-shadow: fn.use-var(shadow, sm);
+    transition: transform fn.use-var(transition, normal) fn.use-var(transition, ease);
+    pointer-events: none;
+  }
+
+  @include m.e(text) {
+    font-size: t.use-var(font-size-main);
+    font-weight: 500;
+
+    @include m.is(selected) {
+      color: fn.use-var(color-primary);
+      font-weight: 800;
+    }
+  }
+
+  @include m.is(checked) {
+    @include m.bem($root-name, button) {
+      background-color: fn.use-var(color-primary);
+      border-color: fn.use-var(color-primary);
+    }
+
+    // 位移行程 = 内容区剩余宽度（轨道 - 手柄 - 两侧 border/padding 留白），手柄贴右缘
+    @include m.bem($root-name, thumb) {
+      transform: translateX(calc(100% + 2px));
+    }
+  }
+}
+
+// 嵌入表单行时热区拉满行高，与列表行式布局（--um-form-row-height）对齐
+.um-form-item__content .um-#{$root-name} {
+  min-height: t.use-var(form-row-height);
+}

package/src/components/switch/style.ts

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

package/src/components/switch/switch.vue

@@ -0,0 +1,63 @@
+<template>
+  <label :class="switchClass" @click.stop>
+    <input
+      type="checkbox"
+      :class="cls.e('native')"
+      :checked="model"
+      :disabled="disabled"
+      @input="handleInput"
+    />
+    <span :class="[cls.e('text'), bem.is('selected', !model)]" v-if="inactiveText">
+      {{ inactiveText }}
+    </span>
+
+    <div :class="cls.e('button')">
+      <span :class="cls.e('thumb')"></span>
+    </div>
+
+    <span v-if="activeText" :class="[cls.e('text'), bem.is('selected', model)]">
+      {{ activeText }}
+    </span>
+  </label>
+</template>
+
+<script lang="ts" setup>
+import { useFormFallbackProps } from '@veltra/compositions'
+import { injectFormContext } from '@veltra/utils'
+import { computed } from 'vue'
+
+import { bem } from '../../shared/bem'
+import type { SwitchEmits, SwitchProps } from '../../types/switch'
+
+defineOptions({ name: 'USwitch' })
+
+const props = withDefaults(defineProps<SwitchProps>(), { disabled: undefined, readonly: undefined })
+
+const emit = defineEmits<SwitchEmits>()
+
+const model = defineModel<boolean>()
+
+const cls = bem('switch')
+
+const { formProps } = injectFormContext()
+
+const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props])
+
+const switchClass = computed(() => {
+  return [
+    cls.b,
+    cls.m(size.value),
+    bem.is('disabled', disabled.value),
+    bem.is('readonly', readonly.value),
+    bem.is('checked', model.value)
+  ]
+})
+
+const handleInput = (e: Event) => {
+  if (disabled.value || readonly.value) return
+
+  const newValue = (e.target as HTMLInputElement).checked
+  model.value = newValue
+  emit('change', newValue)
+}
+</script>

package/src/components/tabs/index.ts

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

package/src/components/tabs/style.scss

@@ -0,0 +1,285 @@
+@use 'pkg:@veltra/styles/mixins' as m with ($namespace: um);
+@use 'pkg:@veltra/styles/functions' as fn;
+@use '../../styles/tokens' as t;
+
+$ease: cubic-bezier(0.4, 0, 0.2, 1);
+
+/* ===== 复合标签页：bar + content 布局容器 ===== */
+@include m.b(tabs) {
+  display: flex;
+  gap: fn.use-var(gap, small);
+  max-width: 100%;
+
+  @include m.e(content) {
+    flex: 1 1 auto;
+    width: 100%;
+    min-width: 0;
+    min-height: 0;
+    border-radius: t.control-radius(default);
+  }
+
+  @include m.m(top) {
+    flex-direction: column;
+  }
+
+  @include m.m(bottom) {
+    flex-direction: column-reverse;
+  }
+
+  @include m.m(left) {
+    flex-direction: row;
+
+    @include m.bem(tabs, content) {
+      height: 100%;
+    }
+  }
+
+  @include m.m(right) {
+    flex-direction: row-reverse;
+
+    @include m.bem(tabs, content) {
+      height: 100%;
+    }
+  }
+}
+
+/* ===== 标签栏：水平 / 垂直，溢出经触屏滑动滚动 ===== */
+$list-bg: fn.component-var(tabs, bar-bg, fn.use-var(bg-color, hover));
+$bar-radius: t.control-radius(default);
+$item-radius: calc(#{t.control-radius(default)} - 2px);
+$bar-padding: 4px;
+$active-bg: fn.component-var(tabs, active-bg, fn.use-var(bg-color, top));
+$active-shadow: fn.use-var(shadow, sm);
+// 默认横向形态的激活下划线高度
+$indicator-height: 3px;
+
+@include m.b(tabs-bar) {
+  display: inline-flex;
+  align-self: flex-start;
+  max-width: 100%;
+  min-width: 0;
+  // 仅水平方向内边距；垂直空间迁移到 __viewport，避免 __viewport 的 overflow 裁切激活态 box-shadow
+  padding: 0 $bar-padding;
+  // 默认横向形态为下划线风格（透明底）；胶囊（rounded）与垂直形态保留卡片底色
+  background-color: transparent;
+  gap: 2px;
+
+  @include m.m(horizontal) {
+    align-items: center;
+    position: relative;
+    flex-shrink: 0;
+  }
+
+  @include m.m(vertical) {
+    flex-direction: column;
+    background-color: $list-bg;
+    border-radius: $bar-radius;
+    // 垂直方向没有 __viewport 承载左右 padding，这里直接为容器补上，
+    // 与水平 __viewport 的 padding: 0 $bar-padding 对称
+    padding: $bar-padding 0;
+  }
+
+  @include m.is(rounded) {
+    background-color: $list-bg;
+    border-radius: $bar-radius;
+  }
+
+  @include m.e(viewport) {
+    flex: 1 1 auto;
+    min-width: 0;
+    // 上下 padding 与 overflow-y: hidden 配合：裁切发生在 padding-box 外沿，
+    // 激活 __item 的 box-shadow 得以在 padding 区域内完整渲染
+    padding: $bar-padding 0;
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: none;
+    -webkit-overflow-scrolling: touch;
+    scroll-snap-type: x proximity;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  @include m.e(list) {
+    display: inline-flex;
+    flex-wrap: nowrap;
+    flex-shrink: 0;
+    width: max-content;
+    margin: 0;
+    padding: 0;
+    gap: 2px;
+  }
+
+  @include m.e(item) {
+    cursor: pointer;
+    font-weight: 500;
+    letter-spacing: 0.25px;
+    color: fn.use-var(text-color, main);
+    user-select: none;
+    position: relative;
+    border-radius: $item-radius;
+    background-color: transparent;
+    box-shadow: none;
+    border: none;
+    outline: none;
+    white-space: nowrap;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0;
+    -webkit-tap-highlight-color: transparent;
+    scroll-snap-align: center;
+    transition:
+      color 0.22s $ease,
+      background-color 0.22s $ease,
+      box-shadow 0.22s $ease,
+      opacity 0.22s $ease;
+
+    // 按压反馈（移动端无 hover）；激活与禁用项无按压态
+    &:active:not(.is-active):not(.is-disabled) {
+      color: fn.use-var(text-color, title);
+      background-color: fn.color-a(color, 5, primary);
+    }
+
+    // 禁用态：压暗 + 禁用配色，视觉上与可点项明确区分
+    @include m.is(disabled) {
+      color: fn.use-var(text-color, disabled);
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+
+    // 默认横向形态的激活指示：主题色下划线（垂直 / 胶囊形态改为卡片高亮）
+    @include m.is(active) {
+      color: fn.use-var(color, primary);
+      font-weight: 600;
+
+      &::after {
+        content: '';
+        position: absolute;
+        left: t.use-var('spacing-md');
+        right: t.use-var('spacing-md');
+        bottom: 0;
+        height: $indicator-height;
+        border-radius: $indicator-height;
+        background-color: fn.use-var(color, primary);
+      }
+    }
+
+    &:focus-visible {
+      box-shadow: fn.use-var(focus-ring);
+    }
+  }
+
+  @include m.e(item-label) {
+    display: inline-flex;
+    align-items: center;
+    min-width: 0;
+  }
+
+  // 关闭按钮：移动端无 hover，可关闭时常显；44px 宽 + 拉伸高度保证触控热区
+  @include m.e(close) {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    align-self: stretch;
+    width: t.use-var('touch-target');
+    margin-left: fn.use-var(gap, small);
+    overflow: hidden;
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: fn.use-var(text-color, second);
+    cursor: pointer;
+    border-radius: $item-radius;
+    font-size: t.use-var('font-size-auxiliary');
+    line-height: 1;
+    transition:
+      color 0.15s ease,
+      background-color 0.15s ease;
+
+    svg {
+      width: 1em;
+      height: 1em;
+      fill: currentColor;
+    }
+
+    &:active {
+      color: fn.use-var(text-color, title);
+      background-color: fn.color-a(text-color, 11, title);
+    }
+  }
+
+  // 垂直：滚动轴翻转为纵向，item 两端对齐（label 左、close 右）
+  @include m.m(vertical) {
+    @include m.bem(tabs-bar, viewport) {
+      padding: 0 $bar-padding;
+      overflow-x: hidden;
+      overflow-y: auto;
+      scroll-snap-type: y proximity;
+    }
+
+    @include m.bem(tabs-bar, list) {
+      flex-direction: column;
+      width: auto;
+    }
+
+    @include m.bem(tabs-bar, item) {
+      justify-content: space-between;
+      scroll-snap-align: center;
+
+      // 下划线是横向习语，垂直形态激活项沿用卡片高亮
+      @include m.is(active) {
+        background-color: $active-bg;
+        box-shadow: $active-shadow;
+
+        &::after {
+          content: none;
+        }
+      }
+    }
+  }
+
+  // 填充宽度（仅水平布局生效）：容器铺满父级，items 自身宽度保持不变
+  @include m.is(block) {
+    display: flex;
+    width: 100%;
+    max-width: 100%;
+    align-self: stretch;
+  }
+
+  // 触控热区：任何尺寸的标签可点击区域不小于 44×44，字号 / 高度走移动端密度 token
+  @include m.size using ($size) {
+    @include m.bem(tabs-bar, item) {
+      min-height: max(t.control-height($size), t.use-var('touch-target'));
+      min-width: t.use-var('touch-target');
+      padding: 0 t.spacing($size);
+      font-size: t.use-var('font-size-main');
+    }
+  }
+
+  // 胶囊风格：item 始终 pill；容器形状按方向分治——
+  // 水平容器也变为胶囊；垂直容器保持常规圆角（避免高度较大时胶囊值的形变）。
+  @include m.is(rounded) {
+    @include m.bem(tabs-bar, item) {
+      border-radius: 999px;
+
+      // 胶囊形态激活项沿用卡片高亮，不用下划线
+      @include m.is(active) {
+        background-color: $active-bg;
+        box-shadow: $active-shadow;
+
+        &::after {
+          content: none;
+        }
+      }
+    }
+  }
+
+  @include m.m(horizontal) {
+    @include m.is(rounded) {
+      border-radius: 999px;
+    }
+  }
+}

package/src/components/tabs/style.ts

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

package/src/components/tabs/tabs.vue

@@ -0,0 +1,127 @@
+<template>
+  <div :class="[cls.b, cls.m(position)]">
+    <div :class="barClassList">
+      <div ref="viewportRef" :class="barCls.e('viewport')">
+        <div ref="listRef" :class="barCls.e('list')">
+          <button
+            v-for="(item, index) in items"
+            :key="item.key"
+            type="button"
+            role="tab"
+            :class="[
+              barCls.e('item'),
+              bem.is('active', model === item.key),
+              bem.is('disabled', item.disabled === true)
+            ]"
+            @click.stop="handleClick(item, index)"
+          >
+            <slot v-bind="{ item, index }">
+              <span :class="barCls.e('item-label')">{{ item.name ?? item.key }}</span>
+            </slot>
+
+            <span
+              v-if="isItemClosable(item)"
+              role="button"
+              tabindex="0"
+              :class="barCls.e('close')"
+              :aria-label="`close ${item.name ?? item.key}`"
+              @click.stop="handleClose(item, index)"
+            >
+              <Close />
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <KeepAlive v-if="keepAlive">
+      <component :key="model" :is="renderContent()" />
+    </KeepAlive>
+    <component v-else :key="model" :is="renderContent()" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Close } from '@veltra/icons/normal'
+import { computed, createVNode, nextTick, onMounted, shallowRef, watch } from 'vue'
+
+import { bem } from '../../shared/bem'
+import type { TabItem, TabsEmits, TabsProps } from '../../types/tabs'
+
+defineOptions({ name: 'UTabs' })
+
+const props = withDefaults(defineProps<TabsProps>(), {
+  position: 'top',
+  closable: false,
+  block: false,
+  rounded: false,
+  keepAlive: false
+})
+
+const emit = defineEmits<TabsEmits>()
+
+const slots = defineSlots<Record<string, (props: any) => any>>()
+
+const cls = bem('tabs')
+const barCls = bem('tabs-bar')
+
+const model = defineModel<string>()
+
+const isHorizontal = computed(() => props.position === 'top' || props.position === 'bottom')
+
+const barClassList = computed(() => [
+  barCls.b,
+  barCls.m(isHorizontal.value ? 'horizontal' : 'vertical'),
+  barCls.m(props.position),
+  barCls.m(props.size ?? 'default'),
+  bem.is('block', props.block),
+  bem.is('rounded', props.rounded)
+])
+
+const isItemClosable = (item: TabItem) => {
+  if (item.disabled) return false
+  return item.closable ?? props.closable
+}
+
+const handleClick = (item: TabItem, index: number) => {
+  if (item.disabled) return
+  model.value = item.key
+  emit('click', item, index)
+}
+
+const handleClose = (item: TabItem, index: number) => {
+  if (item.disabled) return
+  emit('close', item, index)
+}
+
+const renderContent = () => {
+  const key = model.value
+  if (!key) return null
+  const nodes = slots[key]?.({ key })
+  if (!nodes) return null
+  return createVNode('div', { class: cls.e('content') }, nodes)
+}
+
+const viewportRef = shallowRef<HTMLElement>()
+const listRef = shallowRef<HTMLElement>()
+
+/** 活动标签自动滚入视野：触屏滑动替代 desktop 的溢出导航按钮 */
+const ensureActiveVisible = async () => {
+  await nextTick()
+  const list = listRef.value
+  if (!list) return
+  const index = props.items.findIndex((i) => i.key === model.value)
+  const el = list.children[index] as HTMLElement | undefined
+  if (!el) return
+  el.scrollIntoView({
+    behavior: 'smooth',
+    // 滚动轴居中展示活动标签，非滚动轴 nearest 避免带动页面滚动
+    inline: isHorizontal.value ? 'center' : 'nearest',
+    block: isHorizontal.value ? 'nearest' : 'center'
+  })
+}
+
+watch([model, () => props.items], ensureActiveVisible)
+
+onMounted(ensureActiveVisible)
+</script>

package/src/components/tag/index.ts

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