routie dev init since i didn't adhere to any proper guidance up until now
This commit is contained in:
+38
@@ -0,0 +1,38 @@
|
||||
@layer vuetify-components {
|
||||
.v-main {
|
||||
flex: 1 0 auto;
|
||||
max-width: 100%;
|
||||
transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
padding-left: var(--v-layout-left);
|
||||
padding-right: var(--v-layout-right);
|
||||
padding-top: var(--v-layout-top);
|
||||
padding-bottom: var(--v-layout-bottom);
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.v-main {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
.v-main__scroller {
|
||||
max-width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.v-main--scrollable {
|
||||
display: flex;
|
||||
}
|
||||
.v-main--scrollable {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.v-main--scrollable > .v-main__scroller {
|
||||
flex: 1 1 auto;
|
||||
overflow-y: auto;
|
||||
--v-layout-left: 0px;
|
||||
--v-layout-right: 0px;
|
||||
--v-layout-top: 0px;
|
||||
--v-layout-bottom: 0px;
|
||||
}
|
||||
}
|
||||
+215
@@ -0,0 +1,215 @@
|
||||
|
||||
export declare const makeVMainProps: <Defaults extends {
|
||||
class?: unknown;
|
||||
style?: unknown;
|
||||
tag?: unknown;
|
||||
height?: unknown;
|
||||
maxHeight?: unknown;
|
||||
maxWidth?: unknown;
|
||||
minHeight?: unknown;
|
||||
minWidth?: unknown;
|
||||
width?: unknown;
|
||||
scrollable?: 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>;
|
||||
};
|
||||
tag: unknown extends Defaults["tag"] ? Omit<{
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: NonNullable<string | import("../../util/index.js").JSXComponent>;
|
||||
} : Omit<Omit<{
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: NonNullable<string | import("../../util/index.js").JSXComponent>;
|
||||
}, "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>;
|
||||
};
|
||||
height: unknown extends Defaults["height"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: import("vue").PropType<unknown extends Defaults["height"] ? string | number : string | number | Defaults["height"]>;
|
||||
default: unknown extends Defaults["height"] ? string | number : Defaults["height"] | NonNullable<string | number>;
|
||||
};
|
||||
maxHeight: unknown extends Defaults["maxHeight"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: import("vue").PropType<unknown extends Defaults["maxHeight"] ? string | number : string | number | Defaults["maxHeight"]>;
|
||||
default: unknown extends Defaults["maxHeight"] ? string | number : Defaults["maxHeight"] | NonNullable<string | number>;
|
||||
};
|
||||
maxWidth: unknown extends Defaults["maxWidth"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: import("vue").PropType<unknown extends Defaults["maxWidth"] ? string | number : string | number | Defaults["maxWidth"]>;
|
||||
default: unknown extends Defaults["maxWidth"] ? string | number : Defaults["maxWidth"] | NonNullable<string | number>;
|
||||
};
|
||||
minHeight: unknown extends Defaults["minHeight"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: import("vue").PropType<unknown extends Defaults["minHeight"] ? string | number : string | number | Defaults["minHeight"]>;
|
||||
default: unknown extends Defaults["minHeight"] ? string | number : Defaults["minHeight"] | NonNullable<string | number>;
|
||||
};
|
||||
minWidth: unknown extends Defaults["minWidth"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: import("vue").PropType<unknown extends Defaults["minWidth"] ? string | number : string | number | Defaults["minWidth"]>;
|
||||
default: unknown extends Defaults["minWidth"] ? string | number : Defaults["minWidth"] | NonNullable<string | number>;
|
||||
};
|
||||
width: unknown extends Defaults["width"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: import("vue").PropType<unknown extends Defaults["width"] ? string | number : string | number | Defaults["width"]>;
|
||||
default: unknown extends Defaults["width"] ? string | number : Defaults["width"] | NonNullable<string | number>;
|
||||
};
|
||||
scrollable: unknown extends Defaults["scrollable"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["scrollable"] ? boolean : boolean | Defaults["scrollable"]>;
|
||||
default: unknown extends Defaults["scrollable"] ? boolean : boolean | Defaults["scrollable"];
|
||||
};
|
||||
};
|
||||
export declare const VMain: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
scrollable: boolean;
|
||||
} & {
|
||||
class?: any;
|
||||
height?: string | number | undefined;
|
||||
maxHeight?: string | number | undefined;
|
||||
maxWidth?: string | number | undefined;
|
||||
minHeight?: string | number | undefined;
|
||||
minWidth?: string | number | undefined;
|
||||
width?: 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;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
scrollable: 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;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
scrollable: boolean;
|
||||
} & {
|
||||
class?: any;
|
||||
height?: string | number | undefined;
|
||||
maxHeight?: string | number | undefined;
|
||||
maxWidth?: string | number | undefined;
|
||||
minHeight?: string | number | undefined;
|
||||
minWidth?: string | number | undefined;
|
||||
width?: 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;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
scrollable: 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;
|
||||
scrollable: boolean;
|
||||
} & {
|
||||
class?: any;
|
||||
height?: string | number | undefined;
|
||||
maxHeight?: string | number | undefined;
|
||||
maxWidth?: string | number | undefined;
|
||||
minHeight?: string | number | undefined;
|
||||
minWidth?: string | number | undefined;
|
||||
width?: 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;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
scrollable: 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;
|
||||
};
|
||||
tag: Omit<{
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: NonNullable<string | import("../../util/index.js").JSXComponent>;
|
||||
};
|
||||
height: (NumberConstructor | StringConstructor)[];
|
||||
maxHeight: (NumberConstructor | StringConstructor)[];
|
||||
maxWidth: (NumberConstructor | StringConstructor)[];
|
||||
minHeight: (NumberConstructor | StringConstructor)[];
|
||||
minWidth: (NumberConstructor | StringConstructor)[];
|
||||
width: (NumberConstructor | StringConstructor)[];
|
||||
scrollable: BooleanConstructor;
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
class: import("vue").PropType<any>;
|
||||
style: {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
tag: Omit<{
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: NonNullable<string | import("../../util/index.js").JSXComponent>;
|
||||
};
|
||||
height: (NumberConstructor | StringConstructor)[];
|
||||
maxHeight: (NumberConstructor | StringConstructor)[];
|
||||
maxWidth: (NumberConstructor | StringConstructor)[];
|
||||
minHeight: (NumberConstructor | StringConstructor)[];
|
||||
minWidth: (NumberConstructor | StringConstructor)[];
|
||||
width: (NumberConstructor | StringConstructor)[];
|
||||
scrollable: BooleanConstructor;
|
||||
}>>;
|
||||
export type VMain = InstanceType<typeof VMain>;
|
||||
+48
@@ -0,0 +1,48 @@
|
||||
import { createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createVNode as _createVNode } from "vue";
|
||||
// Styles
|
||||
import "./VMain.css";
|
||||
|
||||
// Composables
|
||||
import { makeComponentProps } from "../../composables/component.js";
|
||||
import { makeDimensionProps, useDimension } from "../../composables/dimensions.js";
|
||||
import { useLayout } from "../../composables/layout.js";
|
||||
import { useSsrBoot } from "../../composables/ssrBoot.js";
|
||||
import { makeTagProps } from "../../composables/tag.js"; // Utilities
|
||||
import { genericComponent, propsFactory, useRender } from "../../util/index.js";
|
||||
export const makeVMainProps = propsFactory({
|
||||
scrollable: Boolean,
|
||||
...makeComponentProps(),
|
||||
...makeDimensionProps(),
|
||||
...makeTagProps({
|
||||
tag: 'main'
|
||||
})
|
||||
}, 'VMain');
|
||||
export const VMain = genericComponent()({
|
||||
name: 'VMain',
|
||||
props: makeVMainProps(),
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
const {
|
||||
dimensionStyles
|
||||
} = useDimension(props);
|
||||
const {
|
||||
mainStyles
|
||||
} = useLayout();
|
||||
const {
|
||||
ssrBootStyles
|
||||
} = useSsrBoot();
|
||||
useRender(() => _createVNode(props.tag, {
|
||||
"class": _normalizeClass(['v-main', {
|
||||
'v-main--scrollable': props.scrollable
|
||||
}, props.class]),
|
||||
"style": _normalizeStyle([mainStyles.value, ssrBootStyles.value, dimensionStyles.value, props.style])
|
||||
}, {
|
||||
default: () => [props.scrollable ? _createElementVNode("div", {
|
||||
"class": "v-main__scroller"
|
||||
}, [slots.default?.()]) : slots.default?.()]
|
||||
}));
|
||||
return {};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VMain.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"VMain.js","names":["makeComponentProps","makeDimensionProps","useDimension","useLayout","useSsrBoot","makeTagProps","genericComponent","propsFactory","useRender","makeVMainProps","scrollable","Boolean","tag","VMain","name","props","setup","slots","dimensionStyles","mainStyles","ssrBootStyles","_createVNode","_normalizeClass","class","_normalizeStyle","value","style","default","_createElementVNode"],"sources":["../../../src/components/VMain/VMain.tsx"],"sourcesContent":["// Styles\nimport './VMain.sass'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { useLayout } from '@/composables/layout'\nimport { useSsrBoot } from '@/composables/ssrBoot'\nimport { makeTagProps } from '@/composables/tag'\n\n// Utilities\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\nexport const makeVMainProps = propsFactory({\n scrollable: Boolean,\n\n ...makeComponentProps(),\n ...makeDimensionProps(),\n ...makeTagProps({ tag: 'main' }),\n}, 'VMain')\n\nexport const VMain = genericComponent()({\n name: 'VMain',\n\n props: makeVMainProps(),\n\n setup (props, { slots }) {\n const { dimensionStyles } = useDimension(props)\n const { mainStyles } = useLayout()\n const { ssrBootStyles } = useSsrBoot()\n\n useRender(() => (\n <props.tag\n class={[\n 'v-main',\n { 'v-main--scrollable': props.scrollable },\n props.class,\n ]}\n style={[\n mainStyles.value,\n ssrBootStyles.value,\n dimensionStyles.value,\n props.style,\n ]}\n >\n { props.scrollable\n ? (\n <div class=\"v-main__scroller\">\n { slots.default?.() }\n </div>\n )\n : slots.default?.()\n }\n </props.tag>\n ))\n\n return {}\n },\n})\n\nexport type VMain = InstanceType<typeof VMain>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,kBAAkB;AAAA,SAClBC,kBAAkB,EAAEC,YAAY;AAAA,SAChCC,SAAS;AAAA,SACTC,UAAU;AAAA,SACVC,YAAY,oCAErB;AAAA,SACSC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS;AAElD,OAAO,MAAMC,cAAc,GAAGF,YAAY,CAAC;EACzCG,UAAU,EAAEC,OAAO;EAEnB,GAAGX,kBAAkB,CAAC,CAAC;EACvB,GAAGC,kBAAkB,CAAC,CAAC;EACvB,GAAGI,YAAY,CAAC;IAAEO,GAAG,EAAE;EAAO,CAAC;AACjC,CAAC,EAAE,OAAO,CAAC;AAEX,OAAO,MAAMC,KAAK,GAAGP,gBAAgB,CAAC,CAAC,CAAC;EACtCQ,IAAI,EAAE,OAAO;EAEbC,KAAK,EAAEN,cAAc,CAAC,CAAC;EAEvBO,KAAKA,CAAED,KAAK,EAAE;IAAEE;EAAM,CAAC,EAAE;IACvB,MAAM;MAAEC;IAAgB,CAAC,GAAGhB,YAAY,CAACa,KAAK,CAAC;IAC/C,MAAM;MAAEI;IAAW,CAAC,GAAGhB,SAAS,CAAC,CAAC;IAClC,MAAM;MAAEiB;IAAc,CAAC,GAAGhB,UAAU,CAAC,CAAC;IAEtCI,SAAS,CAAC,MAAAa,YAAA,CAAAN,KAAA,CAAAH,GAAA;MAAA,SAAAU,eAAA,CAEC,CACL,QAAQ,EACR;QAAE,oBAAoB,EAAEP,KAAK,CAACL;MAAW,CAAC,EAC1CK,KAAK,CAACQ,KAAK,CACZ;MAAA,SAAAC,eAAA,CACM,CACLL,UAAU,CAACM,KAAK,EAChBL,aAAa,CAACK,KAAK,EACnBP,eAAe,CAACO,KAAK,EACrBV,KAAK,CAACW,KAAK,CACZ;IAAA;MAAAC,OAAA,EAAAA,CAAA,MAECZ,KAAK,CAACL,UAAU,GAAAkB,mBAAA;QAAA;MAAA,IAGVX,KAAK,CAACU,OAAO,GAAG,CAAC,KAGrBV,KAAK,CAACU,OAAO,GAAG,CAAC;IAAA,EAGxB,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC","ignoreList":[]}
|
||||
+31
@@ -0,0 +1,31 @@
|
||||
@use '../../styles/tools'
|
||||
@use './variables' as *
|
||||
|
||||
@include tools.layer('components')
|
||||
.v-main
|
||||
flex: 1 0 auto
|
||||
max-width: 100%
|
||||
transition: $main-transition
|
||||
padding-left: var(--v-layout-left)
|
||||
padding-right: var(--v-layout-right)
|
||||
padding-top: var(--v-layout-top)
|
||||
padding-bottom: var(--v-layout-bottom)
|
||||
|
||||
@media (prefers-reduced-motion: reduce)
|
||||
transition: none
|
||||
|
||||
&__scroller
|
||||
max-width: 100%
|
||||
position: relative
|
||||
|
||||
&--scrollable
|
||||
display: flex
|
||||
@include tools.absolute()
|
||||
|
||||
& > .v-main__scroller
|
||||
flex: 1 1 auto
|
||||
overflow-y: auto
|
||||
--v-layout-left: 0px
|
||||
--v-layout-right: 0px
|
||||
--v-layout-top: 0px
|
||||
--v-layout-bottom: 0px
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
@use '../../styles/settings';
|
||||
|
||||
// VMain
|
||||
$main-transition: 0.2s settings.$standard-easing !default;
|
||||
+1
@@ -0,0 +1 @@
|
||||
export { VMain } from './VMain.js';
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
export { VMain } from "./VMain.js";
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"index.js","names":["VMain"],"sources":["../../../src/components/VMain/index.ts"],"sourcesContent":["export { VMain } from './VMain'\n"],"mappings":"SAASA,KAAK","ignoreList":[]}
|
||||
Reference in New Issue
Block a user