routie dev init since i didn't adhere to any proper guidance up until now
This commit is contained in:
+144
@@ -0,0 +1,144 @@
|
||||
@layer vuetify-components {
|
||||
.v-table {
|
||||
font-size: 0.875rem;
|
||||
transition-duration: 0.28s;
|
||||
transition-property: box-shadow, opacity, background, height;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.v-table {
|
||||
background: rgb(var(--v-theme-surface));
|
||||
color: color-mix(in srgb, rgb(var(--v-theme-on-surface)) calc(var(--v-high-emphasis-opacity) * 100%), transparent);
|
||||
}
|
||||
.v-table .v-table-divider {
|
||||
border-right: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
}
|
||||
.v-table .v-table__wrapper > table > thead > tr > th {
|
||||
border-bottom: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
}
|
||||
.v-table .v-table__wrapper > table > tbody > tr:not(:last-child) > td,
|
||||
.v-table .v-table__wrapper > table > tbody > tr:not(:last-child) > th {
|
||||
border-bottom: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
}
|
||||
.v-table .v-table__wrapper > table > tfoot > tr > td,
|
||||
.v-table .v-table__wrapper > table > tfoot > tr > th {
|
||||
border-top: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
}
|
||||
.v-table.v-table--hover > .v-table__wrapper > table > tbody > tr > td {
|
||||
position: relative;
|
||||
}
|
||||
.v-table.v-table--hover > .v-table__wrapper > table > tbody > tr:hover > td::after {
|
||||
background: rgba(var(--v-border-color), var(--v-hover-opacity));
|
||||
pointer-events: none;
|
||||
}
|
||||
.v-table.v-table--hover > .v-table__wrapper > table > tbody > tr:hover > td::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.v-table.v-table--striped-even > .v-table__wrapper > table > tbody > tr:nth-child(even) {
|
||||
background-image: linear-gradient(0deg, rgba(var(--v-border-color), var(--v-hover-opacity)), rgba(var(--v-border-color), var(--v-hover-opacity)));
|
||||
}
|
||||
.v-table.v-table--striped-odd > .v-table__wrapper > table > tbody > tr:nth-child(odd) {
|
||||
background-image: linear-gradient(0deg, rgba(var(--v-border-color), var(--v-hover-opacity)), rgba(var(--v-border-color), var(--v-hover-opacity)));
|
||||
}
|
||||
.v-table.v-table--fixed-header > .v-table__wrapper > table > thead > tr > th {
|
||||
background: rgb(var(--v-theme-surface));
|
||||
box-shadow: inset 0 -1px 0 rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
z-index: 1;
|
||||
}
|
||||
.v-table.v-table--fixed-footer > tfoot > tr > th,
|
||||
.v-table.v-table--fixed-footer > tfoot > tr > td {
|
||||
background: rgb(var(--v-theme-surface));
|
||||
box-shadow: inset 0 1px 0 rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
}
|
||||
.v-table {
|
||||
border-radius: inherit;
|
||||
line-height: 1.5;
|
||||
max-width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.v-table > .v-table__wrapper > table {
|
||||
width: 100%;
|
||||
border-spacing: 0;
|
||||
}
|
||||
.v-table > .v-table__wrapper > table > tbody > tr > td,
|
||||
.v-table > .v-table__wrapper > table > tbody > tr > th,
|
||||
.v-table > .v-table__wrapper > table > thead > tr > td,
|
||||
.v-table > .v-table__wrapper > table > thead > tr > th,
|
||||
.v-table > .v-table__wrapper > table > tfoot > tr > td,
|
||||
.v-table > .v-table__wrapper > table > tfoot > tr > th {
|
||||
padding: 0 16px;
|
||||
transition-duration: 0.28s;
|
||||
transition-property: box-shadow, opacity, background, height;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.v-table > .v-table__wrapper > table > tbody > tr > td,
|
||||
.v-table > .v-table__wrapper > table > thead > tr > td,
|
||||
.v-table > .v-table__wrapper > table > tfoot > tr > td {
|
||||
height: var(--v-table-row-height);
|
||||
}
|
||||
.v-table > .v-table__wrapper > table > tbody > tr > th,
|
||||
.v-table > .v-table__wrapper > table > thead > tr > th,
|
||||
.v-table > .v-table__wrapper > table > tfoot > tr > th {
|
||||
height: var(--v-table-header-height);
|
||||
font-weight: 500;
|
||||
font-size: inherit;
|
||||
user-select: none;
|
||||
text-align: start;
|
||||
}
|
||||
.v-table--density-default {
|
||||
--v-table-header-height: 56px;
|
||||
--v-table-row-height: 52px;
|
||||
}
|
||||
.v-table--density-comfortable {
|
||||
--v-table-header-height: 48px;
|
||||
--v-table-row-height: 44px;
|
||||
}
|
||||
.v-table--density-compact {
|
||||
--v-table-header-height: 40px;
|
||||
--v-table-row-height: 36px;
|
||||
}
|
||||
.v-table__wrapper {
|
||||
border-radius: inherit;
|
||||
overflow: auto;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
.v-table--has-top > .v-table__wrapper {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
.v-table--has-bottom > .v-table__wrapper {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.v-table--fixed-height > .v-table__wrapper {
|
||||
overflow-y: auto;
|
||||
}
|
||||
.v-table--fixed-header > .v-table__wrapper > table > thead {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
@layer vuetify-overrides {
|
||||
.v-table--fixed-header > .v-table__wrapper > table > thead > tr > th {
|
||||
border-bottom: 0px;
|
||||
}
|
||||
}
|
||||
@layer vuetify-components {
|
||||
.v-table--fixed-footer > .v-table__wrapper > table > tfoot > tr {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
@layer vuetify-overrides {
|
||||
.v-table--fixed-footer > .v-table__wrapper > table > tfoot > tr > td,
|
||||
.v-table--fixed-footer > .v-table__wrapper > table > tfoot > tr > th {
|
||||
border-top: 0px;
|
||||
}
|
||||
}
|
||||
+300
@@ -0,0 +1,300 @@
|
||||
|
||||
import type { PropType } from 'vue';
|
||||
export type VTableSlots = {
|
||||
default: never;
|
||||
top: never;
|
||||
bottom: never;
|
||||
wrapper: never;
|
||||
};
|
||||
export type Striped = null | 'odd' | 'even';
|
||||
export declare const makeVTableProps: <Defaults extends {
|
||||
theme?: unknown;
|
||||
class?: unknown;
|
||||
style?: unknown;
|
||||
density?: unknown;
|
||||
tag?: unknown;
|
||||
fixedHeader?: unknown;
|
||||
fixedFooter?: unknown;
|
||||
height?: unknown;
|
||||
hover?: unknown;
|
||||
striped?: unknown;
|
||||
} = {}>(defaults?: Defaults | undefined) => {
|
||||
theme: unknown extends Defaults["theme"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["theme"] ? string : string | Defaults["theme"]>;
|
||||
default: unknown extends Defaults["theme"] ? string : string | Defaults["theme"];
|
||||
};
|
||||
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>;
|
||||
};
|
||||
density: unknown extends Defaults["density"] ? {
|
||||
type: PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
} : Omit<{
|
||||
type: PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: 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: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: 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>;
|
||||
};
|
||||
fixedHeader: unknown extends Defaults["fixedHeader"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["fixedHeader"] ? boolean : boolean | Defaults["fixedHeader"]>;
|
||||
default: unknown extends Defaults["fixedHeader"] ? boolean : boolean | Defaults["fixedHeader"];
|
||||
};
|
||||
fixedFooter: unknown extends Defaults["fixedFooter"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["fixedFooter"] ? boolean : boolean | Defaults["fixedFooter"]>;
|
||||
default: unknown extends Defaults["fixedFooter"] ? boolean : boolean | Defaults["fixedFooter"];
|
||||
};
|
||||
height: unknown extends Defaults["height"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["height"] ? string | number : string | number | Defaults["height"]>;
|
||||
default: unknown extends Defaults["height"] ? string | number : Defaults["height"] | NonNullable<string | number>;
|
||||
};
|
||||
hover: unknown extends Defaults["hover"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["hover"] ? boolean : boolean | Defaults["hover"]>;
|
||||
default: unknown extends Defaults["hover"] ? boolean : boolean | Defaults["hover"];
|
||||
};
|
||||
striped: unknown extends Defaults["striped"] ? {
|
||||
type: PropType<Striped>;
|
||||
default: null;
|
||||
validator: (v: any) => boolean;
|
||||
} : Omit<{
|
||||
type: PropType<Striped>;
|
||||
default: null;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["striped"] ? Striped : Defaults["striped"] | Striped>;
|
||||
default: unknown extends Defaults["striped"] ? Striped : Defaults["striped"] | NonNullable<Striped>;
|
||||
};
|
||||
};
|
||||
export declare const VTable: {
|
||||
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;
|
||||
fixedHeader: boolean;
|
||||
fixedFooter: boolean;
|
||||
hover: boolean;
|
||||
striped: Striped;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
height?: string | number | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
top?: (() => import("vue").VNodeChild) | undefined;
|
||||
bottom?: (() => import("vue").VNodeChild) | undefined;
|
||||
wrapper?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
top?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
bottom?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
wrapper?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:bottom"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:top"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:wrapper"?: 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;
|
||||
density: import("../../composables/density.js").Density;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
fixedHeader: boolean;
|
||||
fixedFooter: boolean;
|
||||
hover: boolean;
|
||||
striped: Striped;
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
top: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
bottom: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
wrapper: () => 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;
|
||||
fixedHeader: boolean;
|
||||
fixedFooter: boolean;
|
||||
hover: boolean;
|
||||
striped: Striped;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
height?: string | number | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
top?: (() => import("vue").VNodeChild) | undefined;
|
||||
bottom?: (() => import("vue").VNodeChild) | undefined;
|
||||
wrapper?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
top?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
bottom?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
wrapper?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:bottom"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:top"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:wrapper"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {}, {}, {}, {}, {
|
||||
style: import("vue").StyleValue;
|
||||
density: import("../../composables/density.js").Density;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
fixedHeader: boolean;
|
||||
fixedFooter: boolean;
|
||||
hover: boolean;
|
||||
striped: Striped;
|
||||
}>;
|
||||
__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;
|
||||
fixedHeader: boolean;
|
||||
fixedFooter: boolean;
|
||||
hover: boolean;
|
||||
striped: Striped;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
height?: string | number | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
top?: (() => import("vue").VNodeChild) | undefined;
|
||||
bottom?: (() => import("vue").VNodeChild) | undefined;
|
||||
wrapper?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
top?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
bottom?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
wrapper?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:bottom"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:top"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:wrapper"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
|
||||
style: import("vue").StyleValue;
|
||||
density: import("../../composables/density.js").Density;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
fixedHeader: boolean;
|
||||
fixedFooter: boolean;
|
||||
hover: boolean;
|
||||
striped: Striped;
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
top: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
bottom: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
wrapper: () => 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: PropType<import("../../composables/component.js").ClassValue>;
|
||||
style: {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
density: {
|
||||
type: PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
tag: {
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
};
|
||||
fixedHeader: BooleanConstructor;
|
||||
fixedFooter: BooleanConstructor;
|
||||
height: (NumberConstructor | StringConstructor)[];
|
||||
hover: BooleanConstructor;
|
||||
striped: {
|
||||
type: PropType<Striped>;
|
||||
default: null;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
theme: StringConstructor;
|
||||
class: PropType<import("../../composables/component.js").ClassValue>;
|
||||
style: {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
density: {
|
||||
type: PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
tag: {
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
};
|
||||
fixedHeader: BooleanConstructor;
|
||||
fixedFooter: BooleanConstructor;
|
||||
height: (NumberConstructor | StringConstructor)[];
|
||||
hover: BooleanConstructor;
|
||||
striped: {
|
||||
type: PropType<Striped>;
|
||||
default: null;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
}>>;
|
||||
export type VTable = InstanceType<typeof VTable>;
|
||||
+62
@@ -0,0 +1,62 @@
|
||||
import { createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createVNode as _createVNode } from "vue";
|
||||
// Styles
|
||||
import "./VTable.css";
|
||||
|
||||
// Composables
|
||||
import { makeComponentProps } from "../../composables/component.js";
|
||||
import { makeDensityProps, useDensity } from "../../composables/density.js";
|
||||
import { makeTagProps } from "../../composables/tag.js";
|
||||
import { makeThemeProps, provideTheme } from "../../composables/theme.js"; // Utilities
|
||||
import { convertToUnit, genericComponent, propsFactory, useRender } from "../../util/index.js"; // Types
|
||||
export const makeVTableProps = propsFactory({
|
||||
fixedHeader: Boolean,
|
||||
fixedFooter: Boolean,
|
||||
height: [Number, String],
|
||||
hover: Boolean,
|
||||
striped: {
|
||||
type: String,
|
||||
default: null,
|
||||
validator: v => ['even', 'odd'].includes(v)
|
||||
},
|
||||
...makeComponentProps(),
|
||||
...makeDensityProps(),
|
||||
...makeTagProps(),
|
||||
...makeThemeProps()
|
||||
}, 'VTable');
|
||||
export const VTable = genericComponent()({
|
||||
name: 'VTable',
|
||||
props: makeVTableProps(),
|
||||
setup(props, {
|
||||
slots,
|
||||
emit
|
||||
}) {
|
||||
const {
|
||||
themeClasses
|
||||
} = provideTheme(props);
|
||||
const {
|
||||
densityClasses
|
||||
} = useDensity(props);
|
||||
useRender(() => _createVNode(props.tag, {
|
||||
"class": _normalizeClass(['v-table', {
|
||||
'v-table--fixed-height': !!props.height,
|
||||
'v-table--fixed-header': props.fixedHeader,
|
||||
'v-table--fixed-footer': props.fixedFooter,
|
||||
'v-table--has-top': !!slots.top,
|
||||
'v-table--has-bottom': !!slots.bottom,
|
||||
'v-table--hover': props.hover,
|
||||
'v-table--striped-even': props.striped === 'even',
|
||||
'v-table--striped-odd': props.striped === 'odd'
|
||||
}, themeClasses.value, densityClasses.value, props.class]),
|
||||
"style": _normalizeStyle(props.style)
|
||||
}, {
|
||||
default: () => [slots.top?.(), slots.default ? _createElementVNode("div", {
|
||||
"class": "v-table__wrapper",
|
||||
"style": {
|
||||
height: convertToUnit(props.height)
|
||||
}
|
||||
}, [_createElementVNode("table", null, [slots.default()])]) : slots.wrapper?.(), slots.bottom?.()]
|
||||
}));
|
||||
return {};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VTable.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"VTable.js","names":["makeComponentProps","makeDensityProps","useDensity","makeTagProps","makeThemeProps","provideTheme","convertToUnit","genericComponent","propsFactory","useRender","makeVTableProps","fixedHeader","Boolean","fixedFooter","height","Number","String","hover","striped","type","default","validator","v","includes","VTable","name","props","setup","slots","emit","themeClasses","densityClasses","_createVNode","tag","_normalizeClass","top","bottom","value","class","_normalizeStyle","style","_createElementVNode","wrapper"],"sources":["../../../src/components/VTable/VTable.tsx"],"sourcesContent":["// Styles\nimport './VTable.sass'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\n\n// Utilities\nimport { convertToUnit, genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\nexport type VTableSlots = {\n default: never\n top: never\n bottom: never\n wrapper: never\n}\n\nexport type Striped = null | 'odd' | 'even'\n\nexport const makeVTableProps = propsFactory({\n fixedHeader: Boolean,\n fixedFooter: Boolean,\n height: [Number, String],\n hover: Boolean,\n striped: {\n type: String as PropType<Striped>,\n default: null,\n validator: (v: any) => ['even', 'odd'].includes(v),\n },\n\n ...makeComponentProps(),\n ...makeDensityProps(),\n ...makeTagProps(),\n ...makeThemeProps(),\n}, 'VTable')\n\nexport const VTable = genericComponent<VTableSlots>()({\n name: 'VTable',\n\n props: makeVTableProps(),\n\n setup (props, { slots, emit }) {\n const { themeClasses } = provideTheme(props)\n const { densityClasses } = useDensity(props)\n\n useRender(() => (\n <props.tag\n class={[\n 'v-table',\n {\n 'v-table--fixed-height': !!props.height,\n 'v-table--fixed-header': props.fixedHeader,\n 'v-table--fixed-footer': props.fixedFooter,\n 'v-table--has-top': !!slots.top,\n 'v-table--has-bottom': !!slots.bottom,\n 'v-table--hover': props.hover,\n 'v-table--striped-even': props.striped === 'even',\n 'v-table--striped-odd': props.striped === 'odd',\n },\n themeClasses.value,\n densityClasses.value,\n props.class,\n ]}\n style={ props.style }\n >\n { slots.top?.() }\n\n { slots.default ? (\n <div\n class=\"v-table__wrapper\"\n style={{ height: convertToUnit(props.height) }}\n >\n <table>\n { slots.default() }\n </table>\n </div>\n ) : slots.wrapper?.()}\n\n { slots.bottom?.() }\n </props.tag>\n ))\n\n return {}\n },\n})\n\nexport type VTable = InstanceType<typeof VTable>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,kBAAkB;AAAA,SAClBC,gBAAgB,EAAEC,UAAU;AAAA,SAC5BC,YAAY;AAAA,SACZC,cAAc,EAAEC,YAAY,sCAErC;AAAA,SACSC,aAAa,EAAEC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS,+BAEjE;AAYA,OAAO,MAAMC,eAAe,GAAGF,YAAY,CAAC;EAC1CG,WAAW,EAAEC,OAAO;EACpBC,WAAW,EAAED,OAAO;EACpBE,MAAM,EAAE,CAACC,MAAM,EAAEC,MAAM,CAAC;EACxBC,KAAK,EAAEL,OAAO;EACdM,OAAO,EAAE;IACPC,IAAI,EAAEH,MAA2B;IACjCI,OAAO,EAAE,IAAI;IACbC,SAAS,EAAGC,CAAM,IAAK,CAAC,MAAM,EAAE,KAAK,CAAC,CAACC,QAAQ,CAACD,CAAC;EACnD,CAAC;EAED,GAAGtB,kBAAkB,CAAC,CAAC;EACvB,GAAGC,gBAAgB,CAAC,CAAC;EACrB,GAAGE,YAAY,CAAC,CAAC;EACjB,GAAGC,cAAc,CAAC;AACpB,CAAC,EAAE,QAAQ,CAAC;AAEZ,OAAO,MAAMoB,MAAM,GAAGjB,gBAAgB,CAAc,CAAC,CAAC;EACpDkB,IAAI,EAAE,QAAQ;EAEdC,KAAK,EAAEhB,eAAe,CAAC,CAAC;EAExBiB,KAAKA,CAAED,KAAK,EAAE;IAAEE,KAAK;IAAEC;EAAK,CAAC,EAAE;IAC7B,MAAM;MAAEC;IAAa,CAAC,GAAGzB,YAAY,CAACqB,KAAK,CAAC;IAC5C,MAAM;MAAEK;IAAe,CAAC,GAAG7B,UAAU,CAACwB,KAAK,CAAC;IAE5CjB,SAAS,CAAC,MAAAuB,YAAA,CAAAN,KAAA,CAAAO,GAAA;MAAA,SAAAC,eAAA,CAEC,CACL,SAAS,EACT;QACE,uBAAuB,EAAE,CAAC,CAACR,KAAK,CAACZ,MAAM;QACvC,uBAAuB,EAAEY,KAAK,CAACf,WAAW;QAC1C,uBAAuB,EAAEe,KAAK,CAACb,WAAW;QAC1C,kBAAkB,EAAE,CAAC,CAACe,KAAK,CAACO,GAAG;QAC/B,qBAAqB,EAAE,CAAC,CAACP,KAAK,CAACQ,MAAM;QACrC,gBAAgB,EAAEV,KAAK,CAACT,KAAK;QAC7B,uBAAuB,EAAES,KAAK,CAACR,OAAO,KAAK,MAAM;QACjD,sBAAsB,EAAEQ,KAAK,CAACR,OAAO,KAAK;MAC5C,CAAC,EACDY,YAAY,CAACO,KAAK,EAClBN,cAAc,CAACM,KAAK,EACpBX,KAAK,CAACY,KAAK,CACZ;MAAA,SAAAC,eAAA,CACOb,KAAK,CAACc,KAAK;IAAA;MAAApB,OAAA,EAAAA,CAAA,MAEjBQ,KAAK,CAACO,GAAG,GAAG,CAAC,EAEbP,KAAK,CAACR,OAAO,GAAAqB,mBAAA;QAAA;QAAA,SAGJ;UAAE3B,MAAM,EAAER,aAAa,CAACoB,KAAK,CAACZ,MAAM;QAAE;MAAC,IAAA2B,mBAAA,iBAG1Cb,KAAK,CAACR,OAAO,CAAC,CAAC,OAGnBQ,KAAK,CAACc,OAAO,GAAG,CAAC,EAEnBd,KAAK,CAACQ,MAAM,GAAG,CAAC;IAAA,EAErB,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC","ignoreList":[]}
|
||||
+168
@@ -0,0 +1,168 @@
|
||||
@use '../../styles/tools'
|
||||
@use '../../styles/settings'
|
||||
@use './variables' as *
|
||||
@use './mixins' as *
|
||||
|
||||
@include tools.layer('components')
|
||||
// Theme
|
||||
.v-table
|
||||
font-size: $table-font-size
|
||||
transition-duration: $table-transition-duration
|
||||
transition-property: $table-transition-property
|
||||
transition-timing-function: $table-transition-timing-function
|
||||
@include tools.theme($table-theme...)
|
||||
|
||||
.v-table-divider
|
||||
border-right: $table-border
|
||||
|
||||
.v-table__wrapper
|
||||
> table
|
||||
> thead
|
||||
> tr
|
||||
> th
|
||||
border-bottom: $table-border
|
||||
|
||||
> tbody
|
||||
> tr
|
||||
&:not(:last-child)
|
||||
> td,
|
||||
> th
|
||||
border-bottom: $table-border
|
||||
|
||||
> tfoot
|
||||
> tr
|
||||
> td,
|
||||
> th
|
||||
border-top: $table-border
|
||||
|
||||
|
||||
&.v-table--hover
|
||||
> .v-table__wrapper
|
||||
> table
|
||||
> tbody
|
||||
> tr
|
||||
> td
|
||||
position: relative
|
||||
|
||||
&:hover > td::after
|
||||
background: $table-hover-color
|
||||
pointer-events: none
|
||||
@include tools.absolute(true)
|
||||
|
||||
&.v-table--striped-even
|
||||
> .v-table__wrapper
|
||||
> table
|
||||
> tbody
|
||||
> tr:nth-child(even)
|
||||
background-image: linear-gradient(0deg, $table-stripe-color, $table-stripe-color)
|
||||
|
||||
&.v-table--striped-odd
|
||||
> .v-table__wrapper
|
||||
> table
|
||||
> tbody
|
||||
> tr:nth-child(odd)
|
||||
background-image: linear-gradient(0deg, $table-stripe-color, $table-stripe-color)
|
||||
|
||||
&.v-table--fixed-header
|
||||
> .v-table__wrapper
|
||||
> table
|
||||
> thead
|
||||
> tr
|
||||
> th
|
||||
background: $table-background
|
||||
box-shadow: inset 0 -1px 0 $table-border-color
|
||||
z-index: 1
|
||||
|
||||
&.v-table--fixed-footer
|
||||
> tfoot
|
||||
> tr
|
||||
> th,
|
||||
> td
|
||||
background: $table-background
|
||||
box-shadow: inset 0 1px 0 $table-border-color
|
||||
|
||||
// Block
|
||||
.v-table
|
||||
border-radius: inherit
|
||||
// Do not inherit line-height
|
||||
line-height: $table-line-height
|
||||
max-width: 100%
|
||||
display: flex
|
||||
flex-direction: column
|
||||
|
||||
> .v-table__wrapper
|
||||
> table
|
||||
width: 100%
|
||||
border-spacing: 0
|
||||
|
||||
> tbody,
|
||||
> thead,
|
||||
> tfoot
|
||||
> tr
|
||||
> td,
|
||||
> th
|
||||
padding: $table-column-padding
|
||||
transition-duration: $table-transition-duration
|
||||
transition-property: $table-transition-property
|
||||
transition-timing-function: $table-transition-timing-function
|
||||
|
||||
> td
|
||||
height: var(--v-table-row-height)
|
||||
|
||||
> th
|
||||
height: var(--v-table-header-height)
|
||||
font-weight: $table-header-font-weight
|
||||
font-size: $table-header-font-size
|
||||
user-select: none
|
||||
text-align: start
|
||||
|
||||
@at-root
|
||||
@include tools.density('v-table', $table-density) using ($modifier)
|
||||
--v-table-header-height: #{$table-header-height + $modifier}
|
||||
--v-table-row-height: #{$table-row-height + $modifier}
|
||||
|
||||
// Elements
|
||||
.v-table__wrapper
|
||||
border-radius: inherit
|
||||
overflow: auto
|
||||
flex: 1 1 auto
|
||||
|
||||
// Modifiers
|
||||
.v-table--has-top
|
||||
> .v-table__wrapper
|
||||
border-top-left-radius: 0
|
||||
border-top-right-radius: 0
|
||||
|
||||
.v-table--has-bottom
|
||||
> .v-table__wrapper
|
||||
border-bottom-left-radius: 0
|
||||
border-bottom-right-radius: 0
|
||||
|
||||
.v-table--fixed-height
|
||||
> .v-table__wrapper
|
||||
overflow-y: auto
|
||||
|
||||
.v-table--fixed-header
|
||||
> .v-table__wrapper
|
||||
> table
|
||||
> thead
|
||||
position: sticky
|
||||
top: 0
|
||||
z-index: 2
|
||||
> tr
|
||||
> th
|
||||
@include tools.layer('overrides')
|
||||
border-bottom: 0px
|
||||
|
||||
.v-table--fixed-footer
|
||||
> .v-table__wrapper
|
||||
> table
|
||||
> tfoot
|
||||
> tr
|
||||
position: sticky
|
||||
bottom: 0
|
||||
z-index: 1
|
||||
> td,
|
||||
> th
|
||||
@include tools.layer('overrides')
|
||||
border-top: 0px
|
||||
+25
@@ -0,0 +1,25 @@
|
||||
@use 'sass:map';
|
||||
@use './variables' as *;
|
||||
|
||||
@mixin table-density ($densities) {
|
||||
@each $density, $properties in $densities {
|
||||
.v-table--density-#{$density} {
|
||||
> .v-table__wrapper {
|
||||
> table {
|
||||
> tbody,
|
||||
> thead,
|
||||
> tfoot {
|
||||
> tr {
|
||||
> th {
|
||||
height: map.get($properties, header)
|
||||
}
|
||||
> td {
|
||||
height: map.get($properties, row)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+30
@@ -0,0 +1,30 @@
|
||||
@use 'sass:math';
|
||||
@use 'sass:map';
|
||||
@use '../../styles/settings';
|
||||
@use '../../styles/tools';
|
||||
|
||||
// VTable
|
||||
$table-background: rgb(var(--v-theme-surface)) !default;
|
||||
$table-color: tools.theme-color('on-surface', var(--v-high-emphasis-opacity)) !default;
|
||||
$table-density: ('default': 0, 'comfortable': -2, 'compact': -4) !default;
|
||||
$table-header-height: 56px !default;
|
||||
$table-header-font-weight: 500 !default;
|
||||
$table-header-font-size: inherit !default;
|
||||
$table-font-size: tools.map-deep-get(settings.$typography, 'body-medium', 'size') !default;
|
||||
$table-row-height: 52px !default;
|
||||
$table-row-font-size: tools.map-deep-get(settings.$typography, 'label-large', 'size') !default;
|
||||
$table-border-color: rgba(var(--v-border-color), var(--v-border-opacity)) !default;
|
||||
$table-border: thin solid $table-border-color !default;
|
||||
$table-hover-color: rgba(var(--v-border-color), var(--v-hover-opacity)) !default;
|
||||
$table-line-height: 1.5 !default;
|
||||
$table-column-padding: 0 16px !default;
|
||||
$table-stripe-color: rgba(var(--v-border-color), var(--v-hover-opacity)) !default;
|
||||
$table-transition-duration: 0.28s !default;
|
||||
$table-transition-property: box-shadow, opacity, background, height !default;
|
||||
$table-transition-timing-function: settings.$standard-easing !default;
|
||||
|
||||
// Lists
|
||||
$table-theme: (
|
||||
$table-background,
|
||||
$table-color,
|
||||
) !default;
|
||||
+1
@@ -0,0 +1 @@
|
||||
export { VTable } from './VTable.js';
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
export { VTable } from "./VTable.js";
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"index.js","names":["VTable"],"sources":["../../../src/components/VTable/index.ts"],"sourcesContent":["export { VTable } from './VTable'\n"],"mappings":"SAASA,MAAM","ignoreList":[]}
|
||||
Reference in New Issue
Block a user