LukeParke/skeleton
1
0
Fork 0
mirror of https://github.com/LukeHagar/skeleton.git synced 2025-12-09 12:47:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat/input-chip-regions (#2089)

Browse Source 
Co-authored-by: endigo9740 <gundamx9740@gmail.com>
This commit is contained in:
Mahmoud Zino
2023-09-29 20:41:37 +02:00
committed by GitHub
parent 51be6c340d
commit f958333735
2 changed files with 20 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/late-cherries-admire.md Normal file
View File

@@ -0,0 +1,5 @@
---
"@skeletonlabs/skeleton": minor
---
breaking: Added missing regions to Input-chip and changed css class `input-chip-interface` to `input-chip-wrapper`.

22
packages/skeleton/src/lib/components/InputChip/InputChip.svelte
View File

@@ -78,6 +78,14 @@
/** Provide classes to set border radius styles. */
export let rounded: CssClasses = 'rounded-container-token';
// Props (regions)
/** Provide arbitrary classes to style the chip wrapper region. */
export let regionChipWrapper: CssClasses = '';
/** Provide arbitrary classes to style the chip list region. */
export let regionChipList: CssClasses = '';
/** Provide arbitrary classes to style the input field region. */
export let regionInput: CssClasses = '';
// Props (transition)
/**
* Enable/Disable transitions
@@ -127,7 +135,7 @@
// Classes
const cBase = 'textarea cursor-pointer';
const cInterface = 'space-y-4';
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';
@@ -220,9 +228,9 @@
$: classesInvalid = inputValid === false ? invalid : '';
// Reactive
$: classesBase = `${cBase} ${padding} ${rounded} ${$$props.class ?? ''} ${classesInvalid}`;
$: classesInterface = `${cInterface}`;
$: classesChipList = `${cChipList}`;
$: classesInputField = `${cInputField}`;
$: classesChipWrapper = `${cChipWrapper} ${regionChipWrapper}`;
$: classesChipList = `${cChipList} ${regionChipList}`;
$: classesInput = `${cInputField} ${regionInput}`;
$: chipValues =
value?.map((val, i) => {
if (chipValues[i]?.val === val) return chipValues[i];
@@ -238,15 +246,15 @@
{#each value as option}<option value={option}>{option}</option>{/each}
</select>
</div>
<!-- Interface -->
<div class="input-chip-interface {classesInterface}">
<!-- 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 {classesInputField}"
class="input-chip-field {classesInput}"
on:input={onInputHandler}
on:input
on:focus