@operato/input 1.1.10 → 1.1.13

package/src/locales/en.ts

@@ -1,28 +1,25 @@
+// Do not modify this file by hand!
+// Re-generate this file by running lit-localize
 
-    // Do not modify this file by hand!
-    // Re-generate this file by running lit-localize
+/* eslint-disable no-irregular-whitespace */
+/* eslint-disable @typescript-eslint/no-explicit-any */
 
-    
-    
-
-    /* eslint-disable no-irregular-whitespace */
-    /* eslint-disable @typescript-eslint/no-explicit-any */
-
-    export const templates = {
-      'sf9b52aece5aed0f7': `x-axes`,
-'s9f41d726ecec72c2': `y-axes`,
-'s31be7a0b4a5853dd': `z-axes`,
-'sd793f87f18747a63': `dimension`,
-'sf95fdd7da4fc2295': `translate`,
-'s6aacb9fbb71a1d91': `scale`,
-'s075cb2f53173bd8a': `rotate`,
-'sc4bcadba8e631b86': `name`,
-'s63c6e58ec805a9eb': `from date`,
-'sfcc01216c601ec9e': `from time`,
-'s685db98545dc9448': `to date`,
-'s77c8560cf63a372d': `to time`,
-'s42670fc325584e15': `The day before`,
-'s29ec9210c8a8222e': `The day`,
-'scff69aa7239287b0': `The day after`,
-    };
-  
+export const templates = {
+  sf9b52aece5aed0f7: `x-axes`,
+  s9f41d726ecec72c2: `y-axes`,
+  s31be7a0b4a5853dd: `z-axes`,
+  sd793f87f18747a63: `dimension`,
+  sf95fdd7da4fc2295: `translate`,
+  s6aacb9fbb71a1d91: `scale`,
+  s075cb2f53173bd8a: `rotate`,
+  sb9874d345b5e590a: `tag duplicated`,
+  s5191b91c637d7da1: `special characters not allowed`,
+  sc4bcadba8e631b86: `name`,
+  s63c6e58ec805a9eb: `from date`,
+  sfcc01216c601ec9e: `from time`,
+  s685db98545dc9448: `to date`,
+  s77c8560cf63a372d: `to time`,
+  s42670fc325584e15: `The day before`,
+  s29ec9210c8a8222e: `The day`,
+  scff69aa7239287b0: `The day after`
+}

package/src/locales/ko.ts

@@ -1,28 +1,25 @@
+// Do not modify this file by hand!
+// Re-generate this file by running lit-localize
 
-    // Do not modify this file by hand!
-    // Re-generate this file by running lit-localize
+/* eslint-disable no-irregular-whitespace */
+/* eslint-disable @typescript-eslint/no-explicit-any */
 
-    
-    
-
-    /* eslint-disable no-irregular-whitespace */
-    /* eslint-disable @typescript-eslint/no-explicit-any */
-
-    export const templates = {
-      's075cb2f53173bd8a': `회전`,
-'s29ec9210c8a8222e': `당일`,
-'s31be7a0b4a5853dd': `z 축`,
-'s42670fc325584e15': `전날`,
-'s63c6e58ec805a9eb': `시작일`,
-'s685db98545dc9448': `완료일`,
-'s6aacb9fbb71a1d91': `스케일`,
-'s77c8560cf63a372d': `완료시간`,
-'s9f41d726ecec72c2': `y 축`,
-'sc4bcadba8e631b86': `이름`,
-'scff69aa7239287b0': `다음날`,
-'sd793f87f18747a63': `체적`,
-'sf95fdd7da4fc2295': `변환`,
-'sf9b52aece5aed0f7': `x 축`,
-'sfcc01216c601ec9e': `시작시간`,
-    };
-  
+export const templates = {
+  s075cb2f53173bd8a: `회전`,
+  s29ec9210c8a8222e: `당일`,
+  s31be7a0b4a5853dd: `z 축`,
+  s42670fc325584e15: `전날`,
+  s63c6e58ec805a9eb: `시작일`,
+  s685db98545dc9448: `완료일`,
+  s6aacb9fbb71a1d91: `스케일`,
+  s77c8560cf63a372d: `완료시간`,
+  s9f41d726ecec72c2: `y 축`,
+  sc4bcadba8e631b86: `이름`,
+  scff69aa7239287b0: `다음날`,
+  sd793f87f18747a63: `체적`,
+  sf95fdd7da4fc2295: `변환`,
+  sf9b52aece5aed0f7: `x 축`,
+  sfcc01216c601ec9e: `시작시간`,
+  sb9874d345b5e590a: `태그가 중복되었습니다.`,
+  s5191b91c637d7da1: `특수문자는 사용할 수 없습니다.`
+}

package/src/locales/ms.ts

@@ -16,6 +16,8 @@
 'sf95fdd7da4fc2295': `translate`,
 's6aacb9fbb71a1d91': `scale`,
 's075cb2f53173bd8a': `rotate`,
+'sb9874d345b5e590a': `tag duplicated`,
+'s5191b91c637d7da1': `special characters not allowed`,
 'sc4bcadba8e631b86': `name`,
 's63c6e58ec805a9eb': `from date`,
 'sfcc01216c601ec9e': `from time`,

package/src/locales/zh.ts

@@ -16,6 +16,8 @@
 'sf95fdd7da4fc2295': `translate`,
 's6aacb9fbb71a1d91': `scale`,
 's075cb2f53173bd8a': `rotate`,
+'sb9874d345b5e590a': `tag duplicated`,
+'s5191b91c637d7da1': `special characters not allowed`,
 'sc4bcadba8e631b86': `name`,
 's63c6e58ec805a9eb': `from date`,
 'sfcc01216c601ec9e': `from time`,

package/src/ox-checkbox.ts

@@ -1,3 +1,7 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
 /*
   This component is inspired by https://github.com/Polydile/dile-components, thanks Dile.
 */

package/src/ox-form-field.ts

@@ -1,3 +1,7 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
 import { LitElement } from 'lit'
 import { property } from 'lit/decorators.js'
 

package/src/ox-input-3dish.ts

@@ -1,6 +1,7 @@
 /**
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
+
 import { css, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 

package/src/ox-input-barcode.ts

@@ -1,3 +1,7 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
 import '@operato/popup/ox-popup.js'
 
 import { css, html } from 'lit'

package/src/ox-input-container.ts

@@ -1,3 +1,7 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
 import '@material/mwc-icon'
 import '@operato/popup/ox-popup-list.js'
 

package/src/ox-input-crontab.ts

@@ -1,3 +1,7 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
 import '@material/mwc-button'
 
 import { css, html, PropertyValues } from 'lit'

package/src/ox-input-duration.ts

@@ -1,3 +1,7 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
 import '@material/mwc-button'
 
 import { css, html } from 'lit'

package/src/ox-input-file.ts

@@ -1,3 +1,7 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
 import '@material/mwc-icon'
 
 import { css, html, PropertyValues } from 'lit'

package/src/ox-input-hashtags.ts

@@ -0,0 +1,161 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import { css, html } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
+import { when } from 'lit/directives/when.js'
+import { repeat } from 'lit/directives/repeat.js'
+import { localized, msg } from '@lit/localize'
+
+import { OxFormField } from './ox-form-field.js'
+
+@localized()
+@customElement('ox-input-hashtags')
+export class OxInputHashtags extends OxFormField {
+  static styles = css`
+    #editor {
+      display: block;
+      box-sizing: border-box;
+    }
+
+    .tags {
+      display: inline-block;
+    }
+
+    .tag {
+      border-radius: 5px;
+      background-color: cyan;
+      color: #3e3e3e;
+    }
+
+    .closer {
+      color: red;
+    }
+
+    .input {
+      display: inline-block;
+    }
+
+    .input:before {
+      display: inline;
+      position: relative;
+      top: -1px;
+      content: '#';
+      color: #3e3e3e;
+      margin-right: 2px;
+      vertical-align: middle;
+    }
+
+    input {
+      vertical-align: middle;
+      -webkit-appearance: none;
+      -webkit-text-size-adjust: none;
+      padding: 0;
+      border: 0;
+      outline: none;
+      color: #3e3e3e;
+    }
+
+    input:focus {
+      outline: none;
+      opacity: 1;
+    }
+
+    .error {
+      padding: 0 5px;
+      color: #ea2136;
+      text-align: left;
+    }
+  `
+
+  @property({ type: Array }) value: string[] = []
+  @property({ type: String }) placeholder: string = 'tag'
+  @query('input') input!: HTMLInputElement
+
+  @state() errors?: string | null
+
+  render() {
+    return html`
+      <div id="editor" @click=${this.setHashtags}>
+        <div class="tags">
+          ${repeat(
+            this.value,
+            tag => tag,
+            (tag, index) =>
+              html`
+                <span class="tag">#${tag} <span @click=${() => this.removeHashtag(index)} class="closer">x</span></span>
+              `
+          )}
+        </div>
+
+        <div class="input">
+          <input type="text" @keyup=${this.onInputKeyup} placeholder="태그입력" />
+        </div>
+      </div>
+
+      ${when(this.errors, () => html`<p class="error">${this.errors}</p>`)}
+    `
+  }
+
+  private onInputKeyup(e: KeyboardEvent) {
+    e.stopPropagation()
+
+    const tag = this.input.value.trim()
+
+    switch (e.key) {
+      case 'Enter':
+      case 'Spacebar':
+        this.addHashtag(tag)
+        break
+      default:
+        this.errors = this.validate(tag)
+    }
+  }
+
+  async setHashtags() {
+    this.input.focus()
+  }
+
+  initErrors() {
+    this.errors = null
+  }
+
+  validate(newtag: string) {
+    if (this.value.some(tag => tag === newtag)) {
+      return msg('tag duplicated')
+    }
+
+    const regex = /[~!@#$%^&*()+|<>?:{},.="':;/-]/
+    if (regex.test(newtag)) {
+      return msg('special characters not allowed')
+    }
+  }
+
+  async addHashtag(tag: string) {
+    if (!tag) {
+      this.initErrors()
+      this.input.focus()
+      return
+    }
+
+    this.errors = this.validate(tag)
+    if (this.errors) {
+      this.input.focus()
+      return
+    }
+
+    this.value = [...this.value, tag]
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
+
+    this.errors = null
+    this.input.value = ''
+    this.input.focus()
+  }
+
+  removeHashtag(idx: number) {
+    this.value.splice(idx, 1)
+    this.value = [...this.value]
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
+  }
+}

package/src/ox-input-image.ts

@@ -1,3 +1,7 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
 import '@material/mwc-icon'
 
 import { css, html } from 'lit'

package/src/ox-input-options.ts

@@ -1,6 +1,7 @@
 /**
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
+
 import '@material/mwc-icon'
 
 import { css, html } from 'lit'

package/src/ox-input-scene-component-id.ts

@@ -1,3 +1,7 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
 import { css, html } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 

package/stories/ox-input-hashtags.stories.ts

@@ -0,0 +1,49 @@
+import '../src/ox-input-hashtags.js'
+
+import { html, TemplateResult } from 'lit'
+
+export default {
+  title: 'ox-input-hashtags',
+  component: 'ox-input-hashtags',
+  argTypes: {
+    placeholder: { control: 'text' },
+    name: { control: 'text' },
+    value: { control: 'array' }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  placeholder?: string
+  name?: string
+  value?: string[]
+}
+
+const Template: Story<ArgTypes> = ({ placeholder = 'hashtag', name = 'hello', value = [] }: ArgTypes) => html`
+  <link href="/themes/app-theme.css" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+  <style>
+    body {
+    }
+  </style>
+
+  <ox-input-hashtags
+    @change=${(e: Event) => console.log('changed', (e.target as HTMLInputElement).value)}
+    name=${name}
+    placeholder=${placeholder}
+    .value=${value}
+  >
+  </ox-input-hashtags>
+`
+
+export const Regular = Template.bind({})
+Regular.args = {
+  placeholder: 'hashtag',
+  name: 'hashtag',
+  value: ['abc', 'def']
+}

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) hatiolab.com
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.