1 line
6.1 KiB
Plaintext
1 line
6.1 KiB
Plaintext
|
{"version":3,"file":"VTimelineItem.mjs","names":["VTimelineDivider","makeComponentProps","makeDimensionProps","useDimension","makeElevationProps","IconValue","makeRoundedProps","makeSizeProps","makeTagProps","ref","shallowRef","watch","convertToUnit","genericComponent","propsFactory","useRender","makeVTimelineItemProps","density","String","dotColor","fillDot","Boolean","hideDot","hideOpposite","type","default","undefined","icon","iconColor","lineInset","Number","VTimelineItem","name","props","setup","_ref","slots","dimensionStyles","dotSize","dotRef","newValue","value","$el","querySelector","getBoundingClientRect","width","flush","_createVNode","class","style","size","elevation","rounded","opposite"],"sources":["../../../src/components/VTimeline/VTimelineItem.tsx"],"sourcesContent":["// Components\nimport { VTimelineDivider } from './VTimelineDivider'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { makeElevationProps } from '@/composables/elevation'\nimport { IconValue } from '@/composables/icons'\nimport { makeRoundedProps } from '@/composables/rounded'\nimport { makeSizeProps } from '@/composables/size'\nimport { makeTagProps } from '@/composables/tag'\n\n// Utilities\nimport { ref, shallowRef, watch } from 'vue'\nimport { convertToUnit, genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\n// Types\nexport type VTimelineItemSlots = {\n default: never\n icon: never\n opposite: never\n}\n\nexport const makeVTimelineItemProps = propsFactory({\n density: String as PropType<'default' | 'compact'>,\n dotColor: String,\n fillDot: Boolean,\n hideDot: Boolean,\n hideOpposite: {\n type: Boolean,\n default: undefined,\n },\n icon: IconValue,\n iconColor: String,\n lineInset: [Number, String],\n\n ...makeComponentProps(),\n ...makeDimensionProps(),\n ...makeElevationProps(),\n ...makeRoundedProps(),\n ...makeSizeProps(),\n ...makeTagProps(),\n}, 'VTimelineItem')\n\nexport const VTimelineItem = genericComponent<VTimelineItemSlots>()({\n name: 'VTimelineItem',\n\n props: makeVTimelineItemProps(),\n\n setup (props, { slots }) {\n const { dimensionStyles } = useDimension(props)\n\n const dotSize = shallowRef(0)\n const dotRef = ref<VTimelineDivider>()\n watch(dotRef, newValue => {\n if (!newValue) return\n dotSize.value = newValue.$el.querySelector('.v-timeline-divider__dot')?.getBoundingClientRect().width ?? 0\n }, {\n flush: 'post',\n })\n\n useRender(() => (\n <div\n class={[\n 'v-timeline-item',\n {\n 'v-timeline-item--fill-dot': props.fillDot,\n },\n props.class,\n ]}\n style={[\n {\n '--v-timeline-dot-size': convertToUnit(dotSize.value),\n '--v-timeline-line-inset': props.lineInset ? `calc(var(--v-timeline-dot-size) / 2 + ${convertToUnit(props.lineInset)})` : convertToUnit(0),\n },\n props.style,\n ]}\n >\n <div\n class=\"v-timeline-item__body\"\n style={ dimensionStyles.value }\n >\n { slots.default?.() }\n </div>\n\n <VTimelineDivider\n ref={ dotRef }\n hideDot={ props.hideDot }\n icon={ props.icon }\n iconColor={ props.iconColor }\n size={ props.size }\n elevation={ props.elevation }\n dotColor={ props.dotColor }\n fillDot={ props.fillDot }\n rounded={ props.rounded }\n v-slots={{ default: slots.icon }}\n />\n\n { props.density !== 'compact' && (\n <div class=\"v-timeline-item__opposite\">\n { !props.hideOpposite && slots.opposite?.() }\n </div>\n )}\n </div>\n ))\n\n return {}\n },\n})\n\nexport type VTimelineItem = InstanceType<typeof VTimelineItem>\n"],"mappings":";AAAA;AAAA,SACSA,gBAAgB,kCAEzB;AAAA,SACSC,kBAAkB;AAAA,SAClBC,kBAAkB,EAAEC,YAAY;AAAA,SAChCC
|