@kizmann/nano-ui 2.0.2 → 3.0.0

package/src/checkbox/js/checkbox/NCheckboxData.ts

@@ -0,0 +1,56 @@
+import { ProtoData } from "../../../root/index.ts";
+import { Arr } from "@kizmann/pico-js";
+import NCheckboxController from "./NCheckboxController.ts";
+
+export class NCheckboxData extends ProtoData
+{
+    /**
+     * @type {NCheckboxController}
+     */
+    declare scope : NCheckboxController;
+
+    get classList() : string[]
+    {
+        let classList = this.classRoot();
+
+        if ( this.model ) {
+            Arr.append(classList, 'n-checked');
+        }
+
+        if ( this.model && this.allowUncheck ) {
+            Arr.remove(classList, 'n-disabled');
+        }
+
+        if ( this.intermediate ) {
+            Arr.append(classList, 'n-intermediate');
+        }
+
+        return classList;
+    }
+
+    get model() : boolean
+    {
+        return this.scope.get('modelValue');
+    }
+
+    get value() : any
+    {
+        return this.scope.get('value');
+    }
+
+    get allowUncheck() : boolean
+    {
+        return this.scope.get('allowUncheck');
+    }
+
+    get global() : boolean
+    {
+        return this.scope.get('global');
+    }
+
+    get intermediate() : boolean
+    {
+        return this.scope.get('intermediate');
+    }
+
+}

package/src/checkbox/js/checkbox/NCheckboxView.ts

@@ -0,0 +1,60 @@
+import { h } from "vue";
+import { ProtoView } from "../../../root/index.ts";
+import { NCheckboxController } from "./NCheckboxController.ts";
+
+export class NCheckboxView extends ProtoView
+{
+    /**
+     * @type {NCheckboxController}
+     */
+    declare scope : NCheckboxController;
+
+    /**
+     * @type {string}
+     */
+    bem : string = 'n-checkbox';
+
+    default() : any
+    {
+        let { scope, data } = this.scope;
+
+        let props : any = {
+            class: data.classList
+        };
+
+        props.onClick = () => {
+            scope.superToggle();
+        };
+
+        return h('div', props, [
+            this.checkbox(), this.body()
+        ]);
+    }
+
+    body() : any
+    {
+        return this.div('label', [
+            this.slot('default')
+        ]);
+    }
+
+    checkbox() : any
+    {
+        const { data } = this.scope;
+
+        let config = {
+            icon: 'fa fa-minus',
+        };
+
+        if ( data.model ) {
+            config.icon = 'fa fa-check';
+        }
+
+        return this.div('checkbox', [
+            this.icon(config)
+        ]);
+    }
+
+}
+
+export default NCheckboxView;

package/src/checkbox/js/checkbox-group/NCheckboxGroup.ts

@@ -0,0 +1,57 @@
+import { PropType, defineComponent, getCurrentInstance } from "vue";
+import { Obj } from "@kizmann/pico-js";
+import { Props } from "../../../root/index.ts";
+import { NCheckboxGroupController } from "./NCheckboxGroupController.ts";
+
+
+export const NCheckboxGroupProps = {
+
+    ...Props.Size,
+    ...Props.Type,
+    ...Props.AlignHorizontal,
+
+    /**
+     * @type {PropType<array>}
+     */
+    modelValue: {
+        type: [Array], default: () => []
+    },
+
+};
+
+export default defineComponent({
+
+    /**
+     * @type {string}
+     */
+    name: 'NCheckboxGroup',
+
+    /**
+     * @type {typeof NCheckboxGroupProps}
+     */
+    props: NCheckboxGroupProps,
+
+    /**
+     * @type {string[]}
+     */
+    emits: [
+        'update:modelValue',
+    ],
+
+    setup(props, context)
+    {
+        let ncx = new NCheckboxGroupController(props, context);
+
+        ncx.pass({
+            global: 'superGlobal',
+            toggle: 'superToggle',
+        });
+
+        ncx.dispose(() => {
+            ncx = null;
+        });
+
+        return ncx.render();
+    }
+
+});

package/src/checkbox/js/checkbox-group/NCheckboxGroupController.ts

@@ -0,0 +1,101 @@
+import { SetupContext, provide } from "vue";
+import { Arr, Mix } from "@kizmann/pico-js";
+import { GroupController } from "../../../root/index.ts";
+import { NCheckboxGroupView } from "./NCheckboxGroupView.ts";
+import { NCheckboxGroupData } from "./NCheckboxGroupData.ts";
+
+export class NCheckboxGroupController extends GroupController
+{
+    /**
+     * @type {NCheckboxGroupController}
+     */
+    declare scope : NCheckboxGroupController;
+
+    /**
+     * @type {NCheckboxGroupData}
+     */
+    declare data : NCheckboxGroupData;
+
+    /**
+     * @type {NCheckboxGroupView}
+     */
+    declare view : NCheckboxGroupView;
+
+    constructor(props : any, context : SetupContext)
+    {
+        super(props, context);
+
+        [this.view, this.data] = [
+            new NCheckboxGroupView(this),
+            new NCheckboxGroupData(this),
+        ];
+
+        this.setup();
+    }
+
+    setup()
+    {
+        super.setup();
+
+        this
+            .cloneProp('modelValue');
+
+        this.compData('checked', () => {
+            return this.getChecked();
+        });
+
+        this.compData('intermediate', () => {
+            return this.getIntermediate();
+        });
+
+        this
+            .exposeData('checked')
+            .exposeData('intermediate');
+
+        provide('NCheckboxGroup', this.instance);
+
+        return this;
+    }
+
+    superGlobal()
+    {
+        const { checked, intermediate } = this.data;
+
+        let keys = [];
+
+        // @ts-ignore
+        if ( !checked ?? intermediate ) {
+            keys = Arr.extract(this.childs, 'data.value');
+        }
+
+        Arr.each(this.childs, (child : any) => {
+            child.set('modelValue', Arr.has(keys, child.value));
+        });
+
+        this.update('modelValue', keys);
+    }
+
+    superToggle(child : any)
+    {
+        const result = Arr.toggle(...[
+            this.data.model, child.data.value
+        ]);
+
+        this.update('modelValue', result);
+    }
+
+    getChecked()
+    {
+        return Arr.lengths(...[
+            this.data.model, this.scope.childs
+        ]);
+    }
+
+    getIntermediate()
+    {
+        return ! Mix.isEmpty(this.data.model);
+    }
+
+}
+
+export default NCheckboxGroupController;

package/src/checkbox/js/checkbox-group/NCheckboxGroupData.ts

@@ -0,0 +1,42 @@
+import { ProtoData } from "../../../root/index.ts";
+import NCheckboxGroupController from "./NCheckboxGroupController.ts";
+
+export class NCheckboxGroupData extends ProtoData
+{
+    /**
+     * @type {NCheckboxGroupController}
+     */
+    declare scope : NCheckboxGroupController;
+
+    get classList() : string[]
+    {
+        let classList = [];
+
+        if ( this.align ) {
+            classList.push(`:bem--${this.align}`);
+        }
+
+        return this.classRoot(classList);
+    }
+
+    get model() : any[]
+    {
+        return this.scope.get('modelValue');
+    }
+
+    get checked() : boolean
+    {
+        return this.scope.get('checked');
+    }
+
+    get intermediate() : boolean
+    {
+        return this.scope.get('intermediate');
+    }
+
+    get align() : string
+    {
+        return this.scope.get('align');
+    }
+
+}

package/src/checkbox/js/checkbox-group/NCheckboxGroupView.ts

@@ -0,0 +1,32 @@
+import { h } from "vue";
+import { ProtoView } from "../../../root/index.ts";
+import { NCheckboxGroupController } from "./NCheckboxGroupController.ts";
+
+export class NCheckboxGroupView extends ProtoView
+{
+    /**
+     * @type {NCheckboxGroupController}
+     */
+    declare scope : NCheckboxGroupController;
+
+    /**
+     * @type {string}
+     */
+    bem : string = 'n-checkbox-group';
+
+    default() : any
+    {
+        let { data } = this.scope;
+
+        let props = {
+            class: data.classList
+        };
+
+        return h('div', props, [
+            this.slot('default')
+        ]);
+    }
+
+}
+
+export default NCheckboxGroupView;

package/src/collapse/NCollapse.md

@@ -0,0 +1,4 @@
+### Good to know
+
+- Nothing so far
+

package/src/collapse/css/collapse-item.scss

@@ -0,0 +1,83 @@
+@use "../../root/css/helpers" as *;
+
+.n-collapse-item__header {
+    cursor: default;
+    position: relative;
+    flex: 0 0 auto;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: stretch;
+    height: size('base-hgt', 'calc($ + 10px)');
+    padding: 0 size('base-pad');
+    border-bottom: 1px solid transparent;
+}
+
+.n-collapse-item__header.is-last {
+    margin-bottom: -1px;
+}
+
+.n-collapse-item__label {
+    flex: 1 1 auto;
+}
+
+.n-collapse-item__label {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.n-collapse-item__icon,
+.n-collapse-item__angle {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: size('base-hgt-inline');
+    height: size('base-hgt-inline');
+}
+
+.n-collapse-item__angle {
+    transition: transform 0.3s;
+}
+
+.n-collapse-item__header.n-active .n-collapse-item__angle {
+    transform: rotate(90deg);
+}
+
+.n-collapse-item__icon {
+    font-size: size('base-fnt-icon');
+    margin-right: size('base-pad', 'calc($ * 0.6)');
+}
+
+.n-collapse-item__label {
+    font-size: 1.05em;
+}
+
+.n-collapse-item__angle {
+    font-size: size('base-fnt-icon');
+    margin-left: size('base-pad', 'calc($ * 0.6)');
+}
+
+.n-collapse-item__action {
+    flex: 0 0 auto;
+    margin: 0 size('base-pad', 'calc($ * 0.6)');
+}
+
+.n-collapse-item__action > *:not(:last-child) {
+    margin-right: size('base-pad');
+}
+
+.n-collapse-item__content {
+    position: relative;
+    flex: 1 1 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    justify-content: stretch;
+}
+
+.n-collapse-item__content:not(.n-scrollbar),
+.n-scrollbar.n-collapse-item__content > .n-scrollbar-content > .n-collapse-item__wrap {
+    padding: size('base-pad-vertical', 'calc($ * 1.4)') size('base-pad');
+}

package/src/collapse/css/collapse.scss

@@ -0,0 +1,11 @@
+@use "../../root/css/helpers" as *;
+
+.n-collapse {
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    justify-content: flex-start;
+    font-size: size('base-fnt');
+    border-radius: size('base-rad');
+}

package/src/collapse/index.scss

@@ -1,2 +1,2 @@
-@forward "./src/collapse/collapse";
-@forward "./src/collapse-item/collapse-item";
+@forward "./css/collapse";
+@forward "./css/collapse-item";

package/src/collapse/index.ts

@@ -0,0 +1,8 @@
+import { App } from "vue";
+import NCollapse from "./js/collapse/NCollapse.ts";
+import NCollapseItem from "./js/collapse-item/NCollapseItem.ts";
+
+export default function (App : App) {
+    App.component(NCollapse.name, NCollapse);
+    App.component(NCollapseItem.name, NCollapseItem);
+}

package/src/collapse/js/collapse/NCollapse.ts

@@ -0,0 +1,78 @@
+import { PropType, defineComponent } from "vue";
+import { Props } from "../../../root/index.ts";
+import { NCollapseController } from "./NCollapseController.ts";
+
+export const NCollapseProps = {
+
+    ...Props.Load,
+    ...Props.Size,
+    ...Props.Type,
+
+    /**
+     * @type {PropType<array>}
+     */
+    modelValue: {
+        type: [Array], default: () => []
+    },
+
+    /**
+     * @type {PropType<boolean>}
+     */
+    scrollbar: {
+        type: [Boolean], default: true
+    },
+
+    /**
+     * @type {PropType<boolean>}
+     */
+    lazy: {
+        type: [Boolean], default: true
+    },
+
+    /**
+     * @type {PropType<boolean>}
+     */
+    keep: {
+        type: [Boolean], default: false
+    },
+
+    /**
+     * @type {PropType<boolean>}
+     */
+    dragOpen: {
+        type: [Boolean], default: true
+    }
+
+};
+
+export default defineComponent({
+
+    /**
+     * @type {string}
+     */
+    name: 'NCollapse',
+
+    /**
+     * @type {typeof NCollapseProps}
+     */
+    props: NCollapseProps,
+
+    /**
+     * @type {string[]}
+     */
+    emits: [
+        'update:modelValue',
+    ],
+
+    setup(props, context)
+    {
+        let ncx = new NCollapseController(props, context);
+
+        ncx.dispose(() => {
+            ncx = null;
+        });
+
+        return ncx.render();
+    }
+
+});

package/src/collapse/js/collapse/NCollapseController.ts

@@ -0,0 +1,101 @@
+import { provide, SetupContext } from "vue";
+import { GroupController } from "../../../root/index.ts";
+import { NCollapseView } from "./NCollapseView.ts";
+import { NCollapseData } from "./NCollapseData.ts";
+import { Arr, Num, Run } from "@kizmann/pico-js";
+
+
+export class NCollapseController extends GroupController
+{
+    /**
+     * @type {NCollapseController}
+     */
+    declare scope : NCollapseController;
+
+    /**
+     * @type {NCollapseData}
+     */
+    declare data: NCollapseData;
+
+    /**
+     * @type {NCollapseView}
+     */
+    declare view: NCollapseView;
+
+    /**
+     * @type {ResizeObserver}
+     */
+    resizer : ResizeObserver;
+
+    constructor(props:any, context:SetupContext)
+    {
+        super(props, context);
+
+        [this.view, this.data] = [
+            new NCollapseView(this),
+            new NCollapseData(this),
+        ];
+
+        this.setup();
+    }
+
+    setup()
+    {
+        super.setup();
+
+        this.cloneProp('modelValue');
+
+        this
+            .makeData('sorted');
+
+        this.watchData('modelValue', () => {
+            this.updateTabs();
+        });
+
+        this.watchChilds(() => {
+            this.updateTabs();
+        });
+
+        provide('NCollapse', this.instance);
+
+        return this;
+    }
+
+    updateTabs()
+    {
+        const sorted = Arr.sort(...[
+            this.childs, 'data.sort'
+        ]);
+
+        this.set('sorted', sorted);
+    }
+
+    superFixed(value: string)
+    {
+        const { model } = this.data;
+
+        if ( Arr.has(model, value) ) {
+            return;
+        }
+
+        const result = Arr.toggle(...[
+            Arr.clone(model), value
+        ]);
+
+        this.update('modelValue', result);
+    }
+
+    superToggle(value: string)
+    {
+        const { model } = this.data;
+
+        const result = Arr.toggle(...[
+            Arr.clone(model), value
+        ]);
+
+        this.update('modelValue', result);
+    }
+
+}
+
+export default NCollapseController;

package/src/collapse/js/collapse/NCollapseData.ts

@@ -0,0 +1,54 @@
+import { ProtoData } from "../../../root/index.ts";
+import NCollapseController from "./NCollapseController.ts";
+import NCollapseItemController from "../collapse-item/NCollapseItemController.ts";
+
+export class NCollapseData extends ProtoData
+{
+    /**
+     * @type {NCollapseController}
+     */
+    declare scope : NCollapseController;
+
+    get classList() : string[]
+    {
+        return this.classRoot([]);
+    }
+
+    get model() : string
+    {
+        return this.scope.get('modelValue');
+    }
+
+    get sorted() : NCollapseItemController[]
+    {
+        return this.scope.get('sorted');
+    }
+
+    get values() : string
+    {
+        return this.scope.get('values');
+    }
+
+    get scrollbar() : boolean
+    {
+        return this.scope.get('scrollbar');
+    }
+
+    get lazy() : boolean
+    {
+        return this.scope.get('lazy');
+    }
+
+    get keep() : boolean
+    {
+        return this.scope.get('keep');
+    }
+
+    get dragOpen() : boolean
+    {
+        return this.scope.get('dragOpen');
+    }
+
+}
+
+export default NCollapseData;