From b3d191ccb74a0c2f5e5a71d62bb2c865ab232503 Mon Sep 17 00:00:00 2001 From: Mateus Henrique Derossi Date: Wed, 20 Dec 2023 16:54:37 -0300 Subject: [PATCH 1/4] feat: input text component feat #21 --- src/components/TextInput/index.js | 58 +++++++++++++++++++++++++ src/components/TextInput/index.scss | 66 +++++++++++++++++++++++++++++ 2 files changed, 124 insertions(+) create mode 100644 src/components/TextInput/index.js create mode 100644 src/components/TextInput/index.scss diff --git a/src/components/TextInput/index.js b/src/components/TextInput/index.js new file mode 100644 index 00000000..62ec3c58 --- /dev/null +++ b/src/components/TextInput/index.js @@ -0,0 +1,58 @@ +import { Component } from 'pet-dex-utilities'; +import './index.scss'; + +const events = [ + 'inputError', + 'inputPlaceholderChanged', + 'inputAssetChanged', + 'inputDisabled', + 'inputEnabled', +]; + +const html = ` +
+ +
+`; + +export default function InputText() { + Component.call(this, { html, events }); + this.disabled = false; + + this.selected.get('input-text').addEventListener('focus', () => { + if (this.disabled) return; + this.classList.remove('input-error'); + }); +} + +InputText.prototype = Object.assign(InputText.prototype, Component.prototype, { + setPlaceholder(placeholder) { + this.selected.get('input-text').placeholder = placeholder; + this.emit('placeholderChanged', placeholder); + }, + setAsset(url) { + this.selected.get('input-text').background = `url(${url}) + no-repeat 10px center`; + this.emit('inputAssetChanged'); + }, + isStandart() { + this.selected.get('input-text').classList.add('standart'); + this.selected.get('input-text').classList.remove('outlined'); + }, + isOutlined() { + this.selected.get('input-text').classList.add('outlined'); + this.selected.get('input-text').classList.remove('standart'); + }, + inputError() { + this.selected.get('input-text').classList.add('input-error'); + this.emit('inputError'); + }, + disable() { + this.disabled = true; + this.emit('inputDisabled'); + }, + enable() { + this.disabled = false; + this.emit('inputEnabled'); + }, +}); diff --git a/src/components/TextInput/index.scss b/src/components/TextInput/index.scss new file mode 100644 index 00000000..008a2843 --- /dev/null +++ b/src/components/TextInput/index.scss @@ -0,0 +1,66 @@ +.input-text-container { + position: relative; +} + +.input-text-container__input { + &.standart { + width: 100%; + + font-size: 1rem; + + padding: 10px 30px 10px 40px; + border: 1px solid #bfbfbf; + + background: url('https://www.svgrepo.com/show/532555/search.svg') no-repeat + 10px center; + background-size: 20px; + filter: opacity(0.85); + border-radius: 4px; + + transition: border-color 0.3s ease-in-out; + + &:focus { + border-color: #007bff; + + filter: opacity(1); + outline-color: #007bff; + } + + &.input-error { + border-color: #dc3545; + + background-color: #ee727e75; + filter: opacity(0.75); + outline-color: #dc3545; + } + } + + &.outlined { + width: 100%; + + font-size: 1rem; + + padding: 8px 5px; + border-bottom: 2px solid #bfbfbf; + border-color: transparent; + + background: none; + outline: none; + + transition: border-color 0.3s ease-in-out; + + &:focus { + border-bottom-color: #007bff; + } + + &.input-error { + border-bottom-color: #dc3545; + + filter: opacity(0.65); + + &::placeholder { + color: #dc3545; + } + } + } +} From 7c5f8bb4e2ade3e4d5e9b2e10d6e0d41b41a3ec3 Mon Sep 17 00:00:00 2001 From: Mateus Henrique Derossi Date: Fri, 29 Dec 2023 11:33:04 -0300 Subject: [PATCH 2/4] refactor: change px to rem in input text, edd the option to set de asset as prefix or suffix fix #21 --- src/components/TextInput/index.js | 21 +++++-- src/components/TextInput/index.scss | 95 +++++++++++++++++------------ 2 files changed, 72 insertions(+), 44 deletions(-) diff --git a/src/components/TextInput/index.js b/src/components/TextInput/index.js index 62ec3c58..2a1f8efd 100644 --- a/src/components/TextInput/index.js +++ b/src/components/TextInput/index.js @@ -12,13 +12,23 @@ const events = [ const html = `
-
+ `; -export default function InputText() { +export default function InputText({ + placeholder, + assetUrl, + assetPosition, // preffix, suffix + variation, // outlined, standard +}) { Component.call(this, { html, events }); this.disabled = false; + this.placeholder = placeholder; + this.selected.get('input-text').classList.add(variation); + this.selected.get('input-text').backgroundImage = assetUrl; + this.selected.get('input-text').classList.add(assetPosition); + this.selected.get('input-text').addEventListener('focus', () => { if (this.disabled) return; this.classList.remove('input-error'); @@ -31,12 +41,11 @@ InputText.prototype = Object.assign(InputText.prototype, Component.prototype, { this.emit('placeholderChanged', placeholder); }, setAsset(url) { - this.selected.get('input-text').background = `url(${url}) - no-repeat 10px center`; + this.selected.get('input-text').backgroundImage = `url(${url})`; this.emit('inputAssetChanged'); }, - isStandart() { - this.selected.get('input-text').classList.add('standart'); + isStandard() { + this.selected.get('input-text').classList.add('standard'); this.selected.get('input-text').classList.remove('outlined'); }, isOutlined() { diff --git a/src/components/TextInput/index.scss b/src/components/TextInput/index.scss index 008a2843..0c909089 100644 --- a/src/components/TextInput/index.scss +++ b/src/components/TextInput/index.scss @@ -1,65 +1,84 @@ .input-text-container { position: relative; -} -.input-text-container__input { - &.standart { + &__input { width: 100%; font-size: 1rem; - padding: 10px 30px 10px 40px; - border: 1px solid #bfbfbf; - - background: url('https://www.svgrepo.com/show/532555/search.svg') no-repeat - 10px center; + background-repeat: no-repeat; background-size: 20px; filter: opacity(0.85); - border-radius: 4px; - transition: border-color 0.3s ease-in-out; + &.standard { + padding: 0.65rem 1rem; + border: 1px solid #a3a3a3; - &:focus { - border-color: #007bff; + border-radius: 8px; - filter: opacity(1); - outline-color: #007bff; - } + transition: border-color 0.3s ease-in-out; - &.input-error { - border-color: #dc3545; + &.prefix { + padding: 0.8rem 0.8rem 0.8rem 2.5rem; - background-color: #ee727e75; - filter: opacity(0.75); - outline-color: #dc3545; - } - } + background-position: 10px center; + } - &.outlined { - width: 100%; + &.suffix { + padding: 0.8rem 2.5rem 0.8rem 0.8rem; - font-size: 1rem; + background-position: calc(100% - 1rem) center; + } - padding: 8px 5px; - border-bottom: 2px solid #bfbfbf; - border-color: transparent; + &:focus { + border-color: #007bff; - background: none; - outline: none; + filter: opacity(1); + outline-color: #007bff; + } - transition: border-color 0.3s ease-in-out; + &.input-error { + border-color: #dc3545; - &:focus { - border-bottom-color: #007bff; + background-color: #ee727e75; + filter: opacity(0.75); + outline-color: #dc3545; + } } - &.input-error { - border-bottom-color: #dc3545; + &.outlined { + padding: 0.5rem 0.35rem; + border-bottom: 2px solid #bfbfbf; + border-color: transparent; + + outline: none; + + transition: border-color 0.3s ease-in-out; + + &:focus { + border-bottom-color: #007bff; + } + + &.input-error { + border-bottom-color: #dc3545; + + filter: opacity(0.65); + + &::placeholder { + color: #dc3545; + } + } + + &.suffix { + padding: 0.5rem 2.5rem 0.5rem 0.3rem; + + background-position: calc(100% - 1rem) center; + } - filter: opacity(0.65); + &.prefix { + padding: 0.5rem 0.3rem 0.5rem 2.5rem; - &::placeholder { - color: #dc3545; + background-position: 10px center; } } } From 5db2e9ddc26355b23f75b18a4e5b10e9a3115501 Mon Sep 17 00:00:00 2001 From: Mateus Henrique Derossi Date: Wed, 3 Jan 2024 15:59:33 -0300 Subject: [PATCH 3/4] style: changed px to rem in background-position, removed fix #21 --- src/components/TextInput/index.js | 4 ++-- src/components/TextInput/index.scss | 10 +++++----- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/TextInput/index.js b/src/components/TextInput/index.js index 2a1f8efd..a71fe29d 100644 --- a/src/components/TextInput/index.js +++ b/src/components/TextInput/index.js @@ -18,8 +18,8 @@ const html = ` export default function InputText({ placeholder, assetUrl, - assetPosition, // preffix, suffix - variation, // outlined, standard + assetPosition, + variation, }) { Component.call(this, { html, events }); this.disabled = false; diff --git a/src/components/TextInput/index.scss b/src/components/TextInput/index.scss index 0c909089..e6a7701e 100644 --- a/src/components/TextInput/index.scss +++ b/src/components/TextInput/index.scss @@ -7,7 +7,7 @@ font-size: 1rem; background-repeat: no-repeat; - background-size: 20px; + background-size: auto 50%; filter: opacity(0.85); &.standard { @@ -21,13 +21,13 @@ &.prefix { padding: 0.8rem 0.8rem 0.8rem 2.5rem; - background-position: 10px center; + background-position: 0.5rem center; } &.suffix { padding: 0.8rem 2.5rem 0.8rem 0.8rem; - background-position: calc(100% - 1rem) center; + background-position: calc(100% - 0.5rem) center; } &:focus { @@ -72,13 +72,13 @@ &.suffix { padding: 0.5rem 2.5rem 0.5rem 0.3rem; - background-position: calc(100% - 1rem) center; + background-position: calc(100% - 0.5rem) center; } &.prefix { padding: 0.5rem 0.3rem 0.5rem 2.5rem; - background-position: 10px center; + background-position: 0.5rem center; } } } From e62932c011d710273ef2fe28c9b957cf0bbe25cf Mon Sep 17 00:00:00 2001 From: Mateus Henrique Derossi Date: Tue, 9 Jan 2024 10:43:49 -0300 Subject: [PATCH 4/4] fix: fix the logical to set placeholder in the component, rename the events of the component #21 --- src/components/TextInput/index.js | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/components/TextInput/index.js b/src/components/TextInput/index.js index a71fe29d..f914ef62 100644 --- a/src/components/TextInput/index.js +++ b/src/components/TextInput/index.js @@ -2,11 +2,11 @@ import { Component } from 'pet-dex-utilities'; import './index.scss'; const events = [ - 'inputError', - 'inputPlaceholderChanged', - 'inputAssetChanged', - 'inputDisabled', - 'inputEnabled', + 'input:error', + 'inputPlaceholder:changed', + 'inputAsset:changed', + 'input:disabled', + 'input:enabled', ]; const html = ` @@ -24,7 +24,7 @@ export default function InputText({ Component.call(this, { html, events }); this.disabled = false; - this.placeholder = placeholder; + this.setPlaceholder(placeholder); this.selected.get('input-text').classList.add(variation); this.selected.get('input-text').backgroundImage = assetUrl; this.selected.get('input-text').classList.add(assetPosition); @@ -38,11 +38,11 @@ export default function InputText({ InputText.prototype = Object.assign(InputText.prototype, Component.prototype, { setPlaceholder(placeholder) { this.selected.get('input-text').placeholder = placeholder; - this.emit('placeholderChanged', placeholder); + this.emit('inputPlaceholder:changed', placeholder); }, setAsset(url) { this.selected.get('input-text').backgroundImage = `url(${url})`; - this.emit('inputAssetChanged'); + this.emit('inputAsset:changed'); }, isStandard() { this.selected.get('input-text').classList.add('standard'); @@ -54,14 +54,14 @@ InputText.prototype = Object.assign(InputText.prototype, Component.prototype, { }, inputError() { this.selected.get('input-text').classList.add('input-error'); - this.emit('inputError'); + this.emit('input:error'); }, disable() { this.disabled = true; - this.emit('inputDisabled'); + this.emit('input:disabled'); }, enable() { this.disabled = false; - this.emit('inputEnabled'); + this.emit('input:enabled'); }, });