framework7-svelte 8.3.4 → 9.0.0

package/components/list-index.svelte

@@ -1,33 +1,31 @@
 <script>
-  import { createEventDispatcher, onMount, onDestroy } from 'svelte';
+  import { onMount, onDestroy } from 'svelte';
   import { colorClasses } from '../shared/mixins.js';
-  import { classNames, createEmitter } from '../shared/utils.js';
-  import { restProps } from '../shared/rest-props.js';
+  import { classNames } from '../shared/utils.js';
   import { app, f7ready } from '../shared/f7.js';
 
-  const emit = createEmitter(createEventDispatcher, $$props);
+  let {
+    class: className,
+    init = true,
+    listEl = undefined,
+    indexes = 'auto',
+    scrollList = true,
+    label = false,
+    iosItemHeight = 14,
+    mdItemHeight = 14,
+    f7Slot = 'fixed',
+    children,
+    ...restProps
+  } = $props();
 
-  let className = undefined;
-  export { className as class };
-
-  export let init = true;
-  export let listEl = undefined;
-  export let indexes = 'auto';
-  export let scrollList = true;
-  export let label = false;
-  export let iosItemHeight = 14;
-  export let mdItemHeight = 14;
-
-  export let f7Slot = 'fixed';
-
-  let el;
-  let f7ListIndex;
+  let el = $state(null);
+  let f7ListIndex = $state(null);
 
   export function instance() {
     return f7ListIndex;
   }
 
-  $: classes = classNames(className, 'list-index', colorClasses($$props));
+  const classes = $derived(classNames(className, 'list-index', colorClasses(restProps)));
 
   export function update() {
     if (!f7ListIndex) return;
@@ -50,7 +48,7 @@
     update();
   }
 
-  $: watchIndexes(indexes);
+  $effect(() => watchIndexes(indexes));
 
   onMount(() => {
     if (!init || !el) return;
@@ -65,7 +63,8 @@
         label,
         on: {
           select(index, itemContent, itemIndex) {
-            emit('listIndexSelect', [itemContent, itemIndex]);
+            restProps.onListIndexSelect?.([itemContent, itemIndex]);
+            restProps.onlistindexselect?.([itemContent, itemIndex]);
           },
         },
       });
@@ -77,6 +76,6 @@
   });
 </script>
 
-<div bind:this={el} class={classes} data-f7-slot={f7Slot} {...restProps($$restProps)}>
-  <slot listIndex={f7ListIndex} />
+<div bind:this={el} class={classes} data-f7-slot={f7Slot} {...restProps}>
+  {@render children?.(f7ListIndex)}
 </div>

package/components/list-input.d.ts

@@ -1,60 +1,60 @@
 
-import { SvelteComponent } from 'svelte';
+import { SvelteComponent, Snippet } from 'svelte';
 import { HTMLAttributes } from 'svelte/elements';
 
 import { Calendar, ColorPicker, TextEditor } from 'framework7/types';
 
 
-interface ListInputProps {
-  sortable ?: boolean;
-  media ?: string;
-  dropdown ?: string | boolean;
-  wrap ?: boolean;
-  input ?: boolean;
-  type ?: string;
-  name ?: string;
-  value ?: string | number | Array<any> | Date | Object;
-  defaultValue ?: string | number | Array<any>;
-  inputmode ?: string;
-  readonly ?: boolean;
-  required ?: boolean;
-  disabled ?: boolean;
-  placeholder ?: string;
-  inputId ?: string | number;
-  size ?: string | number;
-  accept ?: string | number;
-  autocomplete ?: string;
-  autocorrect ?: string;
-  autocapitalize ?: string;
-  spellcheck ?: string;
-  autofocus ?: boolean;
-  autosave ?: string;
-  max ?: string | number;
-  min ?: string | number;
-  step ?: string | number;
-  maxlength ?: string | number;
-  minlength ?: string | number;
-  multiple ?: boolean;
+interface Props {
+  sortable?: boolean;
+  media?: string | Snippet;
+  dropdown?: string | boolean;
+  wrap?: boolean;
+  input?: boolean;
+  type?: string;
+  name?: string;
+  value?: string | number | Array<any> | Date | Object;
+  defaultValue?: string | number | Array<any>;
+  inputmode?: string;
+  readonly?: boolean;
+  required?: boolean;
+  disabled?: boolean;
+  placeholder?: string;
+  inputId?: string | number;
+  size?: string | number;
+  accept?: string | number;
+  autocomplete?: string;
+  autocorrect?: string;
+  autocapitalize?: string;
+  spellcheck?: string;
+  autofocus?: boolean;
+  autosave?: string;
+  max?: string | number;
+  min?: string | number;
+  step?: string | number;
+  maxlength?: string | number;
+  minlength?: string | number;
+  multiple?: boolean;
   inputStyle?: string;
-  pattern ?: string;
-  validate ?: boolean | string;
-  validateOnBlur ?: boolean;
-  onValidate ?: Function;
-  tabindex ?: string | number;
-  resizable ?: boolean;
-  clearButton ?: boolean;
-  noFormStoreData ?: boolean;
-  noStoreData ?: boolean;
-  ignoreStoreData ?: boolean;
-  errorMessage ?: string;
-  errorMessageForce ?: boolean;
-  info ?: string;
-  outline ?: boolean;
-  label ?: string | number;
-  floatingLabel ?: boolean;
-  calendarParams ?: Calendar.Parameters;
-  colorPickerParams ?: ColorPicker.Parameters;
-  textEditorParams ?: TextEditor.Parameters;
+  pattern?: string;
+  validate?: boolean | string;
+  validateOnBlur?: boolean;
+  onValidate?: Function;
+  tabindex?: string | number;
+  resizable?: boolean;
+  clearButton?: boolean;
+  noFormStoreData?: boolean;
+  noStoreData?: boolean;
+  ignoreStoreData?: boolean;
+  errorMessage?: string | Snippet;
+  errorMessageForce?: boolean;
+  info?: string | Snippet;
+  outline?: boolean;
+  label?: string | number | Snippet;
+  floatingLabel?: boolean;
+  calendarParams?: Calendar.Parameters;
+  colorPickerParams?: ColorPicker.Parameters;
+  textEditorParams?: TextEditor.Parameters;
   color?: string;
   colorTheme?: string;
   textColor?: string;
@@ -62,25 +62,52 @@ interface ListInputProps {
   borderColor?: string;
   rippleColor?: string;
   dark?: boolean;
-  onCalendarChange ?: (calendarValue?: any) => void;
-  onColorPickerChange ?: (colorPickerValue?: any) => void;
-  onTextareaResize ?: (event?: any) => void;
-  onInputNotEmpty ?: (event?: any) => void;
-  onInputEmpty ?: (event?: any) => void;
-  onInputClear ?: (event?: any) => void;
-  onInput ?: (...args: any[]) => void;
-  onFocus ?: (...args: any[]) => void;
-  onBlur ?: (...args: any[]) => void;
-  onChange ?: (...args: any[]) => void;
-  onTextEditorChange ?: (...args: any[]) => void;
+  onCalendarChange?: (calendarValue?: any) => void;
+  onColorPickerChange?: (colorPickerValue?: any) => void;
+  onTextareaResize?: (event?: any) => void;
+  onInputNotEmpty?: (event?: any) => void;
+  onInputEmpty?: (event?: any) => void;
+  onInputClear?: (event?: any) => void;
+  onInput?: (...args: any[]) => void;
+  onFocus?: (...args: any[]) => void;
+  onBlur?: (...args: any[]) => void;
+  onChange?: (...args: any[]) => void;
+  onTextEditorChange?: (...args: any[]) => void;
+  rootStart?: Snippet;
+  contentStart?: Snippet;
+  innerStart?: Snippet;
+  children?: Snippet;
+  inputContent?: Snippet;
+  inner?: Snippet;
+  innerEnd?: Snippet;
+  content?: Snippet;
+  contentEnd?: Snippet;
+  root?: Snippet;
+  rootEnd?: Snippet;
+  ontextareaResize?: () => void;
+  oninputNotEmpty?: () => void;
+  oninputEmpty?: () => void;
+  oninputClear?: () => void;
+  oninput?: () => void;
+  onfocus?: () => void;
+  onblur?: () => void;
+  onchange?: () => void;
+  ontextEditorChange?: () => void;
+  oncalendarChange?: () => void;
+  oncolorPickerChange?: () => void;
 }
 
+interface ListInputProps {}
+interface ListInputProps extends Props {}
+
+interface ListInputEvents extends Record<'',{}>{}
+
 
 
 declare class ListInput extends SvelteComponent<
-  ListInputProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof ListInputProps>,
-  { textareaResize: CustomEvent<void>; inputNotEmpty: CustomEvent<void>; inputEmpty: CustomEvent<void>; inputClear: CustomEvent<void>; input: CustomEvent<void>; focus: CustomEvent<void>; blur: CustomEvent<void>; change: CustomEvent<void>; textEditorChange: CustomEvent<void>; calendarChange: CustomEvent<void>; colorPickerChange: CustomEvent<void>; },
-  {  'root-start' : {};  'content-start' : {};  'media' : {};  'inner-start' : {};  'label' : {};  'default' : {};  'input' : {};  'error-message' : {};  'info' : {};  'inner' : {};  'inner-end' : {};  'content' : {};  'content-end' : {};  'root' : {};  'root-end' : {}; }
+  ListInputProps,
+  ListInputEvents,
+  {  }
 > {}
 
 export { ListInputProps };