Appwrite/console
1
0
Fork 0
mirror of https://github.com/appwrite/console.git synced 2026-06-06 19:27:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

update: components, refactor old ones.

Browse Source
This commit is contained in:
Darshan
2025-02-27 17:10:51 +05:30
parent ee25e03d43
commit 218ebc4601
6 changed files with 47 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+1 -1
View File
@@ -23,7 +23,7 @@
"@appwrite.io/pink-icons": "0.25.0",
"@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@50ea3ca7",
"@appwrite.io/pink-legacy": "^1.0.1",
"@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@50ea3ca7",
"@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@284",
"@popperjs/core": "^2.11.8",
"@sentry/sveltekit": "^8.38.0",
"@stripe/stripe-js": "^3.5.0",
pnpm-lock.yaml
Generated
+12 -12
View File
@@ -21,8 +21,8 @@ importers:
specifier: ^1.0.1
version: 1.0.1
'@appwrite.io/pink-svelte':
specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@50ea3ca7
version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@50ea3ca7(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@284
version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@284(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
'@popperjs/core':
specifier: ^2.11.8
version: 2.11.8
@@ -215,14 +215,14 @@ packages:
resolution: {tarball: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@08ec153}
version: 1.2.1
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@50ea3ca7':
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@50ea3ca7}
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@372a1cfe319fdf7cb8166b5402eb949751155454':
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@372a1cfe319fdf7cb8166b5402eb949751155454}
version: 1.0.0-next.7
peerDependencies:
svelte: ^4.0.0
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@50ea3ca70a483ffd9040f8ce9cb40a8d5f1ee30e':
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@50ea3ca70a483ffd9040f8ce9cb40a8d5f1ee30e}
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@50ea3ca7':
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@50ea3ca7}
version: 1.0.0-next.7
peerDependencies:
svelte: ^4.0.0
@@ -236,8 +236,8 @@ packages:
'@appwrite.io/pink-legacy@1.0.1':
resolution: {integrity: sha512-e5IZx2drqSxgl2WXvmr0eLfg/WiOCzuqQE8oksD+9GoFBkcL9HWvXul5GjFni3RBAN9XFRL3nUExGk4T0H8sFw==}
'@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@50ea3ca7':
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@50ea3ca7}
'@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@284':
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@284}
version: 1.0.0-next.85
peerDependencies:
react-dom: ^18.0.0
@@ -4099,11 +4099,11 @@ snapshots:
'@appwrite.io/console@https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@08ec153': {}
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@50ea3ca7(svelte@4.2.19)':
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@372a1cfe319fdf7cb8166b5402eb949751155454(svelte@4.2.19)':
dependencies:
svelte: 4.2.19
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@50ea3ca70a483ffd9040f8ce9cb40a8d5f1ee30e(svelte@4.2.19)':
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@50ea3ca7(svelte@4.2.19)':
dependencies:
svelte: 4.2.19
@@ -4116,9 +4116,9 @@ snapshots:
'@appwrite.io/pink-icons': 1.0.0
the-new-css-reset: 1.11.3
'@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@50ea3ca7(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)':
'@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@284(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)':
dependencies:
'@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@50ea3ca70a483ffd9040f8ce9cb40a8d5f1ee30e(svelte@4.2.19)
'@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@372a1cfe319fdf7cb8166b5402eb949751155454(svelte@4.2.19)
'@floating-ui/dom': 1.6.13
'@melt-ui/pp': 0.3.2(@melt-ui/svelte@0.86.3(svelte@4.2.19))(svelte@4.2.19)
'@melt-ui/svelte': 0.86.3(svelte@4.2.19)
src/lib/components/expirationInput.svelte
+1 -7
View File
@@ -83,11 +83,5 @@
<InputSelect bind:value={expirationSelect} {options} id="preset" label={selectorLabel} {helper}>
</InputSelect>
{#if expirationSelect === 'custom'}
<!-- NOTE: this isn't migrated to Pink2 yet, as there's no component -->
<InputDateTime
required
id="expire"
label={dateSelectorLabel}
bind:value={expirationCustom}
showLabel={typeof dateSelectorLabel !== 'undefined' && dateSelectorLabel !== ''} />
<InputDateTime required id="expire" label={dateSelectorLabel} bind:value={expirationCustom} />
{/if}
src/lib/elements/forms/inputDateTime.svelte
+17 -47
View File
@@ -1,12 +1,9 @@
<script lang="ts">
import { onMount } from 'svelte';
import { Helper, Label } from '.';
import NullCheckbox from './nullCheckbox.svelte';
import { Input, Layout, Selector } from '@appwrite.io/pink-svelte';
export let label: string;
export let showLabel = true;
export let optionalText: string | undefined = undefined;
export let id: string;
export let label: string;
export let value: string;
export let required = false;
export let nullable = false;
@@ -25,22 +22,6 @@
}
});
function handleInvalid(event: Event) {
event.preventDefault();
if (element.validity.valueMissing) {
error = 'This field is required';
return;
}
error = element.validationMessage;
}
function handleInput(event: Event) {
const { value: currentValue } = event.currentTarget as HTMLInputElement;
value = currentValue || null;
}
let prevValue = '';
function handleNullChange(e: CustomEvent<boolean>) {
const isNull = e.detail;
@@ -59,35 +40,24 @@
$: isNullable = nullable && !required;
</script>
<Label {required} {optionalText} hide={!showLabel} for={id}>
{label}
</Label>
<div class="input-text-wrapper">
<input
<Layout.Stack gap="s" direction="row">
<Input.DateTime
{id}
{label}
{disabled}
{readonly}
{required}
{value}
{step}
autocomplete={autocomplete ? 'on' : 'off'}
type="datetime-local"
class="input-text"
bind:this={element}
on:input={handleInput}
on:invalid={handleInvalid}
style:--amount-of-buttons={isNullable ? 2.75 : 1}
style:--button-size={isNullable ? '2rem' : '1rem'} />
{#if isNullable}
<ul
class="buttons-list u-cross-center u-gap-8 u-position-absolute u-inset-block-start-8 u-inset-block-end-8 u-inset-inline-end-12">
<li class="buttons-list-item">
<NullCheckbox checked={value === null} on:change={handleNullChange} />
</li>
</ul>
{/if}
</div>
{#if error}
<Helper type="warning">{error}</Helper>
{/if}
helper={error}
autocomplete={autocomplete ? 'on' : 'off'}>
{#if isNullable}
<Selector.Checkbox
size="s"
slot="end"
label="NULL"
checked={value === null}
on:change={handleNullChange} />
{/if}
</Input.DateTime>
</Layout.Stack>
src/routes/(console)/project-[project]/storage/bucket-[bucket]/file-[file]/+page.svelte
+15 -7
View File
@@ -15,7 +15,15 @@
import { Dependencies } from '$lib/constants';
import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
import { bucket } from '../store';
import { ActionMenu, HiddenText, Layout, Icon, Popover, Table } from '@appwrite.io/pink-svelte';
import {
ActionMenu,
Button as PinkButton,
InteractiveText,
Layout,
Icon,
Popover,
Table
} from '@appwrite.io/pink-svelte';
import {
IconDotsHorizontal,
IconPencil,
@@ -191,7 +199,7 @@
<Table.Row>
<Table.Cell>{toLocaleDate(token.created)}</Table.Cell>
<Table.Cell>
<HiddenText isVisible={false} text={token.value} />
<InteractiveText isVisible={false} text={token.value} />
</Table.Cell>
<Table.Cell
>{token.expiry
@@ -203,18 +211,18 @@
: 'Never'}</Table.Cell>
<Table.Cell>
<Popover placement="bottom-end" let:toggle>
<Button
text
<Popover placement="bottom-end" padding="none" let:toggle>
<PinkButton.Button
icon
variant="ghost"
on:click={(e) => {
e.preventDefault();
toggle(e);
}}>
<Icon size="s" icon={IconDotsHorizontal} />
</Button>
</PinkButton.Button>
<svelte:fragment slot="tooltip" let:toggle>
<ActionMenu.Root noPadding>
<ActionMenu.Root>
<ActionMenu.Item.Button
leadingIcon={IconPencil}
on:click={(e) => {
src/routes/(console)/project-[project]/storage/bucket-[bucket]/file-[file]/manageFileToken.svelte
+1 -2
View File
@@ -8,9 +8,8 @@
<script lang="ts">
import { Button } from '$lib/elements/forms';
import { ExpirationInput, Modal } from '$lib/components';
import { createEventDispatcher } from 'svelte';
import { Confirm } from '$lib/components/index.js';
import { Confirm, ExpirationInput, Modal } from '$lib/components';
export let show = false;
export let isDelete = false;