Entity Select

Source

<script setup lang="ts">
  // @ts-nocheck -- demo SFC; the library component's dist types are incomplete for these props
import { ref } from "vue";
import MtEntitySelect from "@shopware-ag/meteor-component-library/MtEntitySelect";

// A small mock entity repository stands in for an Admin SDK repository.
// In an application you pass a real `entity` and the component resolves the
// repository through the Admin SDK, so this `repository` prop is not needed.
const manufacturers = Array.from(Array(150).keys()).map((i) => ({
  id: `manufacturer-${i}`,
  name: `Manufacturer ${i}`,
}));

const mockRepository = () => ({
  search: (criteria: any) => {
    const term = criteria.term?.toLowerCase();
    const filtered = term
      ? manufacturers.filter((m) => m.name.toLowerCase().includes(term))
      : manufacturers;

    const start = (criteria.page - 1) * criteria.limit;
    const paginated = filtered.slice(start, start + criteria.limit);
    const result = Object.assign([...paginated], { total: filtered.length });

    return new Promise((resolve) => setTimeout(() => resolve(result), 300));
  },
  get: (id: string) => Promise.resolve(manufacturers.find((m) => m.id === id)),
});

const selected = ref<string | null>(null);
</script>

<template>
  <mt-entity-select
    v-model="selected"
    entity="product_manufacturer"
    :repository="mockRepository"
    label="Manufacturers"
    label-property="name"
    value-property="id"
  />
</template>

Usage

Entity Select is a repository-backed select that loads its options from an Admin SDK entity repository. Use it when options should come from a repository and you want built-in search and pagination for the results, or when an existing modelValue should be hydrated to a visible selected label.

import { MtEntitySelect } from "@shopware-ag/meteor-component-library";

Examples

With initial value

<script setup lang="ts">
  // @ts-nocheck -- demo SFC; the library component's dist types are incomplete for these props
import { ref } from "vue";
import MtEntitySelect from "@shopware-ag/meteor-component-library/MtEntitySelect";

// A small mock entity repository stands in for an Admin SDK repository.
// In an application you pass a real `entity` and the component resolves the
// repository through the Admin SDK, so this `repository` prop is not needed.
const manufacturers = Array.from(Array(150).keys()).map((i) => ({
  id: `manufacturer-${i}`,
  name: `Manufacturer ${i}`,
}));

const mockRepository = () => ({
  search: (criteria: any) => {
    const term = criteria.term?.toLowerCase();
    const filtered = term
      ? manufacturers.filter((m) => m.name.toLowerCase().includes(term))
      : manufacturers;

    const start = (criteria.page - 1) * criteria.limit;
    const paginated = filtered.slice(start, start + criteria.limit);
    const result = Object.assign([...paginated], { total: filtered.length });

    return new Promise((resolve) => setTimeout(() => resolve(result), 300));
  },
  get: (id: string) => Promise.resolve(manufacturers.find((m) => m.id === id)),
});

// The existing value is hydrated to its visible label on mount.
const selected = ref("manufacturer-5");
</script>

<template>
  <mt-entity-select
    v-model="selected"
    entity="product_manufacturer"
    :repository="mockRepository"
    label="Manufacturers"
    label-property="name"
    value-property="id"
  />
</template>

Multi-selection

<script setup lang="ts">
// @ts-nocheck -- demo SFC; the library component's dist types are incomplete for these props
import { ref } from "vue";
import MtEntitySelect from "@shopware-ag/meteor-component-library/MtEntitySelect";

// A small mock entity repository stands in for an Admin SDK repository.
// In an application you pass a real `entity` and the component resolves the
// repository through the Admin SDK, so this `repository` prop is not needed.
const manufacturers = Array.from(Array(150).keys()).map((i) => ({
  id: `manufacturer-${i}`,
  name: `Manufacturer ${i}`,
}));

const mockRepository = () => ({
  search: (criteria: any) => {
    const term = criteria.term?.toLowerCase();
    const filtered = term
      ? manufacturers.filter((m) => m.name.toLowerCase().includes(term))
      : manufacturers;

    const start = (criteria.page - 1) * criteria.limit;
    const paginated = filtered.slice(start, start + criteria.limit);
    const result = Object.assign([...paginated], { total: filtered.length });

    return new Promise((resolve) => setTimeout(() => resolve(result), 300));
  },
  get: (id: string) => Promise.resolve(manufacturers.find((m) => m.id === id)),
});

// Multi-selection binds an array of values and renders the chosen entities as
// removable chips.
const selected = ref<string[]>([]);
</script>

<template>
  <mt-entity-select
    v-model="selected"
    entity="product_manufacturer"
    :repository="mockRepository"
    enable-multi-selection
    label="Manufacturers"
    label-property="name"
    value-property="id"
  />
</template>

Disabled

<script setup lang="ts">
// @ts-nocheck -- demo SFC; the library component's dist types are incomplete for these props
import { ref } from "vue";
import MtEntitySelect from "@shopware-ag/meteor-component-library/MtEntitySelect";

// A small mock entity repository stands in for an Admin SDK repository.
// In an application you pass a real `entity` and the component resolves the
// repository through the Admin SDK, so this `repository` prop is not needed.
const manufacturers = Array.from(Array(150).keys()).map((i) => ({
  id: `manufacturer-${i}`,
  name: `Manufacturer ${i}`,
}));

const mockRepository = () => ({
  search: (criteria: any) => {
    const term = criteria.term?.toLowerCase();
    const filtered = term
      ? manufacturers.filter((m) => m.name.toLowerCase().includes(term))
      : manufacturers;

    const start = (criteria.page - 1) * criteria.limit;
    const paginated = filtered.slice(start, start + criteria.limit);
    const result = Object.assign([...paginated], { total: filtered.length });

    return new Promise((resolve) => setTimeout(() => resolve(result), 300));
  },
  get: (id: string) => Promise.resolve(manufacturers.find((m) => m.id === id)),
});

// A disabled select still hydrates and shows its current value but cannot be
// changed.
const selected = ref("manufacturer-5");
</script>

<template>
  <mt-entity-select
    v-model="selected"
    entity="product_manufacturer"
    :repository="mockRepository"
    disabled
    label="Manufacturers"
    label-property="name"
    value-property="id"
  />
</template>

API reference

Props

Prop	Type	Default
`entity` *	`keyof EntitySchema.Entities`
`repository`	(<EntityName extends keyof EntitySchema.Entities>(entityName: EntityName) => { search: (criteria: default, context?: ApiContext \| undefined) => Promise<default<EntityName> \| null>; get: (id: string, context?: ApiContext \| undefined, criteria?: default \| undefined) => Promise<Entity<EntityName> \| null>; save: (entity: Entity<EntityName>, context?: ApiContext \| undefined) => Promise<void \| null>; clone: (entityId: string, contextOrBehavior?: any, behaviorOrContext?: any) => Promise<unknown>; hasChanges: (entity: Entity<EntityName>) => Promise<boolean \| null>; saveAll: (entities: default<EntityName>, context?: ApiContext \| undefined) => Promise<unknown>; delete: (entityId: string, context?: ApiContext \| undefined) => Promise<void \| null>; create: (context?: ApiContext \| undefined, entityId?: string \| undefined) => Promise<Entity<EntityName> \| null>; }) \| undefined	`undefined`
`model-value`	`any`	`null`
`label-property`	`string \| string[]`	`"name"`
`value-property`	`string`	`"id"`
`disabled`	`boolean`	`false`
`enable-multi-selection`	`boolean`	`false`

Events

Event	Payload
`update:modelValue`	`[value: any]`

Best practices

Pass entity for the default repository lookup.
Use repository only when you need custom fetching behavior.
Keep labelProperty and valueProperty aligned with the entity shape you want to show and store.

Don't

Do not use it when options are already available locally.
Do not duplicate search or pagination in the parent component.
Do not assume modelValue stores the whole entity by default.

Behavior

The first page loads on mount.
Search is handled through repository term lookups.
modelValue stores the selected valueProperty, which defaults to id.

Accessibility

Use a clear visible field label so users understand what entity they are selecting.
Keep result labels distinct so search results stay easy to understand.

Select: when options come from local or externally managed lists.

Edit this pageorReport an issue

Entity Data Table

A repository-backed Data Table that owns loading and table state for Admin SDK entity data.

Floating UI

A low-level primitive for building custom popover-style surfaces that anchor to a trigger, reposition automatically, and close on outside click.