akaunting 3.0 (the last dance)

This commit is contained in:
Burak Civan
2022-06-01 10:15:55 +03:00
parent cead09f6d4
commit d9c0764572
3812 changed files with 126831 additions and 102949 deletions

View File

@ -1,135 +0,0 @@
/* Generated using nucleoapp.com */
/* --------------------------------
Icon colors
-------------------------------- */
.icon {
display: inline-block;
/* icon primary color */
color: #111111;
height: 1em;
width: 1em;
}
.icon use {
/* icon secondary color - fill */
fill: #7ea6f6;
}
.icon.icon-outline use {
/* icon secondary color - stroke */
stroke: #7ea6f6;
}
/* --------------------------------
Change icon size
-------------------------------- */
.icon-xs {
height: 0.5em;
width: 0.5em;
}
.icon-sm {
height: 0.8em;
width: 0.8em;
}
.icon-lg {
height: 1.6em;
width: 1.6em;
}
.icon-xl {
height: 2em;
width: 2em;
}
/* --------------------------------
Align icon and text
-------------------------------- */
.icon-text-aligner {
/* add this class to parent element that contains icon + text */
display: flex;
align-items: center;
}
.icon-text-aligner .icon {
color: inherit;
margin-right: 0.4em;
}
.icon-text-aligner .icon use {
color: inherit;
fill: currentColor;
}
.icon-text-aligner .icon.icon-outline use {
stroke: currentColor;
}
/* --------------------------------
Icon reset values - used to enable color customizations
-------------------------------- */
.icon {
fill: currentColor;
stroke: none;
}
.icon.icon-outline {
fill: none;
stroke: currentColor;
}
.icon use {
stroke: none;
}
.icon.icon-outline use {
fill: none;
}
/* --------------------------------
Stroke effects - Nucleo outline icons
- 16px icons -> up to 1px stroke (16px outline icons do not support stroke changes)
- 24px, 32px icons -> up to 2px stroke
- 48px, 64px icons -> up to 4px stroke
-------------------------------- */
.icon-outline.icon-stroke-1 {
stroke-width: 1px;
}
.icon-outline.icon-stroke-2 {
stroke-width: 2px;
}
.icon-outline.icon-stroke-3 {
stroke-width: 3px;
}
.icon-outline.icon-stroke-4 {
stroke-width: 4px;
}
.icon-outline.icon-stroke-1 use,
.icon-outline.icon-stroke-3 use {
-webkit-transform: translateX(0.5px) translateY(0.5px);
-moz-transform: translateX(0.5px) translateY(0.5px);
-ms-transform: translateX(0.5px) translateY(0.5px);
-o-transform: translateX(0.5px) translateY(0.5px);
transform: translateX(0.5px) translateY(0.5px);
}

View File

@ -1,572 +0,0 @@
/*--------------------------------
hermes-dashboard-icons Web Font - built using nucleoapp.com
License - nucleoapp.com/license/
-------------------------------- */
@font-face {
font-family: 'NucleoIcons';
src: url('../fonts/nucleo-icons.eot');
src: url('../fonts/nucleo-icons.eot') format('embedded-opentype'), url('../fonts/nucleo-icons.woff2') format('woff2'), url('../fonts/nucleo-icons.woff') format('woff'), url('../fonts/nucleo-icons.ttf') format('truetype'), url('../fonts/nucleo-icons.svg') format('svg');
font-weight: normal;
font-style: normal;
}
/*------------------------
base class definition
-------------------------*/
.ni {
display: inline-block;
font: normal normal normal 14px/1 NucleoIcons;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/*------------------------
change icon size
-------------------------*/
.ni-lg {
font-size: 1.33333333em;
line-height: 0.75em;
vertical-align: -15%;
}
.ni-2x {
font-size: 2em;
}
.ni-3x {
font-size: 3em;
}
.ni-4x {
font-size: 4em;
}
.ni-5x {
font-size: 5em;
}
/*----------------------------------
add a square/circle background
-----------------------------------*/
.ni.square,
.ni.circle {
padding: 0.33333333em;
vertical-align: -16%;
background-color: #eee;
}
.ni.circle {
border-radius: 50%;
}
/*------------------------
list icons
-------------------------*/
.ni-ul {
padding-left: 0;
margin-left: 2.14285714em;
list-style-type: none;
}
.ni-ul > li {
position: relative;
}
.ni-ul > li > .ni {
position: absolute;
left: -1.57142857em;
top: 0.14285714em;
text-align: center;
}
.ni-ul > li > .ni.lg {
top: 0;
left: -1.35714286em;
}
.ni-ul > li > .ni.circle,
.ni-ul > li > .ni.square {
top: -0.19047619em;
left: -1.9047619em;
}
/*------------------------
spinning icons
-------------------------*/
.ni.spin {
-webkit-animation: nc-spin 2s infinite linear;
-moz-animation: nc-spin 2s infinite linear;
animation: nc-spin 2s infinite linear;
}
@-webkit-keyframes nc-spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes nc-spin {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
}
}
@keyframes nc-spin {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
/*------------------------
rotated/flipped icons
-------------------------*/
.ni.rotate-90 {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.ni.rotate-180 {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.ni.rotate-270 {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
.ni.flip-y {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
-webkit-transform: scale(-1, 1);
-moz-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
transform: scale(-1, 1);
}
.ni.flip-x {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
-webkit-transform: scale(1, -1);
-moz-transform: scale(1, -1);
-ms-transform: scale(1, -1);
-o-transform: scale(1, -1);
transform: scale(1, -1);
}
/*------------------------
font icons
-------------------------*/
.ni-active-40::before {
content: "\ea02";
}
.ni-air-baloon::before {
content: "\ea03";
}
.ni-album-2::before {
content: "\ea04";
}
.ni-align-center::before {
content: "\ea05";
}
.ni-align-left-2::before {
content: "\ea06";
}
.ni-ambulance::before {
content: "\ea07";
}
.ni-app::before {
content: "\ea08";
}
.ni-archive-2::before {
content: "\ea09";
}
.ni-atom::before {
content: "\ea0a";
}
.ni-badge::before {
content: "\ea0b";
}
.ni-bag-17::before {
content: "\ea0c";
}
.ni-basket::before {
content: "\ea0d";
}
.ni-bell-55::before {
content: "\ea0e";
}
.ni-bold-down::before {
content: "\ea0f";
}
.ni-bold-left::before {
content: "\ea10";
}
.ni-bold-right::before {
content: "\ea11";
}
.ni-bold-up::before {
content: "\ea12";
}
.ni-bold::before {
content: "\ea13";
}
.ni-book-bookmark::before {
content: "\ea14";
}
.ni-books::before {
content: "\ea15";
}
.ni-box-2::before {
content: "\ea16";
}
.ni-briefcase-24::before {
content: "\ea17";
}
.ni-building::before {
content: "\ea18";
}
.ni-bulb-61::before {
content: "\ea19";
}
.ni-bullet-list-67::before {
content: "\ea1a";
}
.ni-bus-front-12::before {
content: "\ea1b";
}
.ni-button-pause::before {
content: "\ea1c";
}
.ni-button-play::before {
content: "\ea1d";
}
.ni-button-power::before {
content: "\ea1e";
}
.ni-calendar-grid-58::before {
content: "\ea1f";
}
.ni-camera-compact::before {
content: "\ea20";
}
.ni-caps-small::before {
content: "\ea21";
}
.ni-cart::before {
content: "\ea22";
}
.ni-chart-bar-32::before {
content: "\ea23";
}
.ni-chart-pie-35::before {
content: "\ea24";
}
.ni-chat-round::before {
content: "\ea25";
}
.ni-check-bold::before {
content: "\ea26";
}
.ni-circle-08::before {
content: "\ea27";
}
.ni-cloud-download-95::before {
content: "\ea28";
}
.ni-cloud-upload-96::before {
content: "\ea29";
}
.ni-compass-04::before {
content: "\ea2a";
}
.ni-controller::before {
content: "\ea2b";
}
.ni-credit-card::before {
content: "\ea2c";
}
.ni-curved-next::before {
content: "\ea2d";
}
.ni-delivery-fast::before {
content: "\ea2e";
}
.ni-diamond::before {
content: "\ea2f";
}
.ni-email-83::before {
content: "\ea30";
}
.ni-fat-add::before {
content: "\ea31";
}
.ni-fat-delete::before {
content: "\ea32";
}
.ni-fat-remove::before {
content: "\ea33";
}
.ni-favourite-28::before {
content: "\ea34";
}
.ni-folder-17::before {
content: "\ea35";
}
.ni-glasses-2::before {
content: "\ea36";
}
.ni-hat-3::before {
content: "\ea37";
}
.ni-headphones::before {
content: "\ea38";
}
.ni-html5::before {
content: "\ea39";
}
.ni-istanbul::before {
content: "\ea3a";
}
.ni-key-25::before {
content: "\ea3b";
}
.ni-laptop::before {
content: "\ea3c";
}
.ni-like-2::before {
content: "\ea3d";
}
.ni-lock-circle-open::before {
content: "\ea3e";
}
.ni-map-big::before {
content: "\ea3f";
}
.ni-mobile-button::before {
content: "\ea40";
}
.ni-money-coins::before {
content: "\ea41";
}
.ni-note-03::before {
content: "\ea42";
}
.ni-notification-70::before {
content: "\ea43";
}
.ni-palette::before {
content: "\ea44";
}
.ni-paper-diploma::before {
content: "\ea45";
}
.ni-pin-3::before {
content: "\ea46";
}
.ni-planet::before {
content: "\ea47";
}
.ni-ruler-pencil::before {
content: "\ea48";
}
.ni-satisfied::before {
content: "\ea49";
}
.ni-scissors::before {
content: "\ea4a";
}
.ni-send::before {
content: "\ea4b";
}
.ni-settings-gear-65::before {
content: "\ea4c";
}
.ni-settings::before {
content: "\ea4d";
}
.ni-single-02::before {
content: "\ea4e";
}
.ni-single-copy-04::before {
content: "\ea4f";
}
.ni-sound-wave::before {
content: "\ea50";
}
.ni-spaceship::before {
content: "\ea51";
}
.ni-square-pin::before {
content: "\ea52";
}
.ni-support-16::before {
content: "\ea53";
}
.ni-tablet-button::before {
content: "\ea54";
}
.ni-tag::before {
content: "\ea55";
}
.ni-tie-bow::before {
content: "\ea56";
}
.ni-time-alarm::before {
content: "\ea57";
}
.ni-trophy::before {
content: "\ea58";
}
.ni-tv-2::before {
content: "\ea59";
}
.ni-umbrella-13::before {
content: "\ea5a";
}
.ni-user-run::before {
content: "\ea5b";
}
.ni-vector::before {
content: "\ea5c";
}
.ni-watch-time::before {
content: "\ea5d";
}
.ni-world::before {
content: "\ea5e";
}
.ni-zoom-split-in::before {
content: "\ea5f";
}
.ni-collection::before {
content: "\ea60";
}
.ni-image::before {
content: "\ea61";
}
.ni-shop::before {
content: "\ea62";
}
.ni-ungroup::before {
content: "\ea63";
}
.ni-world-2::before {
content: "\ea64";
}
.ni-ui-04::before {
content: "\ea65";
}
/* all icon font classes list here */

View File

@ -1,312 +0,0 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<font id="hermes-dashboard-icons" horiz-adv-x="256">
<font-face font-family="hermes-dashboard-icons"
units-per-em="256" ascent="256"
descent="0" />
<missing-glyph horiz-adv-x="0" />
<glyph glyph-name="active-40"
unicode="&#xEA02;"
horiz-adv-x="256" d=" M193.36128 154.90432L106.6666666666667 170.6666666666667V222.8587733333333C106.6666666666667 233.48576 99.4055466666667 243.33472 88.9166933333333 245.0417066666667C75.5508266666667 247.2154666666667 64 236.9576533333334 64 224V106.6666666666667H53.3333333333333V138.6666666666667H42.6666666666667C30.8848 138.6666666666667 21.3333333333333 129.11584 21.3333333333333 117.3333333333334V86.44992C21.3333333333333 71.9173333333334 26.2792533333333 57.8170666666667 35.35808 46.4688L64 10.6666666666667H202.6666666666667L219.26496 118.5546666666667C221.9003733333333 135.6868266666667 210.416 151.8034133333334 193.36128 154.90432z" />
<glyph glyph-name="air-baloon"
unicode="&#xEA03;"
horiz-adv-x="256" d=" M149.3333333333333 42.6666666666667H106.6666666666667C100.768 42.6666666666667 96 37.888 96 32V10.6666666666667C96 4.7786666666667 100.768 0 106.6666666666667 0H149.3333333333333C155.232 0 160 4.7786666666667 160 10.6666666666667V32C160 37.888 155.232 42.6666666666667 149.3333333333333 42.6666666666667z M128.736 255.9573333333334C128.6613333333333 255.9573333333334 128.5866666666667 255.968 128.512 255.968C128.3413333333333 255.9786666666667 128.1706666666667 256 128 256C127.84 256 127.68 255.9786666666667 127.5093333333333 255.9786666666667C127.4133333333333 255.9786666666667 127.3386666666667 255.968 127.2426666666667 255.968C80.544 255.552 42.6666666666667 217.4613333333333 42.6666666666667 170.6666666666667C42.6666666666667 138.6773333333333 82.4853333333333 75.936 87.0293333333333 68.8853333333333C89.0026666666667 65.8453333333333 92.3733333333333 64 96 64H106.6346666666667C106.6453333333333 64 106.656 64 106.6666666666667 64C106.6773333333333 64 106.688 64 106.6986666666667 64H160C163.6266666666667 64 166.9973333333333 65.8453333333333 168.9706666666667 68.8853333333333C173.5146666666667 75.936 213.3333333333333 138.6773333333333 213.3333333333333 170.6666666666667C213.3333333333333 217.472 175.4453333333334 255.5626666666667 128.736 255.9573333333334z" />
<glyph glyph-name="album-2"
unicode="&#xEA04;"
horiz-adv-x="256" d=" M245.3333333333333 234.6666666666667H192V256H170.6666666666667V234.6666666666667H138.6666666666667V256H117.3333333333333V234.6666666666667H85.3333333333333V256H64V234.6666666666667H10.6666666666667C4.7786666666667 234.6666666666667 0 229.8986666666667 0 224V10.6666666666667C0 4.768 4.7786666666667 0 10.6666666666667 0H245.3333333333333C251.2213333333333 0 256 4.768 256 10.6666666666667V224C256 229.8986666666667 251.2213333333333 234.6666666666667 245.3333333333333 234.6666666666667zM234.6666666666667 21.3333333333333H21.3333333333333V213.3333333333334H64V192H85.3333333333333V213.3333333333334H117.3333333333333V192H138.6666666666667V213.3333333333334H170.6666666666667V192H192V213.3333333333334H234.6666666666667V21.3333333333333z M158.3786666666667 144.32C156.7146666666667 146.9866666666667 153.952 148.7786666666667 150.848 149.2266666666667C147.744 149.6853333333334 144.5973333333334 148.7253333333333 142.24 146.6453333333333L46.24 61.312C42.9333333333333 58.368 41.792 53.6853333333333 43.36 49.5466666666667S48.9066666666667 42.6666666666667 53.3333333333333 42.6666666666667H202.6666666666666C206.5493333333333 42.6666666666667 210.112 44.768 212 48.16S213.7706666666667 55.7013333333334 211.7226666666667 58.9866666666667L158.3786666666667 144.32z M53.3333333333333 144C53.3333333333333 135.1634440027073 60.4967773360406 128 69.3333333333333 128C78.169889330626 128 85.3333333333333 135.1634440027073 85.3333333333333 144C85.3333333333333 152.8365559972927 78.169889330626 160 69.3333333333333 160C60.4967773360406 160 53.3333333333333 152.8365559972927 53.3333333333333 144z" />
<glyph glyph-name="align-center"
unicode="&#xEA05;"
horiz-adv-x="256" d=" M245.3333333333333 213.3333333333334H10.6666666666667C4.776 213.3333333333334 0 218.1093333333333 0 224S4.776 234.6666666666667 10.6666666666667 234.6666666666667H245.3333333333333C251.224 234.6666666666667 256 229.8906666666667 256 224S251.224 213.3333333333334 245.3333333333333 213.3333333333334z M192 149.3333333333334H64C58.1093333333333 149.3333333333334 53.3333333333333 154.1093333333333 53.3333333333333 160S58.1093333333333 170.6666666666667 64 170.6666666666667H192C197.8906666666667 170.6666666666667 202.6666666666667 165.8906666666667 202.6666666666667 160S197.8906666666667 149.3333333333334 192 149.3333333333334z M245.3333333333333 85.3333333333333H10.6666666666667C4.776 85.3333333333333 0 90.1093333333334 0 96S4.776 106.6666666666667 10.6666666666667 106.6666666666667H245.3333333333333C251.224 106.6666666666667 256 101.8906666666667 256 96S251.224 85.3333333333333 245.3333333333333 85.3333333333333z M192 21.3333333333333H64C58.1093333333333 21.3333333333333 53.3333333333333 26.1093333333334 53.3333333333333 32S58.1093333333333 42.6666666666667 64 42.6666666666667H192C197.8906666666667 42.6666666666667 202.6666666666667 37.8906666666666 202.6666666666667 32S197.8906666666667 21.3333333333333 192 21.3333333333333z" />
<glyph glyph-name="align-left-2"
unicode="&#xEA06;"
horiz-adv-x="256" d=" M245.3333333333333 213.3333333333334H10.6666666666667C4.776 213.3333333333334 0 218.1093333333333 0 224S4.776 234.6666666666667 10.6666666666667 234.6666666666667H245.3333333333333C251.224 234.6666666666667 256 229.8906666666667 256 224S251.224 213.3333333333334 245.3333333333333 213.3333333333334z M138.6666666666667 149.3333333333334H10.6666666666667C4.776 149.3333333333334 0 154.1093333333333 0 160S4.776 170.6666666666667 10.6666666666667 170.6666666666667H138.6666666666667C144.5573333333333 170.6666666666667 149.3333333333333 165.8906666666667 149.3333333333333 160S144.5573333333333 149.3333333333334 138.6666666666667 149.3333333333334z M245.3333333333333 85.3333333333333H10.6666666666667C4.776 85.3333333333333 0 90.1093333333334 0 96S4.776 106.6666666666667 10.6666666666667 106.6666666666667H245.3333333333333C251.224 106.6666666666667 256 101.8906666666667 256 96S251.224 85.3333333333333 245.3333333333333 85.3333333333333z M138.6666666666667 21.3333333333333H10.6666666666667C4.776 21.3333333333333 0 26.1093333333334 0 32S4.776 42.6666666666667 10.6666666666667 42.6666666666667H138.6666666666667C144.5573333333333 42.6666666666667 149.3333333333333 37.8906666666666 149.3333333333333 32S144.5573333333333 21.3333333333333 138.6666666666667 21.3333333333333z" />
<glyph glyph-name="ambulance"
unicode="&#xEA07;"
horiz-adv-x="256" d=" M249.6 126.9333333333333L234.6666666666667 134.4V170.6666666666667C234.6666666666667 177.0666666666667 230.4 181.3333333333334 224 181.3333333333334H170.6666666666667V213.3333333333334C170.6666666666667 219.7333333333334 166.4 224 160 224H10.6666666666667C4.2666666666667 224 0 219.7333333333334 0 213.3333333333334V74.6666666666667C0 68.2666666666667 4.2666666666667 64 10.6666666666667 64H22.4C26.6666666666667 45.8666666666667 43.7333333333333 32 64 32S100.2666666666667 45.8666666666667 105.6 64H150.4C152.5333333333333 45.8666666666667 168.5333333333333 32 186.6666666666666 32S220.8 45.8666666666667 222.9333333333333 64H245.3333333333333C251.7333333333333 64 256 68.2666666666667 256 74.6666666666667V117.3333333333334C256 121.6 253.8666666666667 124.8 249.6 126.9333333333333zM64 53.3333333333333C52.2666666666667 53.3333333333333 42.6666666666667 62.9333333333333 42.6666666666667 74.6666666666667C42.6666666666667 86.4 52.2666666666667 96 64 96S85.3333333333333 86.4 85.3333333333333 74.6666666666667C85.3333333333333 62.9333333333333 75.7333333333333 53.3333333333333 64 53.3333333333333zM117.3333333333333 149.3333333333334H96V128H74.6666666666667V149.3333333333334H53.3333333333333V170.6666666666667H74.6666666666667V192H96V170.6666666666667H117.3333333333333V149.3333333333334zM186.6666666666667 53.3333333333333C178.1333333333333 53.3333333333333 170.6666666666667 60.8 170.6666666666667 69.3333333333333S178.1333333333333 85.3333333333333 186.6666666666667 85.3333333333333S202.6666666666667 77.8666666666667 202.6666666666667 69.3333333333333S195.2 53.3333333333333 186.6666666666667 53.3333333333333zM213.3333333333333 144C213.3333333333333 140.8 211.2 138.6666666666667 208 138.6666666666667H186.6666666666666C183.4666666666667 138.6666666666667 181.3333333333333 140.8 181.3333333333333 144V154.6666666666667C181.3333333333333 157.8666666666667 183.4666666666667 160 186.6666666666667 160H208C211.2 160 213.3333333333333 157.8666666666667 213.3333333333333 154.6666666666667V144z" />
<glyph glyph-name="app"
unicode="&#xEA08;"
horiz-adv-x="256" d=" M128 161.0666666666667L222.9333333333333 203.7333333333333L132.2666666666667 244.2666666666667C129.0666666666667 245.3333333333333 125.8666666666667 245.3333333333333 123.7333333333334 244.2666666666667L33.0666666666667 203.7333333333334L128 161.0666666666667z M138.6666666666667 142.9333333333333V14.9333333333333L228.2666666666667 54.4C232.5333333333334 56.5333333333333 234.6666666666667 59.7333333333334 234.6666666666667 64V185.6L138.6666666666667 142.9333333333333z M117.3333333333333 142.9333333333333L21.3333333333333 185.6V64C21.3333333333333 59.7333333333333 23.4666666666667 55.4666666666667 27.7333333333333 54.4L117.3333333333333 14.9333333333333V142.9333333333333z" />
<glyph glyph-name="archive-2"
unicode="&#xEA09;"
horiz-adv-x="256" d=" M224 170.6666666666667H32C26.112 170.6666666666667 21.3333333333333 165.8986666666667 21.3333333333333 160V10.6666666666667C21.3333333333333 4.768 26.112 0 32 0H224C229.888 0 234.6666666666667 4.768 234.6666666666667 10.6666666666667V160C234.6666666666667 165.8986666666667 229.888 170.6666666666667 224 170.6666666666667zM181.3333333333333 96C181.3333333333333 90.1013333333333 176.5546666666667 85.3333333333333 170.6666666666667 85.3333333333333H85.3333333333333C79.4453333333333 85.3333333333333 74.6666666666667 90.1013333333333 74.6666666666667 96V128H96V106.6666666666667H160V128H181.3333333333334V96z M42.6666666666667 213.3333333333334H213.3333333333333V192H42.6666666666667V213.3333333333333z M74.6666666666667 256H181.3333333333333V234.6666666666667H74.6666666666667V256z" />
<glyph glyph-name="atom"
unicode="&#xEA0A;"
horiz-adv-x="256" d=" M235.7973333333334 197.0133333333333C229.6106666666667 206.6666666666667 214.784 216.5013333333333 179.264 208.5546666666667C176.5546666666667 207.9466666666667 173.7706666666667 207.2213333333334 170.9546666666667 206.432C162.1226666666667 235.6053333333334 147.7013333333333 256 128 256C109.8026666666667 256 94.7946666666667 238.3786666666667 85.0986666666667 206.336C57.1413333333333 214.208 31.2426666666667 214.272 20.2133333333333 197.0133333333333C14.0266666666667 187.3493333333333 11.2853333333333 169.76 33.3866666666667 140.8426666666667C36.64 136.5866666666667 40.352 132.2986666666667 44.3413333333333 128C40.352 123.7013333333334 36.64 119.4133333333333 33.3866666666667 115.1466666666667C11.2853333333333 86.2293333333333 14.0266666666667 68.64 20.2133333333333 58.976C26.3786666666667 49.344 37.7173333333333 44.4906666666667 53.312 44.4906666666667C62.4746666666667 44.4906666666667 73.1413333333333 46.208 85.0666666666667 49.568C93.472 21.6533333333334 107.3813333333333 0 128 0C147.7013333333334 0 162.1226666666667 20.3946666666667 170.9653333333333 49.5786666666667C173.7813333333333 48.7893333333333 176.5546666666667 48.064 179.2746666666667 47.456C199.4133333333333 42.944 224.7253333333333 41.6533333333333 235.7973333333333 58.9973333333333C246.3893333333333 75.5306666666667 237.5786666666667 99.7546666666667 211.4133333333333 127.712C233.8666666666667 151.6693333333333 247.9893333333333 177.9733333333333 235.7973333333334 197.0133333333333zM217.8346666666667 185.5146666666667C222.5386666666667 178.1653333333333 211.5093333333333 155.008 181.3333333333333 128.192C181.3226666666666 147.9466666666667 179.5413333333333 167.7653333333333 176.0426666666667 185.696C185.952 188.5226666666667 212.2986666666666 194.144 217.8346666666667 185.5146666666667zM74.8586666666667 128C97.76 148.288 127.392 166.9546666666667 155.6053333333333 178.528C161.2906666666667 147.6586666666667 161.632 110.2293333333333 155.6053333333333 77.472C127.4133333333333 89.0346666666667 97.7813333333333 107.7013333333333 74.8586666666667 128zM128 234.6666666666667C134.9973333333333 234.6666666666667 143.9573333333334 221.76 150.6133333333334 199.5413333333334C143.2213333333333 196.6186666666667 135.6373333333333 193.1626666666667 128 189.312C120.672 192.992 113.024 196.4373333333334 105.28 199.4773333333334C112.9173333333333 224.992 122.752 234.6666666666667 128 234.6666666666667zM38.176 185.5146666666667C42.7626666666667 192.704 68.3306666666667 192.5226666666667 105.12 176.5226666666667C88.3626666666667 166.272 73.504 155.392 59.584 142.9226666666667C51.6693333333333 151.52 32 175.8933333333334 38.176 185.5146666666667zM38.1653333333333 70.4853333333334C32.0106666666667 80.1066666666667 51.648 104.4586666666667 59.584 113.0773333333334C64.704 108.4906666666667 70.1653333333333 103.968 75.9146666666667 99.5413333333333C76.768 89.8666666666667 78.1013333333333 80 79.9893333333333 70.368C54.3893333333333 63.04 40.992 66.1013333333333 38.1653333333333 70.4853333333334zM128 21.3333333333333C119.2746666666667 21.3333333333333 105.696 43.1146666666667 99.392 82.9973333333333C116.5013333333333 72.0533333333333 134.0053333333334 63.0186666666667 150.6133333333333 56.4586666666667C143.9573333333334 34.24 134.9973333333333 21.3333333333333 128 21.3333333333333zM217.824 70.4853333333334C212.32 61.824 185.92 67.488 176.0426666666667 70.2933333333334C177.856 79.6053333333334 179.1573333333333 89.44 180.0426666666667 99.488C185.504 103.7013333333334 190.9226666666667 108.1706666666667 196.1493333333333 112.8533333333334C217.1093333333333 90.3253333333333 220.9386666666667 75.3386666666667 217.824 70.4853333333334z M117.3333333333333 128C117.3333333333333 122.1089626684716 122.1089626684715 117.3333333333334 128 117.3333333333334C133.8910373315285 117.3333333333334 138.6666666666667 122.1089626684716 138.6666666666667 128C138.6666666666667 133.8910373315285 133.8910373315285 138.6666666666667 128 138.6666666666667C122.1089626684715 138.6666666666667 117.3333333333333 133.8910373315285 117.3333333333333 128z" />
<glyph glyph-name="badge"
unicode="&#xEA0B;"
horiz-adv-x="256" d=" M149.3333333333333 181.3333333333334H106.6666666666667V234.6666666666667C106.6666666666667 246.4533333333333 116.2133333333333 256 128 256H128C139.7866666666667 256 149.3333333333333 246.4533333333333 149.3333333333333 234.6666666666667V181.3333333333334z M245.3333333333333 202.6666666666667H170.6666666666667V160H85.3333333333333V202.6666666666667H10.6666666666667C4.7786666666667 202.6666666666667 0 197.888 0 192V10.6666666666667C0 4.7786666666667 4.7786666666667 0 10.6666666666667 0H245.3333333333333C251.2213333333333 0 256 4.7786666666667 256 10.6666666666667V192C256 197.888 251.2213333333333 202.6666666666667 245.3333333333333 202.6666666666667zM85.3333333333333 128C97.12 128 106.6666666666667 118.4533333333333 106.6666666666667 106.6666666666667C106.6666666666667 94.88 97.12 85.3333333333333 85.3333333333333 85.3333333333333S64 94.88 64 106.6666666666667C64 118.4533333333334 73.5466666666667 128 85.3333333333333 128zM42.6666666666667 42.6666666666667C42.6666666666667 60.3413333333334 56.992 74.6666666666667 74.6666666666667 74.6666666666667H96C113.6746666666667 74.6666666666667 128 60.3413333333334 128 42.6666666666667H42.6666666666667zM213.3333333333333 53.3333333333333H149.3333333333333V74.6666666666667H213.3333333333333V53.3333333333333zM213.3333333333333 96H149.3333333333333V117.3333333333334H213.3333333333333V96z" />
<glyph glyph-name="bag-17"
unicode="&#xEA0C;"
horiz-adv-x="256" d=" M213.3333333333333 256H42.6666666666667C24.5333333333333 256 10.6666666666667 242.1333333333334 10.6666666666667 224V10.6666666666667C10.6666666666667 4.2666666666667 14.9333333333333 0 21.3333333333333 0H234.6666666666667C241.0666666666667 0 245.3333333333333 4.2666666666667 245.3333333333333 10.6666666666667V224C245.3333333333333 242.1333333333334 231.4666666666667 256 213.3333333333333 256zM128 85.3333333333333C92.8 85.3333333333333 64 114.1333333333334 64 149.3333333333334C64 155.7333333333334 68.2666666666667 160 74.6666666666667 160S85.3333333333333 155.7333333333334 85.3333333333333 149.3333333333334C85.3333333333333 125.8666666666667 104.5333333333334 106.6666666666667 128 106.6666666666667S170.6666666666667 125.8666666666667 170.6666666666667 149.3333333333334C170.6666666666667 155.7333333333334 174.9333333333333 160 181.3333333333333 160S192 155.7333333333334 192 149.3333333333334C192 114.1333333333333 163.2 85.3333333333333 128 85.3333333333333zM213.3333333333333 213.3333333333334H42.6666666666667C36.2666666666667 213.3333333333334 32 217.6 32 224S36.2666666666667 234.6666666666667 42.6666666666667 234.6666666666667H213.3333333333333C219.7333333333333 234.6666666666667 224 230.4 224 224S219.7333333333334 213.3333333333334 213.3333333333333 213.3333333333334z" />
<glyph glyph-name="basket"
unicode="&#xEA0D;"
horiz-adv-x="256" d=" M245.3333333333333 181.3333333333334H208.8533333333333L169.2586666666667 250.624C166.3466666666667 255.7333333333334 159.8293333333334 257.5253333333333 154.7093333333334 254.592C149.6 251.6693333333334 147.8186666666667 245.152 150.7413333333334 240.0426666666667L184.288 181.3333333333334H71.712L105.2586666666667 240.0426666666667C108.1813333333333 245.152 106.4 251.6693333333334 101.2906666666667 254.592C96.1813333333333 257.5253333333333 89.664 255.7333333333334 86.7413333333333 250.624L47.1466666666667 181.3333333333334H10.6666666666667C4.7786666666667 181.3333333333334 0 176.5653333333334 0 170.6666666666667V149.3333333333334C0 143.4346666666667 4.7786666666667 138.6666666666667 10.6666666666667 138.6666666666667H245.3333333333333C251.2213333333333 138.6666666666667 256 143.4346666666667 256 149.3333333333334V170.6666666666667C256 176.5653333333334 251.2213333333333 181.3333333333334 245.3333333333333 181.3333333333334z M234.6666666666667 117.3333333333334H21.3333333333333V10.6666666666667C21.3333333333333 4.7786666666667 26.112 0 32 0H224C229.888 0 234.6666666666667 4.7786666666667 234.6666666666667 10.6666666666667V117.3333333333334zM96 32H74.6666666666667L74.6666666666667 85.3333333333333H96L96 32zM138.6666666666667 32H117.3333333333333L117.3333333333333 85.3333333333333H138.6666666666667L138.6666666666667 32zM181.3333333333333 32H160L160 85.3333333333333H181.3333333333333L181.3333333333333 32z" />
<glyph glyph-name="bell-55"
unicode="&#xEA0E;"
horiz-adv-x="256" d=" M202.6666666666667 138.6666666666667C202.6666666666667 155.7333333333334 202.6666666666667 170.6666666666667 202.6666666666667 170.6666666666667C202.6666666666667 212.2666666666667 169.6 245.3333333333333 128 245.3333333333333S53.3333333333333 212.2666666666667 53.3333333333333 170.6666666666667C53.3333333333333 170.6666666666667 53.3333333333333 155.7333333333334 53.3333333333333 138.6666666666667C53.3333333333333 103.4666666666667 21.3333333333333 94.9333333333333 21.3333333333333 74.6666666666667C21.3333333333333 56.5333333333334 62.9333333333333 42.6666666666667 128 42.6666666666667S234.6666666666667 56.5333333333334 234.6666666666667 74.6666666666667C234.6666666666667 94.9333333333333 202.6666666666667 103.4666666666667 202.6666666666667 138.6666666666667z M128 21.3333333333333C114.1333333333333 21.3333333333333 102.4 22.4 90.6666666666667 23.4666666666667C98.1333333333333 9.6 112 0 128 0S158.9333333333333 9.6 165.3333333333333 23.4666666666667C153.6 22.4 141.8666666666667 21.3333333333333 128 21.3333333333333z" />
<glyph glyph-name="bold-down"
unicode="&#xEA0F;"
horiz-adv-x="256" d=" M21.3333333333333 160L64 202.6666666666667L128 138.6666666666667L192 202.6666666666667L234.6666666666667 160L128 53.3333333333333z" />
<glyph glyph-name="bold-left"
unicode="&#xEA10;"
horiz-adv-x="256" d=" M160 234.6666666666667L202.6666666666667 192L138.6666666666667 128L202.6666666666667 64L160 21.3333333333333L53.3333333333333 128z" />
<glyph glyph-name="bold-right"
unicode="&#xEA11;"
horiz-adv-x="256" d=" M96 234.6666666666667L53.3333333333333 192L117.3333333333333 128L53.3333333333333 64L96 21.3333333333333L202.6666666666667 128z" />
<glyph glyph-name="bold-up"
unicode="&#xEA12;"
horiz-adv-x="256" d=" M234.6666666666667 96L192 53.3333333333333L128 117.3333333333334L64 53.3333333333333L21.3333333333333 96L128 202.6666666666667z" />
<glyph glyph-name="bold"
unicode="&#xEA13;"
horiz-adv-x="256" d=" M32 10.6666666666667V35.9504L45.86976 40.3169066666667C50.312 41.71552 53.3333333333333 45.83424 53.3333333333333 50.4913066666667V205.2781866666667C53.3333333333333 210.0450133333334 50.17056 214.23328 45.5856 215.5377066666667L32 219.4029866666667V245.3333333333334H139.8369066666667C195.2605866666667 245.3333333333334 210.81888 220.0496 210.81888 187.9698133333333C210.81888 157.1700266666667 191.0510933333333 139.9886933333334 171.2833066666667 133.50944V132.5461333333333C208.2324266666667 128.3233066666667 224 107.0763733333334 224 74.6666666666667C224 26.6987733333334 187.8048 10.6666666666667 136.9205333333334 10.6666666666667H32zM119.0925866666667 146.7978666666667C142.42336 146.7978666666667 163.16768 152.3138133333333 163.16768 179.8673066666667C163.16768 206.4442666666667 146.3162666666667 210.0072533333333 123.9488 210.0072533333333H106.6666666666667V146.7978666666667H119.0925866666667zM128.4882133333333 45.6759466666667C155.7117866666666 45.6759466666667 173.5397333333333 52.1552 173.5397333333333 80.3553066666667C173.5397333333333 107.2621866666667 155.3950933333333 114.38816 133.3575466666666 114.38816H106.6666666666667V45.6759466666667H128.4882133333333z" />
<glyph glyph-name="book-bookmark"
unicode="&#xEA14;"
horiz-adv-x="256" d=" M42.6666666666667 32C42.6666666666667 37.888 47.4453333333333 42.6666666666667 53.3333333333333 42.6666666666667H213.3333333333333C225.12 42.6666666666667 234.6666666666667 52.2133333333333 234.6666666666667 64V224C234.6666666666667 241.6746666666667 220.3413333333333 256 202.6666666666667 256H128V170.6666666666667L96 192L64 170.6666666666667V256H53.3333333333333C35.6586666666667 256 21.3333333333333 241.6746666666667 21.3333333333333 224V32C21.3333333333333 14.3253333333333 35.6586666666667 0 53.3333333333333 0H224C229.888 0 234.6666666666667 4.7786666666667 234.6666666666667 10.6666666666667C234.6666666666667 16.5546666666667 229.888 21.3333333333333 224 21.3333333333333H53.3333333333333C47.4453333333333 21.3333333333333 42.6666666666667 26.112 42.6666666666667 32z" />
<glyph glyph-name="books"
unicode="&#xEA15;"
horiz-adv-x="256" d=" M53.3333333333333 234.6666666666667H10.6666666666667C4.7786666666667 234.6666666666667 0 229.8986666666667 0 224V32C0 26.1013333333333 4.7786666666667 21.3333333333333 10.6666666666667 21.3333333333333H53.3333333333333C59.2213333333333 21.3333333333333 64 26.1013333333333 64 32V224C64 229.8986666666667 59.2213333333333 234.6666666666667 53.3333333333333 234.6666666666667z M138.6666666666667 234.6666666666667H96C90.112 234.6666666666667 85.3333333333333 229.8986666666667 85.3333333333333 224V32C85.3333333333333 26.1013333333333 90.112 21.3333333333333 96 21.3333333333333H138.6666666666667C144.5546666666667 21.3333333333333 149.3333333333333 26.1013333333333 149.3333333333333 32V224C149.3333333333333 229.8986666666667 144.5546666666667 234.6666666666667 138.6666666666667 234.6666666666667z M255.7013333333334 44.5546666666667L210.5173333333334 231.1573333333334C209.1306666666667 236.8853333333334 203.3173333333334 240.4373333333334 197.6426666666667 239.008L156.1706666666667 228.9813333333334C153.4186666666667 228.32 151.0506666666667 226.5813333333334 149.5786666666667 224.1706666666667C148.1066666666667 221.76 147.648 218.8586666666667 148.3093333333334 216.1066666666667L193.4826666666667 29.4933333333333C194.1440000000001 26.7413333333333 195.8826666666667 24.3733333333333 198.2933333333334 22.9013333333333C200 21.8666666666667 201.92 21.3333333333333 203.8613333333333 21.3333333333333C204.704 21.3333333333333 205.5466666666667 21.44 206.368 21.632L247.84 31.6693333333333C253.568 33.0666666666667 257.088 38.8266666666667 255.7013333333334 44.5546666666667z" />
<glyph glyph-name="box-2"
unicode="&#xEA16;"
horiz-adv-x="256" d=" M167.4666666666667 202.6666666666667H249.6L188.8 253.8666666666667C186.6666666666667 254.9333333333334 183.4666666666667 256 181.3333333333333 256H147.2L167.4666666666667 202.6666666666667z M170.6666666666667 181.3333333333334V106.6666666666667H85.3333333333333V181.3333333333334H0V10.6666666666667C0 4.2666666666667 4.2666666666667 0 10.6666666666667 0H245.3333333333333C251.7333333333333 0 256 4.2666666666667 256 10.6666666666667V181.3333333333334H170.6666666666667z M88.5333333333333 202.6666666666667L108.8 256H74.6666666666667C72.5333333333333 256 69.3333333333333 254.9333333333334 68.2666666666667 253.8666666666667L6.4 202.6666666666667H88.5333333333333z" />
<glyph glyph-name="briefcase-24"
unicode="&#xEA17;"
horiz-adv-x="256" d=" M160 64V42.6666666666667H96V64H10.6666666666667V10.6666666666667C10.6666666666667 4.7786666666667 15.4453333333333 0 21.3333333333333 0H234.6666666666667C240.5546666666667 0 245.3333333333333 4.7786666666667 245.3333333333333 10.6666666666667V64H160z M245.3333333333333 213.3333333333334H181.3333333333333V245.3333333333334C181.3333333333333 251.2213333333334 176.5546666666667 256 170.6666666666667 256H85.3333333333333C79.4453333333333 256 74.6666666666667 251.2213333333334 74.6666666666667 245.3333333333334V213.3333333333334H10.6666666666667C4.7786666666667 213.3333333333334 0 208.5546666666667 0 202.6666666666667V96C0 90.112 4.7786666666667 85.3333333333333 10.6666666666667 85.3333333333333H96V117.3333333333334H160V85.3333333333333H245.3333333333333C251.2213333333333 85.3333333333333 256 90.112 256 96V202.6666666666667C256 208.5546666666667 251.2213333333333 213.3333333333334 245.3333333333333 213.3333333333334zM160 213.3333333333334H96V234.6666666666667H160V213.3333333333334z" />
<glyph glyph-name="building"
unicode="&#xEA18;"
horiz-adv-x="256" d=" M74.6666666666667 149.3333333333334H53.3333333333333V245.3333333333334C53.3333333333333 251.232 58.1013333333333 256 64 256H192C197.8986666666667 256 202.6666666666667 251.232 202.6666666666667 245.3333333333334V181.3333333333333H181.3333333333333V234.6666666666667H74.6666666666667V149.3333333333334z M245.3333333333333 170.6666666666667H149.3333333333333C143.4346666666667 170.6666666666667 138.6666666666667 165.8986666666667 138.6666666666667 160V21.3333333333333H117.3333333333333V117.3333333333334C117.3333333333333 123.232 112.5653333333333 128 106.6666666666667 128H10.6666666666667C4.768 128 0 123.232 0 117.3333333333334V10.6666666666667C0 4.768 4.768 0 10.6666666666667 0H245.3333333333333C251.232 0 256 4.768 256 10.6666666666667V160C256 165.8986666666667 251.232 170.6666666666667 245.3333333333333 170.6666666666667zM74.6666666666667 32H42.6666666666667V53.3333333333333H74.6666666666667V32zM74.6666666666667 74.6666666666667H42.6666666666667V96H74.6666666666667V74.6666666666667zM213.3333333333333 32H181.3333333333333V53.3333333333333H213.3333333333333V32zM213.3333333333333 74.6666666666667H181.3333333333333V96H213.3333333333333V74.6666666666667zM213.3333333333333 117.3333333333334H181.3333333333333V138.6666666666667H213.3333333333333V117.3333333333334z" />
<glyph glyph-name="bulb-61"
unicode="&#xEA19;"
horiz-adv-x="256" d=" M85.3333333333333 74.0266666666667V42.6666666666667H170.6666666666667V74.0266666666667C203.296 90.1760000000001 224 123.168 224 160C224 212.9386666666667 180.928 256 128 256S32 212.9386666666667 32 160C32 123.1786666666667 52.704 90.176 85.3333333333333 74.0266666666667zM74.6666666666667 160C74.6666666666667 189.408 98.592 213.3333333333333 128 213.3333333333333H138.6666666666667V192H128C110.3573333333333 192 96 177.6426666666667 96 160V149.3333333333333H74.6666666666667V160z M85.3333333333333 21.3333333333333V10.6666666666667C85.3333333333333 4.768 90.112 0 96 0H160C165.888 0 170.6666666666667 4.768 170.6666666666667 10.6666666666667V21.3333333333333H85.3333333333333z" />
<glyph glyph-name="bullet-list-67"
unicode="&#xEA1A;"
horiz-adv-x="256" d=" M10.6666666666667 213.3333333333334C10.6666666666667 195.6602213387479 24.9935546720813 181.3333333333334 42.6666666666667 181.3333333333334C60.3397786612521 181.3333333333334 74.6666666666667 195.6602213387479 74.6666666666667 213.3333333333334C74.6666666666667 231.0064453279188 60.3397786612521 245.3333333333334 42.6666666666667 245.3333333333334C24.9935546720813 245.3333333333334 10.6666666666667 231.0064453279188 10.6666666666667 213.3333333333334z M10.6666666666667 128C10.6666666666667 110.3268880054146 24.9935546720813 96 42.6666666666667 96C60.3397786612521 96 74.6666666666667 110.3268880054146 74.6666666666667 128C74.6666666666667 145.6731119945854 60.3397786612521 160 42.6666666666667 160C24.9935546720813 160 10.6666666666667 145.6731119945854 10.6666666666667 128z M10.6666666666667 42.6666666666667C10.6666666666667 24.9935546720813 24.9935546720813 10.6666666666667 42.6666666666667 10.6666666666667C60.3397786612521 10.6666666666667 74.6666666666667 24.9935546720813 74.6666666666667 42.6666666666667C74.6666666666667 60.3397786612521 60.3397786612521 74.6666666666667 42.6666666666667 74.6666666666667C24.9935546720813 74.6666666666667 10.6666666666667 60.3397786612521 10.6666666666667 42.6666666666667z M96 224H245.3333333333333V202.6666666666667H96V224z M96 138.6666666666667H245.3333333333333V117.3333333333334H96V138.6666666666667z M96 53.3333333333333H245.3333333333333V32H96V53.3333333333333z" />
<glyph glyph-name="bus-front-12"
unicode="&#xEA1B;"
horiz-adv-x="256" d=" M42.6666666666667 21.3333333333333V10.6666666666667C42.6666666666667 4.7786666666667 47.4346666666667 0 53.3333333333333 0H85.3333333333333C91.232 0 96 4.7786666666667 96 10.6666666666667V21.3333333333333H42.6666666666667z M160 21.3333333333333V10.6666666666667C160 4.7786666666667 164.768 0 170.6666666666667 0H202.6666666666667C208.5653333333333 0 213.3333333333333 4.7786666666667 213.3333333333333 10.6666666666667V21.3333333333333H160z M0 170.6666666666667H21.3333333333333V117.3333333333334H0V170.6666666666667z M234.6666666666667 170.6666666666667H256V117.3333333333334H234.6666666666667V170.6666666666667z M192 256H64C46.3573333333333 256 32 241.6426666666667 32 224V42.6666666666667C32 36.7786666666667 36.7786666666667 32 42.6666666666667 32H213.3333333333333C219.2213333333333 32 224 36.7786666666667 224 42.6666666666667V224C224 241.6426666666667 209.6426666666667 256 192 256zM74.6666666666667 64C68.7786666666667 64 64 68.7786666666667 64 74.6666666666667C64 80.5546666666667 68.7786666666667 85.3333333333333 74.6666666666667 85.3333333333333S85.3333333333333 80.5546666666667 85.3333333333333 74.6666666666667C85.3333333333333 68.7786666666667 80.5546666666667 64 74.6666666666667 64zM181.3333333333333 64C175.4453333333333 64 170.6666666666667 68.7786666666667 170.6666666666667 74.6666666666667C170.6666666666667 80.5546666666667 175.4453333333334 85.3333333333333 181.3333333333333 85.3333333333333S192 80.5546666666667 192 74.6666666666667C192 68.7786666666667 187.2213333333333 64 181.3333333333333 64zM202.6666666666667 117.3333333333334H53.3333333333333V213.3333333333334H202.6666666666666V117.3333333333334z" />
<glyph glyph-name="button-pause"
unicode="&#xEA1C;"
horiz-adv-x="256" d=" M96 245.3333333333334H32C26.1013333333333 245.3333333333334 21.3333333333333 240.5653333333334 21.3333333333333 234.6666666666667V21.3333333333333C21.3333333333333 15.4346666666667 26.1013333333333 10.6666666666667 32 10.6666666666667H96C101.8986666666667 10.6666666666667 106.6666666666667 15.4346666666667 106.6666666666667 21.3333333333333V234.6666666666667C106.6666666666667 240.5653333333334 101.8986666666667 245.3333333333334 96 245.3333333333334z M224 245.3333333333334H160C154.1013333333334 245.3333333333334 149.3333333333334 240.5653333333334 149.3333333333334 234.6666666666667V21.3333333333333C149.3333333333334 15.4346666666667 154.1013333333334 10.6666666666667 160 10.6666666666667H224C229.8986666666667 10.6666666666667 234.6666666666667 15.4346666666667 234.6666666666667 21.3333333333333V234.6666666666667C234.6666666666667 240.5653333333334 229.8986666666667 245.3333333333334 224 245.3333333333334z" />
<glyph glyph-name="button-play"
unicode="&#xEA1D;"
horiz-adv-x="256" d=" M219.2533333333333 136.8746666666667L59.2533333333333 243.5413333333334C55.9786666666667 245.7173333333334 51.7653333333333 245.9306666666667 48.3093333333333 244.0746666666667C44.832 242.2186666666667 42.6666666666667 238.6026666666667 42.6666666666667 234.6666666666667V21.3333333333333C42.6666666666667 17.3973333333333 44.832 13.7813333333334 48.2986666666667 11.9253333333334C49.8773333333333 11.0826666666667 51.6053333333333 10.6666666666667 53.3333333333333 10.6666666666667C55.4026666666667 10.6666666666667 57.472 11.2746666666667 59.2533333333333 12.4586666666667L219.2533333333333 119.1253333333334C222.2186666666667 121.1093333333333 224 124.4373333333334 224 128S222.2186666666667 134.8906666666667 219.2533333333333 136.8746666666667z" />
<glyph glyph-name="button-power"
unicode="&#xEA1E;"
horiz-adv-x="256" d=" M186.6346666666667 218.9866666666667C181.536 221.9306666666667 175.008 220.192 172.064 215.0826666666667C169.12 209.984 170.8693333333333 203.456 175.968 200.512C205.5893333333334 183.3813333333334 224 151.5093333333334 224 117.3333333333334C224 64.3946666666667 180.9386666666667 21.3333333333333 128 21.3333333333333S32 64.3946666666667 32 117.3333333333334C32 151.4986666666667 50.4 183.36 80.0106666666667 200.5013333333333C85.1093333333333 203.4453333333334 86.8586666666667 209.9733333333333 83.8933333333333 215.072C80.96 220.1813333333333 74.432 221.9413333333333 69.3226666666667 218.9546666666667C33.1413333333333 198.0266666666667 10.6666666666667 159.0826666666667 10.6666666666667 117.3333333333334C10.6666666666667 52.64 63.3066666666667 0 128 0S245.3333333333333 52.64 245.3333333333333 117.3333333333333C245.3333333333333 159.104 222.848 198.0586666666667 186.6346666666667 218.9866666666667z M128 160C133.8986666666667 160 138.6666666666667 164.768 138.6666666666667 170.6666666666667V245.3333333333334C138.6666666666667 251.232 133.8986666666667 256 128 256S117.3333333333333 251.232 117.3333333333333 245.3333333333334V170.6666666666667C117.3333333333333 164.768 122.1013333333333 160 128 160z" />
<glyph glyph-name="calendar-grid-58"
unicode="&#xEA1F;"
horiz-adv-x="256" d=" M245.3333333333333 234.6666666666667H202.6666666666667V256H181.3333333333333V234.6666666666667H138.6666666666667V256H117.3333333333333V234.6666666666667H74.6666666666667V256H53.3333333333333V234.6666666666667H10.6666666666667C4.7786666666667 234.6666666666667 0 229.888 0 224V10.6666666666667C0 4.7786666666667 4.7786666666667 0 10.6666666666667 0H245.3333333333333C251.2213333333333 0 256 4.7786666666667 256 10.6666666666667V224C256 229.888 251.2213333333333 234.6666666666667 245.3333333333333 234.6666666666667zM234.6666666666667 21.3333333333333H21.3333333333333V170.6666666666667H234.6666666666667V21.3333333333333z M42.6666666666667 138.6666666666667H85.3333333333333V106.6666666666667H42.6666666666667V138.6666666666667z M106.6666666666667 138.6666666666667H149.3333333333333V106.6666666666667H106.6666666666667V138.6666666666667z M42.6666666666667 85.3333333333333H85.3333333333333V53.3333333333333H42.6666666666667V85.3333333333333z M106.6666666666667 85.3333333333333H149.3333333333333V53.3333333333333H106.6666666666667V85.3333333333333z M170.6666666666667 138.6666666666667H213.3333333333333V106.6666666666667H170.6666666666667V138.6666666666667z" />
<glyph glyph-name="camera-compact"
unicode="&#xEA20;"
horiz-adv-x="256" d=" M32 245.3333333333334H96V224H32V245.3333333333334z M245.3333333333333 213.3333333333334H10.6666666666667C4.768 213.3333333333334 0 208.5546666666667 0 202.6666666666667V21.3333333333334C0 15.4453333333334 4.768 10.6666666666667 10.6666666666667 10.6666666666667H245.3333333333333C251.232 10.6666666666667 256 15.4453333333334 256 21.3333333333334V202.6666666666667C256 208.5546666666667 251.232 213.3333333333334 245.3333333333333 213.3333333333334zM64 138.6666666666667C58.112 138.6666666666667 53.3333333333333 143.4453333333334 53.3333333333333 149.3333333333334C53.3333333333333 155.2213333333334 58.112 160 64 160S74.6666666666667 155.2213333333334 74.6666666666667 149.3333333333334C74.6666666666667 143.4453333333334 69.888 138.6666666666667 64 138.6666666666667zM160 53.3333333333333C130.5493333333333 53.3333333333333 106.6666666666667 77.216 106.6666666666667 106.6666666666667S130.5493333333333 160 160 160S213.3333333333333 136.1173333333334 213.3333333333333 106.6666666666667S189.4506666666667 53.3333333333333 160 53.3333333333333z" />
<glyph glyph-name="caps-small"
unicode="&#xEA21;"
horiz-adv-x="256" d=" M42.6666666666667 21.3333333333333V38.44448L70.7122133333333 40.0974933333333C74.0183466666667 40.3381333333334 74.6666666666667 41.2797866666667 74.6666666666667 44.816V213.3333333333334H23.34144C20.7467733333333 213.3333333333334 20.0353066666667 213.09792 19.5645866666667 210.7386666666667L15.79808 192H0V234.6666666666667H170.6666666666667V192H154.8685866666667L151.1021866666667 210.7386666666667C150.63136 213.09792 149.9198933333333 213.3333333333334 147.3252266666667 213.3333333333334H96V44.816C96 41.5098666666667 96.40768 40.56832 99.944 40.3381333333333L128 38.44448V21.3333333333333H42.6666666666667z M160 21.3333333333333V38.44448L177.37888 40.0974933333333C180.6850133333333 40.3381333333334 181.3333333333333 41.2797866666667 181.3333333333333 44.816V138.6666666666667H151.34144C148.7467733333333 138.6666666666667 148.0353066666667 138.4312533333334 147.5645866666667 136.072L143.79808 117.3333333333334H128V160H256V117.3333333333334H240.20192L236.43552 136.072C235.9646933333334 138.4312533333334 235.2532266666667 138.6666666666667 232.65856 138.6666666666667H202.6666666666667V44.816C202.6666666666667 41.5098666666667 203.0743466666667 40.56832 206.6106666666667 40.3381333333333L224 38.44448V21.3333333333333H160z" />
<glyph glyph-name="cart"
unicode="&#xEA22;"
horiz-adv-x="256" d=" M245.3333333333333 85.3333333333333H32L48 106.6666666666667H202.6666666666667C207.264 106.6666666666667 211.328 109.6 212.7786666666667 113.9626666666667L244.7786666666667 209.9626666666667C245.8773333333334 213.216 245.3226666666667 216.7893333333333 243.3173333333333 219.5733333333334C241.312 222.3573333333334 238.0906666666667 224 234.6666666666667 224H47.0826666666667L18.208 252.8746666666667C14.0373333333333 257.0453333333334 7.296 257.0453333333334 3.1253333333333 252.8746666666667S-1.0453333333333 241.9626666666667 3.1253333333333 237.792L32 208.9173333333334V120.896L2.1333333333333 81.0666666666667C-0.2986666666667 77.8346666666667 -0.6826666666667 73.5146666666667 1.12 69.8986666666667C2.9333333333333 66.2826666666667 6.624 64 10.6666666666667 64H245.3333333333333C251.232 64 256 68.7786666666667 256 74.6666666666667S251.232 85.3333333333333 245.3333333333333 85.3333333333333z M21.3333333333333 21.3333333333333C21.3333333333333 9.5512586702764 30.8845920036097 0 42.6666666666667 0C54.4487413297236 0 64 9.5512586702764 64 21.3333333333333C64 33.1154079963903 54.4487413297236 42.6666666666667 42.6666666666667 42.6666666666667C30.8845920036097 42.6666666666667 21.3333333333333 33.1154079963903 21.3333333333333 21.3333333333333z M192 21.3333333333333C192 9.5512586702764 201.5512586702764 0 213.3333333333333 0C225.1154079963903 0 234.6666666666667 9.5512586702764 234.6666666666667 21.3333333333333C234.6666666666667 33.1154079963903 225.1154079963903 42.6666666666667 213.3333333333333 42.6666666666667C201.5512586702764 42.6666666666667 192 33.1154079963903 192 21.3333333333333z" />
<glyph glyph-name="chart-bar-32"
unicode="&#xEA23;"
horiz-adv-x="256" d=" M149.3333333333333 234.6666666666667H106.6666666666667C100.7786666666667 234.6666666666667 96 229.888 96 224V32C96 26.112 100.7786666666667 21.3333333333333 106.6666666666667 21.3333333333333H149.3333333333334C155.2213333333334 21.3333333333333 160 26.112 160 32V224C160 229.888 155.2213333333333 234.6666666666667 149.3333333333333 234.6666666666667z M53.3333333333333 117.3333333333334H10.6666666666667C4.7786666666667 117.3333333333334 0 112.5546666666667 0 106.6666666666667V32C0 26.112 4.7786666666667 21.3333333333334 10.6666666666667 21.3333333333334H53.3333333333333C59.2213333333333 21.3333333333334 64 26.112 64 32V106.6666666666667C64 112.5546666666667 59.2213333333333 117.3333333333334 53.3333333333333 117.3333333333334z M245.3333333333333 170.6666666666667H202.6666666666667C196.7786666666667 170.6666666666667 192 165.888 192 160V32C192 26.112 196.7786666666667 21.3333333333333 202.6666666666667 21.3333333333333H245.3333333333333C251.2213333333333 21.3333333333333 256 26.112 256 32V160C256 165.888 251.2213333333333 170.6666666666667 245.3333333333333 170.6666666666667z" />
<glyph glyph-name="chart-pie-35"
unicode="&#xEA24;"
horiz-adv-x="256" d=" M138.6666666666667 138.6666666666667H255.456C250.304 200.736 200.736 250.304 138.6666666666667 255.456V138.6666666666667z M132.416 117.3333333333334L45.4293333333333 30.3466666666667C67.744 11.456 96.544 0 128 0C194.976 0 250.0053333333334 51.744 255.456 117.3333333333333H132.416z M117.3333333333333 132.416V255.456C51.744 250.0053333333334 0 194.976 0 128C0 96.544 11.456 67.744 30.3466666666667 45.4293333333333L117.3333333333333 132.416z" />
<glyph glyph-name="chat-round"
unicode="&#xEA25;"
horiz-adv-x="256" d=" M128 245.3333333333334C57.6 245.3333333333334 0 197.3333333333334 0 138.6666666666667S57.6 32 128 32C138.6666666666667 32 149.3333333333334 33.0666666666667 160 35.2L219.7333333333333 11.7333333333333C220.8 11.7333333333333 221.8666666666667 10.6666666666667 224 10.6666666666667C226.1333333333334 10.6666666666667 228.2666666666667 11.7333333333333 230.4 12.8C233.6 14.9333333333333 234.6666666666667 19.2 234.6666666666667 22.4L229.3333333333334 72.5333333333333C246.4 91.7333333333333 256 114.1333333333333 256 137.6C256 197.3333333333334 198.4 245.3333333333334 128 245.3333333333334z" />
<glyph glyph-name="check-bold"
unicode="&#xEA26;"
horiz-adv-x="256" d=" M21.3333333333333 138.6666666666667L42.6666666666667 160L96 128L213.3333333333333 213.3333333333334L234.6666666666667 192L96 53.3333333333333z" />
<glyph glyph-name="circle-08"
unicode="&#xEA27;"
horiz-adv-x="256" d=" M128 256C57.4186666666667 256 0 198.5813333333333 0 128S57.4186666666667 0 128 0S256 57.4186666666667 256 128S198.5813333333333 256 128 256zM85.3333333333333 149.3333333333334C85.3333333333333 172.896 105.0026666666667 192 128 192S170.6666666666667 172.896 170.6666666666667 149.3333333333334V138.6666666666667C170.6666666666667 115.104 150.9973333333333 96 128 96S85.3333333333333 115.104 85.3333333333333 138.6666666666667V149.3333333333334zM128 21.3333333333333C102.048 21.3333333333333 78.24 30.6773333333333 59.7226666666667 46.144C68.672 63.0293333333333 86.2186666666667 74.6666666666667 106.6666666666667 74.6666666666667H149.3333333333333C169.7813333333333 74.6666666666667 187.328 63.0293333333333 196.2773333333333 46.144C177.76 30.6773333333334 153.952 21.3333333333333 128 21.3333333333333z" />
<glyph glyph-name="cloud-download-95"
unicode="&#xEA28;"
horiz-adv-x="256" d=" M211.968 148.5226666666667C204.6826666666667 191.52 167.104 224 122.6666666666667 224C76.7573333333333 224 38.6453333333333 189.9093333333333 32.864 145.1093333333333C13.184 136.9493333333334 0 117.728 0 96C0 66.592 23.9253333333333 42.6666666666667 53.3333333333333 42.6666666666667H202.6666666666666C232.0746666666667 42.6666666666667 256 66.592 256 96C256 122.24 236.96 144.1066666666667 211.968 148.5226666666667zM128 74.6666666666667L74.6666666666667 128H117.3333333333334V170.6666666666667H138.6666666666667V128H181.3333333333334L128 74.6666666666667z" />
<glyph glyph-name="cloud-upload-96"
unicode="&#xEA29;"
horiz-adv-x="256" d=" M211.968 148.5226666666667C204.6826666666667 191.52 167.104 224 122.6666666666667 224C76.7573333333333 224 38.656 189.9093333333333 32.864 145.1093333333333C13.1733333333333 136.9493333333334 0 117.728 0 96C0 66.592 23.9253333333333 42.6666666666667 53.3333333333333 42.6666666666667H202.6666666666666C232.0746666666667 42.6666666666667 256 66.592 256 96C256 122.24 236.96 144.1173333333333 211.968 148.5226666666667zM138.6666666666667 117.3333333333334V74.6666666666667H117.3333333333333V117.3333333333334H74.6666666666667L128 170.6666666666667L181.3333333333333 117.3333333333334H138.6666666666667z" />
<glyph glyph-name="compass-04"
unicode="&#xEA2A;"
horiz-adv-x="256" d=" M128 256C57.4186666666667 256 0 198.5813333333333 0 128S57.4186666666667 0 128 0S256 57.4186666666667 256 128S198.5813333333333 256 128 256zM138.6666666666667 21.8773333333333V42.6666666666667H117.3333333333333V21.8773333333334C67.0186666666667 26.8906666666667 26.8906666666667 67.0186666666667 21.8773333333333 117.3333333333334H42.6666666666667V138.6666666666667H21.8773333333333C26.8906666666667 188.9813333333334 67.0186666666667 229.1093333333333 117.3333333333333 234.1226666666667V213.3333333333334H138.6666666666667V234.1226666666667C188.9813333333333 229.0986666666667 229.1093333333333 188.9813333333334 234.1226666666667 138.6666666666667H213.3333333333333V117.3333333333334H234.1226666666667C229.1093333333333 67.0186666666667 188.9813333333333 26.8906666666667 138.6666666666667 21.8773333333333z M98.5386666666667 157.4613333333334L54.3573333333333 54.3573333333333L157.4613333333333 98.5386666666667L201.6426666666667 201.6426666666667L98.5386666666667 157.4613333333334zM94.976 94.976L114.7946666666667 141.2053333333333L141.216 114.784L94.976 94.976z" />
<glyph glyph-name="controller"
unicode="&#xEA2B;"
horiz-adv-x="256" d=" M138.6666666666667 234.6666666666667C138.6666666666667 240.5546666666667 133.888 245.3333333333334 128 245.3333333333334S117.3333333333333 240.5546666666667 117.3333333333333 234.6666666666667V181.3333333333334H138.6666666666667V234.6666666666667z M192 160H64C28.704 160 0 131.296 0 96S28.704 32 64 32C86.9866666666667 32 108.0213333333333 44.352 119.3706666666667 64H136.6186666666667C147.968 44.352 169.0026666666667 32 191.9893333333333 32C227.2853333333333 32 255.9893333333333 60.704 255.9893333333333 96S227.296 160 192 160zM96 85.3333333333333H74.6666666666667V64H53.3333333333333V85.3333333333333H32V106.6666666666667H53.3333333333333V128H74.6666666666667V106.6666666666667H96V85.3333333333333zM181.3333333333333 64C175.4453333333333 64 170.6666666666667 68.7786666666667 170.6666666666667 74.6666666666667C170.6666666666667 80.5546666666667 175.4453333333334 85.3333333333333 181.3333333333333 85.3333333333333S192 80.5546666666667 192 74.6666666666667C192 68.7786666666667 187.2213333333333 64 181.3333333333333 64zM213.3333333333333 96C207.4453333333333 96 202.6666666666667 100.7786666666667 202.6666666666667 106.6666666666667C202.6666666666667 112.5546666666667 207.4453333333334 117.3333333333333 213.3333333333333 117.3333333333333S224 112.5546666666667 224 106.6666666666667C224 100.7786666666667 219.2213333333333 96 213.3333333333333 96z" />
<glyph glyph-name="credit-card"
unicode="&#xEA2C;"
horiz-adv-x="256" d=" M256 170.6773333333333V213.3333333333334C256 225.12 246.4533333333333 234.6666666666667 234.6666666666667 234.6666666666667H21.3333333333333C9.5466666666667 234.6666666666667 0 225.12 0 213.3333333333334V170.6773333333333H256z M0 138.6666666666667V42.6666666666667C0 30.88 9.5466666666667 21.3333333333333 21.3333333333333 21.3333333333333H234.6666666666667C246.4533333333333 21.3333333333333 256 30.88 256 42.6666666666667V138.6666666666667H0zM117.3333333333333 74.6666666666667H42.6666666666667V96H117.3333333333333V74.6666666666667zM213.3333333333333 74.6666666666667H170.6666666666667V96H213.3333333333333V74.6666666666667z" />
<glyph glyph-name="curved-next"
unicode="&#xEA2D;"
horiz-adv-x="256" d=" M138.6666666666667 96V27.7333333333334L249.6 138.6666666666667L138.6666666666667 249.6V181.3333333333334C89.6 179.2 0 158.9333333333333 0 42.6666666666667V3.2L20.2666666666667 37.3333333333333C45.8666666666667 81.0666666666667 71.4666666666667 94.9333333333333 138.6666666666667 96z" />
<glyph glyph-name="delivery-fast"
unicode="&#xEA2E;"
horiz-adv-x="256" d=" M0 245.3333333333334H96V224H0V245.3333333333334z M21.3333333333333 202.6666666666667H96V181.3333333333334H21.3333333333333V202.6666666666667z M42.6666666666667 160H96V138.6666666666667H42.6666666666667V160z M64 117.3333333333334H96V96H64V117.3333333333334z M250.1013333333333 137.5466666666667L211.8186666666667 156.6826666666667L202.3466666666666 194.5813333333333C201.1626666666667 199.3386666666667 196.896 202.6666666666667 192 202.6666666666667H174.6666666666667H117.3333333333333C117.3333333333333 202.6666666666667 117.3333333333333 69.856 117.3333333333333 64S117.8773333333333 53.3333333333333 117.8773333333333 53.3333333333333C120.5653333333333 29.3973333333333 140.6933333333333 10.6666666666667 165.3333333333333 10.6666666666667S210.1013333333333 29.3973333333333 212.7893333333333 53.3333333333333H245.3333333333333C251.2213333333333 53.3333333333333 256 58.112 256 64V128C256 132.0426666666667 253.7173333333334 135.7333333333334 250.1013333333333 137.5466666666667zM165.3333333333333 32C150.6346666666667 32 138.6666666666667 43.9573333333333 138.6666666666667 58.6666666666667S150.6346666666667 85.3333333333333 165.3333333333333 85.3333333333333S192 73.376 192 58.6666666666667S180.032 32 165.3333333333333 32zM138.6666666666667 149.3333333333334V181.3333333333334H185.0026666666667L192 149.3333333333334H138.6666666666667z" />
<glyph glyph-name="diamond"
unicode="&#xEA2F;"
horiz-adv-x="256" d=" M200.192 241.4933333333334C198.1653333333333 243.9253333333334 195.168 245.3333333333334 192 245.3333333333334H64C60.832 245.3333333333334 57.8346666666667 243.9253333333334 55.808 241.4933333333334L2.4746666666667 177.4933333333334C-0.6613333333333 173.728 -0.832 168.3093333333334 2.0586666666667 164.3626666666667L119.392 4.3626666666667C121.408 1.6213333333334 124.608 0 128 0S134.592 1.6213333333333 136.608 4.3626666666667L253.9413333333333 164.3626666666667C256.832 168.32 256.672 173.728 253.5253333333333 177.4933333333334L200.192 241.4933333333334zM202.6666666666667 160H53.3333333333333V181.3333333333334H202.6666666666666V160z" />
<glyph glyph-name="email-83"
unicode="&#xEA30;"
horiz-adv-x="256" d=" M245.3333333333333 234.6666666666667H10.6666666666667C4.2666666666667 234.6666666666667 0 230.4 0 224V192C0 187.7333333333334 2.1333333333333 184.5333333333333 5.3333333333333 182.4L122.6666666666667 118.4C124.8 117.3333333333334 125.8666666666667 117.3333333333334 128 117.3333333333334S131.2 117.3333333333334 133.3333333333334 118.4L250.6666666666667 182.4C253.8666666666667 184.5333333333333 256 187.7333333333334 256 192V224C256 230.4 251.7333333333334 234.6666666666667 245.3333333333333 234.6666666666667z M142.9333333333333 100.2666666666667C138.6666666666667 97.0666666666667 133.3333333333333 96 128 96S117.3333333333333 97.0666666666667 113.0666666666667 100.2666666666667L0 161.0666666666667V32C0 25.6 4.2666666666667 21.3333333333333 10.6666666666667 21.3333333333333H245.3333333333333C251.7333333333333 21.3333333333333 256 25.6 256 32V161.0666666666667L142.9333333333333 100.2666666666667z" />
<glyph glyph-name="fat-add"
unicode="&#xEA31;"
horiz-adv-x="256" d=" M192 149.3333333333334L149.3333333333333 149.3333333333334L149.3333333333333 192L106.6666666666667 192L106.6666666666667 149.3333333333334L64 149.3333333333334L64 106.6666666666667L106.6666666666667 106.6666666666667L106.6666666666667 64L149.3333333333333 64L149.3333333333333 106.6666666666667L192 106.6666666666667z" />
<glyph glyph-name="fat-delete"
unicode="&#xEA32;"
horiz-adv-x="256" d=" M64 149.3333333333334H192V106.6666666666667H64V149.3333333333334z" />
<glyph glyph-name="fat-remove"
unicode="&#xEA33;"
horiz-adv-x="256" d=" M188.8 98.1333333333333L157.8666666666667 128L188.8 157.8666666666667L157.8666666666667 188.8L128 157.8666666666667L98.1333333333333 188.8L67.2 157.8666666666667L98.1333333333333 128L67.2 98.1333333333333L98.1333333333333 67.2L128 98.1333333333333L157.8666666666667 67.2z" />
<glyph glyph-name="favourite-28"
unicode="&#xEA34;"
horiz-adv-x="256" d=" M181.3333333333333 256C161.0666666666667 256 141.8666666666667 247.4666666666667 128 233.6C114.1333333333333 247.4666666666667 94.9333333333333 256 74.6666666666667 256C33.0666666666667 256 0 222.9333333333333 0 181.3333333333334C0 113.0666666666667 116.2666666666667 17.0666666666667 121.6 12.8C123.7333333333333 10.6666666666667 125.8666666666667 10.6666666666667 128 10.6666666666667S132.2666666666667 11.7333333333333 134.4 12.8C139.7333333333333 17.0666666666667 256 113.0666666666667 256 181.3333333333334C256 222.9333333333333 222.9333333333333 256 181.3333333333333 256z" />
<glyph glyph-name="folder-17"
unicode="&#xEA35;"
horiz-adv-x="256" d=" M101.3333333333333 224C107.7333333333333 224 114.1333333333333 220.8 118.4 215.4666666666667L144 181.3333333333334H234.6666666666667V245.3333333333334C234.6666666666667 251.7333333333333 230.4 256 224 256H32C25.6 256 21.3333333333333 251.7333333333333 21.3333333333333 245.3333333333334V224H101.3333333333333z M245.3333333333333 160H133.3333333333333L104.5333333333333 198.4C102.4 201.6 99.2 202.6666666666667 96 202.6666666666667H10.6666666666667C4.2666666666667 202.6666666666667 0 198.4 0 192V10.6666666666667C0 4.2666666666667 4.2666666666667 0 10.6666666666667 0H245.3333333333333C251.7333333333333 0 256 4.2666666666667 256 10.6666666666667V149.3333333333334C256 155.7333333333334 251.7333333333334 160 245.3333333333333 160z" />
<glyph glyph-name="glasses-2"
unicode="&#xEA36;"
horiz-adv-x="256" d=" M213.3333333333333 245.3333333333334H202.6666666666667V224H213.3333333333333C225.0986666666667 224 234.6666666666667 214.432 234.6666666666667 202.6666666666667V114.5493333333334C224.512 122.944 211.4986666666667 128 197.3333333333333 128C176.2133333333333 128 157.7173333333333 116.7466666666667 147.392 99.9466666666667C141.9946666666667 104.096 135.3173333333333 106.6666666666667 128 106.6666666666667S114.0053333333334 104.096 108.608 99.9466666666667C98.2826666666667 116.7466666666667 79.7866666666667 128 58.6666666666667 128C44.5013333333333 128 31.488 122.944 21.3333333333333 114.5493333333333V202.6666666666667C21.3333333333333 214.432 30.9013333333333 224 42.6666666666667 224H53.3333333333333V245.3333333333334H42.6666666666667C19.136 245.3333333333334 0 226.1973333333334 0 202.6666666666667V69.3333333333334C0 36.992 26.3253333333333 10.6666666666667 58.6666666666667 10.6666666666667C89.2053333333333 10.6666666666667 114.3573333333333 34.144 117.0666666666667 64H117.3333333333333V74.6666666666667C117.3333333333333 80.5546666666667 122.112 85.3333333333333 128 85.3333333333333S138.6666666666667 80.5546666666667 138.6666666666667 74.6666666666667V64H138.9333333333333C141.6426666666667 34.144 166.784 10.6666666666667 197.3333333333333 10.6666666666667C229.6746666666667 10.6666666666667 256 36.992 256 69.3333333333333V202.6666666666667C256 226.1973333333334 236.864 245.3333333333334 213.3333333333333 245.3333333333334z" />
<glyph glyph-name="hat-3"
unicode="&#xEA37;"
horiz-adv-x="256" d=" M234.6666666666667 138.6666666666667H256V74.6666666666667H234.6666666666667V138.6666666666667z M141.2373333333333 88.2133333333333C137.0346666666667 86.2933333333334 132.5866666666667 85.3333333333333 128 85.3333333333333S118.9653333333333 86.2933333333334 114.7733333333334 88.2026666666667L42.6666666666667 120.9813333333334V64C42.6666666666667 35.9893333333333 85.5893333333333 21.3333333333333 128 21.3333333333333S213.3333333333333 35.9893333333334 213.3333333333333 64V120.9706666666667L141.2373333333333 88.2133333333333z M249.7493333333334 180.3733333333333L132.416 233.7066666666667C129.6106666666667 234.976 126.4 234.976 123.5946666666667 233.7066666666667L6.2613333333333 180.3733333333333C2.4426666666667 178.6453333333333 0 174.8586666666667 0 170.6666666666667S2.4426666666667 162.688 6.2506666666667 160.96L123.584 107.6266666666667C124.992 106.9866666666667 126.496 106.6666666666667 128 106.6666666666667S131.008 106.9866666666667 132.416 107.6266666666667L249.7493333333333 160.96C253.5573333333334 162.688 256 166.4746666666667 256 170.6666666666667S253.5573333333334 178.6453333333333 249.7493333333334 180.3733333333333z" />
<glyph glyph-name="headphones"
unicode="&#xEA38;"
horiz-adv-x="256" d=" M245.3333333333333 106.112V160C245.3333333333333 212.928 202.2613333333333 256 149.3333333333333 256H106.6666666666667C53.7386666666667 256 10.6666666666667 212.928 10.6666666666667 160V106.112C3.9466666666667 95.4346666666667 0 82.848 0 69.3333333333334C0 31.104 31.104 0 69.3333333333333 0C75.6266666666667 0 81.984 0.896 88.2346666666667 2.6666666666667C92.832 3.968 96 8.16 96 12.928V125.7386666666667C96 130.5066666666667 92.832 134.6986666666667 88.2346666666667 136C81.984 137.7706666666667 75.6266666666667 138.6666666666667 69.3333333333333 138.6666666666667C55.584 138.6666666666667 42.7946666666667 134.592 32 127.6586666666667V160C32 201.1733333333334 65.4933333333333 234.6666666666667 106.6666666666667 234.6666666666667H149.3333333333333C190.5066666666667 234.6666666666667 224 201.1733333333333 224 160V127.6586666666667C213.2053333333333 134.592 200.416 138.6666666666667 186.6666666666667 138.6666666666667C180.3733333333333 138.6666666666667 174.016 137.7706666666667 167.7653333333333 136C163.168 134.6986666666667 160 130.5066666666667 160 125.7386666666667V12.9386666666667C160 8.1706666666667 163.168 3.9786666666667 167.7653333333333 2.6773333333334C174.016 0.896 180.3733333333333 0 186.6666666666667 0C224.896 0 256 31.104 256 69.3333333333333C256 82.848 252.0533333333333 95.4346666666667 245.3333333333333 106.112z" />
<glyph glyph-name="html5"
unicode="&#xEA39;"
horiz-adv-x="256" d=" M231.9466666666667 241.7813333333333C229.9306666666667 244.0426666666667 227.04 245.3333333333334 224 245.3333333333334H32C28.96 245.3333333333334 26.0693333333333 244.0426666666667 24.0533333333333 241.7813333333333C22.0266666666667 239.52 21.0666666666667 236.5013333333333 21.3973333333333 233.4933333333334L42.7306666666667 41.4933333333333C43.2 37.1946666666667 46.24 33.6106666666667 50.4 32.4053333333333L125.0666666666667 11.072C126.0266666666667 10.8053333333334 127.0186666666667 10.6666666666667 128 10.6666666666667S129.9733333333333 10.8053333333334 130.9333333333333 11.072L205.6 32.4053333333334C209.76 33.6000000000001 212.7893333333333 37.184 213.2693333333333 41.4933333333334L234.6026666666667 233.4933333333334C234.9333333333333 236.5013333333333 233.9733333333333 239.52 231.9466666666667 241.7813333333333zM192 181.3333333333334H86.2613333333333L89.8133333333333 138.6666666666667H187.7866666666667L180.5333333333333 66.1333333333334L128 53.0026666666667L74.6666666666667 66.336V96H96V82.9973333333333L128 74.9973333333333L160.8 83.2L164.2133333333334 117.3333333333333H70.1866666666667L63.072 202.6666666666667H192V181.3333333333334z" />
<glyph glyph-name="istanbul"
unicode="&#xEA3A;"
horiz-adv-x="256" d=" M234.6666666666667 221.8666666666667V245.3333333333334C234.6666666666667 251.7333333333333 230.4 256 224 256S213.3333333333334 251.7333333333333 213.3333333333334 245.3333333333334V221.8666666666667C200.5333333333333 217.6 192 205.8666666666667 192 192V160V128C192 160 168.5333333333333 185.6 138.6666666666667 190.9333333333333V213.3333333333334C138.6666666666667 219.7333333333334 134.4 224 128 224S117.3333333333334 219.7333333333334 117.3333333333334 213.3333333333334V190.9333333333333C87.4666666666667 185.6 64 160 64 128V160V192C64 205.8666666666667 55.4666666666667 217.6 42.6666666666667 221.8666666666667V245.3333333333334C42.6666666666667 251.7333333333333 38.4 256 32 256S21.3333333333333 251.7333333333333 21.3333333333333 245.3333333333334V221.8666666666667C8.5333333333333 217.6 0 205.8666666666667 0 192V160V10.6666666666667C0 4.2666666666667 4.2666666666667 0 10.6666666666667 0H106.6666666666667V21.3333333333334C106.6666666666667 33.0666666666667 116.2666666666667 42.6666666666667 128 42.6666666666667L128 42.6666666666667C139.7333333333334 42.6666666666667 149.3333333333334 33.0666666666667 149.3333333333334 21.3333333333334V0H245.3333333333334C251.7333333333334 0 256 4.2666666666667 256 10.6666666666667V160V192C256 205.8666666666667 247.4666666666667 217.6 234.6666666666667 221.8666666666667zM42.6666666666667 170.6666666666667H21.3333333333333V192C21.3333333333333 198.4 25.6 202.6666666666667 32 202.6666666666667S42.6666666666667 198.4 42.6666666666667 192V170.6666666666667zM170.6666666666667 117.3333333333334H85.3333333333333V128C85.3333333333333 151.4666666666667 104.5333333333333 170.6666666666667 128 170.6666666666667C151.4666666666667 170.6666666666667 170.6666666666667 151.4666666666667 170.6666666666667 128V117.3333333333334zM234.6666666666667 170.6666666666667H213.3333333333333V192C213.3333333333333 198.4 217.6 202.6666666666667 224 202.6666666666667S234.6666666666667 198.4 234.6666666666667 192V170.6666666666667z" />
<glyph glyph-name="key-25"
unicode="&#xEA3B;"
horiz-adv-x="256" d=" M252.8746666666667 178.208L217.7493333333334 213.3333333333334L242.208 237.792C246.3786666666667 241.9626666666667 246.3786666666667 248.704 242.208 252.8746666666667S231.296 257.0453333333334 227.1253333333334 252.8746666666667L116.2773333333333 142.0266666666667C119.072 139.8506666666667 121.792 137.5466666666667 124.3413333333333 135.008C126.8906666666667 132.4586666666667 129.184 129.7386666666667 131.36 126.944L170.6666666666667 166.2506666666667L205.792 131.1253333333334C207.872 129.0453333333334 210.6026666666667 128 213.3333333333333 128S218.7946666666667 129.0453333333333 220.8746666666667 131.1253333333334L252.8746666666667 163.1253333333334C257.0453333333333 167.296 257.0453333333333 174.0373333333333 252.8746666666667 178.208z M64 10.6666666666667C81.0986666666667 10.6666666666667 97.1626666666667 17.3226666666667 109.2586666666667 29.408S128 57.568 128 74.6666666666667S121.344 107.8293333333334 109.2586666666667 119.9253333333334S81.0986666666667 138.6666666666667 64 138.6666666666667S30.8373333333333 132.0106666666667 18.7413333333333 119.9253333333334S0 91.7653333333333 0 74.6666666666667S6.656 41.504 18.7413333333333 29.408S46.9013333333333 10.6666666666667 64 10.6666666666667z" />
<glyph glyph-name="laptop"
unicode="&#xEA3C;"
horiz-adv-x="256" d=" M224 108.8533333333334V213.3333333333334C224 225.0986666666667 214.432 234.6666666666667 202.6666666666667 234.6666666666667H53.3333333333333C41.568 234.6666666666667 32 225.0986666666667 32 213.3333333333334V108.8533333333334L7.232 51.072C4.4053333333333 44.4586666666667 5.0773333333333 36.928 9.0346666666667 30.9226666666667C12.992 24.9173333333333 19.648 21.3333333333333 26.848 21.3333333333333H229.1626666666667C236.352 21.3333333333333 243.008 24.9173333333333 246.976 30.9226666666667C250.9333333333334 36.928 251.6053333333334 44.4586666666667 248.768 51.072L224 108.8533333333334zM202.6666666666667 117.3333333333334H53.3333333333333V213.3333333333334H202.6666666666666V117.3333333333334z" />
<glyph glyph-name="like-2"
unicode="&#xEA3D;"
horiz-adv-x="256" d=" M53.3333333333333 21.3333333333333H32C25.6 21.3333333333333 21.3333333333333 25.6 21.3333333333333 32V128C21.3333333333333 134.4 25.6 138.6666666666667 32 138.6666666666667H53.3333333333333C59.7333333333333 138.6666666666667 64 134.4 64 128V32C64 25.6 59.7333333333333 21.3333333333333 53.3333333333333 21.3333333333333z M213.3333333333333 149.3333333333334H160V181.3333333333334C160 199.4666666666667 149.3333333333334 224 133.3333333333334 233.6C125.8666666666667 236.8 117.3333333333333 232.5333333333334 117.3333333333333 224V181.3333333333334L85.3333333333333 142.9333333333333V32L88.5333333333333 30.9333333333333C100.2666666666667 24.5333333333334 114.1333333333333 21.3333333333333 128 21.3333333333333H202.6666666666667C214.4 21.3333333333333 224 30.9333333333333 224 42.6666666666667L234.6666666666667 128C234.6666666666667 139.7333333333334 225.0666666666667 149.3333333333334 213.3333333333333 149.3333333333334z" />
<glyph glyph-name="lock-circle-open"
unicode="&#xEA3E;"
horiz-adv-x="256" d=" M128 170.6666666666667C112.448 170.6666666666667 97.8986666666667 166.4213333333333 85.3333333333333 159.1253333333334V192C85.3333333333333 215.5306666666667 104.4693333333333 234.6666666666667 128 234.6666666666667S170.6666666666667 215.5306666666667 170.6666666666667 192H192C192 227.296 163.296 256 128 256S64 227.296 64 192V141.5893333333334C50.7626666666667 126.5493333333334 42.6666666666667 106.8906666666667 42.6666666666667 85.3333333333333C42.6666666666667 38.2826666666667 80.9493333333333 0 128 0S213.3333333333333 38.2826666666667 213.3333333333333 85.3333333333333S175.0506666666667 170.6666666666667 128 170.6666666666667zM138.6666666666667 65.9626666666667V42.6666666666667H117.3333333333333V65.9626666666667C104.9493333333333 70.3786666666667 96 82.112 96 96C96 113.6426666666667 110.3573333333333 128 128 128S160 113.6426666666667 160 96C160 82.112 151.0506666666667 70.3786666666667 138.6666666666667 65.9626666666667z" />
<glyph glyph-name="map-big"
unicode="&#xEA3F;"
horiz-adv-x="256" d=" M181.3333333333333 241.2586666666667L138.6666666666667 219.9253333333333L138.6666666666667 14.7413333333334L181.3333333333333 36.0746666666667z M117.3333333333333 219.9253333333333L74.6666666666667 241.2586666666667L74.6666666666667 36.0746666666667L117.3333333333333 14.7413333333334z M53.3333333333333 240.704L5.1733333333333 211.808C1.9733333333333 209.888 0 206.4213333333333 0 202.6666666666667V0L53.3333333333333 34.496V240.704z M250.8266666666667 211.808L202.6666666666667 240.704V34.496L256 0V202.6666666666667C256 206.4213333333333 254.0266666666667 209.888 250.8266666666667 211.808z" />
<glyph glyph-name="mobile-button"
unicode="&#xEA40;"
horiz-adv-x="256" d=" M192 256H64C46.3573333333333 256 32 241.6426666666667 32 224V32C32 14.3573333333333 46.3573333333333 0 64 0H192C209.6426666666667 0 224 14.3573333333333 224 32V224C224 241.6426666666667 209.6426666666667 256 192 256zM128 21.3333333333333C122.112 21.3333333333333 117.3333333333333 26.112 117.3333333333333 32S122.112 42.6666666666667 128 42.6666666666667S138.6666666666667 37.888 138.6666666666667 32S133.888 21.3333333333333 128 21.3333333333333zM202.6666666666667 74.6666666666667C202.6666666666667 68.7786666666667 197.888 64 192 64H64C58.112 64 53.3333333333333 68.7786666666667 53.3333333333333 74.6666666666667V213.3333333333334C53.3333333333333 219.2213333333334 58.112 224 64 224H192C197.888 224 202.6666666666667 219.2213333333334 202.6666666666667 213.3333333333334V74.6666666666667z" />
<glyph glyph-name="money-coins"
unicode="&#xEA41;"
horiz-adv-x="256" d=" M85.3333333333333 106.6666666666667H10.6666666666667C4.7786666666667 106.6666666666667 0 111.4453333333333 0 117.3333333333334V245.3333333333334C0 251.2213333333334 4.7786666666667 256 10.6666666666667 256H202.6666666666667C208.5546666666667 256 213.3333333333333 251.2213333333334 213.3333333333333 245.3333333333334V192H192V234.6666666666667H21.3333333333333V128H85.3333333333333V106.6666666666667z M181.3333333333333 85.3333333333333C149.856 85.3333333333333 123.7013333333333 92.1493333333334 106.6666666666667 103.5946666666667C106.6666666666667 95.6373333333334 106.6666666666667 90.3893333333334 106.6666666666667 85.3333333333333C106.6666666666667 67.6586666666667 140.096 53.3333333333333 181.3333333333333 53.3333333333333S256 67.6586666666667 256 85.3333333333333C256 90.3893333333334 256 95.6373333333334 256 103.5946666666667C238.9653333333333 92.1493333333334 212.8106666666667 85.3333333333333 181.3333333333333 85.3333333333333z M181.3333333333333 32C149.856 32 123.7013333333333 38.816 106.6666666666667 50.2613333333333C106.6666666666667 42.304 106.6666666666667 37.056 106.6666666666667 32C106.6666666666667 14.3253333333333 140.096 0 181.3333333333333 0S256 14.3253333333333 256 32C256 37.056 256 42.304 256 50.2613333333333C238.9653333333333 38.816 212.8106666666667 32 181.3333333333333 32z M95.0293333333333 163.4986666666667C102.3466666666667 172.0426666666667 113.5253333333333 179.0186666666667 127.7333333333333 183.936C126.4426666666667 194.4533333333334 117.5466666666667 202.6666666666667 106.6666666666667 202.6666666666667C94.9013333333333 202.6666666666667 85.3333333333333 193.0986666666667 85.3333333333333 181.3333333333334C85.3333333333333 173.8666666666667 89.2053333333333 167.3066666666667 95.0293333333333 163.4986666666667z M106.6666666666667 138.6666666666667C106.6666666666667 120.9935546720813 140.0960720126341 106.6666666666667 181.3333333333333 106.6666666666667C222.5705946540326 106.6666666666667 256 120.9935546720813 256 138.6666666666667C256 156.3397786612521 222.5705946540326 170.6666666666667 181.3333333333333 170.6666666666667C140.0960720126341 170.6666666666667 106.6666666666667 156.3397786612521 106.6666666666667 138.6666666666667z" />
<glyph glyph-name="note-03"
unicode="&#xEA42;"
horiz-adv-x="256" d=" M245.3333333333333 256H85.3333333333333C79.4453333333333 256 74.6666666666667 251.2213333333334 74.6666666666667 245.3333333333334V87.872C67.0293333333333 92.992 57.8666666666667 96 48 96C21.536 96 0 74.464 0 48S21.536 0 48 0S96 21.536 96 48V170.6666666666667H234.6666666666667V109.2053333333333C227.0293333333333 114.3253333333333 217.8666666666667 117.3333333333334 208 117.3333333333334C181.536 117.3333333333334 160 95.7973333333333 160 69.3333333333333S181.536 21.3333333333333 208 21.3333333333333S256 42.8693333333333 256 69.3333333333333V245.3333333333334C256 251.2213333333334 251.2213333333333 256 245.3333333333333 256z" />
<glyph glyph-name="notification-70"
unicode="&#xEA43;"
horiz-adv-x="256" d=" M202.6666666666667 256C170.6666666666667 256 140.8 240 122.6666666666667 213.3333333333334H85.3333333333333H74.6666666666667H32C13.8666666666667 213.3333333333334 0 190.9333333333333 0 160S13.8666666666667 106.6666666666667 32 106.6666666666667H56.5333333333333L102.4 28.8C108.8 18.1333333333334 121.6 14.9333333333333 131.2 21.3333333333333C141.8666666666667 27.7333333333334 145.0666666666667 40.5333333333333 138.6666666666667 50.1333333333334L105.6 106.6666666666667H122.6666666666667C140.8 80 170.6666666666667 64 202.6666666666667 64C233.6 64 256 105.6 256 160S233.6 256 202.6666666666667 256zM202.6666666666667 85.3333333333333C193.0666666666667 85.3333333333333 182.4 99.2 176 120.5333333333333C192 126.9333333333333 202.6666666666667 141.8666666666667 202.6666666666667 160S192 193.0666666666667 176 199.4666666666667C182.4 220.8 193.0666666666667 234.6666666666667 202.6666666666667 234.6666666666667C217.6 234.6666666666667 234.6666666666667 202.6666666666667 234.6666666666667 160S217.6 85.3333333333333 202.6666666666667 85.3333333333333z" />
<glyph glyph-name="palette"
unicode="&#xEA44;"
horiz-adv-x="256" d=" M217.6 190.9333333333333C205.8666666666666 196.2666666666667 194.1333333333333 199.4666666666667 181.3333333333333 199.4666666666667C164.2666666666667 199.4666666666667 149.3333333333333 194.1333333333333 135.4666666666667 189.8666666666667C126.9333333333333 186.6666666666667 118.4 184.5333333333334 112 184.5333333333334C107.7333333333333 184.5333333333334 105.6 185.6 104.5333333333333 187.7333333333334C104.5333333333333 188.8 105.6 194.1333333333334 106.6666666666666 197.3333333333334C109.8666666666667 206.9333333333333 113.0666666666667 218.6666666666667 104.5333333333333 230.4C99.2 236.8 90.6666666666666 241.0666666666667 81.0666666666666 241.0666666666667C71.4666666666666 241.0666666666667 62.9333333333333 237.8666666666667 54.4 232.5333333333334C20.2666666666667 209.0666666666667 0 169.6 0 128C0 57.6 57.6 0 128 0C184.5333333333333 0 235.7333333333333 38.4 251.7333333333333 93.8666666666667C252.8 100.2666666666667 267.7333333333334 166.4 217.6 190.9333333333333zM32 128C32 139.7333333333334 41.6 149.3333333333333 53.3333333333333 149.3333333333333S74.6666666666667 139.7333333333334 74.6666666666667 128S65.0666666666667 106.6666666666667 53.3333333333333 106.6666666666667S32 116.2666666666667 32 128zM80 53.3333333333333C68.2666666666667 53.3333333333333 58.6666666666667 62.9333333333333 58.6666666666667 74.6666666666667S68.2666666666667 96 80 96S101.3333333333333 86.4 101.3333333333333 74.6666666666667S91.7333333333333 53.3333333333333 80 53.3333333333333zM138.6666666666667 32C126.9333333333333 32 117.3333333333333 41.6 117.3333333333333 53.3333333333333S126.9333333333333 74.6666666666667 138.6666666666667 74.6666666666667S160 65.0666666666667 160 53.3333333333333S150.4 32 138.6666666666667 32zM181.3333333333333 96C163.2 96 149.3333333333333 109.8666666666667 149.3333333333333 128S163.2 160 181.3333333333333 160S213.3333333333333 146.1333333333333 213.3333333333333 128S199.4666666666667 96 181.3333333333333 96z" />
<glyph glyph-name="paper-diploma"
unicode="&#xEA45;"
horiz-adv-x="256" d=" M74.6666666666667 37.3333333333333C74.6666666666667 24.608 61.9306666666667 21.8986666666667 58.24 21.376C49.6106666666667 21.6106666666667 42.6666666666667 28.6613333333333 42.6666666666667 37.3333333333333V234.6666666666667H138.6666666666667V256H32C26.112 256 21.3333333333333 251.2213333333334 21.3333333333333 245.3333333333334V37.3333333333333C21.3333333333333 16.7466666666667 38.08 0 58.6666666666667 0H218.6666666666667C239.2533333333334 0 256 16.7466666666667 256 37.3333333333333V53.3333333333333H74.6666666666667V37.3333333333333z M202.6666666666667 128C186.8053333333333 128 172.1066666666667 133.0133333333333 160 141.4826666666667V74.6666666666667L202.6666666666667 106.6666666666667L245.3333333333333 74.6666666666667V141.4826666666667C233.2266666666667 133.0133333333334 218.528 128 202.6666666666667 128z M149.3333333333333 202.6666666666667C149.3333333333333 173.2114800090244 173.2114800090243 149.3333333333334 202.6666666666667 149.3333333333334C232.121853324309 149.3333333333334 256 173.2114800090244 256 202.6666666666667C256 232.121853324309 232.121853324309 256 202.6666666666667 256C173.2114800090243 256 149.3333333333333 232.121853324309 149.3333333333333 202.6666666666667z" />
<glyph glyph-name="pin-3"
unicode="&#xEA46;"
horiz-adv-x="256" d=" M128 256C81.0666666666667 256 32 219.7333333333334 32 160C32 103.4666666666667 117.3333333333333 17.0666666666667 120.5333333333333 13.8666666666667C122.6666666666667 11.7333333333333 124.8 10.6666666666667 128 10.6666666666667S133.3333333333334 11.7333333333333 135.4666666666667 13.8666666666667C138.6666666666667 17.0666666666667 224 103.4666666666667 224 160C224 219.7333333333334 174.9333333333333 256 128 256zM128 128C109.8666666666667 128 96 141.8666666666667 96 160S109.8666666666667 192 128 192S160 178.1333333333333 160 160S146.1333333333333 128 128 128z" />
<glyph glyph-name="planet"
unicode="&#xEA47;"
horiz-adv-x="256" d=" M228.608 54.624C235.7653333333333 37.5253333333333 236.032 26.4426666666667 232.5333333333333 22.9333333333333C228.1066666666667 18.5066666666667 211.1466666666667 21.7066666666667 185.984 35.8186666666667C209.2053333333333 55.4133333333334 224 84.6613333333334 224 117.3333333333334C224 176.1493333333334 176.1493333333334 224 117.3333333333334 224C84.6613333333333 224 55.4133333333333 209.2053333333333 35.8293333333333 185.9946666666667C21.7066666666667 211.1573333333333 18.5173333333333 228.1173333333334 22.9333333333333 232.544C26.4426666666667 236.0426666666667 37.5253333333333 235.776 54.624 228.6186666666667C62.7093333333333 233.2053333333334 71.3386666666667 236.8426666666667 80.384 239.6053333333334C47.2853333333333 257.952 21.3866666666667 261.1840000000001 7.84 247.6373333333334C-7.8293333333333 231.936 1.3653333333333 200.7466666666667 22.6666666666667 166.2826666666667C15.04 151.6053333333333 10.6666666666667 134.9866666666667 10.6666666666667 117.3333333333334C10.6666666666667 58.5173333333333 58.5173333333333 10.6666666666667 117.3333333333333 10.6666666666667C134.9866666666667 10.6666666666667 151.6053333333333 15.04 166.2826666666667 22.6666666666667C200.7573333333334 1.3653333333334 231.936 -7.8293333333333 247.6266666666667 7.8613333333334C261.1733333333334 21.408 257.9413333333333 47.296 239.5946666666667 80.4053333333334C236.8426666666667 71.3493333333333 233.1946666666667 62.7093333333334 228.608 54.624zM69.3333333333333 96C60.5013333333333 96 53.3333333333333 103.168 53.3333333333333 112S60.5013333333333 128 69.3333333333333 128S85.3333333333333 120.832 85.3333333333333 112S78.1653333333333 96 69.3333333333333 96zM138.6666666666667 74.6666666666667C132.7786666666667 74.6666666666667 128 79.4453333333333 128 85.3333333333333C128 91.2213333333334 132.7786666666667 96 138.6666666666667 96C144.5546666666667 96 149.3333333333333 91.2213333333334 149.3333333333333 85.3333333333333C149.3333333333333 79.4453333333333 144.5546666666667 74.6666666666667 138.6666666666667 74.6666666666667zM133.3333333333333 138.6666666666667C124.5013333333333 138.6666666666667 117.3333333333333 145.8346666666667 117.3333333333333 154.6666666666667S124.5013333333333 170.6666666666667 133.3333333333333 170.6666666666667S149.3333333333333 163.4986666666667 149.3333333333333 154.6666666666667S142.1653333333333 138.6666666666667 133.3333333333333 138.6666666666667z" />
<glyph glyph-name="ruler-pencil"
unicode="&#xEA48;"
horiz-adv-x="256" d=" M202.6666666666667 0C199.3173333333333 0 196.1493333333333 1.5786666666667 194.1333333333333 4.2666666666667L162.1333333333333 46.9333333333333C160.7466666666667 48.7786666666667 160 51.0293333333333 160 53.3333333333333V202.6666666666667H245.3333333333333V53.3333333333334C245.3333333333333 51.0293333333334 244.5866666666667 48.7786666666667 243.2 46.9333333333334L211.2 4.2666666666667C209.184 1.5786666666667 206.016 0 202.6666666666667 0z M234.6666666666667 256H170.6666666666667C164.7786666666667 256 160 251.2213333333334 160 245.3333333333334V224H245.3333333333333V245.3333333333334C245.3333333333333 251.2213333333334 240.5546666666667 256 234.6666666666667 256z M106.6666666666667 256H21.3333333333333C14.9333333333333 256 10.6666666666667 251.7333333333333 10.6666666666667 245.3333333333334V202.6666666666667H53.3333333333333V181.3333333333334H10.6666666666667V160H42.6666666666667V138.6666666666667H10.6666666666667V117.3333333333334H53.3333333333333V96H10.6666666666667V74.6666666666667H42.6666666666667V53.3333333333333H10.6666666666667V10.6666666666667C10.6666666666667 4.2666666666667 14.9333333333333 0 21.3333333333333 0H106.6666666666667C113.0666666666667 0 117.3333333333333 4.2666666666667 117.3333333333333 10.6666666666667V245.3333333333334C117.3333333333333 251.7333333333333 113.0666666666667 256 106.6666666666667 256z" />
<glyph glyph-name="satisfied"
unicode="&#xEA49;"
horiz-adv-x="256" d=" M128 256C57.6 256 0 198.4 0 128S57.6 0 128 0C198.4 0 256 57.6 256 128S198.4 256 128 256zM53.3333333333333 160C53.3333333333333 178.1333333333333 67.2 192 85.3333333333333 192C103.4666666666667 192 117.3333333333333 178.1333333333333 117.3333333333333 160H96C96 166.4 91.7333333333333 170.6666666666667 85.3333333333333 170.6666666666667C78.9333333333333 170.6666666666667 74.6666666666667 166.4 74.6666666666667 160H53.3333333333333zM202.6666666666667 117.3333333333334C202.6666666666667 75.7333333333334 169.6 42.6666666666667 128 42.6666666666667C86.4 42.6666666666667 53.3333333333333 75.7333333333334 53.3333333333333 117.3333333333334H74.6666666666667C74.6666666666667 87.4666666666667 98.1333333333333 64 128 64C157.8666666666667 64 181.3333333333333 87.4666666666667 181.3333333333333 117.3333333333333H202.6666666666667zM181.3333333333333 160C181.3333333333333 166.4 177.0666666666666 170.6666666666667 170.6666666666667 170.6666666666667C164.2666666666667 170.6666666666667 160 166.4 160 160H138.6666666666667C138.6666666666667 178.1333333333333 152.5333333333333 192 170.6666666666667 192C188.8 192 202.6666666666667 178.1333333333333 202.6666666666667 160H181.3333333333333z" />
<glyph glyph-name="scissors"
unicode="&#xEA4A;"
horiz-adv-x="256" d=" M197.3333333333333 96C189.568 96 182.336 93.9733333333333 175.8293333333333 90.6773333333333L152.2773333333333 118.144L212.2773333333333 178.144C232.96 198.8266666666667 236.9173333333333 230.9226666666667 221.8666666666667 256L128 146.4853333333334L34.1333333333333 256C19.0826666666667 230.9226666666667 23.04 198.8266666666667 43.7226666666667 178.1546666666667L103.7226666666667 118.1546666666667L80.1706666666667 90.688C73.664 93.9733333333334 66.432 96 58.6666666666667 96C32.2026666666667 96 10.6666666666667 74.464 10.6666666666667 48S32.2026666666667 0 58.6666666666667 0S106.6666666666667 21.536 106.6666666666667 48C106.6666666666667 55.168 104.9813333333333 61.9093333333333 102.1546666666667 68.0213333333333L128 93.8666666666667L153.8453333333334 68.0213333333333C151.0186666666667 61.9093333333333 149.3333333333333 55.168 149.3333333333333 48C149.3333333333333 21.536 170.8693333333333 0 197.3333333333333 0S245.3333333333333 21.536 245.3333333333333 48S223.7973333333334 96 197.3333333333333 96zM58.6666666666667 21.3333333333333C43.968 21.3333333333333 32 33.2906666666667 32 48S43.968 74.6666666666667 58.6666666666667 74.6666666666667S85.3333333333333 62.7093333333334 85.3333333333333 48S73.3653333333333 21.3333333333333 58.6666666666667 21.3333333333333zM170.6666666666667 48C170.6666666666667 62.7093333333334 182.6346666666667 74.6666666666667 197.3333333333333 74.6666666666667S224 62.7093333333333 224 48S212.032 21.3333333333333 197.3333333333333 21.3333333333333S170.6666666666667 33.2906666666667 170.6666666666667 48z" />
<glyph glyph-name="send"
unicode="&#xEA4B;"
horiz-adv-x="256" d=" M15.1786666666667 138.1546666666667L42.6666666666667 117.3333333333334L138.6666666666667 160L64.2453333333333 101.344V29.3546666666667C64.2453333333333 19.4026666666667 76.6613333333333 14.8693333333333 83.072 22.4853333333333L116.4693333333333 62.1653333333333L185.8026666666667 10.1546666666667C192.0853333333333 5.4506666666667 201.12 8.896 202.6666666666667 16.5973333333334L245.376 229.9306666666667C247.04 238.24 238.816 245.0773333333334 230.9546666666667 241.9306666666667L17.6213333333333 156.5973333333333C9.8986666666667 153.504 8.5226666666667 143.1466666666667 15.1786666666667 138.1546666666667z" />
<glyph glyph-name="settings-gear-65"
unicode="&#xEA4C;"
horiz-adv-x="256" d=" M224 149.3333333333334H210.1333333333333C208 156.8 204.8 164.2666666666667 200.5333333333333 171.7333333333334L210.1333333333333 181.3333333333334C218.6666666666667 189.8666666666667 218.6666666666667 202.6666666666667 210.1333333333333 211.2H210.1333333333333C201.6 219.7333333333334 188.8 219.7333333333334 180.2666666666667 211.2L170.6666666666667 201.6C164.2666666666667 205.8666666666667 156.8 209.0666666666667 148.2666666666667 211.2V224C148.2666666666667 235.7333333333334 138.6666666666667 245.3333333333334 126.9333333333333 245.3333333333334S105.6 235.7333333333334 105.6 224V210.1333333333333C99.2 208 91.7333333333333 205.8666666666667 84.2666666666667 201.6L75.7333333333333 211.2C67.2 219.7333333333334 54.4 219.7333333333334 45.8666666666667 211.2H45.8666666666667C37.3333333333333 202.6666666666667 37.3333333333333 189.8666666666667 45.8666666666667 181.3333333333334L55.4666666666667 171.7333333333334C50.1333333333333 164.2666666666667 48 156.8 45.8666666666667 149.3333333333334H32C20.2666666666667 149.3333333333334 10.6666666666667 139.7333333333334 10.6666666666667 128C10.6666666666667 116.2666666666667 20.2666666666667 106.6666666666667 32 106.6666666666667H45.8666666666667C48 99.2 51.2 91.7333333333334 55.4666666666667 84.2666666666667L45.8666666666667 74.6666666666667C37.3333333333333 66.1333333333334 37.3333333333333 53.3333333333333 45.8666666666667 44.8H45.8666666666667C54.4 36.2666666666667 67.2 36.2666666666667 75.7333333333333 44.8L85.3333333333333 54.4C91.7333333333333 50.1333333333333 99.2 46.9333333333333 107.7333333333333 44.8V32C107.7333333333333 20.2666666666667 117.3333333333333 10.6666666666667 129.0666666666667 10.6666666666667S150.4 20.2666666666667 150.4 32V45.8666666666667C157.8666666666667 48 165.3333333333334 51.2 172.8 55.4666666666667L182.4 45.8666666666667C190.9333333333333 37.3333333333333 203.7333333333334 37.3333333333333 212.2666666666667 45.8666666666667H212.2666666666667C220.8 54.4 220.8 67.2 212.2666666666667 75.7333333333334L202.6666666666667 85.3333333333333C206.9333333333334 91.7333333333334 210.1333333333334 99.2 212.2666666666667 107.7333333333334H224C235.7333333333334 107.7333333333334 245.3333333333334 117.3333333333334 245.3333333333334 129.0666666666667C245.3333333333333 139.7333333333334 235.7333333333334 149.3333333333334 224 149.3333333333334zM128 96C109.8666666666667 96 96 109.8666666666667 96 128S109.8666666666667 160 128 160S160 146.1333333333333 160 128S146.1333333333333 96 128 96z" />
<glyph glyph-name="settings"
unicode="&#xEA4D;"
horiz-adv-x="256" d=" M115.7653333333333 155.3173333333334L71.5413333333333 199.5413333333334L85.3333333333333 213.3333333333334L42.6666666666667 256L0 213.3333333333334L42.6666666666667 170.6666666666667L56.4586666666667 184.4586666666667L98.016 142.9013333333334z M202.0266666666667 107.3066666666667C198.7306666666667 106.9226666666667 195.392 106.6666666666667 192 106.6666666666667C188.7466666666667 106.6666666666667 185.5146666666667 106.8586666666667 182.272 107.232L143.4346666666667 59.2426666666667L191.6266666666667 11.0506666666667C206.3573333333334 -3.6799999999999 230.2293333333334 -3.6799999999999 244.96 11.0506666666667V11.0506666666667C259.6906666666667 25.7813333333334 259.6906666666667 49.6533333333334 244.96 64.384L202.0266666666667 107.3066666666667z M216.224 183.776L183.776 216.224L217.9946666666667 250.4426666666667C210.048 253.984 201.2693333333333 256 192 256C156.6506666666667 256 128 227.3493333333334 128 192C128 185.664 128.9493333333333 179.5626666666667 130.6666666666667 173.7813333333334L15.584 80.6613333333334C6.08 72.2666666666667 0.4053333333333 60.192 0.0213333333333 47.5306666666667C-0.3733333333333 34.8586666666667 4.544 22.4533333333333 13.504 13.504C22.208 4.7893333333334 33.7813333333333 0 46.0906666666667 0C59.3066666666667 0 71.9146666666667 5.6746666666667 80.6613333333333 15.584L173.7813333333334 130.6666666666667C179.5626666666667 128.9493333333334 185.664 128 192 128C227.3493333333334 128 256 156.6506666666667 256 192C256 201.2693333333334 253.984 210.048 250.4426666666667 218.0053333333334L216.224 183.776z" />
<glyph glyph-name="single-02"
unicode="&#xEA4E;"
horiz-adv-x="256" d=" M164.9173333333333 106.4213333333333C153.856 99.9253333333334 141.4186666666667 96 128 96S102.144 99.9253333333333 91.0826666666667 106.4213333333333C52.2026666666667 103.872 21.3333333333333 71.5093333333334 21.3333333333333 32V13.5466666666667L28.7466666666667 11.168C30.176 10.72 64.4053333333333 0 128 0S225.824 10.72 227.2533333333334 11.168L234.6666666666667 13.5466666666667V32C234.6666666666667 71.5093333333334 203.7973333333334 103.872 164.9173333333333 106.4213333333333z M128 117.3333333333334C164.0426666666667 117.3333333333334 192 157.472 192 192C192 227.296 163.296 256 128 256S64 227.296 64 192C64 157.472 91.9573333333333 117.3333333333334 128 117.3333333333334z" />
<glyph glyph-name="single-copy-04"
unicode="&#xEA4F;"
horiz-adv-x="256" d=" M245.3333333333333 21.3333333333333H224V234.6666666666667H42.6666666666667V256H234.6666666666667C240.5546666666667 256 245.3333333333333 251.2213333333334 245.3333333333333 245.3333333333334V21.3333333333333z M192 213.3333333333334H21.3333333333333C15.4453333333333 213.3333333333334 10.6666666666667 208.5546666666667 10.6666666666667 202.6666666666667V10.6666666666667C10.6666666666667 4.7786666666667 15.4453333333333 0 21.3333333333333 0H192C197.888 0 202.6666666666667 4.7786666666667 202.6666666666667 10.6666666666667V202.6666666666667C202.6666666666667 208.5546666666667 197.888 213.3333333333334 192 213.3333333333334zM117.3333333333333 53.3333333333333H53.3333333333333V74.6666666666667H117.3333333333333V53.3333333333333zM160 96H53.3333333333333V117.3333333333334H160V96zM160 138.6666666666667H53.3333333333333V160H160V138.6666666666667z" />
<glyph glyph-name="sound-wave"
unicode="&#xEA50;"
horiz-adv-x="256" d=" M96 32C91.6586666666667 32 87.7226666666667 34.6453333333333 86.0906666666667 38.6986666666667L50.9546666666667 126.5386666666667L40.8746666666667 111.4133333333333C38.8906666666667 108.448 35.5626666666667 106.6666666666667 32 106.6666666666667H0V128H26.2933333333333L44.4586666666667 155.2533333333333C46.656 158.5386666666667 50.4213333333333 160.3093333333334 54.4426666666667 159.9466666666667C58.3786666666667 159.5306666666667 61.7813333333333 156.9813333333334 63.2426666666667 153.3013333333333L94.7626666666667 74.4746666666667L139.1573333333333 216.512C140.544 220.9706666666667 144.6613333333333 224 149.3333333333333 224C149.344 224 149.344 224 149.3546666666667 224C154.0266666666667 223.9893333333333 158.1546666666667 220.9386666666667 159.5306666666666 216.4693333333334L196.032 97.824L215.4666666666667 123.7333333333334C217.472 126.4213333333333 220.64 128 224 128H256V106.6666666666667H229.3333333333333L200.5333333333333 68.2666666666667C198.1333333333333 65.0666666666667 194.144 63.488 190.1653333333333 64.16C186.2186666666667 64.8533333333334 182.9866666666667 67.7013333333334 181.8026666666667 71.5306666666667L149.248 177.312L106.176 39.488C104.832 35.1786666666667 100.928 32.1813333333334 96.416 32.0106666666667C96.2666666666667 32 96.1386666666667 32 96 32z" />
<glyph glyph-name="spaceship"
unicode="&#xEA51;"
horiz-adv-x="256" d=" M254.592 243.3493333333334A10.623999999999999 10.623999999999999 0 0 1 243.392 254.6026666666667C198.6453333333333 252.2666666666667 162.4 238.6773333333334 133.4613333333334 220.7893333333333C98.4 233.6 59.424 225.376 32.7573333333334 198.6986666666667A96.544 96.544 0 0 1 18.0053333333334 179.5093333333333C15.5413333333334 175.328 16.224 169.9946666666667 19.6586666666667 166.5493333333333L50.4 135.808C42.0373333333334 121.9733333333333 38.0906666666667 112.5226666666667 37.952 112.1706666666667C36.3626666666667 108.2026666666667 37.2906666666667 103.6693333333333 40.3093333333334 100.6506666666666L100.6506666666667 40.3093333333333A10.666666666666666 10.666666666666666 0 0 1 112.2346666666667 37.9733333333333C112.5866666666667 38.112 121.9626666666667 42.0906666666666 135.7226666666667 50.496L166.56 19.6586666666666A10.613333333333335 10.613333333333335 0 0 1 179.5200000000001 18.016A95.93599999999998 95.93599999999998 0 0 1 198.7093333333334 32.768C225.6106666666667 59.6693333333333 233.7813333333334 98.8266666666667 220.6720000000001 133.9946666666667C238.4853333333334 162.8586666666667 252.0746666666668 198.9333333333333 254.5920000000001 243.3493333333334zM110.4853333333333 60.64L60.5866666666667 110.528C69.3013333333333 128.5333333333334 98.3253333333333 179.7013333333334 157.1306666666667 210.1013333333334L209.824 157.408C179.3706666666666 98.7093333333334 128.4693333333334 69.4613333333334 110.4853333333333 60.64z M128 149.3333333333334C128 137.5512586702764 137.5512586702764 128 149.3333333333333 128C161.1154079963903 128 170.6666666666667 137.5512586702764 170.6666666666667 149.3333333333334C170.6666666666667 161.1154079963903 161.1154079963903 170.6666666666667 149.3333333333333 170.6666666666667C137.5512586702764 170.6666666666667 128 161.1154079963903 128 149.3333333333334z M11.872 54.9973333333333A30.32533333333333 30.32533333333333 0 1 0 54.7733333333333 12.096C42.9226666666667 0.2453333333333 0 0 0 0S0.0213333333333 43.1573333333333 11.872 54.9973333333333z" />
<glyph glyph-name="square-pin"
unicode="&#xEA52;"
horiz-adv-x="256" d=" M234.6666666666667 0H21.3333333333333C17.632 0 14.208 1.92 12.256 5.056C10.3146666666667 8.2026666666667 10.1333333333333 12.128 11.7866666666667 15.4346666666667L43.7866666666667 79.4346666666667C46.4213333333333 84.704 52.8213333333333 86.8373333333334 58.1013333333333 84.2026666666667C63.3706666666667 81.568 65.504 75.1573333333334 62.8693333333333 69.888L38.592 21.3333333333333H217.408L193.1306666666666 69.8986666666667C190.496 75.168 192.6293333333333 81.5786666666667 197.8986666666666 84.2133333333333C203.1786666666666 86.848 209.5786666666666 84.704 212.2133333333333 79.4453333333333L244.2133333333333 15.4453333333333C245.8666666666667 12.1386666666666 245.6853333333333 8.2133333333333 243.744 5.0666666666666C241.792 1.92 238.368 0 234.6666666666667 0z M128 256C86.048 256 42.6666666666667 224.0853333333333 42.6666666666667 170.6666666666667C42.6666666666667 121.6 112.4693333333333 49.8453333333333 120.4266666666667 41.8133333333333C122.432 39.7973333333333 125.152 38.6666666666667 128 38.6666666666667S133.568 39.7973333333333 135.5733333333333 41.8133333333333C143.5306666666667 49.8453333333333 213.3333333333333 121.6 213.3333333333333 170.6666666666667C213.3333333333333 224.0853333333333 169.952 256 128 256zM128 149.3333333333334C116.2133333333334 149.3333333333334 106.6666666666667 158.88 106.6666666666667 170.6666666666667C106.6666666666667 182.4533333333333 116.2133333333334 192 128 192S149.3333333333334 182.4533333333333 149.3333333333334 170.6666666666667C149.3333333333333 158.88 139.7866666666667 149.3333333333334 128 149.3333333333334z" />
<glyph glyph-name="support-16"
unicode="&#xEA53;"
horiz-adv-x="256" d=" M245.3333333333333 160H240.9173333333333C229.856 199.2533333333333 199.264 229.856 160 240.9173333333334V245.3333333333334C160 251.2213333333334 155.232 256 149.3333333333334 256H106.6666666666667C100.768 256 96 251.2213333333334 96 245.3333333333334V240.9173333333334C56.736 229.856 26.144 199.2533333333333 15.0826666666667 160H10.6666666666667C4.768 160 0 155.2213333333334 0 149.3333333333333V106.6666666666667C0 100.7786666666667 4.768 96 10.6666666666667 96H15.0826666666667C26.144 56.7466666666667 56.736 26.144 96 15.0826666666667V10.6666666666667C96 4.7786666666667 100.768 0 106.6666666666667 0H149.3333333333334C155.232 0 160 4.7786666666667 160 10.6666666666667V15.0826666666667C199.264 26.144 229.856 56.7466666666667 240.9173333333333 96H245.3333333333333C251.232 96 256 100.7786666666667 256 106.6666666666667V149.3333333333333C256 155.2213333333334 251.232 160 245.3333333333333 160zM128 85.3333333333333C104.4693333333333 85.3333333333333 85.3333333333333 104.4693333333333 85.3333333333333 128S104.4693333333333 170.6666666666667 128 170.6666666666667S170.6666666666667 151.5306666666667 170.6666666666667 128S151.5306666666667 85.3333333333333 128 85.3333333333333zM218.4746666666667 160H183.3386666666667C177.728 169.6746666666667 169.6746666666667 177.728 160 183.3386666666667V218.4746666666667C187.3813333333333 208.8533333333334 208.8533333333333 187.3813333333334 218.4746666666667 160zM96 218.4746666666667V183.3386666666667C86.3253333333333 177.728 78.272 169.6746666666667 72.6613333333333 160H37.5253333333333C47.1466666666667 187.3813333333334 68.6186666666667 208.8533333333334 96 218.4746666666667zM37.5253333333333 96H72.6613333333333C78.272 86.3253333333333 86.3253333333333 78.272 96 72.6613333333334V37.5253333333334C68.6186666666667 47.1466666666667 47.1466666666667 68.6186666666667 37.5253333333333 96zM160 37.5253333333334V72.6613333333334C169.6746666666667 78.272 177.728 86.336 183.3386666666667 96H218.4746666666667C208.8533333333333 68.6186666666667 187.3813333333333 47.1466666666667 160 37.5253333333334z" />
<glyph glyph-name="tablet-button"
unicode="&#xEA54;"
horiz-adv-x="256" d=" M213.3333333333333 256H42.6666666666667C25.024 256 10.6666666666667 241.6426666666667 10.6666666666667 224V32C10.6666666666667 14.3573333333333 25.024 0 42.6666666666667 0H213.3333333333333C230.976 0 245.3333333333333 14.3573333333333 245.3333333333333 32V224C245.3333333333333 241.6426666666667 230.976 256 213.3333333333333 256zM128 21.3333333333333C122.112 21.3333333333333 117.3333333333333 26.112 117.3333333333333 32S122.112 42.6666666666667 128 42.6666666666667S138.6666666666667 37.888 138.6666666666667 32S133.888 21.3333333333333 128 21.3333333333333zM224 74.6666666666667C224 68.7786666666667 219.2213333333334 64 213.3333333333334 64H42.6666666666667C36.7786666666667 64 32 68.7786666666667 32 74.6666666666667V213.3333333333334C32 219.2213333333334 36.7786666666667 224 42.6666666666667 224H213.3333333333333C219.2213333333333 224 224 219.2213333333334 224 213.3333333333334V74.6666666666667z" />
<glyph glyph-name="tag"
unicode="&#xEA55;"
horiz-adv-x="256" d=" M242.208 124.8746666666667L124.8746666666667 242.2080000000001C122.88 244.2026666666667 120.16 245.3333333333334 117.3333333333333 245.3333333333334H21.3333333333333C15.4453333333333 245.3333333333334 10.6666666666667 240.5546666666667 10.6666666666667 234.6666666666667V138.6666666666667C10.6666666666667 135.84 11.7866666666667 133.12 13.792 131.1253333333334L131.1253333333333 13.792C133.2053333333333 11.7013333333334 135.936 10.6666666666667 138.6666666666667 10.6666666666667S144.128 11.712 146.208 13.792L242.208 109.792C246.3786666666667 113.952 246.3786666666667 120.704 242.208 124.8746666666667zM74.6666666666667 160C62.88 160 53.3333333333333 169.5466666666667 53.3333333333333 181.3333333333334C53.3333333333333 193.12 62.88 202.6666666666667 74.6666666666667 202.6666666666667S96 193.12 96 181.3333333333334C96 169.5466666666667 86.4533333333333 160 74.6666666666667 160z" />
<glyph glyph-name="tie-bow"
unicode="&#xEA56;"
horiz-adv-x="256" d=" M128 74.6666666666667L128 74.6666666666667C116.2666666666667 74.6666666666667 106.6666666666667 84.2666666666667 106.6666666666667 96V160C106.6666666666667 171.7333333333334 116.2666666666667 181.3333333333333 128 181.3333333333333H128C139.7333333333334 181.3333333333333 149.3333333333334 171.7333333333334 149.3333333333334 160V96C149.3333333333333 84.2666666666667 139.7333333333333 74.6666666666667 128 74.6666666666667z M240 204.8C230.4 210.1333333333333 218.6666666666667 211.2 208 204.8L165.3333333333333 181.3333333333334C168.5333333333333 174.9333333333333 170.6666666666667 167.4666666666667 170.6666666666667 160V138.6666666666667H202.6666666666667V117.3333333333334H170.6666666666667V96C170.6666666666667 88.5333333333333 168.5333333333333 81.0666666666667 165.3333333333333 74.6666666666667L209.0666666666666 50.1333333333333C214.4 46.9333333333333 219.7333333333333 45.8666666666666 225.0666666666666 45.8666666666666C230.4 45.8666666666666 235.7333333333333 46.9333333333333 241.0666666666667 50.1333333333333C250.6666666666667 55.4666666666667 257.0666666666666 66.1333333333333 257.0666666666666 77.8666666666667V177.0666666666667C256 188.8 249.6 198.4 240 204.8z M85.3333333333333 117.3333333333334H53.3333333333333V138.6666666666667H85.3333333333333V160C85.3333333333333 167.4666666666667 87.4666666666667 174.9333333333333 90.6666666666667 181.3333333333333L48 204.8C38.4 210.1333333333333 25.6 210.1333333333333 16 204.8C6.4 198.4 0 188.8 0 177.0666666666667V78.9333333333333C0 67.2 6.4 57.6 16 51.2C21.3333333333333 48 26.6666666666667 46.9333333333333 32 46.9333333333333C37.3333333333333 46.9333333333333 42.6666666666667 48 48 51.2L90.6666666666667 74.6666666666667C87.4666666666667 81.0666666666667 85.3333333333333 88.5333333333334 85.3333333333333 96V117.3333333333334z" />
<glyph glyph-name="time-alarm"
unicode="&#xEA57;"
horiz-adv-x="256" d=" M244.2666666666667 158.9333333333333C246.4 160 248.5333333333334 161.0666666666667 249.6 163.2C253.8666666666667 172.8 256 182.4 256 192C256 227.2 227.2 256 192 256C176 256 161.0666666666667 249.6 149.3333333333334 238.9333333333334C147.2 236.8 146.1333333333334 234.6666666666667 146.1333333333334 232.5333333333334C189.8666666666667 227.2 227.2 198.4 244.2666666666667 158.9333333333333z M11.7333333333333 158.9333333333333C29.8666666666667 198.4 66.1333333333333 226.1333333333334 109.8666666666667 232.5333333333334C109.8666666666667 234.6666666666667 108.8 236.8 106.6666666666667 238.9333333333334C94.9333333333333 249.6 80 256 64 256C28.8 256 0 227.2 0 192C0 182.4 2.1333333333333 172.8 6.4 164.2666666666667C7.4666666666667 162.1333333333333 9.6 160 11.7333333333333 158.9333333333333z M231.4666666666667 18.1333333333333L210.1333333333333 39.4666666666667C225.0666666666666 57.6 234.6666666666667 81.0666666666667 234.6666666666667 106.6666666666667C234.6666666666667 165.3333333333333 186.6666666666666 213.3333333333333 128 213.3333333333333S21.3333333333333 165.3333333333334 21.3333333333333 106.6666666666667C21.3333333333333 81.0666666666667 29.8666666666667 57.6 45.8666666666667 39.4666666666667L24.5333333333333 18.1333333333334C20.2666666666667 13.8666666666667 20.2666666666667 7.4666666666667 24.5333333333333 3.2C26.6666666666667 1.0666666666667 28.8 0 32 0S37.3333333333333 1.0666666666667 39.4666666666667 3.2L60.8 24.5333333333333C78.9333333333333 8.5333333333334 102.4 0 128 0C153.6 0 177.0666666666667 8.5333333333333 195.2 24.5333333333333L216.5333333333333 3.2C218.6666666666667 1.0666666666667 221.8666666666667 0 224 0S229.3333333333334 1.0666666666667 231.4666666666667 3.2C235.7333333333334 7.4666666666667 235.7333333333334 13.8666666666667 231.4666666666667 18.1333333333333zM181.3333333333333 96H117.3333333333333V160H138.6666666666667V117.3333333333334H181.3333333333333V96z" />
<glyph glyph-name="trophy"
unicode="&#xEA58;"
horiz-adv-x="256" d=" M213.3333333333333 234.6666666666667V256H42.6666666666667V234.6666666666667H0V170.6666666666667C0 147.1406250666667 19.1354165333333 128 42.6666666666667 128H48.9492192C59.0195317333333 103.2167968 80.4055989333333 84.2721354666667 106.6666666666667 77.4752608V42.6666666666667H96C78.3541664 42.6666666666667 64 28.3125002666667 64 10.6666666666667V0H192V10.6666666666667C192 28.3125002666667 177.6458336 42.6666666666667 160 42.6666666666667H149.3333333333334V77.4752608C175.5944010666667 84.2721354666667 196.9804682666667 103.2167968 207.0507808 128H213.3333333333333C236.8645834666667 128 256 147.1406250666667 256 170.6666666666667V234.6666666666667H213.3333333333333zM42.6666666666667 149.3333333333334C30.9062496 149.3333333333334 21.3333333333333 158.9010421333333 21.3333333333333 170.6666666666667V213.3333333333334H42.6666666666667V160C42.6666666666667 156.380208 42.9680992 152.8359370666667 43.407552 149.3333333333333H42.6666666666667zM234.6666666666667 170.6666666666667C234.6666666666667 158.9010421333333 225.0937504 149.3333333333334 213.3333333333333 149.3333333333334H212.592448C213.0319008 152.8359370666667 213.3333333333333 156.380208 213.3333333333333 160V213.3333333333334H234.6666666666667V170.6666666666667z" />
<glyph glyph-name="tv-2"
unicode="&#xEA59;"
horiz-adv-x="256" d=" M181.3333333333333 32H74.6666666666667C68.7786666666667 32 64 27.2213333333333 64 21.3333333333333S68.7786666666667 10.6666666666667 74.6666666666667 10.6666666666667H181.3333333333333C187.2213333333333 10.6666666666667 192 15.4453333333333 192 21.3333333333333S187.2213333333333 32 181.3333333333333 32z M245.3333333333333 245.3333333333334H10.6666666666667C4.7786666666667 245.3333333333334 0 240.5546666666667 0 234.6666666666667V64C0 58.112 4.7786666666667 53.3333333333333 10.6666666666667 53.3333333333333H245.3333333333333C251.2213333333333 53.3333333333333 256 58.112 256 64V234.6666666666667C256 240.5546666666667 251.2213333333333 245.3333333333334 245.3333333333333 245.3333333333334zM234.6666666666667 74.6666666666667H21.3333333333333V224H234.6666666666667V74.6666666666667z" />
<glyph glyph-name="umbrella-13"
unicode="&#xEA5A;"
horiz-adv-x="256" d=" M245.28 129.056C239.6586666666667 185.7066666666667 194.6773333333333 229.2266666666667 138.6666666666667 234.1653333333334V256H117.3333333333333V234.1653333333334C61.3226666666667 229.2266666666667 16.3413333333333 185.7066666666667 10.72 129.056L9.5573333333333 117.3333333333334H246.4533333333333L245.28 129.056z M192 53.3333333333333C186.112 53.3333333333333 181.3333333333334 48.5546666666667 181.3333333333334 42.6666666666667C181.3333333333334 30.9013333333334 171.7653333333333 21.3333333333333 160 21.3333333333333S138.6666666666667 30.9013333333334 138.6666666666667 42.6666666666667V96H117.3333333333333V42.6666666666667C117.3333333333333 19.136 136.4693333333334 0 160 0S202.6666666666667 19.136 202.6666666666667 42.6666666666667C202.6666666666667 48.5546666666667 197.888 53.3333333333333 192 53.3333333333333z" />
<glyph glyph-name="user-run"
unicode="&#xEA5B;"
horiz-adv-x="256" d=" M170.6666666666667 224C170.6666666666667 206.3268880054146 184.9935546720813 192 202.6666666666667 192C220.3397786612521 192 234.6666666666667 206.3268880054146 234.6666666666667 224C234.6666666666667 241.6731119945854 220.3397786612521 256 202.6666666666667 256C184.9935546720813 256 170.6666666666667 241.6731119945854 170.6666666666667 224z M237.7916672 178.2083328L219.2916672 159.7083328C215.4322912 155.8645834666667 209.3333333333333 155.5364586666667 205.0833333333333 158.9218752L128.2395829333333 220.4010421333334C115.4947914666667 230.6041674666667 97.1770826666667 229.5885418666667 85.6249994666667 218.0416672L67.1249994666667 199.5416672C62.9583328 195.3750005333334 62.9583328 188.6250005333334 67.1249994666667 184.4583338666667S78.0416661333333 180.2916672 82.2083328 184.4583338666667L100.7083328 202.9583338666667C104.5520832 206.8177088 110.6510410666667 207.1406250666667 114.9166656 203.7447925333334L144.0332021333333 180.4498709333333L109.7916661333333 146.2083349333333C102.9843744 139.4010432 99.6249994666666 130.0052096 100.5729162666666 120.4270848S106.6614581333333 102.2968746666667 114.6666666666667 96.9583338666667L147.1666666666667 74.9583338666667L119.5 38.4427093333334C115.9427082666667 33.7447925333334 116.8645834666667 27.0572928 121.5572917333333 23.5000010666667C123.4843754666667 22.0364586666667 125.75 21.3333333333333 127.9895829333334 21.3333333333333C131.2187498666667 21.3333333333333 134.4062496 22.7916672 136.5 25.5572917333333L164 61.8541664C167.7239584 66.510416 169.3333333333334 72.5624992 168.4166666666667 78.4583328C167.5 84.3489578666667 164.1249994666667 89.6249994666667 159.1666666666667 92.9270826666667L126.5 114.7083328C123.8333333333333 116.4895829333334 122.119792 119.3385408 121.8020832 122.5312490666667C121.4895829333334 125.7239573333333 122.6093749333333 128.8541653333333 124.8749994666667 131.1249994666667L160.7923168 167.0423168L191.760416 142.2656245333333C197.640624 137.5572917333333 204.7031242666667 135.2395829333334 211.7447914666667 135.2395829333334C219.9687498666667 135.2395829333334 228.1562496 138.4062496 234.3749994666667 144.6249994666667L252.8749994666667 163.1249994666667C257.0416661333334 167.2916661333333 257.0416661333334 174.0416661333333 252.8749994666667 178.2083328S241.9583338666667 182.3749994666667 237.7916672 178.2083328z M67.1250005333333 103.5416661333333L3.1250005333333 39.5416661333333C-1.0416661333333 35.3749994666667 -1.0416661333333 28.6249994666667 3.1250005333333 24.4583328C5.2083328 22.3749994666667 7.9374997333333 21.3333333333333 10.6666666666667 21.3333333333333S16.1250005333333 22.3749994666667 18.2083328 24.4583338666667L82.2083328 88.4583338666667C86.3749994666667 92.6250005333333 86.3749994666667 99.3750005333333 82.2083328 103.5416672S71.2916672 107.7083328 67.1250005333333 103.5416661333333z" />
<glyph glyph-name="vector"
unicode="&#xEA5C;"
horiz-adv-x="256" d=" M99.68 177.3973333333333C54.5813333333333 164.9493333333334 21.3333333333333 123.6693333333333 21.3333333333333 74.6666666666667H42.6666666666667C42.6666666666667 121.7173333333333 80.9493333333333 160 128 160C115.616 160 105.0026666666667 167.104 99.68 177.3973333333333z M156.32 177.3973333333333C150.9973333333333 167.104 140.384 160 128 160C175.0506666666667 160 213.3333333333333 121.7173333333333 213.3333333333333 74.6666666666667H234.6666666666667C234.6666666666667 123.6693333333333 201.4186666666667 164.9493333333334 156.32 177.3973333333333z M32 181.3333333333334H97.9626666666667C96.768 184.6826666666667 96 188.2346666666667 96 192S96.768 199.3173333333334 97.9626666666667 202.6666666666667H32C26.112 202.6666666666667 21.3333333333333 197.888 21.3333333333333 192S26.112 181.3333333333334 32 181.3333333333334z M224 181.3333333333334C229.888 181.3333333333334 234.6666666666667 186.112 234.6666666666667 192S229.888 202.6666666666667 224 202.6666666666667H158.0373333333333C159.232 199.3173333333334 160 195.7653333333333 160 192S159.232 184.6826666666667 158.0373333333333 181.3333333333333H224z M0 192C0 180.2179253369431 9.5512586702764 170.6666666666667 21.3333333333333 170.6666666666667C33.1154079963903 170.6666666666667 42.6666666666667 180.2179253369431 42.6666666666667 192C42.6666666666667 203.7820746630569 33.1154079963903 213.3333333333334 21.3333333333333 213.3333333333334C9.5512586702764 213.3333333333334 0 203.7820746630569 0 192z M0 213.3333333333334H42.6666666666667V170.6666666666667H0V213.3333333333334z M213.3333333333333 213.3333333333334H256V170.6666666666667H213.3333333333333V213.3333333333334z M128 149.3333333333334C104.4693333333333 149.3333333333334 85.3333333333333 168.4693333333334 85.3333333333333 192S104.4693333333333 234.6666666666667 128 234.6666666666667S170.6666666666667 215.5306666666667 170.6666666666667 192S151.5306666666667 149.3333333333334 128 149.3333333333334zM128 213.3333333333334C116.2346666666667 213.3333333333334 106.6666666666667 203.7653333333333 106.6666666666667 192S116.2346666666667 170.6666666666667 128 170.6666666666667S149.3333333333334 180.2346666666667 149.3333333333334 192S139.7653333333333 213.3333333333334 128 213.3333333333334z M53.3333333333333 21.3333333333333H10.6666666666667C4.7786666666667 21.3333333333333 0 26.112 0 32V74.6666666666667C0 80.5546666666667 4.7786666666667 85.3333333333333 10.6666666666667 85.3333333333333H53.3333333333333C59.2213333333333 85.3333333333333 64 80.5546666666667 64 74.6666666666667V32C64 26.112 59.2213333333333 21.3333333333333 53.3333333333333 21.3333333333333z M245.3333333333333 21.3333333333333H202.6666666666667C196.7786666666667 21.3333333333333 192 26.112 192 32V74.6666666666667C192 80.5546666666667 196.7786666666667 85.3333333333333 202.6666666666667 85.3333333333333H245.3333333333333C251.2213333333333 85.3333333333333 256 80.5546666666667 256 74.6666666666667V32C256 26.112 251.2213333333333 21.3333333333333 245.3333333333333 21.3333333333333z" />
<glyph glyph-name="watch-time"
unicode="&#xEA5D;"
horiz-adv-x="256" d=" M224 192C224 207.6586666666667 212.6826666666667 220.6613333333334 197.8133333333333 223.4133333333333L191.68 247.9253333333334C190.496 252.672 186.2293333333333 256 181.3333333333333 256H74.6666666666667C69.7706666666667 256 65.504 252.672 64.32 247.9253333333334L58.1866666666667 223.4133333333333C43.3173333333333 220.6613333333334 32 207.6586666666667 32 192V64C32 48.3413333333333 43.3173333333333 35.3386666666667 58.1866666666667 32.5866666666667L64.3093333333333 8.0746666666667C65.504 3.328 69.7706666666667 0 74.6666666666667 0H181.3333333333333C186.2293333333333 0 190.496 3.328 191.68 8.0746666666667L197.8026666666667 32.5866666666667C212.6826666666667 35.3386666666667 224 48.3413333333334 224 64V96H245.3333333333334V160H224V192zM202.6666666666667 64C202.6666666666667 58.1226666666667 197.8773333333333 53.3333333333333 192 53.3333333333333H64C58.1226666666667 53.3333333333333 53.3333333333333 58.1226666666667 53.3333333333333 64V192C53.3333333333333 197.8773333333333 58.1226666666667 202.6666666666667 64 202.6666666666667H192C197.8773333333333 202.6666666666667 202.6666666666667 197.8773333333333 202.6666666666667 192V64z M138.6666666666667 181.3333333333334L117.3333333333333 181.3333333333334L117.3333333333333 117.3333333333334L181.3333333333333 117.3333333333334L181.3333333333333 138.6666666666667L138.6666666666667 138.6666666666667z" />
<glyph glyph-name="world"
unicode="&#xEA5E;"
horiz-adv-x="256" d=" M128 256C57.4186666666667 256 0 198.5813333333333 0 128S57.4186666666667 0 128 0S256 57.4186666666667 256 128S198.5813333333333 256 128 256zM128 21.3333333333333C101.3333333333333 21.3333333333333 76.9813333333333 31.2426666666667 58.2613333333333 47.4773333333334C58.3466666666667 47.616 58.464 47.7333333333334 58.5386666666667 47.872C76.16 77.3973333333333 65.0773333333333 95.4346666666667 56.896 103.5626666666667C54.7413333333333 105.7066666666667 52.2773333333333 107.6586666666667 49.7386666666667 109.6213333333333C43.104 114.7733333333334 38.7093333333333 118.176 38.7093333333333 128C38.7093333333333 132.6293333333333 41.2906666666667 134.4426666666667 54.0373333333333 138.7946666666667C62.8053333333333 141.792 72.736 145.184 79.1466666666667 153.472C94.0266666666667 172.7146666666667 77.664 202.3893333333334 74.2293333333333 208.1493333333334C72.4693333333333 211.104 70.56 213.8773333333334 68.576 216.5333333333333C84.608 227.328 103.744 233.7706666666667 124.3093333333333 234.4853333333334C127.6373333333333 228.8426666666667 133.1306666666667 224.0853333333333 138.528 219.4453333333334C143.136 215.4773333333333 150.4533333333333 213.8133333333333 154.2186666666667 209.12C156.3733333333333 206.432 155.328 201.248 155.4026666666667 197.856C155.552 191.1253333333334 159.6266666666666 181.3653333333333 173.3653333333333 181.3653333333333C173.9733333333333 181.3653333333333 174.6026666666666 181.3866666666667 175.2533333333333 181.4293333333333C180.5653333333333 181.8026666666667 197.1413333333333 185.6 213.8026666666666 191.104C226.8586666666667 173.3973333333333 234.6666666666667 151.616 234.6666666666667 128C234.6666666666667 69.184 186.816 21.3333333333333 128 21.3333333333333z M165.4826666666667 161.0346666666667C148.672 161.0346666666667 131.5093333333333 153.0453333333333 122.784 141.1626666666667C116.928 133.184 115.2213333333333 123.9573333333334 117.9733333333333 115.1786666666667C123.4666666666667 97.664 124 87.3386666666667 120.5653333333333 75.7653333333333C117.5146666666667 65.4826666666667 117.216 50.5706666666667 134.6346666666667 43.4666666666667C137.92 42.1226666666667 141.5253333333333 41.44 145.3226666666666 41.44C158.272 41.44 173.6 49.4506666666667 187.392 63.4346666666667C203.968 80.2346666666667 213.7173333333333 100.8213333333333 213.4826666666666 118.528C213.1626666666667 142.3573333333334 192.0746666666667 161.0346666666667 165.4826666666667 161.0346666666667z" />
<glyph glyph-name="zoom-split-in"
unicode="&#xEA5F;"
horiz-adv-x="256" d=" M210.208 60.8746666666667C206.0373333333333 65.0453333333334 199.296 65.0453333333334 195.1253333333334 60.8746666666667S190.9546666666667 49.9626666666667 195.1253333333334 45.792L227.1253333333334 13.792C229.2053333333334 11.712 231.936 10.6666666666667 234.6666666666667 10.6666666666667S240.128 11.712 242.208 13.792C246.3786666666667 17.9626666666667 246.3786666666667 24.704 242.208 28.8746666666667L210.208 60.8746666666667z M106.6666666666667 256C47.8506666666667 256 0 208.1493333333334 0 149.3333333333334S47.8506666666667 42.6666666666667 106.6666666666667 42.6666666666667S213.3333333333333 90.5173333333333 213.3333333333333 149.3333333333334S165.4826666666667 256 106.6666666666667 256zM149.3333333333333 138.6666666666667H117.3333333333333V106.6666666666667H96V138.6666666666667H64V160H96V192H117.3333333333333V160H149.3333333333333V138.6666666666667z" />
<glyph glyph-name="collection"
unicode="&#xEA60;"
horiz-adv-x="256" d=" M22 224L22 192L11 192L0 192L0 181.534L0 171.068L10.75 170.784L21.5 170.5L21.775 154.75L22.051 139L11.025 139L0 139L0 128L0 117L11.025 117L22.051 117L21.775 101.25L21.5 85.5L10.75 85.216L0 84.932L0 74.466L0 64L11 64L22 64L22 32L22 0L139 0L256 0L256 128L256 256L139 256L22 256L22 224M235 127.995L235 20.99L138.75 21.245L42.5 21.5L42.23 42.75L41.96 64L52.98 64L64 64L64 74.466L64 84.932L53.25 85.216L42.5 85.5L42.225 101.25L41.949 117L52.975 117L64 117L64 128L64 139L52.975 139L41.949 139L42.225 154.75L42.5 170.5L53.25 170.784L64 171.068L64 181.534L64 192L53 192L42 192L42 212.833C42 224.292 42.3 233.967 42.667 234.333C43.033 234.7 86.458 235 139.167 235L235 235L235 127.995M96 128L96 85L149 85L202 85L202 128L202 171L149 171L96 171L96 128M182 128L182 107L149.5 107L117 107L117 128L117 149L149.5 149L182 149L182 128" />
<glyph glyph-name="image"
unicode="&#xEA61;"
horiz-adv-x="256" d=" M0 128L0 11L128 11L256 11L256 128L256 245L128 245L0 245L0 128M235 171.441C235 129.656 234.744 119.037 233.75 119.64C232.497 120.401 186.403 158.598 182.333 162.249L180.166 164.193L148.462 127.096C131.024 106.693 116.35 90 115.853 90C115.356 90 103.722 99 90 110C76.278 121 64.575 130 63.994 130C63.412 130 54.063 122.888 43.218 114.196C32.373 105.504 22.938 98.052 22.25 97.637C21.255 97.036 21 109.858 21 160.441L21 224L128 224L235 224L235 171.441M101.217 201.79C94.355 200.773 89.484 198.189 84.334 192.833C78.207 186.461 75.763 181.031 75.244 172.642C74.637 162.822 77.446 155.424 84.435 148.435C91.424 141.446 98.822 138.637 108.642 139.244C132.89 140.743 146.408 167.943 132.981 188.215C126.076 198.64 114.202 203.715 101.217 201.79M114.077 178.077C116.367 175.787 117 174.257 117 171.011C117 165.83 115.745 163.437 112.02 161.51C107.141 158.987 103.227 159.573 99.4 163.4C95.578 167.222 94.987 171.14 97.5 176C99.47 179.809 101.579 180.933 106.827 180.97C110.299 180.994 111.731 180.423 114.077 178.077M209.49 112.147L235 90.794L235 61.397L235 32L128 32L21 32L21.015 50.75L21.03 69.5L42.004 86.25C53.54 95.463 63.449 103 64.025 103C64.601 103 72.818 96.793 82.286 89.208C91.754 81.622 103.827 71.987 109.115 67.796L118.731 60.177L150.428 97.151C167.861 117.487 182.542 133.984 183.053 133.813C183.563 133.641 195.46 123.891 209.49 112.147" />
<glyph glyph-name="shop"
unicode="&#xEA62;"
horiz-adv-x="256" d=" M34.245 209.497C12.648 166.291 11.003 162.622 11.036 157.747C11.133 143.439 18.248 129.336 28.597 122.94L32 120.837L32 60.418L32 0L74.5 0L117 0L117 26.5L117 53L128 53L139 53L139 26.5L139 0L181.5 0L224 0L224 60.418L224 120.837L227.403 122.94C237.752 129.336 244.867 143.439 244.964 157.747C244.997 162.622 243.352 166.291 221.755 209.497L198.51 256L128 256L57.49 256L34.245 209.497M204.907 196.187C223.169 159.623 224.25 157.146 223.564 153.437C222.445 147.398 219.973 142.955 216.58 140.886C212.251 138.246 203.786 138.351 199.337 141.101C195.802 143.286 192 149.431 192 152.96C192 154.881 191.4 155 181.707 155L171.415 155L170.254 150.658C169.472 147.737 167.767 145.119 165.043 142.658C161.37 139.34 160.46 139 155.247 139.004C146.467 139.009 140.689 143.395 139.078 151.275L138.418 154.5L128 154.5L117.582 154.5L116.922 151.275C115.311 143.395 109.533 139.009 100.753 139.004C95.54 139 94.63 139.34 90.957 142.658C88.233 145.119 86.528 147.737 85.746 150.658L84.585 155L74.293 155C64.287 155 64 154.937 63.995 152.75C63.988 149.586 59.934 143.255 56.442 140.953C52.487 138.346 43.642 138.311 39.42 140.886C36.049 142.941 33.186 148.08 32.271 153.716C31.747 156.944 33.75 161.463 51.082 196.165L70.479 235L128 235L185.521 235L204.907 196.187M78.317 125.614C85.924 119.913 92.23 117.851 101.95 117.885C109.8 117.912 115.707 119.827 122.696 124.612L127.893 128.17L132.602 124.93C139.805 119.974 146.284 117.889 154.481 117.889C163.912 117.889 170.158 120.158 180.205 127.232C181.597 128.213 182.332 128.056 184.205 126.378C188 122.98 193.223 120.22 198.25 118.957L203 117.763L203 69.381L203 21L181.5 21L160 21L160 48L160 75L128 75L96 75L96 48L96 21L74.5 21L53 21L53 69.381L53 117.763L57.669 118.938C62.601 120.18 70.011 124.103 72.038 126.545C73.683 128.527 74.614 128.389 78.317 125.614" />
<glyph glyph-name="ungroup"
unicode="&#xEA63;"
horiz-adv-x="256" d=" M11 160L11 75L43 75L75 75L75 43L75 11L160 11L245 11L245 96L245 181L213 181L181 181L181 213L181 245L96 245L11 245L11 160M160 160L160 96L96 96L32 96L32 160L32 224L96 224L160 224L160 160M224 96L224 32L160 32L96 32L96 53.5L96 75L138.5 75L181 75L181 117.5L181 160L202.5 160L224 160L224 96" />
<glyph glyph-name="world-2"
unicode="&#xEA64;"
horiz-adv-x="256" d=" M113.63 255.01C85.844 251.5 59.791 239.266 40.142 220.5C-13.081 169.67 -12.827 85.301 40.7 34.967C58.266 18.449 79.155 7.785 104.5 2.394C115.485 0.058 140.515 0.058 151.5 2.395C178.843 8.21 201.725 20.562 219.599 39.156C261.858 83.115 267.53 148.763 233.496 200C227.079 209.66 209.552 227.243 200.227 233.375C185.482 243.071 168.553 250.085 151.752 253.46C142.18 255.383 122.816 256.17 113.63 255.01M80.346 218.25C66.451 198.907 56.913 172.408 54.43 146.25L53.742 139L37.777 139L21.812 139L22.523 144.25C25.978 169.767 42.212 197.015 63.568 213.139C68.734 217.04 83.793 226 85.182 226C85.584 226 83.408 222.513 80.346 218.25M118 182.5L118 139L96.362 139L74.724 139L75.414 145.75C77.565 166.792 84.971 187.624 96.299 204.5C100.481 210.73 115.161 226 116.968 226C117.662 226 118 211.733 118 182.5M147.869 218.25C160.281 205.924 168.942 191.36 174.777 173C177.748 163.652 181 147.358 181 141.824L181 139L159.5 139L138 139L138 182.5C138 211.733 138.338 226 139.032 226C139.6 226 143.576 222.513 147.869 218.25M179.209 221.634C189.762 215.62 194.242 212.203 203.334 203.231C219.215 187.559 230.64 165.203 233.477 144.25L234.188 139L218.223 139L202.258 139L201.57 146.25C199.087 172.408 189.549 198.907 175.654 218.25C172.592 222.513 170.416 226 170.818 226C171.22 226 174.996 224.035 179.209 221.634M54.43 109.75C56.913 83.592 66.451 57.093 80.346 37.75C83.408 33.488 85.632 30 85.289 30C83.97 30 71.221 37.411 65.5 41.503C57.79 47.018 46.284 58.732 40.553 66.901C31.812 79.361 24.418 97.753 22.523 111.75L21.812 117L37.777 117L53.742 117L54.43 109.75M118 73.5C118 42.032 117.69 30 116.879 30C115.044 30 100.666 45.028 96.309 51.5C90.327 60.386 84.629 72.284 81.223 83C78.252 92.348 75 108.642 75 114.176L75 117L96.5 117L118 117L118 73.5M180.597 110.75C178.324 89.269 170.845 68.073 159.69 51.5C155.335 45.029 140.957 30 139.121 30C138.31 30 138 42.032 138 73.5L138 117L159.629 117L181.258 117L180.597 110.75M233.477 111.75C231.505 97.182 223.389 77.661 214.099 65.139C208.576 57.694 197.706 46.665 191.185 41.891C186.51 38.467 172.006 30 170.818 30C170.416 30 172.481 33.337 175.407 37.415C189.532 57.101 199.078 83.495 201.57 109.75L202.258 117L218.223 117L234.188 117L233.477 111.75" />
<glyph glyph-name="ui-04"
unicode="&#xEA65;"
horiz-adv-x="256" d=" M60.5 255.324C40.632 252.533 21.376 236.603 14.192 217.015C10.95 208.175 10.152 193.2 12.411 183.613C17.247 163.1 34.884 145.303 55.103 140.537C64.339 138.36 190.028 138.299 200.257 140.467C220.62 144.782 238.673 162.757 243.589 183.613C244.773 188.639 245.069 193.202 244.685 200.5C243.863 216.087 239.53 226.326 229.07 237.394C222.26 244.601 215.845 248.832 206 252.614L198.5 255.494L131 255.62C93.875 255.689 62.15 255.556 60.5 255.324M76.535 233.909C84.449 232.446 89.339 229.795 95.474 223.641C104.462 214.625 108.134 203.334 106.022 191.208C104.582 182.935 102.027 177.966 95.862 171.448C76.111 150.564 40.67 160.048 33.024 188.263C29.798 200.164 34.161 215.079 43.432 223.847C49.448 229.537 53.541 231.875 60.5 233.594C66.951 235.188 69.358 235.236 76.535 233.909M202 231.375C214.639 225.298 222.802 213.504 223.774 199.913C224.765 186.064 219.127 174.436 207.594 166.542C198.545 160.348 195.021 159.943 152.724 160.238L115.091 160.5L118.373 165.5C130.863 184.534 130.922 210.024 118.519 228.837C116.583 231.773 115 234.388 115 234.649C115 234.91 133.113 234.983 155.25 234.812L195.5 234.5L202 231.375M59 116.326C52.281 115.159 43.125 111.303 36.415 106.815C15.804 93.029 6.649 68.331 12.978 43.585C15.552 33.522 19.121 27.064 26.5 19.122C33.741 11.328 42.085 5.737 50.928 2.753C57.413 0.564 58.379 0.531 124.094 0.222C198.612 -0.129 199.271 -0.081 213 6.649C221.879 11.001 232.882 21.414 237.83 30.147C244.395 41.735 246.694 59.188 243.463 72.897C239.136 91.251 223.631 107.957 205.072 114.262C198.54 116.481 198.078 116.496 130 116.628C92.325 116.701 60.375 116.565 59 116.326M140.351 94.75C139.929 94.062 138.268 91.547 136.66 89.16C125.199 72.145 125.603 44.679 137.577 26.885C139.46 24.088 141 21.619 141 21.4C141 20.4 66.724 21.08 61.799 22.124C44.292 25.839 32.022 40.828 32.022 58.5C32.022 69.276 35.346 77.251 43.048 84.952C53.609 95.514 55.166 95.802 102.309 95.911C133.117 95.982 140.96 95.742 140.351 94.75M196.546 94.632C205.268 92.31 210.633 88.462 217.182 79.832C224.666 69.97 226.081 55.233 220.669 43.5C209.72 19.763 179.402 13.833 161.11 31.851C154.503 38.358 151.397 44.176 149.855 52.935C148.593 60.098 149.906 68.935 153.187 75.367C155.644 80.183 163.108 88.286 167.704 91.126C175.097 95.695 187.084 97.152 196.546 94.632" />
</font>
</defs>
</svg>

Before

Width:  |  Height:  |  Size: 123 KiB

View File

@ -50,75 +50,3 @@
},
};
</script>
<style>
.document-loading {
width: 1140px;
display: flex;
align-items: center;
justify-content: center;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
}
.document-loading div {
margin-top: unset;
margin-left: unset;
}
.current-tab {
background-color: #f6f9fc;
}
.current-tab-btn {
text-align: right;
padding: 0 40px;
}
.form-container {
flex-flow: row wrap;
}
.form-container .invalid-feedback {
position: absolute;
bottom: -18px;
}
.form-container .has-error {
position: relative;
margin-bottom: unset !important;
}
.form-container .has-error .form-control {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-right: 1px solid;
}
.el-step__icon {
-webkit-transition: unset;
transition: unset;
}
@media screen and (max-width: 991px) {
.form-container .has-error {
position: relative;
margin-bottom: 1.5rem !important;
}
.current-tab-btn {
padding: 0 15px;
}
.form-container {
flex-direction: column;
}
.form-container .form-group {
width: 100%;
}
}
</style>

View File

@ -7,14 +7,6 @@ window._ = require('lodash');
* code may be modified to fit the specific needs of your application.
*/
try {
if (!window.$) {
window.$ = window.jQuery = require('jquery');
}
//require('bootstrap-sass');
} catch (e) {}
/**
* We'll load the axios HTTP library which allows us to easily issue requests
* to our Laravel back-end. This library automatically handles sending the
@ -41,72 +33,3 @@ window.axios.defaults.headers.common['Content-Type'] = 'multipart/form-data';
// broadcaster: 'pusher',
// key: 'your-pusher-key'
// });
//(function ($) {
jQuery.fn.serializeFormJSON = function () {
var o = {};
var a = this.serializeArray();
$.each(a, function () {
if (o[this.name]) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
};
jQuery.fn.serializeFormJSONShow = function () {
var o = {};
var a = this.serializeArray();
$.each(a, function () {
if (o[this.name]) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(true);
} else {
o[this.name] = true;
}
});
return o;
};
jQuery.fn.serializeAll = function () {
var o = {};
var a = this;
$.each(this, function () {
if (o[this.name]) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
};
//})(jQuery);
jQuery(document).ready(function () {
jQuery('input[type="radio"]').each(function () {
if (jQuery(this).parent().parent().hasClass('radio-yes-no')) {
if (jQuery(this).val() == 1) {
jQuery(this).parent().trigger('click');
}
}
});
});

View File

@ -1,159 +0,0 @@
<template>
<div v-if="video || screenshots">
<el-carousel :height="height"
:initial-index="initial_index"
:trigger="trigger" :autoplay="autoplay"
:indicator-position="indicator_position"
:type="type" :loop="loop" :direction="direction"
:interval="interval" :arrow="arrow">
<el-carousel-item v-if="video">
<iframe class="carousel-frame w-100" height="365px"
:src="'https://www.youtube-nocookie.com/embed/' + video"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<div class="carousel-description py-2">
{{ name }}
</div>
</el-carousel-item>
<el-carousel-item v-for="(screenshot, index) in screenshots" :key="index">
<img @click="openGallery(index)" class="d-block w-100 carousel-frame" height="365px" :src="screenshot.path_string" :alt="screenshot.alt_attribute">
<div class="carousel-description py-2" v-if="screenshot.description">
{{ screenshot.description }}
</div>
<div class="carousel-description py-2" v-else>
{{ name }}
</div>
</el-carousel-item>
</el-carousel>
<LightBox
v-if="media.length"
ref="lightbox"
:media="media"
:show-caption="true"
:show-light-box="false"
/>
</div>
</template>
<script>
import Vue from 'vue';
import {Image, Carousel, CarouselItem} from 'element-ui';
import LightBox from 'vue-image-lightbox';
import 'vue-image-lightbox/dist/vue-image-lightbox.min.css';
import VueLazyLoad from 'vue-lazyload';
Vue.use(VueLazyLoad);
export default {
name: "akaunting-carousel",
components: {
[Image.name]: Image,
[Carousel.name]: Carousel,
[CarouselItem.name]: CarouselItem,
LightBox
},
props: {
name: {
type: String,
default: null,
description: "App Name"
},
video: {
type: String,
default: null,
description: "App Video"
},
screenshots: {
type: Array,
default: false,
description: "App Screenshots"
},
height: {
type: String,
default: null,
description: "height of the carousel"
},
initial_index: {
type: Number,
default: 0,
description: "index of the initially active slide (starting from 0)"
},
trigger: {
type: String,
default: 'hover',
description: "how indicators are triggered (hover/click)"
},
autoplay: {
type: Boolean,
default: false,
description: "whether automatically loop the slides"
},
interval: {
type: Number,
default: 3000,
description: "interval of the auto loop, in milliseconds"
},
indicator_position: {
type: String,
default: 'none',
description: "position of the indicators (outside/none)"
},
arrow: {
type: String,
default: 'hover',
description: "when arrows are shown (always/hover/never)"
},
type: {
type: String,
default: '',
description: "type of the Carousel (card)"
},
loop: {
type: Boolean,
default: true,
description: "display the items in loop"
},
direction: {
type: String,
default: 'horizontal',
description: "display direction (horizontal/vertical)"
}
},
mounted() {
let media = [];
if (this.screenshots.length) {
let name = this.name;
this.screenshots.forEach(function(screenshot) {
media.push({ // For image
thumb: screenshot.path_string,
src: screenshot.path_string,
caption: (screenshot.description.length) ? screenshot.description : name,
});
});
}
this.media = media;
},
data: function () {
return {
media: [],
}
},
methods: {
openGallery(index) {
this.$refs.lightbox.showImage(index)
}
}
}
</script>

View File

@ -0,0 +1,222 @@
<template>
<base-input :label="title" :name="name"
:readonly="readonly"
:disabled="disabled"
:class="[
{'readonly': readonly},
{'disabled': disabled},
formClasses
]"
:error="formError">
<div class="flex justify-between relative mt-1">
<input type="text" @change="change" :name="name" :id="name" v-model="color" @keyup="addColor" class="form-element">
<div class="absolute w-7 h-7 flex rounded-full my-auto bottom-2 right-2 cursor-pointer"
ref="dropdownMenu"
@click="openPalette"
:class="`bg-${color}`"
:style="{ backgroundColor: color }"
></div>
<transition name="fade">
<div v-show="isOpen" class="w-full border border-gray-300 origin-top-right absolute left-0 top-full mt-2 rounded-md shadow-lg z-10">
<div class="rounded-md bg-white shadow-xs p-2">
<div class="flex">
<div class="w-full flex flex-wrap justify-between">
<div v-for="color in colors" :key="color">
<div v-for="variant in variants"
:key="variant"
:colorId="`${color}-${variant}`"
class="rounded-full m-1 color cursor-pointer"
:class="[`bg-${color}-${variant}`, small ? 'w-6 h-6 lg:w-4 lg:h-4' : 'w-8 h-8 xl:w-6 xl:h-6 2xl:w-8 2xl:h-8']"
@click="setColor($event)"
></div>
</div>
</div>
</div>
</div>
</div>
</transition>
</div>
</base-input>
</template>
<script>
export default {
name: 'akaunting-color',
props: {
title: {
type: String,
default: '',
description: "Selectbox label text"
},
placeholder: {
type: String,
default: '',
description: "Selectbox input placeholder text"
},
formClasses: {
type: Array,
default: null,
description: "Selectbox input class name"
},
formError: {
type: String,
default: null,
description: "Selectbox input error message"
},
icon: {
type: String,
description: "Prepend icon (left)"
},
name: {
type: String,
default: null,
description: "Selectbox attribute name"
},
value: {
type: [String, Number, Array, Object],
default: '',
description: "Selectbox selected value"
},
model: {
type: [String, Number, Array, Object],
default: '',
description: "Selectbox selected model"
},
readonly: {
type: Boolean,
default: false,
description: "Selectbox disabled status"
},
disabled: {
type: Boolean,
default: false,
description: "Selectbox disabled status"
},
small: {
type: [Boolean, String],
default: false,
},
},
data() {
return {
isOpen: false,
color: 'green-500',
hexCode: null,
colors: [
'gray',
'red',
'yellow',
'green',
'blue',
'indigo',
'purple',
'pink',
],
variants: [
50,
100,
200,
300,
400,
500,
600,
700,
800,
900,
],
}
},
created () {
document.addEventListener('click', this.closeIfClickedOutside);
},
mounted() {
// Check Here..
if (this.value) {
this.color = this.value;
}
this.$emit('interface', this.color);
setTimeout(function() {
this.change();
}.bind(this), 800);
},
methods: {
change() {
this.$emit('interface', this.color);
this.$emit('change', this.color);
},
openPalette() {
this.isOpen = ! this.isOpen;
},
setColor(event) {
this.isOpen = false;
this.color = event.target.getAttribute('colorid');
this.hexCode = null;
},
addColor() {
let code = this.color;
this.hexCode = code.includes('#') ? code : '#' + code;
},
closeIfClickedOutside(event) {
let el = this.$refs.dropdownMenu;
let target = event.target;
if (el !== target && ! el.contains(target)) {
this.isOpen = false;
}
},
},
watch: {
color: function (value) {
this.change();
},
value: function (value) {
this.color = value;
},
model: function (value) {
this.color = value;
},
}
}
</script>
<style scoped>
.fade-enter-active, .fade-leave-active {
transition: opacity .2s
}
.fade-enter, .fade-leave-to
/* .fade-leave-active in <2.1.8 */
{
opacity: 0
}
</style>

View File

@ -1,35 +1,35 @@
<template>
<div class="document-add-info-content-info-business fs-exclude">
<div class="table-responsive">
<table class="table table-borderless p-0">
<div class="">
<div class="flex items-start">
<table>
<tbody>
<tr>
<th class="text-right p-0">
<strong class="text-strong">{{ company.name }}</strong>
<th class="text-left p-0">
<span class="font-medium text-left text-sm p-0">{{ company.name }}</span>
</th>
</tr>
<tr v-if="company.address">
<th class="text-right p-0">
<th class="font-normal text-sm text-left p-0">
{{ company.address }}
</th>
</tr>
<tr v-if="company.location">
<th class="text-right p-0">
<th class="font-normal text-sm text-left p-0">
{{ company.location }}
</th>
</tr>
<tr v-if="company.tax_number">
<th class="text-right p-0">
<th class="font-normal text-sm text-left p-0">
{{ taxNumberText }}: {{ company.tax_number }}
</th>
</tr>
<tr v-if="company.phone">
<th class="text-right p-0">
<th class="font-normal text-sm text-left p-0">
{{ company.phone }}
</th>
</tr>
<tr>
<th class="text-right p-0">
<th class="font-normal text-sm text-left p-0">
{{ company.email }}
</th>
</tr>
@ -37,7 +37,11 @@
</table>
</div>
<button type="button" class="btn btn-link text-right" @click="onEditCompany">{{ buttonText }}</button>
<div class="absolute right-0 top-0 group">
<div class="w-6 h-7 flex items-center justify-center rounded-lg p-0 group-hover:bg-gray-100">
<span class="material-icons-outlined text-lg opacity-70 group-hover:text-gray-500 cursor-pointer" @click="onEditCompany">edit</span>
</div>
</div>
<component v-bind:is="company_html" @submit="onSubmit" @cancel="onCancel"></component>
</div>
@ -51,7 +55,7 @@ import { Select, Option, OptionGroup, ColorPicker } from 'element-ui';
import AkauntingModalAddNew from './AkauntingModalAddNew';
import AkauntingModal from './AkauntingModal';
import AkauntingMoney from './AkauntingMoney';
import AkauntingRadioGroup from './forms/AkauntingRadioGroup';
import AkauntingRadioGroup from './AkauntingRadioGroup';
import AkauntingSelect from './AkauntingSelect';
import AkauntingDate from './AkauntingDate';
@ -74,11 +78,6 @@ export default {
},
props: {
buttonText: {
type: String,
default: 'Edit your business address ',
description: 'Input placeholder'
},
taxNumberText: {
type: String,
default: 'Tax Number',
@ -223,7 +222,7 @@ export default {
let documentClasses = document.body.classList;
documentClasses.remove("modal-open");
documentClasses.remove("overflow-hidden");
}
})
.catch(error => {
@ -240,7 +239,7 @@ export default {
let documentClasses = document.body.classList;
documentClasses.remove("modal-open");
documentClasses.remove("overflow-hidden");
},
},
};

View File

@ -0,0 +1,456 @@
<template>
<SlideYUpTransition :duration="animationDuration">
<div class="modal w-full h-full fixed top-0 left-0 right-0 z-50 overflow-y-auto overflow-hidden modal-add-new fade items-center justify-center"
:class="[{'show flex flex-wrap modal-background': show}, {'hidden': !show}]"
v-show="show"
tabindex="-1"
role="dialog"
:aria-hidden="!show">
<div class="w-full my-10 m-auto flex flex-col" :class="modalDialogClass ? modalDialogClass : 'max-w-screen-sm'">
<slot name="modal-content">
<div class="modal-content">
<div class="p-5 bg-body rounded-tl-lg rounded-tr-lg">
<div class="flex items-center justify-between border-b pb-5">
<slot name="card-header">
<h4 class="text-base font-medium">
{{ translations.title }}
</h4>
<button type="button" class="text-lg" @click="onCancel" aria-hidden="true">
<span class="rounded-md border-b-2 px-2 py-1 text-sm bg-gray-100">esc</span>
</button>
</slot>
</div>
</div>
<slot name="modal-body">
<div class="px-5 bg-body">
<template v-if="transaction">
<div class="flex flex-col items-start gap-y-3">
<div class="text-left text-sm">
<div class="font-medium">
{{ translations.contact }}
</div>
<span>
{{ transaction.contact.name }}
</span>
</div>
<div class="text-left text-sm">
<div class="font-medium">
{{ translations.category }}
</div>
<span>
{{ transaction.category.name }}
</span>
</div>
<div class="text-left text-sm">
<div class="font-medium">
{{ translations.account }}
</div>
<span>
{{ transaction.account.name }}
</span>
</div>
</div>
</template>
<div class="relative sm:col-span-6 mt-3">
<div style="table-layout: fixed;">
<div class="overflow-x-visible overflow-y-hidden">
<table class="w-full" id="items" style="table-layout: fixed">
<thead class="border-b">
<tr>
<th colspan="3" class="w-12/12 px-0 text-left border-t-0 border-r-0 border-b-0">
{{ translations.document }}
</th>
</tr>
</thead>
<colgroup>
<col style="width: 20%;">
<col style="width: 80%;">
</colgroup>
<tbody>
<tr v-for="(row, index) in form.items" :index="index" class="border-b border-gray-200">
<td class="px-0 border-r-0 border-b-0 truncate">
<div class="text-sm">
<div class="truncate">
<b>{{ translations.number }}:</b> {{ row.number }}
</div>
<div class="truncate" v-if="row.notes">
<b>{{ translations.notes }}:</b> {{ row.notes }}
</div>
</div>
<div class="row" style="font-size: 13px;">
<div class="col-md-12 long-texts">
<b>{{ translations.contact }}:</b> {{ row.contact }}
</div>
</div>
</td>
<td class="px-0 border-l-0 border-b-0 border-r-0">
<div class="flex items-center justify-end">
<akaunting-money
:col="''"
:masked="true"
name="amount"
title=""
:currency="currency"
:dynamic-currency="currency"
:value="row.amount"
:row-input="true"
:money-class="'text-right input-price'"
@input="checkAmount(index, $event)"
></akaunting-money>
<akaunting-money
class="hidden"
:masked="true"
name="max_amount"
title=""
:group_class="null"
:currency="currency"
v-model="row.max_amount"
:dynamic-currency="currency"
:row-input="true"
:disabled="true"
></akaunting-money>
<div class="pl-2 group">
<button type="button" @click="onDeleteItem(index)" class="w-6 h-7 flex items-center rounded-lg p-0 group-hover:bg-gray-100">
<span class="w-full material-icons-outlined text-lg text-gray-300 group-hover:text-gray-500">delete</span>
</button>
</div>
</div>
</td>
</tr>
<tr id="addItem">
<td colspan="3" class="w-12/12 p-0">
<akaunting-document-button
:items="documents"
:selectedItems="form.items"
:dynamic-currency="currency"
@document-selected="onAddItem($event)"
:no-data-text="translations.no_data"
:placeholder="translations.placeholder_search"
:add-item-text="translations.add_an"
></akaunting-document-button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="sm:col-span-6">
<div class="overflow-y-hidden py-5">
<table id="totals" class="float-right">
<colgroup>
<col style="width: 51.5%;">
<col style="width: 30%;">
<col style="width: 18.5%;">
</colgroup>
<tbody id="document-total-rows">
<tr id="tr-total">
<td class="border-t-0 p-0"></td>
<td class="font-medium text-sm text-right border-r-0 border-b-0 align-middle py-0 pr-0">
{{ translations.total }}
</td>
<td class="text-sm text-right border-b-0 p-0">
<div>
<money
:name="'total_amount'"
:value="total_amount"
v-bind="money"
masked
disabled
class="px-0 disabled-money text-right banking-price-text"
style="height: unset;"
></money>
</div>
</td>
</tr>
<tr id="tr-transaction-amount">
<td class="border-t-0 p-0"></td>
<td class="font-medium text-sm text-right border-r-0 border-b-0 align-middle py-0 pr-0">
{{ translations.transaction + ' ' + translations.amount }}
</td>
<td class="text-sm text-right border-b-0 p-0">
<div>
<money
:name="'transaction_amount'"
:value="transaction.amount"
v-bind="money"
masked
disabled
class="px-0 disabled-money text-right banking-price-text"
style="height: unset;"
v-if="transaction"
></money>
</div>
<akaunting-money
class="hidden"
:masked="true"
name="transaction_amount"
title=""
:group_class="null"
:currency="currency"
:value="transaction_amount"
@input="transaction_amount = $event"
:dynamic-currency="currency"
:row-input="true"
:disabled="true"
></akaunting-money>
</td>
</tr>
<tr id="tr-difference">
<td class="border-t-0 p-0"></td>
<td class="font-medium text-sm text-right border-r-0 border-b-0 align-middle py-0 pr-0">
{{ translations.difference }}
</td>
<td class="text-right text-sm border-b-0 p-0">
<div>
<money
:name="'difference_amount'"
:value="difference_amount"
v-bind="money"
masked
disabled
class="px-0 disabled-money text-right banking-price-text"
style="height: unset;"
></money>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</slot>
<div class="p-5 bg-body rounded-bl-lg rounded-br-lg border-gray-300">
<slot name="card-footer">
<div class="flex items-center justify-end">
<button type="button" class="px-6 py-1.5 mr-2 hover:bg-gray-200 rounded-lg" @click="onCancel">
{{ translations.cancel }}
</button>
<button type="button"
:disabled="this.difference_amount != 0 || (this.difference_amount == 0 && form.loading)"
class="relative px-6 py-1.5 bg-green hover:bg-green-700 text-white rounded-lg disabled:bg-green-100"
@click="onConfirm"
>
<i
v-if="form.loading"
class="animate-submit delay-[0.28s] absolute w-2 h-2 rounded-full left-0 right-0 -top-3.5 m-auto before:absolute before:w-2 before:h-2 before:rounded-full before:animate-submit before:delay-[0.14s] after:absolute after:w-2 after:h-2 after:rounded-full after:animate-submit before:-left-3.5 after:-right-3.5 after:delay-[0.42s]"
>
</i>
<span :class="[{'opacity-0': this.difference_amount != 0}]">{{ translations.save }}</span>
</button>
</div>
</slot>
</div>
</div>
</slot>
</div>
</div>
</SlideYUpTransition>
</template>
<script>
import { SlideYUpTransition } from "vue2-transitions";
import AkauntingSelect from './AkauntingSelect';
import AkauntingMoney from './AkauntingMoney';
import AkauntingDocumentButton from './AkauntingDocumentButton';
import {Money} from 'v-money';
export default {
name: 'akaunting-connect-transactions',
components: {
SlideYUpTransition,
AkauntingSelect,
AkauntingMoney,
AkauntingDocumentButton,
Money,
},
props: {
show: Boolean,
transaction: Object,
currency: Object,
documents: Array,
translations: Object,
modalDialogClass: {
type: String,
default: '',
description: "Modal Body size Class"
},
animationDuration: {
type: Number,
default: 800,
description: "Modal transition duration"
},
},
data() {
return {
form: {
items: [],
loading: false,
},
transaction_amount: "",
money: {},
};
},
mounted() {
window.addEventListener('keyup',(e) => {
if (e.key === 'Escape') {
this.onCancel();
}
});
},
methods: {
onConfirm() {
this.form.loading = true;
this.$emit("confirm");
this.onConnectTransaction();
},
onCancel() {
this.$emit('close-modal');
},
onAddItem(document) {
this.form.items.push(
Object.assign({}, {
id: document.id,
document_id: document.id,
number: document.document_number,
contact: document.contact_name,
notes: document.notes,
amount: (document.amount - document.paid).toFixed(this.currency.precision),
max_amount: (document.amount - document.paid).toFixed(this.currency.precision),
})
);
},
onDeleteItem(index) {
this.form.items.splice(index, 1);
},
async onConnectTransaction() {
let self = this;
let connect_transaction = Promise.resolve(window.axios.post(url + '/banking/transactions/' + this.transaction.id + '/connect', {
data: {
items: this.form.items
}
}));
connect_transaction.then(response => {
if (response.data.redirect) {
window.location.href = response.data.redirect;
}
})
.catch(error => {
})
.finally(function () {
self.$emit("close-modal");
});
},
convertMoneyToFloat(money) {
// "$198.4"
if (typeof(money) != "string") {
money = money.toString();
}
// 198.4
money = money.replace(this.currency.symbol, '').replaceAll(this.currency.thousands_separator, '').replace(this.currency.decimal_mark, '.');
// "198.40"
money = parseFloat(money).toFixed(this.currency.precision);
// 198.40
return parseFloat(money);
},
checkAmount(index, amount) {
let max_amount = this.convertMoneyToFloat(this.form.items[index].max_amount);
let changed_amount = this.convertMoneyToFloat(amount);
this.form.items[index].amount = changed_amount.toFixed(this.currency.precision);
setTimeout(function () {
if (changed_amount > max_amount || changed_amount == 0) {
this.form.items[index].amount = max_amount.toFixed(this.currency.precision);
}
}.bind(this), 50);
}
},
watch: {
show: function (newValue) {
if (newValue) {
this.form.items = [];
}
},
transaction: function (transaction) {
this.transaction_amount = transaction.amount;
},
currency: function (currency) {
this.money = {
decimal: currency.decimal_mark,
thousands: currency.thousands_separator,
prefix: (currency.symbol_first) ? currency.symbol : '',
suffix: (!currency.symbol_first) ? currency.symbol : '',
precision: parseInt(currency.precision),
};
}
},
computed: {
total_amount: function () {
let amount = 0;
this.form.items.forEach(function(item) {
amount += this.convertMoneyToFloat(item.amount);
}, this);
return parseFloat(amount.toFixed(this.currency.precision));
},
difference_amount: function () {
if (!this.transaction_amount) {
return 0;
}
let transaction_amount = this.convertMoneyToFloat(this.transaction_amount);
return parseFloat((this.total_amount - transaction_amount).toFixed(this.currency.precision));
}
},
}
</script>

View File

@ -1,122 +1,110 @@
<template>
<div :id="'select-contact-card-' + _uid" class="document-add-body-form-contact ml-3">
<div class="document-contact" :class="[{'fs-exclude': show.contact_selected}]">
<div class="document-contact-without-contact">
<div v-if="!show.contact_selected" class="document-contact-without-contact-box-contact-select fs-exclude">
<div class="aka-select aka-select--medium is-open" tabindex="0">
<div>
<div class="aka-box aka-box--large" :class="[{'aka-error': error}]">
<div class="aka-box-content">
<div class="document-contact-without-contact-box">
<button type="button" class="btn-aka-link aka-btn--fluid document-contact-without-contact-box-btn" @click="onContactList">
<i class="far fa-user fa-2x"></i> &nbsp; <span class="text-add-contact"> {{ addContactText }} </span>
</button>
</div>
</div>
</div>
<div :id="'select-contact-card-' + _uid">
<div class="relative" :class="[{'fs-exclude': show.contact_selected}]">
<div v-if="!show.contact_selected">
<div class="aka-select aka-select--medium is-open" tabindex="0">
<div class="w-full h-33 bg-white hover:bg-gray-100 rounded-lg border border-light-gray disabled:bg-gray-200 mt-1 text-purple font-medium" :class="[{'border-red': error}]">
<div class="text-black h-full">
<button type="button" class="w-full h-full flex flex-col items-center justify-center" @click="onContactList">
<span class="material-icons-outlined text-7xl text-black-400">person_add</span>
<span class="text-add-contact"> {{ addContactText }} </span>
</button>
</div>
</div>
<div v-if="error" class="invalid-feedback d-block mt--2 mb-2"
v-html="error">
</div>
<div v-if="error" class="text-red text-sm mt-1 block mb-2"
v-html="error">
</div>
<div class="absolute top-0 left-0 right-0 bg-white border rounded-lg" style="z-index: 999;" v-if="show.contact_list">
<div class="relative">
<span class="material-icons-round absolute left-4 top-3 text-lg">search</span>
<input
type="text"
data-input="true"
class="form-element px-10 border-t-0 border-l-0 border-r-0 border-gray-200 rounded-none"
autocapitalize="default" autocorrect="ON"
:placeholder="placeholder"
:ref="'input-contact-field-' + _uid"
v-model="search"
@input="onInput"
@keyup.enter="onInput"
/>
</div>
<div class="aka-select-menu" v-if="show.contact_list">
<div class="aka-select-search-container">
<span class="aka-prefixed-input aka-prefixed-input--fluid">
<div class="input-group input-group-merge">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fa fa-search"></i>
</span>
</div>
<input
type="text"
data-input="true"
class="form-control"
autocapitalize="default" autocorrect="ON"
:placeholder="placeholder"
:ref="'input-contact-field-' + _uid"
v-model="search"
@input="onInput"
@keyup.enter="onInput"
/>
</div>
</span>
<ul class="form-element p-0 border-0 mt-0 cursor-pointer">
<div class="hover:bg-gray-100 px-4 py-2" v-for="(contact, index) in sortContacts" :key="index" @click="onContactSeleted(index, contact.id)">
<span>{{ contact.name }}</span>
</div>
<ul class="aka-select-menu-options">
<div class="aka-select-menu-option" v-for="(contact, index) in sortContacts" :key="index" @click="onContactSeleted(index, contact.id)">
<div>
<strong class="text-strong"><span>{{ contact.name }}</span></strong>
</div>
<div class="hover:bg-gray-100 px-4 py-2" v-if="!sortContacts.length">
<div>
<span v-if="!contacts.length && !search">{{ noDataText }}</span>
<span v-else>{{ noMatchingDataText }}</span>
</div>
<div class="aka-select-menu-option" v-if="!sortContacts.length">
<div>
<strong class="text-strong" v-if="!contacts.length && !search"><span>{{ noDataText }}</span></strong>
<strong class="text-strong" v-else><span>{{ noMatchingDataText }}</span></strong>
</div>
</div>
</ul>
<div class="aka-select-footer" tabindex="0" @click="onContactCreate">
<span>
<i class="fas fa-plus"></i> {{ createNewContactText }}
</span>
</div>
</ul>
<div class="flex items-center justify-center h-11 text-center text-purple font-bold border border-l-0 border-r-0 border-b-0 rounded-bl-lg rounded-br-lg hover:bg-gray-100 cursor-pointer" tabindex="0" @click="onContactCreate">
<span class="text-sm"> {{ createNewContactText }} </span>
</div>
</div>
</div>
</div>
<div v-else class="document-contact-with-contact-bill-to">
<div>
<span class="aka-text aka-text--block-label">{{ contactInfoText }}</span>
</div>
<div v-else class="document-contact-with-contact-bill-to">
<div>
<span class="text-sm">{{ contactInfoText }}</span>
</div>
<div class="table-responsive">
<table class="table table-borderless p-0">
<tbody>
<tr>
<th class="p-0" style="text-align:left;">
<strong class="d-block">{{ contact.name }}</strong>
</th>
</tr>
<tr v-if="contact.address">
<th class="p-0" style="text-align:left; white-space: normal;">
<div class="overflow-x-visible mt-0">
<table class="table table-borderless p-0">
<tbody>
<tr>
<th class="font-medium text-left text-sm p-0">
<span class="block">{{ contact.name }}</span>
</th>
</tr>
<tr v-if="contact.address">
<th class="font-normal text-xs text-left p-0">
<div class="w-60 truncate">
{{ contact.address }}
</th>
</tr>
<tr v-if="contact.location">
<th class="p-0" style="text-align:left; white-space: normal;">
{{ contact.location }}
</th>
</tr>
<tr v-if="contact.tax_number">
<th class="p-0" style="text-align:left;">
{{ taxNumberText }}: {{ contact.tax_number }}
</th>
</tr>
<tr v-if="contact.phone">
<th class="p-0" style="text-align:left;">
{{ contact.phone }}
</th>
</tr>
<tr v-if="contact.email">
<th class="p-0" style="text-align:left;">
{{ contact.email }}
</th>
</tr>
</tbody>
</table>
</div>
</div>
</th>
</tr>
<tr v-if="contact.location">
<th class="font-normal text-xs text-left p-0">
{{ contact.location }}
</th>
</tr>
<tr v-if="contact.tax_number">
<th class="font-normal text-xs text-left p-0">
{{ taxNumberText }}: {{ contact.tax_number }}
</th>
</tr>
<tr v-if="contact.phone">
<th class="font-normal text-xs text-left p-0">
{{ contact.phone }} &nbsp;
<span v-if="contact.email">
- {{ contact.email }}
</span>
</th>
</tr>
</tbody>
</table>
</div>
<button type="button" class="btn btn-link p-0" @click="onContactEdit">
{{ editContactText.replace(':contact_name', contact.name).replace(':field', contact.name) }}
</button>&nbsp;&nbsp;
<button type="button" class="btn btn-link p-0" @click="onContactList">
{{ chooseDifferentContactText }}
<div class="absolute flex flex-col mt-2">
<button type="button" class="p-0 text-xs text-purple ltr:text-left rtl:text-right" @click="onContactEdit">
<span class="border-b border-transparent transition-all hover:border-purple">
{{ editContactText.replace(':contact_name', contact.name).replace(':field', contact.name) }}
</span>
</button>
<button type="button" class="p-0 text-xs text-purple ltr:text-left rtl:text-right" @click="onContactList">
<span class="border-b border-transparent transition-all hover:border-purple">
{{ chooseDifferentContactText }}
</span>
</button>
</div>
</div>
@ -134,7 +122,7 @@ import { Select, Option, OptionGroup, ColorPicker } from 'element-ui';
import AkauntingModalAddNew from './AkauntingModalAddNew';
import AkauntingModal from './AkauntingModal';
import AkauntingMoney from './AkauntingMoney';
import AkauntingRadioGroup from './forms/AkauntingRadioGroup';
import AkauntingRadioGroup from './AkauntingRadioGroup';
import AkauntingSelect from './AkauntingSelect';
import AkauntingDate from './AkauntingDate';
@ -204,7 +192,7 @@ export default {
description: 'List of Contacts'
},
contacts: {
type: Array,
type: [Array, Object],
default: () => [],
description: 'List of Contacts'
},
@ -539,7 +527,7 @@ export default {
let documentClasses = document.body.classList;
documentClasses.remove("modal-open");
documentClasses.remove("overflow-hidden");
}
})
.catch(error => {
@ -556,7 +544,7 @@ export default {
let documentClasses = document.body.classList;
documentClasses.remove("modal-open");
documentClasses.remove("overflow-hidden");
},
closeIfClickedOutside(event) {
@ -666,10 +654,3 @@ export default {
},
};
</script>
<style>
.aka-error, .aka-error:hover {
border-color: #ef3232 !important;
background-color: #fb634038;
}
</style>

View File

@ -1,31 +1,16 @@
<template>
<div class="countdown">
<section class="flex text-6xl justify-center content-center">
<div class="days mr-2 relative">
{{ displayDays}}
<div class="label text-sm absolut bottom-0"> {{ textDays }} </div>
</div>
<div>
<section class="flex text-xl justify-center content-center">
<div class="days mr-2 relative"> {{ displayDays}} </div>
<span class="leading-snug">:</span>
<div class="hours mx-2 relative">
{{ displayHours }}
<div class="label text-sm absolut bottom-0">{{ textHours }} </div>
</div>
<div class="hours mx-2 relative"> {{ displayHours }} </div>
<span class="leading-snug">:</span>
<div class="minutes mx-2 relative">
{{ displayMinutes }}
<div class="label text-sm absolut bottom-0"> {{ textMinutes }} </div>
</div>
<div class="minutes mx-2 relative"> {{ displayMinutes }} </div>
<span class="leading-snug">:</span>
<div class="seconds ml-2 relative">
{{ displaySeconds }}
<div class="label text-sm absolut bottom-0"> {{ textSeconds }} </div>
</div>
<div class="seconds ml-2 relative"> {{ displaySeconds }} </div>
</section>
</div>
</template>
@ -42,24 +27,6 @@ export default {
description: "Modal header title"
},
textHours: {
type: String,
default: 'hours',
description: "Modal header title"
},
textMinutes: {
type: String,
default: 'minutes',
description: "Modal header title"
},
textSeconds: {
type: String,
default: 'seconds',
description: "Modal header title"
},
year: {
type: Number,
default: 0,
@ -172,30 +139,3 @@ export default {
}
</script>
<style scoped>
.countdown {
text-align: justify;
}
.relative {
position: relative;
}
.flex {
display: flex;
}
.justify-center {
justify-content: center;
}
.content-center {
align-content: center;
}
.seconds {
max-width: 60px;
}
.leading-snug {
line-height: 1.375;
}
.days, .hours, .minutes, .seconds {
text-align: center;
}
</style>

View File

@ -1,5 +1,5 @@
<template>
<div class="d-flex align-items-center justify-content-end mt-3">
<div class="flex items-center justify-end text-xs mt-3">
<span>{{ texts[0] }}</span>
<money v-bind="{
decimal: this.currencySymbol.decimal_mark,
@ -8,9 +8,9 @@
suffix: (!this.currencySymbol.symbol_first) ? this.currencySymbol.symbol : '',
precision: parseInt(this.currencySymbol.precision),
masked: true
}" :value="price" disabled size="5" masked class="disabled-money text-right mr-2 js-conversion-input"></money>
}" :value="price" disabled size="5" masked class="disabled-money text-right mr-1 js-conversion-input text-xs px-1"></money>
<span class="mr-2">{{ texts[1] }}</span>
<input name="currency_rate" v-model="rate" @input="onChange" class="form-control text-right mwpx-100 h-auto js-conversion-input" />
<input name="currency_rate" v-model="rate" @input="onChange" class="form-element w-16 h-10 text-right js-conversion-input" />
</div>
</template>

View File

@ -9,7 +9,7 @@
formClasses
]"
:footer-error="formError"
:prependIcon="icon"
:appendIcon="icon"
:readonly="readonly"
:disabled="disabled"
@focus="focus"
@ -19,7 +19,7 @@
@on-open="focus"
@on-close="blur"
:config="dateConfig"
class="form-control datepicker"
class="form-element datepicker"
v-model="real_model"
@input="change"
:readonly="readonly"
@ -135,6 +135,7 @@ export default {
if (this.locale !== 'en') {
try {
const lang = require(`flatpickr/dist/l10n/${this.locale}.js`).default[this.locale];
this.dateConfig.locale = lang;
}
catch (e) {
@ -148,6 +149,7 @@ export default {
if (this.model) {
this.real_model = this.model;
}
this.$emit('interface', this.real_model);
},

View File

@ -0,0 +1,299 @@
<template>
<div :id="'select-item-button-' + _uid" class="w-full border-b">
<button type="button" class="w-full h-10 flex items-center justify-center text-purple font-medium disabled:bg-gray-200 hover:bg-gray-100" @click="showItems">
<span class="material-icons-outlined text-base font-bold ltr:mr-1 rtl:ml-1">
add
</span>
{{ addItemText }}
</button>
<div :class="[{'is-open': show.item_list}]" tabindex="-1">
<div class="-mt-10.5 left-0 right-0 bg-white border rounded-lg" v-if="show.item_list">
<div class="relative">
<span class="material-icons-round absolute left-4 top-3 text-lg">search</span>
<input
type="text"
data-input="true"
class="form-element px-10 border-t-0 border-l-0 border-r-0 border-gray-200 rounded-none"
autocapitalize="default"
autocorrect="ON"
:placeholder="placeholder"
v-model="search"
@input="onInput"
:ref="'input-item-field-' + _uid"
/>
</div>
<ul class="form-element p-0 mt-0 border-0 cursor-pointer">
<div
class="hover:bg-gray-100 px-4"
v-for="(item, index) in sortedItems"
:key="index"
@click="onItemSelected(item)"
>
<div class="w-full flex items-center justify-between">
<span>{{ item.name }}</span>
<money
:name="'item-id-' + item.id"
:value="item.amount"
v-bind="money"
masked
disabled
class="text-right disabled-money text-gray"
></money>
</div>
</div>
<div class="hover:bg-gray-100 text-center py-2 px-4" v-if="!sortedItems.length">
<div class="text-center">
<span>{{ noDataText }}</span>
</div>
</div>
</ul>
</div>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import {Money} from 'v-money';
export default {
name: 'akaunting-document-button',
components: {
Money,
},
props: {
placeholder: {
type: String,
default: 'Type an item name',
description: 'Input placeholder'
},
items: {
type: Array,
default: () => [],
description: 'List of Items'
},
selectedItems: {
type: Array,
default: () => [],
description: 'List of Selected Items'
},
addItemText: {
type: String,
default: 'Add an item',
description: ""
},
noDataText: {
type: String,
default: 'No Data',
description: "Selectbox empty options message"
},
dynamicCurrency: {
type: Object,
default: function () {
return {
decimal_mark: '.',
thousands_separator: ',',
symbol_first: 1,
symbol: '$',
precision: 2,
};
},
description: "Dynamic currency"
},
currency: {
type: Object,
default: function () {
return {
decimal_mark: '.',
thousands_separator: ',',
symbol_first: 1,
symbol: '$',
precision: 2,
};
},
description: "Default currency"
},
},
data() {
return {
item_list: [],
search: '', // search column model
show: {
item_list: false,
},
money: {
decimal: this.currency.decimal_mark,
thousands: this.currency.thousands_separator,
prefix: (this.currency.symbol_first) ? this.currency.symbol : '',
suffix: (!this.currency.symbol_first) ? this.currency.symbol : '',
precision: parseInt(this.currency.precision),
masked: this.masked
}
};
},
created() {
this.setItemList(this.items);
},
mounted() {
if (this.dynamicCurrency.code != this.currency.code) {
if (!this.dynamicCurrency.decimal) {
this.money = {
decimal: this.dynamicCurrency.decimal_mark,
thousands: this.dynamicCurrency.thousands_separator,
prefix: (this.dynamicCurrency.symbol_first) ? this.dynamicCurrency.symbol : '',
suffix: (!this.dynamicCurrency.symbol_first) ? this.dynamicCurrency.symbol : '',
precision: parseInt(this.dynamicCurrency.precision),
masked: this.masked
};
} else {
this.money = this.dynamicCurrency;
}
}
},
methods: {
setItemList(items) {
this.item_list = [];
// Option set sort_option data
if (Array.isArray(items)) {
items.forEach(function (item, index) {
let selected = this.selectedItems.find(function (selected_item) {
return selected_item.id === item.id;
}, this);
if (selected) {
return;
}
this.item_list.push({
id: item.id,
name: item.document_number + ' | ' + item.contact_name + (item.notes ? ' | ' + item.notes : ''),
amount: item.amount,
});
}, this);
}
},
showItems() {
this.show.item_list = true;
setTimeout(function() {
this.$refs['input-item-field-' + this._uid].focus();
}.bind(this), 100);
},
onInput() {
//to optimize performance we kept the condition that checks for if search exists or not
if (!this.search) {
return;
}
//condition that checks if input is below the given character limit
this.setItemList(this.items); //once the user deletes the search input, we show the overall item list
this.sortItems(); // we order it as wanted
this.$emit('input', this.search); // keep the input binded to v-model
},
onItemSelected(param_item) {
let selected_item = this.items.find(function (item) {
return item.id === param_item.id
}, this);
this.$emit('document-selected', selected_item);
this.show.item_list = false;
this.search = '';
// Set default item list
this.setItemList(this.items);
},
closeIfClickedOutside(event) {
if (!document.getElementById('select-item-button-' + this._uid).contains(event.target)) {
this.show.item_list = false;
this.search = '';
document.removeEventListener('click', this.closeIfClickedOutside);
this.setItemList(this.items);
}
},
sortItems() {
this.item_list.sort(function (a, b) {
var nameA = a.name.toUpperCase(); // ignore upper and lowercase
var nameB = b.name.toUpperCase(); // ignore upper and lowercase
if (nameA < nameB) {
return -1;
}
if (nameA > nameB) {
return 1;
}
// names must be equal
return 0;
});
const sortedItemList = this.item_list.filter(item =>
item.name.toLowerCase().includes(this.search.toLowerCase())
);
return sortedItemList;
},
},
computed: {
sortedItems() {
return this.sortItems();
},
},
watch: {
dynamicCurrency: function (currency) {
if (!currency) {
return;
}
this.money = {
decimal: currency.decimal_mark,
thousands: currency.thousands_separator,
prefix: (currency.symbol_first) ? currency.symbol : '',
suffix: (!currency.symbol_first) ? currency.symbol : '',
precision: parseInt(currency.precision),
masked: this.masked
};
},
show: {
handler: function(newValue) {
if (newValue) {
document.addEventListener('click', this.closeIfClickedOutside);
}
},
deep: true
},
items: function (items) {
this.setItemList(items);
},
selectedItems: function () {
this.setItemList(this.items);
}
},
};
</script>

View File

@ -1,5 +1,5 @@
<template>
<div :id="'dropzone-' + _uid" class="dropzone mb-3 dz-clickable" :class="[preview == 'single' ? 'dropzone-single': 'dropzone-multiple']">
<div :id="'dropzone-' + _uid" class="dropzone dz-clickable" :class="[preview == 'single' ? 'dropzone-single': 'dropzone-multiple', singleWidthClasses ? 'w-full': 'w-37']">
<div class="fallback">
<div class="custom-file">
<input type="file" class="custom-file-input" :id="'projectCoverUploads' + _uid" :multiple="multiple">
@ -11,39 +11,40 @@
<div v-if="preview == 'single'" class="dz-preview dz-preview-single" :class="previewClasses" ref="previewSingle">
<div class="dz-preview-cover">
<img class="dz-preview-img" data-dz-thumbnail>
<i class="fas fa-file-image display-3 fa-2x mt-2 d-none" data-dz-thumbnail-image></i>
<i class="far fa-file-pdf display-3 fa-2x mt-2 d-none" data-dz-thumbnail-pdf></i>
<i class="far fa-file-word fa-2x mt-2 d-none" data-dz-thumbnail-word></i>
<i class="far fa-file-excel fa-2x mt-2 d-none" data-dz-thumbnail-excel></i>
<span class="mb-1 d-none" data-dz-name>...</span>
<span class="material-icons hidden" data-dz-thumbnail-image>crop_original</span>
<span class="material-icons-outlined avatar hidden">file_present</span>
<span class="material-icons-outlined avatar hidden" data-dz-thumbnail-pdf>picture_as_pdf</span>
<span class="material-icons-outlined avatar hidden" data-dz-thumbnail-word>content_paste</span>
<span class="material-icons-outlined avatar hidden" data-dz-thumbnail-excel>table_chart</span>
<span class="mb-1 text-sm ml-3 text-gray-500 hidden" data-dz-name>...</span>
</div>
</div>
<ul v-else class="dz-preview dz-preview-multiple list-group list-group-lg list-group-flush" :class="previewClasses" ref="previewMultiple">
<li class="list-group-item px-0">
<div class="row align-items-center">
<div class="col-auto">
<li class="list-group-item border-b py-4">
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="avatar">
<img class="avatar-img rounded" data-dz-thumbnail>
<i class="fas fa-file-image display-3 d-none" data-dz-thumbnail-image></i>
<i class="far fa-file-pdf display-3 d-none" data-dz-thumbnail-pdf></i>
<i class="far fa-file-word d-none" data-dz-thumbnail-word></i>
<i class="far fa-file-excel d-none" data-dz-thumbnail-excel></i>
<span class="material-icons hidden" data-dz-thumbnail-image>crop_original</span>
<span class="material-icons-outlined display-3 hidden" data-dz-thumbnail-pdf>picture_as_pdf</span>
<span class="material-icons-outlined hidden" data-dz-thumbnail-word>content_paste</span>
<span class="material-icons-outlined hidden" data-dz-thumbnail-excel>table_chart</span>
</div>
<div class="col text-gray-500 ml-3">
<h4 class="text-sm mb-1" data-dz-name>...</h4>
<p class="text-xs text-muted mb-0" data-dz-size>...</p>
</div>
</div>
<div class="col ml--3">
<h4 class="mb-1" data-dz-name>...</h4>
<p class="small text-muted mb-0" data-dz-size>...</p>
</div>
<div class="col-auto">
<div class="gap-x-1">
<button data-dz-remove="true" class="btn btn-danger btn-sm">
<i class="fas fa-trash"></i>
<span class="material-icons text-base text-red">delete</span>
</button>
<a href="#" type="button" class="btn btn-sm btn-info text-white d-none" data-dz-download>
<i class="fas fa-file-download"></i>
<a href="#" type="button" class="btn btn-sm btn-info hidden" data-dz-download>
<span class="material-icons-round text-base">download</span>
</a>
</div>
</div>
@ -72,7 +73,7 @@ export default {
description: 'Choose file text'
},
options: {
type: Object,
type: [Object, Array],
default: () => ({})
},
value: [String, Object, Array, File],
@ -86,6 +87,10 @@ export default {
description: 'Multiple file Upload'
},
previewClasses: [String, Object, Array],
singleWidthClasses: {
type: [Boolean, String],
default: false
},
preview: {
type: String,
default: function () {
@ -146,17 +151,17 @@ export default {
if (file.type.indexOf("image") == -1) {
let ext = file.name.split('.').pop();
file.previewElement.querySelector("[data-dz-thumbnail]").classList.add("d-none");
file.previewElement.querySelector("[data-dz-name]").classList.remove("d-none");
file.previewElement.querySelector("[data-dz-thumbnail]").classList.add("hidden");
file.previewElement.querySelector("[data-dz-name]").classList.remove("hidden");
if (ext == "pdf") {
file.previewElement.querySelector("[data-dz-thumbnail-pdf]").classList.remove("d-none");
file.previewElement.querySelector("[data-dz-thumbnail-pdf]").classList.remove("hidden");
} else if ((ext.indexOf("doc") != -1) || (ext.indexOf("docx") != -1)) {
file.previewElement.querySelector("[data-dz-thumbnail-word]").classList.remove("d-none");
file.previewElement.querySelector("[data-dz-thumbnail-word]").classList.remove("hidden");
} else if ((ext.indexOf("xls") != -1) || (ext.indexOf("xlsx") != -1)) {
file.previewElement.querySelector("[data-dz-thumbnail-excel]").classList.remove("d-none");
file.previewElement.querySelector("[data-dz-thumbnail-excel]").classList.remove("hidden");
} else {
file.previewElement.querySelector("[data-dz-thumbnail-image]").classList.remove("d-none");
file.previewElement.querySelector("[data-dz-thumbnail-image]").classList.remove("hidden");
}
}
}),
@ -208,7 +213,7 @@ export default {
self.files.forEach(async (attachment) => {
if (attachment.download) {
attachment.previewElement.querySelector("[data-dz-download]").href = attachment.download;
attachment.previewElement.querySelector("[data-dz-download]").classList.remove("d-none");
attachment.previewElement.querySelector("[data-dz-download]").classList.remove("hidden");
}
});
@ -253,7 +258,7 @@ export default {
this.files.forEach(async (attachment) => {
if (attachment.download) {
attachment.previewElement.querySelector("[data-dz-download]").href = attachment.download;
attachment.previewElement.querySelector("[data-dz-download]").classList.remove("d-none");
attachment.previewElement.querySelector("[data-dz-download]").classList.remove("hidden");
}
});
@ -271,4 +276,7 @@ export default {
</script>
<style>
.avatar.hidden {
display: none;
}
</style>

View File

@ -1,11 +1,12 @@
<template>
<div class="item-columns-edit">
<i class="fas fa-pencil-alt"></i>&nbsp;
<div class="item-columns-edit group">
<button
type="button"
class="btn-aka-link"
@click="onEditItemColumns">
{{ editColumn.text }}
class="w-6 h-7 flex items-center rounded-lg p-0 group-hover:bg-gray-100"
style="color: rgb(136, 152, 170);"
@click="onEditItemColumns"
>
<span class="material-icons-outlined w-full text-lg text-gray-300 group-hover:text-gray-500">edit</span>
</button>
<component v-bind:is="edit_html" @submit="onSubmit" @cancel="onCancel"></component>
@ -164,7 +165,7 @@ export default {
let documentClasses = document.body.classList;
documentClasses.remove("modal-open");
documentClasses.remove("overflow-hidden");
},
},
};

View File

@ -1,105 +1,53 @@
<template>
<div class="quill">
<div :id="toolbarId">
<div class="ql-formats">
<button class="ql-bold"></button>
<button class="ql-italic"></button>
<button class="ql-underline"></button>
<button class="ql-link"></button>
<button class="ql-blockquote"></button>
<button type="button" class="ql-list" value="ordered"></button>
<button type="button" class="ql-list" value="bullet"></button>
</div>
</div>
<div :id="editorId" :name="name" class="" ref="editor">
</div>
<div>
<vue-editor :id="editorId" v-model="content" :editorToolbar="customToolbar" :disabled="disabled"></vue-editor>
</div>
</template>
<script>
import Quill from 'quill';
//var Block = Quill.import('blots/block');
//Block.tagName = 'div';
//Quill.register(Block);
import { VueEditor } from "vue2-editor";
export default {
name: 'akaunting-html-editor',
components: {
VueEditor
},
props: {
name: String,
name: {
type: String,
default: '',
description: 'The name of the field',
},
value: {
type: String,
default: ''
},
theme: {
type: String,
default: 'snow'
model: {
type: [String, Number, Array, Object],
default: '',
description: "Selectbox selected model"
},
readonly: {
disabled: {
type: Boolean,
default: false
default: false,
description: "Selectbox disabled status"
},
},
data () {
return {
editor: null,
editorValue: this.value,
content: null,
lastHtmlValue: '',
editorId: null,
toolbarId: null
customToolbar: [
["bold", "italic", "underline"],
[{ list: "ordered" }, { list: "bullet" }],
],
}
},
methods: {
initialize (Quill) {
let theme = this.theme;
this.editor = new Quill(`#${this.editorId}`, {
theme: theme,
modules: {
toolbar: `#${this.toolbarId}`
},
readOnly: this.readonly
});
if (this.editorValue.length > 0) {
this.editorValue = this.editorValue.replace(new RegExp('<p><br></p>', 'g'), '<p>&nbsp;</p>');
this.editor.pasteHTML(this.editorValue);
}
let editorRef = this.$refs.editor;
let node = editorRef.children[0];
this.editor.on('text-change', () => {
let html = node.innerHTML;
if (html === '<p><br></p>') {
html = '';
} else {
html = html.replace(new RegExp('<p><br></p>', 'g'), '<p>&nbsp;</p>');
}
this.content = html;
this.$emit('input', this.content);
});
},
pasteHTML () {
if (!this.editor) {
return;
}
this.editorValue = this.editorValue.replace(new RegExp('<p><br></p>', 'g'), '<p>&nbsp;</p>');
this.editor.pasteHTML(this.editorValue);
},
randomString() {
let text = "";
let possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
@ -113,26 +61,21 @@ export default {
},
async mounted () {
this.content = this.editorValue;
this.editorId = this.randomString();
this.toolbarId = this.randomString();
this.$nextTick(() => {
this.initialize(Quill)
});
this.content = this.value;
},
watch: {
value (newVal) {
if (newVal !== this.content) {
this.pasteHTML(newVal);
this.content = newVal;
}
},
editorValue (newVal) {
model (newVal) {
if (newVal !== this.content) {
this.pasteHTML(newVal);
this.content = newVal;
}
},

View File

@ -1,81 +1,62 @@
<template>
<div :id="'select-item-button-' + _uid" class="product-select">
<div class="item-add-new">
<button type="button" class="btn btn-link w-100" @click="showItems">
<i class="fas fa-plus-circle"></i> &nbsp; {{ addItemText }}
</button>
</div>
<div :id="'select-item-button-' + _uid" class="w-full border-b">
<button type="button" class="w-full h-10 flex items-center justify-center text-purple font-medium disabled:bg-gray-200 hover:bg-gray-100" @click="showItems">
<span class="material-icons-outlined text-base font-bold ltr:mr-1 rtl:ml-1">add</span>
{{ addItemText }}
</button>
<div class="aka-select aka-select--fluid" :class="[{'is-open': show.item_list}]" tabindex="-1">
<div class="aka-select-menu" v-if="show.item_list">
<div class="aka-select-search-container">
<span class="aka-prefixed-input aka-prefixed-input--fluid">
<div class="input-group input-group-merge">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fa fa-search"></i>
</span>
</div>
<div :class="[{'is-open': show.item_list}]" tabindex="-1">
<div class="-mt-10.5 left-0 right-0 bg-white border rounded-lg" v-if="show.item_list">
<div class="relative">
<span class="material-icons-round absolute left-4 top-3 text-lg">search</span>
<input
type="text"
data-input="true"
class="form-element px-10 border-t-0 border-l-0 border-r-0 border-gray-200 rounded-none"
autocapitalize="default"
autocorrect="ON"
:placeholder="placeholder"
v-model="search"
@input="onInput"
:ref="'input-item-field-' + _uid"
@keydown.enter="inputEnterEvent"
/>
</div>
<input
type="text"
data-input="true"
class="form-control"
autocapitalize="default"
autocorrect="ON"
:placeholder="placeholder"
v-model="search"
@input="onInput"
:ref="'input-item-field-' + _uid"
@keydown.enter="inputEnterEvent"
/>
</div>
</span>
</div>
<ul class="aka-select-menu-options">
<ul class="form-element p-0 mt-0 border-0 cursor-pointer">
<div
class="aka-select-menu-option"
class="hover:bg-gray-100 px-4"
v-for="(item, index) in sortedItems"
:key="index"
:class="isItemMatched ? 'highlightItem' : ''"
@click="onItemSelected(item)"
>
<div class="item-select w-100">
<div class="item-select-column item-select-info w-75">
<b class="item-select-info-name"><span>{{ item.name }}</span></b>
</div>
<div class="w-full flex items-center justify-between">
<span>{{ item.name }}</span>
<div class="item-select-column item-select-price w-25">
<money
:name="'item-id-' + item.id"
:value="item.price"
v-bind="money"
masked
disabled
class="text-right disabled-money"
></money>
</div>
<money
:name="'item-id-' + item.id"
:value="item.price"
v-bind="money"
masked
disabled
class="text-right disabled-money text-gray"
></money>
</div>
</div>
<div class="aka-select-menu-option" v-if="!sortedItems.length">
<div>
<strong class="text-strong" v-if="!items.length && !search">
<span>{{ noDataText }}</span>
</strong>
<div class="hover:bg-gray-100 text-center py-2 px-4" v-if="!sortedItems.length">
<div class="text-center">
<span v-if="!items.length && !search">{{ noDataText }}</span>
<strong class="text-strong" v-else>
<span>{{ noMatchingDataText }}</span>
</strong>
<span v-else>{{ noMatchingDataText }}</span>
</div>
</div>
</ul>
<div class="aka-select-footer" @click="onItemCreate">
<span>
<i class="fas fa-plus"></i> &nbsp; {{ createNewItemText }}
</span>
<div class="flex items-center justify-center h-11 text-center text-purple font-bold border border-l-0 border-r-0 border-b-0 rounded-bl-lg rounded-br-lg hover:bg-gray-100 cursor-pointer" @click="onItemCreate">
<span class="material-icons text-lg font-bold mr-1">add</span>
{{ createNewItemText }}
</div>
</div>
</div>
@ -91,7 +72,7 @@ import {Money} from 'v-money';
import AkauntingModalAddNew from './AkauntingModalAddNew';
import AkauntingModal from './AkauntingModal';
import AkauntingMoney from './AkauntingMoney';
import AkauntingRadioGroup from './forms/AkauntingRadioGroup';
import AkauntingRadioGroup from './AkauntingRadioGroup';
import AkauntingSelect from './AkauntingSelect';
import AkauntingDate from './AkauntingDate';
@ -149,7 +130,7 @@ export default {
},
addItemText: {
type: String,
default: 'Add an item',
default: 'Add New Item',
description: ""
},
createNewItemText: {
@ -204,6 +185,7 @@ export default {
return {
item_list: [],
selected_items: [],
changeBackground: true,
search: '', // search column model
show: {
item_selected: false,
@ -361,6 +343,7 @@ export default {
const indexeditem = { ...item, index: this.currentIndex };
this.addItem(indexeditem, 'oldItem');
this.changeBackground = false;
},
addItem(item, itemType) {
@ -390,7 +373,7 @@ export default {
price: 0,
tax_ids: [],
};
this.newItems.push(item);
this.addItem(item, 'newItem');
@ -461,7 +444,7 @@ export default {
let documentClasses = document.body.classList;
documentClasses.remove("modal-open");
documentClasses.remove("overflow-hidden");
}
})
.catch(error => {
@ -480,7 +463,7 @@ export default {
let documentClasses = document.body.classList;
documentClasses.remove("modal-open");
documentClasses.remove("overflow-hidden");
},
closeIfClickedOutside(event) {
@ -524,7 +507,6 @@ export default {
sortedItems() {
return this.sortItems();
},
currentIndex() {
return this.$root.form.items.length;
},
@ -560,6 +542,6 @@ export default {
<style scoped>
.highlightItem:first-child {
background-color: #F5F7FA;
background-color: #F5F7FA;
}
</style>

View File

@ -1,37 +1,43 @@
<template>
<SlideYUpTransition :duration="animationDuration">
<div class="modal fade"
<div class="modal fade w-full h-full fixed top-0 left-0 right-0 z-50 overflow-y-auto overflow-hidden modal-add-new fade items-center justify-center"
@click.self="closeModal"
:class="[{'show d-block': show}, {'d-none': !show}]"
:class="[{'show flex flex-wrap modal-background': show}, {'hidden': !show}]"
v-show="show"
tabindex="-1"
role="dialog"
:aria-hidden="!show">
<div class="modal-dialog" :class="modalDialogClass">
<div class="w-full my-10 m-auto flex flex-col" :class="modalDialogClass ? modalDialogClass : 'max-w-screen-sm'">
<slot name="modal-content">
<div class="modal-content">
<div class="card-header pb-2">
<slot name="card-header">
<h4 class="float-left"> {{ title }} </h4>
<div class="p-5 bg-body rounded-tl-lg rounded-tr-lg">
<div class="flex items-center justify-between border-b pb-5">
<slot name="card-header">
<h4 class="text-base font-medium">
{{ title }}
</h4>
<button type="button" class="close" @click="onCancel" aria-hidden="true">&times;</button>
</slot>
<button type="button" class="text-lg" @click="onCancel" aria-hidden="true">
<span class="rounded-md border-b-2 px-2 py-1 text-sm bg-gray-100">esc</span>
</button>
</slot>
</div>
</div>
<slot name="modal-body">
<div class="modal-body" v-html="message">
</div>
<div class="py-1 px-5 bg-body" v-html="message"></div>
</slot>
<div class="card-footer border-top-0 pt-0">
<div class="p-5 bg-body rounded-bl-lg rounded-br-lg border-gray-300">
<slot name="card-footer">
<div class="float-right">
<button type="button" class="btn btn-outline-secondary" @click="onCancel">
{{ button_cancel }}
<div class="flex items-center justify-end">
<button type="button" class="px-6 py-1.5 ltr:mr-2 rtl:ml-2 hover:bg-gray-200 rounded-lg" @click="onCancel">
{{ button_cancel }}
</button>
<button :disabled="form.loading" type="button" class="btn btn-danger button-submit" @click="onConfirm">
<div class="aka-loader"></div><span>{{ button_delete }}</span>
<button :disabled="form.loading" type="button" class="relative flex items-center justify-center bg-red hover:bg-red-700 px-6 py-1.5 text-base rounded-lg disabled:opacity-50 text-white" @click="onConfirm">
<i v-if="form.loading" class="animate-submit delay-[0.28s] absolute w-2 h-2 rounded-full left-0 right-0 -top-3.5 m-auto before:absolute before:w-2 before:h-2 before:rounded-full before:animate-submit before:delay-[0.14s] after:absolute after:w-2 after:h-2 after:rounded-full after:animate-submit before:-left-3.5 after:-right-3.5 after:delay-[0.42s]"></i>
<span :class="[{'opacity-0': form.loading}]">{{ button_delete }}</span>
</button>
</div>
</slot>
@ -45,7 +51,7 @@
<script>
import { SlideYUpTransition } from "vue2-transitions";
import AkauntingRadioGroup from './forms/AkauntingRadioGroup';
import AkauntingRadioGroup from './AkauntingRadioGroup';
import AkauntingSelect from './AkauntingSelect';
import AkauntingDate from './AkauntingDate';
import AkauntingRecurring from './AkauntingRecurring';
@ -64,7 +70,9 @@ export default {
},
props: {
show: Boolean,
show: {
type: Boolean,
},
modalDialogClass: {
type: String,
default: '',
@ -94,7 +102,7 @@ export default {
type: Number,
default: 800,
description: "Modal transition duration"
}
},
},
data() {
@ -112,8 +120,22 @@ export default {
if (this.show) {
let documentClasses = document.body.classList;
documentClasses.add("modal-open");
documentClasses.add("overflow-hidden");
}
if (this.modalDialogClass) {
let modal_size = this.modalDialogClass.replace('modal-', 'max-w-screen-');
this.modalDialogClass = modal_size;
}
},
mounted() {
window.addEventListener('keyup',(e) => {
if (e.key === 'Escape') {
this.onCancel();
}
});
},
methods: {
@ -131,7 +153,7 @@ export default {
onCancel() {
let documentClasses = document.body.classList;
documentClasses.remove("modal-open");
documentClasses.remove("overflow-hidden");
this.$emit("cancel");
}
@ -142,21 +164,11 @@ export default {
let documentClasses = document.body.classList;
if (val) {
documentClasses.add("modal-open");
documentClasses.add("overflow-hidden");
} else {
documentClasses.remove("modal-open");
documentClasses.remove("overflow-hidden");
}
}
}
}
</script>
<style>
.modal.show {
background-color: rgba(0, 0, 0, 0.3);
}
.modal-md {
max-width: 650px;
}
</style>
</script>

View File

@ -1,45 +1,52 @@
<template>
<SlideYUpTransition :duration="animationDuration">
<div class="modal modal-add-new fade"
<div class="modal w-full h-full fixed top-0 left-0 right-0 z-50 overflow-y-auto overflow-hidden modal-add-new fade items-center justify-center"
@click.self="closeModal"
:class="[{'show d-block': show}, {'d-none': !show}]"
:class="[{'show flex flex-wrap modal-background': show}, {'hidden': !show}]"
v-show="show"
tabindex="-1"
role="dialog"
:aria-hidden="!show">
<div class="modal-dialog" :class="modalDialogClass">
<div class="w-full my-10 m-auto flex flex-col" :class="modalDialogClass ? modalDialogClass : 'max-w-screen-sm'">
<slot name="modal-content">
<div class="modal-content">
<div class="card-header pb-2">
<slot name="card-header">
<h4 class="float-left"> {{ title }} </h4>
<button type="button" class="close" @click="onCancel" aria-hidden="true">&times;</button>
</slot>
<div class="p-5 bg-body rounded-tl-lg rounded-tr-lg">
<div class="flex items-center justify-between border-b pb-5">
<slot name="card-header">
<h4 class="text-base font-medium">
{{ title }}
</h4>
<button type="button" class="text-lg" @click="onCancel" aria-hidden="true">
<span class="rounded-md border-b-2 px-2 py-1 text-sm bg-gray-100">esc</span>
</button>
</slot>
</div>
</div>
<slot name="modal-body">
<div class="modal-body pb-0" v-if="!is_component" v-html="message">
</div>
<div class="modal-body pb-0" v-else>
<div class="py-1 px-5 bg-body" v-if="!is_component" v-html="message"></div>
<div class="py-1 px-5 bg-body" v-else>
<form id="form-create" method="POST" action="#"/>
<component v-bind:is="component"></component>
</div>
</slot>
<div class="card-footer border-top-0 pt-0">
<div class="p-5 bg-body rounded-bl-lg rounded-br-lg border-gray-300">
<slot name="card-footer">
<div class="float-right">
<button type="button" class="btn btn-outline-secondary" :class="buttons.cancel.class" @click="onCancel">
<div class="flex items-center justify-end">
<button type="button" class="px-6 py-1.5 mr-2 hover:bg-gray-200 rounded-lg" :class="buttons.cancel.class" @click="onCancel">
{{ buttons.cancel.text }}
</button>
<a v-if="buttons.payment" :href="buttons.payment.url" class="btn btn-white" :class="buttons.payment.class">
<a v-if="buttons.payment" :href="buttons.payment.url" class="px-3 py-1.5 mb-3 sm:mb-0 text-xs bg-transparent hover:bg-transparent font-medium leading-6 ltr:mr-2 rtl:ml-2" :class="buttons.payment.class">
{{ buttons.payment.text }}
</a>
<button :disabled="form.loading" type="button" class="btn button-submit" :class="buttons.confirm.class" @click="onSubmit">
<div class="aka-loader"></div><span>{{ buttons.confirm.text }}</span>
<button :disabled="form.loading" type="button" class="relative px-6 py-1.5 bg-green hover:bg-green-700 text-white rounded-lg" :class="buttons.confirm.class" @click="onSubmit">
<i v-if="form.loading" class="animate-submit delay-[0.28s] absolute w-2 h-2 rounded-full left-0 right-0 -top-3.5 m-auto before:absolute before:w-2 before:h-2 before:rounded-full before:animate-submit before:delay-[0.14s] after:absolute after:w-2 after:h-2 after:rounded-full after:animate-submit before:-left-3.5 after:-right-3.5 after:delay-[0.42s]"></i>
<span :class="[{'opacity-0': form.loading}]">{{ buttons.confirm.text }}</span>
</button>
</div>
</slot>
@ -57,7 +64,7 @@ import Vue from 'vue';
import { SlideYUpTransition } from "vue2-transitions";
import AkauntingModal from './AkauntingModal';
import AkauntingMoney from './AkauntingMoney';
import AkauntingRadioGroup from './forms/AkauntingRadioGroup';
import AkauntingRadioGroup from './AkauntingRadioGroup';
import AkauntingSelect from './AkauntingSelect';
import AkauntingSelectRemote from './AkauntingSelectRemote';
import AkauntingDate from './AkauntingDate';
@ -83,7 +90,6 @@ export default {
props: {
show: Boolean,
modalDialogClass: '',
is_component: Boolean,
title: {
@ -108,7 +114,7 @@ export default {
},
confirm: {
text: 'Save',
class: 'btn-success',
class: 'disabled:bg-green-100',
}
};
},
@ -119,7 +125,13 @@ export default {
type: Number,
default: 800,
description: "Modal transition duration"
}
},
modalDialogClass: {
type: String,
default: '',
description: "Modal Body size Class"
},
},
data() {
@ -142,7 +154,13 @@ export default {
created: function () {
let documentClasses = document.body.classList;
documentClasses.add("modal-open");
documentClasses.add("overflow-hidden");
if (this.modalDialogClass) {
let modal_size = this.modalDialogClass.replace('modal-', 'max-w-screen-');
this.modalDialogClass = modal_size;
}
},
mounted() {
@ -255,6 +273,12 @@ export default {
})
});
}
window.addEventListener('keyup',(e) => {
if (e.key === 'Escape') {
this.onCancel();
}
});
},
methods: {
@ -273,7 +297,7 @@ export default {
onCancel() {
let documentClasses = document.body.classList;
documentClasses.remove("modal-open");
documentClasses.remove("overflow-hidden");
this.$emit("cancel");
}
@ -284,21 +308,11 @@ export default {
let documentClasses = document.body.classList;
if (val) {
documentClasses.add("modal-open");
documentClasses.add("overflow-hidden");
} else {
documentClasses.remove("modal-open");
documentClasses.remove("overflow-hidden");
}
}
}
}
</script>
<style>
.modal.show {
background-color: rgba(0, 0, 0, 0.3);
}
.modal-md {
max-width: 650px;
}
</style>

View File

@ -1,19 +1,19 @@
<template>
<div v-if="!rowInput" class="form-group"
<div v-if="! rowInput" class="form-group"
:class="[{'has-error': error}, {'required': required}, {'readonly': readonly}, {'disabled': disabled}, col]">
<label v-if="title" :for="name" class="form-control-label">{{ title }}</label>
<div class="input-group input-group-merge" :class="group_class">
<div v-if="icon" class="input-group-prepend">
<div class="relative" :class="group_class">
<!-- <div class="input-group-prepend absolute left-2 bottom-3 text-light-gray">
<span class="input-group-text">
<i :class="'fa fa-' + icon"></i>
<span class="material-icons w-4 h-5 text-sm">{{ icon }}</span>
</span>
</div>
</div> -->
<money :name="name" @input="input" :placeholder="placeholder" v-bind="money" :value="model" :disabled="disabled" :masked="masked" class="form-control" :class="moneyClass"></money>
<money :name="name" @input="input" :placeholder="placeholder" v-bind="money" :value="model" :disabled="disabled" :masked="masked" class="form-element" :class="moneyClass"></money>
</div>
<div class="invalid-feedback d-block" v-if="error" v-html="error"></div>
<div class="text-red text-sm mt-1 block" v-if="error" v-html="error"></div>
</div>
<div v-else
@ -27,12 +27,12 @@
</span>
</div>
<money :name="name" @input="input" :placeholder="placeholder" v-bind="money" :value="model" :disabled="disabled" :masked="masked" class="form-control" :class="moneyClass"></money>
<money :name="name" @input="input" :placeholder="placeholder" v-bind="money" :value="model" :disabled="disabled" :masked="masked" class="form-element" :class="moneyClass"></money>
</div>
<money v-else :name="name" @input="input" :placeholder="placeholder" v-bind="money" :value="model" :disabled="disabled" :masked="masked" class="form-control" :class="moneyClass"></money>
<money v-else :name="name" @input="input" :placeholder="placeholder" v-bind="money" :value="model" :disabled="disabled" :masked="masked" class="form-element" :class="moneyClass"></money>
<div class="invalid-feedback d-block" v-if="error" v-html="error"></div>
<div class="text-red text-sm mt-1 block" v-if="error" v-html="error"></div>
</div>
</template>
@ -134,7 +134,7 @@ export default {
description: "Money result value"
},
rowInput: {
type: Boolean,
type: [Boolean, Number],
default: false,
description: "Money result value"
},
@ -158,12 +158,12 @@ export default {
//this.model = this.value;
if (this.dynamicCurrency.code != this.currency.code) {
if (!this.dynamicCurrency.decimal) {
if (! this.dynamicCurrency.decimal) {
this.money = {
decimal: this.dynamicCurrency.decimal_mark,
thousands: this.dynamicCurrency.thousands_separator,
prefix: (this.dynamicCurrency.symbol_first) ? this.dynamicCurrency.symbol : '',
suffix: (!this.dynamicCurrency.symbol_first) ? this.dynamicCurrency.symbol : '',
suffix: (! this.dynamicCurrency.symbol_first) ? this.dynamicCurrency.symbol : '',
precision: parseInt(this.dynamicCurrency.precision),
masked: this.masked
};

View File

@ -4,7 +4,7 @@
<div class="tab-pane tab-example-result fade show active" role="tabpanel" aria-labelledby="-component-tab">
<div class="btn-group btn-group-toggle radio-yes-no" data-toggle="buttons" v-on:click="onClick">
<label class="btn btn-success"
<label class="btn disabled:bg-green-100"
:class="[{'active': value === 1}]">
<input type="radio"
:name="name"

View File

@ -1,73 +1,117 @@
<template>
<div class="row pr-0" :class="formClasses">
<base-input :label="title"
name="recurring_frequency"
:class="frequencyClasses"
:error="frequencyError">
<template slot="label">
<label v-if="title" :class="labelClasses">
{{ title }}
<el-tooltip class="item" effect="dark" placement="top-start">
<div slot="content" v-html="tooltip"></div>
<i class="far fa-question-circle fa-xs" style="vertical-align: top;"></i>
</el-tooltip>
</label>
</template>
<el-select v-model="recurring_frequency" @input="change" filterable
:placeholder="placeholder">
<template slot="prefix">
<span class="el-input__suffix-inner el-select-icon">
<i :class="'el-input__icon el-icon-refresh'"></i>
</span>
</template>
<div class="sm:col-span-6 space-y-8 sm:space-y-2">
<div class="flex items-center" :class="{ 'justify-between sm:justify-start': frequency == 'custom' }">
<div class="w-60 px-2 text-sm">
{{ frequencyText }}
</div>
<el-option v-for="(label, value) in frequencyOptions"
:key="label"
<el-select class="w-36" v-model="frequency" @input="change">
<el-option
v-for="(label, value) in frequencies"
:key="value"
:label="label"
:value="value">
</el-option>
</el-select>
</base-input>
<base-input :label="titleInterval"
name="recurring_interval"
type="number"
:value="0"
@input="change"
:class="invertalClasses"
:error="intervalError"
v-model="recurring_interval"
<div class="w-20 px-2 text-sm text-center" v-if="frequency == 'custom'">
{{ frequencyEveryText }}
</div>
<input type="text" class="w-20 form-element" v-model="interval" @input="change" v-if="frequency == 'custom'">
<el-select class="w-36 ml-2" v-model="customFrequency" @input="change" v-if="frequency == 'custom'">
<el-option
v-for="(label, value) in customFrequencies"
:key="value"
:label="label"
:value="value">
</el-option>
</el-select>
</div>
<div class="flex items-center" :class="{ 'justify-between sm:justify-start': limit !== 'never' }">
<div class="w-60 px-2 text-sm">
{{ startText }}
</div>
<el-date-picker
class="w-36 recurring-invoice-data"
v-model="started_at"
@input="change"
type="date"
align="right"
:format="formatDate"
value-format="yyyy-MM-dd"
:picker-options="{
disabledDate(time) {
return time.getTime() < Date.now();
},
shortcuts: [
{
text: dateRangeText['today'],
onClick(picker) {
picker.$emit('pick', new Date());
}
},
{
text: dateRangeText['yesterday'],
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
picker.$emit('pick', date);
}
},
{
text: dateRangeText['week_ago'],
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', date);
}
}
]
}">
</el-date-picker>
<div class="w-20 px-2 text-sm text-center">
{{ middleText }}
</div>
<el-select class="w-20" v-model="limit" @input="change">
<el-option
v-for="(label, value) in limits"
:key="value"
:label="label"
:value="value">
</el-option>
</el-select>
<input type="text" class="w-36 form-element ml-2" v-model="limitDate" v-if="limit == 'after'" @input="change">
<div class="pl-2 text-sm" v-if="limit == 'after'">
{{ endText }}
</div>
<el-date-picker
class="w-36 ml-2 recurring-invoice-data"
v-model="limitDate"
type="date"
align="right"
:format="formatDate"
value-format="yyyy-MM-dd"
v-if="limit == 'on'"
@input="change"
>
</base-input>
<base-input :label="titleFrequency"
name="recurring_custom_frequency"
:class="customFrequencyClasses"
:error="customFrequencyError">
<el-select v-model="recurring_custom_frequency" @input="change" filterable
:placeholder="placeholder">
<el-option v-for="(label, value) in customFrequencyOptions"
:key="label"
:label="label"
:value="value">
</el-option>
</el-select>
</base-input>
<base-input :label="titleCount"
name="recurring_count"
type="number"
:value="0"
@input="change"
:class="countClasses"
:error="countError"
v-model="recurring_count">
</base-input>
</el-date-picker>
</div>
</div>
</template>
<script>
import { Select, Option, Tooltip } from 'element-ui'
import { Select, Option, DatePicker } from 'element-ui';
export default {
name: 'akaunting-recurring',
@ -75,144 +119,172 @@ export default {
components: {
[Select.name]: Select,
[Option.name]: Option,
[Tooltip.name]: Tooltip,
[DatePicker.name]: DatePicker,
},
props: {
title: {
startText: {
type: String,
default: '',
description: "Modal header title"
default: 'Create first invoice on',
description: "Default reccuring text"
},
titleInterval: {
dateRangeText: {
type: Object,
default: {
today : 'Today',
yesterday : 'Yesterday',
week_ago : 'A week ago',
},
description: "Default reccuring text"
},
middleText: {
type: String,
default: '',
description: "Title of interval"
default: 'and end',
description: "Default reccuring text"
},
titleFrequency: {
endText: {
type: String,
default: '',
description: "Title of frequency"
default: 'invoices',
description: "Default reccuring text"
},
titleCount: {
frequencies: null,
frequencyText: {
type: String,
default: '',
description: "Title of count"
default: 'Repeat this invoice',
description: "Default reccuring text"
},
tooltip: {
frequencyEveryText: {
type: String,
default: '',
description: "Tooltip message"
default: 'every',
description: "Default reccuring text"
},
placeholder: {
frequencyValue: {
type: String,
default: '',
description: "Modal header title"
default: 'monthly',
description: "Default reccuring type"
},
formClasses: {
default: 'col-md-6',
},
formError: null,
frequencyOptions: null,
frequencyValue: null,
frequencyError: null,
customFrequencies: null,
customFrequencyValue: {
type: String,
default: 'monthly',
description: "Default reccuring type"
},
intervalValue: {
startedValue: {
type: String,
default: 'never',
description: "Default reccuring limit"
},
limits: null,
limitValue: {
type: String,
default: 'never',
description: "Default reccuring limit"
},
limitCountValue: {
type: [Number, String],
default: 0,
description: "Default interval value"
description: "Default reccuring limit"
},
intervalError: null,
customFrequencyOptions: null,
customFrequencyValue: null,
customFrequencyError: null,
countValue: {
type: [Number, String],
default: 0,
description: "Default count value"
},
countError: null,
icon: {
limitDateValue: {
type: String,
description: "Prepend icon (left)"
default: '',
description: "Default reccuring limit"
},
labelClasses: {
dateFormat: {
type: String,
description: "Input label css classes",
default: "form-control-label"
default: 'dd MM yyyy',
description: "Default date format"
},
},
data() {
return {
recurring_frequency: null,
recurring_interval: null,
recurring_custom_frequency: null,
recurring_count: null,
frequencyClasses: 'col-md-12',
invertalClasses: 'col-md-2 d-none',
customFrequencyClasses: 'col-md-4 d-none',
countClasses: 'col-md-2 d-none'
frequency: '',
interval: '',
customFrequency: '',
started_at: '',
limit: '',
limitCount: '',
limitDate: '',
formatDate: 'dd MM YYYY',
}
},
created() {
this.recurring_frequency = this.frequencyValue;
this.recurring_interval = this.intervalValue;
this.recurring_custom_frequency = this.customFrequencyValue;
this.recurring_count = this.countValue;
created() {
this.formatDate = this.convertToDarteFormat(this.dateFormat);
},
mounted() {
this.recurring_frequency = this.frequencyValue;
this.frequency = this.frequencyValue;
this.customFrequency = this.customFrequencyValue;
this.started_at = this.startedValue;
if (this.recurring_frequency != 'custom') {
this.recurring_custom_frequency = '';
this.recurring_interval = '0';
this.limit = this.limitValue;
this.limitCount = this.limitCountValue;
this.limitDate = this.limitDateValue;
if (this.limit == 'count') {
if (typeof this.limitDate == 'string') {
this.limit = 'never';
} else {
this.limit = 'after';
}
} else {
this.limit = 'on';
}
this.frequencyChanges();
this.$emit('recurring_frequency', this.recurring_frequency);
this.$emit('recurring_interval', this.recurring_interval);
this.$emit('recurring_custom_frequency', this.recurring_custom_frequency);
this.$emit('recurring_count', this.recurring_count);
setTimeout(function() {
this.change();
}.bind(this), 800);
},
methods: {
change() {
this.$emit('change', this.recurring_frequency);
this.$emit('change', this.frequency);
this.$emit('recurring_frequency', this.recurring_frequency);
this.$emit('recurring_interval', this.recurring_interval);
this.$emit('recurring_custom_frequency', this.recurring_custom_frequency);
this.$emit('recurring_count', this.recurring_count);
this.$emit('frequency', this.frequency);
this.$emit('interval', this.interval);
this.$emit('custom_frequency', this.customFrequency);
this.$emit('started', this.started_at);
this.frequencyChanges();
switch (this.limit) {
case 'after':
this.$emit('limit', 'count');
this.$emit('limit_count', this.limitCount);
break;
case 'on':
this.$emit('limit', 'date');
this.$emit('limit_date', this.limitDate);
break;
case 'never':
default:
this.$emit('limit', 'count');
this.$emit('limit_count', 0);
break;
}
},
frequencyChanges() {
if (this.recurring_frequency == 'custom') {
this.frequencyClasses = 'col-md-4';
this.invertalClasses = 'col-md-2';
this.customFrequencyClasses = 'col-md-4';
this.countClasses = 'col-md-2 pr-0';
} else if (this.recurring_frequency == 'no' || this.recurring_frequency == '') {
this.frequencyClasses = 'col-md-12 pr-0';
this.invertalClasses = 'col-md-2 d-none';
this.customFrequencyClasses = 'col-md-4 d-none';
this.countClasses = 'col-md-2 d-none';
} else {
this.frequencyClasses = 'col-md-10';
this.invertalClasses = 'col-md-2 d-none';
this.customFrequencyClasses = 'col-md-4 d-none';
this.countClasses = 'col-md-2 pr-0';
}
}
convertToDarteFormat(format) {
return format.replace('d', 'dd')
.replace('M', 'MMM')
.replace('m', 'MM')
.replace('F', 'MMMM')
.replace('y', 'yyyy')
.replace('Y', 'yyyy');
},
}
}
</script>
<style>
.el-input__inner {
height: 42px;
}
</style>

View File

@ -1,45 +1,53 @@
<template>
<div :id="'search-field-' + _uid" class="searh-field tags-input__wrapper js-search">
<div class="tags-group" v-for="(filter, index) in filtered" :index="index">
<span v-if="filter.option" class="el-tag el-tag--primary el-tag--small el-tag--light el-tag-option">
<div
:id="'search-field-' + _uid"
class="h-12 my-5 searh-field flex border-b transition-all js-search"
:class="input_focus ? 'border-gray-500' : 'border-gray-300'"
>
<div class="tags-group group items-center" style="display:contents;" v-for="(filter, index) in filtered" :index="index">
<span v-if="filter.option" class="flex items-center bg-purple-lighter text-black border-0 mt-3 px-3 py-4 text-sm cursor-pointer el-tag el-tag--small el-tag-option">
{{ filter.option }}
<i v-if="!filter.operator && !filter.value" class="el-tag__close el-icon-close" @click="onFilterDelete(index)"></i>
<i v-if="!filter.operator && !filter.value" class="mt-1 ltr:-right-2 rtl:left-0 rtl:right-0 el-tag__close el-icon-close" style="font-size: 16px;" @click="onFilterDelete(index)"></i>
</span>
<span v-if="filter.operator" class="el-tag el-tag--primary el-tag--small el-tag--light el-tag-operator">
<i v-if="filter.operator == '='" class="fas fa-equals"></i>
<i v-else-if="filter.operator == '><'" class="fas fa-arrows-alt-h"></i>
<i v-else class="fas fa-not-equal"></i>
<span v-if="filter.operator" class="flex items-center bg-purple-lighter text-black border-2 border-body border-l border-r border-t-0 border-b-0 mt-3 px-3 py-4 text-sm cursor-pointer el-tag el-tag--small el-tag-operator" style="margin-left:0; margin-right:0;">
<span v-if="filter.operator == '='" class="material-icons text-2xl">drag_handle</span>
<span v-else-if="filter.operator == '><'" class="material-icons text-2xl transform rotate-90">height</span>
<i v-if="!filter.value" class="el-tag__close el-icon-close" @click="onFilterDelete(index)"></i>
<img v-else :src="equal_image" class="w-5 h-5 object-cover block" />
<i v-if="!filter.value" class="mt-1 ltr:-right-2 rtl:left-0 rtl:right-0 el-tag__close el-icon-close " style="font-size: 16px;" @click="onFilterDelete(index)"></i>
</span>
<span v-if="filter.value" class="el-tag el-tag--primary el-tag--small el-tag--light el-tag-value">
<span v-if="filter.value" class="flex items-center bg-purple-lighter text-black border-0 mt-3 px-3 py-4 text-sm cursor-pointer el-tag el-tag--small el-tag-value">
{{ filter.value }}
<i class="el-tag__close el-icon-close" @click="onFilterDelete(index)"></i>
<i class="mt-1 ltr:-right-2 rtl:left-0 rtl:right-0 el-tag__close el-icon-close " style="font-size: 16px;" @click="onFilterDelete(index)"></i>
</span>
</div>
<div class="dropdown input-full">
<div class="relative w-full h-full flex">
<input
v-if="!show_date"
type="text"
class="form-control"
:placeholder="placeholder"
:ref="'input-search-field-' + _uid"
v-model="search"
@focus="onInputFocus"
@input="onInput"
@keyup.enter="onInputConfirm"
v-if="!show_date"
type="text"
class="w-full bg-transparent text-black text-sm border-0 px-10 pb-0 focus:outline-none focus:ring-transparent focus:border-purple-100"
:class="[{'px-4' : !show_icon}]"
:placeholder="placeholder"
:ref="'input-search-field-' + _uid"
v-model="search"
@focus="onInputFocus"
@input="onInput"
@blur="onBlur"
@keyup.enter="onInputConfirm"
/>
<flat-picker
v-else
@on-open="onInputFocus"
@blur="onBlur"
:config="dateConfig"
class="form-control datepicker"
class="w-full bg-transparent text-black text-sm border-0 px-10 pb-0 focus:outline-none focus:ring-transparent focus:border-purple-100 datepicker"
:placeholder="placeholder"
:ref="'input-search-date-field-' + _uid"
value=""
@ -48,42 +56,53 @@
@keyup.enter="onInputConfirm"
>
</flat-picker>
<span class="material-icons absolute bottom-1 ltr:left-3 rtl:right-3 text-lg text-black" style="z-index:-1;">search</span>
<button type="button" class="btn btn-link clear" @click="onSearchAndFilterClear">
<i class="el-tag__close el-icon-close"></i>
<button type="button" class="absolute ltr:right-0 rtl:left-0 top-2 clear" v-if="show_close_icon" @click="onSearchAndFilterClear">
<span class="material-icons text-sm">close</span>
</button>
<div :id="'search-field-option-' + _uid" class="dropdown-menu" :class="[{'show': visible.options}]">
<li ref="" class="dropdown-item" v-for="option in filteredOptions" :data-value="option.key">
<button type="button" class="btn btn-link" @click="onOptionSelected(option.key)">{{ option.value }}</button>
<div :id="'search-field-option-' + _uid" class="absolute top-12 ltr:left-8 rtl:right-8 py-2 bg-white rounded-md border border-gray-200 shadow-xl z-20 list-none dropdown-menu" :class="[{'show': visible.options}]">
<li ref="" class="w-full flex items-center text-purple px-2 h-9 leading-9 whitespace-nowrap" v-for="option in filteredOptions" :data-value="option.key">
<button type="button" class="w-full h-full flex items-center rounded-md px-2 text-sm hover:bg-lilac-100" data-btn="btn btn-link" @click="onOptionSelected(option.key)">{{ option.value }}</button>
</li>
<li ref="" v-if="search" class="dropdown-item">
<button type="button" class="btn btn-link" @click="onInputConfirm">{{ searchText }}</button>
<li ref="" v-if="search" class="p-2 hover:bg-lilac-900 dropdown-item">
<button type="button" class="text-left" @click="onInputConfirm">{{ searchText }}</button>
</li>
</div>
<div :id="'search-field-operator-' + _uid" class="dropdown-menu operator" :class="[{'show': visible.operator}]">
<li ref="" class="dropdown-item">
<button type="button" class="btn btn-link" @click="onOperatorSelected('=')"><i class="fas fa-equals"></i><span class="btn-helptext d-none">{{ operatorIsText }}</span></button>
<div :id="'search-field-operator-' + _uid" class="absolute top-12 ltr:left-8 rtl:right-8 py-2 bg-white rounded-md border border-gray-200 shadow-xl z-20 list-none dropdown-menu operator" :class="[{'show': visible.operator}]">
<li ref="" class="w-full flex items-center text-purple px-2 h-9 leading-9 whitespace-nowrap">
<button type="button" class="w-full h-full flex items-center rounded-md px-2 text-sm hover:bg-lilac-100" @click="onOperatorSelected('=')">
<span class="material-icons text-2xl transform">drag_handle</span>
<span class="text-gray hidden">{{ operatorIsText }}
</span>
</button>
</li>
<li ref="" class="dropdown-item">
<button type="button" class="btn btn-link" @click="onOperatorSelected('!=')"><i class="fas fa-not-equal"></i><span class="btn-helptext d-none">{{ operatorIsNotText }}</span></button>
<li ref="" class="w-full flex items-center text-purple px-2 h-9 leading-9 whitespace-nowrap">
<button type="button" class="w-full h-full flex items-center rounded-md px-2 text-sm hover:bg-lilac-100" @click="onOperatorSelected('!=')">
<img :src="equal_image" class="w-6 h-6 block m-auto" />
<span class="text-gray hidden">{{ operatorIsNotText }}</span>
</button>
</li>
<li v-if="range" ref="" class="dropdown-item">
<button type="button" class="btn btn-link" @click="onOperatorSelected('><')"><i class="fas fa-arrows-alt-h"></i><span class="btn-helptext d-none">{{ operatorIsNotText }}</span></button>
<li v-if="range" ref="" class="w-full flex items-center text-purple px-2 h-9 leading-9 whitespace-nowrap">
<button type="button" class="w-full h-full flex items-center rounded-md px-2 text-sm hover:bg-lilac-100" @click="onOperatorSelected('><')">
<span class="material-icons text-2xl transform rotate-90">height</span>
<span class="text-gray hidden">{{ operatorIsNotText }}</span>
</button>
</li>
</div>
<div :id="'search-field-value-' + _uid" class="dropdown-menu" :class="[{'show': visible.values}]">
<li ref="" class="dropdown-item" v-for="(value) in filteredValues" :data-value="value.key">
<button type="button" class="btn btn-link" @click="onValueSelected(value.key)">{{ value.value }}</button>
<div :id="'search-field-value-' + _uid" class="absolute top-12 ltr:left-8 rtl:right-8 py-2 bg-white rounded-md border border-gray-200 shadow-xl z-20 list-none dropdown-menu" :class="[{'show': visible.values}]">
<li ref="" class="w-full flex items-center text-purple px-2 h-9 leading-9 whitespace-nowrap" v-for="(value) in filteredValues" :data-value="value.key">
<button type="button" class="w-full h-full flex items-center rounded-md px-2 text-sm hover:bg-lilac-100" @click="onValueSelected(value.key)">{{ value.value }}</button>
</li>
<li ref="" class="dropdown-item" v-if="!filteredValues.length">
<button type="button" class="btn btn-link">{{ noMatchingDataText }}</button>
<li ref="" class="w-full flex items-center text-purple px-2 h-9 leading-9 whitespace-nowrap" v-if="!filteredValues.length">
<button type="button" class="w-full h-full flex items-center rounded-md px-2 text-sm hover:bg-lilac-100">{{ noMatchingDataText }}</button>
</li>
</div>
</div>
@ -149,7 +168,7 @@ export default {
},
dateConfig: null
},
model: {
@ -178,6 +197,10 @@ export default {
values: [],
current_value: null,
show_date: false,
show_close_icon: false,
show_icon: true,
equal_image: app_url + "/public/img/tailwind_icons/not-equal.svg",
input_focus: false
};
},
@ -201,7 +224,11 @@ export default {
});
}
//console.log('Focus :' + this.filter_last_step);
this.input_focus = true;
},
onBlur() {
this.input_focus = false;
},
onInputDateSelected(selectedDates, dateStr, instance) {
@ -218,7 +245,7 @@ export default {
date = dates.join('-to-');
}
this.selected_values.push({
key: date,
value: dateStr,
@ -343,6 +370,7 @@ export default {
},
onOptionSelected(value) {
this.show_icon = false;
this.current_value = value;
this.range = false;
@ -474,6 +502,7 @@ export default {
},
onValueSelected(value) {
this.show_close_icon = true;
let select_value = false;
for (let i = 0; i < this.values.length; i++) {
@ -517,6 +546,8 @@ export default {
},
onFilterDelete(index) {
this.show_icon = true;
this.show_close_icon = false;
this.filter_list.push(this.selected_options[index]);
if (this.filter_last_step == 'options') {
@ -567,7 +598,7 @@ export default {
},
closeIfClickedOutside(event) {
if (!document.getElementById('search-field-' + this._uid).contains(event.target) && event.target.className != 'btn btn-link') {
if (!document.getElementById('search-field-' + this._uid).contains(event.target) && event.target.getAttribute('data-btn') != 'btn btn-link') {
this.visible.options = false;
this.visible.operator = false;
this.visible.values = false;
@ -592,8 +623,6 @@ export default {
let search_string = this.value.replace('not ', '').replace(' not ', ' ');
console.log(search_string);
search_string = search_string.split(' ');
search_string.forEach(function (string) {
@ -646,7 +675,7 @@ export default {
value_assigned = true
}
}, this);
if (!value_assigned && (cookie != undefined && cookie[_filter.key])) {
this.selected_values.push(cookie[_filter.key]);
}
@ -672,8 +701,6 @@ export default {
let filter_values = this.convertOption(_filter.values);
if (_filter.key == filter.option) {
console.log('Filter YES');
option = _filter.value;
operator = filter.operator;
@ -685,8 +712,6 @@ export default {
this.selected_options.push(this.filter_list[i]);
console.log(operator);
this.selected_operator.push({
key: operator,
});
@ -779,23 +804,6 @@ export default {
</script>
<style>
.searh-field {
border: 1px solid #dee2e6;
border-radius: 0.25rem;
}
.searh-field .tags-group {
display: contents;
}
.searh-field .el-tag.el-tag--primary {
background: #f6f9fc;
background-color: #f6f9fc;
border-color: #f6f9fc;
color: #8898aa;
margin-top: 7px;
}
.searh-field .tags-group:hover > span {
background:#cbd4de;
background-color: #cbd4de;
@ -804,64 +812,47 @@ export default {
.searh-field .el-tag.el-tag--primary .el-tag__close.el-icon-close {
color: #8898aa;
margin-top: -3px;
}
.searh-field .el-tag-option {
border-radius: 0.25rem 0 0 0.25rem;
.searh-field .el-tag.el-tag--primary .el-tag__close.el-icon-close:hover {
background-color: transparent;
}
html[dir='ltr'] .searh-field .el-tag-option {
border-radius: 0.50rem 0 0 0.50rem;
margin-left: 10px;
}
html[dir='rtl'] .searh-field .el-tag-option {
border-radius: 0.50rem;
margin-right: 10px;
}
.searh-field .el-tag-operator {
border-radius: 0;
margin-left: -1px;
margin-right: -1px;
}
.searh-field .el-tag-value {
border-radius: 0 0.25rem 0.25rem 0;
html[dir='ltr'] .searh-field .el-tag-value {
border-radius: 0 0.50rem 0.50rem 0;
margin-right: 10px;
}
html[dir='rtl'] .searh-field .el-tag-value {
border-radius: 0.50rem;
margin-left: 10px;
}
html[dir='rtl'] .searh-field .el-tag-operator {
border-radius: 0.50rem;
}
.searh-field .el-select.input-new-tag {
width: 100%;
}
.searh-field .input-full {
width: 100%;
}
.searh-field .btn.btn-link {
width: inherit;
text-align: left;
display: flex;
margin: 0;
text-overflow: inherit;
text-align: left;
text-overflow: ellipsis;
padding: unset;
color: #212529;
}
.searh-field .btn.btn-link.clear {
position: absolute;
top: 0;
right: 0;
width: 45px;
height: 45px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: #adb5bd;
opacity: 1;
}
.searh-field .btn.btn-link.clear:hover {
color: #8898aa;
}
.searh-field .btn-helptext {
margin-left: auto;
color: var(--gray);
@ -884,4 +875,30 @@ export default {
.searh-field .dropdown-menu.operator .btn i:not(:last-child), .btn svg:not(:last-child) {
margin-right: inherit !important;
}
.dropdown-menu {
z-index: 1000;
display: none;
min-width: 10rem;
}
.dropdown-menu li {
margin-bottom: 5px;
}
.dropdown-menu.operator li {
margin-bottom: 5px;
}
.dropdown-menu li:last-child {
margin-bottom: 0;
}
.dropdown-menu > li > button {
width: 100%;
}
.dropdown-menu.show {
display: block;
}
</style>

View File

@ -17,23 +17,24 @@
:readonly="readonly"
:collapse-tags="collapse"
:loading="loading"
class="forms"
>
<div v-if="loading" class="el-select-dropdown__wrap" slot="empty">
<p class="el-select-dropdown__empty loading">
{{ loadingText }}
<p class="el-select-dropdown__empty pt-2 pb-0 loading">
<span class="material-icons form-spin text-lg animate-spin">data_usage</span>
</p>
</div>
<div v-if="addNew.status && options.length != 0 && sortedOptions.length == 0" class="el-select-dropdown__wrap" slot="empty">
<p class="el-select-dropdown__empty">
<p class="el-select-dropdown__empty pt-2 pb-0">
{{ noMatchingDataText }}
</p>
<ul class="el-scrollbar__view el-select-dropdown__list">
<li class="el-select-dropdown__item el-select__footer">
<div @click="onAddItem">
<i class="fas fa-plus"></i>
<span>
<li class="el-select-dropdown__item el-select__footer bg-purple">
<div class="w-full flex items-center" @click="onAddItem">
<span class="material-icons text-xl text-purple">add</span>
<span class="flex-1 font-bold text-purple">
{{ addNew.text }}
</span>
</div>
@ -42,14 +43,14 @@
</div>
<div v-else-if="addNew.status && options.length == 0" slot="empty">
<p class="el-select-dropdown__empty">
<p class="el-select-dropdown__empty pt-2 pb-0">
{{ noDataText }}
</p>
<ul class="el-scrollbar__view el-select-dropdown__list">
<li class="el-select-dropdown__item el-select__footer">
<div @click="onAddItem">
<i class="fas fa-plus"></i>
<span>
<li class="el-select-dropdown__item el-select__footer bg-purple">
<div class="w-full flex items-center" @click="onAddItem">
<span class="material-icons text-xl text-purple">add</span>
<span class="flex-1 font-bold text-purple">
{{ addNew.text }}
</span>
</div>
@ -68,7 +69,7 @@
:disabled="disabledOptions.includes(option.key)"
:label="option.value"
:value="option.key">
<span class="float-left">{{ option.value }}</span>
<span class="float-left" :style="'padding-left: ' + (10 * option.level).toString() + 'px;'"><i v-if="option.level != 0" class="material-icons align-middle text-lg ltr:mr-2 rtl:ml-2">subdirectory_arrow_right</i>{{ option.value }}</span>
<span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[option.key]">{{ addNew.new_text }}</span>
</el-option>
@ -88,10 +89,10 @@
</el-option>
</el-option-group>
<el-option v-if="!loading && addNew.status && options.length != 0 && sortedOptions.length > 0" class="el-select__footer select-add-new" disabled value="">
<div @click="onAddItem">
<i class="fas fa-plus"></i>
<span>
<el-option v-if="!loading && addNew.status && options.length != 0 && sortedOptions.length > 0" class="el-select-dropdown__item el-select__footer select-add-new bg-purple" disabled value="">
<div class="w-full flex items-center" @click="onAddItem">
<span class="material-icons text-xl text-purple">add</span>
<span class="flex-1 font-bold text-purple">
{{ addNew.text }}
</span>
</div>
@ -101,12 +102,11 @@
<component v-bind:is="add_new_html" @submit="onSubmit" @cancel="onCancel"></component>
<span slot="infoBlock" class="badge badge-success badge-resize float-right" v-if="new_options[selected]">{{ addNew.new_text }}</span>
<span slot="infoBlock" class="absolute right-8 top-3 bg-green text-white px-2 py-1 rounded-md text-xs" v-if="new_options[selected]">{{ addNew.new_text }}</span>
<select :name="name" :id="name" v-model="selected" class="d-none">
<option v-for="option in sortedOptions" :key="option.key" :value="option.key">{{ option.value }}</option>
</select>
</base-input>
</template>
@ -118,7 +118,7 @@ import { Select, Option, OptionGroup, ColorPicker } from 'element-ui';
import AkauntingModalAddNew from './AkauntingModalAddNew';
import AkauntingModal from './AkauntingModal';
import AkauntingMoney from './AkauntingMoney';
import AkauntingRadioGroup from './forms/AkauntingRadioGroup';
import AkauntingRadioGroup from './AkauntingRadioGroup';
import AkauntingSelect from './AkauntingSelect';
import AkauntingDate from './AkauntingDate';
import AkauntingRecurring from './AkauntingRecurring';
@ -266,12 +266,6 @@ export default {
description: "Selectbox collapse status"
},
loadingText: {
type: String,
default: 'Loading...',
description: "Selectbox loading message"
},
noDataText: {
type: String,
default: 'No Data',
@ -392,7 +386,8 @@ export default {
for (const [key, value] of Object.entries(options)) {
values.push({
key: key.toString(),
value: value
value: value,
level: 0
});
}
@ -407,13 +402,15 @@ export default {
this.sorted_options.push({
index: index,
key: index.toString(),
value: option
value: option,
level: 0
});
} else {
this.sorted_options.push({
index: index,
key: option.id.toString(),
value: (option.title) ? option.title : (option.display_name) ? option.display_name : option.name
value: (option.title) ? option.title : (option.display_name) ? option.display_name : option.name,
level: (option.level) ? option.level : 0
});
}
}, this);
@ -424,7 +421,8 @@ export default {
for (const [key, value] of Object.entries(created_options)) {
this.sorted_options.push({
key: key.toString(),
value: value
value: value,
level: 0
});
}
} else {
@ -433,13 +431,15 @@ export default {
this.sorted_options.push({
index: index,
key: index.toString(),
value: option
value: option,
level: 0
});
} else {
this.sorted_options.push({
index: index,
key: option.id.toString(),
value: (option.title) ? option.title : (option.display_name) ? option.display_name : option.name
value: (option.title) ? option.title : (option.display_name) ? option.display_name : option.name,
level: (option.level) ? option.level : 0
});
}
}, this);
@ -693,7 +693,7 @@ export default {
let documentClasses = document.body.classList;
documentClasses.remove("modal-open");
documentClasses.remove("overflow-hidden");
}
})
.catch(error => {
@ -712,7 +712,7 @@ export default {
let documentClasses = document.body.classList;
documentClasses.remove("modal-open");
documentClasses.remove("overflow-hidden");
},
addModal() {
@ -812,13 +812,14 @@ export default {
for (const [key, value] of Object.entries(_options)) {
values.push({
key: key,
value: value
key: key.toString(),
value: value,
level: 0
});
}
this.sorted_options.push({
key: index,
key: index.toString(),
value: values
});
}
@ -828,13 +829,15 @@ export default {
this.sorted_options.push({
index: index,
key: index.toString(),
value: option
value: option,
level: 0
});
} else {
this.sorted_options.push({
index: index,
key: option.id,
value: (option.title) ? option.title : (option.display_name) ? option.display_name : option.name
key: option.id.toString(),
value: (option.title) ? option.title : (option.display_name) ? option.display_name : option.name,
level: (option.level) ? option.level : 0
});
}
}, this);
@ -844,8 +847,9 @@ export default {
if (!Array.isArray(options)) {
for (const [key, value] of Object.entries(options)) {
this.sorted_options.push({
key: key,
value: value
key: key.toString(),
value: value,
level: 0
});
}
} else {
@ -854,13 +858,15 @@ export default {
this.sorted_options.push({
index: index,
key: index.toString(),
value: option
value: option,
level: 0
});
} else {
this.sorted_options.push({
index: index,
key: option.id,
value: (option.title) ? option.title : (option.display_name) ? option.display_name : option.name
key: option.id.toString(),
value: (option.title) ? option.title : (option.display_name) ? option.display_name : option.name,
level: (option.level) ? option.level : 0
});
}
}, this);
@ -870,57 +876,3 @@ export default {
},
}
</script>
<style scoped>
.form-group .modal {
z-index: 3050;
}
.el-select-dropdown__empty {
padding: 10px 0 0 !important;
}
.el-select-dropdown__empty.loading {
padding: 10px 0 !important;
}
.el-select__footer {
text-align: center !important;
border-top: 1px solid #dee2e6 !important;
padding: 0px !important;
cursor: pointer !important;
color: #3c3f72 !important;
font-weight: bold !important;
height: 38px !important;
line-height: 38px !important;
margin-top: 5px !important;
margin-bottom: -6px !important;
border-bottom-left-radius: 4px !important;
border-bottom-right-radius: 4px !important;
}
.el-select__footer.el-select-dropdown__item.hover {
background-color: inherit !important;
}
.el-select__footer.el-select-dropdown__item:hover, .el-select__footer.el-select-dropdown__item:focus {
background-color: #3c3f72 !important;
color: white !important;
border-top-color: #3c3f72;
}
.el-select__footer div span {
margin-left: 5px;
}
.badge-resize {
float: right;
margin-top: -32px;
margin-right: 35px;
position: relative;
}
.badge.badge-pill.badge-success {
border-radius: 0.375rem;
}
</style>

View File

@ -20,21 +20,21 @@
:loading="loading"
>
<div v-if="loading" class="el-select-dropdown__wrap" slot="empty">
<p class="el-select-dropdown__empty loading">
{{ loadingText }}
<p class="el-select-dropdown__empty pt-2 pb-0 loading">
<span class="material-icons form-spin text-lg animate-spin">data_usage</span>
</p>
</div>
<div v-if="!loading && addNew.status && options.length != 0 && sortOptions.length == 0" class="el-select-dropdown__wrap" slot="empty">
<p class="el-select-dropdown__empty">
<div v-if="!loading && addNew.status && options.length != 0 && sortedOptions.length == 0" class="el-select-dropdown__wrap" slot="empty">
<p class="el-select-dropdown__empty pt-2 pb-0">
{{ noMatchingDataText }}
</p>
<ul class="el-scrollbar__view el-select-dropdown__list">
<li class="el-select-dropdown__item el-select__footer" disabled value="">
<div @click="onAddItem">
<i class="fas fa-plus"></i>
<span>
<li class="el-select-dropdown__item el-select__footer bg-purple" disabled value="">
<div class="w-full flex items-center" @click="onAddItem">
<span class="material-icons text-xl text-purple">add</span>
<span class="flex-1 font-bold text-purple">
{{ addNew.text }}
</span>
</div>
@ -45,10 +45,10 @@
<div v-if="!loading && addNew.status && options.length == 0">
<el-option class="text-center" disabled :label="noDataText" value="value"></el-option>
<ul class="el-scrollbar__view el-select-dropdown__list">
<li class="el-select-dropdown__item el-select__footer">
<div @click="onAddItem">
<i class="fas fa-plus"></i>
<span>
<li class="el-select-dropdown__item el-select__footer bg-purple">
<div class="w-full flex items-center" @click="onAddItem">
<span class="material-icons text-xl text-purple">add</span>
<span class="flex-1 font-bold text-purple">
{{ addNew.text }}
</span>
</div>
@ -62,18 +62,18 @@
</span>
</template>
<el-option v-if="!group" v-for="(option, index) in sortOptions"
<el-option v-if="!group" v-for="(option, index) in sortedOptions"
:key="option.key"
:disabled="disabledOptions.includes(option.key)"
:label="option.value"
:value="option.key">
<span class="float-left">{{ option.value }}</span>
<span class="float-left" :style="'padding-left: ' + (10 * option.level).toString() + 'px;'"><i v-if="option.level != 0" class="material-icons align-middle text-lg ltr:mr-2 rtl:ml-2">subdirectory_arrow_right</i>{{ option.value }}</span>
<span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[option.key]">{{ addNew.new_text }}</span>
</el-option>
<el-option-group
v-if="group"
v-for="(group_options, group_index) in sortOptions"
v-for="(group_options, group_index) in sortedOptions"
:key="group_index"
:label="group_options.key">
<el-option
@ -82,15 +82,15 @@
:disabled="disabledOptions.includes(option.key)"
:label="option.value"
:value="option.key">
<span class="float-left">{{ option.value }}</span>
<span class="float-left" :style="'padding-left: ' + (10 * option.level).toString() + 'px;'"><i v-if="option.level != 0" class="material-icons align-middle text-lg ltr:mr-2 rtl:ml-2">subdirectory_arrow_right</i>{{ option.value }}</span>
<span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[option.key]">{{ addNew.new_text }}</span>
</el-option>
</el-option-group>
<el-option v-if="!loading && addNew.status && options.length != 0 && sortOptions.length > 0" class="el-select__footer" :disabled="disabled" value="">
<div @click="onAddItem">
<i class="fas fa-plus"></i>
<span>
<el-option v-if="!loading && addNew.status && options.length != 0 && sortedOptions.length > 0" class="el-select__footer bg-purple" :disabled="disabled" value="">
<div class="w-full flex items-center" @click="onAddItem">
<span class="material-icons text-xl text-purple">add</span>
<span class="flex-1 font-bold text-purple">
{{ addNew.text }}
</span>
</div>
@ -100,10 +100,10 @@
<component v-bind:is="add_new_html" @submit="onSubmit" @cancel="onCancel"></component>
<span slot="infoBlock" class="badge badge-success badge-resize float-right" v-if="new_options[selected]">{{ addNew.new_text }}</span>
<span slot="infoBlock" class="absolute right-8 top-3 bg-green text-white px-2 py-1 rounded-md text-xs" v-if="new_options[selected]">{{ addNew.new_text }}</span>
<select :name="name" :id="name" v-model="selected" class="d-none">
<option v-for="option in sortOptions" :key="option.key" :value="option.key">{{ option.value }}</option>
<option v-for="option in sortedOptions" :key="option.key" :value="option.key">{{ option.value }}</option>
</select>
</base-input>
@ -120,21 +120,21 @@
:loading="loading"
>
<div v-if="loading" class="el-select-dropdown__wrap" slot="empty">
<p class="el-select-dropdown__empty loading">
{{ loadingText }}
<p class="el-select-dropdown__empty pt-2 pb-0 loading">
<span class="material-icons form-spin text-lg animate-spin">data_usage</span>
</p>
</div>
<div v-if="!loading && addNew.status && options.length != 0 && sortOptions.length == 0" class="el-select-dropdown__wrap" slot="empty">
<p class="el-select-dropdown__empty">
<div v-if="!loading && addNew.status && options.length != 0 && sortedOptions.length == 0" class="el-select-dropdown__wrap" slot="empty">
<p class="el-select-dropdown__empty pt-2 pb-0">
{{ noMatchingDataText }}
</p>
<ul class="el-scrollbar__view el-select-dropdown__list">
<li class="el-select-dropdown__item el-select__footer" disabled value="">
<div @click="onAddItem">
<i class="fas fa-plus"></i>
<span>
<li class="el-select-dropdown__item el-select__footer bg-purple" disabled value="">
<div class="w-full flex items-center" @click="onAddItem">
<span class="material-icons text-xl text-purple">add</span>
<span class="flex-1 font-bold text-purple">
{{ addNew.text }}
</span>
</div>
@ -145,10 +145,10 @@
<div v-if="!loading && addNew.status && options.length == 0">
<el-option class="text-center" disabled :label="noDataText" value="value"></el-option>
<ul class="el-scrollbar__view el-select-dropdown__list">
<li class="el-select-dropdown__item el-select__footer">
<div @click="onAddItem">
<i class="fas fa-plus"></i>
<span>
<li class="el-select-dropdown__item el-select__footer bg-purple">
<div class="w-full flex items-center" @click="onAddItem">
<span class="material-icons text-xl text-purple">add</span>
<span class="flex-1 font-bold text-purple">
{{ addNew.text }}
</span>
</div>
@ -162,18 +162,18 @@
</span>
</template>
<el-option v-if="!group" v-for="(option, index) in sortOptions"
<el-option v-if="!group" v-for="(option, index) in sortedOptions"
:key="option.key"
:disabled="disabledOptions.includes(option.key)"
:label="option.value"
:value="option.key">
<span class="float-left">{{ option.value }}</span>
<span class="float-left" :style="'padding-left: ' + (10 * option.level).toString() + 'px;'"><i v-if="option.level != 0" class="material-icons align-middle text-lg ltr:mr-2 rtl:ml-2">subdirectory_arrow_right</i>{{ option.value }}</span>
<span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[option.key]">{{ addNew.new_text }}</span>
</el-option>
<el-option-group
v-if="group"
v-for="(group_options, group_index) in sortOptions"
v-for="(group_options, group_index) in sortedOptions"
:key="group_index"
:label="group_options.key">
<el-option
@ -182,15 +182,15 @@
:disabled="disabledOptions.includes(option.key)"
:label="option.value"
:value="option.key">
<span class="float-left">{{ option.value }}</span>
<span class="float-left" :style="'padding-left: ' + (10 * option.level).toString() + 'px;'"><i v-if="option.level != 0" class="material-icons align-middle text-lg ltr:mr-2 rtl:ml-2">subdirectory_arrow_right</i>{{ option.value }}</span>
<span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[option.key]">{{ addNew.new_text }}</span>
</el-option>
</el-option-group>
<el-option v-if="!loading && addNew.status && options.length != 0 && sortOptions.length > 0" class="el-select__footer" disabled value="">
<div @click="onAddItem">
<i class="fas fa-plus"></i>
<span>
<el-option v-if="!loading && addNew.status && options.length != 0 && sortedOptions.length > 0" class="el-select__footer bg-purple" disabled value="">
<div class="w-full flex items-center" @click="onAddItem">
<span class="material-icons text-xl text-purple">add</span>
<span class="flex-1 font-bold text-purple">
{{ addNew.text }}
</span>
</div>
@ -200,10 +200,10 @@
<component v-bind:is="add_new_html" @submit="onSubmit" @cancel="onCancel"></component>
<span slot="infoBlock" class="badge badge-success badge-resize float-right" v-if="new_options[selected]">{{ addNew.new_text }}</span>
<span slot="infoBlock" class="absolute right-8 top-3 bg-green text-white px-2 py-1 rounded-md text-xs" v-if="new_options[selected]">{{ addNew.new_text }}</span>
<select :name="name" :id="name" v-model="selected" class="d-none">
<option v-for="option in sortOptions" :key="option.key" :value="option.key">{{ option.value }}</option>
<option v-for="option in sortedOptions" :key="option.key" :value="option.key">{{ option.value }}</option>
</select>
</span>
</template>
@ -216,7 +216,7 @@ import { Select, Option, OptionGroup, ColorPicker } from 'element-ui';
import AkauntingModalAddNew from './AkauntingModalAddNew';
import AkauntingModal from './AkauntingModal';
import AkauntingMoney from './AkauntingMoney';
import AkauntingRadioGroup from './forms/AkauntingRadioGroup';
import AkauntingRadioGroup from './AkauntingRadioGroup';
import AkauntingSelect from './AkauntingSelect';
import AkauntingDate from './AkauntingDate';
import AkauntingRecurring from './AkauntingRecurring';
@ -300,6 +300,12 @@ export default {
description: "Option Sortable type (key|value)"
},
sortOptions: {
type: Boolean,
default: true,
description: 'Sort options by the option_sortable prop, or sorting is made server-side',
},
model: {
type: [String, Number, Array, Object],
default: '',
@ -358,12 +364,6 @@ export default {
description: "Selectbox collapse status"
},
loadingText: {
type: String,
default: 'Loading...',
description: "Selectbox loading message"
},
noDataText: {
type: String,
default: 'No Data',
@ -403,29 +403,33 @@ export default {
selected: this.model,
form: {},
sort_options: [],
sorted_options: [],
new_options: {},
loading: false,
}
},
created() {
this.setSortOptions();
this.setSortedOptions();
},
computed: {
sortOptions() {
if (this.group) {
this.sort_options.sort(this.sortBy("key"));
sortedOptions() {
if (!this.sortOptions) {
return this.sorted_options;
}
for (const [index, options] of Object.entries(this.sort_options)) {
if (this.group) {
this.sorted_options.sort(this.sortBy("key"));
for (const [index, options] of Object.entries(this.sorted_options)) {
options.value.sort(this.sortBy(this.option_sortable));
}
} else {
this.sort_options.sort(this.sortBy(this.option_sortable));
this.sorted_options.sort(this.sortBy(this.option_sortable));
}
return this.sort_options;
return this.sorted_options;
},
},
@ -476,9 +480,9 @@ export default {
}
},
setSortOptions() {
// Reset sort_options
this.sort_options = [];
setSortedOptions() {
// Reset sorted_options
this.sorted_options = [];
let created_options = (this.dynamicOptions) ? this.dynamicOptions : this.options;
@ -491,11 +495,12 @@ export default {
for (const [key, value] of Object.entries(options)) {
values.push({
key: key,
value: value
value: value,
level: 0
});
}
this.sort_options.push({
this.sorted_options.push({
key: index,
value: values
});
@ -503,16 +508,18 @@ export default {
} else {
created_options.forEach(function (option, index) {
if (typeof(option) == 'string') {
this.sort_options.push({
this.sorted_options.push({
index: index,
key: index.toString(),
value: option
value: option,
level: 0
});
} else {
this.sort_options.push({
this.sorted_options.push({
index: index,
key: option.id,
value: (option.title) ? option.title : (option.display_name) ? option.display_name : option.name
key: option.id.toString(),
value: (option.title) ? option.title : (option.display_name) ? option.display_name : option.name,
level: (option.level) ? option.level : 0
});
}
}, this);
@ -521,24 +528,27 @@ export default {
// Option set sort_option data
if (!Array.isArray(created_options)) {
for (const [key, value] of Object.entries(created_options)) {
this.sort_options.push({
this.sorted_options.push({
key: key,
value: value
value: value,
level: 0
});
}
} else {
created_options.forEach(function (option, index) {
if (typeof(option) == 'string') {
this.sort_options.push({
this.sorted_options.push({
index: index,
key: index.toString(),
value: option
value: option,
level: 0
});
} else {
this.sort_options.push({
this.sorted_options.push({
index: index,
key: option.id,
value: (option.title) ? option.title : (option.display_name) ? option.display_name : option.name
key: option.id.toString(),
value: (option.title) ? option.title : (option.display_name) ? option.display_name : option.name,
level: (option.level) ? option.level : 0
});
}
}, this);
@ -558,7 +568,7 @@ export default {
// Option changed sort_option data
if (this.group) {
this.sort_options.forEach(function (option_group, group_index) {
this.sorted_options.forEach(function (option_group, group_index) {
option_group.value.forEach(function (option, index) {
if (this.multiple) {
let indexs = [];
@ -590,7 +600,7 @@ export default {
}, this);
}, this);
} else {
this.sort_options.forEach(function (option, index) {
this.sorted_options.forEach(function (option, index) {
if (this.multiple) {
let indexs = [];
let values = [];
@ -680,12 +690,12 @@ export default {
if (response.data.data) {
let data = response.data.data;
//this.sort_options = [];
//this.sorted_options = [];
data.forEach(function (option) {
let check = false;
this.sort_options.forEach(function (sort_option) {
this.sorted_options.forEach(function (sort_option) {
if (sort_option.key == option.id) {
check = true;
return;
@ -693,7 +703,7 @@ export default {
});
if (!check) {
this.sort_options.push({
this.sorted_options.push({
key: option.id.toString(),
value: (option.title) ? option.title : (option.display_name) ? option.display_name : option.name
});
@ -701,12 +711,12 @@ export default {
}, this);
this.sort_options = this.sort_options.filter(item => {
this.sorted_options = this.sorted_options.filter(item => {
return item.value.toLowerCase()
.indexOf(query.toLowerCase()) > -1;
});
} else {
this.sortOptions = [];
this.sortedOptions = [];
}
})
.catch(e => {
@ -715,7 +725,7 @@ export default {
// always executed
});
} else {
this.setSortOptions();
this.setSortedOptions();
}
},
@ -776,7 +786,7 @@ export default {
},
onModal(value) {
this.setSortOptions();
this.setSortedOptions();
let add_new = this.add_new;
@ -874,7 +884,7 @@ export default {
this.form.loading = false;
if (response.data.success) {
this.sort_options.push({
this.sorted_options.push({
key: response.data.data[this.add_new.field.key].toString(),
value: response.data.data[this.add_new.field.value],
});
@ -898,7 +908,7 @@ export default {
let documentClasses = document.body.classList;
documentClasses.remove("modal-open");
documentClasses.remove("overflow-hidden");
}
})
.catch(error => {
@ -917,7 +927,7 @@ export default {
let documentClasses = document.body.classList;
documentClasses.remove("modal-open");
documentClasses.remove("overflow-hidden");
},
addModal() {
@ -1003,7 +1013,7 @@ export default {
},
dynamicOptions: function(options) {
this.sort_options = [];
this.sorted_options = [];
this.selected = [];
if (this.group) {
@ -1015,11 +1025,12 @@ export default {
for (const [key, value] of Object.entries(_options)) {
values.push({
key: key,
value: value
value: value,
level: 0
});
}
this.sort_options.push({
this.sorted_options.push({
key: index,
value: values
});
@ -1027,16 +1038,18 @@ export default {
} else {
options.forEach(function (option, index) {
if (typeof(option) == 'string') {
this.sort_options.push({
this.sorted_options.push({
index: index,
key: index.toString(),
value: option
value: option,
level: 0
});
} else {
this.sort_options.push({
this.sorted_options.push({
index: index,
key: option.id,
value: (option.title) ? option.title : (option.display_name) ? option.display_name : option.name
key: option.id.toString(),
value: (option.title) ? option.title : (option.display_name) ? option.display_name : option.name,
level: (option.level) ? option.level : 0
});
}
}, this);
@ -1045,24 +1058,27 @@ export default {
// Option set sort_option data
if (!Array.isArray(options)) {
for (const [key, value] of Object.entries(options)) {
this.sort_options.push({
this.sorted_options.push({
key: key,
value: value
value: value,
level: 0
});
}
} else {
options.forEach(function (option, index) {
if (typeof(option) == 'string') {
this.sort_options.push({
this.sorted_options.push({
index: index,
key: index.toString(),
value: option
value: option,
level: 0
});
} else {
this.sort_options.push({
this.sorted_options.push({
index: index,
key: option.id,
value: (option.title) ? option.title : (option.display_name) ? option.display_name : option.name
key: option.id.toString(),
value: (option.title) ? option.title : (option.display_name) ? option.display_name : option.name,
level: (option.level) ? option.level : 0
});
}
}, this);
@ -1072,57 +1088,3 @@ export default {
},
}
</script>
<style scoped>
.form-group .modal {
z-index: 3050;
}
.el-select-dropdown__empty {
padding: 10px 0 0 !important;
}
.el-select-dropdown__empty.loading {
padding: 10px 0 !important;
}
.el-select__footer {
text-align: center !important;
border-top: 1px solid #dee2e6 !important;
padding: 0px !important;
cursor: pointer !important;
color: #3c3f72 !important;
font-weight: bold !important;
height: 38px !important;
line-height: 38px !important;
margin-top: 5px !important;
margin-bottom: -6px !important;
border-bottom-left-radius: 4px !important;
border-bottom-right-radius: 4px !important;
}
.el-select__footer.el-select-dropdown__item.hover {
background-color: inherit !important;
}
.el-select__footer.el-select-dropdown__item:hover, .el-select__footer.el-select-dropdown__item:focus {
background-color: #3c3f72 !important;
color: white !important;
border-top-color: #3c3f72;
}
.el-select__footer div span {
margin-left: 5px;
}
.badge-resize {
float: right;
margin-top: -32px;
margin-right: 35px;
position: relative;
}
.badge.badge-pill.badge-success {
border-radius: 0.375rem;
}
</style>

View File

@ -0,0 +1,125 @@
<template>
<div v-if="video || screenshots">
<div class="swiper-carousel overflow-hidden">
<div class="swiper-wrapper" style="flex-wrap: nowrap !important;">
<div class="swiper-slide" v-for="(screenshot, index) in screenshots" :key="index">
<a :href="screenshot.path_string" class="glightbox">
<img class="rounded-lg object-cover cursor-pointer" :src="screenshot.path_string" :alt="screenshot.alt_attribute" />
<div class="text-gray-700 text-sm my-2">{{ screenshot.description }}</div>
</a>
</div>
</div>
<div v-if="pagination" class="swiper-pagination w-full flex justify-center gap-1"></div>
<div v-if="arrow" class="swiper-button-next ltr:-right-8 rtl:-left-8 top-12">
<span class="material-icons text-5xl">chevron_right</span>
</div>
<div v-if="arrow" class="swiper-button-prev ltr:-left-8 rtl:-right-8 top-12">
<span class="material-icons text-5xl">chevron_left</span>
</div>
</div>
</div>
</template>
<script>
import Swiper, { Navigation, Pagination } from 'swiper';
Swiper.use([Navigation, Pagination]);
import GLightbox from 'glightbox';
import 'glightbox/dist/css/glightbox.min.css';
export default {
name: "akaunting-slider",
props: {
name: {
type: String,
default: null,
description: "App Name"
},
video: {
type: String,
default: null,
description: "App Video"
},
screenshots: {
type: Array,
default: false,
description: "App Screenshots"
},
height: {
type: String,
default: null,
description: "height of the carousel"
},
arrow: {
type: [Boolean, String],
default: false,
},
pagination: {
type: [Boolean, String],
default: false,
},
type: {
type: String,
default: '',
description: "type of the Carousel (card)"
},
sliderView: {
type: [Number, String],
default: 4,
},
sliderRow: {
type: [Number, String],
default: 2,
}
},
mounted() {
let media = [];
if (this.screenshots.length) {
this.screenshots.forEach(function(screenshot) {
media.push({ // For image
thumb: screenshot.path_string,
src: screenshot.path_string,
});
});
}
this.media = media;
new Swiper(".swiper-carousel", {
loop: false,
grid: {
rows: this.sliderRow,
},
spaceBetween: 30,
breakpoints: {
640: {
slidesPerView: 1
},
768: {
slidesPerView: this.sliderView,
}
},
pagination: {
el: ".swiper-pagination",
clickable: true
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
GLightbox({
touchNavigation: true,
loop: false,
autoplayVideos: false,
selector: ".glightbox"
});
},
data: function () {
return {
media: [],
}
},
}
</script>

View File

@ -0,0 +1,68 @@
<template>
<div class="lg:absolute w-12 hidden lg:flex items-center lg:ltr:right-0 lg:rtl:left-0 xl:-top-12 cursor-pointer">
<input type="radio" :name="name" v-show="selected == '0'" @click="enabled = 1" value="1" id="enabled-1" v-model="selected" class="w-full h-full absolute right-0 z-20 opacity-0 cursor-pointer">
<input type="radio" :name="name" v-show="selected == '1'" @click="enabled = 0" value="0" id="enabled-0" v-model="selected" class="w-full h-full absolute left-0 z-20 opacity-0 cursor-pointer">
<div class="absolute left-1 top-1 bg-white w-5 h-5 rounded-full transition transform" :class="selected == '1' ? 'translate-x-full' : 'translate-x-0'"></div>
<div class="block w-full h-7 rounded-full transition transition-color" :class="selected == '1' ? 'bg-green' : 'bg-green-200'"></div>
</div>
</template>
<script>
export default {
name: 'akaunting-switch',
props: {
name: null,
value: {
type: [String, Number, Array, Object, Boolean],
default: '1',
description: "Selectbox selected value"
},
model: {
type: [String, Number, Array, Object, Boolean],
default: '',
description: "Selectbox selected model"
},
inputData: {
type: [String, Number, Array, Object, Boolean],
},
},
data() {
return {
enabled: 1,
selected: this.value,
}
},
methods: {
change() {
this.$emit('interface', this.selected);
this.$emit('change', this.selected);
}
},
mounted() {
this.$emit('interface', this.selected);
setTimeout(function() {
this.change();
}.bind(this), 800);
},
watch: {
value: function(val) {
this.selected = val;
},
selected: function(val) {
this.change();
},
}
}
</script>

View File

@ -5,15 +5,14 @@
@cancel="onCancel"
v-if="display">
<template #modal-body>
<div class="modal-body text-left">
<div class="row">
<div class="col-md-12">
<div class="py-1 px-5 bg-body">
<div class="grid sm:grid-cols-6 gap-x-8 gap-y-6 my-3.5">
<div class="form-group sm:col-span-3">
<base-input
required
class="required"
v-model="form.name"
:label="text.name"
prepend-icon="fas fa-font"
:placeholder="placeholder.name"
:error="form.errors.name[0]"
@input="form.errors.name[0] = ''"
@ -21,59 +20,44 @@
</base-input>
</div>
<div class="col-md-12">
<div class="form-group sm:col-span-3">
<base-input
required
class="required"
:error="form.errors.class[0]"
:label="text.type">
<span class="el-input__prefix">
<span class="el-input__suffix-inner el-select-icon">
<i class="select-icon-position el-input__icon fa fa-bars"></i>
</span>
</span>
<el-select
class="select-primary"
@change="form.errors.class[0] = ''"
v-model="form.class" filterable
:placeholder="placeholder.type">
<el-option v-for="(name, value) in types"
class="select-primary"
:key="name"
:label="name"
:value="value">
:key="name"
:label="name"
:value="value">
</el-option>
</el-select>
</base-input>
</div>
<div class="col-md-6">
<base-input
:label="text.width">
<span class="el-input__prefix">
<span class="el-input__suffix-inner el-select-icon">
<i class="select-icon-position el-input__icon fas fa-ruler-horizontal"></i>
</span>
</span>
<div class="form-group sm:col-span-3">
<base-input :label="text.width">
<el-select
class="select-primary"
v-model="form.width" filterable
:placeholder="placeholder.width">
<el-option v-for="option in widthOptions"
class="select-primary"
:key="option.label"
:label="option.label"
:value="option.value">
:key="option.label"
:label="option.label"
:value="option.value">
</el-option>
</el-select>
</base-input>
</div>
<div class="col-md-6">
<div class="form-group sm:col-span-3">
<base-input
v-model="form.sort"
:label="text.sort"
prepend-icon="fas fa-sort"
:placeholder="placeholder.sort"
:error="form.errors.sort[0]"
@input="form.errors.sort[0] = ''"
@ -84,33 +68,20 @@
</template>
<template #card-footer>
<div class="row">
<div class="col-md-12">
<div class="float-right">
<button type="button" class="btn btn-icon btn-outline-secondary" @click="onCancel">
{{ text.cancel }}
</button>
<div class="flex items-center justify-end">
<button type="button" class="flex items-center justify-center px-6 py-1.5 text-base rounded-lg mr-2 bg-transparent hover:bg-gray-300 disabled:bg-gray-200" @click="onCancel">
{{ text.cancel }}
</button>
<button :disabled="form.loading" type="button" class="btn btn-icon btn-success button-submit" @click="onSave">
<span v-if="form.loading" class="btn-inner--icon"><i class="aka-loader"></i></span>
<span :class="[{'ml-0': form.loading}]" class="btn-inner--text">{{ text.save }}</span>
</button>
</div>
</div>
<button :disabled="form.loading" type="button" class="relative flex items-center justify-center bg-green hover:bg-green-700 text-white px-6 py-1.5 text-base rounded-lg disabled:bg-green-100" @click="onSave">
<i v-if="form.loading" class="animate-submit delay-[0.28s] absolute w-2 h-2 rounded-full left-0 right-0 -top-3.5 m-auto before:absolute before:w-2 before:h-2 before:rounded-full before:animate-submit before:delay-[0.14s] after:absolute after:w-2 after:h-2 after:rounded-full after:animate-submit before:-left-3.5 after:-right-3.5 after:delay-[0.42s]"></i>
<span :class="[{'opacity-0': form.loading}]">{{ text.save }}</span>
</button>
</div>
</template>
</akaunting-modal>
</template>
<style>
.el-input__prefix
{
left: 20px;
z-index: 999;
top: 2px;
}
</style>
<script>
import axios from 'axios';
import { Select, Option } from 'element-ui';
@ -197,19 +168,19 @@ export default {
widthOptions: [
{
label: '25%',
value: 'col-md-3'
value: 'w-full lg:w-1/4 px-6'
},
{
label: '33%',
value: 'col-md-4'
value: 'w-full lg:w-1/3 px-6'
},
{
label: '50%',
value: 'col-md-6'
value: 'w-full lg:w-2/4 px-12'
},
{
label: '100%',
value: 'col-md-12'
value: 'w-full px-12'
}
],
form: {
@ -282,7 +253,7 @@ export default {
onCancel() {
let documentClasses = document.body.classList;
documentClasses.remove("modal-open");
documentClasses.remove("overflow-hidden");
this.display = false;
this.form.name = '';
@ -301,9 +272,9 @@ export default {
let documentClasses = document.body.classList;
if (val) {
documentClasses.add("modal-open");
documentClasses.add("overflow-hidden");
} else {
documentClasses.remove("modal-open");
documentClasses.remove("overflow-hidden");
}
}
}

View File

@ -48,6 +48,4 @@
}
}
};
</script>
<style>
</style>
</script>

View File

@ -68,14 +68,4 @@ export default {
}
}
};
</script>
<style scoped lang="scss">
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
}
i {
padding: 0 3px;
}
</style>
</script>

View File

@ -1,100 +0,0 @@
<template>
<component
:is="tag"
:class="[{ show: isOpen }, `drop${direction}`]"
@click="toggleDropDown"
v-click-outside="closeDropDown"
>
<slot name="title-container" :is-open="isOpen">
<component
:is="titleTag"
class="btn-rotate"
:class="[{'dropdown-toggle': hasToggle}, titleClasses]"
:aria-expanded="isOpen"
data-toggle="dropdown"
>
<slot name="title" :is-open="isOpen">
<i :class="icon"></i> {{ title }}
</slot>
</component>
</slot>
<ul
class="dropdown-menu"
:class="[
{ show: isOpen },
{ 'dropdown-menu-right': menuOnRight },
menuClasses
]"
>
<slot></slot>
</ul>
</component>
</template>
<script>
export default {
name: 'base-dropdown',
props: {
tag: {
type: String,
default: 'div',
description: 'Dropdown html tag (e.g div, ul etc)'
},
titleTag: {
type: String,
default: 'button',
description: 'Dropdown title (toggle) html tag'
},
title: {
type: String,
description: 'Dropdown title'
},
direction: {
type: String,
default: 'down', // up | down
description: 'Dropdown menu direction (up|down)'
},
icon: {
type: String,
description: 'Dropdown icon'
},
titleClasses: {
type: [String, Object, Array],
description: 'Title css classes'
},
menuClasses: {
type: [String, Object],
description: 'Menu css classes'
},
menuOnRight: {
type: Boolean,
description: 'Whether menu should appear on the right'
},
hasToggle: {
type: Boolean,
description: 'Whether dropdown has arrow icon shown',
default: true
}
},
data() {
return {
isOpen: false
};
},
methods: {
toggleDropDown() {
this.isOpen = !this.isOpen;
this.$emit('change', this.isOpen);
},
closeDropDown() {
this.isOpen = false;
this.$emit('change', false);
}
}
};
</script>
<style lang="scss" scoped>
.dropdown {
cursor: pointer;
user-select: none;
}
</style>

View File

@ -1,23 +0,0 @@
<template>
<div class="header" :class="{[`bg-${type}`]: type}">
<div class="container-fluid">
<div class="header-body">
<slot></slot>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'base-header',
props: {
type: {
type: String,
default: 'success',
description: 'Header background type'
}
}
}
</script>
<style>
</style>

View File

@ -1,134 +0,0 @@
<template>
<ul class="pagination" :class="[size && `pagination-${size}`, align && `justify-content-${align}`]">
<li class="page-item prev-page" :class="{disabled: value === 1}">
<a class="page-link" aria-label="Previous" @click="prevPage">
<span aria-hidden="true"><i class="fa fa-angle-left" aria-hidden="true"></i></span>
</a>
</li>
<li class="page-item" :class="{active: value === item}"
:key="item"
v-for="item in range(minPage, maxPage)">
<a class="page-link" @click="changePage(item)">{{item}}</a>
</li>
<li class="page-item next-page" :class="{disabled: value === totalPages}">
<a class="page-link" aria-label="Next" @click="nextPage">
<span aria-hidden="true"><i class="fa fa-angle-right" aria-hidden="true"></i></span>
</a>
</li>
</ul>
</template>
<script>
export default {
name: "base-pagination",
props: {
pageCount: {
type: Number,
default: 0,
description:
"Pagination page count. This should be specified in combination with perPage"
},
perPage: {
type: Number,
default: 10,
description:
"Pagination per page. Should be specified with total or pageCount"
},
total: {
type: Number,
default: 0,
description:
"Can be specified instead of pageCount. The page count in this case will be total/perPage"
},
value: {
type: Number,
default: 1,
description: "Pagination value"
},
size: {
type: String,
default: "",
description: "Pagination size"
},
align: {
type: String,
default: "",
description: "Pagination alignment (e.g center|start|end)"
}
},
computed: {
totalPages() {
if (this.pageCount > 0) return this.pageCount;
if (this.total > 0) {
return Math.ceil(this.total / this.perPage);
}
return 1;
},
pagesToDisplay() {
if (this.totalPages > 0 && this.totalPages < this.defaultPagesToDisplay) {
return this.totalPages;
}
return this.defaultPagesToDisplay;
},
minPage() {
if (this.value >= this.pagesToDisplay) {
const pagesToAdd = Math.floor(this.pagesToDisplay / 2);
const newMaxPage = pagesToAdd + this.value;
if (newMaxPage > this.totalPages) {
return this.totalPages - this.pagesToDisplay + 1;
}
return this.value - pagesToAdd;
} else {
return 1;
}
},
maxPage() {
if (this.value >= this.pagesToDisplay) {
const pagesToAdd = Math.floor(this.pagesToDisplay / 2);
const newMaxPage = pagesToAdd + this.value;
if (newMaxPage < this.totalPages) {
return newMaxPage;
} else {
return this.totalPages;
}
} else {
return this.pagesToDisplay;
}
}
},
data() {
return {
defaultPagesToDisplay: 5
};
},
methods: {
range(min, max) {
let arr = [];
for (let i = min; i <= max; i++) {
arr.push(i);
}
return arr;
},
changePage(item) {
this.$emit("input", item);
},
nextPage() {
if (this.value < this.totalPages) {
this.$emit("input", this.value + 1);
}
},
prevPage() {
if (this.value > 1) {
this.$emit("input", this.value - 1);
}
}
},
watch: {
perPage() {
this.$emit("input", 1);
},
total() {
this.$emit("input", 1);
}
}
};
</script>

View File

@ -1,90 +0,0 @@
<template>
<div class="wrapper">
<div :class="`progress-${type}`" v-if="showLabel">
<div class="progress-label">
<slot name="label">
<span>{{label}}</span>
</slot>
</div>
<div class="progress-percentage">
<slot>
<span>{{value}}%</span>
</slot>
</div>
</div>
<div class="progress"
:class="[{[`progress-${size}`]: size}, progressClasses]"
:style="`height: ${height}px`">
<div class="progress-bar"
:class="computedClasses"
role="progressbar"
:aria-valuenow="value"
aria-valuemin="0"
aria-valuemax="100"
:style="`width: ${value}%;`">
</div>
</div>
</div>
</template>
<script>
export default {
name: "base-progress",
props: {
striped: {
type: Boolean,
description: "Whether progress is striped"
},
animated: {
type: Boolean,
description:
"Whether progress is animated (works only with `striped` prop together)"
},
label: {
type: String,
description: "Progress label (shown on the left above progress)"
},
height: {
type: Number,
default: 3,
description: "Progress line height"
},
type: {
type: String,
default: "default",
description: "Progress type (e.g danger, primary etc)"
},
showLabel: {
type: Boolean,
default: false
},
progressClasses: {
type: [Array, String],
default: '',
description: 'Progress css classes'
},
size: {
type: String,
default: ''
},
value: {
type: Number,
default: 0,
validator: value => {
return value >= 0 && value <= 100;
},
description: "Progress value"
}
},
computed: {
computedClasses() {
return [
{ "progress-bar-striped": this.striped },
{ "progress-bar-animated": this.animated },
{ [`bg-${this.type}`]: this.type }
];
}
}
};
</script>
<style>
</style>

View File

@ -1,96 +0,0 @@
<template>
<div class="slider" :disabled="disabled"></div>
</template>
<script>
import noUiSlider from 'nouislider';
export default {
name: 'base-slider',
props: {
value: {
type: [String, Array, Number],
description: 'slider value'
},
disabled: {
type: Boolean,
default: false,
description: 'whether the slider is disabled'
},
start: {
type: [Number, Array],
default: 0,
description:
'[noUi Slider start](https://refreshless.com/nouislider/slider-options/#section-start)'
},
connect: {
type: [Boolean, Array],
default: () => [true, false],
description:
'[noUi Slider connect](https://refreshless.com/nouislider/slider-options/#section-connect)'
},
range: {
type: Object,
default: () => {
return {
min: 0,
max: 100
};
},
description:
'[noUi Slider range](https://refreshless.com/nouislider/slider-values/#section-range)'
},
options: {
type: Object,
default: () => {
return {};
},
description:
'[noUi Slider options](https://refreshless.com/nouislider/slider-options/)'
}
},
data() {
return {
slider: null
};
},
methods: {
createSlider() {
noUiSlider.create(this.$el, {
start: this.value || this.start,
connect: Array.isArray(this.value) ? true : this.connect,
range: this.range,
...this.options
});
const slider = this.$el.noUiSlider;
slider.on('slide', () => {
let value = slider.get();
if (value !== this.value) {
this.$emit('input', value);
}
});
}
},
mounted() {
this.createSlider();
},
watch: {
value(newValue, oldValue) {
const slider = this.$el.noUiSlider;
const sliderValue = slider.get();
if (newValue !== oldValue && sliderValue !== newValue) {
if (Array.isArray(sliderValue) && Array.isArray(newValue)) {
if (
oldValue.length === newValue.length &&
oldValue.every((v, i) => v === newValue[i])
) {
slider.set(newValue);
}
} else {
slider.set(newValue);
}
}
}
}
};
</script>
<style></style>

View File

@ -1,49 +0,0 @@
<template>
<label class="custom-toggle" :class="switchClass">
<input type="checkbox" v-model="model">
<span class="custom-toggle-slider rounded-circle"
:data-label-off="offText"
:data-label-on="onText">
</span>
</label>
</template>
<script>
export default {
name: 'base-switch',
props: {
value: [Array, Boolean],
type: String,
onText: {
type: String,
default: 'Yes'
},
offText: {
type: String,
default: 'No'
}
},
computed: {
switchClass() {
let baseClass = 'custom-toggle-';
if (this.type) {
return baseClass + this.type
}
return ''
},
model: {
get() {
return this.value;
},
set(value) {
this.$emit('input', value);
}
}
},
methods: {
triggerToggle() {
this.model = !this.model;
}
}
};
</script>
<style></style>

View File

@ -1,70 +0,0 @@
<template>
<table class="table tablesorter" :class="tableClass">
<thead :class="theadClasses">
<tr>
<slot name="columns" :columns="columns">
<th v-for="column in columns" :key="column">{{ column }}</th>
</slot>
</tr>
</thead>
<tbody :class="tbodyClasses">
<tr v-for="(item, index) in data" :key="index">
<slot :row="item" :index="index">
<td
v-for="(column, index) in columns"
:key="index"
v-if="hasValue(item, column)"
>
{{ itemValue(item, column) }}
</td>
</slot>
</tr>
</tbody>
</table>
</template>
<script>
export default {
name: 'base-table',
props: {
columns: {
type: Array,
default: () => [],
description: 'Table columns'
},
data: {
type: Array,
default: () => [],
description: 'Table data'
},
type: {
type: String, // striped | hover
default: '',
description: 'Whether table is striped or hover type'
},
theadClasses: {
type: String,
default: '',
description: '<thead> css classes'
},
tbodyClasses: {
type: String,
default: '',
description: '<tbody> css classes'
}
},
computed: {
tableClass() {
return this.type && `table-${this.type}`;
}
},
methods: {
hasValue(item, column) {
return item[column.toLowerCase()] !== 'undefined';
},
itemValue(item, column) {
return item[column.toLowerCase()];
}
}
};
</script>
<style></style>

View File

@ -1,26 +0,0 @@
<template>
<nav aria-label="breadcrumb">
<ol class="breadcrumb"
:class="[{[`bg-${type}`]: type}, listClasses]">
<slot></slot>
</ol>
</nav>
</template>
<script>
export default {
name: 'breadcrumb',
props: {
type: {
type: String,
default: '',
description: 'Breadcrumb background type'
},
listClasses: {
type: [String, Object],
default: '',
description: 'Breadcrumb list classes'
}
}
};
</script>
<style></style>

View File

@ -1,16 +0,0 @@
<template>
<li class="breadcrumb-item" :class="{ active: active }"><slot></slot></li>
</template>
<script>
export default {
name: 'breadcrumb-item',
props: {
active: {
type: Boolean,
default: false,
description: 'Whether breadcrumb item is active'
}
}
};
</script>
<style></style>

View File

@ -1,45 +0,0 @@
<template>
<bread-crumb list-classes="breadcrumb-links breadcrumb-dark">
<BreadCrumbItem>
<li class="breadcrumb-item">
<router-link to="/">
<i class="fas fa-home"></i>
</router-link>
</li>
</BreadCrumbItem>
<BreadCrumbItem
v-for="(route, index) in $route.matched.slice()"
:key="route.name"
:active="index === $route.matched.length - 1"
style="display:inline-block"
>
<router-link
:to="{ name: route.name }"
v-if="index < $route.matched.length - 1"
>
{{ route.name }}
</router-link>
<span v-else>{{ route.name }}</span>
</BreadCrumbItem>
</bread-crumb>
</template>
<script>
import BreadCrumb from './Breadcrumb';
import BreadCrumbItem from './BreadcrumbItem';
export default {
name: 'route-breadcrumb',
components: {
BreadCrumb,
BreadCrumbItem
},
methods: {
getBreadName(route) {
return route.name;
}
}
};
</script>
<style scoped></style>

View File

@ -1,39 +0,0 @@
<template>
<div class="btn-group-toggle" data-toggle="buttons">
<label class="btn" :class="[{ active: value }, buttonClasses]">
<input v-model="model" type="checkbox" checked="" autocomplete="off">
<slot></slot>
</label>
</div>
</template>
<script>
export default {
name: 'button-checkbox',
props: {
value: {
type: Boolean,
description: 'Checked value'
},
buttonClasses: {
type: [String, Object],
description: 'Inner button css classes'
}
},
model: {
prop: 'value',
event: 'change'
},
computed: {
model: {
get() {
return this.value
},
set(val) {
this.$emit('change', val)
}
}
}
}
</script>
<style>
</style>

View File

@ -1,47 +0,0 @@
<template>
<div class="btn-group-toggle" data-toggle="buttons">
<label v-for="(option, index) in options"
:key="index"
class="btn"
:class="[{ active: value === option.value }, buttonClasses]">
<input :value="option.value" v-model="model" type="radio" id="option1" autocomplete="off" checked="">
{{option.label}}
</label>
</div>
</template>
<script>
export default {
name: 'button-radio-group',
props: {
options: {
type: Array,
description: 'Radio options. Should be an array of objects {value: "", label: ""}',
default: () => []
},
value: {
type: String,
description: 'Radio value'
},
buttonClasses: {
type: [String, Object],
description: 'Inner button css classes'
}
},
model: {
prop: 'value',
event: 'change'
},
computed: {
model: {
get() {
return this.value
},
set(val) {
this.$emit('change', val)
}
}
}
}
</script>
<style>
</style>

View File

@ -68,5 +68,3 @@
}
};
</script>
<style>
</style>

View File

@ -45,5 +45,4 @@
iconClasses: [String, Array]
}
};
</script>
<style></style>
</script>

View File

@ -1,30 +0,0 @@
import { Bar, mixins } from 'vue-chartjs';
import globalOptionsMixin from "@/components/Charts/globalOptionsMixin";
export default {
name: 'bar-chart',
extends: Bar,
mixins: [mixins.reactiveProp, globalOptionsMixin],
props: {
extraOptions: {
type: Object,
default: () => ({})
}
},
data() {
return {
ctx: null
};
},
mounted() {
this.$watch(
'chartData',
(newVal, oldVal) => {
if (!oldVal) {
this.renderChart(this.chartData, this.extraOptions);
}
},
{ immediate: true }
);
}
};

View File

@ -1,30 +0,0 @@
import { Doughnut, mixins } from 'vue-chartjs';
import globalOptionsMixin from "./../../components/Charts/globalOptionsMixin";
export default {
name: 'doughnut-chart',
extends: Doughnut,
mixins: [mixins.reactiveProp, globalOptionsMixin],
props: {
extraOptions: {
type: Object,
default: () => ({})
}
},
data() {
return {
ctx: null
};
},
mounted() {
this.$watch(
'chartData',
(newVal, oldVal) => {
if (!oldVal) {
this.renderChart(this.chartData, this.extraOptions);
}
},
{ immediate: true }
);
}
};

View File

@ -1,30 +0,0 @@
import { Line, mixins } from 'vue-chartjs';
import globalOptionsMixin from "./../../components/Charts/globalOptionsMixin";
export default {
name: 'line-chart',
extends: Line,
mixins: [mixins.reactiveProp, globalOptionsMixin],
props: {
extraOptions: {
type: Object,
default: () => ({})
}
},
data() {
return {
ctx: null
};
},
mounted() {
this.$watch(
'chartData',
(newVal, oldVal) => {
if (!oldVal) {
this.renderChart(this.chartData, this.extraOptions);
}
},
{ immediate: true }
);
}
};

View File

@ -1,30 +0,0 @@
import { Pie, mixins } from 'vue-chartjs';
import globalOptionsMixin from "@/components/Charts/globalOptionsMixin";
export default {
name: 'pie-chart',
extends: Pie,
mixins: [mixins.reactiveProp, globalOptionsMixin],
props: {
extraOptions: {
type: Object,
default: () => ({})
}
},
data() {
return {
ctx: null
};
},
mounted() {
this.$watch(
'chartData',
(newVal, oldVal) => {
if (!oldVal) {
this.renderChart(this.chartData, this.extraOptions);
}
},
{ immediate: true }
);
}
};

View File

@ -1,493 +0,0 @@
import { parseOptions } from "./../../components/Charts/optionHelpers";
export const Charts = {
mode: 'light',//(themeMode) ? themeMode : 'light';
fonts: {
base: 'Open Sans'
},
colors: {
gray: {
100: '#f6f9fc',
200: '#e9ecef',
300: '#dee2e6',
400: '#ced4da',
500: '#adb5bd',
600: '#8898aa',
700: '#525f7f',
800: '#32325d',
900: '#212529'
},
theme: {
'default': '#172b4d',
'primary': '#5e72e4',
'secondary': '#f4f5f7',
'info': '#11cdef',
'success': '#2dce89',
'danger': '#f5365c',
'warning': '#fb6340'
},
black: '#12263F',
white: '#FFFFFF',
transparent: 'transparent',
}
};
function chartOptions(Chart) {
let { colors, mode, fonts } = Charts;
// Options
let options = {
defaults: {
global: {
responsive: true,
maintainAspectRatio: false,
defaultColor: (mode == 'dark') ? colors.gray[700] : colors.gray[600],
defaultFontColor: (mode == 'dark') ? colors.gray[700] : colors.gray[600],
defaultFontFamily: fonts.base,
defaultFontSize: 13,
layout: {
padding: 0
},
legend: {
display: false,
position: 'bottom',
labels: {
usePointStyle: true,
padding: 16
}
},
elements: {
point: {
radius: 0,
backgroundColor: colors.theme['primary']
},
line: {
tension: .4,
borderWidth: 4,
borderColor: colors.theme['primary'],
backgroundColor: colors.transparent,
borderCapStyle: 'rounded'
},
rectangle: {
backgroundColor: colors.theme['warning']
},
arc: {
backgroundColor: colors.theme['primary'],
borderColor: (mode == 'dark') ? colors.gray[800] : colors.white,
borderWidth: 4
}
},
tooltips: {
enabled: true,
mode: 'index',
intersect: false,
}
},
doughnut: {
cutoutPercentage: 83,
legendCallback: function (chart) {
let data = chart.data;
let content = '';
data.labels.forEach(function (label, index) {
let bgColor = data.datasets[0].backgroundColor[index];
content += '<span class="chart-legend-item">';
content += '<i class="chart-legend-indicator" style="background-color: ' + bgColor + '"></i>';
content += label;
content += '</span>';
});
return content;
}
}
}
};
// yAxes
Chart.scaleService.updateScaleDefaults('linear', {
gridLines: {
borderDash: [2],
borderDashOffset: [2],
color: (mode == 'dark') ? colors.gray[900] : colors.gray[300],
drawBorder: false,
drawTicks: false,
lineWidth: 0,
zeroLineWidth: 0,
zeroLineColor: (mode == 'dark') ? colors.gray[900] : colors.gray[300],
zeroLineBorderDash: [2],
zeroLineBorderDashOffset: [2]
},
ticks: {
beginAtZero: true,
padding: 10,
callback: function (value) {
if (!(value % 10)) {
return value
}
}
}
});
// xAxes
Chart.scaleService.updateScaleDefaults('category', {
gridLines: {
drawBorder: false,
drawOnChartArea: false,
drawTicks: false
},
ticks: {
padding: 20
},
maxBarThickness: 10
});
return options;
};
export function initGlobalOptions(Chart) {
parseOptions(Chart, chartOptions(Chart));
}
export const basicOptions = {
maintainAspectRatio: false,
legend: {
display: false
},
responsive: true
};
export let blueChartOptions = {
scales: {
yAxes: [{
gridLines: {
color: Charts.colors.gray[700],
zeroLineColor: Charts.colors.gray[700]
}
}]
}
};
export let lineChartOptionsBlue = {
...basicOptions,
tooltips: {
backgroundColor: '#f5f5f5',
titleFontColor: '#333',
bodyFontColor: '#666',
bodySpacing: 4,
xPadding: 12,
mode: 'nearest',
intersect: 0,
position: 'nearest'
},
responsive: true,
scales: {
yAxes: [
{
barPercentage: 1.6,
gridLines: {
drawBorder: false,
color: 'rgba(29,140,248,0.0)',
zeroLineColor: 'transparent'
},
ticks: {
suggestedMin: 60,
suggestedMax: 125,
padding: 20,
fontColor: '#9e9e9e'
}
}
],
xAxes: [
{
barPercentage: 1.6,
gridLines: {
drawBorder: false,
color: 'rgba(29,140,248,0.1)',
zeroLineColor: 'transparent'
},
ticks: {
padding: 20,
fontColor: '#9e9e9e'
}
}
]
}
};
export let barChartOptionsGradient = {
...basicOptions,
tooltips: {
backgroundColor: '#f5f5f5',
titleFontColor: '#333',
bodyFontColor: '#666',
bodySpacing: 4,
xPadding: 12,
mode: 'nearest',
intersect: 0,
position: 'nearest'
},
responsive: true,
scales: {
yAxes: [
{
gridLines: {
drawBorder: false,
color: 'rgba(253,93,147,0.1)',
zeroLineColor: 'transparent'
},
ticks: {
suggestedMin: 60,
suggestedMax: 125,
padding: 20,
fontColor: '#9e9e9e'
}
}
],
xAxes: [
{
gridLines: {
drawBorder: false,
color: 'rgba(253,93,147,0.1)',
zeroLineColor: 'transparent'
},
ticks: {
padding: 20,
fontColor: '#9e9e9e'
}
}
]
}
};
export let pieChartOptions = {
...basicOptions,
cutoutPercentage: 70,
tooltips: {
backgroundColor: '#f5f5f5',
titleFontColor: '#333',
bodyFontColor: '#666',
bodySpacing: 4,
xPadding: 12,
mode: 'nearest',
intersect: 0,
position: 'nearest'
},
scales: {
yAxes: [
{
display: 0,
ticks: {
display: false
},
gridLines: {
drawBorder: false,
zeroLineColor: 'transparent',
color: 'rgba(255,255,255,0.05)'
}
}
],
xAxes: [
{
display: 0,
barPercentage: 1.6,
gridLines: {
drawBorder: false,
color: 'rgba(255,255,255,0.1)',
zeroLineColor: 'transparent'
},
ticks: {
display: false
}
}
]
}
};
export let purpleChartOptions = {
...basicOptions,
tooltips: {
backgroundColor: '#f5f5f5',
titleFontColor: '#333',
bodyFontColor: '#666',
bodySpacing: 4,
xPadding: 12,
mode: 'nearest',
intersect: 0,
position: 'nearest'
},
scales: {
yAxes: [
{
barPercentage: 1.6,
gridLines: {
drawBorder: false,
color: 'rgba(29,140,248,0.0)',
zeroLineColor: 'transparent'
},
ticks: {
suggestedMin: 60,
suggestedMax: 125,
padding: 20,
fontColor: '#9a9a9a'
}
}
],
xAxes: [
{
barPercentage: 1.6,
gridLines: {
drawBorder: false,
color: 'rgba(225,78,202,0.1)',
zeroLineColor: 'transparent'
},
ticks: {
padding: 20,
fontColor: '#9a9a9a'
}
}
]
}
};
export let orangeChartOptions = {
...basicOptions,
tooltips: {
backgroundColor: '#f5f5f5',
titleFontColor: '#333',
bodyFontColor: '#666',
bodySpacing: 4,
xPadding: 12,
mode: 'nearest',
intersect: 0,
position: 'nearest'
},
scales: {
yAxes: [
{
barPercentage: 1.6,
gridLines: {
drawBorder: false,
color: 'rgba(29,140,248,0.0)',
zeroLineColor: 'transparent'
},
ticks: {
suggestedMin: 50,
suggestedMax: 110,
padding: 20,
fontColor: '#ff8a76'
}
}
],
xAxes: [
{
barPercentage: 1.6,
gridLines: {
drawBorder: false,
color: 'rgba(220,53,69,0.1)',
zeroLineColor: 'transparent'
},
ticks: {
padding: 20,
fontColor: '#ff8a76'
}
}
]
}
};
export let greenChartOptions = {
...basicOptions,
tooltips: {
backgroundColor: '#f5f5f5',
titleFontColor: '#333',
bodyFontColor: '#666',
bodySpacing: 4,
xPadding: 12,
mode: 'nearest',
intersect: 0,
position: 'nearest'
},
scales: {
yAxes: [
{
barPercentage: 1.6,
gridLines: {
drawBorder: false,
color: 'rgba(29,140,248,0.0)',
zeroLineColor: 'transparent'
},
ticks: {
suggestedMin: 50,
suggestedMax: 125,
padding: 20,
fontColor: '#9e9e9e'
}
}
],
xAxes: [
{
barPercentage: 1.6,
gridLines: {
drawBorder: false,
color: 'rgba(0,242,195,0.1)',
zeroLineColor: 'transparent'
},
ticks: {
padding: 20,
fontColor: '#9e9e9e'
}
}
]
}
};
export let barChartOptions = {
...basicOptions,
tooltips: {
backgroundColor: '#f5f5f5',
titleFontColor: '#333',
bodyFontColor: '#666',
bodySpacing: 4,
xPadding: 12,
mode: 'nearest',
intersect: 0,
position: 'nearest'
},
scales: {
yAxes: [
{
gridLines: {
drawBorder: false,
color: 'rgba(29,140,248,0.1)',
zeroLineColor: 'transparent'
},
ticks: {
suggestedMin: 60,
suggestedMax: 120,
padding: 20,
fontColor: '#9e9e9e'
}
}
],
xAxes: [
{
gridLines: {
drawBorder: false,
color: 'rgba(29,140,248,0.1)',
zeroLineColor: 'transparent'
},
ticks: {
padding: 20,
fontColor: '#9e9e9e'
}
}
]
}
};

View File

@ -1,7 +0,0 @@
import Chart from 'chart.js';
import { initGlobalOptions } from "./../../components/Charts/config";
export default {
mounted() {
initGlobalOptions(Chart);
}
}

View File

@ -1,10 +0,0 @@
// Parse global options
export function parseOptions(parent, options) {
for (let item in options) {
if (typeof options[item] !== 'object') {
parent[item] = options[item];
} else {
parseOptions(parent[item], options[item]);
}
}
}

View File

@ -1,35 +0,0 @@
<template>
<button
type="button"
class="navbar-toggler"
data-toggle="collapse"
@click="handleClick"
:data-target="`#${target}`"
:aria-controls="target"
:aria-expanded="expanded"
aria-label="Toggle navigation"
>
<span></span> <span></span>
</button>
</template>
<script>
export default {
name: 'close-button',
props: {
target: {
type: [String, Number],
description: 'Close button target element'
},
expanded: {
type: Boolean,
description: 'Whether button is expanded (aria-expanded attribute)'
}
},
methods: {
handleClick(evt) {
this.$emit('click', evt);
}
}
};
</script>
<style></style>

View File

@ -1,84 +0,0 @@
<template>
<div
id="accordion"
role="tablist"
aria-multiselectable="true"
class="accordion"
>
<slot></slot>
</div>
</template>
<script>
export default {
name: 'collapse',
props: {
animationDuration: {
type: Number,
default: 250,
description: 'Collapse animation duration'
},
multipleActive: {
type: Boolean,
default: true,
description: 'Whether you can have multiple collapse items opened at the same time'
},
activeIndex: {
type: Number,
default: -1,
description: 'Active collapse item index'
}
},
provide() {
return {
animationDuration: this.animationDuration,
multipleActive: this.multipleActive,
addItem: this.addItem,
removeItem: this.removeItem,
deactivateAll: this.deactivateAll
};
},
data() {
return {
items: []
};
},
methods: {
addItem(item) {
const index = this.$slots.default.indexOf(item.$vnode);
if (index !== -1) {
this.items.splice(index, 0, item);
}
},
removeItem(item) {
const items = this.items;
const index = items.indexOf(item);
if (index > -1) {
items.splice(index, 1);
}
},
deactivateAll() {
this.items.forEach(item => {
item.active = false;
});
},
activateItem() {
if (this.activeIndex !== -1) {
this.items[this.activeIndex].active = true;
}
}
},
mounted() {
this.$nextTick(() => {
this.activateItem();
});
},
watch: {
activeIndex() {
this.activateItem();
}
}
};
</script>
<style scoped></style>

View File

@ -1,91 +0,0 @@
<template>
<div class="card">
<div role="tab" class="card-header" :aria-expanded="active">
<a
data-toggle="collapse"
data-parent="#accordion"
:href="`#${itemId}`"
@click.prevent="activate"
:aria-controls="`content-${itemId}`"
>
<slot name="title"> {{ title }} </slot>
<i class="tim-icons icon-minimal-down"></i>
</a>
</div>
<collapse-transition :duration="animationDuration">
<div
v-show="active"
:id="`content-${itemId}`"
role="tabpanel"
:aria-labelledby="title"
class="collapsed"
>
<div class="card-body"><slot></slot></div>
</div>
</collapse-transition>
</div>
</template>
<script>
import { CollapseTransition } from 'vue2-transitions';
export default {
name: 'collapse-item',
components: {
CollapseTransition
},
props: {
title: {
type: String,
default: '',
description: 'Collapse item title'
},
id: String
},
inject: {
animationDuration: {
default: 250
},
multipleActive: {
default: false
},
addItem: {
default: () => {}
},
removeItem: {
default: () => {}
},
deactivateAll: {
default: () => {}
}
},
computed: {
itemId() {
return this.id || this.title;
}
},
data() {
return {
active: false
};
},
methods: {
activate() {
let wasActive = this.active;
if (!this.multipleActive) {
this.deactivateAll();
}
this.active = !wasActive;
}
},
mounted() {
this.addItem(this);
},
destroyed() {
if (this.$el && this.$el.parentNode) {
this.$el.parentNode.removeChild(this.$el);
}
this.removeItem(this);
}
};
</script>
<style></style>

View File

@ -1,76 +1,58 @@
<template>
<div class="card-item" :class="{ '-active' : isCardFlipped }">
<div class="card-item__side -front">
<div class="card-item relative w-2/4 lg:w-3/4 h-48 m-auto" :class="{ '-active' : isCardFlipped }">
<div class="card-item__side h-full rounded-lg shadow-lg overflow-hidden" style="transform: perspective(2000px) rotateY(0deg) rotateX(0deg) rotate(0deg);
transform-style: preserve-3d;
transition: all 0.8s cubic-bezier(0.71, 0.03, 0.56, 0.85);
backface-visibility: hidden;">
<div
class="card-item__focus"
:class="{'-active' : focusElementStyle }"
class="absolute w-full h-full left-0 right-0 top-0 rounded-sm overflow-hidden z-10 pointer-events-none opacity-0"
style="transition: all 0.35s cubic-bezier(0.71, 0.03, 0.56, 0.85);"
:class="{'opacity-100' : focusElementStyle }"
:style="focusElementStyle"
ref="focusElement"
></div>
<div class="card-item__cover">
<div class="absolute w-full h-full bg-black left-0 top-0 rounded-lg overflow-hidden" style="background-image: linear-gradient(147deg, #354fce 0%, #0c296b 74%);">
<img
v-if="currentCardBackground"
:src="currentCardBackground"
class="card-item__bg"
class="w-full h-full block object-cover"
/>
</div>
<div class="card-item__wrapper">
<div class="card-item__top">
<div class="relative h-full py-6 px-4 select-none">
<div class="flex items-start justify-between px-4">
<img
src="https://raw.githubusercontent.com/muhammederdem/credit-card-form/master/src/assets/images/chip.png"
class="card-item__chip"
class="w-12"
/>
<div class="card-item__type">
<div class="relative w-full h-12 flex flex-end">
<transition name="slide-fade-up">
<img
:src="'https://raw.githubusercontent.com/muhammederdem/credit-card-form/master/src/assets/images/' + cardType + '.png'"
v-if="cardType"
:key="cardType"
alt
class="card-item__typeImg"
class="w-full h-full object-right-top object-contain"
/>
</transition>
</div>
</div>
<label :for="fields.cardNumber" class="card-item__number" :ref="fields.cardNumber">
<template>
<span v-for="(n, $index) in currentPlaceholder" :key="$index">
<transition name="slide-fade-up">
<div class="card-item__numberItem" v-if="getIsNumberMasked($index, n)">*</div>
<div
class="card-item__numberItem"
:class="{ '-active' : n.trim() === '' }"
:key="currentPlaceholder"
v-else-if="labels.cardNumber.length > $index"
>{{labels.cardNumber[$index]}}</div>
<div
class="card-item__numberItem"
:class="{ '-active' : n.trim() === '' }"
v-else
:key="currentPlaceholder + 1"
>{{n}}</div>
</transition>
</span>
</template>
</label>
<div class="card-item__content">
<label :for="fields.cardName" class="card-item__info" :ref="fields.cardName">
<div class="card-item__holder">Card Holder</div>
<div class="flex items-start justify-between text-white">
<label :for="fields.cardName" class="p-2 block cursor-pointer text-white" :ref="fields.cardName">
<transition name="slide-fade-up">
<div class="card-item__name" v-if="labels.cardName.length" key="1">
<div class="text-lg overflow-hidden" v-if="labels.cardName.length" key="1">
<transition-group name="slide-fade-right">
<span
class="card-item__nameItem"
class="text-lg overflow-hidden"
v-for="(n, $index) in labels.cardName.replace(/\s\s+/g, ' ')"
:key="$index + 1"
>{{n}}</span>
</transition-group>
</div>
<div class="card-item__name" v-else key="2">Full Name</div>
<div class="text-lg overflow-hidden" v-else key="2">Full Name</div>
</transition>
</label>
<div class="card-item__date" ref="cardDate">
<label :for="fields.cardMonth" class="card-item__dateTitle">Expires</label>
<div class="flex flex-wrap shrink-0 text-lg p-2 cursor-pointer" ref="cardDate">
<label :for="fields.cardMonth" class="card-item__dateItem">
<transition name="slide-fade-up">
<span v-if="labels.cardMonth" :key="labels.cardMonth">{{labels.cardMonth}}</span>
@ -86,27 +68,49 @@
</label>
</div>
</div>
<label :for="fields.cardNumber" class="flex justify-around font-medium text-white text-lg p-3 cursor-pointer" :ref="fields.cardNumber">
<template>
<span v-for="(n, $index) in currentPlaceholder" :key="$index">
<transition name="slide-fade-up">
<div class="w-2" v-if="getIsNumberMasked($index, n)">*</div>
<div
class="w-2"
:class="{ '-active' : n.trim() === '' }"
:key="currentPlaceholder"
v-else-if="labels.cardNumber.length > $index"
>{{labels.cardNumber[$index]}}</div>
<div
class="w-2"
:class="{ '-active' : n.trim() === '' }"
v-else
:key="currentPlaceholder + 1"
>{{n}}</div>
</transition>
</span>
</template>
</label>
</div>
</div>
<div class="card-item__side -back">
<div class="card-item__cover">
<div class="card-item__side -back absolute top-0 left-0 w-full p-0 h-full">
<div class="absolute w-full h-full bg-black left-0 top-0 rounded-lg overflow-hidden" style="background-image: linear-gradient(147deg, #354fce 0%, #0c296b 74%);">
<img
v-if="currentCardBackground"
:src="currentCardBackground"
class="card-item__bg"
class="w-full h-full block object-cover"
/>
</div>
<div class="card-item__band"></div>
<div class="card-item__cvv">
<div class="card-item__cvvTitle">CVV</div>
<div class="card-item__cvvBand">
<div class="absolute w-full h-32 mt-12 bg-black"></div>
<div class="relative p-4 text-right">
<div class="pr-4 text-white mb-3">CVV</div>
<div class="h-12 flex items-center justify-end text-black rounded-sm shadow-lg bg-white text-right">
<span v-for="(n, $index) in labels.cardCvv" :key="$index">*</span>
</div>
<div class="card-item__type">
<div class="relative w-24 h-12 flex justify-end">
<img
:src="'https://raw.githubusercontent.com/muhammederdem/credit-card-form/master/src/assets/images/' + cardType + '.png'"
v-if="cardType"
class="card-item__typeImg"
class="w-full h-full object-right-top object-contain"
/>
</div>
</div>
@ -244,3 +248,33 @@ export default {
}
}
</script>
<style scoped>
.card-item.-active .card-item__side.-front {
transform: perspective(1000px) rotateY(180deg) rotateX(0deg) rotateZ(0deg);
}
.card-item.-active .card-item__side.-back {
transform: perspective(1000px) rotateY(0) rotateX(0deg) rotateZ(0deg);
}
.card-item__side {
border-radius: 15px;
overflow: hidden;
transform: perspective(2000px) rotateY(0deg) rotateX(0deg) rotate(0deg);
transform-style: preserve-3d;
transition: all 0.8s cubic-bezier(0.71, 0.03, 0.56, 0.85);
backface-visibility: hidden;
height: 100%;
}
.card-item__side.-back {
position: absolute;
top: 0;
left: 0;
width: 100%;
transform: perspective(2000px) rotateY(-180deg) rotateX(0deg) rotate(0deg);
z-index: 2;
padding: 0;
height: 100%;
}
</style>

View File

@ -1,337 +1,195 @@
<template>
<div>
<div class="row align-items-center" v-if="Object.keys(cards).length">
<div class="col-md-12">
<div class="form-group">
<label for="item_name" class="form-control-label">{{ textCard }}</label>
<div class="input-group-invoice-text" v-for="(name, key, id) in cards">
<div class="custom-radio mb-2">
<button type="button"
:id="'card-'+ key + '-' + id"
class="btn btn-outline-default w-100"
@click="onSelectedCard(key)"
:disabled="loading">
<div class="description text-center">
<i v-if="loading" class="fa fa-spinner fa-spin fa-1x checkout-spin"></i>
{{ name }}
</div>
</button>
</div>
</div>
<div class="input-group-invoice-text">
<div class="custom-radio mb-2">
<button type="button"
id="card-new-card"
class="btn btn-outline-default w-100"
data-toggle="collapse"
data-target="#collapseNewCard"
aria-expanded="false"
aria-controls="collapseNewCard"
:disabled="loading">
<div class="description text-center">
<i v-if="loading" class="fa fa-spinner fa-spin fa-1x checkout-spin"></i>
{{ textNewCard }}
</div>
</button>
</div>
</div>
</div>
</div>
<div class="collapse w-100" id="collapseNewCard">
<div class="row">
<div class="col-md-6 p-5">
<div class="form-group">
<label for="cardName" class="form-control-label">{{ textCardName }}</label>
<div class="input-group input-group-merge">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fas fa-font"></i>
</span>
</div>
<input
type="text"
:id="fields.cardName"
v-letter-only
@input="changeName"
class="form-control"
:placeholder="placeholderCardName"
:value="formData.cardName"
data-card-field
autocomplete="off"
/>
</div>
</div>
<div class="form-group">
<label for="cardNumber" class="form-control-label">{{ textCardNumber }}</label>
<div class="input-group input-group-merge">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fas fa-credit-card"></i>
</span>
</div>
<input
type="tel"
:id="fields.cardNumber"
@input="changeNumber"
@focus="focusCardNumber"
@blur="blurCardNumber"
class="form-control"
:placeholder="placeholderCardNumber"
:value="formData.cardNumber"
:maxlength="cardNumberMaxLength"
data-card-field
autocomplete="off"
/>
</div>
</div>
<div class="row">
<div class="col-md-7">
<label for="cardMonth" class="form-control-label">{{ textExpirationDate }}</label>
<div class="card-form__group">
<select
class="card-input__input -select"
:id="fields.cardMonth"
v-model="formData.cardMonth"
@change="changeMonth"
data-card-field
>
<option value disabled selected>{{ textMonth }}</option>
<option
v-bind:value="n < 10 ? '0' + n : n"
v-for="n in 12"
v-bind:disabled="n < minCardMonth"
v-bind:key="n"
>{{generateMonthValue(n)}}</option>
</select>
<select
class="card-input__input -select"
:id="fields.cardYear"
v-model="formData.cardYear"
@change="changeYear"
data-card-field
>
<option value disabled selected>{{ textYear }}</option>
<option
v-bind:value="$index + minCardYear"
v-for="(n, $index) in 12"
v-bind:key="n"
>{{$index + minCardYear}}</option>
</select>
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label for="cardCvv" class="form-control-label">{{ textCvv }}</label>
<div class="input-group input-group-merge">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fas fa-key"></i>
</span>
</div>
<input
type="tel"
class="form-control"
:placeholder="placeholderCvv"
v-number-only
:id="fields.cardCvv"
maxlength="4"
:value="formData.cardCvv"
@input="changeCvv"
data-card-field
autocomplete="off"
/>
</div>
</div>
</div>
</div>
<div class="form-group" v-if="storeCard">
<div class="custom-control custom-checkbox">
<input @input="changeStoreCard" :id="'store_card' + _uid" name="store_card" type="checkbox" value="true" class="custom-control-input">
<label :for="'store_card' + _uid" class="custom-control-label">
<strong>{{ textStoreCard }}</strong>
</label>
</div>
</div>
<div class="form-group">
<button class="btn btn-icon btn-success" v-on:click="invaildCard" :disabled="loading">
<div v-if="loading" class="aka-loader-frame">
<div class="aka-loader"></div>
</div>
<span v-if="!loading" class="btn-inner--text">{{ textButton }}</span>
</button>
</div>
</div>
<div class="col-md-6 mt-6">
<Card
:fields="fields"
:labels="formData"
:isCardNumberMasked="isCardNumberMasked"
:randomBackgrounds="randomBackgrounds"
:backgroundImage="backgroundImage"
/>
</div>
</div>
</div>
</div>
<div class="row align-items-center" v-if="!Object.keys(cards).length">
<div class="col-md-6 p-5">
<div class="form-group">
<label for="cardNumber" class="form-control-label">{{ textCardNumber }}</label>
<div class="input-group input-group-merge">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fas fa-credit-card"></i>
</span>
</div>
<input
type="tel"
:id="fields.cardNumber"
@input="changeNumber"
@focus="focusCardNumber"
@blur="blurCardNumber"
class="form-control"
:placeholder="placeholderCardNumber"
:value="formData.cardNumber"
:maxlength="cardNumberMaxLength"
data-card-field
autocomplete="off"
/>
</div>
<div class="invalid-feedback d-block" v-if="validations.card_number" v-html="validations.card_number[0]"></div>
</div>
<div class="form-group">
<label for="cardName" class="form-control-label">{{ textCardName }}</label>
<div class="input-group input-group-merge">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fas fa-font"></i>
</span>
</div>
<input
type="text"
:id="fields.cardName"
v-letter-only
@input="changeName"
class="form-control"
:placeholder="placeholderCardName"
:value="formData.cardName"
data-card-field
autocomplete="off"
/>
</div>
<div class="invalid-feedback d-block" v-if="validations.card_name" v-html="validations.card_name[0]"></div>
</div>
<div class="row">
<div class="col-md-7">
<label for="cardMonth" class="form-control-label">{{ textExpirationDate }}</label>
<div class="form-group d-flex">
<div class="input-group input-group-merge">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fas fa-calendar-alt"></i>
</span>
</div>
<select
class="form-control w-50"
:id="fields.cardMonth"
v-model="formData.cardMonth"
@change="changeMonth"
data-card-field
>
<option value="" disabled>{{ textMonth }}</option>
<option
v-bind:value="n < 10 ? '0' + n : n"
v-for="n in 12"
v-bind:disabled="n < minCardMonth"
v-bind:key="n"
>{{generateMonthValue(n)}}</option>
</select>
</div>
<div class="input-group input-group-merge ml-4">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fas fa-calendar-alt"></i>
</span>
</div>
<select
class="form-control w-50"
:id="fields.cardYear"
v-model="formData.cardYear"
@change="changeYear"
data-card-field
>
<option value="" disabled>{{ textYear }}</option>
<option
v-bind:value="$index + minCardYear"
v-for="(n, $index) in 12"
v-bind:key="n"
>{{$index + minCardYear}}</option>
</select>
</div>
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label for="cardCvv" class="form-control-label">{{ textCvv }}</label>
<div class="input-group input-group-merge">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fas fa-key"></i>
</span>
</div>
<input
type="tel"
class="form-control"
:placeholder="placeholderCvv"
v-number-only
:id="fields.cardCvv"
maxlength="4"
:value="formData.cardCvv"
@input="changeCvv"
data-card-field
autocomplete="off"
/>
</div>
<div class="invalid-feedback d-block" v-if="validations.card_cvv" v-html="validations.card_cvv[0]"></div>
</div>
</div>
</div>
<div class="form-group" v-if="storeCard">
<div class="custom-control custom-checkbox">
<input @input="changeStoreCard" :id="'store_card' + _uid" name="store_card" type="checkbox" value="true" class="custom-control-input">
<label :for="'store_card' + _uid" class="custom-control-label">
<strong>{{ textStoreCard }}</strong>
<div>
<div class="flex flex-col" v-if="Object.keys(cards).length">
<div class="gap-y-2">
<div
class="py-2 border-b hover:bg-gray-100 cursor-pointer"
v-for="(name, key, id) in cards" :key="key"
@click="onRegisterCard(id)"
>
<label>
<input
type="radio"
:disabled="loading"
:checked="register_card == id"
>
<span class="ltr:ml-2 rtl:mr-2">{{ name }}</span>
</label>
</div>
</div>
<div class="form-group">
<button class="btn btn-icon btn-success" v-on:click="invaildCard" :disabled="loading">
<div v-if="loading" class="aka-loader-frame">
<div class="aka-loader"></div>
</div>
<span v-if="!loading" class="btn-inner--text">{{ textButton }}</span>
<div class="py-2 border-b hover:bg-gray-100 cursor-pointer" @click="onAddNewCard()">
<label>
<input
type="radio"
id="card-new-card"
name="new-card"
:disabled="loading"
:checked="new_card"
>
<span class="ltr:ml-2 rtl:mr-2">{{ textNewCard }}</span>
</label>
</div>
<div class="flex justify-end" v-for="(name, key, id) in cards" :key="key">
<button
v-if="register_card == id"
type="button"
:id="'card-'+ key + '-' + id"
@click="onSelectedCard(key)"
class="relative flex items-center justify-center px-6 py-1.5 my-2 bg-green hover:bg-green-700 text-white rounded-lg"
:disabled="loading"
>
<i
v-if="loading || register_card_loading"
class="animate-submit delay-[0.28s] absolute w-2 h-2 rounded-full left-0 right-0 -top-3.5 m-auto before:absolute before:w-2 before:h-2 before:rounded-full before:animate-submit before:delay-[0.14s] after:absolute after:w-2 after:h-2 after:rounded-full after:animate-submit before:-left-3.5 after:-right-3.5 after:delay-[0.42s]"
>
</i>
<span :class="[{'opacity-0': loading || register_card_loading}]">
{{ textButton }}
</span>
</button>
</div>
<div v-if="new_card" class="w-full mt-3" id="collapseNewCard">
<Card
:fields="fields"
:labels="formData"
:isCardNumberMasked="isCardNumberMasked"
:randomBackgrounds="randomBackgrounds"
:backgroundImage="backgroundImage"
/>
<div class="grid sm:grid-cols-8 gap-x-4 gap-y-6 my-3.5">
<div class="sm:col-span-8">
<label for="cardName" class="form-control-label text-black text-sm font-medium">
{{ textCardName }}
</label>
<input
type="text"
:id="fields.cardName"
v-letter-only
@input="changeName"
class="w-full text-sm px-3 py-2.5 mt-1 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple"
:placeholder="placeholderCardName"
:value="formData.cardName"
data-card-field
autocomplete="off"
/>
<div class="text-red text-sm mt-1 block" v-if="validations.card_name" v-html="validations.card_name[0]"></div>
</div>
<div class="sm:col-span-8">
<label for="cardNumber" class="form-control-label text-black text-sm font-medium">
{{ textCardNumber }}
</label>
<input
type="tel"
:id="fields.cardNumber"
@input="changeNumber"
@focus="focusCardNumber"
@blur="blurCardNumber"
class="w-full text-sm px-3 py-2.5 mt-1 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple"
:placeholder="placeholderCardNumber"
:value="formData.cardNumber"
:maxlength="cardNumberMaxLength"
data-card-field
autocomplete="off"
/>
<div class="text-red text-sm mt-1 block" v-if="validations.card_number" v-html="validations.card_number[0]"></div>
</div>
<div class="sm:col-span-3">
<label for="cardMonth" class="form-control-label text-black text-sm font-medium">
{{ textExpirationDate }}
</label>
<select
class="w-full text-sm px-3 py-2.5 mt-1 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple"
:id="fields.cardMonth"
v-model="formData.cardMonth"
@change="changeMonth"
data-card-field
>
<option value disabled selected>{{ textMonth }}</option>
<option
v-bind:value="n < 10 ? '0' + n : n"
v-for="n in 12"
v-bind:disabled="n < minCardMonth"
v-bind:key="n"
>{{generateMonthValue(n)}}</option>
</select>
</div>
<div class="sm:col-span-3 flex items-end">
<select
class="w-full text-sm px-3 py-2.5 mt-1 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple"
:id="fields.cardYear"
v-model="formData.cardYear"
@change="changeYear"
data-card-field
>
<option value="" disabled>{{ textYear }}</option>
<option
v-bind:value="$index + minCardYear"
v-for="(n, $index) in 12"
v-bind:key="n"
>{{$index + minCardYear}}</option>
</select>
</div>
<div class="sm:col-span-2">
<label for="cardCvv" class="form-control-label text-black text-sm font-medium">
{{ textCvv }}
</label>
<input
type="tel"
class="w-full text-sm px-3 py-2.5 mt-1 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple"
:placeholder="placeholderCvv"
v-number-only
:id="fields.cardCvv"
maxlength="4"
:value="formData.cardCvv"
@input="changeCvv"
data-card-field
autocomplete="off"
/>
<div class="text-red text-sm mt-1 block" v-if="validations.card_cvv" v-html="validations.card_cvv[0]"></div>
</div>
<div class="sm:col-span-8 flex" :class="storeCard ? 'justify-between' : 'justify-end'">
<div class="flex items-center" v-if="storeCard">
<input @input="changeStoreCard" :id="'store_card' + _uid" name="store_card" type="checkbox" value="true" class="rounded-sm text-purple border-gray-300 cursor-pointer disabled:bg-gray-200 focus:outline-none focus:ring-transparent">
<label :for="'store_card' + _uid" class="form-control-label ltr:ml-2 rtl:ml-2">
<strong>{{ textStoreCard }}</strong>
</label>
</div>
<button class="relative flex items-center justify-center px-6 py-1.5 bg-green hover:bg-green-700 text-white rounded-lg" v-on:click="invaildCard" :disabled="loading">
<i
v-if="loading"
class="animate-submit delay-[0.28s] absolute w-2 h-2 rounded-full left-0 right-0 -top-3.5 m-auto before:absolute before:w-2 before:h-2 before:rounded-full before:animate-submit before:delay-[0.14s] after:absolute after:w-2 after:h-2 after:rounded-full after:animate-submit before:-left-3.5 after:-right-3.5 after:delay-[0.42s]"
>
</i>
<span :class="[{'opacity-0': loading}]">
{{ textButton }}
</span>
</button>
</div>
</div>
</div>
</div>
<div class="col-md-6 mt--6">
<div class="flex flex-col" v-if="! Object.keys(cards).length">
<Card
:fields="fields"
:labels="formData"
@ -339,16 +197,141 @@
:randomBackgrounds="randomBackgrounds"
:backgroundImage="backgroundImage"
/>
<div class="grid sm:grid-cols-8 gap-x-4 gap-y-6 my-3.5">
<div class="sm:col-span-8">
<label for="cardName" class="form-control-label text-black text-sm font-medium">
{{ textCardName }}
</label>
<input
type="text"
:id="fields.cardName"
v-letter-only
@input="changeName"
class="w-full text-sm px-3 py-2.5 mt-1 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple"
:placeholder="placeholderCardName"
:value="formData.cardName"
data-card-field
autocomplete="off"
/>
<div class="text-red text-sm mt-1 block" v-if="validations.card_name" v-html="validations.card_name[0]"></div>
</div>
<div class="sm:col-span-8">
<label for="cardNumber" class="form-control-label text-black text-sm font-medium">
{{ textCardNumber }}
</label>
<input
type="tel"
:id="fields.cardNumber"
@input="changeNumber"
@focus="focusCardNumber"
@blur="blurCardNumber"
class="w-full text-sm px-3 py-2.5 mt-1 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple"
:placeholder="placeholderCardNumber"
:value="formData.cardNumber"
:maxlength="cardNumberMaxLength"
data-card-field
autocomplete="off"
/>
<div class="text-red text-sm mt-1 block" v-if="validations.card_number" v-html="validations.card_number[0]"></div>
</div>
<div class="sm:col-span-3">
<label for="cardMonth" class="form-control-label text-black text-sm font-medium">
{{ textExpirationDate }}
</label>
<div>
<select
class="w-full text-sm px-3 py-2.5 mt-1 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple"
:id="fields.cardMonth"
v-model="formData.cardMonth"
@change="changeMonth"
data-card-field
>
<option value="" disabled>{{ textMonth }}</option>
<option
v-bind:value="n < 10 ? '0' + n : n"
v-for="n in 12"
v-bind:disabled="n < minCardMonth"
v-bind:key="n"
>{{generateMonthValue(n)}}</option>
</select>
</div>
</div>
<div class="sm:col-span-3 flex items-end">
<select
class="w-full text-sm px-3 py-2.5 mt-1 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple"
:id="fields.cardYear"
v-model="formData.cardYear"
@change="changeYear"
data-card-field
>
<option value="" disabled>{{ textYear }}</option>
<option
v-bind:value="$index + minCardYear"
v-for="(n, $index) in 12"
v-bind:key="n"
>{{$index + minCardYear}}</option>
</select>
</div>
<div class="sm:col-span-2">
<label for="cardCvv" class="form-control-label text-black text-sm font-medium">
{{ textCvv }}
</label>
<input
type="tel"
class="w-full text-sm px-3 py-2.5 mt-1 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple"
:placeholder="placeholderCvv"
v-number-only
:id="fields.cardCvv"
maxlength="4"
:value="formData.cardCvv"
@input="changeCvv"
data-card-field
autocomplete="off"
/>
<div class="text-red text-sm mt-1 block" v-if="validations.card_cvv" v-html="validations.card_cvv[0]"></div>
</div>
<div class="sm:col-span-8 flex" :class="storeCard ? 'justify-between' : 'justify-end'">
<div class="flex items-center" v-if="storeCard">
<input @input="changeStoreCard" :id="'store_card' + _uid" name="store_card" type="checkbox" value="true" class="rounded-sm text-purple border-gray-300 cursor-pointer disabled:bg-gray-200 focus:outline-none focus:ring-transparent">
<label :for="'store_card' + _uid" class="form-control-label ltr:ml-2 rtl:ml-2">
<strong>{{ textStoreCard }}</strong>
</label>
</div>
<button class="relative flex items-center justify-center px-6 py-1.5 bg-green hover:bg-green-700 text-white rounded-lg" v-on:click="invaildCard" :disabled="loading">
<i
v-if="loading"
class="animate-submit delay-[0.28s] absolute w-2 h-2 rounded-full left-0 right-0 -top-3.5 m-auto before:absolute before:w-2 before:h-2 before:rounded-full before:animate-submit before:delay-[0.14s] after:absolute after:w-2 after:h-2 after:rounded-full after:animate-submit before:-left-3.5 after:-right-3.5 after:delay-[0.42s]"
>
</i>
<span :class="[{'opacity-0': loading}]">
{{ textButton }}
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios';
import axios from 'axios';
import Card from './Card';
import './../../../css/creditcard/style.scss';
export default {
name: 'CardForm',
@ -369,6 +352,7 @@ export default {
el.addEventListener('keypress', checkValue);
}
},
'letter-only': {
bind (el) {
function checkValue (event) {
@ -496,7 +480,9 @@ export default {
}
}
},
backgroundImage: [String, Object],
randomBackgrounds: {
type: Boolean,
default: true
@ -524,6 +510,9 @@ export default {
mainCardNumber: this.cardNumber,
cardNumberMaxLength: 19,
card_id: 0,
new_card: false,
register_card: 0,
register_card_loading: false
}
},
@ -550,6 +539,22 @@ export default {
},
methods: {
onRegisterCard(id) {
this.register_card = id;
this.new_card = false;
this.register_card_loading = true;
setTimeout(() => {
this.register_card_loading = false;
}, 800);
},
onAddNewCard() {
this.new_card = true;
this.register_card = null;
},
onSelectedCard(card_id) {
this.card_id = card_id;
this.formData.card_id = card_id;
@ -696,6 +701,9 @@ export default {
} else {
this.unMaskCardNumber();
}
},
showNewCard() {
}
}
}

View File

@ -1,50 +0,0 @@
<template>
<date-range-picker
:startDate="startDate"
:endDate="endDate"
@update="console.log(value)"
:locale-data="locale"
:opens="opens"
>
<!--Optional scope for the input displaying the dates -->
<div slot="input" slot-scope="picker">...</div>
</date-range-picker>
</template>
<script>
export default {
components: { DateRangePicker },
data() {
return {
startDate: '2017-09-05',
endDate: '2017-09-15',
opens: "center",//which way the picker opens, default "center", can be "left"/"right"
locale: {
direction: 'ltr', //direction of text
format: 'DD-MM-YYYY', //fomart of the dates displayed
separator: ' - ', //separator between the two ranges
applyLabel: 'Apply',
cancelLabel: 'Cancel',
weekLabel: 'W',
customRangeLabel: 'Custom Range',
daysOfWeek: moment.weekdaysMin(), //array of days - see moment documenations for details
monthNames: moment.monthsShort(), //array of month names - see moment documenations for details
firstDay: 1 //ISO first day of week - see moment documenations for details
showWeekNumbers: true //show week numbers on each row of the calendar
},
ranges: { //default value for ranges object (if you set this to false ranges will no be rendered)
'Today': [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'This month': [moment().startOf('month'), moment().endOf('month')],
'This year': [moment().startOf('year'), moment().endOf('year')],
'Last week': [moment().subtract(1, 'week').startOf('week'), moment().subtract(1, 'week').endOf('week')],
'Last month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
}
}
}
}
</script>
//you need to import the CSS manually (in case you want to override it)
import 'vue2-daterange-picker/dist/lib/vue-daterange-picker.min.css'

View File

@ -1,50 +0,0 @@
<template>
<div class="media media-comment">
<img alt="Image placeholder" class="avatar avatar-lg media-comment-avatar rounded-circle" :src="userImage">
<div class="media-body">
<div class="media-comment-text">
<h6 class="h5 mt-0">{{userName}}</h6>
<p class="text-sm lh-160" v-html="text"></p>
<div class="icon-actions">
<a href="#" class="like active">
<i class="ni ni-like-2"></i>
<span class="text-muted">{{likeCount}} likes</span>
</a>
<a href="#">
<i class="ni ni-curved-next"></i>
<span class="text-muted">{{shareCount}} shares</span>
</a>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'comment',
props: {
userImage: {
type: String,
default: 'img/theme/team-1.jpg'
},
userName: {
type: String,
default: 'Michael Lewis'
},
text: {
type: String,
default: 'Cras sit amet nibh libero nulla vel metus scelerisque ante sollicitudin. Cras purus odio vestibulum in vulputate viverra turpis.'
},
likeCount: {
type: Number,
default: 0
},
shareCount: {
type: Number,
default: 0
}
}
}
</script>
<style>
</style>

View File

@ -1,69 +0,0 @@
<template>
<div>
<component v-for="(field, index) in schema"
:key="index"
:is="field.fieldType"
v-bind="field">
</component>
</div>
</template>
<script>
import { SlideYUpTransition } from "vue2-transitions";
export default {
props: {
show: Boolean,
title: {
type: String,
default: '',
description: "Modal header title"
},
message: {
type: String,
default: '',
description: "Modal body message"
},
button_cancel: {
type: String,
default: '',
description: "Modal footer cancel button text"
},
button_delete: {
type: String,
default: '',
description: "Modal footer delete button text"
},
animationDuration: {
type: Number,
default: 800,
description: "Modal transition duration"
}
},
methods: {
closeModal() {
this.$emit("update:show", false);
this.$emit("close");
},
onConfirm() {
this.$emit("confirm");
},
onCancel() {
this.$emit("cancel");
}
},
watch: {
show(val) {
let documentClasses = document.body.classList;
if (val) {
documentClasses.add("modal-open");
} else {
documentClasses.remove("modal-open");
}
}
}
}
</script>

View File

@ -1,77 +0,0 @@
<template>
<div class="custom-control custom-checkbox"
:class="[
{disabled: disabled},
{[`custom-checkbox-${type}`]: type},inlineClass]">
<input :id="cbId"
class="custom-control-input"
:class="inputClasses"
type="checkbox"
:disabled="disabled"
v-model="model"/>
<label :for="cbId" class="custom-control-label">
<slot>
<span v-if="inline">&nbsp;</span>
</slot>
</label>
</div>
</template>
<script>
export default {
name: "base-checkbox",
model: {
prop: "checked"
},
props: {
checked: {
type: [Array, Boolean],
description: "Whether checkbox is checked"
},
disabled: {
type: Boolean,
description: "Whether checkbox is disabled"
},
inline: {
type: Boolean,
description: "Whether checkbox is inline"
},
inputClasses: {
type: [String, Object, Array],
description: "Checkbox input classes"
},
type: {
type: String,
description: 'Checkbox type (e.g info, danger etc)'
}
},
data() {
return {
cbId: "",
touched: false
};
},
computed: {
model: {
get() {
return this.checked;
},
set(check) {
if (!this.touched) {
this.touched = true;
}
this.$emit("input", check);
}
},
inlineClass() {
if (this.inline) {
return `form-check-inline`;
}
}
},
created() {
this.cbId = Math.random()
.toString(16)
.slice(2);
}
};
</script>

View File

@ -8,17 +8,18 @@
{{label}}
</label>
</slot>
<div :class="[
<div class="relative" :class="[
{'input-group input-group-merge': hasIcon},
{'focused': focused},
{'input-group-alternative': alternative},
{'has-label': label || $slots.label},
{'prepend-input-icon': prependIcon},
inputGroupClasses
]">
<div v-if="prependIcon || $slots.prepend" class="input-group-prepend">
<div v-if="prependIcon || $slots.prepend" class="input-group-prepend absolute left-2 bottom-3 text-light-gray">
<span class="input-group-text">
<slot name="prepend">
<i :class="prependIcon"></i>
<span class="material-icons w-4 h-5 text-sm">{{ prependIcon }}</span>
</slot>
</span>
</div>
@ -30,30 +31,30 @@
v-bind="$attrs"
:valid="!error"
:required="required"
class="form-control"
class="form-element"
:class="[{'is-valid': valid === true}, {'is-invalid': error}, inputClasses]">
</slot>
<div v-if="appendIcon || $slots.append" class="input-group-append">
<div v-if="appendIcon || $slots.append" class="input-group-append absolute ltr:right-2 rtl:left-2 bottom-2 text-light-gray">
<span class="input-group-text">
<slot name="append">
<i :class="appendIcon"></i>
<span class="material-icons w-4 h-5 text-sm">{{ appendIcon }}</span>
</slot>
</span>
</div>
<slot name="infoBlock"></slot>
<slot name="error">
<div v-if="error" class="invalid-feedback d-block"
<div v-if="error" class="text-red text-sm mt-1 block"
v-html="error">
</div>
</slot>
<slot name="success">
<div class="valid-feedback" v-if="!error && valid">
<div class="text-green text-sm mt-1" v-if="!error && valid">
{{successMessage}}
</div>
</slot>
</div>
<slot name="error">
<div v-if="footerError" class="invalid-feedback d-block"
<div v-if="footerError" class="text-red text-sm mt-1 block"
v-html="footerError">
</div>
</slot>
@ -181,5 +182,3 @@
}
};
</script>
<style>
</style>

View File

@ -1,68 +0,0 @@
<template>
<div
class="custom-control custom-radio"
:class="[inlineClass, { disabled: disabled }]">
<input
:id="cbId"
class="custom-control-input"
type="radio"
:disabled="disabled"
:value="name"
v-model="model"
/>
<label :for="cbId" class="custom-control-label">
<slot>
<span v-if="inline">&nbsp;</span>
</slot>
</label>
</div>
</template>
<script>
export default {
name: 'base-radio',
props: {
name: {
type: [String, Number],
description: 'Radio label'
},
disabled: {
type: Boolean,
description: 'Whether radio is disabled'
},
value: {
type: [String, Boolean],
description: 'Radio value'
},
inline: {
type: Boolean,
description: 'Whether radio is inline'
}
},
data() {
return {
cbId: ''
};
},
computed: {
model: {
get() {
return this.value;
},
set(value) {
this.$emit('input', value);
}
},
inlineClass() {
if (this.inline) {
return `form-check-inline`;
}
return '';
}
},
created() {
this.cbId = Math.random()
.toString(16)
.slice(2);
}
};
</script>

View File

@ -1,126 +0,0 @@
<template>
<div class="dropzone mb-3 dz-clickable"
:class="[multiple ? 'dropzone-multiple': 'dropzone-single']">
<div class="fallback">
<div class="custom-file">
<input type="file"
class="custom-file-input"
id="projectCoverUploads"
:multiple="multiple">
<label class="custom-file-label" for="projectCoverUploads">Choose file</label>
</div>
</div>
<div class="dz-preview dz-preview-single"
v-if="!multiple"
:class="previewClasses"
ref="previewSingle">
<div class="dz-preview-cover">
<img class="dz-preview-img" data-dz-thumbnail>
</div>
</div>
<ul v-else
class="dz-preview dz-preview-multiple list-group list-group-lg list-group-flush"
:class="previewClasses"
ref="previewMultiple">
<li class="list-group-item px-0">
<div class="row align-items-center">
<div class="col-auto">
<div class="avatar">
<img class="avatar-img rounded" data-dz-thumbnail>
</div>
</div>
<div class="col ml--3">
<h4 class="mb-1" data-dz-name>...</h4>
<p class="small text-muted mb-0" data-dz-size>...</p>
</div>
<div class="col-auto">
<button data-dz-remove="true" class="btn btn-danger btn-sm">
<i class="fas fa-trash"></i>
</button>
</div>
</div>
</li>
</ul>
</div>
</template>
<script>
import Dropzone from 'dropzone';
Dropzone.autoDiscover = false;
export default {
name: 'dropzone-file-upload',
props: {
options: {
type: Object,
default: () => ({})
},
value: [String, Object, Array],
url: {
type: String,
default: 'http://'
},
multiple: Boolean,
previewClasses: [String, Object, Array]
},
model: {
prop: 'value',
event: 'change'
},
data() {
return {
currentFile: null,
files: [],
showList: false,
}
},
methods: {
async initDropzone() {
let preview = this.multiple ? this.$refs.previewMultiple : this.$refs.previewSingle;
let self = this
let finalOptions = {
...this.options,
url: this.url,
thumbnailWidth: null,
thumbnailHeight: null,
previewsContainer: preview,
previewTemplate: preview.innerHTML,
maxFiles: (!this.multiple) ? 1 : null,
acceptedFiles: (!this.multiple) ? 'image/*' : null,
init: function () {
this.on("addedfile", function (file) {
if (!self.multiple && self.currentFile) {
// this.removeFile(this.currentFile);
}
self.currentFile = file;
})
}
}
this.dropzone = new Dropzone(this.$el, finalOptions)
preview.innerHTML = ''
let evtList = ['drop', 'dragstart', 'dragend', 'dragenter', 'dragover', 'addedfile', 'removedfile', 'thumbnail', 'error', 'processing', 'uploadprogress', 'sending', 'success', 'complete', 'canceled', 'maxfilesreached', 'maxfilesexceeded', 'processingmultiple', 'sendingmultiple', 'successmultiple', 'completemultiple', 'canceledmultiple', 'totaluploadprogress', 'reset', 'queuecomplete']
evtList.forEach(evt => {
this.dropzone.on(evt, (data) => {
this.$emit(evt, data);
if (evt === 'addedfile') {
this.files.push(data)
this.$emit('change', this.files);
} else if (evt === 'removedfile') {
let index = this.files.findIndex(f => f.upload.uuid === data.upload.uuid)
if (index !== -1) {
this.files.splice(index, 1);
}
this.$emit('change', this.files);
}
})
})
}
},
async mounted() {
this.initDropzone()
}
}
</script>
<style>
</style>

View File

@ -1,54 +0,0 @@
<template>
<div class="custom-file">
<input type="file"
class="custom-file-input"
id="customFileLang"
lang="en"
v-bind="$attrs"
v-on="listeners"
/>
<label class="custom-file-label" for="customFileLang">
{{label}}
</label>
</div>
</template>
<script>
export default {
name: 'file-input',
inheritAttrs: false,
props: {
initialLabel: {
type: String,
default: 'Select file'
}
},
data() {
return {
files: []
}
},
computed: {
listeners() {
return {
...this.$listeners,
change: this.fileChange
}
},
label() {
let fileNames = [];
for (let file of this.files) {
fileNames.push(file.name)
}
return fileNames.length ? fileNames.join(', ') : this.initialLabel
}
},
methods: {
fileChange(evt) {
this.files = evt.target.files
this.$emit('change', this.files)
}
}
}
</script>
<style>
</style>

View File

@ -1,96 +0,0 @@
<template>
<div class="quill">
<div :id="toolbarId">
<div class="ql-formats">
<button class="ql-bold"></button>
<button class="ql-italic"></button>
<button class="ql-underline"></button>
<button class="ql-link"></button>
<button class="ql-blockquote"></button>
<button class="ql-code"></button>
<button class="ql-image"></button>
<button type="button" class="ql-list" value="ordered"></button>
<button type="button" class="ql-list" value="bullet"></button>
</div>
</div>
<div :id="editorId" :name="name" class="" ref="editor">
</div>
</div>
</template>
<script>
export default {
name: 'html-editor',
props: {
value: {
type: String,
default: ''
},
name: String
},
data () {
return {
editor: null,
content: null,
lastHtmlValue: '',
editorId: null,
toolbarId: null
}
},
methods: {
initialize (Quill) {
this.editor = new Quill(`#${this.editorId}`, {
theme: 'snow',
modules: {
toolbar: `#${this.toolbarId}`
}
})
if (this.value.length > 0) {
this.editor.pasteHTML(this.value)
}
let editorRef = this.$refs.editor;
let node = editorRef.children[0];
this.editor.on('text-change', () => {
let html = node.innerHTML
if (html === '<p><br></p>') {
html = '';
}
this.content = html
this.$emit('input', this.content);
})
},
pasteHTML () {
if (!this.editor) {
return
}
this.editor.pasteHTML(this.value)
},
randomString() {
let text = "";
let possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
for (let i = 0; i < 5; i++)
text += possible.charAt(Math.floor(Math.random() * possible.length));
return text;
}
},
async mounted () {
let Quill = await import('quill')
Quill = Quill.default || Quill
this.editorId = this.randomString();
this.toolbarId = this.randomString();
this.$nextTick(() => {
this.initialize(Quill)
});
},
watch: {
value (newVal) {
if (newVal !== this.content) {
this.pasteHTML(newVal);
}
}
}
}
</script>

View File

@ -1,45 +0,0 @@
<template>
<div
class="choice"
:class="{ active: checked }"
data-toggle="wizard-checkbox"
@click="updateValue"
>
<input
type="checkbox"
:name="name"
:disabled="disabled"
:checked="checked"
/>
<div class="icon">
<slot name="icon"> <i :class="icon"></i> </slot>
</div>
<slot name="title">
<h6>{{ title }}</h6>
</slot>
</div>
</template>
<script>
export default {
name: 'icon-checkbox',
model: {
prop: 'checked'
},
props: {
checked: {
type: Boolean,
default: false
},
name: String,
title: String,
icon: String,
disabled: Boolean
},
methods: {
updateValue() {
this.$emit('input', !this.checked);
}
}
};
</script>
<style></style>

View File

@ -1,95 +0,0 @@
<template>
<div class="tags-input__wrapper">
<el-tag
v-for="(tag, index) in dynamicTags"
:key="tag + index"
size="small"
:type="tagType"
:closable="true"
:close-transition="false"
@close="handleClose(tag)"
>
{{ tag }}
</el-tag>
<input
type="text"
placeholder="Add new tag"
class="form-control"
v-model="inputValue"
ref="saveTagInput"
size="mini"
@input="onInput"
@keyup.enter="handleInputConfirm"
@blur="handleInputConfirm"
/>
</div>
</template>
<script>
import { Tag } from 'element-ui';
export default {
name: 'tags-input',
components: {
[Tag.name]: Tag
},
props: {
value: {
type: Array,
default: () => [],
description: 'List of tags'
},
tagType: {
type: String,
default: 'primary',
description: 'Tag type (primary|danger etc)'
}
},
model: {
prop: 'value',
event: 'change'
},
data() {
return {
dynamicTags: [],
inputVisible: false,
inputValue: ''
};
},
methods: {
handleClose(tag) {
this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
this.$emit('change', this.dynamicTags);
},
showInput() {
this.inputVisible = true;
this.$nextTick(() => {
this.$refs.saveTagInput.$refs.input.focus();
});
},
handleInputConfirm() {
let inputValue = this.inputValue;
if (inputValue) {
this.dynamicTags.push(inputValue);
this.$emit('change', this.dynamicTags);
}
this.inputVisible = false;
this.inputValue = '';
},
onInput(evt) {
this.$emit('input', evt.target.value);
}
},
created() {
this.$watch(
'value',
newVal => {
this.dynamicTags = [...newVal];
},
{ immediate: true }
);
}
};
</script>

View File

@ -1,25 +0,0 @@
<template>
<div class="row" v-loading="true" id="loading"></div>
</template>
<script>
import Vue from 'vue';
import { Loading } from 'element-ui';
Vue.use(Loading.directive);
export default {};
</script>
<style>
#loading {
min-height: 200px;
display: flex;
align-items: center;
}
.el-loading-spinner .path {
stroke: #66615b !important;
}
.el-loading-mask {
background: transparent !important;
}
</style>

View File

@ -110,9 +110,9 @@
show(val) {
let documentClasses = document.body.classList;
if (val) {
documentClasses.add("modal-open");
documentClasses.add("overflow-hidden");
} else {
documentClasses.remove("modal-open");
documentClasses.remove("overflow-hidden");
}
}
}

View File

@ -1,120 +0,0 @@
<template>
<nav :class="classes" class="navbar">
<div :class="containerClasses">
<slot name="brand"></slot>
<slot name="toggle-button">
<button
class="navbar-toggler collapsed"
v-if="hasMenu"
type="button"
@click="toggleMenu"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-bar navbar-kebab"></span>
<span class="navbar-toggler-bar navbar-kebab"></span>
<span class="navbar-toggler-bar navbar-kebab"></span>
</button>
</slot>
<button class="navbar-toggler" @click.stop="toggleMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div
class="navbar-collapse navbar-custom-collapse collapse show"
:class="menuClasses"
v-show="show"
v-click-outside="closeMenu">
<slot :close-menu="closeMenu"></slot>
</div>
</div>
</nav>
</template>
<script>
export default {
name: 'base-nav',
props: {
show: {
type: Boolean,
default: false,
description:
'Whether navbar menu is shown (valid for viewports < specified by `expand` prop)'
},
transparent: {
type: Boolean,
default: false,
description: 'Whether navbar is transparent'
},
expand: {
type: String,
default: 'lg',
description: 'Breakpoint where nav should expand'
},
menuClasses: {
type: [String, Object, Array],
default: '',
description:
'Navbar menu (items) classes. Can be used to align menu items to the right/left'
},
containerClasses: {
type: [String, Object, Array],
default: 'container',
description:
'Container classes. Can be used to control container classes (contains both navbar brand and menu items)'
},
type: {
type: String,
default: 'white',
validator(value) {
return [
'',
'dark',
'success',
'danger',
'warning',
'white',
'primary',
'light',
'info',
'vue'
].includes(value);
},
description: 'Navbar color type'
}
},
model: {
prop: 'show',
event: 'change'
},
computed: {
classes() {
let color = `bg-${this.type}`;
let classes = [
{ 'navbar-transparent': this.transparent },
{ [`navbar-expand-${this.expand}`]: this.expand }
];
if (this.position) {
classes.push(`navbar-${this.position}`);
}
if (!this.transparent) {
classes.push(color);
}
return classes;
},
hasMenu() {
return this.$slots.default;
}
},
methods: {
toggleMenu() {
this.$emit('change', !this.show);
},
closeMenu() {
this.$emit('change', false);
}
}
};
</script>
<style></style>

View File

@ -1,21 +0,0 @@
<template>
<button
type="button"
class="navbar-toggler collapsed"
data-toggle="collapse"
data-target="#navbar"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-bar bar1"></span>
<span class="navbar-toggler-bar bar2"></span>
<span class="navbar-toggler-bar bar3"></span>
</button>
</template>
<script>
export default {
name: 'navbar-toggle-button'
};
</script>
<style></style>

View File

@ -1,29 +0,0 @@
<template>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
:data-target="target"
:aria-controls="target"
:aria-expanded="toggled"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
</template>
<script>
export default {
props: {
target: {
type: [String, Number],
description: 'Button target element'
},
toggled: {
type: Boolean,
default: false,
description: 'Whether button is toggled'
}
}
};
</script>
<style></style>

View File

@ -2,7 +2,8 @@
<div
@click="tryClose"
data-notify="container"
class="alert alert-notify alert-dismissible"
class="alert alert-notify fixed flex items-center justify-between ltr:right-4 rtl:left-4 p-4 text-black font-bold rounded-lg z-30"
style="width: 500px;"
:class="[
{ 'alert-with-icon': icon },
verticalAlign,
@ -13,16 +14,16 @@
:style="customPosition"
data-notify-position="top-center"
>
<div class="flex items-center ltr:pr-3 rtl:pl-3">
<template v-if="icon || $slots.icon">
<slot name="icon">
<span class="alert-icon" data-notify="icon">
<i :class="icon"></i>
<span class="alert-icon flex items-center ltr:mr-2 rtl:ml-2" data-notify="icon">
<span class="material-icons text-2xl">{{ icon }}</span>
</span>
</slot>
</template>
<span class="alert-text">
<span v-if="title" class="title">
<b>{{ title }}<br/></b>
</span>
@ -32,10 +33,11 @@
:component="component"
></content-render>
</span>
</div>
<slot name="dismiss-icon">
<button type="button"
class="close"
class="close text-2xl"
data-dismiss="alert"
aria-label="Close"
@click="close">
@ -95,7 +97,7 @@
];
return acceptedValues.indexOf(value) !== -1;
},
description: 'Notification type of notification (default|info|primary|danger|warning|success)'
description: 'Notification type of notification (gray-300|blue-300|gray-300|red-300|orange-300|green-300)'
},
timeout: {
type: Number,
@ -131,7 +133,23 @@
},
data() {
return {
elmHeight: 0
elmHeight: 0,
typeByClass: {
'default': 'black-100',
'info': 'blue-100',
'primary': 'black-100',
'danger': 'red-100',
'warning': 'orange-100',
'success': 'green-100',
},
textByClass: {
'default': 'black-600',
'info': 'blue-600',
'primary': 'black-600',
'danger': 'red-600',
'warning': 'orange-600',
'success': 'green-600',
}
};
},
computed: {
@ -139,7 +157,7 @@
return this.icon && this.icon.length > 0;
},
alertType() {
return `alert-${this.type}`;
return `bg-${this.typeByClass[this.type]} text-${this.textByClass[this.type]}`;
},
customPosition() {
let initialMargin = 20;
@ -184,24 +202,4 @@
}
}
};
</script>
<style lang="scss">
.notifications .alert {
position: fixed;
z-index: 10000;
&[data-notify='container'] {
max-width: 500px;
}
&.center {
margin: 0 auto;
}
&.left {
left: 20px;
}
&.right {
right: 20px;
}
}
</style>
</script>

View File

@ -1,123 +0,0 @@
<template>
<div class="sidenav navbar navbar-vertical fixed-left navbar-expand-xs navbar-light bg-white"
@mouseenter="$sidebar.onMouseEnter()"
@mouseleave="$sidebar.onMouseLeave()"
:data="backgroundColor">
<div class="scrollbar-inner" ref="sidebarScrollArea">
<div class="sidenav-header d-flex align-items-center">
<a class="navbar-brand" href="#">
<img :src="logo" class="navbar-brand-img" alt="Sidebar logo">
</a>
<div class="ml-auto">
<!-- Sidenav toggler -->
<div class="sidenav-toggler d-none d-xl-block"
:class="{'active': !$sidebar.isMinimized }"
@click="minimizeSidebar">
<div class="sidenav-toggler-inner">
<i class="sidenav-toggler-line"></i>
<i class="sidenav-toggler-line"></i>
<i class="sidenav-toggler-line"></i>
</div>
</div>
</div>
</div>
<slot></slot>
<div class="navbar-inner">
<ul class="navbar-nav">
<slot name="links">
<sidebar-item
v-for="(link, index) in sidebarLinks"
:key="link.name + index"
:link="link"
>
<sidebar-item
v-for="(subLink, index) in link.children"
:key="subLink.name + index"
:link="subLink"
>
</sidebar-item>
</sidebar-item>
</slot>
</ul>
<slot name="links-after"></slot>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'sidebar',
props: {
title: {
type: String,
default: 'Creative Tim',
description: 'Sidebar title'
},
shortTitle: {
type: String,
default: 'CT',
description: 'Sidebar short title'
},
logo: {
type: String,
default: 'https://demos.creative-tim.com/vue-argon-dashboard-pro/img/brand/green.png',
description: 'Sidebar app logo'
},
backgroundColor: {
type: String,
default: 'vue',
validator: value => {
let acceptedValues = [
'',
'vue',
'blue',
'green',
'orange',
'red',
'primary'
];
return acceptedValues.indexOf(value) !== -1;
},
description:
'Sidebar background color (vue|blue|green|orange|red|primary)'
},
sidebarLinks: {
type: Array,
default: () => [],
description:
"List of sidebar links as an array if you don't want to use components for these."
},
autoClose: {
type: Boolean,
default: true,
description:
'Whether sidebar should autoclose on mobile when clicking an item'
}
},
provide() {
return {
autoClose: this.autoClose
};
},
methods: {
minimizeSidebar() {
if (this.$sidebar) {
this.$sidebar.toggleMinimize();
}
}
},
beforeDestroy() {
if (this.$sidebar.showSidebar) {
this.$sidebar.showSidebar = false;
}
}
};
</script>
<style>
@media (min-width: 992px) {
.navbar-search-form-mobile,
.nav-mobile-menu {
display: none;
}
}
</style>

View File

@ -1,198 +0,0 @@
<template>
<component
:is="baseComponent"
:to="link.path ? link.path : '/'"
class="nav-item"
:class="{ active: isActive }"
tag="li"
>
<a
v-if="isMenu"
class="sidebar-menu-item nav-link"
:class="{ active: isActive }"
:aria-expanded="!collapsed"
data-toggle="collapse"
@click.prevent="collapseMenu"
>
<template v-if="addLink">
<span class="nav-link-text">
{{ link.name }} <b class="caret"></b>
</span>
</template>
<template v-else>
<i :class="link.icon"></i>
<span class="nav-link-text">{{ link.name }} <b class="caret"></b></span>
</template>
</a>
<collapse-transition>
<div
v-if="$slots.default || this.isMenu"
v-show="!collapsed"
class="collapse show"
>
<ul class="nav nav-sm flex-column">
<slot></slot>
</ul>
</div>
</collapse-transition>
<slot
name="title"
v-if="children.length === 0 && !$slots.default && link.path"
>
<component
:to="link.path"
@click.native="linkClick"
:is="elementType(link, false)"
class="nav-link"
:class="{ active: link.active }"
:target="link.target"
:href="link.path"
>
<template v-if="addLink">
<span class="nav-link-text">{{ link.name }}</span>
</template>
<template v-else>
<i :class="link.icon"></i>
<span class="nav-link-text">{{ link.name }}</span>
</template>
</component>
</slot>
</component>
</template>
<script>
import { CollapseTransition } from 'vue2-transitions';
export default {
name: 'sidebar-item',
components: {
CollapseTransition
},
props: {
menu: {
type: Boolean,
default: false,
description:
"Whether the item is a menu. Most of the item it's not used and should be used only if you want to override the default behavior."
},
link: {
type: Object,
default: () => {
return {
name: '',
path: '',
children: []
};
},
description:
'Sidebar link. Can contain name, path, icon and other attributes. See examples for more info'
}
},
provide() {
return {
addLink: this.addChild,
removeLink: this.removeChild
};
},
inject: {
addLink: { default: null },
removeLink: { default: null },
autoClose: {
default: true
}
},
data() {
return {
children: [],
collapsed: true
};
},
computed: {
baseComponent() {
return this.isMenu || this.link.isRoute ? 'li' : 'router-link';
},
linkPrefix() {
if (this.link.name) {
let words = this.link.name.split(' ');
return words.map(word => word.substring(0, 1)).join('');
}
},
isMenu() {
return this.children.length > 0 || this.menu === true;
},
isActive() {
if (this.$route && this.$route.path) {
let matchingRoute = this.children.find(c =>
this.$route.path.startsWith(c.link.path)
);
if (matchingRoute !== undefined) {
return true;
}
}
return false;
}
},
methods: {
addChild(item) {
const index = this.$slots.default.indexOf(item.$vnode);
this.children.splice(index, 0, item);
},
removeChild(item) {
const tabs = this.children;
const index = tabs.indexOf(item);
tabs.splice(index, 1);
},
elementType(link, isParent = true) {
if (link.isRoute === false) {
return isParent ? 'li' : 'a';
} else {
return 'router-link';
}
},
linkAbbreviation(name) {
const matches = name.match(/\b(\w)/g);
return matches.join('');
},
linkClick() {
if (
this.autoClose &&
this.$sidebar &&
this.$sidebar.showSidebar === true
) {
this.$sidebar.displaySidebar(false);
}
},
collapseMenu() {
this.collapsed = !this.collapsed;
},
collapseSubMenu(link) {
link.collapsed = !link.collapsed;
}
},
mounted() {
if (this.addLink) {
this.addLink(this);
}
if (this.link.collapsed !== undefined) {
this.collapsed = this.link.collapsed;
}
if (this.isActive && this.isMenu) {
this.collapsed = false;
}
},
destroyed() {
if (this.$el && this.$el.parentNode) {
this.$el.parentNode.removeChild(this.$el);
}
if (this.removeLink) {
this.removeLink(this);
}
}
};
</script>
<style>
.sidebar-menu-item {
cursor: pointer;
}
</style>

View File

@ -1,70 +0,0 @@
import Sidebar from './SideBar.vue';
import SidebarItem from './SidebarItem.vue';
const SidebarStore = {
showSidebar: true,
sidebarLinks: [],
isMinimized: false,
breakpoint: 1200,
displaySidebar(value) {
if (window.innerWidth > this.breakpoint) {
return;
}
this.showSidebar = value;
let docClasses = document.body.classList
if (value) {
docClasses.add('g-sidenav-pinned')
docClasses.add('g-sidenav-show')
docClasses.remove('g-sidenav-hidden')
} else {
docClasses.add('g-sidenav-hidden')
docClasses.remove('g-sidenav-pinned')
}
},
toggleMinimize() {
this.isMinimized = !this.isMinimized;
let docClasses = document.body.classList
if (this.isMinimized) {
docClasses.add('g-sidenav-hidden')
docClasses.remove('g-sidenav-pinned')
} else {
docClasses.add('g-sidenav-pinned')
docClasses.remove('g-sidenav-hidden')
}
},
onMouseEnter() {
if (this.isMinimized) {
document.body.classList.add('g-sidenav-show')
document.body.classList.remove('g-sidenav-hidden')
}
},
onMouseLeave() {
if (this.isMinimized) {
let docClasses = document.body.classList
docClasses.remove('g-sidenav-show')
docClasses.add('g-sidenav-hide')
setTimeout(() => {
docClasses.remove('g-sidenav-hide')
docClasses.add('g-sidenav-hidden')
}, 300)
}
}
};
const SidebarPlugin = {
install(Vue, options) {
if (options && options.sidebarLinks) {
SidebarStore.sidebarLinks = options.sidebarLinks;
}
let app = new Vue({
data: {
sidebarStore: SidebarStore
}
});
Vue.prototype.$sidebar = app.sidebarStore;
Vue.component('side-bar', Sidebar);
Vue.component('sidebar-item', SidebarItem);
}
};
export default SidebarPlugin;

View File

@ -1,33 +0,0 @@
<template>
<div
class="tab-pane"
v-show="active"
:id="id || title"
:class="{ active: active }"
:aria-expanded="active"
>
<slot></slot>
</div>
</template>
<script>
export default {
name: 'tab-pane',
props: ['title', 'id'],
inject: ['addTab', 'removeTab'],
data() {
return {
active: false
};
},
mounted() {
this.addTab(this);
},
destroyed() {
if (this.$el && this.$el.parentNode) {
this.$el.parentNode.removeChild(this.$el);
}
this.removeTab(this);
}
};
</script>
<style></style>

View File

@ -1,168 +0,0 @@
<template>
<div>
<div
:class="[
{ 'col-md-4': vertical && !tabNavWrapperClasses },
{ 'col-12': centered && !tabNavWrapperClasses },
tabNavWrapperClasses
]"
>
<ul
class="nav nav-pills"
role="tablist"
:class="[
`nav-pills-${type}`,
{ 'flex-column': vertical },
{ 'justify-content-center': centered },
tabNavClasses
]"
>
<li
v-for="tab in tabs"
class="nav-item active"
data-toggle="tab"
role="tablist"
aria-expanded="true"
:key="tab.id"
>
<a
data-toggle="tab"
role="tablist"
:href="`#${tab.id}`"
@click.prevent="activateTab(tab)"
:aria-expanded="tab.active"
class="nav-link"
:class="{ active: tab.active }"
>
<tab-item-content :tab="tab"> </tab-item-content>
</a>
</li>
</ul>
</div>
<div
class="tab-content"
:class="[
{ 'tab-space': !vertical },
{ 'col-md-8': vertical && !tabContentClasses },
tabContentClasses
]"
>
<slot></slot>
</div>
</div>
</template>
<script>
export default {
name: 'tabs',
components: {
TabItemContent: {
props: ['tab'],
render(h) {
return h('div', [this.tab.$slots.title || this.tab.title]);
}
}
},
provide() {
return {
addTab: this.addTab,
removeTab: this.removeTab
};
},
props: {
type: {
type: String,
default: 'primary',
validator: value => {
let acceptedValues = [
'primary',
'info',
'success',
'warning',
'danger'
];
return acceptedValues.indexOf(value) !== -1;
}
},
activeTab: {
type: String,
default: '',
description: 'Active tab name'
},
tabNavWrapperClasses: {
type: [String, Object],
default: '',
description: 'ul wrapper css classes'
},
tabNavClasses: {
type: [String, Object],
default: '',
description: 'ul css classes'
},
tabContentClasses: {
type: [String, Object],
default: '',
description: 'tab content css classes'
},
vertical: Boolean,
centered: Boolean,
value: String
},
data() {
return {
tabs: []
};
},
methods: {
findAndActivateTab(title) {
let tabToActivate = this.tabs.find(t => t.title === title);
if (tabToActivate) {
this.activateTab(tabToActivate);
}
},
activateTab(tab) {
if (this.handleClick) {
this.handleClick(tab);
}
this.deactivateTabs();
tab.active = true;
},
deactivateTabs() {
this.tabs.forEach(tab => {
tab.active = false;
});
},
addTab(tab) {
const index = this.$slots.default.indexOf(tab.$vnode);
if (!this.activeTab && index === 0) {
tab.active = true;
}
if (this.activeTab === tab.name) {
tab.active = true;
}
this.tabs.splice(index, 0, tab);
},
removeTab(tab) {
const tabs = this.tabs;
const index = tabs.indexOf(tab);
if (index > -1) {
tabs.splice(index, 1);
}
}
},
mounted() {
this.$nextTick(() => {
if (this.value) {
this.findAndActivateTab(this.value);
}
});
},
watch: {
value(newVal) {
this.findAndActivateTab(newVal);
}
}
};
</script>
<style scoped></style>

View File

@ -1,17 +0,0 @@
<template>
<div class="timeline" :class="{[`timeline-${type}`]: type}">
<slot></slot>
</div>
</template>
<script>
export default {
name: 'time-line',
props: {
type: {
type: String,
default: ''
}
}
};
</script>
<style></style>

View File

@ -1,30 +0,0 @@
<template>
<div class="timeline-block" :class="{ 'timeline-inverted': inverted }">
<slot name="badge">
<span class="timeline-step" :class="`badge-${badgeType}`">
<i :class="badgeIcon"></i>
</span>
</slot>
<div class="timeline-content">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
name: 'time-line-item',
props: {
inverted: Boolean,
title: String,
badgeType: {
type: String,
default: 'success'
},
badgeIcon: {
type: String,
default: ''
}
}
};
</script>
<style></style>

View File

@ -1,28 +0,0 @@
<template>
<div class="world-map-container">
<world-map v-bind="$attrs" v-on="$listeners"></world-map>
</div>
</template>
<script>
/* We lazy load (async) the VectorMaps component because it contains 2 big libraries (jquery and jquery vector maps)
If the component is not loaded within 200ms, we display a loading component in the meanwhile.
This way, we don't bloat the main bundle with 2 unnecessary libs that we only need for this page :)
*/
import { LoadingPanel } from '@/components';
const WorldMap = () => ({
component: import('./WorldMap.vue'),
loading: LoadingPanel,
delay: 200
});
export default {
inheritAttrs: false,
components: {
WorldMap
}
};
</script>
<style>
.world-map-container {
min-height: 500px;
}
</style>

View File

@ -1,127 +0,0 @@
<template>
<div :id="id" class="world-map"></div>
</template>
<script>
import 'd3';
import * as d3 from 'd3';
import 'topojson';
import { throttle } from '@/util/throttle';
export default {
name: 'world-map',
props: {
mapData: {
type: Object,
default: () => ({})
},
points: {
type: Array,
default: () => []
}
},
data() {
return {
id: this.randomString(),
color1: '#f6f9fc',
color2: '#adb5bd',
highlightFillColor: '#ced4da',
borderColor: 'white',
highlightBorderColor: 'white',
bubbleHighlightFillColor: '#11cdef',
bubbleFillColor: '#fb6340'
};
},
methods: {
generateColors(length) {
return d3
.scaleLinear()
.domain([0, length])
.range([this.color1, this.color2]);
},
generateMapColors() {
let mapDataValues = Object.values(this.mapData);
let maxVal = Math.max(...mapDataValues);
let colors = this.generateColors(maxVal);
let mapData = {};
let fills = {
defaultFill: '#EDF0F2'
};
for (let key in this.mapData) {
let val = this.mapData[key];
fills[key] = colors(val);
mapData[key] = {
fillKey: key,
value: val
};
}
return {
mapData,
fills
};
},
async initVectorMap() {
let DataMap = await import('datamaps');
DataMap = DataMap.default || DataMap
let { fills, mapData } = this.generateMapColors();
let worldMap = new DataMap({
scope: 'world',
element: document.getElementById(this.id),
fills,
data: mapData,
responsive: true,
geographyConfig: {
borderColor: this.borderColor,
borderWidth: 1,
borderOpacity: 1,
highlightFillColor: this.highlightFillColor,
highlightBorderColor: this.highlightBorderColor,
highlightBorderWidth: 1,
highlightBorderOpacity: 1
}
});
let bubbleOptions = {
radius: 2,
borderWidth: 4,
highlightBorderWidth: 4,
fillKey: this.bubbleFillColor,
fillColor: this.bubbleFillColor,
borderColor: this.bubbleFillColor,
highlightFillColor: this.bubbleHighlightFillColor,
highlightBorderColor: this.bubbleHighlightFillColor
}
let bubblePoints = this.points.map(point => {
return {
...bubbleOptions,
...point
}
})
worldMap.bubbles(bubblePoints, {
popupTemplate: function(geo, data) {
return '<div class="hoverinfo">' + data.name
}
});
let resizeFunc = worldMap.resize.bind(worldMap);
window.addEventListener(
'resize',
() => {
throttle(resizeFunc, 40);
},
false
);
},
randomString() {
let text = "";
let possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
for (let i = 0; i < 5; i++)
text += possible.charAt(Math.floor(Math.random() * possible.length));
return text;
}
},
async mounted() {
this.initVectorMap();
}
};
</script>
<style></style>

View File

@ -1,36 +0,0 @@
<template>
<div class="form-group" :class="(attributes.required) ? col + ' required' : col">
<div class="input-checkbox">
<label :for="name" class="form-control-label">{{ text }}</label>
</div>
<div class="row">
<div class="col-md-4" v-for="(key, item, index) in items">
<div class="input-checkbox">
<input type="checkbox" :name="name" :value="key[id]"> <small>{{ key[value] }}</small>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'akaunting-checkbox-group',
props: {
name: '',
text: '',
items: [],
id: '',
value: '',
selected: '',
attributes: [],
col: ''
},
data () {
return {
}
},
created() {
}
}
</script>

View File

@ -1,33 +0,0 @@
<template>
<div class="form-group" :class="(attributes.required) ? col + ' required' : col">
<label :for="name" class="form-control-label">{{ text }}</label>
<div class="input-group input-group-merge">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fa" :class="'fa-' + icon"></i>
</span>
</div>
<input type="email" :name="name" :value="value" :id="name" class="form-control" v-bind="attributes">
</div>
</div>
</template>
<script>
export default {
name: 'akaunting-email-group',
props: {
name: '',
text: '',
icon: '',
attributes: [],
value: '',
col: ''
},
data () {
return {
}
},
created() {
}
}
</script>

View File

@ -1,34 +0,0 @@
<template>
<div class="form-group" :class="(attributes.required) ? col + ' required' : col">
<label :for="name" class="form-control-label">{{ text }}</label>
<div class="input-group input-group-merge custom-file">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fa" :class="'fa-' + icon"></i>
</span>
</div>
<input type="file" :name="name" :value="value" :id="name" class="form-control" v-bind="attributes">
<label :for="name" class="custom-file-label">{{ text }}</label>
</div>
</div>
</template>
<script>
export default {
name: 'akaunting-file-group',
props: {
name: '',
text: '',
icon: '',
attributes: [],
value: '',
col: ''
},
data () {
return {
}
},
created() {
}
}
</script>

View File

@ -1,36 +0,0 @@
<template>
<div class="form-group" :class="col">
<label :for="name" class="form-control-label">{{ text }}</label>
<div class="input-group input-group-merge">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fa" :class="'fa-' + icon"></i>
</span>
</div>
<input type="text" :name="input_name" :value="input_value" :id="input_name" class="form-control" v-bind="attributes">
</div>
</div>
</template>
<script>
export default {
name: 'akaunting-invoice-text-group',
props: {
name: '',
input_name: '',
input_value: '',
text: '',
icon: '',
attributes: [],
values: [],
selected: '',
col: ''
},
data () {
return {
}
},
created() {
}
}
</script>

View File

@ -1,33 +0,0 @@
<template>
<div class="form-group" :class="(attributes.required) ? col + ' required' : col">
<label :for="name" class="form-control-label">{{ text }}</label>
<div class="input-group input-group-merge">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fa" :class="'fa-' + icon"></i>
</span>
</div>
<input type="number" :name="name" :value="value" :id="name" class="form-control" v-bind="attributes">
</div>
</div>
</template>
<script>
export default {
name: 'akaunting-number-group',
props: {
name: '',
text: '',
icon: '',
attributes: [],
value: '',
col: ''
},
data () {
return {
}
},
created() {
}
}
</script>

View File

@ -1,33 +0,0 @@
<template>
<div class="form-group" :class="(attributes.required) ? col + ' required' : col">
<label :for="name" class="form-control-label">{{ text }}</label>
<div class="input-group input-group-merge">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fa" :class="'fa-' + icon"></i>
</span>
</div>
<input type="password" :name="name" :value="value" :id="name" class="form-control" v-bind="attributes">
</div>
</div>
</template>
<script>
export default {
name: 'akaunting-password-group',
props: {
name: '',
text: '',
icon: '',
attributes: [],
value: '',
col: ''
},
data () {
return {
}
},
created() {
}
}
</script>

View File

@ -1,54 +0,0 @@
<template>
<div class="col-md-12">
<a href="http://localhost/Ak-Dev/Beta/v2.0.0/common/items" class="btn btn-icon btn-outline-secondary">
<span class="btn-inner--icon"><i class="fas fa-times"></i></span>
<span class="btn-inner--text">Cancel</span>
</a>
<loading :active.sync="isLoading"
:can-cancel="false"
:on-cancel="onCancel"
:is-full-page="fullPage"
></loading>
<button type="button" v-on:click="doLoading" class="btn btn-icon btn-success button-submit">
<span class="btn-inner--icon"><i class="fas fa-save"></i></span>
<span class="btn-inner--text"> Save</span>
</button>
</div>
</template>
<script>
import Vue from 'vue';
// Import component
import Loading from 'vue-loading-overlay';
// Import stylesheet
import 'vue-loading-overlay/dist/vue-loading.css';
export default {
name: 'akaunting-save-buttons',
components: {
Loading
},
props: {
formSubmit: Function,
loading: false
},
data () {
return {
isLoading: loading,
fullPage: true
}
},
methods: {
doLoading() {
this.isLoading = true;
this.formSubmit();
},
onCancel() {
console.log('User cancelled the loader.')
}
}
}
</script>

View File

@ -1,37 +0,0 @@
<template>
<div class="form-group" :class="(attributes.required) ? col + ' required' : col">
<label :for="name" class="form-control-label">{{ text }}</label>
<div class="input-group input-group-merge">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fa" :class="'fa-' + icon"></i>
</span>
</div>
<select :name="name" :id="name" class="form-control" v-bind="attributes">
<option value="" disabled>{{ attributes.placeholder }}</option>
<option v-for="(key, value, index) in values" :value="value" :selected="selected == value">{{ key }}</option>
</select>
</div>
</div>
</template>
<script>
export default {
name: 'akaunting-select-group',
props: {
name: '',
text: '',
icon: '',
values: [],
selected: '',
attributes: [],
col: ''
},
data () {
return {
}
},
created() {
}
}
</script>

View File

@ -1,34 +0,0 @@
<template>
<div class="form-group" :class="(attributes.required) ? col + ' required' : col">
<label :for="name" class="form-control-label">{{ text }}</label>
<div class="input-group input-group-merge">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fa" :class="'fa-' + icon"></i>
</span>
</div>
<input type="text" :name="name" :value="value" :id="name" class="form-control" v-bind="attributes" v-on:input="onChange" v-model:input="forms.data[name]">
<div class="text-danger invalid-feedback d-block" v-text="" v-if="errors[name]">
{{ errors[name][0] }}
</div>
</div>
</div>
</template>
<script>
export default {
name: 'akaunting-text-group',
props: {
name: '',
text: '',
icon: '',
attributes: [],
value: '',
col: ''
},
data: {
},
created() {
}
}
</script>

View File

@ -1,26 +0,0 @@
<template>
<div class="form-group" :class="(attributes.required) ? col + ' required' : col">
<label :for="name" class="form-control-label">{{ text }}</label>
<textarea :name="name" :id="name" class="form-control" cols="50" v-bind="attributes">{{ value }}</textarea>
</div>
</template>
<script>
export default {
name: 'akaunting-textarea-group',
props: {
name: '',
text: '',
icon: '',
value: '',
attributes: [],
col: ''
},
data () {
return {
}
},
created() {
}
}
</script>

View File

@ -1,70 +0,0 @@
import BaseCheckbox from './Inputs/BaseCheckbox.vue';
import BaseAlert from './BaseAlert.vue';
import IconCheckbox from './Inputs/IconCheckbox.vue';
import BaseRadio from './Inputs/BaseRadio.vue';
import BaseInput from './Inputs/BaseInput.vue';
import TagsInput from './Inputs/TagsInput.vue';
import BaseSwitch from './BaseSwitch.vue';
import Badge from './Badge';
import BaseProgress from './BaseProgress.vue';
import BaseButton from './BaseButton.vue';
import BaseDropdown from './BaseDropdown.vue';
import BaseTable from './BaseTable.vue';
import Card from './Cards/Card.vue';
import StatsCard from './Cards/StatsCard.vue';
import BaseNav from './Navbar/BaseNav';
import NavbarToggleButton from './Navbar/NavbarToggleButton';
import Breadcrumb from './Breadcrumb/Breadcrumb.vue';
import BreadcrumbItem from './Breadcrumb/BreadcrumbItem.vue';
import RouteBreadCrumb from './Breadcrumb/RouteBreadcrumb.vue';
import TimeLine from './Timeline/TimeLine.vue';
import TimeLineItem from './Timeline/TimeLineItem.vue';
import TabPane from './Tabs/Tab.vue';
import Tabs from './Tabs/Tabs.vue';
import Collapse from './Collapse/Collapse.vue';
import CollapseItem from './Collapse/CollapseItem.vue';
import Modal from './Modal.vue';
import BaseSlider from './BaseSlider.vue';
import LoadingPanel from './LoadingPanel.vue';
import AsyncWorldMap from './WorldMap/AsyncWorldMap.vue';
import BasePagination from './BasePagination.vue';
import SidebarPlugin from './SidebarPlugin';
export {
BaseCheckbox,
IconCheckbox,
BaseSwitch,
Badge,
BaseAlert,
BaseProgress,
BasePagination,
BaseRadio,
BaseInput,
TagsInput,
Card,
StatsCard,
BaseTable,
BaseDropdown,
SidebarPlugin,
BaseNav,
NavbarToggleButton,
Breadcrumb,
BreadcrumbItem,
RouteBreadCrumb,
TimeLine,
TimeLineItem,
TabPane,
Tabs,
Modal,
BaseSlider,
BaseButton,
Collapse,
CollapseItem,
LoadingPanel,
AsyncWorldMap
};

View File

@ -17,6 +17,9 @@ import Language from './views/install/Language';
import Database from './views/install/Database';
import Settings from './views/install/Settings';
import Swiper, { Navigation, Pagination, Autoplay } from 'swiper';
Swiper.use([Navigation, Pagination, Autoplay]);
var global_path = new URL(url).protocol + '//' + window.location.host;
var base_path = url.replace(global_path, '');
@ -68,5 +71,19 @@ const router = new VueRouter({
new Vue({
el : '#app',
render: h => h(Install),
router
router,
mounted() {
new Swiper(".swiper-container", {
loop: true,
speed: 1000,
allowTouchMove: true,
autoplay: {
delay: 3000,
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});
}
});

View File

@ -7,11 +7,12 @@ import AkauntingContactCard from './../components/AkauntingContactCard';
import AkauntingCompanyEdit from './../components/AkauntingCompanyEdit';
import AkauntingEditItemColumns from './../components/AkauntingEditItemColumns';
import AkauntingItemButton from './../components/AkauntingItemButton';
import AkauntingDocumentButton from './../components/AkauntingDocumentButton';
import AkauntingSearch from './../components/AkauntingSearch';
import AkauntingModal from './../components/AkauntingModal';
import AkauntingMoney from './../components/AkauntingMoney';
import AkauntingModalAddNew from './../components/AkauntingModalAddNew';
import AkauntingRadioGroup from './../components/forms/AkauntingRadioGroup';
import AkauntingRadioGroup from './../components/AkauntingRadioGroup';
import AkauntingSelect from './../components/AkauntingSelect';
import AkauntingSelectRemote from './../components/AkauntingSelectRemote';
import AkauntingDate from './../components/AkauntingDate';
@ -19,6 +20,10 @@ import AkauntingRecurring from './../components/AkauntingRecurring';
import AkauntingHtmlEditor from './../components/AkauntingHtmlEditor';
import AkauntingCountdown from './../components/AkauntingCountdown';
import AkauntingCurrencyConversion from './../components/AkauntingCurrencyConversion';
import AkauntingConnectTransactions from './../components/AkauntingConnectTransactions';
import AkauntingSwitch from './../components/AkauntingSwitch';
import AkauntingSlider from './../components/AkauntingSlider';
import AkauntingColor from './../components/AkauntingColor';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
@ -27,6 +32,10 @@ import NProgressAxios from './../plugins/nprogress-axios';
import { Select, Option, Steps, Step, Button, Link, Tooltip, ColorPicker } from 'element-ui';
import Form from './../plugins/form';
import Swiper, { Navigation, Pagination } from 'swiper';
import GLightbox from 'glightbox';
Swiper.use([Navigation, Pagination]);
export default {
components: {
@ -35,6 +44,7 @@ export default {
AkauntingCompanyEdit,
AkauntingEditItemColumns,
AkauntingItemButton,
AkauntingDocumentButton,
AkauntingSearch,
AkauntingRadioGroup,
AkauntingSelect,
@ -47,6 +57,10 @@ export default {
AkauntingHtmlEditor,
AkauntingCountdown,
AkauntingCurrencyConversion,
AkauntingConnectTransactions,
AkauntingSwitch,
AkauntingSlider,
AkauntingColor,
[Select.name]: Select,
[Option.name]: Option,
[Steps.name]: Steps,
@ -71,6 +85,7 @@ export default {
"thousands_separator":",",
},
all_currencies: [],
content_loading: true
}
},
@ -79,8 +94,32 @@ export default {
},
mounted() {
setTimeout(() => {
this.content_loading = false;
}, 1500);
this.checkNotify();
GLightbox({
touchNavigation: true,
loop: false,
autoplayVideos: false,
selector: ".glightbox-video",
plyr: {
config: {
ratio: '16:9', // or '4:3'
muted: false,
hideControls: true,
youtube: {
noCookie: true,
rel: 0,
showinfo: 0,
iv_load_policy: 3
},
},
},
})
if (aka_currency) {
this.currency = aka_currency;
}
@ -88,12 +127,32 @@ export default {
if (typeof all_currencies !== 'undefined' && all_currencies) {
this.all_currencies = all_currencies;
}
GLightbox({
touchNavigation: true,
loop: false,
autoplayVideos: false,
selector: ".glightbox"
});
new Swiper(".swiper-container", {
loop: false,
slidesPerView: 2,
pagination: {
el: ".swiper-pagination",
clickable: true
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
},
methods: {
// Check Default set notify > store / update action
checkNotify: function () {
if (!flash_notification) {
if (! flash_notification) {
return false;
}
@ -108,7 +167,7 @@ export default {
this.$notify({
message: notify.message,
timeout: timeout,
icon: 'fas fa-bell',
icon: 'error_outline',
type
});
});
@ -130,42 +189,58 @@ export default {
},
// Bulk Action Select all
onSelectAll() {
onSelectAllBulkAction() {
this.bulk_action.selectAll();
},
// Bulk Action Select checked/ unchecked
onSelect() {
// Bulk Action Checkbox checked/ unchecked
onSelectBulkAction() {
this.bulk_action.select();
},
// Bulk Action use selected Change
onChange(event) {
var result = this.bulk_action.change(event);
onChangeBulkAction(type) {
this.bulk_action.change(type);
if (this.bulk_action.message.length) {
this.bulk_action.modal=true;
} else {
this.onActionBulkAction();
}
},
// Bulk Action use selected Action
onAction() {
onActionBulkAction() {
this.bulk_action.action();
},
// Bulk Action modal cancel
onCancel() {
onCancelBulkAction() {
this.bulk_action.modal = false;
},
// Bulk Action Clear selected items
onClear() {
onClearBulkAction() {
this.bulk_action.modal = false;
this.bulk_action.clear();
},
// List Enabled column status changes
onStatus(item_id, event) {
onStatusBulkAction(item_id, event) {
this.bulk_action.status(item_id, event, this.$notify);
},
onDeleteViaConfirmation(delete_id) {
let action = document.getElementById(delete_id).getAttribute('data-action');
let title = document.getElementById(delete_id).getAttribute('data-title');
let message = document.getElementById(delete_id).getAttribute('data-message');
let button_cancel = document.getElementById(delete_id).getAttribute('data-cancel');
let button_delete = document.getElementById(delete_id).getAttribute('data-delete');
this.confirmDelete(action, title, message, button_cancel, button_delete);
},
// Actions > Delete
confirmDelete(url, title, message, button_cancel, button_delete) {
let confirm = {
@ -222,7 +297,7 @@ export default {
// Change bank account get money and currency rate
onChangeAccount(account_id) {
if (!account_id) {
if (! account_id) {
return;
}
@ -230,7 +305,7 @@ export default {
params: {
account_id: account_id
}
})
})
.then(response => {
this.currency = response.data;
@ -243,31 +318,40 @@ export default {
// Change currency get money
onChangeCurrency(currency_code) {
if (!currency_code) {
if (! currency_code) {
return;
}
if (!this.all_currencies.length) {
if (! this.all_currencies.length) {
let currency_promise = Promise.resolve(window.axios.get((url + '/settings/currencies')));
currency_promise.then(response => {
if ( response.data.success) {
if (response.data.success) {
this.all_currencies = response.data.data;
}
this.all_currencies.forEach(function (currency, index) {
if (currency_code == currency.code) {
this.currency = currency;
this.form.currency_code = currency.code;
this.form.currency_rate = currency.rate;
}
}, this);
})
.catch(error => {
this.onChangeCurrency(currency_code);
});
} else {
this.all_currencies.forEach(function (currency, index) {
if (currency_code == currency.code) {
this.currency = currency;
this.form.currency_code = currency.code;
this.form.currency_rate = currency.rate;
}
}, this);
}
this.all_currencies.forEach(function (currency, index) {
if (currency_code == currency.code) {
this.currency = currency;
this.form.currency_code = currency.code;
this.form.currency_rate = currency.rate;
}
}, this);
},
// Pages limit change
@ -294,25 +378,24 @@ export default {
}
if (query_partials[0] == 'limit') {
path += 'limit=' + event.target.value;
path += 'limit=' + event.target.getAttribute("value");
} else {
path += query_partials[0] + '=' + query_partials[1];
}
});
} else {
path = window.location.href + '&limit=' + event.target.value;
path = window.location.href + '&limit=' + event.target.getAttribute("value");
}
} else {
path = window.location.href + '?limit=' + event.target.value;
path = window.location.href + '?limit=' + event.target.getAttribute("value");
}
window.location.href = path;
},
// Dynamic component get path view and show it.
onDynamicComponent(path)
{
onDynamicComponent(path) {
axios.get(path)
.then(response => {
let html = response.data.html;
@ -487,5 +570,92 @@ export default {
this.onChangeCurrency(currency_code);
},
onShareLink(url) {
let share = {
modal: false,
url: url,
title: '',
html: '',
buttons:{}
};
let share_promise = Promise.resolve(window.axios.get(share.url));
share_promise.then(response => {
share.modal = true;
share.title = response.data.data.title;
share.success_message = response.data.data.success_message;
share.html = response.data.html;
share.buttons = response.data.data.buttons;
this.component = Vue.component('add-new-component', (resolve, reject) => {
resolve({
template: '<div id="dynamic-share-component"><akaunting-modal-add-new modal-dialog-class="max-w-screen-md" :show="share.modal" @submit="onCopyLink" @cancel="onCancel" :buttons="share.buttons" :is_component=true :title="share.title" :message="share.html"></akaunting-modal-add-new></div>',
components: {
AkauntingModalAddNew,
},
data: function () {
return {
share: share,
form: {},
}
},
methods: {
onCopyLink(event) {
let type = 'success';
let copyText = document.querySelector('#dynamic-share-component #hidden-share');
copyText.select();
document.execCommand("copy");
this.$notify({
message: this.share.success_message,
timeout: 5000,
icon: 'error_outline',
type
});
this.onCancel();
},
onCancel() {
this.share.modal = false;
this.share.html = null;
let documentClasses = document.body.classList;
documentClasses.remove("modal-open");
},
}
})
});
})
.catch(error => {
})
.finally(function () {
// always executed
});
},
onCopyLink() {
let copy_html = document.getElementById('share');
let copy_badge = document.querySelector('[data-copied]');
copy_html.select();
document.execCommand('copy');
copy_badge.classList.remove('hidden');
copy_badge.classList.add('flex');
copy_html.classList.add('hidden');
setTimeout(() => {
copy_badge.classList.add('hidden');
copy_badge.classList.remove('flex');
copy_html.classList.remove('hidden');
}, 800);
}
}
}

Some files were not shown because too many files have changed in this diff Show More