feat: docker compose maybe

This commit is contained in:
2023-11-13 16:10:04 -05:00
parent 180b261e40
commit b625ccd8d6
8031 changed files with 2182966 additions and 0 deletions

View File

@ -0,0 +1,190 @@
<script>import { createEventDispatcher } from "svelte";
import { leftAngles, leftArrow, rightAngles, rightArrow } from "./icons.js";
const dispatch = createEventDispatcher();
export let settings = { page: 0, limit: 5, size: 0, amounts: [1, 2, 5, 10] };
export let disabled = false;
export let showPreviousNextButtons = true;
export let showFirstLastButtons = false;
export let showNumerals = false;
export let maxNumerals = 1;
export let justify = "justify-between";
export let select = "select min-w-[150px]";
export let amountText = "Items";
export let regionControl = "btn-group";
export let controlVariant = "variant-filled";
export let controlSeparator = "";
export let active = "variant-filled-primary";
export let buttonClasses = "!px-3 !py-1.5 fill-current";
export let buttonTextPrevious = leftArrow;
export let buttonTextNext = rightArrow;
export let buttonTextFirst = leftAngles;
export let buttonTextLast = rightAngles;
export let separatorText = "of";
export let labelFirst = "First page";
export let labelPrevious = "Previous page";
export let labelNext = "Next page";
export let labelLast = "Last page";
const cBase = "flex flex-col md:flex-row items-center space-y-4 md:space-y-0 md:space-x-4";
const cLabel = "w-full md:w-auto";
let lastPage = Math.max(0, Math.ceil(settings.size / settings.limit - 1));
let controlPages = getNumerals();
function onChangeLength() {
dispatch("amount", settings.limit);
lastPage = Math.max(0, Math.ceil(settings.size / settings.limit - 1));
if (settings.page > lastPage) {
settings.page = lastPage;
}
controlPages = getNumerals();
}
function gotoPage(page) {
if (page < 0)
return;
settings.page = page;
dispatch("page", settings.page);
controlPages = getNumerals();
}
function getFullNumerals() {
const pages = [];
for (let index = 0; index <= lastPage; index++) {
pages.push(index);
}
return pages;
}
function getNumerals() {
const pages = [];
const isWithinLeftSection = settings.page < maxNumerals + 2;
const isWithinRightSection = settings.page > lastPage - (maxNumerals + 2);
if (lastPage <= maxNumerals * 2 + 1)
return getFullNumerals();
pages.push(0);
if (!isWithinLeftSection)
pages.push(-1);
if (isWithinLeftSection || isWithinRightSection) {
const sectionStart = isWithinLeftSection ? 1 : lastPage - (maxNumerals + 2);
const sectionEnd = isWithinRightSection ? lastPage - 1 : maxNumerals + 2;
for (let i = sectionStart; i <= sectionEnd; i++) {
pages.push(i);
}
} else {
for (let i = settings.page - maxNumerals; i <= settings.page + maxNumerals; i++) {
pages.push(i);
}
}
if (!isWithinRightSection)
pages.push(-1);
pages.push(lastPage);
return pages;
}
function updateSize(size) {
lastPage = Math.max(0, Math.ceil(size / settings.limit - 1));
controlPages = getNumerals();
}
$:
classesButtonActive = (page) => {
return page === settings.page ? `${active} pointer-events-none` : "";
};
$:
maxNumerals, onChangeLength();
$:
updateSize(settings.size);
$:
classesBase = `${cBase} ${justify} ${$$props.class ?? ""}`;
$:
classesLabel = `${cLabel}`;
$:
classesSelect = `${select}`;
$:
classesControls = `${regionControl} ${controlVariant} ${controlSeparator}`;
</script>
<div class="paginator {classesBase}" data-testid="paginator">
<!-- Select Amount -->
{#if settings.amounts.length}
<label class="paginator-label {classesLabel}">
<select
bind:value={settings.limit}
on:change={onChangeLength}
class="paginator-select {classesSelect}"
{disabled}
aria-label="Select Amount"
>
{#each settings.amounts as amount}<option value={amount}>{amount} {amountText}</option>{/each}
</select>
</label>
{/if}
<!-- Controls -->
<div class="paginator-controls {classesControls}">
<!-- Button: First -->
{#if showFirstLastButtons}
<button
type="button"
aria-label={labelFirst}
class={buttonClasses}
on:click={() => {
gotoPage(0);
}}
disabled={disabled || settings.page === 0}
>
{@html buttonTextFirst}
</button>
{/if}
<!-- Button: Back -->
{#if showPreviousNextButtons}
<button
type="button"
aria-label={labelPrevious}
class={buttonClasses}
on:click={() => {
gotoPage(settings.page - 1);
}}
disabled={disabled || settings.page === 0}
>
{@html buttonTextPrevious}
</button>
{/if}
<!-- Center -->
{#if showNumerals === false}
<!-- Details -->
<button type="button" class="{buttonClasses} pointer-events-none !text-sm">
{settings.page * settings.limit + 1}-{Math.min(settings.page * settings.limit + settings.limit, settings.size)}&nbsp;<span
class="opacity-50">{separatorText} {settings.size}</span
>
</button>
{:else}
<!-- Numeric Row -->
{#each controlPages as page}
<button type="button" class="{buttonClasses} {classesButtonActive(page)}" on:click={() => gotoPage(page)}>
{page >= 0 ? page + 1 : '...'}
</button>
{/each}
{/if}
<!-- Button: Next -->
{#if showPreviousNextButtons}
<button
type="button"
aria-label={labelNext}
class={buttonClasses}
on:click={() => {
gotoPage(settings.page + 1);
}}
disabled={disabled || (settings.page + 1) * settings.limit >= settings.size}
>
{@html buttonTextNext}
</button>
{/if}
<!-- Button: last -->
{#if showFirstLastButtons}
<button
type="button"
aria-label={labelLast}
class={buttonClasses}
on:click={() => {
gotoPage(lastPage);
}}
disabled={disabled || (settings.page + 1) * settings.limit >= settings.size}
>
{@html buttonTextLast}
</button>
{/if}
</div>
</div>

View File

@ -0,0 +1,68 @@
import { SvelteComponentTyped } from "svelte";
import type { PaginationSettings } from './types.js';
declare const __propDef: {
props: {
[x: string]: any;
/** Pass the page setting object.*/
settings?: PaginationSettings | undefined;
/** Sets selection and buttons to disabled state on-demand.*/
disabled?: boolean | undefined;
/** Show Previous and Next buttons.*/
showPreviousNextButtons?: boolean | undefined;
/** Show First and Last buttons.*/
showFirstLastButtons?: boolean | undefined;
/** Displays a numeric row of page buttons.*/
showNumerals?: boolean | undefined;
/** Maximum number of active page siblings in the numeric row.*/
maxNumerals?: number | undefined;
/** Provide classes to set flexbox justification.*/
justify?: string | undefined;
/** Provide classes to style the select input.*/
select?: string | undefined;
/** Set the text for the amount selection input.*/
amountText?: string | undefined;
/** Set the base classes for the control element.*/
regionControl?: string | undefined;
/** Provide variant style for the control button group.*/
controlVariant?: string | undefined;
/** Provide separator style for the control button group.*/
controlSeparator?: string | undefined;
/** Provide arbitrary classes to the active page buttons.*/
active?: string | undefined;
/** * Set the base button classes.*/
buttonClasses?: string | undefined;
/** Set the label for the Previous button.*/
buttonTextPrevious?: string | undefined;
/** Set the label for the Next button.*/
buttonTextNext?: string | undefined;
/** Set the label for the First button.*/
buttonTextFirst?: string | undefined;
/** Set the label for the Last button.*/
buttonTextLast?: string | undefined;
/** Set the label for the pages separator.*/
separatorText?: string | undefined;
/** Provide the ARIA label for the First page button.*/
labelFirst?: string | undefined;
/** Provide the ARIA label for the Previous page button.*/
labelPrevious?: string | undefined;
/** Provide the ARIA label for the Next page button.*/
labelNext?: string | undefined;
/** Provide the ARIA label for the Last page button.*/
labelLast?: string | undefined;
};
events: {
/** {{ length: number }} amount - Fires when the amount selection input changes.*/
amount: CustomEvent<number>;
/** {{ page: number }} page Fires when the next/back buttons are pressed.*/
page: CustomEvent<number>;
} & {
[evt: string]: CustomEvent<any>;
};
slots: {};
};
export type PaginatorProps = typeof __propDef.props;
export type PaginatorEvents = typeof __propDef.events;
export type PaginatorSlots = typeof __propDef.slots;
export default class Paginator extends SvelteComponentTyped<PaginatorProps, PaginatorEvents, PaginatorSlots> {
}
export {};

View File

@ -0,0 +1,4 @@
export declare const leftArrow = "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"1em\" viewBox=\"0 0 448 512\"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d=\"M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z\"/></svg>";
export declare const rightArrow = "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"1em\" viewBox=\"0 0 448 512\"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d=\"M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z\"/></svg>";
export declare const leftAngles = "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"1em\" viewBox=\"0 0 512 512\"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d=\"M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160zm352-160l-160 160c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L301.3 256 438.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0z\"/></svg>";
export declare const rightAngles = "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"1em\" viewBox=\"0 0 512 512\"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d=\"M470.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L402.7 256 265.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160zm-352 160l160-160c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L210.7 256 73.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0z\"/></svg>";

View File

@ -0,0 +1,4 @@
export const leftArrow = `<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"/></svg>`;
export const rightArrow = `<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/></svg>`;
export const leftAngles = `<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160zm352-160l-160 160c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L301.3 256 438.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0z"/></svg>`;
export const rightAngles = `<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M470.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L402.7 256 265.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160zm-352 160l160-160c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L210.7 256 73.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0z"/></svg>`;

View File

@ -0,0 +1,10 @@
export interface PaginationSettings {
/** Index of the current page to display. */
page: number;
/** Current number of items to display. */
limit: number;
/** The total size (length) of your source content. */
size: number;
/** List of amounts available to the select input */
amounts: number[];
}

View File

@ -0,0 +1,2 @@
// Pagination Types
export {};