diff --git a/package-lock.json b/package-lock.json index 3a2289e17..0e9b8d8d5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,8 +9,8 @@ "version": "0.0.1", "dependencies": { "@aw-labs/appwrite-console": "^6.0.0", - "@aw-labs/icons": "0.0.0-58", - "@aw-labs/ui": "0.0.0-58", + "@aw-labs/icons": "0.0.0-61", + "@aw-labs/ui": "0.0.0-61", "echarts": "^5.4.0", "prismjs": "^1.29.0", "tippy.js": "^6.3.7", @@ -79,16 +79,18 @@ } }, "node_modules/@aw-labs/icons": { - "version": "0.0.0-58", - "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-58.tgz", - "integrity": "sha512-xUD5DQcYVNiKhDSpxMO24G/4l7txgAdwochK01tJA6wXhuPAcp5Yjuofjm2bGkMzCuze4Vs+SVvhsBxzVXRPrA==" + "version": "0.0.0-61", + "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-61.tgz", + "integrity": "sha512-kZdiDF+ywVvcoC8R+lZNnxwuxNeCmMNwyoqoFL+VANNeRL6pfABYDUwTRG4cZmY4n/oswe5FeILjl/HlSSf5/w==" }, "node_modules/@aw-labs/ui": { - "version": "0.0.0-58", - "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-58.tgz", - "integrity": "sha512-W3bTvAPX4ig5qLBvGn/VpNaDk62RqO4oDa0poube2WuElkVvaGwFAR0wCwmisdi2NeXyGJqt20g3Y/Mz4K2yMA==", + "version": "0.0.0-61", + "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-61.tgz", + "integrity": "sha512-v0+4CWP7x7cNo0sqZlZOeqp3RK45fS+LMg/lVEpyByaluMqXDIPe7p522vp0hgsN2YKtpilbxg0vlqLCIvEa8w==", "dependencies": { - "@aw-labs/icons": "*" + "@aw-labs/icons": "*", + "normalize.css": "^8.0.1", + "the-new-css-reset": "^1.7.3" } }, "node_modules/@babel/code-frame": { @@ -5888,6 +5890,11 @@ "node": ">=0.10.0" } }, + "node_modules/normalize.css": { + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz", + "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==" + }, "node_modules/npm-run-path": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz", @@ -7148,6 +7155,11 @@ "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=", "dev": true }, + "node_modules/the-new-css-reset": { + "version": "1.7.3", + "resolved": "https://registry.npmjs.org/the-new-css-reset/-/the-new-css-reset-1.7.3.tgz", + "integrity": "sha512-AiDZRlaS6ccC6CVHMEg+DQyZwfO0/KUvsz+vwmoOw9MlyNv/CaiOEhV1W3iw8ajQbWF0sXWYYhdKGMlCNyILPA==" + }, "node_modules/tiny-glob": { "version": "0.2.9", "resolved": "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.9.tgz", @@ -7776,16 +7788,18 @@ } }, "@aw-labs/icons": { - "version": "0.0.0-58", - "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-58.tgz", - "integrity": "sha512-xUD5DQcYVNiKhDSpxMO24G/4l7txgAdwochK01tJA6wXhuPAcp5Yjuofjm2bGkMzCuze4Vs+SVvhsBxzVXRPrA==" + "version": "0.0.0-61", + "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-61.tgz", + "integrity": "sha512-kZdiDF+ywVvcoC8R+lZNnxwuxNeCmMNwyoqoFL+VANNeRL6pfABYDUwTRG4cZmY4n/oswe5FeILjl/HlSSf5/w==" }, "@aw-labs/ui": { - "version": "0.0.0-58", - "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-58.tgz", - "integrity": "sha512-W3bTvAPX4ig5qLBvGn/VpNaDk62RqO4oDa0poube2WuElkVvaGwFAR0wCwmisdi2NeXyGJqt20g3Y/Mz4K2yMA==", + "version": "0.0.0-61", + "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-61.tgz", + "integrity": "sha512-v0+4CWP7x7cNo0sqZlZOeqp3RK45fS+LMg/lVEpyByaluMqXDIPe7p522vp0hgsN2YKtpilbxg0vlqLCIvEa8w==", "requires": { - "@aw-labs/icons": "*" + "@aw-labs/icons": "*", + "normalize.css": "^8.0.1", + "the-new-css-reset": "^1.7.3" } }, "@babel/code-frame": { @@ -12161,6 +12175,11 @@ "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", "dev": true }, + "normalize.css": { + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz", + "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==" + }, "npm-run-path": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz", @@ -13056,6 +13075,11 @@ "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=", "dev": true }, + "the-new-css-reset": { + "version": "1.7.3", + "resolved": "https://registry.npmjs.org/the-new-css-reset/-/the-new-css-reset-1.7.3.tgz", + "integrity": "sha512-AiDZRlaS6ccC6CVHMEg+DQyZwfO0/KUvsz+vwmoOw9MlyNv/CaiOEhV1W3iw8ajQbWF0sXWYYhdKGMlCNyILPA==" + }, "tiny-glob": { "version": "0.2.9", "resolved": "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.9.tgz", diff --git a/package.json b/package.json index 7ceaa1092..5d2bde148 100644 --- a/package.json +++ b/package.json @@ -19,8 +19,8 @@ }, "dependencies": { "@aw-labs/appwrite-console": "^6.0.0", - "@aw-labs/icons": "0.0.0-58", - "@aw-labs/ui": "0.0.0-58", + "@aw-labs/icons": "0.0.0-61", + "@aw-labs/ui": "0.0.0-61", "echarts": "^5.4.0", "prismjs": "^1.29.0", "tippy.js": "^6.3.7", diff --git a/src/lib/components/step.svelte b/src/lib/components/step.svelte index 95c010536..7d2c5dffd 100644 --- a/src/lib/components/step.svelte +++ b/src/lib/components/step.svelte @@ -4,35 +4,41 @@ export let currentSub = 0; export let isSub = false; export let step: { text: string; substeps?: { text: string }[] }; + + //TODO: remove inline styling
  • + style={`cursor: ${completed ? 'pointer' : 'default'};`} + aria-label={`${completed ? 'done' : current ? 'current' : ''} step`}> {#if isSub} {step.text} {:else} - {#if completed} -
    -
    - {:else} -
    - {/if} -
    - {step.text} - {#if step?.substeps} -
      - {#each step.substeps as subStep, index} - - {/each} -
    +
    + {#if completed} +
    +
    + {:else} +
    {/if} +
    + {step.text} + {#if step?.substeps} +
      + {#each step.substeps as subStep, index} + + {/each} +
    + {/if} +
    {/if}
    • diff --git a/src/lib/components/steps.svelte b/src/lib/components/steps.svelte index 5d0d82c24..7837c3be9 100644 --- a/src/lib/components/steps.svelte +++ b/src/lib/components/steps.svelte @@ -1,21 +1,33 @@
      {#if steps} {#each steps as step, index} {@const stepNumber = index + 1} + {#if firstOptional === index} +
    1. +

      OPTIONAL

      +
      2. + {/if} dispatch('step', stepNumber)} bind:currentSub current={currentStep === stepNumber} completed={stepNumber < currentStep} diff --git a/src/lib/layout/wizard.svelte b/src/lib/layout/wizard.svelte index f7d7b9b09..dbaad2b0f 100644 --- a/src/lib/layout/wizard.svelte +++ b/src/lib/layout/wizard.svelte @@ -4,6 +4,7 @@ { label: string; component: typeof SvelteComponent; + optional?: boolean; } >; @@ -14,22 +15,40 @@ import { addNotification } from '$lib/stores/notifications'; import { wizard } from '$lib/stores/wizard'; import { createEventDispatcher, type SvelteComponent } from 'svelte'; + import WizardExitModal from './wizardExitModal.svelte'; export let title: string; export let steps: WizardStepsType; + export let confirmExit = false; export let finalAction = 'Create'; const dispatch = createEventDispatcher(); let currentStep = 1; + let showExitModal = false; function handleKeydown(event: KeyboardEvent) { - if (event.key === 'Escape') { + if (event.key === 'Escape' && !showExitModal) { event.preventDefault(); wizard.hide(); } } + function handleExit() { + if (confirmExit) { + showExitModal = true; + } else { + wizard.hide(); + } + } + + function handleStepClick(e: CustomEvent) { + const step = e.detail; + if (step < currentStep) { + currentStep = step; + } + } + async function submit() { if ($wizard.interceptor) { try { @@ -67,15 +86,17 @@
      {title}
      - @@ -91,6 +112,10 @@ {/each}
      + {#if sortedSteps[currentStep - 1][1].optional} + + {/if} {#if currentStep === 1} @@ -106,3 +131,9 @@
      + +{#if showExitModal} + wizard.hide()}> + this process + +{/if} diff --git a/src/lib/layout/wizardExitModal.svelte b/src/lib/layout/wizardExitModal.svelte new file mode 100644 index 000000000..d9ab70bd7 --- /dev/null +++ b/src/lib/layout/wizardExitModal.svelte @@ -0,0 +1,26 @@ + + +
      + + Exit Process +

      + Are you sure you want to exit from ? All data will be deleted. This action is + irreversible. +

      + + + + +       +
      diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/createDocument.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/createDocument.svelte index 310158379..0e0172813 100644 --- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/createDocument.svelte +++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/createDocument.svelte @@ -72,7 +72,8 @@ }); stepsComponents.set(2, { label: 'Set permissions', - component: Step2 + component: Step2, + optional: true });