Skip to content

[DRAFT] feat: add NcFormListBox #7889

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
ShGKme wants to merge 1 commit into
base: main
Choose a base branch
from
+160 −0
Draft

[DRAFT] feat: add NcFormListBox #7889

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
153 changes: 153 additions & 0 deletions src/components/NcFormListBox/NcFormListBox.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,153 @@
<!--
- SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
- SPDX-License-Identifier: AGPL-3.0-or-later
-->

<script setup lang="ts">
import type { Slot } from 'vue'

const {
ariaLabel = undefined,
ariaLabelledby = undefined,
} = defineProps<{
/** aria-label attribute for the <ul> element */
ariaLabel?: string
/** aria-labelledby attribute for the <ul> element */
ariaLabelledby?: string
}>()

defineSlots<{
/** NcListItem components */
default?: Slot
}>()
</script>

<template>
<ul :aria-label :aria-labelledby :class="$style.formListBox">
<slot />
</ul>
</template>

<style lang="scss" module>
.formListBox {
--form-element-label-offset: calc(var(--border-radius-element) + var(--default-grid-baseline));

:global(.list-item__wrapper) {
padding-block: 0;
padding-inline: 0;

&::before {
content: '';
position: absolute;
border-top: 1px solid var(--color-border);
inset-inline: var(--form-element-label-offset);
inset-block-start: calc(0px - 1 * var(--default-grid-baseline) / 2); // half of the gap
}

&:first-child::before {
display: none;
}
}

:global(.list-item) {
--list-item-padding: var(--default-grid-baseline) var(--form-element-label-offset);
}

:global(.list-item-content):first-child {
padding-inline-start: 0;
}
}
</style>

<docs>
### General
```vue
<script>
import { mdiDomain, mdiEmailOutline, mdiPencilOutline, mdiTrashCanOutline } from '@mdi/js'

export default {
setup() {
return { mdiDomain, mdiEmailOutline, mdiPencilOutline, mdiTrashCanOutline }
},
data() {
return {
text: 'Text',
option: 'One'
}
}
}
</script>

<template>
<div style="display: flex; flex-direction: column; gap: calc(6 * var(--default-grid-baseline));">
<NcFormGroup
label="Text blocks"
description="Reusable pieces of text that can be inserted in messages">
<NcFormListBox>
<NcListItem name="Title">
<template #subname>
Content
</template>
<template #extra-actions>
<NcButton variant="tertiary" #icon>
<NcIconSvgWrapper :path="mdiPencilOutline" inline />
</NcButton>
<NcButton variant="tertiary" #icon>
<NcIconSvgWrapper :path="mdiTrashCanOutline" inline />
</NcButton>
</template>
</NcListItem>
<NcListItem name="Reply">
<template #subname>
Thank you for contacting us!
</template>
<template #extra-actions>
<NcButton variant="tertiary" #icon>
<NcIconSvgWrapper :path="mdiPencilOutline" inline />
</NcButton>
<NcButton variant="tertiary" #icon>
<NcIconSvgWrapper :path="mdiTrashCanOutline" inline />
</NcButton>
</template>
</NcListItem>
</NcFormListBox>
</NcFormGroup>

<NcFormGroup label="Always show images from">
<NcFormListBox>
<NcListItem name="example.com">
<template #icon>
<NcIconSvgWrapper :path="mdiDomain" inline />
</template>
<template #extra-actions>
<NcButton variant="tertiary" #icon>
<NcIconSvgWrapper :path="mdiTrashCanOutline" inline />
</NcButton>
</template>
</NcListItem>
<NcListItem name="example.net">
<template #icon>
<NcIconSvgWrapper :path="mdiDomain" inline />
</template>
<template #extra-actions>
<NcButton variant="tertiary" #icon>
<NcIconSvgWrapper :path="mdiTrashCanOutline" inline />
</NcButton>
</template>
</NcListItem>
<NcListItem name="mail@example.org">
<template #icon>
<NcIconSvgWrapper :path="mdiEmailOutline" inline />
</template>
<template #extra-actions>
<NcButton variant="tertiary" #icon>
<NcIconSvgWrapper :path="mdiTrashCanOutline" inline />
</NcButton>
</template>
</NcListItem>
</NcFormListBox>
</NcFormGroup>
</div>
</template>
```
</docs>
6 changes: 6 additions & 0 deletions src/components/NcFormListBox/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
/*!
* SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
* SPDX-License-Identifier: AGPL-3.0-or-later
*/

export { default } from './NcFormListBox.vue'
1 change: 1 addition & 0 deletions src/components/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ export { default as NcFormBoxButton } from './NcFormBoxButton/index.ts'
export { default as NcFormBoxCopyButton } from './NcFormBoxCopyButton/index.ts'
export { default as NcFormBoxSwitch } from './NcFormBoxSwitch/index.ts'
export { default as NcFormGroup } from './NcFormGroup/index.ts'
export { default as NcFormListBox } from './NcFormListBox/index.ts'
export { default as NcGuestContent } from './NcGuestContent/index.ts'
export { default as NcHeaderButton } from './NcHeaderButton/index.ts'
export { default as NcHeaderMenu } from './NcHeaderMenu/index.ts'
Expand Down
Loading