routie dev init since i didn't adhere to any proper guidance up until now
This commit is contained in:
+26
@@ -0,0 +1,26 @@
|
||||
@layer vuetify-components {
|
||||
.v-responsive {
|
||||
display: flex;
|
||||
flex: 1 0 auto;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.v-responsive--inline {
|
||||
display: inline-flex;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.v-responsive__content {
|
||||
flex: 1 0 0px;
|
||||
max-width: 100%;
|
||||
}
|
||||
.v-responsive__sizer ~ .v-responsive__content {
|
||||
margin-inline-start: -100%;
|
||||
}
|
||||
.v-responsive__sizer {
|
||||
flex: 1 0 0px;
|
||||
transition: padding-bottom 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
+224
@@ -0,0 +1,224 @@
|
||||
|
||||
export type VResponsiveSlots = {
|
||||
default: never;
|
||||
additional: never;
|
||||
};
|
||||
export declare function useAspectStyles(props: {
|
||||
aspectRatio?: string | number;
|
||||
}): {
|
||||
aspectStyles: import("vue").ComputedRef<{
|
||||
paddingBottom: string;
|
||||
} | undefined>;
|
||||
};
|
||||
export declare const makeVResponsiveProps: <Defaults extends {
|
||||
class?: unknown;
|
||||
style?: unknown;
|
||||
height?: unknown;
|
||||
maxHeight?: unknown;
|
||||
maxWidth?: unknown;
|
||||
minHeight?: unknown;
|
||||
minWidth?: unknown;
|
||||
width?: unknown;
|
||||
aspectRatio?: unknown;
|
||||
contentClass?: unknown;
|
||||
inline?: 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>;
|
||||
};
|
||||
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>;
|
||||
};
|
||||
aspectRatio: unknown extends Defaults["aspectRatio"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: import("vue").PropType<unknown extends Defaults["aspectRatio"] ? string | number : string | number | Defaults["aspectRatio"]>;
|
||||
default: unknown extends Defaults["aspectRatio"] ? string | number : Defaults["aspectRatio"] | NonNullable<string | number>;
|
||||
};
|
||||
contentClass: unknown extends Defaults["contentClass"] ? null : {
|
||||
type: import("vue").PropType<unknown extends Defaults["contentClass"] ? any : any>;
|
||||
default: unknown extends Defaults["contentClass"] ? any : any;
|
||||
};
|
||||
inline: unknown extends Defaults["inline"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["inline"] ? boolean : boolean | Defaults["inline"]>;
|
||||
default: unknown extends Defaults["inline"] ? boolean : boolean | Defaults["inline"];
|
||||
};
|
||||
};
|
||||
export declare const VResponsive: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
inline: 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;
|
||||
aspectRatio?: string | number | undefined;
|
||||
contentClass?: any;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
additional?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
additional?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:additional"?: false | (() => import("vue").VNodeChild) | 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;
|
||||
inline: boolean;
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
additional: () => 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;
|
||||
inline: 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;
|
||||
aspectRatio?: string | number | undefined;
|
||||
contentClass?: any;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
additional?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
additional?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:additional"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {}, {}, {}, {}, {
|
||||
style: import("vue").StyleValue;
|
||||
inline: boolean;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
inline: 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;
|
||||
aspectRatio?: string | number | undefined;
|
||||
contentClass?: any;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
additional?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
additional?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:additional"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
|
||||
style: import("vue").StyleValue;
|
||||
inline: boolean;
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
additional: () => 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;
|
||||
};
|
||||
height: (NumberConstructor | StringConstructor)[];
|
||||
maxHeight: (NumberConstructor | StringConstructor)[];
|
||||
maxWidth: (NumberConstructor | StringConstructor)[];
|
||||
minHeight: (NumberConstructor | StringConstructor)[];
|
||||
minWidth: (NumberConstructor | StringConstructor)[];
|
||||
width: (NumberConstructor | StringConstructor)[];
|
||||
aspectRatio: (NumberConstructor | StringConstructor)[];
|
||||
contentClass: null;
|
||||
inline: BooleanConstructor;
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
class: import("vue").PropType<any>;
|
||||
style: {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
height: (NumberConstructor | StringConstructor)[];
|
||||
maxHeight: (NumberConstructor | StringConstructor)[];
|
||||
maxWidth: (NumberConstructor | StringConstructor)[];
|
||||
minHeight: (NumberConstructor | StringConstructor)[];
|
||||
minWidth: (NumberConstructor | StringConstructor)[];
|
||||
width: (NumberConstructor | StringConstructor)[];
|
||||
aspectRatio: (NumberConstructor | StringConstructor)[];
|
||||
contentClass: null;
|
||||
inline: BooleanConstructor;
|
||||
}>>;
|
||||
export type VResponsive = InstanceType<typeof VResponsive>;
|
||||
+53
@@ -0,0 +1,53 @@
|
||||
import { normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass } from "vue";
|
||||
// Styles
|
||||
import "./VResponsive.css";
|
||||
|
||||
// Composables
|
||||
import { makeComponentProps } from "../../composables/component.js";
|
||||
import { makeDimensionProps, useDimension } from "../../composables/dimensions.js"; // Utilities
|
||||
import { computed } from 'vue';
|
||||
import { genericComponent, propsFactory, useRender } from "../../util/index.js";
|
||||
export function useAspectStyles(props) {
|
||||
return {
|
||||
aspectStyles: computed(() => {
|
||||
const ratio = Number(props.aspectRatio);
|
||||
return ratio ? {
|
||||
paddingBottom: String(1 / ratio * 100) + '%'
|
||||
} : undefined;
|
||||
})
|
||||
};
|
||||
}
|
||||
export const makeVResponsiveProps = propsFactory({
|
||||
aspectRatio: [String, Number],
|
||||
contentClass: null,
|
||||
inline: Boolean,
|
||||
...makeComponentProps(),
|
||||
...makeDimensionProps()
|
||||
}, 'VResponsive');
|
||||
export const VResponsive = genericComponent()({
|
||||
name: 'VResponsive',
|
||||
props: makeVResponsiveProps(),
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
const {
|
||||
aspectStyles
|
||||
} = useAspectStyles(props);
|
||||
const {
|
||||
dimensionStyles
|
||||
} = useDimension(props);
|
||||
useRender(() => _createElementVNode("div", {
|
||||
"class": _normalizeClass(['v-responsive', {
|
||||
'v-responsive--inline': props.inline
|
||||
}, props.class]),
|
||||
"style": _normalizeStyle([dimensionStyles.value, props.style])
|
||||
}, [_createElementVNode("div", {
|
||||
"class": "v-responsive__sizer",
|
||||
"style": _normalizeStyle(aspectStyles.value)
|
||||
}, null), slots.additional?.(), slots.default && _createElementVNode("div", {
|
||||
"class": _normalizeClass(['v-responsive__content', props.contentClass])
|
||||
}, [slots.default()])]));
|
||||
return {};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VResponsive.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"VResponsive.js","names":["makeComponentProps","makeDimensionProps","useDimension","computed","genericComponent","propsFactory","useRender","useAspectStyles","props","aspectStyles","ratio","Number","aspectRatio","paddingBottom","String","undefined","makeVResponsiveProps","contentClass","inline","Boolean","VResponsive","name","setup","slots","dimensionStyles","_createElementVNode","_normalizeClass","class","_normalizeStyle","value","style","additional","default"],"sources":["../../../src/components/VResponsive/VResponsive.tsx"],"sourcesContent":["// Styles\nimport './VResponsive.sass'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\n\n// Utilities\nimport { computed } from 'vue'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\nexport type VResponsiveSlots = {\n default: never\n additional: never\n}\n\nexport function useAspectStyles (props: { aspectRatio?: string | number }) {\n return {\n aspectStyles: computed(() => {\n const ratio = Number(props.aspectRatio)\n\n return ratio\n ? { paddingBottom: String(1 / ratio * 100) + '%' }\n : undefined\n }),\n }\n}\n\nexport const makeVResponsiveProps = propsFactory({\n aspectRatio: [String, Number],\n contentClass: null,\n inline: Boolean,\n\n ...makeComponentProps(),\n ...makeDimensionProps(),\n}, 'VResponsive')\n\nexport const VResponsive = genericComponent<VResponsiveSlots>()({\n name: 'VResponsive',\n\n props: makeVResponsiveProps(),\n\n setup (props, { slots }) {\n const { aspectStyles } = useAspectStyles(props)\n const { dimensionStyles } = useDimension(props)\n\n useRender(() => (\n <div\n class={[\n 'v-responsive',\n { 'v-responsive--inline': props.inline },\n props.class,\n ]}\n style={[\n dimensionStyles.value,\n props.style,\n ]}\n >\n <div class=\"v-responsive__sizer\" style={ aspectStyles.value } />\n\n { slots.additional?.() }\n\n { slots.default && (\n <div class={['v-responsive__content', props.contentClass]}>{ slots.default() }</div>\n )}\n </div>\n ))\n\n return {}\n },\n})\n\nexport type VResponsive = InstanceType<typeof VResponsive>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,kBAAkB;AAAA,SAClBC,kBAAkB,EAAEC,YAAY,2CAEzC;AACA,SAASC,QAAQ,QAAQ,KAAK;AAAA,SACrBC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS;AAOlD,OAAO,SAASC,eAAeA,CAAEC,KAAwC,EAAE;EACzE,OAAO;IACLC,YAAY,EAAEN,QAAQ,CAAC,MAAM;MAC3B,MAAMO,KAAK,GAAGC,MAAM,CAACH,KAAK,CAACI,WAAW,CAAC;MAEvC,OAAOF,KAAK,GACR;QAAEG,aAAa,EAAEC,MAAM,CAAC,CAAC,GAAGJ,KAAK,GAAG,GAAG,CAAC,GAAG;MAAI,CAAC,GAChDK,SAAS;IACf,CAAC;EACH,CAAC;AACH;AAEA,OAAO,MAAMC,oBAAoB,GAAGX,YAAY,CAAC;EAC/CO,WAAW,EAAE,CAACE,MAAM,EAAEH,MAAM,CAAC;EAC7BM,YAAY,EAAE,IAAI;EAClBC,MAAM,EAAEC,OAAO;EAEf,GAAGnB,kBAAkB,CAAC,CAAC;EACvB,GAAGC,kBAAkB,CAAC;AACxB,CAAC,EAAE,aAAa,CAAC;AAEjB,OAAO,MAAMmB,WAAW,GAAGhB,gBAAgB,CAAmB,CAAC,CAAC;EAC9DiB,IAAI,EAAE,aAAa;EAEnBb,KAAK,EAAEQ,oBAAoB,CAAC,CAAC;EAE7BM,KAAKA,CAAEd,KAAK,EAAE;IAAEe;EAAM,CAAC,EAAE;IACvB,MAAM;MAAEd;IAAa,CAAC,GAAGF,eAAe,CAACC,KAAK,CAAC;IAC/C,MAAM;MAAEgB;IAAgB,CAAC,GAAGtB,YAAY,CAACM,KAAK,CAAC;IAE/CF,SAAS,CAAC,MAAAmB,mBAAA;MAAA,SAAAC,eAAA,CAEC,CACL,cAAc,EACd;QAAE,sBAAsB,EAAElB,KAAK,CAACU;MAAO,CAAC,EACxCV,KAAK,CAACmB,KAAK,CACZ;MAAA,SAAAC,eAAA,CACM,CACLJ,eAAe,CAACK,KAAK,EACrBrB,KAAK,CAACsB,KAAK,CACZ;IAAA,IAAAL,mBAAA;MAAA;MAAA,SAAAG,eAAA,CAEwCnB,YAAY,CAACoB,KAAK;IAAA,UAEzDN,KAAK,CAACQ,UAAU,GAAG,CAAC,EAEpBR,KAAK,CAACS,OAAO,IAAAP,mBAAA;MAAA,SAAAC,eAAA,CACD,CAAC,uBAAuB,EAAElB,KAAK,CAACS,YAAY,CAAC;IAAA,IAAIM,KAAK,CAACS,OAAO,CAAC,CAAC,EAC7E,EAEJ,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC","ignoreList":[]}
|
||||
+27
@@ -0,0 +1,27 @@
|
||||
@use '../../styles/settings'
|
||||
@use '../../styles/tools'
|
||||
|
||||
@include tools.layer('components')
|
||||
.v-responsive
|
||||
display: flex
|
||||
flex: 1 0 auto
|
||||
max-height: 100%
|
||||
max-width: 100%
|
||||
overflow: hidden
|
||||
position: relative
|
||||
|
||||
&--inline
|
||||
display: inline-flex
|
||||
flex: 0 0 auto
|
||||
|
||||
.v-responsive__content
|
||||
flex: 1 0 0px
|
||||
max-width: 100%
|
||||
|
||||
.v-responsive__sizer ~ .v-responsive__content
|
||||
margin-inline-start: -100%
|
||||
|
||||
.v-responsive__sizer
|
||||
flex: 1 0 0px
|
||||
transition: padding-bottom 0.2s settings.$standard-easing
|
||||
pointer-events: none
|
||||
+1
@@ -0,0 +1 @@
|
||||
export { VResponsive } from './VResponsive.js';
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
export { VResponsive } from "./VResponsive.js";
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"index.js","names":["VResponsive"],"sources":["../../../src/components/VResponsive/index.ts"],"sourcesContent":["export { VResponsive } from './VResponsive'\n"],"mappings":"SAASA,WAAW","ignoreList":[]}
|
||||
Reference in New Issue
Block a user