@operato/input 7.0.60 → 7.0.78

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/input",
   "description": "Webcomponents for input following open-wc recommendations",
   "author": "heartyoh@hatiolab.com",
-  "version": "7.0.60",
+  "version": "7.0.78",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "license": "MIT",
@@ -254,5 +254,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "4485b81c64fd911a0fa9be050419cfa20b734527"
+  "gitHead": "9af3cbef88890a8eb088bcc730b69c426a8b4fe0"
 }

package/src/ox-input-data.ts

@@ -1,7 +1,3 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
 import './ox-input-code'
 
 import { css, html } from 'lit'
@@ -11,6 +7,7 @@ import { live } from 'lit/directives/live.js'
 import { OxFormField } from './ox-form-field.js'
 import { OxInputCode } from './ox-input-code.js'
 import { isEqual } from 'lodash-es'
+import 'ses'
 
 /**
 WEB Component for code-mirror based data editor.
@@ -138,10 +135,13 @@ export class OxInputData extends OxFormField {
           }
           break
         case 'object':
-          value = eval('(' + value + ')')
+          const compartment = new Compartment()
+          value = compartment.evaluate(`(${value})`)
           break
       }
-    } catch (e) {}
+    } catch (e) {
+      console.error('Error parsing value:', e)
+    }
 
     if (isEqual(this.value, value)) {
       return
@@ -171,11 +171,12 @@ export class OxInputData extends OxFormField {
           }
           break
         case 'object':
-          value = eval('(' + value + ')')
+          const compartment = new Compartment()
+          value = compartment.evaluate(`(${value})`)
           break
       }
     } catch (e) {
-      console.log(e)
+      console.error('Error setting data type:', e)
     }
 
     if (isEqual(this.value, value)) {

package/src/ox-input-hashtags.ts

@@ -15,47 +15,38 @@ import { OxFormField } from './ox-form-field.js'
 export class OxInputHashtags extends OxFormField {
   static styles = css`
     #editor {
-      display: block;
-      box-sizing: border-box;
-      --hashtag-padding: 2px 4px;
-      --hashtag-background: var(--md-sys-color-container);
-      --hashtag-background-hover: var(--md-sys-color-on-container);
-      --hashtag-closer-padding: 0 2px 0 4px;
-      --hashtag-input-padding: 2px;
+      display: flex;
+      gap: var(--spacing-medium);
+      align-items: center;
     }
 
     .tags {
-      display: inline-block;
+      display: flex;
+      gap: var(--spacing-medium);
+      align-items: center;
     }
 
     .tag {
-      border-radius: var(--border-radius);
-      background-color: var(--hashtag-background);
-      padding: var(--hashtag-padding);
+      display: flex;
+      gap: var(--spacing-small);
+
       font: var(--input-font);
-      color: var(--md-sys-color-on-primary-container);
       cursor: pointer;
     }
 
     .tag:hover {
-      background-color: var(--hashtag-background-hover);
-      color: var(--md-sys-color-primary-container) !important;
+      font-weight: bold;
     }
 
     .closer {
       opacity: 0.3;
-      padding: var(--hashtag-closer-padding);
-      text-transform: uppercase;
-      color: var(--md-sys-color-on-primary-container);
     }
     .tag:hover .closer {
-      opacity: 0.9;
-      color: var(--md-sys-color-primary-container);
+      opacity: 0.3;
     }
 
     .input {
       display: inline-block;
-      color: var(--md-sys-color-on-primary-container);
     }
 
     .input::before {
@@ -71,7 +62,6 @@ export class OxInputHashtags extends OxFormField {
       vertical-align: middle;
       -webkit-appearance: none;
       -webkit-text-size-adjust: none;
-      padding: var(--hashtag-input-padding);
       border: 0;
       border-bottom: 1px solid rgba(0, 0, 0, 0.15);
       outline: none;
@@ -80,7 +70,7 @@ export class OxInputHashtags extends OxFormField {
 
     input:focus {
       outline: none;
-      border-bottom: 1px solid var(--md-sys-color-on-primary-container);
+      border-bottom: 1px solid var(--md-sys-color-primary);
     }
 
     .error {
@@ -113,7 +103,13 @@ export class OxInputHashtags extends OxFormField {
         </div>
 
         <div class="input">
-          <input type="text" @keyup=${this.onInputKeyup} placeholder="태그입력" ?disabled=${this.disabled} />
+          <input
+            type="text"
+            @keyup=${this.onInputKeyup}
+            @blur=${this.onBlur}
+            placeholder="태그입력"
+            ?disabled=${this.disabled}
+          />
         </div>
       </div>
 
@@ -136,6 +132,11 @@ export class OxInputHashtags extends OxFormField {
     }
   }
 
+  private onBlur() {
+    const tag = this.input.value.trim()
+    this.addHashtag(tag)
+  }
+
   async setHashtags() {
     this.input.focus()
   }