Merge branch 'dev-bagus' of https://gitea.callysta-engineering.com/APKT/eis into dev-eko-vm
This commit is contained in:
Eko Haryadi
commit
c85a59fd79
177
package-lock.json
generated
177
package-lock.json
generated
@ -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",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.1.1.tgz",
|
||||
"integrity": "sha512-I5lerX+RWxLM+zw35gwwQIoLvtkOm0ecuQUlEjNey+Ga6TnR66WKLBnSHre59onugxhpDLT2nofRYzxf+izDFQ==",
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.1.2.tgz",
|
||||
"integrity": "sha512-DATZJs8iejkIUqXZe6ruDAnjFo78BKnIIgqQZrc7CmEFqfLEN/TPD91n4hRfo6hpRB6xC00bwKxv7vdjFNEmOg==",
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/tannerlinsley"
|
||||
}
|
||||
},
|
||||
"node_modules/@tanstack/vue-virtual": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/vue-virtual/-/vue-virtual-3.1.1.tgz",
|
||||
"integrity": "sha512-62am497kFAOEdOlK7ECEqKiZPxgaPk5BbK4ah+PhTrvz1yNRCHbUbYGe8JwV1DIoY9k1MNXGBLUW5hAa5tvnzQ==",
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/vue-virtual/-/vue-virtual-3.1.2.tgz",
|
||||
"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",
|
||||
|
||||
@ -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",
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -4,16 +4,8 @@ interface DataItem {
|
||||
name: any
|
||||
}
|
||||
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import {
|
||||
Combobox,
|
||||
ComboboxInput,
|
||||
ComboboxButton,
|
||||
ComboboxOptions,
|
||||
ComboboxOption,
|
||||
TransitionRoot
|
||||
} from '@headlessui/vue'
|
||||
import { CheckIcon, ChevronUpDownIcon } from '@heroicons/vue/20/solid'
|
||||
import { ref, computed } from 'vue'
|
||||
import { RichSelect } from '@flavorly/vanilla-components'
|
||||
|
||||
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])
|
||||
|
||||
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)
|
||||
const selected = ref(data.value[0].id)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Combobox
|
||||
@update:modelValue="(value) => emit('update:selected', value)"
|
||||
v-model="selected"
|
||||
v-slot="{ open }"
|
||||
>
|
||||
<div class="relative mt-1">
|
||||
<div
|
||||
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"
|
||||
>
|
||||
<ComboboxInput
|
||||
class="w-full border-none py-2 pl-3 pr-10 bg-gray-200 text-sm leading-5 text-gray-900 focus:ring-0"
|
||||
:placeholder="selected.name"
|
||||
: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">
|
||||
<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>
|
||||
<div class="w-full">
|
||||
<RichSelect
|
||||
v-model="selected"
|
||||
:options="data"
|
||||
:clearable="false"
|
||||
valueAttribute="id"
|
||||
textAttribute="name"
|
||||
@update:modelValue="
|
||||
(value: any) =>
|
||||
emit(
|
||||
'update:selected',
|
||||
data.find((item) => item.id === value)
|
||||
)
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
20
src/main.ts
20
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')
|
||||
app.mount('#app')
|
||||
|
||||
1
src/types/flavorly-vanilla-components.d.ts
vendored
Normal file
1
src/types/flavorly-vanilla-components.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
||||
declare module '@flavorly/vanilla-components'
|
||||
@ -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>
|
||||
|
||||
@ -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) => ({
|
||||
@ -120,4 +122,4 @@ export default {
|
||||
require('@headlessui/tailwindcss'),
|
||||
require('@headlessui/tailwindcss')({ prefix: 'ui' })
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@ -13,6 +13,7 @@
|
||||
],
|
||||
"compilerOptions": {
|
||||
"strict": true,
|
||||
"forceConsistentCasingInFileNames": true
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"typeRoots": ["./src/types", "./node_modules/@types"]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user