Merge branch 'dev-bagus' of https://gitea.callysta-engineering.com/APKT/eis into dev-eko-vm

package-lock.json

@@ -10,13 +10,16 @@
       "dependencies": {
         "@apollo/client": "^3.8.10",
         "@apollo/link-context": "^2.0.0-beta.3",
+        "@flavorly/vanilla-components": "^0.7.65",
         "@headlessui/tailwindcss": "^0.2.0",
-        "@headlessui/vue": "^1.7.16",
+        "@headlessui/vue": "^1.7.19",
         "@heroicons/vue": "^2.0.18",
         "@lottiefiles/lottie-player": "^2.0.2",
         "@phosphor-icons/vue": "^2.1.6",
+        "@popperjs/core": "^2.11.8",
         "@types/qs": "^6.9.9",
         "@types/uuid": "^9.0.2",
+        "@types/vue-select": "^3.16.8",
         "@vue/apollo-components": "^4.0.0",
         "@vue/apollo-composable": "^4.0.1",
         "@vue/apollo-option": "^4.0.0",
@@ -46,7 +49,7 @@
         "@rushstack/eslint-patch": "^1.5.1",
         "@tailwindcss/aspect-ratio": "^0.4.2",
         "@tailwindcss/container-queries": "^0.1.1",
-        "@tailwindcss/forms": "^0.5.6",
+        "@tailwindcss/forms": "^0.5.7",
         "@tailwindcss/typography": "^0.5.10",
         "@tsconfig/node18": "^2.0.1",
         "@types/file-saver": "^2.0.6",
@@ -1131,6 +1134,27 @@
       "resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.63.tgz",
       "integrity": "sha512-fAtCfv4jJg+ExtXhvCkCqUKZ+4ok/JQk01qDKhL5BDDoS3AxKXhV5/MAVUZyQnSEd2GT92fkgZl0pz0Q0AzcIQ=="
     },
+    "node_modules/@flavorly/vanilla-components": {
+      "version": "0.7.65",
+      "resolved": "https://registry.npmjs.org/@flavorly/vanilla-components/-/vanilla-components-0.7.65.tgz",
+      "integrity": "sha512-qgXio7iR83WoR+PD6htb+7PReG9AJ8yAngmtjAyKYeMJKo7Dvxm4Wgi6NrwskqtyuS45MQvrfEr4+uAJLjwPbA==",
+      "dependencies": {
+        "@headlessui/vue": "^1.7.4",
+        "@popperjs/core": "^2.11.6"
+      },
+      "engines": {
+        "node": ">=16"
+      },
+      "optionalDependencies": {
+        "v-calendar": "^3.0.3"
+      },
+      "peerDependencies": {
+        "@headlessui/vue": "^1.7.0",
+        "@popperjs/core": "^2.11.6",
+        "v-calendar": "^3.0.3",
+        "vue": "^3.2.45"
+      }
+    },
     "node_modules/@graphql-typed-document-node/core": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/@graphql-typed-document-node/core/-/core-3.2.0.tgz",
@@ -1466,6 +1490,21 @@
         "url": "https://opencollective.com/unts"
       }
     },
+    "node_modules/@pkgr/utils/node_modules/tslib": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
+      "dev": true
+    },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@rushstack/eslint-patch": {
       "version": "1.7.2",
       "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.7.2.tgz",
@@ -1575,20 +1614,20 @@
       }
     },
     "node_modules/@tanstack/virtual-core": {
-      "version": "3.1.1",
+      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.1.2.tgz",
-      "integrity": "sha512-I5lerX+RWxLM+zw35gwwQIoLvtkOm0ecuQUlEjNey+Ga6TnR66WKLBnSHre59onugxhpDLT2nofRYzxf+izDFQ==",
+      "integrity": "sha512-DATZJs8iejkIUqXZe6ruDAnjFo78BKnIIgqQZrc7CmEFqfLEN/TPD91n4hRfo6hpRB6xC00bwKxv7vdjFNEmOg==",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/tannerlinsley"
       }
     },
     "node_modules/@tanstack/vue-virtual": {
-      "version": "3.1.1",
+      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/@tanstack/vue-virtual/-/vue-virtual-3.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/@tanstack/vue-virtual/-/vue-virtual-3.1.2.tgz",
-      "integrity": "sha512-62am497kFAOEdOlK7ECEqKiZPxgaPk5BbK4ah+PhTrvz1yNRCHbUbYGe8JwV1DIoY9k1MNXGBLUW5hAa5tvnzQ==",
+      "integrity": "sha512-RmUnhsFtRw9p4Ti/+rG2Hr3y4yFhs8Xdsn7x9tkPoKINbVya/5RSCoNUCCAg2iXNjOI5a55iBNzNV0SVwxMwKA==",
       "dependencies": {
-        "@tanstack/virtual-core": "3.1.1"
+        "@tanstack/virtual-core": "3.1.2"
       },
       "funding": {
         "type": "github",
@@ -1651,6 +1690,12 @@
       "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
       "dev": true
     },
+    "node_modules/@types/lodash": {
+      "version": "4.14.202",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.202.tgz",
+      "integrity": "sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ==",
+      "optional": true
+    },
     "node_modules/@types/node": {
       "version": "18.19.17",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.17.tgz",
@@ -1676,6 +1721,12 @@
       "integrity": "sha512-c4YAvMedbPZ5tEyxzQdMoOhhJ4RD3rngZIdwC2/qDN3d7JpEhB6fiBRKVY1lg5B7Wk+uPBjn5f39j1/2MY1oOw==",
       "optional": true
     },
+    "node_modules/@types/resize-observer-browser": {
+      "version": "0.1.11",
+      "resolved": "https://registry.npmjs.org/@types/resize-observer-browser/-/resize-observer-browser-0.1.11.tgz",
+      "integrity": "sha512-cNw5iH8JkMkb3QkCoe7DaZiawbDQEUX8t7iuQaRTyLOyQCR2h+ibBD4GJt7p5yhUHrlOeL7ZtbxNHeipqNsBzQ==",
+      "optional": true
+    },
     "node_modules/@types/semver": {
       "version": "7.5.7",
       "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.7.tgz",
@@ -1698,6 +1749,52 @@
       "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.8.tgz",
       "integrity": "sha512-jg+97EGIcY9AGHJJRaaPVgetKDsrTgbRjQ5Msgjh/DQKEFl0DtyRr/VCOyD1T2R1MNeWPK/u7JoGhlDZnKBAfA=="
     },
+    "node_modules/@types/vue-select": {
+      "version": "3.16.8",
+      "resolved": "https://registry.npmjs.org/@types/vue-select/-/vue-select-3.16.8.tgz",
+      "integrity": "sha512-ZBovlBrWf/wnPqCmMw24ryIC7ghQLfIBmkl1qssqBGONdx7yOmi/GLwtPxll/6UwXWGNWMeokleOgVAZPis+Ag==",
+      "dependencies": {
+        "vue": "^2.0.0"
+      }
+    },
+    "node_modules/@types/vue-select/node_modules/@vue/compiler-sfc": {
+      "version": "2.7.16",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.16.tgz",
+      "integrity": "sha512-KWhJ9k5nXuNtygPU7+t1rX6baZeqOYLEforUPjgNDBnLicfHCoi48H87Q8XyLZOrNNsmhuwKqtpDQWjEFe6Ekg==",
+      "dependencies": {
+        "@babel/parser": "^7.23.5",
+        "postcss": "^8.4.14",
+        "source-map": "^0.6.1"
+      },
+      "optionalDependencies": {
+        "prettier": "^1.18.2 || ^2.0.0"
+      }
+    },
+    "node_modules/@types/vue-select/node_modules/prettier": {
+      "version": "2.8.8",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
+      "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
+      "optional": true,
+      "bin": {
+        "prettier": "bin-prettier.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
+    "node_modules/@types/vue-select/node_modules/vue": {
+      "version": "2.7.16",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-2.7.16.tgz",
+      "integrity": "sha512-4gCtFXaAA3zYZdTp5s4Hl2sozuySsgz4jy1EnpBHNfpMa9dK1ZCG7viqBPCwXtmgc8nHqUsAu3G4gtmXkkY3Sw==",
+      "deprecated": "Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details.",
+      "dependencies": {
+        "@vue/compiler-sfc": "2.7.16",
+        "csstype": "^3.1.0"
+      }
+    },
     "node_modules/@types/web-bluetooth": {
       "version": "0.0.20",
       "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
@@ -3699,6 +3796,31 @@
         "node": ">=14"
       }
     },
+    "node_modules/date-fns": {
+      "version": "2.30.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
+      "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+      "optional": true,
+      "dependencies": {
+        "@babel/runtime": "^7.21.0"
+      },
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
+    "node_modules/date-fns-tz": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-2.0.0.tgz",
+      "integrity": "sha512-OAtcLdB9vxSXTWHdT8b398ARImVwQMyjfYGkKD2zaGpHseG2UPHbHjXELReErZFxWdSLph3c2zOaaTyHfOhERQ==",
+      "optional": true,
+      "peerDependencies": {
+        "date-fns": ">=2.0.0"
+      }
+    },
     "node_modules/dayjs": {
       "version": "1.11.10",
       "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
@@ -6443,7 +6565,7 @@
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/lodash.castarray": {
       "version": "4.4.0",
@@ -8374,6 +8496,14 @@
         "node": ">=8"
       }
     },
+    "node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
@@ -9363,6 +9493,24 @@
         "uuid": "dist/bin/uuid"
       }
     },
+    "node_modules/v-calendar": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/v-calendar/-/v-calendar-3.1.2.tgz",
+      "integrity": "sha512-QDWrnp4PWCpzUblctgo4T558PrHgHzDtQnTeUNzKxfNf29FkCeFpwGd9bKjAqktaa2aJLcyRl45T5ln1ku34kg==",
+      "optional": true,
+      "dependencies": {
+        "@types/lodash": "^4.14.165",
+        "@types/resize-observer-browser": "^0.1.7",
+        "date-fns": "^2.16.1",
+        "date-fns-tz": "^2.0.0",
+        "lodash": "^4.17.20",
+        "vue-screen-utils": "^1.0.0-beta.13"
+      },
+      "peerDependencies": {
+        "@popperjs/core": "^2.0.0",
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/validate-npm-package-license": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
@@ -9632,6 +9780,15 @@
         "vue": "^3.2.0"
       }
     },
+    "node_modules/vue-screen-utils": {
+      "version": "1.0.0-beta.13",
+      "resolved": "https://registry.npmjs.org/vue-screen-utils/-/vue-screen-utils-1.0.0-beta.13.tgz",
+      "integrity": "sha512-EJ/8TANKhFj+LefDuOvZykwMr3rrLFPLNb++lNBqPOpVigT2ActRg6icH9RFQVm4nHwlHIHSGm5OY/Clar9yIg==",
+      "optional": true,
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/vue-tailwind-datepicker": {
       "version": "1.6.5",
       "resolved": "https://registry.npmjs.org/vue-tailwind-datepicker/-/vue-tailwind-datepicker-1.6.5.tgz",

package.json

@@ -17,13 +17,16 @@
   "dependencies": {
     "@apollo/client": "^3.8.10",
     "@apollo/link-context": "^2.0.0-beta.3",
+    "@flavorly/vanilla-components": "^0.7.65",
     "@headlessui/tailwindcss": "^0.2.0",
-    "@headlessui/vue": "^1.7.16",
+    "@headlessui/vue": "^1.7.19",
     "@heroicons/vue": "^2.0.18",
     "@lottiefiles/lottie-player": "^2.0.2",
     "@phosphor-icons/vue": "^2.1.6",
+    "@popperjs/core": "^2.11.8",
     "@types/qs": "^6.9.9",
     "@types/uuid": "^9.0.2",
+    "@types/vue-select": "^3.16.8",
     "@vue/apollo-components": "^4.0.0",
     "@vue/apollo-composable": "^4.0.1",
     "@vue/apollo-option": "^4.0.0",
@@ -53,7 +56,7 @@
     "@rushstack/eslint-patch": "^1.5.1",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/container-queries": "^0.1.1",
-    "@tailwindcss/forms": "^0.5.6",
+    "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.10",
     "@tsconfig/node18": "^2.0.1",
     "@types/file-saver": "^2.0.6",

src/components/Select.vue

@@ -4,16 +4,8 @@ interface DataItem {
   name: any
 }
 
-import { ref, computed, watch } from 'vue'
+import { ref, computed } from 'vue'
-import {
+import { RichSelect } from '@flavorly/vanilla-components'
-  Combobox,
-  ComboboxInput,
-  ComboboxButton,
-  ComboboxOptions,
-  ComboboxOption,
-  TransitionRoot
-} from '@headlessui/vue'
-import { CheckIcon, ChevronUpDownIcon } from '@heroicons/vue/20/solid'
 
 const props = defineProps({
   placeholder: {
@@ -32,106 +24,24 @@ const props = defineProps({
 const emit = defineEmits(['update:selected'])
 
 const data = computed(() => [{ id: 0, name: props.placeholder }, ...props.data])
-
+const selected = ref(data.value[0].id)
-computed(() => {
-  if (props.selected.id === 0) {
-    selected.value = { id: 0, name: props.placeholder }
-  }
-})
-
-watch(
-  () => props.selected,
-  (value) => {
-    if (value.id === 0) {
-      selected.value = { id: 0, name: props.placeholder }
-    }
-  }
-)
-
-let selected = ref<DataItem>(data.value[0])
-let query = ref('')
-let filteredData = computed(() =>
-  query.value === ''
-    ? data.value
-    : data.value.filter((item: DataItem) =>
-        item.name
-          .toLowerCase()
-          .replace(/\s+/g, '')
-          .includes(query.value.toLowerCase().replace(/\s+/g, ''))
-      )
-)
-
-const show = ref(false)
 </script>
 
 <template>
-  <Combobox
+  <div class="w-full">
-    @update:modelValue="(value) => emit('update:selected', value)"
+    <RichSelect
-    v-model="selected"
+      v-model="selected"
-    v-slot="{ open }"
+      :options="data"
-  >
+      :clearable="false"
-    <div class="relative mt-1">
+      valueAttribute="id"
-      <div
+      textAttribute="name"
-        class="relative w-full cursor-default overflow-hidden rounded-lg bg-gray-200 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 sm:text-sm"
+      @update:modelValue="
-      >
+        (value: any) =>
-        <ComboboxInput
+          emit(
-          class="w-full border-none py-2 pl-3 pr-10 bg-gray-200 text-sm leading-5 text-gray-900 focus:ring-0"
+            'update:selected',
-          :placeholder="selected.name"
+            data.find((item) => item.id === value)
-          :displayValue="(item: any) => (show || open ? '' : item.name)"
+          )
-          @change="query = $event.target.value"
+      "
-        />
+    />
-        <ComboboxButton class="absolute inset-y-0 right-0 flex items-center pr-2">
+  </div>
-          <ChevronUpDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
-        </ComboboxButton>
-      </div>
-      <TransitionRoot
-        leave="transition ease-in duration-100"
-        leaveFrom="opacity-100"
-        leaveTo="opacity-0"
-        @after-leave="query = ''"
-      >
-        <ComboboxOptions
-          static
-          class="absolute mt-1 z-10 max-h-60 w-full overflow-auto rounded-md bg-gray-200 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
-        >
-          <div
-            v-if="filteredData.length === 0 && query !== ''"
-            class="relative cursor-default select-none py-2 px-4 text-gray-700"
-          >
-            Nothing found.
-          </div>
-
-          <ComboboxOption
-            v-for="item in filteredData"
-            as="template"
-            :key="item.id"
-            :value="item"
-            v-slot="{ selected, active }"
-          >
-            <li
-              class="relative cursor-default select-none py-2 pl-10 pr-4"
-              :class="{
-                'bg-teal-600 text-white': active,
-                'text-gray-900': !active
-              }"
-            >
-              <span
-                class="block truncate"
-                :class="{ 'font-medium': selected, 'font-normal': !selected }"
-              >
-                {{ item.name }}
-              </span>
-              <span
-                v-if="selected"
-                class="absolute inset-y-0 left-0 flex items-center pl-3"
-                :class="{ 'text-white': active, 'text-teal-600': !active }"
-              >
-                <CheckIcon class="h-5 w-5" aria-hidden="true" />
-              </span>
-            </li>
-          </ComboboxOption>
-        </ComboboxOptions>
-      </TransitionRoot>
-    </div>
-  </Combobox>
 </template>

src/main.ts

@@ -7,14 +7,30 @@ import router from './router'
 import { createApp, provide, h } from 'vue'
 import { DefaultApolloClient } from '@vue/apollo-composable'
 import { apolloClient } from './utils/graphql'
+import { VanillaComponents, defineConfiguration } from '@flavorly/vanilla-components'
 
 const app = createApp({
   setup() {
     provide(DefaultApolloClient, apolloClient())
   },
-  render: () => h(App),
+  render: () => h(App)
 })
 
+app.use(
+  VanillaComponents,
+  defineConfiguration({
+    RichSelect: {
+      classes: {
+        trigger:
+          'bg-gray-200 border-none focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 relative flex items-center justify-between w-full focus:z-10 cursor-pointer text-sm transition duration-100 ease-in-out disabled:opacity-50 disabled:cursor-not-allowed px-4 py-3',
+        searchInput:
+          'inline-block focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 w-full  text-sm px-4 py-2.5 text-gray-700 placeholder-gray-500/60 border-0 rounded-lg bg-gray-200',
+        selectedHighlightedOption: 'font-semibold bg-teal-600 focus:outline-none text-white'
+      }
+    }
+  })
+)
+
 app.use(createPinia())
 app.use(router)
 app.mount('#app')

src/types/flavorly-vanilla-components.d.ts

@@ -0,0 +1 @@
+declare module '@flavorly/vanilla-components'

src/views/TestView.vue

@@ -1 +1,33 @@
-<template></template>
+<script setup lang="ts">
+import { RichSelect } from '@flavorly/vanilla-components'
+import { ref } from 'vue'
+const value = ref('Option 1')
+
+const options = [
+  { value: 'Option 1', text: 'One Option' },
+  { value: 'Option 2', text: 'Two Options' },
+  { value: [{ anotherObject: true, nested: 'deep' }], text: 'Complex Object' },
+  {
+    value: 'seprator',
+    text: 'A sperator can be usefull',
+    children: [
+      { value: 'Option 4', text: '4th Option' },
+      { value: 'Option 5', text: '5th Option' }
+    ]
+  }
+]
+</script>
+
+<template>
+  <div class="container bg-red-300 m-auto p-5">
+    <div class="w-full">
+      <RichSelect
+        v-model="value"
+        name="test"
+        :options="options"
+        :clearable="true"
+        placeholder="Please select an option"
+      />
+    </div>
+  </div>
+</template>

tailwind.config.js

@@ -1,13 +1,15 @@
 /** @type {import('tailwindcss').Config} */
-const svgToDataUri = require('mini-svg-data-uri')
 const colors = require('tailwindcss/colors')
 export default {
   content: [
     './index.html',
     './src/**/*.{vue,js,ts,jsx,tsx}',
     './src/**/**/*.{vue,js,ts,jsx,tsx}',
-    './node_modules/vue-tailwind-datepicker/**/*.js'
+    './node_modules/vue-tailwind-datepicker/**/*.js',
+    './node_modules/@flavorly/vanilla-components/dist/presets/tailwind/all.json'
   ],
+  mode: 'jit',
+  darkMode: 'class',
   theme: {
     extend: {
       backgroundImage: (theme) => ({

tsconfig.json

@@ -13,6 +13,7 @@
   ],
   "compilerOptions": {
     "strict": true,
-    "forceConsistentCasingInFileNames": true
+    "forceConsistentCasingInFileNames": true,
+    "typeRoots": ["./src/types", "./node_modules/@types"]
   }
 }