@veltra/mobile 1.0.0 → 1.1.0

package/src/components/checkbox/style.scss

@@ -0,0 +1,132 @@
+@use 'pkg:@veltra/styles/mixins' as m with ($namespace: um);
+@use 'pkg:@veltra/styles/functions' as fn;
+@use '../../styles/tokens' as t;
+
+$root-name: checkbox;
+
+// 移动端复选框指示器下限：过小难以辨认勾选状态
+$indicator-min: 20px;
+
+@include m.b($root-name) {
+  user-select: none;
+  vertical-align: middle;
+  -webkit-tap-highlight-color: transparent;
+  border-radius: t.control-radius(small);
+  @include m.flex(inline-flex);
+  gap: t.spacing(default);
+
+  @include m.size using ($size) {
+    // 触控热区：整个 label 可点，不小于触控下限
+    min-height: max(t.control-height($size), t.use-var(touch-target));
+    min-width: t.use-var(touch-target);
+
+    @include m.bem($root-name, indicator) {
+      $indicator: max(calc(t.control-height($size) / 2), $indicator-min);
+
+      height: $indicator;
+      width: $indicator;
+    }
+
+    @include m.bem($root-name, label) {
+      font-size: t.use-var(font-size-main);
+    }
+  }
+
+  @include m.is(checked) {
+    @include m.bem($root-name, indicator) {
+      background-color: fn.use-var(color, primary);
+      border-color: fn.use-var(color, primary);
+      color: fn.use-var(text-color, white);
+    }
+
+    @include m.is(disabled) {
+      @include m.bem($root-name, indicator) {
+        background-color: fn.use-var(text-color, disabled);
+        border-color: fn.use-var(border, muted-color);
+      }
+    }
+  }
+
+  @include m.is(disabled) {
+    cursor: not-allowed;
+
+    @include m.bem($root-name, indicator) {
+      background-color: fn.use-var(color, disabled);
+    }
+
+    @include m.bem($root-name, label) {
+      color: fn.use-var(text-color, disabled);
+    }
+  }
+
+  @include m.is(readonly) {
+    cursor: default;
+  }
+
+  @include m.e(native) {
+    position: absolute;
+    width: 0;
+    height: 0;
+    opacity: 0;
+    margin: 0;
+    pointer-events: none;
+  }
+
+  @include m.e(indicator) {
+    border: fn.use-var(border, width) fn.use-var(border, style)
+      #{fn.component-var(checkbox, border, fn.use-var(text-color, assist))};
+    // 圆形勾选惯例：与方形桌面形态区分，贴合移动端列表行式选项
+    border-radius: 50%;
+    color: fn.use-var(text-color, white);
+    box-sizing: border-box;
+    flex-shrink: 0;
+    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),
+      box-shadow fn.use-var(transition, fast) fn.use-var(transition, ease);
+    @include m.flex(inline-flex, center);
+
+    svg {
+      width: 100%;
+      height: 100%;
+      padding: 15%;
+      box-sizing: border-box;
+    }
+  }
+
+  // label 不可聚焦，ring 由视觉隐藏的原生 input 驱动；移动端无 hover，按压反馈走 :active（整行底色）
+  @include m.is-not(disabled, readonly) {
+    &:active {
+      background-color: fn.use-var(color, default, light-9);
+
+      @include m.bem($root-name, indicator) {
+        border-color: fn.use-var(color, primary);
+      }
+    }
+
+    .um-#{$root-name}__native:focus-visible + .um-#{$root-name}__indicator {
+      box-shadow: fn.use-var(focus-ring);
+    }
+  }
+
+  @include m.e(label) {
+    line-height: 1.4;
+    color: fn.use-var(text-color, main);
+  }
+
+  @include m.m(indeterminate) {
+    background-color: fn.use-var(text-color, white);
+    width: 10px;
+    height: 2px;
+    vertical-align: middle;
+    display: block;
+  }
+}
+
+// 嵌入表单行时占满控件区，整行热区与列表行式布局协同。
+// :where 降特异性：checkbox-group 内的行高由组规则收敛，此规则只约束单个复选框
+.um-form-item__content :where(.um-#{$root-name}) {
+  display: flex;
+  width: 100%;
+  min-height: t.use-var(form-row-height);
+}

package/src/components/checkbox/style.ts

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

package/src/components/checkbox-group/checkbox-group.vue

@@ -0,0 +1,94 @@
+<template>
+  <div v-if="!readonly" v-bind="$attrs" :class="[cls.b, cls.m(size), bem.is('divider', divider)]">
+    <UCheckbox
+      v-for="item of items"
+      :key="item[valueKey]"
+      :model-value="getCheckStatus(item)"
+      @update:model-value="handleUpdate($event, item)"
+      :disabled="disabled"
+      :size="size"
+    >
+      {{ item[labelKey] }}
+    </UCheckbox>
+  </div>
+
+  <div v-else-if="model?.length" :class="[cls.m(size), cls.e('readonly-tags')]">
+    <div :class="cls.e('tags')">
+      <UTag v-for="tag of model" :key="tag">
+        {{ getLabel(tag) }}
+      </UTag>
+    </div>
+  </div>
+
+  <template v-else>
+    {{ FORM_EMPTY_CONTENT }}
+  </template>
+</template>
+
+<script lang="ts" setup>
+import { useFormFallbackProps } from '@veltra/compositions'
+import { fieldKey, FORM_EMPTY_CONTENT, injectFormContext } from '@veltra/utils'
+import { computed } from 'vue'
+
+import { bem } from '../../shared/bem'
+import type { CheckboxGroupEmits, CheckboxGroupProps } from '../../types/checkbox-group'
+import { UCheckbox } from '../checkbox'
+import { UTag } from '../tag'
+
+defineOptions({ name: 'UCheckboxGroup', inheritAttrs: false })
+
+const props = withDefaults(defineProps<CheckboxGroupProps>(), {
+  labelKey: 'label',
+  valueKey: 'value',
+  disabled: undefined,
+  readonly: undefined
+})
+defineEmits<CheckboxGroupEmits>()
+
+const model = defineModel<any[]>()
+
+const cls = bem('checkbox-group')
+
+const labelKey = computed(() => fieldKey(props.labelKey, 'label'))
+const valueKey = computed(() => fieldKey(props.valueKey, 'value'))
+
+const { formProps } = injectFormContext()
+
+const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {
+  size: 'default',
+  disabled: false,
+  readonly: false
+})
+
+/**
+ * 获取checkbox的选中状态
+ * @param item - 模型对象
+ * @returns 模型值是否存在于model.value中
+ */
+const getCheckStatus = (item: Record<string, string | number>): boolean => {
+  const value = item[valueKey.value]
+  if (!value || !model.value) return false
+  return model.value.includes(value)
+}
+
+/**
+ * 处理更新操作
+ * @param  checked - 指示是否选中
+ * @param item - 更新的项
+ */
+const handleUpdate = (checked: boolean, item: Record<string, string | number>) => {
+  const value = item[valueKey.value]
+  if (!value) return
+  if (checked) {
+    model.value = [...(model.value ?? []), value]
+  } else {
+    model.value = model.value?.filter((v) => v !== value)
+  }
+}
+
+const getLabel = (value: string | number) => {
+  const { items } = props
+  const item = items.find((item) => item[valueKey.value] === value)
+  return item?.[labelKey.value]
+}
+</script>

package/src/components/checkbox-group/index.ts

@@ -0,0 +1 @@
+export { default as UCheckboxGroup } from './checkbox-group.vue'

package/src/components/checkbox-group/style.scss

@@ -0,0 +1,57 @@
+@use 'pkg:@veltra/styles/mixins' as m with ($namespace: um);
+@use 'pkg:@veltra/styles/functions' as fn;
+@use '../../styles/tokens' as t;
+
+$root-name: checkbox-group;
+
+@include m.b($root-name) {
+  line-height: 1;
+  vertical-align: middle;
+  // 列表行式：选项纵向排列，整组占满可用宽度（表单内占满控件区）
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  width: 100%;
+
+  @include m.bem(checkbox) {
+    margin: 0;
+    display: flex;
+  }
+
+  // 行高按尺寸收敛（不用 48px 表单行高）：组内项内容小，行高过大显得间隔稀疏；
+  // 仍保留 44px 触控热区下限
+  @include m.size using ($size) {
+    @include m.bem(checkbox) {
+      min-height: max(t.control-height($size), t.use-var(touch-target));
+    }
+  }
+
+  // 行间细分隔线可选
+  @include m.is(divider) {
+    @include m.bem(checkbox) {
+      &:not(:last-of-type) {
+        border-bottom: 1px solid fn.use-var(border, muted-color);
+      }
+    }
+  }
+
+  @include m.size using ($size) {
+    @include m.bem($root-name, tags) {
+      gap: calc((fn.use-var(form-component-height, $size) - fn.use-var(tag, $size)) / 2);
+    }
+  }
+
+  @include m.e(tags) {
+    flex-grow: 1;
+    @include m.flex($justify: flex-start, $align: center, $wrap: wrap);
+  }
+
+  @include m.e(readonly-tags) {
+    padding-left: 0;
+    padding-right: 0;
+
+    @include m.bem(tag) {
+      border: 1px dashed fn.use-var(text-color, main);
+    }
+  }
+}

package/src/components/checkbox-group/style.ts

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

package/src/components/collapse/collapse-item.vue

@@ -0,0 +1,134 @@
+<template>
+  <div :class="classList">
+    <div
+      :class="headerClassList"
+      role="button"
+      :aria-expanded="isActive"
+      :aria-disabled="disabled"
+      :tabindex="disabled ? -1 : 0"
+      @click="handleClick"
+      @keydown.enter.prevent="handleClick"
+      @keydown.space.prevent="handleClick"
+    >
+      <span :class="cls.e('title')">
+        <slot name="header" :is-active="isActive">{{ title }}</slot>
+      </span>
+
+      <span :class="cls.e('icon')">
+        <component :is="iconComponent" />
+      </span>
+    </div>
+    <div ref="wrapperEl" :class="cls.e('content-wrapper')" :aria-hidden="!isActive">
+      <div v-if="contentMounted" :class="cls.e('content')">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ArrowDown } from '@veltra/icons/normal'
+import { ExpandTransition } from '@veltra/utils'
+import { computed, inject, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+
+import { bem } from '../../shared/bem'
+import type { CollapseItemEmits, CollapseItemProps } from '../../types/collapse'
+import { CollapseDIKey } from './di'
+
+defineOptions({ name: 'UCollapseItem' })
+
+const props = defineProps<CollapseItemProps>()
+
+const emit = defineEmits<CollapseItemEmits>()
+
+defineSlots<{
+  /** 自定义标题区，作用域参数 `isActive` 指示展开状态；缺省渲染 title。展开图标始终由组件渲染，活动态旋转 180° */
+  header?: (scope: { isActive: boolean }) => any
+  /** 折叠面板内容 */
+  default?: () => any
+}>()
+
+const context = inject(CollapseDIKey, undefined)
+
+const cls = context?.cls ?? bem('collapse')
+
+const standaloneModel = defineModel<boolean>({ default: false })
+
+const isActive = computed(() => {
+  if (context) {
+    return props.value !== undefined && context.activeValues.value.includes(props.value)
+  }
+  return !!standaloneModel.value
+})
+
+const iconComponent = computed(() => context?.expandIcon.value ?? props.expandIcon ?? ArrowDown)
+
+const classList = computed(() => [
+  cls.e('item'),
+  bem.is('active', isActive.value),
+  bem.is('disabled', props.disabled)
+])
+
+const headerClassList = computed(() => [
+  cls.e('header'),
+  bem.is('disabled', props.disabled),
+  bem.is('active', isActive.value)
+])
+
+const expandTransition =
+  context?.expandTransition ??
+  new ExpandTransition({ transition: 'height 0.24s cubic-bezier(0.4, 0, 0.2, 1)' })
+
+const handleClick = () => {
+  if (props.disabled) return
+
+  if (context) {
+    if (props.value === undefined) return
+    context.toggle(props.value)
+    return
+  }
+
+  const next = !standaloneModel.value
+  standaloneModel.value = next
+  emit('change', next)
+}
+
+const wrapperEl = ref<HTMLElement>()
+
+/** 内容是否挂载：destroyOnCollapse 时折叠态卸载内容 DOM，展开前重新挂载 */
+const contentMounted = ref(isActive.value || !props.destroyOnCollapse)
+
+onMounted(() => {
+  if (context && props.value !== undefined) {
+    context.register(props.value)
+  }
+  if (!wrapperEl.value) return
+  expandTransition.setExpanded(wrapperEl.value, isActive.value)
+})
+
+watch(isActive, async (active) => {
+  if (active) {
+    // 展开前先挂载内容，待 DOM 更新后再测量高度驱动展开动画
+    if (!contentMounted.value) {
+      contentMounted.value = true
+      await nextTick()
+    }
+    if (!wrapperEl.value || !isActive.value) return
+    expandTransition.expand(wrapperEl.value)
+    return
+  }
+  if (!wrapperEl.value) return
+  // 收起动画落定后再卸载内容 DOM；期间被重新展开则不卸载
+  expandTransition.collapse(wrapperEl.value, () => {
+    if (!isActive.value && props.destroyOnCollapse) contentMounted.value = false
+  })
+})
+
+onBeforeUnmount(() => {
+  if (context && props.value !== undefined) {
+    context.unregister(props.value)
+  }
+  if (!wrapperEl.value) return
+  expandTransition.cancel(wrapperEl.value)
+})
+</script>

package/src/components/collapse/collapse.vue

@@ -0,0 +1,117 @@
+<template>
+  <div :class="classList" role="region">
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ExpandTransition } from '@veltra/utils'
+import { computed, provide, ref } from 'vue'
+
+import { bem } from '../../shared/bem'
+import type {
+  CollapseEmits,
+  CollapseModelValue,
+  CollapseProps,
+  CollapseValue
+} from '../../types/collapse'
+import { CollapseDIKey } from './di'
+
+defineOptions({ name: 'UCollapse' })
+
+const props = withDefaults(defineProps<CollapseProps>(), {
+  accordion: false,
+  defaultCollapseAll: false
+})
+
+const emit = defineEmits<CollapseEmits>()
+
+const cls = bem('collapse')
+
+const expandTransition = new ExpandTransition({
+  transition: 'height 0.24s cubic-bezier(0.4, 0, 0.2, 1)'
+})
+
+const size = computed(() => props.size ?? 'default')
+
+const expandIcon = computed(() => props.expandIcon)
+
+const classList = computed(() => [cls.b, cls.m(size.value)])
+
+const modelValue = defineModel<CollapseModelValue>()
+
+const activeValues = computed<CollapseValue[]>(() => {
+  const v = modelValue.value
+  if (v === undefined || v === null) return []
+  return Array.isArray(v) ? v : [v]
+})
+
+const update = (next: CollapseModelValue) => {
+  modelValue.value = next
+  emit('change', next)
+}
+
+const toggle = (value: CollapseValue) => {
+  if (props.accordion) {
+    update(activeValues.value[0] === value ? [] : value)
+    return
+  }
+
+  const values = activeValues.value.slice()
+  const index = values.indexOf(value)
+  if (index > -1) values.splice(index, 1)
+  else values.push(value)
+  update(values)
+}
+
+// 收集子组件已注册的 values
+const registeredValues = ref<CollapseValue[]>([])
+
+// 初始捕获 modelValue 是否具有有效初值
+const hasInitialValue =
+  modelValue.value !== undefined &&
+  modelValue.value !== null &&
+  (!Array.isArray(modelValue.value) || modelValue.value.length > 0)
+
+const register = (value: CollapseValue) => {
+  if (!registeredValues.value.includes(value)) {
+    registeredValues.value.push(value)
+
+    // 若默认展开全部（defaultCollapseAll 为 false）且外部未指定初始值，则自动展开该子项
+    if (!props.defaultCollapseAll && !hasInitialValue) {
+      if (props.accordion) {
+        if (registeredValues.value.length === 1) {
+          update(value)
+        }
+      } else {
+        const current = Array.isArray(modelValue.value)
+          ? modelValue.value
+          : modelValue.value !== undefined && modelValue.value !== null
+            ? [modelValue.value]
+            : []
+        if (!current.includes(value)) {
+          update([...current, value])
+        }
+      }
+    }
+  }
+}
+
+const unregister = (value: CollapseValue) => {
+  const idx = registeredValues.value.indexOf(value)
+  if (idx > -1) {
+    registeredValues.value.splice(idx, 1)
+  }
+}
+
+provide(CollapseDIKey, {
+  cls,
+  size,
+  expandIcon,
+  activeValues,
+  toggle,
+  expandTransition,
+  register,
+  unregister
+})
+</script>

package/src/components/collapse/di.ts

@@ -0,0 +1,18 @@
+import { type ComponentSize, ExpandTransition } from '@veltra/utils'
+import type { Component, ComputedRef, InjectionKey } from 'vue'
+
+import { type MobileBEM } from '../../shared/bem'
+import type { CollapseValue } from '../../types/collapse'
+
+export interface CollapseContext {
+  cls: MobileBEM<'collapse'>
+  size: ComputedRef<ComponentSize>
+  expandIcon: ComputedRef<Component | undefined>
+  activeValues: ComputedRef<CollapseValue[]>
+  toggle: (value: CollapseValue) => void
+  expandTransition: ExpandTransition
+  register: (value: CollapseValue) => void
+  unregister: (value: CollapseValue) => void
+}
+
+export const CollapseDIKey: InjectionKey<CollapseContext> = Symbol('Collapse')

package/src/components/collapse/index.ts

@@ -0,0 +1,3 @@
+export { default as UCollapse } from './collapse.vue'
+
+export { default as UCollapseItem } from './collapse-item.vue'