kolesnikovav / vuetify-toolkit Goto Github PK
View Code? Open in Web Editor NEWThe set of additional vuetify components
License: MIT License
The set of additional vuetify components
License: MIT License
Hi there
On the VDataGridSelect, when selecting the clear button, it does not clear the contents.
I am using the CDN version.
Thanks
It seems that selection behavior returns object instead of attribute defined in item-value
even with :return-object="false"
. See https://vuetifyjs.com/en/api/v-treeview/#props-return-object
Hi there
I'm using vuetify via CDN and using it locally. Can you please be kind and also avail a bundled javascript option for your components so that I can include it via the <script></script> tag in my web app?
Thanks and you are doing a wonderful job here. Keep it up.
Hi there
Thanks for the updates you have made. If you dont mind me highlighting some few issues again.
Multiple mode: When you click on the select, detect if the data-table is open, if the data-table is open then close it. Currently opening of the data-table happens when you click the select, but then you have to click the close button to close it.
Multiple mode: Add an Ok/Apply button at the bottom left of the data-table. This Ok button should show when you have activated "multiple" mode. Usually one selects items on the left and now having to scroll to the right to close the data-table is additional work. This ok/apply button will close the data-table once a user has made their selection and clicked "Ok"
No two way binding when one actually clicks the "delete" button on the chip itself. This works when items are de-selected from the data-table not the other way round.
Provide adjustable pagination for v-treeselect component similar as v-datatable for large amount of data
@kolesnikovav Thank you so much for this great toolkit.
I was trying to implement the basic VTreeSelect but I am facing some issue when I try to pass props to the "treeview" part.
From your documentation:
This component extends VAutocomplete component. It contains all properties, slots, events of extended component. The part of VTreeSelect component is VTreeview. Properties and events are repeated. Scoped slots of VTreeview are transformed
I went into the code and seems like the props are merged in the final component, but I am not able to pass them at all.
For example if I want to change the color of the select checkbox, vuetify indicate i should pass the new color using the prop selected-color but this doesn't work in your component (it works however in vuetify).
Same goes with the expand-icon (I would love to use it to change the expand icon); again it work in vuetify but not in your component.
(1) Vuetify example (this works)
<v-treeview :items="items" :expand-icon="'$chevronDown'" selectable :selected-color="secondary"></v-treeview>
(2) Toolkit example (this doesn't work)
<v-tree-select
expand-icon="'$chevronDown'"
independent
autocomplete
dense
multiple
:selectable="false"
:items="items"
placeholder="Test"
outlined
hide-details="auto"
:menu-props="{
bottom: true,
maxHeight: 300
}"
:append-icon="'$chevronDown'"
color="grey darken-2"
selected-color="secondary"
>
</v-tree-select>
What I am doing wrong? I am passing the props in a wrong way? If so how I should pass them?
Thanks
P.S.
Would be very nice if was possible inserting a fixed header and a fixed footer in the menu (absolute positioned for example), and let the menu scroll under them (the menu should have a fix height, and scrollable)
Hi there
I have noted and found this repo, https://github.com/portablemind/vuetify_tree_data_table
Sadly I cant run it. I am wondering if it will be possible to have something like this, I see the one you have that resembles it, however just wondering if its possible to have something working like this, even without the drag and drop.
I am willing to donate some paypal funds should you be willing. Thanks.
Hi! I am using VTreeSelect in my project. I have a root value, like "all groups" and their diverse children. I would like the root item and all children to appear selected by default when rendering the page (but the user can change the selection later as well). Is there any way to do this?
Привет, спасибо за библиотеку, но пока что с добавлением в Nuxt есть проблема.
Nuxt собирает vuetify через @nuxtjs/vuetify
В nuxt.config.js сделал как в примере
import {
VTreeSelect,
VCascader,
VDataGridSelect,
VDateTimeSelect,
VAdvDataTable,
VMdView
} from 'vuetify-toolkit/vuetify-toolkit.umd'
...
buildModules: [
'@nuxtjs/eslint-module',
['@nuxtjs/vuetify', {
VTreeSelect,
VCascader,
VDataGridSelect,
VDateTimeSelect,
VAdvDataTable,
VMdView
}]
],
В результате nuxt при сборке выдаёт ошибку
Invalid or unexpected token
@import '../../styles/styles.sass'
^
Поиск показал, что такой импорт есть в vuetify/lib.
Есть какой-то способ использовать модуль в Nuxt?
The opportunity to select a parent node as well, not only the last child
After installation to use with [email protected] webkit throws hundreds of warnings caused by some SCSS rules inside Vuetify itself.
Hi
I have noted that on the pen provided for the VDateTimeSelect there are properties like:
chips, multiple, autocomplete and items
Q1. how are these relevant to the date time select component?
Q2. can one select multiple date & times from this component? If so, how?
Add value filter excel-like in headers of VAdvDataTable component.
Simplify search items for user
Selection returns array instead of single item value even with :multiple="false"
defined. See https://vuetifyjs.com/en/api/v-autocomplete/#props-multiple
Just playing around with the library and I noticed that when supplying the v-model with some initial values, they aren't preselected, however normal selection works.
Example:
<template>
<div>
<v-tree-select
v-model="item"
:autocomplete="autocomplete"
chips
:dense="dense"
:multiple="multiple"
:items="items"
:clearable="clearable"
:dark="dark"
hoverable
selectable
selected-color="primary"
selection-type="independent"
open-all
/>
</div>
</template>
data: () => ({
item: [{'id': 2, 'name': 'Calendar : app'}],
items: staticitems, // see data source
chips: true,
multiple: true,
dense: true,
clearable: false,
dark: false,
autocomplete: true,
customSlots: false,
}),
The staticitems is from your example
Hi there
Sorry for bothering you. If it wont be breaking an arm, how can I just perhaps compile just the VDataGridSelect for CDN for my needs.
At the moment I dont need the other components but just this single one. Is it possible? How can I do it?
Thanks.
Hi there
There seems to be an issue when having deletable chips. Clicking one deletes others except for one.
Thanks
VTreeSelect looks different from the same v-select with empty selection. Vuetify v2.4.5
Here the template:
<v-select dense v-model="subjectIds" :items="subjects" label="Subjects" hide-selected item-value="id" item-text="caption" multiple clearable></v-select>
<v-tree-select dense v-model="subjectIds" :items="subjects" label="Subjects" hide-selected item-value="id" item-text="caption" multiple clearable></v-tree-select>
Is it configurable somehow or is it a bug in the code?
Thank you.
Hi there
Do you think you can do something like this:
https://github.com/portablemind/vuetify_tree_data_table
This is no longer working and it does not seem to be maintained. I thank you.
Hi,
Thank you for the components they are very convenient.
Still, it would be even better if you leaved us more freedom to do some tweaks here and there...
If you could emit some events here and there to be able to modify some default functionality and the possibility to set classes or attributes to the dinamically generated elements such as dialogs, menus, lists etc. it would be perfect.
Maybe even drop in some useful callbacks...
Please consider it when you have the time.
Again, Thank you!
I try to install this component. after install I run watch but get an error" Module not found: Error: Can't resolve 'sass-loader' "
after I install sass-loader but get the same error again.
I use webpack.
my webpack.mix.js:
mix.js('resources/js/admin.js', 'public/js')
.js('resources/js/app.js', 'public/js')
.js('resources/js/front.js', 'public/js').vue()
.postCss('resources/css/admin.css', 'public/css')
.postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('@tailwindcss/jit'),
require('autoprefixer')
])
.webpackConfig(require('./webpack.config'));
if (mix.inProduction()) {
mix.version();
}
Hello @kolesnikovav , thank you so much for this toolkit.
I have encountered some problems in the process of using, I hope you can help me in your busy schedule.
The value of VCascader currently used is bound to the last item. Can it be passed along with the parent?
current:
[{id: "2", name: "Berlin"}]
expected:
[{id: '1', name: 'EUROPA',}, {id: "2", name: "Berlin"}]
Hi there
How do I get selected items. Your pen example does not have a v-model set for example.
Can you please advise?
Thanks
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.