Skip to content

Commit

Permalink
Fixed limit method breaking the whole field
Browse files Browse the repository at this point in the history
  • Loading branch information
@voidgraphics
voidgraphics committed Apr 21, 2022
1 parent 7f57b76 commit 3133249
Show file tree
Hide file tree
Showing 4 changed files with 30,185 additions and 20 deletions.
299 changes: 298 additions & 1 deletion dist/css/field.css
View file
Original file line number Diff line number Diff line change
@@ -1 +1,298 @@
@charset "UTF-8";.flexible-search-menu-multiselect .multiselect__spinner{background:#fff;display:block;height:2.1875rem;position:absolute;right:1px;top:1px;width:3rem}.flexible-search-menu-multiselect .multiselect__spinner:after,.flexible-search-menu-multiselect .multiselect__spinner:before{border:2px solid transparent;border-radius:100%;border-top:2px solid var(--primary);box-shadow:0 0 0 1px transparent;content:"";height:1rem;left:50%;margin:.875rem 0 0 .875rem;position:absolute;top:50%;width:1rem}.flexible-search-menu-multiselect .multiselect__spinner:before{-webkit-animation:spinning 2.4s cubic-bezier(.41,.26,.2,.62);animation:spinning 2.4s cubic-bezier(.41,.26,.2,.62);-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.flexible-search-menu-multiselect .multiselect__spinner:after{-webkit-animation:spinning 2.4s cubic-bezier(.51,.09,.21,.8);animation:spinning 2.4s cubic-bezier(.51,.09,.21,.8);-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.flexible-search-menu-multiselect .multiselect__loading-transition{opacity:1;transition:opacity .4s ease-in-out}.flexible-search-menu-multiselect .multiselect__loading-enter,.flexible-search-menu-multiselect .multiselect__loading-leave{opacity:0}.flexible-search-menu-multiselect .multiselect,.flexible-search-menu-multiselect .multiselect__input,.flexible-search-menu-multiselect .multiselect__single{font-family:inherit;font-size:.875rem;font-weight:lighter}.flexible-search-menu-multiselect .multiselect{box-sizing:content-box;color:#35495e;display:block;min-height:2.5rem;position:relative;text-align:left;width:100%}.flexible-search-menu-multiselect .multiselect *{box-sizing:border-box}.flexible-search-menu-multiselect .multiselect:focus{outline:none}.flexible-search-menu-multiselect .multiselect--active{z-index:50}.flexible-search-menu-multiselect .multiselect--active .multiselect__current,.flexible-search-menu-multiselect .multiselect--active .multiselect__input,.flexible-search-menu-multiselect .multiselect--active .multiselect__tags{border-bottom-left-radius:0;border-bottom-right-radius:0}.flexible-search-menu-multiselect .multiselect--active .multiselect__select{transform:rotate(180deg)}.flexible-search-menu-multiselect .multiselect__input,.flexible-search-menu-multiselect .multiselect__single{background:#fff;border:none;border-radius:.5rem;box-sizing:border-box;display:inline-block;line-height:1.25rem;margin-bottom:.5rem;min-height:1.25rem;padding:1px 0 0 .5rem;position:relative;transition:border .1s ease;width:auto}.flexible-search-menu-multiselect .multiselect__input:hover,.flexible-search-menu-multiselect .multiselect__single:hover{border-color:#b3b9bf}.flexible-search-menu-multiselect .multiselect__input:focus,.flexible-search-menu-multiselect .multiselect__single:focus{border-color:#3c4b5f;outline:none}.flexible-search-menu-multiselect .multiselect__single{margin-bottom:.5rem;padding-left:.375rem}.flexible-search-menu-multiselect .multiselect__tags{background:#fff;border:1px solid #bacad6;border-radius:.5rem;display:block;min-height:2.5rem;padding:.5rem 2.5rem 0 .5rem}.flexible-search-menu-multiselect .multiselect__tag{background:var(--primary);border-radius:.5rem;color:#fff;display:inline-block;line-height:1;margin-bottom:.5rem;margin-right:.625rem;padding:.25rem 1.625rem .25rem .625rem;position:relative}.flexible-search-menu-multiselect .multiselect__tag-icon{border-radius:.5rem;bottom:0;cursor:pointer;font-style:normal;font-weight:700;line-height:1.375rem;margin-left:7px;position:absolute;right:0;text-align:center;top:0;transition:all .2s ease;width:1.375rem}.flexible-search-menu-multiselect .multiselect__tag-icon:after{color:var(--primary-dark);content:"×";font-size:.875rem}.flexible-search-menu-multiselect .multiselect__tag-icon:focus,.flexible-search-menu-multiselect .multiselect__tag-icon:hover{background:var(--primary-dark)}.flexible-search-menu-multiselect .multiselect__tag-icon:focus:after,.flexible-search-menu-multiselect .multiselect__tag-icon:hover:after{color:#fff}.flexible-search-menu-multiselect .multiselect__current{border:1px solid #bacad6;border-radius:.5rem;box-sizing:border-box;cursor:pointer;display:block;line-height:1rem;margin:0;min-height:2.5rem;overflow:hidden;padding:.5rem 1.875rem 0 .75rem;text-decoration:none;white-space:nowrap}.flexible-search-menu-multiselect .multiselect__select{box-sizing:border-box;cursor:pointer;display:block;height:2.375rem;line-height:1rem;margin:0;padding:.25rem .5rem;position:absolute;right:1px;text-align:center;text-decoration:none;top:1px;transition:transform .2s ease;width:2.5rem}.flexible-search-menu-multiselect .multiselect__select:before{border-color:#999 transparent transparent;border-style:solid;border-width:.5rem .5rem 0;color:#999;content:"";margin-top:.25rem;position:relative;right:0;top:65%}.flexible-search-menu-multiselect .multiselect__placeholder{color:#7c858e;display:inline-block;margin-bottom:.625rem;padding-top:.125rem}.multiselect--active .flexible-search-menu-multiselect .multiselect__placeholder{display:none}.flexible-search-menu-multiselect .multiselect__content{background:#fff;border:1px solid #bacad6;border-bottom-left-radius:.5rem;border-bottom-right-radius:.5rem;border-top:none;display:block;list-style:none;margin:0;max-height:15rem;overflow:auto;padding:0;position:absolute;width:100%;z-index:50}.flexible-search-menu-multiselect .multiselect__content::webkit-scrollbar{display:none}.flexible-search-menu-multiselect .multiselect__option{cursor:pointer;display:block;font-weight:300;line-height:1rem;min-height:2.5rem;padding:.75rem;position:relative;text-decoration:none;text-transform:none;vertical-align:middle}.flexible-search-menu-multiselect .multiselect__option:after{line-height:2.5rem;padding-left:1.25rem;padding-right:.75rem;position:absolute;right:0;top:0}.flexible-search-menu-multiselect .multiselect__option--highlight{background:var(--primary);color:#fff;outline:none}.flexible-search-menu-multiselect .multiselect__option--highlight:after{color:#fff;content:attr(data-select)}.flexible-search-menu-multiselect .multiselect__option--selected{background:#f3f3f3;color:#35495e;font-weight:700}.flexible-search-menu-multiselect .multiselect__option--selected:after{color:silver;content:attr(data-selected);font-weight:300}.flexible-search-menu-multiselect .multiselect__option--selected.multiselect__option--highlight{background:#ff6a6a;color:#fff;font-weight:lighter}.flexible-search-menu-multiselect .multiselect__option--selected.multiselect__option--highlight:after{color:#fff;content:attr(data-deselect)}.flexible-search-menu-multiselect .multiselect--disabled{background:#ededed;pointer-events:none}.flexible-search-menu-multiselect .multiselect--disabled .multiselect__current,.flexible-search-menu-multiselect .multiselect--disabled .multiselect__select{background:#ededed;color:#a6a6a6}.flexible-search-menu-multiselect .multiselect__option--disabled{background:#ededed;color:#a6a6a6;cursor:text;pointer-events:none}.flexible-search-menu-multiselect .multiselect__option--disabled:visited{color:#a6a6a6}.flexible-search-menu-multiselect .multiselect__option--disabled:focus,.flexible-search-menu-multiselect .multiselect__option--disabled:hover{background:var(--primary-dark)}.flexible-search-menu-multiselect .multiselect-transition{transition:all .3s ease}.flexible-search-menu-multiselect .multiselect-enter,.flexible-search-menu-multiselect .multiselect-leave{max-height:0!important;opacity:0}
@charset "UTF-8";
.flexible-search-menu-multiselect .multiselect__spinner {
position: absolute;
right: 1px;
top: 1px;
width: 3rem;
height: 2.1875rem;
background: white;
display: block;
}
.flexible-search-menu-multiselect .multiselect__spinner:before, .flexible-search-menu-multiselect .multiselect__spinner:after {
position: absolute;
content: "";
top: 50%;
left: 50%;
margin: 0.875rem 0 0 0.875rem;
width: 1rem;
height: 1rem;
border-radius: 100%;
border-color: var(--primary) transparent transparent;
border-style: solid;
border-width: 2px;
box-shadow: 0 0 0 1px transparent;
}
.flexible-search-menu-multiselect .multiselect__spinner:before {
-webkit-animation: spinning 2.4s cubic-bezier(0.41, 0.26, 0.2, 0.62);
animation: spinning 2.4s cubic-bezier(0.41, 0.26, 0.2, 0.62);
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.flexible-search-menu-multiselect .multiselect__spinner:after {
-webkit-animation: spinning 2.4s cubic-bezier(0.51, 0.09, 0.21, 0.8);
animation: spinning 2.4s cubic-bezier(0.51, 0.09, 0.21, 0.8);
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.flexible-search-menu-multiselect .multiselect__loading-transition {
transition: opacity 0.4s ease-in-out;
opacity: 1;
}
.flexible-search-menu-multiselect .multiselect__loading-enter,
.flexible-search-menu-multiselect .multiselect__loading-leave {
opacity: 0;
}
.flexible-search-menu-multiselect .multiselect,
.flexible-search-menu-multiselect .multiselect__input,
.flexible-search-menu-multiselect .multiselect__single {
font-family: inherit;
font-size: 0.875rem;
font-weight: lighter;
}
.flexible-search-menu-multiselect .multiselect {
box-sizing: content-box;
display: block;
position: relative;
width: 100%;
min-height: 2.5rem;
text-align: left;
color: #35495e;
}
.flexible-search-menu-multiselect .multiselect * {
box-sizing: border-box;
}
.flexible-search-menu-multiselect .multiselect:focus {
outline: none;
}
.flexible-search-menu-multiselect .multiselect--active {
z-index: 50;
}
.flexible-search-menu-multiselect .multiselect--active .multiselect__current,
.flexible-search-menu-multiselect .multiselect--active .multiselect__input,
.flexible-search-menu-multiselect .multiselect--active .multiselect__tags {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.flexible-search-menu-multiselect .multiselect--active .multiselect__select {
transform: rotateZ(180deg);
}
.flexible-search-menu-multiselect .multiselect__input,
.flexible-search-menu-multiselect .multiselect__single {
position: relative;
display: inline-block;
min-height: 1.25rem;
line-height: 1.25rem;
border: none;
border-radius: 0.5rem;
background: white;
padding: 1px 0 0 0.5rem;
width: auto;
transition: border 0.1s ease;
box-sizing: border-box;
margin-bottom: 0.5rem;
}
.flexible-search-menu-multiselect .multiselect__input:hover,
.flexible-search-menu-multiselect .multiselect__single:hover {
border-color: #b3b9bf;
}
.flexible-search-menu-multiselect .multiselect__input:focus,
.flexible-search-menu-multiselect .multiselect__single:focus {
border-color: #3c4b5f;
outline: none;
}
.flexible-search-menu-multiselect .multiselect__single {
padding-left: 0.375rem;
margin-bottom: 0.5rem;
}
.flexible-search-menu-multiselect .multiselect__tags {
min-height: 2.5rem;
display: block;
padding: 0.5rem 2.5rem 0 0.5rem;
border-radius: 0.5rem;
border: 1px solid #bacad6;
background: white;
}
.flexible-search-menu-multiselect .multiselect__tag {
position: relative;
display: inline-block;
padding: 0.25rem 1.625rem 0.25rem 0.625rem;
border-radius: 0.5rem;
margin-right: 0.625rem;
color: white;
line-height: 1;
background: var(--primary);
margin-bottom: 0.5rem;
}
.flexible-search-menu-multiselect .multiselect__tag-icon {
cursor: pointer;
margin-left: 7px;
position: absolute;
right: 0;
top: 0;
bottom: 0;
font-weight: 700;
font-style: initial;
width: 1.375rem;
text-align: center;
line-height: 1.375rem;
transition: all 0.2s ease;
border-radius: 0.5rem;
}
.flexible-search-menu-multiselect .multiselect__tag-icon:after {
content: "×";
color: var(--primary-dark);
font-size: 0.875rem;
}
.flexible-search-menu-multiselect .multiselect__tag-icon:focus, .flexible-search-menu-multiselect .multiselect__tag-icon:hover {
background: var(--primary-dark);
}
.flexible-search-menu-multiselect .multiselect__tag-icon:focus:after, .flexible-search-menu-multiselect .multiselect__tag-icon:hover:after {
color: white;
}
.flexible-search-menu-multiselect .multiselect__current {
line-height: 1rem;
min-height: 2.5rem;
box-sizing: border-box;
display: block;
overflow: hidden;
padding: 0.5rem 0.75rem 0;
padding-right: 1.875rem;
white-space: nowrap;
margin: 0;
text-decoration: none;
border-radius: 0.5rem;
border: 1px solid #bacad6;
cursor: pointer;
}
.flexible-search-menu-multiselect .multiselect__select {
line-height: 1rem;
display: block;
position: absolute;
box-sizing: border-box;
width: 2.5rem;
height: 2.375rem;
right: 1px;
top: 1px;
padding: 0.25rem 0.5rem;
margin: 0;
text-decoration: none;
text-align: center;
cursor: pointer;
transition: transform 0.2s ease;
}
.flexible-search-menu-multiselect .multiselect__select:before {
position: relative;
right: 0;
top: 65%;
color: #999999;
margin-top: 0.25rem;
border-style: solid;
border-width: 0.5rem 0.5rem 0 0.5rem;
border-color: #999999 transparent transparent transparent;
content: "";
}
.flexible-search-menu-multiselect .multiselect__placeholder {
color: #7c858e;
display: inline-block;
margin-bottom: 0.625rem;
padding-top: 0.125rem;
}
.multiselect--active .flexible-search-menu-multiselect .multiselect__placeholder {
display: none;
}
.flexible-search-menu-multiselect .multiselect__content {
position: absolute;
list-style: none;
display: block;
background: white;
width: 100%;
max-height: 15rem;
overflow: auto;
padding: 0;
margin: 0;
border: 1px solid #bacad6;
border-top: none;
border-bottom-left-radius: 0.5rem;
border-bottom-right-radius: 0.5rem;
z-index: 50;
}
.flexible-search-menu-multiselect .multiselect__content::webkit-scrollbar {
display: none;
}
.flexible-search-menu-multiselect .multiselect__option {
display: block;
padding: 0.75rem;
min-height: 2.5rem;
line-height: 1rem;
font-weight: 300;
text-decoration: none;
text-transform: none;
vertical-align: middle;
position: relative;
cursor: pointer;
}
.flexible-search-menu-multiselect .multiselect__option:after {
top: 0;
right: 0;
position: absolute;
line-height: 2.5rem;
padding-right: 0.75rem;
padding-left: 1.25rem;
}
.flexible-search-menu-multiselect .multiselect__option--highlight {
background: var(--primary);
outline: none;
color: white;
}
.flexible-search-menu-multiselect .multiselect__option--highlight:after {
content: attr(data-select);
color: white;
}
.flexible-search-menu-multiselect .multiselect__option--selected {
background: #f3f3f3;
color: #35495e;
font-weight: bold;
}
.flexible-search-menu-multiselect .multiselect__option--selected:after {
content: attr(data-selected);
font-weight: 300;
color: silver;
}
.flexible-search-menu-multiselect .multiselect__option--selected.multiselect__option--highlight {
background: #ff6a6a;
color: white;
font-weight: lighter;
}
.flexible-search-menu-multiselect .multiselect__option--selected.multiselect__option--highlight:after {
content: attr(data-deselect);
color: white;
}
.flexible-search-menu-multiselect .multiselect--disabled {
background: #ededed;
pointer-events: none;
}
.flexible-search-menu-multiselect .multiselect--disabled .multiselect__current,
.flexible-search-menu-multiselect .multiselect--disabled .multiselect__select {
background: #ededed;
color: #a6a6a6;
}
.flexible-search-menu-multiselect .multiselect__option--disabled {
background: #ededed;
color: #a6a6a6;
cursor: text;
pointer-events: none;
}
.flexible-search-menu-multiselect .multiselect__option--disabled:visited {
color: #a6a6a6;
}
.flexible-search-menu-multiselect .multiselect__option--disabled:hover, .flexible-search-menu-multiselect .multiselect__option--disabled:focus {
background: var(--primary-dark);
}
.flexible-search-menu-multiselect .multiselect-transition {
transition: all 0.3s ease;
}
.flexible-search-menu-multiselect .multiselect-enter,
.flexible-search-menu-multiselect .multiselect-leave {
opacity: 0;
max-height: 0 !important;
}
29,862 changes: 29,860 additions & 2 deletions dist/js/field.js
View file

Large diffs are not rendered by default.

25 changes: 11 additions & 14 deletions resources/js/components/FormField.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,27 +70,24 @@ export default {
limitCounter() {
if (this.field.limit === null || typeof(this.field.limit) == "undefined") {
return null;
}
// if all layouts reached their limitPerLayout, remove the "Add" button
if (Object.values(this.limitPerLayoutCounter).reduce((a, b) => a + b, 0) <= 0) {
return 0;
return null;
}
return this.field.limit - Object.keys(this.groups).length;
},
limitPerLayoutCounter() {
let count = {};
this.layouts.forEach(layout => count[layout.name] = layout.limit)
if (Object.keys(this.groups).length > 0) {
Object.entries(this.groups).forEach(
group => count[group[1].name] === null ? null : count[group[1].name]--
);
}
return this.layouts.reduce((layoutCounts, layout) => {
if (layout.limit === null) {
return layoutCounts;
}
let count = Object.values(this.groups).filter(group => group.name === layout.name).length;
layoutCounts[layout.name] = layout.limit - count;
return count;
return layoutCounts;
}, {});
},
},
Expand Down
19 changes: 16 additions & 3 deletions resources/js/components/OriginalDropMenu.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@
<div class="z-20 relative" v-if="layouts">
<div class="relative" v-if="layouts.length > 1">
<div v-if="isLayoutsDropdownOpen"
class="absolute rounded-lg shadow-lg max-w-full mb-3 pin-b max-h-search overflow-y-auto border border-40"
class="z-20 absolute rounded-lg shadow-lg max-w-full mb-3 pin-b max-h-search overflow-y-auto border border-40"
>
<div>
<ul class="list-reset">
<li v-for="layout in layouts" v-if="limitPerLayoutCounter[layout.name] === null || limitPerLayoutCounter[layout.name] > 0" class="border-b border-40">
<li v-for="layout in filteredLayouts" class="border-b border-40" :key="'add-'+layout.name">
<a
:dusk="'add-' + layout.name"
@click="addGroup(layout)"
Expand All @@ -24,7 +24,7 @@
tabindex="0"
class="btn btn-default btn-primary inline-flex items-center relative"
@click="toggleLayoutsDropdownOrAddDefault"
v-if="this.limitCounter > 0 || this.limitCounter === null"
v-if="isBelowLayoutLimits"
>
<span>{{ field.button }}</span>
</button>
Expand All @@ -42,6 +42,19 @@
};
},
computed: {
filteredLayouts() {
return this.layouts.filter(layout => {
const count = this.limitPerLayoutCounter[layout.name];
return count === null || count > 0 || typeof count === 'undefined'
});
},
isBelowLayoutLimits() {
return (this.limitCounter > 0 || this.limitCounter === null) && this.filteredLayouts.length > 0;
}
},
methods: {
/**
* Display or hide the layouts choice dropdown if there are multiple layouts
Expand Down

0 comments on commit 3133249

Please sign in to comment.