Kongponents Component Library

Kongponents is a Vue-powered component library designed to provide powerful, lightweight, and reusable UI components. While developed for Kong, the library is designed to be usable by all developers.

Key features include:

• Vue 3 and TypeScript: Built with Vue 3 and TypeScript for improved autocompletion and Devtools support.
• Themeable: Many components support customization via CSS variables, enabling both global styling and scoped overrides.
• Open Source: The project is open-source and welcomes community contributions.

KInput is a wrapper around general text inputs that provides contextual styling and states such as error, focus, and disabled. It supports standard HTML input types like text, password, number, email, search, etc., via attribute binding.

<KInput placeholder="Placeholder text" />

KFileUpload is a Vue component that wraps an <input type="file"> element. It supports both a standard input appearance and a dropzone appearance, both of which support drag-and-drop functionality.

<KFileUpload
  label="Upload File"
  :accept="['.jpg', '.png']"
/>

The KDropdown component provides a button (or custom slotted content) that triggers a fly-out menu popover. By default, the trigger is a KButton using the trigger-text prop, but you can provide custom UI via the default slot.

<KDropdown trigger-text="Documentation" :items="items" />

The KDateTimePicker component is a widget used to select dates, times, or ranges of time, displayed within a popover. It supports various modes ranging from simple date selection to complex relative time frames.

<KDateTimePicker v-model="currentValue" mode="dateTime" />

KTreeList is a Vue component used to create hierarchical, drag-and-drop reorderable lists. It supports nested items, collapsing/expanding nodes, and custom item rendering via slots.

<KTreeList :items="items" />

KCard is a styled container component used to organize related content and actions. It can be used as a simple wrapper for content or as a structured container with a title, action elements, and a footer.

<KCard>
  <template #title>
    Card Title
  </template>
  <template #actions>
    <KButton appearance="tertiary" icon size="small">
      <MoreIcon />
    </KButton>
  </template>
  Card body content goes here.
  <template #footer>
    <KBadge appearance="success">Published</KBadge>
  </template>
</KCard>

KCatalog is a component that renders a grid view of KCard components. It is designed to work with a fetcher function to handle data retrieval and server-side pagination automatically.

<KCatalog :fetcher="fetcher" />

KTextArea is a wrapper around the standard HTML <textarea> element. It provides contextual styling and states such as error, focus, and required indicators. It supports two-way data binding via v-model and allows for custom labeling and help text.

<KTextArea />

KPrompt is a pop-up window component used to temporarily interrupt user interaction, typically to require explicit confirmation before proceeding with a sensitive action. It is built on top of KModal.

When to use KModal instead of KPrompt:

• When you need to display information without requiring user input/interaction.
• When you need to customize the appearance of elements (e.g., hiding the title or providing custom footer content).
• When you require a custom modal layout that differs from the default (header, content, footer) structure.

When defining types for Vue component props, follow these guidelines to improve type safety and developer experience:

• Use String Literal Types instead of String: For props with a fixed set of allowed values (e.g., a mode prop), define them as specific literals (e.g., light | dark | none) rather than the generic String type.
• Avoid Object types: Do not use the generic Object type for props. Instead, define a specific interface that describes the object's structure.

The neighbors prop determines how many neighboring pages are visible to the left and right of the center page when ellipsis are present. The default is 1.

Note on Overflow: If KPagination detects horizontal overflow within its parent container, it will automatically reduce the number of displayed neighbors to fit the container, ensuring it never overflows. It will always display at least 1 neighbor, even if the neighbors prop is set to a higher value.

<KPagination :neighbors="2" :total-count="1000" />