framework7-svelte 8.0.0-beta.1 → 8.0.0-beta.2

package/components/actions.svelte

@@ -11,6 +11,7 @@
   let className = undefined;
   export { className as class };
 
+  export let style = '';
   export let opened = undefined;
   export let animate = undefined;
   export let grid = undefined;
@@ -123,6 +124,6 @@
   });
 </script>
 
-<div class={classes} bind:this={el} {...restProps($$restProps)}>
+<div class={classes} bind:this={el} {style} {...restProps($$restProps)}>
   <slot actions={f7Actions} />
 </div>

package/components/icon.svelte

@@ -36,16 +36,26 @@
   }
 
   $: if (themeIcon) {
+    classes = {
+      icon: true,
+    };
     const parts = themeIcon.split(':');
     const prop = parts[0];
     const value = parts[1];
     if (prop === 'material' || prop === 'f7') {
       classes['material-icons'] = prop === 'material';
       classes['f7-icons'] = prop === 'f7';
-    }
-
-    if (prop === 'icon') {
-      classes[value] = true;
+      if (prop === 'icon') {
+        classes[value] = true;
+      }
+    } else {
+      if (themeIcon.includes(':')) {
+        themeIcon = themeIcon
+          .split(' ')
+          .map((el) => el.replace('icon:', ''))
+          .join(' ');
+      }
+      classes[themeIcon] = true;
     }
   } else {
     classes = {

package/components/list-item.d.ts

@@ -35,6 +35,7 @@ interface ListItemProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap[
   noChevron ?: boolean;
   chevronCenter ?: boolean;
   checkbox ?: boolean;
+  checkboxIcon ?: boolean;
   radio ?: boolean;
   radioIcon ?: string;
   checked ?: boolean;

package/components/list-item.svelte

@@ -65,6 +65,7 @@
 
   // Inputs
   export let checkbox = undefined;
+  export let checkboxIcon = undefined;
   export let radio = undefined;
   export let radioIcon = undefined;
   export let checked = undefined;
@@ -121,6 +122,8 @@
     {
       'item-checkbox': checkbox,
       'item-radio': radio,
+      'item-checkbox-icon-start': checkbox && checkboxIcon === 'start',
+      'item-checkbox-icon-end': checkbox && checkboxIcon === 'end',
       'item-radio-icon-start': radio && radioIcon === 'start',
       'item-radio-icon-end': radio && radioIcon === 'end',
     },

package/components/login-screen.svelte

@@ -11,6 +11,7 @@
   let className = undefined;
   export { className as class };
 
+  export let style = '';
   export let opened = undefined;
   export let animate = undefined;
   export let containerEl = undefined;
@@ -99,6 +100,6 @@
   });
 </script>
 
-<div class={classes} bind:this={el} {...restProps($$restProps)}>
+<div class={classes} bind:this={el} {style} {...restProps($$restProps)}>
   <slot loginScreen={f7LoginScreen} />
 </div>

package/components/popover.svelte

@@ -11,6 +11,7 @@
   let className = undefined;
   export { className as class };
 
+  export let style = '';
   export let opened = undefined;
   export let animate = undefined;
   export let targetEl = undefined;
@@ -114,7 +115,7 @@
   });
 </script>
 
-<div class={classes} bind:this={el} {...restProps($$restProps)}>
+<div class={classes} bind:this={el} {style} {...restProps($$restProps)}>
   <div class="popover-angle" />
   <div class="popover-inner">
     <slot popover={f7Popover} />

package/components/popup.svelte

@@ -11,6 +11,7 @@
   let className = undefined;
   export { className as class };
 
+  export let style = '';
   export let tabletFullscreen = undefined;
   export let opened = undefined;
   export let animate = undefined;
@@ -135,6 +136,6 @@
   });
 </script>
 
-<div class={classes} bind:this={el} {...restProps($$restProps)}>
+<div class={classes} bind:this={el} {style} {...restProps($$restProps)}>
   <slot popup={f7Popup} />
 </div>

package/components/sheet.svelte

@@ -11,6 +11,7 @@
   let className = undefined;
   export { className as class };
 
+  export let style = '';
   export let opened = undefined;
   export let animate = undefined;
   export let top = undefined;
@@ -160,7 +161,7 @@
   });
 </script>
 
-<div class={classes} bind:this={el} {...restProps($$restProps)}>
+<div class={classes} bind:this={el} {style} {...restProps($$restProps)}>
   <slot sheet={f7Sheet} name="fixed" />
   <div class="sheet-modal-inner" bind:this={innerEl}>
     <slot sheet={f7Sheet} />

package/framework7-svelte.d.ts

@@ -81,8 +81,6 @@ import Stepper from './components/stepper.js';
 import Subnavbar from './components/subnavbar.js';
 import SwipeoutActions from './components/swipeout-actions.js';
 import SwipeoutButton from './components/swipeout-button.js';
-import SwiperSlide from './components/swiper-slide.js';
-import Swiper from './components/swiper.js';
 import Tab from './components/tab.js';
 import Tabs from './components/tabs.js';
 import TextEditor from './components/text-editor.js';
@@ -124,6 +122,6 @@ interface app {
 
 declare const app: app;
 
-export { AccordionContent, AccordionItem, AccordionToggle, Accordion, ActionsButton, ActionsGroup, ActionsLabel, Actions, App, AreaChart, Badge, BlockFooter, BlockHeader, BlockTitle, Block, BreadcrumbsCollapsed, BreadcrumbsItem, BreadcrumbsSeparator, Breadcrumbs, Button, CardContent, CardFooter, CardHeader, Card, Checkbox, Chip, FabBackdrop, FabButton, FabButtons, Fab, Gauge, Icon, Input, Link, ListButton, ListGroup, ListIndex, ListInput, ListItem, List, LoginScreenTitle, LoginScreen, Message, MessagebarAttachment, MessagebarAttachments, MessagebarSheetImage, MessagebarSheetItem, MessagebarSheet, Messagebar, MessagesTitle, Messages, NavLeft, NavRight, NavTitleLarge, NavTitle, Navbar, PageContent, Page, Panel, PhotoBrowser, PieChart, Popover, Popup, Preloader, Progressbar, Radio, Range, RoutableModals, RouterContextProvider, Searchbar, Segmented, Sheet, SkeletonAvatar, SkeletonBlock, SkeletonImage, SkeletonText, Stepper, Subnavbar, SwipeoutActions, SwipeoutButton, SwiperSlide, Swiper, Tab, Tabs, TextEditor, Toggle, Toolbar, TreeviewItem, Treeview, UseIcon, View, Views }
+export { AccordionContent, AccordionItem, AccordionToggle, Accordion, ActionsButton, ActionsGroup, ActionsLabel, Actions, App, AreaChart, Badge, BlockFooter, BlockHeader, BlockTitle, Block, BreadcrumbsCollapsed, BreadcrumbsItem, BreadcrumbsSeparator, Breadcrumbs, Button, CardContent, CardFooter, CardHeader, Card, Checkbox, Chip, FabBackdrop, FabButton, FabButtons, Fab, Gauge, Icon, Input, Link, ListButton, ListGroup, ListIndex, ListInput, ListItem, List, LoginScreenTitle, LoginScreen, Message, MessagebarAttachment, MessagebarAttachments, MessagebarSheetImage, MessagebarSheetItem, MessagebarSheet, Messagebar, MessagesTitle, Messages, NavLeft, NavRight, NavTitleLarge, NavTitle, Navbar, PageContent, Page, Panel, PhotoBrowser, PieChart, Popover, Popup, Preloader, Progressbar, Radio, Range, RoutableModals, RouterContextProvider, Searchbar, Segmented, Sheet, SkeletonAvatar, SkeletonBlock, SkeletonImage, SkeletonText, Stepper, Subnavbar, SwipeoutActions, SwipeoutButton, Tab, Tabs, TextEditor, Toggle, Toolbar, TreeviewItem, Treeview, UseIcon, View, Views }
 export { f7, f7ready, theme, useStore, app };
 export default Framework7Svelte;

package/framework7-svelte.js

@@ -1,13 +1,13 @@
 /**
- * Framework7 Svelte 8.0.0-beta.1
+ * Framework7 Svelte 8.0.0-beta.2
  * Build full featured iOS & Android apps using Framework7 & Svelte
  * https://framework7.io/svelte/
  *
- * Copyright 2014-2022 Vladimir Kharlampidi
+ * Copyright 2014-2023 Vladimir Kharlampidi
  *
  * Released under the MIT License
  *
- * Released on: December 16, 2022
+ * Released on: February 7, 2023
  */
 import Framework7Svelte from './shared/plugin.js';
 import { f7, f7ready, theme, app } from './shared/f7.js';
@@ -93,8 +93,6 @@ import Stepper from './components/stepper.svelte';
 import Subnavbar from './components/subnavbar.svelte';
 import SwipeoutActions from './components/swipeout-actions.svelte';
 import SwipeoutButton from './components/swipeout-button.svelte';
-import SwiperSlide from './components/swiper-slide.svelte';
-import Swiper from './components/swiper.svelte';
 import Tab from './components/tab.svelte';
 import Tabs from './components/tabs.svelte';
 import TextEditor from './components/text-editor.svelte';
@@ -106,6 +104,6 @@ import UseIcon from './components/use-icon.svelte';
 import View from './components/view.svelte';
 import Views from './components/views.svelte';
 
-export { AccordionContent, AccordionItem, AccordionToggle, Accordion, ActionsButton, ActionsGroup, ActionsLabel, Actions, App, AreaChart, Badge, BlockFooter, BlockHeader, BlockTitle, Block, BreadcrumbsCollapsed, BreadcrumbsItem, BreadcrumbsSeparator, Breadcrumbs, Button, CardContent, CardFooter, CardHeader, Card, Checkbox, Chip, FabBackdrop, FabButton, FabButtons, Fab, Gauge, Icon, Input, Link, ListButton, ListGroup, ListIndex, ListInput, ListItem, List, LoginScreenTitle, LoginScreen, Message, MessagebarAttachment, MessagebarAttachments, MessagebarSheetImage, MessagebarSheetItem, MessagebarSheet, Messagebar, MessagesTitle, Messages, NavLeft, NavRight, NavTitleLarge, NavTitle, Navbar, PageContent, Page, Panel, PhotoBrowser, PieChart, Popover, Popup, Preloader, Progressbar, Radio, Range, RoutableModals, RouterContextProvider, Searchbar, Segmented, Sheet, SkeletonAvatar, SkeletonBlock, SkeletonImage, SkeletonText, Stepper, Subnavbar, SwipeoutActions, SwipeoutButton, SwiperSlide, Swiper, Tab, Tabs, TextEditor, Toggle, Toolbar, TreeviewItem, Treeview, UseIcon, View, Views }
+export { AccordionContent, AccordionItem, AccordionToggle, Accordion, ActionsButton, ActionsGroup, ActionsLabel, Actions, App, AreaChart, Badge, BlockFooter, BlockHeader, BlockTitle, Block, BreadcrumbsCollapsed, BreadcrumbsItem, BreadcrumbsSeparator, Breadcrumbs, Button, CardContent, CardFooter, CardHeader, Card, Checkbox, Chip, FabBackdrop, FabButton, FabButtons, Fab, Gauge, Icon, Input, Link, ListButton, ListGroup, ListIndex, ListInput, ListItem, List, LoginScreenTitle, LoginScreen, Message, MessagebarAttachment, MessagebarAttachments, MessagebarSheetImage, MessagebarSheetItem, MessagebarSheet, Messagebar, MessagesTitle, Messages, NavLeft, NavRight, NavTitleLarge, NavTitle, Navbar, PageContent, Page, Panel, PhotoBrowser, PieChart, Popover, Popup, Preloader, Progressbar, Radio, Range, RoutableModals, RouterContextProvider, Searchbar, Segmented, Sheet, SkeletonAvatar, SkeletonBlock, SkeletonImage, SkeletonText, Stepper, Subnavbar, SwipeoutActions, SwipeoutButton, Tab, Tabs, TextEditor, Toggle, Toolbar, TreeviewItem, Treeview, UseIcon, View, Views }
 export { f7, f7ready, theme, useStore, app };
 export default Framework7Svelte;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "framework7-svelte",
-  "version": "8.0.0-beta.1",
+  "version": "8.0.0-beta.2",
   "description": "Build full featured iOS & Android apps using Framework7 & Svelte",
   "type": "module",
   "svelte": "./framework7-svelte.js",

package/components/swiper-slide.d.ts

@@ -1,17 +0,0 @@
-<script>
-  export let lazy = undefined;
-  export let zoom = undefined;
-</script>
-
-<swiper-slide {lazy} {...$$restProps}>
-  {#if zoom}
-    <div
-      class="swiper-zoom-container"
-      data-swiper-zoom={typeof zoom === 'number' ? zoom : undefined}
-    >
-      <slot />
-    </div>
-  {:else}
-    <slot />
-  {/if}
-</swiper-slide>

package/components/swiper-slide.svelte

@@ -1,17 +0,0 @@
-<script>
-  export let lazy = undefined;
-  export let zoom = undefined;
-</script>
-
-<swiper-slide {lazy} {...$$restProps}>
-  {#if zoom}
-    <div
-      class="swiper-zoom-container"
-      data-swiper-zoom={typeof zoom === 'number' ? zoom : undefined}
-    >
-      <slot />
-    </div>
-  {:else}
-    <slot />
-  {/if}
-</swiper-slide>

package/components/swiper.d.ts

@@ -1,52 +0,0 @@
-<script>
-  import { onMount } from 'svelte';
-
-  let swiperEl = null;
-  let containerClasses = '';
-  let className = undefined;
-  export { className as class };
-
-  const getData = (restProps) => {
-    const props = {};
-    const attrs = {};
-    const events = {};
-    Object.keys(restProps).forEach((prop) => {
-      if (prop === 'class' || prop === 'id' || prop.includes('data-')) {
-        attrs[prop] = restProps[prop];
-      } else if (prop.indexOf('on') === 0) {
-        const eventName = prop.substring(2);
-        eventName[0] = eventName[0].toLowerCase();
-        events[eventName] = restProps[prop];
-      } else {
-        props[prop] = restProps[prop];
-      }
-    });
-    props.on = {
-      ...(props.on || {}),
-      ...events,
-      // eslint-disable-next-line
-      _containerClasses(_swiper, classes) {
-        containerClasses = classes;
-      },
-    };
-    return { props, attrs };
-  };
-
-  $: data = getData($$restProps);
-
-  onMount(() => {
-    Object.assign(swiperEl, data.props);
-    swiperEl.initialize();
-  });
-</script>
-
-<swiper-container
-  class={[containerClasses, className || ''].filter((c) => !!c).join(' ')}
-  bind:this={swiperEl}
-  {...data.attrs}
-  init="false"
->
-  <slot name="container-start" slot="container-start" />
-  <slot />
-  <slot name="container-end" slot="container-end" />
-</swiper-container>

package/components/swiper.svelte

@@ -1,52 +0,0 @@
-<script>
-  import { onMount } from 'svelte';
-
-  let swiperEl = null;
-  let containerClasses = '';
-  let className = undefined;
-  export { className as class };
-
-  const getData = (restProps) => {
-    const props = {};
-    const attrs = {};
-    const events = {};
-    Object.keys(restProps).forEach((prop) => {
-      if (prop === 'class' || prop === 'id' || prop.includes('data-')) {
-        attrs[prop] = restProps[prop];
-      } else if (prop.indexOf('on') === 0) {
-        const eventName = prop.substring(2);
-        eventName[0] = eventName[0].toLowerCase();
-        events[eventName] = restProps[prop];
-      } else {
-        props[prop] = restProps[prop];
-      }
-    });
-    props.on = {
-      ...(props.on || {}),
-      ...events,
-      // eslint-disable-next-line
-      _containerClasses(_swiper, classes) {
-        containerClasses = classes;
-      },
-    };
-    return { props, attrs };
-  };
-
-  $: data = getData($$restProps);
-
-  onMount(() => {
-    Object.assign(swiperEl, data.props);
-    swiperEl.initialize();
-  });
-</script>
-
-<swiper-container
-  class={[containerClasses, className || ''].filter((c) => !!c).join(' ')}
-  bind:this={swiperEl}
-  {...data.attrs}
-  init="false"
->
-  <slot name="container-start" slot="container-start" />
-  <slot />
-  <slot name="container-end" slot="container-end" />
-</swiper-container>