mirror of
https://github.com/pocketbase/pocketbase.git
synced 2024-11-28 18:11:17 +02:00
added select readonly prop and updated the disabled schema field state
This commit is contained in:
Gani Georgiev
parent
1967dcfeba
commit
bfb38ab51e
@ -11,6 +11,7 @@
|
||||
export let items = [];
|
||||
export let multiple = false;
|
||||
export let disabled = false;
|
||||
export let readonly = false;
|
||||
export let selected = multiple ? [] : undefined;
|
||||
export let toggle = multiple; // toggle option on click
|
||||
export let closable = true; // close the dropdown on option select/deselect
|
||||
@ -177,7 +178,7 @@
|
||||
function onLabelClick(e) {
|
||||
e.stopPropagation();
|
||||
|
||||
!disabled && toggler?.toggle();
|
||||
!readonly && !disabled && toggler?.toggle();
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
@ -195,9 +196,15 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
<div bind:this={container} class="select {classes}" class:multiple class:disabled>
|
||||
<div bind:this={container} class="select {classes}" class:multiple class:disabled class:readonly>
|
||||
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
|
||||
<div bind:this={labelDiv} tabindex={disabled ? "-1" : "0"} class="selected-container" class:disabled>
|
||||
<div
|
||||
bind:this={labelDiv}
|
||||
tabindex={disabled || readonly ? "-1" : "0"}
|
||||
class="selected-container"
|
||||
class:disabled
|
||||
class:readonly
|
||||
>
|
||||
{#each CommonHelper.toArray(selected) as item, i}
|
||||
<div class="option">
|
||||
{#if labelComponent}
|
||||
@ -218,13 +225,13 @@
|
||||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="block txt-placeholder" class:link-hint={!disabled}>
|
||||
<div class="block txt-placeholder" class:link-hint={!disabled && !readonly}>
|
||||
{selectPlaceholder}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
{#if !disabled}
|
||||
{#if !disabled && !readonly}
|
||||
<Toggler
|
||||
bind:this={toggler}
|
||||
class="dropdown dropdown-block options-dropdown dropdown-left"
|
||||
|
||||
@ -120,7 +120,8 @@
|
||||
draggable={true}
|
||||
class="schema-field"
|
||||
class:required={field.required}
|
||||
class:expanded={showOptions}
|
||||
class:expanded={interactive && showOptions}
|
||||
class:deleted={field.toDelete}
|
||||
class:drag-over={isDragOver}
|
||||
transition:slide|local={{ duration: 150 }}
|
||||
on:dragstart={(e) => {
|
||||
|
||||
@ -85,14 +85,14 @@
|
||||
<div class="separator" />
|
||||
|
||||
<Field
|
||||
class="form-field form-field-single-multiple-select {!interactive ? 'disabled' : ''}"
|
||||
class="form-field form-field-single-multiple-select {!interactive ? 'readonly' : ''}"
|
||||
inlineError
|
||||
let:uniqueId
|
||||
>
|
||||
<ObjectSelect
|
||||
id={uniqueId}
|
||||
items={isSingleOptions}
|
||||
disabled={!interactive}
|
||||
readonly={!interactive}
|
||||
bind:keyOfSelected={isSingle}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
@ -116,7 +116,7 @@
|
||||
noOptionsText="No collections found"
|
||||
selectionKey="id"
|
||||
items={$collections}
|
||||
disabled={!interactive || field.id}
|
||||
readonly={!interactive || field.id}
|
||||
bind:keyOfSelected={field.options.collectionId}
|
||||
>
|
||||
<svelte:fragment slot="afterOptions">
|
||||
@ -136,14 +136,14 @@
|
||||
<div class="separator" />
|
||||
|
||||
<Field
|
||||
class="form-field form-field-single-multiple-select {!interactive ? 'disabled' : ''}"
|
||||
class="form-field form-field-single-multiple-select {!interactive ? 'readonly' : ''}"
|
||||
inlineError
|
||||
let:uniqueId
|
||||
>
|
||||
<ObjectSelect
|
||||
id={uniqueId}
|
||||
items={isSingleOptions}
|
||||
disabled={!interactive}
|
||||
readonly={!interactive}
|
||||
bind:keyOfSelected={isSingle}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
@ -55,7 +55,7 @@
|
||||
<div class="separator" />
|
||||
|
||||
<Field
|
||||
class="form-field required {!interactive ? 'disabled' : ''}"
|
||||
class="form-field required {!interactive ? 'readonly' : ''}"
|
||||
inlineError
|
||||
name="schema.{key}.options.values"
|
||||
let:uniqueId
|
||||
@ -65,7 +65,7 @@
|
||||
id={uniqueId}
|
||||
placeholder="Choices: eg. optionA, optionB"
|
||||
required
|
||||
disabled={!interactive}
|
||||
readonly={!interactive}
|
||||
bind:value={field.options.values}
|
||||
/>
|
||||
</div>
|
||||
@ -74,14 +74,14 @@
|
||||
<div class="separator" />
|
||||
|
||||
<Field
|
||||
class="form-field form-field-single-multiple-select {!interactive ? 'disabled' : ''}"
|
||||
class="form-field form-field-single-multiple-select {!interactive ? 'readonly' : ''}"
|
||||
inlineError
|
||||
let:uniqueId
|
||||
>
|
||||
<ObjectSelect
|
||||
id={uniqueId}
|
||||
items={isSingleOptions}
|
||||
disabled={!interactive}
|
||||
readonly={!interactive}
|
||||
bind:keyOfSelected={isSingle}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
@ -955,6 +955,7 @@ select {
|
||||
&:not(.disabled) .selected-container:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
&.readonly,
|
||||
&.disabled {
|
||||
color: var(--txtHintColor);
|
||||
pointer-events: none;
|
||||
@ -978,6 +979,9 @@ select {
|
||||
}
|
||||
}
|
||||
}
|
||||
&.disabled {
|
||||
color: var(--txtDisabledColor);
|
||||
}
|
||||
|
||||
// dropdown
|
||||
.txt-missing {
|
||||
|
||||
@ -30,7 +30,7 @@
|
||||
.separator {
|
||||
width: 1px;
|
||||
height: $minHeight;
|
||||
background: var(--baseAlt2Color);
|
||||
background: rgba(#000, 0.06);
|
||||
}
|
||||
.drag-handle-wrapper {
|
||||
position: absolute;
|
||||
@ -81,7 +81,6 @@
|
||||
@include show();
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.schema-field-options {
|
||||
@ -111,4 +110,17 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
&.deleted {
|
||||
.schema-field-header {
|
||||
background: var(--bodyColor);
|
||||
}
|
||||
.markers,
|
||||
.separator {
|
||||
opacity: 0.5;
|
||||
}
|
||||
%input {
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user