failj/ntspi-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added a new component for breadcrumbs and reworked the component for getting icons using sprites

Browse Source
This commit is contained in:
F4ilji
2025-05-15 16:18:39 +05:00
parent f1fd06beb3
commit ace682126e
37 changed files with 6420 additions and 544 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/Navbars/MobileNavbar.vue
+8 -8
View File
@@ -31,7 +31,7 @@
:class="(HAS_ACTIVE_PAGE(section) ? 'text-primary bg-gray-100' : 'text-gray-700')"
type="button"
class="hs-accordion-toggle hs-accordion-active:text-primary w-full text-start flex items-center gap-x-3 py-2 px-2.5 text-sm rounded-lg focus:outline-none" aria-expanded="true" aria-controls="users-accordion">
<BasicIcon class="w-4" name="line" />
<BasicIcon class="w-4 h-4" name="line" />
{{ section.title }}
<svg class="flex-shrink-0 hs-accordion-active:block ms-auto hidden size-4 text-gray-600 group-hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>
<svg class="flex-shrink-0 hs-accordion-active:hidden ms-auto block size-4 text-gray-600 group-hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
@@ -52,14 +52,14 @@
</button>
<div class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300 hidden" role="region" :aria-labelledby="'nav-accordion-' + subSection.slug">
<ul class="pt-2 ps-2">
<li v-for="page in subSection.pages">
<ul class="pt-2">
<li class="mb-1.5" v-for="page in subSection.pages">
<a
:href="(page.is_url) ? page.path : route('page.view', page.path) + '/'"
class="flex items-center gap-x-3 py-2 px-2.5 text-sm rounded-lg hover:bg-gray-[#EFEFEF] focus:outline-none focus:bg-gray-100"
:class="(IS_SAME_ROUTE(page.path) ? 'text-primary bg-white border border-[#E4E4E7]' : 'text-gray-700')"
>
<BasicIcon v-if="page.icon" class="w-4" :name="page.icon" />
<BasicIcon v-if="page.icon" class="w-4 h-4" :name="page.icon" />
{{ page.title }}
</a>
</li>
@@ -75,27 +75,27 @@
<Link :href="route('client.schedule.index')"
:class="(IS_SAME_ROUTE(route('client.schedule.index')) ? 'text-primary bg-white border border-[#E4E4E7]' : 'text-gray-700')"
class="flex items-center gap-x-3 py-2 px-2.5 text-sm rounded-lg hover:bg-gray-100 dark:hover:bg-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-300" href="#">
<BasicIcon class="w-4" name="schedule" />
<BasicIcon class="w-4 h-4" name="schedule" />
Расписание
</Link>
</li>
<!-- <li>-->
<!-- <a class="flex items-center gap-x-3 py-2 px-2.5 text-sm text-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-300" href="#">-->
<!-- <BasicIcon class="w-4" name="eye" />-->
<!-- <BasicIcon class="w-4 h-4" name="eye" />-->
<!-- Режим для слабовидящих-->
<!-- </a>-->
<!-- </li>-->
<li>
<button aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-full-screen-modal-below-md" data-hs-overlay="#open-search-modal"
class="flex items-center gap-x-3 py-2 px-2.5 text-sm text-gray-700 rounded-lg hover:bg-gray-100 w-full">
<BasicIcon class="w-4" name="search" />
<BasicIcon class="w-4 h-4" name="search" />
Поиск
</button>
</li>
<li>
<button aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-full-screen-modal-below-md" data-hs-overlay="#open-search-sveden-modal"
class="flex items-center gap-x-3 py-2 px-2.5 text-sm text-gray-700 rounded-lg hover:bg-gray-100 w-full">
<BasicIcon class="w-4" name="search" />
<BasicIcon class="w-4 h-4" name="search" />
Поиск по СОО
</button>
</li>
resources/js/Pages/AdminPanel.zip
BIN
View File
Binary file not shown.
resources/js/Pages/Client/AcademicJournals/Index.vue
+12 -9
View File
@@ -16,10 +16,15 @@ import BasicListFilter from "@/componentss/shared/filter/BasicListFilter.vue";
import AdditionalProgramTitle
from "@/componentss/features/additionalEducationPrograms/components/AdditionalProgramTitle.vue";
import FormEducationalFilter from "@/componentss/shared/filter/filters/FormEducationalFilter.vue";
import BreadcrumbsItem from "@/componentss/shared/Breadcrumbs/BreadcrumbsItem.vue";
import BasicIcon from "@/componentss/ui/icons/BasicIcon.vue";
import BaseBreadcrumbs from "@/componentss/shared/Breadcrumbs/BaseBreadcrumbs.vue";
export default {
name: "Index",
components: {
BaseBreadcrumbs,
BasicIcon, BreadcrumbsItem,
FormEducationalFilter,
AdditionalProgramTitle,
BasicListFilter,
@@ -47,13 +52,10 @@ export default {
},
seo: {
type: Object,
}
},
methods: {
},
mounted() {
},
breadcrumbs: {
type: Object
}
}
};
</script>
@@ -70,8 +72,9 @@ export default {
<div class="max-w-2xl text-center mx-auto mb-10 lg:mb-14">
<h2 class="text-2xl font-bold md:text-4xl md:leading-tight dark:text-white">Научные периодические издания НТГСПИ</h2>
</div>
<!-- Grid -->
<AcademicJournalsListBreadcrumbs />
<BaseBreadcrumbs :breadcrumbs="breadcrumbs">
<BreadcrumbsItem title="Научные журналы" :url="route('client.academicJournals.index')" />
</BaseBreadcrumbs>
<div class="grid sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-3 gap-3 sm:gap-6">
<template v-for="journal in journals.data">
<Link :href="route('client.academicJournals.show', journal.slug)" class="group flex items-center bg-white border shadow-sm rounded-xl hover:shadow-md focus:outline-none focus:shadow-md transition" >
resources/js/Pages/Client/AcademicJournals/Show.vue
+13 -14
View File
@@ -18,10 +18,16 @@ import ProgramTitle from "@/componentss/features/educationalPrograms/components/
import ProgramListBreadcrumbs from "@/componentss/features/educationalPrograms/components/ProgramListBreadcrumbs.vue";
import FormEducationalFilter from "@/componentss/shared/filter/filters/FormEducationalFilter.vue";
import BackButton from "@/componentss/ui/buttons/BackButton.vue";
import BasicIcon from "@/componentss/ui/icons/BasicIcon.vue";
import BreadcrumbsItem from "@/componentss/shared/Breadcrumbs/BreadcrumbsItem.vue";
import BaseBreadcrumbs from "@/componentss/shared/Breadcrumbs/BaseBreadcrumbs.vue";
export default {
name: "Show",
components: {
BaseBreadcrumbs,
BreadcrumbsItem,
BasicIcon,
BackButton,
FormEducationalFilter,
ProgramListBreadcrumbs,
@@ -59,20 +65,10 @@ export default {
},
seo: {
type: Object,
}
},
methods: {
textLimit(text, symbols) {
if (text.length > symbols) {
let LimitedText
LimitedText = text.substring(0, symbols)
return LimitedText + "..."
}
return text
},
},
mounted() {
breadcrumbs: {
type: Object
}
}
};
</script>
@@ -88,7 +84,10 @@ export default {
<div class=" space-y-5 md:space-y-8">
<div class="space-y-3">
<BackButton link="client.academicJournals.index" title="К списку журналов" />
<AcademicJournalsItemBreadcrumbs :title="journal.data.title" />
<BaseBreadcrumbs :breadcrumbs="breadcrumbs">
<BreadcrumbsItem :title="journal.data.title" :url="$page.url" />
</BaseBreadcrumbs>
<AcademicJournalsTitle class="text-center" :header="journal.data.title" />
</div>
resources/js/Pages/Client/Additional-educations/Index.vue
+9
View File
@@ -21,10 +21,13 @@ import BasicPageWrapper from "@/componentss/ui/wrappers/BasicPageWrapper.vue";
import BackButton from "@/componentss/ui/buttons/BackButton.vue";
import Builder from "@/componentss/shared/builder/pageBuilder/Builder.vue";
import ProgramTitle from "@/componentss/features/educationalPrograms/components/ProgramTitle.vue";
import BreadcrumbsItem from "@/componentss/shared/Breadcrumbs/BreadcrumbsItem.vue";
import BasicIcon from "@/componentss/ui/icons/BasicIcon.vue";
export default {
name: "Index",
components: {
BasicIcon, BreadcrumbsItem,
ProgramTitle, Builder, BackButton, BasicPageWrapper, BasicPageContainer, AdditionalProgramItemBreadcrumbs,
BasicListBadge,
AdditionalProgramBadge,
@@ -104,6 +107,12 @@ export default {
<div class="space-y-3 mx-auto max-w-3xl w-full">
<div class="my-10 w-full">
<AdditionalProgramListBreadcrumbs :breadcrumbs="breadcrumbs" />
<BreadcrumbsItem :breadcrumbs="breadcrumbs">
<Link :href="route('client.additionalEducation.index')" class="flex items-center text-gray-500 hover:text-primary-hover">
<BasicIcon class="flex-shrink-0 mx-2 overflow-visible h-2.5 w-2.5 text-gray-400" name="breadcrumb-tag" />
Дополнительное образование
</Link>
</BreadcrumbsItem>
<div class="flex items-center gap-x-2">
<LevelEduFilter :directions="directionAdditionalEducations" :direction_filter="filters.direction_filter" />
<BasicListFilter>
resources/js/Pages/Client/Additional-educations/Show.vue
+9 -1
View File
@@ -15,11 +15,14 @@ import BasicPageWrapper from "@/componentss/ui/wrappers/BasicPageWrapper.vue";
import ProgramItemBreadcrumbs from "@/componentss/features/educationalPrograms/components/ProgramItemBreadcrumbs.vue";
import FormBlock from "@/componentss/shared/builder/pageBuilder/blocks/FormBlock.vue";
import FormBuilder from "@/componentss/shared/builder/formBuilder/FormBuilder.vue";
import BreadcrumbsItem from "@/componentss/shared/Breadcrumbs/BreadcrumbsItem.vue";
import BasicIcon from "@/componentss/ui/icons/BasicIcon.vue";
export default {
name: "Show",
components: {
BasicIcon, BreadcrumbsItem,
FormBuilder,
FormBlock,
ProgramItemBreadcrumbs, BasicPageWrapper, BasicPageContainer,
@@ -76,7 +79,12 @@ export default {
<BasicPageContainer>
<div class="space-y-3">
<BackButton link="client.additionalEducation.index" title="Все программы"/>
<AdditionalProgramItemBreadcrumbs class="pb-4" :breadcrumbs="breadcrumbs" :additional-education-title="additionalEducation.data.title" />
<BreadcrumbsItem :breadcrumbs="breadcrumbs">
<Link :href="$page.url" class="flex items-center text-gray-500 hover:text-primary-light">
<BasicIcon class="flex-shrink-0 mx-2 overflow-visible h-2.5 w-2.5 text-gray-400" name="breadcrumb-tag" />
{{ additionalEducation.data.title }}
</Link>
</BreadcrumbsItem>
<ProgramTitle :header="additionalEducation.data.title" class="text-center" />
</div>
resources/js/Pages/Client/Departments/Show.vue
+12 -2
View File
@@ -76,7 +76,11 @@
<div class="flex w-full sm:items-center gap-x-5 sm:gap-x-3 truncate">
<div class="grow">
<div class="grid sm:flex sm:justify-between sm:items-center gap-2">
<DepartmentItemBreadcrumbs :faculty="department.data.faculty" :department-title="department.data.title" />
<BaseBreadcrumbs :breadcrumbs="breadcrumbs">
<BreadcrumbsItem title="Факультеты" :url="route('client.faculty.index')" />
<BreadcrumbsItem :title="department.data.faculty.abbreviation" :url="route('client.faculty.show', department.data.faculty.slug)" />
<BreadcrumbsItem :title="department.data.title" :url="$page.url" />
</BaseBreadcrumbs>
</div>
</div>
</div>
@@ -163,6 +167,8 @@ import BasicListFilter from "@/componentss/shared/filter/BasicListFilter.vue";
import EventListSearch from "@/componentss/features/events/components/EventListSearch.vue";
import SortingByFilter from "@/componentss/shared/filter/filters/SortingByFilter.vue";
import NavigateVisor from "@/componentss/shared/visor/NavigateVisor.vue";
import BreadcrumbsItem from "@/componentss/shared/Breadcrumbs/BreadcrumbsItem.vue";
import BaseBreadcrumbs from "@/componentss/shared/Breadcrumbs/BaseBreadcrumbs.vue";
export default {
@@ -188,10 +194,14 @@ export default {
},
seo: {
type: Object
}
},
breadcrumbs: {
type: Object
}
},
components: {
BaseBreadcrumbs, BreadcrumbsItem,
NavigateVisor,
SortingByFilter,
EventListSearch,
resources/js/Pages/Client/Divisions/Index.vue
+10 -8
View File
@@ -5,10 +5,13 @@ import MetaTags from "@/componentss/shared/SEO/MetaTags.vue";
import DivisionListTitle from "@/componentss/features/divisions/components/DivisionListTitle.vue";
import DivisionListBreadcrumbs from "@/componentss/features/divisions/components/DivisionListBreadcrumbs.vue";
import BasicFooter from "@/footers/BasicFooter.vue";
import BreadcrumbsItem from "@/componentss/shared/Breadcrumbs/BreadcrumbsItem.vue";
import BaseBreadcrumbs from "@/componentss/shared/Breadcrumbs/BaseBreadcrumbs.vue";
export default {
name: "Index",
components: {
BaseBreadcrumbs, BreadcrumbsItem,
BasicFooter,
DivisionListTitle,
MetaTags,
@@ -28,14 +31,11 @@ export default {
},
seo: {
type: Object,
}
},
breadcrumbs: {
type: Object
}
},
methods: {
},
mounted() {
}
};
</script>
@@ -61,7 +61,9 @@ export default {
bottom-text="Список структурных и административных отделов НТГСПИ"
header="Подразделения института" />
<DivisionListBreadcrumbs />
<BaseBreadcrumbs :breadcrumbs="breadcrumbs">
<BreadcrumbsItem title="Подразделения института" :url="route('client.division.index')" />
</BaseBreadcrumbs>
<!-- Grid -->
<div class="grid sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-3 gap-3 sm:gap-6">
resources/js/Pages/Client/Divisions/Show.vue
+11 -1
View File
@@ -61,6 +61,10 @@
<div class="grow">
<div class="grid sm:flex sm:justify-between sm:items-center gap-2">
<DivisionItemBreadcrumbs :division-title="division.data.title" />
<BaseBreadcrumbs :breadcrumbs="breadcrumbs">
<BreadcrumbsItem title="Подразделения института" :url="route('client.division.index')" />
<BreadcrumbsItem :title="division.data.title" :url="$page.url" />
</BaseBreadcrumbs>
</div>
</div>
</div>
@@ -112,6 +116,8 @@ import Builder from "@/componentss/shared/builder/pageBuilder/Builder.vue";
import DivisionWorkerCard from "@/componentss/features/divisions/components/DivisionWorkerCard.vue";
import BasicFooter from "@/footers/BasicFooter.vue";
import DivisionItemBreadcrumbs from "@/componentss/features/divisions/components/DivisionItemBreadcrumbs.vue";
import BreadcrumbsItem from "@/componentss/shared/Breadcrumbs/BreadcrumbsItem.vue";
import BaseBreadcrumbs from "@/componentss/shared/Breadcrumbs/BaseBreadcrumbs.vue";
export default {
@@ -133,10 +139,14 @@ export default {
},
seo: {
type: Object,
}
},
breadcrumbs: {
type: Object
}
},
components: {
BaseBreadcrumbs, BreadcrumbsItem,
BasicFooter,
DivisionWorkerCard,
Builder,
resources/js/Pages/Client/Events/Archive.vue
+7 -1
View File
@@ -20,11 +20,14 @@ import BackButton from "@/componentss/ui/buttons/BackButton.vue";
import Builder from "@/componentss/shared/builder/pageBuilder/Builder.vue";
import BasicTitle from "@/componentss/ui/titles/BasicTitle.vue";
import EventItemBreadcrumbs from "@/componentss/features/events/components/EventItemBreadcrumbs.vue";
import BreadcrumbsItem from "@/componentss/shared/Breadcrumbs/BreadcrumbsItem.vue";
import BaseBreadcrumbs from "@/componentss/shared/Breadcrumbs/BaseBreadcrumbs.vue";
export default {
name: "Archive",
components: {
BaseBreadcrumbs, BreadcrumbsItem,
EventItemBreadcrumbs, BasicTitle, Builder, BackButton, BasicPageWrapper, BasicPageContainer,
BasicPagination,
SortingByFilter,
@@ -86,7 +89,10 @@ export default {
<BasicPageWrapper>
<BasicPageContainer breakpoint="md">
<div>
<EventArchiveListBreadcrumbs :breadcrumbs="breadcrumbs" />
<BaseBreadcrumbs :breadcrumbs="breadcrumbs">
<BreadcrumbsItem title="Мероприятия" :url="route('client.event.index')" />
<BreadcrumbsItem title="Архив" :url="route('client.event.archive')" />
</BaseBreadcrumbs>
<div class="space-y-5 md:space-y-4">
<div class="flex items-center w-full justify-center">
<h1 class="block text-brand-primary text-center mb-3 mt-2 mr-4 text-3xl font-semibold tracking-tight lg:text-[35px] lg:leading-tight">
resources/js/Pages/Client/Events/Index.vue
+6 -1
View File
@@ -16,11 +16,14 @@ import BackButton from "@/componentss/ui/buttons/BackButton.vue";
import Builder from "@/componentss/shared/builder/pageBuilder/Builder.vue";
import BasicTitle from "@/componentss/ui/titles/BasicTitle.vue";
import EventItemBreadcrumbs from "@/componentss/features/events/components/EventItemBreadcrumbs.vue";
import BreadcrumbsItem from "@/componentss/shared/Breadcrumbs/BreadcrumbsItem.vue";
import BaseBreadcrumbs from "@/componentss/shared/Breadcrumbs/BaseBreadcrumbs.vue";
export default {
name: "Index",
components: {
BaseBreadcrumbs, BreadcrumbsItem,
EventItemBreadcrumbs, BasicTitle, Builder, BackButton, BasicPageWrapper, BasicPageContainer,
BasicListBadge,
CategoryFilter,
@@ -77,7 +80,9 @@ export default {
<BasicPageWrapper>
<BasicPageContainer breakpoint="md">
<div>
<EventListBreadcrumbs :breadcrumbs="breadcrumbs" />
<BaseBreadcrumbs :breadcrumbs="breadcrumbs">
<BreadcrumbsItem title="Мероприятия" :url="route('client.event.index')" />
</BaseBreadcrumbs>
<div class="space-y-5 md:space-y-4">
<div class="flex items-center w-full justify-center">
<h1 class="block text-brand-primary text-center mb-3 mt-2 mr-4 text-3xl font-semibold tracking-tight dark:text-white lg:text-[40px] lg:leading-tight">
resources/js/Pages/Client/Events/Show.vue
+7 -1
View File
@@ -11,10 +11,13 @@ import BasicPageContainer from "@/componentss/ui/templates/BasicPageContainer.vu
import BasicPageWrapper from "@/componentss/ui/wrappers/BasicPageWrapper.vue";
import ProgramTitle from "@/componentss/features/educationalPrograms/components/ProgramTitle.vue";
import ProgramItemBreadcrumbs from "@/componentss/features/educationalPrograms/components/ProgramItemBreadcrumbs.vue";
import BreadcrumbsItem from "@/componentss/shared/Breadcrumbs/BreadcrumbsItem.vue";
import BaseBreadcrumbs from "@/componentss/shared/Breadcrumbs/BaseBreadcrumbs.vue";
export default {
name: "Show",
components: {
BaseBreadcrumbs, BreadcrumbsItem,
ProgramItemBreadcrumbs, ProgramTitle, BasicPageWrapper, BasicPageContainer,
MetaTags,
BasicFooter,
@@ -68,7 +71,10 @@ export default {
<div class="space-y-5 md:space-y-10">
<div class="space-y-3">
<BackButton link="client.event.index" title="Все мероприятия" />
<EventItemBreadcrumbs :breadcrumbs="breadcrumbs" :event-title="event.data.title" />
<BaseBreadcrumbs :breadcrumbs="breadcrumbs">
<BreadcrumbsItem title="Мероприятия" :url="route('client.event.index')" />
<BreadcrumbsItem :title="event.data.title" :url="$page.url" />
</BaseBreadcrumbs>
<BasicTitle :header="event.data.title" />
</div>
resources/js/Pages/Client/Faculties/Index.vue
+10 -7
View File
@@ -16,10 +16,13 @@ import IsOnlineFilter from "@/componentss/shared/filter/filters/IsOnlineFilter.v
import BasicListFilter from "@/componentss/shared/filter/BasicListFilter.vue";
import EventListSearch from "@/componentss/features/events/components/EventListSearch.vue";
import SortingByFilter from "@/componentss/shared/filter/filters/SortingByFilter.vue";
import BreadcrumbsItem from "@/componentss/shared/Breadcrumbs/BreadcrumbsItem.vue";
import BaseBreadcrumbs from "@/componentss/shared/Breadcrumbs/BaseBreadcrumbs.vue";
export default {
name: "Index",
components: {
BaseBreadcrumbs, BreadcrumbsItem,
SortingByFilter,
EventListSearch,
BasicListFilter,
@@ -49,14 +52,11 @@ export default {
},
seo: {
type: Object,
}
},
breadcrumbs: {
type: Object
}
},
methods: {
},
mounted() {
}
};
</script>
@@ -71,6 +71,9 @@ export default {
bottom-text="Информация о наших факультетах и кафедрах"
header="Факультеты и кафедры" />
<FacultyListBreadcrumbs />
<BaseBreadcrumbs :breadcrumbs="breadcrumbs">
<BreadcrumbsItem title="Факультеты" :url="route('client.faculty.index')" />
</BaseBreadcrumbs>
<!-- Grid -->
<div class="grid sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-3 gap-3 sm:gap-6">
resources/js/Pages/Client/Faculties/Show.vue
+11 -2
View File
@@ -35,7 +35,10 @@
<div class="flex w-full sm:items-center gap-x-5 sm:gap-x-3 truncate">
<div class="grow">
<div class="grid sm:flex sm:justify-between sm:items-center gap-2">
<FacultyItemBreadcrumbs :faculty-title="faculty.data.shortTitle" />
<BaseBreadcrumbs :breadcrumbs="breadcrumbs">
<BreadcrumbsItem title="Факультеты" :url="route('client.faculty.index')" />
<BreadcrumbsItem :title="faculty.data.shortTitle" :url="$page.url" />
</BaseBreadcrumbs>
</div>
</div>
</div>
@@ -118,6 +121,8 @@ import EventListSearch from "@/componentss/features/events/components/EventListS
import SortingByFilter from "@/componentss/shared/filter/filters/SortingByFilter.vue";
import NavigateVisor from "@/componentss/shared/visor/NavigateVisor.vue";
import NavigateLinks from "@/componentss/shared/navigate/NavigateLinks.vue";
import BreadcrumbsItem from "@/componentss/shared/Breadcrumbs/BreadcrumbsItem.vue";
import BaseBreadcrumbs from "@/componentss/shared/Breadcrumbs/BaseBreadcrumbs.vue";
export default {
@@ -139,10 +144,14 @@ export default {
},
seo: {
type: Object,
}
},
breadcrumbs: {
type: Object
}
},
components: {
BaseBreadcrumbs, BreadcrumbsItem,
NavigateLinks,
NavigateVisor,
SortingByFilter,
resources/js/Pages/Client/Persons/Show.vue
+10 -70
View File
@@ -12,7 +12,9 @@
<section class="w-full min-w-0 mt-1 max-w-6xl px-1 md:px-6" style="">
<div class="w-full mx-auto sm:px-6 lg:px-8">
<PersonBreadcrumbs class="mb-4" :person-name="person.data.name" />
<BaseBreadcrumbs class="mb-4" :breadcrumbs="breadcrumbs">
<BreadcrumbsItem :title="person.data.name" :url="$page.url" />
</BaseBreadcrumbs>
<InfoSection :person="person" />
@@ -52,6 +54,8 @@ import IsOnlineFilter from "@/componentss/shared/filter/filters/IsOnlineFilter.v
import BasicListFilter from "@/componentss/shared/filter/BasicListFilter.vue";
import EventListSearch from "@/componentss/features/events/components/EventListSearch.vue";
import SortingByFilter from "@/componentss/shared/filter/filters/SortingByFilter.vue";
import BreadcrumbsItem from "@/componentss/shared/Breadcrumbs/BreadcrumbsItem.vue";
import BaseBreadcrumbs from "@/componentss/shared/Breadcrumbs/BaseBreadcrumbs.vue";
export default {
@@ -70,10 +74,14 @@ export default {
},
seo: {
type: Object,
}
},
breadcrumbs: {
type: Object
}
},
components: {
BaseBreadcrumbs, BreadcrumbsItem,
SortingByFilter,
EventListSearch,
BasicListFilter,
@@ -187,72 +195,4 @@ export default {
<style>
.paragraph-container a {
@apply text-primary;
@apply underline;
}
.paragraph-container p {
@apply mb-2
}
@keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fade-enter-active,
.fade-leave-active {
transition: all 0.3s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
@keyframes grow-progress {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
#progress {
height: 2px;
background: #26ACB8;
z-index: 10000;
transform-origin: 0 50%;
animation: grow-progress auto linear;
animation-timeline: scroll();
}
.active {
color: blue !important;
}
.example-initial-animation {
animation: initial-animation 2s ease;
}
@keyframes initial-animation {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}
</style>
resources/js/Pages/Client/Posts/Index.vue
+6 -1
View File
@@ -19,9 +19,12 @@ import EventArchiveListBreadcrumbs from "@/componentss/features/events/component
import BasicPagination from "@/componentss/shared/paginate/BasicPagination.vue";
import IsOnlineFilter from "@/componentss/shared/filter/filters/IsOnlineFilter.vue";
import EventListSearch from "@/componentss/features/events/components/EventListSearch.vue";
import BreadcrumbsItem from "@/componentss/shared/Breadcrumbs/BreadcrumbsItem.vue";
import BaseBreadcrumbs from "@/componentss/shared/Breadcrumbs/BaseBreadcrumbs.vue";
export default {
name: "Index",
components: {
BaseBreadcrumbs, BreadcrumbsItem,
WhenVisible,
EventListSearch, IsOnlineFilter, BasicPagination, EventArchiveListBreadcrumbs, BasicPageWrapper, BasicPageContainer,
BasicListBadge,
@@ -86,7 +89,9 @@ export default {
<h2 class="text-2xl font-bold md:text-4xl md:leading-tight dark:text-white">Новости НТГСПИ</h2>
<p class="mt-1 text-gray-600 dark:text-neutral-400">Узнайте последние новости любимого вуза</p>
</div>
<PostListBreadcrumbs :breadcrumbs="breadcrumbs" />
<BaseBreadcrumbs :breadcrumbs="breadcrumbs">
<BreadcrumbsItem title="Новости" :url="route('client.post.index')" />
</BaseBreadcrumbs>
<div>
<HeadItemsWrapper>
<PostListSearch :search_filter="filters.search_filter" />
resources/js/Pages/Client/Posts/Show.vue
+7 -1
View File
@@ -21,11 +21,14 @@ import IsOnlineFilter from "@/componentss/shared/filter/filters/IsOnlineFilter.v
import BasicListFilter from "@/componentss/shared/filter/BasicListFilter.vue";
import EventListSearch from "@/componentss/features/events/components/EventListSearch.vue";
import SortingByFilter from "@/componentss/shared/filter/filters/SortingByFilter.vue";
import BreadcrumbsItem from "@/componentss/shared/Breadcrumbs/BreadcrumbsItem.vue";
import BaseBreadcrumbs from "@/componentss/shared/Breadcrumbs/BaseBreadcrumbs.vue";
export default {
name: "Show",
components: {
BaseBreadcrumbs, BreadcrumbsItem,
SortingByFilter,
EventListSearch,
BasicListFilter,
@@ -90,7 +93,10 @@ export default {
<div class="space-y-5 md:space-y-10">
<div class="space-y-3">
<BackButton link="client.post.index" title="Все новости"/>
<PostItemBreadcrumbs :breadcrumbs="breadcrumbs" :post-title="post.data.title" />
<BaseBreadcrumbs :breadcrumbs="breadcrumbs">
<BreadcrumbsItem title="Новости" :url="route('client.post.index')" />
<BreadcrumbsItem :title="post.data.title" :url="$page.url" />
</BaseBreadcrumbs>
<BasicTitle :header="post.data.title"/>
</div>
resources/js/Pages/Client/Programs/Index.vue
+10 -1
View File
@@ -15,10 +15,13 @@ import AcademicJournalsListBreadcrumbs
from "@/componentss/features/academicJournals/components/AcademicJournalsListBreadcrumbs.vue.vue";
import BasicPageWrapper from "@/componentss/ui/wrappers/BasicPageWrapper.vue";
import BasicListBadge from "@/componentss/shared/badge/BasicListBadge.vue";
import BreadcrumbsItem from "@/componentss/shared/Breadcrumbs/BreadcrumbsItem.vue";
import BaseBreadcrumbs from "@/componentss/shared/Breadcrumbs/BaseBreadcrumbs.vue";
export default {
name: "Index",
components: {
BaseBreadcrumbs, BreadcrumbsItem,
BasicListBadge,
BasicPageWrapper, AcademicJournalsListBreadcrumbs, BasicPageContainer,
ProgramLevelEduFilter,
@@ -63,7 +66,10 @@ export default {
},
seo: {
type: Object,
}
},
breadcrumbs: {
type: Object
}
},
methods: {
transformToColumns(originalArray) {
@@ -102,6 +108,9 @@ export default {
<div class="">
<div class="mt-10 mb-5 w-full">
<ProgramListBreadcrumbs />
<BaseBreadcrumbs :breadcrumbs="breadcrumbs">
<BreadcrumbsItem title="Образовательные программы" :url="route('client.program.index')" />
</BaseBreadcrumbs>
<div class="flex items-center gap-x-2">
<ProgramLevelEduFilter :levels="levelsEducational" :level_filter="filters.level_filter" />
<BasicListFilter>
resources/js/Pages/Client/Programs/Show.vue
+11 -2
View File
@@ -13,6 +13,8 @@ import BudgetEducation from "@/Enum/BudgetEducation.js";
import TypeExam from "@/Enum/TypeExam.js";
import BasicPageWrapper from "@/componentss/ui/wrappers/BasicPageWrapper.vue";
import BasicPageContainer from "@/componentss/ui/templates/BasicPageContainer.vue";
import BreadcrumbsItem from "@/componentss/shared/Breadcrumbs/BreadcrumbsItem.vue";
import BaseBreadcrumbs from "@/componentss/shared/Breadcrumbs/BaseBreadcrumbs.vue";
export default {
@@ -49,6 +51,7 @@ export default {
}
},
components: {
BaseBreadcrumbs, BreadcrumbsItem,
BasicPageContainer,
BasicPageWrapper,
ProgramTitle,
@@ -70,7 +73,10 @@ export default {
},
seo: {
type: Object,
}
},
breadcrumbs: {
type: Object
}
},
}
</script>
@@ -84,7 +90,10 @@ export default {
<BasicPageContainer>
<div class="space-y-3">
<BackButton link="client.program.index" title="Все программы" />
<ProgramItemBreadcrumbs :program-title="program.data.name" />
<BaseBreadcrumbs :breadcrumbs="breadcrumbs">
<BreadcrumbsItem title="Образовательные программы" :url="route('client.program.index')" />
<BreadcrumbsItem :title="program.data.name" :url="$page.url" />
</BaseBreadcrumbs>
<ProgramTitle class="text-center" :header="program.data.name" />
</div>
<div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
resources/js/Pages/Client/Schedules/Index.vue
+7 -1
View File
@@ -10,6 +10,8 @@ import BasicFooter from "@/footers/BasicFooter.vue";
import BasicListFilter from "@/componentss/shared/filter/BasicListFilter.vue";
import FormEducationalFilter from "@/componentss/shared/filter/filters/FormEducationalFilter.vue";
import MetaTags from "@/componentss/shared/SEO/MetaTags.vue";
import BreadcrumbsItem from "@/componentss/shared/Breadcrumbs/BreadcrumbsItem.vue";
import BaseBreadcrumbs from "@/componentss/shared/Breadcrumbs/BaseBreadcrumbs.vue";
export default {
@@ -23,6 +25,7 @@ export default {
};
},
components: {
BaseBreadcrumbs, BreadcrumbsItem,
WhenVisible,
MetaTags,
FormEducationalFilter,
@@ -49,6 +52,9 @@ export default {
},
seo: {
type: Object
},
breadcrumbs: {
type: Object
}
},
methods: {
@@ -157,7 +163,7 @@ export default {
<div class="relative mx-auto mt-[67px] max-w-screen-xl px-4 py-10 md:flex md:flex-row md:py-10">
<article class="w-full min-w-0 mt-4 px-1 md:px-6">
<div class="relative overflow-hidden">
<div class="max-w-[85rem] mx-auto sm:px-6 lg:px-8 py-10 sm:pb-12 sm:py-5">
<div class="max-w-[40rem] mx-auto sm:px-6 lg:px-8 py-5 sm:pb-12 sm:py-5">
<div>
<ScheduleListTitle
bottom-text="Просто введите название группы"
resources/js/Pages/Main.vue
+5 -3
View File
@@ -4,7 +4,7 @@
<MainPageNavBar :sections="$page.props.navigation" />
<Slider class="bvi-hide" slider-id="quos-velit-quisquam" />
<section class="max-w-screen-xl w-full mx-auto px-4 py-3 pb-10">
<section class="max-w-screen-xl w-full mx-auto px-4 py-3 pb-10">
<PostSection :posts="posts" />
<EducationSection :educations="educations" />
</section>
@@ -26,8 +26,8 @@ import ContactSectionBlock from "@/componentss/shared/contactSection/ContactSect
import PostSection from "@/componentss/features/mainPage/PostSection.vue";
import EventSection from "@/componentss/features/mainPage/EventSection.vue";
import EducationSection from "@/componentss/features/mainPage/EducationSection.vue";
import BasicIcon from "@/componentss/ui/icons/BasicIcon.vue";
import SvgIcon from "@/componentss/ui/icons/SvgIcon.vue";
export default {
name: "Main",
@@ -47,6 +47,8 @@ export default {
},
components: {
SvgIcon,
BasicIcon,
EducationSection,
EventSection,
PostSection,
resources/js/Pages/Page.vue
+9 -58
View File
@@ -10,7 +10,9 @@
<NavigateLinks v-if="!settings?.hide_page_navigate_links" :header-navs="headerNavs"/>
<div class="w-full min-w-0 mt-1 max-w-6xl px-1 md:px-6" style="">
<div class="space-y-5 md:space-y-5">
<PageBreadcrumbs v-if="!settings?.hide_breadcrumbs" :breadcrumbs="breadcrumbs" :page-title="page.data.title"/>
<BaseBreadcrumbs v-if="!settings?.hide_breadcrumbs" :breadcrumbs="breadcrumbs">
<BreadcrumbsItem :title="breadcrumbs.page.data.title" :url="route('page.view', breadcrumbs.page.data.path)" />
</BaseBreadcrumbs>
<BasicTitle :header="page.data.title"/>
<div id="page-area">
<Builder :blocks="page.data.content"/>
@@ -48,6 +50,9 @@ import IsOnlineFilter from "@/componentss/shared/filter/filters/IsOnlineFilter.v
import BasicListFilter from "@/componentss/shared/filter/BasicListFilter.vue";
import EventListSearch from "@/componentss/features/events/components/EventListSearch.vue";
import SortingByFilter from "@/componentss/shared/filter/filters/SortingByFilter.vue";
import BaseBreadcrumbs from "@/componentss/shared/Breadcrumbs/BaseBreadcrumbs.vue";
import BasicIcon from "@/componentss/ui/icons/BasicIcon.vue";
import BreadcrumbsItem from "@/componentss/shared/Breadcrumbs/BreadcrumbsItem.vue";
export default {
@@ -79,6 +84,9 @@ export default {
}
},
components: {
BreadcrumbsItem,
BasicIcon,
BaseBreadcrumbs,
SortingByFilter,
EventListSearch,
BasicListFilter,
@@ -110,61 +118,4 @@ export default {
<style>
@keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fade-enter-active,
.fade-leave-active {
transition: all 0.3s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
@keyframes grow-progress {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
#progress {
height: 2px;
background: #26ACB8;
z-index: 10000;
transform-origin: 0 50%;
animation: grow-progress auto linear;
animation-timeline: scroll();
}
.example-initial-animation {
animation: initial-animation 2s ease;
}
@keyframes initial-animation {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}
</style>
resources/js/app.js
+2
View File
@@ -1,6 +1,8 @@
import './bootstrap';
import '../css/app.css';
import 'preline';
import 'virtual:svg-icons-register'
import { createSSRApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/vue3';
resources/js/assets/icons/icons.js
+2161 -108
View File
File diff suppressed because it is too large Load Diff
resources/js/componentss/features/pages/components/PageSubSectionLinks.vue
+1 -1
View File
@@ -10,7 +10,7 @@
<a :class="{'text-white font-normal bg-primary border': isSameRoute(page.path), 'text-gray-600 hover:text-[#2C6288]': !isSameRoute(page.path) }"
:href="(page.is_url) ? page.path : route('page.view', page.path) + '/'"
class="duration-300 flex gap-x-2 w-full rounded-md cursor-pointer items-center px-2 py-1.5 text-left text-sm">
<BasicIcon v-if="page.icon" class="w-4" :name="page.icon" />
<BasicIcon v-if="page.icon" class="w-4 h-4" :name="page.icon" />
{{ page.title }}
</a>
</li>
resources/js/componentss/features/posts/components/PostItemBreadcrumbs.vue
+6 -5
View File
@@ -1,6 +1,6 @@
<template>
<div class="flex justify-between pb-4 items-center">
<div class="flex w-full sm:items-center gap-x-5 sm:gap-x-3">
<div class="flex w-full sm:items-center gap-x-5 sm:gap-x-3 truncate mask-fade">
<div class="grow">
<div class="grid sm:flex sm:justify-between sm:items-center gap-2">
<BreadcrumbsWrapper v-if="breadcrumbs">
@@ -53,7 +53,7 @@
{{ textLimit(postTitle, 60) }}
</Link>
</li>
</BreadcrumbsWrapper>
</BreadcrumbsWrapper >
<BreadcrumbsWrapper v-else>
<li class="text-sm">
<Link :href="route('index')" class="flex items-center text-gray-500 hover:text-primary-hover" href="/">
@@ -203,7 +203,8 @@ export default {
<style scoped>
.mask-fade {
mask-image: linear-gradient(to right, black 90%, transparent 100%);
-webkit-mask-image: linear-gradient(to right, black 90%, transparent 100%);
}
</style>
resources/js/componentss/shared/Breadcrumbs/BaseBreadcrumbs.vue
+142
View File
@@ -0,0 +1,142 @@
<template>
<div class="flex justify-between pb-4 items-center">
<div class="flex w-full sm:items-center gap-x-5 sm:gap-x-3 truncate mask-fade">
<div class="grow">
<div class="grid sm:flex sm:justify-between sm:items-center gap-2">
<BreadcrumbsWrapper>
<li class="text-sm">
<Link :href="route('index')" class="flex items-center text-gray-500 hover:text-primary-hover" href="/">
<BasicIcon class="size-5" name="home" />
</Link>
</li>
<li v-if="breadcrumbs?.mainSection?.data?.title" class="text-sm">
<span class="flex items-center text-gray-500 hover:text-primary-hover cursor-pointer" @click.prevent="handleSectionClick(breadcrumbs.mainSection)">
<BasicIcon class="flex-shrink-0 mx-2 overflow-visible h-2.5 w-2.5 text-gray-400" name="breadcrumb-tag" />
{{ TEXT_LIMIT(breadcrumbs.mainSection.data.title, 25) }}
</span>
</li>
<li v-if="breadcrumbs?.subSection?.data?.title" class="text-sm">
<span class="flex items-center text-gray-500 hover:text-primary-hover cursor-pointer" @click.prevent="handleSubSectionClick(breadcrumbs.mainSection, breadcrumbs.subSection)">
<BasicIcon class="flex-shrink-0 mx-2 overflow-visible h-2.5 w-2.5 text-gray-400" name="breadcrumb-tag" />
{{ TEXT_LIMIT(breadcrumbs.subSection.data.title, 25) }}
</span>
</li>
<slot />
</BreadcrumbsWrapper>
</div>
</div>
</div>
</div>
</template>
<script>
import {Link} from "@inertiajs/vue3";
import slugify from "slugify";
import BasicIcon from "@/componentss/ui/icons/BasicIcon.vue";
import BreadcrumbsWrapper from "@/componentss/ui/wrappers/BreadcrumbsWrapper.vue";
import BreadcrumbsItem from "@/componentss/shared/Breadcrumbs/BreadcrumbsItem.vue";
import {helpers} from "@/mixins/Helpers.js";
export default {
mixins: [helpers],
name: "BaseBreadcrumbs",
components: {BreadcrumbsItem, BreadcrumbsWrapper, BasicIcon, Link},
data() {
return {
}
},
methods: {
isMobileDevice() {
if (typeof window !== 'undefined') {
return window.innerWidth < 1024; // Проверка на мобильные устройства
}
return false; // По умолчанию возвращаем false, когда не в браузере
},
handleSectionClick(breadcrumb) {
if (this.isMobileDevice()) {
this.toggleMobileNavSection(breadcrumb)
} else {
this.toggleDesktopNavSection(breadcrumb)
}
},
handleSubSectionClick(mainSectionBreadcrumb, breadcrumb) {
if (this.isMobileDevice()) {
this.toggleMobileNavSubSection(mainSectionBreadcrumb, breadcrumb)
} else {
this.toggleDesktopNavSubSection(mainSectionBreadcrumb, breadcrumb)
}
},
highlightNavItem(item) {
item.classList.add('animate-pulse');
setTimeout(() => {
item.classList.remove('animate-pulse');
}, 4000);
},
openMobileNavMenu() {
const openMobileNavBtn = document.getElementById('open-mobile-btn');
openMobileNavBtn.click();
},
toggleMobileNavSubSection(mainSectionBreadcrumb, breadcrumb) {
this.openMobileNavMenu()
const mobileNavElement = document.getElementById('open-mobile-nav');
const sectionNavBlock = mobileNavElement.querySelector('#nav-section-accordion-' + mainSectionBreadcrumb.data.slug);
const sectionNavBlockBtn = mobileNavElement.querySelector('#nav-section-accordion-btn-' + mainSectionBreadcrumb.data.slug);
if (!sectionNavBlock.classList.contains('active')) {
sectionNavBlockBtn.click()
}
const subSectionNavBlock = mobileNavElement.querySelector('#nav-sub-section-accordion-' + breadcrumb.data.slug);
const subSectionNavBlockBtn = mobileNavElement.querySelector('#nav-sub-section-accordion-btn-' + breadcrumb.data.slug);
if (subSectionNavBlock.classList.contains('active')) {
subSectionNavBlockBtn.click()
}
this.highlightNavItem(subSectionNavBlock)
},
toggleMobileNavSection(breadcrumb) {
const mobileNavElement = document.getElementById('open-mobile-nav');
const sectionNavBlock = mobileNavElement.querySelector('#nav-section-accordion-' + breadcrumb.data.slug);
const sectionNavBlockBtn = mobileNavElement.querySelector('#nav-section-accordion-btn-' + breadcrumb.data.slug);
if (sectionNavBlock.classList.contains('active')) {
sectionNavBlockBtn.click()
}
this.openMobileNavMenu()
this.highlightNavItem(sectionNavBlock)
},
toggleDesktopNavSubSection(mainSectionBreadcrumb, breadcrumb) {
const desktopNavElement = document.getElementById('desktop-nav');
const sectionNavTitle = desktopNavElement.querySelector('#nav-sub-section-title-' + breadcrumb.data.slug);
const sectionNavBlockBtn = desktopNavElement.querySelector('#nav-section-btn-' + mainSectionBreadcrumb.data.slug);
sectionNavBlockBtn.click()
this.highlightNavItem(sectionNavTitle)
},
toggleDesktopNavSection(breadcrumb) {
const desktopNavElement = document.getElementById('desktop-nav');
const sectionNavBlock = desktopNavElement.querySelector('#nav-section-menu-' + breadcrumb.data.slug);
const sectionNavBlockBtn = desktopNavElement.querySelector('#nav-section-btn-' + breadcrumb.data.slug);
sectionNavBlockBtn.click()
// this.highlightNavItem(sectionNavBlock)
},
},
props: {
breadcrumbs: {
type: Object,
},
},
}
</script>
<style scoped>
.mask-fade {
mask-image: linear-gradient(to right, black 90%, transparent 100%);
-webkit-mask-image: linear-gradient(to right, black 90%, transparent 100%);
}
</style>
resources/js/componentss/shared/Breadcrumbs/BreadcrumbsItem.vue
+36
View File
@@ -0,0 +1,36 @@
<template>
<li class="text-sm">
<Link :href="url" class="flex items-center text-gray-500 hover:text-primary-light">
<BasicIcon v-if="separator" class="flex-shrink-0 mx-2 overflow-visible h-2.5 w-2.5 text-gray-400" name="breadcrumb-tag" />
{{ title }}
</Link>
</li>
</template>
<script>
import BasicIcon from "@/componentss/ui/icons/BasicIcon.vue";
import {Link} from "@inertiajs/vue3";
export default {
name: "BreadcrumbsItem",
props: {
title: {
type: String,
required: true
},
url: {
type: String,
// default: this.$page.url
},
separator: {
type: Boolean,
default: true
},
},
components: {
BasicIcon,
Link,
},
}
</script>
resources/js/componentss/shared/pageResource/PageResourceList.vue
+6 -3
View File
@@ -26,8 +26,10 @@
<a v-for="item in resource.data.content" class="group flex-shrink-0 w-64 flex flex-col bg-white border shadow-sm rounded-xl focus:outline-none focus:shadow-md transition" :href="item.link">
<div class="aspect-w-16 aspect-h-9 p-3 rounded-xl m-1 group-hover:bg-gray-100">
<img v-if="item.image" class="w-full backdrop-blur-xl rounded-xl object-cover h-[150px]" :src="'/storage/' + item.image" alt="Blog Image">
<div v-else :class="randomBgClass()" class="w-full rounded-xl object-cover h-[150px] bg-gradient-to-tr" />
<img v-if="!item.image || item.image.length > 0" class="w-full backdrop-blur-xl rounded-xl object-cover h-[150px]" :src="'/storage/' + item.image" alt="Blog Image">
<div v-else class="w-full rounded-xl object-cover h-[150px] flex justify-center items-center">
<BasicIcon class="w-10 h-10 text-gray-500" :name="item.icon" />
</div>
</div>
<div class="px-5 pb-4">
<h3 class="mt-2 truncate text-base font-medium text-gray-800 group-hover:text-primary-hover">{{ item.title }}</h3>
@@ -51,9 +53,10 @@
import axios from "axios";
import {Link} from "@inertiajs/vue3";
import BasicIcon from "@/componentss/ui/icons/BasicIcon.vue";
export default {
name: "PageResourceList",
components: {axios, Link },
components: {BasicIcon, axios, Link },
data() {
return {
resource: null,
resources/js/componentss/ui/icons/BasicIcon.vue
+42 -40
View File
@@ -1,45 +1,47 @@
<template>
<svg v-bind="svgAttributes" v-html="icon.path"></svg>
<svg aria-hidden="true">
<use :href="symbolId" :fill="color" />
</svg>
</template>
<script>
import icons from "@/assets/icons/icons.js"
export default {
name: "BasicIcon",
props: {
name: {
type: String,
},
viewBox: {
type: String,
},
stroke_width: {
type: Number,
},
fill: {
type: String
}
},
computed: {
icon() {
return icons[this.transformIconName(this.name)] || icons['file'];
},
svgAttributes() {
return {
xmlns: "http://www.w3.org/2000/svg",
fill: this.icon.fill || 'none',
viewBox: this.icon.viewBox || this.viewBox || '0 0 24 24',
'stroke-width': this.icon.stroke_width || this.stroke_width || 1.5,
stroke: this.icon.stroke || 'currentColor',
class: this.$attrs.class || 'w-6 h-6'
};
}
},
methods: {
transformIconName(iconName) {
return iconName.replace(/^heroicon-(o|c|s|m)-/, '')
.replace(/-(\w)/g, (_, letter) => letter.toUpperCase());
}
}
}
import { defineComponent, computed } from 'vue'
export default defineComponent({
name: "BasicIcon",
props: {
name: {
type: String,
required: true,
},
prefix: {
type: String,
default: 'icon',
},
color: {
type: String,
default: '#333',
},
},
setup(props) {
const rawName = props.name.replace(/^heroicon-(o|c|s|m)-/, '');
const symbolId = computed(() => `#${props.prefix}-${rawName}`)
return { symbolId }
},
// computed: {
// icon() {
// return icons[this.transformIconName(this.name)] || icons['file'];
// },
// svgAttributes() {
// return {
// xmlns: "http://www.w3.org/2000/svg",
// fill: this.icon.fill || 'none',
// viewBox: this.icon.viewBox || this.viewBox || '0 0 24 24',
// 'stroke-width': this.icon.stroke_width || this.stroke_width || 1.5,
// stroke: this.icon.stroke || 'currentColor',
// class: this.$attrs.class || 'w-6 h-6'
// };
// }
// },
})
</script>