-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(expressions,entities-roues): add router playground [KM-299]
- Loading branch information
Showing
35 changed files
with
3,779 additions
and
1,662 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,86 @@ | ||
| # RouterPlaygroundModal | ||
|
|
||
| The `RouterPlaygroundModal` component is a modal that allows the user to edit a route expression and see the result of the expression evaluation. | ||
|
|
||
| - [Requirements](#requirements) | ||
| - [Usage](#usage) | ||
| - [Install](#install) | ||
| - [Props](#props) | ||
| - [Events](#events) | ||
| - [Usage example](#usage-example) | ||
| - [TypeScript definitions](#typescript-definitions) | ||
|
|
||
| ## Requirements | ||
|
|
||
| [See requirements for the `@kong-ui-public/expressions` package.](../README.md#requirements) | ||
|
|
||
| ## Usage | ||
|
|
||
| ### Install | ||
|
|
||
| [See instructions for installing the `@kong-ui-public/expressions` package.](../README.md#install) | ||
|
|
||
| ### Props | ||
|
|
||
| #### `isVisible` | ||
|
|
||
| - type: `boolean` | ||
| - required: `true` | ||
|
|
||
| Controls whether the modal is visible or not. | ||
|
|
||
| #### `localstorageKey` | ||
|
|
||
| - type: `String` | ||
| - required: `false` | ||
| - default: `kong-manager-router-playground-requests` | ||
|
|
||
| The key to use for storing the playground requests in the local storage. | ||
|
|
||
| #### `hideEditorActions` | ||
|
|
||
| - type: `boolean` | ||
| - required: `false` | ||
| - default: `false` | ||
|
|
||
| Controls whether the editor actions should be hidden or not. | ||
|
|
||
| #### `initialExpression` | ||
|
|
||
| - type: `string` | ||
| - required: `false` | ||
| - default: `''` | ||
|
|
||
| The initial expression to be displayed in the editor. | ||
|
|
||
| ### Events | ||
|
|
||
| #### change | ||
|
|
||
| A `change` event is emitted when the expression has been updated. | ||
|
|
||
| #### commit | ||
|
|
||
| A `commit` event is emitted when the expression has been committed. | ||
|
|
||
| #### cancel | ||
|
|
||
| A `cancel` event is emitted when the modal's cancel button has been clicked. | ||
|
|
||
| #### notify | ||
|
|
||
| A `notify` event is emitted when a Toast is triggered. The event payload is an object with the following properties: | ||
| - `message`: | ||
| - type: `string` | ||
| - The message to display in the Toast. | ||
| - `type`: | ||
| - type: `'success' | 'error' | 'warning' | 'info'` | ||
| - The type of Toast to display. | ||
|
|
||
| ### Usage example | ||
|
|
||
| Please refer to the [sandbox](../sandbox/App.vue). | ||
|
|
||
| ## TypeScript definitions | ||
|
|
||
| TypeScript definitions are bundled with the package and can be directly imported into your host application. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,9 @@ | ||
| import '@kong/kongponents/dist/style.css' | ||
| import { createApp } from 'vue' | ||
| import App from './App.vue' | ||
| import Kongponents from '@kong/kongponents' | ||
|
|
||
| const app = createApp(App) | ||
|
|
||
| app.use(Kongponents) | ||
| app.mount('#app') |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,83 @@ | ||
| <template> | ||
| <div ref="editorRoot" /> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import { ref, watch, onMounted, onBeforeUnmount, defineEmits, defineProps } from 'vue' | ||
| import * as monaco from 'monaco-editor' | ||
| const props = defineProps({ | ||
| modelValue: { | ||
| type: String, | ||
| required: true, | ||
| }, | ||
| theme: { | ||
| type: String, | ||
| default: 'vs', | ||
| }, | ||
| language: { | ||
| type: String, | ||
| default: 'html', | ||
| }, | ||
| options: { | ||
| type: Object, | ||
| default: () => ({}), | ||
| }, | ||
| }) | ||
| const emits = defineEmits<{ | ||
| (e: 'update:modelValue', value: string, event: monaco.editor.IModelContentChangedEvent): void | ||
| }>() | ||
| const editorRoot = ref<HTMLElement | null>(null) | ||
| let editor: monaco.editor.IStandaloneCodeEditor | ||
| watch(() => props.options, (newOptions) => { | ||
| if (editor) { | ||
| editor.updateOptions(newOptions) | ||
| } | ||
| }, { deep: true }) | ||
| watch(() => props.modelValue, (newValue) => { | ||
| if (editor && newValue !== editor.getValue()) { | ||
| editor.setValue(newValue) | ||
| } | ||
| }) | ||
| watch(() => props.language, (newVal) => { | ||
| if (editor) { | ||
| monaco.editor.setModelLanguage(editor.getModel()!, newVal) | ||
| } | ||
| }) | ||
| watch(() => props.theme, (newVal) => { | ||
| if (editor) { | ||
| monaco.editor.setTheme(newVal) | ||
| } | ||
| }) | ||
| onMounted(() => { | ||
| const options = Object.assign( | ||
| { | ||
| value: props.modelValue, | ||
| theme: props.theme, | ||
| language: props.language, | ||
| }, | ||
| props.options, | ||
| ) | ||
| editor = monaco.editor.create(editorRoot.value as HTMLElement, options) | ||
| editor.onDidChangeModelContent((event) => { | ||
| const value = editor!.getValue() | ||
| if (props.modelValue !== value) { | ||
| emits('update:modelValue', value, event) | ||
| } | ||
| }) | ||
| }) | ||
| onBeforeUnmount(() => { | ||
| editor?.dispose() | ||
| }) | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| <template> | ||
| <header | ||
| class="page-header" | ||
| > | ||
| <div class="row"> | ||
| <component | ||
| :is="`h${size}`" | ||
| :class="{ 'title-no-margin': noMargin }" | ||
| > | ||
| <span | ||
| v-if="!hideTitle" | ||
| class="title" | ||
| >{{ title }}</span> | ||
| <slot name="title-logo" /> | ||
| </component> | ||
| <nav class="operations"> | ||
| <slot /> | ||
| </nav> | ||
| </div> | ||
| <slot name="below-title" /> | ||
| </header> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import { defineProps } from 'vue' | ||
| defineProps<{ | ||
| title: string, | ||
| size: number, | ||
| hideTitle?: boolean, | ||
| noMargin?: boolean, | ||
| }>() | ||
| </script> | ||
|
|
||
| <style lang="scss" scoped> | ||
| .page-header h1, h2, h3, h4, h5, h6 { | ||
| color: $kui-color-text; | ||
| font-size: $kui-font-size-70; | ||
| font-weight: $kui-font-weight-bold; | ||
| .title { | ||
| word-break: break-all; | ||
| } | ||
| } | ||
| .row { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| justify-content: space-between; | ||
| margin-left: -$kui-space-60; | ||
| margin-right: -$kui-space-60; | ||
| padding: $kui-space-0 $kui-space-60; | ||
| } | ||
| .col { | ||
| line-height: $kui-line-height-70; | ||
| } | ||
| h1, h2, h3, h4, h5, h6, nav { | ||
| margin-bottom: $kui-space-70; | ||
| margin-top: $kui-space-0; | ||
| } | ||
| .title-no-margin { | ||
| margin: $kui-space-0 !important; | ||
| } | ||
| .operations { | ||
| align-items: center; | ||
| display: inline-flex; | ||
| flex-grow: 0; | ||
| justify-content: flex-end; | ||
| margin-left: $kui-space-auto; | ||
| text-align: right; | ||
| white-space: nowrap; | ||
| } | ||
| </style> |
Oops, something went wrong.