From df01b1167582b4a2b98de375e16d581277735b98 Mon Sep 17 00:00:00 2001 From: kur0nek-o Date: Tue, 17 Oct 2023 20:59:59 +0700 Subject: [PATCH 1/3] create button components - incomplete --- package-lock.json | 8 +++--- src/assets/css/style.css | 4 +++ src/components/Button.vue | 54 +++++++++++++++++++++++++++++++++++++++ src/router/index.ts | 6 +++++ src/views/TestView.vue | 7 +++++ 5 files changed, 75 insertions(+), 4 deletions(-) create mode 100644 src/components/Button.vue create mode 100644 src/views/TestView.vue diff --git a/package-lock.json b/package-lock.json index 474335c..039aa54 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { - "name": "apkt", - "version": "0.0.0", + "name": "eis", + "version": "0.0.1", "lockfileVersion": 2, "requires": true, "packages": { "": { - "name": "apkt", - "version": "0.0.0", + "name": "eis", + "version": "0.0.1", "dependencies": { "@headlessui/tailwindcss": "^0.2.0", "@headlessui/vue": "^1.7.16", diff --git a/src/assets/css/style.css b/src/assets/css/style.css index f89fb49..e2cc16b 100644 --- a/src/assets/css/style.css +++ b/src/assets/css/style.css @@ -2248,6 +2248,10 @@ select { --tw-shadow: var(--tw-shadow-colored); } +.outline { + outline-style: solid; +} + .outline-0 { outline-width: 0px; } diff --git a/src/components/Button.vue b/src/components/Button.vue new file mode 100644 index 0000000..d9801ae --- /dev/null +++ b/src/components/Button.vue @@ -0,0 +1,54 @@ + + + diff --git a/src/router/index.ts b/src/router/index.ts index a20bc75..c00d2b8 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -1,6 +1,7 @@ import { createRouter, createWebHistory } from 'vue-router' import HomeView from '@/views/HomeView.vue' +import TestView from '@/views/TestView.vue' import LoginView from '@/views/LoginView.vue' import NotFoundView from '@/views/NotFoundView.vue' import MenuSample from '@/components/Menus/MenuSample.vue' @@ -286,6 +287,11 @@ const router = createRouter({ }, ] }, + { + path: '/test', + name: 'Test', + component: TestView + }, { path: '/login', name: 'Login', diff --git a/src/views/TestView.vue b/src/views/TestView.vue new file mode 100644 index 0000000..48c2690 --- /dev/null +++ b/src/views/TestView.vue @@ -0,0 +1,7 @@ + + + From 43b8bd5bb14f68b85a5391675698cb8c61de4179 Mon Sep 17 00:00:00 2001 From: kur0nek-o Date: Tue, 24 Oct 2023 13:56:04 +0700 Subject: [PATCH 2/3] create Button components --- package-lock.json | 30 +++- package.json | 9 +- src/assets/css/style.css | 222 ++++++++++++++++------------- src/components/Button.vue | 36 +++-- src/components/CommandPalettes.vue | 1 - src/components/Input.vue | 58 ++++++++ src/views/TestView.vue | 14 +- 7 files changed, 248 insertions(+), 122 deletions(-) create mode 100644 src/components/Input.vue diff --git a/package-lock.json b/package-lock.json index 039aa54..0b16dc6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "@headlessui/vue": "^1.7.16", "@heroicons/vue": "^2.0.18", "@lottiefiles/lottie-player": "^2.0.2", + "@phosphor-icons/vue": "^2.1.6", "@types/uuid": "^9.0.2", "devextreme": "23.1.5", "devextreme-vue": "23.1.5", @@ -494,9 +495,9 @@ } }, "node_modules/@babel/traverse": { - "version": "7.23.0", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.0.tgz", - "integrity": "sha512-t/QaEvyIoIkwzpiZ7aoSKK8kObQYeF7T2v+dazAYCb8SXtp58zEVkWW7zAnju8FNKNdr4ScAOEDmMItbyOmEYw==", + "version": "7.23.2", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.2.tgz", + "integrity": "sha512-azpe59SQ48qG6nu2CzcMLbxUudtN+dOM9kDbUqGq3HXUJRlo7i8fvPoxQUzYgLZ4cMVmuZgm8vvBpNeRhd6XSw==", "dev": true, "dependencies": { "@babel/code-frame": "^7.22.13", @@ -1148,6 +1149,17 @@ "integrity": "sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==", "dev": true }, + "node_modules/@phosphor-icons/vue": { + "version": "2.1.6", + "resolved": "https://registry.npmjs.org/@phosphor-icons/vue/-/vue-2.1.6.tgz", + "integrity": "sha512-j4iVvNT4JbDR2udIVfakKZHd14i3jCvO4b24OC0W/1rasftU8qVg1Tnb3QDwAT0teNU+UxvaM+kCWxfGHC2dUg==", + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "vue": ">=3.2.39" + } + }, "node_modules/@pkgr/utils": { "version": "2.4.2", "resolved": "https://registry.npmjs.org/@pkgr/utils/-/utils-2.4.2.tgz", @@ -8614,9 +8626,9 @@ } }, "@babel/traverse": { - "version": "7.23.0", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.0.tgz", - "integrity": "sha512-t/QaEvyIoIkwzpiZ7aoSKK8kObQYeF7T2v+dazAYCb8SXtp58zEVkWW7zAnju8FNKNdr4ScAOEDmMItbyOmEYw==", + "version": "7.23.2", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.2.tgz", + "integrity": "sha512-azpe59SQ48qG6nu2CzcMLbxUudtN+dOM9kDbUqGq3HXUJRlo7i8fvPoxQUzYgLZ4cMVmuZgm8vvBpNeRhd6XSw==", "dev": true, "requires": { "@babel/code-frame": "^7.22.13", @@ -8998,6 +9010,12 @@ "integrity": "sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==", "dev": true }, + "@phosphor-icons/vue": { + "version": "2.1.6", + "resolved": "https://registry.npmjs.org/@phosphor-icons/vue/-/vue-2.1.6.tgz", + "integrity": "sha512-j4iVvNT4JbDR2udIVfakKZHd14i3jCvO4b24OC0W/1rasftU8qVg1Tnb3QDwAT0teNU+UxvaM+kCWxfGHC2dUg==", + "requires": {} + }, "@pkgr/utils": { "version": "2.4.2", "resolved": "https://registry.npmjs.org/@pkgr/utils/-/utils-2.4.2.tgz", diff --git a/package.json b/package.json index 2a48ee9..db95494 100644 --- a/package.json +++ b/package.json @@ -18,16 +18,17 @@ "@headlessui/vue": "^1.7.16", "@heroicons/vue": "^2.0.18", "@lottiefiles/lottie-player": "^2.0.2", + "@phosphor-icons/vue": "^2.1.6", "@types/uuid": "^9.0.2", "devextreme": "23.1.5", "devextreme-vue": "23.1.5", + "dotenv": "^16.3.1", + "encrypt-storage": "^2.12.16", "pinia": "^2.1.3", "uuid": "^9.0.0", "vue": "^3.3.4", "vue-router": "^4.2.2", - "vue-tailwind-datepicker": "^1.4.5", - "encrypt-storage": "^2.12.16", - "dotenv": "^16.3.1" + "vue-tailwind-datepicker": "^1.4.5" }, "devDependencies": { "@rushstack/eslint-patch": "^1.5.1", @@ -57,4 +58,4 @@ "vitest": "^0.34.6", "vue-tsc": "^1.6.5" } -} \ No newline at end of file +} diff --git a/src/assets/css/style.css b/src/assets/css/style.css index 8e44cc5..413cdd8 100644 --- a/src/assets/css/style.css +++ b/src/assets/css/style.css @@ -705,6 +705,40 @@ select { --tw-backdrop-sepia: ; } +.container { + width: 100%; +} + +@media (min-width: 640px) { + .container { + max-width: 640px; + } +} + +@media (min-width: 768px) { + .container { + max-width: 768px; + } +} + +@media (min-width: 1024px) { + .container { + max-width: 1024px; + } +} + +@media (min-width: 1280px) { + .container { + max-width: 1280px; + } +} + +@media (min-width: 1536px) { + .container { + max-width: 1536px; + } +} + .sr-only { position: absolute; width: 1px; @@ -900,6 +934,10 @@ select { margin-bottom: 2rem; } +.me-1 { + margin-inline-end: 0.25rem; +} + .ml-1 { margin-left: 0.25rem; } @@ -1281,11 +1319,6 @@ select { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } -.-translate-y-12 { - --tw-translate-y: -3rem; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - .-translate-y-2\/4 { --tw-translate-y: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); @@ -1342,6 +1375,16 @@ select { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } +@keyframes spin { + to { + transform: rotate(360deg); + } +} + +.animate-spin { + animation: spin 1s linear infinite; +} + .cursor-default { cursor: default; } @@ -1454,12 +1497,6 @@ select { margin-bottom: calc(1rem * var(--tw-space-y-reverse)); } -.space-x-0 > :not([hidden]) ~ :not([hidden]) { - --tw-space-x-reverse: 0; - margin-right: calc(0px * var(--tw-space-x-reverse)); - margin-left: calc(0px * calc(1 - var(--tw-space-x-reverse))); -} - .divide-y > :not([hidden]) ~ :not([hidden]) { --tw-divide-y-reverse: 0; border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); @@ -1522,10 +1559,6 @@ select { border-radius: 0.75rem; } -.rounded-2xl { - border-radius: 1rem; -} - .rounded-l-full { border-top-left-radius: 9999px; border-bottom-left-radius: 9999px; @@ -1615,6 +1648,11 @@ select { border-color: rgb(249 250 251 / var(--tw-border-opacity)); } +.border-primary-500 { + --tw-border-opacity: 1; + border-color: rgb(3 91 113 / var(--tw-border-opacity)); +} + .border-transparent { border-color: transparent; } @@ -1624,16 +1662,6 @@ select { background-color: rgb(0 0 0 / var(--tw-bg-opacity)); } -.bg-blue-100 { - --tw-bg-opacity: 1; - background-color: rgb(219 234 254 / var(--tw-bg-opacity)); -} - -.bg-blue-600 { - --tw-bg-opacity: 1; - background-color: rgb(37 99 235 / var(--tw-bg-opacity)); -} - .bg-gray-100 { --tw-bg-opacity: 1; background-color: rgb(243 244 246 / var(--tw-bg-opacity)); @@ -1664,11 +1692,6 @@ select { background-color: rgb(17 24 39 / var(--tw-bg-opacity)); } -.bg-green-100 { - --tw-bg-opacity: 1; - background-color: rgb(220 252 231 / var(--tw-bg-opacity)); -} - .bg-green-400 { --tw-bg-opacity: 1; background-color: rgb(74 222 128 / var(--tw-bg-opacity)); @@ -1684,16 +1707,6 @@ select { background-color: rgb(243 247 249 / var(--tw-bg-opacity)); } -.bg-orange-100 { - --tw-bg-opacity: 1; - background-color: rgb(255 237 213 / var(--tw-bg-opacity)); -} - -.bg-orange-600 { - --tw-bg-opacity: 1; - background-color: rgb(234 88 12 / var(--tw-bg-opacity)); -} - .bg-primary-100 { --tw-bg-opacity: 1; background-color: rgb(205 222 227 / var(--tw-bg-opacity)); @@ -1753,16 +1766,6 @@ select { background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } -.bg-red-50 { - --tw-bg-opacity: 1; - background-color: rgb(255 229 229 / var(--tw-bg-opacity)); -} - -.bg-yellow-50 { - --tw-bg-opacity: 1; - background-color: rgb(255 255 229 / var(--tw-bg-opacity)); -} - .bg-yellow-100 { --tw-bg-opacity: 1; background-color: rgb(255 255 204 / var(--tw-bg-opacity)); @@ -1793,6 +1796,14 @@ select { --tw-bg-opacity: 0.8; } +.bg-none { + background-image: none; +} + +.fill-gray-400 { + fill: #9ca3af; +} + .fill-gray-500 { fill: #6b7280; } @@ -1809,10 +1820,6 @@ select { fill: #007b8d; } -.fill-gray-400 { - fill: #9ca3af; -} - .p-1 { padding: 0.25rem; } @@ -1939,6 +1946,11 @@ select { padding-bottom: 1rem; } +.py-5 { + padding-top: 1.25rem; + padding-bottom: 1.25rem; +} + .py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; @@ -2136,11 +2148,6 @@ select { color: rgb(96 165 250 / var(--tw-text-opacity)); } -.text-blue-600 { - --tw-text-opacity: 1; - color: rgb(37 99 235 / var(--tw-text-opacity)); -} - .text-dark { --tw-text-opacity: 1; color: rgb(21 22 23 / var(--tw-text-opacity)); @@ -2226,6 +2233,11 @@ select { color: rgb(204 0 0 / var(--tw-text-opacity)); } +.text-secondary-600 { + --tw-text-opacity: 1; + color: rgb(0 123 141 / var(--tw-text-opacity)); +} + .text-slate-600 { --tw-text-opacity: 1; color: rgb(71 85 105 / var(--tw-text-opacity)); @@ -2256,11 +2268,6 @@ select { color: rgb(153 153 0 / var(--tw-text-opacity)); } -.text-secondary-600 { - --tw-text-opacity: 1; - color: rgb(0 123 141 / var(--tw-text-opacity)); -} - .text-opacity-100 { --tw-text-opacity: 1; } @@ -2287,6 +2294,10 @@ select { opacity: 1; } +.opacity-25 { + opacity: 0.25; +} + .opacity-30 { opacity: 0.3; } @@ -2295,6 +2306,10 @@ select { opacity: 0.5; } +.opacity-75 { + opacity: 0.75; +} + .shadow { --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); @@ -2513,9 +2528,9 @@ select { overflow-y: auto; } -.hover\:bg-blue-700:hover { - --tw-bg-opacity: 1; - background-color: rgb(29 78 216 / var(--tw-bg-opacity)); +.hover\:border-primary-500:hover { + --tw-border-opacity: 1; + border-color: rgb(3 91 113 / var(--tw-border-opacity)); } .hover\:bg-gray-200:hover { @@ -2538,16 +2553,21 @@ select { background-color: rgb(67 56 202 / var(--tw-bg-opacity)); } -.hover\:bg-orange-500:hover { - --tw-bg-opacity: 1; - background-color: rgb(249 115 22 / var(--tw-bg-opacity)); -} - .hover\:bg-primary-100:hover { --tw-bg-opacity: 1; background-color: rgb(205 222 227 / var(--tw-bg-opacity)); } +.hover\:bg-primary-200:hover { + --tw-bg-opacity: 1; + background-color: rgb(154 189 198 / var(--tw-bg-opacity)); +} + +.hover\:bg-primary-600:hover { + --tw-bg-opacity: 1; + background-color: rgb(2 73 90 / var(--tw-bg-opacity)); +} + .hover\:bg-red-500:hover { --tw-bg-opacity: 1; background-color: rgb(255 0 0 / var(--tw-bg-opacity)); @@ -2558,21 +2578,11 @@ select { background-color: rgb(2 73 90 / var(--tw-bg-opacity)); } -.hover\:bg-red-700:hover { - --tw-bg-opacity: 1; - background-color: rgb(153 0 0 / var(--tw-bg-opacity)); -} - .hover\:bg-yellow-500:hover { --tw-bg-opacity: 1; background-color: rgb(255 255 0 / var(--tw-bg-opacity)); } -.hover\:bg-primary-500:hover { - --tw-bg-opacity: 1; - background-color: rgb(3 91 113 / var(--tw-bg-opacity)); -} - .hover\:text-gray-500:hover { --tw-text-opacity: 1; color: rgb(107 114 128 / var(--tw-text-opacity)); @@ -2662,16 +2672,16 @@ select { --tw-ring-inset: inset; } -.focus\:ring-blue-500:focus { - --tw-ring-opacity: 1; - --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity)); -} - .focus\:ring-indigo-500:focus { --tw-ring-opacity: 1; --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity)); } +.focus\:ring-primary-500:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(3 91 113 / var(--tw-ring-opacity)); +} + .focus\:ring-vtd-primary-500:focus { --tw-ring-opacity: 1; --tw-ring-color: rgb(3 91 113 / var(--tw-ring-opacity)); @@ -2682,11 +2692,6 @@ select { --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity)); } -.focus\:ring-primary-500:focus { - --tw-ring-opacity: 1; - --tw-ring-color: rgb(3 91 113 / var(--tw-ring-opacity)); -} - .focus\:ring-opacity-10:focus { --tw-ring-opacity: 0.1; } @@ -2715,20 +2720,41 @@ select { cursor: not-allowed; } +.disabled\:border-primary-300:disabled { + --tw-border-opacity: 1; + border-color: rgb(104 157 170 / var(--tw-border-opacity)); +} + +.disabled\:bg-primary-200:disabled { + --tw-bg-opacity: 1; + background-color: rgb(154 189 198 / var(--tw-bg-opacity)); +} + +.disabled\:bg-primary-300:disabled { + --tw-bg-opacity: 1; + background-color: rgb(104 157 170 / var(--tw-bg-opacity)); +} + .disabled\:bg-primary-400:disabled { --tw-bg-opacity: 1; background-color: rgb(53 124 141 / var(--tw-bg-opacity)); } +.disabled\:text-primary-300:disabled { + --tw-text-opacity: 1; + color: rgb(104 157 170 / var(--tw-text-opacity)); +} + +.disabled\:text-primary-400:disabled { + --tw-text-opacity: 1; + color: rgb(53 124 141 / var(--tw-text-opacity)); +} + .group:hover .group-hover\:bg-primary-100 { --tw-bg-opacity: 1; background-color: rgb(205 222 227 / var(--tw-bg-opacity)); } -.group:hover .group-hover\:fill-gray-600 { - fill: #4b5563; -} - .group:hover .group-hover\:fill-gray-500 { fill: #6b7280; } @@ -3064,10 +3090,6 @@ select { padding-right: 1.5rem; } - .sm\:pb-6 { - padding-bottom: 1.5rem; - } - .sm\:text-left { text-align: left; } diff --git a/src/components/Button.vue b/src/components/Button.vue index d9801ae..068c055 100644 --- a/src/components/Button.vue +++ b/src/components/Button.vue @@ -33,22 +33,38 @@ const props = defineProps({ }); const buttonStyle = computed(() => { - if (props.styleType == 'filled') { - return 'hello' + switch (props.styleType) { + case 'filled': + return 'text-white border-transparent rounded-lg bg-primary-500 hover:bg-primary-600 focus:outline-0 disabled:bg-primary-200 disabled:text-primary-400' + + case 'secondary': + return 'text-primary-500 bg-primary-50 border-transparent rounded-lg hover:bg-primary-200 focus:outline-0 disabled:bg-primary-300' + + case 'outline': + return 'bg-none text-primary-500 border border-primary-500 rounded-lg disabled:border-primary-300 disabled:text-primary-300' + + case 'text': + return 'bg-none text-primary-500 border border-transparent hover:border-primary-500 rounded-lg disabled:border-primary-300 disabled:text-primary-300' } }) + diff --git a/src/components/CommandPalettes.vue b/src/components/CommandPalettes.vue index d990d75..d8725cf 100644 --- a/src/components/CommandPalettes.vue +++ b/src/components/CommandPalettes.vue @@ -69,7 +69,6 @@ + + \ No newline at end of file diff --git a/src/views/TestView.vue b/src/views/TestView.vue index 48c2690..607111b 100644 --- a/src/views/TestView.vue +++ b/src/views/TestView.vue @@ -3,5 +3,17 @@ From 5f99a7c312bcf64f9a59ff56f1920c7f47b53136 Mon Sep 17 00:00:00 2001 From: kur0nek-o Date: Fri, 27 Oct 2023 09:19:37 +0700 Subject: [PATCH 3/3] create filters components --- src/assets/css/style.css | 150 +++++++++++++++------- src/components/Button.vue | 58 ++++++--- src/components/Form/Filters.vue | 44 +++++++ src/components/Form/FiltersType/Type1.vue | 67 ++++++++++ src/components/Form/FiltersType/Type2.vue | 61 +++++++++ src/components/InputText.vue | 2 +- src/main.ts | 1 + src/router/index.ts | 5 + src/views/TestView.vue | 103 +++++++++++++-- 9 files changed, 412 insertions(+), 79 deletions(-) create mode 100644 src/components/Form/Filters.vue create mode 100644 src/components/Form/FiltersType/Type1.vue create mode 100644 src/components/Form/FiltersType/Type2.vue diff --git a/src/assets/css/style.css b/src/assets/css/style.css index 33a7af8..96d3fb8 100644 --- a/src/assets/css/style.css +++ b/src/assets/css/style.css @@ -705,7 +705,6 @@ select { --tw-backdrop-sepia: ; } -<<<<<<< HEAD .container { width: 100%; } @@ -738,7 +737,8 @@ select { .container { max-width: 1536px; } -======= +} + /* NavBar */ .menu-item { @@ -870,7 +870,6 @@ select { .group:hover .aside-single-item-icon-inactive { stroke: #fff; ->>>>>>> 1885f28d62cccd232f8b53fac507e44d59bb191d } .sr-only { @@ -962,6 +961,10 @@ select { top: 50%; } +.top-16 { + top: 4rem; +} + .top-3 { top: 0.75rem; } @@ -1248,6 +1251,10 @@ select { max-height: 0px; } +.max-h-60 { + max-height: 15rem; +} + .max-h-80 { max-height: 20rem; } @@ -1312,6 +1319,10 @@ select { width: 1.5rem; } +.w-72 { + width: 18rem; +} + .w-8 { width: 2rem; } @@ -1533,6 +1544,14 @@ select { gap: 0.25rem; } +.gap-2 { + gap: 0.5rem; +} + +.gap-3 { + gap: 0.75rem; +} + .gap-4 { gap: 1rem; } @@ -1568,6 +1587,12 @@ select { margin-bottom: calc(0.25rem * var(--tw-space-y-reverse)); } +.space-y-3 > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(0.75rem * var(--tw-space-y-reverse)); +} + .space-y-4 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); @@ -1589,6 +1614,10 @@ select { --tw-divide-opacity: 0.1; } +.overflow-auto { + overflow: auto; +} + .overflow-hidden { overflow: hidden; } @@ -1615,6 +1644,10 @@ select { border-radius: 0.25rem; } +.rounded-2xl { + border-radius: 1rem; +} + .rounded-full { border-radius: 9999px; } @@ -1688,6 +1721,10 @@ select { border-style: solid; } +.border-none { + border-style: none; +} + .border-black\/\[\.1\] { border-color: rgb(0 0 0 / .1); } @@ -1702,19 +1739,11 @@ select { border-color: rgb(209 213 219 / var(--tw-border-opacity)); } -<<<<<<< HEAD -.border-gray-50 { - --tw-border-opacity: 1; - border-color: rgb(249 250 251 / var(--tw-border-opacity)); -} - .border-primary-500 { --tw-border-opacity: 1; border-color: rgb(3 91 113 / var(--tw-border-opacity)); } -======= ->>>>>>> 1885f28d62cccd232f8b53fac507e44d59bb191d .border-transparent { border-color: transparent; } @@ -1729,6 +1758,11 @@ select { background-color: rgb(243 244 246 / var(--tw-bg-opacity)); } +.bg-gray-200 { + --tw-bg-opacity: 1; + background-color: rgb(229 231 235 / var(--tw-bg-opacity)); +} + .bg-gray-300 { --tw-bg-opacity: 1; background-color: rgb(209 213 219 / var(--tw-bg-opacity)); @@ -1754,14 +1788,6 @@ select { background-color: rgb(17 24 39 / var(--tw-bg-opacity)); } -<<<<<<< HEAD -.bg-green-400 { - --tw-bg-opacity: 1; - background-color: rgb(74 222 128 / var(--tw-bg-opacity)); -} - -======= ->>>>>>> 1885f28d62cccd232f8b53fac507e44d59bb191d .bg-indigo-600 { --tw-bg-opacity: 1; background-color: rgb(79 70 229 / var(--tw-bg-opacity)); @@ -1807,6 +1833,11 @@ select { background-color: rgb(204 235 239 / var(--tw-bg-opacity)); } +.bg-teal-600 { + --tw-bg-opacity: 1; + background-color: rgb(13 148 136 / var(--tw-bg-opacity)); +} + .bg-transparent { background-color: transparent; } @@ -1861,13 +1892,10 @@ select { --tw-bg-opacity: 0.8; } -<<<<<<< HEAD .bg-none { background-image: none; } -======= ->>>>>>> 1885f28d62cccd232f8b53fac507e44d59bb191d .fill-gray-400 { fill: #9ca3af; } @@ -1888,8 +1916,6 @@ select { fill: #007b8d; } -<<<<<<< HEAD -======= .fill-white { fill: #fff; } @@ -1898,7 +1924,6 @@ select { stroke: #fff; } ->>>>>>> 1885f28d62cccd232f8b53fac507e44d59bb191d .p-1 { padding: 0.25rem; } @@ -1915,6 +1940,10 @@ select { padding: 1rem; } +.p-5 { + padding: 1.25rem; +} + .\!px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; @@ -2020,11 +2049,6 @@ select { padding-bottom: 1rem; } -.py-5 { - padding-top: 1.25rem; - padding-bottom: 1.25rem; -} - .py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; @@ -2038,6 +2062,10 @@ select { padding-left: 0.25rem; } +.pl-10 { + padding-left: 2.5rem; +} + .pl-11 { padding-left: 2.75rem; } @@ -2046,6 +2074,10 @@ select { padding-left: 0.75rem; } +.pr-10 { + padding-right: 2.5rem; +} + .pr-12 { padding-right: 3rem; } @@ -2244,6 +2276,11 @@ select { color: rgb(55 65 81 / var(--tw-text-opacity)); } +.text-gray-800 { + --tw-text-opacity: 1; + color: rgb(31 41 55 / var(--tw-text-opacity)); +} + .text-gray-900 { --tw-text-opacity: 1; color: rgb(17 24 39 / var(--tw-text-opacity)); @@ -2319,6 +2356,11 @@ select { color: rgb(15 23 42 / var(--tw-text-opacity)); } +.text-teal-600 { + --tw-text-opacity: 1; + color: rgb(13 148 136 / var(--tw-text-opacity)); +} + .text-vtd-primary-500 { --tw-text-opacity: 1; color: rgb(3 91 113 / var(--tw-text-opacity)); @@ -2399,6 +2441,12 @@ select { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } +.shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + .shadow-sm { --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); @@ -2580,18 +2628,11 @@ select { color: rgb(75 85 99 / var(--tw-text-opacity)); } -<<<<<<< HEAD -.hover\:overflow-y-auto:hover { - overflow-y: auto; -} - .hover\:border-primary-500:hover { --tw-border-opacity: 1; border-color: rgb(3 91 113 / var(--tw-border-opacity)); } -======= ->>>>>>> 1885f28d62cccd232f8b53fac507e44d59bb191d .hover\:bg-gray-200:hover { --tw-bg-opacity: 1; background-color: rgb(229 231 235 / var(--tw-bg-opacity)); @@ -2771,6 +2812,29 @@ select { outline-color: #4f46e5; } +.focus-visible\:ring-2:focus-visible { + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); +} + +.focus-visible\:ring-white:focus-visible { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity)); +} + +.focus-visible\:ring-opacity-75:focus-visible { + --tw-ring-opacity: 0.75; +} + +.focus-visible\:ring-offset-2:focus-visible { + --tw-ring-offset-width: 2px; +} + +.focus-visible\:ring-offset-teal-300:focus-visible { + --tw-ring-offset-color: #5eead4; +} + .disabled\:cursor-not-allowed:disabled { cursor: not-allowed; } @@ -2795,7 +2859,6 @@ select { background-color: rgb(53 124 141 / var(--tw-bg-opacity)); } -<<<<<<< HEAD .disabled\:text-primary-300:disabled { --tw-text-opacity: 1; color: rgb(104 157 170 / var(--tw-text-opacity)); @@ -2806,13 +2869,6 @@ select { color: rgb(53 124 141 / var(--tw-text-opacity)); } -.group:hover .group-hover\:bg-primary-100 { - --tw-bg-opacity: 1; - background-color: rgb(205 222 227 / var(--tw-bg-opacity)); -} - -======= ->>>>>>> 1885f28d62cccd232f8b53fac507e44d59bb191d .group:hover .group-hover\:fill-gray-500 { fill: #6b7280; } @@ -3313,6 +3369,10 @@ select { width: fit-content; } + .lg\:grid-cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + .lg\:flex-nowrap { flex-wrap: nowrap; } diff --git a/src/components/Button.vue b/src/components/Button.vue index 068c055..300a4e3 100644 --- a/src/components/Button.vue +++ b/src/components/Button.vue @@ -1,36 +1,36 @@ + + diff --git a/src/components/Form/Filters.vue b/src/components/Form/Filters.vue new file mode 100644 index 0000000..c320c86 --- /dev/null +++ b/src/components/Form/Filters.vue @@ -0,0 +1,44 @@ + + + \ No newline at end of file diff --git a/src/components/Form/FiltersType/Type1.vue b/src/components/Form/FiltersType/Type1.vue new file mode 100644 index 0000000..b649876 --- /dev/null +++ b/src/components/Form/FiltersType/Type1.vue @@ -0,0 +1,67 @@ + \ No newline at end of file diff --git a/src/components/Form/FiltersType/Type2.vue b/src/components/Form/FiltersType/Type2.vue new file mode 100644 index 0000000..5d35270 --- /dev/null +++ b/src/components/Form/FiltersType/Type2.vue @@ -0,0 +1,61 @@ + + + \ No newline at end of file diff --git a/src/components/InputText.vue b/src/components/InputText.vue index f09040e..e51eb58 100644 --- a/src/components/InputText.vue +++ b/src/components/InputText.vue @@ -46,7 +46,7 @@ const switchInputType = () => {
+ :class="['w-full px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0']" /> - import Button from '@/components/Button.vue' + import Filters from '@/components/Form/Filters.vue' + import Type2 from '@/components/Form/FiltersType/Type2.vue'
-

Default / filled

-