framework7-svelte 8.3.4 → 9.0.0

package/components/list-input.svelte

@@ -1,89 +1,83 @@
 <script>
-  import { createEventDispatcher, onMount, afterUpdate, onDestroy } from 'svelte';
+  import { getContext } from 'svelte';
+  import { onMount, onDestroy } from 'svelte';
   import { colorClasses } from '../shared/mixins.js';
-  import { classNames, extend, plainText, createEmitter } from '../shared/utils.js';
-  import { restProps } from '../shared/rest-props.js';
+  import { classNames, extend } from '../shared/utils.js';
   import { app, f7ready } from '../shared/f7.js';
-  import { getReactiveContext } from '../shared/get-reactive-context.js';
 
   import TextEditor from './text-editor.svelte';
 
-  const emit = createEmitter(createEventDispatcher, $$props);
-
-  let className = undefined;
-  export { className as class };
-
-  export let sortable = undefined;
-  export let sortableOpposite = undefined;
-  export let media = undefined;
-  export let dropdown = 'auto';
-  export let wrap = true;
-
-  // Inputs
-  export let input = true;
-  export let type = 'text';
-  export let name = undefined;
-  export let value = undefined;
-  export let inputmode = undefined;
-  export let readonly = undefined;
-  export let required = undefined;
-  export let disabled = undefined;
-  export let placeholder = undefined;
-  export let inputId = undefined;
-  export let size = undefined;
-  export let accept = undefined;
-  export let autocomplete = undefined;
-  export let autocorrect = undefined;
-  export let autocapitalize = undefined;
-  export let spellcheck = undefined;
-  export let autofocus = undefined;
-  export let autosave = undefined;
-  export let max = undefined;
-  export let min = undefined;
-  export let step = undefined;
-  export let maxlength = undefined;
-  export let minlength = undefined;
-  export let multiple = undefined;
-  export let inputStyle = undefined;
-  export let pattern = undefined;
-  export let validate = undefined;
-  export let validateOnBlur = undefined;
-  export let onValidate = undefined;
-  export let tabindex = undefined;
-  export let resizable = undefined;
-  export let clearButton = undefined;
-
-  // Form
-  export let noFormStoreData = undefined;
-  export let noStoreData = undefined;
-  export let ignoreStoreData = undefined;
-
-  // Error, Info
-  export let errorMessage = undefined;
-  export let errorMessageForce = undefined;
-  export let info = undefined;
-
-  // Outline
-  export let outline = undefined;
-
-  // Label
-  export let label = undefined;
-  export let floatingLabel = undefined;
-
-  // Datepicker
-  export let calendarParams = undefined;
-  // Colorpicker
-  export let colorPickerParams = undefined;
-  // Text editor
-  export let textEditorParams = undefined;
-
-  // State
-  let inputEl;
-  let inputFocused = false;
-  let inputInvalid = false;
-  let updateInputOnDidUpdate = false;
-  let f7Calendar;
-  let f7ColorPicker;
+  let {
+    class: className,
+    sortable = undefined,
+    sortableOpposite = undefined,
+    media = undefined,
+    dropdown = 'auto',
+    wrap = true,
+    input = true,
+    inputContent = undefined,
+    type = 'text',
+    name = undefined,
+    value = undefined,
+    inputmode = undefined,
+    readonly = undefined,
+    required = undefined,
+    disabled = undefined,
+    placeholder = undefined,
+    inputId = undefined,
+    size = undefined,
+    accept = undefined,
+    autocomplete = undefined,
+    autocorrect = undefined,
+    autocapitalize = undefined,
+    spellcheck = undefined,
+    autofocus = undefined,
+    autosave = undefined,
+    max = undefined,
+    min = undefined,
+    step = undefined,
+    maxlength = undefined,
+    minlength = undefined,
+    multiple = undefined,
+    inputStyle = undefined,
+    pattern = undefined,
+    validate = undefined,
+    validateOnBlur = undefined,
+    onValidate = undefined,
+    tabindex = undefined,
+    resizable = undefined,
+    clearButton = undefined,
+    noFormStoreData = undefined,
+    noStoreData = undefined,
+    ignoreStoreData = undefined,
+    errorMessage = undefined,
+    errorMessageForce = undefined,
+    info = undefined,
+    outline = undefined,
+    label = undefined,
+    floatingLabel = undefined,
+    calendarParams = undefined,
+    colorPickerParams = undefined,
+    textEditorParams = undefined,
+    rootStart,
+    contentStart,
+    innerStart,
+    inner,
+    innerEnd,
+    content,
+    contentEnd,
+    root,
+    rootEnd,
+    children,
+    ...restProps
+  } = $props();
+
+  let inputEl = $state(null);
+  let inputFocused = $state(false);
+  let inputInvalid = $state(false);
+  let updateInputOnDidUpdate = $state(false);
+  let f7Calendar = $state(null);
+  let f7ColorPicker = $state(null);
 
   export function calendarInstance() {
     return f7Calendar;
@@ -93,13 +87,18 @@
     return f7ColorPicker;
   }
 
-  let ListContext =
-    getReactiveContext('ListContext', (newValue) => {
-      ListContext = newValue || {};
-    }) || {};
+  const ListContext =
+    getContext('ListContext') ||
+    (() => ({
+      value: {},
+    }));
 
-  $: isSortable = sortable === true || sortable === false ? sortable : ListContext.listIsSortable;
-  $: isSortableOpposite = sortableOpposite || ListContext.listIsSortableOpposite;
+  const isSortable = $derived(
+    sortable === true || sortable === false ? sortable : ListContext().value.listIsSortable,
+  );
+  const isSortableOpposite = $derived(
+    sortableOpposite || ListContext().value.listIsSortableOpposite,
+  );
 
   function domValue() {
     if (!inputEl) return undefined;
@@ -132,7 +131,7 @@
     }
   }
 
-  let initialWatched = false;
+  let initialWatched = $state(false);
   function watchValue() {
     if (!initialWatched) {
       initialWatched = true;
@@ -159,16 +158,15 @@
     extend(f7Calendar.params, calendarParams || {});
   }
 
-  $: watchValue(value);
-  $: watchColorPickerParams(colorPickerParams);
-  $: watchCalendarParams(calendarParams);
+  $effect(() => watchValue(value));
+  $effect(() => watchColorPickerParams(colorPickerParams));
+  $effect(() => watchCalendarParams(calendarParams));
 
-  $: inputType = type === 'datepicker' || type === 'colorpicker' ? 'text' : type;
+  const inputType = $derived(type === 'datepicker' || type === 'colorpicker' ? 'text' : type);
 
-  // eslint-disable-next-line
-  $: needsValue = type !== 'file' && type !== 'datepicker' && type !== 'colorpicker';
+  const needsValue = $derived(type !== 'file' && type !== 'datepicker' && type !== 'colorpicker');
 
-  $: inputValue = (() => {
+  const inputValue = $derived.by(() => {
     let v;
     if (typeof value !== 'undefined') {
       v = value;
@@ -177,66 +175,79 @@
     }
     if (typeof v === 'undefined' || v === null) return '';
     return v;
-  })();
-
-  $: hasInfoSlots = $$slots.info;
-  $: hasErrorSlots = $$slots['error-message'];
-  $: hasMediaSlots = $$slots.media;
-  $: hasLabelSlots = $$slots.label;
-
-  $: hasErrorMessage = !!errorMessage || hasErrorSlots;
-
-  $: inputClasses = classNames({
-    resizable: inputType === 'textarea' && resizable,
-    'no-store-data': noFormStoreData || noStoreData || ignoreStoreData,
-    'input-invalid': (errorMessage && errorMessageForce) || inputInvalid,
-    'input-with-value': inputHasValue(),
-    'input-focused': inputFocused,
   });
 
-  $: itemContentClasses = classNames(
-    'item-content item-input',
-    !wrap && className,
-    !wrap && { disabled },
-    !wrap && colorClasses($$props),
-    {
-      'item-input-outline': outline,
-      'item-input-focused': inputFocused,
-      'item-input-with-info': !!info || hasInfoSlots,
-      'item-input-with-value': inputHasValue(),
-      'item-input-with-error-message': (hasErrorMessage && errorMessageForce) || inputInvalid,
-      'item-input-invalid': (hasErrorMessage && errorMessageForce) || inputInvalid,
-    },
+  const hasInfoSlots = $derived(info);
+  const hasErrorSlots = $derived(errorMessage);
+  const hasMediaSlots = $derived(media);
+  const hasLabelSlots = $derived(label);
+
+  const hasErrorMessage = $derived(!!errorMessage || hasErrorSlots);
+
+  const inputClasses = $derived(
+    classNames({
+      resizable: inputType === 'textarea' && resizable,
+      'no-store-data': noFormStoreData || noStoreData || ignoreStoreData,
+      'input-invalid': (errorMessage && errorMessageForce) || inputInvalid,
+      'input-with-value': inputHasValue(),
+      'input-focused': inputFocused,
+    }),
   );
 
-  $: labelClasses = classNames('item-title item-label', {
-    'item-floating-label': floatingLabel,
-  });
+  const itemContentClasses = $derived(
+    classNames(
+      'item-content item-input',
+      !wrap && className,
+      !wrap && { disabled },
+      !wrap && colorClasses(restProps),
+      {
+        'item-input-outline': outline,
+        'item-input-focused': inputFocused,
+        'item-input-with-info': !!info || hasInfoSlots,
+        'item-input-with-value': inputHasValue(),
+        'item-input-with-error-message': (hasErrorMessage && errorMessageForce) || inputInvalid,
+        'item-input-invalid': (hasErrorMessage && errorMessageForce) || inputInvalid,
+      },
+    ),
+  );
 
-  $: inputWrapClasses = classNames('item-input-wrap', {
-    'input-dropdown': dropdown === 'auto' ? type === 'select' : dropdown,
-  });
+  const labelClasses = $derived(
+    classNames('item-title item-label', {
+      'item-floating-label': floatingLabel,
+    }),
+  );
 
-  $: classes = classNames(className, { disabled }, colorClasses($$props));
+  const inputWrapClasses = $derived(
+    classNames('item-input-wrap', {
+      'input-dropdown': dropdown === 'auto' ? type === 'select' : dropdown,
+    }),
+  );
+
+  const classes = $derived(classNames(className, { disabled }, colorClasses(restProps)));
 
   function onTextareaResize(event) {
-    emit('textareaResize', [event]);
+    restProps.onTextareaResize?.(event);
+    restProps.ontextareaResize?.(event);
   }
 
   function onInputNotEmpty(event) {
-    emit('inputNotEmpty', [event]);
+    restProps.onInputNotEmpty?.(event);
+    restProps.oninputNotEmpty?.(event);
   }
 
   function onInputEmpty(event) {
-    emit('inputEmpty', [event]);
+    restProps.onInputEmpty?.(event);
+    restProps.oninputEmpty?.(event);
   }
 
   function onInputClear(event) {
-    emit('inputClear', [event]);
+    restProps.onInputClear?.(event);
+    restProps.oninputClear?.(event);
   }
 
   function onInput(...args) {
-    emit('input', [...args]);
+    restProps.onInput?.(...args);
+    restProps.oninput?.(...args);
 
     if (!(validateOnBlur || validateOnBlur === '') && (validate || validate === '') && inputEl) {
       validateInput(inputEl);
@@ -247,13 +258,15 @@
   }
 
   function onFocus(...args) {
-    emit('focus', [...args]);
+    restProps.onFocus?.(...args);
+    restProps.onfocus?.(...args);
 
     inputFocused = true;
   }
 
   function onBlur(...args) {
-    emit('blur', [...args]);
+    restProps.onBlur?.(...args);
+    restProps.onblur?.(...args);
 
     if ((validate || validate === '' || validateOnBlur || validateOnBlur === '') && inputEl) {
       validateInput();
@@ -262,10 +275,12 @@
   }
 
   function onChange(...args) {
-    emit('change', [...args]);
+    restProps.onChange?.(...args);
+    restProps.onchange?.(...args);
 
     if (type === 'texteditor') {
-      emit('textEditorChange', [args[0]]);
+      restProps.onTextEditorChange?.(args[0]);
+      restProps.ontextEditorChange?.(args[0]);
       value = args[0];
     }
   }
@@ -290,7 +305,8 @@
           value,
           on: {
             change(calendar, calendarValue) {
-              emit('calendarChange', [calendarValue]);
+              restProps.onCalendarChange?.(calendarValue);
+              restProps.oncalendarChange?.(calendarValue);
               value = calendarValue;
             },
           },
@@ -303,7 +319,11 @@
           value,
           on: {
             change(colorPicker, colorPickerValue) {
-              emit('colorPickerChange', [colorPickerValue]);
+              if (JSON.stringify(value) === JSON.stringify(colorPickerValue)) {
+                return;
+              }
+              restProps.onColorPickerChange?.(colorPickerValue);
+              restProps.oncolorPickerChange?.(colorPickerValue);
               value = colorPickerValue;
             },
           },
@@ -329,7 +349,7 @@
     });
   });
 
-  afterUpdate(() => {
+  $effect(() => {
     if (!app.f7) return;
     if (updateInputOnDidUpdate) {
       if (!inputEl) return;
@@ -370,30 +390,36 @@
 <!-- svelte-ignore a11y-autofocus -->
 <!-- svelte-ignore a11y-missing-attribute -->
 {#if wrap}
-  <li class={classes} {...restProps($$restProps)}>
-    <slot name="root-start" />
+  <li class={classes} {...restProps}>
+    {@render rootStart?.()}
     <div class={itemContentClasses}>
-      <slot name="content-start" />
+      {@render contentStart?.()}
       {#if isSortable && isSortableOpposite}
         <div class="sortable-handler" />
       {/if}
 
       {#if media || hasMediaSlots}
         <div class="item-media">
-          {#if typeof media !== 'undefined'}<img src={media} />{/if}
-          <slot name="media" />
+          {#if typeof media === 'function'}
+            {@render media?.()}
+          {:else if typeof media === 'string'}
+            <img src={media} />
+          {/if}
         </div>
       {/if}
       <div class="item-inner">
-        <slot name="inner-start" />
+        {@render innerStart?.()}
         {#if typeof label !== 'undefined' || hasLabelSlots}
           <div class={labelClasses}>
-            {plainText(label)}
-            <slot name="label" />
+            {#if typeof label === 'function'}
+              {@render label?.()}
+            {:else}
+              {label}
+            {/if}
           </div>
         {/if}
         <div class={inputWrapClasses}>
-          {#if input}
+          {#if input === true}
             {#if type === 'select'}
               <select
                 bind:this={inputEl}
@@ -432,13 +458,13 @@
                 {tabindex}
                 data-error-message={errorMessageForce ? undefined : errorMessage}
                 class={inputClasses}
-                on:focus={onFocus}
-                on:blur={onBlur}
-                on:input={onInput}
-                on:change={onChange}
+                onfocus={onFocus}
+                onblur={onBlur}
+                oninput={onInput}
+                onchange={onChange}
                 value={inputValue}
               >
-                <slot />
+                {@render children?.()}
               </select>
             {:else if type === 'textarea'}
               <textarea
@@ -479,10 +505,10 @@
                 {tabindex}
                 data-error-message={errorMessageForce ? undefined : errorMessage}
                 class={inputClasses}
-                on:focus={onFocus}
-                on:blur={onBlur}
-                on:input={onInput}
-                on:change={onChange}
+                onfocus={onFocus}
+                onblur={onBlur}
+                oninput={onInput}
+                onchange={onChange}
                 value={inputValue}
               />
             {:else if type === 'texteditor'}
@@ -536,66 +562,81 @@
                 tabIndex={tabindex}
                 data-error-message={errorMessageForce ? undefined : errorMessage}
                 class={inputClasses}
-                on:focus={onFocus}
-                on:blur={onBlur}
-                on:input={onInput}
-                on:change={onChange}
+                onfocus={onFocus}
+                onblur={onBlur}
+                oninput={onInput}
+                onchange={onChange}
                 value={type === 'datepicker' || type === 'colorpicker' || type === 'file'
                   ? ''
                   : inputValue}
               />
             {/if}
           {/if}
-          <slot name="input" />
+          {#if typeof inputContent === 'function'}
+            {@render inputContent?.()}
+          {/if}
+
           {#if hasErrorMessage && errorMessageForce}
             <div class="item-input-error-message">
-              {plainText(errorMessage)}
-              <slot name="error-message" />
+              {#if typeof errorMessage === 'function'}
+                {@render errorMessage?.()}
+              {:else}
+                {errorMessage}
+              {/if}
             </div>
           {/if}
           {#if clearButton}<span class="input-clear-button" />{/if}
           {#if typeof info !== 'undefined' || hasInfoSlots}
             <div class="item-input-info">
-              {plainText(info)}
-              <slot name="info" />
+              {#if typeof info === 'function'}
+                {@render info?.()}
+              {:else}
+                {info}
+              {/if}
             </div>
           {/if}
         </div>
-        <slot name="inner" />
-        <slot name="inner-end" />
+        {@render inner?.()}
+        {@render innerEnd?.()}
       </div>
-      <slot name="content" />
-      <slot name="content-end" />
+      {@render content?.()}
+      {@render contentEnd?.()}
     </div>
     {#if isSortable && !isSortableOpposite}
       <div class="sortable-handler" />
     {/if}
-    <slot name="root" />
-    <slot name="root-end" />
+    {@render root?.()}
+    {@render rootEnd?.()}
   </li>
 {:else}
-  <div class={itemContentClasses} {...restProps($$restProps)}>
-    <slot name="content-start" />
+  <div class={itemContentClasses} {...restProps}>
+    {@render contentStart?.()}
     {#if isSortable && isSortableOpposite}
       <div class="sortable-handler" />
     {/if}
 
     {#if media || hasMediaSlots}
       <div class="item-media">
-        {#if typeof media !== 'undefined'}<img src={media} />{/if}
-        <slot name="media" />
+        {#if typeof media === 'function'}
+          {@render media?.()}
+        {:else if typeof media === 'string'}
+          <img src={media} />
+        {/if}
       </div>
     {/if}
     <div class="item-inner">
-      <slot name="inner-start" />
+      {@render innerStart?.()}
       {#if typeof label !== 'undefined' || hasLabelSlots}
         <div class={labelClasses}>
-          {plainText(label)}
-          <slot name="label" />
+          {#if typeof label === 'function'}
+            {@render label?.()}
+          {:else}
+            {label}
+          {/if}
         </div>
       {/if}
       <div class={inputWrapClasses}>
-        {#if input}
+        {#if input === true}
           {#if type === 'select'}
             <select
               bind:this={inputEl}
@@ -634,13 +675,13 @@
               {tabindex}
               data-error-message={errorMessageForce ? undefined : errorMessage}
               class={inputClasses}
-              on:focus={onFocus}
-              on:blur={onBlur}
-              on:input={onInput}
-              on:change={onChange}
+              onfocus={onFocus}
+              onblur={onBlur}
+              oninput={onInput}
+              onchange={onChange}
               value={inputValue}
             >
-              <slot />
+              {@render children?.()}
             </select>
           {:else if type === 'textarea'}
             <textarea
@@ -681,10 +722,10 @@
               {tabindex}
               data-error-message={errorMessageForce ? undefined : errorMessage}
               class={inputClasses}
-              on:focus={onFocus}
-              on:blur={onBlur}
-              on:input={onInput}
-              on:change={onChange}
+              onfocus={onFocus}
+              onblur={onBlur}
+              oninput={onInput}
+              onchange={onChange}
               value={inputValue}
             />
           {:else if type === 'texteditor'}
@@ -738,35 +779,43 @@
               tabIndex={tabindex}
               data-error-message={errorMessageForce ? undefined : errorMessage}
               class={inputClasses}
-              on:focus={onFocus}
-              on:blur={onBlur}
-              on:input={onInput}
-              on:change={onChange}
+              onfocus={onFocus}
+              onblur={onBlur}
+              oninput={onInput}
+              onchange={onChange}
               value={type === 'datepicker' || type === 'colorpicker' || type === 'file'
                 ? ''
                 : inputValue}
             />
           {/if}
         {/if}
-        <slot name="input" />
+        {#if typeof inputContent === 'function'}
+          {@render inputContent?.()}
+        {/if}
         {#if hasErrorMessage && errorMessageForce}
           <div class="item-input-error-message">
-            {plainText(errorMessage)}
-            <slot name="error-message" />
+            {#if typeof errorMessage === 'function'}
+              {@render errorMessage?.()}
+            {:else}
+              {errorMessage}
+            {/if}
           </div>
         {/if}
-        {#if clearButton}<span class="input-clear-button" />{/if}
+        {#if clearButton}<span class="input-clear-button"></span>{/if}
         {#if typeof info !== 'undefined' || hasInfoSlots}
           <div class="item-input-info">
-            {plainText(info)}
-            <slot name="info" />
+            {#if typeof info === 'function'}
+              {@render info?.()}
+            {:else}
+              {info}
+            {/if}
           </div>
         {/if}
       </div>
-      <slot name="inner" />
-      <slot name="inner-end" />
+      {@render inner?.()}
+      {@render innerEnd?.()}
     </div>
-    <slot name="content" />
-    <slot name="content-end" />
+    {@render content?.()}
+    {@render contentEnd?.()}
   </div>
 {/if}