fernando/luos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

PMCORE-3117:UI - New Custom Case List Setting Window, using Listbox

Browse Source
This commit is contained in:
Rodrigo Quelca
2021-08-09 12:58:42 +00:00
parent 0008c1322a
commit c4e5a00bf6
13 changed files with 2763 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
package-lock.json generated
View File

@@ -11,11 +11,44 @@
"regenerator-runtime": "^0.13.2"
}
},
"@fortawesome/fontawesome-common-types": {
"version": "0.2.35",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.35.tgz",
"integrity": "sha512-IHUfxSEDS9dDGqYwIW7wTN6tn/O8E0n5PcAHz9cAaBoZw6UpG20IG/YM3NNLaGPwPqgjBAFjIURzqoQs3rrtuw=="
},
"@fortawesome/fontawesome-free": {
"version": "5.15.1",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.1.tgz",
"integrity": "sha512-OEdH7SyC1suTdhBGW91/zBfR6qaIhThbcN8PUXtXilY4GYnSBbVqOntdHbC1vXwsDnX0Qix2m2+DSU1J51ybOQ==",
"dev": true
"integrity": "sha512-OEdH7SyC1suTdhBGW91/zBfR6qaIhThbcN8PUXtXilY4GYnSBbVqOntdHbC1vXwsDnX0Qix2m2+DSU1J51ybOQ=="
},
"@fortawesome/fontawesome-svg-core": {
"version": "1.2.35",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.35.tgz",
"integrity": "sha512-uLEXifXIL7hnh2sNZQrIJWNol7cTVIzwI+4qcBIq9QWaZqUblm0IDrtSqbNg+3SQf8SMGHkiSigD++rHmCHjBg==",
"requires": {
"@fortawesome/fontawesome-common-types": "^0.2.35"
}
},
"@fortawesome/free-brands-svg-icons": {
"version": "5.15.3",
"resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.15.3.tgz",
"integrity": "sha512-1hirPcbjj72ZJtFvdnXGPbAbpn3Ox6mH3g5STbANFp3vGSiE5u5ingAKV06mK6ZVqNYxUPlh4DlTnaIvLtF2kw==",
"requires": {
"@fortawesome/fontawesome-common-types": "^0.2.35"
}
},
"@fortawesome/free-solid-svg-icons": {
"version": "5.15.3",
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.3.tgz",
"integrity": "sha512-XPeeu1IlGYqz4VWGRAT5ukNMd4VHUEEJ7ysZ7pSSgaEtNvSo+FLurybGJVmiqkQdK50OkSja2bfZXOeyMGRD8Q==",
"requires": {
"@fortawesome/fontawesome-common-types": "^0.2.35"
}
},
"@fortawesome/vue-fontawesome": {
"version": "0.1.10",
"resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-0.1.10.tgz",
"integrity": "sha512-b2+SLF31h32LSepVcXe+BQ63yvbq5qmTCy4KfFogCYm2bn68H5sDWUnX+U7MBqnM2aeEk9M7xSoqGnu+wSdY6w=="
},
"@nuxt/opencollective": {
"version": "0.3.2",
@@ -36,6 +69,14 @@
"vue": "^2.5.16"
}
},
"@rightbraintechbd/vue-awesome-icon-picker": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@rightbraintechbd/vue-awesome-icon-picker/-/vue-awesome-icon-picker-1.1.0.tgz",
"integrity": "sha512-7O01yWD2h/s4SeT3sB7UUfuSRBBaQm7csx/4NFjtt2vnlmbFIBuK5e8SFb6i7S4CdhdjeXUAdPOP8CiZcSg22Q==",
"requires": {
"@fortawesome/fontawesome-free": "^5.13.0"
}
},
"@types/chart.js": {
"version": "2.9.28",
"resolved": "https://registry.npmjs.org/@types/chart.js/-/chart.js-2.9.28.tgz",
@@ -1487,6 +1528,16 @@
"vue-functional-data-merge": "^3.1.0"
}
},
"bootstrap-vue-font-awesome-picker": {
"version": "0.1.3",
"resolved": "https://registry.npmjs.org/bootstrap-vue-font-awesome-picker/-/bootstrap-vue-font-awesome-picker-0.1.3.tgz",
"integrity": "sha512-gTji5kl03tw7rEjDi+YrY1JmsPPmD3kiu36VKkyZTjskgSStab8WY4qBL+RIKw3VegWCidkcZV6DukpD9FvEow==",
"requires": {
"bootstrap": "^4.4.1",
"vue": "^2.6.11",
"vue-click-outside": "^1.0.7"
}
},
"brace-expansion": {
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -2137,6 +2188,11 @@
"color-name": "~1.1.4"
}
},
"color-fns": {
"version": "0.0.10",
"resolved": "https://registry.npmjs.org/color-fns/-/color-fns-0.0.10.tgz",
"integrity": "sha512-QFKowTE9CXCLp09Gz5cQo8VPUP55hf73iHEI52JC3NyKfMpQG2VoLWmTxYeTKH6ngkEnoMrCdEX//M6J4PVQBA=="
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
@@ -4606,7 +4662,6 @@
"version": "2.2.4",
"resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
"integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
"dev": true,
"requires": {
"loose-envify": "^1.0.0"
}
@@ -4952,8 +5007,7 @@
"js-tokens": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",
"integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=",
"dev": true
"integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls="
},
"js-yaml": {
"version": "3.7.0",
@@ -5306,7 +5360,6 @@
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
"dev": true,
"requires": {
"js-tokens": "^3.0.0 || ^4.0.0"
}
@@ -8611,6 +8664,11 @@
"integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
"dev": true
},
"pure-color": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/pure-color/-/pure-color-1.3.0.tgz",
"integrity": "sha1-H+Bk+wrIUfDeYTIKi/eWg2Qi8z4="
},
"q": {
"version": "1.5.1",
"resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
@@ -10661,6 +10719,26 @@
"integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
"dev": true
},
"v-color": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/v-color/-/v-color-1.1.2.tgz",
"integrity": "sha512-C3lbi9wjAnR4OVV41R73setGfdDAALcpv0u38vEqOpQY4nP7Tc7VyY2j/iUyKcSfOqczETas/xqIjeNvI7aHXQ==",
"requires": {
"invariant": "^2.2.4",
"lodash": "^4.17.10",
"object-assign": "^4.1.1",
"pure-color": "^1.3.0",
"v-ctrl": "^1.1.0"
}
},
"v-ctrl": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/v-ctrl/-/v-ctrl-1.1.0.tgz",
"integrity": "sha1-1hj6Id0Skchi9VbTIiSJ5+ngiqg=",
"requires": {
"lodash": "^4.17.4"
}
},
"validate-npm-package-license": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
@@ -10704,6 +10782,23 @@
"extsprintf": "^1.2.0"
}
},
"verte": {
"version": "0.0.12",
"resolved": "https://registry.npmjs.org/verte/-/verte-0.0.12.tgz",
"integrity": "sha512-QEWpKkjAT8SLkNJzeiZxN7tJuUiTTFO51tg9dGIrkDlQhzbaM+bTT0wtDM2c/F+Ur9luE64qhsM4xI0Af3Ut1g==",
"requires": {
"color-fns": "^0.0.10"
}
},
"vfa-picker": {
"version": "5.9.1",
"resolved": "https://registry.npmjs.org/vfa-picker/-/vfa-picker-5.9.1.tgz",
"integrity": "sha512-HytUGQWlEEWTbPm+s7AVXql6WI0+YNu9JsIFYsxdwjw/n5+IWRjKybGpEieknbAUkZoFZWKtke7zykIO2yjixA==",
"requires": {
"core-js": "^2.6.5",
"vue": "^2.6.10"
}
},
"vm-browserify": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
@@ -10732,6 +10827,11 @@
"@types/chart.js": "^2.7.55"
}
},
"vue-click-outside": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/vue-click-outside/-/vue-click-outside-1.1.0.tgz",
"integrity": "sha512-pNyvAA9mRXJwPHlHJyjMb4IONSc7khS5lxGcMyE2EIKgNMAO279PWM9Hyq0d5J4FkiSRdmFLwnbjDd5UtPizHQ=="
},
"vue-clipboards": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/vue-clipboards/-/vue-clipboards-1.3.0.tgz",
@@ -10781,6 +10881,20 @@
"resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.22.2.tgz",
"integrity": "sha512-rb569fVJInPUgS/bbCxEQ9DrAoFTntuJvYoK4Fpk2VfNbA09WzdTKk57ppjz3S+ps9hW+p9H+2ASgMvojedkow=="
},
"vue-icon-picker": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/vue-icon-picker/-/vue-icon-picker-1.0.0.tgz",
"integrity": "sha512-pr1/SGnYXn+KwpM1gI4y/yOf8OGpsOaWYGZ2lLX8IxapkPDB7bNvRSeG7B9gCz3dG4iGwTB/kJo2ajrDaSaG5A==",
"requires": {
"@fortawesome/fontawesome-svg-core": "^1.2.4",
"@fortawesome/free-brands-svg-icons": "^5.3.1",
"@fortawesome/free-solid-svg-icons": "^5.3.1",
"@fortawesome/vue-fontawesome": "^0.1.1",
"vue": "^2.5.17",
"vue-click-outside": "^1.0.7",
"vue-color": "^2.6.0"
}
},
"vue-js-toggle-button": {
"version": "1.3.3",
"resolved": "https://registry.npmjs.org/vue-js-toggle-button/-/vue-js-toggle-button-1.3.3.tgz",

6
package.json
View File

@@ -20,10 +20,12 @@
"vue-template-compiler": "^2.6.10"
},
"dependencies": {
"@rightbraintechbd/vue-awesome-icon-picker": "^1.1.0",
"axios": "^0.15.3",
"bootstrap": "^4.5.3",
"bootstrap-colorpicker": "^3.0.3",
"bootstrap-vue": "^2.19.0",
"bootstrap-vue-font-awesome-picker": "^0.1.3",
"chart.js": "^2.7.2",
"dateformat": "^3.0.3",
"faker": "^5.1.0",
@@ -39,6 +41,9 @@
"promise-polyfill": "8.1.3",
"sortablejs": "^1.13.0",
"uiv": "^0.28.0",
"v-color": "^1.1.2",
"verte": "0.0.12",
"vfa-picker": "^5.9.1",
"vue": "^2.6.12",
"vue-awesome-swiper": "^3.1.3",
"vue-chartjs": "^3.3.2",
@@ -47,6 +52,7 @@
"vue-faker": "^3.0.0",
"vue-fullscreen": "^2.1.3",
"vue-i18n": "^8.22.2",
"vue-icon-picker": "^1.0.0",
"vue-js-toggle-button": "^1.3.1",
"vue-multiselect": "^2.1.6",
"vue-muuri": "^0.1.2",

230
resources/assets/js/admin/settings/customCaseList/CaseListSketch.vue Normal file
View File

@@ -0,0 +1,230 @@
<template>
<div
id="home"
>
<div class="demo">
<div class="container">
<h5 >{{ $t("ID_NEW_CASES_LISTS") }}</h5>
<div class="row">
<div class="col-sm">
<b-row>
<b-col>
<b-form-group
id="nameLabel"
label="Name "
label-for="name"
>
<b-form-input
id="name"
v-model="params.name"
placeholder="Set a Case List Name"
required
></b-form-input>
</b-form-group>
</b-col>
<b-col>
<b-form-group
id="tableLabel"
label="PM Table "
label-for="name"
>
<multiselect
v-model="params.tableUid"
:options="pmTablesOptions"
placeholder="Chose an option"
label="label"
track-by="value"
:show-no-results="false"
@search-change="asyncFind"
:loading="isLoading"
id="ajax"
:limit="10"
:clear-on-select="true"
>
</multiselect>
</b-form-group>
</b-col>
</b-row>
<b-form-group
id="descriptionLabel"
label="Description "
label-for="description"
>
<b-form-textarea
id="description"
v-model="params.description"
placeholder="Some Text"
rows="1"
max-rows="1"
></b-form-textarea>
</b-form-group>
<v-client-table :columns="columns" v-model="data" :options="options">
<a slot="uri" slot-scope="props" target="_blank" :href="props.row.uri" class="glyphicon glyphicon-eye-open"></a>
<div slot="child_row" slot-scope="props">
The link to {{props.row.name}} is <a :href="props.row.uri">{{props.row.uri}}</a>
</div>
<div slot="name" slot-scope="{row, update, setEditing, isEditing, revertValue}">
<span @click="setEditing(true)" v-if="!isEditing()">
<a>{{row.name}}</a>
</span>
<span v-else>
<input type="text" v-model="row.name">
<button type="button" class="btn btn-info btn-xs" @click="update(row.name); setEditing(false)">Submit</button>
<button type="button" class="btn btn-default btn-xs" @click="revertValue(); setEditing(false)">Cancel</button>
</span>
</div>
</v-client-table>
<b-form-group
id="iconLabel"
label="Icon "
label-for="icon"
>
<icon-picker @selected="onSelectIcon" :color="menuColor"/>
</b-form-group>
<div>
<b-form-group
id="menuColor"
label="Menu Color "
label-for="icon"
>
<verte :value="menuColor" id="icon" @input="onChangeColor" picker="square" menuPosition="left" model="hex">
<svg viewBox="0 0 50 50">
<path d="M 10 10 H 90 V 90 H 10 L 10 10"/>
</svg>
</verte>
</b-form-group>
</div>
<div>
<b-form-group
id="screenColor"
label="Screen Color Icon"
label-for="screen"
>
<verte id="screen" picker="square" menuPosition="left" model="rgb">
<svg viewBox="0 0 50 50">
<path d="M 10 10 H 90 V 90 H 10 L 10 10"/>
</svg>
</verte>
</b-form-group>
</div>
</div>
<div class="col-sm">
One of two columns
</div>
</div>
<div>
<b-button variant="danger" @click="onCancel">Cancel</b-button>
<b-button variant="outline-primary">Preview</b-button>
<b-button variant="success">Save</b-button>
</div>
</div>
</div>
</div>
</template>
<script>
import utils from "../../../utils/utils"
import Multiselect from "vue-multiselect";
import api from "./../../../api/index";
import IconPicker from '../../../components/iconPicker/IconPicker.vue';
export default {
name: "CaseListSketh",
components: {
Multiselect,
IconPicker,
IconPicker
},
props:["params"],
data() {
return {
icon: "fas fa-user-cog",
isLoading: false,
menuColor:"#4287f5",
pmTablesOptions: [],
columns: ['name', 'code', 'uri'],
data: utils.getData(),
options: {
headings: {
name: 'Country Name',
code: 'Country Code',
uri: 'View Record'
},
filterable:true,
editableColumns:['name'],
sortable: ['name', 'code'],
filterable: ['name', 'code']
}
};
},
mounted() {
},
methods: {
onSelectIcon(data){
console.log (data);
},
onChangeColor(color){
console.log(color);
this.menuColor = color;
},
onCancel(){
this.$emit("closeSketch");
},
onChange (e) {
console.log(e)
},
/**
* Find asynchronously in the server
* @param {string} query - string from the text field
*/
asyncFind(query) {
let self = this;
this.isLoading = true;
self.processes = [];
api.filters
.processList(query)
.then((response) => {
self.processes = [];
_.forEach(response.data, function(elem, key) {
self.pmTablesOptions.push({
label: elem.PRO_TITLE,
value: elem.PRO_ID,
});
});
this.isLoading = false;
})
.catch((e) => {
console.error(err);
});
},
}
};
</script>
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
<style scoped>
.verte {
position: relative;
display: flex;
justify-content: normal;
}
</style>

29
resources/assets/js/admin/settings/customCaseList/CustomCaseList.vue
View File

@@ -3,13 +3,16 @@
id="home"
>
<div class="demo">
<div class="container">
<div class="container" v-if="!showSketch">
<h5 >{{ $t("ID_CUSTOM_CASES_LISTS") }}</h5>
<div class="x_content">
<b-container fluid>
<b-tabs content-class="mt-3">
<b-tab :title="$t('TO_DO')" active>
<Tables module="inbox"/>
<Tables module="inbox"
@showSketch="onShowSketch"
@closeSketch="onCloseSketch"
/>
</b-tab>
<b-tab :title="$t('ID_DRAFT')" lazy>
<Tables module="draft"/>
@@ -25,25 +28,43 @@
</div>
</div>
<div class="container" v-if="showSketch">
<CaseListSketch
@showSketch="onShowSketch"
@closeSketch="onCloseSketch"
:params="params"
/>
</div>
</div>
</div>
</template>
<script>
import Tables from "./Tables";
import CaseListSketch from "./CaseListSketch"
export default {
name: "CustomCaseList",
components: {
Tables
Tables,
CaseListSketch
},
data() {
return {
showSketch: false,
params: {}
};
},
mounted() {
},
methods: {
onShowSketch (params) {
this.showSketch = true;
debugger;
this.params = params;
},
onCloseSketch (params) {
this.showSketch = false;
}
}
};

13
resources/assets/js/admin/settings/customCaseList/Tables.vue
View File

@@ -55,6 +55,17 @@ export default {
title: this.$i18n.t("New List"),
class: "btn-success",
onClick: () => {
this.$emit("showSketch", {
name: "Rocko",
description: "algo te texto",
tableUid: "1234",
iconList: '',
iconColor: '',
iconColorScreen:'',
type: this.module
});
//TODO button
}
},
@@ -76,8 +87,6 @@ export default {
],
tableData: [],
options: {
perPage:25,
perPageValues:[25],
filterable: true,
headings: {
name: this.$i18n.t("ID_NAME"),

10
resources/assets/js/admin/settings/customCaseList/main.js
View File

@@ -10,14 +10,17 @@ import "@fortawesome/fontawesome-free/js/all.js";
import 'bootstrap/dist/css/bootstrap-grid.css';
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import CustomCaseList from "./CustomCaseList";
import Verte from 'verte';
import 'verte/dist/verte.css';
// register component globally
Vue.component('verte', Verte);
Vue.use(VueRouter);
Vue.use(VueSidebarMenu);
Vue.use(BootstrapVue);
Vue.use(BootstrapVueIcons);
Vue.use(VueI18n);
Vue.use(BootstrapVueIcons)
Vue.use(ServerTable, {}, false, 'bootstrap3', {});
Vue.use(ClientTable, {}, false, 'bootstrap3', {});
window.ProcessMaker = {
@@ -48,5 +51,6 @@ new Vue({
// eslint-disable-line no-new
el: "#customCaseList",
router,
components: { Verte },
render: (h) => h(CustomCaseList),
});

210
resources/assets/js/components/iconPicker/IconPicker.vue Normal file
View File

@@ -0,0 +1,210 @@
<template>
<div class="rbt-icon-picker">
<b-button @click="popUpActive = true">
<i ref="icon" v-bind:class="`${selectedIcon.type} fa-${selectedIcon.name}`" v-bind:color="color"></i>
</b-button>
<div class="rip-popup-component" :style="popupActiveStyle">
<div class="rip-popup-bg"></div>
<div class="rip-popup">
<div class="rip-popup-content">
<div class="rip-search">
<div class="rip-input">
<label for="ripSearch" style="display: none;">Search for Icon</label>
<input id="ripSearch" placeholder="Search for Icon" v-model="searchText" @input="searchTextChanged">
<span class="input-append">
<i class="fas fa-search"></i>
</span>
</div>
</div>
<div class="rip-content">
<div class="rip-not-found" v-show="loading">
<i class="fas fa-spinner fa-pulse"></i>
</div>
<div class="rip-icons" v-show="!loading">
<h4 class="icon-title">
Regular Icons
</h4>
<p style="text-align: center;" v-if="regularIcons.length <= 0">
<i class="fas fa-eye-slash"></i>
Sorry, No icons found!
</p>
<ul class="rip-row" v-if="regularIcons.length > 0">
<li v-for="(icon, index) in regularIcons" :key="index" class="rip-col">
<div class="icon-content text-center">
<div class="icon-el" @click="selectIcon(icon, 'far')">
<i :class="`far fa-${icon}`"></i>
</div>
<div class="icon-title">
{{ icon }}
</div>
</div>
</li>
</ul>
<h4 class="icon-title">
Brand Icons
</h4>
<p style="text-align: center;" v-if="brandIcons.length <= 0">
<i class="fas fa-eye-slash"></i>
Sorry, No Brand icons found!
</p>
<ul class="rip-row" v-if="brandIcons.length > 0">
<li v-for="(icon, index) in brandIcons" :key="index" class="rip-col">
<div class="icon-content text-center">
<div class="icon-el" @click="selectIcon(icon, 'fab')">
<i :class="`fab fa-${icon}`"></i>
</div>
<div class="icon-title">
{{ icon }}
</div>
</div>
</li>
</ul>
<h4 class="icon-title">
Solid Icons
</h4>
<p style="text-align: center;" v-if="solidIcons.length <= 0">
<i class="fas fa-eye-slash"></i>
Sorry, No Solid icons found!
</p>
<ul class="rip-row" v-if="solidIcons.length > 0">
<li v-for="(icon, index) in solidIcons" :key="index" class="rip-col">
<div class="icon-content text-center">
<div class="icon-el" @click="selectIcon(icon, 'fas')">
<i :class="`fas fa-${icon}`"></i>
</div>
<div class="icon-title">
{{ icon }}
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import ripIcons from './assets/icons';
export default {
name: 'VueAwesomeIconPicker',
props: {
button: {
type: String,
default: 'Pick A Icon'
},
color: {
type: String,
default: 'black'
},
title: {
type: String,
default: 'Vue Awesome Icon Picker'
},
iconPreview: {
type: Boolean,
default: true
}
},
data() {
return {
loading: false,
allIcons: {
brand: [],
regular: [],
solid: []
},
popUpActive: false,
selectedIcon: {
name: "list",
type: "fas"
},
searchText: '',
searchIconNotFound: false
}
},
watch: {
color(){
console.log("colores");
}
},
methods: {
selectIcon(icon, type) {
this.selectedIcon.type = type;
this.selectedIcon.name = icon;
this.popUpActive = false;
this.$emit('selected', this.selectedIcon);
},
searchTextChanged() {
this.searchIcon(this.searchText);
},
setDefaultIcons() {
this.allIcons.brand = ripIcons.brand;
this.allIcons.regular = ripIcons.regular;
this.allIcons.solid = ripIcons.solid;
},
searchIcon(txt) {
this.loading = true;
if(txt && txt.length > 0) {
setTimeout(() => {
this.loading = false;
}, 950);
txt = txt.toLowerCase();
Object.keys(ripIcons).forEach(key => {
setTimeout(() => {
let icons = ripIcons[key].filter(ico => ico.indexOf(txt) > -1);
if(icons && icons.length > 0) {
this.allIcons[key] = icons;
} else {
this.allIcons[key] = [];
}
}, 320);
});
} else {
setTimeout(() => {
this.setDefaultIcons();
this.loading = false;
}, 950);
}
}
},
created() {
this.setDefaultIcons();
},
computed: {
popupActiveStyle() {
return !this.popUpActive ? 'display: none;' : '';
},
brandIcons() {
return this.loading ? [] : this.allIcons.brand;
},
solidIcons() {
return this.loading ? [] : this.allIcons.solid;
},
regularIcons() {
return this.loading ? [] : this.allIcons.regular;
}
}
};
</script>
<style lang="scss" scoped>
@import "./assets/RbtIconPicker";
</style>

239
resources/assets/js/components/iconPicker/assets/_RbtIconPicker.scss Normal file
View File

@@ -0,0 +1,239 @@
.rbt-icon-picker {
.icon-preview {
font-size: 22px;
padding: 10px 20px 0;
display: inline-block;
}
.picker-btn {
color: #fff;
background: #339af0;
padding: 12px 25px;
border: 0;
border-radius: 2px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.02em;
cursor: pointer;
transition: all .25s ease-in;
&:hover {
background: #2c89d6;
}
}
}
.rip-popup-component {
text-align: center;
z-index: 5999999;
transition: all .2s;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
opacity: 1;
.rip-popup-bg {
width: 100%;
background: rgba(0,0,0,.4);
position: absolute;
top: 0;
height: 100%;
z-index: 10;
transition: all .25s ease;
opacity: 1;
left: 0;
}
.rip-popup {
transition: all .2s;
z-index: 100;
margin: 10px;
width: calc(100% - 30px);
height: calc(100% - 30px);
border-radius: 6px;
box-shadow: 0 5px 20px 0 rgba(0,0,0,.1);
background: #f8f9fa;
animation: rebound .3s;
.rip-popup-header {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
background: rgba(0,0,0,.05);
border-radius: 5px 5px;
position: relative;
h2 {
transition: all .23s ease .1s;
padding: 8px 8px 8px 12px;
font-size: 18px;
text-align: center;
width: 100%;
}
span {
background: #ffffff;
transition: all .23s ease .1s;
position: relative;
padding: 8px;
cursor: pointer;
box-shadow: 0 5px 20px 0 rgba(0,0,0,.1);
border-radius: 5px;
color: rgba(0,0,0,.6);
transform: translate(8px,-8px);
line-height: 16px;
font-size: 30px;
&:hover {
box-shadow: 0 0 0 0 rgba(0,0,0,.1);
transform: translate(5px,-5px);
}
}
}
.rip-popup-content {
padding: 14px;
font-size: 14px;
transition: all .23s ease .1s;
overflow: auto;
max-height: calc(100vh - 100px);
margin-top: 5px;
margin-bottom: 5px;
.rip-search {
.rip-input {
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
position: relative;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding-bottom: 20px;
border-bottom: 1px dashed #e5e5e5;
margin-bottom: 20px;
input {
width: 100% !important;
transition: all .1s ease-in-out;
padding: 16px 48px 16px 24px;
font-size: 25px;
border: 2px solid #dee2e6;
box-shadow: inset 0 0.25rem 0.125rem 0 rgba(0,0,0,0.05);
color: #495057;
border-radius: 4px;
&::placeholder {
color: #c9cbcd;
}
}
span {
position: absolute;
right: 25px;
font-size: 28px;
color: #caccce;
opacity: 0.4;
}
}
}
.rip-content {
width: 100%;
.rip-not-found {
min-height: 75vh;
display: flex;
align-items: center;
align-self: center;
align-content: center;
min-width: 100%;
text-align: center;
svg {
margin: 0 auto;
font-size: 50px;
color: #adb5bd;
}
}
h4.icon-title {
font-size: 20px;
text-transform: uppercase;
letter-spacing: 0.03em;
margin-bottom: 25px;
}
.rip-row {
width: 100%;
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
.rip-col {
text-align: center;
padding: 0 0 16px;
width: 25%;
list-style: none;
.icon-content {
border-radius: 3px;
transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
transform: translateZ(0);
.icon-el {
padding: 8px;
font-size: 35px;
font-weight: 900;
color: #495057;
cursor: pointer;
transition: all ;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
&:hover {
color: #fff;
background: #339af0;
}
}
.icon-title {
padding: 8px 4px;
font-size: 13px;
color: #adb5bd;
&:hover {
color: #495057;
}
}
&:hover {
background: #fff;
box-shadow: 0 0.25rem 0.125rem 0 rgba(0,0,0,0.05);
}
}
@media (min-width: 576px) {
width: 20%;
}
@media (min-width: 768px) {
width: 16.6667%;
}
@media (min-width: 1200px) {
width: 11.1111%;
}
}
}
}
}
}
}
@keyframes rebound {
0% {
-webkit-transform: scale(.9);
transform: scale(.9);
}
50% {
-webkit-transform: scale(1.08);
transform: scale(1.08);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}

437
resources/assets/js/components/iconPicker/assets/icons/brand.js Normal file
View File

@@ -0,0 +1,437 @@
const brand = [
'500px',
'accessible-icon',
'accusoft',
'acquisitions-incorporated',
'adn',
'adobe',
'adversal',
'affiliatetheme',
'airbnb',
'algolia',
'alipay',
'amazon',
'amazon-pay',
'amilia',
'android',
'angellist',
'angrycreative',
'angular',
'app-store',
'app-store-ios',
'apper',
'apple',
'apple-pay',
'artstation',
'asymmetrik',
'atlassian',
'audible',
'autoprefixer',
'avianex',
'aviato',
'aws',
'bandcamp',
'battle-net',
'behance',
'behance-square',
'bimobject',
'bitbucket',
'bitcoin',
'bity',
'black-tie',
'blackberry',
'blogger',
'blogger-b',
'bluetooth',
'bluetooth-b',
'bootstrap',
'btc',
'buffer',
'buromobelexperte',
'buy-n-large',
'buysellads',
'canadian-maple-leaf',
'cc-amazon-pay',
'cc-amex',
'cc-apple-pay',
'cc-diners-club',
'cc-discover',
'cc-jcb',
'cc-mastercard',
'cc-paypal',
'cc-stripe',
'cc-visa',
'centercode',
'centos',
'chrome',
'chromecast',
'cloudscale',
'cloudsmith',
'cloudversify',
'codepen',
'codiepie',
'confluence',
'connectdevelop',
'contao',
'cotton-bureau',
'cpanel',
'creative-commons',
'creative-commons-by',
'creative-commons-nc',
'creative-commons-nc-eu',
'creative-commons-nc-jp',
'creative-commons-nd',
'creative-commons-pd',
'creative-commons-pd-alt',
'creative-commons-remix',
'creative-commons-sa',
'creative-commons-sampling',
'creative-commons-sampling-plus',
'creative-commons-share',
'creative-commons-zero',
'critical-role',
'css3',
'css3-alt',
'cuttlefish',
'd-and-d',
'd-and-d-beyond',
'dashcube',
'delicious',
'deploydog',
'deskpro',
'dev',
'deviantart',
'dhl',
'diaspora',
'digg',
'digital-ocean',
'discord',
'discourse',
'dochub',
'docker',
'draft2digital',
'dribbble',
'dribbble-square',
'dropbox',
'drupal',
'dyalog',
'earlybirds',
'ebay',
'edge',
'elementor',
'ello',
'ember',
'empire',
'envira',
'erlang',
'ethereum',
'etsy',
'evernote',
'expeditedssl',
'facebook',
'facebook-f',
'facebook-messenger',
'facebook-square',
'fantasy-flight-games',
'fedex',
'fedora',
'figma',
'firefox',
'first-order',
'first-order-alt',
'firstdraft',
'flickr',
'flipboard',
'fly',
'font-awesome',
'font-awesome-alt',
'font-awesome-flag',
'fonticons',
'fonticons-fi',
'fort-awesome',
'fort-awesome-alt',
'forumbee',
'foursquare',
'free-code-camp',
'freebsd',
'fulcrum',
'galactic-republic',
'galactic-senate',
'get-pocket',
'gg',
'gg-circle',
'git',
'git-alt',
'git-square',
'github',
'github-alt',
'github-square',
'gitkraken',
'gitlab',
'gitter',
'glide',
'glide-g',
'gofore',
'goodreads',
'goodreads-g',
'google',
'google-drive',
'google-play',
'google-plus',
'google-plus-g',
'google-plus-square',
'google-wallet',
'gratipay',
'grav',
'gripfire',
'grunt',
'gulp',
'hacker-news',
'hacker-news-square',
'hackerrank',
'hips',
'hire-a-helper',
'hooli',
'hornbill',
'hotjar',
'houzz',
'html5',
'hubspot',
'imdb',
'instagram',
'intercom',
'internet-explorer',
'invision',
'ioxhost',
'itch-io',
'itunes',
'itunes-note',
'java',
'jedi-order',
'jenkins',
'jira',
'joget',
'joomla',
'js',
'js-square',
'jsfiddle',
'kaggle',
'keybase',
'keycdn',
'kickstarter',
'kickstarter-k',
'korvue',
'laravel',
'lastfm',
'lastfm-square',
'leanpub',
'less',
'line',
'linkedin',
'linkedin-in',
'linode',
'linux',
'lyft',
'magento',
'mailchimp',
'mandalorian',
'markdown',
'mastodon',
'maxcdn',
'mdb',
'medapps',
'medium',
'medium-m',
'medrt',
'meetup',
'megaport',
'mendeley',
'microsoft',
'mix',
'mixcloud',
'mizuni',
'modx',
'monero',
'napster',
'neos',
'nimblr',
'node',
'node-js',
'npm',
'ns8',
'nutritionix',
'odnoklassniki',
'odnoklassniki-square',
'old-republic',
'opencart',
'openid',
'opera',
'optin-monster',
'orcid',
'osi',
'page4',
'pagelines',
'palfed',
'patreon',
'paypal',
'penny-arcade',
'periscope',
'phabricator',
'phoenix-framework',
'phoenix-squadron',
'php',
'pied-piper',
'pied-piper-alt',
'pied-piper-hat',
'pied-piper-pp',
'pinterest',
'pinterest-p',
'pinterest-square',
'playstation',
'product-hunt',
'pushed',
'python',
'qq',
'quinscape',
'quora',
'r-project',
'raspberry-pi',
'ravelry',
'react',
'reacteurope',
'readme',
'rebel',
'red-river',
'reddit',
'reddit-alien',
'reddit-square',
'redhat',
'renren',
'replyd',
'researchgate',
'resolving',
'rev',
'rocketchat',
'rockrms',
'safari',
'salesforce',
'sass',
'schlix',
'scribd',
'searchengin',
'sellcast',
'sellsy',
'servicestack',
'shirtsinbulk',
'shopware',
'simplybuilt',
'sistrix',
'sith',
'sketch',
'skyatlas',
'skype',
'slack',
'slack-hash',
'slideshare',
'snapchat',
'snapchat-ghost',
'snapchat-square',
'soundcloud',
'sourcetree',
'speakap',
'speaker-deck',
'spotify',
'squarespace',
'stack-exchange',
'stack-overflow',
'stackpath',
'staylinked',
'steam',
'steam-square',
'steam-symbol',
'sticker-mule',
'strava',
'stripe',
'stripe-s',
'studiovinari',
'stumbleupon',
'stumbleupon-circle',
'superpowers',
'supple',
'suse',
'swift',
'symfony',
'teamspeak',
'telegram',
'telegram-plane',
'tencent-weibo',
'the-red-yeti',
'themeco',
'themeisle',
'think-peaks',
'trade-federation',
'trello',
'tripadvisor',
'tumblr',
'tumblr-square',
'twitch',
'twitter',
'twitter-square',
'typo3',
'uber',
'ubuntu',
'uikit',
'umbraco',
'uniregistry',
'untappd',
'ups',
'usb',
'usps',
'ussunnah',
'vaadin',
'viacoin',
'viadeo',
'viadeo-square',
'viber',
'vimeo',
'vimeo-square',
'vimeo-v',
'vine',
'vk',
'vnv',
'vuejs',
'waze',
'weebly',
'weibo',
'weixin',
'whatsapp',
'whatsapp-square',
'whmcs',
'wikipedia-w',
'windows',
'wix',
'wizards-of-the-coast',
'wolf-pack-battalion',
'wordpress',
'wordpress-simple',
'wpbeginner',
'wpexplorer',
'wpforms',
'wpressr',
'xbox',
'xing',
'xing-square',
'y-combinator',
'yahoo',
'yammer',
'yandex',
'yandex-international',
'yarn',
'yelp',
'yoast',
'youtube',
'youtube-square',
'zhihu'
];
export default brand;

7
resources/assets/js/components/iconPicker/assets/icons/index.js Normal file
View File

@@ -0,0 +1,7 @@
import solid from "./solid";
import regular from "./regular";
import brand from "./brand";
const icons = { solid, brand, regular };
export default icons;

155
resources/assets/js/components/iconPicker/assets/icons/regular.js Normal file
View File

@@ -0,0 +1,155 @@
const regular = [
'address-book',
'address-card',
'angry',
'arrow-alt-circle-down',
'arrow-alt-circle-left',
'arrow-alt-circle-right',
'arrow-alt-circle-up',
'bell',
'bell-slash',
'bookmark',
'building',
'calendar',
'calendar-alt',
'calendar-check',
'calendar-minus',
'calendar-plus',
'calendar-times',
'caret-square-down',
'caret-square-left',
'caret-square-right',
'caret-square-up',
'chart-bar',
'check-circle',
'check-square',
'circle',
'clipboard',
'clock',
'clone',
'closed-captioning',
'comment',
'comment-alt',
'comment-dots',
'comments',
'compass',
'copy',
'copyright',
'credit-card',
'dizzy',
'dot-circle',
'edit',
'envelope',
'envelope-open',
'eye',
'eye-slash',
'file',
'file-alt',
'file-archive',
'file-audio',
'file-code',
'file-excel',
'file-image',
'file-pdf',
'file-powerpoint',
'file-video',
'file-word',
'flag',
'flushed',
'folder',
'folder-open',
'frown',
'frown-open',
'futbol',
'gem',
'grimace',
'grin',
'grin-alt',
'grin-beam',
'grin-beam-sweat',
'grin-hearts',
'grin-squint',
'grin-squint-tears',
'grin-stars',
'grin-tears',
'grin-tongue',
'grin-tongue-squint',
'grin-tongue-wink',
'grin-wink',
'hand-lizard',
'hand-paper',
'hand-peace',
'hand-point-down',
'hand-point-left',
'hand-point-right',
'hand-point-up',
'hand-pointer',
'hand-rock',
'hand-scissors',
'hand-spock',
'handshake',
'hdd',
'heart',
'hospital',
'hourglass',
'id-badge',
'id-card',
'image',
'images',
'keyboard',
'kiss',
'kiss-beam',
'kiss-wink-heart',
'laugh',
'laugh-beam',
'laugh-squint',
'laugh-wink',
'lemon',
'life-ring',
'lightbulb',
'list-alt',
'map',
'meh',
'meh-blank',
'meh-rolling-eyes',
'minus-square',
'money-bill-alt',
'moon',
'newspaper',
'object-group',
'object-ungroup',
'paper-plane',
'pause-circle',
'play-circle',
'plus-square',
'question-circle',
'registered',
'sad-cry',
'sad-tear',
'save',
'share-square',
'smile',
'smile-beam',
'smile-wink',
'snowflake',
'square',
'star',
'star-half',
'sticky-note',
'stop-circle',
'sun',
'surprise',
'thumbs-down',
'thumbs-up',
'times-circle',
'tired',
'trash-alt',
'user',
'user-circle',
'window-close',
'window-maximize',
'window-minimize',
'window-restore'
];
export default regular;

962
resources/assets/js/components/iconPicker/assets/icons/solid.js Normal file
View File

@@ -0,0 +1,962 @@
const solid = [
'ad',
'address-book',
'address-card',
'adjust',
'air-freshener',
'align-center',
'align-justify',
'align-left',
'align-right',
'allergies',
'ambulance',
'american-sign-language-interpreting',
'anchor',
'angle-double-down',
'angle-double-left',
'angle-double-right',
'angle-double-up',
'angle-down',
'angle-left',
'angle-right',
'angle-up',
'angry',
'ankh',
'apple-alt',
'archive',
'archway',
'arrow-alt-circle-down',
'arrow-alt-circle-left',
'arrow-alt-circle-right',
'arrow-alt-circle-up',
'arrow-circle-down',
'arrow-circle-left',
'arrow-circle-right',
'arrow-circle-up',
'arrow-down',
'arrow-left',
'arrow-right',
'arrow-up',
'arrows-alt',
'arrows-alt-h',
'arrows-alt-v',
'assistive-listening-systems',
'asterisk',
'at',
'atlas',
'atom',
'audio-description',
'award',
'baby',
'baby-carriage',
'backspace',
'backward',
'bacon',
'balance-scale',
'balance-scale-left',
'balance-scale-right',
'ban',
'band-aid',
'barcode',
'bars',
'baseball-ball',
'basketball-ball',
'bath',
'battery-empty',
'battery-full',
'battery-half',
'battery-quarter',
'battery-three-quarters',
'bed',
'beer',
'bell',
'bell-slash',
'bezier-curve',
'bible',
'bicycle',
'biking',
'binoculars',
'biohazard',
'birthday-cake',
'blender',
'blender-phone',
'blind',
'blog',
'bold',
'bolt',
'bomb',
'bone',
'bong',
'book',
'book-dead',
'book-medical',
'book-open',
'book-reader',
'bookmark',
'border-all',
'border-none',
'border-style',
'bowling-ball',
'box',
'box-open',
'boxes',
'braille',
'brain',
'bread-slice',
'briefcase',
'briefcase-medical',
'broadcast-tower',
'broom',
'brush',
'bug',
'building',
'bullhorn',
'bullseye',
'burn',
'bus',
'bus-alt',
'business-time',
'calculator',
'calendar',
'calendar-alt',
'calendar-check',
'calendar-day',
'calendar-minus',
'calendar-plus',
'calendar-times',
'calendar-week',
'camera',
'camera-retro',
'campground',
'candy-cane',
'cannabis',
'capsules',
'car',
'car-alt',
'car-battery',
'car-crash',
'car-side',
'caret-down',
'caret-left',
'caret-right',
'caret-square-down',
'caret-square-left',
'caret-square-right',
'caret-square-up',
'caret-up',
'carrot',
'cart-arrow-down',
'cart-plus',
'cash-register',
'cat',
'certificate',
'chair',
'chalkboard',
'chalkboard-teacher',
'charging-station',
'chart-area',
'chart-bar',
'chart-line',
'chart-pie',
'check',
'check-circle',
'check-double',
'check-square',
'cheese',
'chess',
'chess-bishop',
'chess-board',
'chess-king',
'chess-knight',
'chess-pawn',
'chess-queen',
'chess-rook',
'chevron-circle-down',
'chevron-circle-left',
'chevron-circle-right',
'chevron-circle-up',
'chevron-down',
'chevron-left',
'chevron-right',
'chevron-up',
'child',
'church',
'circle',
'circle-notch',
'city',
'clinic-medical',
'clipboard',
'clipboard-check',
'clipboard-list',
'clock',
'clone',
'closed-captioning',
'cloud',
'cloud-download-alt',
'cloud-meatball',
'cloud-moon',
'cloud-moon-rain',
'cloud-rain',
'cloud-showers-heavy',
'cloud-sun',
'cloud-sun-rain',
'cloud-upload-alt',
'cocktail',
'code',
'code-branch',
'coffee',
'cog',
'cogs',
'coins',
'columns',
'comment',
'comment-alt',
'comment-dollar',
'comment-dots',
'comment-medical',
'comment-slash',
'comments',
'comments-dollar',
'compact-disc',
'compass',
'compress',
'compress-arrows-alt',
'concierge-bell',
'cookie',
'cookie-bite',
'copy',
'copyright',
'couch',
'credit-card',
'crop',
'crop-alt',
'cross',
'crosshairs',
'crow',
'crown',
'crutch',
'cube',
'cubes',
'cut',
'database',
'deaf',
'democrat',
'desktop',
'dharmachakra',
'diagnoses',
'dice',
'dice-d20',
'dice-d6',
'dice-five',
'dice-four',
'dice-one',
'dice-six',
'dice-three',
'dice-two',
'digital-tachograph',
'directions',
'divide',
'dizzy',
'dna',
'dog',
'dollar-sign',
'dolly',
'dolly-flatbed',
'donate',
'door-closed',
'door-open',
'dot-circle',
'dove',
'download',
'drafting-compass',
'dragon',
'draw-polygon',
'drum',
'drum-steelpan',
'drumstick-bite',
'dumbbell',
'dumpster',
'dumpster-fire',
'dungeon',
'edit',
'egg',
'eject',
'ellipsis-h',
'ellipsis-v',
'envelope',
'envelope-open',
'envelope-open-text',
'envelope-square',
'equals',
'eraser',
'ethernet',
'euro-sign',
'exchange-alt',
'exclamation',
'exclamation-circle',
'exclamation-triangle',
'expand',
'expand-arrows-alt',
'external-link-alt',
'external-link-square-alt',
'eye',
'eye-dropper',
'eye-slash',
'fan',
'fast-backward',
'fast-forward',
'fax',
'feather',
'feather-alt',
'female',
'fighter-jet',
'file',
'file-alt',
'file-archive',
'file-audio',
'file-code',
'file-contract',
'file-csv',
'file-download',
'file-excel',
'file-export',
'file-image',
'file-import',
'file-invoice',
'file-invoice-dollar',
'file-medical',
'file-medical-alt',
'file-pdf',
'file-powerpoint',
'file-prescription',
'file-signature',
'file-upload',
'file-video',
'file-word',
'fill',
'fill-drip',
'film',
'filter',
'fingerprint',
'fire',
'fire-alt',
'fire-extinguisher',
'first-aid',
'fish',
'fist-raised',
'flag',
'flag-checkered',
'flag-usa',
'flask',
'flushed',
'folder',
'folder-minus',
'folder-open',
'folder-plus',
'font',
'football-ball',
'forward',
'frog',
'frown',
'frown-open',
'funnel-dollar',
'futbol',
'gamepad',
'gas-pump',
'gavel',
'gem',
'genderless',
'ghost',
'gift',
'gifts',
'glass-cheers',
'glass-martini',
'glass-martini-alt',
'glass-whiskey',
'glasses',
'globe',
'globe-africa',
'globe-americas',
'globe-asia',
'globe-europe',
'golf-ball',
'gopuram',
'graduation-cap',
'greater-than',
'greater-than-equal',
'grimace',
'grin',
'grin-alt',
'grin-beam',
'grin-beam-sweat',
'grin-hearts',
'grin-squint',
'grin-squint-tears',
'grin-stars',
'grin-tears',
'grin-tongue',
'grin-tongue-squint',
'grin-tongue-wink',
'grin-wink',
'grip-horizontal',
'grip-lines',
'grip-lines-vertical',
'grip-vertical',
'guitar',
'h-square',
'hamburger',
'hammer',
'hamsa',
'hand-holding',
'hand-holding-heart',
'hand-holding-usd',
'hand-lizard',
'hand-middle-finger',
'hand-paper',
'hand-peace',
'hand-point-down',
'hand-point-left',
'hand-point-right',
'hand-point-up',
'hand-pointer',
'hand-rock',
'hand-scissors',
'hand-spock',
'hands',
'hands-helping',
'handshake',
'hanukiah',
'hard-hat',
'hashtag',
'hat-cowboy',
'hat-cowboy-side',
'hat-wizard',
'heading',
'headphones',
'headphones-alt',
'headset',
'heart',
'heart-broken',
'heartbeat',
'helicopter',
'highlighter',
'hiking',
'hippo',
'history',
'hockey-puck',
'holly-berry',
'home',
'horse',
'horse-head',
'hospital',
'hospital-alt',
'hospital-symbol',
'hot-tub',
'hotdog',
'hotel',
'hourglass',
'hourglass-end',
'hourglass-half',
'hourglass-start',
'house-damage',
'hryvnia',
'i-cursor',
'ice-cream',
'icicles',
'icons',
'id-badge',
'id-card',
'id-card-alt',
'igloo',
'image',
'images',
'inbox',
'indent',
'industry',
'infinity',
'info',
'info-circle',
'italic',
'jedi',
'joint',
'journal-whills',
'kaaba',
'key',
'keyboard',
'khanda',
'kiss',
'kiss-beam',
'kiss-wink-heart',
'kiwi-bird',
'landmark',
'language',
'laptop',
'laptop-code',
'laptop-medical',
'laugh',
'laugh-beam',
'laugh-squint',
'laugh-wink',
'layer-group',
'leaf',
'lemon',
'less-than',
'less-than-equal',
'level-down-alt',
'level-up-alt',
'life-ring',
'lightbulb',
'link',
'lira-sign',
'list',
'list-alt',
'list-ol',
'list-ul',
'location-arrow',
'lock',
'lock-open',
'long-arrow-alt-down',
'long-arrow-alt-left',
'long-arrow-alt-right',
'long-arrow-alt-up',
'low-vision',
'luggage-cart',
'magic',
'magnet',
'mail-bulk',
'male',
'map',
'map-marked',
'map-marked-alt',
'map-marker',
'map-marker-alt',
'map-pin',
'map-signs',
'marker',
'mars',
'mars-double',
'mars-stroke',
'mars-stroke-h',
'mars-stroke-v',
'mask',
'medal',
'medkit',
'meh',
'meh-blank',
'meh-rolling-eyes',
'memory',
'menorah',
'mercury',
'meteor',
'microchip',
'microphone',
'microphone-alt',
'microphone-alt-slash',
'microphone-slash',
'microscope',
'minus',
'minus-circle',
'minus-square',
'mitten',
'mobile',
'mobile-alt',
'money-bill',
'money-bill-alt',
'money-bill-wave',
'money-bill-wave-alt',
'money-check',
'money-check-alt',
'monument',
'moon',
'mortar-pestle',
'mosque',
'motorcycle',
'mountain',
'mouse',
'mouse-pointer',
'mug-hot',
'music',
'network-wired',
'neuter',
'newspaper',
'not-equal',
'notes-medical',
'object-group',
'object-ungroup',
'oil-can',
'om',
'otter',
'outdent',
'pager',
'paint-brush',
'paint-roller',
'palette',
'pallet',
'paper-plane',
'paperclip',
'parachute-box',
'paragraph',
'parking',
'passport',
'pastafarianism',
'paste',
'pause',
'pause-circle',
'paw',
'peace',
'pen',
'pen-alt',
'pen-fancy',
'pen-nib',
'pen-square',
'pencil-alt',
'pencil-ruler',
'people-carry',
'pepper-hot',
'percent',
'percentage',
'person-booth',
'phone',
'phone-alt',
'phone-slash',
'phone-square',
'phone-square-alt',
'phone-volume',
'photo-video',
'piggy-bank',
'pills',
'pizza-slice',
'place-of-worship',
'plane',
'plane-arrival',
'plane-departure',
'play',
'play-circle',
'plug',
'plus',
'plus-circle',
'plus-square',
'podcast',
'poll',
'poll-h',
'poo',
'poo-storm',
'poop',
'portrait',
'pound-sign',
'power-off',
'pray',
'praying-hands',
'prescription',
'prescription-bottle',
'prescription-bottle-alt',
'print',
'procedures',
'project-diagram',
'puzzle-piece',
'qrcode',
'question',
'question-circle',
'quidditch',
'quote-left',
'quote-right',
'quran',
'radiation',
'radiation-alt',
'rainbow',
'random',
'receipt',
'record-vinyl',
'recycle',
'redo',
'redo-alt',
'registered',
'remove-format',
'reply',
'reply-all',
'republican',
'restroom',
'retweet',
'ribbon',
'ring',
'road',
'robot',
'rocket',
'route',
'rss',
'rss-square',
'ruble-sign',
'ruler',
'ruler-combined',
'ruler-horizontal',
'ruler-vertical',
'running',
'rupee-sign',
'sad-cry',
'sad-tear',
'satellite',
'satellite-dish',
'save',
'school',
'screwdriver',
'scroll',
'sd-card',
'search',
'search-dollar',
'search-location',
'search-minus',
'search-plus',
'seedling',
'server',
'shapes',
'share',
'share-alt',
'share-alt-square',
'share-square',
'shekel-sign',
'shield-alt',
'ship',
'shipping-fast',
'shoe-prints',
'shopping-bag',
'shopping-basket',
'shopping-cart',
'shower',
'shuttle-van',
'sign',
'sign-in-alt',
'sign-language',
'sign-out-alt',
'signal',
'signature',
'sim-card',
'sitemap',
'skating',
'skiing',
'skiing-nordic',
'skull',
'skull-crossbones',
'slash',
'sleigh',
'sliders-h',
'smile',
'smile-beam',
'smile-wink',
'smog',
'smoking',
'smoking-ban',
'sms',
'snowboarding',
'snowflake',
'snowman',
'snowplow',
'socks',
'solar-panel',
'sort',
'sort-alpha-down',
'sort-alpha-down-alt',
'sort-alpha-up',
'sort-alpha-up-alt',
'sort-amount-down',
'sort-amount-down-alt',
'sort-amount-up',
'sort-amount-up-alt',
'sort-down',
'sort-numeric-down',
'sort-numeric-down-alt',
'sort-numeric-up',
'sort-numeric-up-alt',
'sort-up',
'spa',
'space-shuttle',
'spell-check',
'spider',
'spinner',
'splotch',
'spray-can',
'square',
'square-full',
'square-root-alt',
'stamp',
'star',
'star-and-crescent',
'star-half',
'star-half-alt',
'star-of-david',
'star-of-life',
'step-backward',
'step-forward',
'stethoscope',
'sticky-note',
'stop',
'stop-circle',
'stopwatch',
'store',
'store-alt',
'stream',
'street-view',
'strikethrough',
'stroopwafel',
'subscript',
'subway',
'suitcase',
'suitcase-rolling',
'sun',
'superscript',
'surprise',
'swatchbook',
'swimmer',
'swimming-pool',
'synagogue',
'sync',
'sync-alt',
'syringe',
'table',
'table-tennis',
'tablet',
'tablet-alt',
'tablets',
'tachometer-alt',
'tag',
'tags',
'tape',
'tasks',
'taxi',
'teeth',
'teeth-open',
'temperature-high',
'temperature-low',
'tenge',
'terminal',
'text-height',
'text-width',
'th',
'th-large',
'th-list',
'theater-masks',
'thermometer',
'thermometer-empty',
'thermometer-full',
'thermometer-half',
'thermometer-quarter',
'thermometer-three-quarters',
'thumbs-down',
'thumbs-up',
'thumbtack',
'ticket-alt',
'times',
'times-circle',
'tint',
'tint-slash',
'tired',
'toggle-off',
'toggle-on',
'toilet',
'toilet-paper',
'toolbox',
'tools',
'tooth',
'torah',
'torii-gate',
'tractor',
'trademark',
'traffic-light',
'train',
'tram',
'transgender',
'transgender-alt',
'trash',
'trash-alt',
'trash-restore',
'trash-restore-alt',
'tree',
'trophy',
'truck',
'truck-loading',
'truck-monster',
'truck-moving',
'truck-pickup',
'tshirt',
'tty',
'tv',
'umbrella',
'umbrella-beach',
'underline',
'undo',
'undo-alt',
'universal-access',
'university',
'unlink',
'unlock',
'unlock-alt',
'upload',
'user',
'user-alt',
'user-alt-slash',
'user-astronaut',
'user-check',
'user-circle',
'user-clock',
'user-cog',
'user-edit',
'user-friends',
'user-graduate',
'user-injured',
'user-lock',
'user-md',
'user-minus',
'user-ninja',
'user-nurse',
'user-plus',
'user-secret',
'user-shield',
'user-slash',
'user-tag',
'user-tie',
'user-times',
'users',
'users-cog',
'utensil-spoon',
'utensils',
'vector-square',
'venus',
'venus-double',
'venus-mars',
'vial',
'vials',
'video',
'video-slash',
'vihara',
'voicemail',
'volleyball-ball',
'volume-down',
'volume-mute',
'volume-off',
'volume-up',
'vote-yea',
'vr-cardboard',
'walking',
'wallet',
'warehouse',
'water',
'wave-square',
'weight',
'weight-hanging',
'wheelchair',
'wifi',
'wind',
'window-close',
'window-maximize',
'window-minimize',
'window-restore',
'wine-bottle',
'wine-glass',
'wine-glass-alt',
'won-sign',
'wrench',
'x-ray',
'yen-sign',
'yin-yang'
];
export default solid;

354
resources/assets/js/utils/utils.js
View File

@@ -89,5 +89,359 @@ export default {
}
return obj;
},
getData() {
return [{
code: "ZW",
name: "Zimbabwe",
created_at: "2015-04-24T01:46:50.459583",
updated_at: "2015-04-24T01:46:50.459593",
uri: "http://api.lobbyfacts.eu/api/1/country/245",
id: 245
}, {
code: "ZM",
name: "Zambia",
created_at: "2015-04-24T01:46:50.457459",
updated_at: "2015-04-24T01:46:50.457468",
uri: "http://api.lobbyfacts.eu/api/1/country/244",
id: 244
}, {
code: "YE",
name: "Yemen",
created_at: "2015-04-24T01:46:50.454731",
updated_at: "2015-04-24T01:46:50.454741",
uri: "http://api.lobbyfacts.eu/api/1/country/243",
id: 243
}, {
code: "EH",
name: "Western Sahara",
created_at: "2015-04-24T01:46:50.452002",
updated_at: "2015-04-24T01:46:50.452011",
uri: "http://api.lobbyfacts.eu/api/1/country/242",
id: 242
}, {
code: "WF",
name: "Wallis & Futuna",
created_at: "2015-04-24T01:46:50.449346",
updated_at: "2015-04-24T01:46:50.449355",
uri: "http://api.lobbyfacts.eu/api/1/country/241",
id: 241
}, {
code: "VN",
name: "Vietnam",
created_at: "2015-04-24T01:46:50.446644",
updated_at: "2015-04-24T01:46:50.446652",
uri: "http://api.lobbyfacts.eu/api/1/country/240",
id: 240
}, {
code: "VE",
name: "Venezuela",
created_at: "2015-04-24T01:46:50.444031",
updated_at: "2015-04-24T01:46:50.444040",
uri: "http://api.lobbyfacts.eu/api/1/country/239",
id: 239
}, {
code: "VU",
name: "Vanuatu",
created_at: "2015-04-24T01:46:50.441423",
updated_at: "2015-04-24T01:46:50.441433",
uri: "http://api.lobbyfacts.eu/api/1/country/238",
id: 238
}, {
code: "UZ",
name: "Uzbekistan",
created_at: "2015-04-24T01:46:50.438748",
updated_at: "2015-04-24T01:46:50.438757",
uri: "http://api.lobbyfacts.eu/api/1/country/237",
id: 237
}, {
code: "UY",
name: "Uruguay",
created_at: "2015-04-24T01:46:50.435761",
updated_at: "2015-04-24T01:46:50.435770",
uri: "http://api.lobbyfacts.eu/api/1/country/236",
id: 236
}, {
code: "VI",
name: "United States Virgin Islands",
created_at: "2015-04-24T01:46:50.433229",
updated_at: "2015-04-24T01:46:50.433238",
uri: "http://api.lobbyfacts.eu/api/1/country/235",
id: 235
}, {
code: "US",
name: "United States",
created_at: "2015-04-24T01:46:50.430335",
updated_at: "2015-04-24T01:46:50.430340",
uri: "http://api.lobbyfacts.eu/api/1/country/234",
id: 234
}, {
code: "GB",
name: "United Kingdom",
created_at: "2015-04-24T01:46:50.427956",
updated_at: "2015-04-24T01:46:50.427961",
uri: "http://api.lobbyfacts.eu/api/1/country/233",
id: 233
}, {
code: "AE",
name: "United Arab Emirates",
created_at: "2015-04-24T01:46:50.425383",
updated_at: "2015-04-24T01:46:50.425392",
uri: "http://api.lobbyfacts.eu/api/1/country/232",
id: 232
}, {
code: "UA",
name: "Ukraine",
created_at: "2015-04-24T01:46:50.422970",
updated_at: "2015-04-24T01:46:50.422980",
uri: "http://api.lobbyfacts.eu/api/1/country/231",
id: 231
}, {
code: "UG",
name: "Uganda",
created_at: "2015-04-24T01:46:50.419963",
updated_at: "2015-04-24T01:46:50.419968",
uri: "http://api.lobbyfacts.eu/api/1/country/230",
id: 230
}, {
code: "TV",
name: "Tuvalu",
created_at: "2015-04-24T01:46:50.417896",
updated_at: "2015-04-24T01:46:50.417906",
uri: "http://api.lobbyfacts.eu/api/1/country/229",
id: 229
}, {
code: "TC",
name: "Turks & Caicos Islands",
created_at: "2015-04-24T01:46:50.414854",
updated_at: "2015-04-24T01:46:50.414868",
uri: "http://api.lobbyfacts.eu/api/1/country/228",
id: 228
}, {
code: "TM",
name: "Turkmenistan",
created_at: "2015-04-24T01:46:50.412601",
updated_at: "2015-04-24T01:46:50.412605",
uri: "http://api.lobbyfacts.eu/api/1/country/227",
id: 227
}, {
code: "TR",
name: "Turkey",
created_at: "2015-04-24T01:46:50.411105",
updated_at: "2015-04-24T01:46:50.411110",
uri: "http://api.lobbyfacts.eu/api/1/country/226",
id: 226
}, {
code: "TN",
name: "Tunisia",
created_at: "2015-04-24T01:46:50.409535",
updated_at: "2015-04-24T01:46:50.409539",
uri: "http://api.lobbyfacts.eu/api/1/country/225",
id: 225
}, {
code: "TT",
name: "Trinidad & Tobago",
created_at: "2015-04-24T01:46:50.408030",
updated_at: "2015-04-24T01:46:50.408034",
uri: "http://api.lobbyfacts.eu/api/1/country/224",
id: 224
}, {
code: "TO",
name: "Tonga",
created_at: "2015-04-24T01:46:50.406306",
updated_at: "2015-04-24T01:46:50.406311",
uri: "http://api.lobbyfacts.eu/api/1/country/223",
id: 223
}, {
code: "TK",
name: "Tokelau",
created_at: "2015-04-24T01:46:50.404794",
updated_at: "2015-04-24T01:46:50.404799",
uri: "http://api.lobbyfacts.eu/api/1/country/222",
id: 222
}, {
code: "TG",
name: "Togo",
created_at: "2015-04-24T01:46:50.403306",
updated_at: "2015-04-24T01:46:50.403310",
uri: "http://api.lobbyfacts.eu/api/1/country/221",
id: 221
}, {
code: "TH",
name: "Thailand",
created_at: "2015-04-24T01:46:50.400840",
updated_at: "2015-04-24T01:46:50.400849",
uri: "http://api.lobbyfacts.eu/api/1/country/220",
id: 220
}, {
code: "TZ",
name: "Tanzania",
created_at: "2015-04-24T01:46:50.397846",
updated_at: "2015-04-24T01:46:50.397855",
uri: "http://api.lobbyfacts.eu/api/1/country/219",
id: 219
}, {
code: "TJ",
name: "Tajikistan",
created_at: "2015-04-24T01:46:50.394924",
updated_at: "2015-04-24T01:46:50.394933",
uri: "http://api.lobbyfacts.eu/api/1/country/218",
id: 218
}, {
code: "TW",
name: "Taiwan",
created_at: "2015-04-24T01:46:50.391969",
updated_at: "2015-04-24T01:46:50.391978",
uri: "http://api.lobbyfacts.eu/api/1/country/217",
id: 217
}, {
code: "SY",
name: "Syria",
created_at: "2015-04-24T01:46:50.389120",
updated_at: "2015-04-24T01:46:50.389124",
uri: "http://api.lobbyfacts.eu/api/1/country/216",
id: 216
}, {
code: "CH",
name: "Switzerland",
created_at: "2015-04-24T01:46:50.386939",
updated_at: "2015-04-24T01:46:50.386943",
uri: "http://api.lobbyfacts.eu/api/1/country/215",
id: 215
}, {
code: "SE",
name: "Sweden",
created_at: "2015-04-24T01:46:50.385345",
updated_at: "2015-04-24T01:46:50.385349",
uri: "http://api.lobbyfacts.eu/api/1/country/214",
id: 214
}, {
code: "SZ",
name: "Swaziland",
created_at: "2015-04-24T01:46:50.383834",
updated_at: "2015-04-24T01:46:50.383838",
uri: "http://api.lobbyfacts.eu/api/1/country/213",
id: 213
}, {
code: "SR",
name: "Suriname",
created_at: "2015-04-24T01:46:50.382073",
updated_at: "2015-04-24T01:46:50.382078",
uri: "http://api.lobbyfacts.eu/api/1/country/212",
id: 212
}, {
code: "SD",
name: "Sudan",
created_at: "2015-04-24T01:46:50.380114",
updated_at: "2015-04-24T01:46:50.380119",
uri: "http://api.lobbyfacts.eu/api/1/country/211",
id: 211
}, {
code: "LK",
name: "Sri Lanka",
created_at: "2015-04-24T01:46:50.378189",
updated_at: "2015-04-24T01:46:50.378195",
uri: "http://api.lobbyfacts.eu/api/1/country/210",
id: 210
}, {
code: "ES",
name: "Spain",
created_at: "2015-04-24T01:46:50.376105",
updated_at: "2015-04-24T01:46:50.376109",
uri: "http://api.lobbyfacts.eu/api/1/country/209",
id: 209
}, {
code: "SS",
name: "South Sudan",
created_at: "2015-04-24T01:46:50.373942",
updated_at: "2015-04-24T01:46:50.373946",
uri: "http://api.lobbyfacts.eu/api/1/country/208",
id: 208
}, {
code: "KR",
name: "South Korea",
created_at: "2015-04-24T01:46:50.371790",
updated_at: "2015-04-24T01:46:50.371794",
uri: "http://api.lobbyfacts.eu/api/1/country/207",
id: 207
}, {
code: "GS",
name: "South Georgia & The South Sandwish Islands",
created_at: "2015-04-24T01:46:50.369460",
updated_at: "2015-04-24T01:46:50.369465",
uri: "http://api.lobbyfacts.eu/api/1/country/206",
id: 206
}, {
code: "ZA",
name: "South Africa",
created_at: "2015-04-24T01:46:50.367247",
updated_at: "2015-04-24T01:46:50.367252",
uri: "http://api.lobbyfacts.eu/api/1/country/205",
id: 205
}, {
code: "SO",
name: "Somaliland",
created_at: "2015-04-24T01:46:50.362905",
updated_at: "2016-09-18T18:34:35.724427",
uri: "http://api.lobbyfacts.eu/api/1/country/204",
id: 204
}, {
code: "SB",
name: "Solomon Islands",
created_at: "2015-04-24T01:46:50.360631",
updated_at: "2015-04-24T01:46:50.360635",
uri: "http://api.lobbyfacts.eu/api/1/country/203",
id: 203
}, {
code: "SI",
name: "Slovenia",
created_at: "2015-04-24T01:46:50.358394",
updated_at: "2015-04-24T01:46:50.358399",
uri: "http://api.lobbyfacts.eu/api/1/country/202",
id: 202
}, {
code: "SK",
name: "Slovakia",
created_at: "2015-04-24T01:46:50.356154",
updated_at: "2015-04-24T01:46:50.356158",
uri: "http://api.lobbyfacts.eu/api/1/country/201",
id: 201
}, {
code: "SX",
name: "Sint Maarten",
created_at: "2015-04-24T01:46:50.353807",
updated_at: "2015-04-24T01:46:50.353811",
uri: "http://api.lobbyfacts.eu/api/1/country/200",
id: 200
}, {
code: "SG",
name: "Singapore",
created_at: "2015-04-24T01:46:50.349354",
updated_at: "2015-04-24T01:46:50.349358",
uri: "http://api.lobbyfacts.eu/api/1/country/199",
id: 199
}, {
code: "SL",
name: "Sierra Leone",
created_at: "2015-04-24T01:46:50.347186",
updated_at: "2015-04-24T01:46:50.347190",
uri: "http://api.lobbyfacts.eu/api/1/country/198",
id: 198
}, {
code: "SC",
name: "Seychelles",
created_at: "2015-04-24T01:46:50.344980",
updated_at: "2015-04-24T01:46:50.344984",
uri: "http://api.lobbyfacts.eu/api/1/country/197",
id: 197
}, {
code: "RS",
name: "Serbia",
created_at: "2015-04-24T01:46:50.342496",
updated_at: "2015-04-24T01:46:50.342501",
uri: "http://api.lobbyfacts.eu/api/1/country/196",
id: 196
}];
}
}