|
|
|
@ -1,32 +1,27 @@ |
|
|
|
<template> |
|
|
|
<div class="row"> |
|
|
|
<div class="col-sm-4 col-md-2 p-2 border-r border-solid border-neutral-300"> |
|
|
|
<div style="height: 10px"></div> |
|
|
|
<q-tabs v-model="selectedTab" align="left" vertical dense no-caps outside-arrows mobile-arrows class=""> |
|
|
|
<q-tab v-for="iconSet in iconSets" :key="iconSet.name" :name="iconSet.name"> |
|
|
|
<span class="w-[180px] text-left"> |
|
|
|
{{ iconSet.label }} |
|
|
|
<q-tooltip anchor="top middle" self="bottom middle" :offset="[10, 10]">{{ iconSet.label }}</q-tooltip> |
|
|
|
</span></q-tab |
|
|
|
> |
|
|
|
</q-tabs> |
|
|
|
</div> |
|
|
|
<div class="col-sm-8 col-md-10"> |
|
|
|
<q-tab-panels v-model="selectedTab" animated swipeable vertical transition-prev="jump-up" transition-next="jump-up"> |
|
|
|
<q-tab-panel v-for="iconSet in iconSets" :key="iconSet.name" :name="iconSet.name"> |
|
|
|
<div class="row"> |
|
|
|
<div v-for="item in iconSet.icons" :key="item"> |
|
|
|
<div class="grid justify-items-center q-pa-sm"> |
|
|
|
<q-icon size="48px" :name="item" class="cursor-pointer" @click="iconItemClick(item)"> |
|
|
|
<q-tooltip anchor="top middle" self="bottom middle" :offset="[10, 10]">{{ item }}</q-tooltip> |
|
|
|
</q-icon> |
|
|
|
<div class="truncate text-center" style="width: 60px">{{ item.replace(iconSet.prefix, '') }}</div> |
|
|
|
</div> |
|
|
|
<div style="height: 100%"> |
|
|
|
<q-tabs v-model="selectedTab" align="right" no-caps outside-arrows mobile-arrows> |
|
|
|
<q-tab v-for="iconSet in iconSets" :key="iconSet.name" :name="iconSet.name"> |
|
|
|
<span class="w-[180px] text-left"> |
|
|
|
{{ iconSet.label }} |
|
|
|
<q-tooltip anchor="top middle" self="bottom middle" :offset="[10, 10]">{{ iconSet.label }}</q-tooltip> |
|
|
|
</span> |
|
|
|
</q-tab> |
|
|
|
</q-tabs> |
|
|
|
<q-tab-panels v-model="selectedTab" keep-alive vertical style="height: calc(100% - 48px)"> |
|
|
|
<q-tab-panel v-for="iconSet in iconSets" :key="iconSet.name" :name="iconSet.name" style="height: 100%"> |
|
|
|
<div class="row"> |
|
|
|
<div v-for="item in iconSet.icons" :key="item"> |
|
|
|
<div class="grid justify-items-center py-2"> |
|
|
|
<q-icon size="48px" :name="item" class="cursor-pointer" @click="iconItemClick(item)"> |
|
|
|
<q-tooltip anchor="top middle" self="bottom middle" :offset="[10, 10]">{{ item }}</q-tooltip> |
|
|
|
</q-icon> |
|
|
|
<div class="truncate text-center" style="width: 72px">{{ item.replace(iconSet.prefix, '') }}</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</q-tab-panel> |
|
|
|
</q-tab-panels> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</q-tab-panel> |
|
|
|
</q-tab-panels> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
@ -35,31 +30,13 @@ import { ref } from 'vue'; |
|
|
|
import { Notify } from 'quasar'; |
|
|
|
import bootstrap from './icons/bootstrap.json'; |
|
|
|
import materialIcons from './icons/material-icons.json'; |
|
|
|
import materialIconsOutlined from './icons/material-icons-outlined.json'; |
|
|
|
import materialIconsRound from './icons/material-icons-rounded.json'; |
|
|
|
import materialIconsSharp from './icons/material-icons-sharp.json'; |
|
|
|
import materialSymbolsOutlined from './icons/material-symbols-outlined.json'; |
|
|
|
import materialSymbolsRounded from './icons/material-symbols-rounded.json'; |
|
|
|
import materialSymbolsSharp from './icons/material-symbols-sharp.json'; |
|
|
|
import eva from './icons/eva-icons.json'; |
|
|
|
import fontawesomeBrands from './icons/fontawesome-v6-icons-brands.json'; |
|
|
|
import fontawesomeRegular from './icons/fontawesome-v6-icons-regular.json'; |
|
|
|
import fontawesomeSolid from './icons/fontawesome-v6-icons-solid.json'; |
|
|
|
//import materialSymbolsOutlined from './icons/material-symbols-outlined.json'; |
|
|
|
|
|
|
|
const selectedTab = ref('bootstrap'); |
|
|
|
const iconSets = [ |
|
|
|
{ name: 'bootstrap', label: 'Bootstrap', prefix: 'bi-', icons: bootstrap }, |
|
|
|
{ name: 'materialIcons', label: 'Material', prefix: '', icons: materialIcons }, |
|
|
|
//{ name: 'materialIconsOutlined', label: 'Material (outlined)', prefix: 'o_', icons: materialIconsOutlined }, |
|
|
|
//{ name: 'materialIconsRound', label: 'Material (round)', prefix: 'r_', icons: materialIconsRound }, |
|
|
|
//{ name: 'materialIconsSharp', label: 'Material (sharp)', prefix: 's_', icons: materialIconsSharp }, |
|
|
|
{ name: 'materialSymbolsOutlined', label: 'Material Symbols (outlined)', prefix: 'sym_o_', icons: materialSymbolsOutlined }, |
|
|
|
//{ name: 'materialSymbolsRounded', label: 'Material Symbols (round)', prefix: 'sym_r_', icons: materialSymbolsRounded }, |
|
|
|
//{ name: 'materialSymbolsSharp', label: 'Material Symbols (sharp)', prefix: 'sym_s_', icons: materialSymbolsSharp }, |
|
|
|
{ name: 'eva', label: 'Eva', prefix: 'eva-', icons: eva }, |
|
|
|
{ name: 'fontawesomeBrands', label: 'fontawesome (brands)', prefix: 'fa-brands fa-', icons: fontawesomeBrands }, |
|
|
|
{ name: 'fontawesomeRegular', label: 'fontawesome (regular)', prefix: 'fa-regular fa-', icons: fontawesomeRegular }, |
|
|
|
{ name: 'fontawesomeSolid', label: 'fontawesome (solid)', prefix: 'fa-solid fa-', icons: fontawesomeSolid }, |
|
|
|
//{ name: 'materialSymbolsOutlined', label: 'Material Symbols (outlined)', prefix: 'sym_o_', icons: materialSymbolsOutlined }, |
|
|
|
]; |
|
|
|
|
|
|
|
const iconItemClick = (icon: string) => { |
|
|
|
|
