not-bulma 1.2.15 → 1.2.17

package/package.json

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

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

@@ -35,12 +35,14 @@
             <div class="pageloader {loading ? 'is-active' : ''}">
                 <span class="title">{$LOCALE[WAITING_TEXT]}</span>
             </div>
+
             {#if buttonsPosition === "top"}
                 <UIButtonsRow
                     left={closeButton ? [closeButton] : []}
                     right={applyButton ? [applyButton] : []}
                 ></UIButtonsRow>
             {/if}
+
             <slot />
 
             {#if buttonsPosition === "bottom"}

package/src/elements/various/ui.indicator.svelte

@@ -1,67 +1,68 @@
 <script>
-  import {onMount} from 'svelte';
-  import notCommon from '../../frame/common';
-  //if we want to address this indicator
-  export let id = 'tagId';
+    import { onMount } from "svelte";
+    import notCommon from "../../frame/common";
+    //if we want to address this indicator
+    export let id = "tagId";
 
-  export let state = 'light';
-  export let size = 'normal';
-  export let labels = {
-    black: 'black',
-    dark: 'dark',
-    light: 'light',
-    white: 'white',
-    primary: 'primary',
-    link: 'link',
-    info: 'info',
-    success: 'success',
-    warning: 'warning',
-    danger: 'danger'
-  };
-  export let classes = 'mx-1';
+    export let state = "light";
+    export let size = "normal";
+    export let labels = {
+        black: "black",
+        dark: "dark",
+        light: "light",
+        white: "white",
+        primary: "primary",
+        link: "link",
+        info: "info",
+        success: "success",
+        warning: "warning",
+        danger: "danger",
+    };
+    export let classes = "mx-1";
 
-  export let padding = 'normal';
-  export let bold = false;
+    export let padding = "normal";
+    export let bold = false;
 
-  export let right = false;
-  export let left = false;
-  export let top = false;
-  export let bottom = false;
+    export let right = false;
+    export let left = false;
+    export let top = false;
+    export let bottom = false;
 
-  let sided = false;
-  $: sided = right || left || top || bottom;
+    let sided = false;
+    $: sided = right || left || top || bottom;
 
+    export let events = {}; //events to react on
+    //register event handlers
+    export let register = notCommon.registerWidgetEvents.bind(notCommon);
+    //
+    export let onUpdate = (data) => {
+        if (Object.hasOwn(data, "state")) {
+            state = data.state;
+        }
+    };
 
-  export let events = {};        //events to react on
-  //register event handlers
-  export let register = notCommon.registerWidgetEvents.bind(notCommon);
-  //
-  export let onUpdate = (data)=>{
-    if (Object.prototype.hasOwnProperty.call(data, 'state')){
-      state = data.state;
+    function getStandartUpdateEventName() {
+        return `indicator-${id}:update`;
     }
-  };
 
-  function getStandartUpdateEventName(){
-    return `indicator-${id}:update`;
-  }
-
-  onMount(()=>{
-    if (!Object.prototype.hasOwnProperty.call(events, getStandartUpdateEventName())){
-      events[getStandartUpdateEventName()] = onUpdate;
-    }
-    register(events);
-  });
+    onMount(() => {
+        if (!Object.hasOwn(events, getStandartUpdateEventName())) {
+            events[getStandartUpdateEventName()] = onUpdate;
+        }
+        register(events);
+    });
 </script>
 
-<span class="tag
+<span
+    class="tag
 is-{size}
-{bold?'has-text-weight-bold':''}
-{padding!=='normal'?`is-padded-${padding}`:''}
-{sided?'is-sided':''}
-{right?'is-sided-right':''}
-{left?'is-sided-left':''}
-{top?'is-sided-top':''}
-{bottom?'is-sided-bottom':''}
+{bold ? 'has-text-weight-bold' : ''}
+{padding !== 'normal' ? `is-padded-${padding}` : ''}
+{sided ? 'is-sided' : ''}
+{right ? 'is-sided-right' : ''}
+{left ? 'is-sided-left' : ''}
+{top ? 'is-sided-top' : ''}
+{bottom ? 'is-sided-bottom' : ''}
   is-{state} {classes}
-  ">{labels[state]}</span>
+  ">{labels[state]}</span
+>

package/src/elements/various/ui.tag.svelte

@@ -26,22 +26,21 @@
     export let register = notCommon.registerWidgetEvents.bind(notCommon);
     //
     export let onUpdate = (data) => {
-        if (Object.prototype.hasOwnProperty.call(data, "title")) {
+        if (Object.hasOwn(data, "title")) {
             title = data.title;
         }
     };
 
+    export let action = () => {
+        return true;
+    };
+
     function getStandartUpdateEventName() {
         return `tag-${id}:update`;
     }
 
     onMount(() => {
-        if (
-            !Object.prototype.hasOwnProperty.call(
-                events,
-                getStandartUpdateEventName()
-            )
-        ) {
+        if (!Object.hasOwn(events, getStandartUpdateEventName())) {
             events[getStandartUpdateEventName()] = onUpdate;
         }
         register(events);
@@ -50,6 +49,7 @@
 
 {#if title}
     <span
+        on:click={action ? action : undefined}
         id="tag-{id}"
         class="
   tag

package/src/elements/various/ui.tag.value.list.svelte

@@ -1,9 +1,15 @@
 <script>
-    import UITagValue from "./ui.tag.value.svelte";
+    import UITagValue from "not-bulma/src/elements/various/ui.tag.value.svelte";
 
     export let value = [];
 </script>
 
-{#each value as tagValueProps}
-    <UITagValue {...tagValueProps} />
-{/each}
+{#if value.length}
+    <div class="field is-grouped is-grouped-multiline">
+        {#each value as tagValueProps}
+            <div class="control">
+                <UITagValue {...tagValueProps} />
+            </div>
+        {/each}
+    </div>
+{/if}

package/src/elements/various/ui.tag.value.svelte

@@ -1,15 +1,26 @@
 <script>
     import UITag from "./ui.tag.svelte";
+    import UIButtons from "../button/ui.buttons.svelte";
 
     //if we want to address this tag
     export let id = "taggedValueId";
     export let title; //UITag props
     export let value; //UITag props
+    export let actions = []; //UIButtons values or for some custom actionsGroupContructor
     export let classes = "";
+    export let actionsGroupContructor = UIButtons;
+    export let actionsGroupProps = {};
+    export let readonly = false; //hides actions if true
 </script>
 
 <div class="tags has-addons {classes}" {id}>
-    {#if title}
-        <UITag {...title} />{/if}{#if value}<UITag {...value} />
+    {#if title}<UITag {...title} />{/if}
+    {#if value}<UITag {...value} />{/if}
+    {#if !readonly && actions && actions.length}
+        <svelte:component
+            this={actionsGroupContructor}
+            values={actions}
+            {...actionsGroupProps}
+        />
     {/if}
 </div>

package/src/elements/various/ui.user.card.svelte

@@ -1,58 +1,56 @@
 <script>
-  import {onMount} from 'svelte';
-  import notCommon from '../../frame/common';
-
-  export let id = 'userCard';
-  export let image = 'https://bulma.io/images/placeholders/32x32.png';
-  export let username = 'John Doe';
-  export let role = 'admin';
-
-  export let events = {};        //events to react on
-  //register event handlers
-  export let register = notCommon.registerWidgetEvents;
-  //
-  export let onUpdate = (data)=>{
-    if (Object.prototype.hasOwnProperty.call(data, 'username')){
-      username = data.username;
+    import { onMount } from "svelte";
+    import notCommon from "../../frame/common";
+
+    export let id = "userCard";
+    export let image = "https://bulma.io/images/placeholders/32x32.png";
+    export let username = "John Doe";
+    export let role = "admin";
+
+    export let events = {}; //events to react on
+    //register event handlers
+    export let register = notCommon.registerWidgetEvents;
+    //
+    export let onUpdate = (data) => {
+        if (Object.hasOwn(data, "username")) {
+            username = data.username;
+        }
+
+        if (Object.hasOwn(data, "role")) {
+            role = data.role;
+        }
+    };
+
+    function getCompId() {
+        return `usercard-${id}`;
     }
 
-    if (Object.prototype.hasOwnProperty.call(data, 'role')){
-      role = data.role;
+    function getStandartUpdateEventName() {
+        let compId = getCompId();
+        return `${compId}:update`;
     }
 
-  };
-
-  function getCompId(){
-    return `usercard-${id}`;
-  }
-
-  function getStandartUpdateEventName(){
-    let compId = getCompId();
-    return `${compId}:update`;
-  }
-
-  onMount(()=>{
-    if (!Object.prototype.hasOwnProperty.call(events, getStandartUpdateEventName())){
-      events[getStandartUpdateEventName()] = onUpdate;
-    }
-    register(events);
-  });
+    onMount(() => {
+        if (!Object.hasOwn(events, getStandartUpdateEventName())) {
+            events[getStandartUpdateEventName()] = onUpdate;
+        }
+        register(events);
+    });
 </script>
 
-
-<article id="{getCompId()}" class="media">
-  <figure class="media-left">
-    <p class="image is-32x32">
-      <img src={image} alt="{username}"/>
-    </p>
-  </figure>
-  <div class="media-content">
-    <div class="content">
-      <p>
-        <strong>{username}</strong>
-        <small>@</small>
-        <strong>{role}</strong>
-      </p>
+<article id={getCompId()} class="media">
+    <figure class="media-left">
+        <p class="image is-32x32">
+            <img src={image} alt={username} />
+        </p>
+    </figure>
+    <div class="media-content">
+        <div class="content">
+            <p>
+                <strong>{username}</strong>
+                <small>@</small>
+                <strong>{role}</strong>
+            </p>
+        </div>
     </div>
-  </div>
 </article>

package/src/frame/base.js

@@ -1,153 +1,152 @@
-import EventEmitter from 'wolfy87-eventemitter';
-import notPath from 'not-path';
+import EventEmitter from "wolfy87-eventemitter";
+import notPath from "not-path";
 
-import notCommon from './common.js';
+import notCommon from "./common.js";
 
-const META_METHOD_INIT = Symbol('init'),
-  META_DATA = Symbol('data'),
-  META_WORKING = Symbol('working'),
-  META_OPTIONS = Symbol('options');
+const META_METHOD_INIT = Symbol("init"),
+    META_DATA = Symbol("data"),
+    META_WORKING = Symbol("working"),
+    META_OPTIONS = Symbol("options");
 
 export default class notBase extends EventEmitter {
-  constructor(input) {
-    super();
-    this[META_DATA] = {};
-    this[META_WORKING] = {};
-    this[META_OPTIONS] = {};
-    this[META_METHOD_INIT](input);
-    return this;
-  }
-
-  [META_METHOD_INIT](input) {
-    if (!input) {
-      input = {};
+    constructor(input) {
+        super();
+        this[META_DATA] = {};
+        this[META_WORKING] = {};
+        this[META_OPTIONS] = {};
+        this[META_METHOD_INIT](input);
+        return this;
     }
 
-    if (Object.prototype.hasOwnProperty.call(input, 'data')) {
-      this.setData(input.data);
-    }
+    [META_METHOD_INIT](input) {
+        if (!input) {
+            input = {};
+        }
 
-    if (Object.prototype.hasOwnProperty.call(input, 'working')) {
-      this.setWorking(input.working);
-    }
+        if (Object.hasOwn(input, "data")) {
+            this.setData(input.data);
+        }
 
-    if (Object.prototype.hasOwnProperty.call(input,'options')) {
-      this.setOptions(input.options);
-    }
+        if (Object.hasOwn(input, "working")) {
+            this.setWorking(input.working);
+        }
 
-    this.log = notCommon.genLogMsg(this.getWorking('name'));
-    this.info = this.log;
-    this.debug = notCommon.genLogDebug(this.getWorking('name'));
-    this.error = notCommon.genLogError(this.getWorking('name'));
-  }
-
-  setCommon(what, args) {
-    switch (args.length) {
-    case 1:
-    {
-      /* set collection */
-      what = args[0];
-      break;
-    }
-    case 2:
-    {
-      /* set collection element */
-      notPath.set(args[0] /* path */ , what /* collection */ , undefined /* helpers */ , args[1] /* value */ );
-      break;
-    }
-    }
-    return this;
-  }
-  getCommon(what, args) {
-    switch (args.length) {
-    /* if we want get data by path */
-    case 1:
-    {
-      return notPath.get(args[0], what);
-    }
-    /* if we want get data by path with default value */
-    case 2:
-    {
-      let res = notPath.get(args[0], what);
-      if (res === undefined) {
-        /* no data, return default value */
-        return args[1];
-      } else {
-        /* data, return it */
-        return res;
-      }
+        if (Object.hasOwn(input, "options")) {
+            this.setOptions(input.options);
+        }
+
+        this.log = notCommon.genLogMsg(this.getWorking("name"));
+        this.info = this.log;
+        this.debug = notCommon.genLogDebug(this.getWorking("name"));
+        this.error = notCommon.genLogError(this.getWorking("name"));
     }
-    /* return full collection */
-    default:
-    {
-      return what;
+
+    setCommon(what, args) {
+        switch (args.length) {
+            case 1: {
+                /* set collection */
+                what = args[0];
+                break;
+            }
+            case 2: {
+                /* set collection element */
+                notPath.set(
+                    args[0] /* path */,
+                    what /* collection */,
+                    undefined /* helpers */,
+                    args[1] /* value */
+                );
+                break;
+            }
+        }
+        return this;
     }
+    getCommon(what, args) {
+        switch (args.length) {
+            /* if we want get data by path */
+            case 1: {
+                return notPath.get(args[0], what);
+            }
+            /* if we want get data by path with default value */
+            case 2: {
+                let res = notPath.get(args[0], what);
+                if (res === undefined) {
+                    /* no data, return default value */
+                    return args[1];
+                } else {
+                    /* data, return it */
+                    return res;
+                }
+            }
+            /* return full collection */
+            default: {
+                return what;
+            }
+        }
     }
-  }
 
-  /*
+    /*
     CORE OBJECT
       DATA - information
       OPTIONS - how to work
       WORKING - temporarily generated in proccess
   */
 
-  setData() {
-    if (arguments.length === 1) {
-      this[META_DATA] = arguments[0];
-    } else {
-      this.setCommon(this.getData(), arguments);
+    setData() {
+        if (arguments.length === 1) {
+            this[META_DATA] = arguments[0];
+        } else {
+            this.setCommon(this.getData(), arguments);
+        }
+        this.emit("change");
+        return this;
     }
-    this.emit('change');
-    return this;
-  }
-
-  getData() {
-    return this.getCommon(this[META_DATA], arguments);
-  }
-
-  setOptions() {
-    if (arguments.length === 1) {
-      this[META_OPTIONS] = arguments[0];
-    } else {
-      this.setCommon(this.getOptions(), arguments);
+
+    getData() {
+        return this.getCommon(this[META_DATA], arguments);
+    }
+
+    setOptions() {
+        if (arguments.length === 1) {
+            this[META_OPTIONS] = arguments[0];
+        } else {
+            this.setCommon(this.getOptions(), arguments);
+        }
+        return this;
     }
-    return this;
-  }
-
-  getOptions() {
-    return this.getCommon(this[META_OPTIONS], arguments);
-  }
-
-  setWorking() {
-    if (arguments.length === 1) {
-      this[META_WORKING] = arguments[0];
-    } else {
-      this.setCommon(this.getWorking(), arguments);
+
+    getOptions() {
+        return this.getCommon(this[META_OPTIONS], arguments);
     }
-    return this;
-  }
 
-  getWorking() {
-    return this.getCommon(this[META_WORKING], arguments);
-  }
+    setWorking() {
+        if (arguments.length === 1) {
+            this[META_WORKING] = arguments[0];
+        } else {
+            this.setCommon(this.getWorking(), arguments);
+        }
+        return this;
+    }
 
-  report(e) {
-    if (notCommon.report) {
-      notCommon.report(e);
+    getWorking() {
+        return this.getCommon(this[META_WORKING], arguments);
     }
-  }
 
-  getApp(){
-    return notCommon.getApp();
-  }
+    report(e) {
+        if (notCommon.report) {
+            notCommon.report(e);
+        }
+    }
 
-  destroy(){
-    this.removeEvent();
-    this.setOptions(null);
-    this.setWorking(null);
-    this.setData(null);
-    this.emit('destroy');
-  }
+    getApp() {
+        return notCommon.getApp();
+    }
 
+    destroy() {
+        this.removeEvent();
+        this.setOptions(null);
+        this.setWorking(null);
+        this.setData(null);
+        this.emit("destroy");
+    }
 }