github/directus
1
1
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-04-25 03:00:53 -04:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #494 from directus/v-list-subdued

Browse Source 
Added subdued and tweak dense prop
This commit is contained in:
Rijk van Zanten
2020-10-06 17:14:20 -04:00
committed by GitHub
parent 4e0b08f989 b15539b5d3
commit ff466c2bb7
49 changed files with 157 additions and 1203 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
app/src/components/register.ts
View File

@@ -20,15 +20,7 @@ import VIcon from './v-icon/';
import VInfo from './v-info/';
import VInput from './v-input/';
import VItemGroup, { VItem } from './v-item-group';
import VList, {
VListGroup,
VListItem,
VListItemContent,
VListItemHint,
VListItemIcon,
VListItemSubtitle,
VListItemTitle,
} from './v-list/';
import VList, { VListGroup, VListItem, VListItemContent, VListItemHint, VListItemIcon, VListItemText } from './v-list/';
import VMenu from './v-menu/';
import VModal from './v-modal/';
import VModalHeading from './v-modal/v-modal-heading.vue';
@@ -77,8 +69,7 @@ Vue.component('v-list-group', VListGroup);
Vue.component('v-list-item-content', VListItemContent);
Vue.component('v-list-item-hint', VListItemHint);
Vue.component('v-list-item-icon', VListItemIcon);
Vue.component('v-list-item-subtitle', VListItemSubtitle);
Vue.component('v-list-item-title', VListItemTitle);
Vue.component('v-list-item-text', VListItemText);
Vue.component('v-list-item', VListItem);
Vue.component('v-list', VList);
Vue.component('v-menu', VMenu);

10
app/src/components/v-divider/v-divider.story.ts
View File

@@ -3,7 +3,7 @@ import readme from './readme.md';
import withPadding from '../../../.storybook/decorators/with-padding';
import { withKnobs, boolean } from '@storybook/addon-knobs';
import { defineComponent } from '@vue/composition-api';
import VList, { VListItem, VListItemContent, VListItemTitle, VListItemIcon } from '@/components/v-list';
import VList, { VListItem, VListItemContent, VListItemText, VListItemIcon } from '@/components/v-list';
import VIcon from '@/components/v-icon/';
export default {
@@ -72,7 +72,7 @@ export const inList = () =>
VListItem,
VListItemContent,
VListItemIcon,
VListItemTitle,
VListItemText,
VIcon,
},
props: {},
@@ -82,7 +82,7 @@ export const inList = () =>
<v-list-item v-for="n in 3" @click="() => {}">
<v-list-item-icon><v-icon name="box" /></v-list-item-icon />
<v-list-item-content>
<v-list-item-title>Item {{ n }}</v-list-item-title>
<v-list-item-text>Item {{ n }}</v-list-item-text>
</v-list-item-content>
</v-list-item>
@@ -91,7 +91,7 @@ export const inList = () =>
<v-list-item v-for="n in 1" @click="() => {}">
<v-list-item-icon><v-icon name="box" /></v-list-item-icon />
<v-list-item-content>
<v-list-item-title>Item {{ n + 3 }}</v-list-item-title>
<v-list-item-text>Item {{ n + 3 }}</v-list-item-text>
</v-list-item-content>
</v-list-item>
@@ -100,7 +100,7 @@ export const inList = () =>
<v-list-item v-for="n in 3" @click="() => {}">
<v-list-item-icon><v-icon name="box" /></v-list-item-icon />
<v-list-item-content>
<v-list-item-title>Item {{ n + 4 }}</v-list-item-title>
<v-list-item-text>Item {{ n + 4 }}</v-list-item-text>
</v-list-item-content>
</v-list-item>
</v-list>

2
app/src/components/v-field-select/v-field-select.vue
View File

@@ -23,7 +23,7 @@
</v-button>
</template>
<v-list dense>
<v-list>
<field-list-item
v-for="field in availableFields"
:key="field.field"

2
app/src/components/v-field-template/v-field-template.vue
View File

@@ -21,7 +21,7 @@
</v-input>
</template>
<v-list dense>
<v-list>
<field-list-item @add="addField" v-for="field in tree" :key="field.field" :field="field" :depth="depth" />
</v-list>
</v-menu>

2
app/src/components/v-form/form-field-menu.vue
View File

@@ -1,5 +1,5 @@
<template>
<v-list dense>
<v-list>
<v-list-item :disabled="value === null" @click="$emit('input', null)">
<v-list-item-icon><v-icon name="delete_outline" /></v-list-item-icon>
<v-list-item-content>{{ $t('clear_value') }}</v-list-item-content>

15
app/src/components/v-list/index.ts
View File

@@ -1,20 +1,11 @@
import VList from './v-list.vue';
import VListItem from './v-list-item.vue';
import VListItemContent from './v-list-item-content.vue';
import VListItemTitle from './v-list-item-title.vue';
import VListItemSubtitle from './v-list-item-subtitle.vue';
import VListItemText from './v-list-item-text.vue';
import VListItemIcon from './v-list-item-icon.vue';
import VListItemHint from './v-list-item-hint.vue';
import VListGroup from './v-list-group.vue';
export {
VList,
VListItem,
VListItemContent,
VListItemTitle,
VListItemSubtitle,
VListItemIcon,
VListItemHint,
VListGroup,
};
export { VList, VListItem, VListItemContent, VListItemText, VListItemIcon, VListItemHint, VListGroup };
export default VList;

293
app/src/components/v-list/readme.md
View File

@@ -1,293 +0,0 @@
# List
```html
<v-list>
<v-list-item v-for="item in items">
<v-list-item-content>
{{ item.text }}
</v-list-item-content>
</v-list-item>
</v-list>
```
## Props
| Prop | Description | Default |
| ----------- | ----------------------------------------------------------------------------------------------------------- | ------- |
| `dense` | Removes some padding to make the list items closer together | `false` |
| `threeLine` | Limits list items to three lines of text (1 of title, 2 of subtitle). Only works in webkit enabled browsers | `false` |
| `nav` | Adds a small margin and border-radius for nav menu styling | `false` |
| `multiple` | Allows multiple child groups to be open at once | `true` |
## Events
n/a
## Slots
| Slot | Description | Data |
| --------- | ------------ | ---- |
| _default_ | List content | |
## CSS Variables
| Variable | Default |
| ---------------------------------- | -------------------------------- |
| `--v-list-padding` | `8px 0` |
| `--v-list-max-height` | `none` |
| `--v-list-max-width` | `none` |
| `--v-list-min-width` | `none` |
| `--v-list-min-height` | `none` |
| `--v-list-color` | `var(--foreground-normal)` |
| `--v-list-color-hover` | `var(--foreground-normal)` |
| `--v-list-color-active` | `var(--foreground-normal)` |
| `--v-list-background-color-hover` | `var(--background-normal-alt)` |
| `--v-list-background-color-active` | `var(--background-normal-alt)` |
---
# List Item
A wrapper for list items that formats children nicely. Can be used on its own or inside a list component. Best used with subcomponents (see below).
## Usage
```html
<v-list-item>
<v-list-item-title>Hello, world!</v-list-item-title>
</v-list-item>
```
## Props
| Prop | Description | Default |
|------------|----------------------------------------------------------------------|---------|
| `dense` | Removes some padding to make the individual list item shorter | `false` |
| `lines` | Sets if the list item will support `1`, `2`, or `3` lines of content | `null` |
| `to` | Render as vue router-link with to link | `null` |
| `disabled` | Disable the list item | `false` |
| `active` | Enable the list item's active state | `false` |
| `exact` | Set the `exact` prop on router-link. Used with `to` | `false` |
## Events
n/a
## Slots
| Slot | Description | Data |
| --------- | ----------------- | ---- |
| _default_ | List item content | |
## CSS Variables
| Variable | Default |
| ------------------------------------------- | ----------------------------------------------------------------------- |
| `--v-list-item-one-line-min-height` | `48px` |
| `--v-list-item-two-line-min-height` | `60px` |
| `--v-list-item-three-line-min-height` | `76px` |
| `--v-list-item-one-line-min-height-dense` | `40px` |
| `--v-list-item-two-line-min-height-dense` | `48px` |
| `--v-list-item-three-line-min-height-dense` | `64px` |
| `--v-list-item-padding` | `0 16px 0 calc(16px + var(--v-list-item-indent, 0px))` |
| `--v-list-item-min-width` | `none` |
| `--v-list-item-max-width` | `none` |
| `--v-list-item-min-height` | `var(--v-list-item-one-line-min-height)` |
| `--v-list-item-max-height` | `auto` |
| `--v-list-item-border-radius` | `0` |
| `--v-list-item-margin-bottom` | `0` |
| `--v-list-item-color` | `var(--v-list-color, var(--foreground-normal))` |
| `--v-list-item-color-hover` | `var(--v-list-color-hover, var(--foreground-normal))` |
| `--v-list-item-color-active` | `var(--v-list-color-active, var(--foreground-normal))` |
| `--v-list-item-background-color-hover` | `var(--v-list-background-color-hover, var(--background-normal-alt))` |
| `--v-list-item-background-color-active` | `var(--v-list-background-color-active, var(--background-normal-alt))` |
---
# List Item Content
A wrapper for the main text content of a list item. It adds some padding and helps control overflow. The parent of `v-list-title` and `v-list-subtitle` components, it's also the main controller of the `dense` option on lists.
## Usage
```html
<v-list-item-content>Hello, world!</v-list-item-content>
```
## Props
n/a
## Events
n/a
## Slots
| Slot | Description | Data |
| --------- | ------------------------- | ---- |
| _default_ | List item content content | |
## CSS Variables
| Variable | Default |
| ------------------------------- | -------- |
| `--v-list-item-content-padding` | `12px 0` |
---
# List Item Title
Wrapper that adds typographic styling and margin for the subtitle/description of the list item. Responsive to `dense` and `threeLine` props.
## Usage
```html
<v-list-item-title>Hello, world</v-list-item-title>
```
## Props
n/a
## Events
n/a
## Slots
| Slot | Description | Data |
| --------- | ----------------------- | ---- |
| _default_ | List item title content | |
## CSS Variables
n/a
---
# List Item Subtitle
Wrapper that adds typographic styling and margin for the subtitle/description of the list item. Responsive to `dense` and `threeLine` props.
## Usage
```html
<v-list-item-subtitle>This is the subtitle</v-list-item-subtitle>
```
## Props
n/a
## Events
n/a
## Slots
| Slot | Description | Data |
| --------- | -------------------------- | ---- |
| _default_ | List item subtitle content | |
## CSS Variables
n/a
---
# List Item Icon
Wrapper for icon, action, or avatar type elements in a list item. Can be used on the left or right of an item.
## Usage
```html
<v-list-item-icon>
<v-icon name="person" />
</v-list-item-icon>
```
## Props
| Prop | Description | Default |
| -------- | ------------------------------------------------------------------- | ------- |
| `center` | Whether to center the element (good for action elements or avatars) | `false` |
## Events
n/a
## Slots
| Slot | Description | Data |
| --------- | ---------------------- | ---- |
| _default_ | List item icon content | |
## CSS Variables
n/a
---
# List Group
Provides the ability to make a collapsable (sub)group of list items, within a list or independently. List groups can be nested to an arbitrary depth.
```html
<v-list>
<!-- Root level items -->
<v-list-item />
<v-list-item />
<v-list-group>
<template v-slot:activator>
... Click me to expand! ...
</template>
<v-list-item v-for="item in dropDownItems">
...item content etc.
</v-list-item>
<v-list-group>
<template v-slot:activator>
... Click me to expand this subgroup! ...
</template>
<v-list-item />
<v-list-item />
<v-list-group>
<template v-slot:activator>
... Click me to expand next subgroup! ...
</template>
<v-list-item v-for="item in subGroupDropdownItems">
</v-list-item>
</v-list-group>
</v-list-group>
</v-list-group>
</v-list>
```
## Props
| Prop | Description | Default |
|------------|---------------------------------------------------------------------------------|---------|
| `multiple` | Allow multiple subgroups to be open at the same time | `true` |
| `to` | Where to link to. This will only make the chevron toggle the group active state | |
| `active` | Render the activitor item in the active state | `false` |
## Events
n/a
## Slots
| Slot | Description | Data |
| --------- | ------------- | ---- |
| _default_ | Group content | |
## CSS Variables
n/a

4
app/src/components/v-list/v-list-item-content.vue
View File

@@ -42,8 +42,8 @@ body {
}
}
.v-list.dense &,
.v-list-item.dense & {
.v-list:not(.large) &,
.v-list-item:not(.large) & {
--v-list-item-content-padding: 4px 0;
}
}

34
app/src/components/v-list/v-list-item-hint.vue
View File

@@ -38,28 +38,28 @@ export default defineComponent({
@at-root {
.v-list,
.v-list-item {
&.three-line,
&.two-line {
#{$this} {
align-self: flex-start;
&.center {
align-self: center;
#{$this} {
margin-top: 4px;
margin-bottom: 4px;
&:not(:only-child) {
&:first-child {
margin-right: 16px;
}
&:last-child {
margin-left: 16px;
}
}
}
&.dense {
#{$this} {
margin-top: 4px;
margin-bottom: 4px;
&:not(:only-child) {
&:first-child {
margin-right: 16px;
}
&:last-child {
margin-left: 16px;
&.large {
&.three-line,
&.two-line {
#{$this} {
align-self: flex-start;
&.center {
align-self: center;
}
}
}
}
}
}
}

45
app/src/components/v-list/v-list-item-icon.vue
View File

@@ -35,6 +35,7 @@ body {
&:first-child {
margin-right: 12px;
}
&:last-child {
margin-left: 12px;
}
@@ -43,33 +44,25 @@ body {
@at-root {
.v-list,
.v-list-item {
&.three-line,
&.two-line {
#{$this} {
align-self: flex-start;
&.center {
align-self: center;
}
}
}
&.dense {
#{$this} {
margin-top: 4px;
margin-bottom: 4px;
&:not(:only-child) {
&:first-child {
margin-right: 8px;
}
&:last-child {
margin-left: 8px;
}
}
}
}
&.dense:not(.nav) #{$this} .v-icon {
#{$this} {
--v-icon-color: var(--v-list-item-icon-color);
margin-top: 4px;
margin-bottom: 4px;
&:not(:only-child) {
&:first-child {
margin-right: 8px;
}
&:last-child {
margin-left: 8px;
}
}
}
&.large #{$this} .v-icon {
--v-icon-color: none;
}
&.disabled #{$this} .v-icon {

39
app/src/components/v-list/v-list-item-subtitle.vue
View File

@@ -1,39 +0,0 @@
<template functional>
<div class="v-list-item-subtitle">
<slot></slot>
</div>
</template>
<style lang="scss" scoped>
.v-list-item-subtitle {
$this: &;
flex-basis: 100%;
flex-grow: 1;
flex-shrink: 1;
align-self: center;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
@at-root {
.v-list,
.v-list-item,
.v-list .v-list-item {
&.one-line #{$this},
&.two-line #{$this} {
display: block;
white-space: nowrap;
-webkit-line-clamp: none;
-webkit-box-orient: none;
}
&.three-line #{$this} {
display: -webkit-box;
white-space: initial;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
}
}
}
</style>

6
app/src/components/v-list/v-list-item-title.vue → app/src/components/v-list/v-list-item-text.vue
View File

@@ -1,11 +1,11 @@
<template functional>
<div class="v-list-item-title type-text">
<slot></slot>
<div class="v-list-item-text type-text">
<slot />
</div>
</template>
<style lang="scss" scoped>
.v-list-item-title {
.v-list-item-text {
flex-basis: 100%;
flex-grow: 1;
flex-shrink: 1;

107
app/src/components/v-list/v-list-item.vue
View File

@@ -7,11 +7,9 @@
:to="to"
:class="{
active,
large,
dense,
link: isClickable,
'three-line': lines === 3,
'two-line': lines === 2,
'one-line': lines === 1,
disabled,
dashed,
}"
@@ -20,7 +18,7 @@
:target="component === 'a' ? '_blank' : null"
v-on="disabled === false && $listeners"
>
<slot></slot>
<slot />
</component>
</template>
@@ -30,13 +28,13 @@ import { defineComponent, PropType, computed } from '@vue/composition-api';
export default defineComponent({
props: {
dense: {
large: {
type: Boolean,
default: false,
},
lines: {
type: Number as PropType<1 | 2 | 3>,
default: null,
dense: {
type: Boolean,
default: false,
},
to: {
type: [String, Object] as PropType<string | Location>,
@@ -83,18 +81,15 @@ export default defineComponent({
<style>
body {
--v-list-item-one-line-min-height: 40px;
--v-list-item-two-line-min-height: 52px;
--v-list-item-three-line-min-height: 64px;
--v-list-item-one-line-min-height-dense: 32px;
--v-list-item-two-line-min-height-dense: 36px;
--v-list-item-three-line-min-height-dense: 52px;
--v-list-item-padding: 0 16px 0 calc(16px + var(--v-list-item-indent, 0px));
--v-list-item-padding-dense: 0 8px 0 calc(8px + var(--v-list-item-indent, 0px));
--v-list-item-margin-dense: 2px 0;
--v-list-item-min-height-large: 40px;
--v-list-item-min-height: 32px;
--v-list-item-padding-large: 0 8px;
--v-list-item-padding: 0 8px 0 calc(8px + var(--v-list-item-indent, 0px));
--v-list-item-margin-large: 4px 0;
--v-list-item-margin: 2px 0;
--v-list-item-min-width: none;
--v-list-item-max-width: none;
--v-list-item-min-height: var(--v-list-item-one-line-min-height);
--v-list-item-min-height: var(--v-list-item-min-height);
--v-list-item-max-height: auto;
--v-list-item-border-radius: var(--border-radius);
--v-list-item-margin-bottom: 0;
@@ -120,6 +115,7 @@ body {
max-width: var(--v-list-item-max-width);
min-height: var(--v-list-item-min-height);
max-height: var(--v-list-item-max-height);
margin: var(--v-list-item-margin);
margin-bottom: var(--v-list-item-margin-bottom);
padding: var(--v-list-item-padding);
overflow: hidden;
@@ -147,18 +143,18 @@ body {
transition-property: background-color, color;
user-select: none;
&:not(.disabled):hover {
&:not(.disabled):not(.dense):hover {
color: var(--v-list-item-color-hover);
background-color: var(--v-list-item-background-color-hover);
}
&:not(.disabled):active {
&:not(.disabled):not(.dense):active {
color: var(--v-list-item-color-active);
background-color: var(--v-list-item-background-color-active);
}
}
&.active {
&:not(.dense).active {
color: var(--v-list-item-color-active);
background-color: var(--v-list-item-background-color-active);
}
@@ -169,52 +165,45 @@ body {
cursor: not-allowed;
}
&.dense {
::v-deep .v-list-item-text {
color: var(--foreground-subdued);
}
&:hover,
&.active {
::v-deep .v-list-item-text {
color: var(--primary);
}
}
}
@at-root {
.v-list,
#{$this},
.v-list #{$this} {
--v-list-item-min-height: var(--v-list-item-one-line-min-height);
&.one-line {
--v-list-item-min-height: var(--v-list-item-one-line-min-height);
}
&.two-line {
--v-list-item-min-height: var(--v-list-item-two-line-min-height);
}
&.three-line {
--v-list-item-min-height: var(--v-list-item-three-line-min-height);
}
--v-list-item-min-height: var(--v-list-item-min-height);
}
.v-list.dense {
& #{$this} {
--v-list-item-min-height: var(--v-list-item-one-line-min-height-dense);
margin: var(--v-list-item-margin-dense);
padding: var(--v-list-item-padding-dense);
&.one-line {
--v-list-item-min-height: var(--v-list-item-one-line-min-height-dense);
}
&.two-line {
--v-list-item-min-height: var(--v-list-item-two-line-min-height-dense);
}
&.three-line {
--v-list-item-min-height: var(--v-list-item-three-line-min-height-dense);
}
}
}
.v-list.nav {
& #{$this} {
--v-list-item-padding: 0 8px;
.v-list.large {
#{$this}:not(.dense) {
--v-list-item-min-height: var(--v-list-item-min-height-large);
--v-list-item-border-radius: 4px;
&:not(:last-child):not(:only-child) {
--v-list-item-margin-bottom: 4px;
margin: var(--v-list-item-margin-large);
padding: var(--v-list-item-padding-large);
&:first-child {
margin-top: 0;
}
}
&.dense #{$this},
#{$this}.dense {
&:not(:last-child):not(:only-child) {
--v-list-item-margin-bottom: 4px;
&:last-child {
margin-bottom: 0;
}
&:only-child {
margin-top: 0;
margin-bottom: 0;
}
}
}

442
app/src/components/v-list/v-list.story.ts
View File

@@ -1,442 +0,0 @@
import { withKnobs, boolean, text, select } from '@storybook/addon-knobs';
import { action } from '@storybook/addon-actions';
import Vue from 'vue';
import VList from './v-list.vue';
import VListItem from './v-list-item.vue';
import withPadding from '../../../.storybook/decorators/with-padding';
import VListItemContent from './v-list-item-content.vue';
import VListItemTitle from './v-list-item-title.vue';
import VListItemSubTitle from './v-list-item-subtitle.vue';
import VListItemIcon from './v-list-item-icon.vue';
import VListGroup from './v-list-group.vue';
import VSheet from '../v-sheet';
import VCheckbox from '../v-checkbox';
import VueRouter from 'vue-router';
import markdown from './readme.md';
import { defineComponent, reactive } from '@vue/composition-api';
import withBackground from '../../../.storybook/decorators/with-background';
Vue.component('v-list', VList);
Vue.component('v-list-item', VListItem);
Vue.component('v-list-item-content', VListItemContent);
Vue.component('v-list-item-title', VListItemTitle);
Vue.component('v-list-item-subtitle', VListItemSubTitle);
Vue.component('v-list-item-icon', VListItemIcon);
Vue.component('v-checkbox', VCheckbox);
Vue.component('v-list-group', VListGroup);
Vue.component('v-sheet', VSheet);
Vue.use(VueRouter);
const router = new VueRouter();
export default {
title: 'Components / List',
component: VList,
decorators: [withKnobs, withPadding, withBackground],
parameters: {
notes: markdown,
},
};
export const basic = () =>
defineComponent({
props: {
dense: {
default: boolean('Dense', false, 'Full List'),
},
dense0: {
default: boolean('Dense', false, 'List Item 0'),
},
dense1: {
default: boolean('Dense', false, 'List Item 1'),
},
dense2: {
default: boolean('Dense', false, 'List Item 2'),
},
dense3: {
default: boolean('Dense', false, 'List Item 3'),
},
nav: {
default: boolean('Nav', false, 'Full List'),
},
},
setup() {
return {
items: ['Item 0', 'Item 1', 'Item 2', 'Item 3'],
};
},
template: `
<v-sheet style="--v-sheet-max-width: 200px; ">
<v-list :dense="dense" :nav="nav">
<v-list-item v-for="(item, i) in items" :dense="$props['dense' + i]" :key="i">
<v-list-item-content>
{{ item }}
</v-list-item-content>
</v-list-item>
</v-list>
</v-sheet>`,
});
export const listGroups = () =>
defineComponent({
router: router,
props: {
multiple: {
default: boolean('Multiple', true),
},
multipleGroup: {
default: boolean('Multiple (in the nested groups)', true),
},
},
setup() {
return {
items: [0, 1, 2, 3],
};
},
template: `
<v-sheet style="--v-sheet-max-width: 600px;">
<v-list :multiple="multiple">
<v-list-item>
<v-list-item-icon>
<v-icon name="home" />
</v-list-item-icon>
<v-list-item-title>Home</v-list-item-title>
</v-list-item>
<v-list-group :multiple="multipleGroup">
<template v-slot:activator>
<v-list-item-icon>
<v-icon name="box" />
</v-list-item-icon>
<v-list-item-title>Collections</v-list-item-title>
</template>
<v-list-item>
<v-list-item-icon><v-icon name="person" /></v-list-item-icon>
<v-list-item-title>Users</v-list-item-title>
</v-list-item>
</v-list-group>
<v-list-group :multiple="multipleGroup">
<template v-slot:activator>
<v-list-item-icon>
<v-icon name="folder" />
</v-list-item-icon>
<v-list-item-title>Files</v-list-item-title>
</template>
<v-list-group :multiple="multipleGroup">
<template v-slot:activator>
<v-list-item-icon>
<v-icon name="cloud_download" />
</v-list-item-icon>
<v-list-item-title>Download</v-list-item-title>
</template>
<v-list-item>
<v-list-item-icon><v-icon name="person" /></v-list-item-icon>
<v-list-item-title>Section 1</v-list-item-title>
</v-list-item>
<v-list-item>
<v-list-item-icon><v-icon name="person" /></v-list-item-icon>
<v-list-item-title>Section 2</v-list-item-title>
</v-list-item>
<v-list-item>
<v-list-item-icon><v-icon name="person" /></v-list-item-icon>
<v-list-item-title>Section 3</v-list-item-title>
</v-list-item>
</v-list-group>
<v-list-group :multiple="multipleGroup">
<template v-slot:activator>
<v-list-item-icon>
<v-icon name="cloud_upload" />
</v-list-item-icon>
<v-list-item-title>Upload</v-list-item-title>
</template>
<v-list-item>
<v-list-item-icon><v-icon name="person" /></v-list-item-icon>
<v-list-item-title>Section 1</v-list-item-title>
</v-list-item>
<v-list-item>
<v-list-item-icon><v-icon name="person" /></v-list-item-icon>
<v-list-item-title>Section 2</v-list-item-title>
</v-list-item>
<v-list-item>
<v-list-item-icon><v-icon name="person" /></v-list-item-icon>
<v-list-item-title>Section 3</v-list-item-title>
</v-list-item>
<v-list-group :multiple="multipleGroup">
<template v-slot:activator>
<v-list-item-icon>
<v-icon name="attach_file" />
</v-list-item-icon>
<v-list-item-title>Sub-sub-sub section</v-list-item-title>
</template>
<v-list-item>
<v-list-item-icon><v-icon name="person" /></v-list-item-icon>
<v-list-item-title>Section 1</v-list-item-title>
</v-list-item>
<v-list-item>
<v-list-item-icon><v-icon name="person" /></v-list-item-icon>
<v-list-item-title>Section 2</v-list-item-title>
</v-list-item>
<v-list-item>
<v-list-item-icon><v-icon name="person" /></v-list-item-icon>
<v-list-item-title>Section 3</v-list-item-title>
</v-list-item>
</v-list-group>
</v-list-group>
</v-list-group>
</v-list>
</v-sheet>
`,
});
export const withSubtitle = () =>
defineComponent({
router: router,
props: {
dense: {
default: boolean('Dense', false, 'Full List'),
},
dense0: {
default: boolean('Dense', false, 'List Item 0'),
},
dense1: {
default: boolean('Dense', false, 'List Item 1'),
},
dense2: {
default: boolean('Dense', false, 'List Item 2'),
},
dense3: {
default: boolean('Dense', false, 'List Item 3'),
},
lines0: {
default: select('Lines', { One: 1, Two: 2, Three: 3, Off: null }, null, 'List Item 0'),
},
lines1: {
default: select('Lines', { One: 1, Two: 2, Three: 3, Off: null }, null, 'List Item 1'),
},
lines2: {
default: select('Lines', { One: 1, Two: 2, Three: 3, Off: null }, null, 'List Item 2'),
},
lines3: {
default: select('Lines', { One: 1, Two: 2, Three: 3, Off: null }, null, 'List Item 3'),
},
nav: {
default: boolean('Nav', false, 'Full List'),
},
dynamicSubtitle: {
default: text('Subtitle 3', '', 'Full List'),
},
lines: {
default: select('Lines', { One: 1, Two: 2, Three: 3, Off: null }, null, 'Full List'),
},
},
setup() {
return {
items: {
0: { title: 'List Item 0', subtitle: 'This is a list item subtitle.' },
1: {
title: 'List Item 1',
subtitle:
"This is another example of a list item subtitle. But this time, it's pretty long so you can see who two-line and three-line wrapping work",
},
2: {
title: 'List Item 2',
subtitle: "This is yet another example of a list subtitle. It's of medium length.",
},
},
};
},
template: `
<v-sheet style="--v-sheet-max-width: 400px; ">
<v-list :dense="dense" :nav="nav" :lines="lines">
<v-list-item v-for="(item, i) in items" :lines="$props['lines' + i]" :dense="$props['dense' + i]" :key="i" :to="'/' + i">
<v-list-item-content>
<v-list-item-title>{{ item.title }}</v-list-item-title>
<v-list-item-subtitle>{{ item.subtitle }}</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
<v-list-item :dense="dense3" :lines="lines3" :key=3 :to="'/' + 3">
<v-list-item-content>
<v-list-item-title>List Item 3</v-list-item-title>
<v-list-item-subtitle>{{ dynamicSubtitle }}</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</v-list>
</v-sheet>`,
});
export const withIconsToo = () =>
defineComponent({
router: router,
props: {
dense: {
default: boolean('Dense', false, 'Full List'),
},
nav: {
default: boolean('Nav', false, 'Full List'),
},
subtitle: {
default: boolean('Subtitle', false, 'Full List'),
},
lines: {
default: select('Lines', { One: 1, Two: 2, Three: 3, Off: null }, null, 'Full List'),
},
leftIconCenter: {
default: boolean('Left Icon Centered', false, 'Full List'),
},
rightIconCenter: {
default: boolean('Right Icon Centered', true, 'Full List'),
},
leftIcon: {
default: boolean('Left Icon', true, 'Full List'),
},
rightIcon: {
default: boolean('Right Icon', false, 'Full List'),
},
},
setup() {
const onChange = action('change');
return {
onChange,
items: reactive({
0: {
title: 'List Item 0',
subtitle: 'This is a list item subtitle.',
checked: false,
},
1: {
title: 'List Item 1',
subtitle:
"This is another example of a list item subtitle. But this time, it's pretty long so you can see who two-line and three-line wrapping work",
checked: false,
},
2: {
title: 'List Item 2',
subtitle: "This is yet another example of a list subtitle. It's of medium length.",
checked: false,
},
3: {
title: 'List Item 3',
subtitle: '',
checked: false,
},
}),
};
},
template: `
<v-sheet style="--v-sheet-max-width: 400px; ">
<v-list :dense="dense" :nav="nav" :lines="lines">
<v-list-item v-for="(item, i) in items" :key="i" :to="'/' + i">
<v-list-item-icon v-if="leftIcon" :center="leftIconCenter">
<v-icon name="info" />
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>{{ item.title }}</v-list-item-title>
<v-list-item-subtitle v-if="subtitle">{{ item.subtitle }}</v-list-item-subtitle>
</v-list-item-content>
<v-list-item-icon v-if="rightIcon" :center="rightIconCenter">
<v-checkbox v-model="item.checked" @change="onChange"/>
</v-list-item-icon>
</v-list-item>
</v-list>
</v-sheet>`,
});
export const withLinks = () =>
defineComponent({
router: router,
props: {
dense: {
default: boolean('Dense', false, 'Full List'),
},
dense0: {
default: boolean('Dense', false, 'List Item 0'),
},
dense1: {
default: boolean('Dense', false, 'List Item 1'),
},
dense2: {
default: boolean('Dense', false, 'List Item 2'),
},
dense3: {
default: boolean('Dense', false, 'List Item 3'),
},
nav: {
default: boolean('Nav', false, 'Full List'),
},
},
setup() {
return {
items: ['Item 0', 'Item 1', 'Item 2', 'Item 3'],
};
},
template: `
<v-sheet style="--v-sheet-max-width: 200px; ">
<v-list :dense="dense" :nav="nav">
<v-list-item v-for="(item, i) in items" :dense="$props['dense' + i]" :key="i" :to="'/' + i">
<v-list-item-content>
{{ item }}
</v-list-item-content>
</v-list-item>
</v-list>
</v-sheet>`,
});
export const withClicks = () =>
defineComponent({
props: {},
setup() {
return {
items: ['Item 0', 'Item 1', 'Item 2', 'Item 3'],
clickHandler: action('onClick'),
};
},
template: `
<v-sheet style="--v-sheet-max-width: 200px; ">
<v-list>
<v-list-item v-for="(item, i) in items" :key="i" @click="clickHandler">
<v-list-item-content>
{{ item }}
</v-list-item-content>
</v-list-item>
</v-list>
</v-sheet>`,
});
export const orphanListItems = () =>
defineComponent({
router: router,
props: {
dense0: {
default: boolean('Dense', false, 'List Item 0'),
},
dense1: {
default: boolean('Dense', false, 'List Item 1'),
},
dense2: {
default: boolean('Dense', false, 'List Item 2'),
},
dense3: {
default: boolean('Dense', false, 'List Item 3'),
},
},
setup() {
return {
items: ['Item 0', 'Item 1', 'Item 2', 'Item 3'],
};
},
template: `
<v-sheet style="--v-sheet-max-width: 200px; ">
<v-list-item v-for="(item, i) in items" :dense="$props['dense' + i]" :key="i" :to="'/' + i">
<v-list-item-content>
{{item}}
</v-list-item-content>
</v-list-item>
</v-sheet>`,
});

223
app/src/components/v-list/v-list.test.ts
View File

@@ -1,223 +0,0 @@
import { mount, createLocalVue } from '@vue/test-utils';
import VueCompositionAPI from '@vue/composition-api';
import VueRouter from 'vue-router';
import router from '@/router';
import VList from './v-list.vue';
import VListItem from './v-list-item.vue';
import VListItemIcon from './v-list-item-icon.vue';
import VListGroup from './v-list-group.vue';
import VIcon from '@/components/v-icon';
import TransitionExpand from '@/components/transition/expand';
const localVue = createLocalVue();
localVue.use(VueCompositionAPI);
localVue.use(VueRouter);
localVue.component('v-list-item', VListItem);
localVue.component('v-list', VList);
localVue.component('v-list-item-icon', VListItemIcon);
localVue.component('v-list-group', VListGroup);
localVue.component('v-icon', VIcon);
localVue.component('transition-expand', TransitionExpand);
describe('List', () => {
it('Renders the provided markup in the default slot', () => {
const component = mount(VList, {
localVue,
slots: {
default: `<v-list-item>Item Text</v-list-item>`,
},
});
expect(component.text()).toContain('Item Text');
});
it('Adds the dense class for dense lists', () => {
const component = mount(VList, {
localVue,
propsData: {
dense: true,
},
});
expect(component.classes()).toContain('dense');
});
it('Adds the three-line class for lines = 3', () => {
const component = mount(VList, {
localVue,
propsData: {
lines: 3,
},
slots: {
default: `<v-list-item/>
<v-list-item/>
<v-list-item/>`,
},
});
expect(component.classes()).toContain('three-line');
});
it('Adds the two-line class for lines = 2', () => {
const component = mount(VList, {
localVue,
propsData: {
lines: 2,
},
slots: {
default: `<v-list-item/>
<v-list-item/>
<v-list-item/>`,
},
});
expect(component.classes()).toContain('two-line');
});
it('Adds the two-line class to only one element, rest is 3', () => {
const component = mount(VList, {
localVue,
propsData: {
lines: 3,
},
slots: {
default: `<v-list-item :lines="2"/>
<v-list-item/>
<v-list-item/>`,
},
});
expect(component.find('.v-list-item:first-of-type').classes()).toContain('two-line');
expect(component.classes()).toContain('three-line');
});
it('Adds the nav class for nav lists', () => {
const component = mount(VList, {
localVue,
propsData: {
nav: true,
},
});
expect(component.classes()).toContain('nav');
});
it('Adds the centered class for cenetered icons in items', () => {
const component = mount(VListItem, {
localVue,
slots: {
default: `<v-list-item-icon center/>`,
},
propsData: {
nav: true,
},
});
expect(component.find('.v-list-item-icon').classes()).toContain('center');
});
it('Has the right number of list items', () => {
const component = mount(VList, {
localVue,
propsData: {
dense: false,
},
slots: {
default: `<v-list-item/>
<v-list-item/>
<v-list-item/>`,
},
});
expect(component.findAll('.v-list-item').length).toEqual(3);
});
it('Adds the dense class to one list-item, but not the other', () => {
const component = mount(VList, {
localVue,
propsData: {
dense: false,
},
slots: {
default: `<v-list-item dense/>
<v-list-item/>`,
},
});
expect(component.find('.v-list-item:first-of-type').classes()).toContain('dense');
expect(component.find('.v-list-item:nth-of-type(2)').classes()).not.toContain('dense');
});
it('Item has the link class when to prop is set', () => {
const component = mount(VListItem, {
localVue,
router: router,
propsData: {
to: '/',
},
});
expect(component.classes()).toContain('link');
});
it('Renders as a router-link if the to prop is set', () => {
const component = mount(VListItem, {
localVue,
router: router,
propsData: {
to: '/',
},
});
expect((component.vm as any).component).toBe('router-link');
});
it('Has link class when onClick is set', () => {
const onClick = jest.fn();
const component = mount(VListItem, {
localVue,
listeners: {
click: onClick,
},
});
expect(component.classes()).toContain('link');
});
it('Click event fires correctly', () => {
const onClick = jest.fn();
const component = mount(VListItem, {
localVue,
listeners: {
click: onClick,
},
});
component.find('.v-list-item').trigger('click');
expect(onClick).toHaveBeenCalled();
});
it('Opens a list group when activator item is clicked', async () => {
const component = mount(VList, {
localVue,
slots: {
default: `
<v-list-group>
<template v-slot:activator>
Click me!
</template>
<v-list-item class="test"/>
<v-list-item/>
</v-list-group>
<v-list-item/>
<v-list-item/>
`,
},
});
expect(component.find('.test').isVisible()).toBe(false);
component.find('.activator').trigger('click');
await component.vm.$nextTick();
expect(component.find('.test').isVisible()).toBe(true);
});
});

25
app/src/components/v-list/v-list.vue
View File

@@ -1,15 +1,6 @@
<template>
<ul
class="v-list"
:class="{
dense,
nav,
'three-line': lines === 3,
'two-line': lines === 2,
'one-line': lines === 1,
}"
>
<slot></slot>
<ul class="v-list" :class="{ large }">
<slot />
</ul>
</template>
@@ -19,18 +10,10 @@ import { useGroupableParent } from '@/composables/groupable';
export default defineComponent({
props: {
dense: {
large: {
type: Boolean,
default: false,
},
nav: {
type: Boolean,
default: false,
},
lines: {
type: Number as PropType<1 | 2 | 3>,
default: null,
},
multiple: {
type: Boolean,
default: true,
@@ -79,7 +62,7 @@ body {
line-height: 22px;
border-radius: var(--border-radius);
&.nav {
&.large {
--v-list-padding: 12px;
}

4
app/src/components/v-select/v-select.test.ts
View File

@@ -3,7 +3,7 @@ import { shallowMount, createLocalVue } from '@vue/test-utils';
import VueCompositionAPI from '@vue/composition-api';
import VMenu from '@/components/v-menu/';
import VList, { VListItem, VListItemContent, VListItemTitle } from '@/components/v-list/';
import VList, { VListItem, VListItemContent, VListItemText } from '@/components/v-list/';
import VCheckbox from '@/components/v-checkbox/';
const localVue = createLocalVue();
@@ -12,7 +12,7 @@ localVue.component('v-menu', VMenu);
localVue.component('v-list', VList);
localVue.component('v-list-item', VListItem);
localVue.component('v-list-item-content', VListItemContent);
localVue.component('v-list-item-title', VListItemTitle);
localVue.component('v-list-item-text', VListItemText);
localVue.component('v-checkbox', VCheckbox);
describe('Components / Select', () => {

2
app/src/components/v-select/v-select.vue
View File

@@ -26,7 +26,7 @@
</v-input>
</template>
<v-list dense class="list">
<v-list class="list">
<template v-if="showDeselect">
<v-list-item @click="$emit('input', null)" :disabled="value === null">
<v-list-item-icon v-if="multiple === true">

2
app/src/components/v-tabs/v-tabs.vue
View File

@@ -1,5 +1,5 @@
<template>
<v-list class="v-tabs vertical alt-colors" v-if="vertical" nav>
<v-list class="v-tabs vertical alt-colors" v-if="vertical" large>
<slot />
</v-list>
<div v-else class="v-tabs horizontal">

2
app/src/displays/related-values/related-values.vue
View File

@@ -7,7 +7,7 @@
</span>
</template>
<v-list dense>
<v-list>
<v-list-item v-for="item in value" :key="item[primaryKeyField]" :to="getLinkForItem(item)">
<v-list-item-content>
<render-template :template="template" :item="item" :collection="relatedCollection" />

2
app/src/interfaces/file/file.vue
View File

@@ -35,7 +35,7 @@
</div>
</template>
<v-list dense>
<v-list>
<template v-if="file">
<v-list-item :download="file.filename_download" :href="assetURL">
<v-list-item-icon><v-icon name="get_app" /></v-list-item-icon>

2
app/src/interfaces/many-to-one/many-to-one.vue
View File

@@ -54,7 +54,7 @@
</v-input>
</template>
<v-list dense>
<v-list>
<template v-if="itemsLoading">
<v-list-item v-for="n in 10" :key="`loader-${n}`">
<v-list-item-content>

2
app/src/interfaces/user/user.vue
View File

@@ -48,7 +48,7 @@
</v-input>
</template>
<v-list dense>
<v-list>
<template v-if="usersLoading">
<v-list-item v-for="n in 10" :key="`loader-${n}`">
<v-list-item-content>

2
app/src/layouts/cards/components/header.vue
View File

@@ -25,7 +25,7 @@
</div>
</template>
<v-list dense>
<v-list>
<v-list-item
v-for="field in fieldsWithoutFake"
:key="field.field"

2
app/src/modules/activity/components/navigation.vue
View File

@@ -1,5 +1,5 @@
<template>
<v-list nav>
<v-list large>
<v-list-item to="/activity" exact>
<v-list-item-icon>
<v-icon name="access_time" />

2
app/src/modules/collections/components/navigation-bookmark.vue
View File

@@ -7,7 +7,7 @@
</v-list-item-icon>
<v-menu ref="contextMenu" show-arrow placement="bottom-start">
<v-list dense>
<v-list>
<v-list-item @click="renameActive = true" :disabled="isMine === false">
<v-list-item-icon>
<v-icon name="edit" outline />

2
app/src/modules/collections/components/navigation.vue
View File

@@ -1,5 +1,5 @@
<template>
<v-list nav>
<v-list large>
<template v-if="customNavItems && customNavItems.length > 0">
<v-detail
:active="group.accordion === 'always_open' || undefined"

10
app/src/modules/docs/components/navigation-item.vue
View File

@@ -1,8 +1,8 @@
<template>
<v-list-item v-if="section.children === undefined" :to="section.to" :dense="dense">
<v-list-item v-if="section.children === undefined" :to="section.to" :dense="dense" :subdued="subdued">
<v-list-item-icon v-if="section.icon !== undefined"><v-icon :name="section.icon" /></v-list-item-icon>
<v-list-item-content>
<v-list-item-title>{{ section.name }}</v-list-item-title>
<v-list-item-text>{{ section.name }}</v-list-item-text>
</v-list-item-content>
</v-list-item>
<div v-else-if="section.flat === true">
@@ -18,7 +18,7 @@
<template #activator>
<v-list-item-icon v-if="section.icon !== undefined"><v-icon :name="section.icon" /></v-list-item-icon>
<v-list-item-content>
<v-list-item-title>{{ section.name }}</v-list-item-title>
<v-list-item-text>{{ section.name }}</v-list-item-text>
</v-list-item-content>
</template>
<navigation-list-item
@@ -45,6 +45,10 @@ export default defineComponent({
type: Boolean,
default: false,
},
subdued: {
type: Boolean,
default: false,
},
},
});
</script>

2
app/src/modules/docs/components/navigation.vue
View File

@@ -1,5 +1,5 @@
<template>
<v-list nav>
<v-list large>
<navigation-item v-for="item in sections" :key="item.to" :section="item"></navigation-item>
</v-list>
</template>

2
app/src/modules/files/components/folder-picker.vue
View File

@@ -1,7 +1,7 @@
<template>
<v-skeleton-loader v-if="loading" />
<div class="folder-picker" v-else>
<v-list dense>
<v-list>
<v-item-group scope="folder-picker" multiple v-model="openFolders">
<v-list-group
disable-groupable-parent

2
app/src/modules/files/components/navigation-folder.vue
View File

@@ -38,7 +38,7 @@
</v-list-group>
<v-menu ref="contextMenu" show-arrow placement="bottom-start">
<v-list dense>
<v-list>
<v-list-item @click="renameActive = true">
<v-list-item-icon>
<v-icon name="edit" outline />

2
app/src/modules/files/components/navigation.vue
View File

@@ -1,5 +1,5 @@
<template>
<v-list nav>
<v-list large>
<template v-if="loading && (nestedFolders === null || nestedFolders.length === 0)">
<v-list-item v-for="n in 4" :key="n">
<v-skeleton-loader type="list-item-icon" />

8
app/src/modules/settings/components/navigation.vue
View File

@@ -1,9 +1,9 @@
<template>
<v-list nav>
<v-list large>
<v-list-item v-for="item in navItems" :to="item.to" :key="item.to">
<v-list-item-icon><v-icon :name="item.icon" /></v-list-item-icon>
<v-list-item-content>
<v-list-item-title>{{ item.name }}</v-list-item-title>
<v-list-item-text>{{ item.name }}</v-list-item-text>
</v-list-item-content>
</v-list-item>
@@ -12,14 +12,14 @@
<v-list-item v-for="item in externalItems" :href="item.href" :key="item.href">
<v-list-item-icon><v-icon :name="item.icon" /></v-list-item-icon>
<v-list-item-content>
<v-list-item-title>{{ item.name }}</v-list-item-title>
<v-list-item-text>{{ item.name }}</v-list-item-text>
</v-list-item-content>
</v-list-item>
<v-list-item href="https://github.com/directus/directus/releases" class="version">
<v-list-item-icon><v-icon name="directus" /></v-list-item-icon>
<v-list-item-content>
<v-list-item-title class="version">Directus {{ version }}</v-list-item-title>
<v-list-item-text class="version">Directus {{ version }}</v-list-item-text>
</v-list-item-content>
</v-list-item>
</v-list>

2
app/src/modules/settings/routes/data-model/collections/components/collection-options.vue
View File

@@ -4,7 +4,7 @@
<template #activator="{ toggle }">
<v-icon name="more_vert" @click="toggle" class="ctx-toggle" />
</template>
<v-list dense>
<v-list>
<v-list-item @click="deleteActive = true" class="danger">
<v-list-item-icon>
<v-icon name="delete" outline />

2
app/src/modules/settings/routes/data-model/field-detail/components/languages.vue
View File

@@ -15,7 +15,7 @@
<v-icon name="list_alt" @click="toggle" v-tooltip="$t('select_existing')" :disabled="isExisting" />
</template>
<v-list dense class="monospace">
<v-list class="monospace">
<v-list-item
v-for="item in items"
:key="item.value"

8
app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2m.vue
View File

@@ -26,7 +26,7 @@
/>
</template>
<v-list dense class="monospace">
<v-list class="monospace">
<v-list-item
v-for="collection in availableCollections"
:key="collection.collection"
@@ -79,7 +79,7 @@
/>
</template>
<v-list dense class="monospace">
<v-list class="monospace">
<v-list-item
v-for="collection in availableCollections"
:key="collection.collection"
@@ -130,7 +130,7 @@
/>
</template>
<v-list dense class="monospace">
<v-list class="monospace">
<v-list-item
v-for="item in junctionFields"
:key="item.value"
@@ -166,7 +166,7 @@
/>
</template>
<v-list dense class="monospace">
<v-list class="monospace">
<v-list-item
v-for="item in junctionFields"
:key="item.value"

2
app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2o.vue
View File

@@ -27,7 +27,7 @@
/>
</template>
<v-list dense class="monospace">
<v-list class="monospace">
<v-list-item
v-for="collection in availableCollections"
:key="collection.collection"

4
app/src/modules/settings/routes/data-model/field-detail/components/relationship-o2m.vue
View File

@@ -26,7 +26,7 @@
/>
</template>
<v-list dense class="monospace">
<v-list class="monospace">
<v-list-item
v-for="collection in availableCollections"
:key="collection.collection"
@@ -72,7 +72,7 @@
<v-icon name="list_alt" @click="toggle" v-tooltip="$t('select_existing')" />
</template>
<v-list dense class="monospace">
<v-list class="monospace">
<v-list-item
v-for="field in fields"
:key="field.value"

8
app/src/modules/settings/routes/data-model/field-detail/components/translations.vue
View File

@@ -26,7 +26,7 @@
/>
</template>
<v-list dense class="monospace">
<v-list class="monospace">
<v-list-item
v-for="collection in availableCollections"
:key="collection.collection"
@@ -79,7 +79,7 @@
/>
</template>
<v-list dense class="monospace">
<v-list class="monospace">
<v-list-item
v-for="collection in availableCollections"
:key="collection.collection"
@@ -130,7 +130,7 @@
/>
</template>
<v-list dense class="monospace">
<v-list class="monospace">
<v-list-item
v-for="item in junctionFields"
:key="item.value"
@@ -166,7 +166,7 @@
/>
</template>
<v-list dense class="monospace">
<v-list class="monospace">
<v-list-item
v-for="item in junctionFields"
:key="item.value"

4
app/src/modules/settings/routes/data-model/fields/components/field-select.vue
View File

@@ -13,7 +13,7 @@
</span>
</template>
<v-list dense>
<v-list>
<v-list-item :to="`/settings/data-model/${field.collection}/${field.field}`">
<v-list-item-icon><v-icon name="edit" outline /></v-list-item-icon>
<v-list-item-content>
@@ -82,7 +82,7 @@
<v-icon @click.stop="toggle" name="more_vert" />
</template>
<v-list dense>
<v-list>
<v-list-item :to="`/settings/data-model/${field.collection}/${field.field}`">
<v-list-item-icon><v-icon name="edit" outline /></v-list-item-icon>
<v-list-item-content>

2
app/src/modules/settings/routes/data-model/fields/components/fields-management.vue
View File

@@ -28,7 +28,7 @@
</v-button>
</template>
<v-list dense>
<v-list>
<template v-for="(option, index) in addOptions">
<v-divider v-if="option.divider === true" :key="index" />
<v-list-item

2
app/src/modules/settings/routes/roles/detail/components/permissions-overview-toggle.vue
View File

@@ -10,7 +10,7 @@
</div>
</template>
<v-list dense>
<v-list>
<v-list-item @click="setFullAccess">
<v-list-item-icon>
<v-icon name="check" />

2
app/src/modules/users/components/navigation.vue
View File

@@ -1,5 +1,5 @@
<template>
<v-list nav>
<v-list large>
<v-list-item to="/users" exact :active="currentRole === null">
<v-list-item-icon><v-icon name="folder_shared" outline /></v-list-item-icon>
<v-list-item-content>{{ $t('all_users') }}</v-list-item-content>

2
app/src/views/private/components/comments-drawer-detail/comment-item-header.vue
View File

@@ -33,7 +33,7 @@
</div>
</template>
<v-list dense>
<v-list>
<v-list-item @click="$emit('edit')">
<v-list-item-icon><v-icon name="edit" outline /></v-list-item-icon>
<v-list-item-content>{{ $t('edit') }}</v-list-item-content>

2
app/src/views/private/components/filter-drawer-detail/field-filter.vue
View File

@@ -13,7 +13,7 @@
</div>
</template>
<v-list dense>
<v-list>
<v-list-item
:active="operator === activeOperator"
v-for="operator in parsedField.operators"

2
app/src/views/private/components/filter-drawer-detail/filter-drawer-detail.vue
View File

@@ -24,7 +24,7 @@
</v-input>
</template>
<v-list dense>
<v-list>
<field-list-item
@add="addFilterForField"
v-for="field in fieldTree"

2
app/src/views/private/components/image-editor/image-editor.vue
View File

@@ -54,7 +54,7 @@
/>
</template>
<v-list dense>
<v-list>
<v-list-item @click="aspectRatio = 16 / 9" :active="aspectRatio === 16 / 9">
<v-list-item-icon><v-icon name="crop_16_9" /></v-list-item-icon>
<v-list-item-content>16:9</v-list-item-content>

2
app/src/views/private/components/revisions-drawer-detail/revisions-modal-picker.vue
View File

@@ -7,7 +7,7 @@
</span>
</template>
<v-list class="menu" dense>
<v-list class="menu">
<v-list-item
v-for="option in options"
:key="option.value"

2
app/src/views/private/components/save-options/save-options.vue
View File

@@ -4,7 +4,7 @@
<v-icon :class="{ disabled }" name="more_vert" @click="toggle" />
</template>
<v-list dense>
<v-list>
<v-list-item :disabled="disabled" @click="$emit('save-and-stay')">
<v-list-item-icon><v-icon name="check" /></v-list-item-icon>
<v-list-item-content>{{ $t('save_and_stay') }}</v-list-item-content>