defuj/apkt-eis
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: change select component

Browse Source
This commit is contained in:
kur0nek-o 2024-02-23 10:41:54 +07:00
parent 7464cb6d1c
commit d7917fd499
9 changed files with 2713 additions and 278 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

202
package-lock.json generated
View File

@ -10,13 +10,16 @@
"dependencies": { "dependencies": {
"@apollo/client": "^3.8.10", "@apollo/client": "^3.8.10",
"@apollo/link-context": "^2.0.0-beta.3", "@apollo/link-context": "^2.0.0-beta.3",
"@flavorly/vanilla-components": "^0.7.65",
"@headlessui/tailwindcss": "^0.2.0", "@headlessui/tailwindcss": "^0.2.0",
"@headlessui/vue": "^1.7.16", "@headlessui/vue": "^1.7.19",
"@heroicons/vue": "^2.0.18", "@heroicons/vue": "^2.0.18",
"@lottiefiles/lottie-player": "^2.0.2", "@lottiefiles/lottie-player": "^2.0.2",
"@phosphor-icons/vue": "^2.1.6", "@phosphor-icons/vue": "^2.1.6",
"@popperjs/core": "^2.11.8",
"@types/qs": "^6.9.9", "@types/qs": "^6.9.9",
"@types/uuid": "^9.0.2", "@types/uuid": "^9.0.2",
"@types/vue-select": "^3.16.8",
"@vue/apollo-components": "^4.0.0", "@vue/apollo-components": "^4.0.0",
"@vue/apollo-composable": "^4.0.1", "@vue/apollo-composable": "^4.0.1",
"@vue/apollo-option": "^4.0.0", "@vue/apollo-option": "^4.0.0",
@ -43,7 +46,7 @@
"@rushstack/eslint-patch": "^1.5.1", "@rushstack/eslint-patch": "^1.5.1",
"@tailwindcss/aspect-ratio": "^0.4.2", "@tailwindcss/aspect-ratio": "^0.4.2",
"@tailwindcss/container-queries": "^0.1.1", "@tailwindcss/container-queries": "^0.1.1",
"@tailwindcss/forms": "^0.5.6", "@tailwindcss/forms": "^0.5.7",
"@tailwindcss/typography": "^0.5.10", "@tailwindcss/typography": "^0.5.10",
"@tsconfig/node18": "^2.0.1", "@tsconfig/node18": "^2.0.1",
"@types/file-saver": "^2.0.6", "@types/file-saver": "^2.0.6",
@ -494,9 +497,9 @@
} }
}, },
"node_modules/@babel/parser": { "node_modules/@babel/parser": {
"version": "7.23.0", "version": "7.23.9",
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.0.tgz", "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.9.tgz",
"integrity": "sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==", "integrity": "sha512-9tcKgqKbs3xGJ+NtKF2ndOBBLVwPjl1SHxPQkd36r3Dlirw3xWUeGaTbqr7uGZcTaxkVNwc+03SVP7aCdWrTlA==",
"bin": { "bin": {
"parser": "bin/babel-parser.js" "parser": "bin/babel-parser.js"
}, },
@ -1104,6 +1107,27 @@
"resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.63.tgz", "resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.63.tgz",
"integrity": "sha512-fAtCfv4jJg+ExtXhvCkCqUKZ+4ok/JQk01qDKhL5BDDoS3AxKXhV5/MAVUZyQnSEd2GT92fkgZl0pz0Q0AzcIQ==" "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": { "node_modules/@graphql-typed-document-node/core": {
"version": "3.2.0", "version": "3.2.0",
"resolved": "https://registry.npmjs.org/@graphql-typed-document-node/core/-/core-3.2.0.tgz", "resolved": "https://registry.npmjs.org/@graphql-typed-document-node/core/-/core-3.2.0.tgz",
@ -1124,9 +1148,12 @@
} }
}, },
"node_modules/@headlessui/vue": { "node_modules/@headlessui/vue": {
"version": "1.7.16", "version": "1.7.19",
"resolved": "https://registry.npmjs.org/@headlessui/vue/-/vue-1.7.16.tgz", "resolved": "https://registry.npmjs.org/@headlessui/vue/-/vue-1.7.19.tgz",
"integrity": "sha512-nKT+nf/q6x198SsyK54mSszaQl/z+QxtASmgMEJtpxSX2Q0OPJX0upS/9daDyiECpeAsvjkoOrm2O/6PyBQ+Qg==", "integrity": "sha512-VFjKPybogux/5/QYGSq4zgG/x3RcxId15W8uguAJAjPBxelI23dwjOjTx/mIiMkM/Hd3rzFxcf2aIp56eEWRcA==",
"dependencies": {
"@tanstack/vue-virtual": "^3.0.0-beta.60"
},
"engines": { "engines": {
"node": ">=10" "node": ">=10"
}, },
@ -1330,6 +1357,15 @@
"integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==", "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
"dev": true "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": { "node_modules/@rushstack/eslint-patch": {
"version": "1.5.1", "version": "1.5.1",
"resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.5.1.tgz", "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.5.1.tgz",
@ -1412,9 +1448,9 @@
} }
}, },
"node_modules/@tailwindcss/forms": { "node_modules/@tailwindcss/forms": {
"version": "0.5.6", "version": "0.5.7",
"resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.6.tgz", "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.7.tgz",
"integrity": "sha512-Fw+2BJ0tmAwK/w01tEFL5TiaJBX1NLT1/YbWgvm7ws3Qcn11kiXxzNTEQDMs5V3mQemhB56l3u0i9dwdzSQldA==", "integrity": "sha512-QE7X69iQI+ZXwldE+rzasvbJiyV/ju1FGHH0Qn2W3FKbuYtqp8LKcy6iSw79fVUT5/Vvf+0XgLCeYVG+UV6hOw==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"mini-svg-data-uri": "^1.2.3" "mini-svg-data-uri": "^1.2.3"
@ -1438,6 +1474,30 @@
"tailwindcss": ">=3.0.0 || insiders" "tailwindcss": ">=3.0.0 || insiders"
} }
}, },
"node_modules/@tanstack/virtual-core": {
"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.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.2"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/tannerlinsley"
},
"peerDependencies": {
"vue": "^2.7.0 || ^3.0.0"
}
},
"node_modules/@tootallnate/once": { "node_modules/@tootallnate/once": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz", "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
@ -1491,6 +1551,12 @@
"integrity": "sha512-RbSSoHliUbnXj3ny0CNFOoxrIDV6SUGyStHsvDqosw6CkdPV8TtWGlfecuK4ToyMEAql6pzNxgCFKanovUzlgQ==", "integrity": "sha512-RbSSoHliUbnXj3ny0CNFOoxrIDV6SUGyStHsvDqosw6CkdPV8TtWGlfecuK4ToyMEAql6pzNxgCFKanovUzlgQ==",
"dev": true "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": { "node_modules/@types/node": {
"version": "18.18.4", "version": "18.18.4",
"resolved": "https://registry.npmjs.org/@types/node/-/node-18.18.4.tgz", "resolved": "https://registry.npmjs.org/@types/node/-/node-18.18.4.tgz",
@ -1513,6 +1579,12 @@
"integrity": "sha512-sM4HyDVlDFl4goOXPF+g9nNHJFZQGot+HgySjM4cRjqXzjdatcEvYrtG4Ia8XumR9T6k8G2tW9B7hnUj51Uf0A==", "integrity": "sha512-sM4HyDVlDFl4goOXPF+g9nNHJFZQGot+HgySjM4cRjqXzjdatcEvYrtG4Ia8XumR9T6k8G2tW9B7hnUj51Uf0A==",
"optional": true "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": { "node_modules/@types/semver": {
"version": "7.5.3", "version": "7.5.3",
"resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.3.tgz", "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.3.tgz",
@ -1535,6 +1607,52 @@
"resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.5.tgz", "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.5.tgz",
"integrity": "sha512-xfHdwa1FMJ082prjSJpoEI57GZITiQz10r3vEJCHa2khEFQjKy91aWKz6+zybzssCvXUwE1LQWgWVwZ4nYUvHQ==" "integrity": "sha512-xfHdwa1FMJ082prjSJpoEI57GZITiQz10r3vEJCHa2khEFQjKy91aWKz6+zybzssCvXUwE1LQWgWVwZ4nYUvHQ=="
}, },
"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": { "node_modules/@types/web-bluetooth": {
"version": "0.0.18", "version": "0.0.18",
"resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.18.tgz", "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.18.tgz",
@ -3610,6 +3728,31 @@
"node": ">=14" "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": { "node_modules/dayjs": {
"version": "1.11.10", "version": "1.11.10",
"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz", "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
@ -6326,7 +6469,7 @@
"version": "4.17.21", "version": "4.17.21",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
"dev": true "devOptional": true
}, },
"node_modules/lodash.castarray": { "node_modules/lodash.castarray": {
"version": "4.4.0", "version": "4.4.0",
@ -8279,6 +8422,14 @@
"node": ">=8" "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": { "node_modules/source-map-js": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
@ -9246,6 +9397,24 @@
"uuid": "dist/bin/uuid" "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": { "node_modules/validate-npm-package-license": {
"version": "3.0.4", "version": "3.0.4",
"resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz", "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
@ -9532,6 +9701,15 @@
"vue": "^3.2.0" "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": { "node_modules/vue-tailwind-datepicker": {
"version": "1.6.1", "version": "1.6.1",
"resolved": "https://registry.npmjs.org/vue-tailwind-datepicker/-/vue-tailwind-datepicker-1.6.1.tgz", "resolved": "https://registry.npmjs.org/vue-tailwind-datepicker/-/vue-tailwind-datepicker-1.6.1.tgz",

7
package.json
View File

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

2425
src/assets/css/style.css
View File

File diff suppressed because it is too large Load Diff

128
src/components/Select.vue
View File

@ -4,16 +4,8 @@ interface DataItem {
name: any 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({ const props = defineProps({
placeholder: { placeholder: {
@ -32,106 +24,24 @@ const props = defineProps({
const emit = defineEmits(['update:selected']) const emit = defineEmits(['update:selected'])
const data = computed(() => [{ id: 0, name: props.placeholder }, ...props.data]) 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> </script>
<template> <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> </template>

18
src/main.ts
View File

@ -7,14 +7,30 @@ import router from './router'
import { createApp, provide, h } from 'vue' import { createApp, provide, h } from 'vue'
import { DefaultApolloClient } from '@vue/apollo-composable' import { DefaultApolloClient } from '@vue/apollo-composable'
import { apolloClient } from './utils/graphql' import { apolloClient } from './utils/graphql'
import { VanillaComponents, defineConfiguration } from '@flavorly/vanilla-components'
const app = createApp({ const app = createApp({
setup() { setup() {
provide(DefaultApolloClient, apolloClient()) 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(createPinia())
app.use(router) app.use(router)
app.mount('#app') app.mount('#app')

1
src/types/flavorly-vanilla-components.d.ts vendored Normal file
View File

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

34
src/views/TestView.vue
View File

@ -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>

167
tailwind.config.js
View File

@ -1,102 +1,105 @@
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
const colors = require("tailwindcss/colors") const colors = require('tailwindcss/colors')
export default { export default {
content: [ content: [
"./index.html", './index.html',
"./src/**/*.{vue,js,ts,jsx,tsx}", './src/**/*.{vue,js,ts,jsx,tsx}',
"./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: { theme: {
extend: { extend: {
fontFamily: { fontFamily: {
sans: ['Plus Jakarta Sans', 'sans-serif'], sans: ['Plus Jakarta Sans', 'sans-serif']
}, },
width: { width: {
'266': '266px', 266: '266px',
'320': '320px', 320: '320px'
}, },
height: { height: {
'screen-80': '80vh' 'screen-80': '80vh'
}, },
colors: { colors: {
"vtd-primary": { 'vtd-primary': {
'50': '#e6eff1', 50: '#e6eff1',
'100': '#cddee3', 100: '#cddee3',
'200': '#9abdc6', 200: '#9abdc6',
'300': '#689daa', 300: '#689daa',
'400': '#357c8d', 400: '#357c8d',
'500': '#035b71', 500: '#035b71',
'600': '#02495a', 600: '#02495a',
'700': '#02495a', 700: '#02495a',
'800': '#01242d', 800: '#01242d',
'900': '#011217', 900: '#011217'
}, },
'layout': '#F3F7F9', layout: '#F3F7F9',
'dark': '#151617', dark: '#151617',
'aside': '#2E3536', aside: '#2E3536',
'primary': { primary: {
'50': '#e6eff1', 50: '#e6eff1',
'100': '#cddee3', 100: '#cddee3',
'200': '#9abdc6', 200: '#9abdc6',
'300': '#689daa', 300: '#689daa',
'400': '#357c8d', 400: '#357c8d',
'500': '#035b71', 500: '#035b71',
'600': '#02495a', 600: '#02495a',
'700': '#02495a', 700: '#02495a',
'800': '#01242d', 800: '#01242d',
'900': '#011217', 900: '#011217'
}, },
'secondary': { secondary: {
'50': '#e5eef7', 50: '#e5eef7',
'100': '#ccebef', 100: '#ccebef',
'200': '#99d7df', 200: '#99d7df',
'300': '#66c2d0', 300: '#66c2d0',
'400': '#33aec0', 400: '#33aec0',
'500': '#00a2b9', 500: '#00a2b9',
'600': '#007b8d', 600: '#007b8d',
'700': '#005c6a', 700: '#005c6a',
'800': '#003e46', 800: '#003e46',
'900': '#001f23', 900: '#001f23'
}, },
'red': { red: {
'50': '#ffe5e5', 50: '#ffe5e5',
'100': '#ffcccc', 100: '#ffcccc',
'200': '#ff9999', 200: '#ff9999',
'300': '#ff6666', 300: '#ff6666',
'400': '#ff3333', 400: '#ff3333',
'500': '#ff0000', 500: '#ff0000',
'600': '#cc0000', 600: '#cc0000',
'700': '#990000', 700: '#990000',
'800': '#660000', 800: '#660000',
'900': '#330000', 900: '#330000'
}, },
'yellow': { yellow: {
'50': '#ffffe5', 50: '#ffffe5',
'100': '#ffffcc', 100: '#ffffcc',
'200': '#ffff99', 200: '#ffff99',
'300': '#ffff66', 300: '#ffff66',
'400': '#ffff33', 400: '#ffff33',
'500': '#ffff00', 500: '#ffff00',
'600': '#cccc00', 600: '#cccc00',
'700': '#999900', 700: '#999900',
'800': '#666600', 800: '#666600',
'900': '#333300', 900: '#333300'
}, },
'gray': { gray: {
'50': '#f9fafb', 50: '#f9fafb',
'100': '#f3f4f6', 100: '#f3f4f6',
'200': '#e5e7eb', 200: '#e5e7eb',
'300': '#d1d5db', 300: '#d1d5db',
'400': '#9ca3af', 400: '#9ca3af',
'500': '#6b7280', 500: '#6b7280',
'600': '#4b5563', 600: '#4b5563',
'700': '#374151', 700: '#374151',
'800': '#1f2937', 800: '#1f2937',
'900': '#111827', 900: '#111827'
}, }
}, }
}, }
}, },
plugins: [ plugins: [
require('@tailwindcss/typography'), require('@tailwindcss/typography'),
@ -104,6 +107,6 @@ export default {
require('@tailwindcss/aspect-ratio'), require('@tailwindcss/aspect-ratio'),
require('@tailwindcss/container-queries'), require('@tailwindcss/container-queries'),
require('@headlessui/tailwindcss'), require('@headlessui/tailwindcss'),
require('@headlessui/tailwindcss')({ prefix: 'ui' }), require('@headlessui/tailwindcss')({ prefix: 'ui' })
], ]
} }

3
tsconfig.json
View File

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