feat: docker compose maybe
This commit is contained in:
190
node_modules/@skeletonlabs/skeleton/dist/components/Paginator/Paginator.svelte
generated
vendored
Normal file
190
node_modules/@skeletonlabs/skeleton/dist/components/Paginator/Paginator.svelte
generated
vendored
Normal 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)} <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>
|
68
node_modules/@skeletonlabs/skeleton/dist/components/Paginator/Paginator.svelte.d.ts
generated
vendored
Normal file
68
node_modules/@skeletonlabs/skeleton/dist/components/Paginator/Paginator.svelte.d.ts
generated
vendored
Normal 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 {};
|
4
node_modules/@skeletonlabs/skeleton/dist/components/Paginator/icons.d.ts
generated
vendored
Normal file
4
node_modules/@skeletonlabs/skeleton/dist/components/Paginator/icons.d.ts
generated
vendored
Normal 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>";
|
4
node_modules/@skeletonlabs/skeleton/dist/components/Paginator/icons.js
generated
vendored
Normal file
4
node_modules/@skeletonlabs/skeleton/dist/components/Paginator/icons.js
generated
vendored
Normal 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>`;
|
10
node_modules/@skeletonlabs/skeleton/dist/components/Paginator/types.d.ts
generated
vendored
Normal file
10
node_modules/@skeletonlabs/skeleton/dist/components/Paginator/types.d.ts
generated
vendored
Normal 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[];
|
||||
}
|
2
node_modules/@skeletonlabs/skeleton/dist/components/Paginator/types.js
generated
vendored
Normal file
2
node_modules/@skeletonlabs/skeleton/dist/components/Paginator/types.js
generated
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
// Pagination Types
|
||||
export {};
|
Reference in New Issue
Block a user