@juspay/svelte-ui-components 1.3.0 → 1.5.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/Badge/Badge.svelte

@@ -39,7 +39,8 @@
     border-radius: var(--badge-img-border-radius, 6px);
     width: var(--badge-img-width, 64px);
     height: var(--badge-img-height, 64px);
-    object-fit: contain;
+    object-fit: var(--badge-object-fit, contain);
     box-shadow: var(--badge-img-icon-shadow, 0 0 0 0.5px #798fa54d);
+    background-color: var(--badge-img-background-color);
   }
 </style>

package/dist/CheckListItem/CheckListItem.svelte

@@ -12,10 +12,14 @@ function handleCheckboxClick(e) {
 
 <div class="container">
   <input type="checkbox" class="checkbox" bind:checked on:click={handleCheckboxClick} />
-  <span class="text">
-    <!-- eslint-disable-next-line -->
-    {@html text}
-  </span>
+  {#if $$slots.checkboxLabel}
+    <slot name="checkboxLabel" />
+  {:else}
+    <span class="text">
+      <!-- eslint-disable-next-line -->
+      {@html text}
+    </span>
+  {/if}
 </div>
 
 <style>
@@ -36,5 +40,9 @@ function handleCheckboxClick(e) {
     border: 5px solid red;
     height: var(--checkbox-height, 24px);
     width: var(--checkbox-width, 24px);
+    margin: var(--checkbox-margin);
+    padding: var(--checkbox-padding);
+    border-radius: var(--checkbox-border-radius);
+    visibility: var(--checkbox-visibility);
   }
 </style>

package/dist/CheckListItem/CheckListItem.svelte.d.ts

@@ -9,7 +9,9 @@ declare const __propDef: {
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        checkboxLabel: {};
+    };
 };
 export type CheckListItemProps = typeof __propDef.props;
 export type CheckListItemEvents = typeof __propDef.events;

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;

package/dist/Stepper/Step.svelte

@@ -0,0 +1,73 @@
+<script>import { createEventDispatcher } from "svelte";
+export let stepIndex;
+export let label;
+export let icon;
+const dispatch = createEventDispatcher();
+function handleStepClick() {
+  dispatch("handleStepClick", { selectedIndex: stepIndex });
+}
+</script>
+
+<div class="step" on:click={handleStepClick} role="button" tabindex="0" on:keydown>
+  {#if icon !== null}
+    <div class="step-icon-container">
+      <img class="step-icon" src={icon} alt="" />
+    </div>
+  {:else}
+    <div class="step-index-container">
+      <div class={'step-index-text'}>
+        {stepIndex}
+      </div>
+    </div>
+  {/if}
+  <div class={'step-text'}>
+    {label}
+  </div>
+  <div class={'separator'} />
+</div>
+
+<style>
+  .step {
+    display: flex;
+    flex-direction: var(--step-flex-direction, row);
+    align-items: center;
+  }
+
+  .step-index-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: var(--step-index-container-height, 30px);
+    width: var(--step-index-container-width, 30px);
+    border-radius: var(--step-index-container-radius, 50%);
+    background-color: var(--step-index-container-background-color, #798fa5cc);
+  }
+
+  .separator {
+    display: var(--separator-display, block);
+    height: var(--separator-height, 1px);
+    width: var(--separator-width, 50px);
+    margin: var(--separator-margin, 0px 12px 0px 12px);
+    background-image: var(
+      --separator-background-image,
+      repeating-linear-gradient(
+        to right,
+        var(--separator-background-image-color, #798fa5cc),
+        var(--separator-background-image-color, #798fa5cc) 6px,
+        transparent 6px,
+        transparent 10px
+      )
+    );
+  }
+
+  .step-text {
+    margin: var(--step-text-margin, 0px 0px 0px 12px);
+    font-size: var(--step-text-font-size, 12px);
+    color: var(--step-text-color, #798fa5cc);
+  }
+
+  .step-index-text {
+    font-size: var(--step-index-font-size, 14px);
+    color: var(--step-index-color, white);
+  }
+</style>

package/dist/Stepper/Step.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        stepIndex: number;
+        label: string;
+        icon: string | null;
+    };
+    events: {
+        keydown: KeyboardEvent;
+        handleStepClick: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type StepProps = typeof __propDef.props;
+export type StepEvents = typeof __propDef.events;
+export type StepSlots = typeof __propDef.slots;
+export default class Step extends SvelteComponent<StepProps, StepEvents, StepSlots> {
+}
+export {};

package/dist/Stepper/Stepper.svelte

@@ -0,0 +1,55 @@
+<script>import Step from "./Step.svelte";
+export let properties;
+</script>
+
+<div class="container">
+  {#each properties.steps as currentStep, stepIndex}
+    <div
+      class:active-step={properties.currentStepIndex === stepIndex}
+      class:completed-step={properties.currentStepIndex > stepIndex}
+      class="step-container"
+    >
+      <Step
+        on:handleStepClick
+        label={currentStep.label}
+        icon={currentStep.icon ?? null}
+        stepIndex={stepIndex + 1}
+      />
+    </div>
+  {/each}
+</div>
+
+<style>
+  .container {
+    display: flex;
+    flex-direction: var(--container-flex-direction, row);
+    align-items: center;
+  }
+
+  .step-container:last-child {
+    --separator-display: none;
+  }
+
+  .step-container {
+    display: flex;
+    align-items: center;
+  }
+
+  .active-step {
+    --step-text-color: var(--step-text-active-color, #2f3841);
+    --separator-background-image-color: var(--separator-background-image-active-color, #2f3841);
+    --step-index-container-background-color: var(
+      --step-index-container-active-background-color,
+      #2f3841
+    );
+  }
+
+  .completed-step {
+    --step-text-color: var(--step-text-completed-color, #24aa5a);
+    --separator-background-image-color: var(--separator-background-image-completed-color, #24aa5a);
+    --step-index-container-background-color: var(
+      --step-index-container-completed-background-color,
+      #24aa5a
+    );
+  }
+</style>

package/dist/Stepper/Stepper.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import type { StepperProperties } from './properties';
+declare const __propDef: {
+    props: {
+        properties: StepperProperties;
+    };
+    events: {
+        handleStepClick: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type StepperProps = typeof __propDef.props;
+export type StepperEvents = typeof __propDef.events;
+export type StepperSlots = typeof __propDef.slots;
+export default class Stepper extends SvelteComponent<StepperProps, StepperEvents, StepperSlots> {
+}
+export {};

package/dist/Stepper/properties.d.ts

@@ -0,0 +1,8 @@
+export type StepperProperties = {
+    steps: Array<Step>;
+    currentStepIndex: number;
+};
+export type Step = {
+    label: string;
+    icon?: string;
+};

package/dist/Stepper/properties.js

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -18,6 +18,8 @@ export { default as Toggle } from './Toggle/Toggle.svelte';
 export { default as Accordion } from './Accordion/Accordion.svelte';
 export { default as CheckListItem } from './CheckListItem/CheckListItem.svelte';
 export { default as Table } from './Table/Table.svelte';
+export { default as Stepper } from './Stepper/Stepper.svelte';
+export { default as Step } from './Stepper/Step.svelte';
 export type { ButtonProperties } from './Button/properties';
 export type { ModalProperties, ModalAlign, ModalSize } from './Modal/properties';
 export type { InputProperties } from './Input/properties';
@@ -36,6 +38,7 @@ export type { CarouselProperties } from './Carousel/properties';
 export type { BadgeProperties } from './Badge/properties';
 export type { BannerProperties } from './Banner/properties';
 export type { TableProperties } from './Table/properties';
+export type { StepperProperties } from './Stepper/properties';
 export { defaultIconProperties } from './Icon/properties';
 export { defaultButtonProperties } from './Button/properties';
 export { defaultModalProperties } from './Modal/properties';

package/dist/index.js

@@ -18,6 +18,8 @@ export { default as Toggle } from './Toggle/Toggle.svelte';
 export { default as Accordion } from './Accordion/Accordion.svelte';
 export { default as CheckListItem } from './CheckListItem/CheckListItem.svelte';
 export { default as Table } from './Table/Table.svelte';
+export { default as Stepper } from './Stepper/Stepper.svelte';
+export { default as Step } from './Stepper/Step.svelte';
 export { defaultIconProperties } from './Icon/properties';
 export { defaultButtonProperties } from './Button/properties';
 export { defaultModalProperties } from './Modal/properties';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@juspay/svelte-ui-components",
-  "version": "1.3.0",
+  "version": "1.5.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"
   },