Skip to content

Commit 45def5f

Browse files
nolimits4webnolimits4web
committed
feat(svelte): More components updated to v5
1 parent 80dd2e4 commit 45def5f

75 files changed

Lines changed: 3511 additions & 3200 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.eslintrc.js‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ module.exports = {
6464
ecmaFeatures: {
6565
jsx: true,
6666
},
67-
ecmaVersion: 2019,
67+
ecmaVersion: 2020,
6868
sourceType: 'module',
6969
},
7070
rules: {
@@ -147,6 +147,21 @@ module.exports = {
147147
'vue/no-deprecated-slot-attribute': 'off',
148148
},
149149
},
150+
// SVELTE
151+
{
152+
files: ['src/svelte/**/*.js'],
153+
extends: ['airbnb-base', 'plugin:prettier/recommended'],
154+
parserOptions: {
155+
ecmaVersion: 2020,
156+
sourceType: 'module',
157+
},
158+
rules: {
159+
...rules,
160+
'import/no-unresolved': ['off'],
161+
'import/no-extraneous-dependencies': ['off'],
162+
'import/extensions': ['off'],
163+
},
164+
},
150165
// SVELTE KITCHEN_SINK
151166
{
152167
files: ['kitchen-sink/svelte/src/**/*.js'],

‎kitchen-sink/svelte/src/pages/action-sheet.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@
1313
ActionsButton,
1414
} from 'framework7-svelte';
1515
16-
let actionsOneGroupOpened = false;
17-
let actionGridOpened = false;
16+
let actionsOneGroupOpened = $state(false);
17+
let actionGridOpened = $state(false);
1818
1919
let actionsToPopover;
2020
let buttonToPopoverWrapper;

‎kitchen-sink/svelte/src/pages/autocomplete.svelte‎

Lines changed: 22 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
let autocompleteStandaloneAjax;
2727
let autocompleteSearchbar;
2828
29-
let searchbar;
29+
let searchbar = $state(null);
3030
3131
function onPageBeforeRemove() {
3232
// Destroy all autocompletes
@@ -45,7 +45,7 @@
4545
searchbar.destroy();
4646
}
4747
function onPageInit() {
48-
const $ = f7.$;
48+
const dom7 = f7.$;
4949
5050
// Simple Dropdown
5151
autocompleteDropdownSimple = f7.autocomplete.create({
@@ -218,9 +218,9 @@
218218
on: {
219219
change(value) {
220220
// Add item text value to item-after
221-
$('#autocomplete-standalone').find('.item-after').text(value[0]);
221+
dom7('#autocomplete-standalone').find('.item-after').text(value[0]);
222222
// Add item value to input value
223-
$('#autocomplete-standalone').find('input').val(value[0]);
223+
dom7('#autocomplete-standalone').find('input').val(value[0]);
224224
},
225225
},
226226
});
@@ -246,9 +246,9 @@
246246
on: {
247247
change(value) {
248248
// Add item text value to item-after
249-
$('#autocomplete-standalone-popup').find('.item-after').text(value[0]);
249+
dom7('#autocomplete-standalone-popup').find('.item-after').text(value[0]);
250250
// Add item value to input value
251-
$('#autocomplete-standalone-popup').find('input').val(value[0]);
251+
dom7('#autocomplete-standalone-popup').find('input').val(value[0]);
252252
},
253253
},
254254
});
@@ -274,9 +274,9 @@
274274
on: {
275275
change(value) {
276276
// Add item text value to item-after
277-
$('#autocomplete-standalone-multiple').find('.item-after').text(value.join(', '));
277+
dom7('#autocomplete-standalone-multiple').find('.item-after').text(value.join(', '));
278278
// Add item value to input value
279-
$('#autocomplete-standalone-multiple').find('input').val(value.join(', '));
279+
dom7('#autocomplete-standalone-multiple').find('input').val(value.join(', '));
280280
},
281281
},
282282
});
@@ -323,9 +323,9 @@
323323
inputValue.push(value[i].id);
324324
}
325325
// Add item text value to item-after
326-
$('#autocomplete-standalone-ajax').find('.item-after').text(itemText.join(', '));
326+
dom7('#autocomplete-standalone-ajax').find('.item-after').text(itemText.join(', '));
327327
// Add item value to input value
328-
$('#autocomplete-standalone-ajax').find('input').val(inputValue.join(', '));
328+
dom7('#autocomplete-standalone-ajax').find('input').val(inputValue.join(', '));
329329
},
330330
},
331331
});
@@ -376,16 +376,16 @@
376376
</p>
377377
</Block>
378378
<List strongIos outlineIos>
379-
<div class="block-header" slot="before-list">Simple Dropdown Autocomplete</div>
379+
{#snippet beforeList()}<div class="block-header">Simple Dropdown Autocomplete</div>{/snippet}
380380
<ListInput label="Fruit" type="text" placeholder="Fruit" inputId="autocomplete-dropdown" />
381381
</List>
382382

383383
<List strongIos outlineIos>
384-
<div class="block-header" slot="before-list">Dropdown With All Values</div>
384+
{#snippet beforeList()}<div class="block-header">Dropdown With All Values</div>{/snippet}
385385
<ListInput label="Fruit" type="text" placeholder="Fruit" inputId="autocomplete-dropdown-all" />
386386
</List>
387387
<List strongIos outlineIos>
388-
<div class="block-header" slot="before-list">Dropdown With Placeholder</div>
388+
{#snippet beforeList()}<div class="block-header">Dropdown With Placeholder</div>{/snippet}
389389
<ListInput
390390
label="Fruit"
391391
type="text"
@@ -394,7 +394,7 @@
394394
/>
395395
</List>
396396
<List strongIos outlineIos>
397-
<div class="block-header" slot="before-list">Dropdown With Typeahead</div>
397+
{#snippet beforeList()}<div class="block-header">Dropdown With Typeahead</div>{/snippet}
398398
<ListInput
399399
label="Fruit"
400400
type="text"
@@ -403,7 +403,7 @@
403403
/>
404404
</List>
405405
<List strongIos outlineIos>
406-
<div class="block-header" slot="before-list">Dropdown With Ajax-Data</div>
406+
{#snippet beforeList()}<div class="block-header">Dropdown With Ajax-Data</div>{/snippet}
407407
<ListInput
408408
label="Language"
409409
type="text"
@@ -412,7 +412,9 @@
412412
/>
413413
</List>
414414
<List strongIos outlineIos>
415-
<div class="block-header" slot="before-list">Dropdown With Ajax-Data + Typeahead</div>
415+
{#snippet beforeList()}<div class="block-header">
416+
Dropdown With Ajax-Data + Typeahead
417+
</div>{/snippet}
416418
<ListInput
417419
label="Language"
418420
type="text"
@@ -428,25 +430,25 @@
428430
</p>
429431
</Block>
430432
<List strong outlineIos>
431-
<div class="block-header" slot="before-list">Simple Standalone Autocomplete</div>
433+
{#snippet beforeList()}<div class="block-header">Simple Standalone Autocomplete</div>{/snippet}
432434
<ListItem link="#" id="autocomplete-standalone" title="Favorite Fruite" after=" ">
433435
<input type="hidden" />
434436
</ListItem>
435437
</List>
436438
<List strong outlineIos>
437-
<div class="block-header" slot="before-list">Popup Autocomplete</div>
439+
{#snippet beforeList()}<div class="block-header">Popup Autocomplete</div>{/snippet}
438440
<ListItem link="#" id="autocomplete-standalone-popup" title="Favorite Fruite" after=" ">
439441
<input type="hidden" />
440442
</ListItem>
441443
</List>
442444
<List strong outlineIos>
443-
<div class="block-header" slot="before-list">Multiple Values</div>
445+
{#snippet beforeList()}<div class="block-header">Multiple Values</div>{/snippet}
444446
<ListItem link="#" id="autocomplete-standalone-multiple" title="Favorite Fruite" after=" ">
445447
<input type="hidden" />
446448
</ListItem>
447449
</List>
448450
<List strong outlineIos>
449-
<div class="block-header" slot="before-list">With Ajax-Data</div>
451+
{#snippet beforeList()}<div class="block-header">With Ajax-Data</div>{/snippet}
450452
<ListItem link="#" id="autocomplete-standalone-ajax" title="Language" after=" ">
451453
<input type="hidden" />
452454
</ListItem>

‎kitchen-sink/svelte/src/pages/gauge.svelte‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script>
22
import { Navbar, Page, BlockTitle, Block, Segmented, Button, Gauge } from 'framework7-svelte';
33
4-
let gaugeValue = 0.5;
4+
let gaugeValue = $state(0.5);
55
</script>
66

77
<Page>
@@ -24,11 +24,11 @@
2424
labelText="amount of something"
2525
/>
2626
<Segmented tag="p" raised>
27-
<Button active={gaugeValue === 0} onClick={() => (gaugeValue = 0)}>0%</Button>
28-
<Button active={gaugeValue === 0.25} onClick={() => (gaugeValue = 0.25)}>25%</Button>
29-
<Button active={gaugeValue === 0.5} onClick={() => (gaugeValue = 0.5)}>50%</Button>
30-
<Button active={gaugeValue === 0.75} onClick={() => (gaugeValue = 0.75)}>75%</Button>
31-
<Button active={gaugeValue === 1} onClick={() => (gaugeValue = 1)}>100%</Button>
27+
<Button active={gaugeValue === 0} onclick={() => (gaugeValue = 0)}>0%</Button>
28+
<Button active={gaugeValue === 0.25} onclick={() => (gaugeValue = 0.25)}>25%</Button>
29+
<Button active={gaugeValue === 0.5} onclick={() => (gaugeValue = 0.5)}>50%</Button>
30+
<Button active={gaugeValue === 0.75} onclick={() => (gaugeValue = 0.75)}>75%</Button>
31+
<Button active={gaugeValue === 1} onclick={() => (gaugeValue = 1)}>100%</Button>
3232
</Segmented>
3333
</Block>
3434

0 commit comments

Comments
 (0)