PopupCommunity Asset

<template>
  <div class="n-stack n-stack-horizontal">
    <BaseButton aria-controls="popout" aria-haspopup="true"> Text </BaseButton>
    <BasePopout id="popout">Just a popout with plain content</BasePopout>

    <BaseButton aria-controls="read-only" aria-haspopup="true">
      Read only
    </BaseButton>
    <BasePopout id="read-only">
      <ReadOnlyField label="Label" value="Input data" />
    </BasePopout>

    <BaseButton aria-controls="field-placeholder" aria-haspopup="true">
      Field placeholder
    </BaseButton>
    <BasePopout id="field-placeholder">
      <FieldPlaceholder
        name="field-placeholder"
        label="Label"
        button-text="Add label"
        inline-edit
        @show-content="console.log('show content')"
      />
    </BasePopout>

    <BaseButton aria-controls="edit-info" aria-haspopup="true">
      Edit info
    </BaseButton>
    <BasePopout id="edit-info">
      <EditableStack label="Edit" @edit="console.log('Edit button clicked')">
        <ReadOnlyField label="Label" value="Input data" />
      </EditableStack>
    </BasePopout>
  </div>
</template>

<template>
  <div class="n-stack n-stack-horizontal">
    <BaseButton
      aria-controls="payment-summary"
      aria-haspopup="true"
      variant="plain"
      size="s"
    >
      <span class="n-font-weight-active n-font-size-m n-color-text-danger">
        $126.00
      </span>
      <nord-icon
        slot="end"
        name="interface-dropdown-small"
        class="n-color-text"
      ></nord-icon>
    </BaseButton>
    <BasePopout id="payment-summary">
      <DividedStack>
        <div class="n-stack n-gap-xs">
          <PaymentSummaryRow label="Unpaid invoices" value="$178.00" is-total />
          <PaymentSummaryRow label="Finalized invoices" value="$138.00" />
          <PaymentSummaryRow label="Draft invoices" value="$40.00" />
        </div>
        <div class="n-stack n-gap-xs">
          <PaymentSummaryRow
            label="Available credit"
            value="-$52.00"
            is-total
            negative-value
          />
          <PaymentSummaryRow label="Prepayments" value="-$20.00" />
          <PaymentSummaryRow label="Credit notes" value="-$30.00" />
          <PaymentSummaryRow label="Finalized credit notes" value="-$20.00" />
        </div>
      </DividedStack>
    </BasePopout>

    <BaseButton
      aria-controls="payment-summary-icon"
      aria-haspopup="true"
      variant="plain"
      size="s"
      square
    >
      <nord-icon
        label="Show payment details"
        name="file-invoice"
        size="m"
        class="n-color-text-danger"
      ></nord-icon>
    </BaseButton>
    <BasePopout id="payment-summary-icon">
      <template #header>
        <PaymentSummaryRow
          label="Client balance"
          value="$126.00"
          is-total
          is-header
        />
      </template>
      <DividedStack>
        <div class="n-stack n-gap-xs">
          <PaymentSummaryRow label="Unpaid invoices" value="$178.00" is-total />
          <PaymentSummaryRow label="Finalized invoices" value="$138.00" />
          <PaymentSummaryRow label="Draft invoices" value="$40.00" />
        </div>
        <div class="n-stack n-gap-xs">
          <PaymentSummaryRow
            label="Available credit"
            value="-$52.00"
            is-total
            negative-value
          />
          <PaymentSummaryRow label="Prepayments" value="-$20.00" />
          <PaymentSummaryRow label="Credit notes" value="-$30.00" />
          <PaymentSummaryRow label="Finalized credit notes" value="-$20.00" />
        </div>
      </DividedStack>
    </BasePopout>

    <BaseButton
      aria-controls="all-info"
      aria-haspopup="true"
      variant="plain"
      size="s"
      square
    >
      <nord-icon
        label="Show all info"
        name="interface-menu-small"
        size="m"
      ></nord-icon>
    </BaseButton>
    <BasePopout id="all-info">
      <div class="n-stack n-gap-s">
        <div class="n-stack n-stack-horizontal n-gap-s">
          <nord-icon
            name="generic-telephone"
            size="s"
            class="n-color-icon"
          ></nord-icon>
          314 159 2653
        </div>
        <div class="n-stack n-stack-horizontal n-gap-s">
          <nord-icon
            name="file-invoice"
            size="s"
            class="n-color-icon"
          ></nord-icon>
          <span class="n-font-weight-active n-color-text-danger">
            $126.00
          </span>
        </div>
      </div>
    </BasePopout>
  </div>
</template>

<script setup lang="ts">
const comboboxOptions = ref([
  { label: 'Amphibian', value: 'AMPHIBIAN' },
  { label: 'Canine', value: 'CANINE' },
  { label: 'Feline', value: 'FELINE' },
  { label: 'Rodents', value: 'RODENTS' },
])
</script>

<template>
  <div class="n-stack n-stack-horizontal">
    <BaseButton aria-controls="popout" aria-haspopup="true">
      View patient location #1000
    </BaseButton>

    <BasePopout id="popout" heading="Patient location #1000">
      <DividedStack class="n-container-m">
        <div class="n-stack n-gap-m">
          <ReadOnlyField label="Status">
            <nord-badge>Occupied</nord-badge>
          </ReadOnlyField>

          <ReadOnlyField label="Patients">
            <a>Florian (1000)</a>, Dog, American Bullnese
          </ReadOnlyField>

          <ReadOnlyField label="Capacity" />
        </div>

        <ReadOnlyField
          label="Remarks"
          value="Lorem ipsum dolor sit amet consectetur adipiscing elit"
        />
      </DividedStack>
    </BasePopout>

    <BaseButton aria-controls="form" aria-haspopup="true">Form</BaseButton>
    <BasePopout id="form">
      <form class="n-stack n-gap-l">
        <FormNordField name="text" label="Text input" inline-edit />
        <FormDatePicker name="date" label="Date" inline-edit />
        <FormComboboxMultiple
          name="species"
          label="Species"
          :options="comboboxOptions"
          placeholder="Select species"
          inline-edit
        />
      </form>
      <template #footer>
        <BaseButton size="s">Update</BaseButton>
      </template>
    </BasePopout>

    <BaseButton
      aria-controls="information-type-simple-value"
      aria-haspopup="true"
    >
      Readonly
    </BaseButton>
    <BasePopout id="information-type-simple-value">
      <DividedStack>
        <ReadOnlyField label="Label" value="Value" />
        <EditableStack label="Edit" @edit="console.log('Edit button clicked')">
          <ReadOnlyField label="Label" value="Input data" />
        </EditableStack>
        <ReadOnlyField
          label="Notes"
          value="Long value: lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
        />
        <ReadOnlyField
          label="Tags"
          :value="['Aggresive', 'Diabetic']"
          display-as="tags"
        />
        <EditableStack label="Edit" @edit="console.log('Edit button clicked')">
          <ReadOnlyField
            label="Editable tags"
            :value="[
              'Aggresive',
              'Diabetic',
              'Oxygen',
              'Soft walls (padded)',
              'With windows',
            ]"
            display-as="tags"
          />
        </EditableStack>
      </DividedStack>
    </BasePopout>
  </div>
</template>

<template>
  <div class="n-stack n-stack-horizontal">
    <BaseButton aria-controls="popout" aria-haspopup="true">
      Simple
    </BaseButton>
    <BasePopout id="popout">
      <template #header>The header</template>
      This text is intentionally long so we can see how it wraps and the popout
      doesn't grow larger than the <b>max-inline-size</b> value.
      <template #footer>
        <BaseButton size="s">Close</BaseButton>
      </template>
    </BasePopout>

    <BaseButton aria-controls="cards-with-header" aria-haspopup="true">
      Read only
    </BaseButton>
    <BasePopout id="cards-with-header" expand>
      <template #header>
        <div class="n-stack n-stack-horizontal n-gap-s">
          <nord-avatar>JD</nord-avatar>
          <h2 class="n-font-size-m n-font-weight-active">John Dorian (2468)</h2>
        </div>
      </template>
      <DividedStack>
        <CardInnerSection>
          <ReadOnlyField label="Phone" value="123 45 6789" />
          <ReadOnlyField label="Enail" value="john.dorian@gmail.com" />
          <ReadOnlyField label="Address">
            <FormattedAddress
              country="NO"
              zip-code="11 0154"
              city="Oslo"
              street-address="Karl Johans gate"
            />
          </ReadOnlyField>
        </CardInnerSection>
        <CardInnerSection>
          <ReadOnlyField
            label="Tags"
            :value="['Aggresive', 'Diabetic']"
            display-as="tags"
          />
          <ReadOnlyField
            label="General remarks"
            value="Lorem ipsum dolor sit amet."
          />
        </CardInnerSection>
      </DividedStack>
      <template #footer>
        <nord-button size="s">Pin to side</nord-button>
        <nord-button size="s">Open client page</nord-button>
      </template>
    </BasePopout>

    <BaseButton aria-controls="cards-with-header-2" aria-haspopup="true">
      Long content
    </BaseButton>
    <BasePopout id="cards-with-header-2" max-width>
      <template #header>
        <div class="n-stack n-stack-horizontal n-gap-s">
          <nord-avatar
            src="https://i.giphy.com/KL5rlX6dGjwJO.webp"
            name="Garfield"
          ></nord-avatar>
          <h2 class="n-font-size-m n-font-weight-active">Garfield (1357)</h2>
        </div>
      </template>
      <DividedStack>
        <CardInnerSection>
          <ReadOnlyField
            label="Species, breed"
            value="Cat (Feline - Domestic), Orange tabby"
          />
          <ReadOnlyField label="Sex" value="Male, neutered" />
          <ReadOnlyField label="Age" value="5 years 3 months" />
          <EditableStack
            label="Edit"
            @edit="console.log('Edit button clicked')"
          >
            <ReadOnlyField label="Weight" value="5,24 kg" />
          </EditableStack>
        </CardInnerSection>
        <CardInnerSection>
          <ReadOnlyField
            label="Tags"
            :value="['Aggresive', 'Diabetic']"
            display-as="tags"
          />
          <ReadOnlyField
            label="Critical remarks"
            value="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, ut enim ad minim veniam, quis nostrud Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, ut enim ad minim veniam, quis nostrud exercitation. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, ut enim ad minim veniam, quis nostrud exercitation.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, ut enim ad minim veniam, quis nostrud exercitation. exercitation."
          />
        </CardInnerSection>
      </DividedStack>
      <template #footer>
        <nord-button size="s">Pin to side</nord-button>
        <nord-button size="s">Open client page</nord-button>
      </template>
    </BasePopout>

    <BaseButton aria-controls="pin-to-side" aria-haspopup="true">
      Pin to side
    </BaseButton>
    <BasePopout id="pin-to-side" heading="Consultation 2468">
      <DividedStack>
        <CardInnerSection>
          <ReadOnlyField label="Label 1" value="Lorem ipsum" />
          <ReadOnlyField label="Label 2" value="Nostrud exercitation" />
        </CardInnerSection>
      </DividedStack>
      <template #footer>
        <nord-button size="s">Pin to side</nord-button>
      </template>
    </BasePopout>

    <BaseButton aria-controls="go-to-page" aria-haspopup="true">
      Go to page
    </BaseButton>
    <BasePopout id="go-to-page" expand heading="Consultation 2468">
      <DividedStack>
        <CardInnerSection>
          <ReadOnlyField
            label="Reason type"
            value="Lorem ipsum dolor"
            display-as="tags"
          />
          <ReadOnlyField
            label="Reason"
            value="Excepteur sint occaecat cupidatat"
          />
        </CardInnerSection>
        <CardInnerSection>
          <ReadOnlyField label="Veterinarian" value="Elliot Reid" />
          <ReadOnlyField label="Department" value="Sunt culpa - Qui officia" />
        </CardInnerSection>
      </DividedStack>
      <template #footer>
        <nord-button size="s">Open consultation</nord-button>
      </template>
    </BasePopout>

    <BaseButton aria-controls="pin-go-to-page" aria-haspopup="true">
      Pin + Go to page
    </BaseButton>
    <BasePopout id="pin-go-to-page" expand>
      <template #header>
        <div class="n-stack n-stack-horizontal n-gap-s">
          <nord-avatar>JD</nord-avatar>
          <h2 class="n-font-size-m n-font-weight-active">John Dorian (2468)</h2>
        </div>
      </template>
      <DividedStack>
        <CardInnerSection>
          <ReadOnlyField label="Reason type" value="Lorem ipsum" />
          <ReadOnlyField
            label="Reason"
            value="Excepteur sint occaecat cupidatat"
          />
        </CardInnerSection>
        <CardInnerSection>
          <ReadOnlyField label="Tags" value="English only" display-as="tags" />
          <ReadOnlyField
            label="General remarks"
            value="Lorem ipsum dolor sit amet."
          />
        </CardInnerSection>
      </DividedStack>
      <template #footer>
        <nord-button size="s">Pin to side</nord-button>
        <nord-button size="s">Open client page</nord-button>
      </template>
    </BasePopout>
  </div>
</template>

<template>
  <div>
    <BaseButton aria-controls="popout" aria-haspopup="true">
      Toggle popout
    </BaseButton>

    <BasePopout id="popout" heading="The heading">
      Popout with heading and content
    </BasePopout>
  </div>
</template>

<template>
  <div>
    <BaseButton aria-controls="popout" aria-haspopup="true">
      Toggle popout
    </BaseButton>

    <BasePopout id="popout">
      <template #header>The header</template>

      <template #header-end>
        <nord-button size="s" square>
          <nord-icon name="interface-edit"></nord-icon>
        </nord-button>
        <nord-button size="s" square>
          <nord-icon name="interface-delete"></nord-icon>
        </nord-button>
      </template>

      This text is intentionally long so we can see how it wraps and the popout
      doesn't grow larger than the <b>max-inline-size</b> value.

      <template #footer>
        <BaseButton size="s">Close</BaseButton>
      </template>
    </BasePopout>
  </div>
</template>