QT/InvoiceShelf
1
0
Fork 0
mirror of https://github.com/InvoiceShelf/InvoiceShelf.git synced 2026-05-06 19:44:04 +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

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