@juspay/svelte-ui-components 1.2.0 → 1.4.0

package/README.md

@@ -41,11 +41,11 @@ All of the components can be easily imported from the 'svelte-ui-components' pac
 #### Example: Importing component from the package
 
 ```svelte
-<script>
-  import { Button } from '@juspay/svelte-ui-components';
+<script lang="ts">
+  import { Button, defaultButtonProperties } from '@juspay/svelte-ui-components';
 </script>
 
-<Button>Click me</Button>
+<Button properties={{ ...defaultButtonProperties, text: 'Click' }} />
 ```
 
 ### Customizing the components
@@ -65,7 +65,7 @@ There are two ways to customize the component.
 
 #### Example: Customizing the component
 
-````svelte
+```svelte
 <script lang="ts">
   import {
     Button,
@@ -83,7 +83,6 @@ There are two ways to customize the component.
   }
 </script>
 
-```svelte
 <div class="form">
   <Button properties={buttonProperties} on:click={handleSubmitClick} />
 </div>
@@ -92,10 +91,10 @@ There are two ways to customize the component.
   .form {
     --button-color: black;
     --button-text-color: white;
-    // and many more
+    /* Other styling values */
   }
 </style>
-````
+```
 
 ### Contributing
 

package/dist/Img/Img.svelte

@@ -0,0 +1,33 @@
+<script>export let src;
+export let alt;
+export let fallback = null;
+function handleFallback() {
+  if (fallback !== null) {
+    src = fallback;
+  }
+}
+</script>
+
+{#if typeof src === 'string' && typeof alt === 'string'}
+  <img {src} {alt} on:error|once={handleFallback} />
+{/if}
+
+<style>
+  img {
+    object-fit: var(--image-object-fit);
+    height: var(--image-height, 24px);
+    width: var(--image-width, 24px);
+    padding: var(--image-padding, 0px);
+    border-radius: var(--image-border-radius, 0px);
+    margin: var(--image-margin, 0px);
+    filter: var(--image-filter, none);
+    background: var(--image-background);
+    border: var(--image-border);
+    transition: var(--image-transition);
+  }
+
+  img:hover {
+    background: var(--image-hover-background, var(--image-background));
+    border: var(--image-hover-border, var(--image-border));
+  }
+</style>

package/dist/Img/Img.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        src: string;
+        alt: string;
+        fallback?: string | null | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ImgProps = typeof __propDef.props;
+export type ImgEvents = typeof __propDef.events;
+export type ImgSlots = typeof __propDef.slots;
+export default class Img extends SvelteComponent<ImgProps, ImgEvents, ImgSlots> {
+}
+export {};

package/dist/Input/Input.svelte

@@ -175,6 +175,7 @@ $: {
     resize: none;
     visibility: var(--input-visibility, visible);
     text-align: var(--input-text-align, left);
+    color: var(--input-text-color);
   }
 
   textarea:focus,

package/dist/ListItem/ListItem.svelte

@@ -1,5 +1,6 @@
 <script>import Accordion from "../Accordion/Accordion.svelte";
 import Loader from "../Loader/Loader.svelte";
+import Img from "../Img/Img.svelte";
 import { defaultListItemProperties } from "./properties";
 import { createEventDispatcher } from "svelte";
 const dispatch = createEventDispatcher();
@@ -55,7 +56,11 @@ function handleTopSectionClick() {
               role="button"
               tabindex="0"
             >
-              <img class="left-img" src={properties.leftImageUrl} alt="" />
+              <Img
+                src={properties.leftImageUrl}
+                alt=""
+                fallback={properties.leftImageFallbackUrl}
+              />
             </div>
           {/if}
           {#if $$slots.leftContent}
@@ -171,12 +176,39 @@ function handleTopSectionClick() {
 
   .left-content {
     display: flex;
+    --image-height: var(--list-item-left-image-height, 24px);
+    --image-width: var(--list-item-left-image-width, 24px);
+    --image-padding: var(--list-item-left-image-padding, 0px);
+    --image-border-radius: var(--list-item-left-image-border-radius, 0px);
+    --image-margin: var(--list-item-left-image-margin, 0px);
+    --image-filter: var(--list-item-left-image-filter, none);
+    --image-background: var(--list-item-left-image-background);
+    --image-border: var(--list-item-left-image-border);
+    --image-transition: var(--list-item-transition);
+    --image-object-fit: var(--list-item-left-image-object-fit);
+    --image-hover-background: var(
+      --list-item-left-image-hover-background,
+      var(--list-item-left-image-background)
+    );
+    --image-hover-border: var(
+      --list-item-left-image-hover-border,
+      var(--list-item-left-image-border)
+    );
   }
 
   .center-text {
     display: flex;
     flex-direction: column;
+    justify-content: var(--list-item-center-text-justify-content, flex-start);
     padding: var(--list-item-center-text-padding, 0px 20px);
+    color: var(--list-item-center-text-color, #2f3841);
+    font-size: var(--list-item-center-text-font-size, 12px);
+    font-weight: var(--list-item-center-text-font-weight, 300);
+    align-items: var(--list-item-center-text-vertical-align);
+    margin: var(--list-item-center-text-margin);
+    border: var(--list-item-center-text-border);
+    cursor: var(--list-item-center-text-cursor, pointer);
+    font-family: var(--list-item-center-text-font-family);
   }
 
   .center-content {
@@ -194,23 +226,6 @@ function handleTopSectionClick() {
     margin-top: 0;
   }
 
-  .left-img {
-    height: var(--list-item-left-image-height, 24px);
-    width: var(--list-item-left-image-width, 24px);
-    padding: var(--list-item-left-image-padding, 0px);
-    border-radius: var(--list-item-left-image-border-radius, 0px);
-    margin: var(--list-item-left-image-margin, 0px);
-    filter: var(--list-item-left-image-filter, none);
-    background: var(--list-item-left-image-background);
-    border: var(--list-item-left-image-border);
-    transition: var(--list-item-transition);
-  }
-
-  .left-img:hover {
-    background: var(--list-item-left-image-hover-background, var(--list-item-left-image-background));
-    border: var(--list-item-left-image-hover-border, var(--list-item-left-image-border));
-  }
-
   .right-img {
     height: var(--list-item-right-image-height, 18px);
     width: var(--list-item-right-image-width, 18px);
@@ -224,7 +239,10 @@ function handleTopSectionClick() {
   }
 
   .right-img:hover {
-    background: var(--list-item-right-image-hover-background, var(--list-item-right-image-background));
+    background: var(
+      --list-item-right-image-hover-background,
+      var(--list-item-right-image-background)
+    );
     border: var(--list-item-right-image-hover-border, var(--list-item-right-image-border));
   }
 

package/dist/ListItem/properties.d.ts

@@ -1,5 +1,6 @@
 export type ListItemProperties = {
     leftImageUrl: string | null;
+    leftImageFallbackUrl: string | null;
     rightImageUrl: string | null;
     label: string | null;
     useAccordion: boolean;

package/dist/ListItem/properties.js

@@ -1,5 +1,6 @@
 export const defaultListItemProperties = {
     leftImageUrl: null,
+    leftImageFallbackUrl: null,
     rightImageUrl: null,
     label: null,
     useAccordion: false,

package/dist/Modal/Modal.svelte

@@ -102,16 +102,13 @@ onDestroy(() => {
     bottom: 0;
     left: 0;
     right: 0;
-    width: 100vw;
-    height: 100vh;
+    width: var(--modal-width, 100vw);
+    height: var(--modal-height, 100vh);
     display: flex;
     flex-direction: column;
     z-index: var(--modal-z-index, 15);
     -webkit-tap-highlight-color: transparent;
-    margin-top: var(--margin-top, 0px);
-    margin-bottom: var(--margin-bottom, 0px);
-    margin-left: var(--margin-left, 0px);
-    margin-right: var(--margin-right, 0px);
+    margin: var(--modal-margin);
   }
 
   .overlay-active {
@@ -125,7 +122,7 @@ onDestroy(() => {
 
   .modal-content {
     pointer-events: auto;
-    background-color: var(--content-background-color, #ffffff);
+    background-color: var(--modal-content-background-color, #ffffff);
     cursor: auto;
     display: flex;
     flex-direction: column;
@@ -175,14 +172,15 @@ onDestroy(() => {
   .header {
     display: flex;
     background-color: var(--modal-header-background-color, #f6f7f9);
-    padding: 18px 20px;
+    padding: var(--modal-header-padding, 18px 20px);
+    border-radius: var(--modal-header-border-radius, 0px);
   }
 
   .header-text {
     display: flex;
     align-items: center;
     flex: 1;
-    font-size: 16px;
+    font-size: var(--header-text-size, 16px);
   }
 
   .header-left-img,
@@ -192,7 +190,7 @@ onDestroy(() => {
   }
 
   .header-left-img {
-    margin-right: 18px;
+    margin: var(--header-left-image-margin, 0px 18px 0px 0px);
     width: var(--header-left-image-width, 25px);
     height: var(--header-left-image-height, 25px);
   }

package/dist/Toolbar/Toolbar.svelte

@@ -74,10 +74,15 @@ function handleBackClick() {
   }
 
   .back {
-    height: 20px;
-    width: 20px;
-    padding: 20px 14px;
-    cursor: pointer;
+    height: var(--toolbar-back-button-height, 20px);
+    width: var(--toolbar-back-button-width, 20px);
+    padding: var(--toolbar-back-button-padding, 20px 14px);
+    cursor: var(--toolbar-back-button-cursor, pointer);
+  }
+
+  .back img {
+    height: var(--toolbar-back-image-height, 16px);
+    width: var(--toolbar-back-image-width, 16px);
   }
 
   .center-content {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@juspay/svelte-ui-components",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run package",
@@ -54,7 +54,7 @@
     "svelte-check": "^3.6.0",
     "tslib": "^2.6.2",
     "typescript": "^5.2.2",
-    "vite": "^4.5.0",
+    "vite": "^4.5.2",
     "vitest": "^0.34.6",
     "type-decoder": "^1.2.0"
   },