adata-ui 0.3.99 → 2.0.1

package/-error.vue

@@ -0,0 +1,170 @@
+<script setup lang="ts">
+import type { NuxtError } from '#app'
+import ErrorTemplate from '#adata-ui/components/elements/error-template/index.vue'
+import type { ErrorTemplateData } from '#adata-ui/components/elements/error-template/types'
+
+const props = defineProps({
+  error: Object as () => NuxtError,
+})
+const { t } = useI18n()
+const localePath = useLocalePath()
+
+const errorData = computed<ErrorTemplateData>(() => {
+  const statusCode = props.error?.statusCode
+  switch (statusCode) {
+    case 504: {
+      return {
+        icon: '/error-illustrations/504.webp',
+        statusCode,
+        title: t('errorPage.504.title'),
+        content: {
+          subTitle: t('errorPage.504.subTitle'),
+        },
+      }
+    }
+    case 401:
+      return {
+        icon: '/error-illustrations/401.webp',
+        statusCode,
+        title: t('errorPage.401.title'),
+        content: {
+          subTitle: t('errorPage.401.subTitle'),
+        },
+      }
+    case 404:
+      return {
+        icon: '/error-illustrations/404.webp',
+        statusCode,
+        title: t('errorPage.404.title'),
+        content: {
+          subTitle: t('errorPage.404.subTitle'),
+          subTitleSecond: t('errorPage.404.subTitleSecond'),
+        },
+      }
+    case 403:
+      return {
+        icon: '/error-illustrations/403.webp',
+        statusCode,
+        title: t('errorPage.403.title'),
+        content: {
+          subTitle: t('errorPage.403.subTitle'),
+          subTitleSecond: t('errorPage.403.subTitleSecond'),
+        },
+      }
+    case 503:
+      return {
+        icon: '/error-illustrations/503.webp',
+        statusCode,
+        title: t('errorPage.503.title'),
+        content: {
+          subTitle: t('errorPage.503.subTitle'),
+        },
+      }
+    case 502:
+      return {
+        icon: '/error-illustrations/502.webp',
+        statusCode,
+        title: t('errorPage.502.title'),
+        content: {
+          title: 'Варианты решения проблемы:',
+          list: [
+            {
+              id: 1,
+              label: 'Обновите страницу',
+              link: false,
+            },
+            {
+              id: 1,
+              label: 'Очистите кэш браузера',
+              link: false,
+            },
+            {
+              id: 1,
+              label: 'Свяжитесь с технической поддержкой',
+              link: true,
+            },
+          ],
+        },
+      }
+    case 500:
+      return {
+        icon: '/error-illustrations/500.webp',
+        statusCode,
+        title: t('errorPage.500.title'),
+        content: {
+          subTitle: t('errorPage.500.subTitle'),
+        },
+
+      }
+  }
+})
+function handleError() {
+  navigateTo(`${localePath('/')}`, { external: true })
+}
+</script>
+
+<template>
+  <div class="container mx-auto lg:fixed lg:left-[50%] lg:top-[50%] lg:-translate-x-[50%] lg:-translate-y-[50%]">
+    <error-template :error="errorData">
+      <template #content>
+        <div class="body-500 mt-4 flex flex-col gap-4">
+          <div
+            v-if="errorData?.content"
+            class="flex flex-col gap-4 lg:gap-2"
+          >
+            <p
+              v-if="errorData.content?.title"
+              class="text-base font-bold"
+            >
+              {{ errorData.content.title }}
+            </p>
+            <p
+              v-if="errorData.content?.subTitle"
+              class="text-sm	font-medium lg:max-w-[560px]"
+            >
+              {{ errorData.content.subTitle }}
+            </p>
+            <p
+              v-if="errorData.content?.subTitleSecond"
+              class="text-sm	font-medium"
+            >
+              {{
+                errorData.content.subTitleSecond
+              }}
+            </p>
+            <div
+              v-for="item in errorData.content?.list"
+              :key="item.id"
+              class="flex items-center gap-1 text-sm	font-medium"
+            >
+              <a-icon-check class="stroke-blue-600" />
+              {{ item.label }}
+              <span
+                v-if="item.link"
+                class="text-blue-700"
+              >info@adata.kz</span>
+            </div>
+          </div>
+        </div>
+      </template>
+      <template #default>
+        <div class="mt-0 w-full p-4 lg:mt-8 lg:w-fit lg:p-0">
+          <a-button
+            v-if="errorData.statusCode !== 502"
+            class="w-full lg:w-fit"
+            @click="handleError"
+          >
+            {{t('modals.buttons.goToMainPage')}}
+          </a-button>
+        </div>
+      </template>
+    </error-template>
+    <span class="hidden">
+      {{ error }}
+    </span>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

package/.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+indent_size = 2
+indent_style = space
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

package/.eslintrc.cjs

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: ["@nuxt/eslint-config"],
+};

package/.gitlab-ci.yml

@@ -0,0 +1,16 @@
+stages:
+  - build
+
+create-archive:
+  stage: build
+  image: alpine
+  script:
+    - apk add --no-cache tar gzip
+    - ls -la
+    - tar --exclude='*.story.vue' --ignore-failed-read -czf master.tar.gz .
+  artifacts:
+    paths:
+      - master.tar.gz
+    expire_in: 12 week # The artifact will be kept for 1 week
+  only:
+    - master # Run this job only on the 'main' branch

package/.nuxtrc

@@ -0,0 +1 @@
+typescript.includeWorkspace = true

package/.nvmrc

@@ -0,0 +1 @@
+v20.11.0

package/.playground/app.config.ts

@@ -0,0 +1,5 @@
+export default defineAppConfig({
+  myLayer: {
+    name: 'My amazing Nuxt layer (overwritten)'
+  }
+})

package/.playground/nuxt.config.ts

@@ -0,0 +1,4 @@
+export default defineNuxtConfig({
+  extends: ['..'],
+  compatibilityDate: '2025-03-20',
+})

package/.prettierignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

package/.prettierrc

@@ -0,0 +1,10 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "semi": false,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "printWidth": 100,
+  "trailingComma": "none",
+  "plugins": ["prettier-plugin-tailwindcss"]
+}
+

package/README.md

@@ -1,7 +1,75 @@
-# Welcome to Adata-UI
-### here we develop UI components to our projects
-## Project setup
-```
-npm install
-npm run storybook
-```
+# Adata UI with Nuxt 3 using Layers
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `https://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm run dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm run build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm run preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

package/app.config.ts

@@ -0,0 +1,27 @@
+export default defineAppConfig({
+  myLayer: {
+    name: 'Adata UI v2'
+  }
+})
+
+declare module '@nuxt/schema' {
+  interface AppConfigInput {
+    myLayer?: {
+      /** Project name */
+      name?: string
+      loginUrl?: string
+      oldVersion?: string
+      landingUrl?: string
+      pkUrl?: string
+      oldPkUrl?: string
+      tenderUrl?: string
+      workUrl?: string
+      avtoUrl?: string
+      analyticsUrl?: string
+      tnvedUrl?: string
+      complianceUrl?: string
+      counterParty?: string
+      langIsOn?: boolean
+    }
+  }
+}

package/app.vue

@@ -0,0 +1,7 @@
+<template>
+  <nuxt-layout>
+    <nuxt-page></nuxt-page>
+  </nuxt-layout>
+</template>
+<script setup lang="ts">
+</script>

package/assets/styles/index.scss

@@ -0,0 +1,101 @@
+
+@use './modules/typography' as *;
+@use "./modules/base" as *;
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
+html {
+  scrollbar-gutter: stable;
+}
+
+.dark {
+  color-scheme: dark;
+}
+
+body {
+  padding: 0 !important;
+  color: #2C3E50;
+  background-color: #F4F5F6;
+}
+
+.dark body {
+  color: #E3E5E8;
+  background-color: #161617;
+}
+
+html::-webkit-scrollbar {
+  width: 15px;
+}
+
+html::-webkit-scrollbar-thumb {
+  background: #c4c4c4;
+}
+
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+.no-scrollbar {
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}
+
+@media (min-width: 320px) and (max-width: 767px) {
+  .a-container {
+    padding: 0
+  }
+  .mobile-padding {
+    padding: 16px;
+  }
+}
+@media (prefers-color-scheme: dark) {
+  .bg-gradient-blue {
+    background: linear-gradient(236.46deg, #4FBDFF -2.39%, #1B98E2 79.1%);
+  }
+}
+@media (prefers-color-scheme: light) {
+  .bg-gradient-blue {
+    background: linear-gradient(236.46deg, #479FFF -2.39%, #0070EB 79.1%);
+  }
+}
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.toast__body{
+  padding:0 16px 0 0 !important;
+  margin:0 !important;
+  align-items: stretch !important;
+}
+input[type="search"]::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+  appearance: none;
+}
+input[type="search"]::-ms-clear {
+  display: none;
+  width: 0;
+  height: 0;
+}
+/* Firefox */
+input[type=number] {
+  -moz-appearance: textfield;
+}
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  border: 0;
+  padding: 0;
+  white-space: nowrap;
+  clip-path: inset(100%);
+  clip: rect(0 0 0 0);
+  overflow: hidden;
+}

package/assets/styles/modules/_base.scss

@@ -0,0 +1,5 @@
+@layer components {
+  .a-container {
+    @apply  container mx-auto px-4 2xl:px-16;
+  }
+}

package/assets/styles/modules/_typography.scss

@@ -0,0 +1,152 @@
+// Visit https://www.figma.com/file/nJY45RLoow0IsmpMZ35aTR/DE blue-defaultSIGN-SYSTEM-NEW?type=design&node-id=619-53613&mode=design&t=tY2NLdArlQhUP9d3-0
+// for more information on typography styles
+// And see https://tailwindcss.com/docs/adding-custom-styles for more information on adding custom styles
+
+@layer components {
+
+  // Headings
+  .heading-01 {
+    @apply font-bold text-[2rem] leading-10;
+  }
+
+  .heading-02 {
+    @apply font-bold text-2xl leading-8;
+  }
+
+  .heading-03 {
+    @apply font-semibold text-xl leading-6;
+  }
+
+  .heading-04 {
+    @apply font-semibold text-base leading-5;
+  }
+
+  .heading-05 {
+    @apply font-semibold text-sm leading-5;
+  }
+
+  // Body
+  .body-400 {
+    @apply font-normal text-sm leading-5;
+  }
+
+  .body-500 {
+    @apply font-medium text-sm leading-5;
+  }
+
+  .body-600 {
+    @apply font-semibold text-sm leading-5
+  }
+
+  .body-s-400 {
+    @apply font-normal text-sm leading-4;
+  }
+
+  .body-s-500 {
+    @apply font-medium text-sm leading-4;
+  }
+
+  // Caption
+  .caption-400 {
+    @apply font-normal text-[0.625rem] leading-4;
+  }
+
+  .caption-500 {
+    @apply font-medium text-[0.625rem] leading-4;
+  }
+
+  .caption-700 {
+    @apply font-bold text-[0.625rem] leading-4;
+  }
+
+  // Form
+  .label-400 {
+    @apply font-normal text-sm leading-5;
+  }
+
+  .label-600 {
+    @apply font-semibold text-sm leading-5;
+  }
+
+  .label-s-400 {
+    @apply font-normal text-xs leading-4;
+  }
+
+  .label-s-700 {
+    @apply font-bold text-xs leading-4;
+  }
+
+  .optional-i-700 {
+    @apply font-bold italic text-sm leading-5;
+  }
+
+  .placeholder-300 {
+    @apply font-light text-sm leading-5;
+  }
+
+  .description-400 {
+    @apply font-normal text-xs leading-5;
+  }
+
+  //  Link
+  .link-400 {
+    @apply text-blue-500 font-normal text-sm leading-5;
+  }
+
+  .link-stroke-400 {
+    @apply text-blue-500 font-normal text-sm leading-5;
+  }
+
+  .link-s-400 {
+    @apply text-blue-500 font-normal text-sm leading-4;
+  }
+
+  .link-s-stroke-400 {
+    @apply text-blue-500 font-normal text-sm leading-4;
+  }
+
+  .link-small-800 {
+    @apply text-blue-500 font-bold text-sm leading-4;
+  }
+
+  //  Special Styles
+  .display-80-700 {
+    @apply font-bold text-[5rem] leading-[6.5rem];
+  }
+
+  .display-80-400 {
+    @apply font-normal text-[5rem] leading-[6.5rem];
+  }
+
+  .display-60-700 {
+    @apply font-bold text-[3.75rem] leading-[4.750rem];
+  }
+
+  .display-60-400 {
+    @apply font-normal text-[3.75rem] leading-[4.750rem];
+  }
+
+  .display-48-700 {
+    @apply font-bold text-[3rem] leading-[4rem];
+  }
+
+  .display-48-400 {
+    @apply font-normal text-[3rem] leading-[4rem];
+  }
+
+  .numbers-60-700 {
+    @apply font-bold text-[3.75rem] leading-[3.5rem];
+  }
+
+  .numbers-60-400 {
+    @apply font-normal text-[3.75rem] leading-[3.5rem];
+  }
+
+  .numbers-40-700 {
+    @apply font-bold text-[2.5rem] leading-[3.375rem];
+  }
+
+  .numbers-40-400 {
+    @apply font-normal text-[2.5rem] leading-[3.375rem];
+  }
+}

package/components/elements/README.md

@@ -0,0 +1 @@
+# button, alerts, dropdown