kolesnikovav / vuetify-toolkit Goto Github PK

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.

1. 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.

2. 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"

3. 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.

When I use allow-select-parents and the default leaf mode, the children with the property disabled: true is selected when I select their parents. I would assume that when selecting the parent node, that all the children, except those with disabled: true would get selected.

Provide adjustable pagination for v-treeselect component similar as v-datatable for large amount of data

I choose the child, but the parent is chosen by mistake.
1:

2:

please see this code:

https://codepen.io/nekooee/pen/mdONdYP?editors=1010

Hi,
I try to search in list width autocomplete options. but it only works for parents.
This option In tree mode loses its efficiency. Is there no solution to it?

before type:

after type:

@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?

When selecting a child node, the indeterminate icon (as can be seen in the original Vuetify TreeView component (v-treeview) is missing.

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