@anmed/mui-selection 0.0.3 → 0.0.6

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,10 +41,19 @@ $: {
 }
 $: above = focused || displayText.toString().length != 0 || isCardSelection;
 const handlerClick = () => {
-    if (!readOnly && !isCardSelection) {
+    if (!readonly && !isCardSelection) {
         dispatcher('action', value);
     }
 };
+const isItemSelect = (item, value) => {
+    if (item != null && value != null) {
+        if (keyCode != null) {
+            return item[keyCode] == value[keyCode];
+        }
+        return item == value;
+    }
+    return false;
+};
 </script>
 
 <div on:click={handlerClick}>
@@ -53,16 +62,20 @@ const handlerClick = () => {
         <CommonField {label} {required} bind:focused {above} {error}>
             <div class="card-select-box">
                 {#each list as item}
-        <span class="{item === value? 'card-select-item-selected' :'card-select-item-normal'}"
+        <span class="{isItemSelect(item,value)? 'card-select-item-selected' :'card-select-item-normal'}"
               on:click={()=>onCardItemClick(item)}>{getDisplayText(item)}</span>
                 {/each}
             </div>
         </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/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.3",
+  "version": "0.0.6",
   "description": "",
   "type": "module",
   "main": "index.js",