Skip to content

Commit

Permalink
chore: formatting
Browse files Browse the repository at this point in the history
  • Loading branch information
@Ahmedhossamdev @aaronbrethorst
Ahmedhossamdev authored and aaronbrethorst committed Nov 24, 2024
1 parent 0d304cf commit 68ef971
Show file tree
Hide file tree
Showing 4 changed files with 84 additions and 82 deletions.
66 changes: 34 additions & 32 deletions src/components/containers/Accordion.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,35 @@
<script>
import { setContext } from 'svelte';
import { writable, derived } from 'svelte/store';
// Create a store to track the active item
const activeItem = writable(null);
// Create dispatch for activeChanged event
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
// Watch for changes to activeItem and dispatch event
$: {
dispatch('activeChanged', { activeItem: $activeItem });
}
// Provide context for child AccordionItems
setContext('accordion', {
registerItem: (id) => {
const isActive = derived(activeItem, $activeItem => $activeItem === id);
return {
isActive,
activate: () => {
activeItem.set($activeItem === id ? null : id);
}
};
}
});
</script>

<div class="divide-y divide-gray-200 border-y border-gray-200 dark:divide-gray-700 dark:border-gray-700">
<slot />
</div>
import { setContext } from 'svelte';
import { writable, derived } from 'svelte/store';
// Create a store to track the active item
const activeItem = writable(null);
// Create dispatch for activeChanged event
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
// Watch for changes to activeItem and dispatch event
$: {
dispatch('activeChanged', { activeItem: $activeItem });
}
// Provide context for child AccordionItems
setContext('accordion', {
registerItem: (id) => {
const isActive = derived(activeItem, ($activeItem) => $activeItem === id);
return {
isActive,
activate: () => {
activeItem.set($activeItem === id ? null : id);
}
};
}
});
</script>

<div
class="divide-y divide-gray-200 border-y border-gray-200 dark:divide-gray-700 dark:border-gray-700"
>
<slot />
</div>
80 changes: 40 additions & 40 deletions src/components/containers/AccordionItem.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,46 +1,46 @@
<script>
import { getContext } from 'svelte';
import { slide } from 'svelte/transition';
import { getContext } from 'svelte';
import { slide } from 'svelte/transition';
const id = crypto.randomUUID();
const { registerItem } = getContext('accordion');
const { isActive, activate } = registerItem(id);
const id = crypto.randomUUID();
const { registerItem } = getContext('accordion');
const { isActive, activate } = registerItem(id);
function toggle() {
activate();
}
function toggle() {
activate();
}
</script>

<div class="relative">
<!-- Added sticky positioning to the button wrapper -->
<div class="sticky top-0 z-10 bg-white dark:bg-gray-800">
<button
type="button"
class="flex w-full items-center justify-between py-3 text-left text-base font-medium text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
class:text-gray-900={$isActive}
class:dark:text-white={$isActive}
on:click={toggle}
aria-expanded={$isActive}
>
<slot name="header" />
<svg
class="h-6 w-6 shrink-0 transition-transform"
class:rotate-180={$isActive}
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</button>
</div>
{#if $isActive}
<div transition:slide|local>
<div class="py-3">
<slot />
</div>
</div>
{/if}
</div>
<!-- Added sticky positioning to the button wrapper -->
<div class="sticky top-0 z-10 bg-white dark:bg-gray-800">
<button
type="button"
class="flex w-full items-center justify-between py-3 text-left text-base font-medium text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
class:text-gray-900={$isActive}
class:dark:text-white={$isActive}
on:click={toggle}
aria-expanded={$isActive}
>
<slot name="header" />
<svg
class="h-6 w-6 shrink-0 transition-transform"
class:rotate-180={$isActive}
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</button>
</div>

{#if $isActive}
<div transition:slide|local>
<div class="py-3">
<slot />
</div>
</div>
{/if}
</div>
2 changes: 1 addition & 1 deletion src/components/navigation/ModalPane.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
<div class="relative flex-1">
<div class="absolute inset-0 overflow-y-auto">
<slot></slot>
<div class='mb-4'>
<div class="mb-4">
<!-- this empty footer shows a user that the content in the pane hasn't been cut off. -->
&nbsp;
</div>
Expand Down
18 changes: 9 additions & 9 deletions src/components/stops/StopPane.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@
}
function selectionChanged() {
console.log("bonk");
console.log('bonk');
}
</script>
Expand All @@ -114,14 +114,14 @@
<AccordionItem>
<span slot="header">
<ArrivalDeparture
routeShortName={arrival.routeShortName}
tripHeadsign={arrival.tripHeadsign}
scheduledArrivalTime={arrival.scheduledArrivalTime}
predictedArrivalTime={arrival.predictedArrivalTime}
tripId={arrival.tripId}
vehicleId={arrival.vehicleId}
serviceDate={arrival.serviceDate}
on:showTripDetails={handleShowTripDetails}
routeShortName={arrival.routeShortName}
tripHeadsign={arrival.tripHeadsign}
scheduledArrivalTime={arrival.scheduledArrivalTime}
predictedArrivalTime={arrival.predictedArrivalTime}
tripId={arrival.tripId}
vehicleId={arrival.vehicleId}
serviceDate={arrival.serviceDate}
on:showTripDetails={handleShowTripDetails}
/>
</span>
Expand Down

0 comments on commit 68ef971

Please sign in to comment.