adata-ui 2.1.0 → 2.1.2

package/.editorconfig

@@ -1,12 +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
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

package/.nuxtrc

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

package/.playground/app.config.ts

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

package/README.md

@@ -1,75 +1,75 @@
-# 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.
+# 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

@@ -1,7 +1,7 @@
 export default defineAppConfig({
   myLayer: {
-    name: 'Adata UI v2'
-  }
+    name: 'Adata UI v2',
+  },
 })
 
 declare module '@nuxt/schema' {
@@ -13,7 +13,6 @@ declare module '@nuxt/schema' {
       oldVersion?: string
       landingUrl?: string
       pkUrl?: string
-      oldPkUrl?: string
       tenderUrl?: string
       workUrl?: string
       avtoUrl?: string
@@ -22,6 +21,8 @@ declare module '@nuxt/schema' {
       complianceUrl?: string
       counterParty?: string
       langIsOn?: boolean
+      authMode?: 'local' | 'separate'
+      cloudPayments?: string
     }
   }
 }

package/app.vue

@@ -1,5 +1,6 @@
 <template>
   <nuxt-layout>
+    <a-header />
     <nuxt-page></nuxt-page>
   </nuxt-layout>
 </template>

package/assets/styles/index.scss

@@ -0,0 +1,104 @@
+
+@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;
+}
+.Toastify__toast-container {
+  z-index: 10002 !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

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

package/components/elements/accordion/AAccordion.vue

@@ -86,23 +86,24 @@ function updateState() {
     isOpen.value = !!state
   }
 }
+let observer: MutationObserver | null = null
 
 onMounted(() => {
-  if (accordion.value) {
-    updateState()
+  if (!accordion.value) return
 
-    const observer = new MutationObserver(() => {
-      updateState()
-    })
+  updateState()
 
-    observer.observe(accordion.value?.el, {
-      attributes: true,
-      attributeFilter: ['data-headlessui-state']
-    })
+  observer = new MutationObserver(updateState)
+  observer.observe(accordion.value.el, {
+    attributes: true,
+    attributeFilter: ['data-headlessui-state']
+  })
+})
 
-    onBeforeUnmount(() => {
-      observer.disconnect()
-    })
+onBeforeUnmount(() => {
+  if (observer) {
+    observer.disconnect()
+    observer = null
   }
 })
 

package/components/elements/curve-block/ACurveBlock.vue

@@ -6,6 +6,7 @@ const props = defineProps<{
   title: string
   description: string
   to?: string
+  wide?: boolean
 }>()
 </script>
 
@@ -13,12 +14,59 @@ const props = defineProps<{
   <component
     :is="to ? NuxtLinkLocale : 'button'"
     :to="to"
-    class="curve-block relative w-fit cursor-pointer"
+    class="curve-block relative w-full cursor-pointer"
     active-class="active-item"
   >
     <svg
-      width="306"
-      height="182"
+      v-if="wide"
+      class="w-full"
+      viewBox="-2 -4 416 188"
+      fill="none"
+      preserveAspectRatio="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        class="border-path border-path--large"
+        d="M413.333 105.936C413.333 116.008 399.074 123 389.001 123C369.671 123 354.001 138.67 354.001 158C354.001 168.009 347.088 182 337.079 182H16.3334C7.49682 182 0.333374 174.837 0.333374 166V16C0.333374 7.16344 7.49682 0 16.3334 0H397.333C406.17 0 413.333 7.16344 413.333 16V105.936Z"
+        stroke-width="2"
+        fill="transparent"
+      />
+      <defs>
+        <linearGradient
+          id="gradient-light"
+          x1="164.372"
+          y1="-137.957"
+          x2="-20.5433"
+          y2="68.1723"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#479FFF" />
+          <stop
+            offset="1"
+            stop-color="#0070EB"
+          />
+        </linearGradient>
+
+        <linearGradient
+          id="gradient-dark"
+          x1="164.372"
+          y1="-137.957"
+          x2="-20.5433"
+          y2="68.1723"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#4FBDFF" />
+          <stop
+            offset="1"
+            stop-color="#1B98E2"
+          />
+        </linearGradient>
+      </defs>
+    </svg>
+
+    <svg
+      v-else
+      class="w-full"
       viewBox="-1 -1 308 184"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -62,26 +110,24 @@ const props = defineProps<{
     </svg>
 
     <div class="absolute left-6 top-6 flex flex-col gap-4 pr-6">
-      <div class="flex items-center gap-2">
-        <div class="rounded-sm bg-deepblue-900/5 dark:bg-gray-200/5 p-1">
+      <div class="flex items-center gap-2 title">
+        <div class="rounded-[4px] icon-item bg-deepblue-900/5 dark:bg-gray-200/5 p-1">
           <component
             :is="icon"
             class="size-6 shrink-0"
           />
         </div>
-        <p class="text-base font-semibold">
+        <p class="text-base  font-semibold">
           {{ title }}
         </p>
       </div>
-      <p class="text-sm text-gray-600 dark:text-gray-200">
+      <p class="text-left text-sm text-gray-600 dark:text-gray-200">
         {{ description }}
       </p>
     </div>
 
     <svg
-      class="absolute bottom-0 right-0"
-      width="48"
-      height="48"
+      class="absolute bottom-0 right-0 size-12 2xl:size-14"
       viewBox="0 0 48 48"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -151,18 +197,27 @@ const props = defineProps<{
   fill: #F4F5F6;
 }
 
+.border-path--large {
+  stroke-dasharray: 1400;
+  stroke-dashoffset: 1400;
+}
+
 .animated-border {
   stroke-dasharray: 180;
   stroke-dashoffset: 180;
   fill: #F4F5F6;
 }
 
-
-.active-item .border-path,
-.active-item .animated-border {
-  stroke-dashoffset: 0;
-  fill: white;
+.active-item .title {
+  color: #0070EB;
 }
+.active-item .border-path {
+  fill: #0070EB1A;
+}
+.active-item .icon-item {
+  background: #2C3E500D;
+}
+
 .curve-block:hover .border-path,
 .curve-block:hover .animated-border {
   transition: stroke-dashoffset 2s ease, fill 2s ease;
@@ -170,6 +225,12 @@ const props = defineProps<{
   fill: white;
 }
 
+.curve-block:hover .icon-item {
+  background-color: #E0EFFF;
+  color: #0070EB;
+  transition: all 2s ease, fill 2s ease;
+}
+
 .border-path {
   stroke: url(#gradient-light);
 }
@@ -196,12 +257,26 @@ const props = defineProps<{
     fill: #26282b;
   }
 
-  .active-item .border-path,
-  .active-item .animated-border {
-    stroke-dashoffset: 0;
-    fill: #131415;
+  .active-item .title {
+    color: #1b98e2;
+  }
+
+  .active-item .border-path {
+    fill: #1B98E21A;
+  }
+
+  .active-item .icon-item {
+    background: #E3E5E80D;
   }
 
+
+  .curve-block:hover .icon-item {
+    background-color: rgba(30, 88, 156, 0.6);
+    color: #1b98e2;
+    transition: all 2s ease, fill 2s ease;
+  }
+
+
   .curve-block:hover .border-path,
   .curve-block:hover .animated-border {
     fill: #131415;