Base Selection PopoutCommunity Asset

<script setup lang="ts">
import type { Option } from '@/components/BaseSelectionPopout.vue'

const selectedOptions = ref<Record<string, Option | null>>({
  default: null,
  primary: null,
  danger: null,
  dashed: null,
  plain: null,
})

const searchModels = ref<Record<string, string>>({
  default: '',
  primary: '',
  danger: '',
  dashed: '',
  plain: '',
})

const basicOptions: Option[] = [
  { value: '1', label: 'Apple' },
  { value: '2', label: 'Banana' },
  { value: '3', label: 'Cherry' },
  { value: '4', label: 'Date' },
  { value: '5', label: 'Elderberry' },
  { value: '6', label: 'Fig' },
  { value: '7', label: 'Grape' },
  { value: '8', label: 'Honeydew' },
  { value: '9', label: 'Kiwi' },
  { value: '10', label: 'Lemon' },
]
</script>

<template>
  <div class="n-stack">
    <h3>Default Variant</h3>
    <BaseSelectionPopout
      v-model="searchModels.default"
      label="Add Item (Default)"
      :options="basicOptions"
      parent-id="variant-default-example"
      variant="default"
      is-searchable
      @select="selectedOptions.default = $event"
    />
    <div
      v-if="selectedOptions.default"
      class="n-color-text-weaker n-font-size-s"
    >
      Selected: {{ selectedOptions.default.label }}
    </div>

    <h3>Primary Variant</h3>
    <BaseSelectionPopout
      v-model="searchModels.primary"
      label="Add Item (Primary)"
      :options="basicOptions"
      parent-id="variant-primary-example"
      variant="primary"
      is-searchable
      @select="selectedOptions.primary = $event"
    />
    <div
      v-if="selectedOptions.primary"
      class="n-color-text-weaker n-font-size-s"
    >
      Selected: {{ selectedOptions.primary.label }}
    </div>

    <h3>Danger Variant</h3>
    <BaseSelectionPopout
      v-model="searchModels.danger"
      label="Add Item (Danger)"
      :options="basicOptions"
      parent-id="variant-danger-example"
      variant="danger"
      is-searchable
      @select="selectedOptions.danger = $event"
    />
    <div
      v-if="selectedOptions.danger"
      class="n-color-text-weaker n-font-size-s"
    >
      Selected: {{ selectedOptions.danger.label }}
    </div>

    <h3>Dashed Variant</h3>
    <BaseSelectionPopout
      v-model="searchModels.dashed"
      label="Add Item (Dashed)"
      :options="basicOptions"
      parent-id="variant-dashed-example"
      variant="dashed"
      is-searchable
      @select="selectedOptions.dashed = $event"
    />
    <div
      v-if="selectedOptions.dashed"
      class="n-color-text-weaker n-font-size-s"
    >
      Selected: {{ selectedOptions.dashed.label }}
    </div>

    <h3>Plain Variant</h3>
    <BaseSelectionPopout
      v-model="searchModels.plain"
      label="Add Item (Plain)"
      :options="basicOptions"
      parent-id="variant-plain-example"
      variant="plain"
      is-searchable
      @select="selectedOptions.plain = $event"
    />
    <div v-if="selectedOptions.plain" class="n-color-text-weaker n-font-size-s">
      Selected: {{ selectedOptions.plain.label }}
    </div>
  </div>
</template>

<script setup lang="ts">
import type { Option } from '@/components/BaseSelectionPopout.vue'

const selectedOption = ref<Option | null>(null)
const searchModel = ref('')

const optionsWithExtraData: Option[] = [
  {
    value: 'dog-1',
    label: 'German Shepherd',
    extraData: {
      breed: 'German Shepherd',
      code: 'GSD001',
      type: 'Large',
      origin: 'Germany',
    },
  },
  {
    value: 'dog-2',
    label: 'Golden Retriever',
    extraData: {
      breed: 'Golden Retriever',
      code: 'GRT002',
      type: 'Large',
      origin: 'Scotland',
    },
  },
  {
    value: 'dog-3',
    label: 'French Bulldog',
    extraData: {
      breed: 'French Bulldog',
      code: 'FBD003',
      type: 'Small',
      origin: 'France',
    },
  },
  {
    value: 'dog-4',
    label: 'Labrador Retriever',
    extraData: {
      breed: 'Labrador Retriever',
      code: 'LAB004',
      type: 'Large',
      origin: 'Canada',
    },
  },
  {
    value: 'dog-5',
    label: 'Beagle',
    extraData: {
      breed: 'Beagle',
      code: 'BGL005',
      type: 'Medium',
      origin: 'England',
    },
  },
]

const handleSelect = (option: Option) => {
  selectedOption.value = option
}
</script>

<template>
  <div>
    <div class="n-padding-b-m">
      <BaseSelectionPopout
        v-model="searchModel"
        label="Add Dog Breed"
        :options="optionsWithExtraData"
        parent-id="search-keys-example"
        is-searchable
        :search-keys="['code', 'type']"
        @select="handleSelect"
      >
        <template #default="{ option, highlightProps }">
          <div class="n-stack n-stack-horizontal n-justify-between">
            <span v-text-highlight="highlightProps" class="option-label">
              {{ option.label }}
            </span>
            <span
              v-if="option.extraData?.code"
              v-text-highlight="highlightProps"
              class="n-color-text-weaker"
            >
              {{ option.extraData.code }}
            </span>
          </div>
          <div class="n-color-text-weaker n-font-size-s">
            <span v-text-highlight="highlightProps">
              {{ option.extraData?.type }}
            </span>
          </div>
        </template>
      </BaseSelectionPopout>
    </div>

    <div v-if="selectedOption" class="n-padding-bs-m">
      <nord-card>
        <h3>Selected Option:</h3>
        <p><strong>Value:</strong> {{ selectedOption.value }}</p>
        <p><strong>Label:</strong> {{ selectedOption.label }}</p>
        <div v-if="selectedOption.extraData">
          <h4>Extra Data:</h4>
          <ul>
            <li v-for="(value, key) in selectedOption.extraData" :key>
              <strong>{{ key }}:</strong> {{ value }}
            </li>
          </ul>
        </div>
      </nord-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { Option } from '@/components/BaseSelectionPopout.vue'

const selectedOption = ref<Option | null>(null)

const basicOptions: Option[] = [
  { value: '1', label: 'Option 1' },
  { value: '2', label: 'Option 2' },
  { value: '3', label: 'Option 3' },
  { value: '4', label: 'Option 4' },
  { value: '5', label: 'Option 5' },
]

const handleSelect = (option: Option) => {
  selectedOption.value = option
}
</script>

<template>
  <div>
    <div class="n-padding-b-m">
      <BaseSelectionPopout
        label="Add Item"
        :options="basicOptions"
        parent-id="basic-example"
        @select="handleSelect"
      />
    </div>

    <div v-if="selectedOption" class="n-padding-t-m">
      <nord-card>
        <h3>Selected Option:</h3>
        <p><strong>Value:</strong> {{ selectedOption.value }}</p>
        <p><strong>Label:</strong> {{ selectedOption.label }}</p>
      </nord-card>
    </div>
  </div>
</template>