Do you know where can i find an implementation of the super select of Google Data studio with the "Only" to select only that element ?
you can also filter results , super handy if the list is long :
There is a feature request for select-all functionality, and apparently it will be possible using to-be-implemented scoped-slot called prepend-item.
So currently you will need some workaround.
Updated codepen with prepend-item slot which came in version 1.2:
https://codepen.io/anon/pen/EdVpmY
(must look into filtering more so I'll update if something changes)
Note prepend-item is also part of the parent v-list component, so we can't easily fix controls to the top.
<template slot="prepend-item">
<v-list-tile #click.stop="selected = selectedAll ? [] : states.slice()">
<v-list-tile-action>
<v-icon :color="selected.length > 0 ? 'indigo darken-4' : ''">{{ icon }}</v-icon>
</v-list-tile-action>
<v-list-tile-title>Select All</v-list-tile-title>
</v-list-tile>
<v-divider class="mt-2"></v-divider>
<v-list-tile class="search-tile">
<v-text-field v-model="q" prepend-inner-icon="search" class="pt-0"></v-text-field>
</v-list-tile>
</template>
With regards to select-only functionality, you can use already supported scoped-slot item (see scoped slots in API docs) , and add select-only button yourself:
<v-select v-model="selected"
multiple
>
<template slot="item" slot-scope="data">
<v-list-tile-content>
<v-list-tile-title>
{{ data.item }}
</v-list-tile-title>
</v-list-tile-content>
<v-list-tile-action class="hidden">
<v-btn #click.stop="selected = [data.item]">ONLY</v-btn>
</v-list-tile-action>
</template>
</v-select>
Codepen, note that some CSS is added as well.
Expanded codepen with select-all workaround using watch, and one of the items is "All". So if we want array of selected without "All" we can do something like return this.selected.filter(v => v !== "All") in computed property or wherever it's needed.
As much as I can see this is a custom component. The one you are showing is probable made with angular + material like in this example: https://stackblitz.com/edit/angular-material-select-multi-c6vtux
So I think that you probably will end needing a component like vue-multiselect, that is fully featured and probably will accomplish what you need and more, the only thing is that you will need to work on it to use material styles.
https://github.com/shentao/vue-multiselect
https://vue-multiselect.js.org
I guess, that if you need more features, you might be able to customize the template https://vue-multiselect.js.org/#sub-custom-option-template
Now check ¨Custom configuration¨, there you will find some examples that will show you you can actually do something like the "only" with some effort.
This is the most complete component I have found for vuejs to handle multi select.
I hope it helps.
It's a feature that hasn't been implemented. Ask you desire feature HERE.
Hope it help you.
Related
I started to use vuetify 3 beta, I know it is not stable according to the documentation but I still tried.
<v-text-field placeholder="Type a name" class="v-field__outlined" outlined></v-text-field>
End result is the basic vuetify text field.
How do I fix this, any help is appreciated!
The styles are no longer individual prop values.
Styling options are now set via a prop called variant
variant="outlined"
It is also no longer possible to mix the different styles and rounded appears to be missing so far.
https://next.vuetifyjs.com/en/components/text-fields/#variant
In Vuetify components-lib there is a hint that on I can bring my own custom v-list-item with slot:item
// item
// Description
// Define a custom item appearance
// Props
{
parent: VueComponent
item: object
on: object // Only needed when providing your own v-list-item
attrs: object // Only needed when providing your own v-list-item
}
How can I achive that? because when I do
<template v-slot:item="data">
<book :book="data.item"></book>
</template>
Vutifiey warp-up it with own v-list-item and I want to put some custom class on part ot the v-list-items
It is a very common scenario to add some custom styling in the v-auto-complete's list. But, there is no way of avoiding v-list/v-list-item as Vuetify does not give you the full control of the dropdown menu.
As you may have noticed that dropdown menu is like the v-menu and the input element for v-autocomplete is the activator of the dropdown menu. So, this is how the v-autocomplete component works:
Vuetify creates a dropdown menu and add its own logic(HTML, CSS, JS) into it.
it gives users the slots to add custom markup/components inside the v-list-items
That is why there is no way of avoiding the v-list component.
I have attached a pen to help you in better understanding how you can use a custom component inside v-list/v-list-item of v-autocomplete: https://codepen.io/abdullah-shabaz/pen/MWwZNYW
If you are having some problems with styling your book component please tell me. I am sure I can help you with it.
I know this is an old question, I was looking for the same thing so if anybody needs this in the future, the answer is:
<template v-slot:item="{item, on, attrs}">
<v-list-item
v-bind="attrs"
v-on="on"
>
<v-list-item-avatar>
<v-icon v-if="attrs.inputValue">mdi-checkbox-marked</v-icon>
<v-icon v-else>mdi-checkbox-blank-outline</v-icon>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title>{{ item.text }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</template>
Previously (I thought?) it was possible to put HTML into vuetify hints but for me this is no longer working. For example, in one of my components I have:
<v-checkbox
v-model="create"
label="Nice label"
persistent-hint
hint="<span class="red--text">Red hint</span>"
/>
This hint used to display in red but now I see the full HTML code. Has something changed or am I doing something wrong?
In the Vuetify forum, MajesticPotatoe pointed me towards the bug report https://github.com/vuetifyjs/vuetify/issues/9647. This gave the following slots workaround, which works in my code:
<v-checkbox
v-model="create"
label="Nice label"
persistent-hint
hint="<span class="red--text">Red hint</span>"
>
<template v-slot:message="{ message, key }">
<span v-html="message"></span>
</template>
</v-checkbox>
It seems that this used to work without slots before the patch https://github.com/haggys22/vuetify/commit/f0d5edd7ddf7e01ba057b7f3d14604199b6db68d was merged.
behaviour changed from 1.5.19 to 1.5.20
1.5.19 (and before) treats html tags as expected
1.5.20, 1.5.21 treat html tags as simple text
'hint' is the 'string' type so you can't add HTML tags. Here is the screenshot from documentation: https://prnt.sc/qlag61
So, I think you can apply red color from CSS / SCSS using this class name '.v-messages__message' if you really need red color in hint.
Is it even possible to search in expand slot in v-data-table?
According to my test below it doesn't work, try to search expandData property in items
<template slot="expand" slot-scope="props">
{{ props.item.expandData }}
</template>
codepen test
What should I look further for next step in case if need this kind of search for my project?
Thanks in advance
I have been using Angular Material in one of my project. Suddenly I realized the need for having a select all option on md-select. I think I will pull a git request for the same.
However, currently I am looking for a similar drop down structure with checkboxes (like md-select multiple) but also a select all option.
I am aware that I can push a dummy empty entry into md-select option array and manipulate reverse way on its selection. But it would require a lot of code change in my current structure and would also not be a elegant thing to do.
I tried looking for it in bootstrap and jQuery-UI, but could not find one yet. Is there any such control known to anyone. Any redirection will be helpful.
You can do that easily inside the HTML. It requires only one line of code, or two lines, if you want a "select none" option as well. For example
<md-input-container>
<label>Users</label>
<md-select ng-model="selectedUser" multiple=""
ng-model-options="{trackBy: '$value.id'}">
<md-optgroup label="Users">
<md-option ng-repeat="user in users"
ng-value="user">{{ user.name }}</md-option>
</md-optgroup>
</md-select>
</md-input-container>
<button ng-click="selectedUser=users">all</button>
<button ng-click="selectedUser=[]">none</button>
Example in Plunker.
Edit: I updated the below Plunker to show the "all" button inside the select box next to the "Users" optgroup title. The relevant change:
<md-select ng-model="selectedUser" multiple="" ng-model-options="{trackBy: '$value.id'}">
<button ng-click="doSelectedUser()" style="float:right">all</button>
<md-optgroup label="Users">