mirror of
https://github.com/crater-invoice/crater.git
synced 2025-10-28 12:11:08 -04:00
Compare commits
43 Commits
dark-dropd
...
dark-custo
| Author | SHA1 | Date | |
|---|---|---|---|
| 0a1d124633 | |||
| e9abb197b7 | |||
| 6402771cb8 | |||
| 3bb53d2a24 | |||
| feda20431c | |||
| 238cdb3c25 | |||
| 55bf70c868 | |||
| 0c5adff9b4 | |||
| 3d5732ee26 | |||
| 5aa7decdbe | |||
| 5c67780870 | |||
| ba7f619c67 | |||
| 82efad71c0 | |||
| 826ef72faa | |||
| 2adaa7a84a | |||
| 13557ea075 | |||
| ce88c772d1 | |||
| a32d36363d | |||
| f874b3507d | |||
| c36d25931f | |||
| 1e6c3b287f | |||
| 0462ff60a0 | |||
| 29a135adaf | |||
| 1aceb2c672 | |||
| fb9fab641d | |||
| 8f2edc220b | |||
| d14ab013ad | |||
| f6639f5863 | |||
| c5acf1343e | |||
| 0321ca5515 | |||
| bd345949e5 | |||
| b4b00ebdd6 | |||
| 43316dae28 | |||
| 80e2548b38 | |||
| e8d92cd641 | |||
| 2c8bb38531 | |||
| 04c7ae39a2 | |||
| af2482a69c | |||
| cac35826c2 | |||
| 18b5705372 | |||
| c61fbad5ce | |||
| 2e93082282 | |||
| ca55221c4f |
@ -6,8 +6,17 @@
|
||||
|
||||
<script setup>
|
||||
import Chart from 'chart.js'
|
||||
import { ref, reactive, computed, onMounted, watchEffect, inject } from 'vue'
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
computed,
|
||||
onMounted,
|
||||
watchEffect,
|
||||
inject,
|
||||
watch,
|
||||
} from 'vue'
|
||||
import { useCompanyStore } from '@/scripts/admin/stores/company'
|
||||
import { useGlobalStore } from '@/scripts/admin/stores/global'
|
||||
|
||||
const utils = inject('utils')
|
||||
|
||||
@ -44,9 +53,11 @@ const props = defineProps({
|
||||
},
|
||||
})
|
||||
|
||||
const isDarkModeOn = document.documentElement.classList.contains('dark')
|
||||
let myLineChart = null
|
||||
const graph = ref(null)
|
||||
const companyStore = useCompanyStore()
|
||||
const globalStore = useGlobalStore()
|
||||
const defaultCurrency = computed(() => {
|
||||
return companyStore.selectedCompanyCurrency
|
||||
})
|
||||
@ -60,6 +71,14 @@ watchEffect(() => {
|
||||
}
|
||||
})
|
||||
|
||||
watch(
|
||||
() => globalStore.isDarkModeOn,
|
||||
() => {
|
||||
myLineChart.reset()
|
||||
updateColors()
|
||||
}
|
||||
)
|
||||
|
||||
onMounted(() => {
|
||||
let context = graph.value.getContext('2d')
|
||||
let options = reactive({
|
||||
@ -81,6 +100,8 @@ onMounted(() => {
|
||||
},
|
||||
})
|
||||
|
||||
const salesColor = globalStore.isDarkModeOn ? '#ffffff' : '#040405'
|
||||
|
||||
let data = reactive({
|
||||
labels: props.labels,
|
||||
datasets: [
|
||||
@ -89,16 +110,16 @@ onMounted(() => {
|
||||
fill: false,
|
||||
lineTension: 0.3,
|
||||
backgroundColor: 'rgba(230, 254, 249)',
|
||||
borderColor: '#040405',
|
||||
borderColor: salesColor,
|
||||
borderCapStyle: 'butt',
|
||||
borderDash: [],
|
||||
borderDashOffset: 0.0,
|
||||
borderJoinStyle: 'miter',
|
||||
pointBorderColor: '#040405',
|
||||
pointBorderColor: salesColor,
|
||||
pointBackgroundColor: '#fff',
|
||||
pointBorderWidth: 1,
|
||||
pointHoverRadius: 5,
|
||||
pointHoverBackgroundColor: '#040405',
|
||||
pointHoverBackgroundColor: salesColor,
|
||||
pointHoverBorderColor: 'rgba(220,220,220,1)',
|
||||
pointHoverBorderWidth: 2,
|
||||
pointRadius: 4,
|
||||
@ -194,4 +215,12 @@ function update() {
|
||||
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>
|
||||
|
||||
@ -50,21 +50,11 @@
|
||||
</BaseInputGroup>
|
||||
</template>
|
||||
</ValidateEach>
|
||||
<div
|
||||
slot="footer"
|
||||
class="
|
||||
z-0
|
||||
flex
|
||||
justify-end
|
||||
mt-4
|
||||
pt-4
|
||||
border-t border-gray-200 border-solid border-modal-bg
|
||||
"
|
||||
>
|
||||
<BaseModalFooter>
|
||||
<BaseButton :loading="isSaving" variant="primary" type="submit">
|
||||
{{ $t('general.save') }}
|
||||
</BaseButton>
|
||||
</div>
|
||||
</BaseModalFooter>
|
||||
</form>
|
||||
</BaseCard>
|
||||
</template>
|
||||
|
||||
@ -57,9 +57,7 @@
|
||||
</BaseInputGroup>
|
||||
</BaseInputGrid>
|
||||
</div>
|
||||
<div
|
||||
class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
|
||||
>
|
||||
<BaseModalFooter>
|
||||
<BaseButton
|
||||
class="mr-3"
|
||||
variant="primary-outline"
|
||||
@ -84,7 +82,7 @@
|
||||
</template>
|
||||
{{ $t('general.create') }}
|
||||
</BaseButton>
|
||||
</div>
|
||||
</BaseModalFooter>
|
||||
</form>
|
||||
</BaseModal>
|
||||
</template>
|
||||
|
||||
@ -47,15 +47,7 @@
|
||||
</BaseInputGrid>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="
|
||||
z-0
|
||||
flex
|
||||
justify-end
|
||||
p-4
|
||||
border-t border-gray-200 border-solid border-modal-bg
|
||||
"
|
||||
>
|
||||
<BaseModalFooter>
|
||||
<BaseButton
|
||||
type="button"
|
||||
variant="primary-outline"
|
||||
@ -80,7 +72,7 @@
|
||||
</template>
|
||||
{{ categoryStore.isEdit ? $t('general.update') : $t('general.save') }}
|
||||
</BaseButton>
|
||||
</div>
|
||||
</BaseModalFooter>
|
||||
</form>
|
||||
</BaseModal>
|
||||
</template>
|
||||
|
||||
@ -116,7 +116,7 @@
|
||||
</BaseInputGrid>
|
||||
</div>
|
||||
|
||||
<div class="z-0 flex justify-end p-4 bg-gray-50 border-modal-bg">
|
||||
<BaseModalFooter>
|
||||
<BaseButton
|
||||
class="mr-3 text-sm"
|
||||
variant="primary-outline"
|
||||
@ -141,7 +141,7 @@
|
||||
</template>
|
||||
{{ $t('general.save') }}
|
||||
</BaseButton>
|
||||
</div>
|
||||
</BaseModalFooter>
|
||||
</form>
|
||||
</BaseModal>
|
||||
</template>
|
||||
|
||||
@ -425,9 +425,7 @@
|
||||
</BaseTabGroup>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
|
||||
>
|
||||
<BaseModalFooter>
|
||||
<BaseButton
|
||||
class="mr-3 text-sm"
|
||||
type="button"
|
||||
@ -447,7 +445,7 @@
|
||||
</template>
|
||||
{{ $t('general.save') }}
|
||||
</BaseButton>
|
||||
</div>
|
||||
</BaseModalFooter>
|
||||
</form>
|
||||
</BaseModal>
|
||||
</template>
|
||||
|
||||
@ -38,7 +38,7 @@
|
||||
</BaseInputGroup>
|
||||
</div>
|
||||
|
||||
<div class="z-0 flex justify-end p-4 bg-gray-50 border-modal-bg">
|
||||
<BaseModalFooter>
|
||||
<BaseButton
|
||||
class="mr-3 text-sm"
|
||||
variant="primary-outline"
|
||||
@ -63,7 +63,7 @@
|
||||
</template>
|
||||
{{ $t('general.delete') }}
|
||||
</BaseButton>
|
||||
</div>
|
||||
</BaseModalFooter>
|
||||
</form>
|
||||
</BaseModal>
|
||||
</template>
|
||||
|
||||
@ -150,9 +150,7 @@
|
||||
@Remove="removeUsedSelectedCurrencies"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
|
||||
>
|
||||
<BaseModalFooter>
|
||||
<BaseButton
|
||||
class="mr-3"
|
||||
variant="primary-outline"
|
||||
@ -179,7 +177,7 @@
|
||||
exchangeRateStore.isEdit ? $t('general.update') : $t('general.save')
|
||||
}}
|
||||
</BaseButton>
|
||||
</div>
|
||||
</BaseModalFooter>
|
||||
</form>
|
||||
</BaseModal>
|
||||
</template>
|
||||
|
||||
@ -20,15 +20,7 @@
|
||||
@submit="createNewDisk"
|
||||
>
|
||||
<template #default="slotProps">
|
||||
<div
|
||||
class="
|
||||
z-0
|
||||
flex
|
||||
justify-end
|
||||
p-4
|
||||
border-t border-solid border-gray-light
|
||||
"
|
||||
>
|
||||
<BaseModalFooter>
|
||||
<BaseButton
|
||||
class="mr-3 text-sm"
|
||||
variant="primary-outline"
|
||||
@ -52,7 +44,7 @@
|
||||
|
||||
{{ $t('general.save') }}
|
||||
</BaseButton>
|
||||
</div>
|
||||
</BaseModalFooter>
|
||||
</template>
|
||||
</component>
|
||||
</div>
|
||||
|
||||
@ -89,9 +89,7 @@
|
||||
</BaseInputGroup>
|
||||
</BaseInputGrid>
|
||||
</div>
|
||||
<div
|
||||
class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
|
||||
>
|
||||
<BaseModalFooter>
|
||||
<BaseButton
|
||||
class="mr-3"
|
||||
variant="primary-outline"
|
||||
@ -111,7 +109,7 @@
|
||||
</template>
|
||||
{{ itemStore.isEdit ? $t('general.update') : $t('general.save') }}
|
||||
</BaseButton>
|
||||
</div>
|
||||
</BaseModalFooter>
|
||||
</form>
|
||||
</div>
|
||||
</BaseModal>
|
||||
|
||||
@ -31,15 +31,7 @@
|
||||
</BaseInputGroup>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="
|
||||
z-0
|
||||
flex
|
||||
justify-end
|
||||
p-4
|
||||
border-t border-gray-200 border-solid border-modal-bg
|
||||
"
|
||||
>
|
||||
<BaseModalFooter>
|
||||
<BaseButton
|
||||
type="button"
|
||||
variant="primary-outline"
|
||||
@ -66,7 +58,7 @@
|
||||
itemStore.isItemUnitEdit ? $t('general.update') : $t('general.save')
|
||||
}}
|
||||
</BaseButton>
|
||||
</div>
|
||||
</BaseModalFooter>
|
||||
</form>
|
||||
</BaseModal>
|
||||
</template>
|
||||
|
||||
@ -62,9 +62,7 @@
|
||||
</BaseInputGroup>
|
||||
</BaseInputGrid>
|
||||
</div>
|
||||
<div
|
||||
class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
|
||||
>
|
||||
<BaseModalFooter>
|
||||
<BaseButton
|
||||
variant="primary-outline"
|
||||
type="button"
|
||||
@ -84,7 +82,7 @@
|
||||
</template>
|
||||
{{ $t('general.send') }}
|
||||
</BaseButton>
|
||||
</div>
|
||||
</BaseModalFooter>
|
||||
</form>
|
||||
</BaseModal>
|
||||
</template>
|
||||
|
||||
@ -63,16 +63,7 @@
|
||||
</BaseInputGroup>
|
||||
</BaseInputGrid>
|
||||
</div>
|
||||
<div
|
||||
class="
|
||||
z-0
|
||||
flex
|
||||
justify-end
|
||||
px-4
|
||||
py-4
|
||||
border-t border-solid border-gray-light
|
||||
"
|
||||
>
|
||||
<BaseModalFooter>
|
||||
<BaseButton
|
||||
class="mr-2"
|
||||
variant="primary-outline"
|
||||
@ -93,7 +84,7 @@
|
||||
</template>
|
||||
{{ noteStore.isEdit ? $t('general.update') : $t('general.save') }}
|
||||
</BaseButton>
|
||||
</div>
|
||||
</BaseModalFooter>
|
||||
</form>
|
||||
</BaseModal>
|
||||
</template>
|
||||
|
||||
@ -29,9 +29,7 @@
|
||||
</BaseInputGroup>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
|
||||
>
|
||||
<BaseModalFooter>
|
||||
<BaseButton
|
||||
variant="primary-outline"
|
||||
class="mr-3"
|
||||
@ -56,7 +54,7 @@
|
||||
: $t('general.save')
|
||||
}}
|
||||
</BaseButton>
|
||||
</div>
|
||||
</BaseModalFooter>
|
||||
</form>
|
||||
</BaseModal>
|
||||
</template>
|
||||
|
||||
@ -72,7 +72,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border-t border-gray-200 py-3">
|
||||
<div class="border-t border-gray-200 dark:border-gray-600 py-3">
|
||||
<div
|
||||
class="
|
||||
grid grid-cols-1
|
||||
@ -89,7 +89,7 @@
|
||||
:key="gIndex"
|
||||
class="flex flex-col space-y-1"
|
||||
>
|
||||
<p class="text-sm text-gray-500 border-b border-gray-200 pb-1 mb-2">
|
||||
<p class="text-sm text-gray-500 dark:text-gray-200 border-b dark:border-gray-600 pb-1 mb-2">
|
||||
{{ gIndex }}
|
||||
</p>
|
||||
<div
|
||||
@ -116,15 +116,7 @@
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="
|
||||
z-0
|
||||
flex
|
||||
justify-end
|
||||
p-4
|
||||
border-t border-solid border--200 border-modal-bg
|
||||
"
|
||||
>
|
||||
<BaseModalFooter>
|
||||
<BaseButton
|
||||
class="mr-3 text-sm"
|
||||
variant="primary-outline"
|
||||
@ -144,7 +136,7 @@
|
||||
</template>
|
||||
{{ !roleStore.isEdit ? $t('general.save') : $t('general.update') }}
|
||||
</BaseButton>
|
||||
</div>
|
||||
</BaseModalFooter>
|
||||
</form>
|
||||
</BaseModal>
|
||||
</template>
|
||||
|
||||
@ -70,7 +70,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid">
|
||||
<BaseModalFooter>
|
||||
<BaseButton class="mr-3" variant="primary-outline" @click="closeModal">
|
||||
{{ $t('general.cancel') }}
|
||||
</BaseButton>
|
||||
@ -80,7 +80,7 @@
|
||||
</template>
|
||||
{{ $t('general.choose') }}
|
||||
</BaseButton>
|
||||
</div>
|
||||
</BaseModalFooter>
|
||||
</BaseModal>
|
||||
</template>
|
||||
|
||||
|
||||
@ -62,9 +62,7 @@
|
||||
</BaseInputGroup>
|
||||
</BaseInputGrid>
|
||||
</div>
|
||||
<div
|
||||
class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
|
||||
>
|
||||
<BaseModalFooter>
|
||||
<BaseButton
|
||||
class="mr-3"
|
||||
variant="primary-outline"
|
||||
@ -85,7 +83,7 @@
|
||||
<BaseIcon v-if="!isLoading" name="PhotographIcon" class="h-5 mr-2" />
|
||||
{{ $t('general.preview') }}
|
||||
</BaseButton>
|
||||
</div>
|
||||
</BaseModalFooter>
|
||||
</form>
|
||||
<div v-else>
|
||||
<div class="my-6 mx-4 border border-gray-200 relative">
|
||||
@ -106,9 +104,7 @@
|
||||
></iframe>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
|
||||
>
|
||||
<BaseModalFooter>
|
||||
<BaseButton
|
||||
class="mr-3"
|
||||
variant="primary-outline"
|
||||
@ -127,7 +123,7 @@
|
||||
<BaseIcon v-if="!isLoading" name="PaperAirplaneIcon" class="mr-2" />
|
||||
{{ $t('general.send') }}
|
||||
</BaseButton>
|
||||
</div>
|
||||
</BaseModalFooter>
|
||||
</div>
|
||||
</BaseModal>
|
||||
</template>
|
||||
|
||||
@ -65,9 +65,7 @@
|
||||
</BaseInputGroup>
|
||||
</BaseInputGrid>
|
||||
</div>
|
||||
<div
|
||||
class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
|
||||
>
|
||||
<BaseModalFooter>
|
||||
<BaseButton
|
||||
class="mr-3"
|
||||
variant="primary-outline"
|
||||
@ -93,7 +91,7 @@
|
||||
</template>
|
||||
{{ $t('general.preview') }}
|
||||
</BaseButton>
|
||||
</div>
|
||||
</BaseModalFooter>
|
||||
</form>
|
||||
<div v-else>
|
||||
<div class="my-6 mx-4 border border-gray-200 relative">
|
||||
@ -114,9 +112,7 @@
|
||||
style="min-height: 500px"
|
||||
></iframe>
|
||||
</div>
|
||||
<div
|
||||
class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
|
||||
>
|
||||
<BaseModalFooter>
|
||||
<BaseButton
|
||||
class="mr-3"
|
||||
variant="primary-outline"
|
||||
@ -140,7 +136,7 @@
|
||||
/>
|
||||
{{ $t('general.send') }}
|
||||
</BaseButton>
|
||||
</div>
|
||||
</BaseModalFooter>
|
||||
</div>
|
||||
</BaseModal>
|
||||
</template>
|
||||
|
||||
@ -65,9 +65,7 @@
|
||||
</BaseInputGroup>
|
||||
</BaseInputGrid>
|
||||
</div>
|
||||
<div
|
||||
class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
|
||||
>
|
||||
<BaseModalFooter>
|
||||
<BaseButton
|
||||
class="mr-3"
|
||||
variant="primary-outline"
|
||||
@ -93,7 +91,7 @@
|
||||
</template>
|
||||
{{ $t('general.preview') }}
|
||||
</BaseButton>
|
||||
</div>
|
||||
</BaseModalFooter>
|
||||
</form>
|
||||
<div v-else>
|
||||
<div class="my-6 mx-4 border border-gray-200 relative">
|
||||
@ -114,9 +112,7 @@
|
||||
style="min-height: 500px"
|
||||
></iframe>
|
||||
</div>
|
||||
<div
|
||||
class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
|
||||
>
|
||||
<BaseModalFooter>
|
||||
<BaseButton
|
||||
class="mr-3"
|
||||
variant="primary-outline"
|
||||
@ -140,7 +136,7 @@
|
||||
/>
|
||||
{{ $t('general.send') }}
|
||||
</BaseButton>
|
||||
</div>
|
||||
</BaseModalFooter>
|
||||
</div>
|
||||
</BaseModal>
|
||||
</template>
|
||||
|
||||
@ -90,15 +90,7 @@
|
||||
</BaseInputGroup>
|
||||
</BaseInputGrid>
|
||||
</div>
|
||||
<div
|
||||
class="
|
||||
z-0
|
||||
flex
|
||||
justify-end
|
||||
p-4
|
||||
border-t border-solid border--200 border-modal-bg
|
||||
"
|
||||
>
|
||||
<BaseModalFooter>
|
||||
<BaseButton
|
||||
class="mr-3 text-sm"
|
||||
variant="primary-outline"
|
||||
@ -122,7 +114,7 @@
|
||||
</template>
|
||||
{{ taxTypeStore.isEdit ? $t('general.update') : $t('general.save') }}
|
||||
</BaseButton>
|
||||
</div>
|
||||
</BaseModalFooter>
|
||||
</form>
|
||||
</BaseModal>
|
||||
</template>
|
||||
|
||||
@ -87,9 +87,7 @@
|
||||
</BaseInputGrid>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
|
||||
>
|
||||
<BaseModalFooter>
|
||||
<BaseButton
|
||||
class="mr-3 text-sm"
|
||||
type="button"
|
||||
@ -109,7 +107,7 @@
|
||||
</template>
|
||||
{{ $t('general.save') }}
|
||||
</BaseButton>
|
||||
</div>
|
||||
</BaseModalFooter>
|
||||
</form>
|
||||
</BaseModal>
|
||||
</template>
|
||||
|
||||
@ -172,15 +172,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="
|
||||
z-0
|
||||
flex
|
||||
justify-end
|
||||
p-4
|
||||
border-t border-solid border-gray-light border-modal-bg
|
||||
"
|
||||
>
|
||||
<BaseModalFooter>
|
||||
<BaseButton
|
||||
class="mr-3"
|
||||
type="button"
|
||||
@ -207,7 +199,7 @@
|
||||
!customFieldStore.isEdit ? $t('general.save') : $t('general.update')
|
||||
}}
|
||||
</BaseButton>
|
||||
</div>
|
||||
</BaseModalFooter>
|
||||
</form>
|
||||
</BaseModal>
|
||||
</template>
|
||||
|
||||
@ -153,7 +153,7 @@
|
||||
<BaseSwitch v-model="set_as_default" class="flex" />
|
||||
</div>
|
||||
<div class="ml-4 right">
|
||||
<p class="p-0 mb-1 text-base leading-snug text-black box-title">
|
||||
<p class="p-0 mb-1 text-base leading-snug text-black dark:text-white box-title">
|
||||
{{ $t('settings.disk.is_default') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -132,7 +132,7 @@
|
||||
<BaseSwitch v-model="set_as_default" class="flex" />
|
||||
</div>
|
||||
<div class="ml-4 right">
|
||||
<p class="p-0 mb-1 text-base leading-snug text-black box-title">
|
||||
<p class="p-0 mb-1 text-base leading-snug text-black dark:text-white box-title">
|
||||
{{ $t('settings.disk.is_default') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -63,7 +63,7 @@
|
||||
</div>
|
||||
|
||||
<div class="ml-4 right">
|
||||
<p class="p-0 mb-1 text-base leading-snug text-black box-title">
|
||||
<p class="p-0 mb-1 text-base leading-snug text-black dark:text-white box-title">
|
||||
{{ $t('settings.disk.is_default') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -134,7 +134,7 @@
|
||||
<BaseSwitch v-model="set_as_default" class="flex" />
|
||||
</div>
|
||||
<div class="ml-4 right">
|
||||
<p class="p-0 mb-1 text-base leading-snug text-black box-title">
|
||||
<p class="p-0 mb-1 text-base leading-snug text-black dark:text-white box-title">
|
||||
{{ $t('settings.disk.is_default') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -2,8 +2,23 @@
|
||||
<div>
|
||||
<div
|
||||
v-if="dashboardStore.isDashboardDataLoaded"
|
||||
class="grid grid-cols-10 mt-8 bg-white rounded shadow"
|
||||
class="
|
||||
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 -->
|
||||
<div
|
||||
class="
|
||||
@ -54,6 +69,7 @@
|
||||
lg:border-t-0 lg:text-right lg:col-span-3
|
||||
xl:col-span-2
|
||||
lg:grid-cols-1
|
||||
dark:border-white/10
|
||||
"
|
||||
>
|
||||
<div class="p-6">
|
||||
@ -96,15 +112,7 @@
|
||||
</span>
|
||||
<br />
|
||||
<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
|
||||
:amount="dashboardStore.totalExpenses"
|
||||
@ -116,8 +124,10 @@
|
||||
class="
|
||||
col-span-3
|
||||
p-6
|
||||
border-t border-gray-200 border-solid
|
||||
border-t
|
||||
border-gray-200 border-solid
|
||||
lg:col-span-1
|
||||
dark:border-white/10
|
||||
"
|
||||
>
|
||||
<span class="text-xs leading-5 lg:text-sm">
|
||||
@ -132,7 +142,7 @@
|
||||
font-semibold
|
||||
leading-8
|
||||
lg:text-2xl
|
||||
text-primary-500
|
||||
text-primary-500 dark:text-primary-400
|
||||
"
|
||||
>
|
||||
<BaseFormatMoney
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<BaseContentPlaceholders
|
||||
class="grid grid-cols-10 mt-8 bg-white rounded shadow"
|
||||
class="grid grid-cols-10 mt-8 bg-white rounded shadow dark:bg-gray-800"
|
||||
>
|
||||
<!-- Chart -->
|
||||
<div
|
||||
@ -29,6 +29,7 @@
|
||||
text-center
|
||||
border-t border-l border-gray-200 border-solid
|
||||
lg:border-t-0 lg:text-right lg:col-span-3
|
||||
dark:border-gray-600
|
||||
xl:col-span-2
|
||||
lg:grid-cols-1
|
||||
"
|
||||
@ -77,6 +78,7 @@
|
||||
col-span-3
|
||||
p-6
|
||||
border-t border-gray-200 border-solid
|
||||
dark:border-gray-600
|
||||
lg:justify-end lg:items-end lg:col-span-1
|
||||
"
|
||||
>
|
||||
|
||||
@ -12,18 +12,24 @@
|
||||
hover:bg-gray-50
|
||||
xl:p-4
|
||||
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 }"
|
||||
:to="route"
|
||||
>
|
||||
<div>
|
||||
<span class="text-xl font-semibold leading-tight text-black xl:text-3xl">
|
||||
<span class="text-xl font-semibold leading-tight text-black xl:text-3xl dark:text-white">
|
||||
<slot />
|
||||
</span>
|
||||
<span class="block mt-1 text-sm leading-tight text-gray-500 xl:text-lg">
|
||||
<span class="block mt-1 text-sm leading-tight text-gray-500 xl:text-lg dark:text-gray-300">
|
||||
{{ label }}
|
||||
</span>
|
||||
</div>
|
||||
<BaseDarkHighlight class="!bg-highlight/[.17] !top-5" />
|
||||
<div class="flex items-center">
|
||||
<component :is="iconComponent" class="w-10 h-10 xl:w-12 xl:h-12" />
|
||||
</div>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<BaseContentPlaceholders
|
||||
:rounded="true"
|
||||
class="relative flex justify-between w-full p-3 bg-white rounded shadow lg:col-span-3 xl:p-4"
|
||||
class="relative flex justify-between w-full p-3 bg-white rounded shadow lg:col-span-3 xl:p-4 dark:bg-gray-800"
|
||||
>
|
||||
<div>
|
||||
<BaseContentPlaceholdersText
|
||||
|
||||
@ -12,6 +12,7 @@
|
||||
shadow
|
||||
lg:col-span-2
|
||||
xl:p-4
|
||||
dark:bg-gray-800
|
||||
"
|
||||
>
|
||||
<div>
|
||||
|
||||
@ -130,6 +130,7 @@
|
||||
mt-5
|
||||
list-none
|
||||
border-b-2 border-gray-200 border-solid
|
||||
dark:border-gray-600
|
||||
"
|
||||
>
|
||||
<!-- Tabs -->
|
||||
|
||||
@ -127,6 +127,7 @@
|
||||
mt-5
|
||||
list-none
|
||||
border-b-2 border-gray-200 border-solid
|
||||
dark:border-gray-600
|
||||
"
|
||||
>
|
||||
<!-- Tabs -->
|
||||
|
||||
@ -121,6 +121,7 @@
|
||||
mt-5
|
||||
list-none
|
||||
border-b-2 border-gray-200 border-solid
|
||||
dark:border-gray-600
|
||||
"
|
||||
>
|
||||
<!-- Tabs -->
|
||||
|
||||
@ -113,10 +113,10 @@
|
||||
|
||||
<div v-if="companyStore.companies.length !== 1" class="py-5">
|
||||
<BaseDivider class="my-4" />
|
||||
<h3 class="text-lg leading-6 font-medium text-gray-900">
|
||||
<h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">
|
||||
{{ $tc('settings.company_info.delete_company') }}
|
||||
</h3>
|
||||
<div class="mt-2 max-w-xl text-sm text-gray-500">
|
||||
<div class="mt-2 max-w-xl text-sm text-gray-500 dark:text-gray-400">
|
||||
<p>
|
||||
{{ $tc('settings.company_info.delete_company_description') }}
|
||||
</p>
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
{{ $t('settings.menu_title.exchange_rate') }}
|
||||
</h6>
|
||||
<p
|
||||
class="mt-2 text-sm leading-snug text-left text-gray-500"
|
||||
class="mt-2 text-sm leading-snug text-left text-gray-500 dark:text-gray-400"
|
||||
style="max-width: 680px"
|
||||
>
|
||||
{{ $t('settings.exchange_rate.providers_description') }}
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<h6 class="text-gray-900 text-lg font-medium">
|
||||
{{ $t(`settings.customization.${type}s.${type}_number_format`) }}
|
||||
</h6>
|
||||
<p class="mt-1 text-sm text-gray-500">
|
||||
{{
|
||||
<BaseHeading
|
||||
type="heading-title"
|
||||
:subtitle="
|
||||
$t(`settings.customization.${type}s.${type}_number_format_description`)
|
||||
}}
|
||||
</p>
|
||||
"
|
||||
>
|
||||
{{ $t(`settings.customization.${type}s.${type}_number_format`) }}
|
||||
</BaseHeading>
|
||||
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full mt-6 table-fixed">
|
||||
@ -29,6 +29,7 @@
|
||||
leading-5
|
||||
text-left text-gray-700
|
||||
border-t border-b border-gray-200 border-solid
|
||||
dark:border-gray-600
|
||||
"
|
||||
></th>
|
||||
<th
|
||||
@ -41,6 +42,7 @@
|
||||
leading-5
|
||||
text-left text-gray-700
|
||||
border-t border-b border-gray-200 border-solid
|
||||
dark:text-gray-300 dark:border-gray-600
|
||||
"
|
||||
>
|
||||
Component
|
||||
@ -55,6 +57,7 @@
|
||||
leading-5
|
||||
text-left text-gray-700
|
||||
border-t border-b border-gray-200 border-solid
|
||||
dark:text-gray-300 dark:border-gray-600
|
||||
"
|
||||
>
|
||||
Parameter
|
||||
@ -69,13 +72,14 @@
|
||||
leading-5
|
||||
text-left text-gray-700
|
||||
border-t border-b border-gray-200 border-solid
|
||||
dark:border-gray-600
|
||||
"
|
||||
></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<draggable
|
||||
v-model="selectedFields"
|
||||
class="divide-y divide-gray-200"
|
||||
class="divide-y divide-gray-200 dark:divide-gray-600"
|
||||
item-key="id"
|
||||
tag="tbody"
|
||||
handle=".handle"
|
||||
@ -97,12 +101,13 @@
|
||||
whitespace-nowrap
|
||||
mr-2
|
||||
min-w-[200px]
|
||||
dark:text-primary-400
|
||||
"
|
||||
>
|
||||
{{ element.label }}
|
||||
</label>
|
||||
|
||||
<p class="text-xs text-gray-500 mt-1">
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
|
||||
{{ element.description }}
|
||||
</p>
|
||||
</td>
|
||||
|
||||
@ -1,10 +1,12 @@
|
||||
<template>
|
||||
<h6 class="text-gray-900 text-lg font-medium">
|
||||
<BaseHeading
|
||||
type="heading-title"
|
||||
:subtitle="
|
||||
$t('settings.customization.estimates.convert_estimate_description')
|
||||
"
|
||||
>
|
||||
{{ $tc('settings.customization.estimates.convert_estimate_options') }}
|
||||
</h6>
|
||||
<p class="mt-1 text-sm text-gray-500">
|
||||
{{ $t('settings.customization.estimates.convert_estimate_description') }}
|
||||
</p>
|
||||
</BaseHeading>
|
||||
|
||||
<BaseInputGroup required>
|
||||
<BaseRadio
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
<template>
|
||||
<form @submit.prevent="submitForm">
|
||||
<h6 class="text-gray-900 text-lg font-medium">
|
||||
<BaseHeading
|
||||
type="heading-title"
|
||||
:subtitle="
|
||||
$t('settings.customization.estimates.default_formats_description')
|
||||
"
|
||||
>
|
||||
{{ $t('settings.customization.estimates.default_formats') }}
|
||||
</h6>
|
||||
<p class="mt-1 text-sm text-gray-500 mb-2">
|
||||
{{ $t('settings.customization.estimates.default_formats_description') }}
|
||||
</p>
|
||||
</BaseHeading>
|
||||
|
||||
<BaseInputGroup
|
||||
:label="
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
<template>
|
||||
<form @submit.prevent="submitForm">
|
||||
<h6 class="text-gray-900 text-lg font-medium">
|
||||
<BaseHeading
|
||||
type="heading-title"
|
||||
:subtitle="
|
||||
$t('settings.customization.estimates.expiry_date_description')
|
||||
"
|
||||
>
|
||||
{{ $t('settings.customization.estimates.expiry_date') }}
|
||||
</h6>
|
||||
<p class="mt-1 text-sm text-gray-500 mb-2">
|
||||
{{ $t('settings.customization.estimates.expiry_date_description') }}
|
||||
</p>
|
||||
</BaseHeading>
|
||||
|
||||
<BaseSwitchSection
|
||||
v-model="expiryDateAutoField"
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
<template>
|
||||
<form @submit.prevent="submitForm">
|
||||
<h6 class="text-gray-900 text-lg font-medium">
|
||||
<BaseHeading
|
||||
type="heading-title"
|
||||
:subtitle="
|
||||
$t('settings.customization.invoices.default_formats_description')
|
||||
"
|
||||
>
|
||||
{{ $t('settings.customization.invoices.default_formats') }}
|
||||
</h6>
|
||||
<p class="mt-1 text-sm text-gray-500 mb-2">
|
||||
{{ $t('settings.customization.invoices.default_formats_description') }}
|
||||
</p>
|
||||
</BaseHeading>
|
||||
|
||||
<BaseInputGroup
|
||||
:label="$t('settings.customization.invoices.default_invoice_email_body')"
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
<template>
|
||||
<form @submit.prevent="submitForm">
|
||||
<h6 class="text-gray-900 text-lg font-medium">
|
||||
<BaseHeading
|
||||
type="heading-title"
|
||||
:subtitle="
|
||||
$t('settings.customization.invoices.due_date_description')
|
||||
"
|
||||
>
|
||||
{{ $t('settings.customization.invoices.due_date') }}
|
||||
</h6>
|
||||
<p class="mt-1 text-sm text-gray-500 mb-2">
|
||||
{{ $t('settings.customization.invoices.due_date_description') }}
|
||||
</p>
|
||||
</BaseHeading>
|
||||
|
||||
<BaseSwitchSection
|
||||
v-model="dueDateAutoField"
|
||||
|
||||
@ -1,10 +1,12 @@
|
||||
<template>
|
||||
<h6 class="text-gray-900 text-lg font-medium">
|
||||
<BaseHeading
|
||||
type="heading-title"
|
||||
:subtitle="
|
||||
$t('settings.customization.invoices.retrospective_edits_description')
|
||||
"
|
||||
>
|
||||
{{ $tc('settings.customization.invoices.retrospective_edits') }}
|
||||
</h6>
|
||||
<p class="mt-1 text-sm text-gray-500">
|
||||
{{ $t('settings.customization.invoices.retrospective_edits_description') }}
|
||||
</p>
|
||||
</BaseHeading>
|
||||
|
||||
<BaseInputGroup required>
|
||||
<BaseRadio
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
<template>
|
||||
<form @submit.prevent="submitForm">
|
||||
<h6 class="text-gray-900 text-lg font-medium">
|
||||
<BaseHeading
|
||||
type="heading-title"
|
||||
:subtitle="
|
||||
$t('settings.customization.payments.default_formats_description')
|
||||
"
|
||||
>
|
||||
{{ $t('settings.customization.payments.default_formats') }}
|
||||
</h6>
|
||||
<p class="mt-1 text-sm text-gray-500 mb-2">
|
||||
{{ $t('settings.customization.payments.default_formats_description') }}
|
||||
</p>
|
||||
</BaseHeading>
|
||||
|
||||
<BaseInputGroup
|
||||
:label="$t('settings.customization.payments.default_payment_email_body')"
|
||||
|
||||
@ -141,6 +141,7 @@
|
||||
bg-gray-200
|
||||
rounded-full
|
||||
text-primary-500
|
||||
dark:bg-gray-600
|
||||
"
|
||||
>
|
||||
{{ initGenerator(user.name) }}
|
||||
|
||||
@ -437,21 +437,22 @@ export default {
|
||||
required: false,
|
||||
default: () => ({
|
||||
container:
|
||||
'p-0 relative mx-auto w-full flex items-center justify-end box-border cursor-pointer border border-gray-200 rounded-md bg-white text-sm leading-snug outline-none max-h-10',
|
||||
'p-0 relative mx-auto w-full flex items-center justify-end box-border cursor-pointer border border-gray-200 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-sm leading-snug outline-none max-h-10',
|
||||
containerDisabled:
|
||||
'cursor-default bg-gray-200 bg-opacity-50 !text-gray-400',
|
||||
'bg-gray-200 bg-opacity-50 !text-gray-400 dark:!text-gray-800 !dark:text-gray-500 !cursor-default dark:opacity-25',
|
||||
containerOpen: '',
|
||||
containerOpenTop: '',
|
||||
containerActive: 'ring-1 ring-primary-400 border-primary-400',
|
||||
containerInvalid:
|
||||
'border-red-400 ring-red-400 focus:ring-red-400 focus:border-red-400',
|
||||
containerInvalidActive: 'ring-1 border-red-400 ring-red-400',
|
||||
'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',
|
||||
containerInvalidActive:
|
||||
'ring-1 border-red-500 ring-red-500 dark:ring-1 dark:border-red-500 dark:ring-red-500',
|
||||
singleLabel:
|
||||
'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5',
|
||||
'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 dark:text-white',
|
||||
multipleLabel:
|
||||
'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5',
|
||||
'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 dark:text-white',
|
||||
search:
|
||||
'w-full absolute inset-0 outline-none appearance-none box-border border-0 text-sm font-sans bg-white rounded-md pl-3.5',
|
||||
'w-full absolute inset-0 outline-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',
|
||||
tags: 'grow shrink flex flex-wrap mt-1 pl-2',
|
||||
tag: 'bg-primary-500 text-white text-sm font-semibold py-0.5 pl-2 rounded mr-1 mb-1 flex items-center whitespace-nowrap',
|
||||
tagDisabled: 'pr-2 !bg-gray-400 text-white',
|
||||
@ -461,12 +462,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',
|
||||
tagsSearchWrapper: 'inline-block relative mx-1 mb-1 grow shrink h-full',
|
||||
tagsSearch:
|
||||
'absolute inset-0 border-0 focus:outline-none !shadow-none !focus:shadow-none appearance-none p-0 text-sm font-sans box-border w-full',
|
||||
'absolute inset-0 border-0 focus:outline-none !shadow-none !focus:shadow-none appearance-none p-0 sm:text-sm font-sans box-border w-full dark:bg-gray-700',
|
||||
tagsSearchCopy: 'invisible whitespace-pre-wrap inline-block h-px',
|
||||
placeholder:
|
||||
'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 text-gray-400 text-sm',
|
||||
'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',
|
||||
caret:
|
||||
'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',
|
||||
'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',
|
||||
caretOpen: 'rotate-180 pointer-events-auto',
|
||||
clear:
|
||||
'pr-3.5 relative z-10 opacity-40 transition duration-300 shrink-0 grow-0 flex hover:opacity-80',
|
||||
@ -475,7 +476,7 @@ export default {
|
||||
spinner:
|
||||
'bg-multiselect-spinner bg-center bg-no-repeat w-4 h-4 z-10 mr-3.5 animate-spin shrink-0 grow-0',
|
||||
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 flex flex-col rounded-md',
|
||||
'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',
|
||||
dropdownTop:
|
||||
'-translate-y-full -top-2 bottom-auto flex-col-reverse rounded-md',
|
||||
dropdownHidden: 'hidden',
|
||||
@ -483,7 +484,7 @@ export default {
|
||||
optionsTop: 'flex-col-reverse',
|
||||
group: 'p-0 m-0',
|
||||
groupLabel:
|
||||
'flex text-sm box-border items-center justify-start text-left py-1 px-3 font-semibold bg-gray-200 cursor-default leading-normal',
|
||||
'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',
|
||||
groupLabelPointable: 'cursor-pointer',
|
||||
groupLabelPointed: 'bg-gray-300 text-gray-700',
|
||||
groupLabelSelected: 'bg-primary-600 text-white',
|
||||
@ -493,15 +494,18 @@ export default {
|
||||
'text-primary-100 bg-primary-600 bg-opacity-50 cursor-not-allowed',
|
||||
groupOptions: 'p-0 m-0',
|
||||
option:
|
||||
'flex items-center justify-start box-border text-left cursor-pointer text-sm leading-snug py-2 px-3',
|
||||
optionPointed: 'text-gray-800 bg-gray-100',
|
||||
'flex items-center justify-start box-border text-left cursor-pointer text-sm leading-snug py-2 px-3 dark:text-gray-200',
|
||||
optionPointed:
|
||||
'text-gray-800 bg-gray-100 dark:text-white dark:bg-gray-700/30',
|
||||
optionSelected: 'text-white bg-primary-500',
|
||||
optionDisabled: 'text-gray-300 cursor-not-allowed',
|
||||
optionDisabled: 'text-gray-300 cursor-not-allowed dark:text-gray-400',
|
||||
optionSelectedPointed: 'text-white bg-primary-500 opacity-90',
|
||||
optionSelectedDisabled:
|
||||
'text-primary-100 bg-primary-500 bg-opacity-50 cursor-not-allowed',
|
||||
noOptions: 'py-2 px-3 text-gray-600 bg-white',
|
||||
noResults: 'py-2 px-3 text-gray-600 bg-white',
|
||||
noOptions:
|
||||
'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 dark:bg-gray-700 dark:text-gray-200',
|
||||
fakeInput:
|
||||
'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',
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<nav>
|
||||
<ol class="flex flex-wrap py-4 text-gray-900 rounded list-reset">
|
||||
<ol class="flex flex-wrap py-4 text-gray-900 rounded list-reset dark:text-gray-400">
|
||||
<slot />
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
@ -8,7 +8,9 @@
|
||||
font-medium
|
||||
leading-5
|
||||
text-gray-900
|
||||
dark:text-gray-400
|
||||
outline-none
|
||||
dark:focus:ring-offset-gray-900
|
||||
focus:ring-2 focus:ring-offset-2 focus:ring-primary-400
|
||||
"
|
||||
:to="to"
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue'
|
||||
import SpinnerIcon from '@/scripts/components/icons/SpinnerIcon.vue'
|
||||
|
||||
const props = defineProps({
|
||||
contentLoading: {
|
||||
type: Boolean,
|
||||
@ -9,7 +10,7 @@ const props = defineProps({
|
||||
defaultClass: {
|
||||
type: String,
|
||||
default:
|
||||
'inline-flex whitespace-nowrap items-center border font-medium focus:outline-none focus:ring-2 focus:ring-offset-2',
|
||||
'inline-flex whitespace-nowrap items-center border font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-800',
|
||||
},
|
||||
tag: {
|
||||
type: String,
|
||||
@ -27,6 +28,10 @@ const props = defineProps({
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
loadingRight: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: 'md',
|
||||
@ -81,17 +86,17 @@ const placeHolderSize = computed(() => {
|
||||
|
||||
const variantClass = computed(() => {
|
||||
return {
|
||||
'border-transparent shadow-sm text-white bg-primary-600 hover:bg-primary-700 focus:ring-primary-500':
|
||||
'border-transparent shadow-sm text-white bg-primary-600 hover:bg-primary-700 focus:ring-primary-500 dark:bg-primary-500 dark:hover:bg-primary-600':
|
||||
props.variant === 'primary',
|
||||
'border-transparent text-primary-700 bg-primary-100 hover:bg-primary-200 focus:ring-primary-500':
|
||||
props.variant === 'secondary',
|
||||
'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':
|
||||
'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':
|
||||
props.variant == 'primary-outline',
|
||||
'border-gray-200 text-gray-700 bg-white hover:bg-gray-50 focus:ring-primary-500 focus:ring-offset-0':
|
||||
'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':
|
||||
props.variant == 'white',
|
||||
'border-transparent shadow-sm text-white bg-red-600 hover:bg-red-700 focus:ring-red-500':
|
||||
props.variant === 'danger',
|
||||
'border-transparent bg-gray-200 border hover:bg-opacity-60 focus:ring-gray-500 focus:ring-offset-0':
|
||||
'border-transparent bg-gray-200 border hover:bg-opacity-60 focus:ring-gray-500 focus:ring-offset-0 dark:bg-gray-600 dark:text-white dark:hover:bg-opacity-60':
|
||||
props.variant === 'gray',
|
||||
}
|
||||
})
|
||||
@ -124,6 +129,13 @@ const iconRightClass = computed(() => {
|
||||
'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>
|
||||
|
||||
<template>
|
||||
@ -141,15 +153,17 @@ const iconRightClass = computed(() => {
|
||||
<BaseCustomTag
|
||||
v-else
|
||||
:tag="tag"
|
||||
:disabled="disabled"
|
||||
:class="[defaultClass, sizeClass, variantClass, roundedClass]"
|
||||
:disabled="disabled || loading"
|
||||
:class="[defaultClass, sizeClass, variantClass, roundedClass, buttonDisabledClass]"
|
||||
>
|
||||
<SpinnerIcon v-if="loading" :class="[iconLeftClass, iconVariantClass]" />
|
||||
<SpinnerIcon v-if="loading && !loadingRight" :class="[iconLeftClass, iconVariantClass]" />
|
||||
|
||||
<slot v-else name="left" :class="iconLeftClass"></slot>
|
||||
<slot v-else name="left" :class="iconLeftClass" />
|
||||
|
||||
<slot />
|
||||
|
||||
<slot name="right" :class="[iconRightClass, iconVariantClass]"></slot>
|
||||
<SpinnerIcon v-if="loading && loadingRight" :class="[iconRightClass, iconVariantClass]" />
|
||||
|
||||
<slot v-else name="right" :class="[iconRightClass, iconVariantClass]" />
|
||||
</BaseCustomTag>
|
||||
</template>
|
||||
|
||||
@ -1,5 +1,9 @@
|
||||
<template>
|
||||
<div class="bg-white rounded-lg shadow">
|
||||
<div
|
||||
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
|
||||
v-if="hasHeaderSlot"
|
||||
class="px-5 py-4 text-black border-b border-gray-100 border-solid"
|
||||
|
||||
@ -15,12 +15,12 @@
|
||||
v-if="label"
|
||||
:for="id"
|
||||
:class="`font-medium ${
|
||||
disabled ? 'text-gray-400 cursor-not-allowed' : 'text-gray-600'
|
||||
disabled ? 'text-gray-400 cursor-not-allowed' : 'text-gray-600 dark:text-white'
|
||||
} cursor-pointer `"
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
<p v-if="description" class="text-gray-500">{{ description }}</p>
|
||||
<p v-if="description" class="text-gray-500 dark:text-gray-400">{{ description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -51,7 +51,7 @@ const props = defineProps({
|
||||
},
|
||||
checkboxClass: {
|
||||
type: String,
|
||||
default: 'w-4 h-4 border-gray-300 rounded cursor-pointer',
|
||||
default: 'w-4 h-4 border-gray-300 rounded cursor-pointer dark:bg-gray-600 dark:border-gray-500',
|
||||
},
|
||||
setInitialValue: {
|
||||
type: Boolean,
|
||||
|
||||
@ -39,6 +39,8 @@ $base-content-placeholders-border-radius: 6px !default;
|
||||
$base-content-placeholders-line-height: 15px !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
|
||||
@keyframes vueContentPlaceholdersAnimation {
|
||||
0% {
|
||||
@ -57,6 +59,10 @@ $base-content-placeholders-spacing: 10px !default;
|
||||
min-height: $base-content-placeholders-line-height;
|
||||
background: $base-content-placeholders-secondary-color;
|
||||
|
||||
.dark & {
|
||||
background: $base-content-placeholders-secondary-color-dark;
|
||||
}
|
||||
|
||||
.base-content-placeholders-is-rounded & {
|
||||
border-radius: $base-content-placeholders-border-radius;
|
||||
}
|
||||
@ -86,6 +92,15 @@ $base-content-placeholders-spacing: 10px !default;
|
||||
animation-name: vueContentPlaceholdersAnimation;
|
||||
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 {
|
||||
@ -156,6 +171,10 @@ $base-content-placeholders-spacing: 10px !default;
|
||||
min-height: $base-content-placeholders-line-height;
|
||||
background: $base-content-placeholders-secondary-color;
|
||||
|
||||
.dark & {
|
||||
background: $base-content-placeholders-secondary-color-dark;
|
||||
}
|
||||
|
||||
.base-content-placeholders-is-animated &::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
@ -177,6 +196,14 @@ $base-content-placeholders-spacing: 10px !default;
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
@ -40,6 +40,7 @@
|
||||
font-normal
|
||||
cursor-pointer
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-700/60
|
||||
rounded
|
||||
ml-1
|
||||
py-0.5
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="address"
|
||||
class="text-sm font-bold leading-5 text-black non-italic space-y-1"
|
||||
class="text-sm font-bold leading-5 text-black non-italic space-y-1 dark:text-white"
|
||||
>
|
||||
<p v-if="address?.address_street_1">{{ address?.address_street_1 }},</p>
|
||||
|
||||
|
||||
@ -20,6 +20,7 @@
|
||||
border border-gray-200 border-solid
|
||||
min-h-[170px]
|
||||
rounded-md
|
||||
dark:border-white/10 dark:bg-gray-800/50
|
||||
"
|
||||
@click.stop
|
||||
>
|
||||
@ -27,7 +28,7 @@
|
||||
<BaseText
|
||||
:text="selectedCustomer.name"
|
||||
:length="30"
|
||||
class="flex-1 text-base font-medium text-left text-gray-900"
|
||||
class="flex-1 text-base font-medium text-left text-gray-900 dark:text-white"
|
||||
/>
|
||||
<div class="flex">
|
||||
<a
|
||||
@ -192,6 +193,7 @@
|
||||
border border-gray-200 border-solid
|
||||
rounded-md
|
||||
min-h-[170px]
|
||||
dark:border-white/10 dark:bg-gray-700/60 dark:text-white
|
||||
"
|
||||
>
|
||||
<BaseIcon
|
||||
@ -207,11 +209,12 @@
|
||||
bg-gray-200
|
||||
rounded-full
|
||||
font-base
|
||||
dark:bg-gray-700
|
||||
"
|
||||
/>
|
||||
|
||||
<div class="mt-1">
|
||||
<label class="text-lg font-medium text-gray-900">
|
||||
<label class="text-lg font-medium text-gray-900 dark:text-white">
|
||||
{{ $t('customers.new_customer') }}
|
||||
<span class="text-red-500"> * </span>
|
||||
</label>
|
||||
@ -246,6 +249,11 @@
|
||||
shadow-lg
|
||||
ring-1 ring-black ring-opacity-5
|
||||
bg-white
|
||||
dark:border
|
||||
dark:border-white/10
|
||||
dark:bg-gray-800
|
||||
dark:text-white
|
||||
dark:shadow-glass
|
||||
"
|
||||
>
|
||||
<div class="relative">
|
||||
@ -265,6 +273,7 @@
|
||||
overflow-auto
|
||||
list
|
||||
border-t border-gray-200
|
||||
dark:border-white/10
|
||||
"
|
||||
>
|
||||
<li
|
||||
@ -280,6 +289,7 @@
|
||||
hover:cursor-pointer hover:bg-gray-100
|
||||
focus:outline-none focus:bg-gray-100
|
||||
last:border-b-0
|
||||
dark:border-white/10 dark:hover:bg-gray-700/30
|
||||
"
|
||||
@click="selectNewCustomer(customer.id, close)"
|
||||
>
|
||||
@ -299,6 +309,7 @@
|
||||
bg-gray-300
|
||||
rounded-full
|
||||
avatar
|
||||
dark:bg-gray-600
|
||||
"
|
||||
>
|
||||
{{ initGenerator(customer.name) }}
|
||||
@ -333,9 +344,9 @@
|
||||
</li>
|
||||
<div
|
||||
v-if="customerStore.customers.length === 0"
|
||||
class="flex justify-center p-5 text-gray-400"
|
||||
class="flex justify-center p-5 text-gray-400 dark:text-gray-300"
|
||||
>
|
||||
<label class="text-base text-gray-500 cursor-pointer">
|
||||
<label class="text-base text-gray-500 cursor-pointer dark:text-gray-300">
|
||||
{{ $t('customers.no_customers_found') }}
|
||||
</label>
|
||||
</div>
|
||||
@ -357,6 +368,10 @@
|
||||
border-none
|
||||
outline-none
|
||||
focus:bg-gray-300
|
||||
dark:bg-gray-600/70
|
||||
dark:shadow-glass
|
||||
dark:backdrop-blur-xl
|
||||
dark:hover:bg-gray-600/80
|
||||
"
|
||||
@click="openCustomerModal"
|
||||
>
|
||||
|
||||
21
resources/scripts/components/base/BaseDarkHighlight.vue
Normal file
21
resources/scripts/components/base/BaseDarkHighlight.vue
Normal file
@ -0,0 +1,21 @@
|
||||
<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 }}
|
||||
</BaseLabel>
|
||||
|
||||
<p class="text-sm font-bold leading-5 text-black non-italic">
|
||||
<p class="text-sm font-bold leading-5 text-black non-italic dark:text-white">
|
||||
{{ value }}
|
||||
|
||||
<slot />
|
||||
|
||||
@ -30,8 +30,13 @@
|
||||
leave-to="opacity-0"
|
||||
>
|
||||
<DialogOverlay
|
||||
class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75"
|
||||
class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75 dark:backdrop-blur-xl dark:bg-gray-900/80"
|
||||
>
|
||||
<BaseDarkHighlight
|
||||
class="!bg-highlight/[.17] !top-1/2 h-60 -translate-y-1/2 mt-5"
|
||||
:class="dialogSizeClasses"
|
||||
/>
|
||||
</DialogOverlay>
|
||||
</TransitionChild>
|
||||
|
||||
<!-- This element is to trick the browser into centering the modal contents. -->
|
||||
@ -64,6 +69,11 @@
|
||||
shadow-xl
|
||||
sm:my-8 sm:align-middle sm:w-full sm:p-6
|
||||
relative
|
||||
dark:backdrop-blur-xl
|
||||
dark:shadow-glass
|
||||
dark:border
|
||||
dark:border-white/10
|
||||
dark:bg-gray-800
|
||||
"
|
||||
:class="dialogSizeClasses"
|
||||
>
|
||||
@ -80,31 +90,31 @@
|
||||
rounded-full
|
||||
"
|
||||
:class="{
|
||||
'bg-green-100': dialogStore.variant === 'primary',
|
||||
'bg-red-100': dialogStore.variant === 'danger',
|
||||
'bg-green-100 dark:bg-primary-500': dialogStore.variant === 'primary',
|
||||
'bg-red-100 dark:bg-red-500': dialogStore.variant === 'danger',
|
||||
}"
|
||||
>
|
||||
<BaseIcon
|
||||
v-if="dialogStore.variant === 'primary'"
|
||||
name="CheckIcon"
|
||||
class="w-6 h-6 text-green-600"
|
||||
class="w-6 h-6 text-green-600 dark:text-white"
|
||||
/>
|
||||
<BaseIcon
|
||||
v-else
|
||||
name="ExclamationIcon"
|
||||
class="w-6 h-6 text-red-600"
|
||||
class="w-6 h-6 text-red-600 dark:text-white"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
<div class="mt-3 text-center sm:mt-5">
|
||||
<DialogTitle
|
||||
as="h3"
|
||||
class="text-lg font-medium leading-6 text-gray-900"
|
||||
class="text-lg font-medium leading-6 text-gray-900 dark:text-white"
|
||||
>
|
||||
{{ dialogStore.title }}
|
||||
</DialogTitle>
|
||||
<div class="mt-2">
|
||||
<p class="text-sm text-gray-500">
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">
|
||||
{{ dialogStore.message }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
<template>
|
||||
<hr class="w-full text-gray-300" />
|
||||
<hr class="w-full text-gray-300 dark:bg-gray-600" />
|
||||
</template>
|
||||
|
||||
@ -1,13 +1,17 @@
|
||||
<template>
|
||||
<div class="flex flex-col items-center justify-center mt-16">
|
||||
<div class="relative">
|
||||
<BaseDarkHighlight class="bg-highlight/[.07] top-2" />
|
||||
|
||||
<div class="relative z-5 flex flex-col items-center">
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
<slot></slot>
|
||||
<slot />
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<label class="font-medium">{{ title }}</label>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<label class="text-gray-500">
|
||||
<div class="mt-2 text-center md:text-left">
|
||||
<label class="text-gray-500 dark:text-gray-400">
|
||||
{{ description }}
|
||||
</label>
|
||||
</div>
|
||||
@ -15,6 +19,8 @@
|
||||
<slot name="actions" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
@ -1,11 +1,18 @@
|
||||
<template>
|
||||
<div class="rounded-md bg-red-50 p-4">
|
||||
<div
|
||||
class="
|
||||
rounded-md
|
||||
bg-red-50
|
||||
p-4
|
||||
dark:border dark:border-red-400 dark:bg-transparent
|
||||
"
|
||||
>
|
||||
<div class="flex">
|
||||
<div class="shrink-0">
|
||||
<XCircleIcon class="h-5 w-5 text-red-400" aria-hidden="true" />
|
||||
<XCircleIcon class="h-5 w-5 text-red-400 dark:text-red-500" aria-hidden="true" />
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<h3 class="text-sm font-medium text-red-800">
|
||||
<h3 class="text-sm font-medium text-red-800 dark:text-red-500">
|
||||
{{ errorTitle }}
|
||||
</h3>
|
||||
<div class="mt-2 text-sm text-red-700">
|
||||
|
||||
@ -21,6 +21,7 @@
|
||||
group
|
||||
min-h-[100px]
|
||||
bg-gray-50
|
||||
dark:bg-gray-700 dark:border-gray-600
|
||||
"
|
||||
:class="avatar ? 'w-32 h-32' : 'w-full'"
|
||||
>
|
||||
@ -49,7 +50,7 @@
|
||||
|
||||
<a
|
||||
href="#"
|
||||
class="absolute z-30 bg-white rounded-full -bottom-3 -right-3 group"
|
||||
class="absolute z-30 bg-white rounded-full -bottom-3 -right-3 group dark:bg-gray-900"
|
||||
@click.prevent.stop="onBrowse"
|
||||
>
|
||||
<BaseIcon
|
||||
@ -95,7 +96,7 @@
|
||||
|
||||
<div
|
||||
v-else-if="localFiles.length && avatar && !multiple"
|
||||
class="flex w-full h-full border border-gray-200 rounded"
|
||||
class="flex w-full h-full border border-gray-200 rounded dark:border-gray-600"
|
||||
>
|
||||
<img
|
||||
v-if="localFiles[0].image"
|
||||
@ -169,10 +170,11 @@
|
||||
-right-3
|
||||
group
|
||||
hover:border-gray-300
|
||||
dark:border-gray-600 dark:bg-gray-900 dark:hover:border-gray-700
|
||||
"
|
||||
@click.prevent.stop="onAvatarRemove(localFiles[0])"
|
||||
>
|
||||
<BaseIcon name="XIcon" class="h-4 text-xl leading-6 text-black" />
|
||||
<BaseIcon name="XIcon" class="h-4 text-xl leading-6 text-black dark:text-white" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@ -195,6 +197,7 @@
|
||||
hover:border-gray-500
|
||||
relative
|
||||
max-w-md
|
||||
dark:border-gray-600 dark:bg-transparent dark:hover:border-gray-700
|
||||
"
|
||||
@click.prevent
|
||||
>
|
||||
@ -270,6 +273,7 @@
|
||||
-right-3
|
||||
group
|
||||
hover:border-gray-300
|
||||
dark:border-gray-600 dark:bg-gray-900 dark:hover:border-gray-700
|
||||
"
|
||||
@click.prevent.stop="onFileRemove(index)"
|
||||
>
|
||||
@ -293,6 +297,7 @@
|
||||
hover:border-gray-500
|
||||
relative
|
||||
max-w-md
|
||||
dark:border-gray-600 dark:bg-gray-800 dark:hover:border-gray-700
|
||||
"
|
||||
@click.prevent
|
||||
>
|
||||
@ -368,10 +373,11 @@
|
||||
-right-3
|
||||
group
|
||||
hover:border-gray-300
|
||||
dark:border-gray-600 dark:bg-gray-900 dark:hover:border-gray-700
|
||||
"
|
||||
@click.prevent.stop="onFileRemove(index)"
|
||||
>
|
||||
<BaseIcon name="XIcon" class="h-4 text-xl leading-6 text-black" />
|
||||
<BaseIcon name="XIcon" class="h-4 text-xl leading-6 text-black dark:text-white" />
|
||||
</a>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
leave-from-class="opacity-100"
|
||||
leave-to-class="opacity-0"
|
||||
>
|
||||
<div v-show="show" class="relative z-10 p-4 md:p-8 bg-gray-200 rounded">
|
||||
<div v-show="show" class="relative z-10 p-4 md:p-8 bg-gray-200 rounded dark:bg-gray-800">
|
||||
<slot name="filter-header" />
|
||||
|
||||
<label
|
||||
@ -20,6 +20,7 @@
|
||||
hover:text-gray-700
|
||||
top-2.5
|
||||
right-3.5
|
||||
dark:text-gray-300
|
||||
"
|
||||
@click="$emit('clear')"
|
||||
>
|
||||
|
||||
@ -2,6 +2,21 @@
|
||||
<h6 :class="typeClass">
|
||||
<slot />
|
||||
</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>
|
||||
|
||||
<script setup>
|
||||
@ -14,12 +29,16 @@ const props = defineProps({
|
||||
return ['section-title', 'heading-title'].indexOf(value) !== -1
|
||||
},
|
||||
},
|
||||
subtitle: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
})
|
||||
|
||||
const typeClass = computed(() => {
|
||||
return {
|
||||
'text-gray-900 text-lg font-medium': props.type === 'heading-title',
|
||||
'text-gray-500 uppercase text-base': props.type === 'section-title',
|
||||
'text-gray-900 text-lg font-medium dark:text-white': props.type === 'heading-title',
|
||||
'text-gray-500 uppercase text-base dark:text-gray-300': props.type === 'section-title',
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -65,6 +65,7 @@
|
||||
rounded-l-md
|
||||
bg-gray-50
|
||||
sm:text-sm
|
||||
dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300
|
||||
"
|
||||
>
|
||||
{{ addon }}
|
||||
@ -82,7 +83,7 @@
|
||||
pointer-events-none
|
||||
"
|
||||
>
|
||||
<span class="text-gray-500 sm:text-sm">
|
||||
<span class="text-gray-500 dark:text-white sm:text-sm ">
|
||||
{{ inlineAddon }}
|
||||
</span>
|
||||
</div>
|
||||
@ -199,7 +200,7 @@ const props = defineProps({
|
||||
defaultInputClass: {
|
||||
type: String,
|
||||
default:
|
||||
'font-base block w-full sm:text-sm border-gray-200 rounded-md text-black',
|
||||
'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',
|
||||
},
|
||||
iconLeftClass: {
|
||||
type: String,
|
||||
@ -250,7 +251,8 @@ const inputAddonClass = computed(() => {
|
||||
|
||||
const inputInvalidClass = computed(() => {
|
||||
if (props.invalid) {
|
||||
return 'border-red-500 ring-red-500 focus:ring-red-500 focus:border-red-500'
|
||||
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 'focus:ring-primary-400 focus:border-primary-400'
|
||||
@ -258,7 +260,7 @@ const inputInvalidClass = computed(() => {
|
||||
|
||||
const inputDisabledClass = computed(() => {
|
||||
if (props.disabled) {
|
||||
return `border-gray-100 bg-gray-100 !text-gray-400 ring-gray-200 focus:ring-gray-200 focus:border-gray-100`
|
||||
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 ''
|
||||
|
||||
@ -12,6 +12,7 @@
|
||||
bg-gray-200
|
||||
border border-gray-200 border-solid
|
||||
rounded
|
||||
dark:bg-gray-900/70 dark:border-gray-700
|
||||
"
|
||||
>
|
||||
{{ item.name }}
|
||||
|
||||
@ -29,8 +29,21 @@
|
||||
leave-to="opacity-0"
|
||||
>
|
||||
<DialogOverlay
|
||||
class="fixed inset-0 transition-opacity bg-gray-700 bg-opacity-25"
|
||||
class="
|
||||
fixed
|
||||
inset-0
|
||||
transition-opacity
|
||||
bg-gray-700
|
||||
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>
|
||||
|
||||
<!-- This element is to trick the browser into centering the modal contents. -->
|
||||
@ -61,6 +74,10 @@
|
||||
my-4
|
||||
${modalSize}
|
||||
sm:w-full
|
||||
dark:shadow-glass
|
||||
dark:border
|
||||
dark:border-white/10
|
||||
dark:bg-gray-800/90
|
||||
border-t-8 border-solid rounded shadow-xl border-primary-500`"
|
||||
>
|
||||
<div
|
||||
@ -74,6 +91,8 @@
|
||||
text-lg
|
||||
font-medium
|
||||
text-black
|
||||
dark:text-white
|
||||
dark:border-gray-600
|
||||
border-b border-gray-200 border-solid
|
||||
"
|
||||
>
|
||||
|
||||
14
resources/scripts/components/base/BaseModalFooter.vue
Normal file
14
resources/scripts/components/base/BaseModalFooter.vue
Normal file
@ -0,0 +1,14 @@
|
||||
<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: {
|
||||
type: String,
|
||||
default:
|
||||
'font-base block w-full sm:text-sm border-gray-200 rounded-md text-black',
|
||||
'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',
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
@ -86,7 +86,7 @@ const currencyBindings = computed(() => {
|
||||
|
||||
const invalidClass = computed(() => {
|
||||
if (props.invalid) {
|
||||
return 'border-red-500 ring-red-500 focus:ring-red-500 focus:border-red-500'
|
||||
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 'focus:ring-primary-400 focus:border-primary-400'
|
||||
})
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="flex flex-wrap justify-between">
|
||||
<div>
|
||||
<h3 class="text-2xl font-bold text-left text-black">
|
||||
<h3 class="text-2xl font-bold text-left text-black dark:text-white">
|
||||
{{ title }}
|
||||
</h3>
|
||||
<slot />
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
]"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<span class="rounded-full bg-white w-1.5 h-1.5" />
|
||||
<span class="rounded-full bg-white w-1.5 h-1.5" :class="{ 'bg-white': checked }"/>
|
||||
</span>
|
||||
<div class="flex flex-col ml-3">
|
||||
<RadioGroupLabel
|
||||
@ -66,11 +66,11 @@ const props = defineProps({
|
||||
},
|
||||
checkedStateClass: {
|
||||
type: String,
|
||||
default: 'bg-primary-600',
|
||||
default: 'bg-primary-600 ',
|
||||
},
|
||||
unCheckedStateClass: {
|
||||
type: String,
|
||||
default: 'bg-white ',
|
||||
default: 'bg-white dark:bg-transparent',
|
||||
},
|
||||
optionGroupActiveStateClass: {
|
||||
type: String,
|
||||
@ -78,16 +78,16 @@ const props = defineProps({
|
||||
},
|
||||
checkedStateLabelClass: {
|
||||
type: String,
|
||||
default: 'text-primary-900 ',
|
||||
default: 'text-primary-900 dark:text-primary-400',
|
||||
},
|
||||
unCheckedStateLabelClass: {
|
||||
type: String,
|
||||
default: 'text-gray-900',
|
||||
default: 'text-gray-900 dark:text-white',
|
||||
},
|
||||
optionGroupClass: {
|
||||
type: String,
|
||||
default:
|
||||
'h-4 w-4 mt-0.5 cursor-pointer rounded-full border flex items-center justify-center',
|
||||
'h-4 w-4 mt-0.5 cursor-pointer rounded-full border flex items-center justify-center dark:border-gray-600',
|
||||
},
|
||||
optionGroupLabelClass: {
|
||||
type: String,
|
||||
|
||||
@ -11,6 +11,10 @@
|
||||
bg-gray-200
|
||||
cursor-pointer
|
||||
text-primary-400
|
||||
dark:bg-gray-600/70
|
||||
dark:backdrop-blur-xl
|
||||
dark:shadow-glass
|
||||
dark:hover:bg-gray-600/80
|
||||
"
|
||||
>
|
||||
<slot />
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
>
|
||||
<ListboxLabel
|
||||
v-if="label"
|
||||
class="block text-sm not-italic font-medium text-gray-800 mb-0.5"
|
||||
class="block text-sm not-italic font-medium text-gray-800 mb-0.5 dark:text-white"
|
||||
>
|
||||
{{ label }}
|
||||
</ListboxLabel>
|
||||
@ -28,14 +28,13 @@
|
||||
pr-10
|
||||
text-left
|
||||
bg-white
|
||||
border border-gray-200
|
||||
dark:bg-gray-700
|
||||
rounded-md
|
||||
shadow-sm
|
||||
cursor-default
|
||||
focus:outline-none
|
||||
focus:ring-1
|
||||
focus:ring-primary-500
|
||||
focus:border-primary-500
|
||||
focus:ring-primary-400 focus:border-primary-400
|
||||
sm:text-sm
|
||||
"
|
||||
>
|
||||
@ -89,6 +88,7 @@
|
||||
ring-1 ring-black ring-opacity-5
|
||||
focus:outline-none
|
||||
sm:text-sm
|
||||
dark:bg-gray-700
|
||||
"
|
||||
>
|
||||
<ListboxOption
|
||||
@ -100,7 +100,7 @@
|
||||
>
|
||||
<li
|
||||
:class="[
|
||||
active ? 'text-white bg-primary-600' : 'text-gray-900',
|
||||
active ? 'text-white bg-primary-600' : 'text-gray-900 dark:text-white',
|
||||
'cursor-default select-none relative py-2 pl-3 pr-9',
|
||||
]"
|
||||
>
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
mt-2
|
||||
text-sm
|
||||
leading-snug
|
||||
text-left text-gray-500
|
||||
text-left text-gray-500 dark:text-gray-400
|
||||
max-w-[680px]
|
||||
"
|
||||
>
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
|
||||
<Switch
|
||||
v-model="enabled"
|
||||
:class="enabled ? 'bg-primary-500' : 'bg-gray-300'"
|
||||
:class="enabled ? 'bg-primary-500' : 'bg-gray-300 dark:bg-gray-900'"
|
||||
class="
|
||||
relative
|
||||
inline-flex
|
||||
@ -21,7 +21,11 @@
|
||||
v-bind="$attrs"
|
||||
>
|
||||
<span
|
||||
:class="enabled ? 'translate-x-6' : 'translate-x-1'"
|
||||
:class="
|
||||
enabled
|
||||
? 'translate-x-6 dark:bg-white'
|
||||
: 'translate-x-1 dark:bg-gray-500'
|
||||
"
|
||||
class="
|
||||
inline-block
|
||||
w-4
|
||||
|
||||
@ -5,12 +5,12 @@
|
||||
<div class="flex flex-col">
|
||||
<SwitchLabel
|
||||
as="p"
|
||||
class="p-0 mb-1 text-sm leading-snug text-black font-medium"
|
||||
class="p-0 mb-1 text-sm leading-snug text-black font-medium dark:text-white"
|
||||
passive
|
||||
>
|
||||
{{ title }}
|
||||
</SwitchLabel>
|
||||
<SwitchDescription class="text-sm text-gray-500">
|
||||
<SwitchDescription class="text-sm text-gray-500 dark:text-gray-400">
|
||||
{{ description }}
|
||||
</SwitchDescription>
|
||||
</div>
|
||||
@ -18,7 +18,7 @@
|
||||
:disabled="disabled"
|
||||
:model-value="modelValue"
|
||||
:class="[
|
||||
modelValue ? 'bg-primary-500' : 'bg-gray-200',
|
||||
modelValue ? 'bg-primary-500' : 'bg-gray-200 dark:bg-gray-900',
|
||||
'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"
|
||||
@ -26,7 +26,7 @@
|
||||
<span
|
||||
aria-hidden="true"
|
||||
:class="[
|
||||
modelValue ? 'translate-x-5' : 'translate-x-0',
|
||||
modelValue ? 'translate-x-5 dark:bg-white' : 'translate-x-0 dark:bg-gray-500',
|
||||
'inline-block h-5 w-5 rounded-full bg-white shadow ring-0 transition ease-in-out duration-200',
|
||||
]"
|
||||
/>
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
>
|
||||
<TabList
|
||||
:class="[
|
||||
'flex border-b border-grey-light',
|
||||
'flex border-b border-grey-light dark:border-gray-600',
|
||||
'relative overflow-x-auto overflow-y-hidden',
|
||||
'lg:pb-0 lg:ml-0',
|
||||
]"
|
||||
@ -22,8 +22,8 @@
|
||||
: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',
|
||||
selected
|
||||
? ' border-primary-400 text-black font-medium'
|
||||
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300',
|
||||
? 'border-primary-400 text-black font-medium dark:text-white'
|
||||
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:border-gray-500',
|
||||
]"
|
||||
>
|
||||
{{ tab.title }}
|
||||
|
||||
@ -45,7 +45,7 @@ const props = defineProps({
|
||||
defaultInputClass: {
|
||||
type: String,
|
||||
default:
|
||||
'box-border w-full px-3 py-2 text-sm not-italic font-normal leading-snug text-left text-black placeholder-gray-400 bg-white border border-gray-200 border-solid rounded outline-none',
|
||||
'box-border w-full px-3 py-2 text-sm not-italic font-normal leading-snug text-left text-black placeholder-gray-400 bg-white border border-gray-200 dark:border-gray-600 border-solid rounded outline-none dark:bg-gray-700 dark:text-white',
|
||||
},
|
||||
autosize: {
|
||||
type: Boolean,
|
||||
|
||||
@ -16,13 +16,15 @@
|
||||
text-left
|
||||
bg-white
|
||||
border border-gray-200
|
||||
dark:border-gray-600
|
||||
rounded-md
|
||||
min-h-[200px]
|
||||
overflow-hidden
|
||||
dark:bg-gray-700 dark:text-white
|
||||
"
|
||||
>
|
||||
<div v-if="editor" class="editor-content">
|
||||
<div class="flex justify-end p-2 border-b border-gray-200 md:hidden">
|
||||
<div class="flex justify-end p-2 border-b border-gray-200 dark:border-gray-600 md:hidden">
|
||||
<BaseDropdown width-class="w-48">
|
||||
<template #activator>
|
||||
<div
|
||||
@ -42,7 +44,7 @@
|
||||
<dots-vertical-icon class="w-6 h-6 text-gray-600" />
|
||||
</div>
|
||||
</template>
|
||||
<div class="flex flex-wrap space-x-1">
|
||||
<div class="flex flex-wrap space-x-1 dark:text-white">
|
||||
<span
|
||||
class="
|
||||
flex
|
||||
@ -53,8 +55,9 @@
|
||||
rounded-sm
|
||||
cursor-pointer
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-800
|
||||
"
|
||||
:class="{ 'bg-gray-200': editor.isActive('bold') }"
|
||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('bold') }"
|
||||
@click="editor.chain().focus().toggleBold().run()"
|
||||
>
|
||||
<bold-icon class="h-3 cursor-pointer fill-current" />
|
||||
@ -69,8 +72,9 @@
|
||||
rounded-sm
|
||||
cursor-pointer
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-800
|
||||
"
|
||||
:class="{ 'bg-gray-200': editor.isActive('italic') }"
|
||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('italic') }"
|
||||
@click="editor.chain().focus().toggleItalic().run()"
|
||||
>
|
||||
<italic-icon class="h-3 cursor-pointer fill-current" />
|
||||
@ -85,8 +89,9 @@
|
||||
rounded-sm
|
||||
cursor-pointer
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-800
|
||||
"
|
||||
:class="{ 'bg-gray-200': editor.isActive('strike') }"
|
||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('strike') }"
|
||||
@click="editor.chain().focus().toggleStrike().run()"
|
||||
>
|
||||
<strikethrough-icon class="h-3 cursor-pointer fill-current" />
|
||||
@ -101,8 +106,9 @@
|
||||
rounded-sm
|
||||
cursor-pointer
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-800
|
||||
"
|
||||
:class="{ 'bg-gray-200': editor.isActive('code') }"
|
||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('code') }"
|
||||
@click="editor.chain().focus().toggleCode().run()"
|
||||
>
|
||||
<coding-icon class="h-3 cursor-pointer fill-current" />
|
||||
@ -117,8 +123,9 @@
|
||||
rounded-sm
|
||||
cursor-pointer
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-800
|
||||
"
|
||||
:class="{ 'bg-gray-200': editor.isActive('paragraph') }"
|
||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('paragraph') }"
|
||||
@click="editor.chain().focus().setParagraph().run()"
|
||||
>
|
||||
<paragraph-icon class="h-3 cursor-pointer fill-current" />
|
||||
@ -133,9 +140,10 @@
|
||||
rounded-sm
|
||||
cursor-pointer
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-800
|
||||
"
|
||||
:class="{
|
||||
'bg-gray-200': editor.isActive('heading', { level: 1 }),
|
||||
'bg-gray-200 dark:bg-gray-900': editor.isActive('heading', { level: 1 }),
|
||||
}"
|
||||
@click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
|
||||
>
|
||||
@ -151,9 +159,10 @@
|
||||
rounded-sm
|
||||
cursor-pointer
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-800
|
||||
"
|
||||
:class="{
|
||||
'bg-gray-200': editor.isActive('heading', { level: 2 }),
|
||||
'bg-gray-200 dark:bg-gray-900': editor.isActive('heading', { level: 2 }),
|
||||
}"
|
||||
@click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
|
||||
>
|
||||
@ -169,9 +178,10 @@
|
||||
rounded-sm
|
||||
cursor-pointer
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-800
|
||||
"
|
||||
:class="{
|
||||
'bg-gray-200': editor.isActive('heading', { level: 3 }),
|
||||
'bg-gray-200 dark:bg-gray-900': editor.isActive('heading', { level: 3 }),
|
||||
}"
|
||||
@click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
|
||||
>
|
||||
@ -188,8 +198,9 @@
|
||||
rounded-sm
|
||||
cursor-pointer
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-800
|
||||
"
|
||||
:class="{ 'bg-gray-200': editor.isActive('bulletList') }"
|
||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('bulletList') }"
|
||||
@click="editor.chain().focus().toggleBulletList().run()"
|
||||
>
|
||||
<list-ul-icon class="h-3 cursor-pointer fill-current" />
|
||||
@ -204,8 +215,9 @@
|
||||
rounded-sm
|
||||
cursor-pointer
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-800
|
||||
"
|
||||
:class="{ 'bg-gray-200': editor.isActive('orderedList') }"
|
||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('orderedList') }"
|
||||
@click="editor.chain().focus().toggleOrderedList().run()"
|
||||
>
|
||||
<list-icon class="h-3 cursor-pointer fill-current" />
|
||||
@ -220,8 +232,9 @@
|
||||
rounded-sm
|
||||
cursor-pointer
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-800
|
||||
"
|
||||
:class="{ 'bg-gray-200': editor.isActive('blockquote') }"
|
||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('blockquote') }"
|
||||
@click="editor.chain().focus().toggleBlockquote().run()"
|
||||
>
|
||||
<quote-icon class="h-3 cursor-pointer fill-current" />
|
||||
@ -236,8 +249,9 @@
|
||||
rounded-sm
|
||||
cursor-pointer
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-800
|
||||
"
|
||||
:class="{ 'bg-gray-200': editor.isActive('codeBlock') }"
|
||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('codeBlock') }"
|
||||
@click="editor.chain().focus().toggleCodeBlock().run()"
|
||||
>
|
||||
<code-block-icon class="h-3 cursor-pointer fill-current" />
|
||||
@ -252,8 +266,9 @@
|
||||
rounded-sm
|
||||
cursor-pointer
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-800
|
||||
"
|
||||
:class="{ 'bg-gray-200': editor.isActive('undo') }"
|
||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('undo') }"
|
||||
@click="editor.chain().focus().undo().run()"
|
||||
>
|
||||
<undo-icon class="h-3 cursor-pointer fill-current" />
|
||||
@ -268,8 +283,9 @@
|
||||
rounded-sm
|
||||
cursor-pointer
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-800
|
||||
"
|
||||
:class="{ 'bg-gray-200': editor.isActive('redo') }"
|
||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('redo') }"
|
||||
@click="editor.chain().focus().redo().run()"
|
||||
>
|
||||
<redo-icon class="h-3 cursor-pointer fill-current" />
|
||||
@ -277,7 +293,7 @@
|
||||
</div>
|
||||
</BaseDropdown>
|
||||
</div>
|
||||
<div class="hidden p-2 border-b border-gray-200 md:flex">
|
||||
<div class="hidden p-2 border-b border-gray-200 dark:border-gray-600 md:flex">
|
||||
<div class="flex flex-wrap space-x-1">
|
||||
<span
|
||||
class="
|
||||
@ -289,8 +305,9 @@
|
||||
rounded-sm
|
||||
cursor-pointer
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-800
|
||||
"
|
||||
:class="{ 'bg-gray-200': editor.isActive('bold') }"
|
||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('bold') }"
|
||||
@click="editor.chain().focus().toggleBold().run()"
|
||||
>
|
||||
<bold-icon class="h-3 cursor-pointer fill-current" />
|
||||
@ -305,8 +322,9 @@
|
||||
rounded-sm
|
||||
cursor-pointer
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-800
|
||||
"
|
||||
:class="{ 'bg-gray-200': editor.isActive('italic') }"
|
||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('italic') }"
|
||||
@click="editor.chain().focus().toggleItalic().run()"
|
||||
>
|
||||
<italic-icon class="h-3 cursor-pointer fill-current" />
|
||||
@ -321,8 +339,9 @@
|
||||
rounded-sm
|
||||
cursor-pointer
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-800
|
||||
"
|
||||
:class="{ 'bg-gray-200': editor.isActive('strike') }"
|
||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('strike') }"
|
||||
@click="editor.chain().focus().toggleStrike().run()"
|
||||
>
|
||||
<strikethrough-icon class="h-3 cursor-pointer fill-current" />
|
||||
@ -337,8 +356,9 @@
|
||||
rounded-sm
|
||||
cursor-pointer
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-800
|
||||
"
|
||||
:class="{ 'bg-gray-200': editor.isActive('code') }"
|
||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('code') }"
|
||||
@click="editor.chain().focus().toggleCode().run()"
|
||||
>
|
||||
<coding-icon class="h-3 cursor-pointer fill-current" />
|
||||
@ -353,8 +373,9 @@
|
||||
rounded-sm
|
||||
cursor-pointer
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-800
|
||||
"
|
||||
:class="{ 'bg-gray-200': editor.isActive('paragraph') }"
|
||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('paragraph') }"
|
||||
@click="editor.chain().focus().setParagraph().run()"
|
||||
>
|
||||
<paragraph-icon class="h-3 cursor-pointer fill-current" />
|
||||
@ -369,8 +390,9 @@
|
||||
rounded-sm
|
||||
cursor-pointer
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-800
|
||||
"
|
||||
:class="{ 'bg-gray-200': editor.isActive('heading', { level: 1 }) }"
|
||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('heading', { level: 1 }) }"
|
||||
@click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
|
||||
>
|
||||
H1
|
||||
@ -385,8 +407,9 @@
|
||||
rounded-sm
|
||||
cursor-pointer
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-800
|
||||
"
|
||||
:class="{ 'bg-gray-200': editor.isActive('heading', { level: 2 }) }"
|
||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('heading', { level: 2 }) }"
|
||||
@click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
|
||||
>
|
||||
H2
|
||||
@ -401,8 +424,9 @@
|
||||
rounded-sm
|
||||
cursor-pointer
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-800
|
||||
"
|
||||
:class="{ 'bg-gray-200': editor.isActive('heading', { level: 3 }) }"
|
||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('heading', { level: 3 }) }"
|
||||
@click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
|
||||
>
|
||||
H3
|
||||
@ -418,8 +442,9 @@
|
||||
rounded-sm
|
||||
cursor-pointer
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-800
|
||||
"
|
||||
:class="{ 'bg-gray-200': editor.isActive('bulletList') }"
|
||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('bulletList') }"
|
||||
@click="editor.chain().focus().toggleBulletList().run()"
|
||||
>
|
||||
<list-ul-icon class="h-3 cursor-pointer fill-current" />
|
||||
@ -434,8 +459,9 @@
|
||||
rounded-sm
|
||||
cursor-pointer
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-800
|
||||
"
|
||||
:class="{ 'bg-gray-200': editor.isActive('orderedList') }"
|
||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('orderedList') }"
|
||||
@click="editor.chain().focus().toggleOrderedList().run()"
|
||||
>
|
||||
<list-icon class="h-3 cursor-pointer fill-current" />
|
||||
@ -450,8 +476,9 @@
|
||||
rounded-sm
|
||||
cursor-pointer
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-800
|
||||
"
|
||||
:class="{ 'bg-gray-200': editor.isActive('blockquote') }"
|
||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('blockquote') }"
|
||||
@click="editor.chain().focus().toggleBlockquote().run()"
|
||||
>
|
||||
<quote-icon class="h-3 cursor-pointer fill-current" />
|
||||
@ -466,8 +493,9 @@
|
||||
rounded-sm
|
||||
cursor-pointer
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-800
|
||||
"
|
||||
:class="{ 'bg-gray-200': editor.isActive('codeBlock') }"
|
||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('codeBlock') }"
|
||||
@click="editor.chain().focus().toggleCodeBlock().run()"
|
||||
>
|
||||
<code-block-icon class="h-3 cursor-pointer fill-current" />
|
||||
@ -482,8 +510,9 @@
|
||||
rounded-sm
|
||||
cursor-pointer
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-800
|
||||
"
|
||||
:class="{ 'bg-gray-200': editor.isActive('undo') }"
|
||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('undo') }"
|
||||
@click="editor.chain().focus().undo().run()"
|
||||
>
|
||||
<undo-icon class="h-3 cursor-pointer fill-current" />
|
||||
@ -498,8 +527,9 @@
|
||||
rounded-sm
|
||||
cursor-pointer
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-800
|
||||
"
|
||||
:class="{ 'bg-gray-200': editor.isActive('redo') }"
|
||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('redo') }"
|
||||
@click="editor.chain().focus().redo().run()"
|
||||
>
|
||||
<redo-icon class="h-3 cursor-pointer fill-current" />
|
||||
@ -514,8 +544,9 @@
|
||||
rounded-sm
|
||||
cursor-pointer
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-800
|
||||
"
|
||||
:class="{ 'bg-gray-200': editor.isActive({ textAlign: 'left' }) }"
|
||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive({ textAlign: 'left' }) }"
|
||||
@click="editor.chain().focus().setTextAlign('left').run()"
|
||||
>
|
||||
<menu-alt2-icon class="h-5 cursor-pointer fill-current" />
|
||||
@ -530,8 +561,9 @@
|
||||
rounded-sm
|
||||
cursor-pointer
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-800
|
||||
"
|
||||
:class="{ 'bg-gray-200': editor.isActive({ textAlign: 'right' }) }"
|
||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive({ textAlign: 'right' }) }"
|
||||
@click="editor.chain().focus().setTextAlign('right').run()"
|
||||
>
|
||||
<menu-alt3-icon class="h-5 cursor-pointer fill-current" />
|
||||
@ -546,9 +578,10 @@
|
||||
rounded-sm
|
||||
cursor-pointer
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-800
|
||||
"
|
||||
:class="{
|
||||
'bg-gray-200': editor.isActive({ textAlign: 'justify' }),
|
||||
'bg-gray-200 dark:bg-gray-900': editor.isActive({ textAlign: 'justify' }),
|
||||
}"
|
||||
@click="editor.chain().focus().setTextAlign('justify').run()"
|
||||
>
|
||||
@ -564,8 +597,9 @@
|
||||
rounded-sm
|
||||
cursor-pointer
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-800
|
||||
"
|
||||
:class="{ 'bg-gray-200': editor.isActive({ textAlign: 'center' }) }"
|
||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive({ textAlign: 'center' }) }"
|
||||
@click="editor.chain().focus().setTextAlign('center').run()"
|
||||
>
|
||||
<menu-center-icon class="h-5 cursor-pointer fill-current" />
|
||||
|
||||
@ -7,11 +7,18 @@
|
||||
relative
|
||||
overflow-hidden
|
||||
bg-white
|
||||
border-b border-gray-200
|
||||
border-b
|
||||
border-gray-200
|
||||
shadow
|
||||
sm:rounded-lg
|
||||
dark:shadow-glass
|
||||
dark:border
|
||||
dark:border-white/10
|
||||
dark:bg-gray-800/70
|
||||
"
|
||||
>
|
||||
<BaseDarkHighlight v-if="darkHighlight" class="z-[-1]" />
|
||||
|
||||
<slot name="header" />
|
||||
<table :class="tableClass">
|
||||
<thead :class="theadClass">
|
||||
@ -51,7 +58,11 @@
|
||||
<tr
|
||||
v-for="placeRow in placeholderCount"
|
||||
:key="placeRow"
|
||||
:class="placeRow % 2 === 0 ? 'bg-white' : 'bg-gray-50'"
|
||||
:class="
|
||||
placeRow % 2 === 0
|
||||
? 'bg-white dark:bg-gray-800'
|
||||
: 'bg-gray-50 dark:bg-gray-800'
|
||||
"
|
||||
>
|
||||
<td
|
||||
v-for="column in columns"
|
||||
@ -75,7 +86,11 @@
|
||||
<tr
|
||||
v-for="(row, index) in sortedRows"
|
||||
:key="index"
|
||||
:class="index % 2 === 0 ? 'bg-white' : 'bg-gray-50'"
|
||||
:class="
|
||||
index % 2 === 0
|
||||
? 'bg-white dark:bg-transparent'
|
||||
: 'bg-gray-50 dark:bg-gray-700/20 dark:border-y dark:border-gray-600'
|
||||
"
|
||||
>
|
||||
<td
|
||||
v-for="column in columns"
|
||||
@ -103,7 +118,10 @@
|
||||
justify-center
|
||||
w-full
|
||||
h-full
|
||||
bg-white bg-opacity-60
|
||||
bg-white
|
||||
bg-opacity-60
|
||||
dark:bg-gray-700
|
||||
dark:bg-opacity-60
|
||||
"
|
||||
>
|
||||
<SpinnerIcon class="w-10 h-10 text-primary-500" />
|
||||
@ -163,9 +181,12 @@ const props = defineProps({
|
||||
sortOrder: { type: String, default: '' },
|
||||
tableClass: {
|
||||
type: String,
|
||||
default: 'min-w-full divide-y divide-gray-200',
|
||||
default: 'min-w-full divide-y divide-gray-200 dark:divide-gray-600',
|
||||
},
|
||||
theadClass: {
|
||||
type: String,
|
||||
default: 'bg-gray-50 dark:bg-gray-800 dark:text-white',
|
||||
},
|
||||
theadClass: { type: String, default: 'bg-gray-50' },
|
||||
tbodyClass: { type: String, default: '' },
|
||||
noResultsMessage: {
|
||||
type: String,
|
||||
@ -186,6 +207,10 @@ const props = defineProps({
|
||||
type: Number,
|
||||
default: 3,
|
||||
},
|
||||
darkHighlight: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
})
|
||||
|
||||
let rows = reactive([])
|
||||
@ -236,7 +261,7 @@ function getColumn(columnName) {
|
||||
|
||||
function getThClass(column) {
|
||||
let classes =
|
||||
'whitespace-nowrap px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider'
|
||||
'whitespace-nowrap px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-white'
|
||||
|
||||
if (column.defaultThClass) {
|
||||
classes = column.defaultThClass
|
||||
@ -256,7 +281,8 @@ function getThClass(column) {
|
||||
}
|
||||
|
||||
function getTdClass(column) {
|
||||
let classes = 'px-6 py-4 text-sm text-gray-500 whitespace-nowrap'
|
||||
let classes =
|
||||
'px-6 py-4 text-sm text-gray-500 whitespace-nowrap dark:text-gray-300'
|
||||
|
||||
if (column.defaultTdClass) {
|
||||
classes = column.defaultTdClass
|
||||
@ -309,6 +335,7 @@ function changeSorting(column) {
|
||||
}
|
||||
|
||||
if (!usesLocalData.value) {
|
||||
if (pagination.value) pagination.value.currentPage = 1
|
||||
mapDataToRows()
|
||||
}
|
||||
}
|
||||
@ -326,7 +353,9 @@ async function pageChange(page) {
|
||||
await mapDataToRows()
|
||||
}
|
||||
|
||||
async function refresh() {
|
||||
async function refresh(isPreservePage = false) {
|
||||
if (pagination.value && !isPreservePage) pagination.value.currentPage = 1
|
||||
|
||||
await mapDataToRows()
|
||||
}
|
||||
|
||||
|
||||
@ -10,13 +10,14 @@
|
||||
bg-white
|
||||
border-t border-gray-200
|
||||
sm:px-6
|
||||
dark:bg-transparent dark:border-white/10
|
||||
"
|
||||
>
|
||||
<div class="flex justify-between flex-1 sm:hidden">
|
||||
<a
|
||||
href="#"
|
||||
:class="{
|
||||
'disabled cursor-normal pointer-events-none !bg-gray-100 !text-gray-400':
|
||||
'disabled cursor-normal pointer-events-none !bg-gray-100 !text-gray-400 dark:!bg-gray-800 dark:!text-gray-500':
|
||||
pagination.currentPage === 1,
|
||||
}"
|
||||
class="
|
||||
@ -32,6 +33,7 @@
|
||||
border border-gray-300
|
||||
rounded-md
|
||||
hover:bg-gray-50
|
||||
dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300
|
||||
"
|
||||
@click="pageClicked(pagination.currentPage - 1)"
|
||||
>
|
||||
@ -40,7 +42,7 @@
|
||||
<a
|
||||
href="#"
|
||||
:class="{
|
||||
'disabled cursor-default pointer-events-none !bg-gray-100 !text-gray-400':
|
||||
'disabled cursor-default pointer-events-none !bg-gray-100 !text-gray-400 dark:!bg-gray-800 dark:!text-gray-500':
|
||||
pagination.currentPage === pagination.totalPages,
|
||||
}"
|
||||
class="
|
||||
@ -57,6 +59,7 @@
|
||||
border border-gray-300
|
||||
rounded-md
|
||||
hover:bg-gray-50
|
||||
dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300
|
||||
"
|
||||
@click="pageClicked(pagination.currentPage + 1)"
|
||||
>
|
||||
@ -65,12 +68,12 @@
|
||||
</div>
|
||||
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-gray-700">
|
||||
<p class="text-sm text-gray-700 dark:text-gray-400">
|
||||
Showing
|
||||
{{ ' ' }}
|
||||
<span
|
||||
v-if="pagination.limit && pagination.currentPage"
|
||||
class="font-medium"
|
||||
class="font-medium dark:text-gray-200"
|
||||
>
|
||||
{{
|
||||
pagination.currentPage * pagination.limit - (pagination.limit - 1)
|
||||
@ -81,7 +84,7 @@
|
||||
{{ ' ' }}
|
||||
<span
|
||||
v-if="pagination.limit && pagination.currentPage"
|
||||
class="font-medium"
|
||||
class="font-medium dark:text-gray-200"
|
||||
>
|
||||
<span
|
||||
v-if="
|
||||
@ -98,7 +101,7 @@
|
||||
{{ ' ' }}
|
||||
of
|
||||
{{ ' ' }}
|
||||
<span v-if="pagination.totalCount" class="font-medium">
|
||||
<span v-if="pagination.totalCount" class="font-medium dark:text-gray-200">
|
||||
{{ pagination.totalCount }}
|
||||
</span>
|
||||
{{ ' ' }}
|
||||
@ -113,7 +116,7 @@
|
||||
<a
|
||||
href="#"
|
||||
:class="{
|
||||
'disabled cursor-normal pointer-events-none !bg-gray-100 !text-gray-400':
|
||||
'disabled cursor-normal pointer-events-none !bg-gray-100 !text-gray-400 dark:!bg-gray-800 dark:!text-gray-500':
|
||||
pagination.currentPage === 1,
|
||||
}"
|
||||
class="
|
||||
@ -129,6 +132,7 @@
|
||||
border border-gray-300
|
||||
rounded-l-md
|
||||
hover:bg-gray-50
|
||||
dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300
|
||||
"
|
||||
@click="pageClicked(pagination.currentPage - 1)"
|
||||
>
|
||||
@ -140,9 +144,9 @@
|
||||
href="#"
|
||||
aria-current="page"
|
||||
:class="{
|
||||
'z-10 bg-primary-50 border-primary-500 text-primary-600':
|
||||
'z-10 bg-primary-50 border-primary-500 text-primary-600 dark:bg-primary-500 dark:text-white':
|
||||
isActive(1),
|
||||
'bg-white border-gray-300 text-gray-500 hover:bg-gray-50':
|
||||
'bg-white border-gray-300 text-gray-500 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300':
|
||||
!isActive(1),
|
||||
}"
|
||||
class="
|
||||
@ -173,6 +177,7 @@
|
||||
text-gray-700
|
||||
bg-white
|
||||
border border-gray-300
|
||||
dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300
|
||||
"
|
||||
>
|
||||
...
|
||||
@ -182,9 +187,9 @@
|
||||
:key="page"
|
||||
href="#"
|
||||
:class="{
|
||||
'z-10 bg-primary-50 border-primary-500 text-primary-600':
|
||||
'z-10 bg-primary-50 border-primary-500 text-primary-600 dark:bg-primary-500 dark:text-white':
|
||||
isActive(page),
|
||||
'bg-white border-gray-300 text-gray-500 hover:bg-gray-50':
|
||||
'bg-white border-gray-300 text-gray-500 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300':
|
||||
!isActive(page),
|
||||
disabled: page === '...',
|
||||
}"
|
||||
@ -220,6 +225,7 @@
|
||||
text-gray-700
|
||||
bg-white
|
||||
border border-gray-300
|
||||
dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300
|
||||
"
|
||||
>
|
||||
...
|
||||
@ -229,9 +235,9 @@
|
||||
href="#"
|
||||
aria-current="page"
|
||||
:class="{
|
||||
'z-10 bg-primary-50 border-primary-500 text-primary-600':
|
||||
'z-10 bg-primary-50 border-primary-500 text-primary-600 dark:bg-primary-500 dark:text-white':
|
||||
isActive(pagination.totalPages),
|
||||
'bg-white border-gray-300 text-gray-500 hover:bg-gray-50':
|
||||
'bg-white border-gray-300 text-gray-500 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300':
|
||||
!isActive(pagination.totalPages),
|
||||
}"
|
||||
class="
|
||||
@ -263,9 +269,10 @@
|
||||
border border-gray-300
|
||||
rounded-r-md
|
||||
hover:bg-gray-50
|
||||
dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300
|
||||
"
|
||||
:class="{
|
||||
'disabled cursor-default pointer-events-none !bg-gray-100 !text-gray-400':
|
||||
'disabled cursor-default pointer-events-none !bg-gray-100 !text-gray-400 dark:!bg-gray-800 dark:!text-gray-500':
|
||||
pagination.currentPage === pagination.totalPages,
|
||||
}"
|
||||
@click="pageClicked(pagination.currentPage + 1)"
|
||||
|
||||
@ -3,23 +3,26 @@
|
||||
width="50"
|
||||
height="50"
|
||||
viewBox="0 0 50 50"
|
||||
:class="colorClass"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle cx="25" cy="25" r="25" fill="#EAF1FB" />
|
||||
<circle cx="25" cy="25" r="25" :class="bgColor" />
|
||||
<path
|
||||
d="M28.2656 23.0547C27.3021 24.0182 26.1302 24.5 24.75 24.5C23.3698 24.5 22.1849 24.0182 21.1953 23.0547C20.2318 22.0651 19.75 20.8802 19.75 19.5C19.75 18.1198 20.2318 16.9479 21.1953 15.9844C22.1849 14.9948 23.3698 14.5 24.75 14.5C26.1302 14.5 27.3021 14.9948 28.2656 15.9844C29.2552 16.9479 29.75 18.1198 29.75 19.5C29.75 20.8802 29.2552 22.0651 28.2656 23.0547ZM28.2656 25.75C29.6979 25.75 30.9219 26.2708 31.9375 27.3125C32.9792 28.3281 33.5 29.5521 33.5 30.9844V32.625C33.5 33.1458 33.3177 33.5885 32.9531 33.9531C32.5885 34.3177 32.1458 34.5 31.625 34.5H17.875C17.3542 34.5 16.9115 34.3177 16.5469 33.9531C16.1823 33.5885 16 33.1458 16 32.625V30.9844C16 29.5521 16.5078 28.3281 17.5234 27.3125C18.5651 26.2708 19.8021 25.75 21.2344 25.75H21.8984C22.8099 26.1667 23.7604 26.375 24.75 26.375C25.7396 26.375 26.6901 26.1667 27.6016 25.75H28.2656Z"
|
||||
fill="currentColor"
|
||||
:class="color"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
colorClass: {
|
||||
color: {
|
||||
type: String,
|
||||
default: 'text-primary-500',
|
||||
default: 'fill-primary-500 dark:fill-white',
|
||||
},
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: 'fill-gray-100 dark:fill-primary-400',
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -6,10 +6,24 @@
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle cx="25" cy="25" r="25" fill="#FDE4E5" />
|
||||
<circle :class="bgColor" cx="25" cy="25" r="25" />
|
||||
<path
|
||||
:class="color"
|
||||
d="M27.2031 23.6016C28.349 23.9401 29.2083 24.6562 29.7812 25.75C30.3802 26.8438 30.4714 27.9766 30.0547 29.1484C29.7422 30.0078 29.2083 30.6979 28.4531 31.2188C27.6979 31.7135 26.8516 31.974 25.9141 32V33.875C25.9141 34.0573 25.849 34.2005 25.7188 34.3047C25.6146 34.4349 25.4714 34.5 25.2891 34.5H24.0391C23.8568 34.5 23.7005 34.4349 23.5703 34.3047C23.4661 34.2005 23.4141 34.0573 23.4141 33.875V32C22.1641 32 21.0443 31.6094 20.0547 30.8281C19.8984 30.6979 19.8073 30.5417 19.7812 30.3594C19.7552 30.1771 19.8203 30.0208 19.9766 29.8906L21.3047 28.5625C21.5651 28.3281 21.8255 28.3021 22.0859 28.4844C22.4766 28.7448 22.9193 28.875 23.4141 28.875H25.9922C26.3307 28.875 26.6042 28.7708 26.8125 28.5625C27.0469 28.3281 27.1641 28.0417 27.1641 27.7031C27.1641 27.1302 26.8906 26.7656 26.3438 26.6094L22.3203 25.4375C21.4349 25.1771 20.6927 24.7083 20.0938 24.0312C19.4948 23.3542 19.1432 22.5729 19.0391 21.6875C18.9349 20.4115 19.2995 19.3177 20.1328 18.4062C20.9922 17.4688 22.0599 17 23.3359 17H23.4141V15.125C23.4141 14.9427 23.4661 14.7995 23.5703 14.6953C23.7005 14.5651 23.8568 14.5 24.0391 14.5H25.2891C25.4714 14.5 25.6146 14.5651 25.7188 14.6953C25.849 14.7995 25.9141 14.9427 25.9141 15.125V17C27.1641 17 28.2839 17.3906 29.2734 18.1719C29.4297 18.3021 29.5208 18.4583 29.5469 18.6406C29.5729 18.8229 29.5078 18.9792 29.3516 19.1094L28.0234 20.4375C27.763 20.6719 27.5026 20.6979 27.2422 20.5156C26.8516 20.2552 26.4089 20.125 25.9141 20.125H23.3359C22.9974 20.125 22.7109 20.2422 22.4766 20.4766C22.2682 20.6849 22.1641 20.9583 22.1641 21.2969C22.1641 21.5312 22.2422 21.7526 22.3984 21.9609C22.5547 22.1693 22.75 22.3125 22.9844 22.3906L27.2031 23.6016Z"
|
||||
fill="#FB7178"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
color: {
|
||||
type: String,
|
||||
default: 'fill-red-400 dark:fill-white',
|
||||
},
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: 'fill-red-100 dark:fill-red-400',
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
@ -5,21 +5,24 @@
|
||||
viewBox="0 0 50 50"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
:class="colorClass"
|
||||
>
|
||||
<circle cx="25" cy="25" r="25" fill="#EAF1FB" />
|
||||
<circle cx="25" cy="25" r="25" :class="bgColor" />
|
||||
<path
|
||||
d="M26.75 19.8125C26.75 20.0729 26.8411 20.2943 27.0234 20.4766C27.2057 20.6589 27.4271 20.75 27.6875 20.75H33V33.5625C33 33.8229 32.9089 34.0443 32.7266 34.2266C32.5443 34.4089 32.3229 34.5 32.0625 34.5H18.9375C18.6771 34.5 18.4557 34.4089 18.2734 34.2266C18.0911 34.0443 18 33.8229 18 33.5625V15.4375C18 15.1771 18.0911 14.9557 18.2734 14.7734C18.4557 14.5911 18.6771 14.5 18.9375 14.5H26.75V19.8125ZM33 19.2656V19.5H28V14.5H28.2344C28.4948 14.5 28.7161 14.5911 28.8984 14.7734L32.7266 18.6016C32.9089 18.7839 33 19.0052 33 19.2656Z"
|
||||
fill="currentColor"
|
||||
:class="color"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
colorClass: {
|
||||
color: {
|
||||
type: String,
|
||||
default: 'text-primary-500',
|
||||
default: 'fill-primary-500 dark:fill-white',
|
||||
},
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: 'fill-gray-100 dark:fill-primary-400',
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -5,21 +5,24 @@
|
||||
viewBox="0 0 50 50"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
:class="colorClass"
|
||||
>
|
||||
<circle cx="25" cy="25" r="25" fill="#EAF1FB" />
|
||||
<circle cx="25" cy="25" r="25" :class="bgColor" />
|
||||
<path
|
||||
d="M28.25 24.5V27H20.75V24.5H28.25ZM31.7266 18.6016C31.9089 18.7839 32 19.0052 32 19.2656V19.5H27V14.5H27.2344C27.4948 14.5 27.7161 14.5911 27.8984 14.7734L31.7266 18.6016ZM25.75 19.8125C25.75 20.0729 25.8411 20.2943 26.0234 20.4766C26.2057 20.6589 26.4271 20.75 26.6875 20.75H32V33.5625C32 33.8229 31.9089 34.0443 31.7266 34.2266C31.5443 34.4089 31.3229 34.5 31.0625 34.5H17.9375C17.6771 34.5 17.4557 34.4089 17.2734 34.2266C17.0911 34.0443 17 33.8229 17 33.5625V15.4375C17 15.1771 17.0911 14.9557 17.2734 14.7734C17.4557 14.5911 17.6771 14.5 17.9375 14.5H25.75V19.8125ZM19.5 17.3125V17.9375C19.5 18.1458 19.6042 18.25 19.8125 18.25H22.9375C23.1458 18.25 23.25 18.1458 23.25 17.9375V17.3125C23.25 17.1042 23.1458 17 22.9375 17H19.8125C19.6042 17 19.5 17.1042 19.5 17.3125ZM19.5 19.8125V20.4375C19.5 20.6458 19.6042 20.75 19.8125 20.75H22.9375C23.1458 20.75 23.25 20.6458 23.25 20.4375V19.8125C23.25 19.6042 23.1458 19.5 22.9375 19.5H19.8125C19.6042 19.5 19.5 19.6042 19.5 19.8125ZM29.5 31.6875V31.0625C29.5 30.8542 29.3958 30.75 29.1875 30.75H26.0625C25.8542 30.75 25.75 30.8542 25.75 31.0625V31.6875C25.75 31.8958 25.8542 32 26.0625 32H29.1875C29.3958 32 29.5 31.8958 29.5 31.6875ZM29.5 23.875C29.5 23.6927 29.4349 23.5495 29.3047 23.4453C29.2005 23.3151 29.0573 23.25 28.875 23.25H20.125C19.9427 23.25 19.7865 23.3151 19.6562 23.4453C19.5521 23.5495 19.5 23.6927 19.5 23.875V27.625C19.5 27.8073 19.5521 27.9635 19.6562 28.0938C19.7865 28.1979 19.9427 28.25 20.125 28.25H28.875C29.0573 28.25 29.2005 28.1979 29.3047 28.0938C29.4349 27.9635 29.5 27.8073 29.5 27.625V23.875Z"
|
||||
fill="currentColor"
|
||||
:class="color"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
colorClass: {
|
||||
color: {
|
||||
type: String,
|
||||
default: 'text-primary-500',
|
||||
default: 'fill-primary-500 dark:fill-white',
|
||||
},
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: 'fill-gray-100 dark:fill-primary-400',
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -5,27 +5,30 @@
|
||||
viewBox="0 0 50 50"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
:class="colorClass"
|
||||
>
|
||||
<circle cx="25" cy="25" r="25" fill="#EAF1FB" />
|
||||
<circle cx="25" cy="25" r="25" :class="bgColor" />
|
||||
<path
|
||||
d="M17.8 17.8C17.1635 17.8 16.5531 18.0529 16.103 18.503C15.6529 18.9531 15.4 19.5635 15.4 20.2V21.4H34.6V20.2C34.6 19.5635 34.3472 18.9531 33.8971 18.503C33.447 18.0529 32.8365 17.8 32.2 17.8H17.8Z"
|
||||
fill="currentColor"
|
||||
:class="color"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M34.6 23.8H15.4V29.8C15.4 30.4366 15.6529 31.047 16.103 31.4971C16.5531 31.9472 17.1635 32.2 17.8 32.2H32.2C32.8365 32.2 33.447 31.9472 33.8971 31.4971C34.3472 31.047 34.6 30.4366 34.6 29.8V23.8ZM17.8 28.6C17.8 28.2818 17.9265 27.9766 18.1515 27.7515C18.3765 27.5265 18.6818 27.4 19 27.4H20.2C20.5183 27.4 20.8235 27.5265 21.0486 27.7515C21.2736 27.9766 21.4 28.2818 21.4 28.6C21.4 28.9183 21.2736 29.2235 21.0486 29.4486C20.8235 29.6736 20.5183 29.8 20.2 29.8H19C18.6818 29.8 18.3765 29.6736 18.1515 29.4486C17.9265 29.2235 17.8 28.9183 17.8 28.6ZM23.8 27.4C23.4818 27.4 23.1765 27.5265 22.9515 27.7515C22.7265 27.9766 22.6 28.2818 22.6 28.6C22.6 28.9183 22.7265 29.2235 22.9515 29.4486C23.1765 29.6736 23.4818 29.8 23.8 29.8H25C25.3183 29.8 25.6235 29.6736 25.8486 29.4486C26.0736 29.2235 26.2 28.9183 26.2 28.6C26.2 28.2818 26.0736 27.9766 25.8486 27.7515C25.6235 27.5265 25.3183 27.4 25 27.4H23.8Z"
|
||||
fill="currentColor"
|
||||
:class="color"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
colorClass: {
|
||||
color: {
|
||||
type: String,
|
||||
default: 'text-primary-500',
|
||||
default: 'fill-primary-500 dark:fill-white',
|
||||
},
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: 'fill-gray-100 dark:fill-primary-400',
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -33,8 +33,8 @@ export default {
|
||||
return !!slots.icon
|
||||
})
|
||||
let containerClass = computed(() => {
|
||||
if (props.active) return `${defaultClass} text-primary-500`
|
||||
else return `${defaultClass} text-gray-500`
|
||||
if (props.active) return `${defaultClass} text-primary-500 dark:text-primary-400`
|
||||
else return `${defaultClass} text-gray-500 dark:text-gray-300`
|
||||
})
|
||||
return {
|
||||
hasIconSlot,
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
<template>
|
||||
<div
|
||||
:class="success || info ? 'bg-white' : 'bg-red-50'"
|
||||
:class="success || info
|
||||
? 'bg-white dark:border dark:border-white/10 dark:text-white dark:bg-gray-800/[.80] dark:shadow-glass dark:backdrop-blur-sm'
|
||||
: 'bg-red-50 dark:bg-red-400/[.70] dark:shadow-glass dark:backdrop-blur-sm'"
|
||||
class="
|
||||
max-w-sm
|
||||
mb-3
|
||||
@ -48,7 +50,7 @@
|
||||
</svg>
|
||||
<svg
|
||||
v-if="error"
|
||||
class="w-6 h-6 text-red-400"
|
||||
class="w-6 h-6 text-red-400 dark:text-white"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
@ -62,7 +64,9 @@
|
||||
<div class="flex-1 w-0 ml-3 text-left">
|
||||
<p
|
||||
:class="`text-sm leading-5 font-medium ${
|
||||
success || info ? 'text-gray-900' : 'text-red-800'
|
||||
success || info
|
||||
? 'text-gray-900 dark:text-white'
|
||||
: 'text-red-800 dark:text-white'
|
||||
}`"
|
||||
>
|
||||
{{
|
||||
@ -75,7 +79,9 @@
|
||||
</p>
|
||||
<p
|
||||
:class="`mt-1 text-sm leading-5 ${
|
||||
success || info ? 'text-gray-500' : 'text-red-700'
|
||||
success || info
|
||||
? 'text-gray-500 dark:text-gray-400'
|
||||
: 'text-red-700 dark:text-red-200'
|
||||
}`"
|
||||
>
|
||||
{{
|
||||
@ -92,7 +98,7 @@
|
||||
:class="
|
||||
success || info
|
||||
? ' text-gray-400 focus:text-gray-500'
|
||||
: 'text-red-400 focus:text-red-500'
|
||||
: 'text-red-400 focus:text-red-500 dark:text-red-100'
|
||||
"
|
||||
class="
|
||||
inline-flex
|
||||
|
||||
@ -2,8 +2,9 @@
|
||||
<Disclosure
|
||||
v-slot="{ open }"
|
||||
as="nav"
|
||||
class="bg-white shadow-sm fixed top-0 left-0 z-20 w-full"
|
||||
class="bg-white shadow-sm fixed top-0 left-0 z-20 w-full dark:bg-gray-800"
|
||||
>
|
||||
<BaseDarkHighlight />
|
||||
<div class="mx-auto px-8">
|
||||
<div class="flex justify-between h-16 w-full">
|
||||
<div class="flex">
|
||||
@ -33,8 +34,8 @@
|
||||
:to="`/${globalStore.companySlug}${item.link}`"
|
||||
:class="[
|
||||
hasActiveUrl(item.link)
|
||||
? 'border-primary-500 text-primary-600'
|
||||
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300',
|
||||
? 'border-primary-500 text-primary-600 dark:text-primary-400'
|
||||
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-200',
|
||||
'inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium',
|
||||
]"
|
||||
>
|
||||
@ -43,20 +44,6 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden sm:ml-6 sm:flex sm:items-center">
|
||||
<button
|
||||
type="button"
|
||||
class="
|
||||
bg-white
|
||||
p-1
|
||||
rounded-full
|
||||
text-gray-400
|
||||
hover:text-gray-500
|
||||
focus:outline-none
|
||||
focus:ring-2
|
||||
focus:ring-offset-2
|
||||
focus:ring-primary-500
|
||||
"
|
||||
></button>
|
||||
|
||||
<!-- Profile dropdown -->
|
||||
|
||||
@ -85,7 +72,7 @@
|
||||
<router-link :to="{ name: 'customer.profile' }">
|
||||
<BaseDropdownItem>
|
||||
<CogIcon
|
||||
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
|
||||
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500 dark:group-hover:text-gray-200"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{{ $t('navigation.settings') }}
|
||||
@ -94,7 +81,7 @@
|
||||
|
||||
<BaseDropdownItem @click="logout">
|
||||
<LogoutIcon
|
||||
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
|
||||
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500 dark:group-hover:text-gray-200"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{{ $t('navigation.logout') }}
|
||||
@ -118,6 +105,8 @@
|
||||
focus:ring-2
|
||||
focus:ring-offset-2
|
||||
focus:ring-primary-500
|
||||
dark:bg-gray-700
|
||||
dark:focus:ring-offset-gray-900
|
||||
"
|
||||
>
|
||||
<span class="sr-only">Open main menu</span>
|
||||
@ -136,15 +125,15 @@
|
||||
:to="`/${globalStore.companySlug}${item.link}`"
|
||||
:class="[
|
||||
hasActiveUrl(item.link)
|
||||
? 'bg-primary-50 border-primary-500 text-primary-700'
|
||||
: 'border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800',
|
||||
? 'bg-primary-50 border-primary-500 text-primary-700 dark:bg-gray-700 dark:text-primary-400'
|
||||
: 'border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 dark:text-gray-200 dark:hover:bg-gray-700',
|
||||
'block pl-3 pr-4 py-2 border-l-4 text-base font-medium',
|
||||
]"
|
||||
:aria-current="item.current ? 'page' : undefined"
|
||||
>{{ item.title }}
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="pt-4 pb-3 border-t border-gray-200">
|
||||
<div class="pt-4 pb-3 border-t border-gray-200 dark:border-gray-500">
|
||||
<div class="flex items-center px-4">
|
||||
<div class="shrink-0">
|
||||
<img class="h-10 w-10 rounded-full" :src="previewAvatar" alt="" />
|
||||
@ -153,26 +142,10 @@
|
||||
<div class="text-base font-medium text-gray-800">
|
||||
{{ globalStore.currentUser.title }}
|
||||
</div>
|
||||
<div class="text-sm font-medium text-gray-500">
|
||||
<div class="text-sm font-medium text-gray-500 dark:text-gray-200">
|
||||
{{ globalStore.currentUser.email }}
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="
|
||||
ml-auto
|
||||
bg-white
|
||||
shrink-0
|
||||
p-1
|
||||
rounded-full
|
||||
text-gray-400
|
||||
hover:text-gray-500
|
||||
focus:outline-none
|
||||
focus:ring-2
|
||||
focus:ring-offset-2
|
||||
focus:ring-primary-500
|
||||
"
|
||||
></button>
|
||||
</div>
|
||||
<div class="mt-3 space-y-1">
|
||||
<router-link
|
||||
@ -182,7 +155,7 @@
|
||||
:class="[
|
||||
hasActiveUrl(item.link)
|
||||
? 'bg-primary-50 border-primary-500 text-primary-700'
|
||||
: 'border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800',
|
||||
: 'border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 dark:text-gray-200 dark:hover:bg-gray-700',
|
||||
'block pl-3 pr-4 py-2 border-l-4 text-base font-medium',
|
||||
]"
|
||||
>{{ item.title }}</router-link
|
||||
|
||||
@ -12,18 +12,24 @@
|
||||
hover:bg-gray-50
|
||||
xl:p-4
|
||||
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 }"
|
||||
:to="route"
|
||||
>
|
||||
<div>
|
||||
<span class="text-xl font-semibold leading-tight text-black xl:text-3xl">
|
||||
<span class="text-xl font-semibold leading-tight text-black xl:text-3xl dark:text-white">
|
||||
<slot />
|
||||
</span>
|
||||
<span class="block mt-1 text-sm leading-tight text-gray-500 xl:text-lg">
|
||||
<span class="block mt-1 text-sm leading-tight text-gray-500 xl:text-lg dark:text-gray-300">
|
||||
{{ label }}
|
||||
</span>
|
||||
</div>
|
||||
<BaseDarkHighlight class="!bg-highlight/[.17] !top-5" />
|
||||
<div class="flex items-center">
|
||||
<component :is="iconComponent" class="w-10 h-10 xl:w-12 xl:h-12" />
|
||||
</div>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<BaseContentPlaceholders
|
||||
:rounded="true"
|
||||
class="relative flex justify-between w-full p-3 bg-white rounded shadow lg:col-span-3 xl:p-4"
|
||||
class="relative flex justify-between w-full p-3 bg-white rounded shadow lg:col-span-3 xl:p-4 dark:bg-gray-800"
|
||||
>
|
||||
<div>
|
||||
<BaseContentPlaceholdersText
|
||||
|
||||
@ -12,6 +12,7 @@
|
||||
shadow
|
||||
lg:col-span-2
|
||||
xl:p-4
|
||||
dark:bg-gray-800
|
||||
"
|
||||
>
|
||||
<div>
|
||||
|
||||
@ -119,11 +119,11 @@
|
||||
<template #cell-actions="{ row }">
|
||||
<BaseDropdown>
|
||||
<template #activator>
|
||||
<BaseIcon name="DotsHorizontalIcon" class="h-5 text-gray-500" />
|
||||
<BaseIcon name="DotsHorizontalIcon" class="h-5 text-gray-500 dark:text-gray-200" />
|
||||
</template>
|
||||
<router-link :to="`estimates/${row.data.id}/view`">
|
||||
<BaseDropdownItem>
|
||||
<BaseIcon name="EyeIcon" class="h-5 mr-3 text-gray-600" />
|
||||
<BaseIcon name="EyeIcon" class="h-5 mr-3 text-gray-600 dark:text-gray-200" />
|
||||
{{ $t('general.view') }}
|
||||
</BaseDropdownItem>
|
||||
</router-link>
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
|
||||
<!-- Sidebar -->
|
||||
<div
|
||||
class="fixed top-0 left-0 hidden h-full pt-16 pb-4 bg-white w-88 xl:block"
|
||||
class="fixed top-0 left-0 hidden h-full pt-16 pb-4 bg-white w-88 xl:block dark:bg-gray-800"
|
||||
>
|
||||
<div
|
||||
class="
|
||||
@ -36,6 +36,7 @@
|
||||
pt-8
|
||||
pb-6
|
||||
border border-gray-200 border-solid
|
||||
dark:border-gray-600
|
||||
"
|
||||
>
|
||||
<BaseInput
|
||||
@ -70,6 +71,7 @@
|
||||
mb-2
|
||||
text-sm
|
||||
border-b border-gray-200 border-solid
|
||||
dark:border-gray-600
|
||||
"
|
||||
>
|
||||
{{ $t('general.sort_by') }}
|
||||
@ -124,7 +126,7 @@
|
||||
</div>
|
||||
</BaseDropdown>
|
||||
|
||||
<BaseButton class="ml-1" variant="white" @click="sortData">
|
||||
<BaseButton class="ml-1" variant="gray" @click="sortData">
|
||||
<BaseIcon v-if="getOrderBy" name="SortAscendingIcon" class="h-5" />
|
||||
<BaseIcon v-else name="SortDescendingIcon" class="h-5" />
|
||||
</BaseButton>
|
||||
@ -138,6 +140,7 @@
|
||||
overflow-y-scroll
|
||||
border-l border-gray-200 border-solid
|
||||
sw-scroll
|
||||
dark:border-gray-600
|
||||
"
|
||||
>
|
||||
<router-link
|
||||
@ -146,9 +149,9 @@
|
||||
:key="index"
|
||||
:to="`/${globalStore.companySlug}/customer/estimates/${estimate.id}/view`"
|
||||
:class="[
|
||||
'flex justify-between p-4 items-center cursor-pointer hover:bg-gray-100 border-l-4 border-transparent',
|
||||
'flex justify-between p-4 items-center cursor-pointer hover:bg-gray-100 border-l-4 border-transparent dark:hover:bg-gray-700',
|
||||
{
|
||||
'bg-gray-100 border-l-4 border-primary-500 border-solid':
|
||||
'bg-gray-100 border-l-4 border-primary-500 border-solid dark:bg-gray-700':
|
||||
hasActiveUrl(estimate.id),
|
||||
},
|
||||
]"
|
||||
@ -164,6 +167,7 @@
|
||||
leading-5
|
||||
text-gray-500
|
||||
capitalize
|
||||
dark:text-gray-400
|
||||
"
|
||||
>
|
||||
{{ estimate.estimate_number }}
|
||||
@ -184,11 +188,12 @@
|
||||
leading-8
|
||||
text-right text-gray-900
|
||||
block
|
||||
dark:text-white
|
||||
"
|
||||
:amount="estimate.total"
|
||||
:currency="estimate.currency"
|
||||
/>
|
||||
<div class="text-sm text-right text-gray-500 non-italic">
|
||||
<div class="text-sm text-right text-gray-500 dark:text-gray-400 non-italic">
|
||||
{{ estimate.formatted_estimate_date }}
|
||||
</div>
|
||||
</div>
|
||||
@ -196,7 +201,7 @@
|
||||
|
||||
<p
|
||||
v-if="!estimateStore.estimates.length"
|
||||
class="flex justify-center px-4 mt-5 text-sm text-gray-600"
|
||||
class="flex justify-center px-4 mt-5 text-sm text-gray-600 dark:text-gray-300"
|
||||
>
|
||||
{{ $t('estimates.no_matching_estimates') }}
|
||||
</p>
|
||||
|
||||
@ -126,11 +126,11 @@
|
||||
<template #cell-actions="{ row }">
|
||||
<BaseDropdown>
|
||||
<template #activator>
|
||||
<BaseIcon name="DotsHorizontalIcon" class="h-5 text-gray-500" />
|
||||
<BaseIcon name="DotsHorizontalIcon" class="h-5 text-gray-500 dark:text-gray-200" />
|
||||
</template>
|
||||
<router-link :to="`invoices/${row.data.id}/view`">
|
||||
<BaseDropdownItem>
|
||||
<BaseIcon name="EyeIcon" class="h-5 mr-3 text-gray-600" />
|
||||
<BaseIcon name="EyeIcon" class="h-5 mr-3 text-gray-600 dark:text-gray-200" />
|
||||
{{ $t('general.view') }}
|
||||
</BaseDropdownItem>
|
||||
</router-link>
|
||||
|
||||
@ -31,7 +31,7 @@
|
||||
|
||||
<!-- Sidebar -->
|
||||
<div
|
||||
class="fixed top-0 left-0 hidden h-full pt-16 pb-4 bg-white w-88 xl:block"
|
||||
class="fixed top-0 left-0 hidden h-full pt-16 pb-4 bg-white w-88 xl:block dark:bg-gray-800"
|
||||
>
|
||||
<div
|
||||
class="
|
||||
@ -42,6 +42,7 @@
|
||||
pt-8
|
||||
pb-6
|
||||
border border-gray-200 border-solid
|
||||
dark:border-gray-600
|
||||
"
|
||||
>
|
||||
<BaseInput
|
||||
@ -76,6 +77,7 @@
|
||||
mb-2
|
||||
text-sm
|
||||
border-b border-gray-200 border-solid
|
||||
dark:border-gray-600
|
||||
"
|
||||
>
|
||||
{{ $t('general.sort_by') }}
|
||||
@ -130,7 +132,7 @@
|
||||
</div>
|
||||
</BaseDropdown>
|
||||
|
||||
<BaseButton class="ml-1" variant="white" @click="sortData">
|
||||
<BaseButton class="ml-1" variant="gray" @click="sortData">
|
||||
<BaseIcon v-if="getOrderBy" name="SortAscendingIcon" class="h-5" />
|
||||
<BaseIcon v-else name="SortDescendingIcon" class="h-5" />
|
||||
</BaseButton>
|
||||
@ -144,6 +146,7 @@
|
||||
overflow-y-scroll
|
||||
border-l border-gray-200 border-solid
|
||||
sw-scroll
|
||||
dark:border-gray-600
|
||||
"
|
||||
>
|
||||
<router-link
|
||||
@ -152,9 +155,9 @@
|
||||
:key="index"
|
||||
:to="`/${globalStore.companySlug}/customer/invoices/${invoice.id}/view`"
|
||||
:class="[
|
||||
'flex justify-between p-4 items-center cursor-pointer hover:bg-gray-100 border-l-4 border-transparent',
|
||||
'flex justify-between p-4 items-center cursor-pointer hover:bg-gray-100 border-l-4 border-transparent dark:hover:bg-gray-700',
|
||||
{
|
||||
'bg-gray-100 border-l-4 border-primary-500 border-solid':
|
||||
'bg-gray-100 border-l-4 border-primary-500 border-solid dark:bg-gray-700':
|
||||
hasActiveUrl(invoice.id),
|
||||
},
|
||||
]"
|
||||
@ -170,6 +173,7 @@
|
||||
text-gray-500
|
||||
capitalize
|
||||
text-md
|
||||
dark:text-gray-400
|
||||
"
|
||||
>
|
||||
{{ invoice.invoice_number }}
|
||||
@ -189,12 +193,13 @@
|
||||
leading-8
|
||||
text-right text-gray-900
|
||||
block
|
||||
dark:text-white
|
||||
"
|
||||
:amount="invoice.total"
|
||||
:currency="invoice.currency"
|
||||
/>
|
||||
|
||||
<div class="text-sm text-right text-gray-500 non-italic">
|
||||
<div class="text-sm text-right text-gray-500 dark:text-gray-400 non-italic">
|
||||
{{ invoice.formatted_invoice_date }}
|
||||
</div>
|
||||
</div>
|
||||
@ -202,7 +207,7 @@
|
||||
|
||||
<p
|
||||
v-if="!invoiceStore.invoices.length"
|
||||
class="flex justify-center px-4 mt-5 text-sm text-gray-600"
|
||||
class="flex justify-center px-4 mt-5 text-sm text-gray-600 dark:text-gray-300"
|
||||
>
|
||||
{{ $t('invoices.no_matching_invoices') }}
|
||||
</p>
|
||||
|
||||
@ -111,11 +111,11 @@
|
||||
<template #cell-actions="{ row }">
|
||||
<BaseDropdown>
|
||||
<template #activator>
|
||||
<BaseIcon name="DotsHorizontalIcon" class="w-5 text-gray-500" />
|
||||
<BaseIcon name="DotsHorizontalIcon" class="w-5 text-gray-500 dark:text-gray-200" />
|
||||
</template>
|
||||
<router-link :to="`payments/${row.data.id}/view`">
|
||||
<BaseDropdownItem>
|
||||
<BaseIcon name="EyeIcon" class="h-5 mr-3 text-gray-600" />
|
||||
<BaseIcon name="EyeIcon" class="h-5 mr-3 text-gray-600 dark:text-gray-200" />
|
||||
{{ $t('general.view') }}
|
||||
</BaseDropdownItem>
|
||||
</router-link>
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
|
||||
<!-- Sidebar -->
|
||||
<div
|
||||
class="fixed top-0 left-0 hidden h-full pt-16 pb-4 bg-white w-88 xl:block"
|
||||
class="fixed top-0 left-0 hidden h-full pt-16 pb-4 bg-white w-88 xl:block dark:bg-gray-800"
|
||||
>
|
||||
<div
|
||||
class="
|
||||
@ -30,6 +30,7 @@
|
||||
pt-8
|
||||
pb-6
|
||||
border border-gray-200 border-solid
|
||||
dark:border-gray-600
|
||||
"
|
||||
>
|
||||
<BaseInput
|
||||
@ -64,6 +65,7 @@
|
||||
mb-2
|
||||
text-sm
|
||||
border-b border-gray-200 border-solid
|
||||
dark:border-gray-600
|
||||
"
|
||||
>
|
||||
{{ $t('general.sort_by') }}
|
||||
@ -118,7 +120,7 @@
|
||||
</div>
|
||||
</BaseDropdown>
|
||||
|
||||
<BaseButton class="ml-1" variant="white" @click="sortData">
|
||||
<BaseButton class="ml-1" variant="gray" @click="sortData">
|
||||
<BaseIcon v-if="getOrderBy" name="SortAscendingIcon" class="h-5" />
|
||||
<BaseIcon v-else name="SortDescendingIcon" class="h-5" />
|
||||
</BaseButton>
|
||||
@ -132,6 +134,7 @@
|
||||
overflow-y-scroll
|
||||
border-l border-gray-200 border-solid
|
||||
sw-scroll
|
||||
dark:border-gray-600
|
||||
"
|
||||
>
|
||||
<router-link
|
||||
@ -140,9 +143,9 @@
|
||||
:key="index"
|
||||
:to="`/${globalStore.companySlug}/customer/payments/${payment.id}/view`"
|
||||
:class="[
|
||||
'flex justify-between p-4 items-center cursor-pointer hover:bg-gray-100 border-l-4 border-transparent',
|
||||
'flex justify-between p-4 items-center cursor-pointer hover:bg-gray-100 border-l-4 border-transparent dark:hover:bg-gray-700',
|
||||
{
|
||||
'bg-gray-100 border-l-4 border-primary-500 border-solid':
|
||||
'bg-gray-100 border-l-4 border-primary-500 border-solid dark:bg-gray-700':
|
||||
hasActiveUrl(payment.id),
|
||||
},
|
||||
]"
|
||||
@ -158,6 +161,7 @@
|
||||
leading-5
|
||||
text-gray-500
|
||||
capitalize
|
||||
dark:text-gray-400
|
||||
"
|
||||
>
|
||||
{{ payment.payment_number }}
|
||||
@ -174,12 +178,13 @@
|
||||
leading-8
|
||||
text-right text-gray-900
|
||||
block
|
||||
dark:text-white
|
||||
"
|
||||
:amount="payment.amount"
|
||||
:currency="payment.currency"
|
||||
/>
|
||||
|
||||
<div class="text-sm text-right text-gray-500 non-italic">
|
||||
<div class="text-sm text-right text-gray-500 dark:text-gray-400 non-italic">
|
||||
{{ payment.formatted_payment_date }}
|
||||
</div>
|
||||
</div>
|
||||
@ -187,7 +192,7 @@
|
||||
|
||||
<p
|
||||
v-if="!paymentStore.payments.length"
|
||||
class="flex justify-center px-4 mt-5 text-sm text-gray-600"
|
||||
class="flex justify-center px-4 mt-5 text-sm text-gray-600 dark:text-gray-300"
|
||||
>
|
||||
{{ $t('payments.no_matching_payments') }}
|
||||
</p>
|
||||
|
||||
@ -36,6 +36,7 @@ module.exports = {
|
||||
900: withOpacityValue('--color-primary-900'),
|
||||
},
|
||||
black: '#040405',
|
||||
highlight: 'rgb(56, 189, 248)',
|
||||
red: colors.red,
|
||||
teal: colors.teal,
|
||||
gray: colors.slate,
|
||||
@ -44,10 +45,15 @@ module.exports = {
|
||||
88: '22rem',
|
||||
},
|
||||
backgroundImage: (theme) => ({
|
||||
'multiselect-caret': `url("${svgToDataUri(
|
||||
`<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
'multiselect-caret-black': `url("${svgToDataUri(
|
||||
`<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="black">
|
||||
<path fill-rule="evenodd" d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
|
||||
</svg>`
|
||||
</svg>`,
|
||||
)}")`,
|
||||
'multiselect-caret-white': `url("${svgToDataUri(
|
||||
`<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="white">
|
||||
<path fill-rule="evenodd" d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
|
||||
</svg>`,
|
||||
)}")`,
|
||||
'multiselect-spinner': `url("${svgToDataUri(
|
||||
`<svg viewBox="0 0 512 512" fill="${theme(
|
||||
|
||||
Reference in New Issue
Block a user