@sierra-95/svelte-scaffold 1.0.6 → 1.0.8

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

@@ -1,10 +1,30 @@
-<a href={link} 
-    aria-label="button" 
+<script lang="ts">
+    type _buttonType = 'button' | 'submit' | 'reset';
+    const {
+        back = "back",
+        front = "front",
+        bgFront = "var(--primary-bg)",
+        bgBack = "var(--primary-bg)",
+        color = "var(--button-text)",
+        title = "",
+        type = 'button' as _buttonType, 
+        disabled = false,
+        ...rest
+    } = $props();
+</script>
+<button 
+    type={type}
+    title={title}
+    disabled={disabled}
+    aria-label="Flip button" 
     class="btn-flip" 
     data-back={back} 
     data-front={front}
     style="--bg-front: {bgFront}; --bg-back: {bgBack}; --text-color: {color}"
-></a>
+    onclick={(e: MouseEvent) => {
+		rest.onclick?.(e);
+	}} 
+></button>
 <style>.btn-flip {
   position: relative;
   display: inline-block;
@@ -57,13 +77,3 @@
   transform: translateY(0) rotateX(0);
 }
 </style>
-<script>
-    const {
-        link = "#",
-        back = "back",
-        front = "front",
-        bgFront = "var(--primary-bg)",
-        bgBack = "var(--primary-bg)",
-        color = "var(--button-text)",
-    } = $props();
-</script>

package/dist/components/Core/others/Button/Flip/button.svelte.d.ts

@@ -1,21 +1,12 @@
-export default Button;
-type Button = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<$$ComponentProps>): void;
-};
 declare const Button: import("svelte").Component<{
-    link?: string;
     back?: string;
     front?: string;
     bgFront?: string;
     bgBack?: string;
     color?: string;
-}, {}, "">;
-type $$ComponentProps = {
-    link?: string;
-    back?: string;
-    front?: string;
-    bgFront?: string;
-    bgBack?: string;
-    color?: string;
-};
+    title?: string;
+    type?: "button" | "submit" | "reset";
+    disabled?: boolean;
+} & Record<string, any>, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

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

@@ -2,17 +2,21 @@
   import { onMount } from 'svelte';
   import './button.css';
 
+  type _buttonType = 'button' | 'submit' | 'reset';
   const {
     text = "Hover me",
-    link = "#",
     bg = "var(--primary-bg)",
-    color = "var(--text)"
+    color = "var(--text)",
+    title = "",
+    type = 'button' as _buttonType, 
+    disabled = false,
+    ...rest
   } = $props();
 
   let scrolling = $state(false);
 
   let container: HTMLDivElement;
-  let marquee: HTMLAnchorElement;
+  let marquee: HTMLButtonElement;
 
   let containerWidth = 0;
   let textWidth = 0;
@@ -37,9 +41,18 @@
   onmouseleave={() => scrolling = false}
   style="--border-color: {bg}; --text-color: {color}"
 >
-  <a href={link} class="marquee {scrolling ? 'scrolling' : ''}" bind:this={marquee}>
+  <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>
-  </a>
+  </button>
 </div>

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

@@ -1,9 +1,11 @@
 import './button.css';
 declare const Button: import("svelte").Component<{
     text?: string;
-    link?: string;
     bg?: string;
     color?: string;
-}, {}, "">;
+    title?: string;
+    type?: "button" | "submit" | "reset";
+    disabled?: boolean;
+} & Record<string, any>, {}, "">;
 type Button = ReturnType<typeof Button>;
 export default Button;

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

@@ -13,9 +13,6 @@
   color: var(--text-color);
   transition: color 0.4s ease;
 }
-a{
-    text-decoration: none;
-}
 /* Swipe layer */
 .swipe-btn::before {
   content: '';

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

@@ -1,8 +1,28 @@
-<a 
+<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" 
-    href={link}
     style="--btn-color: {bg}; --text-color: {color}"
->{text}</a>
+    onclick={(e: MouseEvent) => {
+		rest.onclick?.(e);
+	}} 
+>{text}</button>
 <style>.swipe-btn {
   position: relative;
   display: block;
@@ -18,9 +38,6 @@
   color: var(--text-color);
   transition: color 0.4s ease;
 }
-a{
-    text-decoration: none;
-}
 /* Swipe layer */
 .swipe-btn::before {
   content: '';
@@ -38,12 +55,4 @@ a{
 .swipe-btn:hover {
   color: var(--button-text);
 }
-</style>
-<script>
-    const {
-        link = "#",
-        text = "Button",
-        bg = "var(--primary-bg)",
-        color = "var(--text)"
-    } = $props();
-</script>
+</style>

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

@@ -1,17 +1,10 @@
-export default Button;
-type Button = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<$$ComponentProps>): void;
-};
 declare const Button: import("svelte").Component<{
-    link?: string;
     text?: string;
     bg?: string;
     color?: string;
-}, {}, "">;
-type $$ComponentProps = {
-    link?: string;
-    text?: string;
-    bg?: string;
-    color?: string;
-};
+    title?: string;
+    type?: "button" | "submit" | "reset";
+    disabled?: boolean;
+} & Record<string, any>, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

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

@@ -58,20 +58,3 @@
   border-radius: 50%;
   min-width: unset;
 }
-
-.ripple {
-  position: relative;
-  overflow: hidden; /* IMPORTANT */
-}
-
-.ripple::after {
-  content: '';
-  position: absolute;
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  pointer-events: none;
-  transform: scale(0);
-  opacity: 0.4;
-  background: currentColor;
-}

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

@@ -95,21 +95,6 @@
   border-radius: 50%;
   min-width: unset;
 }
-.ripple {
-  position: relative;
-  overflow: hidden; /* IMPORTANT */
-}
-.ripple::after {
-  content: '';
-  position: absolute;
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  pointer-events: none;
-  transform: scale(0);
-  opacity: 0.4;
-  background: currentColor;
-}
 </style>
 
 <button

package/dist/components/Core/others/Progress/CustomProgress/customProgress.svelte

@@ -2,7 +2,7 @@
     import { onMount, onDestroy } from "svelte";
     let {
         value = $bindable(0),
-        height = '10px',
+        height = '5px',
         radius = '8px',
         color = 'var(--primary-bg)', 
         useTimeout = false,

package/dist/components/Modules/Editor/styles/controls.css

@@ -57,10 +57,6 @@
   color: var(--background);
   background-color: var(--text);
 }
-#editor #controls button:disabled{
-  opacity: 0.5;
-  cursor: not-allowed;
-}
 #editor #controls button:hover:not(.active):not(#sierra-button) {
   color: var(--primary-bg);
 }

package/dist/components/Modules/FilePicker/cloudStore.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { onMount } from 'svelte';
-    import { fileInputStore, User, isLoggedIn, setToastMessage } from '../../../index.js';
+    import { fileInputStore, User, isLoggedIn, setToastMessage, buttonRipple } from '../../../index.js';
     import Previews from './previews.svelte';
 
     export let processing: boolean;
@@ -78,6 +78,7 @@
     <nav style="display: flex; flex-direction: column; gap: 0.5rem; padding-top: 1rem; background-color: var(--background); border-bottom-left-radius:5px;">
         {#each tabs as tab}
             <button 
+                use:buttonRipple
                 on:click={() => 
                     fileInputStore.update(store =>({
                         ...store,

package/dist/global.css

@@ -217,4 +217,26 @@ select option {
 
 ::-webkit-scrollbar-thumb:hover {
   background: var(--scroll-bar-thumb-hover);
+}
+
+/**Button Ripple Effect */
+button:disabled{
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+.ripple {
+  position: relative;
+  overflow: hidden; /* IMPORTANT */
+}
+
+.ripple::after {
+  content: '';
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  pointer-events: none;
+  transform: scale(0);
+  opacity: 0.4;
+  background: currentColor;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sierra-95/svelte-scaffold",
-	"version": "1.0.6",
+	"version": "1.0.8",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",