From 43b8bd5bb14f68b85a5391675698cb8c61de4179 Mon Sep 17 00:00:00 2001 From: kur0nek-o Date: Tue, 24 Oct 2023 13:56:04 +0700 Subject: [PATCH] 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 @@