routie dev init since i didn't adhere to any proper guidance up until now
This commit is contained in:
+53
@@ -0,0 +1,53 @@
|
||||
@layer vuetify-components {
|
||||
.v-rating {
|
||||
max-width: 100%;
|
||||
display: inline-flex;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.v-rating--readonly {
|
||||
pointer-events: none;
|
||||
}
|
||||
.v-rating__wrapper {
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.v-rating__wrapper--bottom {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
.v-rating__item {
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
}
|
||||
.v-rating__item label {
|
||||
cursor: pointer;
|
||||
}
|
||||
.v-rating__item .v-btn--variant-plain {
|
||||
opacity: 1;
|
||||
}
|
||||
.v-rating__item .v-btn {
|
||||
transition-property: transform;
|
||||
}
|
||||
.v-rating__item .v-btn .v-icon {
|
||||
transition: inherit;
|
||||
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
.v-rating--hover .v-rating__item:hover:not(.v-rating__item--focused) .v-btn {
|
||||
transform: scale(1.25);
|
||||
}
|
||||
.v-rating__item--half {
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
|
||||
z-index: 1;
|
||||
}
|
||||
.v-rating__item--half .v-btn__overlay, .v-rating__item--half:hover .v-btn__overlay {
|
||||
opacity: 0;
|
||||
}
|
||||
.v-rating__hidden {
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
+509
@@ -0,0 +1,509 @@
|
||||
|
||||
import { IconValue } from '../../composables/icons.js';
|
||||
import type { Prop } from 'vue';
|
||||
type VRatingItemSlot = {
|
||||
value: number;
|
||||
index: number;
|
||||
isFilled: boolean;
|
||||
isHovered: boolean;
|
||||
icon: IconValue;
|
||||
color?: string;
|
||||
props: Record<string, unknown>;
|
||||
rating: number;
|
||||
};
|
||||
type VRatingItemLabelSlot = {
|
||||
value: number;
|
||||
index: number;
|
||||
label?: string;
|
||||
};
|
||||
export declare const makeVRatingProps: <Defaults extends {
|
||||
theme?: unknown;
|
||||
class?: unknown;
|
||||
style?: unknown;
|
||||
density?: unknown;
|
||||
tag?: unknown;
|
||||
size?: unknown;
|
||||
name?: unknown;
|
||||
itemAriaLabel?: unknown;
|
||||
activeColor?: unknown;
|
||||
color?: unknown;
|
||||
clearable?: unknown;
|
||||
disabled?: unknown;
|
||||
emptyIcon?: unknown;
|
||||
fullIcon?: unknown;
|
||||
halfIncrements?: unknown;
|
||||
hover?: unknown;
|
||||
length?: unknown;
|
||||
readonly?: unknown;
|
||||
modelValue?: unknown;
|
||||
itemLabels?: unknown;
|
||||
itemLabelPosition?: unknown;
|
||||
ripple?: unknown;
|
||||
} = {}>(defaults?: Defaults | undefined) => {
|
||||
theme: unknown extends Defaults["theme"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["theme"] ? string : string | Defaults["theme"]>;
|
||||
default: unknown extends Defaults["theme"] ? string : string | Defaults["theme"];
|
||||
};
|
||||
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>;
|
||||
};
|
||||
density: unknown extends Defaults["density"] ? {
|
||||
type: import("vue").PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["density"] ? import("../../composables/density.js").Density : Defaults["density"] | import("../../composables/density.js").Density>;
|
||||
default: unknown extends Defaults["density"] ? import("../../composables/density.js").Density : Defaults["density"] | NonNullable<import("../../composables/density.js").Density>;
|
||||
};
|
||||
tag: unknown extends Defaults["tag"] ? {
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
}, "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>;
|
||||
};
|
||||
size: unknown extends Defaults["size"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["size"] ? string | number : string | number | Defaults["size"]>;
|
||||
default: unknown extends Defaults["size"] ? string | number : Defaults["size"] | NonNullable<string | number>;
|
||||
};
|
||||
name: unknown extends Defaults["name"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["name"] ? string : string | Defaults["name"]>;
|
||||
default: unknown extends Defaults["name"] ? string : string | Defaults["name"];
|
||||
};
|
||||
itemAriaLabel: unknown extends Defaults["itemAriaLabel"] ? {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["itemAriaLabel"] ? string : string | Defaults["itemAriaLabel"]>;
|
||||
default: unknown extends Defaults["itemAriaLabel"] ? string : string | Defaults["itemAriaLabel"];
|
||||
};
|
||||
activeColor: unknown extends Defaults["activeColor"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["activeColor"] ? string : string | Defaults["activeColor"]>;
|
||||
default: unknown extends Defaults["activeColor"] ? string : string | Defaults["activeColor"];
|
||||
};
|
||||
color: unknown extends Defaults["color"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["color"] ? string : string | Defaults["color"]>;
|
||||
default: unknown extends Defaults["color"] ? string : string | Defaults["color"];
|
||||
};
|
||||
clearable: unknown extends Defaults["clearable"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["clearable"] ? boolean : boolean | Defaults["clearable"]>;
|
||||
default: unknown extends Defaults["clearable"] ? boolean : boolean | Defaults["clearable"];
|
||||
};
|
||||
disabled: unknown extends Defaults["disabled"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["disabled"] ? boolean : boolean | Defaults["disabled"]>;
|
||||
default: unknown extends Defaults["disabled"] ? boolean : boolean | Defaults["disabled"];
|
||||
};
|
||||
emptyIcon: unknown extends Defaults["emptyIcon"] ? {
|
||||
type: import("vue").PropType<IconValue>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<IconValue>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["emptyIcon"] ? IconValue : Defaults["emptyIcon"] | IconValue>;
|
||||
default: unknown extends Defaults["emptyIcon"] ? IconValue : Defaults["emptyIcon"] | NonNullable<IconValue>;
|
||||
};
|
||||
fullIcon: unknown extends Defaults["fullIcon"] ? {
|
||||
type: import("vue").PropType<IconValue>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<IconValue>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["fullIcon"] ? IconValue : Defaults["fullIcon"] | IconValue>;
|
||||
default: unknown extends Defaults["fullIcon"] ? IconValue : Defaults["fullIcon"] | NonNullable<IconValue>;
|
||||
};
|
||||
halfIncrements: unknown extends Defaults["halfIncrements"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["halfIncrements"] ? boolean : boolean | Defaults["halfIncrements"]>;
|
||||
default: unknown extends Defaults["halfIncrements"] ? boolean : boolean | Defaults["halfIncrements"];
|
||||
};
|
||||
hover: unknown extends Defaults["hover"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["hover"] ? boolean : boolean | Defaults["hover"]>;
|
||||
default: unknown extends Defaults["hover"] ? boolean : boolean | Defaults["hover"];
|
||||
};
|
||||
length: unknown extends Defaults["length"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["length"] ? string | number : string | number | Defaults["length"]>;
|
||||
default: unknown extends Defaults["length"] ? string | number : Defaults["length"] | NonNullable<string | number>;
|
||||
};
|
||||
readonly: unknown extends Defaults["readonly"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["readonly"] ? boolean : boolean | Defaults["readonly"]>;
|
||||
default: unknown extends Defaults["readonly"] ? boolean : boolean | Defaults["readonly"];
|
||||
};
|
||||
modelValue: unknown extends Defaults["modelValue"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["modelValue"] ? string | number : string | number | Defaults["modelValue"]>;
|
||||
default: unknown extends Defaults["modelValue"] ? string | number : Defaults["modelValue"] | NonNullable<string | number>;
|
||||
};
|
||||
itemLabels: unknown extends Defaults["itemLabels"] ? Prop<string[]> : {
|
||||
type: import("vue").PropType<unknown extends Defaults["itemLabels"] ? string[] : string[] | Defaults["itemLabels"]>;
|
||||
default: unknown extends Defaults["itemLabels"] ? string[] : string[] | Defaults["itemLabels"];
|
||||
};
|
||||
itemLabelPosition: unknown extends Defaults["itemLabelPosition"] ? {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
} : Omit<{
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["itemLabelPosition"] ? string : string | Defaults["itemLabelPosition"]>;
|
||||
default: unknown extends Defaults["itemLabelPosition"] ? string : string | Defaults["itemLabelPosition"];
|
||||
};
|
||||
ripple: unknown extends Defaults["ripple"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["ripple"] ? boolean : boolean | Defaults["ripple"]>;
|
||||
default: unknown extends Defaults["ripple"] ? boolean : boolean | Defaults["ripple"];
|
||||
};
|
||||
};
|
||||
export declare const VRating: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
density: import("../../composables/density.js").Density;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
size: string | number;
|
||||
itemAriaLabel: string;
|
||||
clearable: boolean;
|
||||
disabled: boolean;
|
||||
emptyIcon: IconValue;
|
||||
fullIcon: IconValue;
|
||||
halfIncrements: boolean;
|
||||
hover: boolean;
|
||||
length: string | number;
|
||||
readonly: boolean;
|
||||
modelValue: string | number;
|
||||
itemLabelPosition: string;
|
||||
ripple: boolean;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
name?: string | undefined;
|
||||
activeColor?: string | undefined;
|
||||
color?: string | undefined;
|
||||
itemLabels?: string[] | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
item?: ((arg: VRatingItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
'item-label'?: ((arg: VRatingItemLabelSlot) => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | {} | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
item?: false | ((arg: VRatingItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
'item-label'?: false | ((arg: VRatingItemLabelSlot) => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:item"?: false | ((arg: VRatingItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:item-label"?: false | ((arg: VRatingItemLabelSlot) => import("vue").VNodeChild) | undefined;
|
||||
} & {
|
||||
"onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
|
||||
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
||||
'update:modelValue': (value: number | string) => true;
|
||||
}, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
|
||||
style: import("vue").StyleValue;
|
||||
density: import("../../composables/density.js").Density;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
size: string | number;
|
||||
itemAriaLabel: string;
|
||||
clearable: boolean;
|
||||
disabled: boolean;
|
||||
emptyIcon: IconValue;
|
||||
fullIcon: IconValue;
|
||||
halfIncrements: boolean;
|
||||
hover: boolean;
|
||||
length: string | number;
|
||||
readonly: boolean;
|
||||
modelValue: string | number;
|
||||
itemLabelPosition: string;
|
||||
ripple: boolean;
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
item: (arg: VRatingItemSlot) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
'item-label': (arg: VRatingItemLabelSlot) => 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;
|
||||
density: import("../../composables/density.js").Density;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
size: string | number;
|
||||
itemAriaLabel: string;
|
||||
clearable: boolean;
|
||||
disabled: boolean;
|
||||
emptyIcon: IconValue;
|
||||
fullIcon: IconValue;
|
||||
halfIncrements: boolean;
|
||||
hover: boolean;
|
||||
length: string | number;
|
||||
readonly: boolean;
|
||||
modelValue: string | number;
|
||||
itemLabelPosition: string;
|
||||
ripple: boolean;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
name?: string | undefined;
|
||||
activeColor?: string | undefined;
|
||||
color?: string | undefined;
|
||||
itemLabels?: string[] | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
item?: ((arg: VRatingItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
'item-label'?: ((arg: VRatingItemLabelSlot) => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | {} | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
item?: false | ((arg: VRatingItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
'item-label'?: false | ((arg: VRatingItemLabelSlot) => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:item"?: false | ((arg: VRatingItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:item-label"?: false | ((arg: VRatingItemLabelSlot) => import("vue").VNodeChild) | undefined;
|
||||
} & {
|
||||
"onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
|
||||
}, {}, {}, {}, {}, {
|
||||
style: import("vue").StyleValue;
|
||||
density: import("../../composables/density.js").Density;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
size: string | number;
|
||||
itemAriaLabel: string;
|
||||
clearable: boolean;
|
||||
disabled: boolean;
|
||||
emptyIcon: IconValue;
|
||||
fullIcon: IconValue;
|
||||
halfIncrements: boolean;
|
||||
hover: boolean;
|
||||
length: string | number;
|
||||
readonly: boolean;
|
||||
modelValue: string | number;
|
||||
itemLabelPosition: string;
|
||||
ripple: boolean;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
density: import("../../composables/density.js").Density;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
size: string | number;
|
||||
itemAriaLabel: string;
|
||||
clearable: boolean;
|
||||
disabled: boolean;
|
||||
emptyIcon: IconValue;
|
||||
fullIcon: IconValue;
|
||||
halfIncrements: boolean;
|
||||
hover: boolean;
|
||||
length: string | number;
|
||||
readonly: boolean;
|
||||
modelValue: string | number;
|
||||
itemLabelPosition: string;
|
||||
ripple: boolean;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
name?: string | undefined;
|
||||
activeColor?: string | undefined;
|
||||
color?: string | undefined;
|
||||
itemLabels?: string[] | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
item?: ((arg: VRatingItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
'item-label'?: ((arg: VRatingItemLabelSlot) => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | {} | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
item?: false | ((arg: VRatingItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
'item-label'?: false | ((arg: VRatingItemLabelSlot) => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:item"?: false | ((arg: VRatingItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:item-label"?: false | ((arg: VRatingItemLabelSlot) => import("vue").VNodeChild) | undefined;
|
||||
} & {
|
||||
"onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
|
||||
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
||||
'update:modelValue': (value: number | string) => true;
|
||||
}, string, {
|
||||
style: import("vue").StyleValue;
|
||||
density: import("../../composables/density.js").Density;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
size: string | number;
|
||||
itemAriaLabel: string;
|
||||
clearable: boolean;
|
||||
disabled: boolean;
|
||||
emptyIcon: IconValue;
|
||||
fullIcon: IconValue;
|
||||
halfIncrements: boolean;
|
||||
hover: boolean;
|
||||
length: string | number;
|
||||
readonly: boolean;
|
||||
modelValue: string | number;
|
||||
itemLabelPosition: string;
|
||||
ripple: boolean;
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
item: (arg: VRatingItemSlot) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
'item-label': (arg: VRatingItemLabelSlot) => 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: import("vue").PropType<any>;
|
||||
style: {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
density: {
|
||||
type: import("vue").PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
tag: {
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
};
|
||||
size: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: string;
|
||||
};
|
||||
name: StringConstructor;
|
||||
itemAriaLabel: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
activeColor: StringConstructor;
|
||||
color: StringConstructor;
|
||||
clearable: BooleanConstructor;
|
||||
disabled: BooleanConstructor;
|
||||
emptyIcon: {
|
||||
type: import("vue").PropType<IconValue>;
|
||||
default: string;
|
||||
};
|
||||
fullIcon: {
|
||||
type: import("vue").PropType<IconValue>;
|
||||
default: string;
|
||||
};
|
||||
halfIncrements: BooleanConstructor;
|
||||
hover: BooleanConstructor;
|
||||
length: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
readonly: BooleanConstructor;
|
||||
modelValue: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
itemLabels: Prop<string[]>;
|
||||
itemLabelPosition: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
ripple: BooleanConstructor;
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
theme: StringConstructor;
|
||||
class: import("vue").PropType<any>;
|
||||
style: {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
density: {
|
||||
type: import("vue").PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
tag: {
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
};
|
||||
size: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: string;
|
||||
};
|
||||
name: StringConstructor;
|
||||
itemAriaLabel: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
activeColor: StringConstructor;
|
||||
color: StringConstructor;
|
||||
clearable: BooleanConstructor;
|
||||
disabled: BooleanConstructor;
|
||||
emptyIcon: {
|
||||
type: import("vue").PropType<IconValue>;
|
||||
default: string;
|
||||
};
|
||||
fullIcon: {
|
||||
type: import("vue").PropType<IconValue>;
|
||||
default: string;
|
||||
};
|
||||
halfIncrements: BooleanConstructor;
|
||||
hover: BooleanConstructor;
|
||||
length: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
readonly: BooleanConstructor;
|
||||
modelValue: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
itemLabels: Prop<string[]>;
|
||||
itemLabelPosition: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
ripple: BooleanConstructor;
|
||||
}>>;
|
||||
export type VRating = InstanceType<typeof VRating>;
|
||||
|
||||
+236
@@ -0,0 +1,236 @@
|
||||
import { Fragment as _Fragment, createElementVNode as _createElementVNode, mergeProps as _mergeProps, createVNode as _createVNode, normalizeClass as _normalizeClass, createTextVNode as _createTextVNode, normalizeStyle as _normalizeStyle } from "vue";
|
||||
// Styles
|
||||
import "./VRating.css";
|
||||
|
||||
// Components
|
||||
import { VBtn } from "../VBtn/index.js"; // Composables
|
||||
import { makeComponentProps } from "../../composables/component.js";
|
||||
import { makeDensityProps } from "../../composables/density.js";
|
||||
import { IconValue } from "../../composables/icons.js";
|
||||
import { useLocale } from "../../composables/locale.js";
|
||||
import { useProxiedModel } from "../../composables/proxiedModel.js";
|
||||
import { makeSizeProps } from "../../composables/size.js";
|
||||
import { makeTagProps } from "../../composables/tag.js";
|
||||
import { makeThemeProps, provideTheme } from "../../composables/theme.js"; // Utilities
|
||||
import { computed, nextTick, ref, shallowRef, useId } from 'vue';
|
||||
import { clamp, createRange, genericComponent, propsFactory, useRender } from "../../util/index.js"; // Types
|
||||
export const makeVRatingProps = propsFactory({
|
||||
name: String,
|
||||
itemAriaLabel: {
|
||||
type: String,
|
||||
default: '$vuetify.rating.ariaLabel.item'
|
||||
},
|
||||
activeColor: String,
|
||||
color: String,
|
||||
clearable: Boolean,
|
||||
disabled: Boolean,
|
||||
emptyIcon: {
|
||||
type: IconValue,
|
||||
default: '$ratingEmpty'
|
||||
},
|
||||
fullIcon: {
|
||||
type: IconValue,
|
||||
default: '$ratingFull'
|
||||
},
|
||||
halfIncrements: Boolean,
|
||||
hover: Boolean,
|
||||
length: {
|
||||
type: [Number, String],
|
||||
default: 5
|
||||
},
|
||||
readonly: Boolean,
|
||||
modelValue: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
itemLabels: Array,
|
||||
itemLabelPosition: {
|
||||
type: String,
|
||||
default: 'top',
|
||||
validator: v => ['top', 'bottom'].includes(v)
|
||||
},
|
||||
ripple: Boolean,
|
||||
...makeComponentProps(),
|
||||
...makeDensityProps(),
|
||||
...makeSizeProps(),
|
||||
...makeTagProps(),
|
||||
...makeThemeProps()
|
||||
}, 'VRating');
|
||||
export const VRating = genericComponent()({
|
||||
name: 'VRating',
|
||||
props: makeVRatingProps(),
|
||||
emits: {
|
||||
'update:modelValue': value => true
|
||||
},
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
const {
|
||||
t
|
||||
} = useLocale();
|
||||
const {
|
||||
themeClasses
|
||||
} = provideTheme(props);
|
||||
const root = ref();
|
||||
const rating = useProxiedModel(props, 'modelValue');
|
||||
const normalizedValue = computed(() => clamp(parseFloat(rating.value), 0, Number(props.length)));
|
||||
const range = computed(() => createRange(Number(props.length), 1));
|
||||
const increments = computed(() => range.value.flatMap(v => props.halfIncrements ? [v - 0.5, v] : [v]));
|
||||
const hoverIndex = shallowRef(-1);
|
||||
const itemState = computed(() => increments.value.map(value => {
|
||||
const isHovering = props.hover && hoverIndex.value > -1;
|
||||
const isFilled = normalizedValue.value >= value;
|
||||
const isHovered = hoverIndex.value >= value;
|
||||
const isFullIcon = isHovering ? isHovered : isFilled;
|
||||
const icon = isFullIcon ? props.fullIcon : props.emptyIcon;
|
||||
const activeColor = props.activeColor ?? props.color;
|
||||
const color = isFilled || isHovered ? activeColor : props.color;
|
||||
return {
|
||||
isFilled,
|
||||
isHovered,
|
||||
icon,
|
||||
color
|
||||
};
|
||||
}));
|
||||
const eventState = computed(() => [0, ...increments.value].map(value => {
|
||||
function onMouseenter() {
|
||||
hoverIndex.value = value;
|
||||
}
|
||||
function onMouseleave() {
|
||||
hoverIndex.value = -1;
|
||||
}
|
||||
function onClick() {
|
||||
if (props.disabled || props.readonly) return;
|
||||
rating.value = normalizedValue.value === value && props.clearable ? 0 : value;
|
||||
}
|
||||
return {
|
||||
onMouseenter: props.hover ? onMouseenter : undefined,
|
||||
onMouseleave: props.hover ? onMouseleave : undefined,
|
||||
onClick
|
||||
};
|
||||
}));
|
||||
const currentItemIndex = computed(() => {
|
||||
return props.halfIncrements ? 1 + Math.floor(Math.max(0, Number(rating.value ?? 0) - 0.5)) * 2 : Math.floor(Math.max(0, Number(rating.value ?? 0) - 1));
|
||||
});
|
||||
function moveCurrentFocus() {
|
||||
const currentItem = root.value?.querySelector('[tabindex="0"]');
|
||||
currentItem?.focus();
|
||||
}
|
||||
function onItemKeydown(event) {
|
||||
if (props.disabled || props.readonly) return;
|
||||
if (event.ctrlKey || event.altKey) return;
|
||||
const step = props.halfIncrements ? 0.5 : 1;
|
||||
if (event.key === 'ArrowRight') {
|
||||
const newValue = Math.min(Number(props.length), Number(rating.value ?? 0) + step);
|
||||
rating.value = newValue;
|
||||
nextTick(() => moveCurrentFocus());
|
||||
}
|
||||
if (event.key === 'ArrowLeft') {
|
||||
const newValue = Math.max(0, Number(rating.value ?? 0) - step);
|
||||
rating.value = newValue;
|
||||
nextTick(() => moveCurrentFocus());
|
||||
}
|
||||
}
|
||||
const uid = useId();
|
||||
const name = computed(() => props.name ?? `v-rating-${uid}`);
|
||||
function VRatingItem({
|
||||
value,
|
||||
index,
|
||||
showStar = true
|
||||
}) {
|
||||
const {
|
||||
onMouseenter,
|
||||
onMouseleave,
|
||||
onClick
|
||||
} = eventState.value[index + 1];
|
||||
const id = `${name.value}-${String(value).replace('.', '-')}`;
|
||||
const isFocusable = index === currentItemIndex.value;
|
||||
const btnProps = {
|
||||
color: itemState.value[index]?.color,
|
||||
density: props.density,
|
||||
disabled: props.disabled,
|
||||
icon: itemState.value[index]?.icon,
|
||||
ripple: props.ripple,
|
||||
size: props.size,
|
||||
variant: 'plain',
|
||||
tabindex: isFocusable ? 0 : -1,
|
||||
onKeydown: onItemKeydown
|
||||
};
|
||||
return _createElementVNode(_Fragment, null, [_createElementVNode("label", {
|
||||
"for": id,
|
||||
"class": _normalizeClass({
|
||||
'v-rating__item--half': props.halfIncrements && value % 1 > 0,
|
||||
'v-rating__item--full': props.halfIncrements && value % 1 === 0
|
||||
}),
|
||||
"onMouseenter": onMouseenter,
|
||||
"onMouseleave": onMouseleave,
|
||||
"onClick": onClick
|
||||
}, [_createElementVNode("span", {
|
||||
"class": "v-rating__hidden"
|
||||
}, [t(props.itemAriaLabel, value, props.length)]), !showStar ? undefined : slots.item ? slots.item({
|
||||
...itemState.value[index],
|
||||
props: btnProps,
|
||||
value,
|
||||
index,
|
||||
rating: normalizedValue.value
|
||||
}) : _createVNode(VBtn, _mergeProps({
|
||||
"aria-label": t(props.itemAriaLabel, value, props.length)
|
||||
}, btnProps), null)]), _createElementVNode("input", {
|
||||
"class": "v-rating__hidden",
|
||||
"name": name.value,
|
||||
"id": id,
|
||||
"type": "radio",
|
||||
"value": value,
|
||||
"checked": normalizedValue.value === value,
|
||||
"tabindex": -1,
|
||||
"readonly": props.readonly,
|
||||
"disabled": props.disabled
|
||||
}, null)]);
|
||||
}
|
||||
function createLabel(labelProps) {
|
||||
if (slots['item-label']) return slots['item-label'](labelProps);
|
||||
if (labelProps.label) return _createElementVNode("span", null, [labelProps.label]);
|
||||
return _createElementVNode("span", null, [_createTextVNode("\xA0")]);
|
||||
}
|
||||
useRender(() => {
|
||||
const hasLabels = !!props.itemLabels?.length || slots['item-label'];
|
||||
return _createVNode(props.tag, {
|
||||
"class": _normalizeClass(['v-rating', {
|
||||
'v-rating--hover': props.hover,
|
||||
'v-rating--readonly': props.readonly
|
||||
}, themeClasses.value, props.class]),
|
||||
"style": _normalizeStyle(props.style),
|
||||
"ref": root
|
||||
}, {
|
||||
default: () => [_createVNode(VRatingItem, {
|
||||
"value": 0,
|
||||
"index": -1,
|
||||
"showStar": false
|
||||
}, null), range.value.map((value, i) => _createElementVNode("div", {
|
||||
"class": "v-rating__wrapper"
|
||||
}, [hasLabels && props.itemLabelPosition === 'top' ? createLabel({
|
||||
value,
|
||||
index: i,
|
||||
label: props.itemLabels?.[i]
|
||||
}) : undefined, _createElementVNode("div", {
|
||||
"class": "v-rating__item"
|
||||
}, [props.halfIncrements ? _createElementVNode(_Fragment, null, [_createVNode(VRatingItem, {
|
||||
"value": value - 0.5,
|
||||
"index": i * 2
|
||||
}, null), _createVNode(VRatingItem, {
|
||||
"value": value,
|
||||
"index": i * 2 + 1
|
||||
}, null)]) : _createVNode(VRatingItem, {
|
||||
"value": value,
|
||||
"index": i
|
||||
}, null)]), hasLabels && props.itemLabelPosition === 'bottom' ? createLabel({
|
||||
value,
|
||||
index: i,
|
||||
label: props.itemLabels?.[i]
|
||||
}) : undefined]))]
|
||||
});
|
||||
});
|
||||
return {};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VRating.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+59
@@ -0,0 +1,59 @@
|
||||
@use '../../styles/tools'
|
||||
@use './variables' as *
|
||||
|
||||
@include tools.layer('components')
|
||||
// Block
|
||||
.v-rating
|
||||
max-width: 100%
|
||||
display: inline-flex
|
||||
white-space: $rating-white-space
|
||||
|
||||
&--readonly
|
||||
pointer-events: none
|
||||
|
||||
// Element
|
||||
.v-rating__wrapper
|
||||
align-items: $rating-item-align-items
|
||||
display: inline-flex
|
||||
flex-direction: column
|
||||
|
||||
&--bottom
|
||||
flex-direction: column-reverse
|
||||
|
||||
.v-rating__item
|
||||
display: inline-flex
|
||||
position: relative
|
||||
|
||||
label
|
||||
cursor: pointer
|
||||
|
||||
.v-btn--variant-plain
|
||||
opacity: $rating-item-button-opacity
|
||||
|
||||
.v-btn
|
||||
transition-property: $rating-item-button-transition-property
|
||||
|
||||
.v-icon
|
||||
transition: inherit
|
||||
transition-timing-function: $rating-item-transition-timing-function
|
||||
|
||||
&:hover:not(.v-rating__item--focused)
|
||||
.v-rating--hover &
|
||||
.v-btn
|
||||
transform: $rating-item-icon-transform
|
||||
|
||||
&--half
|
||||
overflow: hidden
|
||||
position: absolute
|
||||
clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%)
|
||||
z-index: 1
|
||||
|
||||
.v-btn__overlay,
|
||||
&:hover .v-btn__overlay
|
||||
opacity: 0
|
||||
|
||||
.v-rating__hidden
|
||||
height: 0
|
||||
opacity: 0
|
||||
position: absolute
|
||||
width: 0
|
||||
+10
@@ -0,0 +1,10 @@
|
||||
@use '../../styles/settings';
|
||||
|
||||
// Defaults
|
||||
$rating-item-focused-button-overlay-opacity: var(--v-hover-opacity) !default;
|
||||
$rating-item-align-items: center !default;
|
||||
$rating-item-button-opacity: 1 !default;
|
||||
$rating-item-button-transition-property: transform !default;
|
||||
$rating-item-icon-transform: scale(1.25) !default;
|
||||
$rating-item-transition-timing-function: settings.$decelerated-easing !default;
|
||||
$rating-white-space: nowrap !default;
|
||||
+1
@@ -0,0 +1 @@
|
||||
export { VRating } from './VRating.js';
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
export { VRating } from "./VRating.js";
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"index.js","names":["VRating"],"sources":["../../../src/components/VRating/index.ts"],"sourcesContent":["export { VRating } from './VRating'\n"],"mappings":"SAASA,OAAO","ignoreList":[]}
|
||||
Reference in New Issue
Block a user