balm-ui/components/form-field/index.js

A modular and customizable UI library based on Material Design and Vue 3

!function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t(require("vue")):"function"===typeof define&&define.amd?define("UiFormField",["vue"],t):"object"===typeof exports?exports.UiFormField=t(require("vue")):e.UiFormField=t(e.Vue)}("undefined"!==typeof self?self:this,(function(e){return function(){"use strict";var t={744:function(e){var t=function(e){return function(e){return!!e&&"object"===typeof e}(e)&&!function(e){var t=Object.prototype.toString.call(e);return"[object RegExp]"===t||"[object Date]"===t||function(e){return e.$$typeof===n}(e)}(e)};var n="function"===typeof Symbol&&Symbol.for?Symbol.for("react.element"):60103;function r(e,t){return!1!==t.clone&&t.isMergeableObject(e)?c((n=e,Array.isArray(n)?[]:{}),e,t):e;var n}function o(e,t,n){return e.concat(t).map((function(e){return r(e,n)}))}function i(e){return Object.keys(e).concat(function(e){return Object.getOwnPropertySymbols?Object.getOwnPropertySymbols(e).filter((function(t){return Object.propertyIsEnumerable.call(e,t)})):[]}(e))}function a(e,t){try{return t in e}catch(n){return!1}}function u(e,t,n){var o={};return n.isMergeableObject(e)&&i(e).forEach((function(t){o[t]=r(e[t],n)})),i(t).forEach((function(i){(function(e,t){return a(e,t)&&!(Object.hasOwnProperty.call(e,t)&&Object.propertyIsEnumerable.call(e,t))})(e,i)||(a(e,i)&&n.isMergeableObject(t[i])?o[i]=function(e,t){if(!t.customMerge)return c;var n=t.customMerge(e);return"function"===typeof n?n:c}(i,n)(e[i],t[i],n):o[i]=r(t[i],n))})),o}function c(e,n,i){(i=i||{}).arrayMerge=i.arrayMerge||o,i.isMergeableObject=i.isMergeableObject||t,i.cloneUnlessOtherwiseSpecified=r;var a=Array.isArray(n);return a===Array.isArray(e)?a?i.arrayMerge(e,n,i):u(e,n,i):r(n,i)}c.all=function(e,t){if(!Array.isArray(e))throw new Error("first argument should be an array");return e.reduce((function(e,n){return c(e,n,t)}),{})};var l=c;e.exports=l},154:function(t){t.exports=e}},n={};function r(e){var o=n[e];if(void 0!==o)return o.exports;var i=n[e]={exports:{}};return t[e](i,i.exports,r),i.exports}r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,{a:t}),t},r.d=function(e,t){for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)};var o={};r.d(o,{default:function(){return A}});var i=r(744),a=r.n(i);const u=/(?:^\[object\s(.*?)\]$)/;var c=e=>Object.prototype.toString.call(e).replace(u,"$1").toLowerCase();const l=e=>{let{componentProps:t,propName:n,props:r}=e,o=r[n];if("object"===c(o)){const e=t[n].default;t[n].default=()=>a()(e,o)}else Array.isArray(o)?t[n].default=()=>o:t[n].default=o},p=e=>{let{componentMixins:t,propName:n,props:r}=e;if(t.length){let e=t.length;for(;e--;)if(t[e].props&&void 0!==t[e].props[n]){l({componentProps:t[e].props,propName:n,props:r});break}}};var f=(e,t)=>{for(const n of Object.keys(t))e.props?void 0===e.props[n]?p({componentMixins:e.mixins,propName:n,props:t}):l({componentProps:e.props,propName:n,props:t}):p({componentMixins:e.mixins,propName:n,props:t})};var s=e=>{const t={install(t){f(e,arguments.length>1&&void 0!==arguments[1]?arguments[1]:{}),t.component(e.name,e)}};return t},d=r(154),m=function(e,t){return m=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])},m(e,t)};function y(e,t){if("function"!==typeof t&&null!==t)throw new TypeError("Class extends value "+String(t)+" is not a constructor or null");function n(){this.constructor=e}m(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}var v=function(){return v=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var o in t=arguments[n])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},v.apply(this,arguments)};Object.create;function b(e,t){var n="function"===typeof Symbol&&e[Symbol.iterator];if(!n)return e;var r,o,i=n.call(e),a=[];try{for(;(void 0===t||t-- >0)&&!(r=i.next()).done;)a.push(r.value)}catch(u){o={error:u}}finally{try{r&&!r.done&&(n=i.return)&&n.call(i)}finally{if(o)throw o.error}}return a}function g(e,t,n){if(n||2===arguments.length)for(var r,o=0,i=t.length;o<i;o++)!r&&o in t||(r||(r=Array.prototype.slice.call(t,0,o)),r[o]=t[o]);return e.concat(r||Array.prototype.slice.call(t))}Object.create;"function"===typeof SuppressedError&&SuppressedError;var h=function(){function e(e){void 0===e&&(e={}),this.adapter=e}return Object.defineProperty(e,"cssClasses",{get:function(){return{}},enumerable:!1,configurable:!0}),Object.defineProperty(e,"strings",{get:function(){return{}},enumerable:!1,configurable:!0}),Object.defineProperty(e,"numbers",{get:function(){return{}},enumerable:!1,configurable:!0}),Object.defineProperty(e,"defaultAdapter",{get:function(){return{}},enumerable:!1,configurable:!0}),e.prototype.init=function(){},e.prototype.destroy=function(){},e}(),O=function(){function e(e,t){for(var n=[],r=2;r<arguments.length;r++)n[r-2]=arguments[r];this.root=e,this.initialize.apply(this,g([],b(n))),this.foundation=void 0===t?this.getDefaultFoundation():t,this.foundation.init(),this.initialSyncWithDOM()}return e.attachTo=function(t){return new e(t,new h({}))},e.prototype.initialize=function(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t]},e.prototype.getDefaultFoundation=function(){throw new Error("Subclasses must override getDefaultFoundation to return a properly configured foundation class")},e.prototype.initialSyncWithDOM=function(){},e.prototype.destroy=function(){this.foundation.destroy()},e.prototype.listen=function(e,t,n){this.root.addEventListener(e,t,n)},e.prototype.unlisten=function(e,t,n){this.root.removeEventListener(e,t,n)},e.prototype.emit=function(e,t,n){var r;void 0===n&&(n=!1),"function"===typeof CustomEvent?r=new CustomEvent(e,{bubbles:n,detail:t}):(r=document.createEvent("CustomEvent")).initCustomEvent(e,n,!1,t),this.root.dispatchEvent(r)},e}(),j={ROOT:"mdc-form-field"},E={LABEL_SELECTOR:".mdc-form-field > label"},w=function(e){function t(n){var r=e.call(this,v(v({},t.defaultAdapter),n))||this;return r.click=function(){r.handleClick()},r}return y(t,e),Object.defineProperty(t,"cssClasses",{get:function(){return j},enumerable:!1,configurable:!0}),Object.defineProperty(t,"strings",{get:function(){return E},enumerable:!1,configurable:!0}),Object.defineProperty(t,"defaultAdapter",{get:function(){return{activateInputRipple:function(){},deactivateInputRipple:function(){},deregisterInteractionHandler:function(){},registerInteractionHandler:function(){}}},enumerable:!1,configurable:!0}),t.prototype.init=function(){this.adapter.registerInteractionHandler("click",this.click)},t.prototype.destroy=function(){this.adapter.deregisterInteractionHandler("click",this.click)},t.prototype.handleClick=function(){var e=this;this.adapter.activateInputRipple(),requestAnimationFrame((function(){e.adapter.deactivateInputRipple()}))},t}(h),x=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return y(t,e),t.attachTo=function(e){return new t(e)},t.prototype.labelEl=function(){var e=w.strings.LABEL_SELECTOR;return this.root.querySelector(e)},t.prototype.getDefaultFoundation=function(){var e=this;return new w({activateInputRipple:function(){e.input&&e.input.ripple&&e.input.ripple.activate()},deactivateInputRipple:function(){e.input&&e.input.ripple&&e.input.ripple.deactivate()},deregisterInteractionHandler:function(t,n){var r=e.labelEl();r&&r.removeEventListener(t,n)},registerInteractionHandler:function(t,n){var r=e.labelEl();r&&r.addEventListener(t,n)}})},t}(O);const M={name:"UiFormField",customOptions:{}};var S=Object.assign(M,{props:{nowrap:{type:Boolean,default:!1},alignEnd:{type:Boolean,default:!1},spaceBetween:{type:Boolean,default:!1}},setup(e,t){let{expose:n}=t;const r=e,o=(0,d.useSlots)(),i=(0,d.getCurrentInstance)(),a=i.parent,u=(0,d.ref)(null),c=(0,d.reactive)({$formField:null,form:null}),{$formField:l}=(0,d.toRefs)(c),p=(0,d.computed)((()=>"UiForm"===a.type.name)),f=(0,d.computed)((()=>({"mdc-form__item":p.value,"mdc-form-field":!0,"mdc-form-field--nowrap":r.nowrap,"mdc-form-field--align-end":r.alignEnd,"mdc-form-field--space-between":r.spaceBetween}))),s=(0,d.computed)((()=>u.value&&u.value.classList.contains("mdc-form__item"))),m=(0,d.computed)((()=>{const e=c.form;return e&&e.itemMarginBottom?{"margin-bottom":`${e.itemMarginBottom}px`}:0})),y=(0,d.computed)((()=>{const e=c.form;return e&&e.labelWidth?+e.labelWidth:0})),v=(0,d.computed)((()=>{const e=c.form;return e&&e.labelMarginRight?+e.labelMarginRight:0})),b=(0,d.computed)((()=>{const e=c.form;return e&&"left"===e.actionAlign&&(y.value||v.value)?y.value+v.value:0})),g=(0,d.computed)((()=>{const e=c.form;return e&&e.labelMarginBottom?+e.labelMarginBottom:0}));function h(e){const t=e.parent;return"UiForm"===t.type.name?t.props:s.value?h(t):null}return(0,d.onMounted)((()=>{c.$formField=new x(u.value),c.form=h(i),function(){if(o.default){const e=o.default().find((e=>"label"===e.type)),t=null===e||void 0===e?void 0:e.el;t&&(y.value&&(t.style.flexBasis=`${y.value}px`),v.value&&(t.style.marginRight=`${v.value}px`),g.value&&(t.style.marginBottom=`${g.value}px`));const n=u.value;n&&n.classList.contains("mdc-form__actions")&&b.value&&(n.style.paddingLeft=`${b.value}px`)}}()})),n({$formField:l}),(e,t)=>((0,d.openBlock)(),(0,d.createElementBlock)("div",{ref_key:"formField",ref:u,class:(0,d.normalizeClass)(f.value),style:(0,d.normalizeStyle)(m.value)},[(0,d.renderSlot)(e.$slots,"default")],6))}});var A=s(S);return o=o.default}()}));