t-catalog

This component handles displaying the results of a catalog. It reads the parent catalog instance and displays the basic elements needed to paginate items.

Note that its API is minimal and does not cover most of catalog options. Therefore it won't be suitable for many use cases. However, it's a good starting point to help you create your own component using the catalog full API.

Read more about catalog to help you create a new instance based on your requirements.

Basic usage

By default, it shows a t-pagination component below the results.

import { TCatalog, TText } from "@dija/tohama-components";
import { createCatalog } from "@dija/tohama-use";
import { defineComponent, onBeforeMount } from "vue";

export default defineComponent({
  setup() {
    const catalog = createCatalog({
      /// catalog instance options
    });

    onBeforeMount(() => catalog.init());

    return () => (
      <TCatalog>
        {catalog.entries.value.map((entry) => (
          <TText>{entry.city}</TText>
        ))}
      </TCatalog>
    );
  },
});

Infinite Mode

You can also specify the mode to infinite in the catalog options. In this mode, it will display two t-icon-button components to load the previous and next entries.

The load previous button will only be displayed if the initial page is not the first.

import { TCatalog, TText } from "@dija/tohama-components";
import { createCatalog } from "@dija/tohama-use";
import { defineComponent, onBeforeMount } from "vue";

export default defineComponent({
  setup() {
    const catalog = createCatalog({
      /// catalog instance options
      mode: "infinite",
      aggregates: {
        page: 2,
      },
    });

    onBeforeMount(() => catalog.init());

    return () => (
      <TCatalog>
        {catalog.entries.value.map((entry) => (
          <TText>{entry.city}</TText>
        ))}
      </TCatalog>
    );
  },
});

Slots

You can also add components in the prepend and append slots. This is only a minimal example.

Cities

Showing 0 of 0 cities.

import { TCatalog, TText, TCard, TFlex } from "@dija/tohama-components";
import { createCatalog } from "@dija/tohama-use";
import { defineComponent, onBeforeMount } from "vue";

export default defineComponent({
  setup() {
    const catalog = createCatalog({
      /// catalog instance options
      aggregates: {
        limit: 4,
      },
    });

    onBeforeMount(() => catalog.init());

    return () => (
      <TCatalog
        prepend={() => <TText>Cities</TText>}
        append={() => (
          <TText>
            Showing {catalog.entries.value.length} of {catalog.total.value} cities.
          </TText>
        )}
      >
        <TCard design="raised" color="surface" py="sm" elevated px>
          {catalog.entries.value.map((entry) => (
            <TFlex justify="between" py="sm">
              <TText>{entry.city}</TText>
              <TText>{entry.country}</TText>
            </TFlex>
          ))}
        </TCard>
      </TCatalog>
    );
  },
});

API

No options available

Components

t-carousel

Components

t-client-only

Table of Contents