@kizmann/nano-ui 2.0.2 → 3.0.0

package/src/form/js/form-rules/module/NFormRuleMinlength.ts

@@ -0,0 +1,29 @@
+import { Arr, Locale, Mix, Obj } from "@kizmann/pico-js";
+import { NFormController as Form } from "../../form/NFormController.ts";
+import { NFormItemController as FormItem } from "../../form-item/NFormItemController.ts";
+
+export const NFormRuleMinlength = {
+
+    key: 'minlength',
+
+    validate(scope: Form, field : FormItem, value : any, min: number = Number.MIN_VALUE)
+    {
+        if ( Mix.isEmpty(value) ) {
+            return true;
+        }
+
+        if ( Mix.isStr(value) || Mix.isArr(value) ) {
+            return Mix.len(value) > Mix.num(min);
+        }
+
+        return false;
+    },
+
+    message(scope: Form, field : FormItem, value : any, min: number = Number.MIN_VALUE)
+    {
+        return Locale.trans('Length must be greater than :min', { min });
+    },
+
+};
+
+export default NFormRuleMinlength;

package/src/form/js/form-rules/module/NFormRuleRequired.ts

@@ -0,0 +1,25 @@
+import { Arr, Locale, Mix, Obj } from "@kizmann/pico-js";
+import { NFormController as Form } from "../../form/NFormController.ts";
+import { NFormItemController as FormItem } from "../../form-item/NFormItemController.ts";
+
+export const NFormRuleRequired = {
+
+    key: 'required',
+
+    validate(scope: Form, field : FormItem, value : any)
+    {
+        if ( Mix.isBool(value) ) {
+            return value === true;
+        }
+
+        return !Mix.isEmpty(value);
+    },
+
+    message(scope: Form, field : FormItem, value : any)
+    {
+        return Locale.trans('Field is required');
+    },
+
+};
+
+export default NFormRuleRequired;

package/src/form/js/form-rules/module/NFormRuleRequiredIf.ts

@@ -0,0 +1,37 @@
+import { Arr, Locale, Mix, Obj } from "@kizmann/pico-js";
+import { NFormController as Form } from "../../form/NFormController.ts";
+import { NFormItemController as FormItem } from "../../form-item/NFormItemController.ts";
+
+export const NFormRuleRequiredIf = {
+
+    key: 'required_if',
+
+    validate(scope: Form, field : FormItem, value : any, key : string = '')
+    {
+        let target = Obj.get(scope.data.form, key);
+
+        if ( Mix.isEmpty(target) ) {
+            return true;
+        }
+
+        if ( Mix.isBool(value) ) {
+            return value === true;
+        }
+
+        return !Mix.isEmpty(value);
+    },
+
+    message(scope: Form, field : FormItem, value : any, key = '')
+    {
+        let label = Arr.find(scope.childs, (item : any) => {
+            return item.data.prop === key;
+        });
+
+        return Locale.trans('Field is required if :label isset', {
+            label: label?.data.label || key
+        });
+    },
+
+};
+
+export default NFormRuleRequiredIf;

package/src/form/js/form-rules/module/NFormRuleRequiredUnless.ts

@@ -0,0 +1,37 @@
+import { Arr, Locale, Mix, Obj } from "@kizmann/pico-js";
+import { NFormController as Form } from "../../form/NFormController.ts";
+import { NFormItemController as FormItem } from "../../form-item/NFormItemController.ts";
+
+export const NFormRuleRequiredUnless = {
+
+    key: 'required_unless',
+
+    validate(scope: Form, field : FormItem, value : any, key : string = '')
+    {
+        let target = Obj.get(scope.data.form, key);
+
+        if ( !Mix.isEmpty(target) ) {
+            return true;
+        }
+
+        if ( Mix.isBool(value) ) {
+            return value === true;
+        }
+
+        return !Mix.isEmpty(value);
+    },
+
+    message(scope: Form, field : FormItem, value : any, key : string = '')
+    {
+        let label = Arr.find(scope.childs, (item : any) => {
+            return item.data.prop === key;
+        });
+
+        return Locale.trans('Field is required unless :label isset', {
+            label: label?.data.label || key
+        });
+    },
+
+};
+
+export default NFormRuleRequiredUnless;

package/src/form/js/form-rules/module/NFormRuleSame.ts

@@ -0,0 +1,27 @@
+import { Arr, Locale, Mix, Obj } from "@kizmann/pico-js";
+import { NFormController as Form } from "../../form/NFormController.ts";
+import { NFormItemController as FormItem } from "../../form-item/NFormItemController.ts";
+
+export const NFormRuleSame = {
+
+    key: 'same',
+
+    validate(scope: Form, field : FormItem, value : any, key : string = '')
+    {
+        return value === Obj.get(scope.data.form, key);
+    },
+
+    message(scope: Form, field : FormItem, value : any, key : string = '')
+    {
+        let label = Arr.find(scope.childs, (item : any) => {
+            return item.data.prop === key;
+        });
+
+        return Locale.trans('Must be same as :label', {
+            label: label?.data.label || key
+        });
+    },
+
+};
+
+export default NFormRuleSame;

package/src/form/js/form-rules/module/NFormRuleValue.ts

@@ -0,0 +1,21 @@
+import { Arr, Locale, Mix, Obj } from "@kizmann/pico-js";
+import { NFormController as Form } from "../../form/NFormController.ts";
+import { NFormItemController as FormItem } from "../../form-item/NFormItemController.ts";
+
+export const NFormRuleValue = {
+
+    key: 'value',
+
+    validate(scope: Form, field : FormItem, value : any, val: string = '')
+    {
+        return Mix.str(value) === val;
+    },
+
+    message(scope: Form, field : FormItem, value : any, val: string = '')
+    {
+        return Locale.trans('Must be exact value ":val"', { val });
+    },
+
+};
+
+export default NFormRuleValue;

package/src/index.esm.ts

@@ -0,0 +1,137 @@
+// nano-ui v2
+// ^._.^= ∫ Lilli und Pashi, ich liebe euch
+
+import NSignal from "./signal/index.ts";
+import NInput from "./input/index.ts";
+import NButton from "./button/index.ts";
+import NCheckbox from "./checkbox/index.ts";
+import NRadio from "./radio/index.ts";
+import NSelect from "./select/index.ts";
+import NSwitch from "./switch/index.ts";
+import NCascader from "./cascader/index.ts";
+import NPopover from "./popover/index.ts";
+import NScrollbar from "./scrollbar/index.ts";
+import NResizer from "./resizer/index.ts";
+import NDraggable from "./draggable/index.ts";
+import NTable from "./table/index.ts";
+import NInfo from "./info/index.ts";
+import NEmpty from "./empty/index.ts";
+import NModal from "./modal/index.ts";
+import NLoader from "./loader/index.ts";
+import NDatetime from "./datetime/index.ts";
+import NTransfer from "./transfer/index.ts";
+import NTabs from "./tabs/index.ts";
+import NCollapse from "./collapse/index.ts";
+import NVisuals from "./visuals/index.ts";
+import NPreview from "./preview/index.ts";
+import NSlider from "./slider/index.ts";
+import NForm from "./form/index.ts";
+import NConfig from "./config/index.ts";
+import NChart from "./chart/index.ts";
+import NMap from "./map/index.ts";
+import ctor from "./root/js/legacy/ctor.ts";
+import cmer from "./root/js/legacy/cmer.ts";
+import cslo from "./root/js/legacy/cslo.ts";
+
+const NanoImports = [
+    NSignal,
+    NInput,
+    NButton,
+    NCheckbox,
+    NRadio,
+    NSelect,
+    NSwitch,
+    NPopover,
+    NScrollbar,
+    NResizer,
+    NDraggable, // copy und remove funktion
+    NTable,
+    NInfo,
+    NEmpty,
+    NCascader,
+    NModal,
+    NLoader,
+    NDatetime,
+    NTransfer,
+    NTabs,
+    NCollapse,
+    NVisuals,
+    NPreview,
+    NSlider,
+    NForm, // form-frame inview fixen
+    NConfig,
+    NChart,
+    NMap,
+];
+
+export const Icons = {
+    handle: 'fa fa-ellipsis-v',
+    checked: 'fa fa-check',
+    circle: 'fa fa-circle',
+    intermediate: 'fa fa-minus',
+    clock: 'fa fa-clock',
+    calendar: 'fa fa-calendar',
+    times: 'fa fa-times',
+    primary: 'fa fa-info-circle',
+    secondary: 'fa fa-info-circle',
+    success: 'fa fa-check-circle',
+    warning: 'fa fa-exclamation-circle',
+    danger: 'fa fa-times-circle',
+    info: 'fa fa-info-circle',
+    angleUp: 'fa fa-angle-up',
+    angleRight: 'fa fa-angle-right',
+    angleDown: 'fa fa-angle-down',
+    angleLeft: 'fa fa-angle-left',
+    angleDoubleLeft: 'fa fa-angle-double-left',
+    angleDoubleRight: 'fa fa-angle-double-right'
+};
+
+export function Install(App : any, Icons : any = {}, Settings : any = {})
+{
+    if ( typeof globalThis.pi === 'undefined' ) {
+        return console.error('pico-js is not available.');
+    }
+
+    // Obj.each(window.pi, (value, key) => {
+    //     App.config.globalProperties[key] = value;
+    // });
+
+    App.config.globalProperties.ctor = ctor;
+    App.config.globalProperties.cmer = cmer;
+    App.config.globalProperties.cslo = cslo;
+
+    if ( ! App.config.globalProperties.Notify ) {
+        App.config.globalProperties.Notify = globalThis.Notify;
+    }
+
+    if ( ! App.config.globalProperties.Alert ) {
+        App.config.globalProperties.Alert = globalThis.Alert;
+    }
+
+    if ( ! App.config.globalProperties.Confirm ) {
+        App.config.globalProperties.Confirm = globalThis.Confirm;
+    }
+
+    if ( ! App.config.globalProperties.trans ) {
+        App.config.globalProperties.trans = globalThis.pi.Locale.trans;
+    }
+
+    if ( ! App.config.globalProperties.choice ) {
+        App.config.globalProperties.choice = globalThis.pi.Locale.choice;
+    }
+
+    NanoImports.forEach((NanoModule) => {
+        NanoModule(App);
+    });
+
+}
+
+export const Nano = {
+    Install, /* Legacy */ Icons: {}
+};
+
+if ( !globalThis.nano ) {
+    globalThis.nano = Nano;
+}
+
+export default Nano;

package/src/index.scss

@@ -1,44 +1,30 @@
 @forward "./empty/index";
-@forward "./alert/index";
-@forward "./notification/index";
 @forward "./scrollbar/index";
 @forward "./resizer/index";
-@forward "./virtualscroller/index";
 @forward "./draggable/index";
 @forward "./loader/index";
 @forward "./form/index";
 @forward "./button/index";
 @forward "./input/index";
-@forward "./input-number/index";
-@forward "./textarea/index";
 @forward "./slider/index";
 @forward "./switch/index";
 @forward "./checkbox/index";
 @forward "./radio/index";
 @forward "./select/index";
 @forward "./cascader/index";
-@forward "./datepicker/index";
-@forward "./timepicker/index";
-@forward "./datetimepicker/index";
-@forward "./durationpicker/index";
+@forward "./datetime/index";
 @forward "./transfer/index";
-@forward "./file/index";
 @forward "./popover/index";
 @forward "./modal/index";
-@forward "./confirm/index";
+@forward "./signal/index";
 @forward "./table/index";
-@forward "./paginator/index";
 @forward "./tabs/index";
-@forward "./tags/index";
+@forward "./visuals/index";
 @forward "./collapse/index";
 @forward "./info/index";
 @forward "./map/index";
 @forward "./preview/index";
-@forward "./rating/index";
-@forward "./config/index";
-@forward "./drawer/index";
-@forward "./tooltip/index";
-@forward "./grid/index";
+@forward "./root/index";
 @forward "./chart/index";
 
 .n-disabled:not(.n-draglist-item) {

package/src/info/css/info-column.scss

@@ -0,0 +1,9 @@
+@use "../../root/css/helpers" as *;
+
+.n-info-column:not(:last-child) {
+    margin-bottom: size('base-pad');
+}
+
+.n-info-column__label {
+    font-size: size('base-fnt-label');
+}

package/src/info/{src/info-field → css}/info-field.scss

@@ -1,9 +1,10 @@
-@use "../../../root/helpers" as *;
+@use "../../root/css/helpers" as *;
 
-.n-info-field {
+.n-info-cell {
     position: relative;
     display: flex;
     flex-direction: column;
     align-items: stretch;
     justify-content: stretch;
+    font-size: size('base-fnt');
 }

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

@@ -1,4 +1,4 @@
-@use "../../../root/helpers" as *;
+@use "../../root/css/helpers" as *;
 
 .n-info {
     position: relative;
@@ -22,8 +22,4 @@
 .n-info__empty {
     margin: auto;
     padding: size('base-pad', 'calc($ * 2)') size('base-pad');
-}
-
-.n-info__column:not(:last-child) {
-    margin-bottom: size('base-pad');
 }

package/src/info/index.scss

@@ -1,3 +1,3 @@
-@forward "./src/info/info";
-@forward "./src/info-column/info-column";
-@forward "./src/info-field/info-field";
+@forward "./css/info";
+@forward "./css/info-column";
+@forward "./css/info-field";

package/src/info/index.ts

@@ -0,0 +1,21 @@
+import { App } from "vue";
+import NInfo from "./js/info/NInfo.ts";
+import NInfoColumn from "./js/info-column/NInfoColumn.ts";
+import NTableCellString from "../table/js/table-cell/NTableCellString.ts";
+import NTableCellBoolean from "../table/js/table-cell/NTableCellBoolean.ts";
+import NTableCellDatetime from "../table/js/table-cell/NTableCellDatetime.ts";
+import NTableCellImage from "../table/js/table-cell/NTableCellImage.ts";
+import NTableCellOption from "../table/js/table-cell/NTableCellOption.ts";
+
+export default function (App : App) {
+    App.component(NInfo.name, NInfo);
+    App.component(NInfoColumn.name, NInfoColumn);
+}
+
+globalThis.NInfoCells = {
+    'string': NTableCellString,
+    'boolean': NTableCellBoolean,
+    'datetime': NTableCellDatetime,
+    'image': NTableCellImage,
+    'option': NTableCellOption,
+};

package/src/info/js/info/NInfo.ts

@@ -0,0 +1,78 @@
+import { PropType, defineComponent } from "vue";
+import { Props } from "../../../root/index.ts";
+import { NInfoController } from "./NInfoController.ts";
+import { Locale } from "@kizmann/pico-js";
+
+export const NInfoProps = {
+
+    ...Props.Size,
+    ...Props.Type,
+
+    /**
+     * @type {PropType<object>}
+     */
+    item: {
+        type: [Object], default: null
+    },
+
+    /**
+     * @type {PropType<function>}
+     */
+    syncEvent: {
+        type: [Function], default: null
+    },
+
+    /**
+     * @type {PropType<boolean>}
+     */
+    scrollbar: {
+        type: [Boolean], default: false
+    },
+
+    /**
+     * @type {PropType<boolean>}
+     */
+    renderEmpty: {
+        type: [Boolean], default: true
+    },
+
+    /**
+     * @type {PropType<string>}
+     */
+    emptyText: {
+        type: [String], default: () => Locale.trans('No item')
+    },
+
+};
+
+export default defineComponent({
+
+    /**
+     * @type {string}
+     */
+    name: 'NInfo',
+
+    /**
+     * @type {typeof NInfoProps}
+     */
+    props: NInfoProps,
+
+    /**
+     * @type {string[]}
+     */
+    emits: [
+        //
+    ],
+
+    setup(props, context)
+    {
+        let ncx = new NInfoController(props, context);
+
+        ncx.dispose(() => {
+            ncx = null;
+        });
+
+        return ncx.render();
+    }
+
+});

package/src/info/js/info/NInfoController.ts

@@ -0,0 +1,47 @@
+import { provide, SetupContext } from "vue";
+import { GroupController } from "../../../root/index.ts";
+import { NInfoView } from "./NInfoView.ts";
+import { NInfoData } from "./NInfoData.ts";
+
+
+export class NInfoController extends GroupController
+{
+    /**
+     * @type {NInfoController}
+     */
+    declare scope : NInfoController;
+
+    /**
+     * @type {NInfoData}
+     */
+    declare data: NInfoData;
+
+    /**
+     * @type {NInfoView}
+     */
+    declare view: NInfoView;
+
+    constructor(props:any, context:SetupContext)
+    {
+        super(props, context);
+
+        [this.view, this.data] = [
+            new NInfoView(this),
+            new NInfoData(this),
+        ];
+
+        this.setup();
+    }
+
+    setup()
+    {
+        super.setup();
+
+        provide('NInfo', this.instance);
+
+        return this;
+    }
+
+}
+
+export default NInfoController;

package/src/info/js/info/NInfoData.ts

@@ -0,0 +1,39 @@
+import { ProtoData } from "../../../root/index.ts";
+import NInfoController from "./NInfoController.ts";
+
+export class NInfoData extends ProtoData
+{
+    /**
+     * @type {NInfoController}
+     */
+    declare scope : NInfoController;
+
+    get classList() : string[]
+    {
+        return this.classRoot([]);
+    }
+
+    get item() : string
+    {
+        return this.scope.get('item');
+    }
+
+    get syncEvent() : Function
+    {
+        return this.scope.get('syncEvent');
+    }
+
+    get scrollbar() : boolean
+    {
+        return this.scope.get('scrollbar');
+    }
+
+    get renderEmpty() : boolean
+    {
+        return this.scope.get('renderEmpty');
+    }
+
+
+}
+
+export default NInfoData;

package/src/info/js/info/NInfoView.ts

@@ -0,0 +1,54 @@
+import { h } from "vue";
+import { Arr } from "@kizmann/pico-js";
+import { ProtoView } from "../../../root/index.ts";
+import { NInfoController } from "./NInfoController.ts";
+
+export class NInfoView extends ProtoView
+{
+    /**
+     * @type {NInfoController}
+     */
+    declare scope : NInfoController;
+
+    /**
+     * @type {string}
+     */
+    bem : string = 'n-info';
+
+    default() : any
+    {
+        let { scope, data } = this.scope;
+
+        let props : any = {
+            class: data.classList,
+        };
+
+        const slots = [
+            this.body()
+        ];
+
+        if ( ! data.scrollbar ) {
+            return h('div', props, slots);
+        }
+
+        return this.comp('n-scrollbar', props, () => {
+            return slots;
+        });
+    }
+
+    body() : any
+    {
+        const { data } = this.scope;
+
+        if ( data.item ) {
+            return this.div('body', [this.slot()]);
+        }
+
+        return this.div('empty', [
+            this.empty({ inline: false })
+        ]);
+    }
+
+}
+
+export default NInfoView;

package/src/info/js/info-cell/NInfoCellString.ts

@@ -0,0 +1,15 @@
+import { h } from "vue";
+import { Str } from "@kizmann/pico-js";
+
+export const NInfoString = ({ props, input }) => {
+
+    const value = Str.string(input);
+
+    props = {
+        ...props, innerHTML: `<span>${value}</span>`
+    };
+
+    return h('div', props);
+};
+
+export default NInfoString;