@kizmann/nano-ui 2.0.2 → 3.0.1

package/src/table/js/plugin/NTableSelectPlugin.ts

@@ -0,0 +1,92 @@
+import { Mix, Obj, Run } from "@kizmann/pico-js";
+import NTableController from "../table/NTableController.ts";
+import NTableColumnController from "../table-column/NTableColumnController.ts";
+
+export default class NTableSelectPlugin
+{
+    /**
+     * @type {NTableController}
+     */
+    table : NTableController;
+
+    /**
+     * @type {NTableColumnController}
+     */
+    column : NTableColumnController;
+
+    /**
+     * @type {object}
+     */
+    config : any = {
+        allowUncheck: true,
+    };
+
+    constructor(table : NTableController, column : NTableColumnController)
+    {
+        [this.table, this.column] = [
+            table, column
+        ];
+
+        this.config = {
+            ...this.config, ...(column.data.data ?? {})
+        };
+    }
+
+    equal(item : any)
+    {
+        const { column, table } = this;
+
+        if ( Mix.isEmpty(column.data.model) ) {
+            return false;
+        }
+
+        const [suid, muid] = [
+            Obj.get(item, table.data.uniqueProp),
+            Obj.get(column.data.model, table.data.uniqueProp),
+        ];
+
+        return suid === muid;
+    }
+
+    disabled(item : any)
+    {
+        const { column } = this;
+
+        if ( !Mix.isEmpty(column.data.model) ) {
+            return true;
+        }
+
+        let disabled = column.data.disabled;
+
+        if ( typeof disabled !== 'function' ) {
+            disabled = (v : any) => false;
+        }
+
+        return disabled(item);
+    }
+
+    uncheck(item : any)
+    {
+        if ( this.equal(item) ) {
+            return this.config.allowUncheck;
+        }
+
+        return false;
+    }
+
+    toggle(item : any)
+    {
+        const { column, table } = this;
+
+        if ( this.equal(item) ) {
+            item = null;
+        }
+
+        Run.frame(() => {
+            table.instance.proxy.$forceUpdate();
+        });
+
+        column.emit('update:modelValue', item);
+    }
+
+}

package/src/table/js/table/NTable.ts

@@ -0,0 +1,91 @@
+import { PropType, defineComponent } from "vue";
+import { Props } from "../../../root/index.ts";
+import { NTableController } from "./NTableController.ts";
+
+export const NTableProps = {
+
+    ...Props.Load,
+    ...Props.Size,
+    ...Props.Type,
+    ...Props.Draglist,
+
+    /**
+     * @type {PropType<array>}
+     */
+    filter: {
+        type: [Array], default: null
+    },
+
+    /**
+     * @type {PropType<string>}
+     */
+    sortProp: {
+        type: [String], default: 'id'
+    },
+
+    /**
+     * @type {PropType<string>}
+     */
+    sortDir: {
+        type: [String], default: 'desc'
+    },
+
+    /**
+     * @type {PropType<array>}
+     */
+    visible: {
+        type: [Array], default: null
+    },
+
+    /**
+     * @type {PropType<number>}
+     */
+    itemHeight: {
+        type: [Number], default: 32
+    },
+
+    /**
+     * @type {PropType<number>}
+     */
+    itemOffset: {
+        type: [Number], default: 30
+    },
+
+};
+
+export default defineComponent({
+
+    name: 'NTable',
+
+    props: NTableProps,
+
+    emits: [
+        'update:items',
+        'update:visible',
+        'update:current',
+        'update:selected',
+        'update:expanded',
+        'update:cascade',
+        'update:filter',
+        'update:sortProp',
+        'update:sortDir',
+        'filter',
+        'sort',
+        'row-click',
+        'node-click',
+        'row-dblclick',
+        'node-dblclick',
+    ],
+
+    setup(props, context)
+    {
+        let ncx = new NTableController(props, context);
+
+        ncx.dispose(() => {
+            ncx = null;
+        });
+
+        return ncx.render();
+    }
+
+});

package/src/table/js/table/NTableController.ts

@@ -0,0 +1,239 @@
+import { onMounted, provide, SetupContext } from "vue";
+import { Arr, Mix, Obj } from "@kizmann/pico-js";
+import { GroupController } from "../../../root/index.ts";
+import { NTableView } from "./NTableView.ts";
+import { NTableData } from "./NTableData.ts";
+
+export class NTableController extends GroupController
+{
+    /**
+     * @type {NTableController}
+     */
+    declare scope : NTableController;
+
+    /**
+     * @type {NTableData}
+     */
+    declare data : NTableData;
+
+    /**
+     * @type {NTableView}
+     */
+    declare view : NTableView;
+
+    constructor(props : any, context : SetupContext)
+    {
+        super(props, context);
+
+        [this.view, this.data] = [
+            new NTableView(this),
+            // @ts-ignore
+            new NTableData(this),
+        ];
+
+        this.setup();
+    }
+
+    setup()
+    {
+        super.setup();
+
+        this.makeUID();
+
+        this
+            .cloneProp('visible')
+            .cloneProp('filter')
+            .cloneProp('sortProp')
+            .cloneProp('sortDir');
+
+        this
+            .makeRef('el')
+            .makeRef('draglist');
+
+        this.makeData('looseWidth', {});
+        this.makeData('fixedWidth', {});
+
+        this.makeData('filterMap', ...[
+            this.buildFilters()
+        ]);
+
+        this.watchProp('filter', () => {
+            this.set('filterMap', this.buildFilters());
+        });
+
+        this.watchChilds(() => {
+            this.set('filterMap', this.buildFilters());
+        });
+
+        provide('NTable', this.instance);
+
+        onMounted(() => {
+            this.onMounted()
+        });
+
+        return this;
+    }
+
+    onMounted()
+    {
+        if ( this.data.visible == null ) {
+            this.buildVisible();
+        }
+    }
+
+    buildVisible()
+    {
+        const width = this.dom('el').width();
+
+        const columns = Arr.filter(this.childs, (column : any) => {
+            return column.getVisibility(width);
+        });
+
+        const visible = Arr.each(columns, (column : any) => {
+            return column.data.prop;
+        });
+
+        this.update('visible', visible);
+    }
+
+    buildFilters()
+    {
+        let filters = {};
+
+        Arr.each(this.childs, (child : any) => {
+            filters[child.uid] = this.buildFilter(child);
+        });
+
+        return filters;
+    }
+
+    buildFilter(column : any, merge : boolean = true)
+    {
+        const { data } = column;
+
+        let value = {
+            value: null, type: data.type, property: data.filterProp,
+        };
+
+        const active = Arr.find(this.data.filter, {
+            // @ts-ignore
+            property: value.property
+        });
+
+        if ( merge && active ) {
+            value = Obj.assign(value, Obj.clone(active));
+        }
+
+        return value;
+    }
+
+    getWidth(uid : string)
+    {
+        if ( this.data.fixedWidth[uid] != null ) {
+            return this.data.fixedWidth[uid];
+        }
+
+        return this.data.looseWidth[uid];
+    }
+
+    getStyle(column : any)
+    {
+        const { data } = column.unpack();
+
+        let style : any = {
+            flex: '1 1 auto'
+        };
+
+        if ( Mix.isStr(data.width) ) {
+            style.flex = `1 1 ${data.width}`;
+        }
+
+        if ( Mix.isNum(data.width) ) {
+            style.flex = `1 1 ${data.width}px`;
+        }
+
+        if ( data.fixedWidth ) {
+            style.flex = `0 0 ${data.fixedWidth}px`;
+        }
+
+        if ( !data.fixedWidth && data.minWidth ) {
+            style.minWidth = data.minWidth;
+        }
+
+        if ( !data.fixedWidth && data.maxWidth ) {
+            style.maxWidth = data.maxWidth;
+        }
+
+        return style;
+    }
+
+    toggleSelect()
+    {
+        return this.ncx('draglist').selectAll();
+    }
+
+    getTotalSelect()
+    {
+        return this.ncx('draglist').selectState();
+    }
+
+    applyColumnFilter()
+    {
+        const { data } = this;
+
+        const filters = Arr.filter(data.filterMap, (filter : any) => {
+            return !Mix.isEmpty(filter.value);
+        });
+
+        this.update('filter', filters);
+    }
+
+    resetColumnFilter(column : any)
+    {
+        const { data } = this;
+
+        data.filterMap[column.uid] = this.buildFilter(...[
+            column, false
+        ]);
+
+        this.applyColumnFilter();
+    }
+
+    applySortColumn(column : any)
+    {
+        const { data } = this;
+
+        const value = {
+            prop: data.sortProp, dir: data.sortDir,
+        };
+
+        const changed = !Arr.has(...[
+            [column.data.sortProp], value.prop
+        ]);
+
+        let result = {
+            prop: column.data.sortProp, dir: 'asc',
+        }
+
+        if ( !changed && value.dir === 'asc' ) {
+            result.dir = 'desc';
+        }
+
+        if ( !changed && value.dir === 'desc' ) {
+            result.dir = 'asc';
+        }
+
+        if ( result.dir !== value.dir ) {
+            this.update('sortDir', result.dir);
+        }
+
+        if ( result.prop !== value.prop ) {
+            this.update('sortProp', result.prop);
+        }
+
+        this.emit('sort', ...Mix.vals(result));
+    }
+
+}
+
+export default NTableController;

package/src/table/js/table/NTableData.ts

@@ -0,0 +1,94 @@
+import { ProtoExtend, ProtoData, DragData } from "../../../root/index.ts";
+import NTableController from "./NTableController.ts";
+
+
+export class NTableData extends ProtoExtend([ProtoData, DragData])
+{
+    /**
+     * @type {NTableController}
+     */
+        // @ts-ignore
+    declare scope : NTableController;
+
+    get classList() : string[]
+    {
+        let classList = [];
+
+        return this.classRoot(classList);
+    }
+
+    get visible() : string[]
+    {
+        return this.scope.get('visible');
+    }
+
+    set visible(value : string[])
+    {
+        this.scope.set('visible', value);
+    }
+
+    get filter() : any[]
+    {
+        return this.scope.get('filter');
+    }
+
+    set filter(value : any[])
+    {
+        this.scope.set('filter', value);
+    }
+
+    get filterMap() : any[]
+    {
+        return this.scope.get('filterMap');
+    }
+
+    set filterMap(value : any[])
+    {
+        this.scope.set('filterMap', value);
+    }
+
+    get looseWidth() : any
+    {
+        return this.scope.get('looseWidth');
+    }
+
+    set looseWidth(value : any)
+    {
+        this.scope.set('looseWidth', value);
+    }
+
+    get fixedWidth() : any
+    {
+        return this.scope.get('fixedWidth');
+    }
+
+    set fixedWidth(value : any)
+    {
+        this.scope.set('fixedWidth', value);
+    }
+
+    get sortProp() : string
+    {
+        return this.scope.get('sortProp');
+    }
+
+    set sortProp(value : string)
+    {
+        this.scope.set('sortProp', value);
+    }
+
+    get sortDir() : string
+    {
+        return this.scope.get('sortDir');
+    }
+
+    set sortDir(value : string)
+    {
+        this.scope.set('sortDir', value);
+    }
+
+}
+
+export interface NTableData extends ProtoData, DragData {}
+
+export default NTableData;