@kong-ui-public/entities-plugins
v9.257.0
Published
Plugin entity components.
Readme
@kong-ui-public/entities-plugins
Plugin entity components.
Requirements
vueandvue-routermust be initialized in the host application@kong/kongponentsmust be added as a dependency in the host application, globally available via the Vue Plugin installation, and the package's style imports must be added in the app entry file. See here for instructions on installing Kongponents.@kong-ui-public/i18nmust be available as adependencyin the host application.axiosmust be installed as a dependency in the host application
[!CAUTION] A string of 'undefined' is disallowed in Plugin icon names
Included components
PluginList
Reference the individual component docs for more info.
Usage
Install
Install the component in your host application
yarn add @kong-ui-public/entities-pluginsRegistration
Import the component(s) in your host application as well as the package styles
import { PluginList, PluginSelect, PluginForm, PluginConfigCard } from '@kong-ui-public/entities-plugins'
import '@kong-ui-public/entities-plugins/dist/style.css'Color mode (light/dark theme)
Components in this package that embed a Monaco-based editor (for example the plugin free-form code editors) automatically match the host application's active color mode. To enable this, the host application should provide a ComputedRef<'light' | 'dark'> under the app:konnectColorMode injection key. When provided, the editors reactively switch between their light and dark themes as the value changes. When the key is not provided, the editors fall back to the 'light' theme.
// In the host application (e.g. within your root component's setup)
import { computed, provide } from 'vue'
// `isDarkMode` is however your app tracks its current theme
const colorMode = computed<'light' | 'dark'>(() => (isDarkMode.value ? 'dark' : 'light'))
provide('app:konnectColorMode', colorMode)