From 1efaf5d785496845ffcf8cb98396b3b5679b2a4e Mon Sep 17 00:00:00 2001 From: Sonny Le Date: Fri, 12 Jul 2024 16:44:06 +0700 Subject: [PATCH] Improve UX of Select Layout List field --- assets/vendor/selectsublayout/dist/index.html | 2 +- assets/vendor/selectsublayout/dist/index.js | 2 +- assets/vendor/selectsublayout/index.html | 2 +- assets/vendor/selectsublayout/src/App.vue | 75 ++++++++++--------- framework/fields/astroidlayoutlist.php | 11 ++- 5 files changed, 48 insertions(+), 44 deletions(-) diff --git a/assets/vendor/selectsublayout/dist/index.html b/assets/vendor/selectsublayout/dist/index.html index 3ba10f97..5abfe4a5 100644 --- a/assets/vendor/selectsublayout/dist/index.html +++ b/assets/vendor/selectsublayout/dist/index.html @@ -8,7 +8,7 @@ - +
diff --git a/assets/vendor/selectsublayout/dist/index.js b/assets/vendor/selectsublayout/dist/index.js index 7cbaa47e..348a7b7c 100644 --- a/assets/vendor/selectsublayout/dist/index.js +++ b/assets/vendor/selectsublayout/dist/index.js @@ -14,4 +14,4 @@ * @vue/runtime-dom v3.4.29 * (c) 2018-present Yuxi (Evan) You and Vue contributors * @license MIT -**/const jl="http://www.w3.org/2000/svg",Hl="http://www.w3.org/1998/Math/MathML",Ee=typeof document<"u"?document:null,ws=Ee&&Ee.createElement("template"),$l={insert:(e,t,n)=>{t.insertBefore(e,n||null)},remove:e=>{const t=e.parentNode;t&&t.removeChild(e)},createElement:(e,t,n,s)=>{const r=t==="svg"?Ee.createElementNS(jl,e):t==="mathml"?Ee.createElementNS(Hl,e):n?Ee.createElement(e,{is:n}):Ee.createElement(e);return e==="select"&&s&&s.multiple!=null&&r.setAttribute("multiple",s.multiple),r},createText:e=>Ee.createTextNode(e),createComment:e=>Ee.createComment(e),setText:(e,t)=>{e.nodeValue=t},setElementText:(e,t)=>{e.textContent=t},parentNode:e=>e.parentNode,nextSibling:e=>e.nextSibling,querySelector:e=>Ee.querySelector(e),setScopeId(e,t){e.setAttribute(t,"")},insertStaticContent(e,t,n,s,r,i){const l=n?n.previousSibling:t.lastChild;if(r&&(r===i||r.nextSibling))for(;t.insertBefore(r.cloneNode(!0),n),!(r===i||!(r=r.nextSibling)););else{ws.innerHTML=s==="svg"?`${e}`:s==="mathml"?`${e}`:e;const c=ws.content;if(s==="svg"||s==="mathml"){const u=c.firstChild;for(;u.firstChild;)c.appendChild(u.firstChild);c.removeChild(u)}t.insertBefore(c,n)}return[l?l.nextSibling:t.firstChild,n?n.previousSibling:t.lastChild]}},Ul=Symbol("_vtc");function Vl(e,t,n){const s=e[Ul];s&&(t=(t?[t,...s]:[...s]).join(" ")),t==null?e.removeAttribute("class"):n?e.setAttribute("class",t):e.className=t}const Es=Symbol("_vod"),Dl=Symbol("_vsh"),Kl=Symbol(""),Bl=/(^|;)\s*display\s*:/;function Wl(e,t,n){const s=e.style,r=B(n);let i=!1;if(n&&!r){if(t)if(B(t))for(const l of t.split(";")){const c=l.slice(0,l.indexOf(":")).trim();n[c]==null&&Nt(s,c,"")}else for(const l in t)n[l]==null&&Nt(s,l,"");for(const l in n)l==="display"&&(i=!0),Nt(s,l,n[l])}else if(r){if(t!==n){const l=s[Kl];l&&(n+=";"+l),s.cssText=n,i=Bl.test(n)}}else t&&e.removeAttribute("style");Es in e&&(e[Es]=i?s.display:"",e[Dl]&&(s.display="none"))}const Os=/\s*!important$/;function Nt(e,t,n){if(C(n))n.forEach(s=>Nt(e,t,s));else if(n==null&&(n=""),t.startsWith("--"))e.setProperty(t,n);else{const s=ql(e,t);Os.test(n)?e.setProperty(et(s),n.replace(Os,""),"important"):e[s]=n}}const Ss=["Webkit","Moz","ms"],cn={};function ql(e,t){const n=cn[t];if(n)return n;let s=Qe(t);if(s!=="filter"&&s in e)return cn[t]=s;s=$s(s);for(let r=0;rfn||(Xl.then(()=>fn=0),fn=Date.now());function Ql(e,t){const n=s=>{if(!s._vts)s._vts=Date.now();else if(s._vts<=n.attached)return;de(kl(s,n.value),t,5,[s])};return n.value=e,n.attached=Zl(),n}function kl(e,t){if(C(t)){const n=e.stopImmediatePropagation;return e.stopImmediatePropagation=()=>{n.call(e),e._stopped=!0},t.map(s=>r=>!r._stopped&&s&&s(r))}else return t}const Ps=e=>e.charCodeAt(0)===111&&e.charCodeAt(1)===110&&e.charCodeAt(2)>96&&e.charCodeAt(2)<123,eo=(e,t,n,s,r,i,l,c,u)=>{const a=r==="svg";t==="class"?Vl(e,s,a):t==="style"?Wl(e,n,s):Dt(t)?En(t)||Jl(e,t,n,s,l):(t[0]==="."?(t=t.slice(1),!0):t[0]==="^"?(t=t.slice(1),!1):to(e,t,s,a))?(zl(e,t,s,i,l,c,u),(t==="value"||t==="checked"||t==="selected")&&Ts(e,t,s,a,l,t!=="value")):(t==="true-value"?e._trueValue=s:t==="false-value"&&(e._falseValue=s),Ts(e,t,s,a))};function to(e,t,n,s){if(s)return!!(t==="innerHTML"||t==="textContent"||t in e&&Ps(t)&&A(n));if(t==="spellcheck"||t==="draggable"||t==="translate"||t==="form"||t==="list"&&e.tagName==="INPUT"||t==="type"&&e.tagName==="TEXTAREA")return!1;if(t==="width"||t==="height"){const r=e.tagName;if(r==="IMG"||r==="VIDEO"||r==="CANVAS"||r==="SOURCE")return!1}return Ps(t)&&B(n)?!1:t in e}const Rs=e=>{const t=e.props["onUpdate:modelValue"]||!1;return C(t)?n=>At(t,n):t},un=Symbol("_assign"),Ms={deep:!0,created(e,{value:t,modifiers:{number:n}},s){const r=Kt(t);Hr(e,"change",()=>{const i=Array.prototype.filter.call(e.options,l=>l.selected).map(l=>n?Vs(Vt(l)):Vt(l));e[un](e.multiple?r?new Set(i):i:i[0]),e._assigning=!0,or(()=>{e._assigning=!1})}),e[un]=Rs(s)},mounted(e,{value:t,modifiers:{number:n}}){Fs(e,t)},beforeUpdate(e,t,n){e[un]=Rs(n)},updated(e,{value:t,modifiers:{number:n}}){e._assigning||Fs(e,t)}};function Fs(e,t,n){const s=e.multiple,r=C(t);if(!(s&&!r&&!Kt(t))){for(let i=0,l=e.options.length;iString(h)===String(u)):c.selected=Qr(t,u)>-1}else c.selected=t.has(u);else if(Wt(Vt(c),t)){e.selectedIndex!==i&&(e.selectedIndex=i);return}}!s&&e.selectedIndex!==-1&&(e.selectedIndex=-1)}}function Vt(e){return"_value"in e?e._value:e.value}const no=G({patchProp:eo},$l);let Ls;function so(){return Ls||(Ls=fl(no))}const ro=(...e)=>{const t=so().createApp(...e),{mount:n}=t;return t.mount=s=>{const r=lo(s);if(!r)return;const i=t._component;!A(i)&&!i.render&&!i.template&&(i.template=r.innerHTML),r.innerHTML="";const l=n(r,!1,io(r));return r instanceof Element&&(r.removeAttribute("v-cloak"),r.setAttribute("data-v-app","")),l},t};function io(e){if(e instanceof SVGElement)return"svg";if(typeof MathMLElement=="function"&&e instanceof MathMLElement)return"mathml"}function lo(e){return B(e)?document.querySelector(e):e}const oo={class:"mb-3"},co=["for"],fo=["id"],uo={key:0,value:"inherit"},ao={value:""},ho=["value"],po={key:0},go=["for"],_o=["id"],mo={value:""},yo=["value"],bo=["name","value"],xo={__name:"App",props:["sublayout_id"],setup(e){const t=e,n=JSON.parse(document.getElementById(t.sublayout_id+"_json").innerHTML),s=Tt(n.value.template),r=Tt([{title:"Default",name:""}]),i=Tt(n.value.layout),l=Tt({});hr(()=>{typeof n.value.template<"u"&&(s.value=n.value.template),typeof n.value.layout<"u"&&(i.value=n.value.layout),l.value=n.templates,typeof n.templates[s.value]<"u"&&(r.value=n.templates[s.value])}),Ft(s,u=>{typeof n.templates[u]<"u"?r.value=n.templates[u]:r.value=[],i.value=""});const c=jr(()=>JSON.stringify({template:s.value,layout:i.value}));return(u,a)=>(Ae(),Be(ie,null,[me("div",oo,[me("label",{for:t.sublayout_id+"_select_template",class:"form-label"},we(fe(n).language.select_template),9,co),ls(me("select",{id:t.sublayout_id+"_select_template",class:"form-select","onUpdate:modelValue":a[0]||(a[0]=h=>s.value=h)},[fe(n).inherit===!0?(Ae(),Be("option",uo,we(fe(n).language.inherit),1)):ys("",!0),me("option",ao,we(fe(n).language.default)+" - "+we(fe(n).language.system),1),(Ae(!0),Be(ie,null,os(fe(n).templates,(h,x)=>(Ae(),Be("option",{value:x},we(x),9,ho))),256))],8,fo),[[Ms,s.value]])]),s.value!=="inherit"?(Ae(),Be("div",po,[me("label",{for:t.sublayout_id+"_select_layout",class:"form-label"},we(fe(n).language.select_layout),9,go),ls(me("select",{id:t.sublayout_id+"_select_layout",class:"form-select","onUpdate:modelValue":a[1]||(a[1]=h=>i.value=h)},[me("option",mo,we(fe(n).language.default)+" - "+we(fe(n).language.system),1),(Ae(!0),Be(ie,null,os(r.value,h=>(Ae(),Be("option",{value:h.name},we(h.title),9,yo))),256))],8,_o),[[Ms,i.value]])])):ys("",!0),me("input",{type:"hidden",name:fe(n).name,value:c.value},null,8,bo)],64))}};let vo=document.querySelectorAll(".as-select-sublayout");vo.forEach(e=>{ro(xo,{sublayout_id:e.id}).mount("#"+e.id)}); +**/const jl="http://www.w3.org/2000/svg",Hl="http://www.w3.org/1998/Math/MathML",Ee=typeof document<"u"?document:null,ws=Ee&&Ee.createElement("template"),$l={insert:(e,t,n)=>{t.insertBefore(e,n||null)},remove:e=>{const t=e.parentNode;t&&t.removeChild(e)},createElement:(e,t,n,s)=>{const r=t==="svg"?Ee.createElementNS(jl,e):t==="mathml"?Ee.createElementNS(Hl,e):n?Ee.createElement(e,{is:n}):Ee.createElement(e);return e==="select"&&s&&s.multiple!=null&&r.setAttribute("multiple",s.multiple),r},createText:e=>Ee.createTextNode(e),createComment:e=>Ee.createComment(e),setText:(e,t)=>{e.nodeValue=t},setElementText:(e,t)=>{e.textContent=t},parentNode:e=>e.parentNode,nextSibling:e=>e.nextSibling,querySelector:e=>Ee.querySelector(e),setScopeId(e,t){e.setAttribute(t,"")},insertStaticContent(e,t,n,s,r,i){const l=n?n.previousSibling:t.lastChild;if(r&&(r===i||r.nextSibling))for(;t.insertBefore(r.cloneNode(!0),n),!(r===i||!(r=r.nextSibling)););else{ws.innerHTML=s==="svg"?`${e}`:s==="mathml"?`${e}`:e;const c=ws.content;if(s==="svg"||s==="mathml"){const u=c.firstChild;for(;u.firstChild;)c.appendChild(u.firstChild);c.removeChild(u)}t.insertBefore(c,n)}return[l?l.nextSibling:t.firstChild,n?n.previousSibling:t.lastChild]}},Ul=Symbol("_vtc");function Vl(e,t,n){const s=e[Ul];s&&(t=(t?[t,...s]:[...s]).join(" ")),t==null?e.removeAttribute("class"):n?e.setAttribute("class",t):e.className=t}const Es=Symbol("_vod"),Dl=Symbol("_vsh"),Kl=Symbol(""),Bl=/(^|;)\s*display\s*:/;function Wl(e,t,n){const s=e.style,r=B(n);let i=!1;if(n&&!r){if(t)if(B(t))for(const l of t.split(";")){const c=l.slice(0,l.indexOf(":")).trim();n[c]==null&&Nt(s,c,"")}else for(const l in t)n[l]==null&&Nt(s,l,"");for(const l in n)l==="display"&&(i=!0),Nt(s,l,n[l])}else if(r){if(t!==n){const l=s[Kl];l&&(n+=";"+l),s.cssText=n,i=Bl.test(n)}}else t&&e.removeAttribute("style");Es in e&&(e[Es]=i?s.display:"",e[Dl]&&(s.display="none"))}const Os=/\s*!important$/;function Nt(e,t,n){if(C(n))n.forEach(s=>Nt(e,t,s));else if(n==null&&(n=""),t.startsWith("--"))e.setProperty(t,n);else{const s=ql(e,t);Os.test(n)?e.setProperty(et(s),n.replace(Os,""),"important"):e[s]=n}}const Ss=["Webkit","Moz","ms"],cn={};function ql(e,t){const n=cn[t];if(n)return n;let s=Qe(t);if(s!=="filter"&&s in e)return cn[t]=s;s=$s(s);for(let r=0;rfn||(Xl.then(()=>fn=0),fn=Date.now());function Ql(e,t){const n=s=>{if(!s._vts)s._vts=Date.now();else if(s._vts<=n.attached)return;de(kl(s,n.value),t,5,[s])};return n.value=e,n.attached=Zl(),n}function kl(e,t){if(C(t)){const n=e.stopImmediatePropagation;return e.stopImmediatePropagation=()=>{n.call(e),e._stopped=!0},t.map(s=>r=>!r._stopped&&s&&s(r))}else return t}const Ps=e=>e.charCodeAt(0)===111&&e.charCodeAt(1)===110&&e.charCodeAt(2)>96&&e.charCodeAt(2)<123,eo=(e,t,n,s,r,i,l,c,u)=>{const a=r==="svg";t==="class"?Vl(e,s,a):t==="style"?Wl(e,n,s):Dt(t)?En(t)||Jl(e,t,n,s,l):(t[0]==="."?(t=t.slice(1),!0):t[0]==="^"?(t=t.slice(1),!1):to(e,t,s,a))?(zl(e,t,s,i,l,c,u),(t==="value"||t==="checked"||t==="selected")&&Ts(e,t,s,a,l,t!=="value")):(t==="true-value"?e._trueValue=s:t==="false-value"&&(e._falseValue=s),Ts(e,t,s,a))};function to(e,t,n,s){if(s)return!!(t==="innerHTML"||t==="textContent"||t in e&&Ps(t)&&A(n));if(t==="spellcheck"||t==="draggable"||t==="translate"||t==="form"||t==="list"&&e.tagName==="INPUT"||t==="type"&&e.tagName==="TEXTAREA")return!1;if(t==="width"||t==="height"){const r=e.tagName;if(r==="IMG"||r==="VIDEO"||r==="CANVAS"||r==="SOURCE")return!1}return Ps(t)&&B(n)?!1:t in e}const Rs=e=>{const t=e.props["onUpdate:modelValue"]||!1;return C(t)?n=>At(t,n):t},un=Symbol("_assign"),Ms={deep:!0,created(e,{value:t,modifiers:{number:n}},s){const r=Kt(t);Hr(e,"change",()=>{const i=Array.prototype.filter.call(e.options,l=>l.selected).map(l=>n?Vs(Vt(l)):Vt(l));e[un](e.multiple?r?new Set(i):i:i[0]),e._assigning=!0,or(()=>{e._assigning=!1})}),e[un]=Rs(s)},mounted(e,{value:t,modifiers:{number:n}}){Fs(e,t)},beforeUpdate(e,t,n){e[un]=Rs(n)},updated(e,{value:t,modifiers:{number:n}}){e._assigning||Fs(e,t)}};function Fs(e,t,n){const s=e.multiple,r=C(t);if(!(s&&!r&&!Kt(t))){for(let i=0,l=e.options.length;iString(h)===String(u)):c.selected=Qr(t,u)>-1}else c.selected=t.has(u);else if(Wt(Vt(c),t)){e.selectedIndex!==i&&(e.selectedIndex=i);return}}!s&&e.selectedIndex!==-1&&(e.selectedIndex=-1)}}function Vt(e){return"_value"in e?e._value:e.value}const no=G({patchProp:eo},$l);let Ls;function so(){return Ls||(Ls=fl(no))}const ro=(...e)=>{const t=so().createApp(...e),{mount:n}=t;return t.mount=s=>{const r=lo(s);if(!r)return;const i=t._component;!A(i)&&!i.render&&!i.template&&(i.template=r.innerHTML),r.innerHTML="";const l=n(r,!1,io(r));return r instanceof Element&&(r.removeAttribute("v-cloak"),r.setAttribute("data-v-app","")),l},t};function io(e){if(e instanceof SVGElement)return"svg";if(typeof MathMLElement=="function"&&e instanceof MathMLElement)return"mathml"}function lo(e){return B(e)?document.querySelector(e):e}const oo={class:"mb-3"},co=["for"],fo=["id"],uo={key:0,value:"inherit"},ao={value:""},ho=["value"],po={key:0},go=["for"],_o=["id"],mo={value:""},yo=["value"],bo=["name","value"],xo={__name:"App",props:["sublayout_id"],setup(e){const t=e,n=JSON.parse(document.getElementById(t.sublayout_id+"_json").innerHTML),s=Tt(n.value.template),r=Tt([{title:"Default",name:""}]),i=Tt(n.value.layout),l=Tt({});hr(()=>{typeof n.value.template<"u"&&(s.value=n.value.template),typeof n.value.layout<"u"&&(i.value=n.value.layout),l.value=n.templates,typeof n.templates[s.value]<"u"?r.value=n.templates[s.value]:r.value=[]}),Ft(s,u=>{typeof n.templates[u]<"u"?r.value=n.templates[u]:r.value=[],i.value=""});const c=jr(()=>JSON.stringify({template:s.value,layout:i.value}));return(u,a)=>(Ae(),Be(ie,null,[me("div",oo,[me("label",{for:t.sublayout_id+"_select_template",class:"form-label"},we(fe(n).language.select_template),9,co),ls(me("select",{id:t.sublayout_id+"_select_template",class:"form-select","onUpdate:modelValue":a[0]||(a[0]=h=>s.value=h)},[fe(n).inherit===!0?(Ae(),Be("option",uo,we(fe(n).language.inherit),1)):ys("",!0),me("option",ao,we(fe(n).language.default)+" - "+we(fe(n).language.system),1),(Ae(!0),Be(ie,null,os(fe(n).templates,(h,x)=>(Ae(),Be("option",{value:x},we(x),9,ho))),256))],8,fo),[[Ms,s.value]])]),s.value!=="inherit"&&s.value!==""?(Ae(),Be("div",po,[me("label",{for:t.sublayout_id+"_select_layout",class:"form-label"},we(fe(n).language.select_layout),9,go),ls(me("select",{id:t.sublayout_id+"_select_layout",class:"form-select","onUpdate:modelValue":a[1]||(a[1]=h=>i.value=h)},[me("option",mo,we(fe(n).language.default)+" - "+we(fe(n).language.system),1),(Ae(!0),Be(ie,null,os(r.value,h=>(Ae(),Be("option",{value:h.name},we(h.title),9,yo))),256))],8,_o),[[Ms,i.value]])])):ys("",!0),me("input",{type:"hidden",name:fe(n).name,value:c.value},null,8,bo)],64))}};let vo=document.querySelectorAll(".as-select-sublayout");vo.forEach(e=>{ro(xo,{sublayout_id:e.id}).mount("#"+e.id)}); diff --git a/assets/vendor/selectsublayout/index.html b/assets/vendor/selectsublayout/index.html index 969636c4..7d361d99 100644 --- a/assets/vendor/selectsublayout/index.html +++ b/assets/vendor/selectsublayout/index.html @@ -7,7 +7,7 @@ Vite App - +
diff --git a/assets/vendor/selectsublayout/src/App.vue b/assets/vendor/selectsublayout/src/App.vue index a542278a..4e0aea5c 100644 --- a/assets/vendor/selectsublayout/src/App.vue +++ b/assets/vendor/selectsublayout/src/App.vue @@ -10,51 +10,52 @@ const layout_selected = ref(data.value.layout); const templates = ref({}); onBeforeMount(()=>{ - if (typeof data.value.template !== 'undefined') { - tpl_selected.value = data.value.template; - } - if (typeof data.value.layout !== 'undefined') { - layout_selected.value = data.value.layout; - } - templates.value = data.templates; - if (typeof data.templates[tpl_selected.value] !== 'undefined') { - layouts.value = data.templates[tpl_selected.value]; - } - + if (typeof data.value.template !== 'undefined') { + tpl_selected.value = data.value.template; + } + if (typeof data.value.layout !== 'undefined') { + layout_selected.value = data.value.layout; + } + templates.value = data.templates; + if (typeof data.templates[tpl_selected.value] !== 'undefined') { + layouts.value = data.templates[tpl_selected.value]; + } else { + layouts.value = []; + } }) watch(tpl_selected, (newValue) => { - if (typeof data.templates[newValue] !== 'undefined') { - layouts.value = data.templates[newValue]; - } else { - layouts.value = []; - } - layout_selected.value = ''; + if (typeof data.templates[newValue] !== 'undefined') { + layouts.value = data.templates[newValue]; + } else { + layouts.value = []; + } + layout_selected.value = ''; }); const value = computed(() => { - return JSON.stringify({ - template: tpl_selected.value, - layout: layout_selected.value - }) + return JSON.stringify({ + template: tpl_selected.value, + layout: layout_selected.value + }) }) \ No newline at end of file diff --git a/framework/fields/astroidlayoutlist.php b/framework/fields/astroidlayoutlist.php index 53394c71..5479f930 100644 --- a/framework/fields/astroidlayoutlist.php +++ b/framework/fields/astroidlayoutlist.php @@ -53,10 +53,13 @@ protected function getInput() { if (count($layouts)) { $tmp_layouts = array(); foreach ($layouts as $layout) { - $tmp = Layout::getDataLayout(basename($layout, ".json"), $folders[$i], $path); - $tmp['name'] = basename($layout, ".json"); - unset($tmp['data']); - $tmp_layouts[] = $tmp; + $layout_name = basename($layout, ".json"); + if ($layout_name !== 'default') { + $tmp = Layout::getDataLayout($layout_name, $folders[$i], $path); + $tmp['name'] = $layout_name; + unset($tmp['data']); + $tmp_layouts[] = $tmp; + } } $templates[$folders[$i]] = $tmp_layouts; }