minnan/src/components/display/Step.vue

<template>
  <scroll-view
    v-if="direction === 'horizontal'"
    :scroll-x="true"
    :show-scrollbar="false"
    :scroll-with-animation="true"
    :scroll-left="scrollLeft"
    :style="themeStyles.scrollHorizontal.value"
  >
    <view :style="themeStyles.stepHorizontal.value">
      <slot />
    </view>
  </scroll-view>
  <view v-else :style="themeStyles.stepVertical.value">
    <slot />
  </view>
</template>

<script setup lang="ts">
//TODO
import { computed, provide, toRef, type Ref } from 'vue';
import type { IconProps } from '../basic/Icon.vue';
import { propGetThemeVar, useTheme, type TextStyle } from '../theme/ThemeDefine';
import { useChildLinkParent } from '../composeabe/ChildItem';

const themeContext = useTheme();

export interface StepProps {
  /**
   * 步骤条的方向
   * @default 'horizontal'
   */
  direction?: 'vertical'|'horizontal',
  /**
   * 激活时的颜色
   * @default primary
   */
  activeColor?: string,
  /**
   * 未激活时的颜色
   * @default Color.grey
   */
  inactiveColor?: string,
  /**
   * 文字颜色
   * @default text.content

   */
  textColor?: string,
  /**
   * 当为水平模式时，条目的宽度
   * @default 150rpx
   */
  lineItemWidth?: number,
  /**
   * 当为水平模式时，分隔线的边距偏移
   * @default 10
   */
  lineOffset?: number,
  /**
   * 线段粗细
   * @default 1
   */
  lineWidth?: number;
  /**
   * 当前激活的步骤
   */
  activeIndex: number,

  /**
   * 同 StepItemProps.activeIcon 此项用于所有子条目的设置
   */
  activeIcon?: string,
  /**
   * 同 StepItemProps.inactiveIcon 此项用于所有子条目的设置
   */
  inactiveIcon?: string,
  /**
   * 同 StepItemProps.finishIcon 此项用于所有子条目的设置
   */
  finishIcon?: string,
  /**
   * 同 StepItemProps.iconProps 此项用于所有子条目的设置
   */
  iconProps?: IconProps;
  /**
   * 同 StepItemProps.textStyle 此项用于所有子条目的设置
   */
  textStyle?: TextStyle,
}

const emit = defineEmits([ 'click' ]);
const props = withDefaults(defineProps<StepProps>(), {
  direction: 'horizontal',
  lineItemWidth: () => propGetThemeVar('StepLineItemWidth', 150),
  lineOffset: () => propGetThemeVar('StepLineOffset', 25),
  lineWidth: () => propGetThemeVar('StepLineWidth', 2),
  activeColor: () => propGetThemeVar('StepActiveColor', 'primary'),
  inactiveColor: () => propGetThemeVar('StepInactiveColor', 'lightGrey'),
  textColor: () => propGetThemeVar('StepTextColor', 'text.content'),
});

const scrollLeft = computed(() => {
  if (props.direction === 'vertical')
    return 0;
  return uni.upx2px((props.activeIndex - 1) * props.lineItemWidth - props.lineItemWidth / 2);
})

const themeStyles = themeContext.useThemeStyles({
  stepVertical: {
    position: 'relative',
    display: 'flex',
    flexDirection: 'column',
  },
  stepHorizontal: {
    display: 'flex',
    position: 'relative',
    flexDirection: 'row',
    justifyContent: 'flex-start',
    width: 'auto',
  },
  scrollHorizontal: {
    position: 'relative',
    flex: 0,
    width: '100%',
  },
});

const {
  getPosition,
  resetCounter,
  getLength,
} = useChildLinkParent({
  getPositionExtra(index) {
    return {}
  },
});

export interface StepContext {
  direction: Ref<StepProps['direction']>,
  activeColor: Ref<StepProps['activeColor']>,
  inactiveColor: Ref<StepProps['inactiveColor']>,
  textColor: Ref<StepProps['textColor']>,
  lineItemWidth: Ref<StepProps['lineItemWidth']>,
  lineOffset: Ref<StepProps['lineOffset']>,
  lineWidth: Ref<StepProps['lineWidth']>,
  activeIndex: Ref<StepProps['activeIndex']>,
  getLength: () => number,
  getPosition: () => number,
  resetCounter: () => void,
}
provide<StepContext>('StepContext', {
  direction: toRef(props, 'direction'),
  activeColor: toRef(props, 'activeColor'),
  inactiveColor: toRef(props, 'inactiveColor'),
  textColor: toRef(props, 'textColor'),
  lineItemWidth: toRef(props, 'lineItemWidth'),
  lineOffset: toRef(props, 'lineOffset'),
  lineWidth: toRef(props, 'lineWidth'),
  activeIndex: toRef(props, 'activeIndex'),
  getLength,
  getPosition: () => getPosition().index,
  resetCounter,
});


</script>