mirror of
https://github.com/crater-invoice/crater.git
synced 2025-10-28 04:01:10 -04:00
Compare commits
5 Commits
dark-label
...
dark-dropd
| Author | SHA1 | Date | |
|---|---|---|---|
| 973179a351 | |||
| 1749e34396 | |||
| 953abe6ec6 | |||
| 3ea10de182 | |||
| 1f5bb49333 |
@ -7,7 +7,6 @@
|
|||||||
py-2
|
py-2
|
||||||
rounded-lg
|
rounded-lg
|
||||||
bg-opacity-40 bg-gray-300
|
bg-opacity-40 bg-gray-300
|
||||||
dark:bg-gray-700 dark:border-gray-600
|
|
||||||
whitespace-nowrap
|
whitespace-nowrap
|
||||||
flex-col
|
flex-col
|
||||||
mt-1
|
mt-1
|
||||||
@ -20,7 +19,6 @@
|
|||||||
text-sm
|
text-sm
|
||||||
font-medium
|
font-medium
|
||||||
text-black
|
text-black
|
||||||
dark:text-white
|
|
||||||
truncate
|
truncate
|
||||||
select-all select-color
|
select-all select-color
|
||||||
"
|
"
|
||||||
|
|||||||
@ -91,7 +91,6 @@
|
|||||||
leading-tight
|
leading-tight
|
||||||
text-gray-700
|
text-gray-700
|
||||||
cursor-pointer
|
cursor-pointer
|
||||||
dark:text-gray-400
|
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
{{ note.name }}
|
{{ note.name }}
|
||||||
|
|||||||
@ -6,17 +6,8 @@
|
|||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import Chart from 'chart.js'
|
import Chart from 'chart.js'
|
||||||
import {
|
import { ref, reactive, computed, onMounted, watchEffect, inject } from 'vue'
|
||||||
ref,
|
|
||||||
reactive,
|
|
||||||
computed,
|
|
||||||
onMounted,
|
|
||||||
watchEffect,
|
|
||||||
inject,
|
|
||||||
watch,
|
|
||||||
} from 'vue'
|
|
||||||
import { useCompanyStore } from '@/scripts/admin/stores/company'
|
import { useCompanyStore } from '@/scripts/admin/stores/company'
|
||||||
import { useGlobalStore } from '@/scripts/admin/stores/global'
|
|
||||||
|
|
||||||
const utils = inject('utils')
|
const utils = inject('utils')
|
||||||
|
|
||||||
@ -53,11 +44,9 @@ const props = defineProps({
|
|||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
const isDarkModeOn = document.documentElement.classList.contains('dark')
|
|
||||||
let myLineChart = null
|
let myLineChart = null
|
||||||
const graph = ref(null)
|
const graph = ref(null)
|
||||||
const companyStore = useCompanyStore()
|
const companyStore = useCompanyStore()
|
||||||
const globalStore = useGlobalStore()
|
|
||||||
const defaultCurrency = computed(() => {
|
const defaultCurrency = computed(() => {
|
||||||
return companyStore.selectedCompanyCurrency
|
return companyStore.selectedCompanyCurrency
|
||||||
})
|
})
|
||||||
@ -71,14 +60,6 @@ watchEffect(() => {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
watch(
|
|
||||||
() => globalStore.isDarkModeOn,
|
|
||||||
() => {
|
|
||||||
myLineChart.reset()
|
|
||||||
updateColors()
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
let context = graph.value.getContext('2d')
|
let context = graph.value.getContext('2d')
|
||||||
let options = reactive({
|
let options = reactive({
|
||||||
@ -100,8 +81,6 @@ onMounted(() => {
|
|||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
const salesColor = globalStore.isDarkModeOn ? '#ffffff' : '#040405'
|
|
||||||
|
|
||||||
let data = reactive({
|
let data = reactive({
|
||||||
labels: props.labels,
|
labels: props.labels,
|
||||||
datasets: [
|
datasets: [
|
||||||
@ -110,16 +89,16 @@ onMounted(() => {
|
|||||||
fill: false,
|
fill: false,
|
||||||
lineTension: 0.3,
|
lineTension: 0.3,
|
||||||
backgroundColor: 'rgba(230, 254, 249)',
|
backgroundColor: 'rgba(230, 254, 249)',
|
||||||
borderColor: salesColor,
|
borderColor: '#040405',
|
||||||
borderCapStyle: 'butt',
|
borderCapStyle: 'butt',
|
||||||
borderDash: [],
|
borderDash: [],
|
||||||
borderDashOffset: 0.0,
|
borderDashOffset: 0.0,
|
||||||
borderJoinStyle: 'miter',
|
borderJoinStyle: 'miter',
|
||||||
pointBorderColor: salesColor,
|
pointBorderColor: '#040405',
|
||||||
pointBackgroundColor: '#fff',
|
pointBackgroundColor: '#fff',
|
||||||
pointBorderWidth: 1,
|
pointBorderWidth: 1,
|
||||||
pointHoverRadius: 5,
|
pointHoverRadius: 5,
|
||||||
pointHoverBackgroundColor: salesColor,
|
pointHoverBackgroundColor: '#040405',
|
||||||
pointHoverBorderColor: 'rgba(220,220,220,1)',
|
pointHoverBorderColor: 'rgba(220,220,220,1)',
|
||||||
pointHoverBorderWidth: 2,
|
pointHoverBorderWidth: 2,
|
||||||
pointRadius: 4,
|
pointRadius: 4,
|
||||||
@ -215,12 +194,4 @@ function update() {
|
|||||||
lazy: true,
|
lazy: true,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateColors() {
|
|
||||||
const newColor = globalStore.isDarkModeOn ? '#ffffff' : '#040405'
|
|
||||||
|
|
||||||
myLineChart.data.datasets[0].borderColor = newColor
|
|
||||||
myLineChart.data.datasets[0].pointBorderColor = newColor
|
|
||||||
myLineChart.data.datasets[0].pointHoverBackgroundColor = newColor
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -50,11 +50,21 @@
|
|||||||
</BaseInputGroup>
|
</BaseInputGroup>
|
||||||
</template>
|
</template>
|
||||||
</ValidateEach>
|
</ValidateEach>
|
||||||
<BaseModalFooter>
|
<div
|
||||||
|
slot="footer"
|
||||||
|
class="
|
||||||
|
z-0
|
||||||
|
flex
|
||||||
|
justify-end
|
||||||
|
mt-4
|
||||||
|
pt-4
|
||||||
|
border-t border-gray-200 border-solid border-modal-bg
|
||||||
|
"
|
||||||
|
>
|
||||||
<BaseButton :loading="isSaving" variant="primary" type="submit">
|
<BaseButton :loading="isSaving" variant="primary" type="submit">
|
||||||
{{ $t('general.save') }}
|
{{ $t('general.save') }}
|
||||||
</BaseButton>
|
</BaseButton>
|
||||||
</BaseModalFooter>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</BaseCard>
|
</BaseCard>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -5,7 +5,7 @@
|
|||||||
>
|
>
|
||||||
<SelectNotePopup :type="type" @select="onSelectNote" />
|
<SelectNotePopup :type="type" @select="onSelectNote" />
|
||||||
</div>
|
</div>
|
||||||
<label class="text-gray-800 font-medium mb-4 text-sm dark:text-gray-300">
|
<label class="text-gray-800 font-medium mb-4 text-sm">
|
||||||
{{ $t('invoices.notes') }}
|
{{ $t('invoices.notes') }}
|
||||||
</label>
|
</label>
|
||||||
<BaseCustomInput
|
<BaseCustomInput
|
||||||
|
|||||||
@ -29,16 +29,7 @@
|
|||||||
|
|
||||||
<label
|
<label
|
||||||
v-else
|
v-else
|
||||||
class="
|
class="flex items-center justify-center m-0 text-lg text-black uppercase "
|
||||||
flex
|
|
||||||
items-center
|
|
||||||
justify-center
|
|
||||||
m-0
|
|
||||||
text-lg
|
|
||||||
text-black
|
|
||||||
dark:text-white
|
|
||||||
uppercase
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<BaseFormatMoney
|
<BaseFormatMoney
|
||||||
:amount="store.getSubTotal"
|
:amount="store.getSubTotal"
|
||||||
@ -68,16 +59,7 @@
|
|||||||
|
|
||||||
<label
|
<label
|
||||||
v-else-if="store[storeProp].tax_per_item === 'YES'"
|
v-else-if="store[storeProp].tax_per_item === 'YES'"
|
||||||
class="
|
class="flex items-center justify-center m-0 text-lg text-black uppercase "
|
||||||
flex
|
|
||||||
items-center
|
|
||||||
justify-center
|
|
||||||
m-0
|
|
||||||
text-lg
|
|
||||||
text-black
|
|
||||||
dark:text-white
|
|
||||||
uppercase
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<BaseFormatMoney :amount="tax.amount" :currency="defaultCurrency" />
|
<BaseFormatMoney :amount="tax.amount" :currency="defaultCurrency" />
|
||||||
</label>
|
</label>
|
||||||
@ -184,15 +166,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="
|
class="flex items-center justify-between w-full pt-2 mt-5 border-t border-gray-200 border-solid "
|
||||||
flex
|
|
||||||
items-center
|
|
||||||
justify-between
|
|
||||||
w-full
|
|
||||||
pt-2
|
|
||||||
mt-5
|
|
||||||
border-t border-gray-200 border-solid
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<BaseContentPlaceholders v-if="isLoading">
|
<BaseContentPlaceholders v-if="isLoading">
|
||||||
<BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
|
<BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
|
||||||
|
|||||||
@ -1,18 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="flex items-center justify-between w-full mt-2 text-sm">
|
<div class="flex items-center justify-between w-full mt-2 text-sm">
|
||||||
<label class="font-semibold leading-5 text-gray-500 uppercase dark:text-gray-300">
|
<label class="font-semibold leading-5 text-gray-500 uppercase">
|
||||||
{{ tax.name }} ({{ tax.percent }} %)
|
{{ tax.name }} ({{ tax.percent }} %)
|
||||||
</label>
|
</label>
|
||||||
<label
|
<label class="flex items-center justify-center text-lg text-black">
|
||||||
class="
|
|
||||||
flex
|
|
||||||
items-center
|
|
||||||
justify-center
|
|
||||||
text-lg
|
|
||||||
text-black
|
|
||||||
dark:text-white
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<BaseFormatMoney :amount="tax.amount" :currency="currency" />
|
<BaseFormatMoney :amount="tax.amount" :currency="currency" />
|
||||||
|
|
||||||
<BaseIcon
|
<BaseIcon
|
||||||
|
|||||||
@ -96,7 +96,6 @@
|
|||||||
leading-tight
|
leading-tight
|
||||||
text-gray-700
|
text-gray-700
|
||||||
cursor-pointer
|
cursor-pointer
|
||||||
dark:text-gray-300
|
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
{{ taxType.name }}
|
{{ taxType.name }}
|
||||||
@ -109,7 +108,6 @@
|
|||||||
font-semibold
|
font-semibold
|
||||||
text-gray-700
|
text-gray-700
|
||||||
cursor-pointer
|
cursor-pointer
|
||||||
dark:text-gray-300
|
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
{{ taxType.percent }} %
|
{{ taxType.percent }} %
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<label class="flex text-gray-800 font-medium text-sm mb-2 dark:text-gray-300">
|
<label class="flex text-gray-800 font-medium text-sm mb-2">
|
||||||
{{ $t('general.select_template') }}
|
{{ $t('general.select_template') }}
|
||||||
<span class="text-sm text-red-500"> *</span>
|
<span class="text-sm text-red-500"> *</span>
|
||||||
</label>
|
</label>
|
||||||
|
|||||||
@ -57,7 +57,9 @@
|
|||||||
</BaseInputGroup>
|
</BaseInputGroup>
|
||||||
</BaseInputGrid>
|
</BaseInputGrid>
|
||||||
</div>
|
</div>
|
||||||
<BaseModalFooter>
|
<div
|
||||||
|
class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
|
||||||
|
>
|
||||||
<BaseButton
|
<BaseButton
|
||||||
class="mr-3"
|
class="mr-3"
|
||||||
variant="primary-outline"
|
variant="primary-outline"
|
||||||
@ -82,7 +84,7 @@
|
|||||||
</template>
|
</template>
|
||||||
{{ $t('general.create') }}
|
{{ $t('general.create') }}
|
||||||
</BaseButton>
|
</BaseButton>
|
||||||
</BaseModalFooter>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</BaseModal>
|
</BaseModal>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -47,7 +47,15 @@
|
|||||||
</BaseInputGrid>
|
</BaseInputGrid>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<BaseModalFooter>
|
<div
|
||||||
|
class="
|
||||||
|
z-0
|
||||||
|
flex
|
||||||
|
justify-end
|
||||||
|
p-4
|
||||||
|
border-t border-gray-200 border-solid border-modal-bg
|
||||||
|
"
|
||||||
|
>
|
||||||
<BaseButton
|
<BaseButton
|
||||||
type="button"
|
type="button"
|
||||||
variant="primary-outline"
|
variant="primary-outline"
|
||||||
@ -72,7 +80,7 @@
|
|||||||
</template>
|
</template>
|
||||||
{{ categoryStore.isEdit ? $t('general.update') : $t('general.save') }}
|
{{ categoryStore.isEdit ? $t('general.update') : $t('general.save') }}
|
||||||
</BaseButton>
|
</BaseButton>
|
||||||
</BaseModalFooter>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</BaseModal>
|
</BaseModal>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -116,7 +116,7 @@
|
|||||||
</BaseInputGrid>
|
</BaseInputGrid>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<BaseModalFooter>
|
<div class="z-0 flex justify-end p-4 bg-gray-50 border-modal-bg">
|
||||||
<BaseButton
|
<BaseButton
|
||||||
class="mr-3 text-sm"
|
class="mr-3 text-sm"
|
||||||
variant="primary-outline"
|
variant="primary-outline"
|
||||||
@ -141,7 +141,7 @@
|
|||||||
</template>
|
</template>
|
||||||
{{ $t('general.save') }}
|
{{ $t('general.save') }}
|
||||||
</BaseButton>
|
</BaseButton>
|
||||||
</BaseModalFooter>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</BaseModal>
|
</BaseModal>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -122,7 +122,7 @@
|
|||||||
<BaseTab :title="$t('customers.portal_access')">
|
<BaseTab :title="$t('customers.portal_access')">
|
||||||
<BaseInputGrid class="col-span-5 lg:col-span-4">
|
<BaseInputGrid class="col-span-5 lg:col-span-4">
|
||||||
<div class="md:col-span-2">
|
<div class="md:col-span-2">
|
||||||
<p class="text-sm text-gray-500 dark:text-gray-300">
|
<p class="text-sm text-gray-500">
|
||||||
{{ $t('customers.portal_access_text') }}
|
{{ $t('customers.portal_access_text') }}
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
@ -425,7 +425,9 @@
|
|||||||
</BaseTabGroup>
|
</BaseTabGroup>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<BaseModalFooter>
|
<div
|
||||||
|
class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
|
||||||
|
>
|
||||||
<BaseButton
|
<BaseButton
|
||||||
class="mr-3 text-sm"
|
class="mr-3 text-sm"
|
||||||
type="button"
|
type="button"
|
||||||
@ -445,7 +447,7 @@
|
|||||||
</template>
|
</template>
|
||||||
{{ $t('general.save') }}
|
{{ $t('general.save') }}
|
||||||
</BaseButton>
|
</BaseButton>
|
||||||
</BaseModalFooter>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</BaseModal>
|
</BaseModal>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -38,7 +38,7 @@
|
|||||||
</BaseInputGroup>
|
</BaseInputGroup>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<BaseModalFooter>
|
<div class="z-0 flex justify-end p-4 bg-gray-50 border-modal-bg">
|
||||||
<BaseButton
|
<BaseButton
|
||||||
class="mr-3 text-sm"
|
class="mr-3 text-sm"
|
||||||
variant="primary-outline"
|
variant="primary-outline"
|
||||||
@ -63,7 +63,7 @@
|
|||||||
</template>
|
</template>
|
||||||
{{ $t('general.delete') }}
|
{{ $t('general.delete') }}
|
||||||
</BaseButton>
|
</BaseButton>
|
||||||
</BaseModalFooter>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</BaseModal>
|
</BaseModal>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -150,7 +150,9 @@
|
|||||||
@Remove="removeUsedSelectedCurrencies"
|
@Remove="removeUsedSelectedCurrencies"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<BaseModalFooter>
|
<div
|
||||||
|
class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
|
||||||
|
>
|
||||||
<BaseButton
|
<BaseButton
|
||||||
class="mr-3"
|
class="mr-3"
|
||||||
variant="primary-outline"
|
variant="primary-outline"
|
||||||
@ -177,7 +179,7 @@
|
|||||||
exchangeRateStore.isEdit ? $t('general.update') : $t('general.save')
|
exchangeRateStore.isEdit ? $t('general.update') : $t('general.save')
|
||||||
}}
|
}}
|
||||||
</BaseButton>
|
</BaseButton>
|
||||||
</BaseModalFooter>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</BaseModal>
|
</BaseModal>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -20,7 +20,15 @@
|
|||||||
@submit="createNewDisk"
|
@submit="createNewDisk"
|
||||||
>
|
>
|
||||||
<template #default="slotProps">
|
<template #default="slotProps">
|
||||||
<BaseModalFooter>
|
<div
|
||||||
|
class="
|
||||||
|
z-0
|
||||||
|
flex
|
||||||
|
justify-end
|
||||||
|
p-4
|
||||||
|
border-t border-solid border-gray-light
|
||||||
|
"
|
||||||
|
>
|
||||||
<BaseButton
|
<BaseButton
|
||||||
class="mr-3 text-sm"
|
class="mr-3 text-sm"
|
||||||
variant="primary-outline"
|
variant="primary-outline"
|
||||||
@ -44,7 +52,7 @@
|
|||||||
|
|
||||||
{{ $t('general.save') }}
|
{{ $t('general.save') }}
|
||||||
</BaseButton>
|
</BaseButton>
|
||||||
</BaseModalFooter>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</component>
|
</component>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -89,7 +89,9 @@
|
|||||||
</BaseInputGroup>
|
</BaseInputGroup>
|
||||||
</BaseInputGrid>
|
</BaseInputGrid>
|
||||||
</div>
|
</div>
|
||||||
<BaseModalFooter>
|
<div
|
||||||
|
class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
|
||||||
|
>
|
||||||
<BaseButton
|
<BaseButton
|
||||||
class="mr-3"
|
class="mr-3"
|
||||||
variant="primary-outline"
|
variant="primary-outline"
|
||||||
@ -109,7 +111,7 @@
|
|||||||
</template>
|
</template>
|
||||||
{{ itemStore.isEdit ? $t('general.update') : $t('general.save') }}
|
{{ itemStore.isEdit ? $t('general.update') : $t('general.save') }}
|
||||||
</BaseButton>
|
</BaseButton>
|
||||||
</BaseModalFooter>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</BaseModal>
|
</BaseModal>
|
||||||
|
|||||||
@ -31,7 +31,15 @@
|
|||||||
</BaseInputGroup>
|
</BaseInputGroup>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<BaseModalFooter>
|
<div
|
||||||
|
class="
|
||||||
|
z-0
|
||||||
|
flex
|
||||||
|
justify-end
|
||||||
|
p-4
|
||||||
|
border-t border-gray-200 border-solid border-modal-bg
|
||||||
|
"
|
||||||
|
>
|
||||||
<BaseButton
|
<BaseButton
|
||||||
type="button"
|
type="button"
|
||||||
variant="primary-outline"
|
variant="primary-outline"
|
||||||
@ -58,7 +66,7 @@
|
|||||||
itemStore.isItemUnitEdit ? $t('general.update') : $t('general.save')
|
itemStore.isItemUnitEdit ? $t('general.update') : $t('general.save')
|
||||||
}}
|
}}
|
||||||
</BaseButton>
|
</BaseButton>
|
||||||
</BaseModalFooter>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</BaseModal>
|
</BaseModal>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -62,7 +62,9 @@
|
|||||||
</BaseInputGroup>
|
</BaseInputGroup>
|
||||||
</BaseInputGrid>
|
</BaseInputGrid>
|
||||||
</div>
|
</div>
|
||||||
<BaseModalFooter>
|
<div
|
||||||
|
class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
|
||||||
|
>
|
||||||
<BaseButton
|
<BaseButton
|
||||||
variant="primary-outline"
|
variant="primary-outline"
|
||||||
type="button"
|
type="button"
|
||||||
@ -82,7 +84,7 @@
|
|||||||
</template>
|
</template>
|
||||||
{{ $t('general.send') }}
|
{{ $t('general.send') }}
|
||||||
</BaseButton>
|
</BaseButton>
|
||||||
</BaseModalFooter>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</BaseModal>
|
</BaseModal>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -63,7 +63,16 @@
|
|||||||
</BaseInputGroup>
|
</BaseInputGroup>
|
||||||
</BaseInputGrid>
|
</BaseInputGrid>
|
||||||
</div>
|
</div>
|
||||||
<BaseModalFooter>
|
<div
|
||||||
|
class="
|
||||||
|
z-0
|
||||||
|
flex
|
||||||
|
justify-end
|
||||||
|
px-4
|
||||||
|
py-4
|
||||||
|
border-t border-solid border-gray-light
|
||||||
|
"
|
||||||
|
>
|
||||||
<BaseButton
|
<BaseButton
|
||||||
class="mr-2"
|
class="mr-2"
|
||||||
variant="primary-outline"
|
variant="primary-outline"
|
||||||
@ -84,7 +93,7 @@
|
|||||||
</template>
|
</template>
|
||||||
{{ noteStore.isEdit ? $t('general.update') : $t('general.save') }}
|
{{ noteStore.isEdit ? $t('general.update') : $t('general.save') }}
|
||||||
</BaseButton>
|
</BaseButton>
|
||||||
</BaseModalFooter>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</BaseModal>
|
</BaseModal>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -29,7 +29,9 @@
|
|||||||
</BaseInputGroup>
|
</BaseInputGroup>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<BaseModalFooter>
|
<div
|
||||||
|
class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
|
||||||
|
>
|
||||||
<BaseButton
|
<BaseButton
|
||||||
variant="primary-outline"
|
variant="primary-outline"
|
||||||
class="mr-3"
|
class="mr-3"
|
||||||
@ -54,7 +56,7 @@
|
|||||||
: $t('general.save')
|
: $t('general.save')
|
||||||
}}
|
}}
|
||||||
</BaseButton>
|
</BaseButton>
|
||||||
</BaseModalFooter>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</BaseModal>
|
</BaseModal>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -72,7 +72,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="border-t border-gray-200 dark:border-gray-600 py-3">
|
<div class="border-t border-gray-200 py-3">
|
||||||
<div
|
<div
|
||||||
class="
|
class="
|
||||||
grid grid-cols-1
|
grid grid-cols-1
|
||||||
@ -89,7 +89,7 @@
|
|||||||
:key="gIndex"
|
:key="gIndex"
|
||||||
class="flex flex-col space-y-1"
|
class="flex flex-col space-y-1"
|
||||||
>
|
>
|
||||||
<p class="text-sm text-gray-500 dark:text-gray-200 border-b dark:border-gray-600 pb-1 mb-2">
|
<p class="text-sm text-gray-500 border-b border-gray-200 pb-1 mb-2">
|
||||||
{{ gIndex }}
|
{{ gIndex }}
|
||||||
</p>
|
</p>
|
||||||
<div
|
<div
|
||||||
@ -116,7 +116,15 @@
|
|||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<BaseModalFooter>
|
<div
|
||||||
|
class="
|
||||||
|
z-0
|
||||||
|
flex
|
||||||
|
justify-end
|
||||||
|
p-4
|
||||||
|
border-t border-solid border--200 border-modal-bg
|
||||||
|
"
|
||||||
|
>
|
||||||
<BaseButton
|
<BaseButton
|
||||||
class="mr-3 text-sm"
|
class="mr-3 text-sm"
|
||||||
variant="primary-outline"
|
variant="primary-outline"
|
||||||
@ -136,7 +144,7 @@
|
|||||||
</template>
|
</template>
|
||||||
{{ !roleStore.isEdit ? $t('general.save') : $t('general.update') }}
|
{{ !roleStore.isEdit ? $t('general.save') : $t('general.update') }}
|
||||||
</BaseButton>
|
</BaseButton>
|
||||||
</BaseModalFooter>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</BaseModal>
|
</BaseModal>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -70,7 +70,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<BaseModalFooter>
|
<div class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid">
|
||||||
<BaseButton class="mr-3" variant="primary-outline" @click="closeModal">
|
<BaseButton class="mr-3" variant="primary-outline" @click="closeModal">
|
||||||
{{ $t('general.cancel') }}
|
{{ $t('general.cancel') }}
|
||||||
</BaseButton>
|
</BaseButton>
|
||||||
@ -80,7 +80,7 @@
|
|||||||
</template>
|
</template>
|
||||||
{{ $t('general.choose') }}
|
{{ $t('general.choose') }}
|
||||||
</BaseButton>
|
</BaseButton>
|
||||||
</BaseModalFooter>
|
</div>
|
||||||
</BaseModal>
|
</BaseModal>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@ -62,7 +62,9 @@
|
|||||||
</BaseInputGroup>
|
</BaseInputGroup>
|
||||||
</BaseInputGrid>
|
</BaseInputGrid>
|
||||||
</div>
|
</div>
|
||||||
<BaseModalFooter>
|
<div
|
||||||
|
class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
|
||||||
|
>
|
||||||
<BaseButton
|
<BaseButton
|
||||||
class="mr-3"
|
class="mr-3"
|
||||||
variant="primary-outline"
|
variant="primary-outline"
|
||||||
@ -83,7 +85,7 @@
|
|||||||
<BaseIcon v-if="!isLoading" name="PhotographIcon" class="h-5 mr-2" />
|
<BaseIcon v-if="!isLoading" name="PhotographIcon" class="h-5 mr-2" />
|
||||||
{{ $t('general.preview') }}
|
{{ $t('general.preview') }}
|
||||||
</BaseButton>
|
</BaseButton>
|
||||||
</BaseModalFooter>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
<div v-else>
|
<div v-else>
|
||||||
<div class="my-6 mx-4 border border-gray-200 relative">
|
<div class="my-6 mx-4 border border-gray-200 relative">
|
||||||
@ -104,7 +106,9 @@
|
|||||||
></iframe>
|
></iframe>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<BaseModalFooter>
|
<div
|
||||||
|
class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
|
||||||
|
>
|
||||||
<BaseButton
|
<BaseButton
|
||||||
class="mr-3"
|
class="mr-3"
|
||||||
variant="primary-outline"
|
variant="primary-outline"
|
||||||
@ -123,7 +127,7 @@
|
|||||||
<BaseIcon v-if="!isLoading" name="PaperAirplaneIcon" class="mr-2" />
|
<BaseIcon v-if="!isLoading" name="PaperAirplaneIcon" class="mr-2" />
|
||||||
{{ $t('general.send') }}
|
{{ $t('general.send') }}
|
||||||
</BaseButton>
|
</BaseButton>
|
||||||
</BaseModalFooter>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</BaseModal>
|
</BaseModal>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -65,7 +65,9 @@
|
|||||||
</BaseInputGroup>
|
</BaseInputGroup>
|
||||||
</BaseInputGrid>
|
</BaseInputGrid>
|
||||||
</div>
|
</div>
|
||||||
<BaseModalFooter>
|
<div
|
||||||
|
class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
|
||||||
|
>
|
||||||
<BaseButton
|
<BaseButton
|
||||||
class="mr-3"
|
class="mr-3"
|
||||||
variant="primary-outline"
|
variant="primary-outline"
|
||||||
@ -91,7 +93,7 @@
|
|||||||
</template>
|
</template>
|
||||||
{{ $t('general.preview') }}
|
{{ $t('general.preview') }}
|
||||||
</BaseButton>
|
</BaseButton>
|
||||||
</BaseModalFooter>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
<div v-else>
|
<div v-else>
|
||||||
<div class="my-6 mx-4 border border-gray-200 relative">
|
<div class="my-6 mx-4 border border-gray-200 relative">
|
||||||
@ -112,7 +114,9 @@
|
|||||||
style="min-height: 500px"
|
style="min-height: 500px"
|
||||||
></iframe>
|
></iframe>
|
||||||
</div>
|
</div>
|
||||||
<BaseModalFooter>
|
<div
|
||||||
|
class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
|
||||||
|
>
|
||||||
<BaseButton
|
<BaseButton
|
||||||
class="mr-3"
|
class="mr-3"
|
||||||
variant="primary-outline"
|
variant="primary-outline"
|
||||||
@ -136,7 +140,7 @@
|
|||||||
/>
|
/>
|
||||||
{{ $t('general.send') }}
|
{{ $t('general.send') }}
|
||||||
</BaseButton>
|
</BaseButton>
|
||||||
</BaseModalFooter>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</BaseModal>
|
</BaseModal>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -65,7 +65,9 @@
|
|||||||
</BaseInputGroup>
|
</BaseInputGroup>
|
||||||
</BaseInputGrid>
|
</BaseInputGrid>
|
||||||
</div>
|
</div>
|
||||||
<BaseModalFooter>
|
<div
|
||||||
|
class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
|
||||||
|
>
|
||||||
<BaseButton
|
<BaseButton
|
||||||
class="mr-3"
|
class="mr-3"
|
||||||
variant="primary-outline"
|
variant="primary-outline"
|
||||||
@ -91,7 +93,7 @@
|
|||||||
</template>
|
</template>
|
||||||
{{ $t('general.preview') }}
|
{{ $t('general.preview') }}
|
||||||
</BaseButton>
|
</BaseButton>
|
||||||
</BaseModalFooter>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
<div v-else>
|
<div v-else>
|
||||||
<div class="my-6 mx-4 border border-gray-200 relative">
|
<div class="my-6 mx-4 border border-gray-200 relative">
|
||||||
@ -112,7 +114,9 @@
|
|||||||
style="min-height: 500px"
|
style="min-height: 500px"
|
||||||
></iframe>
|
></iframe>
|
||||||
</div>
|
</div>
|
||||||
<BaseModalFooter>
|
<div
|
||||||
|
class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
|
||||||
|
>
|
||||||
<BaseButton
|
<BaseButton
|
||||||
class="mr-3"
|
class="mr-3"
|
||||||
variant="primary-outline"
|
variant="primary-outline"
|
||||||
@ -136,7 +140,7 @@
|
|||||||
/>
|
/>
|
||||||
{{ $t('general.send') }}
|
{{ $t('general.send') }}
|
||||||
</BaseButton>
|
</BaseButton>
|
||||||
</BaseModalFooter>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</BaseModal>
|
</BaseModal>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -90,7 +90,15 @@
|
|||||||
</BaseInputGroup>
|
</BaseInputGroup>
|
||||||
</BaseInputGrid>
|
</BaseInputGrid>
|
||||||
</div>
|
</div>
|
||||||
<BaseModalFooter>
|
<div
|
||||||
|
class="
|
||||||
|
z-0
|
||||||
|
flex
|
||||||
|
justify-end
|
||||||
|
p-4
|
||||||
|
border-t border-solid border--200 border-modal-bg
|
||||||
|
"
|
||||||
|
>
|
||||||
<BaseButton
|
<BaseButton
|
||||||
class="mr-3 text-sm"
|
class="mr-3 text-sm"
|
||||||
variant="primary-outline"
|
variant="primary-outline"
|
||||||
@ -114,7 +122,7 @@
|
|||||||
</template>
|
</template>
|
||||||
{{ taxTypeStore.isEdit ? $t('general.update') : $t('general.save') }}
|
{{ taxTypeStore.isEdit ? $t('general.update') : $t('general.save') }}
|
||||||
</BaseButton>
|
</BaseButton>
|
||||||
</BaseModalFooter>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</BaseModal>
|
</BaseModal>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -87,7 +87,9 @@
|
|||||||
</BaseInputGrid>
|
</BaseInputGrid>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<BaseModalFooter>
|
<div
|
||||||
|
class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
|
||||||
|
>
|
||||||
<BaseButton
|
<BaseButton
|
||||||
class="mr-3 text-sm"
|
class="mr-3 text-sm"
|
||||||
type="button"
|
type="button"
|
||||||
@ -107,7 +109,7 @@
|
|||||||
</template>
|
</template>
|
||||||
{{ $t('general.save') }}
|
{{ $t('general.save') }}
|
||||||
</BaseButton>
|
</BaseButton>
|
||||||
</BaseModalFooter>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</BaseModal>
|
</BaseModal>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -172,7 +172,15 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<BaseModalFooter>
|
<div
|
||||||
|
class="
|
||||||
|
z-0
|
||||||
|
flex
|
||||||
|
justify-end
|
||||||
|
p-4
|
||||||
|
border-t border-solid border-gray-light border-modal-bg
|
||||||
|
"
|
||||||
|
>
|
||||||
<BaseButton
|
<BaseButton
|
||||||
class="mr-3"
|
class="mr-3"
|
||||||
type="button"
|
type="button"
|
||||||
@ -199,7 +207,7 @@
|
|||||||
!customFieldStore.isEdit ? $t('general.save') : $t('general.update')
|
!customFieldStore.isEdit ? $t('general.save') : $t('general.update')
|
||||||
}}
|
}}
|
||||||
</BaseButton>
|
</BaseButton>
|
||||||
</BaseModalFooter>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</BaseModal>
|
</BaseModal>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -153,7 +153,7 @@
|
|||||||
<BaseSwitch v-model="set_as_default" class="flex" />
|
<BaseSwitch v-model="set_as_default" class="flex" />
|
||||||
</div>
|
</div>
|
||||||
<div class="ml-4 right">
|
<div class="ml-4 right">
|
||||||
<p class="p-0 mb-1 text-base leading-snug text-black dark:text-white box-title">
|
<p class="p-0 mb-1 text-base leading-snug text-black box-title">
|
||||||
{{ $t('settings.disk.is_default') }}
|
{{ $t('settings.disk.is_default') }}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -132,7 +132,7 @@
|
|||||||
<BaseSwitch v-model="set_as_default" class="flex" />
|
<BaseSwitch v-model="set_as_default" class="flex" />
|
||||||
</div>
|
</div>
|
||||||
<div class="ml-4 right">
|
<div class="ml-4 right">
|
||||||
<p class="p-0 mb-1 text-base leading-snug text-black dark:text-white box-title">
|
<p class="p-0 mb-1 text-base leading-snug text-black box-title">
|
||||||
{{ $t('settings.disk.is_default') }}
|
{{ $t('settings.disk.is_default') }}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -63,7 +63,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ml-4 right">
|
<div class="ml-4 right">
|
||||||
<p class="p-0 mb-1 text-base leading-snug text-black dark:text-white box-title">
|
<p class="p-0 mb-1 text-base leading-snug text-black box-title">
|
||||||
{{ $t('settings.disk.is_default') }}
|
{{ $t('settings.disk.is_default') }}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -134,7 +134,7 @@
|
|||||||
<BaseSwitch v-model="set_as_default" class="flex" />
|
<BaseSwitch v-model="set_as_default" class="flex" />
|
||||||
</div>
|
</div>
|
||||||
<div class="ml-4 right">
|
<div class="ml-4 right">
|
||||||
<p class="p-0 mb-1 text-base leading-snug text-black dark:text-white box-title">
|
<p class="p-0 mb-1 text-base leading-snug text-black box-title">
|
||||||
{{ $t('settings.disk.is_default') }}
|
{{ $t('settings.disk.is_default') }}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -171,7 +171,7 @@
|
|||||||
|
|
||||||
<BaseInputGrid class="col-span-5 lg:col-span-4">
|
<BaseInputGrid class="col-span-5 lg:col-span-4">
|
||||||
<div class="md:col-span-2">
|
<div class="md:col-span-2">
|
||||||
<p class="text-sm text-gray-500 dark:text-gray-300">
|
<p class="text-sm text-gray-500">
|
||||||
{{ $t('customers.portal_access_text') }}
|
{{ $t('customers.portal_access_text') }}
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="pt-6 mt-5 border-t border-solid lg:pt-8 md:pt-4 border-gray-200 dark:border-gray-600">
|
<div class="pt-6 mt-5 border-t border-solid lg:pt-8 md:pt-4 border-gray-200">
|
||||||
<!-- Basic Info -->
|
<!-- Basic Info -->
|
||||||
<BaseHeading>
|
<BaseHeading>
|
||||||
{{ $t('customers.basic_info') }}
|
{{ $t('customers.basic_info') }}
|
||||||
|
|||||||
@ -2,23 +2,8 @@
|
|||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
v-if="dashboardStore.isDashboardDataLoaded"
|
v-if="dashboardStore.isDashboardDataLoaded"
|
||||||
class="
|
class="grid grid-cols-10 mt-8 bg-white rounded shadow"
|
||||||
grid
|
|
||||||
grid-cols-10
|
|
||||||
mt-8
|
|
||||||
bg-white
|
|
||||||
rounded shadow
|
|
||||||
dark:text-white
|
|
||||||
dark:backdrop-blur-xl
|
|
||||||
dark:shadow-glass
|
|
||||||
dark:border
|
|
||||||
dark:bg-opacity-70
|
|
||||||
dark:border-white/10
|
|
||||||
dark:bg-gray-800
|
|
||||||
relative
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<BaseDarkHighlight />
|
|
||||||
<!-- Chart -->
|
<!-- Chart -->
|
||||||
<div
|
<div
|
||||||
class="
|
class="
|
||||||
@ -69,7 +54,6 @@
|
|||||||
lg:border-t-0 lg:text-right lg:col-span-3
|
lg:border-t-0 lg:text-right lg:col-span-3
|
||||||
xl:col-span-2
|
xl:col-span-2
|
||||||
lg:grid-cols-1
|
lg:grid-cols-1
|
||||||
dark:border-white/10
|
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<div class="p-6">
|
<div class="p-6">
|
||||||
@ -112,7 +96,15 @@
|
|||||||
</span>
|
</span>
|
||||||
<br />
|
<br />
|
||||||
<span
|
<span
|
||||||
class="block mt-1 text-xl font-semibold leading-8 lg:text-2xl text-red-400"
|
class="
|
||||||
|
block
|
||||||
|
mt-1
|
||||||
|
text-xl
|
||||||
|
font-semibold
|
||||||
|
leading-8
|
||||||
|
lg:text-2xl
|
||||||
|
text-red-400
|
||||||
|
"
|
||||||
>
|
>
|
||||||
<BaseFormatMoney
|
<BaseFormatMoney
|
||||||
:amount="dashboardStore.totalExpenses"
|
:amount="dashboardStore.totalExpenses"
|
||||||
@ -124,10 +116,8 @@
|
|||||||
class="
|
class="
|
||||||
col-span-3
|
col-span-3
|
||||||
p-6
|
p-6
|
||||||
border-t
|
border-t border-gray-200 border-solid
|
||||||
border-gray-200 border-solid
|
|
||||||
lg:col-span-1
|
lg:col-span-1
|
||||||
dark:border-white/10
|
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<span class="text-xs leading-5 lg:text-sm">
|
<span class="text-xs leading-5 lg:text-sm">
|
||||||
@ -142,7 +132,7 @@
|
|||||||
font-semibold
|
font-semibold
|
||||||
leading-8
|
leading-8
|
||||||
lg:text-2xl
|
lg:text-2xl
|
||||||
text-primary-500 dark:text-primary-400
|
text-primary-500
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<BaseFormatMoney
|
<BaseFormatMoney
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<BaseContentPlaceholders
|
<BaseContentPlaceholders
|
||||||
class="grid grid-cols-10 mt-8 bg-white rounded shadow dark:bg-gray-800"
|
class="grid grid-cols-10 mt-8 bg-white rounded shadow"
|
||||||
>
|
>
|
||||||
<!-- Chart -->
|
<!-- Chart -->
|
||||||
<div
|
<div
|
||||||
@ -29,7 +29,6 @@
|
|||||||
text-center
|
text-center
|
||||||
border-t border-l border-gray-200 border-solid
|
border-t border-l border-gray-200 border-solid
|
||||||
lg:border-t-0 lg:text-right lg:col-span-3
|
lg:border-t-0 lg:text-right lg:col-span-3
|
||||||
dark:border-gray-600
|
|
||||||
xl:col-span-2
|
xl:col-span-2
|
||||||
lg:grid-cols-1
|
lg:grid-cols-1
|
||||||
"
|
"
|
||||||
@ -78,7 +77,6 @@
|
|||||||
col-span-3
|
col-span-3
|
||||||
p-6
|
p-6
|
||||||
border-t border-gray-200 border-solid
|
border-t border-gray-200 border-solid
|
||||||
dark:border-gray-600
|
|
||||||
lg:justify-end lg:items-end lg:col-span-1
|
lg:justify-end lg:items-end lg:col-span-1
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
|
|||||||
@ -12,24 +12,18 @@
|
|||||||
hover:bg-gray-50
|
hover:bg-gray-50
|
||||||
xl:p-4
|
xl:p-4
|
||||||
lg:col-span-2
|
lg:col-span-2
|
||||||
dark:backdrop-blur-xl
|
|
||||||
dark:shadow-glass
|
|
||||||
dark:border
|
|
||||||
dark:border-white/10
|
|
||||||
dark:bg-gray-800/70
|
|
||||||
"
|
"
|
||||||
:class="{ 'lg:!col-span-3': large }"
|
:class="{ 'lg:!col-span-3': large }"
|
||||||
:to="route"
|
:to="route"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<span class="text-xl font-semibold leading-tight text-black xl:text-3xl dark:text-white">
|
<span class="text-xl font-semibold leading-tight text-black xl:text-3xl">
|
||||||
<slot />
|
<slot />
|
||||||
</span>
|
</span>
|
||||||
<span class="block mt-1 text-sm leading-tight text-gray-500 xl:text-lg dark:text-gray-300">
|
<span class="block mt-1 text-sm leading-tight text-gray-500 xl:text-lg">
|
||||||
{{ label }}
|
{{ label }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<BaseDarkHighlight class="!bg-highlight/[.17] !top-5" />
|
|
||||||
<div class="flex items-center">
|
<div class="flex items-center">
|
||||||
<component :is="iconComponent" class="w-10 h-10 xl:w-12 xl:h-12" />
|
<component :is="iconComponent" class="w-10 h-10 xl:w-12 xl:h-12" />
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<BaseContentPlaceholders
|
<BaseContentPlaceholders
|
||||||
:rounded="true"
|
:rounded="true"
|
||||||
class="relative flex justify-between w-full p-3 bg-white rounded shadow lg:col-span-3 xl:p-4 dark:bg-gray-800"
|
class="relative flex justify-between w-full p-3 bg-white rounded shadow lg:col-span-3 xl:p-4"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<BaseContentPlaceholdersText
|
<BaseContentPlaceholdersText
|
||||||
|
|||||||
@ -12,7 +12,6 @@
|
|||||||
shadow
|
shadow
|
||||||
lg:col-span-2
|
lg:col-span-2
|
||||||
xl:p-4
|
xl:p-4
|
||||||
dark:bg-gray-800
|
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
|
|||||||
@ -130,7 +130,6 @@
|
|||||||
mt-5
|
mt-5
|
||||||
list-none
|
list-none
|
||||||
border-b-2 border-gray-200 border-solid
|
border-b-2 border-gray-200 border-solid
|
||||||
dark:border-gray-600
|
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<!-- Tabs -->
|
<!-- Tabs -->
|
||||||
|
|||||||
@ -127,7 +127,6 @@
|
|||||||
mt-5
|
mt-5
|
||||||
list-none
|
list-none
|
||||||
border-b-2 border-gray-200 border-solid
|
border-b-2 border-gray-200 border-solid
|
||||||
dark:border-gray-600
|
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<!-- Tabs -->
|
<!-- Tabs -->
|
||||||
|
|||||||
@ -53,7 +53,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-else class="mt-24">
|
<div v-else class="mt-24">
|
||||||
<label class="flex items-center justify-center text-gray-500 dark:text-gray-300">
|
<label class="flex items-center justify-center text-gray-500">
|
||||||
{{ $t('modules.no_modules_installed') }}
|
{{ $t('modules.no_modules_installed') }}
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
@ -61,10 +61,10 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<BaseCard v-else class="mt-6">
|
<BaseCard v-else class="mt-6">
|
||||||
<h6 class="text-gray-900 text-lg font-medium dark:text-white">
|
<h6 class="text-gray-900 text-lg font-medium">
|
||||||
{{ $t('modules.connect_installation') }}
|
{{ $t('modules.connect_installation') }}
|
||||||
</h6>
|
</h6>
|
||||||
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
|
<p class="mt-1 text-sm text-gray-500">
|
||||||
{{
|
{{
|
||||||
$t('modules.api_token_description', {
|
$t('modules.api_token_description', {
|
||||||
url: globalStore.config.base_url.replace(/^http:\/\//, ''),
|
url: globalStore.config.base_url.replace(/^http:\/\//, ''),
|
||||||
|
|||||||
@ -215,7 +215,7 @@
|
|||||||
<SelectNotePopup type="Payment" @select="onSelectNote" />
|
<SelectNotePopup type="Payment" @select="onSelectNote" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<label class="mb-4 text-sm font-medium text-gray-800 dark:text-gray-300">
|
<label class="mb-4 text-sm font-medium text-gray-800">
|
||||||
{{ $t('estimates.notes') }}
|
{{ $t('estimates.notes') }}
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
|
|||||||
@ -121,7 +121,6 @@
|
|||||||
mt-5
|
mt-5
|
||||||
list-none
|
list-none
|
||||||
border-b-2 border-gray-200 border-solid
|
border-b-2 border-gray-200 border-solid
|
||||||
dark:border-gray-600
|
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<!-- Tabs -->
|
<!-- Tabs -->
|
||||||
|
|||||||
@ -16,11 +16,11 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ml-2">
|
<div class="ml-2">
|
||||||
<p class="p-0 mb-1 leading-snug text-left text-black dark:text-white">
|
<p class="p-0 mb-1 leading-snug text-left text-black">
|
||||||
{{ $t('recurring_invoices.send_automatically') }}
|
{{ $t('recurring_invoices.send_automatically') }}
|
||||||
</p>
|
</p>
|
||||||
<p
|
<p
|
||||||
class="p-0 m-0 text-xs leading-tight text-left text-gray-500 dark:text-gray-400"
|
class="p-0 m-0 text-xs leading-tight text-left text-gray-500"
|
||||||
style="max-width: 480px"
|
style="max-width: 480px"
|
||||||
>
|
>
|
||||||
{{ $t('recurring_invoices.send_automatically_desc') }}
|
{{ $t('recurring_invoices.send_automatically_desc') }}
|
||||||
|
|||||||
@ -113,10 +113,10 @@
|
|||||||
|
|
||||||
<div v-if="companyStore.companies.length !== 1" class="py-5">
|
<div v-if="companyStore.companies.length !== 1" class="py-5">
|
||||||
<BaseDivider class="my-4" />
|
<BaseDivider class="my-4" />
|
||||||
<h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">
|
<h3 class="text-lg leading-6 font-medium text-gray-900">
|
||||||
{{ $tc('settings.company_info.delete_company') }}
|
{{ $tc('settings.company_info.delete_company') }}
|
||||||
</h3>
|
</h3>
|
||||||
<div class="mt-2 max-w-xl text-sm text-gray-500 dark:text-gray-400">
|
<div class="mt-2 max-w-xl text-sm text-gray-500">
|
||||||
<p>
|
<p>
|
||||||
{{ $tc('settings.company_info.delete_company_description') }}
|
{{ $tc('settings.company_info.delete_company_description') }}
|
||||||
</p>
|
</p>
|
||||||
|
|||||||
@ -27,7 +27,7 @@
|
|||||||
>
|
>
|
||||||
<template #cell-name="{ row }">
|
<template #cell-name="{ row }">
|
||||||
{{ row.data.name }}
|
{{ row.data.name }}
|
||||||
<span class="text-xs text-gray-500 dark:text-gray-400"> ({{ row.data.slug }})</span>
|
<span class="text-xs text-gray-500"> ({{ row.data.slug }})</span>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #cell-is_required="{ row }">
|
<template #cell-is_required="{ row }">
|
||||||
@ -60,7 +60,7 @@
|
|||||||
<CustomFieldDropdown
|
<CustomFieldDropdown
|
||||||
:row="row.data"
|
:row="row.data"
|
||||||
:table="table"
|
:table="table"
|
||||||
:load-data="refreshTable"
|
:load-data="refreshTable"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
</BaseTable>
|
</BaseTable>
|
||||||
|
|||||||
@ -7,7 +7,7 @@
|
|||||||
{{ $t('settings.menu_title.exchange_rate') }}
|
{{ $t('settings.menu_title.exchange_rate') }}
|
||||||
</h6>
|
</h6>
|
||||||
<p
|
<p
|
||||||
class="mt-2 text-sm leading-snug text-left text-gray-500 dark:text-gray-400"
|
class="mt-2 text-sm leading-snug text-left text-gray-500"
|
||||||
style="max-width: 680px"
|
style="max-width: 680px"
|
||||||
>
|
>
|
||||||
{{ $t('settings.exchange_rate.providers_description') }}
|
{{ $t('settings.exchange_rate.providers_description') }}
|
||||||
|
|||||||
@ -4,14 +4,23 @@
|
|||||||
:description="$t('settings.update_app.description')"
|
:description="$t('settings.update_app.description')"
|
||||||
>
|
>
|
||||||
<div class="pb-8 ml-0">
|
<div class="pb-8 ml-0">
|
||||||
<label
|
<label class="text-sm not-italic font-medium input-label">
|
||||||
class="text-sm not-italic font-medium input-label dark:text-gray-300"
|
|
||||||
>
|
|
||||||
{{ $t('settings.update_app.current_version') }}
|
{{ $t('settings.update_app.current_version') }}
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="box-border flex w-16 p-3 my-2 text-sm text-gray-600 bg-gray-200 border border-gray-200 border-solid dark:bg-gray-600 dark:text-gray-200 dark:border-gray-500 rounded-md version"
|
class="
|
||||||
|
box-border
|
||||||
|
flex
|
||||||
|
w-16
|
||||||
|
p-3
|
||||||
|
my-2
|
||||||
|
text-sm text-gray-600
|
||||||
|
bg-gray-200
|
||||||
|
border border-gray-200 border-solid
|
||||||
|
rounded-md
|
||||||
|
version
|
||||||
|
"
|
||||||
>
|
>
|
||||||
{{ currentVersion }}
|
{{ currentVersion }}
|
||||||
</div>
|
</div>
|
||||||
@ -33,20 +42,20 @@
|
|||||||
{{ $t('settings.update_app.avail_update') }}
|
{{ $t('settings.update_app.avail_update') }}
|
||||||
</BaseHeading>
|
</BaseHeading>
|
||||||
|
|
||||||
<div class="rounded-md bg-primary-50 p-4 mb-3 dark:bg-gray-600">
|
<div class="rounded-md bg-primary-50 p-4 mb-3">
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
<div class="shrink-0">
|
<div class="shrink-0">
|
||||||
<BaseIcon
|
<BaseIcon
|
||||||
name="InformationCircleIcon"
|
name="InformationCircleIcon"
|
||||||
class="h-5 w-5 text-primary-400 dark:text-primary-300"
|
class="h-5 w-5 text-primary-400"
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="ml-3">
|
<div class="ml-3">
|
||||||
<h3 class="text-sm font-medium text-primary-800 dark:text-primary-300">
|
<h3 class="text-sm font-medium text-primary-800">
|
||||||
{{ $t('general.note') }}
|
{{ $t('general.note') }}
|
||||||
</h3>
|
</h3>
|
||||||
<div class="mt-2 text-sm text-primary-700 dark:text-primary-400">
|
<div class="mt-2 text-sm text-primary-700">
|
||||||
<p>
|
<p>
|
||||||
{{ $t('settings.update_app.update_warning') }}
|
{{ $t('settings.update_app.update_warning') }}
|
||||||
</p>
|
</p>
|
||||||
@ -66,20 +75,26 @@
|
|||||||
w-16
|
w-16
|
||||||
p-3
|
p-3
|
||||||
my-2
|
my-2
|
||||||
text-sm
|
text-sm text-gray-600
|
||||||
text-gray-600 bg-gray-200
|
bg-gray-200
|
||||||
border border-gray-200 border-solid
|
border border-gray-200 border-solid
|
||||||
rounded-md
|
rounded-md
|
||||||
version
|
version
|
||||||
dark:bg-gray-600 dark:text-gray-200
|
|
||||||
dark:border-gray-500
|
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
{{ updateData.version }}
|
{{ updateData.version }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="pl-5 mt-4 mb-8 text-sm leading-snug text-gray-500 update-description"
|
class="
|
||||||
|
pl-5
|
||||||
|
mt-4
|
||||||
|
mb-8
|
||||||
|
text-sm
|
||||||
|
leading-snug
|
||||||
|
text-gray-500
|
||||||
|
update-description
|
||||||
|
"
|
||||||
style="white-space: pre-wrap; max-width: 480px"
|
style="white-space: pre-wrap; max-width: 480px"
|
||||||
v-html="description"
|
v-html="description"
|
||||||
></div>
|
></div>
|
||||||
@ -135,7 +150,14 @@
|
|||||||
<li
|
<li
|
||||||
v-for="step in updateSteps"
|
v-for="step in updateSteps"
|
||||||
:key="step.stepUrl"
|
:key="step.stepUrl"
|
||||||
class="flex justify-between w-full py-3 border-b border-gray-200 border-solid last:border-b-0"
|
class="
|
||||||
|
flex
|
||||||
|
justify-between
|
||||||
|
w-full
|
||||||
|
py-3
|
||||||
|
border-b border-gray-200 border-solid
|
||||||
|
last:border-b-0
|
||||||
|
"
|
||||||
>
|
>
|
||||||
<p class="m-0 text-sm leading-8">{{ $t(step.translationKey) }}</p>
|
<p class="m-0 text-sm leading-8">{{ $t(step.translationKey) }}</p>
|
||||||
<div class="flex flex-row items-center">
|
<div class="flex flex-row items-center">
|
||||||
|
|||||||
@ -1,12 +1,12 @@
|
|||||||
<template>
|
<template>
|
||||||
<BaseHeading
|
<h6 class="text-gray-900 text-lg font-medium">
|
||||||
type="heading-title"
|
|
||||||
:subtitle="
|
|
||||||
$t(`settings.customization.${type}s.${type}_number_format_description`)
|
|
||||||
"
|
|
||||||
>
|
|
||||||
{{ $t(`settings.customization.${type}s.${type}_number_format`) }}
|
{{ $t(`settings.customization.${type}s.${type}_number_format`) }}
|
||||||
</BaseHeading>
|
</h6>
|
||||||
|
<p class="mt-1 text-sm text-gray-500">
|
||||||
|
{{
|
||||||
|
$t(`settings.customization.${type}s.${type}_number_format_description`)
|
||||||
|
}}
|
||||||
|
</p>
|
||||||
|
|
||||||
<div class="overflow-x-auto">
|
<div class="overflow-x-auto">
|
||||||
<table class="w-full mt-6 table-fixed">
|
<table class="w-full mt-6 table-fixed">
|
||||||
@ -29,7 +29,6 @@
|
|||||||
leading-5
|
leading-5
|
||||||
text-left text-gray-700
|
text-left text-gray-700
|
||||||
border-t border-b border-gray-200 border-solid
|
border-t border-b border-gray-200 border-solid
|
||||||
dark:border-gray-600
|
|
||||||
"
|
"
|
||||||
></th>
|
></th>
|
||||||
<th
|
<th
|
||||||
@ -42,7 +41,6 @@
|
|||||||
leading-5
|
leading-5
|
||||||
text-left text-gray-700
|
text-left text-gray-700
|
||||||
border-t border-b border-gray-200 border-solid
|
border-t border-b border-gray-200 border-solid
|
||||||
dark:text-gray-300 dark:border-gray-600
|
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
Component
|
Component
|
||||||
@ -57,7 +55,6 @@
|
|||||||
leading-5
|
leading-5
|
||||||
text-left text-gray-700
|
text-left text-gray-700
|
||||||
border-t border-b border-gray-200 border-solid
|
border-t border-b border-gray-200 border-solid
|
||||||
dark:text-gray-300 dark:border-gray-600
|
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
Parameter
|
Parameter
|
||||||
@ -72,14 +69,13 @@
|
|||||||
leading-5
|
leading-5
|
||||||
text-left text-gray-700
|
text-left text-gray-700
|
||||||
border-t border-b border-gray-200 border-solid
|
border-t border-b border-gray-200 border-solid
|
||||||
dark:border-gray-600
|
|
||||||
"
|
"
|
||||||
></th>
|
></th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<draggable
|
<draggable
|
||||||
v-model="selectedFields"
|
v-model="selectedFields"
|
||||||
class="divide-y divide-gray-200 dark:divide-gray-600"
|
class="divide-y divide-gray-200"
|
||||||
item-key="id"
|
item-key="id"
|
||||||
tag="tbody"
|
tag="tbody"
|
||||||
handle=".handle"
|
handle=".handle"
|
||||||
@ -101,13 +97,12 @@
|
|||||||
whitespace-nowrap
|
whitespace-nowrap
|
||||||
mr-2
|
mr-2
|
||||||
min-w-[200px]
|
min-w-[200px]
|
||||||
dark:text-primary-400
|
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
{{ element.label }}
|
{{ element.label }}
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
<p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
|
<p class="text-xs text-gray-500 mt-1">
|
||||||
{{ element.description }}
|
{{ element.description }}
|
||||||
</p>
|
</p>
|
||||||
</td>
|
</td>
|
||||||
|
|||||||
@ -1,12 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
<BaseHeading
|
<h6 class="text-gray-900 text-lg font-medium">
|
||||||
type="heading-title"
|
|
||||||
:subtitle="
|
|
||||||
$t('settings.customization.estimates.convert_estimate_description')
|
|
||||||
"
|
|
||||||
>
|
|
||||||
{{ $tc('settings.customization.estimates.convert_estimate_options') }}
|
{{ $tc('settings.customization.estimates.convert_estimate_options') }}
|
||||||
</BaseHeading>
|
</h6>
|
||||||
|
<p class="mt-1 text-sm text-gray-500">
|
||||||
|
{{ $t('settings.customization.estimates.convert_estimate_description') }}
|
||||||
|
</p>
|
||||||
|
|
||||||
<BaseInputGroup required>
|
<BaseInputGroup required>
|
||||||
<BaseRadio
|
<BaseRadio
|
||||||
|
|||||||
@ -1,13 +1,11 @@
|
|||||||
<template>
|
<template>
|
||||||
<form @submit.prevent="submitForm">
|
<form @submit.prevent="submitForm">
|
||||||
<BaseHeading
|
<h6 class="text-gray-900 text-lg font-medium">
|
||||||
type="heading-title"
|
|
||||||
:subtitle="
|
|
||||||
$t('settings.customization.estimates.default_formats_description')
|
|
||||||
"
|
|
||||||
>
|
|
||||||
{{ $t('settings.customization.estimates.default_formats') }}
|
{{ $t('settings.customization.estimates.default_formats') }}
|
||||||
</BaseHeading>
|
</h6>
|
||||||
|
<p class="mt-1 text-sm text-gray-500 mb-2">
|
||||||
|
{{ $t('settings.customization.estimates.default_formats_description') }}
|
||||||
|
</p>
|
||||||
|
|
||||||
<BaseInputGroup
|
<BaseInputGroup
|
||||||
:label="
|
:label="
|
||||||
|
|||||||
@ -1,13 +1,11 @@
|
|||||||
<template>
|
<template>
|
||||||
<form @submit.prevent="submitForm">
|
<form @submit.prevent="submitForm">
|
||||||
<BaseHeading
|
<h6 class="text-gray-900 text-lg font-medium">
|
||||||
type="heading-title"
|
|
||||||
:subtitle="
|
|
||||||
$t('settings.customization.estimates.expiry_date_description')
|
|
||||||
"
|
|
||||||
>
|
|
||||||
{{ $t('settings.customization.estimates.expiry_date') }}
|
{{ $t('settings.customization.estimates.expiry_date') }}
|
||||||
</BaseHeading>
|
</h6>
|
||||||
|
<p class="mt-1 text-sm text-gray-500 mb-2">
|
||||||
|
{{ $t('settings.customization.estimates.expiry_date_description') }}
|
||||||
|
</p>
|
||||||
|
|
||||||
<BaseSwitchSection
|
<BaseSwitchSection
|
||||||
v-model="expiryDateAutoField"
|
v-model="expiryDateAutoField"
|
||||||
|
|||||||
@ -1,13 +1,11 @@
|
|||||||
<template>
|
<template>
|
||||||
<form @submit.prevent="submitForm">
|
<form @submit.prevent="submitForm">
|
||||||
<BaseHeading
|
<h6 class="text-gray-900 text-lg font-medium">
|
||||||
type="heading-title"
|
|
||||||
:subtitle="
|
|
||||||
$t('settings.customization.invoices.default_formats_description')
|
|
||||||
"
|
|
||||||
>
|
|
||||||
{{ $t('settings.customization.invoices.default_formats') }}
|
{{ $t('settings.customization.invoices.default_formats') }}
|
||||||
</BaseHeading>
|
</h6>
|
||||||
|
<p class="mt-1 text-sm text-gray-500 mb-2">
|
||||||
|
{{ $t('settings.customization.invoices.default_formats_description') }}
|
||||||
|
</p>
|
||||||
|
|
||||||
<BaseInputGroup
|
<BaseInputGroup
|
||||||
:label="$t('settings.customization.invoices.default_invoice_email_body')"
|
:label="$t('settings.customization.invoices.default_invoice_email_body')"
|
||||||
|
|||||||
@ -1,13 +1,11 @@
|
|||||||
<template>
|
<template>
|
||||||
<form @submit.prevent="submitForm">
|
<form @submit.prevent="submitForm">
|
||||||
<BaseHeading
|
<h6 class="text-gray-900 text-lg font-medium">
|
||||||
type="heading-title"
|
{{ $t('settings.customization.invoices.due_date') }}
|
||||||
:subtitle="
|
</h6>
|
||||||
$t('settings.customization.invoices.due_date_description')
|
<p class="mt-1 text-sm text-gray-500 mb-2">
|
||||||
"
|
{{ $t('settings.customization.invoices.due_date_description') }}
|
||||||
>
|
</p>
|
||||||
{{ $t('settings.customization.invoices.due_date') }}
|
|
||||||
</BaseHeading>
|
|
||||||
|
|
||||||
<BaseSwitchSection
|
<BaseSwitchSection
|
||||||
v-model="dueDateAutoField"
|
v-model="dueDateAutoField"
|
||||||
|
|||||||
@ -1,12 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
<BaseHeading
|
<h6 class="text-gray-900 text-lg font-medium">
|
||||||
type="heading-title"
|
|
||||||
:subtitle="
|
|
||||||
$t('settings.customization.invoices.retrospective_edits_description')
|
|
||||||
"
|
|
||||||
>
|
|
||||||
{{ $tc('settings.customization.invoices.retrospective_edits') }}
|
{{ $tc('settings.customization.invoices.retrospective_edits') }}
|
||||||
</BaseHeading>
|
</h6>
|
||||||
|
<p class="mt-1 text-sm text-gray-500">
|
||||||
|
{{ $t('settings.customization.invoices.retrospective_edits_description') }}
|
||||||
|
</p>
|
||||||
|
|
||||||
<BaseInputGroup required>
|
<BaseInputGroup required>
|
||||||
<BaseRadio
|
<BaseRadio
|
||||||
|
|||||||
@ -1,13 +1,11 @@
|
|||||||
<template>
|
<template>
|
||||||
<form @submit.prevent="submitForm">
|
<form @submit.prevent="submitForm">
|
||||||
<BaseHeading
|
<h6 class="text-gray-900 text-lg font-medium">
|
||||||
type="heading-title"
|
|
||||||
:subtitle="
|
|
||||||
$t('settings.customization.payments.default_formats_description')
|
|
||||||
"
|
|
||||||
>
|
|
||||||
{{ $t('settings.customization.payments.default_formats') }}
|
{{ $t('settings.customization.payments.default_formats') }}
|
||||||
</BaseHeading>
|
</h6>
|
||||||
|
<p class="mt-1 text-sm text-gray-500 mb-2">
|
||||||
|
{{ $t('settings.customization.payments.default_formats_description') }}
|
||||||
|
</p>
|
||||||
|
|
||||||
<BaseInputGroup
|
<BaseInputGroup
|
||||||
:label="$t('settings.customization.payments.default_payment_email_body')"
|
:label="$t('settings.customization.payments.default_payment_email_body')"
|
||||||
|
|||||||
@ -141,7 +141,6 @@
|
|||||||
bg-gray-200
|
bg-gray-200
|
||||||
rounded-full
|
rounded-full
|
||||||
text-primary-500
|
text-primary-500
|
||||||
dark:bg-gray-600
|
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
{{ initGenerator(user.name) }}
|
{{ initGenerator(user.name) }}
|
||||||
|
|||||||
@ -1,40 +1,33 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="bg-white shadow overflow-hidden rounded-lg mt-6 dark:bg-gray-800">
|
<div class="bg-white shadow overflow-hidden rounded-lg mt-6">
|
||||||
<div class="px-4 py-5 sm:px-6">
|
<div class="px-4 py-5 sm:px-6">
|
||||||
<h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">
|
<h3 class="text-lg leading-6 font-medium text-gray-900">
|
||||||
{{ $t('invoices.invoice_information') }}
|
{{ $t('invoices.invoice_information') }}
|
||||||
</h3>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="invoice"
|
<div v-if="invoice" class="border-t border-gray-200 px-4 py-5 sm:p-0">
|
||||||
class="
|
<dl class="sm:divide-y sm:divide-gray-200">
|
||||||
border-t
|
|
||||||
border-gray-200
|
|
||||||
px-4 py-5 sm:p-0
|
|
||||||
dark:border-gray-600
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<dl class="sm:divide-y sm:divide-gray-200 sm:dark:divide-gray-500">
|
|
||||||
<div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
|
<div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
|
||||||
<dt class="text-sm font-medium text-gray-500 dark:dark:text-gray-400">
|
<dt class="text-sm font-medium text-gray-500">
|
||||||
{{ $t('general.from') }}
|
{{ $t('general.from') }}
|
||||||
</dt>
|
</dt>
|
||||||
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 dark:text-gray-100">
|
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
|
||||||
{{ invoice.company.name }}
|
{{ invoice.company.name }}
|
||||||
</dd>
|
</dd>
|
||||||
</div>
|
</div>
|
||||||
<div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
|
<div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
|
||||||
<dt class="text-sm font-medium text-gray-500 dark:dark:text-gray-400">
|
<dt class="text-sm font-medium text-gray-500">
|
||||||
{{ $t('general.to') }}
|
{{ $t('general.to') }}
|
||||||
</dt>
|
</dt>
|
||||||
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 dark:text-gray-100">
|
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
|
||||||
{{ invoice.customer.name }}
|
{{ invoice.customer.name }}
|
||||||
</dd>
|
</dd>
|
||||||
</div>
|
</div>
|
||||||
<div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
|
<div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
|
||||||
<dt class="text-sm font-medium text-gray-500 capitalize dark:dark:text-gray-400">
|
<dt class="text-sm font-medium text-gray-500 capitalize">
|
||||||
{{ $t('invoices.paid_status').toLowerCase() }}
|
{{ $t('invoices.paid_status').toLowerCase() }}
|
||||||
</dt>
|
</dt>
|
||||||
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 dark:text-gray-100">
|
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
|
||||||
<BaseInvoiceStatusBadge
|
<BaseInvoiceStatusBadge
|
||||||
:status="invoice.paid_status"
|
:status="invoice.paid_status"
|
||||||
class="px-3 py-1"
|
class="px-3 py-1"
|
||||||
@ -44,10 +37,10 @@
|
|||||||
</dd>
|
</dd>
|
||||||
</div>
|
</div>
|
||||||
<div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
|
<div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
|
||||||
<dt class="text-sm font-medium text-gray-500 dark:dark:text-gray-400">
|
<dt class="text-sm font-medium text-gray-500">
|
||||||
{{ $t('invoices.total') }}
|
{{ $t('invoices.total') }}
|
||||||
</dt>
|
</dt>
|
||||||
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 dark:text-gray-100">
|
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
|
||||||
<BaseFormatMoney
|
<BaseFormatMoney
|
||||||
:currency="invoice.currency"
|
:currency="invoice.currency"
|
||||||
:amount="invoice.total"
|
:amount="invoice.total"
|
||||||
|
|||||||
@ -437,22 +437,21 @@ export default {
|
|||||||
required: false,
|
required: false,
|
||||||
default: () => ({
|
default: () => ({
|
||||||
container:
|
container:
|
||||||
'p-0 relative mx-auto w-full flex items-center justify-end box-border cursor-pointer border border-gray-200 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 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-none max-h-10',
|
||||||
containerDisabled:
|
containerDisabled:
|
||||||
'bg-gray-200 !text-gray-800 dark:!text-gray-800 !dark:text-gray-500 !cursor-not-allowed dark:opacity-50',
|
'cursor-default bg-gray-200 bg-opacity-50 !text-gray-400',
|
||||||
containerOpen: '',
|
containerOpen: '',
|
||||||
containerOpenTop: '',
|
containerOpenTop: '',
|
||||||
containerActive: 'ring-1 ring-primary-400 border-primary-400',
|
containerActive: 'ring-1 ring-primary-400 border-primary-400',
|
||||||
containerInvalid:
|
containerInvalid:
|
||||||
'border-red-500 ring-red-500 focus:ring-red-500 focus:border-red-500 dark:border-red-500 dark:ring-red-500 dark:focus:ring-red-500 dark:focus:border-red-500',
|
'border-red-400 ring-red-400 focus:ring-red-400 focus:border-red-400',
|
||||||
containerInvalidActive:
|
containerInvalidActive: 'ring-1 border-red-400 ring-red-400',
|
||||||
'ring-1 border-red-500 ring-red-500 dark:ring-1 dark:border-red-500 dark:ring-red-500',
|
|
||||||
singleLabel:
|
singleLabel:
|
||||||
'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 dark:text-white',
|
'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5',
|
||||||
multipleLabel:
|
multipleLabel:
|
||||||
'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 dark:text-white',
|
'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5',
|
||||||
search:
|
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 border-transparent focus:border-transparent focus:ring-0 dark:bg-gray-700 dark:text-white',
|
'w-full absolute inset-0 outline-none 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',
|
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',
|
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',
|
tagDisabled: 'pr-2 !bg-gray-400 text-white',
|
||||||
@ -462,12 +461,12 @@ export default {
|
|||||||
'bg-multiselect-remove text-white bg-center bg-no-repeat opacity-30 inline-block w-3 h-3 group-hover:opacity-60',
|
'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',
|
tagsSearchWrapper: 'inline-block relative mx-1 mb-1 grow shrink h-full',
|
||||||
tagsSearch:
|
tagsSearch:
|
||||||
'absolute inset-0 border-0 focus:outline-none !shadow-none !focus:shadow-none appearance-none p-0 sm:text-sm font-sans box-border w-full dark:bg-gray-700',
|
'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',
|
||||||
tagsSearchCopy: 'invisible whitespace-pre-wrap inline-block h-px',
|
tagsSearchCopy: 'invisible whitespace-pre-wrap inline-block h-px',
|
||||||
placeholder:
|
placeholder:
|
||||||
'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 text-gray-400 sm:text-sm dark:text-gray-500',
|
'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',
|
||||||
caret:
|
caret:
|
||||||
'bg-multiselect-caret-black dark:bg-multiselect-caret-white bg-center bg-no-repeat w-5 h-5 py-px box-content z-5 relative mr-1 opacity-40 shrink-0 grow-0 transition-transform dark:text-white',
|
'bg-multiselect-caret bg-center bg-no-repeat w-5 h-5 py-px box-content z-5 relative mr-1 opacity-40 shrink-0 grow-0 transition-transform',
|
||||||
caretOpen: 'rotate-180 pointer-events-auto',
|
caretOpen: 'rotate-180 pointer-events-auto',
|
||||||
clear:
|
clear:
|
||||||
'pr-3.5 relative z-10 opacity-40 transition duration-300 shrink-0 grow-0 flex hover:opacity-80',
|
'pr-3.5 relative z-10 opacity-40 transition duration-300 shrink-0 grow-0 flex hover:opacity-80',
|
||||||
@ -476,7 +475,7 @@ export default {
|
|||||||
spinner:
|
spinner:
|
||||||
'bg-multiselect-spinner bg-center bg-no-repeat w-4 h-4 z-10 mr-3.5 animate-spin shrink-0 grow-0',
|
'bg-multiselect-spinner bg-center bg-no-repeat w-4 h-4 z-10 mr-3.5 animate-spin shrink-0 grow-0',
|
||||||
dropdown:
|
dropdown:
|
||||||
'max-h-60 shadow-lg absolute -left-px -right-px -bottom-1 translate-y-full border border-gray-300 mt-1 overflow-y-auto z-50 bg-white dark:border-gray-600 flex flex-col rounded-md dark:bg-gray-800 dark:shadow-glass',
|
'max-h-60 shadow-lg absolute -left-px -right-px -bottom-1 translate-y-full border border-gray-300 mt-1 overflow-y-auto z-50 bg-white flex flex-col rounded-md',
|
||||||
dropdownTop:
|
dropdownTop:
|
||||||
'-translate-y-full -top-2 bottom-auto flex-col-reverse rounded-md',
|
'-translate-y-full -top-2 bottom-auto flex-col-reverse rounded-md',
|
||||||
dropdownHidden: 'hidden',
|
dropdownHidden: 'hidden',
|
||||||
@ -484,7 +483,7 @@ export default {
|
|||||||
optionsTop: 'flex-col-reverse',
|
optionsTop: 'flex-col-reverse',
|
||||||
group: 'p-0 m-0',
|
group: 'p-0 m-0',
|
||||||
groupLabel:
|
groupLabel:
|
||||||
'flex text-sm box-border items-center justify-start text-left py-1 px-3 font-semibold bg-gray-200 dark:bg-gray-700 dark:text-gray-400 cursor-default leading-normal',
|
'flex text-sm box-border items-center justify-start text-left py-1 px-3 font-semibold bg-gray-200 cursor-default leading-normal',
|
||||||
groupLabelPointable: 'cursor-pointer',
|
groupLabelPointable: 'cursor-pointer',
|
||||||
groupLabelPointed: 'bg-gray-300 text-gray-700',
|
groupLabelPointed: 'bg-gray-300 text-gray-700',
|
||||||
groupLabelSelected: 'bg-primary-600 text-white',
|
groupLabelSelected: 'bg-primary-600 text-white',
|
||||||
@ -494,18 +493,15 @@ export default {
|
|||||||
'text-primary-100 bg-primary-600 bg-opacity-50 cursor-not-allowed',
|
'text-primary-100 bg-primary-600 bg-opacity-50 cursor-not-allowed',
|
||||||
groupOptions: 'p-0 m-0',
|
groupOptions: 'p-0 m-0',
|
||||||
option:
|
option:
|
||||||
'flex items-center justify-start box-border text-left cursor-pointer text-sm leading-snug py-2 px-3 dark:text-gray-200',
|
'flex items-center justify-start box-border text-left cursor-pointer text-sm leading-snug py-2 px-3',
|
||||||
optionPointed:
|
optionPointed: 'text-gray-800 bg-gray-100',
|
||||||
'text-gray-800 bg-gray-100 dark:text-white dark:bg-gray-700/30',
|
|
||||||
optionSelected: 'text-white bg-primary-500',
|
optionSelected: 'text-white bg-primary-500',
|
||||||
optionDisabled: 'text-gray-300 cursor-not-allowed dark:text-gray-400',
|
optionDisabled: 'text-gray-300 cursor-not-allowed',
|
||||||
optionSelectedPointed: 'text-white bg-primary-500 opacity-90',
|
optionSelectedPointed: 'text-white bg-primary-500 opacity-90',
|
||||||
optionSelectedDisabled:
|
optionSelectedDisabled:
|
||||||
'text-primary-100 bg-primary-500 bg-opacity-50 cursor-not-allowed',
|
'text-primary-100 bg-primary-500 bg-opacity-50 cursor-not-allowed',
|
||||||
noOptions:
|
noOptions: 'py-2 px-3 text-gray-600 bg-white',
|
||||||
'py-2 px-3 text-gray-600 bg-white dark:bg-gray-700 dark:text-gray-200',
|
noResults: 'py-2 px-3 text-gray-600 bg-white',
|
||||||
noResults:
|
|
||||||
'py-2 px-3 text-gray-600 bg-white dark:bg-gray-700 dark:text-gray-200',
|
|
||||||
fakeInput:
|
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-none text-transparent',
|
||||||
spacer: 'h-9 py-px box-content',
|
spacer: 'h-9 py-px box-content',
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<nav>
|
<nav>
|
||||||
<ol class="flex flex-wrap py-4 text-gray-900 rounded list-reset dark:text-gray-400">
|
<ol class="flex flex-wrap py-4 text-gray-900 rounded list-reset">
|
||||||
<slot />
|
<slot />
|
||||||
</ol>
|
</ol>
|
||||||
</nav>
|
</nav>
|
||||||
|
|||||||
@ -8,9 +8,7 @@
|
|||||||
font-medium
|
font-medium
|
||||||
leading-5
|
leading-5
|
||||||
text-gray-900
|
text-gray-900
|
||||||
dark:text-gray-400
|
|
||||||
outline-none
|
outline-none
|
||||||
dark:focus:ring-offset-gray-900
|
|
||||||
focus:ring-2 focus:ring-offset-2 focus:ring-primary-400
|
focus:ring-2 focus:ring-offset-2 focus:ring-primary-400
|
||||||
"
|
"
|
||||||
:to="to"
|
:to="to"
|
||||||
|
|||||||
@ -1,7 +1,6 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { computed, ref } from 'vue'
|
import { computed, ref } from 'vue'
|
||||||
import SpinnerIcon from '@/scripts/components/icons/SpinnerIcon.vue'
|
import SpinnerIcon from '@/scripts/components/icons/SpinnerIcon.vue'
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
contentLoading: {
|
contentLoading: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
@ -10,7 +9,7 @@ const props = defineProps({
|
|||||||
defaultClass: {
|
defaultClass: {
|
||||||
type: String,
|
type: String,
|
||||||
default:
|
default:
|
||||||
'inline-flex whitespace-nowrap items-center border font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-800',
|
'inline-flex whitespace-nowrap items-center border font-medium focus:outline-none focus:ring-2 focus:ring-offset-2',
|
||||||
},
|
},
|
||||||
tag: {
|
tag: {
|
||||||
type: String,
|
type: String,
|
||||||
@ -28,10 +27,6 @@ const props = defineProps({
|
|||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false,
|
default: false,
|
||||||
},
|
},
|
||||||
loadingRight: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
size: {
|
size: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'md',
|
default: 'md',
|
||||||
@ -86,17 +81,17 @@ const placeHolderSize = computed(() => {
|
|||||||
|
|
||||||
const variantClass = computed(() => {
|
const variantClass = computed(() => {
|
||||||
return {
|
return {
|
||||||
'border-transparent shadow-sm text-white bg-primary-600 hover:bg-primary-700 focus:ring-primary-500 dark:bg-primary-500 dark:hover:bg-primary-600':
|
'border-transparent shadow-sm text-white bg-primary-600 hover:bg-primary-700 focus:ring-primary-500':
|
||||||
props.variant === 'primary',
|
props.variant === 'primary',
|
||||||
'border-transparent text-primary-700 bg-primary-100 hover:bg-primary-200 focus:ring-primary-500':
|
'border-transparent text-primary-700 bg-primary-100 hover:bg-primary-200 focus:ring-primary-500':
|
||||||
props.variant === 'secondary',
|
props.variant === 'secondary',
|
||||||
'border-transparent border-solid border-primary-500 font-normal transition ease-in-out duration-150 text-primary-500 hover:bg-primary-100 shadow-inner focus:ring-primary-500 dark:text-primary-400 dark:border-primary-400 dark:hover:bg-transparent dark:hover:text-primary-500 dark:hover:border-primary-500':
|
'border-transparent border-solid border-primary-500 font-normal transition ease-in-out duration-150 text-primary-500 hover:bg-primary-200 shadow-inner focus:ring-primary-500':
|
||||||
props.variant == 'primary-outline',
|
props.variant == 'primary-outline',
|
||||||
'border-gray-200 text-gray-700 bg-white hover:bg-gray-50 focus:ring-primary-500 focus:ring-offset-0 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-900':
|
'border-gray-200 text-gray-700 bg-white hover:bg-gray-50 focus:ring-primary-500 focus:ring-offset-0':
|
||||||
props.variant == 'white',
|
props.variant == 'white',
|
||||||
'border-transparent shadow-sm text-white bg-red-600 hover:bg-red-700 focus:ring-red-500':
|
'border-transparent shadow-sm text-white bg-red-600 hover:bg-red-700 focus:ring-red-500':
|
||||||
props.variant === 'danger',
|
props.variant === 'danger',
|
||||||
'border-transparent bg-gray-200 border hover:bg-opacity-60 focus:ring-gray-500 focus:ring-offset-0 dark:bg-gray-600 dark:text-white dark:hover:bg-opacity-60':
|
'border-transparent bg-gray-200 border hover:bg-opacity-60 focus:ring-gray-500 focus:ring-offset-0':
|
||||||
props.variant === 'gray',
|
props.variant === 'gray',
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
@ -129,13 +124,6 @@ const iconRightClass = computed(() => {
|
|||||||
'ml-3 -mr-1 h-5 w-5': props.size === 'lg' || props.size === 'xl',
|
'ml-3 -mr-1 h-5 w-5': props.size === 'lg' || props.size === 'xl',
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const buttonDisabledClass = computed(() => {
|
|
||||||
if (props.disabled || props.loading)
|
|
||||||
return 'cursor-not-allowed bg-opacity-70 dark:!bg-opacity-40 hover:!bg-opacity-70 pointer-event-none'
|
|
||||||
|
|
||||||
return ''
|
|
||||||
})
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@ -153,17 +141,15 @@ const buttonDisabledClass = computed(() => {
|
|||||||
<BaseCustomTag
|
<BaseCustomTag
|
||||||
v-else
|
v-else
|
||||||
:tag="tag"
|
:tag="tag"
|
||||||
:disabled="disabled || loading"
|
:disabled="disabled"
|
||||||
:class="[defaultClass, sizeClass, variantClass, roundedClass, buttonDisabledClass]"
|
:class="[defaultClass, sizeClass, variantClass, roundedClass]"
|
||||||
>
|
>
|
||||||
<SpinnerIcon v-if="loading && !loadingRight" :class="[iconLeftClass, iconVariantClass]" />
|
<SpinnerIcon v-if="loading" :class="[iconLeftClass, iconVariantClass]" />
|
||||||
|
|
||||||
<slot v-else name="left" :class="iconLeftClass" />
|
<slot v-else name="left" :class="iconLeftClass"></slot>
|
||||||
|
|
||||||
<slot />
|
<slot />
|
||||||
|
|
||||||
<SpinnerIcon v-if="loading && loadingRight" :class="[iconRightClass, iconVariantClass]" />
|
<slot name="right" :class="[iconRightClass, iconVariantClass]"></slot>
|
||||||
|
|
||||||
<slot v-else name="right" :class="[iconRightClass, iconVariantClass]" />
|
|
||||||
</BaseCustomTag>
|
</BaseCustomTag>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -1,9 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div
|
<div class="bg-white rounded-lg shadow">
|
||||||
class="bg-white rounded-lg shadow dark:bg-gray-800 dark:text-white dark:shadow-glass dark:border dark:border-white/10 dark:bg-gray-800/70 relative"
|
|
||||||
>
|
|
||||||
<BaseDarkHighlight class="z-[-1] mt-10" />
|
|
||||||
|
|
||||||
<div
|
<div
|
||||||
v-if="hasHeaderSlot"
|
v-if="hasHeaderSlot"
|
||||||
class="px-5 py-4 text-black border-b border-gray-100 border-solid"
|
class="px-5 py-4 text-black border-b border-gray-100 border-solid"
|
||||||
|
|||||||
@ -15,12 +15,12 @@
|
|||||||
v-if="label"
|
v-if="label"
|
||||||
:for="id"
|
:for="id"
|
||||||
:class="`font-medium ${
|
:class="`font-medium ${
|
||||||
disabled ? 'text-gray-400 cursor-not-allowed' : 'text-gray-600 dark:text-white'
|
disabled ? 'text-gray-400 cursor-not-allowed' : 'text-gray-600'
|
||||||
} cursor-pointer `"
|
} cursor-pointer `"
|
||||||
>
|
>
|
||||||
{{ label }}
|
{{ label }}
|
||||||
</label>
|
</label>
|
||||||
<p v-if="description" class="text-gray-500 dark:text-gray-400">{{ description }}</p>
|
<p v-if="description" class="text-gray-500">{{ description }}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -51,7 +51,7 @@ const props = defineProps({
|
|||||||
},
|
},
|
||||||
checkboxClass: {
|
checkboxClass: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'w-4 h-4 border-gray-300 rounded cursor-pointer dark:bg-gray-600 dark:border-gray-500',
|
default: 'w-4 h-4 border-gray-300 rounded cursor-pointer',
|
||||||
},
|
},
|
||||||
setInitialValue: {
|
setInitialValue: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
|
|||||||
@ -39,8 +39,6 @@ $base-content-placeholders-border-radius: 6px !default;
|
|||||||
$base-content-placeholders-line-height: 15px !default;
|
$base-content-placeholders-line-height: 15px !default;
|
||||||
$base-content-placeholders-spacing: 10px !default;
|
$base-content-placeholders-spacing: 10px !default;
|
||||||
|
|
||||||
$base-content-placeholders-primary-color-dark: rgb(71, 85, 105) !default;
|
|
||||||
$base-content-placeholders-secondary-color-dark: rgb(71, 85, 105) !default;
|
|
||||||
// Animations
|
// Animations
|
||||||
@keyframes vueContentPlaceholdersAnimation {
|
@keyframes vueContentPlaceholdersAnimation {
|
||||||
0% {
|
0% {
|
||||||
@ -59,10 +57,6 @@ $base-content-placeholders-secondary-color-dark: rgb(71, 85, 105) !default;
|
|||||||
min-height: $base-content-placeholders-line-height;
|
min-height: $base-content-placeholders-line-height;
|
||||||
background: $base-content-placeholders-secondary-color;
|
background: $base-content-placeholders-secondary-color;
|
||||||
|
|
||||||
.dark & {
|
|
||||||
background: $base-content-placeholders-secondary-color-dark;
|
|
||||||
}
|
|
||||||
|
|
||||||
.base-content-placeholders-is-rounded & {
|
.base-content-placeholders-is-rounded & {
|
||||||
border-radius: $base-content-placeholders-border-radius;
|
border-radius: $base-content-placeholders-border-radius;
|
||||||
}
|
}
|
||||||
@ -92,15 +86,6 @@ $base-content-placeholders-secondary-color-dark: rgb(71, 85, 105) !default;
|
|||||||
animation-name: vueContentPlaceholdersAnimation;
|
animation-name: vueContentPlaceholdersAnimation;
|
||||||
animation-timing-function: linear;
|
animation-timing-function: linear;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark .base-content-placeholders-is-animated &::before {
|
|
||||||
background: linear-gradient(
|
|
||||||
to right,
|
|
||||||
transparent 0%,
|
|
||||||
darken($base-content-placeholders-secondary-color-dark, 5%) 15%,
|
|
||||||
transparent 30%
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin base-content-placeholders-spacing {
|
@mixin base-content-placeholders-spacing {
|
||||||
@ -171,10 +156,6 @@ $base-content-placeholders-secondary-color-dark: rgb(71, 85, 105) !default;
|
|||||||
min-height: $base-content-placeholders-line-height;
|
min-height: $base-content-placeholders-line-height;
|
||||||
background: $base-content-placeholders-secondary-color;
|
background: $base-content-placeholders-secondary-color;
|
||||||
|
|
||||||
.dark & {
|
|
||||||
background: $base-content-placeholders-secondary-color-dark;
|
|
||||||
}
|
|
||||||
|
|
||||||
.base-content-placeholders-is-animated &::before {
|
.base-content-placeholders-is-animated &::before {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -196,14 +177,6 @@ $base-content-placeholders-secondary-color-dark: rgb(71, 85, 105) !default;
|
|||||||
animation-timing-function: linear;
|
animation-timing-function: linear;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark .base-content-placeholders-is-animated &::before {
|
|
||||||
background: linear-gradient(
|
|
||||||
to right,
|
|
||||||
transparent 0%,
|
|
||||||
darken($base-content-placeholders-secondary-color-dark, 5%) 15%,
|
|
||||||
transparent 30%
|
|
||||||
);
|
|
||||||
}
|
|
||||||
// @include base-content-placeholders-spacing;
|
// @include base-content-placeholders-spacing;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -40,7 +40,6 @@
|
|||||||
font-normal
|
font-normal
|
||||||
cursor-pointer
|
cursor-pointer
|
||||||
hover:bg-gray-100
|
hover:bg-gray-100
|
||||||
dark:hover:bg-gray-700/60
|
|
||||||
rounded
|
rounded
|
||||||
ml-1
|
ml-1
|
||||||
py-0.5
|
py-0.5
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
v-if="address"
|
v-if="address"
|
||||||
class="text-sm font-bold leading-5 text-black non-italic space-y-1 dark:text-white"
|
class="text-sm font-bold leading-5 text-black non-italic space-y-1"
|
||||||
>
|
>
|
||||||
<p v-if="address?.address_street_1">{{ address?.address_street_1 }},</p>
|
<p v-if="address?.address_street_1">{{ address?.address_street_1 }},</p>
|
||||||
|
|
||||||
|
|||||||
@ -20,7 +20,6 @@
|
|||||||
border border-gray-200 border-solid
|
border border-gray-200 border-solid
|
||||||
min-h-[170px]
|
min-h-[170px]
|
||||||
rounded-md
|
rounded-md
|
||||||
dark:border-white/10 dark:bg-gray-800/50
|
|
||||||
"
|
"
|
||||||
@click.stop
|
@click.stop
|
||||||
>
|
>
|
||||||
@ -28,7 +27,7 @@
|
|||||||
<BaseText
|
<BaseText
|
||||||
:text="selectedCustomer.name"
|
:text="selectedCustomer.name"
|
||||||
:length="30"
|
:length="30"
|
||||||
class="flex-1 text-base font-medium text-left text-gray-900 dark:text-white"
|
class="flex-1 text-base font-medium text-left text-gray-900"
|
||||||
/>
|
/>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
<a
|
<a
|
||||||
@ -193,7 +192,6 @@
|
|||||||
border border-gray-200 border-solid
|
border border-gray-200 border-solid
|
||||||
rounded-md
|
rounded-md
|
||||||
min-h-[170px]
|
min-h-[170px]
|
||||||
dark:border-white/10 dark:bg-gray-700/60 dark:text-white
|
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<BaseIcon
|
<BaseIcon
|
||||||
@ -209,12 +207,11 @@
|
|||||||
bg-gray-200
|
bg-gray-200
|
||||||
rounded-full
|
rounded-full
|
||||||
font-base
|
font-base
|
||||||
dark:bg-gray-700
|
|
||||||
"
|
"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<div class="mt-1">
|
<div class="mt-1">
|
||||||
<label class="text-lg font-medium text-gray-900 dark:text-white">
|
<label class="text-lg font-medium text-gray-900">
|
||||||
{{ $t('customers.new_customer') }}
|
{{ $t('customers.new_customer') }}
|
||||||
<span class="text-red-500"> * </span>
|
<span class="text-red-500"> * </span>
|
||||||
</label>
|
</label>
|
||||||
@ -249,11 +246,6 @@
|
|||||||
shadow-lg
|
shadow-lg
|
||||||
ring-1 ring-black ring-opacity-5
|
ring-1 ring-black ring-opacity-5
|
||||||
bg-white
|
bg-white
|
||||||
dark:border
|
|
||||||
dark:border-white/10
|
|
||||||
dark:bg-gray-800
|
|
||||||
dark:text-white
|
|
||||||
dark:shadow-glass
|
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<div class="relative">
|
<div class="relative">
|
||||||
@ -273,7 +265,6 @@
|
|||||||
overflow-auto
|
overflow-auto
|
||||||
list
|
list
|
||||||
border-t border-gray-200
|
border-t border-gray-200
|
||||||
dark:border-white/10
|
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<li
|
<li
|
||||||
@ -289,7 +280,6 @@
|
|||||||
hover:cursor-pointer hover:bg-gray-100
|
hover:cursor-pointer hover:bg-gray-100
|
||||||
focus:outline-none focus:bg-gray-100
|
focus:outline-none focus:bg-gray-100
|
||||||
last:border-b-0
|
last:border-b-0
|
||||||
dark:border-white/10 dark:hover:bg-gray-700/30
|
|
||||||
"
|
"
|
||||||
@click="selectNewCustomer(customer.id, close)"
|
@click="selectNewCustomer(customer.id, close)"
|
||||||
>
|
>
|
||||||
@ -309,7 +299,6 @@
|
|||||||
bg-gray-300
|
bg-gray-300
|
||||||
rounded-full
|
rounded-full
|
||||||
avatar
|
avatar
|
||||||
dark:bg-gray-600
|
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
{{ initGenerator(customer.name) }}
|
{{ initGenerator(customer.name) }}
|
||||||
@ -344,9 +333,9 @@
|
|||||||
</li>
|
</li>
|
||||||
<div
|
<div
|
||||||
v-if="customerStore.customers.length === 0"
|
v-if="customerStore.customers.length === 0"
|
||||||
class="flex justify-center p-5 text-gray-400 dark:text-gray-300"
|
class="flex justify-center p-5 text-gray-400"
|
||||||
>
|
>
|
||||||
<label class="text-base text-gray-500 cursor-pointer dark:text-gray-300">
|
<label class="text-base text-gray-500 cursor-pointer">
|
||||||
{{ $t('customers.no_customers_found') }}
|
{{ $t('customers.no_customers_found') }}
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
@ -368,10 +357,6 @@
|
|||||||
border-none
|
border-none
|
||||||
outline-none
|
outline-none
|
||||||
focus:bg-gray-300
|
focus:bg-gray-300
|
||||||
dark:bg-gray-600/70
|
|
||||||
dark:shadow-glass
|
|
||||||
dark:backdrop-blur-xl
|
|
||||||
dark:hover:bg-gray-600/80
|
|
||||||
"
|
"
|
||||||
@click="openCustomerModal"
|
@click="openCustomerModal"
|
||||||
>
|
>
|
||||||
|
|||||||
@ -1,21 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div
|
|
||||||
class="
|
|
||||||
hidden
|
|
||||||
top-0
|
|
||||||
w-full
|
|
||||||
absolute
|
|
||||||
ml-auto
|
|
||||||
mr-auto
|
|
||||||
left-0
|
|
||||||
right-0
|
|
||||||
text-center
|
|
||||||
h-full
|
|
||||||
rounded-full
|
|
||||||
bg-highlight/[.10]
|
|
||||||
blur-2xl
|
|
||||||
dark:block
|
|
||||||
z-[-1]
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
@ -10,7 +10,7 @@
|
|||||||
{{ label }}
|
{{ label }}
|
||||||
</BaseLabel>
|
</BaseLabel>
|
||||||
|
|
||||||
<p class="text-sm font-bold leading-5 text-black non-italic dark:text-white">
|
<p class="text-sm font-bold leading-5 text-black non-italic">
|
||||||
{{ value }}
|
{{ value }}
|
||||||
|
|
||||||
<slot />
|
<slot />
|
||||||
|
|||||||
@ -30,13 +30,8 @@
|
|||||||
leave-to="opacity-0"
|
leave-to="opacity-0"
|
||||||
>
|
>
|
||||||
<DialogOverlay
|
<DialogOverlay
|
||||||
class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75 dark:backdrop-blur-xl dark:bg-gray-900/80"
|
class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75"
|
||||||
>
|
|
||||||
<BaseDarkHighlight
|
|
||||||
class="!bg-highlight/[.17] !top-1/2 h-60 -translate-y-1/2 mt-5"
|
|
||||||
:class="dialogSizeClasses"
|
|
||||||
/>
|
/>
|
||||||
</DialogOverlay>
|
|
||||||
</TransitionChild>
|
</TransitionChild>
|
||||||
|
|
||||||
<!-- This element is to trick the browser into centering the modal contents. -->
|
<!-- This element is to trick the browser into centering the modal contents. -->
|
||||||
@ -69,11 +64,6 @@
|
|||||||
shadow-xl
|
shadow-xl
|
||||||
sm:my-8 sm:align-middle sm:w-full sm:p-6
|
sm:my-8 sm:align-middle sm:w-full sm:p-6
|
||||||
relative
|
relative
|
||||||
dark:backdrop-blur-xl
|
|
||||||
dark:shadow-glass
|
|
||||||
dark:border
|
|
||||||
dark:border-white/10
|
|
||||||
dark:bg-gray-800
|
|
||||||
"
|
"
|
||||||
:class="dialogSizeClasses"
|
:class="dialogSizeClasses"
|
||||||
>
|
>
|
||||||
@ -90,31 +80,31 @@
|
|||||||
rounded-full
|
rounded-full
|
||||||
"
|
"
|
||||||
:class="{
|
:class="{
|
||||||
'bg-green-100 dark:bg-primary-500': dialogStore.variant === 'primary',
|
'bg-green-100': dialogStore.variant === 'primary',
|
||||||
'bg-red-100 dark:bg-red-500': dialogStore.variant === 'danger',
|
'bg-red-100': dialogStore.variant === 'danger',
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
<BaseIcon
|
<BaseIcon
|
||||||
v-if="dialogStore.variant === 'primary'"
|
v-if="dialogStore.variant === 'primary'"
|
||||||
name="CheckIcon"
|
name="CheckIcon"
|
||||||
class="w-6 h-6 text-green-600 dark:text-white"
|
class="w-6 h-6 text-green-600"
|
||||||
/>
|
/>
|
||||||
<BaseIcon
|
<BaseIcon
|
||||||
v-else
|
v-else
|
||||||
name="ExclamationIcon"
|
name="ExclamationIcon"
|
||||||
class="w-6 h-6 text-red-600 dark:text-white"
|
class="w-6 h-6 text-red-600"
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-3 text-center sm:mt-5">
|
<div class="mt-3 text-center sm:mt-5">
|
||||||
<DialogTitle
|
<DialogTitle
|
||||||
as="h3"
|
as="h3"
|
||||||
class="text-lg font-medium leading-6 text-gray-900 dark:text-white"
|
class="text-lg font-medium leading-6 text-gray-900"
|
||||||
>
|
>
|
||||||
{{ dialogStore.title }}
|
{{ dialogStore.title }}
|
||||||
</DialogTitle>
|
</DialogTitle>
|
||||||
<div class="mt-2">
|
<div class="mt-2">
|
||||||
<p class="text-sm text-gray-500 dark:text-gray-400">
|
<p class="text-sm text-gray-500">
|
||||||
{{ dialogStore.message }}
|
{{ dialogStore.message }}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,3 +1,3 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="w-full h-px bg-gray-300 dark:bg-gray-600" />
|
<hr class="w-full text-gray-300" />
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -1,24 +1,18 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col items-center justify-center mt-16">
|
<div class="flex flex-col items-center justify-center mt-16">
|
||||||
<div class="relative">
|
<div class="flex flex-col items-center justify-center">
|
||||||
<BaseDarkHighlight class="bg-highlight/[.07] top-2" />
|
<slot></slot>
|
||||||
|
</div>
|
||||||
<div class="relative z-5 flex flex-col items-center">
|
<div class="mt-2">
|
||||||
<div class="flex flex-col items-center justify-center">
|
<label class="font-medium">{{ title }}</label>
|
||||||
<slot />
|
</div>
|
||||||
</div>
|
<div class="mt-2">
|
||||||
<div class="mt-2">
|
<label class="text-gray-500">
|
||||||
<label class="font-medium">{{ title }}</label>
|
{{ description }}
|
||||||
</div>
|
</label>
|
||||||
<div class="mt-2 text-center md:text-left">
|
</div>
|
||||||
<label class="text-gray-500 dark:text-gray-400">
|
<div class="mt-6">
|
||||||
{{ description }}
|
<slot name="actions" />
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="mt-6">
|
|
||||||
<slot name="actions" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -1,18 +1,11 @@
|
|||||||
<template>
|
<template>
|
||||||
<div
|
<div class="rounded-md bg-red-50 p-4">
|
||||||
class="
|
|
||||||
rounded-md
|
|
||||||
bg-red-50
|
|
||||||
p-4
|
|
||||||
dark:border dark:border-red-400 dark:bg-transparent
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
<div class="shrink-0">
|
<div class="shrink-0">
|
||||||
<XCircleIcon class="h-5 w-5 text-red-400 dark:text-red-500" aria-hidden="true" />
|
<XCircleIcon class="h-5 w-5 text-red-400" aria-hidden="true" />
|
||||||
</div>
|
</div>
|
||||||
<div class="ml-3">
|
<div class="ml-3">
|
||||||
<h3 class="text-sm font-medium text-red-800 dark:text-red-500">
|
<h3 class="text-sm font-medium text-red-800">
|
||||||
{{ errorTitle }}
|
{{ errorTitle }}
|
||||||
</h3>
|
</h3>
|
||||||
<div class="mt-2 text-sm text-red-700">
|
<div class="mt-2 text-sm text-red-700">
|
||||||
|
|||||||
@ -18,17 +18,17 @@ const props = defineProps({
|
|||||||
const badgeColorClasses = computed(() => {
|
const badgeColorClasses = computed(() => {
|
||||||
switch (props.status) {
|
switch (props.status) {
|
||||||
case 'DRAFT':
|
case 'DRAFT':
|
||||||
return 'bg-yellow-300 bg-opacity-25 px-2 py-1 text-sm text-yellow-800 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-yellow-500 dark:text-yellow-500'
|
return 'bg-yellow-300 bg-opacity-25 px-2 py-1 text-sm text-yellow-800 uppercase font-normal text-center '
|
||||||
case 'SENT':
|
case 'SENT':
|
||||||
return ' bg-yellow-500 bg-opacity-25 px-2 py-1 text-sm text-yellow-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-yellow-200 dark:text-yellow-200'
|
return ' bg-yellow-500 bg-opacity-25 px-2 py-1 text-sm text-yellow-900 uppercase font-normal text-center '
|
||||||
case 'VIEWED':
|
case 'VIEWED':
|
||||||
return 'bg-blue-400 bg-opacity-25 px-2 py-1 text-sm text-blue-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-blue-300 dark:text-blue-300'
|
return 'bg-blue-400 bg-opacity-25 px-2 py-1 text-sm text-blue-900 uppercase font-normal text-center'
|
||||||
case 'EXPIRED':
|
case 'EXPIRED':
|
||||||
return 'bg-red-300 bg-opacity-25 px-2 py-1 text-sm text-red-800 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-red-500 dark:text-red-500'
|
return 'bg-red-300 bg-opacity-25 px-2 py-1 text-sm text-red-800 uppercase font-normal text-center'
|
||||||
case 'ACCEPTED':
|
case 'ACCEPTED':
|
||||||
return 'bg-green-500 bg-opacity-25 px-2 py-1 text-sm text-green-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-green-400 dark:text-green-400'
|
return 'bg-green-400 bg-opacity-25 px-2 py-1 text-sm text-green-800 uppercase font-normal text-center'
|
||||||
case 'REJECTED':
|
case 'REJECTED':
|
||||||
return 'bg-purple-300 bg-opacity-25 px-2 py-1 text-sm text-purple-800 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-purple-400 dark:text-purple-400'
|
return 'bg-purple-300 bg-opacity-25 px-2 py-1 text-sm text-purple-800 uppercase font-normal text-center'
|
||||||
default:
|
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 bg-opacity-25 px-2 py-1 text-sm text-gray-900 uppercase font-normal text-center'
|
||||||
}
|
}
|
||||||
|
|||||||
@ -21,7 +21,6 @@
|
|||||||
group
|
group
|
||||||
min-h-[100px]
|
min-h-[100px]
|
||||||
bg-gray-50
|
bg-gray-50
|
||||||
dark:bg-gray-700 dark:border-gray-600
|
|
||||||
"
|
"
|
||||||
:class="avatar ? 'w-32 h-32' : 'w-full'"
|
:class="avatar ? 'w-32 h-32' : 'w-full'"
|
||||||
>
|
>
|
||||||
@ -50,7 +49,7 @@
|
|||||||
|
|
||||||
<a
|
<a
|
||||||
href="#"
|
href="#"
|
||||||
class="absolute z-30 bg-white rounded-full -bottom-3 -right-3 group dark:bg-gray-900"
|
class="absolute z-30 bg-white rounded-full -bottom-3 -right-3 group"
|
||||||
@click.prevent.stop="onBrowse"
|
@click.prevent.stop="onBrowse"
|
||||||
>
|
>
|
||||||
<BaseIcon
|
<BaseIcon
|
||||||
@ -96,7 +95,7 @@
|
|||||||
|
|
||||||
<div
|
<div
|
||||||
v-else-if="localFiles.length && avatar && !multiple"
|
v-else-if="localFiles.length && avatar && !multiple"
|
||||||
class="flex w-full h-full border border-gray-200 rounded dark:border-gray-600"
|
class="flex w-full h-full border border-gray-200 rounded"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
v-if="localFiles[0].image"
|
v-if="localFiles[0].image"
|
||||||
@ -170,11 +169,10 @@
|
|||||||
-right-3
|
-right-3
|
||||||
group
|
group
|
||||||
hover:border-gray-300
|
hover:border-gray-300
|
||||||
dark:border-gray-600 dark:bg-gray-900 dark:hover:border-gray-700
|
|
||||||
"
|
"
|
||||||
@click.prevent.stop="onAvatarRemove(localFiles[0])"
|
@click.prevent.stop="onAvatarRemove(localFiles[0])"
|
||||||
>
|
>
|
||||||
<BaseIcon name="XIcon" class="h-4 text-xl leading-6 text-black dark:text-white" />
|
<BaseIcon name="XIcon" class="h-4 text-xl leading-6 text-black" />
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -197,7 +195,6 @@
|
|||||||
hover:border-gray-500
|
hover:border-gray-500
|
||||||
relative
|
relative
|
||||||
max-w-md
|
max-w-md
|
||||||
dark:border-gray-600 dark:bg-transparent dark:hover:border-gray-700
|
|
||||||
"
|
"
|
||||||
@click.prevent
|
@click.prevent
|
||||||
>
|
>
|
||||||
@ -273,7 +270,6 @@
|
|||||||
-right-3
|
-right-3
|
||||||
group
|
group
|
||||||
hover:border-gray-300
|
hover:border-gray-300
|
||||||
dark:border-gray-600 dark:bg-gray-900 dark:hover:border-gray-700
|
|
||||||
"
|
"
|
||||||
@click.prevent.stop="onFileRemove(index)"
|
@click.prevent.stop="onFileRemove(index)"
|
||||||
>
|
>
|
||||||
@ -297,7 +293,6 @@
|
|||||||
hover:border-gray-500
|
hover:border-gray-500
|
||||||
relative
|
relative
|
||||||
max-w-md
|
max-w-md
|
||||||
dark:border-gray-600 dark:bg-gray-800 dark:hover:border-gray-700
|
|
||||||
"
|
"
|
||||||
@click.prevent
|
@click.prevent
|
||||||
>
|
>
|
||||||
@ -373,11 +368,10 @@
|
|||||||
-right-3
|
-right-3
|
||||||
group
|
group
|
||||||
hover:border-gray-300
|
hover:border-gray-300
|
||||||
dark:border-gray-600 dark:bg-gray-900 dark:hover:border-gray-700
|
|
||||||
"
|
"
|
||||||
@click.prevent.stop="onFileRemove(index)"
|
@click.prevent.stop="onFileRemove(index)"
|
||||||
>
|
>
|
||||||
<BaseIcon name="XIcon" class="h-4 text-xl leading-6 text-black dark:text-white" />
|
<BaseIcon name="XIcon" class="h-4 text-xl leading-6 text-black" />
|
||||||
</a>
|
</a>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -7,7 +7,7 @@
|
|||||||
leave-from-class="opacity-100"
|
leave-from-class="opacity-100"
|
||||||
leave-to-class="opacity-0"
|
leave-to-class="opacity-0"
|
||||||
>
|
>
|
||||||
<div v-show="show" class="relative z-10 p-4 md:p-8 bg-gray-200 rounded dark:bg-gray-800">
|
<div v-show="show" class="relative z-10 p-4 md:p-8 bg-gray-200 rounded">
|
||||||
<slot name="filter-header" />
|
<slot name="filter-header" />
|
||||||
|
|
||||||
<label
|
<label
|
||||||
@ -20,7 +20,6 @@
|
|||||||
hover:text-gray-700
|
hover:text-gray-700
|
||||||
top-2.5
|
top-2.5
|
||||||
right-3.5
|
right-3.5
|
||||||
dark:text-gray-300
|
|
||||||
"
|
"
|
||||||
@click="$emit('clear')"
|
@click="$emit('clear')"
|
||||||
>
|
>
|
||||||
|
|||||||
@ -2,21 +2,6 @@
|
|||||||
<h6 :class="typeClass">
|
<h6 :class="typeClass">
|
||||||
<slot />
|
<slot />
|
||||||
</h6>
|
</h6>
|
||||||
|
|
||||||
<p
|
|
||||||
v-if="subtitle"
|
|
||||||
class="
|
|
||||||
mt-2
|
|
||||||
text-sm
|
|
||||||
leading-snug
|
|
||||||
text-gray-500
|
|
||||||
dark:text-gray-400
|
|
||||||
max-w-[680px]
|
|
||||||
"
|
|
||||||
>
|
|
||||||
{{ subtitle }}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
@ -29,16 +14,12 @@ const props = defineProps({
|
|||||||
return ['section-title', 'heading-title'].indexOf(value) !== -1
|
return ['section-title', 'heading-title'].indexOf(value) !== -1
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
subtitle: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
})
|
})
|
||||||
|
|
||||||
const typeClass = computed(() => {
|
const typeClass = computed(() => {
|
||||||
return {
|
return {
|
||||||
'text-gray-900 text-lg font-medium dark:text-white': props.type === 'heading-title',
|
'text-gray-900 text-lg font-medium': props.type === 'heading-title',
|
||||||
'text-gray-500 uppercase text-base dark:text-gray-300': props.type === 'section-title',
|
'text-gray-500 uppercase text-base': props.type === 'section-title',
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -65,7 +65,6 @@
|
|||||||
rounded-l-md
|
rounded-l-md
|
||||||
bg-gray-50
|
bg-gray-50
|
||||||
sm:text-sm
|
sm:text-sm
|
||||||
dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300
|
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
{{ addon }}
|
{{ addon }}
|
||||||
@ -83,7 +82,7 @@
|
|||||||
pointer-events-none
|
pointer-events-none
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<span class="text-gray-500 dark:text-white sm:text-sm ">
|
<span class="text-gray-500 sm:text-sm">
|
||||||
{{ inlineAddon }}
|
{{ inlineAddon }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@ -200,7 +199,7 @@ const props = defineProps({
|
|||||||
defaultInputClass: {
|
defaultInputClass: {
|
||||||
type: String,
|
type: String,
|
||||||
default:
|
default:
|
||||||
'font-base block w-full sm:text-sm border-gray-200 rounded-md text-black dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-500',
|
'font-base block w-full sm:text-sm border-gray-200 rounded-md text-black',
|
||||||
},
|
},
|
||||||
iconLeftClass: {
|
iconLeftClass: {
|
||||||
type: String,
|
type: String,
|
||||||
@ -251,8 +250,7 @@ const inputAddonClass = computed(() => {
|
|||||||
|
|
||||||
const inputInvalidClass = computed(() => {
|
const inputInvalidClass = computed(() => {
|
||||||
if (props.invalid) {
|
if (props.invalid) {
|
||||||
return 'border-red-500 dark:border-red-500 ring-red-500 dark:ring-red-500 focus:ring-red-500 dark:focus:ring-red-500 focus:border-red-500 dark:focus:border-red-500 '
|
return 'border-red-500 ring-red-500 focus:ring-red-500 focus:border-red-500'
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return 'focus:ring-primary-400 focus:border-primary-400'
|
return 'focus:ring-primary-400 focus:border-primary-400'
|
||||||
@ -260,7 +258,7 @@ const inputInvalidClass = computed(() => {
|
|||||||
|
|
||||||
const inputDisabledClass = computed(() => {
|
const inputDisabledClass = computed(() => {
|
||||||
if (props.disabled) {
|
if (props.disabled) {
|
||||||
return `border-gray-100 bg-gray-100 !text-gray-400 dark:!text-gray-200 ring-gray-200 focus:ring-gray-200 focus:border-gray-100 dark:opacity-25 `
|
return `border-gray-100 bg-gray-100 !text-gray-400 ring-gray-200 focus:ring-gray-200 focus:border-gray-100`
|
||||||
}
|
}
|
||||||
|
|
||||||
return ''
|
return ''
|
||||||
|
|||||||
@ -15,7 +15,6 @@
|
|||||||
text-gray-800
|
text-gray-800
|
||||||
whitespace-nowrap
|
whitespace-nowrap
|
||||||
justify-between
|
justify-between
|
||||||
dark:text-gray-300
|
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@ -32,7 +31,7 @@
|
|||||||
</label>
|
</label>
|
||||||
<div :class="inputContainerClasses">
|
<div :class="inputContainerClasses">
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
<span v-if="helpText" class="text-gray-500 text-xs mt-1 font-light dark:text-gray-400">
|
<span v-if="helpText" class="text-gray-500 text-xs mt-1 font-light">
|
||||||
{{ helpText }}
|
{{ helpText }}
|
||||||
</span>
|
</span>
|
||||||
<span v-if="error" class="block mt-0.5 text-sm text-red-500">
|
<span v-if="error" class="block mt-0.5 text-sm text-red-500">
|
||||||
|
|||||||
@ -20,25 +20,25 @@ export default {
|
|||||||
const badgeColorClasses = computed(() => {
|
const badgeColorClasses = computed(() => {
|
||||||
switch (props.status) {
|
switch (props.status) {
|
||||||
case 'DRAFT':
|
case 'DRAFT':
|
||||||
return 'bg-yellow-300 bg-opacity-25 px-2 py-1 text-sm text-yellow-800 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-yellow-500 dark:text-yellow-500'
|
return 'bg-yellow-300 bg-opacity-25 px-2 py-1 text-sm text-yellow-800 uppercase font-normal text-center'
|
||||||
case 'SENT':
|
case 'SENT':
|
||||||
return ' bg-yellow-500 bg-opacity-25 px-2 py-1 text-sm text-yellow-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-lime-200 dark:text-yellow-200'
|
return ' bg-yellow-500 bg-opacity-25 px-2 py-1 text-sm text-yellow-900 uppercase font-normal text-center '
|
||||||
case 'VIEWED':
|
case 'VIEWED':
|
||||||
return 'bg-blue-400 bg-opacity-25 px-2 py-1 text-sm text-blue-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-blue-300 dark:text-blue-300'
|
return 'bg-blue-400 bg-opacity-25 px-2 py-1 text-sm text-blue-900 uppercase font-normal text-center'
|
||||||
case 'COMPLETED':
|
case 'COMPLETED':
|
||||||
return 'bg-green-500 bg-opacity-25 px-2 py-1 text-sm text-green-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-green-400 dark:text-green-400'
|
return 'bg-green-500 bg-opacity-25 px-2 py-1 text-sm text-green-900 uppercase font-normal text-center'
|
||||||
case 'DUE':
|
case 'DUE':
|
||||||
return 'bg-yellow-500 bg-opacity-25 px-2 py-1 text-sm text-yellow-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-yellow-500 dark:text-yellow-500'
|
return 'bg-yellow-500 bg-opacity-25 px-2 py-1 text-sm text-yellow-900 uppercase font-normal text-center'
|
||||||
case 'OVERDUE':
|
case 'OVERDUE':
|
||||||
return 'bg-red-300 bg-opacity-50 px-2 py-1 text-sm text-red-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-red-500 dark:text-red-500'
|
return 'bg-red-300 bg-opacity-50 px-2 py-1 text-sm text-red-900 uppercase font-normal text-center'
|
||||||
case 'UNPAID':
|
case 'UNPAID':
|
||||||
return 'bg-yellow-500 bg-opacity-25 px-2 py-1 text-sm text-yellow-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-yellow-500 dark:text-yellow-500'
|
return 'bg-yellow-500 bg-opacity-25 px-2 py-1 text-sm text-yellow-900 uppercase font-normal text-center'
|
||||||
case 'PARTIALLY_PAID':
|
case 'PARTIALLY_PAID':
|
||||||
return 'bg-blue-400 bg-opacity-25 px-2 py-1 text-sm text-blue-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-blue-300 dark:text-blue-300'
|
return 'bg-blue-400 bg-opacity-25 px-2 py-1 text-sm text-blue-900 uppercase font-normal text-center'
|
||||||
case 'PAID':
|
case 'PAID':
|
||||||
return 'bg-green-500 bg-opacity-25 px-2 py-1 text-sm text-green-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-green-400 dark:text-green-400'
|
return 'bg-green-500 bg-opacity-25 px-2 py-1 text-sm text-green-900 uppercase font-normal text-center'
|
||||||
default:
|
default:
|
||||||
return 'bg-gray-500 bg-opacity-25 px-2 py-1 text-sm text-gray-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-gray-502 dark:text-gray-200'
|
return 'bg-gray-500 bg-opacity-25 px-2 py-1 text-sm text-gray-900 uppercase font-normal text-center'
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
return { badgeColorClasses }
|
return { badgeColorClasses }
|
||||||
|
|||||||
@ -12,7 +12,6 @@
|
|||||||
bg-gray-200
|
bg-gray-200
|
||||||
border border-gray-200 border-solid
|
border border-gray-200 border-solid
|
||||||
rounded
|
rounded
|
||||||
dark:bg-gray-900/70 dark:border-gray-700
|
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
{{ item.name }}
|
{{ item.name }}
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<label class="text-sm not-italic font-medium leading-5 text-gray-500 dark:text-gray-300">
|
<label class="text-sm not-italic font-medium leading-5 text-primary-800">
|
||||||
<slot />
|
<slot />
|
||||||
</label>
|
</label>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -29,21 +29,8 @@
|
|||||||
leave-to="opacity-0"
|
leave-to="opacity-0"
|
||||||
>
|
>
|
||||||
<DialogOverlay
|
<DialogOverlay
|
||||||
class="
|
class="fixed inset-0 transition-opacity bg-gray-700 bg-opacity-25"
|
||||||
fixed
|
/>
|
||||||
inset-0
|
|
||||||
transition-opacity
|
|
||||||
bg-gray-700
|
|
||||||
bg-opacity-25
|
|
||||||
dark:backdrop-blur-sm
|
|
||||||
dark:bg-gray-900/80
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<BaseDarkHighlight
|
|
||||||
class="!bg-highlight/[.17] !top-1/2 -translate-y-1/2 mt-5 h-96"
|
|
||||||
:class="modalSize"
|
|
||||||
/>
|
|
||||||
</DialogOverlay>
|
|
||||||
</TransitionChild>
|
</TransitionChild>
|
||||||
|
|
||||||
<!-- This element is to trick the browser into centering the modal contents. -->
|
<!-- This element is to trick the browser into centering the modal contents. -->
|
||||||
@ -74,11 +61,7 @@
|
|||||||
my-4
|
my-4
|
||||||
${modalSize}
|
${modalSize}
|
||||||
sm:w-full
|
sm:w-full
|
||||||
dark:shadow-glass
|
border-t-8 border-solid rounded shadow-xl border-primary-500`"
|
||||||
dark:border
|
|
||||||
dark:border-white/10
|
|
||||||
dark:bg-gray-800/90
|
|
||||||
border-t-8 border-solid rounded shadow-xl border-primary-500`"
|
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
v-if="hasHeaderSlot"
|
v-if="hasHeaderSlot"
|
||||||
@ -91,8 +74,6 @@
|
|||||||
text-lg
|
text-lg
|
||||||
font-medium
|
font-medium
|
||||||
text-black
|
text-black
|
||||||
dark:text-white
|
|
||||||
dark:border-gray-600
|
|
||||||
border-b border-gray-200 border-solid
|
border-b border-gray-200 border-solid
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
|
|||||||
@ -1,14 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div
|
|
||||||
class="
|
|
||||||
z-0
|
|
||||||
flex
|
|
||||||
justify-end
|
|
||||||
p-4
|
|
||||||
border-t border-gray-200 border-solid
|
|
||||||
dark:border-gray-600
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<slot />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
@ -39,7 +39,7 @@ const props = defineProps({
|
|||||||
inputClass: {
|
inputClass: {
|
||||||
type: String,
|
type: String,
|
||||||
default:
|
default:
|
||||||
'font-base block w-full sm:text-sm border-gray-200 rounded-md text-black dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-500',
|
'font-base block w-full sm:text-sm border-gray-200 rounded-md text-black',
|
||||||
},
|
},
|
||||||
disabled: {
|
disabled: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
@ -86,7 +86,7 @@ const currencyBindings = computed(() => {
|
|||||||
|
|
||||||
const invalidClass = computed(() => {
|
const invalidClass = computed(() => {
|
||||||
if (props.invalid) {
|
if (props.invalid) {
|
||||||
return 'border-red-500 dark:border-red-500 ring-red-500 dark:ring-red-500 focus:ring-red-500 dark:focus:ring-red-500 focus:border-red-500 dark:focus:border-red-500'
|
return 'border-red-500 ring-red-500 focus:ring-red-500 focus:border-red-500'
|
||||||
}
|
}
|
||||||
return 'focus:ring-primary-400 focus:border-primary-400'
|
return 'focus:ring-primary-400 focus:border-primary-400'
|
||||||
})
|
})
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="flex flex-wrap justify-between">
|
<div class="flex flex-wrap justify-between">
|
||||||
<div>
|
<div>
|
||||||
<h3 class="text-2xl font-bold text-left text-black dark:text-white">
|
<h3 class="text-2xl font-bold text-left text-black">
|
||||||
{{ title }}
|
{{ title }}
|
||||||
</h3>
|
</h3>
|
||||||
<slot />
|
<slot />
|
||||||
|
|||||||
@ -24,15 +24,15 @@ export default {
|
|||||||
const badgeColorClasses = computed(() => {
|
const badgeColorClasses = computed(() => {
|
||||||
switch (props.status) {
|
switch (props.status) {
|
||||||
case 'PAID':
|
case 'PAID':
|
||||||
return 'bg-primary-300 bg-opacity-25 text-primary-800 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-indigo-400 dark:text-indigo-400'
|
return 'bg-primary-300 bg-opacity-25 text-primary-800 uppercase font-normal text-center'
|
||||||
case 'UNPAID':
|
case 'UNPAID':
|
||||||
return ' bg-yellow-500 bg-opacity-25 text-yellow-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-orange-300 dark:text-orange-300'
|
return ' bg-yellow-500 bg-opacity-25 text-yellow-900 uppercase font-normal text-center '
|
||||||
case 'PARTIALLY_PAID':
|
case 'PARTIALLY_PAID':
|
||||||
return 'bg-blue-400 bg-opacity-25 text-blue-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-blue-300 dark:text-blue-300'
|
return 'bg-blue-400 bg-opacity-25 text-blue-900 uppercase font-normal text-center'
|
||||||
case 'OVERDUE':
|
case 'OVERDUE':
|
||||||
return 'bg-red-300 bg-opacity-50 px-2 py-1 text-sm text-red-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-red-500 dark:text-red-500'
|
return 'bg-red-300 bg-opacity-50 px-2 py-1 text-sm text-red-900 uppercase font-normal text-center'
|
||||||
default:
|
default:
|
||||||
return 'bg-gray-500 bg-opacity-25 text-gray-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-gray-300 dark:text-gray-300'
|
return 'bg-gray-500 bg-opacity-25 text-gray-900 uppercase font-normal text-center'
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
return { badgeColorClasses }
|
return { badgeColorClasses }
|
||||||
|
|||||||
@ -19,7 +19,7 @@
|
|||||||
]"
|
]"
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
>
|
>
|
||||||
<span class="rounded-full w-1.5 h-1.5" :class="{ 'bg-white': checked }"/>
|
<span class="rounded-full bg-white w-1.5 h-1.5" />
|
||||||
</span>
|
</span>
|
||||||
<div class="flex flex-col ml-3">
|
<div class="flex flex-col ml-3">
|
||||||
<RadioGroupLabel
|
<RadioGroupLabel
|
||||||
@ -66,11 +66,11 @@ const props = defineProps({
|
|||||||
},
|
},
|
||||||
checkedStateClass: {
|
checkedStateClass: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'bg-primary-600 ',
|
default: 'bg-primary-600',
|
||||||
},
|
},
|
||||||
unCheckedStateClass: {
|
unCheckedStateClass: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'bg-white dark:bg-transparent',
|
default: 'bg-white ',
|
||||||
},
|
},
|
||||||
optionGroupActiveStateClass: {
|
optionGroupActiveStateClass: {
|
||||||
type: String,
|
type: String,
|
||||||
@ -78,16 +78,16 @@ const props = defineProps({
|
|||||||
},
|
},
|
||||||
checkedStateLabelClass: {
|
checkedStateLabelClass: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'text-primary-900 dark:text-primary-400',
|
default: 'text-primary-900 ',
|
||||||
},
|
},
|
||||||
unCheckedStateLabelClass: {
|
unCheckedStateLabelClass: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'text-gray-900 dark:text-white',
|
default: 'text-gray-900',
|
||||||
},
|
},
|
||||||
optionGroupClass: {
|
optionGroupClass: {
|
||||||
type: String,
|
type: String,
|
||||||
default:
|
default:
|
||||||
'h-4 w-4 mt-0.5 cursor-pointer rounded-full border flex items-center justify-center dark:border-gray-600',
|
'h-4 w-4 mt-0.5 cursor-pointer rounded-full border flex items-center justify-center',
|
||||||
},
|
},
|
||||||
optionGroupLabelClass: {
|
optionGroupLabelClass: {
|
||||||
type: String,
|
type: String,
|
||||||
|
|||||||
@ -20,11 +20,11 @@ export default {
|
|||||||
const badgeColorClasses = computed(() => {
|
const badgeColorClasses = computed(() => {
|
||||||
switch (props.status) {
|
switch (props.status) {
|
||||||
case 'COMPLETED':
|
case 'COMPLETED':
|
||||||
return 'bg-green-500 bg-opacity-25 px-2 py-1 text-sm text-green-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-green-400 dark:text-green-400'
|
return 'bg-green-500 bg-opacity-25 px-2 py-1 text-sm text-green-900 uppercase font-normal text-center'
|
||||||
case 'ON_HOLD':
|
case 'ON_HOLD':
|
||||||
return 'bg-yellow-500 bg-opacity-25 px-2 py-1 text-sm text-yellow-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-yellow-200 dark:text-yellow-200'
|
return 'bg-yellow-500 bg-opacity-25 px-2 py-1 text-sm text-yellow-900 uppercase font-normal text-center'
|
||||||
case 'ACTIVE':
|
case 'ACTIVE':
|
||||||
return 'bg-blue-400 bg-opacity-25 px-2 py-1 text-sm text-blue-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-blue-300 dark:text-blue-300'
|
return 'bg-blue-400 bg-opacity-25 px-2 py-1 text-sm text-blue-900 uppercase font-normal text-center'
|
||||||
default:
|
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 bg-opacity-25 px-2 py-1 text-sm text-gray-900 uppercase font-normal text-center'
|
||||||
}
|
}
|
||||||
|
|||||||
@ -11,10 +11,6 @@
|
|||||||
bg-gray-200
|
bg-gray-200
|
||||||
cursor-pointer
|
cursor-pointer
|
||||||
text-primary-400
|
text-primary-400
|
||||||
dark:bg-gray-600/70
|
|
||||||
dark:backdrop-blur-xl
|
|
||||||
dark:shadow-glass
|
|
||||||
dark:hover:bg-gray-600/80
|
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
|
|||||||
@ -12,7 +12,7 @@
|
|||||||
>
|
>
|
||||||
<ListboxLabel
|
<ListboxLabel
|
||||||
v-if="label"
|
v-if="label"
|
||||||
class="block text-sm not-italic font-medium text-gray-800 mb-0.5 dark:text-white"
|
class="block text-sm not-italic font-medium text-gray-800 mb-0.5"
|
||||||
>
|
>
|
||||||
{{ label }}
|
{{ label }}
|
||||||
</ListboxLabel>
|
</ListboxLabel>
|
||||||
@ -28,7 +28,6 @@
|
|||||||
pr-10
|
pr-10
|
||||||
text-left
|
text-left
|
||||||
bg-white
|
bg-white
|
||||||
dark:bg-gray-700
|
|
||||||
border border-gray-200
|
border border-gray-200
|
||||||
rounded-md
|
rounded-md
|
||||||
shadow-sm
|
shadow-sm
|
||||||
@ -90,7 +89,6 @@
|
|||||||
ring-1 ring-black ring-opacity-5
|
ring-1 ring-black ring-opacity-5
|
||||||
focus:outline-none
|
focus:outline-none
|
||||||
sm:text-sm
|
sm:text-sm
|
||||||
dark:bg-gray-700
|
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<ListboxOption
|
<ListboxOption
|
||||||
@ -102,7 +100,7 @@
|
|||||||
>
|
>
|
||||||
<li
|
<li
|
||||||
:class="[
|
:class="[
|
||||||
active ? 'text-white bg-primary-600' : 'text-gray-900 dark:text-white',
|
active ? 'text-white bg-primary-600' : 'text-gray-900',
|
||||||
'cursor-default select-none relative py-2 pl-3 pr-9',
|
'cursor-default select-none relative py-2 pl-3 pr-9',
|
||||||
]"
|
]"
|
||||||
>
|
>
|
||||||
|
|||||||
@ -11,7 +11,7 @@
|
|||||||
mt-2
|
mt-2
|
||||||
text-sm
|
text-sm
|
||||||
leading-snug
|
leading-snug
|
||||||
text-left text-gray-500 dark:text-gray-400
|
text-left text-gray-500
|
||||||
max-w-[680px]
|
max-w-[680px]
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
|
|||||||
@ -7,7 +7,7 @@
|
|||||||
|
|
||||||
<Switch
|
<Switch
|
||||||
v-model="enabled"
|
v-model="enabled"
|
||||||
:class="enabled ? 'bg-primary-500' : 'bg-gray-300 dark:bg-gray-900'"
|
:class="enabled ? 'bg-primary-500' : 'bg-gray-300'"
|
||||||
class="
|
class="
|
||||||
relative
|
relative
|
||||||
inline-flex
|
inline-flex
|
||||||
@ -21,11 +21,7 @@
|
|||||||
v-bind="$attrs"
|
v-bind="$attrs"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
:class="
|
:class="enabled ? 'translate-x-6' : 'translate-x-1'"
|
||||||
enabled
|
|
||||||
? 'translate-x-6 dark:bg-white'
|
|
||||||
: 'translate-x-1 dark:bg-gray-500'
|
|
||||||
"
|
|
||||||
class="
|
class="
|
||||||
inline-block
|
inline-block
|
||||||
w-4
|
w-4
|
||||||
|
|||||||
@ -5,12 +5,12 @@
|
|||||||
<div class="flex flex-col">
|
<div class="flex flex-col">
|
||||||
<SwitchLabel
|
<SwitchLabel
|
||||||
as="p"
|
as="p"
|
||||||
class="p-0 mb-1 text-sm leading-snug text-black font-medium dark:text-white"
|
class="p-0 mb-1 text-sm leading-snug text-black font-medium"
|
||||||
passive
|
passive
|
||||||
>
|
>
|
||||||
{{ title }}
|
{{ title }}
|
||||||
</SwitchLabel>
|
</SwitchLabel>
|
||||||
<SwitchDescription class="text-sm text-gray-500 dark:text-gray-400">
|
<SwitchDescription class="text-sm text-gray-500">
|
||||||
{{ description }}
|
{{ description }}
|
||||||
</SwitchDescription>
|
</SwitchDescription>
|
||||||
</div>
|
</div>
|
||||||
@ -18,7 +18,7 @@
|
|||||||
:disabled="disabled"
|
:disabled="disabled"
|
||||||
:model-value="modelValue"
|
:model-value="modelValue"
|
||||||
:class="[
|
:class="[
|
||||||
modelValue ? 'bg-primary-500' : 'bg-gray-200 dark:bg-gray-900',
|
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-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500',
|
||||||
]"
|
]"
|
||||||
@update:modelValue="onUpdate"
|
@update:modelValue="onUpdate"
|
||||||
@ -26,7 +26,7 @@
|
|||||||
<span
|
<span
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
:class="[
|
:class="[
|
||||||
modelValue ? 'translate-x-5 dark:bg-white' : 'translate-x-0 dark:bg-gray-500',
|
modelValue ? 'translate-x-5' : 'translate-x-0',
|
||||||
'inline-block h-5 w-5 rounded-full bg-white shadow ring-0 transition ease-in-out duration-200',
|
'inline-block h-5 w-5 rounded-full bg-white shadow ring-0 transition ease-in-out duration-200',
|
||||||
]"
|
]"
|
||||||
/>
|
/>
|
||||||
|
|||||||
@ -7,7 +7,7 @@
|
|||||||
>
|
>
|
||||||
<TabList
|
<TabList
|
||||||
:class="[
|
:class="[
|
||||||
'flex border-b border-grey-light dark:border-gray-600',
|
'flex border-b border-grey-light',
|
||||||
'relative overflow-x-auto overflow-y-hidden',
|
'relative overflow-x-auto overflow-y-hidden',
|
||||||
'lg:pb-0 lg:ml-0',
|
'lg:pb-0 lg:ml-0',
|
||||||
]"
|
]"
|
||||||
@ -22,8 +22,8 @@
|
|||||||
:class="[
|
: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-none whitespace-nowrap',
|
||||||
selected
|
selected
|
||||||
? 'border-primary-400 text-black font-medium dark:text-white'
|
? ' border-primary-400 text-black font-medium'
|
||||||
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:border-gray-500',
|
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300',
|
||||||
]"
|
]"
|
||||||
>
|
>
|
||||||
{{ tab.title }}
|
{{ tab.title }}
|
||||||
|
|||||||
@ -45,7 +45,7 @@ const props = defineProps({
|
|||||||
defaultInputClass: {
|
defaultInputClass: {
|
||||||
type: String,
|
type: String,
|
||||||
default:
|
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 dark:border-gray-600 border-solid rounded outline-none dark:bg-gray-700 dark:text-white',
|
'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',
|
||||||
},
|
},
|
||||||
autosize: {
|
autosize: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
|
|||||||
@ -16,15 +16,13 @@
|
|||||||
text-left
|
text-left
|
||||||
bg-white
|
bg-white
|
||||||
border border-gray-200
|
border border-gray-200
|
||||||
dark:border-gray-600
|
|
||||||
rounded-md
|
rounded-md
|
||||||
min-h-[200px]
|
min-h-[200px]
|
||||||
overflow-hidden
|
overflow-hidden
|
||||||
dark:bg-gray-700 dark:text-white
|
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<div v-if="editor" class="editor-content">
|
<div v-if="editor" class="editor-content">
|
||||||
<div class="flex justify-end p-2 border-b border-gray-200 dark:border-gray-600 md:hidden">
|
<div class="flex justify-end p-2 border-b border-gray-200 md:hidden">
|
||||||
<BaseDropdown width-class="w-48">
|
<BaseDropdown width-class="w-48">
|
||||||
<template #activator>
|
<template #activator>
|
||||||
<div
|
<div
|
||||||
@ -44,7 +42,7 @@
|
|||||||
<dots-vertical-icon class="w-6 h-6 text-gray-600" />
|
<dots-vertical-icon class="w-6 h-6 text-gray-600" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<div class="flex flex-wrap space-x-1 dark:text-white">
|
<div class="flex flex-wrap space-x-1">
|
||||||
<span
|
<span
|
||||||
class="
|
class="
|
||||||
flex
|
flex
|
||||||
@ -55,9 +53,8 @@
|
|||||||
rounded-sm
|
rounded-sm
|
||||||
cursor-pointer
|
cursor-pointer
|
||||||
hover:bg-gray-100
|
hover:bg-gray-100
|
||||||
dark:hover:bg-gray-800
|
|
||||||
"
|
"
|
||||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('bold') }"
|
:class="{ 'bg-gray-200': editor.isActive('bold') }"
|
||||||
@click="editor.chain().focus().toggleBold().run()"
|
@click="editor.chain().focus().toggleBold().run()"
|
||||||
>
|
>
|
||||||
<bold-icon class="h-3 cursor-pointer fill-current" />
|
<bold-icon class="h-3 cursor-pointer fill-current" />
|
||||||
@ -72,9 +69,8 @@
|
|||||||
rounded-sm
|
rounded-sm
|
||||||
cursor-pointer
|
cursor-pointer
|
||||||
hover:bg-gray-100
|
hover:bg-gray-100
|
||||||
dark:hover:bg-gray-800
|
|
||||||
"
|
"
|
||||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('italic') }"
|
:class="{ 'bg-gray-200': editor.isActive('italic') }"
|
||||||
@click="editor.chain().focus().toggleItalic().run()"
|
@click="editor.chain().focus().toggleItalic().run()"
|
||||||
>
|
>
|
||||||
<italic-icon class="h-3 cursor-pointer fill-current" />
|
<italic-icon class="h-3 cursor-pointer fill-current" />
|
||||||
@ -89,9 +85,8 @@
|
|||||||
rounded-sm
|
rounded-sm
|
||||||
cursor-pointer
|
cursor-pointer
|
||||||
hover:bg-gray-100
|
hover:bg-gray-100
|
||||||
dark:hover:bg-gray-800
|
|
||||||
"
|
"
|
||||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('strike') }"
|
:class="{ 'bg-gray-200': editor.isActive('strike') }"
|
||||||
@click="editor.chain().focus().toggleStrike().run()"
|
@click="editor.chain().focus().toggleStrike().run()"
|
||||||
>
|
>
|
||||||
<strikethrough-icon class="h-3 cursor-pointer fill-current" />
|
<strikethrough-icon class="h-3 cursor-pointer fill-current" />
|
||||||
@ -106,9 +101,8 @@
|
|||||||
rounded-sm
|
rounded-sm
|
||||||
cursor-pointer
|
cursor-pointer
|
||||||
hover:bg-gray-100
|
hover:bg-gray-100
|
||||||
dark:hover:bg-gray-800
|
|
||||||
"
|
"
|
||||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('code') }"
|
:class="{ 'bg-gray-200': editor.isActive('code') }"
|
||||||
@click="editor.chain().focus().toggleCode().run()"
|
@click="editor.chain().focus().toggleCode().run()"
|
||||||
>
|
>
|
||||||
<coding-icon class="h-3 cursor-pointer fill-current" />
|
<coding-icon class="h-3 cursor-pointer fill-current" />
|
||||||
@ -123,9 +117,8 @@
|
|||||||
rounded-sm
|
rounded-sm
|
||||||
cursor-pointer
|
cursor-pointer
|
||||||
hover:bg-gray-100
|
hover:bg-gray-100
|
||||||
dark:hover:bg-gray-800
|
|
||||||
"
|
"
|
||||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('paragraph') }"
|
:class="{ 'bg-gray-200': editor.isActive('paragraph') }"
|
||||||
@click="editor.chain().focus().setParagraph().run()"
|
@click="editor.chain().focus().setParagraph().run()"
|
||||||
>
|
>
|
||||||
<paragraph-icon class="h-3 cursor-pointer fill-current" />
|
<paragraph-icon class="h-3 cursor-pointer fill-current" />
|
||||||
@ -140,10 +133,9 @@
|
|||||||
rounded-sm
|
rounded-sm
|
||||||
cursor-pointer
|
cursor-pointer
|
||||||
hover:bg-gray-100
|
hover:bg-gray-100
|
||||||
dark:hover:bg-gray-800
|
|
||||||
"
|
"
|
||||||
:class="{
|
:class="{
|
||||||
'bg-gray-200 dark:bg-gray-900': editor.isActive('heading', { level: 1 }),
|
'bg-gray-200': editor.isActive('heading', { level: 1 }),
|
||||||
}"
|
}"
|
||||||
@click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
|
@click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
|
||||||
>
|
>
|
||||||
@ -159,10 +151,9 @@
|
|||||||
rounded-sm
|
rounded-sm
|
||||||
cursor-pointer
|
cursor-pointer
|
||||||
hover:bg-gray-100
|
hover:bg-gray-100
|
||||||
dark:hover:bg-gray-800
|
|
||||||
"
|
"
|
||||||
:class="{
|
:class="{
|
||||||
'bg-gray-200 dark:bg-gray-900': editor.isActive('heading', { level: 2 }),
|
'bg-gray-200': editor.isActive('heading', { level: 2 }),
|
||||||
}"
|
}"
|
||||||
@click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
|
@click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
|
||||||
>
|
>
|
||||||
@ -178,10 +169,9 @@
|
|||||||
rounded-sm
|
rounded-sm
|
||||||
cursor-pointer
|
cursor-pointer
|
||||||
hover:bg-gray-100
|
hover:bg-gray-100
|
||||||
dark:hover:bg-gray-800
|
|
||||||
"
|
"
|
||||||
:class="{
|
:class="{
|
||||||
'bg-gray-200 dark:bg-gray-900': editor.isActive('heading', { level: 3 }),
|
'bg-gray-200': editor.isActive('heading', { level: 3 }),
|
||||||
}"
|
}"
|
||||||
@click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
|
@click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
|
||||||
>
|
>
|
||||||
@ -198,9 +188,8 @@
|
|||||||
rounded-sm
|
rounded-sm
|
||||||
cursor-pointer
|
cursor-pointer
|
||||||
hover:bg-gray-100
|
hover:bg-gray-100
|
||||||
dark:hover:bg-gray-800
|
|
||||||
"
|
"
|
||||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('bulletList') }"
|
:class="{ 'bg-gray-200': editor.isActive('bulletList') }"
|
||||||
@click="editor.chain().focus().toggleBulletList().run()"
|
@click="editor.chain().focus().toggleBulletList().run()"
|
||||||
>
|
>
|
||||||
<list-ul-icon class="h-3 cursor-pointer fill-current" />
|
<list-ul-icon class="h-3 cursor-pointer fill-current" />
|
||||||
@ -215,9 +204,8 @@
|
|||||||
rounded-sm
|
rounded-sm
|
||||||
cursor-pointer
|
cursor-pointer
|
||||||
hover:bg-gray-100
|
hover:bg-gray-100
|
||||||
dark:hover:bg-gray-800
|
|
||||||
"
|
"
|
||||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('orderedList') }"
|
:class="{ 'bg-gray-200': editor.isActive('orderedList') }"
|
||||||
@click="editor.chain().focus().toggleOrderedList().run()"
|
@click="editor.chain().focus().toggleOrderedList().run()"
|
||||||
>
|
>
|
||||||
<list-icon class="h-3 cursor-pointer fill-current" />
|
<list-icon class="h-3 cursor-pointer fill-current" />
|
||||||
@ -232,9 +220,8 @@
|
|||||||
rounded-sm
|
rounded-sm
|
||||||
cursor-pointer
|
cursor-pointer
|
||||||
hover:bg-gray-100
|
hover:bg-gray-100
|
||||||
dark:hover:bg-gray-800
|
|
||||||
"
|
"
|
||||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('blockquote') }"
|
:class="{ 'bg-gray-200': editor.isActive('blockquote') }"
|
||||||
@click="editor.chain().focus().toggleBlockquote().run()"
|
@click="editor.chain().focus().toggleBlockquote().run()"
|
||||||
>
|
>
|
||||||
<quote-icon class="h-3 cursor-pointer fill-current" />
|
<quote-icon class="h-3 cursor-pointer fill-current" />
|
||||||
@ -249,9 +236,8 @@
|
|||||||
rounded-sm
|
rounded-sm
|
||||||
cursor-pointer
|
cursor-pointer
|
||||||
hover:bg-gray-100
|
hover:bg-gray-100
|
||||||
dark:hover:bg-gray-800
|
|
||||||
"
|
"
|
||||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('codeBlock') }"
|
:class="{ 'bg-gray-200': editor.isActive('codeBlock') }"
|
||||||
@click="editor.chain().focus().toggleCodeBlock().run()"
|
@click="editor.chain().focus().toggleCodeBlock().run()"
|
||||||
>
|
>
|
||||||
<code-block-icon class="h-3 cursor-pointer fill-current" />
|
<code-block-icon class="h-3 cursor-pointer fill-current" />
|
||||||
@ -266,9 +252,8 @@
|
|||||||
rounded-sm
|
rounded-sm
|
||||||
cursor-pointer
|
cursor-pointer
|
||||||
hover:bg-gray-100
|
hover:bg-gray-100
|
||||||
dark:hover:bg-gray-800
|
|
||||||
"
|
"
|
||||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('undo') }"
|
:class="{ 'bg-gray-200': editor.isActive('undo') }"
|
||||||
@click="editor.chain().focus().undo().run()"
|
@click="editor.chain().focus().undo().run()"
|
||||||
>
|
>
|
||||||
<undo-icon class="h-3 cursor-pointer fill-current" />
|
<undo-icon class="h-3 cursor-pointer fill-current" />
|
||||||
@ -283,9 +268,8 @@
|
|||||||
rounded-sm
|
rounded-sm
|
||||||
cursor-pointer
|
cursor-pointer
|
||||||
hover:bg-gray-100
|
hover:bg-gray-100
|
||||||
dark:hover:bg-gray-800
|
|
||||||
"
|
"
|
||||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('redo') }"
|
:class="{ 'bg-gray-200': editor.isActive('redo') }"
|
||||||
@click="editor.chain().focus().redo().run()"
|
@click="editor.chain().focus().redo().run()"
|
||||||
>
|
>
|
||||||
<redo-icon class="h-3 cursor-pointer fill-current" />
|
<redo-icon class="h-3 cursor-pointer fill-current" />
|
||||||
@ -293,7 +277,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</BaseDropdown>
|
</BaseDropdown>
|
||||||
</div>
|
</div>
|
||||||
<div class="hidden p-2 border-b border-gray-200 dark:border-gray-600 md:flex">
|
<div class="hidden p-2 border-b border-gray-200 md:flex">
|
||||||
<div class="flex flex-wrap space-x-1">
|
<div class="flex flex-wrap space-x-1">
|
||||||
<span
|
<span
|
||||||
class="
|
class="
|
||||||
@ -305,9 +289,8 @@
|
|||||||
rounded-sm
|
rounded-sm
|
||||||
cursor-pointer
|
cursor-pointer
|
||||||
hover:bg-gray-100
|
hover:bg-gray-100
|
||||||
dark:hover:bg-gray-800
|
|
||||||
"
|
"
|
||||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('bold') }"
|
:class="{ 'bg-gray-200': editor.isActive('bold') }"
|
||||||
@click="editor.chain().focus().toggleBold().run()"
|
@click="editor.chain().focus().toggleBold().run()"
|
||||||
>
|
>
|
||||||
<bold-icon class="h-3 cursor-pointer fill-current" />
|
<bold-icon class="h-3 cursor-pointer fill-current" />
|
||||||
@ -322,9 +305,8 @@
|
|||||||
rounded-sm
|
rounded-sm
|
||||||
cursor-pointer
|
cursor-pointer
|
||||||
hover:bg-gray-100
|
hover:bg-gray-100
|
||||||
dark:hover:bg-gray-800
|
|
||||||
"
|
"
|
||||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('italic') }"
|
:class="{ 'bg-gray-200': editor.isActive('italic') }"
|
||||||
@click="editor.chain().focus().toggleItalic().run()"
|
@click="editor.chain().focus().toggleItalic().run()"
|
||||||
>
|
>
|
||||||
<italic-icon class="h-3 cursor-pointer fill-current" />
|
<italic-icon class="h-3 cursor-pointer fill-current" />
|
||||||
@ -339,9 +321,8 @@
|
|||||||
rounded-sm
|
rounded-sm
|
||||||
cursor-pointer
|
cursor-pointer
|
||||||
hover:bg-gray-100
|
hover:bg-gray-100
|
||||||
dark:hover:bg-gray-800
|
|
||||||
"
|
"
|
||||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('strike') }"
|
:class="{ 'bg-gray-200': editor.isActive('strike') }"
|
||||||
@click="editor.chain().focus().toggleStrike().run()"
|
@click="editor.chain().focus().toggleStrike().run()"
|
||||||
>
|
>
|
||||||
<strikethrough-icon class="h-3 cursor-pointer fill-current" />
|
<strikethrough-icon class="h-3 cursor-pointer fill-current" />
|
||||||
@ -356,9 +337,8 @@
|
|||||||
rounded-sm
|
rounded-sm
|
||||||
cursor-pointer
|
cursor-pointer
|
||||||
hover:bg-gray-100
|
hover:bg-gray-100
|
||||||
dark:hover:bg-gray-800
|
|
||||||
"
|
"
|
||||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('code') }"
|
:class="{ 'bg-gray-200': editor.isActive('code') }"
|
||||||
@click="editor.chain().focus().toggleCode().run()"
|
@click="editor.chain().focus().toggleCode().run()"
|
||||||
>
|
>
|
||||||
<coding-icon class="h-3 cursor-pointer fill-current" />
|
<coding-icon class="h-3 cursor-pointer fill-current" />
|
||||||
@ -373,9 +353,8 @@
|
|||||||
rounded-sm
|
rounded-sm
|
||||||
cursor-pointer
|
cursor-pointer
|
||||||
hover:bg-gray-100
|
hover:bg-gray-100
|
||||||
dark:hover:bg-gray-800
|
|
||||||
"
|
"
|
||||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('paragraph') }"
|
:class="{ 'bg-gray-200': editor.isActive('paragraph') }"
|
||||||
@click="editor.chain().focus().setParagraph().run()"
|
@click="editor.chain().focus().setParagraph().run()"
|
||||||
>
|
>
|
||||||
<paragraph-icon class="h-3 cursor-pointer fill-current" />
|
<paragraph-icon class="h-3 cursor-pointer fill-current" />
|
||||||
@ -390,9 +369,8 @@
|
|||||||
rounded-sm
|
rounded-sm
|
||||||
cursor-pointer
|
cursor-pointer
|
||||||
hover:bg-gray-100
|
hover:bg-gray-100
|
||||||
dark:hover:bg-gray-800
|
|
||||||
"
|
"
|
||||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('heading', { level: 1 }) }"
|
:class="{ 'bg-gray-200': editor.isActive('heading', { level: 1 }) }"
|
||||||
@click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
|
@click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
|
||||||
>
|
>
|
||||||
H1
|
H1
|
||||||
@ -407,9 +385,8 @@
|
|||||||
rounded-sm
|
rounded-sm
|
||||||
cursor-pointer
|
cursor-pointer
|
||||||
hover:bg-gray-100
|
hover:bg-gray-100
|
||||||
dark:hover:bg-gray-800
|
|
||||||
"
|
"
|
||||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('heading', { level: 2 }) }"
|
:class="{ 'bg-gray-200': editor.isActive('heading', { level: 2 }) }"
|
||||||
@click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
|
@click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
|
||||||
>
|
>
|
||||||
H2
|
H2
|
||||||
@ -424,9 +401,8 @@
|
|||||||
rounded-sm
|
rounded-sm
|
||||||
cursor-pointer
|
cursor-pointer
|
||||||
hover:bg-gray-100
|
hover:bg-gray-100
|
||||||
dark:hover:bg-gray-800
|
|
||||||
"
|
"
|
||||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('heading', { level: 3 }) }"
|
:class="{ 'bg-gray-200': editor.isActive('heading', { level: 3 }) }"
|
||||||
@click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
|
@click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
|
||||||
>
|
>
|
||||||
H3
|
H3
|
||||||
@ -442,9 +418,8 @@
|
|||||||
rounded-sm
|
rounded-sm
|
||||||
cursor-pointer
|
cursor-pointer
|
||||||
hover:bg-gray-100
|
hover:bg-gray-100
|
||||||
dark:hover:bg-gray-800
|
|
||||||
"
|
"
|
||||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('bulletList') }"
|
:class="{ 'bg-gray-200': editor.isActive('bulletList') }"
|
||||||
@click="editor.chain().focus().toggleBulletList().run()"
|
@click="editor.chain().focus().toggleBulletList().run()"
|
||||||
>
|
>
|
||||||
<list-ul-icon class="h-3 cursor-pointer fill-current" />
|
<list-ul-icon class="h-3 cursor-pointer fill-current" />
|
||||||
@ -459,9 +434,8 @@
|
|||||||
rounded-sm
|
rounded-sm
|
||||||
cursor-pointer
|
cursor-pointer
|
||||||
hover:bg-gray-100
|
hover:bg-gray-100
|
||||||
dark:hover:bg-gray-800
|
|
||||||
"
|
"
|
||||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('orderedList') }"
|
:class="{ 'bg-gray-200': editor.isActive('orderedList') }"
|
||||||
@click="editor.chain().focus().toggleOrderedList().run()"
|
@click="editor.chain().focus().toggleOrderedList().run()"
|
||||||
>
|
>
|
||||||
<list-icon class="h-3 cursor-pointer fill-current" />
|
<list-icon class="h-3 cursor-pointer fill-current" />
|
||||||
@ -476,9 +450,8 @@
|
|||||||
rounded-sm
|
rounded-sm
|
||||||
cursor-pointer
|
cursor-pointer
|
||||||
hover:bg-gray-100
|
hover:bg-gray-100
|
||||||
dark:hover:bg-gray-800
|
|
||||||
"
|
"
|
||||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('blockquote') }"
|
:class="{ 'bg-gray-200': editor.isActive('blockquote') }"
|
||||||
@click="editor.chain().focus().toggleBlockquote().run()"
|
@click="editor.chain().focus().toggleBlockquote().run()"
|
||||||
>
|
>
|
||||||
<quote-icon class="h-3 cursor-pointer fill-current" />
|
<quote-icon class="h-3 cursor-pointer fill-current" />
|
||||||
@ -493,9 +466,8 @@
|
|||||||
rounded-sm
|
rounded-sm
|
||||||
cursor-pointer
|
cursor-pointer
|
||||||
hover:bg-gray-100
|
hover:bg-gray-100
|
||||||
dark:hover:bg-gray-800
|
|
||||||
"
|
"
|
||||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('codeBlock') }"
|
:class="{ 'bg-gray-200': editor.isActive('codeBlock') }"
|
||||||
@click="editor.chain().focus().toggleCodeBlock().run()"
|
@click="editor.chain().focus().toggleCodeBlock().run()"
|
||||||
>
|
>
|
||||||
<code-block-icon class="h-3 cursor-pointer fill-current" />
|
<code-block-icon class="h-3 cursor-pointer fill-current" />
|
||||||
@ -510,9 +482,8 @@
|
|||||||
rounded-sm
|
rounded-sm
|
||||||
cursor-pointer
|
cursor-pointer
|
||||||
hover:bg-gray-100
|
hover:bg-gray-100
|
||||||
dark:hover:bg-gray-800
|
|
||||||
"
|
"
|
||||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('undo') }"
|
:class="{ 'bg-gray-200': editor.isActive('undo') }"
|
||||||
@click="editor.chain().focus().undo().run()"
|
@click="editor.chain().focus().undo().run()"
|
||||||
>
|
>
|
||||||
<undo-icon class="h-3 cursor-pointer fill-current" />
|
<undo-icon class="h-3 cursor-pointer fill-current" />
|
||||||
@ -527,9 +498,8 @@
|
|||||||
rounded-sm
|
rounded-sm
|
||||||
cursor-pointer
|
cursor-pointer
|
||||||
hover:bg-gray-100
|
hover:bg-gray-100
|
||||||
dark:hover:bg-gray-800
|
|
||||||
"
|
"
|
||||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('redo') }"
|
:class="{ 'bg-gray-200': editor.isActive('redo') }"
|
||||||
@click="editor.chain().focus().redo().run()"
|
@click="editor.chain().focus().redo().run()"
|
||||||
>
|
>
|
||||||
<redo-icon class="h-3 cursor-pointer fill-current" />
|
<redo-icon class="h-3 cursor-pointer fill-current" />
|
||||||
@ -544,9 +514,8 @@
|
|||||||
rounded-sm
|
rounded-sm
|
||||||
cursor-pointer
|
cursor-pointer
|
||||||
hover:bg-gray-100
|
hover:bg-gray-100
|
||||||
dark:hover:bg-gray-800
|
|
||||||
"
|
"
|
||||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive({ textAlign: 'left' }) }"
|
:class="{ 'bg-gray-200': editor.isActive({ textAlign: 'left' }) }"
|
||||||
@click="editor.chain().focus().setTextAlign('left').run()"
|
@click="editor.chain().focus().setTextAlign('left').run()"
|
||||||
>
|
>
|
||||||
<menu-alt2-icon class="h-5 cursor-pointer fill-current" />
|
<menu-alt2-icon class="h-5 cursor-pointer fill-current" />
|
||||||
@ -561,9 +530,8 @@
|
|||||||
rounded-sm
|
rounded-sm
|
||||||
cursor-pointer
|
cursor-pointer
|
||||||
hover:bg-gray-100
|
hover:bg-gray-100
|
||||||
dark:hover:bg-gray-800
|
|
||||||
"
|
"
|
||||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive({ textAlign: 'right' }) }"
|
:class="{ 'bg-gray-200': editor.isActive({ textAlign: 'right' }) }"
|
||||||
@click="editor.chain().focus().setTextAlign('right').run()"
|
@click="editor.chain().focus().setTextAlign('right').run()"
|
||||||
>
|
>
|
||||||
<menu-alt3-icon class="h-5 cursor-pointer fill-current" />
|
<menu-alt3-icon class="h-5 cursor-pointer fill-current" />
|
||||||
@ -578,10 +546,9 @@
|
|||||||
rounded-sm
|
rounded-sm
|
||||||
cursor-pointer
|
cursor-pointer
|
||||||
hover:bg-gray-100
|
hover:bg-gray-100
|
||||||
dark:hover:bg-gray-800
|
|
||||||
"
|
"
|
||||||
:class="{
|
:class="{
|
||||||
'bg-gray-200 dark:bg-gray-900': editor.isActive({ textAlign: 'justify' }),
|
'bg-gray-200': editor.isActive({ textAlign: 'justify' }),
|
||||||
}"
|
}"
|
||||||
@click="editor.chain().focus().setTextAlign('justify').run()"
|
@click="editor.chain().focus().setTextAlign('justify').run()"
|
||||||
>
|
>
|
||||||
@ -597,9 +564,8 @@
|
|||||||
rounded-sm
|
rounded-sm
|
||||||
cursor-pointer
|
cursor-pointer
|
||||||
hover:bg-gray-100
|
hover:bg-gray-100
|
||||||
dark:hover:bg-gray-800
|
|
||||||
"
|
"
|
||||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive({ textAlign: 'center' }) }"
|
:class="{ 'bg-gray-200': editor.isActive({ textAlign: 'center' }) }"
|
||||||
@click="editor.chain().focus().setTextAlign('center').run()"
|
@click="editor.chain().focus().setTextAlign('center').run()"
|
||||||
>
|
>
|
||||||
<menu-center-icon class="h-5 cursor-pointer fill-current" />
|
<menu-center-icon class="h-5 cursor-pointer fill-current" />
|
||||||
|
|||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user