fix: Datalist and CheckGroup

lagden · Aug 16, 2022 · 89d2f4c · 89d2f4c
1 parent 2ccd258
commit 89d2f4c
Show file tree

Hide file tree

Showing 5 changed files with 191 additions and 168 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tadashi/svelte-atom-elements",
-  "version": "1.13.0",
+  "version": "1.14.0",
   "repository": "github:lagden/svelte-atom-elements",
   "description": "Svelte components",
   "keywords": [
@@ -37,17 +37,17 @@
   },
   "dependencies": {
     "@sindresorhus/slugify": "2.1.0",
-    "@tadashi/common": "1.6.0"
+    "@tadashi/common": "1.7.0"
   },
   "devDependencies": {
     "@babel/core": "7.18.10",
     "@babel/eslint-parser": "7.18.9",
     "@babel/preset-env": "7.18.10",
     "@testing-library/svelte": "3.1.3",
     "babel-jest": "28.1.3",
-    "esbuild": "0.14.53",
+    "esbuild": "0.15.3",
     "esbuild-svelte": "0.7.1",
-    "eslint": "8.21.0",
+    "eslint": "8.22.0",
     "eslint-config-xo": "0.41.0",
     "eslint-plugin-html": "7.1.0",
     "eslint-plugin-svelte3": "4.0.0",

diff --git a/src/compose/CheckGroup.svelte b/src/compose/CheckGroup.svelte
@@ -13,7 +13,6 @@
 	export let switchMode = false
 	export let useGroup = true
 	export let outline = false
-	export let required = false
 	export let showError = true
 	export let showHelper = true
 	export let helper = ''
@@ -63,7 +62,7 @@
 	const dispatch = createEventDispatcher()
 
 	afterUpdate(() => {
-		if (required) {
+		if ($$restProps?.required) {
 			customValidate()
 
 			if (node) {

diff --git a/src/compose/Datalist.svelte b/src/compose/Datalist.svelte
@@ -11,6 +11,7 @@
 	export let optionKey = 'value'
 	export let optionValue = 'text'
 	export let value = ''
+	export let _value = ''
 	export let outline = true
 	export let showError = true
 	export let showHelper = true
@@ -19,6 +20,7 @@
 	export let label = false
 	export let id = `_${uuid()}`
 	export let list = `list_${uuid()}`
+	export let name
 
 	let className = ''
 	export {className as class}
@@ -50,21 +52,28 @@
 			boldMode={$$restProps?.boldMode ?? false}
 		>{@html label}</Label>
 	{/if}
+	<Input
+		type="hidden"
+		bind:value
+		{name}
+	/>
 	<Input
 		class="{styleInput} {css}"
 		bind:this={component}
-		bind:value
+		bind:value={_value}
 		on:blur
 		on:focus
 		on:change
 		on:input
+		on:invalid={onInvalid}
+		on:valid={onValid}
 		{list}
 		{...(id ? {id} : {})}
 		{...$$restProps}
 	/>
 	<datalist id={list}>
 		{#if Array.isArray(options) && options.length > 0}
-			{#each options as item (item[optionKey])}
+			{#each options as item (uuid())}
 				<option value={item[optionValue]} />
 			{/each}
 		{/if}

diff --git a/test/__snapshots__/elements.spec.js.snap b/test/__snapshots__/elements.spec.js.snap
@@ -133,7 +133,7 @@ exports[`CheckGroup should match snapshot props 1`] = `
       class="customCss"
     >
       <span
-        class="_atom_frm__label"
+        class="_atom_frm__label _atom_frm__label___required"
         id="test_choices_label"
       >
         Choices:
@@ -150,6 +150,7 @@ exports[`CheckGroup should match snapshot props 1`] = `
           <input
             class="_atom_frm__checkbox"
             name="test[]"
+            required=""
             type="checkbox"
             value="a"
           />
@@ -168,6 +169,7 @@ exports[`CheckGroup should match snapshot props 1`] = `
           <input
             class="_atom_frm__checkbox"
             name="test[]"
+            required=""
             type="checkbox"
             value="b"
           />
@@ -186,6 +188,7 @@ exports[`CheckGroup should match snapshot props 1`] = `
           <input
             class="_atom_frm__checkbox"
             name="test[]"
+            required=""
             type="checkbox"
             value="c"
           />
@@ -323,11 +326,17 @@ exports[`Datalist should match snapshot default 1`] = `
       class=""
     >
        
+      <input
+        class="_atom_frm__base"
+        name="test"
+        type="hidden"
+        value=""
+      />
+       
       <input
         class="_atom_frm__outline _atom_frm__base"
         id="test"
         list="test_list"
-        name="test"
         type="text"
       />
        
@@ -373,11 +382,17 @@ exports[`Datalist should match snapshot props 1`] = `
         
       </label>
        
+      <input
+        class="_atom_frm__base"
+        name="test"
+        type="hidden"
+        value="Rita"
+      />
+       
       <input
         class="_atom_frm__outline _atom_frm__base"
         id="test"
         list="test_list"
-        name="test"
         required=""
         type="text"
       />
@@ -408,9 +423,9 @@ exports[`Datalist should match snapshot props 1`] = `
       >
         <div
           class="_atom_frm__error___message"
-          title=""
+          title="Constraints not satisfied"
         >
-          
+          Constraints not satisfied
         </div>
          
         <div