@kelvininc/ui-components
Version:
Kelvin UI Components
1 lines • 4.51 kB
JavaScript
import{r as i,c as t,h as e,H as s,F as n,g as l}from"./p-D-JVwta2.js";import{E as a}from"./p-DVds6a5Z.js";import{E as o}from"./p-SVedE_O8.js";const h=class{constructor(e){i(this,e),this.contentEdited=t(this,"contentEdited",7),this.contentFocused=t(this,"contentFocused",7),this.contentBlured=t(this,"contentBlured",7),this.maxLength=64,this.isHovering=!1,this.isEditing=!1,this.isSaving=!1,this.isSaveDisabled=!1,this.discardContent=()=>{this.slotEl.innerText=this.value},this.saveChanges=()=>{this.slotEl.blur();const i=this.slotEl.innerText;0!==i.length&&i!==this.value&&(this.isSaving=!0,this.contentEdited.emit(i))},this.handleBlur=()=>{this.slotEl.innerText=this.slotEl.innerText.trim(),this.timeoutID=window.setTimeout((()=>{this.isSaving||this.discardContent(),this.isEditing=!1,this.isSaving=!1,this.contentBlured.emit()}),200)},this.handleFocus=()=>{clearTimeout(this.timeoutID),this.isEditing=!0,this.contentFocused.emit(),this.checkSaveBtnDisabled()},this.handleMaxLength=i=>{this.maxLength&&this.slotEl.innerText.length>=this.maxLength&&i.preventDefault()},this.checkSaveBtnDisabled=()=>{this.isSaveDisabled=0===this.slotEl.innerText.trim().length}}async resetContent(){this.discardContent(),this.slotEl.blur()}handleMouseHover(){this.isHovering=!0}handleMouseLeave(){this.isHovering=!1}handleKeyDown(i){if(this.isEditing&&!this.disabled)switch(i.key){case"Escape":this.slotEl.blur();break;case"Enter":this.saveChanges();break;case"Backspace":break;default:this.handleMaxLength(i)}}handleDisableChange(i){i?this.destroyEditableContent():this.initializeEditableContent()}initializeEditableContent(){this.slotEl.classList.add("inline-editable-field-slot"),this.slotEl.setAttribute("contenteditable","true"),this.slotEl.addEventListener("blur",this.handleBlur),this.slotEl.addEventListener("focus",this.handleFocus),this.slotEl.addEventListener("input",this.checkSaveBtnDisabled)}destroyEditableContent(){this.slotEl&&(this.slotEl.classList.remove("inline-editable-field-slot"),this.slotEl.removeAttribute("contenteditable"),this.slotEl.removeEventListener("blur",this.handleBlur),this.slotEl.removeEventListener("focus",this.handleFocus),this.slotEl.removeEventListener("input",this.checkSaveBtnDisabled))}connectedCallback(){if(!this.disabled){if(1!==this.el.children.length)throw new Error("Inline editable field must have exactly one child element to be editable");this.slotEl=this.el.children[0],this.initializeEditableContent()}}disconnectedCallback(){this.destroyEditableContent()}render(){return this.disabled?e(s,null,e("slot",null)):e(s,{class:{"inline-editable-field-container":!0,"inline-editable-field-container__hover":this.isHovering}},e("slot",null),e("div",{class:{"inline-editable-field-actions":!0,"inline-editable-field-actions__focus":this.isEditing}},this.isEditing&&e(n,null,e("kv-action-button-icon",{type:a.Ghost,icon:o.Close,onClickButton:this.discardContent}),e("kv-action-button-icon",{type:a.Ghost,icon:o.DoneAll,disabled:this.isSaveDisabled,onClickButton:this.saveChanges}))))}get el(){return l(this)}static get watchers(){return{disabled:["handleDisableChange"]}}};h.style='@property --rotation{syntax:"<angle>";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}.inline-editable-field-container{display:inline-flex;align-items:center;width:100%;--margin-top-bottom:var(--kv-spacing, 4px);--margin-left-right:var(--kv-spacing-2x, 8px)}.inline-editable-field-container__hover .inline-editable-field-slot{border-radius:4px;background:var(--kv-neutral-8, #202020)}.inline-editable-field-slot[contenteditable]{padding:var(--margin-top-bottom) var(--margin-left-right);margin:calc(var(--margin-top-bottom) * -1) calc(var(--margin-left-right) * -1);white-space:nowrap;overflow:hidden;outline:1px solid transparent;transition:all 0.25s ease-in-out}.inline-editable-field-slot[contenteditable]:hover,.inline-editable-field-slot[contenteditable]:focus{border-radius:4px;background:var(--kv-neutral-8, #202020)}.inline-editable-field-slot[contenteditable]:focus{outline-color:var(--kv-neutral-2, #e5e5e5);text-overflow:unset}.inline-editable-field-slot br{display:none}.inline-editable-field-slot *{display:inline;white-space:nowrap}.inline-editable-field-actions{display:inline-flex;gap:var(--kv-spacing, 4px);flex:0;margin-left:calc(var(--margin-left-right) + var(--kv-spacing-2x, 8px))}.inline-editable-field-actions__focus{width:64px;align-self:flex-end;margin-bottom:calc(var(--margin-left-right) * -1)}';export{h as kv_inline_editable_field}