Resource Picker ​

A window overlaid on either the primary window or another dialog window, rendering a list of products/variants/collections to choose from.

When to Use

• To provide an interface for bulk selection of items for actions such as adding to a cart or creating a collection.

Usage ​

import { ResourcePicker } from '@youcan/alto';
import type { Resource } from '@youcan/alto/types';
import { ref } from 'vue';

const MOCK_RESOURCES: Resource[] = [...];

const showPicker = ref(false);
const selectedResources = ref<Resource[]>([]);

const onConfirm = (resources: Resource[]) => {...};

<ResourcePicker
    v-model:visible="showPicker"
    :resources="MOCK_RESOURCES"
    stock-label="in stock"
    :is-loading="false"
    @confirm="onConfirm"
/>

API Reference ​

Examples ​

Loading ​

Empty ​