mirror of
https://github.com/crater-invoice/crater.git
synced 2025-10-27 11:41:09 -04:00
Compare commits
3 Commits
dark-custo
...
dark-base-
| Author | SHA1 | Date | |
|---|---|---|---|
| 3396a4a462 | |||
| cf1f8571f8 | |||
| 6e70930e87 |
@ -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>
|
||||
|
||||
@ -437,22 +437,21 @@ 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 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-sm leading-snug outline-none max-h-10',
|
||||
'p-0 relative mx-auto w-full flex items-center justify-end box-border cursor-pointer border border-gray-200 rounded-md bg-white text-sm leading-snug outline-none max-h-10',
|
||||
containerDisabled:
|
||||
'bg-gray-200 bg-opacity-50 !text-gray-400 dark:!text-gray-800 !dark:text-gray-500 !cursor-default dark:opacity-25',
|
||||
'cursor-default bg-gray-200 bg-opacity-50 !text-gray-400',
|
||||
containerOpen: '',
|
||||
containerOpenTop: '',
|
||||
containerActive: 'ring-1 ring-primary-400 border-primary-400',
|
||||
containerInvalid:
|
||||
'border-red-500 ring-red-500 focus:ring-red-500 focus:border-red-500 dark:border-red-500 dark:ring-red-500 dark:focus:ring-red-500 dark:focus:border-red-500',
|
||||
containerInvalidActive:
|
||||
'ring-1 border-red-500 ring-red-500 dark:ring-1 dark:border-red-500 dark:ring-red-500',
|
||||
'border-red-400 ring-red-400 focus:ring-red-400 focus:border-red-400',
|
||||
containerInvalidActive: 'ring-1 border-red-400 ring-red-400',
|
||||
singleLabel:
|
||||
'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 dark:text-white',
|
||||
'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5',
|
||||
multipleLabel:
|
||||
'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 dark:text-white',
|
||||
'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5',
|
||||
search:
|
||||
'w-full absolute inset-0 outline-none appearance-none box-border border-0 text-sm font-sans bg-white rounded-md pl-3.5 border-transparent focus:border-transparent focus:ring-0 dark:bg-gray-700 dark:text-white',
|
||||
'w-full absolute inset-0 outline-none appearance-none box-border border-0 text-sm font-sans bg-white rounded-md pl-3.5',
|
||||
tags: 'grow shrink flex flex-wrap mt-1 pl-2',
|
||||
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',
|
||||
@ -462,12 +461,12 @@ export default {
|
||||
'bg-multiselect-remove text-white bg-center bg-no-repeat opacity-30 inline-block w-3 h-3 group-hover:opacity-60',
|
||||
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 sm:text-sm font-sans box-border w-full dark:bg-gray-700',
|
||||
'absolute inset-0 border-0 focus:outline-none !shadow-none !focus:shadow-none appearance-none p-0 text-sm font-sans box-border w-full',
|
||||
tagsSearchCopy: 'invisible whitespace-pre-wrap inline-block h-px',
|
||||
placeholder:
|
||||
'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 text-gray-400 sm:text-sm dark:text-gray-500',
|
||||
'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 text-gray-400 text-sm',
|
||||
caret:
|
||||
'bg-multiselect-caret-black dark:bg-multiselect-caret-white bg-center bg-no-repeat w-5 h-5 py-px box-content z-5 relative mr-1 opacity-40 shrink-0 grow-0 transition-transform dark:text-white',
|
||||
'bg-multiselect-caret bg-center bg-no-repeat w-5 h-5 py-px box-content z-5 relative mr-1 opacity-40 shrink-0 grow-0 transition-transform',
|
||||
caretOpen: 'rotate-180 pointer-events-auto',
|
||||
clear:
|
||||
'pr-3.5 relative z-10 opacity-40 transition duration-300 shrink-0 grow-0 flex hover:opacity-80',
|
||||
@ -476,7 +475,7 @@ export default {
|
||||
spinner:
|
||||
'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 dark:border-gray-600 flex flex-col rounded-md dark:bg-gray-800 dark:shadow-glass',
|
||||
'max-h-60 shadow-lg absolute -left-px -right-px -bottom-1 translate-y-full border border-gray-300 mt-1 overflow-y-auto z-50 bg-white flex flex-col rounded-md',
|
||||
dropdownTop:
|
||||
'-translate-y-full -top-2 bottom-auto flex-col-reverse rounded-md',
|
||||
dropdownHidden: 'hidden',
|
||||
@ -484,7 +483,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 dark:bg-gray-700 dark:text-gray-400 cursor-default leading-normal',
|
||||
'flex text-sm box-border items-center justify-start text-left py-1 px-3 font-semibold bg-gray-200 cursor-default leading-normal',
|
||||
groupLabelPointable: 'cursor-pointer',
|
||||
groupLabelPointed: 'bg-gray-300 text-gray-700',
|
||||
groupLabelSelected: 'bg-primary-600 text-white',
|
||||
@ -494,18 +493,15 @@ 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 dark:text-gray-200',
|
||||
optionPointed:
|
||||
'text-gray-800 bg-gray-100 dark:text-white dark:bg-gray-700/30',
|
||||
'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',
|
||||
optionSelected: 'text-white bg-primary-500',
|
||||
optionDisabled: 'text-gray-300 cursor-not-allowed dark:text-gray-400',
|
||||
optionDisabled: 'text-gray-300 cursor-not-allowed',
|
||||
optionSelectedPointed: 'text-white bg-primary-500 opacity-90',
|
||||
optionSelectedDisabled:
|
||||
'text-primary-100 bg-primary-500 bg-opacity-50 cursor-not-allowed',
|
||||
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',
|
||||
noOptions: 'py-2 px-3 text-gray-600 bg-white',
|
||||
noResults: 'py-2 px-3 text-gray-600 bg-white',
|
||||
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 dark:text-gray-400">
|
||||
<ol class="flex flex-wrap py-4 text-gray-900 rounded list-reset">
|
||||
<slot />
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
@ -8,9 +8,7 @@
|
||||
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,7 +1,6 @@
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue'
|
||||
import SpinnerIcon from '@/scripts/components/icons/SpinnerIcon.vue'
|
||||
|
||||
const props = defineProps({
|
||||
contentLoading: {
|
||||
type: Boolean,
|
||||
@ -10,7 +9,7 @@ const props = defineProps({
|
||||
defaultClass: {
|
||||
type: String,
|
||||
default:
|
||||
'inline-flex whitespace-nowrap items-center border font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-800',
|
||||
'inline-flex whitespace-nowrap items-center border font-medium focus:outline-none focus:ring-2 focus:ring-offset-2',
|
||||
},
|
||||
tag: {
|
||||
type: String,
|
||||
@ -28,10 +27,6 @@ const props = defineProps({
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
loadingRight: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: 'md',
|
||||
@ -86,17 +81,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 dark:bg-primary-500 dark:hover:bg-primary-600':
|
||||
'border-transparent shadow-sm text-white bg-primary-600 hover:bg-primary-700 focus:ring-primary-500':
|
||||
props.variant === 'primary',
|
||||
'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-100 shadow-inner focus:ring-primary-500 dark:text-primary-400 dark:border-primary-400 dark:hover:bg-transparent dark:hover:text-primary-500 dark:hover:border-primary-500':
|
||||
'border-transparent border-solid border-primary-500 font-normal transition ease-in-out duration-150 text-primary-500 hover:bg-primary-200 shadow-inner focus:ring-primary-500':
|
||||
props.variant == 'primary-outline',
|
||||
'border-gray-200 text-gray-700 bg-white hover:bg-gray-50 focus:ring-primary-500 focus:ring-offset-0 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-900':
|
||||
'border-gray-200 text-gray-700 bg-white hover:bg-gray-50 focus:ring-primary-500 focus:ring-offset-0':
|
||||
props.variant == 'white',
|
||||
'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 dark:bg-gray-600 dark:text-white dark:hover:bg-opacity-60':
|
||||
'border-transparent bg-gray-200 border hover:bg-opacity-60 focus:ring-gray-500 focus:ring-offset-0':
|
||||
props.variant === 'gray',
|
||||
}
|
||||
})
|
||||
@ -129,13 +124,6 @@ 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>
|
||||
@ -153,17 +141,15 @@ const buttonDisabledClass = computed(() => {
|
||||
<BaseCustomTag
|
||||
v-else
|
||||
:tag="tag"
|
||||
:disabled="disabled || loading"
|
||||
:class="[defaultClass, sizeClass, variantClass, roundedClass, buttonDisabledClass]"
|
||||
:disabled="disabled"
|
||||
:class="[defaultClass, sizeClass, variantClass, roundedClass]"
|
||||
>
|
||||
<SpinnerIcon v-if="loading && !loadingRight" :class="[iconLeftClass, iconVariantClass]" />
|
||||
<SpinnerIcon v-if="loading" :class="[iconLeftClass, iconVariantClass]" />
|
||||
|
||||
<slot v-else name="left" :class="iconLeftClass" />
|
||||
<slot v-else name="left" :class="iconLeftClass"></slot>
|
||||
|
||||
<slot />
|
||||
|
||||
<SpinnerIcon v-if="loading && loadingRight" :class="[iconRightClass, iconVariantClass]" />
|
||||
|
||||
<slot v-else name="right" :class="[iconRightClass, iconVariantClass]" />
|
||||
<slot name="right" :class="[iconRightClass, iconVariantClass]"></slot>
|
||||
</BaseCustomTag>
|
||||
</template>
|
||||
|
||||
@ -1,9 +1,5 @@
|
||||
<template>
|
||||
<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 class="bg-white rounded-lg shadow">
|
||||
<div
|
||||
v-if="hasHeaderSlot"
|
||||
class="px-5 py-4 text-black border-b border-gray-100 border-solid"
|
||||
|
||||
@ -39,8 +39,6 @@ $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% {
|
||||
@ -59,10 +57,6 @@ $base-content-placeholders-secondary-color-dark: rgb(71, 85, 105) !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;
|
||||
}
|
||||
@ -92,15 +86,6 @@ $base-content-placeholders-secondary-color-dark: rgb(71, 85, 105) !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 {
|
||||
@ -171,10 +156,6 @@ $base-content-placeholders-secondary-color-dark: rgb(71, 85, 105) !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;
|
||||
@ -196,14 +177,6 @@ $base-content-placeholders-secondary-color-dark: rgb(71, 85, 105) !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,7 +40,6 @@
|
||||
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 dark:text-white"
|
||||
class="text-sm font-bold leading-5 text-black non-italic space-y-1"
|
||||
>
|
||||
<p v-if="address?.address_street_1">{{ address?.address_street_1 }},</p>
|
||||
|
||||
|
||||
@ -20,7 +20,6 @@
|
||||
border border-gray-200 border-solid
|
||||
min-h-[170px]
|
||||
rounded-md
|
||||
dark:border-white/10 dark:bg-gray-800/50
|
||||
"
|
||||
@click.stop
|
||||
>
|
||||
@ -28,7 +27,7 @@
|
||||
<BaseText
|
||||
:text="selectedCustomer.name"
|
||||
:length="30"
|
||||
class="flex-1 text-base font-medium text-left text-gray-900 dark:text-white"
|
||||
class="flex-1 text-base font-medium text-left text-gray-900"
|
||||
/>
|
||||
<div class="flex">
|
||||
<a
|
||||
@ -193,7 +192,6 @@
|
||||
border border-gray-200 border-solid
|
||||
rounded-md
|
||||
min-h-[170px]
|
||||
dark:border-white/10 dark:bg-gray-700/60 dark:text-white
|
||||
"
|
||||
>
|
||||
<BaseIcon
|
||||
@ -209,12 +207,11 @@
|
||||
bg-gray-200
|
||||
rounded-full
|
||||
font-base
|
||||
dark:bg-gray-700
|
||||
"
|
||||
/>
|
||||
|
||||
<div class="mt-1">
|
||||
<label class="text-lg font-medium text-gray-900 dark:text-white">
|
||||
<label class="text-lg font-medium text-gray-900">
|
||||
{{ $t('customers.new_customer') }}
|
||||
<span class="text-red-500"> * </span>
|
||||
</label>
|
||||
@ -249,11 +246,6 @@
|
||||
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">
|
||||
@ -273,7 +265,6 @@
|
||||
overflow-auto
|
||||
list
|
||||
border-t border-gray-200
|
||||
dark:border-white/10
|
||||
"
|
||||
>
|
||||
<li
|
||||
@ -289,7 +280,6 @@
|
||||
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)"
|
||||
>
|
||||
@ -309,7 +299,6 @@
|
||||
bg-gray-300
|
||||
rounded-full
|
||||
avatar
|
||||
dark:bg-gray-600
|
||||
"
|
||||
>
|
||||
{{ initGenerator(customer.name) }}
|
||||
@ -344,9 +333,9 @@
|
||||
</li>
|
||||
<div
|
||||
v-if="customerStore.customers.length === 0"
|
||||
class="flex justify-center p-5 text-gray-400 dark:text-gray-300"
|
||||
class="flex justify-center p-5 text-gray-400"
|
||||
>
|
||||
<label class="text-base text-gray-500 cursor-pointer dark:text-gray-300">
|
||||
<label class="text-base text-gray-500 cursor-pointer">
|
||||
{{ $t('customers.no_customers_found') }}
|
||||
</label>
|
||||
</div>
|
||||
@ -368,10 +357,6 @@
|
||||
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"
|
||||
>
|
||||
|
||||
@ -1,21 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
class="
|
||||
hidden
|
||||
top-0
|
||||
w-full
|
||||
absolute
|
||||
ml-auto
|
||||
mr-auto
|
||||
left-0
|
||||
right-0
|
||||
text-center
|
||||
h-full
|
||||
rounded-full
|
||||
bg-highlight/[.10]
|
||||
blur-2xl
|
||||
dark:block
|
||||
z-[-1]
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
@ -30,13 +30,8 @@
|
||||
leave-to="opacity-0"
|
||||
>
|
||||
<DialogOverlay
|
||||
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"
|
||||
class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75"
|
||||
/>
|
||||
</DialogOverlay>
|
||||
</TransitionChild>
|
||||
|
||||
<!-- This element is to trick the browser into centering the modal contents. -->
|
||||
@ -69,11 +64,6 @@
|
||||
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"
|
||||
>
|
||||
@ -90,31 +80,31 @@
|
||||
rounded-full
|
||||
"
|
||||
:class="{
|
||||
'bg-green-100 dark:bg-primary-500': dialogStore.variant === 'primary',
|
||||
'bg-red-100 dark:bg-red-500': dialogStore.variant === 'danger',
|
||||
'bg-green-100': dialogStore.variant === 'primary',
|
||||
'bg-red-100': dialogStore.variant === 'danger',
|
||||
}"
|
||||
>
|
||||
<BaseIcon
|
||||
v-if="dialogStore.variant === 'primary'"
|
||||
name="CheckIcon"
|
||||
class="w-6 h-6 text-green-600 dark:text-white"
|
||||
class="w-6 h-6 text-green-600"
|
||||
/>
|
||||
<BaseIcon
|
||||
v-else
|
||||
name="ExclamationIcon"
|
||||
class="w-6 h-6 text-red-600 dark:text-white"
|
||||
class="w-6 h-6 text-red-600"
|
||||
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 dark:text-white"
|
||||
class="text-lg font-medium leading-6 text-gray-900"
|
||||
>
|
||||
{{ dialogStore.title }}
|
||||
</DialogTitle>
|
||||
<div class="mt-2">
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">
|
||||
<p class="text-sm text-gray-500">
|
||||
{{ dialogStore.message }}
|
||||
</p>
|
||||
</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 dark:bg-gray-800">
|
||||
<div v-show="show" class="relative z-10 p-4 md:p-8 bg-gray-200 rounded">
|
||||
<slot name="filter-header" />
|
||||
|
||||
<label
|
||||
@ -20,7 +20,6 @@
|
||||
hover:text-gray-700
|
||||
top-2.5
|
||||
right-3.5
|
||||
dark:text-gray-300
|
||||
"
|
||||
@click="$emit('clear')"
|
||||
>
|
||||
|
||||
@ -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,7 +74,11 @@
|
||||
my-4
|
||||
${modalSize}
|
||||
sm:w-full
|
||||
border-t-8 border-solid rounded shadow-xl border-primary-500`"
|
||||
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
|
||||
v-if="hasHeaderSlot"
|
||||
@ -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>
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="flex flex-wrap justify-between">
|
||||
<div>
|
||||
<h3 class="text-2xl font-bold text-left text-black dark:text-white">
|
||||
<h3 class="text-2xl font-bold text-left text-black">
|
||||
{{ title }}
|
||||
</h3>
|
||||
<slot />
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
|
||||
<Switch
|
||||
v-model="enabled"
|
||||
:class="enabled ? 'bg-primary-500' : 'bg-gray-300 dark:bg-gray-900'"
|
||||
:class="enabled ? 'bg-primary-500' : 'bg-gray-300'"
|
||||
class="
|
||||
relative
|
||||
inline-flex
|
||||
@ -21,11 +21,7 @@
|
||||
v-bind="$attrs"
|
||||
>
|
||||
<span
|
||||
:class="
|
||||
enabled
|
||||
? 'translate-x-6 dark:bg-white'
|
||||
: 'translate-x-1 dark:bg-gray-500'
|
||||
"
|
||||
:class="enabled ? 'translate-x-6' : 'translate-x-1'"
|
||||
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 dark:text-white"
|
||||
class="p-0 mb-1 text-sm leading-snug text-black font-medium"
|
||||
passive
|
||||
>
|
||||
{{ title }}
|
||||
</SwitchLabel>
|
||||
<SwitchDescription class="text-sm text-gray-500 dark:text-gray-400">
|
||||
<SwitchDescription class="text-sm text-gray-500">
|
||||
{{ description }}
|
||||
</SwitchDescription>
|
||||
</div>
|
||||
@ -18,7 +18,7 @@
|
||||
:disabled="disabled"
|
||||
:model-value="modelValue"
|
||||
:class="[
|
||||
modelValue ? 'bg-primary-500' : 'bg-gray-200 dark:bg-gray-900',
|
||||
modelValue ? 'bg-primary-500' : 'bg-gray-200',
|
||||
'ml-4 relative inline-flex shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500',
|
||||
]"
|
||||
@update:modelValue="onUpdate"
|
||||
@ -26,7 +26,7 @@
|
||||
<span
|
||||
aria-hidden="true"
|
||||
:class="[
|
||||
modelValue ? 'translate-x-5 dark:bg-white' : 'translate-x-0 dark:bg-gray-500',
|
||||
modelValue ? 'translate-x-5' : 'translate-x-0',
|
||||
'inline-block h-5 w-5 rounded-full bg-white shadow ring-0 transition ease-in-out duration-200',
|
||||
]"
|
||||
/>
|
||||
|
||||
@ -36,7 +36,6 @@ module.exports = {
|
||||
900: withOpacityValue('--color-primary-900'),
|
||||
},
|
||||
black: '#040405',
|
||||
highlight: 'rgb(56, 189, 248)',
|
||||
red: colors.red,
|
||||
teal: colors.teal,
|
||||
gray: colors.slate,
|
||||
@ -45,15 +44,10 @@ module.exports = {
|
||||
88: '22rem',
|
||||
},
|
||||
backgroundImage: (theme) => ({
|
||||
'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>`,
|
||||
)}")`,
|
||||
'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-caret': `url("${svgToDataUri(
|
||||
`<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<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