@kizmann/nano-ui 2.0.2 → 3.0.0

package/src/tabs/js/tabs-item/NTabsItemView.ts

@@ -0,0 +1,111 @@
+import { h } from "vue";
+import { Arr, Mix } from "@kizmann/pico-js";
+import { ProtoView } from "../../../root/index.ts";
+import { NTabsItemController } from "./NTabsItemController.ts";
+import NTabsController from "../tabs/NTabsController.ts";
+
+export class NTabsItemView extends ProtoView
+{
+    /**
+     * @type {NTabsItemController}
+     */
+    declare scope : NTabsItemController;
+
+    /**
+     * @type {string}
+     */
+    bem : string = 'n-tabs-item';
+
+    default() : any
+    {
+        let { scope, data } = this.scope;
+
+        if ( ! scope.isActive() ) {
+            return null;
+        }
+
+        if ( ! data.init ) {
+            scope.set('init', true);
+        }
+
+        let props : any = {
+            class: data.classList,
+            wrapClass: `${this.bem}__wrap`,
+        };
+
+        const tabs = scope.ncx('tabs');
+
+        if ( tabs.data.float ) {
+            props.class.push('n-float');
+        }
+
+        if ( ! scope.isVisible() ) {
+            props.style = 'display: none;';
+        }
+
+        const slot = () => {
+            return this.slot('default');
+        };
+
+        if ( ! data.scrollbar ) {
+            return h('div', props, slot());
+        }
+
+        return this.comp('n-scrollbar', ...[
+            props, slot
+        ]);
+    }
+
+    header(tabs: NTabsController) : any
+    {
+        const { data } = this.scope
+
+        const props : any = {
+            class: data.classPart('header')
+        };
+
+        if ( tabs.data.value === data.name ) {
+            props.class.push('n-active');
+        }
+
+        props.onPointerdown = () => {
+            tabs.superToggle(data.name);
+        };
+
+        props.onDragenter = () => {
+            if( tabs.data.dragOpen ) {
+                tabs.superToggle(data.name);
+            }
+        };
+
+        return this.div(props, [
+            this.header_icon(tabs),
+            this.header_label(tabs),
+        ]);
+    }
+
+    header_icon(tabs: NTabsController) : any
+    {
+        const { data } = this.scope;
+
+        if ( Mix.isEmpty(data.icon) ) {
+            return null;
+        }
+
+        return this.div('icon', [
+            this.icon(data.icon)
+        ]);
+    }
+
+    header_label(tabs: NTabsController) : any
+    {
+        const { data } = this.scope;
+
+        return this.div('label', [
+            h('span', null, data.label)
+        ]);
+    }
+
+}
+
+export default NTabsItemView;

package/src/transfer/{src/transfer → css}/transfer.scss

@@ -1,4 +1,4 @@
-@use "../../../root/helpers" as *;
+@use "../../root/css/helpers" as *;
 
 .n-transfer {
     display: flex;
@@ -61,6 +61,8 @@
 
 .n-transfer__body {
     flex: 1 1 auto;
+    overflow: hidden;
+    min-height: 0;
 }
 
 .n-transfer__body .n-draglist-item__element {
@@ -70,11 +72,11 @@
     text-overflow: ellipsis;
 }
 
-.n-transfer__item-count:before {
+.n-transfer__title span:last-child:before {
     content: '(';
 }
 
-.n-transfer__item-count:after {
+.n-transfer__title span:last-child:after {
     content: ')';
 }
 
@@ -96,7 +98,7 @@
     padding: 0 size('base-pad');
 }
 
-.n-transfer__item-count {
+.n-transfer__title span:last-child {
     margin-left: size('base-pad', 'calc($ * 0.5)');
 }
 

package/src/transfer/index.scss

@@ -1 +1 @@
-@forward "./src/transfer/transfer";
+@forward "./css/transfer";

package/src/transfer/index.ts

@@ -0,0 +1,6 @@
+import { App } from "vue";
+import NTransfer from "./js/transfer/NTransfer.ts";
+
+export default function (App : App) {
+    App.component(NTransfer.name, NTransfer);
+}

package/src/transfer/js/transfer/NTransfer.ts

@@ -0,0 +1,100 @@
+import { PropType, defineComponent } from "vue";
+import { Props } from "../../../root/index.ts";
+import { NTransferController } from "./NTransferController.ts";
+
+export const NTransferProps = {
+
+    ...Props.Load,
+    ...Props.Size,
+    ...Props.Type,
+    ...Props.Disabled,
+
+    /**
+     * @type {PropType<array|object>}
+     */
+    modelValue: {
+        type: [Array,Object], default: null
+    },
+
+    /**
+     * @type {PropType<array|object>}
+     */
+    options: {
+        type: [Array,Object], default: () => []
+    },
+
+    /**
+     * @type {PropType<string>}
+     */
+    labelProp: {
+        type: [String], default: 'label'
+    },
+
+    /**
+     * @type {PropType<string>}
+     */
+    uniqueProp: {
+        type: [String], default: 'id'
+    },
+
+    /**
+     * @type {PropType<string>}
+     */
+    sourceLabel: {
+        type: [String], default: 'Source'
+    },
+
+    /**
+     * @type {PropType<string>}
+     */
+    targetLabel: {
+        type: [String], default: 'Target'
+    },
+
+    /**
+     * @type {PropType<string>}
+     */
+    sourcePlaceholder: {
+        type: [String], default: 'Search source'
+    },
+
+    /**
+     * @type {PropType<string>}
+     */
+    targetPlaceholder: {
+        type: [String], default: 'Search target'
+    },
+
+};
+
+export default defineComponent({
+
+    /**
+     * @type {string}
+     */
+    name: 'NTransfer',
+
+    /**
+     * @type {typeof NTransferProps}
+     */
+    props: NTransferProps,
+
+    /**
+     * @type {string[]}
+     */
+    emits: [
+        'update:modelValue',
+    ],
+
+    setup(props, context)
+    {
+        let ncx = new NTransferController(props, context);
+
+        ncx.dispose(() => {
+            ncx = null;
+        });
+
+        return ncx.render();
+    }
+
+});

package/src/transfer/js/transfer/NTransferController.ts

@@ -0,0 +1,189 @@
+import { SetupContext } from "vue";
+import { ProtoController } from "../../../root/index.ts";
+import { NTransferView } from "./NTransferView.ts";
+import { NTransferData } from "./NTransferData.ts";
+import { Arr, Mix, Obj, Str } from "@kizmann/pico-js";
+
+
+export class NTransferController extends ProtoController
+{
+    /**
+     * @type {NTransferController}
+     */
+    declare scope : NTransferController;
+
+    /**
+     * @type {NTransferData}
+     */
+    declare data : NTransferData;
+
+    /**
+     * @type {NTransferView}
+     */
+    declare view : NTransferView;
+
+    constructor(props : any, context : SetupContext)
+    {
+        super(props, context);
+
+        [this.view, this.data] = [
+            new NTransferView(this),
+            new NTransferData(this),
+        ];
+
+        this.setup();
+    }
+
+    setup()
+    {
+        super.setup();
+
+        this.makeUID();
+
+        this
+            .makeRef('source')
+            .makeRef('target');
+
+        this.cloneProp('modelValue');
+
+        this
+            .makeData('source')
+            .makeData('sourceSearch', '')
+            .makeData('target')
+            .makeData('targetSearch', '');
+
+        this.watchData('modelValue', () => {
+            this.updateSource();
+            this.updateTarget();
+        });
+
+        this.watchProp('options', () => {
+            this.updateSource();
+            this.updateTarget();
+        });
+
+        this.watchData('sourceSearch', () => {
+            this.updateSource();
+        });
+
+        this.watchData('targetSearch', () => {
+            this.updateTarget();
+        });
+
+        this.updateSource();
+        this.updateTarget();
+
+        return this;
+    }
+
+    updateSource()
+    {
+        const { data } = this.scope;
+
+        const [search, unique, label] = [
+            data.sourceSearch, data.uniqueProp, data.labelProp
+        ];
+
+        let uniques = Arr.each(data.model || [], (item : any) => {
+            return Obj.get(item, unique);
+        });
+
+        const sources = Arr.filter(data.options, (item : any) => {
+            return !Arr.has(uniques, item[unique]);
+        });
+
+        const options = Arr.filter(sources, (item : any) => {
+            return Str.has(Obj.get(item, label), search);
+        });
+
+        this.set('source', Arr.sort(options, label));
+    }
+
+    updateTarget()
+    {
+        const { data } = this.scope;
+
+        const [search, label] = [
+            data.targetSearch, data.labelProp
+        ];
+
+        const options = Arr.filter(data.model || [], (item : any) => {
+            return Str.has(Obj.get(item, label), search);
+        });
+
+        this.set('target', Arr.sort(options, label));
+    }
+
+    moveToSource(item : any)
+    {
+        console.log(item);
+        const { uniqueProp } = this.data;
+
+        const result = Arr.clone(...[
+            this.data.model || []
+        ]);
+
+        Arr.remove(result, item, {
+            [uniqueProp]: Obj.get(item, uniqueProp)
+        });
+
+        this.update('modelValue', result);
+    }
+
+    moveToTarget(item : any)
+    {
+        const { uniqueProp } = this.data;
+
+        const result = Arr.clone(...[
+            this.data.model || []
+        ]);
+
+        Arr.add(result, item, {
+            [uniqueProp]: Obj.get(item, uniqueProp)
+        });
+
+        this.update('modelValue', result);
+    }
+
+    moveSelectedToSource()
+    {
+        const { selected } = this.ncx('target').data;
+
+        const result = Arr.clone(...[
+            this.data.model || []
+        ]);
+
+        const { uniqueProp } = this.data;
+
+        const items = Arr.filter(result, (item : any) => {
+            return !Arr.has(selected, item[uniqueProp]);
+        });
+
+        this.update('modelValue', items);
+
+    }
+
+    moveSelectedToTarget()
+    {
+        const { selected } = this.ncx('source').data;
+
+        const result = Arr.clone(...[
+            this.data.model || []
+        ]);
+
+        const { uniqueProp } = this.data;
+
+        const items = Arr.each(selected, (uid : string) => {
+            return Arr.find(this.data.options, { [uniqueProp]: uid });
+        });
+
+        Arr.append(...[
+            result, ...Arr.filter(items)
+        ]);
+
+        this.update('modelValue', result);
+    }
+
+}
+
+export default NTransferController;

package/src/transfer/js/transfer/NTransferData.ts

@@ -0,0 +1,101 @@
+import { ProtoData } from "../../../root/index.ts";
+import NTransferController from "./NTransferController.ts";
+import { Locale } from "@kizmann/pico-js";
+
+export class NTransferData extends ProtoData
+{
+    /**
+     * @type {NTransferController}
+     */
+    declare scope : NTransferController;
+
+    get classList() : string[]
+    {
+        let classList = [];
+
+        return this.classRoot(classList);
+    }
+
+    get model() : any[]
+    {
+        return this.scope.get('modelValue');
+    }
+
+    get source(): any[]
+    {
+        return this.scope.get('source');
+    }
+
+    get sourceSearch(): string
+    {
+        return this.scope.get('sourceSearch');
+    }
+
+    get target(): any[]
+    {
+        return this.scope.get('target');
+    }
+
+    get targetSearch(): string
+    {
+        return this.scope.get('targetSearch');
+    }
+
+    get options() : any[]
+    {
+        return this.scope.get('options');
+    }
+
+    get labelProp() : string
+    {
+        return this.scope.get('labelProp');
+    }
+
+    get uniqueProp() : string
+    {
+        return this.scope.get('uniqueProp');
+    }
+
+    get sourceLabel() : string
+    {
+        return this.scope.get('sourceLabel');
+    }
+
+    get $sourceLabel() : string
+    {
+        return Locale.trans(this.sourceLabel);
+    }
+
+    get sourcePlaceholder() : string
+    {
+        return this.scope.get('sourcePlaceholder');
+    }
+
+    get $sourcePlaceholder() : string
+    {
+        return Locale.trans(this.sourcePlaceholder);
+    }
+
+    get targetLabel() : string
+    {
+        return this.scope.get('targetLabel');
+    }
+
+    get $targetLabel() : string
+    {
+        return Locale.trans(this.targetLabel);
+    }
+
+    get targetPlaceholder() : string
+    {
+        return this.scope.get('targetPlaceholder');
+    }
+
+    get $targetPlaceholder() : string
+    {
+        return Locale.trans(this.targetPlaceholder);
+    }
+
+}
+
+export default NTransferData;