ui adjustments + adding the type config for some components wrappers

EMPTYVOID-DEV · Feb 29, 2024 · 13838b8 · 13838b8
1 parent 87f3c6a
commit 13838b8
Show file tree

Hide file tree

Showing 22 changed files with 348 additions and 163 deletions.
diff --git a/apps/docs/src/lib/components/core/wrapper.svelte b/apps/docs/src/lib/components/core/wrapper.svelte
@@ -0,0 +1,13 @@
+<div class="wrapper">
+	<slot />
+</div>
+
+<style>
+	.wrapper {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 2rem;
+	}
+</style>
diff --git a/apps/docs/src/lib/components/zeroUIWrappers/asyncButton.svelte b/apps/docs/src/lib/components/zeroUIWrappers/asyncButton.svelte
@@ -1,9 +1,12 @@
 <script>
-	import { AsyncButton } from 'zero-ui-registry';
+	import { AsyncButton, DefaultTabs } from 'zero-ui-registry';
+	import Wrapper from '../core/wrapper.svelte';
+	/**@type {("disabled"|"passive"|"primary"|"secondary"|"danger")[]} */
+	const tabs = ['disabled', 'passive', 'primary', 'secondary', 'danger'];
+	let activeTab = 0;
 </script>
 
-<AsyncButton
-	action={() => {
-		return new Promise((res) => setTimeout(res, 1200));
-	}}
-/>
+<Wrapper>
+	<DefaultTabs tabs={tabs.map((el) => ({ title: el }))} bind:activeTab />
+	<AsyncButton action={() => new Promise((res) => setTimeout(res, 3000))} type={tabs[activeTab]} />
+</Wrapper>
diff --git a/apps/docs/src/lib/components/zeroUIWrappers/defaultCheckList.svelte b/apps/docs/src/lib/components/zeroUIWrappers/defaultCheckList.svelte
@@ -1,20 +1,38 @@
 <script>
-	import { DefaultCheckList as CheckList } from 'zero-ui-registry';
+	import Wrapper from '$lib/components/core/wrapper.svelte';
+	import { DefaultCheckList as CheckList, DefaultTabs } from 'zero-ui-registry';
 	/**@type {import("zero-ui-registry/types").checkItem[]}*/
-	const checkList = [
+	let checkList = [
 		{
 			text: 'I use svelte',
-			checked: true
+			checked: true,
+			description: 'Because i like the compiler approach.'
 		},
 		{
 			text: 'I use react',
-			checked: false
+			checked: false,
+			description: 'Because i want a job.'
 		},
 		{
 			text: 'I use vue',
-			checked: false
+			checked: false,
+			description: 'I dont know what re you doing'
 		}
 	];
+	const tabs = ['normal', 'disabled'];
 </script>
 
-<CheckList {checkList} />
+<Wrapper>
+	<DefaultTabs
+		tabs={tabs.map((el) => ({ title: el }))}
+		on:change={(e) => {
+			const activeTab = e.detail.activeTab;
+			if (activeTab == 1) {
+				checkList = checkList.map((el) => ({ ...el, disabled: true }));
+			} else {
+				checkList = checkList.map((el) => ({ ...el, disabled: false }));
+			}
+		}}
+	/>
+	<CheckList {checkList} />
+</Wrapper>
diff --git a/apps/docs/src/lib/components/zeroUIWrappers/defaultLink.svelte b/apps/docs/src/lib/components/zeroUIWrappers/defaultLink.svelte
@@ -1,6 +1,18 @@
 <script>
-	import { DefaultLink as Link } from 'zero-ui-registry';
+	import { DefaultTabs, DefaultLink as Link } from 'zero-ui-registry';
 	import Github from '../icons/github.svelte';
+	import Wrapper from '../core/wrapper.svelte';
+	/**@type {("primary"|"secondary")[]} */
+	const tabs = ['primary', 'secondary'];
+	let activeTab = 0;
 </script>
 
-<Link icon={Github} href="https://github.com/EMPTYVOID-DEV/Zero-UI" text="Github" />
+<Wrapper>
+	<DefaultTabs tabs={tabs.map((el) => ({ title: el }))} bind:activeTab />
+	<Link
+		icon={Github}
+		href="https://github.com/EMPTYVOID-DEV/Zero-UI"
+		text="Github"
+		type={tabs[activeTab]}
+	/>
+</Wrapper>
diff --git a/apps/docs/src/lib/components/zeroUIWrappers/defaultRadioGroup.svelte b/apps/docs/src/lib/components/zeroUIWrappers/defaultRadioGroup.svelte
@@ -1,19 +1,26 @@
 <script>
-	import { DefaultRadioGroup as RadioGroup } from 'zero-ui-registry';
+	import { DefaultTabs, DefaultRadioGroup as RadioGroup } from 'zero-ui-registry';
+	import Wrapper from '../core/wrapper.svelte';
+	const tabs = ['normal', 'disabled'];
 	/**@type {import("zero-ui-registry/types").radioItem[]}*/
 	let radioGroup = [
 		{
-			text: 'svelte'
+			text: 'svelte',
+			description: 'Compiler'
 		},
 		{
-			text: 'react'
+			text: 'react',
+			description: 'Virtual dom'
 		},
 		{
-			text: 'vue'
+			text: 'vue',
+			description: 'Virtual dom'
 		}
 	];
+	let activeTab = 0;
 </script>
 
-<div class="radioGroupTest">
-	<RadioGroup {radioGroup} defaultChoice={0} />
-</div>
+<Wrapper>
+	<DefaultTabs bind:activeTab tabs={tabs.map((el) => ({ title: el }))} />
+	<RadioGroup {radioGroup} defaultChoice={0} disabled={tabs[activeTab] == 'disabled'} />
+</Wrapper>
diff --git a/apps/docs/src/lib/components/zeroUIWrappers/defaultTabs.svelte b/apps/docs/src/lib/components/zeroUIWrappers/defaultTabs.svelte
@@ -4,6 +4,7 @@
 	import Modeling from '$lib/components/icons/modeling.svelte';
 	import Development from '$lib/components/icons/development.svelte';
 	import Testing from '$lib/components/icons/test.svelte';
+	import Wrapper from '../core/wrapper.svelte';
 	let activeTab = 0;
 	const tabs = [
 		'Generate ideas and concepts for the project.',
@@ -13,7 +14,7 @@
 	];
 </script>
 
-<div class="tabsWrapper">
+<Wrapper>
 	<DefaultTabs
 		bind:activeTab
 		tabs={[
@@ -34,19 +35,12 @@
 				icon: Testing
 			}
 		]}
-		on:change={(e) => console.log(e.detail.activeTab)}
 	/>
 	<p>{tabs[activeTab]}</p>
-</div>
+</Wrapper>
 
 <style>
-	.tabsWrapper {
-		width: 100%;
-		display: flex;
-		flex-direction: column;
-		gap: 2rem;
-	}
-	.tabsWrapper p {
+	p {
 		color: var(--foregroundColor);
 		font-size: var(--body);
 		font-family: var(--bodyFont);

diff --git a/apps/docs/src/lib/components/zeroUIWrappers/dialogAlert.svelte b/apps/docs/src/lib/components/zeroUIWrappers/dialogAlert.svelte
@@ -1,13 +1,34 @@
 <script>
-	import { SyncButton, DialogAlert } from 'zero-ui-registry';
+	import { SyncButton, DialogAlert, DefaultTabs } from 'zero-ui-registry';
+	import Wrapper from '../core/wrapper.svelte';
+	/**@type {("primary"|"danger")[]} */
+	const tabs = ['danger', 'primary'];
+	const info = [
+		{
+			trigger: 'delete',
+			header: 'Are you sure?',
+			description:
+				"This action can't be undone.This will permanently erase all of your date be sure to backup your files."
+		},
+		{
+			trigger: 'subscribe',
+			header: 'Do you want to subscribe?',
+			description:
+				'Your trial has expired, in order to continue viewing the content you have to subscribe.'
+		}
+	];
+	let activeTab = 0;
 </script>
 
-<DialogAlert
-	type="danger"
-	header="Are you sure?"
-	description="This action can't be undone.This will permanently erase all of your date be sure to backup your files."
->
-	<svelte:fragment slot="alertTrigger" let:open>
-		<SyncButton text="Delete" on:click={() => open()} type="danger" />
-	</svelte:fragment>
-</DialogAlert>
+<Wrapper>
+	<DefaultTabs bind:activeTab tabs={tabs.map((el) => ({ title: el }))} />
+	<DialogAlert
+		type={tabs[activeTab]}
+		header={info[activeTab].header}
+		description={info[activeTab].description}
+	>
+		<svelte:fragment slot="alertTrigger" let:open>
+			<SyncButton text={info[activeTab].trigger} on:click={() => open()} type={tabs[activeTab]} />
+		</svelte:fragment>
+	</DialogAlert>
+</Wrapper>
diff --git a/apps/docs/src/lib/components/zeroUIWrappers/inlineAlert.svelte b/apps/docs/src/lib/components/zeroUIWrappers/inlineAlert.svelte
@@ -1,9 +1,30 @@
 <script>
-	import { InlineAlert } from 'zero-ui-registry';
+	import Wrapper from '$lib/components/core/wrapper.svelte';
+	import { InlineAlert, DefaultTabs } from 'zero-ui-registry';
+	/**@type {("primary"|"danger"|"success")[]} */
+	const tabs = ['danger', 'primary', 'success'];
+	const info = [
+		{
+			header: 'Error',
+			description: 'The fields you inserted are incorrect.'
+		},
+		{
+			header: 'Info',
+			description: 'There is a deadline till next week for submitting the application.'
+		},
+		{
+			header: 'Success',
+			description: 'The files has been uploaded successfully.'
+		}
+	];
+	let activeTab = 0;
 </script>
 
-<InlineAlert
-	description="The operation was completed successfully"
-	header="Operation status"
-	type="success"
-/>
+<Wrapper>
+	<DefaultTabs bind:activeTab tabs={tabs.map((el) => ({ title: el }))} />
+	<InlineAlert
+		description={info[activeTab].description}
+		header={info[activeTab].header}
+		type={tabs[activeTab]}
+	/>
+</Wrapper>
diff --git a/apps/docs/src/lib/components/zeroUIWrappers/syncButton.svelte b/apps/docs/src/lib/components/zeroUIWrappers/syncButton.svelte
@@ -1,5 +1,12 @@
 <script>
-	import { SyncButton } from 'zero-ui-registry';
+	import { SyncButton, DefaultTabs } from 'zero-ui-registry';
+	import Wrapper from '../core/wrapper.svelte';
+	/**@type {("disabled"|"passive"|"primary"|"secondary"|"danger")[]} */
+	const tabs = ['disabled', 'passive', 'primary', 'secondary', 'danger'];
+	let activeTab = 0;
 </script>
 
-<SyncButton />
+<Wrapper>
+	<DefaultTabs tabs={tabs.map((el) => ({ title: el }))} bind:activeTab />
+	<SyncButton type={tabs[activeTab]} />
+</Wrapper>
diff --git a/packages/ui/registry/components/alert/inlineAlert.svelte b/packages/ui/registry/components/alert/inlineAlert.svelte
@@ -9,7 +9,7 @@
   /**@type {"primary"|"success"|"danger"}*/
   export let type = "primary";
   /**@type {import("../../types").iconComponent}*/
-  export let icon =
+  $: icon =
     type == "primary" ? InfoIcon : type == "danger" ? DangerIcon : SuccessIcon;
 </script>
 

diff --git a/packages/ui/registry/components/button/asyncButton.svelte b/packages/ui/registry/components/button/asyncButton.svelte
@@ -100,7 +100,7 @@
     height: 1.25rem;
   }
   .loading {
-    opacity: 0.7;
+    opacity: 0.8;
     cursor: not-allowed;
   }
 </style>
diff --git a/packages/ui/registry/components/checkList/checkItem.svelte b/packages/ui/registry/components/checkList/checkItem.svelte
@@ -0,0 +1,87 @@
+<script>
+  import ValidIcon from "../../icons/validIcon.svelte";
+
+  /**@type {import("../../types").checkItem}*/
+  export let checkItem;
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div class:disabled={checkItem.disabled} class="checkListItem" on:click>
+  <button
+    class="checkBox"
+    role="checkbox"
+    aria-checked={checkItem.checked}
+    class:checked={checkItem.checked}
+  >
+    {#if checkItem.checked}
+      <ValidIcon />
+    {/if}
+  </button>
+  <div class="label">
+    <label for="checkbox">{checkItem.text}</label>
+    {#if checkItem.description}
+      <span>{checkItem.description}</span>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .checkListItem {
+    display: grid;
+    grid-template-columns: auto auto;
+    align-items: center;
+    justify-content: start;
+    gap: 0.5rem;
+    --text: var(--foregroundColor);
+    --main-color: var(--primaryColor);
+  }
+
+  .disabled {
+    --text: var(--mutedColor);
+    --main-color: var(--mutedColor);
+  }
+
+  .checkBox {
+    width: 1.25rem;
+    aspect-ratio: 1/1;
+    display: flex;
+    align-items: center;
+    background-color: transparent;
+    border: 2px solid var(--main-color);
+    border-radius: 0.25rem;
+    outline: none;
+    cursor: pointer;
+  }
+
+  .checkBox :global(svg) {
+    width: 1rem;
+    height: 1rem;
+    --icon: var(--backgroundColor);
+  }
+
+  .checked {
+    background-color: var(--main-color);
+  }
+  .label {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  .label label,
+  .label span {
+    font-family: var(--bodyFont);
+    font-size: var(--body);
+  }
+  .label label {
+    color: var(--text);
+  }
+  .label span {
+    color: var(--mutedColor);
+  }
+
+  .disabled button {
+    cursor: not-allowed;
+  }
+</style>