framework7-svelte 7.1.5 → 8.0.0-beta.2

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 (87) hide show
  1. package/components/actions-button.d.ts +1 -1
  2. package/components/actions-button.svelte +2 -2
  3. package/components/actions-label.svelte +2 -2
  4. package/components/block.d.ts +17 -4
  5. package/components/block.svelte +34 -8
  6. package/components/button.d.ts +3 -7
  7. package/components/button.svelte +6 -12
  8. package/components/card.d.ts +5 -2
  9. package/components/card.svelte +10 -4
  10. package/components/chip.d.ts +0 -1
  11. package/components/icon.d.ts +0 -1
  12. package/components/icon.svelte +0 -9
  13. package/components/link.d.ts +0 -1
  14. package/components/link.svelte +3 -3
  15. package/components/list-index.d.ts +0 -1
  16. package/components/list-index.svelte +0 -2
  17. package/components/list-input.d.ts +0 -1
  18. package/components/list-input.svelte +0 -2
  19. package/components/list-item.d.ts +1 -1
  20. package/components/list-item.svelte +4 -3
  21. package/components/list.d.ts +21 -9
  22. package/components/list.svelte +42 -19
  23. package/components/messagebar-sheet-image.svelte +4 -1
  24. package/components/navbar.d.ts +1 -2
  25. package/components/navbar.svelte +3 -7
  26. package/components/page.d.ts +0 -1
  27. package/components/page.svelte +1 -16
  28. package/components/panel.d.ts +1 -0
  29. package/components/panel.svelte +3 -1
  30. package/components/popover.d.ts +1 -0
  31. package/components/popover.svelte +2 -0
  32. package/components/popup.svelte +1 -1
  33. package/components/preloader.svelte +7 -3
  34. package/components/searchbar.d.ts +1 -2
  35. package/components/searchbar.svelte +3 -5
  36. package/components/segmented.d.ts +0 -3
  37. package/components/segmented.svelte +2 -8
  38. package/components/stepper.d.ts +0 -5
  39. package/components/stepper.svelte +0 -10
  40. package/components/toolbar.d.ts +2 -6
  41. package/components/toolbar.svelte +6 -16
  42. package/components/treeview-item.d.ts +0 -1
  43. package/components/view.d.ts +0 -6
  44. package/framework7-svelte.d.ts +2 -14
  45. package/framework7-svelte.js +3 -14
  46. package/package.json +1 -1
  47. package/shared/components-router.js +0 -32
  48. package/shared/f7.js +6 -23
  49. package/shared/get-router-initial-component.js +0 -4
  50. package/shared/list-context.js +2 -0
  51. package/shared/mixins.js +2 -8
  52. package/shared/plugin.js +2 -16
  53. package/shared/rest-props.js +0 -1
  54. package/shared/router-context.js +2 -0
  55. package/shared/router-open-in.js +6 -9
  56. package/shared/set-reactive-context.js +0 -4
  57. package/shared/use-icon.js +1 -6
  58. package/shared/use-route-props.js +0 -3
  59. package/shared/use-smart-select.js +0 -1
  60. package/shared/use-store.js +2 -6
  61. package/shared/use-tab.js +0 -4
  62. package/shared/use-theme.js +0 -2
  63. package/shared/use-tooltip.js +0 -7
  64. package/shared/utils.js +0 -12
  65. package/components/appbar.d.ts +0 -30
  66. package/components/appbar.svelte +0 -38
  67. package/components/col.d.ts +0 -38
  68. package/components/col.svelte +0 -73
  69. package/components/list-item-cell.d.ts +0 -25
  70. package/components/list-item-cell.svelte +0 -14
  71. package/components/list-item-row.d.ts +0 -25
  72. package/components/list-item-row.svelte +0 -14
  73. package/components/menu-dropdown-item.d.ts +0 -70
  74. package/components/menu-dropdown-item.svelte +0 -73
  75. package/components/menu-dropdown.d.ts +0 -30
  76. package/components/menu-dropdown.svelte +0 -35
  77. package/components/menu-item.d.ts +0 -83
  78. package/components/menu-item.svelte +0 -138
  79. package/components/menu.d.ts +0 -25
  80. package/components/menu.svelte +0 -16
  81. package/components/row.d.ts +0 -33
  82. package/components/row.svelte +0 -63
  83. package/components/swiper-slide.d.ts +0 -4
  84. package/components/swiper-slide.js +0 -3
  85. package/components/swiper.d.ts +0 -4
  86. package/components/swiper.js +0 -3
  87. package/shared/tabbar-context.js +0 -5
@@ -1,138 +0,0 @@
1
- <script>
2
- import { createEventDispatcher, onMount, onDestroy } from 'svelte';
3
- import {
4
- colorClasses,
5
- routerAttrs,
6
- routerClasses,
7
- actionsAttrs,
8
- actionsClasses,
9
- } from '../shared/mixins.js';
10
- import { classNames, extend, plainText, createEmitter } from '../shared/utils.js';
11
- import { restProps } from '../shared/rest-props.js';
12
- import { app, f7ready } from '../shared/f7.js';
13
- import { useTooltip } from '../shared/use-tooltip.js';
14
- import { useRouteProps } from '../shared/use-route-props.js';
15
- import { useIcon } from '../shared/use-icon.js';
16
-
17
- import UseIcon from './use-icon.svelte';
18
-
19
- const emit = createEmitter(createEventDispatcher, $$props);
20
-
21
- let className = undefined;
22
- export { className as class };
23
-
24
- export let text = undefined;
25
- export let iconOnly = undefined;
26
- export let href = undefined;
27
- export let link = undefined;
28
- export let target = undefined;
29
- export let dropdown = undefined;
30
-
31
- export let tooltip = undefined;
32
- export let tooltipTrigger = undefined;
33
-
34
- export let routeProps = undefined;
35
-
36
- let el;
37
-
38
- $: hrefComputed = typeof href === 'undefined' && link ? '#' : href;
39
-
40
- $: attrs = extend(
41
- {
42
- href: hrefComputed,
43
- target,
44
- ...restProps($$restProps),
45
- },
46
- routerAttrs($$props),
47
- actionsAttrs($$props),
48
- );
49
-
50
- $: hasDefaultSlots = $$slots.default;
51
- $: hasTextSlots = $$slots.text;
52
-
53
- $: iconOnlyComputed = iconOnly || (!text && !hasTextSlots);
54
-
55
- $: classes = classNames(
56
- {
57
- 'menu-item': true,
58
- 'menu-item-dropdown': dropdown || dropdown === '',
59
- 'icon-only': iconOnlyComputed,
60
- },
61
- className,
62
- colorClasses($$props),
63
- routerClasses($$props),
64
- actionsClasses($$props),
65
- );
66
-
67
- $: icon = useIcon($$props);
68
-
69
- $: isLink = link || href || href === '';
70
-
71
- function onClick(e) {
72
- emit('click', [e]);
73
- }
74
-
75
- function onOpened(itemEl) {
76
- if (itemEl !== el) return;
77
- emit('menuOpened', [el]);
78
- }
79
- function onClosed(itemEl) {
80
- if (itemEl !== el) return;
81
- emit('menuClosed', [el]);
82
- }
83
-
84
- onMount(() => {
85
- f7ready(() => {
86
- app.f7.on('menuOpened', onOpened);
87
- app.f7.on('menuClosed', onClosed);
88
- });
89
- });
90
- onDestroy(() => {
91
- if (!el || !app.f7) return;
92
- app.f7.off('menuOpened', onOpened);
93
- app.f7.off('menuClosed', onClosed);
94
- });
95
- </script>
96
-
97
- <!-- svelte-ignore a11y-missing-attribute -->
98
- {#if isLink}
99
- <a
100
- on:click={onClick}
101
- bind:this={el}
102
- class={classes}
103
- {...attrs}
104
- use:useTooltip={{ tooltip, tooltipTrigger }}
105
- use:useRouteProps={routeProps}
106
- >
107
- {#if typeof text !== 'undefined' || hasTextSlots || icon}
108
- <div class="menu-item-content">
109
- {plainText(text)}
110
- {#if icon}
111
- <UseIcon {icon} />
112
- {/if}
113
- <slot name="text" />
114
- </div>
115
- {/if}
116
- <slot />
117
- </a>
118
- {:else}
119
- <div
120
- on:click={onClick}
121
- bind:this={el}
122
- class={classes}
123
- {...attrs}
124
- use:useTooltip={{ tooltip, tooltipTrigger }}
125
- use:useRouteProps={routeProps}
126
- >
127
- {#if typeof text !== 'undefined' || hasTextSlots || icon}
128
- <div class="menu-item-content">
129
- {plainText(text)}
130
- {#if icon}
131
- <UseIcon {icon} />
132
- {/if}
133
- <slot name="text" />
134
- </div>
135
- {/if}
136
- <slot />
137
- </div>
138
- {/if}
@@ -1,25 +0,0 @@
1
-
2
- import { SvelteComponentTyped } from 'svelte';
3
-
4
-
5
- interface MenuProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
6
- children?: React.ReactNode;
7
- color?: string;
8
- colorTheme?: string;
9
- textColor?: string;
10
- bgColor?: string;
11
- borderColor?: string;
12
- rippleColor?: string;
13
- dark?: boolean;
14
- }
15
-
16
-
17
-
18
- declare class Menu extends SvelteComponentTyped<
19
- MenuProps,
20
- { },
21
- { 'default' : {}; }
22
- > {}
23
-
24
- export { MenuProps };
25
- export default Menu;
@@ -1,16 +0,0 @@
1
- <script>
2
- import { colorClasses } from '../shared/mixins.js';
3
- import { classNames } from '../shared/utils.js';
4
- import { restProps } from '../shared/rest-props.js';
5
-
6
- let className = undefined;
7
- export { className as class };
8
-
9
- $: classes = classNames(className, 'menu', colorClasses($$props));
10
- </script>
11
-
12
- <div class={classes} {...restProps($$restProps)}>
13
- <div class="menu-inner">
14
- <slot />
15
- </div>
16
- </div>
@@ -1,33 +0,0 @@
1
-
2
- import { SvelteComponentTyped } from 'svelte';
3
-
4
-
5
- interface RowProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
6
- noGap ?: boolean;
7
- tag ?: string;
8
- resizable ?: boolean;
9
- resizableFixed ?: boolean;
10
- resizableAbsolute ?: boolean;
11
- resizableHandler ?: boolean;
12
- onClick ?: (event?: any) => void;
13
- onGridResize ?: (...args: any[]) => void;
14
- children?: React.ReactNode;
15
- color?: string;
16
- colorTheme?: string;
17
- textColor?: string;
18
- bgColor?: string;
19
- borderColor?: string;
20
- rippleColor?: string;
21
- dark?: boolean;
22
- }
23
-
24
-
25
-
26
- declare class Row extends SvelteComponentTyped<
27
- RowProps,
28
- { click: CustomEvent<void>; gridResize: CustomEvent<void>; },
29
- { 'default' : {}; }
30
- > {}
31
-
32
- export { RowProps };
33
- export default Row;
@@ -1,63 +0,0 @@
1
- <script>
2
- import { createEventDispatcher, onMount, onDestroy } from 'svelte';
3
- import { colorClasses } from '../shared/mixins.js';
4
- import { classNames, createEmitter } from '../shared/utils.js';
5
- import { restProps } from '../shared/rest-props.js';
6
- import { app, f7ready } from '../shared/f7.js';
7
-
8
- const emit = createEmitter(createEventDispatcher, $$props);
9
-
10
- let className = undefined;
11
- export { className as class };
12
-
13
- export let noGap = false;
14
- export let tag = 'div';
15
- export let resizable = false;
16
- export let resizableFixed = false;
17
- export let resizableAbsolute = false;
18
- export let resizableHandler = true;
19
-
20
- let el;
21
-
22
- $: classes = classNames(
23
- className,
24
- 'row',
25
- {
26
- 'no-gap': noGap,
27
- resizable,
28
- 'resizable-fixed': resizableFixed,
29
- 'resizable-absolute': resizableAbsolute,
30
- },
31
- colorClasses($$props),
32
- );
33
-
34
- function onClick() {
35
- emit('click');
36
- }
37
- function onResize(targetEl) {
38
- if (el !== targetEl) return;
39
- emit('gridResize');
40
- }
41
-
42
- onMount(() => {
43
- f7ready(() => {
44
- app.f7.on('gridResize', onResize);
45
- });
46
- });
47
- onDestroy(() => {
48
- if (!app.f7) return;
49
- app.f7.off('gridResize', onResize);
50
- });
51
- </script>
52
-
53
- {#if tag === 'div'}
54
- <div class={classes} bind:this={el} on:click={onClick} {...restProps($$restProps)}>
55
- <slot />
56
- {#if resizable && resizableHandler}<span class="resize-handler" />{/if}
57
- </div>
58
- {:else if tag === 'p'}
59
- <p class={classes} bind:this={el} on:click={onClick} {...restProps($$restProps)}>
60
- <slot />
61
- {#if resizable && resizableHandler}<span class="resize-handler" />{/if}
62
- </p>
63
- {/if}
@@ -1,4 +0,0 @@
1
- // eslint-disable-next-line
2
- import { SwiperSlide } from 'swiper/svelte';
3
-
4
- export default SwiperSlide;
@@ -1,3 +0,0 @@
1
- // eslint-disable-next-line
2
- import { SwiperSlide } from 'swiper/svelte';
3
- export default SwiperSlide;
@@ -1,4 +0,0 @@
1
- // eslint-disable-next-line
2
- import { Swiper } from 'swiper/svelte';
3
-
4
- export default Swiper;
@@ -1,3 +0,0 @@
1
- // eslint-disable-next-line
2
- import { Swiper } from 'swiper/svelte';
3
- export default Swiper;
@@ -1,5 +0,0 @@
1
- // import React from 'react';
2
- // const TabbarContext = React.createContext({
3
- // tabbarHasLabels: false,
4
- // });
5
- // export { TabbarContext };