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

* 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>
Kong · Jun 3, 2024 · 5887f8e · 5887f8e
1 parent 919882f
commit 5887f8e
Show file tree

Hide file tree

Showing 15 changed files with 1,610 additions and 2,526 deletions.
diff --git a/docs/components/catalog.md b/docs/components/catalog.md
@@ -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
 
@@ -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.
 
@@ -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
 
@@ -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'