hamzus-ui 0.0.9 → 0.0.10

package/index.d.ts

@@ -2,9 +2,10 @@
 import type { SvelteComponentTyped } from "svelte";
 
 // button
-export class Button extends SvelteComponentTyped<any> {}
-export class IconButton extends SvelteComponentTyped<any> {}
+export { default as Button } from "./src/components/hamzus-ui/Button/Button.svelte"
+export { default as IconButton } from "./src/components/hamzus-ui/IconButton/IconButton.svelte"
 // text
+export class Chips extends SvelteComponentTyped<any> {}
 export class Tag extends SvelteComponentTyped<any> {}
 export class InfoCard extends SvelteComponentTyped<any> {}
 export class AlertCard extends SvelteComponentTyped<any> {}
@@ -16,6 +17,7 @@ export class Dialog extends SvelteComponentTyped<any> {}
 
 // form
 export class Input extends SvelteComponentTyped<any> {}
+export class DatePicker extends SvelteComponentTyped<any> {}
 
 
 export * as DropdownMenu from "./src/components/hamzus-ui/DropdownMenu";

package/index.js

@@ -2,6 +2,7 @@
 export { default as Button } from "./src/components/hamzus-ui/Button/Button.svelte"
 export { default as IconButton } from "./src/components/hamzus-ui/IconButton/IconButton.svelte"
 // text
+export { default as Chips } from "./src/components/hamzus-ui/Chips/Chips.svelte"
 export { default as Tag } from "./src/components/hamzus-ui/Tag/Tag.svelte"
 export { default as InfoCard } from "./src/components/hamzus-ui/InfoCard/InfoCard.svelte"
 export { default as AlertCard } from "./src/components/hamzus-ui/AlertCard/AlertCard.svelte"
@@ -11,6 +12,7 @@ export { default as Kbd } from "./src/components/hamzus-ui/KBD/KBD.svelte"
 export { default as Dialog } from "./src/components/hamzus-ui/Dialog/Dialog.svelte"
 // form
 export { default as Input } from "./src/components/hamzus-ui/Input/Input.svelte"
+export { default as DatePicker } from "./src/components/hamzus-ui/DatePicker/DatePicker.svelte"
 
 
 export * as DropdownMenu from "./src/components/hamzus-ui/DropdownMenu"

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "hamzus-ui",
-	"version": "0.0.9",
+	"version": "0.0.10",
 	"type": "module",
     "main": "index.js",
     "svelte": "index.js",

package/src/components/hamzus-ui/Chips/Chips.svelte

@@ -0,0 +1,26 @@
+<div class="chips h5">
+    <slot/>
+</div>
+<style>
+    .chips {
+        display: flex;
+        width: max-content;
+        align-items: center;
+        column-gap: var(--pad-m);
+        padding: var(--pad-xs) var(--pad-xl);
+        border-radius: var(--radius-xxl);
+        border: 1px solid var(--stroke);
+        background-color: var(--bg-1);
+        color: var(--font-2);
+    }
+    .chips > :global(*) {
+        color: var(--font-2);
+    }
+
+    .chips > :global(svg) {
+        width: 16px;
+    }
+    .chips > :global(svg path)  {
+        fill: var(--font-2);
+    }
+</style>

package/src/components/hamzus-ui/DatePicker/DatePicker.svelte

@@ -5,7 +5,9 @@
 	import { onMount } from 'svelte';
 
     export let value = ""
+    export let label = ""
     export let name = ""
+    export let required = false
 
 	const monthList = {
 		1: 'janvier',
@@ -23,9 +25,10 @@
 	};
 	const yearList = getYearList();
 
-    let monthInput;
+    let toggleDisplay;
+
+    let labelMonth = "selectionner une date";
 
-    let currentDay = null
 	let currentYear = new Date().getFullYear();
 	let currentMonth = new Date().getMonth() + 1;
 
@@ -110,68 +113,22 @@
     function handleUpdateValue(day) {
         const formatNumber = (num) => num.toString().padStart(2, '0');
 
-        currentDay = day
-
         value = `${currentYear}-${formatNumber(currentMonth)}-${formatNumber(day)}`
-    }
 
-    function handleChangeDayInput(event) {
-        const onlyNumbers = event.target.value.replace(/\D/g, '');
-
-        if (onlyNumbers.length === 0) {
-            currentDay = null
-            return
-        }
-
-        if (onlyNumbers === "0") {
-            currentDay = null
-            return
-        }
-
-        if (onlyNumbers.length === 1) {
-            currentDay = "0" + onlyNumbers
-            return
-        }
-
-        if (onlyNumbers.length === 3 && onlyNumbers.charAt(0) === "0") {
-            // prendre les deux dernier chiffre
-            currentDay = onlyNumbers.charAt(1) + onlyNumbers.charAt(onlyNumbers.length - 1)
-            monthInput.focus()
-            return
-        }
-
-
-        if (onlyNumbers.length === 3) {
-            // prendre le dernier chiffre et mettre un zero
-            currentDay = "0" + onlyNumbers.charAt(onlyNumbers.length - 1)
-            return
-        }
-        currentDay = onlyNumbers
-
-        console.log(currentDay);
-        
-    }
+        labelMonth = `${day} ${monthList[currentMonth]} ${currentYear}`
 
-    function handleChangeMonthInput(event) {
-        
+        toggleDisplay()
     }
 </script>
 
-<input type="hidden" {name} {value}>
-<h4>{value}</h4>
-
-<div class="group">
-
-<input type="text" bind:value={currentDay} placeholder="dd" on:input={handleChangeDayInput} class="cell p">
-<p>/</p>
-<input type="text" placeholder="mm" on:input={handleChangeMonthInput} bind:this={monthInput} class="cell p">
-
-</div>
-
-
-<DropdownMenu.Root>
+<div class="date-picker">
+    {#if label}
+        <h5>{label}</h5>
+    {/if}
+<DropdownMenu.Root triggerFullWidth bind:toggleDisplay>
 	<DropdownMenu.Trigger slot="trigger">
-		<IconButton variant="ghost">
+        <Button variant="outline" style="width:100%">
+            <input class="date-input" {required} type="date" {name} {value}>
             <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M8 5.75C7.59 5.75 7.25 5.41 7.25 5V2C7.25 1.59 7.59 1.25 8 1.25C8.41 1.25 8.75 1.59 8.75 2V5C8.75 5.41 8.41 5.75 8 5.75Z" fill="white" />
                 <path d="M16 5.75C15.59 5.75 15.25 5.41 15.25 5V2C15.25 1.59 15.59 1.25 16 1.25C16.41 1.25 16.75 1.59 16.75 2V5C16.75 5.41 16.41 5.75 16 5.75Z" fill="white" />
@@ -184,7 +141,8 @@
                 <path d="M20.5 9.83984H3.5C3.09 9.83984 2.75 9.49984 2.75 9.08984C2.75 8.67984 3.09 8.33984 3.5 8.33984H20.5C20.91 8.33984 21.25 8.67984 21.25 9.08984C21.25 9.49984 20.91 9.83984 20.5 9.83984Z" fill="white" />
                 <path d="M16 22.75H8C4.35 22.75 2.25 20.65 2.25 17V8.5C2.25 4.85 4.35 2.75 8 2.75H16C19.65 2.75 21.75 4.85 21.75 8.5V17C21.75 20.65 19.65 22.75 16 22.75ZM8 4.25C5.14 4.25 3.75 5.64 3.75 8.5V17C3.75 19.86 5.14 21.25 8 21.25H16C18.86 21.25 20.25 19.86 20.25 17V8.5C20.25 5.64 18.86 4.25 16 4.25H8Z" fill="white" />    
             </svg>
-        </IconButton>
+            {labelMonth}
+        </Button>
 	</DropdownMenu.Trigger>
 	<DropdownMenu.Content
 		slot="content"
@@ -254,25 +212,9 @@
 	</DropdownMenu.Content>
 </DropdownMenu.Root>
 
+</div>
 <style>
 
-    .group {
-        display: flex;
-        align-items: center;
-        column-gap: var(--pad-s);
-    }
-
-    .cell {
-        padding: var(--pad-xs);
-        border-radius: var(--radius-s);
-        width: 30px;
-    }
-    .cell:hover {
-        background-color: var(--bg-3);
-    }
-    .cell:focus{
-        background-color: var(--bg-1);
-    }
 
 	.month-selector {
 		display: flex;
@@ -289,7 +231,6 @@
 		background-color: var(--bg-2);
 	}
 
-	.calendar th > div,
 	.calendar td > div  {
 		display: flex;
         align-items: center;
@@ -323,4 +264,12 @@
         border-bottom-left-radius: var(--radius-l);
         border-bottom-right-radius: var(--radius-l);
     }
+
+    .date-input {
+        display: none;
+    }
+    :global(button:has(.date-input:user-invalid)) {
+        border: 1px solid var(--red);
+        background-color: var(--red-b);
+    }
 </style>

package/src/components/hamzus-ui/DropdownMenu/Root.svelte

@@ -45,7 +45,7 @@ import { onDestroy, onMount } from 'svelte';
         }
 	}
 
-	function toggleDisplay() {
+	export let toggleDisplay = () => {
 		if (display) {
 			// appliquer une animation
 			exit = true;

package/src/components/hamzus-ui/Input/Input.svelte

@@ -23,7 +23,7 @@
 	export let isLoading = false;
 	export let isVisible = false;
 	export let padding = '3px 10px';
-	export let borderRadius = '12px';
+	export let borderRadius = 'var(--radius-m)';
 	export let defaultBg = '--bg-2';
 	export let formatPattern = [];
 	import { onMount } from 'svelte';