fix: tags.

This commit is contained in:
Darshan
2026-01-30 14:50:39 +05:30
parent 8a8c2b0779
commit bb4c667b36
5 changed files with 39 additions and 32 deletions
+2 -2
View File
@@ -24,9 +24,9 @@
"@ai-sdk/svelte": "^1.1.24",
"@appwrite.io/console": "https://pkg.vc/-/@appwrite/@appwrite.io/console@ab459aa",
"@appwrite.io/pink-icons": "0.25.0",
"@appwrite.io/pink-icons-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@f5ea3d0",
"@appwrite.io/pink-icons-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@50c5f13",
"@appwrite.io/pink-legacy": "^1.0.3",
"@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@f5ea3d0",
"@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@50c5f13",
"@codemirror/autocomplete": "^6.19.0",
"@codemirror/commands": "^6.9.0",
"@codemirror/lang-javascript": "^6.2.4",
+10 -10
View File
@@ -18,14 +18,14 @@ importers:
specifier: 0.25.0
version: 0.25.0
'@appwrite.io/pink-icons-svelte':
specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@f5ea3d0
version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@f5ea3d0(svelte@5.25.3)
specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@50c5f13
version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@50c5f13(svelte@5.25.3)
'@appwrite.io/pink-legacy':
specifier: ^1.0.3
version: 1.0.3
'@appwrite.io/pink-svelte':
specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@f5ea3d0
version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@f5ea3d0(svelte@5.25.3)
specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@50c5f13
version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@50c5f13(svelte@5.25.3)
'@codemirror/autocomplete':
specifier: ^6.19.0
version: 6.19.0
@@ -320,8 +320,8 @@ packages:
peerDependencies:
svelte: ^4.0.0
'@appwrite.io/pink-icons-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@f5ea3d0':
resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@f5ea3d0}
'@appwrite.io/pink-icons-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@50c5f13':
resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@50c5f13}
version: 2.0.0-RC.1
peerDependencies:
svelte: ^4.0.0
@@ -335,8 +335,8 @@ packages:
'@appwrite.io/pink-legacy@1.0.3':
resolution: {integrity: sha512-GGde5fmPhs+s6/3aFeMPc/kKADG/gTFkYQSy6oBN8pK0y0XNCLrZZgBv+EBbdhwdtqVEWXa0X85Mv9w7jcIlwQ==}
'@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@f5ea3d0':
resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@f5ea3d0}
'@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@50c5f13':
resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@50c5f13}
version: 2.0.0-RC.2
peerDependencies:
svelte: ^4.0.0
@@ -3934,7 +3934,7 @@ snapshots:
dependencies:
svelte: 5.25.3
'@appwrite.io/pink-icons-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@f5ea3d0(svelte@5.25.3)':
'@appwrite.io/pink-icons-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@50c5f13(svelte@5.25.3)':
dependencies:
svelte: 5.25.3
@@ -3947,7 +3947,7 @@ snapshots:
'@appwrite.io/pink-icons': 1.0.0
the-new-css-reset: 1.11.3
'@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@f5ea3d0(svelte@5.25.3)':
'@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@50c5f13(svelte@5.25.3)':
dependencies:
'@appwrite.io/pink-icons-svelte': 2.0.0-RC.1(svelte@5.25.3)
'@floating-ui/dom': 1.6.13
+18 -1
View File
@@ -11,6 +11,7 @@
export let helper: string | undefined = undefined;
export let pattern: string | undefined = undefined;
export let leadingIcon: ComponentType | undefined = undefined;
export let max: number | undefined = undefined;
let value = '';
let error: string;
@@ -30,13 +31,29 @@
$: if (value) {
error = null;
}
$: {
// filter out empty or whitespace-only tags
const cleaned = tags.filter((tag) => tag.trim().length > 0);
if (cleaned.length !== tags.length) {
tags = cleaned;
}
}
$: if (max !== undefined && tags.length > max) {
error = `Maximum ${max} fields allowed`;
} else if (max === undefined || tags.length <= max) {
error = null;
}
$: isDisabled = disabled || (max !== undefined && tags.length >= max);
</script>
<Input.Tags
{label}
{id}
{placeholder}
{disabled}
disabled={isDisabled}
{pattern}
{required}
{leadingIcon}
@@ -2,13 +2,11 @@
import { InputTags } from '$lib/elements/forms';
import { symmetricDifference } from '$lib/helpers/array';
import { preferences } from '$lib/stores/preferences';
import { Input, Layout } from '@appwrite.io/pink-svelte';
import { organization } from '$lib/stores/organization';
let {
collectionId,
databaseType,
inModal = false,
onSuccess = null,
onFailure = null
}: {
@@ -59,18 +57,10 @@
});
</script>
<Layout.Stack>
<Layout.Stack gap="s">
{#key names.length}
<InputTags
bind:tags={names}
id="custom-columns-{collectionId}"
placeholder="Enter fields"
label={inModal ? null : 'Fields to display'} />
{/key}
<Input.Helper state="default">
ID, createdAt, and updatedAt are always included and cannot be modified
</Input.Helper>
</Layout.Stack>
</Layout.Stack>
<InputTags
max={5}
bind:tags={names}
id="custom-columns-{collectionId}"
placeholder="Enter fields"
label="Fields to display"
helper="ID, createdAt, and updatedAt are always included and cannot be modified" />
@@ -285,7 +285,6 @@
</svelte:fragment>
<ColumnDisplayNameInput
inModal
bind:this={columnDisplayNameInput}
databaseType={data.database.type}
collectionId={page.params.collection}
@@ -301,7 +300,8 @@
<svelte:fragment slot="footer">
<Button size="s" secondary on:click={() => (showCustomColumnsModal = false)}>Cancel</Button>
<Button size="s" submit disabled={columnDisplayNameInput?.hasChanged()}>Update</Button>
<Button size="s" submit submissionLoader disabled={columnDisplayNameInput?.hasChanged()}
>Update</Button>
</svelte:fragment>
</Modal>