feat: docker compose maybe
This commit is contained in:
179
node_modules/@skeletonlabs/skeleton/dist/components/InputChip/InputChip.svelte
generated
vendored
Normal file
179
node_modules/@skeletonlabs/skeleton/dist/components/InputChip/InputChip.svelte
generated
vendored
Normal file
@ -0,0 +1,179 @@
|
||||
<script context="module">import { fly, scale } from "svelte/transition";
|
||||
import { prefersReducedMotionStore } from "../../index.js";
|
||||
import { dynamicTransition } from "../../internal/transitions.js";
|
||||
</script>
|
||||
|
||||
<script
|
||||
|
||||
generics="ListTransitionIn extends Transition = FlyTransition, ListTransitionOut extends Transition = FlyTransition, ChipTransitionIn extends Transition = ScaleTransition, ChipTransitionOut extends Transition = ScaleTransition"
|
||||
>import { createEventDispatcher, onMount } from "svelte";
|
||||
import { flip } from "svelte/animate";
|
||||
const dispatch = createEventDispatcher();
|
||||
export let input = "";
|
||||
export let name;
|
||||
export let value = [];
|
||||
export let whitelist = [];
|
||||
export let max = -1;
|
||||
export let minlength = -1;
|
||||
export let maxlength = -1;
|
||||
export let allowUpperCase = false;
|
||||
export let allowDuplicates = false;
|
||||
export let validation = () => true;
|
||||
export let duration = 150;
|
||||
export let required = false;
|
||||
export let chips = "variant-filled";
|
||||
export let invalid = "input-error";
|
||||
export let padding = "p-2";
|
||||
export let rounded = "rounded-container-token";
|
||||
export let regionChipWrapper = "";
|
||||
export let regionChipList = "";
|
||||
export let regionInput = "";
|
||||
export let transitions = !$prefersReducedMotionStore;
|
||||
export let listTransitionIn = fly;
|
||||
export let listTransitionInParams = { duration: 150, opacity: 0, y: -20 };
|
||||
export let listTransitionOut = fly;
|
||||
export let listTransitionOutParams = { duration: 150, opacity: 0, y: -20 };
|
||||
export let chipTransitionIn = scale;
|
||||
export let chipTransitionInParams = { duration: 150, opacity: 0 };
|
||||
export let chipTransitionOut = scale;
|
||||
export let chipTransitionOutParams = { duration: 150, opacity: 0 };
|
||||
const cBase = "textarea cursor-pointer";
|
||||
const cChipWrapper = "space-y-4";
|
||||
const cChipList = "flex flex-wrap gap-2";
|
||||
const cInputField = "unstyled bg-transparent border-0 !ring-0 p-0 w-full";
|
||||
let inputValid = true;
|
||||
let chipValues = value?.map((val) => {
|
||||
return { val, id: Math.random() };
|
||||
}) || [];
|
||||
function resetFormHandler() {
|
||||
value = [];
|
||||
}
|
||||
let selectElement;
|
||||
onMount(() => {
|
||||
if (!selectElement.form)
|
||||
return;
|
||||
const externalForm = selectElement.form;
|
||||
externalForm.addEventListener("reset", resetFormHandler);
|
||||
return () => {
|
||||
externalForm.removeEventListener("reset", resetFormHandler);
|
||||
};
|
||||
});
|
||||
function onInputHandler() {
|
||||
inputValid = true;
|
||||
}
|
||||
function validate() {
|
||||
if (!input)
|
||||
return false;
|
||||
input = input.trim();
|
||||
if (validation !== void 0 && !validation(input))
|
||||
return false;
|
||||
if (max !== -1 && value.length >= max)
|
||||
return false;
|
||||
if (minlength !== -1 && input.length < minlength)
|
||||
return false;
|
||||
if (maxlength !== -1 && input.length > maxlength)
|
||||
return false;
|
||||
if (whitelist.length > 0 && !whitelist.includes(input))
|
||||
return false;
|
||||
if (allowDuplicates === false && value.includes(input))
|
||||
return false;
|
||||
return true;
|
||||
}
|
||||
function addChip(event) {
|
||||
event.preventDefault();
|
||||
inputValid = validate();
|
||||
if (inputValid === false) {
|
||||
dispatch("invalid", { event, input });
|
||||
return;
|
||||
}
|
||||
input = allowUpperCase ? input : input.toLowerCase();
|
||||
value.push(input);
|
||||
value = value;
|
||||
chipValues.push({ val: input, id: Math.random() });
|
||||
chipValues = chipValues;
|
||||
dispatch("add", { event, chipIndex: value.length - 1, chipValue: input });
|
||||
input = "";
|
||||
}
|
||||
function removeChip(event, chipIndex, chipValue) {
|
||||
if ($$restProps.disabled)
|
||||
return;
|
||||
value.splice(chipIndex, 1);
|
||||
value = value;
|
||||
chipValues.splice(chipIndex, 1);
|
||||
chipValues = chipValues;
|
||||
dispatch("remove", { event, chipIndex, chipValue });
|
||||
}
|
||||
$:
|
||||
classesInvalid = inputValid === false ? invalid : "";
|
||||
$:
|
||||
classesBase = `${cBase} ${padding} ${rounded} ${$$props.class ?? ""} ${classesInvalid}`;
|
||||
$:
|
||||
classesChipWrapper = `${cChipWrapper} ${regionChipWrapper}`;
|
||||
$:
|
||||
classesChipList = `${cChipList} ${regionChipList}`;
|
||||
$:
|
||||
classesInput = `${cInputField} ${regionInput}`;
|
||||
$:
|
||||
chipValues = value?.map((val, i) => {
|
||||
if (chipValues[i]?.val === val)
|
||||
return chipValues[i];
|
||||
return { id: Math.random(), val };
|
||||
}) || [];
|
||||
</script>
|
||||
|
||||
<div class="input-chip {classesBase}" class:opacity-50={$$restProps.disabled}>
|
||||
<!-- NOTE: Don't use `hidden` as it prevents `required` from operating -->
|
||||
<div class="h-0 overflow-hidden">
|
||||
<select bind:this={selectElement} bind:value {name} multiple {required} tabindex="-1">
|
||||
<!-- NOTE: options are required! -->
|
||||
{#each value as option}<option value={option}>{option}</option>{/each}
|
||||
</select>
|
||||
</div>
|
||||
<!-- Chip Wrapper -->
|
||||
<div class="input-chip-wrapper {classesChipWrapper}">
|
||||
<!-- Input Field -->
|
||||
<form on:submit={addChip}>
|
||||
<input
|
||||
type="text"
|
||||
bind:value={input}
|
||||
placeholder={$$restProps.placeholder ?? 'Enter values...'}
|
||||
class="input-chip-field {classesInput}"
|
||||
on:input={onInputHandler}
|
||||
on:input
|
||||
on:focus
|
||||
on:blur
|
||||
disabled={$$restProps.disabled}
|
||||
/>
|
||||
</form>
|
||||
<!-- Chip List -->
|
||||
{#if chipValues.length}
|
||||
<div
|
||||
class="input-chip-list {classesChipList}"
|
||||
in:dynamicTransition|local={{ transition: listTransitionIn, params: listTransitionInParams, enabled: transitions }}
|
||||
out:dynamicTransition|local={{ transition: listTransitionOut, params: listTransitionOutParams, enabled: transitions }}
|
||||
>
|
||||
{#each chipValues as { id, val }, i (id)}
|
||||
<!-- Wrapping div required for FLIP animation -->
|
||||
<div animate:flip={{ duration }}>
|
||||
<button
|
||||
type="button"
|
||||
class="chip {chips}"
|
||||
on:click={(e) => {
|
||||
removeChip(e, i, val);
|
||||
}}
|
||||
on:click
|
||||
on:keypress
|
||||
on:keydown
|
||||
on:keyup
|
||||
in:dynamicTransition|local={{ transition: chipTransitionIn, params: chipTransitionInParams, enabled: transitions }}
|
||||
out:dynamicTransition|local={{ transition: chipTransitionOut, params: chipTransitionOutParams, enabled: transitions }}
|
||||
>
|
||||
<span>{val}</span>
|
||||
<span>✕</span>
|
||||
</button>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
98
node_modules/@skeletonlabs/skeleton/dist/components/InputChip/InputChip.svelte.d.ts
generated
vendored
Normal file
98
node_modules/@skeletonlabs/skeleton/dist/components/InputChip/InputChip.svelte.d.ts
generated
vendored
Normal file
@ -0,0 +1,98 @@
|
||||
import { SvelteComponentTyped } from "svelte";
|
||||
import { fly, scale } from 'svelte/transition';
|
||||
import { type Transition, type TransitionParams } from '../../index.js';
|
||||
type FlyTransition = typeof fly;
|
||||
type ScaleTransition = typeof scale;
|
||||
declare class __sveltets_Render<ListTransitionIn extends Transition = FlyTransition, ListTransitionOut extends Transition = FlyTransition, ChipTransitionIn extends Transition = ScaleTransition, ChipTransitionOut extends Transition = ScaleTransition> {
|
||||
props(): {
|
||||
[x: string]: any;
|
||||
/** Bind the input value.*/
|
||||
input?: string | undefined;
|
||||
/** Set a unique select input name.*/
|
||||
name: string;
|
||||
/** An array of values.*/
|
||||
value?: any[] | undefined;
|
||||
/** Provide a whitelist of accepted values.*/
|
||||
whitelist?: string[] | undefined;
|
||||
/** Maximum number of chips. Set -1 to disable.*/
|
||||
max?: number | undefined;
|
||||
/** Set the minimum character length.*/
|
||||
minlength?: number | undefined;
|
||||
/** Set the maximum character length.*/
|
||||
maxlength?: number | undefined;
|
||||
/** When enabled, allows for uppercase values.*/
|
||||
allowUpperCase?: boolean | undefined;
|
||||
/** When enabled, allows for duplicate values.*/
|
||||
allowDuplicates?: boolean | undefined;
|
||||
/** Provide a custom validator function.*/
|
||||
validation?: ((...args: any[]) => boolean) | undefined;
|
||||
/** The duration of the flip (first, last, invert, play) animation.*/
|
||||
duration?: number | undefined;
|
||||
/** Set the required state for this input field.*/
|
||||
required?: boolean | undefined;
|
||||
/** Provide classes or a variant to style the chips.*/
|
||||
chips?: string | undefined;
|
||||
/** {{ event: Event, input: any }} invalid - Fires when the input value is invalid.*/
|
||||
invalid?: string | undefined;
|
||||
/** Provide classes to set padding styles.*/
|
||||
padding?: string | undefined;
|
||||
/** Provide classes to set border radius styles.*/
|
||||
rounded?: string | undefined;
|
||||
/** Provide arbitrary classes to style the chip wrapper region.*/
|
||||
regionChipWrapper?: string | undefined;
|
||||
/** Provide arbitrary classes to style the chip list region.*/
|
||||
regionChipList?: string | undefined;
|
||||
/** Provide arbitrary classes to style the input field region.*/
|
||||
regionInput?: string | undefined;
|
||||
/** Enable/Disable transitions*/
|
||||
transitions?: boolean | undefined;
|
||||
/** Provide the transition used in list on entry.*/
|
||||
listTransitionIn?: ListTransitionIn | undefined;
|
||||
/** Transition params provided to `ListTransitionIn`.*/
|
||||
listTransitionInParams?: TransitionParams<ListTransitionIn> | undefined;
|
||||
/** Provide the transition used in list on exit.*/
|
||||
listTransitionOut?: ListTransitionOut | undefined;
|
||||
/** Transition params provided to `ListTransitionOut`.*/
|
||||
listTransitionOutParams?: TransitionParams<ListTransitionOut> | undefined;
|
||||
/** Provide the transition used in chip on entry.*/
|
||||
chipTransitionIn?: ChipTransitionIn | undefined;
|
||||
/** Transition params provided to `ChipTransitionIn`.*/
|
||||
chipTransitionInParams?: TransitionParams<ChipTransitionIn> | undefined;
|
||||
/** Provide the transition used in chip on exit.*/
|
||||
chipTransitionOut?: ChipTransitionOut | undefined;
|
||||
/** Transition params provided to `ChipTransitionOut`.*/
|
||||
chipTransitionOutParams?: TransitionParams<ChipTransitionOut> | undefined;
|
||||
};
|
||||
events(): {
|
||||
input: Event;
|
||||
focus: FocusEvent;
|
||||
blur: FocusEvent;
|
||||
click: MouseEvent;
|
||||
keypress: KeyboardEvent;
|
||||
keydown: KeyboardEvent;
|
||||
keyup: KeyboardEvent;
|
||||
add: CustomEvent<{
|
||||
event: SubmitEvent;
|
||||
chipIndex: number;
|
||||
chipValue: string;
|
||||
}>;
|
||||
remove: CustomEvent<{
|
||||
event: MouseEvent;
|
||||
chipIndex: number;
|
||||
chipValue: string;
|
||||
}>;
|
||||
invalid: CustomEvent<{
|
||||
event: SubmitEvent;
|
||||
input: string;
|
||||
}>;
|
||||
} & {
|
||||
[evt: string]: CustomEvent<any>;
|
||||
};
|
||||
slots(): {};
|
||||
}
|
||||
export type InputChipProps<ListTransitionIn extends Transition = FlyTransition, ListTransitionOut extends Transition = FlyTransition, ChipTransitionIn extends Transition = ScaleTransition, ChipTransitionOut extends Transition = ScaleTransition> = ReturnType<__sveltets_Render<ListTransitionIn, ListTransitionOut, ChipTransitionIn, ChipTransitionOut>['props']>;
|
||||
export type InputChipEvents<ListTransitionIn extends Transition = FlyTransition, ListTransitionOut extends Transition = FlyTransition, ChipTransitionIn extends Transition = ScaleTransition, ChipTransitionOut extends Transition = ScaleTransition> = ReturnType<__sveltets_Render<ListTransitionIn, ListTransitionOut, ChipTransitionIn, ChipTransitionOut>['events']>;
|
||||
export type InputChipSlots<ListTransitionIn extends Transition = FlyTransition, ListTransitionOut extends Transition = FlyTransition, ChipTransitionIn extends Transition = ScaleTransition, ChipTransitionOut extends Transition = ScaleTransition> = ReturnType<__sveltets_Render<ListTransitionIn, ListTransitionOut, ChipTransitionIn, ChipTransitionOut>['slots']>;
|
||||
export default class InputChip<ListTransitionIn extends Transition = FlyTransition, ListTransitionOut extends Transition = FlyTransition, ChipTransitionIn extends Transition = ScaleTransition, ChipTransitionOut extends Transition = ScaleTransition> extends SvelteComponentTyped<InputChipProps<ListTransitionIn, ListTransitionOut, ChipTransitionIn, ChipTransitionOut>, InputChipEvents<ListTransitionIn, ListTransitionOut, ChipTransitionIn, ChipTransitionOut>, InputChipSlots<ListTransitionIn, ListTransitionOut, ChipTransitionIn, ChipTransitionOut>> {
|
||||
}
|
||||
export {};
|
||||
Reference in New Issue
Block a user