variantjs / core

VariantJS common functions and utilities

VariantJS Core

core's Issues

Props Presets

From my point of view, some components have more configuration states than just variant. According to #8 multiple variants makes it too difficult to maintenance the classesList which I total agree.

Maybe a solution could be presets for each prop. I try to explain the idea based on this configuration example, and I created a small repository to demonstrate it as a working demo. Here is the link: https://github.com/christianwiedemann/variantjs-samples

Example:

export const theme: VariantJSConfiguration = {
  'TButton': {
    preset: {
      size: {
        large: 'p-20',
        default: 'p-10'
      },
      color: {
        primary: 'bg-blue-500',
        secondary: 'bg-yellow-500'
      },
    },
    variants: {
      outline: {
        preset: {
          color: {
            primary: 'border-blue-500',
            secondary: 'border-yellow-500'
          },
        },
        classes: {
          default: 'border border-solid'
        }
      }
    },
    fixedClasses: {
      default: 'btn'
    },
  }
}

What do you think?

Yarn or npm?

While working on a PR I noticed that you used npm and yarn since both lock files are present. Which is your current preference?

Monorepository

Not sure if you already thought about it but I think it would help to create a mono repository to keep the overview (at least for the core, react and vue repositories). What do you think?

active?

Is this still actively being worked on?

Merge classes and classList

As far as I can see the passed classes are not merged into classList:

What is the expected behaviour? Should the passed classes override the classes in classList or should they be merged (my preference)?

Pass multiple variants to component

What do you think about passing multiple variants to a component? They could be separated by spaces (just like CSS classes) and then you could combine them as necessary, e.g. for a button: "icon sm", "primary lg" etc.

The ttag needs a `classes` setting like t-input

See discussion here #3