@operato/input - npm Package Compare versions

Comparing version 7.0.67 to 7.0.78

dist/src/ox-input-hashtags.d.ts

@@ -13,2 +13,3 @@ /**
     private onInputKeyup;
+    private onBlur;
     setHashtags(): Promise<void>;
@@ -15,0 +16,0 @@ initErrors(): void;

dist/src/ox-input-hashtags.js

@@ -19,21 +19,18 @@ /**
     #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;
@@ -43,4 +40,3 @@ }
     .tag:hover {
-      background-color: var(--hashtag-background-hover);
-      color: var(--md-sys-color-primary-container) !important;
+      font-weight: bold;
     }
@@ -50,9 +46,5 @@
       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;
     }
@@ -62,3 +54,2 @@
       display: inline-block;
-      color: var(--md-sys-color-on-primary-container);
     }
@@ -79,3 +70,2 @@
       -webkit-text-size-adjust: none;
-      padding: var(--hashtag-input-padding);
       border: 0;
@@ -89,3 +79,3 @@ border-bottom: 1px solid rgba(0, 0, 0, 0.15);
       outline: none;
-      border-bottom: 1px solid var(--md-sys-color-on-primary-container);
+      border-bottom: 1px solid var(--md-sys-color-primary);
     }
@@ -112,3 +102,9 @@
         <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>
@@ -132,2 +128,6 @@ </div>
     }
+    onBlur() {
+        const tag = this.input.value.trim();
+        this.addHashtag(tag);
+    }
     async setHashtags() {
@@ -134,0 +134,0 @@ this.input.focus();

package.json

@@ -5,3 +5,3 @@ {
   "author": "[e-mail]",
-  "version": "7.0.67",
+  "version": "7.0.78",
   "main": "dist/src/index.js",
@@ -258,3 +258,3 @@ "module": "dist/src/index.js",
   },
-  "gitHead": "7945bd9635ecf9b14c2ecb072eeccd5d148f75d0"
+  "gitHead": "9af3cbef88890a8eb088bcc730b69c426a8b4fe0"
 }

src/ox-input-hashtags.ts

@@ -18,21 +18,18 @@ /**
     #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;
@@ -42,4 +39,3 @@ }
     .tag:hover {
-      background-color: var(--hashtag-background-hover);
-      color: var(--md-sys-color-primary-container) !important;
+      font-weight: bold;
     }
@@ -49,9 +45,5 @@
       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;
     }
@@ -61,3 +53,2 @@
       display: inline-block;
-      color: var(--md-sys-color-on-primary-container);
     }
@@ -78,3 +69,2 @@
       -webkit-text-size-adjust: none;
-      padding: var(--hashtag-input-padding);
       border: 0;
@@ -88,3 +78,3 @@ border-bottom: 1px solid rgba(0, 0, 0, 0.15);
       outline: none;
-      border-bottom: 1px solid var(--md-sys-color-on-primary-container);
+      border-bottom: 1px solid var(--md-sys-color-primary);
     }
@@ -122,3 +112,9 @@
         <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>
@@ -146,2 +142,7 @@ </div>
 
+  private onBlur() {
+    const tag = this.input.value.trim()
+    this.addHashtag(tag)
+  }
+
   async setHashtags() {
@@ -148,0 +149,0 @@ this.input.focus()

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

1637805

decreased by-0.07%

Lines of code

24353

No dependency changes