Merge pull request #129 from IBEC-BOX/header/erg

Header/erg

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ibecsystems/nuxt3-ui-kit",
-  "version": "1.0.43",
+  "version": "1.0.44",
   "description": "Ibec Nuxt3 UI components",
   "repository": {
     "type": "git",

playground/nuxt.config.ts

@@ -49,7 +49,8 @@ export default defineNuxtConfig({
       'partsCardScale',
       'partsCardErgNews',
       'partsFilesErg',
-      'partsPagination'
+      'partsPagination',
+      'pagesErrorErg'
     ]
   },
   devtools: { enabled: false },

src/module.ts

@@ -172,5 +172,16 @@ export default defineNuxtModule<ModuleOptions>({
         ),
       });
     }
+
+    // error page
+
+    if (options.components.includes("pagesErrorErg")) {
+      addComponent({
+        name: "pagesErrorErg",
+        filePath: resolver.resolve(
+          "runtime/components/Pages/Error/Erg.vue"
+        ),
+      });
+    }
   },
 });

src/runtime/components/Pages/Error/Erg.vue

@@ -0,0 +1,107 @@
+<template>
+  <v-main>
+    <section class="page__error">
+      <v-container class="d-flex justify-center flex-column h-100 align-center">
+        <span
+          class="page__error-background-number"
+          v-bind="errorAttrs"
+        >
+          {{ error?.statusCode }}
+        </span>
+        <div class="page__error__content text-center">
+          <h1
+            v-if="error?.statusCode === 404"
+            v-bind="titleAttrs"
+            class="mb-4 text-36 font-weight-bold"
+          >
+            {{ title }}
+          </h1>
+          <h1
+            v-else
+            class="mb-4"
+          >
+            {{ otherTitle }}
+          </h1>
+          <p
+            class="mb-8 text-body-1 text-sm-h6 text-md-h5"
+            v-bind="subtitleAttrs"
+          >
+            {{ subtitle }}
+          </p>
+
+          <v-btn
+            color="primary"
+            rounded="xl"
+            class="text-body-1 font-weight-regular"
+            size="x-large"
+            elevation="0"
+            v-bind="buttonAttrs"
+            @click="handleError"
+          >
+            {{ textButton }}
+          </v-btn>
+        </div>
+
+      </v-container>
+    </section>
+  </v-main>
+</template>
+
+<script setup>
+import { useAttrs, ref } from "vue";
+import { useMainStore } from "../../../store/mainStore";
+import { clearError } from "#app";
+const mainStore = useMainStore();
+
+//Attributes
+const attrs = useAttrs();
+const titleAttrs = ref({
+  ...mainStore.getObjectPropertiesWithPrefix(attrs, "title"),
+})
+const errorAttrs = ref({
+  ...mainStore.getObjectPropertiesWithPrefix(attrs, "error")
+})
+const subtitleAttrs = ref({
+  ...mainStore.getObjectPropertiesWithPrefix(attrs, "subtitle")
+})
+const buttonAttrs = ref({
+  ...mainStore.getObjectPropertiesWithPrefix(attrs, "button")
+})
+
+const props = defineProps({
+  error: { type: Object, default: () => {} },
+  title: { type: String, default: () => '' },
+  subtitle: { type: String, default: () => '' },
+  otherTitle: { type: String, default: () => '' },
+  textButton: { type: String, default: () => '' },
+})
+
+const handleError = () => clearError({ redirect: '/' })
+
+</script>
+
+<style lang="scss">
+.page__error {
+  position: relative;
+  height: 50vh;
+  margin: 64px 0 160px 0;
+  &-background-number {
+    position: absolute;
+    font-size: 500px;
+    z-index: 1;
+    @media(max-width: 960px) {
+      font-size: 332px;
+    }
+    @media(max-width: 600px) {
+      font-size: 168px;
+      margin-bottom: 135px;
+    }
+  }
+  &__content {
+    position: relative;
+    z-index: 2;
+    max-width: 573px;
+  }
+
+}
+</style>

src/runtime/components/Pages/TestVuetify.vue

@@ -42,13 +42,13 @@
     <NuxtPage class="bg-primary" />
     <section class="h-100 bg-primary">
       <v-container class="px-4">
-        <parts-pagination
-          :pagination-total-visible="2"
-          :pagination-last-page="10"
-          :text-button-left-pagination="'asd'"
-          :text-button-right-pagination="'asd'"
-          :word-mobile-pagination="'Страница'"
-          :ellipsis-mobile-pagination="'вп'"
+        <pages-error-erg
+          :error="{
+            statusCode: 404
+          }"
+          :title="'page not found'"
+          :subtitle="'page not foundpage not foundpage not foundpage not foundpage not foundpage not found'"
+          :text-button="'page not found'"
         />
       </v-container>
     </section>

src/runtime/components/Parts/Forms.vue

@@ -451,17 +451,18 @@
       >
         <v-row>
           <v-col
-            v-for="contact in contacts"
+            v-for="(contact, index) in contacts"
             :key="contact.title"
             cols="12"
             :sm="contacts.length % 2 === 0 ? 6 : 12"
             lg="12"
-            class="d-flex "
+            class="d-flex justify-lg-end"
           >
             <v-sheet
               color="none"
-              class="mt-3 form__list-wrapper mb-6 mb-sm-7"
+              class="mt-3 form__list-wrapper"
               :max-width="590"
+              :class="index === contacts.length - 1 ? '' : 'mb-6 mb-sm-7'"
             >
               <h2 class="text-dark-1 text-h6 text-sm-h5 font-weight-medium mb-4">
                 {{ contact?.title }}

src/runtime/components/Parts/Slider.vue

@@ -78,14 +78,20 @@
                 >
                   {{ slide.title }}
                 </component>
+                <!-- Slide title -->
 
                 <p
                   v-if="slide.subtitle"
                   v-bind="slide.subTitleAttrs"
                 >
                   {{ slide.subtitle }}
                 </p>
-                <!-- Slide title -->
+
+                <div
+                  v-if="slide.subTitleHTML"
+                  v-html="slide.subTitleHTML"
+                  v-bind="slide.subTitleAttrs"
+                />
               </div>