Merge branch 'master' of github.com:Budibase/budibase
This commit is contained in:
Michael Shanks
commit
5d05d8d9d5
|
|
@ -24,5 +24,8 @@
|
|||
"lint:fix": "eslint --fix packages",
|
||||
"format": "prettier --write \"{,!(node_modules)/**/}*.{js,jsx,svelte}\""
|
||||
},
|
||||
"dependencies": {}
|
||||
"dependencies": {
|
||||
"@material/icon-button": "4.0.0",
|
||||
"date-fns": "^2.10.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
/* Budibase Component Styles */
|
||||
.header {
|
||||
font-size: 0.75rem;
|
||||
color: #999;
|
||||
color: #000333;
|
||||
opacity: 0.4;
|
||||
text-transform: uppercase;
|
||||
margin-top: 1rem;
|
||||
font-weight: 500;
|
||||
|
|
@ -58,7 +59,7 @@
|
|||
cursor: pointer;
|
||||
padding: 0 7px 0 3px;
|
||||
height: 35px;
|
||||
margin: 5px 0;
|
||||
margin: 5px 20px 5px 0px;
|
||||
border-radius: 0 5px 5px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -68,7 +69,7 @@
|
|||
|
||||
.budibase__nav-item.selected {
|
||||
color: var(--button-text);
|
||||
background: var(--background-button) !important;
|
||||
background: #fafafa !important;
|
||||
}
|
||||
|
||||
.budibase__nav-item:hover {
|
||||
|
|
@ -82,7 +83,7 @@
|
|||
border: 1px solid #DBDBDB;
|
||||
text-align: left;
|
||||
letter-spacing: 0.7px;
|
||||
color: #163057;
|
||||
color: #000333;
|
||||
font-size: 16px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
export let disabled = false
|
||||
export let hidden = false
|
||||
export let primary = true
|
||||
export let cancel = false
|
||||
export let alert = false
|
||||
export let warning = false
|
||||
</script>
|
||||
|
|
@ -12,6 +13,7 @@
|
|||
class:hidden
|
||||
class:primary
|
||||
class:alert
|
||||
class:cancel
|
||||
class:warning
|
||||
{disabled}>
|
||||
<slot />
|
||||
|
|
@ -19,8 +21,8 @@
|
|||
|
||||
<style>
|
||||
.primary {
|
||||
color: #0055ff;
|
||||
background: rgb(54, 133, 249, 0.1);
|
||||
color: #ffffff;
|
||||
background: #0055ff;
|
||||
}
|
||||
|
||||
.alert {
|
||||
|
|
@ -28,17 +30,23 @@
|
|||
background: rgba(255, 0, 31, 0.1);
|
||||
}
|
||||
|
||||
.cancel {
|
||||
color: var(--secondary40);
|
||||
background: none;
|
||||
}
|
||||
|
||||
.button {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
font-weight: 600;
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
min-width: 120px;
|
||||
padding: 10px 20px;
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
cursor: pointer;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.button:disabled {
|
||||
|
|
|
|||
|
|
@ -8,9 +8,8 @@
|
|||
|
||||
<style>
|
||||
.root {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-gap: 5px;
|
||||
width: 50%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -41,13 +41,26 @@
|
|||
<h4 class="budibase__title--4">{title}</h4>
|
||||
</div>
|
||||
<div class="uk-modal-body">
|
||||
<slot>{body}</slot>
|
||||
<slot class="rows">{body}</slot>
|
||||
</div>
|
||||
<div class="uk-modal-footer">
|
||||
<ButtonGroup>
|
||||
<ActionButton cancel on:click={cancel}>{cancelText}</ActionButton>
|
||||
<ActionButton primary on:click={ok}>{okText}</ActionButton>
|
||||
<ActionButton alert on:click={cancel}>{cancelText}</ActionButton>
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
.uk-modal-footer {
|
||||
background: var(--lightslate);
|
||||
}
|
||||
|
||||
.uk-modal-dialog {
|
||||
width: 400px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -8,8 +8,6 @@
|
|||
outline: none;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
background: rgba(249, 249, 249, 1);
|
||||
|
||||
min-width: 1.8rem;
|
||||
min-height: 1.8rem;
|
||||
padding-bottom: 10px;
|
||||
|
|
@ -20,6 +18,6 @@
|
|||
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
color: rgba(22, 48, 87, 1);
|
||||
color: var(--secondary100);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -23,11 +23,11 @@
|
|||
}
|
||||
|
||||
select {
|
||||
height: 35px;
|
||||
height: 40px;
|
||||
display: block;
|
||||
font-family: sans-serif;
|
||||
font-weight: 500;
|
||||
color: #163057;
|
||||
font-weight: 400;
|
||||
color: #000333;
|
||||
padding: 0 2.6em 0em 1.4em;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
|
|
@ -36,8 +36,7 @@
|
|||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background: #fff;
|
||||
border: 1px solid #ccc;
|
||||
background: var(--lightslate);
|
||||
}
|
||||
|
||||
.arrow {
|
||||
|
|
|
|||
|
|
@ -1,21 +1,23 @@
|
|||
@import "./budibase.css";
|
||||
|
||||
:root {
|
||||
--primary100: #173157FF;
|
||||
--primary75: #454CA0BF;
|
||||
--primary50: #454CA080;
|
||||
--primary25: #454CA040;
|
||||
--primary10: #454CA01A;
|
||||
--primary5: #454ca00c;
|
||||
--primarydark: #3F448A;
|
||||
--primary100: #0055ff;
|
||||
--primary80: rgba(0, 85, 255, 0.8);
|
||||
--primary60: #rgba(0, 85, 255, 0.6);
|
||||
--primary40: #rgba(0, 85, 255, 0.4);
|
||||
--primary20: #rgba(0, 85, 255, 0.2);
|
||||
--primary10: #rgba(0, 85, 255, 0.1);
|
||||
--primary5: #rgba(0, 85, 255, 0.05);
|
||||
--primarydark: #0044cc;
|
||||
|
||||
--secondary100:#828fa5;
|
||||
--secondary75: #162B4DBF;
|
||||
--secondary50: #162B4D80;
|
||||
--secondary25: #162B4D40;
|
||||
--secondary10: #162B4D1A;
|
||||
--secondary5:#fff;
|
||||
--secondarydark: #3F448A;
|
||||
--secondary100:#000333;
|
||||
--secondary80: rgba(0, 3, 51, 0.8);
|
||||
--secondary60: rgba(0, 3, 51, 0.6);
|
||||
--secondary40: rgba(0, 3, 51, 0.4);
|
||||
--secondary20: rgba(0, 3, 51, 0.2);
|
||||
--secondary10: rgba(0, 3, 51, 0.1);
|
||||
--secondary5: rgba(0, 3, 51, 0.05);
|
||||
--secondarydark: #00021a;
|
||||
|
||||
--tertiary: #F2F5F7;
|
||||
|
||||
|
|
@ -35,8 +37,8 @@
|
|||
|
||||
--white: #FFFFFF;
|
||||
--darkslate: #1a202c;
|
||||
--slate: #a0aec0;
|
||||
--lightslate: #f7fafc;
|
||||
--slate: #d8d8d8;
|
||||
--lightslate: #f9f9f9;
|
||||
|
||||
--borderradius: 2px;
|
||||
--borderradiusall: 2px 2px 2px 2px;
|
||||
|
|
@ -55,13 +57,13 @@
|
|||
--quotation: var(--fontnormal) "italics" var(--darkslate) 16pt;
|
||||
--smallheavybodytext: var(--fontbold) "regular" var(--secondary100) 14pt;
|
||||
|
||||
--background-button: #e6eeff;
|
||||
--background-button: #f9f9f9;
|
||||
--button-text: #0055ff;
|
||||
}
|
||||
|
||||
html, body {
|
||||
font-family: var(--fontnormal);
|
||||
color: var(--secondary100);
|
||||
color: var(--secondary80);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height:100%;
|
||||
|
|
@ -83,7 +85,7 @@ h2 {
|
|||
h3 {
|
||||
font-family: var(--fontbold);
|
||||
font-size: 24pt;
|
||||
color: var(--darkslate);
|
||||
color: var(--secondary60);
|
||||
}
|
||||
|
||||
h4 {
|
||||
|
|
|
|||
|
|
@ -99,7 +99,7 @@
|
|||
flex-direction: column;
|
||||
max-height: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--secondary5);
|
||||
background-color: var(--white);
|
||||
}
|
||||
|
||||
.nav-group-header {
|
||||
|
|
|
|||
|
|
@ -162,38 +162,49 @@
|
|||
.component-props-container {
|
||||
margin-top: 10px;
|
||||
flex: 1 1 auto;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-right: 20px;
|
||||
background: none;
|
||||
border-radius: 5px;
|
||||
border-radius: 3px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
li button {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: none;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
padding: 12px;
|
||||
border-radius: 3px;
|
||||
padding: 7px;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
li:nth-last-child(1) {
|
||||
margin-right: 0px;
|
||||
background: none;
|
||||
border-radius: 3px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.selected {
|
||||
color: var(--button-text);
|
||||
background: var(--background-button) !important;
|
||||
background: #f9f9f9 !important;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.button-indicator {
|
||||
|
|
|
|||
|
|
@ -239,12 +239,12 @@
|
|||
position: relative;
|
||||
padding: 0 15px;
|
||||
cursor: pointer;
|
||||
border: 1px solid #ebebeb;
|
||||
border: 1px solid #d8d8d8;
|
||||
border-radius: 2px;
|
||||
margin: 5px 0;
|
||||
height: 40px;
|
||||
box-sizing: border-box;
|
||||
color: #163057;
|
||||
color: #000333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
|
|
@ -256,11 +256,10 @@
|
|||
}
|
||||
|
||||
.component > .name {
|
||||
color: #163057;
|
||||
color: #000333;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
opacity: 0.6;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
ul {
|
||||
|
|
@ -279,12 +278,11 @@
|
|||
background: #fafafa;
|
||||
padding: 10px;
|
||||
border-radius: 2px;
|
||||
color: rgba(22, 48, 87, 0.6);
|
||||
color:var(--secondary80);
|
||||
}
|
||||
|
||||
.preset-menu > span {
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -94,7 +94,7 @@
|
|||
border-radius: 3px;
|
||||
height: 35px;
|
||||
align-items: center;
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.item button {
|
||||
|
|
|
|||
|
|
@ -54,14 +54,15 @@
|
|||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 2rem 0;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.switcher {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 25px;
|
||||
padding: 0 1.5rem;
|
||||
margin-bottom: 20px;
|
||||
padding: 0 20px 20px;
|
||||
border-bottom: 1px solid #d8d8d8;
|
||||
}
|
||||
|
||||
.switcher > button {
|
||||
|
|
@ -70,21 +71,21 @@
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
font-size: 0.85rem;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
color: #999;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
color: var(--secondary60);
|
||||
}
|
||||
|
||||
.switcher > .selected {
|
||||
color: #333;
|
||||
color: var(--secondary100);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.panel {
|
||||
flex: 1 1 auto;
|
||||
height: 0px;
|
||||
overflow-y: auto;
|
||||
padding: 0 1.5rem 1.5rem 1.5rem;
|
||||
padding: 0 20px 40px 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -136,7 +136,8 @@
|
|||
text-transform: uppercase;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: #8997ab;
|
||||
color: #000333;
|
||||
opacity: 0.6;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
|
|
@ -144,16 +145,16 @@
|
|||
text-transform: uppercase;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
color: #163057;
|
||||
opacity: 0.3;
|
||||
color: #000333;
|
||||
opacity: 0.4;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: #163057;
|
||||
opacity: 0.6;
|
||||
font-weight: 400;
|
||||
color: #000333;
|
||||
opacity: 0.8;
|
||||
padding-top: 12px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -51,26 +51,26 @@
|
|||
<style>
|
||||
.selected {
|
||||
color: var(--button-text);
|
||||
background: var(--background-button);
|
||||
background: #f9f9f9;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
background: rgba(249, 249, 249, 1);
|
||||
border-radius: 3px;
|
||||
|
||||
min-width: 1.6rem;
|
||||
min-height: 1.6rem;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
font-size: 1.2rem;
|
||||
font-weight: 500;
|
||||
color: rgba(22, 48, 87, 1);
|
||||
color: #000333;
|
||||
}
|
||||
|
||||
.inputs {
|
||||
|
|
|
|||
|
|
@ -126,3 +126,36 @@
|
|||
|
||||
</ConfirmDialog>
|
||||
|
||||
<style>
|
||||
|
||||
.uk-margin {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.uk-form-controls {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.uk-form-label {
|
||||
padding-bottom: 10px;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
color: var(--secondary80);
|
||||
}
|
||||
|
||||
.uk-input {
|
||||
height: 40px !important;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.uk-select {
|
||||
height: 40px !important;
|
||||
font-weight: 500px;
|
||||
color: var(--secondary60);
|
||||
border: 1px solid var(--slate);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@
|
|||
.root {
|
||||
padding-bottom: 10px;
|
||||
font-size: 0.9rem;
|
||||
color: var(--secondary50);
|
||||
color: #000333;
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
padding-left: 1.8rem;
|
||||
|
|
@ -79,6 +79,6 @@
|
|||
.icon {
|
||||
display: inline-block;
|
||||
width: 14px;
|
||||
color: #333;
|
||||
color: #000333;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -34,14 +34,15 @@
|
|||
grid-template-rows: 1fr;
|
||||
grid-template-columns: 70px 1fr;
|
||||
grid-gap: 10px;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
h5 {
|
||||
word-wrap: break-word;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: #163057;
|
||||
opacity: 0.6;
|
||||
font-weight: 400;
|
||||
color: #000333;
|
||||
opacity: 0.8;
|
||||
padding-top: 12px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -91,9 +91,7 @@
|
|||
cursor: pointer;
|
||||
outline: none;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
background: rgba(249, 249, 249, 1);
|
||||
|
||||
border-radius: 3px;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 700;
|
||||
color: rgba(22, 48, 87, 1);
|
||||
|
|
|
|||
|
|
@ -43,7 +43,9 @@
|
|||
<div class="pages-list-container">
|
||||
<div class="nav-header">
|
||||
<span class="navigator-title">Navigator</span>
|
||||
<span class="components-nav-header">Pages</span>
|
||||
<div class="border-line" />
|
||||
|
||||
<span class="components-nav-page">Pages</span>
|
||||
</div>
|
||||
|
||||
<div class="nav-items-container">
|
||||
|
|
@ -108,17 +110,28 @@
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
.root {
|
||||
display: grid;
|
||||
grid-template-columns: 290px 1fr 350px;
|
||||
grid-template-columns: 275px 1fr 275px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1800px) {
|
||||
.root {
|
||||
display: grid;
|
||||
grid-template-columns: 300px 1fr 300px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: #fafafa;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-nav {
|
||||
grid-column: 1;
|
||||
background-color: var(--secondary5);
|
||||
background-color: var(--white);
|
||||
height: calc(100vh - 49px);
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
|
|
@ -136,29 +149,34 @@
|
|||
|
||||
.components-pane {
|
||||
grid-column: 3;
|
||||
background-color: var(--secondary5);
|
||||
background-color: var(--white);
|
||||
min-height: 0px;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.components-nav-header {
|
||||
font-size: 0.75rem;
|
||||
color: #999;
|
||||
.components-nav-page {
|
||||
font-size: 12px;
|
||||
color: #000333;
|
||||
text-transform: uppercase;
|
||||
margin-top: 1rem;
|
||||
font-weight: 500;
|
||||
padding-left: 20px;
|
||||
margin-top: 20px;
|
||||
font-weight: 700;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.nav-group-header {
|
||||
font-size: 0.9rem;
|
||||
padding-left: 1rem;
|
||||
.components-nav-header {
|
||||
font-size: 12px;
|
||||
color: #000333;
|
||||
text-transform: uppercase;
|
||||
margin-top: 20px;
|
||||
font-weight: 700;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.nav-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 1.5rem;
|
||||
padding: 0 1.8rem;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.nav-items-container {
|
||||
|
|
@ -167,7 +185,7 @@
|
|||
|
||||
.nav-group-header {
|
||||
display: flex;
|
||||
padding: 1.5rem 0 0 1.8rem;
|
||||
padding: 0px 20px 0px 20px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: bold;
|
||||
justify-content: space-between;
|
||||
|
|
@ -200,20 +218,20 @@
|
|||
}
|
||||
|
||||
.navigator-title {
|
||||
font-size: 14px;
|
||||
color: var(--secondary100);
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
font-weight: 400;
|
||||
color: #999;
|
||||
font-size: 0.9rem;
|
||||
padding: 0 20px 20px 20px;
|
||||
line-height: 1rem !important;
|
||||
}
|
||||
|
||||
.border-line {
|
||||
border-bottom: 1px solid #ddd;
|
||||
margin-top: 1.5rem;
|
||||
width: calc(100% + 1.5rem);
|
||||
border-bottom: 1px solid #d8d8d8;
|
||||
}
|
||||
|
||||
.components-list-container {
|
||||
overflow: auto;
|
||||
padding: 0 30px 0 0;
|
||||
padding: 20px 0px 0 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -169,6 +169,16 @@
|
|||
"description": "Material Design <tr>.",
|
||||
"props": {}
|
||||
},
|
||||
"DatePicker": {
|
||||
"name": "DatePicker",
|
||||
"description": "Material Design DatePicker",
|
||||
"props": {
|
||||
"date": "string",
|
||||
"label": "string",
|
||||
"onSelect": "event"
|
||||
},
|
||||
"tags": []
|
||||
},
|
||||
"H1": {
|
||||
"name": "H1",
|
||||
"description": "Sets the font properties as Roboto Headline1",
|
||||
|
|
@ -217,6 +227,18 @@
|
|||
},
|
||||
"tags": []
|
||||
},
|
||||
"IconButton": {
|
||||
"onClick": "event",
|
||||
"disabled": "bool",
|
||||
"href": "string",
|
||||
"icon": "string",
|
||||
"size": {
|
||||
"type":"options",
|
||||
"options": ["small", "medium", "large"],
|
||||
"default": "medium"
|
||||
},
|
||||
"tags": []
|
||||
},
|
||||
"Label": {
|
||||
"name": "Label",
|
||||
"description": "A simple label component that displays its text in the standard Roboto Material Design font",
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@
|
|||
"@material/checkbox": "^4.0.0",
|
||||
"@material/data-table": "4.0.0",
|
||||
"@material/form-field": "^4.0.0",
|
||||
"@material/icon-button": "4.0.0",
|
||||
"@material/list": "4.0.0",
|
||||
"@material/menu": "4.0.0",
|
||||
"@material/radio": "^4.0.0",
|
||||
|
|
@ -25,6 +26,7 @@
|
|||
"@material/textfield": "^4.0.0",
|
||||
"@nx-js/compiler-util": "^2.0.0",
|
||||
"bcryptjs": "^2.4.3",
|
||||
"date-fns": "^2.10.0",
|
||||
"fs-extra": "^8.1.0",
|
||||
"lodash": "^4.17.15",
|
||||
"npm-run-all": "^4.1.5",
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import { MDCRipple } from "@material/ripple"
|
|||
|
||||
export default function ripple(
|
||||
node,
|
||||
props = { colour: "primary", unbounded: false }
|
||||
props = { colour: "primary", unbounded: true }
|
||||
) {
|
||||
node.classList.add("mdc-ripple-surface")
|
||||
let component = new MDCRipple(node)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,178 @@
|
|||
<script>
|
||||
import { onMount } from "svelte"
|
||||
import {
|
||||
startOfMonth,
|
||||
endOfMonth,
|
||||
getDate,
|
||||
getMonth,
|
||||
getYear,
|
||||
addMonths,
|
||||
subMonths,
|
||||
format,
|
||||
} from "date-fns"
|
||||
import { MDCMenu } from "@material/menu"
|
||||
import { Textfield } from "../Textfield"
|
||||
import Icon from "../Common/Icon.svelte"
|
||||
import ripple from "../Common/Ripple.js"
|
||||
import { Body1, Body2, Caption } from "../Typography"
|
||||
import { IconButton } from "../IconButton"
|
||||
|
||||
let menu
|
||||
let instance
|
||||
let textfieldValue = ""
|
||||
|
||||
let daysArr = []
|
||||
let navDate = new Date()
|
||||
const weekdayMap = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]
|
||||
|
||||
export let date = new Date()
|
||||
export let label = ""
|
||||
export let onSelect = selectedDate => {}
|
||||
|
||||
onMount(() => {
|
||||
if (!!menu) {
|
||||
instance = new MDCMenu(menu)
|
||||
instance.open = false
|
||||
instance.setFixedPostion = true
|
||||
}
|
||||
})
|
||||
|
||||
function selectDate(dayOfMonth) {
|
||||
let month = getMonth(navDate)
|
||||
let year = getYear(navDate)
|
||||
date = new Date(year, month, dayOfMonth)
|
||||
onSelect(date)
|
||||
}
|
||||
|
||||
function addMonth() {
|
||||
navDate = addMonths(navDate, 1)
|
||||
}
|
||||
|
||||
function subtractMonth() {
|
||||
navDate = subMonths(navDate, 1)
|
||||
}
|
||||
|
||||
function openCalendar(isOpen) {
|
||||
instance.open = isOpen === undefined ? !instance.open : isOpen
|
||||
}
|
||||
|
||||
function textFieldChange(value) {
|
||||
const isDate = /^\d{1,2}\/\d{1,2}\/\d{4}$/
|
||||
if (isDate.test(value)) {
|
||||
const [year, month, day] = value.split("/").reverse()
|
||||
if (month > 0 && month <= 12 && (day > 0 && day <= 31)) {
|
||||
date = new Date(year, month - 1, day)
|
||||
navDate = date
|
||||
openCalendar(true)
|
||||
onSelect(date)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$: dateMonthEnds = endOfMonth(navDate).getDate()
|
||||
$: dateMonthBegins = startOfMonth(navDate).getDay()
|
||||
$: dayStart = dateMonthBegins + 1 //1 = sunday
|
||||
$: monthAndYear = format(navDate, "MMMM y")
|
||||
$: selectedDate = format(date, "dd/MM/yyyy")
|
||||
$: dayOfSelectedDate = getDate(date)
|
||||
$: for (let d = 1; d <= dateMonthEnds; d++) {
|
||||
if (d === 1) {
|
||||
daysArr = [d]
|
||||
} else {
|
||||
daysArr = [...daysArr, d]
|
||||
}
|
||||
}
|
||||
$: rowRepeater =
|
||||
dateMonthBegins > 5 && daysArr[daysArr.length - 1] > 30 ? 6 : 5
|
||||
$: sameMonthAndYear =
|
||||
getMonth(date) === getMonth(navDate) && getYear(date) === getYear(navDate)
|
||||
</script>
|
||||
|
||||
<div class="mdc-menu-surface--anchor">
|
||||
<Textfield
|
||||
{label}
|
||||
onChange={textFieldChange}
|
||||
value={selectedDate}
|
||||
trailingIcon={true}
|
||||
useIconButton={true}
|
||||
iconButtonClick={openCalendar}
|
||||
icon="calendar_today" />
|
||||
|
||||
<div
|
||||
bind:this={menu}
|
||||
class="mdc-menu mdc-menu-surface bbmd-menu"
|
||||
style={`margin-top: 70px`}>
|
||||
<div class="calendar-container">
|
||||
<div class="month-picker">
|
||||
<div>
|
||||
<IconButton icon="chevron_left" onClick={subtractMonth} />
|
||||
</div>
|
||||
<div class="centreText">
|
||||
<Body1 text={monthAndYear} />
|
||||
</div>
|
||||
<div>
|
||||
<IconButton icon="chevron_right" onClick={addMonth} />
|
||||
</div>
|
||||
</div>
|
||||
<div class="week-days">
|
||||
{#each weekdayMap as day, i}
|
||||
<div class="centreText">
|
||||
<Caption text={day} />
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
<div
|
||||
class="day-picker"
|
||||
style={`grid-template-rows: repeat(${rowRepeater}, 40px)`}>
|
||||
{#each daysArr as day, i}
|
||||
<div
|
||||
use:ripple
|
||||
style={i === 0 ? `grid-column-start: ${dayStart}` : ``}
|
||||
on:click={() => selectDate(day)}
|
||||
class={`bbmd-day ${dayOfSelectedDate === day && sameMonthAndYear ? 'selected' : ''}`}>
|
||||
<Body2 text={day} />
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Superfluous but necessary to keep the menu instance sweet -->
|
||||
<ul class="mdc-list" role="menu" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.bbmd-menu {
|
||||
width: 330px;
|
||||
height: auto;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.month-picker {
|
||||
display: grid;
|
||||
grid-template-columns: 40px 1fr 40px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.calendar-container {
|
||||
display: grid;
|
||||
height: 100%;
|
||||
grid-template-rows: repeat(3, auto);
|
||||
grid-gap: 5px;
|
||||
}
|
||||
|
||||
.week-days {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
}
|
||||
|
||||
.day-picker {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
}
|
||||
|
||||
.centreText {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
@import "@material/ripple/mdc-ripple.scss";
|
||||
@import "@material/theme/mixins";
|
||||
|
||||
.bbmd-day {
|
||||
transition: background-color .25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
display: flex;
|
||||
border-radius: 50%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.selected {
|
||||
@include mdc-theme-prop(background-color, primary);
|
||||
@include mdc-theme-prop(color, on-primary);
|
||||
}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
import "./_style.scss";
|
||||
export { default as DatePicker } from "./DatePicker.svelte";
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<script>
|
||||
import ripple from "../Common/Ripple.js"
|
||||
import ClassBuilder from "../ClassBuilder.js"
|
||||
|
||||
const cb = new ClassBuilder("icon-button")
|
||||
|
||||
let on = false
|
||||
|
||||
export let _bb
|
||||
export let context = ""
|
||||
export let onClick = () => {}
|
||||
export let disabled = false
|
||||
export let href = ""
|
||||
export let icon = ""
|
||||
export let onIcon = "" //on state icon for toggle button
|
||||
export let size = "medium"
|
||||
|
||||
function onButtonClick() {
|
||||
open = !open
|
||||
onClick()
|
||||
}
|
||||
|
||||
$: isToggleButton = !!icon && !!onIcon
|
||||
$: useLinkButton = !!href
|
||||
|
||||
$: customs = { size }
|
||||
$: props = { customs, extras: ["material-icons", context] }
|
||||
$: iconBtnClass = cb.build({ props })
|
||||
</script>
|
||||
|
||||
{#if useLinkButton}
|
||||
<a
|
||||
on:click={onButtonClick}
|
||||
class={iconBtnClass}
|
||||
{href}
|
||||
{disabled}
|
||||
role="button"
|
||||
tabindex="0">
|
||||
{#if isToggleButton}
|
||||
<i
|
||||
use:ripple
|
||||
class="material-icons mdc-icon-button__icon mdc-icon-button__icon--on">
|
||||
{onIcon}
|
||||
</i>
|
||||
<i use:ripple class="material-icons mdc-icon-button__icon">{icon}</i>
|
||||
{:else}{icon}{/if}
|
||||
</a>
|
||||
{:else}
|
||||
<button
|
||||
on:click={onButtonClick}
|
||||
class={iconBtnClass}
|
||||
{disabled}
|
||||
role="button"
|
||||
aria-label="Add to favorites"
|
||||
aria-pressed="false"
|
||||
tabindex="0">
|
||||
{#if isToggleButton}
|
||||
<i use:ripple class="material-icons mdc-icon-button__icon">{icon}</i>
|
||||
<i
|
||||
use:ripple
|
||||
class="material-icons mdc-icon-button__icon mdc-icon-button__icon--on">
|
||||
{onIcon}
|
||||
</i>
|
||||
{:else}{icon}{/if}
|
||||
</button>
|
||||
{/if}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
@import "@material/icon-button/mdc-icon-button";
|
||||
|
||||
.mdc-icon-button {
|
||||
|
||||
&.bbmd-mdc-icon-button--size-large {
|
||||
@include mdc-icon-button-icon-size(24px);
|
||||
}
|
||||
|
||||
&.bbmd-mdc-icon-button--size-medium {
|
||||
@include mdc-icon-button-icon-size(20px);
|
||||
}
|
||||
|
||||
&.bbmd-mdc-icon-button--size-small {
|
||||
@include mdc-icon-button-icon-size(16px);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
import "./_style.scss";
|
||||
export { default as IconButton } from "./IconButton.svelte";
|
||||
|
|
@ -17,6 +17,8 @@
|
|||
Icon,
|
||||
List,
|
||||
Select,
|
||||
DatePicker,
|
||||
IconButton,
|
||||
} = props
|
||||
|
||||
let currentComponent
|
||||
|
|
@ -34,6 +36,8 @@
|
|||
Select,
|
||||
Radiobutton,
|
||||
Radiobuttongroup,
|
||||
DatePicker,
|
||||
IconButton,
|
||||
],
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -205,5 +205,16 @@ export const props = {
|
|||
value: "2",
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
DatePicker: {
|
||||
_component: "@budibase/materialdesign-components/DatePicker",
|
||||
_children: [],
|
||||
label: "Date of Admission",
|
||||
onSelect: date => console.log("SELECTED DATE", date)
|
||||
},
|
||||
IconButton: {
|
||||
_component: "@budibase/materialdesign-components/IconButton",
|
||||
_children: [],
|
||||
icon: "calendar_today",
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,10 +9,12 @@
|
|||
import HelperText from "./HelperText.svelte"
|
||||
import CharacterCounter from "./CharacterCounter.svelte"
|
||||
import Icon from "../Common/Icon.svelte"
|
||||
import { IconButton } from "../IconButton"
|
||||
|
||||
const cb = new ClassBuilder("text-field", ["primary", "medium"])
|
||||
|
||||
let tf = null
|
||||
export let tfHeight = null
|
||||
let tfInstance = null
|
||||
|
||||
onMount(() => {
|
||||
|
|
@ -40,6 +42,8 @@
|
|||
export let placeholder = ""
|
||||
export let icon = ""
|
||||
export let trailingIcon = false
|
||||
export let useIconButton = false
|
||||
export let iconButtonClick = () => {}
|
||||
export let textarea = false
|
||||
export let rows = 4
|
||||
export let cols = 40
|
||||
|
|
@ -93,10 +97,11 @@
|
|||
function changed(e) {
|
||||
const val = e.target.value
|
||||
value = val
|
||||
if (_bb.isBound(_bb.props.value)) {
|
||||
_bb.setStateFromBinding(_bb.props.value, val)
|
||||
}
|
||||
_bb.call(onChange, val)
|
||||
onChange(value)
|
||||
// if (_bb.isBound(_bb.props.value)) {
|
||||
// _bb.setStateFromBinding(_bb.props.value, val)
|
||||
// }
|
||||
// _bb.call(onChange, val)
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -105,7 +110,7 @@ TODO:Needs error handling - this will depend on how Budibase handles errors
|
|||
-->
|
||||
|
||||
<div class="textfield-container" class:fullwidth>
|
||||
<div bind:this={tf} class={blockClasses}>
|
||||
<div bind:this={tf} bind:clientHeight={tfHeight} class={blockClasses}>
|
||||
{#if textarea}
|
||||
<CharacterCounter />
|
||||
<textarea
|
||||
|
|
@ -123,8 +128,15 @@ TODO:Needs error handling - this will depend on how Budibase handles errors
|
|||
on:change={changed} />
|
||||
{:else}
|
||||
{#if renderLeadingIcon}
|
||||
{#if useIconButton}
|
||||
<IconButton
|
||||
{icon}
|
||||
context="mdc-text-field__icon mdc-text-field__icon--leading"
|
||||
onClick={iconButtonClick} />
|
||||
{:else}
|
||||
<Icon context="text-field" {icon} />
|
||||
{/if}
|
||||
{/if}
|
||||
<input
|
||||
{id}
|
||||
{disabled}
|
||||
|
|
@ -139,8 +151,15 @@ TODO:Needs error handling - this will depend on how Budibase handles errors
|
|||
on:focus={focus}
|
||||
on:input={changed} />
|
||||
{#if renderTrailingIcon}
|
||||
{#if useIconButton}
|
||||
<IconButton
|
||||
{icon}
|
||||
context="mdc-text-field__icon mdc-text-field__icon--trailing"
|
||||
onClick={iconButtonClick} />
|
||||
{:else}
|
||||
<Icon context="text-field" {icon} />
|
||||
{/if}
|
||||
{/if}
|
||||
{#if variant !== 'outlined'}
|
||||
<div class="mdc-line-ripple" />
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -2,4 +2,4 @@
|
|||
export let text = ""
|
||||
</script>
|
||||
|
||||
<div class="mdc-typography--caption">{text}</div>
|
||||
<span class="mdc-typography--caption">{text}</span>
|
||||
|
|
|
|||
|
|
@ -19,3 +19,5 @@ export { default as recordForm } from "./Templates/recordForm"
|
|||
export { List, ListItem } from "./List"
|
||||
export { Menu } from "./Menu"
|
||||
export { Select } from "./Select"
|
||||
export { DatePicker } from "./DatePicker"
|
||||
export { IconButton } from "./IconButton"
|
||||
|
|
|
|||
|
|
@ -78,13 +78,12 @@
|
|||
box-sizing: border-box;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 2px;
|
||||
color: #333;
|
||||
background-color: #f4f4f4;
|
||||
color: #000333;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.default:active {
|
||||
background-color: #ddd;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.default:focus {
|
||||
|
|
|
|||
|
|
@ -155,16 +155,15 @@
|
|||
box-sizing: border-box;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 2px;
|
||||
color: #333;
|
||||
background-color: #f4f4f4;
|
||||
color: #000333;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.default-button:active {
|
||||
background-color: #ddd;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.default-button:focus {
|
||||
border-color: #666;
|
||||
border-color: #f9f9f9;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
61
yarn.lock
61
yarn.lock
|
|
@ -756,6 +756,62 @@
|
|||
npmlog "^4.1.2"
|
||||
write-file-atomic "^2.3.0"
|
||||
|
||||
"@material/animation@^4.0.0":
|
||||
version "4.0.0"
|
||||
resolved "https://registry.yarnpkg.com/@material/animation/-/animation-4.0.0.tgz#19eaf377809f20978f8452a4237d27867d3ffd1d"
|
||||
integrity sha512-IfzXzstWdtKQcsNWu+s2Hpz5dBwkTHtgtzoesr+FC7TqENH+SJdsF1ntnZI1XVi2C9ZlBf7f4BSmXpWHD0MIlw==
|
||||
dependencies:
|
||||
tslib "^1.9.3"
|
||||
|
||||
"@material/base@^4.0.0":
|
||||
version "4.0.0"
|
||||
resolved "https://registry.yarnpkg.com/@material/base/-/base-4.0.0.tgz#535574d0b63c18892cfb70e88b27bc8f8090677a"
|
||||
integrity sha512-vHm7fkqXzjdfxifXvlmaZColoIfKuWmO+1rvdzDORTWP+A8Dq70cgKd2I1SBqxzDGjOasMzHbQI6f9MISQf2vQ==
|
||||
dependencies:
|
||||
tslib "^1.9.3"
|
||||
|
||||
"@material/dom@^4.0.0":
|
||||
version "4.0.0"
|
||||
resolved "https://registry.yarnpkg.com/@material/dom/-/dom-4.0.0.tgz#f0e68c4429e555040304c958bb3e11614276fdfa"
|
||||
integrity sha512-GRCJT9+PGWqygZwGf1XLTrbmzP35YWG7+T0hpfhoIJO8VDiMTeyfvhJXFuA2wh9pD0noEjte0lmbdBlykrbWZw==
|
||||
dependencies:
|
||||
tslib "^1.9.3"
|
||||
|
||||
"@material/feature-targeting@^4.0.0":
|
||||
version "4.0.0"
|
||||
resolved "https://registry.yarnpkg.com/@material/feature-targeting/-/feature-targeting-4.0.0.tgz#8d9d1470801a1fd166773731613d9fa89e0fd85e"
|
||||
integrity sha512-0gk+f151vqmEdWkrQ9ocPlQRU9aUtSGsVBhletqIbsthLUsZIz9qk25FHjV1wHd/bGHknd9NH+T8ENprv3KLFg==
|
||||
|
||||
"@material/icon-button@4.0.0":
|
||||
version "4.0.0"
|
||||
resolved "https://registry.yarnpkg.com/@material/icon-button/-/icon-button-4.0.0.tgz#f7293462f1b4967712f9b8755b87c2228dcccc3d"
|
||||
integrity sha512-b1SyWtr2cwlKgIVo+irxRgW0lpIzauADLAxQEJ8/RTO9qVFviohJUnS+5QQCkC5zex5Q52OmQ+aNl0KRjkUdvQ==
|
||||
dependencies:
|
||||
"@material/base" "^4.0.0"
|
||||
"@material/feature-targeting" "^4.0.0"
|
||||
"@material/ripple" "^4.0.0"
|
||||
"@material/theme" "^4.0.0"
|
||||
tslib "^1.9.3"
|
||||
|
||||
"@material/ripple@^4.0.0":
|
||||
version "4.0.0"
|
||||
resolved "https://registry.yarnpkg.com/@material/ripple/-/ripple-4.0.0.tgz#906ba421a3e6c68651d829d44c50a95060aa1e75"
|
||||
integrity sha512-9BLIOvyCP5sM+fQpLlcJZWyrHguusJq8E5A1pxg0wQwputOyaPBM7recHhYkJmVjzRpTcPgf1PkvkpN6DKGcNg==
|
||||
dependencies:
|
||||
"@material/animation" "^4.0.0"
|
||||
"@material/base" "^4.0.0"
|
||||
"@material/dom" "^4.0.0"
|
||||
"@material/feature-targeting" "^4.0.0"
|
||||
"@material/theme" "^4.0.0"
|
||||
tslib "^1.9.3"
|
||||
|
||||
"@material/theme@^4.0.0":
|
||||
version "4.0.0"
|
||||
resolved "https://registry.yarnpkg.com/@material/theme/-/theme-4.0.0.tgz#8de388fcdbae20fd09b02a3bdef3049bf2f623a8"
|
||||
integrity sha512-vS4G4rusJTatTH50kSYO1U3UGN8EY9kGRvPaFsEFKikJBOqcR6KWK9H9/wCLqqd6nDNifEj9H2sdWw1AV4NA6Q==
|
||||
dependencies:
|
||||
"@material/feature-targeting" "^4.0.0"
|
||||
|
||||
"@mrmlnc/readdir-enhanced@^2.2.1":
|
||||
version "2.2.1"
|
||||
resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
|
||||
|
|
@ -1630,6 +1686,11 @@ dashdash@^1.12.0:
|
|||
dependencies:
|
||||
assert-plus "^1.0.0"
|
||||
|
||||
date-fns@^2.10.0:
|
||||
version "2.10.0"
|
||||
resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.10.0.tgz#abd10604d8bafb0bcbd2ba2e9b0563b922ae4b6b"
|
||||
integrity sha512-EhfEKevYGWhWlZbNeplfhIU/+N+x0iCIx7VzKlXma2EdQyznVlZhCptXUY+BegNpPW2kjdx15Rvq503YcXXrcA==
|
||||
|
||||
dateformat@^3.0.0:
|
||||
version "3.0.3"
|
||||
resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae"
|
||||
|
|
|
|||
Loading…
Reference in New Issue