@kizmann/nano-ui 2.0.2 → 3.0.1

package/src/{tooltip/src/tooltip → root/css}/tooltip.scss

@@ -1,24 +1,20 @@
-@use "../../../root/helpers" as *;
+@use "../../root/css/helpers" as *;
 
 [data-tooltip] {
     position: relative;
 }
 
 [data-tooltip=""]:before,
-[data-tooltip-ltr=""]:before,
-[data-tooltip-rtl=""]:before,
+[data-tooltip-inv=""]:before,
 [data-tooltip=""]:after,
-[data-tooltip-ltr=""]:after,
-[data-tooltip-rtl=""]:after {
+[data-tooltip-inv=""]:after {
     display: none !important;
 }
 
 [data-tooltip]:before,
-[data-tooltip-ltr]:before,
-[data-tooltip-rtl]:before,
+[data-tooltip-inv]:before,
 [data-tooltip]:after,
-[data-tooltip-ltr]:after,
-[data-tooltip-rtl]:after {
+[data-tooltip-inv]:after {
     z-index: 999999999;
     position: absolute;
     display: inline-flex;
@@ -26,50 +22,50 @@
     visibility: hidden;
 }
 
-[data-tooltip]:before,
-[data-tooltip-ltr]:before,
-[data-tooltip-rtl]:before {
+[data-tooltip]:before {
     bottom: calc(100% + 5px);
+}
+
+[data-tooltip-inv]:before {
+    top: calc(100% + 5px);
+}
+
+[data-tooltip]:before,
+[data-tooltip-inv]:before {
     padding: size('base-pad-vertical', 'calc($ * 0.5)') size('base-pad');
     font-size: size('base-fnt-label');
     border-radius: size('base-rad');
 }
 
 [data-tooltip]:after,
-[data-tooltip-ltr]:after,
-[data-tooltip-rtl]:after {
+[data-tooltip-inv]:after {
     content: '\00a0';
-    bottom: 100%;
     width: 28px;
     height: 6px;
 }
 
-[data-tooltip]:before {
-    content: attr(data-tooltip);
-}
-
-[data-tooltip]:before,
 [data-tooltip]:after {
-    left: 50%;
-    transform: translateX(-50%);
+    bottom: 100%;
 }
 
-[data-tooltip-ltr]:before {
-    content: attr(data-tooltip-ltr);
+[data-tooltip-inv]:after {
+    top: 100%;
 }
 
-[data-tooltip-ltr]:before,
-[data-tooltip-ltr]:after {
-    left: 0;
+[data-tooltip]:before{
+    content: attr(data-tooltip);
 }
 
-[data-tooltip-rtl]:before {
-    content: attr(data-tooltip-rtl);
+[data-tooltip-inv]:before {
+    content: attr(data-tooltip-inv);
 }
 
-[data-tooltip-rtl]:before,
-[data-tooltip-rtl]:after {
-    right: 0;
+[data-tooltip]:before,
+[data-tooltip-inv]:before,
+[data-tooltip]:after,
+[data-tooltip-inv]:after {
+    left: 50%;
+    transform: translateX(-50%);
 }
 
 [data-tooltip]:hover:before,
@@ -80,37 +76,31 @@
     visibility: visible;
 }
 
-[data-tooltip-ltr]:hover:before,
-[data-tooltip-ltr]:hover:after,
-[data-tooltip-ltr].n-move:before,
-[data-tooltip-ltr].n-move:after,
-[data-tooltip-rtl]:hover:before,
-[data-tooltip-rtl]:hover:after,
-[data-tooltip-rtl].n-move:before,
-[data-tooltip-rtl].n-move:after {
+[data-tooltip-inv]:hover:before,
+[data-tooltip-inv]:hover:after,
+[data-tooltip-inv].n-move:before,
+[data-tooltip-inv].n-move:after {
     opacity: 1;
     visibility: visible;
-    transform: translateY(0);
 }
 
 [data-tooltip]:before,
-[data-tooltip-ltr]:before,
-[data-tooltip-rtl]:before,
+[data-tooltip-inv]:before,
 [data-tooltip]:after,
-[data-tooltip-ltr]:after,
-[data-tooltip-rtl]:after {
+[data-tooltip-inv]:after {
     background: color('tooltip', 0.95);
     transition: opacity 0.2s;
 }
 
 [data-tooltip]:before,
-[data-tooltip-ltr]:before,
-[data-tooltip-rtl]:before {
+[data-tooltip-inv]:before {
     color: color('white');
 }
 
-[data-tooltip]:after,
-[data-tooltip-ltr]:after,
-[data-tooltip-rtl]:after {
+[data-tooltip]:after{
     mask: svg-load('angle-down.svg') no-repeat center 0 / contain;
+}
+
+[data-tooltip-inv]:after {
+    mask: svg-load('angle-up.svg') no-repeat center 0 / contain;
 }

package/src/root/index.scss

@@ -0,0 +1,2 @@
+@forward "./css/grid";
+@forward "./css/tooltip";

package/src/root/index.ts

@@ -0,0 +1,58 @@
+import ProtoExtend from "./js/proto/ProtoExtend.ts";
+import ProtoController from "./js/proto/ProtoController.ts";
+import ProtoData from "./js/proto/ProtoData.ts";
+import ProtoView from "./js/proto/ProtoView.ts";
+import GroupController from "./js/controller/GroupController.ts";
+import BaseData from "./js/data/BaseData.ts";
+import IconData from "./js/data/IconData.ts";
+import AlignData from "./js/data/AlignData.ts";
+import PositionData from "./js/data/PositionData.ts";
+import TextData from "./js/data/TextData.ts";
+import OptionData from "./js/data/OptionData.ts";
+import DragData from "./js/data/DragData.ts";
+
+export {
+    ProtoExtend,
+    ProtoController,
+    ProtoData,
+    ProtoView,
+    GroupController,
+    BaseData,
+    IconData,
+    AlignData,
+    PositionData,
+    TextData,
+    OptionData,
+    DragData,
+};
+
+import * as BaseProps from "./js/prop/BaseProps.ts";
+import * as IconProps from "./js/prop/IconProps.ts";
+import * as AlignProps from "./js/prop/AlignProps.ts";
+import * as PositionProps from "./js/prop/PositionProps.ts";
+import * as TextProps from "./js/prop/TextProps.ts";
+import * as OptionProps from "./js/prop/OptionProps.ts";
+import * as DragProps from "./js/prop/DragProps.ts";
+
+export const Props = {
+    ...BaseProps,
+    ...IconProps,
+    ...AlignProps,
+    ...PositionProps,
+    ...TextProps,
+    ...OptionProps,
+    ...DragProps,
+};
+
+import { OptionHelper } from "./js/helper/OptionHelper.ts";
+
+export const Helpers = {
+    Option: OptionHelper,
+};
+
+import Pointer from "./js/module/Pointer.ts";
+import Styler from "./js/module/Styler.ts";
+
+export {
+    Pointer, Styler
+};

package/src/root/js/controller/GroupController.ts

@@ -0,0 +1,76 @@
+import { Arr } from "@kizmann/pico-js";
+import { ProtoController } from "../../index.ts";
+import { onUnmounted, ref } from "vue";
+
+
+export class GroupController extends ProtoController
+{
+    /**
+     * @type {any}
+     */
+    _childs : any = [];
+
+    /**
+     * @type {any}
+     */
+    _child_events : any = [];
+
+    get childs() : any
+    {
+        return this._childs?.value ?? [];
+    }
+
+    set childs(value : any)
+    {
+        this._childs.value = value;
+    }
+
+    setup()
+    {
+        super.setup();
+
+        this._childs = ref([]);
+
+        onUnmounted(() => {
+            this._childs = null;
+        });
+
+        return this;
+    }
+
+    watchChilds(cb : Function)
+    {
+        this._child_events.push(cb);
+    }
+
+    append(child : any)
+    {
+        Arr.append(this._childs.value, child);
+
+        Arr.each(this._child_events, (cb : Function) => {
+            cb();
+        });
+
+        return this;
+    }
+
+    remove(child : any)
+    {
+        const childs = this._childs.value;
+
+        const indexies : any[] = Arr.filterIndex(childs, (c : any) => {
+            return c.uid === child.uid;
+        });
+
+        Arr.splices(this._childs.value, indexies);
+
+        Arr.each(this._child_events, (cb : Function) => {
+            cb();
+        });
+
+        return this;
+    }
+
+}
+
+export default GroupController;

package/src/root/js/data/AlignData.ts

@@ -0,0 +1,31 @@
+import { ProtoController } from "../../index.ts";
+
+export type AlignDirection = 'horizontal' | 'vertical';
+export type AlignPosition = 'left' | 'center' | 'right';
+
+export class AlignData
+{
+    /**
+     * @type {ProtoController}
+     */
+    declare scope : ProtoController;
+
+    /**
+     * @returns {AlignDirection|AlignPosition}
+     */
+    get align() : AlignDirection | AlignPosition
+    {
+        return this.scope.get('align');
+    }
+
+    /**
+     * @param {AlignDirection|AlignPosition} value
+     */
+    set align(value : AlignDirection | AlignPosition)
+    {
+        this.scope.set('align', value);
+    }
+
+}
+
+export default AlignData;

package/src/root/js/data/BaseData.ts

@@ -0,0 +1,141 @@
+import { ProtoController } from "../../index.ts";
+import Styler from "../module/Styler.ts";
+
+export class BaseData
+{
+    /**
+     * @type {ProtoController}
+     */
+    declare scope : ProtoController;
+
+    /**
+     * @returns {boolean}
+     */
+    get load() : boolean
+    {
+        return this.scope.get('load');
+    }
+
+    /**
+     * @param {boolean} value
+     */
+    set load(value : boolean)
+    {
+        this.scope.set('load', value);
+    }
+
+    /**
+     * @returns {boolean}
+     */
+    get disabled() : boolean
+    {
+        return this.scope.get('disabled');
+    }
+
+    /**
+     * @param {boolean} value
+     */
+    set disabled(value : boolean)
+    {
+        this.scope.set('disabled', value);
+    }
+
+    /**
+     * @returns {string}
+     */
+    get size() : string
+    {
+        return this.scope.get('size');
+    }
+
+    /**
+     * @param {string} value
+     */
+    set size(value : string)
+    {
+        this.scope.set('size', value);
+    }
+
+    /**
+     * @returns {string}
+     */
+    get type() : string
+    {
+        return this.scope.get('type');
+    }
+
+    /**
+     * @returns {string|number}
+     */
+    get color() : string | number
+    {
+        return this.scope.get('color');
+    }
+
+    /**
+     * @returns {string|number}
+     */
+    get $color() : string | number
+    {
+        return this.color ? Styler.wheel(this.color) : null;
+    }
+
+    /**
+     * @param {string} value
+     */
+    set type(value : string)
+    {
+        this.scope.set('type', value);
+    }
+
+    /**
+     * @returns {string}
+     */
+    get theme() : string
+    {
+        return this.scope.get('theme');
+    }
+
+    /**
+     * @param {string} value
+     */
+    set theme(value : string)
+    {
+        this.scope.set('theme', value);
+    }
+
+    /**
+     * @returns {boolean}
+     */
+    get clearable() : boolean
+    {
+        return this.scope.get('clearable');
+    }
+
+    /**
+     * @param {boolean} value
+     */
+    set clearable(value : boolean)
+    {
+        this.scope.set('clearable', value);
+    }
+
+    /**
+     * @returns {any}
+     */
+    get clearValue() : any
+    {
+        return this.scope.get('clearValue');
+    }
+
+    /**
+     * @param {any} value
+     */
+    set clearValue(value : any)
+    {
+        this.scope.set('clearValue', value);
+    }
+
+}
+
+export default BaseData;

package/src/root/js/data/DragData.ts

@@ -0,0 +1,212 @@
+import { ProtoController } from "../../index.ts";
+
+export class DragData
+{
+    /**
+     * @type {ProtoController}
+     */
+    declare scope : ProtoController;
+
+    /**
+     * @returns {any[]}
+     */
+    get items() : any[]
+    {
+        return this.scope.get('items');
+    }
+
+    /**
+     * @returns {object}
+     */
+    get current() : object
+    {
+        return this.scope.get('current');
+    }
+
+    /**
+     * @returns {any[]}
+     */
+    get selected() : any[]
+    {
+        return this.scope.get('selected');
+    }
+
+    /**
+     * @returns {any[]}
+     */
+    get expanded() : any[]
+    {
+        return this.scope.get('expanded');
+    }
+
+    /**
+     * @returns {any[]}
+     */
+    get cascade() : any[]
+    {
+        return this.scope.get('cascade');
+    }
+
+    /**
+     * @returns {any[]}
+     */
+    get group() : any[]
+    {
+        return this.scope.get('group');
+    }
+
+    /**
+     * @returns {any[]}
+     */
+    get allowGroups() : any[]
+    {
+        return this.scope.get('allowGroups');
+    }
+
+    /**
+     * @returns {function}
+     */
+    get safezone() : Function
+    {
+        return this.scope.get('safezone');
+    }
+
+    /**
+     * @returns {boolean}
+     */
+    get allowCurrent() : boolean
+    {
+        return this.scope.get('allowCurrent');
+    }
+
+    /**
+     * @returns {boolean}
+     */
+    get renderHandle() : boolean
+    {
+        return this.scope.get('renderHandle');
+    }
+
+    /**
+     * @returns {boolean}
+     */
+    get renderExpand() : boolean
+    {
+        return this.scope.get('renderExpand');
+    }
+
+    /**
+     * @returns {boolean}
+     */
+    get renderSelect() : boolean
+    {
+        return this.scope.get('renderSelect');
+    }
+
+    /**
+     * @returns {boolean|function}
+     */
+    get allowSelect() : boolean | Function
+    {
+        return this.scope.get('allowSelect');
+    }
+
+    /**
+     * @returns {boolean|function}
+     */
+    get allowDrag() : boolean | Function
+    {
+        return this.scope.get('allowDrag');
+    }
+
+    /**
+     * @returns {boolean|function}
+     */
+    get allowDrop() : boolean | Function
+    {
+        return this.scope.get('allowDrop');
+    }
+
+    /**
+     * @returns {function}
+     */
+    get transformDrop() : Function
+    {
+        return this.scope.get('transformDrop');
+    }
+
+    /**
+     * @returns {boolean}
+     */
+    get insertNode() : boolean
+    {
+        return this.scope.get('insertNode');
+    }
+
+    /**
+     * @returns {boolean}
+     */
+    get removeNode() : boolean
+    {
+        return this.scope.get('removeNode');
+    }
+
+    /**
+     * @returns {string}
+     */
+    get uniqueProp() : string
+    {
+        return this.scope.get('uniqueProp');
+    }
+
+    /**
+     * @returns {string}
+     */
+    get childProp() : string
+    {
+        return this.scope.get('childProp');
+    }
+
+    /**
+     * @returns {number}
+     */
+    get itemHeight() : number
+    {
+        return this.scope.get('itemHeight');
+    }
+
+    /**
+     * @returns {number}
+     */
+    get itemWidth() : number
+    {
+        return this.scope.get('itemWidth');
+    }
+
+    /**
+     * @returns {number}
+     */
+    get itemOffset() : number
+    {
+        return this.scope.get('itemOffset');
+    }
+
+    /**
+     * @returns {boolean}
+     */
+    get itemSkip() : boolean
+    {
+        return this.scope.get('itemSkip');
+    }
+
+    /**
+     * @returns {boolean}
+     */
+    get rootSkip() : boolean
+    {
+        return this.scope.get('rootSkip');
+    }
+
+}
+
+export default DragData;