how do I get conditional divs displaying v-chips on the same line, justified right, as the previous element in vuetify within a v-list? - vuetify.js

I am trying to display a list of items using v-list:
`
<template>
<v-container>
<v-card>
<v-card-title>
{{ character.name }}
<v-spacer></v-spacer>
<v-chip small color="blue" class="mr-5">{{ character.qpoints }} qpts</v-chip>
<v-chip small color="green" class="mr-5">{{ character.level }}</v-chip>
<v-chip small color="brown" class="mr-5">{{ character.class }}</v-chip>
</v-card-title>
<v-card-text>
<v-list>
<v-list-item
v-for="q in charquests"
:key="q.id"
>
<v-list-item-content>
{{ q.quest_name }}
<div v-if="q.completed === true">
<v-chip small color="green" class="mr-5">complete</v-chip>
<v-chip small color="blue" class="mr-5">{{ q.qpoints }} qpts</v-chip>
</div>
<div v-else>
<v-chip small color="grey" class="mr-5">incomplete</v-chip>
<v-chip small color="grey" class="mr-5">{{ q.qpoints }} qpts</v-chip>
</div>
</v-list-item-content>
</v-list-item>
</v-list>
</v-card-text>
</v-card>
</v-container>
</template>
The list items display correctly. The v-chips inside the conditional divs display on the next line. I would like them to display on the same line, justified to the right. I am able to get them to display on the same line like this:
`
<v-list-item-content>
<div v-if="q.completed === true">
{{ q.quest_name }}
<v-chip small color="green" class="mr-5">complete</v-chip>
<v-chip small color="blue" class="mr-5">{{ q.qpoints }} qpts</v-chip>
</div>
<div v-else>
{{ q.quest_name }}
<v-chip small color="grey" class="mr-5">incomplete</v-chip>
<v-chip small color="grey" class="mr-5">{{ q.qpoints }} qpts</v-chip>
</div>
</v-list-item-content>
This results in the {{ q.quest_name }} displaying on the same line as the v-chips, but I cannot for the life of me get the v-chips to align right.
I tried inserting v-spacer after {{ q.quest_name }} in the second snippet but it caused the v-chips to appear on the next line.
I am extremely new to vuetify and I'm positive there's something simple I'm doing wrong but I've been beating my head on it for 2 hours and have gotten nowhere.

Related

How to define the width of expandable panels in Vuetify

As you can see in the picture my expandable panels do not use the maximum available width.
I want the expandable panels to use the maximum width available in the data table and make the columns fit exactly the width of the header columns. In addition to that it would be great to hide the expand Button (and also make the panel not clickable) if there is not enough data to display. I know that there is a hide-actions prop for that but I do not know how to use that.
My code:
<template>
<div class="table table--fixed-layout d-flex flex-grow-1 overflow-hidden fill-height">
<div v-if="loading" class="d-flex ma-auto">
<v-progress-circular indeterminate color="primary" :width="3" />
</div>
<v-data-table
v-else
item-key="id"
hide-default-footer
fixed-header
disable-sort
:headers="headers"
:items="filteredItems"
:items-per-page="-1"
>
<template #[`header.ticketNumber`]="{ header }">
<data-table-filter :name="header.text" #change="ticketNumberFilter = $event" />
</template>
<template #[`header.title`]="{ header }">
<data-table-filter :name="header.text" #change="titleFilter = $event" />
</template>
<template #[`header.status`]="{ header }">
<data-table-filter
:name="header.text"
:default-values="filterableTicketServiceStatuses"
#change="statusFilter = $event"
>
<template #default="{ value }">{{ getTicketServiceStatusLabel(value) }}</template>
</data-table-filter>
</template>
<template #[`header.hostNames`]="{ header }">
<data-table-filter :name="header.text" #change="hostNameFilter = $event" />
</template>
<template #[`header.creator`]="{ header }">
<data-table-filter :name="header.text" #change="creatorFilter = $event" />
</template>
<template v-slot:body="{ items }">
<v-container fluid>
<tbody v-for="item in items" :key="item.id">
<v-expansion-panels>
<v-expansion-panel>
<v-expansion-panel-header>
<template v-slot:default="{ open }">
<v-col>
<ticket-number :ticket-number="item.ticketNumber" />
</v-col>
<v-col>
<td class="pl-4">{{ item.title }}</td>
</v-col>
<v-col>
<li v-for="hostName in getFirstFourTicketHostNames(item)" :key="hostName">
<div class="pt-md-2">{{ hostName }}</div>
</li>
<div v-if="item.hosts.length > 4">
<v-fade-transition leave-absolute>
<span v-if="open">
<li v-for="hostName in getRestOfTicketHostNames(item)" :key="hostName">
<div class="pt-md-2">{{ hostName }}</div>
</li>
</span>
</v-fade-transition>
</div>
</v-col>
<v-col>
{{ getTicketServiceStatusLabel(item.status) }}
</v-col>
<v-col>
{{ item.creator }}
</v-col>
<td class="table__date">{{ formatDateTime(item.creationDate) }}</td>
<v-col></v-col>
<v-col>
<td class="table__date">{{ formatDateTime(item.finishedDate) }}</td>
</v-col>
<v-col>
<td class="pl-4">
<v-icon v-if="item.notifyCustomer">{{ icons.mdiCheck }}</v-icon>
</td>
</v-col>
</template>
</v-expansion-panel-header>
</v-expansion-panel>
</v-expansion-panels>
</tbody>
</v-container>
</template>
</v-data-table>
</div>
</template>
How can I achieve that?

Change nested vuetify list color so it's white or has no active class

I have this list I created, which looks like this:
<v-list class="criteria-list" color="#f2f4f7">
<v-list-group
v-for="criterion in criteria"
:key="criterion.name"
v-model="criterion.active"
no-action
>
<template v-slot:activator>
<v-list-item-content>
<v-list-item-title
class="text-uppercase"
v-text="criterion.name"
></v-list-item-title>
</v-list-item-content>
</template>
<v-list-item-group
v-for="attribute in criterion.attributes"
:key="attribute.name"
multiple
active-class=""
>
<v-list-item #click="addFilter(attribute)">
<template v-slot:default="{ active }">
<v-list-item-action>
<v-checkbox :input-value="active"></v-checkbox>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>
{{ attribute.name }} ({{ attribute.count }})
</v-list-item-title>
</v-list-item-content>
</template>
</v-list-item>
</v-list-item-group>
</v-list-group>
</v-list>
I want it to look like this:
So, as you can see, I have applied color="#f2f4f7" to the master list, which has indeed changed the background colour, but it has done it for itself, and the groups also.
I tried setting the colour of the v-list-item-group but it's not setting the background-color of the group unless it's active:
This is using color="pink" as white doesn't do anything.
Does anyone know if it's possible to do what I want without having to override using ::v-deep?
you can do it with a css;
.v-list-item::before {
background: transparent !important;
}
and , of course, remove the color attribute from the v-list
<v-list class="criteria-list">
<v-list-group
v-for="criterion in criteria"
:key="criterion.name"
v-model="criterion.active"
no-action
>
<template v-slot:activator>
<v-list-item-content>
<v-list-item-title
class="text-uppercase"
v-text="criterion.name"
></v-list-item-title>
</v-list-item-content>
</template>
<v-list-item-group
v-for="attribute in criterion.attributes"
:key="attribute.name"
multiple
active-class=""
>
<v-list-item #click="addFilter(attribute)">
<template v-slot:default="{ active }">
<v-list-item-action>
<v-checkbox :input-value="active"></v-checkbox>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>
{{ attribute.name }} ({{ attribute.count }})
</v-list-item-title>
</v-list-item-content>
</template>
</v-list-item>
</v-list-item-group>
</v-list-group>
</v-list>

vuetify v-btn with text-truncate

Any one know how to use text-truncate with v-button. My current attempts are this:
<v-menu
offset-y>
<template v-slot:activator="{on, attrs}">
<v-btn
text
v-bind="attrs"
v-on="on"
:max-width="150"
class="text-truncate"
><span class="text-truncate;max-width:150px">{{ userEmail }}</span></v-btn>
</template>
<v-list>
<v-list-item-group>
<v-list-item
v-for="(item, index) in personalMenuItems"
:key="index"
#click="item.action">
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item>
</v-list-item-group>
</v-list>
</v-menu>
Make sure your properly setting the max-width style...
<v-btn text v-bind="attrs"
v-on="on"
:max-width="150">
<span class="text-truncate" style="max-width:150px">{{ userEmail }}</span>
</v-btn>
Demo

previous v-expansion-panel not closing when another one is opened

From what I've seen it should close without adding anything special but every time I click on another expandable item the previous one doesn't close.
<template>
<div d-flex p-0 m-0>
<div mb-3>
<div v-for="item in items" :key="item.Id">
<div v-if="item.HasChildren === true">
<div
class="scanList pa-2 font-weight-light"
v-ripple="{ class: 'success--text' }"
#click="swapComponent(item)"
>
{{ item.Name }}
</div>
</div>
<div v-else-if="item.HasChildren === false">
<v-expansion-panel>
<v-expansion-panel-content>
<template v-slot:header>
<div>{{ item.Name }}</div>
</template>
<v-card>
<QR justify-center :value="item.Id"></QR>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
</div>
</div>
<div v-if="model != null && model.HasChildren === false">
<v-card>
<template v-slot:header>
<div>{{ item.FullPathName }}</div>
</template>
<QR justify-center :value="model.Id"></QR>
</v-card>
</div>
</div>
<div v-if="items !== initialItems">
<div class="backButton" #click="swapPrevious()">
<v-icon class="arrow">fa-arrow-left</v-icon>
</div>
</div>
</div>
</template>
I'm on Vuetify 1.5. Thanks for the help.
You are trying to create a separate expansion panel in the loop and its independent, explicitly we can define a logic to close the other panels
Working codepen here (using vuetify 1.5x)
Changes for HTML:
Added a event trigger on wrapper around expansion panel.
Added v-model for each expansion panel.
<div v-else-if="item.HasChildren === false" #click="closeOtherPanel(item.Id)">
<v-expansion-panel v-model="panel[item.Id]">
<v-expansion-panel-content>
<template v-slot:header>
<div>{{ item.Name }}</div>
</template>
<v-card>
<QR justify-center :value="item.Id"></QR>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
</div>
Changes for script:
Add panel property inside data object.
Add a method to close other panels
data: {
panel: {},
},
methods: {
closeOtherPanel(id) {
var self = this;
Object.keys(this.panel).map(x => {
if (x != id) self.panel[x] = null;
});
}
}

Vuetify block UI for a few seconds

Loading v-for on follow code:
<v-flex class="v-card-cards" xs6 sm4 md4 lg2>
<v-card>
<v-card-title>
<span class="headline black--text">
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-btn icon color="warning" flat small v-on="on">
<v-icon>edit</v-icon>
</v-btn>
</template>
<span>{{ $t('messages.app.edit') }}</span>
</v-tooltip>
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-btn icon color="error" flat small v-on="on">
<v-icon>delete</v-icon>
</v-btn>
</template>
<span>{{ $t('messages.app.delete') }}</span>
</v-tooltip>
</span>
<v-spacer></v-spacer>
<v-icon class="profile_icon elevation-5 success--text" x-large>account_circle</v-icon>
</v-card-title>
<v-divider class="ml-0"></v-divider>
<v-list>
<v-list-tile>
<v-list-tile-action>
<v-tooltip top>
<template v-slot:activator="{ on }">
<v-icon color="info" small v-on="on">info</v-icon>
</template>
<span>{{ $t('messages.forms.newCard.fields.firstname.label') }}</span>
</v-tooltip>
</v-list-tile-action>
<div>
<span class="caption truncate">{{ item.firstname }}</span>
</div>
</v-list-tile>
<v-divider inset></v-divider>
<v-list-tile>
<v-list-tile-action>
<v-tooltip top>
<template v-slot:activator="{ on }">
<v-icon color="info" small v-on="on">info</v-icon>
</template>
<span>{{ $t('messages.forms.newCard.fields.lastname.label') }}</span>
</v-tooltip>
</v-list-tile-action>
<div>
<span class="caption truncate">{{ item.lastname }}</span>
</div>
</v-list-tile>
<v-divider inset></v-divider>
<v-list-tile>
<v-list-tile-action>
<v-tooltip top>
<template v-slot:activator="{ on }">
<v-icon color="info" small v-on="on">people</v-icon>
</template>
<span>{{ $t('messages.forms.newCard.fields.groups.label') }}</span>
</v-tooltip>
</v-list-tile-action>
<div>
<span
v-for="group in item.groups"
:key="item.groups._id"
class="caption truncate"
>{{ group.description }}</span>
</div>
</v-list-tile>
<v-divider inset></v-divider>
<v-list-tile>
<v-list-tile-action>
<v-tooltip top>
<template v-slot:activator="{ on }">
<v-icon color="info" small v-on="on">note</v-icon>
</template>
<span>{{ $t('messages.forms.newCard.fields.notes.label') }}</span>
</v-tooltip>
</v-list-tile-action>
<div>
<span class="caption truncate">{{ item.notes }}</span>
</div>
</v-list-tile>
<v-divider inset></v-divider>
</v-list>
<v-card-actions class="mx-3">
<v-spacer></v-spacer>
<v-tooltip top>
<template v-slot:activator="{ on }">
<v-badge overlap color="info">
<template v-slot:badge>12</template>
<v-icon
large
v-on="on"
color="grey darken-1"
#click="$router.push({ name: 'dashboard' })"
>description</v-icon>
</v-badge>
</template>
<span>{{ $t('messages.forms.newCard.fields.notes.label') }}</span>
</v-tooltip>
</v-card-actions>
</v-card>
page is blocked for a few seconds, during the loading of this contents. Why? Can resolve? I have tried avoid 'v-' directive of vuetify, using only html and so not get nothing block. But i want use vuetify style.
Have tried to find other similar question on web but i don't find nothing about this argument

Resources