hamzus-ui 0.0.134 → 0.0.136

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

@@ -0,0 +1,111 @@
+<script>
+	import ScrollArea from '../ScrollArea/ScrollArea.svelte';
+	import Button from '../Button/Button.svelte';
+	import * as DropdownMenu from '../DropdownMenu';
+
+	export let name = '';
+	export let label = '';
+	export let value = '';
+	export let variant = '';
+	export let onChange = undefined;
+	export let required = false;
+
+	let targetYear = '';
+
+
+	const yearList = getYearList();
+
+	function getYearList(startYear = 1997) {
+		const currentYear = new Date().getFullYear();
+		return Array.from({ length: currentYear - startYear + 1 }, (_, i) => currentYear - i);
+	}
+
+	function handleSelectYear(newValue) {
+		targetYear = newValue;
+
+		checkIfComplete();
+	}
+
+	function checkIfComplete() {
+		if (!targetYear) {
+			value = '';
+			return;
+		}
+		value = `${targetYear}`;
+
+		if (onChange !== undefined) {
+			onChange(value);
+		}
+	}
+</script>
+
+
+<div class="date-input-container {variant === "collapse" ? "collapse" : ""}">
+	{#if label}
+		<h5>
+            {label}
+            {#if required}
+                <span style="color:var(--red)">*</span>
+            {/if}
+        </h5>
+	{/if}
+	<div class="date-input">
+		<DropdownMenu.Root triggerFullWidth direction="bottom-left">
+			<DropdownMenu.Trigger slot="trigger">
+				<Button style="width:100%;" variant="outline">
+                    <input class="date-input-value" {required} type="text" style="display: none;" {name} {value} />
+					<h4>{targetYear || 'aaaa'}</h4>
+				</Button>
+			</DropdownMenu.Trigger>
+			<DropdownMenu.Content slot="content" width="var(--hamzus-tigger-width)">
+				<div class="content">
+					<ScrollArea proximity={10} style="max-height:350px;">
+						{#each yearList as year}
+							<Button
+								onClick={() => {
+									handleSelectYear(year);
+								}}
+								style="width:100%;"
+								variant="ghost"
+								><h4 style={targetYear == year ? 'color:var(--accent);' : ''}>{year}</h4></Button
+							>
+						{/each}
+					</ScrollArea>
+				</div>
+			</DropdownMenu.Content>
+		</DropdownMenu.Root>
+	</div>
+</div>
+
+<style>
+    .date-input-container.collapse {
+		display: flex;
+		flex-direction: column;
+		padding: var(--pad-s);
+		background-color: var(--bg-2);
+		border-radius: var(--radius-l);
+    }
+    .date-input-container.collapse .date-input {
+        padding: 0px;
+    }
+	.date-input {
+		display: flex;
+		flex-direction: column;
+		padding: var(--pad-s);
+		background-color: var(--bg-2);
+		border-radius: var(--radius-l);
+	}
+
+	.date-input:hover {
+		background-color: var(--bg-2);
+	}
+	.content {
+		display: flex;
+		max-height: 350px;
+	}
+
+    :global(button:has(.date-input-value:user-invalid)) {
+        border: 1px solid var(--red);
+        background-color: var(--red-b);
+    }
+</style>