taro-ui-vue3/lib/timeline/index.js

Taro UI Rewritten in Vue 3.0

import {h, defineComponent, computed, mergeProps} from "vue";
import {Text, View} from "@tarojs/components";
const AtTimeline = defineComponent({
  name: "AtTimeline",
  props: {
    pending: {
      type: Boolean,
      default: false
    },
    items: {
      type: Array,
      default: []
    }
  },
  setup(props, {attrs, slots}) {
    const rootClasses = computed(() => ({
      "at-timeline": true,
      "at-timeline--pending": props.pending
    }));
    const iconClasses = computed(() => (item) => ({
      "at-icon": true,
      [`at-icon-${item.icon}`]: item.icon
    }));
    const itemRootClasses = computed(() => (item) => ({
      "at-timeline-item": true,
      [`${`at-timeline-item--${item.color}`}`]: item.color
    }));
    const dotClass = computed(() => (item) => ({
      "at-timeline-item__icon": item.icon,
      "at-timeline-item__dot": !item.icon
    }));
    return () => h(View, mergeProps(attrs, {
      class: rootClasses.value
    }), {
      default: () => props.items.map((item, index) => h(View, {
        key: `at-timeline-item-${index}`,
        class: itemRootClasses.value(item)
      }, {
        default: () => [
          h(View, {class: "at-timeline-item__tail"}),
          h(View, {
            class: dotClass.value(item)
          }, {
            default: () => [
              item.icon && h(Text, {class: iconClasses.value(item)})
            ]
          }),
          h(View, {
            class: "at-timeline-item__content"
          }, {
            default: () => [
              h(View, {
                class: "at-timeline-item__content-item"
              }, {default: () => item.title}),
              item.content && item.content.map((sub, subIndex) => h(View, {
                key: subIndex,
                class: "at-timeline-item__content-item at-timeline-item__content--sub"
              }, {default: () => sub}))
            ]
          })
        ]
      }))
    });
  }
});
var timeline_default = AtTimeline;
export {
  timeline_default as default
};