Merge branch 'main' of https://github.com/techniq/svelte-ux

techniq · May 7, 2024 · b8284ad · b8284ad
2 parents b752d6e + 3ad0d41
commit b8284ad
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 4 deletions.
diff --git a/packages/svelte-ux/CHANGELOG.md b/packages/svelte-ux/CHANGELOG.md
@@ -1,5 +1,11 @@
 # svelte-ux
 
+## 0.62.12
+
+### Patch Changes
+
+- [Field] Support passing `value` for simple display with handling of empty (null/undefined) with custom placeholder ([#339](https://github.com/techniq/svelte-ux/pull/339))
+
 ## 0.62.11
 
 ### Patch Changes

diff --git a/packages/svelte-ux/package.json b/packages/svelte-ux/package.json
@@ -4,7 +4,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/svelte-ux",
-  "version": "0.62.11",
+  "version": "0.62.12",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",

diff --git a/packages/svelte-ux/src/lib/components/Field.svelte b/packages/svelte-ux/src/lib/components/Field.svelte
@@ -19,7 +19,7 @@
   export let label = '';
   export let labelPlacement: LabelPlacement = defaults.labelPlacement ?? DEFAULT_LABEL_PLACEMENT;
   export let value: any = null;
-  // export let placeholder = '';
+  export let placeholder = '';
   export let error: string | string[] | boolean | undefined = '';
   export let hint = '';
   // export let autocomplete = 'off'; // https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
@@ -156,7 +156,17 @@
           >
             <slot name="prefix" />
 
-            <slot {id} />
+            <slot {id}>
+              {#if value}
+                {value}
+              {:else if placeholder}
+                <span class="text-surface-content/50">
+                  {placeholder}
+                </span>
+              {:else}
+                &nbsp
+              {/if}
+            </slot>
 
             <slot name="suffix" />
           </div>

diff --git a/packages/svelte-ux/src/routes/docs/components/Field/+page.svelte b/packages/svelte-ux/src/routes/docs/components/Field/+page.svelte
@@ -21,7 +21,16 @@
 
 <h1>Examples</h1>
 
-<h2>Text (display only)</h2>
+<h2>Text (display only) as value</h2>
+
+<Preview>
+  <div class="grid grid-flow-col gap-2">
+    <Field label="First Name" value="Sean" />
+    <Field label="Last Name" value="Lynch" />
+  </div>
+</Preview>
+
+<h2>Text (display only) as slot</h2>
 
 <Preview>
   <div class="grid grid-flow-col gap-2">
@@ -30,6 +39,24 @@
   </div>
 </Preview>
 
+<h2>Empty (null / undefined)</h2>
+
+<Preview>
+  <div class="grid grid-flow-col gap-2">
+    <Field label="First name" value={null} />
+    <Field label="Last name" value={undefined} />
+  </div>
+</Preview>
+
+<h2>Placeholder</h2>
+
+<Preview>
+  <div class="grid grid-flow-col gap-2">
+    <Field label="First name" value={null} placeholder="empty" />
+    <Field label="Last name" value={undefined} placeholder="empty" />
+  </div>
+</Preview>
+
 <h2>Switch</h2>
 
 <Preview>