v0.9.14

shinokada · shinokada · commit e197502ee911 · 2024-09-22T12:32:40.000+02:00
diff --git a/.changeset/orange-foxes-compete.md b/.changeset/orange-foxes-compete.md
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.9.14
+
+### Patch Changes
+
+- feat: modal component and page ([`47c51b8ddbbda5209099f2b88636a05e0218d398`](https://github.com/shinokada/svelte-5-ui-lib/commit/47c51b8ddbbda5209099f2b88636a05e0218d398))
+
 ## 0.9.13
 
 ### Patch Changes
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "svelte-5-ui-lib",
-  "version": "0.9.13",
+  "version": "0.9.14",
   "description": "A UI library for Svelte 5.",
   "license": "MIT",
   "main": "dist/index.js",
@@ -351,6 +351,10 @@
       "types": "./dist/list-group/ListgroupItem.svelte.d.ts",
       "svelte": "./dist/list-group/ListgroupItem.svelte"
     },
+    "./Modal.svelte": {
+      "types": "./dist/modal/Modal.svelte.d.ts",
+      "svelte": "./dist/modal/Modal.svelte"
+    },
     "./NavBrand.svelte": {
       "types": "./dist/nav/NavBrand.svelte.d.ts",
       "svelte": "./dist/nav/NavBrand.svelte"
diff --git a/src/lib/forms/input/Input.svelte b/src/lib/forms/input/Input.svelte
@@ -25,7 +25,7 @@
     </div>
   {/if}
   {#if children}
-    {@render children({ ...restProps, class:inputCls() })}
+    {@render children({ ...restProps, class: inputCls() })}
   {:else}
     <input {...restProps} bind:value class={inputCls({ class: className })} />
   {/if}
diff --git a/src/lib/modal/Modal.svelte b/src/lib/modal/Modal.svelte
@@ -7,15 +7,24 @@
 
   let { children, header, footer, title, modalStatus, dismissable = true, closeModal, divClass, contentClass, closeBtnClass, h3Class, headerClass, bodyClass, footerClass, outsideClose = true, size = 'md', backdrop = true, backdropClass, position = 'center', class: className, params = { duration: 100, easing: sineIn }, transition = fade, rounded = true, shadow = true, ...restProps }: Props = $props();
 
-  const { base, div, content, backdrop: backdropCls, header: headerCls, footer: footerCls, body, closeBtn, h3 } = $derived(
+  const {
+    base,
+    div,
+    content,
+    backdrop: backdropCls,
+    header: headerCls,
+    footer: footerCls,
+    body,
+    closeBtn,
+    h3
+  } = $derived(
     modal({
       position,
       size,
       backdrop,
       rounded
     })
   );
-  
 </script>
 
 {#if modalStatus}
@@ -41,13 +50,13 @@
               {@render header()}
             {/if}
             {#if dismissable}
-              <CloseButton onclick={closeModal} class={closeBtn({ class: closeBtnClass })}/>
+              <CloseButton onclick={closeModal} class={closeBtn({ class: closeBtnClass })} />
             {/if}
           </div>
         {/if}
         <div class={body({ class: bodyClass })}>
           {#if dismissable && !title && !header}
-            <CloseButton onclick={closeModal} class={closeBtn({ class: closeBtnClass })}/>
+            <CloseButton onclick={closeModal} class={closeBtn({ class: closeBtnClass })} />
           {/if}
           {@render children()}
         </div>
diff --git a/src/lib/modal/index.ts b/src/lib/modal/index.ts
@@ -10,9 +10,9 @@ type WidthType = VariantProps<typeof modal>['size'];
 type PosisionType = VariantProps<typeof modal>['position'];
 interface ModalProps extends HTMLAttributes<HTMLDivElement> {
   children: Snippet;
-  header?: Snippet,
-  footer?: Snippet,
-  title?: string,
+  header?: Snippet;
+  footer?: Snippet;
+  title?: string;
   modalStatus: boolean;
   dismissable?: boolean;
   closeModal?: () => void;
@@ -37,4 +37,3 @@ interface ModalProps extends HTMLAttributes<HTMLDivElement> {
 }
 
 export { Modal, modal, type ModalProps };
-
diff --git a/src/lib/modal/theme.ts b/src/lib/modal/theme.ts
@@ -10,40 +10,40 @@ export const modal = tv({
     footer: 'flex items-center p-4 md:p-5 space-x-3 rtl:space-x-reverse rounded-b-lg',
     body: 'p-4 md:p-5 space-y-4 flex-1 overflow-y-auto overscroll-contain',
     closeBtn: 'absolute top-3 end-2.5',
-    h3:'text-xl font-semibold text-gray-900 dark:text-white p-0'
+    h3: 'text-xl font-semibold text-gray-900 dark:text-white p-0'
   },
   variants: {
     // position: {
     //   fixed: { base: 'fixed' },
     //   absolute: { base: 'absolute' }
     // },
     position: {
-      'top-left': { base: 'justify-start items-start'},
-      'top-center': { base: 'justify-center items-start'},
-      'top-right': { base: 'justify-end items-start'},
-      'center-left': { base: 'justify-start items-center'},
-      'center': { base: 'justify-center items-center'},
-      'center-right': { base: 'justify-end items-center'},
-      'bottom-left': { base: 'justify-start items-end'},
-      'bottom-center': { base: 'justify-center items-end'},
-      'bottom-right': { base: 'justify-end items-end'},
-      'default': { base: 'justify-center items-center'}
+      'top-left': { base: 'justify-start items-start' },
+      'top-center': { base: 'justify-center items-start' },
+      'top-right': { base: 'justify-end items-start' },
+      'center-left': { base: 'justify-start items-center' },
+      center: { base: 'justify-center items-center' },
+      'center-right': { base: 'justify-end items-center' },
+      'bottom-left': { base: 'justify-start items-end' },
+      'bottom-center': { base: 'justify-center items-end' },
+      'bottom-right': { base: 'justify-end items-end' },
+      default: { base: 'justify-center items-center' }
     },
     size: {
       xs: { div: 'max-w-md' },
       sm: { div: 'max-w-lg' },
       md: { div: 'max-w-2xl' },
       lg: { div: 'max-w-4xl' },
-      xl: { div: 'max-w-7xl' },
+      xl: { div: 'max-w-7xl' }
     },
     backdrop: {
       true: { backdrop: 'bg-gray-900 bg-opacity-75' }
     },
     rounded: {
-      true: { content: 'rounded' },
+      true: { content: 'rounded' }
     },
     shadow: {
       true: { content: 'shadow-md' }
     }
-  },
-})
+  }
+});
diff --git a/src/lib/utils/CloseButton.svelte b/src/lib/utils/CloseButton.svelte
@@ -26,7 +26,7 @@
 @component
 [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
 ## Props
-@prop color = 'primary'
+@prop color = 'gray'
 @prop onclick
 @prop name = 'Close'
 @prop ariaLabel
diff --git a/src/routes/component-data/CloseButton.json b/src/routes/component-data/CloseButton.json
@@ -1 +1 @@
-{"name":"CloseButton","props":[["color","primary"],["onclick",""],["name","Close"],["ariaLabel",""],["size","md"],["href",""],["class: className",""],["...restProps",""]]}
+{"name":"CloseButton","props":[["color","gray"],["onclick",""],["name","Close"],["ariaLabel",""],["size","md"],["href",""],["class: className",""],["...restProps",""]]}
diff --git a/src/routes/component-data/Modal.json b/src/routes/component-data/Modal.json
@@ -0,0 +1 @@
+{"name":"Modal","props":[]}
diff --git a/src/routes/components/modal/+page.svelte b/src/routes/components/modal/+page.svelte
@@ -28,7 +28,7 @@
     { name: 'Disable outsideclose', component: ExampleComponents.DisableOutsideclose },
     { name: 'Crypto wallet', component: ExampleComponents.CryptoWallet },
     { name: 'Header snippet', component: ExampleComponents.HeaderSnippet },
-    { name: 'Footer snippet', component: ExampleComponents.FooterSnippet },
+    { name: 'Footer snippet', component: ExampleComponents.FooterSnippet }
   ];
   let selectedExample = $state(exampleArr[0].name);
   let svelteCode = $derived(getExampleFileName(selectedExample, exampleArr));
@@ -55,15 +55,15 @@
   let backdrop = $state(true);
   const changeBackdrop = () => {
     backdrop = !backdrop;
-  }
+  };
   let outsideClose = $state(true);
   const changeOutsideClose = () => {
     outsideClose = !outsideClose;
-  }
+  };
   let rounded = $state(true);
   const changeRounded = () => {
     rounded = !rounded;
-  }
+  };
 
   // transition
   // let transitionStatus = $state(false);
@@ -89,7 +89,7 @@
       if (modalSize !== 'md') props.push(`size="${modalSize}"`);
       if (!backdrop) props.push('backdrop={false}');
       if (!outsideClose) props.push('outsideClose={false}');
-      if (!rounded) props.push('rounded={false}'); 
+      if (!rounded) props.push('rounded={false}');
       if (modalPosition !== 'default') props.push(`position="${modalPosition}"`);
 
       if (currentTransition !== transitions[0]) {
@@ -148,10 +148,8 @@ Modal content
     <div class="flex justify-center">
       <Button onclick={interactiveModalExample.toggle}>Default modal</Button>
     </div>
-      
-    <Modal title="Terms of Service" size={modalSize} {backdrop} 
-    {outsideClose} {rounded} position={modalPosition} transition={currentTransition.transition} params={currentTransition.params}
-    modalStatus={interactiveModalStatus} closeModal={closeInteractiveModal}>
+
+    <Modal title="Terms of Service" size={modalSize} {backdrop} {outsideClose} {rounded} position={modalPosition} transition={currentTransition.transition} params={currentTransition.params} modalStatus={interactiveModalStatus} closeModal={closeInteractiveModal}>
       <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident odit quis fugit beatae, veritatis minus cupiditate ea numquam facere iusto vitae sequi, ipsum ducimus quo eaque illum. Eveniet, dolorem autem.</p>
     </Modal>
   </div>
diff --git a/src/routes/components/modal/examples/CryptoWallet.svelte b/src/routes/components/modal/examples/CryptoWallet.svelte
@@ -19,44 +19,44 @@
   <Button onclick={modalExample.toggle}>Pop-up modal</Button>
 </div>
 
-<Modal title="Connect wallet"   {modalStatus} {closeModal}  size="xs">
+<Modal title="Connect wallet" {modalStatus} {closeModal} size="xs">
   <p class="text-sm font-normal text-gray-500 dark:text-gray-400">Connect with one of our available wallet providers or create a new one.</p>
   <ul class="my-4 space-y-3">
     <li>
-      <a href="/" class="flex items-center p-3 text-base font-bold text-gray-900 bg-gray-50 rounded-lg hover:bg-gray-100 group hover:shadow dark:bg-gray-600 dark:hover:bg-gray-500 dark:text-white">
+      <a href="/" class="group flex items-center rounded-lg bg-gray-50 p-3 text-base font-bold text-gray-900 hover:bg-gray-100 hover:shadow dark:bg-gray-600 dark:text-white dark:hover:bg-gray-500">
         <MetaMask />
-        <span class="flex-1 ms-3 whitespace-nowrap">MetaMask</span>
-        <span class="inline-flex items-center justify-center px-2 py-0.5 ms-3 text-xs font-medium text-gray-500 bg-gray-200 rounded dark:bg-gray-700 dark:text-gray-400"> Popular </span>
+        <span class="ms-3 flex-1 whitespace-nowrap">MetaMask</span>
+        <span class="ms-3 inline-flex items-center justify-center rounded bg-gray-200 px-2 py-0.5 text-xs font-medium text-gray-500 dark:bg-gray-700 dark:text-gray-400">Popular</span>
       </a>
     </li>
     <li>
-      <a href="/" class="flex items-center p-3 text-base font-bold text-gray-900 bg-gray-50 rounded-lg hover:bg-gray-100 group hover:shadow dark:bg-gray-600 dark:hover:bg-gray-500 dark:text-white">
+      <a href="/" class="group flex items-center rounded-lg bg-gray-50 p-3 text-base font-bold text-gray-900 hover:bg-gray-100 hover:shadow dark:bg-gray-600 dark:text-white dark:hover:bg-gray-500">
         <CoinbaseWallet />
-        <span class="flex-1 ms-3 whitespace-nowrap">Coinbase Wallet</span>
+        <span class="ms-3 flex-1 whitespace-nowrap">Coinbase Wallet</span>
       </a>
     </li>
     <li>
-      <a href="/" class="flex items-center p-3 text-base font-bold text-gray-900 bg-gray-50 rounded-lg hover:bg-gray-100 group hover:shadow dark:bg-gray-600 dark:hover:bg-gray-500 dark:text-white">
+      <a href="/" class="group flex items-center rounded-lg bg-gray-50 p-3 text-base font-bold text-gray-900 hover:bg-gray-100 hover:shadow dark:bg-gray-600 dark:text-white dark:hover:bg-gray-500">
         <OperaWallet />
-        <span class="flex-1 ms-3 whitespace-nowrap">Opera Wallet</span>
+        <span class="ms-3 flex-1 whitespace-nowrap">Opera Wallet</span>
       </a>
     </li>
     <li>
-      <a href="/" class="flex items-center p-3 text-base font-bold text-gray-900 bg-gray-50 rounded-lg hover:bg-gray-100 group hover:shadow dark:bg-gray-600 dark:hover:bg-gray-500 dark:text-white">
+      <a href="/" class="group flex items-center rounded-lg bg-gray-50 p-3 text-base font-bold text-gray-900 hover:bg-gray-100 hover:shadow dark:bg-gray-600 dark:text-white dark:hover:bg-gray-500">
         <WalletConnect />
-        <span class="flex-1 ms-3 whitespace-nowrap">WalletConnect</span>
+        <span class="ms-3 flex-1 whitespace-nowrap">WalletConnect</span>
       </a>
     </li>
     <li>
-      <a href="/" class="flex items-center p-3 text-base font-bold text-gray-900 bg-gray-50 rounded-lg hover:bg-gray-100 group hover:shadow dark:bg-gray-600 dark:hover:bg-gray-500 dark:text-white">
+      <a href="/" class="group flex items-center rounded-lg bg-gray-50 p-3 text-base font-bold text-gray-900 hover:bg-gray-100 hover:shadow dark:bg-gray-600 dark:text-white dark:hover:bg-gray-500">
         <Fortmatic />
-        <span class="flex-1 ms-3 whitespace-nowrap">Fortmatic</span>
+        <span class="ms-3 flex-1 whitespace-nowrap">Fortmatic</span>
       </a>
     </li>
   </ul>
   <div>
     <a href="/" class="inline-flex items-center text-xs font-normal text-gray-500 hover:underline dark:text-gray-400">
-      <QuestionCircleOutline class="w-3 h-3 me-2" /> Why do I need to connect with my wallet?
+      <QuestionCircleOutline class="me-2 h-3 w-3" /> Why do I need to connect with my wallet?
     </a>
   </div>
-</Modal>
+</Modal>
diff --git a/src/routes/components/modal/examples/Default.svelte b/src/routes/components/modal/examples/Default.svelte
@@ -15,4 +15,4 @@
 <Modal title="Terms of Service" {modalStatus} {closeModal}>
   <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.</p>
   <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.</p>
-</Modal>
+</Modal>
diff --git a/src/routes/components/modal/examples/DisableOutsideclose.svelte b/src/routes/components/modal/examples/DisableOutsideclose.svelte
@@ -14,10 +14,10 @@
 
 <Modal title="Terms of Service" {modalStatus} {closeModal} outsideClose={false}>
   {#snippet footer()}
-  <Button on:click={() => alert('Handle "success"')}>I accept</Button>
-  <Button color="alternative" onclick={closeModal}>Decline</Button>
+    <Button on:click={() => alert('Handle "success"')}>I accept</Button>
+    <Button color="alternative" onclick={closeModal}>Decline</Button>
   {/snippet}
   <!-- Modal body -->
   <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.</p>
   <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.</p>
-</Modal>
+</Modal>
diff --git a/src/routes/components/modal/examples/FooterSnippet.svelte b/src/routes/components/modal/examples/FooterSnippet.svelte
@@ -20,4 +20,4 @@
   <!-- Modal body -->
   <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.</p>
   <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.</p>
-</Modal>
+</Modal>
diff --git a/src/routes/components/modal/examples/Form.svelte b/src/routes/components/modal/examples/Form.svelte
@@ -13,7 +13,7 @@
   <Button onclick={modalExample.toggle}>Pop-up modal</Button>
 </div>
 
-<Modal {modalStatus} {closeModal} size="xs"  class="w-full">
+<Modal {modalStatus} {closeModal} size="xs" class="w-full">
   <form class="flex flex-col space-y-6" action="#">
     <h3 class="mb-4 text-xl font-medium text-gray-900 dark:text-white">Sign in to our platform</h3>
     <Label class="space-y-2">
@@ -26,11 +26,11 @@
     </Label>
     <div class="flex items-start">
       <Checkbox>Remember me</Checkbox>
-      <a href="/" class="ms-auto text-sm text-primary-700 hover:underline dark:text-primary-500"> Lost password? </a>
+      <a href="/" class="ms-auto text-sm text-primary-700 hover:underline dark:text-primary-500">Lost password?</a>
     </div>
     <Button type="submit" class="w-full1">Login to your account</Button>
     <div class="text-sm font-medium text-gray-500 dark:text-gray-300">
-      Not registered? <a href="/" class="text-primary-700 hover:underline dark:text-primary-500"> Create account </a>
+      Not registered? <a href="/" class="text-primary-700 hover:underline dark:text-primary-500">Create account</a>
     </div>
   </form>
-</Modal>
+</Modal>
diff --git a/src/routes/components/modal/examples/HeaderSnippet.svelte b/src/routes/components/modal/examples/HeaderSnippet.svelte
@@ -14,9 +14,9 @@
 
 <Modal {modalStatus} {closeModal}>
   {#snippet header()}
-    <h2 class="text-xl weight-bold text-pink-700">Terms of Service</h2>
+    <h2 class="weight-bold text-xl text-pink-700">Terms of Service</h2>
   {/snippet}
   <!-- Modal body -->
   <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.</p>
   <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.</p>
-</Modal>
+</Modal>
diff --git a/src/routes/components/modal/examples/Popup.svelte b/src/routes/components/modal/examples/Popup.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { Modal, Button, uiHelpers } from '$lib';
-  import { ExclamationCircleOutline } from 'flowbite-svelte-icons'
+  import { ExclamationCircleOutline } from 'flowbite-svelte-icons';
   const modalExample = uiHelpers();
   let modalStatus = $state(false);
   const closeModal = modalExample.close;
@@ -13,11 +13,11 @@
   <Button onclick={modalExample.toggle}>Pop-up modal</Button>
 </div>
 
-<Modal size="xs" modalStatus={modalStatus} closeModal={closeModal}>
+<Modal size="xs" {modalStatus} {closeModal}>
   <div class="text-center">
-    <ExclamationCircleOutline class="mx-auto mb-4 text-gray-400 w-12 h-12 dark:text-gray-200" />
+    <ExclamationCircleOutline class="mx-auto mb-4 h-12 w-12 text-gray-400 dark:text-gray-200" />
     <h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">Are you sure you want to delete this product?</h3>
     <Button color="red" class="me-2">Yes, I'm sure</Button>
     <Button color="alternative">No, cancel</Button>
   </div>
-</Modal>
+</Modal>
diff --git a/src/routes/components/modal/examples/index.ts b/src/routes/components/modal/examples/index.ts
@@ -4,4 +4,4 @@ export { default as DisableOutsideclose } from './DisableOutsideclose.svelte';
 export { default as Form } from './Form.svelte';
 export { default as CryptoWallet } from './CryptoWallet.svelte';
 export { default as HeaderSnippet } from './HeaderSnippet.svelte';
-export { default as FooterSnippet } from './FooterSnippet.svelte';
+export { default as FooterSnippet } from './FooterSnippet.svelte';
diff --git a/src/routes/forms/input-field/examples/AdvancedUsage.svelte b/src/routes/forms/input-field/examples/AdvancedUsage.svelte
diff --git a/src/routes/forms/input-field/examples/index.ts b/src/routes/forms/input-field/examples/index.ts

Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-{"name":"CloseButton","props":[["color","primary"],["onclick",""],["name","Close"],["ariaLabel",""],["size","md"],["href",""],["class: className",""],["...restProps",""]]}`
	`1`	`+{"name":"CloseButton","props":[["color","gray"],["onclick",""],["name","Close"],["ariaLabel",""],["size","md"],["href",""],["class: className",""],["...restProps",""]]}`