@fastkit/vui 0.7.57 → 0.7.64

package/src/components/VWysiwygEditor/tools/color.scss

@@ -0,0 +1,140 @@
+: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;
+
+    &__bar {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      display: block;
+      height: 2px;
+      background: currentColor;
+    }
+  }
+
+  &__menu {
+    .v-dialog__content {
+      min-width: 0;
+    }
+
+    .v-dialog__body {
+      padding: 2px;
+    }
+  }
+
+  &__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;
+
+    &--with-label {
+      display: flex;
+      flex-direction: column;
+      // flex-wrap: nowrap;
+      align-items: flex-start;
+      max-width: none;
+      padding: 2px;
+    }
+  }
+
+  &__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;
+    // margin: 2px;
+    cursor: pointer;
+    background: transparent;
+    border: 0;
+    border-radius: 0;
+    outline: 0;
+    appearance: none;
+
+    &__color {
+      position: relative;
+      flex: 0 0 var(--item-size);
+      width: var(--item-size);
+      height: var(--item-size);
+
+      &::before {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        display: block;
+        content: '';
+        background: currentColor;
+        border: solid 1px transparent;
+        transition: all 0.15s;
+      }
+    }
+
+    &__name {
+      position: relative;
+      padding: 0 8px;
+      font-size: 12px;
+      white-space: nowrap;
+    }
+
+    &:hover &__color,
+    &:focus &__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);
+      }
+    }
+  }
+
+  &__items--with-label &__item {
+    flex-basis: auto;
+    width: auto;
+    width: 100%;
+
+    &::before {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      display: block;
+      content: '';
+      background: currentColor;
+      opacity: 0;
+      transition: opacity 0.15s;
+    }
+
+    &:hover,
+    &:focus {
+      &::before {
+        opacity: 0.1;
+      }
+    }
+
+    & + .v-wysiwyg-color-tool__item {
+      margin-top: 2px;
+    }
+  }
+}

package/src/components/VWysiwygEditor/tools/color.tsx

@@ -0,0 +1,90 @@
+import './color.scss';
+
+import { VNodeChild } from 'vue';
+import { WysiwygColorExtension } from '../extensions';
+import { type VuiService } from '../../../service';
+import { WysiwygEditorToolFactory, WysiwygEditorTool } from '../schemes';
+import TextStyle from '@tiptap/extension-text-style';
+import { VIcon } from '../../VIcon';
+
+export interface WysiwygColorItem {
+  key?: string | number;
+  name?: VNodeChild | ((vui: VuiService) => VNodeChild);
+  color: string | null;
+}
+
+export interface CreateWysiwygColorToolOptions {
+  items: WysiwygColorItem[];
+  withLabel?: boolean;
+}
+
+export function createWysiwygColorTool(opts: CreateWysiwygColorToolOptions) {
+  const WysiwygColorTool: WysiwygEditorToolFactory = (vui) => {
+    const tool: WysiwygEditorTool = {
+      key: 'textColor',
+      // active: ({ editor }) => editor.isActive('textStyle'),
+      icon:
+        ({ editor }) =>
+        () => {
+          const color: string | undefined =
+            editor.getAttributes('textStyle').color;
+          const style = { color };
+          return (
+            <span class="v-wysiwyg-color-tool__button">
+              <VIcon
+                class="v-wysiwyg-color-tool__button__icon"
+                name={vui.icon('editorTextColor')}
+              />
+              <span class="v-wysiwyg-color-tool__button__bar" style={style} />
+            </span>
+          );
+        },
+      onClick: (ctx, ev) => {
+        ctx.vui.menu({
+          class: 'v-wysiwyg-color-tool__menu',
+          activator: ev,
+          content: (stack) => (
+            <div
+              class={[
+                'v-wysiwyg-color-tool__items',
+                { 'v-wysiwyg-color-tool__items--with-label': opts.withLabel },
+              ]}>
+              {opts.items.map((item, index) => (
+                <button
+                  key={item.key == null ? index : item.key}
+                  class="v-wysiwyg-color-tool__item"
+                  type="button"
+                  onClick={() => {
+                    const { color } = item;
+                    let command = ctx.editor.chain().focus();
+                    if (color) {
+                      command = command.setColor(color);
+                    } else {
+                      command = command.unsetColor();
+                    }
+                    command.run();
+                    stack.close();
+                  }}>
+                  <span
+                    class="v-wysiwyg-color-tool__item__color"
+                    style={item.color ? { color: item.color } : {}}
+                  />
+                  {opts.withLabel && (
+                    <span class="v-wysiwyg-color-tool__item__name">
+                      {item.name}
+                    </span>
+                  )}
+                </button>
+              ))}
+            </div>
+          ),
+        });
+      },
+      floating: true,
+      extensions: [TextStyle, WysiwygColorExtension],
+    };
+    return tool;
+  };
+
+  return WysiwygColorTool;
+}

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

@@ -5,4 +5,4 @@ export * from './format-underline';
 export * from './history';
 export * from './link';
 export * from './ordered-list';
-export * from './text-color';
+export * from './color';

package/src/service.tsx

@@ -40,6 +40,7 @@ export interface VuiServiceUISettings {
   primaryScope: ScopeName;
   plainVariant: ColorVariant;
   containedVariant: ColorVariant;
+  warningScope: ScopeName;
   errorScope: ScopeName;
   buttonDefault: {
     color: ScopeName;
@@ -258,6 +259,10 @@ export class VuiService {
     return this.stack.snackbar(...args);
   }
 
+  menu(...args: Parameters<VueStackService['menu']>) {
+    return this.stack.menu(...args);
+  }
+
   formPrompt<T extends { [key: string]: any } = { [key: string]: any }>(
     settings: VuiFormPromptSettings<T>,
     slot: (

package/src/tool/vite-plugin.ts

@@ -143,6 +143,7 @@ export function viteVuiPlugin(
       primaryScope: 'primary' as any,
       plainVariant: 'plain' as any,
       containedVariant: 'contained' as any,
+      warningScope: 'warning' as any,
       errorScope: 'error' as any,
       buttonDefault: {
         color: 'base' as any,

package/src/components/VWysiwygEditor/tools/text-color.ts

@@ -1,14 +0,0 @@
-import { WysiwygEditorToolFactory, WysiwygEditorTool } from '../schemes';
-
-export const WysiwygTextColorTool: WysiwygEditorToolFactory = (vui) => {
-  const tool: WysiwygEditorTool = {
-    key: 'textColor',
-    icon: vui.icon('editorTextColor'),
-    // icon: (gen) => vui.icon('editorTextColor'),
-    onClick: (ctx) => {
-      ctx.vui.alert('ok');
-    },
-    floating: true,
-  };
-  return tool;
-};