not-bulma 1.0.78 → 1.0.79

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/src/elements/modal/ui.modal.svelte +38 -31
  3. package/src/elements/modal/ui.overlay.svelte +58 -57
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "not-bulma",
3
- "version": "1.0.78",
3
+ "version": "1.0.79",
4
4
  "description": "not-* family UI components on Bulma CSS Framework",
5
5
  "main": "src/index.js",
6
6
  "svelte": "src/index.js",
package/src/elements/modal/ui.modal.svelte CHANGED
@@ -1,40 +1,47 @@
1
1
  <script>
2
- import {LOCALE} from '../../locale';
2
+ import { LOCALE } from "../../locale";
3
3
 
4
- import UIOverlay from './ui.overlay.svelte';
4
+ import UIOverlay from "./ui.overlay.svelte";
5
5
 
6
- import UIBox from '../block/ui.box.svelte';
7
- import UIContent from '../block/ui.content.svelte';
6
+ import UIBox from "../block/ui.box.svelte";
7
+ import UIContent from "../block/ui.content.svelte";
8
8
 
9
- import UITitle from '../various/ui.title.svelte';
10
- import UIButton from '../button/ui.button.svelte';
9
+ import UITitle from "../various/ui.title.svelte";
10
+ import UIButton from "../button/ui.button.svelte";
11
11
 
12
- export let closeButton = false;
13
- export let applyButton = false;
14
- export let show = false;
15
- export let loading = false;
16
- export let title = 'Modal window';
17
- export let subtitle = '';
18
- export let classes = '';
19
-
20
- export let WAITING_TEXT = 'Обработка';
12
+ export let closeButton = false;
13
+ export let applyButton = false;
14
+ export let show = false;
15
+ export let loading = false;
16
+ export let title = "Modal window";
17
+ export let subtitle = "";
18
+ export let classes = "";
19
+ export let overlayClasses = "";
21
20
 
21
+ export let WAITING_TEXT = "Обработка";
22
22
  </script>
23
23
 
24
- <UIOverlay {show} closeOnClick={false} closeButton={false} >
25
- <UIBox {classes}>
26
- <UITitle size="2" title={$LOCALE[title]} subtitle={$LOCALE[subtitle]} />
27
- <UIContent>
28
- <div class="pageloader {loading?'is-active':''}"><span class="title">{$LOCALE[WAITING_TEXT]}</span></div>
29
- <slot></slot>
30
- <div class="buttons is-grouped is-centered mt-4">
31
- {#if closeButton}
32
- <UIButton {...closeButton} />
33
- {/if}
34
- {#if applyButton}
35
- <UIButton {...applyButton} />
36
- {/if}
37
- </div>
38
- </UIContent>
39
- </UIBox>
24
+ <UIOverlay
25
+ {show}
26
+ closeOnClick={false}
27
+ closeButton={false}
28
+ classes={overlayClasses}
29
+ >
30
+ <UIBox {classes}>
31
+ <UITitle size="2" title={$LOCALE[title]} subtitle={$LOCALE[subtitle]} />
32
+ <UIContent>
33
+ <div class="pageloader {loading ? 'is-active' : ''}">
34
+ <span class="title">{$LOCALE[WAITING_TEXT]}</span>
35
+ </div>
36
+ <slot />
37
+ <div class="buttons is-grouped is-centered mt-4">
38
+ {#if closeButton}
39
+ <UIButton {...closeButton} />
40
+ {/if}
41
+ {#if applyButton}
42
+ <UIButton {...applyButton} />
43
+ {/if}
44
+ </div>
45
+ </UIContent>
46
+ </UIBox>
40
47
  </UIOverlay>
package/src/elements/modal/ui.overlay.svelte CHANGED
@@ -1,77 +1,78 @@
1
1
  <script>
2
- let overflowSave = '';
2
+ let overflowSave = "";
3
3
 
4
- import {
5
- fade
6
- } from 'svelte/transition';
4
+ import { fade } from "svelte/transition";
7
5
 
8
- import {
9
- createEventDispatcher,
10
- onMount,
11
- onDestroy
12
- } from 'svelte';
6
+ import { createEventDispatcher, onMount, onDestroy } from "svelte";
13
7
 
14
- const zIndexStep = 1000;
8
+ const zIndexStep = 1000;
15
9
 
16
- const dispatch = createEventDispatcher();
10
+ const dispatch = createEventDispatcher();
17
11
 
18
- export let closeButton = false;
19
- export let show = true;
20
- export let closeOnClick = true;
21
- export let closeSize = 'normal';
22
- export let layer = 1;
12
+ export let closeButton = false;
13
+ export let show = true;
14
+ export let closeOnClick = true;
15
+ export let closeSize = "normal";
16
+ export let layer = 1;
17
+ export let classes = "";
23
18
 
24
- $: if(show){
25
- document.body.style.overflow = 'hidden';
26
- }else{
27
- document.body.style.overflow = overflowSave;
28
- }
19
+ $: if (show) {
20
+ document.body.style.overflow = "hidden";
21
+ } else {
22
+ document.body.style.overflow = overflowSave;
23
+ }
29
24
 
30
- function overlayClick(e){
31
- if(closeOnClick){
32
- closeOverlay(e);
33
- }
34
- }
25
+ function overlayClick(e) {
26
+ if (closeOnClick) {
27
+ closeOverlay(e);
28
+ }
29
+ }
35
30
 
36
- function closeButtonClick(){
37
- rejectOverlay();
38
- }
31
+ function closeButtonClick() {
32
+ rejectOverlay();
33
+ }
39
34
 
40
- function closeOverlay(e) {
41
- try{
42
- if(e && e.originalTarget){
43
- const target = e.originalTarget;
44
- if(target.classList && target.classList.contains('is-overlay')){
45
- rejectOverlay();
46
- }
47
- }
48
- }
49
- catch(_){}
50
- }
35
+ function closeOverlay(e) {
36
+ try {
37
+ if (e && e.originalTarget) {
38
+ const target = e.originalTarget;
39
+ if (
40
+ target.classList &&
41
+ target.classList.contains("is-overlay")
42
+ ) {
43
+ rejectOverlay();
44
+ }
45
+ }
46
+ } catch (_) {}
47
+ }
51
48
 
52
- function rejectOverlay(data = {}) {
53
- dispatch('reject', data);
54
- }
55
- /*
49
+ function rejectOverlay(data = {}) {
50
+ dispatch("reject", data);
51
+ }
52
+ /*
56
53
  function resolveOverlay(data = {}) {
57
54
  dispatch('resolve', data);
58
55
  }
59
56
  */
60
- onMount(() => {
61
- overflowSave = document.body.style.overflow;
62
-
63
- });
57
+ onMount(() => {
58
+ overflowSave = document.body.style.overflow;
59
+ });
64
60
 
65
- onDestroy(() => {
66
- document.body.style.overflow = overflowSave;
67
- });
61
+ onDestroy(() => {
62
+ document.body.style.overflow = overflowSave;
63
+ });
68
64
  </script>
69
65
 
70
66
  {#if show}
71
- <div class="is-overlay not-overlay" transition:fade on:click={overlayClick} style="z-index: {zIndexStep * layer};">
72
- {#if closeButton}
73
- <button on:click={closeButtonClick} class="delete is-{closeSize}"></button>
74
- {/if}
75
- <slot></slot>
76
- </div>
67
+ <div
68
+ class="is-overlay not-overlay {classes}"
69
+ transition:fade
70
+ on:click={overlayClick}
71
+ style="z-index: {zIndexStep * layer};"
72
+ >
73
+ {#if closeButton}
74
+ <button on:click={closeButtonClick} class="delete is-{closeSize}" />
75
+ {/if}
76
+ <slot />
77
+ </div>
77
78
  {/if}