bump icons, label cards

This commit is contained in:
Arman
2024-10-24 14:51:57 +02:00
parent f6f69c97ee
commit a9e073993d
6 changed files with 49 additions and 27 deletions
+2 -2
View File
@@ -22,8 +22,8 @@
"@appwrite.io/console": "1.4.1",
"@appwrite.io/pink": "0.25.0",
"@appwrite.io/pink-icons": "0.25.0",
"@appwrite.io/pink-icons-svelte": "1.0.0-next.5",
"@appwrite.io/pink-svelte": "1.0.0-next.66",
"@appwrite.io/pink-icons-svelte": "1.0.0-next.6",
"@appwrite.io/pink-svelte": "1.0.0-next.67",
"@popperjs/core": "^2.11.8",
"@sentry/sveltekit": "^8.33.1",
"@stripe/stripe-js": "^3.5.0",
+16 -7
View File
@@ -18,11 +18,11 @@ importers:
specifier: 0.25.0
version: 0.25.0
'@appwrite.io/pink-icons-svelte':
specifier: 1.0.0-next.5
version: 1.0.0-next.5(svelte@4.2.19)
specifier: 1.0.0-next.6
version: 1.0.0-next.6(svelte@4.2.19)
'@appwrite.io/pink-svelte':
specifier: 1.0.0-next.66
version: 1.0.0-next.66(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
specifier: 1.0.0-next.67
version: 1.0.0-next.67(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
'@popperjs/core':
specifier: ^2.11.8
version: 2.11.8
@@ -210,11 +210,16 @@ packages:
peerDependencies:
svelte: ^4.0.0
'@appwrite.io/pink-icons-svelte@1.0.0-next.6':
resolution: {integrity: sha512-izjcvqOvqjXEIA1DoO+5qWFkiky5+Xsgj5g3LA18u3L7vaJstbGzf2plT5qhkkYhDcCPy35psnj4YyF3ztWWQA==}
peerDependencies:
svelte: ^4.0.0
'@appwrite.io/pink-icons@0.25.0':
resolution: {integrity: sha512-0O3i2oEuh5mWvjO80i+X6rbzrWLJ1m5wmv2/M3a1p2PyBJsFxN8xQMTEmTn3Wl/D26SsM7SpzbdW6gmfgoVU9Q==}
'@appwrite.io/pink-svelte@1.0.0-next.66':
resolution: {integrity: sha512-EFNfbN4Bo/3EHcx3A3GeHBz2HvjgUKuL3UQtfc9l7oCSJn4H6ky4zAEDfw9fotJeqzJDytyGr6YnU5gGadkTaA==}
'@appwrite.io/pink-svelte@1.0.0-next.67':
resolution: {integrity: sha512-HZKNUCkpjRsV7wYNx8AomJvU3WkJP6ehAeNDCUV2P5t2bLpN1ZdYU3o5Lhe4nmr/OkIrxDEd4eYumy0W99nAmw==}
peerDependencies:
react-dom: ^18.0.0
svelte: ^4.0.0
@@ -3868,9 +3873,13 @@ snapshots:
dependencies:
svelte: 4.2.19
'@appwrite.io/pink-icons-svelte@1.0.0-next.6(svelte@4.2.19)':
dependencies:
svelte: 4.2.19
'@appwrite.io/pink-icons@0.25.0': {}
'@appwrite.io/pink-svelte@1.0.0-next.66(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)':
'@appwrite.io/pink-svelte@1.0.0-next.67(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)':
dependencies:
'@appwrite.io/pink-icons-svelte': 1.0.0-next.5(svelte@4.2.19)
'@floating-ui/dom': 1.6.11
@@ -27,7 +27,7 @@
value={BillingPlan.FREE}
tooltipShow={anyOrgFree}
tooltipText="You are limited to 1 Free organization per account."
padding={1.5}>
padding="medium">
<svelte:fragment slot="custom" let:disabled>
<div
class="u-flex u-flex-vertical u-gap-4 u-width-full-line"
@@ -55,7 +55,7 @@
disabled={!selfService}
bind:group={billingPlan}
value={BillingPlan.PRO}
padding={1.5}>
padding="medium">
<svelte:fragment slot="custom" let:disabled>
<div
class="u-flex u-flex-vertical u-gap-4 u-width-full-line"
@@ -82,7 +82,7 @@
name="plan"
bind:group={billingPlan}
value={BillingPlan.SCALE}
padding={1.5}>
padding="medium">
<svelte:fragment slot="custom">
<div class="u-flex u-flex-vertical u-gap-4 u-width-full-line">
<h4 class="body-text-2 u-bold">
+25 -12
View File
@@ -1,13 +1,15 @@
<script lang="ts">
import { tooltip } from '$lib/actions/tooltip';
import { app } from '$lib/stores/app';
import { base } from '$app/paths';
import { Card } from '@appwrite.io/pink-svelte';
import { type ComponentProps } from 'svelte';
import type Selector from '@appwrite.io/pink-svelte/dist/card/Selector.svelte';
type Props = ComponentProps<Selector>;
export let name: string;
export let group: string;
export let value: string | number | boolean;
export let disabled = false;
export let padding = 1;
export let icon: string = null;
export let imageIcon: string = null;
export let fullHeight = true;
@@ -17,20 +19,31 @@
export let tooltipText: string = null;
export let tooltipShow = false;
enum Radius {
xsmall = '--border-radius-xsmall',
small = '--border-radius-small',
medium = '--border-radius-medium',
large = '--border-radius-large'
}
// Pink v2
export let radius: Props['radius'] = 'medium';
export let padding: Props['padding'] = 'small';
//temporarily unefined
export let title: Props['title'] = undefined;
// TODO: remove after label card migration
let slotTitle: HTMLSpanElement;
</script>
<label
<div use:tooltip={{ content: tooltipText, disabled: !tooltipText || !tooltipShow }}>
<Card.Selector {value} {disabled} title={title ?? slotTitle?.innerText} bind:group>
<p>
<slot />
</p>
</Card.Selector>
</div>
<span style="display: none" bind:this={slotTitle}>
<slot name="title" />
</span>
<!-- <label
class="card u-cursor-pointer"
class:is-allow-focus={!disabled}
class:is-disabled={disabled}
class:u-height-100-percent={fullHeight}
style:--card-padding={`${padding}rem`}
style:--card-border-radius={`var(${Radius[borderRadius]})`}
style:--p-card-bg-color-default={backgroundColor}
style:--p-card-bg-color-hover={backgroundColorHover}
@@ -70,4 +83,4 @@
{/if}
{/if}
</div>
</label>
</label> -->
@@ -322,7 +322,7 @@
{#each restoreOptions as restoreOption}
<div class="u-width-full-line">
<LabelCard
padding={1}
padding="small"
name="restore"
value={restoreOption.id}
bind:group={selectedRestoreOption}>
@@ -11,8 +11,8 @@
name="connect-behaviour"
value="now"
bind:group={connectBehaviour}
disabled={!isVcsEnabled}>
<svelte:fragment slot="title">Connect to Git repository</svelte:fragment>
disabled={!isVcsEnabled}
title="Connect to Git repository">
Clone the template to a new repository or connect it to an existing one.
</LabelCard>
<LabelCard