mirror of
https://github.com/crater-invoice/crater.git
synced 2025-10-27 11:41:09 -04:00
Compare commits
2 Commits
dark-base-
...
dark-base-
| Author | SHA1 | Date | |
|---|---|---|---|
| cba602655d | |||
| 87495e8055 |
@ -83,25 +83,25 @@
|
||||
@click="selectNote(index, close)"
|
||||
>
|
||||
<div class="flex justify-between px-2">
|
||||
<label
|
||||
<BaseLabel
|
||||
class="
|
||||
m-0
|
||||
text-base
|
||||
font-semibold
|
||||
leading-tight
|
||||
text-gray-700
|
||||
cursor-pointer
|
||||
!m-0
|
||||
!text-base
|
||||
!font-semibold
|
||||
!leading-tight
|
||||
!text-gray-700
|
||||
!cursor-pointer
|
||||
"
|
||||
>
|
||||
{{ note.name }}
|
||||
</label>
|
||||
</BaseLabel>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="flex justify-center p-5 text-gray-400">
|
||||
<label class="text-base text-gray-500">
|
||||
<BaseLabel class="!text-base !text-gray-500">
|
||||
{{ $t('general.no_note_found') }}
|
||||
</label>
|
||||
</BaseLabel>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
@ -122,19 +122,18 @@
|
||||
@click="openNoteModal"
|
||||
>
|
||||
<BaseIcon name="CheckCircleIcon" class="text-primary-400" />
|
||||
<label
|
||||
<BaseLabel
|
||||
class="
|
||||
m-0
|
||||
ml-3
|
||||
text-sm
|
||||
leading-none
|
||||
cursor-pointer
|
||||
font-base
|
||||
text-primary-400
|
||||
!m-0
|
||||
!ml-3
|
||||
!leading-none
|
||||
!cursor-pointer
|
||||
!font-base
|
||||
!text-primary-400
|
||||
"
|
||||
>
|
||||
{{ $t('settings.customization.notes.add_new_note') }}
|
||||
</label>
|
||||
</BaseLabel>
|
||||
</button>
|
||||
</div>
|
||||
</PopoverPanel>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<div class="flex items-center text-base" style="flex: 4">
|
||||
<label class="pr-2 mb-0" align="right">
|
||||
<BaseLabel class="!pr-2 !mb-0" align="right">
|
||||
{{ $t('invoices.item.tax') }}
|
||||
</label>
|
||||
</BaseLabel>
|
||||
|
||||
<BaseMultiselect
|
||||
v-model="selectedTax"
|
||||
@ -35,9 +35,9 @@
|
||||
>
|
||||
<BaseIcon name="CheckCircleIcon" class="h-5 text-primary-400" />
|
||||
|
||||
<label
|
||||
class="ml-2 text-sm leading-none cursor-pointer text-primary-400"
|
||||
>{{ $t('invoices.add_new_tax') }}</label
|
||||
<BaseLabel
|
||||
class="!ml-2 !leading-none !cursor-pointer !text-primary-400"
|
||||
>{{ $t('invoices.add_new_tax') }}</BaseLabel
|
||||
>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
@ -5,9 +5,9 @@
|
||||
>
|
||||
<SelectNotePopup :type="type" @select="onSelectNote" />
|
||||
</div>
|
||||
<label class="text-gray-800 font-medium mb-4 text-sm">
|
||||
<BaseLabel class="!text-gray-800 !mb-4 ">
|
||||
{{ $t('invoices.notes') }}
|
||||
</label>
|
||||
</BaseLabel>
|
||||
<BaseCustomInput
|
||||
v-model="store[storeProp].notes"
|
||||
:content-loading="store.isFetchingInitialSettings"
|
||||
|
||||
@ -16,12 +16,12 @@
|
||||
<BaseContentPlaceholders v-if="isLoading">
|
||||
<BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
|
||||
</BaseContentPlaceholders>
|
||||
<label
|
||||
<BaseLabel
|
||||
v-else
|
||||
class="text-sm font-semibold leading-5 text-gray-400 uppercase"
|
||||
class="!font-semibold !text-gray-400 !uppercase"
|
||||
>
|
||||
{{ $t('estimates.sub_total') }}
|
||||
</label>
|
||||
</BaseLabel>
|
||||
|
||||
<BaseContentPlaceholders v-if="isLoading">
|
||||
<BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
|
||||
@ -29,7 +29,7 @@
|
||||
|
||||
<label
|
||||
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
|
||||
:amount="store.getSubTotal"
|
||||
@ -48,7 +48,7 @@
|
||||
</BaseContentPlaceholders>
|
||||
<label
|
||||
v-else-if="store[storeProp].tax_per_item === 'YES'"
|
||||
class="m-0 text-sm font-semibold leading-5 text-gray-500 uppercase"
|
||||
class="m-0 text-sm font-semibold leading-5 text-gray-500 uppercase dark:text-gray-400"
|
||||
>
|
||||
{{ tax.name }} - {{ tax.percent }}%
|
||||
</label>
|
||||
@ -59,7 +59,7 @@
|
||||
|
||||
<label
|
||||
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" />
|
||||
</label>
|
||||
@ -75,12 +75,12 @@
|
||||
<BaseContentPlaceholders v-if="isLoading">
|
||||
<BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
|
||||
</BaseContentPlaceholders>
|
||||
<label
|
||||
<BaseLabel
|
||||
v-else
|
||||
class="text-sm font-semibold leading-5 text-gray-400 uppercase"
|
||||
class=" !font-semibold !text-gray-400 !uppercase"
|
||||
>
|
||||
{{ $t('estimates.discount') }}
|
||||
</label>
|
||||
</BaseLabel>
|
||||
<BaseContentPlaceholders v-if="isLoading">
|
||||
<BaseContentPlaceholdersText
|
||||
:lines="1"
|
||||
@ -171,21 +171,21 @@
|
||||
<BaseContentPlaceholders v-if="isLoading">
|
||||
<BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
|
||||
</BaseContentPlaceholders>
|
||||
<label
|
||||
<BaseLabel
|
||||
v-else
|
||||
class="m-0 text-sm font-semibold leading-5 text-gray-400 uppercase"
|
||||
>{{ $t('estimates.total') }} {{ $t('estimates.amount') }}:</label
|
||||
class="!m-0 !font-semibold !text-gray-400 !uppercase"
|
||||
>{{ $t('estimates.total') }} {{ $t('estimates.amount') }}:</BaseLabel
|
||||
>
|
||||
|
||||
<BaseContentPlaceholders v-if="isLoading">
|
||||
<BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
|
||||
</BaseContentPlaceholders>
|
||||
<label
|
||||
<BaseLabel
|
||||
v-else
|
||||
class="flex items-center justify-center text-lg uppercase text-primary-400"
|
||||
class="!flex !items-center !justify-center !text-lg !uppercase !text-primary-400"
|
||||
>
|
||||
<BaseFormatMoney :amount="store.getTotal" :currency="defaultCurrency" />
|
||||
</label>
|
||||
</BaseLabel>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div class="flex items-center justify-between w-full mt-2 text-sm">
|
||||
<label class="font-semibold leading-5 text-gray-500 uppercase">
|
||||
<BaseLabel class="!font-semibold !text-gray-500 !uppercase">
|
||||
{{ tax.name }} ({{ tax.percent }} %)
|
||||
</label>
|
||||
<label class="flex items-center justify-center text-lg text-black">
|
||||
</BaseLabel>
|
||||
<label class="flex items-center justify-center text-lg text-black dark:text-white">
|
||||
<BaseFormatMoney :amount="tax.amount" :currency="currency" />
|
||||
|
||||
<BaseIcon
|
||||
|
||||
@ -88,38 +88,37 @@
|
||||
@click="selectTaxType(taxType, close)"
|
||||
>
|
||||
<div class="flex justify-between px-2">
|
||||
<label
|
||||
<BaseLabel
|
||||
class="
|
||||
m-0
|
||||
text-base
|
||||
font-semibold
|
||||
leading-tight
|
||||
text-gray-700
|
||||
cursor-pointer
|
||||
!m-0
|
||||
!text-base
|
||||
!font-semibold
|
||||
!leading-tight
|
||||
!cursor-pointer
|
||||
"
|
||||
>
|
||||
{{ taxType.name }}
|
||||
</label>
|
||||
</BaseLabel>
|
||||
|
||||
<label
|
||||
<BaseLabel
|
||||
class="
|
||||
m-0
|
||||
text-base
|
||||
font-semibold
|
||||
text-gray-700
|
||||
cursor-pointer
|
||||
!m-0
|
||||
!text-base
|
||||
!font-semibold
|
||||
!text-gray-700
|
||||
!cursor-pointer
|
||||
"
|
||||
>
|
||||
{{ taxType.percent }} %
|
||||
</label>
|
||||
</BaseLabel>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="flex justify-center p-5 text-gray-400">
|
||||
<label class="text-base text-gray-500 cursor-pointer">
|
||||
<BaseLabel class="!text-base !text-gray-500 !cursor-pointer">
|
||||
{{ $t('general.no_tax_found') }}
|
||||
</label>
|
||||
</BaseLabel>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -142,19 +141,18 @@
|
||||
@click="openTaxTypeModal"
|
||||
>
|
||||
<BaseIcon name="CheckCircleIcon" class="text-primary-400" />
|
||||
<label
|
||||
<BaseLabel
|
||||
class="
|
||||
m-0
|
||||
ml-3
|
||||
text-sm
|
||||
leading-none
|
||||
cursor-pointer
|
||||
font-base
|
||||
text-primary-400
|
||||
!m-0
|
||||
!ml-3
|
||||
!leading-none
|
||||
!cursor-pointer
|
||||
!font-base
|
||||
!text-primary-400
|
||||
"
|
||||
>
|
||||
{{ $t('estimates.add_new_tax') }}
|
||||
</label>
|
||||
</BaseLabel>
|
||||
</button>
|
||||
</div>
|
||||
</PopoverPanel>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div>
|
||||
<label class="flex text-gray-800 font-medium text-sm mb-2">
|
||||
<BaseLabel class="!flex !text-gray-800 !mb-2">
|
||||
{{ $t('general.select_template') }}
|
||||
<span class="text-sm text-red-500"> *</span>
|
||||
</label>
|
||||
</BaseLabel>
|
||||
<BaseButton
|
||||
type="button"
|
||||
class="flex justify-center w-full text-sm lg:w-auto hover:bg-gray-200"
|
||||
|
||||
@ -53,7 +53,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<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') }}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
@ -215,9 +215,9 @@
|
||||
<SelectNotePopup type="Payment" @select="onSelectNote" />
|
||||
</div>
|
||||
|
||||
<label class="mb-4 text-sm font-medium text-gray-800">
|
||||
<BaseLabel class="!mb-4 !text-gray-800">
|
||||
{{ $t('estimates.notes') }}
|
||||
</label>
|
||||
</BaseLabel>
|
||||
|
||||
<BaseCustomInput
|
||||
v-model="paymentStore.currentPayment.notes"
|
||||
|
||||
@ -4,9 +4,9 @@
|
||||
:description="$t('settings.update_app.description')"
|
||||
>
|
||||
<div class="pb-8 ml-0">
|
||||
<label class="text-sm not-italic font-medium input-label">
|
||||
<BaseLabel class="!input-label">
|
||||
{{ $t('settings.update_app.current_version') }}
|
||||
</label>
|
||||
</BaseLabel>
|
||||
|
||||
<div
|
||||
class="
|
||||
@ -64,9 +64,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label class="text-sm not-italic font-medium input-label">
|
||||
<BaseLabel class="!input-label">
|
||||
{{ $t('settings.update_app.next_version') }}
|
||||
</label>
|
||||
</BaseLabel>
|
||||
<br />
|
||||
<div
|
||||
class="
|
||||
@ -99,9 +99,9 @@
|
||||
v-html="description"
|
||||
></div>
|
||||
|
||||
<label class="text-sm not-italic font-medium input-label">
|
||||
<BaseLabel class=" !input-label">
|
||||
{{ $t('settings.update_app.requirements') }}
|
||||
</label>
|
||||
</BaseLabel>
|
||||
|
||||
<table class="w-1/2 mt-2 border-2 border-gray-200 BaseTable-fixed">
|
||||
<tr
|
||||
|
||||
@ -97,6 +97,7 @@
|
||||
whitespace-nowrap
|
||||
mr-2
|
||||
min-w-[200px]
|
||||
dark:text-primary-400
|
||||
"
|
||||
>
|
||||
{{ element.label }}
|
||||
|
||||
@ -50,20 +50,20 @@
|
||||
pb-4
|
||||
"
|
||||
>
|
||||
<label
|
||||
<BaseLabel
|
||||
class="
|
||||
px-3
|
||||
py-2
|
||||
text-xs
|
||||
font-semibold
|
||||
text-gray-400
|
||||
mb-0.5
|
||||
block
|
||||
uppercase
|
||||
!px-3
|
||||
!py-2
|
||||
!text-xs
|
||||
!font-semibold
|
||||
!text-gray-400
|
||||
!mb-0.5
|
||||
!block
|
||||
!uppercase
|
||||
"
|
||||
>
|
||||
{{ $t('company_switcher.label') }}
|
||||
</label>
|
||||
</BaseLabel>
|
||||
|
||||
<div
|
||||
v-if="companyStore.companies.length < 1"
|
||||
|
||||
@ -62,9 +62,9 @@
|
||||
</div>
|
||||
<div v-else>
|
||||
<div v-if="usersStore.customerList.length > 0">
|
||||
<label class="text-sm text-gray-400 mb-0.5 block px-2 uppercase">
|
||||
<BaseLabel class="!text-gray-400 !mb-0.5 !block !px-2 !uppercase">
|
||||
{{ $t('global_search.customers') }}
|
||||
</label>
|
||||
</BaseLabel>
|
||||
<div
|
||||
v-for="(customer, index) in usersStore.customerList"
|
||||
:key="index"
|
||||
@ -108,11 +108,11 @@
|
||||
</div>
|
||||
|
||||
<div v-if="usersStore.userList.length > 0" class="mt-2">
|
||||
<label
|
||||
class="text-sm text-gray-400 mb-2 block px-2 mb-0.5 uppercase"
|
||||
<BaseLabel
|
||||
class="!text-gray-400 !mb-2 !block !px-2 !uppercase"
|
||||
>
|
||||
{{ $t('global_search.users') }}
|
||||
</label>
|
||||
</BaseLabel>
|
||||
<div
|
||||
v-for="(user, index) in usersStore.userList"
|
||||
:key="index"
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
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 }}
|
||||
|
||||
@ -69,31 +69,29 @@
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-8 mt-2">
|
||||
<div v-if="selectedCustomer.billing" class="flex flex-col">
|
||||
<label
|
||||
<BaseLabel
|
||||
class="
|
||||
mb-1
|
||||
text-sm
|
||||
font-medium
|
||||
text-left text-gray-400
|
||||
uppercase
|
||||
whitespace-nowrap
|
||||
!mb-1
|
||||
!text-left !text-gray-400
|
||||
!uppercase
|
||||
!whitespace-nowrap
|
||||
"
|
||||
>
|
||||
{{ $t('general.bill_to') }}
|
||||
</label>
|
||||
</BaseLabel>
|
||||
|
||||
<div
|
||||
v-if="selectedCustomer.billing"
|
||||
class="flex flex-col flex-1 p-0 text-left"
|
||||
>
|
||||
<label
|
||||
<BaseLabel
|
||||
v-if="selectedCustomer.billing.name"
|
||||
class="relative w-11/12 text-sm truncate"
|
||||
class="!relative !w-11/12 !truncate"
|
||||
>
|
||||
{{ selectedCustomer.billing.name }}
|
||||
</label>
|
||||
</BaseLabel>
|
||||
|
||||
<label class="relative w-11/12 text-sm truncate">
|
||||
<BaseLabel class="!relative !w-11/12 !truncate">
|
||||
<span v-if="selectedCustomer.billing.city">
|
||||
{{ selectedCustomer.billing.city }}
|
||||
</span>
|
||||
@ -108,42 +106,40 @@
|
||||
<span v-if="selectedCustomer.billing.state">
|
||||
{{ selectedCustomer.billing.state }}
|
||||
</span>
|
||||
</label>
|
||||
<label
|
||||
</BaseLabel>
|
||||
<BaseLabel
|
||||
v-if="selectedCustomer.billing.zip"
|
||||
class="relative w-11/12 text-sm truncate"
|
||||
class="!relative !w-11/12 !truncate"
|
||||
>
|
||||
{{ selectedCustomer.billing.zip }}
|
||||
</label>
|
||||
</BaseLabel>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="selectedCustomer.shipping" class="flex flex-col">
|
||||
<label
|
||||
<BaseLabel
|
||||
class="
|
||||
mb-1
|
||||
text-sm
|
||||
font-medium
|
||||
text-left text-gray-400
|
||||
uppercase
|
||||
whitespace-nowrap
|
||||
!mb-1
|
||||
!text-left !text-gray-400
|
||||
!uppercase
|
||||
!whitespace-nowrap
|
||||
"
|
||||
>
|
||||
{{ $t('general.ship_to') }}
|
||||
</label>
|
||||
</BaseLabel>
|
||||
|
||||
<div
|
||||
v-if="selectedCustomer.shipping"
|
||||
class="flex flex-col flex-1 p-0 text-left"
|
||||
>
|
||||
<label
|
||||
<BaseLabel
|
||||
v-if="selectedCustomer.shipping.name"
|
||||
class="relative w-11/12 text-sm truncate"
|
||||
class="!relative !w-11/12 !truncate"
|
||||
>
|
||||
{{ selectedCustomer.shipping.name }}
|
||||
</label>
|
||||
</BaseLabel>
|
||||
|
||||
<label class="relative w-11/12 text-sm truncate">
|
||||
<BaseLabel class="!relative !w-11/12 !truncate">
|
||||
<span v-if="selectedCustomer.shipping.city">
|
||||
{{ selectedCustomer.shipping.city }}
|
||||
</span>
|
||||
@ -158,13 +154,13 @@
|
||||
<span v-if="selectedCustomer.shipping.state">
|
||||
{{ selectedCustomer.shipping.state }}
|
||||
</span>
|
||||
</label>
|
||||
<label
|
||||
</BaseLabel>
|
||||
<BaseLabel
|
||||
v-if="selectedCustomer.shipping.zip"
|
||||
class="relative w-11/12 text-sm truncate"
|
||||
class="!relative !w-11/12 !text-sm !truncate"
|
||||
>
|
||||
{{ selectedCustomer.shipping.zip }}
|
||||
</label>
|
||||
</BaseLabel>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -211,7 +207,7 @@
|
||||
/>
|
||||
|
||||
<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>
|
||||
@ -335,9 +331,9 @@
|
||||
v-if="customerStore.customers.length === 0"
|
||||
class="flex justify-center p-5 text-gray-400"
|
||||
>
|
||||
<label class="text-base text-gray-500 cursor-pointer">
|
||||
<BaseLabel class="!text-base !text-gray-500 !cursor-pointer">
|
||||
{{ $t('customers.no_customers_found') }}
|
||||
</label>
|
||||
</BaseLabel>
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
@ -362,19 +358,18 @@
|
||||
>
|
||||
<BaseIcon name="UserAddIcon" class="text-primary-400" />
|
||||
|
||||
<label
|
||||
<BaseLabel
|
||||
class="
|
||||
m-0
|
||||
ml-3
|
||||
text-sm
|
||||
leading-none
|
||||
cursor-pointer
|
||||
font-base
|
||||
text-primary-400
|
||||
!m-0
|
||||
!ml-3
|
||||
!leading-none
|
||||
!cursor-pointer
|
||||
!font-base
|
||||
!text-primary-400
|
||||
"
|
||||
>
|
||||
{{ $t('customers.add_new_customer') }}
|
||||
</label>
|
||||
</BaseLabel>
|
||||
</button>
|
||||
</PopoverPanel>
|
||||
</div>
|
||||
|
||||
@ -4,10 +4,10 @@
|
||||
<slot></slot>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<label class="font-medium">{{ title }}</label>
|
||||
<BaseLabel >{{ title }}</BaseLabel>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<label class="text-gray-500">
|
||||
<label class="text-gray-500 dark:text-gray-400">
|
||||
{{ description }}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
@ -20,6 +20,7 @@
|
||||
hover:text-gray-700
|
||||
top-2.5
|
||||
right-3.5
|
||||
dark:text-gray-300
|
||||
"
|
||||
@click="$emit('clear')"
|
||||
>
|
||||
|
||||
@ -3,18 +3,15 @@
|
||||
<BaseContentPlaceholders v-if="contentLoading">
|
||||
<BaseContentPlaceholdersText :lines="1" :class="contentLoadClass" />
|
||||
</BaseContentPlaceholders>
|
||||
<label
|
||||
<BaseLabel
|
||||
v-else-if="label"
|
||||
:class="labelClasses"
|
||||
class="
|
||||
flex
|
||||
text-sm
|
||||
not-italic
|
||||
items-center
|
||||
font-medium
|
||||
text-gray-800
|
||||
whitespace-nowrap
|
||||
justify-between
|
||||
!flex
|
||||
!items-center
|
||||
!text-gray-800
|
||||
!whitespace-nowrap
|
||||
!justify-between
|
||||
"
|
||||
>
|
||||
<div>
|
||||
@ -28,10 +25,10 @@
|
||||
name="InformationCircleIcon"
|
||||
class="h-4 text-gray-400 cursor-pointer hover:text-gray-600"
|
||||
/>
|
||||
</label>
|
||||
</BaseLabel>
|
||||
<div :class="inputContainerClasses">
|
||||
<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 }}
|
||||
</span>
|
||||
<span v-if="error" class="block mt-0.5 text-sm text-red-500">
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<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-primary-800 dark:!text-gray-300">
|
||||
<slot />
|
||||
</label>
|
||||
</template>
|
||||
|
||||
@ -16,15 +16,13 @@
|
||||
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 dark:border-gray-600 md:hidden">
|
||||
<div class="flex justify-end p-2 border-b border-gray-200 md:hidden">
|
||||
<BaseDropdown width-class="w-48">
|
||||
<template #activator>
|
||||
<div
|
||||
@ -44,7 +42,7 @@
|
||||
<dots-vertical-icon class="w-6 h-6 text-gray-600" />
|
||||
</div>
|
||||
</template>
|
||||
<div class="flex flex-wrap space-x-1 dark:text-white">
|
||||
<div class="flex flex-wrap space-x-1">
|
||||
<span
|
||||
class="
|
||||
flex
|
||||
@ -55,9 +53,8 @@
|
||||
rounded-sm
|
||||
cursor-pointer
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-800
|
||||
"
|
||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('bold') }"
|
||||
:class="{ 'bg-gray-200': editor.isActive('bold') }"
|
||||
@click="editor.chain().focus().toggleBold().run()"
|
||||
>
|
||||
<bold-icon class="h-3 cursor-pointer fill-current" />
|
||||
@ -72,9 +69,8 @@
|
||||
rounded-sm
|
||||
cursor-pointer
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-800
|
||||
"
|
||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('italic') }"
|
||||
:class="{ 'bg-gray-200': editor.isActive('italic') }"
|
||||
@click="editor.chain().focus().toggleItalic().run()"
|
||||
>
|
||||
<italic-icon class="h-3 cursor-pointer fill-current" />
|
||||
@ -89,9 +85,8 @@
|
||||
rounded-sm
|
||||
cursor-pointer
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-800
|
||||
"
|
||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('strike') }"
|
||||
:class="{ 'bg-gray-200': editor.isActive('strike') }"
|
||||
@click="editor.chain().focus().toggleStrike().run()"
|
||||
>
|
||||
<strikethrough-icon class="h-3 cursor-pointer fill-current" />
|
||||
@ -106,9 +101,8 @@
|
||||
rounded-sm
|
||||
cursor-pointer
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-800
|
||||
"
|
||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('code') }"
|
||||
:class="{ 'bg-gray-200': editor.isActive('code') }"
|
||||
@click="editor.chain().focus().toggleCode().run()"
|
||||
>
|
||||
<coding-icon class="h-3 cursor-pointer fill-current" />
|
||||
@ -123,9 +117,8 @@
|
||||
rounded-sm
|
||||
cursor-pointer
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-800
|
||||
"
|
||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('paragraph') }"
|
||||
:class="{ 'bg-gray-200': editor.isActive('paragraph') }"
|
||||
@click="editor.chain().focus().setParagraph().run()"
|
||||
>
|
||||
<paragraph-icon class="h-3 cursor-pointer fill-current" />
|
||||
@ -140,10 +133,9 @@
|
||||
rounded-sm
|
||||
cursor-pointer
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-800
|
||||
"
|
||||
:class="{
|
||||
'bg-gray-200 dark:bg-gray-900': editor.isActive('heading', { level: 1 }),
|
||||
'bg-gray-200': editor.isActive('heading', { level: 1 }),
|
||||
}"
|
||||
@click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
|
||||
>
|
||||
@ -159,10 +151,9 @@
|
||||
rounded-sm
|
||||
cursor-pointer
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-800
|
||||
"
|
||||
:class="{
|
||||
'bg-gray-200 dark:bg-gray-900': editor.isActive('heading', { level: 2 }),
|
||||
'bg-gray-200': editor.isActive('heading', { level: 2 }),
|
||||
}"
|
||||
@click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
|
||||
>
|
||||
@ -178,10 +169,9 @@
|
||||
rounded-sm
|
||||
cursor-pointer
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-800
|
||||
"
|
||||
:class="{
|
||||
'bg-gray-200 dark:bg-gray-900': editor.isActive('heading', { level: 3 }),
|
||||
'bg-gray-200': editor.isActive('heading', { level: 3 }),
|
||||
}"
|
||||
@click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
|
||||
>
|
||||
@ -198,9 +188,8 @@
|
||||
rounded-sm
|
||||
cursor-pointer
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-800
|
||||
"
|
||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('bulletList') }"
|
||||
:class="{ 'bg-gray-200': editor.isActive('bulletList') }"
|
||||
@click="editor.chain().focus().toggleBulletList().run()"
|
||||
>
|
||||
<list-ul-icon class="h-3 cursor-pointer fill-current" />
|
||||
@ -215,9 +204,8 @@
|
||||
rounded-sm
|
||||
cursor-pointer
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-800
|
||||
"
|
||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('orderedList') }"
|
||||
:class="{ 'bg-gray-200': editor.isActive('orderedList') }"
|
||||
@click="editor.chain().focus().toggleOrderedList().run()"
|
||||
>
|
||||
<list-icon class="h-3 cursor-pointer fill-current" />
|
||||
@ -232,9 +220,8 @@
|
||||
rounded-sm
|
||||
cursor-pointer
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-800
|
||||
"
|
||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('blockquote') }"
|
||||
:class="{ 'bg-gray-200': editor.isActive('blockquote') }"
|
||||
@click="editor.chain().focus().toggleBlockquote().run()"
|
||||
>
|
||||
<quote-icon class="h-3 cursor-pointer fill-current" />
|
||||
@ -249,9 +236,8 @@
|
||||
rounded-sm
|
||||
cursor-pointer
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-800
|
||||
"
|
||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('codeBlock') }"
|
||||
:class="{ 'bg-gray-200': editor.isActive('codeBlock') }"
|
||||
@click="editor.chain().focus().toggleCodeBlock().run()"
|
||||
>
|
||||
<code-block-icon class="h-3 cursor-pointer fill-current" />
|
||||
@ -266,9 +252,8 @@
|
||||
rounded-sm
|
||||
cursor-pointer
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-800
|
||||
"
|
||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('undo') }"
|
||||
:class="{ 'bg-gray-200': editor.isActive('undo') }"
|
||||
@click="editor.chain().focus().undo().run()"
|
||||
>
|
||||
<undo-icon class="h-3 cursor-pointer fill-current" />
|
||||
@ -283,9 +268,8 @@
|
||||
rounded-sm
|
||||
cursor-pointer
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-800
|
||||
"
|
||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('redo') }"
|
||||
:class="{ 'bg-gray-200': editor.isActive('redo') }"
|
||||
@click="editor.chain().focus().redo().run()"
|
||||
>
|
||||
<redo-icon class="h-3 cursor-pointer fill-current" />
|
||||
@ -293,7 +277,7 @@
|
||||
</div>
|
||||
</BaseDropdown>
|
||||
</div>
|
||||
<div class="hidden p-2 border-b border-gray-200 dark:border-gray-600 md:flex">
|
||||
<div class="hidden p-2 border-b border-gray-200 md:flex">
|
||||
<div class="flex flex-wrap space-x-1">
|
||||
<span
|
||||
class="
|
||||
@ -305,9 +289,8 @@
|
||||
rounded-sm
|
||||
cursor-pointer
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-800
|
||||
"
|
||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('bold') }"
|
||||
:class="{ 'bg-gray-200': editor.isActive('bold') }"
|
||||
@click="editor.chain().focus().toggleBold().run()"
|
||||
>
|
||||
<bold-icon class="h-3 cursor-pointer fill-current" />
|
||||
@ -322,9 +305,8 @@
|
||||
rounded-sm
|
||||
cursor-pointer
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-800
|
||||
"
|
||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('italic') }"
|
||||
:class="{ 'bg-gray-200': editor.isActive('italic') }"
|
||||
@click="editor.chain().focus().toggleItalic().run()"
|
||||
>
|
||||
<italic-icon class="h-3 cursor-pointer fill-current" />
|
||||
@ -339,9 +321,8 @@
|
||||
rounded-sm
|
||||
cursor-pointer
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-800
|
||||
"
|
||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('strike') }"
|
||||
:class="{ 'bg-gray-200': editor.isActive('strike') }"
|
||||
@click="editor.chain().focus().toggleStrike().run()"
|
||||
>
|
||||
<strikethrough-icon class="h-3 cursor-pointer fill-current" />
|
||||
@ -356,9 +337,8 @@
|
||||
rounded-sm
|
||||
cursor-pointer
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-800
|
||||
"
|
||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('code') }"
|
||||
:class="{ 'bg-gray-200': editor.isActive('code') }"
|
||||
@click="editor.chain().focus().toggleCode().run()"
|
||||
>
|
||||
<coding-icon class="h-3 cursor-pointer fill-current" />
|
||||
@ -373,9 +353,8 @@
|
||||
rounded-sm
|
||||
cursor-pointer
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-800
|
||||
"
|
||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('paragraph') }"
|
||||
:class="{ 'bg-gray-200': editor.isActive('paragraph') }"
|
||||
@click="editor.chain().focus().setParagraph().run()"
|
||||
>
|
||||
<paragraph-icon class="h-3 cursor-pointer fill-current" />
|
||||
@ -390,9 +369,8 @@
|
||||
rounded-sm
|
||||
cursor-pointer
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-800
|
||||
"
|
||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('heading', { level: 1 }) }"
|
||||
:class="{ 'bg-gray-200': editor.isActive('heading', { level: 1 }) }"
|
||||
@click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
|
||||
>
|
||||
H1
|
||||
@ -407,9 +385,8 @@
|
||||
rounded-sm
|
||||
cursor-pointer
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-800
|
||||
"
|
||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('heading', { level: 2 }) }"
|
||||
:class="{ 'bg-gray-200': editor.isActive('heading', { level: 2 }) }"
|
||||
@click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
|
||||
>
|
||||
H2
|
||||
@ -424,9 +401,8 @@
|
||||
rounded-sm
|
||||
cursor-pointer
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-800
|
||||
"
|
||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('heading', { level: 3 }) }"
|
||||
:class="{ 'bg-gray-200': editor.isActive('heading', { level: 3 }) }"
|
||||
@click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
|
||||
>
|
||||
H3
|
||||
@ -442,9 +418,8 @@
|
||||
rounded-sm
|
||||
cursor-pointer
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-800
|
||||
"
|
||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('bulletList') }"
|
||||
:class="{ 'bg-gray-200': editor.isActive('bulletList') }"
|
||||
@click="editor.chain().focus().toggleBulletList().run()"
|
||||
>
|
||||
<list-ul-icon class="h-3 cursor-pointer fill-current" />
|
||||
@ -459,9 +434,8 @@
|
||||
rounded-sm
|
||||
cursor-pointer
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-800
|
||||
"
|
||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('orderedList') }"
|
||||
:class="{ 'bg-gray-200': editor.isActive('orderedList') }"
|
||||
@click="editor.chain().focus().toggleOrderedList().run()"
|
||||
>
|
||||
<list-icon class="h-3 cursor-pointer fill-current" />
|
||||
@ -476,9 +450,8 @@
|
||||
rounded-sm
|
||||
cursor-pointer
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-800
|
||||
"
|
||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('blockquote') }"
|
||||
:class="{ 'bg-gray-200': editor.isActive('blockquote') }"
|
||||
@click="editor.chain().focus().toggleBlockquote().run()"
|
||||
>
|
||||
<quote-icon class="h-3 cursor-pointer fill-current" />
|
||||
@ -493,9 +466,8 @@
|
||||
rounded-sm
|
||||
cursor-pointer
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-800
|
||||
"
|
||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('codeBlock') }"
|
||||
:class="{ 'bg-gray-200': editor.isActive('codeBlock') }"
|
||||
@click="editor.chain().focus().toggleCodeBlock().run()"
|
||||
>
|
||||
<code-block-icon class="h-3 cursor-pointer fill-current" />
|
||||
@ -510,9 +482,8 @@
|
||||
rounded-sm
|
||||
cursor-pointer
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-800
|
||||
"
|
||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('undo') }"
|
||||
:class="{ 'bg-gray-200': editor.isActive('undo') }"
|
||||
@click="editor.chain().focus().undo().run()"
|
||||
>
|
||||
<undo-icon class="h-3 cursor-pointer fill-current" />
|
||||
@ -527,9 +498,8 @@
|
||||
rounded-sm
|
||||
cursor-pointer
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-800
|
||||
"
|
||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('redo') }"
|
||||
:class="{ 'bg-gray-200': editor.isActive('redo') }"
|
||||
@click="editor.chain().focus().redo().run()"
|
||||
>
|
||||
<redo-icon class="h-3 cursor-pointer fill-current" />
|
||||
@ -544,9 +514,8 @@
|
||||
rounded-sm
|
||||
cursor-pointer
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-800
|
||||
"
|
||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive({ textAlign: 'left' }) }"
|
||||
:class="{ 'bg-gray-200': editor.isActive({ textAlign: 'left' }) }"
|
||||
@click="editor.chain().focus().setTextAlign('left').run()"
|
||||
>
|
||||
<menu-alt2-icon class="h-5 cursor-pointer fill-current" />
|
||||
@ -561,9 +530,8 @@
|
||||
rounded-sm
|
||||
cursor-pointer
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-800
|
||||
"
|
||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive({ textAlign: 'right' }) }"
|
||||
:class="{ 'bg-gray-200': editor.isActive({ textAlign: 'right' }) }"
|
||||
@click="editor.chain().focus().setTextAlign('right').run()"
|
||||
>
|
||||
<menu-alt3-icon class="h-5 cursor-pointer fill-current" />
|
||||
@ -578,10 +546,9 @@
|
||||
rounded-sm
|
||||
cursor-pointer
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-800
|
||||
"
|
||||
:class="{
|
||||
'bg-gray-200 dark:bg-gray-900': editor.isActive({ textAlign: 'justify' }),
|
||||
'bg-gray-200': editor.isActive({ textAlign: 'justify' }),
|
||||
}"
|
||||
@click="editor.chain().focus().setTextAlign('justify').run()"
|
||||
>
|
||||
@ -597,9 +564,8 @@
|
||||
rounded-sm
|
||||
cursor-pointer
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-800
|
||||
"
|
||||
:class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive({ textAlign: 'center' }) }"
|
||||
:class="{ 'bg-gray-200': editor.isActive({ textAlign: 'center' }) }"
|
||||
@click="editor.chain().focus().setTextAlign('center').run()"
|
||||
>
|
||||
<menu-center-icon class="h-5 cursor-pointer fill-current" />
|
||||
|
||||
Reference in New Issue
Block a user