deep-stack/cosmos-explorer
4
0
Fork 0
forked from LaconicNetwork/cosmos-explorer
Code Pull Requests Activity

feat: format code

Browse Source
This commit is contained in:
Alisa | Side.one
2023-05-06 22:56:04 +08:00
parent b17d6fd6bf
commit 5c3118116f
85 changed files with 4308 additions and 3261 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/CardParameter.vue
+11 -11
View File
@@ -1,26 +1,26 @@
<script lang="ts" setup>
import type { PropType } from 'vue';
import { useFormatter } from "@/stores";
import { useFormatter } from '@/stores';
const props = defineProps({
cardItem: {
type: Object as PropType<{ title: string; items: Array<any> }>,
},
});
const formatter = useFormatter()
function calculateValue(value: any){
if (Array.isArray(value) ){
return (value[0] && value[0].amount)|| '-'
const formatter = useFormatter();
function calculateValue(value: any) {
if (Array.isArray(value)) {
return (value[0] && value[0].amount) || '-';
}
const newValue = Number(value)
if(`${newValue}` === 'NaN' || typeof(value) === 'boolean'){
return value
const newValue = Number(value);
if (`${newValue}` === 'NaN' || typeof value === 'boolean') {
return value;
}
if (newValue < 1 && newValue > 0) {
return formatter.formatDecimalToPercent(value)
return formatter.formatDecimalToPercent(value);
}
return newValue
return newValue;
}
</script>
<template>
src/components/CardStatisticsHorizontal.vue
+12 -12
View File
@@ -2,18 +2,21 @@
import { controlledComputed } from '@vueuse/shared';
interface Props {
title: string
color?: string
icon: string
stats: number
change?: number
title: string;
color?: string;
icon: string;
stats: number;
change?: number;
}
const props = withDefaults(defineProps<Props>(), {
color: 'primary',
})
});
const isPositive = controlledComputed(() => props.change, () => Math.sign(props.change||0) === 1)
const isPositive = controlledComputed(
() => props.change,
() => Math.sign(props.change || 0) === 1
);
</script>
<template>
@@ -26,16 +29,13 @@ const isPositive = controlledComputed(() => props.change, () => Math.sign(props.
variant="tonal"
class="me-4"
>
<VIcon
:icon="props.icon"
size="24"
/>
<VIcon :icon="props.icon" size="24" />
</VAvatar>
<div class="d-flex flex-column">
<div class="d-flex align-center flex-wrap">
<h6 class="text-h6">
{{ (props.stats) }}
{{ props.stats }}
</h6>
<div
v-if="props.change"
src/components/CardStatisticsVertical.vue
+7 -1
View File
@@ -21,7 +21,13 @@ const isPositive = controlledComputed(
<template>
<VCard class="h-full flex-col content-between">
<VCardText class="d-flex align-center justify-between">
<VAvatar v-if="props.icon" rounded size="38" variant="tonal" :color="props.color">
<VAvatar
v-if="props.icon"
rounded
size="38"
variant="tonal"
:color="props.color"
>
<VIcon :icon="props.icon" size="24" />
</VAvatar>
src/components/CardStatisticsWithImages.vue
+13 -14
View File
@@ -1,19 +1,22 @@
<script setup lang="ts">
interface Props {
title: string
subtitle: string
stats: string
change: number
image: string
imgWidth: number
color?: string
title: string;
subtitle: string;
stats: string;
change: number;
image: string;
imgWidth: number;
color?: string;
}
const props = withDefaults(defineProps<Props>(), {
color: 'primary',
})
});
const isPositive = controlledComputed(() => props.change, () => Math.sign(props.change) === 1)
const isPositive = controlledComputed(
() => props.change,
() => Math.sign(props.change) === 1
);
</script>
<template>
@@ -47,11 +50,7 @@ const isPositive = controlledComputed(() => props.change, () => Math.sign(props.
<VSpacer />
<div class="illustrator-img">
<VImg
v-if="props.image"
:src="props.image"
:width="props.imgWidth"
/>
<VImg v-if="props.image" :src="props.image" :width="props.imgWidth" />
</div>
</VCard>
</template>
src/components/Countdown.vue
+11 -6
View File
@@ -1,12 +1,17 @@
<script lang="ts" setup >
<script lang="ts" setup>
import VueCountdown from '@chenfengyuan/vue-countdown';
const props = defineProps({
time: { type: Number},
})
time: { type: Number },
});
</script>
<template>
<vue-countdown v-if="time" :time="time > 0? time: 0" v-slot="{ days, hours, minutes, seconds }">
Time Remaining：{{ days }} days, {{ hours }} hours, {{ minutes }} minutes, {{ seconds }} seconds.
</vue-countdown>
<vue-countdown
v-if="time"
:time="time > 0 ? time : 0"
v-slot="{ days, hours, minutes, seconds }"
>
Time Remaining：{{ days }} days, {{ hours }} hours, {{ minutes }} minutes,
{{ seconds }} seconds.
</vue-countdown>
</template>
src/components/ProposalProcess.vue
+16 -5
View File
@@ -15,17 +15,28 @@ const props = defineProps({
});
const total = computed(() => props.pool?.bonded_tokens);
const format = useFormatter();
const yes = computed(() => format.calculatePercent(props.tally?.yes, total.value));
const no = computed(() => format.calculatePercent(props.tally?.no, total.value));
const abstain = computed(() => format.calculatePercent(props.tally?.abstain, total.value));
const veto = computed(() => format.calculatePercent(props.tally?.no_with_veto, total.value));
const yes = computed(() =>
format.calculatePercent(props.tally?.yes, total.value)
);
const no = computed(() =>
format.calculatePercent(props.tally?.no, total.value)
);
const abstain = computed(() =>
format.calculatePercent(props.tally?.abstain, total.value)
);
const veto = computed(() =>
format.calculatePercent(props.tally?.no_with_veto, total.value)
);
</script>
<template>
<div class="progress rounded-full h-1 text-xs flex items-center">
<div class="h-1 bg-yes" :style="`width: ${yes}`"></div>
<div class="h-1 bg-no" :style="`width: ${no}`"></div>
<div class="h-1" :style="`width: ${veto}; background-color: #B71C1C;`"></div>
<div
class="h-1"
:style="`width: ${veto}; background-color: #B71C1C;`"
></div>
<div class="h-1 bg-secondary" :style="`width: ${abstain}`"></div>
</div>
</template>
src/components/ThemeSwitcher.vue
+8 -9
View File
@@ -14,28 +14,30 @@ const {
next: getNextThemeName,
index: currentThemeIndex,
} = useCycleList(
props.themes.map(t => t.name),
props.themes.map((t) => t.name),
{ initialValue: theme.value }
);
const changeTheme = () => {
theme.value = getNextThemeName();
theme.value = getNextThemeName();
};
const changeMode = (val: 'dark' | 'light' | 'system') => {
let value = val;
if (theme.value === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
if (
theme.value === 'system' &&
window.matchMedia('(prefers-color-scheme: dark)').matches
) {
value = 'dark';
}
if (value === 'dark') {
document.documentElement.classList.add('dark');
document.documentElement.classList.remove('light');
} else {
document.documentElement.classList.add('light');
document.documentElement.classList.remove('dark');
}
document.documentElement.setAttribute("data-theme", value);
document.documentElement.setAttribute('data-theme', value);
};
// Update icon if theme is changed from other sources
watch(theme, (val: 'dark' | 'light' | 'system') => {
@@ -52,10 +54,7 @@ onMounted(() => {
<template>
<div class="tooltip tooltip-bottom delay-1000" :data-tip="currentThemeName">
<button
class="btn btn-ghost btn-circle btn-sm mx-1"
@click="changeTheme"
>
<button class="btn btn-ghost btn-circle btn-sm mx-1" @click="changeTheme">
<Icon :icon="props.themes[currentThemeIndex].icon" class="text-2xl" />
</button>
</div>
src/components/UptimeBar.vue
+29 -24
View File
@@ -1,32 +1,37 @@
<script lang=ts setup>
import type { Commit } from "@/types";
<script lang="ts" setup>
import type { Commit } from '@/types';
const props = defineProps({
blocks: { type: Array as PropType<Commit[]>},
blocks: { type: Array as PropType<Commit[]> },
validator: { type: String },
})
});
const bars = computed(() => {
const uptime = Array(50).fill({height:0, color: 'bg-secondary'})
props.blocks.forEach(element => {
const has = element.signatures?.findIndex(sig => sig.validator_address === props.validator )
// console.log(has, props.validato, element)
uptime.push({
height: element.height,
color: has > -1 ? 'bg-success' : 'bg-error'
})
uptime.shift()
const uptime = Array(50).fill({ height: 0, color: 'bg-secondary' });
props.blocks.forEach((element) => {
const has = element.signatures?.findIndex(
(sig) => sig.validator_address === props.validator
);
// console.log(has, props.validato, element)
uptime.push({
height: element.height,
color: has > -1 ? 'bg-success' : 'bg-error',
});
return uptime
})
uptime.shift();
});
return uptime;
});
</script>
<template>
<div class="d-flex justify-evenly">
<span v-for="(b,i) in bars"
:key="i"
:class="b.color"
style="width:1.5%">&nbsp;
<v-tooltip v-if="Number(b.height) > 0" activator="parent" location="top">{{ b.height }}</v-tooltip>
</span>
</div>
</template>
<div class="d-flex justify-evenly">
<span v-for="(b, i) in bars" :key="i" :class="b.color" style="width: 1.5%"
>&nbsp;
<v-tooltip
v-if="Number(b.height) > 0"
activator="parent"
location="top"
>{{ b.height }}</v-tooltip
>
</span>
</div>
</template>
src/components/ValidatorCommissionRate.vue
+66 -34
View File
@@ -1,44 +1,61 @@
<script setup lang="ts">
import VueApexCharts from 'vue3-apexcharts'
import { useTheme } from 'vuetify'
import { hexToRgb } from '@/plugins/vuetify/@layouts/utils'
import VueApexCharts from 'vue3-apexcharts';
import { useTheme } from 'vuetify';
import { hexToRgb } from '@/plugins/vuetify/@layouts/utils';
import { computed, type PropType } from 'vue';
import { useFormatter } from '@/stores';
import type { CommissionRate } from '@/types'
import type { CommissionRate } from '@/types';
const props = defineProps({
commission: { type: Object as PropType<CommissionRate>},
})
let rate = computed(() => Number(props.commission?.commission_rates.rate || 0) * 100)
let change = computed(() => Number(props.commission?.commission_rates.max_change_rate || 0) * 100)
let max = computed(() => Number(props.commission?.commission_rates.max_rate || 1) * 100)
commission: { type: Object as PropType<CommissionRate> },
});
let rate = computed(
() => Number(props.commission?.commission_rates.rate || 0) * 100
);
let change = computed(
() => Number(props.commission?.commission_rates.max_change_rate || 0) * 100
);
let max = computed(
() => Number(props.commission?.commission_rates.max_rate || 1) * 100
);
// const rate = 15 // props.commision?.commissionRates.rate
// const change = 15
// const max = 20
const left = rate
const right = computed(() => max.value - rate.value)
const left = rate;
const right = computed(() => max.value - rate.value);
const s1 = computed(() => left.value > change.value ? left.value - change.value : 0 )
const s2 = computed(() => left.value > change.value ? change.value: left.value)
const s3 = 2
const s4 = computed(() => right.value > change.value? change.value: right.value)
const s5 = computed(() => right.value > change.value? right.value - change.value: 0)
const s1 = computed(() =>
left.value > change.value ? left.value - change.value : 0
);
const s2 = computed(() =>
left.value > change.value ? change.value : left.value
);
const s3 = 2;
const s4 = computed(() =>
right.value > change.value ? change.value : right.value
);
const s5 = computed(() =>
right.value > change.value ? right.value - change.value : 0
);
const series = computed(() => [s1.value, s2.value, s3, s4.value, s5.value])
const series = computed(() => [s1.value, s2.value, s3, s4.value, s5.value]);
const vuetifyTheme = useTheme()
const format = useFormatter()
const vuetifyTheme = useTheme();
const format = useFormatter();
const chartConfig = computed(() => {
const themeColors = vuetifyTheme.current.value.colors
const variableTheme = vuetifyTheme.current.value.variables
const themeColors = vuetifyTheme.current.value.colors;
const variableTheme = vuetifyTheme.current.value.variables;
const secondaryText = `rgba(${hexToRgb(String(themeColors['on-background']))},${variableTheme['medium-emphasis-opacity']})`
const primaryText = `rgba(${hexToRgb(String(themeColors['on-background']))},${variableTheme['high-emphasis-opacity']})`
const secondaryText = `rgba(${hexToRgb(
String(themeColors['on-background'])
)},${variableTheme['medium-emphasis-opacity']})`;
const primaryText = `rgba(${hexToRgb(String(themeColors['on-background']))},${
variableTheme['high-emphasis-opacity']
})`;
return {
chart: {
@@ -54,8 +71,18 @@ const chartConfig = computed(() => {
legend: { show: false },
tooltip: { enabled: false },
dataLabels: { enabled: false },
stroke: { width: 3, lineCap: 'round', colors: ['rgba(var(--v-theme-surface), 1)'] },
labels: ['Available', 'Daily Change', 'Commission Rate', 'Daily Change', 'Available'],
stroke: {
width: 3,
lineCap: 'round',
colors: ['rgba(var(--v-theme-surface), 1)'],
},
labels: [
'Available',
'Daily Change',
'Commission Rate',
'Daily Change',
'Available',
],
states: {
hover: {
filter: { type: 'none' },
@@ -90,7 +117,7 @@ const chartConfig = computed(() => {
label: 'Commission Rate',
fontSize: '1rem',
color: secondaryText,
formatter: ( ) => `${rate.value}%`,
formatter: () => `${rate.value}%`,
},
},
},
@@ -104,13 +131,18 @@ const chartConfig = computed(() => {
},
},
],
}
})
};
});
</script>
<template>
<VCard title="Commission Rate" :subtitle="`Updated at ${format.toDay(props.commission?.update_time, 'short')}`">
<VCard
title="Commission Rate"
:subtitle="`Updated at ${format.toDay(
props.commission?.update_time,
'short'
)}`"
>
<VCardText>
<VueApexCharts
type="donut"
@@ -121,15 +153,15 @@ const chartConfig = computed(() => {
<div class="d-flex align-center justify-center flex-wrap mx-2 gap-x-6">
<div class="d-flex align-center gap-2">
<VBadge dot color="success"/>
<VBadge dot color="success" />
<span class="mt-1 text-caption">Rate:{{ rate }}%</span>
</div>
<div class="d-flex align-center gap-2">
<VBadge dot color="success" style="opacity:0.2"/>
<VBadge dot color="success" style="opacity: 0.2" />
<span class="mt-1 text-caption">24h: ±{{ change }}%</span>
</div>
<div class="d-flex align-center gap-2">
<VBadge dot color="secondary"/>
<VBadge dot color="secondary" />
<span class="mt-1 text-caption">Max:{{ max }}%</span>
</div>
</div>
src/components/charts/DonutChart.vue
+8 -8
View File
@@ -1,15 +1,15 @@
<script lang="ts" setup>
import VueApexCharts from 'vue3-apexcharts'
import { useTheme } from 'vuetify'
import { getDonutChartConfig } from './apexChartConfig'
import VueApexCharts from 'vue3-apexcharts';
import { useTheme } from 'vuetify';
import { getDonutChartConfig } from './apexChartConfig';
const props = defineProps(["series", "labels"])
const vuetifyTheme = useTheme()
const expenseRationChartConfig = computed(() => getDonutChartConfig(vuetifyTheme.current.value, props.labels))
const props = defineProps(['series', 'labels']);
const vuetifyTheme = useTheme();
const expenseRationChartConfig = computed(() =>
getDonutChartConfig(vuetifyTheme.current.value, props.labels)
);
</script>
<template>
src/components/charts/PriceMarketChart.vue
+26 -15
View File
@@ -1,30 +1,41 @@
<script lang="ts" setup>
import VueApexCharts from 'vue3-apexcharts'
import { useTheme } from 'vuetify'
import { getAreaChartSplineConfig, getMarketPriceChartConfig } from './apexChartConfig'
import VueApexCharts from 'vue3-apexcharts';
import { useTheme } from 'vuetify';
import {
getAreaChartSplineConfig,
getMarketPriceChartConfig,
} from './apexChartConfig';
import { useIndexModule } from '@/modules/[chain]/indexStore';
import { computed, ref } from '@vue/reactivity';
const store = useIndexModule()
const vuetifyTheme = useTheme()
const store = useIndexModule();
const vuetifyTheme = useTheme();
const chartConfig = computed(() => {
const labels = store.marketData.prices.map(x => x[0])
return getMarketPriceChartConfig(vuetifyTheme.current.value, labels)
})
const kind = ref('price')
const labels = store.marketData.prices.map((x) => x[0]);
return getMarketPriceChartConfig(vuetifyTheme.current.value, labels);
});
const kind = ref('price');
const series = computed(() => {
return [{
name: 'Price',
data: kind.value ==='price'?store.marketData.prices.map(x => x[1]) : store.marketData.total_volumes.map(x => x[1])}]
})
return [
{
name: 'Price',
data:
kind.value === 'price'
? store.marketData.prices.map((x) => x[1])
: store.marketData.total_volumes.map((x) => x[1]),
},
];
});
</script>
<template>
<VTabs v-model="kind" align-tabs="end"><VTab value="price">Price</VTab><VTab value="volume">Volume</VTab></VTabs>
<VTabs v-model="kind" align-tabs="end"
><VTab value="price">Price</VTab><VTab value="volume">Volume</VTab></VTabs
>
<VueApexCharts
type="area"
height="261"
:options="chartConfig"
:series="series"
/>
</template>
</template>
src/components/charts/apexChartConfig.ts
+177 -82
View File
@@ -1,20 +1,38 @@
import type { ThemeInstance } from 'vuetify'
import { hexToRgb } from '@/plugins/vuetify/@layouts/utils'
import numeral from 'numeral'
import type { ThemeInstance } from 'vuetify';
import { hexToRgb } from '@/plugins/vuetify/@layouts/utils';
import numeral from 'numeral';
// 👉 Colors variables
const colorVariables = (themeColors: ThemeInstance['themes']['value']['colors']) => {
const themeSecondaryTextColor = `rgba(${hexToRgb(themeColors.colors['on-surface'])},${themeColors.variables['medium-emphasis-opacity']})`
const themeDisabledTextColor = `rgba(${hexToRgb(themeColors.colors['on-surface'])},${themeColors.variables['disabled-opacity']})`
const themeBorderColor = `rgba(${hexToRgb(String(themeColors.variables['border-color']))},${themeColors.variables['border-opacity']})`
const themePrimaryTextColor = `rgba(${hexToRgb(themeColors.colors['on-surface'])},${themeColors.variables['high-emphasis-opacity']})`
const colorVariables = (
themeColors: ThemeInstance['themes']['value']['colors']
) => {
const themeSecondaryTextColor = `rgba(${hexToRgb(
themeColors.colors['on-surface']
)},${themeColors.variables['medium-emphasis-opacity']})`;
const themeDisabledTextColor = `rgba(${hexToRgb(
themeColors.colors['on-surface']
)},${themeColors.variables['disabled-opacity']})`;
const themeBorderColor = `rgba(${hexToRgb(
String(themeColors.variables['border-color'])
)},${themeColors.variables['border-opacity']})`;
const themePrimaryTextColor = `rgba(${hexToRgb(
themeColors.colors['on-surface']
)},${themeColors.variables['high-emphasis-opacity']})`;
return { themeSecondaryTextColor, themeDisabledTextColor, themeBorderColor, themePrimaryTextColor }
}
return {
themeSecondaryTextColor,
themeDisabledTextColor,
themeBorderColor,
themePrimaryTextColor,
};
};
/// Price Chart config
export const getMarketPriceChartConfig = (themeColors: ThemeInstance['themes']['value']['colors'], categories: string[]) => {
const { themeSecondaryTextColor, themeBorderColor, themeDisabledTextColor } = colorVariables(themeColors)
export const getMarketPriceChartConfig = (
themeColors: ThemeInstance['themes']['value']['colors'],
categories: string[]
) => {
const { themeSecondaryTextColor, themeBorderColor, themeDisabledTextColor } =
colorVariables(themeColors);
return {
chart: {
@@ -25,7 +43,7 @@ export const getMarketPriceChartConfig = (themeColors: ThemeInstance['themes']['
},
tooltip: {
theme: 'dark',
shared: false
shared: false,
},
dataLabels: { enabled: false },
stroke: {
@@ -64,9 +82,9 @@ export const getMarketPriceChartConfig = (themeColors: ThemeInstance['themes']['
labels: {
style: { colors: themeDisabledTextColor },
formatter: function (value: string) {
const pattern = (Number(value) > 0.01 ? '0.0[0]a': '0.00[000]')
const pattern = Number(value) > 0.01 ? '0.0[0]a' : '0.00[000]';
return numeral(value).format(pattern);
}
},
},
},
xaxis: {
@@ -82,19 +100,22 @@ export const getMarketPriceChartConfig = (themeColors: ThemeInstance['themes']['
},
categories,
},
}
}
};
};
/// default config
export const getScatterChartConfig = (themeColors: ThemeInstance['themes']['value']['colors']) => {
export const getScatterChartConfig = (
themeColors: ThemeInstance['themes']['value']['colors']
) => {
const scatterColors = {
series1: '#ff9f43',
series2: '#7367f0',
series3: '#28c76f',
}
};
const { themeSecondaryTextColor, themeBorderColor, themeDisabledTextColor } = colorVariables(themeColors)
const { themeSecondaryTextColor, themeBorderColor, themeDisabledTextColor } =
colorVariables(themeColors);
return {
chart: {
@@ -116,7 +137,11 @@ export const getScatterChartConfig = (themeColors: ThemeInstance['themes']['valu
horizontal: 10,
},
},
colors: [scatterColors.series1, scatterColors.series2, scatterColors.series3],
colors: [
scatterColors.series1,
scatterColors.series2,
scatterColors.series3,
],
grid: {
borderColor: themeBorderColor,
xaxis: {
@@ -141,10 +166,13 @@ export const getScatterChartConfig = (themeColors: ThemeInstance['themes']['valu
formatter: (val: string) => parseFloat(val).toFixed(1),
},
},
}
}
export const getLineChartSimpleConfig = (themeColors: ThemeInstance['themes']['value']['colors']) => {
const { themeBorderColor, themeDisabledTextColor } = colorVariables(themeColors)
};
};
export const getLineChartSimpleConfig = (
themeColors: ThemeInstance['themes']['value']['colors']
) => {
const { themeBorderColor, themeDisabledTextColor } =
colorVariables(themeColors);
return {
chart: {
@@ -174,7 +202,7 @@ export const getLineChartSimpleConfig = (themeColors: ThemeInstance['themes']['v
custom(data: any) {
return `<div class='bar-chart pa-2'>
<span>${data.series[data.seriesIndex][data.dataPointIndex]}%</span>
</div>`
</div>`;
},
},
yaxis: {
@@ -210,11 +238,14 @@ export const getLineChartSimpleConfig = (themeColors: ThemeInstance['themes']['v
'21/12',
],
},
}
}
};
};
export const getBarChartConfig = (themeColors: ThemeInstance['themes']['value']['colors']) => {
const { themeBorderColor, themeDisabledTextColor } = colorVariables(themeColors)
export const getBarChartConfig = (
themeColors: ThemeInstance['themes']['value']['colors']
) => {
const { themeBorderColor, themeDisabledTextColor } =
colorVariables(themeColors);
return {
chart: {
@@ -248,21 +279,32 @@ export const getBarChartConfig = (themeColors: ThemeInstance['themes']['value'][
xaxis: {
axisBorder: { show: false },
axisTicks: { color: themeBorderColor },
categories: ['MON, 11', 'THU, 14', 'FRI, 15', 'MON, 18', 'WED, 20', 'FRI, 21', 'MON, 23'],
categories: [
'MON, 11',
'THU, 14',
'FRI, 15',
'MON, 18',
'WED, 20',
'FRI, 21',
'MON, 23',
],
labels: {
style: { colors: themeDisabledTextColor },
},
},
}
}
};
};
export const getCandlestickChartConfig = (themeColors: ThemeInstance['themes']['value']['colors']) => {
export const getCandlestickChartConfig = (
themeColors: ThemeInstance['themes']['value']['colors']
) => {
const candlestickColors = {
series1: '#28c76f',
series2: '#ea5455',
}
};
const { themeBorderColor, themeDisabledTextColor } = colorVariables(themeColors)
const { themeBorderColor, themeDisabledTextColor } =
colorVariables(themeColors);
return {
chart: {
@@ -305,18 +347,21 @@ export const getCandlestickChartConfig = (themeColors: ThemeInstance['themes']['
style: { colors: themeDisabledTextColor },
},
},
}
}
export const getRadialBarChartConfig = (themeColors: ThemeInstance['themes']['value']['colors']) => {
};
};
export const getRadialBarChartConfig = (
themeColors: ThemeInstance['themes']['value']['colors']
) => {
const radialBarColors = {
series1: '#fdd835',
series2: '#32baff',
series3: '#00d4bd',
series4: '#7367f0',
series5: '#FFA1A1',
}
};
const { themeSecondaryTextColor, themePrimaryTextColor } = colorVariables(themeColors)
const { themeSecondaryTextColor, themePrimaryTextColor } =
colorVariables(themeColors);
return {
stroke: { lineCap: 'round' },
@@ -335,7 +380,11 @@ export const getRadialBarChartConfig = (themeColors: ThemeInstance['themes']['va
horizontal: 10,
},
},
colors: [radialBarColors.series1, radialBarColors.series2, radialBarColors.series4],
colors: [
radialBarColors.series1,
radialBarColors.series2,
radialBarColors.series4,
],
plotOptions: {
radialBar: {
hollow: { size: '30%' },
@@ -359,16 +408,16 @@ export const getRadialBarChartConfig = (themeColors: ThemeInstance['themes']['va
color: themePrimaryTextColor,
// eslint-disable-next-line @typescript-eslint/no-explicit-any
formatter(w: { globals: { seriesTotals: any[]; series: string | any[] } }) {
const totalValue
= w.globals.seriesTotals.reduce((a: number, b: number) => {
return a + b
}, 0) / w.globals.series.length
formatter(w: {
globals: { seriesTotals: any[]; series: string | any[] };
}) {
const totalValue =
w.globals.seriesTotals.reduce((a: number, b: number) => {
return a + b;
}, 0) / w.globals.series.length;
if (totalValue % 1 === 0)
return `${totalValue}%`
else
return `${totalValue.toFixed(2)}%`
if (totalValue % 1 === 0) return `${totalValue}%`;
else return `${totalValue.toFixed(2)}%`;
},
},
},
@@ -380,24 +429,33 @@ export const getRadialBarChartConfig = (themeColors: ThemeInstance['themes']['va
bottom: -30,
},
},
}
}
};
};
export const getDonutChartConfig = (themeColors: ThemeInstance['themes']['value']['colors'], labels: string[]) => {
export const getDonutChartConfig = (
themeColors: ThemeInstance['themes']['value']['colors'],
labels: string[]
) => {
const donutColors = {
series1: '#fdd835',
series2: '#00d4bd',
series3: '#826bf8',
series4: '#32baff',
series5: '#ffa1a1',
}
};
const { themeSecondaryTextColor, themePrimaryTextColor } = colorVariables(themeColors)
const { themeSecondaryTextColor, themePrimaryTextColor } =
colorVariables(themeColors);
return {
stroke: { width: 0 },
labels,
colors: [donutColors.series1, donutColors.series5, donutColors.series3, donutColors.series2],
colors: [
donutColors.series1,
donutColors.series5,
donutColors.series3,
donutColors.series2,
],
dataLabels: {
enabled: true,
formatter: (val: string) => `${parseInt(val, 10)}%`,
@@ -474,17 +532,20 @@ export const getDonutChartConfig = (themeColors: ThemeInstance['themes']['value'
},
},
],
}
}
};
};
export const getAreaChartSplineConfig = (themeColors: ThemeInstance['themes']['value']['colors']) => {
export const getAreaChartSplineConfig = (
themeColors: ThemeInstance['themes']['value']['colors']
) => {
const areaColors = {
series3: '#e0cffe',
series2: '#b992fe',
series1: '#ab7efd',
}
};
const { themeSecondaryTextColor, themeBorderColor, themeDisabledTextColor } = colorVariables(themeColors)
const { themeSecondaryTextColor, themeBorderColor, themeDisabledTextColor } =
colorVariables(themeColors);
return {
chart: {
@@ -555,17 +616,20 @@ export const getAreaChartSplineConfig = (themeColors: ThemeInstance['themes']['v
'19/12',
],
},
}
}
};
};
export const getColumnChartConfig = (themeColors: ThemeInstance['themes']['value']['colors']) => {
export const getColumnChartConfig = (
themeColors: ThemeInstance['themes']['value']['colors']
) => {
const columnColors = {
series1: '#826af9',
series2: '#d2b0ff',
bg: '#f8d3ff',
}
};
const { themeSecondaryTextColor, themeBorderColor, themeDisabledTextColor } = colorVariables(themeColors)
const { themeSecondaryTextColor, themeBorderColor, themeDisabledTextColor } =
colorVariables(themeColors);
return {
chart: {
@@ -602,7 +666,13 @@ export const getColumnChartConfig = (themeColors: ThemeInstance['themes']['value
colors: {
backgroundBarRadius: 10,
backgroundBarColors: [columnColors.bg, columnColors.bg, columnColors.bg, columnColors.bg, columnColors.bg],
backgroundBarColors: [
columnColors.bg,
columnColors.bg,
columnColors.bg,
columnColors.bg,
columnColors.bg,
],
},
},
},
@@ -621,7 +691,17 @@ export const getColumnChartConfig = (themeColors: ThemeInstance['themes']['value
axisBorder: { show: false },
axisTicks: { color: themeBorderColor },
categories: ['7/12', '8/12', '9/12', '10/12', '11/12', '12/12', '13/12', '14/12', '15/12'],
categories: [
'7/12',
'8/12',
'9/12',
'10/12',
'11/12',
'12/12',
'13/12',
'14/12',
'15/12',
],
crosshairs: {
stroke: { color: themeBorderColor },
},
@@ -641,11 +721,14 @@ export const getColumnChartConfig = (themeColors: ThemeInstance['themes']['value
},
},
],
}
}
};
};
export const getHeatMapChartConfig = (themeColors: ThemeInstance['themes']['value']['colors']) => {
const { themeSecondaryTextColor, themeDisabledTextColor } = colorVariables(themeColors)
export const getHeatMapChartConfig = (
themeColors: ThemeInstance['themes']['value']['colors']
) => {
const { themeSecondaryTextColor, themeDisabledTextColor } =
colorVariables(themeColors);
return {
chart: {
@@ -700,16 +783,19 @@ export const getHeatMapChartConfig = (themeColors: ThemeInstance['themes']['valu
axisTicks: { show: false },
axisBorder: { show: false },
},
}
}
};
};
export const getRadarChartConfig = (themeColors: ThemeInstance['themes']['value']['colors']) => {
export const getRadarChartConfig = (
themeColors: ThemeInstance['themes']['value']['colors']
) => {
const radarColors = {
series1: '#9b88fa',
series2: '#ffa1a1',
}
};
const { themeSecondaryTextColor, themeBorderColor, themeDisabledTextColor } = colorVariables(themeColors)
const { themeSecondaryTextColor, themeBorderColor, themeDisabledTextColor } =
colorVariables(themeColors);
return {
chart: {
@@ -759,7 +845,16 @@ export const getRadarChartConfig = (themeColors: ThemeInstance['themes']['value'
},
yaxis: { show: false },
xaxis: {
categories: ['Battery', 'Brand', 'Camera', 'Memory', 'Storage', 'Display', 'OS', 'Price'],
categories: [
'Battery',
'Brand',
'Camera',
'Memory',
'Storage',
'Display',
'OS',
'Price',
],
labels: {
style: {
colors: [
@@ -775,5 +870,5 @@ export const getRadarChartConfig = (themeColors: ThemeInstance['themes']['value'
},
},
},
}
}
};
};
src/components/dynamic/ArrayBytesElement.vue
+3 -4
View File
@@ -2,9 +2,8 @@
import { fromBase64, toBase64 } from '@cosmjs/encoding';
const props = defineProps({
value: { type: Array<Uint8Array>},
})
value: { type: Array<Uint8Array> },
});
</script>
<template>
<div>
@@ -12,4 +11,4 @@ const props = defineProps({
{{ toBase64(v) }}
</div>
</div>
</template>
</template>
src/components/dynamic/ArrayCoinElement.vue
+6 -7
View File
@@ -3,19 +3,18 @@ import { useFormatter } from '@/stores';
import type { Coin } from '@/types';
const props = defineProps({
value: { type: Array<Coin>},
})
const format = useFormatter()
value: { type: Array<Coin> },
});
const format = useFormatter();
</script>
<template>
<div>
{{ format.formatTokens(value, true, "0,0.[000000]") }}
{{ format.formatTokens(value, true, '0,0.[000000]') }}
</div>
</template>
<script lang="ts">
export default {
name: 'ArrayCoinElement'
}
name: 'ArrayCoinElement',
};
</script>
src/components/dynamic/ArrayElement.vue
+12 -13
View File
@@ -3,32 +3,31 @@ import { toBase64 } from '@cosmjs/encoding';
import type { PropType } from 'vue';
import { computed } from '@vue/reactivity';
import DynamicComponentVue from './DynamicComponent.vue';
import {select} from './index'
import { select } from './index';
import ArrayBytesElement from './ArrayBytesElement.vue';
import ArrayObjectElement from './ArrayObjectElement.vue';
import TextElement from './TextElement.vue';
import ArrayCoinElement from './ArrayCoinElement.vue';
const props = defineProps({
value: { type: Array<Object>},
})
value: { type: Array<Object> },
});
function selectByElement() {
if(props.value && props.value.length > 0) {
const [first] = props.value
switch(true) {
case first instanceof Uint8Array:
return ArrayBytesElement
if (props.value && props.value.length > 0) {
const [first] = props.value;
switch (true) {
case first instanceof Uint8Array:
return ArrayBytesElement;
case Object.keys(first).includes('denom'):
return ArrayCoinElement
return ArrayCoinElement;
default:
return ArrayObjectElement
return ArrayObjectElement;
}
}
return TextElement
return TextElement;
}
</script>
<template>
<Component :is="selectByElement()" :value="props.value"></Component>
</template>
</template>
src/components/dynamic/ArrayObjectElement.vue
+26 -15
View File
@@ -6,33 +6,44 @@ const props = defineProps({
value: { type: null as any },
thead: {
type: Boolean,
default: true
}
})
default: true,
},
});
const header = computed(() => {
if(props.value && props.value.length > 0) {
return Object.keys(props.value[0])
if (props.value && props.value.length > 0) {
return Object.keys(props.value[0]);
}
return []
})
return [];
});
</script>
<template>
<VTable v-if="header.length > 0" density="compact" height="300px" fixed-header hover>
<VTable
v-if="header.length > 0"
density="compact"
height="300px"
fixed-header
hover
>
<thead v-if="thead">
<tr>
<th v-for="(item, index) in header" :key="index" class="text-left text-capitalize">{{ item }}</th>
<th
v-for="(item, index) in header"
:key="index"
class="text-left text-capitalize"
>
{{ item }}
</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in value" :key="index">
<td v-for="(el, key) in header" :key="key"> <DynamicComponent :value="item[el]" /></td>
<td v-for="(el, key) in header" :key="key">
<DynamicComponent :value="item[el]" />
</td>
</tr>
</tbody>
</VTable>
<div v-else class="h-[300px]">
</div>
</template>
<div v-else class="h-[300px]"></div>
</template>
src/components/dynamic/DynamicComponent.vue
+4 -5
View File
@@ -1,9 +1,8 @@
<script lang="ts" setup>
import { select } from './index'
import { select } from './index';
const props = defineProps(["value", "direct"]);
const props = defineProps(['value', 'direct']);
</script>
<template>
<Component :is="select(value, direct)" :value="value"></Component>
</template>
<Component :is="select(value, direct)" :value="value"></Component>
</template>
src/components/dynamic/NumberElement.vue
+3 -3
View File
@@ -1,6 +1,6 @@
<script lang="ts" setup>
const props = defineProps(["value"]);
const props = defineProps(['value']);
</script>
<template>
<span>{{ Number(props.value) }}</span>
</template>
<span>{{ Number(props.value) }}</span>
</template>
src/components/dynamic/ObjectElement.vue
+24 -18
View File
@@ -1,23 +1,29 @@
<script lang="ts" setup>
import DynamicComponent from './DynamicComponent.vue';
import {select} from './index'
const props = defineProps(["value"]);
import { select } from './index';
const props = defineProps(['value']);
</script>
<template>
<div class="overflow-x-auto">
<table class="table w-full text-sm">
<tbody>
<tr v-for="(v, k) of value">
<td class="text-capitalize" style="max-width: 200px;">{{ k }}</td>
<td>
<div class="overflow-hidden w-auto whitespace-normal" style="max-width: 1000px;">
<Component v-if="v" :is="select(v, 'horizontal')" :value="v"></Component>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</template>
<div class="overflow-x-auto">
<table class="table w-full text-sm">
<tbody>
<tr v-for="(v, k) of value">
<td class="text-capitalize" style="max-width: 200px">{{ k }}</td>
<td>
<div
class="overflow-hidden w-auto whitespace-normal"
style="max-width: 1000px"
>
<Component
v-if="v"
:is="select(v, 'horizontal')"
:value="v"
></Component>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</template>
src/components/dynamic/ObjectHorizontalElement.vue
+14 -12
View File
@@ -1,17 +1,19 @@
<script lang="ts" setup>
import DynamicComponent from './DynamicComponent.vue';
import {select} from './index'
import { select } from './index';
const props = defineProps(["value"]);
const tab = ref("")
const props = defineProps(['value']);
const tab = ref('');
</script>
<template>
<div>
<VTabs v-model="tab">
<VTab v-for="(v, k) of value" :value="k">{{ k }}</VTab>
</VTabs>
<VWindow v-model="tab" style="min-height: 25px;">
<VWindowItem v-for="(v, k) of value" :value="k"><DynamicComponent :value="v"/></VWindowItem>
</VWindow>
</div>
</template>
<div>
<VTabs v-model="tab">
<VTab v-for="(v, k) of value" :value="k">{{ k }}</VTab>
</VTabs>
<VWindow v-model="tab" style="min-height: 25px">
<VWindowItem v-for="(v, k) of value" :value="k"
><DynamicComponent :value="v"
/></VWindowItem>
</VWindow>
</div>
</template>
src/components/dynamic/TextElement.vue
+17 -10
View File
@@ -2,16 +2,23 @@
import { useFormatter } from '@/stores';
import MdEditor from 'md-editor-v3';
const props = defineProps(["value"]);
const format = useFormatter()
const props = defineProps(['value']);
const format = useFormatter();
function isMD() {
if(props.value && (props.value.indexOf("\n") > -1 || props.value.indexOf("\\n") > -1)){
return true
}
return false
if (
props.value &&
(props.value.indexOf('\n') > -1 || props.value.indexOf('\\n') > -1)
) {
return true;
}
return false;
}
</script>
<template>
<MdEditor v-if="isMD()" :model-value="format.multiLine(value)" previewOnly></MdEditor>
<span v-else>{{ value }}</span>
</template>
<template>
<MdEditor
v-if="isMD()"
:model-value="format.multiLine(value)"
previewOnly
></MdEditor>
<span v-else>{{ value }}</span>
</template>
src/components/dynamic/TxsElement.vue
+40 -24
View File
@@ -1,35 +1,51 @@
<script lang="ts" setup>
import { fromBase64, toBase64 } from '@cosmjs/encoding';
import { decodeTxRaw } from '@cosmjs/proto-signing'
import { decodeTxRaw } from '@cosmjs/proto-signing';
import { computed } from '@vue/reactivity';
import { hashTx } from '@/libs'
import { hashTx } from '@/libs';
import { useBlockchain, useFormatter } from '@/stores';
const props = defineProps({
value: { type: Array<string>},
value: { type: Array<string> },
});
const txs = computed(() => {
return props.value?.map(x => ({ hash: hashTx(fromBase64(x)) , tx: decodeTxRaw(fromBase64(x)) })) || []
})
const format = useFormatter()
const chain = useBlockchain()
return (
props.value?.map((x) => ({
hash: hashTx(fromBase64(x)),
tx: decodeTxRaw(fromBase64(x)),
})) || []
);
});
const format = useFormatter();
const chain = useBlockchain();
</script>
<template>
<VTable density="compact" v-if="txs.length > 0">
<thead>
<tr>
<th>Hash</th><th>Msgs</th><th>Memo</th>
</tr>
</thead>
<tbody>
<tr v-for="item in txs">
<td><RouterLink :to="`/${chain.chainName}/tx/${item.hash}`">{{ item.hash }}</RouterLink></td>
<td>{{ format.messages(item.tx.body.messages.map(x => ({"@type": x.typeUrl}))) }}</td>
<td>{{ item.tx.body.memo }}</td>
</tr>
</tbody>
</VTable>
<div v-else>[]</div>
</template>
<VTable density="compact" v-if="txs.length > 0">
<thead>
<tr>
<th>Hash</th>
<th>Msgs</th>
<th>Memo</th>
</tr>
</thead>
<tbody>
<tr v-for="item in txs">
<td>
<RouterLink :to="`/${chain.chainName}/tx/${item.hash}`">{{
item.hash
}}</RouterLink>
</td>
<td>
{{
format.messages(
item.tx.body.messages.map((x) => ({ '@type': x.typeUrl }))
)
}}
</td>
<td>{{ item.tx.body.memo }}</td>
</tr>
</tbody>
</VTable>
<div v-else>[]</div>
</template>
src/components/dynamic/UInt8Array.vue
+10 -8
View File
@@ -2,15 +2,17 @@
import { toBase64, toHex } from '@cosmjs/encoding';
import { computed } from '@vue/reactivity';
const props = defineProps(["value"]);
const format = ref('base64')
const text = computed(()=> {
return format.value === 'hex'? toHex(props.value) : toBase64(props.value)
})
const props = defineProps(['value']);
const format = ref('base64');
const text = computed(() => {
return format.value === 'hex' ? toHex(props.value) : toBase64(props.value);
});
function change() {
format.value = format.value === 'hex'? 'base64': 'hex'
format.value = format.value === 'hex' ? 'base64' : 'hex';
}
</script>
<template>
<span>{{ text }} <VIcon size="12" icon="mdi-cached" @click="change()"/></span>
</template>
<span
>{{ text }} <VIcon size="12" icon="mdi-cached" @click="change()"
/></span>
</template>
src/components/dynamic/index.ts
+34 -34
View File
@@ -1,39 +1,39 @@
import ObjectElement from './ObjectElement.vue'
import TextElement from './TextElement.vue'
import ArrayElement from './ArrayElement.vue'
import UInt8Array from './UInt8Array.vue'
import NumberElement from './NumberElement.vue'
import TxsElement from './TxsElement.vue'
import ObjectHorizontalElement from './ObjectHorizontalElement.vue'
import Long from 'long'
import ObjectElement from './ObjectElement.vue';
import TextElement from './TextElement.vue';
import ArrayElement from './ArrayElement.vue';
import UInt8Array from './UInt8Array.vue';
import NumberElement from './NumberElement.vue';
import TxsElement from './TxsElement.vue';
import ObjectHorizontalElement from './ObjectHorizontalElement.vue';
import Long from 'long';
export function select(v: any, direct?: string) {
// if(k === 'txs' && v) {
// return TxsElement
// } else {
const type = typeof v
switch(type) {
case 'object':
return selectObject(v, direct)
case 'number':
return NumberElement
default:
return TextElement
}
// }
// if(k === 'txs' && v) {
// return TxsElement
// } else {
const type = typeof v;
switch (type) {
case 'object':
return selectObject(v, direct);
case 'number':
return NumberElement;
default:
return TextElement;
}
// }
}
function selectObject(v: Object, direct?: string) {
switch(true) {
case v instanceof Long:
return NumberElement
case v instanceof Uint8Array:
return UInt8Array
case Array.isArray(v):
return ArrayElement
case direct === 'horizontal':
return ObjectHorizontalElement
default:
return ObjectElement
}
}
switch (true) {
case v instanceof Long:
return NumberElement;
case v instanceof Uint8Array:
return UInt8Array;
case Array.isArray(v):
return ArrayElement;
case direct === 'horizontal':
return ObjectHorizontalElement;
default:
return ObjectElement;
}
}
src/components/icons/IconCommunity.vue
+6 -1
View File
@@ -1,5 +1,10 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
fill="currentColor"
>
<path
d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
/>
src/components/icons/IconDocumentation.vue
+6 -1
View File
@@ -1,5 +1,10 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="17"
fill="currentColor"
>
<path
d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
/>
src/components/icons/IconEcosystem.vue
+6 -1
View File
@@ -1,5 +1,10 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"
height="20"
fill="currentColor"
>
<path
d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
/>
src/components/icons/IconSupport.vue
+6 -1
View File
@@ -1,5 +1,10 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
fill="currentColor"
>
<path
d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
/>