-
Notifications
You must be signed in to change notification settings - Fork 11
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(@kong-ui-public/expressions): add router-playground-modal [KM-299]
- Loading branch information
Showing
24 changed files
with
1,798 additions
and
19 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| import { defineConfig } from 'cypress' | ||
|
|
||
| export default defineConfig({ | ||
| component: { | ||
| devServer: { | ||
| framework: 'vue', | ||
| bundler: 'vite', | ||
| }, | ||
| }, | ||
| }) |
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,5 @@ | ||
| { | ||
| "name": "Using fixtures to represent data", | ||
| "email": "hello@cypress.io", | ||
| "body": "Fixtures are a great way to mock data for responses to routes" | ||
| } |
Empty file.
12 changes: 12 additions & 0 deletions
12
packages/core/expressions/cypress/support/component-index.html
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,12 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
| <meta name="viewport" content="width=device-width,initial-scale=1.0"> | ||
| <title>Components App</title> | ||
| </head> | ||
| <body> | ||
| <div data-cy-root></div> | ||
| </body> | ||
| </html> |
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,32 @@ | ||
| // *********************************************************** | ||
| // This example support/component.ts is processed and | ||
| // loaded automatically before your test files. | ||
| // | ||
| // This is a great place to put global configuration and | ||
| // behavior that modifies Cypress. | ||
| // | ||
| // You can change the location of this file or turn off | ||
| // automatically serving support files with the | ||
| // 'supportFile' configuration option. | ||
| // | ||
| // You can read more here: | ||
| // https://on.cypress.io/configuration | ||
| // *********************************************************** | ||
|
|
||
| // Import commands.js using ES2015 syntax: | ||
| import './commands' | ||
|
|
||
| // Alternatively you can use CommonJS syntax: | ||
| // require('./commands') | ||
|
|
||
| import { mount } from 'cypress/vue' | ||
|
|
||
| // Augment the Cypress namespace to include type definitions for | ||
| // your custom command. | ||
| // Alternatively, can be defined in cypress/support/component.d.ts | ||
| // with a <reference path="./component" /> at the top of your spec. | ||
|
|
||
| Cypress.Commands.add('mount', mount) | ||
|
|
||
| // Example use: | ||
| // cy.mount(MyComponent) |
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,27 @@ | ||
| declare namespace Cypress { | ||
| interface Chainable { | ||
| /** | ||
| * @description Custom alias command for cy.get() to select DOM element by data-testid attribute. | ||
| * @param {string} dataTestId | ||
| * @example cy.dataTestId('kong-auth-login-submit') | ||
| */ | ||
| getTestId(dataTestId: string): Chainable<Element> | ||
|
|
||
| /** | ||
| * @description Custom alias command for cy.find() to select DOM element by data-testid attribute. | ||
| * @param {string} dataTestId | ||
| * @example cy.findTestId('kong-auth-login-submit') | ||
| */ | ||
| findTestId(dataTestId: string): Chainable<Element> | ||
|
|
||
| /** | ||
| * @description Custom command to mount a Vue component inside Cypress browser. | ||
| * @example cy.mount(component, optionsOrProps) | ||
| * @param {any} component target component | ||
| * @param {any} options Options or props | ||
| */ | ||
| mount(component: any, options?: any): Chainable | ||
|
|
||
| assertValueCopiedToClipboard(value: string): Chainable | ||
| } | ||
| } |
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,2 @@ | ||
| // Import custom Cypress commands | ||
| import './commands' |
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
103 changes: 103 additions & 0 deletions
103
packages/core/expressions/src/components/MonacoEditor.vue
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,103 @@ | ||
| <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: () => ({}), | ||
| }, | ||
| beforeInit: { | ||
| type: Function, | ||
| default: () => {}, | ||
| }, | ||
| validationResult: { | ||
| type: Object, | ||
| default: undefined, | ||
| }, | ||
| }) | ||
| const emits = defineEmits(['update:modelValue', 'editorWillMount', 'editorDidMount', 'validationResultUpdate']) | ||
| 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) | ||
| } | ||
| }) | ||
| watch(() => props.validationResult, (result) => { | ||
| emits('validationResultUpdate', result, editor) | ||
| }) | ||
| onMounted(async () => { | ||
| if (typeof props.beforeInit === 'function') { | ||
| await props.beforeInit(monaco) | ||
| } | ||
| emits('editorWillMount', monaco) | ||
| 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) | ||
| } | ||
| }) | ||
| // emits('editorDidMount', editor) | ||
| }) | ||
| onBeforeUnmount(() => { | ||
| if (editor) { | ||
| 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,81 @@ | ||
| <template> | ||
| <header | ||
| class="page-header" | ||
| :data-testId="testId" | ||
| > | ||
| <div class="row"> | ||
| <component | ||
| :is="tag" | ||
| :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, computed } from 'vue' | ||
| const props = defineProps<{ | ||
| title: string, | ||
| size: number, | ||
| hideTitle?: boolean, | ||
| noMargin?: boolean, | ||
| testId?: string, | ||
| }>() | ||
| const tag = computed(() => `h${props.size}`) | ||
| </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: -15px; | ||
| margin-right: -15px; | ||
| padding: 0 15px; | ||
| } | ||
| .col { | ||
| line-height: 38px; | ||
| } | ||
| h1, h2, h3, h4, h5, h6, nav { | ||
| margin-bottom: 20px; | ||
| margin-top: 0px; | ||
| } | ||
| .title-no-margin { | ||
| margin: 0 !important; | ||
| } | ||
| .operations { | ||
| align-items: center; | ||
| display: inline-flex; | ||
| flex-grow: 0; | ||
| justify-content: flex-end; | ||
| margin-left: auto; | ||
| text-align: right; | ||
| white-space: nowrap; | ||
| } | ||
| </style> |
Oops, something went wrong.