feat: number range search property support

ADOFAI-gg · Jan 1, 2025 · 69f2189 · 69f2189
1 parent e004aae
commit 69f2189
Show file tree

Hide file tree

Showing 9 changed files with 282 additions and 159 deletions.
diff --git a/chromatic.config.json b/chromatic.config.json
@@ -1,5 +1,5 @@
 {
-  "onlyChanged": true,
-  "projectId": "Project:65f8173425f06f64d36562af",
-  "zip": true
+	"onlyChanged": true,
+	"projectId": "Project:65f8173425f06f64d36562af",
+	"zip": true
 }
diff --git a/package.json b/package.json
@@ -1,99 +1,99 @@
 {
-  "name": "@adofai-gg/ui",
-  "version": "0.0.0",
-  "type": "module",
-  "files": [
-    "dist"
-  ],
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "svelte": "./dist/index.js"
-    },
-    "./style-system/*": "./dist/stylesheets/system/*.scss",
-    "./globals.scss": "./dist/stylesheets/globals.scss"
-  },
-  "sideEffects": [
-    "**/*.css",
-    "**/*.scss"
-  ],
-  "scripts": {
-    "gen": "node scripts/generateGlobImports.mjs",
-    "check": "svelte-check --tsconfig ./tsconfig.json && tsc -p tsconfig.node.json",
-    "storybook": "pnpm gen && storybook dev -p 6006",
-    "build-storybook": "pnpm gen && storybook build",
-    "build": "pnpm gen && svelte-package",
-    "prepack": "pnpm build && publint"
-  },
-  "devDependencies": {
-    "@chromatic-com/storybook": "^3.2.3",
-    "@fluent/bundle": "^0.18.0",
-    "@laynezh/vite-plugin-lib-assets": "^0.5.24",
-    "@melt-ui/pp": "^0.3.2",
-    "@melt-ui/svelte": "^0.85.0",
-    "@storybook/addon-essentials": "^8.4.7",
-    "@storybook/addon-interactions": "^8.4.7",
-    "@storybook/addon-links": "^8.4.7",
-    "@storybook/addon-svelte-csf": "5.0.0-next.3",
-    "@storybook/blocks": "^8.4.7",
-    "@storybook/svelte": "^8.4.7",
-    "@storybook/svelte-vite": "^8.4.7",
-    "@storybook/test": "^8.4.7",
-    "@sveltejs/package": "^2.3.5",
-    "@sveltejs/vite-plugin-svelte": "^4.0.0",
-    "@tsconfig/svelte": "^5.0.4",
-    "@types/js-cookie": "^3.0.6",
-    "glob": "^11.0.0",
-    "prettier-plugin-svelte": "^3.2.7",
-    "publint": "^0.2.12",
-    "sass-embedded": "^1.80.6",
-    "semantic-release": "^24.2.0",
-    "storybook": "^8.4.7",
-    "svelte": "5.1.9",
-    "svelte-check": "^4.0.5",
-    "tslib": "^2.8.1",
-    "typescript": "^5.6.3",
-    "vite": "^5.4.10",
-    "vite-plugin-dts": "^4.3.0",
-    "@fontsource/ibm-plex-sans-kr": "^5.1.0",
-    "vite-tsconfig-paths": "^5.0.1"
-  },
-  "peerDependencies": {
-    "@melt-ui/svelte": "*",
-    "svelte": "5"
-  },
-  "dependencies": {
-    "clsx": "^2.1.1",
-    "js-cookie": "^3.0.5",
-    "svelte-component-actions": "^1.1.0"
-  },
-  "release": {
-    "branches": [
-      "+([0-9])?(.{+([0-9]),x}).x",
-      "master",
-      {
-        "name": "beta",
-        "prerelease": true
-      }
-    ],
-    "plugins": [
-      "@semantic-release/commit-analyzer",
-      "@semantic-release/release-notes-generator",
-      "@semantic-release/npm",
-      [
-        "@semantic-release/github",
-        {
-          "successComment": false,
-          "failTitle": false
-        }
-      ]
-    ]
-  },
-  "packageManager": "pnpm@9.4.0+sha256.b6fd0bfda555e7e584ad7e56b30c68b01d5a04f9ee93989f4b93ca8473c49c74",
-  "pnpm": {
-    "patchedDependencies": {
-      "@sveltejs/package@2.3.5": "patches/@sveltejs__package@2.3.5.patch"
-    }
-  }
+	"name": "@adofai-gg/ui",
+	"version": "0.0.0",
+	"type": "module",
+	"files": [
+		"dist"
+	],
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"import": "./dist/index.js",
+			"svelte": "./dist/index.js"
+		},
+		"./style-system/*": "./dist/stylesheets/system/*.scss",
+		"./globals.scss": "./dist/stylesheets/globals.scss"
+	},
+	"sideEffects": [
+		"**/*.css",
+		"**/*.scss"
+	],
+	"scripts": {
+		"gen": "node scripts/generateGlobImports.mjs",
+		"check": "svelte-check --tsconfig ./tsconfig.json && tsc -p tsconfig.node.json",
+		"storybook": "pnpm gen && storybook dev -p 6006",
+		"build-storybook": "pnpm gen && storybook build",
+		"build": "pnpm gen && svelte-package",
+		"prepack": "pnpm build && publint"
+	},
+	"devDependencies": {
+		"@chromatic-com/storybook": "^3.2.3",
+		"@fluent/bundle": "^0.18.0",
+		"@laynezh/vite-plugin-lib-assets": "^0.5.24",
+		"@melt-ui/pp": "^0.3.2",
+		"@melt-ui/svelte": "^0.85.0",
+		"@storybook/addon-essentials": "^8.4.7",
+		"@storybook/addon-interactions": "^8.4.7",
+		"@storybook/addon-links": "^8.4.7",
+		"@storybook/addon-svelte-csf": "5.0.0-next.3",
+		"@storybook/blocks": "^8.4.7",
+		"@storybook/svelte": "^8.4.7",
+		"@storybook/svelte-vite": "^8.4.7",
+		"@storybook/test": "^8.4.7",
+		"@sveltejs/package": "^2.3.5",
+		"@sveltejs/vite-plugin-svelte": "^4.0.0",
+		"@tsconfig/svelte": "^5.0.4",
+		"@types/js-cookie": "^3.0.6",
+		"glob": "^11.0.0",
+		"prettier-plugin-svelte": "^3.2.7",
+		"publint": "^0.2.12",
+		"sass-embedded": "^1.80.6",
+		"semantic-release": "^24.2.0",
+		"storybook": "^8.4.7",
+		"svelte": "5.1.9",
+		"svelte-check": "^4.0.5",
+		"tslib": "^2.8.1",
+		"typescript": "^5.6.3",
+		"vite": "^5.4.10",
+		"vite-plugin-dts": "^4.3.0",
+		"@fontsource/ibm-plex-sans-kr": "^5.1.0",
+		"vite-tsconfig-paths": "^5.0.1"
+	},
+	"peerDependencies": {
+		"@melt-ui/svelte": "*",
+		"svelte": "5"
+	},
+	"dependencies": {
+		"clsx": "^2.1.1",
+		"js-cookie": "^3.0.5",
+		"svelte-component-actions": "^1.1.0"
+	},
+	"release": {
+		"branches": [
+			"+([0-9])?(.{+([0-9]),x}).x",
+			"master",
+			{
+				"name": "beta",
+				"prerelease": true
+			}
+		],
+		"plugins": [
+			"@semantic-release/commit-analyzer",
+			"@semantic-release/release-notes-generator",
+			"@semantic-release/npm",
+			[
+				"@semantic-release/github",
+				{
+					"successComment": false,
+					"failTitle": false
+				}
+			]
+		]
+	},
+	"packageManager": "pnpm@9.4.0+sha256.b6fd0bfda555e7e584ad7e56b30c68b01d5a04f9ee93989f4b93ca8473c49c74",
+	"pnpm": {
+		"patchedDependencies": {
+			"@sveltejs/package@2.3.5": "patches/@sveltejs__package@2.3.5.patch"
+		}
+	}
 }
diff --git a/src/lib/components/form/FormField.svelte b/src/lib/components/form/FormField.svelte
@@ -3,28 +3,45 @@
 	import Translation from '$lib/utils/Translation.svelte'
 	import FormHint from './FormHint.svelte'
 	import FormHintArea from './FormHintArea.svelte'
+	import type { Snippet } from 'svelte'
 
-	export let label: TranslationKey | null = null
-	export let error: TranslationKey | null = null
-	export let required: boolean = false
-	export let noLabel: boolean = false
-	export let helpText: TranslationKey | null = null
+	interface Props {
+		label?: TranslationKey
+		error?: TranslationKey
+		required?: boolean
+		noLabel?: boolean
+		helpText?: TranslationKey
+		horizontal?: boolean
+		children?: Snippet
+		hints?: Snippet
+	}
+
+	const {
+		noLabel = false,
+		children,
+		horizontal,
+		label,
+		helpText,
+		required = false,
+		error,
+		hints
+	}: Props = $props()
 </script>
 
-<div class="form-field">
+{#snippet hintsFallback()}
+	{#if error}
+		<FormHintArea>
+			<FormHint type="error">
+				<Translation key={error} />
+			</FormHint>
+		</FormHintArea>
+	{/if}
+{/snippet}
+
+<div class="form-field" class:horizontal>
 	{#if noLabel}
 		<div class="form-field-content">
-			{#if label}
-				<p class="label">
-					<Translation key={label} />
-					{#if required}
-						<span class="required-sign">
-							<Translation key="ui-common:form-required" />
-						</span>
-					{/if}
-				</p>
-			{/if}
-			<slot />
+			{@render children?.()}
 		</div>
 	{:else}
 		<label class="form-field-content">
@@ -38,7 +55,9 @@
 					{/if}
 				</p>
 			{/if}
-			<slot />
+			<span class="content">
+				{@render children?.()}
+			</span>
 		</label>
 	{/if}
 
@@ -48,48 +67,61 @@
 		</div>
 	{/if}
 
-	<slot name="hints">
-		{#if error}
-			<FormHintArea>
-				<FormHint type="error">
-					<Translation key={error} />
-				</FormHint>
-			</FormHintArea>
-		{/if}
-	</slot>
+	{@render (hints || hintsFallback)()}
 </div>
 
 <style lang="scss">
-	@use '../../stylesheets/system/colors' as *;
+  @use '../../stylesheets/system/colors' as *;
 
-	.label {
-		font-size: 16px;
-		font-weight: 500;
-		line-height: 140%;
-	}
+  .label {
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 140%;
+  }
 
-	.required-sign {
-		color: rgba($red, 1);
-		font-size: 12px;
-		font-weight: 500;
-		margin-left: 4px;
-	}
+  .required-sign {
+    color: rgba($red, 1);
+    font-size: 12px;
+    font-weight: 500;
+    margin-left: 4px;
+  }
 
-	.form-field {
-		display: flex;
-		flex-direction: column;
-	}
+  .form-field {
+    display: flex;
+    flex-direction: column;
+  }
 
-	.form-field-content {
-		display: flex;
-		flex-direction: column;
-		gap: 2px;
-	}
+  .horizontal {
+    .form-field-content {
+			flex-direction: row;
+			min-height: 38px;
+			gap: 16px;
 
-	.form-help-text {
-		font-size: 12px;
-		color: rgba(255, 255, 255, 0.6);
-		line-height: 12px;
-		margin-top: 4px;
-	}
+			.label {
+				width: 40px;
+				display: flex;
+				height: 38px;
+				align-items: center;
+			}
+
+			.content {
+				padding-left: 16px;
+				width: 0;
+				flex-grow: 1;
+			}
+    }
+  }
+
+  .form-field-content {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .form-help-text {
+    font-size: 12px;
+    color: rgba(255, 255, 255, 0.6);
+    line-height: 12px;
+    margin-top: 4px;
+  }
 </style>
diff --git a/src/lib/components/form/InputControl.svelte b/src/lib/components/form/InputControl.svelte
@@ -21,7 +21,8 @@
 
 <style lang="scss">
 	.input-control {
-		height: 32px;
+		min-height: 32px;
+		height: 100%;
 
 		display: flex;