@fastkit/vui 0.6.37 → 0.6.41

package/src/components/VToolbar/VToolbarEdge.scss

@@ -0,0 +1,27 @@
+// @use '../../styles/core.scss';
+
+.v-toolbar-edge {
+  display: flex;
+  flex: 0 0;
+  align-items: center;
+  align-self: stretch;
+
+  &:empty,
+  &--empty {
+    display: none;
+  }
+
+  $my-negative-margin: calc(-1 * var(--root-em) * 0.75); // -12
+  $my-margin: calc(var(--root-em) * 0.75); // -12
+
+  &--start {
+    margin-right: $my-margin;
+    margin-left: $my-negative-margin;
+  }
+
+  &--end {
+    padding-left: $my-margin;
+    margin-right: $my-negative-margin;
+    margin-left: auto;
+  }
+}

package/src/components/VToolbar/VToolbarEdge.tsx

@@ -0,0 +1,35 @@
+import './VToolbarEdge.scss';
+import { defineComponent, computed, PropType } from 'vue';
+import { renderSlotOrEmpty } from '@fastkit/vue-utils';
+
+export type VToolbarEdgeEdge = 'start' | 'end';
+
+export const VToolbarEdge = defineComponent({
+  name: 'VToolbarEdge',
+  props: {
+    edge: {
+      type: String as PropType<VToolbarEdgeEdge>,
+      required: true,
+    },
+  },
+  setup(props, ctx) {
+    const edge = computed(() => props.edge);
+    return () => {
+      const children = renderSlotOrEmpty(ctx.slots, 'default');
+      const hasChildren = !!children && children.length > 0;
+
+      return (
+        <div
+          class={[
+            'v-toolbar-edge',
+            `v-toolbar-edge--${edge.value}`,
+            {
+              [`v-toolbar-edge--empty`]: !hasChildren,
+            },
+          ]}>
+          {children}
+        </div>
+      );
+    };
+  },
+});

package/src/components/VToolbar/VToolbarMenu.scss

@@ -0,0 +1,7 @@
+// @use '../../styles/core.scss';
+
+.v-toolbar-menu {
+  height: 100%;
+  margin: 0;
+  box-shadow: none;
+}

package/src/components/VToolbar/VToolbarMenu.tsx

@@ -0,0 +1,26 @@
+import './VToolbarMenu.scss';
+import { defineComponent } from 'vue';
+import { renderSlotOrEmpty } from '@fastkit/vue-utils';
+import { VButton, vueButtonProps } from '../VButton';
+import { useVui } from '../../injections';
+
+export type VToolbarMenuEdge = 'start' | 'end';
+
+export const VToolbarMenu = defineComponent({
+  name: 'VToolbarMenu',
+  inheritAttrs: false,
+  props: {} as typeof vueButtonProps,
+  setup(props, ctx) {
+    const vui = useVui();
+    const plain = vui.setting('plainVariant');
+
+    return () => {
+      const variant = props.variant || plain;
+      return (
+        <VButton {...ctx.attrs} variant={variant} class={['v-toolbar-menu']}>
+          {renderSlotOrEmpty(ctx.slots)}
+        </VButton>
+      );
+    };
+  },
+});

package/src/components/VToolbar/VToolbarTitle.scss

@@ -0,0 +1,22 @@
+// @use '../../styles/core.scss';
+
+.v-toolbar-title {
+  display: flex;
+  flex-grow: 1;
+  margin: 0;
+  // font-size: var(--typo-h3-size);
+  font-size: 1.25rem;
+  // font-weight: var(--typo-h3-weight);
+  font-weight: 400;
+  // font-size: 16px;
+  // font-weight: 500;
+  line-height: 1;
+
+  // font-weight: 500;
+  // font-size: 1.25rem;
+  // line-height: 1.6;
+  // letter-spacing: 0.0075em;
+  white-space: nowrap;
+
+  // @include core.typo('h2');
+}

package/src/components/VToolbar/VToolbarTitle.tsx

@@ -0,0 +1,25 @@
+import './VToolbarTitle.scss';
+import { defineComponent, computed } from 'vue';
+import { renderSlotOrEmpty } from '@fastkit/vue-utils';
+
+export const VToolbarTitle = defineComponent({
+  name: 'VToolbarTitle',
+  props: {
+    tag: {
+      type: String,
+      default: 'span',
+    },
+  },
+  setup(props, ctx) {
+    const _TagName = computed(() => props.tag);
+    return () => {
+      const TagName = _TagName.value as 'span';
+
+      return (
+        <TagName class="v-toolbar-title">
+          {renderSlotOrEmpty(ctx.slots, 'default')}
+        </TagName>
+      );
+    };
+  },
+});

package/src/components/VToolbar/index.ts

@@ -0,0 +1,4 @@
+export * from './VToolbar';
+export * from './VToolbarMenu';
+export * from './VToolbarEdge';
+export * from './VToolbarTitle';

package/src/components/VWysiwygEditor/VWysiwygEditor.scss

@@ -0,0 +1,60 @@
+@use '../../styles/core.scss';
+
+.v-wysiwyg-editor {
+  &--sm {
+    --min-height: var(--wysiwyg-min-height-sm);
+    --max-height: var(--wysiwyg-max-height-sm);
+  }
+
+  &--md {
+    --min-height: var(--wysiwyg-min-height-md);
+    --max-height: var(--wysiwyg-max-height-md);
+  }
+
+  &--lg {
+    --min-height: var(--wysiwyg-min-height-lg);
+    --max-height: var(--wysiwyg-max-height-lg);
+  }
+
+  &__wrapper {
+    position: relative;
+  }
+
+  &__floating-toolbar {
+    position: absolute;
+    right: 0;
+    bottom: 100%;
+    z-index: 1;
+  }
+
+  &__body {
+    position: relative;
+    max-height: var(--max-height);
+    // max-height: 200px;
+    overflow: auto;
+  }
+
+  &__input {
+    cursor: text;
+
+    &__element {
+      width: 100%;
+      min-width: 0;
+      padding: 8px 0;
+      margin: 0;
+    }
+
+    &__prose {
+      min-height: var(--min-height);
+      outline: none;
+    }
+  }
+
+  &--disabled-min-heihgt &__input__prose {
+    min-height: 0;
+  }
+
+  &--disabled-max-heihgt &__body {
+    max-height: none;
+  }
+}

package/src/components/VWysiwygEditor/VWysiwygEditor.tsx

@@ -0,0 +1,293 @@
+import './VWysiwygEditor.scss';
+import { defineComponent, Fragment, PropType, computed, ref, watch } from 'vue';
+import {
+  createFormControlProps,
+  FormControlSlots,
+  defineSlotsProps,
+} from '@fastkit/vue-kit';
+import { VFormControl } from '../VFormControl';
+import {
+  VControlField,
+  createControlFieldProps,
+  InputBoxSlots,
+} from '../VControlField';
+import { IconName } from '../VIcon';
+import {
+  createTextableProps,
+  createTextableEmits,
+  TextableControl,
+} from '@fastkit/vue-form-control';
+import {
+  createControlProps,
+  useControl,
+  createControlFieldProviderProps,
+  useControlField,
+} from '../../composables';
+import { VTextCounter } from '../VTextCounter';
+import { VUI_WYSIWYG_EDITOR_SYMBOL, useVui } from '../../injections';
+import {
+  EditorContent,
+  useEditor,
+  BubbleMenu,
+  FocusPosition,
+} from '@tiptap/vue-3';
+import StarterKit from '@tiptap/starter-kit';
+import { VButton, VButtonGroup } from '../VButton';
+import {
+  RawWysiwygEditorTool,
+  resolveRawWysiwygEditorTools,
+  WysiwygEditorContext,
+} from './schemes';
+
+export const VWysiwygEditor = defineComponent({
+  name: 'VWysiwygEditor',
+  props: {
+    // ...props,
+    ...createTextableProps(),
+    ...createFormControlProps(),
+    ...createControlFieldProps(),
+    ...createControlFieldProviderProps(),
+    ...createControlProps(),
+    ...defineSlotsProps<FormControlSlots & InputBoxSlots>(),
+    tools: {
+      type: Array as PropType<RawWysiwygEditorTool[]>,
+      default: () => [],
+    },
+    floatingToolbar: Boolean,
+    disabledMinHeight: Boolean,
+    disabledMaxHeight: Boolean,
+  },
+  emits: {
+    ...createTextableEmits(),
+  },
+  setup(props, ctx) {
+    const vui = useVui();
+
+    const textRef = ref('');
+    const toolButtonActiveColor = vui.setting('primaryScope');
+
+    const wysiwygSettings = computed(() =>
+      resolveRawWysiwygEditorTools(props.tools, vui),
+    );
+
+    const control = useControl(props);
+    useControlField(props);
+
+    const inputControl = new TextableControl(props, ctx as any, {
+      nodeType: VUI_WYSIWYG_EDITOR_SYMBOL,
+      validationValue: () => textRef.value,
+    });
+
+    const extensions = [
+      StarterKit.configure({
+        bold: false,
+        bulletList: false,
+        orderedList: false,
+        history: false,
+        italic: false,
+      }),
+      ...wysiwygSettings.value.extensions,
+    ];
+
+    const updateEditable = () => {
+      if (!editor.value) return;
+      editor.value.setEditable(inputControl.canOperation);
+    };
+
+    watch(() => inputControl.canOperation, updateEditable);
+
+    watch(
+      () => props.modelValue,
+      (modelValue) => {
+        editor.value &&
+          editor.value.commands.setContent(
+            modelValue == null ? '' : modelValue,
+          );
+      },
+    );
+
+    const editor = useEditor({
+      onCreate: ({ editor }) => {
+        textRef.value = editor.getText();
+        updateEditable();
+      },
+      onFocus: (ctx) => {
+        inputControl.focusHandler(ctx.event);
+      },
+      onBlur: (ctx) => {
+        inputControl.blurHandler(ctx.event);
+      },
+      onUpdate: (ev) => {
+        inputControl.value = ev.editor.getHTML();
+        textRef.value = ev.editor.getText();
+      },
+      autofocus: props.autofocus,
+      content: props.modelValue,
+      extensions,
+      editorProps: {
+        attributes: {
+          class: 'v-wysiwyg-editor__input__prose',
+        },
+      },
+    });
+
+    // editor.value.state.doc.content
+
+    const focus = (
+      position?: FocusPosition,
+      options?: {
+        scrollIntoView?: boolean | undefined;
+      },
+    ) => {
+      return editor.value.chain().focus(position, options);
+    };
+
+    const blur = () => {
+      return editor.value.chain().blur();
+    };
+
+    const wysiwygContext = computed<WysiwygEditorContext>(() => ({
+      vui,
+      editor: editor.value,
+    }));
+
+    const createTools = (bubbleMenu = false) => {
+      const { value: settings } = wysiwygSettings;
+      const { value: context } = wysiwygContext;
+      const tools = bubbleMenu
+        ? settings.tools.filter((t) => !!t.floating)
+        : settings.tools;
+      const _editor = editor.value;
+      const variant = vui.setting(
+        bubbleMenu ? 'containedVariant' : 'plainVariant',
+      );
+
+      return (
+        <VButtonGroup
+          class={{
+            'v-wysiwyg-editor__floating-toolbar': props.floatingToolbar,
+          }}
+          variant={variant}>
+          {tools.map(({ key, icon, onClick, disabled, active }) => {
+            const isActive =
+              !!_editor && resolveContextableValue(context, active);
+            const isDisabled =
+              !inputControl.canOperation ||
+              (!!_editor && resolveContextableValue(context, disabled));
+            let iconName: IconName | undefined;
+
+            if (typeof icon === 'function') {
+              if (_editor) {
+                iconName = icon(context);
+              }
+            } else {
+              iconName = icon;
+            }
+
+            if (!iconName) return;
+
+            return (
+              <VButton
+                tabindex={-1}
+                key={key}
+                icon={iconName}
+                onClick={(ev) => onClick(context, ev)}
+                color={isActive ? toolButtonActiveColor : undefined}
+                disabled={isDisabled}
+              />
+            );
+          })}
+        </VButtonGroup>
+      );
+    };
+
+    return {
+      editor,
+      ...inputControl.expose(),
+      ...control,
+      focus,
+      blur,
+      createTools,
+    };
+  },
+  render() {
+    return (
+      <VFormControl
+        nodeControl={this.nodeControl}
+        focused={this.nodeControl.focused}
+        class={[
+          'v-wysiwyg-editor',
+          this.classes,
+          `v-wysiwyg-editor--${this.size}`,
+          {
+            'v-wysiwyg-editor--disabled-min-heihgt': this.disabledMinHeight,
+            'v-wysiwyg-editor--disabled-max-heihgt': this.disabledMaxHeight,
+          },
+        ]}
+        label={this.label}
+        hint={this.hint}
+        hiddenInfo={this.hiddenInfo}
+        onClickLabel={(ev) => {
+          this.focus('start', { scrollIntoView: true });
+        }}
+        v-slots={{
+          ...this.$slots,
+          default: () => {
+            const { editor } = this;
+
+            return (
+              <div class="v-wysiwyg-editor__wrapper">
+                {!this.isReadonly && this.createTools()}
+                <div class="v-wysiwyg-editor__body">
+                  <VControlField
+                    class="v-wysiwyg-editor__input"
+                    autoHeight
+                    startAdornment={this.startAdornment}
+                    endAdornment={this.endAdornment}
+                    // onClickHost={(ev) => {
+                    //   this.focus();
+                    // }}
+                    v-slots={{
+                      ...this.$slots,
+                      default: () => {
+                        return (
+                          <Fragment>
+                            <EditorContent
+                              class="v-wysiwyg-editor__input__element wysiwyg"
+                              editor={editor}
+                            />
+                            {!this.floatingToolbar &&
+                              !!editor &&
+                              !this.isReadonly && (
+                                <BubbleMenu
+                                  class="v-wysiwyg-editor__bubble-menu"
+                                  editor={editor}>
+                                  {this.createTools(true)}
+                                </BubbleMenu>
+                              )}
+                          </Fragment>
+                        );
+                      },
+                    }}
+                  />
+                </div>
+              </div>
+            );
+          },
+          infoAppends: () => {
+            const { counterResult } = this;
+            if (!counterResult) return;
+            return <VTextCounter {...counterResult} />;
+          },
+        }}
+      />
+    );
+  },
+});
+
+function resolveContextableValue(
+  ctx: WysiwygEditorContext,
+  source?: boolean | ((ctx: WysiwygEditorContext) => boolean),
+) {
+  return typeof source === 'function' ? source(ctx) : source;
+}

package/src/components/VWysiwygEditor/index.ts

@@ -0,0 +1,2 @@
+export * from './VWysiwygEditor';
+export * from './tools';

package/src/components/VWysiwygEditor/schemes.ts

@@ -0,0 +1,65 @@
+import { type VuiService } from '../../service';
+import { type Editor, type Extensions } from '@tiptap/vue-3';
+import { type IconName } from '../VIcon';
+
+export interface WysiwygEditorContext {
+  editor: Editor;
+  vui: VuiService;
+}
+
+export interface WysiwygEditorTool {
+  key: string;
+  icon: IconName | ((ctx: WysiwygEditorContext) => IconName);
+  active?: boolean | ((ctx: WysiwygEditorContext) => boolean);
+  disabled?: boolean | ((ctx: WysiwygEditorContext) => boolean);
+  onClick: (ctx: WysiwygEditorContext, ev: MouseEvent) => any;
+  floating?: boolean;
+  extensions?: Extensions;
+}
+
+export type WysiwygEditorToolFactory<Options = void> = (
+  vui: VuiService,
+  options?: Options,
+) => WysiwygEditorTool | WysiwygEditorTool[];
+
+export type RawWysiwygEditorTool =
+  | WysiwygEditorTool
+  | WysiwygEditorToolFactory<any>;
+
+function resolveRawWysiwygEditorTool(
+  raw: RawWysiwygEditorTool,
+  vui: VuiService,
+) {
+  return typeof raw === 'function' ? raw(vui) : raw;
+}
+
+export interface ResolvedWysiwygEditorSettings {
+  tools: WysiwygEditorTool[];
+  extensions: Extensions;
+}
+
+export function resolveRawWysiwygEditorTools(
+  raws: RawWysiwygEditorTool[],
+  vui: VuiService,
+): ResolvedWysiwygEditorSettings {
+  const tools: WysiwygEditorTool[] = [];
+  const extensions: Extensions = [];
+
+  raws.forEach((raw) => {
+    let resolved = resolveRawWysiwygEditorTool(raw, vui);
+    if (!Array.isArray(resolved)) {
+      resolved = [resolved];
+    }
+    resolved.forEach((tool) => {
+      tools.push(tool);
+      if (tool.extensions) {
+        extensions.push(...tool.extensions);
+      }
+    });
+  });
+
+  return {
+    tools,
+    extensions,
+  };
+}

package/src/components/VWysiwygEditor/tools/bullet-list.ts

@@ -0,0 +1,18 @@
+import { WysiwygEditorToolFactory, WysiwygEditorTool } from '../schemes';
+import { BulletList, BulletListOptions } from '@tiptap/extension-bullet-list';
+
+export const WysiwygBulletListTool: WysiwygEditorToolFactory<
+  BulletListOptions
+> = (vui, options) => {
+  const tool: WysiwygEditorTool = {
+    key: 'bulletList',
+    icon: vui.icon('editorformatListBulleted'),
+    active: ({ editor }) => editor.isActive('bulletList'),
+    onClick: ({ editor }) => {
+      editor.chain().focus().toggleBulletList().run();
+    },
+    floating: true,
+    extensions: [BulletList.configure(options)],
+  };
+  return tool;
+};

package/src/components/VWysiwygEditor/tools/format-bold.ts

@@ -0,0 +1,19 @@
+import { WysiwygEditorToolFactory, WysiwygEditorTool } from '../schemes';
+import { Bold, BoldOptions } from '@tiptap/extension-bold';
+
+export const WysiwygFormatBoldTool: WysiwygEditorToolFactory<BoldOptions> = (
+  vui,
+  options,
+) => {
+  const tool: WysiwygEditorTool = {
+    key: 'formatBold',
+    icon: vui.icon('editorformatBold'),
+    active: ({ editor }) => editor.isActive('bold'),
+    onClick: ({ editor }) => {
+      editor.chain().focus().toggleBold().run();
+    },
+    floating: true,
+    extensions: [Bold.configure(options)],
+  };
+  return tool;
+};

package/src/components/VWysiwygEditor/tools/format-italic.ts

@@ -0,0 +1,18 @@
+import { WysiwygEditorToolFactory, WysiwygEditorTool } from '../schemes';
+import { Italic, ItalicOptions } from '@tiptap/extension-italic';
+
+export const WysiwygFormatItalicTool: WysiwygEditorToolFactory<
+  ItalicOptions
+> = (vui, options) => {
+  const tool: WysiwygEditorTool = {
+    key: 'formatItalic',
+    icon: vui.icon('editorformatItalic'),
+    active: ({ editor }) => editor.isActive('italic'),
+    onClick: ({ editor }) => {
+      editor.chain().focus().toggleItalic().run();
+    },
+    floating: true,
+    extensions: [Italic.configure(options)],
+  };
+  return tool;
+};

package/src/components/VWysiwygEditor/tools/format-underline.ts

@@ -0,0 +1,18 @@
+import { WysiwygEditorToolFactory, WysiwygEditorTool } from '../schemes';
+import { Underline, UnderlineOptions } from '@tiptap/extension-underline';
+
+export const WysiwygFormatUnderlineTool: WysiwygEditorToolFactory<
+  UnderlineOptions
+> = (vui, options) => {
+  const tool: WysiwygEditorTool = {
+    key: 'formatUnderline',
+    icon: vui.icon('editorformatUnderline'),
+    active: ({ editor }) => editor.isActive('underline'),
+    onClick: ({ editor }) => {
+      editor.chain().focus().toggleUnderline().run();
+    },
+    floating: true,
+    extensions: [Underline.configure(options)],
+  };
+  return tool;
+};

package/src/components/VWysiwygEditor/tools/history.ts

@@ -0,0 +1,26 @@
+import { WysiwygEditorToolFactory, WysiwygEditorTool } from '../schemes';
+import { History, HistoryOptions } from '@tiptap/extension-history';
+
+export const WysiwygHistoryTool: WysiwygEditorToolFactory<HistoryOptions> = (
+  vui,
+  options,
+) => {
+  const undo: WysiwygEditorTool = {
+    key: 'history-undo',
+    icon: vui.icon('editorUndo'),
+    disabled: ({ editor }) => !editor.can().undo(),
+    onClick: ({ editor }) => {
+      editor.chain().focus().undo().run();
+    },
+    extensions: [History.configure(options)],
+  };
+  const redo: WysiwygEditorTool = {
+    key: 'history-redo',
+    icon: vui.icon('editorRedo'),
+    disabled: ({ editor }) => !editor.can().redo(),
+    onClick: ({ editor }) => {
+      editor.chain().focus().redo().run();
+    },
+  };
+  return [undo, redo];
+};

package/src/components/VWysiwygEditor/tools/index.ts

@@ -0,0 +1,8 @@
+export * from './bullet-list';
+export * from './format-bold';
+export * from './format-italic';
+export * from './format-underline';
+export * from './history';
+export * from './link';
+export * from './ordered-list';
+export * from './text-color';