@sepveneto/free-dom 0.10.1 → 0.11.1

package/dist/index.css

@@ -1,70 +1,32 @@
-/* ../../../../../../../tmp/tmp-1900-VctnOMvoTCw3/core/src/style/index.css */
+/* ../../../../../../../tmp/tmp-1985-FkdDer0n5Q4M/core/src/style/index.css */
 :root {
-  --vv-free-dom--theme: #4089ef;
+  --vv-free-dom--theme: rgb(64, 137, 239);
   --vv-free-dom--line: var(--vv-free-dom--theme);
   --free-dom-dot: var(--vv-free-dom--theme);
+  --vv-free-dom--selected: rgba(64, 137, 239, 0.3);
   --vv-grid-layout--placeholder: crimson;
   --vv-grid-layout--placeholder__opacity: 0.2;
 }
-.free-dom__widget-wrapper {
-  display: inline-block;
-  transition: border-color 0.3s;
-  box-sizing: content-box;
-  user-select: none;
-}
-.free-dom__widget-wrapper.is-absolute {
-  position: absolute;
-}
-.free-dom__widget-wrapper.is-active,
-.free-dom__widget-wrapper.can-move:hover {
-  border: 1px dashed var(--free-dom-dot-border);
-  cursor: move;
-}
-.free-dom__widget-wrapper.is-active .free-dom__widget-dot,
-.free-dom__widget-wrapper:hover .free-dom__widget-dot {
-  opacity: 1;
-}
-.free-dom__widget-wrapper.is-active .free-dom__resizable-handler,
-.free-dom__widget-wrapper:hover .free-dom__resizable-handler {
-  opacity: 1;
-}
-.free-dom__widget-wrapper.is-scale {
-  transition: none !important;
-}
-.free-dom__widget-dot {
-  opacity: 0;
-  position: absolute;
-  margin-left: calc(var(--free-dom-dot-size) / -2);
-  margin-top: calc(var(--free-dom-dot-size) / -2);
-  width: var(--free-dom-dot-size);
-  height: var(--free-dom-dot-size);
-  border-radius: 50%;
-  border: 1px solid var(--free-dom-dot-border);
-  background-color: var(--free-dom-dot-border);
-}
-.free-dom__resizable-handler {
-  opacity: 0;
-  position: absolute;
-  width: 6px;
-  height: 6px;
-}
-.free-dom__resizable-handler::after {
-  content: "";
-  position: absolute;
-  right: 3px;
-  bottom: 3px;
-  width: 5px;
-  height: 5px;
-  border-right: 2px solid rgba(0, 0, 0, 0.4);
-  border-bottom: 2px solid rgba(0, 0, 0, 0.4);
-}
 .vv-free-dom--draggable {
+  transition: background 0.3s;
   position: absolute;
   cursor: move;
 }
+.vv-free-dom--draggable:focus-visible {
+  outline: none;
+}
 .vv-free-dom--draggable__disabled {
   cursor: initial;
 }
+.vv-free-dom--draggable__selected,
+.vv-free-dom--draggable__selected:focus-visible {
+  background: var(--vv-free-dom--selected);
+  outline: 2px dashed var(--vv-free-dom--theme);
+}
+.vv-free-dom--draggable__selected::selection,
+.vv-free-dom--draggable__selected:focus-visible::selection {
+  background-color: transparent !important;
+}
 .vv-free-dom--line {
   background: var(--vv-free-dom--line);
   position: absolute;
@@ -97,6 +59,9 @@
 .vv-grid-layout--item {
   transition: transform 0.2s;
 }
+.vv-grid-layout--item:focus-visible {
+  outline: none;
+}
 .vv-grid-layout--item.vv-grid-layout--item__draggable {
   transition: none;
   z-index: 1;

package/dist/index.d.ts

@@ -121,6 +121,7 @@ declare const FreeScene: vue_demi.DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
+    keyboard: BooleanConstructor;
     handle: {
         type: StringConstructor;
         default: undefined;
@@ -147,10 +148,24 @@ declare const FreeScene: vue_demi.DefineComponent<{
         width: string;
         height: string;
     }>;
-    slots: vue_demi.ComputedRef<vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
-        [key: string]: any;
-    }>[] | undefined>;
-}, unknown, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{
+    selecting: vue_demi.Ref<boolean>;
+    mask: {
+        selecting: vue_demi.Ref<boolean>;
+        renderMask: () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
+            [key: string]: any;
+        }>;
+        handleMousedown: (evt: MouseEvent) => void;
+        handleMousemove: (evt: MouseEvent) => void;
+    };
+    history: {
+        state: vue_demi.Ref<{
+            canClear: boolean;
+        }>;
+        records: vue_demi.Ref<any>;
+        lastOperate: vue_demi.ComputedRef<any>;
+        push: (operate: any) => void;
+    };
+}, unknown, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<vue_demi.ExtractPropTypes<{
     width: {
         type: NumberConstructor;
         default: undefined;
@@ -171,6 +186,7 @@ declare const FreeScene: vue_demi.DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
+    keyboard: BooleanConstructor;
     handle: {
         type: StringConstructor;
         default: undefined;
@@ -198,6 +214,7 @@ declare const FreeScene: vue_demi.DefineComponent<{
     diff: number;
     showLine: boolean;
     transformScale: number;
+    keyboard: boolean;
     handle: string;
     minWidth: number;
     minHeight: number;
@@ -275,7 +292,7 @@ declare const GridLayout: vue_demi.DefineComponent<{
         getItem: (key: string) => GridLayoutItem | undefined;
         getFull: () => GridLayoutConfig;
     };
-}, unknown, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{
+}, unknown, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", vue_demi.PublicProps, Readonly<vue_demi.ExtractPropTypes<{
     modelValue: {
         type: vue_demi.PropType<GridLayoutConfig>;
         required: boolean;
@@ -347,6 +364,7 @@ declare const FreeDom: vue_demi.DefineComponent<{
         }>>;
         default: () => {};
     };
+    keyboard: BooleanConstructor;
     x: {
         type: NumberConstructor;
         default: number;
@@ -416,131 +434,34 @@ declare const FreeDom: vue_demi.DefineComponent<{
     };
     fixNonMonospaced: BooleanConstructor;
 }, {
-    domRef: vue_demi.Ref<({
-        $: vue_demi.ComponentInternalInstance;
-        $data: {};
-        $props: {
-            userSelectHack?: boolean | undefined;
-            startFn?: CoreFnCallback | undefined;
-            stopFn?: CoreFnCallback | undefined;
-            dragFn?: CoreFnCallback | undefined;
-            disabled?: boolean | undefined;
-            scale?: number | undefined;
-            key?: string | number | symbol | undefined;
-            style?: unknown;
-            ref?: vue_demi.VNodeRef | undefined;
-            class?: unknown;
-            ref_for?: boolean | undefined;
-            ref_key?: string | undefined;
-            onVnodeBeforeMount?: ((vnode: vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
-                [key: string]: any;
-            }>) => void) | ((vnode: vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
-                [key: string]: any;
-            }>) => void)[] | undefined;
-            onVnodeMounted?: ((vnode: vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
-                [key: string]: any;
-            }>) => void) | ((vnode: vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
-                [key: string]: any;
-            }>) => void)[] | undefined;
-            onVnodeBeforeUpdate?: ((vnode: vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
-                [key: string]: any;
-            }>, oldVNode: vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
-                [key: string]: any;
-            }>) => void) | ((vnode: vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
-                [key: string]: any;
-            }>, oldVNode: vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
-                [key: string]: any;
-            }>) => void)[] | undefined;
-            onVnodeUpdated?: ((vnode: vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
-                [key: string]: any;
-            }>, oldVNode: vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
-                [key: string]: any;
-            }>) => void) | ((vnode: vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
-                [key: string]: any;
-            }>, oldVNode: vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
-                [key: string]: any;
-            }>) => void)[] | undefined;
-            onVnodeBeforeUnmount?: ((vnode: vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
-                [key: string]: any;
-            }>) => void) | ((vnode: vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
-                [key: string]: any;
-            }>) => void)[] | undefined;
-            onVnodeUnmounted?: ((vnode: vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
-                [key: string]: any;
-            }>) => void) | ((vnode: vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
-                [key: string]: any;
-            }>) => void)[] | undefined;
+    selected: vue_demi.Ref<boolean>;
+    domRef: vue_demi.Ref<vue_demi.CreateComponentPublicInstance<Readonly<vue_demi.ExtractPropTypes<{
+        userSelectHack: {
+            type: BooleanConstructor;
+            default: boolean;
         };
-        $attrs: {
-            [x: string]: unknown;
+        startFn: {
+            type: vue_demi.PropType<CoreFnCallback>;
+            default: () => void;
         };
-        $refs: {
-            [x: string]: unknown;
+        stopFn: {
+            type: vue_demi.PropType<CoreFnCallback>;
+            default: () => void;
         };
-        $slots: Readonly<{
-            [name: string]: vue_demi.Slot<any> | undefined;
-        }>;
-        $root: vue_demi.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue_demi.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null;
-        $parent: vue_demi.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue_demi.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null;
-        $emit: (event: string, ...args: any[]) => void;
-        $el: any;
-        $options: vue_demi.ComponentOptionsBase<Readonly<vue_demi.ExtractPropTypes<{
-            userSelectHack: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            startFn: {
-                type: vue_demi.PropType<CoreFnCallback>;
-                default: () => void;
-            };
-            stopFn: {
-                type: vue_demi.PropType<CoreFnCallback>;
-                default: () => void;
-            };
-            dragFn: {
-                type: vue_demi.PropType<CoreFnCallback>;
-                default: () => void;
-            };
-            disabled: BooleanConstructor;
-            scale: {
-                type: NumberConstructor;
-                default: number;
-            };
-        }>>, {
-            only: vue_demi.ComputedRef<vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
-                [key: string]: any;
-            }> | undefined>;
-            coreRef: vue_demi.Ref<any>;
-            mousedownFn: (evt: MouseEvent) => void;
-            mouseupFn: (evt: MouseEvent) => void;
-        }, unknown, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, {
-            userSelectHack: boolean;
-            startFn: CoreFnCallback;
-            stopFn: CoreFnCallback;
-            dragFn: CoreFnCallback;
-            disabled: boolean;
-            scale: number;
-        }, {}, string, {}> & {
-            beforeCreate?: ((() => void) | (() => void)[]) | undefined;
-            created?: ((() => void) | (() => void)[]) | undefined;
-            beforeMount?: ((() => void) | (() => void)[]) | undefined;
-            mounted?: ((() => void) | (() => void)[]) | undefined;
-            beforeUpdate?: ((() => void) | (() => void)[]) | undefined;
-            updated?: ((() => void) | (() => void)[]) | undefined;
-            activated?: ((() => void) | (() => void)[]) | undefined;
-            deactivated?: ((() => void) | (() => void)[]) | undefined;
-            beforeDestroy?: ((() => void) | (() => void)[]) | undefined;
-            beforeUnmount?: ((() => void) | (() => void)[]) | undefined;
-            destroyed?: ((() => void) | (() => void)[]) | undefined;
-            unmounted?: ((() => void) | (() => void)[]) | undefined;
-            renderTracked?: (((e: vue_demi.DebuggerEvent) => void) | ((e: vue_demi.DebuggerEvent) => void)[]) | undefined;
-            renderTriggered?: (((e: vue_demi.DebuggerEvent) => void) | ((e: vue_demi.DebuggerEvent) => void)[]) | undefined;
-            errorCaptured?: (((err: unknown, instance: vue_demi.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue_demi.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null, info: string) => boolean | void) | ((err: unknown, instance: vue_demi.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue_demi.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null, info: string) => boolean | void)[]) | undefined;
+        dragFn: {
+            type: vue_demi.PropType<CoreFnCallback>;
+            default: () => void;
         };
-        $forceUpdate: () => void;
-        $nextTick: typeof vue_demi.nextTick;
-        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: vue_demi.WatchOptions<boolean> | undefined): vue_demi.WatchStopHandle;
-    } & Readonly<vue_demi.ExtractPropTypes<{
+        disabled: BooleanConstructor;
+        scale: {
+            type: NumberConstructor;
+            default: number;
+        };
+    }>>, {
+        coreRef: vue_demi.Ref<any>;
+        mousedownFn: (evt: MouseEvent) => void;
+        mouseupFn: (evt: MouseEvent) => void;
+    }, unknown, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps & Readonly<vue_demi.ExtractPropTypes<{
         userSelectHack: {
             type: BooleanConstructor;
             default: boolean;
@@ -562,14 +483,54 @@ declare const FreeDom: vue_demi.DefineComponent<{
             type: NumberConstructor;
             default: number;
         };
-    }>> & vue_demi.ShallowUnwrapRef<{
-        only: vue_demi.ComputedRef<vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
-            [key: string]: any;
-        }> | undefined>;
+    }>>, {
+        userSelectHack: boolean;
+        startFn: CoreFnCallback;
+        stopFn: CoreFnCallback;
+        dragFn: CoreFnCallback;
+        disabled: boolean;
+        scale: number;
+    }, true, {}, {}, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<vue_demi.ExtractPropTypes<{
+        userSelectHack: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        startFn: {
+            type: vue_demi.PropType<CoreFnCallback>;
+            default: () => void;
+        };
+        stopFn: {
+            type: vue_demi.PropType<CoreFnCallback>;
+            default: () => void;
+        };
+        dragFn: {
+            type: vue_demi.PropType<CoreFnCallback>;
+            default: () => void;
+        };
+        disabled: BooleanConstructor;
+        scale: {
+            type: NumberConstructor;
+            default: number;
+        };
+    }>>, {
         coreRef: vue_demi.Ref<any>;
         mousedownFn: (evt: MouseEvent) => void;
         mouseupFn: (evt: MouseEvent) => void;
-    }> & {} & vue_demi.ComponentCustomProperties & {}) | undefined>;
+    }, {}, {}, {}, {
+        userSelectHack: boolean;
+        startFn: CoreFnCallback;
+        stopFn: CoreFnCallback;
+        dragFn: CoreFnCallback;
+        disabled: boolean;
+        scale: number;
+    }> | undefined>;
     style: vue_demi.ComputedRef<{
         width: string;
         height: string;
@@ -581,9 +542,11 @@ declare const FreeDom: vue_demi.DefineComponent<{
     resizeNode: () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
         [key: string]: any;
     }>;
+    handleKeyboard: (evt: KeyboardEvent) => void;
+    handleSelect: (evt: MouseEvent) => void;
     disabled: vue_demi.ComputedRef<boolean>;
     scale: vue_demi.ComputedRef<number>;
-}, unknown, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, ("update:modelValue" | "update:width" | "update:height" | "update:x" | "update:y")[], "update:modelValue" | "update:width" | "update:height" | "update:x" | "update:y", vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{
+}, unknown, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, ("update:modelValue" | "update:width" | "update:height" | "update:x" | "update:y")[], "update:modelValue" | "update:width" | "update:height" | "update:x" | "update:y", vue_demi.PublicProps, Readonly<vue_demi.ExtractPropTypes<{
     modelValue: {
         type: vue_demi.PropType<Partial<{
             x: number;
@@ -593,6 +556,7 @@ declare const FreeDom: vue_demi.DefineComponent<{
         }>>;
         default: () => {};
     };
+    keyboard: BooleanConstructor;
     x: {
         type: NumberConstructor;
         default: number;
@@ -675,6 +639,7 @@ declare const FreeDom: vue_demi.DefineComponent<{
     width: number;
     height: number;
     transformScale: number;
+    keyboard: boolean;
     handle: string;
     minWidth: number;
     minHeight: number;
@@ -718,13 +683,10 @@ declare const FreeDomCore: vue_demi.DefineComponent<{
         default: number;
     };
 }, {
-    only: vue_demi.ComputedRef<vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
-        [key: string]: any;
-    }> | undefined>;
     coreRef: vue_demi.Ref<any>;
     mousedownFn: (evt: MouseEvent) => void;
     mouseupFn: (evt: MouseEvent) => void;
-}, unknown, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{
+}, unknown, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<vue_demi.ExtractPropTypes<{
     userSelectHack: {
         type: BooleanConstructor;
         default: boolean;
@@ -794,16 +756,13 @@ declare const ResizeDomCore: vue_demi.DefineComponent<{
     lockAspectRatio: BooleanConstructor;
 }, {
     dots: vue_demi.ComputedRef<readonly ["t", "r", "l", "b", "lt", "lb", "rt", "rb"] | ("t" | "r" | "l" | "b" | "lt" | "lb" | "rt" | "rb")[]>;
-    children: vue_demi.ComputedRef<vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
-        [key: string]: any;
-    }>[] | undefined>;
     handleResize: (handleName: "resize" | "start" | "stop", axis: "t" | "r" | "l" | "b" | "lt" | "lb" | "rt" | "rb") => CoreFnCallback;
     renderResizehandler: (axis: "t" | "r" | "l" | "b" | "lt" | "lb" | "rt" | "rb") => (() => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
         [key: string]: any;
     }>) | (() => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
         [key: string]: any;
     }>[] | undefined);
-}, unknown, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{
+}, unknown, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<vue_demi.ExtractPropTypes<{
     dragOpts: {
         type: vue_demi.PropType<Partial<FreeDomCoreProps>>;
         default: () => {};