mirror of
https://github.com/crater-invoice/crater.git
synced 2025-10-27 19:51:09 -04:00
Compare commits
4 Commits
dark-custo
...
dark-date-
| Author | SHA1 | Date | |
|---|---|---|---|
| 55da562a42 | |||
| 3b3da13218 | |||
| 5440b0f354 | |||
| 9249105ad6 |
@ -7,6 +7,7 @@
|
|||||||
py-2
|
py-2
|
||||||
rounded-lg
|
rounded-lg
|
||||||
bg-opacity-40 bg-gray-300
|
bg-opacity-40 bg-gray-300
|
||||||
|
dark:bg-gray-700 dark:border-gray-600
|
||||||
whitespace-nowrap
|
whitespace-nowrap
|
||||||
flex-col
|
flex-col
|
||||||
mt-1
|
mt-1
|
||||||
@ -19,6 +20,7 @@
|
|||||||
text-sm
|
text-sm
|
||||||
font-medium
|
font-medium
|
||||||
text-black
|
text-black
|
||||||
|
dark:text-white
|
||||||
truncate
|
truncate
|
||||||
select-all select-color
|
select-all select-color
|
||||||
"
|
"
|
||||||
|
|||||||
@ -91,6 +91,7 @@
|
|||||||
leading-tight
|
leading-tight
|
||||||
text-gray-700
|
text-gray-700
|
||||||
cursor-pointer
|
cursor-pointer
|
||||||
|
dark:text-gray-400
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
{{ note.name }}
|
{{ note.name }}
|
||||||
|
|||||||
@ -5,7 +5,7 @@
|
|||||||
>
|
>
|
||||||
<SelectNotePopup :type="type" @select="onSelectNote" />
|
<SelectNotePopup :type="type" @select="onSelectNote" />
|
||||||
</div>
|
</div>
|
||||||
<label class="text-gray-800 font-medium mb-4 text-sm">
|
<label class="text-gray-800 font-medium mb-4 text-sm dark:text-gray-300">
|
||||||
{{ $t('invoices.notes') }}
|
{{ $t('invoices.notes') }}
|
||||||
</label>
|
</label>
|
||||||
<BaseCustomInput
|
<BaseCustomInput
|
||||||
|
|||||||
@ -29,7 +29,16 @@
|
|||||||
|
|
||||||
<label
|
<label
|
||||||
v-else
|
v-else
|
||||||
class="flex items-center justify-center m-0 text-lg text-black uppercase "
|
class="
|
||||||
|
flex
|
||||||
|
items-center
|
||||||
|
justify-center
|
||||||
|
m-0
|
||||||
|
text-lg
|
||||||
|
text-black
|
||||||
|
dark:text-white
|
||||||
|
uppercase
|
||||||
|
"
|
||||||
>
|
>
|
||||||
<BaseFormatMoney
|
<BaseFormatMoney
|
||||||
:amount="store.getSubTotal"
|
:amount="store.getSubTotal"
|
||||||
@ -59,7 +68,16 @@
|
|||||||
|
|
||||||
<label
|
<label
|
||||||
v-else-if="store[storeProp].tax_per_item === 'YES'"
|
v-else-if="store[storeProp].tax_per_item === 'YES'"
|
||||||
class="flex items-center justify-center m-0 text-lg text-black uppercase "
|
class="
|
||||||
|
flex
|
||||||
|
items-center
|
||||||
|
justify-center
|
||||||
|
m-0
|
||||||
|
text-lg
|
||||||
|
text-black
|
||||||
|
dark:text-white
|
||||||
|
uppercase
|
||||||
|
"
|
||||||
>
|
>
|
||||||
<BaseFormatMoney :amount="tax.amount" :currency="defaultCurrency" />
|
<BaseFormatMoney :amount="tax.amount" :currency="defaultCurrency" />
|
||||||
</label>
|
</label>
|
||||||
@ -166,7 +184,15 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="flex items-center justify-between w-full pt-2 mt-5 border-t border-gray-200 border-solid "
|
class="
|
||||||
|
flex
|
||||||
|
items-center
|
||||||
|
justify-between
|
||||||
|
w-full
|
||||||
|
pt-2
|
||||||
|
mt-5
|
||||||
|
border-t border-gray-200 border-solid
|
||||||
|
"
|
||||||
>
|
>
|
||||||
<BaseContentPlaceholders v-if="isLoading">
|
<BaseContentPlaceholders v-if="isLoading">
|
||||||
<BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
|
<BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
|
||||||
|
|||||||
@ -1,9 +1,18 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="flex items-center justify-between w-full mt-2 text-sm">
|
<div class="flex items-center justify-between w-full mt-2 text-sm">
|
||||||
<label class="font-semibold leading-5 text-gray-500 uppercase">
|
<label class="font-semibold leading-5 text-gray-500 uppercase dark:text-gray-300">
|
||||||
{{ tax.name }} ({{ tax.percent }} %)
|
{{ tax.name }} ({{ tax.percent }} %)
|
||||||
</label>
|
</label>
|
||||||
<label class="flex items-center justify-center text-lg text-black">
|
<label
|
||||||
|
class="
|
||||||
|
flex
|
||||||
|
items-center
|
||||||
|
justify-center
|
||||||
|
text-lg
|
||||||
|
text-black
|
||||||
|
dark:text-white
|
||||||
|
"
|
||||||
|
>
|
||||||
<BaseFormatMoney :amount="tax.amount" :currency="currency" />
|
<BaseFormatMoney :amount="tax.amount" :currency="currency" />
|
||||||
|
|
||||||
<BaseIcon
|
<BaseIcon
|
||||||
|
|||||||
@ -96,6 +96,7 @@
|
|||||||
leading-tight
|
leading-tight
|
||||||
text-gray-700
|
text-gray-700
|
||||||
cursor-pointer
|
cursor-pointer
|
||||||
|
dark:text-gray-300
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
{{ taxType.name }}
|
{{ taxType.name }}
|
||||||
@ -108,6 +109,7 @@
|
|||||||
font-semibold
|
font-semibold
|
||||||
text-gray-700
|
text-gray-700
|
||||||
cursor-pointer
|
cursor-pointer
|
||||||
|
dark:text-gray-300
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
{{ taxType.percent }} %
|
{{ taxType.percent }} %
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<label class="flex text-gray-800 font-medium text-sm mb-2">
|
<label class="flex text-gray-800 font-medium text-sm mb-2 dark:text-gray-300">
|
||||||
{{ $t('general.select_template') }}
|
{{ $t('general.select_template') }}
|
||||||
<span class="text-sm text-red-500"> *</span>
|
<span class="text-sm text-red-500"> *</span>
|
||||||
</label>
|
</label>
|
||||||
|
|||||||
@ -122,7 +122,7 @@
|
|||||||
<BaseTab :title="$t('customers.portal_access')">
|
<BaseTab :title="$t('customers.portal_access')">
|
||||||
<BaseInputGrid class="col-span-5 lg:col-span-4">
|
<BaseInputGrid class="col-span-5 lg:col-span-4">
|
||||||
<div class="md:col-span-2">
|
<div class="md:col-span-2">
|
||||||
<p class="text-sm text-gray-500">
|
<p class="text-sm text-gray-500 dark:text-gray-300">
|
||||||
{{ $t('customers.portal_access_text') }}
|
{{ $t('customers.portal_access_text') }}
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
|||||||
@ -171,7 +171,7 @@
|
|||||||
|
|
||||||
<BaseInputGrid class="col-span-5 lg:col-span-4">
|
<BaseInputGrid class="col-span-5 lg:col-span-4">
|
||||||
<div class="md:col-span-2">
|
<div class="md:col-span-2">
|
||||||
<p class="text-sm text-gray-500">
|
<p class="text-sm text-gray-500 dark:text-gray-300">
|
||||||
{{ $t('customers.portal_access_text') }}
|
{{ $t('customers.portal_access_text') }}
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="pt-6 mt-5 border-t border-solid lg:pt-8 md:pt-4 border-gray-200">
|
<div class="pt-6 mt-5 border-t border-solid lg:pt-8 md:pt-4 border-gray-200 dark:border-gray-600">
|
||||||
<!-- Basic Info -->
|
<!-- Basic Info -->
|
||||||
<BaseHeading>
|
<BaseHeading>
|
||||||
{{ $t('customers.basic_info') }}
|
{{ $t('customers.basic_info') }}
|
||||||
|
|||||||
@ -53,7 +53,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-else class="mt-24">
|
<div v-else class="mt-24">
|
||||||
<label class="flex items-center justify-center text-gray-500">
|
<label class="flex items-center justify-center text-gray-500 dark:text-gray-300">
|
||||||
{{ $t('modules.no_modules_installed') }}
|
{{ $t('modules.no_modules_installed') }}
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
@ -61,10 +61,10 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<BaseCard v-else class="mt-6">
|
<BaseCard v-else class="mt-6">
|
||||||
<h6 class="text-gray-900 text-lg font-medium">
|
<h6 class="text-gray-900 text-lg font-medium dark:text-white">
|
||||||
{{ $t('modules.connect_installation') }}
|
{{ $t('modules.connect_installation') }}
|
||||||
</h6>
|
</h6>
|
||||||
<p class="mt-1 text-sm text-gray-500">
|
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
|
||||||
{{
|
{{
|
||||||
$t('modules.api_token_description', {
|
$t('modules.api_token_description', {
|
||||||
url: globalStore.config.base_url.replace(/^http:\/\//, ''),
|
url: globalStore.config.base_url.replace(/^http:\/\//, ''),
|
||||||
|
|||||||
@ -215,7 +215,7 @@
|
|||||||
<SelectNotePopup type="Payment" @select="onSelectNote" />
|
<SelectNotePopup type="Payment" @select="onSelectNote" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<label class="mb-4 text-sm font-medium text-gray-800">
|
<label class="mb-4 text-sm font-medium text-gray-800 dark:text-gray-300">
|
||||||
{{ $t('estimates.notes') }}
|
{{ $t('estimates.notes') }}
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
|
|||||||
@ -16,11 +16,11 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ml-2">
|
<div class="ml-2">
|
||||||
<p class="p-0 mb-1 leading-snug text-left text-black">
|
<p class="p-0 mb-1 leading-snug text-left text-black dark:text-white">
|
||||||
{{ $t('recurring_invoices.send_automatically') }}
|
{{ $t('recurring_invoices.send_automatically') }}
|
||||||
</p>
|
</p>
|
||||||
<p
|
<p
|
||||||
class="p-0 m-0 text-xs leading-tight text-left text-gray-500"
|
class="p-0 m-0 text-xs leading-tight text-left text-gray-500 dark:text-gray-400"
|
||||||
style="max-width: 480px"
|
style="max-width: 480px"
|
||||||
>
|
>
|
||||||
{{ $t('recurring_invoices.send_automatically_desc') }}
|
{{ $t('recurring_invoices.send_automatically_desc') }}
|
||||||
|
|||||||
@ -27,7 +27,7 @@
|
|||||||
>
|
>
|
||||||
<template #cell-name="{ row }">
|
<template #cell-name="{ row }">
|
||||||
{{ row.data.name }}
|
{{ row.data.name }}
|
||||||
<span class="text-xs text-gray-500"> ({{ row.data.slug }})</span>
|
<span class="text-xs text-gray-500 dark:text-gray-400"> ({{ row.data.slug }})</span>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #cell-is_required="{ row }">
|
<template #cell-is_required="{ row }">
|
||||||
@ -60,7 +60,7 @@
|
|||||||
<CustomFieldDropdown
|
<CustomFieldDropdown
|
||||||
:row="row.data"
|
:row="row.data"
|
||||||
:table="table"
|
:table="table"
|
||||||
:load-data="refreshTable"
|
:load-data="refreshTable"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
</BaseTable>
|
</BaseTable>
|
||||||
|
|||||||
@ -4,23 +4,14 @@
|
|||||||
:description="$t('settings.update_app.description')"
|
:description="$t('settings.update_app.description')"
|
||||||
>
|
>
|
||||||
<div class="pb-8 ml-0">
|
<div class="pb-8 ml-0">
|
||||||
<label class="text-sm not-italic font-medium input-label">
|
<label
|
||||||
|
class="text-sm not-italic font-medium input-label dark:text-gray-300"
|
||||||
|
>
|
||||||
{{ $t('settings.update_app.current_version') }}
|
{{ $t('settings.update_app.current_version') }}
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="
|
class="box-border flex w-16 p-3 my-2 text-sm text-gray-600 bg-gray-200 border border-gray-200 border-solid dark:bg-gray-600 dark:text-gray-200 dark:border-gray-500 rounded-md version"
|
||||||
box-border
|
|
||||||
flex
|
|
||||||
w-16
|
|
||||||
p-3
|
|
||||||
my-2
|
|
||||||
text-sm text-gray-600
|
|
||||||
bg-gray-200
|
|
||||||
border border-gray-200 border-solid
|
|
||||||
rounded-md
|
|
||||||
version
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
{{ currentVersion }}
|
{{ currentVersion }}
|
||||||
</div>
|
</div>
|
||||||
@ -42,20 +33,20 @@
|
|||||||
{{ $t('settings.update_app.avail_update') }}
|
{{ $t('settings.update_app.avail_update') }}
|
||||||
</BaseHeading>
|
</BaseHeading>
|
||||||
|
|
||||||
<div class="rounded-md bg-primary-50 p-4 mb-3">
|
<div class="rounded-md bg-primary-50 p-4 mb-3 dark:bg-gray-600">
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
<div class="shrink-0">
|
<div class="shrink-0">
|
||||||
<BaseIcon
|
<BaseIcon
|
||||||
name="InformationCircleIcon"
|
name="InformationCircleIcon"
|
||||||
class="h-5 w-5 text-primary-400"
|
class="h-5 w-5 text-primary-400 dark:text-primary-300"
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="ml-3">
|
<div class="ml-3">
|
||||||
<h3 class="text-sm font-medium text-primary-800">
|
<h3 class="text-sm font-medium text-primary-800 dark:text-primary-300">
|
||||||
{{ $t('general.note') }}
|
{{ $t('general.note') }}
|
||||||
</h3>
|
</h3>
|
||||||
<div class="mt-2 text-sm text-primary-700">
|
<div class="mt-2 text-sm text-primary-700 dark:text-primary-400">
|
||||||
<p>
|
<p>
|
||||||
{{ $t('settings.update_app.update_warning') }}
|
{{ $t('settings.update_app.update_warning') }}
|
||||||
</p>
|
</p>
|
||||||
@ -75,26 +66,20 @@
|
|||||||
w-16
|
w-16
|
||||||
p-3
|
p-3
|
||||||
my-2
|
my-2
|
||||||
text-sm text-gray-600
|
text-sm
|
||||||
bg-gray-200
|
text-gray-600 bg-gray-200
|
||||||
border border-gray-200 border-solid
|
border border-gray-200 border-solid
|
||||||
rounded-md
|
rounded-md
|
||||||
version
|
version
|
||||||
|
dark:bg-gray-600 dark:text-gray-200
|
||||||
|
dark:border-gray-500
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
{{ updateData.version }}
|
{{ updateData.version }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="
|
class="pl-5 mt-4 mb-8 text-sm leading-snug text-gray-500 update-description"
|
||||||
pl-5
|
|
||||||
mt-4
|
|
||||||
mb-8
|
|
||||||
text-sm
|
|
||||||
leading-snug
|
|
||||||
text-gray-500
|
|
||||||
update-description
|
|
||||||
"
|
|
||||||
style="white-space: pre-wrap; max-width: 480px"
|
style="white-space: pre-wrap; max-width: 480px"
|
||||||
v-html="description"
|
v-html="description"
|
||||||
></div>
|
></div>
|
||||||
@ -150,14 +135,7 @@
|
|||||||
<li
|
<li
|
||||||
v-for="step in updateSteps"
|
v-for="step in updateSteps"
|
||||||
:key="step.stepUrl"
|
:key="step.stepUrl"
|
||||||
class="
|
class="flex justify-between w-full py-3 border-b border-gray-200 border-solid last:border-b-0"
|
||||||
flex
|
|
||||||
justify-between
|
|
||||||
w-full
|
|
||||||
py-3
|
|
||||||
border-b border-gray-200 border-solid
|
|
||||||
last:border-b-0
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<p class="m-0 text-sm leading-8">{{ $t(step.translationKey) }}</p>
|
<p class="m-0 text-sm leading-8">{{ $t(step.translationKey) }}</p>
|
||||||
<div class="flex flex-row items-center">
|
<div class="flex flex-row items-center">
|
||||||
|
|||||||
@ -1,33 +1,40 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="bg-white shadow overflow-hidden rounded-lg mt-6">
|
<div class="bg-white shadow overflow-hidden rounded-lg mt-6 dark:bg-gray-800">
|
||||||
<div class="px-4 py-5 sm:px-6">
|
<div class="px-4 py-5 sm:px-6">
|
||||||
<h3 class="text-lg leading-6 font-medium text-gray-900">
|
<h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">
|
||||||
{{ $t('invoices.invoice_information') }}
|
{{ $t('invoices.invoice_information') }}
|
||||||
</h3>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="invoice" class="border-t border-gray-200 px-4 py-5 sm:p-0">
|
<div v-if="invoice"
|
||||||
<dl class="sm:divide-y sm:divide-gray-200">
|
class="
|
||||||
|
border-t
|
||||||
|
border-gray-200
|
||||||
|
px-4 py-5 sm:p-0
|
||||||
|
dark:border-gray-600
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<dl class="sm:divide-y sm:divide-gray-200 sm:dark:divide-gray-500">
|
||||||
<div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
|
<div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
|
||||||
<dt class="text-sm font-medium text-gray-500">
|
<dt class="text-sm font-medium text-gray-500 dark:dark:text-gray-400">
|
||||||
{{ $t('general.from') }}
|
{{ $t('general.from') }}
|
||||||
</dt>
|
</dt>
|
||||||
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
|
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 dark:text-gray-100">
|
||||||
{{ invoice.company.name }}
|
{{ invoice.company.name }}
|
||||||
</dd>
|
</dd>
|
||||||
</div>
|
</div>
|
||||||
<div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
|
<div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
|
||||||
<dt class="text-sm font-medium text-gray-500">
|
<dt class="text-sm font-medium text-gray-500 dark:dark:text-gray-400">
|
||||||
{{ $t('general.to') }}
|
{{ $t('general.to') }}
|
||||||
</dt>
|
</dt>
|
||||||
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
|
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 dark:text-gray-100">
|
||||||
{{ invoice.customer.name }}
|
{{ invoice.customer.name }}
|
||||||
</dd>
|
</dd>
|
||||||
</div>
|
</div>
|
||||||
<div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
|
<div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
|
||||||
<dt class="text-sm font-medium text-gray-500 capitalize">
|
<dt class="text-sm font-medium text-gray-500 capitalize dark:dark:text-gray-400">
|
||||||
{{ $t('invoices.paid_status').toLowerCase() }}
|
{{ $t('invoices.paid_status').toLowerCase() }}
|
||||||
</dt>
|
</dt>
|
||||||
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
|
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 dark:text-gray-100">
|
||||||
<BaseInvoiceStatusBadge
|
<BaseInvoiceStatusBadge
|
||||||
:status="invoice.paid_status"
|
:status="invoice.paid_status"
|
||||||
class="px-3 py-1"
|
class="px-3 py-1"
|
||||||
@ -37,10 +44,10 @@
|
|||||||
</dd>
|
</dd>
|
||||||
</div>
|
</div>
|
||||||
<div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
|
<div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
|
||||||
<dt class="text-sm font-medium text-gray-500">
|
<dt class="text-sm font-medium text-gray-500 dark:dark:text-gray-400">
|
||||||
{{ $t('invoices.total') }}
|
{{ $t('invoices.total') }}
|
||||||
</dt>
|
</dt>
|
||||||
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
|
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 dark:text-gray-100">
|
||||||
<BaseFormatMoney
|
<BaseFormatMoney
|
||||||
:currency="invoice.currency"
|
:currency="invoice.currency"
|
||||||
:amount="invoice.total"
|
:amount="invoice.total"
|
||||||
|
|||||||
@ -439,7 +439,7 @@ export default {
|
|||||||
container:
|
container:
|
||||||
'p-0 relative mx-auto w-full flex items-center justify-end box-border cursor-pointer border border-gray-200 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-sm leading-snug outline-none max-h-10',
|
'p-0 relative mx-auto w-full flex items-center justify-end box-border cursor-pointer border border-gray-200 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-sm leading-snug outline-none max-h-10',
|
||||||
containerDisabled:
|
containerDisabled:
|
||||||
'bg-gray-200 bg-opacity-50 !text-gray-400 dark:!text-gray-800 !dark:text-gray-500 !cursor-default dark:opacity-25',
|
'bg-gray-200 !text-gray-800 dark:!text-gray-800 !dark:text-gray-500 !cursor-not-allowed dark:opacity-50',
|
||||||
containerOpen: '',
|
containerOpen: '',
|
||||||
containerOpenTop: '',
|
containerOpenTop: '',
|
||||||
containerActive: 'ring-1 ring-primary-400 border-primary-400',
|
containerActive: 'ring-1 ring-primary-400 border-primary-400',
|
||||||
|
|||||||
@ -28,6 +28,7 @@
|
|||||||
:attributes="attrs"
|
:attributes="attrs"
|
||||||
:model-config="config"
|
:model-config="config"
|
||||||
:masks="masks"
|
:masks="masks"
|
||||||
|
:is-dark="isDarkModeOn"
|
||||||
:locale="global.locale"
|
:locale="global.locale"
|
||||||
>
|
>
|
||||||
<template
|
<template
|
||||||
@ -72,7 +73,7 @@
|
|||||||
|
|
||||||
<template v-if="showExtraOptions" #footer>
|
<template v-if="showExtraOptions" #footer>
|
||||||
<div
|
<div
|
||||||
class="bg-gray-100 grid grid-cols-3 gap-2 p-2 border-t rounded-b-lg"
|
class="bg-gray-100 dark:bg-gray-800 grid grid-cols-3 gap-2 p-2 border-t dark:border-gray-500 rounded-b-lg"
|
||||||
>
|
>
|
||||||
<button type="button" class="extra-button" @click="moveToDate(sourceDate)">
|
<button type="button" class="extra-button" @click="moveToDate(sourceDate)">
|
||||||
{{ global.t('date_picker.same_day') }}
|
{{ global.t('date_picker.same_day') }}
|
||||||
@ -146,7 +147,7 @@ const props = defineProps({
|
|||||||
defaultInputClass: {
|
defaultInputClass: {
|
||||||
type: String,
|
type: String,
|
||||||
default:
|
default:
|
||||||
'border-2 font-base pl-8 py-2 outline-none focus:ring-primary-400 focus:outline-none focus:border-primary-400 block w-full sm:text-sm border-gray-200 rounded-md text-black',
|
'border-2 dark:bg-gray-700 dark:border-gray-600 dark:text-white font-base pl-8 py-2 outline-none focus:ring-primary-400 focus:outline-none focus:border-primary-400 block w-full sm:text-sm border-gray-200 rounded-md text-black',
|
||||||
},
|
},
|
||||||
time24hr: {
|
time24hr: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
@ -163,7 +164,7 @@ const props = defineProps({
|
|||||||
sourceDate: {
|
sourceDate: {
|
||||||
type: [String, Date],
|
type: [String, Date],
|
||||||
default: () => new Date(),
|
default: () => new Date(),
|
||||||
}
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
const emit = defineEmits(['update:modelValue'])
|
const emit = defineEmits(['update:modelValue'])
|
||||||
@ -175,6 +176,9 @@ const vCalendar = ref(null)
|
|||||||
const hasIconSlot = computed(() => {
|
const hasIconSlot = computed(() => {
|
||||||
return !!slots.icon
|
return !!slots.icon
|
||||||
})
|
})
|
||||||
|
const isDarkModeOn = computed(() =>
|
||||||
|
document.documentElement.classList.contains('dark')
|
||||||
|
)
|
||||||
|
|
||||||
const computedContainerClass = computed(() => {
|
const computedContainerClass = computed(() => {
|
||||||
let containerClass = `${props.containerClass} `
|
let containerClass = `${props.containerClass} `
|
||||||
|
|||||||
@ -1,3 +1,3 @@
|
|||||||
<template>
|
<template>
|
||||||
<hr class="w-full text-gray-300 dark:bg-gray-600" />
|
<div class="w-full h-px bg-gray-300 dark:bg-gray-600" />
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -18,17 +18,17 @@ const props = defineProps({
|
|||||||
const badgeColorClasses = computed(() => {
|
const badgeColorClasses = computed(() => {
|
||||||
switch (props.status) {
|
switch (props.status) {
|
||||||
case 'DRAFT':
|
case 'DRAFT':
|
||||||
return 'bg-yellow-300 bg-opacity-25 px-2 py-1 text-sm text-yellow-800 uppercase font-normal text-center '
|
return 'bg-yellow-300 bg-opacity-25 px-2 py-1 text-sm text-yellow-800 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-yellow-500 dark:text-yellow-500'
|
||||||
case 'SENT':
|
case 'SENT':
|
||||||
return ' bg-yellow-500 bg-opacity-25 px-2 py-1 text-sm text-yellow-900 uppercase font-normal text-center '
|
return ' bg-yellow-500 bg-opacity-25 px-2 py-1 text-sm text-yellow-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-yellow-200 dark:text-yellow-200'
|
||||||
case 'VIEWED':
|
case 'VIEWED':
|
||||||
return 'bg-blue-400 bg-opacity-25 px-2 py-1 text-sm text-blue-900 uppercase font-normal text-center'
|
return 'bg-blue-400 bg-opacity-25 px-2 py-1 text-sm text-blue-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-blue-300 dark:text-blue-300'
|
||||||
case 'EXPIRED':
|
case 'EXPIRED':
|
||||||
return 'bg-red-300 bg-opacity-25 px-2 py-1 text-sm text-red-800 uppercase font-normal text-center'
|
return 'bg-red-300 bg-opacity-25 px-2 py-1 text-sm text-red-800 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-red-500 dark:text-red-500'
|
||||||
case 'ACCEPTED':
|
case 'ACCEPTED':
|
||||||
return 'bg-green-400 bg-opacity-25 px-2 py-1 text-sm text-green-800 uppercase font-normal text-center'
|
return 'bg-green-500 bg-opacity-25 px-2 py-1 text-sm text-green-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-green-400 dark:text-green-400'
|
||||||
case 'REJECTED':
|
case 'REJECTED':
|
||||||
return 'bg-purple-300 bg-opacity-25 px-2 py-1 text-sm text-purple-800 uppercase font-normal text-center'
|
return 'bg-purple-300 bg-opacity-25 px-2 py-1 text-sm text-purple-800 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-purple-400 dark:text-purple-400'
|
||||||
default:
|
default:
|
||||||
return 'bg-gray-500 bg-opacity-25 px-2 py-1 text-sm text-gray-900 uppercase font-normal text-center'
|
return 'bg-gray-500 bg-opacity-25 px-2 py-1 text-sm text-gray-900 uppercase font-normal text-center'
|
||||||
}
|
}
|
||||||
|
|||||||
@ -15,6 +15,7 @@
|
|||||||
text-gray-800
|
text-gray-800
|
||||||
whitespace-nowrap
|
whitespace-nowrap
|
||||||
justify-between
|
justify-between
|
||||||
|
dark:text-gray-300
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@ -31,7 +32,7 @@
|
|||||||
</label>
|
</label>
|
||||||
<div :class="inputContainerClasses">
|
<div :class="inputContainerClasses">
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
<span v-if="helpText" class="text-gray-500 text-xs mt-1 font-light">
|
<span v-if="helpText" class="text-gray-500 text-xs mt-1 font-light dark:text-gray-400">
|
||||||
{{ helpText }}
|
{{ helpText }}
|
||||||
</span>
|
</span>
|
||||||
<span v-if="error" class="block mt-0.5 text-sm text-red-500">
|
<span v-if="error" class="block mt-0.5 text-sm text-red-500">
|
||||||
|
|||||||
@ -20,25 +20,25 @@ export default {
|
|||||||
const badgeColorClasses = computed(() => {
|
const badgeColorClasses = computed(() => {
|
||||||
switch (props.status) {
|
switch (props.status) {
|
||||||
case 'DRAFT':
|
case 'DRAFT':
|
||||||
return 'bg-yellow-300 bg-opacity-25 px-2 py-1 text-sm text-yellow-800 uppercase font-normal text-center'
|
return 'bg-yellow-300 bg-opacity-25 px-2 py-1 text-sm text-yellow-800 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-yellow-500 dark:text-yellow-500'
|
||||||
case 'SENT':
|
case 'SENT':
|
||||||
return ' bg-yellow-500 bg-opacity-25 px-2 py-1 text-sm text-yellow-900 uppercase font-normal text-center '
|
return ' bg-yellow-500 bg-opacity-25 px-2 py-1 text-sm text-yellow-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-lime-200 dark:text-yellow-200'
|
||||||
case 'VIEWED':
|
case 'VIEWED':
|
||||||
return 'bg-blue-400 bg-opacity-25 px-2 py-1 text-sm text-blue-900 uppercase font-normal text-center'
|
return 'bg-blue-400 bg-opacity-25 px-2 py-1 text-sm text-blue-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-blue-300 dark:text-blue-300'
|
||||||
case 'COMPLETED':
|
case 'COMPLETED':
|
||||||
return 'bg-green-500 bg-opacity-25 px-2 py-1 text-sm text-green-900 uppercase font-normal text-center'
|
return 'bg-green-500 bg-opacity-25 px-2 py-1 text-sm text-green-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-green-400 dark:text-green-400'
|
||||||
case 'DUE':
|
case 'DUE':
|
||||||
return 'bg-yellow-500 bg-opacity-25 px-2 py-1 text-sm text-yellow-900 uppercase font-normal text-center'
|
return 'bg-yellow-500 bg-opacity-25 px-2 py-1 text-sm text-yellow-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-yellow-500 dark:text-yellow-500'
|
||||||
case 'OVERDUE':
|
case 'OVERDUE':
|
||||||
return 'bg-red-300 bg-opacity-50 px-2 py-1 text-sm text-red-900 uppercase font-normal text-center'
|
return 'bg-red-300 bg-opacity-50 px-2 py-1 text-sm text-red-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-red-500 dark:text-red-500'
|
||||||
case 'UNPAID':
|
case 'UNPAID':
|
||||||
return 'bg-yellow-500 bg-opacity-25 px-2 py-1 text-sm text-yellow-900 uppercase font-normal text-center'
|
return 'bg-yellow-500 bg-opacity-25 px-2 py-1 text-sm text-yellow-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-yellow-500 dark:text-yellow-500'
|
||||||
case 'PARTIALLY_PAID':
|
case 'PARTIALLY_PAID':
|
||||||
return 'bg-blue-400 bg-opacity-25 px-2 py-1 text-sm text-blue-900 uppercase font-normal text-center'
|
return 'bg-blue-400 bg-opacity-25 px-2 py-1 text-sm text-blue-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-blue-300 dark:text-blue-300'
|
||||||
case 'PAID':
|
case 'PAID':
|
||||||
return 'bg-green-500 bg-opacity-25 px-2 py-1 text-sm text-green-900 uppercase font-normal text-center'
|
return 'bg-green-500 bg-opacity-25 px-2 py-1 text-sm text-green-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-green-400 dark:text-green-400'
|
||||||
default:
|
default:
|
||||||
return 'bg-gray-500 bg-opacity-25 px-2 py-1 text-sm text-gray-900 uppercase font-normal text-center'
|
return 'bg-gray-500 bg-opacity-25 px-2 py-1 text-sm text-gray-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-gray-502 dark:text-gray-200'
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
return { badgeColorClasses }
|
return { badgeColorClasses }
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<label class="text-sm not-italic font-medium leading-5 text-primary-800">
|
<label class="text-sm not-italic font-medium leading-5 text-gray-500 dark:text-gray-300">
|
||||||
<slot />
|
<slot />
|
||||||
</label>
|
</label>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -24,15 +24,15 @@ export default {
|
|||||||
const badgeColorClasses = computed(() => {
|
const badgeColorClasses = computed(() => {
|
||||||
switch (props.status) {
|
switch (props.status) {
|
||||||
case 'PAID':
|
case 'PAID':
|
||||||
return 'bg-primary-300 bg-opacity-25 text-primary-800 uppercase font-normal text-center'
|
return 'bg-primary-300 bg-opacity-25 text-primary-800 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-indigo-400 dark:text-indigo-400'
|
||||||
case 'UNPAID':
|
case 'UNPAID':
|
||||||
return ' bg-yellow-500 bg-opacity-25 text-yellow-900 uppercase font-normal text-center '
|
return ' bg-yellow-500 bg-opacity-25 text-yellow-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-orange-300 dark:text-orange-300'
|
||||||
case 'PARTIALLY_PAID':
|
case 'PARTIALLY_PAID':
|
||||||
return 'bg-blue-400 bg-opacity-25 text-blue-900 uppercase font-normal text-center'
|
return 'bg-blue-400 bg-opacity-25 text-blue-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-blue-300 dark:text-blue-300'
|
||||||
case 'OVERDUE':
|
case 'OVERDUE':
|
||||||
return 'bg-red-300 bg-opacity-50 px-2 py-1 text-sm text-red-900 uppercase font-normal text-center'
|
return 'bg-red-300 bg-opacity-50 px-2 py-1 text-sm text-red-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-red-500 dark:text-red-500'
|
||||||
default:
|
default:
|
||||||
return 'bg-gray-500 bg-opacity-25 text-gray-900 uppercase font-normal text-center'
|
return 'bg-gray-500 bg-opacity-25 text-gray-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-gray-300 dark:text-gray-300'
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
return { badgeColorClasses }
|
return { badgeColorClasses }
|
||||||
|
|||||||
@ -19,7 +19,7 @@
|
|||||||
]"
|
]"
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
>
|
>
|
||||||
<span class="rounded-full bg-white w-1.5 h-1.5" :class="{ 'bg-white': checked }"/>
|
<span class="rounded-full w-1.5 h-1.5" :class="{ 'bg-white': checked }"/>
|
||||||
</span>
|
</span>
|
||||||
<div class="flex flex-col ml-3">
|
<div class="flex flex-col ml-3">
|
||||||
<RadioGroupLabel
|
<RadioGroupLabel
|
||||||
|
|||||||
@ -20,11 +20,11 @@ export default {
|
|||||||
const badgeColorClasses = computed(() => {
|
const badgeColorClasses = computed(() => {
|
||||||
switch (props.status) {
|
switch (props.status) {
|
||||||
case 'COMPLETED':
|
case 'COMPLETED':
|
||||||
return 'bg-green-500 bg-opacity-25 px-2 py-1 text-sm text-green-900 uppercase font-normal text-center'
|
return 'bg-green-500 bg-opacity-25 px-2 py-1 text-sm text-green-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-green-400 dark:text-green-400'
|
||||||
case 'ON_HOLD':
|
case 'ON_HOLD':
|
||||||
return 'bg-yellow-500 bg-opacity-25 px-2 py-1 text-sm text-yellow-900 uppercase font-normal text-center'
|
return 'bg-yellow-500 bg-opacity-25 px-2 py-1 text-sm text-yellow-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-yellow-200 dark:text-yellow-200'
|
||||||
case 'ACTIVE':
|
case 'ACTIVE':
|
||||||
return 'bg-blue-400 bg-opacity-25 px-2 py-1 text-sm text-blue-900 uppercase font-normal text-center'
|
return 'bg-blue-400 bg-opacity-25 px-2 py-1 text-sm text-blue-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-blue-300 dark:text-blue-300'
|
||||||
default:
|
default:
|
||||||
return 'bg-gray-500 bg-opacity-25 px-2 py-1 text-sm text-gray-900 uppercase font-normal text-center'
|
return 'bg-gray-500 bg-opacity-25 px-2 py-1 text-sm text-gray-900 uppercase font-normal text-center'
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user