routie dev init since i didn't adhere to any proper guidance up until now
This commit is contained in:
+18
@@ -0,0 +1,18 @@
|
||||
@layer vuetify-components {
|
||||
.v-messages {
|
||||
flex: 1 1 auto;
|
||||
font-size: 12px;
|
||||
min-height: 14px;
|
||||
min-width: 1px;
|
||||
opacity: var(--v-medium-emphasis-opacity);
|
||||
position: relative;
|
||||
}
|
||||
.v-messages__message {
|
||||
line-height: 12px;
|
||||
word-break: break-word;
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
hyphens: auto;
|
||||
transition-duration: 150ms;
|
||||
}
|
||||
}
|
||||
+293
@@ -0,0 +1,293 @@
|
||||
|
||||
import type { Component, PropType } from 'vue';
|
||||
export type VMessageSlot = {
|
||||
message: string;
|
||||
};
|
||||
export type VMessagesSlots = {
|
||||
message: VMessageSlot;
|
||||
};
|
||||
export declare const makeVMessagesProps: <Defaults extends {
|
||||
class?: unknown;
|
||||
style?: unknown;
|
||||
transition?: unknown;
|
||||
active?: unknown;
|
||||
color?: unknown;
|
||||
messages?: 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>;
|
||||
};
|
||||
transition: unknown extends Defaults["transition"] ? {
|
||||
type: PropType<string | boolean | {
|
||||
component: Component;
|
||||
leaveAbsolute: boolean;
|
||||
group: boolean;
|
||||
} | (import("vue").TransitionProps & {
|
||||
component?: Component;
|
||||
}) | null>;
|
||||
default: {
|
||||
component: Component;
|
||||
leaveAbsolute: boolean;
|
||||
group: boolean;
|
||||
} | NonNullable<string | boolean | (import("vue").TransitionProps & {
|
||||
component?: Component;
|
||||
}) | null>;
|
||||
} : Omit<{
|
||||
type: PropType<string | boolean | {
|
||||
component: Component;
|
||||
leaveAbsolute: boolean;
|
||||
group: boolean;
|
||||
} | (import("vue").TransitionProps & {
|
||||
component?: Component;
|
||||
}) | null>;
|
||||
default: {
|
||||
component: Component;
|
||||
leaveAbsolute: boolean;
|
||||
group: boolean;
|
||||
} | NonNullable<string | boolean | (import("vue").TransitionProps & {
|
||||
component?: Component;
|
||||
}) | null>;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["transition"] ? string | boolean | {
|
||||
component: Component;
|
||||
leaveAbsolute: boolean;
|
||||
group: boolean;
|
||||
} | (import("vue").TransitionProps & {
|
||||
component?: Component;
|
||||
}) | null : string | boolean | {
|
||||
component: Component;
|
||||
leaveAbsolute: boolean;
|
||||
group: boolean;
|
||||
} | Defaults["transition"] | (import("vue").TransitionProps & {
|
||||
component?: Component;
|
||||
}) | null>;
|
||||
default: unknown extends Defaults["transition"] ? string | boolean | {
|
||||
component: Component;
|
||||
leaveAbsolute: boolean;
|
||||
group: boolean;
|
||||
} | (import("vue").TransitionProps & {
|
||||
component?: Component;
|
||||
}) | null : Defaults["transition"] | NonNullable<string | boolean | {
|
||||
component: Component;
|
||||
leaveAbsolute: boolean;
|
||||
group: boolean;
|
||||
} | (import("vue").TransitionProps & {
|
||||
component?: Component;
|
||||
}) | null>;
|
||||
};
|
||||
active: unknown extends Defaults["active"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["active"] ? boolean : boolean | Defaults["active"]>;
|
||||
default: unknown extends Defaults["active"] ? boolean : boolean | Defaults["active"];
|
||||
};
|
||||
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"];
|
||||
};
|
||||
messages: unknown extends Defaults["messages"] ? {
|
||||
type: PropType<string | readonly string[]>;
|
||||
default: () => never[];
|
||||
} : Omit<{
|
||||
type: PropType<string | readonly string[]>;
|
||||
default: () => never[];
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["messages"] ? string | readonly string[] : string | readonly string[] | Defaults["messages"]>;
|
||||
default: unknown extends Defaults["messages"] ? string | readonly string[] : Defaults["messages"] | NonNullable<string | readonly string[]>;
|
||||
};
|
||||
};
|
||||
export declare const VMessages: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
transition: string | boolean | {
|
||||
component: Component;
|
||||
leaveAbsolute: boolean;
|
||||
group: boolean;
|
||||
} | (import("vue").TransitionProps & {
|
||||
component?: Component;
|
||||
}) | null;
|
||||
active: boolean;
|
||||
messages: string | readonly string[];
|
||||
} & {
|
||||
class?: any;
|
||||
color?: string | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
message?: ((arg: VMessageSlot) => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | {} | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
message?: false | ((arg: VMessageSlot) => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:message"?: false | ((arg: VMessageSlot) => 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;
|
||||
transition: string | boolean | {
|
||||
component: Component;
|
||||
leaveAbsolute: boolean;
|
||||
group: boolean;
|
||||
} | (import("vue").TransitionProps & {
|
||||
component?: Component;
|
||||
}) | null;
|
||||
active: boolean;
|
||||
messages: string | readonly string[];
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
message: (arg: VMessageSlot) => 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;
|
||||
transition: string | boolean | {
|
||||
component: Component;
|
||||
leaveAbsolute: boolean;
|
||||
group: boolean;
|
||||
} | (import("vue").TransitionProps & {
|
||||
component?: Component;
|
||||
}) | null;
|
||||
active: boolean;
|
||||
messages: string | readonly string[];
|
||||
} & {
|
||||
class?: any;
|
||||
color?: string | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
message?: ((arg: VMessageSlot) => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | {} | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
message?: false | ((arg: VMessageSlot) => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:message"?: false | ((arg: VMessageSlot) => import("vue").VNodeChild) | undefined;
|
||||
}, {}, {}, {}, {}, {
|
||||
style: import("vue").StyleValue;
|
||||
transition: string | boolean | {
|
||||
component: Component;
|
||||
leaveAbsolute: boolean;
|
||||
group: boolean;
|
||||
} | (import("vue").TransitionProps & {
|
||||
component?: Component;
|
||||
}) | null;
|
||||
active: boolean;
|
||||
messages: string | readonly string[];
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
transition: string | boolean | {
|
||||
component: Component;
|
||||
leaveAbsolute: boolean;
|
||||
group: boolean;
|
||||
} | (import("vue").TransitionProps & {
|
||||
component?: Component;
|
||||
}) | null;
|
||||
active: boolean;
|
||||
messages: string | readonly string[];
|
||||
} & {
|
||||
class?: any;
|
||||
color?: string | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
message?: ((arg: VMessageSlot) => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | {} | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
message?: false | ((arg: VMessageSlot) => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:message"?: false | ((arg: VMessageSlot) => import("vue").VNodeChild) | undefined;
|
||||
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
|
||||
style: import("vue").StyleValue;
|
||||
transition: string | boolean | {
|
||||
component: Component;
|
||||
leaveAbsolute: boolean;
|
||||
group: boolean;
|
||||
} | (import("vue").TransitionProps & {
|
||||
component?: Component;
|
||||
}) | null;
|
||||
active: boolean;
|
||||
messages: string | readonly string[];
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
message: (arg: VMessageSlot) => 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;
|
||||
};
|
||||
transition: {
|
||||
type: PropType<string | boolean | {
|
||||
component: Component;
|
||||
leaveAbsolute: boolean;
|
||||
group: boolean;
|
||||
} | (import("vue").TransitionProps & {
|
||||
component?: Component;
|
||||
}) | null>;
|
||||
default: {
|
||||
component: Component;
|
||||
leaveAbsolute: boolean;
|
||||
group: boolean;
|
||||
} | NonNullable<string | boolean | (import("vue").TransitionProps & {
|
||||
component?: Component;
|
||||
}) | null>;
|
||||
};
|
||||
active: BooleanConstructor;
|
||||
color: StringConstructor;
|
||||
messages: {
|
||||
type: PropType<string | readonly string[]>;
|
||||
default: () => never[];
|
||||
};
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
class: PropType<import("../../composables/component.js").ClassValue>;
|
||||
style: {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
transition: {
|
||||
type: PropType<string | boolean | {
|
||||
component: Component;
|
||||
leaveAbsolute: boolean;
|
||||
group: boolean;
|
||||
} | (import("vue").TransitionProps & {
|
||||
component?: Component;
|
||||
}) | null>;
|
||||
default: {
|
||||
component: Component;
|
||||
leaveAbsolute: boolean;
|
||||
group: boolean;
|
||||
} | NonNullable<string | boolean | (import("vue").TransitionProps & {
|
||||
component?: Component;
|
||||
}) | null>;
|
||||
};
|
||||
active: BooleanConstructor;
|
||||
color: StringConstructor;
|
||||
messages: {
|
||||
type: PropType<string | readonly string[]>;
|
||||
default: () => never[];
|
||||
};
|
||||
}>>;
|
||||
export type VMessages = InstanceType<typeof VMessages>;
|
||||
+55
@@ -0,0 +1,55 @@
|
||||
import { createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createVNode as _createVNode } from "vue";
|
||||
// Styles
|
||||
import "./VMessages.css";
|
||||
|
||||
// Components
|
||||
import { VSlideYTransition } from "../transitions/index.js"; // Composables
|
||||
import { useTextColor } from "../../composables/color.js";
|
||||
import { makeComponentProps } from "../../composables/component.js";
|
||||
import { makeTransitionProps, MaybeTransition } from "../../composables/transition.js"; // Utilities
|
||||
import { computed } from 'vue';
|
||||
import { genericComponent, propsFactory, useRender, wrapInArray } from "../../util/index.js"; // Types
|
||||
export const makeVMessagesProps = propsFactory({
|
||||
active: Boolean,
|
||||
color: String,
|
||||
messages: {
|
||||
type: [Array, String],
|
||||
default: () => []
|
||||
},
|
||||
...makeComponentProps(),
|
||||
...makeTransitionProps({
|
||||
transition: {
|
||||
component: VSlideYTransition,
|
||||
leaveAbsolute: true,
|
||||
group: true
|
||||
}
|
||||
})
|
||||
}, 'VMessages');
|
||||
export const VMessages = genericComponent()({
|
||||
name: 'VMessages',
|
||||
props: makeVMessagesProps(),
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
const messages = computed(() => wrapInArray(props.messages));
|
||||
const {
|
||||
textColorClasses,
|
||||
textColorStyles
|
||||
} = useTextColor(() => props.color);
|
||||
useRender(() => _createVNode(MaybeTransition, {
|
||||
"transition": props.transition,
|
||||
"tag": "div",
|
||||
"class": _normalizeClass(['v-messages', textColorClasses.value, props.class]),
|
||||
"style": _normalizeStyle([textColorStyles.value, props.style])
|
||||
}, {
|
||||
default: () => [props.active && messages.value.map((message, i) => _createElementVNode("div", {
|
||||
"class": "v-messages__message",
|
||||
"key": `${i}-${messages.value}`
|
||||
}, [slots.message ? slots.message({
|
||||
message
|
||||
}) : message]))]
|
||||
}));
|
||||
return {};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VMessages.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"VMessages.js","names":["VSlideYTransition","useTextColor","makeComponentProps","makeTransitionProps","MaybeTransition","computed","genericComponent","propsFactory","useRender","wrapInArray","makeVMessagesProps","active","Boolean","color","String","messages","type","Array","default","transition","component","leaveAbsolute","group","VMessages","name","props","setup","slots","textColorClasses","textColorStyles","_createVNode","_normalizeClass","value","class","_normalizeStyle","style","map","message","i","_createElementVNode"],"sources":["../../../src/components/VMessages/VMessages.tsx"],"sourcesContent":["// Styles\nimport './VMessages.sass'\n\n// Components\nimport { VSlideYTransition } from '@/components/transitions'\n\n// Composables\nimport { useTextColor } from '@/composables/color'\nimport { makeComponentProps } from '@/composables/component'\nimport { makeTransitionProps, MaybeTransition } from '@/composables/transition'\n\n// Utilities\nimport { computed } from 'vue'\nimport { genericComponent, propsFactory, useRender, wrapInArray } from '@/util'\n\n// Types\nimport type { Component, PropType } from 'vue'\n\nexport type VMessageSlot = {\n message: string\n}\n\nexport type VMessagesSlots = {\n message: VMessageSlot\n}\n\nexport const makeVMessagesProps = propsFactory({\n active: Boolean,\n color: String,\n messages: {\n type: [Array, String] as PropType<string | readonly string[]>,\n default: () => ([]),\n },\n\n ...makeComponentProps(),\n ...makeTransitionProps({\n transition: {\n component: VSlideYTransition as Component,\n leaveAbsolute: true,\n group: true,\n },\n }),\n}, 'VMessages')\n\nexport const VMessages = genericComponent<VMessagesSlots>()({\n name: 'VMessages',\n\n props: makeVMessagesProps(),\n\n setup (props, { slots }) {\n const messages = computed(() => wrapInArray(props.messages))\n const { textColorClasses, textColorStyles } = useTextColor(() => props.color)\n\n useRender(() => (\n <MaybeTransition\n transition={ props.transition }\n tag=\"div\"\n class={[\n 'v-messages',\n textColorClasses.value,\n props.class,\n ]}\n style={[\n textColorStyles.value,\n props.style,\n ]}\n >\n { props.active && (\n messages.value.map((message, i) => (\n <div\n class=\"v-messages__message\"\n key={ `${i}-${messages.value}` }\n >\n { slots.message ? slots.message({ message }) : message }\n </div>\n ))\n )}\n </MaybeTransition>\n ))\n\n return {}\n },\n})\n\nexport type VMessages = InstanceType<typeof VMessages>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,iBAAiB,mCAE1B;AAAA,SACSC,YAAY;AAAA,SACZC,kBAAkB;AAAA,SAClBC,mBAAmB,EAAEC,eAAe,2CAE7C;AACA,SAASC,QAAQ,QAAQ,KAAK;AAAA,SACrBC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS,EAAEC,WAAW,+BAE/D;AAWA,OAAO,MAAMC,kBAAkB,GAAGH,YAAY,CAAC;EAC7CI,MAAM,EAAEC,OAAO;EACfC,KAAK,EAAEC,MAAM;EACbC,QAAQ,EAAE;IACRC,IAAI,EAAE,CAACC,KAAK,EAAEH,MAAM,CAAyC;IAC7DI,OAAO,EAAEA,CAAA,KAAO;EAClB,CAAC;EAED,GAAGhB,kBAAkB,CAAC,CAAC;EACvB,GAAGC,mBAAmB,CAAC;IACrBgB,UAAU,EAAE;MACVC,SAAS,EAAEpB,iBAA8B;MACzCqB,aAAa,EAAE,IAAI;MACnBC,KAAK,EAAE;IACT;EACF,CAAC;AACH,CAAC,EAAE,WAAW,CAAC;AAEf,OAAO,MAAMC,SAAS,GAAGjB,gBAAgB,CAAiB,CAAC,CAAC;EAC1DkB,IAAI,EAAE,WAAW;EAEjBC,KAAK,EAAEf,kBAAkB,CAAC,CAAC;EAE3BgB,KAAKA,CAAED,KAAK,EAAE;IAAEE;EAAM,CAAC,EAAE;IACvB,MAAMZ,QAAQ,GAAGV,QAAQ,CAAC,MAAMI,WAAW,CAACgB,KAAK,CAACV,QAAQ,CAAC,CAAC;IAC5D,MAAM;MAAEa,gBAAgB;MAAEC;IAAgB,CAAC,GAAG5B,YAAY,CAAC,MAAMwB,KAAK,CAACZ,KAAK,CAAC;IAE7EL,SAAS,CAAC,MAAAsB,YAAA,CAAA1B,eAAA;MAAA,cAEOqB,KAAK,CAACN,UAAU;MAAA;MAAA,SAAAY,eAAA,CAEtB,CACL,YAAY,EACZH,gBAAgB,CAACI,KAAK,EACtBP,KAAK,CAACQ,KAAK,CACZ;MAAA,SAAAC,eAAA,CACM,CACLL,eAAe,CAACG,KAAK,EACrBP,KAAK,CAACU,KAAK,CACZ;IAAA;MAAAjB,OAAA,EAAAA,CAAA,MAECO,KAAK,CAACd,MAAM,IACZI,QAAQ,CAACiB,KAAK,CAACI,GAAG,CAAC,CAACC,OAAO,EAAEC,CAAC,KAAAC,mBAAA;QAAA;QAAA,OAGpB,GAAGD,CAAC,IAAIvB,QAAQ,CAACiB,KAAK;MAAE,IAE5BL,KAAK,CAACU,OAAO,GAAGV,KAAK,CAACU,OAAO,CAAC;QAAEA;MAAQ,CAAC,CAAC,GAAGA,OAAO,EAEzD,CACF;IAAA,EAEJ,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC","ignoreList":[]}
|
||||
+20
@@ -0,0 +1,20 @@
|
||||
@use '../../styles/settings'
|
||||
@use '../../styles/tools'
|
||||
@use './variables' as *
|
||||
|
||||
@include tools.layer('components')
|
||||
.v-messages
|
||||
flex: 1 1 auto
|
||||
font-size: $messages-font-size
|
||||
min-height: $messages-min-height
|
||||
min-width: 1px // Ensure takes up space with no messages and inside of flex
|
||||
opacity: var(--v-medium-emphasis-opacity)
|
||||
position: relative
|
||||
|
||||
&__message
|
||||
line-height: $messages-line-height
|
||||
word-break: break-word
|
||||
overflow-wrap: break-word
|
||||
word-wrap: break-word
|
||||
hyphens: auto
|
||||
transition-duration: $messages-transition-duration
|
||||
+8
@@ -0,0 +1,8 @@
|
||||
@use '../../styles/tools';
|
||||
|
||||
// VMessages
|
||||
$messages-color: tools.theme-color('on-surface', var(--v-medium-emphasis-opacity)) !default;
|
||||
$messages-font-size: 12px !default;
|
||||
$messages-line-height: $messages-font-size !default;
|
||||
$messages-min-height: 14px !default;
|
||||
$messages-transition-duration: 150ms !default;
|
||||
+1
@@ -0,0 +1 @@
|
||||
export { VMessages } from './VMessages.js';
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
export { VMessages } from "./VMessages.js";
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"index.js","names":["VMessages"],"sources":["../../../src/components/VMessages/index.ts"],"sourcesContent":["export { VMessages } from './VMessages'\n"],"mappings":"SAASA,SAAS","ignoreList":[]}
|
||||
Reference in New Issue
Block a user