variantjs / vue Goto Github PK

Nuxt.js is commonly used as a web development framework which is built on top of Vue.js and extends it with lots of functionality.

I thought it would good to check whether variantjs/vue is compatible with Nuxt and update readme (and any future documentation) accordingly. This would either be a brief note for future users highlighting how it can be integrated with the framework or a note stating a lack of compatibility and what the plans are in regards to this.

There are two versions of Nuxt that can be explored:

• Nuxt 2 - stable version
• Nuxt 3 - currently in public beta

As far as I am concerned, this library does not currently play nicely with Nuxt 2 and I would naturally assume that the same would happen with the latest beta version. I am happy to provide further information or prepare an online reproduction as a starting point. I would suggest giving a fresh Nuxt project a go, adding the library and either confirming that the information stated above is correct, or the opposite - that everything works as expected.

in Documentation:
@popperjs/core is only need if you use the TRichSelect or TDropdown component.

In reality:

error while updating dependencies:
Error: Build failed with 1 error:
node_modules/@variantjs/vue/dist/index.es.js:26:29: ERROR: Could not resolve "@popperjs/core"

As the people that use or are involved in this project may notice, this project has been kind of abandoned for a long time with just small moments of progress that are not really reflected in a ready-to-use library, at least not what I want for this project.

There are a couple of reasons for that, including the lack of time due to my daily job but the main reasons are that I have been on the necessity to focus on more immediate sources of income and a lack of motivation that I have experienced during the last year.

I am sure that both reasons are temporary and most important. I really (REALLY) believe in this project, but I don't want to have this project abandoned with just empty promises for more time, especially out of respect for the sponsors.

So I decided to abandon this project, which means it will not have more updates until further notice (this includes vue-tailwind).

Thanks to all the contributors and special thanks to the sponsors.

PD: That doesn't mean that I am not open to proposals over this project (or others), like, let's say, some partnership, consulting, or stuff like that. If you want to make some proposals feel free to send me an email alfonso [at] vexilo . com

i just try to use the preview with script setup sfc but i got an error?

main.ts

import { createApp } from "vue";
import App from "./App.vue";
import { variantJsPlugin, VariantJSConfiguration } from "@variantjs/vue";
const app = createApp(App);
const variantJsConfig: VariantJSConfiguration = {};
app.use(variantJsPlugin, variantJsConfig);
app.mount("#app");

App.vue

<script setup lang="ts">
import { TButton } from "@variantjs/vue";
</script>

<template>
	<t-button>Hello world</t-button>
</template>

also the naming convention for variantJsPlugin is not really good, what about something like variantJs or createVariantApp ?

Thanks for your awesome work! I am planning to use the library for a University project and will do my best to report here any issues as soon as possible (if I find any). In the worst case scenario a fallback to VueTailwind would be a quick enough alternative :)

Hi there, thank you so much for this lib. I've just started upgrading my vue2 app to vue3. I am probably missing something really basic here, but for some reason, no matter what I try and do, I cannot use this amazing lib in the same way as I did with Vue2.

I have tried to install this in the "new way" like so:

import { variantJS } from '@variantjs/vue'
import Settings from "./vue-tailwind/settings/index";

const app = createApp({});
app.use(variantJS, Settings);

app.mount('#app');

Now, with the old version, that meant that all components were now globally available, and I could just do something like:

<template>
    <t-alert
      :show="showAlert"
      variant="success"
    >
      Awesome!
    </t-alert>
</template>

And I didn't have to do anything like this to register the component "locally":

import {TAlert} from "@variantjs/vue";

export default {
  name: "MyComponent",
  components: {
    TAlert,
  },
}

However, if I try this now, I just get a bunch of vue errors in the console saying that vue cannot resolve the component (as per title). Am I missing something here? I'm happy to provide any extra info you might need.

For what it's worth, this is a laravel project, using laravel mix as a wrapper for webpack. I am able to register my own components globally just fine, with app.component().

I have also tried to just do app.use(variantJS) without the settings, in case my settings were not compatible with the new version, but even this fails.

Hi!

Just a quick issue because I see you committed the file yarn-error.log (while it should not be).

I will try to contribute to this project (other than opening issues about files...). May I ask if you accept PR for new features ? Thanks for your work.

Not an issue Question

Do we know when we can get both table and pagination working?

This is the only thing stopping us from using this awesome package in our new projects

PopperJS is showing the following warning, I think it is only shown on dev environments

Looks for ways to remove it since its safe to do it

computeStyles.js:116 Popper: Detected CSS transitions on at least one of the following CSS properties: "transform", "top", "right", "bottom", "left". 

 Disable the "computeStyles" modifier's `adaptive` option to allow for smooth transitions, or remove these properties from the CSS transition declaration on the popper element if only transitioning opacity or background-color for example. 

 We recommend using the popper element as a wrapper around an inner element that can have any CSS property transitioned for animations.

Can you provide the source-repo of currently demo at https://variantjs.netlify.app ?

Hello,

Thanks again for the work on this project.

I was wondering if anyone could help with what is probably quite a trivial issue.

Problem

When I use TRichSelect in a component like so:

<script setup lang="ts">
import { TCard, TRichSelect } from '@variantjs/vue'
...
const iconSelection = ref('AcademicCap')
const iconOptions = IconNames.map((a) => ({ text: a, value: a }))
</script>

<template>
  <t-card header="Inputs" class="mb-10">
    <div>
       ...
      <t-rich-select v-model="iconSelection" :options="iconOptions" :close-on-select="false" />
    </div>
  </t-card>
</template>

The component works but it seems to be missing its css styling? I've referred to the development folder but can't find any difference in set up that would cause this issue. Any ideas?

In case it's useful, I'll dump some stuff below... all packages are only latest versions.

Dependencies

  "dependencies": {
    "@heroicons/vue": "^1.0.5",
    "@popperjs/core": "^2.10.2",
    "@tailwindcss/forms": "^0.4",
    "@variantjs/vue": "^0.0.21",
    "axios": "^0.24",
    "body-scroll-lock": "^4.0.0-beta.0",
    "pinia": "^2.0.2",
    "swagger-client": "^3.16.0",
    "vue": "^3.2.9",
    "vue-router": "^4.0.11",
    "vue3-date-time-picker": "^2.4.4"
  },
  "devDependencies": {
    "@openapitools/openapi-generator-cli": "^2.4.1",
    "@rushstack/eslint-patch": "^1.1.0",
    "@types/body-scroll-lock": "^3.1.0",
    "@types/eslint": "^8",
    "@types/node": "^17",
    "@typescript-eslint/eslint-plugin": "^5",
    "@typescript-eslint/parser": "^5",
    "@vitejs/plugin-vue": "^2",
    "@vue/compiler-sfc": "^3.2.9",
    "@vue/eslint-config-typescript": "^10",
    "@nabla/vite-plugin-eslint": "^1.3.5",
    "autoprefixer": "^10.3.7",
    "eslint": "^8",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-vue": "^8",
    "postcss": "^8.3.11",
    "prettier": "^2.3.2",
    "tailwindcss": "^3",
    "typescript": "^4.4.2",
    "vite": "^2.5.2",
    "vue-tsc": "^0.30"
  }

main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from '@/router'
import './index.css'
import { variantJS } from '@variantjs/vue'
import { variantConfiguration } from './variantConfig'
import { createPinia } from 'pinia'

const app = createApp(App).use(createPinia()).use(router).use(variantJS, variantConfiguration)
app.mount('#app')

variant.config

import { VariantJSConfiguration } from '@variantjs/vue'

export type ColourName =
  | 'primary'
  | 'secondary'
  | 'warning'
  | 'danger'
  | 'info'
  | 'success'
  | 'gray'

type VariantFactory = { (arg: ColourName | null): string | { [key: string]: string } }

const makeCommonVariants = (variantFactory: VariantFactory) => {
  return {
    danger: {
      classes: variantFactory('danger'),
    },
    success: {
      classes: variantFactory('success'),
    },
    warning: {
      classes: variantFactory('warning'),
    },
    info: {
      classes: variantFactory('info'),
    },
  }
}

const makeButtonVariant: VariantFactory = (colour) => {
  return (
    `bg-${colour} hover:bg-${colour}-700 focus:border-${colour}-600 focus:ring-${colour}-600 active:bg-${colour}-400 ` +
    'text-white transition block px-4 py-2 duration-100 ease-in-out border border-transparent rounded ' +
    'shadow-sm focus:ring-2 focus:outline-none focus:ring-opacity-50 disabled:opacity-50 disabled:cursor-not-allowed'
  )
}

const makeCardVariant: VariantFactory = (colour) => {
  return {
    wrapper: `border border-${colour}-100 dark:border-${colour}-500 rounded shadow-sm dark:shadow-${colour}-700`,
    header: `p-3 border-b border-${colour}-100 dark:border-${colour}-500 rounded-t text-2xl`,
    footer: `p-3 border-t border-${colour}-100 dark:border-${colour}-500 rounded-b`,
  }
}

const makeInputVariant: VariantFactory = (colour) => {
  let out =
    'dark:shadow-inner dark:shadow-gray-700 dark:bg-gray-600 dark:hover:bg-gray-500 ' +
    'dark:border-gray-500 dark:placeholder-gray-400 block w-full px-3 py-2 ' +
    'placeholder-gray-400 transition duration-100 ease-in-out border border-gray-300 rounded ' +
    'shadow-sm focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed'
  if (colour !== null) {
    out += ` ring-${colour}-500 ring-2 ring-offset-3 focus:ring-${colour}-300 focus:border-${colour}-500`
  } else {
    out += ' focus:ring-2 focus:ring-secondary-500 focus:border-secondary-500'
  }
  return out
}

export const variantConfiguration: VariantJSConfiguration = {
  TButton: {
    classes: makeButtonVariant('secondary'),
    variants: makeCommonVariants(makeButtonVariant),
  },
  TCard: {
    classes: makeCardVariant('gray'),
    variants: makeCommonVariants(makeCardVariant),
  },
  TInput: {
    classes: makeInputVariant(null),
    variants: makeCommonVariants(makeInputVariant),
  },
}

@alfonsobries is there any chance to have a preview version of the library? 😊

Also, would it be possible to export useConfigurationWithClassesList so we can create custom components with the same configuration possibilities?

Thanks a lot in advance for your hard work! 😊

I am making a Nuxt.js plugin which will register VariantJS. @alfonsobries, have you came across the following issues while using TypeScript? Seems like variantJS variable mentioned in readme isn't exported for external use. I looked at the core lib but it doesn't appear to be available there either. Do we also need to explicitly add an entry to types in tsconfig.json to deal with the second error (shown below)?

PS. Big thumbs up for typed config! So much less error prone :)

I did the setup from the readme file but the buttons and all other components show with no styling. I added a modal and it also doesn't show as a modal. Any help would be appreciated.

I am trying to implement components based on your architecture and even after debugging I am not quite sure what exactly useConfiguration does. The configuration seems to merge the global configuration with the local props but what does attributes return? Based on https://github.com/variantjs/vue/blob/main/src/use/useConfiguration.ts#L19-L39 it also returns part of the props but I would have assume that it would really return the $attrs.

@alfonsobries it would be great if you could give me a quick explanation 😊

When a value is selected from an option, the event is not triggered. You need to use the search and then select a value to trigger the event.

If you have a input group

<t-input-group
  label="Email address"
  variant="important"
>
  <t-input
    v-model="email"
    v-focus
  />
</t-input-group>

and style config

TInputGroup: {
    fixedClasses: {
      wrapper: '',
      label: 'block text-sm text-gray-700',
      body: 'mt-1',
      feedback: ' text-sm text-sm mt-1',
      description: 'text-gray-400 text-sm',
    },
    classes: {
      wrapper: '',
      label: '',
      body: '',
      feedback: 'text-gray-400',
      description: 'text-gray-400',
    },
    variants: {
      important: {
        label: 'font-semibold',
      },
    },
  },

then the config option label from variants > important is overwriting the prop label and font-semibold instead of Email address is the label text.

As far as I can see the component needs the options itself to resolve the label. Is there any way to set the label in another way?

Hi,

Is it possible to focus on the Rich Select input after the modal where this input is in is opened?

Thanks for this awesome project!

not abandoning the project I promise 😂 but need a rest

😘

When I try to use the RichSelect component I get the following errors:

Did you stumble across this issue before? Will anyway try to debug what's going on...

It would be great to have a disabled prop on the TRichSelect component. Though, after debugging I am not yet sure if it's even already supposed to work.

Hello,
I followed the README file and this is my setup:

export const theme = {
    TButton: {
        // The fixed classes will never change and will be merged with the `classes` value or the active variant
        fixedClasses: 'focus:outline-none focus:shadow-outline inline-flex items-center transition ease-in-out duration-150',
        // Classes used when any variant is active
        classes: 'text-white bg-blue-600 hover:bg-blue-500 focus:border-blue-700 active:bg-blue-700 text-sm font-medium border border-transparent px-3 py-2 rounded-md',
        variants: {
            // A red variant of the button (applied when `<t-button variant="error" />`)
            error: 'text-white bg-red-600 hover:bg-red-500 focus:border-red-700 active:bg-red-700 text-sm font-medium border border-transparent px-3 py-2 rounded-md',
            // A green variant of the button (applied when `<t-button variant="success" />`)
            success: 'text-white bg-green-600 hover:bg-green-500 focus:border-green-700 active:bg-green-700 text-sm font-medium border border-transparent px-3 py-2 rounded-md',
            // ...unlimited variants
        }
        // ...More settings
    },
};

when I try to use the button

<TButton
         variant="error"
         class="shadow-lg px-6 py-3 text-xl border-b-4 border-green-200 rounded-xl inline"
          href="#pricing">
  
</TButton>

this error shows

Uncaught (in promise) DOMException: Failed to execute 'setAttribute' on 'Element': '0' is not a valid attribute name.

note: it works when I delete variant="error", and I use Vite for bundling

And also, I can not thank you enough for this great library.

Hi,
TDialog doesn't seem to be available. TDialog.vue is in the components folder but isn't exported in index.ts. Is it already available? The README says it is ready to be tested.
Thanks

While checking the output of the compilation I noticed that variantjs exports all components and not only those which are really used. Not super important but just something I noticed 😊

Is it possible to use a custom element to trigger the dropdown?
I've tried multiple things, but it seems the top element is still using
Instead of a button, I want to use an icon. Or have customisation like the below image found in the old docs

Using that code snippet. This is how it currently shows up.

I followed the documentation and tried to use it on a fresh Laravel Jetstream Inertia project but getting this error below

WARNING in ./node_modules/@variantjs/vue/dist/index.es.js 1:442-449
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

all I did was import { variantJS } from '@variantjs/vue';

Any help would be appreciated!

I'm currently using t-rich-select with fetch-options to search people in my database. I also use the dropdownButton (which btw doesn't have the props like dropdownDown used to) slot to show a quick add modal. Once the modal is closed and the new person saved to database, I'd like to show it as selected. I also need to be able to set a default value when the page loads.
I've looked in the source, created a ref and tried to call the selectOption method but I can seem to get it to work.
How should I proceed ?
Thanks

Hi there,

Thanks for your great work! We're definitively looking at sponsoring you soon :)
I have this conf for my vue3 / inertia app :

import { createApp, h } from "vue";
import { createInertiaApp, Link, Head } from "@inertiajs/inertia-vue3";
import { InertiaProgress } from "@inertiajs/progress";

import { ZiggyVue } from "ziggy";
import { Ziggy } from "./ziggy";

import { variantJS, VariantJSConfiguration } from '@variantjs/vue'

InertiaProgress.init();

createInertiaApp({
    resolve: async (name) => {
        return (await import(`./Pages/${name}`)).default;
    },
    setup({ el, App, props, plugin }) {
        const configuration = {
            TInput: {
                variants: {
                    error: 'border-red-300 bg-red-50 placeholder-red-200 text-red-900'
                }
            },
        }

        createApp({ render: () => h(App, props) })
            .use(variantJS, configuration)
            .use(plugin)
            .use(ZiggyVue, Ziggy)
            .component("Link", Link)
            .component("Head", Head)
            .mixin({ methods: { route } })
            .mount(el);
    },
});

Then I use

            <TInput v-model="form.name" :variant="$page.props.errors.name ? 'error' : ''"/>

The variant isn't applied and I have this error:

Uncaught (in promise) DOMException: Failed to execute 'setAttribute' on 'Element': '0' is not a valid attribute name.
    at patchAttr (http://localhost:8080/js/app.js:26423:16)
    at patchProp (http://localhost:8080/js/app.js:26629:9)
    at patchProps (http://localhost:8080/js/app.js:23145:21)
    at patchElement (http://localhost:8080/js/app.js:23056:17)
    at processElement (http://localhost:8080/js/app.js:22904:13)
    at patch (http://localhost:8080/js/app.js:22821:21)
    at ReactiveEffect.componentUpdateFn [as fn] (http://localhost:8080/js/app.js:23433:17)
    at ReactiveEffect.run (http://localhost:8080/js/app.js:17176:25)
    at updateComponent (http://localhost:8080/js/app.js:23294:26)
    at processComponent (http://localhost:8080/js/app.js:23227:13)

Here are the props passed to the TInput:

What am i doing wrong?

Thanks alot for your help and awesome work!

Tailwind forms plug in says: Note that for text inputs, you must add the type="text" attribute for these styles to take effect.

As this library relies on that plugin, the user has to know to set type="text" on all default t-input components to have the correct theming. Which will probably catch people out like it just did to me. This issue seems to affect the development (i.e. example) repo as well.

Is it worth setting this as a default attribute to ensure consistent theming? As currently you will not be aware of this fact unless you read the forms plugin documentation.

P.S. this library is super cool, keep it up!

First of, thank you for keeping up this amazing library! 📦

I have a question / issue that i would like to ask you whats the best approach to achieve this
Im using the T-Rich-Select component, and i can style mostly anything inside it , but there is one piece i cannot get my head around it. Here is a picture of what im trying to achieve :

Or even like TailwindUI

So basicly if you have a component group with T-Rich-Select Above and/or another field bellow, you are not able to set for example : "border-b-none" to the dropdown trigger, you can do this via variants, but sometimes you wanna keep the variant and over-ride just this little bit.

Possible solutions :

• A way to override or inject little settings from outside of the component.
• Create defaultVariantBellow & defaultVariantAbove and have everything included in the default variant and override only the border-bottom ( example ) ( but this would mean duplicate the variants for 3 times: Above, Bellow, Default )
• Provide a proper way to slot the dropdown trigger so we can have more control over it.
• A sintax to override per component level ( via props for example ) only certain parts of the configuration

Once again thanks!