framework7-svelte 7.0.0-beta.2 → 7.0.0-beta.20

package/components/accordion-content.svelte

@@ -1,7 +1,7 @@
 <script>
-  import { colorClasses } from '../shared/mixins';
-  import { classNames } from '../shared/utils';
-  import { restProps } from '../shared/rest-props';
+  import { colorClasses } from '../shared/mixins.js';
+  import { classNames } from '../shared/utils.js';
+  import { restProps } from '../shared/rest-props.js';
 
   let className = undefined;
   export { className as class };

package/components/accordion-item.svelte

@@ -1,9 +1,9 @@
 <script>
   import { createEventDispatcher, onMount, onDestroy } from 'svelte';
-  import { colorClasses } from '../shared/mixins';
-  import { classNames, createEmitter } from '../shared/utils';
-  import { restProps } from '../shared/rest-props';
-  import { app, f7ready } from '../shared/f7';
+  import { colorClasses } from '../shared/mixins.js';
+  import { classNames, createEmitter } from '../shared/utils.js';
+  import { restProps } from '../shared/rest-props.js';
+  import { app, f7ready } from '../shared/f7.js';
 
   const emit = createEmitter(createEventDispatcher, $$props);
 

package/components/accordion-toggle.svelte

@@ -1,7 +1,7 @@
 <script>
-  import { colorClasses } from '../shared/mixins';
-  import { classNames } from '../shared/utils';
-  import { restProps } from '../shared/rest-props';
+  import { colorClasses } from '../shared/mixins.js';
+  import { classNames } from '../shared/utils.js';
+  import { restProps } from '../shared/rest-props.js';
 
   let className = undefined;
   export { className as class };

package/components/accordion.svelte

@@ -1,7 +1,7 @@
 <script>
-  import { colorClasses } from '../shared/mixins';
-  import { classNames } from '../shared/utils';
-  import { restProps } from '../shared/rest-props';
+  import { colorClasses } from '../shared/mixins.js';
+  import { classNames } from '../shared/utils.js';
+  import { restProps } from '../shared/rest-props.js';
 
   let className = undefined;
   export { className as class };

package/components/actions-button.svelte

@@ -1,10 +1,10 @@
 <script>
   import { createEventDispatcher } from 'svelte';
 
-  import { colorClasses } from '../shared/mixins';
-  import { classNames, createEmitter } from '../shared/utils';
-  import { restProps } from '../shared/rest-props';
-  import { app } from '../shared/f7';
+  import { colorClasses } from '../shared/mixins.js';
+  import { classNames, createEmitter } from '../shared/utils.js';
+  import { restProps } from '../shared/rest-props.js';
+  import { app } from '../shared/f7.js';
 
   const emit = createEmitter(createEventDispatcher, $$props);
 

package/components/actions-group.svelte

@@ -1,7 +1,7 @@
 <script>
-  import { colorClasses } from '../shared/mixins';
-  import { classNames } from '../shared/utils';
-  import { restProps } from '../shared/rest-props';
+  import { colorClasses } from '../shared/mixins.js';
+  import { classNames } from '../shared/utils.js';
+  import { restProps } from '../shared/rest-props.js';
 
   let className = undefined;
   export { className as class };

package/components/actions-label.svelte

@@ -1,9 +1,9 @@
 <script>
   import { createEventDispatcher } from 'svelte';
 
-  import { colorClasses } from '../shared/mixins';
-  import { classNames, createEmitter } from '../shared/utils';
-  import { restProps } from '../shared/rest-props';
+  import { colorClasses } from '../shared/mixins.js';
+  import { classNames, createEmitter } from '../shared/utils.js';
+  import { restProps } from '../shared/rest-props.js';
 
   const emit = createEmitter(createEventDispatcher, $$props);
 

package/components/actions.svelte

@@ -1,10 +1,10 @@
 <script>
   import { createEventDispatcher, onMount, onDestroy } from 'svelte';
-  import { colorClasses } from '../shared/mixins';
-  import { classNames, createEmitter } from '../shared/utils';
-  import { restProps } from '../shared/rest-props';
-  import { app, f7ready } from '../shared/f7';
-  import { modalStateClasses } from '../shared/modal-state-classes';
+  import { colorClasses } from '../shared/mixins.js';
+  import { classNames, createEmitter } from '../shared/utils.js';
+  import { restProps } from '../shared/rest-props.js';
+  import { app, f7ready } from '../shared/f7.js';
+  import { modalStateClasses } from '../shared/modal-state-classes.js';
 
   const emit = createEmitter(createEventDispatcher, $$props);
 

package/components/app.svelte

@@ -1,8 +1,8 @@
 <script>
   import { onMount } from 'svelte';
-  import { app, f7init } from '../shared/f7';
-  import { colorClasses } from '../shared/mixins';
-  import { classNames, noUndefinedProps } from '../shared/utils';
+  import { app, f7init } from '../shared/f7.js';
+  import { colorClasses } from '../shared/mixins.js';
+  import { classNames, noUndefinedProps } from '../shared/utils.js';
 
   import RoutableModals from './routable-modals.svelte';
 

package/components/appbar.svelte

@@ -1,7 +1,7 @@
 <script>
-  import { colorClasses } from '../shared/mixins';
-  import { classNames } from '../shared/utils';
-  import { restProps } from '../shared/rest-props';
+  import { colorClasses } from '../shared/mixins.js';
+  import { classNames } from '../shared/utils.js';
+  import { restProps } from '../shared/rest-props.js';
 
   let className = undefined;
   export { className as class };

package/components/area-chart.svelte

@@ -1,8 +1,8 @@
 <script>
   import { createEventDispatcher, onDestroy, onMount } from 'svelte';
-  import { classNames, createEmitter } from '../shared/utils';
-  import { restProps } from '../shared/rest-props';
-  import { app } from '../shared/f7';
+  import { classNames, createEmitter } from '../shared/utils.js';
+  import { restProps } from '../shared/rest-props.js';
+  import { app } from '../shared/f7.js';
 
   const emit = createEmitter(createEventDispatcher, $$props);
 

package/components/badge.svelte

@@ -1,8 +1,8 @@
 <script>
-  import { colorClasses } from '../shared/mixins';
-  import { classNames } from '../shared/utils';
-  import { restProps } from '../shared/rest-props';
-  import { useTooltip } from '../shared/use-tooltip';
+  import { colorClasses } from '../shared/mixins.js';
+  import { classNames } from '../shared/utils.js';
+  import { restProps } from '../shared/rest-props.js';
+  import { useTooltip } from '../shared/use-tooltip.js';
 
   let className = undefined;
   export { className as class };

package/components/block-footer.svelte

@@ -1,7 +1,7 @@
 <script>
-  import { colorClasses } from '../shared/mixins';
-  import { classNames } from '../shared/utils';
-  import { restProps } from '../shared/rest-props';
+  import { colorClasses } from '../shared/mixins.js';
+  import { classNames } from '../shared/utils.js';
+  import { restProps } from '../shared/rest-props.js';
 
   let className = undefined;
   export { className as class };

package/components/block-header.svelte

@@ -1,7 +1,7 @@
 <script>
-  import { restProps } from '../shared/rest-props';
-  import { colorClasses } from '../shared/mixins';
-  import { classNames } from '../shared/utils';
+  import { restProps } from '../shared/rest-props.js';
+  import { colorClasses } from '../shared/mixins.js';
+  import { classNames } from '../shared/utils.js';
 
   let className = undefined;
   export { className as class };

package/components/block-title.svelte

@@ -1,7 +1,7 @@
 <script>
-  import { colorClasses } from '../shared/mixins';
-  import { classNames } from '../shared/utils';
-  import { restProps } from '../shared/rest-props';
+  import { colorClasses } from '../shared/mixins.js';
+  import { classNames } from '../shared/utils.js';
+  import { restProps } from '../shared/rest-props.js';
 
   export let large = false;
   export let medium = false;

package/components/block.svelte

@@ -1,9 +1,9 @@
 <script>
   import { createEventDispatcher } from 'svelte';
-  import { colorClasses } from '../shared/mixins';
-  import { classNames, createEmitter } from '../shared/utils';
-  import { restProps } from '../shared/rest-props';
-  import { useTab } from '../shared/use-tab';
+  import { colorClasses } from '../shared/mixins.js';
+  import { classNames, createEmitter } from '../shared/utils.js';
+  import { restProps } from '../shared/rest-props.js';
+  import { useTab } from '../shared/use-tab.js';
 
   const emit = createEmitter(createEventDispatcher, $$props);
 

package/components/breadcrumbs-collapsed.d.ts

@@ -0,0 +1,17 @@
+
+import { SvelteComponentTyped } from 'svelte';
+
+
+interface BreadcrumbsCollapsedProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
+  onClick ?: (event?: any) => void;
+}
+
+
+
+class BreadcrumbsCollapsed extends SvelteComponentTyped<
+  BreadcrumbsCollapsedProps,
+  { click: CustomEvent<void>; },
+  {  'default' : {}; }
+> {}
+
+export default BreadcrumbsCollapsed;

package/components/breadcrumbs-collapsed.svelte

@@ -0,0 +1,21 @@
+<script>
+  import { createEventDispatcher } from 'svelte';
+  import { classNames, createEmitter } from '../shared/utils.js';
+  import { restProps } from '../shared/rest-props.js';
+
+  let className = undefined;
+  export { className as class };
+
+  $: classes = classNames(className, 'breadcrumbs-collapsed');
+
+  const emit = createEmitter(createEventDispatcher, $$props);
+
+  function onClick() {
+    emit('click');
+  }
+</script>
+
+<div class={classes} {...restProps($$restProps)} on:click={onClick}>
+  <span />
+  <slot />
+</div>

package/components/breadcrumbs-item.d.ts

@@ -0,0 +1,18 @@
+
+import { SvelteComponentTyped } from 'svelte';
+
+
+interface BreadcrumbsItemProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
+  onClick ?: (event?: any) => void;
+  active?: boolean;
+}
+
+
+
+class BreadcrumbsItem extends SvelteComponentTyped<
+  BreadcrumbsItemProps,
+  {  },
+  {  'default' : {}; }
+> {}
+
+export default BreadcrumbsItem;

package/components/breadcrumbs-item.svelte

@@ -0,0 +1,15 @@
+<script>
+  import { classNames } from '../shared/utils.js';
+  import { restProps } from '../shared/rest-props.js';
+
+  export let active = false;
+
+  let className = undefined;
+  export { className as class };
+
+  $: classes = classNames(className, 'breadcrumbs-item', active && 'breadcrumbs-item-active');
+</script>
+
+<div class={classes} {...restProps($$restProps)}>
+  <slot />
+</div>

package/components/breadcrumbs-separator.d.ts

@@ -0,0 +1,17 @@
+
+import { SvelteComponentTyped } from 'svelte';
+
+
+interface BreadcrumbsSeparatorProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
+  
+}
+
+
+
+class BreadcrumbsSeparator extends SvelteComponentTyped<
+  BreadcrumbsSeparatorProps,
+  {  },
+  {  }
+> {}
+
+export default BreadcrumbsSeparator;

package/components/breadcrumbs-separator.svelte

@@ -0,0 +1,11 @@
+<script>
+  import { classNames } from '../shared/utils.js';
+  import { restProps } from '../shared/rest-props.js';
+
+  let className = undefined;
+  export { className as class };
+
+  $: classes = classNames(className, 'breadcrumbs-separator');
+</script>
+
+<div class={classes} {...restProps($$restProps)} />

package/components/breadcrumbs.d.ts

@@ -0,0 +1,17 @@
+
+import { SvelteComponentTyped } from 'svelte';
+
+
+interface BreadcrumbsProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
+  
+}
+
+
+
+class Breadcrumbs extends SvelteComponentTyped<
+  BreadcrumbsProps,
+  {  },
+  {  'default' : {}; }
+> {}
+
+export default Breadcrumbs;

package/components/breadcrumbs.svelte

@@ -0,0 +1,13 @@
+<script>
+  import { classNames } from '../shared/utils.js';
+  import { restProps } from '../shared/rest-props.js';
+
+  let className = undefined;
+  export { className as class };
+
+  $: classes = classNames(className, 'breadcrumbs');
+</script>
+
+<div class={classes} {...restProps($$restProps)}>
+  <slot />
+</div>

package/components/button.svelte

@@ -6,12 +6,12 @@
     routerClasses,
     actionsAttrs,
     actionsClasses,
-  } from '../shared/mixins';
-  import { classNames, extend, isStringProp, plainText, createEmitter } from '../shared/utils';
-  import { restProps } from '../shared/rest-props';
-  import { useTooltip } from '../shared/use-tooltip';
-  import { useRouteProps } from '../shared/use-route-props';
-  import { useIcon } from '../shared/use-icon';
+  } from '../shared/mixins.js';
+  import { classNames, extend, isStringProp, plainText, createEmitter } from '../shared/utils.js';
+  import { restProps } from '../shared/rest-props.js';
+  import { useTooltip } from '../shared/use-tooltip.js';
+  import { useRouteProps } from '../shared/use-route-props.js';
+  import { useIcon } from '../shared/use-icon.js';
 
   import UseIcon from './use-icon.svelte';
   import Preloader from './preloader.svelte';

package/components/card-content.svelte

@@ -1,7 +1,7 @@
 <script>
-  import { colorClasses } from '../shared/mixins';
-  import { classNames } from '../shared/utils';
-  import { restProps } from '../shared/rest-props';
+  import { colorClasses } from '../shared/mixins.js';
+  import { classNames } from '../shared/utils.js';
+  import { restProps } from '../shared/rest-props.js';
 
   let className = undefined;
   export { className as class };

package/components/card-footer.svelte

@@ -1,7 +1,7 @@
 <script>
-  import { colorClasses } from '../shared/mixins';
-  import { classNames } from '../shared/utils';
-  import { restProps } from '../shared/rest-props';
+  import { colorClasses } from '../shared/mixins.js';
+  import { classNames } from '../shared/utils.js';
+  import { restProps } from '../shared/rest-props.js';
 
   let className = undefined;
   export { className as class };

package/components/card-header.svelte

@@ -1,7 +1,7 @@
 <script>
-  import { colorClasses } from '../shared/mixins';
-  import { classNames } from '../shared/utils';
-  import { restProps } from '../shared/rest-props';
+  import { colorClasses } from '../shared/mixins.js';
+  import { classNames } from '../shared/utils.js';
+  import { restProps } from '../shared/rest-props.js';
 
   let className = undefined;
   export { className as class };

package/components/card.svelte

@@ -1,9 +1,9 @@
 <script>
   import { createEventDispatcher, onMount, onDestroy } from 'svelte';
-  import { colorClasses } from '../shared/mixins';
-  import { classNames, plainText, createEmitter } from '../shared/utils';
-  import { restProps } from '../shared/rest-props';
-  import { app, f7ready } from '../shared/f7';
+  import { colorClasses } from '../shared/mixins.js';
+  import { classNames, plainText, createEmitter } from '../shared/utils.js';
+  import { restProps } from '../shared/rest-props.js';
+  import { app, f7ready } from '../shared/f7.js';
 
   import CardHeader from './card-header.svelte';
   import CardContent from './card-content.svelte';

package/components/checkbox.svelte

@@ -1,8 +1,8 @@
 <script>
   import { createEventDispatcher, onMount, afterUpdate } from 'svelte';
-  import { colorClasses } from '../shared/mixins';
-  import { classNames, createEmitter } from '../shared/utils';
-  import { restProps } from '../shared/rest-props';
+  import { colorClasses } from '../shared/mixins.js';
+  import { classNames, createEmitter } from '../shared/utils.js';
+  import { restProps } from '../shared/rest-props.js';
 
   const emit = createEmitter(createEventDispatcher, $$props);
 
@@ -54,7 +54,8 @@
     {disabled}
     {readonly}
     {checked}
-    on:change={onChange} />
+    on:change={onChange}
+  />
   <i class="icon-checkbox" />
   <slot />
 </label>

package/components/chip.svelte

@@ -1,11 +1,11 @@
 <script>
   import { createEventDispatcher } from 'svelte';
 
-  import { colorClasses } from '../shared/mixins';
-  import { classNames, plainText, createEmitter } from '../shared/utils';
-  import { restProps } from '../shared/rest-props';
-  import { useTooltip } from '../shared/use-tooltip';
-  import { useIcon } from '../shared/use-icon';
+  import { colorClasses } from '../shared/mixins.js';
+  import { classNames, plainText, createEmitter } from '../shared/utils.js';
+  import { restProps } from '../shared/rest-props.js';
+  import { useTooltip } from '../shared/use-tooltip.js';
+  import { useIcon } from '../shared/use-icon.js';
 
   import UseIcon from './use-icon.svelte';
 

package/components/col.svelte

@@ -1,9 +1,9 @@
 <script>
   import { createEventDispatcher, onMount, onDestroy } from 'svelte';
-  import { colorClasses } from '../shared/mixins';
-  import { classNames, createEmitter } from '../shared/utils';
-  import { restProps } from '../shared/rest-props';
-  import { app, f7ready } from '../shared/f7';
+  import { colorClasses } from '../shared/mixins.js';
+  import { classNames, createEmitter } from '../shared/utils.js';
+  import { restProps } from '../shared/rest-props.js';
+  import { app, f7ready } from '../shared/f7.js';
 
   const emit = createEmitter(createEventDispatcher, $$props);
 

package/components/fab-backdrop.svelte

@@ -1,6 +1,6 @@
 <script>
-  import { classNames } from '../shared/utils';
-  import { restProps } from '../shared/rest-props';
+  import { classNames } from '../shared/utils.js';
+  import { restProps } from '../shared/rest-props.js';
 
   let className = undefined;
   export { className as class };

package/components/fab-button.svelte

@@ -1,9 +1,9 @@
 <script>
   import { createEventDispatcher } from 'svelte';
-  import { colorClasses } from '../shared/mixins';
-  import { classNames, plainText, createEmitter } from '../shared/utils';
-  import { restProps } from '../shared/rest-props';
-  import { useTooltip } from '../shared/use-tooltip';
+  import { colorClasses } from '../shared/mixins.js';
+  import { classNames, plainText, createEmitter } from '../shared/utils.js';
+  import { restProps } from '../shared/rest-props.js';
+  import { useTooltip } from '../shared/use-tooltip.js';
 
   const emit = createEmitter(createEventDispatcher, $$props);
 
@@ -35,7 +35,7 @@
 <!-- svelte-ignore a11y-missing-attribute -->
 <a
   bind:this={el}
-  target={target}
+  {target}
   class={classes}
   on:click={onClick}
   {...restProps($$restProps)}

package/components/fab-buttons.svelte

@@ -1,7 +1,7 @@
 <script>
-  import { colorClasses } from '../shared/mixins';
-  import { classNames } from '../shared/utils';
-  import { restProps } from '../shared/rest-props';
+  import { colorClasses } from '../shared/mixins.js';
+  import { classNames } from '../shared/utils.js';
+  import { restProps } from '../shared/rest-props.js';
 
   let className = undefined;
   export { className as class };

package/components/fab.svelte

@@ -1,10 +1,10 @@
 <script>
   import { createEventDispatcher, onMount, afterUpdate } from 'svelte';
-  import { colorClasses } from '../shared/mixins';
-  import { classNames, plainText, createEmitter } from '../shared/utils';
-  import { restProps } from '../shared/rest-props';
-  import { app, f7ready } from '../shared/f7';
-  import { useTooltip } from '../shared/use-tooltip';
+  import { colorClasses } from '../shared/mixins.js';
+  import { classNames, plainText, createEmitter } from '../shared/utils.js';
+  import { restProps } from '../shared/rest-props.js';
+  import { app, f7ready } from '../shared/f7.js';
+  import { useTooltip } from '../shared/use-tooltip.js';
 
   const emit = createEmitter(createEventDispatcher, $$props);
 

package/components/gauge.svelte

@@ -1,6 +1,6 @@
 <script>
-  import { classNames } from '../shared/utils';
-  import { restProps } from '../shared/rest-props';
+  import { classNames } from '../shared/utils.js';
+  import { restProps } from '../shared/rest-props.js';
 
   let className = undefined;
   export { className as class };
@@ -34,14 +34,16 @@
     class="gauge-svg"
     width={`${size}px`}
     height={`${semiCircle ? size / 2 : size}px`}
-    viewBox={`0 0 ${size} ${semiCircle ? size / 2 : size}`}>
+    viewBox={`0 0 ${size} ${semiCircle ? size / 2 : size}`}
+  >
     {#if semiCircle}
       <path
         class="gauge-back-semi"
         d={`M${size - borderWidth / 2},${size / 2} a1,1 0 0,0 -${size - borderWidth},0`}
         stroke={borderBgColor}
         stroke-width={borderWidth}
-        fill={bgColor || 'none'} />
+        fill={bgColor || 'none'}
+      />
       <path
         class="gauge-front-semi"
         d={`M${size - borderWidth / 2},${size / 2} a1,1 0 0,0 -${size - borderWidth},0`}
@@ -49,7 +51,8 @@
         stroke-width={borderWidth}
         stroke-dasharray={length / 2}
         stroke-dashoffset={(length / 2) * (1 + progress)}
-        fill={borderBgColor ? 'none' : bgColor || 'none'} />
+        fill={borderBgColor ? 'none' : bgColor || 'none'}
+      />
     {/if}
     {#if !semiCircle}
       {#if borderBgColor}
@@ -60,7 +63,8 @@
           fill={bgColor || 'none'}
           cx={size / 2}
           cy={size / 2}
-          r={radius} />
+          r={radius}
+        />
       {/if}
       <circle
         class="gauge-front-circle"
@@ -72,7 +76,8 @@
         fill={borderBgColor ? 'none' : bgColor || 'none'}
         cx={size / 2}
         cy={size / 2}
-        r={radius} />
+        r={radius}
+      />
     {/if}
     {#if valueText}
       <text
@@ -84,7 +89,8 @@
         fill={valueTextColor}
         dy={semiCircle ? (labelText ? -labelFontSize - 15 : -5) : 0}
         text-anchor="middle"
-        dominant-baseline={!semiCircle ? 'middle' : null}>
+        dominant-baseline={!semiCircle ? 'middle' : null}
+      >
         {valueText}
       </text>
     {/if}
@@ -98,7 +104,8 @@
         fill={labelTextColor}
         dy={semiCircle ? -5 : valueText ? valueFontSize / 2 + 10 : 0}
         text-anchor="middle"
-        dominant-baseline={!semiCircle ? 'middle' : null}>
+        dominant-baseline={!semiCircle ? 'middle' : null}
+      >
         {labelText}
       </text>
     {/if}