silva
/
adrema
2
1
Fork 0
Code Issues 23 Pull Requests 1 Projects 1 Releases 104 Wiki Activity

Fix fields

This commit is contained in:
philipp lang 2021-08-22 16:15:16 +02:00
parent 0bc3dbc0b7
commit 17a2043e23
7 changed files with 451 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/Member/MemberController.php
View File

@ -22,7 +22,7 @@ class MemberController extends Controller
public $filter = [
'ausstand' => false,
'bill_kind' => false,
'bill_kind' => null,
];
public function index(Request $request): Response {

1
resources/css/app.css vendored
View File

@ -8,3 +8,4 @@
@import "table";
@import "sidebar";
@import "bool";
@import "form";

310
resources/css/form.css vendored Normal file
View File

@ -0,0 +1,310 @@
:root {
--h-field-sm: 23px;
--h-field-base: 35px;
--h-field-lg: 42px;
--m-field-sm: 0.2rem;
--m-field-base: 0.3rem;
--m-field-lg: 0.4rem;
}
.size-sm {
height: var(--h-field-sm);
}
.size-base {
height: var(--h-field-base);
}
.size-lg {
height: var(--h-field-lg);
}
.checkbox {
@apply flex flex-col relative cursor-pointer;
input[type="checkbox"] {
@apply invisible absolute;
& + span {
@apply transition-colors duration-300 flex items-center;
span {
@apply border-2 border-gray-800 relative rounded cursor-pointer flex flex-none justify-center items-center;
}
svg {
@apply text-white transition-opacity duration-300;
opacity: 0;
}
& + span {
a {
@apply text-primary-300;
}
}
}
&:checked + span svg {
opacity: 1;
}
}
&.size-sm {
height: auto;
input[type="checkbox"] {
& + span {
min-height: var(--h-field-sm);
span {
width: var(--h-field-sm);
height: var(--h-field-sm);
}
svg {
width: calc(var(--h-field-sm) - var(--m-field-sm) * 2);
height: calc(var(--h-field-sm) - var(--m-field-sm) * 2);
}
}
& + span + span {
min-height: var(--h-field-sm);
}
}
}
&.size-base {
height: auto;
input[type="checkbox"] {
& + span {
min-height: var(--h-field-base);
span {
width: var(--h-field-base);
height: var(--h-field-base);
}
svg {
width: calc(var(--h-field-base) - var(--m-field-base) * 2);
height: calc(var(--h-field-base) - var(--m-field-base) * 2);
}
}
& + span + span {
min-height: var(--h-field-base);
}
}
}
&.size-lg {
height: auto;
input[type="checkbox"] {
& + span {
min-height: var(--h-field-lg);
span {
width: var(--h-field-lg);
height: var(--h-field-lg);
}
svg {
width: calc(var(--h-field-lg) - var(--m-field-lg) * 2);
height: calc(var(--h-field-lg) - var(--m-field-lg) * 2);
}
}
& + span + span {
min-height: var(--h-field-lg);
}
}
}
}
.field-wrap {
@apply flex flex-col;
.field-label {
@apply font-semibold leading-none text-gray-400;
}
.real-field-wrap {
@apply relative flex-none flex;
}
.info-wrap {
@apply h-full items-center flex;
&:not(.info-wrap-inline) {
@apply absolute top-0 right-0;
}
&.info-wrap-inline {
@apply ml-2;
}
.info-button {
@apply text-primary-200;
}
svg.chevron {
@apply text-gray-400;
}
}
input:not([type="checkbox"]):not([type="color"]), select {
@apply border-gray-600 text-gray-300 leading-none border-solid bg-gray-700 w-full appearance-none outline-none rounded-lg;
&:disabled {
@apply bg-gray-400;
}
}
.switch {
input[type="checkbox"] {
@apply invisible absolute;
& + span {
@apply rounded transition-colors duration-300 relative cursor-pointer flex flex-grow h-full;
span {
@apply absolute flex items-center justify-center;
}
var {
@apply duration-300;
transition-property: left;
}
}
}
}
&.field-wrap-sm {
.field-label {
@apply text-xs;
}
input:not([type="checkbox"]), select, input:not([type="color"]) {
@apply size-sm text-xs px-1 border;
}
input[type="color"] {
@apply size-sm px-0;
}
.switch {
width: calc(var(--h-field-sm) * 2);
input[type="checkbox"] {
& + span {
span:nth-of-type(1) {
width: calc(var(--h-field-sm) - var(--m-field-sm));
height: calc(var(--h-field-sm) - var(--m-field-sm) * 2);
top: var(--m-field-sm);
left: var(--m-field-sm);
}
span:nth-of-type(2) {
width: calc(var(--h-field-sm) - var(--m-field-sm));
height: calc(var(--h-field-sm) - var(--m-field-sm) * 2);
top: var(--m-field-sm);
left: calc(100% - var(--h-field-sm));
}
var {
width: calc(var(--h-field-sm) - var(--m-field-sm) * 2);
height: calc(var(--h-field-sm) - var(--m-field-sm) * 2);
top: var(--m-field-sm);
left: var(--m-field-sm);
}
svg {
@apply w-2 h-2;
}
}
&:checked + span var {
left: calc(var(--h-field-sm) + var(--m-field-sm));
}
}
}
.info-wrap {
@apply mr-1;
.info-button {
@apply w-4 h-4;
}
}
}
&.field-wrap-base {
.field-label {
@apply text-sm;
}
input:not([type="checkbox"]):not([type="color"]), select {
@apply size-base text-sm px-2 border-2;
}
input[type="color"] {
@apply size-base px-0;
}
.switch {
width: calc(var(--h-field-base) * 2);
input[type="checkbox"] {
& + span {
span:nth-of-type(1) {
width: calc(var(--h-field-base) - var(--m-field-base));
height: calc(var(--h-field-base) - var(--m-field-base) * 2);
top: var(--m-field-base);
left: var(--m-field-base);
}
span:nth-of-type(2) {
width: calc(var(--h-field-base) - var(--m-field-base));
height: calc(var(--h-field-base) - var(--m-field-base) * 2);
top: var(--m-field-base);
left: calc(100% - var(--h-field-base));
}
var {
width: calc(var(--h-field-base) - var(--m-field-base) * 2);
height: calc(var(--h-field-base) - var(--m-field-base) * 2);
top: var(--m-field-base);
left: var(--m-field-base);
}
svg {
@apply w-3 h-3;
}
}
&:checked + span var {
left: calc(var(--h-field-base) + var(--m-field-base));
}
}
}
.info-wrap {
@apply mr-2;
.info-button {
@apply w-5 h-5;
}
}
}
&.field-wrap-lg {
.field-label {
@apply text-sm;
}
input:not([type="checkbox"]):not([type="color"]), select {
@apply size-lg px-3 border-2;
}
input[type="color"] {
@apply size-lg px-0;
}
.switch {
width: calc(var(--h-field-lg) * 2);
input[type="checkbox"] {
& + span {
span:nth-of-type(1) {
width: calc(var(--h-field-lg) - var(--m-field-lg));
height: calc(var(--h-field-lg) - var(--m-field-lg) * 2);
top: var(--m-field-lg);
left: var(--m-field-lg);
}
span:nth-of-type(2) {
width: calc(var(--h-field-lg) - var(--m-field-lg));
height: calc(var(--h-field-lg) - var(--m-field-lg) * 2);
top: var(--m-field-lg);
left: calc(100% - var(--h-field-lg));
}
var {
width: calc(var(--h-field-lg) - var(--m-field-lg) * 2);
height: calc(var(--h-field-lg) - var(--m-field-lg) * 2);
top: var(--m-field-lg);
left: var(--m-field-lg);
}
svg {
@apply w-5 h-5;
}
}
&:checked + span var {
left: calc(var(--h-field-lg) + var(--m-field-lg));
}
}
}
.info-wrap {
@apply mr-3;
.info-button {
@apply w-6 h-6;
}
}
}
}
.pointer-events-none {
pointer-events: none;
}
input:disabled, selct:disabled {
@apply bg-gray-400;
}
.justify-self-end {
justify-self: end;
}

2
resources/img/sprite.svg
View File

@ -1 +1 @@
<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol viewBox="0 0 20 20" id="check" xmlns="http://www.w3.org/2000/svg"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z"/></symbol><symbol viewBox="0 0 20 20" id="close" xmlns="http://www.w3.org/2000/svg"><path d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z"/></symbol><symbol viewBox="0 0 486.4 486.4" id="document" xmlns="http://www.w3.org/2000/svg"><path d="M320 0H115.2C87.04 0 64 23.04 64 51.2v384c0 28.16 23.04 51.2 51.2 51.2h256c28.16 0 51.2-23.04 51.2-51.2V102.4L320 0zM166.4 153.6h102.4c15.36 0 25.6 10.24 25.6 25.6s-10.24 25.6-25.6 25.6H166.4c-15.36 0-25.6-10.24-25.6-25.6s12.8-25.6 25.6-25.6zm153.6 256H166.4c-15.36 0-25.6-10.24-25.6-25.6 0-15.36 10.24-25.6 25.6-25.6H320c15.36 0 25.6 10.24 25.6 25.6 0 12.8-10.24 25.6-25.6 25.6zm0-102.4H166.4c-15.36 0-25.6-10.24-25.6-25.6 0-15.36 10.24-25.6 25.6-25.6H320c15.36 0 25.6 10.24 25.6 25.6 0 12.8-10.24 25.6-25.6 25.6z"/></symbol><symbol viewBox="0 0 512 512" id="loss" xmlns="http://www.w3.org/2000/svg"><path d="M448 281.6h-25.6c-7.68 0-12.8 5.12-12.8 12.8v115.2h51.2V294.4c0-7.68-5.12-12.8-12.8-12.8zM345.6 230.4H320c-7.68 0-12.8 5.12-12.8 12.8v166.4h51.2V243.2c0-7.68-5.12-12.8-12.8-12.8zM243.2 179.2h-25.6c-7.68 0-12.8 5.12-12.8 12.8v217.6H256V192c0-7.68-5.12-12.8-12.8-12.8zM140.8 102.4h-25.6c-7.68 0-12.8 5.12-12.8 12.8v294.4h51.2V115.2c0-7.68-5.12-12.8-12.8-12.8z"/><path d="M486.4 460.8H51.2V25.6C51.2 10.24 40.96 0 25.6 0 10.24 0 0 10.24 0 25.6v460.8C0 501.76 10.24 512 25.6 512h460.8c15.36 0 25.6-10.24 25.6-25.6 0-15.36-10.24-25.6-25.6-25.6z"/></symbol><symbol viewBox="0 0 512 512" id="money" xmlns="http://www.w3.org/2000/svg"><path d="M330.24 94.72l46.08-53.76C391.68 25.6 381.44 0 358.4 0H153.6c-23.04 0-33.28 25.6-20.48 40.96l46.08 53.76C76.8 145.92 0 289.28 0 386.56 0 506.88 115.2 512 256 512s256-5.12 256-125.44c0-97.28-76.8-240.64-181.76-291.84zM256 281.6c10.24 0 17.92 2.56 25.6 5.12 30.72 10.24 51.2 38.4 51.2 71.68 0 33.28-20.48 61.44-51.2 71.68v30.72h-51.2v-30.72c-30.72-10.24-51.2-38.4-51.2-71.68h51.2c0 15.36 10.24 25.6 25.6 25.6s25.6-10.24 25.6-25.6c0-15.36-10.24-25.6-25.6-25.6-10.24 0-17.92-2.56-25.6-5.12-30.72-10.24-51.2-38.4-51.2-71.68 0-33.28 20.48-61.44 51.2-71.68V153.6h51.2v30.72c30.72 10.24 51.2 38.4 51.2 71.68h-51.2c0-15.36-10.24-25.6-25.6-25.6s-25.6 10.24-25.6 25.6 10.24 25.6 25.6 25.6z"/></symbol><symbol viewBox="0 0 512 512" id="pencil" xmlns="http://www.w3.org/2000/svg"><path d="M51.2 353.28L0 512l158.72-51.2zM87.16 316.492L336.96 66.69l108.61 108.61L195.77 425.102zM504.32 79.36L432.64 7.68c-10.24-10.24-25.6-10.24-35.84 0l-23.04 23.04 107.52 107.52 23.04-23.04c10.24-10.24 10.24-25.6 0-35.84z"/></symbol><symbol viewBox="0 0 426.667 426.667" id="plus" xmlns="http://www.w3.org/2000/svg"><path d="M405.332 192H234.668V21.332C234.668 9.559 225.109 0 213.332 0 201.559 0 192 9.559 192 21.332V192H21.332C9.559 192 0 201.559 0 213.332c0 11.777 9.559 21.336 21.332 21.336H192v170.664c0 11.777 9.559 21.336 21.332 21.336 11.777 0 21.336-9.559 21.336-21.336V234.668h170.664c11.777 0 21.336-9.559 21.336-21.336 0-11.773-9.559-21.332-21.336-21.332zm0 0"/></symbol><symbol viewBox="0 0 512 512" id="trash" xmlns="http://www.w3.org/2000/svg"><path d="M486.4 102.4h-128V25.6c0-15.36-10.24-25.6-25.6-25.6H179.2c-15.36 0-25.6 10.24-25.6 25.6v76.8h-128C10.24 102.4 0 112.64 0 128s10.24 25.6 25.6 25.6h460.8c15.36 0 25.6-10.24 25.6-25.6s-10.24-25.6-25.6-25.6zm-179.2 0H204.8V51.2h102.4v51.2zM25.6 204.8l48.64 284.16c2.56 12.8 12.8 23.04 25.6 23.04h312.32c12.8 0 23.04-10.24 25.6-23.04L486.4 204.8H25.6zm128 256c-15.36 0-25.6-10.24-25.6-25.6l-25.6-153.6c0-15.36 10.24-25.6 25.6-25.6s25.6 10.24 25.6 25.6l25.6 153.6c0 15.36-10.24 25.6-25.6 25.6zm128-25.6c0 15.36-10.24 25.6-25.6 25.6s-25.6-10.24-25.6-25.6V281.6c0-15.36 10.24-25.6 25.6-25.6s25.6 10.24 25.6 25.6v153.6zm102.4 0c0 15.36-10.24 25.6-25.6 25.6-15.36 0-25.6-10.24-25.6-25.6l25.6-153.6c0-15.36 10.24-25.6 25.6-25.6s25.6 10.24 25.6 25.6L384 435.2z"/></symbol><symbol viewBox="0 0 512 512" id="user" xmlns="http://www.w3.org/2000/svg"><path d="M0 435.2V512h512v-76.8c0-171.52-512-171.52-512 0z"/><circle cx="256" cy="128" r="128"/></symbol></svg>
<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol viewBox="0 0 20 20" id="check" xmlns="http://www.w3.org/2000/svg"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z"/></symbol><symbol viewBox="0 0 407.437 407.437" id="chevron-down" xmlns="http://www.w3.org/2000/svg"><path d="M386.258 91.567l-182.54 181.945L21.179 91.567 0 112.815 203.718 315.87l203.719-203.055z"/></symbol><symbol viewBox="0 0 20 20" id="close" xmlns="http://www.w3.org/2000/svg"><path d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z"/></symbol><symbol viewBox="0 0 486.4 486.4" id="document" xmlns="http://www.w3.org/2000/svg"><path d="M320 0H115.2C87.04 0 64 23.04 64 51.2v384c0 28.16 23.04 51.2 51.2 51.2h256c28.16 0 51.2-23.04 51.2-51.2V102.4L320 0zM166.4 153.6h102.4c15.36 0 25.6 10.24 25.6 25.6s-10.24 25.6-25.6 25.6H166.4c-15.36 0-25.6-10.24-25.6-25.6s12.8-25.6 25.6-25.6zm153.6 256H166.4c-15.36 0-25.6-10.24-25.6-25.6 0-15.36 10.24-25.6 25.6-25.6H320c15.36 0 25.6 10.24 25.6 25.6 0 12.8-10.24 25.6-25.6 25.6zm0-102.4H166.4c-15.36 0-25.6-10.24-25.6-25.6 0-15.36 10.24-25.6 25.6-25.6H320c15.36 0 25.6 10.24 25.6 25.6 0 12.8-10.24 25.6-25.6 25.6z"/></symbol><symbol viewBox="0 0 512 512" id="loss" xmlns="http://www.w3.org/2000/svg"><path d="M448 281.6h-25.6c-7.68 0-12.8 5.12-12.8 12.8v115.2h51.2V294.4c0-7.68-5.12-12.8-12.8-12.8zM345.6 230.4H320c-7.68 0-12.8 5.12-12.8 12.8v166.4h51.2V243.2c0-7.68-5.12-12.8-12.8-12.8zM243.2 179.2h-25.6c-7.68 0-12.8 5.12-12.8 12.8v217.6H256V192c0-7.68-5.12-12.8-12.8-12.8zM140.8 102.4h-25.6c-7.68 0-12.8 5.12-12.8 12.8v294.4h51.2V115.2c0-7.68-5.12-12.8-12.8-12.8z"/><path d="M486.4 460.8H51.2V25.6C51.2 10.24 40.96 0 25.6 0 10.24 0 0 10.24 0 25.6v460.8C0 501.76 10.24 512 25.6 512h460.8c15.36 0 25.6-10.24 25.6-25.6 0-15.36-10.24-25.6-25.6-25.6z"/></symbol><symbol viewBox="0 0 512 512" id="money" xmlns="http://www.w3.org/2000/svg"><path d="M330.24 94.72l46.08-53.76C391.68 25.6 381.44 0 358.4 0H153.6c-23.04 0-33.28 25.6-20.48 40.96l46.08 53.76C76.8 145.92 0 289.28 0 386.56 0 506.88 115.2 512 256 512s256-5.12 256-125.44c0-97.28-76.8-240.64-181.76-291.84zM256 281.6c10.24 0 17.92 2.56 25.6 5.12 30.72 10.24 51.2 38.4 51.2 71.68 0 33.28-20.48 61.44-51.2 71.68v30.72h-51.2v-30.72c-30.72-10.24-51.2-38.4-51.2-71.68h51.2c0 15.36 10.24 25.6 25.6 25.6s25.6-10.24 25.6-25.6c0-15.36-10.24-25.6-25.6-25.6-10.24 0-17.92-2.56-25.6-5.12-30.72-10.24-51.2-38.4-51.2-71.68 0-33.28 20.48-61.44 51.2-71.68V153.6h51.2v30.72c30.72 10.24 51.2 38.4 51.2 71.68h-51.2c0-15.36-10.24-25.6-25.6-25.6s-25.6 10.24-25.6 25.6 10.24 25.6 25.6 25.6z"/></symbol><symbol viewBox="0 0 512 512" id="pencil" xmlns="http://www.w3.org/2000/svg"><path d="M51.2 353.28L0 512l158.72-51.2zM87.16 316.492L336.96 66.69l108.61 108.61L195.77 425.102zM504.32 79.36L432.64 7.68c-10.24-10.24-25.6-10.24-35.84 0l-23.04 23.04 107.52 107.52 23.04-23.04c10.24-10.24 10.24-25.6 0-35.84z"/></symbol><symbol viewBox="0 0 426.667 426.667" id="plus" xmlns="http://www.w3.org/2000/svg"><path d="M405.332 192H234.668V21.332C234.668 9.559 225.109 0 213.332 0 201.559 0 192 9.559 192 21.332V192H21.332C9.559 192 0 201.559 0 213.332c0 11.777 9.559 21.336 21.332 21.336H192v170.664c0 11.777 9.559 21.336 21.332 21.336 11.777 0 21.336-9.559 21.336-21.336V234.668h170.664c11.777 0 21.336-9.559 21.336-21.336 0-11.773-9.559-21.332-21.336-21.332zm0 0"/></symbol><symbol viewBox="0 0 512 512" id="trash" xmlns="http://www.w3.org/2000/svg"><path d="M486.4 102.4h-128V25.6c0-15.36-10.24-25.6-25.6-25.6H179.2c-15.36 0-25.6 10.24-25.6 25.6v76.8h-128C10.24 102.4 0 112.64 0 128s10.24 25.6 25.6 25.6h460.8c15.36 0 25.6-10.24 25.6-25.6s-10.24-25.6-25.6-25.6zm-179.2 0H204.8V51.2h102.4v51.2zM25.6 204.8l48.64 284.16c2.56 12.8 12.8 23.04 25.6 23.04h312.32c12.8 0 23.04-10.24 25.6-23.04L486.4 204.8H25.6zm128 256c-15.36 0-25.6-10.24-25.6-25.6l-25.6-153.6c0-15.36 10.24-25.6 25.6-25.6s25.6 10.24 25.6 25.6l25.6 153.6c0 15.36-10.24 25.6-25.6 25.6zm128-25.6c0 15.36-10.24 25.6-25.6 25.6s-25.6-10.24-25.6-25.6V281.6c0-15.36 10.24-25.6 25.6-25.6s25.6 10.24 25.6 25.6v153.6zm102.4 0c0 15.36-10.24 25.6-25.6 25.6-15.36 0-25.6-10.24-25.6-25.6l25.6-153.6c0-15.36 10.24-25.6 25.6-25.6s25.6 10.24 25.6 25.6L384 435.2z"/></symbol><symbol viewBox="0 0 512 512" id="user" xmlns="http://www.w3.org/2000/svg"><path d="M0 435.2V512h512v-76.8c0-171.52-512-171.52-512 0z"/><circle cx="256" cy="128" r="128"/></symbol></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 4.4 KiB

36
resources/img/svg/chevron-down.svg Normal file
View File

@ -0,0 +1,36 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 407.437 407.437" style="enable-background:new 0 0 407.437 407.437;" xml:space="preserve">
<polygon points="386.258,91.567 203.718,273.512 21.179,91.567 0,112.815 203.718,315.87 407.437,112.815 "/>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 619 B

58
resources/js/components/FSelect.vue
View File

@ -1,36 +1,26 @@
<template>
<label class="flex flex-col relative" :for="id" :class="{['h-field-'+size]: inset === true}">
<div class="relative h-full flex flex-col">
<span v-if="label && !inset" class="leading-none font-semibold relative z-10 text-gray-400" :class="{
'text-xs': size == 'sm',
'text-sm': size === null
}">{{ label }}<span v-show="required" class="text-red-300">&nbsp;*</span></span>
<span v-if="label && inset" class="absolute z-10 top-0 left-0 -mt-2 px-1 ml-3 inset-bg font-semibold text-gray-700" :class="{
'text-xs': size == 'sm',
'text-sm': size === null
}" v-text="label"></span>
<div class="relative h-full mt-1" :class="{['h-field-'+size]: inset === false}">
<select :value="value" @change="trigger"
class="border-gray-600 border-solid bg-gray-700 w-full appearance-none outline-none"
:class="{
'rounded-lg text-sm border-2 p-2 text-gray-300': size === null,
'rounded-lg py-2 px-2 text-xs border-2 text-gray-800': size == 'sm'
}"
>
<label class="field-wrap" :for="id" :class="`field-wrap-${size}`">
<span v-if="label" class="field-label">
{{ label }}
<span v-show="required" class="text-red-800">&nbsp;*</span>
</span>
<div class="real-field-wrap" :class="`size-${size}`">
<select :disabled="disabled" :value="value" @change="trigger">
<option v-if="placeholder" v-html="placeholder" :value="null"></option>
<option v-for="(option, key) in parsedOptions" :key="key"
v-html="option" :value="key"
<option v-for="option in parsedOptions" :key="option.id"
v-html="option.name" :value="option.id"
></option>
</select>
<div class="absolute pointer-events-none top-0 right-0 -mx-1 flex items-center h-full mr-4 cursor-pointer">
<div v-if="hint" v-tooltip="hint" class="px-1">
<sprite src="info-button" class="w-5 h-5 text-indigo-200"></sprite>
<div class="info-wrap pointer-events-none">
<div v-if="hint" v-tooltip="hint">
<sprite src="info-button" class="info-button"></sprite>
</div>
<div class="px-1 relative">
<sprite class="w-3 h-3 fill-current" src="chevron-down"></sprite>
<div class="px-1 relative" v-if="size != 'xs'">
<sprite class="chevron w-3 h-3 fill-current" src="chevron-down"></sprite>
</div>
<div class="px-1 relative" v-if="size == 'xs'">
<sprite class="chevron w-2 h-2 fill-current" src="chevron-down"></sprite>
</div>
</div>
</div>
@ -38,15 +28,23 @@
</template>
<script>
import mapValues from 'lodash/mapValues';
import keyBy from 'lodash/keyBy';
import map from 'lodash/map';
export default {
props: {
disabled: {
type: Boolean,
default: function() { return false; }
},
id: {},
inset: {
type: Boolean,
default: false
},
size: {
default: function() { return null; }
default: function() { return 'base'; }
},
emptyLabel: {
default: false,
@ -78,7 +76,11 @@ export default {
},
computed: {
parsedOptions() {
return this.options;
return Array.isArray(this.options)
? this.options
: map(this.options, (value, key) => {
return {'name': value, id: key};
});
}
},
methods: {

97
resources/js/components/FText.vue
View File

@ -1,27 +1,14 @@
<template>
<label class="flex flex-col relative" :for="id" :class="{['h-field-'+size]: inset === true}">
<div class="relative h-full flex flex-col">
<span v-if="label && !inset" class="font-semibold leading-none relative z-10 text-gray-400" :class="{
'text-xs': size == 'sm',
'text-sm': size === null
}">{{ label }}<span v-show="required" class="text-red-300">&nbsp;*</span></span>
<span v-if="label && inset" class="absolute z-10 top-0 left-0 -mt-2 px-1 ml-3 inset-bg font-semibold text-gray-700" :class="{
'text-xs': size == 'sm',
'text-sm': size === null
}" v-text="label"></span>
<div class="relative h-full mt-1" :class="{['h-field-'+size]: inset === false}">
<input :type="type" :name="name" :value="transformedValue" @input="onInput" @change="onChange" :disabled="disabled" :placeholder="placeholder"
@focus="onFocus" @blur="onBlur"
class="border-gray-600 border-solid bg-gray-700 w-full appearance-none outline-none h-full"
:class="{
'rounded-lg text-sm border-2 p-2 text-gray-300': size === null,
'rounded-lg py-2 px-2 text-xs border-2 text-gray-800': size == 'sm'
}"
/>
<div class="absolute top-0 right-0 -mx-1 flex items-center h-full cursor-pointer">
<div v-if="hint" class="absolute top-0 right-0 h-full items-center mr-2 flex w-6" v-tooltip="hint">
<sprite src="info-button" class="w-5 h-5 text-indigo-200"></sprite>
</div>
<label class="field-wrap" :for="id" :class="`field-wrap-${size}`">
<span v-if="label" class="field-label">
{{ label }}
<span v-show="required" class="text-red-800">&nbsp;*</span>
</span>
<div class="real-field-wrap" :class="`size-${size}`">
<input :name="name" :type="type" :value="transformedValue" @input="onInput" @change="onChange" :disabled="disabled" :placeholder="placeholder" @focus="onFocus" @blur="onBlur">
<div v-if="hint" class="info-wrap">
<div v-tooltip="hint">
<sprite src="info-button" class="info-button"></sprite>
</div>
</div>
</div>
@ -54,6 +41,17 @@ var numb = {
return a / 100;
}
}),
naturalDetailRaw: wNumb({
mark: '',
thousand: '',
decimals: 0,
decoder(a) {
return a * 10000;
},
encoder(a) {
return a / 10000;
}
}),
area: wNumb({
mark: ',',
thousand: '.',
@ -65,6 +63,17 @@ var numb = {
return a / 100;
}
}),
areaDetail: wNumb({
mark: ',',
thousand: '.',
decimals: 4,
decoder(a) {
return a * 10000;
},
encoder(a) {
return a / 10000;
}
}),
twoDecimalRaw: wNumb({
mark: ',',
thousand: '',
@ -75,6 +84,17 @@ var numb = {
encoder(a) {
return a / 100;
}
}),
fourDecimalRaw: wNumb({
mark: ',',
thousand: '',
decimals: 4,
decoder(a) {
return a * 10000;
},
encoder(a) {
return a / 10000;
}
})
};
@ -136,6 +156,25 @@ var transformers = {
return numb.twoDecimalRaw.from(v);
}
}
},
currencyDetail: {
display: {
to(v) { return v === null ? '' : numb.areaDetail.to(v); },
from(v) { return v === '' ? null : numb.areaDetail.from(v); }
},
edit: {
to(v) {
if (v === null) { return ''; }
if (Math.round(v / 10000) * 10000 === v) { return numb.naturalDetailRaw.to(v); }
return numb.fourDecimalRaw.to(v);
},
from(v) {
if (v === '') { return null; }
if (v.indexOf(',') === -1) { return numb.naturalDetailRaw.from(v); }
return numb.fourDecimalRaw.from(v);
}
}
}
};
@ -146,11 +185,6 @@ export default {
};
},
props: {
name: {
default: function() {
return '';
}
},
placeholder: {
default: function() {
return '';
@ -170,7 +204,9 @@ export default {
}
},
size: {
default: null
default: function() {
return 'base';
}
},
id: {
required: true
@ -194,7 +230,8 @@ export default {
disabled: {
default: false,
type: Boolean
}
},
name: {},
},
methods: {
onFocus() {