@fastkit/vui 0.7.61 → 0.7.64

package/dist/vui.css

@@ -2118,6 +2118,9 @@ thead th {
 .v-wysiwyg-editor__wrapper {
   position: relative;
 }
+.v-wysiwyg-editor .v-control-field__body {
+  width: 100%;
+}
 .v-wysiwyg-editor__floating-toolbar {
   position: absolute;
   right: 0;
@@ -2186,23 +2189,62 @@ thead th {
   overflow: visible;
 }
 .v-linter__issue-menu {
+  font-size: 87.5%;
+  line-height: 1.5;
+}
+.v-linter__issue-menu .v-dialog__body {
+  padding: 0;
+  font-size: inherit;
+}
+.v-linter__issue-menu__message {
+  padding: 8px;
+}
+.v-linter__issue-menu__fixers {
+  position: relative;
+  padding: 4px 0;
+}
+.v-linter__issue-menu__fixers::before {
   position: absolute;
-  top: calc(100% + 8px);
+  top: 0;
+  right: 0;
   left: 0;
-  min-width: 200px;
-  max-width: calc(100vw - 40px);
+  display: block;
+  height: 1px;
+  content: "";
+  background: currentColor;
+  opacity: 0.5;
+}
+.v-linter__issue-menu__fixer__button {
+  position: relative;
+  display: block;
+  width: 100%;
   padding: 8px;
-  font-size: 87.5%;
-  line-height: 1.5;
-  pointer-events: none;
-  background: #fff;
-  border-radius: 4px;
+  font: inherit;
+  font-size: 12px;
+  text-align: left;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  outline: 0;
+  appearance: none;
+}
+.v-linter__issue-menu__fixer__button::before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: block;
+  content: "";
+  background: currentColor;
   opacity: 0;
-  transition: opacity 0.15s;
+  transition: 0.15s;
 }
-.v-linter__issue-menu--active {
-  pointer-events: auto;
-  opacity: 1;
+.v-linter__issue-menu__fixer__button:hover::before, .v-linter__issue-menu__fixer__button:focus::before {
+  opacity: 0.1;
+}
+.v-linter__issue-menu__fixer__button__message {
+  position: relative;
 }
 .v-linter__issue-menu__fix {
   display: inline;
@@ -2215,6 +2257,118 @@ thead th {
   outline: 0;
   appearance: none;
 }
+:root {
+  --v-wysiwyg-color-tool: 30px;
+}
+
+.v-wysiwyg-color-tool__button {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: bottom;
+}
+.v-wysiwyg-color-tool__button__bar {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: block;
+  height: 2px;
+  background: currentColor;
+}
+.v-wysiwyg-color-tool__menu .v-dialog__content {
+  min-width: 0;
+}
+.v-wysiwyg-color-tool__menu .v-dialog__body {
+  padding: 2px;
+}
+.v-wysiwyg-color-tool__items {
+  --item-size: var(--v-wysiwyg-color-tool);
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  max-width: calc(var(--item-size) * 5);
+  vertical-align: bottom;
+}
+.v-wysiwyg-color-tool__items--with-label {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  max-width: none;
+  padding: 2px;
+}
+.v-wysiwyg-color-tool__item {
+  --focus-offset: calc(var(--item-size) * 0.05);
+  position: relative;
+  display: flex;
+  flex-basis: var(--item-size);
+  align-items: center;
+  width: var(--item-size);
+  height: var(--item-size);
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  outline: 0;
+  appearance: none;
+}
+.v-wysiwyg-color-tool__item__color {
+  position: relative;
+  flex: 0 0 var(--item-size);
+  width: var(--item-size);
+  height: var(--item-size);
+}
+.v-wysiwyg-color-tool__item__color::before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: block;
+  content: "";
+  background: currentColor;
+  border: solid 1px transparent;
+  transition: all 0.15s;
+}
+.v-wysiwyg-color-tool__item__name {
+  position: relative;
+  padding: 0 8px;
+  font-size: 12px;
+  white-space: nowrap;
+}
+.v-wysiwyg-color-tool__item:hover .v-wysiwyg-color-tool__item__color::before, .v-wysiwyg-color-tool__item:focus .v-wysiwyg-color-tool__item__color::before {
+  top: var(--focus-offset);
+  right: var(--focus-offset);
+  bottom: var(--focus-offset);
+  left: var(--focus-offset);
+  border-color: rgba(0, 0, 0, 0.1);
+}
+.v-wysiwyg-color-tool__items--with-label .v-wysiwyg-color-tool__item {
+  flex-basis: auto;
+  width: auto;
+  width: 100%;
+}
+.v-wysiwyg-color-tool__items--with-label .v-wysiwyg-color-tool__item::before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: block;
+  content: "";
+  background: currentColor;
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+.v-wysiwyg-color-tool__items--with-label .v-wysiwyg-color-tool__item:hover::before, .v-wysiwyg-color-tool__items--with-label .v-wysiwyg-color-tool__item:focus::before {
+  opacity: 0.1;
+}
+.v-wysiwyg-color-tool__items--with-label .v-wysiwyg-color-tool__item + .v-wysiwyg-color-tool__item {
+  margin-top: 2px;
+}
 .v-tabs {
   position: relative;
   width: 100%;

package/dist/vui.d.ts

@@ -15,7 +15,8 @@ import { EditorOptions } from '@tiptap/vue-3';
 import { EditorView } from 'prosemirror-view';
 import { EmitsOptions } from 'vue';
 import { EV } from '@fastkit/ev';
-import { Extension } from '@tiptap/core';
+import { Extension } from '@tiptap/vue-3';
+import { Extension as Extension_2 } from '@tiptap/core';
 import { Extensions } from '@tiptap/vue-3';
 import { ExtractPropInput } from '@fastkit/vue-utils';
 import { ExtractPropTypes } from 'vue';
@@ -44,10 +45,12 @@ import { InjectionKey } from 'vue';
 import { ItalicOptions } from '@tiptap/extension-italic';
 import { LinkOptions } from '@tiptap/extension-link';
 import { LocationService } from '@fastkit/vue-utils';
+import { Mark } from '@tiptap/vue-3';
 import { MediaMatchKey } from '@fastkit/media-match';
 import { NavigationableInheritProps } from '@fastkit/vue-utils';
 import { NavigationFailure } from 'vue-router';
-import { Node as Node_2 } from 'prosemirror-model';
+import { Node as Node_2 } from '@tiptap/vue-3';
+import { Node as Node_3 } from 'prosemirror-model';
 import { Numberish } from '@fastkit/vue-kit';
 import { OrderedListOptions } from '@tiptap/extension-ordered-list';
 import { Prop } from 'vue';
@@ -106,8 +109,6 @@ export declare const AVATAR_SIZES: readonly ["sm", "md", "lg"];
 
 export declare type AvatarSize = typeof AVATAR_SIZES[number];
 
-export declare function BadWords(words: string[]): typeof LinterPlugin;
-
 export declare interface BreadcrumbsItem extends Pick<NavigationableInheritProps, 'to' | 'disabled'> {
     /**
      * "正確なマッチモード" を強制する場合true
@@ -476,6 +477,13 @@ export declare function createControlProps(): {
     loading: BooleanConstructor;
 };
 
+export declare interface CreatedWysiwygExtension<Options = any, Storage = any> {
+    __isCreatedWysiwygExtension: true;
+    _configs: Partial<Options>[];
+    configure(options?: Partial<Options>): CreatedWysiwygExtension<Options, Storage>;
+    raw: WysiwygExtensionSource<Options, Storage>;
+}
+
 export declare function createElevationProps(): {
     elevation: PropType<VuiElevationValue>;
 };
@@ -1050,6 +1058,15 @@ export declare function createVFormProps(): {
     errorMessages: PropType<string | string[]>;
 };
 
+export declare function createWysiwygColorTool(opts: CreateWysiwygColorToolOptions): WysiwygEditorToolFactory<void>;
+
+export declare interface CreateWysiwygColorToolOptions {
+    items: WysiwygColorItem[];
+    withLabel?: boolean;
+}
+
+export declare function createWysiwygExtension<Options = any, Storage = any>(extension: WysiwygExtensionSource<Options, Storage>): CreatedWysiwygExtension<Options, Storage>;
+
 declare const DATA_TABLE_DEFAULTS: {
     itemKey: string;
     pageQuery: string;
@@ -1361,8 +1378,6 @@ export declare type ElevationProps = ExtractPropTypes<ReturnType<typeof createEl
 
 declare type EmptyIconSymbol = '$empty';
 
-declare type FixFn = (view: EditorView, issue: LinterResult) => any;
-
 export declare type GridContainerAlignContentValue = 'flex-start' | 'flex-end' | 'start' | 'end' | 'stretch' | 'baseline' | 'center' | 'self-start' | 'self-end';
 
 export declare type GridContainerDirectionValue = 'row' | 'row-reverse' | 'column' | 'column-reverse';
@@ -1381,11 +1396,6 @@ export declare type GridItemNumberSizeValue = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9
 
 export declare type GridItemSizeValue = GridItemNumberSizeValue | 'auto';
 
-export declare class HeadingLevel extends LinterPlugin {
-    fixHeader(level: number): ({ state, dispatch }: EditorView, issue: LinterResult) => void;
-    scan(): this;
-}
-
 export { ICON_NAMES }
 
 declare type IconGenerator = (input: IconPropInout) => VNodeChild;
@@ -1416,32 +1426,6 @@ declare interface InputBoxSlots {
 
 export declare function installVuiPlugin(app: App, opts: VuiPluginOptions): App<any>;
 
-export declare const Linter: Extension<LinterOptions, any>;
-
-export declare interface LinterOptions {
-    plugins: Array<typeof LinterPlugin>;
-}
-
-export declare class LinterPlugin {
-    protected doc: Node_2;
-    private results;
-    constructor(doc: Node_2);
-    record(result: RawLinterResult): void;
-    scan(): this;
-    getResults(): LinterResult[];
-}
-
-declare interface LinterResult {
-    level: LinterResultLevel;
-    message: string;
-    from: number;
-    to: number;
-    fix?: FixFn;
-    fixMessage?: string;
-}
-
-declare type LinterResultLevel = 'warning' | 'error';
-
 export declare const listTileEmits: {
     changeActive: (isActive: boolean) => boolean;
 };
@@ -1500,12 +1484,6 @@ export declare function paginationProps(): {
 
 declare type PrefixedEventName<S extends string> = `on${Capitalize<S>}`;
 
-export declare class Punctuation extends LinterPlugin {
-    regex: RegExp;
-    fix(replacement: any): ({ state, dispatch }: EditorView, issue: LinterResult) => void;
-    scan(): this;
-}
-
 export declare type RawBreadcrumbsItem = string | BreadcrumbsItem;
 
 declare type RawGridValue<T extends number | string = number | string> = T | Partial<Record<MediaMatchKey, T>> | undefined;
@@ -1516,8 +1494,9 @@ export declare type RawIconProp = IconName | EmptyIconSymbol | ToggleableIconHoo
 
 export declare function rawIconProp(): PropType<RawIconProp>;
 
-declare interface RawLinterResult extends Omit<LinterResult, 'level'> {
-    level?: LinterResultLevel;
+declare interface RawLinterResult extends Omit<WysiwygLinterResult, 'level' | 'fix' | 'id'> {
+    level?: WysiwygLinterResultLevel;
+    fix?: WysiwygLinterFixer | WysiwygLinterFixer[];
 }
 
 export declare type RawVButtonIcon = IconName | VButtonIcon;
@@ -1543,7 +1522,7 @@ export declare type RawVuiServiceUISettings = Partial<VuiServiceUISettings>;
 
 export declare type RawWysiwygEditorTool = WysiwygEditorTool | WysiwygEditorToolFactory<any>;
 
-export declare type RawWysiwygExtension = AnyExtension | WysiwygExtensionFactory;
+export declare type RawWysiwygExtension<Options = any, Storage = any> = WysiwygExtensionSource<Options, Storage> | CreatedWysiwygExtension<Options, Storage>;
 
 declare type RecursiveArray<T> = T | RecursiveArray<T>[];
 
@@ -9588,6 +9567,7 @@ export declare class VuiService {
     alert(...args: Parameters<VueStackService['alert']>): Promise<any>;
     confirm(...args: Parameters<VueStackService['confirm']>): Promise<any>;
     snackbar(...args: Parameters<VueStackService['snackbar']>): Promise<any>;
+    menu(...args: Parameters<VueStackService['menu']>): Promise<any>;
     formPrompt<T extends {
         [key: string]: any;
     } = {
@@ -9636,6 +9616,7 @@ export declare interface VuiServiceUISettings {
     primaryScope: ScopeName;
     plainVariant: ColorVariant;
     containedVariant: ColorVariant;
+    warningScope: ScopeName;
     errorScope: ScopeName;
     buttonDefault: {
         color: ScopeName;
@@ -9667,7 +9648,7 @@ export declare type VuiVNodeResolver = () => VNodeChild;
 
 export declare const VWysiwygEditor: DefineComponent<{
     extensions: {
-        type: PropType<RawWysiwygExtension[]>;
+        type: PropType<RawWysiwygExtension<any, any>[]>;
         default: () => never[];
     };
     tools: {
@@ -9798,7 +9779,7 @@ export declare const VWysiwygEditor: DefineComponent<{
     blur: (ev: FocusEvent) => boolean;
 }, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
     extensions: {
-        type: PropType<RawWysiwygExtension[]>;
+        type: PropType<RawWysiwygExtension<any, any>[]>;
         default: () => never[];
     };
     tools: {
@@ -9905,7 +9886,7 @@ export declare const VWysiwygEditor: DefineComponent<{
     hiddenInfo: boolean;
     errors: FormNodeError[];
     loading: boolean;
-    extensions: RawWysiwygExtension[];
+    extensions: RawWysiwygExtension<any, any>[];
     tools: RawWysiwygEditorTool[];
     floatingToolbar: boolean;
     disabledMinHeight: boolean;
@@ -9914,6 +9895,18 @@ export declare const VWysiwygEditor: DefineComponent<{
 
 export declare const WysiwygBulletListTool: WysiwygEditorToolFactory<BulletListOptions>;
 
+export declare const WysiwygColorExtension: Extension_2<WysiwygColorOptions, any>;
+
+export declare interface WysiwygColorItem {
+    key?: string | number;
+    name?: VNodeChild | ((vui: VuiService) => VNodeChild);
+    color: string | null;
+}
+
+export declare type WysiwygColorOptions = {
+    types: string[];
+};
+
 export declare interface WysiwygEditorContext {
     editor: Editor;
     vui: VuiService;
@@ -9930,7 +9923,9 @@ export declare interface WysiwygEditorEventsOptions extends Partial<Pick<EditorO
 
 export declare class WysiwygEditorInitializeContext {
     readonly listeners: WysiwygEditorEventsBucket;
-    constructor(opts?: WysiwygEditorEventsOptions);
+    private readonly _vui;
+    get vui(): VuiService;
+    constructor(vuiGetter: () => VuiService, opts?: WysiwygEditorEventsOptions);
     on<EV extends WysiwygEditorEvent>(ev: EV, handler: NonNullable<WysiwygEditorEventsOptions[PrefixedEventName<EV>]>): () => void;
     off<EV extends WysiwygEditorEvent>(ev: EV, handler: NonNullable<WysiwygEditorEventsOptions[PrefixedEventName<EV>]>): void;
     editorOptions(): WysiwygEditorEventsOptions;
@@ -9940,7 +9935,7 @@ export declare type WysiwygEditorPrefixedEvent = PrefixedEventName<WysiwygEditor
 
 export declare interface WysiwygEditorTool {
     key: string;
-    icon: IconName | ((ctx: WysiwygEditorContext) => IconName);
+    icon: IconName | ((ctx: WysiwygEditorContext) => IconName | (() => VNodeChild));
     active?: boolean | ((ctx: WysiwygEditorContext) => boolean);
     disabled?: boolean | ((ctx: WysiwygEditorContext) => boolean);
     onClick: (ctx: WysiwygEditorContext, ev: MouseEvent) => any;
@@ -9950,7 +9945,9 @@ export declare interface WysiwygEditorTool {
 
 export declare type WysiwygEditorToolFactory<Options = void> = (vui: VuiService, options?: Options) => WysiwygEditorTool | WysiwygEditorTool[];
 
-export declare type WysiwygExtensionFactory = (ctx: WysiwygEditorInitializeContext) => AnyExtension;
+export declare type WysiwygExtensionFactory<Options = any, Storage = any> = (ctx: WysiwygEditorInitializeContext) => Extension<Options, Storage> | Node_2<Options, Storage> | Mark<Options, Storage>;
+
+export declare type WysiwygExtensionSource<Options = any, Storage = any> = Extension<Options, Storage> | Node_2<Options, Storage> | Mark<Options, Storage> | WysiwygExtensionFactory<Options, Storage>;
 
 export declare const WysiwygFormatBoldTool: WysiwygEditorToolFactory<BoldOptions>;
 
@@ -9962,9 +9959,59 @@ export declare const WysiwygHistoryTool: WysiwygEditorToolFactory<HistoryOptions
 
 export declare const WysiwygLinkTool: WysiwygEditorToolFactory<LinkOptions>;
 
-export declare const WysiwygOrderedListTool: WysiwygEditorToolFactory<OrderedListOptions>;
+export declare const WysiwygLinter: CreatedWysiwygExtension<WysiwygLinterOptions, WysiwygLinterStorage>;
+
+export declare function WysiwygLinterBadWords(words: string[]): typeof WysiwygLinterPlugin;
+
+declare interface WysiwygLinterFixer {
+    message: WysiwygLinterFixMessage;
+    handler: WysiwygLinterFixFn;
+}
+
+declare type WysiwygLinterFixFn = (view: EditorView, issue: WysiwygLinterResult) => any;
 
-export declare const WysiwygTextColorTool: WysiwygEditorToolFactory;
+declare type WysiwygLinterFixMessage = string | (() => VNodeChild);
+
+export declare class WysiwygLinterHeadingLevel extends WysiwygLinterPlugin {
+    fixHeader(level: number): ({ state, dispatch }: EditorView, issue: WysiwygLinterResult) => void;
+    scan(): this;
+}
+
+export declare interface WysiwygLinterOptions {
+    plugins: Array<typeof WysiwygLinterPlugin>;
+}
+
+export declare class WysiwygLinterPlugin {
+    protected doc: Node_3;
+    private results;
+    constructor(doc: Node_3);
+    record(result: RawLinterResult): void;
+    scan(): this;
+    getResults(): WysiwygLinterResult[];
+}
+
+export declare class WysiwygLinterPunctuation extends WysiwygLinterPlugin {
+    regex: RegExp;
+    fix(replacement: any): ({ state, dispatch }: EditorView, issue: WysiwygLinterResult) => void;
+    scan(): this;
+}
+
+declare interface WysiwygLinterResult {
+    id: string;
+    level: WysiwygLinterResultLevel;
+    message: WysiwygLinterFixMessage;
+    from: number;
+    to: number;
+    fix: WysiwygLinterFixer[];
+}
+
+declare type WysiwygLinterResultLevel = 'warning' | 'error';
+
+declare interface WysiwygLinterStorage {
+    issues: WysiwygLinterResult[];
+}
+
+export declare const WysiwygOrderedListTool: WysiwygEditorToolFactory<OrderedListOptions>;
 
 
 export * from "@fastkit/vue-kit";