From 6653d0e4b0b30eeee4bfe0c0c92bf00a84c0c753 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?= Date: Sun, 8 Sep 2024 07:32:10 +0800 Subject: [PATCH 1/5] fix: type error --- src/Repl.vue | 2 +- src/types.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Repl.vue b/src/Repl.vue index a317615b..bd460a15 100644 --- a/src/Repl.vue +++ b/src/Repl.vue @@ -73,7 +73,7 @@ const outputSlotName = computed(() => (props.layoutReverse ? 'left' : 'right')) provide(injectKeyProps, toRefs(props)) provide( injectKeyPreviewRef, - computed(() => outputRef.value?.previewRef?.container), + computed(() => outputRef.value?.previewRef?.container ?? null), ) /** diff --git a/src/types.ts b/src/types.ts index af62caaa..83529519 100644 --- a/src/types.ts +++ b/src/types.ts @@ -18,5 +18,5 @@ export type OutputModes = 'preview' | EditorMode export const injectKeyProps: InjectionKey>> = Symbol('props') export const injectKeyPreviewRef: InjectionKey< - ComputedRef + ComputedRef > = Symbol('preview-ref') From 5a92a9259da01da4aa30b09ed6dcedfb4503c71d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?= Date: Sun, 8 Sep 2024 07:32:20 +0800 Subject: [PATCH 2/5] feat: export `languageToolsVersion` --- src/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/index.ts b/src/index.ts index 5ccf83bd..e35cbe95 100644 --- a/src/index.ts +++ b/src/index.ts @@ -12,3 +12,4 @@ export { useVueImportMap, mergeImportMap, type ImportMap } from './import-map' export { compileFile } from './transform' export type { Props as ReplProps } from './Repl.vue' export type { OutputModes } from './types' +export { version as languageToolsVersion } from '@vue/language-service/package.json' From 7467f38f65e4b05dacc389644a8001b24f86fcdb Mon Sep 17 00:00:00 2001 From: btea <2356281422@qq.com> Date: Sun, 8 Sep 2024 07:43:07 +0800 Subject: [PATCH 3/5] fix: cancel creating new file (#281) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: 三咲智子 Kevin Deng --- src/editor/FileSelector.vue | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/editor/FileSelector.vue b/src/editor/FileSelector.vue index 2946cae2..6c81bf7d 100644 --- a/src/editor/FileSelector.vue +++ b/src/editor/FileSelector.vue @@ -58,6 +58,11 @@ function focus({ el }: VNode) { function doneNameFile() { if (!pending.value) return + if (!pendingFilename.value) { + pending.value = false + return + } + // add back the src prefix const filename = 'src/' + pendingFilename.value const oldFilename = pending.value === true ? '' : pending.value From 83d8e487de724261cf709c5648cc2512b4c33732 Mon Sep 17 00:00:00 2001 From: btea <2356281422@qq.com> Date: Sun, 8 Sep 2024 22:20:24 +0800 Subject: [PATCH 4/5] feat: add `autoSave` toggle button (#283) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: 三咲智子 Kevin Deng --- src/Repl.vue | 11 ++++--- src/editor/EditorContainer.vue | 32 +++++++++++++++++-- .../{MessageToggle.vue => ToggleButton.vue} | 20 +++--------- src/types.ts | 5 +-- test/main.ts | 1 + 5 files changed, 45 insertions(+), 24 deletions(-) rename src/editor/{MessageToggle.vue => ToggleButton.vue} (64%) diff --git a/src/Repl.vue b/src/Repl.vue index bd460a15..f07465ba 100644 --- a/src/Repl.vue +++ b/src/Repl.vue @@ -17,7 +17,6 @@ export interface Props { editor: EditorComponentType store?: Store autoResize?: boolean - autoSave?: boolean // auto save and compile, default to true, if false, user need to press ctrl + s to save and compile showCompileOutput?: boolean showImportMap?: boolean showTsConfig?: boolean @@ -37,17 +36,18 @@ export interface Props { showRuntimeWarning?: boolean } editorOptions?: { - showErrorText?: string + showErrorText?: string | false + autoSaveText?: string | false monacoOptions?: monaco.editor.IStandaloneEditorConstructionOptions } } +const autoSave = defineModel({ default: true }) const props = withDefaults(defineProps(), { theme: 'light', previewTheme: false, store: () => useStore(), autoResize: true, - autoSave: true, showCompileOutput: true, showImportMap: true, showTsConfig: true, @@ -70,7 +70,10 @@ props.store.init() const editorSlotName = computed(() => (props.layoutReverse ? 'right' : 'left')) const outputSlotName = computed(() => (props.layoutReverse ? 'left' : 'right')) -provide(injectKeyProps, toRefs(props)) +provide(injectKeyProps, { + ...toRefs(props), + autoSave, +}) provide( injectKeyPreviewRef, computed(() => outputRef.value?.previewRef?.container ?? null), diff --git a/src/editor/EditorContainer.vue b/src/editor/EditorContainer.vue index 2d8b2fad..76e543aa 100644 --- a/src/editor/EditorContainer.vue +++ b/src/editor/EditorContainer.vue @@ -3,7 +3,7 @@ import FileSelector from './FileSelector.vue' import Message from '../Message.vue' import { debounce } from '../utils' import { inject, ref, watch } from 'vue' -import MessageToggle from './MessageToggle.vue' +import ToggleButton from './ToggleButton.vue' import { type EditorComponentType, injectKeyProps } from '../types' const SHOW_ERROR_KEY = 'repl_show_error' @@ -12,7 +12,7 @@ const props = defineProps<{ editorComponent: EditorComponentType }>() -const { store } = inject(injectKeyProps)! +const { store, autoSave, editorOptions } = inject(injectKeyProps)! const showMessage = ref(getItem()) const onChange = debounce((code: string) => { @@ -42,7 +42,19 @@ watch(showMessage, () => { @change="onChange" /> - + +
+ + +
@@ -52,4 +64,18 @@ watch(showMessage, () => { overflow: hidden; position: relative; } + +.editor-floating { + position: absolute; + bottom: 16px; + right: 16px; + z-index: 11; + display: flex; + flex-direction: column; + align-items: end; + gap: 8px; + background-color: var(--bg); + color: var(--text-light); + padding: 8px; +} diff --git a/src/editor/MessageToggle.vue b/src/editor/ToggleButton.vue similarity index 64% rename from src/editor/MessageToggle.vue rename to src/editor/ToggleButton.vue index f993122f..2d6fa01d 100644 --- a/src/editor/MessageToggle.vue +++ b/src/editor/ToggleButton.vue @@ -1,14 +1,11 @@