QT/InvoiceShelf
1
0
Fork 0
mirror of https://github.com/InvoiceShelf/InvoiceShelf.git synced 2026-06-06 18:39:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

Upgrade to Vite 8 and Tailwind CSS 4 (#595)

Browse Source 
- Vite 6 → 8 (Rolldown bundler), laravel-vite-plugin 1 → 3, @vitejs/plugin-vue 5 → 6
- Tailwind CSS 3 → 4 with CSS-based config (@theme, @plugin, @utility)
- Add @tailwindcss/vite plugin, remove postcss/autoprefixer/sass
- Convert SCSS files to plain CSS (resources/sass → resources/css)
- Migrate tailwind.config.js to CSS @theme directives
- Rename deprecated utility classes (shadow-sm→shadow-xs, outline-none→outline-hidden,
  rounded-sm→rounded-xs, bg-gradient-to→bg-linear-to, ring→ring-3)
- Migrate opacity utilities to color modifiers (bg-opacity, text-opacity,
  border-opacity, ring-opacity → color/N syntax)
- Update primary color CSS vars to full rgb() values for TW4 color-mix()
- Fix border-l color specificity for sidebar navigation (TW4 default border
  color changed from gray-200 to currentColor)
- Fix invalid border color classes (border-grey-light, border-modal-bg, border--200)
- Add @reference directive for @apply in Vue component style blocks
- Convert Vue component <style lang="scss"> blocks to plain CSS
This commit is contained in:
Darko Gjorgjijoski
2026-04-02 15:59:15 +02:00
committed by GitHub
parent 691178857f
commit ad5a7e51b9
84 changed files with 717 additions and 1662 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
package.json
View File

@@ -9,22 +9,18 @@
"test": "eslint ./resources/scripts --ext .js,.vue"
},
"devDependencies": {
"@rvxlab/tailwind-plugin-ios-full-height": "^1.1.0",
"@tailwindcss/aspect-ratio": "^0.4.2",
"@tailwindcss/forms": "^0.5.10",
"@tailwindcss/typography": "^0.5.16",
"@vitejs/plugin-vue": "^5.2.1",
"@tailwindcss/vite": "^4.0.0",
"@vitejs/plugin-vue": "^6.0.0",
"@vue/compiler-sfc": "^3.5.13",
"autoprefixer": "^10.4.20",
"cross-env": "^7.0.3",
"eslint": "^9.18.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-vue": "^9.32.0",
"postcss": "^8.4.49",
"prettier": "^3.4.2",
"sass": "^1.83.1",
"tailwind-scrollbar": "^3.1.0",
"tailwindcss": "^3.4.17"
"tailwind-scrollbar": "^4.0.0",
"tailwindcss": "^4.0.0"
},
"dependencies": {
"@headlessui/vue": "^1.7.23",
@@ -45,7 +41,7 @@
"axios": "^1",
"chart.js": "^2.9.4",
"guid": "^0.0.12",
"laravel-vite-plugin": "^1.1.1",
"laravel-vite-plugin": "^3.0.0",
"lodash": "^4.17.21",
"maska": "^3.0.4",
"mini-svg-data-uri": "^1.4.4",
@@ -54,7 +50,7 @@
"pinia": "^2.3.0",
"v-money3": "^3.24.1",
"v-tooltip": "^4.0.0-beta.17",
"vite": "^6.0.7",
"vite": "^8.0.0",
"vue": "^3.5",
"vue-flatpickr-component": "^11.0.5",
"vue-i18n": "^11.0.1",

7
postcss.config.cjs
View File

@@ -1,7 +0,0 @@
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

0
resources/sass/components/animation.scss → resources/css/components/animation.css vendored
View File

56
resources/css/components/pace-loader.css vendored Normal file
View File

@@ -0,0 +1,56 @@
.pace {
-webkit-pointer-events: none;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.pace-inactive {
display: none;
}
.pace .pace-progress {
background: #3f39ad;
position: fixed;
z-index: 2000;
top: 0;
right: 100%;
width: 100%;
height: 2px;
}
.pace .pace-progress-inner {
display: block;
position: absolute;
right: 0px;
width: 100px;
height: 100%;
box-shadow: 0 0 10px #5851d8, 0 0 5px #5851d8;
opacity: 1;
transform: rotate(3deg) translate(0px, -4px);
}
.pace .pace-activity {
display: block;
position: fixed;
z-index: 2000;
top: 15px;
right: 15px;
width: 14px;
height: 14px;
border: solid 2px transparent;
border-top-color: #5851d8;
border-left-color: #5851d8;
border-radius: 10px;
animation: pace-spinner 400ms linear infinite;
}
@keyframes pace-spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

8
resources/sass/components/v-tooltips.scss → resources/css/components/v-tooltips.css vendored
View File

@@ -80,18 +80,16 @@
}
&.popover {
$color: #f9f9f9;
.popover-inner {
background: $color;
background: #f9f9f9;
color: black;
padding: 24px;
border-radius: 5px;
box-shadow: 0 5px 30px rgba(black, .1);
box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);
}
.popover-arrow {
border-color: $color;
border-color: #f9f9f9;
}
}

98
resources/css/invoiceshelf.css vendored Normal file
View File

@@ -0,0 +1,98 @@
@import "tailwindcss";
@import "./themes.css";
@import "./components/animation.css";
@import "./components/pace-loader.css";
@import "./components/v-tooltips.css";
@plugin "@tailwindcss/forms";
@plugin "@tailwindcss/typography";
@plugin "tailwind-scrollbar";
@source "../scripts/**/*.vue";
@source "../scripts/**/*.js";
@source "../../resources/views/**/*.php";
@theme inline {
--color-primary-50: var(--color-primary-50);
--color-primary-100: var(--color-primary-100);
--color-primary-200: var(--color-primary-200);
--color-primary-300: var(--color-primary-300);
--color-primary-400: var(--color-primary-400);
--color-primary-500: var(--color-primary-500);
--color-primary-600: var(--color-primary-600);
--color-primary-700: var(--color-primary-700);
--color-primary-800: var(--color-primary-800);
--color-primary-900: var(--color-primary-900);
--color-primary-950: var(--color-primary-950);
--color-black: #040405;
}
@theme {
--spacing-88: 22rem;
--font-base: Poppins, sans-serif;
}
@utility bg-multiselect-caret {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
}
@utility bg-multiselect-spinner {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' fill='%234a3dff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M456.433 371.72l-27.79-16.045c-7.192-4.152-10.052-13.136-6.487-20.636 25.82-54.328 23.566-118.602-6.768-171.03-30.265-52.529-84.802-86.621-144.76-91.424C262.35 71.922 256 64.953 256 56.649V24.56c0-9.31 7.916-16.609 17.204-15.96 81.795 5.717 156.412 51.902 197.611 123.408 41.301 71.385 43.99 159.096 8.042 232.792-4.082 8.369-14.361 11.575-22.424 6.92z'/%3E%3C/svg%3E");
}
@utility bg-multiselect-remove {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 320 512' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z'/%3E%3C/svg%3E");
}
@font-face {
font-family: "Poppins";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("$fonts/Poppins-Black.ttf") format("truetype");
}
@font-face {
font-family: "Poppins";
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("$fonts/Poppins-Light.ttf") format("truetype");
}
@font-face {
font-family: "Poppins";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("$fonts/Poppins-Medium.ttf") format("truetype");
}
@font-face {
font-family: "Poppins";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("$fonts/Poppins-Regular.ttf") format("truetype");
}
@font-face {
font-family: "Poppins";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("$fonts/Poppins-SemiBold.ttf") format("truetype");
}
body {
min-height: 100vh;
min-height: -webkit-fill-available;
}
html {
height: -webkit-fill-available;
}
.h-screen-ios {
height: -webkit-fill-available;
}

13
resources/css/themes.css vendored Normal file
View File

@@ -0,0 +1,13 @@
:root {
--color-primary-50: rgb(241, 243, 255);
--color-primary-100: rgb(229, 231, 255);
--color-primary-200: rgb(206, 209, 255);
--color-primary-300: rgb(167, 170, 255);
--color-primary-400: rgb(118, 117, 255);
--color-primary-500: rgb(74, 61, 255);
--color-primary-600: rgb(51, 22, 255);
--color-primary-700: rgb(33, 4, 253);
--color-primary-800: rgb(27, 3, 211);
--color-primary-900: rgb(25, 5, 173);
--color-primary-950: rgb(9, 0, 118);
}

112
resources/sass/components/pace-loader.scss vendored
View File

@@ -1,112 +0,0 @@
$pace-loader-color: #5851d8;
.pace {
-webkit-pointer-events: none;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.pace-inactive {
display: none;
}
.pace .pace-progress {
background: darken($pace-loader-color, 10%);
position: fixed;
z-index: 2000;
top: 0;
right: 100%;
width: 100%;
height: 2px;
}
.pace .pace-progress-inner {
display: block;
position: absolute;
right: 0px;
width: 100px;
height: 100%;
box-shadow: 0 0 10px $pace-loader-color, 0 0 5px $pace-loader-color;
opacity: 1;
-webkit-transform: rotate(3deg) translate(0px, -4px);
-moz-transform: rotate(3deg) translate(0px, -4px);
-ms-transform: rotate(3deg) translate(0px, -4px);
-o-transform: rotate(3deg) translate(0px, -4px);
transform: rotate(3deg) translate(0px, -4px);
}
.pace .pace-activity {
display: block;
position: fixed;
z-index: 2000;
top: 15px;
right: 15px;
width: 14px;
height: 14px;
border: solid 2px transparent;
border-top-color: $pace-loader-color;
border-left-color: $pace-loader-color;
border-radius: 10px;
-webkit-animation: pace-spinner 400ms linear infinite;
-moz-animation: pace-spinner 400ms linear infinite;
-ms-animation: pace-spinner 400ms linear infinite;
-o-animation: pace-spinner 400ms linear infinite;
animation: pace-spinner 400ms linear infinite;
}
@-webkit-keyframes pace-spinner {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-moz-keyframes pace-spinner {
0% {
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-o-keyframes pace-spinner {
0% {
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-ms-keyframes pace-spinner {
0% {
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes pace-spinner {
0% {
transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
transform: rotate(360deg);
}
}

61
resources/sass/invoiceshelf.scss vendored
View File

@@ -1,61 +0,0 @@
@use "themes.scss";
@use "components/animation.scss";
@tailwind base;
@tailwind components;
@tailwind utilities;
@font-face {
font-family: "Poppins";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("$fonts/Poppins-Black.ttf") format("truetype");
}
@font-face {
font-family: "Poppins";
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("$fonts/Poppins-Light.ttf") format("truetype");
}
@font-face {
font-family: "Poppins";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("$fonts/Poppins-Medium.ttf") format("truetype");
}
@font-face {
font-family: "Poppins";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("$fonts/Poppins-Regular.ttf") format("truetype");
}
@font-face {
font-family: "Poppins";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("$fonts/Poppins-SemiBold.ttf") format("truetype");
}
body {
min-height: 100vh;
min-height: -webkit-fill-available;
}
html {
height: -webkit-fill-available;
}
.h-screen-ios {
height: -webkit-fill-available;
}

13
resources/sass/themes.scss vendored
View File

@@ -1,13 +0,0 @@
:root {
--color-primary-50: 241, 243, 255;
--color-primary-100: 229, 231, 255;
--color-primary-200: 206, 209, 255;
--color-primary-300: 167, 170, 255;
--color-primary-400: 118, 117, 255;
--color-primary-500: 74, 61, 255;
--color-primary-600: 51, 22, 255;
--color-primary-700: 33, 4, 253;
--color-primary-800: 27, 3, 211;
--color-primary-900: 25, 5, 173;
--color-primary-950: 9, 0, 118;
}

4
resources/scripts/admin/components/CopyInputField.vue
View File

@@ -6,7 +6,7 @@
px-4
py-2
rounded-lg
bg-opacity-40 bg-gray-300
bg-gray-300/40
whitespace-nowrap
flex-col
mt-1
@@ -33,7 +33,7 @@
h-full
inset-y-0
cursor-pointer
focus:outline-none
focus:outline-hidden
text-primary-500
"
width="37"

8
resources/scripts/admin/components/SelectNotePopup.vue
View File

@@ -4,14 +4,14 @@
<Popover v-slot="{ isOpen }">
<PopoverButton
v-if="userStore.hasAbilities(abilities.VIEW_NOTE)"
:class="isOpen ? '' : 'text-opacity-90'"
:class="isOpen ? '' : ''"
class="
flex
items-center
z-10
font-medium
text-primary-400
focus:outline-none focus:border-none
focus:outline-hidden focus:border-none
"
@click="fetchInitialData"
>
@@ -50,7 +50,7 @@
overflow-hidden
rounded-md
shadow-lg
ring-1 ring-black ring-opacity-5
ring-1 ring-black/5
"
>
<div class="relative grid bg-white">
@@ -117,7 +117,7 @@
py-3
bg-gray-200
border-none
outline-none
outline-hidden
"
@click="openNoteModal"
>

2
resources/scripts/admin/components/currency-exchange-rate/ExchangeRateBulkUpdate.vue
View File

@@ -58,7 +58,7 @@
justify-end
mt-4
pt-4
border-t border-gray-200 border-solid border-modal-bg
border-t border-gray-200 border-solid
"
>
<BaseButton :loading="isSaving" variant="primary" type="submit">

2
resources/scripts/admin/components/estimate-invoice-common/CreateItemRow.vue
View File

@@ -143,7 +143,7 @@
<BaseContentPlaceholders v-if="loading">
<BaseContentPlaceholdersText
:lines="1"
class="w-24 h-8 border rounded-md"
class="w-24 h-8 border border-gray-200 rounded-md"
/>
</BaseContentPlaceholders>

2
resources/scripts/admin/components/estimate-invoice-common/CreateItemRowTax.vue
View File

@@ -42,7 +42,7 @@
<template v-if="userStore.hasAbilities(ability)" #action>
<button
type="button"
class="flex items-center justify-center w-full px-2 py-2 bg-gray-200 border-none outline-none cursor-pointer "
class="flex items-center justify-center w-full px-2 py-2 bg-gray-200 border-none outline-hidden cursor-pointer "
@click="openTaxModal"
>
<BaseIcon name="CheckCircleIcon" class="h-5 text-primary-400" />

2
resources/scripts/admin/components/estimate-invoice-common/CreateTotal.vue
View File

@@ -100,7 +100,7 @@
<BaseContentPlaceholders v-if="isLoading">
<BaseContentPlaceholdersText
:lines="1"
class="w-24 h-8 border rounded-md"
class="w-24 h-8 border border-gray-200 rounded-md"
/>
</BaseContentPlaceholders>
<div v-else class="flex" style="width: 140px" role="group">

2
resources/scripts/admin/components/estimate-invoice-common/ExchangeRateConverter.vue
View File

@@ -11,7 +11,7 @@
<BaseIcon
v-tooltip="{ content: 'Fetch Latest Exchange rate' }"
name="ArrowPathIcon"
:class="`h-4 w-4 text-primary-500 cursor-pointer outline-none ${
:class="`h-4 w-4 text-primary-500 cursor-pointer outline-hidden ${
isFetching
? ' animate-spin rotate-180 cursor-not-allowed pointer-events-none '
: ''

8
resources/scripts/admin/components/estimate-invoice-common/SelectTaxPopup.vue
View File

@@ -2,14 +2,14 @@
<div class="w-full mt-4 tax-select">
<Popover v-slot="{ isOpen }" class="relative">
<PopoverButton
:class="isOpen ? '' : 'text-opacity-90'"
:class="isOpen ? '' : ''"
class="
flex
items-center
text-sm
font-medium
text-primary-400
focus:outline-none focus:border-none
focus:outline-hidden focus:border-none
"
>
<BaseIcon
@@ -39,7 +39,7 @@
overflow-hidden
rounded-md
shadow-lg
ring-1 ring-black ring-opacity-5
ring-1 ring-black/5
"
>
<!-- Tax Search Input -->
@@ -142,7 +142,7 @@
py-3
bg-gray-200
border-none
outline-none
outline-hidden
"
@click="openTaxTypeModal"
>

2
resources/scripts/admin/components/modal-components/CategoryModal.vue
View File

@@ -53,7 +53,7 @@
flex
justify-end
p-4
border-t border-gray-200 border-solid border-modal-bg
border-t border-gray-200 border-solid
"
>
<BaseButton

2
resources/scripts/admin/components/modal-components/CompanyModal.vue
View File

@@ -98,7 +98,7 @@
</BaseInputGrid>
</div>
<div class="z-0 flex justify-end p-4 bg-gray-50 border-modal-bg">
<div class="z-0 flex justify-end p-4 bg-gray-50 border-t border-gray-200">
<BaseButton
class="mr-3 text-sm"
variant="primary-outline"

2
resources/scripts/admin/components/modal-components/DeleteCompanyModal.vue
View File

@@ -38,7 +38,7 @@
</BaseInputGroup>
</div>
<div class="z-0 flex justify-end p-4 bg-gray-50 border-modal-bg">
<div class="z-0 flex justify-end p-4 bg-gray-50 border-t border-gray-200">
<BaseButton
class="mr-3 text-sm"
variant="primary-outline"

2
resources/scripts/admin/components/modal-components/FileDiskModal.vue
View File

@@ -21,7 +21,7 @@
>
<template #default="slotProps">
<div
class="z-0 flex justify-end p-4 border-t border-solid border-gray-light"
class="z-0 flex justify-end p-4 border-t border-solid border-gray-200"
>
<BaseButton
class="mr-3 text-sm"

2
resources/scripts/admin/components/modal-components/ItemUnitModal.vue
View File

@@ -37,7 +37,7 @@
flex
justify-end
p-4
border-t border-gray-200 border-solid border-modal-bg
border-t border-gray-200 border-solid
"
>
<BaseButton

4
resources/scripts/admin/components/modal-components/NoteModal.vue
View File

@@ -75,7 +75,7 @@ _ />
justify-end
px-4
py-4
border-t border-solid border-gray-light
border-t border-solid border-gray-200
"
>
<BaseButton
@@ -280,7 +280,7 @@ function closeNoteModal() {
}
</script>
<style lang="scss">
<style>
.note-modal {
.header-editior .editor-menu-bar {
margin-left: 0.5px;

2
resources/scripts/admin/components/modal-components/RolesModal.vue
View File

@@ -122,7 +122,7 @@
flex
justify-end
p-4
border-t border-solid border--200 border-modal-bg
border-t border-solid border-gray-200
"
>
<BaseButton

2
resources/scripts/admin/components/modal-components/TaxTypeModal.vue
View File

@@ -106,7 +106,7 @@
flex
justify-end
p-4
border-t border-solid border--200 border-modal-bg
border-t border-solid border-gray-200
"
>
<BaseButton

2
resources/scripts/admin/components/modal-components/custom-fields/CustomFieldModal.vue
View File

@@ -179,7 +179,7 @@
flex
justify-end
p-4
border-t border-solid border-gray-light border-modal-bg
border-t border-solid border-gray-200
"
>
<BaseButton

2
resources/scripts/admin/layouts/LayoutLogin.vue
View File

@@ -168,5 +168,5 @@ const loginPageLogo = computed(() => {
})
</script>
<style lang="scss" scoped>
<style scoped>
</style>

2
resources/scripts/admin/layouts/partials/TheSiteHeader.vue
View File

@@ -12,7 +12,7 @@
px-4
py-3
md:h-16 md:px-8
bg-gradient-to-r
bg-linear-to-r
from-primary-500
to-primary-400
"

14
resources/scripts/admin/layouts/partials/TheSiteSidebar.vue
View File

@@ -15,7 +15,7 @@
leave-from="opacity-100"
leave-to="opacity-0"
>
<DialogOverlay class="fixed inset-0 bg-gray-600 bg-opacity-75" />
<DialogOverlay class="fixed inset-0 bg-gray-600/75" />
</TransitionChild>
<TransitionChild
@@ -47,7 +47,7 @@
h-10
ml-1
rounded-full
focus:outline-none
focus:outline-hidden
focus:ring-2
focus:ring-inset
focus:ring-white
@@ -82,9 +82,9 @@
:to="item.link"
:class="[
hasActiveUrl(item.link)
? 'text-primary-500 border-primary-500 bg-gray-100 '
: 'text-black',
'cursor-pointer px-0 pl-4 py-3 border-transparent flex items-center border-l-4 border-solid text-sm not-italic font-medium',
? 'text-primary-500 border-l-primary-500 bg-gray-100 '
: 'text-black border-l-transparent',
'cursor-pointer px-0 pl-4 py-3 flex items-center border-l-4 border-solid text-sm not-italic font-medium',
]"
@click="globalStore.setSidebarVisibility(false)"
>
@@ -136,8 +136,8 @@
:to="item.link"
:class="[
hasActiveUrl(item.link)
? 'text-primary-500 border-primary-500 bg-gray-100 '
: 'text-black',
? 'text-primary-500 border-l-primary-500 bg-gray-100 '
: 'text-black border-l-transparent',
'cursor-pointer px-0 pl-6 hover:bg-gray-50 py-3 group flex items-center border-l-4 border-solid text-sm not-italic font-medium',
]"
>

4
resources/scripts/admin/views/customers/partials/CustomerViewSidebar.vue
View File

@@ -122,9 +122,9 @@
:id="'customer-' + customer.id"
:to="`/admin/customers/${customer.id}/view`"
:class="[
'flex justify-between p-4 items-center cursor-pointer hover:bg-gray-100 border-l-4 border-transparent',
'flex justify-between p-4 items-center cursor-pointer hover:bg-gray-100 border-l-4 border-l-transparent',
{
'bg-gray-100 border-l-4 border-primary-500 border-solid':
'bg-gray-100 border-l-4 border-l-primary-500 border-solid':
hasActiveUrl(customer.id),
},
]"

4
resources/scripts/admin/views/estimates/View.vue
View File

@@ -169,9 +169,9 @@
:id="'estimate-' + estimate.id"
:to="`/admin/estimates/${estimate.id}/view`"
:class="[
'flex justify-between side-estimate p-4 cursor-pointer hover:bg-gray-100 items-center border-l-4 border-transparent',
'flex justify-between side-estimate p-4 cursor-pointer hover:bg-gray-100 items-center border-l-4 border-l-transparent',
{
'bg-gray-100 border-l-4 border-primary-500 border-solid':
'bg-gray-100 border-l-4 border-l-primary-500 border-solid':
hasActiveUrl(estimate.id),
},
]"

4
resources/scripts/admin/views/installation/Step4VerifyDomain.vue
View File

@@ -22,8 +22,8 @@
<ul class="w-full text-gray-600 list-disc list-inside">
<li class="text-sm leading-8">
{{ $t('wizard.verify_domain.notes.not_contain') }}
<b class="inline-block px-1 bg-gray-100 rounded-sm">https://</b> {{ $t('wizard.verify_domain.notes.or') }}
<b class="inline-block px-1 bg-gray-100 rounded-sm">http</b> {{ $t('wizard.verify_domain.notes.in_front') }}
<b class="inline-block px-1 bg-gray-100 rounded-xs">https://</b> {{ $t('wizard.verify_domain.notes.or') }}
<b class="inline-block px-1 bg-gray-100 rounded-xs">http</b> {{ $t('wizard.verify_domain.notes.in_front') }}
</li>
<li class="text-sm leading-8">
{{ $t('wizard.verify_domain.notes.if_you') }}

4
resources/scripts/admin/views/invoices/View.vue
View File

@@ -412,9 +412,9 @@ onSearched = debounce(onSearched, 500)
:id="'invoice-' + invoice.id"
:to="`/admin/invoices/${invoice.id}/view`"
:class="[
'flex justify-between side-invoice p-4 cursor-pointer hover:bg-gray-100 items-center border-l-4 border-transparent',
'flex justify-between side-invoice p-4 cursor-pointer hover:bg-gray-100 items-center border-l-4 border-l-transparent',
{
'bg-gray-100 border-l-4 border-primary-500 border-solid':
'bg-gray-100 border-l-4 border-l-primary-500 border-solid':
hasActiveUrl(invoice.id),
},
]"

6
resources/scripts/admin/views/modules/View.vue
View File

@@ -32,7 +32,7 @@
:class="[
'relative md:h-24 lg:h-36 rounded hover:bg-gray-50',
{
'outline-none ring ring-offset-1 ring-primary-500':
'outline-hidden ring-3 ring-offset-1 ring-primary-500':
displayVideo,
},
]"
@@ -66,7 +66,7 @@
:class="[
'relative md:h-24 lg:h-36 rounded hover:bg-gray-50',
{
'outline-none ring ring-offset-1 ring-primary-500':
'outline-hidden ring-3 ring-offset-1 ring-primary-500':
displayImage === screenshot.url,
},
]"
@@ -195,7 +195,7 @@
checked
? 'bg-primary-50 border-primary-200 z-10'
: 'border-gray-200',
'relative border p-4 flex flex-col cursor-pointer md:pl-4 md:pr-6 md:grid md:grid-cols-2 focus:outline-none',
'relative border p-4 flex flex-col cursor-pointer md:pl-4 md:pr-6 md:grid md:grid-cols-2 focus:outline-hidden',
]"
>
<div class="flex items-center text-sm">

6
resources/scripts/admin/views/modules/partials/ModuleCard.vue
View File

@@ -3,7 +3,7 @@
class="
relative
shadow-md
border-2 border-gray-200 border-opacity-60
border-2 border-gray-200/60
rounded-lg
cursor-pointer
overflow-hidden
@@ -18,7 +18,7 @@
<label
v-if="data.purchased"
class="
bg-white bg-opacity-75
bg-white/75
text-xs
px-3
py-1
@@ -33,7 +33,7 @@
v-if="data.installed"
class="
ml-2
bg-white bg-opacity-75
bg-white/75
text-xs
px-3
py-1

2
resources/scripts/admin/views/modules/partials/ModuleCardPlaceholder.vue
View File

@@ -3,7 +3,7 @@
<div
class="
shadow-md
border-2 border-gray-200 border-opacity-60
border-2 border-gray-200/60
rounded-lg
cursor-pointer
overflow-hidden

2
resources/scripts/admin/views/modules/partials/RecentModuleCard.vue
View File

@@ -10,7 +10,7 @@
<div
class="
w-full
bg-white bg-opacity-75
bg-white/75
backdrop-filter backdrop-blur
py-2
px-4

4
resources/scripts/admin/views/payments/View.vue
View File

@@ -147,9 +147,9 @@
:id="'payment-' + payment.id"
:to="`/admin/payments/${payment.id}/view`"
:class="[
'flex justify-between p-4 items-center cursor-pointer hover:bg-gray-100 border-l-4 border-transparent',
'flex justify-between p-4 items-center cursor-pointer hover:bg-gray-100 border-l-4 border-l-transparent',
{
'bg-gray-100 border-l-4 border-primary-500 border-solid':
'bg-gray-100 border-l-4 border-l-primary-500 border-solid':
hasActiveUrl(payment.id),
},
]"

4
resources/scripts/admin/views/recurring-invoices/partials/RecurringInvoiceViewSidebar.vue
View File

@@ -251,9 +251,9 @@ onSearched = debounce(onSearched, 500)
:id="'recurring-invoice-' + invoice.id"
:to="`/admin/recurring-invoices/${invoice.id}/view`"
:class="[
'flex justify-between side-invoice p-4 cursor-pointer hover:bg-gray-100 items-center border-l-4 border-transparent',
'flex justify-between side-invoice p-4 cursor-pointer hover:bg-gray-100 items-center border-l-4 border-l-transparent',
{
'bg-gray-100 border-l-4 border-primary-500 border-solid':
'bg-gray-100 border-l-4 border-l-primary-500 border-solid':
hasActiveUrl(invoice.id),
},
]"

2
resources/scripts/admin/views/settings/CompanyInfoSettings.vue
View File

@@ -121,7 +121,7 @@
<div class="mt-5">
<button
type="button"
class="inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md text-red-700 bg-red-100 hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:text-sm"
class="inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md text-red-700 bg-red-100 hover:bg-red-200 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:text-sm"
@click="removeCompany"
>
{{ $t('general.delete') }}

3
resources/scripts/components/CompanySwitcher.vue
View File

@@ -12,10 +12,9 @@
md:h-9
ml-2
text-sm text-white
bg-white
bg-white/20
rounded
cursor-pointer
bg-opacity-20
"
@click="isShow = !isShow"
>

2
resources/scripts/components/InvoicePublicPage.vue
View File

@@ -1,7 +1,7 @@
I
<template>
<div class="h-screen overflow-y-auto min-h-0">
<div class="bg-gradient-to-r from-primary-500 to-primary-400 h-5"></div>
<div class="bg-linear-to-r from-primary-500 to-primary-400 h-5"></div>
<div
class="

16
resources/scripts/components/base-select/BaseMultiselect.vue
View File

@@ -437,9 +437,9 @@ export default {
required: false,
default: () => ({
container:
'p-0 relative mx-auto w-full flex items-center justify-end box-border cursor-pointer border border-gray-200 rounded-md bg-white text-sm leading-snug outline-none max-h-10',
'p-0 relative mx-auto w-full flex items-center justify-end box-border cursor-pointer border border-gray-200 rounded-md bg-white text-sm leading-snug outline-hidden max-h-10',
containerDisabled:
'cursor-default bg-gray-200 bg-opacity-50 !text-gray-400',
'cursor-default bg-gray-200/50 !text-gray-400',
containerOpen: '',
containerOpenTop: '',
containerActive: 'ring-1 ring-primary-400 border-primary-400',
@@ -451,17 +451,17 @@ export default {
multipleLabel:
'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5',
search:
'w-full absolute inset-0 outline-none appearance-none box-border border-0 text-sm font-sans bg-white rounded-md pl-3.5',
'w-full absolute inset-0 outline-hidden appearance-none box-border border-0 text-sm font-sans bg-white rounded-md pl-3.5',
tags: 'grow shrink flex flex-wrap mt-1 pl-2',
tag: 'bg-primary-500 text-white text-sm font-semibold py-0.5 pl-2 rounded mr-1 mb-1 flex items-center whitespace-nowrap',
tagDisabled: 'pr-2 !bg-gray-400 text-white',
tagRemove:
'flex items-center justify-center p-1 mx-0.5 rounded-sm hover:bg-black hover:bg-opacity-10 group',
'flex items-center justify-center p-1 mx-0.5 rounded-xs hover:bg-black/10 group',
tagRemoveIcon:
'bg-multiselect-remove text-white bg-center bg-no-repeat opacity-30 inline-block w-3 h-3 group-hover:opacity-60',
tagsSearchWrapper: 'inline-block relative mx-1 mb-1 grow shrink h-full',
tagsSearch:
'absolute inset-0 border-0 focus:outline-none !shadow-none !focus:shadow-none appearance-none p-0 text-sm font-sans box-border w-full',
'absolute inset-0 border-0 focus:outline-hidden !shadow-none !focus:shadow-none appearance-none p-0 text-sm font-sans box-border w-full',
tagsSearchCopy: 'invisible whitespace-pre-wrap inline-block h-px',
placeholder:
'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 text-gray-400 text-sm',
@@ -491,7 +491,7 @@ export default {
groupLabelDisabled: 'bg-gray-100 text-gray-300 cursor-not-allowed',
groupLabelSelectedPointed: 'bg-primary-600 text-white opacity-90',
groupLabelSelectedDisabled:
'text-primary-100 bg-primary-600 bg-opacity-50 cursor-not-allowed',
'text-primary-100 bg-primary-600/50 cursor-not-allowed',
groupOptions: 'p-0 m-0',
option:
'flex items-center justify-start box-border text-left cursor-pointer text-sm leading-snug py-2 px-3',
@@ -500,11 +500,11 @@ export default {
optionDisabled: 'text-gray-300 cursor-not-allowed',
optionSelectedPointed: 'text-white bg-primary-500 opacity-90',
optionSelectedDisabled:
'text-primary-100 bg-primary-500 bg-opacity-50 cursor-not-allowed',
'text-primary-100 bg-primary-500/50 cursor-not-allowed',
noOptions: 'py-2 px-3 text-gray-600 bg-white',
noResults: 'py-2 px-3 text-gray-600 bg-white',
fakeInput:
'bg-transparent absolute left-0 right-0 -bottom-px w-full h-px border-0 p-0 appearance-none outline-none text-transparent',
'bg-transparent absolute left-0 right-0 -bottom-px w-full h-px border-0 p-0 appearance-none outline-hidden text-transparent',
spacer: 'h-9 py-px box-content',
}),
},

2
resources/scripts/components/base/BaseBreadcrumbItem.vue
View File

@@ -8,7 +8,7 @@
font-medium
leading-5
text-gray-900
outline-none
outline-hidden
focus:ring-2 focus:ring-offset-2 focus:ring-primary-400
"
:to="to"

8
resources/scripts/components/base/BaseButton.vue
View File

@@ -9,7 +9,7 @@ const props = defineProps({
defaultClass: {
type: String,
default:
'inline-flex whitespace-nowrap items-center border font-medium focus:outline-none focus:ring-2 focus:ring-offset-2',
'inline-flex whitespace-nowrap items-center border font-medium focus:outline-hidden focus:ring-2 focus:ring-offset-2',
},
tag: {
type: String,
@@ -81,7 +81,7 @@ const placeHolderSize = computed(() => {
const variantClass = computed(() => {
return {
'border-transparent shadow-sm text-white bg-primary-600 hover:bg-primary-700 focus:ring-primary-500':
'border-transparent shadow-xs text-white bg-primary-600 hover:bg-primary-700 focus:ring-primary-500':
props.variant === 'primary',
'border-transparent text-primary-700 bg-primary-100 hover:bg-primary-200 focus:ring-primary-500':
props.variant === 'secondary',
@@ -89,9 +89,9 @@ const variantClass = computed(() => {
props.variant == 'primary-outline',
'border-gray-200 text-gray-700 bg-white hover:bg-gray-50 focus:ring-primary-500 focus:ring-offset-0':
props.variant == 'white',
'border-transparent shadow-sm text-white bg-red-600 hover:bg-red-700 focus:ring-red-500':
'border-transparent shadow-xs text-white bg-red-600 hover:bg-red-700 focus:ring-red-500':
props.variant === 'danger',
'border-transparent bg-gray-200 border hover:bg-opacity-60 focus:ring-gray-500 focus:ring-offset-0':
'border-transparent bg-gray-200 border hover:bg-gray-200/60 focus:ring-gray-500 focus:ring-offset-0':
props.variant === 'gray',
}
})

209
resources/scripts/components/base/BaseContentPlaceholders.vue
View File

@@ -32,43 +32,38 @@ const classObject = computed(() => {
})
</script>
<style lang="scss">
@use 'sass:color';
$base-content-placeholders-primary-color: #ccc !default;
$base-content-placeholders-secondary-color: #eee !default;
$base-content-placeholders-border-radius: 6px !default;
$base-content-placeholders-line-height: 15px !default;
$base-content-placeholders-spacing: 10px !default;
// Animations
<style>
@keyframes vueContentPlaceholdersAnimation {
0% {
transform: translate3d(-30%, 0, 0);
}
100% {
transform: translate3d(100%, 0, 0);
}
}
// Mixins
@mixin base-content-placeholders {
.base-content-placeholders-heading {
display: flex;
[class^='base-content-placeholders-'] + & {
margin-top: 20px;
}
}
.base-content-placeholders-heading__img {
margin-right: 15px;
position: relative;
overflow: hidden;
min-height: $base-content-placeholders-line-height;
background: $base-content-placeholders-secondary-color;
min-height: 15px;
background: #eee;
.base-content-placeholders-is-rounded & {
border-radius: $base-content-placeholders-border-radius;
border-radius: 6px;
}
.base-content-placeholders-is-centered & {
margin-left: auto;
margin-right: auto;
}
.base-content-placeholders-is-animated &::before {
content: '';
position: absolute;
@@ -77,88 +72,125 @@ $base-content-placeholders-spacing: 10px !default;
width: 100vw;
max-width: 1000px;
height: 100%;
background: linear-gradient(
to right,
transparent 0%,
color.adjust($base-content-placeholders-secondary-color, $lightness: -5%) 15%,
transparent 30%
);
animation-duration: 1.5s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: vueContentPlaceholdersAnimation;
animation-timing-function: linear;
background: linear-gradient(to right, transparent 0%, #e1e1e1 15%, transparent 30%);
animation: vueContentPlaceholdersAnimation 1.5s linear infinite forwards;
}
}
@mixin base-content-placeholders-spacing {
[class^='base-content-placeholders-'] + & {
margin-top: 2 * $base-content-placeholders-spacing;
}
}
// Styles
.base-content-placeholders-heading {
.base-content-placeholders-heading__content {
display: flex;
@include base-content-placeholders-spacing;
flex: 1;
flex-direction: column;
justify-content: center;
}
&__img {
margin-right: 1.5 * $base-content-placeholders-spacing;
@include base-content-placeholders;
.base-content-placeholders-heading__title {
width: 85%;
margin-bottom: 10px;
background: #ccc;
position: relative;
overflow: hidden;
min-height: 15px;
.base-content-placeholders-is-rounded & {
border-radius: 6px;
}
&__content {
display: flex;
flex: 1;
flex-direction: column;
justify-content: center;
.base-content-placeholders-is-centered & {
margin-left: auto;
margin-right: auto;
}
&__title {
width: 85%;
margin-bottom: $base-content-placeholders-spacing;
background: $base-content-placeholders-primary-color;
@include base-content-placeholders;
.base-content-placeholders-is-animated &::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100vw;
max-width: 1000px;
height: 100%;
background: linear-gradient(to right, transparent 0%, #e1e1e1 15%, transparent 30%);
animation: vueContentPlaceholdersAnimation 1.5s linear infinite forwards;
}
}
&__subtitle {
width: 90%;
@include base-content-placeholders;
.base-content-placeholders-heading__subtitle {
width: 90%;
position: relative;
overflow: hidden;
min-height: 15px;
background: #eee;
.base-content-placeholders-is-rounded & {
border-radius: 6px;
}
.base-content-placeholders-is-centered & {
margin-left: auto;
margin-right: auto;
}
.base-content-placeholders-is-animated &::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100vw;
max-width: 1000px;
height: 100%;
background: linear-gradient(to right, transparent 0%, #e1e1e1 15%, transparent 30%);
animation: vueContentPlaceholdersAnimation 1.5s linear infinite forwards;
}
}
.base-content-placeholders-text {
@include base-content-placeholders-spacing;
[class^='base-content-placeholders-'] + & {
margin-top: 20px;
}
}
&__line {
.base-content-placeholders-text__line {
width: 100%;
margin-bottom: 10px;
position: relative;
overflow: hidden;
min-height: 15px;
background: #eee;
.base-content-placeholders-is-rounded & {
border-radius: 6px;
}
.base-content-placeholders-is-centered & {
margin-left: auto;
margin-right: auto;
}
.base-content-placeholders-is-animated &::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100vw;
max-width: 1000px;
height: 100%;
background: linear-gradient(to right, transparent 0%, #e1e1e1 15%, transparent 30%);
animation: vueContentPlaceholdersAnimation 1.5s linear infinite forwards;
}
&:first-child {
width: 100%;
margin-bottom: $base-content-placeholders-spacing;
@include base-content-placeholders;
&:first-child {
width: 100%;
}
&:nth-child(2) {
width: 90%;
}
&:nth-child(3) {
width: 80%;
}
&:nth-child(4) {
width: 70%;
}
}
&:nth-child(2) {
width: 90%;
}
&:nth-child(3) {
width: 80%;
}
&:nth-child(4) {
width: 70%;
}
}
.base-content-placeholders-box {
position: relative;
overflow: hidden;
min-height: $base-content-placeholders-line-height;
background: $base-content-placeholders-secondary-color;
min-height: 15px;
background: #eee;
.base-content-placeholders-is-animated &::before {
content: '';
@@ -168,20 +200,9 @@ $base-content-placeholders-spacing: 10px !default;
width: 100vw;
max-width: 1000px;
height: 100%;
background: linear-gradient(
to right,
transparent 0%,
color.adjust($base-content-placeholders-secondary-color, $lightness: -5%) 15%,
transparent 30%
);
animation-duration: 1.5s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: vueContentPlaceholdersAnimation;
animation-timing-function: linear;
background: linear-gradient(to right, transparent 0%, #e1e1e1 15%, transparent 30%);
animation: vueContentPlaceholdersAnimation 1.5s linear infinite forwards;
}
// @include base-content-placeholders-spacing;
}
.base-content-circle {
@@ -189,6 +210,6 @@ $base-content-placeholders-spacing: 10px !default;
}
.base-content-placeholders-is-rounded {
border-radius: $base-content-placeholders-border-radius;
border-radius: 6px;
}
</style>

10
resources/scripts/components/base/BaseCustomerSelectPopup.vue
View File

@@ -172,12 +172,12 @@
<Popover v-else v-slot="{ open }" class="relative flex flex-col rounded-md">
<PopoverButton
:class="{
'text-opacity-90': open,
'': open,
'border border-solid border-red-500 focus:ring-red-500 rounded':
valid.$error,
'focus:ring-2 focus:ring-primary-400': !valid.$error,
}"
class="w-full outline-none rounded-md"
class="w-full outline-hidden rounded-md"
>
<div
class="
@@ -243,7 +243,7 @@
overflow-hidden
rounded-md
shadow-lg
ring-1 ring-black ring-opacity-5
ring-1 ring-black/5
bg-white
"
>
@@ -277,7 +277,7 @@
border-b border-gray-200 border-solid
cursor-pointer
hover:cursor-pointer hover:bg-gray-100
focus:outline-none focus:bg-gray-100
focus:outline-hidden focus:bg-gray-100
last:border-b-0
"
@click="selectNewCustomer(customer.id, close)"
@@ -352,7 +352,7 @@
py-3
bg-gray-200
border-none
outline-none
outline-hidden
focus:bg-gray-300
"
@click="openCustomerModal"

4
resources/scripts/components/base/BaseDatePicker.vue
View File

@@ -121,7 +121,7 @@ const props = defineProps({
defaultInputClass: {
type: String,
default:
'font-base pl-8 py-2 outline-none focus:ring-primary-400 focus:outline-none focus:border-primary-400 block w-full sm:text-sm border-gray-200 rounded-md text-black',
'font-base pl-8 py-2 outline-hidden focus:ring-primary-400 focus:outline-hidden focus:border-primary-400 block w-full sm:text-sm border-gray-200 rounded-md text-black',
},
time24hr: {
type: Boolean,
@@ -282,7 +282,7 @@ const inputInvalidClass = computed(() => {
const inputDisabledClass = computed(() => {
if (props.disabled) {
return 'border border-solid rounded-md outline-none input-field box-border-2 base-date-picker-input placeholder-gray-400 bg-gray-200 text-gray-600 border-gray-200'
return 'border border-solid rounded-md outline-hidden input-field box-border-2 base-date-picker-input placeholder-gray-400 bg-gray-200 text-gray-600 border-gray-200'
}
return ''

2
resources/scripts/components/base/BaseDialog.vue
View File

@@ -30,7 +30,7 @@
leave-to="opacity-0"
>
<DialogOverlay
class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75"
class="fixed inset-0 transition-opacity bg-gray-500/75"
/>
</TransitionChild>

4
resources/scripts/components/base/BaseDropdown.vue
View File

@@ -11,7 +11,7 @@
/>
</BaseContentPlaceholders>
<Menu v-else>
<MenuButton ref="trigger" class="focus:outline-none" @click="onClick">
<MenuButton ref="trigger" class="focus:outline-hidden" @click="onClick">
<slot name="activator" />
</MenuButton>
@@ -69,7 +69,7 @@ const props = defineProps({
})
const containerClasses = computed(() => {
const baseClass = `origin-top-right rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 divide-y divide-gray-100 focus:outline-none`
const baseClass = `origin-top-right rounded-md shadow-lg bg-white ring-1 ring-black/5 divide-y divide-gray-100 focus:outline-hidden`
return `${baseClass} ${props.containerClass}`
})

14
resources/scripts/components/base/BaseEstimateStatusBadge.vue
View File

@@ -18,19 +18,19 @@ const props = defineProps({
const badgeColorClasses = computed(() => {
switch (props.status) {
case 'DRAFT':
return 'bg-yellow-300 bg-opacity-25 px-2 py-1 text-sm text-yellow-800 uppercase font-normal text-center '
return 'bg-yellow-300/25 px-2 py-1 text-sm text-yellow-800 uppercase font-normal text-center '
case 'SENT':
return ' bg-yellow-500 bg-opacity-25 px-2 py-1 text-sm text-yellow-900 uppercase font-normal text-center '
return ' bg-yellow-500/25 px-2 py-1 text-sm text-yellow-900 uppercase font-normal text-center '
case 'VIEWED':
return 'bg-blue-400 bg-opacity-25 px-2 py-1 text-sm text-blue-900 uppercase font-normal text-center'
return 'bg-blue-400/25 px-2 py-1 text-sm text-blue-900 uppercase font-normal text-center'
case 'EXPIRED':
return 'bg-red-300 bg-opacity-25 px-2 py-1 text-sm text-red-800 uppercase font-normal text-center'
return 'bg-red-300/25 px-2 py-1 text-sm text-red-800 uppercase font-normal text-center'
case 'ACCEPTED':
return 'bg-green-400 bg-opacity-25 px-2 py-1 text-sm text-green-800 uppercase font-normal text-center'
return 'bg-green-400/25 px-2 py-1 text-sm text-green-800 uppercase font-normal text-center'
case 'REJECTED':
return 'bg-purple-300 bg-opacity-25 px-2 py-1 text-sm text-purple-800 uppercase font-normal text-center'
return 'bg-purple-300/25 px-2 py-1 text-sm text-purple-800 uppercase font-normal text-center'
default:
return 'bg-gray-500 bg-opacity-25 px-2 py-1 text-sm text-gray-900 uppercase font-normal text-center'
return 'bg-gray-500/25 px-2 py-1 text-sm text-gray-900 uppercase font-normal text-center'
}
})
</script>

2
resources/scripts/components/base/BaseFileUploader.vue
View File

@@ -11,7 +11,7 @@
rounded-md
cursor-pointer
avatar-upload
border-gray-200
border-gray-300
transition-all
duration-300
ease-in-out

4
resources/scripts/components/base/BaseInfoAlert.vue
View File

@@ -42,7 +42,7 @@
font-medium
text-yellow-800
hover:bg-yellow-100
focus:outline-none
focus:outline-hidden
focus:ring-2
focus:ring-offset-2
focus:ring-offset-yellow-50
@@ -66,7 +66,7 @@
font-medium
text-yellow-800
hover:bg-yellow-100
focus:outline-none
focus:outline-hidden
focus:ring-2
focus:ring-offset-2
focus:ring-offset-yellow-50

2
resources/scripts/components/base/BaseInput.vue
View File

@@ -10,7 +10,7 @@
<div
v-else
:class="[containerClass, computedContainerClass]"
class="relative rounded-md shadow-sm font-base"
class="relative rounded-md shadow-xs font-base"
>
<div
v-if="loading && loadingPosition === 'left'"

20
resources/scripts/components/base/BaseInvoiceStatusBadge.vue
View File

@@ -20,25 +20,25 @@ export default {
const badgeColorClasses = computed(() => {
switch (props.status) {
case 'DRAFT':
return 'bg-yellow-300 bg-opacity-25 px-2 py-1 text-sm text-yellow-800 uppercase font-normal text-center'
return 'bg-yellow-300/25 px-2 py-1 text-sm text-yellow-800 uppercase font-normal text-center'
case 'SENT':
return ' bg-yellow-500 bg-opacity-25 px-2 py-1 text-sm text-yellow-900 uppercase font-normal text-center '
return ' bg-yellow-500/25 px-2 py-1 text-sm text-yellow-900 uppercase font-normal text-center '
case 'VIEWED':
return 'bg-blue-400 bg-opacity-25 px-2 py-1 text-sm text-blue-900 uppercase font-normal text-center'
return 'bg-blue-400/25 px-2 py-1 text-sm text-blue-900 uppercase font-normal text-center'
case 'COMPLETED':
return 'bg-green-500 bg-opacity-25 px-2 py-1 text-sm text-green-900 uppercase font-normal text-center'
return 'bg-green-500/25 px-2 py-1 text-sm text-green-900 uppercase font-normal text-center'
case 'DUE':
return 'bg-yellow-500 bg-opacity-25 px-2 py-1 text-sm text-yellow-900 uppercase font-normal text-center'
return 'bg-yellow-500/25 px-2 py-1 text-sm text-yellow-900 uppercase font-normal text-center'
case 'OVERDUE':
return 'bg-red-300 bg-opacity-50 px-2 py-1 text-sm text-red-900 uppercase font-normal text-center'
return 'bg-red-300/50 px-2 py-1 text-sm text-red-900 uppercase font-normal text-center'
case 'UNPAID':
return 'bg-yellow-500 bg-opacity-25 px-2 py-1 text-sm text-yellow-900 uppercase font-normal text-center'
return 'bg-yellow-500/25 px-2 py-1 text-sm text-yellow-900 uppercase font-normal text-center'
case 'PARTIALLY_PAID':
return 'bg-blue-400 bg-opacity-25 px-2 py-1 text-sm text-blue-900 uppercase font-normal text-center'
return 'bg-blue-400/25 px-2 py-1 text-sm text-blue-900 uppercase font-normal text-center'
case 'PAID':
return 'bg-green-500 bg-opacity-25 px-2 py-1 text-sm text-green-900 uppercase font-normal text-center'
return 'bg-green-500/25 px-2 py-1 text-sm text-green-900 uppercase font-normal text-center'
default:
return 'bg-gray-500 bg-opacity-25 px-2 py-1 text-sm text-gray-900 uppercase font-normal text-center'
return 'bg-gray-500/25 px-2 py-1 text-sm text-gray-900 uppercase font-normal text-center'
}
})
return { badgeColorClasses }

2
resources/scripts/components/base/BaseModal.vue
View File

@@ -29,7 +29,7 @@
leave-to="opacity-0"
>
<DialogOverlay
class="fixed inset-0 transition-opacity bg-gray-700 bg-opacity-25"
class="fixed inset-0 transition-opacity bg-gray-700/25"
/>
</TransitionChild>

10
resources/scripts/components/base/BasePaidStatusBadge.vue
View File

@@ -24,15 +24,15 @@ export default {
const badgeColorClasses = computed(() => {
switch (props.status) {
case 'PAID':
return 'bg-primary-300 bg-opacity-25 text-primary-800 uppercase font-normal text-center'
return 'bg-primary-300/25 text-primary-800 uppercase font-normal text-center'
case 'UNPAID':
return ' bg-yellow-500 bg-opacity-25 text-yellow-900 uppercase font-normal text-center '
return ' bg-yellow-500/25 text-yellow-900 uppercase font-normal text-center '
case 'PARTIALLY_PAID':
return 'bg-blue-400 bg-opacity-25 text-blue-900 uppercase font-normal text-center'
return 'bg-blue-400/25 text-blue-900 uppercase font-normal text-center'
case 'OVERDUE':
return 'bg-red-300 bg-opacity-50 px-2 py-1 text-sm text-red-900 uppercase font-normal text-center'
return 'bg-red-300/50 px-2 py-1 text-sm text-red-900 uppercase font-normal text-center'
default:
return 'bg-gray-500 bg-opacity-25 text-gray-900 uppercase font-normal text-center'
return 'bg-gray-500/25 text-gray-900 uppercase font-normal text-center'
}
})
return { badgeColorClasses }

2
resources/scripts/components/base/BaseRadio.vue
View File

@@ -10,7 +10,7 @@
:name="name"
v-bind="$attrs"
>
<div class="relative flex cursor-pointer focus:outline-none">
<div class="relative flex cursor-pointer focus:outline-hidden">
<span
:class="[
checked ? checkedStateClass : unCheckedStateClass,

6
resources/scripts/components/base/BaseRating.vue
View File

@@ -182,16 +182,12 @@ export default {
}
</script>
<style scoped lang="scss">
<style scoped>
.star-rating {
display: flex;
align-items: center;
.star-container {
display: flex;
.star-svg {
}
}
.indicator {
}
.star-container:not(:last-child) {
margin-right: 5px;

8
resources/scripts/components/base/BaseRecurringInvoiceStatusBadge.vue
View File

@@ -20,13 +20,13 @@ export default {
const badgeColorClasses = computed(() => {
switch (props.status) {
case 'COMPLETED':
return 'bg-green-500 bg-opacity-25 px-2 py-1 text-sm text-green-900 uppercase font-normal text-center'
return 'bg-green-500/25 px-2 py-1 text-sm text-green-900 uppercase font-normal text-center'
case 'ON_HOLD':
return 'bg-yellow-500 bg-opacity-25 px-2 py-1 text-sm text-yellow-900 uppercase font-normal text-center'
return 'bg-yellow-500/25 px-2 py-1 text-sm text-yellow-900 uppercase font-normal text-center'
case 'ACTIVE':
return 'bg-blue-400 bg-opacity-25 px-2 py-1 text-sm text-blue-900 uppercase font-normal text-center'
return 'bg-blue-400/25 px-2 py-1 text-sm text-blue-900 uppercase font-normal text-center'
default:
return 'bg-gray-500 bg-opacity-25 px-2 py-1 text-sm text-gray-900 uppercase font-normal text-center'
return 'bg-gray-500/25 px-2 py-1 text-sm text-gray-900 uppercase font-normal text-center'
}
})
return { badgeColorClasses }

8
resources/scripts/components/base/BaseSelectInput.vue
View File

@@ -30,9 +30,9 @@
bg-white
border border-gray-200
rounded-md
shadow-sm
shadow-xs
cursor-default
focus:outline-none
focus:outline-hidden
focus:ring-1
focus:ring-primary-500
focus:border-primary-500
@@ -86,8 +86,8 @@
rounded-md
shadow-lg
max-h-60
ring-1 ring-black ring-opacity-5
focus:outline-none
ring-1 ring-black/5
focus:outline-hidden
sm:text-sm
"
>

2
resources/scripts/components/base/BaseSwitch.vue
View File

@@ -16,7 +16,7 @@
transition-colors
rounded-full
w-11
focus:outline-none focus:ring-primary-500
focus:outline-hidden focus:ring-primary-500
"
v-bind="$attrs"
>

2
resources/scripts/components/base/BaseSwitchSection.vue
View File

@@ -19,7 +19,7 @@
:model-value="modelValue"
:class="[
modelValue ? 'bg-primary-500' : 'bg-gray-200',
'ml-4 relative inline-flex shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500',
'ml-4 relative inline-flex shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-primary-500',
]"
@update:modelValue="onUpdate"
>

2
resources/scripts/components/base/BaseTab.vue
View File

@@ -1,5 +1,5 @@
<template>
<TabPanel :class="[tabPanelContainer, 'focus:outline-none']">
<TabPanel :class="[tabPanelContainer, 'focus:outline-hidden']">
<!-- focus:ring-1 focus:ring-jet focus:ring-opacity-60 -->
<slot />
</TabPanel>

4
resources/scripts/components/base/BaseTabGroup.vue
View File

@@ -3,7 +3,7 @@
<TabGroup :default-index="defaultIndex" @change="onChange">
<TabList
:class="[
'flex border-b border-grey-light',
'flex border-b border-gray-200',
'relative overflow-x-auto overflow-y-hidden',
'lg:pb-0 lg:ml-0',
]"
@@ -16,7 +16,7 @@
>
<button
:class="[
'px-8 py-2 text-sm leading-5 font-medium flex items-center relative border-b-2 mt-4 focus:outline-none whitespace-nowrap',
'px-8 py-2 text-sm leading-5 font-medium flex items-center relative border-b-2 mt-4 focus:outline-hidden whitespace-nowrap',
selected
? ' border-primary-400 text-black font-medium'
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300',

4
resources/scripts/components/base/BaseTextarea.vue
View File

@@ -45,7 +45,7 @@ const props = defineProps({
defaultInputClass: {
type: String,
default:
'box-border w-full px-3 py-2 text-sm not-italic font-normal leading-snug text-left text-black placeholder-gray-400 bg-white border border-gray-200 border-solid rounded outline-none',
'box-border w-full px-3 py-2 text-sm not-italic font-normal leading-snug text-left text-black placeholder-gray-400 bg-white border border-gray-200 border-solid rounded outline-hidden',
},
autosize: {
type: Boolean,
@@ -66,7 +66,7 @@ const inputBorderClass = computed(() => {
return 'focus:ring-primary-400 focus:border-primary-400'
}
return 'border-none outline-none focus:ring-primary-400 focus:border focus:border-primary-400'
return 'border-none outline-hidden focus:ring-primary-400 focus:border focus:border-primary-400'
})
const loadingPlaceholderSize = computed(() => {

4
resources/scripts/components/base/BaseTimePicker.vue
View File

@@ -86,7 +86,7 @@ const props = defineProps({
defaultInputClass: {
type: String,
default:
'font-base pl-8 py-2 outline-none focus:ring-primary-400 focus:outline-none focus:border-primary-400 block w-full sm:text-sm border-gray-300 rounded-md text-black',
'font-base pl-8 py-2 outline-hidden focus:ring-primary-400 focus:outline-hidden focus:border-primary-400 block w-full sm:text-sm border-gray-300 rounded-md text-black',
},
})
@@ -130,7 +130,7 @@ const inputInvalidClass = computed(() => {
const inputDisabledClass = computed(() => {
if (props.disabled) {
return 'border border-solid rounded-md outline-none input-field box-border-2 base-date-picker-input placeholder-gray-400 bg-gray-300 text-gray-600 border-gray-300'
return 'border border-solid rounded-md outline-hidden input-field box-border-2 base-date-picker-input placeholder-gray-400 bg-gray-300 text-gray-600 border-gray-300'
}
return ''

10
resources/scripts/components/base/base-editor/BaseEditor.vue
View File

@@ -15,7 +15,7 @@
<BaseDropdown width-class="w-48">
<template #activator>
<div
class="flex items-center justify-center w-6 h-6 ml-2 text-sm text-black bg-white rounded-sm md:h-9 md:w-9"
class="flex items-center justify-center w-6 h-6 ml-2 text-sm text-black bg-white rounded-xs md:h-9 md:w-9"
>
<EllipsisVerticalIcon class="w-6 h-6 text-gray-600" />
</div>
@@ -175,7 +175,9 @@ export default {
}
</script>
<style lang="scss">
<style>
@reference "../../../../css/invoiceshelf.css";
.ProseMirror {
min-height: 200px;
padding: 8px 12px;
@@ -209,7 +211,7 @@ export default {
blockquote {
padding-left: 1rem;
border-left: 2px solid rgba(#0d0d0d, 0.1);
border-left: 2px solid rgba(13, 13, 13, 0.1);
}
code {
@@ -236,7 +238,7 @@ export default {
}
a {
color: rgb(var(--color-primary-500));
color: var(--color-primary-500);
text-decoration: underline;
}
}

2
resources/scripts/components/base/base-table/BaseTable.vue
View File

@@ -103,7 +103,7 @@
justify-center
w-full
h-full
bg-white bg-opacity-60
bg-white/60
"
>
<SpinnerIcon class="w-10 h-10 text-primary-500" />

2
resources/scripts/components/base/base-table/BaseTablePagination.vue
View File

@@ -107,7 +107,7 @@
</div>
<div>
<nav
class="relative z-0 inline-flex -space-x-px rounded-md shadow-sm"
class="relative z-0 inline-flex -space-x-px rounded-md shadow-xs"
aria-label="Pagination"
>
<a

4
resources/scripts/components/icons/MainLogo.vue
View File

@@ -12,11 +12,11 @@ import {ref} from 'vue'
const props = defineProps({
darkColor: {
type: String,
default: 'rgba(var(--color-primary-500), var(--tw-text-opacity))',
default: 'var(--color-primary-500)',
},
lightColor: {
type: String,
default: 'rgba(var(--color-primary-400), var(--tw-text-opacity))',
default: 'var(--color-primary-400)',
},
})

2
resources/scripts/components/notifications/NotificationItem.vue
View File

@@ -101,7 +101,7 @@
transition
duration-150
ease-in-out
focus:outline-none
focus:outline-hidden
"
@click="hideNotificationAction"
>

4
resources/scripts/components/svg/LoginBackground.vue
View File

@@ -20,11 +20,11 @@
gradientUnits="userSpaceOnUse"
>
<stop
stop-color="rgba(var(--color-primary-500), var(--tw-text-opacity))"
stop-color="var(--color-primary-500)"
/>
<stop
offset="1"
stop-color="rgba(var(--color-primary-400), var(--tw-text-opacity))"
stop-color="var(--color-primary-400)"
/>
</linearGradient>
</defs>

4
resources/scripts/components/svg/LoginBackgroundOverlay.vue
View File

@@ -22,11 +22,11 @@
gradientUnits="userSpaceOnUse"
>
<stop
stop-color="rgba(var(--color-primary-500), var(--tw-text-opacity))"
stop-color="var(--color-primary-500)"
/>
<stop
offset="1"
stop-color="rgba(var(--color-primary-400), var(--tw-text-opacity))"
stop-color="var(--color-primary-400)"
/>
</linearGradient>
</defs>

10
resources/scripts/customer/layouts/partials/TheSiteHeader.vue
View File

@@ -2,7 +2,7 @@
<Disclosure
v-slot="{ open }"
as="nav"
class="bg-white shadow-sm fixed top-0 left-0 z-20 w-full"
class="bg-white shadow-xs fixed top-0 left-0 z-20 w-full"
>
<div class="mx-auto px-8">
<div class="flex justify-between h-16 w-full">
@@ -51,7 +51,7 @@
rounded-full
text-gray-400
hover:text-gray-500
focus:outline-none
focus:outline-hidden
focus:ring-2
focus:ring-offset-2
focus:ring-primary-500
@@ -69,7 +69,7 @@
flex
text-sm
rounded-full
focus:outline-none
focus:outline-hidden
focus:ring-2
focus:ring-offset-2
focus:ring-primary-500
@@ -114,7 +114,7 @@
rounded-md
text-gray-400
hover:text-gray-500 hover:bg-gray-100
focus:outline-none
focus:outline-hidden
focus:ring-2
focus:ring-offset-2
focus:ring-primary-500
@@ -167,7 +167,7 @@
rounded-full
text-gray-400
hover:text-gray-500
focus:outline-none
focus:outline-hidden
focus:ring-2
focus:ring-offset-2
focus:ring-primary-500

2
resources/scripts/customer/views/BaseCheckon.vue
View File

@@ -8,5 +8,5 @@
export default {}
</script>
<style lang="scss" scoped>
<style scoped>
</style>

4
resources/scripts/customer/views/estimates/View.vue
View File

@@ -146,9 +146,9 @@
:key="index"
:to="`/${globalStore.companySlug}/customer/estimates/${estimate.id}/view`"
:class="[
'flex justify-between p-4 items-center cursor-pointer hover:bg-gray-100 border-l-4 border-transparent',
'flex justify-between p-4 items-center cursor-pointer hover:bg-gray-100 border-l-4 border-l-transparent',
{
'bg-gray-100 border-l-4 border-primary-500 border-solid':
'bg-gray-100 border-l-4 border-l-primary-500 border-solid':
hasActiveUrl(estimate.id),
},
]"

4
resources/scripts/customer/views/invoices/View.vue
View File

@@ -152,9 +152,9 @@
:key="index"
:to="`/${globalStore.companySlug}/customer/invoices/${invoice.id}/view`"
:class="[
'flex justify-between p-4 items-center cursor-pointer hover:bg-gray-100 border-l-4 border-transparent',
'flex justify-between p-4 items-center cursor-pointer hover:bg-gray-100 border-l-4 border-l-transparent',
{
'bg-gray-100 border-l-4 border-primary-500 border-solid':
'bg-gray-100 border-l-4 border-l-primary-500 border-solid':
hasActiveUrl(invoice.id),
},
]"

4
resources/scripts/customer/views/payments/View.vue
View File

@@ -140,9 +140,9 @@
:key="index"
:to="`/${globalStore.companySlug}/customer/payments/${payment.id}/view`"
:class="[
'flex justify-between p-4 items-center cursor-pointer hover:bg-gray-100 border-l-4 border-transparent',
'flex justify-between p-4 items-center cursor-pointer hover:bg-gray-100 border-l-4 border-l-transparent',
{
'bg-gray-100 border-l-4 border-primary-500 border-solid':
'bg-gray-100 border-l-4 border-l-primary-500 border-solid':
hasActiveUrl(payment.id),
},
]"

7
resources/scripts/main.js vendored
View File

@@ -1,4 +1,4 @@
import '../sass/invoiceshelf.scss'
import '../css/invoiceshelf.css'
import 'v-tooltip/dist/v-tooltip.css'
import '@/scripts/http'
import * as VueRouter from 'vue-router'
@@ -7,11 +7,6 @@ import * as pinia from 'pinia'
import * as Vue from 'vue'
import * as Vuelidate from '@vuelidate/core'
import.meta.glob([
'../static/img/**',
'../static/fonts/**',
]);
window.pinia = pinia
window.Vuelidate = Vuelidate
import InvoiceShelf from './InvoiceShelf.js'

75
tailwind.config.js vendored
View File

@@ -1,75 +0,0 @@
import { red, teal, slate } from 'tailwindcss/colors';
import svgToDataUri from 'mini-svg-data-uri';
function withOpacityValue(cssVariable) {
return ({ opacityVariable, opacityValue }) => {
if (opacityValue !== undefined) {
return `rgba(var(${cssVariable}), ${opacityValue})`;
}
if (opacityVariable !== undefined) {
return `rgba(var(${cssVariable}), var(${opacityVariable}, 1))`;
}
return `rgb(var(${cssVariable}))`;
};
}
export default {
plugins: [
require('@tailwindcss/forms'),
require('@tailwindcss/typography'),
require('@tailwindcss/aspect-ratio'),
require('tailwind-scrollbar'),
require('@rvxlab/tailwind-plugin-ios-full-height')
],
theme: {
extend: {
colors: {
primary: {
50: withOpacityValue('--color-primary-50'),
100: withOpacityValue('--color-primary-100'),
200: withOpacityValue('--color-primary-200'),
300: withOpacityValue('--color-primary-300'),
400: withOpacityValue('--color-primary-400'),
500: withOpacityValue('--color-primary-500'),
600: withOpacityValue('--color-primary-600'),
700: withOpacityValue('--color-primary-700'),
800: withOpacityValue('--color-primary-800'),
900: withOpacityValue('--color-primary-900'),
},
black: '#040405',
red: red,
teal: teal,
gray: slate,
},
spacing: {
88: '22rem',
},
backgroundImage: (theme) => ({
'multiselect-caret': `url("${svgToDataUri(
`<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>`
)}")`,
'multiselect-spinner': `url("${svgToDataUri(
`<svg viewBox="0 0 512 512" fill="${theme(
'colors.primary.500'
)}" xmlns="http://www.w3.org/2000/svg"><path d="M456.433 371.72l-27.79-16.045c-7.192-4.152-10.052-13.136-6.487-20.636 25.82-54.328 23.566-118.602-6.768-171.03-30.265-52.529-84.802-86.621-144.76-91.424C262.35 71.922 256 64.953 256 56.649V24.56c0-9.31 7.916-16.609 17.204-15.96 81.795 5.717 156.412 51.902 197.611 123.408 41.301 71.385 43.99 159.096 8.042 232.792-4.082 8.369-14.361 11.575-22.424 6.92z"></path></svg>`
)}")`,
'multiselect-remove': `url("${svgToDataUri(
`<svg viewBox="0 0 320 512" fill="${theme(
'colors.white'
)}" xmlns="http://www.w3.org/2000/svg"><path d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"></path></svg>`
)}")`,
}),
},
fontFamily: {
base: ['Poppins', 'sans-serif'],
},
},
content: [
'./resources/views/**/*.php',
'./resources/scripts/**/*.js',
'./resources/scripts/**/*.vue',
],
}

19
vite.config.js vendored
View File

@@ -2,6 +2,7 @@ import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { resolve } from 'path';
import laravel from 'laravel-vite-plugin';
import tailwindcss from '@tailwindcss/vite';
export default defineConfig({
server: {
@@ -12,7 +13,6 @@ export default defineConfig({
},
resolve: {
alias: {
"vue-i18n": "vue-i18n/dist/vue-i18n.cjs.js",
'@': resolve(__dirname, './resources/'),
$fonts: resolve(__dirname, './resources/static/fonts'),
$images: resolve(__dirname, './resources/static/img')
@@ -20,26 +20,17 @@ export default defineConfig({
extensions: ['.js', '.ts', '.jsx', '.tsx', '.json', '.vue', '.mjs']
},
plugins: [
tailwindcss(),
vue({
template: {
transformAssetUrls: {
// The Vue plugin will re-write asset URLs, when referenced
// in Single File Components, to point to the Laravel web
// server. Setting this to `null` allows the Laravel plugin
// to instead re-write asset URLs to point to the Vite
// server instead.
base: null,
// The Vue plugin will parse absolute URLs and treat them
// as absolute paths to files on disk. Setting this to
// `false` will leave absolute URLs un-touched so they can
// reference assets in the public directory as expected.
includeAbsolute: false,
},
},
}),
laravel([
'resources/scripts/main.js'
])
laravel({
input: ['resources/scripts/main.js'],
})
]
});

1376
yarn.lock
View File

File diff suppressed because it is too large Load Diff