routie dev init since i didn't adhere to any proper guidance up until now
This commit is contained in:
+67
@@ -0,0 +1,67 @@
|
||||
@layer vuetify-components {
|
||||
.v-divider {
|
||||
color: inherit;
|
||||
display: block;
|
||||
flex: 1 1 100%;
|
||||
height: 0;
|
||||
max-height: 0;
|
||||
margin: 0;
|
||||
opacity: var(--v-border-opacity);
|
||||
transition: inherit;
|
||||
}
|
||||
.v-divider {
|
||||
border-style: solid;
|
||||
border-width: thin 0 0 0;
|
||||
}
|
||||
.v-divider--vertical {
|
||||
align-self: stretch;
|
||||
border-width: 0 thin 0 0;
|
||||
display: inline-flex;
|
||||
height: auto;
|
||||
margin-left: -1px;
|
||||
max-height: 100%;
|
||||
max-width: 0px;
|
||||
vertical-align: text-bottom;
|
||||
width: 0px;
|
||||
}
|
||||
.v-divider--inset:not(.v-divider--vertical) {
|
||||
max-width: calc(100% - 72px);
|
||||
margin-inline-start: 72px;
|
||||
}
|
||||
.v-divider--inset.v-divider--vertical {
|
||||
margin-bottom: 8px;
|
||||
margin-top: 8px;
|
||||
max-height: calc(100% - 16px);
|
||||
}
|
||||
.v-divider--gradient {
|
||||
mask-image: linear-gradient(90deg, transparent, #000, transparent);
|
||||
}
|
||||
.v-divider--gradient.v-divider--vertical {
|
||||
mask-image: linear-gradient(0deg, transparent, #000, transparent);
|
||||
}
|
||||
.v-divider__content {
|
||||
padding: 0 16px;
|
||||
text-wrap: nowrap;
|
||||
}
|
||||
.v-divider__wrapper--vertical .v-divider__content {
|
||||
padding: 4px 0;
|
||||
}
|
||||
.v-divider__wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.v-divider__wrapper--vertical {
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
.v-divider__wrapper--vertical .v-divider {
|
||||
margin: 0 auto;
|
||||
}
|
||||
.v-divider__wrapper--gradient {
|
||||
mask-image: linear-gradient(90deg, transparent, #000, transparent);
|
||||
}
|
||||
.v-divider__wrapper--gradient.v-divider__wrapper--vertical {
|
||||
mask-image: linear-gradient(0deg, transparent, #000, transparent);
|
||||
}
|
||||
}
|
||||
+237
@@ -0,0 +1,237 @@
|
||||
|
||||
import type { PropType } from 'vue';
|
||||
declare const allowedVariants: readonly ['dotted', 'dashed', 'solid', 'double'];
|
||||
type Variant = (typeof allowedVariants)[number];
|
||||
export declare const makeVDividerProps: <Defaults extends {
|
||||
theme?: unknown;
|
||||
class?: unknown;
|
||||
style?: unknown;
|
||||
color?: unknown;
|
||||
contentOffset?: unknown;
|
||||
gradient?: unknown;
|
||||
inset?: unknown;
|
||||
length?: unknown;
|
||||
opacity?: unknown;
|
||||
thickness?: unknown;
|
||||
vertical?: unknown;
|
||||
variant?: unknown;
|
||||
} = {}>(defaults?: Defaults | undefined) => {
|
||||
theme: unknown extends Defaults["theme"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["theme"] ? string : string | Defaults["theme"]>;
|
||||
default: unknown extends Defaults["theme"] ? string : string | Defaults["theme"];
|
||||
};
|
||||
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>;
|
||||
};
|
||||
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"];
|
||||
};
|
||||
contentOffset: unknown extends Defaults["contentOffset"] ? PropType<string | number | (string | number)[]> : {
|
||||
type: PropType<unknown extends Defaults["contentOffset"] ? string | number | (string | number)[] : string | number | (string | number)[] | Defaults["contentOffset"]>;
|
||||
default: unknown extends Defaults["contentOffset"] ? string | number | (string | number)[] : Defaults["contentOffset"] | NonNullable<string | number | (string | number)[]>;
|
||||
};
|
||||
gradient: unknown extends Defaults["gradient"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["gradient"] ? boolean : boolean | Defaults["gradient"]>;
|
||||
default: unknown extends Defaults["gradient"] ? boolean : boolean | Defaults["gradient"];
|
||||
};
|
||||
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"];
|
||||
};
|
||||
length: unknown extends Defaults["length"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["length"] ? string | number : string | number | Defaults["length"]>;
|
||||
default: unknown extends Defaults["length"] ? string | number : Defaults["length"] | NonNullable<string | number>;
|
||||
};
|
||||
opacity: unknown extends Defaults["opacity"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["opacity"] ? string | number : string | number | Defaults["opacity"]>;
|
||||
default: unknown extends Defaults["opacity"] ? string | number : Defaults["opacity"] | NonNullable<string | number>;
|
||||
};
|
||||
thickness: unknown extends Defaults["thickness"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["thickness"] ? string | number : string | number | Defaults["thickness"]>;
|
||||
default: unknown extends Defaults["thickness"] ? string | number : Defaults["thickness"] | NonNullable<string | number>;
|
||||
};
|
||||
vertical: unknown extends Defaults["vertical"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["vertical"] ? boolean : boolean | Defaults["vertical"]>;
|
||||
default: unknown extends Defaults["vertical"] ? boolean : boolean | Defaults["vertical"];
|
||||
};
|
||||
variant: unknown extends Defaults["variant"] ? {
|
||||
type: PropType<Variant>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
} : Omit<{
|
||||
type: PropType<Variant>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["variant"] ? "dashed" | "dotted" | "double" | "solid" : "dashed" | "dotted" | "double" | "solid" | Defaults["variant"]>;
|
||||
default: unknown extends Defaults["variant"] ? "dashed" | "dotted" | "double" | "solid" : Defaults["variant"] | NonNullable<"dashed" | "dotted" | "double" | "solid">;
|
||||
};
|
||||
};
|
||||
export declare const VDivider: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
gradient: boolean;
|
||||
inset: boolean;
|
||||
vertical: boolean;
|
||||
variant: "dashed" | "dotted" | "double" | "solid";
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
color?: string | undefined;
|
||||
contentOffset?: string | number | (string | number)[] | undefined;
|
||||
length?: string | number | undefined;
|
||||
opacity?: string | number | undefined;
|
||||
thickness?: string | number | 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;
|
||||
gradient: boolean;
|
||||
inset: boolean;
|
||||
vertical: boolean;
|
||||
variant: "dashed" | "dotted" | "double" | "solid";
|
||||
}, 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;
|
||||
gradient: boolean;
|
||||
inset: boolean;
|
||||
vertical: boolean;
|
||||
variant: "dashed" | "dotted" | "double" | "solid";
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
color?: string | undefined;
|
||||
contentOffset?: string | number | (string | number)[] | undefined;
|
||||
length?: string | number | undefined;
|
||||
opacity?: string | number | undefined;
|
||||
thickness?: string | number | 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;
|
||||
gradient: boolean;
|
||||
inset: boolean;
|
||||
vertical: boolean;
|
||||
variant: "dashed" | "dotted" | "double" | "solid";
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
gradient: boolean;
|
||||
inset: boolean;
|
||||
vertical: boolean;
|
||||
variant: "dashed" | "dotted" | "double" | "solid";
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
color?: string | undefined;
|
||||
contentOffset?: string | number | (string | number)[] | undefined;
|
||||
length?: string | number | undefined;
|
||||
opacity?: string | number | undefined;
|
||||
thickness?: string | number | 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;
|
||||
gradient: boolean;
|
||||
inset: boolean;
|
||||
vertical: boolean;
|
||||
variant: "dashed" | "dotted" | "double" | "solid";
|
||||
}, {}, 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: PropType<import("../../composables/component.js").ClassValue>;
|
||||
style: {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
color: StringConstructor;
|
||||
contentOffset: PropType<number | string | (string | number)[]>;
|
||||
gradient: BooleanConstructor;
|
||||
inset: BooleanConstructor;
|
||||
length: (NumberConstructor | StringConstructor)[];
|
||||
opacity: (NumberConstructor | StringConstructor)[];
|
||||
thickness: (NumberConstructor | StringConstructor)[];
|
||||
vertical: BooleanConstructor;
|
||||
variant: {
|
||||
type: PropType<Variant>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
theme: StringConstructor;
|
||||
class: PropType<import("../../composables/component.js").ClassValue>;
|
||||
style: {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
color: StringConstructor;
|
||||
contentOffset: PropType<number | string | (string | number)[]>;
|
||||
gradient: BooleanConstructor;
|
||||
inset: BooleanConstructor;
|
||||
length: (NumberConstructor | StringConstructor)[];
|
||||
opacity: (NumberConstructor | StringConstructor)[];
|
||||
thickness: (NumberConstructor | StringConstructor)[];
|
||||
vertical: BooleanConstructor;
|
||||
variant: {
|
||||
type: PropType<Variant>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
}>>;
|
||||
export type VDivider = InstanceType<typeof VDivider>;
|
||||
|
||||
+93
@@ -0,0 +1,93 @@
|
||||
import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode } from "vue";
|
||||
// Styles
|
||||
import "./VDivider.css";
|
||||
|
||||
// Composables
|
||||
import { useTextColor } from "../../composables/color.js";
|
||||
import { makeComponentProps } from "../../composables/component.js";
|
||||
import { makeThemeProps, provideTheme } from "../../composables/theme.js"; // Utilities
|
||||
import { computed, toRef } from 'vue';
|
||||
import { convertToUnit, genericComponent, propsFactory, useRender } from "../../util/index.js"; // Types
|
||||
const allowedVariants = ['dotted', 'dashed', 'solid', 'double'];
|
||||
export const makeVDividerProps = propsFactory({
|
||||
color: String,
|
||||
contentOffset: [Number, String, Array],
|
||||
gradient: Boolean,
|
||||
inset: Boolean,
|
||||
length: [Number, String],
|
||||
opacity: [Number, String],
|
||||
thickness: [Number, String],
|
||||
vertical: Boolean,
|
||||
variant: {
|
||||
type: String,
|
||||
default: 'solid',
|
||||
validator: v => allowedVariants.includes(v)
|
||||
},
|
||||
...makeComponentProps(),
|
||||
...makeThemeProps()
|
||||
}, 'VDivider');
|
||||
export const VDivider = genericComponent()({
|
||||
name: 'VDivider',
|
||||
props: makeVDividerProps(),
|
||||
setup(props, {
|
||||
attrs,
|
||||
slots
|
||||
}) {
|
||||
const {
|
||||
themeClasses
|
||||
} = provideTheme(props);
|
||||
const {
|
||||
textColorClasses,
|
||||
textColorStyles
|
||||
} = useTextColor(() => props.color);
|
||||
const dividerStyles = computed(() => {
|
||||
const styles = {};
|
||||
if (props.length) {
|
||||
styles[props.vertical ? 'height' : 'width'] = convertToUnit(props.length);
|
||||
}
|
||||
if (props.thickness) {
|
||||
styles[props.vertical ? 'borderRightWidth' : 'borderTopWidth'] = convertToUnit(props.thickness);
|
||||
}
|
||||
return styles;
|
||||
});
|
||||
const contentStyles = toRef(() => {
|
||||
const margin = Array.isArray(props.contentOffset) ? props.contentOffset[0] : props.contentOffset;
|
||||
const shift = Array.isArray(props.contentOffset) ? props.contentOffset[1] : 0;
|
||||
return {
|
||||
marginBlock: props.vertical && margin ? convertToUnit(margin) : undefined,
|
||||
marginInline: !props.vertical && margin ? convertToUnit(margin) : undefined,
|
||||
transform: shift ? `translate${props.vertical ? 'X' : 'Y'}(${convertToUnit(shift)})` : undefined
|
||||
};
|
||||
});
|
||||
useRender(() => {
|
||||
const divider = _createElementVNode("hr", {
|
||||
"class": _normalizeClass([{
|
||||
'v-divider': true,
|
||||
'v-divider--gradient': props.gradient && !slots.default,
|
||||
'v-divider--inset': props.inset,
|
||||
'v-divider--vertical': props.vertical
|
||||
}, themeClasses.value, textColorClasses.value, props.class]),
|
||||
"style": _normalizeStyle([dividerStyles.value, textColorStyles.value, {
|
||||
'--v-border-opacity': props.opacity
|
||||
}, {
|
||||
'border-style': props.variant
|
||||
}, props.style]),
|
||||
"aria-orientation": !attrs.role || attrs.role === 'separator' ? props.vertical ? 'vertical' : 'horizontal' : undefined,
|
||||
"role": `${attrs.role || 'separator'}`
|
||||
}, null);
|
||||
if (!slots.default) return divider;
|
||||
return _createElementVNode("div", {
|
||||
"class": _normalizeClass(['v-divider__wrapper', {
|
||||
'v-divider__wrapper--gradient': props.gradient,
|
||||
'v-divider__wrapper--inset': props.inset,
|
||||
'v-divider__wrapper--vertical': props.vertical
|
||||
}])
|
||||
}, [divider, _createElementVNode("div", {
|
||||
"class": "v-divider__content",
|
||||
"style": _normalizeStyle(contentStyles.value)
|
||||
}, [slots.default()]), divider]);
|
||||
});
|
||||
return {};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VDivider.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+68
@@ -0,0 +1,68 @@
|
||||
@use '../../styles/tools'
|
||||
@use './variables' as *
|
||||
|
||||
@include tools.layer('components')
|
||||
.v-divider
|
||||
color: inherit
|
||||
display: block
|
||||
flex: $divider-flex
|
||||
height: 0
|
||||
max-height: 0
|
||||
margin: 0
|
||||
opacity: $divider-opacity
|
||||
transition: inherit
|
||||
|
||||
@include tools.border($divider-border...)
|
||||
|
||||
&--vertical
|
||||
align-self: stretch
|
||||
border-width: $divider-vertical-border-width
|
||||
display: inline-flex
|
||||
height: auto
|
||||
margin-left: $divider-vertical-margin-left
|
||||
max-height: 100%
|
||||
max-width: 0px
|
||||
vertical-align: text-bottom
|
||||
width: 0px
|
||||
|
||||
&--inset
|
||||
&:not(.v-divider--vertical)
|
||||
max-width: $divider-inset-max-width
|
||||
margin-inline-start: $divider-inset-margin
|
||||
|
||||
&.v-divider--vertical
|
||||
margin-bottom: $divider-vertical-inset-margin-bottom
|
||||
margin-top: $divider-vertical-inset-margin-top
|
||||
max-height: $divider-vertical-inset-max-height
|
||||
|
||||
&--gradient
|
||||
mask-image: $divider-gradient-mask
|
||||
|
||||
&.v-divider--vertical
|
||||
mask-image: $divider-vertical-gradient-mask
|
||||
|
||||
.v-divider__content
|
||||
padding: $divider-content-padding
|
||||
text-wrap: nowrap
|
||||
|
||||
.v-divider__wrapper--vertical &
|
||||
padding: $divider-content-vertical-padding
|
||||
|
||||
.v-divider__wrapper
|
||||
display: flex
|
||||
align-items: center
|
||||
justify-content: center
|
||||
|
||||
|
||||
&--vertical
|
||||
flex-direction: column
|
||||
height: 100%
|
||||
|
||||
.v-divider
|
||||
margin: 0 auto
|
||||
|
||||
&--gradient
|
||||
mask-image: $divider-gradient-mask
|
||||
|
||||
&.v-divider__wrapper--vertical
|
||||
mask-image: $divider-vertical-gradient-mask
|
||||
+28
@@ -0,0 +1,28 @@
|
||||
@use '../../styles/settings';
|
||||
|
||||
// VDivider
|
||||
$divider-border-color: null !default;
|
||||
$divider-border-style: settings.$border-style-root !default;
|
||||
$divider-border-width: thin 0 0 0 !default;
|
||||
$divider-content-padding: 0 16px !default;
|
||||
$divider-content-vertical-padding: 4px 0 !default;
|
||||
$divider-flex: 1 1 100% !default;
|
||||
$divider-gradient-mask: linear-gradient(90deg, transparent, #000, transparent) !default;
|
||||
$divider-inset-margin: 72px !default;
|
||||
$divider-inset-max-width: calc(100% - #{$divider-inset-margin}) !default;
|
||||
$divider-margin: 8px !default;
|
||||
$divider-opacity: var(--v-border-opacity) !default;
|
||||
$divider-vertical-border-width: 0 thin 0 0 !default;
|
||||
$divider-vertical-inset-margin-bottom: $divider-margin !default;
|
||||
$divider-vertical-inset-margin-top: $divider-margin !default;
|
||||
$divider-vertical-inset-max-height: calc(100% - #{$divider-margin * 2}) !default;
|
||||
$divider-vertical-gradient-mask: linear-gradient(0deg, transparent, #000, transparent) !default;
|
||||
$divider-vertical-margin-left: -1px !default;
|
||||
|
||||
|
||||
// Lists
|
||||
$divider-border: (
|
||||
$divider-border-color,
|
||||
$divider-border-style,
|
||||
$divider-border-width
|
||||
) !default;
|
||||
+1
@@ -0,0 +1 @@
|
||||
export { VDivider } from './VDivider.js';
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
export { VDivider } from "./VDivider.js";
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"index.js","names":["VDivider"],"sources":["../../../src/components/VDivider/index.ts"],"sourcesContent":["export { VDivider } from './VDivider'\n"],"mappings":"SAASA,QAAQ","ignoreList":[]}
|
||||
Reference in New Issue
Block a user