From 4dec0f6d1481d888e5c9b6c634d0b07b9d3d7f61 Mon Sep 17 00:00:00 2001 From: Leon Liu Date: Tue, 31 Dec 2024 18:34:12 +0000 Subject: [PATCH] update --- bun.lockb | Bin 137646 -> 165008 bytes package.json | 6 + postcss.config.js | 7 + src/App.vue | 49 +-- src/assets/base.css | 86 ----- src/assets/logo.svg | 1 - src/assets/main.css | 35 -- src/assets/primevue/accordion.css | 64 +++ src/assets/primevue/autocomplete.css | 143 +++++++ src/assets/primevue/avatar.css | 50 +++ src/assets/primevue/badge.css | 49 +++ src/assets/primevue/blockui.css | 15 + src/assets/primevue/breadcrumb.css | 41 ++ src/assets/primevue/button.css | 333 ++++++++++++++++ src/assets/primevue/buttongroup.css | 19 + src/assets/primevue/card.css | 22 ++ src/assets/primevue/carousel.css | 64 +++ src/assets/primevue/cascadeselect.css | 177 +++++++++ src/assets/primevue/checkbox.css | 84 ++++ src/assets/primevue/chip.css | 27 ++ src/assets/primevue/colorpicker.css | 47 +++ src/assets/primevue/common.css | 81 ++++ src/assets/primevue/confirmdialog.css | 10 + src/assets/primevue/confirmpopup.css | 66 ++++ src/assets/primevue/contextmenu.css | 106 +++++ src/assets/primevue/datatable.css | 427 +++++++++++++++++++++ src/assets/primevue/dataview.css | 29 ++ src/assets/primevue/datepicker.css | 211 ++++++++++ src/assets/primevue/dialog.css | 125 ++++++ src/assets/primevue/divider.css | 52 +++ src/assets/primevue/dock.css | 84 ++++ src/assets/primevue/drawer.css | 94 +++++ src/assets/primevue/fieldset.css | 45 +++ src/assets/primevue/fileupload.css | 57 +++ src/assets/primevue/floatlabel.css | 73 ++++ src/assets/primevue/galleria.css | 246 ++++++++++++ src/assets/primevue/iconfield.css | 23 ++ src/assets/primevue/iftalabel.css | 32 ++ src/assets/primevue/image.css | 56 +++ src/assets/primevue/imagecompare.css | 38 ++ src/assets/primevue/inplace.css | 13 + src/assets/primevue/inputgroup.css | 67 ++++ src/assets/primevue/inputnumber.css | 84 ++++ src/assets/primevue/inputotp.css | 9 + src/assets/primevue/inputtext.css | 34 ++ src/assets/primevue/knob.css | 37 ++ src/assets/primevue/listbox.css | 81 ++++ src/assets/primevue/megamenu.css | 219 +++++++++++ src/assets/primevue/menu.css | 51 +++ src/assets/primevue/menubar.css | 181 +++++++++ src/assets/primevue/message.css | 212 ++++++++++ src/assets/primevue/metergroup.css | 67 ++++ src/assets/primevue/multiselect.css | 143 +++++++ src/assets/primevue/orderlist.css | 10 + src/assets/primevue/organizationchart.css | 73 ++++ src/assets/primevue/overlaybadge.css | 13 + src/assets/primevue/paginator.css | 58 +++ src/assets/primevue/panel.css | 27 ++ src/assets/primevue/panelmenu.css | 98 +++++ src/assets/primevue/password.css | 61 +++ src/assets/primevue/picklist.css | 18 + src/assets/primevue/popover.css | 46 +++ src/assets/primevue/progressbar.css | 66 ++++ src/assets/primevue/progressspinner.css | 60 +++ src/assets/primevue/radiobutton.css | 95 +++++ src/assets/primevue/rating.css | 23 ++ src/assets/primevue/ripple.css | 7 + src/assets/primevue/scrollpanel.css | 41 ++ src/assets/primevue/scrolltop.css | 25 ++ src/assets/primevue/select.css | 144 +++++++ src/assets/primevue/selectbutton.css | 25 ++ src/assets/primevue/skeleton.css | 11 + src/assets/primevue/slider.css | 42 ++ src/assets/primevue/speeddial.css | 48 +++ src/assets/primevue/splitbutton.css | 34 ++ src/assets/primevue/splitter.css | 56 +++ src/assets/primevue/stepper.css | 101 +++++ src/assets/primevue/tabs.css | 84 ++++ src/assets/primevue/tag.css | 38 ++ src/assets/primevue/tailwind.css | 104 +++++ src/assets/primevue/terminal.css | 22 ++ src/assets/primevue/textarea.css | 38 ++ src/assets/primevue/tieredmenu.css | 108 ++++++ src/assets/primevue/timeline.css | 121 ++++++ src/assets/primevue/toast.css | 172 +++++++++ src/assets/primevue/togglebutton.css | 63 +++ src/assets/primevue/toggleswitch.css | 68 ++++ src/assets/primevue/toolbar.css | 12 + src/assets/primevue/tooltip.css | 38 ++ src/assets/primevue/tree.css | 103 +++++ src/assets/primevue/treeselect.css | 115 ++++++ src/assets/primevue/treetable.css | 312 +++++++++++++++ src/assets/tailwind.css | 4 + src/components/HelloWorld.vue | 41 -- src/components/TheWelcome.vue | 94 ----- src/components/WelcomeItem.vue | 87 ----- src/components/icons/IconCommunity.vue | 7 - src/components/icons/IconDocumentation.vue | 7 - src/components/icons/IconEcosystem.vue | 7 - src/components/icons/IconSupport.vue | 7 - src/components/icons/IconTooling.vue | 19 - src/main.ts | 11 +- src/style.css | 74 ++++ tailwind.config.js | 9 + 104 files changed, 6884 insertions(+), 435 deletions(-) create mode 100644 postcss.config.js delete mode 100644 src/assets/base.css delete mode 100644 src/assets/logo.svg delete mode 100644 src/assets/main.css create mode 100644 src/assets/primevue/accordion.css create mode 100644 src/assets/primevue/autocomplete.css create mode 100644 src/assets/primevue/avatar.css create mode 100644 src/assets/primevue/badge.css create mode 100644 src/assets/primevue/blockui.css create mode 100644 src/assets/primevue/breadcrumb.css create mode 100644 src/assets/primevue/button.css create mode 100644 src/assets/primevue/buttongroup.css create mode 100644 src/assets/primevue/card.css create mode 100644 src/assets/primevue/carousel.css create mode 100644 src/assets/primevue/cascadeselect.css create mode 100644 src/assets/primevue/checkbox.css create mode 100644 src/assets/primevue/chip.css create mode 100644 src/assets/primevue/colorpicker.css create mode 100644 src/assets/primevue/common.css create mode 100644 src/assets/primevue/confirmdialog.css create mode 100644 src/assets/primevue/confirmpopup.css create mode 100644 src/assets/primevue/contextmenu.css create mode 100644 src/assets/primevue/datatable.css create mode 100644 src/assets/primevue/dataview.css create mode 100644 src/assets/primevue/datepicker.css create mode 100644 src/assets/primevue/dialog.css create mode 100644 src/assets/primevue/divider.css create mode 100644 src/assets/primevue/dock.css create mode 100644 src/assets/primevue/drawer.css create mode 100644 src/assets/primevue/fieldset.css create mode 100644 src/assets/primevue/fileupload.css create mode 100644 src/assets/primevue/floatlabel.css create mode 100644 src/assets/primevue/galleria.css create mode 100644 src/assets/primevue/iconfield.css create mode 100644 src/assets/primevue/iftalabel.css create mode 100644 src/assets/primevue/image.css create mode 100644 src/assets/primevue/imagecompare.css create mode 100644 src/assets/primevue/inplace.css create mode 100644 src/assets/primevue/inputgroup.css create mode 100644 src/assets/primevue/inputnumber.css create mode 100644 src/assets/primevue/inputotp.css create mode 100644 src/assets/primevue/inputtext.css create mode 100644 src/assets/primevue/knob.css create mode 100644 src/assets/primevue/listbox.css create mode 100644 src/assets/primevue/megamenu.css create mode 100644 src/assets/primevue/menu.css create mode 100644 src/assets/primevue/menubar.css create mode 100644 src/assets/primevue/message.css create mode 100644 src/assets/primevue/metergroup.css create mode 100644 src/assets/primevue/multiselect.css create mode 100644 src/assets/primevue/orderlist.css create mode 100644 src/assets/primevue/organizationchart.css create mode 100644 src/assets/primevue/overlaybadge.css create mode 100644 src/assets/primevue/paginator.css create mode 100644 src/assets/primevue/panel.css create mode 100644 src/assets/primevue/panelmenu.css create mode 100644 src/assets/primevue/password.css create mode 100644 src/assets/primevue/picklist.css create mode 100644 src/assets/primevue/popover.css create mode 100644 src/assets/primevue/progressbar.css create mode 100644 src/assets/primevue/progressspinner.css create mode 100644 src/assets/primevue/radiobutton.css create mode 100644 src/assets/primevue/rating.css create mode 100644 src/assets/primevue/ripple.css create mode 100644 src/assets/primevue/scrollpanel.css create mode 100644 src/assets/primevue/scrolltop.css create mode 100644 src/assets/primevue/select.css create mode 100644 src/assets/primevue/selectbutton.css create mode 100644 src/assets/primevue/skeleton.css create mode 100644 src/assets/primevue/slider.css create mode 100644 src/assets/primevue/speeddial.css create mode 100644 src/assets/primevue/splitbutton.css create mode 100644 src/assets/primevue/splitter.css create mode 100644 src/assets/primevue/stepper.css create mode 100644 src/assets/primevue/tabs.css create mode 100644 src/assets/primevue/tag.css create mode 100644 src/assets/primevue/tailwind.css create mode 100644 src/assets/primevue/terminal.css create mode 100644 src/assets/primevue/textarea.css create mode 100644 src/assets/primevue/tieredmenu.css create mode 100644 src/assets/primevue/timeline.css create mode 100644 src/assets/primevue/toast.css create mode 100644 src/assets/primevue/togglebutton.css create mode 100644 src/assets/primevue/toggleswitch.css create mode 100644 src/assets/primevue/toolbar.css create mode 100644 src/assets/primevue/tooltip.css create mode 100644 src/assets/primevue/tree.css create mode 100644 src/assets/primevue/treeselect.css create mode 100644 src/assets/primevue/treetable.css create mode 100644 src/assets/tailwind.css delete mode 100644 src/components/HelloWorld.vue delete mode 100644 src/components/TheWelcome.vue delete mode 100644 src/components/WelcomeItem.vue delete mode 100644 src/components/icons/IconCommunity.vue delete mode 100644 src/components/icons/IconDocumentation.vue delete mode 100644 src/components/icons/IconEcosystem.vue delete mode 100644 src/components/icons/IconSupport.vue delete mode 100644 src/components/icons/IconTooling.vue create mode 100644 src/style.css create mode 100644 tailwind.config.js diff --git a/bun.lockb b/bun.lockb index 3ac3d0b0d751b41d94b8e46d82a69209ac7cd146..954119ddc99cbdd009e7e2ad8b3694300277c532 100755 GIT binary patch delta 42445 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∾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 Iois7!zcg{3s{jB1 delta 25625 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 diff --git a/package.json b/package.json index 1936e90..5087cd5 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ }, "dependencies": { "pinia": "^2.3.0", + "primevue": "^4.2.5", "vue": "^3.5.13" }, "devDependencies": { @@ -23,10 +24,15 @@ "@vue/eslint-config-prettier": "^10.1.0", "@vue/eslint-config-typescript": "^14.1.3", "@vue/tsconfig": "^0.7.0", + "autoprefixer": "^10.4.20", "eslint": "^9.14.0", "eslint-plugin-vue": "^9.30.0", "npm-run-all2": "^7.0.2", + "postcss": "^8.4.49", + "postcss-import": "^16.1.0", "prettier": "^3.3.3", + "tailwindcss": "^3.4.17", + "tailwindcss-primeui": "^0.3.4", "typescript": "~5.6.3", "vite": "^6.0.5", "vite-plugin-vue-devtools": "^7.6.8", diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 0000000..a8c52ee --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,7 @@ +export default { + plugins: { + 'postcss-import': {}, + tailwindcss: {}, + autoprefixer: {}, + }, +} diff --git a/src/App.vue b/src/App.vue index d05208d..2ff1090 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,47 +1,12 @@ - - diff --git a/src/assets/base.css b/src/assets/base.css deleted file mode 100644 index 8816868..0000000 --- a/src/assets/base.css +++ /dev/null @@ -1,86 +0,0 @@ -/* color palette from */ -:root { - --vt-c-white: #ffffff; - --vt-c-white-soft: #f8f8f8; - --vt-c-white-mute: #f2f2f2; - - --vt-c-black: #181818; - --vt-c-black-soft: #222222; - --vt-c-black-mute: #282828; - - --vt-c-indigo: #2c3e50; - - --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); - --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); - --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); - --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); - - --vt-c-text-light-1: var(--vt-c-indigo); - --vt-c-text-light-2: rgba(60, 60, 60, 0.66); - --vt-c-text-dark-1: var(--vt-c-white); - --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); -} - -/* semantic color variables for this project */ -:root { - --color-background: var(--vt-c-white); - --color-background-soft: var(--vt-c-white-soft); - --color-background-mute: var(--vt-c-white-mute); - - --color-border: var(--vt-c-divider-light-2); - --color-border-hover: var(--vt-c-divider-light-1); - - --color-heading: var(--vt-c-text-light-1); - --color-text: var(--vt-c-text-light-1); - - --section-gap: 160px; -} - -@media (prefers-color-scheme: dark) { - :root { - --color-background: var(--vt-c-black); - --color-background-soft: var(--vt-c-black-soft); - --color-background-mute: var(--vt-c-black-mute); - - --color-border: var(--vt-c-divider-dark-2); - --color-border-hover: var(--vt-c-divider-dark-1); - - --color-heading: var(--vt-c-text-dark-1); - --color-text: var(--vt-c-text-dark-2); - } -} - -*, -*::before, -*::after { - box-sizing: border-box; - margin: 0; - font-weight: normal; -} - -body { - min-height: 100vh; - color: var(--color-text); - background: var(--color-background); - transition: - color 0.5s, - background-color 0.5s; - line-height: 1.6; - font-family: - Inter, - -apple-system, - BlinkMacSystemFont, - 'Segoe UI', - Roboto, - Oxygen, - Ubuntu, - Cantarell, - 'Fira Sans', - 'Droid Sans', - 'Helvetica Neue', - sans-serif; - font-size: 15px; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} diff --git a/src/assets/logo.svg b/src/assets/logo.svg deleted file mode 100644 index 7565660..0000000 --- a/src/assets/logo.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/src/assets/main.css b/src/assets/main.css deleted file mode 100644 index 36fb845..0000000 --- a/src/assets/main.css +++ /dev/null @@ -1,35 +0,0 @@ -@import './base.css'; - -#app { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - font-weight: normal; -} - -a, -.green { - text-decoration: none; - color: hsla(160, 100%, 37%, 1); - transition: 0.4s; - padding: 3px; -} - -@media (hover: hover) { - a:hover { - background-color: hsla(160, 100%, 37%, 0.2); - } -} - -@media (min-width: 1024px) { - body { - display: flex; - place-items: center; - } - - #app { - display: grid; - grid-template-columns: 1fr 1fr; - padding: 0 2rem; - } -} diff --git a/src/assets/primevue/accordion.css b/src/assets/primevue/accordion.css new file mode 100644 index 0000000..24b195a --- /dev/null +++ b/src/assets/primevue/accordion.css @@ -0,0 +1,64 @@ +.p-accordionpanel { + @apply flex flex-col border-b border-surface-200 dark:border-surface-700; +} + +.p-accordionheader { + @apply cursor-pointer disabled:cursor-auto flex items-center justify-between p-[1.125rem] font-semibold + bg-surface-0 dark:bg-surface-900 + text-surface-500 dark:text-surface-400 + transition-colors duration-200; +} + +.p-accordionpanel:first-child > .p-accordionheader { + @apply rounded-ss-md rounded-se-md; +} + +.p-accordionpanel:last-child > .p-accordionheader { + @apply rounded-ee-md rounded-es-md; +} + +.p-accordionpanel:last-child.p-accordionpanel-active > .p-accordionheader { + @apply rounded-ee-md rounded-es-md; +} + +.p-accordionheader-toggle-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-accordionpanel:not(.p-disabled) .p-accordionheader:focus-visible { + @apply outline outline-1 outline-offset-[-1px] outline-primary; +} + +.p-accordionpanel:not(.p-accordionpanel-active):not(.p-disabled) > .p-accordionheader:hover { + @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0; +} + +.p-accordionpanel:not(.p-accordionpanel-active):not(.p-disabled) + .p-accordionheader:hover + .p-accordionheader-toggle-icon { + @apply text-surface-700 dark:text-surface-0; +} + +.p-accordionpanel:not(.p-disabled).p-accordionpanel-active > .p-accordionheader { + @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0; +} + +.p-accordionpanel:not(.p-disabled).p-accordionpanel-active + > .p-accordionheader + .p-accordionheader-toggle-icon { + @apply text-surface-700 dark:text-surface-0; +} + +.p-accordionpanel:not(.p-disabled).p-accordionpanel-active > .p-accordionheader:hover { + @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0; +} + +.p-accordionpanel:not(.p-disabled).p-accordionpanel-active + > .p-accordionheader:hover + .p-accordionheader-toggle-icon { + @apply text-surface-700 dark:text-surface-0; +} + +.p-accordioncontent-content { + @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0 pt-0 px-[1.125rem] pb-[1.125rem]; +} diff --git a/src/assets/primevue/autocomplete.css b/src/assets/primevue/autocomplete.css new file mode 100644 index 0000000..f79f452 --- /dev/null +++ b/src/assets/primevue/autocomplete.css @@ -0,0 +1,143 @@ +@import './inputtext'; +@import './chip'; + +.p-autocomplete { + @apply inline-flex; +} + +.p-autocomplete.p-disabled { + @apply opacity-100; +} + +.p-autocomplete-loader { + @apply absolute top-1/2 -mt-2 end-3; +} + +.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-loader { + @apply end-[3.25rem]; +} + +.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input { + @apply flex-auto w-[1%]; +} + +.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input, +.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input-multiple { + @apply rounded-e-none; +} + +.p-autocomplete-dropdown { + @apply cursor-pointer inline-flex items-center justify-center select-none overflow-hidden relative w-10 rounded-e-md + bg-surface-100 enabled:hover:bg-surface-200 enabled:active:bg-surface-300 + text-surface-600 enabled:hover:text-surface-700 enabled:hover:active:text-surface-800 + dark:bg-surface-800 dark:enabled:hover:bg-surface-700 dark:enabled:active:bg-surface-600 + dark:text-surface-300 dark:enabled:hover:text-surface-200 dark:enabled:active:text-surface-100 + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary + transition-colors duration-200; +} + +.p-autocomplete .p-autocomplete-overlay { + @apply min-w-full; +} + +.p-autocomplete-overlay { + @apply absolute top-0 left-0 rounded-md + bg-surface-0 dark:bg-surface-900 + border border-surface-200 dark:border-surface-700 + text-surface-700 dark:text-surface-0 + shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]; +} + +.p-autocomplete-list-container { + @apply overflow-auto; +} + +.p-autocomplete-list { + @apply m-0 p-1 list-none flex flex-col gap-[2px]; +} + +.p-autocomplete-option { + @apply cursor-pointer whitespace-nowrap relative overflow-hidden flex items-center px-3 py-2 rounded-sm + text-surface-700 dark:text-surface-0 bg-transparent border-none + transition-colors duration-200; +} + +.p-autocomplete-option:not(.p-autocomplete-option-selected):not(.p-disabled).p-focus { + @apply bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-0; +} + +.p-autocomplete-option-selected { + @apply bg-highlight; +} + +.p-autocomplete-option-selected.p-focus { + @apply bg-highlight-emphasis; +} + +.p-autocomplete-option-group { + @apply m-0 px-3 py-2 text-surface-500 dark:text-surface-400 font-semibold bg-transparent; +} + +.p-autocomplete-input-multiple { + @apply m-0 list-none cursor-text overflow-hidden flex items-center flex-wrap + px-3 py-1 gap-1 text-surface-700 dark:text-surface-0 bg-surface-0 dark:bg-surface-950 + border border-surface-300 dark:border-surface-700 rounded-md w-full + shadow-[0_1px_2px_0_rgba(18,18,23,0.05)] + transition-colors duration-200 outline-none; +} + +.p-autocomplete:not(.p-disabled):hover .p-autocomplete-input-multiple { + @apply border-surface-400 dark:border-surface-600; +} + +.p-autocomplete:not(.p-disabled).p-focus .p-autocomplete-input-multiple { + @apply border-primary; +} + +.p-autocomplete.p-invalid .p-autocomplete-input-multiple { + @apply border-red-400 dark:border-red-300; +} + +.p-variant-filled.p-autocomplete-input-multiple { + @apply bg-surface-50 dark:bg-surface-800; +} + +.p-autocomplete.p-disabled .p-autocomplete-input-multiple { + @apply opacity-100 cursor-default bg-surface-200 text-surface-500 dark:bg-surface-700 dark:text-surface-400; +} + +.p-autocomplete-chip.p-chip { + @apply py-1 rounded-sm; +} + +.p-autocomplete-input-multiple:has(.p-autocomplete-chip) { + @apply px-1; +} + +.p-autocomplete-chip-item.p-focus .p-autocomplete-chip { + @apply bg-surface-200 text-surface-800 dark:bg-surface-700 dark:text-surface-0; +} + +.p-autocomplete-input-chip { + @apply flex-auto inline-flex py-1; +} + +.p-autocomplete-input-chip input { + @apply border-none outline-none bg-transparent m-0 p-0 shadow-none rounded-none w-full text-inherit; +} + +.p-autocomplete-input-chip input::placeholder { + @apply text-surface-500 dark:text-surface-400; +} + +.p-autocomplete-empty-message { + @apply px-3 py-2; +} + +.p-autocomplete-fluid { + @apply flex; +} + +.p-autocomplete-fluid:has(.p-autocomplete-dropdown) .p-autocomplete-input { + @apply w-[1%]; +} diff --git a/src/assets/primevue/avatar.css b/src/assets/primevue/avatar.css new file mode 100644 index 0000000..3cf87b0 --- /dev/null +++ b/src/assets/primevue/avatar.css @@ -0,0 +1,50 @@ +.p-avatar { + @apply inline-flex items-center justify-center + w-8 h-8 text-base rounded-md + bg-surface-200 dark:bg-surface-700; +} + +.p-avatar-image { + @apply bg-transparent; +} + +.p-avatar-circle, +.p-avatar-circle img { + @apply rounded-full; +} + +.p-avatar-icon { + @apply text-base; +} + +.p-avatar img { + @apply w-full h-full; +} + +.p-avatar-lg { + @apply w-12 h-12 text-2xl; +} + +.p-avatar-lg .p-avatar-icon { + @apply text-2xl; +} + +.p-avatar-xl { + @apply w-16 h-16 text-[2rem]; +} + +.p-avatar-xl .p-avatar-icon { + @apply text-[2rem]; +} + +.p-avatar-group { + @apply flex items-center; +} + +.p-avatar-group .p-avatar + .p-avatar { + @apply -ms-4; +} + +.p-avatar-group .p-avatar { + @apply border-2 border-surface-200 dark:border-surface-700; +} diff --git a/src/assets/primevue/badge.css b/src/assets/primevue/badge.css new file mode 100644 index 0000000..0f78c56 --- /dev/null +++ b/src/assets/primevue/badge.css @@ -0,0 +1,49 @@ +.p-badge { + @apply inline-flex items-center justify-center rounded-md + py-0 px-2 text-xs font-bold min-w-6 h-6 + bg-primary text-primary-contrast; +} + +.p-badge-dot { + @apply min-w-2 h-2 rounded-full p-0; +} + +.p-badge-circle { + @apply p-0 rounded-full; +} + +.p-badge-secondary { + @apply bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-300; +} + +.p-badge-success { + @apply bg-green-500 dark:bg-green-400 text-white dark:text-green-950; +} + +.p-badge-info { + @apply bg-sky-500 dark:bg-sky-400 text-white dark:text-sky-950; +} + +.p-badge-warn { + @apply bg-orange-500 dark:bg-orange-400 text-white dark:text-orange-950; +} + +.p-badge-danger { + @apply bg-red-500 dark:bg-red-400 text-white dark:text-red-950; +} + +.p-badge-contrast { + @apply bg-surface-950 dark:bg-white text-white dark:text-surface-950; +} + +.p-badge-sm { + @apply text-[0.625rem] min-w-5 h-5; +} + +.p-badge-lg { + @apply text-sm min-w-7 h-7; +} + +.p-badge-xl { + @apply text-base min-w-8 h-8; +} diff --git a/src/assets/primevue/blockui.css b/src/assets/primevue/blockui.css new file mode 100644 index 0000000..36adade --- /dev/null +++ b/src/assets/primevue/blockui.css @@ -0,0 +1,15 @@ +.p-blockui { + @apply relative; +} + +.p-blockui-mask { + @apply rounded-md; +} + +.p-blockui-mask.p-overlay-mask { + @apply absolute; +} + +.p-blockui-mask-document.p-overlay-mask { + @apply fixed; +} diff --git a/src/assets/primevue/breadcrumb.css b/src/assets/primevue/breadcrumb.css new file mode 100644 index 0000000..3c80fff --- /dev/null +++ b/src/assets/primevue/breadcrumb.css @@ -0,0 +1,41 @@ +.p-breadcrumb { + @apply bg-surface-0 dark:bg-surface-900 p-4 overflow-x-auto; +} + +.p-breadcrumb-list { + @apply m-0 p-0 list-none flex items-center flex-nowrap gap-2; +} + +.p-breadcrumb-separator { + @apply flex items-center text-surface-400 dark:text-surface-500; +} + +.p-breadcrumb-separator-icon:dir(rtl) { + @apply rotate-180; +} + +.p-breadcrumb::-webkit-scrollbar { + @apply hidden; +} + +.p-breadcrumb-item-link { + @apply no-underline flex items-center gap-2 transition-colors duration-200 rounded-md + text-surface-500 dark:text-surface-400 + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary; +} + +.p-breadcrumb-item-link:hover .p-breadcrumb-item-label { + @apply text-surface-700 dark:text-surface-0; +} + +.p-breadcrumb-item-label { + @apply transition-colors duration-200; +} + +.p-breadcrumb-item-icon { + @apply text-surface-400 dark:text-surface-500 transition-colors duration-200; +} + +.p-breadcrumb-item-link:hover .p-breadcrumb-item-icon { + @apply text-surface-500 dark:text-surface-400; +} diff --git a/src/assets/primevue/button.css b/src/assets/primevue/button.css new file mode 100644 index 0000000..e66647d --- /dev/null +++ b/src/assets/primevue/button.css @@ -0,0 +1,333 @@ +@import './badge'; + +.p-button { + @apply inline-flex cursor-pointer select-none items-center justify-center overflow-hidden relative + bg-primary enabled:hover:bg-primary-emphasis enabled:active:bg-primary-emphasis-alt text-primary-contrast + border border-primary enabled:hover:border-primary-emphasis enabled:active:border-primary-emphasis-alt + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary + px-3 py-2 transition-colors duration-200 gap-2 rounded-md + disabled:cursor-default; +} + +.p-button-icon-right { + @apply order-1; +} + +.p-button-icon-right:dir(rtl) { + @apply order-[-1]; +} + +.p-button:not(.p-button-vertical) .p-button-icon:not(.p-button-icon-right):dir(rtl) { + @apply order-1; +} + +.p-button-icon-bottom { + @apply order-2; +} + +.p-button-icon-only { + @apply w-10 px-0 gap-0; +} + +.p-button-icon-only.p-button-rounded { + @apply rounded-full h-10; +} + +.p-button-icon-only .p-button-label { + @apply invisible w-0; +} + +.p-button-sm { + @apply text-sm px-[0.625rem] py-[0.375rem]; +} + +.p-button-sm .p-button-icon { + @apply text-sm; +} + +.p-button-lg { + @apply text-[1.125rem] px-[0.875rem] py-[0.625rem]; +} + +.p-button-lg .p-button-icon { + @apply text-[1.125rem]; +} + +.p-button-vertical { + @apply flex-col; +} + +.p-button-label { + @apply font-medium; +} + +.p-button-fluid { + @apply w-full; +} + +.p-button-fluid.p-button-icon-only { + @apply w-10; +} + +.p-button .p-badge { + @apply min-w-4 h-4 leading-4; +} + +.p-button-raised { + @apply shadow-[0_3px_1px_-2px_rgba(0,0,0,0.2),0_2px_2px_0_rgba(0,0,0,0.14),0_1px_5px_0_rgba(0,0,0,0.12)]; +} + +.p-button-rounded { + @apply rounded-[2rem]; +} + +.p-button-secondary { + @apply bg-surface-100 enabled:hover:bg-surface-200 enabled:active:bg-surface-300 + border-surface-100 enabled:hover:border-surface-200 enabled:active:border-surface-300 + text-surface-600 enabled:hover:text-surface-700 enabled:active:text-surface-800 + dark:bg-surface-800 dark:enabled:hover:bg-surface-700 dark:enabled:active:bg-surface-600 + dark:border-surface-800 dark:enabled:hover:border-surface-700 dark:enabled:active:border-surface-600 + dark:text-surface-300 dark:enabled:hover:text-surface-200 dark:enabled:active:text-surface-100 + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 + focus-visible:outline-surface-600 dark:focus-visible:outline-surface-300; +} + +.p-button-success { + @apply bg-green-500 enabled:hover:bg-green-600 enabled:active:bg-green-700 + border-green-500 enabled:hover:border-green-600 enabled:active:border-green-700 + text-white enabled:hover:text-white enabled:active:text-white + dark:bg-green-400 dark:enabled:hover:bg-green-300 dark:enabled:active:bg-green-200 + dark:border-green-400 dark:enabled:hover:border-green-300 dark:enabled:active:border-green-200 + dark:text-green-950 dark:enabled:hover:text-green-950 dark:enabled:active:text-green-950 + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 + focus-visible:outline-green-500 dark:focus-visible:outline-green-400; +} + +.p-button-info { + @apply bg-sky-500 enabled:hover:bg-sky-600 enabled:active:bg-sky-700 + border-sky-500 enabled:hover:border-sky-600 enabled:active:border-sky-700 + text-white enabled:hover:text-white enabled:active:text-white + dark:bg-sky-400 dark:enabled:hover:bg-sky-300 dark:enabled:active:bg-sky-200 + dark:border-sky-400 dark:enabled:hover:border-sky-300 dark:enabled:active:border-sky-200 + dark:text-sky-950 dark:enabled:hover:text-sky-950 dark:enabled:active:text-sky-950 + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 + focus-visible:outline-sky-500 dark:focus-visible:outline-sky-400; +} + +.p-button-warn { + @apply bg-orange-500 enabled:hover:bg-orange-600 enabled:active:bg-orange-700 + border-orange-500 enabled:hover:border-orange-600 enabled:active:border-orange-700 + text-white enabled:hover:text-white enabled:active:text-white + dark:bg-orange-400 dark:enabled:hover:bg-orange-300 dark:enabled:active:bg-orange-200 + dark:border-orange-400 dark:enabled:hover:border-orange-300 dark:enabled:active:border-orange-200 + dark:text-orange-950 dark:enabled:hover:text-orange-950 dark:enabled:active:text-orange-950 + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 + focus-visible:outline-orange-500 dark:focus-visible:outline-orange-400; +} + +.p-button-help { + @apply bg-purple-500 enabled:hover:bg-purple-600 enabled:active:bg-purple-700 + border-purple-500 enabled:hover:border-purple-600 enabled:active:border-purple-700 + text-white enabled:hover:text-white enabled:active:text-white + dark:bg-purple-400 dark:enabled:hover:bg-purple-300 dark:enabled:active:bg-purple-200 + dark:border-purple-400 dark:enabled:hover:border-purple-300 dark:enabled:active:border-purple-200 + dark:text-purple-950 dark:enabled:hover:text-purple-950 dark:enabled:active:text-purple-950 + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 + focus-visible:outline-purple-500 dark:focus-visible:outline-purple-400; +} + +.p-button-help { + @apply bg-purple-500 enabled:hover:bg-purple-600 enabled:active:bg-purple-700 + border-purple-500 enabled:hover:border-purple-600 enabled:active:border-purple-700 + text-white enabled:hover:text-white enabled:active:text-white + dark:bg-purple-400 dark:enabled:hover:bg-purple-300 dark:enabled:active:bg-purple-200 + dark:border-purple-400 dark:enabled:hover:border-purple-300 dark:enabled:active:border-purple-200 + dark:text-purple-950 dark:enabled:hover:text-purple-950 dark:enabled:active:text-purple-950 + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 + focus-visible:outline-purple-500 dark:focus-visible:outline-purple-400; +} + +.p-button-danger { + @apply bg-red-500 enabled:hover:bg-red-600 enabled:active:bg-red-700 + border-red-500 enabled:hover:border-red-600 enabled:active:border-red-700 + text-white enabled:hover:text-white enabled:active:text-white + dark:bg-red-400 dark:enabled:hover:bg-red-300 dark:enabled:active:bg-red-200 + dark:border-red-400 dark:enabled:hover:border-red-300 dark:enabled:active:border-red-200 + dark:text-red-950 dark:enabled:hover:text-red-950 dark:enabled:active:text-red-950 + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 + focus-visible:outline-red-500 dark:focus-visible:outline-red-400; +} + +.p-button-contrast { + @apply bg-surface-950 enabled:hover:bg-surface-900 enabled:active:bg-surface-800 + border-surface-950 enabled:hover:border-surface-900 enabled:active:border-surface-800 + text-white enabled:hover:text-white enabled:active:text-white + dark:bg-surface-0 dark:enabled:hover:bg-surface-100 dark:enabled:active:bg-surface-200 + dark:border-surface-100 dark:enabled:hover:border-surface-200 dark:enabled:active:border-surface-300 + dark:text-surface-950 dark:enabled:hover:text-surface-950 dark:enabled:active:text-surface-950 + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 + focus-visible:outline-surface-950 dark:focus-visible:outline-surface-0; +} + +.p-button-outlined { + @apply bg-transparent enabled:hover:bg-primary-50 enabled:active:bg-primary-100 + border-primary-200 enabled:hover:border-primary-200 enabled:active:border-primary-200 + text-primary enabled:hover:text-primary enabled:active:text-primary + dark:bg-transparent dark:enabled:hover:bg-primary/5 dark:enabled:active:bg-primary/15 + dark:border-primary-700 dark:enabled:hover:border-primary-700 dark:enabled:active:border-primary-700 + dark:text-primary dark:enabled:hover:text-primary dark:enabled:active:text-primary; +} + +.p-button-outlined.p-button-secondary { + @apply bg-transparent enabled:hover:bg-surface-50 enabled:active:bg-surface-100 + border-surface-200 enabled:hover:border-surface-200 enabled:active:border-surface-200 + text-surface-500 enabled:hover:text-surface-500 enabled:active:text-surface-500 + dark:bg-transparent dark:enabled:hover:bg-white/5 dark:enabled:active:bg-white/15 + dark:border-surface-700 dark:enabled:hover:border-surface-700 dark:enabled:active:border-surface-700 + dark:text-surface-400 dark:enabled:hover:text-surface-400 dark:enabled:active:text-surface-400; +} + +.p-button-outlined.p-button-success { + @apply bg-transparent enabled:hover:bg-green-50 enabled:active:bg-green-100 + border-green-200 enabled:hover:border-green-200 enabled:active:border-green-200 + text-green-500 enabled:hover:text-green-500 enabled:active:text-green-500 + dark:bg-transparent dark:enabled:hover:bg-green-400/5 dark:enabled:active:bg-green-400/15 + dark:border-green-700 dark:enabled:hover:border-green-700 dark:enabled:active:border-green-700 + dark:text-green-400 dark:enabled:hover:text-green-400 dark:enabled:active:text-green-400; +} + +.p-button-outlined.p-button-info { + @apply bg-transparent enabled:hover:bg-sky-50 enabled:active:bg-sky-100 + border-sky-200 enabled:hover:border-sky-200 enabled:active:border-sky-200 + text-sky-500 enabled:hover:text-sky-500 enabled:active:text-sky-500 + dark:bg-transparent dark:enabled:hover:bg-sky-400/5 dark:enabled:active:bg-sky-400/15 + dark:border-sky-700 dark:enabled:hover:border-sky-700 dark:enabled:active:border-sky-700 + dark:text-sky-400 dark:enabled:hover:text-sky-400 dark:enabled:active:text-sky-400; +} + +.p-button-outlined.p-button-warn { + @apply bg-transparent enabled:hover:bg-orange-50 enabled:active:bg-orange-100 + border-orange-200 enabled:hover:border-orange-200 enabled:active:border-orange-200 + text-orange-500 enabled:hover:text-orange-500 enabled:active:text-orange-500 + dark:bg-transparent dark:enabled:hover:bg-orange-400/5 dark:enabled:active:bg-orange-400/15 + dark:border-orange-700 dark:enabled:hover:border-orange-700 dark:enabled:active:border-orange-700 + dark:text-orange-400 dark:enabled:hover:text-orange-400 dark:enabled:active:text-orange-400; +} + +.p-button-outlined.p-button-help { + @apply bg-transparent enabled:hover:bg-purple-50 enabled:active:bg-purple-100 + border-purple-200 enabled:hover:border-purple-200 enabled:active:border-purple-200 + text-purple-500 enabled:hover:text-purple-500 enabled:active:text-purple-500 + dark:bg-transparent dark:enabled:hover:bg-purple-400/5 dark:enabled:active:bg-purple-400/15 + dark:border-purple-700 dark:enabled:hover:border-purple-700 dark:enabled:active:border-purple-700 + dark:text-purple-400 dark:enabled:hover:text-purple-400 dark:enabled:active:text-purple-400; +} + +.p-button-outlined.p-button-danger { + @apply bg-transparent enabled:hover:bg-red-50 enabled:active:bg-red-100 + border-red-200 enabled:hover:border-red-200 enabled:active:border-red-200 + text-red-500 enabled:hover:text-red-500 enabled:active:text-red-500 + dark:bg-transparent dark:enabled:hover:bg-red-400/5 dark:enabled:active:bg-red-400/15 + dark:border-red-700 dark:enabled:hover:border-red-700 dark:enabled:active:border-red-700 + dark:text-red-400 dark:enabled:hover:text-red-400 dark:enabled:active:text-red-400; +} + +.p-button-outlined.p-button-contrast { + @apply bg-transparent enabled:hover:bg-surface-50 enabled:active:bg-surface-100 + border-surface-700 enabled:hover:border-surface-700 enabled:active:border-surface-700 + text-surface-950 enabled:hover:text-surface-950 enabled:active:text-surface-950 + dark:bg-transparent dark:enabled:hover:bg-surface-800 dark:enabled:active:bg-surface-700 + dark:border-surface-500 dark:enabled:hover:border-surface-500 dark:enabled:active:border-surface-500 + dark:text-surface-0 dark:enabled:hover:text-surface-0 dark:enabled:active:text-surface-0; +} + +.p-button-outlined.p-button-plain { + @apply bg-transparent enabled:hover:bg-surface-50 enabled:active:bg-surface-100 + border-surface-200 enabled:hover:border-surface-200 enabled:active:border-surface-200 + text-surface-700 enabled:hover:text-surface-700 enabled:active:text-surface-700 + dark:bg-transparent dark:enabled:hover:bg-surface-800 dark:enabled:active:bg-surface-700 + dark:border-surface-600 dark:enabled:hover:border-surface-600 dark:enabled:active:border-surface-600 + dark:text-surface-0 dark:enabled:hover:text-surface-0 dark:enabled:active:text-surface-0; +} + +.p-button-text { + @apply bg-transparent enabled:hover:bg-primary-50 enabled:active:bg-primary-100 + border-transparent enabled:hover:border-transparent enabled:active:border-transparent + text-primary enabled:hover:text-primary enabled:active:text-primary + dark:bg-transparent dark:enabled:hover:bg-primary/5 dark:enabled:active:bg-primary/15 + dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent + dark:text-primary dark:enabled:hover:text-primary dark:enabled:active:text-primary; +} + +.p-button-text.p-button-secondary { + @apply bg-transparent enabled:hover:bg-surface-50 enabled:active:bg-surface-100 + border-transparent enabled:hover:border-transparent enabled:active:border-transparent + text-surface-500 enabled:hover:text-surface-500 enabled:active:text-surface-500 + dark:bg-transparent dark:enabled:hover:bg-surface-800 dark:enabled:active:bg-surface-700 + dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent + dark:text-surface-400 dark:enabled:hover:text-surface-400 dark:enabled:active:text-surface-400; +} + +.p-button-text.p-button-success { + @apply bg-transparent enabled:hover:bg-green-50 enabled:active:bg-green-100 + border-transparent enabled:hover:border-transparent enabled:active:border-transparent + text-green-500 enabled:hover:text-green-500 enabled:active:text-green-500 + dark:bg-transparent dark:enabled:hover:bg-green-400/5 dark:enabled:active:bg-green-400/15 + dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent + dark:text-green-400 dark:enabled:hover:text-green-400 dark:enabled:active:text-green-400; +} + +.p-button-text.p-button-info { + @apply bg-transparent enabled:hover:bg-sky-50 enabled:active:bg-sky-100 + border-transparent enabled:hover:border-transparent enabled:active:border-transparent + text-sky-500 enabled:hover:text-sky-500 enabled:active:text-sky-500 + dark:bg-transparent dark:enabled:hover:bg-sky-400/5 dark:enabled:active:bg-sky-400/15 + dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent + dark:text-sky-400 dark:enabled:hover:text-sky-400 dark:enabled:active:text-sky-400; +} + +.p-button-text.p-button-warn { + @apply bg-transparent enabled:hover:bg-orange-50 enabled:active:bg-orange-100 + border-transparent enabled:hover:border-transparent enabled:active:border-transparent + text-orange-500 enabled:hover:text-orange-500 enabled:active:text-orange-500 + dark:bg-transparent dark:enabled:hover:bg-orange-400/5 dark:enabled:active:bg-orange-400/15 + dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent + dark:text-orange-400 dark:enabled:hover:text-orange-400 dark:enabled:active:text-orange-400; +} + +.p-button-text.p-button-help { + @apply bg-transparent enabled:hover:bg-purple-50 enabled:active:bg-purple-100 + border-transparent enabled:hover:border-transparent enabled:active:border-transparent + text-purple-500 enabled:hover:text-purple-500 enabled:active:text-purple-500 + dark:bg-transparent dark:enabled:hover:bg-purple-400/5 dark:enabled:active:bg-purple-400/15 + dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent + dark:text-purple-400 dark:enabled:hover:text-purple-400 dark:enabled:active:text-purple-400; +} + +.p-button-text.p-button-danger { + @apply bg-transparent enabled:hover:bg-red-50 enabled:active:bg-red-100 + border-transparent enabled:hover:border-transparent enabled:active:border-transparent + text-red-500 enabled:hover:text-red-500 enabled:active:text-red-500 + dark:bg-transparent dark:enabled:hover:bg-red-400/5 dark:enabled:active:bg-red-400/15 + dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent + dark:text-red-400 dark:enabled:hover:text-red-400 dark:enabled:active:text-red-400; +} + +.p-button-text.p-button-plain { + @apply bg-transparent enabled:hover:bg-surface-50 enabled:active:bg-surface-100 + border-transparent enabled:hover:border-transparent enabled:active:border-transparent + text-surface-700 enabled:hover:text-surface-700 enabled:active:text-surface-700 + dark:bg-transparent dark:enabled:hover:bg-surface-800 dark:enabled:active:bg-surface-700 + dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent + dark:text-surface-0 dark:enabled:hover:text-surface-0 dark:enabled:active:text-surface-0; +} + +.p-button-link { + @apply bg-transparent enabled:hover:bg-transparent enabled:active:bg-transparent + border-transparent enabled:hover:border-transparent enabled:active:border-transparent + text-primary enabled:hover:text-primary enabled:active:text-primary; +} + +.p-button-link:not(:disabled):hover .p-button-label { + @apply underline; +} diff --git a/src/assets/primevue/buttongroup.css b/src/assets/primevue/buttongroup.css new file mode 100644 index 0000000..a3404df --- /dev/null +++ b/src/assets/primevue/buttongroup.css @@ -0,0 +1,19 @@ +.p-buttongroup .p-button { + @apply m-0 focus-visible:relative focus-visible:z-10; +} + +.p-buttongroup .p-button:not(:last-child) { + @apply border-r-0; +} + +.p-buttongroup .p-button:not(:first-of-type):not(:last-of-type) { + @apply rounded-none; +} + +.p-buttongroup .p-button:first-of-type:not(:only-of-type) { + @apply rounded-e-none; +} + +.p-buttongroup .p-button:last-of-type:not(:only-of-type) { + @apply rounded-s-none; +} diff --git a/src/assets/primevue/card.css b/src/assets/primevue/card.css new file mode 100644 index 0000000..79dd181 --- /dev/null +++ b/src/assets/primevue/card.css @@ -0,0 +1,22 @@ +.p-card { + @apply flex flex-col rounded-xl + bg-surface-0 dark:bg-surface-900 + text-surface-700 dark:text-surface-0 + shadow-[0_1px_3px_0_rgba(0,0,0,0.1),0_1px_2px_-1px_rgba(0,0,0,0.1)]; +} + +.p-card-caption { + @apply flex flex-col gap-2; +} + +.p-card-body { + @apply p-5 flex flex-col gap-2; +} + +.p-card-title { + @apply font-medium text-xl; +} + +.p-card-subtitle { + @apply text-surface-500 dark:text-surface-400; +} diff --git a/src/assets/primevue/carousel.css b/src/assets/primevue/carousel.css new file mode 100644 index 0000000..aabc15c --- /dev/null +++ b/src/assets/primevue/carousel.css @@ -0,0 +1,64 @@ +@import './button'; + +.p-carousel { + @apply flex flex-col; +} + +.p-carousel-content-container { + @apply flex flex-col overflow-auto; +} + +.p-carousel-content { + @apply flex flex-row gap-1; +} + +.p-carousel-content:dir(rtl) { + @apply flex-row-reverse; +} + +.p-carousel-viewport { + @apply overflow-hidden w-full; +} + +.p-carousel-item-list { + @apply flex flex-row; +} + +.p-carousel-prev-button, +.p-carousel-next-button { + @apply self-center flex-shrink-0; +} + +.p-carousel-indicator-list { + @apply flex flex-row justify-center flex-wrap p-4 gap-2 m-0 list-none; +} + +.p-carousel-indicator-list:dir(rtl) { + @apply rtl:flex-row-reverse; +} + +.p-carousel-indicator-button { + @apply flex items-center justify-center w-8 h-2 border-none rounded-md p-0 m-0 select-none cursor-pointer transition-colors duration-200 + bg-surface-200 hover:bg-surface-300 dark:bg-surface-700 dark:hover:bg-surface-600 + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary; +} + +.p-carousel-indicator-active .p-carousel-indicator-button { + @apply bg-primary; +} + +.p-carousel-vertical .p-carousel-content { + @apply flex-col; +} + +.p-carousel-vertical .p-carousel-item-list { + @apply flex-col h-full; +} + +.p-items-hidden .p-carousel-item { + @apply invisible; +} + +.p-items-hidden .p-carousel-item.p-carousel-item-active { + @apply visible; +} diff --git a/src/assets/primevue/cascadeselect.css b/src/assets/primevue/cascadeselect.css new file mode 100644 index 0000000..066e370 --- /dev/null +++ b/src/assets/primevue/cascadeselect.css @@ -0,0 +1,177 @@ +.p-cascadeselect { + @apply inline-flex cursor-pointer relative select-none rounded-md + bg-surface-0 dark:bg-surface-950 + border border-surface-300 dark:border-surface-700 + shadow-[0_1px_2px_0_rgba(18,18,23,0.05)] + transition-colors duration-200; +} + +.p-cascadeselect:not(.p-disabled):hover { + @apply border-surface-400 dark:border-surface-600; +} + +.p-cascadeselect:not(.p-disabled).p-focus { + @apply border-primary; +} + +.p-cascadeselect.p-variant-filled { + @apply bg-surface-50 dark:bg-surface-800; +} + +.p-cascadeselect.p-invalid { + @apply border-red-400 dark:border-red-300; +} + +.p-cascadeselect.p-disabled { + @apply bg-surface-200 text-surface-500 dark:bg-surface-700 dark:text-surface-400 opacity-100 cursor-default; +} + +.p-cascadeselect-dropdown { + @apply flex items-center justify-center shrink-0 bg-transparent + text-surface-500 dark:text-surface-400 w-10 rounded-e-md; +} + +.p-cascadeselect-clear-icon { + @apply absolute top-1/2 -mt-2 text-surface-500 dark:text-surface-400 end-10; +} + +.p-cascadeselect-label { + @apply block whitespace-nowrap overflow-hidden flex-auto w-[1%] + py-2 px-3 overflow-ellipsis + text-surface-700 dark:text-surface-0 bg-transparent border-none outline-none; +} + +.p-cascadeselect-label.p-placeholder { + @apply text-surface-500 dark:text-surface-400; +} + +.p-cascadeselect.p-disabled .p-cascadeselect-label { + @apply text-surface-500 dark:text-surface-400; +} + +.p-cascadeselect-label-empty { + @apply overflow-hidden opacity-0; +} + +.p-cascadeselect-fluid { + @apply flex; +} + +.p-cascadeselect-fluid .p-cascadeselect-label { + @apply w-[1%]; +} + +.p-cascadeselect-overlay { + @apply absolute top-0 left-0 rounded-md + bg-surface-0 dark:bg-surface-900 + border border-surface-200 dark:border-surface-700 + text-surface-700 dark:text-surface-0 + shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]; +} + +.p-cascadeselect .p-cascadeselect-overlay { + @apply min-w-full; +} + +.p-cascadeselect-option-list { + @apply hidden min-w-full absolute z-10; +} + +.p-cascadeselect-list { + @apply min-w-full m-0 list-none p-1 flex flex-col gap-[2px]; +} + +.p-cascadeselect-option { + @apply cursor-pointer font-normal whitespace-nowrap + text-surface-700 dark:text-surface-0 bg-transparent border-none + transition-colors duration-200 rounded-sm; +} + +.p-cascadeselect-option-active { + @apply overflow-visible; +} + +.p-cascadeselect-option-active > .p-cascadeselect-option-content { + @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0; +} + +.p-cascadeselect-option:not(.p-cascadeselect-option-selected):not(.p-disabled).p-focus + > .p-cascadeselect-option-content { + @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0; +} + +.p-cascadeselect-option:not(.p-cascadeselect-option-selected):not(.p-disabled).p-focus + .p-cascadeselect-group-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-cascadeselect-option-selected .p-cascadeselect-option-content { + @apply bg-highlight; +} + +.p-cascadeselect-option-selected.p-focus { + @apply bg-highlight-emphasis; +} + +.p-cascadeselect-option-active > .p-cascadeselect-option-list { + @apply block start-full top-0; +} + +.p-cascadeselect-option-content { + @apply flex items-center justify-between overflow-hidden relative px-3 py-2; +} + +.p-cascadeselect-group-icon { + @apply text-sm w-[0.875rem] h-[0.875rem] text-surface-400 dark:text-surface-500; +} + +.p-cascadeselect-group-icon:dir(rtl) { + @apply rotate-180; +} + +.p-cascadeselect-mobile-active .p-cascadeselect-option-content { + @apply rounded-sm; +} + +.p-cascadeselect-mobile-active-active .p-cascadeselect-list { + @apply flex flex-col top-full start-0 z-10; +} + +.p-cascadeselect-mobile-active + .p-cascadeselect-list + > .p-cascadeselect-option + > .p-cascadeselect-option-content + .p-cascadeselect-group-icon { + @apply ms-auto transition-transform duration-200; +} + +.p-cascadeselect-mobile-active .p-cascadeselect-list .p-cascadeselect-group-icon { + @apply transition-transform duration-200 rotate-90; +} + +.p-cascadeselect-mobile-active + .p-cascadeselect-option-active + > .p-cascadeselect-option-content + .p-cascadeselect-group-icon { + @apply -rotate-90; +} + +.p-cascadeselect-mobile-active .p-cascadeselect-option-list { + @apply static shadow-none border-none ps-4; +} + +.p-cascadeselect-sm .p-cascadeselect-label { + @apply text-sm px-[0.625rem] py-[0.375rem]; +} + +.p-cascadeselect-sm .p-cascadeselect-dropdown .p-icon { + @apply text-sm w-[0.875rem] h-[0.875rem]; +} + +.p-cascadeselect-lg .p-cascadeselect-label { + @apply text-lg px-[0.875rem] py-[0.625rem]; +} + +.p-cascadeselect-lg .p-cascadeselect-dropdown .p-icon { + @apply text-lg w-[1.125rem] h-[1.125rem]; +} diff --git a/src/assets/primevue/checkbox.css b/src/assets/primevue/checkbox.css new file mode 100644 index 0000000..07c300b --- /dev/null +++ b/src/assets/primevue/checkbox.css @@ -0,0 +1,84 @@ +.p-checkbox { + @apply relative inline-flex select-none w-5 h-5 align-bottom; +} + +.p-checkbox-input { + @apply cursor-pointer disabled:cursor-default appearance-none absolute start-0 top-0 w-full h-full m-0 p-0 opacity-0 z-10 + border border-transparent rounded-sm; +} + +.p-checkbox-box { + @apply flex justify-center items-center rounded-sm w-5 h-5 + border border-surface-300 dark:border-surface-700 + bg-surface-0 dark:bg-surface-950 + transition-colors duration-200 + shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]; +} + +.p-checkbox-icon { + @apply text-surface-700 dark:text-surface-0 + text-sm w-[0.875rem] h-[0.875rem] + transition-colors duration-200; +} + +.p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + @apply border-surface-400 dark:border-surface-600; +} + +.p-checkbox-checked .p-checkbox-box { + @apply border-primary bg-primary; +} + +.p-checkbox-checked .p-checkbox-icon { + @apply text-primary-contrast; +} + +.p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + @apply bg-primary-emphasis border-primary-emphasis; +} + +.p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-icon { + @apply text-primary-contrast; +} + +.p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + @apply outline outline-1 outline-offset-2 outline-primary; +} + +.p-checkbox.p-invalid > .p-checkbox-box { + @apply border-red-400 dark:border-red-300; +} + +.p-checkbox.p-variant-filled .p-checkbox-box { + @apply bg-surface-50 dark:bg-surface-800; +} + +.p-checkbox.p-disabled { + @apply opacity-100; +} + +.p-checkbox.p-disabled .p-checkbox-box { + @apply bg-surface-200 dark:bg-surface-400 border-surface-300 dark:border-surface-700; +} + +.p-checkbox.p-disabled .p-checkbox-box .p-checkbox-icon { + @apply text-surface-700 dark:text-surface-900; +} + +.p-checkbox-sm, +.p-checkbox-sm .p-checkbox-box { + @apply w-4 h-4; +} + +.p-checkbox-sm .p-checkbox-icon { + @apply w-3 h-3; +} + +.p-checkbox-lg, +.p-checkbox-lg .p-checkbox-box { + @apply w-6 h-6; +} + +.p-checkbox-lg .p-checkbox-icon { + @apply w-4 h-4; +} diff --git a/src/assets/primevue/chip.css b/src/assets/primevue/chip.css new file mode 100644 index 0000000..233c422 --- /dev/null +++ b/src/assets/primevue/chip.css @@ -0,0 +1,27 @@ +.p-chip { + @apply inline-flex items-center rounded-2xl gap-2 px-3 py-2 + bg-surface-100 dark:bg-surface-800 + text-surface-800 dark:text-surface-0; +} + +.p-chip-icon { + @apply text-surface-800 dark:bg-surface-0 text-base w-4 h-4; +} + +.p-chip-image { + @apply rounded-full w-8 h-8 -ms-2; +} + +.p-chip:has(.p-chip-remove-icon) { + @apply pe-2; +} + +.p-chip:has(.p-chip-image) { + @apply pt-1 pb-1; +} + +.p-chip-remove-icon { + @apply cursor-pointer text-base w-4 h-4 rounded-full + text-surface-800 dark:text-surface-0 + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary; +} diff --git a/src/assets/primevue/colorpicker.css b/src/assets/primevue/colorpicker.css new file mode 100644 index 0000000..60a1882 --- /dev/null +++ b/src/assets/primevue/colorpicker.css @@ -0,0 +1,47 @@ +.p-colorpicker { + @apply inline-block relative; +} + +.p-colorpicker-dragging { + @apply cursor-pointer; +} + +.p-colorpicker-preview { + @apply w-6 h-6 p-0 border-none rounded-md transition-colors duration-200 cursor-pointer disabled:cursor-auto + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary; +} + +.p-colorpicker-panel { + @apply bg-surface-800 dark:bg-surface-900 + border border-surface-900 dark:border-surface-700 + rounded-md shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)] + w-[193px] h-[166px] absolute top-0 start-0; +} + +.p-colorpicker-panel-inline { + @apply static shadow-none; +} + +.p-colorpicker-content { + @apply relative; +} + +.p-colorpicker-color-selector { + @apply w-[150px] h-[150px] top-[8px] start-[8px] absolute; +} + +.p-colorpicker-color-background { + @apply w-full h-full bg-[linear-gradient(to_top,#000_0%,rgba(0,0,0,0)_100%),linear-gradient(to_right,#fff_0%,rgba(255,255,255,0)_100%)]; +} + +.p-colorpicker-color-handle { + @apply absolute top-0 start-[150px] rounded-full w-[10px] h-[10px] border border-surface-0 -mt-[5px] me-0 mb-0 -ms-[5px] cursor-pointer opacity-85; +} + +.p-colorpicker-hue { + @apply w-[17px] h-[150px] top-[8px] start-[167px] absolute opacity-85 bg-[linear-gradient(0deg,red_0,#ff0_17%,#0f0_33%,#0ff_50%,#00f_67%,#f0f_83%,red)]; +} + +.p-colorpicker-hue-handle { + @apply absolute top-[150px] start-0 w-[21px] -ms-[2px] -mt-[5px] h-[10px] border-2 opacity-85 border-surface-0 cursor-pointer; +} diff --git a/src/assets/primevue/common.css b/src/assets/primevue/common.css new file mode 100644 index 0000000..0a325b6 --- /dev/null +++ b/src/assets/primevue/common.css @@ -0,0 +1,81 @@ +.p-connected-overlay-enter-from { + @apply opacity-0 scale-y-75; +} + +.p-connected-overlay-leave-to { + @apply opacity-0; +} + +.p-connected-overlay-enter-active { + @apply transition-[opacity,transform] duration-150 ease-[cubic-bezier(0,0,0.2,1)]; +} + +.p-connected-overlay-leave-active { + @apply transition-opacity duration-100 ease-linear; +} + +.p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + @apply max-h-0; +} + +.p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + @apply max-h-[1000px]; +} + +.p-toggleable-content-leave-active { + @apply overflow-hidden transition-[max-height] animate-duration-[450ms] ease-[cubic-bezier(0,1,0,1)]; +} + +.p-toggleable-content-enter-active { + @apply overflow-hidden transition-[max-height] duration-1000 ease-in-out; +} + +.p-disabled, +.p-disabled * { + @apply cursor-default pointer-events-none select-none; +} + +.p-disabled, +.p-component:disabled { + @apply opacity-60; +} + +.pi { + @apply text-base; +} + +.p-icon { + @apply w-4 h-4; +} + +.p-overlay-mask { + @apply bg-black/50 text-surface-200 transition-colors duration-150 fixed top-0 start-0 w-full h-full; +} + +.p-overlay-mask-enter { + animation: p-overlay-mask-enter-animation 150ms forwards; +} + +.p-overlay-mask-leave { + animation: p-overlay-mask-leave-animation 150ms forwards; +} + +@keyframes p-overlay-mask-enter-animation { + from { + background: transparent; + } + to { + background: rgba(0, 0, 0, 0.5); + } +} + +@keyframes p-overlay-mask-leave-animation { + from { + background: rgba(0, 0, 0, 0.5); + } + to { + background: transparent; + } +} diff --git a/src/assets/primevue/confirmdialog.css b/src/assets/primevue/confirmdialog.css new file mode 100644 index 0000000..3b9160c --- /dev/null +++ b/src/assets/primevue/confirmdialog.css @@ -0,0 +1,10 @@ +@import './dialog'; +@import './button'; + +.p-confirmdialog .p-dialog-content { + @apply flex items-center gap-4; +} + +.p-confirmdialog-icon { + @apply text-surface-700 dark:text-surface-0 text-[2rem] h-8 w-8; +} diff --git a/src/assets/primevue/confirmpopup.css b/src/assets/primevue/confirmpopup.css new file mode 100644 index 0000000..fd96600 --- /dev/null +++ b/src/assets/primevue/confirmpopup.css @@ -0,0 +1,66 @@ +@import './button'; + +.p-confirmpopup { + @apply absolute mt-[10px] top-0 left-0 + border border-surface-200 dark:border-surface-700 rounded-md + bg-surface-0 dark:bg-surface-900 + text-surface-700 dark:text-surface-0 + shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)] + before:bottom-full before:left-5 before:h-0 before:w-0 before:absolute before:pointer-events-none + before:border-[10px] before:-ms-[10px] before:border-transparent before:border-b-surface-200 dark:before:border-b-surface-700 + after:bottom-full after:left-5 after:h-0 after:w-0 after:absolute after:pointer-events-none + after:border-[8px] after:-ms-[8px] after:border-transparent after:border-b-surface-0 dark:after:border-b-surface-900; +} + +.p-confirmpopup-content { + @apply flex items-center p-3 gap-4; +} + +.p-confirmpopup-icon { + @apply text-2xl w-6 h-6 text-surface-700 dark:text-surface-0; +} + +.p-confirmpopup-footer { + @apply flex justify-end gap-2 pt-0 px-3 pb-3; +} + +.p-confirmpopup-footer button { + @apply w-auto; +} + +.p-confirmpopup-footer button:last-child { + @apply m-0; +} + +.p-confirmpopup-flipped { + @apply -mt-[10px] mb-[10px]; +} + +.p-confirmpopup-enter-from { + @apply opacity-0 scale-y-75; +} + +.p-confirmpopup-leave-to { + @apply opacity-0; +} + +.p-confirmpopup-enter-active { + @apply [transition:transform_120ms_cubic-bezier(0,0,0.2,1),opacity_120ms_cubic-bezier(0,0,0.2,1)]; +} + +.p-confirmpopup-leave-active { + @apply transition-opacity duration-100 ease-linear; +} + +.p-confirmpopup-flipped:after, +.p-confirmpopup-flipped:before { + @apply bottom-auto top-full; +} + +.p-confirmpopup-flipped:after { + @apply border-b-transparent border-t-surface-0 dark:border-t-surface-900; +} + +.p-confirmpopup-flipped:before { + @apply border-b-transparent border-t-surface-200 dark:border-t-surface-700; +} diff --git a/src/assets/primevue/contextmenu.css b/src/assets/primevue/contextmenu.css new file mode 100644 index 0000000..1e329de --- /dev/null +++ b/src/assets/primevue/contextmenu.css @@ -0,0 +1,106 @@ +.p-contextmenu { + @apply bg-surface-0 dark:bg-surface-900 + text-surface-700 dark:text-surface-0 + border border-surface-200 dark:border-surface-700 + rounded-md min-w-52 shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]; +} + +.p-contextmenu-root-list, +.p-contextmenu-submenu { + @apply m-0 p-1 list-none outline-none flex flex-col gap-[2px]; +} + +.p-contextmenu-submenu { + @apply absolute min-w-full z-10 rounded-md + bg-surface-0 dark:bg-surface-900 + text-surface-700 dark:text-surface-0 + border border-surface-200 dark:border-surface-700 + shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]; +} + +.p-contextmenu-item { + @apply relative; +} + +.p-contextmenu-item-content { + @apply transition-colors duration-200 rounded-sm text-surface-700 dark:text-surface-0; +} + +.p-contextmenu-item-link { + @apply cursor-pointer flex items-center no-underline overflow-hidden relative text-inherit + px-3 py-2 gap-2 select-none outline-none; +} + +.p-contextmenu-item-icon { + @apply text-surface-400 dark:text-surface-500; +} + +.p-contextmenu-submenu-icon { + @apply text-surface-400 dark:text-surface-500 ms-auto text-sm w-[0.875rem] h-[0.875rem]; +} + +.p-contextmenu-item.p-focus > .p-contextmenu-item-content { + @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0; +} + +.p-contextmenu-item.p-focus > .p-contextmenu-item-content .p-contextmenu-item-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-contextmenu-item.p-focus > .p-contextmenu-item-content .p-contextmenu-submenu-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-contextmenu-item:not(.p-disabled) > .p-contextmenu-item-content:hover { + @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0; +} + +.p-contextmenu-item:not(.p-disabled) > .p-contextmenu-item-content:hover .p-contextmenu-item-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-contextmenu-item:not(.p-disabled) + > .p-contextmenu-item-content:hover + .p-contextmenu-submenu-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-contextmenu-item-active > .p-contextmenu-item-content { + @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0; +} + +.p-contextmenu-item-active > .p-contextmenu-item-content .p-contextmenu-item-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-contextmenu-item-active > .p-contextmenu-item-content .p-contextmenu-submenu-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-contextmenu-separator { + @apply border-t border-surface-200 dark:border-surface-700; +} + +.p-contextmenu-enter-from, +.p-contextmenu-leave-active { + @apply opacity-0; +} + +.p-contextmenu-enter-active { + @apply transition-opacity duration-[250ms]; +} + +.p-contextmenu-mobile .p-contextmenu-submenu { + @apply static shadow-none border-none ps-4 pe-0; +} + +.p-contextmenu-mobile .p-contextmenu-submenu-icon { + @apply transition-transform duration-200 rotate-90; +} + +.p-contextmenu-mobile + .p-contextmenu-item-active + > .p-contextmenu-item-content + .p-contextmenu-submenu-icon { + @apply -rotate-90; +} diff --git a/src/assets/primevue/datatable.css b/src/assets/primevue/datatable.css new file mode 100644 index 0000000..e61beb6 --- /dev/null +++ b/src/assets/primevue/datatable.css @@ -0,0 +1,427 @@ +@import './paginator'; + +.p-datatable { + @apply relative; +} + +.p-datatable-table { + @apply border-spacing-0 w-full; +} + +.p-datatable-scrollable > .p-datatable-table-container { + @apply relative; +} + +.p-datatable-scrollable-table > .p-datatable-thead { + @apply top-0 z-10; +} + +.p-datatable-scrollable-table > .p-datatable-frozen-tbody { + @apply sticky z-10; +} + +.p-datatable-scrollable-table > .p-datatable-tfoot { + @apply bottom-0 z-10; +} + +.p-datatable-scrollable .p-datatable-frozen-column { + @apply sticky bg-surface-0 dark:bg-surface-900; +} + +.p-datatable-scrollable th.p-datatable-frozen-column { + @apply z-10; +} + +.p-datatable-scrollable > .p-datatable-table-container > .p-datatable-table > .p-datatable-thead, +.p-datatable-scrollable + > .p-datatable-table-container + > .p-virtualscroller + > .p-datatable-table + > .p-datatable-thead { + @apply bg-surface-0 dark:bg-surface-900; +} + +.p-datatable-scrollable > .p-datatable-table-container > .p-datatable-table > .p-datatable-tfoot, +.p-datatable-scrollable + > .p-datatable-table-container + > .p-virtualscroller + > .p-datatable-table + > .p-datatable-tfoot { + @apply bg-surface-0 dark:bg-surface-900; +} + +.p-datatable-flex-scrollable { + @apply flex flex-col h-full; +} + +.p-datatable-flex-scrollable > .p-datatable-table-container { + @apply flex flex-col flex-1 h-full; +} + +.p-datatable-scrollable-table > .p-datatable-tbody > .p-datatable-row-group-header { + @apply sticky z-10; +} + +.p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + @apply overflow-hidden whitespace-nowrap; +} + +.p-datatable-resizable-table + > .p-datatable-thead + > tr + > th.p-datatable-resizable-column:not(.p-datatable-frozen-column) { + @apply bg-clip-padding relative; +} + +.p-datatable-resizable-table-fit + > .p-datatable-thead + > tr + > th.p-datatable-resizable-column:last-child + .p-datatable-column-resizer { + @apply hidden; +} + +.p-datatable-column-resizer { + @apply block absolute top-0 end-0 m-0 w-2 h-full p-0 cursor-col-resize border border-transparent; +} + +.p-datatable-column-header-content { + @apply flex items-center gap-2; +} + +.p-datatable-column-resize-indicator { + @apply w-px absolute z-10 hidden bg-primary; +} + +.p-datatable-row-reorder-indicator-up, +.p-datatable-row-reorder-indicator-down { + @apply absolute hidden; +} + +.p-datatable-reorderable-column, +.p-datatable-reorderable-row-handle { + @apply cursor-move; +} + +.p-datatable-mask { + @apply absolute flex items-center justify-center z-20; +} + +.p-datatable-inline-filter { + @apply flex items-center w-full gap-2; +} + +.p-datatable-inline-filter .p-datatable-filter-element-container { + @apply flex-auto w-[1%]; +} + +.p-datatable-filter-overlay { + @apply bg-surface-0 dark:bg-surface-900 rounded-md min-w-52 + border border-surface-200 dark:border-surface-700 + text-surface-700 dark:text-surface-0 + shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]; +} + +.p-datatable-filter-constraint-list { + @apply m-0 list-none flex flex-col p-1 gap-[2px]; +} + +.p-datatable-filter-constraint { + @apply px-3 py-2 rounded-sm cursor-pointer transition-colors duration-200 text-surface-700 dark:text-surface-0; +} + +.p-datatable-filter-constraint-selected { + @apply bg-highlight; +} + +.p-datatable-filter-constraint:not(.p-datatable-filter-constraint-selected):not(.p-disabled):hover { + @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0; +} + +.p-datatable-filter-constraint:focus-visible { + @apply outline-none bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0; +} + +.p-datatable-filter-constraint-selected:focus-visible { + @apply bg-highlight-emphasis; +} + +.p-datatable-filter-constraint-separator { + @apply border-t border-surface-200 dark:border-surface-700; +} + +.p-datatable-popover-filter { + @apply inline-flex ms-auto; +} + +.p-datatable-filter-overlay-popover { + @apply flex flex-col gap-2 + bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0 + border border-surface-200 dark:border-surface-700 rounded-md p-3 min-w-52 + shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]; +} + +.p-datatable-filter-operator-dropdown { + @apply w-full; +} + +.p-datatable-filter-rule-list, +.p-datatable-filter-rule { + @apply flex flex-col gap-2; +} + +.p-datatable-filter-rule { + @apply border-b border-surface-200 dark:border-surface-700 last:border-b-0 pb-2 last:pb-0; +} + +.p-datatable-filter-add-rule-button { + @apply w-full; +} + +.p-datatable-filter-remove-rule-button { + @apply w-full; +} + +.p-datatable-filter-buttonbar { + @apply p-0 flex items-center justify-between; +} + +.p-datatable-virtualscroller-spacer { + @apply flex; +} + +.p-datatable .p-virtualscroller .p-virtualscroller-loading { + @apply !transform-none min-h-0 sticky top-0 start-0; +} + +.p-datatable-paginator-top { + @apply border-b border-surface-200 dark:border-surface-700; +} + +.p-datatable-paginator-bottom { + @apply border-t border-surface-200 dark:border-surface-700; +} + +.p-datatable-header { + @apply py-3 px-4 border-b border-surface-200 dark:border-surface-700 + bg-surface-0 dark:bg-surface-900 + text-surface-700 dark:text-surface-0; +} + +.p-datatable-footer { + @apply py-3 px-4 border-b border-surface-200 dark:border-surface-700 + bg-surface-0 dark:bg-surface-900 + text-surface-700 dark:text-surface-0; +} + +.p-datatable-header-cell { + @apply py-3 px-4 font-normal text-start transition-colors duration-200 + border-b border-surface-200 dark:border-surface-700 + bg-surface-0 dark:bg-surface-900 + text-surface-700 dark:text-surface-0; +} + +.p-datatable-column-title { + @apply font-semibold; +} + +.p-datatable-tbody > tr { + @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0 transition-colors duration-200; +} + +.p-datatable-tbody > tr > td { + @apply text-start py-3 px-4 border-b border-surface-200 dark:border-surface-800; +} + +.p-datatable-hoverable .p-datatable-tbody > tr:not(.p-datatable-row-selected):hover { + @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0; +} + +.p-datatable-tbody > tr.p-datatable-row-selected { + @apply bg-highlight; +} + +.p-datatable-tbody > tr:has(+ .p-datatable-row-selected) > td { + @apply border-b-primary-100 dark:border-b-primary-900; +} + +.p-datatable-tbody > tr.p-datatable-row-selected > td { + @apply border-b-primary-100 dark:border-b-primary-900; +} + +.p-datatable-tbody > tr:focus-visible, +.p-datatable-tbody > tr.p-datatable-contextmenu-row-selected { + @apply outline outline-1 -outline-offset-1 outline-primary; +} + +.p-datatable-tfoot > tr > td { + @apply text-start py-3 px-4 border-b border-surface-200 dark:border-surface-800 + bg-surface-0 dark:bg-surface-900 + text-surface-700 dark:text-surface-0; +} + +.p-datatable-column-footer { + @apply font-semibold; +} + +.p-datatable-sortable-column { + @apply cursor-pointer select-none focus-visible:outline focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-primary; +} + +.p-datatable-column-title, +.p-datatable-sort-icon, +.p-datatable-sort-badge { + @apply align-middle; +} + +.p-datatable-sort-icon { + @apply text-surface-500 dark:text-surface-400 transition-colors duration-200; +} + +.p-datatable-sortable-column:not(.p-datatable-column-sorted):hover { + @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0; +} + +.p-datatable-sortable-column:not(.p-datatable-column-sorted):hover .p-datatable-sort-icon { + @apply text-surface-600 dark:text-surface-300; +} + +.p-datatable-column-sorted { + @apply bg-highlight; +} + +.p-datatable-column-sorted .p-datatable-sort-icon { + @apply bg-highlight; +} + +.p-datatable-hoverable .p-datatable-selectable-row { + @apply cursor-pointer; +} + +.p-datatable-tbody > tr.p-datatable-dragpoint-top > td { + @apply shadow-[inset_0_2px_0_0_theme(colors.primary)]; +} + +.p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { + @apply shadow-[inset_0_-2px_0_0_theme(colors.primary)]; +} + +.p-datatable-loading-icon { + @apply text-[2rem] w-8 h-8; +} + +.p-datatable-gridlines .p-datatable-header { + @apply border-t border-x; +} + +.p-datatable-gridlines .p-datatable-footer { + @apply border-b border-x; +} + +.p-datatable-gridlines .p-datatable-paginator-top { + @apply border-t border-x; +} + +.p-datatable-gridlines .p-datatable-paginator-bottom { + @apply border-b border-x; +} + +.p-datatable-gridlines .p-datatable-thead > tr > th { + @apply border-t border-x last:border; +} + +.p-datatable-gridlines .p-datatable-tbody > tr > td { + @apply border-t border-s last:border-r; +} + +.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td { + @apply border-y border-s last:border; +} + +.p-datatable-gridlines .p-datatable-tfoot > tr > td { + @apply border-y border-s last:border; +} + +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td { + @apply border-b border-s last:border-r; +} + +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) + .p-datatable-tbody + > tr + > td { + @apply border-b border-s last:border-r; +} + +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) + .p-datatable-tbody + > tr:last-child + > td { + @apply border-s last:border-r; +} + +.p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd { + @apply bg-surface-50 dark:bg-surface-950; +} + +.p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-datatable-row-selected { + @apply bg-highlight; +} + +.p-datatable.p-datatable-sm .p-datatable-header { + @apply py-1 px-2; +} + +.p-datatable.p-datatable-sm .p-datatable-thead > tr > th { + @apply py-1 px-2; +} + +.p-datatable.p-datatable-sm .p-datatable-tbody > tr > td { + @apply py-1 px-2; +} + +.p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td { + @apply py-1 px-2; +} + +.p-datatable.p-datatable-sm .p-datatable-footer { + @apply py-1 px-2; +} + +.p-datatable.p-datatable-lg .p-datatable-header { + @apply py-4 px-5; +} + +.p-datatable.p-datatable-lg .p-datatable-thead > tr > th { + @apply py-4 px-5; +} + +.p-datatable.p-datatable-lg .p-datatable-tbody > tr > td { + @apply py-4 px-5; +} + +.p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td { + @apply py-4 px-5; +} + +.p-datatable.p-datatable-lg .p-datatable-footer { + @apply py-4 px-5; +} + +.p-datatable-row-toggle-button { + @apply inline-flex items-center justify-center overflow-hidden relative w-7 h-7 cursor-pointer select-none + transition-colors duration-200 rounded-full border-none bg-transparent + text-surface-500 enabled:hover:bg-surface-100 enabled:hover:text-surface-700 + dark:text-surface-400 dark:enabled:hover:bg-surface-800 dark:enabled:hover:text-surface-0 + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary; +} + +.p-datatable-tbody > tr.p-datatable-row-selected .p-datatable-row-toggle-button:hover { + @apply bg-surface-0 dark:bg-surface-900 text-primary; +} + +.p-datatable-row-toggle-icon:dir(rtl) { + @apply rotate-180; +} diff --git a/src/assets/primevue/dataview.css b/src/assets/primevue/dataview.css new file mode 100644 index 0000000..370b9dc --- /dev/null +++ b/src/assets/primevue/dataview.css @@ -0,0 +1,29 @@ +@import './paginator'; + +.p-dataview { + @apply border-none; +} + +.p-dataview-header { + @apply py-3 px-4 border-b border-surface-200 dark:border-surface-700 + bg-surface-0 dark:bg-surface-900 + text-surface-700 dark:text-surface-0; +} + +.p-dataview-content { + @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0; +} + +.p-dataview-footer { + @apply py-3 px-4 border-t border-surface-200 dark:border-surface-700 + bg-surface-0 dark:bg-surface-900 + text-surface-700 dark:text-surface-0; +} + +.p-dataview-paginator-top { + @apply border-b border-surface-200 dark:border-surface-700; +} + +.p-dataview-paginator-bottom { + @apply border-t border-surface-200 dark:border-surface-700; +} diff --git a/src/assets/primevue/datepicker.css b/src/assets/primevue/datepicker.css new file mode 100644 index 0000000..fe12910 --- /dev/null +++ b/src/assets/primevue/datepicker.css @@ -0,0 +1,211 @@ +@import './button'; +@import './inputtext'; + +.p-datepicker { + @apply inline-flex max-w-full; +} + +.p-datepicker-input { + @apply flex-auto w-[1%]; +} + +.p-datepicker:has(.p-datepicker-dropdown) .p-datepicker-input { + @apply rounded-e-none; +} + +.p-datepicker-dropdown { + @apply inline-flex items-center justify-center overflow-hidden relative cursor-pointer select-none + w-10 rounded-e-md border border-s-0 border-surface-300 dark:border-surface-700 + bg-surface-100 enabled:hover:bg-surface-200 enabled:active:bg-surface-300 + text-surface-600 enabled:hover:text-surface-700 enabled:active:text-surface-800 + dark:bg-surface-800 dark:enabled:hover:bg-surface-700 dark:enabled:active:bg-surface-600 + dark:text-surface-300 dark:enabled:hover:text-surface-200 dark:enabled:active:text-surface-100 + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary + transition-colors duration-200; +} + +.p-datepicker:has(.p-datepicker-input-icon-container) { + @apply relative; +} + +.p-datepicker:has(.p-datepicker-input-icon-container) .p-datepicker-input { + @apply pe-10; +} + +.p-datepicker-input-icon-container { + @apply cursor-pointer absolute top-1/2 end-3 -mt-2 text-surface-400; +} + +.p-datepicker-fluid { + @apply flex; +} + +.p-datepicker-fluid .p-datepicker-input { + @apply w-[1%]; +} + +.p-datepicker .p-datepicker-panel { + @apply min-w-full; +} + +.p-datepicker-panel { + @apply w-auto p-3 rounded-md + border border-surface-200 dark:border-surface-700 + bg-surface-0 dark:bg-surface-900 + text-surface-700 dark:text-surface-0 + shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]; +} + +.p-datepicker-panel-inline { + @apply inline-block overflow-x-auto shadow-none; +} + +.p-datepicker-header { + @apply flex items-center justify-between pt-0 px-0 pb-2 font-medium gap-2 + bg-surface-0 dark:bg-surface-900 + text-surface-700 dark:text-surface-0 + border-b border-surface-200 dark:border-surface-700; +} + +.p-datepicker-next-button:dir(rtl) { + @apply order-[-1]; +} +.p-datepicker-prev-button:dir(rtl) { + @apply order-1; +} + +.p-datepicker-title { + @apply flex items-center justify-between gap-2 font-medium; +} + +.p-datepicker-select-year, +.p-datepicker-select-month { + @apply border-none bg-transparent m-0 cursor-pointer font-medium transition-colors duration-200 + py-1 px-2 rounded-md text-surface-700 dark:text-surface-0 + enabled:hover:bg-surface-100 enabled:hover:text-surface-800 + dark:enabled:hover:bg-surface-800 dark:enabled:hover:text-surface-0 + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary; +} + +.p-datepicker-calendar-container { + @apply flex; +} + +.p-datepicker-calendar-container .p-datepicker-calendar { + @apply flex-auto border-s border-surface-200 dark:border-surface-700 gap-3 + first:ps-0 first:border-s-0 last:pe-0; +} + +.p-datepicker-day-view { + @apply w-full border-collapse text-base mt-2 mx-0 mb-0; +} + +.p-datepicker-weekday-cell { + @apply p-1; +} + +.p-datepicker-weekday { + @apply font-medium text-surface-700 dark:text-surface-0; +} + +.p-datepicker-day-cell { + @apply p-1; +} + +.p-datepicker-day { + @apply flex items-center justify-center cursor-pointer my-0 mx-auto overflow-hidden relative w-8 h-8 + rounded-full p-1 transition-colors duration-200 border border-transparent text-surface-700 dark:text-surface-0 + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary; +} + +.p-datepicker-day:not(.p-datepicker-day-selected):not(.p-disabled):hover { + @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0; +} + +.p-datepicker-day-selected { + @apply bg-primary text-primary-contrast; +} + +.p-datepicker-day-selected-range { + @apply bg-highlight; +} + +.p-datepicker-today > .p-datepicker-day { + @apply bg-surface-200 text-surface-900 dark:bg-surface-700 dark:text-surface-0; +} + +.p-datepicker-today > .p-datepicker-day-selected { + @apply bg-primary text-primary-contrast; +} + +.p-datepicker-today > .p-datepicker-day-selected-range { + @apply bg-highlight; +} + +.p-datepicker-weeknumber { + @apply text-center; +} + +.p-datepicker-month-view { + @apply mt-2 mb-0 mx-0; +} + +.p-datepicker-month { + @apply w-1/3 inline-flex items-center justify-center cursor-pointer overflow-hidden relative + p-[0.375rem] transition-colors duration-200 rounded-md text-surface-700 dark:text-surface-0 + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary; +} + +.p-datepicker-month:not(.p-disabled):not(.p-datepicker-month-selected):hover { + @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0; +} + +.p-datepicker-month-selected { + @apply bg-primary text-primary-contrast; +} + +.p-datepicker-year-view { + @apply mt-2 mb-0 mx-0; +} + +.p-datepicker-year { + @apply w-1/2 inline-flex items-center justify-center cursor-pointer overflow-hidden relative + p-[0.375rem] transition-colors duration-200 rounded-md text-surface-700 dark:text-surface-0 + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary; +} + +.p-datepicker-year:not(.p-disabled):not(.p-datepicker-year-selected):hover { + @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0; +} + +.p-datepicker-year-selected { + @apply bg-primary text-primary-contrast; +} + +.p-datepicker-buttonbar { + @apply flex justify-between items-center pt-2 pb-0 px-0 border-t border-surface-200 dark:border-surface-700; +} + +.p-datepicker-buttonbar .p-button { + @apply w-auto; +} + +.p-datepicker-time-picker { + @apply flex items-center justify-center border-t border-surface-200 dark:border-surface-700 p-0 gap-2; +} + +.p-datepicker-calendar-container + .p-datepicker-time-picker { + @apply pt-2 pb-0 px-0; +} + +.p-datepicker-time-picker > div { + @apply flex items-center flex-col gap-1; +} + +.p-datepicker-time-picker span { + @apply text-base; +} + +.p-datepicker-timeonly .p-datepicker-time-picker { + @apply border-t-0; +} diff --git a/src/assets/primevue/dialog.css b/src/assets/primevue/dialog.css new file mode 100644 index 0000000..21953ec --- /dev/null +++ b/src/assets/primevue/dialog.css @@ -0,0 +1,125 @@ +@import './button'; + +.p-dialog { + @apply max-h-[90%] scale-100 rounded-xl + border border-surface-200 dark:border-surface-700 + bg-surface-0 dark:bg-surface-900 + text-surface-700 dark:text-surface-0 + shadow-[0_20px_25px_-5px_rgba(0,0,0,0.1),0_8px_10px_-6px_rgba(0,0,0,0.1)]; +} + +.p-dialog-content { + @apply overflow-y-auto pt-0 px-5 pb-5; +} + +.p-dialog-header { + @apply flex items-center justify-between shrink-0 p-5; +} + +.p-dialog-title { + @apply font-semibold text-xl; +} + +.p-dialog-footer { + @apply shrink-0 pt-0 px-5 pb-5 flex justify-end gap-2; +} + +.p-dialog-header-actions { + @apply flex items-center gap-2; +} + +.p-dialog-enter-active { + @apply transition-all duration-150 ease-[cubic-bezier(0,0,0.2,1)]; +} + +.p-dialog-leave-active { + @apply transition-all duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]; +} + +.p-dialog-enter-from, +.p-dialog-leave-to { + @apply opacity-0 scale-75; +} + +.p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + @apply m-3 [transform:translate3d(0,0,0)]; +} + +.p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + @apply transition-all duration-300 ease-out; +} + +.p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + @apply [transform:translate3d(0,-100%,0)]; +} + +.p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + @apply [transform:translate3d(0,100%,0)]; +} + +.p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + @apply [transform:translate3d(-100%,0,0)]; +} + +.p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + @apply [transform:translate3d(100%,0,0)]; +} + +.p-dialog-left:dir(rtl) .p-dialog-enter-from, +.p-dialog-left:dir(rtl) .p-dialog-leave-to, +.p-dialog-topleft:dir(rtl) .p-dialog-enter-from, +.p-dialog-topleft:dir(rtl) .p-dialog-leave-to, +.p-dialog-bottomleft:dir(rtl) .p-dialog-enter-from, +.p-dialog-bottomleft:dir(rtl) .p-dialog-leave-to { + @apply [transform:translate3d(100%,0,0)]; +} +.p-dialog-right:dir(rtl) .p-dialog-enter-from, +.p-dialog-right:dir(rtl) .p-dialog-leave-to, +.p-dialog-topright:dir(rtl) .p-dialog-enter-from, +.p-dialog-topright:dir(rtl) .p-dialog-leave-to, +.p-dialog-bottomright:dir(rtl) .p-dialog-enter-from, +.p-dialog-bottomright:dir(rtl) .p-dialog-leave-to { + @apply [transform:translate3d(-100%,0,0)]; +} + +.p-dialog-maximized { + @apply !w-screen !h-screen top-0 start-0 max-h-full rounded-none; +} + +.p-dialog-maximized .p-dialog-content { + @apply flex-grow; +} diff --git a/src/assets/primevue/divider.css b/src/assets/primevue/divider.css new file mode 100644 index 0000000..7427068 --- /dev/null +++ b/src/assets/primevue/divider.css @@ -0,0 +1,52 @@ +.p-divider-horizontal { + @apply flex w-full relative items-center my-4 mx-0 py-0 px-4 + before:absolute before:block before:top-1/2 before:start-0 before:w-full + before:border-t before:border-surface-200 dark:before:border-surface-700; +} + +.p-divider-horizontal .p-divider-content { + @apply py-0 px-2; +} + +.p-divider-vertical { + @apply min-h-full flex relative justify-center my-0 mx-4 py-2 px-0 + before:absolute before:block before:top-0 before:start-1/2 before:h-full + before:border-s before:border-surface-200 before:dark:border-surface-700; +} + +.p-divider.p-divider-vertical .p-divider-content { + @apply py-2 px-0; +} + +.p-divider-content { + @apply z-10 bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0; +} + +.p-divider-solid.p-divider-horizontal:before { + @apply border-solid; +} + +.p-divider-solid.p-divider-vertical:before { + @apply border-solid; +} + +.p-divider-dashed.p-divider-horizontal:before { + @apply border-dashed; +} + +.p-divider-dashed.p-divider-vertical:before { + @apply border-dashed; +} + +.p-divider-dotted.p-divider-horizontal:before { + @apply border-dotted; +} + +.p-divider-dotted.p-divider-vertical:before { + @apply border-dotted; +} + +.p-divider-left:dir(rtl), +.p-divider-right:dir(rtl) { + @apply flex-row-reverse; +} diff --git a/src/assets/primevue/dock.css b/src/assets/primevue/dock.css new file mode 100644 index 0000000..54f3f6f --- /dev/null +++ b/src/assets/primevue/dock.css @@ -0,0 +1,84 @@ +.p-dock { + @apply absolute z-10 flex justify-center items-center pointer-events-none; +} + +.p-dock-list-container { + @apply flex pointer-events-auto bg-white/10 border border-white/10 p-2 rounded-xl; +} + +.p-dock-list { + @apply m-0 p-0 list-none flex items-center justify-center outline-none; +} + +.p-dock-item { + @apply transition-all duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] will-change-transform p-2 rounded-md + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary; +} + +.p-dock-item-link { + @apply flex flex-col items-center justify-center relative cursor-default w-12 h-12; +} + +.p-dock-top { + @apply start-0 top-0 w-full; +} + +.p-dock-top .p-dock-item { + @apply origin-[center_top]; +} + +.p-dock-bottom { + @apply start-0 bottom-0 w-full; +} + +.p-dock-bottom .p-dock-item { + @apply origin-[center_bottom]; +} + +.p-dock-right { + @apply end-0 top-0 h-full; +} + +.p-dock-right .p-dock-item { + @apply origin-[center_right]; +} + +.p-dock-right .p-dock-list { + @apply flex-col; +} + +.p-dock-left { + @apply start-0 top-0 h-full; +} + +.p-dock-left .p-dock-item { + @apply origin-[center_left]; +} + +.p-dock-left .p-dock-list { + @apply flex-col; +} + +.p-dock-mobile.p-dock-top .p-dock-list-container, +.p-dock-mobile.p-dock-bottom .p-dock-list-container { + @apply overflow-x-auto w-full; +} + +.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list, +.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list { + @apply mt-0 mx-auto; +} + +.p-dock-mobile.p-dock-left .p-dock-list-container, +.p-dock-mobile.p-dock-right .p-dock-list-container { + @apply overflow-y-auto h-full; +} + +.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list, +.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list { + @apply mt-auto mx-0; +} + +.p-dock-mobile .p-dock-list .p-dock-item { + @apply transform-none m-0; +} diff --git a/src/assets/primevue/drawer.css b/src/assets/primevue/drawer.css new file mode 100644 index 0000000..1542919 --- /dev/null +++ b/src/assets/primevue/drawer.css @@ -0,0 +1,94 @@ +@import './button'; + +.p-drawer { + @apply flex flex-col pointer-events-auto relative transition-transform duration-300 + border border-surface-200 dark:border-surface-700 + bg-surface-0 dark:bg-surface-900 + text-surface-700 dark:text-surface-0 + shadow-[0_20px_25px_-5px_rgba(0,0,0,0.1),0_8px_10px_-6px_rgba(0,0,0,0.1)]; +} + +.p-drawer { + @apply [transform:translate3d(0,0,0)]; +} + +.p-drawer-content { + @apply overflow-y-auto flex-grow pt-0 pb-5 px-5; +} + +.p-drawer-header { + @apply flex items-center justify-between flex-shrink-0 p-5; +} + +.p-drawer-footer { + @apply p-5; +} + +.p-drawer-title { + @apply font-semibold text-2xl; +} + +.p-drawer-full .p-drawer { + @apply transition-none transform-none w-screen h-screen max-h-full top-0 left-0; +} + +.p-drawer-left .p-drawer-enter-from, +.p-drawer-left .p-drawer-leave-to { + @apply -translate-x-full; +} + +.p-drawer-right .p-drawer-enter-from, +.p-drawer-right .p-drawer-leave-to { + @apply translate-x-full; +} + +.p-drawer-top .p-drawer-enter-from, +.p-drawer-top .p-drawer-leave-to { + @apply -translate-y-full; +} + +.p-drawer-bottom .p-drawer-enter-from, +.p-drawer-bottom .p-drawer-leave-to { + @apply translate-y-full; +} + +.p-drawer-full .p-drawer-enter-from, +.p-drawer-full .p-drawer-leave-to { + @apply opacity-0; +} + +.p-drawer-full .p-drawer-enter-active, +.p-drawer-full .p-drawer-leave-active { + @apply transition-opacity animate-duration-400 ease-[cubic-bezier(0.25,0.8,0.25,1)]; +} + +.p-drawer-left .p-drawer { + @apply w-80 h-full border-r; +} + +.p-drawer-right .p-drawer { + @apply w-80 h-full border-s; +} + +.p-drawer-top .p-drawer { + @apply h-40 w-full border-b; +} + +.p-drawer-bottom .p-drawer { + @apply h-40 w-full border-t; +} + +.p-drawer-left .p-drawer-content, +.p-drawer-right .p-drawer-content, +.p-drawer-top .p-drawer-content, +.p-drawer-bottom .p-drawer-content { + @apply w-full h-full; +} + +.p-drawer-open { + @apply flex; +} + +.p-overlay-mask:dir(rtl) { + @apply flex-row-reverse; +} diff --git a/src/assets/primevue/fieldset.css b/src/assets/primevue/fieldset.css new file mode 100644 index 0000000..464debf --- /dev/null +++ b/src/assets/primevue/fieldset.css @@ -0,0 +1,45 @@ +.p-fieldset { + @apply border border-surface-200 dark:border-surface-700 rounded-md + bg-surface-0 dark:bg-surface-900 + text-surface-700 dark:text-surface-0 + px-[1.125rem] pt-0 pb-[1.125rem]; +} + +.p-fieldset-legend { + @apply border border-transparent rounded-md px-3 py-2 + transition-colors duration-200; +} + +.p-fieldset-toggleable > .p-fieldset-legend { + @apply p-0; +} + +.p-fieldset-toggle-button { + @apply select-none overflow-hidden relative + flex items-center justify-center gap-2 + px-3 py-2 + border-none rounded-md + bg-surface-0 dark:bg-surface-900 + hover:bg-surface-100 dark:hover:bg-surface-800 + text-surface-700 dark:text-surface-0 + hover:text-surface-800 dark:hover:text-surface-0 + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary + transition-colors duration-200; +} + +.p-fieldset-legend-label { + @apply font-semibold; +} + +.p-fieldset-toggle-icon { + @apply text-surface-500 dark:text-surface-400 + transition-colors duration-200; +} + +.p-fieldset-toggle-button:hover .p-fieldset-toggle-icon { + @apply text-surface-600 dark:text-surface-300; +} + +.p-fieldset .p-fieldset-content { + @apply p-0; +} diff --git a/src/assets/primevue/fileupload.css b/src/assets/primevue/fileupload.css new file mode 100644 index 0000000..a962a98 --- /dev/null +++ b/src/assets/primevue/fileupload.css @@ -0,0 +1,57 @@ +@import './button'; +@import './message'; +@import './progressbar'; + +.p-fileupload input[type='file'] { + @apply hidden; +} + +.p-fileupload-advanced { + @apply border border-surface-200 dark:border-surface-700 rounded-md + bg-surface-0 dark:bg-surface-900 + text-surface-700 dark:text-surface-0; +} + +.p-fileupload-header { + @apply flex items-center p-[1.125rem] gap-2 text-surface-700 dark:text-surface-0; +} + +.p-fileupload-content { + @apply border border-transparent relative transition-colors duration-200 pt-0 px-[1.125rem] pb-[1.125rem]; +} + +.p-fileupload-content .p-progressbar { + @apply w-full absolute top-0 start-0 h-1; +} + +.p-fileupload-file-list { + @apply flex flex-col gap-2 mt-[1.125rem]; +} + +.p-fileupload-file { + @apply flex flex-wrap items-center p-4 border-b border-surface-200 dark:border-surface-700 gap-2 last:border-b-0; +} + +.p-fileupload-file-info { + @apply flex flex-col gap-2; +} + +.p-fileupload-file-thumbnail { + @apply flex-shrink-0; +} + +.p-fileupload-file-actions { + @apply ms-auto; +} + +.p-fileupload-highlight { + @apply border border-dashed border-primary; +} + +.p-fileupload-advanced .p-message { + @apply mt-0; +} + +.p-fileupload-basic { + @apply flex flex-wrap items-center justify-center gap-2; +} diff --git a/src/assets/primevue/floatlabel.css b/src/assets/primevue/floatlabel.css new file mode 100644 index 0000000..889a483 --- /dev/null +++ b/src/assets/primevue/floatlabel.css @@ -0,0 +1,73 @@ +.p-floatlabel { + @apply block relative; +} + +.p-floatlabel label { + @apply absolute pointer-events-none top-1/2 -translate-y-1/2 transition-all duration-200 ease-out leading-none font-medium + start-3 text-surface-500 dark:text-surface-400; +} + +.p-floatlabel:has(.p-textarea) label { + @apply top-2 translate-y-0; +} + +.p-floatlabel:has(.p-inputicon:first-child) label { + @apply start-10; +} + +.p-floatlabel:has(.p-invalid) label { + @apply text-red-400 dark:text-red-300; +} + +.p-floatlabel:has(input:focus) label, +.p-floatlabel:has(input.p-filled) label, +.p-floatlabel:has(input:-webkit-autofill) label, +.p-floatlabel:has(textarea:focus) label, +.p-floatlabel:has(textarea.p-filled) label, +.p-floatlabel:has(.p-inputwrapper-focus) label, +.p-floatlabel:has(.p-inputwrapper-filled) label { + @apply -top-5 translate-y-0 text-xs font-normal; +} + +.p-floatlabel:has(input.p-filled) label, +.p-floatlabel:has(textarea.p-filled) label, +.p-floatlabel:has(.p-inputwrapper-filled) label { + @apply text-surface-500 dark:text-surface-400; +} + +.p-floatlabel:has(input:focus) label, +.p-floatlabel:has(input:-webkit-autofill) label, +.p-floatlabel:has(textarea:focus) label, +.p-floatlabel:has(.p-inputwrapper-focus) label { + @apply text-primary; +} + +.p-floatlabel-in .p-inputtext, +.p-floatlabel-in .p-textarea, +.p-floatlabel-in .p-select-label, +.p-floatlabel-in .p-multiselect-label, +.p-floatlabel-in .p-autocomplete-input-multiple, +.p-floatlabel-in .p-cascadeselect-label, +.p-floatlabel-in .p-treeselect-label { + @apply pt-6 pb-2; +} + +.p-floatlabel-in:has(input:focus) label, +.p-floatlabel-in:has(input.p-filled) label, +.p-floatlabel-in:has(input:-webkit-autofill) label, +.p-floatlabel-in:has(textarea:focus) label, +.p-floatlabel-in:has(textarea.p-filled) label, +.p-floatlabel-in:has(.p-inputwrapper-focus) label, +.p-floatlabel-in:has(.p-inputwrapper-filled) label { + @apply top-2; +} + +.p-floatlabel-on:has(input:focus) label, +.p-floatlabel-on:has(input.p-filled) label, +.p-floatlabel-on:has(input:-webkit-autofill) label, +.p-floatlabel-on:has(textarea:focus) label, +.p-floatlabel-on:has(textarea.p-filled) label, +.p-floatlabel-on:has(.p-inputwrapper-focus) label, +.p-floatlabel-on:has(.p-inputwrapper-filled) label { + @apply top-0 -translate-y-1/2 rounded-sm bg-surface-0 dark:bg-surface-950 py-0 px-[0.125rem]; +} diff --git a/src/assets/primevue/galleria.css b/src/assets/primevue/galleria.css new file mode 100644 index 0000000..b09140b --- /dev/null +++ b/src/assets/primevue/galleria.css @@ -0,0 +1,246 @@ +.p-galleria { + @apply overflow-hidden border border-surface-200 dark:border-surface-700 rounded-md; +} + +.p-galleria-content { + @apply flex flex-col; +} + +.p-galleria-items-container { + @apply flex flex-col relative; +} + +.p-galleria-items { + @apply relative flex h-full; +} + +.p-galleria-nav-button { + @apply absolute top-1/2 inline-flex justify-center items-center overflow-hidden select-none border-none cursor-pointer + w-12 h-12 transition-colors duration-200 p-0 -mt-12 mx-2 mb-0 rounded-full + bg-white/10 text-surface-100 enabled:hover:bg-white/20 enabled:hover:text-surface-0 + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary; +} + +.p-galleria-next-icon, +.p-galleria-prev-icon { + @apply text-2xl w-6 h-6; +} + +.p-galleria-prev-button { + @apply start-0; +} + +.p-galleria-next-button { + @apply end-0; +} + +.p-galleria-prev-button:dir(rtl) { + @apply start-auto end-0; +} +.p-galleria-next-button:dir(rtl) { + @apply end-auto start-0; +} + +.p-galleria-item { + @apply flex justify-center items-center h-full w-full; +} + +.p-galleria-hover-navigators .p-galleria-nav-button { + @apply pointer-events-none opacity-0 transition-opacity duration-200 ease-in-out; +} + +.p-galleria-hover-navigators .p-galleria-items-container:hover .p-galleria-nav-button { + @apply pointer-events-auto opacity-100; +} + +.p-galleria-hover-navigators .p-galleria-items-container:hover .p-galleria-nav-button.p-disabled { + @apply pointer-events-none; +} + +.p-galleria-caption { + @apply absolute bottom-0 left-0 w-full bg-black/5 text-surface-100 p-4; +} + +.p-galleria-thumbnails { + @apply flex flex-col overflow-auto flex-shrink-0; +} + +.p-galleria-thumbnail-nav-button { + @apply self-center flex-grow-0 flex-shrink-0 basis-auto justify-center items-center overflow-hidden relative + my-0 mx-2 p-0 border-none select-none cursor-pointer w-8 h-8 rounded-md transition-colors duration-200 bg-transparent + text-surface-600 hover:bg-surface-100 hover:text-surface-700 + dark:text-surface-400 dark:hover:bg-surface-800 dark:hover:text-surface-0 + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary; +} + +.p-galleria-thumbnail-nav-button .p-galleria-thumbnail-next-icon, +.p-galleria-thumbnail-nav-button .p-galleria-thumbnail-prev-icon { + @apply text-base w-4 h-4; +} + +.p-galleria-thumbnails-content { + @apply flex flex-row bg-surface-0 dark:bg-surface-900 py-4 px-1; +} + +.p-galleria-thumbnails-viewport { + @apply overflow-hidden w-full; +} + +.p-galleria:not(.p-galleria-thumbnails-right):not(.p-galleria-thumbnails-left) + .p-galleria-thumbnail-prev-button:dir(rtl), +.p-galleria:not(.p-galleria-thumbnails-right):not(.p-galleria-thumbnails-left) + .p-galleria-thumbnail-next-button:dir(rtl) { + @apply rotate-180; +} + +.p-galleria-thumbnail-items { + @apply flex; +} + +.p-galleria-thumbnail-item { + @apply overflow-auto flex items-center justify-center cursor-pointer opacity-50; +} + +.p-galleria-thumbnail { + @apply outline-transparent transition-opacity duration-300 hover:opacity-100; +} + +.p-galleria-thumbnail-item-current { + @apply opacity-100; +} + +.p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + @apply flex-row; +} + +.p-galleria-thumbnails-left .p-galleria-items-container, +.p-galleria-thumbnails-right .p-galleria-items-container { + @apply flex-row; +} + +.p-galleria-thumbnails-left .p-galleria-items-container, +.p-galleria-thumbnails-top .p-galleria-items-container { + @apply order-2; +} + +.p-galleria-thumbnails-left .p-galleria-thumbnails, +.p-galleria-thumbnails-top .p-galleria-thumbnails { + @apply order-1; +} + +.p-galleria-thumbnails-left .p-galleria-thumbnails-content, +.p-galleria-thumbnails-right .p-galleria-thumbnails-content { + @apply flex-col flex-grow; +} + +.p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + @apply flex-col h-full; +} + +.p-galleria-indicator-list { + @apply flex items-center justify-center p-4 gap-2 m-0 list-none; +} + +.p-galleria-indicator-button { + @apply inline-flex items-center w-4 h-4 rounded-full m-0 p-0 border-none select-none cursor-pointer transition-colors duration-200 + bg-surface-200 hover:bg-surface-300 dark:bg-surface-700 dark:hover:bg-surface-600 + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary; +} + +.p-galleria-indicator-active .p-galleria-indicator-button { + @apply bg-primary; +} + +.p-galleria-indicators-left .p-galleria-items-container, +.p-galleria-indicators-right .p-galleria-items-container { + @apply flex-row items-center; +} + +.p-galleria-indicators-left .p-galleria-items, +.p-galleria-indicators-top .p-galleria-items { + @apply order-2; +} + +.p-galleria-indicators-left .p-galleria-indicator-list, +.p-galleria-indicators-top .p-galleria-indicator-list { + @apply order-1; +} + +.p-galleria-indicators-left .p-galleria-indicator-list, +.p-galleria-indicators-right .p-galleria-indicator-list { + @apply flex-col; +} + +.p-galleria-inset-indicators .p-galleria-indicator-list { + @apply absolute flex z-10 bg-black/50; +} + +.p-galleria-inset-indicators .p-galleria-indicator-button { + @apply bg-white/40 hover:bg-white/60; +} + +.p-galleria-inset-indicators .p-galleria-indicator-active .p-galleria-indicator-button { + @apply bg-white/90; +} + +.p-galleria-inset-indicators.p-galleria-indicators-top .p-galleria-indicator-list { + @apply top-0 left-0 w-full items-start; +} + +.p-galleria-inset-indicators.p-galleria-indicators-right .p-galleria-indicator-list { + @apply right-0 top-0 h-full items-end; +} + +.p-galleria-inset-indicators.p-galleria-indicators-bottom .p-galleria-indicator-list { + @apply bottom-0 left-0 w-full items-end; +} + +.p-galleria-inset-indicators.p-galleria-indicators-left .p-galleria-indicator-list { + @apply left-0 top-0 h-full items-start; +} + +.p-galleria-mask { + @apply fixed top-0 left-0 w-full h-full flex items-center justify-center; +} + +.p-galleria-close-button { + @apply absolute top-0 right-0 flex items-center justify-center overflow-hidden m-2 rounded-full + transition-colors duration-200 select-none cursor-pointer w-12 h-12 p-0 border-none + bg-white/10 text-surface-50 hover:bg-white/20 hover:text-surface-0 + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary; +} + +.p-galleria-close-icon { + @apply text-2xl w-6 h-6; +} + +.p-galleria-mask .p-galleria-nav-button { + @apply fixed top-1/2; +} + +.p-galleria-enter-active { + @apply transition-all duration-150 ease-[cubic-bezier(0,0,0.2,1)]; +} + +.p-galleria-leave-active { + @apply transition-all duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]; +} + +.p-galleria-enter-from, +.p-galleria-leave-to { + @apply opacity-0 scale-75; +} + +.p-galleria-enter-active .p-galleria-nav-button { + @apply opacity-0; +} + +.p-items-hidden .p-galleria-thumbnail-item { + @apply invisible; +} + +.p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + @apply visible; +} diff --git a/src/assets/primevue/iconfield.css b/src/assets/primevue/iconfield.css new file mode 100644 index 0000000..e231111 --- /dev/null +++ b/src/assets/primevue/iconfield.css @@ -0,0 +1,23 @@ +.p-iconfield { + @apply relative; +} + +.p-inputicon { + @apply absolute top-1/2 -mt-2 text-surface-400 leading-none; +} + +.p-iconfield .p-inputicon:first-child { + @apply start-3; +} + +.p-iconfield .p-inputicon:last-child { + @apply end-3; +} + +.p-iconfield .p-inputtext:not(:first-child) { + @apply ps-10; +} + +.p-iconfield .p-inputtext:not(:last-child) { + @apply pe-10; +} diff --git a/src/assets/primevue/iftalabel.css b/src/assets/primevue/iftalabel.css new file mode 100644 index 0000000..993a271 --- /dev/null +++ b/src/assets/primevue/iftalabel.css @@ -0,0 +1,32 @@ +.p-iftalabel { + @apply block relative; +} + +.p-iftalabel label { + @apply absolute pointer-events-none top-2 transition-all ease-out duration-200 leading-none text-xs font-medium start-3 text-surface-500 dark:text-surface-400; +} + +.p-iftalabel .p-inputtext, +.p-iftalabel .p-textarea, +.p-iftalabel .p-select-label, +.p-iftalabel .p-multiselect-label, +.p-iftalabel .p-autocomplete-input-multiple, +.p-iftalabel .p-cascadeselect-label, +.p-iftalabel .p-treeselect-label { + @apply pt-6 pb-2; +} + +.p-iftalabel:has(.p-invalid) label { + @apply text-red-400 dark:text-red-300; +} + +.p-iftalabel:has(input:focus) label, +.p-iftalabel:has(input:-webkit-autofill) label, +.p-iftalabel:has(textarea:focus) label, +.p-iftalabel:has(.p-inputwrapper-focus) label { + @apply text-primary; +} + +.p-iftalabel .p-inputicon { + @apply top-6 translate-y-1/4 mt-0; +} diff --git a/src/assets/primevue/image.css b/src/assets/primevue/image.css new file mode 100644 index 0000000..03c98d4 --- /dev/null +++ b/src/assets/primevue/image.css @@ -0,0 +1,56 @@ +.p-image-mask { + @apply flex items-center justify-center; +} + +.p-image-preview { + @apply relative inline-flex leading-none; +} + +.p-image-preview-mask { + @apply absolute start-0 top-0 w-full h-full flex items-center justify-center opacity-0 + border-none p-0 cursor-pointer bg-transparent text-surface-200 transition-all duration-200; +} + +.p-image-preview:hover > .p-image-preview-mask { + @apply opacity-100 cursor-pointer bg-black/40 dark:bg-black/60; +} + +.p-image-preview-icon { + @apply text-2xl w-6 h-6; +} + +.p-image-toolbar { + @apply absolute top-4 end-4 start-auto bottom-auto flex z-10 p-2 bg-white/10 border border-white/20 rounded-3xl gap-2; +} + +.p-image-action { + @apply inline-flex justify-center items-center text-surface-50 bg-transparent w-12 h-12 m-0 p-0 + border-none cursor-pointer select-none rounded-full transition-colors duration-200 + hover:text-surface-0 hover:bg-white/10 + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary; +} + +.p-image-action .p-icon { + @apply text-2xl h-6 w-6; +} + +.p-image-action.p-disabled { + @apply pointer-events-auto; +} + +.p-image-original { + @apply transition-transform duration-150 max-w-[100vw] max-h-[100vh]; +} + +.p-image-original-enter-active { + @apply transition-all duration-150 ease-[cubic-bezier(0,0,0.2,1)]; +} + +.p-image-original-leave-active { + @apply transition-all duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]; +} + +.p-image-original-enter-from, +.p-image-original-leave-to { + @apply opacity-0 scale-75; +} diff --git a/src/assets/primevue/imagecompare.css b/src/assets/primevue/imagecompare.css new file mode 100644 index 0000000..6c92e0b --- /dev/null +++ b/src/assets/primevue/imagecompare.css @@ -0,0 +1,38 @@ +.p-imagecompare { + @apply relative overflow-hidden w-full aspect-video; +} + +.p-imagecompare img { + @apply w-full h-full absolute; +} + +.p-imagecompare img + img { + @apply [clip-path:polygon(0_0,50%_0,50%_100%,0_100%)]; +} + +.p-imagecompare:dir(rtl) img + img { + @apply [clip-path:polygon(50%_0,100%_0,100%_100%,50%_100%)]; +} + +.p-imagecompare-slider { + @apply relative appearance-none w-[calc(100%+1rem)] h-full -ms-2 bg-transparent outline-none transition-all duration-200 + hover:w-[calc(100%+2rem)] hover:-ms-4; +} + +.p-imagecompare-slider::-webkit-slider-thumb { + @apply appearance-none h-4 w-4 bg-white/30 rounded-full bg-contain cursor-ew-resize transition-all duration-200 + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary; +} + +.p-imagecompare-slider::-moz-range-thumb { + @apply appearance-none h-4 w-4 bg-white/30 rounded-full bg-contain cursor-ew-resize transition-all duration-200 + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary; +} + +.p-imagecompare-slider:hover::-webkit-slider-thumb { + @apply bg-white/40 h-8 w-8; +} + +.p-imagecompare-slider:hover::-moz-range-thumb { + @apply bg-white/40 h-8 w-8; +} diff --git a/src/assets/primevue/inplace.css b/src/assets/primevue/inplace.css new file mode 100644 index 0000000..fa77f5b --- /dev/null +++ b/src/assets/primevue/inplace.css @@ -0,0 +1,13 @@ +.p-inplace-display { + @apply inline cursor-pointer border border-transparent px-3 py-2 rounded-md + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary + transition-colors duration-200; +} + +.p-inplace-display:not(.p-disabled):hover { + @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0; +} + +.p-inplace-content { + @apply block; +} diff --git a/src/assets/primevue/inputgroup.css b/src/assets/primevue/inputgroup.css new file mode 100644 index 0000000..127514a --- /dev/null +++ b/src/assets/primevue/inputgroup.css @@ -0,0 +1,67 @@ +.p-inputgroup, +.p-inputgroup .p-floatlabel, +.p-inputgroup .p-iftalabel { + @apply flex items-stretch w-full; +} + +.p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper { + @apply flex-auto w-[1%]; +} + +.p-inputgroupaddon { + @apply flex items-center justify-center p-2 min-w-10 + border-y border-surface-300 dark:border-surface-700 + bg-surface-0 dark:bg-surface-950 text-surface-400; +} + +.p-inputgroupaddon:first-child, +.p-inputgroupaddon + .p-inputgroupaddon { + @apply border-s; +} + +.p-inputgroupaddon:last-child { + @apply border-e; +} + +.p-inputgroup > .p-component, +.p-inputgroup > .p-inputwrapper > .p-component, +.p-inputgroup > .p-floatlabel > .p-component, +.p-inputgroup > .p-floatlabel > .p-inputwrapper > .p-component, +.p-inputgroup > .p-iftalabel > .p-component, +.p-inputgroup > .p-iftalabel > .p-inputwrapper > .p-component { + @apply rounded-none m-0; +} + +.p-inputgroupaddon:first-child, +.p-inputgroup > .p-component:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-floatlabel:first-child > .p-component, +.p-inputgroup > .p-floatlabel:first-child > .p-inputwrapper > .p-component, +.p-inputgroup > .p-iftalabel:first-child > .p-component, +.p-inputgroup > .p-iftalabel:first-child > .p-inputwrapper > .p-component { + @apply rounded-s-md; +} + +.p-inputgroupaddon:last-child, +.p-inputgroup > .p-component:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-floatlabel:last-child > .p-component, +.p-inputgroup > .p-floatlabel:last-child > .p-inputwrapper > .p-component, +.p-inputgroup > .p-iftalabel:last-child > .p-component, +.p-inputgroup > .p-iftalabel:last-child > .p-inputwrapper > .p-component { + @apply rounded-e-md; +} + +.p-inputgroup .p-component:focus, +.p-inputgroup .p-component.p-focus, +.p-inputgroup .p-inputwrapper-focus, +.p-inputgroup .p-component:focus ~ label, +.p-inputgroup .p-component.p-focus ~ label, +.p-inputgroup .p-inputwrapper-focus ~ label { + @apply z-10; +} + +.p-inputgroup > .p-button:not(.p-button-icon-only) { + @apply w-auto; +} diff --git a/src/assets/primevue/inputnumber.css b/src/assets/primevue/inputnumber.css new file mode 100644 index 0000000..7d609e8 --- /dev/null +++ b/src/assets/primevue/inputnumber.css @@ -0,0 +1,84 @@ +@import './inputtext'; + +.p-inputnumber { + @apply inline-flex relative; +} + +.p-inputnumber-button { + @apply flex items-center justify-center flex-grow-0 flex-shrink-0 basis-auto cursor-pointer w-10 + bg-transparent enabled:hover:bg-surface-100 enabled:active:bg-surface-200 + border border-surface-300 enabled:hover:border-surface-300 enabled:active:border-surface-300 + text-surface-400 enabled:hover:text-surface-500 enabled:active:text-surface-600 + dark:bg-transparent dark:enabled:hover:bg-surface-800 dark:enabled:active:bg-surface-700 + dark:border-surface-700 dark:enabled:hover:border-surface-700 dark:enabled:active:border-surface-700 + dark:text-surface-400 dark:enabled:hover:text-surface-300 dark:enabled:active:text-surface-200 + transition-colors duration-200; +} + +.p-inputnumber-stacked .p-inputnumber-button { + @apply relative flex-auto border-none; +} + +.p-inputnumber-stacked .p-inputnumber-button-group { + @apply flex flex-col absolute top-px end-px h-[calc(100%-2px)] z-10; +} + +.p-inputnumber-stacked .p-inputnumber-increment-button { + @apply p-0 rounded-tr-[5px]; +} + +.p-inputnumber-stacked .p-inputnumber-decrement-button { + @apply p-0 rounded-br-[5px]; +} + +.p-inputnumber-horizontal .p-inputnumber-increment-button { + @apply order-3 rounded-e-md border-s-0; +} + +.p-inputnumber-horizontal .p-inputnumber-input { + @apply order-2 rounded-none; +} + +.p-inputnumber-horizontal .p-inputnumber-decrement-button { + @apply order-1 rounded-s-md border-r-0; +} + +.p-floatlabel:has(.p-inputnumber-horizontal) label { + @apply ms-10; +} + +.p-inputnumber-vertical { + @apply flex-col; +} + +.p-inputnumber-vertical .p-inputnumber-button { + @apply py-2; +} + +.p-inputnumber-vertical .p-inputnumber-increment-button { + @apply order-1 rounded-ss-md rounded-se-md w-full border-b-0; +} + +.p-inputnumber-vertical .p-inputnumber-input { + @apply order-2 rounded-none text-center; +} + +.p-inputnumber-vertical .p-inputnumber-decrement-button { + @apply order-3 rounded-ee-md rounded-es-md w-full border-t-0; +} + +.p-inputnumber-input { + @apply flex-auto; +} + +.p-inputnumber-fluid { + @apply w-full; +} + +.p-inputnumber-fluid .p-inputnumber-input { + @apply w-[1%]; +} + +.p-inputnumber-fluid.p-inputnumber-vertical .p-inputnumber-input { + @apply w-full; +} diff --git a/src/assets/primevue/inputotp.css b/src/assets/primevue/inputotp.css new file mode 100644 index 0000000..8e24b9b --- /dev/null +++ b/src/assets/primevue/inputotp.css @@ -0,0 +1,9 @@ +@import './inputtext'; + +.p-inputotp { + @apply flex items-center gap-2; +} + +.p-inputotp-input { + @apply text-center w-10; +} diff --git a/src/assets/primevue/inputtext.css b/src/assets/primevue/inputtext.css new file mode 100644 index 0000000..81b0f6f --- /dev/null +++ b/src/assets/primevue/inputtext.css @@ -0,0 +1,34 @@ +.p-inputtext { + @apply appearance-none rounded-md + border border-surface-300 dark:border-surface-700 + enabled:hover:border-surface-400 dark:enabled:hover:border-surface-600 + enabled:focus:border-primary dark:enabled:focus:border-primary + bg-surface-0 dark:bg-surface-950 + text-surface-700 dark:text-surface-0 + disabled:bg-surface-200 disabled:text-surface-500 dark:disabled:bg-surface-700 dark:disabled:text-surface-400 disabled:opacity-100 + placeholder:text-surface-500 dark:placeholder:text-surface-400 + px-3 py-2 + transition-colors duration-200 + shadow-[0_1px_2px_0_rgba(18,18,23,0.05)] + outline-none; +} + +.p-inputtext.p-invalid { + @apply border-red-400 dark:border-red-300; +} + +.p-inputtext.p-variant-filled { + @apply bg-surface-50 dark:bg-surface-800; +} + +.p-inputtext-sm { + @apply text-sm px-[0.625rem] py-[0.375rem]; +} + +.p-inputtext-lg { + @apply text-lg px-[0.875rem] py-[0.625rem]; +} + +.p-inputtext-fluid { + @apply w-full; +} diff --git a/src/assets/primevue/knob.css b/src/assets/primevue/knob.css new file mode 100644 index 0000000..ccc76c8 --- /dev/null +++ b/src/assets/primevue/knob.css @@ -0,0 +1,37 @@ +.p-knob-range { + @apply fill-none transition-[stroke] duration-100 ease-in; +} + +.p-knob-text { + @apply text-xl text-center; +} + +.p-knob svg { + @apply rounded-full + transition-colors duration-200 + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary; +} + +.p-knob svg path:first-child { + @apply stroke-surface-200 dark:stroke-surface-700; +} + +.p-knob svg path + path { + @apply stroke-primary; +} + +.p-knob svg text { + @apply fill-surface-500 dark:fill-surface-400; +} + +.p-knob-value { + animation-name: p-knob-dash-frame; + animation-fill-mode: forwards; + fill: none; +} + +@keyframes p-knob-dash-frame { + 100% { + stroke-dashoffset: 0; + } +} diff --git a/src/assets/primevue/listbox.css b/src/assets/primevue/listbox.css new file mode 100644 index 0000000..27cdf47 --- /dev/null +++ b/src/assets/primevue/listbox.css @@ -0,0 +1,81 @@ +@import './inputtext'; +@import './iconfield'; + +.p-listbox { + @apply bg-surface-0 dark:bg-surface-950 text-surface-700 dark:text-surface-0 + border border-surface-300 dark:border-surface-700 rounded-md + shadow-[0_1px_2px_0_rgba(18,18,23,0.05)] + transition-colors duration-200; +} + +.p-listbox.p-focus { + @apply border-primary; +} + +.p-listbox.p-disabled { + @apply bg-surface-200 text-surface-500 dark:bg-surface-700 dark:text-surface-400 opacity-100 cursor-default; +} + +.p-listbox.p-disabled .p-listbox-option { + @apply text-surface-500 dark:text-surface-400 cursor-default; +} + +.p-listbox.p-invalid { + @apply border-red-400 dark:border-red-300; +} + +.p-listbox-header { + @apply pt-2 pb-1 px-4; +} + +.p-listbox-filter { + @apply w-full; +} + +.p-listbox-list-container { + @apply overflow-auto; +} + +.p-listbox-list { + @apply list-none m-0 p-1 outline-none flex flex-col gap-[2px]; +} + +.p-listbox-option { + @apply flex items-center cursor-pointer relative overflow-hidden px-3 py-2 border-none rounded-sm + text-surface-700 dark:text-surface-0 + transition-colors duration-200; +} + +.p-listbox-striped li:nth-child(even of .p-listbox-option) { + @apply bg-surface-50 dark:bg-surface-900; +} + +.p-listbox .p-listbox-list .p-listbox-option.p-listbox-option-selected { + @apply bg-highlight; +} + +.p-listbox:not(.p-disabled) .p-listbox-option.p-listbox-option-selected.p-focus { + @apply bg-highlight-emphasis; +} + +.p-listbox:not(.p-disabled) + .p-listbox-option:not(.p-listbox-option-selected):not(.p-disabled).p-focus { + @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0; +} + +.p-listbox:not(.p-disabled) + .p-listbox-option:not(.p-listbox-option-selected):not(.p-disabled):hover { + @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0; +} + +.p-listbox-option-check-icon { + @apply relative -ms-[0.375rem] me-[0.375rem] text-surface-700 dark:text-surface-0; +} + +.p-listbox-option-group { + @apply m-0 px-3 py-2 text-surface-500 dark:text-surface-400 font-semibold; +} + +.p-listbox-empty-message { + @apply px-3 py-2; +} diff --git a/src/assets/primevue/megamenu.css b/src/assets/primevue/megamenu.css new file mode 100644 index 0000000..bc4c5e9 --- /dev/null +++ b/src/assets/primevue/megamenu.css @@ -0,0 +1,219 @@ +.p-megamenu { + @apply relative flex items-center rounded-md gap-2 + bg-surface-0 dark:bg-surface-900 + text-surface-700 dark:text-surface-0 + border border-surface-200 dark:border-surface-700; +} + +.p-megamenu-start, +.p-megamenu-end { + @apply flex items-center; +} + +.p-megamenu-root-list { + @apply m-0 p-0 list-none outline-none flex items-center flex-wrap gap-2; +} + +.p-megamenu-root-list > .p-megamenu-item > .p-menumegamenubar-item-content { + @apply rounded-md; +} + +.p-megamenu-root-list > .p-megamenu-item > .p-megamenu-item-content > .p-megamenu-item-link { + @apply px-3 py-2; +} + +.p-megamenu-item-content { + @apply transition-colors duration-200 rounded-sm text-surface-700 dark:text-surface-0; +} + +.p-megamenu-item-link { + @apply cursor-pointer flex items-center no-underline overflow-hidden relative text-inherit + px-3 py-2 gap-2 select-none outline-none; +} + +.p-megamenu-item-icon { + @apply text-surface-400 dark:text-surface-500; +} + +.p-megamenu-submenu-icon { + @apply text-surface-400 dark:text-surface-500 ms-auto text-sm w-[0.875rem] h-[0.875rem]; +} + +.p-megamenu-item.p-focus > .p-megamenu-item-content { + @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0; +} + +.p-megamenu-item.p-focus > .p-megamenu-item-content .p-megamenu-item-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-megamenu-item.p-focus > .p-megamenu-item-content .p-megamenu-submenu-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-megamenu-item:not(.p-disabled) > .p-megamenu-item-content:hover { + @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0; +} + +.p-megamenu-item:not(.p-disabled) > .p-megamenu-item-content:hover .p-megamenu-item-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-megamenu-item:not(.p-disabled) > .p-megamenu-item-content:hover .p-megamenu-submenu-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-megamenu-item-active > .p-megamenu-item-content { + @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0; +} + +.p-megamenu-item-active > .p-megamenu-item-content .p-megamenu-item-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-megamenu-item-active > .p-megamenu-item-content .p-megamenu-submenu-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-megamenu-overlay { + @apply hidden absolute w-auto z-10 start-0 min-w-full rounded-md + bg-surface-0 dark:bg-surface-900 + border border-surface-200 dark:border-surface-700 + text-surface-700 dark:text-surface-0 + shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]; +} + +.p-megamenu-root-list > .p-megamenu-item-active > .p-megamenu-overlay { + @apply block; +} + +.p-megamenu-submenu { + @apply m-0 p-1 list-none min-w-52 flex flex-col gap-[2px]; +} + +.p-megamenu-submenu-label { + @apply px-3 py-2 text-surface-500 dark:text-surface-400 font-semibold bg-transparent; +} + +.p-megamenu-separator { + @apply border-t border-surface-200 dark:border-surface-700; +} + +.p-megamenu-horizontal { + @apply items-center px-3 py-2; +} + +.p-megamenu-horizontal .p-megamenu-root-list { + @apply flex items-center flex-wrap gap-2; +} + +.p-megamenu-horizontal .p-megamenu-end { + @apply ms-auto self-center; +} + +.p-megamenu-vertical { + @apply inline-flex min-w-52 flex-col items-stretch p-1; +} + +.p-megamenu-vertical .p-megamenu-root-list { + @apply items-stretch flex-col gap-[2px]; +} + +.p-megamenu-vertical .p-megamenu-root-list > .p-megamenu-item-active > .p-megamenu-overlay { + @apply start-full top-0; +} + +.p-megamenu-vertical + .p-megamenu-root-list + > .p-megamenu-item + > .p-megamenu-item-content + .p-megamenu-submenu-icon { + @apply ms-auto; +} + +.p-megamenu-grid { + @apply flex; +} + +.p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + @apply flex-grow-0 flex-shrink-0 basis-auto p-2; +} + +.p-megamenu-col-2 { + @apply w-1/6; +} + +.p-megamenu-col-3 { + @apply w-1/4; +} + +.p-megamenu-col-4 { + @apply w-1/3; +} + +.p-megamenu-col-6 { + @apply w-1/2; +} + +.p-megamenu-col-12 { + @apply w-full; +} + +.p-megamenu-button { + @apply hidden justify-center items-center cursor-pointer w-7 h-7 relative border-none rounded-full + text-surface-500 dark:text-surface-400 hover:text-surface-600 dark:hover:text-surface-300 + bg-transparent hover:bg-surface-100 dark:hover:bg-surface-800 + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary + transition-colors duration-200; +} + +.p-megamenu-mobile { + @apply flex; +} + +.p-megamenu-mobile .p-megamenu-button { + @apply flex; +} + +.p-megamenu-mobile .p-megamenu-root-list { + @apply absolute hidden flex-col top-full start-0 z-10 w-full p-1 gap-[2px] + bg-surface-0 dark:bg-surface-900 + border border-surface-200 dark:border-surface-700 + shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]; +} + +.p-megamenu-mobile-active .p-megamenu-root-list { + @apply flex; +} + +.p-megamenu-mobile .p-megamenu-root-list .p-megamenu-item { + @apply w-full static; +} + +.p-megamenu-mobile .p-megamenu-overlay { + @apply static border-none rounded-none shadow-none; +} + +.p-megamenu-mobile .p-megamenu-grid { + @apply flex-wrap overflow-auto max-h-[90%]; +} + +.p-megamenu-mobile + .p-megamenu-root-list + > .p-megamenu-item + > .p-megamenu-item-content + .p-megamenu-submenu-icon { + @apply ms-auto transition-transform duration-[200ms]; +} + +.p-megamenu-mobile + .p-megamenu-root-list + > .p-megamenu-item-active + > .p-megamenu-item-content + .p-megamenu-submenu-icon { + @apply -rotate-180; +} diff --git a/src/assets/primevue/menu.css b/src/assets/primevue/menu.css new file mode 100644 index 0000000..cfd2d4f --- /dev/null +++ b/src/assets/primevue/menu.css @@ -0,0 +1,51 @@ +.p-menu { + @apply bg-surface-0 dark:bg-surface-900 + text-surface-700 dark:text-surface-0 + border border-surface-200 dark:border-surface-700 + rounded-md min-w-52; +} + +.p-menu-list { + @apply m-0 p-1 list-none outline-none flex flex-col gap-[2px]; +} + +.p-menu-item-content { + @apply transition-colors duration-200 rounded-sm text-surface-700 dark:text-surface-0; +} + +.p-menu-item-link { + @apply cursor-pointer flex items-center no-underline overflow-hidden relative text-inherit + px-3 py-2 gap-2 select-none outline-none; +} + +.p-menu-item-icon { + @apply text-surface-400 dark:text-surface-500; +} + +.p-menu-item.p-focus .p-menu-item-content { + @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0; +} + +.p-menu-item.p-focus .p-menu-item-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-menu-item:not(.p-disabled) .p-menu-item-content:hover { + @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0; +} + +.p-menu-item:not(.p-disabled) .p-menu-item-content:hover .p-menu-item-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-menu-overlay { + @apply shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]; +} + +.p-menu-submenu-label { + @apply bg-transparent px-3 py-2 text-surface-500 dark:text-surface-400 font-semibold; +} + +.p-menu-separator { + @apply border-t border-surface-200 dark:border-surface-700; +} diff --git a/src/assets/primevue/menubar.css b/src/assets/primevue/menubar.css new file mode 100644 index 0000000..af59a65 --- /dev/null +++ b/src/assets/primevue/menubar.css @@ -0,0 +1,181 @@ +.p-menubar { + @apply flex items-center rounded-md px-3 py-2 gap-2 + bg-surface-0 dark:bg-surface-900 + text-surface-700 dark:text-surface-0 + border border-surface-200 dark:border-surface-700; +} + +.p-menubar-start, +.p-megamenu-end { + @apply flex items-center; +} + +.p-menubar-root-list, +.p-menubar-submenu { + @apply flex m-0 p-0 list-none outline-none; +} + +.p-menubar-root-list { + @apply items-center flex-wrap gap-2; +} + +.p-menubar-root-list > .p-menubar-item > .p-menubar-item-content { + @apply rounded-md; +} + +.p-menubar-root-list > .p-menubar-item > .p-menubar-item-content > .p-menubar-item-link { + @apply px-3 py-2; +} + +.p-menubar-item-content { + @apply transition-colors duration-200 rounded-sm text-surface-700 dark:text-surface-0; +} + +.p-menubar-item-link { + @apply cursor-pointer flex items-center no-underline overflow-hidden relative text-inherit + px-3 py-2 gap-2 select-none outline-none; +} + +.p-menubar-item-icon { + @apply text-surface-400 dark:text-surface-500; +} + +.p-menubar-submenu-icon { + @apply text-surface-400 dark:text-surface-500 ms-auto text-sm w-[0.875rem] h-[0.875rem]; +} + +.p-menubar-submenu-icon:dir(rtl) { + @apply rotate-180; +} + +.p-menubar-item.p-focus > .p-menubar-item-content { + @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0; +} + +.p-menubar-item.p-focus > .p-menubar-item-content .p-menubar-item-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-menubar-item.p-focus > .p-menubar-item-content .p-menubar-submenu-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-menubar-item:not(.p-disabled) > .p-menubar-item-content:hover { + @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0; +} + +.p-menubar-item:not(.p-disabled) > .p-menubar-item-content:hover .p-menubar-item-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-menubar-item:not(.p-disabled) > .p-menubar-item-content:hover .p-menubar-submenu-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-menubar-item-active > .p-menubar-item-content { + @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0; +} + +.p-menubar-item-active > .p-menubar-item-content .p-menubar-item-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-menubar-item-active > .p-menubar-item-content .p-menubar-submenu-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-menubar-submenu { + @apply hidden absolute min-w-52 z-10 + bg-surface-0 dark:bg-surface-900 + border border-surface-200 dark:border-surface-700 + text-surface-700 dark:text-surface-0 + flex-col p-1 gap-[2px] rounded-md + shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]; +} + +.p-menubar-submenu .p-menubar-separator { + @apply border-t border-surface-200 dark:border-surface-700; +} + +.p-menubar-submenu .p-menubar-item { + @apply relative; +} + +.p-menubar-submenu > .p-menubar-item-active > .p-menubar-submenu { + @apply block start-full top-0; +} + +.p-menubar-end { + @apply ms-auto self-center; +} + +.p-menubar-button { + @apply hidden justify-center items-center cursor-pointer w-7 h-7 relative border-none rounded-full + text-surface-500 dark:text-surface-400 hover:text-surface-600 dark:hover:text-surface-300 + bg-transparent hover:bg-surface-100 dark:hover:bg-surface-800 + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary + transition-colors duration-200; +} + +.p-menubar-mobile { + @apply relative; +} + +.p-menubar-mobile .p-menubar-button { + @apply flex; +} + +.p-menubar-mobile .p-menubar-root-list { + @apply absolute hidden w-full flex-col top-full start-0 z-10 p-1 gap-[2px] rounded-md + border border-surface-200 dark:border-surface-700 + bg-surface-0 dark:bg-surface-900 + shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]; +} + +.p-menubar-mobile + .p-menubar-root-list + > .p-menubar-item + > .p-menubar-item-content + > .p-menubar-item-link { + @apply px-3 py-3; +} + +.p-menubar-mobile-active .p-menubar-root-list { + @apply flex; +} + +.p-menubar-mobile .p-menubar-root-list .p-menubar-item { + @apply w-full static; +} + +.p-menubar-mobile .p-menubar-root-list .p-menubar-separator { + @apply border-t border-surface-200 dark:border-surface-700; +} + +.p-menubar-mobile + .p-menubar-root-list + > .p-menubar-item + > .p-menubar-item-content + .p-menubar-submenu-icon { + @apply ms-auto transition-transform duration-[200ms]; +} + +.p-menubar-mobile + .p-menubar-root-list + > .p-menubar-item-active + > .p-menubar-item-content + .p-menubar-submenu-icon { + @apply -rotate-180; +} + +.p-menubar-mobile .p-menubar-submenu .p-menubar-submenu-icon { + @apply transition-transform duration-200 rotate-90; +} + +.p-menubar-mobile .p-menubar-item-active > .p-menubar-item-content .p-menubar-submenu-icon { + @apply -rotate-90; +} + +.p-menubar-mobile .p-menubar-submenu { + @apply w-full static shadow-none border-none ps-4 pe-0; +} diff --git a/src/assets/primevue/message.css b/src/assets/primevue/message.css new file mode 100644 index 0000000..90f2ceb --- /dev/null +++ b/src/assets/primevue/message.css @@ -0,0 +1,212 @@ +.p-message { + @apply rounded-md outline outline-1; +} + +.p-message-content { + @apply flex items-center px-3 py-2 gap-2 h-full; +} + +.p-message-icon { + @apply flex-shrink-0; +} + +.p-message-close-button { + @apply flex items-center justify-center flex-shrink-0 ms-auto overflow-hidden relative cursor-pointer select-none + w-7 h-7 rounded-full bg-transparent transition-colors duration-200 text-inherit p-0 border-none + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2; +} + +.p-message-info { + @apply bg-blue-50/95 outline-blue-200 text-blue-600 + dark:bg-blue-500/15 dark:outline-blue-700/35 dark:text-blue-500 + shadow-[0px_4px_8px_0px_theme(colors.blue.500/0.04)]; +} + +.p-message-info .p-message-close-button { + @apply hover:bg-blue-100 focus-visible:outline-blue-600 + dark:hover:bg-white/5 dark:focus-visible:outline-blue-500; +} + +.p-message-info.p-message-outlined { + @apply text-blue-500 outline-blue-500 dark:text-blue-600 dark:outline-blue-600; +} + +.p-message-info.p-message-simple { + @apply text-blue-500 dark:text-blue-600; +} + +.p-message-success { + @apply bg-green-50/95 outline-green-200 text-green-600 + dark:bg-green-500/15 dark:outline-green-700/35 dark:text-green-500 + shadow-[0px_4px_8px_0px_theme(colors.green.500/0.04)]; +} + +.p-message-success .p-message-close-button { + @apply hover:bg-green-100 focus-visible:outline-green-600 + dark:hover:bg-white/5 dark:focus-visible:outline-green-500; +} + +.p-message-success.p-message-outlined { + @apply text-green-500 outline-green-500 dark:text-green-600 dark:outline-green-600; +} + +.p-message-success.p-message-simple { + @apply text-green-500 dark:text-green-600; +} + +.p-message-warn { + @apply bg-yellow-50/95 outline-yellow-200 text-yellow-600 + dark:bg-yellow-500/15 dark:outline-yellow-700/35 dark:text-yellow-500 + shadow-[0px_4px_8px_0px_theme(colors.yellow.500/0.04)]; +} + +.p-message-warn .p-message-close-button { + @apply hover:bg-yellow-100 focus-visible:outline-yellow-600 + dark:hover:bg-white/5 dark:focus-visible:outline-yellow-500; +} + +.p-message-warn.p-message-outlined { + @apply text-yellow-500 outline-yellow-500 dark:text-yellow-600 dark:outline-yellow-600; +} + +.p-message-warn.p-message-simple { + @apply text-yellow-500 dark:text-yellow-600; +} + +.p-message-error { + @apply bg-red-50/95 outline-red-200 text-red-600 + dark:bg-red-500/15 dark:outline-red-700/35 dark:text-red-500 + shadow-[0px_4px_8px_0px_theme(colors.red.500/0.04)]; +} + +.p-message-error .p-message-close-button { + @apply hover:bg-red-100 focus-visible:outline-red-600 + dark:hover:bg-white/5 dark:focus-visible:outline-red-500; +} + +.p-message-error.p-message-outlined { + @apply text-red-500 outline-red-500 dark:text-red-600 dark:outline-red-600; +} + +.p-message-error.p-message-simple { + @apply text-red-500 dark:text-red-600; +} + +.p-message-secondary { + @apply bg-surface-100 outline-surface-200 text-surface-600 + dark:bg-surface-800 dark:outline-surface-700 dark:text-surface-300 + shadow-[0px_4px_8px_0px_rgba(0,0,0,0.04)]; +} + +.p-message-secondary .p-message-close-button { + @apply hover:bg-surface-200 focus-visible:outline-surface-600 + dark:hover:bg-surface-700 dark:focus-visible:outline-surface-300; +} + +.p-message-secondary.p-message-outlined { + @apply text-surface-500 outline-surface-500 dark:text-surface-600 dark:outline-surface-600; +} + +.p-message-secondary.p-message-simple { + @apply text-surface-500 dark:text-surface-600; +} + +.p-message-contrast { + @apply bg-surface-900 outline-surface-950 text-surface-50 + dark:bg-surface-0 dark:outline-surface-100 dark:text-surface-950 + shadow-[0px_4px_8px_0px_rgba(0,0,0,0.04)]; +} + +.p-message-contrast .p-message-close-button { + @apply hover:bg-surface-800 focus-visible:outline-surface-50 + dark:hover:bg-surface-100 dark:focus-visible:outline-surface-950; +} + +.p-message-contrast.p-message-outlined { + @apply text-surface-950 outline-surface-950 dark:text-surface-0 dark:outline-surface-0; +} + +.p-message-contrast.p-message-simple { + @apply text-surface-950 dark:text-surface-0; +} + +.p-message-text { + @apply text-base font-medium; +} + +.p-message-icon { + @apply text-lg w-[1.125rem] h-[1.125rem]; +} + +.p-message-enter-from { + @apply opacity-0; +} + +.p-message-enter-active { + @apply transition-opacity duration-300; +} + +.p-message.p-message-leave-from { + @apply max-h-[1000px]; +} + +.p-message.p-message-leave-to { + @apply max-h-0 opacity-0 m-0; +} + +.p-message-leave-active { + @apply overflow-hidden [transition:max-height_0.45s_cubic-bezier(0,1,0,1),opacity_0.3s,margin0.3s]; +} + +.p-message-leave-active .p-message-close-button { + @apply opacity-0; +} + +.p-message-sm .p-message-content { + @apply px-2.5 py-[0.375rem]; +} + +.p-message-sm .p-message-text { + @apply text-sm; +} + +.p-message-sm .p-message-icon { + @apply w-4 h-4 text-sm; +} + +.p-message-sm .p-message-close-icon { + @apply w-3.5 h-3.5 text-sm; +} + +.p-message-lg .p-message-content { + @apply px-3.5 py-2.5; +} + +.p-message-lg .p-message-text { + @apply text-xl; +} + +.p-message-lg .p-message-icon { + @apply w-5 h-5 text-xl; +} + +.p-message-lg .p-message-close-icon { + @apply w-[1.125rem] h-[1.125rem] text-xl; +} + +.p-message-outlined { + @apply bg-transparent outline outline-1; +} + +.p-message-simple { + @apply bg-transparent outline-none shadow-none; +} + +.p-message-simple .p-message-content { + @apply p-0; +} + +.p-message-outlined .p-message-close-button:hover, +.p-message-simple .p-message-close-button:hover { + @apply bg-transparent; +} diff --git a/src/assets/primevue/metergroup.css b/src/assets/primevue/metergroup.css new file mode 100644 index 0000000..ba84d6e --- /dev/null +++ b/src/assets/primevue/metergroup.css @@ -0,0 +1,67 @@ +.p-metergroup { + @apply flex gap-4; +} + +.p-metergroup-meters { + @apply flex bg-surface-200 dark:bg-surface-700 rounded-md; +} + +.p-metergroup-label-list { + @apply flex flex-wrap m-0 p-0 list-none; +} + +.p-metergroup-label { + @apply inline-flex items-center gap-2; +} + +.p-metergroup-label-marker { + @apply inline-flex w-2 h-2 rounded-full; +} + +.p-metergroup-label-icon { + @apply text-base w-4 h-4; +} + +.p-metergroup-horizontal { + @apply flex-col; +} + +.p-metergroup-label-list-horizontal { + @apply gap-4; +} + +.p-metergroup-horizontal .p-metergroup-meters { + @apply h-2; +} + +.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + @apply rounded-s-md; +} + +.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + @apply rounded-e-md; +} + +.p-metergroup-vertical { + @apply flex-row; +} + +.p-metergroup-label-list-vertical { + @apply flex-col gap-2; +} + +.p-metergroup-vertical .p-metergroup-meters { + @apply flex-col w-2 h-full; +} + +.p-metergroup-vertical .p-metergroup-label-list { + @apply items-start; +} + +.p-metergroup-vertical .p-metergroup-meter:first-of-type { + @apply rounded-ss-md rounded-se-md; +} + +.p-metergroup-vertical .p-metergroup-meter:last-of-type { + @apply rounded-ee-md rounded-es-md; +} diff --git a/src/assets/primevue/multiselect.css b/src/assets/primevue/multiselect.css new file mode 100644 index 0000000..4412b02 --- /dev/null +++ b/src/assets/primevue/multiselect.css @@ -0,0 +1,143 @@ +@import './checkbox'; +@import './chip'; +@import './inputtext'; +@import './iconfield'; + +.p-multiselect { + @apply inline-flex cursor-pointer relative select-none rounded-md + bg-surface-0 dark:bg-surface-950 + border border-surface-300 dark:border-surface-700 + shadow-[0_1px_2px_0_rgba(18,18,23,0.05)] + transition-colors duration-200; +} + +.p-multiselect:not(.p-disabled):hover { + @apply border-surface-400 dark:border-surface-600; +} + +.p-multiselect:not(.p-disabled).p-focus { + @apply border-primary; +} + +.p-multiselect.p-variant-filled { + @apply bg-surface-50 dark:bg-surface-800; +} + +.p-multiselect.p-invalid { + @apply border-red-400 dark:border-red-300; +} + +.p-multiselect.p-disabled { + @apply bg-surface-200 text-surface-500 dark:bg-surface-700 dark:text-surface-400 opacity-100 cursor-default; +} + +.p-multiselect-dropdown { + @apply flex items-center justify-center shrink-0 bg-transparent + text-surface-500 dark:text-surface-400 w-10 rounded-e-md; +} + +.p-multiselect-clear-icon { + @apply absolute top-1/2 -mt-2 text-surface-500 dark:text-surface-400 end-10; +} + +.p-multiselect-label-container { + @apply overflow-hidden flex-auto; +} + +.p-multiselect-label { + @apply flex items-center gap-1 whitespace-nowrap overflow-hidden text-ellipsis px-3 py-2 text-surface-700 dark:text-surface-0; +} + +.p-multiselect-label.p-placeholder { + @apply text-surface-500 dark:text-surface-400; +} + +.p-multiselect.p-disabled .p-multiselect-label { + @apply text-surface-500 dark:text-surface-400; +} + +.p-multiselect-label-empty { + @apply overflow-hidden opacity-0; +} + +.p-multiselect .p-multiselect-overlay { + @apply min-w-full; +} + +.p-multiselect-overlay { + @apply absolute top-0 left-0 rounded-md + bg-surface-0 dark:bg-surface-900 + border border-surface-200 dark:border-surface-700 + text-surface-700 dark:text-surface-0 + shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]; +} + +.p-multiselect-header { + @apply flex items-center pt-2 pb-1 px-4; +} + +.p-multiselect-header .p-checkbox { + @apply me-2; +} + +.p-multiselect-filter-container { + @apply flex-auto; +} + +.p-multiselect-filter { + @apply w-full; +} + +.p-multiselect-list-container { + @apply overflow-auto; +} + +.p-multiselect-list { + @apply m-0 p-1 list-none gap-[2px] flex flex-col; +} + +.p-multiselect-option { + @apply cursor-pointer font-normal whitespace-nowrap relative overflow-hidden flex items-center gap-2 px-3 py-2 + rounded-sm text-surface-700 dark:text-surface-0 bg-transparent border-none + transition-colors duration-200; +} + +.p-multiselect-option:not(.p-disabled).p-focus { + @apply bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-0; +} + +.p-multiselect-option-group { + @apply m-0 px-3 py-2 bg-transparent text-surface-500 dark:text-surface-400 font-semibold; +} + +.p-multiselect-empty-message { + @apply px-3 py-2; +} + +.p-multiselect-label .p-chip { + @apply py-1 rounded-sm; +} + +.p-multiselect-label:has(.p-chip) { + @apply py-1 px-[0.375rem]; +} + +.p-multiselect-fluid { + @apply flex; +} + +.p-multiselect-sm .p-multiselect-label { + @apply text-sm px-[0.625rem] py-[0.375rem]; +} + +.p-multiselect-sm .p-multiselect-dropdown .p-icon { + @apply text-sm w-[0.875rem] h-[0.875rem]; +} + +.p-multiselect-lg .p-multiselect-label { + @apply text-lg px-[0.875rem] py-[0.625rem]; +} + +.p-multiselect-lg .p-multiselect-dropdown .p-icon { + @apply text-lg w-[1.125rem] h-[1.125rem]; +} diff --git a/src/assets/primevue/orderlist.css b/src/assets/primevue/orderlist.css new file mode 100644 index 0000000..8f8c57d --- /dev/null +++ b/src/assets/primevue/orderlist.css @@ -0,0 +1,10 @@ +@import './button'; +@import './listbox'; + +.p-orderlist { + @apply flex gap-[1.125rem]; +} + +.p-orderlist-controls { + @apply flex flex-col justify-center gap-2; +} diff --git a/src/assets/primevue/organizationchart.css b/src/assets/primevue/organizationchart.css new file mode 100644 index 0000000..0d8c3be --- /dev/null +++ b/src/assets/primevue/organizationchart.css @@ -0,0 +1,73 @@ +.p-organizationchart-table { + @apply border-spacing-0 border-separate my-0 mx-auto; +} + +.p-organizationchart-table > tbody > tr > td { + @apply text-center align-top py-0 px-3; +} + +.p-organizationchart-node { + @apply inline-block relative py-3 px-4 rounded-md + border border-surface-200 dark:border-surface-700 + bg-surface-0 dark:bg-surface-900 + text-surface-700 dark:text-surface-0 + transition-colors duration-200; +} + +.p-organizationchart-node:has(.p-organizationchart-node-toggle-button) { + @apply pt-3 px-4 pb-5; +} + +.p-organizationchart-node.p-organizationchart-node-selectable:not( + .p-organizationchart-node-selected + ):hover { + @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0; +} + +.p-organizationchart-node-selected { + @apply bg-highlight; +} + +.p-organizationchart-node-toggle-button { + @apply absolute -bottom-3 -ms-3 z-20 start-1/2 select-none cursor-pointer w-6 h-6 no-underline rounded-full + inline-flex items-center justify-center transition-colors duration-200 + border border-surface-200 dark:border-surface-700 + bg-surface-0 text-surface-500 hover:bg-surface-100 hover:text-surface-700 + dark:bg-surface-900 dark:text-surface-400 dark:hover:bg-surface-800 dark:hover:text-surface-0 + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary; +} +.p-organizationchart-node-toggle-button-icon { + @apply relative top-px; +} + +.p-organizationchart-connector-down { + @apply my-0 mx-auto h-6 w-px bg-surface-200 dark:bg-surface-700; +} + +.p-organizationchart-connector-right { + @apply rounded-none; +} + +.p-organizationchart-connector-left { + @apply rounded-none border-e border-surface-200 dark:border-surface-700; +} + +.p-organizationchart-connector-top { + @apply border-t border-surface-200 dark:border-surface-700; +} + +.p-organizationchart-node-selectable { + @apply cursor-pointer; +} + +.p-organizationchart-connectors :nth-child(1 of .p-organizationchart-connector-left) { + @apply border-e-0; +} + +.p-organizationchart-connectors :nth-last-child(1 of .p-organizationchart-connector-left) { + @apply rounded-se-md; +} + +.p-organizationchart-connectors :nth-child(1 of .p-organizationchart-connector-right) { + @apply border-s border-surface-200 dark:border-surface-700 rounded-ss-md; +} diff --git a/src/assets/primevue/overlaybadge.css b/src/assets/primevue/overlaybadge.css new file mode 100644 index 0000000..87d5450 --- /dev/null +++ b/src/assets/primevue/overlaybadge.css @@ -0,0 +1,13 @@ +@import './badge'; + +.p-overlaybadge { + @apply relative; +} + +.p-overlaybadge .p-badge { + @apply absolute top-0 end-0 translate-x-[50%] translate-y-[-50%] origin-[100%_0] m-0 outline outline-2 outline-surface-0 dark:outline-surface-900; +} + +.p-overlaybadge .p-badge:dir(rtl) { + @apply -translate-x-1/2 -translate-y-1/2; +} diff --git a/src/assets/primevue/paginator.css b/src/assets/primevue/paginator.css new file mode 100644 index 0000000..e31e85e --- /dev/null +++ b/src/assets/primevue/paginator.css @@ -0,0 +1,58 @@ +.p-paginator { + @apply flex items-center justify-center flex-wrap py-2 px-4 rounded-md gap-1 + bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0; +} + +.p-paginator-content { + @apply flex items-center justify-center flex-wrap gap-1; +} + +.p-paginator-content-start { + @apply ms-auto; +} + +.p-paginator-content-end { + @apply me-auto; +} + +.p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev { + @apply cursor-pointer inline-flex items-center justify-center leading-none overflow-hidden relative + bg-transparent border-none min-w-10 h-10 transition-colors duration-200 rounded-full p-0 m-0 + text-surface-500 dark:text-surface-400 + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary; +} + +.p-paginator-page:not(.p-disabled):not(.p-paginator-page-selected):hover, +.p-paginator-first:not(.p-disabled):hover, +.p-paginator-prev:not(.p-disabled):hover, +.p-paginator-next:not(.p-disabled):hover, +.p-paginator-last:not(.p-disabled):hover { + @apply bg-surface-100 text-surface-600 dark:bg-surface-800 dark:text-surface-300; +} + +.p-paginator-page.p-paginator-page-selected { + @apply bg-highlight; +} + +.p-paginator-current { + @apply text-surface-500 dark:text-surface-400; +} + +.p-paginator-pages { + @apply flex items-center gap-1; +} + +.p-paginator-jtp-input .p-inputtext { + @apply max-w-10; +} + +.p-paginator-first:dir(rtl), +.p-paginator-prev:dir(rtl), +.p-paginator-next:dir(rtl), +.p-paginator-last:dir(rtl) { + @apply rotate-180; +} diff --git a/src/assets/primevue/panel.css b/src/assets/primevue/panel.css new file mode 100644 index 0000000..e661f5c --- /dev/null +++ b/src/assets/primevue/panel.css @@ -0,0 +1,27 @@ +@import './button'; + +.p-panel { + @apply border border-surface-200 dark:border-surface-700 rounded-md + bg-surface-0 dark:bg-surface-900 + text-surface-700 dark:text-surface-0; +} + +.p-panel-header { + @apply flex justify-between items-center p-[1.125rem]; +} + +.p-panel-toggleable .p-panel-header { + @apply py-[0.375rem] px-[1.125rem]; +} + +.p-panel-title { + @apply leading-none font-semibold; +} + +.p-panel-content { + @apply pt-0 pb-[1.125rem] px-[1.125rem]; +} + +.p-panel-footer { + @apply pt-0 pb-[1.125rem] px-[1.125rem]; +} diff --git a/src/assets/primevue/panelmenu.css b/src/assets/primevue/panelmenu.css new file mode 100644 index 0000000..8c47079 --- /dev/null +++ b/src/assets/primevue/panelmenu.css @@ -0,0 +1,98 @@ +.p-panelmenu { + @apply flex flex-col gap-2; +} + +.p-panelmenu-panel { + @apply bg-surface-0 dark:bg-surface-900 rounded-md p-1 + border border-surface-200 dark:border-surface-700 + text-surface-700 dark:text-surface-0; +} + +.p-panelmenu-header { + @apply outline-none; +} + +.p-panelmenu-header-content { + @apply rounded-md transition-colors duration-200 text-surface-700 dark:text-surface-0; +} + +.p-panelmenu-header-link { + @apply flex items-center gap-2 px-3 py-2 select-none cursor-pointer relative no-underline text-inherit; +} + +.p-panelmenu-header-icon, +.p-panelmenu-item-icon { + @apply text-surface-400 dark:text-surface-500; +} + +.p-panelmenu-submenu-icon { + @apply text-surface-400 dark:text-surface-500; +} + +.p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content { + @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0; +} + +.p-panelmenu-header:not(.p-disabled):focus-visible + .p-panelmenu-header-content + .p-panelmenu-header-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-panelmenu-header:not(.p-disabled):focus-visible + .p-panelmenu-header-content + .p-panelmenu-submenu-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-panelmenu-header:not(.p-panelmenu-header-active) .p-panelmenu-submenu-icon:dir(rtl) { + @apply rotate-180; +} + +.p-panelmenu-header:not(.p-disabled) .p-panelmenu-header-content:hover { + @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0; +} + +.p-panelmenu-header:not(.p-disabled) .p-panelmenu-header-content:hover .p-panelmenu-header-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-panelmenu-header:not(.p-disabled) .p-panelmenu-header-content:hover .p-panelmenu-submenu-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-panelmenu-submenu { + @apply m-0 py-0 ps-4 outline-none list-none; +} + +.p-panelmenu-item-link { + @apply flex items-center gap-2 px-3 py-2 select-none cursor-pointer no-underline text-inherit relative overflow-hidden; +} + +.p-panelmenu-item-content { + @apply rounded-md transition-colors duration-200 text-surface-700 dark:text-surface-0; +} + +.p-panelmenu-item.p-focus > .p-panelmenu-item-content { + @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0; +} + +.p-panelmenu-item.p-focus > .p-panelmenu-item-content .p-panelmenu-item-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-panelmenu-item.p-focus > .p-panelmenu-item-content .p-panelmenu-submenu-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-panelmenu-item:not(.p-disabled) > .p-panelmenu-item-content:hover { + @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0; +} + +.p-panelmenu-item:not(.p-disabled) > .p-panelmenu-item-content:hover .p-panelmenu-item-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-panelmenu-item:not(.p-disabled) > .p-panelmenu-item-content:hover .p-panelmenu-submenu-icon { + @apply text-surface-500 dark:text-surface-400; +} diff --git a/src/assets/primevue/password.css b/src/assets/primevue/password.css new file mode 100644 index 0000000..50d01b0 --- /dev/null +++ b/src/assets/primevue/password.css @@ -0,0 +1,61 @@ +@import './inputtext'; + +.p-password { + @apply inline-flex relative; +} + +.p-password .p-password-overlay { + @apply min-w-full; +} + +.p-password-meter { + @apply h-3 bg-surface-200 dark:bg-surface-700 rounded-md; +} + +.p-password-meter-label { + @apply h-full w-0 transition-[width] duration-1000 ease-in-out rounded-md; +} + +.p-password-meter-weak { + @apply bg-red-500 dark:bg-red-400; +} + +.p-password-meter-medium { + @apply bg-amber-500 dark:bg-amber-400; +} + +.p-password-meter-strong { + @apply bg-green-500 dark:bg-green-400; +} + +.p-password-fluid { + @apply flex; +} + +.p-password-fluid .p-password-input { + @apply w-full; +} + +.p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + @apply hidden; +} + +.p-password-overlay { + @apply p-3 rounded-md bg-surface-0 dark:bg-surface-900 + border border-surface-200 dark:border-surface-700 + text-surface-700 dark:text-surface-0 + shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]; +} + +.p-password-content { + @apply flex flex-col gap-2; +} + +.p-password-toggle-mask-icon { + @apply end-3 text-surface-500 dark:text-surface-400 absolute top-1/2 -mt-2 w-4 h-4; +} + +.p-password:has(.p-password-toggle-mask-icon) .p-password-input { + @apply pe-10; +} diff --git a/src/assets/primevue/picklist.css b/src/assets/primevue/picklist.css new file mode 100644 index 0000000..2fded46 --- /dev/null +++ b/src/assets/primevue/picklist.css @@ -0,0 +1,18 @@ +@import './button'; +@import './listbox'; + +.p-picklist { + @apply flex gap-[1.125rem]; +} + +.p-picklist-controls { + @apply flex flex-col justify-center gap-2; +} + +.p-picklist-list-container { + @apply flex-grow flex-shrink basis-1/2; +} + +.p-picklist .p-listbox { + @apply h-full; +} diff --git a/src/assets/primevue/popover.css b/src/assets/primevue/popover.css new file mode 100644 index 0000000..76a4e97 --- /dev/null +++ b/src/assets/primevue/popover.css @@ -0,0 +1,46 @@ +.p-popover { + @apply mt-[10px] bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0 + border border-surface-200 dark:border-surface-700 + rounded-md shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)] + before:bottom-full before:left-5 before:h-0 before:w-0 before:absolute before:pointer-events-none + before:border-[10px] before:-ms-[10px] before:border-transparent before:border-b-surface-200 dark:before:border-b-surface-700 + after:bottom-full after:left-5 after:h-0 after:w-0 after:absolute after:pointer-events-none + after:border-[8px] after:-ms-[8px] after:border-transparent after:border-b-surface-0 dark:after:border-b-surface-900; +} + +.p-popover-content { + @apply p-3; +} + +.p-popover-flipped { + @apply -mt-[10px] mb-[10px]; +} + +.p-popover-enter-from { + @apply opacity-0 scale-y-75; +} + +.p-popover-leave-to { + @apply opacity-0; +} + +.p-popover-enter-active { + @apply [transition:transform_120ms_cubic-bezier(0,0,0.2,1),opacity_120ms_cubic-bezier(0,0,0.2,1)]; +} + +.p-popover-leave-active { + @apply transition-opacity duration-100 ease-linear; +} + +.p-popover-flipped:after, +.p-popover-flipped:before { + @apply bottom-auto top-full; +} + +.p-popover.p-popover-flipped:after { + @apply border-b-transparent border-t-surface-0 dark:border-t-surface-900; +} + +.p-popover.p-popover-flipped:before { + @apply border-b-transparent border-t-surface-200 dark:border-t-surface-700; +} diff --git a/src/assets/primevue/progressbar.css b/src/assets/primevue/progressbar.css new file mode 100644 index 0000000..ed70e0e --- /dev/null +++ b/src/assets/primevue/progressbar.css @@ -0,0 +1,66 @@ +.p-progressbar { + @apply relative overflow-hidden h-5 bg-surface-200 dark:bg-surface-700 rounded-md; +} + +.p-progressbar-value { + @apply m-0 bg-primary; +} + +.p-progressbar-label { + @apply text-primary-contrast text-xs font-semibold; +} + +.p-progressbar-determinate .p-progressbar-value { + @apply h-full w-0 absolute flex items-center justify-center overflow-hidden transition-[width] duration-1000 ease-in-out; +} + +.p-progressbar-determinate .p-progressbar-label { + @apply inline-flex; +} + +.p-progressbar-indeterminate .p-progressbar-value::before { + @apply content-[''] absolute bg-inherit top-0 start-0 bottom-0 will-change-[inset-inline-start,inset-inline-end]; +} + +.p-progressbar-indeterminate .p-progressbar-value::before { + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; +} + +.p-progressbar-indeterminate .p-progressbar-value::after { + @apply content-[''] absolute bg-inherit top-0 start-0 bottom-0 will-change-[inset-inline-start,inset-inline-end]; +} + +.p-progressbar-indeterminate .p-progressbar-value::after { + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation-delay: 1.15s; +} + +@keyframes p-progressbar-indeterminate-anim { + 0% { + inset-inline-start: -35%; + inset-inline-end: 100%; + } + 60% { + inset-inline-start: 100%; + inset-inline-end: -90%; + } + 100% { + inset-inline-start: 100%; + inset-inline-end: -90%; + } +} + +@keyframes p-progressbar-indeterminate-anim-short { + 0% { + inset-inline-start: -200%; + inset-inline-end: 100%; + } + 60% { + inset-inline-start: 107%; + inset-inline-end: -8%; + } + 100% { + inset-inline-start: 107%; + inset-inline-end: -8%; + } +} diff --git a/src/assets/primevue/progressspinner.css b/src/assets/primevue/progressspinner.css new file mode 100644 index 0000000..2e8d713 --- /dev/null +++ b/src/assets/primevue/progressspinner.css @@ -0,0 +1,60 @@ +.p-progressspinner { + @apply relative my-0 mx-auto w-[100px] h-[100px] inline-block + before:block before:pt-[100%]; +} + +.p-progressspinner-spin { + @apply h-full origin-center w-full absolute top-0 bottom-0 start-0 end-0 m-auto; +} + +.p-progressspinner-spin { + animation: p-progressspinner-rotate 2s linear infinite; +} + +.p-progressspinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: theme(colors.red.500); + stroke-linecap: round; + animation: + p-progressspinner-dash 1.5s ease-in-out infinite, + p-progressspinner-color 6s ease-in-out infinite; +} + +@keyframes p-progressspinner-rotate { + 100% { + transform: rotate(360deg); + } +} + +@keyframes p-progressspinner-dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} + +@keyframes p-progressspinner-color { + 100%, + 0% { + stroke: theme(colors.red.500); + } + 40% { + stroke: theme(colors.blue.500); + } + 66% { + stroke: theme(colors.green.500); + } + 80%, + 90% { + stroke: theme(colors.yellow.500); + } +} diff --git a/src/assets/primevue/radiobutton.css b/src/assets/primevue/radiobutton.css new file mode 100644 index 0000000..3376bf9 --- /dev/null +++ b/src/assets/primevue/radiobutton.css @@ -0,0 +1,95 @@ +.p-radiobutton { + @apply relative inline-flex select-none w-5 h-5; +} + +.p-radiobutton-input { + @apply cursor-pointer disabled:cursor-default appearance-none absolute start-0 top-0 w-full h-full m-0 p-0 opacity-0 z-10 + border border-transparent rounded-full; +} + +.p-radiobutton-box { + @apply flex justify-center items-center rounded-full + border border-surface-300 dark:border-surface-700 + bg-surface-0 dark:bg-surface-950 + w-5 h-5 + transition-colors duration-200 + shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]; +} + +.p-radiobutton-icon { + @apply bg-transparent text-xs w-3 h-3 rounded-full + transition-all duration-200 backface-hidden; +} + +.p-radiobutton-icon { + @apply scale-[0.1]; +} + +.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + @apply border-surface-400 dark:border-surface-600; +} + +.p-radiobutton-checked .p-radiobutton-box { + @apply border-primary bg-primary; +} + +.p-radiobutton-checked .p-radiobutton-box .p-radiobutton-icon { + @apply bg-primary-contrast visible; +} + +.p-radiobutton-checked .p-radiobutton-box .p-radiobutton-icon { + @apply scale-100; +} + +.p-radiobutton-checked:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + @apply border-primary-emphasis bg-primary-emphasis; +} + +.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-radiobutton-checked + .p-radiobutton-box + .p-radiobutton-icon { + @apply bg-primary-contrast; +} + +.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + @apply outline outline-1 outline-offset-2 outline-primary; +} + +.p-radiobutton.p-invalid > .p-radiobutton-box { + @apply border-red-400 dark:border-red-300; +} + +.p-radiobutton.p-variant-filled .p-radiobutton-box { + @apply bg-surface-50 dark:bg-surface-800; +} + +.p-radiobutton.p-disabled { + @apply opacity-100; +} + +.p-radiobutton.p-disabled .p-radiobutton-box { + @apply bg-surface-200 dark:bg-surface-400 + border-surface-300 dark:border-surface-700; +} + +.p-radiobutton-checked.p-disabled .p-radiobutton-box .p-radiobutton-icon { + @apply bg-surface-700 dark:bg-surface-400; +} + +.p-radiobutton-sm, +.p-radiobutton-sm .p-radiobutton-box { + @apply w-4 h-4; +} + +.p-radiobutton-sm .p-radiobutton-icon { + @apply w-2 h-2; +} + +.p-radiobutton-lg, +.p-radiobutton-lg .p-radiobutton-box { + @apply w-6 h-6; +} + +.p-radiobutton-lg .p-radiobutton-icon { + @apply w-4 h-4; +} diff --git a/src/assets/primevue/rating.css b/src/assets/primevue/rating.css new file mode 100644 index 0000000..1323616 --- /dev/null +++ b/src/assets/primevue/rating.css @@ -0,0 +1,23 @@ +.p-rating { + @apply relative flex items-center gap-1; +} + +.p-rating-option { + @apply inline-flex items-center cursor-pointer rounded-full; +} + +.p-rating-option.p-focus-visible { + @apply outline outline-1 outline-offset-2 outline-primary; +} + +.p-rating-icon { + @apply text-surface-500 dark:text-surface-400 text-base w-4 h-4 transition-colors duration-200; +} + +.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-option:hover .p-rating-icon { + @apply text-primary; +} + +.p-rating-option-active .p-rating-icon { + @apply text-primary; +} diff --git a/src/assets/primevue/ripple.css b/src/assets/primevue/ripple.css new file mode 100644 index 0000000..fedae31 --- /dev/null +++ b/src/assets/primevue/ripple.css @@ -0,0 +1,7 @@ +.p-ink { + @apply block absolute bg-black/10 dark:bg-white/30 scale-0 rounded-[100%] pointer-events-none; +} + +.p-ink-active { + @apply transition-[opacity,transform] duration-500 scale-[2.5] opacity-0 ease-linear; +} diff --git a/src/assets/primevue/scrollpanel.css b/src/assets/primevue/scrollpanel.css new file mode 100644 index 0000000..7b68f25 --- /dev/null +++ b/src/assets/primevue/scrollpanel.css @@ -0,0 +1,41 @@ +.p-scrollpanel-content-container { + @apply overflow-hidden w-full h-full relative z-10 float-left; +} + +.p-scrollpanel-content { + @apply relative overflow-auto + h-[calc(100%+18px)] w-[calc(100%+18px)] + pt-0 ps-0 pr-[18px] pb-[18px] [scrollbar-width:none]; +} + +.p-scrollpanel-content::-webkit-scrollbar { + @apply hidden; +} + +.p-scrollpanel-bar { + @apply relative rounded-sm z-20 cursor-pointer opacity-0 + bg-surface-100 dark:bg-surface-800 + transition-opacity duration-200 border-none + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary; +} + +.p-scrollpanel-bar-y { + @apply w-[9px] top-0; +} + +.p-scrollpanel-bar-x { + @apply h-[9px] bottom-0; +} + +.p-scrollpanel-hidden { + @apply invisible; +} + +.p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + @apply opacity-100; +} + +.p-scrollpanel-grabbed { + @apply select-none; +} diff --git a/src/assets/primevue/scrolltop.css b/src/assets/primevue/scrolltop.css new file mode 100644 index 0000000..188a709 --- /dev/null +++ b/src/assets/primevue/scrolltop.css @@ -0,0 +1,25 @@ +@import './button'; + +.p-scrolltop.p-button { + @apply fixed bottom-5 end-5; +} + +.p-scrolltop-sticky.p-button { + @apply sticky flex ms-auto; +} + +.p-scrolltop-enter-from { + @apply opacity-0; +} + +.p-scrolltop-enter-active { + @apply transition-opacity duration-150; +} + +.p-scrolltop.p-scrolltop-leave-to { + @apply opacity-0; +} + +.p-scrolltop-leave-active { + @apply transition-opacity duration-150; +} diff --git a/src/assets/primevue/select.css b/src/assets/primevue/select.css new file mode 100644 index 0000000..84486b8 --- /dev/null +++ b/src/assets/primevue/select.css @@ -0,0 +1,144 @@ +@import './button'; +@import './inputtext'; +@import './iconfield'; + +.p-select { + @apply inline-flex cursor-pointer relative select-none rounded-md + bg-surface-0 dark:bg-surface-950 + border border-surface-300 dark:border-surface-700 + shadow-[0_1px_2px_0_rgba(18,18,23,0.05)] + transition-colors duration-200; +} + +.p-select:not(.p-disabled):hover { + @apply border-surface-400 dark:border-surface-600; +} + +.p-select:not(.p-disabled).p-focus { + @apply border-primary; +} + +.p-select.p-variant-filled { + @apply bg-surface-50 dark:bg-surface-800; +} + +.p-select.p-invalid { + @apply border-red-400 dark:border-red-300; +} + +.p-select.p-disabled { + @apply bg-surface-200 text-surface-500 dark:bg-surface-700 dark:text-surface-400 opacity-100 cursor-default; +} + +.p-select-clear-icon { + @apply absolute top-1/2 -mt-2 text-surface-500 dark:text-surface-400 end-10; +} + +.p-select-dropdown { + @apply flex items-center justify-center shrink-0 bg-transparent + text-surface-500 dark:text-surface-400 w-10 rounded-e-md; +} + +.p-select-label { + @apply block whitespace-nowrap overflow-hidden flex-auto w-[1%] + py-2 px-3 overflow-ellipsis + text-surface-700 dark:text-surface-0 bg-transparent border-none outline-none; +} + +.p-select-label.p-placeholder { + @apply text-surface-500 dark:text-surface-400; +} + +.p-select:has(.p-select-clear-icon) .p-select-label { + @apply pe-7; +} + +.p-select.p-disabled .p-select-label { + @apply text-surface-500 dark:text-surface-400; +} + +.p-select-label-empty { + @apply overflow-hidden opacity-0; +} + +input.p-select-label { + @apply cursor-default; +} + +.p-select .p-select-overlay { + @apply min-w-full; +} + +.p-select-overlay { + @apply absolute top-0 left-0 rounded-md + bg-surface-0 dark:bg-surface-900 + border border-surface-200 dark:border-surface-700 + text-surface-700 dark:text-surface-0 + shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]; +} + +.p-select-header { + @apply pt-2 pb-1 px-4; +} + +.p-select-filter { + @apply w-full; +} + +.p-select-list-container { + @apply overflow-auto; +} + +.p-select-option-group { + @apply m-0 px-3 py-2 bg-transparent text-surface-500 dark:text-surface-400 font-semibold; +} + +.p-select-list { + @apply m-0 p-1 list-none gap-[2px] flex flex-col; +} + +.p-select-option { + @apply cursor-pointer font-normal whitespace-nowrap relative overflow-hidden flex items-center + px-3 py-2 border-none text-surface-700 dark:text-surface-0 bg-transparent rounded-sm + transition-colors duration-200; +} + +.p-select-option:not(.p-select-option-selected):not(.p-disabled).p-focus { + @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0; +} + +.p-select-option.p-select-option-selected { + @apply bg-highlight; +} + +.p-select-option.p-select-option-selected.p-focus { + @apply bg-highlight-emphasis; +} + +.p-select-option-check-icon { + @apply relative -ms-[0.375rem] me-[0.375rem] text-surface-700 dark:text-surface-0; +} + +.p-select-empty-message { + @apply px-3 py-2; +} + +.p-select-fluid { + @apply flex; +} + +.p-select-sm .p-select-label { + @apply text-sm px-[0.625rem] py-[0.375rem]; +} + +.p-select-sm .p-select-dropdown .p-icon { + @apply text-sm w-[0.875rem] h-[0.875rem]; +} + +.p-select-lg .p-select-label { + @apply text-lg px-[0.875rem] py-[0.625rem]; +} + +.p-select-lg .p-select-dropdown .p-icon { + @apply text-lg w-[1.125rem] h-[1.125rem]; +} diff --git a/src/assets/primevue/selectbutton.css b/src/assets/primevue/selectbutton.css new file mode 100644 index 0000000..4558857 --- /dev/null +++ b/src/assets/primevue/selectbutton.css @@ -0,0 +1,25 @@ +@import './togglebutton'; + +.p-selectbutton { + @apply inline-flex select-none rounded-md; +} + +.p-selectbutton .p-togglebutton { + @apply rounded-none border-y border-r border-s-0; +} + +.p-selectbutton .p-togglebutton:focus-visible { + @apply relative z-10; +} + +.p-selectbutton .p-togglebutton:first-child { + @apply border-s rounded-s-md; +} + +.p-selectbutton .p-togglebutton:last-child { + @apply rounded-e-md; +} + +.p-selectbutton.p-invalid { + @apply outline outline-offset-0 outline-red-400 dark:outline-red-300; +} diff --git a/src/assets/primevue/skeleton.css b/src/assets/primevue/skeleton.css new file mode 100644 index 0000000..6faa55f --- /dev/null +++ b/src/assets/primevue/skeleton.css @@ -0,0 +1,11 @@ +.p-skeleton { + @apply overflow-hidden bg-surface-200 dark:bg-surface-700 animate-pulse rounded-md; +} + +.p-skeleton-circle { + @apply rounded-full; +} + +.p-skeleton-animation-none::after { + @apply animate-none; +} diff --git a/src/assets/primevue/slider.css b/src/assets/primevue/slider.css new file mode 100644 index 0000000..ef63eb6 --- /dev/null +++ b/src/assets/primevue/slider.css @@ -0,0 +1,42 @@ +.p-slider { + @apply relative bg-surface-200 dark:bg-surface-700 rounded-sm; +} + +.p-slider-handle { + @apply cursor-grab touch-none flex items-center justify-center h-[20px] w-[20px] + bg-surface-200 dark:bg-surface-700 rounded-full + transition-colors duration-200 + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary + before:w-[16px] before:h-[16px] before:block before:rounded-full + before:bg-surface-0 dark:before:bg-surface-950 + before:shadow-[0px_0.5px_0px_0px_rgba(0,0,0,0.08),0px_1px_1px_0px_rgba(0,0,0,0.14)] + before:transition-colors before:duration-200; +} + +.p-slider-range { + @apply block bg-primary rounded-sm; +} + +.p-slider.p-slider-horizontal { + @apply h-[3px]; +} + +.p-slider-horizontal .p-slider-range { + @apply top-0 start-0 h-full; +} + +.p-slider-horizontal .p-slider-handle { + @apply top-1/2 -mt-[10px] -ms-[10px]; +} + +.p-slider-vertical { + @apply min-h-[100px] w-[3px]; +} + +.p-slider-vertical .p-slider-handle { + @apply start-1/2 -mb-[10px] -ms-[10px]; +} + +.p-slider-vertical .p-slider-range { + @apply bottom-0 start-0 w-full; +} diff --git a/src/assets/primevue/speeddial.css b/src/assets/primevue/speeddial.css new file mode 100644 index 0000000..4810019 --- /dev/null +++ b/src/assets/primevue/speeddial.css @@ -0,0 +1,48 @@ +@import './button'; + +.p-speeddial { + @apply static flex gap-2; +} + +.p-speeddial-button { + @apply z-10; +} + +.p-speeddial-button.p-speeddial-rotate { + @apply [transition:transform_250ms_cubic-bezier(0.4,0,0.2,1)_0ms,background_200ms,color_200ms,border-color_200ms] will-change-transform; +} + +.p-speeddial-list { + @apply m-0 p-0 list-none flex items-center justify-center pointer-events-none outline-none z-20 gap-2 + transition-[top] ease-linear duration-200; +} + +.p-speeddial-item { + @apply scale-0 opacity-0 [transition:transform_200ms_cubic-bezier(0.4,0,0.2,1)_0ms,opacity_0.8s] will-change-transform; +} + +.p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + @apply absolute; +} + +.p-speeddial-mask { + @apply absolute start-0 top-0 w-full h-full opacity-0 bg-white/40 dark:bg-white/60 rounded-md transition-opacity duration-150; +} + +.p-speeddial-mask-visible { + @apply pointer-events-none opacity-100 transition-opacity duration-150; +} + +.p-speeddial-open .p-speeddial-list { + @apply pointer-events-auto; +} + +.p-speeddial-open .p-speeddial-item { + @apply scale-100 opacity-100; +} + +.p-speeddial-open .p-speeddial-rotate { + @apply rotate-45; +} diff --git a/src/assets/primevue/splitbutton.css b/src/assets/primevue/splitbutton.css new file mode 100644 index 0000000..5870ee9 --- /dev/null +++ b/src/assets/primevue/splitbutton.css @@ -0,0 +1,34 @@ +@import './button'; +@import './tieredmenu'; + +.p-splitbutton { + @apply inline-flex relative rounded-md; +} + +.p-splitbutton-button { + @apply rounded-e-none border-r-0 enabled:hover:border-r-0 enabled:active:border-r-0 focus-visible:z-10; +} + +.p-splitbutton-dropdown { + @apply rounded-s-none focus-visible:z-10; +} + +.p-splitbutton .p-menu { + @apply min-w-full; +} + +.p-splitbutton-fluid { + @apply w-full; +} + +.p-splitbutton-rounded .p-splitbutton-dropdown { + @apply rounded-e-[2rem]; +} + +.p-splitbutton-rounded .p-splitbutton-button { + @apply rounded-s-[2rem]; +} + +.p-splitbutton-raised { + @apply shadow-[0_3px_1px_-2px_rgba(0,0,0,0.2),0_2px_2px_0_rgba(0,0,0,0.14),0_1px_5px_0_rgba(0,0,0,0.12)]; +} diff --git a/src/assets/primevue/splitter.css b/src/assets/primevue/splitter.css new file mode 100644 index 0000000..26740d0 --- /dev/null +++ b/src/assets/primevue/splitter.css @@ -0,0 +1,56 @@ +.p-splitter { + @apply flex flex-wrap + border border-surface-200 dark:border-surface-700 rounded-md + bg-surface-0 dark:bg-surface-900 + text-surface-700 dark:text-surface-0; +} + +.p-splitter-vertical { + @apply flex-col; +} + +.p-splitter-gutter { + @apply flex-grow-0 flex-shrink-0 flex items-center justify-center z-10 bg-surface-200 dark:bg-surface-700; +} + +.p-splitter-gutter-handle { + @apply rounded-md bg-transparent + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary + transition-colors duration-200; +} + +.p-splitter-horizontal.p-splitter-resizing { + @apply cursor-col-resize select-none; +} + +.p-splitter-vertical.p-splitter-resizing { + @apply cursor-row-resize select-none; +} + +.p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + @apply h-[24px] w-full; +} + +.p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + @apply w-[24px] h-full; +} + +.p-splitter-horizontal > .p-splitter-gutter { + @apply cursor-col-resize; +} + +.p-splitter-vertical > .p-splitter-gutter { + @apply cursor-row-resize; +} + +.p-splitterpanel { + @apply flex-grow overflow-hidden; +} + +.p-splitterpanel-nested { + @apply flex; +} + +.p-splitterpanel .p-splitter { + @apply flex-grow border-none; +} diff --git a/src/assets/primevue/stepper.css b/src/assets/primevue/stepper.css new file mode 100644 index 0000000..3df9cb1 --- /dev/null +++ b/src/assets/primevue/stepper.css @@ -0,0 +1,101 @@ +.p-steplist { + @apply relative flex justify-between items-center m-0 p-0 list-none overflow-x-auto; +} + +.p-step { + @apply relative flex flex-auto items-center gap-4 p-2 last-of-type:flex-initial; +} + +.p-step-header { + @apply border-none inline-flex items-center no-underline cursor-pointer + transition-colors duration-200 rounded-md bg-transparent p-0 gap-2 + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary; +} + +.p-step.p-disabled .p-step-header { + @apply cursor-default; +} + +.p-stepper.p-stepper-readonly .p-step { + @apply cursor-auto; +} + +.p-step-title { + @apply block whitespace-nowrap overflow-hidden text-ellipsis max-w-full + text-surface-500 dark:text-surface-400 font-medium transition-colors duration-200; +} + +.p-step-number { + @apply flex items-center justify-center text-surface-500 dark:text-surface-400 + bg-surface-0 dark:bg-surface-900 border-2 border-surface-200 dark:border-surface-700 + min-w-8 h-8 leading-8 text-lg font-medium rounded-full z-10 relative + after:absolute after:w-full after:h-full after:rounded-full after:shadow-[0px_0.5px_0px_0px_rgba(0,0,0,0.06),0px_1px_1px_0px_rgba(0,0,0,0.12)]; +} + +.p-step-active .p-step-header { + @apply cursor-default; +} + +.p-step-active .p-step-number { + @apply bg-surface-0 dark:bg-surface-900 text-primary border-surface-200 dark:border-surface-700; +} + +.p-step-active .p-step-title { + @apply text-primary; +} + +.p-step:not(.p-disabled):focus-visible { + @apply outline outline-1 outline-offset-2 outline-primary; +} + +.p-step:has(~ .p-step-active) .p-stepper-separator { + @apply bg-primary; +} + +.p-stepper-separator { + @apply flex-1 bg-surface-200 dark:bg-surface-700 w-full h-[2px] transition-colors duration-200; +} + +.p-steppanels { + @apply pt-[0.875rem] pb-[1.125rem] px-2; +} + +.p-steppanel { + @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0; +} + +.p-stepper:has(.p-stepitem) { + @apply flex flex-col; +} + +.p-stepitem { + @apply flex flex-col flex-initial; +} + +.p-stepitem.p-stepitem-active { + @apply flex-auto; +} + +.p-stepitem .p-step { + @apply flex-initial; +} + +.p-stepitem .p-steppanel-content { + @apply w-full ps-4; +} + +.p-stepitem .p-steppanel { + @apply flex flex-auto; +} + +.p-stepitem .p-stepper-separator { + @apply flex-grow-0 flex-shrink-0 basis-auto w-[2px] h-auto ms-[1.625rem] relative start-[-2.5px]; +} + +.p-stepitem:has(~ .p-stepitem-active) .p-stepper-separator { + @apply bg-primary; +} + +.p-stepitem:last-of-type .p-steppanel { + @apply ps-8; +} diff --git a/src/assets/primevue/tabs.css b/src/assets/primevue/tabs.css new file mode 100644 index 0000000..dda4433 --- /dev/null +++ b/src/assets/primevue/tabs.css @@ -0,0 +1,84 @@ +.p-tabs { + @apply flex flex-col; +} + +.p-tablist { + @apply flex relative; +} + +.p-tabs-scrollable > .p-tablist { + @apply overflow-hidden; +} + +.p-tablist-viewport { + @apply overflow-x-auto overflow-y-hidden overscroll-y-contain overscroll-x-auto; +} + +.p-tablist-viewport::-webkit-scrollbar { + @apply hidden; +} + +.p-tablist-tab-list { + @apply relative flex bg-surface-0 dark:bg-surface-900 border-b border-surface-200 dark:border-surface-700; +} + +.p-tablist-content { + @apply flex-grow; +} + +.p-tablist-nav-button { + @apply !absolute flex-shrink-0 top-0 z-20 h-full flex items-center justify-center cursor-pointer + bg-surface-0 dark:bg-surface-900 text-surface-500 dark:text-surface-400 hover:text-surface-700 dark:hover:text-surface-0 w-10 + shadow-[0px_0px_10px_50px_rgba(255,255,255,0.6)] dark:shadow-[0px_0px_10px_50px] dark:shadow-surface-900/50 + focus-visible:z-10 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-[-1px] focus-visible:outline-primary + transition-colors duration-200; +} + +.p-tablist-prev-button { + @apply start-0; +} + +.p-tablist-next-button { + @apply end-0; +} + +.p-tablist-prev-button:dir(rtl), +.p-tablist-next-button:dir(rtl) { + @apply rotate-180; +} + +.p-tab { + @apply flex-shrink-0 cursor-pointer select-none relative whitespace-nowrap py-4 px-[1.125rem] + border-b border-surface-200 dark:border-surface-700 font-semibold + text-surface-500 dark:text-surface-400 + transition-colors duration-200 -mb-px; +} + +.p-tab.p-disabled { + @apply cursor-default; +} + +.p-tab:not(.p-disabled):focus-visible { + @apply z-10 outline outline-1 outline-offset-[-1px] outline-primary; +} + +.p-tab:not(.p-tab-active):not(.p-disabled):hover { + @apply text-surface-700 dark:text-surface-0; +} + +.p-tab-active { + @apply border-primary text-primary; +} + +.p-tabpanels { + @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0 + pt-[0.875rem] pb-[1.125rem] px-[1.125rem] outline-none; +} + +.p-tablist-active-bar { + @apply z-10 block absolute -bottom-px h-px bg-primary transition-[left] duration-200 ease-[cubic-bezier(0.35,0,0.25,1)]; +} + +.p-tablist-viewport { + @apply [scrollbar-behavior:smooth] [scrollbar-width:none]; +} diff --git a/src/assets/primevue/tag.css b/src/assets/primevue/tag.css new file mode 100644 index 0000000..623a4d8 --- /dev/null +++ b/src/assets/primevue/tag.css @@ -0,0 +1,38 @@ +.p-tag { + @apply inline-flex items-center justify-center + bg-primary-100 dark:bg-primary-500/15 + text-primary-700 dark:text-primary-300 + text-sm font-bold py-1 px-2 rounded-md gap-1; +} + +.p-tag-icon { + @apply text-xs w-3 h-3; +} + +.p-tag-rounded { + @apply rounded-2xl; +} + +.p-tag-success { + @apply bg-green-100 dark:bg-green-500/15 text-green-700 dark:text-green-300; +} + +.p-tag-info { + @apply bg-sky-100 dark:bg-sky-500/15 text-sky-700 dark:text-sky-300; +} + +.p-tag-warn { + @apply bg-orange-100 dark:bg-orange-500/15 text-orange-700 dark:text-orange-300; +} + +.p-tag-danger { + @apply bg-red-100 dark:bg-red-500/15 text-red-700 dark:text-red-300; +} + +.p-tag-secondary { + @apply bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-300; +} + +.p-tag-contrast { + @apply bg-surface-950 dark:bg-surface-0 text-surface-0 dark:text-surface-950; +} diff --git a/src/assets/primevue/tailwind.css b/src/assets/primevue/tailwind.css new file mode 100644 index 0000000..7aec513 --- /dev/null +++ b/src/assets/primevue/tailwind.css @@ -0,0 +1,104 @@ +@import './common'; + +/* Form */ +@import './autocomplete'; +@import './cascadeselect'; +@import './checkbox'; +@import './colorpicker'; +@import './datepicker'; +@import './iconfield'; +@import './iftalabel'; +@import './inputgroup'; +@import './inputnumber'; +@import './inputotp'; +@import './inputtext'; +@import './floatlabel'; +@import './knob'; +@import './listbox'; +@import './multiselect'; +@import './password'; +@import './radiobutton'; +@import './rating'; +@import './select'; +@import './selectbutton'; +@import './slider'; +@import './textarea'; +@import './togglebutton'; +@import './toggleswitch'; +@import './treeselect'; + +/* Button */ +@import './button'; +@import './buttongroup'; +@import './speeddial'; +@import './splitbutton'; + +/* Data */ +@import './datatable'; +@import './dataview'; +@import './paginator'; +@import './picklist'; +@import './orderlist'; +@import './organizationchart'; +@import './timeline'; +@import './tree'; +@import './treetable'; + +/* Overlay */ +@import './confirmdialog'; +@import './confirmpopup'; +@import './dialog'; +@import './drawer'; +@import './popover'; +@import './tooltip'; + +/* Menu */ +@import './breadcrumb'; +@import './contextmenu'; +@import './dock'; +@import './menu'; +@import './menubar'; +@import './megamenu'; +@import './panelmenu'; +@import './tieredmenu'; + +/* Panel */ +@import './accordion'; +@import './card'; +@import './divider'; +@import './fieldset'; +@import './panel'; +@import './scrollpanel'; +@import './splitter'; +@import './stepper'; +@import './tabs'; +@import './toolbar'; + +/* File */ +@import './fileupload'; + +/* Message */ +@import './message'; +@import './toast'; + +/* Media */ +@import './carousel'; +@import './galleria'; +@import './image'; +@import './imagecompare'; + +/* Misc */ +@import './avatar'; +@import './badge'; +@import './blockui'; +@import './chip'; +@import './inplace'; +@import './metergroup'; +@import './overlaybadge'; +@import './progressbar'; +@import './progressspinner'; +@import './ripple'; +@import './scrolltop'; +@import './skeleton'; +@import './tag'; +@import './terminal'; diff --git a/src/assets/primevue/terminal.css b/src/assets/primevue/terminal.css new file mode 100644 index 0000000..81de176 --- /dev/null +++ b/src/assets/primevue/terminal.css @@ -0,0 +1,22 @@ +.p-terminal { + @apply h-72 overflow-auto px-3 py-2 rounded-md + border border-surface-300 dark:border-surface-700 + bg-surface-0 dark:bg-surface-950 + text-surface-700 dark:text-surface-0; +} + +.p-terminal-prompt { + @apply flex items-center; +} + +.p-terminal-prompt-value { + @apply flex-auto border-none bg-transparent text-inherit p-0 outline-none text-base; +} + +.p-terminal-prompt-label { + @apply me-1; +} + +.p-terminal-input::-ms-clear { + @apply hidden; +} diff --git a/src/assets/primevue/textarea.css b/src/assets/primevue/textarea.css new file mode 100644 index 0000000..06ff07d --- /dev/null +++ b/src/assets/primevue/textarea.css @@ -0,0 +1,38 @@ +.p-textarea { + @apply appearance-none rounded-md + border border-surface-300 dark:border-surface-700 + enabled:hover:border-surface-400 dark:enabled:hover:border-surface-600 + enabled:focus:border-primary + bg-surface-0 dark:bg-surface-950 + text-surface-700 dark:text-surface-0 + disabled:bg-surface-200 disabled:text-surface-500 disabled:opacity-100 dark:disabled:bg-surface-700 dark:disabled:text-surface-400 + placeholder:text-surface-500 dark:placeholder:text-surface-400 + px-3 py-2 + transition-colors duration-200 + shadow-[0_1px_2px_0_rgba(18,18,23,0.05)] + outline-none; +} + +.p-textarea.p-invalid { + @apply border-red-400 dark:border-red-300; +} + +.p-textarea.p-variant-filled { + @apply bg-surface-50 dark:bg-surface-800; +} + +.p-textarea-fluid { + @apply w-full; +} + +.p-textarea-resizable { + @apply overflow-hidden resize-none; +} + +.p-textarea-sm { + @apply text-sm px-[0.625rem] py-[0.375rem]; +} + +.p-textarea-lg { + @apply text-lg px-[0.875rem] py-[0.625rem]; +} diff --git a/src/assets/primevue/tieredmenu.css b/src/assets/primevue/tieredmenu.css new file mode 100644 index 0000000..79b27e1 --- /dev/null +++ b/src/assets/primevue/tieredmenu.css @@ -0,0 +1,108 @@ +.p-tieredmenu { + @apply bg-surface-0 dark:bg-surface-900 + text-surface-700 dark:text-surface-0 + border border-surface-200 dark:border-surface-700 + rounded-md min-w-52; +} + +.p-tieredmenu-root-list, +.p-tieredmenu-submenu { + @apply m-0 p-1 list-none outline-none flex flex-col gap-[2px]; +} + +.p-tieredmenu-submenu { + @apply absolute min-w-full z-10 rounded-md + bg-surface-0 dark:bg-surface-900 + text-surface-700 dark:text-surface-0 + border border-surface-200 dark:border-surface-700 + shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]; +} + +.p-tieredmenu-item { + @apply relative; +} + +.p-tieredmenu-item-content { + @apply transition-colors duration-200 rounded-sm text-surface-700 dark:text-surface-0; +} + +.p-tieredmenu-item-link { + @apply cursor-pointer flex items-center no-underline overflow-hidden relative text-inherit + px-3 py-2 gap-2 select-none outline-none; +} + +.p-tieredmenu-item-icon { + @apply text-surface-400 dark:text-surface-500; +} + +.p-tieredmenu-submenu-icon { + @apply text-surface-400 dark:text-surface-500 ms-auto text-sm w-[0.875rem] h-[0.875rem]; +} + +.p-tieredmenu-item.p-focus > .p-tieredmenu-item-content { + @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0; +} + +.p-tieredmenu-item.p-focus > .p-tieredmenu-item-content .p-tieredmenu-item-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-tieredmenu-item.p-focus > .p-tieredmenu-item-content .p-tieredmenu-submenu-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-tieredmenu-item:not(.p-disabled) > .p-tieredmenu-item-content:hover { + @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0; +} + +.p-tieredmenu-item:not(.p-disabled) > .p-tieredmenu-item-content:hover .p-tieredmenu-item-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-tieredmenu-item:not(.p-disabled) > .p-tieredmenu-item-content:hover .p-tieredmenu-submenu-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-tieredmenu-item-active > .p-tieredmenu-item-content { + @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0; +} + +.p-tieredmenu-item-active > .p-tieredmenu-item-content .p-tieredmenu-item-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-tieredmenu-item-active > .p-tieredmenu-item-content .p-tieredmenu-submenu-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-tieredmenu-separator { + @apply border-t border-surface-200 dark:border-surface-700; +} + +.p-tieredmenu-overlay { + @apply shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]; +} + +.p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + @apply opacity-0; +} + +.p-tieredmenu-enter-active { + @apply transition-opacity duration-[250ms]; +} + +.p-tieredmenu-mobile .p-tieredmenu-submenu { + @apply static shadow-none border-none ps-4 pe-0; +} + +.p-tieredmenu-mobile .p-tieredmenu-submenu-icon { + @apply transition-transform duration-200 rotate-90; +} + +.p-tieredmenu-mobile + .p-tieredmenu-item-active + > .p-tieredmenu-item-content + .p-tieredmenu-submenu-icon { + @apply -rotate-90; +} diff --git a/src/assets/primevue/timeline.css b/src/assets/primevue/timeline.css new file mode 100644 index 0000000..d2c2263 --- /dev/null +++ b/src/assets/primevue/timeline.css @@ -0,0 +1,121 @@ +.p-timeline { + @apply flex flex-col flex-grow; +} + +.p-timeline-left .p-timeline-event-opposite { + @apply text-end; +} + +.p-timeline-left .p-timeline-event-content { + @apply text-start; +} + +.p-timeline-right .p-timeline-event { + @apply flex-row-reverse; +} + +.p-timeline-right .p-timeline-event-opposite { + @apply text-start; +} + +.p-timeline-right .p-timeline-event-content { + @apply text-end; +} + +.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + @apply flex-row-reverse; +} + +.p-timeline-vertical.p-timeline-alternate + .p-timeline-event:nth-child(odd) + .p-timeline-event-opposite { + @apply text-end; +} + +.p-timeline-vertical.p-timeline-alternate + .p-timeline-event:nth-child(odd) + .p-timeline-event-content { + @apply text-start; +} + +.p-timeline-vertical.p-timeline-alternate + .p-timeline-event:nth-child(even) + .p-timeline-event-opposite { + @apply text-start; +} + +.p-timeline-vertical.p-timeline-alternate + .p-timeline-event:nth-child(even) + .p-timeline-event-content { + @apply text-end; +} + +.p-timeline-vertical .p-timeline-event-opposite, +.p-timeline-vertical .p-timeline-event-content { + @apply py-0 px-4 leading-none; +} + +.p-timeline-vertical .p-timeline-event-connector { + @apply w-[2px]; +} + +.p-timeline-event { + @apply flex relative min-h-20 last:min-h-0; +} + +.p-timeline-event-opposite { + @apply flex-1; +} + +.p-timeline-event-content { + @apply flex-1; +} + +.p-timeline-event-separator { + @apply flex-none flex flex-col items-center; +} + +.p-timeline-event-marker { + @apply inline-flex items-center justify-center relative self-baseline + border-2 rounded-full border-surface-200 dark:border-surface-700 w-[1.125rem] h-[1.125rem] + bg-surface-0 dark:bg-surface-900 + before:rounded-full before:w-[0.375rem] before:h-[0.375rem] before:bg-primary + after:absolute after:w-full after:h-full after:rounded-full after:shadow-[0px_0.5px_0px_0px_rgba(0,0,0,0.06),0px_1px_1px_0px_rgba(0,0,0,0.12)]; +} + +.p-timeline-event-connector { + @apply flex-grow bg-surface-200 dark:bg-surface-700; +} + +.p-timeline-horizontal { + @apply flex-row; +} + +.p-timeline-horizontal .p-timeline-event { + @apply flex-col flex-1; +} + +.p-timeline-horizontal .p-timeline-event:last-child { + @apply flex-none; +} + +.p-timeline-horizontal .p-timeline-event-separator { + @apply flex-row; +} + +.p-timeline-horizontal .p-timeline-event-connector { + @apply w-full h-[2px]; +} + +.p-timeline-horizontal .p-timeline-event-opposite, +.p-timeline-horizontal .p-timeline-event-content { + @apply py-4 px-0; +} + +.p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + @apply flex-col-reverse; +} + +.p-timeline-bottom .p-timeline-event { + @apply flex-col-reverse; +} diff --git a/src/assets/primevue/toast.css b/src/assets/primevue/toast.css new file mode 100644 index 0000000..ca13385 --- /dev/null +++ b/src/assets/primevue/toast.css @@ -0,0 +1,172 @@ +.p-toast { + @apply w-96 rounded-md whitespace-pre-line break-words; +} + +.p-toast-message { + @apply mb-4; +} + +.p-toast-message-icon { + @apply flex-shrink-0 text-lg w-[1.125rem] h-[1.125rem]; +} + +.p-toast-message-content { + @apply flex items-start p-3 gap-2; +} + +.p-toast-message-text { + @apply flex-auto flex flex-col gap-2; +} + +.p-toast-summary { + @apply font-medium text-base; +} + +.p-toast-detail { + @apply font-medium text-sm; +} + +.p-toast-close-button { + @apply flex items-center justify-center overflow-hidden relative cursor-pointer bg-transparent select-none + transition-colors duration-200 text-inherit w-7 h-7 rounded-full -mt-[25%] -end-1/4 p-0 border-none + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2; +} + +.p-toast-close-button:dir(rtl) { + @apply ms-auto end-auto; +} + +.p-toast-message-info, +.p-toast-message-success, +.p-toast-message-warn, +.p-toast-message-error, +.p-toast-message-secondary, +.p-toast-message-contrast { + @apply border backdrop-blur-sm dark:backdrop-blur-md rounded-md; +} + +.p-toast-close-icon { + @apply text-base w-4 h-4; +} + +.p-toast-message-info { + @apply bg-blue-50/95 border-blue-200 text-blue-600 + dark:bg-blue-500/15 dark:border-blue-700/35 dark:text-blue-500 + shadow-[0px_4px_8px_0px_theme(colors.blue.500/0.04)]; +} + +.p-toast-message-info .p-toast-detail { + @apply text-surface-700 dark:text-surface-0; +} + +.p-toast-message-info .p-toast-close-button { + @apply hover:bg-blue-100 focus-visible:outline-blue-600 + dark:hover:bg-white/5 dark:focus-visible:outline-blue-500; +} + +.p-toast-message-success { + @apply bg-green-50/95 border-green-200 text-green-600 + dark:bg-green-500/15 dark:border-green-700/35 dark:text-green-500 + shadow-[0px_4px_8px_0px_theme(colors.green.500/0.04)]; +} + +.p-toast-message-success .p-toast-detail { + @apply text-surface-700 dark:text-surface-0; +} + +.p-toast-message-success .p-toast-close-button { + @apply hover:bg-green-100 focus-visible:outline-green-600 + dark:hover:bg-white/5 dark:focus-visible:outline-green-500; +} + +.p-toast-message-warn { + @apply bg-yellow-50/95 border-yellow-200 text-yellow-600 + dark:bg-yellow-500/15 dark:border-yellow-700/35 dark:text-yellow-500 + shadow-[0px_4px_8px_0px_theme(colors.yellow.500/0.04)]; +} + +.p-toast-message-warn .p-toast-detail { + @apply text-surface-700 dark:text-surface-0; +} + +.p-toast-message-warn .p-toast-close-button { + @apply hover:bg-yellow-100 focus-visible:outline-yellow-600 + dark:hover:bg-white/5 dark:focus-visible:outline-yellow-500; +} + +.p-toast-message-error { + @apply bg-red-50/95 border-red-200 text-red-600 + dark:bg-red-500/15 dark:border-red-700/35 dark:text-red-500 + shadow-[0px_4px_8px_0px_theme(colors.blue.500/0.04)]; +} + +.p-toast-message-error .p-toast-detail { + @apply text-surface-700 dark:text-surface-0; +} + +.p-toast-message-error .p-toast-close-button { + @apply hover:bg-red-100 focus-visible:outline-red-600 + dark:hover:bg-white/5 dark:focus-visible:outline-red-500; +} + +.p-toast-message-secondary { + @apply bg-surface-100 border-surface-200 text-surface-600 + dark:bg-surface-800 dark:border-surface-700 dark:text-surface-300 + shadow-[0px_4px_8px_0px_rgba(0,0,0,0.04)]; +} + +.p-toast-message-secondary .p-toast-detail { + @apply text-surface-700 dark:text-surface-0; +} + +.p-toast-message-secondary .p-toast-close-button { + @apply hover:bg-surface-200 focus-visible:outline-surface-600 + dark:hover:bg-surface-700 dark:focus-visible:outline-surface-300; +} + +.p-toast-message-contrast { + @apply bg-surface-900 border-surface-950 text-surface-50 + dark:bg-surface-0 dark:border-surface-100 dark:text-surface-950 + shadow-[0px_4px_8px_0px_rgba(0,0,0,0.04)]; +} + +.p-toast-message-contrast .p-toast-detail { + @apply text-surface-0 dark:text-surface-950; +} + +.p-toast-message-contrast .p-toast-close-button { + @apply hover:bg-surface-800 focus-visible:outline-surface-50 + dark:hover:bg-surface-100 dark:focus-visible:outline-surface-950; +} + +.p-toast-top-center { + @apply -translate-x-1/2; +} + +.p-toast-bottom-center { + @apply -translate-x-1/2; +} + +.p-toast-center { + @apply min-w-[20vw] -translate-x-1/2 -translate-y-1/2; +} + +.p-toast-message-enter-from { + @apply opacity-0 translate-y-1/2; +} + +.p-toast-message-leave-from { + @apply max-h-[1000px]; +} + +.p-toast .p-toast-message.p-toast-message-leave-to { + @apply max-h-0 opacity-0 mb-0 overflow-hidden; +} + +.p-toast-message-enter-active { + @apply [transition:transform_0.3s,opacity_0.3s]; +} + +.p-toast-message-leave-active { + @apply [transition:max-height_0.45s_cubic-bezier(0,1,0,1),opacity_0.3s,margin-bottom_0.3s]; +} diff --git a/src/assets/primevue/togglebutton.css b/src/assets/primevue/togglebutton.css new file mode 100644 index 0000000..e517f38 --- /dev/null +++ b/src/assets/primevue/togglebutton.css @@ -0,0 +1,63 @@ +.p-togglebutton { + @apply inline-flex items-center justify-center overflow-hidden relative cursor-pointer select-none + border border-surface-100 dark:border-surface-950 rounded-md + bg-surface-100 dark:bg-surface-950 + text-surface-500 dark:text-surface-400 text-base font-medium + px-4 py-2 + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary + disabled:opacity-100 disabled:cursor-default + disabled:bg-surface-200 disabled:border-surface-200 disabled:text-surface-500 + disabled:dark:bg-surface-700 disabled:dark:border-surface-700 disabled:dark:text-surface-400 + transition-colors duration-300 + before:bg-transparent before:absolute before:start-1 before:top-1 before:rounded-md before:w-[calc(100%-0.5rem)] before:h-[calc(100%-0.5rem)] + before:transition-colors before:duration-200; +} + +.p-togglebutton-content { + @apply relative inline-flex items-center justify-center gap-2; +} + +.p-togglebutton-label, +.p-togglebutton-icon { + @apply relative transition-none; +} + +.p-togglebutton.p-togglebutton-checked::before { + @apply bg-surface-0 dark:bg-surface-800 shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02),0px_1px_2px_0px_rgba(0,0,0,0.04)]; +} + +.p-togglebutton:not(:disabled):not(.p-togglebutton-checked):hover { + @apply bg-surface-100 dark:bg-surface-950 text-surface-700 dark:text-surface-300; +} + +.p-togglebutton.p-togglebutton-checked { + @apply bg-surface-100 dark:bg-surface-950 border-surface-100 dark:border-surface-950 text-surface-900 dark:text-surface-0; +} + +.p-togglebutton.p-invalid { + @apply border-red-400 dark:border-red-300; +} + +.p-togglebutton-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-togglebutton:not(:disabled):not(.p-togglebutton-checked):hover .p-togglebutton-icon { + @apply text-surface-700 dark:text-surface-300; +} + +.p-togglebutton.p-togglebutton-checked .p-togglebutton-icon { + @apply text-surface-900 dark:text-surface-0; +} + +.p-togglebutton:disabled .p-togglebutton-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-togglebutton-sm { + @apply text-sm px-[0.75rem] py-[0.375rem]; +} + +.p-togglebutton-lg { + @apply text-lg px-[1.25rem] py-[0.625rem]; +} diff --git a/src/assets/primevue/toggleswitch.css b/src/assets/primevue/toggleswitch.css new file mode 100644 index 0000000..921d64e --- /dev/null +++ b/src/assets/primevue/toggleswitch.css @@ -0,0 +1,68 @@ +.p-toggleswitch { + @apply inline-block w-10 h-6; +} + +.p-toggleswitch-input { + @apply cursor-pointer disabled:cursor-default appearance-none absolute top-0 start-0 w-full h-full m-0 p-0 opacity-0 z-10 rounded-[30px]; +} + +.p-toggleswitch-slider { + @apply inline-block w-full h-full rounded-[30px] shadow-[0_1px_2px_0_rgba(18,18,23,0.05)] + bg-surface-300 dark:bg-surface-700 + border border-transparent + transition-colors duration-200; +} + +.p-toggleswitch-handle { + @apply absolute top-1/2 flex justify-center items-center + bg-surface-0 dark:bg-surface-400 + text-surface-500 dark:text-surface-900 + w-4 h-4 start-1 -mt-2 rounded-full + transition-[background,color,left] duration-200; +} + +.p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-slider { + @apply bg-primary; +} + +.p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-handle { + @apply bg-surface-0 dark:bg-surface-900 text-primary start-5; +} + +.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover) .p-toggleswitch-slider { + @apply bg-surface-400 dark:bg-surface-600; +} + +.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover) .p-toggleswitch-handle { + @apply bg-surface-0 dark:bg-surface-300 text-surface-700 dark:text-surface-800; +} + +.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover).p-toggleswitch-checked + .p-toggleswitch-slider { + @apply bg-primary-emphasis; +} + +.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover).p-toggleswitch-checked + .p-toggleswitch-handle { + @apply bg-surface-0 dark:bg-surface-900 text-primary-emphasis; +} + +.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:focus-visible) .p-toggleswitch-slider { + @apply outline outline-1 outline-offset-2 outline-primary; +} + +.p-toggleswitch.p-invalid > .p-toggleswitch-slider { + @apply border-red-400 dark:border-red-300; +} + +.p-toggleswitch.p-disabled { + @apply opacity-100; +} + +.p-toggleswitch.p-disabled .p-toggleswitch-slider { + @apply bg-surface-200 dark:bg-surface-600; +} + +.p-toggleswitch.p-disabled .p-toggleswitch-handle { + @apply bg-surface-700 dark:bg-surface-900; +} diff --git a/src/assets/primevue/toolbar.css b/src/assets/primevue/toolbar.css new file mode 100644 index 0000000..c11c387 --- /dev/null +++ b/src/assets/primevue/toolbar.css @@ -0,0 +1,12 @@ +.p-toolbar { + @apply flex items-center justify-between flex-wrap p-3 gap-2 + bg-surface-0 dark:bg-surface-900 + text-surface-700 dark:text-surface-0 + border border-surface-200 dark:border-surface-700 rounded-md; +} + +.p-toolbar-start, +.p-toolbar-center, +.p-toolbar-end { + @apply flex items-center; +} diff --git a/src/assets/primevue/tooltip.css b/src/assets/primevue/tooltip.css new file mode 100644 index 0000000..2c9eeed --- /dev/null +++ b/src/assets/primevue/tooltip.css @@ -0,0 +1,38 @@ +.p-tooltip { + @apply absolute hidden max-w-48; +} + +.p-tooltip-right, +.p-tooltip-left { + @apply py-0 px-1; +} + +.p-tooltip-top, +.p-tooltip-bottom { + @apply py-1 px-0; +} + +.p-tooltip-text { + @apply whitespace-pre-line break-words bg-surface-700 text-surface-0 py-2 px-3 + rounded-md shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]; +} + +.p-tooltip-arrow { + @apply absolute w-0 h-0 border-solid border-transparent; +} + +.p-tooltip-right .p-tooltip-arrow { + @apply -mt-1 border-[.25rem] border-s-0 border-e-surface-700 rtl:rotate-180; +} + +.p-tooltip-left .p-tooltip-arrow { + @apply -mt-1 border-[.25rem] border-e-0 border-s-surface-700 rtl:rotate-180; +} + +.p-tooltip-top .p-tooltip-arrow { + @apply -ms-1 border-[.25rem] border-b-0 border-t-surface-700; +} + +.p-tooltip-bottom .p-tooltip-arrow { + @apply -ms-1 border-[.25rem] border-t-0 border-b-surface-700; +} diff --git a/src/assets/primevue/tree.css b/src/assets/primevue/tree.css new file mode 100644 index 0000000..044aa06 --- /dev/null +++ b/src/assets/primevue/tree.css @@ -0,0 +1,103 @@ +.p-tree { + @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0 p-4; +} + +.p-tree-root-children, +.p-tree-node-children { + @apply flex flex-col list-none m-0 gap-[2px]; +} + +.p-tree-root-children { + @apply pt-[2px] pb-0 px-0; +} + +.p-tree-node-children { + @apply pt-[2px] pe-0 pb-0 ps-4; +} + +.p-tree-node { + @apply p-0 outline-none; +} + +.p-tree-node-content { + @apply rounded-md px-2 py-1 flex items-center text-surface-700 dark:text-surface-0 gap-1 transition-colors duration-200; +} + +.p-tree-node:focus-visible > .p-tree-node-content { + @apply outline outline-1 outline-offset-2 outline-primary; +} + +.p-tree-node-content.p-tree-node-selectable:not(.p-tree-node-selected):hover { + @apply bg-surface-100 text-surface-700 dark:bg-surface-800 dark:text-surface-0; +} + +.p-tree-node-content.p-tree-node-selectable:not(.p-tree-node-selected):hover .p-tree-node-icon { + @apply text-surface-600 dark:text-surface-300; +} + +.p-tree-node-content.p-tree-node-selected { + @apply bg-highlight; +} + +.p-tree-node-content.p-tree-node-selected .p-tree-node-toggle-button { + @apply text-inherit; +} + +.p-tree-node-toggle-button { + @apply cursor-pointer select-none inline-flex justify-center rounded-full items-center overflow-hidden relative flex-shrink-0 + w-7 h-7 p-0 transition-colors duration-200 border-none + bg-transparent enabled:hover:bg-surface-100 dark:enabled:hover:bg-surface-800 + text-surface-500 dark:text-surface-400 enabled:hover:text-surface-600 dark:enabled:hover:text-surface-300; +} + +.p-tree-node-content.p-tree-node-selected .p-tree-node-toggle-button:hover { + @apply bg-surface-0 dark:bg-surface-900 text-primary; +} + +.p-tree-root { + @apply overflow-auto; +} + +.p-tree-node-selectable { + @apply cursor-pointer select-none; +} + +.p-tree-node-leaf > .p-tree-node-content .p-tree-node-toggle-button { + @apply invisible; +} + +.p-tree-node-icon { + @apply text-surface-500 dark:text-surface-400 transition-colors duration-200; +} + +.p-tree-node-content.p-tree-node-selected .p-tree-node-icon { + @apply text-primary; +} + +.p-tree-filter { + @apply mb-2; +} + +.p-tree-filter-input { + @apply w-full; +} + +.p-tree-loading { + @apply relative h-full; +} + +.p-tree-loading-icon { + @apply text-[2rem] h-8 w-8; +} + +.p-tree .p-tree-mask { + @apply absolute z-10 flex items-center justify-center; +} + +.p-tree-flex-scrollable { + @apply flex flex-1 h-full flex-col; +} + +.p-tree-flex-scrollable .p-tree-root { + @apply flex-1; +} diff --git a/src/assets/primevue/treeselect.css b/src/assets/primevue/treeselect.css new file mode 100644 index 0000000..9cec938 --- /dev/null +++ b/src/assets/primevue/treeselect.css @@ -0,0 +1,115 @@ +@import './chip'; +@import './tree'; + +.p-treeselect { + @apply inline-flex cursor-pointer relative select-none rounded-md + bg-surface-0 dark:bg-surface-950 + border border-surface-300 dark:border-surface-700 + shadow-[0_1px_2px_0_rgba(18,18,23,0.05)] + transition-colors duration-200; +} + +.p-treeselect:not(.p-disabled):hover { + @apply border-surface-400 dark:border-surface-600; +} + +.p-treeselect:not(.p-disabled).p-focus { + @apply border-primary; +} + +.p-treeselect.p-variant-filled { + @apply bg-surface-50 dark:bg-surface-800; +} + +.p-treeselect.p-invalid { + @apply border-red-400 dark:border-red-300; +} + +.p-treeselect.p-disabled { + @apply bg-surface-200 text-surface-500 dark:bg-surface-700 dark:text-surface-400 opacity-100 cursor-default; +} + +.p-treeselect-dropdown { + @apply flex items-center justify-center shrink-0 bg-transparent + text-surface-500 dark:text-surface-400 w-10 rounded-e-md; +} + +.p-treeselect-clear-icon { + @apply absolute top-1/2 -mt-2 text-surface-500 dark:text-surface-400 end-10; +} + +.p-treeselect-label-container { + @apply overflow-hidden flex-auto; +} + +.p-treeselect-label { + @apply flex items-center gap-1 whitespace-nowrap text-ellipsis px-3 py-2 text-surface-700 dark:text-surface-0; +} + +.p-treeselect-label.p-placeholder { + @apply text-surface-500 dark:text-surface-400; +} + +.p-treeselect.p-disabled .p-treeselect-label { + @apply text-surface-500 dark:text-surface-400; +} + +.p-treeselect-label-empty { + @apply overflow-hidden invisible; +} + +.p-treeselect .p-treeselect-overlay { + @apply min-w-full; +} + +.p-treeselect-overlay { + @apply absolute top-0 left-0 rounded-md + bg-surface-0 dark:bg-surface-900 + border border-surface-200 dark:border-surface-700 + text-surface-700 dark:text-surface-0 + shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]; +} + +.p-treeselect-tree-container { + @apply overflow-auto; +} + +.p-treeselect-empty-message { + @apply px-3 py-2; +} + +.p-treeselect-fluid { + @apply flex; +} + +.p-treeselect-overlay .p-tree { + @apply p-1; +} + +.p-treeselect-overlay .p-tree-loading { + @apply min-h-12; +} + +.p-treeselect-label .p-chip { + @apply pt-1 pb-1 rounded-sm; +} + +.p-treeselect-label:has(.p-chip) { + @apply py-1 px-1; +} + +.p-treeselect-sm .p-treeselect-label { + @apply text-sm px-[0.625rem] py-[0.375rem]; +} + +.p-treeselect-sm .p-treeselect-dropdown .p-icon { + @apply text-sm w-[0.875rem] h-[0.875rem]; +} + +.p-treeselect-lg .p-treeselect-label { + @apply text-lg px-[0.875rem] py-[0.625rem]; +} + +.p-treeselect-lg .p-treeselect-dropdown .p-icon { + @apply text-lg w-[1.125rem] h-[1.125rem]; +} diff --git a/src/assets/primevue/treetable.css b/src/assets/primevue/treetable.css new file mode 100644 index 0000000..75cd009 --- /dev/null +++ b/src/assets/primevue/treetable.css @@ -0,0 +1,312 @@ +@import './paginator'; + +.p-treetable { + @apply relative; +} + +.p-treetable-table { + @apply border-spacing-0 w-full; +} + +.p-treetable-scrollable > .p-treetable-table-container { + @apply relative; +} + +.p-treetable-scrollable-table > .p-treetable-thead { + @apply top-0 z-10; +} + +.p-treetable-scrollable-table > .p-treetable-frozen-tbody { + @apply sticky z-10; +} + +.p-treetable-scrollable-table > .p-treetable-tfoot { + @apply bottom-0 z-10; +} + +.p-treetable-scrollable .p-treetable-frozen-column { + @apply sticky bg-surface-0 dark:bg-surface-900; +} + +.p-treetable-scrollable th.p-treetable-frozen-column { + @apply z-10; +} + +.p-treetable-scrollable > .p-treetable-table-container > .p-treetable-table > .p-treetable-thead { + @apply bg-surface-0 dark:bg-surface-900; +} + +.p-treetable-scrollable > .p-treetable-table-container > .p-treetable-table > .p-treetable-tfoot { + @apply bg-surface-0 dark:bg-surface-900; +} + +.p-treetable-flex-scrollable { + @apply flex flex-col h-full; +} + +.p-treetable-flex-scrollable > .p-treetable-table-container { + @apply flex flex-col flex-1 h-full; +} + +.p-treetable-scrollable-table > .p-treetable-tbody > .p-treetable-row-group-header { + @apply sticky z-10; +} + +.p-treetable-resizable-table > .p-treetable-thead > tr > th, +.p-treetable-resizable-table > .p-treetable-tfoot > tr > td, +.p-treetable-resizable-table > .p-treetable-tbody > tr > td { + @apply overflow-hidden whitespace-nowrap; +} + +.p-treetable-resizable-table + > .p-treetable-thead + > tr + > th.p-treetable-resizable-column:not(.p-treetable-frozen-column) { + @apply bg-clip-padding relative; +} + +.p-treetable-resizable-table-fit + > .p-treetable-thead + > tr + > th.p-treetable-resizable-column:last-child + .p-treetable-column-resizer { + @apply hidden; +} + +.p-treetable-column-resizer { + @apply block absolute top-0 end-0 m-0 w-2 h-full p-0 cursor-col-resize border border-transparent; +} + +.p-treetable-column-header-content { + @apply flex items-center gap-2; +} + +.p-treetable-column-resize-indicator { + @apply w-px absolute z-10 hidden bg-primary; +} + +.p-treetable-mask { + @apply absolute flex items-center justify-center z-20; +} + +.p-treetable-paginator-top { + @apply border-b border-surface-200 dark:border-surface-700; +} + +.p-treetable-paginator-bottom { + @apply border-t border-surface-200 dark:border-surface-700; +} + +.p-treetable-header { + @apply py-3 px-4 border-b border-surface-200 dark:border-surface-700 + bg-surface-0 dark:bg-surface-900 + text-surface-700 dark:text-surface-0; +} + +.p-treetable-footer { + @apply py-3 px-4 border-b border-surface-200 dark:border-surface-700 + bg-surface-0 dark:bg-surface-900 + text-surface-700 dark:text-surface-0; +} + +.p-treetable-header-cell { + @apply py-3 px-4 font-normal text-start transition-colors duration-200 + border-b border-surface-200 dark:border-surface-700 + bg-surface-0 dark:bg-surface-900 + text-surface-700 dark:text-surface-0; +} + +.p-treetable-column-title { + @apply font-semibold; +} + +.p-treetable-tbody > tr { + @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0 transition-colors duration-200; +} + +.p-treetable-tbody > tr > td { + @apply text-start py-3 px-4 border-b border-surface-200 dark:border-surface-800; +} + +.p-treetable-hoverable .p-treetable-tbody > tr:not(.p-treetable-row-selected):hover { + @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0; +} + +.p-treetable-tbody > tr.p-treetable-row-selected { + @apply bg-highlight; +} + +.p-treetable-tbody > tr:has(+ .p-treetable-row-selected) > td { + @apply border-b-primary-100 dark:border-b-primary-900; +} + +.p-treetable-tbody > tr.p-treetable-row-selected > td { + @apply border-b-primary-100 dark:border-b-primary-900; +} + +.p-treetable-tbody > tr:focus-visible, +.p-treetable-tbody > tr.p-treetable-contextmenu-row-selected { + @apply outline outline-1 -outline-offset-1 outline-primary; +} + +.p-treetable-tfoot > tr > td { + @apply text-start py-3 px-4 border-b border-surface-200 dark:border-surface-800 + bg-surface-0 dark:bg-surface-900 + text-surface-700 dark:text-surface-0; +} + +.p-treetable-column-footer { + @apply font-semibold; +} + +.p-treetable-sortable-column { + @apply cursor-pointer select-none focus-visible:outline focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-primary; +} + +.p-treetable-column-title, +.p-treetable-sort-icon, +.p-treetable-sort-badge { + @apply align-middle; +} + +.p-treetable-sort-icon { + @apply text-surface-500 dark:text-surface-400 transition-colors duration-200; +} + +.p-treetable-sortable-column:not(.p-treetable-column-sorted):hover { + @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0; +} + +.p-treetable-sortable-column:not(.p-treetable-column-sorted):hover .p-treetable-sort-icon { + @apply text-surface-600 dark:text-surface-300; +} + +.p-treetable-column-sorted { + @apply bg-highlight; +} + +.p-treetable-column-sorted .p-treetable-sort-icon { + @apply bg-highlight; +} + +.p-treetable-hoverable .p-treetable-selectable-row { + @apply cursor-pointer; +} + +.p-treetable-loading-icon { + @apply text-[2rem] w-8 h-8; +} + +.p-treetable-gridlines .p-treetable-header { + @apply border-t border-x; +} + +.p-treetable-gridlines .p-treetable-footer { + @apply border-b border-x; +} + +.p-treetable-gridlines .p-treetable-paginator-top { + @apply border-t border-x; +} + +.p-treetable-gridlines .p-treetable-paginator-bottom { + @apply border-b border-x; +} + +.p-treetable-gridlines .p-treetable-thead > tr > th { + @apply border-t border-x last:border; +} + +.p-treetable-gridlines .p-treetable-tbody > tr > td { + @apply border-t border-s last:border-r; +} + +.p-treetable-gridlines .p-treetable-tbody > tr:last-child > td { + @apply border-y border-s last:border; +} + +.p-treetable-gridlines .p-treetable-tfoot > tr > td { + @apply border-y border-s last:border; +} + +.p-treetable.p-treetable-gridlines .p-treetable-thead + .p-treetable-tfoot > tr > td { + @apply border-b border-s last:border-r; +} + +.p-treetable.p-treetable-gridlines:has(.p-treetable-thead):has(.p-treetable-tbody) + .p-treetable-tbody + > tr + > td { + @apply border-b border-s last:border-r; +} + +.p-treetable.p-treetable-gridlines:has(.p-treetable-tbody):has(.p-treetable-tfoot) + .p-treetable-tbody + > tr:last-child + > td { + @apply border-x; +} + +.p-treetable.p-treetable-sm .p-treetable-header { + @apply py-1 px-2; +} + +.p-treetable.p-treetable-sm .p-treetable-thead > tr > th { + @apply py-1 px-2; +} + +.p-treetable.p-treetable-sm .p-treetable-tbody > tr > td { + @apply py-1 px-2; +} + +.p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td { + @apply py-1 px-2; +} + +.p-treetable.p-treetable-sm .p-treetable-footer { + @apply py-1 px-2; +} + +.p-treetable.p-treetable-lg .p-treetable-header { + @apply py-4 px-5; +} + +.p-treetable.p-treetable-lg .p-treetable-thead > tr > th { + @apply py-4 px-5; +} + +.p-treetable.p-treetable-lg .p-treetable-tbody > tr > td { + @apply py-4 px-5; +} + +.p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td { + @apply py-4 px-5; +} + +.p-treetable.p-treetable-lg .p-treetable-footer { + @apply py-4 px-5; +} + +.p-treetable-body-cell-content { + @apply flex items-center gap-2; +} + +.p-treetable-tbody > tr.p-treetable-row-selected .p-treetable-node-toggle-button { + @apply text-inherit; +} + +.p-treetable-node-toggle-button { + @apply inline-flex items-center justify-center overflow-hidden relative select-none + transition-colors duration-200 w-7 h-7 rounded-full border-none bg-transparent cursor-pointer + enabled:hover:bg-surface-100 dark:enabled:hover:bg-surface-900 + text-surface-500 dark:text-surface-400 enabled:hover:text-surface-700 dark:enabled:hover:text-surface-0 + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary; +} + +.p-treetable-tbody > tr.p-treetable-row-selected .p-treetable-node-toggle-button:hover { + @apply bg-surface-0 dark:bg-surface-900 text-primary; +} + +.p-treetable-node-toggle-icon:dir(rtl) { + @apply rotate-180; +} diff --git a/src/assets/tailwind.css b/src/assets/tailwind.css new file mode 100644 index 0000000..2e77632 --- /dev/null +++ b/src/assets/tailwind.css @@ -0,0 +1,4 @@ +@import 'tailwindcss/base'; +@import 'tailwindcss/components'; +@import './primevue/tailwind.css'; +@import 'tailwindcss/utilities'; diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue deleted file mode 100644 index a2eabd1..0000000 --- a/src/components/HelloWorld.vue +++ /dev/null @@ -1,41 +0,0 @@ - - - - - diff --git a/src/components/TheWelcome.vue b/src/components/TheWelcome.vue deleted file mode 100644 index 674b490..0000000 --- a/src/components/TheWelcome.vue +++ /dev/null @@ -1,94 +0,0 @@ - - - diff --git a/src/components/WelcomeItem.vue b/src/components/WelcomeItem.vue deleted file mode 100644 index 6d7086a..0000000 --- a/src/components/WelcomeItem.vue +++ /dev/null @@ -1,87 +0,0 @@ - - - diff --git a/src/components/icons/IconCommunity.vue b/src/components/icons/IconCommunity.vue deleted file mode 100644 index 2dc8b05..0000000 --- a/src/components/icons/IconCommunity.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/src/components/icons/IconDocumentation.vue b/src/components/icons/IconDocumentation.vue deleted file mode 100644 index 6d4791c..0000000 --- a/src/components/icons/IconDocumentation.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/src/components/icons/IconEcosystem.vue b/src/components/icons/IconEcosystem.vue deleted file mode 100644 index c3a4f07..0000000 --- a/src/components/icons/IconEcosystem.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/src/components/icons/IconSupport.vue b/src/components/icons/IconSupport.vue deleted file mode 100644 index 7452834..0000000 --- a/src/components/icons/IconSupport.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/src/components/icons/IconTooling.vue b/src/components/icons/IconTooling.vue deleted file mode 100644 index 660598d..0000000 --- a/src/components/icons/IconTooling.vue +++ /dev/null @@ -1,19 +0,0 @@ - - diff --git a/src/main.ts b/src/main.ts index 48dad43..7e48b96 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,11 +1,18 @@ -import './assets/main.css' +import PrimeVue from 'primevue/config' +import './style.css' +import './assets/tailwind.css' import { createApp } from 'vue' import { createPinia } from 'pinia' -import App from './App.vue' +import App from './App.vue' const app = createApp(App) app.use(createPinia()) +app.use(PrimeVue, { + theme: { + preset: 'none', + }, +}) app.mount('#app') diff --git a/src/style.css b/src/style.css new file mode 100644 index 0000000..85d4106 --- /dev/null +++ b/src/style.css @@ -0,0 +1,74 @@ +/* Primary and Surface Palettes */ +:root { + --p-primary-50: #ecfdf5; + --p-primary-100: #d1fae5; + --p-primary-200: #a7f3d0; + --p-primary-300: #6ee7b7; + --p-primary-400: #34d399; + --p-primary-500: #10b981; + --p-primary-600: #059669; + --p-primary-700: #047857; + --p-primary-800: #065f46; + --p-primary-900: #064e3b; + --p-primary-950: #022c22; + --p-surface-0: #ffffff; + --p-surface-50: #fafafa; + --p-surface-100: #f4f4f5; + --p-surface-200: #e4e4e7; + --p-surface-300: #d4d4d8; + --p-surface-400: #a1a1aa; + --p-surface-500: #71717a; + --p-surface-600: #52525b; + --p-surface-700: #3f3f46; + --p-surface-800: #27272a; + --p-surface-900: #18181b; + --p-surface-950: #09090b; + --p-content-border-radius: 6px; +} + +/* Light */ +:root { + --p-primary-color: var(--p-primary-500); + --p-primary-contrast-color: var(--p-surface-0); + --p-primary-hover-color: var(--p-primary-600); + --p-primary-active-color: var(--p-primary-700); + --p-content-border-color: var(--p-surface-200); + --p-content-hover-background: var(--p-surface-100); + --p-content-hover-color: var(--p-surface-800); + --p-highlight-background: var(--p-primary-50); + --p-highlight-color: var(--p-primary-700); + --p-highlight-focus-background: var(--p-primary-100); + --p-highlight-focus-color: var(--p-primary-800); + --p-text-color: var(--p-surface-700); + --p-text-hover-color: var(--p-surface-800); + --p-text-muted-color: var(--p-surface-500); + --p-text-hover-muted-color: var(--p-surface-600); +} + +/* +* Dark Mode +* Defaults to system, change the selector to match the darkMode in tailwind.config. +* For example; +* darkMode: ['selector', '[class*="app-dark"]'] +* should be; +* :root[class="app-dark"] { +*/ +@media (prefers-color-scheme: dark) { + :root { + --p-primary-color: var(--p-primary-400); + --p-primary-contrast-color: var(--p-surface-900); + --p-primary-hover-color: var(--p-primary-300); + --p-primary-active-color: var(--p-primary-200); + --p-content-border-color: var(--p-surface-700); + --p-content-hover-background: var(--p-surface-800); + --p-content-hover-color: var(--p-surface-0); + --p-highlight-background: color-mix(in srgb, var(--p-primary-400), transparent 84%); + --p-highlight-color: rgba(255, 255, 255, 0.87); + --p-highlight-focus-background: color-mix(in srgb, var(--p-primary-400), transparent 76%); + --p-highlight-focus-color: rgba(255, 255, 255, 0.87); + --p-text-color: var(--p-surface-0); + --p-text-hover-color: var(--p-surface-0); + --p-text-muted-color: var(--p-surface-400); + --p-text-hover-muted-color: var(--p-surface-300); + } +} diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 0000000..5f28182 --- /dev/null +++ b/tailwind.config.js @@ -0,0 +1,9 @@ +/** @type {import('tailwindcss').Config} */ +import primeui from 'tailwindcss-primeui' +export default { + content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'], + theme: { + extend: {}, + }, + plugins: [primeui], +}