DescriptionList

<script setup lang="ts">
import type { DescriptionListItem } from '@bitrix24/b24ui-nuxt'
import SignIcon from '@bitrix24/b24icons-vue/main/SignIcon'
import PersonIcon from '@bitrix24/b24icons-vue/main/PersonIcon'

const items = ref([
  {
    label: 'Line 1.1',
    description: 'Description 1.1',
    icon: SignIcon
  },
  {
    label: 'Line 1.2',
    description: 'Description 1.2',
    avatar: {
      icon: PersonIcon
    }
  },
  {
    description: 'Description 1.3',
    icon: SignIcon
  }
] satisfies DescriptionListItem[])
</script>

<template>
  <B24DescriptionList
    legend="Applicant Information"
    text="Personal details and application."
    :items="items"
  />
</template>

<script setup lang="ts">
import type { DescriptionListItem } from '@bitrix24/b24ui-nuxt'

const items = ref([
  {
    label: 'Line 1.1',
    description: 'Description 1.1',
    avatar: {
      src: '/b24ui/avatar/employee.png'
    }
  },
  {
    label: 'Line 1.2',
    description: 'Description 1.2',
    avatar: {
      src: '/b24ui/avatar/assistant.png'
    }
  },
  {
    description: 'Description 1.3',
    avatar: {
      src: 'https://github.com/bitrix24.png'
    }
  }
] satisfies DescriptionListItem[])
</script>

<template>
  <B24DescriptionList
    legend="Applicant Information"
    text="Personal details and application."
    :items="items"
  />
</template>

<script setup lang="ts">
import type { DescriptionListItem, ButtonProps } from '@bitrix24/b24ui-nuxt'
import SignIcon from '@bitrix24/b24icons-vue/main/SignIcon'
import DotsIcon from '@bitrix24/b24icons-vue/button/DotsIcon'

const action = (color: string): ButtonProps[] => [
  {
    icon: DotsIcon,
    color: color as any,
    onClick() {
      console.log('Action clicked')
    }
  }
]

const multipleActions = (color: string): ButtonProps[] => [
  {
    label: 'Action',
    color: color as any,
    onClick() {
      console.log('Action clicked')
    }
  },
  {
    label: 'Another action',
    color: color as any,
    onClick() {
      console.log('Another action clicked')
    }
  },
  {
    label: 'One more action',
    color: color as any,
    onClick() {
      console.log('One more action clicked')
    }
  },
  {
    label: 'And one more',
    color: color as any,
    icon: SignIcon,
    onClick() {
      console.log('And one more clicked')
    }
  },
  {
    label: 'Last one',
    color: color as any,
    icon: DotsIcon,
    onClick() {
      console.log('Last one clicked')
    }
  }
]

const items = ref([
  {
    label: 'Line 1.1',
    description: 'Description 1.1',
    actions: action('air-secondary-no-accent'),
    orientation: 'horizontal' as DescriptionListItem['orientation']
  },
  {
    label: 'Line 1.2',
    description: 'Description 1.2',
    actions: action('air-primary'),
    orientation: 'horizontal' as DescriptionListItem['orientation']
  },
  {
    label: 'Line 1.3',
    description: 'Description 1.3',
    actions: action('air-tertiary-no-accent'),
    orientation: 'horizontal' as DescriptionListItem['orientation']
  },
  {
    description: 'Fugiat ipsum ipsum deserunt culpa aute sint do nostrud anim incididunt cillum culpa consequat. Excepteur qui ipsum aliquip consequat sint. Sit id mollit nulla mollit nostrud in ea officia proident. Irure nostrud pariatur mollit ad adipisicing reprehenderit deserunt qui eu.',
    actions: multipleActions('default'),
    orientation: 'vertical' as DescriptionListItem['orientation']
  }
] satisfies DescriptionListItem[])
</script>

<template>
  <B24DescriptionList
    legend="Applicant Information"
    text="Personal details and application."
    :items="items"
  />
</template>

<script setup lang="ts">
import type { DescriptionListItem } from '@bitrix24/b24ui-nuxt'
import DownloadDoubleIcon from '@bitrix24/b24icons-vue/actions/DownloadDoubleIcon'
import PersonIcon from '@bitrix24/b24icons-vue/main/PersonIcon'
import Calendar1Icon from '@bitrix24/b24icons-vue/main/Calendar1Icon'
import CreditDebitCardIcon from '@bitrix24/b24icons-vue/main/CreditDebitCardIcon'

const items = ref([
  {
    id: 'amount',
    slot: 'amount',
    label: 'Amount',
    value: '$10,560.00',
    description: 'Paid',
    b24ui: {
      label: 'font-(--ui-font-weight-semi-bold) text-(length:--ui-font-size-md)/(--ui-font-line-height-md)',
      description: 'font-(--ui-font-weight-semi-bold) text-(length:--ui-font-size-lg) block w-full'
    }
  },
  {
    id: 'client',
    label: 'Client',
    avatar: {
      icon: PersonIcon
    },
    description: 'Employee Name',
    b24ui: {
      description: 'font-(--ui-font-weight-semi-bold)'
    }
  },
  {
    id: 'date',
    label: 'Due date',
    icon: Calendar1Icon,
    value: new Date('2023-01-31T03:24:00')
  },
  {
    id: 'payment',
    label: 'Payment method',
    icon: CreditDebitCardIcon,
    description: 'Paid with MasterCard'
  }
] satisfies (DescriptionListItem & { id: string, value?: Date | string })[])
</script>

<template>
  <B24Card variant="tinted-success" class="w-full">
    <B24DescriptionList
      legend="Applicant Information"
      text="Personal details and application."
      class="light"
      :items="items"
      :b24ui="{
        legend: 'sr-only',
        text: 'sr-only',
        labelWrapper: 'px-4',
        container: 'mt-0',
        descriptionWrapper: 'px-4',
        footer: 'mt-4 px-0 py-4 pb-0 flex flex-row flex-nowrap justify-end items-center'
      }"
    >
      <template #amount="{ index }">
        <dt class="col-start-1 flex flex-nowrap flex-row items-center justify-start gap-1.5 pt-2 sm:py-1 px-4">
          <ProseH4 class="mb-0">
            Amount
          </ProseH4>
        </dt>
        <dd class="pb-3 pt-1 sm:py-3 px-4">
          <div class="flex flex-wrap flex-row items-center justify-start gap-4">
            <div>
              {{ items[index]?.value }}
            </div>
            <B24Badge
              :label="items[index]?.description"
              class="font-(--ui-font-weight-semi-bold)"
              color="air-primary-success"
            />
          </div>
        </dd>
      </template>
      <template #description="{ item }">
        <template v-if="item.id === 'date'">
          <time :datetime="(item?.value as Date)?.toISOString()">{{ (item?.value as Date)?.toDateString() }}</time>
        </template>
        <template v-else>
          {{ item.description }}
        </template>
      </template>
      <template #footer>
        <B24Button
          color="air-primary"
          label="Download receipt"
          :icon="DownloadDoubleIcon"
          rounded
        />
      </template>
    </B24DescriptionList>
  </B24Card>
</template>