this.tags.size&&(this.input.readOnly=!1)}handleClick(t){t.target.closest(".tag")?this.removeTag(t.target.closest(".tag")):this.input.focus()}removeTag(t){this.tags.delete(t.dataset.value),t.remove(),this.tags.size||this.placeholder.classList.remove("hide")}connectedCallback(){this.input.addEventListener("input",this.handleInput),this.input.addEventListener("keydown",this.handleKeydown),this.tagsWrapper.addEventListener("click",this.handleClick)}attributeChangedCallback(t,e,n){"placeholder"===t&&(this.placeholder.textContent=n),"limit"===t&&(this.limit=parseInt(n))}disconnectedCallback(){this.input.removeEventListener("input",this.handleInput),this.input.removeEventListener("keydown",this.handleKeydown),this.tagsWrapper.removeEventListener("click",this.handleClick)}});
\ No newline at end of file
diff --git a/components/dist/textarea.js b/components/dist/textarea.js
index 084a560..82d5c07 100644
--- a/components/dist/textarea.js
+++ b/components/dist/textarea.js
@@ -23,11 +23,10 @@ smTextarea.innerHTML = `
--danger-color: red;
--border-radius: 0.3rem;
--background: rgba(var(--text-color), 0.06);
- --padding-right: initial;
- --padding-left: initial;
+ --padding: initial;
--max-height: 8rem;
}
-:host(.outlined) .textarea {
+:host([variant="outlined"]) .textarea {
box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 0.4) inset;
background: rgba(var(--background-color), 1);
}
@@ -43,8 +42,7 @@ smTextarea.innerHTML = `
max-height: var(--max-height);
background: var(--background);
border-radius: var(--border-radius);
- padding-left: var(--padding-left);
- padding-right: var(--padding-right);
+ padding: var(--padding);
}
.textarea::after,
textarea{
@@ -77,10 +75,6 @@ textarea{
.textarea:focus-within:not(.readonly){
box-shadow: 0 0 0 0.1rem var(--accent-color) inset;
}
-.disabled{
- pointer-events: none;
- opacity: 0.6;
-}
.placeholder{
position: absolute;
margin: 0.7rem 1rem;
@@ -91,6 +85,10 @@ textarea{
pointer-events: none;
user-select: none;
}
+:host([disabled]) .textarea{
+ cursor: not-allowed;
+ opacity: 0.6;
+}
@media (any-hover: hover){
::-webkit-scrollbar{
width: 0.5rem;
@@ -122,7 +120,7 @@ customElements.define('sm-textarea',
this.textarea = this.shadowRoot.querySelector('textarea')
this.textareaBox = this.shadowRoot.querySelector('.textarea')
this.placeholder = this.shadowRoot.querySelector('.placeholder')
- this.reflectedAttributes = ['required', 'readonly', 'rows', 'minlength', 'maxlength']
+ this.reflectedAttributes = ['disabled', 'required', 'readonly', 'rows', 'minlength', 'maxlength']
this.reset = this.reset.bind(this)
this.focusIn = this.focusIn.bind(this)
@@ -130,7 +128,7 @@ customElements.define('sm-textarea',
this.checkInput = this.checkInput.bind(this)
}
static get observedAttributes() {
- return ['value', 'placeholder', 'required', 'readonly', 'rows', 'minlength', 'maxlength']
+ return ['disabled', 'value', 'placeholder', 'required', 'readonly', 'rows', 'minlength', 'maxlength']
}
get value() {
return this.textarea.value
@@ -139,6 +137,16 @@ customElements.define('sm-textarea',
this.setAttribute('value', val)
this.fireEvent()
}
+ get disabled() {
+ return this.hasAttribute('disabled')
+ }
+ set disabled(val) {
+ if (val) {
+ this.setAttribute('disabled', '')
+ } else {
+ this.removeAttribute('disabled')
+ }
+ }
get isValid() {
return this.textarea.checkValidity()
}
@@ -177,7 +185,7 @@ customElements.define('sm-textarea',
this.textarea.setAttribute(name, this.getAttribute(name) ? this.getAttribute(name) : '')
}
else {
- this.input.removeAttribute(name)
+ this.textContent.removeAttribute(name)
}
}
else if (name === 'placeholder') {
diff --git a/components/dist/textarea.min.js b/components/dist/textarea.min.js
index 92856ae..c0edd84 100644
--- a/components/dist/textarea.min.js
+++ b/components/dist/textarea.min.js
@@ -1 +1 @@
-const smTextarea=document.createElement("template");smTextarea.innerHTML='\n\n\n',customElements.define("sm-textarea",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smTextarea.content.cloneNode(!0)),this.textarea=this.shadowRoot.querySelector("textarea"),this.textareaBox=this.shadowRoot.querySelector(".textarea"),this.placeholder=this.shadowRoot.querySelector(".placeholder"),this.reflectedAttributes=["required","readonly","rows","minlength","maxlength"],this.reset=this.reset.bind(this),this.focusIn=this.focusIn.bind(this),this.fireEvent=this.fireEvent.bind(this),this.checkInput=this.checkInput.bind(this)}static get observedAttributes(){return["value","placeholder","required","readonly","rows","minlength","maxlength"]}get value(){return this.textarea.value}set value(e){this.setAttribute("value",e),this.fireEvent()}get isValid(){return this.textarea.checkValidity()}reset(){this.setAttribute("value","")}focusIn(){this.textarea.focus()}fireEvent(){let e=new Event("input",{bubbles:!0,cancelable:!0,composed:!0});this.dispatchEvent(e)}checkInput(){this.hasAttribute("placeholder")&&""!==this.getAttribute("placeholder")&&(""!==this.textarea.value?this.placeholder.classList.add("hide"):this.placeholder.classList.remove("hide"))}connectedCallback(){this.textarea.addEventListener("input",e=>{this.textareaBox.dataset.value=this.textarea.value,this.checkInput()})}attributeChangedCallback(e,t,n){this.reflectedAttributes.includes(e)?this.hasAttribute(e)?this.textarea.setAttribute(e,this.getAttribute(e)?this.getAttribute(e):""):this.input.removeAttribute(e):"placeholder"===e?this.placeholder.textContent=this.getAttribute("placeholder"):"value"===e&&(this.textarea.value=n,this.textareaBox.dataset.value=n,this.checkInput())}});
\ No newline at end of file
+const smTextarea=document.createElement("template");smTextarea.innerHTML='\n\n\n',customElements.define("sm-textarea",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smTextarea.content.cloneNode(!0)),this.textarea=this.shadowRoot.querySelector("textarea"),this.textareaBox=this.shadowRoot.querySelector(".textarea"),this.placeholder=this.shadowRoot.querySelector(".placeholder"),this.reflectedAttributes=["disabled","required","readonly","rows","minlength","maxlength"],this.reset=this.reset.bind(this),this.focusIn=this.focusIn.bind(this),this.fireEvent=this.fireEvent.bind(this),this.checkInput=this.checkInput.bind(this)}static get observedAttributes(){return["disabled","value","placeholder","required","readonly","rows","minlength","maxlength"]}get value(){return this.textarea.value}set value(e){this.setAttribute("value",e),this.fireEvent()}get disabled(){return this.hasAttribute("disabled")}set disabled(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get isValid(){return this.textarea.checkValidity()}reset(){this.setAttribute("value","")}focusIn(){this.textarea.focus()}fireEvent(){let e=new Event("input",{bubbles:!0,cancelable:!0,composed:!0});this.dispatchEvent(e)}checkInput(){this.hasAttribute("placeholder")&&""!==this.getAttribute("placeholder")&&(""!==this.textarea.value?this.placeholder.classList.add("hide"):this.placeholder.classList.remove("hide"))}connectedCallback(){this.textarea.addEventListener("input",e=>{this.textareaBox.dataset.value=this.textarea.value,this.checkInput()})}attributeChangedCallback(e,t,n){this.reflectedAttributes.includes(e)?this.hasAttribute(e)?this.textarea.setAttribute(e,this.getAttribute(e)?this.getAttribute(e):""):this.textContent.removeAttribute(e):"placeholder"===e?this.placeholder.textContent=this.getAttribute("placeholder"):"value"===e&&(this.textarea.value=n,this.textareaBox.dataset.value=n,this.checkInput())}});
\ No newline at end of file
diff --git a/components/index.html b/components/index.html
index fd04657..3c2b3b8 100644
--- a/components/index.html
+++ b/components/index.html
@@ -453,10 +453,57 @@
Copy
-
- To start using SM Components
-
+ Interactive demo
+
+
+<sm-copy value="copy this message"></sm-copy>
+
+
+ Attributes
+
+
+
Attribute
+ Description
+
+
+
value ( string )
+
+ Defines content that will be copied when copy button is clicked
+
+
Styling
+ CSS variables used to style this component
+
+
+
Variable
+ Description
+
+
+
--button-background-color
+
+ Defines background color of copy button
+
+
+
--button-border-radius
+
+ Defines border-radius of copy button
+
+
Usage
+
+
+<sm-copy id="text_to_copy" value="sample text"></sm-copy>
+<script>
+ const textToCopy = document.getElementById('text_to_copy')
+ textToCopy.value = 'Different value'; /* Setting value to be copied */
+</script>
+
+
+
@@ -528,7 +575,7 @@
reset()
- When this function is called upon form element. all the form elements (sm- form elements
+ When this function is called upon form element. all the form elements (sm- form components
only) will be reset to default state.
@@ -618,6 +665,19 @@
function.
+
+
disabled
+
+ Set disabled state to true or false
+
+
+
value
+
+ Sets the value of input with JS
+
+
@@ -750,13 +810,153 @@
Popups are used to show addition UI elements that you may want to hide at first and reveal them when
needed.
-
-
Supported events
These are the events that will be fired when component state changes
Event
Description
change
Whenever a different options is selected by user the this event is fired.
You can listen to this event and access the current value with event object event.detail.value
+
Supported events
These are the events that will be fired when component state changes
Event
Description
change
Whenever a different options is selected by user the this event is fired.
You can listen to this event and access the current value with event object event.detail.value
Usage
<sm-select id="my_select">
<sm-option value="1">option1</sm-option>
@@ -146,7 +177,96 @@
<sm-spinner></sm-spinner>
-
Strip select
To start using SM Components
MovieTV seriesVideoMusicTabs
To start using SM Components
AudioVideogjdhnsrfijbgn
bdfjnbjjadifjoaijdiajdo dosfighjoi
flkmgklfmzkl
hbdsfhbTags input
To start using SM Components
Textarea
To start using SM Components
Text field
To start using SM Components
Theme toggle
Use theme-toggle to create light/dark theme easily with CSS variables.
When this is toggled by user the component changes the custom data attribute data-theme="" on HTML body tag to either light or dark
By default theme is set to OS level preferred-color-scheme ( supported by Android, iOS, Windows and MacOS ).
Interactive demo
HTML
+
Strip select
This is a modern interpritation of classical HTML select tag. More suitable for touch devices,
Interactive demo
Sort byRelevancePopularityPriceRating
+
+<strip-select id="sort_by">
+ <strip-option value="relevance" selected>Relevance</strip-option>
+ <strip-option value="popularity">Popularity</strip-option>
+ <strip-option value="price">Price</strip-option>
+ <strip-option value="rating">Rating</strip-option>
+</strip-select>
+
+
Custom attributes
Attribute
Description
multiline( Boolean )
If present, options will wrap around instead of overflowing horizontally.
Styling
CSS variables used to style this component
Variable
Description
--gap
Defines space between options. Default is "0.5rem".
Supported events
These are the events that will be fired when component state changes
Event
Description
change
Whenever a different options is selected by user the this event is fired.
You can listen to this event and access the current value with event object event.detail.value
Usage
+
+<strip-select id="sort_by">
+ <strip-option value="relevance" selected>Relevance</strip-option>
+ <strip-option value="popularity">Popularity</strip-option>
+ <strip-option value="price">Price</strip-option>
+ <strip-option value="rating">Rating</strip-option>
+</strip-select>
+<script>
+ const sortBy = document.getElementById('sort_by')
+ sortBy.addEventListener('change', event => {
+ console.log(event.detail.value) // logs out value of selected option
+ })
+</script>
+
+
Tabs
This component can be used sub-page navigation.
Usage
+
+<sm-tab-header target="tab1">
+ <sm-tab>
+ tab name
+ </sm-tab>
+ <sm-tab>
+ tab name
+ </sm-tab>
+</sm-tab-header>
+<sm-tab-panels id="tab1">
+ <section>
+ <!-- Panel content -->
+ </section>
+ <section>
+ <!-- Panel content -->
+ </section>
+</sm-tab-panels>
+
+
There are three components that together make the tabs components.
- sm-tab-header
- sm-tab
- sm-tab-panels
sm-tab-header
This is the first half of tabs that include the tabs header and actual tab buttons.
+
+<sm-tab-header variant="tab" target="tab2">
+ <sm-tab>Audio</sm-tab>
+ <sm-tab>Video</sm-tab>
+</sm-tab-header>
+
+
Supported attributes
Attribute
Description
variant ( string )
Specifies variant of sm-tab-header. Only value can be tab
target ( string )
Pass in the ID of respective sm-tab-panels to link them. This is how sm-tab-header communicates with sm-tab-panel on which tab or panel should be displayed.
Interactive demo
AudioVideoAudio
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem esse quod quae repellat qui. Expedita fugiat voluptates beatae itaque corporis!
Video
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem esse quod quae repellat qui. Expedita fugiat voluptates beatae itaque corporis!
Variants
tab is the only other variant than default style.
AudioVideoAudio
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem esse quod quae repellat qui. Expedita fugiat voluptates beatae itaque corporis!
Video
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem esse quod quae repellat qui. Expedita fugiat voluptates beatae itaque corporis!
+
+<sm-tab-header variant="tab" target="tab2">
+ <sm-tab>Audio</sm-tab>
+ <sm-tab>Video</sm-tab>
+</sm-tab-header>
+
+
Tags input
This component has a very specific use case and that is for accepting tags. Each time user presses enter or space, a new tag is created. Only unique values are allowed.
Interactive demo
+
+<tags-input placeholder="Add tags..."></tags-input>
+
+
Attributes
Attribute
Description
placeholder ( string )
Define some string to let user know which kind of input is required.
limit ( number )
Set a limit of tags that will be accepted atmost
Styling
CSS variables used to style this component
Variable
Description
--background
Defines background of tags-input. Any valid CSS background property values are supported.
--border-radius
Defines border-radius of tags-input
Supported functions
Function
Description
focusIn()
To give focus to this component use this function instead of focus()
reset()
When this function is called value will be set to empty string.
Usage
+
+<tags-input id="get_tags" placeholder="Add tags..."></tags-input>
+<script>
+ const getTags = document.getElementById('get_tags')
+ console.log(getTags.value); /* returns an array of string that are user input */
+</script>
+
+
Textarea
Textarea is suitable component where multiline input is required. you can either specify the number of lines textarea should expand or let the textarea expand according to user input until a max-height is reached.
Interactive demo
+
+<sm-textarea id="my_textarea" placeholder="Add some text here..." rows="4"></sm-textarea>
+
+
Variants
outlined is only one styled variation. Default is filled which doesn't require variant specified.
+
+<sm-textarea placeholder="This is a textarea" variant="outlined"></sm-textarea>
+
+
Supported Attributes
All the native HTML textarea attributes are valid.
Attribute
Description
disabled (boolean)
If present, all the interactions will be blocked.
rows (number)
Sets the number of rows textarea will be expanded by default. Default is "1".
value (string)
Sets the default value of textarea.
Styling
CSS variables used to style this component
Variable
Description
--background
Defines background textarea. Any valid CSS background property values are supported.
--border-radius
Defines border-radius of textarea
--max-height
Defines max-height to which textarea is allowed to expand. Default is "8rem"
Supported functions
Function
Description
focusIn()
To give focus to this component use this function instead of focus()
reset()
When this function is called value will be set to empty string.
Setters
Function
Description
disabled
Set disabled state to true or false
value
Sets the value of textarea with JS
Usage
+
+<sm-textarea placeholder="This is a textarea" id="my_textarea"></sm-textarea>
+<script>
+ const myTextarea = document.getElelementById('my_textarea')
+ myTextarea.value = 'some string'; /* setting value of textarea */
+
+ myTextarea.addEventListener('input', event => {
+ const value = event.target.value; /* accessing value of textarea */
+ })
+</script>
+
+
Text field
To start using SM Components
Theme toggle
Use theme-toggle to create light/dark theme easily with CSS variables.
When this is toggled by user the component changes the custom data attribute data-theme="" on HTML body tag to either light or dark
By default theme is set to OS level preferred-color-scheme ( supported by Android, iOS, Windows and MacOS ).
Interactive demo
HTML
<theme-toggle></theme-toggle>
@@ -290,7 +410,7 @@
async function showPopup(popup, pinned) {
zIndex++
getRef(popup).setAttribute('style', `z-index: ${zIndex}`)
- popupStack = getRef(popup).show(pinned, popupStack)
+ popupStack = getRef(popup).show({ pinned, popupStack })
return getRef(popup);
}