@dynamicforms/vuetify-inputs 0.9.2 → 0.10.1

package/dist/index.d.ts

@@ -14,7 +14,6 @@ import { Day } from 'date-fns';
 import { default as default_2 } from '@dynamicforms/vue-forms';
 import { DefaultInputSlot } from 'vuetify/lib/components/VField/VField';
 import { DefineComponent } from 'vue';
-import { Editor } from '@ckeditor/ckeditor5-core';
 import { Era } from 'date-fns';
 import { FirstWeekContainsDate } from 'date-fns';
 import { FormatDistanceFn } from 'date-fns';
@@ -300,11 +299,6 @@ export declare type BreakpointNames = (typeof responsiveBreakpoints)[number];
  */
 export declare type BreakpointsJSON<T extends Record<string, any>, B extends Record<string, any> = T> = T & Partial<Record<BreakpointNames, B>>;
 
-export declare const ckEditorLanguage: {
-    language: string;
-    translations: undefined;
-};
-
 export declare const DateTimeLocaleConfig: {
     dateTimeLocale: Ref<{
         code: string;
@@ -462,6 +456,28 @@ declare interface DfFileProps extends BaseProps {
     comms: FileComms;
 }
 
+export declare const DfImage: DefineComponent<DfImageProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+"update:modelValue": (value: any) => any;
+"click:clear": () => any;
+}, string, PublicProps, Readonly<DfImageProps> & Readonly<{
+"onUpdate:modelValue"?: ((value: any) => any) | undefined;
+"onClick:clear"?: (() => any) | undefined;
+}>, {
+enabled: boolean;
+clearable: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {
+fileInputRef: HTMLInputElement;
+}, any>;
+
+/**
+ * `comms.upload` must resolve to a value directly usable as an `<img>` src (typically the URL your backend
+ * serves the image from): the component has no separate lookup for turning an identifier into a display URL,
+ * so it renders `modelValue` itself as the preview once a file has been uploaded.
+ */
+declare interface DfImageProps extends BaseProps {
+    comms: FileComms;
+}
+
 export declare const DfInput: DefineComponent<DfInputProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 "update:modelValue": (value: any) => any;
 "click:clear": () => any;
@@ -485,6 +501,7 @@ export declare namespace DfInputComponentProps {
         DfColorProps,
         DfDateTimeProps,
         DfFileProps,
+        DfImageProps,
         DfInputProps,
         DfInputHintProps,
         DfLabelProps,
@@ -501,6 +518,7 @@ export declare namespace DfInputComponents {
         DfColor,
         DfDateTime,
         DfFile,
+        DfImage,
         DfInput,
         DfInputHint,
         DfLabel,
@@ -570,6 +588,18 @@ export declare const dfInputComponentsByTag: {
     enabled: boolean;
     clearable: boolean;
     }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+    readonly 'df-image': DefineComponent<DfImageProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: any) => any;
+    "click:clear": () => any;
+    }, string, PublicProps, Readonly<DfImageProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+    "onClick:clear"?: (() => any) | undefined;
+    }>, {
+    enabled: boolean;
+    clearable: boolean;
+    }, {}, {}, {}, string, ComponentProvideOptions, false, {
+    fileInputRef: HTMLInputElement;
+    }, any>;
     readonly 'df-input': DefineComponent<DfInputProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
     "update:modelValue": (value: any) => any;
     "click:clear": () => any;
@@ -609,17 +639,13 @@ export declare const dfInputComponentsByTag: {
     disabled?: boolean;
     }> & Readonly<{
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-    }>, {
-    onEditorReady: (editorReady: Editor) => void;
-    }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+    }>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
     "update:modelValue": (value: string) => any;
     }, PublicProps, {
     minHeight: string;
     modelValue: string;
     disabled: boolean;
-    }, false, {}, {}, GlobalComponents, GlobalDirectives, string, {
-    editorElement: HTMLDivElement;
-    }, HTMLDivElement, ComponentProvideOptions, {
+    }, false, {}, {}, GlobalComponents, GlobalDirectives, string, {}, HTMLDivElement, ComponentProvideOptions, {
     P: {};
     B: {};
     D: {};
@@ -632,9 +658,7 @@ export declare const dfInputComponentsByTag: {
     disabled?: boolean;
     }> & Readonly<{
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-    }>, {
-    onEditorReady: (editorReady: Editor) => void;
-    }, {}, {}, {}, {
+    }>, {}, {}, {}, {}, {
     minHeight: string;
     modelValue: string;
     disabled: boolean;
@@ -780,17 +804,13 @@ minHeight?: string;
 disabled?: boolean;
 }> & Readonly<{
 "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-}>, {
-onEditorReady: (editorReady: Editor) => void;
-}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 "update:modelValue": (value: string) => any;
 }, PublicProps, {
 minHeight: string;
 modelValue: string;
 disabled: boolean;
-}, false, {}, {}, GlobalComponents, GlobalDirectives, string, {
-editorElement: HTMLDivElement;
-}, HTMLDivElement, ComponentProvideOptions, {
+}, false, {}, {}, GlobalComponents, GlobalDirectives, string, {}, HTMLDivElement, ComponentProvideOptions, {
 P: {};
 B: {};
 D: {};
@@ -803,9 +823,7 @@ minHeight?: string;
 disabled?: boolean;
 }> & Readonly<{
 "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-}>, {
-onEditorReady: (editorReady: Editor) => void;
-}, {}, {}, {}, {
+}>, {}, {}, {}, {}, {
 minHeight: string;
 modelValue: string;
 disabled: boolean;
@@ -934,8 +952,6 @@ export declare interface SelectChoice {
 
 export declare type SelectFetchChoices<T1 = any, T2 = any> = (queryValue?: T1, idValue?: T2) => Promise<SelectChoice[]>;
 
-export declare function setCkEditorLanguage(language: string, translations: any): void;
-
 declare type ShowAsGroup = 'no' | 'grouped' | 'grouped-no-borders';
 
 export declare const translatableStrings: {
@@ -959,6 +975,45 @@ export declare const translatableStrings: {
     Spoiler: string;
     CodeDark: string;
     CodeBright: string;
+    Undo: string;
+    Redo: string;
+    SelectAll: string;
+    Bold: string;
+    Italic: string;
+    HorizontalLine: string;
+    Blockquote: string;
+    BulletedList: string;
+    NumberedList: string;
+    Outdent: string;
+    Indent: string;
+    AlignLeft: string;
+    AlignCenter: string;
+    AlignRight: string;
+    AlignJustify: string;
+    Link: string;
+    LinkUrl: string;
+    LinkApply: string;
+    LinkRemove: string;
+    Image: string;
+    ImageUrl: string;
+    ImageUpload: string;
+    ImageInsert: string;
+    ImageDropHint: string;
+    ImageReplace: string;
+    Table: string;
+    TableInsert: string;
+    TableAddRowAbove: string;
+    TableAddRowBelow: string;
+    TableDeleteRow: string;
+    TableAddColumnBefore: string;
+    TableAddColumnAfter: string;
+    TableDeleteColumn: string;
+    TableToggleHeaderRow: string;
+    TableDeleteTable: string;
+    Style: string;
+    MediaEmbed: string;
+    MediaEmbedUrl: string;
+    MediaEmbedInsert: string;
 };
 
 export declare function translateStrings(translationCallback: (s: string) => string): void;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dynamicforms/vuetify-inputs",
   "private": false,
-  "version": "0.9.2",
+  "version": "0.10.1",
   "type": "module",
   "description": "Vuetify input components with guaranteed visual consistency across all form fields — unified density/variant system, globally configurable, with inline mode for table cells. Built for @dynamicforms/vue-forms.",
   "author": "Jure Erznožnik",
@@ -24,6 +24,7 @@
   "scripts": {
     "build": "vite build",
     "test": "vitest run --coverage",
+    "test:e2e": "playwright test",
     "lint": "eslint src --fix && vue-tsc --noEmit",
     "lint:ci": "eslint src && vue-tsc --noEmit",
     "docs:dev": "npm run docs:dev -w docs",
@@ -55,10 +56,20 @@
     "url": "https://github.com/dynamicforms/vuetify-inputs/issues"
   },
   "peerDependencies": {
-    "@ckeditor/ckeditor5-vue": "^7.0.0",
     "@dynamicforms/vue-forms": "^0.17.0",
     "@mdi/font": "^7.4.47",
-    "ckeditor5": "^43.0.0",
+    "@tiptap/core": "^3.30.2",
+    "@tiptap/extension-image": "^3.30.2",
+    "@tiptap/extension-link": "^3.30.2",
+    "@tiptap/extension-placeholder": "^3.30.2",
+    "@tiptap/extension-table": "^3.30.2",
+    "@tiptap/extension-table-cell": "^3.30.2",
+    "@tiptap/extension-table-header": "^3.30.2",
+    "@tiptap/extension-table-row": "^3.30.2",
+    "@tiptap/extension-text-align": "^3.30.2",
+    "@tiptap/pm": "^3.30.2",
+    "@tiptap/starter-kit": "^3.30.2",
+    "@tiptap/vue-3": "^3.30.2",
     "date-fns": "^4.1.0",
     "lodash-es": "^4.17.12",
     "vitepress-plugin-crosslinks": "^1.0.0",
@@ -68,14 +79,15 @@
     "vuetify": "^3.9"
   },
   "devDependencies": {
+    "@playwright/test": "^1.62.1",
     "@types/lodash-es": "^4.17.12",
     "@types/markdown-it-attrs": "^4.1.3",
-    "@types/node": "^24",
+    "@types/node": "^26",
     "@vitejs/plugin-vue": "^6",
     "@vitest/coverage-v8": "^3",
     "@vue/test-utils": "^2.2.4",
     "@vue/tsconfig": "^0.7.0",
-    "eslint-config-velis": "^2.0.12",
+    "eslint-config-velis": "^3",
     "jsdom": "^26.0.0",
     "markdown-it-attrs": "^4.3.1",
     "rollup-plugin-visualizer": "^5.14.0",
@@ -85,5 +97,10 @@
     "vite-plugin-eslint": "^1.8.1",
     "vitest": "^3",
     "vue-tsc": "^2"
+  },
+  "allowScripts": {
+    "@parcel/watcher@2.6.0": true,
+    "esbuild@0.28.2": true,
+    "unrs-resolver@1.12.2": true
   }
 }

package/readme.md

@@ -66,10 +66,9 @@ consistent appearance.
 - **Selection**: static choices or an async `fetchChoices`, single or multiple, chips with icons, free values with
   `allowTags`
 - **Uploads**: a `FileComms` object with upload progress, delete and a periodic touch
-- **Rich text**: a configured CKEditor 5 inside the same field frame as every other input
-- **Localisable**: `translateStrings()` replaces the library's own strings, `setCkEditorLanguage()` sets the RTF
-  editor's interface language, and `DateTimeLocaleConfig` sets the date-fns locale dates are formatted and parsed
-  with
+- **Rich text**: TipTap with a Vuetify toolbar, inside the same field frame as every other input
+- **Localisable**: `translateStrings()` replaces the library's own strings, including every RTF editor toolbar
+  label, and `DateTimeLocaleConfig` sets the date-fns locale dates are formatted and parsed with
 - **TypeScript**: every component's props are an exported interface, and the definitions ship with the build
 
 ## Installation