@sierra-95/svelte-scaffold 1.0.9 → 1.0.10

package/dist/components/Core/others/Button/Marquee/button.svelte

@@ -1,58 +1,58 @@
-<script lang="ts">
-  import { onMount } from 'svelte';
-  import './button.css';
-
-  type _buttonType = 'button' | 'submit' | 'reset';
-  const {
-    text = "Hover me",
-    bg = "var(--primary-bg)",
-    color = "var(--text)",
-    title = "",
-    type = 'button' as _buttonType, 
-    disabled = false,
-    ...rest
-  } = $props();
-
-  let scrolling = $state(false);
-
-  let container: HTMLDivElement;
-  let marquee: HTMLButtonElement;
-
-  let containerWidth = 0;
-  let textWidth = 0;
-
-  onMount(() => {
-    if (container && marquee) {
-      // width of one sentence
-      textWidth = marquee.offsetWidth / 3; // because we repeat text 3x
-      containerWidth = textWidth - 10;
-      container.style.width = containerWidth + "px";
-      const containerHeight = container.offsetHeight;
-      container.style.borderRadius = containerHeight / 2 + "px";
-    }
-  });
-</script>
-
-<div
-  role='none'
-  bind:this={container}
-  class="marquee-container"
-  onmouseenter={() => scrolling = true}
-  onmouseleave={() => scrolling = false}
-  style="--border-color: {bg}; --text-color: {color}"
->
-  <button 
-    type={type}
-    title={title}
-    disabled={disabled}
-    class="marquee {scrolling ? 'scrolling' : ''}" 
-    bind:this={marquee}
-    onclick={(e: MouseEvent) => {
-      rest.onclick?.(e);
-    }} 
-  >
-    <span>{text}</span>
-    <span>{text}</span>
-    <span>{text}</span>
-  </button>
-</div>
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import './button.css';
+
+  type _buttonType = 'button' | 'submit' | 'reset';
+  const {
+    text = "Hover me",
+    bg = "var(--primary-bg)",
+    color = "var(--text)",
+    title = "",
+    type = 'button' as _buttonType, 
+    disabled = false,
+    ...rest
+  } = $props();
+
+  let scrolling = $state(false);
+
+  let container: HTMLDivElement;
+  let marquee: HTMLButtonElement;
+
+  let containerWidth = 0;
+  let textWidth = 0;
+
+  onMount(() => {
+    if (container && marquee) {
+      // width of one sentence
+      textWidth = marquee.offsetWidth / 3; // because we repeat text 3x
+      containerWidth = textWidth - 10;
+      container.style.width = containerWidth + "px";
+      const containerHeight = container.offsetHeight;
+      container.style.borderRadius = containerHeight / 2 + "px";
+    }
+  });
+</script>
+
+<div
+  role='none'
+  bind:this={container}
+  class="marquee-container"
+  onmouseenter={() => scrolling = true}
+  onmouseleave={() => scrolling = false}
+  style="--border-color: {bg}; --text-color: {color}"
+>
+  <button 
+    type={type}
+    title={title}
+    disabled={disabled}
+    class="marquee {scrolling ? 'scrolling' : ''}" 
+    bind:this={marquee}
+    onclick={(e: MouseEvent) => {
+      rest.onclick?.(e);
+    }} 
+  >
+    <span>{text}</span>
+    <span>{text}</span>
+    <span>{text}</span>
+  </button>
+</div>

package/dist/components/Core/others/Button/Swipe/button.css

@@ -1,32 +1,32 @@
-.swipe-btn {
-  position: relative;
-  display: block;
-  width:130px;
-  height: 30px;
-  line-height: 27px;
-  text-align: center;
-  border: 1px solid var(--btn-color);
-  border-radius: 50px;
-  overflow: hidden;
-  cursor: pointer;
-  z-index: 0;
-  color: var(--text-color);
-  transition: color 0.4s ease;
-}
-/* Swipe layer */
-.swipe-btn::before {
-  content: '';
-  position: absolute;
-  top: 0; left: 0; bottom: 0; right: 0;
-  background-color: var(--btn-color);
-  transform: translateX(-100%);
-  transition: transform 0.4s ease;
-  z-index: -1;
-}
-/* Hover triggers swipe */
-.swipe-btn:hover::before {
-  transform: translateX(0);
-}
-.swipe-btn:hover {
-  color: var(--button-text);
-}
+.swipe-btn {
+  position: relative;
+  display: block;
+  width:130px;
+  height: 30px;
+  line-height: 27px;
+  text-align: center;
+  border: 1px solid var(--btn-color);
+  border-radius: 50px;
+  overflow: hidden;
+  cursor: pointer;
+  z-index: 0;
+  color: var(--text-color);
+  transition: color 0.4s ease;
+}
+/* Swipe layer */
+.swipe-btn::before {
+  content: '';
+  position: absolute;
+  top: 0; left: 0; bottom: 0; right: 0;
+  background-color: var(--btn-color);
+  transform: translateX(-100%);
+  transition: transform 0.4s ease;
+  z-index: -1;
+}
+/* Hover triggers swipe */
+.swipe-btn:hover::before {
+  transform: translateX(0);
+}
+.swipe-btn:hover {
+  color: var(--button-text);
+}

package/dist/components/Core/others/Button/Swipe/button.svelte

@@ -1,58 +1,58 @@
-<script lang="ts">
-    import {buttonRipple} from '../../../../../index.js'
-
-    type _buttonType = 'button' | 'submit' | 'reset';
-    const {
-        text = "Button",
-        bg = "var(--primary-bg)",
-        color = "var(--text)",
-        title = "",
-        type = 'button' as _buttonType, 
-        disabled = false,
-        ...rest
-    } = $props();
-</script>
-<button 
-    type={type}
-    title={title}
-    disabled={disabled}
-    use:buttonRipple
-    class="swipe-btn" 
-    style="--btn-color: {bg}; --text-color: {color}"
-    onclick={(e: MouseEvent) => {
-		rest.onclick?.(e);
-	}} 
->{text}</button>
-<style>.swipe-btn {
-  position: relative;
-  display: block;
-  width:130px;
-  height: 30px;
-  line-height: 27px;
-  text-align: center;
-  border: 1px solid var(--btn-color);
-  border-radius: 50px;
-  overflow: hidden;
-  cursor: pointer;
-  z-index: 0;
-  color: var(--text-color);
-  transition: color 0.4s ease;
-}
-/* Swipe layer */
-.swipe-btn::before {
-  content: '';
-  position: absolute;
-  top: 0; left: 0; bottom: 0; right: 0;
-  background-color: var(--btn-color);
-  transform: translateX(-100%);
-  transition: transform 0.4s ease;
-  z-index: -1;
-}
-/* Hover triggers swipe */
-.swipe-btn:hover::before {
-  transform: translateX(0);
-}
-.swipe-btn:hover {
-  color: var(--button-text);
-}
+<script lang="ts">
+    import {buttonRipple} from '../../../../../index.js'
+
+    type _buttonType = 'button' | 'submit' | 'reset';
+    const {
+        text = "Button",
+        bg = "var(--primary-bg)",
+        color = "var(--text)",
+        title = "",
+        type = 'button' as _buttonType, 
+        disabled = false,
+        ...rest
+    } = $props();
+</script>
+<button 
+    type={type}
+    title={title}
+    disabled={disabled}
+    use:buttonRipple
+    class="swipe-btn" 
+    style="--btn-color: {bg}; --text-color: {color}"
+    onclick={(e: MouseEvent) => {
+		rest.onclick?.(e);
+	}} 
+>{text}</button>
+<style>.swipe-btn {
+  position: relative;
+  display: block;
+  width:130px;
+  height: 30px;
+  line-height: 27px;
+  text-align: center;
+  border: 1px solid var(--btn-color);
+  border-radius: 50px;
+  overflow: hidden;
+  cursor: pointer;
+  z-index: 0;
+  color: var(--text-color);
+  transition: color 0.4s ease;
+}
+/* Swipe layer */
+.swipe-btn::before {
+  content: '';
+  position: absolute;
+  top: 0; left: 0; bottom: 0; right: 0;
+  background-color: var(--btn-color);
+  transform: translateX(-100%);
+  transition: transform 0.4s ease;
+  z-index: -1;
+}
+/* Hover triggers swipe */
+.swipe-btn:hover::before {
+  transform: translateX(0);
+}
+.swipe-btn:hover {
+  color: var(--button-text);
+}
 </style>

package/dist/components/Core/others/Button/default/button.css

@@ -1,60 +1,60 @@
-#sierra-button {
-  padding: 0.5rem 1rem; 
-  border-radius: 4px; 
-  cursor: pointer;
-  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, opacity 0.3s ease-in-out;
-  min-width: 100px;
-  display: flex;
-  justify-content: space-evenly;
-  align-items: center;
-  gap: 10px;
-}
-#sierra-button:hover{
-  opacity: 0.8;
-}
-#sierra-button i{
-  font-size: 0.9rem;
-}
-/*********Button Variants*************************/
-.sierra-button-contained {
-  color: var(--button-text);
-}
-.sierra-button-outlined {
-  border-width: 1px;
-  border-style: solid;
-}
-
-/*********Contained Button Colors*************************/
-.sierra-button-contained-primary {
-  background-color: var(--primary-bg);
-}
-.sierra-button-contained-warning {
-  background-color: var(--warning-bg);
-}
-.sierra-button-contained-error {
-  background-color: var(--error-bg);
-}
-/*********Outlined Button Colors*************************/
-.sierra-button-outlined-primary {
-  border-color: var(--primary-bg);
-  color: var(--primary-bg);
-}
-.sierra-button-outlined-warning {
-  border-color: var(--warning-bg);
-  color: var(--warning-bg);
-}
-.sierra-button-outlined-error {
-  border-color: var(--error-bg);
-  color: var(--error-bg);
-}
-
-/*****Disabled********/
-#sierra-button.disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-/****Pill Button******/
-#sierra-button.pill{
-  border-radius: 50%;
-  min-width: unset;
-}
+#sierra-button {
+  padding: 0.5rem 1rem; 
+  border-radius: 4px; 
+  cursor: pointer;
+  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, opacity 0.3s ease-in-out;
+  min-width: 100px;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  gap: 10px;
+}
+#sierra-button:hover{
+  opacity: 0.8;
+}
+#sierra-button i{
+  font-size: 0.9rem;
+}
+/*********Button Variants*************************/
+.sierra-button-contained {
+  color: var(--button-text);
+}
+.sierra-button-outlined {
+  border-width: 1px;
+  border-style: solid;
+}
+
+/*********Contained Button Colors*************************/
+.sierra-button-contained-primary {
+  background-color: var(--primary-bg);
+}
+.sierra-button-contained-warning {
+  background-color: var(--warning-bg);
+}
+.sierra-button-contained-error {
+  background-color: var(--error-bg);
+}
+/*********Outlined Button Colors*************************/
+.sierra-button-outlined-primary {
+  border-color: var(--primary-bg);
+  color: var(--primary-bg);
+}
+.sierra-button-outlined-warning {
+  border-color: var(--warning-bg);
+  color: var(--warning-bg);
+}
+.sierra-button-outlined-error {
+  border-color: var(--error-bg);
+  color: var(--error-bg);
+}
+
+/*****Disabled********/
+#sierra-button.disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+/****Pill Button******/
+#sierra-button.pill{
+  border-radius: 50%;
+  min-width: unset;
+}

package/dist/components/Core/others/Button/default/button.svelte

@@ -1,125 +1,125 @@
-<script lang="ts">
-	import { CircularProgress, buttonRipple } from '../../../../../index.js';
-
-	type _variant = 'contained' | 'outlined';
-	type _color = 'primary' | 'warning' | 'error';
-	type _buttonType = 'button' | 'submit' | 'reset';
-
-	const {
-		variant = 'contained' as _variant,
-		color = 'primary' as _color,
-    	type = 'button' as _buttonType,
-		title = '',
-		pill = false,
-		spinner = 20,
-		thickness = 2,
-		disabled = false,
-		isLoading = false,
-		html2canvas_ignore = 'false',
-		startIcon = '',
-		endIcon = '',
-		style = '',
-    	children = null,
-		...rest
-	} = $props();
-
-	const name = 'sierra-button';
-	const buttonClasses = $derived(() => {
-		let classes = '';
-		if (variant) classes += `${name}-${variant}`;
-		if (variant === 'contained') {
-			classes += ` ${name}-contained-${color}`;
-		} else if (variant === 'outlined') {
-			classes += ` ${name}-outlined-${color}`;
-		}
-		if (style) classes += ` ${style}`;
-		return classes;
-	});
-</script>
-
-<style>#sierra-button {
-  padding: 0.5rem 1rem; 
-  border-radius: 4px; 
-  cursor: pointer;
-  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, opacity 0.3s ease-in-out;
-  min-width: 100px;
-  display: flex;
-  justify-content: space-evenly;
-  align-items: center;
-  gap: 10px;
-}
-#sierra-button:hover{
-  opacity: 0.8;
-}
-#sierra-button i{
-  font-size: 0.9rem;
-}
-/*********Button Variants*************************/
-.sierra-button-contained {
-  color: var(--button-text);
-}
-.sierra-button-outlined {
-  border-width: 1px;
-  border-style: solid;
-}
-/*********Contained Button Colors*************************/
-.sierra-button-contained-primary {
-  background-color: var(--primary-bg);
-}
-.sierra-button-contained-warning {
-  background-color: var(--warning-bg);
-}
-.sierra-button-contained-error {
-  background-color: var(--error-bg);
-}
-/*********Outlined Button Colors*************************/
-.sierra-button-outlined-primary {
-  border-color: var(--primary-bg);
-  color: var(--primary-bg);
-}
-.sierra-button-outlined-warning {
-  border-color: var(--warning-bg);
-  color: var(--warning-bg);
-}
-.sierra-button-outlined-error {
-  border-color: var(--error-bg);
-  color: var(--error-bg);
-}
-/*****Disabled********/
-#sierra-button.disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-/****Pill Button******/
-#sierra-button.pill{
-  border-radius: 50%;
-  min-width: unset;
-}
-</style>
-
-<button
-	id={name}
-	{...rest}
-	use:buttonRipple
-	data-html2canvas-ignore={html2canvas_ignore}
-	class:pill={pill}
-	class:disabled={isLoading || disabled}
-	class={buttonClasses()}
-	disabled={isLoading || disabled}
-	type={type}
-	title={title}
-	onclick={(e: MouseEvent) => {
-		rest.onclick?.(e);
-	}}
->
-	{#if startIcon}
-		<i class="fa {startIcon}"></i>
-	{/if}
-	{@render children?.()}
-	{#if endIcon}
-		<i class="fa {endIcon}"></i>
-	{/if}
-	{#if isLoading}
-		<CircularProgress size={spinner} thickness={thickness} />
-	{/if}
+<script lang="ts">
+	import { CircularProgress, buttonRipple } from '../../../../../index.js';
+
+	type _variant = 'contained' | 'outlined';
+	type _color = 'primary' | 'warning' | 'error';
+	type _buttonType = 'button' | 'submit' | 'reset';
+
+	const {
+		variant = 'contained' as _variant,
+		color = 'primary' as _color,
+    	type = 'button' as _buttonType,
+		title = '',
+		pill = false,
+		spinner = 20,
+		thickness = 2,
+		disabled = false,
+		isLoading = false,
+		html2canvas_ignore = 'false',
+		startIcon = '',
+		endIcon = '',
+		style = '',
+    	children = null,
+		...rest
+	} = $props();
+
+	const name = 'sierra-button';
+	const buttonClasses = $derived(() => {
+		let classes = '';
+		if (variant) classes += `${name}-${variant}`;
+		if (variant === 'contained') {
+			classes += ` ${name}-contained-${color}`;
+		} else if (variant === 'outlined') {
+			classes += ` ${name}-outlined-${color}`;
+		}
+		if (style) classes += ` ${style}`;
+		return classes;
+	});
+</script>
+
+<style>#sierra-button {
+  padding: 0.5rem 1rem; 
+  border-radius: 4px; 
+  cursor: pointer;
+  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, opacity 0.3s ease-in-out;
+  min-width: 100px;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  gap: 10px;
+}
+#sierra-button:hover{
+  opacity: 0.8;
+}
+#sierra-button i{
+  font-size: 0.9rem;
+}
+/*********Button Variants*************************/
+.sierra-button-contained {
+  color: var(--button-text);
+}
+.sierra-button-outlined {
+  border-width: 1px;
+  border-style: solid;
+}
+/*********Contained Button Colors*************************/
+.sierra-button-contained-primary {
+  background-color: var(--primary-bg);
+}
+.sierra-button-contained-warning {
+  background-color: var(--warning-bg);
+}
+.sierra-button-contained-error {
+  background-color: var(--error-bg);
+}
+/*********Outlined Button Colors*************************/
+.sierra-button-outlined-primary {
+  border-color: var(--primary-bg);
+  color: var(--primary-bg);
+}
+.sierra-button-outlined-warning {
+  border-color: var(--warning-bg);
+  color: var(--warning-bg);
+}
+.sierra-button-outlined-error {
+  border-color: var(--error-bg);
+  color: var(--error-bg);
+}
+/*****Disabled********/
+#sierra-button.disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+/****Pill Button******/
+#sierra-button.pill{
+  border-radius: 50%;
+  min-width: unset;
+}
+</style>
+
+<button
+	id={name}
+	{...rest}
+	use:buttonRipple
+	data-html2canvas-ignore={html2canvas_ignore}
+	class:pill={pill}
+	class:disabled={isLoading || disabled}
+	class={buttonClasses()}
+	disabled={isLoading || disabled}
+	type={type}
+	title={title}
+	onclick={(e: MouseEvent) => {
+		rest.onclick?.(e);
+	}}
+>
+	{#if startIcon}
+		<i class="fa {startIcon}"></i>
+	{/if}
+	{@render children?.()}
+	{#if endIcon}
+		<i class="fa {endIcon}"></i>
+	{/if}
+	{#if isLoading}
+		<CircularProgress size={spinner} thickness={thickness} />
+	{/if}
 </button>