framework7-svelte 7.0.8 → 8.0.0-beta.1

package/components/actions-button.d.ts

@@ -3,7 +3,7 @@ import { SvelteComponentTyped } from 'svelte';
 
 
 interface ActionsButtonProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
-  bold?: boolean;
+  strong?: boolean;
   close?: boolean;
   onClick ?: (event?: any) => void;
   children?: React.ReactNode;

package/components/actions-button.svelte

@@ -11,7 +11,7 @@
   let className = undefined;
   export { className as class };
 
-  export let bold = false;
+  export let strong = false;
   export let close = true;
 
   let el;
@@ -23,7 +23,7 @@
     className,
     {
       'actions-button': true,
-      'actions-button-bold': bold,
+      'actions-button-strong': strong,
     },
     colorClasses($$props),
   );

package/components/actions-label.svelte

@@ -10,13 +10,13 @@
   let className = undefined;
   export { className as class };
 
-  export let bold = false;
+  export let strong = false;
 
   $: classes = classNames(
     className,
     'actions-label',
     {
-      'actions-button-bold': bold,
+      'actions-button-strong': strong,
     },
     colorClasses($$props),
   );

package/components/block.d.ts

@@ -4,21 +4,34 @@ import { SvelteComponentTyped } from 'svelte';
 
 interface BlockProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
   inset?: boolean;
+  insetIos?: boolean;
+  insetMd?: boolean;
   xsmallInset?: boolean;
+  xsmallInsetIos?: boolean;
+  xsmallInsetMd?: boolean;
   smallInset?: boolean;
+  smallInsetIos?: boolean;
+  smallInsetMd?: boolean;
   mediumInset?: boolean;
+  mediumInsetIos?: boolean;
+  mediumInsetMd?: boolean;
   largeInset?: boolean;
+  largeInsetIos?: boolean;
+  largeInsetMd?: boolean;
   xlargeInset?: boolean;
+  xlargeInsetIos?: boolean;
+  xlargeInsetMd?: boolean;
   strong?: boolean;
+  strongIos?: boolean;
+  strongMd?: boolean;
+  outline?: boolean;
+  outlineIos?: boolean;
+  outlineMd?: boolean;
   tabs?: boolean;
   tab?: boolean;
   tabActive?: boolean;
   accordionList?: boolean;
   accordionOpposite?: boolean;
-  noHairlines?: boolean;
-  noHairlinesMd?: boolean;
-  noHairlinesIos?: boolean;
-  noHairlinesAurora?: boolean;
   onTabShow?: (el?: HTMLElement) => void;
   onTabHide?: (el?: HTMLElement) => void;
   children?: React.ReactNode;

package/components/block.svelte

@@ -8,21 +8,34 @@
   const emit = createEmitter(createEventDispatcher, $$props);
 
   export let inset = false;
+  export let insetIos = false;
+  export let insetMd = false;
   export let xsmallInset = false;
+  export let xsmallInsetIos = false;
+  export let xsmallInsetMd = false;
   export let smallInset = false;
+  export let smallInsetIos = false;
+  export let smallInsetMd = false;
   export let mediumInset = false;
+  export let mediumInsetIos = false;
+  export let mediumInsetMd = false;
   export let largeInset = false;
+  export let largeInsetIos = false;
+  export let largeInsetMd = false;
   export let xlargeInset = false;
+  export let xlargeInsetIos = false;
+  export let xlargeInsetMd = false;
   export let strong = false;
+  export let strongIos = false;
+  export let strongMd = false;
   export let tabs = false;
   export let tab = false;
   export let tabActive = false;
   export let accordionList = false;
   export let accordionOpposite = false;
-  export let noHairlines = false;
-  export let noHairlinesMd = false;
-  export let noHairlinesIos = false;
-  export let noHairlinesAurora = false;
+  export let outline = false;
+  export let outlineMd = false;
+  export let outlineIos = false;
 
   let className = undefined;
   export { className as class };
@@ -34,21 +47,34 @@
     'block',
     {
       inset,
+      'inset-ios': insetIos,
+      'inset-md': insetMd,
       'xsmall-inset': xsmallInset,
+      'xsmall-inset-ios': xsmallInsetIos,
+      'xsmall-inset-md': xsmallInsetMd,
       'small-inset': smallInset,
+      'small-inset-ios': smallInsetIos,
+      'small-inset-md': smallInsetMd,
       'medium-inset': mediumInset,
+      'medium-inset-ios': mediumInsetIos,
+      'medium-inset-md': mediumInsetMd,
       'large-inset': largeInset,
+      'large-inset-ios': largeInsetIos,
+      'large-inset-md': largeInsetMd,
       'xlarge-inset': xlargeInset,
+      'xlarge-inset-ios': xlargeInsetIos,
+      'xlarge-inset-md': xlargeInsetMd,
       'block-strong': strong,
+      'block-strong-ios': strongIos,
+      'block-strong-md': strongMd,
       'accordion-list': accordionList,
       'accordion-opposite': accordionOpposite,
       tabs,
       tab,
       'tab-active': tabActive,
-      'no-hairlines': noHairlines,
-      'no-hairlines-md': noHairlinesMd,
-      'no-hairlines-ios': noHairlinesIos,
-      'no-hairlines-aurora': noHairlinesAurora,
+      'block-outline': outline,
+      'block-outline-md': outlineMd,
+      'block-outline-ios': outlineIos,
     },
     colorClasses($$props),
   );

package/components/button.d.ts

@@ -12,27 +12,24 @@ interface ButtonProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['d
   round ?: boolean;
   roundMd ?: boolean;
   roundIos ?: boolean;
-  roundAurora ?: boolean;
   fill ?: boolean;
   fillMd ?: boolean;
   fillIos ?: boolean;
-  fillAurora ?: boolean;
+  tonal ?: boolean;
+  tonalMd ?: boolean;
+  tonalIos ?: boolean;
   large ?: boolean;
   largeMd ?: boolean;
   largeIos ?: boolean;
-  largeAurora ?: boolean;
   small ?: boolean;
   smallMd ?: boolean;
   smallIos ?: boolean;
-  smallAurora ?: boolean;
   raised ?: boolean;
   raisedMd ?: boolean;
   raisedIos ?: boolean;
-  raisedAurora ?: boolean;
   outline ?: boolean;
   outlineMd ?: boolean;
   outlineIos ?: boolean;
-  outlineAurora ?: boolean;
   active ?: boolean;
   disabled ?: boolean;
   tooltip ?: string;
@@ -55,7 +52,6 @@ interface ButtonProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['d
   iconF7?: string;
   iconIos?: string;
   iconMd?: string;
-  iconAurora?: string;
   iconColor?: string;
   iconSize?: string | number;
   back?: boolean;

package/components/button.svelte

@@ -30,27 +30,24 @@
   export let round = false;
   export let roundMd = false;
   export let roundIos = false;
-  export let roundAurora = false;
   export let fill = false;
   export let fillMd = false;
   export let fillIos = false;
-  export let fillAurora = false;
+  export let tonal = false;
+  export let tonalMd = false;
+  export let tonalIos = false;
   export let large = false;
   export let largeMd = false;
   export let largeIos = false;
-  export let largeAurora = false;
   export let small = false;
   export let smallMd = false;
   export let smallIos = false;
-  export let smallAurora = false;
   export let raised = false;
   export let raisedMd = false;
   export let raisedIos = false;
-  export let raisedAurora = false;
   export let outline = false;
   export let outlineMd = false;
   export let outlineIos = false;
-  export let outlineAurora = false;
   export let active = false;
   export let disabled = false;
   export let tooltip = undefined;
@@ -86,28 +83,25 @@
 
       'button-round': round,
       'button-round-ios': roundIos,
-      'button-round-aurora': roundAurora,
       'button-round-md': roundMd,
       'button-fill': fill,
       'button-fill-ios': fillIos,
-      'button-fill-aurora': fillAurora,
       'button-fill-md': fillMd,
+      'button-tonal': tonal,
+      'button-tonal-ios': tonalIos,
+      'button-tonal-md': tonalMd,
       'button-large': large,
       'button-large-ios': largeIos,
-      'button-large-aurora': largeAurora,
       'button-large-md': largeMd,
       'button-small': small,
       'button-small-ios': smallIos,
-      'button-small-aurora': smallAurora,
       'button-small-md': smallMd,
       'button-raised': raised,
       'button-raised-ios': raisedIos,
-      'button-raised-aurora': raisedAurora,
       'button-raised-md': raisedMd,
       'button-active': active,
       'button-outline': outline,
       'button-outline-ios': outlineIos,
-      'button-outline-aurora': outlineAurora,
       'button-outline-md': outlineMd,
       'button-preloader': preloader,
       'button-loading': loading,

package/components/card.d.ts

@@ -6,7 +6,12 @@ interface CardProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div
   title ?: string | number;
   content ?: string | number;
   footer ?: string | number;
+  raised?: boolean;
   outline ?: boolean;
+  outlineIos ?: boolean;
+  outlineMd ?: boolean;
+  headerDivider ?: boolean;
+  footerDivider ?: boolean;
   expandable ?: boolean;
   expandableAnimateWidth ?: boolean;
   expandableOpened ?: boolean;
@@ -19,8 +24,6 @@ interface CardProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div
   closeByBackdropClick ?: boolean;
   backdrop ?: boolean;
   backdropEl ?: string;
-  noShadow ?: boolean;
-  noBorder ?: boolean;
   padding ?: boolean;
   onCardBeforeOpen ?: (el?: HTMLElement, prevent?: any) => void;
   onCardOpen ?: (el?: HTMLElement) => void;

package/components/card.svelte

@@ -17,7 +17,12 @@
   export let title = undefined;
   export let content = undefined;
   export let footer = undefined;
+  export let raised = false;
   export let outline = false;
+  export let outlineIos = false;
+  export let outlineMd = false;
+  export let headerDivider = false;
+  export let footerDivider = false;
   export let expandable = false;
   export let expandableAnimateWidth = false;
   export let expandableOpened = false;
@@ -30,8 +35,6 @@
   export let closeByBackdropClick = undefined;
   export let backdrop = undefined;
   export let backdropEl = undefined;
-  export let noShadow = false;
-  export let noBorder = false;
   export let padding = true;
 
   let el;
@@ -41,10 +44,13 @@
     'card',
     {
       'card-outline': outline,
+      'card-outline-ios': outlineIos,
+      'card-outline-md': outlineMd,
+      'card-raised': raised,
+      'card-header-divider': headerDivider,
+      'card-footer-divider': footerDivider,
       'card-expandable': expandable,
       'card-expandable-animate-width': expandableAnimateWidth,
-      'no-shadow': noShadow,
-      'no-border': noBorder,
     },
     colorClasses($$props),
   );

package/components/chip.d.ts

@@ -26,7 +26,6 @@ interface ChipProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div
   iconF7?: string;
   iconIos?: string;
   iconMd?: string;
-  iconAurora?: string;
   iconColor?: string;
   iconSize?: string | number;
 }

package/components/icon.d.ts

@@ -7,7 +7,6 @@ interface IconProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div
   f7 ?: string;
   icon ?: string;
   ios ?: string;
-  aurora ?: string;
   md ?: string;
   tooltip ?: string;
   tooltipTrigger ?: string;

package/components/icon.svelte

@@ -14,7 +14,6 @@
   export let f7 = undefined;
   export let icon = undefined;
   export let ios = undefined;
-  export let aurora = undefined;
   export let md = undefined;
   export let tooltip = undefined;
   export let tooltipTrigger = undefined;
@@ -34,7 +33,6 @@
   $: if (theme) {
     if (theme.ios) themeIcon = ios;
     if (theme.md) themeIcon = md;
-    if (theme.aurora) themeIcon = aurora;
   }
 
   $: if (themeIcon) {
@@ -66,13 +64,6 @@
       textComputed = md.split(':')[1];
     } else if (ios && t && t.ios && (ios.indexOf('material:') >= 0 || ios.indexOf('f7:') >= 0)) {
       textComputed = ios.split(':')[1];
-    } else if (
-      aurora &&
-      t &&
-      t.aurora &&
-      (aurora.indexOf('material:') >= 0 || aurora.indexOf('f7:') >= 0)
-    ) {
-      textComputed = aurora.split(':')[1];
     }
     return textComputed;
   }

package/components/link.d.ts

@@ -32,7 +32,6 @@ interface LinkProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div
   iconF7?: string;
   iconIos?: string;
   iconMd?: string;
-  iconAurora?: string;
   iconColor?: string;
   iconSize?: string | number;
   searchbarEnable?: boolean | string;

package/components/link.svelte

@@ -53,7 +53,7 @@
       TabbarContext = newValue;
     }) || {};
 
-  $: isTabbarLabel = tabbarLabel || TabbarContext.tabbarHasLabels;
+  $: isTabbarIcons = tabbarLabel || TabbarContext.tabbarHasIcons;
 
   $: hrefComputed = href === true ? '#' : href || undefined;
 
@@ -76,7 +76,7 @@
   $: classes = classNames(
     className,
     {
-      link: !(noLinkClass || isTabbarLabel),
+      link: !(noLinkClass || isTabbarIcons),
       'icon-only': iconOnlyComputed,
       'tab-link': tabLink || tabLink === '',
       'tab-link-active': tabLinkActive,
@@ -116,7 +116,7 @@
   {/if}
   <slot />
   {#if typeof text !== 'undefined' || typeof badge !== 'undefined'}
-    <span class:tabbar-label={isTabbarLabel}>
+    <span class:tabbar-label={isTabbarIcons}>
       {plainText(text)}
       {#if typeof badge !== 'undefined'}<Badge color={badgeColor}>{plainText(badge)}</Badge>{/if}
     </span>

package/components/list-index.d.ts

@@ -10,7 +10,6 @@ interface ListIndexProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap
   label ?: boolean;
   iosItemHeight ?: number;
   mdItemHeight ?: number;
-  auroraItemHeight ?: number;
   color?: string;
   colorTheme?: string;
   textColor?: string;

package/components/list-index.svelte

@@ -17,7 +17,6 @@
   export let label = false;
   export let iosItemHeight = 14;
   export let mdItemHeight = 14;
-  export let auroraItemHeight = 14;
 
   export let f7Slot = 'fixed';
 
@@ -62,7 +61,6 @@
         indexes,
         iosItemHeight,
         mdItemHeight,
-        auroraItemHeight,
         scrollList,
         label,
         on: {

package/components/list-input.d.ts

@@ -50,7 +50,6 @@ interface ListInputProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap
   info ?: string;
   outline ?: boolean;
   label ?: string | number;
-  inlineLabel ?: boolean;
   floatingLabel ?: boolean;
   calendarParams ?: Calendar.Parameters;
   colorPickerParams ?: ColorPicker.Parameters;

package/components/list-input.svelte

@@ -68,7 +68,6 @@
 
   // Label
   export let label = undefined;
-  export let inlineLabel = undefined;
   export let floatingLabel = undefined;
 
   // Datepicker
@@ -200,7 +199,6 @@
     !wrap && { disabled },
     !wrap && colorClasses($$props),
     {
-      'inline-label': inlineLabel,
       'item-input-outline': outline,
       'item-input-focused': inputFocused,
       'item-input-with-info': !!info || hasInfoSlots,

package/components/list-item.d.ts

@@ -23,7 +23,6 @@ interface ListItemProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap[
   badgeColor ?: string;
   mediaItem ?: boolean;
   mediaList ?: boolean;
-  divider ?: boolean;
   groupTitle ?: boolean;
   swipeout ?: boolean;
   swipeoutOpened ?: boolean;

package/components/list-item.svelte

@@ -47,7 +47,6 @@
 
   export let mediaItem = false;
   export let mediaList = false;
-  export let divider = false;
   export let groupTitle = false;
   export let swipeout = false;
   export let swipeoutOpened = false;
@@ -103,7 +102,6 @@
   $: liClasses = classNames(
     className,
     {
-      'item-divider': divider,
       'list-group-title': groupTitle,
       'media-item': isMedia,
       swipeout,
@@ -315,7 +313,7 @@
 </script>
 
 <!-- svelte-ignore a11y-missing-attribute -->
-{#if divider || groupTitle}
+{#if groupTitle}
   <li
     on:click={onClick}
     bind:this={el}

package/components/list.d.ts

@@ -6,11 +6,32 @@ import { VirtualList } from 'framework7/types';
 
 interface ListProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
   inset ?: boolean;
+  insetIos ?: boolean;
+  insetMd ?: boolean;
   xsmallInset ?: boolean;
+  xsmallInsetIos ?: boolean;
+  xsmallInsetMd ?: boolean;
   smallInset ?: boolean;
+  smallInsetIos ?: boolean;
+  smallInsetMd ?: boolean;
   mediumInset ?: boolean;
+  mediumInsetIos ?: boolean;
+  mediumInsetMd ?: boolean;
   largeInset ?: boolean;
+  largeInsetIos ?: boolean;
+  largeInsetMd ?: boolean;
   xlargeInset ?: boolean;
+  xlargeInsetIos ?: boolean;
+  xlargeInsetMd ?: boolean;
+  strong?: boolean;
+  strongIos?: boolean;
+  strongMd?: boolean;
+  outline?: boolean;
+  outlineIos?: boolean;
+  outlineMd?: boolean;
+  dividers?: boolean;
+  dividersIos?: boolean;
+  dividersMd?: boolean;
   mediaList ?: boolean;
   sortable ?: boolean;
   sortableTapHold ?: boolean;
@@ -23,21 +44,12 @@ interface ListProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div
   simpleList ?: boolean;
   linksList ?: boolean;
   menuList ?: boolean;
-  noHairlines ?: boolean;
-  noHairlinesBetween ?: boolean;
-  noHairlinesMd ?: boolean;
-  noHairlinesBetweenMd ?: boolean;
-  noHairlinesIos ?: boolean;
-  noHairlinesBetweenIos ?: boolean;
-  noHairlinesAurora ?: boolean;
-  noHairlinesBetweenAurora ?: boolean;
   noChevron ?: boolean;
   chevronCenter ?: boolean;
   tab ?: boolean;
   tabActive ?: boolean;
   form ?: boolean;
   formStoreData ?: boolean;
-  inlineLabels ?: boolean;
   virtualList ?: boolean;
   virtualListParams ?: Object;
   color?: string;

package/components/list.svelte

@@ -15,11 +15,32 @@
   export let ul = true;
 
   export let inset = false;
+  export let insetIos = false;
+  export let insetMd = false;
   export let xsmallInset = false;
+  export let xsmallInsetIos = false;
+  export let xsmallInsetMd = false;
   export let smallInset = false;
+  export let smallInsetIos = false;
+  export let smallInsetMd = false;
   export let mediumInset = false;
+  export let mediumInsetIos = false;
+  export let mediumInsetMd = false;
   export let largeInset = false;
+  export let largeInsetIos = false;
+  export let largeInsetMd = false;
   export let xlargeInset = false;
+  export let xlargeInsetIos = false;
+  export let xlargeInsetMd = false;
+  export let strong = false;
+  export let strongIos = false;
+  export let strongMd = false;
+  export let outline = false;
+  export let outlineIos = false;
+  export let outlineMd = false;
+  export let dividers = false;
+  export let dividersIos = false;
+  export let dividersMd = false;
   export let mediaList = false;
   export let sortable = false;
   export let sortableTapHold = false;
@@ -33,15 +54,6 @@
   export let linksList = false;
   export let menuList = false;
 
-  export let noHairlines = false;
-  export let noHairlinesBetween = false;
-  export let noHairlinesMd = false;
-  export let noHairlinesBetweenMd = false;
-  export let noHairlinesIos = false;
-  export let noHairlinesBetweenIos = false;
-  export let noHairlinesAurora = false;
-  export let noHairlinesBetweenAurora = false;
-
   // Links Chevron (Arrow) Icon
   export let noChevron = false;
   export let chevronCenter = false;
@@ -53,7 +65,6 @@
   // Form
   export let form = false;
   export let formStoreData = false;
-  export let inlineLabels = false;
 
   // Virtual List
   export let virtualList = false;
@@ -74,11 +85,32 @@
     'list',
     {
       inset,
+      'inset-ios': insetIos,
+      'inset-md': insetMd,
       'xsmall-inset': xsmallInset,
+      'xsmall-inset-ios': xsmallInsetIos,
+      'xsmall-inset-md': xsmallInsetMd,
       'small-inset': smallInset,
+      'small-inset-ios': smallInsetIos,
+      'small-inset-md': smallInsetMd,
       'medium-inset': mediumInset,
+      'medium-inset-ios': mediumInsetIos,
+      'medium-inset-md': mediumInsetMd,
       'large-inset': largeInset,
+      'large-inset-ios': largeInsetIos,
+      'large-inset-md': largeInsetMd,
       'xlarge-inset': xlargeInset,
+      'xlarge-inset-ios': xlargeInsetIos,
+      'xlarge-inset-md': xlargeInsetMd,
+      'list-strong': strong,
+      'list-strong-ios': strongIos,
+      'list-strong-md': strongMd,
+      'list-outline': outline,
+      'list-outline-ios': outlineIos,
+      'list-outline-md': outlineMd,
+      'list-dividers': dividers,
+      'list-dividers-ios': dividersIos,
+      'list-dividers-md': dividersMd,
       'media-list': mediaList,
       'simple-list': simpleList,
       'links-list': linksList,
@@ -93,16 +125,7 @@
       'virtual-list': virtualList,
       tab,
       'tab-active': tabActive,
-      'no-hairlines': noHairlines,
-      'no-hairlines-md': noHairlinesMd,
-      'no-hairlines-ios': noHairlinesIos,
-      'no-hairlines-aurora': noHairlinesAurora,
-      'no-hairlines-between': noHairlinesBetween,
-      'no-hairlines-between-md': noHairlinesBetweenMd,
-      'no-hairlines-between-ios': noHairlinesBetweenIos,
-      'no-hairlines-between-aurora': noHairlinesBetweenAurora,
       'form-store-data': formStoreData,
-      'inline-labels': inlineLabels,
       'no-chevron': noChevron,
       'chevron-center': chevronCenter,
     },

package/components/messagebar-sheet-image.svelte

@@ -16,7 +16,7 @@
 
   $: classes = classNames(className, 'messagebar-sheet-image', 'checkbox', colorClasses($$props));
 
-  $: styles = `${image ? `background-image: url(${image});` : ''}${style || ''}`;
+  $: styles = `${style || ''}`;
 
   function onChange(event) {
     if (event.target.checked) emit('checked', [event]);
@@ -29,5 +29,8 @@
 <label class={classes} style={styles} {...restProps($$restProps)}>
   <input type="checkbox" {checked} on:change={onChange} />
   <i class="icon icon-checkbox" />
+  {#if image}
+    <img src={image} alt="" />
+  {/if}
   <slot />
 </label>