@open-commune/web 0.1.3

package/components/forms/inputs/input-editor.vue

@@ -0,0 +1,363 @@
+<template>
+  <div>
+    <label v-if="label" :for="name" class="block text-2xs font-light tracking-wider text-gray-500 uppercase">
+      {{ label }}
+    </label>
+    <!-- Fixed toolbar, same layout as the legacy editor: discoverability for
+         authors who never hover a handle or type "/". Gestures stay available. -->
+    <UEditorToolbar
+      v-if="uEditor?.editor"
+      :editor="uEditor.editor"
+      :items="toolbarItems"
+      class="sticky top-2 z-10 flex flex-wrap items-center gap-1 rounded-t-md border border-b-0 border-neutral-200 bg-white px-2 py-1 dark:border-neutral-800 dark:bg-neutral-900"
+      :class="{ 'mt-1': !!label }"
+    >
+      <template #blocks>
+        <UDropdownMenu :modal="false" :items="blockMenuInsertItems(uEditor.editor)" :ui="{ content: 'w-64' }">
+          <UButton icon="i-lucide-plus" color="neutral" variant="ghost" size="sm" label="Ajouter un bloc" />
+        </UDropdownMenu>
+      </template>
+      <template #link>
+        <UPopover v-model:open="toolbarLinkOpen">
+          <UButton
+            icon="iconoir:link"
+            color="neutral"
+            variant="ghost"
+            size="sm"
+            :active="uEditor.editor.isActive('link')"
+            aria-label="Lien"
+            @click="linkUrl = uEditor.editor.getAttributes('link').href ?? ''"
+          />
+          <template #content>
+            <form class="flex items-center gap-2 p-2" @submit.prevent="applyLink(uEditor.editor, 'toolbar')">
+              <UInput v-model="linkUrl" placeholder="https://…" size="sm" class="w-64" autofocus />
+              <UButton type="submit" size="sm" color="neutral" label="OK" />
+              <UButton
+                v-if="uEditor.editor.isActive('link')"
+                size="sm"
+                color="neutral"
+                variant="ghost"
+                icon="iconoir:trash"
+                aria-label="Retirer le lien"
+                @click="removeLink(uEditor.editor, 'toolbar')"
+              />
+            </form>
+          </template>
+        </UPopover>
+      </template>
+    </UEditorToolbar>
+    <UEditor
+      ref="uEditor"
+      v-slot="{ editor, handlers }"
+      v-model="doc"
+      :image="false"
+      :mention="false"
+      :starter-kit="communStarterKit"
+      :extensions="extensions"
+      :handlers="customHandlers"
+      :enable-content-check="true"
+      :on-content-error="onContentError"
+      :placeholder="placeHolder || 'Écrivez, tapez « / » pour les commandes…'"
+      class="min-h-40 rounded-b-md border border-neutral-200 px-6 py-3 dark:border-neutral-800"
+    >
+      <!-- Selection bubble: marks, alignment, link. -->
+      <UEditorToolbar
+        :editor="editor"
+        :items="bubbleItems"
+        layout="bubble"
+        :should-show="({ editor: e, view, state }) => {
+          if (e.isActive('image') || e.isActive('file') || e.isActive('embed')) return false
+          return view.hasFocus() && !state.selection.empty
+        }"
+      >
+        <template #link>
+          <UPopover v-model:open="linkOpen">
+            <UButton
+              icon="iconoir:link"
+              color="neutral"
+              variant="ghost"
+              size="sm"
+              :active="editor.isActive('link')"
+              aria-label="Lien"
+              @click="linkUrl = editor.getAttributes('link').href ?? ''"
+            />
+            <template #content>
+              <form class="flex items-center gap-2 p-2" @submit.prevent="applyLink(editor)">
+                <UInput v-model="linkUrl" placeholder="https://…" size="sm" class="w-64" autofocus />
+                <UButton type="submit" size="sm" color="neutral" label="OK" />
+                <UButton
+                  v-if="editor.isActive('link')"
+                  size="sm"
+                  color="neutral"
+                  variant="ghost"
+                  icon="iconoir:trash"
+                  aria-label="Retirer le lien"
+                  @click="removeLink(editor)"
+                />
+              </form>
+            </template>
+          </UPopover>
+        </template>
+      </UEditorToolbar>
+
+      <!-- Slash commands: standard blocks plus ours. -->
+      <UEditorSuggestionMenu :editor="editor" :items="slashItems" size="lg" :ui="{ content: 'w-[40rem]' }" />
+
+      <!-- Block handle: plus opens the slash menu, grip moves blocks. -->
+      <UEditorDragHandle
+        v-slot="{ ui, onClick }"
+        :editor="editor"
+        @node-change="selectedNode = $event"
+      >
+        <UButton
+          icon="i-lucide-plus"
+          color="neutral"
+          variant="ghost"
+          size="sm"
+          :class="ui.handle()"
+          aria-label="Ajouter un bloc"
+          @click="(e) => {
+            e.stopPropagation()
+            const selected = onClick()
+            handlers.suggestion?.execute(editor, { pos: selected?.pos }).run()
+          }"
+        />
+        <UDropdownMenu
+          :modal="false"
+          :items="blockMenuItems(editor)"
+          :content="{ side: 'left' }"
+          :ui="{ content: 'w-44' }"
+          @update:open="editor.chain().setMeta('lockDragHandle', $event).run()"
+        >
+          <UButton
+            color="neutral"
+            variant="ghost"
+            size="sm"
+            icon="i-lucide-grip-vertical"
+            :class="ui.handle()"
+            aria-label="Déplacer le bloc"
+          />
+        </UDropdownMenu>
+      </UEditorDragHandle>
+
+    </UEditor>
+  </div>
+</template>
+
+<script setup>
+// Rich-text input on UEditor with the parity extension set and the media
+// contract (shared cache, bounded resolution). Editing surface is
+// Notion-like: selection bubble, slash commands, per-block drag handle.
+//
+// TRANSITIONAL value contract: accepts the ProseMirror object (target) or
+// the legacy stringified JSON, and emits IN THE SAME SHAPE it received —
+// the string adapter dies with models/_commun.
+import { ref, watch } from 'vue'
+import { mapEditorItems } from '@nuxt/ui/utils/editor'
+import { communExtensions, communStarterKit, sanitizeDoc, EMBED_SERVICES } from '~/editor'
+
+const $emitters = defineEmits(['change'])
+const $props = defineProps({
+  label: { type: String, default: '' },
+  name: { type: String, default: 'input' },
+  placeHolder: { type: String, default: '' },
+  value: { type: [String, Object], default: '' },
+})
+
+const { media } = useCore()
+const extensions = communExtensions(media.forEditor())
+const toast = useToast()
+const uEditor = ref()
+
+// ── Value contract ──────────────────────────────────────────────────────────
+const receivedAsString = typeof $props.value === 'string'
+// Le noeud `doc` de ProseMirror attend `block+` : AU MOINS un bloc. Un document
+// au contenu vide est donc invalide, et tiptap le refuse avec « Invalid JSON
+// content » — ce que voyait l'auteur en ouvrant l'onglet d'une entree qui vient
+// d'etre creee, ou dont le contenu n'a jamais ete rempli.
+const emptyDoc = () => ({ type: 'doc', content: [{ type: 'paragraph' }] })
+
+const parse = (value) => {
+  if (!value) return emptyDoc()
+  const raw = typeof value === 'string' ? JSON.parse(value) : value
+  const doc = sanitizeDoc(raw)
+  // `sanitizeDoc` peut vider un document ne contenant que des noeuds texte
+  // vides : on repasse alors par le document vide VALIDE.
+  return doc?.content?.length ? doc : emptyDoc()
+}
+
+const doc = ref(parse($props.value))
+
+// The transient upload slot must never leave the editor.
+const stripTransient = (node) => {
+  if (!node?.content) return node
+  const content = node.content
+    .filter((child) => child.type !== 'imageUpload')
+    .map(stripTransient)
+  return content.length === node.content.length && content.every((c, i) => c === node.content[i])
+    ? node
+    : { ...node, content }
+}
+
+watch(doc, (next) => {
+  const out = stripTransient(next)
+  $emitters('change', receivedAsString ? JSON.stringify(out) : out)
+}, { deep: true })
+
+watch(() => $props.value, (next) => {
+  const parsed = parse(next)
+  // Compared against the STRIPPED document: what we emit comes back without
+  // the upload slot, and taking it as a difference would tear that slot out
+  // of the editor while its file is still uploading.
+  if (JSON.stringify(parsed) !== JSON.stringify(stripTransient(doc.value))) doc.value = parsed
+})
+
+function onContentError({ error }) {
+  // Never a silent drop: the author is told when content cannot load as-is.
+  toast.add({
+    title: 'Contenu partiellement illisible',
+    description: error?.message ?? String(error),
+    color: 'error',
+  })
+}
+
+// ── Custom handlers: our blocks, addressable from every menu ────────────────
+const customHandlers = {
+  callout: {
+    canExecute: (editor) => editor.can().setCallout(),
+    execute: (editor) => editor.chain().focus().setCallout({ icon: 'iconoir:megaphone' }),
+    isActive: (editor) => editor.isActive('callout'),
+  },
+  details: {
+    canExecute: (editor) => editor.can().setDetails(),
+    execute: (editor) => editor.chain().focus().setDetails(),
+    isActive: (editor) => editor.isActive('details'),
+  },
+  ...Object.fromEntries(
+    Object.entries(EMBED_SERVICES).map(([service, preset]) => [
+      `embed-${service}`,
+      {
+        canExecute: () => true,
+        execute: (editor) =>
+          editor.chain().focus().setEmbed({
+            service,
+            icon: preset.icon,
+            placeholder: preset.placeholder,
+            title: preset.title,
+            height: preset.height,
+          }),
+        isActive: (editor) => editor.isActive('embed', { service }),
+      },
+    ]),
+  ),
+  uploadImage: {
+    canExecute: (editor) => editor.can().insertContent({ type: 'imageUpload' }),
+    execute: (editor) => editor.chain().focus().insertUploadPlaceholder({ accept: 'image/*' }),
+    isActive: (editor) => editor.isActive('imageUpload'),
+  },
+  uploadFile: {
+    canExecute: (editor) => editor.can().insertContent({ type: 'imageUpload' }),
+    execute: (editor) => editor.chain().focus().insertUploadPlaceholder(),
+    isActive: (editor) => editor.isActive('imageUpload'),
+  },
+}
+
+// ── Menus ───────────────────────────────────────────────────────────────────
+const bubbleItems = [
+  [
+    { kind: 'mark', mark: 'bold', icon: 'iconoir:bold-square-outline', tooltip: { text: 'Gras' } },
+    { kind: 'mark', mark: 'italic', icon: 'iconoir:italic-square-outline', tooltip: { text: 'Italique' } },
+  ],
+  [{ slot: 'link', icon: 'iconoir:link' }],
+  [
+    { kind: 'textAlign', align: 'justify', icon: 'iconoir:align-justify', tooltip: { text: 'Justifié' } },
+    { kind: 'textAlign', align: 'left', icon: 'iconoir:align-left', tooltip: { text: 'Aligné à gauche' } },
+    { kind: 'textAlign', align: 'center', icon: 'iconoir:align-center', tooltip: { text: 'Centré' } },
+    { kind: 'textAlign', align: 'right', icon: 'iconoir:align-right', tooltip: { text: 'Aligné à droite' } },
+  ],
+]
+
+const slashItems = [
+  [
+    { type: 'label', label: 'Blocs de base' },
+    { kind: 'paragraph', label: 'Texte', icon: 'iconoir:text', description: 'Écrivez du texte. Tout simplement' },
+    { kind: 'heading', level: 1, label: 'Titre 1', icon: 'iconoir:text-size', description: 'Titre de grande taille' },
+    { kind: 'heading', level: 2, label: 'Titre 2', icon: 'iconoir:text-size', description: 'Titre de taille moyenne' },
+    { kind: 'heading', level: 3, label: 'Titre 3', icon: 'iconoir:text-size', description: 'Titre de petite taille' },
+    { kind: 'bulletList', label: 'Liste à puces', icon: 'iconoir:list', description: 'Créez une liste à puces' },
+    { kind: 'orderedList', label: 'Liste numérotée', icon: 'iconoir:numbered-list-left', description: 'Créez une liste numérotée' },
+    { kind: 'blockquote', label: 'Citation', icon: 'iconoir:quote-message', description: 'Affichez une citation' },
+    { kind: 'horizontalRule', label: 'Séparateur', icon: 'iconoir:minus', description: 'Séparez deux blocs' },
+  ],
+  [
+    { type: 'label', label: 'Blocs riches' },
+    { kind: 'callout', label: 'Encart', icon: 'iconoir:megaphone', description: 'Mettez une information en avant' },
+    { kind: 'details', label: 'Accordéon', icon: 'lucide:list-collapse', description: 'Contenu repliable' },
+    ...Object.entries(EMBED_SERVICES).map(([service, preset]) => ({
+      kind: `embed-${service}`,
+      label: preset.label,
+      icon: preset.icon,
+      description: `Intégrez : ${preset.placeholder}`,
+    })),
+    { kind: 'uploadImage', label: 'Image', icon: 'iconoir:media-image', description: 'Téléversez une image' },
+    { kind: 'uploadFile', label: 'Fichier', icon: 'iconoir:page', description: 'Téléversez un document (PDF…)' },
+  ],
+]
+
+// Fixed toolbar: the legacy composition — block catalog, link, marks, alignment.
+const toolbarItems = [
+  [{ slot: 'blocks' }],
+  [
+    { kind: 'mark', mark: 'bold', icon: 'iconoir:bold-square-outline', tooltip: { text: 'Gras' } },
+    { kind: 'mark', mark: 'italic', icon: 'iconoir:italic-square-outline', tooltip: { text: 'Italique' } },
+  ],
+  [{ slot: 'link', icon: 'iconoir:link' }],
+  [
+    { kind: 'textAlign', align: 'justify', icon: 'iconoir:align-justify', tooltip: { text: 'Justifié' } },
+    { kind: 'textAlign', align: 'left', icon: 'iconoir:align-left', tooltip: { text: 'Aligné à gauche' } },
+    { kind: 'textAlign', align: 'center', icon: 'iconoir:align-center', tooltip: { text: 'Centré' } },
+    { kind: 'textAlign', align: 'right', icon: 'iconoir:align-right', tooltip: { text: 'Aligné à droite' } },
+  ],
+]
+
+const blockMenuInsertItems = (editor) => mapEditorItems(editor, slashItems, customHandlers)
+
+const selectedNode = ref()
+
+const blockMenuItems = (editor) =>
+  mapEditorItems(
+    editor,
+    [
+      [
+        { kind: 'moveUp', pos: selectedNode.value?.pos, label: 'Monter', icon: 'iconoir:arrow-up' },
+        { kind: 'moveDown', pos: selectedNode.value?.pos, label: 'Descendre', icon: 'iconoir:arrow-down' },
+        { kind: 'duplicate', pos: selectedNode.value?.pos, label: 'Dupliquer', icon: 'iconoir:copy' },
+      ],
+      [{ kind: 'delete', pos: selectedNode.value?.pos, label: 'Supprimer', icon: 'iconoir:trash' }],
+    ],
+    customHandlers,
+  )
+
+// ── Link popovers (bubble and fixed toolbar hold their own open state) ──────
+const linkOpen = ref(false)
+const toolbarLinkOpen = ref(false)
+const linkUrl = ref('')
+
+function applyLink(editor, source) {
+  const href = linkUrl.value.trim()
+  if (href) {
+    editor.chain().focus().extendMarkRange('link').setLink({ href }).run()
+  }
+  closeLink(source)
+}
+
+function removeLink(editor, source) {
+  editor.chain().focus().extendMarkRange('link').unsetLink().run()
+  closeLink(source)
+}
+
+function closeLink(source) {
+  if (source === 'toolbar') toolbarLinkOpen.value = false
+  else linkOpen.value = false
+}
+</script>

package/components/forms/inputs/input-files-media.vue

@@ -0,0 +1,150 @@
+<template>
+  <div>
+    <label
+      :for="name"
+      class="block text-2xs font-light tracking-wider text-gray-500 uppercase"
+    >
+      {{ label }}
+    </label>
+    <ul
+      :id="name"
+      :name="name"
+      :class="{ 'p-3': (limit !== 1 || !currentMedia.length), 'mt-1': !!label }"
+      class="bg-gray-100 rounded-md"
+    >
+      <!-- <draggable
+        :list="value"
+        :disabled="readOnly"
+        ghost-class="opacity-25"
+        @start="dragging = true"
+        @end="dragging = false"
+      > -->
+      <ul role="list" :class="{ 'grid grid-cols-2 grid-flow-row': limit !== 1 }">
+        <li
+          v-if="!readOnly && (limit === 0 || currentMedia.length < limit)"
+          class="relative mt-1 col-span-2"
+        >
+          <div class="flex w-full justify-center rounded-md border-2 border-dashed border-gray-300 focus:outline-none px-6 pt-5 pb-6">
+            <div class="space-y-1 text-center">
+              <svg
+                class="cursor-pointer mx-auto h-12 w-12 text-gray-400"
+                stroke="currentColor"
+                fill="none"
+                viewBox="0 0 48 48"
+                aria-hidden="true"
+              >
+                <path
+                  d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+              <div class="flex text-sm text-gray-600">
+                <label
+                  for="file-upload"
+                  class="relative cursor-pointer text-indigo-600 rounded-md font-medium focus-within:outline-none focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 hover:text-indigo-500"
+                  @click="_uploadMedia"
+                >
+                  <span>Upload a file</span>
+                  <input-files
+                    ref="inputMedia"
+                    class="sr-only"
+                    :read-only="readOnly"
+                    @loading="loading = true"
+                    @loaded="loading = false"
+                    @change="_handleUploadedFiles"
+                  />
+                </label>
+                <p class="pl-1">
+                  or drag and drop
+                </p>
+              </div>
+              <p class="text-xs text-gray-500">
+                PNG, JPG, GIF up to 10MB
+              </p>
+            </div>
+          </div>
+        </li>
+        <media-card-editor
+          v-for="(_id, i) in currentMedia"
+          :key="_id"
+          :value="_id"
+          :read-only="readOnly"
+          :full-width="limit === 1"
+          :class="{ 'cursor-move':!readOnly, 'row-span-1': limit !== 1 && [1, currentMedia.length - 1].includes(i) }"
+          class="row-span-3 h-full"
+          @remove="_removeMedia(_id)"
+        />
+      </ul>
+      <!-- </draggable> -->
+    </ul>
+  </div>
+</template>
+
+<script setup>
+import inputFiles from '~/components/forms/inputs/input-files'
+import mediaCardEditor from '~/components/forms/inputs/media-section/media-editor'
+
+// Prepare emitters
+const $emitters = defineEmits(['change'])
+
+// Prepare props
+const $props = defineProps({
+  readOnly: {
+    type: Boolean,
+    default: false
+  },
+  label: {
+    type: String,
+    default: ''
+  },
+  name: {
+    type: String,
+    default: 'input'
+  },
+  limit: {
+    type: Number,
+    default: 0
+  },
+  value: {
+    type: [Array, String],
+    default: () => []
+  }
+})
+
+// Prepare reactive data
+const dragging = ref(false)
+const loaded = ref(false)
+const initialValue = ref([])
+const currentMedia = ref([])
+const inputMedia = ref(null)
+
+// Prepare watchers
+watch(
+  () => $props.value,
+  (newValue) => {
+    if (!currentMedia.value.length && (newValue && newValue.length)) {
+      initialValue.value = Array.isArray(newValue) ? [...newValue] : [newValue]
+      currentMedia.value = [...initialValue.value]
+    }
+  },
+  { immediate: true }
+)
+
+// Prepare methods
+const _uploadMedia = () => {
+  inputMedia.value._handleClick()
+}
+
+const _removeMedia = (idToRemove) => {
+  initialValue.value = initialValue.value.filter(_id => _id !== idToRemove)
+  currentMedia.value = [...initialValue.value]
+  $emitters('change', currentMedia.value.map(_id => _id))
+}
+
+const _handleUploadedFiles = (data = []) => {
+  currentMedia.value = [...initialValue.value, ...data.map(({ _id }) => _id)]
+  $emitters('change', currentMedia.value)
+}
+</script>

package/components/forms/inputs/input-files.vue

@@ -0,0 +1,98 @@
+<template>
+  <div>
+    <input
+      ref="inputFile"
+      type="file"
+      class="sr-only"
+      :accept="mime"
+      :multiple="multiple"
+      :disabled="readOnly"
+      @change="_prepareUpload"
+    >
+  </div>
+</template>
+
+<script setup>
+import axios from 'axios'
+
+const { Media } = useModels()
+
+// Prepare emitters
+const $emitters = defineEmits(['loading', 'loaded', 'change', 'error'])
+
+// Prepare props
+defineProps({
+  mime: {
+    type: String,
+    default: 'image/*,application/pdf'
+  },
+  multiple: {
+    type: Boolean,
+    default: false
+  },
+  readOnly: {
+    type: Boolean,
+    default: false
+  }
+})
+
+// Prepare reactive data
+const loading = ref(true)
+const files = ref([])
+const inputFile = ref(null)
+
+// Prepare methods
+const _handleClick = () => inputFile.value.click()
+
+const _createMedia = async ({ name, mime, file }) => {
+  // Request for S3 pre-signed url (le nom alimente la clé S3 côté Commun)
+  const { _id, url } = await Media.getS3PreSignedUrl({ mime, name })
+
+  // Put media on amazon S3
+  await axios({
+    method: 'PUT',
+    url,
+    data: file,
+    headers: { 'Content-Type': mime }
+  })
+
+  // Inform object has been pushed
+  const finalData = await Media.create({ _id, mime, name })
+  return finalData
+}
+
+const _uploadFiles = async () => {
+  const filesToUpload = files.value.filter(({ isUploaded }) => !isUploaded)
+  if (filesToUpload && filesToUpload.length) {
+    let i = (filesToUpload.length - 1)
+    while (i >= 0) {
+      const { file } = filesToUpload[i]
+      const { name, type: mime } = file
+      const mediaRecord = await _createMedia({ mime, name, file })
+      files.value.pop()
+      files.value.unshift({ ...mediaRecord, isUploaded: true })
+      i--
+    }
+  }
+}
+
+const _prepareUpload = async () => {
+  $emitters('loading')
+  loading.value = true
+  try {
+    const list = Array.from(inputFile.value.files)
+    list.forEach(file => files.value.push({ file, isUploaded: false }))
+    await _uploadFiles()
+    $emitters('change', files.value)
+  } catch (err) {
+    $emitters('error', err)
+  } finally {
+    loading.value = false
+    $emitters('loaded')
+  }
+}
+
+defineExpose({
+  _handleClick
+})
+</script>

package/components/forms/inputs/input-json.vue

@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <label
+      :for="name"
+      class="block text-2xs font-light tracking-wider text-gray-500 uppercase"
+    >
+      {{ label }}
+    </label>
+    <textarea
+      :id="name"
+      v-model="data"
+      :name="name"
+      :class="{ 'mt-1':!!label }"
+      :placeholder="placeHolder"
+      :disabled="readOnly"
+      rows="3"
+      class="block w-full rounded-md py-2 px-3 shadow-xs border border-gray-200 focus:outline-none focus:ring-gray-50 focus:border-black sm:text-sm disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 disabled:ring-gray-200"
+    />
+  </div>
+</template>
+
+<script setup>
+// Prepare $emitters
+const $emitters = defineEmits(['keyup.enter', 'change'])
+
+// Prepare $props
+const $props = defineProps({
+  label: {
+    type: String,
+    default: ''
+  },
+  name: {
+    type: String,
+    default: 'input'
+  },
+  placeHolder: {
+    type: String,
+    default: ''
+  },
+  value: {
+    type: [Object, Array],
+    default: () => ({})
+  },
+  readOnly: {
+    type: Boolean,
+    default: false
+  }
+})
+
+// Prepare reactive data
+const data = ref('')
+
+// Prepare watchers
+watch(
+  () => $props.value,
+  (newValue) => {
+    data.value = JSON.stringify(newValue, null, 2)
+  },
+  { immediate: true }
+)
+watch(
+  data,
+  (newValue) => $emitters('change', JSON.parse(newValue))
+)
+</script>