routie dev init since i didn't adhere to any proper guidance up until now
This commit is contained in:
+11
@@ -0,0 +1,11 @@
|
||||
@layer vuetify-components {
|
||||
.v-layout {
|
||||
--v-scrollbar-offset: 0px;
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
.v-layout--full-height {
|
||||
--v-scrollbar-offset: inherit;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
+245
@@ -0,0 +1,245 @@
|
||||
|
||||
export declare const makeVLayoutProps: <Defaults extends {
|
||||
class?: unknown;
|
||||
style?: unknown;
|
||||
overlaps?: unknown;
|
||||
fullHeight?: unknown;
|
||||
height?: unknown;
|
||||
maxHeight?: unknown;
|
||||
maxWidth?: unknown;
|
||||
minHeight?: unknown;
|
||||
minWidth?: unknown;
|
||||
width?: 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>;
|
||||
};
|
||||
overlaps: unknown extends Defaults["overlaps"] ? import("vue").Prop<string[]> : {
|
||||
type: import("vue").PropType<unknown extends Defaults["overlaps"] ? string[] : string[] | Defaults["overlaps"]>;
|
||||
default: unknown extends Defaults["overlaps"] ? string[] : string[] | Defaults["overlaps"];
|
||||
};
|
||||
fullHeight: unknown extends Defaults["fullHeight"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["fullHeight"] ? boolean : boolean | Defaults["fullHeight"]>;
|
||||
default: unknown extends Defaults["fullHeight"] ? boolean : boolean | Defaults["fullHeight"];
|
||||
};
|
||||
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>;
|
||||
};
|
||||
};
|
||||
export declare const VLayout: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
fullHeight: boolean;
|
||||
} & {
|
||||
class?: any;
|
||||
overlaps?: string[] | undefined;
|
||||
height?: string | number | undefined;
|
||||
maxHeight?: string | number | undefined;
|
||||
maxWidth?: string | number | undefined;
|
||||
minHeight?: string | number | undefined;
|
||||
minWidth?: string | number | undefined;
|
||||
width?: string | number | undefined;
|
||||
} & {
|
||||
$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;
|
||||
}, {
|
||||
getLayoutItem: (id: string) => {
|
||||
top: number;
|
||||
bottom: number;
|
||||
left: number;
|
||||
right: number;
|
||||
id: string;
|
||||
size: number;
|
||||
position: import("../../composables/layout.js").Position;
|
||||
} | undefined;
|
||||
items: import("vue").ComputedRef<{
|
||||
top: number;
|
||||
bottom: number;
|
||||
left: number;
|
||||
right: number;
|
||||
id: string;
|
||||
size: number;
|
||||
position: import("../../composables/layout.js").Position;
|
||||
}[]>;
|
||||
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
|
||||
style: import("vue").StyleValue;
|
||||
fullHeight: 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;
|
||||
fullHeight: boolean;
|
||||
} & {
|
||||
class?: any;
|
||||
overlaps?: string[] | undefined;
|
||||
height?: string | number | undefined;
|
||||
maxHeight?: string | number | undefined;
|
||||
maxWidth?: string | number | undefined;
|
||||
minHeight?: string | number | undefined;
|
||||
minWidth?: string | number | undefined;
|
||||
width?: string | number | undefined;
|
||||
} & {
|
||||
$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;
|
||||
}, {
|
||||
getLayoutItem: (id: string) => {
|
||||
top: number;
|
||||
bottom: number;
|
||||
left: number;
|
||||
right: number;
|
||||
id: string;
|
||||
size: number;
|
||||
position: import("../../composables/layout.js").Position;
|
||||
} | undefined;
|
||||
items: import("vue").ComputedRef<{
|
||||
top: number;
|
||||
bottom: number;
|
||||
left: number;
|
||||
right: number;
|
||||
id: string;
|
||||
size: number;
|
||||
position: import("../../composables/layout.js").Position;
|
||||
}[]>;
|
||||
}, {}, {}, {}, {
|
||||
style: import("vue").StyleValue;
|
||||
fullHeight: boolean;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
fullHeight: boolean;
|
||||
} & {
|
||||
class?: any;
|
||||
overlaps?: string[] | undefined;
|
||||
height?: string | number | undefined;
|
||||
maxHeight?: string | number | undefined;
|
||||
maxWidth?: string | number | undefined;
|
||||
minHeight?: string | number | undefined;
|
||||
minWidth?: string | number | undefined;
|
||||
width?: string | number | undefined;
|
||||
} & {
|
||||
$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;
|
||||
}, {
|
||||
getLayoutItem: (id: string) => {
|
||||
top: number;
|
||||
bottom: number;
|
||||
left: number;
|
||||
right: number;
|
||||
id: string;
|
||||
size: number;
|
||||
position: import("../../composables/layout.js").Position;
|
||||
} | undefined;
|
||||
items: import("vue").ComputedRef<{
|
||||
top: number;
|
||||
bottom: number;
|
||||
left: number;
|
||||
right: number;
|
||||
id: string;
|
||||
size: number;
|
||||
position: import("../../composables/layout.js").Position;
|
||||
}[]>;
|
||||
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
|
||||
style: import("vue").StyleValue;
|
||||
fullHeight: 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;
|
||||
};
|
||||
overlaps: import("vue").Prop<string[]>;
|
||||
fullHeight: BooleanConstructor;
|
||||
height: (NumberConstructor | StringConstructor)[];
|
||||
maxHeight: (NumberConstructor | StringConstructor)[];
|
||||
maxWidth: (NumberConstructor | StringConstructor)[];
|
||||
minHeight: (NumberConstructor | StringConstructor)[];
|
||||
minWidth: (NumberConstructor | StringConstructor)[];
|
||||
width: (NumberConstructor | StringConstructor)[];
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
class: import("vue").PropType<any>;
|
||||
style: {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
overlaps: import("vue").Prop<string[]>;
|
||||
fullHeight: BooleanConstructor;
|
||||
height: (NumberConstructor | StringConstructor)[];
|
||||
maxHeight: (NumberConstructor | StringConstructor)[];
|
||||
maxWidth: (NumberConstructor | StringConstructor)[];
|
||||
minHeight: (NumberConstructor | StringConstructor)[];
|
||||
minWidth: (NumberConstructor | StringConstructor)[];
|
||||
width: (NumberConstructor | StringConstructor)[];
|
||||
}>>;
|
||||
export type VLayout = InstanceType<typeof VLayout>;
|
||||
+42
@@ -0,0 +1,42 @@
|
||||
import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode } from "vue";
|
||||
// Styles
|
||||
import "./VLayout.css";
|
||||
|
||||
// Composables
|
||||
import { makeComponentProps } from "../../composables/component.js";
|
||||
import { makeDimensionProps, useDimension } from "../../composables/dimensions.js";
|
||||
import { createLayout, makeLayoutProps } from "../../composables/layout.js"; // Utilities
|
||||
import { genericComponent, propsFactory, useRender } from "../../util/index.js";
|
||||
export const makeVLayoutProps = propsFactory({
|
||||
...makeComponentProps(),
|
||||
...makeDimensionProps(),
|
||||
...makeLayoutProps()
|
||||
}, 'VLayout');
|
||||
export const VLayout = genericComponent()({
|
||||
name: 'VLayout',
|
||||
props: makeVLayoutProps(),
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
const {
|
||||
layoutClasses,
|
||||
layoutStyles,
|
||||
getLayoutItem,
|
||||
items,
|
||||
layoutRef
|
||||
} = createLayout(props);
|
||||
const {
|
||||
dimensionStyles
|
||||
} = useDimension(props);
|
||||
useRender(() => _createElementVNode("div", {
|
||||
"ref": layoutRef,
|
||||
"class": _normalizeClass([layoutClasses.value, props.class]),
|
||||
"style": _normalizeStyle([dimensionStyles.value, layoutStyles.value, props.style])
|
||||
}, [slots.default?.()]));
|
||||
return {
|
||||
getLayoutItem,
|
||||
items
|
||||
};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VLayout.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"VLayout.js","names":["makeComponentProps","makeDimensionProps","useDimension","createLayout","makeLayoutProps","genericComponent","propsFactory","useRender","makeVLayoutProps","VLayout","name","props","setup","slots","layoutClasses","layoutStyles","getLayoutItem","items","layoutRef","dimensionStyles","_createElementVNode","_normalizeClass","value","class","_normalizeStyle","style","default"],"sources":["../../../src/components/VLayout/VLayout.tsx"],"sourcesContent":["// Styles\nimport './VLayout.sass'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { createLayout, makeLayoutProps } from '@/composables/layout'\n\n// Utilities\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\nexport const makeVLayoutProps = propsFactory({\n ...makeComponentProps(),\n ...makeDimensionProps(),\n ...makeLayoutProps(),\n}, 'VLayout')\n\nexport const VLayout = genericComponent()({\n name: 'VLayout',\n\n props: makeVLayoutProps(),\n\n setup (props, { slots }) {\n const { layoutClasses, layoutStyles, getLayoutItem, items, layoutRef } = createLayout(props)\n const { dimensionStyles } = useDimension(props)\n\n useRender(() => (\n <div\n ref={ layoutRef }\n class={[\n layoutClasses.value,\n props.class,\n ]}\n style={[\n dimensionStyles.value,\n layoutStyles.value,\n props.style,\n ]}\n >\n { slots.default?.() }\n </div>\n ))\n\n return {\n getLayoutItem,\n items,\n }\n },\n})\n\nexport type VLayout = InstanceType<typeof VLayout>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,kBAAkB;AAAA,SAClBC,kBAAkB,EAAEC,YAAY;AAAA,SAChCC,YAAY,EAAEC,eAAe,uCAEtC;AAAA,SACSC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS;AAElD,OAAO,MAAMC,gBAAgB,GAAGF,YAAY,CAAC;EAC3C,GAAGN,kBAAkB,CAAC,CAAC;EACvB,GAAGC,kBAAkB,CAAC,CAAC;EACvB,GAAGG,eAAe,CAAC;AACrB,CAAC,EAAE,SAAS,CAAC;AAEb,OAAO,MAAMK,OAAO,GAAGJ,gBAAgB,CAAC,CAAC,CAAC;EACxCK,IAAI,EAAE,SAAS;EAEfC,KAAK,EAAEH,gBAAgB,CAAC,CAAC;EAEzBI,KAAKA,CAAED,KAAK,EAAE;IAAEE;EAAM,CAAC,EAAE;IACvB,MAAM;MAAEC,aAAa;MAAEC,YAAY;MAAEC,aAAa;MAAEC,KAAK;MAAEC;IAAU,CAAC,GAAGf,YAAY,CAACQ,KAAK,CAAC;IAC5F,MAAM;MAAEQ;IAAgB,CAAC,GAAGjB,YAAY,CAACS,KAAK,CAAC;IAE/CJ,SAAS,CAAC,MAAAa,mBAAA;MAAA,OAEAF,SAAS;MAAA,SAAAG,eAAA,CACR,CACLP,aAAa,CAACQ,KAAK,EACnBX,KAAK,CAACY,KAAK,CACZ;MAAA,SAAAC,eAAA,CACM,CACLL,eAAe,CAACG,KAAK,EACrBP,YAAY,CAACO,KAAK,EAClBX,KAAK,CAACc,KAAK,CACZ;IAAA,IAECZ,KAAK,CAACa,OAAO,GAAG,CAAC,EAEtB,CAAC;IAEF,OAAO;MACLV,aAAa;MACbC;IACF,CAAC;EACH;AACF,CAAC,CAAC","ignoreList":[]}
|
||||
+11
@@ -0,0 +1,11 @@
|
||||
@use '../../styles/tools'
|
||||
|
||||
@include tools.layer('components')
|
||||
.v-layout
|
||||
--v-scrollbar-offset: 0px
|
||||
display: flex
|
||||
flex: 1 1 auto
|
||||
|
||||
&--full-height
|
||||
--v-scrollbar-offset: inherit
|
||||
height: 100%
|
||||
+9
@@ -0,0 +1,9 @@
|
||||
@layer vuetify-components {
|
||||
.v-layout-item {
|
||||
position: absolute;
|
||||
transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.v-layout-item--absolute {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
+222
@@ -0,0 +1,222 @@
|
||||
|
||||
import type { PropType } from 'vue';
|
||||
export declare const makeVLayoutItemProps: <Defaults extends {
|
||||
class?: unknown;
|
||||
style?: unknown;
|
||||
name?: unknown;
|
||||
order?: unknown;
|
||||
absolute?: unknown;
|
||||
position?: unknown;
|
||||
size?: unknown;
|
||||
modelValue?: 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>;
|
||||
};
|
||||
name: unknown extends Defaults["name"] ? {
|
||||
type: StringConstructor;
|
||||
} : Omit<{
|
||||
type: StringConstructor;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["name"] ? string : string | Defaults["name"]>;
|
||||
default: unknown extends Defaults["name"] ? string : string | Defaults["name"];
|
||||
};
|
||||
order: unknown extends Defaults["order"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["order"] ? string | number : string | number | Defaults["order"]>;
|
||||
default: unknown extends Defaults["order"] ? string | number : Defaults["order"] | NonNullable<string | number>;
|
||||
};
|
||||
absolute: unknown extends Defaults["absolute"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["absolute"] ? boolean : boolean | Defaults["absolute"]>;
|
||||
default: unknown extends Defaults["absolute"] ? boolean : boolean | Defaults["absolute"];
|
||||
};
|
||||
position: unknown extends Defaults["position"] ? {
|
||||
type: PropType<'top' | 'right' | 'bottom' | 'left'>;
|
||||
required: true;
|
||||
} : Omit<{
|
||||
type: PropType<'top' | 'right' | 'bottom' | 'left'>;
|
||||
required: true;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["position"] ? "bottom" | "left" | "right" | "top" : "bottom" | "left" | "right" | "top" | Defaults["position"]>;
|
||||
default: unknown extends Defaults["position"] ? "bottom" | "left" | "right" | "top" : Defaults["position"] | NonNullable<"bottom" | "left" | "right" | "top">;
|
||||
};
|
||||
size: unknown extends Defaults["size"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["size"] ? string | number : string | number | Defaults["size"]>;
|
||||
default: unknown extends Defaults["size"] ? string | number : Defaults["size"] | NonNullable<string | number>;
|
||||
};
|
||||
modelValue: unknown extends Defaults["modelValue"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["modelValue"] ? boolean : boolean | Defaults["modelValue"]>;
|
||||
default: unknown extends Defaults["modelValue"] ? boolean : boolean | Defaults["modelValue"];
|
||||
};
|
||||
};
|
||||
export declare const VLayoutItem: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
order: string | number;
|
||||
absolute: boolean;
|
||||
position: "bottom" | "left" | "right" | "top";
|
||||
size: string | number;
|
||||
modelValue: boolean;
|
||||
} & {
|
||||
class?: any;
|
||||
name?: string | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
|
||||
style: import("vue").StyleValue;
|
||||
order: string | number;
|
||||
absolute: boolean;
|
||||
size: string | number;
|
||||
modelValue: 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;
|
||||
order: string | number;
|
||||
absolute: boolean;
|
||||
position: "bottom" | "left" | "right" | "top";
|
||||
size: string | number;
|
||||
modelValue: boolean;
|
||||
} & {
|
||||
class?: any;
|
||||
name?: string | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, () => JSX.Element, {}, {}, {}, {
|
||||
style: import("vue").StyleValue;
|
||||
order: string | number;
|
||||
absolute: boolean;
|
||||
size: string | number;
|
||||
modelValue: boolean;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
order: string | number;
|
||||
absolute: boolean;
|
||||
position: "bottom" | "left" | "right" | "top";
|
||||
size: string | number;
|
||||
modelValue: boolean;
|
||||
} & {
|
||||
class?: any;
|
||||
name?: string | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
|
||||
style: import("vue").StyleValue;
|
||||
order: string | number;
|
||||
absolute: boolean;
|
||||
size: string | number;
|
||||
modelValue: 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: PropType<import("../../composables/component.js").ClassValue>;
|
||||
style: {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
name: {
|
||||
type: StringConstructor;
|
||||
};
|
||||
order: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
absolute: BooleanConstructor;
|
||||
position: {
|
||||
type: PropType<'top' | 'right' | 'bottom' | 'left'>;
|
||||
required: true;
|
||||
};
|
||||
size: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
modelValue: BooleanConstructor;
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
class: PropType<import("../../composables/component.js").ClassValue>;
|
||||
style: {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
name: {
|
||||
type: StringConstructor;
|
||||
};
|
||||
order: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
absolute: BooleanConstructor;
|
||||
position: {
|
||||
type: PropType<'top' | 'right' | 'bottom' | 'left'>;
|
||||
required: true;
|
||||
};
|
||||
size: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
modelValue: BooleanConstructor;
|
||||
}>>;
|
||||
export type VLayoutItem = InstanceType<typeof VLayoutItem>;
|
||||
+46
@@ -0,0 +1,46 @@
|
||||
import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode } from "vue";
|
||||
// Styles
|
||||
import "./VLayoutItem.css";
|
||||
|
||||
// Composables
|
||||
import { makeComponentProps } from "../../composables/component.js";
|
||||
import { makeLayoutItemProps, useLayoutItem } from "../../composables/layout.js"; // Utilities
|
||||
import { computed, toRef } from 'vue';
|
||||
import { genericComponent, propsFactory } from "../../util/index.js"; // Types
|
||||
export const makeVLayoutItemProps = propsFactory({
|
||||
position: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
size: {
|
||||
type: [Number, String],
|
||||
default: 300
|
||||
},
|
||||
modelValue: Boolean,
|
||||
...makeComponentProps(),
|
||||
...makeLayoutItemProps()
|
||||
}, 'VLayoutItem');
|
||||
export const VLayoutItem = genericComponent()({
|
||||
name: 'VLayoutItem',
|
||||
props: makeVLayoutItemProps(),
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
const {
|
||||
layoutItemStyles
|
||||
} = useLayoutItem({
|
||||
id: props.name,
|
||||
order: computed(() => parseInt(props.order, 10)),
|
||||
position: toRef(() => props.position),
|
||||
elementSize: toRef(() => props.size),
|
||||
layoutSize: toRef(() => props.size),
|
||||
active: toRef(() => props.modelValue),
|
||||
absolute: toRef(() => props.absolute)
|
||||
});
|
||||
return () => _createElementVNode("div", {
|
||||
"class": _normalizeClass(['v-layout-item', props.class]),
|
||||
"style": _normalizeStyle([layoutItemStyles.value, props.style])
|
||||
}, [slots.default?.()]);
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VLayoutItem.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"VLayoutItem.js","names":["makeComponentProps","makeLayoutItemProps","useLayoutItem","computed","toRef","genericComponent","propsFactory","makeVLayoutItemProps","position","type","String","required","size","Number","default","modelValue","Boolean","VLayoutItem","name","props","setup","slots","layoutItemStyles","id","order","parseInt","elementSize","layoutSize","active","absolute","_createElementVNode","_normalizeClass","class","_normalizeStyle","value","style"],"sources":["../../../src/components/VLayout/VLayoutItem.tsx"],"sourcesContent":["// Styles\nimport './VLayoutItem.sass'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { makeLayoutItemProps, useLayoutItem } from '@/composables/layout'\n\n// Utilities\nimport { computed, toRef } from 'vue'\nimport { genericComponent, propsFactory } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\nexport const makeVLayoutItemProps = propsFactory({\n position: {\n type: String as PropType<'top' | 'right' | 'bottom' | 'left'>,\n required: true,\n },\n size: {\n type: [Number, String],\n default: 300,\n },\n modelValue: Boolean,\n\n ...makeComponentProps(),\n ...makeLayoutItemProps(),\n}, 'VLayoutItem')\n\nexport const VLayoutItem = genericComponent()({\n name: 'VLayoutItem',\n\n props: makeVLayoutItemProps(),\n\n setup (props, { slots }) {\n const { layoutItemStyles } = useLayoutItem({\n id: props.name,\n order: computed(() => parseInt(props.order, 10)),\n position: toRef(() => props.position),\n elementSize: toRef(() => props.size),\n layoutSize: toRef(() => props.size),\n active: toRef(() => props.modelValue),\n absolute: toRef(() => props.absolute),\n })\n\n return () => (\n <div\n class={[\n 'v-layout-item',\n props.class,\n ]}\n style={[\n layoutItemStyles.value,\n props.style,\n ]}\n >\n { slots.default?.() }\n </div>\n )\n },\n})\n\nexport type VLayoutItem = InstanceType<typeof VLayoutItem>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,kBAAkB;AAAA,SAClBC,mBAAmB,EAAEC,aAAa,uCAE3C;AACA,SAASC,QAAQ,EAAEC,KAAK,QAAQ,KAAK;AAAA,SAC5BC,gBAAgB,EAAEC,YAAY,+BAEvC;AAGA,OAAO,MAAMC,oBAAoB,GAAGD,YAAY,CAAC;EAC/CE,QAAQ,EAAE;IACRC,IAAI,EAAEC,MAAuD;IAC7DC,QAAQ,EAAE;EACZ,CAAC;EACDC,IAAI,EAAE;IACJH,IAAI,EAAE,CAACI,MAAM,EAAEH,MAAM,CAAC;IACtBI,OAAO,EAAE;EACX,CAAC;EACDC,UAAU,EAAEC,OAAO;EAEnB,GAAGhB,kBAAkB,CAAC,CAAC;EACvB,GAAGC,mBAAmB,CAAC;AACzB,CAAC,EAAE,aAAa,CAAC;AAEjB,OAAO,MAAMgB,WAAW,GAAGZ,gBAAgB,CAAC,CAAC,CAAC;EAC5Ca,IAAI,EAAE,aAAa;EAEnBC,KAAK,EAAEZ,oBAAoB,CAAC,CAAC;EAE7Ba,KAAKA,CAAED,KAAK,EAAE;IAAEE;EAAM,CAAC,EAAE;IACvB,MAAM;MAAEC;IAAiB,CAAC,GAAGpB,aAAa,CAAC;MACzCqB,EAAE,EAAEJ,KAAK,CAACD,IAAI;MACdM,KAAK,EAAErB,QAAQ,CAAC,MAAMsB,QAAQ,CAACN,KAAK,CAACK,KAAK,EAAE,EAAE,CAAC,CAAC;MAChDhB,QAAQ,EAAEJ,KAAK,CAAC,MAAMe,KAAK,CAACX,QAAQ,CAAC;MACrCkB,WAAW,EAAEtB,KAAK,CAAC,MAAMe,KAAK,CAACP,IAAI,CAAC;MACpCe,UAAU,EAAEvB,KAAK,CAAC,MAAMe,KAAK,CAACP,IAAI,CAAC;MACnCgB,MAAM,EAAExB,KAAK,CAAC,MAAMe,KAAK,CAACJ,UAAU,CAAC;MACrCc,QAAQ,EAAEzB,KAAK,CAAC,MAAMe,KAAK,CAACU,QAAQ;IACtC,CAAC,CAAC;IAEF,OAAO,MAAAC,mBAAA;MAAA,SAAAC,eAAA,CAEI,CACL,eAAe,EACfZ,KAAK,CAACa,KAAK,CACZ;MAAA,SAAAC,eAAA,CACM,CACLX,gBAAgB,CAACY,KAAK,EACtBf,KAAK,CAACgB,KAAK,CACZ;IAAA,IAECd,KAAK,CAACP,OAAO,GAAG,CAAC,EAEtB;EACH;AACF,CAAC,CAAC","ignoreList":[]}
|
||||
+10
@@ -0,0 +1,10 @@
|
||||
@use '../../styles/settings'
|
||||
@use '../../styles/tools'
|
||||
|
||||
@include tools.layer('components')
|
||||
.v-layout-item
|
||||
position: absolute
|
||||
transition: 0.2s settings.$standard-easing
|
||||
|
||||
.v-layout-item--absolute
|
||||
position: absolute
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
export { VLayout } from './VLayout.js';
|
||||
export { VLayoutItem } from './VLayoutItem.js';
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
export { VLayout } from "./VLayout.js";
|
||||
export { VLayoutItem } from "./VLayoutItem.js";
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"index.js","names":["VLayout","VLayoutItem"],"sources":["../../../src/components/VLayout/index.ts"],"sourcesContent":["export { VLayout } from './VLayout'\nexport { VLayoutItem } from './VLayoutItem'\n"],"mappings":"SAASA,OAAO;AAAA,SACPC,WAAW","ignoreList":[]}
|
||||
Reference in New Issue
Block a user