marco/contexted-v3
1
0
Fork 0
Code Issues 7 Pull Requests Packages Projects 1 Releases Wiki Activity

daisyUI 3.0

Browse Source
This commit is contained in:
Marco Crapts
2023-06-01 13:42:35 +02:00
parent 1e742826cf
commit 19e99fcc28
14 changed files with 99 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Note/NoteReferences.vue
View File

@@ -8,7 +8,7 @@ const props = defineProps<{
<UIMenu class="mt-3 rounded-xl border-[1px] px-3 py-3" v-if="props.references.length > 0">
<UIMenuItem :title="true">
<span>References</span>
<UIBadge variant="outline">{{ props.references.length }}</UIBadge>
<UIBadge variant="outline" class="ml-2">{{ props.references.length }}</UIBadge>
</UIMenuItem>
<UIMenuItem
v-for="reference in props.references"

2
src/components/Note/NoteToolbar.vue
View File

@@ -59,7 +59,7 @@ const openModal = async (open: () => void, modal: ModalOptions) => {
<UIButtonGroup class="flex items-center" v-if="!props.note.isRoot">
<UIModal v-for="confirmModal in confirmModals" :key="confirmModal.key">
<template #activator="{ open }">
<UIButton size="sm" @click="openModal(open, confirmModal)">
<UIButton size="sm" @click="openModal(open, confirmModal)" :join="true">
<i :class="confirmModal.icon" />
</UIButton>
</template>

2
src/components/Search/SearchResult.vue
View File

@@ -22,7 +22,7 @@ const element = ref<HTMLElement | null>(null)
:active="props.activeResult?.id === result.id"
>
<UIBadge size="sm" variant="ghost" class="mr-0.5" v-if="activeNote?.id === result.id">current</UIBadge>
<span class="flex-grow overflow-hidden whitespace-nowrap">{{ result.title }}</span>
<span class="truncate flex-grow">{{ result.title }}</span>
<span class="whitespace-nowrap">{{ formatDate(result.modified) }}</span>
</UIMenuItem>
</template>

2
src/components/SideBar/SideBarMenuItem.vue
View File

@@ -6,7 +6,7 @@ const props = defineProps<{
</script>
<template>
<a
class="max-sm:mt-2 mt-1 block w-full cursor-pointer overflow-x-hidden text-ellipsis whitespace-nowrap rounded hover:bg-gray-200 active:bg-primary active:text-primary-content"
class="max-sm:mt-2 mt-1 block w-full cursor-pointer truncate rounded hover:bg-gray-200 active:bg-primary active:text-primary-content"
:class="props.active ? 'font-bold text-primary' : 'text-secondary'"
>
<i :class="props.icon" class="mr-2" v-if="props.icon"></i>

12
src/components/TopBar/Settings/AccountSettings.vue
View File

@@ -105,7 +105,7 @@ const toggleEncryption = async () => {
<div class="items-top w-full flex-row sm:flex">
<div class="font-bold sm:w-4/12">Export notes</div>
<UIButton size="sm" @click="exportNotes">
<i class="fa-fw fa-solid fa-file-export mr-2"></i>
<i class="fa-fw fa-solid fa-file-export"></i>
Export notes
</UIButton>
</div>
@@ -113,13 +113,13 @@ const toggleEncryption = async () => {
<div class="flex-shrink-0 font-bold sm:w-4/12">Delete account</div>
<div>
<UIButton size="sm" color="error" @click="showDeleteAccountDialog = true">
<i class="fa-fw fa-solid fa-trash mr-2"></i>
<i class="fa-fw fa-solid fa-trash"></i>
Delete account
</UIButton>
<UIAlert
color="warning"
density="compact"
class="mt-1 space-y-2"
class="mt-1 space-y-2 text-sm"
v-if="showDeleteAccountDialog"
>
<div>
@@ -146,7 +146,7 @@ const toggleEncryption = async () => {
@click="showEncryptionDialog = true"
v-if="showEncryptionDialog === false"
>
<i class="fa-fw fa-solid fa-key mr-2"></i>
<i class="fa-fw fa-solid fa-key"></i>
Enable end-to-end encryption
</UIButton>
</template>
@@ -156,11 +156,11 @@ const toggleEncryption = async () => {
@click="showEncryptionDialog = true"
v-if="showEncryptionDialog === false"
>
<i class="fa-fw fa-solid fa-key mr-2"></i>
<i class="fa-fw fa-solid fa-key"></i>
Disable end-to-end encryption
</UIButton>
</template>
<UIAlert color="info" density="compact" v-if="showEncryptionDialog">
<UIAlert color="info" density="compact" class="text-sm" v-if="showEncryptionDialog">
<div class="w-full space-y-2">
<div>
Enter your passphrase to

4
src/components/ViewModes/ListView.vue
View File

@@ -61,9 +61,9 @@ const deleteSelectedNotes = (closeModal: () => void) => {
></UIInputText>
</div>
<div class="overflow-x-auto">
<UITable density="compact" class="w-full">
<UITable size="md" class="w-full">
<thead>
<tr>
<tr class="text-sm bg-base-200 text-base-content">
<th class="w-[48px]"></th>
<th>Note title</th>
<th class="w-[75px]">Words</th>

9
src/components/ui/UIButton.vue
View File

@@ -4,13 +4,15 @@ interface Props {
variant?: 'regular' | 'outline'
color?: 'regular' | 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'
dropdown?: boolean
join?: boolean
}
const props = withDefaults(defineProps<Props>(), {
size: 'md',
variant: 'regular',
color: 'regular',
dropdown: false
dropdown: false,
join: false
})
const styleClass = computed(() => {
@@ -36,7 +38,8 @@ const styleClass = computed(() => {
const sizeClass = sizeVariants[props.size]
const variantClass = variantVariants[props.variant]
const colorClass = colorVariants[props.color]
return [sizeClass, variantClass, colorClass]
const joinClass = props.join ? 'dui-join-item' : ''
return [sizeClass, variantClass, colorClass, joinClass]
})
</script>
<template>
@@ -48,7 +51,7 @@ const styleClass = computed(() => {
>
<slot></slot>
</label>
<button class="dui-btn h-auto px-3 py-2 duration-0" :class="styleClass" v-else>
<button type="button" class="dui-btn h-auto px-3 py-2 duration-0" :class="styleClass" v-else>
<slot></slot>
</button>
</template>

2
src/components/ui/UIButtonGroup.vue
View File

@@ -1,3 +1,3 @@
<template>
<div class="dui-btn-group"><slot></slot></div>
<div class="dui-join"><slot></slot></div>
</template>

2
src/components/ui/UIDropdownItem.vue
View File

@@ -1,5 +1,5 @@
<template>
<li class="text-base">
<li class="text-sm">
<a class="rounded-lg"><slot></slot></a>
</li>
</template>

4
src/components/ui/UIMenuItem.vue
View File

@@ -9,7 +9,7 @@ const props = defineProps<Props>()
const styleClass = computed(() => {
const titleClass = props.title
? 'dui-menu-item dui-menu-title !opacity-100 space-x-2 !text-xl font-bold text-secondary'
? 'dui-menu-item dui-menu-title !opacity-100 space-x-2 !text-xl font-bold !text-secondary'
: ''
return [titleClass]
})
@@ -18,7 +18,7 @@ const styleClass = computed(() => {
<li :class="styleClass">
<span class="flex items-center" v-if="props.title"><slot></slot></span>
<a
class="w-full rounded-md"
class="w-full rounded-md flex"
:class="{ 'dui-disabled': props.disabled, 'dui-active': props.active }"
v-else
>

16
src/components/ui/UITable.vue
View File

@@ -1,12 +1,20 @@
<script setup lang="ts">
interface Props {
density?: 'compact'
size?: 'xs' | 'sm' | 'md' | 'lg'
}
const props = defineProps<Props>()
const props = withDefaults(defineProps<Props>(), {
size: 'md'
})
const styleClass = computed(() => {
const densityClass = props.density ? 'dui-table-compact' : ''
return [densityClass]
const sizeVariants = {
'xs': 'dui-table-xs',
'sm': 'dui-table-sm',
'md': 'dui-table-md',
'lg': 'dui-table-lg',
}
const sizeClass = sizeVariants[props.size]
return [sizeClass]
})
</script>