<template>
    <view class="u-time-axis" :class="customClass" :style="$u.toStyle(customStyle)">
        <slot />
    </view>
</template>

<script lang="ts">
export default {
    name: 'u-time-line',
    options: {
        addGlobalClass: true,
        // #ifndef MP-TOUTIAO
        virtualHost: true,
        // #endif
        styleIsolation: 'shared'
    }
};
</script>

<script setup lang="ts">
import type { PropType } from 'vue';
import { $u } from '../../';

/**
 * timeLine 时间轴
 * @description 时间轴组件一般用于物流信息展示，各种跟时间相关的记录等场景。
 * @tutorial https://uviewpro.cn/zh/components/timeLine.html
 * @example <u-time-line></u-time-line>
 */

const props = defineProps({
    /** 自定义根节点样式 */
    customStyle: {
        type: [String, Object] as PropType<string | Record<string, any>>,
        default: () => ({})
    },
    /** 自定义根节点样式类 */
    customClass: {
        type: String as unknown as PropType<string>,
        default: ''
    }
});
</script>

<style lang="scss" scoped>
@import '../../libs/css/style.components.scss';

.u-time-axis {
    padding-left: 40rpx;
    position: relative;
}

.u-time-axis::before {
    content: ' ';
    position: absolute;
    left: 0;
    top: 12rpx;
    width: 1px;
    bottom: 0;
    border-left: 1px solid var(--u-divider-color);
    transform-origin: 0 0;
    transform: scaleX(0.5);
}
</style>
