-remove useless files
This commit is contained in:
peterlu14
@@ -1,46 +0,0 @@
|
||||
<template>
|
||||
<component :is="chartComponent" ref="chart" class="va-chart" :chart-options="chartOptions" :chart-data="data" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
import type { TChartOptions } from 'vue-chartjs/dist/types'
|
||||
import { defaultConfig, chartTypesMap } from './vaChartConfigs'
|
||||
import { TChartData } from '../../data/types'
|
||||
|
||||
const props = defineProps<{
|
||||
data: TChartData
|
||||
options?: TChartOptions<'line' | 'bar' | 'bubble' | 'doughnut' | 'pie'>
|
||||
type: keyof typeof chartTypesMap
|
||||
}>()
|
||||
|
||||
const chart = ref()
|
||||
|
||||
const chartComponent = computed(() => chartTypesMap[props.type])
|
||||
|
||||
const chartOptions = computed(() => ({
|
||||
...defaultConfig,
|
||||
...props.options,
|
||||
}))
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.va-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
> * {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
canvas {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
min-height: 320px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,17 +0,0 @@
|
||||
<template>
|
||||
<Bar :chart-options="chartOptions" :chart-data="props.chartData" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Bar } from 'vue-chartjs'
|
||||
import type { TChartOptions } from 'vue-chartjs/dist/types'
|
||||
import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, LinearScale, CategoryScale } from 'chart.js'
|
||||
import { TBarChartData } from '../../../data/types'
|
||||
|
||||
ChartJS.register(Title, Tooltip, Legend, BarElement, LinearScale, CategoryScale)
|
||||
|
||||
const props = defineProps<{
|
||||
chartData: TBarChartData
|
||||
chartOptions?: TChartOptions<'bar'>
|
||||
}>()
|
||||
</script>
|
||||
@@ -1,17 +0,0 @@
|
||||
<template>
|
||||
<Bubble :chart-options="chartOptions" :chart-data="props.chartData" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Bubble } from 'vue-chartjs'
|
||||
import type { TChartOptions } from 'vue-chartjs/dist/types'
|
||||
import { Chart as ChartJS, Title, Tooltip, Legend, PointElement, LinearScale } from 'chart.js'
|
||||
import { TBubbleChartData } from '../../../data/types'
|
||||
|
||||
ChartJS.register(Title, Tooltip, Legend, PointElement, LinearScale)
|
||||
|
||||
const props = defineProps<{
|
||||
chartData: TBubbleChartData
|
||||
chartOptions?: TChartOptions<'bubble'>
|
||||
}>()
|
||||
</script>
|
||||
@@ -1,17 +0,0 @@
|
||||
<template>
|
||||
<Doughnut :chart-options="chartOptions" :chart-data="props.chartData" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Doughnut } from 'vue-chartjs'
|
||||
import type { TChartOptions } from 'vue-chartjs/dist/types'
|
||||
import { Chart as ChartJS, Title, Tooltip, Legend, ArcElement, CategoryScale } from 'chart.js'
|
||||
import { TDoughnutChartData } from '../../../data/types'
|
||||
|
||||
ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale)
|
||||
|
||||
const props = defineProps<{
|
||||
chartData: TDoughnutChartData
|
||||
chartOptions?: TChartOptions<'doughnut'>
|
||||
}>()
|
||||
</script>
|
||||
@@ -1,26 +0,0 @@
|
||||
<template>
|
||||
<Bar :chart-options="{ ...chartOptions, ...horizontalBarOptions }" :chart-data="props.chartData" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Bar } from 'vue-chartjs'
|
||||
import type { TChartOptions } from 'vue-chartjs/dist/types'
|
||||
import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, LinearScale, CategoryScale } from 'chart.js'
|
||||
import { TBarChartData } from '../../../data/types'
|
||||
|
||||
ChartJS.register(Title, Tooltip, Legend, BarElement, LinearScale, CategoryScale)
|
||||
|
||||
const horizontalBarOptions = {
|
||||
indexAxis: 'y' as 'x' | 'y',
|
||||
elements: {
|
||||
bar: {
|
||||
borderWidth: 1,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
chartData: TBarChartData
|
||||
chartOptions?: TChartOptions<'bar'>
|
||||
}>()
|
||||
</script>
|
||||
@@ -1,27 +0,0 @@
|
||||
<template>
|
||||
<Line :chart-options="chartOptions" :chart-data="props.chartData" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Line } from 'vue-chartjs'
|
||||
import type { TChartOptions } from 'vue-chartjs/dist/types'
|
||||
import {
|
||||
Chart as ChartJS,
|
||||
Title,
|
||||
Tooltip,
|
||||
Legend,
|
||||
LineElement,
|
||||
LinearScale,
|
||||
PointElement,
|
||||
CategoryScale,
|
||||
Filler,
|
||||
} from 'chart.js'
|
||||
import { TLineChartData } from '../../../data/types'
|
||||
|
||||
ChartJS.register(Title, Tooltip, Legend, LineElement, LinearScale, PointElement, CategoryScale, Filler)
|
||||
|
||||
const props = defineProps<{
|
||||
chartData: TLineChartData
|
||||
chartOptions?: TChartOptions<'line'>
|
||||
}>()
|
||||
</script>
|
||||
@@ -1,17 +0,0 @@
|
||||
<template>
|
||||
<Pie :chart-options="chartOptions" :chart-data="props.chartData" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Pie } from 'vue-chartjs'
|
||||
import type { TChartOptions } from 'vue-chartjs/dist/types'
|
||||
import { Chart as ChartJS, Title, Tooltip, Legend, ArcElement, CategoryScale } from 'chart.js'
|
||||
import { TPieChartData } from '../../../data/types'
|
||||
|
||||
ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale)
|
||||
|
||||
const props = defineProps<{
|
||||
chartData: TPieChartData
|
||||
chartOptions?: TChartOptions<'pie'>
|
||||
}>()
|
||||
</script>
|
||||
@@ -1,48 +0,0 @@
|
||||
import { defineAsyncComponent } from 'vue'
|
||||
|
||||
export const defaultConfig = {
|
||||
plugins: {
|
||||
legend: {
|
||||
position: 'bottom',
|
||||
labels: {
|
||||
font: {
|
||||
color: '#34495e',
|
||||
family: 'sans-serif',
|
||||
size: 14,
|
||||
},
|
||||
usePointStyle: true,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
bodyFont: {
|
||||
size: 14,
|
||||
family: 'sans-serif',
|
||||
},
|
||||
boxPadding: 4,
|
||||
},
|
||||
},
|
||||
datasets: {
|
||||
line: {
|
||||
fill: 'origin',
|
||||
tension: 0.3,
|
||||
borderColor: 'transparent',
|
||||
},
|
||||
bubble: {
|
||||
borderColor: 'transparent',
|
||||
},
|
||||
bar: {
|
||||
borderColor: 'transparent',
|
||||
},
|
||||
},
|
||||
maintainAspectRatio: false,
|
||||
animation: true,
|
||||
}
|
||||
|
||||
export const chartTypesMap = {
|
||||
pie: defineAsyncComponent(() => import('./chart-types/PieChart.vue')),
|
||||
doughnut: defineAsyncComponent(() => import('./chart-types/DoughnutChart.vue')),
|
||||
bubble: defineAsyncComponent(() => import('./chart-types/BubbleChart.vue')),
|
||||
line: defineAsyncComponent(() => import('./chart-types/LineChart.vue')),
|
||||
bar: defineAsyncComponent(() => import('./chart-types/BarChart.vue')),
|
||||
'horizontal-bar': defineAsyncComponent(() => import('./chart-types/HorizontalBarChart.vue')),
|
||||
}
|
||||
@@ -1,189 +0,0 @@
|
||||
<template>
|
||||
<div ref="editorElement" class="va-medium-editor content">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, Ref, onMounted, onBeforeUnmount } from 'vue'
|
||||
import MediumEditor from 'medium-editor'
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
editorOptions?: {
|
||||
buttonLabels: string
|
||||
autoLink: boolean
|
||||
toolbar: {
|
||||
buttons: string[]
|
||||
}
|
||||
}
|
||||
}>(),
|
||||
{
|
||||
editorOptions: () => ({
|
||||
buttonLabels: 'fontawesome',
|
||||
autoLink: true,
|
||||
toolbar: {
|
||||
buttons: ['bold', 'italic', 'underline', 'anchor', 'h1', 'h2', 'h3'],
|
||||
},
|
||||
}),
|
||||
},
|
||||
)
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'initialized', editor: typeof MediumEditor): void
|
||||
}>()
|
||||
|
||||
const editorElement: Ref<null | HTMLElement> = ref(null)
|
||||
let editor: typeof MediumEditor | null = null
|
||||
|
||||
onMounted(() => {
|
||||
if (!editorElement.value) {
|
||||
return
|
||||
}
|
||||
|
||||
editor = new MediumEditor(editorElement.value, props.editorOptions)
|
||||
emit('initialized', editor)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (editor) {
|
||||
editor.destroy()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import 'medium-editor/src/sass/medium-editor';
|
||||
@import 'variables';
|
||||
|
||||
$medium-editor-shadow: var(--va-box-shadow);
|
||||
$medium-editor-background-color: var(--va-divider);
|
||||
$medium-editor-text-color: var(--va-dark);
|
||||
$medium-editor-active-background-color: var(--va-primary);
|
||||
$medium-editor-active-text-color: var(--va-white);
|
||||
|
||||
.va-medium-editor {
|
||||
margin-bottom: var(--va-medium-editor-margin-bottom);
|
||||
min-width: var(--va-medium-editor-min-width);
|
||||
max-width: var(--va-medium-editor-max-width);
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&.content {
|
||||
i {
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// isn't a part of the .va-medium-editor, so can't be places inside it
|
||||
.medium-editor-toolbar,
|
||||
.medium-editor-toolbar-form,
|
||||
.medium-editor-toolbar-actions,
|
||||
.medium-editor-toolbar-anchor-preview {
|
||||
box-shadow: $medium-editor-shadow;
|
||||
background-color: $medium-editor-background-color;
|
||||
border-radius: 1.5rem;
|
||||
height: 44px;
|
||||
line-height: 42px;
|
||||
}
|
||||
|
||||
.medium-editor-toolbar-anchor-preview {
|
||||
a {
|
||||
padding: 0 2rem;
|
||||
margin: 0;
|
||||
line-height: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
.medium-editor-toolbar {
|
||||
box-shadow: $medium-editor-shadow;
|
||||
|
||||
.medium-editor-toolbar-actions {
|
||||
overflow: hidden;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.medium-editor-action {
|
||||
margin: 0;
|
||||
border: 0;
|
||||
padding: 0.375rem 1rem;
|
||||
height: 44px;
|
||||
background-color: $medium-editor-background-color;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
|
||||
i {
|
||||
color: $medium-editor-text-color;
|
||||
}
|
||||
|
||||
&.medium-editor-button-active {
|
||||
background-color: $medium-editor-active-background-color;
|
||||
color: $medium-editor-active-text-color;
|
||||
i {
|
||||
color: $medium-editor-active-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > .medium-editor-action:not(:last-child) {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
& > .medium-editor-action + .medium-editor-action {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.medium-editor-toolbar-form {
|
||||
color: $medium-editor-text-color;
|
||||
overflow: hidden;
|
||||
|
||||
a {
|
||||
color: $medium-editor-text-color;
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
input {
|
||||
margin-left: 4px !important;
|
||||
transform: translateY(-2px);
|
||||
border-radius: 13px;
|
||||
}
|
||||
|
||||
.medium-editor-toolbar-close {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.medium-toolbar-arrow-under::after {
|
||||
border-color: $medium-editor-background-color transparent transparent transparent;
|
||||
top: 100%;
|
||||
}
|
||||
|
||||
.medium-toolbar-arrow-over::before {
|
||||
border-color: transparent transparent var(--va-primary) transparent;
|
||||
}
|
||||
|
||||
.medium-editor-toolbar-anchor-preview {
|
||||
// @include va-button($btn-padding-y-nrm, $btn-padding-x-nrm, $btn-font-size-nrm, $btn-line-height-nrm, $btn-border-radius-nrm);
|
||||
|
||||
.medium-editor-toolbar-anchor-preview {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.medium-editor-anchor-preview {
|
||||
max-width: 50%;
|
||||
|
||||
a {
|
||||
color: $medium-editor-text-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,9 +0,0 @@
|
||||
:root {
|
||||
--va-medium-editor-margin-bottom: 2.25rem;
|
||||
--va-medium-editor-min-width: 6rem;
|
||||
--va-medium-editor-max-width: 600px;
|
||||
|
||||
/* Toolbar */
|
||||
--va-medium-editor-toolbar-max-width: 90%;
|
||||
--va-medium-editor-toolbar-box-shadow: none;
|
||||
}
|
||||
@@ -1,243 +0,0 @@
|
||||
export default [
|
||||
'Afghanistan',
|
||||
'Albania',
|
||||
'Algeria',
|
||||
'American Samoa',
|
||||
'Andorra',
|
||||
'Angola',
|
||||
'Anguilla',
|
||||
'Antarctica',
|
||||
'Antigua and Barbuda',
|
||||
'Argentina',
|
||||
'Armenia',
|
||||
'Aruba',
|
||||
'Australia',
|
||||
'Austria',
|
||||
'Azerbaijan',
|
||||
'Bahamas',
|
||||
'Bahrain',
|
||||
'Bangladesh',
|
||||
'Barbados',
|
||||
'Belarus',
|
||||
'Belgium',
|
||||
'Belize',
|
||||
'Benin',
|
||||
'Bermuda',
|
||||
'Bhutan',
|
||||
'Bolivia',
|
||||
'Bosnia and Herzegowina',
|
||||
'Botswana',
|
||||
'Bouvet Island',
|
||||
'Brazil',
|
||||
'British Indian Ocean Territory',
|
||||
'Brunei Darussalam',
|
||||
'Bulgaria',
|
||||
'Burkina Faso',
|
||||
'Burundi',
|
||||
'Cambodia',
|
||||
'Cameroon',
|
||||
'Canada',
|
||||
'Cape Verde',
|
||||
'Cayman Islands',
|
||||
'Central African Republic',
|
||||
'Chad',
|
||||
'Chile',
|
||||
'China',
|
||||
'Christmas Island',
|
||||
'Cocos (Keeling) Islands',
|
||||
'Colombia',
|
||||
'Comoros',
|
||||
'Congo',
|
||||
'Congo, the Democratic Republic of the',
|
||||
'Cook Islands',
|
||||
'Costa Rica',
|
||||
"Cote d'Ivoire",
|
||||
'Croatia (Hrvatska)',
|
||||
'Cuba',
|
||||
'Cyprus',
|
||||
'Czech Republic',
|
||||
'Denmark',
|
||||
'Djibouti',
|
||||
'Dominica',
|
||||
'Dominican Republic',
|
||||
'East Timor',
|
||||
'Ecuador',
|
||||
'Egypt',
|
||||
'El Salvador',
|
||||
'Equatorial Guinea',
|
||||
'Eritrea',
|
||||
'Estonia',
|
||||
'Ethiopia',
|
||||
'Falkland Islands (Malvinas)',
|
||||
'Faroe Islands',
|
||||
'Fiji',
|
||||
'Finland',
|
||||
'France',
|
||||
'France Metropolitan',
|
||||
'French Guiana',
|
||||
'French Polynesia',
|
||||
'French Southern Territories',
|
||||
'Gabon',
|
||||
'Gambia',
|
||||
'Georgia',
|
||||
'Germany',
|
||||
'Ghana',
|
||||
'Gibraltar',
|
||||
'Greece',
|
||||
'Greenland',
|
||||
'Grenada',
|
||||
'Guadeloupe',
|
||||
'Guam',
|
||||
'Guatemala',
|
||||
'Guinea',
|
||||
'Guinea-Bissau',
|
||||
'Guyana',
|
||||
'Haiti',
|
||||
'Heard and Mc Donald Islands',
|
||||
'Holy See (Vatican City State)',
|
||||
'Honduras',
|
||||
'Hong Kong',
|
||||
'Hungary',
|
||||
'Iceland',
|
||||
'India',
|
||||
'Indonesia',
|
||||
'Iran (Islamic Republic of)',
|
||||
'Iraq',
|
||||
'Ireland',
|
||||
'Israel',
|
||||
'Italy',
|
||||
'Jamaica',
|
||||
'Japan',
|
||||
'Jordan',
|
||||
'Kazakhstan',
|
||||
'Kenya',
|
||||
'Kiribati',
|
||||
"Korea, Democratic People's Republic of",
|
||||
'Korea, Republic of',
|
||||
'Kuwait',
|
||||
'Kyrgyzstan',
|
||||
"Lao, People's Democratic Republic",
|
||||
'Latvia',
|
||||
'Lebanon',
|
||||
'Lesotho',
|
||||
'Liberia',
|
||||
'Libyan Arab Jamahiriya',
|
||||
'Liechtenstein',
|
||||
'Lithuania',
|
||||
'Luxembourg',
|
||||
'Macau',
|
||||
'Macedonia, The Former Yugoslav Republic of',
|
||||
'Madagascar',
|
||||
'Malawi',
|
||||
'Malaysia',
|
||||
'Maldives',
|
||||
'Mali',
|
||||
'Malta',
|
||||
'Marshall Islands',
|
||||
'Martinique',
|
||||
'Mauritania',
|
||||
'Mauritius',
|
||||
'Mayotte',
|
||||
'Mexico',
|
||||
'Micronesia, Federated States of',
|
||||
'Moldova, Republic of',
|
||||
'Monaco',
|
||||
'Mongolia',
|
||||
'Montserrat',
|
||||
'Morocco',
|
||||
'Mozambique',
|
||||
'Myanmar',
|
||||
'Namibia',
|
||||
'Nauru',
|
||||
'Nepal',
|
||||
'Netherlands',
|
||||
'Netherlands Antilles',
|
||||
'New Caledonia',
|
||||
'New Zealand',
|
||||
'Nicaragua',
|
||||
'Niger',
|
||||
'Nigeria',
|
||||
'Niue',
|
||||
'Norfolk Island',
|
||||
'Northern Mariana Islands',
|
||||
'Norway',
|
||||
'Oman',
|
||||
'Pakistan',
|
||||
'Palau',
|
||||
'Panama',
|
||||
'Papua New Guinea',
|
||||
'Paraguay',
|
||||
'Peru',
|
||||
'Philippines',
|
||||
'Pitcairn',
|
||||
'Poland',
|
||||
'Portugal',
|
||||
'Puerto Rico',
|
||||
'Qatar',
|
||||
'Reunion',
|
||||
'Romania',
|
||||
'Russian Federation',
|
||||
'Rwanda',
|
||||
'Saint Kitts and Nevis',
|
||||
'Saint Lucia',
|
||||
'Saint Vincent and the Grenadines',
|
||||
'Samoa',
|
||||
'San Marino',
|
||||
'Sao Tome and Principe',
|
||||
'Saudi Arabia',
|
||||
'Senegal',
|
||||
'Serbia',
|
||||
'Seychelles',
|
||||
'Sierra Leone',
|
||||
'Singapore',
|
||||
'Slovakia (Slovak Republic)',
|
||||
'Slovenia',
|
||||
'Solomon Islands',
|
||||
'Somalia',
|
||||
'South Africa',
|
||||
'South Georgia and the South Sandwich Islands',
|
||||
'Spain',
|
||||
'Sri Lanka',
|
||||
'St. Helena',
|
||||
'St. Pierre and Miquelon',
|
||||
'Sudan',
|
||||
'Suriname',
|
||||
'Svalbard and Jan Mayen Islands',
|
||||
'Swaziland',
|
||||
'Sweden',
|
||||
'Switzerland',
|
||||
'Syrian Arab Republic',
|
||||
'Taiwan, Province of China',
|
||||
'Tajikistan',
|
||||
'Tanzania, United Republic of',
|
||||
'United States of America',
|
||||
'Thailand',
|
||||
'Togo',
|
||||
'Tokelau',
|
||||
'Tonga',
|
||||
'Trinidad and Tobago',
|
||||
'Tunisia',
|
||||
'Turkey',
|
||||
'Turkmenistan',
|
||||
'Turks and Caicos Islands',
|
||||
'Tuvalu',
|
||||
'Uganda',
|
||||
'Ukraine',
|
||||
'United Arab Emirates',
|
||||
'United Kingdom',
|
||||
'United States',
|
||||
'United States Minor Outlying Islands',
|
||||
'Uruguay',
|
||||
'Uzbekistan',
|
||||
'Vanuatu',
|
||||
'Venezuela',
|
||||
'Vietnam',
|
||||
'Virgin Islands (British)',
|
||||
'Virgin Islands (U.S.)',
|
||||
'Wallis and Futuna Islands',
|
||||
'Western Sahara',
|
||||
'Yemen',
|
||||
'Yugoslavia',
|
||||
'Zambia',
|
||||
'Zimbabwe',
|
||||
]
|
||||
@@ -1,30 +0,0 @@
|
||||
import { TBarChartData } from '../types'
|
||||
|
||||
export const barChartData: TBarChartData = {
|
||||
labels: [
|
||||
'January',
|
||||
'February',
|
||||
'March',
|
||||
'April',
|
||||
'May',
|
||||
'June',
|
||||
'July',
|
||||
'August',
|
||||
'September',
|
||||
'October',
|
||||
'November',
|
||||
'December',
|
||||
],
|
||||
datasets: [
|
||||
{
|
||||
label: 'Last year',
|
||||
backgroundColor: 'primary',
|
||||
data: [50, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11],
|
||||
},
|
||||
{
|
||||
label: 'Current year',
|
||||
backgroundColor: 'info',
|
||||
data: [50, 10, 22, 39, 15, 20, 85, 32, 60, 50, 20, 30],
|
||||
},
|
||||
],
|
||||
}
|
||||
@@ -1,231 +0,0 @@
|
||||
import { TBubbleChartData } from '../types'
|
||||
|
||||
export const bubbleChartData: TBubbleChartData = {
|
||||
datasets: [
|
||||
{
|
||||
label: 'USA',
|
||||
backgroundColor: 'danger',
|
||||
data: [
|
||||
{
|
||||
x: 23,
|
||||
y: 25,
|
||||
r: 15,
|
||||
},
|
||||
{
|
||||
x: 40,
|
||||
y: 10,
|
||||
r: 10,
|
||||
},
|
||||
{
|
||||
x: 30,
|
||||
y: 22,
|
||||
r: 30,
|
||||
},
|
||||
{
|
||||
x: 7,
|
||||
y: 43,
|
||||
r: 40,
|
||||
},
|
||||
{
|
||||
x: 23,
|
||||
y: 27,
|
||||
r: 12,
|
||||
},
|
||||
{
|
||||
x: 20,
|
||||
y: 15,
|
||||
r: 11,
|
||||
},
|
||||
{
|
||||
x: 7,
|
||||
y: 10,
|
||||
r: 35,
|
||||
},
|
||||
{
|
||||
x: 10,
|
||||
y: 20,
|
||||
r: 40,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'Russia',
|
||||
backgroundColor: 'primary',
|
||||
data: [
|
||||
{
|
||||
x: 0,
|
||||
y: 30,
|
||||
r: 15,
|
||||
},
|
||||
{
|
||||
x: 20,
|
||||
y: 20,
|
||||
r: 20,
|
||||
},
|
||||
{
|
||||
x: 15,
|
||||
y: 15,
|
||||
r: 50,
|
||||
},
|
||||
{
|
||||
x: 31,
|
||||
y: 46,
|
||||
r: 30,
|
||||
},
|
||||
{
|
||||
x: 20,
|
||||
y: 14,
|
||||
r: 25,
|
||||
},
|
||||
{
|
||||
x: 34,
|
||||
y: 17,
|
||||
r: 30,
|
||||
},
|
||||
{
|
||||
x: 44,
|
||||
y: 44,
|
||||
r: 10,
|
||||
},
|
||||
{
|
||||
x: 39,
|
||||
y: 25,
|
||||
r: 35,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'Canada',
|
||||
backgroundColor: 'warning',
|
||||
data: [
|
||||
{
|
||||
x: 10,
|
||||
y: 30,
|
||||
r: 45,
|
||||
},
|
||||
{
|
||||
x: 10,
|
||||
y: 50,
|
||||
r: 20,
|
||||
},
|
||||
{
|
||||
x: 5,
|
||||
y: 5,
|
||||
r: 30,
|
||||
},
|
||||
{
|
||||
x: 40,
|
||||
y: 30,
|
||||
r: 20,
|
||||
},
|
||||
{
|
||||
x: 33,
|
||||
y: 15,
|
||||
r: 18,
|
||||
},
|
||||
{
|
||||
x: 40,
|
||||
y: 20,
|
||||
r: 40,
|
||||
},
|
||||
{
|
||||
x: 33,
|
||||
y: 33,
|
||||
r: 40,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'Belarus',
|
||||
backgroundColor: 'info',
|
||||
data: [
|
||||
{
|
||||
x: 35,
|
||||
y: 30,
|
||||
r: 45,
|
||||
},
|
||||
{
|
||||
x: 25,
|
||||
y: 40,
|
||||
r: 35,
|
||||
},
|
||||
{
|
||||
x: 5,
|
||||
y: 5,
|
||||
r: 30,
|
||||
},
|
||||
{
|
||||
x: 5,
|
||||
y: 20,
|
||||
r: 40,
|
||||
},
|
||||
{
|
||||
x: 10,
|
||||
y: 40,
|
||||
r: 15,
|
||||
},
|
||||
{
|
||||
x: 3,
|
||||
y: 10,
|
||||
r: 10,
|
||||
},
|
||||
{
|
||||
x: 15,
|
||||
y: 40,
|
||||
r: 40,
|
||||
},
|
||||
{
|
||||
x: 7,
|
||||
y: 15,
|
||||
r: 10,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'Ukraine',
|
||||
backgroundColor: 'success',
|
||||
data: [
|
||||
{
|
||||
x: 25,
|
||||
y: 10,
|
||||
r: 40,
|
||||
},
|
||||
{
|
||||
x: 17,
|
||||
y: 40,
|
||||
r: 40,
|
||||
},
|
||||
{
|
||||
x: 35,
|
||||
y: 10,
|
||||
r: 20,
|
||||
},
|
||||
{
|
||||
x: 3,
|
||||
y: 40,
|
||||
r: 10,
|
||||
},
|
||||
{
|
||||
x: 40,
|
||||
y: 40,
|
||||
r: 40,
|
||||
},
|
||||
{
|
||||
x: 20,
|
||||
y: 10,
|
||||
r: 10,
|
||||
},
|
||||
{
|
||||
x: 10,
|
||||
y: 27,
|
||||
r: 35,
|
||||
},
|
||||
{
|
||||
x: 7,
|
||||
y: 26,
|
||||
r: 40,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
}
|
||||
@@ -1,35 +0,0 @@
|
||||
import { computed, ref } from '@vue/reactivity'
|
||||
import { watch } from 'vue'
|
||||
import { useColors, useGlobalConfig } from 'vuestic-ui'
|
||||
|
||||
type chartColors = string | string[]
|
||||
|
||||
export function useChartColors(chartColors = [] as chartColors, alfa = 0.6) {
|
||||
const { getGlobalConfig } = useGlobalConfig()
|
||||
const { setHSLAColor, getColor } = useColors()
|
||||
|
||||
const generateHSLAColors = (colors: chartColors) =>
|
||||
typeof colors === 'string'
|
||||
? setHSLAColor(getColor(colors), { a: alfa })
|
||||
: colors.map((color) => setHSLAColor(getColor(color), { a: alfa }))
|
||||
|
||||
const generateColors = (colors: chartColors) =>
|
||||
typeof colors === 'string' ? getColor(colors) : colors.map((color) => getColor(color))
|
||||
|
||||
const generatedHSLAColors = ref(generateHSLAColors(chartColors))
|
||||
const generatedColors = ref(generateColors(chartColors))
|
||||
|
||||
const theme = computed(() => getGlobalConfig().colors!)
|
||||
|
||||
watch(theme, () => {
|
||||
generatedHSLAColors.value = generateHSLAColors(chartColors)
|
||||
generatedColors.value = generateColors(chartColors)
|
||||
})
|
||||
|
||||
return {
|
||||
generateHSLAColors,
|
||||
generateColors,
|
||||
generatedColors,
|
||||
generatedHSLAColors,
|
||||
}
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
import { computed, ComputedRef } from '@vue/reactivity'
|
||||
import { useChartColors } from './useChartColors'
|
||||
import { TChartData } from '../../types'
|
||||
|
||||
export function useChartData<T extends TChartData>(data: T, alfa?: number): ComputedRef<T> {
|
||||
const datasetsColors = data.datasets.map((dataset) => dataset.backgroundColor as string)
|
||||
|
||||
const datasetsThemesColors = datasetsColors.map(
|
||||
(colors) => useChartColors(colors, alfa)[alfa ? 'generatedHSLAColors' : 'generatedColors'],
|
||||
)
|
||||
|
||||
return computed(() => {
|
||||
const datasets = data.datasets.map((dataset, idx) => ({
|
||||
...dataset,
|
||||
backgroundColor: datasetsThemesColors[idx].value,
|
||||
}))
|
||||
|
||||
return { ...data, datasets } as T
|
||||
})
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
import { TDoughnutChartData } from '../types'
|
||||
|
||||
export const doughnutChartData: TDoughnutChartData = {
|
||||
labels: ['North America', 'South America', 'Australia'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'Population (millions)',
|
||||
backgroundColor: ['danger', 'info', 'primary'],
|
||||
data: [2478, 5267, 734],
|
||||
},
|
||||
],
|
||||
}
|
||||
@@ -1,30 +0,0 @@
|
||||
import { TBarChartData } from '../types'
|
||||
|
||||
export const horizontalBarChartData: TBarChartData = {
|
||||
labels: [
|
||||
'January',
|
||||
'February',
|
||||
'March',
|
||||
'April',
|
||||
'May',
|
||||
'June',
|
||||
'July',
|
||||
'August',
|
||||
'September',
|
||||
'October',
|
||||
'November',
|
||||
'December',
|
||||
],
|
||||
datasets: [
|
||||
{
|
||||
label: 'Vuestic Satisfaction Score',
|
||||
backgroundColor: 'primary',
|
||||
data: [80, 90, 50, 70, 60, 90, 50, 90, 80, 40, 72, 93],
|
||||
},
|
||||
{
|
||||
label: 'Bulma Satisfaction Score',
|
||||
backgroundColor: 'danger',
|
||||
data: [20, 30, 20, 40, 50, 40, 15, 60, 30, 20, 42, 53],
|
||||
},
|
||||
],
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
export { bubbleChartData } from './bubbleChartData'
|
||||
export { doughnutChartData } from './doughnutChartData'
|
||||
export { barChartData } from './barChartData'
|
||||
export { horizontalBarChartData } from './horizontalBarChartData'
|
||||
export { lineChartData } from './lineChartData'
|
||||
export { pieChartData } from './pieChartData'
|
||||
@@ -1,44 +0,0 @@
|
||||
import { TLineChartData } from '../types'
|
||||
|
||||
const months = [
|
||||
'January',
|
||||
'February',
|
||||
'March',
|
||||
'April',
|
||||
'May',
|
||||
'June',
|
||||
'July',
|
||||
'August',
|
||||
'September',
|
||||
'October',
|
||||
'November',
|
||||
'December',
|
||||
]
|
||||
|
||||
const getSize = (minSize = 5) => Math.max(minSize, new Date().getMonth())
|
||||
const size = getSize()
|
||||
|
||||
const generateValue = () => Math.floor(Math.random() * 100)
|
||||
const generateArray = (length: number) => Array.from(Array(length), generateValue)
|
||||
|
||||
const generateYLabels = () => {
|
||||
const flip = !!Math.floor(Math.random() * 2)
|
||||
return flip ? ['Debit', 'Credit'] : ['Credit', 'Debit']
|
||||
}
|
||||
const yLabels = generateYLabels()
|
||||
|
||||
export const lineChartData: TLineChartData = {
|
||||
labels: months.slice(0, size),
|
||||
datasets: [
|
||||
{
|
||||
label: yLabels[0],
|
||||
backgroundColor: 'primary',
|
||||
data: generateArray(size),
|
||||
},
|
||||
{
|
||||
label: yLabels[1],
|
||||
backgroundColor: 'secondary',
|
||||
data: generateArray(size),
|
||||
},
|
||||
],
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
import { TLineChartData } from '../types'
|
||||
|
||||
export const pieChartData: TLineChartData = {
|
||||
labels: ['Africa', 'Asia', 'Europe'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'Population (millions)',
|
||||
backgroundColor: ['primary', 'warning', 'danger'],
|
||||
data: [2478, 5267, 734],
|
||||
},
|
||||
],
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,342 +0,0 @@
|
||||
import { computed, ComputedRef, Ref } from '@vue/reactivity'
|
||||
import { useColors } from 'vuestic-ui'
|
||||
|
||||
type GeoBounds = {
|
||||
bottom: number
|
||||
left: number
|
||||
right: number
|
||||
top: number
|
||||
}
|
||||
|
||||
export type PointGeoCoord = {
|
||||
latitude: number
|
||||
longitude: number
|
||||
}
|
||||
|
||||
export type DataGeometry = {
|
||||
geometry: {
|
||||
type: string
|
||||
coordinates: [number, number][]
|
||||
}
|
||||
}
|
||||
|
||||
export type CityItem = {
|
||||
id?: string
|
||||
title: string
|
||||
country: string
|
||||
latitude: number
|
||||
longitude: number
|
||||
svgPath: string
|
||||
color: string
|
||||
flights?: PointGeoCoord[]
|
||||
}
|
||||
|
||||
const targetSVG =
|
||||
'M9,0C4.029,0,0,4.029,0,9s4.029,9,9,9s9-4.029,9-9S13.971,0,9,0z M9,15.93 c-3.83,0-6.93-3.1-6.93-6.93S5.17,2.07,9,2.07s6.93,3.1,6.93,6.93S12.83,15.93,9,15.93 M12.5,9c0,1.933-1.567,3.5-3.5,3.5S5.5,10.933,5.5,9S7.067,5.5,9,5.5 S12.5,7.067,12.5,9z'
|
||||
|
||||
export const planeSVG =
|
||||
'M19.671,8.11l-2.777,2.777l-3.837-0.861c0.362-0.505,0.916-1.683,0.464-2.135c-0.518-0.517-1.979,0.278-2.305,0.604l-0.913,0.913L7.614,8.804l-2.021,2.021l2.232,1.061l-0.082,0.082l1.701,1.701l0.688-0.687l3.164,1.504L9.571,18.21H6.413l-1.137,1.138l3.6,0.948l1.83,1.83l0.947,3.598l1.137-1.137V21.43l3.725-3.725l1.504,3.164l-0.687,0.687l1.702,1.701l0.081-0.081l1.062,2.231l2.02-2.02l-0.604-2.689l0.912-0.912c0.326-0.326,1.121-1.789,0.604-2.306c-0.452-0.452-1.63,0.101-2.135,0.464l-0.861-3.838l2.777-2.777c0.947-0.947,3.599-4.862,2.62-5.839C24.533,4.512,20.618,7.163,19.671,8.11z'
|
||||
|
||||
const london = {
|
||||
id: 'london',
|
||||
color: 'info',
|
||||
svgPath: targetSVG,
|
||||
title: 'London',
|
||||
country: 'United Kingdom',
|
||||
latitude: 51.5002,
|
||||
longitude: -0.1262,
|
||||
flights: [
|
||||
{
|
||||
latitude: 50.4422,
|
||||
longitude: 30.5367,
|
||||
},
|
||||
{
|
||||
latitude: 46.948,
|
||||
longitude: 7.4481,
|
||||
},
|
||||
{
|
||||
latitude: 59.3328,
|
||||
longitude: 18.0645,
|
||||
},
|
||||
{
|
||||
latitude: 40.4167,
|
||||
longitude: -3.7033,
|
||||
},
|
||||
{
|
||||
latitude: 46.0514,
|
||||
longitude: 14.506,
|
||||
},
|
||||
{
|
||||
latitude: 48.2116,
|
||||
longitude: 17.1547,
|
||||
},
|
||||
{
|
||||
latitude: 44.8048,
|
||||
longitude: 20.4781,
|
||||
},
|
||||
{
|
||||
latitude: 55.7558,
|
||||
longitude: 37.6176,
|
||||
},
|
||||
{
|
||||
latitude: 38.7072,
|
||||
longitude: -9.1355,
|
||||
},
|
||||
{
|
||||
latitude: 54.6896,
|
||||
longitude: 25.2799,
|
||||
},
|
||||
{
|
||||
latitude: 64.1353,
|
||||
longitude: -21.8952,
|
||||
},
|
||||
{
|
||||
latitude: 40.43,
|
||||
longitude: -74.0,
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
const vilnius = {
|
||||
id: 'vilnius',
|
||||
color: 'info',
|
||||
svgPath: targetSVG,
|
||||
title: 'Vilnius',
|
||||
country: 'Lithuania',
|
||||
latitude: 54.6896,
|
||||
longitude: 25.2799,
|
||||
flights: [
|
||||
{
|
||||
latitude: 50.8371,
|
||||
longitude: 4.3676,
|
||||
},
|
||||
{
|
||||
latitude: 59.9138,
|
||||
longitude: 10.7387,
|
||||
},
|
||||
{
|
||||
latitude: 40.4167,
|
||||
longitude: -3.7033,
|
||||
},
|
||||
{
|
||||
latitude: 50.0878,
|
||||
longitude: 14.4205,
|
||||
},
|
||||
{
|
||||
latitude: 48.2116,
|
||||
longitude: 17.1547,
|
||||
},
|
||||
{
|
||||
latitude: 44.8048,
|
||||
longitude: 20.4781,
|
||||
},
|
||||
{
|
||||
latitude: 55.7558,
|
||||
longitude: 37.6176,
|
||||
},
|
||||
{
|
||||
latitude: 37.9792,
|
||||
longitude: 23.7166,
|
||||
},
|
||||
{
|
||||
latitude: 51.5002,
|
||||
longitude: -0.1262,
|
||||
},
|
||||
{
|
||||
latitude: 53.3441,
|
||||
longitude: -6.2675,
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
const cities: CityItem[] = [
|
||||
london,
|
||||
vilnius,
|
||||
{
|
||||
svgPath: targetSVG,
|
||||
color: 'info',
|
||||
title: 'Brussels',
|
||||
country: 'Belgium',
|
||||
latitude: 50.8371,
|
||||
longitude: 4.3676,
|
||||
},
|
||||
{
|
||||
svgPath: targetSVG,
|
||||
color: 'info',
|
||||
title: 'Prague',
|
||||
country: 'Czech Republic',
|
||||
latitude: 50.0878,
|
||||
longitude: 14.4205,
|
||||
},
|
||||
{
|
||||
svgPath: targetSVG,
|
||||
color: 'info',
|
||||
title: 'Athens',
|
||||
country: 'Greece',
|
||||
latitude: 37.9792,
|
||||
longitude: 23.7166,
|
||||
},
|
||||
{
|
||||
svgPath: targetSVG,
|
||||
color: 'info',
|
||||
title: 'Reykjavik',
|
||||
country: 'Iceland',
|
||||
latitude: 64.1353,
|
||||
longitude: -21.8952,
|
||||
},
|
||||
{
|
||||
svgPath: targetSVG,
|
||||
color: 'info',
|
||||
title: 'Dublin',
|
||||
country: 'Ireland',
|
||||
latitude: 53.3441,
|
||||
longitude: -6.2675,
|
||||
},
|
||||
{
|
||||
svgPath: targetSVG,
|
||||
color: 'info',
|
||||
title: 'Oslo',
|
||||
country: 'Norway',
|
||||
latitude: 59.9138,
|
||||
longitude: 10.7387,
|
||||
},
|
||||
{
|
||||
svgPath: targetSVG,
|
||||
color: 'info',
|
||||
title: 'Lisbon',
|
||||
country: 'Portugal',
|
||||
latitude: 38.7072,
|
||||
longitude: -9.1355,
|
||||
},
|
||||
{
|
||||
svgPath: targetSVG,
|
||||
color: 'info',
|
||||
title: 'Moscow',
|
||||
country: 'Russia',
|
||||
latitude: 55.7558,
|
||||
longitude: 37.6176,
|
||||
},
|
||||
{
|
||||
svgPath: targetSVG,
|
||||
color: 'info',
|
||||
title: 'Belgrade',
|
||||
country: 'Serbia',
|
||||
latitude: 44.8048,
|
||||
longitude: 20.4781,
|
||||
},
|
||||
{
|
||||
svgPath: targetSVG,
|
||||
color: 'info',
|
||||
title: 'Bratislava',
|
||||
country: 'Slovakia',
|
||||
latitude: 48.2116,
|
||||
longitude: 17.1547,
|
||||
},
|
||||
{
|
||||
svgPath: targetSVG,
|
||||
color: 'info',
|
||||
title: 'Ljubljana',
|
||||
country: 'Slovenia',
|
||||
latitude: 46.0514,
|
||||
longitude: 14.506,
|
||||
},
|
||||
{
|
||||
svgPath: targetSVG,
|
||||
color: 'info',
|
||||
title: 'Madrid',
|
||||
country: 'Spain',
|
||||
latitude: 40.4167,
|
||||
longitude: -3.7033,
|
||||
},
|
||||
{
|
||||
svgPath: targetSVG,
|
||||
color: 'info',
|
||||
title: 'Stockholm',
|
||||
country: 'Sweden',
|
||||
latitude: 59.3328,
|
||||
longitude: 18.0645,
|
||||
},
|
||||
{
|
||||
svgPath: targetSVG,
|
||||
color: 'info',
|
||||
title: 'Bern',
|
||||
country: 'Switzerland',
|
||||
latitude: 46.948,
|
||||
longitude: 7.4481,
|
||||
},
|
||||
{
|
||||
svgPath: targetSVG,
|
||||
color: 'info',
|
||||
title: 'Kiev',
|
||||
country: 'Ukraine',
|
||||
latitude: 50.4422,
|
||||
longitude: 30.5367,
|
||||
},
|
||||
{
|
||||
svgPath: targetSVG,
|
||||
color: 'info',
|
||||
title: 'Paris',
|
||||
country: 'France',
|
||||
latitude: 48.8567,
|
||||
longitude: 2.351,
|
||||
},
|
||||
{
|
||||
svgPath: targetSVG,
|
||||
color: 'info',
|
||||
title: 'New York',
|
||||
country: 'United States of America',
|
||||
latitude: 40.43,
|
||||
longitude: -74,
|
||||
},
|
||||
]
|
||||
|
||||
export const lineMapData = {
|
||||
cities,
|
||||
mainCity: london.title,
|
||||
homeCity: london.title,
|
||||
}
|
||||
|
||||
export const useMapData = (data: Ref<CityItem[]>): ComputedRef<CityItem[]> => {
|
||||
const { getColor } = useColors()
|
||||
|
||||
return computed(() =>
|
||||
data.value.map((item) => ({
|
||||
...item,
|
||||
color: getColor(item.color),
|
||||
})),
|
||||
)
|
||||
}
|
||||
|
||||
export const getGeoBounds = (item?: CityItem): GeoBounds | undefined => {
|
||||
if (!item || !item.flights || !item.flights.length) {
|
||||
return
|
||||
}
|
||||
|
||||
const latitudes = [...item.flights.map(({ latitude }) => latitude), item.latitude]
|
||||
const longitudes = [...item.flights.map(({ longitude }) => longitude), item.longitude]
|
||||
|
||||
return {
|
||||
bottom: Math.min(...latitudes),
|
||||
left: Math.min(...longitudes),
|
||||
right: Math.max(...longitudes),
|
||||
top: Math.max(...latitudes),
|
||||
}
|
||||
}
|
||||
|
||||
export const generateLineSeriesData = (item?: CityItem): DataGeometry[] | undefined => {
|
||||
if (!item || !item.flights || !item.flights.length) {
|
||||
return
|
||||
}
|
||||
|
||||
return item.flights.map((point) => ({
|
||||
geometry: {
|
||||
type: 'LineString',
|
||||
coordinates: [
|
||||
[item.longitude, item.latitude],
|
||||
[point.longitude, point.latitude],
|
||||
],
|
||||
},
|
||||
}))
|
||||
}
|
||||
|
||||
export const compareStrings = (first: string, second: string) => first.toLowerCase() === second.toLowerCase()
|
||||
@@ -1,402 +0,0 @@
|
||||
[
|
||||
{
|
||||
"id": "5d3026a3a4c8c8f35689104b",
|
||||
"name": "Mcguire Prince",
|
||||
"email": "mcguireprince@glasstep.com",
|
||||
"country": "Swaziland",
|
||||
"starred": false,
|
||||
"status": "processing"
|
||||
},
|
||||
{
|
||||
"id": "5d3026a3e1579c30d1703632",
|
||||
"name": "Dean Jennings",
|
||||
"email": "deanjennings@glasstep.com",
|
||||
"country": "Korea (North)",
|
||||
"starred": true,
|
||||
"status": "rejected"
|
||||
},
|
||||
{
|
||||
"id": "5d3026a38023a44a3b5e934d",
|
||||
"name": "Cotton Weber",
|
||||
"email": "cottonweber@glasstep.com",
|
||||
"country": "Mozambique",
|
||||
"starred": false,
|
||||
"status": "rejected"
|
||||
},
|
||||
{
|
||||
"id": "5d3026a31c6b23082419e5f4",
|
||||
"name": "Osborne Foster",
|
||||
"email": "osbornefoster@glasstep.com",
|
||||
"country": "US Minor Outlying Islands",
|
||||
"starred": true,
|
||||
"status": "paid"
|
||||
},
|
||||
{
|
||||
"id": "5d3026a3b2cca1fd45746dbf",
|
||||
"name": "William Dillard",
|
||||
"email": "williamdillard@glasstep.com",
|
||||
"country": "Cayman Islands",
|
||||
"starred": true,
|
||||
"status": "processing"
|
||||
},
|
||||
{
|
||||
"id": "5d3026a3486badb41f9f18b5",
|
||||
"name": "Anna Meyers",
|
||||
"email": "annameyers@glasstep.com",
|
||||
"country": "Viet Nam",
|
||||
"starred": false,
|
||||
"status": "paid"
|
||||
},
|
||||
{
|
||||
"id": "5d3026a3c614901a53477e5c",
|
||||
"name": "Ana Barrett",
|
||||
"email": "anabarrett@glasstep.com",
|
||||
"country": "Rwanda",
|
||||
"starred": false,
|
||||
"status": "processing"
|
||||
},
|
||||
{
|
||||
"id": "5d3026a3fcff2a76b73e6016",
|
||||
"name": "Pam Ward",
|
||||
"email": "pamward@glasstep.com",
|
||||
"country": "Kuwait",
|
||||
"starred": false,
|
||||
"status": "processing"
|
||||
},
|
||||
{
|
||||
"id": "5d3026a3b54fc3e9a2570ce8",
|
||||
"name": "Hannah Holloway",
|
||||
"email": "hannahholloway@glasstep.com",
|
||||
"country": "Gibraltar",
|
||||
"starred": false,
|
||||
"status": "paid"
|
||||
},
|
||||
{
|
||||
"id": "5d3026a3e2303324ae9d823f",
|
||||
"name": "Allison Cobb",
|
||||
"email": "allisoncobb@glasstep.com",
|
||||
"country": "East Timor",
|
||||
"starred": true,
|
||||
"status": "processing"
|
||||
},
|
||||
{
|
||||
"id": "5d3026a3f22a52e3706ed868",
|
||||
"name": "Terrie Hawkins",
|
||||
"email": "terriehawkins@glasstep.com",
|
||||
"country": "Greenland",
|
||||
"starred": false,
|
||||
"status": "processing"
|
||||
},
|
||||
{
|
||||
"id": "5d3026a32bad267623e706ec",
|
||||
"name": "Peck Ryan",
|
||||
"email": "peckryan@glasstep.com",
|
||||
"country": "Belgium",
|
||||
"starred": false,
|
||||
"status": "processing"
|
||||
},
|
||||
{
|
||||
"id": "5d3026a37a50452a85d01cbb",
|
||||
"name": "Candace Powell",
|
||||
"email": "candacepowell@glasstep.com",
|
||||
"country": "Yugoslavia",
|
||||
"starred": false,
|
||||
"status": "rejected"
|
||||
},
|
||||
{
|
||||
"id": "5d3026a3ce9f5acf20065037",
|
||||
"name": "Wolfe Pitts",
|
||||
"email": "wolfepitts@glasstep.com",
|
||||
"country": "Bouvet Island",
|
||||
"starred": true,
|
||||
"status": "rejected"
|
||||
},
|
||||
{
|
||||
"id": "5d3026a3e3a5afe09338eca5",
|
||||
"name": "Marietta Robbins",
|
||||
"email": "mariettarobbins@glasstep.com",
|
||||
"country": "Martinique",
|
||||
"starred": true,
|
||||
"status": "paid"
|
||||
},
|
||||
{
|
||||
"id": "5d3026a33fc3196e598bdc7b",
|
||||
"name": "Michelle Wolfe",
|
||||
"email": "michellewolfe@glasstep.com",
|
||||
"country": "French Guiana",
|
||||
"starred": false,
|
||||
"status": "rejected"
|
||||
},
|
||||
{
|
||||
"id": "5d3026a3364f517d8f5dbf16",
|
||||
"name": "Katina Lindsay",
|
||||
"email": "katinalindsay@glasstep.com",
|
||||
"country": "Guyana",
|
||||
"starred": true,
|
||||
"status": "rejected"
|
||||
},
|
||||
{
|
||||
"id": "5d3026a313dedc3cf25404ba",
|
||||
"name": "Bridgett Lloyd",
|
||||
"email": "bridgettlloyd@glasstep.com",
|
||||
"country": "Niger",
|
||||
"starred": false,
|
||||
"status": "processing"
|
||||
},
|
||||
{
|
||||
"id": "5d3026a3a72281322b845f6a",
|
||||
"name": "Letha Hamilton",
|
||||
"email": "lethahamilton@glasstep.com",
|
||||
"country": "Zimbabwe",
|
||||
"starred": true,
|
||||
"status": "processing"
|
||||
},
|
||||
{
|
||||
"id": "5d3026a3bd037e491b76f097",
|
||||
"name": "Mcclain Doyle",
|
||||
"email": "mcclaindoyle@glasstep.com",
|
||||
"country": "Switzerland",
|
||||
"starred": false,
|
||||
"status": "rejected"
|
||||
},
|
||||
{
|
||||
"id": "5d3026a36aa5b7fda077d6ef",
|
||||
"name": "Giles Lucas",
|
||||
"email": "gileslucas@glasstep.com",
|
||||
"country": "Bhutan",
|
||||
"starred": true,
|
||||
"status": "processing"
|
||||
},
|
||||
{
|
||||
"id": "5d3026a381c974954ce9ab94",
|
||||
"name": "Figueroa Lowery",
|
||||
"email": "figueroalowery@glasstep.com",
|
||||
"country": "Netherlands Antilles",
|
||||
"starred": false,
|
||||
"status": "rejected"
|
||||
},
|
||||
{
|
||||
"id": "5d3026a3c0af2698fcd2a750",
|
||||
"name": "Valeria Justice",
|
||||
"email": "valeriajustice@glasstep.com",
|
||||
"country": "Moldova",
|
||||
"starred": true,
|
||||
"status": "processing"
|
||||
},
|
||||
{
|
||||
"id": "5d3026a301d5e7c957e6d864",
|
||||
"name": "Louise Ayala",
|
||||
"email": "louiseayala@glasstep.com",
|
||||
"country": "India",
|
||||
"starred": true,
|
||||
"status": "rejected"
|
||||
},
|
||||
{
|
||||
"id": "5d3026a31f6f1fd6399aeee6",
|
||||
"name": "Kathrine Kirby",
|
||||
"email": "kathrinekirby@glasstep.com",
|
||||
"country": "Cook Islands",
|
||||
"starred": false,
|
||||
"status": "rejected"
|
||||
},
|
||||
{
|
||||
"id": "5d3026a3e8cb16cd2afa41dd",
|
||||
"name": "Brandi Morris",
|
||||
"email": "brandimorris@glasstep.com",
|
||||
"country": "Honduras",
|
||||
"starred": false,
|
||||
"status": "rejected"
|
||||
},
|
||||
{
|
||||
"id": "5d3026a3c52ac7ffb85c892d",
|
||||
"name": "Margaret Mckenzie",
|
||||
"email": "margaretmckenzie@glasstep.com",
|
||||
"country": "Jordan",
|
||||
"starred": false,
|
||||
"status": "processing"
|
||||
},
|
||||
{
|
||||
"id": "5d3026a3c66670f258790358",
|
||||
"name": "Janie Collier",
|
||||
"email": "janiecollier@glasstep.com",
|
||||
"country": "Samoa",
|
||||
"starred": true,
|
||||
"status": "rejected"
|
||||
},
|
||||
{
|
||||
"id": "5d3026a3108b6b1d543fb117",
|
||||
"name": "Catherine Vance",
|
||||
"email": "catherinevance@glasstep.com",
|
||||
"country": "Sierra Leone",
|
||||
"starred": false,
|
||||
"status": "paid"
|
||||
},
|
||||
{
|
||||
"id": "5d3026a325d727b6d9b85d84",
|
||||
"name": "Kate Allen",
|
||||
"email": "kateallen@glasstep.com",
|
||||
"country": "France",
|
||||
"starred": true,
|
||||
"status": "processing"
|
||||
},
|
||||
{
|
||||
"id": "5d3026a32be6debb7532cc75",
|
||||
"name": "Jeanne Cross",
|
||||
"email": "jeannecross@glasstep.com",
|
||||
"country": "Anguilla",
|
||||
"starred": true,
|
||||
"status": "processing"
|
||||
},
|
||||
{
|
||||
"id": "5d3026a3cc16b4cd36e3a7b4",
|
||||
"name": "Stewart Hanson",
|
||||
"email": "stewarthanson@glasstep.com",
|
||||
"country": "Western Sahara",
|
||||
"starred": false,
|
||||
"status": "processing"
|
||||
},
|
||||
{
|
||||
"id": "5d3026a3d3496dd200d5f6af",
|
||||
"name": "Beulah Castaneda",
|
||||
"email": "beulahcastaneda@glasstep.com",
|
||||
"country": "Malaysia",
|
||||
"starred": true,
|
||||
"status": "rejected"
|
||||
},
|
||||
{
|
||||
"id": "5d3026a3187e74fcd18a7918",
|
||||
"name": "Carissa Taylor",
|
||||
"email": "carissataylor@glasstep.com",
|
||||
"country": "Burkina Faso",
|
||||
"starred": false,
|
||||
"status": "paid"
|
||||
},
|
||||
{
|
||||
"id": "5d3026a32db20d8ce9111367",
|
||||
"name": "Muriel Butler",
|
||||
"email": "murielbutler@glasstep.com",
|
||||
"country": "Pitcairn",
|
||||
"starred": false,
|
||||
"status": "processing"
|
||||
},
|
||||
{
|
||||
"id": "5d3026a35b04715a89693024",
|
||||
"name": "Janna Anthony",
|
||||
"email": "jannaanthony@glasstep.com",
|
||||
"country": "Nigeria",
|
||||
"starred": false,
|
||||
"status": "paid"
|
||||
},
|
||||
{
|
||||
"id": "5d3026a3a40b0f908cf0b831",
|
||||
"name": "Cortez Singleton",
|
||||
"email": "cortezsingleton@glasstep.com",
|
||||
"country": "Morocco",
|
||||
"starred": true,
|
||||
"status": "processing"
|
||||
},
|
||||
{
|
||||
"id": "5d3026a30ab099fe57fe76ad",
|
||||
"name": "Acevedo Blevins",
|
||||
"email": "acevedoblevins@glasstep.com",
|
||||
"country": "Turkmenistan",
|
||||
"starred": false,
|
||||
"status": "paid"
|
||||
},
|
||||
{
|
||||
"id": "5d3026a39f9244d7f7d7fe80",
|
||||
"name": "Hamilton Lewis",
|
||||
"email": "hamiltonlewis@glasstep.com",
|
||||
"country": "Marshall Islands",
|
||||
"starred": true,
|
||||
"status": "paid"
|
||||
},
|
||||
{
|
||||
"id": "5d3026a3637724139b82f9bc",
|
||||
"name": "Marylou Wright",
|
||||
"email": "marylouwright@glasstep.com",
|
||||
"country": "Iraq",
|
||||
"starred": true,
|
||||
"status": "paid"
|
||||
},
|
||||
{
|
||||
"id": "5d3026a3e5cda49e94e1f0de",
|
||||
"name": "Lenore Bullock",
|
||||
"email": "lenorebullock@glasstep.com",
|
||||
"country": "El Salvador",
|
||||
"starred": true,
|
||||
"status": "paid"
|
||||
},
|
||||
{
|
||||
"id": "5d3026a30bcb1168afa7bb26",
|
||||
"name": "Enid Stephens",
|
||||
"email": "enidstephens@glasstep.com",
|
||||
"country": "Greece",
|
||||
"starred": false,
|
||||
"status": "rejected"
|
||||
},
|
||||
{
|
||||
"id": "5d3026a34b33074f1ee12e73",
|
||||
"name": "Oneill Joyner",
|
||||
"email": "oneilljoyner@glasstep.com",
|
||||
"country": "Micronesia",
|
||||
"starred": false,
|
||||
"status": "paid"
|
||||
},
|
||||
{
|
||||
"id": "5d3026a3f3f5a4121051c6bc",
|
||||
"name": "Kristine Finley",
|
||||
"email": "kristinefinley@glasstep.com",
|
||||
"country": "Uganda",
|
||||
"starred": false,
|
||||
"status": "paid"
|
||||
},
|
||||
{
|
||||
"id": "5d3026a341bb45b14a38d0ec",
|
||||
"name": "York Carson",
|
||||
"email": "yorkcarson@glasstep.com",
|
||||
"country": "Cyprus",
|
||||
"starred": true,
|
||||
"status": "paid"
|
||||
},
|
||||
{
|
||||
"id": "5d3026a32ed6a9a296e01c71",
|
||||
"name": "Nikki Conway",
|
||||
"email": "nikkiconway@glasstep.com",
|
||||
"country": "Tuvalu",
|
||||
"starred": true,
|
||||
"status": "paid"
|
||||
},
|
||||
{
|
||||
"id": "5d3026a32b3f710cb8b73bca",
|
||||
"name": "Lindsey Burgess",
|
||||
"email": "lindseyburgess@glasstep.com",
|
||||
"country": "Mali",
|
||||
"starred": false,
|
||||
"status": "processing"
|
||||
},
|
||||
{
|
||||
"id": "5d3026a3fbfadf6c0b971769",
|
||||
"name": "Love Christian",
|
||||
"email": "lovechristian@glasstep.com",
|
||||
"country": "Andorra",
|
||||
"starred": false,
|
||||
"status": "rejected"
|
||||
},
|
||||
{
|
||||
"id": "5d3026a35c48c5e49f1930e0",
|
||||
"name": "Julia Sawyer",
|
||||
"email": "juliasawyer@glasstep.com",
|
||||
"country": "Hungary",
|
||||
"starred": true,
|
||||
"status": "processing"
|
||||
},
|
||||
{
|
||||
"id": "5d3026a3fc275278bd752b31",
|
||||
"name": "Mayer Warren",
|
||||
"email": "mayerwarren@glasstep.com",
|
||||
"country": "Latvia",
|
||||
"starred": false,
|
||||
"status": "rejected"
|
||||
}
|
||||
]
|
||||
@@ -1,13 +0,0 @@
|
||||
import type { TChartData as ChartData } from 'vue-chartjs/dist/types'
|
||||
|
||||
export type ColorThemes = {
|
||||
[key: string]: string
|
||||
}
|
||||
|
||||
export type TLineChartData = ChartData<'line'>
|
||||
export type TBarChartData = ChartData<'bar'>
|
||||
export type TBubbleChartData = ChartData<'bubble'>
|
||||
export type TDoughnutChartData = ChartData<'doughnut'>
|
||||
export type TPieChartData = ChartData<'pie'>
|
||||
|
||||
export type TChartData = TLineChartData | TBarChartData | TBubbleChartData | TDoughnutChartData | TPieChartData
|
||||
@@ -1,386 +0,0 @@
|
||||
[
|
||||
{
|
||||
"id": "5d2c865e9a0bae79a6ef7cfa",
|
||||
"firstName": "Ashley",
|
||||
"lastName": "Mcdaniel",
|
||||
"fullName": "Ashley Mcdaniel",
|
||||
"email": "ashleymcdaniel@nebulean.com",
|
||||
"country": "Cayman Islands",
|
||||
"starred": true,
|
||||
"hasReport": false,
|
||||
"status": "warning",
|
||||
"checked": false,
|
||||
"trend": "down",
|
||||
"color": "warning",
|
||||
"graph": "M 5 20 C 10 5, 15 5, 30 30 S 20 20, 70 20",
|
||||
"graphColor": "#4ae387"
|
||||
},
|
||||
{
|
||||
"id": "5d2c865ec73341e16e5f2251",
|
||||
"firstName": "Sellers",
|
||||
"lastName": "Todd",
|
||||
"fullName": "Todd Sellers",
|
||||
"email": "sellerstodd@nebulean.com",
|
||||
"country": "Togo",
|
||||
"starred": false,
|
||||
"hasReport": false,
|
||||
"status": "info",
|
||||
"checked": false,
|
||||
"trend": "none",
|
||||
"color": "primary",
|
||||
"graph": "M 5 30 C 10 5, 30 10, 40 30 S 30 30, 90 40",
|
||||
"graphColor": "#e34a4a"
|
||||
},
|
||||
{
|
||||
"id": "5d2c865e38800c5ce28f2f6b",
|
||||
"firstName": "Sherman",
|
||||
"lastName": "Knowles",
|
||||
"fullName": "Sherman Knowles",
|
||||
"email": "shermanknowles@nebulean.com",
|
||||
"country": "Central African Republic",
|
||||
"starred": true,
|
||||
"hasReport": true,
|
||||
"status": "warning",
|
||||
"checked": false,
|
||||
"trend": "none",
|
||||
"color": "warning",
|
||||
"graph": "M 5 20 C 10 5, 15 5, 30 30 S 20 20, 70 20",
|
||||
"graphColor": "#4ae387"
|
||||
},
|
||||
{
|
||||
"id": "5d2c865e957cd150b82e17a6",
|
||||
"firstName": "Vasquez",
|
||||
"lastName": "Lawson",
|
||||
"fullName": "Vasquez Lawson",
|
||||
"email": "vasquezlawson@nebulean.com",
|
||||
"country": "Bouvet Island",
|
||||
"starred": true,
|
||||
"hasReport": false,
|
||||
"status": "info",
|
||||
"checked": false,
|
||||
"trend": "down",
|
||||
"color": "warning",
|
||||
"graph": "M 5 30 C 10 5, 30 10, 40 30 S 30 30, 90 40",
|
||||
"graphColor": "#e34a4a"
|
||||
},
|
||||
{
|
||||
"id": "5d2c865e9194dbe2faf99227",
|
||||
"firstName": "April",
|
||||
"lastName": "Sykes",
|
||||
"fullName": "April Sykes",
|
||||
"email": "aprilsykes@nebulean.com",
|
||||
"country": "Saint Vincent and The Grenadines",
|
||||
"starred": false,
|
||||
"hasReport": true,
|
||||
"status": "warning",
|
||||
"checked": false,
|
||||
"trend": "down",
|
||||
"color": "primary",
|
||||
"graph": "M 5 20 C 10 5, 15 5, 30 30 S 20 20, 70 20",
|
||||
"graphColor": "#4ae387"
|
||||
},
|
||||
{
|
||||
"id": "5d2c865e1ed74d83f6b26934",
|
||||
"firstName": "Hodges",
|
||||
"lastName": "Garrison",
|
||||
"fullName": "Hodges Garrison",
|
||||
"email": "hodgesgarrison@nebulean.com",
|
||||
"country": "Zimbabwe",
|
||||
"starred": true,
|
||||
"hasReport": false,
|
||||
"status": "info",
|
||||
"checked": false,
|
||||
"trend": "none",
|
||||
"color": "info",
|
||||
"graph": "M 5 30 C 10 5, 30 10, 40 30 S 30 30, 90 40",
|
||||
"graphColor": "#e34a4a"
|
||||
},
|
||||
{
|
||||
"id": "5d2c865e0ef31380880c3de5",
|
||||
"firstName": "Therese",
|
||||
"lastName": "Stokes",
|
||||
"fullName": "Therese Stokes",
|
||||
"email": "theresestokes@nebulean.com",
|
||||
"country": "Mali",
|
||||
"starred": true,
|
||||
"hasReport": false,
|
||||
"status": "info",
|
||||
"checked": false,
|
||||
"trend": "up",
|
||||
"color": "warning",
|
||||
"graph": "M 5 20 C 10 5, 15 5, 30 30 S 20 20, 70 20",
|
||||
"graphColor": "#4ae387"
|
||||
},
|
||||
{
|
||||
"id": "5d2c865e4b5ab4727e5c8b69",
|
||||
"firstName": "Goodwin",
|
||||
"lastName": "Brewer",
|
||||
"fullName": "Goodwin Brewer",
|
||||
"email": "goodwinbrewer@nebulean.com",
|
||||
"country": "Iraq",
|
||||
"starred": true,
|
||||
"hasReport": true,
|
||||
"status": "info",
|
||||
"checked": false,
|
||||
"trend": "none",
|
||||
"color": "info",
|
||||
"graph": "M 5 30 C 10 5, 30 10, 40 30 S 30 30, 90 40",
|
||||
"graphColor": "#e34a4a"
|
||||
},
|
||||
{
|
||||
"id": "5d2c865e4c4d675787cfe1c0",
|
||||
"firstName": "Gomez",
|
||||
"lastName": "Wise",
|
||||
"fullName": "Gomez Wise",
|
||||
"email": "gomezwise@nebulean.com",
|
||||
"country": "Portugal",
|
||||
"starred": true,
|
||||
"hasReport": true,
|
||||
"status": "info",
|
||||
"checked": false,
|
||||
"trend": "none",
|
||||
"color": "primary",
|
||||
"graph": "M 5 30 C 10 5, 30 10, 40 30 S 30 30, 90 40",
|
||||
"graphColor": "#e34a4a"
|
||||
},
|
||||
{
|
||||
"id": "5d2c865e1017c3229017fc68",
|
||||
"firstName": "Laverne",
|
||||
"lastName": "Ayers",
|
||||
"fullName": "Laverne Ayers",
|
||||
"email": "laverneayers@nebulean.com",
|
||||
"country": "Micronesia",
|
||||
"starred": false,
|
||||
"hasReport": false,
|
||||
"status": "warning",
|
||||
"checked": false,
|
||||
"trend": "down",
|
||||
"color": "info",
|
||||
"graph": "M 5 20 C 10 5, 15 5, 30 30 S 20 20, 70 20",
|
||||
"graphColor": "#4ae387"
|
||||
},
|
||||
{
|
||||
"id": "5d2c865ee66676fd7464f8b9",
|
||||
"firstName": "Stewart",
|
||||
"lastName": "Leon",
|
||||
"fullName": "Stewart Leon",
|
||||
"email": "stewartleon@nebulean.com",
|
||||
"country": "Seychelles",
|
||||
"starred": true,
|
||||
"hasReport": false,
|
||||
"status": "info",
|
||||
"checked": false,
|
||||
"trend": "up",
|
||||
"color": "info",
|
||||
"graph": "M 5 30 C 10 5, 30 10, 40 30 S 30 30, 90 40",
|
||||
"graphColor": "#e34a4a"
|
||||
},
|
||||
{
|
||||
"id": "5d2c865e644d8acbed1e0e97",
|
||||
"firstName": "Lindsey",
|
||||
"lastName": "Hopkins",
|
||||
"fullName": "Lindsey Hopkins",
|
||||
"email": "lindseyhopkins@nebulean.com",
|
||||
"country": "Costa Rica",
|
||||
"starred": false,
|
||||
"hasReport": true,
|
||||
"status": "info",
|
||||
"checked": false,
|
||||
"trend": "up",
|
||||
"color": "primary",
|
||||
"graph": "M 5 20 C 10 5, 15 5, 30 30 S 20 20, 70 20",
|
||||
"graphColor": "#4ae387"
|
||||
},
|
||||
{
|
||||
"id": "5d2c865ef2b732c74dc3d6a2",
|
||||
"firstName": "Head",
|
||||
"lastName": "Lloyd",
|
||||
"fullName": "Head Lloyd",
|
||||
"email": "headlloyd@nebulean.com",
|
||||
"country": "Turkey",
|
||||
"starred": true,
|
||||
"hasReport": false,
|
||||
"status": "warning",
|
||||
"checked": false,
|
||||
"trend": "down",
|
||||
"color": "info",
|
||||
"graph": "M 5 30 C 10 5, 30 10, 40 30 S 30 30, 90 40",
|
||||
"graphColor": "#e34a4a"
|
||||
},
|
||||
{
|
||||
"id": "5d2c865e4ee4f09e92ead2e7",
|
||||
"firstName": "Fisher",
|
||||
"lastName": "Bradford",
|
||||
"fullName": "Fisher Bradford",
|
||||
"email": "fisherbradford@nebulean.com",
|
||||
"country": "Ethiopia",
|
||||
"starred": true,
|
||||
"hasReport": true,
|
||||
"status": "info",
|
||||
"checked": false,
|
||||
"trend": "up",
|
||||
"color": "info",
|
||||
"graph": "M 5 20 C 10 5, 15 5, 30 30 S 20 20, 70 20",
|
||||
"graphColor": "#4ae387"
|
||||
},
|
||||
{
|
||||
"id": "5d2c865e88d46a9e9049a549",
|
||||
"firstName": "Aurora",
|
||||
"lastName": "Bird",
|
||||
"fullName": "Aurora Bird",
|
||||
"email": "aurorabird@nebulean.com",
|
||||
"country": "Burkina Faso",
|
||||
"starred": false,
|
||||
"hasReport": true,
|
||||
"status": "warning",
|
||||
"checked": false,
|
||||
"trend": "up",
|
||||
"color": "info",
|
||||
"graph": "M 5 30 C 10 5, 30 10, 40 30 S 30 30, 90 40",
|
||||
"graphColor": "#e34a4a"
|
||||
},
|
||||
{
|
||||
"id": "5d2c865e44bf14ea96d6e752",
|
||||
"firstName": "Bonita",
|
||||
"lastName": "Shields",
|
||||
"fullName": "Bonita Shields",
|
||||
"email": "bonitashields@nebulean.com",
|
||||
"country": "Cote D'Ivoire (Ivory Coast)",
|
||||
"starred": true,
|
||||
"hasReport": true,
|
||||
"status": "warning",
|
||||
"checked": false,
|
||||
"trend": "down",
|
||||
"color": "primary",
|
||||
"graph": "M 5 20 C 10 5, 15 5, 30 30 S 20 20, 70 20",
|
||||
"graphColor": "#4ae387"
|
||||
},
|
||||
{
|
||||
"id": "5d2c865e2a8be26f6ac4369c",
|
||||
"firstName": "Ethel",
|
||||
"lastName": "Underwood",
|
||||
"fullName": "Ethel Underwood",
|
||||
"email": "ethelunderwood@nebulean.com",
|
||||
"country": "Vanuatu",
|
||||
"starred": false,
|
||||
"hasReport": false,
|
||||
"status": "warning",
|
||||
"checked": false,
|
||||
"trend": "down",
|
||||
"color": "info",
|
||||
"graph": "M 5 30 C 10 5, 30 10, 40 30 S 30 30, 90 40",
|
||||
"graphColor": "#e34a4a"
|
||||
},
|
||||
{
|
||||
"id": "5d2c865e5e0aea40111c37f8",
|
||||
"firstName": "Parker",
|
||||
"lastName": "May",
|
||||
"fullName": "Parker May",
|
||||
"email": "parkermay@nebulean.com",
|
||||
"country": "Pakistan",
|
||||
"starred": true,
|
||||
"hasReport": false,
|
||||
"status": "warning",
|
||||
"checked": false,
|
||||
"trend": "down",
|
||||
"color": "warning",
|
||||
"graph": "M 5 20 C 10 5, 15 5, 30 30 S 20 20, 70 20",
|
||||
"graphColor": "#4ae387"
|
||||
},
|
||||
{
|
||||
"id": "5d2c865e7e0c05ecc2d0c186",
|
||||
"firstName": "Hillary",
|
||||
"lastName": "Waters",
|
||||
"fullName": "Hillary Waters",
|
||||
"email": "hillarywaters@nebulean.com",
|
||||
"country": "Comoros",
|
||||
"starred": true,
|
||||
"hasReport": true,
|
||||
"status": "info",
|
||||
"checked": false,
|
||||
"trend": "down",
|
||||
"color": "primary",
|
||||
"graph": "M 5 30 C 10 5, 30 10, 40 30 S 30 30, 90 40",
|
||||
"graphColor": "#e34a4a"
|
||||
},
|
||||
{
|
||||
"id": "5d2c865e80a72eeda016b169",
|
||||
"firstName": "Raquel",
|
||||
"lastName": "Ferrell",
|
||||
"fullName": "Raquel Ferrell",
|
||||
"email": "raquelferrell@nebulean.com",
|
||||
"country": "China",
|
||||
"starred": false,
|
||||
"hasReport": false,
|
||||
"status": "warning",
|
||||
"checked": false,
|
||||
"trend": "down",
|
||||
"color": "info",
|
||||
"graph": "M 5 20 C 10 5, 15 5, 30 30 S 20 20, 70 20",
|
||||
"graphColor": "#4ae387"
|
||||
},
|
||||
{
|
||||
"id": "5d2c865eafacadd378add679",
|
||||
"firstName": "Pickett",
|
||||
"lastName": "Page",
|
||||
"fullName": "Pickett Page",
|
||||
"email": "pickettpage@nebulean.com",
|
||||
"country": "Bermuda",
|
||||
"starred": true,
|
||||
"hasReport": false,
|
||||
"status": "info",
|
||||
"checked": false,
|
||||
"trend": "up",
|
||||
"color": "info",
|
||||
"graph": "M 5 30 C 10 5, 30 10, 40 30 S 30 30, 90 40",
|
||||
"graphColor": "#e34a4a"
|
||||
},
|
||||
{
|
||||
"id": "5d2c865e772b1a75bb0a07b5",
|
||||
"firstName": "Alyson",
|
||||
"lastName": "Bailey",
|
||||
"fullName": "Alyson Bailey",
|
||||
"email": "alysonbailey@nebulean.com",
|
||||
"country": "United Arab Emirates",
|
||||
"starred": false,
|
||||
"hasReport": false,
|
||||
"status": "warning",
|
||||
"checked": false,
|
||||
"trend": "up",
|
||||
"color": "warning",
|
||||
"graph": "M 5 20 C 10 5, 15 5, 30 30 S 20 20, 70 20",
|
||||
"graphColor": "#4ae387"
|
||||
},
|
||||
{
|
||||
"id": "5d2c865e137c19a76b56210c",
|
||||
"firstName": "Farley",
|
||||
"lastName": "Meyers",
|
||||
"fullName": "Farley Meyers",
|
||||
"email": "farleymeyers@nebulean.com",
|
||||
"country": "Christmas Island",
|
||||
"starred": false,
|
||||
"hasReport": false,
|
||||
"status": "info",
|
||||
"checked": false,
|
||||
"trend": "up",
|
||||
"color": "warning",
|
||||
"graph": "M 5 30 C 10 5, 30 10, 40 30 S 30 30, 90 40",
|
||||
"graphColor": "#e34a4a"
|
||||
},
|
||||
{
|
||||
"id": "5d2c865eb0ba37a27aa9afe0",
|
||||
"firstName": "Hinton",
|
||||
"lastName": "Avery",
|
||||
"fullName": "Hinton Avery",
|
||||
"email": "hintonavery@nebulean.com",
|
||||
"country": "Liechtenstein",
|
||||
"starred": false,
|
||||
"hasReport": true,
|
||||
"status": "info",
|
||||
"checked": false,
|
||||
"trend": "up",
|
||||
"color": "info",
|
||||
"graph": "M 5 30 C 10 5, 30 10, 40 30 S 30 30, 90 40",
|
||||
"graphColor": "#e34a4a"
|
||||
}
|
||||
]
|
||||
@@ -1,50 +0,0 @@
|
||||
<template>
|
||||
<div class="dashboard">
|
||||
<dashboard-charts />
|
||||
|
||||
<dashboard-info-block />
|
||||
|
||||
<div class="row row-equal">
|
||||
<div class="flex xs12 lg6">
|
||||
<dashboard-tabs @submit="addAddressToMap" />
|
||||
</div>
|
||||
|
||||
<div class="flex xs12 lg6">
|
||||
<DashboardMap ref="dashboardMap" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
import DashboardCharts from './DashboardCharts.vue'
|
||||
import DashboardInfoBlock from './DashboardInfoBlock.vue'
|
||||
import DashboardTabs from './DashboardTabs.vue'
|
||||
import DashboardMap from './DashboardMap.vue'
|
||||
|
||||
const dashboardMap = ref()
|
||||
|
||||
function addAddressToMap({ city, country }: { city: { text: string }; country: string }) {
|
||||
dashboardMap.value.addAddress({ city: city.text, country })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.row-equal .flex {
|
||||
.va-card {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard {
|
||||
.va-card {
|
||||
margin-bottom: 0 !important;
|
||||
&__title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,101 +0,0 @@
|
||||
<template>
|
||||
<div class="row row-equal">
|
||||
<div class="flex xs12 lg6 xl6">
|
||||
<va-card v-if="lineChartDataGenerated">
|
||||
<va-card-title>
|
||||
<h1>{{ t('dashboard.charts.trendyTrends') }}</h1>
|
||||
<div>
|
||||
<va-button
|
||||
class="ma-1"
|
||||
size="small"
|
||||
color="danger"
|
||||
:disabled="datasetIndex === minIndex"
|
||||
@click="setDatasetIndex(datasetIndex - 1)"
|
||||
>
|
||||
{{ t('dashboard.charts.showInLessDetail') }}
|
||||
</va-button>
|
||||
<va-button
|
||||
class="ma-1"
|
||||
size="small"
|
||||
color="danger"
|
||||
:disabled="datasetIndex === maxIndex - 1"
|
||||
@click="setDatasetIndex(datasetIndex + 1)"
|
||||
>
|
||||
{{ t('dashboard.charts.showInMoreDetail') }}
|
||||
</va-button>
|
||||
</div>
|
||||
</va-card-title>
|
||||
<va-card-content>
|
||||
<va-chart class="chart" :data="lineChartDataGenerated" type="line" />
|
||||
</va-card-content>
|
||||
</va-card>
|
||||
</div>
|
||||
|
||||
<div class="flex xs12 sm6 md6 lg3 xl3">
|
||||
<va-card class="d-flex">
|
||||
<va-card-title>
|
||||
<h1>{{ t('dashboard.charts.loadingSpeed') }}</h1>
|
||||
<va-button icon="print" plain @click="printChart" />
|
||||
</va-card-title>
|
||||
<va-card-content v-if="doughnutChartDataGenerated">
|
||||
<va-chart ref="doughnutChart" class="chart chart--donut" :data="doughnutChartDataGenerated" type="doughnut" />
|
||||
</va-card-content>
|
||||
</va-card>
|
||||
</div>
|
||||
|
||||
<div class="flex xs12 sm6 md6 lg3 xl3">
|
||||
<dashboard-contributors-chart />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { doughnutChartData, lineChartData } from '../../../data/charts'
|
||||
import { useChartData } from '../../../data/charts/composables/useChartData'
|
||||
import { usePartOfChartData } from './composables/usePartOfChartData'
|
||||
import VaChart from '../../../components/va-charts/VaChart.vue'
|
||||
import DashboardContributorsChart from './DashboardContributorsList.vue'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const doughnutChart = ref()
|
||||
|
||||
const dataGenerated = useChartData(lineChartData, 0.7)
|
||||
const doughnutChartDataGenerated = useChartData(doughnutChartData)
|
||||
|
||||
const {
|
||||
dataComputed: lineChartDataGenerated,
|
||||
minIndex,
|
||||
maxIndex,
|
||||
datasetIndex,
|
||||
setDatasetIndex,
|
||||
} = usePartOfChartData(dataGenerated)
|
||||
|
||||
function printChart() {
|
||||
const windowObjectReference = window.open('', 'Print', 'height=600,width=800') as Window
|
||||
|
||||
const img = windowObjectReference.document.createElement('img')
|
||||
|
||||
img.src = `${(document.querySelector('.chart--donut canvas') as HTMLCanvasElement | undefined)?.toDataURL(
|
||||
'image/png',
|
||||
)}`
|
||||
|
||||
img.onload = () => {
|
||||
windowObjectReference?.document.body.appendChild(img)
|
||||
}
|
||||
|
||||
windowObjectReference.print()
|
||||
|
||||
windowObjectReference.onafterprint = () => {
|
||||
windowObjectReference?.close()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chart {
|
||||
height: 400px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,95 +0,0 @@
|
||||
<template>
|
||||
<va-card class="d-flex dashboard-contributors-list">
|
||||
<va-card-title>
|
||||
<h1>{{ t('dashboard.charts.topContributors') }}</h1>
|
||||
<div class="mr-0 va-text-right">
|
||||
<a class="mr-0 va-link" :disabled="contributors.length <= step" @click="showNext">
|
||||
{{ t('dashboard.charts.showNextFive') }}
|
||||
</a>
|
||||
</div>
|
||||
</va-card-title>
|
||||
|
||||
<va-card-content>
|
||||
<va-inner-loading :loading="loading" style="width: 100%">
|
||||
<div v-for="(contributor, idx) in visibleList" :key="idx" class="mb-3">
|
||||
<va-progress-bar :model-value="getPercent(contributor.contributions)" :color="getProgressBarColor(idx)">
|
||||
{{ contributor.contributions }} {{ t('dashboard.charts.commits') }}
|
||||
</va-progress-bar>
|
||||
<p class="mt-2">{{ contributor.login }}</p>
|
||||
</div>
|
||||
</va-inner-loading>
|
||||
</va-card-content>
|
||||
</va-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import axios from 'axios'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
interface IContributor {
|
||||
contributions: number
|
||||
login: string
|
||||
}
|
||||
|
||||
const contributors = ref<IContributor[]>([])
|
||||
const loading = ref(false)
|
||||
const progressMax = ref(392)
|
||||
const visibleList = ref<IContributor[]>([])
|
||||
const step = ref(5)
|
||||
const page = ref(0)
|
||||
|
||||
onMounted(() => {
|
||||
loadContributorsList()
|
||||
})
|
||||
|
||||
async function loadContributorsList() {
|
||||
loading.value = true
|
||||
const { data } = await axios.get<IContributor[]>(
|
||||
'https://api.github.com/repos/epicmaxco/vuestic-admin/contributors',
|
||||
)
|
||||
contributors.value = data
|
||||
progressMax.value = Math.max(...contributors.value.map(({ contributions }) => contributions))
|
||||
showNext()
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
function getPercent(val: number) {
|
||||
return (val / progressMax.value) * 100
|
||||
}
|
||||
|
||||
function showNext() {
|
||||
visibleList.value = contributors.value.slice(page.value * step.value, page.value * step.value + step.value)
|
||||
page.value += 1
|
||||
|
||||
const maxPages = (contributors.value.length - 1) / step.value
|
||||
|
||||
if (page.value > maxPages) {
|
||||
page.value = 0
|
||||
}
|
||||
}
|
||||
|
||||
function getProgressBarColor(idx: number) {
|
||||
const themeColors = ['primary', 'success', 'info', 'danger', 'warning']
|
||||
|
||||
if (idx < themeColors.length) {
|
||||
return themeColors[idx]
|
||||
}
|
||||
|
||||
// Get random color if idx out of colors array
|
||||
const keys = Object.keys(themeColors)
|
||||
return themeColors[keys[(keys.length * Math.random()) << 0] as unknown as number]
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.dashboard-contributors-list {
|
||||
flex-direction: column;
|
||||
|
||||
.inner-loading {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,145 +0,0 @@
|
||||
<template>
|
||||
<div class="row row-equal">
|
||||
<div class="flex xl6 xs12 lg6">
|
||||
<div class="row">
|
||||
<div v-for="(info, idx) in infoTiles" :key="idx" class="flex xs12 sm4">
|
||||
<va-card class="mb-4" :color="info.color">
|
||||
<va-card-content>
|
||||
<h2 class="va-h2 ma-0" style="color: white">{{ info.value }}</h2>
|
||||
<p style="color: white">{{ t('dashboard.info.' + info.text) }}</p>
|
||||
</va-card-content>
|
||||
</va-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="flex xs12 sm6 md6">
|
||||
<va-card>
|
||||
<va-card-content>
|
||||
<h2 class="va-h2 ma-0" :style="{ color: colors.primary }">291</h2>
|
||||
<p class="no-wrap">{{ t('dashboard.info.completedPullRequests') }}</p>
|
||||
</va-card-content>
|
||||
</va-card>
|
||||
</div>
|
||||
<div class="flex xs12 sm6 md6">
|
||||
<va-card>
|
||||
<va-card-content>
|
||||
<div class="row row-separated">
|
||||
<div class="flex xs4">
|
||||
<h2 class="va-h2 ma-0 va-text-center" :style="{ color: colors.primary }">3</h2>
|
||||
<p class="va-text-center">{{ t('dashboard.info.users') }}</p>
|
||||
</div>
|
||||
<div class="flex xs4">
|
||||
<h2 class="va-h2 ma-0 va-text-center" :style="{ color: colors.info }">24</h2>
|
||||
<p class="va-text-center no-wrap">{{ t('dashboard.info.points') }}</p>
|
||||
</div>
|
||||
<div class="flex xs4">
|
||||
<h2 class="va-h2 ma-0 va-text-center" :style="{ color: colors.warning }">91</h2>
|
||||
<p class="va-text-center">{{ t('dashboard.info.units') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</va-card-content>
|
||||
</va-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex xs12 sm6 md6 xl3 lg3">
|
||||
<va-card stripe stripe-color="info">
|
||||
<va-card-title>
|
||||
{{ t('dashboard.info.componentRichTheme') }}
|
||||
</va-card-title>
|
||||
<va-card-content>
|
||||
<p class="rich-theme-card-text">
|
||||
Buying the right telescope to take your love of astronomy to the next level is a big next step.
|
||||
</p>
|
||||
|
||||
<div class="mt-3">
|
||||
<va-button color="primary" target="_blank" href="https://github.com/epicmaxco/vuestic-ui">
|
||||
{{ t('dashboard.info.viewLibrary') }}
|
||||
</va-button>
|
||||
</div>
|
||||
</va-card-content>
|
||||
</va-card>
|
||||
</div>
|
||||
|
||||
<div class="flex xs12 sm6 md6 xl3 lg3">
|
||||
<va-card>
|
||||
<va-image :src="images[currentImageIndex]" style="height: 200px" />
|
||||
<va-card-title>
|
||||
<va-button preset="plain" icon-right="fa-arrow-circle-right" @click="showModal">
|
||||
{{ t('dashboard.info.exploreGallery') }}
|
||||
</va-button>
|
||||
</va-card-title>
|
||||
</va-card>
|
||||
</div>
|
||||
<va-modal v-model="modal">
|
||||
<va-carousel v-model="currentImageIndex" :items="images" class="gallery-carousel" />
|
||||
</va-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { VaCarousel, VaModal, VaCard, VaCardContent, VaCardTitle, VaButton, VaImage, useColors } from 'vuestic-ui'
|
||||
|
||||
const { t } = useI18n()
|
||||
const { colors } = useColors()
|
||||
|
||||
const infoTiles = ref([
|
||||
{
|
||||
color: 'success',
|
||||
value: '803',
|
||||
text: 'commits',
|
||||
icon: '',
|
||||
},
|
||||
{
|
||||
color: 'danger',
|
||||
value: '57',
|
||||
text: 'components',
|
||||
icon: '',
|
||||
},
|
||||
{
|
||||
color: 'info',
|
||||
value: '5',
|
||||
text: 'teamMembers',
|
||||
icon: '',
|
||||
},
|
||||
])
|
||||
|
||||
const modal = ref(false)
|
||||
const currentImageIndex = ref(0)
|
||||
const images = ref([
|
||||
'https://i.imgur.com/qSykGko.jpg',
|
||||
'https://i.imgur.com/jYwT08D.png',
|
||||
'https://i.imgur.com/9930myH.jpg',
|
||||
'https://i.imgur.com/2JxhWD6.jpg',
|
||||
'https://i.imgur.com/MpiOWbM.jpg',
|
||||
])
|
||||
|
||||
function showModal() {
|
||||
modal.value = true
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.row-separated {
|
||||
.flex + .flex {
|
||||
border-left: 1px solid var(--va-background-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.rich-theme-card-text {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.gallery-carousel {
|
||||
width: 80vw;
|
||||
max-width: 100%;
|
||||
|
||||
@media all and (max-width: 576px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,38 +0,0 @@
|
||||
<template>
|
||||
<va-card>
|
||||
<va-card-title>
|
||||
{{ t('dashboard.currentVisitors') }}
|
||||
</va-card-title>
|
||||
<line-map v-model="mainCity" :map-data="cities" :home-city="homeCity" class="dashboard-map" />
|
||||
</va-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import LineMap from '../../../components/maps/LineMap.vue'
|
||||
import { lineMapData, compareStrings } from '../../../data/maps/lineMapData'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const cities = ref(lineMapData.cities)
|
||||
const mainCity = ref('Vilnius')
|
||||
const homeCity = ref('Vilnius')
|
||||
|
||||
function addAddress(address: { city: string; country: string }) {
|
||||
cities.value = cities.value.map((mapItem) =>
|
||||
compareStrings(mapItem.title, address.city) && compareStrings(mapItem.country, address.country)
|
||||
? { ...mapItem, color: 'success' }
|
||||
: mapItem,
|
||||
)
|
||||
}
|
||||
|
||||
defineExpose({ addAddress })
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.dashboard-map {
|
||||
height: 380px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,53 +0,0 @@
|
||||
<template>
|
||||
<va-card>
|
||||
<va-card-title>
|
||||
{{ t('dashboard.setupRemoteConnections') }}
|
||||
</va-card-title>
|
||||
<va-card-content>
|
||||
<va-tabs v-model="activeTabName" grow>
|
||||
<template #tabs>
|
||||
<va-tab name="OverviewTab">
|
||||
{{ t('dashboard.tabs.overview.title') }}
|
||||
</va-tab>
|
||||
<va-tab name="BillingAddressTab">
|
||||
{{ t('dashboard.tabs.billingAddress.title') }}
|
||||
</va-tab>
|
||||
<va-tab name="BankDetailsTab">
|
||||
{{ t('dashboard.tabs.bankDetails.title') }}
|
||||
</va-tab>
|
||||
</template>
|
||||
</va-tabs>
|
||||
<va-separator />
|
||||
<component :is="tabs[activeTabName]" @submit="submit" />
|
||||
</va-card-content>
|
||||
</va-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineAsyncComponent, ref } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const tabs = {
|
||||
OverviewTab: defineAsyncComponent(() => import('./dashboard-tabs/OverviewTab.vue')),
|
||||
BillingAddressTab: defineAsyncComponent(() => import('./dashboard-tabs/BillingAddressTab.vue')),
|
||||
BankDetailsTab: defineAsyncComponent(() => import('./dashboard-tabs/BankDetailsTab.vue')),
|
||||
}
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'submit', data: any): void
|
||||
}>()
|
||||
|
||||
const activeTabName = ref<keyof typeof tabs>('BillingAddressTab')
|
||||
|
||||
function submit(data: any) {
|
||||
emit('submit', data)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.va-tabs__tabs {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -1,27 +0,0 @@
|
||||
import { computed, ref, ComputedRef } from '@vue/reactivity'
|
||||
import { TChartData } from '../../../../data/types'
|
||||
|
||||
export function usePartOfChartData<T extends TChartData>(data: ComputedRef<T>) {
|
||||
const datasetIndex = ref(0)
|
||||
|
||||
const setDatasetIndex = (index: number) => {
|
||||
datasetIndex.value = index
|
||||
}
|
||||
|
||||
const dataComputed = computed<T>(() => ({
|
||||
...data.value,
|
||||
labels: data.value.labels?.slice(datasetIndex.value),
|
||||
datasets: data.value.datasets.map((dataset) => ({
|
||||
...dataset,
|
||||
data: dataset.data.slice(datasetIndex.value),
|
||||
})),
|
||||
}))
|
||||
|
||||
return {
|
||||
datasetIndex,
|
||||
minIndex: 0,
|
||||
maxIndex: (data.value.labels?.length ?? 0) - 1,
|
||||
dataComputed,
|
||||
setDatasetIndex,
|
||||
}
|
||||
}
|
||||
@@ -1,46 +0,0 @@
|
||||
<template>
|
||||
<div class="pt-2">
|
||||
<div class="title text-dark">
|
||||
{{ t('dashboard.tabs.bankDetails.detailsFields') }}
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="flex xs12 md6">
|
||||
<va-input v-model="form.bankName" class="mb-3" :label="t('dashboard.tabs.bankDetails.bankName')" />
|
||||
<va-input v-model="form.accountName" class="mb-3" :label="t('dashboard.tabs.bankDetails.accountName')" />
|
||||
<va-input v-model="form.sortCode" class="mb-3" :label="t('dashboard.tabs.bankDetails.sortCode')" />
|
||||
</div>
|
||||
<div class="flex xs12 md6">
|
||||
<va-input v-model="form.accountNumber" class="mb-3" :label="t('dashboard.tabs.bankDetails.accountNumber')" />
|
||||
<va-input v-model="form.notes" class="mb-3" :label="t('dashboard.tabs.bankDetails.notes')" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-center">
|
||||
<va-button @click="sendDetails">
|
||||
{{ t('dashboard.tabs.bankDetails.sendDetails') }}
|
||||
</va-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useColors, useToast } from 'vuestic-ui'
|
||||
|
||||
const { colors } = useColors()
|
||||
const { t } = useI18n()
|
||||
const { init: initToast } = useToast()
|
||||
|
||||
const form = ref({
|
||||
bankName: 'Raiffeisen Bank',
|
||||
accountName: 'GoalSaver',
|
||||
sortCode: '6558912',
|
||||
accountNumber: '000876432',
|
||||
notes: '',
|
||||
})
|
||||
|
||||
function sendDetails() {
|
||||
const color = colors.primary
|
||||
initToast({ message: `Details sent!`, color })
|
||||
}
|
||||
</script>
|
||||
@@ -1,102 +0,0 @@
|
||||
<template>
|
||||
<div class="pt-2">
|
||||
<div class="row">
|
||||
<div class="flex sm12 md6">
|
||||
<div class="title mb-3" :style="computedStylesTitle">
|
||||
{{ t('dashboard.tabs.billingAddress.personalInfo') }}
|
||||
</div>
|
||||
<va-input v-model="form.name" :label="t('dashboard.tabs.billingAddress.firstName')" />
|
||||
<va-input v-model="form.email" :label="t('dashboard.tabs.billingAddress.email')" />
|
||||
<va-input v-model="form.address" :label="t('dashboard.tabs.billingAddress.address')" />
|
||||
</div>
|
||||
<div class="flex sm12 md6">
|
||||
<div class="title mb-3" :style="computedStylesTitle">
|
||||
{{ t('dashboard.tabs.billingAddress.companyInfo') }}
|
||||
</div>
|
||||
<va-select
|
||||
v-model="form.country"
|
||||
:options="countriesList"
|
||||
:label="t('dashboard.tabs.billingAddress.country')"
|
||||
searchable
|
||||
clearable
|
||||
class="mb-3"
|
||||
/>
|
||||
<va-select
|
||||
v-model="form.city"
|
||||
:label="t('dashboard.tabs.billingAddress.city')"
|
||||
:options="allowedCitiesList"
|
||||
key-by="text"
|
||||
track-by="text"
|
||||
class="mb-3"
|
||||
/>
|
||||
<va-checkbox v-model="form.connection" :label="t('dashboard.tabs.billingAddress.infiniteConnections')" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-center mb-3">
|
||||
<va-button @click="submit">
|
||||
{{ t('dashboard.tabs.billingAddress.addConnection') }}
|
||||
</va-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, reactive, ref, watch } from 'vue'
|
||||
import { useColors } from 'vuestic-ui'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { lineMapData } from '../../../../data/maps/lineMapData'
|
||||
import CountriesList from '../../../../data/CountriesList'
|
||||
|
||||
const { colors } = useColors()
|
||||
const { t } = useI18n()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'submit', data: typeof form): void
|
||||
}>()
|
||||
|
||||
const form = reactive({
|
||||
name: 'John Smith',
|
||||
email: 'smith@gmail.com',
|
||||
address: '93 Guild Street',
|
||||
city: { text: 'London' },
|
||||
country: 'United Kingdom',
|
||||
connection: true,
|
||||
})
|
||||
|
||||
const countriesList = computed(() => {
|
||||
return CountriesList.filter((item) => citiesList.value.filter(({ country }) => country === item).length)
|
||||
})
|
||||
|
||||
const citiesList = computed(() => {
|
||||
return lineMapData.cities.map(({ title, country }) => ({ text: title, country }))
|
||||
})
|
||||
|
||||
const allowedCitiesList = ref<typeof citiesList['value']>([])
|
||||
|
||||
const computedStylesTitle = computed(() => ({ color: colors.dark }))
|
||||
|
||||
watch(
|
||||
() => form.country,
|
||||
(newCountry, oldCountry) => {
|
||||
allowedCitiesList.value = form.country
|
||||
? citiesList.value.filter(({ country }) => country === form.country)
|
||||
: [...citiesList.value]
|
||||
|
||||
if (newCountry !== oldCountry) {
|
||||
const city = allowedCitiesList.value.find(({ country }) => country === newCountry)?.text || ''
|
||||
form.city = { text: city }
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
function submit() {
|
||||
emit('submit', form)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.va-input-wrapper {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
</style>
|
||||
@@ -1,89 +0,0 @@
|
||||
<template>
|
||||
<div class="overview-tab pt-2 layout">
|
||||
<div class="mb-2"></div>
|
||||
<div class="row">
|
||||
<div class="flex xs12 xl6 mb-5">
|
||||
<div class="overview-tab__item d-flex align--center">
|
||||
<div class="overview-tab__item-icon fill-height mr-2">
|
||||
<va-icon-vue />
|
||||
</div>
|
||||
<div class="text--bold">{{ t('dashboard.tabs.overview.built') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex xs12 xl6 mb-5">
|
||||
<div class="overview-tab__item d-flex align--center">
|
||||
<div class="overview-tab__item-icon fill-height mr-2">
|
||||
<va-icon-responsive />
|
||||
</div>
|
||||
<div class="text--bold">{{ t('dashboard.tabs.overview.mobile') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="flex xs12 xl6 mb-5">
|
||||
<div class="overview-tab__item d-flex align--center">
|
||||
<div class="overview-tab__item-icon fill-height mr-2">
|
||||
<va-icon-free />
|
||||
</div>
|
||||
<div class="text--bold">{{ t('dashboard.tabs.overview.free') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex xs12 xl6 mb-5">
|
||||
<div class="overview-tab__item d-flex align--center">
|
||||
<div class="overview-tab__item-icon fill-height mr-2">
|
||||
<va-icon-rich />
|
||||
</div>
|
||||
<div class="text--bold">{{ t('dashboard.tabs.overview.components') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="flex xs12 xl6 mb-5">
|
||||
<div class="overview-tab__item d-flex align--center">
|
||||
<div class="overview-tab__item-icon fill-height mr-2">
|
||||
<va-icon-fresh />
|
||||
</div>
|
||||
<div class="text--bold">{{ t('dashboard.tabs.overview.fresh') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex xs12 xl6">
|
||||
<div class="overview-tab__item d-flex align--center">
|
||||
<div class="overview-tab__item-icon fill-height mr-2">
|
||||
<va-icon-clean-code />
|
||||
</div>
|
||||
<div class="text--bold">{{ t('dashboard.tabs.overview.nojQuery') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import VaIconVue from '../../../../components/icons/VaIconVue.vue'
|
||||
import VaIconFree from '../../../../components/icons/VaIconFree.vue'
|
||||
import VaIconFresh from '../../../../components/icons/VaIconFresh.vue'
|
||||
import VaIconResponsive from '../../../../components/icons/VaIconResponsive.vue'
|
||||
import VaIconRich from '../../../../components/icons/VaIconRich.vue'
|
||||
import VaIconCleanCode from '../../../../components/icons/VaIconCleanCode.vue'
|
||||
|
||||
import { useI18n } from 'vue-i18n'
|
||||
const { t } = useI18n()
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.overview-tab {
|
||||
&__item {
|
||||
height: 55px;
|
||||
|
||||
&-icon {
|
||||
min-width: 65px;
|
||||
max-width: 65px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,243 +0,0 @@
|
||||
export default [
|
||||
'Afghanistan',
|
||||
'Albania',
|
||||
'Algeria',
|
||||
'American Samoa',
|
||||
'Andorra',
|
||||
'Angola',
|
||||
'Anguilla',
|
||||
'Antarctica',
|
||||
'Antigua and Barbuda',
|
||||
'Argentina',
|
||||
'Armenia',
|
||||
'Aruba',
|
||||
'Australia',
|
||||
'Austria',
|
||||
'Azerbaijan',
|
||||
'Bahamas',
|
||||
'Bahrain',
|
||||
'Bangladesh',
|
||||
'Barbados',
|
||||
'Belarus',
|
||||
'Belgium',
|
||||
'Belize',
|
||||
'Benin',
|
||||
'Bermuda',
|
||||
'Bhutan',
|
||||
'Bolivia',
|
||||
'Bosnia and Herzegowina',
|
||||
'Botswana',
|
||||
'Bouvet Island',
|
||||
'Brazil',
|
||||
'British Indian Ocean Territory',
|
||||
'Brunei Darussalam',
|
||||
'Bulgaria',
|
||||
'Burkina Faso',
|
||||
'Burundi',
|
||||
'Cambodia',
|
||||
'Cameroon',
|
||||
'Canada',
|
||||
'Cape Verde',
|
||||
'Cayman Islands',
|
||||
'Central African Republic',
|
||||
'Chad',
|
||||
'Chile',
|
||||
'China',
|
||||
'Christmas Island',
|
||||
'Cocos (Keeling) Islands',
|
||||
'Colombia',
|
||||
'Comoros',
|
||||
'Congo',
|
||||
'Congo, the Democratic Republic of the',
|
||||
'Cook Islands',
|
||||
'Costa Rica',
|
||||
"Cote d'Ivoire",
|
||||
'Croatia (Hrvatska)',
|
||||
'Cuba',
|
||||
'Cyprus',
|
||||
'Czech Republic',
|
||||
'Denmark',
|
||||
'Djibouti',
|
||||
'Dominica',
|
||||
'Dominican Republic',
|
||||
'East Timor',
|
||||
'Ecuador',
|
||||
'Egypt',
|
||||
'El Salvador',
|
||||
'Equatorial Guinea',
|
||||
'Eritrea',
|
||||
'Estonia',
|
||||
'Ethiopia',
|
||||
'Falkland Islands (Malvinas)',
|
||||
'Faroe Islands',
|
||||
'Fiji',
|
||||
'Finland',
|
||||
'France',
|
||||
'France Metropolitan',
|
||||
'French Guiana',
|
||||
'French Polynesia',
|
||||
'French Southern Territories',
|
||||
'Gabon',
|
||||
'Gambia',
|
||||
'Georgia',
|
||||
'Germany',
|
||||
'Ghana',
|
||||
'Gibraltar',
|
||||
'Greece',
|
||||
'Greenland',
|
||||
'Grenada',
|
||||
'Guadeloupe',
|
||||
'Guam',
|
||||
'Guatemala',
|
||||
'Guinea',
|
||||
'Guinea-Bissau',
|
||||
'Guyana',
|
||||
'Haiti',
|
||||
'Heard and Mc Donald Islands',
|
||||
'Holy See (Vatican City State)',
|
||||
'Honduras',
|
||||
'Hong Kong',
|
||||
'Hungary',
|
||||
'Iceland',
|
||||
'India',
|
||||
'Indonesia',
|
||||
'Iran (Islamic Republic of)',
|
||||
'Iraq',
|
||||
'Ireland',
|
||||
'Israel',
|
||||
'Italy',
|
||||
'Jamaica',
|
||||
'Japan',
|
||||
'Jordan',
|
||||
'Kazakhstan',
|
||||
'Kenya',
|
||||
'Kiribati',
|
||||
"Korea, Democratic People's Republic of",
|
||||
'Korea, Republic of',
|
||||
'Kuwait',
|
||||
'Kyrgyzstan',
|
||||
"Lao, People's Democratic Republic",
|
||||
'Latvia',
|
||||
'Lebanon',
|
||||
'Lesotho',
|
||||
'Liberia',
|
||||
'Libyan Arab Jamahiriya',
|
||||
'Liechtenstein',
|
||||
'Lithuania',
|
||||
'Luxembourg',
|
||||
'Macau',
|
||||
'Macedonia, The Former Yugoslav Republic of',
|
||||
'Madagascar',
|
||||
'Malawi',
|
||||
'Malaysia',
|
||||
'Maldives',
|
||||
'Mali',
|
||||
'Malta',
|
||||
'Marshall Islands',
|
||||
'Martinique',
|
||||
'Mauritania',
|
||||
'Mauritius',
|
||||
'Mayotte',
|
||||
'Mexico',
|
||||
'Micronesia, Federated States of',
|
||||
'Moldova, Republic of',
|
||||
'Monaco',
|
||||
'Mongolia',
|
||||
'Montserrat',
|
||||
'Morocco',
|
||||
'Mozambique',
|
||||
'Myanmar',
|
||||
'Namibia',
|
||||
'Nauru',
|
||||
'Nepal',
|
||||
'Netherlands',
|
||||
'Netherlands Antilles',
|
||||
'New Caledonia',
|
||||
'New Zealand',
|
||||
'Nicaragua',
|
||||
'Niger',
|
||||
'Nigeria',
|
||||
'Niue',
|
||||
'Norfolk Island',
|
||||
'Northern Mariana Islands',
|
||||
'Norway',
|
||||
'Oman',
|
||||
'Pakistan',
|
||||
'Palau',
|
||||
'Panama',
|
||||
'Papua New Guinea',
|
||||
'Paraguay',
|
||||
'Peru',
|
||||
'Philippines',
|
||||
'Pitcairn',
|
||||
'Poland',
|
||||
'Portugal',
|
||||
'Puerto Rico',
|
||||
'Qatar',
|
||||
'Reunion',
|
||||
'Romania',
|
||||
'Russian Federation',
|
||||
'Rwanda',
|
||||
'Saint Kitts and Nevis',
|
||||
'Saint Lucia',
|
||||
'Saint Vincent and the Grenadines',
|
||||
'Samoa',
|
||||
'San Marino',
|
||||
'Sao Tome and Principe',
|
||||
'Saudi Arabia',
|
||||
'Senegal',
|
||||
'Serbia',
|
||||
'Seychelles',
|
||||
'Sierra Leone',
|
||||
'Singapore',
|
||||
'Slovakia (Slovak Republic)',
|
||||
'Slovenia',
|
||||
'Solomon Islands',
|
||||
'Somalia',
|
||||
'South Africa',
|
||||
'South Georgia and the South Sandwich Islands',
|
||||
'Spain',
|
||||
'Sri Lanka',
|
||||
'St. Helena',
|
||||
'St. Pierre and Miquelon',
|
||||
'Sudan',
|
||||
'Suriname',
|
||||
'Svalbard and Jan Mayen Islands',
|
||||
'Swaziland',
|
||||
'Sweden',
|
||||
'Switzerland',
|
||||
'Syrian Arab Republic',
|
||||
'Taiwan, Province of China',
|
||||
'Tajikistan',
|
||||
'Tanzania, United Republic of',
|
||||
'United States of America',
|
||||
'Thailand',
|
||||
'Togo',
|
||||
'Tokelau',
|
||||
'Tonga',
|
||||
'Trinidad and Tobago',
|
||||
'Tunisia',
|
||||
'Turkey',
|
||||
'Turkmenistan',
|
||||
'Turks and Caicos Islands',
|
||||
'Tuvalu',
|
||||
'Uganda',
|
||||
'Ukraine',
|
||||
'United Arab Emirates',
|
||||
'United Kingdom',
|
||||
'United States',
|
||||
'United States Minor Outlying Islands',
|
||||
'Uruguay',
|
||||
'Uzbekistan',
|
||||
'Vanuatu',
|
||||
'Venezuela',
|
||||
'Vietnam',
|
||||
'Virgin Islands (British)',
|
||||
'Virgin Islands (U.S.)',
|
||||
'Wallis and Futuna Islands',
|
||||
'Western Sahara',
|
||||
'Yemen',
|
||||
'Yugoslavia',
|
||||
'Zambia',
|
||||
'Zimbabwe',
|
||||
]
|
||||
@@ -1,330 +0,0 @@
|
||||
<template>
|
||||
<div class="form-elements">
|
||||
<div class="row">
|
||||
<div class="flex xs12">
|
||||
<va-card>
|
||||
<va-card-title>{{ t('forms.inputs.title') }}</va-card-title>
|
||||
<va-card-content>
|
||||
<form>
|
||||
<div class="row">
|
||||
<div class="flex md4 sm6 xs12">
|
||||
<va-input v-model="simple" placeholder="Text Input" />
|
||||
</div>
|
||||
<div class="flex md4 sm6 xs12">
|
||||
<va-input v-model="withIcon" placeholder="Input With Icon">
|
||||
<template #prepend>
|
||||
<va-icon color="gray" name="envelope" />
|
||||
</template>
|
||||
</va-input>
|
||||
</div>
|
||||
<div class="flex md4 sm6 xs12">
|
||||
<va-input v-model="withButton" placeholder="Input With Button">
|
||||
<template #append>
|
||||
<va-button style="margin-right: 0" small> UPLOAD </va-button>
|
||||
</template>
|
||||
</va-input>
|
||||
</div>
|
||||
<div class="flex md4 sm6 xs12">
|
||||
<va-input v-model="successfulEmail" type="email" label="Email (Validated with success)" success>
|
||||
</va-input>
|
||||
</div>
|
||||
<div class="flex md4 sm6 xs12">
|
||||
<va-input v-model="clearableText" placeholder="Input With Clear Button" clearable />
|
||||
</div>
|
||||
<div class="flex md4 sm6 xs12">
|
||||
<va-input
|
||||
v-model="wrongEmail"
|
||||
type="email"
|
||||
label="Email (Validated)"
|
||||
error
|
||||
:error-messages="errorMessages"
|
||||
>
|
||||
</va-input>
|
||||
</div>
|
||||
<div class="flex md4 sm6 xs12">
|
||||
<va-input
|
||||
v-model="withDescription"
|
||||
placeholder="Text Input (with description)"
|
||||
:messages="messages"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</va-card-content>
|
||||
</va-card>
|
||||
</div>
|
||||
|
||||
<div class="flex xs12">
|
||||
<va-card>
|
||||
<va-card-title>{{ t('forms.dateTimePicker.title') }}</va-card-title>
|
||||
<va-card-content>
|
||||
<form>
|
||||
<div class="row">
|
||||
<div class="flex md4 sm6 xs12">
|
||||
<va-date-input v-model="dateInput.simple" :label="t('forms.dateTimePicker.basic')" />
|
||||
</div>
|
||||
<div class="flex md4 sm6 xs12">
|
||||
<va-date-input
|
||||
v-model="dateInput.simple"
|
||||
:label="t('forms.dateTimePicker.manualInput')"
|
||||
manual-input
|
||||
/>
|
||||
</div>
|
||||
<div class="flex md4 sm6 xs12">
|
||||
<va-date-input v-model="dateInput.disabled" :label="t('forms.dateTimePicker.disabled')" disabled />
|
||||
</div>
|
||||
<div class="flex md4 sm6 xs12">
|
||||
<va-date-input
|
||||
v-model="dateInput.multiple"
|
||||
:label="t('forms.dateTimePicker.multiple')"
|
||||
mode="multiple"
|
||||
clearable
|
||||
/>
|
||||
</div>
|
||||
<div class="flex md4 sm6 xs12">
|
||||
<va-date-input
|
||||
v-model="dateInput.range"
|
||||
:label="t('forms.dateTimePicker.range')"
|
||||
mode="range"
|
||||
clearable
|
||||
/>
|
||||
</div>
|
||||
<div class="flex md4 sm6 xs12">
|
||||
<va-date-input
|
||||
v-model="dateInput.simple"
|
||||
:label="t('forms.dateTimePicker.customFirstDay')"
|
||||
first-weekday="Monday"
|
||||
highlight-weekend
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</va-card-content>
|
||||
<va-divider />
|
||||
<va-card-content>
|
||||
<form>
|
||||
<div class="row">
|
||||
<div class="flex md4 sm6 xs12">
|
||||
<va-time-input v-model="dateInput.simple" :label="t('forms.dateTimePicker.basic')" />
|
||||
</div>
|
||||
<div class="flex md4 sm6 xs12">
|
||||
<va-time-input
|
||||
v-model="dateInput.simple"
|
||||
:label="t('forms.dateTimePicker.manualInput')"
|
||||
manual-input
|
||||
/>
|
||||
</div>
|
||||
<div class="flex md4 sm6 xs12">
|
||||
<va-time-input v-model="dateInput.simple" :label="t('forms.dateTimePicker.disabled')" disabled />
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</va-card-content>
|
||||
</va-card>
|
||||
</div>
|
||||
|
||||
<div class="flex xs12">
|
||||
<va-card>
|
||||
<va-card-title>{{ t('forms.selects.title') }}</va-card-title>
|
||||
<va-card-content>
|
||||
<form>
|
||||
<div class="row">
|
||||
<div class="flex md6 xs12">
|
||||
<va-select
|
||||
v-model="simpleSelectModel"
|
||||
:label="t('forms.selects.simple')"
|
||||
text-by="description"
|
||||
track-by="id"
|
||||
:options="simpleOptions"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex md6 xs12">
|
||||
<va-select
|
||||
v-model="multiSelectModel"
|
||||
:label="t('forms.selects.multi')"
|
||||
text-by="description"
|
||||
track-by="id"
|
||||
multiple
|
||||
:options="simpleOptions"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex md6 xs12">
|
||||
<va-select v-model="chosenCountry" :label="t('forms.selects.country')" :options="countriesList" />
|
||||
</div>
|
||||
<div class="flex md6 xs12">
|
||||
<va-select
|
||||
v-model="multiSelectCountriesModel"
|
||||
:label="t('forms.selects.countryMulti')"
|
||||
multiple
|
||||
:options="countriesList"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex md6 xs12">
|
||||
<va-select
|
||||
v-model="searchableSelectModel"
|
||||
:label="t('forms.selects.searchable')"
|
||||
searchable
|
||||
text-by="description"
|
||||
track-by="id"
|
||||
:options="simpleOptions"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex md6 xs12">
|
||||
<va-select
|
||||
v-model="multiSearchableSelectModel"
|
||||
:label="t('forms.selects.searchableMulti')"
|
||||
text-by="description"
|
||||
searchable
|
||||
multiple
|
||||
:options="countriesList"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</va-card-content>
|
||||
</va-card>
|
||||
</div>
|
||||
|
||||
<div class="flex xs12">
|
||||
<va-card>
|
||||
<va-card-title>{{ t('forms.controls.title') }}</va-card-title>
|
||||
<va-card-content>
|
||||
<form>
|
||||
<div class="row">
|
||||
<div class="flex md6 xs12">
|
||||
<fieldset>
|
||||
<va-checkbox v-model="checkbox.unselected" :label="t('forms.controls.unselected')" class="mb-2" />
|
||||
<va-checkbox v-model="checkbox.selected" :label="t('forms.controls.selected')" class="mb-2" />
|
||||
<va-checkbox
|
||||
v-model="checkbox.readonly"
|
||||
:label="t('forms.controls.readonly')"
|
||||
readonly
|
||||
class="mb-2"
|
||||
/>
|
||||
<va-checkbox
|
||||
v-model="checkbox.disabled"
|
||||
:label="t('forms.controls.disabled')"
|
||||
disabled
|
||||
class="mb-2"
|
||||
/>
|
||||
<va-checkbox v-model="checkbox.error" :label="t('forms.controls.error')" error class="mb-2" />
|
||||
<va-checkbox
|
||||
v-model="checkbox.errorMessages"
|
||||
:label="t('forms.controls.errorMessage')"
|
||||
error
|
||||
:error-messages="errorMessages"
|
||||
:error-count="2"
|
||||
/>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="flex md6 xs12">
|
||||
<fieldset>
|
||||
<va-radio v-model="radioSelectedOption" option="option1" label="Radio-1" />
|
||||
<va-radio v-model="radioSelectedOption" option="option2" label="Radio-2" />
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<va-radio v-model="radioSelectedDisableOption" option="option1" disabled label="Disabled Radio-1" />
|
||||
<va-radio v-model="radioSelectedDisableOption" option="option2" disabled label="Disabled Radio-2" />
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<fieldset>
|
||||
<va-switch v-model="toggles.selected" label="Selected toggle" class="mr-4 mb-2" />
|
||||
<va-switch v-model="toggles.unselected" label="Unselected toggle" class="mr-4 mb-2" />
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<va-switch v-model="toggles.disabled" disabled label="Disabled toggle" class="mr-4 mb-2" />
|
||||
<va-switch v-model="toggles.disabled" readonly label="Readonly toggle" class="mr-4 mb-2" />
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<va-switch v-model="toggles.small" size="small" label="Small toggle" class="mr-4 mb-2" />
|
||||
<va-switch v-model="toggles.large" size="large" label="Large toggle" class="mr-4 mb-2" />
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</va-card-content>
|
||||
</va-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import CountriesList from '../data/CountriesList'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
const { t } = useI18n()
|
||||
|
||||
const countriesList = ref(CountriesList)
|
||||
const chosenCountry = ref('')
|
||||
const simple = ref('')
|
||||
const withIcon = ref('')
|
||||
const withButton = ref('')
|
||||
const withDescription = ref('')
|
||||
const clearableText = ref('Vasili Savitski')
|
||||
const successfulEmail = ref('andrei@dreamsupport.io')
|
||||
const wrongEmail = ref('andrei@dreamsupport')
|
||||
const messages = ref([
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor ' +
|
||||
'incididunt ut labore et dolore magna aliqua.',
|
||||
])
|
||||
const errorMessages = ref(['Field should contain a valid email'])
|
||||
const simpleOptions = ref([
|
||||
{
|
||||
id: 1,
|
||||
description: 'First option',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
description: 'Second option',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
description: 'Third option',
|
||||
},
|
||||
])
|
||||
|
||||
const simpleSelectModel = ref('')
|
||||
const multiSelectModel = ref([])
|
||||
const multiSelectCountriesModel = ref([])
|
||||
const searchableSelectModel = ref('')
|
||||
const multiSearchableSelectModel = ref([])
|
||||
const radioSelectedOption = ref('option1')
|
||||
const radioSelectedDisableOption = ref('option1')
|
||||
const checkbox = ref({
|
||||
unselected: false,
|
||||
selected: true,
|
||||
readonly: true,
|
||||
disabled: true,
|
||||
error: false,
|
||||
errorMessages: true,
|
||||
})
|
||||
|
||||
const toggles = ref({
|
||||
unselected: false,
|
||||
selected: true,
|
||||
disabled: true,
|
||||
small: false,
|
||||
large: false,
|
||||
})
|
||||
|
||||
const datePlusDay = (date: Date, days: number) => {
|
||||
const d = new Date(date)
|
||||
d.setDate(d.getDate() + days)
|
||||
return d
|
||||
}
|
||||
|
||||
const dateInput = ref({
|
||||
simple: new Date(),
|
||||
disabled: '2018-05-09',
|
||||
range: { start: new Date(), end: datePlusDay(new Date(), 7) },
|
||||
multiple: ['2018-04-25', '2018-04-27'],
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
fieldset {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
@@ -1,48 +0,0 @@
|
||||
<template>
|
||||
<div class="medium-editor">
|
||||
<div class="row">
|
||||
<div class="flex md12">
|
||||
<va-card>
|
||||
<va-card-title>{{ t('forms.mediumEditor.title') }}</va-card-title>
|
||||
<va-card-content class="d-flex justify-center">
|
||||
<va-medium-editor @initialized="handleEditorInitialization">
|
||||
<h1>Select Text To Open Editor</h1>
|
||||
|
||||
<p>
|
||||
You enter into your favorite local bar looking
|
||||
<span class="default-selection"><b>good</b></span> as hell, but you know the only heads you want to
|
||||
turn—spicy & stylish alpha bitches — are heavily fixated on the D. The hot girl talks to you, but she
|
||||
only wants to be your best friend. Her nonthreatening and attentive best friend. Receiver of sexy
|
||||
selfies, listener of stories. Meanwhile, you attract unwanted attention from straight men, pudgy and
|
||||
greasy moths to your emotionally distant flame.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Read the full article on
|
||||
<a href="https://medium.com/@dorn.anna/girl-no-you-dont-2e21e826c62c">Medium</a>
|
||||
</p>
|
||||
</va-medium-editor>
|
||||
</va-card-content>
|
||||
</va-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { nextTick } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import type MediumEditor from 'medium-editor'
|
||||
import VaMediumEditor from '../../../../components/va-medium-editor/VaMediumEditor.vue'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
function handleEditorInitialization(editor: typeof MediumEditor) {
|
||||
nextTick(() => highlightSampleText(editor))
|
||||
}
|
||||
|
||||
function highlightSampleText(editor: typeof MediumEditor) {
|
||||
const sampleText = document.getElementsByClassName('default-selection')[0] as HTMLElement
|
||||
editor.selectElement(sampleText)
|
||||
}
|
||||
</script>
|
||||
@@ -1,162 +0,0 @@
|
||||
<template>
|
||||
<div ref="mapRef" class="bubble-map" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, onUpdated, onBeforeUnmount, ref, shallowRef, watch } from 'vue'
|
||||
import * as am5 from '@amcharts/amcharts5'
|
||||
import * as am5map from '@amcharts/amcharts5/map'
|
||||
import am5geodata_worldLow from '@amcharts/amcharts5-geodata/worldLow'
|
||||
import am5themes_Animated from '@amcharts/amcharts5/themes/Animated'
|
||||
import { useColors } from 'vuestic-ui'
|
||||
|
||||
import { PointGeoCoord, CountryItem, getValueBounds, getItemRadius } from '../../../../data/maps/bubbleMapData'
|
||||
|
||||
const bulletSizes = { min: 3, max: 30 }
|
||||
|
||||
const titleHTML = `
|
||||
<div style="text-align: center">
|
||||
<h2 style="font-size: 16px; margin-bottom: 8px">Population of the World in 2011</h2>
|
||||
<p style="font-size: 12px">source: Gapminder</p>
|
||||
<div>`
|
||||
|
||||
const props = defineProps<{
|
||||
mapData: {
|
||||
latLng: Record<string, PointGeoCoord>
|
||||
data: CountryItem[]
|
||||
}
|
||||
}>()
|
||||
|
||||
const { getColor, colors } = useColors()
|
||||
|
||||
const mapRef = ref()
|
||||
const mapRoot = shallowRef()
|
||||
const mapChart = shallowRef()
|
||||
const mapPolygonSeries = shallowRef()
|
||||
const mapPointSeries = shallowRef()
|
||||
const mapZoomControl = shallowRef()
|
||||
|
||||
const pointData = computed(() =>
|
||||
props.mapData.data.map((country) => ({
|
||||
...country,
|
||||
...props.mapData.latLng[country.code],
|
||||
})),
|
||||
)
|
||||
|
||||
const bulletBounds = computed(() => ({
|
||||
min: (Math.PI * bulletSizes.min ** 2) / 4,
|
||||
max: (Math.PI * bulletSizes.max ** 2) / 4,
|
||||
}))
|
||||
|
||||
const valueBounds = computed(() => getValueBounds(pointData.value))
|
||||
|
||||
const createMap = () => {
|
||||
const root = am5.Root.new(mapRef.value)
|
||||
|
||||
root.setThemes([am5themes_Animated.new(root)])
|
||||
|
||||
const chart = root.container.children.push(
|
||||
am5map.MapChart.new(root, {
|
||||
minZoomLevel: 1,
|
||||
maxZoomLevel: 10,
|
||||
}),
|
||||
)
|
||||
|
||||
const zoomControl = chart.set('zoomControl', am5map.ZoomControl.new(root, {}))
|
||||
|
||||
// polygon series
|
||||
const polygonSeries = chart.series.push(
|
||||
am5map.MapPolygonSeries.new(root, {
|
||||
geoJSON: am5geodata_worldLow,
|
||||
exclude: ['AQ'],
|
||||
}),
|
||||
)
|
||||
|
||||
polygonSeries.mapPolygons.template.setAll({
|
||||
fill: am5.color(getColor(colors.secondary)),
|
||||
fillOpacity: 0.2,
|
||||
strokeWidth: 0.5,
|
||||
})
|
||||
|
||||
// title
|
||||
chart.children.push(
|
||||
am5.Label.new(root, {
|
||||
html: titleHTML,
|
||||
y: 15,
|
||||
x: am5.percent(50),
|
||||
centerX: am5.percent(50),
|
||||
}),
|
||||
)
|
||||
|
||||
// point series
|
||||
const pointSeries = chart.series.push(
|
||||
am5map.MapPointSeries.new(root, {
|
||||
latitudeField: 'latitude',
|
||||
longitudeField: 'longitude',
|
||||
}),
|
||||
)
|
||||
|
||||
pointSeries.bullets.push((root, series, dataItem) => {
|
||||
const itemData = dataItem.dataContext as CountryItem
|
||||
|
||||
return am5.Bullet.new(root, {
|
||||
sprite: am5.Circle.new(root, {
|
||||
radius: getItemRadius(itemData, valueBounds.value, bulletBounds.value),
|
||||
fill: am5.color(itemData.color),
|
||||
opacity: 0.6,
|
||||
tooltipText: '{name}: {value}',
|
||||
}),
|
||||
})
|
||||
})
|
||||
|
||||
// set map data
|
||||
pointSeries.data.setAll(pointData.value)
|
||||
|
||||
// assign objects to refs
|
||||
mapRoot.value = root
|
||||
mapChart.value = chart
|
||||
mapZoomControl.value = zoomControl
|
||||
mapPointSeries.value = pointSeries
|
||||
mapPolygonSeries.value = polygonSeries
|
||||
}
|
||||
|
||||
const setPointSeriesData = () => {
|
||||
mapPointSeries.value.data.setAll(pointData.value)
|
||||
}
|
||||
|
||||
const updateChartDataOnChangeTheme = () => {
|
||||
if (mapRoot.value) {
|
||||
mapPolygonSeries.value.mapPolygons.template.setAll({
|
||||
fill: am5.color(getColor(colors.secondary)),
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const updateChartDataOnUpdateProps = () => {
|
||||
if (mapRoot.value) {
|
||||
setPointSeriesData()
|
||||
}
|
||||
}
|
||||
|
||||
const disposeMap = () => {
|
||||
if (mapRoot.value) {
|
||||
mapRoot.value.dispose()
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(createMap)
|
||||
onUpdated(updateChartDataOnUpdateProps)
|
||||
watch(colors, updateChartDataOnChangeTheme)
|
||||
onBeforeUnmount(disposeMap)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bubble-map {
|
||||
border-radius: inherit;
|
||||
|
||||
:deep(div),
|
||||
:deep(canvas) {
|
||||
border-radius: inherit;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,24 +0,0 @@
|
||||
<template>
|
||||
<div class="bubble-maps-page">
|
||||
<div class="row">
|
||||
<div class="flex md12 xs12">
|
||||
<va-card class="bubble-maps-page__widget" title="Bubble Maps">
|
||||
<bubble-map :map-data="bubbleMapData" style="height: 75vh" />
|
||||
</va-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import BubbleMap from './BubbleMap.vue'
|
||||
import { bubbleMapData } from '../../../../data/maps/bubbleMapData'
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.line-maps-page__widget {
|
||||
.va-card__inner {
|
||||
border-radius: inherit;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,25 +0,0 @@
|
||||
<template>
|
||||
<div ref="mapRef" class="leaflet-map fill-height" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
|
||||
import 'leaflet-map'
|
||||
import 'leaflet/dist/leaflet.css'
|
||||
import * as Leaflet from 'leaflet'
|
||||
|
||||
Leaflet.Icon.Default.imagePath = '/vendor/leaflet/'
|
||||
|
||||
const mapRef = ref()
|
||||
|
||||
onMounted(() => {
|
||||
const map = Leaflet.map(mapRef.value).setView([51.505, -0.09], 13)
|
||||
|
||||
Leaflet.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
|
||||
attribution: '© <a href="https://osm.org/copyright">OpenStreetMap</a> contributors',
|
||||
}).addTo(map)
|
||||
|
||||
Leaflet.marker([51.5, -0.09]).addTo(map).bindPopup('A pretty CSS3 popup.<br> Easily customizable.').openPopup()
|
||||
})
|
||||
</script>
|
||||
@@ -1,15 +0,0 @@
|
||||
<template>
|
||||
<div class="leaflet-maps-page">
|
||||
<div class="row">
|
||||
<div class="flex md12 xs12">
|
||||
<va-card class="leaflet-maps-page__widget" title="Leaflet Maps">
|
||||
<leaflet-map style="height: 65vh" />
|
||||
</va-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import LeafletMap from './LeafletMap.vue'
|
||||
</script>
|
||||
@@ -1,30 +0,0 @@
|
||||
<template>
|
||||
<div class="line-maps-page">
|
||||
<div class="row">
|
||||
<div class="flex md12 xs12">
|
||||
<va-card class="line-maps-page__widget" title="Line Maps">
|
||||
<line-map v-model="mainCity" :map-data="cities" :home-city="homeCity" style="height: 75vh" />
|
||||
</va-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
import LineMap from '../../../../components/maps/LineMap.vue'
|
||||
import { lineMapData } from '../../../../data/maps/lineMapData'
|
||||
|
||||
const mainCity = ref(lineMapData.mainCity)
|
||||
const homeCity = ref(lineMapData.homeCity)
|
||||
const cities = ref(lineMapData.cities)
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.line-maps-page__widget {
|
||||
.va-card__inner {
|
||||
border-radius: inherit;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,20 +0,0 @@
|
||||
<template>
|
||||
<div ref="mapRef" class="maplibre-map fill-height" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue'
|
||||
import maplibregl from 'maplibre-gl'
|
||||
import 'maplibre-gl/dist/maplibre-gl.css'
|
||||
|
||||
const mapRef = ref()
|
||||
|
||||
onMounted(() => {
|
||||
const map = new maplibregl.Map({
|
||||
container: mapRef.value,
|
||||
style: 'https://demotiles.maplibre.org/style.json',
|
||||
})
|
||||
|
||||
map.addControl(new maplibregl.NavigationControl({}))
|
||||
})
|
||||
</script>
|
||||
@@ -1,15 +0,0 @@
|
||||
<template>
|
||||
<div class="maplibre-maps-page">
|
||||
<div class="row">
|
||||
<div class="flex md12 xs12">
|
||||
<va-card class="maplibre-maps-page__widget" title="MapLibre Maps">
|
||||
<map-libre-map style="height: 65vh" />
|
||||
</va-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import MapLibreMap from './MapLibreMap.vue'
|
||||
</script>
|
||||
@@ -1,37 +0,0 @@
|
||||
<template>
|
||||
<div class="yandex-maps-page">
|
||||
<div class="row">
|
||||
<div class="flex md12 xs12">
|
||||
<va-card class="yandex-maps-page__widget" title="Yandex Maps">
|
||||
<yandex-map
|
||||
map-type="hybrid"
|
||||
:coords="[55.2, 38.8]"
|
||||
:zoom="8"
|
||||
:controls="['trafficControl', 'zoomControl', 'geolocationControl', 'fullscreenControl', 'searchControl']"
|
||||
style="width: 100%; height: 65vh"
|
||||
>
|
||||
<yandex-map-marker v-for="marker in markers" :key="marker['marker-id']" v-bind="marker" />
|
||||
</yandex-map>
|
||||
</va-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
// No TS declarations are provided - ignoring the error
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
import { yandexMap as YandexMap, ymapMarker as YandexMapMarker } from 'vue-yandex-maps'
|
||||
|
||||
const markers = ref([
|
||||
{
|
||||
'marker-id': 0,
|
||||
coords: [54.8, 38.9],
|
||||
clusterName: '1',
|
||||
balloonTemplate: '<div>"Your custom template"</div>',
|
||||
},
|
||||
])
|
||||
</script>
|
||||
@@ -1,46 +0,0 @@
|
||||
<template>
|
||||
<div class="not-found-pages">
|
||||
<div class="row">
|
||||
<div v-for="(item, index) in items" :key="index" class="flex xs12 sm6 lg4 xl3">
|
||||
<va-card class="not-found-pages__cards va-text-center">
|
||||
<va-image :src="item.imageUrl" style="max-height: 200px" />
|
||||
<va-card-content>
|
||||
{{ item.label }}
|
||||
<div class="not-found-pages__button-container pt-3 mb-0">
|
||||
<va-button :to="{ name: item.buttonTo }">
|
||||
{{ 'View Example' }}
|
||||
</va-button>
|
||||
</div>
|
||||
</va-card-content>
|
||||
</va-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
const items = ref([
|
||||
{
|
||||
imageUrl: 'https://i.imgur.com/GzUR0Wz.png',
|
||||
label: 'Advanced layouts',
|
||||
buttonTo: 'not-found-advanced',
|
||||
},
|
||||
{
|
||||
imageUrl: 'https://i.imgur.com/HttcXPi.png',
|
||||
label: 'Simple',
|
||||
buttonTo: 'not-found-simple',
|
||||
},
|
||||
{
|
||||
imageUrl: 'https://i.imgur.com/dlcZMiG.png',
|
||||
label: 'Custom image',
|
||||
buttonTo: 'not-found-custom',
|
||||
},
|
||||
{
|
||||
imageUrl: 'https://i.imgur.com/qcOlDz7.png',
|
||||
label: 'Large text heading',
|
||||
buttonTo: 'not-found-large-text',
|
||||
},
|
||||
])
|
||||
</script>
|
||||
@@ -1,55 +0,0 @@
|
||||
<template>
|
||||
<div class="not-found-pages">
|
||||
<div class="row mb-4">
|
||||
<va-card class="flex xs12">
|
||||
<va-card-title> Do you have any questions? </va-card-title>
|
||||
<va-card-content>
|
||||
<va-input>
|
||||
<template #prepend>
|
||||
<va-icon name="search" />
|
||||
</template>
|
||||
</va-input>
|
||||
</va-card-content>
|
||||
</va-card>
|
||||
</div>
|
||||
<div class="row">
|
||||
<va-card class="flex xs12">
|
||||
<va-card-title> Frequently Asked Questions </va-card-title>
|
||||
<va-card-content>
|
||||
<va-accordion>
|
||||
<va-collapse header="First question">
|
||||
<div class="pa-3">
|
||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nemo veniam provident voluptates consequuntur
|
||||
nostrum cumque possimus unde asperiores magnam rem.
|
||||
</div>
|
||||
</va-collapse>
|
||||
<va-collapse header="Second question">
|
||||
<div class="pa-3">
|
||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nemo veniam provident voluptates consequuntur
|
||||
nostrum cumque possimus unde asperiores magnam rem.
|
||||
</div>
|
||||
</va-collapse>
|
||||
<va-collapse header="Third question">
|
||||
<div class="pa-3">
|
||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nemo veniam provident voluptates consequuntur
|
||||
nostrum cumque possimus unde asperiores magnam rem.
|
||||
</div>
|
||||
</va-collapse>
|
||||
<va-collapse header="Fourth question">
|
||||
<div class="pa-3">
|
||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nemo veniam provident voluptates consequuntur
|
||||
nostrum cumque possimus unde asperiores magnam rem.
|
||||
</div>
|
||||
</va-collapse>
|
||||
<va-collapse header="Fifth question">
|
||||
<div class="pa-3">
|
||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nemo veniam provident voluptates consequuntur
|
||||
nostrum cumque possimus unde asperiores magnam rem.
|
||||
</div>
|
||||
</va-collapse>
|
||||
</va-accordion>
|
||||
</va-card-content>
|
||||
</va-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,96 +0,0 @@
|
||||
<template>
|
||||
<div class="charts">
|
||||
<div class="row">
|
||||
<div class="flex md6 xs12">
|
||||
<va-card v-if="barChartDataGenerated" class="chart-widget">
|
||||
<va-card-title>{{ t('charts.verticalBarChart') }}</va-card-title>
|
||||
<va-card-content>
|
||||
<va-chart :data="barChartDataGenerated" type="bar" />
|
||||
</va-card-content>
|
||||
</va-card>
|
||||
</div>
|
||||
|
||||
<div class="flex md6 xs12">
|
||||
<va-card v-if="horizontalBarChartDataGenerated" class="chart-widget">
|
||||
<va-card-title>{{ t('charts.horizontalBarChart') }}</va-card-title>
|
||||
<va-card-content>
|
||||
<va-chart :data="horizontalBarChartDataGenerated" type="horizontal-bar" />
|
||||
</va-card-content>
|
||||
</va-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="flex md12 xs12">
|
||||
<va-card v-if="lineChartDataGenerated" class="chart-widget">
|
||||
<va-card-title>{{ t('charts.lineChart') }}</va-card-title>
|
||||
<va-card-content>
|
||||
<va-chart :data="lineChartDataGenerated" type="line" />
|
||||
</va-card-content>
|
||||
</va-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="flex md6 xs12">
|
||||
<va-card v-if="pieChartDataGenerated" class="chart-widget">
|
||||
<va-card-title>{{ t('charts.pieChart') }}</va-card-title>
|
||||
<va-card-content>
|
||||
<va-chart :data="pieChartDataGenerated" type="pie" />
|
||||
</va-card-content>
|
||||
</va-card>
|
||||
</div>
|
||||
|
||||
<div class="flex md6 xs12">
|
||||
<va-card v-if="doughnutChartDataGenerated" class="chart-widget">
|
||||
<va-card-title>{{ t('charts.donutChart') }}</va-card-title>
|
||||
<va-card-content>
|
||||
<va-chart :data="doughnutChartDataGenerated" type="doughnut" />
|
||||
</va-card-content>
|
||||
</va-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="flex md12 xs12">
|
||||
<va-card v-if="bubbleChartDataGenerated" class="chart-widget">
|
||||
<va-card-title>{{ t('charts.bubbleChart') }}</va-card-title>
|
||||
<va-card-content>
|
||||
<va-chart :data="bubbleChartDataGenerated" type="bubble" />
|
||||
</va-card-content>
|
||||
</va-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useChartData } from '../../../../data/charts/composables/useChartData'
|
||||
import {
|
||||
lineChartData,
|
||||
doughnutChartData,
|
||||
bubbleChartData,
|
||||
pieChartData,
|
||||
barChartData,
|
||||
horizontalBarChartData,
|
||||
} from '../../../../data/charts'
|
||||
import VaChart from '../../../../components/va-charts/VaChart.vue'
|
||||
|
||||
const lineChartDataGenerated = useChartData(lineChartData, 0.7)
|
||||
const doughnutChartDataGenerated = useChartData(doughnutChartData)
|
||||
const bubbleChartDataGenerated = useChartData(bubbleChartData, 0.9)
|
||||
const pieChartDataGenerated = useChartData(pieChartData)
|
||||
const barChartDataGenerated = useChartData(barChartData)
|
||||
const horizontalBarChartDataGenerated = useChartData(horizontalBarChartData)
|
||||
|
||||
const { t } = useI18n()
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.chart-widget {
|
||||
.va-card__content {
|
||||
height: 450px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,31 +0,0 @@
|
||||
<template>
|
||||
<div class="progress-bars">
|
||||
<div class="row mb-4">
|
||||
<div class="flex xs12 mb-12">
|
||||
<horizontal-bars />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-4">
|
||||
<div class="flex xs12">
|
||||
<bars-state />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-4">
|
||||
<div class="flex xs12">
|
||||
<circle-bars />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="flex xs12">
|
||||
<colorful-bars />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import HorizontalBars from './Widgets/HorizontalBars.vue'
|
||||
import CircleBars from './Widgets/CircleBars.vue'
|
||||
import BarsState from './Widgets/BarsState.vue'
|
||||
import ColorfulBars from './Widgets/ColorfulBars.vue'
|
||||
</script>
|
||||
@@ -1,60 +0,0 @@
|
||||
<template>
|
||||
<va-card class="bars-state">
|
||||
<va-card-title>
|
||||
{{ t('progressBars.state') }}
|
||||
</va-card-title>
|
||||
<va-card-content class="row">
|
||||
<div class="flex md4 xs12">
|
||||
<va-progress-bar :model-value="value2">66%</va-progress-bar>
|
||||
</div>
|
||||
<div class="flex md4 xs12">
|
||||
<va-progress-bar :model-value="bufferValues.value" :buffer="bufferValues.buffer">Buffering </va-progress-bar>
|
||||
</div>
|
||||
<div class="flex md4 xs12">
|
||||
<va-progress-bar indeterminate>Loading</va-progress-bar>
|
||||
</div>
|
||||
</va-card-content>
|
||||
</va-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
export default {
|
||||
name: 'BarsState',
|
||||
setup() {
|
||||
const { t } = useI18n()
|
||||
return { t }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value2: 66,
|
||||
bufferValues: {
|
||||
value: 0,
|
||||
buffer: 0,
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.animateValue()
|
||||
this.animateBufferValues()
|
||||
},
|
||||
methods: {
|
||||
animateValue() {
|
||||
setTimeout(() => {
|
||||
this.value = 100
|
||||
})
|
||||
},
|
||||
animateBufferValues() {
|
||||
const interval = setInterval(() => {
|
||||
this.bufferValues.value += 2 + Math.floor(Math.random() * 2)
|
||||
this.bufferValues.buffer += 2 + Math.floor(Math.random() * 4)
|
||||
|
||||
if (this.bufferValues.value >= 100) {
|
||||
clearInterval(interval)
|
||||
}
|
||||
}, 400)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -1,40 +0,0 @@
|
||||
<template>
|
||||
<va-card class="circle-bars">
|
||||
<va-card-title>
|
||||
{{ t('progressBars.circle') }}
|
||||
</va-card-title>
|
||||
<va-card-content class="row">
|
||||
<div v-for="n in 10" :key="n" class="flex xs4 sm2 lg1">
|
||||
<div class="d-flex justify-center">
|
||||
<div>
|
||||
<va-progress-circle :model-value="(value * n) / 10">{{ (value * n) / 10 }}%</va-progress-circle>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex xs4 sm2 lg1">
|
||||
<div class="d-flex justify-center">
|
||||
<div>
|
||||
<va-progress-circle indeterminate />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</va-card-content>
|
||||
</va-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const value = ref(0)
|
||||
|
||||
onMounted(animateValue)
|
||||
|
||||
function animateValue() {
|
||||
setTimeout(() => {
|
||||
value.value = 100
|
||||
})
|
||||
}
|
||||
</script>
|
||||
@@ -1,35 +0,0 @@
|
||||
<template>
|
||||
<va-card class="colorful-bars progress-bar-widget">
|
||||
<va-card-title> {{ t('progressBars.colors') }} </va-card-title>
|
||||
<va-card-content class="row">
|
||||
<div v-for="n in 6" :key="`pb-${n}`" class="flex md4 xs12">
|
||||
<va-progress-bar :model-value="(value * n) / 6" :color="colors[n - 1]">
|
||||
{{ colors[n - 1] }}
|
||||
</va-progress-bar>
|
||||
</div>
|
||||
<div v-for="n in 6" :key="`pc-${n}`" class="flex md2 xs6">
|
||||
<va-progress-circle class="ma-auto" :model-value="(value * n) / 6" :color="colors[n - 1]">
|
||||
<span style="font-size: 0.625rem">
|
||||
{{ colors[n - 1] }}
|
||||
</span>
|
||||
</va-progress-circle>
|
||||
</div>
|
||||
</va-card-content>
|
||||
</va-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const value = ref(0)
|
||||
const colors = ref(['danger', 'success', 'info', 'secondary', 'warning', 'textDark'])
|
||||
|
||||
onMounted(animateValue)
|
||||
|
||||
function animateValue() {
|
||||
setTimeout(() => (value.value = 100))
|
||||
}
|
||||
</script>
|
||||
@@ -1,29 +0,0 @@
|
||||
<template>
|
||||
<va-card class="horizontal-bars">
|
||||
<va-card-title>
|
||||
{{ t('progressBars.horizontal') }}
|
||||
</va-card-title>
|
||||
<va-card-content class="row">
|
||||
<div class="flex md4 xs12">
|
||||
<va-progress-bar :model-value="value / 3" />
|
||||
</div>
|
||||
<div class="flex md4 xs12">
|
||||
<va-progress-bar :model-value="value2" />
|
||||
</div>
|
||||
<div class="flex md4 xs12">
|
||||
<va-progress-bar :model-value="value3" />
|
||||
</div>
|
||||
</va-card-content>
|
||||
</va-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const value = ref(0)
|
||||
const value2 = ref(66)
|
||||
const value3 = ref(100)
|
||||
</script>
|
||||
@@ -1,38 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<data-table-actions class="mb-4" />
|
||||
<data-table-sorting-pagination class="mb-4" />
|
||||
<data-table-filter class="mb-4" />
|
||||
<data-table-infinite-scroll class="mb-4" />
|
||||
<data-table-select class="mb-4" />
|
||||
<data-table-server-pagination class="mb-4" />
|
||||
<data-table-empty class="mb-4" />
|
||||
<data-table-loading />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DataTableActions from './scenarios/DataTableActions.vue'
|
||||
import DataTableSortingPagination from './scenarios/DataTableSortingPagination.vue'
|
||||
import DataTableFilter from './scenarios/DataTableFilter.vue'
|
||||
import DataTableInfiniteScroll from './scenarios/DataTableInfiniteScroll.vue'
|
||||
import DataTableSelect from './scenarios/DataTableSelect.vue'
|
||||
import DataTableServerPagination from './scenarios/DataTableServerPagination.vue'
|
||||
import DataTableEmpty from './scenarios/DataTableEmpty.vue'
|
||||
import DataTableLoading from './scenarios/DataTableLoading.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
DataTableActions,
|
||||
DataTableSortingPagination,
|
||||
DataTableFilter,
|
||||
DataTableInfiniteScroll,
|
||||
DataTableSelect,
|
||||
DataTableServerPagination,
|
||||
DataTableEmpty,
|
||||
DataTableLoading,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss"></style>
|
||||
@@ -1,386 +0,0 @@
|
||||
[
|
||||
{
|
||||
"id": "5d2c865e9a0bae79a6ef7cfa",
|
||||
"firstName": "Ashley",
|
||||
"lastName": "Mcdaniel",
|
||||
"fullName": "Ashley Mcdaniel",
|
||||
"email": "ashleymcdaniel@nebulean.com",
|
||||
"country": "Cayman Islands",
|
||||
"starred": true,
|
||||
"hasReport": false,
|
||||
"status": "warning",
|
||||
"checked": false,
|
||||
"trend": "down",
|
||||
"color": "warning",
|
||||
"graph": "M 5 20 C 10 5, 15 5, 30 30 S 20 20, 70 20",
|
||||
"graphColor": "#4ae387"
|
||||
},
|
||||
{
|
||||
"id": "5d2c865ec73341e16e5f2251",
|
||||
"firstName": "Sellers",
|
||||
"lastName": "Todd",
|
||||
"fullName": "Todd Sellers",
|
||||
"email": "sellerstodd@nebulean.com",
|
||||
"country": "Togo",
|
||||
"starred": false,
|
||||
"hasReport": false,
|
||||
"status": "info",
|
||||
"checked": false,
|
||||
"trend": "none",
|
||||
"color": "primary",
|
||||
"graph": "M 5 30 C 10 5, 30 10, 40 30 S 30 30, 90 40",
|
||||
"graphColor": "#e34a4a"
|
||||
},
|
||||
{
|
||||
"id": "5d2c865e38800c5ce28f2f6b",
|
||||
"firstName": "Sherman",
|
||||
"lastName": "Knowles",
|
||||
"fullName": "Sherman Knowles",
|
||||
"email": "shermanknowles@nebulean.com",
|
||||
"country": "Central African Republic",
|
||||
"starred": true,
|
||||
"hasReport": true,
|
||||
"status": "warning",
|
||||
"checked": false,
|
||||
"trend": "none",
|
||||
"color": "warning",
|
||||
"graph": "M 5 20 C 10 5, 15 5, 30 30 S 20 20, 70 20",
|
||||
"graphColor": "#4ae387"
|
||||
},
|
||||
{
|
||||
"id": "5d2c865e957cd150b82e17a6",
|
||||
"firstName": "Vasquez",
|
||||
"lastName": "Lawson",
|
||||
"fullName": "Vasquez Lawson",
|
||||
"email": "vasquezlawson@nebulean.com",
|
||||
"country": "Bouvet Island",
|
||||
"starred": true,
|
||||
"hasReport": false,
|
||||
"status": "info",
|
||||
"checked": false,
|
||||
"trend": "down",
|
||||
"color": "warning",
|
||||
"graph": "M 5 30 C 10 5, 30 10, 40 30 S 30 30, 90 40",
|
||||
"graphColor": "#e34a4a"
|
||||
},
|
||||
{
|
||||
"id": "5d2c865e9194dbe2faf99227",
|
||||
"firstName": "April",
|
||||
"lastName": "Sykes",
|
||||
"fullName": "April Sykes",
|
||||
"email": "aprilsykes@nebulean.com",
|
||||
"country": "Saint Vincent and The Grenadines",
|
||||
"starred": false,
|
||||
"hasReport": true,
|
||||
"status": "warning",
|
||||
"checked": false,
|
||||
"trend": "down",
|
||||
"color": "primary",
|
||||
"graph": "M 5 20 C 10 5, 15 5, 30 30 S 20 20, 70 20",
|
||||
"graphColor": "#4ae387"
|
||||
},
|
||||
{
|
||||
"id": "5d2c865e1ed74d83f6b26934",
|
||||
"firstName": "Hodges",
|
||||
"lastName": "Garrison",
|
||||
"fullName": "Hodges Garrison",
|
||||
"email": "hodgesgarrison@nebulean.com",
|
||||
"country": "Zimbabwe",
|
||||
"starred": true,
|
||||
"hasReport": false,
|
||||
"status": "info",
|
||||
"checked": false,
|
||||
"trend": "none",
|
||||
"color": "info",
|
||||
"graph": "M 5 30 C 10 5, 30 10, 40 30 S 30 30, 90 40",
|
||||
"graphColor": "#e34a4a"
|
||||
},
|
||||
{
|
||||
"id": "5d2c865e0ef31380880c3de5",
|
||||
"firstName": "Therese",
|
||||
"lastName": "Stokes",
|
||||
"fullName": "Therese Stokes",
|
||||
"email": "theresestokes@nebulean.com",
|
||||
"country": "Mali",
|
||||
"starred": true,
|
||||
"hasReport": false,
|
||||
"status": "info",
|
||||
"checked": false,
|
||||
"trend": "up",
|
||||
"color": "warning",
|
||||
"graph": "M 5 20 C 10 5, 15 5, 30 30 S 20 20, 70 20",
|
||||
"graphColor": "#4ae387"
|
||||
},
|
||||
{
|
||||
"id": "5d2c865e4b5ab4727e5c8b69",
|
||||
"firstName": "Goodwin",
|
||||
"lastName": "Brewer",
|
||||
"fullName": "Goodwin Brewer",
|
||||
"email": "goodwinbrewer@nebulean.com",
|
||||
"country": "Iraq",
|
||||
"starred": true,
|
||||
"hasReport": true,
|
||||
"status": "info",
|
||||
"checked": false,
|
||||
"trend": "none",
|
||||
"color": "info",
|
||||
"graph": "M 5 30 C 10 5, 30 10, 40 30 S 30 30, 90 40",
|
||||
"graphColor": "#e34a4a"
|
||||
},
|
||||
{
|
||||
"id": "5d2c865e4c4d675787cfe1c0",
|
||||
"firstName": "Gomez",
|
||||
"lastName": "Wise",
|
||||
"fullName": "Gomez Wise",
|
||||
"email": "gomezwise@nebulean.com",
|
||||
"country": "Portugal",
|
||||
"starred": true,
|
||||
"hasReport": true,
|
||||
"status": "info",
|
||||
"checked": false,
|
||||
"trend": "none",
|
||||
"color": "primary",
|
||||
"graph": "M 5 30 C 10 5, 30 10, 40 30 S 30 30, 90 40",
|
||||
"graphColor": "#e34a4a"
|
||||
},
|
||||
{
|
||||
"id": "5d2c865e1017c3229017fc68",
|
||||
"firstName": "Laverne",
|
||||
"lastName": "Ayers",
|
||||
"fullName": "Laverne Ayers",
|
||||
"email": "laverneayers@nebulean.com",
|
||||
"country": "Micronesia",
|
||||
"starred": false,
|
||||
"hasReport": false,
|
||||
"status": "warning",
|
||||
"checked": false,
|
||||
"trend": "down",
|
||||
"color": "info",
|
||||
"graph": "M 5 20 C 10 5, 15 5, 30 30 S 20 20, 70 20",
|
||||
"graphColor": "#4ae387"
|
||||
},
|
||||
{
|
||||
"id": "5d2c865ee66676fd7464f8b9",
|
||||
"firstName": "Stewart",
|
||||
"lastName": "Leon",
|
||||
"fullName": "Stewart Leon",
|
||||
"email": "stewartleon@nebulean.com",
|
||||
"country": "Seychelles",
|
||||
"starred": true,
|
||||
"hasReport": false,
|
||||
"status": "info",
|
||||
"checked": false,
|
||||
"trend": "up",
|
||||
"color": "info",
|
||||
"graph": "M 5 30 C 10 5, 30 10, 40 30 S 30 30, 90 40",
|
||||
"graphColor": "#e34a4a"
|
||||
},
|
||||
{
|
||||
"id": "5d2c865e644d8acbed1e0e97",
|
||||
"firstName": "Lindsey",
|
||||
"lastName": "Hopkins",
|
||||
"fullName": "Lindsey Hopkins",
|
||||
"email": "lindseyhopkins@nebulean.com",
|
||||
"country": "Costa Rica",
|
||||
"starred": false,
|
||||
"hasReport": true,
|
||||
"status": "info",
|
||||
"checked": false,
|
||||
"trend": "up",
|
||||
"color": "primary",
|
||||
"graph": "M 5 20 C 10 5, 15 5, 30 30 S 20 20, 70 20",
|
||||
"graphColor": "#4ae387"
|
||||
},
|
||||
{
|
||||
"id": "5d2c865ef2b732c74dc3d6a2",
|
||||
"firstName": "Head",
|
||||
"lastName": "Lloyd",
|
||||
"fullName": "Head Lloyd",
|
||||
"email": "headlloyd@nebulean.com",
|
||||
"country": "Turkey",
|
||||
"starred": true,
|
||||
"hasReport": false,
|
||||
"status": "warning",
|
||||
"checked": false,
|
||||
"trend": "down",
|
||||
"color": "info",
|
||||
"graph": "M 5 30 C 10 5, 30 10, 40 30 S 30 30, 90 40",
|
||||
"graphColor": "#e34a4a"
|
||||
},
|
||||
{
|
||||
"id": "5d2c865e4ee4f09e92ead2e7",
|
||||
"firstName": "Fisher",
|
||||
"lastName": "Bradford",
|
||||
"fullName": "Fisher Bradford",
|
||||
"email": "fisherbradford@nebulean.com",
|
||||
"country": "Ethiopia",
|
||||
"starred": true,
|
||||
"hasReport": true,
|
||||
"status": "info",
|
||||
"checked": false,
|
||||
"trend": "up",
|
||||
"color": "info",
|
||||
"graph": "M 5 20 C 10 5, 15 5, 30 30 S 20 20, 70 20",
|
||||
"graphColor": "#4ae387"
|
||||
},
|
||||
{
|
||||
"id": "5d2c865e88d46a9e9049a549",
|
||||
"firstName": "Aurora",
|
||||
"lastName": "Bird",
|
||||
"fullName": "Aurora Bird",
|
||||
"email": "aurorabird@nebulean.com",
|
||||
"country": "Burkina Faso",
|
||||
"starred": false,
|
||||
"hasReport": true,
|
||||
"status": "warning",
|
||||
"checked": false,
|
||||
"trend": "up",
|
||||
"color": "info",
|
||||
"graph": "M 5 30 C 10 5, 30 10, 40 30 S 30 30, 90 40",
|
||||
"graphColor": "#e34a4a"
|
||||
},
|
||||
{
|
||||
"id": "5d2c865e44bf14ea96d6e752",
|
||||
"firstName": "Bonita",
|
||||
"lastName": "Shields",
|
||||
"fullName": "Bonita Shields",
|
||||
"email": "bonitashields@nebulean.com",
|
||||
"country": "Cote D'Ivoire (Ivory Coast)",
|
||||
"starred": true,
|
||||
"hasReport": true,
|
||||
"status": "warning",
|
||||
"checked": false,
|
||||
"trend": "down",
|
||||
"color": "primary",
|
||||
"graph": "M 5 20 C 10 5, 15 5, 30 30 S 20 20, 70 20",
|
||||
"graphColor": "#4ae387"
|
||||
},
|
||||
{
|
||||
"id": "5d2c865e2a8be26f6ac4369c",
|
||||
"firstName": "Ethel",
|
||||
"lastName": "Underwood",
|
||||
"fullName": "Ethel Underwood",
|
||||
"email": "ethelunderwood@nebulean.com",
|
||||
"country": "Vanuatu",
|
||||
"starred": false,
|
||||
"hasReport": false,
|
||||
"status": "warning",
|
||||
"checked": false,
|
||||
"trend": "down",
|
||||
"color": "info",
|
||||
"graph": "M 5 30 C 10 5, 30 10, 40 30 S 30 30, 90 40",
|
||||
"graphColor": "#e34a4a"
|
||||
},
|
||||
{
|
||||
"id": "5d2c865e5e0aea40111c37f8",
|
||||
"firstName": "Parker",
|
||||
"lastName": "May",
|
||||
"fullName": "Parker May",
|
||||
"email": "parkermay@nebulean.com",
|
||||
"country": "Pakistan",
|
||||
"starred": true,
|
||||
"hasReport": false,
|
||||
"status": "warning",
|
||||
"checked": false,
|
||||
"trend": "down",
|
||||
"color": "warning",
|
||||
"graph": "M 5 20 C 10 5, 15 5, 30 30 S 20 20, 70 20",
|
||||
"graphColor": "#4ae387"
|
||||
},
|
||||
{
|
||||
"id": "5d2c865e7e0c05ecc2d0c186",
|
||||
"firstName": "Hillary",
|
||||
"lastName": "Waters",
|
||||
"fullName": "Hillary Waters",
|
||||
"email": "hillarywaters@nebulean.com",
|
||||
"country": "Comoros",
|
||||
"starred": true,
|
||||
"hasReport": true,
|
||||
"status": "info",
|
||||
"checked": false,
|
||||
"trend": "down",
|
||||
"color": "primary",
|
||||
"graph": "M 5 30 C 10 5, 30 10, 40 30 S 30 30, 90 40",
|
||||
"graphColor": "#e34a4a"
|
||||
},
|
||||
{
|
||||
"id": "5d2c865e80a72eeda016b169",
|
||||
"firstName": "Raquel",
|
||||
"lastName": "Ferrell",
|
||||
"fullName": "Raquel Ferrell",
|
||||
"email": "raquelferrell@nebulean.com",
|
||||
"country": "China",
|
||||
"starred": false,
|
||||
"hasReport": false,
|
||||
"status": "warning",
|
||||
"checked": false,
|
||||
"trend": "down",
|
||||
"color": "info",
|
||||
"graph": "M 5 20 C 10 5, 15 5, 30 30 S 20 20, 70 20",
|
||||
"graphColor": "#4ae387"
|
||||
},
|
||||
{
|
||||
"id": "5d2c865eafacadd378add679",
|
||||
"firstName": "Pickett",
|
||||
"lastName": "Page",
|
||||
"fullName": "Pickett Page",
|
||||
"email": "pickettpage@nebulean.com",
|
||||
"country": "Bermuda",
|
||||
"starred": true,
|
||||
"hasReport": false,
|
||||
"status": "info",
|
||||
"checked": false,
|
||||
"trend": "up",
|
||||
"color": "info",
|
||||
"graph": "M 5 30 C 10 5, 30 10, 40 30 S 30 30, 90 40",
|
||||
"graphColor": "#e34a4a"
|
||||
},
|
||||
{
|
||||
"id": "5d2c865e772b1a75bb0a07b5",
|
||||
"firstName": "Alyson",
|
||||
"lastName": "Bailey",
|
||||
"fullName": "Alyson Bailey",
|
||||
"email": "alysonbailey@nebulean.com",
|
||||
"country": "United Arab Emirates",
|
||||
"starred": false,
|
||||
"hasReport": false,
|
||||
"status": "warning",
|
||||
"checked": false,
|
||||
"trend": "up",
|
||||
"color": "warning",
|
||||
"graph": "M 5 20 C 10 5, 15 5, 30 30 S 20 20, 70 20",
|
||||
"graphColor": "#4ae387"
|
||||
},
|
||||
{
|
||||
"id": "5d2c865e137c19a76b56210c",
|
||||
"firstName": "Farley",
|
||||
"lastName": "Meyers",
|
||||
"fullName": "Farley Meyers",
|
||||
"email": "farleymeyers@nebulean.com",
|
||||
"country": "Christmas Island",
|
||||
"starred": false,
|
||||
"hasReport": false,
|
||||
"status": "info",
|
||||
"checked": false,
|
||||
"trend": "up",
|
||||
"color": "warning",
|
||||
"graph": "M 5 30 C 10 5, 30 10, 40 30 S 30 30, 90 40",
|
||||
"graphColor": "#e34a4a"
|
||||
},
|
||||
{
|
||||
"id": "5d2c865eb0ba37a27aa9afe0",
|
||||
"firstName": "Hinton",
|
||||
"lastName": "Avery",
|
||||
"fullName": "Hinton Avery",
|
||||
"email": "hintonavery@nebulean.com",
|
||||
"country": "Liechtenstein",
|
||||
"starred": false,
|
||||
"hasReport": true,
|
||||
"status": "info",
|
||||
"checked": false,
|
||||
"trend": "up",
|
||||
"color": "info",
|
||||
"graph": "M 5 30 C 10 5, 30 10, 40 30 S 30 30, 90 40",
|
||||
"graphColor": "#e34a4a"
|
||||
}
|
||||
]
|
||||
@@ -1,69 +0,0 @@
|
||||
<template>
|
||||
<va-card :title="t('tables.labelsActions')">
|
||||
<va-data-table :fields="fields" :data="users" no-pagination>
|
||||
<template #marker="props">
|
||||
<va-icon name="fa fa-circle" :color="props.rowData.color" size="8px" />
|
||||
</template>
|
||||
|
||||
<template #actions="props">
|
||||
<va-button preset="plain" small color="gray" class="ma-0" @click="edit(props.rowData)">
|
||||
{{ t('tables.edit') }}
|
||||
</va-button>
|
||||
|
||||
<va-button preset="plain" small color="danger" class="ma-0" @click="remove(props.rowData)">
|
||||
{{ t('tables.delete') }}
|
||||
</va-button>
|
||||
</template>
|
||||
</va-data-table>
|
||||
</va-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import users from '../data/users.json'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
users: users.slice(0, 6),
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
fields() {
|
||||
return [
|
||||
{
|
||||
name: '__slot:marker',
|
||||
width: '30px',
|
||||
dataClass: 'text-center',
|
||||
},
|
||||
{
|
||||
name: 'fullName',
|
||||
title: this.t('tables.headings.name'),
|
||||
},
|
||||
{
|
||||
name: 'email',
|
||||
title: this.t('tables.headings.email'),
|
||||
},
|
||||
{
|
||||
name: 'country',
|
||||
title: this.t('tables.headings.country'),
|
||||
},
|
||||
{
|
||||
name: '__slot:actions',
|
||||
dataClass: 'va-text-right',
|
||||
},
|
||||
]
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
edit(user) {
|
||||
alert('Edit User: ' + JSON.stringify(user))
|
||||
},
|
||||
remove(user) {
|
||||
const idx = this.users.findIndex((u) => u.id === user.id)
|
||||
this.users.splice(idx, 1)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss"></style>
|
||||
@@ -1,35 +0,0 @@
|
||||
<template>
|
||||
<va-card :title="t('tables.emptyTable')">
|
||||
<va-data-table :fields="fields" :data="data" :no-data-label="t('tables.noReport')" no-pagination />
|
||||
</va-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
data: [],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
fields() {
|
||||
return [
|
||||
{
|
||||
name: 'fullName',
|
||||
title: this.t('tables.headings.name'),
|
||||
},
|
||||
{
|
||||
name: 'email',
|
||||
title: this.t('tables.headings.email'),
|
||||
},
|
||||
{
|
||||
name: 'country',
|
||||
title: this.t('tables.headings.country'),
|
||||
},
|
||||
]
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss"></style>
|
||||
@@ -1,127 +0,0 @@
|
||||
<template>
|
||||
<va-card :title="t('tables.searchTrendsBadges')">
|
||||
<div class="row align--center">
|
||||
<div class="flex xs12 md6">
|
||||
<va-input :value="term" :placeholder="t('tables.searchByName')" removable @input="search">
|
||||
<template #prepend>
|
||||
<va-icon name="search" />
|
||||
</template>
|
||||
</va-input>
|
||||
</div>
|
||||
|
||||
<div class="flex xs12 md3 offset--md3">
|
||||
<va-select v-model="perPage" :label="t('tables.perPage')" :options="perPageOptions" no-clear />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<va-data-table
|
||||
:fields="fields"
|
||||
:data="filteredData"
|
||||
:per-page="parseInt(perPage)"
|
||||
clickable
|
||||
@row-clicked="showUser"
|
||||
>
|
||||
<template #trend="props">
|
||||
<va-icon :name="getTrendIcon(props.rowData)" :color="getTrendColor(props.rowData)" />
|
||||
</template>
|
||||
|
||||
<template #status="props">
|
||||
<va-badge :color="props.rowData.color">
|
||||
{{ props.rowData.status }}
|
||||
</va-badge>
|
||||
</template>
|
||||
|
||||
<template #actions="props">
|
||||
<va-button v-if="props.rowData.hasReport" small color="danger" class="ma-0">
|
||||
{{ t('tables.report') }}
|
||||
</va-button>
|
||||
</template>
|
||||
</va-data-table>
|
||||
</va-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { debounce } from 'lodash'
|
||||
import users from '../data/users.json'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
term: null,
|
||||
perPage: '6',
|
||||
perPageOptions: ['4', '6', '10', '20'],
|
||||
users: users,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
fields() {
|
||||
return [
|
||||
{
|
||||
name: '__slot:trend',
|
||||
width: '30px',
|
||||
height: '45px',
|
||||
dataClass: 'text-center',
|
||||
},
|
||||
{
|
||||
name: 'fullName',
|
||||
title: this.t('tables.headings.name'),
|
||||
width: '30%',
|
||||
},
|
||||
{
|
||||
name: '__slot:status',
|
||||
title: this.t('tables.headings.status'),
|
||||
width: '20%',
|
||||
},
|
||||
{
|
||||
name: 'email',
|
||||
title: this.t('tables.headings.email'),
|
||||
width: '30%',
|
||||
},
|
||||
{
|
||||
name: '__slot:actions',
|
||||
dataClass: 'va-text-right',
|
||||
},
|
||||
]
|
||||
},
|
||||
filteredData() {
|
||||
if (!this.term || this.term.length < 1) {
|
||||
return this.users
|
||||
}
|
||||
|
||||
return this.users.filter((item) => {
|
||||
return item.fullName.toLowerCase().startsWith(this.term.toLowerCase())
|
||||
})
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
getTrendIcon(user) {
|
||||
if (user.trend === 'up') {
|
||||
return 'fa fa-caret-up'
|
||||
}
|
||||
|
||||
if (user.trend === 'down') {
|
||||
return 'fa fa-caret-down'
|
||||
}
|
||||
|
||||
return 'fa fa-minus'
|
||||
},
|
||||
getTrendColor(user) {
|
||||
if (user.trend === 'up') {
|
||||
return 'primary'
|
||||
}
|
||||
|
||||
if (user.trend === 'down') {
|
||||
return 'danger'
|
||||
}
|
||||
|
||||
return 'gray'
|
||||
},
|
||||
showUser(user) {
|
||||
alert(JSON.stringify(user))
|
||||
},
|
||||
search: debounce(function (term) {
|
||||
this.term = term
|
||||
}, 400),
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -1,99 +0,0 @@
|
||||
<!--<template>-->
|
||||
<!-- <va-card :title="t('tables.infiniteScroll')">-->
|
||||
<!-- <div ref="scrollable" class="data-table-infinite-scroll--container" @scroll="onScroll">-->
|
||||
<!-- <va-data-table :fields="fields" :data="users" api-mode no-pagination>-->
|
||||
<!-- <template #marker="props">-->
|
||||
<!-- <va-icon name="fa fa-circle" :color="props.rowData.color" size="8px" />-->
|
||||
<!-- </template>-->
|
||||
<!-- </va-data-table>-->
|
||||
|
||||
<!-- <div class="justify-center ma-3">-->
|
||||
<!-- <spring-spinner v-if="loading" :animation-duration="2000" :size="60" :color="theme.variables.primary" />-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </va-card>-->
|
||||
<!--</template>-->
|
||||
|
||||
<!--<script>-->
|
||||
<!-- // import { SpringSpinner } from 'epic-spinners'-->
|
||||
<!-- import users from '../data/users.json'-->
|
||||
<!-- import { useGlobalConfig } from 'vuestic-ui'-->
|
||||
<!-- import { defineComponent } from 'vue'-->
|
||||
|
||||
<!-- export default {-->
|
||||
<!-- components: {-->
|
||||
<!-- SpringSpinner: defineComponent({ template: '<div>LOADER PLACEHOLDER</div>' }),-->
|
||||
<!-- },-->
|
||||
<!-- data() {-->
|
||||
<!-- return {-->
|
||||
<!-- users: [],-->
|
||||
<!-- loading: false,-->
|
||||
<!-- offset: 0,-->
|
||||
<!-- }-->
|
||||
<!-- },-->
|
||||
<!-- computed: {-->
|
||||
<!-- theme() {-->
|
||||
<!-- return useGlobalConfig().getGlobalConfig().colors-->
|
||||
<!-- },-->
|
||||
<!-- fields() {-->
|
||||
<!-- return [-->
|
||||
<!-- {-->
|
||||
<!-- name: '__slot:marker',-->
|
||||
<!-- width: '30px',-->
|
||||
<!-- dataClass: 'text-center',-->
|
||||
<!-- },-->
|
||||
<!-- {-->
|
||||
<!-- name: 'fullName',-->
|
||||
<!-- title: this.t('tables.headings.name'),-->
|
||||
<!-- },-->
|
||||
<!-- {-->
|
||||
<!-- name: 'email',-->
|
||||
<!-- title: this.t('tables.headings.email'),-->
|
||||
<!-- },-->
|
||||
<!-- {-->
|
||||
<!-- name: 'country',-->
|
||||
<!-- title: this.t('tables.headings.country'),-->
|
||||
<!-- },-->
|
||||
<!-- ]-->
|
||||
<!-- },-->
|
||||
<!-- },-->
|
||||
<!-- created() {-->
|
||||
<!-- this.loadMore()-->
|
||||
<!-- },-->
|
||||
<!-- methods: {-->
|
||||
<!-- loadMore() {-->
|
||||
<!-- this.loading = true-->
|
||||
|
||||
<!-- this.readUsers().then((users) => {-->
|
||||
<!-- this.users = this.users.concat(users)-->
|
||||
<!-- this.loading = false-->
|
||||
<!-- })-->
|
||||
<!-- },-->
|
||||
<!-- readUsers() {-->
|
||||
<!-- return new Promise((resolve) => {-->
|
||||
<!-- setTimeout(() => {-->
|
||||
<!-- resolve(users.slice(0, 10))-->
|
||||
<!-- }, 600)-->
|
||||
<!-- })-->
|
||||
<!-- },-->
|
||||
<!-- onScroll(e) {-->
|
||||
<!-- if (this.loading) {-->
|
||||
<!-- return-->
|
||||
<!-- }-->
|
||||
|
||||
<!-- const { target } = e-->
|
||||
|
||||
<!-- if (target.offsetHeight + target.scrollTop === target.scrollHeight) {-->
|
||||
<!-- this.loadMore()-->
|
||||
<!-- }-->
|
||||
<!-- },-->
|
||||
<!-- },-->
|
||||
<!-- }-->
|
||||
<!--</script>-->
|
||||
|
||||
<!--<style lang="scss">-->
|
||||
<!-- .data-table-infinite-scroll--container {-->
|
||||
<!-- height: 300px;-->
|
||||
<!-- overflow-y: auto;-->
|
||||
<!-- }-->
|
||||
<!--</style>-->
|
||||
@@ -1,37 +0,0 @@
|
||||
<template>
|
||||
<va-card :title="t('tables.loading')">
|
||||
<va-data-table :fields="fields" :data="users" loading />
|
||||
</va-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import users from '../data/users.json'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
users: users,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
fields() {
|
||||
return [
|
||||
{
|
||||
name: 'fullName',
|
||||
title: this.t('tables.headings.name'),
|
||||
},
|
||||
{
|
||||
name: 'email',
|
||||
title: this.t('tables.headings.email'),
|
||||
},
|
||||
{
|
||||
name: 'country',
|
||||
title: this.t('tables.headings.country'),
|
||||
},
|
||||
]
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss"></style>
|
||||
@@ -1,66 +0,0 @@
|
||||
<template>
|
||||
<va-card :title="t('tables.selectable')">
|
||||
<va-data-table :fields="fields" :data="users" :per-page="5">
|
||||
<template #select="props">
|
||||
<va-checkbox :value="props.rowData.checked" @input="select(props.rowData)" />
|
||||
</template>
|
||||
|
||||
<template #graph="props">
|
||||
<svg width="100" height="40" xmlns="http://www.w3.org/2000/svg">
|
||||
<path :d="props.rowData.graph" :stroke="props.rowData.graphColor" fill="transparent" />
|
||||
</svg>
|
||||
</template>
|
||||
</va-data-table>
|
||||
|
||||
<p v-if="selected.length">{{ t('tables.selected') }}: {{ selected.map((user) => user.fullName).join(', ') }}.</p>
|
||||
</va-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import users from '../data/users.json'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
users: users.slice(),
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
fields() {
|
||||
return [
|
||||
{
|
||||
name: '__slot:select',
|
||||
},
|
||||
{
|
||||
name: 'fullName',
|
||||
title: this.t('tables.headings.name'),
|
||||
width: '20%',
|
||||
},
|
||||
{
|
||||
name: 'email',
|
||||
title: this.t('tables.headings.email'),
|
||||
width: '30%',
|
||||
},
|
||||
{
|
||||
name: 'country',
|
||||
title: this.t('tables.headings.country'),
|
||||
width: '30%',
|
||||
},
|
||||
{
|
||||
name: '__slot:graph',
|
||||
dataClass: 'va-text-right',
|
||||
},
|
||||
]
|
||||
},
|
||||
selected() {
|
||||
return this.users.filter((user) => user.checked)
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
select(user) {
|
||||
const idx = this.users.findIndex((u) => u.id === user.id)
|
||||
this.users[idx].checked = !this.users[idx].checked
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -1,82 +0,0 @@
|
||||
<template>
|
||||
<va-card :title="t('tables.serverSidePagination')">
|
||||
<va-data-table
|
||||
:fields="fields"
|
||||
:data="items"
|
||||
:loading="loading"
|
||||
:total-pages="totalPages"
|
||||
api-mode
|
||||
@page-selected="readItems"
|
||||
>
|
||||
<template #avatar="props">
|
||||
<img :src="props.rowData.avatar" class="data-table-server-pagination---avatar" />
|
||||
</template>
|
||||
</va-data-table>
|
||||
</va-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
perPage: 3,
|
||||
totalPages: 0,
|
||||
items: [],
|
||||
loading: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
fields() {
|
||||
return [
|
||||
{
|
||||
name: '__slot:avatar',
|
||||
width: '60px',
|
||||
},
|
||||
{
|
||||
name: 'first_name',
|
||||
title: this.t('tables.headings.firstName'),
|
||||
width: '20%',
|
||||
},
|
||||
{
|
||||
name: 'last_name',
|
||||
title: this.t('tables.headings.lastName'),
|
||||
width: '20%',
|
||||
},
|
||||
{
|
||||
name: 'email',
|
||||
title: this.t('tables.headings.email'),
|
||||
},
|
||||
]
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.readItems()
|
||||
},
|
||||
methods: {
|
||||
readItems(page = 0) {
|
||||
this.loading = true
|
||||
|
||||
const params = {
|
||||
per_page: this.perPage,
|
||||
page: page,
|
||||
}
|
||||
|
||||
axios.get('https://reqres.in/api/users', { params }).then((response) => {
|
||||
this.items = response.data.data
|
||||
this.totalPages = response.data.total_pages
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.data-table-server-pagination---avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
</style>
|
||||
@@ -1,79 +0,0 @@
|
||||
<template>
|
||||
<va-card :title="t('tables.sortingPaginationActionsAsIcons')">
|
||||
<va-data-table :fields="fields" :data="users" :per-page="5">
|
||||
<template #actions="props">
|
||||
<va-popover :message="getStarMessage(props.rowData)" placement="top">
|
||||
<va-button
|
||||
preset="plain"
|
||||
small
|
||||
:color="getStarColor(props.rowData)"
|
||||
icon="fa fa-star"
|
||||
@click="star(props.rowData)"
|
||||
/>
|
||||
</va-popover>
|
||||
|
||||
<va-popover :message="`${t('tables.edit')} ${props.rowData.fullName}`" placement="top">
|
||||
<va-button preset="plain" small color="gray" icon="fa fa-pencil" />
|
||||
</va-popover>
|
||||
|
||||
<va-popover :message="`${t('tables.delete')} ${props.rowData.fullName}`" placement="top">
|
||||
<va-button preset="plain" small color="gray" icon="fa fa-trash" />
|
||||
</va-popover>
|
||||
</template>
|
||||
</va-data-table>
|
||||
</va-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import users from '../data/users.json'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
users: users.slice(),
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
fields() {
|
||||
return [
|
||||
{
|
||||
name: 'fullName',
|
||||
title: this.t('tables.headings.name'),
|
||||
sortField: 'fullName',
|
||||
width: '25%',
|
||||
},
|
||||
{
|
||||
name: 'email',
|
||||
title: this.t('tables.headings.email'),
|
||||
width: '30%',
|
||||
},
|
||||
{
|
||||
name: 'country',
|
||||
title: this.t('tables.headings.country'),
|
||||
sortField: 'country',
|
||||
width: '25%',
|
||||
},
|
||||
{
|
||||
name: '__slot:actions',
|
||||
dataClass: 'va-text-right',
|
||||
},
|
||||
]
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
getStarMessage(user) {
|
||||
const actionName = user.starred ? this.t('tables.unstar') : this.t('tables.star')
|
||||
return `${actionName} ${user.fullName}`
|
||||
},
|
||||
getStarColor(user) {
|
||||
return user.starred ? 'primary' : 'gray'
|
||||
},
|
||||
star({ id }) {
|
||||
const i = this.users.findIndex((user) => user.id === id)
|
||||
this.users[i].starred = !this.users[i].starred
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss"></style>
|
||||
@@ -1,95 +0,0 @@
|
||||
<template>
|
||||
<div class="markup-tables flex">
|
||||
<va-card class="flex mb-4">
|
||||
<va-card-title>{{ t('tables.basic') }}</va-card-title>
|
||||
<va-card-content>
|
||||
<div class="table-wrapper">
|
||||
<table class="va-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{{ t('tables.headings.name') }}</th>
|
||||
<th>{{ t('tables.headings.email') }}</th>
|
||||
<th>{{ t('tables.headings.country') }}</th>
|
||||
<th>{{ t('tables.headings.status') }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr v-for="user in users" :key="user.id">
|
||||
<td>{{ user.name }}</td>
|
||||
<td>{{ user.email }}</td>
|
||||
<td>{{ user.country }}</td>
|
||||
<td>
|
||||
<va-badge :text="user.status" :color="getStatusColor(user.status)" />
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</va-card-content>
|
||||
</va-card>
|
||||
|
||||
<va-card>
|
||||
<va-card-title>{{ t('tables.stripedHoverable') }}</va-card-title>
|
||||
<va-card-content>
|
||||
<div class="table-wrapper">
|
||||
<table class="va-table va-table--striped va-table--hoverable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Email</th>
|
||||
<th>Country</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr v-for="user in users" :key="user.id">
|
||||
<td>{{ user.name }}</td>
|
||||
<td>{{ user.email }}</td>
|
||||
<td>{{ user.country }}</td>
|
||||
<td>
|
||||
<va-badge :text="user.status" :color="getStatusColor(user.status)" />
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</va-card-content>
|
||||
</va-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import data from '../../../../data/tables/markup-table/data.json'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const users = ref(data.slice(0, 8))
|
||||
|
||||
function getStatusColor(status: string) {
|
||||
if (status === 'paid') {
|
||||
return 'success'
|
||||
}
|
||||
|
||||
if (status === 'processing') {
|
||||
return 'info'
|
||||
}
|
||||
|
||||
return 'danger'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.markup-tables {
|
||||
.table-wrapper {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.va-table {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,303 +0,0 @@
|
||||
<template>
|
||||
<div class="buttons">
|
||||
<div class="row">
|
||||
<div class="flex xs12">
|
||||
<va-card class="larger-padding">
|
||||
<va-card-title>{{ t('buttons.types') }}</va-card-title>
|
||||
<va-card-content class="row">
|
||||
<div class="flex">
|
||||
<va-button class="mr-2 mb-2"> {{ t('buttons.default') }}</va-button>
|
||||
<va-button class="mr-2 mb-2" disabled> {{ t('buttons.disabled') }}</va-button>
|
||||
<va-button class="mr-2 mb-2" preset="outline" border-color="primary" color="primary">
|
||||
{{ t('buttons.outline') }}</va-button
|
||||
>
|
||||
<va-button class="mr-2 mb-2" preset="outline" border-color="primary" color="primary" disabled>
|
||||
{{ t('buttons.disabled') }}</va-button
|
||||
>
|
||||
<va-button class="mr-2 mb-2" preset="plain"> {{ t('buttons.flat') }}</va-button>
|
||||
<va-button class="mr-2 mb-2" preset="plain" disabled> {{ t('buttons.disabled') }}</va-button>
|
||||
</div>
|
||||
</va-card-content>
|
||||
</va-card>
|
||||
</div>
|
||||
|
||||
<div class="flex xs12">
|
||||
<va-card class="larger-padding">
|
||||
<va-card-title>{{ t('buttons.size') }}</va-card-title>
|
||||
<va-card-content class="row">
|
||||
<div class="flex">
|
||||
<va-button class="mr-2 mb-2" size="small"> {{ t('buttons.small') }}</va-button>
|
||||
<va-button class="mr-2 mb-2"> {{ t('buttons.normal') }}</va-button>
|
||||
<va-button class="mr-2 mb-2" size="large"> {{ t('buttons.large') }}</va-button>
|
||||
</div>
|
||||
</va-card-content>
|
||||
</va-card>
|
||||
</div>
|
||||
|
||||
<div class="flex xs12">
|
||||
<va-card class="larger-padding">
|
||||
<va-card-title>{{ t('buttons.tags') }}</va-card-title>
|
||||
<va-card-content class="row">
|
||||
<div class="flex">
|
||||
<va-button class="mr-2 mb-2"> {{ t('buttons.button') }}</va-button>
|
||||
<va-button class="mr-2 mb-2" href="http://epic-spinners.epicmax.co/">
|
||||
{{ t('buttons.a-link') }}
|
||||
</va-button>
|
||||
<va-button class="mr-2 mb-2" :to="{ name: 'charts' }">
|
||||
{{ t('buttons.router-link') }}
|
||||
</va-button>
|
||||
</div>
|
||||
</va-card-content>
|
||||
</va-card>
|
||||
</div>
|
||||
|
||||
<div class="flex xs12">
|
||||
<va-card class="larger-padding">
|
||||
<va-card-title>{{ t('buttons.advanced') }}</va-card-title>
|
||||
<va-card-content class="row">
|
||||
<div class="flex">
|
||||
<va-button class="mr-2 mb-2" icon="md_close"> {{ t('buttons.button') }}</va-button>
|
||||
<va-button class="mr-2 mb-2" icon-right="expand_more"> {{ t('buttons.button') }}</va-button>
|
||||
<va-button class="mr-2 mb-2" icon="md_close" icon-right="expand_more">
|
||||
{{ t('buttons.button') }}
|
||||
</va-button>
|
||||
<va-button class="mr-2 mb-2" icon="md_close" />
|
||||
</div>
|
||||
</va-card-content>
|
||||
</va-card>
|
||||
</div>
|
||||
|
||||
<div class="flex xs12">
|
||||
<va-card class="larger-padding">
|
||||
<va-card-title>{{ t('buttons.colors') }}</va-card-title>
|
||||
<va-card-content>
|
||||
<div class="row">
|
||||
<div class="flex">
|
||||
<va-button class="mr-2 mb-2" color="danger"> {{ t('buttons.danger') }}</va-button>
|
||||
<va-button class="mr-2 mb-2" color="info"> {{ t('buttons.info') }}</va-button>
|
||||
<va-button class="mr-2 mb-2" color="dark"> {{ t('buttons.dark') }}</va-button>
|
||||
<va-button class="mr-2 mb-2" color="warning"> {{ t('buttons.warning') }}</va-button>
|
||||
<va-button class="mr-2 mb-2" color="success"> {{ t('buttons.success') }}</va-button>
|
||||
<va-button class="mr-2 mb-2" color="gray"> {{ t('buttons.gray') }}</va-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="flex">
|
||||
<va-button class="mr-2 mb-2" preset="outline" border-color="danger" color="danger">
|
||||
{{ t('buttons.danger') }}</va-button
|
||||
>
|
||||
<va-button class="mr-2 mb-2" preset="outline" border-color="info" color="info">
|
||||
{{ t('buttons.info') }}</va-button
|
||||
>
|
||||
<va-button class="mr-2 mb-2" preset="outline" border-color="dark" color="dark">
|
||||
{{ t('buttons.dark') }}</va-button
|
||||
>
|
||||
<va-button class="mr-2 mb-2" preset="outline" border-color="warning" color="warning">
|
||||
{{ t('buttons.warning') }}</va-button
|
||||
>
|
||||
<va-button class="mr-2 mb-2" preset="outline" border-color="success" color="success">
|
||||
{{ t('buttons.success') }}</va-button
|
||||
>
|
||||
<va-button class="mr-2 mb-2" preset="outline" border-color="gray" color="gray">
|
||||
{{ t('buttons.gray') }}</va-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="flex">
|
||||
<va-button class="mr-2 mb-2" preset="plain" color="danger"> {{ t('buttons.danger') }}</va-button>
|
||||
<va-button class="mr-2 mb-2" preset="plain" color="info"> {{ t('buttons.info') }}</va-button>
|
||||
<va-button class="mr-2 mb-2" preset="plain" color="dark"> {{ t('buttons.dark') }}</va-button>
|
||||
<va-button class="mr-2 mb-2" preset="plain" color="warning"> {{ t('buttons.warning') }}</va-button>
|
||||
<va-button class="mr-2 mb-2" preset="plain" color="success"> {{ t('buttons.success') }}</va-button>
|
||||
<va-button class="mr-2 mb-2" preset="plain" color="gray"> {{ t('buttons.gray') }}</va-button>
|
||||
</div>
|
||||
</div>
|
||||
</va-card-content>
|
||||
</va-card>
|
||||
</div>
|
||||
|
||||
<div class="flex xs12">
|
||||
<va-card class="larger-padding">
|
||||
<va-card-title>{{ t('buttons.buttonGroups') }}</va-card-title>
|
||||
<va-card-content>
|
||||
<div class="row">
|
||||
<div class="flex xs12 xl6">
|
||||
<va-button-group color="secondary">
|
||||
<va-button size="large"> One</va-button>
|
||||
<va-button size="large"> Two</va-button>
|
||||
<va-button size="large"> Three</va-button>
|
||||
</va-button-group>
|
||||
</div>
|
||||
<div class="flex xs12 xl6">
|
||||
<va-button-group preset="outline" border-color="danger" color="danger">
|
||||
<va-button icon="maki-art-gallery">One</va-button>
|
||||
<va-button>Two</va-button>
|
||||
<va-button>Three</va-button>
|
||||
</va-button-group>
|
||||
</div>
|
||||
<div class="flex xs12 xl6">
|
||||
<va-button-group preset="plain" color="gray">
|
||||
<va-button icon="ion-ios-mail">One</va-button>
|
||||
<va-button icon="entypo-user">Two</va-button>
|
||||
<va-button icon="ion-ios-alarm">Three</va-button>
|
||||
</va-button-group>
|
||||
</div>
|
||||
<div class="flex xs12 xl6">
|
||||
<va-button-group color="dark">
|
||||
<va-button> One</va-button>
|
||||
<va-button> Two</va-button>
|
||||
<va-button> Three</va-button>
|
||||
<va-button icon="ion-ios-arrow-down" />
|
||||
</va-button-group>
|
||||
</div>
|
||||
<div class="flex xs12 xl6">
|
||||
<va-button-group preset="outline" border-color="primary" color="primary" size="large">
|
||||
<va-button>First</va-button>
|
||||
<va-button icon-right="glyphicon-pencil">Second</va-button>
|
||||
<va-button>Third</va-button>
|
||||
</va-button-group>
|
||||
</div>
|
||||
<div class="flex xs12 xl6">
|
||||
<va-button-group preset="plain" size="small" color="warning">
|
||||
<va-button icon="glyphicon-envelope" />
|
||||
<va-button icon="entypo-user" />
|
||||
<va-button icon="ion-ios-alarm" />
|
||||
</va-button-group>
|
||||
</div>
|
||||
</div>
|
||||
</va-card-content>
|
||||
</va-card>
|
||||
</div>
|
||||
|
||||
<div class="flex xs12">
|
||||
<va-card class="larger-padding">
|
||||
<va-card-title>{{ t('buttons.buttonToggles') }}</va-card-title>
|
||||
<va-card-content>
|
||||
<div class="row">
|
||||
<div class="flex xs12 lg6">
|
||||
<va-button-toggle v-model="model" :options="options" />
|
||||
</div>
|
||||
<div class="flex xs12 lg6">
|
||||
<va-button-toggle
|
||||
v-model="model"
|
||||
preset="outline"
|
||||
:options="options"
|
||||
border-color="danger"
|
||||
color="danger"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex xs12 lg6">
|
||||
<va-button-toggle v-model="model" preset="plain" :options="options" color="gray" />
|
||||
</div>
|
||||
<div class="flex xs12 lg6">
|
||||
<va-button-toggle v-model="model" :options="options" color="dark" />
|
||||
</div>
|
||||
<div class="flex xs12 lg6">
|
||||
<va-button-toggle
|
||||
v-model="model"
|
||||
preset="outline"
|
||||
:options="options"
|
||||
border-color="info"
|
||||
color="info"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex xs12 lg6">
|
||||
<va-button-toggle v-model="model" preset="plain" :options="options" color="warning" />
|
||||
</div>
|
||||
</div>
|
||||
</va-card-content>
|
||||
</va-card>
|
||||
</div>
|
||||
|
||||
<div class="flex xs12">
|
||||
<va-card class="larger-padding">
|
||||
<va-card-title>{{ t('buttons.pagination') }}</va-card-title>
|
||||
<va-card-content>
|
||||
<div class="row">
|
||||
<div class="flex xs12 xl6">
|
||||
<va-pagination v-model="activePage" :visible-pages="3" :pages="20" />
|
||||
</div>
|
||||
<div class="flex xs12 xl6">
|
||||
<va-pagination v-model="activePage" :visible-pages="4" :pages="15" color="danger" />
|
||||
</div>
|
||||
<div class="flex xs12 xl6">
|
||||
<va-pagination v-model="activePage" :pages="5" disabled />
|
||||
</div>
|
||||
<div class="flex xs12 xl6">
|
||||
<va-pagination
|
||||
v-model="activePage"
|
||||
:pages="10"
|
||||
:visible-pages="3"
|
||||
:icon="{ boundary: 'bell_slash', direction: 'volume_off' }"
|
||||
:icon-right="{ boundary: 'bell', direction: 'volume_up' }"
|
||||
color="success"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</va-card-content>
|
||||
</va-card>
|
||||
</div>
|
||||
<div class="flex xs12">
|
||||
<va-card class="larger-padding">
|
||||
<va-card-title>{{ t('buttons.buttonsDropdown') }}</va-card-title>
|
||||
<va-card-content>
|
||||
<div class="row">
|
||||
<div class="flex">
|
||||
<va-button-dropdown class="mr-2 mb-2" :label="t('buttons.default')">
|
||||
{{ t('buttons.content') }}</va-button-dropdown
|
||||
>
|
||||
<va-button-dropdown class="mr-2 mb-2" split :label="t('buttons.split')">
|
||||
{{ t('buttons.content') }}</va-button-dropdown
|
||||
>
|
||||
<va-button-dropdown class="mr-2 mb-2" split split-to="/" :label="t('buttons.splitTo')">
|
||||
{{ t('buttons.content') }}</va-button-dropdown
|
||||
>
|
||||
<va-button-dropdown
|
||||
class="mr-2 mb-2"
|
||||
:label="t('buttons.customIcon')"
|
||||
icon="info"
|
||||
opened-icon="bell_slash"
|
||||
>
|
||||
{{ t('buttons.content') }}
|
||||
</va-button-dropdown>
|
||||
<va-button-dropdown class="mr-2 mb-2" disabled :label="t('buttons.disabled')">
|
||||
{{ t('buttons.content') }}</va-button-dropdown
|
||||
>
|
||||
<va-button-dropdown class="mr-2 mb-2" color="warning" :label="t('buttons.warning')">
|
||||
{{ t('buttons.content') }}</va-button-dropdown
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</va-card-content>
|
||||
</va-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
const { t } = useI18n()
|
||||
|
||||
const options = ref([
|
||||
{ label: 'One', value: 'one' },
|
||||
{ label: 'Two', value: 'two' },
|
||||
{ label: 'Three', value: 'three' },
|
||||
])
|
||||
const model = ref('three')
|
||||
const activePage = ref(4)
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.va-card__content {
|
||||
& > .row {
|
||||
overflow-x: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.va-button-dropdown {
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
@@ -1,138 +0,0 @@
|
||||
<template>
|
||||
<div class="cards">
|
||||
<div class="cards-container row d-flex wrap align--start">
|
||||
<template v-for="loop in listLoops" :key="loop + '-0'">
|
||||
<div class="flex xs12 sm6 md6 xl6">
|
||||
<va-card>
|
||||
<va-card-title>{{ t('cards.title.default') }}</va-card-title>
|
||||
<va-card-content>{{ t('cards.contentTextLong') }}</va-card-content>
|
||||
</va-card>
|
||||
</div>
|
||||
|
||||
<div class="flex xs12 sm6 md6 xl6">
|
||||
<va-card>
|
||||
<va-card-title>
|
||||
{{ t('cards.title.withControls') }}
|
||||
<va-spacer />
|
||||
<va-button class="mr-1" size="small" icon="refresh" />
|
||||
<va-button size="small" icon="gear" />
|
||||
</va-card-title>
|
||||
<va-card-content>{{ t('cards.contentTextLong') }}</va-card-content>
|
||||
</va-card>
|
||||
</div>
|
||||
|
||||
<div class="flex xs12 sm6 md6 xl6">
|
||||
<va-card>
|
||||
<va-card-title>
|
||||
<va-icon class="mr-3" name="cogs" />
|
||||
{{ t('cards.title.customHeader') }}
|
||||
</va-card-title>
|
||||
<va-card-content>{{ t('cards.contentTextLong') }}</va-card-content>
|
||||
</va-card>
|
||||
</div>
|
||||
|
||||
<div class="flex xs12 sm6 md6 xl6">
|
||||
<va-card>
|
||||
<va-card-content>
|
||||
<p>{{ t('cards.title.withoutHeader') }}</p>
|
||||
{{ t('cards.contentTextLong') }}
|
||||
</va-card-content>
|
||||
</va-card>
|
||||
</div>
|
||||
|
||||
<div class="flex xs12 sm6 md3 xl3 lg3 xl3">
|
||||
<va-card>
|
||||
<va-image src="https://picsum.photos/300/200/?image=1043" style="height: 200px" />
|
||||
<va-card-title>{{ t('cards.title.withImage') }}</va-card-title>
|
||||
<va-card-content>{{ t('cards.contentText') }}</va-card-content>
|
||||
</va-card>
|
||||
</div>
|
||||
|
||||
<div class="flex xs12 sm6 md3 xl3 lg3 xl3">
|
||||
<va-card>
|
||||
<va-image src="https://picsum.photos/300/200/?image=898" style="height: 200px">
|
||||
<va-card-title text-color="#fff">{{ t('cards.title.withTitleOnImage') }}</va-card-title>
|
||||
</va-image>
|
||||
<va-card-content>{{ t('cards.contentText') }}</va-card-content>
|
||||
</va-card>
|
||||
</div>
|
||||
|
||||
<div class="flex xs12 sm6 md3 xl3 lg3 xl3">
|
||||
<va-card>
|
||||
<va-image src="https://picsum.photos/300/200/?image=898" style="height: 200px">
|
||||
<va-button class="ma-0">
|
||||
{{ t('cards.button.readMore') }}
|
||||
</va-button>
|
||||
</va-image>
|
||||
</va-card>
|
||||
</div>
|
||||
|
||||
<div class="flex xs12 sm6 md3 xl3 lg3 xl3">
|
||||
<va-card stripe stripe-color="danger">
|
||||
<va-card-title>{{ t('cards.title.withStripe') }}</va-card-title>
|
||||
<va-card-content>{{ t('cards.contentTextLong') }}</va-card-content>
|
||||
</va-card>
|
||||
</div>
|
||||
|
||||
<div class="flex xs12 sm6 md3 xl3 lg3 xl3">
|
||||
<va-card color="success">
|
||||
<va-card-content>{{ t('cards.contentTextLong') }}</va-card-content>
|
||||
</va-card>
|
||||
</div>
|
||||
|
||||
<div class="flex xs12 sm6 md3 xl3 lg3 xl3">
|
||||
<va-card color="danger">
|
||||
<va-card-content>{{ t('cards.contentTextLong') }}</va-card-content>
|
||||
</va-card>
|
||||
</div>
|
||||
|
||||
<div class="flex xs12 sm6 md3 xl3 lg3 xl3">
|
||||
<va-card stripe stripe-color="info">
|
||||
<va-card-title>{{ t('cards.title.withStripe') }}</va-card-title>
|
||||
<va-card-content>{{ t('cards.contentTextLong') }}</va-card-content>
|
||||
</va-card>
|
||||
</div>
|
||||
|
||||
<div class="flex xs12 sm6 md3 xl3 lg3 xl3">
|
||||
<va-card>
|
||||
<va-image src="https://picsum.photos/300/200/?image=1067" style="height: 200px">
|
||||
<va-card-title text-color="#fff">{{ t('cards.title.withTitleOnImage') }}</va-card-title>
|
||||
</va-image>
|
||||
<va-card-content>{{ t('cards.contentText') }}</va-card-content>
|
||||
</va-card>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<va-inner-loading class="justify-center py-3" style="width: 100%" :loading="isLoading">
|
||||
<va-button @click="addCards()">
|
||||
{{ t('cards.button.showMore') }}
|
||||
</va-button>
|
||||
</va-inner-loading>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
const { t } = useI18n()
|
||||
|
||||
const listLoops = ref(1)
|
||||
const isLoading = ref(false)
|
||||
|
||||
function addCards() {
|
||||
isLoading.value = true
|
||||
setTimeout(() => {
|
||||
isLoading.value = false
|
||||
++listLoops.value
|
||||
}, 1000)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.cards-container {
|
||||
.va-card {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,158 +0,0 @@
|
||||
<template>
|
||||
<div class="va-chat">
|
||||
<div
|
||||
v-sticky-scroll="{
|
||||
animate: true,
|
||||
duration: 500,
|
||||
}"
|
||||
class="va-chat__body"
|
||||
:style="{ height: height }"
|
||||
>
|
||||
<div
|
||||
v-for="(message, index) in modelValue"
|
||||
:key="index"
|
||||
class="va-chat__message"
|
||||
:style="{
|
||||
backgroundColor: message.yours ? colors.primary : undefined,
|
||||
}"
|
||||
:class="{ 'va-chat__message--yours': message.yours }"
|
||||
>
|
||||
<span class="va-chat__message-text">
|
||||
{{ message.text }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="va-chat__controls">
|
||||
<va-input
|
||||
v-model="inputMessage"
|
||||
placeholder="Type your message..."
|
||||
class="va-chat__input mr-2"
|
||||
@keypress.enter="sendMessage"
|
||||
/>
|
||||
<va-button @click="sendMessage()">
|
||||
{{ t('chat.sendButton') }}
|
||||
</va-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import vStickyScroll from './StickyScroll'
|
||||
import { useColors } from 'vuestic-ui'
|
||||
import { ref } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
const { colors } = useColors()
|
||||
const { t } = useI18n()
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
modelValue?: { text: string; yours: boolean }[]
|
||||
height?: string
|
||||
}>(),
|
||||
{
|
||||
modelValue: () => [
|
||||
{
|
||||
text: 'Hello! So glad you liked my work. Do you want me to shoot you?',
|
||||
yours: false,
|
||||
},
|
||||
{
|
||||
text: 'Yeah, that would be cool. Maybe this Sunday at 3 pm?',
|
||||
yours: true,
|
||||
},
|
||||
{
|
||||
text: 'Sounds great! See you later!',
|
||||
yours: false,
|
||||
},
|
||||
{
|
||||
text: 'Should I bring a lightbox with me?',
|
||||
yours: true,
|
||||
},
|
||||
{
|
||||
text: 'No, thanks. There is no need. Can we set up a meeting earlier?',
|
||||
yours: false,
|
||||
},
|
||||
{
|
||||
text: "I'm working on Vuestic, so let's meet at 3pm. Thanks!",
|
||||
yours: true,
|
||||
},
|
||||
],
|
||||
height: '20rem',
|
||||
},
|
||||
)
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', payload: { text: string; yours: boolean }[]): void
|
||||
}>()
|
||||
|
||||
const inputMessage = ref('')
|
||||
|
||||
function sendMessage() {
|
||||
if (!inputMessage.value) {
|
||||
return
|
||||
}
|
||||
|
||||
emit('update:modelValue', props.modelValue.concat({ text: inputMessage.value, yours: true }))
|
||||
inputMessage.value = ''
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// .chat {
|
||||
// &__content {
|
||||
// @include va-justify-center();
|
||||
// }
|
||||
// }
|
||||
|
||||
$chat-message-br: 0.875rem;
|
||||
|
||||
.va-chat {
|
||||
width: 100%;
|
||||
|
||||
&__body {
|
||||
min-height: 18.75rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 1.5rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
&__message {
|
||||
position: relative;
|
||||
padding: 0.657rem 1.375rem;
|
||||
margin-bottom: 0.625rem;
|
||||
max-width: 70%;
|
||||
overflow-wrap: break-word;
|
||||
border-radius: 0.5rem;
|
||||
border-top-left-radius: 0;
|
||||
align-self: flex-start;
|
||||
// background-color: $light-gray2;
|
||||
|
||||
&-text {
|
||||
display: block;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&--yours {
|
||||
color: white;
|
||||
align-self: flex-end;
|
||||
border-top-right-radius: 0;
|
||||
border-top-left-radius: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__input {
|
||||
flex-grow: 1;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,50 +0,0 @@
|
||||
<template>
|
||||
<div class="chat">
|
||||
<div class="row">
|
||||
<div class="flex xs12 md12">
|
||||
<va-card>
|
||||
<va-card-title>{{ t('chat.title') }}</va-card-title>
|
||||
<va-card-content>
|
||||
<chat v-model="chatMessages" />
|
||||
</va-card-content>
|
||||
</va-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Chat from './Chat.vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { ref } from 'vue'
|
||||
const { t } = useI18n()
|
||||
|
||||
const chatMessages = ref([
|
||||
{
|
||||
text: 'Hello! So glad you liked my work. Do you want me to shoot you?',
|
||||
yours: false,
|
||||
},
|
||||
{
|
||||
text: 'Yeah, that would be cool. Maybe this Sunday at 3 pm?',
|
||||
yours: true,
|
||||
},
|
||||
{
|
||||
text: 'Sounds great! See you later!',
|
||||
yours: false,
|
||||
},
|
||||
{
|
||||
text: 'Should I bring a lightbox with me?',
|
||||
yours: true,
|
||||
},
|
||||
{
|
||||
text: 'No, thanks. There is no need. Can we set up a meeting earlier?',
|
||||
yours: false,
|
||||
},
|
||||
{
|
||||
text: "I'm working on Vuestic, so let's meet at 3pm. Thanks!",
|
||||
yours: true,
|
||||
},
|
||||
])
|
||||
</script>
|
||||
|
||||
<style lang="scss"></style>
|
||||
@@ -1,52 +0,0 @@
|
||||
import { Directive, DirectiveBinding } from '@vue/runtime-core'
|
||||
|
||||
const directive: Directive = {
|
||||
mounted: (el: HTMLElement, binding: DirectiveBinding) => {
|
||||
const duration = binding.value.duration || 500
|
||||
const isAnimated = binding.value.animate
|
||||
|
||||
const animateScroll = (duration: number) => {
|
||||
const start = el.scrollTop
|
||||
const end = el.scrollHeight
|
||||
const change = end - start
|
||||
const increment = 20
|
||||
|
||||
function easeInOut(currentTime: number, start: number, change: number, duration: number) {
|
||||
currentTime /= duration / 2
|
||||
if (currentTime < 1) {
|
||||
return (change / 2) * currentTime * currentTime + start
|
||||
}
|
||||
currentTime -= 1
|
||||
return (-change / 2) * (currentTime * (currentTime - 2) - 1) + start
|
||||
}
|
||||
|
||||
function animate(elapsedTime: number) {
|
||||
elapsedTime += increment
|
||||
const position = easeInOut(elapsedTime, start, change, duration)
|
||||
el.scrollTop = position
|
||||
|
||||
if (elapsedTime < duration) {
|
||||
setTimeout(() => {
|
||||
animate(elapsedTime)
|
||||
}, increment)
|
||||
}
|
||||
}
|
||||
|
||||
animate(0)
|
||||
}
|
||||
|
||||
const scrollToBottom = () => {
|
||||
if (isAnimated) {
|
||||
animateScroll(duration)
|
||||
} else {
|
||||
el.scrollTop = el.scrollHeight
|
||||
}
|
||||
}
|
||||
|
||||
const observer = new MutationObserver(scrollToBottom)
|
||||
const config = { childList: true }
|
||||
observer.observe(el, config)
|
||||
},
|
||||
}
|
||||
|
||||
export default directive
|
||||
@@ -1,76 +0,0 @@
|
||||
<template>
|
||||
<div class="row">
|
||||
<div class="flex xs12">
|
||||
<va-card>
|
||||
<va-card-title>{{ t('chips.chips.title') }}</va-card-title>
|
||||
<va-card-content class="row">
|
||||
<div class="flex xs12">
|
||||
<div class="row">
|
||||
<div class="flex xs12">
|
||||
<va-chip shadow class="mb-2 mr-2" color="primary">{{ t('chips.chips.primary') }}</va-chip>
|
||||
<va-chip shadow class="mb-2 mr-2" color="secondary">{{ t('chips.chips.secondary') }}</va-chip>
|
||||
<va-chip shadow class="mb-2 mr-2" color="success">{{ t('chips.chips.success') }}</va-chip>
|
||||
<va-chip shadow class="mb-2 mr-2" color="info">{{ t('chips.chips.info') }}</va-chip>
|
||||
<va-chip shadow class="mb-2 mr-2" color="danger">{{ t('chips.chips.danger') }}</va-chip>
|
||||
<va-chip shadow class="mb-2 mr-2" color="warning">{{ t('chips.chips.warning') }}</va-chip>
|
||||
<va-chip shadow class="mb-2 mr-2" color="gray">{{ t('chips.chips.gray') }}</va-chip>
|
||||
<va-chip shadow class="mb-2 mr-2" color="dark">{{ t('chips.chips.dark') }}</va-chip>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="flex xs12">
|
||||
<va-chip outline class="mb-2 mr-2" color="primary">{{ t('chips.chips.primary') }}</va-chip>
|
||||
<va-chip outline class="mb-2 mr-2" color="secondary">{{ t('chips.chips.secondary') }}</va-chip>
|
||||
<va-chip outline class="mb-2 mr-2" color="success">{{ t('chips.chips.success') }}</va-chip>
|
||||
<va-chip outline class="mb-2 mr-2" color="info">{{ t('chips.chips.info') }}</va-chip>
|
||||
<va-chip outline class="mb-2 mr-2" color="danger">{{ t('chips.chips.danger') }}</va-chip>
|
||||
<va-chip outline class="mb-2 mr-2" color="warning">{{ t('chips.chips.warning') }}</va-chip>
|
||||
<va-chip outline class="mb-2 mr-2" color="gray">{{ t('chips.chips.gray') }}</va-chip>
|
||||
<va-chip outline class="mb-2 mr-2" color="dark">{{ t('chips.chips.dark') }}</va-chip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</va-card-content>
|
||||
</va-card>
|
||||
</div>
|
||||
|
||||
<div class="flex xs12">
|
||||
<va-card>
|
||||
<va-card-title>{{ t('chips.badges.title') }}</va-card-title>
|
||||
<va-card-content class="row">
|
||||
<div class="flex xs12">
|
||||
<div class="row">
|
||||
<div class="flex xs12">
|
||||
<va-badge class="mb-2 mr-2" color="primary" :text="t('chips.badges.primary')" />
|
||||
<va-badge class="mb-2 mr-2" color="secondary" :text="t('chips.badges.secondary')" />
|
||||
<va-badge class="mb-2 mr-2" color="success" :text="t('chips.badges.success')" />
|
||||
<va-badge class="mb-2 mr-2" color="info" :text="t('chips.badges.info')" />
|
||||
<va-badge class="mb-2 mr-2" color="danger" :text="t('chips.badges.danger')" />
|
||||
<va-badge class="mb-2 mr-2" color="warning" :text="t('chips.badges.warning')" />
|
||||
<va-badge class="mb-2 mr-2" color="gray" :text="t('chips.badges.gray')" />
|
||||
<va-badge class="mb-2 mr-2" color="dark" :text="t('chips.badges.dark')" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="flex xs12">
|
||||
<va-badge class="mb-2 mr-2" color="primary" :text="t('chips.badges.primary')" transparent />
|
||||
<va-badge class="mb-2 mr-2" color="secondary" :text="t('chips.badges.secondary')" transparent />
|
||||
<va-badge class="mb-2 mr-2" color="success" :text="t('chips.badges.success')" transparent />
|
||||
<va-badge class="mb-2 mr-2" color="info" :text="t('chips.badges.info')" transparent />
|
||||
<va-badge class="mb-2 mr-2" color="danger" :text="t('chips.badges.danger')" transparent />
|
||||
<va-badge class="mb-2 mr-2" color="warning" :text="t('chips.badges.warning')" transparent />
|
||||
<va-badge class="mb-2 mr-2" color="gray" :text="t('chips.badges.gray')" transparent />
|
||||
<va-badge class="mb-2 mr-2" color="dark" :text="t('chips.badges.dark')" transparent />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</va-card-content>
|
||||
</va-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from 'vue-i18n'
|
||||
const { t } = useI18n()
|
||||
</script>
|
||||
@@ -1,104 +0,0 @@
|
||||
<template>
|
||||
<div class="collapse-page">
|
||||
<div class="row">
|
||||
<div class="flex xs12">
|
||||
<va-card>
|
||||
<va-card-title>{{ t('collapse.basic') }}</va-card-title>
|
||||
<va-card-content>
|
||||
<va-accordion v-model="basicAccordionValue">
|
||||
<va-collapse :header="t('collapse.firstHeader')">
|
||||
<div class="pa-3">
|
||||
<p class="va-h3">{{ t('collapse.content.title') }}</p>
|
||||
<div>
|
||||
{{ t('collapse.content.text') }}
|
||||
</div>
|
||||
</div>
|
||||
</va-collapse>
|
||||
<va-collapse :header="t('collapse.secondHeader')">
|
||||
<div class="pa-3">
|
||||
<p class="va-h3">{{ t('collapse.content.title') }}</p>
|
||||
<div>
|
||||
{{ t('collapse.content.text') }}
|
||||
</div>
|
||||
</div>
|
||||
</va-collapse>
|
||||
</va-accordion>
|
||||
</va-card-content>
|
||||
</va-card>
|
||||
</div>
|
||||
|
||||
<div class="flex xs12">
|
||||
<va-card>
|
||||
<va-card-title>{{ t('collapse.collapseWithBackground') }}</va-card-title>
|
||||
<va-card-content>
|
||||
<va-accordion v-model="colorAccordionValue">
|
||||
<va-collapse :header="t('collapse.firstHeader')" color="success" color-all>
|
||||
<div class="pa-3">
|
||||
<p class="va-h3">{{ t('collapse.content.title') }}</p>
|
||||
<div>
|
||||
{{ t('collapse.content.text') }}
|
||||
</div>
|
||||
</div>
|
||||
</va-collapse>
|
||||
<va-collapse :header="t('collapse.secondHeader')" color="warning" color-all>
|
||||
<div class="pa-3">
|
||||
<p class="va-h3">{{ t('collapse.content.title') }}</p>
|
||||
<div>
|
||||
{{ t('collapse.content.text') }}
|
||||
</div>
|
||||
</div>
|
||||
</va-collapse>
|
||||
</va-accordion>
|
||||
</va-card-content>
|
||||
</va-card>
|
||||
</div>
|
||||
|
||||
<div class="flex xs12">
|
||||
<va-card>
|
||||
<va-card-title>{{ t('collapse.collapseWithCustomHeader') }}</va-card-title>
|
||||
<va-card-content>
|
||||
<va-accordion v-model="customHeaderAccordionValue">
|
||||
<va-collapse class="mb-4">
|
||||
<template #header>
|
||||
<va-button style="width: 100%">
|
||||
{{ t('collapse.firstHeader') }}
|
||||
</va-button>
|
||||
</template>
|
||||
<div class="pa-3">
|
||||
<p class="va-h3">{{ t('collapse.content.title') }}</p>
|
||||
<div>
|
||||
{{ t('collapse.content.text') }}
|
||||
</div>
|
||||
</div>
|
||||
</va-collapse>
|
||||
<va-collapse>
|
||||
<template #header>
|
||||
<va-button style="width: 100%">
|
||||
{{ t('collapse.secondHeader') }}
|
||||
</va-button>
|
||||
</template>
|
||||
<div>
|
||||
<p class="va-h3">{{ t('collapse.content.title') }}</p>
|
||||
<div class="pa-3">
|
||||
{{ t('collapse.content.text') }}
|
||||
</div>
|
||||
</div>
|
||||
</va-collapse>
|
||||
</va-accordion>
|
||||
</va-card-content>
|
||||
</va-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const basicAccordionValue = ref([false, false])
|
||||
const colorAccordionValue = ref([false, false])
|
||||
const customHeaderAccordionValue = ref([false, false])
|
||||
</script>
|
||||
@@ -1,95 +0,0 @@
|
||||
<template>
|
||||
<div class="color-pickers vuestic-color-picker-page">
|
||||
<div class="row">
|
||||
<div class="flex md12 xs12">
|
||||
<va-card>
|
||||
<va-card-title>{{ t('menu.colorPickers') }}</va-card-title>
|
||||
<va-card-content class="row">
|
||||
<div class="flex xs4 md2">
|
||||
<div class="vuestic-color-picker-page__top-square">
|
||||
<span class="title no-wrap" :style="{ color: colors.primary }">
|
||||
{{ t('colorPickers.simple') }}
|
||||
</span>
|
||||
<va-color-picker v-model="topSimpleSquareColor" :palette="palette" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex xs4 md2">
|
||||
<div class="vuestic-color-picker-page__top-square">
|
||||
<span class="title no-wrap" :style="{ color: colors.primary }">
|
||||
{{ t('colorPickers.slider') }}
|
||||
</span>
|
||||
<va-color-picker v-model="topSliderSquareColor" mode="slider" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex xs4 md2">
|
||||
<div class="vuestic-color-picker-page__top-square">
|
||||
<span class="title no-wrap" :style="{ color: colors.primary }">
|
||||
{{ t('colorPickers.advanced') }}
|
||||
</span>
|
||||
<va-color-input v-model="topAdvancedSquareColor" mode="advanced" />
|
||||
</div>
|
||||
</div>
|
||||
</va-card-content>
|
||||
</va-card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="flex md12 xs12">
|
||||
<va-card>
|
||||
<va-card-title>Simple Inline</va-card-title>
|
||||
<va-card-content class="row">
|
||||
<div class="flex md1">
|
||||
<va-color-square :value="simpleColor" />
|
||||
</div>
|
||||
<div class="flex md2">
|
||||
<va-color-palette v-model="simpleColor" :palette="palette" />
|
||||
</div>
|
||||
</va-card-content>
|
||||
</va-card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="flex md12 xs12">
|
||||
<va-card>
|
||||
<va-card-title>Slider</va-card-title>
|
||||
<va-card-content class="row">
|
||||
<div class="flex xs12 md1">
|
||||
<va-color-square :value="sliderColor" />
|
||||
</div>
|
||||
<div class="flex md6 xs12">
|
||||
<va-color-slider v-model="sliderColor" />
|
||||
</div>
|
||||
</va-card-content>
|
||||
</va-card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="flex md12 xs12">
|
||||
<va-card>
|
||||
<va-card-title>Advanced</va-card-title>
|
||||
<va-card-content class="row">
|
||||
<div class="flex md1">
|
||||
<va-color-square :value="advancedColor" />
|
||||
</div>
|
||||
<div class="flex md7">
|
||||
<va-color-picker v-model="advancedColor" />
|
||||
</div>
|
||||
</va-card-content>
|
||||
</va-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useColors } from 'vuestic-ui'
|
||||
|
||||
const topSimpleSquareColor = '#f81953'
|
||||
const topSliderSquareColor = '#34495e'
|
||||
const topAdvancedSquareColor = '#ffd50a'
|
||||
const sliderColor = '#2e5e2a'
|
||||
const advancedColor = '#ffd50a'
|
||||
const simpleColor = '#f81953'
|
||||
const palette = []
|
||||
const { colors } = useColors()
|
||||
</script>
|
||||
@@ -1,95 +0,0 @@
|
||||
<template>
|
||||
<div class="row">
|
||||
<div class="flex xs12 sm6">
|
||||
<va-card>
|
||||
<va-card-title>{{ t('colors.themeColors') }}</va-card-title>
|
||||
<va-card-content>
|
||||
<div v-for="(themeColor, index) in themeColors" :key="index">
|
||||
<color-presentation
|
||||
:color="themeColor.color"
|
||||
:name="themeColor.name"
|
||||
:description="themeColor.description"
|
||||
/>
|
||||
</div>
|
||||
</va-card-content>
|
||||
</va-card>
|
||||
</div>
|
||||
|
||||
<div class="flex xs12 sm6">
|
||||
<va-card>
|
||||
<va-card-title>{{ t('colors.extraColors') }}</va-card-title>
|
||||
<va-card-content>
|
||||
<div v-for="(extraColor, index) in extraColors" :key="index">
|
||||
<color-presentation
|
||||
:color="extraColor.color"
|
||||
:name="extraColor.name"
|
||||
:description="extraColor.description"
|
||||
/>
|
||||
</div>
|
||||
</va-card-content>
|
||||
</va-card>
|
||||
</div>
|
||||
|
||||
<div class="flex xs12 sm6 lg4">
|
||||
<va-card>
|
||||
<va-card-title>{{ t('colors.gradients.basic.title') }}</va-card-title>
|
||||
<va-card-content>
|
||||
<div v-for="(buttonGradient, index) in buttonGradients" :key="index">
|
||||
<color-presentation
|
||||
:color="buttonGradient.color"
|
||||
:variant="['gradient']"
|
||||
:name="buttonGradient.name"
|
||||
:description="buttonGradient.description"
|
||||
/>
|
||||
</div>
|
||||
</va-card-content>
|
||||
</va-card>
|
||||
</div>
|
||||
|
||||
<div class="flex xs12 sm6 lg4">
|
||||
<va-card>
|
||||
<va-card-title>{{ t('colors.gradients.hovered.title') }}</va-card-title>
|
||||
<va-card-content>
|
||||
<p class="mt-0 mb-2">
|
||||
{{ t('colors.gradients.hovered.text') }}
|
||||
</p>
|
||||
<div v-for="(buttonGradient, index) in buttonGradients" :key="index">
|
||||
<color-presentation
|
||||
:color="buttonGradient.color"
|
||||
:variant="['gradient', 'hovered']"
|
||||
:name="buttonGradient.name"
|
||||
:description="buttonGradient.description"
|
||||
/>
|
||||
</div>
|
||||
</va-card-content>
|
||||
</va-card>
|
||||
</div>
|
||||
|
||||
<div class="flex xs12 sm6 lg4">
|
||||
<va-card>
|
||||
<va-card-title>{{ t('colors.gradients.pressed.title') }}</va-card-title>
|
||||
<va-card-content>
|
||||
<p class="mt-0 mb-2">
|
||||
{{ t('colors.gradients.pressed.text') }}
|
||||
</p>
|
||||
<div v-for="(buttonGradient, index) in buttonGradients" :key="index">
|
||||
<color-presentation
|
||||
:color="buttonGradient.color"
|
||||
:variant="['gradient', 'pressed']"
|
||||
:name="buttonGradient.name"
|
||||
:description="buttonGradient.description"
|
||||
/>
|
||||
</div>
|
||||
</va-card-content>
|
||||
</va-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import ColorPresentation from './color-presentation/ColorPresentation.vue'
|
||||
import { themeColors, extraColors, buttonGradients } from './color-presentation/colorsData'
|
||||
|
||||
const { t } = useI18n()
|
||||
</script>
|
||||
@@ -1,133 +0,0 @@
|
||||
<template>
|
||||
<div class="color-presentation">
|
||||
<va-popover color="info" :placement="popoverOptions.placement" :message="popoverOptions.content">
|
||||
<div class="color-presentation__color" :style="computedStyle" @click="colorCopy()"></div>
|
||||
</va-popover>
|
||||
|
||||
<div v-if="name || description" class="color-presentation__description">
|
||||
<div class="color-presentation__name">{{ name }}</div>
|
||||
<div class="color-presentation__text">{{ description }}</div>
|
||||
</div>
|
||||
|
||||
<input ref="hiddenInput" :value="computedBackground" class="hidden-input" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useColors, useToast } from 'vuestic-ui'
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
color?: string
|
||||
variant?: string[]
|
||||
width?: number
|
||||
name?: string
|
||||
description?: string
|
||||
}>(),
|
||||
{
|
||||
color: '',
|
||||
variant: () => [],
|
||||
width: 0,
|
||||
name: '',
|
||||
description: '',
|
||||
},
|
||||
)
|
||||
|
||||
const popoverOptions = ref({
|
||||
content: 'Click to copy the color to clipboard',
|
||||
placement: 'right',
|
||||
})
|
||||
|
||||
const { getColor, getGradientBackground } = useColors()
|
||||
|
||||
const computedBackground = computed(() => {
|
||||
const color = getColor(props.color)
|
||||
|
||||
if (props.variant.includes('gradient')) {
|
||||
return getGradientBackground(color)
|
||||
}
|
||||
|
||||
return color
|
||||
})
|
||||
|
||||
const computedStyle = computed(() => {
|
||||
const calcFilter = () => {
|
||||
if (props.variant.includes('hovered')) {
|
||||
return 'brightness(115%)'
|
||||
}
|
||||
if (props.variant.includes('pressed')) {
|
||||
return 'brightness(85%)'
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
background: computedBackground.value,
|
||||
filter: calcFilter(),
|
||||
width: props.width ? `${props.width}px` : '',
|
||||
}
|
||||
})
|
||||
|
||||
const hiddenInput = ref()
|
||||
|
||||
function colorCopy() {
|
||||
navigator.clipboard?.writeText?.(hiddenInput.value.value).then(notify)
|
||||
}
|
||||
|
||||
const { init } = useToast()
|
||||
|
||||
function notify() {
|
||||
init({
|
||||
message: "The color's copied to your clipboard",
|
||||
position: 'bottom-right',
|
||||
color: getColor(props.color),
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.color-presentation {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 1.125rem;
|
||||
|
||||
.v-popover {
|
||||
width: 80px;
|
||||
height: 40px;
|
||||
|
||||
span {
|
||||
outline: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
&__color {
|
||||
height: 40px;
|
||||
width: 80px;
|
||||
margin-right: 0.25rem;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin-left: 1rem;
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
&__name {
|
||||
color: var(--va-dark);
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
&__text {
|
||||
color: var(--va-secondary);
|
||||
}
|
||||
|
||||
.hidden-input {
|
||||
width: 0;
|
||||
padding: 0;
|
||||
opacity: 0;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,96 +0,0 @@
|
||||
export const themeColors = [
|
||||
{
|
||||
color: 'primary',
|
||||
name: 'Primary',
|
||||
description: 'Buttons, labels, graphs.',
|
||||
},
|
||||
{
|
||||
color: 'secondary',
|
||||
name: 'Secondary',
|
||||
description: 'Light text, buttons, labels, graphs.',
|
||||
},
|
||||
{
|
||||
color: 'success',
|
||||
name: 'Success',
|
||||
description: 'Buttons, labels, graphs.',
|
||||
},
|
||||
{
|
||||
color: 'info',
|
||||
name: 'Info',
|
||||
description: 'Buttons, labels, graphs.',
|
||||
},
|
||||
{
|
||||
color: 'danger',
|
||||
name: 'Danger',
|
||||
description: 'Buttons, labels, graphs.',
|
||||
},
|
||||
{
|
||||
color: 'warning',
|
||||
name: 'Warning',
|
||||
description: 'Buttons, labels, graphs.',
|
||||
},
|
||||
{
|
||||
color: 'gray',
|
||||
name: 'Gray',
|
||||
description: 'Buttons, labels, graphs.',
|
||||
},
|
||||
{
|
||||
color: 'dark',
|
||||
name: 'Dark',
|
||||
description: 'Buttons, labels, graphs.',
|
||||
},
|
||||
]
|
||||
|
||||
export const extraColors = [
|
||||
{
|
||||
color: '#36e9f6',
|
||||
name: 'Teal',
|
||||
description: 'Graphs, tables, labels, etc.',
|
||||
},
|
||||
{
|
||||
color: '#ed34b8',
|
||||
name: 'Violet',
|
||||
description: 'Graphs, tables, labels, etc.',
|
||||
},
|
||||
{
|
||||
color: '#8f4ed6',
|
||||
name: 'Purple',
|
||||
description: 'Graphs, tables, labels, etc.',
|
||||
},
|
||||
{
|
||||
color: '#d40d52',
|
||||
name: 'Ruby',
|
||||
description: 'Graphs, tables, labels, etc.',
|
||||
},
|
||||
{
|
||||
color: '#ff842b',
|
||||
name: 'Orrange',
|
||||
description: 'Graphs, tables, labels, etc.',
|
||||
},
|
||||
{
|
||||
color: '#1b9a7c',
|
||||
name: 'Dark Green',
|
||||
description: 'Graphs, tables, labels, etc.',
|
||||
},
|
||||
{
|
||||
color: '#d3ff00',
|
||||
name: 'Toxic',
|
||||
description: 'Graphs, tables, labels, etc.',
|
||||
},
|
||||
{
|
||||
color: '#81513e',
|
||||
name: 'Brown',
|
||||
description: 'Graphs, tables, labels, etc.',
|
||||
},
|
||||
]
|
||||
|
||||
export const buttonGradients = [
|
||||
{ color: 'primary', name: 'primary', description: 'Buttons, chips, badges...' },
|
||||
{ color: 'secondary', name: 'secondary', description: 'Buttons, chips, badges...' },
|
||||
{ color: 'success', name: 'success', description: 'Buttons, chips, badges...' },
|
||||
{ color: 'info', name: 'info', description: 'Buttons, chips, badges...' },
|
||||
{ color: 'danger', name: 'danger', description: 'Buttons, chips, badges...' },
|
||||
{ color: 'warning', name: 'warning', description: 'Buttons, chips, badges...' },
|
||||
{ color: 'gray', name: 'gray', description: 'Buttons, chips, badges...' },
|
||||
{ color: 'dark', name: 'dark', description: 'Buttons, chips, badges...' },
|
||||
]
|
||||
@@ -1,59 +0,0 @@
|
||||
<template>
|
||||
<div class="file-upload">
|
||||
<div class="row">
|
||||
<div class="flex xs12">
|
||||
<va-card>
|
||||
<va-card-title>{{ t('fileUpload.advancedMediaGallery') }}</va-card-title>
|
||||
<va-card-content>
|
||||
<va-file-upload v-model="advancedGallery" type="gallery" file-types=".png, .jpg, .jpeg, .gif" dropzone />
|
||||
</va-card-content>
|
||||
</va-card>
|
||||
</div>
|
||||
<div class="flex xs12">
|
||||
<va-card>
|
||||
<va-card-title>{{ t('fileUpload.advancedUploadList') }}</va-card-title>
|
||||
<va-card-content>
|
||||
<va-file-upload v-model="advancedList" dropzone />
|
||||
</va-card-content>
|
||||
</va-card>
|
||||
</div>
|
||||
<div class="flex xs12">
|
||||
<va-card>
|
||||
<va-card-title>{{ t('fileUpload.single') }}</va-card-title>
|
||||
<va-card-content>
|
||||
<va-file-upload v-model="single" type="single" />
|
||||
</va-card-content>
|
||||
</va-card>
|
||||
</div>
|
||||
<div class="flex xs12">
|
||||
<va-card>
|
||||
<va-card-title>{{ t('fileUpload.mediaGallery') }}</va-card-title>
|
||||
<va-card-content>
|
||||
<va-file-upload v-model="gallery" type="gallery" file-types=".png, .jpg, .jpeg, .gif" />
|
||||
</va-card-content>
|
||||
</va-card>
|
||||
</div>
|
||||
<div class="flex xs12">
|
||||
<va-card>
|
||||
<va-card-title>{{ t('fileUpload.uploadList') }}</va-card-title>
|
||||
<va-card-content>
|
||||
<va-file-upload v-model="list" />
|
||||
</va-card-content>
|
||||
</va-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const advancedGallery = ref([])
|
||||
const advancedList = ref([])
|
||||
const single = ref([])
|
||||
const gallery = ref([])
|
||||
const list = ref([])
|
||||
</script>
|
||||
@@ -1,125 +0,0 @@
|
||||
<template>
|
||||
<div class="grid row">
|
||||
<div class="flex xs12 md12">
|
||||
<va-card>
|
||||
<va-card-title>{{ t('grid.fixed') }}</va-card-title>
|
||||
<va-card-content>
|
||||
<div class="row">
|
||||
<div class="flex xs12">
|
||||
<div class="grid__container va-text-center" :style="computedStyle">xs12</div>
|
||||
</div>
|
||||
<div v-for="i in 2" :key="`6${i}`" class="flex xs6">
|
||||
<div class="grid__container va-text-center" :style="computedStyle">xs6</div>
|
||||
</div>
|
||||
<div v-for="i in 3" :key="`4${i}`" class="flex xs4">
|
||||
<div class="grid__container va-text-center" :style="computedStyle">xs4</div>
|
||||
</div>
|
||||
</div>
|
||||
</va-card-content>
|
||||
</va-card>
|
||||
</div>
|
||||
<div class="flex md12 xs12">
|
||||
<va-card>
|
||||
<va-card-title>{{ t('grid.desktop') }}</va-card-title>
|
||||
<va-card-content>
|
||||
<div class="row">
|
||||
<div v-for="i in 3" :key="`4${i}`" class="flex xs6 lg4">
|
||||
<div class="grid__container va-text-center" :style="computedStyle">xs4</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div v-for="i in 6" :key="i" class="flex xs4 lg2">
|
||||
<div class="grid__container va-text-center" :style="computedStyle">xs2</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div v-for="i in 12" :key="i" class="flex xs3 lg1">
|
||||
<div class="grid__container va-text-center" :style="computedStyle">xs1</div>
|
||||
</div>
|
||||
</div>
|
||||
</va-card-content>
|
||||
</va-card>
|
||||
</div>
|
||||
|
||||
<div class="flex md12 xs12">
|
||||
<va-card>
|
||||
<va-card-title>{{ t('grid.responsive') }}</va-card-title>
|
||||
<va-card-content>
|
||||
<div class="row">
|
||||
<div class="flex xs12 md4">
|
||||
<div class="grid__container va-text-center" :style="computedStyle">xs12 md4</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="flex xs8 md3">
|
||||
<div class="grid__container va-text-center" :style="computedStyle">xs8 md3</div>
|
||||
</div>
|
||||
<div class="flex xs4 md9">
|
||||
<div class="grid__container va-text-center" :style="computedStyle">xs4 md9</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="flex xs3 md4">
|
||||
<div class="grid__container va-text-center" :style="computedStyle">xs3 md4</div>
|
||||
</div>
|
||||
<div class="flex xs6 md4">
|
||||
<div class="grid__container va-text-center" :style="computedStyle">xs6 md4</div>
|
||||
</div>
|
||||
<div class="flex xs3 md4">
|
||||
<div class="grid__container va-text-center" :style="computedStyle">xs3 md4</div>
|
||||
</div>
|
||||
</div>
|
||||
</va-card-content>
|
||||
</va-card>
|
||||
</div>
|
||||
|
||||
<div class="flex md12 xs12">
|
||||
<va-card>
|
||||
<va-card-title>{{ t('grid.offsets') }}</va-card-title>
|
||||
<va-card-content>
|
||||
<div class="row">
|
||||
<div class="flex xs6 md6 offset-md6">
|
||||
<div class="grid__container va-text-center" :style="computedStyle">xs6 md6 offset-md6</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex md6 offset-md3">
|
||||
<div class="grid__container va-text-center" :style="computedStyle">md6 offset-md3</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="flex md4">
|
||||
<div class="grid__container va-text-center" :style="computedStyle">md4</div>
|
||||
</div>
|
||||
<div class="flex md4 offset-md4">
|
||||
<div class="grid__container va-text-center" :style="computedStyle">md4 offset-md4</div>
|
||||
</div>
|
||||
</div>
|
||||
</va-card-content>
|
||||
</va-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useColors, useElementTextColor } from 'vuestic-ui'
|
||||
|
||||
const { t } = useI18n()
|
||||
const { colors } = useColors()
|
||||
const textColor = useElementTextColor(colors.primary)
|
||||
const computedStyle = computed(() => ({
|
||||
backgroundColor: colors.primary,
|
||||
color: textColor.value,
|
||||
}))
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.grid {
|
||||
&__container {
|
||||
min-height: 3rem;
|
||||
border-radius: 0.5rem;
|
||||
padding: 1rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,157 +0,0 @@
|
||||
<template>
|
||||
<div class="icon-set">
|
||||
<va-card class="icon-set__header mb-4 pb-3">
|
||||
<va-card-title>
|
||||
<h2 class="my-0 ml-2" :style="{ color: colors.dark }">
|
||||
{{ iconSet.name }}
|
||||
</h2>
|
||||
</va-card-title>
|
||||
<va-card-content class="row">
|
||||
<div class="flex md4 xs12 justify-center">
|
||||
<va-button preset="outline" border-color="primary" color="primary" :to="{ name: 'icon-sets' }">
|
||||
{{ t('icons.back') }}
|
||||
</va-button>
|
||||
</div>
|
||||
|
||||
<div class="flex md4 xs12 justify-center">
|
||||
<va-input v-model="search" :label="t('icons.search')" clearable>
|
||||
<template #prependInner>
|
||||
<va-icon class="icon-left input-icon" name="search" />
|
||||
</template>
|
||||
</va-input>
|
||||
</div>
|
||||
|
||||
<div class="flex md4 xs12 justify-center content icon-set__header__size">
|
||||
<span class="ma-2 pr-2 shrink icon-set__header__size--smaller" :style="{ color: colors.dark }">A</span>
|
||||
<va-slider
|
||||
v-model="iconSize"
|
||||
value-visible
|
||||
style="flex: 1"
|
||||
:label-value="`${iconSize}px`"
|
||||
:min="slider.min"
|
||||
:max="slider.max"
|
||||
>
|
||||
</va-slider>
|
||||
<span class="ma-2 pl-2 shrink icon-set__header__size--bigger" :style="{ color: colors.dark }">A</span>
|
||||
</div>
|
||||
</va-card-content>
|
||||
</va-card>
|
||||
|
||||
<va-card v-for="(list, index) in filteredLists" :key="index" class="flex md12">
|
||||
<va-card-title>
|
||||
{{ list.name }}
|
||||
</va-card-title>
|
||||
<va-card-content class="row">
|
||||
<span v-if="list.icons.length === 0">
|
||||
{{ t('icons.none') }}
|
||||
</span>
|
||||
<div
|
||||
v-for="icon in list.icons"
|
||||
:key="icon"
|
||||
class="flex justify-center xs3 md1 mb-2 icon-grid-container"
|
||||
style="flex-direction: column"
|
||||
>
|
||||
<div class="vuestic-icon mb-3 pt-3">
|
||||
<va-icon :name="iconName(icon)" :size="iconSize" />
|
||||
</div>
|
||||
<div class="icon-text">
|
||||
{{ icon }}
|
||||
</div>
|
||||
</div>
|
||||
</va-card-content>
|
||||
</va-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useColors } from 'vuestic-ui'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { computed, ref } from 'vue'
|
||||
import { IconSet } from './types'
|
||||
|
||||
const { colors } = useColors()
|
||||
const { t } = useI18n()
|
||||
|
||||
const props = defineProps<{
|
||||
name: string
|
||||
sets: IconSet[]
|
||||
}>()
|
||||
|
||||
const search = ref('')
|
||||
const iconSize = ref(30)
|
||||
const slider = ref({
|
||||
formatter: (v: never) => `${v}px`,
|
||||
min: 20,
|
||||
max: 40,
|
||||
})
|
||||
|
||||
const iconSet = computed((): IconSet => {
|
||||
for (const set of props.sets) {
|
||||
if (set.href === props.name) {
|
||||
return set
|
||||
}
|
||||
}
|
||||
|
||||
return { name: '', href: '', prefix: '', lists: [], filteredLists: [] }
|
||||
})
|
||||
|
||||
const filteredLists = computed(() => {
|
||||
if (!search.value) {
|
||||
// If nothing is searched - we return all sets
|
||||
return iconSet.value.lists
|
||||
}
|
||||
|
||||
const foundIcons: string[] = []
|
||||
iconSet.value.lists.forEach((list) => {
|
||||
list.icons.forEach((icon) => {
|
||||
if (!icon.toUpperCase().includes(search.value.toUpperCase())) {
|
||||
return
|
||||
}
|
||||
// Same icon could be included in different sets.
|
||||
if (foundIcons.includes(icon)) {
|
||||
return
|
||||
}
|
||||
foundIcons.push(icon)
|
||||
})
|
||||
})
|
||||
|
||||
// We return all found icons as a single set.
|
||||
return [
|
||||
{
|
||||
name: 'Found Icons',
|
||||
icons: foundIcons,
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
const iconName = (icon: string) => `${iconSet.value.prefix}-${icon}`
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.icon-set {
|
||||
.icon-grid-container {
|
||||
.icon-text {
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__header {
|
||||
&__size {
|
||||
&--smaller,
|
||||
&--bigger {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&--smaller {
|
||||
line-height: 1em;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
&--bigger {
|
||||
line-height: 1.3em;
|
||||
font-size: 1.3em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,33 +0,0 @@
|
||||
<template>
|
||||
<div class="icons">
|
||||
<router-view :sets="sets"></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { IconSet } from './types'
|
||||
|
||||
const sets = computed<IconSet[]>(() => {
|
||||
const sets = import.meta.globEager('./sets/*.json', {})
|
||||
|
||||
return Object.values(sets)
|
||||
.reverse()
|
||||
.map((module) => {
|
||||
addFilteredListsTo(module.default)
|
||||
return module.default
|
||||
})
|
||||
})
|
||||
|
||||
function addFilteredListsTo(set: IconSet) {
|
||||
// This allows us to add icons to icon set.
|
||||
const list = set.lists[0].icons
|
||||
const filteredLists = []
|
||||
|
||||
filteredLists.push(list.slice(0, 6))
|
||||
filteredLists.push(list.slice(6, 8))
|
||||
filteredLists.push(list.slice(8, 14))
|
||||
|
||||
set.filteredLists = filteredLists
|
||||
}
|
||||
</script>
|
||||
@@ -1,89 +0,0 @@
|
||||
<template>
|
||||
<div class="row">
|
||||
<div v-for="(set, index) in sets" :key="index" class="va-card-wrapper flex lg6 xs12">
|
||||
<va-card>
|
||||
<router-link :to="{ path: `icons/${set.href}` }" append style="color: inherit">
|
||||
<div class="sets-list__set__content">
|
||||
<div class="sets-list__set__content__overlay pa-3 fill-height">
|
||||
<va-button>
|
||||
{{ set.name.toUpperCase() }}
|
||||
</va-button>
|
||||
</div>
|
||||
|
||||
<template v-for="(filteredList, i) in set.filteredLists">
|
||||
<div v-if="filteredList.length !== 2" :key="i" class="row pa-3">
|
||||
<div v-for="(icon, j) in filteredList" :key="j" class="sets-list__icon flex xs2">
|
||||
<div class="vuestic-icon">
|
||||
<va-icon :name="iconName(set, icon)" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="filteredList.length === 2"
|
||||
:key="i"
|
||||
class="row pa-3"
|
||||
:class="i === 1 ? 'sets-list__set__content--middle' : ''"
|
||||
>
|
||||
<div class="sets-list__icon flex xs2">
|
||||
<div class="vuestic-icon">
|
||||
<va-icon :name="iconName(set, filteredList[0])" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex xs8" />
|
||||
<div class="sets-list__icon flex xs2">
|
||||
<div class="vuestic-icon">
|
||||
<va-icon :name="iconName(set, filteredList[1])" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</router-link>
|
||||
</va-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { IconSet } from './types'
|
||||
|
||||
defineProps<{
|
||||
sets: IconSet[]
|
||||
}>()
|
||||
|
||||
const iconName = (set: IconSet, icon: string) => `${set.prefix}-${icon}`
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.sets-list {
|
||||
&__icon {
|
||||
max-width: 1.5rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.vuestic-icon {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__set {
|
||||
position: relative;
|
||||
|
||||
&__content {
|
||||
position: relative;
|
||||
|
||||
&__overlay {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,44 +0,0 @@
|
||||
{
|
||||
"name": "Brandico",
|
||||
"href": "brandico",
|
||||
"prefix": "brandico",
|
||||
"lists": [
|
||||
{
|
||||
"name": "Icons",
|
||||
"icons": [
|
||||
"facebook",
|
||||
"facebook-rect",
|
||||
"twitter",
|
||||
"twitter-bird",
|
||||
"vimeo",
|
||||
"vimeo-rect",
|
||||
"tumblr",
|
||||
"tumblr-rect",
|
||||
"googleplus-rect",
|
||||
"github-text",
|
||||
"github",
|
||||
"skype",
|
||||
"icq",
|
||||
"yandex",
|
||||
"yandex-rect",
|
||||
"vkontakte-rect",
|
||||
"odnoklassniki",
|
||||
"odnoklassniki-rect",
|
||||
"friendfeed",
|
||||
"friendfeed-rect",
|
||||
"blogger",
|
||||
"blogger-rect",
|
||||
"deviantart",
|
||||
"jabber",
|
||||
"lastfm",
|
||||
"lastfm-rect",
|
||||
"linkedin",
|
||||
"linkedin-rect",
|
||||
"picasa",
|
||||
"wordpress",
|
||||
"instagram",
|
||||
"instagram-filled"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -1,347 +0,0 @@
|
||||
{
|
||||
"name": "Typicons",
|
||||
"href": "typicons",
|
||||
"prefix": "typicons",
|
||||
"lists": [
|
||||
{
|
||||
"name": "Icons",
|
||||
"icons": [
|
||||
"adjust-brightness",
|
||||
"adjust-contrast",
|
||||
"anchor-outline",
|
||||
"anchor",
|
||||
"archive",
|
||||
"arrow-back-outline",
|
||||
"arrow-back",
|
||||
"arrow-down-outline",
|
||||
"arrow-down-thick",
|
||||
"arrow-down",
|
||||
"arrow-forward-outline",
|
||||
"arrow-forward",
|
||||
"arrow-left-outline",
|
||||
"arrow-left-thick",
|
||||
"arrow-left",
|
||||
"arrow-loop-outline",
|
||||
"arrow-loop",
|
||||
"arrow-maximise-outline",
|
||||
"arrow-maximise",
|
||||
"arrow-minimise-outline",
|
||||
"arrow-minimise",
|
||||
"arrow-move-outline",
|
||||
"arrow-move",
|
||||
"arrow-repeat-outline",
|
||||
"arrow-repeat",
|
||||
"arrow-right-outline",
|
||||
"arrow-right-thick",
|
||||
"arrow-right",
|
||||
"arrow-shuffle",
|
||||
"arrow-sorted-down",
|
||||
"arrow-sorted-up",
|
||||
"arrow-sync-outline",
|
||||
"arrow-sync",
|
||||
"arrow-unsorted",
|
||||
"arrow-up-outline",
|
||||
"arrow-up-thick",
|
||||
"arrow-up",
|
||||
"at",
|
||||
"attachment-outline",
|
||||
"attachment",
|
||||
"backspace-outline",
|
||||
"backspace",
|
||||
"battery-charge",
|
||||
"battery-full",
|
||||
"battery-high",
|
||||
"battery-low",
|
||||
"battery-mid",
|
||||
"beaker",
|
||||
"beer",
|
||||
"bell",
|
||||
"book",
|
||||
"bookmark",
|
||||
"briefcase",
|
||||
"brush",
|
||||
"business-card",
|
||||
"calculator",
|
||||
"calendar-outline",
|
||||
"calendar",
|
||||
"camera-outline",
|
||||
"camera",
|
||||
"cancel-outline",
|
||||
"cancel",
|
||||
"chart-area-outline",
|
||||
"chart-area",
|
||||
"chart-bar-outline",
|
||||
"chart-bar",
|
||||
"chart-line-outline",
|
||||
"chart-line",
|
||||
"chart-pie-outline",
|
||||
"chart-pie",
|
||||
"chevron-left-outline",
|
||||
"chevron-left",
|
||||
"chevron-right-outline",
|
||||
"chevron-right",
|
||||
"clipboard",
|
||||
"cloud-storage",
|
||||
"cloud-storage-outline",
|
||||
"code-outline",
|
||||
"code",
|
||||
"coffee",
|
||||
"cog-outline",
|
||||
"cog",
|
||||
"compass",
|
||||
"contacts",
|
||||
"credit-card",
|
||||
"css3",
|
||||
"database",
|
||||
"delete-outline",
|
||||
"delete",
|
||||
"device-desktop",
|
||||
"device-laptop",
|
||||
"device-phone",
|
||||
"device-tablet",
|
||||
"directions",
|
||||
"divide-outline",
|
||||
"divide",
|
||||
"document-add",
|
||||
"document-delete",
|
||||
"document-text",
|
||||
"document",
|
||||
"download-outline",
|
||||
"download",
|
||||
"dropbox",
|
||||
"edit",
|
||||
"eject-outline",
|
||||
"eject",
|
||||
"equals-outline",
|
||||
"equals",
|
||||
"export-outline",
|
||||
"export",
|
||||
"eye-outline",
|
||||
"eye",
|
||||
"feather",
|
||||
"film",
|
||||
"filter",
|
||||
"flag-outline",
|
||||
"flag",
|
||||
"flash-outline",
|
||||
"flash",
|
||||
"flow-children",
|
||||
"flow-merge",
|
||||
"flow-parallel",
|
||||
"flow-switch",
|
||||
"folder-add",
|
||||
"folder-delete",
|
||||
"folder-open",
|
||||
"folder",
|
||||
"gift",
|
||||
"globe-outline",
|
||||
"globe",
|
||||
"group-outline",
|
||||
"group",
|
||||
"headphones",
|
||||
"heart-full-outline",
|
||||
"heart-half-outline",
|
||||
"heart-outline",
|
||||
"heart",
|
||||
"home-outline",
|
||||
"home",
|
||||
"html5",
|
||||
"image-outline",
|
||||
"image",
|
||||
"infinity-outline",
|
||||
"infinity",
|
||||
"info-large-outline",
|
||||
"info-large",
|
||||
"info-outline",
|
||||
"info",
|
||||
"input-checked-outline",
|
||||
"input-checked",
|
||||
"key-outline",
|
||||
"key",
|
||||
"keyboard",
|
||||
"leaf",
|
||||
"lightbulb",
|
||||
"link-outline",
|
||||
"link",
|
||||
"location-arrow-outline",
|
||||
"location-arrow",
|
||||
"location-outline",
|
||||
"location",
|
||||
"lock-closed-outline",
|
||||
"lock-closed",
|
||||
"lock-open-outline",
|
||||
"lock-open",
|
||||
"mail",
|
||||
"map",
|
||||
"media-eject-outline",
|
||||
"media-eject",
|
||||
"media-fast-forward-outline",
|
||||
"media-fast-forward",
|
||||
"media-pause-outline",
|
||||
"media-pause",
|
||||
"media-play-outline",
|
||||
"media-play-reverse-outline",
|
||||
"media-play-reverse",
|
||||
"media-play",
|
||||
"media-record-outline",
|
||||
"media-record",
|
||||
"media-rewind-outline",
|
||||
"media-rewind",
|
||||
"media-stop-outline",
|
||||
"media-stop",
|
||||
"message-typing",
|
||||
"message",
|
||||
"messages",
|
||||
"microphone-outline",
|
||||
"microphone",
|
||||
"minus-outline",
|
||||
"minus",
|
||||
"mortar-board",
|
||||
"news",
|
||||
"notes-outline",
|
||||
"notes",
|
||||
"pen",
|
||||
"pencil",
|
||||
"phone-outline",
|
||||
"phone",
|
||||
"pi-outline",
|
||||
"pi",
|
||||
"pin-outline",
|
||||
"pin",
|
||||
"pipette",
|
||||
"plane-outline",
|
||||
"plane",
|
||||
"plug",
|
||||
"plus-outline",
|
||||
"plus",
|
||||
"point-of-interest-outline",
|
||||
"point-of-interest",
|
||||
"power-outline",
|
||||
"power",
|
||||
"printer",
|
||||
"puzzle-outline",
|
||||
"puzzle",
|
||||
"radar-outline",
|
||||
"radar",
|
||||
"refresh-outline",
|
||||
"refresh",
|
||||
"rss-outline",
|
||||
"rss",
|
||||
"scissors-outline",
|
||||
"scissors",
|
||||
"shopping-bag",
|
||||
"shopping-cart",
|
||||
"social-at-circular",
|
||||
"social-dribbble-circular",
|
||||
"social-dribbble",
|
||||
"social-facebook-circular",
|
||||
"social-facebook",
|
||||
"social-flickr-circular",
|
||||
"social-flickr",
|
||||
"social-github-circular",
|
||||
"social-github",
|
||||
"social-google-plus-circular",
|
||||
"social-google-plus",
|
||||
"social-instagram-circular",
|
||||
"social-instagram",
|
||||
"social-last-fm-circular",
|
||||
"social-last-fm",
|
||||
"social-linkedin-circular",
|
||||
"social-linkedin",
|
||||
"social-pinterest-circular",
|
||||
"social-pinterest",
|
||||
"social-skype-outline",
|
||||
"social-skype",
|
||||
"social-tumbler-circular",
|
||||
"social-tumbler",
|
||||
"social-twitter-circular",
|
||||
"social-twitter",
|
||||
"social-vimeo-circular",
|
||||
"social-vimeo",
|
||||
"social-youtube-circular",
|
||||
"social-youtube",
|
||||
"sort-alphabetically-outline",
|
||||
"sort-alphabetically",
|
||||
"sort-numerically-outline",
|
||||
"sort-numerically",
|
||||
"spanner-outline",
|
||||
"spanner",
|
||||
"spiral",
|
||||
"star-full-outline",
|
||||
"star-half-outline",
|
||||
"star-half",
|
||||
"star-outline",
|
||||
"star",
|
||||
"starburst-outline",
|
||||
"starburst",
|
||||
"stopwatch",
|
||||
"support",
|
||||
"tabs-outline",
|
||||
"tag",
|
||||
"tags",
|
||||
"th-large-outline",
|
||||
"th-large",
|
||||
"th-list-outline",
|
||||
"th-list",
|
||||
"th-menu-outline",
|
||||
"th-menu",
|
||||
"th-small-outline",
|
||||
"th-small",
|
||||
"thermometer",
|
||||
"thumbs-down",
|
||||
"thumbs-ok",
|
||||
"thumbs-up",
|
||||
"tick-outline",
|
||||
"tick",
|
||||
"ticket",
|
||||
"time",
|
||||
"times-outline",
|
||||
"times",
|
||||
"trash",
|
||||
"tree",
|
||||
"upload-outline",
|
||||
"upload",
|
||||
"user-add-outline",
|
||||
"user-add",
|
||||
"user-delete-outline",
|
||||
"user-delete",
|
||||
"user-outline",
|
||||
"user",
|
||||
"vendor-android",
|
||||
"vendor-apple",
|
||||
"vendor-microsoft",
|
||||
"video-outline",
|
||||
"video",
|
||||
"volume-down",
|
||||
"volume-mute",
|
||||
"volume-up",
|
||||
"volume",
|
||||
"warning-outline",
|
||||
"warning",
|
||||
"watch",
|
||||
"waves-outline",
|
||||
"waves",
|
||||
"weather-cloudy",
|
||||
"weather-downpour",
|
||||
"weather-night",
|
||||
"weather-partly-sunny",
|
||||
"weather-shower",
|
||||
"weather-snow",
|
||||
"weather-stormy",
|
||||
"weather-sunny",
|
||||
"weather-windy-cloudy",
|
||||
"weather-windy",
|
||||
"wi-fi-outline",
|
||||
"wi-fi",
|
||||
"wine",
|
||||
"world-outline",
|
||||
"world",
|
||||
"zoom-in-outline",
|
||||
"zoom-in",
|
||||
"zoom-out-outline",
|
||||
"zoom-out",
|
||||
"zoom-outline"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -1,301 +0,0 @@
|
||||
{
|
||||
"name": "Entypo",
|
||||
"href": "entypo",
|
||||
"prefix": "entypo",
|
||||
"lists": [
|
||||
{
|
||||
"name": "Main Icons",
|
||||
"icons": [
|
||||
"note",
|
||||
"logo-db",
|
||||
"music",
|
||||
"search",
|
||||
"flashlight",
|
||||
"mail",
|
||||
"heart",
|
||||
"heart-empty",
|
||||
"star",
|
||||
"star-empty",
|
||||
"user",
|
||||
"users",
|
||||
"user-add",
|
||||
"video",
|
||||
"picture",
|
||||
"camera",
|
||||
"layout",
|
||||
"menu",
|
||||
"check",
|
||||
"cancel",
|
||||
"cancel-circled",
|
||||
"cancel-squared",
|
||||
"plus",
|
||||
"plus-circled",
|
||||
"plus-squared",
|
||||
"minus",
|
||||
"minus-circled",
|
||||
"minus-squared",
|
||||
"help",
|
||||
"help-circled",
|
||||
"info",
|
||||
"info-circled",
|
||||
"back",
|
||||
"home",
|
||||
"link",
|
||||
"attach",
|
||||
"lock",
|
||||
"lock-open",
|
||||
"eye",
|
||||
"tag",
|
||||
"bookmark",
|
||||
"bookmarks",
|
||||
"flag",
|
||||
"thumbs-up",
|
||||
"thumbs-down",
|
||||
"download",
|
||||
"upload",
|
||||
"upload-cloud",
|
||||
"reply",
|
||||
"reply-all",
|
||||
"forward",
|
||||
"quote",
|
||||
"code",
|
||||
"export",
|
||||
"pencil",
|
||||
"feather",
|
||||
"print",
|
||||
"retweet",
|
||||
"keyboard",
|
||||
"comment",
|
||||
"chat",
|
||||
"bell",
|
||||
"attention",
|
||||
"alert",
|
||||
"vcard",
|
||||
"address",
|
||||
"location",
|
||||
"map",
|
||||
"direction",
|
||||
"compass",
|
||||
"cup",
|
||||
"trash",
|
||||
"doc",
|
||||
"docs",
|
||||
"doc-landscape",
|
||||
"doc-text",
|
||||
"doc-text-inv",
|
||||
"newspaper",
|
||||
"book-open",
|
||||
"book",
|
||||
"folder",
|
||||
"archive",
|
||||
"box",
|
||||
"rss",
|
||||
"phone",
|
||||
"cog",
|
||||
"tools",
|
||||
"share",
|
||||
"shareable",
|
||||
"basket",
|
||||
"bag",
|
||||
"calendar",
|
||||
"login",
|
||||
"logout",
|
||||
"mic",
|
||||
"mute",
|
||||
"sound",
|
||||
"volume",
|
||||
"clock",
|
||||
"hourglass",
|
||||
"lamp",
|
||||
"light-down",
|
||||
"light-up",
|
||||
"adjust",
|
||||
"block",
|
||||
"resize-full",
|
||||
"resize-small",
|
||||
"popup",
|
||||
"publish",
|
||||
"window",
|
||||
"arrow-combo",
|
||||
"down-circled",
|
||||
"left-circled",
|
||||
"right-circled",
|
||||
"up-circled",
|
||||
"down-open",
|
||||
"left-open",
|
||||
"right-open",
|
||||
"up-open",
|
||||
"down-open-mini",
|
||||
"left-open-mini",
|
||||
"right-open-mini",
|
||||
"up-open-mini",
|
||||
"down-open-big",
|
||||
"left-open-big",
|
||||
"right-open-big",
|
||||
"up-open-big",
|
||||
"down",
|
||||
"left",
|
||||
"right",
|
||||
"up",
|
||||
"down-dir",
|
||||
"left-dir",
|
||||
"right-dir",
|
||||
"up-dir",
|
||||
"down-bold",
|
||||
"left-bold",
|
||||
"right-bold",
|
||||
"up-bold",
|
||||
"down-thin",
|
||||
"left-thin",
|
||||
"right-thin",
|
||||
"note-beamed",
|
||||
"ccw",
|
||||
"cw",
|
||||
"arrows-ccw",
|
||||
"level-down",
|
||||
"level-up",
|
||||
"shuffle",
|
||||
"loop",
|
||||
"switch",
|
||||
"play",
|
||||
"stop",
|
||||
"pause",
|
||||
"record",
|
||||
"to-end",
|
||||
"to-start",
|
||||
"fast-forward",
|
||||
"fast-backward",
|
||||
"progress-0",
|
||||
"progress-1",
|
||||
"progress-2",
|
||||
"progress-3",
|
||||
"target",
|
||||
"palette",
|
||||
"list",
|
||||
"list-add",
|
||||
"signal",
|
||||
"trophy",
|
||||
"battery",
|
||||
"back-in-time",
|
||||
"monitor",
|
||||
"mobile",
|
||||
"network",
|
||||
"cd",
|
||||
"inbox",
|
||||
"install",
|
||||
"globe",
|
||||
"cloud",
|
||||
"cloud-thunder",
|
||||
"flash",
|
||||
"moon",
|
||||
"flight",
|
||||
"paper-plane",
|
||||
"leaf",
|
||||
"lifebuoy",
|
||||
"mouse",
|
||||
"briefcase",
|
||||
"suitcase",
|
||||
"dot",
|
||||
"dot-2",
|
||||
"dot-3",
|
||||
"brush",
|
||||
"magnet",
|
||||
"infinity",
|
||||
"erase",
|
||||
"chart-pie",
|
||||
"chart-line",
|
||||
"chart-bar",
|
||||
"chart-area",
|
||||
"tape",
|
||||
"graduation-cap",
|
||||
"language",
|
||||
"ticket",
|
||||
"water",
|
||||
"droplet",
|
||||
"air",
|
||||
"credit-card",
|
||||
"floppy",
|
||||
"clipboard",
|
||||
"megaphone",
|
||||
"database",
|
||||
"drive",
|
||||
"bucket",
|
||||
"thermometer",
|
||||
"key",
|
||||
"flow-cascade",
|
||||
"flow-branch",
|
||||
"flow-tree",
|
||||
"flow-line",
|
||||
"flow-parallel",
|
||||
"rocket",
|
||||
"gauge",
|
||||
"traffic-cone",
|
||||
"cc",
|
||||
"cc-by",
|
||||
"cc-nc",
|
||||
"cc-nc-eu",
|
||||
"cc-nc-jp",
|
||||
"cc-sa",
|
||||
"cc-nd",
|
||||
"cc-pd",
|
||||
"cc-zero",
|
||||
"cc-share",
|
||||
"cc-remix"
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Social Icons",
|
||||
"icons": [
|
||||
"github",
|
||||
"github-circled",
|
||||
"flickr",
|
||||
"flickr-circled",
|
||||
"vimeo",
|
||||
"vimeo-circled",
|
||||
"twitter",
|
||||
"twitter-circled",
|
||||
"facebook",
|
||||
"facebook-circled",
|
||||
"facebook-squared",
|
||||
"gplus",
|
||||
"gplus-circled",
|
||||
"pinterest",
|
||||
"pinterest-circled",
|
||||
"tumblr",
|
||||
"tumblr-circled",
|
||||
"linkedin",
|
||||
"linkedin-circled",
|
||||
"dribbble",
|
||||
"dribbble-circled",
|
||||
"stumbleupon",
|
||||
"stumbleupon-circled",
|
||||
"lastfm",
|
||||
"lastfm-circled",
|
||||
"rdio",
|
||||
"rdio-circled",
|
||||
"spotify",
|
||||
"spotify-circled",
|
||||
"qq",
|
||||
"instagram",
|
||||
"dropbox",
|
||||
"evernote",
|
||||
"flattr",
|
||||
"skype",
|
||||
"skype-circled",
|
||||
"renren",
|
||||
"sina-weibo",
|
||||
"paypal",
|
||||
"picasa",
|
||||
"soundcloud",
|
||||
"mixi",
|
||||
"behance",
|
||||
"google-circles",
|
||||
"vkontakte",
|
||||
"smashing",
|
||||
"sweden",
|
||||
"db-shape",
|
||||
"up-thin"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -1,749 +0,0 @@
|
||||
{
|
||||
"name": "Font Awesome",
|
||||
"href": "font-awesome",
|
||||
"prefix": "fa-solid fa",
|
||||
"lists": [
|
||||
{
|
||||
"name": "Web Applications Icons",
|
||||
"icons": [
|
||||
"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",
|
||||
"bahai",
|
||||
"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",
|
||||
"caravan",
|
||||
"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-alt",
|
||||
"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",
|
||||
"disease",
|
||||
"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-alt",
|
||||
"expand-arrows-alt",
|
||||
"external-link-alt",
|
||||
"external-link-square-alt",
|
||||
"eye",
|
||||
"eye-dropper",
|
||||
"eye-slash",
|
||||
"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-holding-water",
|
||||
"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",
|
||||
"hdd",
|
||||
"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",
|
||||
"hospital-user",
|
||||
"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",
|
||||
"lungs",
|
||||
"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"
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Accessibility Icons",
|
||||
"icons": [
|
||||
"audio-description",
|
||||
"braille",
|
||||
"circle-info",
|
||||
"circle-question",
|
||||
"closed-captioning",
|
||||
"ear-deaf",
|
||||
"ear-listen",
|
||||
"eye",
|
||||
"eye-low-vision",
|
||||
"fingerprint",
|
||||
"hands",
|
||||
"hands-asl-interpreting",
|
||||
"handshake-angle",
|
||||
"person-cane",
|
||||
"person-walking-with-cane",
|
||||
"phone-volume",
|
||||
"question",
|
||||
"tty",
|
||||
"universal-access",
|
||||
"wheelchair",
|
||||
"wheelchair-move"
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Transportation Icons",
|
||||
"icons": [
|
||||
"ambulance",
|
||||
"automobile",
|
||||
"bicycle",
|
||||
"bus",
|
||||
"cab",
|
||||
"car",
|
||||
"fighter-jet",
|
||||
"motorcycle",
|
||||
"plane",
|
||||
"rocket",
|
||||
"ship",
|
||||
"space-shuttle",
|
||||
"subway",
|
||||
"taxi",
|
||||
"train",
|
||||
"truck",
|
||||
"wheelchair",
|
||||
"wheelchair-alt"
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Gender Icons",
|
||||
"icons": [
|
||||
"genderless",
|
||||
"mars",
|
||||
"mars-double",
|
||||
"mars-stroke",
|
||||
"mars-stroke-h",
|
||||
"mars-stroke-v",
|
||||
"mercury",
|
||||
"neuter",
|
||||
"transgender",
|
||||
"transgender-alt",
|
||||
"venus",
|
||||
"venus-double",
|
||||
"venus-mars"
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Spinner Icons",
|
||||
"icons": ["cog", "gear", "refresh", "spinner"]
|
||||
},
|
||||
{
|
||||
"name": "Chart Icons",
|
||||
"icons": ["area-chart", "bar-chart", "line-chart", "pie-chart"]
|
||||
},
|
||||
{
|
||||
"name": "Currency Icons",
|
||||
"icons": [
|
||||
"cny",
|
||||
"dollar",
|
||||
"eur",
|
||||
"euro",
|
||||
"gbp",
|
||||
"ils",
|
||||
"inr",
|
||||
"jpy",
|
||||
"krw",
|
||||
"rmb",
|
||||
"rouble",
|
||||
"rub",
|
||||
"ruble",
|
||||
"rupee",
|
||||
"shekel",
|
||||
"sheqel",
|
||||
"try",
|
||||
"turkish-lira",
|
||||
"usd",
|
||||
"won",
|
||||
"yen"
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Text Editor Icons",
|
||||
"icons": [
|
||||
"align-center",
|
||||
"align-justify",
|
||||
"align-left",
|
||||
"align-right",
|
||||
"bold",
|
||||
"chain",
|
||||
"chain-broken",
|
||||
"clipboard",
|
||||
"columns",
|
||||
"copy",
|
||||
"cut",
|
||||
"dedent",
|
||||
"eraser",
|
||||
"file",
|
||||
"file-text",
|
||||
"font",
|
||||
"header",
|
||||
"indent",
|
||||
"italic",
|
||||
"link",
|
||||
"list",
|
||||
"list-alt",
|
||||
"list-ol",
|
||||
"list-ul",
|
||||
"outdent",
|
||||
"paperclip",
|
||||
"paragraph",
|
||||
"paste",
|
||||
"repeat",
|
||||
"rotate-left",
|
||||
"rotate-right",
|
||||
"save",
|
||||
"scissors",
|
||||
"strikethrough",
|
||||
"subscript",
|
||||
"superscript",
|
||||
"table",
|
||||
"text-height",
|
||||
"text-width",
|
||||
"th",
|
||||
"th-large",
|
||||
"th-list",
|
||||
"underline",
|
||||
"undo",
|
||||
"unlink"
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Directional Icons",
|
||||
"icons": [
|
||||
"angle-double-down",
|
||||
"angle-double-left",
|
||||
"angle-double-right",
|
||||
"angle-double-up",
|
||||
"angle-down",
|
||||
"angle-left",
|
||||
"angle-right",
|
||||
"angle-up",
|
||||
"arrow-circle-down",
|
||||
"arrow-circle-left",
|
||||
"arrow-circle-right",
|
||||
"arrow-circle-up",
|
||||
"arrow-down",
|
||||
"arrow-left",
|
||||
"arrow-right",
|
||||
"arrow-up",
|
||||
"arrows",
|
||||
"arrows-alt",
|
||||
"arrows-h",
|
||||
"arrows-v",
|
||||
"caret-down",
|
||||
"caret-left",
|
||||
"caret-right",
|
||||
"caret-up",
|
||||
"chevron-circle-down",
|
||||
"chevron-circle-left",
|
||||
"chevron-circle-right",
|
||||
"chevron-circle-up",
|
||||
"chevron-down",
|
||||
"chevron-left",
|
||||
"chevron-right",
|
||||
"chevron-up",
|
||||
"exchange",
|
||||
"long-arrow-down",
|
||||
"long-arrow-left",
|
||||
"long-arrow-right",
|
||||
"long-arrow-up"
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Video Player Icons",
|
||||
"icons": [
|
||||
"arrows-alt",
|
||||
"backward",
|
||||
"compress",
|
||||
"eject",
|
||||
"expand",
|
||||
"fast-backward",
|
||||
"fast-forward",
|
||||
"forward",
|
||||
"pause",
|
||||
"pause-circle",
|
||||
"play",
|
||||
"play-circle",
|
||||
"random",
|
||||
"step-backward",
|
||||
"step-forward",
|
||||
"stop",
|
||||
"stop-circle"
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Medical Icons",
|
||||
"icons": [
|
||||
"ambulance",
|
||||
"h-square",
|
||||
"heart",
|
||||
"heartbeat",
|
||||
"medkit",
|
||||
"plus-square",
|
||||
"stethoscope",
|
||||
"user-md",
|
||||
"wheelchair",
|
||||
"wheelchair-alt"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -1,42 +0,0 @@
|
||||
{
|
||||
"name": "Fontelico",
|
||||
"href": "fontelico",
|
||||
"prefix": "fontelico",
|
||||
"lists": [
|
||||
{
|
||||
"name": "Icons",
|
||||
"icons": [
|
||||
"emo-happy",
|
||||
"emo-wink",
|
||||
"emo-wink2",
|
||||
"emo-unhappy",
|
||||
"emo-sleep",
|
||||
"emo-thumbsup",
|
||||
"emo-devil",
|
||||
"emo-surprised",
|
||||
"emo-tongue",
|
||||
"emo-coffee",
|
||||
"emo-sunglasses",
|
||||
"emo-displeased",
|
||||
"emo-beer",
|
||||
"emo-grin",
|
||||
"emo-angry",
|
||||
"emo-saint",
|
||||
"emo-cry",
|
||||
"emo-shoot",
|
||||
"emo-squint",
|
||||
"emo-laugh",
|
||||
"spin1",
|
||||
"spin2",
|
||||
"spin3",
|
||||
"spin4",
|
||||
"spin5",
|
||||
"spin6",
|
||||
"firefox",
|
||||
"chrome",
|
||||
"opera",
|
||||
"ie"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -1,271 +0,0 @@
|
||||
{
|
||||
"name": "GlyphIcons",
|
||||
"href": "glyphicons",
|
||||
"prefix": "glyphicon",
|
||||
"lists": [
|
||||
{
|
||||
"name": "Icons",
|
||||
"icons": [
|
||||
"asterisk",
|
||||
"plus",
|
||||
"minus",
|
||||
"eur",
|
||||
"euro",
|
||||
"cloud",
|
||||
"envelope",
|
||||
"pencil",
|
||||
"glass",
|
||||
"music",
|
||||
"search",
|
||||
"heart",
|
||||
"star",
|
||||
"star-empty",
|
||||
"user",
|
||||
"film",
|
||||
"th-large",
|
||||
"th",
|
||||
"th-list",
|
||||
"ok",
|
||||
"remove",
|
||||
"zoom-in",
|
||||
"zoom-out",
|
||||
"off",
|
||||
"signal",
|
||||
"cog",
|
||||
"trash",
|
||||
"home",
|
||||
"file",
|
||||
"time",
|
||||
"road",
|
||||
"download-alt",
|
||||
"download",
|
||||
"upload",
|
||||
"inbox",
|
||||
"play-circle",
|
||||
"repeat",
|
||||
"refresh",
|
||||
"list-alt",
|
||||
"lock",
|
||||
"flag",
|
||||
"headphones",
|
||||
"volume-off",
|
||||
"volume-down",
|
||||
"volume-up",
|
||||
"qrcode",
|
||||
"barcode",
|
||||
"tag",
|
||||
"tags",
|
||||
"book",
|
||||
"bookmark",
|
||||
"print",
|
||||
"camera",
|
||||
"font",
|
||||
"bold",
|
||||
"italic",
|
||||
"text-height",
|
||||
"text-width",
|
||||
"align-left",
|
||||
"align-center",
|
||||
"align-right",
|
||||
"align-justify",
|
||||
"list",
|
||||
"indent-left",
|
||||
"indent-right",
|
||||
"facetime-video",
|
||||
"picture",
|
||||
"map-marker",
|
||||
"adjust",
|
||||
"tint",
|
||||
"edit",
|
||||
"share",
|
||||
"check",
|
||||
"move",
|
||||
"step-backward",
|
||||
"fast-backward",
|
||||
"backward",
|
||||
"play",
|
||||
"pause",
|
||||
"stop",
|
||||
"forward",
|
||||
"fast-forward",
|
||||
"step-forward",
|
||||
"eject",
|
||||
"chevron-left",
|
||||
"chevron-right",
|
||||
"plus-sign",
|
||||
"minus-sign",
|
||||
"remove-sign",
|
||||
"ok-sign",
|
||||
"question-sign",
|
||||
"info-sign",
|
||||
"screenshot",
|
||||
"remove-circle",
|
||||
"ok-circle",
|
||||
"ban-circle",
|
||||
"arrow-left",
|
||||
"arrow-right",
|
||||
"arrow-up",
|
||||
"arrow-down",
|
||||
"share-alt",
|
||||
"resize-full",
|
||||
"resize-small",
|
||||
"exclamation-sign",
|
||||
"gift",
|
||||
"leaf",
|
||||
"fire",
|
||||
"eye-open",
|
||||
"eye-close",
|
||||
"warning-sign",
|
||||
"plane",
|
||||
"calendar",
|
||||
"random",
|
||||
"comment",
|
||||
"magnet",
|
||||
"chevron-up",
|
||||
"chevron-down",
|
||||
"retweet",
|
||||
"shopping-cart",
|
||||
"folder-close",
|
||||
"folder-open",
|
||||
"resize-vertical",
|
||||
"resize-horizontal",
|
||||
"hdd",
|
||||
"bullhorn",
|
||||
"bell",
|
||||
"certificate",
|
||||
"thumbs-up",
|
||||
"thumbs-down",
|
||||
"hand-right",
|
||||
"hand-left",
|
||||
"hand-up",
|
||||
"hand-down",
|
||||
"circle-arrow-right",
|
||||
"circle-arrow-left",
|
||||
"circle-arrow-up",
|
||||
"circle-arrow-down",
|
||||
"globe",
|
||||
"wrench",
|
||||
"tasks",
|
||||
"filter",
|
||||
"briefcase",
|
||||
"fullscreen",
|
||||
"dashboard",
|
||||
"paperclip",
|
||||
"heart-empty",
|
||||
"link",
|
||||
"phone",
|
||||
"pushpin",
|
||||
"usd",
|
||||
"gbp",
|
||||
"sort",
|
||||
"sort-by-alphabet",
|
||||
"sort-by-alphabet-alt",
|
||||
"sort-by-order",
|
||||
"sort-by-order-alt",
|
||||
"sort-by-attributes",
|
||||
"sort-by-attributes-alt",
|
||||
"unchecked",
|
||||
"expand",
|
||||
"collapse-down",
|
||||
"collapse-up",
|
||||
"log-in",
|
||||
"flash",
|
||||
"log-out",
|
||||
"new-window",
|
||||
"record",
|
||||
"save",
|
||||
"open",
|
||||
"saved",
|
||||
"import",
|
||||
"export",
|
||||
"send",
|
||||
"floppy-disk",
|
||||
"floppy-saved",
|
||||
"floppy-remove",
|
||||
"floppy-save",
|
||||
"floppy-open",
|
||||
"credit-card",
|
||||
"transfer",
|
||||
"cutlery",
|
||||
"header",
|
||||
"compressed",
|
||||
"earphone",
|
||||
"phone-alt",
|
||||
"tower",
|
||||
"stats",
|
||||
"sd-video",
|
||||
"hd-video",
|
||||
"subtitles",
|
||||
"sound-stereo",
|
||||
"sound-dolby",
|
||||
"sound-5-1",
|
||||
"sound-6-1",
|
||||
"sound-7-1",
|
||||
"copyright-mark",
|
||||
"registration-mark",
|
||||
"cloud-download",
|
||||
"cloud-upload",
|
||||
"tree-conifer",
|
||||
"tree-deciduous",
|
||||
"cd",
|
||||
"save-file",
|
||||
"open-file",
|
||||
"level-up",
|
||||
"copy",
|
||||
"paste",
|
||||
"alert",
|
||||
"equalizer",
|
||||
"king",
|
||||
"queen",
|
||||
"pawn",
|
||||
"bishop",
|
||||
"knight",
|
||||
"baby-formula",
|
||||
"tent",
|
||||
"blackboard",
|
||||
"bed",
|
||||
"apple",
|
||||
"erase",
|
||||
"hourglass",
|
||||
"lamp",
|
||||
"duplicate",
|
||||
"piggy-bank",
|
||||
"scissors",
|
||||
"bitcoin",
|
||||
"yen",
|
||||
"ruble",
|
||||
"scale",
|
||||
"ice-lolly",
|
||||
"ice-lolly-tasted",
|
||||
"education",
|
||||
"option-horizontal",
|
||||
"option-vertical",
|
||||
"menu-hamburger",
|
||||
"modal-window",
|
||||
"oil",
|
||||
"grain",
|
||||
"sunglasses",
|
||||
"text-size",
|
||||
"text-color",
|
||||
"text-background",
|
||||
"object-align-top",
|
||||
"object-align-bottom",
|
||||
"object-align-horizontal",
|
||||
"object-align-left",
|
||||
"object-align-vertical",
|
||||
"object-align-right",
|
||||
"triangle-right",
|
||||
"triangle-left",
|
||||
"triangle-bottom",
|
||||
"triangle-top",
|
||||
"console",
|
||||
"superscript",
|
||||
"subscript",
|
||||
"menu-left",
|
||||
"menu-right",
|
||||
"menu-down",
|
||||
"menu-up"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -1,163 +0,0 @@
|
||||
{
|
||||
"name": "Iconic Stroke",
|
||||
"href": "iconic-stroke",
|
||||
"prefix": "iconicstroke",
|
||||
"lists": [
|
||||
{
|
||||
"name": "Icons",
|
||||
"icons": [
|
||||
"hash",
|
||||
"question-mark",
|
||||
"at",
|
||||
"pilcrow",
|
||||
"info",
|
||||
"arrow-left",
|
||||
"arrow-up",
|
||||
"arrow-right",
|
||||
"arrow-down",
|
||||
"home",
|
||||
"sun-stroke",
|
||||
"cloud",
|
||||
"umbrella",
|
||||
"star",
|
||||
"moon-stroke",
|
||||
"heart-stroke",
|
||||
"cog",
|
||||
"bolt",
|
||||
"key-stroke",
|
||||
"rain",
|
||||
"denied",
|
||||
"mail",
|
||||
"pen",
|
||||
"check",
|
||||
"check-alt",
|
||||
"x",
|
||||
"x-alt",
|
||||
"left-quote",
|
||||
"right-quote",
|
||||
"plus",
|
||||
"minus",
|
||||
"curved-arrow",
|
||||
"document-alt-stroke",
|
||||
"calendar",
|
||||
"map-pin-alt",
|
||||
"comment-alt1-stroke",
|
||||
"comment-alt2-stroke",
|
||||
"pen-alt-stroke",
|
||||
"pen-alt2",
|
||||
"chat-alt-stroke",
|
||||
"plus-alt",
|
||||
"minus-alt",
|
||||
"bars-alt",
|
||||
"book-alt",
|
||||
"aperture-alt",
|
||||
"beaker-alt",
|
||||
"left-quote-alt",
|
||||
"right-quote-alt",
|
||||
"arrow-left-alt1",
|
||||
"arrow-up-alt1",
|
||||
"arrow-right-alt1",
|
||||
"arrow-down-alt1",
|
||||
"arrow-left-alt2",
|
||||
"arrow-up-alt2",
|
||||
"arrow-right-alt2",
|
||||
"arrow-down-alt2",
|
||||
"brush",
|
||||
"brush-alt",
|
||||
"eyedropper",
|
||||
"layers",
|
||||
"layers-alt",
|
||||
"compass",
|
||||
"award-stroke",
|
||||
"beaker",
|
||||
"steering-wheel",
|
||||
"eye",
|
||||
"aperture",
|
||||
"image",
|
||||
"chart",
|
||||
"chart-alt",
|
||||
"target",
|
||||
"tag-stroke",
|
||||
"rss",
|
||||
"rss-alt",
|
||||
"share",
|
||||
"undo",
|
||||
"reload",
|
||||
"reload-alt",
|
||||
"loop-alt1",
|
||||
"loop-alt2",
|
||||
"loop-alt3",
|
||||
"loop-alt4",
|
||||
"spin",
|
||||
"spin-alt",
|
||||
"move-horizontal",
|
||||
"move-horizontal-alt1",
|
||||
"move-horizontal-alt2",
|
||||
"move-vertical",
|
||||
"move-vertical-alt1",
|
||||
"move-vertical-alt2",
|
||||
"move",
|
||||
"move-alt1",
|
||||
"move-alt2",
|
||||
"transfer",
|
||||
"download",
|
||||
"upload",
|
||||
"cloud-download",
|
||||
"cloud-upload",
|
||||
"fork",
|
||||
"play",
|
||||
"play-alt",
|
||||
"pause",
|
||||
"stop",
|
||||
"eject",
|
||||
"first",
|
||||
"last",
|
||||
"fullscreen",
|
||||
"fullscreen-alt",
|
||||
"fullscreen-exit",
|
||||
"fullscreen-exit-alt",
|
||||
"equalizer",
|
||||
"article",
|
||||
"read-more",
|
||||
"list",
|
||||
"list-nested",
|
||||
"cursor",
|
||||
"dial",
|
||||
"new-window",
|
||||
"trash-stroke",
|
||||
"battery-half",
|
||||
"battery-empty",
|
||||
"battery-charging",
|
||||
"chat",
|
||||
"mic",
|
||||
"movie",
|
||||
"headphones",
|
||||
"user",
|
||||
"lightbulb",
|
||||
"cd",
|
||||
"folder-stroke",
|
||||
"document-stroke",
|
||||
"pin",
|
||||
"map-pin-stroke",
|
||||
"book",
|
||||
"book-alt2",
|
||||
"box",
|
||||
"calendar-alt-stroke",
|
||||
"comment-stroke",
|
||||
"iphone",
|
||||
"bars",
|
||||
"camera",
|
||||
"volume-mute",
|
||||
"volume",
|
||||
"battery-full",
|
||||
"magnifying-glass",
|
||||
"lock-stroke",
|
||||
"unlock-stroke",
|
||||
"link",
|
||||
"wrench",
|
||||
"clock",
|
||||
"paperclip"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -1,646 +0,0 @@
|
||||
{
|
||||
"name": "Ionicons",
|
||||
"href": "ionicons",
|
||||
"prefix": "ion",
|
||||
"lists": [
|
||||
{
|
||||
"name": "Icons",
|
||||
"icons": [
|
||||
"ios-add",
|
||||
"ios-add-circle",
|
||||
"ios-alarm",
|
||||
"ios-albums",
|
||||
"ios-alert",
|
||||
"ios-american-football",
|
||||
"ios-analytics",
|
||||
"ios-aperture",
|
||||
"ios-apps",
|
||||
"ios-appstore",
|
||||
"ios-archive",
|
||||
"ios-arrow-back",
|
||||
"ios-arrow-down",
|
||||
"ios-arrow-dropdown",
|
||||
"ios-arrow-dropdown-circle",
|
||||
"ios-arrow-dropleft",
|
||||
"ios-arrow-dropleft-circle",
|
||||
"ios-arrow-dropright",
|
||||
"ios-arrow-dropright-circle",
|
||||
"ios-arrow-dropup",
|
||||
"ios-arrow-dropup-circle",
|
||||
"ios-arrow-forward",
|
||||
"ios-arrow-round-back",
|
||||
"ios-arrow-round-down",
|
||||
"ios-arrow-round-forward",
|
||||
"ios-arrow-round-up",
|
||||
"ios-arrow-up",
|
||||
"ios-at",
|
||||
"ios-attach",
|
||||
"ios-backspace",
|
||||
"ios-barcode",
|
||||
"ios-baseball",
|
||||
"ios-basket",
|
||||
"ios-basketball",
|
||||
"ios-battery-charging",
|
||||
"ios-battery-dead",
|
||||
"ios-battery-full",
|
||||
"ios-beaker",
|
||||
"ios-beer",
|
||||
"ios-bicycle",
|
||||
"ios-bluetooth",
|
||||
"ios-boat",
|
||||
"ios-body",
|
||||
"ios-bonfire",
|
||||
"ios-book",
|
||||
"ios-bookmark",
|
||||
"ios-bookmarks",
|
||||
"ios-bowtie",
|
||||
"ios-briefcase",
|
||||
"ios-browsers",
|
||||
"ios-brush",
|
||||
"ios-bug",
|
||||
"ios-build",
|
||||
"ios-bulb",
|
||||
"ios-bus",
|
||||
"ios-cafe",
|
||||
"ios-calculator",
|
||||
"ios-calendar",
|
||||
"ios-call",
|
||||
"ios-camera",
|
||||
"ios-car",
|
||||
"ios-card",
|
||||
"ios-cart",
|
||||
"ios-cash",
|
||||
"ios-chatboxes",
|
||||
"ios-chatbubbles",
|
||||
"ios-checkbox",
|
||||
"ios-checkmark",
|
||||
"ios-checkmark-circle",
|
||||
"ios-clipboard",
|
||||
"ios-clock",
|
||||
"ios-close",
|
||||
"ios-close-circle",
|
||||
"ios-closed-captioning",
|
||||
"ios-cloud",
|
||||
"ios-cloud-circle",
|
||||
"ios-cloud-done",
|
||||
"ios-cloud-download",
|
||||
"ios-cloud-upload",
|
||||
"ios-cloudy",
|
||||
"ios-cloudy-night",
|
||||
"ios-code",
|
||||
"ios-code-download",
|
||||
"ios-code-working",
|
||||
"ios-cog",
|
||||
"ios-color-fill",
|
||||
"ios-color-filter",
|
||||
"ios-color-palette",
|
||||
"ios-color-wand",
|
||||
"ios-compass",
|
||||
"ios-construct",
|
||||
"ios-contact",
|
||||
"ios-contacts",
|
||||
"ios-contract",
|
||||
"ios-contrast",
|
||||
"ios-copy",
|
||||
"ios-create",
|
||||
"ios-crop",
|
||||
"ios-cube",
|
||||
"ios-cut",
|
||||
"ios-desktop",
|
||||
"ios-disc",
|
||||
"ios-document",
|
||||
"ios-done-all",
|
||||
"ios-download",
|
||||
"ios-easel",
|
||||
"ios-egg",
|
||||
"ios-exit",
|
||||
"ios-expand",
|
||||
"ios-eye",
|
||||
"ios-eye-off",
|
||||
"ios-fastforward",
|
||||
"ios-female",
|
||||
"ios-filing",
|
||||
"ios-film",
|
||||
"ios-finger-print",
|
||||
"ios-flag",
|
||||
"ios-flame",
|
||||
"ios-flash",
|
||||
"ios-flask",
|
||||
"ios-flower",
|
||||
"ios-folder",
|
||||
"ios-folder-open",
|
||||
"ios-football",
|
||||
"ios-funnel",
|
||||
"ios-game-controller-a",
|
||||
"ios-game-controller-b",
|
||||
"ios-git-branch",
|
||||
"ios-git-commit",
|
||||
"ios-git-compare",
|
||||
"ios-git-merge",
|
||||
"ios-git-network",
|
||||
"ios-git-pull-request",
|
||||
"ios-glasses",
|
||||
"ios-globe",
|
||||
"ios-grid",
|
||||
"ios-hammer",
|
||||
"ios-hand",
|
||||
"ios-happy",
|
||||
"ios-headset",
|
||||
"ios-heart",
|
||||
"ios-help",
|
||||
"ios-help-buoy",
|
||||
"ios-help-circle",
|
||||
"ios-home",
|
||||
"ios-ice-cream",
|
||||
"ios-image",
|
||||
"ios-images",
|
||||
"ios-infinite",
|
||||
"ios-information",
|
||||
"ios-information-circle",
|
||||
"ios-ionic",
|
||||
"ios-ionitron",
|
||||
"ios-jet",
|
||||
"ios-key",
|
||||
"ios-keypad",
|
||||
"ios-laptop",
|
||||
"ios-leaf",
|
||||
"ios-link",
|
||||
"ios-list",
|
||||
"ios-list-box",
|
||||
"ios-locate",
|
||||
"ios-lock",
|
||||
"ios-log-in",
|
||||
"ios-log-out",
|
||||
"ios-magnet",
|
||||
"ios-mail",
|
||||
"ios-mail-open",
|
||||
"ios-male",
|
||||
"ios-man",
|
||||
"ios-map",
|
||||
"ios-medal",
|
||||
"ios-medical",
|
||||
"ios-medkit",
|
||||
"ios-megaphone",
|
||||
"ios-menu",
|
||||
"ios-mic",
|
||||
"ios-mic-off",
|
||||
"ios-microphone",
|
||||
"ios-moon",
|
||||
"ios-more",
|
||||
"ios-move",
|
||||
"ios-musical-note",
|
||||
"ios-musical-notes",
|
||||
"ios-navigate",
|
||||
"ios-no-smoking",
|
||||
"ios-notifications",
|
||||
"ios-notifications-off",
|
||||
"ios-nuclear",
|
||||
"ios-nutrition",
|
||||
"ios-open",
|
||||
"ios-options",
|
||||
"ios-outlet",
|
||||
"ios-paper",
|
||||
"ios-paper-plane",
|
||||
"ios-partly-sunny",
|
||||
"ios-pause",
|
||||
"ios-paw",
|
||||
"ios-people",
|
||||
"ios-person",
|
||||
"ios-person-add",
|
||||
"ios-phone-landscape",
|
||||
"ios-phone-portrait",
|
||||
"ios-photos",
|
||||
"ios-pie",
|
||||
"ios-pin",
|
||||
"ios-pint",
|
||||
"ios-pizza",
|
||||
"ios-plane",
|
||||
"ios-planet",
|
||||
"ios-play",
|
||||
"ios-podium",
|
||||
"ios-power",
|
||||
"ios-pricetag",
|
||||
"ios-pricetags",
|
||||
"ios-print",
|
||||
"ios-pulse",
|
||||
"ios-qr-scanner",
|
||||
"ios-quote",
|
||||
"ios-radio",
|
||||
"ios-radio-button-off",
|
||||
"ios-radio-button-on",
|
||||
"ios-rainy",
|
||||
"ios-recording",
|
||||
"ios-redo",
|
||||
"ios-refresh",
|
||||
"ios-refresh-circle",
|
||||
"ios-remove",
|
||||
"ios-remove-circle",
|
||||
"ios-reorder",
|
||||
"ios-repeat",
|
||||
"ios-resize",
|
||||
"ios-restaurant",
|
||||
"ios-return-left",
|
||||
"ios-return-right",
|
||||
"ios-reverse-camera",
|
||||
"ios-rewind",
|
||||
"ios-ribbon",
|
||||
"ios-rose",
|
||||
"ios-sad",
|
||||
"ios-school",
|
||||
"ios-search",
|
||||
"ios-send",
|
||||
"ios-settings",
|
||||
"ios-share",
|
||||
"ios-share-alt",
|
||||
"ios-shirt",
|
||||
"ios-shuffle",
|
||||
"ios-skip-backward",
|
||||
"ios-skip-forward",
|
||||
"ios-snow",
|
||||
"ios-speedometer",
|
||||
"ios-square",
|
||||
"ios-star",
|
||||
"ios-star-half",
|
||||
"ios-stats",
|
||||
"ios-stopwatch",
|
||||
"ios-subway",
|
||||
"ios-sunny",
|
||||
"ios-swap",
|
||||
"ios-switch",
|
||||
"ios-sync",
|
||||
"ios-tablet-landscape",
|
||||
"ios-tablet-portrait",
|
||||
"ios-tennisball",
|
||||
"ios-text",
|
||||
"ios-thermometer",
|
||||
"ios-thumbs-down",
|
||||
"ios-thumbs-up",
|
||||
"ios-thunderstorm",
|
||||
"ios-time",
|
||||
"ios-timer",
|
||||
"ios-train",
|
||||
"ios-transgender",
|
||||
"ios-trash",
|
||||
"ios-trending-down",
|
||||
"ios-trending-up",
|
||||
"ios-trophy",
|
||||
"ios-umbrella",
|
||||
"ios-undo",
|
||||
"ios-unlock",
|
||||
"ios-videocam",
|
||||
"ios-volume-down",
|
||||
"ios-volume-mute",
|
||||
"ios-volume-off",
|
||||
"ios-volume-up",
|
||||
"ios-walk",
|
||||
"ios-warning",
|
||||
"ios-watch",
|
||||
"ios-water",
|
||||
"ios-wifi",
|
||||
"ios-wine",
|
||||
"ios-woman",
|
||||
"logo-android",
|
||||
"logo-angular",
|
||||
"logo-apple",
|
||||
"logo-bitcoin",
|
||||
"logo-buffer",
|
||||
"logo-chrome",
|
||||
"logo-codepen",
|
||||
"logo-css3",
|
||||
"logo-designernews",
|
||||
"logo-dribbble",
|
||||
"logo-dropbox",
|
||||
"logo-euro",
|
||||
"logo-facebook",
|
||||
"logo-foursquare",
|
||||
"logo-freebsd-devil",
|
||||
"logo-github",
|
||||
"logo-google",
|
||||
"logo-googleplus",
|
||||
"logo-hackernews",
|
||||
"logo-html5",
|
||||
"logo-instagram",
|
||||
"logo-javascript",
|
||||
"logo-linkedin",
|
||||
"logo-markdown",
|
||||
"logo-nodejs",
|
||||
"logo-octocat",
|
||||
"logo-pinterest",
|
||||
"logo-playstation",
|
||||
"logo-python",
|
||||
"logo-reddit",
|
||||
"logo-rss",
|
||||
"logo-sass",
|
||||
"logo-skype",
|
||||
"logo-snapchat",
|
||||
"logo-steam",
|
||||
"logo-tumblr",
|
||||
"logo-tux",
|
||||
"logo-twitch",
|
||||
"logo-twitter",
|
||||
"logo-usd",
|
||||
"logo-vimeo",
|
||||
"logo-whatsapp",
|
||||
"logo-windows",
|
||||
"logo-wordpress",
|
||||
"logo-xbox",
|
||||
"logo-yahoo",
|
||||
"logo-yen",
|
||||
"logo-youtube",
|
||||
"md-add",
|
||||
"md-add-circle",
|
||||
"md-alarm",
|
||||
"md-albums",
|
||||
"md-alert",
|
||||
"md-american-football",
|
||||
"md-analytics",
|
||||
"md-aperture",
|
||||
"md-apps",
|
||||
"md-appstore",
|
||||
"md-archive",
|
||||
"md-arrow-back",
|
||||
"md-arrow-down",
|
||||
"md-arrow-dropdown",
|
||||
"md-arrow-dropdown-circle",
|
||||
"md-arrow-dropleft",
|
||||
"md-arrow-dropleft-circle",
|
||||
"md-arrow-dropright",
|
||||
"md-arrow-dropright-circle",
|
||||
"md-arrow-dropup",
|
||||
"md-arrow-dropup-circle",
|
||||
"md-arrow-forward",
|
||||
"md-arrow-round-back",
|
||||
"md-arrow-round-down",
|
||||
"md-arrow-round-forward",
|
||||
"md-arrow-round-up",
|
||||
"md-arrow-up",
|
||||
"md-at",
|
||||
"md-attach",
|
||||
"md-backspace",
|
||||
"md-barcode",
|
||||
"md-baseball",
|
||||
"md-basket",
|
||||
"md-basketball",
|
||||
"md-battery-charging",
|
||||
"md-battery-dead",
|
||||
"md-battery-full",
|
||||
"md-beaker",
|
||||
"md-beer",
|
||||
"md-bicycle",
|
||||
"md-bluetooth",
|
||||
"md-boat",
|
||||
"md-body",
|
||||
"md-bonfire",
|
||||
"md-book",
|
||||
"md-bookmark",
|
||||
"md-bookmarks",
|
||||
"md-bowtie",
|
||||
"md-briefcase",
|
||||
"md-browsers",
|
||||
"md-brush",
|
||||
"md-bug",
|
||||
"md-build",
|
||||
"md-bulb",
|
||||
"md-bus",
|
||||
"md-cafe",
|
||||
"md-calculator",
|
||||
"md-calendar",
|
||||
"md-call",
|
||||
"md-camera",
|
||||
"md-car",
|
||||
"md-card",
|
||||
"md-cart",
|
||||
"md-cash",
|
||||
"md-chatboxes",
|
||||
"md-chatbubbles",
|
||||
"md-checkbox",
|
||||
"md-checkmark",
|
||||
"md-checkmark-circle",
|
||||
"md-clipboard",
|
||||
"md-clock",
|
||||
"md-close",
|
||||
"md-close-circle",
|
||||
"md-closed-captioning",
|
||||
"md-cloud",
|
||||
"md-cloud-circle",
|
||||
"md-cloud-done",
|
||||
"md-cloud-download",
|
||||
"md-cloud-upload",
|
||||
"md-cloudy",
|
||||
"md-cloudy-night",
|
||||
"md-code",
|
||||
"md-code-download",
|
||||
"md-code-working",
|
||||
"md-cog",
|
||||
"md-color-fill",
|
||||
"md-color-filter",
|
||||
"md-color-palette",
|
||||
"md-color-wand",
|
||||
"md-compass",
|
||||
"md-construct",
|
||||
"md-contact",
|
||||
"md-contacts",
|
||||
"md-contract",
|
||||
"md-contrast",
|
||||
"md-copy",
|
||||
"md-create",
|
||||
"md-crop",
|
||||
"md-cube",
|
||||
"md-cut",
|
||||
"md-desktop",
|
||||
"md-disc",
|
||||
"md-document",
|
||||
"md-done-all",
|
||||
"md-download",
|
||||
"md-easel",
|
||||
"md-egg",
|
||||
"md-exit",
|
||||
"md-expand",
|
||||
"md-eye",
|
||||
"md-eye-off",
|
||||
"md-fastforward",
|
||||
"md-female",
|
||||
"md-filing",
|
||||
"md-film",
|
||||
"md-finger-print",
|
||||
"md-flag",
|
||||
"md-flame",
|
||||
"md-flash",
|
||||
"md-flask",
|
||||
"md-flower",
|
||||
"md-folder",
|
||||
"md-folder-open",
|
||||
"md-football",
|
||||
"md-funnel",
|
||||
"md-game-controller-a",
|
||||
"md-game-controller-b",
|
||||
"md-git-branch",
|
||||
"md-git-commit",
|
||||
"md-git-compare",
|
||||
"md-git-merge",
|
||||
"md-git-network",
|
||||
"md-git-pull-request",
|
||||
"md-glasses",
|
||||
"md-globe",
|
||||
"md-grid",
|
||||
"md-hammer",
|
||||
"md-hand",
|
||||
"md-happy",
|
||||
"md-headset",
|
||||
"md-heart",
|
||||
"md-help",
|
||||
"md-help-buoy",
|
||||
"md-help-circle",
|
||||
"md-home",
|
||||
"md-ice-cream",
|
||||
"md-image",
|
||||
"md-images",
|
||||
"md-infinite",
|
||||
"md-information",
|
||||
"md-information-circle",
|
||||
"md-ionic",
|
||||
"md-ionitron",
|
||||
"md-jet",
|
||||
"md-key",
|
||||
"md-keypad",
|
||||
"md-laptop",
|
||||
"md-leaf",
|
||||
"md-link",
|
||||
"md-list",
|
||||
"md-list-box",
|
||||
"md-locate",
|
||||
"md-lock",
|
||||
"md-log-in",
|
||||
"md-log-out",
|
||||
"md-magnet",
|
||||
"md-mail",
|
||||
"md-mail-open",
|
||||
"md-male",
|
||||
"md-man",
|
||||
"md-map",
|
||||
"md-medal",
|
||||
"md-medical",
|
||||
"md-medkit",
|
||||
"md-megaphone",
|
||||
"md-menu",
|
||||
"md-mic",
|
||||
"md-mic-off",
|
||||
"md-microphone",
|
||||
"md-moon",
|
||||
"md-more",
|
||||
"md-move",
|
||||
"md-musical-note",
|
||||
"md-musical-notes",
|
||||
"md-navigate",
|
||||
"md-no-smoking",
|
||||
"md-notifications",
|
||||
"md-notifications-off",
|
||||
"md-nuclear",
|
||||
"md-nutrition",
|
||||
"md-open",
|
||||
"md-options",
|
||||
"md-outlet",
|
||||
"md-paper",
|
||||
"md-paper-plane",
|
||||
"md-partly-sunny",
|
||||
"md-pause",
|
||||
"md-paw",
|
||||
"md-people",
|
||||
"md-person",
|
||||
"md-person-add",
|
||||
"md-phone-landscape",
|
||||
"md-phone-portrait",
|
||||
"md-photos",
|
||||
"md-pie",
|
||||
"md-pin",
|
||||
"md-pint",
|
||||
"md-pizza",
|
||||
"md-plane",
|
||||
"md-planet",
|
||||
"md-play",
|
||||
"md-podium",
|
||||
"md-power",
|
||||
"md-pricetag",
|
||||
"md-pricetags",
|
||||
"md-print",
|
||||
"md-pulse",
|
||||
"md-qr-scanner",
|
||||
"md-quote",
|
||||
"md-radio",
|
||||
"md-radio-button-off",
|
||||
"md-radio-button-on",
|
||||
"md-rainy",
|
||||
"md-recording",
|
||||
"md-redo",
|
||||
"md-refresh",
|
||||
"md-refresh-circle",
|
||||
"md-remove",
|
||||
"md-remove-circle",
|
||||
"md-reorder",
|
||||
"md-repeat",
|
||||
"md-resize",
|
||||
"md-restaurant",
|
||||
"md-return-left",
|
||||
"md-return-right",
|
||||
"md-reverse-camera",
|
||||
"md-rewind",
|
||||
"md-ribbon",
|
||||
"md-rose",
|
||||
"md-sad",
|
||||
"md-school",
|
||||
"md-search",
|
||||
"md-send",
|
||||
"md-settings",
|
||||
"md-share",
|
||||
"md-share-alt",
|
||||
"md-shirt",
|
||||
"md-shuffle",
|
||||
"md-skip-backward",
|
||||
"md-skip-forward",
|
||||
"md-snow",
|
||||
"md-speedometer",
|
||||
"md-square",
|
||||
"md-star",
|
||||
"md-star-half",
|
||||
"md-stats",
|
||||
"md-stopwatch",
|
||||
"md-subway",
|
||||
"md-sunny",
|
||||
"md-swap",
|
||||
"md-switch",
|
||||
"md-sync",
|
||||
"md-tablet-landscape",
|
||||
"md-tablet-portrait",
|
||||
"md-tennisball",
|
||||
"md-text",
|
||||
"md-thermometer",
|
||||
"md-thumbs-down",
|
||||
"md-thumbs-up",
|
||||
"md-thunderstorm",
|
||||
"md-time",
|
||||
"md-timer",
|
||||
"md-train",
|
||||
"md-transgender",
|
||||
"md-trash",
|
||||
"md-trending-down",
|
||||
"md-trending-up",
|
||||
"md-trophy",
|
||||
"md-umbrella",
|
||||
"md-undo",
|
||||
"md-unlock",
|
||||
"md-videocam",
|
||||
"md-volume-down",
|
||||
"md-volume-mute",
|
||||
"md-volume-off",
|
||||
"md-volume-up",
|
||||
"md-walk",
|
||||
"md-warning",
|
||||
"md-watch",
|
||||
"md-water",
|
||||
"md-wifi",
|
||||
"md-wine",
|
||||
"md-woman"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -1,75 +0,0 @@
|
||||
{
|
||||
"name": "Maki",
|
||||
"href": "maki",
|
||||
"prefix": "maki",
|
||||
"lists": [
|
||||
{
|
||||
"name": "Icons",
|
||||
"icons": [
|
||||
"aboveground-rail",
|
||||
"airfield",
|
||||
"airport",
|
||||
"art-gallery",
|
||||
"bar",
|
||||
"baseball",
|
||||
"basketball",
|
||||
"beer",
|
||||
"belowground-rail",
|
||||
"bicycle",
|
||||
"bus",
|
||||
"cafe",
|
||||
"campsite",
|
||||
"cemetery",
|
||||
"cinema",
|
||||
"college",
|
||||
"commerical-building",
|
||||
"credit-card",
|
||||
"cricket",
|
||||
"embassy",
|
||||
"fast-food",
|
||||
"ferry",
|
||||
"fire-station",
|
||||
"football",
|
||||
"fuel",
|
||||
"garden",
|
||||
"giraffe",
|
||||
"golf",
|
||||
"grocery-store",
|
||||
"harbor",
|
||||
"heliport",
|
||||
"hospital",
|
||||
"industrial-building",
|
||||
"library",
|
||||
"lodging",
|
||||
"london-underground",
|
||||
"minefield",
|
||||
"monument",
|
||||
"museum",
|
||||
"pharmacy",
|
||||
"pitch",
|
||||
"police",
|
||||
"post",
|
||||
"prison",
|
||||
"rail",
|
||||
"religious-christian",
|
||||
"religious-islam",
|
||||
"religious-jewish",
|
||||
"restaurant",
|
||||
"roadblock",
|
||||
"school",
|
||||
"shop",
|
||||
"skiing",
|
||||
"soccer",
|
||||
"swimming",
|
||||
"tennis",
|
||||
"theatre",
|
||||
"toilet",
|
||||
"town-hall",
|
||||
"trash",
|
||||
"tree-1",
|
||||
"tree-2",
|
||||
"warehouse"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -1,944 +0,0 @@
|
||||
{
|
||||
"name": "Material icons",
|
||||
"href": "material",
|
||||
"prefix": "material-icons",
|
||||
"lists": [
|
||||
{
|
||||
"name": "Icons",
|
||||
"icons": [
|
||||
"3d_rotation",
|
||||
"ac_unit",
|
||||
"access_alarm",
|
||||
"access_alarms",
|
||||
"access_time",
|
||||
"accessibility",
|
||||
"accessible",
|
||||
"account_balance",
|
||||
"account_balance_wallet",
|
||||
"account_box",
|
||||
"account_circle",
|
||||
"adb",
|
||||
"add",
|
||||
"add_a_photo",
|
||||
"add_alarm",
|
||||
"add_alert",
|
||||
"add_box",
|
||||
"add_circle",
|
||||
"add_circle_outline",
|
||||
"add_location",
|
||||
"add_shopping_cart",
|
||||
"add_to_photos",
|
||||
"add_to_queue",
|
||||
"adjust",
|
||||
"airline_seat_flat",
|
||||
"airline_seat_flat_angled",
|
||||
"airline_seat_individual_suite",
|
||||
"airline_seat_legroom_extra",
|
||||
"airline_seat_legroom_normal",
|
||||
"airline_seat_legroom_reduced",
|
||||
"airline_seat_recline_extra",
|
||||
"airline_seat_recline_normal",
|
||||
"airplanemode_active",
|
||||
"airplanemode_inactive",
|
||||
"airplay",
|
||||
"airport_shuttle",
|
||||
"alarm",
|
||||
"alarm_add",
|
||||
"alarm_off",
|
||||
"alarm_on",
|
||||
"album",
|
||||
"all_inclusive",
|
||||
"all_out",
|
||||
"android",
|
||||
"announcement",
|
||||
"apps",
|
||||
"archive",
|
||||
"arrow_back",
|
||||
"arrow_downward",
|
||||
"arrow_drop_down",
|
||||
"arrow_drop_down_circle",
|
||||
"arrow_drop_up",
|
||||
"arrow_forward",
|
||||
"arrow_upward",
|
||||
"art_track",
|
||||
"aspect_ratio",
|
||||
"assessment",
|
||||
"assignment",
|
||||
"assignment_ind",
|
||||
"assignment_late",
|
||||
"assignment_return",
|
||||
"assignment_returned",
|
||||
"assignment_turned_in",
|
||||
"assistant",
|
||||
"assistant_photo",
|
||||
"attach_file",
|
||||
"attach_money",
|
||||
"attachment",
|
||||
"audiotrack",
|
||||
"autorenew",
|
||||
"av_timer",
|
||||
"backspace",
|
||||
"backup",
|
||||
"battery_alert",
|
||||
"battery_charging_full",
|
||||
"battery_full",
|
||||
"battery_std",
|
||||
"battery_unknown",
|
||||
"beach_access",
|
||||
"beenhere",
|
||||
"block",
|
||||
"bluetooth",
|
||||
"bluetooth_audio",
|
||||
"bluetooth_connected",
|
||||
"bluetooth_disabled",
|
||||
"bluetooth_searching",
|
||||
"blur_circular",
|
||||
"blur_linear",
|
||||
"blur_off",
|
||||
"blur_on",
|
||||
"book",
|
||||
"bookmark",
|
||||
"bookmark_border",
|
||||
"border_all",
|
||||
"border_bottom",
|
||||
"border_clear",
|
||||
"border_color",
|
||||
"border_horizontal",
|
||||
"border_inner",
|
||||
"border_left",
|
||||
"border_outer",
|
||||
"border_right",
|
||||
"border_style",
|
||||
"border_top",
|
||||
"border_vertical",
|
||||
"branding_watermark",
|
||||
"brightness_1",
|
||||
"brightness_2",
|
||||
"brightness_3",
|
||||
"brightness_4",
|
||||
"brightness_5",
|
||||
"brightness_6",
|
||||
"brightness_7",
|
||||
"brightness_auto",
|
||||
"brightness_high",
|
||||
"brightness_low",
|
||||
"brightness_medium",
|
||||
"broken_image",
|
||||
"brush",
|
||||
"bubble_chart",
|
||||
"bug_report",
|
||||
"build",
|
||||
"burst_mode",
|
||||
"business",
|
||||
"business_center",
|
||||
"cached",
|
||||
"cake",
|
||||
"call",
|
||||
"call_end",
|
||||
"call_made",
|
||||
"call_merge",
|
||||
"call_missed",
|
||||
"call_missed_outgoing",
|
||||
"call_received",
|
||||
"call_split",
|
||||
"call_to_action",
|
||||
"camera",
|
||||
"camera_alt",
|
||||
"camera_enhance",
|
||||
"camera_front",
|
||||
"camera_rear",
|
||||
"camera_roll",
|
||||
"cancel",
|
||||
"card_giftcard",
|
||||
"card_membership",
|
||||
"card_travel",
|
||||
"casino",
|
||||
"cast",
|
||||
"cast_connected",
|
||||
"center_focus_strong",
|
||||
"center_focus_weak",
|
||||
"change_history",
|
||||
"chat",
|
||||
"chat_bubble",
|
||||
"chat_bubble_outline",
|
||||
"check",
|
||||
"check_box",
|
||||
"check_box_outline_blank",
|
||||
"check_circle",
|
||||
"chevron_left",
|
||||
"chevron_right",
|
||||
"child_care",
|
||||
"child_friendly",
|
||||
"chrome_reader_mode",
|
||||
"class",
|
||||
"clear",
|
||||
"clear_all",
|
||||
"close",
|
||||
"closed_caption",
|
||||
"cloud",
|
||||
"cloud_circle",
|
||||
"cloud_done",
|
||||
"cloud_download",
|
||||
"cloud_off",
|
||||
"cloud_queue",
|
||||
"cloud_upload",
|
||||
"code",
|
||||
"collections",
|
||||
"collections_bookmark",
|
||||
"color_lens",
|
||||
"colorize",
|
||||
"comment",
|
||||
"compare",
|
||||
"compare_arrows",
|
||||
"computer",
|
||||
"confirmation_number",
|
||||
"contact_mail",
|
||||
"contact_phone",
|
||||
"contacts",
|
||||
"content_copy",
|
||||
"content_cut",
|
||||
"content_paste",
|
||||
"control_point",
|
||||
"control_point_duplicate",
|
||||
"copyright",
|
||||
"create",
|
||||
"create_new_folder",
|
||||
"credit_card",
|
||||
"crop",
|
||||
"crop_16_9",
|
||||
"crop_3_2",
|
||||
"crop_5_4",
|
||||
"crop_7_5",
|
||||
"crop_din",
|
||||
"crop_free",
|
||||
"crop_landscape",
|
||||
"crop_original",
|
||||
"crop_portrait",
|
||||
"crop_rotate",
|
||||
"crop_square",
|
||||
"dashboard",
|
||||
"data_usage",
|
||||
"date_range",
|
||||
"dehaze",
|
||||
"delete",
|
||||
"delete_forever",
|
||||
"delete_sweep",
|
||||
"description",
|
||||
"desktop_mac",
|
||||
"desktop_windows",
|
||||
"details",
|
||||
"developer_board",
|
||||
"developer_mode",
|
||||
"device_hub",
|
||||
"devices",
|
||||
"devices_other",
|
||||
"dialer_sip",
|
||||
"dialpad",
|
||||
"directions",
|
||||
"directions_bike",
|
||||
"directions_boat",
|
||||
"directions_bus",
|
||||
"directions_car",
|
||||
"directions_railway",
|
||||
"directions_run",
|
||||
"directions_subway",
|
||||
"directions_transit",
|
||||
"directions_walk",
|
||||
"disc_full",
|
||||
"dns",
|
||||
"do_not_disturb",
|
||||
"do_not_disturb_alt",
|
||||
"do_not_disturb_off",
|
||||
"do_not_disturb_on",
|
||||
"dock",
|
||||
"domain",
|
||||
"done",
|
||||
"done_all",
|
||||
"donut_large",
|
||||
"donut_small",
|
||||
"drafts",
|
||||
"drag_handle",
|
||||
"drive_eta",
|
||||
"dvr",
|
||||
"edit",
|
||||
"edit_location",
|
||||
"eject",
|
||||
"email",
|
||||
"enhanced_encryption",
|
||||
"equalizer",
|
||||
"error",
|
||||
"error_outline",
|
||||
"euro_symbol",
|
||||
"ev_station",
|
||||
"event",
|
||||
"event_available",
|
||||
"event_busy",
|
||||
"event_note",
|
||||
"event_seat",
|
||||
"exit_to_app",
|
||||
"expand_less",
|
||||
"expand_more",
|
||||
"explicit",
|
||||
"explore",
|
||||
"exposure",
|
||||
"exposure_neg_1",
|
||||
"exposure_neg_2",
|
||||
"exposure_plus_1",
|
||||
"exposure_plus_2",
|
||||
"exposure_zero",
|
||||
"extension",
|
||||
"face",
|
||||
"fast_forward",
|
||||
"fast_rewind",
|
||||
"favorite",
|
||||
"favorite_border",
|
||||
"featured_play_list",
|
||||
"featured_video",
|
||||
"feedback",
|
||||
"fiber_dvr",
|
||||
"fiber_manual_record",
|
||||
"fiber_new",
|
||||
"fiber_pin",
|
||||
"fiber_smart_record",
|
||||
"file_download",
|
||||
"file_upload",
|
||||
"filter",
|
||||
"filter_1",
|
||||
"filter_2",
|
||||
"filter_3",
|
||||
"filter_4",
|
||||
"filter_5",
|
||||
"filter_6",
|
||||
"filter_7",
|
||||
"filter_8",
|
||||
"filter_9",
|
||||
"filter_9_plus",
|
||||
"filter_b_and_w",
|
||||
"filter_center_focus",
|
||||
"filter_drama",
|
||||
"filter_frames",
|
||||
"filter_hdr",
|
||||
"filter_list",
|
||||
"filter_none",
|
||||
"filter_tilt_shift",
|
||||
"filter_vintage",
|
||||
"find_in_page",
|
||||
"find_replace",
|
||||
"fingerprint",
|
||||
"first_page",
|
||||
"fitness_center",
|
||||
"flag",
|
||||
"flare",
|
||||
"flash_auto",
|
||||
"flash_off",
|
||||
"flash_on",
|
||||
"flight",
|
||||
"flight_land",
|
||||
"flight_takeoff",
|
||||
"flip",
|
||||
"flip_to_back",
|
||||
"flip_to_front",
|
||||
"folder",
|
||||
"folder_open",
|
||||
"folder_shared",
|
||||
"folder_special",
|
||||
"font_download",
|
||||
"format_align_center",
|
||||
"format_align_justify",
|
||||
"format_align_left",
|
||||
"format_align_right",
|
||||
"format_bold",
|
||||
"format_clear",
|
||||
"format_color_fill",
|
||||
"format_color_reset",
|
||||
"format_color_text",
|
||||
"format_indent_decrease",
|
||||
"format_indent_increase",
|
||||
"format_italic",
|
||||
"format_line_spacing",
|
||||
"format_list_bulleted",
|
||||
"format_list_numbered",
|
||||
"format_paint",
|
||||
"format_quote",
|
||||
"format_shapes",
|
||||
"format_size",
|
||||
"format_strikethrough",
|
||||
"format_textdirection_l_to_r",
|
||||
"format_textdirection_r_to_l",
|
||||
"format_underlined",
|
||||
"forum",
|
||||
"forward",
|
||||
"forward_10",
|
||||
"forward_30",
|
||||
"forward_5",
|
||||
"free_breakfast",
|
||||
"fullscreen",
|
||||
"fullscreen_exit",
|
||||
"functions",
|
||||
"g_translate",
|
||||
"gamepad",
|
||||
"games",
|
||||
"gavel",
|
||||
"gesture",
|
||||
"get_app",
|
||||
"gif",
|
||||
"golf_course",
|
||||
"gps_fixed",
|
||||
"gps_not_fixed",
|
||||
"gps_off",
|
||||
"grade",
|
||||
"gradient",
|
||||
"grain",
|
||||
"graphic_eq",
|
||||
"grid_off",
|
||||
"grid_on",
|
||||
"group",
|
||||
"group_add",
|
||||
"group_work",
|
||||
"hd",
|
||||
"hdr_off",
|
||||
"hdr_on",
|
||||
"hdr_strong",
|
||||
"hdr_weak",
|
||||
"headset",
|
||||
"headset_mic",
|
||||
"healing",
|
||||
"hearing",
|
||||
"help",
|
||||
"help_outline",
|
||||
"high_quality",
|
||||
"highlight",
|
||||
"highlight_off",
|
||||
"history",
|
||||
"home",
|
||||
"hot_tub",
|
||||
"hotel",
|
||||
"hourglass_empty",
|
||||
"hourglass_full",
|
||||
"http",
|
||||
"https",
|
||||
"image",
|
||||
"image_aspect_ratio",
|
||||
"import_contacts",
|
||||
"import_export",
|
||||
"important_devices",
|
||||
"inbox",
|
||||
"indeterminate_check_box",
|
||||
"info",
|
||||
"info_outline",
|
||||
"input",
|
||||
"insert_chart",
|
||||
"insert_comment",
|
||||
"insert_drive_file",
|
||||
"insert_emoticon",
|
||||
"insert_invitation",
|
||||
"insert_link",
|
||||
"insert_photo",
|
||||
"invert_colors",
|
||||
"invert_colors_off",
|
||||
"iso",
|
||||
"keyboard",
|
||||
"keyboard_arrow_down",
|
||||
"keyboard_arrow_left",
|
||||
"keyboard_arrow_right",
|
||||
"keyboard_arrow_up",
|
||||
"keyboard_backspace",
|
||||
"keyboard_capslock",
|
||||
"keyboard_hide",
|
||||
"keyboard_return",
|
||||
"keyboard_tab",
|
||||
"keyboard_voice",
|
||||
"kitchen",
|
||||
"label",
|
||||
"label_outline",
|
||||
"landscape",
|
||||
"language",
|
||||
"laptop",
|
||||
"laptop_chromebook",
|
||||
"laptop_mac",
|
||||
"laptop_windows",
|
||||
"last_page",
|
||||
"launch",
|
||||
"layers",
|
||||
"layers_clear",
|
||||
"leak_add",
|
||||
"leak_remove",
|
||||
"lens",
|
||||
"library_add",
|
||||
"library_books",
|
||||
"library_music",
|
||||
"lightbulb_outline",
|
||||
"line_style",
|
||||
"line_weight",
|
||||
"linear_scale",
|
||||
"link",
|
||||
"linked_camera",
|
||||
"list",
|
||||
"live_help",
|
||||
"live_tv",
|
||||
"local_activity",
|
||||
"local_airport",
|
||||
"local_atm",
|
||||
"local_bar",
|
||||
"local_cafe",
|
||||
"local_car_wash",
|
||||
"local_convenience_store",
|
||||
"local_dining",
|
||||
"local_drink",
|
||||
"local_florist",
|
||||
"local_gas_station",
|
||||
"local_grocery_store",
|
||||
"local_hospital",
|
||||
"local_hotel",
|
||||
"local_laundry_service",
|
||||
"local_library",
|
||||
"local_mall",
|
||||
"local_movies",
|
||||
"local_offer",
|
||||
"local_parking",
|
||||
"local_pharmacy",
|
||||
"local_phone",
|
||||
"local_pizza",
|
||||
"local_play",
|
||||
"local_post_office",
|
||||
"local_printshop",
|
||||
"local_see",
|
||||
"local_shipping",
|
||||
"local_taxi",
|
||||
"location_city",
|
||||
"location_disabled",
|
||||
"location_off",
|
||||
"location_on",
|
||||
"location_searching",
|
||||
"lock",
|
||||
"lock_open",
|
||||
"lock_outline",
|
||||
"looks",
|
||||
"looks_3",
|
||||
"looks_4",
|
||||
"looks_5",
|
||||
"looks_6",
|
||||
"looks_one",
|
||||
"looks_two",
|
||||
"loop",
|
||||
"loupe",
|
||||
"low_priority",
|
||||
"loyalty",
|
||||
"mail",
|
||||
"mail_outline",
|
||||
"map",
|
||||
"markunread",
|
||||
"markunread_mailbox",
|
||||
"memory",
|
||||
"menu",
|
||||
"merge_type",
|
||||
"message",
|
||||
"mic",
|
||||
"mic_none",
|
||||
"mic_off",
|
||||
"mms",
|
||||
"mode_comment",
|
||||
"mode_edit",
|
||||
"monetization_on",
|
||||
"money_off",
|
||||
"monochrome_photos",
|
||||
"mood",
|
||||
"mood_bad",
|
||||
"more",
|
||||
"more_horiz",
|
||||
"more_vert",
|
||||
"motorcycle",
|
||||
"mouse",
|
||||
"move_to_inbox",
|
||||
"movie",
|
||||
"movie_creation",
|
||||
"movie_filter",
|
||||
"multiline_chart",
|
||||
"music_note",
|
||||
"music_video",
|
||||
"my_location",
|
||||
"nature",
|
||||
"nature_people",
|
||||
"navigate_before",
|
||||
"navigate_next",
|
||||
"navigation",
|
||||
"near_me",
|
||||
"network_cell",
|
||||
"network_check",
|
||||
"network_locked",
|
||||
"network_wifi",
|
||||
"new_releases",
|
||||
"next_week",
|
||||
"nfc",
|
||||
"no_encryption",
|
||||
"no_sim",
|
||||
"not_interested",
|
||||
"note",
|
||||
"note_add",
|
||||
"notifications",
|
||||
"notifications_active",
|
||||
"notifications_none",
|
||||
"notifications_off",
|
||||
"notifications_paused",
|
||||
"offline_pin",
|
||||
"ondemand_video",
|
||||
"opacity",
|
||||
"open_in_browser",
|
||||
"open_in_new",
|
||||
"open_with",
|
||||
"pages",
|
||||
"pageview",
|
||||
"palette",
|
||||
"pan_tool",
|
||||
"panorama",
|
||||
"panorama_fish_eye",
|
||||
"panorama_horizontal",
|
||||
"panorama_vertical",
|
||||
"panorama_wide_angle",
|
||||
"party_mode",
|
||||
"pause",
|
||||
"pause_circle_filled",
|
||||
"pause_circle_outline",
|
||||
"payment",
|
||||
"people",
|
||||
"people_outline",
|
||||
"perm_camera_mic",
|
||||
"perm_contact_calendar",
|
||||
"perm_data_setting",
|
||||
"perm_device_information",
|
||||
"perm_identity",
|
||||
"perm_media",
|
||||
"perm_phone_msg",
|
||||
"perm_scan_wifi",
|
||||
"person",
|
||||
"person_add",
|
||||
"person_outline",
|
||||
"person_pin",
|
||||
"person_pin_circle",
|
||||
"personal_video",
|
||||
"pets",
|
||||
"phone",
|
||||
"phone_android",
|
||||
"phone_bluetooth_speaker",
|
||||
"phone_forwarded",
|
||||
"phone_in_talk",
|
||||
"phone_iphone",
|
||||
"phone_locked",
|
||||
"phone_missed",
|
||||
"phone_paused",
|
||||
"phonelink",
|
||||
"phonelink_erase",
|
||||
"phonelink_lock",
|
||||
"phonelink_off",
|
||||
"phonelink_ring",
|
||||
"phonelink_setup",
|
||||
"photo",
|
||||
"photo_album",
|
||||
"photo_camera",
|
||||
"photo_filter",
|
||||
"photo_library",
|
||||
"photo_size_select_actual",
|
||||
"photo_size_select_large",
|
||||
"photo_size_select_small",
|
||||
"picture_as_pdf",
|
||||
"picture_in_picture",
|
||||
"picture_in_picture_alt",
|
||||
"pie_chart",
|
||||
"pie_chart_outlined",
|
||||
"pin_drop",
|
||||
"place",
|
||||
"play_arrow",
|
||||
"play_circle_filled",
|
||||
"play_circle_outline",
|
||||
"play_for_work",
|
||||
"playlist_add",
|
||||
"playlist_add_check",
|
||||
"playlist_play",
|
||||
"plus_one",
|
||||
"poll",
|
||||
"polymer",
|
||||
"pool",
|
||||
"portable_wifi_off",
|
||||
"portrait",
|
||||
"power",
|
||||
"power_input",
|
||||
"power_settings_new",
|
||||
"pregnant_woman",
|
||||
"present_to_all",
|
||||
"print",
|
||||
"priority_high",
|
||||
"public",
|
||||
"publish",
|
||||
"query_builder",
|
||||
"question_answer",
|
||||
"queue",
|
||||
"queue_music",
|
||||
"queue_play_next",
|
||||
"radio",
|
||||
"radio_button_checked",
|
||||
"radio_button_unchecked",
|
||||
"rate_review",
|
||||
"receipt",
|
||||
"recent_actors",
|
||||
"record_voice_over",
|
||||
"redeem",
|
||||
"redo",
|
||||
"refresh",
|
||||
"remove",
|
||||
"remove_circle",
|
||||
"remove_circle_outline",
|
||||
"remove_from_queue",
|
||||
"remove_red_eye",
|
||||
"remove_shopping_cart",
|
||||
"reorder",
|
||||
"repeat",
|
||||
"repeat_one",
|
||||
"replay",
|
||||
"replay_10",
|
||||
"replay_30",
|
||||
"replay_5",
|
||||
"reply",
|
||||
"reply_all",
|
||||
"report",
|
||||
"report_problem",
|
||||
"restaurant",
|
||||
"restaurant_menu",
|
||||
"restore",
|
||||
"restore_page",
|
||||
"ring_volume",
|
||||
"room",
|
||||
"room_service",
|
||||
"rotate_90_degrees_ccw",
|
||||
"rotate_left",
|
||||
"rotate_right",
|
||||
"rounded_corner",
|
||||
"router",
|
||||
"rowing",
|
||||
"rss_feed",
|
||||
"rv_hookup",
|
||||
"satellite",
|
||||
"save",
|
||||
"scanner",
|
||||
"schedule",
|
||||
"school",
|
||||
"screen_lock_landscape",
|
||||
"screen_lock_portrait",
|
||||
"screen_lock_rotation",
|
||||
"screen_rotation",
|
||||
"screen_share",
|
||||
"sd_card",
|
||||
"sd_storage",
|
||||
"search",
|
||||
"security",
|
||||
"select_all",
|
||||
"send",
|
||||
"sentiment_dissatisfied",
|
||||
"sentiment_neutral",
|
||||
"sentiment_satisfied",
|
||||
"sentiment_very_dissatisfied",
|
||||
"sentiment_very_satisfied",
|
||||
"settings",
|
||||
"settings_applications",
|
||||
"settings_backup_restore",
|
||||
"settings_bluetooth",
|
||||
"settings_brightness",
|
||||
"settings_cell",
|
||||
"settings_ethernet",
|
||||
"settings_input_antenna",
|
||||
"settings_input_component",
|
||||
"settings_input_composite",
|
||||
"settings_input_hdmi",
|
||||
"settings_input_svideo",
|
||||
"settings_overscan",
|
||||
"settings_phone",
|
||||
"settings_power",
|
||||
"settings_remote",
|
||||
"settings_system_daydream",
|
||||
"settings_voice",
|
||||
"share",
|
||||
"shop",
|
||||
"shop_two",
|
||||
"shopping_basket",
|
||||
"shopping_cart",
|
||||
"short_text",
|
||||
"show_chart",
|
||||
"shuffle",
|
||||
"signal_cellular_4_bar",
|
||||
"signal_cellular_connected_no_internet_4_bar",
|
||||
"signal_cellular_no_sim",
|
||||
"signal_cellular_null",
|
||||
"signal_cellular_off",
|
||||
"signal_wifi_4_bar",
|
||||
"signal_wifi_4_bar_lock",
|
||||
"signal_wifi_off",
|
||||
"sim_card",
|
||||
"sim_card_alert",
|
||||
"skip_next",
|
||||
"skip_previous",
|
||||
"slideshow",
|
||||
"slow_motion_video",
|
||||
"smartphone",
|
||||
"smoke_free",
|
||||
"smoking_rooms",
|
||||
"sms",
|
||||
"sms_failed",
|
||||
"snooze",
|
||||
"sort",
|
||||
"sort_by_alpha",
|
||||
"spa",
|
||||
"space_bar",
|
||||
"speaker",
|
||||
"speaker_group",
|
||||
"speaker_notes",
|
||||
"speaker_notes_off",
|
||||
"speaker_phone",
|
||||
"spellcheck",
|
||||
"star",
|
||||
"star_border",
|
||||
"star_half",
|
||||
"stars",
|
||||
"stay_current_landscape",
|
||||
"stay_current_portrait",
|
||||
"stay_primary_landscape",
|
||||
"stay_primary_portrait",
|
||||
"stop",
|
||||
"stop_screen_share",
|
||||
"storage",
|
||||
"store",
|
||||
"store_mall_directory",
|
||||
"straighten",
|
||||
"streetview",
|
||||
"strikethrough_s",
|
||||
"style",
|
||||
"subdirectory_arrow_left",
|
||||
"subdirectory_arrow_right",
|
||||
"subject",
|
||||
"subscriptions",
|
||||
"subtitles",
|
||||
"subway",
|
||||
"supervisor_account",
|
||||
"surround_sound",
|
||||
"swap_calls",
|
||||
"swap_horiz",
|
||||
"swap_vert",
|
||||
"swap_vertical_circle",
|
||||
"switch_camera",
|
||||
"switch_video",
|
||||
"sync",
|
||||
"sync_disabled",
|
||||
"sync_problem",
|
||||
"system_update",
|
||||
"system_update_alt",
|
||||
"tab",
|
||||
"tab_unselected",
|
||||
"tablet",
|
||||
"tablet_android",
|
||||
"tablet_mac",
|
||||
"tag_faces",
|
||||
"tap_and_play",
|
||||
"terrain",
|
||||
"text_fields",
|
||||
"text_format",
|
||||
"textsms",
|
||||
"texture",
|
||||
"theaters",
|
||||
"thumb_down",
|
||||
"thumb_up",
|
||||
"thumbs_up_down",
|
||||
"time_to_leave",
|
||||
"timelapse",
|
||||
"timeline",
|
||||
"timer",
|
||||
"timer_10",
|
||||
"timer_3",
|
||||
"timer_off",
|
||||
"title",
|
||||
"toc",
|
||||
"today",
|
||||
"toll",
|
||||
"tonality",
|
||||
"touch_app",
|
||||
"toys",
|
||||
"track_changes",
|
||||
"traffic",
|
||||
"train",
|
||||
"tram",
|
||||
"transfer_within_a_station",
|
||||
"transform",
|
||||
"translate",
|
||||
"trending_down",
|
||||
"trending_flat",
|
||||
"trending_up",
|
||||
"tune",
|
||||
"turned_in",
|
||||
"turned_in_not",
|
||||
"tv",
|
||||
"unarchive",
|
||||
"undo",
|
||||
"unfold_less",
|
||||
"unfold_more",
|
||||
"update",
|
||||
"usb",
|
||||
"verified_user",
|
||||
"vertical_align_bottom",
|
||||
"vertical_align_center",
|
||||
"vertical_align_top",
|
||||
"vibration",
|
||||
"video_call",
|
||||
"video_label",
|
||||
"video_library",
|
||||
"videocam",
|
||||
"videocam_off",
|
||||
"videogame_asset",
|
||||
"view_agenda",
|
||||
"view_array",
|
||||
"view_carousel",
|
||||
"view_column",
|
||||
"view_comfy",
|
||||
"view_compact",
|
||||
"view_day",
|
||||
"view_headline",
|
||||
"view_list",
|
||||
"view_module",
|
||||
"view_quilt",
|
||||
"view_stream",
|
||||
"view_week",
|
||||
"vignette",
|
||||
"visibility",
|
||||
"visibility_off",
|
||||
"voice_chat",
|
||||
"voicemail",
|
||||
"volume_down",
|
||||
"volume_mute",
|
||||
"volume_off",
|
||||
"volume_up",
|
||||
"vpn_key",
|
||||
"vpn_lock",
|
||||
"wallpaper",
|
||||
"warning",
|
||||
"watch",
|
||||
"watch_later",
|
||||
"wb_auto",
|
||||
"wb_cloudy",
|
||||
"wb_incandescent",
|
||||
"wb_iridescent",
|
||||
"wb_sunny",
|
||||
"wc",
|
||||
"web",
|
||||
"web_asset",
|
||||
"weekend",
|
||||
"whatshot",
|
||||
"widgets",
|
||||
"wifi",
|
||||
"wifi_lock",
|
||||
"wifi_tethering",
|
||||
"work",
|
||||
"wrap_text",
|
||||
"youtube_searched_for",
|
||||
"zoom_in",
|
||||
"zoom_out",
|
||||
"zoom_out_map"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -1,40 +0,0 @@
|
||||
{
|
||||
"name": "OpenWeb Icons",
|
||||
"href": "openweb",
|
||||
"prefix": "openwebicons",
|
||||
"lists": [
|
||||
{
|
||||
"name": "Icons",
|
||||
"icons": [
|
||||
"apml",
|
||||
"open-share",
|
||||
"share",
|
||||
"feed",
|
||||
"ostatus",
|
||||
"opml",
|
||||
"activity",
|
||||
"geo",
|
||||
"opensearch",
|
||||
"oauth",
|
||||
"openid",
|
||||
"rdf",
|
||||
"dataportability",
|
||||
"federated",
|
||||
"open-web",
|
||||
"web-intents",
|
||||
"xmpp",
|
||||
"qr",
|
||||
"epub",
|
||||
"opengraph",
|
||||
"foaf",
|
||||
"info-card",
|
||||
"browserid",
|
||||
"persona",
|
||||
"remote-storage",
|
||||
"odata",
|
||||
"markdown",
|
||||
"tosdr"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -1,30 +0,0 @@
|
||||
{
|
||||
"name": "Vuestic",
|
||||
"href": "vuestic",
|
||||
"prefix": "vuestic-iconset",
|
||||
"lists": [
|
||||
{
|
||||
"name": "Icons",
|
||||
"icons": [
|
||||
"comments",
|
||||
"components",
|
||||
"dashboard",
|
||||
"extras",
|
||||
"files",
|
||||
"forms",
|
||||
"graph",
|
||||
"auth",
|
||||
"image",
|
||||
"maps",
|
||||
"music",
|
||||
"settings",
|
||||
"statistics",
|
||||
"tables",
|
||||
"time",
|
||||
"ui-elements",
|
||||
"user",
|
||||
"video"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
export interface IconSet {
|
||||
name: string
|
||||
prefix: string
|
||||
href: string
|
||||
filteredLists: string[][]
|
||||
lists: { name: string; icons: string[] }[]
|
||||
}
|
||||
@@ -1,236 +0,0 @@
|
||||
<template>
|
||||
<div class="lists">
|
||||
<div class="row">
|
||||
<div class="flex xs12 lg6">
|
||||
<va-card class="mb-4 px-3">
|
||||
<va-list class="py-4">
|
||||
<va-list-label>
|
||||
{{ t('lists.customers') }}
|
||||
</va-list-label>
|
||||
|
||||
<template v-for="(customer, i) in customers" :key="'item' + customer.id">
|
||||
<va-list-item clickable @click="notify(customer.name)">
|
||||
<va-list-item-section avatar>
|
||||
<va-avatar>
|
||||
<img :src="customer.picture" :alt="customer.name" />
|
||||
</va-avatar>
|
||||
</va-list-item-section>
|
||||
|
||||
<va-list-item-section>
|
||||
<va-list-item-label>
|
||||
{{ customer.name }}
|
||||
</va-list-item-label>
|
||||
|
||||
<va-list-item-label caption>
|
||||
{{ customer.address }}
|
||||
</va-list-item-label>
|
||||
</va-list-item-section>
|
||||
|
||||
<va-list-item-section icon>
|
||||
<va-icon name="eye" color="gray" />
|
||||
</va-list-item-section>
|
||||
</va-list-item>
|
||||
|
||||
<va-list-separator v-if="i < customers.length - 1" :key="'separator' + customer.id" class="my-1" fit />
|
||||
</template>
|
||||
</va-list>
|
||||
</va-card>
|
||||
|
||||
<va-card class="px-3">
|
||||
<va-list class="py-4">
|
||||
<va-list-label>
|
||||
{{ t('lists.recentMessages') }}
|
||||
</va-list-label>
|
||||
|
||||
<template v-for="(customer, i) in customers" :key="'item' + customer.id">
|
||||
<va-list-item clickable @click="toggleStar(customer)">
|
||||
<va-list-item-section icon>
|
||||
<va-icon v-if="customer.starred" name="star" color="warning" />
|
||||
</va-list-item-section>
|
||||
|
||||
<va-list-item-section avatar>
|
||||
<va-avatar>
|
||||
<img :src="customer.picture" :alt="customer.name" />
|
||||
</va-avatar>
|
||||
</va-list-item-section>
|
||||
|
||||
<va-list-item-section>
|
||||
<va-list-item-label>
|
||||
{{ customer.name }}
|
||||
</va-list-item-label>
|
||||
</va-list-item-section>
|
||||
|
||||
<va-list-item-section icon>
|
||||
<va-icon :name="getGenderIcon(customer.gender)" :color="getGenderColor(customer.gender)" />
|
||||
</va-list-item-section>
|
||||
</va-list-item>
|
||||
|
||||
<va-list-separator v-if="i < customers.length - 1" :key="'separator' + customer.id" class="my-1" fit />
|
||||
</template>
|
||||
|
||||
<va-list-separator fit spaced />
|
||||
|
||||
<va-list-label color="gray">
|
||||
{{ t('lists.archieved') }}
|
||||
</va-list-label>
|
||||
|
||||
<template v-for="(customer, i) in archived" :key="'item' + customer.id">
|
||||
<va-list-item disabled>
|
||||
<va-list-item-section icon>
|
||||
<va-icon v-if="customer.starred" name="star" color="warning" />
|
||||
</va-list-item-section>
|
||||
|
||||
<va-list-item-section avatar>
|
||||
<va-avatar>
|
||||
<img :src="customer.picture" :alt="customer.name" />
|
||||
</va-avatar>
|
||||
</va-list-item-section>
|
||||
|
||||
<va-list-item-section>
|
||||
<va-list-item-label>
|
||||
{{ customer.name }}
|
||||
</va-list-item-label>
|
||||
</va-list-item-section>
|
||||
</va-list-item>
|
||||
|
||||
<va-list-separator v-if="i < archived.length - 1" :key="'separator' + customer.id" class="my-1" fit />
|
||||
</template>
|
||||
</va-list>
|
||||
</va-card>
|
||||
</div>
|
||||
|
||||
<div class="flex xs12 lg6">
|
||||
<va-card class="mb-4 px-3">
|
||||
<va-list class="py-4">
|
||||
<va-list-label>
|
||||
{{ t('lists.starterKit') }}
|
||||
</va-list-label>
|
||||
|
||||
<va-list-item class="mb-2" clickable>
|
||||
<va-list-item-section>
|
||||
<va-list-item-label>Add profile images</va-list-item-label>
|
||||
|
||||
<va-list-item-label caption>You can use PNG or JPG files.</va-list-item-label>
|
||||
</va-list-item-section>
|
||||
</va-list-item>
|
||||
|
||||
<va-list-item clickable>
|
||||
<va-list-item-section>
|
||||
<va-list-item-label>Invite friends</va-list-item-label>
|
||||
|
||||
<va-list-item-label caption>You can send invitations via email or any messenger.</va-list-item-label>
|
||||
</va-list-item-section>
|
||||
</va-list-item>
|
||||
|
||||
<va-list-separator fit spaced />
|
||||
|
||||
<va-list-label>
|
||||
{{ t('lists.notifications') }}
|
||||
</va-list-label>
|
||||
|
||||
<va-list-item class="mb-2">
|
||||
<va-checkbox v-model="appBanners" class="mr-2" />
|
||||
|
||||
<va-list-item-section>
|
||||
<va-list-item-label>Application Banners</va-list-item-label>
|
||||
|
||||
<va-list-item-label caption>You can send invitations via email or any messenger.</va-list-item-label>
|
||||
</va-list-item-section>
|
||||
</va-list-item>
|
||||
|
||||
<va-list-item class="mb-2">
|
||||
<va-checkbox v-model="banners" class="mr-2" />
|
||||
|
||||
<va-list-item-section>
|
||||
<va-list-item-label>Banners</va-list-item-label>
|
||||
|
||||
<va-list-item-label caption>You can send invitations via email or any messenger.</va-list-item-label>
|
||||
</va-list-item-section>
|
||||
</va-list-item>
|
||||
|
||||
<va-list-item>
|
||||
<va-checkbox v-model="notifications" class="mr-2" />
|
||||
|
||||
<va-list-item-section>
|
||||
<va-list-item-label>Midnight Notifications</va-list-item-label>
|
||||
</va-list-item-section>
|
||||
</va-list-item>
|
||||
</va-list>
|
||||
</va-card>
|
||||
|
||||
<va-card class="px-3">
|
||||
<va-list class="py-4">
|
||||
<va-list-label>
|
||||
{{ t('lists.routerSupport') }}
|
||||
</va-list-label>
|
||||
|
||||
<va-list-item :to="{ name: 'maplibre-maps' }">
|
||||
<va-list-item-section icon>
|
||||
<va-icon name="public" color="danger" />
|
||||
</va-list-item-section>
|
||||
|
||||
<va-list-item-section>
|
||||
<va-list-item-label>MapLibre Maps</va-list-item-label>
|
||||
</va-list-item-section>
|
||||
</va-list-item>
|
||||
|
||||
<va-list-item :to="{ name: 'yandex-maps' }">
|
||||
<va-list-item-section icon>
|
||||
<va-icon name="map" color="danger" />
|
||||
</va-list-item-section>
|
||||
|
||||
<va-list-item-section>
|
||||
<va-list-item-label>Yandex Maps</va-list-item-label>
|
||||
</va-list-item-section>
|
||||
</va-list-item>
|
||||
|
||||
<va-list-item :to="{ name: 'leaflet-maps' }">
|
||||
<va-list-item-section icon>
|
||||
<va-icon name="map_marker" color="danger" />
|
||||
</va-list-item-section>
|
||||
|
||||
<va-list-item-section>
|
||||
<va-list-item-label>Leaflet Maps</va-list-item-label>
|
||||
</va-list-item-section>
|
||||
</va-list-item>
|
||||
</va-list>
|
||||
</va-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useToast } from 'vuestic-ui'
|
||||
import data from './data.json'
|
||||
|
||||
const { t } = useI18n()
|
||||
const { init: initToast } = useToast()
|
||||
|
||||
const customers = ref(data.slice(0, 5))
|
||||
const archived = ref(data.slice(5, 8))
|
||||
const appBanners = ref(false)
|
||||
const banners = ref(false)
|
||||
const notifications = ref(true)
|
||||
|
||||
function getGenderIcon(gender: string) {
|
||||
return gender === 'male' ? 'mars' : 'venus'
|
||||
}
|
||||
|
||||
function getGenderColor(gender: string) {
|
||||
return gender === 'male' ? 'info' : 'success'
|
||||
}
|
||||
|
||||
function notify(name: string) {
|
||||
initToast({
|
||||
message: `Clicked ${name}`,
|
||||
position: 'bottom-right',
|
||||
})
|
||||
}
|
||||
|
||||
function toggleStar(customer: { starred: boolean }) {
|
||||
customer.starred = !customer.starred
|
||||
}
|
||||
</script>
|
||||
@@ -1,106 +0,0 @@
|
||||
[
|
||||
{
|
||||
"id": "5d318282400cc272d72ff744",
|
||||
"starred": true,
|
||||
"balance": "$3,210.05",
|
||||
"picture": "https://randomuser.me/api/portraits/women/1.jpg",
|
||||
"age": 30,
|
||||
"name": "Marcia Neal",
|
||||
"gender": "female",
|
||||
"company": "BLUEGRAIN",
|
||||
"email": "marcianeal@bluegrain.com",
|
||||
"phone": "+1 (950) 575-2330",
|
||||
"address": "642 Overbaugh Place, Loretto, Rhode Island, 3756"
|
||||
},
|
||||
{
|
||||
"id": "5d318282da3af2a9bda573b7",
|
||||
"starred": false,
|
||||
"balance": "$3,961.47",
|
||||
"picture": "https://randomuser.me/api/portraits/women/2.jpg",
|
||||
"age": 21,
|
||||
"name": "Corrine Oliver",
|
||||
"gender": "female",
|
||||
"company": "QUALITERN",
|
||||
"email": "corrineoliver@qualitern.com",
|
||||
"phone": "+1 (955) 402-3254",
|
||||
"address": "532 Colin Place, Talpa, Connecticut, 7461"
|
||||
},
|
||||
{
|
||||
"id": "5d31828232ea44346bd45ee9",
|
||||
"starred": true,
|
||||
"balance": "$1,874.06",
|
||||
"picture": "https://randomuser.me/api/portraits/men/1.jpg",
|
||||
"age": 27,
|
||||
"name": "Tucker Kaufman",
|
||||
"gender": "male",
|
||||
"company": "PREMIANT",
|
||||
"email": "tuckerkaufman@premiant.com",
|
||||
"phone": "+1 (954) 475-2928",
|
||||
"address": "887 Winthrop Street, Tryon, Florida, 3912"
|
||||
},
|
||||
{
|
||||
"id": "5d3182822ebdb5c989bb3364",
|
||||
"starred": false,
|
||||
"balance": "$1,797.76",
|
||||
"picture": "https://randomuser.me/api/portraits/women/3.jpg",
|
||||
"age": 32,
|
||||
"name": "Daisy Kramer",
|
||||
"gender": "female",
|
||||
"company": "ORBIN",
|
||||
"email": "daisykramer@orbin.com",
|
||||
"phone": "+1 (858) 416-3088",
|
||||
"address": "821 Louise Terrace, Waterview, Indiana, 6960"
|
||||
},
|
||||
{
|
||||
"id": "5d318282e1e716000b687943",
|
||||
"starred": false,
|
||||
"balance": "$2,538.94",
|
||||
"picture": "https://randomuser.me/api/portraits/women/4.jpg",
|
||||
"age": 26,
|
||||
"name": "Mindy Potts",
|
||||
"gender": "female",
|
||||
"company": "SNACKTION",
|
||||
"email": "mindypotts@snacktion.com",
|
||||
"phone": "+1 (835) 508-2695",
|
||||
"address": "418 Broadway , Whitehaven, New York, 7690"
|
||||
},
|
||||
{
|
||||
"id": "5d318282a9a4a59adf96cdd0",
|
||||
"starred": false,
|
||||
"balance": "$3,143.43",
|
||||
"picture": "https://randomuser.me/api/portraits/men/2.jpg",
|
||||
"age": 35,
|
||||
"name": "Dotson Franks",
|
||||
"gender": "male",
|
||||
"company": "SATIANCE",
|
||||
"email": "dotsonfranks@satiance.com",
|
||||
"phone": "+1 (869) 559-3971",
|
||||
"address": "156 Lyme Avenue, Lupton, California, 1221"
|
||||
},
|
||||
{
|
||||
"id": "5d3182823227c20aabc4993f",
|
||||
"starred": false,
|
||||
"balance": "$2,601.91",
|
||||
"picture": "https://randomuser.me/api/portraits/women/5.jpg",
|
||||
"age": 29,
|
||||
"name": "Audrey Clay",
|
||||
"gender": "female",
|
||||
"company": "MIRACLIS",
|
||||
"email": "audreyclay@miraclis.com",
|
||||
"phone": "+1 (860) 565-2697",
|
||||
"address": "644 Vermont Court, Freelandville, Kentucky, 2619"
|
||||
},
|
||||
{
|
||||
"id": "5d318282b5127412e1761466",
|
||||
"starred": false,
|
||||
"balance": "$1,718.36",
|
||||
"picture": "https://randomuser.me/api/portraits/men/3.jpg",
|
||||
"age": 37,
|
||||
"name": "Aguirre Klein",
|
||||
"gender": "male",
|
||||
"company": "CALCU",
|
||||
"email": "aguirreklein@calcu.com",
|
||||
"phone": "+1 (924) 555-3247",
|
||||
"address": "626 Carroll Street, Roulette, Ohio, 1477"
|
||||
}
|
||||
]
|
||||
@@ -1,125 +0,0 @@
|
||||
<template>
|
||||
<div class="modals">
|
||||
<div class="row">
|
||||
<div class="flex md12">
|
||||
<va-card class="modals-list larger-padding">
|
||||
<va-card-title>{{ t('modal.title') }}</va-card-title>
|
||||
<va-card-content>
|
||||
<va-button class="mr-2 mb-2" color="danger" @click="showSmallModal = true">
|
||||
{{ t('modal.small') }}
|
||||
</va-button>
|
||||
<va-button class="mr-2 mb-2" color="info" @click="showMediumModal = true">
|
||||
{{ t('modal.medium') }}
|
||||
</va-button>
|
||||
<va-button class="mr-2 mb-2" color="warning" @click="showLargeModal = true">
|
||||
{{ t('modal.large') }}
|
||||
</va-button>
|
||||
<va-button class="mr-2 mb-2" color="success" @click="showStaticModal = true">
|
||||
{{ t('modal.static') }}
|
||||
</va-button>
|
||||
<va-button class="mb-2 mr-2" color="secondary" @click="showFullscreenModal = true">
|
||||
{{ t('modal.fullscreen') }}
|
||||
</va-button>
|
||||
</va-card-content>
|
||||
</va-card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="flex md12">
|
||||
<va-card class="modals-list larger-padding">
|
||||
<va-card-title>{{ t('modal.titleOptions') }}</va-card-title>
|
||||
<va-card-content>
|
||||
<va-button class="mb-2 mr-2" color="danger" @click="showBlurredModal = true">
|
||||
{{ t('modal.blurred') }}
|
||||
</va-button>
|
||||
<va-modal
|
||||
v-model="showAnchorModal"
|
||||
anchor-class="modal-anchor"
|
||||
:title="t('modal.withAnchorSlot')"
|
||||
:message="t('modal.message')"
|
||||
:ok-text="t('modal.confirm')"
|
||||
:cancel-text="t('modal.cancel')"
|
||||
>
|
||||
<template #anchor="{ show }">
|
||||
<va-button class="mb-2 mr-2" @click="show">
|
||||
{{ t('modal.withAnchorSlot') }}
|
||||
</va-button>
|
||||
</template>
|
||||
</va-modal>
|
||||
</va-card-content>
|
||||
</va-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--//Modals-->
|
||||
<va-modal
|
||||
v-model="showSmallModal"
|
||||
size="small"
|
||||
:title="t('modal.smallTitle')"
|
||||
:message="t('modal.message')"
|
||||
:ok-text="t('modal.confirm')"
|
||||
:cancel-text="t('modal.cancel')"
|
||||
/>
|
||||
<va-modal
|
||||
v-model="showMediumModal"
|
||||
:title="t('modal.mediumTitle')"
|
||||
:ok-text="t('modal.confirm')"
|
||||
:cancel-text="t('modal.cancel')"
|
||||
:message="t('modal.message')"
|
||||
/>
|
||||
<va-modal
|
||||
v-model="showLargeModal"
|
||||
size="large"
|
||||
:title="t('modal.largeTitle')"
|
||||
:message="t('modal.message')"
|
||||
:ok-text="t('modal.confirm')"
|
||||
:cancel-text="t('modal.cancel')"
|
||||
/>
|
||||
<va-modal
|
||||
v-model="showFullscreenModal"
|
||||
:title="t('modal.fullscreen')"
|
||||
:ok-text="t('modal.confirm')"
|
||||
:cancel-text="t('modal.cancel')"
|
||||
:message="t('modal.message')"
|
||||
fullscreen
|
||||
/>
|
||||
<va-modal
|
||||
v-model="showStaticModal"
|
||||
:title="t('modal.staticTitle')"
|
||||
:ok-text="t('modal.confirm')"
|
||||
:cancel-text="t('modal.cancel')"
|
||||
:message="t('modal.staticMessage')"
|
||||
no-dismiss
|
||||
/>
|
||||
<va-modal
|
||||
v-model="showBlurredModal"
|
||||
:title="t('modal.blurred')"
|
||||
:message="t('modal.message')"
|
||||
:ok-text="t('modal.confirm')"
|
||||
:cancel-text="t('modal.cancel')"
|
||||
blur
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const showSmallModal = ref(false)
|
||||
const showMediumModal = ref(false)
|
||||
const showLargeModal = ref(false)
|
||||
const showFullscreenModal = ref(false)
|
||||
const showStaticModal = ref(false)
|
||||
|
||||
const showBlurredModal = ref(false)
|
||||
const showAnchorModal = ref(false)
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.modal-anchor {
|
||||
display: inline-flex;
|
||||
}
|
||||
</style>
|
||||
@@ -1,139 +0,0 @@
|
||||
<template>
|
||||
<div class="notifications">
|
||||
<div class="row">
|
||||
<div class="flex xs12">
|
||||
<va-card>
|
||||
<va-card-title>{{ t('notificationsPage.notifications.title') }}</va-card-title>
|
||||
<va-card-content>
|
||||
<div class="mb-3">
|
||||
<va-checkbox v-model="isCloseableAlertVisible" label="Toggle visibility" />
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<va-alert v-model="isCloseableAlertVisible" closeable>
|
||||
<template #icon>
|
||||
<va-badge :text="t('notificationsPage.notifications.success')" />
|
||||
</template>
|
||||
{{ t('notificationsPage.notifications.successMessage') }}
|
||||
</va-alert>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<va-alert v-model="isCloseableAlertVisible" color="info" closeable>
|
||||
<template #icon>
|
||||
<va-badge color="info" :text="t('notificationsPage.notifications.info')" />
|
||||
</template>
|
||||
{{ t('notificationsPage.notifications.infoMessage') }}
|
||||
</va-alert>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<va-alert v-model="isCloseableAlertVisible" color="warning" closeable>
|
||||
<template #icon>
|
||||
<va-badge color="warning" :text="t('notificationsPage.notifications.warning')" />
|
||||
</template>
|
||||
{{ t('notificationsPage.notifications.warningMessage') }}
|
||||
</va-alert>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<va-alert v-model="isCloseableAlertVisible" color="danger" closeable>
|
||||
<template #icon>
|
||||
<va-badge color="danger" :text="t('notificationsPage.notifications.danger')" />
|
||||
</template>
|
||||
{{ t('notificationsPage.notifications.dangerMessage') }}
|
||||
</va-alert>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<va-alert v-model="isCloseableAlertVisible" color="gray" closeable>
|
||||
<template #icon>
|
||||
<va-badge color="gray" :text="t('notificationsPage.notifications.gray')" />
|
||||
</template>
|
||||
{{ t('notificationsPage.notifications.warningMessage') }}
|
||||
</va-alert>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<va-alert v-model="isCloseableAlertVisible" color="dark" closeable>
|
||||
<template #icon>
|
||||
<va-badge color="dark" :text="t('notificationsPage.notifications.dark')" />
|
||||
</template>
|
||||
{{ t('notificationsPage.notifications.dangerMessage') }}
|
||||
</va-alert>
|
||||
</div>
|
||||
</va-card-content>
|
||||
</va-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="flex xs12">
|
||||
<va-card>
|
||||
<va-card-title>{{ t('notificationsPage.toasts.title') }}</va-card-title>
|
||||
<va-card-content class="row">
|
||||
<div class="flex xs12 md6">
|
||||
<va-input
|
||||
v-model="toastText"
|
||||
:label="t('notificationsPage.toasts.textLabel')"
|
||||
class="control-input mb-3"
|
||||
required
|
||||
/>
|
||||
<va-input
|
||||
v-model="toastDuration"
|
||||
type="number"
|
||||
:label="t('notificationsPage.toasts.durationLabel')"
|
||||
class="control-input mb-3"
|
||||
required
|
||||
/>
|
||||
<!-- <va-input
|
||||
v-model="toastIcon"
|
||||
:label="t('notificationsPage.toasts.iconLabel')"
|
||||
class="control-input mb-0"
|
||||
required
|
||||
/> -->
|
||||
</div>
|
||||
<div class="flex xs12 md6">
|
||||
<div class="row">
|
||||
<div class="flex xs12">
|
||||
<toast-position-picker v-model="toastPosition" />
|
||||
</div>
|
||||
<!-- <div class="flex xs12">
|
||||
<va-checkbox
|
||||
:label="t('notificationsPage.toasts.fullWidthLabel')"
|
||||
:id="'toast-fullwidth'"
|
||||
v-model="isToastFullWidth"
|
||||
/>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex xs12">
|
||||
<!-- There was slot="trigger" -->
|
||||
<va-button class="ma-0" color="primary" @click="launchToast">
|
||||
{{ t('notificationsPage.toasts.launchToast') }}
|
||||
</va-button>
|
||||
</div>
|
||||
</va-card-content>
|
||||
</va-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { ToastPosition, useToast } from 'vuestic-ui'
|
||||
import ToastPositionPicker from './ToastPositionPicker.vue'
|
||||
|
||||
const { t } = useI18n()
|
||||
const { init } = useToast()
|
||||
|
||||
const isCloseableAlertVisible = ref(true)
|
||||
|
||||
const toastText = ref('This toast is awesome!')
|
||||
const toastDuration = ref(2500)
|
||||
const toastPosition = ref<ToastPosition>('bottom-right')
|
||||
|
||||
function launchToast() {
|
||||
init({
|
||||
message: toastText.value,
|
||||
position: toastPosition.value,
|
||||
duration: Number(toastDuration.value),
|
||||
})
|
||||
}
|
||||
</script>
|
||||
@@ -1,109 +0,0 @@
|
||||
<template>
|
||||
<div class="toast-position-picker mr-4">
|
||||
<div class="position-boxes-row d-flex">
|
||||
<div
|
||||
class="position-box"
|
||||
:class="{ selected: isBoxSelected('top-left') }"
|
||||
:style="computedStyle"
|
||||
@click="updatePosition('top-left')"
|
||||
></div>
|
||||
<!-- <div class="position-box"
|
||||
@click="updatePosition('top-center')"
|
||||
:class="{'selected': isBoxSelected('top-center')}"
|
||||
:style="computedStyle">
|
||||
</div> -->
|
||||
<div
|
||||
class="position-box"
|
||||
:class="{ selected: isBoxSelected('top-right') }"
|
||||
:style="computedStyle"
|
||||
@click="updatePosition('top-right')"
|
||||
></div>
|
||||
</div>
|
||||
<div class="position-boxes-row d-flex">
|
||||
<div
|
||||
class="position-box"
|
||||
:class="{ selected: isBoxSelected('bottom-left') }"
|
||||
:style="computedStyle"
|
||||
@click="updatePosition('bottom-left')"
|
||||
></div>
|
||||
<!-- <div class="position-box"
|
||||
@click="updatePosition('bottom-center')"
|
||||
:class="{'selected': isBoxSelected('bottom-center')}"
|
||||
:style="computedStyle">
|
||||
</div> -->
|
||||
<div
|
||||
class="position-box"
|
||||
:class="{ selected: isBoxSelected('bottom-right') }"
|
||||
:style="computedStyle"
|
||||
@click="updatePosition('bottom-right')"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useColors } from 'vuestic-ui'
|
||||
import { computed } from 'vue'
|
||||
const { colors } = useColors()
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
modelValue?: string
|
||||
}>(),
|
||||
{
|
||||
modelValue: 'bottom-center',
|
||||
},
|
||||
)
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', position: string): void
|
||||
}>()
|
||||
const computedStyle = computed(() => {
|
||||
return {
|
||||
backgroundColor: colors.primary,
|
||||
}
|
||||
})
|
||||
|
||||
function updatePosition(position: string) {
|
||||
emit('update:modelValue', position)
|
||||
}
|
||||
|
||||
function isBoxSelected(position: string) {
|
||||
return props.modelValue === position
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.toast-position-picker {
|
||||
width: 112px;
|
||||
height: 76px;
|
||||
}
|
||||
|
||||
.position-boxes-row {
|
||||
flex-direction: row;
|
||||
|
||||
&:first-child {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.position-box {
|
||||
height: 36px;
|
||||
width: 36px;
|
||||
margin-right: 2px;
|
||||
cursor: pointer;
|
||||
opacity: 0.3;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user