@neatui/vue 5.0.0 → 5.1.1

package/src/components/loader/index.ts

@@ -1,6 +1,6 @@
 import FormLoader from './FormLoader/FormLoader.vue';
 export { registerField } from './FormLoader/FormRender.vue';
-export type { FormValue, FormItem, FormArray, FormRule, FormContext, FormArrayContext, FormLinkage, FormError, FormValidateResult, FormLoaderExpose, FieldEntry } from './FormLoader/FormRender.vue';
+export type { FormValue, FormItem, FormArray, FormRule, FormContext, FormArrayContext, FormLinkage, FormError, FormValidateResult, FormLoaderExpose, FormSlotScope, FieldEntry } from './FormLoader/FormRender.vue';
 import LimitLoader from './LimitLoader';
 export * from './TableLoader/index';
 import TableLoader from './TableLoader/TableLoader.vue';

package/src/components/form/RichTextInput.vue

@@ -1,99 +0,0 @@
-<template>
-  <div class="neat-rich-text b-solid b-xs b-line r-sm" :aria-busy="!editor">
-    <template v-if="editor">
-      <div v-if="!readonly" role="toolbar" aria-label="文本格式" class="n-sm" ui-flex="row lm">
-        <button v-for="tool in tools" :key="tool.label" type="button" ui-btn="@a s" :disabled="disabled"
-          :aria-pressed="tool.active ? editor.isActive(tool.active) : undefined" @mousedown.prevent @click="tool.run()">{{ tool.label }}</button>
-        <button type="button" ui-btn="@a s" :disabled="disabled" @mousedown.prevent @click="openLink">链接</button>
-        <button type="button" ui-btn="@a s" :disabled="disabled || !editor.can().undo()" @mousedown.prevent @click="editor.chain().focus().undo().run()">撤销</button>
-        <button type="button" ui-btn="@a s" :disabled="disabled || !editor.can().redo()" @mousedown.prevent @click="editor.chain().focus().redo().run()">重做</button>
-      </div>
-      <div v-if="linkOpen && !disabled && !readonly" class="n-sm" ui-flex="row lm">
-        <input v-model="link" aria-label="链接地址" placeholder="https://" @keydown.enter.prevent="applyLink" />
-        <button type="button" @click="applyLink">应用链接</button>
-        <button type="button" @click="linkOpen = false">取消</button>
-        <span v-if="linkError" role="alert">请输入 http、https 或 mailto 地址</span>
-      </div>
-      <EditorContent :editor="editor" />
-    </template>
-  </div>
-</template>
-<script setup lang="ts">
-  import { onMounted, onBeforeUnmount, shallowRef, watch, ref } from 'vue';
-  import { Editor, EditorContent } from '@tiptap/vue-3';
-  import StarterKit from '@tiptap/starter-kit';
-  const props = withDefaults(defineProps<{
-    modelValue?: string; disabled?: boolean; readonly?: boolean; label?: string;
-  }>(), { modelValue: '', disabled: false, readonly: false, label: '富文本内容' });
-  const emit = defineEmits(['update:modelValue', 'change', 'focus', 'blur']);
-  const editor = shallowRef<Editor>();
-  const linkOpen = ref(false);
-  const link = ref('');
-  const linkError = ref(false);
-  let linkSelection = { from: 1, to: 1 };
-  onMounted(() => {
-    editor.value = new Editor({
-      extensions: [StarterKit.configure({ link: { openOnClick: false } })],
-      content: props.modelValue,
-      editable: !props.disabled && !props.readonly,
-      editorProps: { attributes: { role: 'textbox', 'aria-multiline': 'true', 'aria-label': props.label } },
-      onUpdate: ({ editor }) => {
-        const value = editor.isEmpty ? '' : editor.getHTML();
-        emit('update:modelValue', value);
-        emit('change', value);
-      },
-      onFocus: ({ event }) => emit('focus', event),
-      onBlur: ({ event }) => emit('blur', event),
-    });
-  });
-  onBeforeUnmount(() => editor.value?.destroy());
-  watch(() => props.modelValue, value => {
-    const instance = editor.value;
-    if (instance && value !== (instance.isEmpty ? '' : instance.getHTML())) instance.commands.setContent(value || '', { emitUpdate: false });
-  });
-  watch(() => [props.disabled, props.readonly], () => {
-    editor.value?.setEditable(!props.disabled && !props.readonly, false);
-    linkOpen.value = false;
-  });
-  const tools = [
-    { label: '加粗', active: 'bold', run: () => editor.value?.chain().focus().toggleBold().run() },
-    { label: '斜体', active: 'italic', run: () => editor.value?.chain().focus().toggleItalic().run() },
-    { label: '下划线', active: 'underline', run: () => editor.value?.chain().focus().toggleUnderline().run() },
-    { label: '标题', active: 'heading', run: () => editor.value?.chain().focus().toggleHeading({ level: 2 }).run() },
-    { label: '无序列表', active: 'bulletList', run: () => editor.value?.chain().focus().toggleBulletList().run() },
-    { label: '有序列表', active: 'orderedList', run: () => editor.value?.chain().focus().toggleOrderedList().run() },
-    { label: '引用', active: 'blockquote', run: () => editor.value?.chain().focus().toggleBlockquote().run() },
-    { label: '清除格式', run: () => editor.value?.chain().focus().unsetAllMarks().clearNodes().run() },
-  ];
-  const openLink = () => {
-    if (!editor.value) return;
-    const instance = editor.value;
-    const selection = instance.view.dom.ownerDocument.getSelection();
-    const { from, to } = instance.state.selection;
-    linkSelection = { from, to };
-    // DOM 选区更新可能先于编辑器的 selectionchange 事务。
-    if (selection?.anchorNode && selection.focusNode && instance.view.dom.contains(selection.anchorNode) && instance.view.dom.contains(selection.focusNode)) {
-      const anchor = instance.view.posAtDOM(selection.anchorNode, selection.anchorOffset);
-      const focus = instance.view.posAtDOM(selection.focusNode, selection.focusOffset);
-      linkSelection = { from: Math.min(anchor, focus), to: Math.max(anchor, focus) };
-    }
-    link.value = editor.value?.getAttributes('link').href || '';
-    linkError.value = false;
-    linkOpen.value = true;
-  };
-  const applyLink = () => {
-    if (props.disabled || props.readonly) return;
-    const href = link.value.trim();
-    if (href && !/^(https?:\/\/|mailto:)/i.test(href)) { linkError.value = true; return; }
-    const chain = editor.value?.chain().focus().setTextSelection(linkSelection).extendMarkRange('link');
-    if (href) chain?.setLink({ href }).run(); else chain?.unsetLink().run();
-    linkOpen.value = false;
-  };
-</script>
-<style scoped>
-  .neat-rich-text :deep(.tiptap) { min-height: 10rem; padding: .75rem; outline-offset: -2px; overflow-wrap: anywhere; }
-  .neat-rich-text :deep(ul) { list-style: disc; padding-left: 1.5rem; }
-  .neat-rich-text :deep(ol) { list-style: decimal; padding-left: 1.5rem; }
-  .neat-rich-text :deep(blockquote) { border-left: 3px solid currentColor; padding-left: .75rem; }
-  .neat-rich-text :deep(a) { text-decoration: underline; }
-</style>