mirror of
https://github.com/bunkerity/bunkerweb
synced 2026-05-24 09:28:37 +00:00
start auto style
This commit is contained in:
Jordan Blasenhauer
parent
0fad112ec2
commit
1552885e03
55 changed files with 814 additions and 1966 deletions
|
|
@ -161,11 +161,6 @@ body {
|
|||
}
|
||||
|
||||
/* INPUT */
|
||||
|
||||
.field-container {
|
||||
@apply relative w-full;
|
||||
}
|
||||
|
||||
.input-header-container {
|
||||
@apply z-20;
|
||||
}
|
||||
|
|
@ -530,11 +525,11 @@ body {
|
|||
/* POPOVER */
|
||||
|
||||
.popover-btn {
|
||||
@apply outline-offset-1 cursor-pointer flex justify-start;
|
||||
@apply outline-offset-1 cursor-pointer;
|
||||
}
|
||||
|
||||
.popover-container {
|
||||
@apply pointer-events-none fixed max-w-[80vw] sm:max-w-[200px] opacity-100 justify-center items-center dark:brightness-90 transition rounded-md p-3;
|
||||
@apply pointer-events-none fixed max-w-[80vw] sm:max-w-[200px] justify-center items-center dark:brightness-90 transition rounded-md p-3;
|
||||
}
|
||||
|
||||
.open.popover-container {
|
||||
|
|
@ -549,14 +544,41 @@ body {
|
|||
@apply whitespace-normal pointer-events-none text-center transition duration-300 ease-in-out font-semibold text-sm text-white dark:text-white m-0;
|
||||
}
|
||||
|
||||
.popover-svg {
|
||||
@apply pointer-events-none z-0 hover:brightness-95 fill-blue-500;
|
||||
.icon-container {
|
||||
@apply block w-full h-full;
|
||||
}
|
||||
|
||||
.icon-svg {
|
||||
@apply block;
|
||||
.stick.icon-container {
|
||||
@apply absolute top-0 right-0 min-w-12 dark:brightness-90 flex justify-center items-center w-12 h-12 text-center rounded-circle;
|
||||
}
|
||||
|
||||
.icon-social {
|
||||
@apply hover:opacity-80;
|
||||
}
|
||||
|
||||
.icon-header-field {
|
||||
@apply ml-1 pointer-events-none z-0 hover:brightness-95 fill-blue-500 h-5 w-5;
|
||||
}
|
||||
|
||||
.icon-stat {
|
||||
@apply block w-10 h-10;
|
||||
}
|
||||
|
||||
.icon-base {
|
||||
@apply block w-8 h-8
|
||||
}
|
||||
|
||||
.icon-menu {
|
||||
@apply h-6 w-6 relative;
|
||||
}
|
||||
|
||||
.icon-table {
|
||||
@apply h-6 w-6 relative;
|
||||
}
|
||||
|
||||
.icon-list-details {
|
||||
@apply mx-1 h-7 w-7 relative;
|
||||
}
|
||||
|
||||
/* TABS */
|
||||
|
||||
|
|
@ -635,9 +657,7 @@ body {
|
|||
}
|
||||
/* MENU */
|
||||
|
||||
.menu-svg {
|
||||
@apply h-6 w-6 relative;
|
||||
}
|
||||
|
||||
|
||||
.menu-account-title-container {
|
||||
@apply mt-2 w-full px-1;
|
||||
|
|
@ -803,9 +823,6 @@ body {
|
|||
@apply dark:text-gray-200 transition inline-block pl-3 mb-0 ml-0 font-normal cursor-pointer select-none text-sm text-slate-700;
|
||||
}
|
||||
|
||||
.social-svg {
|
||||
@apply hover:opacity-80;
|
||||
}
|
||||
|
||||
.menu-social-list {
|
||||
@apply mb-3 flex justify-center align-middle w-full;
|
||||
|
|
@ -1028,9 +1045,18 @@ body {
|
|||
|
||||
}
|
||||
|
||||
.text-table {
|
||||
@apply col-span-12 mb-0 break-word;
|
||||
|
||||
}
|
||||
|
||||
.text-stat {
|
||||
@apply col-span-12 my-1 font-bold dark:text-white/90 text-black uppercase break-word;
|
||||
}
|
||||
|
||||
.text-list-details {
|
||||
@apply w-full col-span-12 mb-0 break-word;
|
||||
}
|
||||
/* LIST COMPONENT */
|
||||
|
||||
.list-pairs-container {
|
||||
|
|
@ -1070,7 +1096,7 @@ body {
|
|||
}
|
||||
|
||||
.list-details-flex {
|
||||
@apply justify-between items-center;
|
||||
@apply justify-end items-center;
|
||||
}
|
||||
|
||||
/* TITLE */
|
||||
|
|
@ -1131,8 +1157,6 @@ body {
|
|||
|
||||
/* SUBTITLE */
|
||||
|
||||
|
||||
|
||||
.subtitle-card {
|
||||
@apply capitalize-first break-word dark:text-gray-300 col-span-12 break-words w-full max-w-[80%] sm:max-w-[800px] leading-normal text-[1.1rem] mb-0 lowercase;
|
||||
}
|
||||
|
|
@ -1163,16 +1187,6 @@ body {
|
|||
@apply mr-12;
|
||||
}
|
||||
|
||||
.stat-svg {
|
||||
@apply leading-none text-lg relative w-6 h-6;
|
||||
}
|
||||
|
||||
.stat-svg-container {
|
||||
@apply absolute top-0 right-0 min-w-12 dark:brightness-90 flex justify-center items-center w-12 h-12 text-center rounded-circle;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* FORM */
|
||||
|
||||
.form-advanced-container {
|
||||
|
|
@ -1519,11 +1533,11 @@ body {
|
|||
}
|
||||
|
||||
.table-content-item {
|
||||
@apply appearance-none text-sm col-span-12 block border-b hover:bg-gray-100 dark:hover:bg-slate-700 items-center grid grid-cols-12 border-gray-300 py-2.5;
|
||||
@apply appearance-none text-sm col-span-12 block border-b hover:bg-gray-100 dark:hover:bg-slate-700 items-center grid grid-cols-12 border-gray-300 min-h-[65px];
|
||||
}
|
||||
|
||||
.table-content-item-wrap {
|
||||
@apply appearance-none py-2.5 pl-1;
|
||||
@apply appearance-none pl-1;
|
||||
}
|
||||
|
||||
/** MISC **/
|
||||
|
|
@ -1630,34 +1644,6 @@ body {
|
|||
@apply text-white mt-2 mb-0 text-sm;
|
||||
}
|
||||
|
||||
/* SIZE MODIFIER */
|
||||
|
||||
.lg.popover-svg,
|
||||
.lg.icon-svg {
|
||||
@apply h-8 w-8;
|
||||
}
|
||||
|
||||
.base.popover-svg,
|
||||
.base.icon-svg {
|
||||
@apply h-7 w-7;
|
||||
}
|
||||
|
||||
.md.popover-svg,
|
||||
.md.icon-svg {
|
||||
@apply h-6 w-6;
|
||||
}
|
||||
|
||||
.sm.popover-svg,
|
||||
.sm.icon-svg {
|
||||
@apply h-5 w-5;
|
||||
}
|
||||
|
||||
.sm.popover-svg,
|
||||
.sm.icon-svg {
|
||||
@apply h-5 w-5;
|
||||
}
|
||||
|
||||
|
||||
/* TEXT COLOR MODIFIER */
|
||||
|
||||
.success.subtitle-stat,
|
||||
|
|
@ -1986,594 +1972,324 @@ body {
|
|||
|
||||
/* BACKGROUND COLOR MODIFIER */
|
||||
|
||||
.success.status-icon,
|
||||
.success.stat-svg-container,
|
||||
.success.feedback-alert-wrap,
|
||||
.success.popover-container {
|
||||
.bg-el {
|
||||
@apply bg-current;
|
||||
|
||||
}
|
||||
|
||||
.success.bg-el {
|
||||
@apply bg-green-500;
|
||||
}
|
||||
|
||||
.error.status-icon,
|
||||
.error.stat-svg-container,
|
||||
.error.feedback-alert-wrap,
|
||||
.error.popover-container {
|
||||
.error.bg-el{
|
||||
@apply bg-red-500;
|
||||
}
|
||||
|
||||
.warning.status-icon,
|
||||
.warning.stat-svg-container,
|
||||
.warning.feedback-alert-wrap,
|
||||
.warning.popover-container {
|
||||
.warning.bg-el {
|
||||
@apply bg-yellow-500;
|
||||
}
|
||||
|
||||
.info.status-icon,
|
||||
.info.stat-svg-container,
|
||||
.info.feedback-alert-wrap,
|
||||
.info.popover-container {
|
||||
.info.bg-el{
|
||||
@apply bg-sky-500;
|
||||
}
|
||||
|
||||
.purple.stat-svg-container,
|
||||
.purple.feedback-alert-wrap,
|
||||
.purple.popover-container {
|
||||
.purple.bg-el {
|
||||
@apply bg-purple-500;
|
||||
}
|
||||
|
||||
.green.stat-svg-container,
|
||||
.green.feedback-alert-wrap,
|
||||
.green.popover-container {
|
||||
.green.bg-el {
|
||||
@apply bg-green-500;
|
||||
}
|
||||
|
||||
.red.stat-svg-container,
|
||||
.red.feedback-alert-wrap,
|
||||
.red.popover-container {
|
||||
.red.bg-el {
|
||||
@apply bg-red-500;
|
||||
}
|
||||
|
||||
.orange.stat-svg-container,
|
||||
.orange.feedback-alert-wrap,
|
||||
.orange.popover-container {
|
||||
.orange.bg-el {
|
||||
@apply bg-orange-500;
|
||||
}
|
||||
|
||||
.blue.stat-svg-container,
|
||||
.blue.feedback-alert-wrap,
|
||||
.blue.popover-container {
|
||||
.blue.bg-el {
|
||||
@apply bg-blue-500;
|
||||
}
|
||||
|
||||
.yellow.stat-svg-container,
|
||||
.yellow.feedback-alert-wrap,
|
||||
.yellow.popover-container {
|
||||
.yellow.bg-el {
|
||||
@apply bg-yellow-500;
|
||||
}
|
||||
|
||||
.gray.stat-svg-container,
|
||||
.gray.feedback-alert-wrap,
|
||||
.gray.popover-container {
|
||||
.gray.bg-el {
|
||||
@apply bg-gray-500;
|
||||
}
|
||||
|
||||
.dark.stat-svg-container,
|
||||
.dark.feedback-alert-wrap,
|
||||
.dark.popover-container {
|
||||
.dark.bg-el {
|
||||
@apply bg-slate-500;
|
||||
}
|
||||
|
||||
.amber.stat-svg-container,
|
||||
.amber.feedback-alert-wrap,
|
||||
.amber.popover-container {
|
||||
.amber.bg-el {
|
||||
@apply bg-amber-500;
|
||||
}
|
||||
|
||||
.emerald.stat-svg-container,
|
||||
.emerald.feedback-alert-wrap,
|
||||
.emerald.popover-container {
|
||||
.emerald.bg-el {
|
||||
@apply bg-emerald-500;
|
||||
}
|
||||
|
||||
.teal.stat-svg-container,
|
||||
.teal.feedback-alert-wrap,
|
||||
.teal.popover-container {
|
||||
.teal.bg-el {
|
||||
@apply bg-teal-500;
|
||||
}
|
||||
|
||||
.indigo.stat-svg-container,
|
||||
.indigo.feedback-alert-wrap,
|
||||
.indigo.popover-container {
|
||||
.indigo.bg-el {
|
||||
@apply bg-indigo-500;
|
||||
}
|
||||
|
||||
.cyan.stat-svg-container,
|
||||
.cyan.feedback-alert-wrap,
|
||||
.cyan.popover-container {
|
||||
.cyan.bg-el {
|
||||
@apply bg-cyan-500;
|
||||
}
|
||||
|
||||
.sky.stat-svg-container,
|
||||
.sky.feedback-alert-wrap,
|
||||
.sky.popover-container {
|
||||
.sky.bg-el {
|
||||
@apply bg-sky-500;
|
||||
}
|
||||
|
||||
.pink.stat-svg-container,
|
||||
.pink.feedback-alert-wrap,
|
||||
.pink.popover-container {
|
||||
.pink.bg-el {
|
||||
@apply bg-pink-500;
|
||||
}
|
||||
|
||||
.lime.stat-svg-container,
|
||||
.lime.feedback-alert-wrap,
|
||||
.lime.popover-container {
|
||||
.lime.bg-el{
|
||||
@apply bg-lime-500;
|
||||
}
|
||||
|
||||
.purple-darker.stat-svg-container,
|
||||
.purle-darker.feedback-alert-wrap,
|
||||
.purple-darker.popover-container {
|
||||
.purple-darker.bg-el {
|
||||
@apply bg-purple-600;
|
||||
}
|
||||
|
||||
.green-darker.stat-svg-container,
|
||||
.green-darker.feedback-alert-wrap,
|
||||
.green-darker.popover-container {
|
||||
.green-darker.bg-el {
|
||||
@apply bg-green-700;
|
||||
}
|
||||
|
||||
.red-darker.stat-svg-container,
|
||||
.red-darker.feedback-alert-wrap,
|
||||
.red-darker.popover-container {
|
||||
.red-darker.bg-el {
|
||||
@apply bg-red-700;
|
||||
}
|
||||
|
||||
.orange-darker.stat-svg-container,
|
||||
.orange-darker.feedback-alert-wrap,
|
||||
.orange-darker.popover-container {
|
||||
.orange-darker.bg-el {
|
||||
@apply bg-orange-600;
|
||||
}
|
||||
|
||||
.blue-darker.stat-svg-container,
|
||||
.blue-darker.feedback-alert-wrap,
|
||||
.blue-darker.popover-container {
|
||||
.blue-darker.bg-el {
|
||||
@apply bg-blue-600;
|
||||
}
|
||||
|
||||
.yellow-darker.stat-svg-container,
|
||||
.yellow-darker.feedback-alert-wrap,
|
||||
.yellow-darker.popover-container {
|
||||
.yellow-darker.bg-el {
|
||||
@apply bg-yellow-600;
|
||||
}
|
||||
|
||||
.gray-darker.stat-svg-container,
|
||||
.gray-darker.feedback-alert-wrap,
|
||||
.gray-darker.popover-container {
|
||||
.gray-darker.bg-el{
|
||||
@apply bg-gray-600;
|
||||
}
|
||||
|
||||
.dark-darker.stat-svg-container,
|
||||
.dark-darker.feedback-alert-wrap,
|
||||
.dark-darker.popover-container {
|
||||
.dark-darker.bg-el {
|
||||
@apply bg-slate-600;
|
||||
}
|
||||
|
||||
.amber-darker.stat-svg-container,
|
||||
.amber-darker.feedback-alert-wrap,
|
||||
.amber-darker.popover-container {
|
||||
.amber-darker.bg-el {
|
||||
@apply bg-amber-600;
|
||||
}
|
||||
|
||||
.emerald-darker.stat-svg-container,
|
||||
.emerald-darker.feedback-alert-wrap,
|
||||
.emerald-darker.popover-container {
|
||||
.emerald-darker.bg-el {
|
||||
@apply bg-emerald-600;
|
||||
}
|
||||
|
||||
.teal-darker.stat-svg-container,
|
||||
.teal-darker.feedback-alert-wrap,
|
||||
.teal-darker.popover-container {
|
||||
.teal-darker.bg-el {
|
||||
@apply bg-teal-600;
|
||||
}
|
||||
|
||||
.indigo-darker.stat-svg-container,
|
||||
.indigo-darker.feedback-alert-wrap,
|
||||
.indigo-darker.popover-container {
|
||||
.indigo-darker.bg-el {
|
||||
@apply bg-indigo-600;
|
||||
}
|
||||
|
||||
.cyan-darker.stat-svg-container,
|
||||
.cyan-darker.feedback-alert-wrap,
|
||||
.cyan-darker.popover-container {
|
||||
.cyan-darker.bg-el {
|
||||
@apply bg-cyan-600;
|
||||
}
|
||||
|
||||
.sky-darker.stat-svg-container,
|
||||
.sky-darker.feedback-alert-wrap,
|
||||
.sky-darker.popover-container {
|
||||
.sky-darker.bg-el {
|
||||
@apply bg-sky-700;
|
||||
}
|
||||
|
||||
.pink-darker.stat-svg-container,
|
||||
.pink-darker.feedback-alert-wrap,
|
||||
.pink-darker.popover-container {
|
||||
.pink-darker.bg-el {
|
||||
@apply bg-pink-600;
|
||||
}
|
||||
|
||||
.lime-darker.stat-svg-container,
|
||||
.lime-darker.feedback-alert-wrap,
|
||||
.lime-darker.popover-container {
|
||||
.lime-darker.bg-el {
|
||||
@apply bg-lime-600;
|
||||
}
|
||||
|
||||
/* SVG COLOR MODIFIER */
|
||||
|
||||
.success.icon-svg,
|
||||
.success.btn-svg,
|
||||
.success.menu-svg,
|
||||
.success.social-svg,
|
||||
.success.stat-svg,
|
||||
.success.popover-svg {
|
||||
.fill {
|
||||
@apply fill-current;
|
||||
}
|
||||
|
||||
.success.fill {
|
||||
@apply fill-green-500;
|
||||
}
|
||||
|
||||
.error.icon-svg,
|
||||
.error.btn-svg,
|
||||
.error.menu-svg,
|
||||
.error.social-svg,
|
||||
.error.stat-svg,
|
||||
.error.popover-svg {
|
||||
.error.fill{
|
||||
@apply fill-red-500;
|
||||
}
|
||||
|
||||
.warning.icon-svg,
|
||||
.warning.btn-svg,
|
||||
.warning.menu-svg,
|
||||
.warning.social-svg,
|
||||
.warning.stat-svg,
|
||||
.warning.popover-svg {
|
||||
.warning.fill {
|
||||
@apply fill-yellow-500;
|
||||
}
|
||||
|
||||
.info.icon-svg,
|
||||
.info.btn-svg,
|
||||
.info.menu-svg,
|
||||
.info.social-svg,
|
||||
.info.stat-svg,
|
||||
.info.popover-svg {
|
||||
.info.fill {
|
||||
@apply fill-sky-500;
|
||||
}
|
||||
|
||||
.white.icon-svg,
|
||||
.white.btn-svg,
|
||||
.white.menu-svg,
|
||||
.white.social-svg,
|
||||
.white.stat-svg,
|
||||
.white.popover-svg {
|
||||
.white.fill {
|
||||
@apply fill-white;
|
||||
}
|
||||
|
||||
.purple.icon-svg,
|
||||
.purple.btn-svg,
|
||||
.purple.menu-svg,
|
||||
.purple.social-svg,
|
||||
.purple.stat-svg,
|
||||
.purple.popover-svg {
|
||||
.purple.fill {
|
||||
@apply fill-purple-500;
|
||||
}
|
||||
|
||||
.green.icon-svg,
|
||||
.green.btn-svg,
|
||||
.green.menu-svg,
|
||||
.green.social-svg,
|
||||
.green.stat-svg,
|
||||
.green.popover-svg {
|
||||
.green.fill {
|
||||
@apply fill-green-500;
|
||||
}
|
||||
|
||||
.red.icon-svg,
|
||||
.red.btn-svg,
|
||||
.red.menu-svg,
|
||||
.red.social-svg,
|
||||
.red.stat-svg,
|
||||
.red.popover-svg {
|
||||
.red.fill{
|
||||
@apply fill-red-500;
|
||||
}
|
||||
|
||||
.orange.icon-svg,
|
||||
.orange.btn-svg,
|
||||
.orange.menu-svg,
|
||||
.orange.social-svg,
|
||||
.orange.stat-svg,
|
||||
.orange.popover-svg {
|
||||
.orange.fill {
|
||||
@apply fill-orange-500;
|
||||
}
|
||||
|
||||
.blue.icon-svg,
|
||||
.blue.btn-svg,
|
||||
.blue.menu-svg,
|
||||
.blue.social-svg,
|
||||
.blue.stat-svg,
|
||||
.blue.popover-svg {
|
||||
.blue.fill {
|
||||
@apply fill-blue-500;
|
||||
}
|
||||
|
||||
.yellow.icon-svg,
|
||||
.yellow.btn-svg,
|
||||
.yellow.menu-svg,
|
||||
.yellow.social-svg,
|
||||
.yellow.stat-svg,
|
||||
.yellow.popover-svg {
|
||||
.yellow.fill {
|
||||
@apply fill-yellow-500;
|
||||
}
|
||||
|
||||
.gray.icon-svg,
|
||||
.gray.btn-svg,
|
||||
.gray.menu-svg,
|
||||
.gray.social-svg,
|
||||
.gray.stat-svg,
|
||||
.gray.popover-svg {
|
||||
.gray.fill {
|
||||
@apply fill-gray-500;
|
||||
}
|
||||
|
||||
.dark.icon-svg,
|
||||
.dark.btn-svg,
|
||||
.dark.menu-svg,
|
||||
.dark.social-svg,
|
||||
.dark.stat-svg,
|
||||
.dark.popover-svg {
|
||||
.dark.fill {
|
||||
@apply fill-slate-500;
|
||||
}
|
||||
|
||||
.amber.icon-svg,
|
||||
.amber.btn-svg,
|
||||
.amber.menu-svg,
|
||||
.amber.social-svg,
|
||||
.amber.stat-svg,
|
||||
.amber.popover-svg {
|
||||
.amber.fill {
|
||||
@apply fill-amber-500;
|
||||
}
|
||||
|
||||
.emerald.icon-svg,
|
||||
.emerald.btn-svg,
|
||||
.emerald.menu-svg,
|
||||
.emerald.social-svg,
|
||||
.emerald.stat-svg,
|
||||
.emerald.popover-svg {
|
||||
.emerald.fill {
|
||||
@apply fill-emerald-500;
|
||||
}
|
||||
|
||||
.teal.icon-svg,
|
||||
.teal.btn-svg,
|
||||
.teal.menu-svg,
|
||||
.teal.social-svg,
|
||||
.teal.stat-svg,
|
||||
.teal.popover-svg {
|
||||
.teal.fill {
|
||||
@apply fill-teal-500;
|
||||
}
|
||||
|
||||
.indigo.icon-svg,
|
||||
.indigo.btn-svg,
|
||||
.indigo.menu-svg,
|
||||
.indigo.social-svg,
|
||||
.indigo.stat-svg,
|
||||
.indigo.popover-svg {
|
||||
.indigo.fill {
|
||||
@apply fill-indigo-500;
|
||||
}
|
||||
|
||||
.cyan.icon-svg,
|
||||
.cyan.btn-svg,
|
||||
.cyan.menu-svg,
|
||||
.cyan.social-svg,
|
||||
.cyan.stat-svg,
|
||||
.cyan.popover-svg {
|
||||
.cyan.fill {
|
||||
@apply fill-cyan-500;
|
||||
}
|
||||
|
||||
.sky.icon-svg,
|
||||
.sky.btn-svg,
|
||||
.sky.menu-svg,
|
||||
.sky.social-svg,
|
||||
.sky.stat-svg,
|
||||
.sky.popover-svg {
|
||||
.sky.fill {
|
||||
@apply fill-sky-500;
|
||||
}
|
||||
|
||||
.pink.icon-svg,
|
||||
.pink.btn-svg,
|
||||
.pink.menu-svg,
|
||||
.pink.social-svg,
|
||||
.pink.stat-svg,
|
||||
.pink.popover-svg {
|
||||
.pink.fill {
|
||||
@apply fill-pink-500;
|
||||
}
|
||||
|
||||
.lime.icon-svg,
|
||||
.lime.btn-svg,
|
||||
.lime.menu-svg,
|
||||
.lime.social-svg,
|
||||
.lime.stat-svg,
|
||||
.lime.popover-svg {
|
||||
.lime.fill {
|
||||
@apply fill-lime-500;
|
||||
}
|
||||
|
||||
.twitter.icon-svg,
|
||||
.twitter.btn-svg,
|
||||
.twitter.menu-svg,
|
||||
.twitter.social-svg,
|
||||
.twitter.stat-svg,
|
||||
.twitter.popover-svg {
|
||||
.twitter.fill {
|
||||
@apply fill-[#1DA1F2];
|
||||
}
|
||||
|
||||
.linkedin.icon-svg,
|
||||
.linkedin.btn-svg,
|
||||
.linkedin.menu-svg,
|
||||
.linkedin.social-svg,
|
||||
.linkedin.stat-svg,
|
||||
.linkedin.popover-svg {
|
||||
.linkedin.fill {
|
||||
@apply fill-[#0A63BC];
|
||||
}
|
||||
|
||||
.discord.icon-svg,
|
||||
.discord.btn-svg,
|
||||
.discord.menu-svg,
|
||||
.discord.social-svg,
|
||||
.discord.stat-svg,
|
||||
.discord.popover-svg {
|
||||
.discord.fill {
|
||||
@apply fill-[#5562EA];
|
||||
}
|
||||
|
||||
.github.icon-svg,
|
||||
.github.btn-svg,
|
||||
.github.menu-svg,
|
||||
.github.social-svg,
|
||||
.github.stat-svg,
|
||||
.github.popover-svg {
|
||||
.github.fill {
|
||||
@apply fill-[#171A1F] dark:fill-gray-300;
|
||||
}
|
||||
|
||||
.purple-darker.icon-svg,
|
||||
.purle-darker.btn-svg,
|
||||
.purple-darker.menu-svg,
|
||||
.purple-darker.social-svg,
|
||||
.purple-darker.stat-svg,
|
||||
.purple-darker.popover-svg {
|
||||
.purple-darker.fill {
|
||||
@apply fill-purple-600;
|
||||
}
|
||||
|
||||
.green-darker.icon-svg,
|
||||
.green-darker.btn-svg,
|
||||
.green-darker.menu-svg,
|
||||
.green-darker.social-svg,
|
||||
.green-darker.stat-svg,
|
||||
.green-darker.popover-svg {
|
||||
.green-darker.fill {
|
||||
@apply fill-green-700;
|
||||
}
|
||||
|
||||
.red-darker.icon-svg,
|
||||
.red-darker.btn-svg,
|
||||
.red-darker.menu-svg,
|
||||
.red-darker.social-svg,
|
||||
.red-darker.stat-svg,
|
||||
.red-darker.popover-svg {
|
||||
.red-darker.fill {
|
||||
@apply fill-red-700;
|
||||
}
|
||||
|
||||
.orange-darker.icon-svg,
|
||||
.orange-darker.btn-svg,
|
||||
.orange-darker.menu-svg,
|
||||
.orange-darker.social-svg,
|
||||
.orange-darker.stat-svg,
|
||||
.orange-darker.popover-svg {
|
||||
.orange-darker.fill {
|
||||
@apply fill-orange-600;
|
||||
}
|
||||
|
||||
.blue-darker.icon-svg,
|
||||
.blue-darker.btn-svg,
|
||||
.blue-darker.menu-svg,
|
||||
.blue-darker.social-svg,
|
||||
.blue-darker.stat-svg,
|
||||
.blue-darker.popover-svg {
|
||||
.blue-darker.fill{
|
||||
@apply fill-blue-600;
|
||||
}
|
||||
|
||||
.yellow-darker.icon-svg,
|
||||
.yellow-darker.btn-svg,
|
||||
.yellow-darker.menu-svg,
|
||||
.yellow-darker.social-svg,
|
||||
.yellow-darker.stat-svg,
|
||||
.yellow-darker.popover-svg {
|
||||
.yellow-darker.fill-default {
|
||||
@apply fill-yellow-600;
|
||||
}
|
||||
|
||||
.gray-darker.icon-svg,
|
||||
.gray-darker.btn-svg,
|
||||
.gray-darker.menu-svg,
|
||||
.gray-darker.social-svg,
|
||||
.gray-darker.stat-svg,
|
||||
.gray-darker.popover-svg {
|
||||
.gray-darker.fill {
|
||||
@apply fill-gray-600;
|
||||
}
|
||||
|
||||
.dark-darker.icon-svg,
|
||||
.dark-darker.btn-svg,
|
||||
.dark-darker.menu-svg,
|
||||
.dark-darker.social-svg,
|
||||
.dark-darker.stat-svg,
|
||||
.dark-darker.popover-svg {
|
||||
.dark-darker.fill
|
||||
{
|
||||
@apply fill-slate-600;
|
||||
}
|
||||
|
||||
.amber-darker.icon-svg,
|
||||
.amber-darker.btn-svg,
|
||||
.amber-darker.menu-svg,
|
||||
.amber-darker.social-svg,
|
||||
.amber-darker.stat-svg,
|
||||
.amber-darker.popover-svg {
|
||||
.amber-darker.fill {
|
||||
@apply fill-amber-600;
|
||||
}
|
||||
|
||||
.emerald-darker.icon-svg,
|
||||
.emerald-darker.btn-svg,
|
||||
.emerald-darker.menu-svg,
|
||||
.emerald-darker.social-svg,
|
||||
.emerald-darker.stat-svg,
|
||||
.emerald-darker.popover-svg {
|
||||
.emerald-darker.fill
|
||||
{
|
||||
@apply fill-emerald-600;
|
||||
}
|
||||
|
||||
.teal-darker.icon-svg,
|
||||
.teal-darker.btn-svg,
|
||||
.teal-darker.menu-svg,
|
||||
.teal-darker.social-svg,
|
||||
.teal-darker.stat-svg,
|
||||
.teal-darker.popover-svg {
|
||||
.teal-darker.fill {
|
||||
@apply fill-teal-600;
|
||||
}
|
||||
|
||||
.indigo-darker.icon-svg,
|
||||
.indigo-darker.btn-svg,
|
||||
.indigo-darker.menu-svg,
|
||||
.indigo-darker.social-svg,
|
||||
.indigo-darker.stat-svg,
|
||||
.indigo-darker.popover-svg {
|
||||
.indigo-darker.fill {
|
||||
@apply fill-indigo-600;
|
||||
}
|
||||
|
||||
.cyan-darker.icon-svg,
|
||||
.cyan-darker.btn-svg,
|
||||
.cyan-darker.menu-svg,
|
||||
.cyan-darker.social-svg,
|
||||
.cyan-darker.stat-svg,
|
||||
.cyan-darker.popover-svg {
|
||||
.cyan-darker.fill {
|
||||
@apply fill-cyan-600;
|
||||
}
|
||||
|
||||
.sky-darker.icon-svg,
|
||||
.sky-darker.btn-svg,
|
||||
.sky-darker.menu-svg,
|
||||
.sky-darker.social-svg,
|
||||
.sky-darker.stat-svg,
|
||||
.sky-darker.popover-svg {
|
||||
.sky-darker.fill {
|
||||
@apply fill-sky-700;
|
||||
}
|
||||
|
||||
.pink-darker.icon-svg,
|
||||
.pink-darker.btn-svg,
|
||||
.pink-darker.menu-svg,
|
||||
.pink-darker.social-svg,
|
||||
.pink-darker.stat-svg,
|
||||
.pink-darker.popover-svg {
|
||||
.pink-darker.fill {
|
||||
@apply fill-pink-600;
|
||||
}
|
||||
|
||||
.lime-darker.icon-svg,
|
||||
.lime-darker.btn-svg,
|
||||
.lime-darker.menu-svg,
|
||||
.lime-darker.social-svg,
|
||||
.lime-darker.stat-svg,
|
||||
.lime-darker.popover-svg {
|
||||
.lime-darker.fill {
|
||||
@apply fill-lime-600;
|
||||
}
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -205,6 +205,7 @@ onBeforeMount(() => {
|
|||
|
||||
<!-- left sidebar -->
|
||||
<aside
|
||||
data-is="menu"
|
||||
id="sidebar-menu"
|
||||
data-sidebar-menu
|
||||
:aria-hidden="menu.isDesktop ? 'false' : menu.isActive ? 'false' : 'true'"
|
||||
|
|
@ -308,11 +309,7 @@ onBeforeMount(() => {
|
|||
"
|
||||
>
|
||||
<div class="menu-nav-item-container">
|
||||
<Icons
|
||||
:iconName="item.svg"
|
||||
:iconClass="'menu-svg'"
|
||||
:iconColor="item.svgColor"
|
||||
/>
|
||||
<Icons :iconName="item.svg" />
|
||||
</div>
|
||||
<span class="menu-nav-item-title">
|
||||
{{ $t(`dashboard_${item.tag}`) }}
|
||||
|
|
@ -345,8 +342,7 @@ onBeforeMount(() => {
|
|||
<div aria-hidden="true" class="menu-page-plugin-svg-container">
|
||||
<Icons
|
||||
:iconName="plugin.type === 'pro' ? 'crown' : 'free'"
|
||||
:iconClass="'menu-svg'"
|
||||
:iconColor="plugin.type === 'pro' ? 'amber' : 'dark'"
|
||||
:color="plugin.type === 'pro' ? 'amber' : 'dark'"
|
||||
/>
|
||||
</div>
|
||||
<span class="menu-page-plugin-name">{{ plugin.name }}</span>
|
||||
|
|
@ -385,7 +381,7 @@ onBeforeMount(() => {
|
|||
<!-- end dark/light mode -->
|
||||
|
||||
<!-- social-->
|
||||
<ul class="menu-social-list">
|
||||
<ul data-is="social" class="menu-social-list">
|
||||
<li v-for="(item, id) in socialList" class="menu-social-list-item">
|
||||
<span :id="`menu-social-item-${id}`" class="sr-only">
|
||||
{{ $t(`dashboard_menu_${item.tag}_label`) }}
|
||||
|
|
@ -398,11 +394,7 @@ onBeforeMount(() => {
|
|||
target="_blank"
|
||||
:aria-labelledby="`menu-social-item-${id}`"
|
||||
>
|
||||
<Icons
|
||||
:iconName="item.svg"
|
||||
:iconClass="'social-svg'"
|
||||
:iconColor="item.svgColor"
|
||||
/>
|
||||
<Icons :iconName="item.svg" :color="item.svgColor" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -141,7 +141,7 @@ onMounted(() => {
|
|||
|
||||
<template>
|
||||
<Container
|
||||
:containerClass="`field-container ${props.containerClass}`"
|
||||
:containerClass="`${props.containerClass}`"
|
||||
:columns="props.columns"
|
||||
>
|
||||
<Header
|
||||
|
|
|
|||
|
|
@ -318,7 +318,7 @@ const emits = defineEmits(["inp"]);
|
|||
<Container
|
||||
data-field-container
|
||||
:class="[select.isOpen ? 'z-[100]' : '']"
|
||||
:containerClass="`field-container ${props.containerClass}`"
|
||||
:containerClass="`${props.containerClass}`"
|
||||
:columns="props.columns"
|
||||
>
|
||||
<Header
|
||||
|
|
|
|||
|
|
@ -646,7 +646,7 @@ onUnmounted(() => {
|
|||
<Container
|
||||
:class="[picker.isOpen ? 'z-[100]' : '']"
|
||||
v-if="props.inpType === 'datepicker'"
|
||||
:containerClass="`field-container ${props.containerClass}`"
|
||||
:containerClass="`${props.containerClass}`"
|
||||
:columns="props.columns"
|
||||
>
|
||||
<Header
|
||||
|
|
|
|||
|
|
@ -340,7 +340,7 @@ onUnmounted(() => {
|
|||
|
||||
<template>
|
||||
<Container
|
||||
:containerClass="`field-container setting ${props.containerClass}`"
|
||||
:containerClass="`${props.containerClass}`"
|
||||
:columns="props.columns"
|
||||
>
|
||||
<Header
|
||||
|
|
|
|||
|
|
@ -171,7 +171,7 @@ onMounted(() => {
|
|||
|
||||
<template>
|
||||
<Container
|
||||
:containerClass="`field-container ${props.containerClass}`"
|
||||
:containerClass="`${props.containerClass}`"
|
||||
:columns="props.columns"
|
||||
>
|
||||
<Header
|
||||
|
|
|
|||
|
|
@ -291,7 +291,7 @@ const emits = defineEmits(["inp"]);
|
|||
<Container
|
||||
:class="[select.isOpen ? 'z-[100]' : '']"
|
||||
data-field-container
|
||||
:containerClass="`field-container ${props.containerClass}`"
|
||||
:containerClass="`${props.containerClass}`"
|
||||
:columns="props.columns"
|
||||
>
|
||||
<Header
|
||||
|
|
|
|||
|
|
@ -1,39 +1,40 @@
|
|||
<script setup>
|
||||
import { defineProps, reactive } from "vue";
|
||||
/**
|
||||
@name Icons/Box.vue
|
||||
@description This component is a svg icon representing box.
|
||||
@example
|
||||
{
|
||||
iconColor: 'info',
|
||||
color: 'info',
|
||||
}
|
||||
@param {string} [iconClass="base"] - The class of the icon. "base" is the default size.
|
||||
@param {string} [iconColor="info"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
|
||||
@param {string} [iconClass="icon-default"] - The class of the icon.
|
||||
@param {string} [color="dark"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
|
||||
*/
|
||||
|
||||
const props = defineProps({
|
||||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "base",
|
||||
default: "icon-default",
|
||||
},
|
||||
iconColor: {
|
||||
color: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "info",
|
||||
default: "dark",
|
||||
},
|
||||
});
|
||||
|
||||
const icon = reactive({
|
||||
color: props.color || "dark",
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<svg
|
||||
:data-color="icon.color"
|
||||
data-svg="box"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
:class="[
|
||||
'icon-svg',
|
||||
props.iconClass,
|
||||
props.iconColor,
|
||||
'dark:brightness-[125%]',
|
||||
]"
|
||||
:class="[props.iconClass, icon.color, 'fill dark:brightness-[125%]']"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
|
|
|
|||
|
|
@ -1,34 +1,40 @@
|
|||
<script setup>
|
||||
import { defineProps, reactive } from "vue";
|
||||
/**
|
||||
@name Icons/Carton.vue
|
||||
@description This component is a svg icon representing carton box.
|
||||
@example
|
||||
{
|
||||
iconColor: 'info',
|
||||
color: 'info',
|
||||
}
|
||||
@param {string} [iconClass="base"] - The class of the icon. "base" is the default size.
|
||||
@param {string} [iconColor="info"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
|
||||
@param {string} [iconClass="icon-default"] - The class of the icon.
|
||||
@param {string} [color="orange-darker"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
|
||||
*/
|
||||
|
||||
const props = defineProps({
|
||||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "base",
|
||||
default: "icon-default",
|
||||
},
|
||||
iconColor: {
|
||||
color: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "info",
|
||||
default: "orange-darker",
|
||||
},
|
||||
});
|
||||
|
||||
const icon = reactive({
|
||||
color: props.color || "orange-darker",
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<svg
|
||||
:data-color="icon.color"
|
||||
data-svg="carton"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
:class="['icon-svg', props.iconClass, props.iconColor]"
|
||||
:class="[props.iconClass, icon.color, 'fill']"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
|
|
|
|||
|
|
@ -6,19 +6,19 @@ import { defineProps, reactive, onMounted } from "vue";
|
|||
@description This component is a svg icon representing a check mark.
|
||||
@example
|
||||
{
|
||||
iconColor: 'info',
|
||||
color: 'info',
|
||||
}
|
||||
@param {string} [iconClass="base"] - The class of the icon. "base" is the default size.
|
||||
@param {string} [iconColor="info"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
|
||||
@param {string} [iconClass="icon-default"] - The class of the icon.
|
||||
@param {string} [color="success"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
|
||||
*/
|
||||
|
||||
const props = defineProps({
|
||||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "base",
|
||||
default: "icon-default",
|
||||
},
|
||||
iconColor: {
|
||||
color: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "success",
|
||||
|
|
@ -27,6 +27,7 @@ const props = defineProps({
|
|||
|
||||
const icon = reactive({
|
||||
id: "",
|
||||
color: props.color || "success",
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
|
|
@ -36,13 +37,14 @@ onMounted(() => {
|
|||
<template>
|
||||
<span :id="icon.id" class="sr-only">{{ $t("icons_check_desc") }}</span>
|
||||
<svg
|
||||
:data-color="icon.color"
|
||||
data-svg="check"
|
||||
role="img"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
:aria-labelledby="icon.id"
|
||||
:class="[props.iconClass, props.iconColor]"
|
||||
:class="[props.iconClass, icon.color, 'fill']"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
|
|
|
|||
55
vuejs/client/src/components/Icons/Close.vue
Normal file
55
vuejs/client/src/components/Icons/Close.vue
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
<script setup>
|
||||
import { defineProps, reactive, onMounted } from "vue";
|
||||
import { useUUID } from "@utils/global.js";
|
||||
/**
|
||||
@name Icons/Close.vue
|
||||
@description This component is a svg icon representing a close mark.
|
||||
@example
|
||||
{
|
||||
color: 'info',
|
||||
}
|
||||
@param {string} [iconClass="icon-default"] - The class of the icon.
|
||||
@param {string} [color="dark"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
|
||||
*/
|
||||
|
||||
const props = defineProps({
|
||||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "icon-default",
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "dark",
|
||||
},
|
||||
});
|
||||
|
||||
const icon = reactive({
|
||||
id: "",
|
||||
color: props.color || "dark",
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
icon.id = useUUID();
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<span :id="icon.id" class="sr-only">{{ $t("icons_cross_desc") }}</span>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
:data-color="icon.color"
|
||||
data-svg="cross"
|
||||
role="img"
|
||||
:class="[props.iconClass, icon.color, 'fill']"
|
||||
:aria-labelledby="icon.id"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M5.47 5.47a.75.75 0 0 1 1.06 0L12 10.94l5.47-5.47a.75.75 0 1 1 1.06 1.06L13.06 12l5.47 5.47a.75.75 0 1 1-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 0 1-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 0 1 0-1.06Z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
|
@ -6,27 +6,28 @@ import { useUUID } from "@utils/global.js";
|
|||
@description This component is a svg icon representing core plugin.
|
||||
@example
|
||||
{
|
||||
iconColor: 'info',
|
||||
color: 'info',
|
||||
}
|
||||
@param {string} [iconClass="base"] - The class of the icon. "base" is the default size.
|
||||
@param {string} [iconColor="info"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
|
||||
@param {string} [iconClass="icon-default"] - The class of the icon.
|
||||
@param {string} [color="cyan-darker"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
|
||||
*/
|
||||
|
||||
const props = defineProps({
|
||||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "base",
|
||||
default: "icon-default",
|
||||
},
|
||||
iconColor: {
|
||||
color: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "red",
|
||||
default: "cyan-darker",
|
||||
},
|
||||
});
|
||||
|
||||
const icon = reactive({
|
||||
id: "",
|
||||
color: props.color || "cyan-darker",
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
|
|
@ -39,9 +40,10 @@ onMounted(() => {
|
|||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
:data-color="icon.color"
|
||||
data-svg="core"
|
||||
role="img"
|
||||
:class="['icon-svg', props.iconClass, props.iconColor]"
|
||||
:class="[props.iconClass, icon.color, 'fill']"
|
||||
:aria-labelledby="icon.id"
|
||||
>
|
||||
<path d="M16.5 7.5h-9v9h9v-9Z" />
|
||||
|
|
|
|||
|
|
@ -6,27 +6,28 @@ import { useUUID } from "@utils/global.js";
|
|||
@description This component is a svg icon representing a cross mark.
|
||||
@example
|
||||
{
|
||||
iconColor: 'info',
|
||||
color: 'info',
|
||||
}
|
||||
@param {string} [iconClass="base"] - The class of the icon. "base" is the default size.
|
||||
@param {string} [iconColor="info"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
|
||||
@param {string} [iconClass="icon-default"] - The class of the icon.
|
||||
@param {string} [color="red"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
|
||||
*/
|
||||
|
||||
const props = defineProps({
|
||||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "base",
|
||||
default: "icon-default",
|
||||
},
|
||||
iconColor: {
|
||||
color: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "info",
|
||||
default: "red",
|
||||
},
|
||||
});
|
||||
|
||||
const icon = reactive({
|
||||
id: "",
|
||||
color: props.color || "red",
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
|
|
@ -39,9 +40,10 @@ onMounted(() => {
|
|||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
:data-color="icon.color"
|
||||
data-svg="cross"
|
||||
role="img"
|
||||
:class="['icon-svg', props.iconClass, props.iconColor]"
|
||||
:class="[props.iconClass, icon.color, 'fill']"
|
||||
:aria-labelledby="icon.id"
|
||||
>
|
||||
<path
|
||||
|
|
|
|||
|
|
@ -7,19 +7,19 @@ import { useUUID } from "@utils/global.js";
|
|||
@description This component is a svg icon representing crown.
|
||||
@example
|
||||
{
|
||||
iconColor: 'info',
|
||||
color: 'info',
|
||||
}
|
||||
@param {string} [iconClass="base"] - The class of the icon. "base" is the default size.
|
||||
@param {string} [iconColor="info"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
|
||||
@param {string} [iconClass="icon-default"] - The class of the icon.
|
||||
@param {string} [color="amber"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
|
||||
*/
|
||||
|
||||
const props = defineProps({
|
||||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "base",
|
||||
default: "icon-default",
|
||||
},
|
||||
iconColor: {
|
||||
color: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "amber",
|
||||
|
|
@ -28,6 +28,7 @@ const props = defineProps({
|
|||
|
||||
const icon = reactive({
|
||||
id: "",
|
||||
color: props.color || "amber",
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
|
|
@ -37,10 +38,11 @@ onMounted(() => {
|
|||
<template>
|
||||
<span :id="icon.id" class="sr-only">{{ $t("icons_crown_desc") }}</span>
|
||||
<svg
|
||||
:data-color="icon.color"
|
||||
data-svg="crown"
|
||||
role="img"
|
||||
:aria-labelledby="icon.id"
|
||||
:class="['icon-svg', props.iconClass, props.iconColor, 'scale-95']"
|
||||
:class="[props.iconClass, icon.color, 'fill']"
|
||||
viewBox="0 0 48 46"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
|
|||
|
|
@ -6,19 +6,19 @@ import { useUUID } from "@utils/global.js";
|
|||
@description This component is a svg icon representing Discord.
|
||||
@example
|
||||
{
|
||||
iconColor: 'info',
|
||||
color: 'info',
|
||||
}
|
||||
@param {string} [iconClass="base"] - The class of the icon. "base" is the default size.
|
||||
@param {string} [iconColor="discord"]
|
||||
@param {string} [iconClass="icon-default"] - The class of the icon.
|
||||
@param {string} [color="discord"]
|
||||
*/
|
||||
|
||||
const props = defineProps({
|
||||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "base",
|
||||
default: "icon-default",
|
||||
},
|
||||
iconColor: {
|
||||
color: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "discord",
|
||||
|
|
@ -27,6 +27,7 @@ const props = defineProps({
|
|||
|
||||
const icon = reactive({
|
||||
id: "",
|
||||
color: props.color || "discord",
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
|
|
@ -36,10 +37,11 @@ onMounted(() => {
|
|||
<template>
|
||||
<span :id="icon.id" class="sr-only">{{ $t("icons_discord_desc") }}</span>
|
||||
<svg
|
||||
:data-color="icon.color"
|
||||
data-svg="discord"
|
||||
role="img"
|
||||
fill="none"
|
||||
:class="['icon-svg', props.iconClass, props.iconColor]"
|
||||
:class="[props.iconClass, icon.color, 'fill']"
|
||||
:aria-labelledby="icon.id"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 640 512"
|
||||
|
|
|
|||
|
|
@ -1,34 +1,40 @@
|
|||
<script setup>
|
||||
import { defineProps, reactive } from "vue";
|
||||
/**
|
||||
@name Icons/Disk.vue
|
||||
@description This component is a svg icon representing disk.
|
||||
@example
|
||||
{
|
||||
iconColor: 'info',
|
||||
color: 'info',
|
||||
}
|
||||
@param {string} [iconClass="base"] - The class of the icon. "base" is the default size.
|
||||
@param {string} [iconColor="info"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
|
||||
@param {string} [iconClass="icon-default"] - The class of the icon.
|
||||
@param {string} [color="orange"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
|
||||
*/
|
||||
|
||||
const props = defineProps({
|
||||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "base",
|
||||
default: "icon-default",
|
||||
},
|
||||
iconColor: {
|
||||
color: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "orange",
|
||||
},
|
||||
});
|
||||
|
||||
const icon = reactive({
|
||||
color: props.color || "orange",
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<svg
|
||||
:data-color="icon.color"
|
||||
data-svg="disk"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
:class="['icon-svg', props.iconClass, props.iconColor]"
|
||||
:class="[props.iconClass, icon.color, 'fill']"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
|
|
|
|||
|
|
@ -1,37 +1,43 @@
|
|||
<script setup>
|
||||
import { defineProps, reactive } from "vue";
|
||||
/**
|
||||
@name Icons/Disks.vue
|
||||
@description This component is a svg icon representing disks.
|
||||
@example
|
||||
{
|
||||
iconColor: 'info',
|
||||
color: 'info',
|
||||
}
|
||||
@param {string} [iconClass="base"] - The class of the icon. "base" is the default size.
|
||||
@param {string} [iconColor="info"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
|
||||
@param {string} [iconClass="icon-default"] - The class of the icon.
|
||||
@param {string} [color="orange"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
|
||||
*/
|
||||
|
||||
const props = defineProps({
|
||||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "base",
|
||||
default: "icon-default",
|
||||
},
|
||||
iconColor: {
|
||||
color: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "orange",
|
||||
},
|
||||
});
|
||||
|
||||
const icon = reactive({
|
||||
color: props.color || "orange",
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<svg
|
||||
:data-color="icon.color"
|
||||
data-svg="disks"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
:class="['icon-svg', props.iconClass, props.iconColor]"
|
||||
:class="[props.iconClass, icon.color, 'fill']"
|
||||
>
|
||||
<path
|
||||
d="M5.507 4.048A3 3 0 0 1 7.785 3h8.43a3 3 0 0 1 2.278 1.048l1.722 2.008A4.533 4.533 0 0 0 19.5 6h-15c-.243 0-.482.02-.715.056l1.722-2.008Z"
|
||||
|
|
|
|||
|
|
@ -6,27 +6,28 @@ import { useUUID } from "@utils/global.js";
|
|||
@description This component is a svg icon representing core plugin.
|
||||
@example
|
||||
{
|
||||
iconColor: 'info',
|
||||
color: 'info',
|
||||
}
|
||||
@param {string} [iconClass="base"] - The class of the icon. "base" is the default size.
|
||||
@param {string} [iconColor="info"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
|
||||
@param {string} [iconClass="icon-default"] - The class of the icon.
|
||||
@param {string} [color="blue"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
|
||||
*/
|
||||
|
||||
const props = defineProps({
|
||||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "base",
|
||||
default: "icon-default",
|
||||
},
|
||||
iconColor: {
|
||||
color: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "info",
|
||||
default: "blue",
|
||||
},
|
||||
});
|
||||
|
||||
const icon = reactive({
|
||||
id: "",
|
||||
color: props.color || "blue",
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
|
|
@ -39,9 +40,10 @@ onMounted(() => {
|
|||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
:data-color="icon.color"
|
||||
data-svg="external"
|
||||
role="img"
|
||||
:class="['icon-svg', props.iconClass, props.iconColor]"
|
||||
:class="[props.iconClass, icon.color, 'fill']"
|
||||
:aria-labelledby="icon.id"
|
||||
>
|
||||
<path
|
||||
|
|
|
|||
|
|
@ -1,34 +1,41 @@
|
|||
<script setup>
|
||||
import { defineProps, reactive } from "vue";
|
||||
|
||||
/**
|
||||
@name Icons/Flag.vue
|
||||
@description This component is a svg icon representing flag.
|
||||
@example
|
||||
{
|
||||
iconColor: 'info',
|
||||
color: 'info',
|
||||
}
|
||||
@param {string} [iconClass="base"] - The class of the icon. "base" is the default size.
|
||||
@param {string} [iconColor="info"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
|
||||
@param {string} [iconClass="icon-default"] - The class of the icon.
|
||||
@param {string} [color="amber-dark"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
|
||||
*/
|
||||
|
||||
const props = defineProps({
|
||||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "base",
|
||||
default: "icon-default",
|
||||
},
|
||||
iconColor: {
|
||||
color: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "info",
|
||||
default: "amber",
|
||||
},
|
||||
});
|
||||
|
||||
const icon = reactive({
|
||||
color: props.color || "amber",
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<svg
|
||||
:data-color="icon.color"
|
||||
data-svg="flag"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
:class="['icon-svg', props.iconClass, props.iconColor]"
|
||||
:class="[props.iconClass, icon.color, 'fill']"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
|
|
|
|||
|
|
@ -1,34 +1,40 @@
|
|||
<script setup>
|
||||
import { defineProps, reactive } from "vue";
|
||||
/**
|
||||
@name Icons/Funnel.vue
|
||||
@description This component is a svg icon representing funnel.
|
||||
@example
|
||||
{
|
||||
iconColor: 'info',
|
||||
color: 'info',
|
||||
}
|
||||
@param {string} [iconClass="base"] - The class of the icon. "base" is the default size.
|
||||
@param {string} [iconColor="info"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
|
||||
@param {string} [iconClass="icon-default"] - The class of the icon.
|
||||
@param {string} [color="red"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
|
||||
*/
|
||||
|
||||
const props = defineProps({
|
||||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "base",
|
||||
default: "icon-default",
|
||||
},
|
||||
iconColor: {
|
||||
color: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "info",
|
||||
default: "red-dark",
|
||||
},
|
||||
});
|
||||
|
||||
const icon = reactive({
|
||||
color: props.color || "red",
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<svg
|
||||
:data-color="icon.color"
|
||||
data-svg="flag"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
:class="['icon-svg', props.iconClass, props.iconColor]"
|
||||
:class="[props.iconClass, icon.color, 'fill']"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
|
|
|
|||
|
|
@ -1,34 +1,40 @@
|
|||
<script setup>
|
||||
import { defineProps, reactive } from "vue";
|
||||
/**
|
||||
@name Icons/Gear.vue
|
||||
@description This component is a svg icon representing gear.
|
||||
@example
|
||||
{
|
||||
iconColor: 'info',
|
||||
color: 'info',
|
||||
}
|
||||
@param {string} [iconClass="base"] - The class of the icon. "base" is the default size.
|
||||
@param {string} [iconColor="info"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
|
||||
@param {string} [iconClass="icon-default"] - The class of the icon.
|
||||
@param {string} [color="dark"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
|
||||
*/
|
||||
|
||||
const props = defineProps({
|
||||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "base",
|
||||
default: "icon-default",
|
||||
},
|
||||
iconColor: {
|
||||
color: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "info",
|
||||
default: "dark",
|
||||
},
|
||||
});
|
||||
|
||||
const icon = reactive({
|
||||
color: props.color || "dark",
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<svg
|
||||
:data-color="icon.color"
|
||||
data-svg="gear"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
:class="['icon-svg', props.iconClass, props.iconColor]"
|
||||
:class="[props.iconClass, icon.color, 'fill']"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
|
|
|
|||
|
|
@ -6,19 +6,19 @@ import { useUUID } from "@utils/global.js";
|
|||
@description This component is a svg icon representing Github.
|
||||
@example
|
||||
{
|
||||
iconColor: 'info',
|
||||
color: 'info',
|
||||
}
|
||||
@param {string} [iconClass="base"] - The class of the icon. "base" is the default size.
|
||||
@param {string} [iconColor="github"]
|
||||
@param {string} [iconClass="icon-default"] - The class of the icon.
|
||||
@param {string} [color="github"]
|
||||
*/
|
||||
|
||||
const props = defineProps({
|
||||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "base",
|
||||
default: "icon-default",
|
||||
},
|
||||
iconColor: {
|
||||
color: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "github",
|
||||
|
|
@ -27,6 +27,7 @@ const props = defineProps({
|
|||
|
||||
const icon = reactive({
|
||||
id: "",
|
||||
color: props.color || "github",
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
|
|
@ -36,10 +37,11 @@ onMounted(() => {
|
|||
<template>
|
||||
<span :id="icon.id" class="sr-only">{{ $t("icons_github_desc") }}</span>
|
||||
<svg
|
||||
:data-color="icon.color"
|
||||
data-svg="github"
|
||||
role="img"
|
||||
fill="none"
|
||||
:class="['icon-svg', props.iconClass, props.iconColor]"
|
||||
:class="[props.iconClass, icon.color, 'fill']"
|
||||
:aria-labelledby="icon.id"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 496 512"
|
||||
|
|
|
|||
|
|
@ -1,34 +1,40 @@
|
|||
<script setup>
|
||||
import { defineProps, reactive } from "vue";
|
||||
/**
|
||||
@name Icons/Globe.vue
|
||||
@description This component is a svg icon representing globe.
|
||||
@example
|
||||
{
|
||||
iconColor: 'info',
|
||||
color: 'info',
|
||||
}
|
||||
@param {string} [iconClass="base"] - The class of the icon. "base" is the default size.
|
||||
@param {string} [iconColor="info"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
|
||||
@param {string} [iconClass="icon-default"] - The class of the icon.
|
||||
@param {string} [color="blue"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
|
||||
*/
|
||||
|
||||
const props = defineProps({
|
||||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "base",
|
||||
default: "icon-default",
|
||||
},
|
||||
iconColor: {
|
||||
color: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "blue",
|
||||
},
|
||||
});
|
||||
|
||||
const icon = reactive({
|
||||
color: props.color || "blue",
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<svg
|
||||
:data-color="icon.color"
|
||||
data-svg="globe"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
:class="['icon-svg', props.iconClass, props.iconColor]"
|
||||
:class="[props.iconClass, icon.color, 'fill']"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
|
|
|
|||
|
|
@ -1,34 +1,40 @@
|
|||
<script setup>
|
||||
import { defineProps, reactive } from "vue";
|
||||
/**
|
||||
@name Icons/House.vue
|
||||
@description This component is a svg icon representing house.
|
||||
@example
|
||||
{
|
||||
iconColor: 'info',
|
||||
color: 'info',
|
||||
}
|
||||
@param {string} [iconClass="base"] - The class of the icon. "base" is the default size.
|
||||
@param {string} [iconColor="info"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
|
||||
@param {string} [iconClass="icon-default"] - The class of the icon.
|
||||
@param {string} [color="cyan-darker"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
|
||||
*/
|
||||
|
||||
const props = defineProps({
|
||||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "base",
|
||||
default: "icon-default",
|
||||
},
|
||||
iconColor: {
|
||||
color: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "info",
|
||||
default: "cyan-darker",
|
||||
},
|
||||
});
|
||||
|
||||
const icon = reactive({
|
||||
color: props.color || "cyan-darker",
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<svg
|
||||
:data-color="icon.color"
|
||||
data-svg="house"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
:class="['icon-svg', props.iconClass, props.iconColor]"
|
||||
:class="[props.iconClass, icon.color, 'fill']"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
|
|
|
|||
|
|
@ -1,37 +1,43 @@
|
|||
<script setup>
|
||||
import { defineProps, reactive } from "vue";
|
||||
/**
|
||||
@name Icons/Info.vue
|
||||
@description This component is a svg icon representing info.
|
||||
@example
|
||||
{
|
||||
iconColor: 'info',
|
||||
color: 'info',
|
||||
}
|
||||
@param {string} [iconClass="base"] - The class of the icon. "base" is the default size.
|
||||
@param {string} [iconColor="info"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
|
||||
@param {string} [iconClass="icon-default"] - The class of the icon.
|
||||
@param {string} [color="info"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
|
||||
*/
|
||||
|
||||
const props = defineProps({
|
||||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "base",
|
||||
default: "icon-default",
|
||||
},
|
||||
iconColor: {
|
||||
color: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "info",
|
||||
},
|
||||
});
|
||||
|
||||
const icon = reactive({
|
||||
color: props.color || "info",
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<svg
|
||||
:data-color="icon.color"
|
||||
data-svg="info"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
:class="['icon-svg', props.iconClass, props.iconColor]"
|
||||
:class="[props.iconClass, icon.color, 'fill']"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
|
|
|
|||
|
|
@ -1,34 +1,40 @@
|
|||
<script setup>
|
||||
import { defineProps, reactive } from "vue";
|
||||
/**
|
||||
@name Icons/Key.vue
|
||||
@description This component is a svg icon representing key.
|
||||
@example
|
||||
{
|
||||
iconColor: 'info',
|
||||
color: 'info',
|
||||
}
|
||||
@param {string} [iconClass="base"] - The class of the icon. "base" is the default size.
|
||||
@param {string} [iconColor="info"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
|
||||
@param {string} [iconClass="icon-default"] - The class of the icon.
|
||||
@param {string} [color=""] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
|
||||
*/
|
||||
|
||||
const props = defineProps({
|
||||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "base",
|
||||
default: "icon-default",
|
||||
},
|
||||
iconColor: {
|
||||
color: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "info",
|
||||
default: "amber",
|
||||
},
|
||||
});
|
||||
|
||||
const icon = reactive({
|
||||
color: props.color || "amber",
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<svg
|
||||
:data-color="icon.color"
|
||||
data-svg="key"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
:class="['icon-svg', props.iconClass, props.iconColor]"
|
||||
:class="[props.iconClass, icon.color, 'fill']"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
|
|
|
|||
|
|
@ -6,19 +6,19 @@ import { useUUID } from "@utils/global.js";
|
|||
@description This component is a svg icon representing Linkedin.
|
||||
@example
|
||||
{
|
||||
iconColor: 'info',
|
||||
color: 'info',
|
||||
}
|
||||
@param {string} [iconClass="base"] - The class of the icon. "base" is the default size.
|
||||
@param {string} [iconColor="linkedin"]
|
||||
@param {string} [iconClass="icon-default"] - The class of the icon.
|
||||
@param {string} [color="linkedin"]
|
||||
*/
|
||||
|
||||
const props = defineProps({
|
||||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "base",
|
||||
default: "icon-default",
|
||||
},
|
||||
iconColor: {
|
||||
color: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "linkedin",
|
||||
|
|
@ -27,6 +27,7 @@ const props = defineProps({
|
|||
|
||||
const icon = reactive({
|
||||
id: "",
|
||||
color: props.color || "linkedin",
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
|
|
@ -36,9 +37,10 @@ onMounted(() => {
|
|||
<template>
|
||||
<span :id="icon.id" class="sr-only">{{ $t("icons_linkedin_desc") }}</span>
|
||||
<svg
|
||||
:data-color="icon.color"
|
||||
data-svg="key"
|
||||
role="img"
|
||||
:class="['icon-svg', props.iconClass, props.iconColor]"
|
||||
:class="[props.iconClass, icon.color, 'fill']"
|
||||
fill="none"
|
||||
class="hover:opacity-80 dark:brightness-110"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
|
|||
|
|
@ -1,32 +1,38 @@
|
|||
<script setup>
|
||||
import { defineProps, reactive } from "vue";
|
||||
/**
|
||||
@name Icons/List.vue
|
||||
@description This component is a svg icon representing list.
|
||||
@example
|
||||
{
|
||||
iconColor: 'info',
|
||||
color: 'info',
|
||||
}
|
||||
@param {string} [iconClass="base"] - The class of the icon. "base" is the default size.
|
||||
@param {string} [iconColor="info"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
|
||||
@param {string} [iconClass="icon-default"] - The class of the icon.
|
||||
@param {string} [color="dark"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
|
||||
*/
|
||||
|
||||
const props = defineProps({
|
||||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "base",
|
||||
default: "icon-default",
|
||||
},
|
||||
iconColor: {
|
||||
color: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "info",
|
||||
default: "dark",
|
||||
},
|
||||
});
|
||||
|
||||
const icon = reactive({
|
||||
color: props.color || "dark",
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<svg
|
||||
:data-color="icon.color"
|
||||
data-svg="list"
|
||||
:class="['icon-svg', props.iconClass, props.iconColor]"
|
||||
:class="[props.iconClass, icon.color, 'fill']"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
|
|||
|
|
@ -1,37 +1,43 @@
|
|||
<script setup>
|
||||
import { defineProps, reactive } from "vue";
|
||||
/**
|
||||
@name Icons/Lock.vue
|
||||
@description This component is a svg icon representing lock.
|
||||
@example
|
||||
{
|
||||
iconColor: 'info',
|
||||
color: 'info',
|
||||
}
|
||||
@param {string} [iconClass="base"] - The class of the icon. "base" is the default size.
|
||||
@param {string} [iconColor="info"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
|
||||
@param {string} [iconClass="icon-default"] - The class of the icon.
|
||||
@param {string} [color="yellow"] - The color of the icon between some tailwind css available colors (purple, green, red, yellow, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
|
||||
*/
|
||||
|
||||
const props = defineProps({
|
||||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "base",
|
||||
default: "icon-default",
|
||||
},
|
||||
iconColor: {
|
||||
color: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "orange",
|
||||
default: "yellow",
|
||||
},
|
||||
});
|
||||
|
||||
const icon = reactive({
|
||||
color: props.color || "yellow",
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
:data-color="icon.color"
|
||||
data-svg="lock"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
:class="['icon-svg', props.iconClass, props.iconColor]"
|
||||
:class="[props.iconClass, icon.color, 'fill']"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
|
|
|
|||
|
|
@ -6,19 +6,19 @@ import { useUUID } from "@utils/global.js";
|
|||
@description This component is a svg icon representing addition (+).
|
||||
@example
|
||||
{
|
||||
iconColor: 'info',
|
||||
color: 'info',
|
||||
}
|
||||
@param {string} [iconClass="base"] - The class of the icon. "base" is the default size.
|
||||
@param {string} [iconColor="info"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
|
||||
@param {string} [iconClass="icon-default"] - The class of the icon.
|
||||
@param {string} [color="success"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
|
||||
*/
|
||||
|
||||
const props = defineProps({
|
||||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "base",
|
||||
default: "icon-default",
|
||||
},
|
||||
iconColor: {
|
||||
color: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "success",
|
||||
|
|
@ -27,6 +27,7 @@ const props = defineProps({
|
|||
|
||||
const icon = reactive({
|
||||
id: "",
|
||||
color: props.color || "success",
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
|
|
@ -37,10 +38,11 @@ onMounted(() => {
|
|||
<template>
|
||||
<span :id="icon.id" class="sr-only">{{ $t("icons_plus_desc") }}</span>
|
||||
<svg
|
||||
:data-color="icon.color"
|
||||
data-svg="plus"
|
||||
role="img"
|
||||
:aria-labelledby="icon.id"
|
||||
:class="['icon-svg', props.iconClass, props.iconColor]"
|
||||
:class="[props.iconClass, icon.color, 'fill']"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
|
|
|
|||
|
|
@ -1,32 +1,38 @@
|
|||
<script setup>
|
||||
import { defineProps, reactive } from "vue";
|
||||
/**
|
||||
@name Icons/Puzzle.vue
|
||||
@description This component is a svg icon representing puzzle.
|
||||
@example
|
||||
{
|
||||
iconColor: 'info',
|
||||
color: 'info',
|
||||
}
|
||||
@param {string} [iconClass="base"] - The class of the icon. "base" is the default size.
|
||||
@param {string} [iconColor="info"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
|
||||
@param {string} [iconClass="icon-default"] - The class of the icon.
|
||||
@param {string} [color="yellow"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
|
||||
*/
|
||||
|
||||
const props = defineProps({
|
||||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "base",
|
||||
default: "icon-default",
|
||||
},
|
||||
iconColor: {
|
||||
color: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "info",
|
||||
default: "yellow",
|
||||
},
|
||||
});
|
||||
|
||||
const icon = reactive({
|
||||
color: props.color || "yellow",
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<svg
|
||||
:data-color="icon.color"
|
||||
data-svg="puzzle"
|
||||
:class="['icon-svg', props.iconClass, props.iconColor]"
|
||||
:class="[props.iconClass, icon.color, 'fill']"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
|
|||
|
|
@ -1,34 +1,40 @@
|
|||
<script setup>
|
||||
import { defineProps, reactive } from "vue";
|
||||
/**
|
||||
@name Icons/Redirect.vue
|
||||
@description This component is a svg icon representing redirect.
|
||||
@example
|
||||
{
|
||||
iconColor: 'info',
|
||||
color: 'info',
|
||||
}
|
||||
@param {string} [iconClass="base"] - The class of the icon. "base" is the default size.
|
||||
@param {string} [iconColor="info"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
|
||||
@param {string} [iconClass="icon-default"] - The class of the icon.
|
||||
@param {string} [color="blue"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
|
||||
*/
|
||||
|
||||
const props = defineProps({
|
||||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "base",
|
||||
default: "icon-default",
|
||||
},
|
||||
iconColor: {
|
||||
color: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "info",
|
||||
default: "blue",
|
||||
},
|
||||
});
|
||||
|
||||
const icon = reactive({
|
||||
color: props.color || "blue",
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<svg
|
||||
:data-color="icon.color"
|
||||
data-svg="redirect"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
:class="['icon-svg', props.iconClass, props.iconColor, 'scale-90']"
|
||||
:class="[props.iconClass, icon.color, 'fill scale-90']"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 448 512"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,34 +1,40 @@
|
|||
<script setup>
|
||||
import { defineProps, reactive } from "vue";
|
||||
/**
|
||||
@name Icons/Search.vue
|
||||
@description This component is a svg icon representing search.
|
||||
@example
|
||||
{
|
||||
iconColor: 'info',
|
||||
color: 'info',
|
||||
}
|
||||
@param {string} [iconClass="base"] - The class of the icon. "base" is the default size.
|
||||
@param {string} [iconColor="info"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
|
||||
@param {string} [iconClass="icon-default"] - The class of the icon.
|
||||
@param {string} [color="info"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
|
||||
*/
|
||||
|
||||
const props = defineProps({
|
||||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "base",
|
||||
default: "icon-default",
|
||||
},
|
||||
iconColor: {
|
||||
color: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "orange",
|
||||
default: "info",
|
||||
},
|
||||
});
|
||||
|
||||
const icon = reactive({
|
||||
color: props.color || "info",
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<svg
|
||||
:data-color="icon.color"
|
||||
data-svg="search"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
:class="['icon-svg', props.iconClass, props.iconColor]"
|
||||
:class="[props.iconClass, icon.color, 'fill']"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
|
|
|
|||
|
|
@ -1,34 +1,40 @@
|
|||
<script setup>
|
||||
import { defineProps, reactive } from "vue";
|
||||
/**
|
||||
@name Icons/Settings.vue
|
||||
@description This component is a svg icon representing settings.
|
||||
@example
|
||||
{
|
||||
iconColor: 'info',
|
||||
color: 'info',
|
||||
}
|
||||
@param {string} [iconClass="base"] - The class of the icon. "base" is the default size.
|
||||
@param {string} [iconColor="info"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
|
||||
@param {string} [iconClass="icon-default"] - The class of the icon.
|
||||
@param {string} [color="blue-darker"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
|
||||
*/
|
||||
|
||||
const props = defineProps({
|
||||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "base",
|
||||
default: "icon-default",
|
||||
},
|
||||
iconColor: {
|
||||
color: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "info",
|
||||
default: "blue-darker",
|
||||
},
|
||||
});
|
||||
|
||||
const icon = reactive({
|
||||
color: props.color || "blue-darker",
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<svg
|
||||
:data-color="icon.color"
|
||||
data-svg="settings"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
:class="['icon-svg', props.iconClass, props.iconColor]"
|
||||
:class="[props.iconClass, icon.color, 'fill']"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
|
|
|
|||
|
|
@ -1,32 +1,38 @@
|
|||
<script setup>
|
||||
/**
|
||||
import { defineProps, reactive } from "vue";
|
||||
/**
|
||||
@name Icons/Task.vue
|
||||
@description This component is a svg icon representing task.
|
||||
@example
|
||||
{
|
||||
iconColor: 'info',
|
||||
color: 'info',
|
||||
}
|
||||
@param {string} [iconClass="base"] - The class of the icon. "base" is the default size.
|
||||
@param {string} [iconColor="info"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
|
||||
@param {string} [iconClass="icon-default"] - The class of the icon.
|
||||
@param {string} [color="success"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
|
||||
*/
|
||||
|
||||
const props = defineProps({
|
||||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "base",
|
||||
default: "icon-default",
|
||||
},
|
||||
iconColor: {
|
||||
color: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "info",
|
||||
default: "success",
|
||||
},
|
||||
});
|
||||
|
||||
const icon = reactive({
|
||||
color: props.color || "success",
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<svg
|
||||
:data-color="icon.color"
|
||||
data-svg="task"
|
||||
:class="['icon-svg', props.iconClass, props.iconColor]"
|
||||
:class="[props.iconClass, icon.color, 'fill']"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
|
|||
|
|
@ -1,37 +1,43 @@
|
|||
<script setup>
|
||||
import { defineProps, reactive } from "vue";
|
||||
/**
|
||||
@name Icons/Trash.vue
|
||||
@description This component is a svg icon representing trash.
|
||||
@example
|
||||
{
|
||||
iconColor: 'info',
|
||||
color: 'info',
|
||||
}
|
||||
@param {string} [iconClass="base"] - The class of the icon. "base" is the default size.
|
||||
@param {string} [iconColor="info"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
|
||||
@param {string} [iconClass="icon-default"] - The class of the icon.
|
||||
@param {string} [color="red"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
|
||||
*/
|
||||
|
||||
const props = defineProps({
|
||||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "base",
|
||||
default: "icon-default",
|
||||
},
|
||||
iconColor: {
|
||||
color: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "orange",
|
||||
default: "red",
|
||||
},
|
||||
});
|
||||
|
||||
const icon = reactive({
|
||||
color: props.color || "red",
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
:data-color="icon.color"
|
||||
data-svg="trash"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
:class="['icon-svg', props.iconClass, props.iconColor]"
|
||||
:class="[props.iconClass, icon.color, 'fill']"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
|
|
|
|||
|
|
@ -6,19 +6,19 @@ import { useUUID } from "@utils/global.js";
|
|||
@description This component is a svg icon representing no trespassing.
|
||||
@example
|
||||
{
|
||||
iconColor: 'info',
|
||||
color: 'info',
|
||||
}
|
||||
@param {string} [iconClass="base"] - The class of the icon. "base" is the default size.
|
||||
@param {string} [iconColor="info"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
|
||||
@param {string} [iconClass="icon-default"] - The class of the icon.
|
||||
@param {string} [color="error"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
|
||||
*/
|
||||
|
||||
const props = defineProps({
|
||||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "base",
|
||||
default: "icon-default",
|
||||
},
|
||||
iconColor: {
|
||||
color: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "error",
|
||||
|
|
@ -27,6 +27,7 @@ const props = defineProps({
|
|||
|
||||
const icon = reactive({
|
||||
id: "",
|
||||
color: props.color || "error",
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
|
|
@ -37,13 +38,14 @@ onMounted(() => {
|
|||
<template>
|
||||
<span :id="icon.id" class="sr-only">{{ $t("icons_trespass_desc") }}</span>
|
||||
<svg
|
||||
:data-color="icon.color"
|
||||
data-svg="trespass"
|
||||
role="img"
|
||||
:aria-labelledby="icon.id"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
:class="['icon-svg', props.iconClass, props.iconColor]"
|
||||
:class="[props.iconClass, icon.color, 'fill']"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
|
|
|
|||
|
|
@ -6,19 +6,19 @@ import { useUUID } from "@utils/global.js";
|
|||
@description This component is a svg icon representing Twiiter.
|
||||
@example
|
||||
{
|
||||
iconColor: 'info',
|
||||
color: 'info',
|
||||
}
|
||||
@param {string} [iconClass="base"] - The class of the icon. "base" is the default size.
|
||||
@param {string} [iconColor="twitter"]
|
||||
@param {string} [iconClass="icon-default"] - The class of the icon.
|
||||
@param {string} [color="twitter"]
|
||||
*/
|
||||
|
||||
const props = defineProps({
|
||||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "base",
|
||||
default: "icon-default",
|
||||
},
|
||||
iconColor: {
|
||||
color: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "twitter",
|
||||
|
|
@ -27,6 +27,7 @@ const props = defineProps({
|
|||
|
||||
const icon = reactive({
|
||||
id: "",
|
||||
color: props.color || "twitter",
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
|
|
@ -36,10 +37,11 @@ onMounted(() => {
|
|||
<template>
|
||||
<span :id="icon.id" class="sr-only">{{ $t("icons_twitter_desc") }}</span>
|
||||
<svg
|
||||
:data-color="icon.color"
|
||||
data-svg="twitter"
|
||||
role="img"
|
||||
:aria-labelledby="icon.id"
|
||||
:class="['icon-svg', props.iconClass, props.iconColor]"
|
||||
:class="[props.iconClass, icon.color, 'fill']"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
|
|
|
|||
|
|
@ -1,34 +1,40 @@
|
|||
<script setup>
|
||||
import { defineProps, reactive } from "vue";
|
||||
/**
|
||||
@name Icons/Wire.vue
|
||||
@description This component is a svg icon representing wire.
|
||||
@example
|
||||
{
|
||||
iconColor: 'info',
|
||||
color: 'info',
|
||||
}
|
||||
@param {string} [iconClass="base"] - The class of the icon. "base" is the default size.
|
||||
@param {string} [iconColor="info"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
|
||||
@param {string} [iconClass="icon-default"] - The class of the icon.
|
||||
@param {string} [color="green"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, green, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
|
||||
*/
|
||||
|
||||
const props = defineProps({
|
||||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "base",
|
||||
default: "icon-default",
|
||||
},
|
||||
iconColor: {
|
||||
color: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "info",
|
||||
default: "green",
|
||||
},
|
||||
});
|
||||
|
||||
const icon = reactive({
|
||||
color: props.color || "green",
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<svg
|
||||
:data-color="icon.color"
|
||||
data-svg="wire"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
:class="['icon-svg', props.iconClass, props.iconColor]"
|
||||
:class="[props.iconClass, icon.color, 'fill']"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 448 512"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -74,7 +74,7 @@ const unmatch = {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<Grid data-is="list-details">
|
||||
<Grid>
|
||||
<Filter
|
||||
v-if="props.filters.length"
|
||||
@filter="(v) => (data.format = v)"
|
||||
|
|
@ -84,7 +84,11 @@ const unmatch = {
|
|||
<div v-if="!data.format.length" class="layout-unmatch">
|
||||
<Text v-bind="unmatch" />
|
||||
</div>
|
||||
<ul v-if="data.format.length" :class="['list-details-container']">
|
||||
<ul
|
||||
data-is="list-details"
|
||||
v-if="data.format.length"
|
||||
:class="['list-details-container']"
|
||||
>
|
||||
<li
|
||||
v-for="(item, id) in data.format"
|
||||
:class="[
|
||||
|
|
|
|||
|
|
@ -84,7 +84,7 @@ onMounted(() => {
|
|||
:role="props.type === 'success' ? 'status' : 'alert'"
|
||||
:aria-description="$t('dashboard_feedback_alert_desc')"
|
||||
>
|
||||
<div :class="[props.type, 'feedback-alert-wrap']">
|
||||
<div :class="[props.type, 'feedback-alert-wrap bg-el']">
|
||||
<div class="feedback-alert-header">
|
||||
<h5 class="feedback-alert-title">
|
||||
{{ $t(props.title, props.title) }}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<script setup>
|
||||
import { defineProps, reactive, onMounted, ref } from "vue";
|
||||
import Box from "@components/Icons/Box.vue";
|
||||
import Carton from "@components/Icons/Carton.vue";
|
||||
import Core from "@components/Icons/Core.vue";
|
||||
|
|
@ -31,9 +32,7 @@ import Trash from "@components/Icons/Trash.vue";
|
|||
import Lock from "@components/Icons/Lock.vue";
|
||||
import Search from "@components/Icons/Search.vue";
|
||||
|
||||
import { computed } from "vue";
|
||||
|
||||
/**
|
||||
/**
|
||||
@name Widget/Icons.vue
|
||||
@description This component is a wrapper that contains all the icons available in the application (Icons folder).
|
||||
This component is used to display the icon based on the icon name.
|
||||
|
|
@ -42,12 +41,12 @@ import { computed } from "vue";
|
|||
{
|
||||
iconName: 'box',
|
||||
iconClass: 'base',
|
||||
iconColor: 'amber',
|
||||
color: 'amber',
|
||||
}
|
||||
@param {string} iconName - The name of the icon to display. The icon name is the name of the file without the extension on lowercase.
|
||||
@param {string} [iconType="default"] - The type of the icon between default and stat. Default is used for regular icons, stat is used for icons inside a stat widget.
|
||||
@param {string} [iconClass="base"] - Class to apply to the icon. In case the icon is related to a widget, the widget will set the right class automatically.
|
||||
@param {string} [iconColor="info"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
|
||||
@param {string} [color=""] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
|
||||
@param {boolean} [isStick=false] - If true, the icon will be stick to the top right of the parent container.
|
||||
*/
|
||||
|
||||
const props = defineProps({
|
||||
|
|
@ -55,199 +54,193 @@ const props = defineProps({
|
|||
type: String,
|
||||
required: true,
|
||||
},
|
||||
iconType: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "default",
|
||||
},
|
||||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "base",
|
||||
default: "",
|
||||
},
|
||||
iconColor: {
|
||||
color: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "info",
|
||||
default: "",
|
||||
},
|
||||
isStick: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
const tag = computed(() => {
|
||||
if (props.iconType === "stat") return "div";
|
||||
return "template";
|
||||
const icon = reactive({
|
||||
color: props.color,
|
||||
class: props.iconClass,
|
||||
});
|
||||
|
||||
const containerClass = computed(() => {
|
||||
if (props.iconType === "stat") return "stat-svg-container";
|
||||
return "";
|
||||
});
|
||||
const iconEl = ref();
|
||||
|
||||
const iconColor = computed(() => {
|
||||
if (props.iconType === "stat") return "white";
|
||||
return props.iconColor;
|
||||
});
|
||||
|
||||
const iconClass = computed(() => {
|
||||
if (props.iconType === "stat") return "stat-svg";
|
||||
return props.iconClass;
|
||||
onMounted(() => {
|
||||
icon.class =
|
||||
props.iconClass || iconEl.value.closest("[data-is]")
|
||||
? `icon-${iconEl.value.closest("[data-is]").getAttribute("data-is")}`
|
||||
: "icon-default";
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div :class="[containerClass, props.iconColor, props.iconClass]">
|
||||
<div ref="iconEl" :class="[props.isStick ? 'stick' : '', 'icon-container']">
|
||||
<Box
|
||||
v-if="props.iconName === 'box'"
|
||||
:iconClass="iconClass"
|
||||
:iconColor="iconColor"
|
||||
:iconClass="icon.class"
|
||||
:color="props.color"
|
||||
/>
|
||||
<Carton
|
||||
v-if="props.iconName === 'carton'"
|
||||
:iconClass="iconClass"
|
||||
:iconColor="iconColor"
|
||||
:iconClass="icon.class"
|
||||
:color="props.color"
|
||||
/>
|
||||
<Core
|
||||
v-if="props.iconName === 'core'"
|
||||
:iconClass="iconClass"
|
||||
:iconColor="iconColor"
|
||||
:iconClass="icon.class"
|
||||
:color="props.color"
|
||||
/>
|
||||
<External
|
||||
v-if="props.iconName === 'external'"
|
||||
:iconClass="iconClass"
|
||||
:iconColor="iconColor"
|
||||
:iconClass="icon.class"
|
||||
:color="props.color"
|
||||
/>
|
||||
<Search
|
||||
v-if="props.iconName === 'search'"
|
||||
:iconClass="iconClass"
|
||||
:iconColor="iconColor"
|
||||
:iconClass="icon.class"
|
||||
:color="props.color"
|
||||
/>
|
||||
<Trash
|
||||
v-if="props.iconName === 'trash'"
|
||||
:iconClass="iconClass"
|
||||
:iconColor="iconColor"
|
||||
:iconClass="icon.class"
|
||||
:color="props.color"
|
||||
/>
|
||||
<Lock
|
||||
v-if="props.iconName === 'lock'"
|
||||
:iconClass="iconClass"
|
||||
:iconColor="iconColor"
|
||||
:iconClass="icon.class"
|
||||
:color="props.color"
|
||||
/>
|
||||
<Crown
|
||||
v-if="props.iconName === 'crown'"
|
||||
:iconClass="iconClass"
|
||||
:iconColor="iconColor"
|
||||
:iconClass="icon.class"
|
||||
:color="props.color"
|
||||
/>
|
||||
<Discord
|
||||
v-if="props.iconName === 'discord'"
|
||||
:iconClass="iconClass"
|
||||
:iconColor="iconColor"
|
||||
:iconClass="icon.class"
|
||||
:color="props.color"
|
||||
/>
|
||||
<Disk
|
||||
v-if="props.iconName === 'disk'"
|
||||
:iconClass="iconClass"
|
||||
:iconColor="iconColor"
|
||||
:iconClass="icon.class"
|
||||
:color="props.color"
|
||||
/>
|
||||
<Disks
|
||||
v-if="props.iconName === 'disks'"
|
||||
:iconClass="iconClass"
|
||||
:iconColor="iconColor"
|
||||
:iconClass="icon.class"
|
||||
:color="props.color"
|
||||
/>
|
||||
<Globe
|
||||
v-if="props.iconName === 'globe'"
|
||||
:iconClass="iconClass"
|
||||
:iconColor="iconColor"
|
||||
:iconClass="icon.class"
|
||||
:color="props.color"
|
||||
/>
|
||||
<Info
|
||||
v-if="props.iconName === 'info'"
|
||||
:iconClass="iconClass"
|
||||
:iconColor="iconColor"
|
||||
:iconClass="icon.class"
|
||||
:color="props.color"
|
||||
/>
|
||||
<Flag
|
||||
v-if="props.iconName === 'flag'"
|
||||
:iconClass="iconClass"
|
||||
:iconColor="iconColor"
|
||||
:iconClass="icon.class"
|
||||
:color="props.color"
|
||||
/>
|
||||
<Gear
|
||||
v-if="props.iconName === 'gear'"
|
||||
:iconClass="iconClass"
|
||||
:iconColor="iconColor"
|
||||
:iconClass="icon.class"
|
||||
:color="props.color"
|
||||
/>
|
||||
<Github
|
||||
v-if="props.iconName === 'github'"
|
||||
:iconClass="iconClass"
|
||||
:iconColor="iconColor"
|
||||
:iconClass="icon.class"
|
||||
:color="props.color"
|
||||
/>
|
||||
<House
|
||||
v-if="props.iconName === 'house'"
|
||||
:iconClass="iconClass"
|
||||
:iconColor="iconColor"
|
||||
:iconClass="icon.class"
|
||||
:color="props.color"
|
||||
/>
|
||||
<List
|
||||
v-if="props.iconName === 'list'"
|
||||
:iconClass="iconClass"
|
||||
:iconColor="iconColor"
|
||||
:iconClass="icon.class"
|
||||
:color="props.color"
|
||||
/>
|
||||
<Key
|
||||
v-if="props.iconName === 'key'"
|
||||
:iconClass="iconClass"
|
||||
:iconColor="iconColor"
|
||||
:iconClass="icon.class"
|
||||
:color="props.color"
|
||||
/>
|
||||
<Linkedin
|
||||
v-if="props.iconName === 'linkedin'"
|
||||
:iconClass="iconClass"
|
||||
:iconColor="iconColor"
|
||||
:iconClass="icon.class"
|
||||
:color="props.color"
|
||||
/>
|
||||
<Plus
|
||||
v-if="props.iconName === 'plus'"
|
||||
:iconClass="iconClass"
|
||||
:iconColor="iconColor"
|
||||
:iconClass="icon.class"
|
||||
:color="props.color"
|
||||
/>
|
||||
<Puzzle
|
||||
v-if="props.iconName === 'puzzle'"
|
||||
:iconClass="iconClass"
|
||||
:iconColor="iconColor"
|
||||
:iconClass="icon.class"
|
||||
:color="props.color"
|
||||
/>
|
||||
<Settings
|
||||
v-if="props.iconName === 'settings'"
|
||||
:iconClass="iconClass"
|
||||
:iconColor="iconColor"
|
||||
:iconClass="icon.class"
|
||||
:color="props.color"
|
||||
/>
|
||||
<Task
|
||||
v-if="props.iconName === 'task'"
|
||||
:iconClass="iconClass"
|
||||
:iconColor="iconColor"
|
||||
:iconClass="icon.class"
|
||||
:color="props.color"
|
||||
/>
|
||||
<Trespass
|
||||
v-if="props.iconName === 'trespass'"
|
||||
:iconClass="iconClass"
|
||||
:iconColor="iconColor"
|
||||
:iconClass="icon.class"
|
||||
:color="props.color"
|
||||
/>
|
||||
<Check
|
||||
v-if="props.iconName === 'check'"
|
||||
:iconClass="iconClass"
|
||||
:iconColor="iconColor"
|
||||
:iconClass="icon.class"
|
||||
:color="props.color"
|
||||
/>
|
||||
<Cross
|
||||
v-if="props.iconName === 'cross'"
|
||||
:iconClass="iconClass"
|
||||
:iconColor="iconColor"
|
||||
:iconClass="icon.class"
|
||||
:color="props.color"
|
||||
/>
|
||||
<Twitter
|
||||
v-if="props.iconName === 'twitter'"
|
||||
:iconClass="iconClass"
|
||||
:iconColor="iconColor"
|
||||
:iconClass="icon.class"
|
||||
:color="props.color"
|
||||
/>
|
||||
<Wire
|
||||
v-if="props.iconName === 'wire'"
|
||||
:iconClass="iconClass"
|
||||
:iconColor="iconColor"
|
||||
:iconClass="icon.class"
|
||||
:color="props.color"
|
||||
/>
|
||||
<Funnel
|
||||
v-if="props.iconName === 'funnel'"
|
||||
:iconClass="iconClass"
|
||||
:iconColor="iconColor"
|
||||
:iconClass="icon.class"
|
||||
:color="props.color"
|
||||
/>
|
||||
<Redirect
|
||||
v-if="props.iconName === 'redirect'"
|
||||
:iconClass="iconClass"
|
||||
:iconColor="iconColor"
|
||||
:iconClass="icon.class"
|
||||
:color="props.color"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -17,12 +17,10 @@ import Icons from "@components/Widget/Icons.vue";
|
|||
}
|
||||
@param {string} text - Content of the popover. Can be a translation key or by default raw text.
|
||||
@param {string} [href="#"] - Link of the anchor. By default it is a # link.
|
||||
@param {string} iconName - Name in lowercase of icons store on /Icons. If falsy value, no icon displayed.
|
||||
@param {string} iconColor - Color of the icon between tailwind colors
|
||||
@param {string} color - Color of the icon between tailwind colors
|
||||
@param {object} [attrs={}] - List of attributs to add to the text.
|
||||
@param {string} [tag="a"] - By default it is a anchor tag, but we can use other tag like div in case of popover on another anchor
|
||||
@param {string} [popoverClass=""] - Additional class for the popover container
|
||||
@param {string} [svgSize="base"] - Determine svg size between sm, md, base and lg.
|
||||
@param {string} [iconClass="icon-default"]
|
||||
@param {string|number} [tabId=contentIndex] - The tabindex of the field, by default it is the contentIndex
|
||||
*/
|
||||
|
||||
|
|
@ -40,7 +38,7 @@ const props = defineProps({
|
|||
type: String,
|
||||
required: false,
|
||||
},
|
||||
iconColor: {
|
||||
color: {
|
||||
type: String,
|
||||
required: false,
|
||||
},
|
||||
|
|
@ -50,15 +48,10 @@ const props = defineProps({
|
|||
required: false,
|
||||
default: "a",
|
||||
},
|
||||
popoverClass: {
|
||||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "",
|
||||
},
|
||||
svgSize: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "base",
|
||||
default: "icon-default",
|
||||
},
|
||||
tabId: {
|
||||
type: String,
|
||||
|
|
@ -72,6 +65,7 @@ const popover = reactive({
|
|||
id: "",
|
||||
isOpen: false,
|
||||
isHover: false,
|
||||
color: "",
|
||||
});
|
||||
|
||||
const popoverContainer = ref();
|
||||
|
|
@ -142,6 +136,7 @@ watch(popover, () => {
|
|||
|
||||
onMounted(() => {
|
||||
popover.id = useUUID();
|
||||
|
||||
// Remove href if tag is not an anchor
|
||||
if (props.tag !== "a") {
|
||||
popoverBtn.value.removeAttribute("href");
|
||||
|
|
@ -175,13 +170,9 @@ onMounted(() => {
|
|||
@focusout="hidePopover()"
|
||||
@pointerover="showPopover()"
|
||||
@pointerleave="hidePopover()"
|
||||
:class="['popover-btn', props.popoverClass]"
|
||||
:class="['popover-btn']"
|
||||
>
|
||||
<Icons
|
||||
:iconClass="`popover-svg ${props.svgSize}`"
|
||||
:iconName="props.iconName"
|
||||
:iconColor="props.iconColor"
|
||||
/>
|
||||
<Icons :iconName="props.iconName" />
|
||||
</component>
|
||||
<div
|
||||
ref="popoverContainer"
|
||||
|
|
@ -189,7 +180,7 @@ onMounted(() => {
|
|||
role="status"
|
||||
:aria-hidden="popover.isOpen ? 'false' : 'true'"
|
||||
:class="[
|
||||
'popover-container',
|
||||
'popover-container bg-el',
|
||||
props.iconColor,
|
||||
popover.isOpen ? 'open' : 'close',
|
||||
]"
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@ const props = defineProps({
|
|||
});
|
||||
</script>
|
||||
<template>
|
||||
<Container :columns="{ pc: 12, tablet: 12, mobile: 12 }">
|
||||
<Container data-is="stat" :columns="{ pc: 12, tablet: 12, mobile: 12 }">
|
||||
<!-- text -->
|
||||
<div
|
||||
:class="[
|
||||
|
|
@ -74,20 +74,14 @@ const props = defineProps({
|
|||
props.iconName ? 'is-icon' : 'no-icon',
|
||||
]"
|
||||
>
|
||||
<Title :tag="'h3'" type="stat" :title="props.title" />
|
||||
<Text :text="props.stat" :textClass="'text-stat'" />
|
||||
<Title :tag="'h3'" :title="props.title" />
|
||||
<Text :text="props.stat" />
|
||||
<Subtitle
|
||||
type="stat"
|
||||
v-if="props.subtitle"
|
||||
:subtitle="props.subtitle"
|
||||
:subtitleColor="props.subtitleColor"
|
||||
:color="props.subtitleColor"
|
||||
/>
|
||||
</div>
|
||||
<Icons
|
||||
v-if="props.iconName"
|
||||
:iconName="props.iconName"
|
||||
:iconColor="props.iconColor"
|
||||
:iconType="'stat'"
|
||||
/>
|
||||
<Icons v-if="props.iconName" :iconName="props.iconName" :isStick="true" />
|
||||
</Container>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -143,16 +143,17 @@ const table = reactive({
|
|||
|
||||
const unmatch = {
|
||||
text: "dashboard_no_match",
|
||||
textClass: "text-unmatch",
|
||||
icons: {
|
||||
iconName: "search",
|
||||
iconColor: "info",
|
||||
color: "info",
|
||||
},
|
||||
};
|
||||
|
||||
function setUnmatchWidth() {
|
||||
const value = tableBody.value.closest("[data-grid-layout]").clientWidth - 60;
|
||||
unmatchWidth.value = `${value}px`;
|
||||
try {
|
||||
const value = tableBody.value.closest("[data-is='card']").clientWidth - 60;
|
||||
unmatchWidth.value = `${value}px`;
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
function getOverflow() {
|
||||
|
|
@ -196,6 +197,7 @@ onMounted(() => {
|
|||
>
|
||||
<span :id="`${table.id}-title`" class="sr-only"></span>
|
||||
<table
|
||||
data-is="table"
|
||||
:class="['table', props.minWidth, props.tableClass]"
|
||||
:aria-labelledby="`${table.id}-title`"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
<script setup>
|
||||
import Icons from "@components/Widget/Icons.vue";
|
||||
import Flex from "@components/Widget/Flex.vue";
|
||||
import { onMounted, reactive, ref } from "vue";
|
||||
|
||||
/**
|
||||
/**
|
||||
@name Widget/Text.vue
|
||||
@description This component is used for regular paragraph.
|
||||
@example
|
||||
|
|
@ -12,7 +13,8 @@ import Flex from "@components/Widget/Flex.vue";
|
|||
attrs: { id: "paragraph" },
|
||||
}
|
||||
@param {string} text - The text value. Can be a translation key or by default raw text.
|
||||
@param {string} [textClass="text-content"] - Style of text. Can be replace by any class starting by 'text-' like 'text-stat'.
|
||||
@param {string} [textClass=""] - Style of text. Can be replace by any class starting by 'text-' like 'text-stat'.
|
||||
@param {string} [color=""] - The color of the text between error, success, warning, info or tailwind color
|
||||
@param {string} [tag="p"] - The tag of the text. Can be p, span, div, h1, h2, h3, h4, h5, h6
|
||||
@param {boolean|object} [icons=false] - The popover to display with the text. Check Popover component for more details.
|
||||
@param {object} [attrs={}] - List of attributs to add to the text.
|
||||
|
|
@ -26,7 +28,12 @@ const props = defineProps({
|
|||
textClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "text-content",
|
||||
default: "",
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "",
|
||||
},
|
||||
tag: {
|
||||
type: String,
|
||||
|
|
@ -44,6 +51,24 @@ const props = defineProps({
|
|||
default: {},
|
||||
},
|
||||
});
|
||||
|
||||
// Add or remove margin bottom
|
||||
const text = reactive({
|
||||
class: "",
|
||||
});
|
||||
|
||||
const textEl = ref(null);
|
||||
const textIconEl = ref(null);
|
||||
|
||||
onMounted(() => {
|
||||
// Check if next sibling is a
|
||||
text.class =
|
||||
props.textClass || (textEl.value && textEl.value.closest("[data-is]"))
|
||||
? `text-${textEl.value.closest("[data-is]").getAttribute("data-is")}`
|
||||
: textIconEl.value && textIconEl.value.closest("[data-is]")
|
||||
? `text-${textIconEl.value.closest("[data-is]").getAttribute("data-is")}`
|
||||
: "text-content";
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -51,7 +76,8 @@ const props = defineProps({
|
|||
v-if="!props.icons"
|
||||
:is="props.tag"
|
||||
v-bind="props.attrs"
|
||||
:class="[props.textClass]"
|
||||
ref="textEl"
|
||||
:class="[text.class, props.color]"
|
||||
>
|
||||
{{ $t(props.text, props.text) }}
|
||||
</component>
|
||||
|
|
@ -59,9 +85,10 @@ const props = defineProps({
|
|||
<Flex :flexClass="'justify-center'" v-if="props.icons">
|
||||
<Icons v-if="props.icons" v-bind="props.icons" />
|
||||
<component
|
||||
ref="textIconEl"
|
||||
:is="props.tag"
|
||||
v-bind="props.attrs"
|
||||
:class="[props.textClass, 'ml-2']"
|
||||
:class="[text.class, props.color, 'ml-2']"
|
||||
>
|
||||
{{ $t(props.text, props.text) }}
|
||||
</component>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
data-server-flash='[{"type" : "success", "title" : "success", "message" : "Success feedback"}, {"type" : "error", "title" : "error", "message" : "Error feedback"}, {"type" : "warning", "title" : "warning", "message" : "Warning feedback"}, {"type" : "info", "title" : "info", "message" : "Info feedback"}]'>
|
||||
</div>
|
||||
<div class="hidden"
|
||||
data-server-builder='[{"type":"card","link":"https://panel.bunkerweb.io/?utm_campaign=self&utm_source=ui#pro","containerColumns":{"pc":4,"tablet":6,"mobile":12},"widgets":[{"type":"Stat","data":{"title":"home_version","subtitle":"home_upgrade_to_pro","subtitleColor":"warning","stat":"home_free","iconName":"key","iconColor":"green"}}]},{"type":"card","link":"https://github.com/bunkerity/bunkerweb","containerColumns":{"pc":4,"tablet":6,"mobile":12},"widgets":[{"type":"Stat","data":{"title":"home_version_number","subtitle":"home_update_available","subtitleColor":"warning","stat":"1.5.8","iconName":"wire","iconColor":"teal"}}]},{"type":"card","link":"/instances","containerColumns":{"pc":4,"tablet":6,"mobile":12},"widgets":[{"type":"Stat","data":{"title":"home_instances","subtitle":"home_total_number","subtitleColor":"info","stat":1,"iconName":"box","iconColor":"dark"}}]},{"type":"card","link":"/services","containerColumns":{"pc":4,"tablet":6,"mobile":12},"widgets":[{"type":"Stat","data":{"title":"home_services","subtitle":"home_all_methods_included","subtitleColor":"info","stat":2,"iconName":"disk","iconColor":"orange"}}]},{"type":"card","link":"/plugins","containerColumns":{"pc":4,"tablet":6,"mobile":12},"widgets":[{"type":"Stat","data":{"title":"home_plugins","subtitle":"home_no_error","subtitleColor":"success","stat":"42","iconName":"puzzle","iconColor":"yellow"}}]}]'>
|
||||
data-server-builder='[{"type":"card","link":"https://panel.bunkerweb.io/?utm_campaign=self&utm_source=ui#pro","containerColumns":{"pc":4,"tablet":6,"mobile":12},"widgets":[{"type":"Stat","data":{"title":"home_version","subtitle":"home_upgrade_to_pro","subtitleColor":"warning","stat":"home_free","iconName":"key"}}]},{"type":"card","link":"https://github.com/bunkerity/bunkerweb","containerColumns":{"pc":4,"tablet":6,"mobile":12},"widgets":[{"type":"Stat","data":{"title":"home_version_number","subtitle":"home_update_available","subtitleColor":"warning","stat":"1.5.8","iconName":"wire"}}]},{"type":"card","link":"/instances","containerColumns":{"pc":4,"tablet":6,"mobile":12},"widgets":[{"type":"Stat","data":{"title":"home_instances","subtitle":"home_total_number","subtitleColor":"info","stat":1,"iconName":"box"}}]},{"type":"card","link":"/services","containerColumns":{"pc":4,"tablet":6,"mobile":12},"widgets":[{"type":"Stat","data":{"title":"home_services","subtitle":"home_all_methods_included","subtitleColor":"info","stat":2,"iconName":"disk"}}]},{"type":"card","link":"/plugins","containerColumns":{"pc":4,"tablet":6,"mobile":12},"widgets":[{"type":"Stat","data":{"title":"home_plugins","subtitle":"home_no_error","subtitleColor":"success","stat":"42","iconName":"puzzle"}}]}]'>
|
||||
</div>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="home.js"></script>
|
||||
|
|
|
|||
|
|
@ -26,7 +26,9 @@ function redirectPlugin() {
|
|||
e.target
|
||||
.closest("[data-plugin-redirect]")
|
||||
.getAttribute("data-plugin-redirect") !== "true" ||
|
||||
!e.target.querySelector('[data-svg="redirect"]')
|
||||
!e.target.querySelector(
|
||||
'[:data-color="icon.color" data-svg="redirect"]'
|
||||
)
|
||||
)
|
||||
return;
|
||||
// Prepare redirect
|
||||
|
|
@ -185,7 +187,6 @@ const builder = [
|
|||
value: "",
|
||||
type: "text",
|
||||
name: "filter-plugin-name",
|
||||
containerClass: "setting",
|
||||
label: "plugins_search",
|
||||
placeholder: "inp_keyword",
|
||||
isClipboard: false,
|
||||
|
|
@ -193,8 +194,6 @@ const builder = [
|
|||
{
|
||||
text: "plugins_search_desc",
|
||||
iconName: "info",
|
||||
iconColor: "info",
|
||||
svgSize: "sm",
|
||||
},
|
||||
],
|
||||
columns: {
|
||||
|
|
@ -217,14 +216,11 @@ const builder = [
|
|||
name: "filter-plugin-type",
|
||||
onlyDown: true,
|
||||
label: "plugins_type",
|
||||
containerClass: "setting",
|
||||
maxBtnChars: 24,
|
||||
popovers: [
|
||||
{
|
||||
text: "plugins_type_desc",
|
||||
iconName: "info",
|
||||
iconColor: "info",
|
||||
svgSize: "sm",
|
||||
},
|
||||
],
|
||||
columns: {
|
||||
|
|
@ -251,7 +247,6 @@ const builder = [
|
|||
{
|
||||
text: "plugins_pro_plugin_desc",
|
||||
iconName: "crown",
|
||||
iconColor: "amber",
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
@ -270,7 +265,6 @@ const builder = [
|
|||
{
|
||||
text: "plugins_redirect_page_desc",
|
||||
iconName: "redirect",
|
||||
iconColor: "blue",
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
@ -302,12 +296,10 @@ const builder = [
|
|||
{
|
||||
text: "plugins_redirect_page_desc",
|
||||
iconName: "redirect",
|
||||
iconColor: "blue",
|
||||
},
|
||||
{
|
||||
text: "plugins_pro_plugin_desc",
|
||||
iconName: "crown",
|
||||
iconColor: "amber",
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
@ -326,12 +318,10 @@ const builder = [
|
|||
{
|
||||
text: "plugins_redirect_page_desc",
|
||||
iconName: "redirect",
|
||||
iconColor: "blue",
|
||||
},
|
||||
{
|
||||
text: "plugins_delete_desc",
|
||||
iconName: "trash",
|
||||
iconColor: "red",
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
@ -350,7 +340,6 @@ const builder = [
|
|||
{
|
||||
text: "plugins_redirect_page_desc",
|
||||
iconName: "redirect",
|
||||
iconColor: "blue",
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
@ -382,7 +371,6 @@ const builder = [
|
|||
{
|
||||
text: "plugins_redirect_page_desc",
|
||||
iconName: "redirect",
|
||||
iconColor: "blue",
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
@ -401,7 +389,6 @@ const builder = [
|
|||
{
|
||||
text: "plugins_redirect_page_desc",
|
||||
iconName: "redirect",
|
||||
iconColor: "blue",
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
@ -433,7 +420,6 @@ const builder = [
|
|||
{
|
||||
text: "plugins_redirect_page_desc",
|
||||
iconName: "redirect",
|
||||
iconColor: "blue",
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
@ -478,7 +464,6 @@ const builder = [
|
|||
{
|
||||
text: "plugins_redirect_page_desc",
|
||||
iconName: "redirect",
|
||||
iconColor: "blue",
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
@ -497,7 +482,6 @@ const builder = [
|
|||
{
|
||||
text: "plugins_redirect_page_desc",
|
||||
iconName: "redirect",
|
||||
iconColor: "blue",
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
@ -516,7 +500,6 @@ const builder = [
|
|||
{
|
||||
text: "plugins_redirect_page_desc",
|
||||
iconName: "redirect",
|
||||
iconColor: "blue",
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
@ -600,7 +583,6 @@ const builder = [
|
|||
{
|
||||
text: "plugins_redirect_page_desc",
|
||||
iconName: "redirect",
|
||||
iconColor: "blue",
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
@ -632,7 +614,6 @@ const builder = [
|
|||
{
|
||||
text: "plugins_redirect_page_desc",
|
||||
iconName: "redirect",
|
||||
iconColor: "blue",
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
@ -716,7 +697,6 @@ const builder = [
|
|||
{
|
||||
text: "plugins_redirect_page_desc",
|
||||
iconName: "redirect",
|
||||
iconColor: "blue",
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
@ -748,7 +728,6 @@ const builder = [
|
|||
{
|
||||
text: "plugins_redirect_page_desc",
|
||||
iconName: "redirect",
|
||||
iconColor: "blue",
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
@ -806,7 +785,6 @@ const builder = [
|
|||
{
|
||||
text: "plugins_redirect_page_desc",
|
||||
iconName: "redirect",
|
||||
iconColor: "blue",
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -3173,7 +3173,7 @@ def format_setting(
|
|||
Format a setting in ordert to be used with form builder.
|
||||
"""
|
||||
# add zindex for container
|
||||
setting_value["containerClass"] = f"z-{total_settings - loop_id} setting"
|
||||
setting_value["containerClass"] = f"z-{total_settings - loop_id}"
|
||||
|
||||
# regex by pattern
|
||||
setting_value["pattern"] = setting_value.get("regex", "")
|
||||
|
|
|
|||
87
vuejs/tests/home.py
Normal file
87
vuejs/tests/home.py
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
stats = [
|
||||
{
|
||||
"type": "card",
|
||||
"link": "https://panel.bunkerweb.io/?utm_campaign=self&utm_source=ui#pro",
|
||||
"containerColumns": {"pc": 4, "tablet": 6, "mobile": 12},
|
||||
"widgets": [
|
||||
{
|
||||
"type": "Stat",
|
||||
"data": {
|
||||
"title": "home_version",
|
||||
"subtitle": "home_upgrade_to_pro",
|
||||
"subtitleColor": "warning",
|
||||
"stat": "home_free",
|
||||
"iconName": "key",
|
||||
},
|
||||
}
|
||||
],
|
||||
},
|
||||
{
|
||||
"type": "card",
|
||||
"link": "https://github.com/bunkerity/bunkerweb",
|
||||
"containerColumns": {"pc": 4, "tablet": 6, "mobile": 12},
|
||||
"widgets": [
|
||||
{
|
||||
"type": "Stat",
|
||||
"data": {
|
||||
"title": "home_version_number",
|
||||
"subtitle": "home_update_available",
|
||||
"subtitleColor": "warning",
|
||||
"stat": "1.5.8",
|
||||
"iconName": "wire",
|
||||
},
|
||||
}
|
||||
],
|
||||
},
|
||||
{
|
||||
"type": "card",
|
||||
"link": "/instances",
|
||||
"containerColumns": {"pc": 4, "tablet": 6, "mobile": 12},
|
||||
"widgets": [
|
||||
{
|
||||
"type": "Stat",
|
||||
"data": {
|
||||
"title": "home_instances",
|
||||
"subtitle": "home_total_number",
|
||||
"subtitleColor": "info",
|
||||
"stat": 1,
|
||||
"iconName": "box",
|
||||
},
|
||||
}
|
||||
],
|
||||
},
|
||||
{
|
||||
"type": "card",
|
||||
"link": "/services",
|
||||
"containerColumns": {"pc": 4, "tablet": 6, "mobile": 12},
|
||||
"widgets": [
|
||||
{
|
||||
"type": "Stat",
|
||||
"data": {
|
||||
"title": "home_services",
|
||||
"subtitle": "home_all_methods_included",
|
||||
"subtitleColor": "info",
|
||||
"stat": 2,
|
||||
"iconName": "disk",
|
||||
},
|
||||
}
|
||||
],
|
||||
},
|
||||
{
|
||||
"type": "card",
|
||||
"link": "/plugins",
|
||||
"containerColumns": {"pc": 4, "tablet": 6, "mobile": 12},
|
||||
"widgets": [
|
||||
{
|
||||
"type": "Stat",
|
||||
"data": {
|
||||
"title": "home_plugins",
|
||||
"subtitle": "home_no_error",
|
||||
"subtitleColor": "success",
|
||||
"stat": "42",
|
||||
"iconName": "puzzle",
|
||||
},
|
||||
}
|
||||
],
|
||||
},
|
||||
]
|
||||
|
|
@ -3041,7 +3041,6 @@ def plugins_builder(plugins, data={}):
|
|||
{
|
||||
"text": "plugins_redirect_page_desc",
|
||||
"iconName": "redirect",
|
||||
"iconColor": "blue",
|
||||
}
|
||||
)
|
||||
|
||||
|
|
@ -3050,7 +3049,6 @@ def plugins_builder(plugins, data={}):
|
|||
{
|
||||
"text": "plugins_delete_desc",
|
||||
"iconName": "trash",
|
||||
"iconColor": "red",
|
||||
}
|
||||
)
|
||||
|
||||
|
|
@ -3059,7 +3057,6 @@ def plugins_builder(plugins, data={}):
|
|||
{
|
||||
"text": "plugins_pro_plugin_desc",
|
||||
"iconName": "crown",
|
||||
"iconColor": "amber",
|
||||
}
|
||||
)
|
||||
plugins_details.append(plugin_detail)
|
||||
|
|
@ -3076,7 +3073,6 @@ def plugins_builder(plugins, data={}):
|
|||
"value": "",
|
||||
"type": "text",
|
||||
"name": "filter-plugin-name",
|
||||
"containerClass": "setting",
|
||||
"label": "plugins_search",
|
||||
"placeholder": "inp_keyword",
|
||||
"isClipboard": False,
|
||||
|
|
@ -3084,8 +3080,6 @@ def plugins_builder(plugins, data={}):
|
|||
{
|
||||
"text": "plugins_search_desc",
|
||||
"iconName": "info",
|
||||
"iconColor": "info",
|
||||
"svgSize": "sm",
|
||||
},
|
||||
],
|
||||
"columns": {"pc": 3, "tablet": 4, "mobile": 12},
|
||||
|
|
@ -3104,14 +3098,11 @@ def plugins_builder(plugins, data={}):
|
|||
"name": "filter-plugin-type",
|
||||
"onlyDown": True,
|
||||
"label": "plugins_type",
|
||||
"containerClass": "setting",
|
||||
"maxBtnChars": 24,
|
||||
"popovers": [
|
||||
{
|
||||
"text": "plugins_type_desc",
|
||||
"iconName": "info",
|
||||
"iconColor": "info",
|
||||
"svgSize": "sm",
|
||||
},
|
||||
],
|
||||
"columns": {"pc": 3, "tablet": 4, "mobile": 12},
|
||||
|
|
|
|||
|
|
@ -84,16 +84,13 @@
|
|||
"value": "",
|
||||
"type": "text",
|
||||
"name": "filter-plugin-name",
|
||||
"containerClass": "setting",
|
||||
"label": "plugins_search",
|
||||
"placeholder": "inp_keyword",
|
||||
"isClipboard": false,
|
||||
"popovers": [
|
||||
{
|
||||
"text": "plugins_search_desc",
|
||||
"iconName": "info",
|
||||
"iconColor": "info",
|
||||
"svgSize": "sm"
|
||||
"iconName": "info"
|
||||
}
|
||||
],
|
||||
"columns": {
|
||||
|
|
@ -123,14 +120,11 @@
|
|||
"name": "filter-plugin-type",
|
||||
"onlyDown": true,
|
||||
"label": "plugins_type",
|
||||
"containerClass": "setting",
|
||||
"maxBtnChars": 24,
|
||||
"popovers": [
|
||||
{
|
||||
"text": "plugins_type_desc",
|
||||
"iconName": "info",
|
||||
"iconColor": "info",
|
||||
"svgSize": "sm"
|
||||
"iconName": "info"
|
||||
}
|
||||
],
|
||||
"columns": {
|
||||
|
|
@ -156,8 +150,7 @@
|
|||
"popovers": [
|
||||
{
|
||||
"text": "plugins_pro_plugin_desc",
|
||||
"iconName": "crown",
|
||||
"iconColor": "amber"
|
||||
"iconName": "crown"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -175,8 +168,7 @@
|
|||
"popovers": [
|
||||
{
|
||||
"text": "plugins_redirect_page_desc",
|
||||
"iconName": "redirect",
|
||||
"iconColor": "blue"
|
||||
"iconName": "redirect"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -207,13 +199,11 @@
|
|||
"popovers": [
|
||||
{
|
||||
"text": "plugins_redirect_page_desc",
|
||||
"iconName": "redirect",
|
||||
"iconColor": "blue"
|
||||
"iconName": "redirect"
|
||||
},
|
||||
{
|
||||
"text": "plugins_pro_plugin_desc",
|
||||
"iconName": "crown",
|
||||
"iconColor": "amber"
|
||||
"iconName": "crown"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -231,13 +221,11 @@
|
|||
"popovers": [
|
||||
{
|
||||
"text": "plugins_redirect_page_desc",
|
||||
"iconName": "redirect",
|
||||
"iconColor": "blue"
|
||||
"iconName": "redirect"
|
||||
},
|
||||
{
|
||||
"text": "plugins_delete_desc",
|
||||
"iconName": "trash",
|
||||
"iconColor": "red"
|
||||
"iconName": "trash"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -255,8 +243,7 @@
|
|||
"popovers": [
|
||||
{
|
||||
"text": "plugins_redirect_page_desc",
|
||||
"iconName": "redirect",
|
||||
"iconColor": "blue"
|
||||
"iconName": "redirect"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -287,8 +274,7 @@
|
|||
"popovers": [
|
||||
{
|
||||
"text": "plugins_redirect_page_desc",
|
||||
"iconName": "redirect",
|
||||
"iconColor": "blue"
|
||||
"iconName": "redirect"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -306,8 +292,7 @@
|
|||
"popovers": [
|
||||
{
|
||||
"text": "plugins_redirect_page_desc",
|
||||
"iconName": "redirect",
|
||||
"iconColor": "blue"
|
||||
"iconName": "redirect"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -338,8 +323,7 @@
|
|||
"popovers": [
|
||||
{
|
||||
"text": "plugins_redirect_page_desc",
|
||||
"iconName": "redirect",
|
||||
"iconColor": "blue"
|
||||
"iconName": "redirect"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -383,8 +367,7 @@
|
|||
"popovers": [
|
||||
{
|
||||
"text": "plugins_redirect_page_desc",
|
||||
"iconName": "redirect",
|
||||
"iconColor": "blue"
|
||||
"iconName": "redirect"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -402,8 +385,7 @@
|
|||
"popovers": [
|
||||
{
|
||||
"text": "plugins_redirect_page_desc",
|
||||
"iconName": "redirect",
|
||||
"iconColor": "blue"
|
||||
"iconName": "redirect"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -421,8 +403,7 @@
|
|||
"popovers": [
|
||||
{
|
||||
"text": "plugins_redirect_page_desc",
|
||||
"iconName": "redirect",
|
||||
"iconColor": "blue"
|
||||
"iconName": "redirect"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -505,8 +486,7 @@
|
|||
"popovers": [
|
||||
{
|
||||
"text": "plugins_redirect_page_desc",
|
||||
"iconName": "redirect",
|
||||
"iconColor": "blue"
|
||||
"iconName": "redirect"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -537,8 +517,7 @@
|
|||
"popovers": [
|
||||
{
|
||||
"text": "plugins_redirect_page_desc",
|
||||
"iconName": "redirect",
|
||||
"iconColor": "blue"
|
||||
"iconName": "redirect"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -621,8 +600,7 @@
|
|||
"popovers": [
|
||||
{
|
||||
"text": "plugins_redirect_page_desc",
|
||||
"iconName": "redirect",
|
||||
"iconColor": "blue"
|
||||
"iconName": "redirect"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -653,8 +631,7 @@
|
|||
"popovers": [
|
||||
{
|
||||
"text": "plugins_redirect_page_desc",
|
||||
"iconName": "redirect",
|
||||
"iconColor": "blue"
|
||||
"iconName": "redirect"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -711,8 +688,7 @@
|
|||
"popovers": [
|
||||
{
|
||||
"text": "plugins_redirect_page_desc",
|
||||
"iconName": "redirect",
|
||||
"iconColor": "blue"
|
||||
"iconName": "redirect"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue