@avakhula/ui 0.0.347 → 0.0.348

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -20480,7 +20480,7 @@ const d0 = {
20480
20480
  type: String
20481
20481
  }
20482
20482
  },
20483
- emits: ["onOverLimitHandler"],
20483
+ emits: ["onOverLimitHandler", "update:modelValue", "change", "blur"],
20484
20484
  mounted() {
20485
20485
  this.$refs.toolbar.classList.remove("ql-toolbar");
20486
20486
  const t = this.$refs.wrapper.querySelector("input[data-link]");
@@ -225,4 +225,4 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
225
225
  <rect x="7" y="9.5" width="11" height="2" rx="1" class="fill" fill="#1A1A1A"/>
226
226
  <rect x="7" y="14.5" width="11" height="2" rx="1" class="fill" fill="#1A1A1A"/>
227
227
  </svg>
228
- `,mp="",lt=_t.import("ui/icons");lt.bold=I1,lt.italic=P1,lt.underline=M1,lt.strike=B1,lt["code-block"]=R1,lt.link=L1,lt.align[""]=j1,lt.align.center=V1,lt.align.right=F1,lt.align.justify=q1,lt.list.ordered=H1,lt.list.bullet=z1,lt["alphabet-list"]=U1,_t.register({"formats/alphabet-list":Yt,"formats/alphabet-list/item":br}),_t.register(lt),_t.debug("error");const K1={name:"IbTextEditor",props:{name:{type:String,required:!0},placeholder:{type:String,default:""},modelValue:{type:String},content:{type:String,default:""},readOnly:{type:Boolean,default:!1},enable:{type:Boolean,default:!0},modules:{type:[Object,Array],default:()=>{}},options:{type:Object,default:()=>{}},characterLimit:{type:[String,Number],default:null},error:{type:Boolean,default:!1},disable:{type:Boolean,default:!1},errorMessage:{type:String,default:""},characterLimitErrorMessage:{type:String,default:""},height:{type:String}},emits:["onOverLimitHandler"],mounted(){this.$refs.toolbar.classList.remove("ql-toolbar");const t=this.$refs.wrapper.querySelector("input[data-link]");t.dataset.link="Enter Link",this.updateCharacterLength()},data(){return{data:this.modelValue?this.modelValue:this.content,characterLength:0,isFocus:!1}},watch:{content(t){this.data=t},data(t){this.$emit("update:modelValue",t)},characterOverLimit(t){this.$emit("onOverLimitHandler",t)}},methods:{onChange(){this.updateCharacterLength(),this.$emit("change",this.data)},onBlur(t){this.$emit("blur",this.data,t),this.isFocus=!1},onFocus(){this.isFocus=!0},updateCharacterLength(){this.characterLength=this.$refs.quill.getText().length-1}},computed:{config(){const t={placeholder:this.data.length?"":this.placeholder,readOnly:this.readOnly?this.readOnly:this.disable,enable:this.enable};return Object.assign(t,this.options)},characterOverLimit(){return!!this.characterLimit&&this.characterLength>this.characterLimit}},components:{QuillEditor:T1,IbIconButton:ht,IbAlert:qt,IbCharacterCount:Do}},G1=["name","disabled","value"],W1={id:"toolbar",class:"toolbar",ref:"toolbar"},Y1=i.createStaticVNode('<div class="toolbar-group header-toolbar-group"><select class="ql-header"><option value="1"></option><option value="2"></option><option value="3"></option><option value="4"></option><option value="5"></option><option value="6"></option><option selected></option></select></div>',1),Z1={class:"toolbar-group"},J1=i.createElementVNode("div",{class:"toolbar-group"},[i.createElementVNode("select",{class:"ql-background"}),i.createElementVNode("select",{class:"ql-color"})],-1),X1={class:"toolbar-group"},Q1={class:"toolbar-group"},e0={class:"toolbar-group"};function t0(t,n,e,o,a,r){const l=i.resolveComponent("ib-character-count"),s=i.resolveComponent("ib-alert"),c=i.resolveComponent("QuillEditor"),h=i.resolveComponent("ib-icon-button");return i.openBlock(),i.createElementBlock("div",{class:i.normalizeClass(["textarea-wrapper",{error:r.characterOverLimit||e.error||e.errorMessage.length,focus:a.isFocus,disable:e.disable}])},[e.characterLimit?(i.openBlock(),i.createBlock(l,{key:0,"character-limit":e.characterLimit,"character-length":a.characterLength},null,8,["character-limit","character-length"])):i.createCommentVNode("",!0),e.errorMessage.length?(i.openBlock(),i.createBlock(s,{key:1,class:"error-message"},{default:i.withCtx(()=>[i.createTextVNode(i.toDisplayString(e.errorMessage),1)]),_:1})):i.createCommentVNode("",!0),i.withDirectives(i.createVNode(s,{class:"error-message"},{default:i.withCtx(()=>[i.createTextVNode(i.toDisplayString(e.characterLimitErrorMessage),1)]),_:1},512),[[i.vShow,e.characterLimitErrorMessage.length&&r.characterOverLimit]]),i.createElementVNode("input",{name:e.name,type:"hidden",disabled:e.disable,value:a.data},null,8,G1),i.createElementVNode("div",{class:i.normalizeClass(["ib-text-editor-wrapper",{disable:e.disable}])},[i.createElementVNode("div",{class:"ib-text-editor",style:i.normalizeStyle({height:e.height?e.height+"px":""}),ref:"wrapper"},[i.createVNode(c,{onTextChange:r.onChange,onBlur:r.onBlur,onFocus:r.onFocus,ref:"quill",toolbar:"#toolbar",content:a.data,"onUpdate:content":n[0]||(n[0]=p=>a.data=p),contentType:"html",options:r.config,modules:e.modules},null,8,["onTextChange","onBlur","onFocus","content","options","modules"])],4),i.createElementVNode("div",W1,[Y1,i.createElementVNode("div",Z1,[i.createVNode(h,{class:"toolbar-item ql-bold",kind:"ghost"}),i.createVNode(h,{class:"toolbar-item ql-italic",kind:"ghost"}),i.createVNode(h,{class:"toolbar-item ql-underline",kind:"ghost"}),i.createVNode(h,{class:"toolbar-item ql-strike",kind:"ghost"})]),J1,i.createElementVNode("div",X1,[i.createVNode(h,{class:"toolbar-item ql-code-block",kind:"ghost"}),i.createVNode(h,{class:"toolbar-item ql-link",kind:"ghost"})]),i.createElementVNode("div",Q1,[i.createVNode(h,{class:"toolbar-item ql-align",kind:"ghost"}),i.createVNode(h,{class:"ql-align toolbar-item",value:"center",kind:"ghost"}),i.createVNode(h,{class:"ql-align toolbar-item",value:"right",kind:"ghost"}),i.createVNode(h,{class:"ql-align toolbar-item",value:"justify",kind:"ghost"})]),i.createElementVNode("div",e0,[i.createVNode(h,{class:"ql-list toolbar-item",value:"ordered",kind:"ghost"}),i.createVNode(h,{class:"ql-list toolbar-item",value:"bullet",kind:"ghost"}),i.createVNode(h,{class:"ql-alphabet-list alphabet-list toolbar-item",kind:"ghost"})])],512)],2)],2)}const n0=_e(K1,[["render",t0]]),gp="",r0={name:"IbTable",computed:{hasThead(){return!!this.$slots.thead}}},i0={class:"ib-table-wrapper"},o0={class:"ib-table"};function a0(t,n,e,o,a,r){return i.openBlock(),i.createElementBlock("div",i0,[i.createElementVNode("table",o0,[r.hasThead?i.renderSlot(t.$slots,"thead",{key:0},void 0,!0):i.createCommentVNode("",!0),i.createElementVNode("tbody",null,[i.renderSlot(t.$slots,"tbody",{},void 0,!0)])])])}const l0=_e(r0,[["render",a0],["__scopeId","data-v-5dceb760"]]),yp="",s0={name:"IbRow"},d0={class:"ib-tr"};function c0(t,n,e,o,a,r){return i.openBlock(),i.createElementBlock("tr",d0,[i.renderSlot(t.$slots,"default",{ref:"row"})])}const u0=_e(s0,[["render",c0]]),vp="",f0={name:"IbCell",props:{fixed:{type:Boolean,default:!1}},data(){return{attr:{}}},mounted(){this.fixed&&this.freezeCol()},methods:{freezeCol(){const t=this.$el.getBoundingClientRect(),n=this.$el.closest("tr").getBoundingClientRect();this.attr.style||(this.attr.style={}),this.attr.style.minWidth=`${t.width}px`,this.attr.style.left=`${t.left-n.left}px`,this.attr.class+=" fixed"}}},h0={class:"cell"};function p0(t,n,e,o,a,r){return i.openBlock(),i.createElementBlock("td",i.mergeProps({onResize:n[0]||(n[0]=(...l)=>r.freezeCol&&r.freezeCol(...l)),class:"ib-cell"},this.attr),[i.createElementVNode("div",h0,[i.renderSlot(t.$slots,"default",{},void 0,!0)])],16)}const Ia=_e(f0,[["render",p0],["__scopeId","data-v-e74bb0f3"]]),bp="",m0={name:"IbCheckboxCell",props:{isChecked:{type:Boolean,default:!1},fixed:{type:Boolean,default:!1}},components:{IbCell:Ia,IbCheckbox:Vr}};function g0(t,n,e,o,a,r){const l=i.resolveComponent("ib-checkbox"),s=i.resolveComponent("ib-cell");return i.openBlock(),i.createBlock(s,{fixed:e.fixed,class:"ib-checkbox-cell"},{default:i.withCtx(()=>[i.createVNode(l,{"is-checked":e.isChecked},null,8,["is-checked"])]),_:1},8,["fixed"])}const y0=_e(m0,[["render",g0]]),mi=new _o,Pa=(t,n)=>{if(Co(t)){const e={title:n.value.title||"",text:typeof n.value=="object"?n.value.text:n.value};mi.createTooltip(t,e)}},Ma=()=>{mi.destroyTooltip()},v0={mounted(t,n){t.addEventListener("mouseenter",()=>Pa(t,n)),t.addEventListener("mouseleave",Ma)},beforeUnmount(t,n){mi.destroyTooltip(),t.removeEventListener("mouseenter",()=>Pa(t,n)),t.removeEventListener("mouseleave",Ma)}};pe.IbAccordion=Ua,pe.IbAlert=qt,pe.IbAvatar=Gl,pe.IbBadge=Zl,pe.IbBreadcrumbs=Od,pe.IbButton=Vi,pe.IbButtonGroup=es,pe.IbCell=Ia,pe.IbCheckbox=Vr,pe.IbCheckboxCell=y0,pe.IbCheckboxGroup=Qc,pe.IbDatePicker=Vu,pe.IbDropdown=er,pe.IbDropdownItem=Lr,pe.IbDropdownList=tr,pe.IbFormGroup=Zc,pe.IbIcon=Le,pe.IbIconButton=ht,pe.IbInput=jr,pe.IbLabel=wn,pe.IbLimitSelector=xo,pe.IbModal=Ks,pe.IbPagination=Cc,pe.IbPanel=Kc,pe.IbPhoneInput=h1,pe.IbPopover=so,pe.IbProgressBar=Ac,pe.IbRadio=lu,pe.IbRow=u0,pe.IbSorting=yd,pe.IbSplitButton=Rs,pe.IbSplitButtonItem=Fs,pe.IbStatusIndicator=Lc,pe.IbTab=ld,pe.IbTabDropdown=vo,pe.IbTable=l0,pe.IbTabs=id,pe.IbTagPill=rs,pe.IbTextEditor=n0,pe.IbTextarea=vu,pe.IbToggle=ko,pe.IbToggleTip=fo,pe.IbTooltip=an,pe.IbTreeSelect=So,pe.OutsideDirective=Xn,pe.TextOverflowTooltipDirective=v0,pe.TooltipDirective=nr,Object.defineProperty(pe,Symbol.toStringTag,{value:"Module"})});
228
+ `,mp="",lt=_t.import("ui/icons");lt.bold=I1,lt.italic=P1,lt.underline=M1,lt.strike=B1,lt["code-block"]=R1,lt.link=L1,lt.align[""]=j1,lt.align.center=V1,lt.align.right=F1,lt.align.justify=q1,lt.list.ordered=H1,lt.list.bullet=z1,lt["alphabet-list"]=U1,_t.register({"formats/alphabet-list":Yt,"formats/alphabet-list/item":br}),_t.register(lt),_t.debug("error");const K1={name:"IbTextEditor",props:{name:{type:String,required:!0},placeholder:{type:String,default:""},modelValue:{type:String},content:{type:String,default:""},readOnly:{type:Boolean,default:!1},enable:{type:Boolean,default:!0},modules:{type:[Object,Array],default:()=>{}},options:{type:Object,default:()=>{}},characterLimit:{type:[String,Number],default:null},error:{type:Boolean,default:!1},disable:{type:Boolean,default:!1},errorMessage:{type:String,default:""},characterLimitErrorMessage:{type:String,default:""},height:{type:String}},emits:["onOverLimitHandler","update:modelValue","change","blur"],mounted(){this.$refs.toolbar.classList.remove("ql-toolbar");const t=this.$refs.wrapper.querySelector("input[data-link]");t.dataset.link="Enter Link",this.updateCharacterLength()},data(){return{data:this.modelValue?this.modelValue:this.content,characterLength:0,isFocus:!1}},watch:{content(t){this.data=t},data(t){this.$emit("update:modelValue",t)},characterOverLimit(t){this.$emit("onOverLimitHandler",t)}},methods:{onChange(){this.updateCharacterLength(),this.$emit("change",this.data)},onBlur(t){this.$emit("blur",this.data,t),this.isFocus=!1},onFocus(){this.isFocus=!0},updateCharacterLength(){this.characterLength=this.$refs.quill.getText().length-1}},computed:{config(){const t={placeholder:this.data.length?"":this.placeholder,readOnly:this.readOnly?this.readOnly:this.disable,enable:this.enable};return Object.assign(t,this.options)},characterOverLimit(){return!!this.characterLimit&&this.characterLength>this.characterLimit}},components:{QuillEditor:T1,IbIconButton:ht,IbAlert:qt,IbCharacterCount:Do}},G1=["name","disabled","value"],W1={id:"toolbar",class:"toolbar",ref:"toolbar"},Y1=i.createStaticVNode('<div class="toolbar-group header-toolbar-group"><select class="ql-header"><option value="1"></option><option value="2"></option><option value="3"></option><option value="4"></option><option value="5"></option><option value="6"></option><option selected></option></select></div>',1),Z1={class:"toolbar-group"},J1=i.createElementVNode("div",{class:"toolbar-group"},[i.createElementVNode("select",{class:"ql-background"}),i.createElementVNode("select",{class:"ql-color"})],-1),X1={class:"toolbar-group"},Q1={class:"toolbar-group"},e0={class:"toolbar-group"};function t0(t,n,e,o,a,r){const l=i.resolveComponent("ib-character-count"),s=i.resolveComponent("ib-alert"),c=i.resolveComponent("QuillEditor"),h=i.resolveComponent("ib-icon-button");return i.openBlock(),i.createElementBlock("div",{class:i.normalizeClass(["textarea-wrapper",{error:r.characterOverLimit||e.error||e.errorMessage.length,focus:a.isFocus,disable:e.disable}])},[e.characterLimit?(i.openBlock(),i.createBlock(l,{key:0,"character-limit":e.characterLimit,"character-length":a.characterLength},null,8,["character-limit","character-length"])):i.createCommentVNode("",!0),e.errorMessage.length?(i.openBlock(),i.createBlock(s,{key:1,class:"error-message"},{default:i.withCtx(()=>[i.createTextVNode(i.toDisplayString(e.errorMessage),1)]),_:1})):i.createCommentVNode("",!0),i.withDirectives(i.createVNode(s,{class:"error-message"},{default:i.withCtx(()=>[i.createTextVNode(i.toDisplayString(e.characterLimitErrorMessage),1)]),_:1},512),[[i.vShow,e.characterLimitErrorMessage.length&&r.characterOverLimit]]),i.createElementVNode("input",{name:e.name,type:"hidden",disabled:e.disable,value:a.data},null,8,G1),i.createElementVNode("div",{class:i.normalizeClass(["ib-text-editor-wrapper",{disable:e.disable}])},[i.createElementVNode("div",{class:"ib-text-editor",style:i.normalizeStyle({height:e.height?e.height+"px":""}),ref:"wrapper"},[i.createVNode(c,{onTextChange:r.onChange,onBlur:r.onBlur,onFocus:r.onFocus,ref:"quill",toolbar:"#toolbar",content:a.data,"onUpdate:content":n[0]||(n[0]=p=>a.data=p),contentType:"html",options:r.config,modules:e.modules},null,8,["onTextChange","onBlur","onFocus","content","options","modules"])],4),i.createElementVNode("div",W1,[Y1,i.createElementVNode("div",Z1,[i.createVNode(h,{class:"toolbar-item ql-bold",kind:"ghost"}),i.createVNode(h,{class:"toolbar-item ql-italic",kind:"ghost"}),i.createVNode(h,{class:"toolbar-item ql-underline",kind:"ghost"}),i.createVNode(h,{class:"toolbar-item ql-strike",kind:"ghost"})]),J1,i.createElementVNode("div",X1,[i.createVNode(h,{class:"toolbar-item ql-code-block",kind:"ghost"}),i.createVNode(h,{class:"toolbar-item ql-link",kind:"ghost"})]),i.createElementVNode("div",Q1,[i.createVNode(h,{class:"toolbar-item ql-align",kind:"ghost"}),i.createVNode(h,{class:"ql-align toolbar-item",value:"center",kind:"ghost"}),i.createVNode(h,{class:"ql-align toolbar-item",value:"right",kind:"ghost"}),i.createVNode(h,{class:"ql-align toolbar-item",value:"justify",kind:"ghost"})]),i.createElementVNode("div",e0,[i.createVNode(h,{class:"ql-list toolbar-item",value:"ordered",kind:"ghost"}),i.createVNode(h,{class:"ql-list toolbar-item",value:"bullet",kind:"ghost"}),i.createVNode(h,{class:"ql-alphabet-list alphabet-list toolbar-item",kind:"ghost"})])],512)],2)],2)}const n0=_e(K1,[["render",t0]]),gp="",r0={name:"IbTable",computed:{hasThead(){return!!this.$slots.thead}}},i0={class:"ib-table-wrapper"},o0={class:"ib-table"};function a0(t,n,e,o,a,r){return i.openBlock(),i.createElementBlock("div",i0,[i.createElementVNode("table",o0,[r.hasThead?i.renderSlot(t.$slots,"thead",{key:0},void 0,!0):i.createCommentVNode("",!0),i.createElementVNode("tbody",null,[i.renderSlot(t.$slots,"tbody",{},void 0,!0)])])])}const l0=_e(r0,[["render",a0],["__scopeId","data-v-5dceb760"]]),yp="",s0={name:"IbRow"},d0={class:"ib-tr"};function c0(t,n,e,o,a,r){return i.openBlock(),i.createElementBlock("tr",d0,[i.renderSlot(t.$slots,"default",{ref:"row"})])}const u0=_e(s0,[["render",c0]]),vp="",f0={name:"IbCell",props:{fixed:{type:Boolean,default:!1}},data(){return{attr:{}}},mounted(){this.fixed&&this.freezeCol()},methods:{freezeCol(){const t=this.$el.getBoundingClientRect(),n=this.$el.closest("tr").getBoundingClientRect();this.attr.style||(this.attr.style={}),this.attr.style.minWidth=`${t.width}px`,this.attr.style.left=`${t.left-n.left}px`,this.attr.class+=" fixed"}}},h0={class:"cell"};function p0(t,n,e,o,a,r){return i.openBlock(),i.createElementBlock("td",i.mergeProps({onResize:n[0]||(n[0]=(...l)=>r.freezeCol&&r.freezeCol(...l)),class:"ib-cell"},this.attr),[i.createElementVNode("div",h0,[i.renderSlot(t.$slots,"default",{},void 0,!0)])],16)}const Ia=_e(f0,[["render",p0],["__scopeId","data-v-e74bb0f3"]]),bp="",m0={name:"IbCheckboxCell",props:{isChecked:{type:Boolean,default:!1},fixed:{type:Boolean,default:!1}},components:{IbCell:Ia,IbCheckbox:Vr}};function g0(t,n,e,o,a,r){const l=i.resolveComponent("ib-checkbox"),s=i.resolveComponent("ib-cell");return i.openBlock(),i.createBlock(s,{fixed:e.fixed,class:"ib-checkbox-cell"},{default:i.withCtx(()=>[i.createVNode(l,{"is-checked":e.isChecked},null,8,["is-checked"])]),_:1},8,["fixed"])}const y0=_e(m0,[["render",g0]]),mi=new _o,Pa=(t,n)=>{if(Co(t)){const e={title:n.value.title||"",text:typeof n.value=="object"?n.value.text:n.value};mi.createTooltip(t,e)}},Ma=()=>{mi.destroyTooltip()},v0={mounted(t,n){t.addEventListener("mouseenter",()=>Pa(t,n)),t.addEventListener("mouseleave",Ma)},beforeUnmount(t,n){mi.destroyTooltip(),t.removeEventListener("mouseenter",()=>Pa(t,n)),t.removeEventListener("mouseleave",Ma)}};pe.IbAccordion=Ua,pe.IbAlert=qt,pe.IbAvatar=Gl,pe.IbBadge=Zl,pe.IbBreadcrumbs=Od,pe.IbButton=Vi,pe.IbButtonGroup=es,pe.IbCell=Ia,pe.IbCheckbox=Vr,pe.IbCheckboxCell=y0,pe.IbCheckboxGroup=Qc,pe.IbDatePicker=Vu,pe.IbDropdown=er,pe.IbDropdownItem=Lr,pe.IbDropdownList=tr,pe.IbFormGroup=Zc,pe.IbIcon=Le,pe.IbIconButton=ht,pe.IbInput=jr,pe.IbLabel=wn,pe.IbLimitSelector=xo,pe.IbModal=Ks,pe.IbPagination=Cc,pe.IbPanel=Kc,pe.IbPhoneInput=h1,pe.IbPopover=so,pe.IbProgressBar=Ac,pe.IbRadio=lu,pe.IbRow=u0,pe.IbSorting=yd,pe.IbSplitButton=Rs,pe.IbSplitButtonItem=Fs,pe.IbStatusIndicator=Lc,pe.IbTab=ld,pe.IbTabDropdown=vo,pe.IbTable=l0,pe.IbTabs=id,pe.IbTagPill=rs,pe.IbTextEditor=n0,pe.IbTextarea=vu,pe.IbToggle=ko,pe.IbToggleTip=fo,pe.IbTooltip=an,pe.IbTreeSelect=So,pe.OutsideDirective=Xn,pe.TextOverflowTooltipDirective=v0,pe.TooltipDirective=nr,Object.defineProperty(pe,Symbol.toStringTag,{value:"Module"})});
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@avakhula/ui",
3
- "version": "0.0.347",
3
+ "version": "0.0.348",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.umd.cjs",
6
6
  "source": "src/index.js",
package/src/App.vue CHANGED
@@ -5,6 +5,8 @@
5
5
  </template>
6
6
  </ib-select>
7
7
 
8
+ <ib-toggle :disabled="true"></ib-toggle>
9
+
8
10
 
9
11
  </template>
10
12
 
@@ -13,6 +15,7 @@ import IbSelect from "./components/TreeSelect/Select.vue";
13
15
  import label from "@/components/Form/Label/Label.vue";
14
16
  import {IbCheckboxGroup} from "./index.js";
15
17
  import {IbRadio} from "./index.js";
18
+ import IbToggle from "@/components/Form/Toggle/Toggle.vue";
16
19
  const testData1 = [
17
20
  {
18
21
  id: "1",
@@ -140,6 +143,6 @@ export default {
140
143
  checked: '1'
141
144
  }
142
145
  },
143
- components: {IbSelect, IbCheckboxGroup, IbRadio}
146
+ components: {IbToggle, IbSelect, IbCheckboxGroup, IbRadio}
144
147
  }
145
148
  </script>
@@ -240,7 +240,7 @@ export default {
240
240
  type: String,
241
241
  },
242
242
  },
243
- emits: ['onOverLimitHandler'],
243
+ emits: ['onOverLimitHandler', 'update:modelValue', 'change', 'blur'],
244
244
  mounted() {
245
245
  // Reset default styles for toolbar
246
246
  this.$refs.toolbar.classList.remove("ql-toolbar");