TRichSelect missing styling

invokermain commented 2 years ago

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),
  },
}

invokermain commented 2 years ago

ah I have just realised this is because tailwind isn't noticing the classes being used for styling the rich select during its static analysis, and therefore the select has no styling applied to it.

hackel commented 2 years ago

I got around this by adding './node_modules/@variantjs/**/*.ts', to the content array in my tailwind.config.js file. I don't like this, since it's going to include everything, but it's not that big at least.

variantjs / vue