@kong-ui-public/spec-renderer 0.3.2 → 0.4.2

package/README.md

@@ -1,27 +1,29 @@
 # @kong-ui-public/spec-renderer
 
-A Kong UI component for displaying API specs
+A Kong UI component for displaying and filtering API specs
 
 - [Features](#features)
 - [Requirements](#requirements)
 - [Usage](#usage)
   - [Install](#install)
   - [Register](#register)
-- [Props](#props)
-  - [`document`](#document)
-  - [`url`](#url)
-  - [`hasSidebar`](#hassidebar)
-  - [`relativeSidebar`](#relativesidebar)
-  - [`essentialsOnly`](#essentialsonly)
+- [Included Components](#included-components)
+  - [`SpecRenderer`](#specrenderer)
+  - [`SpecOperationsList`](#specoperationslist)
+  - [`SpecDetails`](#specdetails)
 
 ## Features
 
-- Render `.yaml` and `.json` OAS specs
-- Customize display of API specs in the UI
+- Render spec with optional side nav and filtering
 
 ## Requirements
 
 - `vue` must be initialized in the host application
+- `@kong/kongponents` must be available as a `dependency` in the host application, along with the package's style imports. [See here for instructions on installing Kongponents](https://kongponents.konghq.com/#globally-install-all-kongponents). Specifically, the following Kongponents must be available:
+  - `KBadge`
+  - `KCollapse`
+  - `KIcon`
+  - `KInput`
 
 ## Usage
 
@@ -35,71 +37,36 @@ yarn add @kong-ui-public/spec-renderer
 
 ### Register
 
-You can register `portal-spec-renderer` globally or locally.
-
-```typescript
-// Global registration
-import { createApp } from 'vue'
-import SpecRenderer from '@kong-ui-public/spec-renderer'
-import '@kong-ui-public/spec-renderer/dist/style.css'
-
-const app = createApp(App)
-
-app.use(SpecRenderer)
-
-```
+You can register `spec-renderer` locally. In order to support proper tree-shaking in the host application, please only import and register the components in the page/component where they are being utilized.
 
 ```html
 <!-- Local registration -->
 <template>
   <SpecRenderer />
+  <SpecOperationsList />
+  <SpecDetails />
 </template>
 
 <script setup lang="ts">
-import SpecRenderer from '@kong-ui-public/spec-renderer'
+// Only import the components you need
+import { SpecRenderer, SpecOperationsList, SpecDetails } from '@kong-ui-public/spec-renderer'
+// CSS import required for ANY of the components
 import '@kong-ui-public/spec-renderer/dist/style.css'
 </script>
 ```
 
-## Props
-
-### `document`
-
-- type: `String|Object`
-- required: `false`
-- default: `null`
-
-Specification object or string. Required if `url` property is not set.
-
-### `url`
-
-- type: `String`
-- required: `false`
-- default: `''`
-
-URL of the specification file. Required if `document` property is not set.
-
-### `hasSidebar`
-
-- type: `Boolean`
-- required: `false`
-- default: `true`
+## Included Components
 
-Whether or not the SwaggerUI navigation sidebar is enabled.
+The `SpecRenderer` component is a combination of two subcompoents, `SpecOperationsList` and `SpecDetails` which are exported for individual use if desired.
 
-### `relativeSidebar`
+### `SpecRenderer`
 
-- type: `Boolean`
-- required: `false`
-- default: `false`
+See the component [documentation](docs/spec-renderer).
 
-Position the sidebar relatively instead of fixed.
-Both `hasSidebar` and `essentialsOnly` must be `true` for the positioning to be correct since we aren't predicting the height of the info block.
+### `SpecOperationsList`
 
-### `essentialsOnly`
+See the component [documentation](docs/spec-operations-list).
 
-- type: `Boolean`
-- required: `false`
-- default: `false`
+### `SpecDetails`
 
-If enabled, only display the spec `paths` section; general information, schemes, models, actions (Authorize & Try it out), etc. are hidden.
+See the component [documentation](docs/spec-details).