flavorly / vanilla-components Goto Github PK

I have a generic class taken from the skeleton example on docs

If I add a constructor to it so an example:

namespace App\Datatables\Users;

use Flavorly\VanillaComponents\Datatables\Datatable;
use Flavorly\VanillaComponents\Datatables\Options\General\Options;

class User extends Datatable
{
   public function __construct($id)
    {
        $this->id = $id;
    {
    public function query(): mixed
    {
        return User::query()->where('user_id', $this->id);
        
        // You can also return a closure or a relationship here
        // return fn() => User::query()->where('user_id', auth()->id());
        // Auth::user()->payments();
    }
    
    public function fetchEndpoint(): ?string
    {
        // Endpoint where the datatable will fetch the data from
        return route('datatables.demo');
    }
    
    public function columns(): array
    {
        return [
           // Columns go here
        ];
    }

    public function filters(): array
    {
        return [
            // Filters go here
        ];
    }

    public function actions(): array
    {
        return [
            // Actions go here
        ];
    }

    public function options(): array| Options
    {
        return Options::make()->refreshable()->hideSearchBar();
    }
}

I get the following error. I tried also defining the Name attribute on the class but that did not seem to work either.

Flavorly\VanillaComponents\Datatables\Datatable::getName(): Return value must be of type string, null returned

Hey @nikuscs

It would be good to switch popper.js for Floating UI: https://github.com/floating-ui/floating-ui. Floating UI is developed by the same devs and is the replacement for Popper. They're recommending everyone migrate, since Popper will only be getting fixes from now on.

Migration guide: https://floating-ui.com/docs/migration

Type errors absolutely everywhere, I would suggest either disabling typing for the entire project or fixing the typing issues, I would do this myself but I have other commitments and deadlines to keep to on another project.

Found 204 errors in 46 files.

Errors  Files
     5  node_modules/@flavorly/vanilla-components/dist/components/alert/alert.vue:9
     1  node_modules/@flavorly/vanilla-components/dist/components/button/button.vue:8
    13  node_modules/@flavorly/vanilla-components/dist/components/checkbox/checkbox-group.vue:13
     4  node_modules/@flavorly/vanilla-components/dist/components/checkbox/checkbox.vue:81
     5  node_modules/@flavorly/vanilla-components/dist/components/country-input/country-input-option.vue:5
     4  node_modules/@flavorly/vanilla-components/dist/components/country-input/country-input.vue:151
    20  node_modules/@flavorly/vanilla-components/dist/components/datatable/datatable.vue:41
     2  node_modules/@flavorly/vanilla-components/dist/components/datatable/partials/actions.vue:10
     8  node_modules/@flavorly/vanilla-components/dist/components/datatable/partials/dialog-confirm-action.vue:10
    11  node_modules/@flavorly/vanilla-components/dist/components/datatable/partials/dialog-filters.vue:15
     1  node_modules/@flavorly/vanilla-components/dist/components/datatable/partials/dialog-settings.vue:14
     4  node_modules/@flavorly/vanilla-components/dist/components/datatable/partials/empty-state.vue:7
     1  node_modules/@flavorly/vanilla-components/dist/components/datatable/partials/filter-badge.vue:31
     4  node_modules/@flavorly/vanilla-components/dist/components/datatable/partials/head.vue:8
     4  node_modules/@flavorly/vanilla-components/dist/components/datatable/partials/pagination.vue:8
     3  node_modules/@flavorly/vanilla-components/dist/components/datatable/partials/search-bar.vue:6
     5  node_modules/@flavorly/vanilla-components/dist/components/datatable/partials/selection-bar.vue:52
     3  node_modules/@flavorly/vanilla-components/dist/components/datetime-input/datetime-input.vue:3
     1  node_modules/@flavorly/vanilla-components/dist/components/dialog/dialog.vue:11
     2  node_modules/@flavorly/vanilla-components/dist/components/dropdown/dropdown-menu.vue:16
     3  node_modules/@flavorly/vanilla-components/dist/components/dropdown/dropdown.vue:133
     1  node_modules/@flavorly/vanilla-components/dist/components/forms/form-label.vue:51
     3  node_modules/@flavorly/vanilla-components/dist/components/input-group/input-group.vue:132
     9  node_modules/@flavorly/vanilla-components/dist/components/input/input.vue:11
     1  node_modules/@flavorly/vanilla-components/dist/components/misc/transitionable.vue:34
     6  node_modules/@flavorly/vanilla-components/dist/components/phone-input/phone-input.vue:4
     1  node_modules/@flavorly/vanilla-components/dist/components/rich-radio-option/rich-radio-option.vue:71
     5  node_modules/@flavorly/vanilla-components/dist/components/rich-radio/rich-radio.vue:13
     1  node_modules/@flavorly/vanilla-components/dist/components/rich-select-option-image/rich-select-option-image.vue:6
     1  node_modules/@flavorly/vanilla-components/dist/components/rich-select-option-indicator/rich-select-option-indicator.vue:7
     1  node_modules/@flavorly/vanilla-components/dist/components/rich-select/partials/clear-button.vue:3
     1  node_modules/@flavorly/vanilla-components/dist/components/rich-select/partials/option-list.vue:9
     2  node_modules/@flavorly/vanilla-components/dist/components/rich-select/partials/option.vue:8
     2  node_modules/@flavorly/vanilla-components/dist/components/rich-select/partials/search.vue:44
     1  node_modules/@flavorly/vanilla-components/dist/components/rich-select/partials/state.vue:7
     2  node_modules/@flavorly/vanilla-components/dist/components/rich-select/partials/trigger-tags-tag.vue:7
     2  node_modules/@flavorly/vanilla-components/dist/components/rich-select/partials/trigger.vue:10
     7  node_modules/@flavorly/vanilla-components/dist/components/rich-select/rich-select.vue:7
     1  node_modules/@flavorly/vanilla-components/dist/components/select/select.vue:104
     1  node_modules/@flavorly/vanilla-components/dist/components/skeleton/skeleton.vue:43
    13  node_modules/@flavorly/vanilla-components/dist/components/slideover/slideover.vue:15
    12  node_modules/@flavorly/vanilla-components/dist/components/tags-input/tags-input.vue:9
     9  node_modules/@flavorly/vanilla-components/dist/components/textarea/textarea.vue:11
     8  node_modules/@flavorly/vanilla-components/dist/components/toggle/toggle-group.vue:13
     9  node_modules/@flavorly/vanilla-components/dist/components/toggle/toggle.vue:9
     1  node_modules/@flavorly/vanilla-components/dist/core/config/popper-options.ts:16
ERROR: "type-check" exited with 2.

If I don't want any placeholder by default for input it's not possible without using an empty placeholder. Or maybe I am missing something.

Hey @nikuscs

Nice work with Vanilla Components! Do you have an ETA on the slider? That's the only thing stopping us from switching to this library (and we'd love to switch over ASAP...).

This could be a good code reference: https://github.com/vueform/slider. It's based on https://github.com/leongersen/noUiSlider

Question :
I have disabled phone input props . but do nothing . how to Disabled it ?

public function query(): mixed
    {   
        return User::query()->where('id', auth()->id());
    }

Id is in auth() is null here in my controller, I wondered why and how to fix? I can pass through the id from the request, currently using auth:sanctum guard in laravel, so you have to login to see the page. So auth is there, but just not on the query.

Any help would be great. Also I think I would like to help maintain this package if that is of interest.

Using the rich select, if you set clearable to false, you obviously cant press the clear button anymore. But the bug is that you also cant deselect any of the options youve selected. The only work around that ive found is to use tags=true, so that you can deselect using the tags.

When changing the state of the toggle, the content is pushed up/down by 4px. See the attached screen recording.

Your work is amazing!

What do you think about creating this for Svelte too?

期待更多的组件加入 支持

I like this project very much, it is a beautiful component library, I hope you can provide nuxt3 support.

Vanilla Component is amazing but some core elements is missing on it.
We are building an SAAS project with vanilla components. We required to use thirt party dashboard from github called "KUI Dashboard".

A lot of problems we are facing. Both packages has dedicated same components.

Could we expected a dashboard, sidebar and charts officially?

I need change the font size of the input box of 'DateTimeInput' element, how can I do it?
I can see there is a inputProps in the base props, but it do nothing.

I want to show selectorIcon when nothing selected, then if user select something use clearable icon.

Why is this all Vue? @egzidev you agree?

I'm facing this error with import in WebStorm IDE. My application uses the latest version of Vue 3 with composition API and typescript. I found this solution [https://stackoverflow.com/questions/49258849/could-not-find-a-declaration-file-for-module-vue-xxx] But can we fix this in the next release.

When using RichSelect with a URL that does not contain a hostname the query parameters will not be added to the request.

For example:

fetchEndpoint="http://localhost/api/options" will correctly request http://localhost/api/options?query=test&page=1
fetchEndpoint="/api/options" will always request http://localhost/api/options without any query parameters.

The documentation mentions that a FQDN should be used but it probably shouldn't fail in this fashion.

Hi, amazing project.
RichSelect default value is loaded but not selected.
Can you help me what I did wrong?

                <RichSelect
                    v-model="zipId"
                    :fetch-endpoint="testUrl"
                    value-attribute="id"
                    text-attribute="name"
                    :minimum-input-length="3"
                >

                </RichSelect>

Route::get('/fetch-users', function(Request $request){
return ResolveRichSelectOptions::for(User::class, ['name', 'id']);
})->middleware('web')->name('api.fetch-users');

Hey everyone!

First off thank you for using Vanilla Components, it was a funny and nice project for the Vue Ecosystem & i had a lot of fun doing, but from now on im only supporting the library for security issues & maintenance.

Long story short but, i believe the Vue ecosystem should join forces into one library of primitives & components, rather then just creating new ones so i recommend migrating to Radix Vue or Oku UI

They currently support all the components we have, plus they are renderless, this means you can style on your own and use something like Tailwind Merge to generate variants ( which was the whole point of Vanilla Components )

If you are looking for more styled components on top of Radix Vue checkout Shadcn Vue

Thanks everyone for the support <3

This package allows me to do a lot and customize a lot - much appreciated.

I did want to ask, as I might have missed it in the docs and tried to change the css for the richselect components dropdown classes, but is there a way to change the width of the dropdown? I have a RichSelect in a table and as it gets smaller the RichSelect button gets smaller and the dropdown takes on the same width as the button which is cutting off the options. I do see it truncates the options but not ideal as the users would need to see the entire option. Example below of what I'm experiencing but it would be great if you could point me in the right direction as to how I would tackle this issue to make the dropdown take the width of the options and not truncate... Thanks!

Hello,

When adding multiple tags in a RichSelect, the tags wrap or dropdown to the next line if needed which is nice. However, when you remove a tag and the input goes back to a single line and you try to add another tag again, the input seems to remember that it's a double lined input and the dropdown appears well below the input.

I've provide a couple screenshots from the site.

Screenshot 1: Normal functionality

Screenshot 2: When removing a tag and going back to a one-lined input and trying to add another tag

You'll notice in Screenshot 2 the space below the input is still there even though it's not necessary.

Thanks

Hi @nikuscs

Thanks for Vanilla Components! Is there a way to invoke the refresh function in the Datatable using 'ref' or any other method?
For example, if I need to invoke the fetchData function after a specific event.

Let's make phone icons to import dynamically the 250 components.
So, when a component is required, it will be ajax required on demand.
This will solve the huge bundle size.

Hi, thank you very much for the UI library provided by the author, whether you can add notification and file upload components.

Hello, I love your kit, is so simple and clear.
Did you ever consider developing a Figma UI Kit? I believe this would boost adoption since it would be much easier to use by designers!

Hi,
Thanks for your efforts. Could we expect a complete Side Navbar with dropdown items, please?

If possible than you could also add a nice Top Navigation!

Thank you so much again.

Just wondering if it would be able to include a variation to the datatable, by allowing to insert a link within a particular chosen column? Happy to take a look but would need to be able to overwrite or change the datatable. I was thinking you can attach a kind of filter or use the transform function to insert the data manually. Or is there a slot that I can use and pass in a component or something of the sort?

https://vanilla-components.com/guide/integrations-datatables.html

Hello @nikuscs and thank you for the Vanilla Components!

There is probably a bug with the PhoneInput component. Reactivity doesn't work when I pass a variable to v-model and change its value.

<script setup>
import { PhoneInput } from '@flavorly/vanilla-components'
import { ref } from 'vue'

const number = ref('+35191523813')
const valueCountry = 'PT'


const submit = () => {
    number.value = '+35191521111';
};

</script>

<template>
    <PhoneInput
      v-model="number"
      :country-code="valueCountry"
      feedback="Im useful helper out here, choose wisely"
      :favorite-countries="['PT', 'ES', 'US']"
      country-placeholder="Pick your phone country"
      phone-placeholder="National Number"
    />
</template>

I didn't catch that, but it works with an array :)

const number = ref(['+35191523813'])
const valueCountry = 'PT'

const submit = () => {
    number.value[0] = '+35191521111';
};

I have a project using vue-tsc when I try to use this package it throws a lot of type errors.
Are there any plans on adding vue-tsc to the project to do type checking?

Followed the instructions in the Quick Start, development works fine but build fails and 2 errors are shown as below: