framework7-svelte 8.2.0 → 8.3.0

package/components/sheet.d.ts

@@ -1,10 +1,11 @@
 
-import { SvelteComponentTyped } from 'svelte';
+import { SvelteComponent } from 'svelte';
+import { HTMLAttributes } from 'svelte/elements';
 
 import { Sheet } from 'framework7/types';
 
 
-interface SheetProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
+interface SheetProps {
   opened ?: boolean;
   animate ?: boolean;
   top ?: boolean;
@@ -20,6 +21,9 @@ interface SheetProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['di
   swipeToStep ?: boolean;
   swipeHandler ?: string | object;
   containerEl ?: string | object;
+  breakpoints ?: number[];
+  backdropBreakpoint ?: number;
+  pushBreakpoint ?: number;
   color?: string;
   colorTheme?: string;
   textColor?: string;
@@ -34,14 +38,13 @@ interface SheetProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['di
   onSheetOpened ?: (instance?: Sheet.Sheet) => void;
   onSheetClose ?: (instance?: Sheet.Sheet) => void;
   onSheetClosed ?: (instance?: Sheet.Sheet) => void;
-  children?: React.ReactNode;
 }
 
 
 
-declare class Sheet extends SvelteComponentTyped<
-  SheetProps,
-  { sheetOpen: CustomEvent<void>; sheetOpened: CustomEvent<void>; sheetClose: CustomEvent<void>; sheetClosed: CustomEvent<void>; sheetStepProgress: CustomEvent<void>; sheetStepOpen: CustomEvent<void>; sheetStepClose: CustomEvent<void>; },
+declare class Sheet extends SvelteComponent<
+  SheetProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof SheetProps>,
+  { sheetOpen: CustomEvent<void>; sheetOpened: CustomEvent<void>; sheetClose: CustomEvent<void>; sheetClosed: CustomEvent<void>; sheetBreakpoint: CustomEvent<void>; sheetStepProgress: CustomEvent<void>; sheetStepOpen: CustomEvent<void>; sheetStepClose: CustomEvent<void>; },
   {  'fixed' : {};  'default' : {};  'static' : {}; }
 > {}
 

package/components/sheet.svelte

@@ -27,6 +27,9 @@
   export let swipeToStep = undefined;
   export let swipeHandler = undefined;
   export let containerEl = undefined;
+  export let breakpoints = undefined;
+  export let backdropBreakpoint = undefined;
+  export let pushBreakpoint = undefined;
 
   let el;
   let innerEl;
@@ -36,6 +39,7 @@
     isOpened: opened,
     isClosing: false,
     swipeStep: false,
+    breakpoint: false,
   };
 
   export function instance() {
@@ -56,6 +60,7 @@
     {
       'sheet-modal-push': push,
       'modal-in-swipe-step': state.swipeStep,
+      'modal-in-breakpoint': state.breakpoint,
     },
 
     modalStateClasses(state),
@@ -87,6 +92,9 @@
     emit('sheetClosed', [instance]);
     opened = false;
   }
+  function onBreakpoint(instance, breakpoint) {
+    emit('sheetBreakpoint', [instance, breakpoint]);
+  }
   function onStepProgress(instance, progress) {
     emit('sheetStepProgress', [instance, progress]);
   }
@@ -121,6 +129,14 @@
         stepOpen: onStepOpen,
         stepClose: onStepClose,
         stepProgress: onStepProgress,
+        breakpoint: (s, value) => {
+          if (value > 0 && value < 1) {
+            state.breakpoint = true;
+          } else {
+            state.breakpoint = false;
+          }
+          onBreakpoint(s, value);
+        },
         // eslint-disable-next-line
         _swipeStep(isSwipeStep) {
           state.swipeStep = isSwipeStep;
@@ -139,6 +155,9 @@
     if (typeof swipeToStep !== 'undefined') params.swipeToStep = swipeToStep;
     if (typeof swipeHandler !== 'undefined') params.swipeHandler = swipeHandler;
     if (typeof containerEl !== 'undefined') params.containerEl = containerEl;
+    if (typeof breakpoints !== 'undefined') params.breakpoints = breakpoints;
+    if (typeof backdropBreakpoint !== 'undefined') params.backdropBreakpoint = backdropBreakpoint;
+    if (typeof pushBreakpoint !== 'undefined') params.pushBreakpoint = pushBreakpoint;
 
     f7ready(() => {
       if (el && innerEl) {

package/components/stepper.d.ts

@@ -1,10 +1,11 @@
 
-import { SvelteComponentTyped } from 'svelte';
+import { SvelteComponent } from 'svelte';
+import { HTMLAttributes } from 'svelte/elements';
 
 import { Stepper } from 'framework7/types';
 
 
-interface StepperProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
+interface StepperProps {
   init ?: boolean;
   value ?: number;
   min ?: number;
@@ -51,13 +52,12 @@ interface StepperProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['
   onChange ?: (event?: any, stepper?: Stepper.Stepper) => void;
   onStepperMinusClick ?: (event?: any, stepper?: Stepper.Stepper) => void;
   onStepperPlusClick ?: (event?: any, stepper?: Stepper.Stepper) => void;
-  children?: React.ReactNode;
 }
 
 
 
-declare class Stepper extends SvelteComponentTyped<
-  StepperProps,
+declare class Stepper extends SvelteComponent<
+  StepperProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof StepperProps>,
   { input: CustomEvent<void>; change: CustomEvent<void>; stepperMinusClick: CustomEvent<void>; stepperPlusClick: CustomEvent<void>; stepperChange: CustomEvent<void>; },
   {  }
 > {}

package/components/subnavbar.d.ts

@@ -1,12 +1,12 @@
 
-import { SvelteComponentTyped } from 'svelte';
+import { SvelteComponent } from 'svelte';
+import { HTMLAttributes } from 'svelte/elements';
 
 
-interface SubnavbarProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
+interface SubnavbarProps {
   sliding ?: boolean;
   title ?: string;
   inner ?: boolean;
-  children?: React.ReactNode;
   color?: string;
   colorTheme?: string;
   textColor?: string;
@@ -18,8 +18,8 @@ interface SubnavbarProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap
 
 
 
-declare class Subnavbar extends SvelteComponentTyped<
-  SubnavbarProps,
+declare class Subnavbar extends SvelteComponent<
+  SubnavbarProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof SubnavbarProps>,
   {  },
   {  'default' : {}; }
 > {}

package/components/swipeout-actions.d.ts

@@ -1,12 +1,12 @@
 
-import { SvelteComponentTyped } from 'svelte';
+import { SvelteComponent } from 'svelte';
+import { HTMLAttributes } from 'svelte/elements';
 
 
-interface SwipeoutActionsProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
+interface SwipeoutActionsProps {
   left ?: boolean;
   right ?: boolean;
   side ?: string;
-  children?: React.ReactNode;
   color?: string;
   colorTheme?: string;
   textColor?: string;
@@ -18,8 +18,8 @@ interface SwipeoutActionsProps extends svelte.JSX.HTMLAttributes<HTMLElementTagN
 
 
 
-declare class SwipeoutActions extends SvelteComponentTyped<
-  SwipeoutActionsProps,
+declare class SwipeoutActions extends SvelteComponent<
+  SwipeoutActionsProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof SwipeoutActionsProps>,
   {  },
   {  'default' : {}; }
 > {}

package/components/swipeout-button.d.ts

@@ -1,8 +1,9 @@
 
-import { SvelteComponentTyped } from 'svelte';
+import { SvelteComponent } from 'svelte';
+import { HTMLAttributes } from 'svelte/elements';
 
 
-interface SwipeoutButtonProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
+interface SwipeoutButtonProps {
   text ?: string;
   confirmTitle ?: string;
   confirmText ?: string;
@@ -18,13 +19,12 @@ interface SwipeoutButtonProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNa
   rippleColor?: string;
   dark?: boolean;
   onClick ?: (event?: any) => void;
-  children?: React.ReactNode;
 }
 
 
 
-declare class SwipeoutButton extends SvelteComponentTyped<
-  SwipeoutButtonProps,
+declare class SwipeoutButton extends SvelteComponent<
+  SwipeoutButtonProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof SwipeoutButtonProps>,
   { click: CustomEvent<void>; },
   {  'default' : {}; }
 > {}

package/components/tab.d.ts

@@ -1,8 +1,9 @@
 
-import { SvelteComponentTyped } from 'svelte';
+import { SvelteComponent } from 'svelte';
+import { HTMLAttributes } from 'svelte/elements';
 
 
-interface TabProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
+interface TabProps {
   color?: string;
   colorTheme?: string;
   textColor?: string;
@@ -13,13 +14,12 @@ interface TabProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div'
   tabActive ?: boolean;
   onTabShow ?: (el?: HTMLElement) => void;
   onTabHide ?: (el?: HTMLElement) => void;
-  children?: React.ReactNode;
 }
 
 
 
-declare class Tab extends SvelteComponentTyped<
-  TabProps,
+declare class Tab extends SvelteComponent<
+  TabProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof TabProps>,
   { tabRouterDidUpdate: CustomEvent<void>; },
   {  'default' : {}; }
 > {}

package/components/tabs.d.ts

@@ -1,10 +1,11 @@
 
-import { SvelteComponentTyped } from 'svelte';
+import { SvelteComponent } from 'svelte';
+import { HTMLAttributes } from 'svelte/elements';
 
 import { SwiperOptions } from 'swiper';
 
 
-interface TabsProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
+interface TabsProps {
   animated ?: boolean;
   swipeable ?: boolean;
   routable ?: boolean;
@@ -16,13 +17,12 @@ interface TabsProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div
   borderColor?: string;
   rippleColor?: string;
   dark?: boolean;
-  children?: React.ReactNode;
 }
 
 
 
-declare class Tabs extends SvelteComponentTyped<
-  TabsProps,
+declare class Tabs extends SvelteComponent<
+  TabsProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof TabsProps>,
   {  },
   {  'default' : {}; }
 > {}

package/components/text-editor.d.ts

@@ -1,10 +1,11 @@
 
-import { SvelteComponentTyped } from 'svelte';
+import { SvelteComponent } from 'svelte';
+import { HTMLAttributes } from 'svelte/elements';
 
 import { TextEditor } from 'framework7/types';
 
 
-interface TextEditorProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
+interface TextEditorProps {
   color?: string;
   colorTheme?: string;
   textColor?: string;
@@ -33,13 +34,12 @@ interface TextEditorProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMa
   onTextEditorPopoverClose ?: (...args: any[]) => void;
   onTextEditorInsertLink?: (...args: any[]) => void;
   onTextEditorInsertImage?: (...args: any[]) => void;
-  children?: React.ReactNode;
 }
 
 
 
-declare class TextEditor extends SvelteComponentTyped<
-  TextEditorProps,
+declare class TextEditor extends SvelteComponent<
+  TextEditorProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof TextEditorProps>,
   { textEditorChange: CustomEvent<void>; textEditorInput: CustomEvent<void>; textEditorFocus: CustomEvent<void>; textEditorBlur: CustomEvent<void>; textEditorButtonClick: CustomEvent<void>; textEditorKeyboardOpen: CustomEvent<void>; textEditorKeyboardClose: CustomEvent<void>; textEditorPopoverOpen: CustomEvent<void>; textEditorPopoverClose: CustomEvent<void>; textEditorInsertLink: CustomEvent<void>; textEditorInsertImage: CustomEvent<void>; },
   {  'root-start' : {};  'default' : {};  'root-end' : {};  'root' : {}; }
 > {}

package/components/toggle.d.ts

@@ -1,10 +1,11 @@
 
-import { SvelteComponentTyped } from 'svelte';
+import { SvelteComponent } from 'svelte';
+import { HTMLAttributes } from 'svelte/elements';
 
 import { Toggle } from 'framework7/types';
 
 
-interface ToggleProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
+interface ToggleProps {
   init ?: boolean;
   checked ?: boolean;
   defaultChecked ?: boolean;
@@ -23,13 +24,12 @@ interface ToggleProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['d
   dark?: boolean;
   onToggleChange ?: (...args: any[]) => void;
   onChange ?: (event?: any) => void;
-  children?: React.ReactNode;
 }
 
 
 
-declare class Toggle extends SvelteComponentTyped<
-  ToggleProps,
+declare class Toggle extends SvelteComponent<
+  ToggleProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof ToggleProps>,
   { change: CustomEvent<void>; toggleChange: CustomEvent<void>; },
   {  }
 > {}

package/components/toolbar.d.ts

@@ -1,8 +1,9 @@
 
-import { SvelteComponentTyped } from 'svelte';
+import { SvelteComponent } from 'svelte';
+import { HTMLAttributes } from 'svelte/elements';
 
 
-interface ToolbarProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
+interface ToolbarProps {
   tabbar ?: boolean;
   icons ?: boolean;
   scrollable ?: boolean;
@@ -25,13 +26,12 @@ interface ToolbarProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['
   dark?: boolean;
   onToolbarHide ?: (...args: any[]) => void;
   onToolbarShow ?: (...args: any[]) => void;
-  children?: React.ReactNode;
 }
 
 
 
-declare class Toolbar extends SvelteComponentTyped<
-  ToolbarProps,
+declare class Toolbar extends SvelteComponent<
+  ToolbarProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof ToolbarProps>,
   { toolbarShow: CustomEvent<void>; toolbarHide: CustomEvent<void>; },
   {  'before-inner' : {};  'default' : {};  'after-inner' : {}; }
 > {}

package/components/treeview-item.d.ts

@@ -1,8 +1,9 @@
 
-import { SvelteComponentTyped } from 'svelte';
+import { SvelteComponent } from 'svelte';
+import { HTMLAttributes } from 'svelte/elements';
 
 
-interface TreeviewItemProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
+interface TreeviewItemProps {
   toggle ?: boolean;
   itemToggle ?: boolean;
   selectable ?: boolean;
@@ -68,13 +69,12 @@ interface TreeviewItemProps extends svelte.JSX.HTMLAttributes<HTMLElementTagName
   onTreeviewOpen ?: (el?: HTMLElement) => void;
   onTreeviewClose ?: (el?: HTMLElement) => void;
   onTreeviewLoadChildren ?: (el?: HTMLElement, done?: any) => void;
-  children?: React.ReactNode;
 }
 
 
 
-declare class TreeviewItem extends SvelteComponentTyped<
-  TreeviewItemProps,
+declare class TreeviewItem extends SvelteComponent<
+  TreeviewItemProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof TreeviewItemProps>,
   { click: CustomEvent<void>; treeviewOpen: CustomEvent<void>; treeviewClose: CustomEvent<void>; treeviewLoadChildren: CustomEvent<void>; },
   {  'root-start' : {};  'content-start' : {};  'media' : {};  'label-start' : {};  'label' : {};  'content' : {};  'content-end' : {};  'root' : {};  'root-end' : {};  'children-start' : {};  'default' : {};  'children' : {}; }
 > {}

package/components/treeview.d.ts

@@ -1,9 +1,9 @@
 
-import { SvelteComponentTyped } from 'svelte';
+import { SvelteComponent } from 'svelte';
+import { HTMLAttributes } from 'svelte/elements';
 
 
-interface TreeviewProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
-  children?: React.ReactNode;
+interface TreeviewProps {
   color?: string;
   colorTheme?: string;
   textColor?: string;
@@ -15,8 +15,8 @@ interface TreeviewProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap[
 
 
 
-declare class Treeview extends SvelteComponentTyped<
-  TreeviewProps,
+declare class Treeview extends SvelteComponent<
+  TreeviewProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof TreeviewProps>,
   {  },
   {  'default' : {}; }
 > {}

package/components/use-icon.d.ts

@@ -1,15 +1,16 @@
 
-import { SvelteComponentTyped } from 'svelte';
+import { SvelteComponent } from 'svelte';
+import { HTMLAttributes } from 'svelte/elements';
 
 
-interface UseIconProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
+interface UseIconProps {
   
 }
 
 
 
-declare class UseIcon extends SvelteComponentTyped<
-  UseIconProps,
+declare class UseIcon extends SvelteComponent<
+  UseIconProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof UseIconProps>,
   {  },
   {  }
 > {}

package/components/view.d.ts

@@ -1,10 +1,11 @@
 
-import { SvelteComponentTyped } from 'svelte';
+import { SvelteComponent } from 'svelte';
+import { HTMLAttributes } from 'svelte/elements';
 
   import { View, Router } from 'framework7/types';
 
 
-interface ViewProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
+interface ViewProps {
   initRouterOnTabShow?: boolean;
   tab ?: boolean;
   tabActive ?: boolean;
@@ -75,13 +76,12 @@ interface ViewProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div
   onSwipeBackAfterReset ?: (swipeBackData?: Router.SwipeBackData) => void;
   onTabShow ?: (el?: HTMLElement) => void;
   onTabHide ?: (el?: HTMLElement) => void;
-  children?: React.ReactNode;
 }
 
 
 
-declare class View extends SvelteComponentTyped<
-  ViewProps,
+declare class View extends SvelteComponent<
+  ViewProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof ViewProps>,
   { viewInit: CustomEvent<void>; viewResize: CustomEvent<void>; swipeBackMove: CustomEvent<void>; swipeBackBeforeChange: CustomEvent<void>; swipeBackAfterChange: CustomEvent<void>; swipeBackBeforeReset: CustomEvent<void>; swipeBackAfterReset: CustomEvent<void>; viewRouterDidUpdate: CustomEvent<void>; },
   {  'default' : {}; }
 > {}

package/components/views.d.ts

@@ -1,10 +1,10 @@
 
-import { SvelteComponentTyped } from 'svelte';
+import { SvelteComponent } from 'svelte';
+import { HTMLAttributes } from 'svelte/elements';
 
 
-interface ViewsProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
+interface ViewsProps {
   tabs?: boolean;
-  children?: React.ReactNode;
   color?: string;
   colorTheme?: string;
   textColor?: string;
@@ -16,8 +16,8 @@ interface ViewsProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['di
 
 
 
-declare class Views extends SvelteComponentTyped<
-  ViewsProps,
+declare class Views extends SvelteComponent<
+  ViewsProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof ViewsProps>,
   {  },
   {  'default' : {}; }
 > {}

package/framework7-svelte.js

@@ -1,5 +1,5 @@
 /**
- * Framework7 Svelte 8.2.0
+ * Framework7 Svelte 8.3.0
  * Build full featured iOS & Android apps using Framework7 & Svelte
  * https://framework7.io/svelte/
  *
@@ -7,7 +7,7 @@
  *
  * Released under the MIT License
  *
- * Released on: July 6, 2023
+ * Released on: August 18, 2023
  */
 import Framework7Svelte from './shared/plugin.js';
 import { f7, f7ready, theme, app } from './shared/f7.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "framework7-svelte",
-  "version": "8.2.0",
+  "version": "8.3.0",
   "description": "Build full featured iOS & Android apps using Framework7 & Svelte",
   "type": "module",
   "svelte": "./framework7-svelte.js",
@@ -46,5 +46,5 @@
     "type": "patreon",
     "url": "https://www.patreon.com/framework7"
   },
-  "releaseDate": "July 6, 2023"
+  "releaseDate": "August 18, 2023"
 }