@anmed/mui-selection 0.0.2 → 0.0.5

package/SelectionField.svelte

@@ -7,7 +7,7 @@ export let keyCode = 'value';
 export let keyText = 'text';
 export let convertText;
 export let label;
-export let readOnly = false;
+export let readonly = false;
 export let required = false;
 export let error;
 export let options;
@@ -26,7 +26,7 @@ const getDisplayText = (item) => {
     return text;
 };
 const onCardItemClick = (item) => {
-    if (!readOnly) {
+    if (!readonly) {
         value = item;
     }
 };
@@ -41,7 +41,7 @@ $: {
 }
 $: above = focused || displayText.toString().length != 0 || isCardSelection;
 const handlerClick = () => {
-    if (!readOnly && !isCardSelection) {
+    if (!readonly && !isCardSelection) {
         dispatcher('action', value);
     }
 };
@@ -60,9 +60,13 @@ const handlerClick = () => {
         </CommonField>
     {:else }
         <CommonField {label} {required} bind:focused {above} {error}>
-            <span class="mui-select-field-text">{displayText}</span>
-            <div slot="trailing-icon">
-                <span class="triangle-down"></span>
+            <span class="mui-field-text">{displayText}</span>
+            <div slot="trailing-icon" class="mui-field-trailing-icon">
+                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <g id="Frame">
+                        <path id="Vector" d="M7.0835 5L12.0835 10L7.0835 15" stroke="#333333" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                    </g>
+                </svg>
             </div>
         </CommonField>
     {/if}

package/SelectionField.svelte.d.ts

@@ -7,7 +7,7 @@ declare const __propDef: {
         keyText?: string | undefined;
         convertText: (item: any) => string;
         label: string | null;
-        readOnly?: boolean | undefined;
+        readonly?: boolean | undefined;
         required?: boolean | undefined;
         error: any;
         options: any;

package/SingleClickSelectionSpinner.svelte

@@ -4,8 +4,8 @@ export let title;
 export let style;
 export let list = [];
 export let value;
-export let keyField = 'value';
-export let textField = 'text';
+export let keyCode = 'value';
+export let keyText = 'text';
 export let convertText;
 export let itemSelect;
 const dispatch = createEventDispatcher();
@@ -14,7 +14,8 @@ const handleItemSelected = (item) => {
     if (itemSelect) {
         itemSelect(item);
     }
-    value = item[keyField];
+    value = item[keyCode];
+    visible = false;
 };
 const getDisplayText = (item) => {
     let displayText = '';
@@ -23,7 +24,7 @@ const getDisplayText = (item) => {
             displayText = convertText(item);
         }
         else {
-            displayText = item[textField];
+            displayText = item[keyText];
         }
     }
     else {
@@ -40,7 +41,7 @@ const getDisplayText = (item) => {
     <ul class="single-click-selection-ul">
         {#each list as data}
             <li on:click={()=>handleItemSelected(data)}
-                class={value === data[keyField] ? 'single-click-selection-li-selected':'single-click-selection-li-normal'}> {getDisplayText(data)}</li>
+                class={value === data[keyCode] ? 'single-click-selection-li-selected':'single-click-selection-li-normal'}> {getDisplayText(data)}</li>
         {/each}
     </ul>
 </div>

package/SingleClickSelectionSpinner.svelte.d.ts

@@ -6,8 +6,8 @@ declare const __propDef: {
         style: any;
         list?: any[] | undefined;
         value: any;
-        keyField?: string | undefined;
-        textField?: string | undefined;
+        keyCode?: string | undefined;
+        keyText?: string | undefined;
         convertText: (item: any) => string;
         itemSelect: (item: any) => void;
     };

package/mui-select-field.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 * {
   margin: 0;
   padding: 0;
@@ -57,17 +56,6 @@ li {
   text-align: center;
 }
 
-/*CSS小三角*/
-span.triangle-down {
-  display: inline-block;
-  width: 0;
-  height: 0;
-  margin: auto;
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-  border-top: 5px solid #666;
-}
-
 .mui-select-field-text {
   color: var(mui-select-field-text-color, #999);
   font-size: var(mui-select-field-text-font-size, 16px);
@@ -107,6 +95,9 @@ span.triangle-down {
 .card-select-box {
   display: flex;
   justify-content: space-around;
+  padding: 0 12px;
+  text-align: center;
+  height: 30px;
 }
 .card-select-box .select-item-base, .card-select-box .card-select-item-selected, .card-select-box .card-select-item-normal {
   width: 100%;

package/mui-select-field.scss

@@ -56,17 +56,6 @@ li {
   text-align: center;
 }
 
-/*CSS小三角*/
-span.triangle-down {
-  display: inline-block;
-  width: 0;
-  height: 0;
-  margin: auto;
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-  border-top: 5px solid #666;
-}
-
 .mui-select-field-text {
   color: var(mui-select-field-text-color, #999);
   font-size: var(mui-select-field-text-font-size, 16px);;
@@ -107,6 +96,9 @@ span.triangle-down {
 .card-select-box {
   display: flex;
   justify-content: space-around;
+  padding: 0 12px;
+  text-align: center;
+  height: 30px;
 
   .select-item-base {
     width: 100%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anmed/mui-selection",
-  "version": "0.0.2",
+  "version": "0.0.5",
   "description": "",
   "type": "module",
   "main": "index.js",