not-bulma 2.0.4 → 2.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "not-bulma",
-  "version": "2.0.4",
+  "version": "2.0.6",
   "description": "not-* family UI components on Bulma CSS Framework",
   "main": "src/index.js",
   "svelte": "src/index.js",

package/src/elements/button/ui.buttons.svelte

@@ -1,8 +1,8 @@
 <script>
-    import { createEventDispatcher } from "svelte";
-    const dispatch = createEventDispatcher();
-    import UIButton from "./ui.button.svelte";
+    import { onMount } from "svelte";
+    import UICommon from "../common";
 
+    import UIButton from "./ui.button.svelte";
 
     /**
      * @typedef {Object} Props
@@ -21,10 +21,15 @@
         right = false,
         classes = "",
         buttonComponent = UIButton,
+        onclick = () => {},
         action = (e) => {
-        dispatch("click", e);
-    }
+            onclick(e);
+        },
     } = $props();
+
+    if (!values.every((itm) => Object.hasOwn(itm, "id"))) {
+        values = UICommon.addIds(values);
+    }
 </script>
 
 <div
@@ -32,13 +37,15 @@
         ? 'is-right'
         : ''} {classes}"
 >
-    {#each values as item (item.id)}
-        {@const SvelteComponent = buttonComponent}
-        <SvelteComponent
-            {...item}
-            bind:value={item.value}
-            action={item.action ? item.action : action}
-            on:click
-        />
-    {/each}
+    {#if Array.isArray(values)}
+        {#each values as item (item.id)}
+            {@const SvelteComponent = buttonComponent}
+            <SvelteComponent
+                {...item}
+                bind:value={item.value}
+                action={item.action ? item.action : action}
+                {onclick}
+            />
+        {/each}
+    {/if}
 </div>

package/src/elements/common.js

@@ -169,4 +169,11 @@ export default class UICommon {
             return `${hours} ${unit} назад`;
         }
     }
+
+    static addIds(arr, fieldName = 'id'){
+        return arr.map((itm, index)=>{
+            itm[fieldName] = index;
+            return itm;
+        });
+    }
 }

package/src/elements/form/ui.json.area.svelte

@@ -67,7 +67,7 @@
     }
 
     function onChange(ev) {
-        validateValueAndChange(ev.detail.value);
+        validateValueAndChange(ev.value);
         return true;
     }
 </script>

package/src/elements/form/ui.list.of.models.svelte

@@ -168,7 +168,7 @@
         bind:errors
         bind:formErrors
         bind:formLevelError
-        on:resolve={(e) => addItem(e.detail)}
+        on:resolve={(e) => addItem(e)}
         {onchange}
     />
 {/if}

package/src/elements/form/ui.select.from.model.svelte

@@ -100,11 +100,11 @@
     function onChange(e) {
         if (returnVariant) {
             onchange({
-                ...e.detail,
-                value: variants.find((itm) => itm.id === e.detail.value),
+                ...e,
+                value: variants.find((itm) => itm.id === e.value),
             });
         } else {
-            onchange(e.detail);
+            onchange(e);
         }
     }
 </script>

package/src/elements/image/ui.images.svelte

@@ -3,6 +3,6 @@
     let { values = [] } = $props();
 </script>
 
-{#each values as item (item.url)}
+{#each values as item (item.href)}
     <UIImage {...item} on:click />
 {/each}

package/src/elements/link/ui.link.svelte

@@ -1,16 +1,10 @@
 <script>
-    import { run } from 'svelte/legacy';
-
+    import { getContext, hasContext, onMount } from "svelte";
     import { LOCALE } from "../../locale";
-    
-    
-
-    
-
     /**
      * @typedef {Object} Props
      * @property {string} [title] - attributes
-     * @property {string} [url]
+     * @property {string} [href]
      * @property {any} download
      * @property {string} [target]
      * @property {any} rel
@@ -35,7 +29,7 @@
     /** @type {Props} */
     let {
         title = "",
-        url = "",
+        href = "",
         download,
         target = "_blank",
         rel,
@@ -50,40 +44,38 @@
         type = "",
         color = "",
         size = "",
-        classes = $bindable(""),
+        class: classes = "",
         icon = false,
         iconSide = "right",
-        action = () => {
-        return true;
-    },
-        children
+        action: onclick = () => {
+            return true;
+        },
+        children,
     } = $props();
 
-    run(() => {
-        classes =
-            (button ? "button " : "") +
-            (state && state.length > 0 ? ` is-${state} ` : "") +
-            (light ? ` is-light ` : "") +
-            (type && type.length > 0 ? ` is-${type} ` : "") +
-            (size && size.length > 0 ? ` is-${size} ` : "");
-    });
+    const root = hasContext("root") ? getContext("root") || "" : "";
 </script>
 
 <a
-    onclick={action}
+    {onclick}
     {target}
-    href={url}
+    href={root + href}
     {download}
     {rel}
-    class="{classes} {state ? `is-${state}` : ''} {inverted
-        ? `is-inverted`
-        : ''} {outlined ? `is-outlined` : ''} {raised
-        ? `is-raised`
-        : ''} {rounded ? `is-rounded` : ''} {light ? `is-light` : ''} {loading
-        ? `is-loading`
-        : ''} {color ? `is-${color}` : ''} {type ? `is-${type}` : ''} {size
-        ? `is-${size}`
-        : ''}"
+    class={[
+        classes,
+        button && "button",
+        inverted && "is-inverted",
+        outlined && "is-outlined",
+        raised && "is-raised",
+        rounded && "is-rounded",
+        loading && "is-loading",
+        light && `is-light`,
+        color && `is-${color}`,
+        state && `is-${state}`,
+        type && `is-${type}`,
+        size && `is-${size}`,
+    ]}
 >
     {#if icon}
         {#if iconSide === "left"}

package/src/elements/modal/ui.generic.selector.svelte

@@ -1,117 +1,95 @@
 <script>
-    import {LOCALE} from '../../locale';
-    import UIButtons from '../button/ui.buttons.svelte';
-    import UIOverlay from './ui.overlay.svelte';
-  
-    import {UIEndlessList} from '../list/endless';
-    import UISimpleSearchInput from '../various/ui.simple.search.input.svelte';
-       
-    import {
-      onMount,
-      createEventDispatcher
-    } from 'svelte';
-  
-    let dispatch = createEventDispatcher();
-      
-  
-  /**
-   * @typedef {Object} Props
-   * @property {boolean} [show]
-   * @property {string} [term]
-   * @property {string} [size]
-   * @property {any} [inputComponent]
-   * @property {any} [inputComponentProps]
-   * @property {any} [outputComponent]
-   * @property {any} [outputComponentProps]
-   * @property {any} [results]
-   */
+    import { LOCALE } from "../../locale";
+    import UIButtons from "../button/ui.buttons.svelte";
+    import UIOverlay from "./ui.overlay.svelte";
+
+    import { UIEndlessList } from "../list/endless";
+    import UISimpleSearchInput from "../various/ui.simple.search.input.svelte";
+
+    import { onMount } from "svelte";
+
+    /**
+     * @typedef {Object} Props
+     * @property {boolean} [show]
+     * @property {string} [term]
+     * @property {string} [size]
+     * @property {any} [inputComponent]
+     * @property {any} [inputComponentProps]
+     * @property {any} [outputComponent]
+     * @property {any} [outputComponentProps]
+     * @property {any} [results]
+     */
+
+    /** @type {Props} */
+    let {
+        show = true,
+        term = $bindable(""),
+        size = "narrow",
+        inputComponent = UISimpleSearchInput,
+        inputComponentProps = {},
+        outputComponent = UIEndlessList,
+        outputComponentProps = {},
+        results = $bindable({ list: [], page: 0, pages: 0, skip: 0, count: 0 }),
+        onreject = () => {},
+        onresolve = () => {},
+        onTermChange = () => {},
+        onprev = () => {},
+        onnext = () => {},
+    } = $props();
+
+    onMount(() => {});
 
-  /** @type {Props} */
-  let {
-    show = true,
-    term = $bindable(''),
-    size = 'narrow',
-    inputComponent = UISimpleSearchInput,
-    inputComponentProps = {},
-    outputComponent = UIEndlessList,
-    outputComponentProps = {},
-    results = $bindable({list:[], page:0, pages:0,skip:0,count:0})
-  } = $props();
-  
-     
-    onMount(() => {
-      
-    });
-  
     const buttons = [
-      {
-        title: $LOCALE['not-node:button_cancel_label'],
-        action: () => reject(),
-      }
+        {
+            title: $LOCALE["not-node:button_cancel_label"],
+            action: onreject,
+        },
     ];
-  
-    function overlayClosed() {
-      dispatch('reject');
-    }
-  
-    function select({
-      detail
-    }) {
-      console.log('selected user', detail);
-      dispatch('resolve', detail);
-    }
-  
-    function reject(){
-      dispatch('reject');
-    }
-  
-   
-  </script>
-  
-  
-  <UIOverlay on:reject="{overlayClosed}" {show} closeOnClick={true} closeButton={false}>
+</script>
+
+<UIOverlay {onreject} {show} closeOnClick={true} closeButton={false}>
     {@const SvelteComponent = inputComponent}
     {@const SvelteComponent_1 = outputComponent}
     <div class="paper box block {size}">
-      <SvelteComponent on:termChange bind:term={term} {...inputComponentProps}></SvelteComponent>
-      <SvelteComponent_1 
-        bind:data={results} 
-          on:prev
-          on:next
-          on:select={select}
-          {...outputComponentProps}
+        <SvelteComponent {onTermChange} bind:term {...inputComponentProps}
+        ></SvelteComponent>
+        <SvelteComponent_1
+            bind:data={results}
+            {onprev}
+            {onnext}
+            onselect={onresolve}
+            {...outputComponentProps}
         ></SvelteComponent_1>
-        <UIButtons values={buttons} centered={true} classes="mt-5"/>
+        <UIButtons values={buttons} centered={true} classes="mt-5" />
     </div>
-  </UIOverlay>
-  
-  <style>
+</UIOverlay>
+
+<style>
     .paper.box {
-      margin: 10vh auto auto auto;
+        margin: 10vh auto auto auto;
     }
-  
-    .paper.box.fullscreen{
-      width: 100vw;
+
+    .paper.box.fullscreen {
+        width: 100vw;
     }
-  
-    .paper.box.wide{
-      width: 75vw;
+
+    .paper.box.wide {
+        width: 75vw;
     }
-  
-    .paper.box.normal{
-      width: 50vw;
+
+    .paper.box.normal {
+        width: 50vw;
     }
-  
-    .paper.box.narrow{
-      width: 25vw;
-    }  
-  
+
+    .paper.box.narrow {
+        width: 25vw;
+    }
+
     @media (max-width: 700px) {
-      .paper.box {
-        width: 100vw;
-        height: 100vh;
-        margin: 0vh auto auto auto;
-      }
+        .paper.box {
+            width: 100vw;
+            height: 100vh;
+            margin: 0vh auto auto auto;
+        }
     }
-  </style>
-  
+</style>

package/src/elements/modal/ui.overlay.svelte

@@ -1,16 +1,14 @@
 <script>
-    import { run } from 'svelte/legacy';
+    import { run } from "svelte/legacy";
 
     let overflowSave = $state("");
 
     import { fade } from "svelte/transition";
 
-    import { createEventDispatcher, onMount, onDestroy } from "svelte";
+    import { onMount, onDestroy } from "svelte";
 
     const zIndexStep = 1000;
 
-    const dispatch = createEventDispatcher();
-
     /**
      * @typedef {Object} Props
      * @property {boolean} [closeButton]
@@ -30,7 +28,8 @@
         closeSize = "normal",
         layer = 1,
         classes = "",
-        children
+        children,
+        onreject = () => {},
     } = $props();
 
     run(() => {
@@ -62,11 +61,11 @@
                     rejectOverlay();
                 }
             }
-        } catch (_) {}
+        } catch {}
     }
 
     function rejectOverlay(data = {}) {
-        dispatch("reject", data);
+        onreject(data);
     }
     /*
 	function resolveOverlay(data = {}) {
@@ -93,7 +92,8 @@
         style="z-index: {zIndexStep * layer};"
     >
         {#if closeButton}
-            <button onclick={closeButtonClick} class="delete is-{closeSize}"></button>
+            <button onclick={closeButtonClick} class="delete is-{closeSize}"
+            ></button>
         {/if}
         {@render children?.()}
     </div>

package/src/elements/navigation/item/ui.navbar.item.svelte

@@ -4,7 +4,7 @@
     import UINavbarItemContent from "./primitives/ui.navbar.item.content.svelte";
     import UINavbarItemDevider from "./primitives/ui.navbar.item.devider.svelte";
 
-    let { class: classes = "", item, children, ...other } = $props();
+    let { class: classes = "", item, children, url, ...other } = $props();
 </script>
 
 {#if item.break}

package/src/elements/navigation/menu/ui.navbar.menu.svelte

@@ -15,6 +15,7 @@
         onclick,
         class: classes = "",
         children,
+        url,
         ...other
     } = $props();
 
@@ -50,7 +51,12 @@
     <UINavbarMenuStart>
         {#each items as item (item.id)}
             {#if placeIs(item.place, "start")}
-                <UINavbarItemGeneric hidden="touch" {root} {item} {onclick}
+                <UINavbarItemGeneric
+                    hidden="touch"
+                    {root}
+                    {item}
+                    {onclick}
+                    {url}
                 ></UINavbarItemGeneric>
             {/if}
         {/each}
@@ -61,6 +67,7 @@
                 <UINavbarItemGeneric
                     hidden="touch"
                     {root}
+                    {url}
                     {item}
                     {onclick}
                     right={true}

package/src/elements/navigation/ui.navbar.svelte

@@ -18,15 +18,16 @@
         burgerControlsSidemenu = true,
         class: classes = "",
         onclick = () => {},
+        url,
     } = $props();
 
-    onMount(() => {
-        setContext("root", root);
-        setContext("navigate", navigate);
-        setContext("burgerControlsSidemenu", burgerControlsSidemenu);
-        setContext("navbarId", id);
-        setContext("onclick", onclick);
-    });
+    setContext("root", root);
+    setContext("navigate", navigate);
+    setContext("burgerControlsSidemenu", burgerControlsSidemenu);
+    setContext("navbarId", id);
+    setContext("onclick", onclick);
+
+    onMount(() => {});
 
     function onBurgerClick() {
         active = !active;
@@ -44,5 +45,5 @@
     {:else if burger}
         <UINavbarBurger {active} onclick={onBurgerClick}></UINavbarBurger>
     {/if}
-    <UINavbarMenu {active} {items}></UINavbarMenu>
+    <UINavbarMenu {active} {items} {url}></UINavbarMenu>
 </UINavbarWrapper>

package/src/elements/various/ui.select.from.model.on.demand.inline.svelte

@@ -5,8 +5,7 @@
     import notCommon from "../../frame/common";
     import { DEFAULT_STATUS_SUCCESS } from "../../frame/const";
 
-    import { onMount, createEventDispatcher } from "svelte";
-    const dispatch = createEventDispatcher();
+    import { onMount } from "svelte";
 
     /**
      * @typedef {Object} Props
@@ -59,7 +58,9 @@
         validated = false,
         errors = $bindable(false),
         formErrors = false,
-        formLevelError = false
+        formLevelError = false,
+        onreject = () => {},
+        onresolve = () => {},
     } = $props();
 
     function argumentsSetProvided() {
@@ -117,7 +118,7 @@
             color: "primary",
             action() {
                 state = "hidden";
-                dispatch("resolve", resolvedValue);
+                onresolve(resolvedValue);
             },
         },
         reject: {
@@ -125,7 +126,7 @@
             color: "danger",
             action() {
                 state = "hidden";
-                dispatch("reject");
+                onreject();
             },
         },
     };
@@ -152,7 +153,7 @@
             {errors}
             {formErrors}
             {formLevelError}
-            on:change={onModelChanged}
+            onchange={onModelChanged}
         />
     </div>
     <div class="control">

package/src/elements/various/ui.select.from.model.with.search.modal.svelte

@@ -1,20 +1,11 @@
 <script>
-    import { run } from 'svelte/legacy';
+    import { run } from "svelte/legacy";
 
     import notCommon from "../../frame/common";
 
     import { UIButtons } from "../button";
 
-    import { createEventDispatcher, onMount } from "svelte";
-    let dispatch = createEventDispatcher();
-
-
-    
-
-    
-    
-    
-    
+    import { onMount } from "svelte";
 
     /**
      * @typedef {Object} Props
@@ -47,7 +38,8 @@
         loading = $bindable(false),
         selectedModelTitleFormatter = (data) => `${data._id}`,
         loadingLabel = "not-node:loading_label",
-        isEmptyLabel = "not-node:field_value_is_empty_placeholder"
+        isEmptyLabel = "not-node:field_value_is_empty_placeholder",
+        onchange = () => {},
     } = $props();
 
     function getService() {
@@ -68,7 +60,7 @@
             })
             .then((value) => {
                 inputStarted = true;
-                dispatch("change", {
+                onchange({
                     field: fieldname,
                     value,
                 });
@@ -81,7 +73,7 @@
     function resetSelectedModel() {
         value = undefined;
         modelData = null;
-        dispatch("change", {
+        onchange({
             field: fieldname,
             value,
         });

package/src/frame/app.js

@@ -142,7 +142,7 @@ class notApp extends notBase {
         //создать контроллеры
         //роутер и привязать к нему контроллеры
         this.execRouter();
-        this.emit("afterStarted", this);
+        this.emit("onAfterStarted", this);
     }
 
     /**

package/src/frame/base.js

@@ -101,7 +101,7 @@ export default class notBase extends EventEmitter {
         } else {
             this.setCommon(this.getData(), arguments);
         }
-        this.emit("change");
+        this.emit("onchange");
         return this;
     }
 
@@ -150,6 +150,6 @@ export default class notBase extends EventEmitter {
         this.setOptions(null);
         this.setWorking(null);
         this.setData(null);
-        this.emit("destroy");
+        this.emit("ondestroy");
     }
 }