routie dev init since i didn't adhere to any proper guidance up until now
This commit is contained in:
+44
@@ -0,0 +1,44 @@
|
||||
@layer vuetify-components {}
|
||||
@layer vuetify-overrides {
|
||||
.v-tab {
|
||||
height: var(--v-tabs-height);
|
||||
border-radius: 0;
|
||||
min-width: 90px;
|
||||
}
|
||||
}
|
||||
@layer vuetify-components {
|
||||
.v-slide-group--horizontal .v-tab {
|
||||
max-width: 360px;
|
||||
}
|
||||
.v-slide-group--vertical .v-tab {
|
||||
justify-content: start;
|
||||
}
|
||||
.v-tab__slider {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
background: currentColor;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
}
|
||||
.v-tab--selected .v-tab__slider {
|
||||
opacity: 1;
|
||||
}
|
||||
.v-slide-group--vertical .v-tab__slider {
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 2px;
|
||||
}
|
||||
}
|
||||
@layer vuetify-final.trumps {
|
||||
@media (forced-colors: active) {
|
||||
.v-tab--selected.v-btn {
|
||||
color: highlight;
|
||||
}
|
||||
.v-tab__slider {
|
||||
background: highlight;
|
||||
}
|
||||
}
|
||||
}
|
||||
+1905
File diff suppressed because it is too large
Load Diff
+135
@@ -0,0 +1,135 @@
|
||||
import { Fragment as _Fragment, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
|
||||
// Styles
|
||||
import "./VTab.css";
|
||||
|
||||
// Components
|
||||
import { makeVBtnProps, VBtn } from "../VBtn/VBtn.js"; // Composables
|
||||
import { useBackgroundColor, useTextColor } from "../../composables/color.js";
|
||||
import { forwardRefs } from "../../composables/forwardRefs.js"; // Utilities
|
||||
import { computed, ref } from 'vue';
|
||||
import { VTabsSymbol } from "./shared.js";
|
||||
import { animate, genericComponent, omit, propsFactory, standardEasing, useRender } from "../../util/index.js"; // Types
|
||||
export const makeVTabProps = propsFactory({
|
||||
fixed: Boolean,
|
||||
sliderColor: String,
|
||||
sliderTransition: String,
|
||||
sliderTransitionDuration: [String, Number],
|
||||
hideSlider: Boolean,
|
||||
inset: Boolean,
|
||||
direction: {
|
||||
type: String,
|
||||
default: 'horizontal'
|
||||
},
|
||||
...omit(makeVBtnProps({
|
||||
selectedClass: 'v-tab--selected',
|
||||
variant: 'text'
|
||||
}), ['active', 'block', 'flat', 'location', 'position', 'symbol'])
|
||||
}, 'VTab');
|
||||
export const VTab = genericComponent()({
|
||||
name: 'VTab',
|
||||
props: makeVTabProps(),
|
||||
setup(props, {
|
||||
slots,
|
||||
attrs
|
||||
}) {
|
||||
const {
|
||||
textColorClasses: sliderColorClasses,
|
||||
textColorStyles: sliderColorStyles
|
||||
} = useTextColor(() => props.sliderColor);
|
||||
const {
|
||||
backgroundColorClasses: insetColorClasses,
|
||||
backgroundColorStyles: insetColorStyles
|
||||
} = useBackgroundColor(() => props.sliderColor);
|
||||
const rootEl = ref();
|
||||
const sliderEl = ref();
|
||||
const isHorizontal = computed(() => props.direction === 'horizontal');
|
||||
const isSelected = computed(() => rootEl.value?.group?.isSelected.value ?? false);
|
||||
function fade(nextEl, prevEl) {
|
||||
return {
|
||||
opacity: [0, 1]
|
||||
};
|
||||
}
|
||||
function grow(nextEl, prevEl) {
|
||||
return props.direction === 'vertical' ? {
|
||||
transform: ['scaleY(0)', 'scaleY(1)']
|
||||
} : {
|
||||
transform: ['scaleX(0)', 'scaleX(1)']
|
||||
};
|
||||
}
|
||||
function shift(nextEl, prevEl) {
|
||||
const prevBox = prevEl.getBoundingClientRect();
|
||||
const nextBox = nextEl.getBoundingClientRect();
|
||||
const xy = isHorizontal.value ? 'x' : 'y';
|
||||
const XY = isHorizontal.value ? 'X' : 'Y';
|
||||
const rightBottom = isHorizontal.value ? 'right' : 'bottom';
|
||||
const widthHeight = isHorizontal.value ? 'width' : 'height';
|
||||
const prevPos = prevBox[xy];
|
||||
const nextPos = nextBox[xy];
|
||||
const delta = prevPos > nextPos ? prevBox[rightBottom] - nextBox[rightBottom] : prevBox[xy] - nextBox[xy];
|
||||
const origin = Math.sign(delta) > 0 ? isHorizontal.value ? 'right' : 'bottom' : Math.sign(delta) < 0 ? isHorizontal.value ? 'left' : 'top' : 'center';
|
||||
const size = Math.abs(delta) + (Math.sign(delta) < 0 ? prevBox[widthHeight] : nextBox[widthHeight]);
|
||||
const scale = size / Math.max(prevBox[widthHeight], nextBox[widthHeight]) || 0;
|
||||
const initialScale = prevBox[widthHeight] / nextBox[widthHeight] || 0;
|
||||
const sigma = 1.5;
|
||||
return {
|
||||
transform: [`translate${XY}(${delta}px) scale${XY}(${initialScale})`, `translate${XY}(${delta / sigma}px) scale${XY}(${(scale - 1) / sigma + 1})`, 'none'],
|
||||
transformOrigin: Array(3).fill(origin)
|
||||
};
|
||||
}
|
||||
function updateSlider({
|
||||
value
|
||||
}) {
|
||||
if (value) {
|
||||
const prevEl = rootEl.value?.$el.parentElement?.querySelector('.v-tab--selected .v-tab__slider');
|
||||
const nextEl = sliderEl.value;
|
||||
if (!prevEl || !nextEl) return;
|
||||
const color = getComputedStyle(prevEl).backgroundColor;
|
||||
const keyframes = {
|
||||
fade,
|
||||
grow,
|
||||
shift
|
||||
}[props.sliderTransition ?? 'shift'] ?? shift;
|
||||
const duration = Number(props.sliderTransitionDuration) || ({
|
||||
fade: 400,
|
||||
grow: 350,
|
||||
shift: 225
|
||||
}[props.sliderTransition ?? 'shift'] ?? 225);
|
||||
animate(nextEl, {
|
||||
backgroundColor: [color, color],
|
||||
...keyframes(nextEl, prevEl)
|
||||
}, {
|
||||
duration,
|
||||
easing: standardEasing
|
||||
});
|
||||
}
|
||||
}
|
||||
useRender(() => {
|
||||
const btnProps = VBtn.filterProps(props);
|
||||
return _createVNode(VBtn, _mergeProps({
|
||||
"symbol": VTabsSymbol,
|
||||
"ref": rootEl,
|
||||
"class": ['v-tab', props.class, isSelected.value && props.inset ? insetColorClasses.value : []],
|
||||
"style": [props.style, isSelected.value && props.inset ? insetColorStyles.value : [], {
|
||||
backgroundColor: isSelected.value && props.inset ? 'transparent !important' : undefined
|
||||
}],
|
||||
"tabindex": isSelected.value ? 0 : -1,
|
||||
"role": "tab",
|
||||
"aria-selected": String(isSelected.value),
|
||||
"active": false
|
||||
}, btnProps, attrs, {
|
||||
"block": props.fixed,
|
||||
"maxWidth": props.fixed ? 300 : undefined,
|
||||
"onGroup:selected": updateSlider
|
||||
}), {
|
||||
...slots,
|
||||
default: () => _createElementVNode(_Fragment, null, [slots.default?.() ?? props.text, !props.hideSlider && _createElementVNode("div", {
|
||||
"ref": sliderEl,
|
||||
"class": _normalizeClass(['v-tab__slider', props.inset ? insetColorClasses.value : sliderColorClasses.value]),
|
||||
"style": _normalizeStyle([sliderColorStyles.value, props.inset ? insetColorStyles.value : sliderColorClasses.value])
|
||||
}, null)])
|
||||
});
|
||||
});
|
||||
return forwardRefs({}, rootEl);
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VTab.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+42
@@ -0,0 +1,42 @@
|
||||
@use '../../styles/tools'
|
||||
@use './variables' as *
|
||||
|
||||
@include tools.layer('components')
|
||||
.v-tab
|
||||
@include tools.layer('overrides')
|
||||
height: var(--v-tabs-height)
|
||||
border-radius: $tab-border-radius
|
||||
min-width: $tab-min-width
|
||||
|
||||
.v-slide-group--horizontal &
|
||||
max-width: $tab-max-width
|
||||
|
||||
.v-slide-group--vertical &
|
||||
justify-content: start
|
||||
|
||||
.v-tab__slider
|
||||
position: absolute
|
||||
bottom: 0
|
||||
left: 0
|
||||
height: $tab-slider-size
|
||||
width: 100%
|
||||
background: currentColor
|
||||
pointer-events: none
|
||||
opacity: 0
|
||||
|
||||
.v-tab--selected &
|
||||
opacity: 1
|
||||
|
||||
.v-slide-group--vertical &
|
||||
top: 0
|
||||
height: 100%
|
||||
width: $tab-slider-size
|
||||
|
||||
@include tools.layer('trumps')
|
||||
@media (forced-colors: active)
|
||||
.v-tab
|
||||
&--selected.v-btn
|
||||
color: highlight
|
||||
|
||||
&__slider
|
||||
background: highlight
|
||||
+115
@@ -0,0 +1,115 @@
|
||||
@layer vuetify-components {
|
||||
.v-tabs {
|
||||
display: flex;
|
||||
height: var(--v-tabs-height);
|
||||
}
|
||||
.v-tabs--density-default {
|
||||
--v-tabs-height: 48px;
|
||||
}
|
||||
.v-tabs--density-default.v-tabs--stacked {
|
||||
--v-tabs-height: 72px;
|
||||
}
|
||||
.v-tabs--density-comfortable {
|
||||
--v-tabs-height: 44px;
|
||||
}
|
||||
.v-tabs--density-comfortable.v-tabs--stacked {
|
||||
--v-tabs-height: 68px;
|
||||
}
|
||||
.v-tabs--density-compact {
|
||||
--v-tabs-height: 36px;
|
||||
}
|
||||
.v-tabs--density-compact.v-tabs--stacked {
|
||||
--v-tabs-height: 60px;
|
||||
}
|
||||
.v-tabs.v-slide-group--vertical {
|
||||
height: auto;
|
||||
flex: none;
|
||||
--v-tabs-height: 48px;
|
||||
}
|
||||
.v-tabs--align-tabs-title:not(.v-slide-group--has-affixes) .v-tab:first-child {
|
||||
margin-inline-start: 42px;
|
||||
}
|
||||
.v-tabs--fixed-tabs .v-slide-group__content > *:last-child,
|
||||
.v-tabs--align-tabs-center .v-slide-group__content > *:last-child {
|
||||
margin-inline-end: auto;
|
||||
}
|
||||
.v-tabs--fixed-tabs .v-slide-group__content > *:first-child,
|
||||
.v-tabs--align-tabs-center .v-slide-group__content > *:first-child {
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
.v-tabs--grow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.v-tabs--grow .v-tab {
|
||||
flex: 1 0 auto;
|
||||
max-width: none;
|
||||
}
|
||||
.v-tabs--align-tabs-end .v-tab:first-child {
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
.v-tabs--align-tabs-end .v-tab:last-child {
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
.v-tabs--inset {
|
||||
--v-tabs-inset-radius: 4px;
|
||||
--v-tabs-inset-padding: 4px;
|
||||
--v-tabs-slider-background: rgba(var(--v-theme-on-surface), .2);
|
||||
background: color-mix(in srgb, rgb(var(--v-theme-on-surface)) 6%, transparent);
|
||||
box-shadow: inset 0 0 0 2px rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
border-radius: calc(var(--v-tabs-inset-radius) + var(--v-tabs-inset-padding));
|
||||
}
|
||||
.v-tabs--inset .v-tab {
|
||||
margin: var(--v-tabs-inset-padding);
|
||||
transition-property: box-shadow, transform, opacity, background, color;
|
||||
}
|
||||
.v-tabs--inset .v-tab.v-tab.v-btn {
|
||||
border-radius: var(--v-tabs-inset-radius);
|
||||
}
|
||||
.v-tabs--inset .v-tab:focus-visible {
|
||||
outline: 2px solid rgb(var(--v-border-color));
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.v-tabs--inset .v-tab:focus-visible:after {
|
||||
opacity: 0;
|
||||
}
|
||||
.v-tabs--inset:not(.v-tabs--fixed-tabs, .v-tabs--grow) {
|
||||
max-width: max-content;
|
||||
}
|
||||
.v-tabs--inset.v-tabs--fixed-tabs .v-slide-group__content {
|
||||
padding-inline: var(--v-tabs-inset-padding);
|
||||
}
|
||||
.v-tabs--inset .v-tab__slider {
|
||||
background: var(--v-tabs-slider-background);
|
||||
inset: 0;
|
||||
border-radius: var(--v-tabs-inset-radius);
|
||||
z-index: -1;
|
||||
width: auto;
|
||||
}
|
||||
.v-tabs--inset.v-tabs--horizontal {
|
||||
height: calc(var(--v-tabs-height) + var(--v-tabs-inset-padding) * 2);
|
||||
--v-tabs-inset-tab-radius: calc(var(--v-tabs-outer-radius) - var(--v-tabs-inset-padding) + 4px);
|
||||
}
|
||||
.v-tabs--inset.v-tabs--horizontal .v-tab__slider {
|
||||
height: auto;
|
||||
}
|
||||
.v-tabs--inset .v-btn__overlay {
|
||||
display: none;
|
||||
}
|
||||
.v-tabs--inset.v-tabs--vertical .v-tab {
|
||||
grid-template-columns: max-content 1fr max-content;
|
||||
}
|
||||
.v-tabs--inset.v-tabs--vertical .v-tab > .v-btn__content {
|
||||
justify-content: start;
|
||||
}
|
||||
.v-tabs--inset.v-tabs--vertical .v-tab .v-tab__slider {
|
||||
width: auto;
|
||||
}
|
||||
@media (max-width: 1144.98px) {
|
||||
.v-tabs.v-slide-group--is-overflowing.v-slide-group--horizontal:not(.v-slide-group--has-affixes) .v-tab:first-child {
|
||||
margin-inline-start: 52px;
|
||||
}
|
||||
.v-tabs.v-slide-group--is-overflowing.v-slide-group--horizontal:not(.v-slide-group--has-affixes) .v-tab:last-child {
|
||||
margin-inline-end: 52px;
|
||||
}
|
||||
}
|
||||
}
|
||||
+741
@@ -0,0 +1,741 @@
|
||||
|
||||
import type { PropType } from 'vue';
|
||||
import type { GenericProps } from '../../util/index.js';
|
||||
export type TabItem = string | number | Record<string, any>;
|
||||
export type VTabsSlot<T> = {
|
||||
item: T;
|
||||
};
|
||||
export type VTabsSlots<T> = {
|
||||
default: never;
|
||||
tab: VTabsSlot<T>;
|
||||
item: VTabsSlot<T>;
|
||||
window: never;
|
||||
prev: never;
|
||||
next: never;
|
||||
} & {
|
||||
[key: `tab.${string}`]: VTabsSlot<T>;
|
||||
[key: `item.${string}`]: VTabsSlot<T>;
|
||||
};
|
||||
export declare const makeVTabsProps: <Defaults extends {
|
||||
class?: unknown;
|
||||
style?: unknown;
|
||||
mobile?: unknown;
|
||||
mobileBreakpoint?: unknown;
|
||||
density?: unknown;
|
||||
tag?: unknown;
|
||||
modelValue?: unknown;
|
||||
multiple?: unknown;
|
||||
mandatory?: unknown;
|
||||
max?: unknown;
|
||||
selectedClass?: unknown;
|
||||
disabled?: unknown;
|
||||
spaced?: unknown;
|
||||
centerActive?: unknown;
|
||||
scrollToActive?: unknown;
|
||||
contentClass?: unknown;
|
||||
direction?: unknown;
|
||||
symbol?: unknown;
|
||||
nextIcon?: unknown;
|
||||
prevIcon?: unknown;
|
||||
showArrows?: unknown;
|
||||
sliderTransition?: unknown;
|
||||
sliderTransitionDuration?: unknown;
|
||||
alignTabs?: unknown;
|
||||
color?: unknown;
|
||||
fixedTabs?: unknown;
|
||||
items?: unknown;
|
||||
stacked?: unknown;
|
||||
bgColor?: unknown;
|
||||
grow?: unknown;
|
||||
height?: unknown;
|
||||
hideSlider?: unknown;
|
||||
inset?: unknown;
|
||||
insetPadding?: unknown;
|
||||
insetRadius?: unknown;
|
||||
sliderColor?: 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>;
|
||||
};
|
||||
mobile: unknown extends Defaults["mobile"] ? Omit<{
|
||||
type: PropType<boolean | null>;
|
||||
default: boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<boolean | null>;
|
||||
default: NonNullable<boolean | null> | null;
|
||||
} : Omit<Omit<{
|
||||
type: PropType<boolean | null>;
|
||||
default: boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<boolean | null>;
|
||||
default: NonNullable<boolean | null> | null;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["mobile"] ? boolean | null : boolean | Defaults["mobile"] | null>;
|
||||
default: unknown extends Defaults["mobile"] ? boolean | null : Defaults["mobile"] | NonNullable<boolean | null>;
|
||||
};
|
||||
mobileBreakpoint: unknown extends Defaults["mobileBreakpoint"] ? PropType<number | import("../../types.js").DisplayBreakpoint> : {
|
||||
type: PropType<unknown extends Defaults["mobileBreakpoint"] ? number | import("../../types.js").DisplayBreakpoint : number | Defaults["mobileBreakpoint"] | import("../../types.js").DisplayBreakpoint>;
|
||||
default: unknown extends Defaults["mobileBreakpoint"] ? number | import("../../types.js").DisplayBreakpoint : Defaults["mobileBreakpoint"] | NonNullable<number | import("../../types.js").DisplayBreakpoint>;
|
||||
};
|
||||
density: unknown extends Defaults["density"] ? {
|
||||
type: PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
} : Omit<{
|
||||
type: PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: 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: 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>;
|
||||
};
|
||||
modelValue: unknown extends Defaults["modelValue"] ? {
|
||||
type: null;
|
||||
default: undefined;
|
||||
} : Omit<{
|
||||
type: null;
|
||||
default: undefined;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["modelValue"] ? any : any>;
|
||||
default: unknown extends Defaults["modelValue"] ? any : any;
|
||||
};
|
||||
multiple: unknown extends Defaults["multiple"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["multiple"] ? boolean : boolean | Defaults["multiple"]>;
|
||||
default: unknown extends Defaults["multiple"] ? boolean : boolean | Defaults["multiple"];
|
||||
};
|
||||
mandatory: unknown extends Defaults["mandatory"] ? {
|
||||
type: PropType<"force" | boolean>;
|
||||
default: NonNullable<"force" | boolean>;
|
||||
} : Omit<{
|
||||
type: PropType<"force" | boolean>;
|
||||
default: NonNullable<"force" | boolean>;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["mandatory"] ? "force" | boolean : "force" | boolean | Defaults["mandatory"]>;
|
||||
default: unknown extends Defaults["mandatory"] ? "force" | boolean : Defaults["mandatory"] | NonNullable<"force" | boolean>;
|
||||
};
|
||||
max: unknown extends Defaults["max"] ? NumberConstructor : {
|
||||
type: PropType<unknown extends Defaults["max"] ? number : number | Defaults["max"]>;
|
||||
default: unknown extends Defaults["max"] ? number : number | Defaults["max"];
|
||||
};
|
||||
selectedClass: unknown extends Defaults["selectedClass"] ? Omit<{
|
||||
type: PropType<string>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<string>;
|
||||
default: string;
|
||||
} : Omit<Omit<{
|
||||
type: PropType<string>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<string>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["selectedClass"] ? string : string | Defaults["selectedClass"]>;
|
||||
default: unknown extends Defaults["selectedClass"] ? string : string | Defaults["selectedClass"];
|
||||
};
|
||||
disabled: unknown extends Defaults["disabled"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["disabled"] ? boolean : boolean | Defaults["disabled"]>;
|
||||
default: unknown extends Defaults["disabled"] ? boolean : boolean | Defaults["disabled"];
|
||||
};
|
||||
spaced: unknown extends Defaults["spaced"] ? PropType<"both" | "end" | "start"> : {
|
||||
type: PropType<unknown extends Defaults["spaced"] ? "both" | "end" | "start" : "both" | "end" | "start" | Defaults["spaced"]>;
|
||||
default: unknown extends Defaults["spaced"] ? "both" | "end" | "start" : Defaults["spaced"] | NonNullable<"both" | "end" | "start">;
|
||||
};
|
||||
centerActive: unknown extends Defaults["centerActive"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["centerActive"] ? boolean : boolean | Defaults["centerActive"]>;
|
||||
default: unknown extends Defaults["centerActive"] ? boolean : boolean | Defaults["centerActive"];
|
||||
};
|
||||
scrollToActive: unknown extends Defaults["scrollToActive"] ? {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
} : Omit<{
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["scrollToActive"] ? boolean : boolean | Defaults["scrollToActive"]>;
|
||||
default: unknown extends Defaults["scrollToActive"] ? boolean : boolean | Defaults["scrollToActive"];
|
||||
};
|
||||
contentClass: unknown extends Defaults["contentClass"] ? null : {
|
||||
type: PropType<unknown extends Defaults["contentClass"] ? any : any>;
|
||||
default: unknown extends Defaults["contentClass"] ? any : any;
|
||||
};
|
||||
direction: unknown extends Defaults["direction"] ? {
|
||||
type: PropType<'horizontal' | 'vertical'>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: PropType<'horizontal' | 'vertical'>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["direction"] ? "horizontal" | "vertical" : "horizontal" | "vertical" | Defaults["direction"]>;
|
||||
default: unknown extends Defaults["direction"] ? "horizontal" | "vertical" : Defaults["direction"] | NonNullable<"horizontal" | "vertical">;
|
||||
};
|
||||
symbol: unknown extends Defaults["symbol"] ? {
|
||||
type: null;
|
||||
default: import("vue").InjectionKey<import("../../composables/group.js").GroupProvide>;
|
||||
} : Omit<{
|
||||
type: null;
|
||||
default: import("vue").InjectionKey<import("../../composables/group.js").GroupProvide>;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["symbol"] ? any : any>;
|
||||
default: unknown extends Defaults["symbol"] ? any : any;
|
||||
};
|
||||
nextIcon: unknown extends Defaults["nextIcon"] ? {
|
||||
type: PropType<import("../../composables/icons.js").IconValue>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: PropType<import("../../composables/icons.js").IconValue>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["nextIcon"] ? import("../../composables/icons.js").IconValue : Defaults["nextIcon"] | import("../../composables/icons.js").IconValue>;
|
||||
default: unknown extends Defaults["nextIcon"] ? import("../../composables/icons.js").IconValue : Defaults["nextIcon"] | NonNullable<import("../../composables/icons.js").IconValue>;
|
||||
};
|
||||
prevIcon: unknown extends Defaults["prevIcon"] ? {
|
||||
type: PropType<import("../../composables/icons.js").IconValue>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: PropType<import("../../composables/icons.js").IconValue>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["prevIcon"] ? import("../../composables/icons.js").IconValue : Defaults["prevIcon"] | import("../../composables/icons.js").IconValue>;
|
||||
default: unknown extends Defaults["prevIcon"] ? import("../../composables/icons.js").IconValue : Defaults["prevIcon"] | NonNullable<import("../../composables/icons.js").IconValue>;
|
||||
};
|
||||
showArrows: unknown extends Defaults["showArrows"] ? {
|
||||
type: (BooleanConstructor | StringConstructor)[];
|
||||
validator: (v: any) => boolean;
|
||||
} : Omit<{
|
||||
type: (BooleanConstructor | StringConstructor)[];
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["showArrows"] ? string | boolean : string | boolean | Defaults["showArrows"]>;
|
||||
default: unknown extends Defaults["showArrows"] ? string | boolean : Defaults["showArrows"] | NonNullable<string | boolean>;
|
||||
};
|
||||
sliderTransition: unknown extends Defaults["sliderTransition"] ? PropType<"fade" | "grow" | "shift"> : {
|
||||
type: PropType<unknown extends Defaults["sliderTransition"] ? "fade" | "grow" | "shift" : "fade" | "grow" | "shift" | Defaults["sliderTransition"]>;
|
||||
default: unknown extends Defaults["sliderTransition"] ? "fade" | "grow" | "shift" : Defaults["sliderTransition"] | NonNullable<"fade" | "grow" | "shift">;
|
||||
};
|
||||
sliderTransitionDuration: unknown extends Defaults["sliderTransitionDuration"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["sliderTransitionDuration"] ? string | number : string | number | Defaults["sliderTransitionDuration"]>;
|
||||
default: unknown extends Defaults["sliderTransitionDuration"] ? string | number : Defaults["sliderTransitionDuration"] | NonNullable<string | number>;
|
||||
};
|
||||
alignTabs: unknown extends Defaults["alignTabs"] ? {
|
||||
type: PropType<'start' | 'title' | 'center' | 'end'>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: PropType<'start' | 'title' | 'center' | 'end'>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["alignTabs"] ? "center" | "end" | "start" | "title" : "center" | "end" | "start" | "title" | Defaults["alignTabs"]>;
|
||||
default: unknown extends Defaults["alignTabs"] ? "center" | "end" | "start" | "title" : Defaults["alignTabs"] | NonNullable<"center" | "end" | "start" | "title">;
|
||||
};
|
||||
color: unknown extends Defaults["color"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["color"] ? string : string | Defaults["color"]>;
|
||||
default: unknown extends Defaults["color"] ? string : string | Defaults["color"];
|
||||
};
|
||||
fixedTabs: unknown extends Defaults["fixedTabs"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["fixedTabs"] ? boolean : boolean | Defaults["fixedTabs"]>;
|
||||
default: unknown extends Defaults["fixedTabs"] ? boolean : boolean | Defaults["fixedTabs"];
|
||||
};
|
||||
items: unknown extends Defaults["items"] ? {
|
||||
type: PropType<readonly TabItem[]>;
|
||||
default: () => never[];
|
||||
} : Omit<{
|
||||
type: PropType<readonly TabItem[]>;
|
||||
default: () => never[];
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["items"] ? readonly TabItem[] : readonly TabItem[] | Defaults["items"]>;
|
||||
default: unknown extends Defaults["items"] ? readonly TabItem[] : readonly TabItem[] | Defaults["items"];
|
||||
};
|
||||
stacked: unknown extends Defaults["stacked"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["stacked"] ? boolean : boolean | Defaults["stacked"]>;
|
||||
default: unknown extends Defaults["stacked"] ? boolean : boolean | Defaults["stacked"];
|
||||
};
|
||||
bgColor: unknown extends Defaults["bgColor"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["bgColor"] ? string : string | Defaults["bgColor"]>;
|
||||
default: unknown extends Defaults["bgColor"] ? string : string | Defaults["bgColor"];
|
||||
};
|
||||
grow: unknown extends Defaults["grow"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["grow"] ? boolean : boolean | Defaults["grow"]>;
|
||||
default: unknown extends Defaults["grow"] ? boolean : boolean | Defaults["grow"];
|
||||
};
|
||||
height: unknown extends Defaults["height"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["height"] ? string | number : string | number | Defaults["height"]>;
|
||||
default: unknown extends Defaults["height"] ? string | number : Defaults["height"] | NonNullable<string | number>;
|
||||
};
|
||||
hideSlider: unknown extends Defaults["hideSlider"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["hideSlider"] ? boolean : boolean | Defaults["hideSlider"]>;
|
||||
default: unknown extends Defaults["hideSlider"] ? boolean : boolean | Defaults["hideSlider"];
|
||||
};
|
||||
inset: unknown extends Defaults["inset"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["inset"] ? boolean : boolean | Defaults["inset"]>;
|
||||
default: unknown extends Defaults["inset"] ? boolean : boolean | Defaults["inset"];
|
||||
};
|
||||
insetPadding: unknown extends Defaults["insetPadding"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["insetPadding"] ? string | number : string | number | Defaults["insetPadding"]>;
|
||||
default: unknown extends Defaults["insetPadding"] ? string | number : Defaults["insetPadding"] | NonNullable<string | number>;
|
||||
};
|
||||
insetRadius: unknown extends Defaults["insetRadius"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["insetRadius"] ? string | number : string | number | Defaults["insetRadius"]>;
|
||||
default: unknown extends Defaults["insetRadius"] ? string | number : Defaults["insetRadius"] | NonNullable<string | number>;
|
||||
};
|
||||
sliderColor: unknown extends Defaults["sliderColor"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["sliderColor"] ? string : string | Defaults["sliderColor"]>;
|
||||
default: unknown extends Defaults["sliderColor"] ? string : string | Defaults["sliderColor"];
|
||||
};
|
||||
};
|
||||
export declare const VTabs: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
mobile: boolean | null;
|
||||
density: import("../../composables/density.js").Density;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
multiple: boolean;
|
||||
mandatory: "force" | boolean;
|
||||
selectedClass: string;
|
||||
disabled: boolean;
|
||||
centerActive: boolean;
|
||||
scrollToActive: boolean;
|
||||
direction: "horizontal" | "vertical";
|
||||
symbol: any;
|
||||
nextIcon: import("../../composables/icons.js").IconValue;
|
||||
prevIcon: import("../../composables/icons.js").IconValue;
|
||||
alignTabs: "center" | "end" | "start" | "title";
|
||||
fixedTabs: boolean;
|
||||
stacked: boolean;
|
||||
grow: boolean;
|
||||
hideSlider: boolean;
|
||||
inset: boolean;
|
||||
} & {
|
||||
class?: any;
|
||||
mobileBreakpoint?: number | import("../../types.js").DisplayBreakpoint | undefined;
|
||||
max?: number | undefined;
|
||||
spaced?: "both" | "end" | "start" | undefined;
|
||||
contentClass?: any;
|
||||
showArrows?: string | boolean | undefined;
|
||||
sliderTransition?: "fade" | "grow" | "shift" | undefined;
|
||||
sliderTransitionDuration?: string | number | undefined;
|
||||
color?: string | undefined;
|
||||
bgColor?: string | undefined;
|
||||
height?: string | number | undefined;
|
||||
insetPadding?: string | number | undefined;
|
||||
insetRadius?: string | number | undefined;
|
||||
sliderColor?: string | undefined;
|
||||
} & {}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Omit<{
|
||||
'update:modelValue': (v: unknown) => true;
|
||||
}, "$children" | "items" | "modelValue" | "update:modelValue" | "v-slot:default" | "v-slot:item" | "v-slot:next" | "v-slot:prev" | "v-slot:tab" | "v-slot:window" | "v-slots" | `v-slot:item.${string}` | `v-slot:tab.${string}`>, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
|
||||
style: import("vue").StyleValue;
|
||||
mobile: boolean | null;
|
||||
density: import("../../composables/density.js").Density;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
multiple: boolean;
|
||||
mandatory: "force" | boolean;
|
||||
selectedClass: string;
|
||||
disabled: boolean;
|
||||
centerActive: boolean;
|
||||
scrollToActive: boolean;
|
||||
direction: "horizontal" | "vertical";
|
||||
symbol: any;
|
||||
nextIcon: import("../../composables/icons.js").IconValue;
|
||||
prevIcon: import("../../composables/icons.js").IconValue;
|
||||
alignTabs: "center" | "end" | "start" | "title";
|
||||
fixedTabs: boolean;
|
||||
stacked: boolean;
|
||||
grow: boolean;
|
||||
height: string | number;
|
||||
hideSlider: boolean;
|
||||
inset: boolean;
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
[x: `tab.${string}`]: (arg: VTabsSlot<unknown>) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
[x: `item.${string}`]: (arg: VTabsSlot<unknown>) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
tab: (arg: VTabsSlot<unknown>) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
item: (arg: VTabsSlot<unknown>) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
window: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
prev: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
next: () => 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;
|
||||
mobile: boolean | null;
|
||||
density: import("../../composables/density.js").Density;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
multiple: boolean;
|
||||
mandatory: "force" | boolean;
|
||||
selectedClass: string;
|
||||
disabled: boolean;
|
||||
centerActive: boolean;
|
||||
scrollToActive: boolean;
|
||||
direction: "horizontal" | "vertical";
|
||||
symbol: any;
|
||||
nextIcon: import("../../composables/icons.js").IconValue;
|
||||
prevIcon: import("../../composables/icons.js").IconValue;
|
||||
alignTabs: "center" | "end" | "start" | "title";
|
||||
fixedTabs: boolean;
|
||||
stacked: boolean;
|
||||
grow: boolean;
|
||||
hideSlider: boolean;
|
||||
inset: boolean;
|
||||
} & {
|
||||
class?: any;
|
||||
mobileBreakpoint?: number | import("../../types.js").DisplayBreakpoint | undefined;
|
||||
max?: number | undefined;
|
||||
spaced?: "both" | "end" | "start" | undefined;
|
||||
contentClass?: any;
|
||||
showArrows?: string | boolean | undefined;
|
||||
sliderTransition?: "fade" | "grow" | "shift" | undefined;
|
||||
sliderTransitionDuration?: string | number | undefined;
|
||||
color?: string | undefined;
|
||||
bgColor?: string | undefined;
|
||||
height?: string | number | undefined;
|
||||
insetPadding?: string | number | undefined;
|
||||
insetRadius?: string | number | undefined;
|
||||
sliderColor?: string | undefined;
|
||||
} & {}, {}, {}, {}, {}, {
|
||||
style: import("vue").StyleValue;
|
||||
mobile: boolean | null;
|
||||
density: import("../../composables/density.js").Density;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
multiple: boolean;
|
||||
mandatory: "force" | boolean;
|
||||
selectedClass: string;
|
||||
disabled: boolean;
|
||||
centerActive: boolean;
|
||||
scrollToActive: boolean;
|
||||
direction: "horizontal" | "vertical";
|
||||
symbol: any;
|
||||
nextIcon: import("../../composables/icons.js").IconValue;
|
||||
prevIcon: import("../../composables/icons.js").IconValue;
|
||||
alignTabs: "center" | "end" | "start" | "title";
|
||||
fixedTabs: boolean;
|
||||
stacked: boolean;
|
||||
grow: boolean;
|
||||
height: string | number;
|
||||
hideSlider: boolean;
|
||||
inset: boolean;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
mobile: boolean | null;
|
||||
density: import("../../composables/density.js").Density;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
multiple: boolean;
|
||||
mandatory: "force" | boolean;
|
||||
selectedClass: string;
|
||||
disabled: boolean;
|
||||
centerActive: boolean;
|
||||
scrollToActive: boolean;
|
||||
direction: "horizontal" | "vertical";
|
||||
symbol: any;
|
||||
nextIcon: import("../../composables/icons.js").IconValue;
|
||||
prevIcon: import("../../composables/icons.js").IconValue;
|
||||
alignTabs: "center" | "end" | "start" | "title";
|
||||
fixedTabs: boolean;
|
||||
stacked: boolean;
|
||||
grow: boolean;
|
||||
hideSlider: boolean;
|
||||
inset: boolean;
|
||||
} & {
|
||||
class?: any;
|
||||
mobileBreakpoint?: number | import("../../types.js").DisplayBreakpoint | undefined;
|
||||
max?: number | undefined;
|
||||
spaced?: "both" | "end" | "start" | undefined;
|
||||
contentClass?: any;
|
||||
showArrows?: string | boolean | undefined;
|
||||
sliderTransition?: "fade" | "grow" | "shift" | undefined;
|
||||
sliderTransitionDuration?: string | number | undefined;
|
||||
color?: string | undefined;
|
||||
bgColor?: string | undefined;
|
||||
height?: string | number | undefined;
|
||||
insetPadding?: string | number | undefined;
|
||||
insetRadius?: string | number | undefined;
|
||||
sliderColor?: string | undefined;
|
||||
} & {}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Omit<{
|
||||
'update:modelValue': (v: unknown) => true;
|
||||
}, "$children" | "items" | "modelValue" | "update:modelValue" | "v-slot:default" | "v-slot:item" | "v-slot:next" | "v-slot:prev" | "v-slot:tab" | "v-slot:window" | "v-slots" | `v-slot:item.${string}` | `v-slot:tab.${string}`>, string, {
|
||||
style: import("vue").StyleValue;
|
||||
mobile: boolean | null;
|
||||
density: import("../../composables/density.js").Density;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
multiple: boolean;
|
||||
mandatory: "force" | boolean;
|
||||
selectedClass: string;
|
||||
disabled: boolean;
|
||||
centerActive: boolean;
|
||||
scrollToActive: boolean;
|
||||
direction: "horizontal" | "vertical";
|
||||
symbol: any;
|
||||
nextIcon: import("../../composables/icons.js").IconValue;
|
||||
prevIcon: import("../../composables/icons.js").IconValue;
|
||||
alignTabs: "center" | "end" | "start" | "title";
|
||||
fixedTabs: boolean;
|
||||
stacked: boolean;
|
||||
grow: boolean;
|
||||
height: string | number;
|
||||
hideSlider: boolean;
|
||||
inset: boolean;
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
[x: `tab.${string}`]: (arg: VTabsSlot<unknown>) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
[x: `item.${string}`]: (arg: VTabsSlot<unknown>) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
tab: (arg: VTabsSlot<unknown>) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
item: (arg: VTabsSlot<unknown>) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
window: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
prev: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
next: () => 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 & (new <TModel, T = TabItem>(props: {
|
||||
items?: T[];
|
||||
modelValue?: TModel;
|
||||
'onUpdate:modelValue'?: (value: TModel) => void;
|
||||
}, slots: VTabsSlots<T>) => GenericProps<typeof props, typeof slots>) & import("../../util/index.js").FilterPropsOptions<{
|
||||
class: PropType<import("../../composables/component.js").ClassValue>;
|
||||
style: {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
mobile: Omit<{
|
||||
type: PropType<boolean | null>;
|
||||
default: boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<boolean | null>;
|
||||
default: NonNullable<boolean | null> | null;
|
||||
};
|
||||
mobileBreakpoint: PropType<number | import("../../types.js").DisplayBreakpoint>;
|
||||
density: {
|
||||
type: PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
tag: {
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
};
|
||||
modelValue: {
|
||||
type: null;
|
||||
default: undefined;
|
||||
};
|
||||
multiple: BooleanConstructor;
|
||||
mandatory: {
|
||||
type: PropType<"force" | boolean>;
|
||||
default: NonNullable<"force" | boolean>;
|
||||
};
|
||||
max: NumberConstructor;
|
||||
selectedClass: Omit<{
|
||||
type: PropType<string>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<string>;
|
||||
default: string;
|
||||
};
|
||||
disabled: BooleanConstructor;
|
||||
spaced: PropType<'start' | 'end' | 'both'>;
|
||||
centerActive: BooleanConstructor;
|
||||
scrollToActive: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
contentClass: null;
|
||||
direction: {
|
||||
type: PropType<'horizontal' | 'vertical'>;
|
||||
default: string;
|
||||
};
|
||||
symbol: {
|
||||
type: null;
|
||||
default: import("vue").InjectionKey<import("../../composables/group.js").GroupProvide>;
|
||||
};
|
||||
nextIcon: {
|
||||
type: PropType<import("../../composables/icons.js").IconValue>;
|
||||
default: string;
|
||||
};
|
||||
prevIcon: {
|
||||
type: PropType<import("../../composables/icons.js").IconValue>;
|
||||
default: string;
|
||||
};
|
||||
showArrows: {
|
||||
type: (BooleanConstructor | StringConstructor)[];
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
sliderTransition: PropType<'shift' | 'grow' | 'fade'>;
|
||||
sliderTransitionDuration: (NumberConstructor | StringConstructor)[];
|
||||
alignTabs: {
|
||||
type: PropType<'start' | 'title' | 'center' | 'end'>;
|
||||
default: string;
|
||||
};
|
||||
color: StringConstructor;
|
||||
fixedTabs: BooleanConstructor;
|
||||
items: {
|
||||
type: PropType<readonly TabItem[]>;
|
||||
default: () => never[];
|
||||
};
|
||||
stacked: BooleanConstructor;
|
||||
bgColor: StringConstructor;
|
||||
grow: BooleanConstructor;
|
||||
height: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
hideSlider: BooleanConstructor;
|
||||
inset: BooleanConstructor;
|
||||
insetPadding: (NumberConstructor | StringConstructor)[];
|
||||
insetRadius: (NumberConstructor | StringConstructor)[];
|
||||
sliderColor: StringConstructor;
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
class: PropType<import("../../composables/component.js").ClassValue>;
|
||||
style: {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
mobile: Omit<{
|
||||
type: PropType<boolean | null>;
|
||||
default: boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<boolean | null>;
|
||||
default: NonNullable<boolean | null> | null;
|
||||
};
|
||||
mobileBreakpoint: PropType<number | import("../../types.js").DisplayBreakpoint>;
|
||||
density: {
|
||||
type: PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
tag: {
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
};
|
||||
modelValue: {
|
||||
type: null;
|
||||
default: undefined;
|
||||
};
|
||||
multiple: BooleanConstructor;
|
||||
mandatory: {
|
||||
type: PropType<"force" | boolean>;
|
||||
default: NonNullable<"force" | boolean>;
|
||||
};
|
||||
max: NumberConstructor;
|
||||
selectedClass: Omit<{
|
||||
type: PropType<string>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<string>;
|
||||
default: string;
|
||||
};
|
||||
disabled: BooleanConstructor;
|
||||
spaced: PropType<'start' | 'end' | 'both'>;
|
||||
centerActive: BooleanConstructor;
|
||||
scrollToActive: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
contentClass: null;
|
||||
direction: {
|
||||
type: PropType<'horizontal' | 'vertical'>;
|
||||
default: string;
|
||||
};
|
||||
symbol: {
|
||||
type: null;
|
||||
default: import("vue").InjectionKey<import("../../composables/group.js").GroupProvide>;
|
||||
};
|
||||
nextIcon: {
|
||||
type: PropType<import("../../composables/icons.js").IconValue>;
|
||||
default: string;
|
||||
};
|
||||
prevIcon: {
|
||||
type: PropType<import("../../composables/icons.js").IconValue>;
|
||||
default: string;
|
||||
};
|
||||
showArrows: {
|
||||
type: (BooleanConstructor | StringConstructor)[];
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
sliderTransition: PropType<'shift' | 'grow' | 'fade'>;
|
||||
sliderTransitionDuration: (NumberConstructor | StringConstructor)[];
|
||||
alignTabs: {
|
||||
type: PropType<'start' | 'title' | 'center' | 'end'>;
|
||||
default: string;
|
||||
};
|
||||
color: StringConstructor;
|
||||
fixedTabs: BooleanConstructor;
|
||||
items: {
|
||||
type: PropType<readonly TabItem[]>;
|
||||
default: () => never[];
|
||||
};
|
||||
stacked: BooleanConstructor;
|
||||
bgColor: StringConstructor;
|
||||
grow: BooleanConstructor;
|
||||
height: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
hideSlider: BooleanConstructor;
|
||||
inset: BooleanConstructor;
|
||||
insetPadding: (NumberConstructor | StringConstructor)[];
|
||||
insetRadius: (NumberConstructor | StringConstructor)[];
|
||||
sliderColor: StringConstructor;
|
||||
}>>;
|
||||
export type VTabs = InstanceType<typeof VTabs>;
|
||||
+147
@@ -0,0 +1,147 @@
|
||||
import { Fragment as _Fragment, mergeProps as _mergeProps, createVNode as _createVNode, createElementVNode as _createElementVNode } from "vue";
|
||||
// Styles
|
||||
import "./VTabs.css";
|
||||
|
||||
// Components
|
||||
import { makeVTabProps, VTab } from "./VTab.js";
|
||||
import { VTabsWindow } from "./VTabsWindow.js";
|
||||
import { VTabsWindowItem } from "./VTabsWindowItem.js";
|
||||
import { makeVSlideGroupProps, VSlideGroup } from "../VSlideGroup/VSlideGroup.js"; // Composables
|
||||
import { useBackgroundColor } from "../../composables/color.js";
|
||||
import { provideDefaults } from "../../composables/defaults.js";
|
||||
import { makeDensityProps, useDensity } from "../../composables/density.js";
|
||||
import { useProxiedModel } from "../../composables/proxiedModel.js";
|
||||
import { useScopeId } from "../../composables/scopeId.js";
|
||||
import { makeTagProps } from "../../composables/tag.js"; // Utilities
|
||||
import { computed, toRef } from 'vue';
|
||||
import { VTabsSymbol } from "./shared.js";
|
||||
import { convertToUnit, genericComponent, isObject, pick, propsFactory, useRender } from "../../util/index.js"; // Types
|
||||
function parseItems(items) {
|
||||
if (!items) return [];
|
||||
return items.map(item => {
|
||||
if (!isObject(item)) return {
|
||||
text: item,
|
||||
value: item
|
||||
};
|
||||
return item;
|
||||
});
|
||||
}
|
||||
export const makeVTabsProps = propsFactory({
|
||||
alignTabs: {
|
||||
type: String,
|
||||
default: 'start'
|
||||
},
|
||||
color: String,
|
||||
fixedTabs: Boolean,
|
||||
items: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
stacked: Boolean,
|
||||
bgColor: String,
|
||||
grow: Boolean,
|
||||
height: {
|
||||
type: [Number, String],
|
||||
default: undefined
|
||||
},
|
||||
hideSlider: Boolean,
|
||||
inset: Boolean,
|
||||
insetPadding: [String, Number],
|
||||
insetRadius: [String, Number],
|
||||
sliderColor: String,
|
||||
...pick(makeVTabProps(), ['spaced', 'sliderTransition', 'sliderTransitionDuration']),
|
||||
...makeVSlideGroupProps({
|
||||
mandatory: 'force',
|
||||
selectedClass: 'v-tab-item--selected'
|
||||
}),
|
||||
...makeDensityProps(),
|
||||
...makeTagProps()
|
||||
}, 'VTabs');
|
||||
export const VTabs = genericComponent()({
|
||||
name: 'VTabs',
|
||||
props: makeVTabsProps(),
|
||||
emits: {
|
||||
'update:modelValue': v => true
|
||||
},
|
||||
setup(props, {
|
||||
attrs,
|
||||
slots
|
||||
}) {
|
||||
const model = useProxiedModel(props, 'modelValue');
|
||||
const items = computed(() => parseItems(props.items));
|
||||
const {
|
||||
densityClasses
|
||||
} = useDensity(props);
|
||||
const {
|
||||
backgroundColorClasses,
|
||||
backgroundColorStyles
|
||||
} = useBackgroundColor(() => props.bgColor);
|
||||
const {
|
||||
scopeId
|
||||
} = useScopeId();
|
||||
provideDefaults({
|
||||
VTab: {
|
||||
color: toRef(props, 'color'),
|
||||
direction: toRef(props, 'direction'),
|
||||
stacked: toRef(props, 'stacked'),
|
||||
fixed: toRef(props, 'fixedTabs'),
|
||||
inset: toRef(props, 'inset'),
|
||||
sliderColor: toRef(props, 'sliderColor'),
|
||||
sliderTransition: toRef(props, 'sliderTransition'),
|
||||
sliderTransitionDuration: toRef(props, 'sliderTransitionDuration'),
|
||||
hideSlider: toRef(props, 'hideSlider')
|
||||
}
|
||||
});
|
||||
useRender(() => {
|
||||
const slideGroupProps = VSlideGroup.filterProps(props);
|
||||
const hasWindow = !!(slots.window || props.items.length > 0);
|
||||
return _createElementVNode(_Fragment, null, [_createVNode(VSlideGroup, _mergeProps(slideGroupProps, {
|
||||
"modelValue": model.value,
|
||||
"onUpdate:modelValue": $event => model.value = $event,
|
||||
"class": ['v-tabs', `v-tabs--${props.direction}`, `v-tabs--align-tabs-${props.alignTabs}`, {
|
||||
'v-tabs--fixed-tabs': props.fixedTabs,
|
||||
'v-tabs--grow': props.grow,
|
||||
'v-tabs--inset': props.inset,
|
||||
'v-tabs--stacked': props.stacked
|
||||
}, densityClasses.value, backgroundColorClasses.value, props.class],
|
||||
"style": [{
|
||||
'--v-tabs-height': convertToUnit(props.height),
|
||||
'--v-tabs-inset-padding': props.inset ? convertToUnit(props.insetPadding) : undefined,
|
||||
'--v-tabs-inset-radius': props.inset ? convertToUnit(props.insetRadius) : undefined
|
||||
}, backgroundColorStyles.value, props.style],
|
||||
"role": "tablist",
|
||||
"symbol": VTabsSymbol
|
||||
}, scopeId, attrs), {
|
||||
default: slots.default ?? (() => items.value.map(item => slots.tab?.({
|
||||
item
|
||||
}) ?? _createVNode(VTab, _mergeProps(item, {
|
||||
"key": item.text,
|
||||
"value": item.value,
|
||||
"spaced": props.spaced
|
||||
}), {
|
||||
default: slots[`tab.${item.value}`] ? () => slots[`tab.${item.value}`]?.({
|
||||
item
|
||||
}) : undefined
|
||||
}))),
|
||||
prev: slots.prev,
|
||||
next: slots.next
|
||||
}), hasWindow && _createVNode(VTabsWindow, _mergeProps({
|
||||
"modelValue": model.value,
|
||||
"onUpdate:modelValue": $event => model.value = $event,
|
||||
"key": "tabs-window"
|
||||
}, scopeId), {
|
||||
default: () => [items.value.map(item => slots.item?.({
|
||||
item
|
||||
}) ?? _createVNode(VTabsWindowItem, {
|
||||
"value": item.value
|
||||
}, {
|
||||
default: () => slots[`item.${item.value}`]?.({
|
||||
item
|
||||
})
|
||||
})), slots.window?.()]
|
||||
})]);
|
||||
});
|
||||
return {};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VTabs.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+109
@@ -0,0 +1,109 @@
|
||||
@use 'sass:math'
|
||||
@use 'sass:map'
|
||||
@use '../../styles/settings'
|
||||
@use '../../styles/tools'
|
||||
@use './variables' as *
|
||||
|
||||
@include tools.layer('components')
|
||||
.v-tabs
|
||||
display: flex
|
||||
height: var(--v-tabs-height)
|
||||
|
||||
@at-root
|
||||
@include tools.density('v-tabs', $tabs-density) using ($modifier)
|
||||
--v-tabs-height: #{$tabs-height + $modifier}
|
||||
|
||||
&.v-tabs--stacked
|
||||
--v-tabs-height: #{$tabs-stacked-height + $modifier}
|
||||
|
||||
&.v-slide-group--vertical
|
||||
height: auto
|
||||
flex: none
|
||||
--v-tabs-height: #{$tabs-height}
|
||||
|
||||
.v-tabs--align-tabs-title:not(.v-slide-group--has-affixes)
|
||||
.v-tab:first-child
|
||||
margin-inline-start: $tab-align-tabs-title-margin
|
||||
|
||||
.v-tabs--fixed-tabs,
|
||||
.v-tabs--align-tabs-center
|
||||
.v-slide-group__content > *:last-child
|
||||
margin-inline-end: auto
|
||||
|
||||
.v-slide-group__content > *:first-child
|
||||
margin-inline-start: auto
|
||||
|
||||
.v-tabs--grow
|
||||
flex-grow: 1
|
||||
|
||||
.v-tab
|
||||
flex: 1 0 auto
|
||||
max-width: none
|
||||
|
||||
.v-tabs--align-tabs-end
|
||||
.v-tab:first-child
|
||||
margin-inline-start: auto
|
||||
|
||||
.v-tab:last-child
|
||||
margin-inline-end: 0
|
||||
|
||||
.v-tabs--inset
|
||||
--v-tabs-inset-radius: #{$tab-inset-radius}
|
||||
--v-tabs-inset-padding: #{$tab-inset-padding}
|
||||
--v-tabs-slider-background: rgba(var(--v-theme-on-surface), .2)
|
||||
|
||||
background: tools.theme-color('on-surface', 0.06)
|
||||
box-shadow: inset 0 0 0 2px rgba(var(--v-border-color), var(--v-border-opacity))
|
||||
border-radius: calc(var(--v-tabs-inset-radius) + var(--v-tabs-inset-padding))
|
||||
|
||||
.v-tab
|
||||
margin: var(--v-tabs-inset-padding)
|
||||
transition-property: box-shadow, transform, opacity, background, color
|
||||
|
||||
&.v-tab.v-btn
|
||||
border-radius: var(--v-tabs-inset-radius)
|
||||
|
||||
&:focus-visible
|
||||
outline: 2px solid rgb(var(--v-border-color))
|
||||
outline-offset: 2px
|
||||
|
||||
&:after
|
||||
opacity: 0
|
||||
|
||||
&:not(.v-tabs--fixed-tabs, .v-tabs--grow)
|
||||
max-width: max-content
|
||||
|
||||
&.v-tabs--fixed-tabs .v-slide-group__content
|
||||
padding-inline: var(--v-tabs-inset-padding)
|
||||
|
||||
.v-tab__slider
|
||||
background: var(--v-tabs-slider-background)
|
||||
inset: 0
|
||||
border-radius: var(--v-tabs-inset-radius)
|
||||
z-index: -1
|
||||
width: auto
|
||||
|
||||
&.v-tabs--horizontal
|
||||
height: calc(var(--v-tabs-height) + var(--v-tabs-inset-padding) * 2)
|
||||
--v-tabs-inset-tab-radius: calc(var(--v-tabs-outer-radius) - var(--v-tabs-inset-padding) + 4px)
|
||||
|
||||
&.v-tabs--horizontal .v-tab__slider
|
||||
height: auto
|
||||
|
||||
.v-btn__overlay
|
||||
display: none
|
||||
|
||||
&.v-tabs--vertical .v-tab
|
||||
grid-template-columns: max-content 1fr max-content
|
||||
> .v-btn__content
|
||||
justify-content: start
|
||||
|
||||
.v-tab__slider
|
||||
width: auto
|
||||
|
||||
@media #{map.get(settings.$display-breakpoints, 'md-and-down')}
|
||||
.v-tabs.v-slide-group--is-overflowing.v-slide-group--horizontal:not(.v-slide-group--has-affixes)
|
||||
.v-tab:first-child
|
||||
margin-inline-start: 52px
|
||||
.v-tab:last-child
|
||||
margin-inline-end: 52px
|
||||
+285
@@ -0,0 +1,285 @@
|
||||
import type { VWindowSlots } from '../VWindow/VWindow.js';
|
||||
import type { GenericProps } from '../../util/index.js';
|
||||
export declare const makeVTabsWindowProps: <Defaults extends {
|
||||
theme?: unknown;
|
||||
class?: unknown;
|
||||
style?: unknown;
|
||||
tag?: unknown;
|
||||
reverse?: unknown;
|
||||
verticalArrows?: unknown;
|
||||
direction?: unknown;
|
||||
modelValue?: unknown;
|
||||
disabled?: unknown;
|
||||
selectedClass?: unknown;
|
||||
crossfade?: unknown;
|
||||
transitionDuration?: 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>;
|
||||
};
|
||||
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>;
|
||||
};
|
||||
reverse: unknown extends Defaults["reverse"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["reverse"] ? boolean : boolean | Defaults["reverse"]>;
|
||||
default: unknown extends Defaults["reverse"] ? boolean : boolean | Defaults["reverse"];
|
||||
};
|
||||
verticalArrows: unknown extends Defaults["verticalArrows"] ? import("vue").PropType<"left" | "right" | boolean> : {
|
||||
type: import("vue").PropType<unknown extends Defaults["verticalArrows"] ? "left" | "right" | boolean : "left" | "right" | boolean | Defaults["verticalArrows"]>;
|
||||
default: unknown extends Defaults["verticalArrows"] ? "left" | "right" | boolean : Defaults["verticalArrows"] | NonNullable<"left" | "right" | boolean>;
|
||||
};
|
||||
direction: unknown extends Defaults["direction"] ? {
|
||||
type: import("vue").PropType<"horizontal" | "vertical">;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<"horizontal" | "vertical">;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["direction"] ? "horizontal" | "vertical" : "horizontal" | "vertical" | Defaults["direction"]>;
|
||||
default: unknown extends Defaults["direction"] ? "horizontal" | "vertical" : Defaults["direction"] | NonNullable<"horizontal" | "vertical">;
|
||||
};
|
||||
modelValue: unknown extends Defaults["modelValue"] ? null : {
|
||||
type: import("vue").PropType<unknown extends Defaults["modelValue"] ? any : any>;
|
||||
default: unknown extends Defaults["modelValue"] ? any : any;
|
||||
};
|
||||
disabled: unknown extends Defaults["disabled"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["disabled"] ? boolean : boolean | Defaults["disabled"]>;
|
||||
default: unknown extends Defaults["disabled"] ? boolean : boolean | Defaults["disabled"];
|
||||
};
|
||||
selectedClass: unknown extends Defaults["selectedClass"] ? {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["selectedClass"] ? string : string | Defaults["selectedClass"]>;
|
||||
default: unknown extends Defaults["selectedClass"] ? string : string | Defaults["selectedClass"];
|
||||
};
|
||||
crossfade: unknown extends Defaults["crossfade"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["crossfade"] ? boolean : boolean | Defaults["crossfade"]>;
|
||||
default: unknown extends Defaults["crossfade"] ? boolean : boolean | Defaults["crossfade"];
|
||||
};
|
||||
transitionDuration: unknown extends Defaults["transitionDuration"] ? NumberConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["transitionDuration"] ? number : number | Defaults["transitionDuration"]>;
|
||||
default: unknown extends Defaults["transitionDuration"] ? number : number | Defaults["transitionDuration"];
|
||||
};
|
||||
};
|
||||
export declare const VTabsWindow: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
reverse: boolean;
|
||||
direction: "horizontal" | "vertical";
|
||||
disabled: boolean;
|
||||
selectedClass: string;
|
||||
crossfade: boolean;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
verticalArrows?: "left" | "right" | boolean | undefined;
|
||||
transitionDuration?: number | undefined;
|
||||
} & {}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Omit<{
|
||||
'update:modelValue': (v: any) => true;
|
||||
}, "$children" | "modelValue" | "update:modelValue" | "v-slot:additional" | "v-slot:default" | "v-slot:next" | "v-slot:prev" | "v-slots">, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
|
||||
style: import("vue").StyleValue;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
reverse: boolean;
|
||||
direction: "horizontal" | "vertical";
|
||||
disabled: boolean;
|
||||
selectedClass: string;
|
||||
crossfade: boolean;
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
default: (arg: {
|
||||
group: import("../../composables/group.js").GroupProvide;
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
additional: (arg: {
|
||||
group: import("../../composables/group.js").GroupProvide;
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
prev: (arg: {
|
||||
props: {
|
||||
icon: import("../../composables/icons.js").IconValue;
|
||||
class: string;
|
||||
onClick: () => void;
|
||||
'aria-label': string;
|
||||
};
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
next: (arg: {
|
||||
props: {
|
||||
icon: import("../../composables/icons.js").IconValue;
|
||||
class: string;
|
||||
onClick: () => void;
|
||||
'aria-label': string;
|
||||
};
|
||||
}) => 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;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
reverse: boolean;
|
||||
direction: "horizontal" | "vertical";
|
||||
disabled: boolean;
|
||||
selectedClass: string;
|
||||
crossfade: boolean;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
verticalArrows?: "left" | "right" | boolean | undefined;
|
||||
transitionDuration?: number | undefined;
|
||||
} & {}, {}, {}, {}, {}, {
|
||||
style: import("vue").StyleValue;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
reverse: boolean;
|
||||
direction: "horizontal" | "vertical";
|
||||
disabled: boolean;
|
||||
selectedClass: string;
|
||||
crossfade: boolean;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
reverse: boolean;
|
||||
direction: "horizontal" | "vertical";
|
||||
disabled: boolean;
|
||||
selectedClass: string;
|
||||
crossfade: boolean;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
verticalArrows?: "left" | "right" | boolean | undefined;
|
||||
transitionDuration?: number | undefined;
|
||||
} & {}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Omit<{
|
||||
'update:modelValue': (v: any) => true;
|
||||
}, "$children" | "modelValue" | "update:modelValue" | "v-slot:additional" | "v-slot:default" | "v-slot:next" | "v-slot:prev" | "v-slots">, string, {
|
||||
style: import("vue").StyleValue;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
reverse: boolean;
|
||||
direction: "horizontal" | "vertical";
|
||||
disabled: boolean;
|
||||
selectedClass: string;
|
||||
crossfade: boolean;
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
default: (arg: {
|
||||
group: import("../../composables/group.js").GroupProvide;
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
additional: (arg: {
|
||||
group: import("../../composables/group.js").GroupProvide;
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
prev: (arg: {
|
||||
props: {
|
||||
icon: import("../../composables/icons.js").IconValue;
|
||||
class: string;
|
||||
onClick: () => void;
|
||||
'aria-label': string;
|
||||
};
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
next: (arg: {
|
||||
props: {
|
||||
icon: import("../../composables/icons.js").IconValue;
|
||||
class: string;
|
||||
onClick: () => void;
|
||||
'aria-label': string;
|
||||
};
|
||||
}) => 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 & (new <TModel>(props: {
|
||||
modelValue?: TModel;
|
||||
'onUpdate:modelValue'?: (value: TModel) => void;
|
||||
}, slots: VWindowSlots) => GenericProps<typeof props, typeof slots>) & import("../../util/index.js").FilterPropsOptions<{
|
||||
theme: StringConstructor;
|
||||
class: import("vue").PropType<any>;
|
||||
style: {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
tag: {
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
};
|
||||
reverse: BooleanConstructor;
|
||||
verticalArrows: import("vue").PropType<"left" | "right" | boolean>;
|
||||
direction: {
|
||||
type: import("vue").PropType<"horizontal" | "vertical">;
|
||||
default: string;
|
||||
};
|
||||
modelValue: null;
|
||||
disabled: BooleanConstructor;
|
||||
selectedClass: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
crossfade: BooleanConstructor;
|
||||
transitionDuration: NumberConstructor;
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
theme: StringConstructor;
|
||||
class: import("vue").PropType<any>;
|
||||
style: {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
tag: {
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
};
|
||||
reverse: BooleanConstructor;
|
||||
verticalArrows: import("vue").PropType<"left" | "right" | boolean>;
|
||||
direction: {
|
||||
type: import("vue").PropType<"horizontal" | "vertical">;
|
||||
default: string;
|
||||
};
|
||||
modelValue: null;
|
||||
disabled: BooleanConstructor;
|
||||
selectedClass: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
crossfade: BooleanConstructor;
|
||||
transitionDuration: NumberConstructor;
|
||||
}>>;
|
||||
export type VTabsWindow = InstanceType<typeof VTabsWindow>;
|
||||
+52
@@ -0,0 +1,52 @@
|
||||
import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
|
||||
// Components
|
||||
import { makeVWindowProps, VWindow } from "../VWindow/VWindow.js"; // Composables
|
||||
import { useProxiedModel } from "../../composables/proxiedModel.js"; // Utilities
|
||||
import { computed, inject } from 'vue';
|
||||
import { genericComponent, omit, propsFactory, useRender } from "../../util/index.js"; // Types
|
||||
import { VTabsSymbol } from "./shared.js";
|
||||
export const makeVTabsWindowProps = propsFactory({
|
||||
...omit(makeVWindowProps(), ['continuous', 'nextIcon', 'prevIcon', 'showArrows', 'touch', 'mandatory'])
|
||||
}, 'VTabsWindow');
|
||||
export const VTabsWindow = genericComponent()({
|
||||
name: 'VTabsWindow',
|
||||
props: makeVTabsWindowProps(),
|
||||
emits: {
|
||||
'update:modelValue': v => true
|
||||
},
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
const group = inject(VTabsSymbol, null);
|
||||
const _model = useProxiedModel(props, 'modelValue');
|
||||
const model = computed({
|
||||
get() {
|
||||
// Always return modelValue if defined
|
||||
// or if not within a VTabs group
|
||||
if (_model.value != null || !group) return _model.value;
|
||||
|
||||
// If inside of a VTabs, find the currently selected
|
||||
// item by id. Item value may be assigned by its index
|
||||
return group.items.value.find(item => group.selected.value.includes(item.id))?.value;
|
||||
},
|
||||
set(val) {
|
||||
_model.value = val;
|
||||
}
|
||||
});
|
||||
useRender(() => {
|
||||
const windowProps = VWindow.filterProps(props);
|
||||
return _createVNode(VWindow, _mergeProps({
|
||||
"_as": "VTabsWindow"
|
||||
}, windowProps, {
|
||||
"modelValue": model.value,
|
||||
"onUpdate:modelValue": $event => model.value = $event,
|
||||
"class": ['v-tabs-window', props.class],
|
||||
"style": props.style,
|
||||
"mandatory": false,
|
||||
"touch": false
|
||||
}), slots);
|
||||
});
|
||||
return {};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VTabsWindow.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"VTabsWindow.js","names":["makeVWindowProps","VWindow","useProxiedModel","computed","inject","genericComponent","omit","propsFactory","useRender","VTabsSymbol","makeVTabsWindowProps","VTabsWindow","name","props","emits","v","setup","slots","group","_model","model","get","value","items","find","item","selected","includes","id","set","val","windowProps","filterProps","_createVNode","_mergeProps","$event","class","style"],"sources":["../../../src/components/VTabs/VTabsWindow.tsx"],"sourcesContent":["// Components\nimport { makeVWindowProps, VWindow } from '@/components/VWindow/VWindow'\n\n// Composables\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { computed, inject } from 'vue'\nimport { genericComponent, omit, propsFactory, useRender } from '@/util'\n\n// Types\nimport { VTabsSymbol } from './shared'\nimport type { VWindowSlots } from '@/components/VWindow/VWindow'\nimport type { GenericProps } from '@/util'\n\nexport const makeVTabsWindowProps = propsFactory({\n ...omit(makeVWindowProps(), ['continuous', 'nextIcon', 'prevIcon', 'showArrows', 'touch', 'mandatory']),\n}, 'VTabsWindow')\n\nexport const VTabsWindow = genericComponent<new <TModel>(\n props: {\n modelValue?: TModel\n 'onUpdate:modelValue'?: (value: TModel) => void\n },\n slots: VWindowSlots\n) => GenericProps<typeof props, typeof slots>>()({\n name: 'VTabsWindow',\n\n props: makeVTabsWindowProps(),\n\n emits: {\n 'update:modelValue': (v: any) => true,\n },\n\n setup (props, { slots }) {\n const group = inject(VTabsSymbol, null)\n const _model = useProxiedModel(props, 'modelValue')\n\n const model = computed({\n get () {\n // Always return modelValue if defined\n // or if not within a VTabs group\n if (_model.value != null || !group) return _model.value\n\n // If inside of a VTabs, find the currently selected\n // item by id. Item value may be assigned by its index\n return group.items.value.find(item => group.selected.value.includes(item.id))?.value\n },\n set (val) {\n _model.value = val\n },\n })\n\n useRender(() => {\n const windowProps = VWindow.filterProps(props)\n\n return (\n <VWindow\n _as=\"VTabsWindow\"\n { ...windowProps }\n v-model={ model.value }\n class={[\n 'v-tabs-window',\n props.class,\n ]}\n style={ props.style }\n mandatory={ false }\n touch={ false }\n v-slots={ slots }\n />\n )\n })\n\n return {}\n },\n})\n\nexport type VTabsWindow = InstanceType<typeof VTabsWindow>\n"],"mappings":";AAAA;AAAA,SACSA,gBAAgB,EAAEC,OAAO,iCAElC;AAAA,SACSC,eAAe,6CAExB;AACA,SAASC,QAAQ,EAAEC,MAAM,QAAQ,KAAK;AAAA,SAC7BC,gBAAgB,EAAEC,IAAI,EAAEC,YAAY,EAAEC,SAAS,+BAExD;AAAA,SACSC,WAAW;AAIpB,OAAO,MAAMC,oBAAoB,GAAGH,YAAY,CAAC;EAC/C,GAAGD,IAAI,CAACN,gBAAgB,CAAC,CAAC,EAAE,CAAC,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,YAAY,EAAE,OAAO,EAAE,WAAW,CAAC;AACxG,CAAC,EAAE,aAAa,CAAC;AAEjB,OAAO,MAAMW,WAAW,GAAGN,gBAAgB,CAMI,CAAC,CAAC;EAC/CO,IAAI,EAAE,aAAa;EAEnBC,KAAK,EAAEH,oBAAoB,CAAC,CAAC;EAE7BI,KAAK,EAAE;IACL,mBAAmB,EAAGC,CAAM,IAAK;EACnC,CAAC;EAEDC,KAAKA,CAAEH,KAAK,EAAE;IAAEI;EAAM,CAAC,EAAE;IACvB,MAAMC,KAAK,GAAGd,MAAM,CAACK,WAAW,EAAE,IAAI,CAAC;IACvC,MAAMU,MAAM,GAAGjB,eAAe,CAACW,KAAK,EAAE,YAAY,CAAC;IAEnD,MAAMO,KAAK,GAAGjB,QAAQ,CAAC;MACrBkB,GAAGA,CAAA,EAAI;QACL;QACA;QACA,IAAIF,MAAM,CAACG,KAAK,IAAI,IAAI,IAAI,CAACJ,KAAK,EAAE,OAAOC,MAAM,CAACG,KAAK;;QAEvD;QACA;QACA,OAAOJ,KAAK,CAACK,KAAK,CAACD,KAAK,CAACE,IAAI,CAACC,IAAI,IAAIP,KAAK,CAACQ,QAAQ,CAACJ,KAAK,CAACK,QAAQ,CAACF,IAAI,CAACG,EAAE,CAAC,CAAC,EAAEN,KAAK;MACtF,CAAC;MACDO,GAAGA,CAAEC,GAAG,EAAE;QACRX,MAAM,CAACG,KAAK,GAAGQ,GAAG;MACpB;IACF,CAAC,CAAC;IAEFtB,SAAS,CAAC,MAAM;MACd,MAAMuB,WAAW,GAAG9B,OAAO,CAAC+B,WAAW,CAACnB,KAAK,CAAC;MAE9C,OAAAoB,YAAA,CAAAhC,OAAA,EAAAiC,WAAA;QAAA;MAAA,GAGSH,WAAW;QAAA,cACNX,KAAK,CAACE,KAAK;QAAA,uBAAAa,MAAA,IAAXf,KAAK,CAACE,KAAK,GAAAa,MAAA;QAAA,SACd,CACL,eAAe,EACftB,KAAK,CAACuB,KAAK,CACZ;QAAA,SACOvB,KAAK,CAACwB,KAAK;QAAA,aACP,KAAK;QAAA,SACT;MAAK,IACHpB,KAAK;IAGrB,CAAC,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC","ignoreList":[]}
|
||||
+200
@@ -0,0 +1,200 @@
|
||||
export declare const makeVTabsWindowItemProps: <Defaults extends {
|
||||
class?: unknown;
|
||||
style?: unknown;
|
||||
value?: unknown;
|
||||
disabled?: unknown;
|
||||
selectedClass?: unknown;
|
||||
eager?: unknown;
|
||||
reverseTransition?: unknown;
|
||||
transition?: 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>;
|
||||
};
|
||||
value: unknown extends Defaults["value"] ? null : {
|
||||
type: import("vue").PropType<unknown extends Defaults["value"] ? any : any>;
|
||||
default: unknown extends Defaults["value"] ? any : any;
|
||||
};
|
||||
disabled: unknown extends Defaults["disabled"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["disabled"] ? boolean : boolean | Defaults["disabled"]>;
|
||||
default: unknown extends Defaults["disabled"] ? boolean : boolean | Defaults["disabled"];
|
||||
};
|
||||
selectedClass: unknown extends Defaults["selectedClass"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["selectedClass"] ? string : string | Defaults["selectedClass"]>;
|
||||
default: unknown extends Defaults["selectedClass"] ? string : string | Defaults["selectedClass"];
|
||||
};
|
||||
eager: unknown extends Defaults["eager"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["eager"] ? boolean : boolean | Defaults["eager"]>;
|
||||
default: unknown extends Defaults["eager"] ? boolean : boolean | Defaults["eager"];
|
||||
};
|
||||
reverseTransition: unknown extends Defaults["reverseTransition"] ? {
|
||||
type: (BooleanConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
} : Omit<{
|
||||
type: (BooleanConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["reverseTransition"] ? string | boolean : string | boolean | Defaults["reverseTransition"]>;
|
||||
default: unknown extends Defaults["reverseTransition"] ? string | boolean : Defaults["reverseTransition"] | NonNullable<string | boolean>;
|
||||
};
|
||||
transition: unknown extends Defaults["transition"] ? {
|
||||
type: (BooleanConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
} : Omit<{
|
||||
type: (BooleanConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["transition"] ? string | boolean : string | boolean | Defaults["transition"]>;
|
||||
default: unknown extends Defaults["transition"] ? string | boolean : Defaults["transition"] | NonNullable<string | boolean>;
|
||||
};
|
||||
};
|
||||
export declare const VTabsWindowItem: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
disabled: boolean;
|
||||
eager: boolean;
|
||||
} & {
|
||||
class?: any;
|
||||
value?: any;
|
||||
selectedClass?: string | undefined;
|
||||
reverseTransition?: string | boolean | undefined;
|
||||
transition?: string | boolean | 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;
|
||||
disabled: boolean;
|
||||
eager: boolean;
|
||||
reverseTransition: string | boolean;
|
||||
transition: string | 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;
|
||||
disabled: boolean;
|
||||
eager: boolean;
|
||||
} & {
|
||||
class?: any;
|
||||
value?: any;
|
||||
selectedClass?: string | undefined;
|
||||
reverseTransition?: string | boolean | undefined;
|
||||
transition?: string | boolean | 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;
|
||||
disabled: boolean;
|
||||
eager: boolean;
|
||||
reverseTransition: string | boolean;
|
||||
transition: string | boolean;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
disabled: boolean;
|
||||
eager: boolean;
|
||||
} & {
|
||||
class?: any;
|
||||
value?: any;
|
||||
selectedClass?: string | undefined;
|
||||
reverseTransition?: string | boolean | undefined;
|
||||
transition?: string | boolean | 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;
|
||||
disabled: boolean;
|
||||
eager: boolean;
|
||||
reverseTransition: string | boolean;
|
||||
transition: string | 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;
|
||||
};
|
||||
value: null;
|
||||
disabled: BooleanConstructor;
|
||||
selectedClass: StringConstructor;
|
||||
eager: BooleanConstructor;
|
||||
reverseTransition: {
|
||||
type: (BooleanConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
transition: {
|
||||
type: (BooleanConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
class: import("vue").PropType<any>;
|
||||
style: {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
value: null;
|
||||
disabled: BooleanConstructor;
|
||||
selectedClass: StringConstructor;
|
||||
eager: BooleanConstructor;
|
||||
reverseTransition: {
|
||||
type: (BooleanConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
transition: {
|
||||
type: (BooleanConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
}>>;
|
||||
export type VTabsWindowItem = InstanceType<typeof VTabsWindowItem>;
|
||||
+26
@@ -0,0 +1,26 @@
|
||||
import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
|
||||
// Components
|
||||
import { makeVWindowItemProps, VWindowItem } from "../VWindow/VWindowItem.js"; // Utilities
|
||||
import { genericComponent, propsFactory, useRender } from "../../util/index.js";
|
||||
export const makeVTabsWindowItemProps = propsFactory({
|
||||
...makeVWindowItemProps()
|
||||
}, 'VTabsWindowItem');
|
||||
export const VTabsWindowItem = genericComponent()({
|
||||
name: 'VTabsWindowItem',
|
||||
props: makeVTabsWindowItemProps(),
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
useRender(() => {
|
||||
const windowItemProps = VWindowItem.filterProps(props);
|
||||
return _createVNode(VWindowItem, _mergeProps({
|
||||
"_as": "VTabsWindowItem"
|
||||
}, windowItemProps, {
|
||||
"class": ['v-tabs-window-item', props.class],
|
||||
"style": props.style
|
||||
}), slots);
|
||||
});
|
||||
return {};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VTabsWindowItem.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"VTabsWindowItem.js","names":["makeVWindowItemProps","VWindowItem","genericComponent","propsFactory","useRender","makeVTabsWindowItemProps","VTabsWindowItem","name","props","setup","slots","windowItemProps","filterProps","_createVNode","_mergeProps","class","style"],"sources":["../../../src/components/VTabs/VTabsWindowItem.tsx"],"sourcesContent":["// Components\nimport { makeVWindowItemProps, VWindowItem } from '@/components/VWindow/VWindowItem'\n\n// Utilities\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\nexport const makeVTabsWindowItemProps = propsFactory({\n ...makeVWindowItemProps(),\n}, 'VTabsWindowItem')\n\nexport const VTabsWindowItem = genericComponent()({\n name: 'VTabsWindowItem',\n\n props: makeVTabsWindowItemProps(),\n\n setup (props, { slots }) {\n useRender(() => {\n const windowItemProps = VWindowItem.filterProps(props)\n\n return (\n <VWindowItem\n _as=\"VTabsWindowItem\"\n { ...windowItemProps }\n class={[\n 'v-tabs-window-item',\n props.class,\n ]}\n style={ props.style }\n v-slots={ slots }\n />\n )\n })\n\n return {}\n },\n})\n\nexport type VTabsWindowItem = InstanceType<typeof VTabsWindowItem>\n"],"mappings":";AAAA;AAAA,SACSA,oBAAoB,EAAEC,WAAW,qCAE1C;AAAA,SACSC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS;AAElD,OAAO,MAAMC,wBAAwB,GAAGF,YAAY,CAAC;EACnD,GAAGH,oBAAoB,CAAC;AAC1B,CAAC,EAAE,iBAAiB,CAAC;AAErB,OAAO,MAAMM,eAAe,GAAGJ,gBAAgB,CAAC,CAAC,CAAC;EAChDK,IAAI,EAAE,iBAAiB;EAEvBC,KAAK,EAAEH,wBAAwB,CAAC,CAAC;EAEjCI,KAAKA,CAAED,KAAK,EAAE;IAAEE;EAAM,CAAC,EAAE;IACvBN,SAAS,CAAC,MAAM;MACd,MAAMO,eAAe,GAAGV,WAAW,CAACW,WAAW,CAACJ,KAAK,CAAC;MAEtD,OAAAK,YAAA,CAAAZ,WAAA,EAAAa,WAAA;QAAA;MAAA,GAGSH,eAAe;QAAA,SACb,CACL,oBAAoB,EACpBH,KAAK,CAACO,KAAK,CACZ;QAAA,SACOP,KAAK,CAACQ;MAAK,IACTN,KAAK;IAGrB,CAAC,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC","ignoreList":[]}
|
||||
+18
@@ -0,0 +1,18 @@
|
||||
@use 'sass:math';
|
||||
@use 'sass:map';
|
||||
@use '../../styles/settings';
|
||||
|
||||
// VTabs
|
||||
$tabs-density: ( 'default': 0, 'comfortable' : -1, 'compact': -3) !default;
|
||||
$tabs-height: 48px !default;
|
||||
$tabs-stacked-height: 72px !default;
|
||||
|
||||
// VTab
|
||||
$tab-align-tabs-title-margin: 42px !default;
|
||||
$tab-border-radius: 0 !default;
|
||||
$tab-max-width: 360px !default;
|
||||
$tab-min-width: 90px !default;
|
||||
$tab-slider-size: 2px !default;
|
||||
|
||||
$tab-inset-radius: settings.$border-radius-root !default;
|
||||
$tab-inset-padding: 4px !default;
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
export { VTab } from './VTab.js';
|
||||
export { VTabs } from './VTabs.js';
|
||||
export { VTabsWindow } from './VTabsWindow.js';
|
||||
export { VTabsWindowItem } from './VTabsWindowItem.js';
|
||||
+5
@@ -0,0 +1,5 @@
|
||||
export { VTab } from "./VTab.js";
|
||||
export { VTabs } from "./VTabs.js";
|
||||
export { VTabsWindow } from "./VTabsWindow.js";
|
||||
export { VTabsWindowItem } from "./VTabsWindowItem.js";
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"index.js","names":["VTab","VTabs","VTabsWindow","VTabsWindowItem"],"sources":["../../../src/components/VTabs/index.ts"],"sourcesContent":["export { VTab } from './VTab'\nexport { VTabs } from './VTabs'\nexport { VTabsWindow } from './VTabsWindow'\nexport { VTabsWindowItem } from './VTabsWindowItem'\n"],"mappings":"SAASA,IAAI;AAAA,SACJC,KAAK;AAAA,SACLC,WAAW;AAAA,SACXC,eAAe","ignoreList":[]}
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
import type { InjectionKey } from 'vue';
|
||||
import type { GroupProvide } from '../../composables/group.js';
|
||||
export declare const VTabsSymbol: InjectionKey<GroupProvide>;
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
// Types
|
||||
|
||||
export const VTabsSymbol = Symbol.for('vuetify:v-tabs');
|
||||
//# sourceMappingURL=shared.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"shared.js","names":["VTabsSymbol","Symbol","for"],"sources":["../../../src/components/VTabs/shared.ts"],"sourcesContent":["// Types\nimport type { InjectionKey } from 'vue'\nimport type { GroupProvide } from '@/composables/group'\n\nexport const VTabsSymbol: InjectionKey<GroupProvide> = Symbol.for('vuetify:v-tabs')\n"],"mappings":"AAAA;;AAIA,OAAO,MAAMA,WAAuC,GAAGC,MAAM,CAACC,GAAG,CAAC,gBAAgB,CAAC","ignoreList":[]}
|
||||
Reference in New Issue
Block a user