Skip to content

Commit

Permalink
feat(ktable): component reskin [KHCP-9002] (#2151)
Browse files Browse the repository at this point in the history 
* fix(deps): update dependency @kong/icons to ^1.9.0 (#2144)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(release): 9.0.0-alpha.145 [skip ci]

* **deps:** update dependency @kong/icons to ^1.9.0 ([#2144](#2144)) ([52f3c2d](52f3c2d))

* chore(deps): update dependency @kong-ui-public/sandbox-layout to ^2.0.50 (#2145)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* feat(kcodeblock, kcatalog, kcollapse, kstepper): components reskin (#2124)

* feat(kcodeblock): component reskin [KHCP-8975] (#2100)

* feat(kcollapse): component reskin [KHCP-8976] (#2125)

* feat(kcollapse): reskin component - wip [KHCP-8976]

* feat(kcollapse): component reskin [KHCP-8976]

* test(kcollapse): update compoent tests [KHCP-8976]

* fix(kcollapse): misc fixes [KHCP-8976]

* docs(collapse): update component docs [KHCP-8976]

* chore(sandbox): minor fix [KHCP-8976]

* docs(collapse): misc fix [KHCP-8976]

* fix(kcollapse): apply feedback

Co-authored-by: Adam DeHaven <2229946+adamdehaven@users.noreply.github.com>

* fix(kcollapse): address feedback [KHCP-8976]

---------

Co-authored-by: Adam DeHaven <2229946+adamdehaven@users.noreply.github.com>

* feat(kcatalog): reskin component [KHCP-8972] (#2116)

* fix(kcatalog): update props, slots, events [KHCP-8972]

* feat(kcatalog): reskin component [KHCP-8972]

* feat(kcatalogitem): reskin component [KHCP-8972]

* test(kcatalog): update component tests [KHCP-8972]

* docs(catalog): update component docs [KHCP-8972]

* docs(catalog): minor fix [KHCP-8972]

* test(kemptystate): fix flaky test [KHCP-8972]

* test(kalert): fix flaky test [KHCP-8972]

* fix(kcatalog): grid gap [KHCP-8972]

* fix(kcatalog): apply feedback

Co-authored-by: Adam DeHaven <2229946+adamdehaven@users.noreply.github.com>

* fix(kcatalog): address feedback [KHCP-8972]

* fix(*): remove letter spacing [KHCP-8972]

---------

Co-authored-by: Adam DeHaven <2229946+adamdehaven@users.noreply.github.com>

* feat(kstepper): component reskin [KHCP-9001] (#2132)

* fix(kmultiselect): minor fix [KHCP-9001]

* feat(kstepper): reskin component [KHCP-9001]

* fix(kstepper): remove stepper icons [KHCP-9001]

* test(kstepper): update component tests [KHCP-9001]

* fix(kstepper): minor fix [KHCP-9001]

* docs(stepper): update component docs [KHCP-9001]

* fix(kstepper): add aria-current [KHCP-9001]

* fix(kstep): icon titles [KHCP-9001]

* docs: minor fix

* fix(kcodeblock): icon button not to inherit attrs (#2140)

* fix(kcatalogitem): fix overflow

* fix(*): add title or decorative prop to icons (#2143)

* fix(*): add title or decorative prop to icons

* fix(*): minor fix

* fix(kcopy): minor fix

* fix(kcopy): minor fix

* fix(*): address pr feedback

* fix(ktable): minor fix

---------

Co-authored-by: Adam DeHaven <2229946+adamdehaven@users.noreply.github.com>

* chore(release): 9.0.0-alpha.146 [skip ci]

* **kcodeblock, kcatalog, kcollapse, kstepper:** components reskin ([#2124](#2124)) ([4c97890](4c97890)), closes [#2100](#2100) [#2125](#2125)

* chore(deps): update dependency @kong-ui-public/sandbox-layout to ^2.0.51 (#2146)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* feat(ktable): reskin props [KHCP-9002]

* fix(ktable): rename events [KHCP-9002]

* fix(ktable): fix sortable prop conditions [KHCP-9002]

* test(ktable): fix component tests [KHCP-9002]

* feat(ktable): reskin selectors [KHCP-9002]

* feat(ktable): reskin component [KHCP-9002]

* fix(ktable): misc fixes & updates [KHCP-9002]

* docs(ktable): update component docs [KHCP-9002]

* docs(tabs): disabled tab tooltip example [KHCP-9002]

* revert(kexternallink): revert changes [KHCP-9002]

* feat(ktable): add column header tooltip [KHCP-9002]

* test(ktable): add column header tooltip test [KHCP-9002]

* docs(ktable, kcatalog): pagination section [KHCP-9002]

* docs(ktable): add examples [KHCP-9002]

* chore: fix package.json [KHCP-9002]

* fix(ktable): apply pr feedback

Co-authored-by: Kai Arrowood <kai.arrowood@konghq.com>

* fix(ktable): address pr feedback [KHCP-9002]

* fix(ktable): minor type fix [KHCP-9002]

* fix(ktable): minor fix [KHCP-9002]

* fix(utilities): remove client side sorter function [KHCP-9002]

* chore(sandbox): minor tweak [KHCP-9002]

* fix(utilities): add client side sorter function back [KHCP-9002]

* fix(ktable): add default sorter function back [KHCP-9002]

* docs(table): minor updates [KHCP-9002]

* docs(table): tweak wording [KHCP-9002]

* docs(table): apply pr feedback

Co-authored-by: Kai Arrowood <kai.arrowood@konghq.com>

* fix(kskeleton): adjust table row height [KHCP-9002]

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: semantic-release-bot <semantic-release-bot@martynus.net>
Co-authored-by: Adam DeHaven <2229946+adamdehaven@users.noreply.github.com>
Co-authored-by: Kai Arrowood <kai.arrowood@konghq.com>
  • Loading branch information
@portikM @renovate
@semantic-release-bot @adamdehaven @kaiarrowood
5 people authored May 9, 2024
1 parent 0e521f5 commit 4e60986
Show file tree
Hide file tree
Showing 15 changed files with 1,610 additions and 2,526 deletions.
171 changes: 79 additions & 92 deletions docs/components/catalog.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -175,105 +175,22 @@ const itemDeleted = () => {

Pass in a string of search input for server-side table filtering.

### paginationTotalItems
## Pagination

Pass the total number of items in the set to populate the pagination text. See [KPagination component docs](/components/pagination) for more details.
KCatalog uses KPagination component under the hood and exposes a few props as a way to modify how pagination looks and behaves in card catalogs. See [KPagination](/components/pagination.html#props) docs for more details and examples:

If not provided the fetcher response should return a top-level property `total` or return a `data` property that is an array.

### paginationNeighbors

Pass in a number of pagination neighbors to be used by the pagination component. See more detail in the [KPagination component docs](/components/pagination.html#neighbors).

### paginationPageSizes

Pass in an array of page sizes for the page size dropdown. If not provided will default to the following:

```ts
[15, 30, 50, 75, 100]
```

### disablePaginationPageJump

Set this to `true` to limit pagination navigation to `previous` / `next` page only.

<KCatalog :fetcher="fetcher" :disablePaginationPageJump="true" :paginationPageSizes="[4, 5, 6]" :initial-fetcher-params="{ pageSize: 4, page: 1 }" />

```html
<KCatalog :disable-pagination-page-jump="true" :fetcher="fetcher" />
```
* `paginationTotalItems`
* `paginationNeighbors`
* `paginationPageSizes`
* `disablePaginationPageJump`

### disablePagination

Set this to `true` to remove the pagination bar when using a fetcher.
Set this to `true` to hide pagination when using a fetcher.

### hidePaginationWhenOptional

Set this to `true` to hide the pagination UI when the table record count is less than or equal to the `pageSize`.

## KCatalogItem

KCatalog generates a KCatalogItem for each item in the `items` property. At the most basic level, KCatalogItem is a wrapper around KCard to display correctly inside KCatalog. You can use the `body` slot of the KCatalog to manually create your own catalog items.

### Props

#### item

Object instance of `CatalogItem` from which card content is built.

#### truncate

A boolean (default to `true`), whether or not to truncate the description text.

```html
<KCatalogItem :item="item" :truncate="false" class="catalog-item" />
```

### Slots

#### card-title

The title content for the card.

#### card-body

The body content for the card.

#### card-footer

The footer content for the card.

<KCatalogItem>
<template #card-title>
Card Title
</template>
<template #card-body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec justo libero. Nullam accumsan quis ipsum vitae tempus. Integer non pharetra orci. Suspendisse potenti.
</template>
<template #card-footer>
<KBadge appearance="neutral">Card footer</KBadge>
</template>
</KCatalogItem>

```html
<KCatalogItem>
<template #card-title>
Card Title
</template>
<template #card-body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec justo libero. Nullam accumsan quis ipsum vitae tempus. Integer non pharetra orci. Suspendisse potenti.
</template>
<template #card-footer>
<KBadge appearance="neutral">Card footer</KBadge>
</template>
</KCatalogItem>
```

### Events

#### click

Fired when item is clicked. Event payload is item object.
Set this to `true` to hide pagination when the table record count is less than or equal to the `pageSize`.

## States

Expand All @@ -293,7 +210,9 @@ Set the following props to handle empty state:
- `emptyStateActionMessage` - Button text for empty state action
- `emptyStateActionRoute` - Route for empty state action

:::tip
Should you want to display an icon inside of action button, you can use `empty-state-action-icon` slot.
:::

When empty state action button is clicked, KCatalog emits the `empty-state-action-click` event.

Expand Down Expand Up @@ -480,9 +399,13 @@ The `toolbar` slot allows you to slot catalog controls rendered at the top of th

Slot content to be displayed when empty.

### empty-state-action-icon

Slot for icon to be displayed in front of action button text in empty state. See [empty state](#empty) section for example of usage of this slot.

### error-state

Slot content to be displayed when in an error state.
Slot content to be displayed when in error state.

## Events

Expand Down Expand Up @@ -520,6 +443,70 @@ Returns the `state` and `hasData` (boolean) of the catalog, `state` can be one o
- `error` - when the catalog fetch failed
- `success` - when the catalog fetch completed successfully

## KCatalogItem

KCatalog generates a KCatalogItem for each item in the `items` property. At the most basic level, KCatalogItem is a wrapper around KCard to display correctly inside KCatalog. You can use the `body` slot of the KCatalog to manually create your own catalog items.

### Props

#### item

Object instance of `CatalogItem` from which card content is built.

#### truncate

A boolean (default to `true`), whether or not to truncate the description text.

```html
<KCatalogItem :item="item" :truncate="false" class="catalog-item" />
```

### Slots

#### card-title

The title content for the card.

#### card-body

The body content for the card.

#### card-footer

The footer content for the card.

<KCatalogItem>
<template #card-title>
Card Title
</template>
<template #card-body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec justo libero. Nullam accumsan quis ipsum vitae tempus. Integer non pharetra orci. Suspendisse potenti.
</template>
<template #card-footer>
<KBadge appearance="neutral">Card footer</KBadge>
</template>
</KCatalogItem>

```html
<KCatalogItem>
<template #card-title>
Card Title
</template>
<template #card-body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec justo libero. Nullam accumsan quis ipsum vitae tempus. Integer non pharetra orci. Suspendisse potenti.
</template>
<template #card-footer>
<KBadge appearance="neutral">Card footer</KBadge>
</template>
</KCatalogItem>
```

### Events

#### click

Fired when item is clicked. Event payload is item object.

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { AddIcon, MoreIcon } from '@kong/icons'
Expand Down
Loading

0 comments on commit 4e60986

Please sign in to comment.