routie dev init since i didn't adhere to any proper guidance up until now
This commit is contained in:
+408
@@ -0,0 +1,408 @@
|
||||
@layer vuetify-components {
|
||||
.v-timeline .v-timeline-divider__dot {
|
||||
background: rgb(var(--v-theme-surface-light));
|
||||
}
|
||||
}
|
||||
@layer vuetify-final.trumps {
|
||||
@media (forced-colors: active) {
|
||||
.v-timeline .v-timeline-divider__dot {
|
||||
border: 2px solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
@layer vuetify-components {
|
||||
.v-timeline .v-timeline-divider__inner-dot {
|
||||
background: rgb(var(--v-theme-on-surface));
|
||||
}
|
||||
}
|
||||
@layer vuetify-final.trumps {
|
||||
@media (forced-colors: active) {
|
||||
.v-timeline .v-timeline-divider__inner-dot {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
@layer vuetify-components {
|
||||
.v-timeline {
|
||||
--v-timeline-dot-border-size: 8px;
|
||||
display: grid;
|
||||
grid-auto-flow: dense;
|
||||
position: relative;
|
||||
}
|
||||
.v-timeline--horizontal.v-timeline {
|
||||
grid-column-gap: 24px;
|
||||
width: 100%;
|
||||
}
|
||||
.v-timeline--horizontal.v-timeline .v-timeline--side-end > .v-timeline-item .v-timeline-item__body, .v-timeline--horizontal.v-timeline:not(.v-timeline--side-start) > .v-timeline-item--side-end .v-timeline-item__body, .v-timeline--horizontal.v-timeline:not(.v-timeline--side-start) > .v-timeline-item:nth-child(2n+1):not(.v-timeline-item--side-start) .v-timeline-item__body {
|
||||
grid-row: 3;
|
||||
align-self: flex-start;
|
||||
padding-block-start: 24px;
|
||||
}
|
||||
.v-timeline--horizontal.v-timeline .v-timeline--side-end > .v-timeline-item .v-timeline-item__opposite, .v-timeline--horizontal.v-timeline:not(.v-timeline--side-start) > .v-timeline-item--side-end .v-timeline-item__opposite, .v-timeline--horizontal.v-timeline:not(.v-timeline--side-start) > .v-timeline-item:nth-child(2n+1):not(.v-timeline-item--side-start) .v-timeline-item__opposite {
|
||||
grid-row: 1;
|
||||
align-self: flex-end;
|
||||
padding-block-end: 24px;
|
||||
}
|
||||
.v-timeline--horizontal.v-timeline .v-timeline--side-start > .v-timeline-item .v-timeline-item__body, .v-timeline--horizontal.v-timeline:not(.v-timeline--side-end) > .v-timeline-item--side-start .v-timeline-item__body, .v-timeline--horizontal.v-timeline:not(.v-timeline--side-end) > .v-timeline-item:nth-child(2n):not(.v-timeline-item--side-end) .v-timeline-item__body {
|
||||
grid-row: 1;
|
||||
align-self: flex-end;
|
||||
padding-block-end: 24px;
|
||||
}
|
||||
.v-timeline--horizontal.v-timeline .v-timeline--side-start > .v-timeline-item .v-timeline-item__opposite, .v-timeline--horizontal.v-timeline:not(.v-timeline--side-end) > .v-timeline-item--side-start .v-timeline-item__opposite, .v-timeline--horizontal.v-timeline:not(.v-timeline--side-end) > .v-timeline-item:nth-child(2n):not(.v-timeline-item--side-end) .v-timeline-item__opposite {
|
||||
grid-row: 3;
|
||||
align-self: flex-start;
|
||||
padding-block-start: 24px;
|
||||
}
|
||||
.v-timeline--vertical.v-timeline {
|
||||
row-gap: 24px;
|
||||
height: 100%;
|
||||
}
|
||||
.v-timeline--vertical.v-timeline .v-timeline-item:first-child .v-timeline-divider, .v-timeline--vertical.v-timeline .v-timeline-item:first-child .v-timeline-item__body, .v-timeline--vertical.v-timeline .v-timeline-item:first-child .v-timeline-item__opposite {
|
||||
padding-block-start: 24px;
|
||||
}
|
||||
.v-timeline--vertical.v-timeline .v-timeline-item:last-child .v-timeline-divider, .v-timeline--vertical.v-timeline .v-timeline-item:last-child .v-timeline-item__body, .v-timeline--vertical.v-timeline .v-timeline-item:last-child .v-timeline-item__opposite {
|
||||
padding-block-end: 24px;
|
||||
}
|
||||
.v-timeline--vertical.v-timeline .v-timeline--side-start > .v-timeline-item .v-timeline-item__body, .v-timeline--vertical.v-timeline:not(.v-timeline--side-end) > .v-timeline-item--side-start .v-timeline-item__body, .v-timeline--vertical.v-timeline:not(.v-timeline--side-end) > .v-timeline-item:nth-child(2n):not(.v-timeline-item--side-end) .v-timeline-item__body {
|
||||
grid-column: 1;
|
||||
justify-self: flex-end;
|
||||
padding-inline-end: 24px;
|
||||
}
|
||||
.v-timeline--vertical.v-timeline .v-timeline--side-start > .v-timeline-item .v-timeline-item__opposite, .v-timeline--vertical.v-timeline:not(.v-timeline--side-end) > .v-timeline-item--side-start .v-timeline-item__opposite, .v-timeline--vertical.v-timeline:not(.v-timeline--side-end) > .v-timeline-item:nth-child(2n):not(.v-timeline-item--side-end) .v-timeline-item__opposite {
|
||||
grid-column: 3;
|
||||
justify-self: flex-start;
|
||||
padding-inline-start: 24px;
|
||||
}
|
||||
.v-timeline--vertical.v-timeline .v-timeline--side-end > .v-timeline-item .v-timeline-item__body, .v-timeline--vertical.v-timeline:not(.v-timeline--side-start) > .v-timeline-item--side-end .v-timeline-item__body, .v-timeline--vertical.v-timeline:not(.v-timeline--side-start) > .v-timeline-item:nth-child(2n+1):not(.v-timeline-item--side-start) .v-timeline-item__body {
|
||||
grid-column: 3;
|
||||
justify-self: flex-start;
|
||||
padding-inline-start: 24px;
|
||||
}
|
||||
.v-timeline--vertical.v-timeline .v-timeline--side-end > .v-timeline-item .v-timeline-item__opposite, .v-timeline--vertical.v-timeline:not(.v-timeline--side-start) > .v-timeline-item--side-end .v-timeline-item__opposite, .v-timeline--vertical.v-timeline:not(.v-timeline--side-start) > .v-timeline-item:nth-child(2n+1):not(.v-timeline-item--side-start) .v-timeline-item__opposite {
|
||||
grid-column: 1;
|
||||
justify-self: flex-end;
|
||||
padding-inline-end: 24px;
|
||||
}
|
||||
.v-timeline-item {
|
||||
display: contents;
|
||||
}
|
||||
.v-timeline-divider {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.v-timeline--horizontal .v-timeline-divider {
|
||||
flex-direction: row;
|
||||
grid-row: 2;
|
||||
width: 100%;
|
||||
}
|
||||
.v-timeline--vertical .v-timeline-divider {
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
grid-column: 2;
|
||||
}
|
||||
.v-timeline-divider__before {
|
||||
background: rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
position: absolute;
|
||||
}
|
||||
.v-timeline--horizontal .v-timeline-divider__before {
|
||||
height: var(--v-timeline-line-thickness);
|
||||
width: calc(var(--v-timeline-line-size-base) + 12px - var(--v-timeline-line-inset));
|
||||
inset-inline-start: -12px;
|
||||
inset-inline-end: initial;
|
||||
}
|
||||
.v-timeline--vertical .v-timeline-divider__before {
|
||||
height: calc(var(--v-timeline-line-size-base) + 12px - var(--v-timeline-line-inset));
|
||||
width: var(--v-timeline-line-thickness);
|
||||
top: -12px;
|
||||
}
|
||||
@media (forced-colors: active) {
|
||||
.v-timeline-divider__before {
|
||||
background: canvastext;
|
||||
}
|
||||
}
|
||||
.v-timeline-divider__after {
|
||||
background: rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
position: absolute;
|
||||
}
|
||||
.v-timeline--horizontal .v-timeline-divider__after {
|
||||
height: var(--v-timeline-line-thickness);
|
||||
width: calc(var(--v-timeline-line-size-base) + 12px - var(--v-timeline-line-inset));
|
||||
inset-inline-end: -12px;
|
||||
inset-inline-start: initial;
|
||||
}
|
||||
.v-timeline--vertical .v-timeline-divider__after {
|
||||
height: calc(var(--v-timeline-line-size-base) + 12px - var(--v-timeline-line-inset));
|
||||
width: var(--v-timeline-line-thickness);
|
||||
bottom: -12px;
|
||||
}
|
||||
@media (forced-colors: active) {
|
||||
.v-timeline-divider__after {
|
||||
background: canvastext;
|
||||
}
|
||||
}
|
||||
.v-timeline--vertical .v-timeline-item:first-child .v-timeline-divider__before {
|
||||
height: calc(var(--v-timeline-line-size-base) + 12px - var(--v-timeline-line-inset));
|
||||
top: 0;
|
||||
}
|
||||
.v-timeline--horizontal .v-timeline-item:first-child .v-timeline-divider__before {
|
||||
width: calc(var(--v-timeline-line-size-base) + 12px - var(--v-timeline-line-inset));
|
||||
inset-inline-start: 0;
|
||||
inset-inline-end: initial;
|
||||
}
|
||||
.v-timeline--vertical .v-timeline-item:first-child .v-timeline-divider__after {
|
||||
height: calc(var(--v-timeline-line-size-base) - var(--v-timeline-line-inset) + var(--v-timeline-line-size-offset));
|
||||
}
|
||||
.v-timeline--horizontal .v-timeline-item:first-child .v-timeline-divider__after {
|
||||
width: calc(var(--v-timeline-line-size-base) - var(--v-timeline-line-inset) + var(--v-timeline-line-size-offset));
|
||||
inset-inline-end: -12px;
|
||||
inset-inline-start: initial;
|
||||
}
|
||||
.v-timeline--vertical .v-timeline-item:last-child .v-timeline-divider__before {
|
||||
height: calc(var(--v-timeline-line-size-base) - var(--v-timeline-line-inset) + var(--v-timeline-line-size-offset));
|
||||
}
|
||||
.v-timeline--horizontal .v-timeline-item:last-child .v-timeline-divider__before {
|
||||
width: calc(var(--v-timeline-line-size-base) - var(--v-timeline-line-inset) + var(--v-timeline-line-size-offset));
|
||||
}
|
||||
.v-timeline--vertical .v-timeline-item:last-child .v-timeline-divider__after {
|
||||
height: calc(var(--v-timeline-line-size-base) + 12px - var(--v-timeline-line-inset));
|
||||
bottom: 0;
|
||||
}
|
||||
.v-timeline--horizontal .v-timeline-item:last-child .v-timeline-divider__after {
|
||||
width: calc(var(--v-timeline-line-size-base) + 12px - var(--v-timeline-line-inset));
|
||||
inset-inline-end: 0;
|
||||
inset-inline-start: initial;
|
||||
}
|
||||
.v-timeline--vertical .v-timeline-item:only-child .v-timeline-divider__after {
|
||||
height: calc(var(--v-timeline-line-size-base) - var(--v-timeline-line-inset));
|
||||
}
|
||||
.v-timeline-divider__dot {
|
||||
z-index: 1;
|
||||
flex-shrink: 0;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.v-timeline-divider__dot {
|
||||
box-shadow: 0px 0px 0px 0px rgba(var(--v-shadow-color), var(--v-shadow-key-opacity, 0.3)), 0px 0px 0px 0px rgba(var(--v-shadow-color), var(--v-shadow-ambient-opacity, 0.15));
|
||||
--v-elevation-overlay: color-mix(in srgb, var(--v-elevation-overlay-color) 0%, transparent);
|
||||
}
|
||||
.v-timeline-divider__dot--size-x-small {
|
||||
--v-timeline-dot-border-size: 6px;
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
}
|
||||
.v-timeline-divider__dot--size-small {
|
||||
--v-timeline-dot-border-size: 8px;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
}
|
||||
.v-timeline-divider__dot--size-default {
|
||||
--v-timeline-dot-border-size: 8px;
|
||||
height: 38px;
|
||||
width: 38px;
|
||||
}
|
||||
.v-timeline-divider__dot--size-large {
|
||||
--v-timeline-dot-border-size: 8px;
|
||||
height: 46px;
|
||||
width: 46px;
|
||||
}
|
||||
.v-timeline-divider__dot--size-x-large {
|
||||
--v-timeline-dot-border-size: 10px;
|
||||
height: 54px;
|
||||
width: 54px;
|
||||
}
|
||||
.v-timeline-divider__inner-dot {
|
||||
align-items: center;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
height: calc(100% - var(--v-timeline-dot-border-size));
|
||||
width: calc(100% - var(--v-timeline-dot-border-size));
|
||||
}
|
||||
}
|
||||
@layer vuetify-components {
|
||||
/** Modifiers **/
|
||||
.v-timeline--horizontal.v-timeline--justify-center {
|
||||
grid-template-rows: minmax(auto, 50%) min-content minmax(auto, 50%);
|
||||
}
|
||||
.v-timeline--vertical.v-timeline--justify-center {
|
||||
grid-template-columns: minmax(auto, 50%) min-content minmax(auto, 50%);
|
||||
}
|
||||
.v-timeline--horizontal.v-timeline--justify-auto {
|
||||
grid-template-rows: auto min-content auto;
|
||||
}
|
||||
.v-timeline--vertical.v-timeline--justify-auto {
|
||||
grid-template-columns: auto min-content auto;
|
||||
}
|
||||
.v-timeline--horizontal.v-timeline--density-comfortable {
|
||||
height: 100%;
|
||||
}
|
||||
.v-timeline--horizontal.v-timeline--density-comfortable.v-timeline--side-end {
|
||||
grid-template-rows: min-content min-content auto;
|
||||
}
|
||||
.v-timeline--horizontal.v-timeline--density-comfortable.v-timeline--side-start {
|
||||
grid-template-rows: auto min-content min-content;
|
||||
}
|
||||
.v-timeline--vertical.v-timeline--density-comfortable {
|
||||
width: 100%;
|
||||
}
|
||||
.v-timeline--vertical.v-timeline--density-comfortable.v-timeline--side-end {
|
||||
grid-template-columns: min-content min-content auto;
|
||||
}
|
||||
.v-timeline--vertical.v-timeline--density-comfortable.v-timeline--side-start {
|
||||
grid-template-columns: auto min-content min-content;
|
||||
}
|
||||
.v-timeline--horizontal.v-timeline--density-compact.v-timeline--side-end {
|
||||
grid-template-rows: 0 min-content auto;
|
||||
}
|
||||
.v-timeline--horizontal.v-timeline--density-compact.v-timeline--side-start {
|
||||
grid-template-rows: auto min-content 0;
|
||||
}
|
||||
.v-timeline--horizontal.v-timeline--density-compact .v-timeline-item__body {
|
||||
grid-row: 1;
|
||||
}
|
||||
.v-timeline--vertical.v-timeline--density-compact.v-timeline--side-end {
|
||||
grid-template-columns: 0 min-content auto;
|
||||
}
|
||||
.v-timeline--vertical.v-timeline--density-compact.v-timeline--side-start {
|
||||
grid-template-columns: auto min-content 0;
|
||||
}
|
||||
.v-timeline--vertical.v-timeline--density-compact .v-timeline-item__body {
|
||||
grid-column: 3;
|
||||
}
|
||||
.v-timeline--horizontal.v-timeline.v-timeline--side-end .v-timeline-item .v-timeline-item__body {
|
||||
grid-row: 3;
|
||||
align-self: flex-start;
|
||||
padding-block-end: initial;
|
||||
padding-block-start: 24px;
|
||||
}
|
||||
.v-timeline--horizontal.v-timeline.v-timeline--side-end .v-timeline-item .v-timeline-item__opposite {
|
||||
grid-row: 1;
|
||||
align-self: flex-end;
|
||||
padding-block-end: 24px;
|
||||
padding-block-start: initial;
|
||||
}
|
||||
.v-timeline--vertical.v-timeline.v-timeline--side-end .v-timeline-item .v-timeline-item__body {
|
||||
grid-column: 3;
|
||||
justify-self: flex-start;
|
||||
padding-inline-start: 24px;
|
||||
padding-inline-end: initial;
|
||||
}
|
||||
.v-timeline--vertical.v-timeline.v-timeline--side-end .v-timeline-item .v-timeline-item__opposite {
|
||||
grid-column: 1;
|
||||
justify-self: flex-end;
|
||||
padding-inline-end: 24px;
|
||||
padding-inline-start: initial;
|
||||
}
|
||||
.v-timeline--horizontal.v-timeline.v-timeline--side-start .v-timeline-item .v-timeline-item__body {
|
||||
grid-row: 1;
|
||||
align-self: flex-end;
|
||||
padding-block-end: 24px;
|
||||
padding-block-start: initial;
|
||||
}
|
||||
.v-timeline--horizontal.v-timeline.v-timeline--side-start .v-timeline-item .v-timeline-item__opposite {
|
||||
grid-row: 3;
|
||||
align-self: flex-start;
|
||||
padding-block-end: initial;
|
||||
padding-block-start: 24px;
|
||||
}
|
||||
.v-timeline--vertical.v-timeline.v-timeline--side-start .v-timeline-item .v-timeline-item__body {
|
||||
grid-column: 1;
|
||||
justify-self: flex-end;
|
||||
padding-inline-end: 24px;
|
||||
}
|
||||
.v-timeline--vertical.v-timeline.v-timeline--side-start .v-timeline-item .v-timeline-item__opposite {
|
||||
grid-column: 3;
|
||||
justify-self: flex-start;
|
||||
padding-inline-start: 24px;
|
||||
}
|
||||
.v-timeline-divider--fill-dot .v-timeline-divider__inner-dot {
|
||||
height: inherit;
|
||||
width: inherit;
|
||||
}
|
||||
.v-timeline--align-center {
|
||||
--v-timeline-line-size-base: 50%;
|
||||
--v-timeline-line-size-offset: 0px;
|
||||
}
|
||||
.v-timeline--horizontal.v-timeline--align-center {
|
||||
justify-items: center;
|
||||
}
|
||||
.v-timeline--horizontal.v-timeline--align-center .v-timeline-item__body {
|
||||
padding-inline: 12px;
|
||||
}
|
||||
.v-timeline--horizontal.v-timeline--align-center .v-timeline-item__opposite {
|
||||
padding-inline: 12px;
|
||||
}
|
||||
.v-timeline--horizontal.v-timeline--align-center .v-timeline-divider {
|
||||
justify-content: center;
|
||||
}
|
||||
.v-timeline--vertical.v-timeline--align-center {
|
||||
align-items: center;
|
||||
}
|
||||
.v-timeline--vertical.v-timeline--align-center .v-timeline-divider {
|
||||
justify-content: center;
|
||||
}
|
||||
.v-timeline--align-start {
|
||||
--v-timeline-line-size-base: 100%;
|
||||
--v-timeline-line-size-offset: 12px;
|
||||
}
|
||||
.v-timeline--align-start .v-timeline-item:first-child .v-timeline-divider__before {
|
||||
--v-timeline-line-size-offset: 24px;
|
||||
}
|
||||
.v-timeline--align-start .v-timeline-item:first-child .v-timeline-divider__after {
|
||||
--v-timeline-line-size-offset: -12px;
|
||||
}
|
||||
.v-timeline--align-start .v-timeline-item:last-child .v-timeline-divider__after {
|
||||
--v-timeline-line-size-offset: 0px;
|
||||
}
|
||||
.v-timeline--horizontal.v-timeline--align-start {
|
||||
justify-items: flex-start;
|
||||
}
|
||||
.v-timeline--horizontal.v-timeline--align-start .v-timeline-divider {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.v-timeline--horizontal.v-timeline--align-start .v-timeline-divider .v-timeline-divider__before {
|
||||
width: calc(var(--v-timeline-line-size-offset) + var(--v-timeline-dot-size) / 2 - var(--v-timeline-line-inset));
|
||||
}
|
||||
.v-timeline--horizontal.v-timeline--align-start .v-timeline-divider .v-timeline-divider__after {
|
||||
width: calc(var(--v-timeline-line-size-base) - var(--v-timeline-dot-size) / 2 + var(--v-timeline-line-size-offset) - var(--v-timeline-line-inset));
|
||||
}
|
||||
.v-timeline--vertical.v-timeline--align-start {
|
||||
align-items: flex-start;
|
||||
}
|
||||
.v-timeline--vertical.v-timeline--align-start .v-timeline-divider {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.v-timeline--vertical.v-timeline--align-start .v-timeline-divider .v-timeline-divider__before {
|
||||
height: calc(var(--v-timeline-line-size-offset) + var(--v-timeline-dot-size) / 2 - var(--v-timeline-line-inset));
|
||||
}
|
||||
.v-timeline--vertical.v-timeline--align-start .v-timeline-divider .v-timeline-divider__after {
|
||||
height: calc(var(--v-timeline-line-size-base) - var(--v-timeline-dot-size) / 2 + var(--v-timeline-line-size-offset) - var(--v-timeline-line-inset));
|
||||
}
|
||||
.v-timeline--truncate-line-start .v-timeline-item:first-child .v-timeline-divider__before {
|
||||
display: none;
|
||||
}
|
||||
.v-timeline--truncate-line-start .v-timeline-item:first-child .v-timeline-divider__after {
|
||||
--v-timeline-line-size-offset: 12px;
|
||||
}
|
||||
.v-timeline--vertical.v-timeline--truncate-line-start .v-timeline-item:first-child .v-timeline-divider, .v-timeline--vertical.v-timeline--truncate-line-start .v-timeline-item:first-child .v-timeline-item__body, .v-timeline--vertical.v-timeline--truncate-line-start .v-timeline-item:first-child .v-timeline-item__opposite {
|
||||
padding-block-start: 0;
|
||||
}
|
||||
.v-timeline--horizontal.v-timeline--truncate-line-start .v-timeline-item:first-child .v-timeline-divider, .v-timeline--horizontal.v-timeline--truncate-line-start .v-timeline-item:first-child .v-timeline-item__body, .v-timeline--horizontal.v-timeline--truncate-line-start .v-timeline-item:first-child .v-timeline-item__opposite {
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
.v-timeline--truncate-line-end .v-timeline-item:last-child .v-timeline-divider__after {
|
||||
display: none;
|
||||
}
|
||||
.v-timeline--truncate-line-end .v-timeline-item:last-child .v-timeline-divider__before {
|
||||
--v-timeline-line-size-offset: 12px;
|
||||
}
|
||||
.v-timeline--vertical.v-timeline--truncate-line-end .v-timeline-item:last-child .v-timeline-divider, .v-timeline--vertical.v-timeline--truncate-line-end .v-timeline-item:last-child .v-timeline-item__body, .v-timeline--vertical.v-timeline--truncate-line-end .v-timeline-item:last-child .v-timeline-item__opposite {
|
||||
padding-block-end: 0;
|
||||
}
|
||||
.v-timeline--horizontal.v-timeline--truncate-line-end .v-timeline-item:last-child .v-timeline-divider, .v-timeline--horizontal.v-timeline--truncate-line-end .v-timeline-item:last-child .v-timeline-item__body, .v-timeline--horizontal.v-timeline--truncate-line-end .v-timeline-item:last-child .v-timeline-item__opposite {
|
||||
padding-inline-end: 0;
|
||||
}
|
||||
}
|
||||
+368
@@ -0,0 +1,368 @@
|
||||
|
||||
import type { Prop } from 'vue';
|
||||
export type TimelineDirection = 'vertical' | 'horizontal';
|
||||
export type TimelineSide = 'start' | 'end' | undefined;
|
||||
export type TimelineAlign = 'center' | 'start';
|
||||
export type TimelineJustify = 'auto' | 'center';
|
||||
export type TimelineTruncateLine = 'start' | 'end' | 'both' | undefined;
|
||||
export declare const makeVTimelineProps: <Defaults extends {
|
||||
theme?: unknown;
|
||||
class?: unknown;
|
||||
style?: unknown;
|
||||
density?: unknown;
|
||||
tag?: unknown;
|
||||
size?: unknown;
|
||||
dotColor?: unknown;
|
||||
fillDot?: unknown;
|
||||
hideOpposite?: unknown;
|
||||
iconColor?: unknown;
|
||||
lineInset?: unknown;
|
||||
align?: unknown;
|
||||
direction?: unknown;
|
||||
justify?: unknown;
|
||||
side?: unknown;
|
||||
lineThickness?: unknown;
|
||||
lineColor?: unknown;
|
||||
truncateLine?: unknown;
|
||||
} = {}>(defaults?: Defaults | undefined) => {
|
||||
theme: unknown extends Defaults["theme"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["theme"] ? string : string | Defaults["theme"]>;
|
||||
default: unknown extends Defaults["theme"] ? string : string | Defaults["theme"];
|
||||
};
|
||||
class: unknown extends Defaults["class"] ? import("vue").PropType<any> : {
|
||||
type: import("vue").PropType<unknown extends Defaults["class"] ? any : any>;
|
||||
default: unknown extends Defaults["class"] ? any : any;
|
||||
};
|
||||
style: unknown extends Defaults["style"] ? {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["style"] ? import("vue").StyleValue : Defaults["style"] | import("vue").StyleValue>;
|
||||
default: unknown extends Defaults["style"] ? import("vue").StyleValue : Defaults["style"] | NonNullable<import("vue").StyleValue>;
|
||||
};
|
||||
density: unknown extends Defaults["density"] ? {
|
||||
type: import("vue").PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["density"] ? import("../../composables/density.js").Density : Defaults["density"] | import("../../composables/density.js").Density>;
|
||||
default: unknown extends Defaults["density"] ? import("../../composables/density.js").Density : Defaults["density"] | NonNullable<import("../../composables/density.js").Density>;
|
||||
};
|
||||
tag: unknown extends Defaults["tag"] ? {
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["tag"] ? string | import("../../util/index.js").JSXComponent : string | Defaults["tag"] | import("../../util/index.js").JSXComponent>;
|
||||
default: unknown extends Defaults["tag"] ? string | import("../../util/index.js").JSXComponent : Defaults["tag"] | NonNullable<string | import("../../util/index.js").JSXComponent>;
|
||||
};
|
||||
size: unknown extends Defaults["size"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["size"] ? string | number : string | number | Defaults["size"]>;
|
||||
default: unknown extends Defaults["size"] ? string | number : Defaults["size"] | NonNullable<string | number>;
|
||||
};
|
||||
dotColor: unknown extends Defaults["dotColor"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["dotColor"] ? string : string | Defaults["dotColor"]>;
|
||||
default: unknown extends Defaults["dotColor"] ? string : string | Defaults["dotColor"];
|
||||
};
|
||||
fillDot: unknown extends Defaults["fillDot"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["fillDot"] ? boolean : boolean | Defaults["fillDot"]>;
|
||||
default: unknown extends Defaults["fillDot"] ? boolean : boolean | Defaults["fillDot"];
|
||||
};
|
||||
hideOpposite: unknown extends Defaults["hideOpposite"] ? {
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
} : Omit<{
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["hideOpposite"] ? boolean : boolean | Defaults["hideOpposite"]>;
|
||||
default: unknown extends Defaults["hideOpposite"] ? boolean : boolean | Defaults["hideOpposite"];
|
||||
};
|
||||
iconColor: unknown extends Defaults["iconColor"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["iconColor"] ? string : string | Defaults["iconColor"]>;
|
||||
default: unknown extends Defaults["iconColor"] ? string : string | Defaults["iconColor"];
|
||||
};
|
||||
lineInset: unknown extends Defaults["lineInset"] ? {
|
||||
type: import("vue").PropType<string | number>;
|
||||
default: NonNullable<string | number>;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<string | number>;
|
||||
default: NonNullable<string | number>;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["lineInset"] ? string | number : string | number | Defaults["lineInset"]>;
|
||||
default: unknown extends Defaults["lineInset"] ? string | number : Defaults["lineInset"] | NonNullable<string | number>;
|
||||
};
|
||||
align: unknown extends Defaults["align"] ? Prop<TimelineAlign> : {
|
||||
type: import("vue").PropType<unknown extends Defaults["align"] ? TimelineAlign : Defaults["align"] | TimelineAlign>;
|
||||
default: unknown extends Defaults["align"] ? TimelineAlign : Defaults["align"] | NonNullable<TimelineAlign>;
|
||||
};
|
||||
direction: unknown extends Defaults["direction"] ? Prop<TimelineDirection> : {
|
||||
type: import("vue").PropType<unknown extends Defaults["direction"] ? TimelineDirection : Defaults["direction"] | TimelineDirection>;
|
||||
default: unknown extends Defaults["direction"] ? TimelineDirection : Defaults["direction"] | NonNullable<TimelineDirection>;
|
||||
};
|
||||
justify: unknown extends Defaults["justify"] ? Prop<TimelineJustify> : {
|
||||
type: import("vue").PropType<unknown extends Defaults["justify"] ? TimelineJustify : Defaults["justify"] | TimelineJustify>;
|
||||
default: unknown extends Defaults["justify"] ? TimelineJustify : Defaults["justify"] | NonNullable<TimelineJustify>;
|
||||
};
|
||||
side: unknown extends Defaults["side"] ? Prop<TimelineSide> : {
|
||||
type: import("vue").PropType<unknown extends Defaults["side"] ? TimelineSide : Defaults["side"] | TimelineSide>;
|
||||
default: unknown extends Defaults["side"] ? TimelineSide : Defaults["side"] | NonNullable<TimelineSide>;
|
||||
};
|
||||
lineThickness: unknown extends Defaults["lineThickness"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["lineThickness"] ? string | number : string | number | Defaults["lineThickness"]>;
|
||||
default: unknown extends Defaults["lineThickness"] ? string | number : Defaults["lineThickness"] | NonNullable<string | number>;
|
||||
};
|
||||
lineColor: unknown extends Defaults["lineColor"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["lineColor"] ? string : string | Defaults["lineColor"]>;
|
||||
default: unknown extends Defaults["lineColor"] ? string : string | Defaults["lineColor"];
|
||||
};
|
||||
truncateLine: unknown extends Defaults["truncateLine"] ? Prop<TimelineTruncateLine> : {
|
||||
type: import("vue").PropType<unknown extends Defaults["truncateLine"] ? TimelineTruncateLine : Defaults["truncateLine"] | TimelineTruncateLine>;
|
||||
default: unknown extends Defaults["truncateLine"] ? TimelineTruncateLine : Defaults["truncateLine"] | NonNullable<TimelineTruncateLine>;
|
||||
};
|
||||
};
|
||||
export declare const VTimeline: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
density: import("../../composables/density.js").Density;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
size: string | number;
|
||||
fillDot: boolean;
|
||||
lineInset: string | number;
|
||||
lineThickness: string | number;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
dotColor?: string | undefined;
|
||||
hideOpposite?: boolean | undefined;
|
||||
iconColor?: string | undefined;
|
||||
align?: TimelineAlign | undefined;
|
||||
direction?: TimelineDirection | undefined;
|
||||
justify?: TimelineJustify | undefined;
|
||||
side?: TimelineSide;
|
||||
lineColor?: string | undefined;
|
||||
truncateLine?: TimelineTruncateLine;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
|
||||
style: import("vue").StyleValue;
|
||||
density: import("../../composables/density.js").Density;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
size: string | number;
|
||||
fillDot: boolean;
|
||||
hideOpposite: boolean;
|
||||
lineInset: string | number;
|
||||
lineThickness: string | number;
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
|
||||
P: {};
|
||||
B: {};
|
||||
D: {};
|
||||
C: {};
|
||||
M: {};
|
||||
Defaults: {};
|
||||
}, {
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
density: import("../../composables/density.js").Density;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
size: string | number;
|
||||
fillDot: boolean;
|
||||
lineInset: string | number;
|
||||
lineThickness: string | number;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
dotColor?: string | undefined;
|
||||
hideOpposite?: boolean | undefined;
|
||||
iconColor?: string | undefined;
|
||||
align?: TimelineAlign | undefined;
|
||||
direction?: TimelineDirection | undefined;
|
||||
justify?: TimelineJustify | undefined;
|
||||
side?: TimelineSide;
|
||||
lineColor?: string | undefined;
|
||||
truncateLine?: TimelineTruncateLine;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {}, {}, {}, {}, {
|
||||
style: import("vue").StyleValue;
|
||||
density: import("../../composables/density.js").Density;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
size: string | number;
|
||||
fillDot: boolean;
|
||||
hideOpposite: boolean;
|
||||
lineInset: string | number;
|
||||
lineThickness: string | number;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
density: import("../../composables/density.js").Density;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
size: string | number;
|
||||
fillDot: boolean;
|
||||
lineInset: string | number;
|
||||
lineThickness: string | number;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
dotColor?: string | undefined;
|
||||
hideOpposite?: boolean | undefined;
|
||||
iconColor?: string | undefined;
|
||||
align?: TimelineAlign | undefined;
|
||||
direction?: TimelineDirection | undefined;
|
||||
justify?: TimelineJustify | undefined;
|
||||
side?: TimelineSide;
|
||||
lineColor?: string | undefined;
|
||||
truncateLine?: TimelineTruncateLine;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
|
||||
style: import("vue").StyleValue;
|
||||
density: import("../../composables/density.js").Density;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
size: string | number;
|
||||
fillDot: boolean;
|
||||
hideOpposite: boolean;
|
||||
lineInset: string | number;
|
||||
lineThickness: string | number;
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("../../util/index.js").FilterPropsOptions<{
|
||||
theme: StringConstructor;
|
||||
class: import("vue").PropType<any>;
|
||||
style: {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
density: {
|
||||
type: import("vue").PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
tag: {
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
};
|
||||
size: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: string;
|
||||
};
|
||||
dotColor: StringConstructor;
|
||||
fillDot: BooleanConstructor;
|
||||
hideOpposite: {
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
};
|
||||
iconColor: StringConstructor;
|
||||
lineInset: {
|
||||
type: import("vue").PropType<string | number>;
|
||||
default: NonNullable<string | number>;
|
||||
};
|
||||
align: Prop<TimelineAlign>;
|
||||
direction: Prop<TimelineDirection>;
|
||||
justify: Prop<TimelineJustify>;
|
||||
side: Prop<TimelineSide>;
|
||||
lineThickness: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
lineColor: StringConstructor;
|
||||
truncateLine: Prop<TimelineTruncateLine>;
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
theme: StringConstructor;
|
||||
class: import("vue").PropType<any>;
|
||||
style: {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
density: {
|
||||
type: import("vue").PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
tag: {
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
};
|
||||
size: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: string;
|
||||
};
|
||||
dotColor: StringConstructor;
|
||||
fillDot: BooleanConstructor;
|
||||
hideOpposite: {
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
};
|
||||
iconColor: StringConstructor;
|
||||
lineInset: {
|
||||
type: import("vue").PropType<string | number>;
|
||||
default: NonNullable<string | number>;
|
||||
};
|
||||
align: Prop<TimelineAlign>;
|
||||
direction: Prop<TimelineDirection>;
|
||||
justify: Prop<TimelineJustify>;
|
||||
side: Prop<TimelineSide>;
|
||||
lineThickness: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
lineColor: StringConstructor;
|
||||
truncateLine: Prop<TimelineTruncateLine>;
|
||||
}>>;
|
||||
export type VTimeline = InstanceType<typeof VTimeline>;
|
||||
+110
@@ -0,0 +1,110 @@
|
||||
import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createVNode as _createVNode } from "vue";
|
||||
// Styles
|
||||
import "./VTimeline.css";
|
||||
|
||||
// Composables
|
||||
import { makeComponentProps } from "../../composables/component.js";
|
||||
import { provideDefaults } from "../../composables/defaults.js";
|
||||
import { makeDensityProps, useDensity } from "../../composables/density.js";
|
||||
import { useRtl } from "../../composables/locale.js";
|
||||
import { makeTagProps } from "../../composables/tag.js";
|
||||
import { makeThemeProps, provideTheme } from "../../composables/theme.js"; // Utilities
|
||||
import { computed, toRef } from 'vue';
|
||||
import { convertToUnit, genericComponent, pick, propsFactory, useRender } from "../../util/index.js"; // Types
|
||||
import { makeVTimelineItemProps } from "./VTimelineItem.js";
|
||||
export const makeVTimelineProps = propsFactory({
|
||||
align: {
|
||||
type: String,
|
||||
default: 'center',
|
||||
validator: v => ['center', 'start'].includes(v)
|
||||
},
|
||||
direction: {
|
||||
type: String,
|
||||
default: 'vertical',
|
||||
validator: v => ['vertical', 'horizontal'].includes(v)
|
||||
},
|
||||
justify: {
|
||||
type: String,
|
||||
default: 'auto',
|
||||
validator: v => ['auto', 'center'].includes(v)
|
||||
},
|
||||
side: {
|
||||
type: String,
|
||||
validator: v => v == null || ['start', 'end'].includes(v)
|
||||
},
|
||||
lineThickness: {
|
||||
type: [String, Number],
|
||||
default: 2
|
||||
},
|
||||
lineColor: String,
|
||||
truncateLine: {
|
||||
type: String,
|
||||
validator: v => ['start', 'end', 'both'].includes(v)
|
||||
},
|
||||
...pick(makeVTimelineItemProps({
|
||||
lineInset: 0
|
||||
}), ['dotColor', 'fillDot', 'hideOpposite', 'iconColor', 'lineInset', 'size']),
|
||||
...makeComponentProps(),
|
||||
...makeDensityProps(),
|
||||
...makeTagProps(),
|
||||
...makeThemeProps()
|
||||
}, 'VTimeline');
|
||||
export const VTimeline = genericComponent()({
|
||||
name: 'VTimeline',
|
||||
props: makeVTimelineProps(),
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
const {
|
||||
themeClasses
|
||||
} = provideTheme(props);
|
||||
const {
|
||||
densityClasses
|
||||
} = useDensity(props);
|
||||
const {
|
||||
rtlClasses
|
||||
} = useRtl();
|
||||
provideDefaults({
|
||||
VTimelineDivider: {
|
||||
lineColor: toRef(() => props.lineColor)
|
||||
},
|
||||
VTimelineItem: {
|
||||
density: toRef(() => props.density),
|
||||
dotColor: toRef(() => props.dotColor),
|
||||
fillDot: toRef(() => props.fillDot),
|
||||
hideOpposite: toRef(() => props.hideOpposite),
|
||||
iconColor: toRef(() => props.iconColor),
|
||||
lineColor: toRef(() => props.lineColor),
|
||||
lineInset: toRef(() => props.lineInset),
|
||||
size: toRef(() => props.size)
|
||||
}
|
||||
});
|
||||
const sideClasses = computed(() => {
|
||||
const side = props.side ? props.side : props.density !== 'default' ? 'end' : null;
|
||||
return side && `v-timeline--side-${side}`;
|
||||
});
|
||||
const truncateClasses = computed(() => {
|
||||
const classes = ['v-timeline--truncate-line-start', 'v-timeline--truncate-line-end'];
|
||||
switch (props.truncateLine) {
|
||||
case 'both':
|
||||
return classes;
|
||||
case 'start':
|
||||
return classes[0];
|
||||
case 'end':
|
||||
return classes[1];
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
});
|
||||
useRender(() => _createVNode(props.tag, {
|
||||
"class": _normalizeClass(['v-timeline', `v-timeline--${props.direction}`, `v-timeline--align-${props.align}`, `v-timeline--justify-${props.justify}`, truncateClasses.value, {
|
||||
'v-timeline--inset-line': !!props.lineInset
|
||||
}, themeClasses.value, densityClasses.value, sideClasses.value, rtlClasses.value, props.class]),
|
||||
"style": _normalizeStyle([{
|
||||
'--v-timeline-line-thickness': convertToUnit(props.lineThickness)
|
||||
}, props.style])
|
||||
}, slots));
|
||||
return {};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VTimeline.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+443
@@ -0,0 +1,443 @@
|
||||
@use 'sass:map'
|
||||
@use 'sass:math'
|
||||
@use '../../styles/settings'
|
||||
@use '../../styles/tools'
|
||||
@use './variables' as *
|
||||
@use './mixins' as *
|
||||
|
||||
@include tools.layer('components')
|
||||
// VTimeline
|
||||
.v-timeline
|
||||
.v-timeline-divider__dot
|
||||
background: $timeline-dot-divider-background
|
||||
|
||||
@include tools.layer('trumps')
|
||||
@media (forced-colors: active)
|
||||
border: 2px solid
|
||||
|
||||
.v-timeline-divider__inner-dot
|
||||
background: $timeline-inner-dot-divider-background
|
||||
|
||||
@include tools.layer('trumps')
|
||||
@media (forced-colors: active)
|
||||
background-color: transparent
|
||||
|
||||
.v-timeline
|
||||
--v-timeline-dot-border-size: #{map.get($timeline-dot-border-sizes, 'default')}
|
||||
|
||||
display: grid
|
||||
grid-auto-flow: dense
|
||||
position: relative
|
||||
|
||||
@include horizontal(true)
|
||||
grid-column-gap: $timeline-item-padding
|
||||
width: 100%
|
||||
|
||||
.v-timeline--side-end > .v-timeline-item,
|
||||
&:not(.v-timeline--side-start) > .v-timeline-item--side-end,
|
||||
&:not(.v-timeline--side-start) > .v-timeline-item:nth-child(2n+1):not(.v-timeline-item--side-start)
|
||||
.v-timeline-item__body
|
||||
grid-row: 3
|
||||
align-self: flex-start
|
||||
padding-block-start: $timeline-item-padding
|
||||
|
||||
.v-timeline-item__opposite
|
||||
grid-row: 1
|
||||
align-self: flex-end
|
||||
padding-block-end: $timeline-item-padding
|
||||
|
||||
.v-timeline--side-start > .v-timeline-item,
|
||||
&:not(.v-timeline--side-end) > .v-timeline-item--side-start,
|
||||
&:not(.v-timeline--side-end) > .v-timeline-item:nth-child(2n):not(.v-timeline-item--side-end)
|
||||
.v-timeline-item__body
|
||||
grid-row: 1
|
||||
align-self: flex-end
|
||||
padding-block-end: $timeline-item-padding
|
||||
|
||||
.v-timeline-item__opposite
|
||||
grid-row: 3
|
||||
align-self: flex-start
|
||||
padding-block-start: $timeline-item-padding
|
||||
|
||||
@include vertical(true)
|
||||
row-gap: $timeline-item-padding
|
||||
height: 100%
|
||||
|
||||
@include timeline-first-item()
|
||||
padding-block-start: $timeline-item-padding
|
||||
|
||||
@include timeline-last-item()
|
||||
padding-block-end: $timeline-item-padding
|
||||
|
||||
.v-timeline--side-start > .v-timeline-item,
|
||||
&:not(.v-timeline--side-end) > .v-timeline-item--side-start,
|
||||
&:not(.v-timeline--side-end) > .v-timeline-item:nth-child(2n):not(.v-timeline-item--side-end)
|
||||
.v-timeline-item__body
|
||||
grid-column: 1
|
||||
justify-self: flex-end
|
||||
padding-inline-end: $timeline-item-padding
|
||||
|
||||
.v-timeline-item__opposite
|
||||
grid-column: 3
|
||||
justify-self: flex-start
|
||||
padding-inline-start: $timeline-item-padding
|
||||
|
||||
.v-timeline--side-end > .v-timeline-item,
|
||||
&:not(.v-timeline--side-start) > .v-timeline-item--side-end,
|
||||
&:not(.v-timeline--side-start) > .v-timeline-item:nth-child(2n+1):not(.v-timeline-item--side-start)
|
||||
.v-timeline-item__body
|
||||
grid-column: 3
|
||||
justify-self: flex-start
|
||||
padding-inline-start: $timeline-item-padding
|
||||
|
||||
.v-timeline-item__opposite
|
||||
grid-column: 1
|
||||
justify-self: flex-end
|
||||
padding-inline-end: $timeline-item-padding
|
||||
|
||||
// VTimelineItem
|
||||
.v-timeline-item
|
||||
display: contents
|
||||
|
||||
// VTimelineDivider
|
||||
.v-timeline-divider
|
||||
position: relative
|
||||
display: flex
|
||||
align-items: center
|
||||
|
||||
@include horizontal
|
||||
flex-direction: row
|
||||
grid-row: 2
|
||||
width: 100%
|
||||
|
||||
@include vertical
|
||||
height: 100%
|
||||
flex-direction: column
|
||||
grid-column: 2
|
||||
|
||||
$timeline-line-size: calc(var(--v-timeline-line-size-base) + #{math.div($timeline-item-padding, 2)} - var(--v-timeline-line-inset))
|
||||
$timeline-line-start: math.div(-$timeline-item-padding, 2)
|
||||
$timeline-line-size-first-last: calc(var(--v-timeline-line-size-base) - var(--v-timeline-line-inset) + var(--v-timeline-line-size-offset))
|
||||
|
||||
.v-timeline-divider__before
|
||||
background: $timeline-divider-line-background
|
||||
position: absolute
|
||||
|
||||
@include horizontal
|
||||
height: $timeline-divider-line-thickness
|
||||
width: $timeline-line-size
|
||||
inset-inline-start: $timeline-line-start
|
||||
inset-inline-end: initial
|
||||
|
||||
@include vertical
|
||||
height: $timeline-line-size
|
||||
width: $timeline-divider-line-thickness
|
||||
top: $timeline-line-start
|
||||
|
||||
@media (forced-colors: active)
|
||||
background: canvastext
|
||||
|
||||
.v-timeline-divider__after
|
||||
background: $timeline-divider-line-background
|
||||
position: absolute
|
||||
|
||||
@include horizontal
|
||||
height: $timeline-divider-line-thickness
|
||||
width: $timeline-line-size
|
||||
inset-inline-end: $timeline-line-start
|
||||
inset-inline-start: initial
|
||||
|
||||
@include vertical
|
||||
height: $timeline-line-size
|
||||
width: $timeline-divider-line-thickness
|
||||
bottom: $timeline-line-start
|
||||
|
||||
@media (forced-colors: active)
|
||||
background: canvastext
|
||||
|
||||
.v-timeline-item:first-child
|
||||
.v-timeline-divider__before
|
||||
@include vertical
|
||||
height: $timeline-line-size
|
||||
top: 0
|
||||
|
||||
@include horizontal
|
||||
width: $timeline-line-size
|
||||
inset-inline-start: 0
|
||||
inset-inline-end: initial
|
||||
|
||||
.v-timeline-divider__after
|
||||
@include vertical
|
||||
height: $timeline-line-size-first-last
|
||||
|
||||
@include horizontal
|
||||
width: $timeline-line-size-first-last
|
||||
inset-inline-end: $timeline-line-start
|
||||
inset-inline-start: initial
|
||||
|
||||
.v-timeline-item:last-child
|
||||
.v-timeline-divider__before
|
||||
@include vertical
|
||||
height: $timeline-line-size-first-last
|
||||
|
||||
@include horizontal
|
||||
width: $timeline-line-size-first-last
|
||||
|
||||
.v-timeline-divider__after
|
||||
@include vertical
|
||||
height: calc(var(--v-timeline-line-size-base) + #{math.div($timeline-item-padding, 2)} - var(--v-timeline-line-inset))
|
||||
bottom: 0
|
||||
|
||||
@include horizontal
|
||||
width: calc(var(--v-timeline-line-size-base) + #{math.div($timeline-item-padding, 2)} - var(--v-timeline-line-inset))
|
||||
inset-inline-end: 0
|
||||
inset-inline-start: initial
|
||||
|
||||
.v-timeline-item:only-child
|
||||
.v-timeline-divider__after
|
||||
@include vertical
|
||||
height: calc(var(--v-timeline-line-size-base) - var(--v-timeline-line-inset))
|
||||
|
||||
.v-timeline-divider__dot
|
||||
z-index: 1
|
||||
flex-shrink: 0
|
||||
border-radius: $timeline-dot-border-radius
|
||||
display: flex
|
||||
justify-content: center
|
||||
align-items: center
|
||||
|
||||
@include tools.elevation($timeline-divider-dot-elevation)
|
||||
|
||||
@each $name, $multiplier in settings.$size-scales
|
||||
$size: $timeline-dot-size + (8 * $multiplier)
|
||||
|
||||
&--size-#{$name}
|
||||
--v-timeline-dot-border-size: #{map.get($timeline-dot-border-sizes, $name)}
|
||||
height: $size
|
||||
width: $size
|
||||
|
||||
.v-timeline-divider__inner-dot
|
||||
align-items: center
|
||||
border-radius: $timeline-dot-border-radius
|
||||
display: flex
|
||||
justify-content: center
|
||||
height: calc(100% - var(--v-timeline-dot-border-size))
|
||||
width: calc(100% - var(--v-timeline-dot-border-size))
|
||||
|
||||
/** Modifiers **/
|
||||
|
||||
// Justify
|
||||
.v-timeline--justify-center
|
||||
@include horizontal(true)
|
||||
grid-template-rows: $timeline-item-grid-template-center
|
||||
|
||||
@include vertical(true)
|
||||
grid-template-columns: $timeline-item-grid-template-center
|
||||
|
||||
.v-timeline--justify-auto
|
||||
@include horizontal(true)
|
||||
grid-template-rows: $timeline-item-grid-template-auto
|
||||
|
||||
@include vertical(true)
|
||||
grid-template-columns: $timeline-item-grid-template-auto
|
||||
|
||||
// Density
|
||||
.v-timeline--density-comfortable
|
||||
@include horizontal(true)
|
||||
height: 100%
|
||||
|
||||
&.v-timeline--side-end
|
||||
grid-template-rows: $timeline-density-comfortable-grid-template-end
|
||||
|
||||
&.v-timeline--side-start
|
||||
grid-template-rows: $timeline-density-comfortable-grid-template-start
|
||||
|
||||
@include vertical(true)
|
||||
width: 100%
|
||||
|
||||
&.v-timeline--side-end
|
||||
grid-template-columns: $timeline-density-comfortable-grid-template-end
|
||||
|
||||
&.v-timeline--side-start
|
||||
grid-template-columns: $timeline-density-comfortable-grid-template-start
|
||||
|
||||
.v-timeline--density-compact
|
||||
@include horizontal(true)
|
||||
&.v-timeline--side-end
|
||||
grid-template-rows: $timeline-density-compact-grid-template-end
|
||||
|
||||
&.v-timeline--side-start
|
||||
grid-template-rows: $timeline-density-compact-grid-template-start
|
||||
|
||||
.v-timeline-item__body
|
||||
grid-row: 1
|
||||
|
||||
@include vertical(true)
|
||||
&.v-timeline--side-end
|
||||
grid-template-columns: $timeline-density-compact-grid-template-end
|
||||
|
||||
&.v-timeline--side-start
|
||||
grid-template-columns: $timeline-density-compact-grid-template-start
|
||||
|
||||
.v-timeline-item__body
|
||||
grid-column: 3
|
||||
|
||||
// Side
|
||||
.v-timeline.v-timeline--side-end
|
||||
.v-timeline-item
|
||||
@include horizontal(true)
|
||||
.v-timeline-item__body
|
||||
grid-row: 3
|
||||
align-self: flex-start
|
||||
padding-block-end: initial
|
||||
padding-block-start: $timeline-item-padding
|
||||
|
||||
.v-timeline-item__opposite
|
||||
grid-row: 1
|
||||
align-self: flex-end
|
||||
padding-block-end: $timeline-item-padding
|
||||
padding-block-start: initial
|
||||
|
||||
@include vertical(true)
|
||||
.v-timeline-item__body
|
||||
grid-column: 3
|
||||
justify-self: flex-start
|
||||
padding-inline-start: $timeline-item-padding
|
||||
padding-inline-end: initial
|
||||
|
||||
.v-timeline-item__opposite
|
||||
grid-column: 1
|
||||
justify-self: flex-end
|
||||
padding-inline-end: $timeline-item-padding
|
||||
padding-inline-start: initial
|
||||
|
||||
.v-timeline.v-timeline--side-start
|
||||
.v-timeline-item
|
||||
@include horizontal(true)
|
||||
.v-timeline-item__body
|
||||
grid-row: 1
|
||||
align-self: flex-end
|
||||
padding-block-end: $timeline-item-padding
|
||||
padding-block-start: initial
|
||||
|
||||
.v-timeline-item__opposite
|
||||
grid-row: 3
|
||||
align-self: flex-start
|
||||
padding-block-end: initial
|
||||
padding-block-start: $timeline-item-padding
|
||||
|
||||
@include vertical(true)
|
||||
.v-timeline-item__body
|
||||
grid-column: 1
|
||||
justify-self: flex-end
|
||||
padding-inline-end: $timeline-item-padding
|
||||
|
||||
.v-timeline-item__opposite
|
||||
grid-column: 3
|
||||
justify-self: flex-start
|
||||
padding-inline-start: $timeline-item-padding
|
||||
|
||||
// Fill dot
|
||||
.v-timeline-divider--fill-dot
|
||||
.v-timeline-divider__inner-dot
|
||||
height: inherit
|
||||
width: inherit
|
||||
|
||||
// Alignment
|
||||
.v-timeline--align-center
|
||||
--v-timeline-line-size-base: 50%
|
||||
--v-timeline-line-size-offset: 0px
|
||||
|
||||
@include horizontal(true)
|
||||
justify-items: center
|
||||
|
||||
.v-timeline-item__body
|
||||
padding-inline: math.div($timeline-item-padding, 2)
|
||||
|
||||
.v-timeline-item__opposite
|
||||
padding-inline: math.div($timeline-item-padding, 2)
|
||||
|
||||
.v-timeline-divider
|
||||
justify-content: center
|
||||
|
||||
@include vertical(true)
|
||||
align-items: center
|
||||
|
||||
.v-timeline-divider
|
||||
justify-content: center
|
||||
|
||||
.v-timeline--align-start
|
||||
--v-timeline-line-size-base: 100%
|
||||
--v-timeline-line-size-offset: #{math.div($timeline-item-padding, 2)}
|
||||
|
||||
$timeline-line-size-before: calc(var(--v-timeline-line-size-offset) + var(--v-timeline-dot-size) / 2 - var(--v-timeline-line-inset))
|
||||
$timeline-line-size-after: calc(var(--v-timeline-line-size-base) - var(--v-timeline-dot-size) / 2 + var(--v-timeline-line-size-offset) - var(--v-timeline-line-inset))
|
||||
|
||||
.v-timeline-item:first-child
|
||||
.v-timeline-divider__before
|
||||
--v-timeline-line-size-offset: #{$timeline-item-padding}
|
||||
|
||||
.v-timeline-divider__after
|
||||
--v-timeline-line-size-offset: -#{math.div($timeline-item-padding, 2)}
|
||||
|
||||
.v-timeline-item:last-child
|
||||
.v-timeline-divider__after
|
||||
--v-timeline-line-size-offset: 0px
|
||||
|
||||
@include horizontal(true)
|
||||
justify-items: flex-start
|
||||
|
||||
.v-timeline-divider
|
||||
justify-content: flex-start
|
||||
|
||||
.v-timeline-divider__before
|
||||
width: $timeline-line-size-before
|
||||
|
||||
.v-timeline-divider__after
|
||||
width: $timeline-line-size-after
|
||||
|
||||
@include vertical(true)
|
||||
align-items: flex-start
|
||||
|
||||
.v-timeline-divider
|
||||
justify-content: flex-start
|
||||
|
||||
.v-timeline-divider__before
|
||||
height: $timeline-line-size-before
|
||||
|
||||
.v-timeline-divider__after
|
||||
height: $timeline-line-size-after
|
||||
|
||||
// Truncate start
|
||||
.v-timeline--truncate-line-start
|
||||
.v-timeline-item:first-child
|
||||
.v-timeline-divider__before
|
||||
display: none
|
||||
|
||||
.v-timeline-divider__after
|
||||
--v-timeline-line-size-offset: #{math.div($timeline-item-padding, 2)}
|
||||
|
||||
@include vertical(true)
|
||||
@include timeline-first-item()
|
||||
padding-block-start: 0
|
||||
|
||||
@include horizontal(true)
|
||||
@include timeline-first-item()
|
||||
padding-inline-start: 0
|
||||
|
||||
// Truncate end
|
||||
.v-timeline--truncate-line-end
|
||||
.v-timeline-item:last-child
|
||||
.v-timeline-divider__after
|
||||
display: none
|
||||
|
||||
.v-timeline-divider__before
|
||||
--v-timeline-line-size-offset: #{math.div($timeline-item-padding, 2)}
|
||||
|
||||
@include vertical(true)
|
||||
@include timeline-last-item()
|
||||
padding-block-end: 0
|
||||
|
||||
@include horizontal(true)
|
||||
@include timeline-last-item()
|
||||
padding-inline-end: 0
|
||||
+256
@@ -0,0 +1,256 @@
|
||||
import { IconValue } from '../../composables/icons.js';
|
||||
export declare const makeVTimelineDividerProps: <Defaults extends {
|
||||
class?: unknown;
|
||||
style?: unknown;
|
||||
elevation?: unknown;
|
||||
rounded?: unknown;
|
||||
tile?: unknown;
|
||||
size?: unknown;
|
||||
dotColor?: unknown;
|
||||
fillDot?: unknown;
|
||||
hideDot?: unknown;
|
||||
icon?: unknown;
|
||||
iconColor?: unknown;
|
||||
lineColor?: unknown;
|
||||
} = {}>(defaults?: Defaults | undefined) => {
|
||||
class: unknown extends Defaults["class"] ? import("vue").PropType<any> : {
|
||||
type: import("vue").PropType<unknown extends Defaults["class"] ? any : any>;
|
||||
default: unknown extends Defaults["class"] ? any : any;
|
||||
};
|
||||
style: unknown extends Defaults["style"] ? {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["style"] ? import("vue").StyleValue : Defaults["style"] | import("vue").StyleValue>;
|
||||
default: unknown extends Defaults["style"] ? import("vue").StyleValue : Defaults["style"] | NonNullable<import("vue").StyleValue>;
|
||||
};
|
||||
elevation: unknown extends Defaults["elevation"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
validator: (value: string | number) => boolean;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
validator: (value: string | number) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["elevation"] ? string | number : string | number | Defaults["elevation"]>;
|
||||
default: unknown extends Defaults["elevation"] ? string | number : Defaults["elevation"] | NonNullable<string | number>;
|
||||
};
|
||||
rounded: unknown extends Defaults["rounded"] ? {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
} : Omit<{
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["rounded"] ? string | number | boolean : string | number | boolean | Defaults["rounded"]>;
|
||||
default: unknown extends Defaults["rounded"] ? string | number | boolean : Defaults["rounded"] | NonNullable<string | number | boolean>;
|
||||
};
|
||||
tile: unknown extends Defaults["tile"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["tile"] ? boolean : boolean | Defaults["tile"]>;
|
||||
default: unknown extends Defaults["tile"] ? boolean : boolean | Defaults["tile"];
|
||||
};
|
||||
size: unknown extends Defaults["size"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["size"] ? string | number : string | number | Defaults["size"]>;
|
||||
default: unknown extends Defaults["size"] ? string | number : Defaults["size"] | NonNullable<string | number>;
|
||||
};
|
||||
dotColor: unknown extends Defaults["dotColor"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["dotColor"] ? string : string | Defaults["dotColor"]>;
|
||||
default: unknown extends Defaults["dotColor"] ? string : string | Defaults["dotColor"];
|
||||
};
|
||||
fillDot: unknown extends Defaults["fillDot"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["fillDot"] ? boolean : boolean | Defaults["fillDot"]>;
|
||||
default: unknown extends Defaults["fillDot"] ? boolean : boolean | Defaults["fillDot"];
|
||||
};
|
||||
hideDot: unknown extends Defaults["hideDot"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["hideDot"] ? boolean : boolean | Defaults["hideDot"]>;
|
||||
default: unknown extends Defaults["hideDot"] ? boolean : boolean | Defaults["hideDot"];
|
||||
};
|
||||
icon: unknown extends Defaults["icon"] ? import("vue").PropType<IconValue> : {
|
||||
type: import("vue").PropType<unknown extends Defaults["icon"] ? IconValue : Defaults["icon"] | IconValue>;
|
||||
default: unknown extends Defaults["icon"] ? IconValue : Defaults["icon"] | NonNullable<IconValue>;
|
||||
};
|
||||
iconColor: unknown extends Defaults["iconColor"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["iconColor"] ? string : string | Defaults["iconColor"]>;
|
||||
default: unknown extends Defaults["iconColor"] ? string : string | Defaults["iconColor"];
|
||||
};
|
||||
lineColor: unknown extends Defaults["lineColor"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["lineColor"] ? string : string | Defaults["lineColor"]>;
|
||||
default: unknown extends Defaults["lineColor"] ? string : string | Defaults["lineColor"];
|
||||
};
|
||||
};
|
||||
export declare const VTimelineDivider: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
tile: boolean;
|
||||
size: string | number;
|
||||
fillDot: boolean;
|
||||
hideDot: boolean;
|
||||
} & {
|
||||
class?: any;
|
||||
elevation?: string | number | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
dotColor?: string | undefined;
|
||||
icon?: IconValue | undefined;
|
||||
iconColor?: string | undefined;
|
||||
lineColor?: string | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
|
||||
style: import("vue").StyleValue;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
size: string | number;
|
||||
fillDot: boolean;
|
||||
hideDot: boolean;
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
|
||||
P: {};
|
||||
B: {};
|
||||
D: {};
|
||||
C: {};
|
||||
M: {};
|
||||
Defaults: {};
|
||||
}, {
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
tile: boolean;
|
||||
size: string | number;
|
||||
fillDot: boolean;
|
||||
hideDot: boolean;
|
||||
} & {
|
||||
class?: any;
|
||||
elevation?: string | number | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
dotColor?: string | undefined;
|
||||
icon?: IconValue | undefined;
|
||||
iconColor?: string | undefined;
|
||||
lineColor?: string | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {}, {}, {}, {}, {
|
||||
style: import("vue").StyleValue;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
size: string | number;
|
||||
fillDot: boolean;
|
||||
hideDot: boolean;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
tile: boolean;
|
||||
size: string | number;
|
||||
fillDot: boolean;
|
||||
hideDot: boolean;
|
||||
} & {
|
||||
class?: any;
|
||||
elevation?: string | number | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
dotColor?: string | undefined;
|
||||
icon?: IconValue | undefined;
|
||||
iconColor?: string | undefined;
|
||||
lineColor?: string | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
|
||||
style: import("vue").StyleValue;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
size: string | number;
|
||||
fillDot: boolean;
|
||||
hideDot: boolean;
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("../../util/index.js").FilterPropsOptions<{
|
||||
class: import("vue").PropType<any>;
|
||||
style: {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
elevation: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
validator: (value: string | number) => boolean;
|
||||
};
|
||||
rounded: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
tile: BooleanConstructor;
|
||||
size: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: string;
|
||||
};
|
||||
dotColor: StringConstructor;
|
||||
fillDot: BooleanConstructor;
|
||||
hideDot: BooleanConstructor;
|
||||
icon: import("vue").PropType<IconValue>;
|
||||
iconColor: StringConstructor;
|
||||
lineColor: StringConstructor;
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
class: import("vue").PropType<any>;
|
||||
style: {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
elevation: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
validator: (value: string | number) => boolean;
|
||||
};
|
||||
rounded: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
tile: BooleanConstructor;
|
||||
size: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: string;
|
||||
};
|
||||
dotColor: StringConstructor;
|
||||
fillDot: BooleanConstructor;
|
||||
hideDot: BooleanConstructor;
|
||||
icon: import("vue").PropType<IconValue>;
|
||||
iconColor: StringConstructor;
|
||||
lineColor: StringConstructor;
|
||||
}>>;
|
||||
export type VTimelineDivider = InstanceType<typeof VTimelineDivider>;
|
||||
+85
@@ -0,0 +1,85 @@
|
||||
import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, createVNode as _createVNode } from "vue";
|
||||
// Components
|
||||
import { VDefaultsProvider } from "../VDefaultsProvider/index.js";
|
||||
import { VIcon } from "../VIcon/index.js"; // Composables
|
||||
import { useBackgroundColor } from "../../composables/color.js";
|
||||
import { makeComponentProps } from "../../composables/component.js";
|
||||
import { makeElevationProps, useElevation } from "../../composables/elevation.js";
|
||||
import { IconValue } from "../../composables/icons.js";
|
||||
import { makeRoundedProps, useRounded } from "../../composables/rounded.js";
|
||||
import { makeSizeProps, useSize } from "../../composables/size.js"; // Utilities
|
||||
import { genericComponent, propsFactory, useRender } from "../../util/index.js";
|
||||
export const makeVTimelineDividerProps = propsFactory({
|
||||
dotColor: String,
|
||||
fillDot: Boolean,
|
||||
hideDot: Boolean,
|
||||
icon: IconValue,
|
||||
iconColor: String,
|
||||
lineColor: String,
|
||||
...makeComponentProps(),
|
||||
...makeRoundedProps(),
|
||||
...makeSizeProps(),
|
||||
...makeElevationProps()
|
||||
}, 'VTimelineDivider');
|
||||
export const VTimelineDivider = genericComponent()({
|
||||
name: 'VTimelineDivider',
|
||||
props: makeVTimelineDividerProps(),
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
const {
|
||||
sizeClasses,
|
||||
sizeStyles
|
||||
} = useSize(props, 'v-timeline-divider__dot');
|
||||
const {
|
||||
backgroundColorStyles,
|
||||
backgroundColorClasses
|
||||
} = useBackgroundColor(() => props.dotColor);
|
||||
const {
|
||||
roundedClasses
|
||||
} = useRounded(props, 'v-timeline-divider__dot');
|
||||
const {
|
||||
elevationClasses
|
||||
} = useElevation(props);
|
||||
const {
|
||||
backgroundColorClasses: lineColorClasses,
|
||||
backgroundColorStyles: lineColorStyles
|
||||
} = useBackgroundColor(() => props.lineColor);
|
||||
useRender(() => _createElementVNode("div", {
|
||||
"class": _normalizeClass(['v-timeline-divider', {
|
||||
'v-timeline-divider--fill-dot': props.fillDot
|
||||
}, props.class]),
|
||||
"style": _normalizeStyle(props.style)
|
||||
}, [_createElementVNode("div", {
|
||||
"class": _normalizeClass(['v-timeline-divider__before', lineColorClasses.value]),
|
||||
"style": _normalizeStyle(lineColorStyles.value)
|
||||
}, null), !props.hideDot && _createElementVNode("div", {
|
||||
"key": "dot",
|
||||
"class": _normalizeClass(['v-timeline-divider__dot', elevationClasses.value, roundedClasses.value, sizeClasses.value]),
|
||||
"style": _normalizeStyle(sizeStyles.value)
|
||||
}, [_createElementVNode("div", {
|
||||
"class": _normalizeClass(['v-timeline-divider__inner-dot', backgroundColorClasses.value, roundedClasses.value]),
|
||||
"style": _normalizeStyle(backgroundColorStyles.value)
|
||||
}, [!slots.default ? _createVNode(VIcon, {
|
||||
"key": "icon",
|
||||
"color": props.iconColor,
|
||||
"icon": props.icon,
|
||||
"size": props.size
|
||||
}, null) : _createVNode(VDefaultsProvider, {
|
||||
"key": "icon-defaults",
|
||||
"disabled": !props.icon,
|
||||
"defaults": {
|
||||
VIcon: {
|
||||
color: props.iconColor,
|
||||
icon: props.icon,
|
||||
size: props.size
|
||||
}
|
||||
}
|
||||
}, slots.default)])]), _createElementVNode("div", {
|
||||
"class": _normalizeClass(['v-timeline-divider__after', lineColorClasses.value]),
|
||||
"style": _normalizeStyle(lineColorStyles.value)
|
||||
}, null)]));
|
||||
return {};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VTimelineDivider.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+423
@@ -0,0 +1,423 @@
|
||||
import { IconValue } from '../../composables/icons.js';
|
||||
import type { Prop, PropType } from 'vue';
|
||||
export type TimelineItemSide = 'start' | 'end' | undefined;
|
||||
export type VTimelineItemSlots = {
|
||||
default: never;
|
||||
icon: never;
|
||||
opposite: never;
|
||||
};
|
||||
export declare const makeVTimelineItemProps: <Defaults extends {
|
||||
class?: unknown;
|
||||
style?: unknown;
|
||||
elevation?: unknown;
|
||||
rounded?: unknown;
|
||||
tile?: unknown;
|
||||
tag?: unknown;
|
||||
size?: unknown;
|
||||
height?: unknown;
|
||||
maxHeight?: unknown;
|
||||
maxWidth?: unknown;
|
||||
minHeight?: unknown;
|
||||
minWidth?: unknown;
|
||||
width?: unknown;
|
||||
density?: unknown;
|
||||
dotColor?: unknown;
|
||||
fillDot?: unknown;
|
||||
hideDot?: unknown;
|
||||
hideOpposite?: unknown;
|
||||
icon?: unknown;
|
||||
iconColor?: unknown;
|
||||
lineInset?: unknown;
|
||||
side?: unknown;
|
||||
} = {}>(defaults?: Defaults | undefined) => {
|
||||
class: unknown extends Defaults["class"] ? PropType<any> : {
|
||||
type: PropType<unknown extends Defaults["class"] ? any : any>;
|
||||
default: unknown extends Defaults["class"] ? any : any;
|
||||
};
|
||||
style: unknown extends Defaults["style"] ? {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
} : Omit<{
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["style"] ? import("vue").StyleValue : Defaults["style"] | import("vue").StyleValue>;
|
||||
default: unknown extends Defaults["style"] ? import("vue").StyleValue : Defaults["style"] | NonNullable<import("vue").StyleValue>;
|
||||
};
|
||||
elevation: unknown extends Defaults["elevation"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
validator: (value: string | number) => boolean;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
validator: (value: string | number) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["elevation"] ? string | number : string | number | Defaults["elevation"]>;
|
||||
default: unknown extends Defaults["elevation"] ? string | number : Defaults["elevation"] | NonNullable<string | number>;
|
||||
};
|
||||
rounded: unknown extends Defaults["rounded"] ? {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
} : Omit<{
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["rounded"] ? string | number | boolean : string | number | boolean | Defaults["rounded"]>;
|
||||
default: unknown extends Defaults["rounded"] ? string | number | boolean : Defaults["rounded"] | NonNullable<string | number | boolean>;
|
||||
};
|
||||
tile: unknown extends Defaults["tile"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["tile"] ? boolean : boolean | Defaults["tile"]>;
|
||||
default: unknown extends Defaults["tile"] ? boolean : boolean | Defaults["tile"];
|
||||
};
|
||||
tag: unknown extends Defaults["tag"] ? {
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["tag"] ? string | import("../../util/index.js").JSXComponent : string | Defaults["tag"] | import("../../util/index.js").JSXComponent>;
|
||||
default: unknown extends Defaults["tag"] ? string | import("../../util/index.js").JSXComponent : Defaults["tag"] | NonNullable<string | import("../../util/index.js").JSXComponent>;
|
||||
};
|
||||
size: unknown extends Defaults["size"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["size"] ? string | number : string | number | Defaults["size"]>;
|
||||
default: unknown extends Defaults["size"] ? string | number : Defaults["size"] | NonNullable<string | number>;
|
||||
};
|
||||
height: unknown extends Defaults["height"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["height"] ? string | number : string | number | Defaults["height"]>;
|
||||
default: unknown extends Defaults["height"] ? string | number : Defaults["height"] | NonNullable<string | number>;
|
||||
};
|
||||
maxHeight: unknown extends Defaults["maxHeight"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["maxHeight"] ? string | number : string | number | Defaults["maxHeight"]>;
|
||||
default: unknown extends Defaults["maxHeight"] ? string | number : Defaults["maxHeight"] | NonNullable<string | number>;
|
||||
};
|
||||
maxWidth: unknown extends Defaults["maxWidth"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["maxWidth"] ? string | number : string | number | Defaults["maxWidth"]>;
|
||||
default: unknown extends Defaults["maxWidth"] ? string | number : Defaults["maxWidth"] | NonNullable<string | number>;
|
||||
};
|
||||
minHeight: unknown extends Defaults["minHeight"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["minHeight"] ? string | number : string | number | Defaults["minHeight"]>;
|
||||
default: unknown extends Defaults["minHeight"] ? string | number : Defaults["minHeight"] | NonNullable<string | number>;
|
||||
};
|
||||
minWidth: unknown extends Defaults["minWidth"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["minWidth"] ? string | number : string | number | Defaults["minWidth"]>;
|
||||
default: unknown extends Defaults["minWidth"] ? string | number : Defaults["minWidth"] | NonNullable<string | number>;
|
||||
};
|
||||
width: unknown extends Defaults["width"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["width"] ? string | number : string | number | Defaults["width"]>;
|
||||
default: unknown extends Defaults["width"] ? string | number : Defaults["width"] | NonNullable<string | number>;
|
||||
};
|
||||
density: unknown extends Defaults["density"] ? PropType<"compact" | "default"> : {
|
||||
type: PropType<unknown extends Defaults["density"] ? "compact" | "default" : "compact" | "default" | Defaults["density"]>;
|
||||
default: unknown extends Defaults["density"] ? "compact" | "default" : Defaults["density"] | NonNullable<"compact" | "default">;
|
||||
};
|
||||
dotColor: unknown extends Defaults["dotColor"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["dotColor"] ? string : string | Defaults["dotColor"]>;
|
||||
default: unknown extends Defaults["dotColor"] ? string : string | Defaults["dotColor"];
|
||||
};
|
||||
fillDot: unknown extends Defaults["fillDot"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["fillDot"] ? boolean : boolean | Defaults["fillDot"]>;
|
||||
default: unknown extends Defaults["fillDot"] ? boolean : boolean | Defaults["fillDot"];
|
||||
};
|
||||
hideDot: unknown extends Defaults["hideDot"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["hideDot"] ? boolean : boolean | Defaults["hideDot"]>;
|
||||
default: unknown extends Defaults["hideDot"] ? boolean : boolean | Defaults["hideDot"];
|
||||
};
|
||||
hideOpposite: unknown extends Defaults["hideOpposite"] ? {
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
} : Omit<{
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["hideOpposite"] ? boolean : boolean | Defaults["hideOpposite"]>;
|
||||
default: unknown extends Defaults["hideOpposite"] ? boolean : boolean | Defaults["hideOpposite"];
|
||||
};
|
||||
icon: unknown extends Defaults["icon"] ? PropType<IconValue> : {
|
||||
type: PropType<unknown extends Defaults["icon"] ? IconValue : Defaults["icon"] | IconValue>;
|
||||
default: unknown extends Defaults["icon"] ? IconValue : Defaults["icon"] | NonNullable<IconValue>;
|
||||
};
|
||||
iconColor: unknown extends Defaults["iconColor"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["iconColor"] ? string : string | Defaults["iconColor"]>;
|
||||
default: unknown extends Defaults["iconColor"] ? string : string | Defaults["iconColor"];
|
||||
};
|
||||
lineInset: unknown extends Defaults["lineInset"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["lineInset"] ? string | number : string | number | Defaults["lineInset"]>;
|
||||
default: unknown extends Defaults["lineInset"] ? string | number : Defaults["lineInset"] | NonNullable<string | number>;
|
||||
};
|
||||
side: unknown extends Defaults["side"] ? Prop<TimelineItemSide> : {
|
||||
type: PropType<unknown extends Defaults["side"] ? TimelineItemSide : Defaults["side"] | TimelineItemSide>;
|
||||
default: unknown extends Defaults["side"] ? TimelineItemSide : Defaults["side"] | NonNullable<TimelineItemSide>;
|
||||
};
|
||||
};
|
||||
export declare const VTimelineItem: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
size: string | number;
|
||||
fillDot: boolean;
|
||||
hideDot: boolean;
|
||||
} & {
|
||||
class?: any;
|
||||
elevation?: string | number | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
height?: string | number | undefined;
|
||||
maxHeight?: string | number | undefined;
|
||||
maxWidth?: string | number | undefined;
|
||||
minHeight?: string | number | undefined;
|
||||
minWidth?: string | number | undefined;
|
||||
width?: string | number | undefined;
|
||||
density?: "compact" | "default" | undefined;
|
||||
dotColor?: string | undefined;
|
||||
hideOpposite?: boolean | undefined;
|
||||
icon?: IconValue | undefined;
|
||||
iconColor?: string | undefined;
|
||||
lineInset?: string | number | undefined;
|
||||
side?: TimelineItemSide;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
icon?: (() => import("vue").VNodeChild) | undefined;
|
||||
opposite?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
icon?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
opposite?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:icon"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:opposite"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
|
||||
style: import("vue").StyleValue;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
size: string | number;
|
||||
fillDot: boolean;
|
||||
hideDot: boolean;
|
||||
hideOpposite: boolean;
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
icon: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
opposite: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
|
||||
P: {};
|
||||
B: {};
|
||||
D: {};
|
||||
C: {};
|
||||
M: {};
|
||||
Defaults: {};
|
||||
}, {
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
size: string | number;
|
||||
fillDot: boolean;
|
||||
hideDot: boolean;
|
||||
} & {
|
||||
class?: any;
|
||||
elevation?: string | number | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
height?: string | number | undefined;
|
||||
maxHeight?: string | number | undefined;
|
||||
maxWidth?: string | number | undefined;
|
||||
minHeight?: string | number | undefined;
|
||||
minWidth?: string | number | undefined;
|
||||
width?: string | number | undefined;
|
||||
density?: "compact" | "default" | undefined;
|
||||
dotColor?: string | undefined;
|
||||
hideOpposite?: boolean | undefined;
|
||||
icon?: IconValue | undefined;
|
||||
iconColor?: string | undefined;
|
||||
lineInset?: string | number | undefined;
|
||||
side?: TimelineItemSide;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
icon?: (() => import("vue").VNodeChild) | undefined;
|
||||
opposite?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
icon?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
opposite?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:icon"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:opposite"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {}, {}, {}, {}, {
|
||||
style: import("vue").StyleValue;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
size: string | number;
|
||||
fillDot: boolean;
|
||||
hideDot: boolean;
|
||||
hideOpposite: boolean;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
size: string | number;
|
||||
fillDot: boolean;
|
||||
hideDot: boolean;
|
||||
} & {
|
||||
class?: any;
|
||||
elevation?: string | number | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
height?: string | number | undefined;
|
||||
maxHeight?: string | number | undefined;
|
||||
maxWidth?: string | number | undefined;
|
||||
minHeight?: string | number | undefined;
|
||||
minWidth?: string | number | undefined;
|
||||
width?: string | number | undefined;
|
||||
density?: "compact" | "default" | undefined;
|
||||
dotColor?: string | undefined;
|
||||
hideOpposite?: boolean | undefined;
|
||||
icon?: IconValue | undefined;
|
||||
iconColor?: string | undefined;
|
||||
lineInset?: string | number | undefined;
|
||||
side?: TimelineItemSide;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
icon?: (() => import("vue").VNodeChild) | undefined;
|
||||
opposite?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
icon?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
opposite?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:icon"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:opposite"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
|
||||
style: import("vue").StyleValue;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
size: string | number;
|
||||
fillDot: boolean;
|
||||
hideDot: boolean;
|
||||
hideOpposite: boolean;
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
icon: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
opposite: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("../../util/index.js").FilterPropsOptions<{
|
||||
class: PropType<import("../../composables/component.js").ClassValue>;
|
||||
style: {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
elevation: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
validator: (value: string | number) => boolean;
|
||||
};
|
||||
rounded: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
tile: BooleanConstructor;
|
||||
tag: {
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
};
|
||||
size: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: string;
|
||||
};
|
||||
height: (NumberConstructor | StringConstructor)[];
|
||||
maxHeight: (NumberConstructor | StringConstructor)[];
|
||||
maxWidth: (NumberConstructor | StringConstructor)[];
|
||||
minHeight: (NumberConstructor | StringConstructor)[];
|
||||
minWidth: (NumberConstructor | StringConstructor)[];
|
||||
width: (NumberConstructor | StringConstructor)[];
|
||||
density: PropType<'default' | 'compact'>;
|
||||
dotColor: StringConstructor;
|
||||
fillDot: BooleanConstructor;
|
||||
hideDot: BooleanConstructor;
|
||||
hideOpposite: {
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
};
|
||||
icon: PropType<IconValue>;
|
||||
iconColor: StringConstructor;
|
||||
lineInset: (NumberConstructor | StringConstructor)[];
|
||||
side: Prop<TimelineItemSide>;
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
class: PropType<import("../../composables/component.js").ClassValue>;
|
||||
style: {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
elevation: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
validator: (value: string | number) => boolean;
|
||||
};
|
||||
rounded: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
tile: BooleanConstructor;
|
||||
tag: {
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
};
|
||||
size: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: string;
|
||||
};
|
||||
height: (NumberConstructor | StringConstructor)[];
|
||||
maxHeight: (NumberConstructor | StringConstructor)[];
|
||||
maxWidth: (NumberConstructor | StringConstructor)[];
|
||||
minHeight: (NumberConstructor | StringConstructor)[];
|
||||
minWidth: (NumberConstructor | StringConstructor)[];
|
||||
width: (NumberConstructor | StringConstructor)[];
|
||||
density: PropType<'default' | 'compact'>;
|
||||
dotColor: StringConstructor;
|
||||
fillDot: BooleanConstructor;
|
||||
hideDot: BooleanConstructor;
|
||||
hideOpposite: {
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
};
|
||||
icon: PropType<IconValue>;
|
||||
iconColor: StringConstructor;
|
||||
lineInset: (NumberConstructor | StringConstructor)[];
|
||||
side: Prop<TimelineItemSide>;
|
||||
}>>;
|
||||
export type VTimelineItem = InstanceType<typeof VTimelineItem>;
|
||||
+85
@@ -0,0 +1,85 @@
|
||||
import { normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, createVNode as _createVNode, normalizeClass as _normalizeClass } from "vue";
|
||||
// Components
|
||||
import { VTimelineDivider } from "./VTimelineDivider.js"; // Composables
|
||||
import { makeComponentProps } from "../../composables/component.js";
|
||||
import { makeDimensionProps, useDimension } from "../../composables/dimensions.js";
|
||||
import { makeElevationProps } from "../../composables/elevation.js";
|
||||
import { IconValue } from "../../composables/icons.js";
|
||||
import { makeRoundedProps } from "../../composables/rounded.js";
|
||||
import { makeSizeProps } from "../../composables/size.js";
|
||||
import { makeTagProps } from "../../composables/tag.js"; // Utilities
|
||||
import { ref, shallowRef, watch } from 'vue';
|
||||
import { convertToUnit, genericComponent, propsFactory, useRender } from "../../util/index.js"; // Types
|
||||
// Types
|
||||
export const makeVTimelineItemProps = propsFactory({
|
||||
density: String,
|
||||
dotColor: String,
|
||||
fillDot: Boolean,
|
||||
hideDot: Boolean,
|
||||
hideOpposite: {
|
||||
type: Boolean,
|
||||
default: undefined
|
||||
},
|
||||
icon: IconValue,
|
||||
iconColor: String,
|
||||
lineInset: [Number, String],
|
||||
side: {
|
||||
type: String,
|
||||
validator: v => v == null || ['start', 'end'].includes(v)
|
||||
},
|
||||
...makeComponentProps(),
|
||||
...makeDimensionProps(),
|
||||
...makeElevationProps(),
|
||||
...makeRoundedProps(),
|
||||
...makeSizeProps(),
|
||||
...makeTagProps()
|
||||
}, 'VTimelineItem');
|
||||
export const VTimelineItem = genericComponent()({
|
||||
name: 'VTimelineItem',
|
||||
props: makeVTimelineItemProps(),
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
const {
|
||||
dimensionStyles
|
||||
} = useDimension(props);
|
||||
const dotSize = shallowRef(0);
|
||||
const dotRef = ref();
|
||||
watch(dotRef, newValue => {
|
||||
if (!newValue) return;
|
||||
dotSize.value = newValue.$el.querySelector('.v-timeline-divider__dot')?.getBoundingClientRect().width ?? 0;
|
||||
}, {
|
||||
flush: 'post'
|
||||
});
|
||||
useRender(() => _createElementVNode("div", {
|
||||
"class": _normalizeClass(['v-timeline-item', {
|
||||
'v-timeline-item--fill-dot': props.fillDot,
|
||||
'v-timeline-item--side-start': props.side === 'start',
|
||||
'v-timeline-item--side-end': props.side === 'end'
|
||||
}, props.class]),
|
||||
"style": _normalizeStyle([{
|
||||
'--v-timeline-dot-size': convertToUnit(dotSize.value),
|
||||
'--v-timeline-line-inset': props.lineInset ? `calc(var(--v-timeline-dot-size) / 2 + ${convertToUnit(props.lineInset)})` : convertToUnit(0)
|
||||
}, props.style])
|
||||
}, [_createElementVNode("div", {
|
||||
"class": "v-timeline-item__body",
|
||||
"style": _normalizeStyle(dimensionStyles.value)
|
||||
}, [slots.default?.()]), _createVNode(VTimelineDivider, {
|
||||
"ref": dotRef,
|
||||
"hideDot": props.hideDot,
|
||||
"icon": props.icon,
|
||||
"iconColor": props.iconColor,
|
||||
"size": props.size,
|
||||
"elevation": props.elevation,
|
||||
"dotColor": props.dotColor,
|
||||
"fillDot": props.fillDot,
|
||||
"rounded": props.rounded
|
||||
}, {
|
||||
default: slots.icon
|
||||
}), props.density !== 'compact' && _createElementVNode("div", {
|
||||
"class": "v-timeline-item__opposite"
|
||||
}, [!props.hideOpposite && slots.opposite?.()])]));
|
||||
return {};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VTimelineItem.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+27
@@ -0,0 +1,27 @@
|
||||
@mixin vertical($immediate: false)
|
||||
$selector: '.v-timeline--vertical'
|
||||
@if $immediate
|
||||
$selector: '#{$selector}#{&}'
|
||||
@else
|
||||
$selector: '#{$selector} #{&}'
|
||||
@at-root #{$selector}
|
||||
@content
|
||||
|
||||
@mixin horizontal($immediate: false)
|
||||
$selector: '.v-timeline--horizontal'
|
||||
@if $immediate
|
||||
$selector: '#{$selector}#{&}'
|
||||
@else
|
||||
$selector: '#{$selector} #{&}'
|
||||
@at-root #{$selector}
|
||||
@content
|
||||
|
||||
@mixin timeline-first-item()
|
||||
.v-timeline-item:first-child
|
||||
.v-timeline-divider, .v-timeline-item__body, .v-timeline-item__opposite
|
||||
@content
|
||||
|
||||
@mixin timeline-last-item()
|
||||
.v-timeline-item:last-child
|
||||
.v-timeline-divider, .v-timeline-item__body, .v-timeline-item__opposite
|
||||
@content
|
||||
+37
@@ -0,0 +1,37 @@
|
||||
@use '../../styles/tools';
|
||||
|
||||
// VTimeline
|
||||
$timeline-density-comfortable-grid-template-end: min-content min-content auto !default;
|
||||
$timeline-density-comfortable-grid-template-start: auto min-content min-content !default;
|
||||
$timeline-density-compact-grid-template-end: 0 min-content auto !default;
|
||||
$timeline-density-compact-grid-template-start: auto min-content 0 !default;
|
||||
$timeline-dot-border-radius: 50% !default;
|
||||
$timeline-dot-divider-background: rgb(var(--v-theme-surface-light)) !default;
|
||||
$timeline-dot-size: 38px !default;
|
||||
$timeline-inner-dot-divider-background: rgb(var(--v-theme-on-surface)) !default;
|
||||
$timeline-inset-divider-line: var(--v-timeline-line-inset) !default;
|
||||
$timeline-inset-line-size: 4px !default;
|
||||
|
||||
// VTimelineDivider
|
||||
$timeline-divider-dot-elevation: 0 !default;
|
||||
$timeline-divider-line-background: rgba(var(--v-border-color), var(--v-border-opacity)) !default;
|
||||
$timeline-divider-line-horizontal-width: var(--v-timeline-line-inset, 0px) !default;
|
||||
$timeline-divider-line-thickness: var(--v-timeline-line-thickness) !default;
|
||||
|
||||
// VTimelineItem
|
||||
$timeline-item-grid-template-center: minmax(auto, 50%) min-content minmax(auto, 50%) !default;
|
||||
$timeline-item-grid-template-auto: auto min-content auto !default;
|
||||
$timeline-item-padding: 24px !default;
|
||||
|
||||
// Lists
|
||||
$timeline-dot-border-sizes: () !default;
|
||||
$timeline-dot-border-sizes: tools.map-deep-merge(
|
||||
(
|
||||
'x-small': 6px,
|
||||
'small': 8px,
|
||||
'default': 8px,
|
||||
'large': 8px,
|
||||
'x-large': 10px,
|
||||
),
|
||||
$timeline-dot-border-sizes
|
||||
);
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
export { VTimeline } from './VTimeline.js';
|
||||
export { VTimelineItem } from './VTimelineItem.js';
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
export { VTimeline } from "./VTimeline.js";
|
||||
export { VTimelineItem } from "./VTimelineItem.js";
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"index.js","names":["VTimeline","VTimelineItem"],"sources":["../../../src/components/VTimeline/index.ts"],"sourcesContent":["export { VTimeline } from './VTimeline'\nexport { VTimelineItem } from './VTimelineItem'\n"],"mappings":"SAASA,SAAS;AAAA,SACTC,aAAa","ignoreList":[]}
|
||||
Reference in New Issue
Block a user