@kungal/editor-nuxt 0.13.0 → 0.14.0

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # @kungal/editor-nuxt
 
+## 0.14.0
+
+### Minor Changes
+
+- 506813b: Add a `#view-switch` slot and a KunUI view switch — the Preview/Markdown tabs are
+  now a swappable layer too.
+
+  `<KunEditor>` exposes a `#view-switch` scoped slot whose props are
+  `KunEditorViewSwitchApi` (`mode` / `setMode` / `labels`). The hand-rolled tabs
+  are the slot's fallback — omit the slot and nothing changes. This lets a host
+  render a real component (or anything) for the view switch and drive the editor
+  via `setMode`, without reaching into internals.
+
+  `@kungal/editor-nuxt` ships `<KunEditorViewSwitch>` (auto-imported): the tabs as a
+  real `<KunTab variant="underlined">` (keyboard nav, sliding indicator, a11y):
+
+  ```vue
+  <KunEditor v-model="md">
+    <template #view-switch="s"><KunEditorViewSwitch v-bind="s" /></template>
+    <template #toolbar="api"><KunEditorToolbar v-bind="api" /></template>
+  </KunEditor>
+  ```
+
+  Same "headless core + optional KunUI layer" pattern as `#toolbar` /
+  `<KunEditorToolbar>`: `@kungal/editor-vue` stays UI-kit-free (default tabs), the
+  KunUI ecosystem gets native chrome. Exports `KunEditorViewSwitchApi`.
+
+### Patch Changes
+
+- Updated dependencies [506813b]
+  - @kungal/editor-vue@0.14.0
+  - @kungal/editor-core@0.14.0
+
 ## 0.13.0
 
 ### Minor Changes

package/nuxt.config.ts

@@ -5,10 +5,12 @@ import { defineNuxtModule, addComponent, createResolver } from '@nuxt/kit'
 // downstream templates use `<KunEditor>` with no import (and Nuxt generates its
 // types, keeping the tag type-checked in consumer templates).
 //
-// It also ships <KunEditorToolbar>: the KunUI-built toolbar for <KunEditor>'s
-// #toolbar slot. It belongs HERE (this layer already assumes @kungal/ui-nuxt),
-// not in headless @kungal/editor-vue — so editor-vue stays UI-kit-free while the
-// KunUI ecosystem gets native chrome. Same shape as TipTap's optional UI pkg.
+// It also ships the KunUI chrome for <KunEditor>'s slots — <KunEditorToolbar>
+// (#toolbar) and <KunEditorViewSwitch> (#view-switch, the Preview/Markdown tabs
+// as a real <KunTab>). They belong HERE (this layer already assumes
+// @kungal/ui-nuxt), not in headless @kungal/editor-vue — so editor-vue stays
+// UI-kit-free while the KunUI ecosystem gets native chrome. Same shape as
+// TipTap's optional UI package.
 export default defineNuxtConfig({
   modules: [
     defineNuxtModule({
@@ -24,6 +26,10 @@ export default defineNuxtConfig({
           name: 'KunEditorToolbar',
           filePath: resolve('./runtime/KunEditorToolbar.vue')
         })
+        addComponent({
+          name: 'KunEditorViewSwitch',
+          filePath: resolve('./runtime/KunEditorViewSwitch.vue')
+        })
       }
     })
   ],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kungal/editor-nuxt",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "KunEditor Nuxt Layer — wraps @kungal/editor-vue and auto-imports <KunEditor> so an existing Nuxt app keeps its exact DX (no import needed).",
   "type": "module",
   "keywords": [
@@ -30,8 +30,8 @@
     "nuxt.config.ts"
   ],
   "dependencies": {
-    "@kungal/editor-core": "0.13.0",
-    "@kungal/editor-vue": "0.13.0"
+    "@kungal/editor-core": "0.14.0",
+    "@kungal/editor-vue": "0.14.0"
   },
   "peerDependencies": {
     "@kungal/ui-vue": "^2.7.0",

package/runtime/KunEditorViewSwitch.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+// KunUI view switch for <KunEditor>'s #view-switch slot — the Preview/Markdown
+// tabs as a real <KunTab variant="underlined"> (keyboard nav, sliding indicator,
+// a11y). Same pattern as <KunEditorToolbar>: it lives in this ui-nuxt-assuming
+// layer (not headless editor-vue) and is driven purely by the slot API.
+//
+//   <KunEditor v-model="md">
+//     <template #view-switch="s"><KunEditorViewSwitch v-bind="s" /></template>
+//   </KunEditor>
+//
+// KunTab is auto-imported by @kungal/ui-nuxt in the consuming app.
+import { computed } from 'vue'
+import type { KunEditorViewSwitchApi } from '@kungal/editor-vue'
+
+const props = defineProps<KunEditorViewSwitchApi>()
+
+const items = computed(() => [
+  { value: 'wysiwyg', textValue: props.labels.wysiwyg },
+  { value: 'source', textValue: props.labels.source }
+])
+
+const onChange = (value: string) => {
+  props.setMode(value === 'source' ? 'source' : 'wysiwyg')
+}
+</script>
+
+<template>
+  <KunTab
+    :model-value="mode"
+    :items="items"
+    variant="underlined"
+    color="primary"
+    size="sm"
+    @update:model-value="onChange"
+  />
+</template>