Use items (#354)

* Extract tabular items logic into composition

* Fix racing condition in watchers

* Remove empty test

* Use v-select in detail sidebar tabular

* Fix pagination styles

* Reset to page 1 on sort / limit changes

* Cast limit to string

* Fix button test

* Add content padding to tabular layout
This commit is contained in:
Rijk van Zanten
2020-04-07 15:40:49 -04:00
committed by GitHub
parent c052a9e407
commit 897ecfb1db
10 changed files with 337 additions and 317 deletions

View File

@@ -41,7 +41,7 @@ describe('Button', () => {
},
});
expect(component.find('.button').classes()).toContain('full-width');
expect(component.classes()).toContain('full-width');
});
it('Adds the rounded class for rounded buttons', () => {

View File

@@ -1,5 +1,5 @@
<template>
<div class="v-button">
<div class="v-button" :class="{ secondary, 'full-width': fullWidth }">
<slot name="prepend-outer" />
<component
:is="component"
@@ -10,12 +10,10 @@
sizeClass,
`align-${align}`,
{
'full-width': fullWidth,
rounded,
icon,
outlined,
loading,
secondary,
active,
dashed,
tile,
@@ -139,6 +137,20 @@ export default defineComponent({
display: inline-flex;
align-items: center;
&.secondary {
--v-button-color: var(--foreground-color);
--v-button-color-hover: var(--foreground-color);
--v-button-color-activated: var(--foreground-color);
--v-button-background-color: var(--background-normal-alt);
--v-button-background-color-hover: var(--background-normal-alt);
--v-button-background-color-activated: var(--background-normal-alt);
}
&.full-width {
display: flex;
min-width: 100%;
}
.button {
position: relative;
display: flex;
@@ -170,15 +182,6 @@ export default defineComponent({
justify-content: flex-end;
}
&.secondary {
--v-button-color: var(--foreground-color);
--v-button-color-hover: var(--foreground-color);
--v-button-color-activated: var(--foreground-color);
--v-button-background-color: var(--background-normal-alt);
--v-button-background-color-hover: var(--background-normal-alt);
--v-button-background-color-activated: var(--background-normal-alt);
}
&:active {
transform: scale(0.98);
}
@@ -253,11 +256,6 @@ export default defineComponent({
padding: 0;
}
&.full-width {
display: flex;
min-width: 100%;
}
.content,
.spinner {
max-width: 100%;