adata-ui 2.0.5 → 2.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,9 @@
1
+ <template>
2
+ <div>
3
+ <nuxt-layout>
4
+ <nuxt-page />
5
+ </nuxt-layout>
6
+ </div>
7
+ </template>
8
+ <script setup lang="ts">
9
+ </script>
@@ -0,0 +1,13 @@
1
+ <script setup lang="ts">
2
+
3
+ </script>
4
+
5
+ <template>
6
+ <div>
7
+ <a-header></a-header>
8
+ </div>
9
+ </template>
10
+
11
+ <style scoped>
12
+
13
+ </style>
@@ -0,0 +1,226 @@
1
+ @import "tailwindcss" source("../../..");
2
+
3
+ @theme static {
4
+ --color-blue-50: #eff7ff;
5
+ --color-blue-100: #e0efff;
6
+ --color-blue-200: #bddfff;
7
+ --color-blue-300: #90d7ff;
8
+ --color-blue-400: #43afed;
9
+ --color-blue-500: #1b98e2;
10
+ --color-blue-600: #068dff;
11
+ --color-blue-700: #0070eb;
12
+ --color-blue-800: #085dc5;
13
+ --color-blue-900: #0d509b;
14
+ --color-blue-950: #0e315d;
15
+
16
+ --color-deepblue-50: #f5f7fa;
17
+ --color-deepblue-100: #eaeff4;
18
+ --color-deepblue-200: #cfdce8;
19
+ --color-deepblue-300: #a6bfd3;
20
+ --color-deepblue-400: #759cbb;
21
+ --color-deepblue-500: #5480a3;
22
+ --color-deepblue-600: #416788;
23
+ --color-deepblue-700: #35526f;
24
+ --color-deepblue-800: #2f475d;
25
+ --color-deepblue-900: #2c3e50;
26
+ --color-deepblue-950: #1d2834;
27
+
28
+ --color-gray-50: #f4f5f6;
29
+ --color-gray-100: #ebecee;
30
+ --color-gray-200: #e3e5e8;
31
+ --color-gray-300: #c9cccf;
32
+ --color-gray-400: #b7bcc2;
33
+ --color-gray-500: #9da3ac;
34
+ --color-gray-600: #71757a;
35
+ --color-gray-700: #5a5d60;
36
+ --color-gray-800: #393d40;
37
+ --color-gray-900: #26282b;
38
+ --color-gray-950: #161617;
39
+
40
+ --color-yellow-50: #fefbe8;
41
+ --color-yellow-100: #fef7c3;
42
+ --color-yellow-200: #feed8a;
43
+ --color-yellow-300: #fedb46;
44
+ --color-yellow-400: #fbc920;
45
+ --color-yellow-500: #ebad07;
46
+ --color-yellow-600: #cb8503;
47
+ --color-yellow-700: #a25e06;
48
+ --color-yellow-800: #854a0e;
49
+ --color-yellow-900: #713c12;
50
+ --color-yellow-950: #421e06;
51
+
52
+ --color-orange-50: #fffbea;
53
+ --color-orange-100: #fff4c5;
54
+ --color-orange-200: #ffe987;
55
+ --color-orange-300: #ffd748;
56
+ --color-orange-400: #ffc31e;
57
+ --color-orange-500: #ff9900;
58
+ --color-orange-600: #e37b00;
59
+ --color-orange-700: #b95304;
60
+ --color-orange-800: #96400a;
61
+ --color-orange-900: #7b350c;
62
+ --color-orange-950: #471901;
63
+
64
+ --color-red-50: #fef3f2;
65
+ --color-red-100: #fde5e3;
66
+ --color-red-200: #fccfcc;
67
+ --color-red-300: #f9ada8;
68
+ --color-red-400: #f47e75;
69
+ --color-red-500: #e74135;
70
+ --color-red-600: #d6372c;
71
+ --color-red-700: #b42b21;
72
+ --color-red-800: #95271f;
73
+ --color-red-900: #7c2620;
74
+ --color-red-950: #43100c;
75
+
76
+ --color-green-50: #f3faf3;
77
+ --color-green-100: #e3f5e3;
78
+ --color-green-200: #c8eac9;
79
+ --color-green-300: #9dd89f;
80
+ --color-green-400: #6bbd6e;
81
+ --color-green-500: #4caf50;
82
+ --color-green-600: #358438;
83
+ --color-green-700: #2d6830;
84
+ --color-green-800: #275429;
85
+ --color-green-900: #224525;
86
+ --color-green-950: #0e2510;
87
+
88
+ --color-black: #000;
89
+ --color-white: #fff;
90
+ --text-color-inverted: var(--color-gray-950);
91
+ }
92
+
93
+ html {
94
+ scrollbar-gutter: stable;
95
+ }
96
+
97
+ .dark {
98
+ color-scheme: dark;
99
+ }
100
+
101
+ body {
102
+ padding: 0 !important;
103
+ color: #2C3E50;
104
+ background-color: #F4F5F6;
105
+ }
106
+
107
+ .dark body {
108
+ color: #E3E5E8;
109
+ background-color: #161617;
110
+ }
111
+
112
+ html::-webkit-scrollbar {
113
+ width: 15px;
114
+ }
115
+
116
+ html::-webkit-scrollbar-thumb {
117
+ background: #c4c4c4;
118
+ }
119
+
120
+ .no-scrollbar::-webkit-scrollbar {
121
+ display: none;
122
+ }
123
+
124
+ /* Hide scrollbar for IE, Edge and Firefox */
125
+ .no-scrollbar {
126
+ -ms-overflow-style: none; /* IE and Edge */
127
+ scrollbar-width: none; /* Firefox */
128
+ }
129
+
130
+ @media (min-width: 320px) and (max-width: 767px) {
131
+ .a-container {
132
+ padding: 0
133
+ }
134
+ .mobile-padding {
135
+ padding: 16px;
136
+ }
137
+ }
138
+ @media (prefers-color-scheme: dark) {
139
+ .bg-gradient-blue {
140
+ background: linear-gradient(236.46deg, #4FBDFF -2.39%, #1B98E2 79.1%);
141
+ }
142
+ }
143
+ @media (prefers-color-scheme: light) {
144
+ .bg-gradient-blue {
145
+ background: linear-gradient(236.46deg, #479FFF -2.39%, #0070EB 79.1%);
146
+ }
147
+ }
148
+
149
+ input::-webkit-outer-spin-button,
150
+ input::-webkit-inner-spin-button {
151
+ -webkit-appearance: none;
152
+ margin: 0;
153
+ }
154
+ .toast__body{
155
+ padding:0 16px 0 0 !important;
156
+ margin:0 !important;
157
+ align-items: stretch !important;
158
+ }
159
+ input[type="search"]::-webkit-search-cancel-button {
160
+ -webkit-appearance: none;
161
+ appearance: none;
162
+ }
163
+ input[type="search"]::-ms-clear {
164
+ display: none;
165
+ width: 0;
166
+ height: 0;
167
+ }
168
+ /* Firefox */
169
+ input[type=number] {
170
+ -moz-appearance: textfield;
171
+ }
172
+
173
+ .visually-hidden {
174
+ position: absolute;
175
+ width: 1px;
176
+ height: 1px;
177
+ margin: -1px;
178
+ border: 0;
179
+ padding: 0;
180
+ white-space: nowrap;
181
+ clip-path: inset(100%);
182
+ clip: rect(0 0 0 0);
183
+ overflow: hidden;
184
+ }
185
+
186
+ /*//'gr-blue': 'linear-gradient(236.46deg, #479FFF -2.39%, #0070EB 79.1%)',*/
187
+ /*//'gr-yellow': 'linear-gradient(236.46deg, #FFE364 -2.39%, #FBC920 79.1%);\n'*/
188
+
189
+
190
+ .a-container { @apply container mx-auto px-4 2xl:px-16; }
191
+
192
+ .heading-01 {@apply font-bold text-[2rem] leading-10; }
193
+ .heading-02 {@apply font-bold text-2xl leading-8; }
194
+ .heading-03 {@apply font-semibold text-xl leading-6; }
195
+ .heading-04 {@apply font-semibold text-base leading-5; }
196
+ .heading-05 {@apply font-semibold text-sm leading-5; }
197
+ /*// Body.body-400 { @apply font-normal text-sm leading-5;}*/
198
+ .body-500 {@apply font-medium text-sm leading-5; }
199
+ .body-600 {@apply font-semibold text-sm leading-5 }
200
+ .body-s-400 {@apply font-normal text-sm leading-4; }
201
+ .body-s-500 {@apply font-medium text-sm leading-4; }
202
+ /*// Caption.caption-400 { @apply font-normal text-[0.625rem] leading-4;}*/
203
+ .caption-500 {@apply font-medium text-[0.625rem] leading-4; }
204
+ .caption-700 {@apply font-bold text-[0.625rem] leading-4; }
205
+ /*// Form.label-400 { @apply font-normal text-sm leading-5;}*/
206
+ .label-600 {@apply font-semibold text-sm leading-5; }
207
+ .label-s-400 {@apply font-normal text-xs leading-4; }
208
+ .label-s-700 {@apply font-bold text-xs leading-4; }
209
+ .optional-i-700 {@apply font-bold italic text-sm leading-5; }
210
+ .placeholder-300 {@apply font-light text-sm leading-5; }
211
+ .description-400 {@apply font-normal text-xs leading-5; }
212
+ /*// Link.link-400 { @apply text-blue-500 font-normal text-sm leading-5;}*/
213
+ .link-stroke-400 {@apply text-blue-500 font-normal text-sm leading-5; }
214
+ .link-s-400 {@apply text-blue-500 font-normal text-sm leading-4; }
215
+ .link-s-stroke-400 {@apply text-blue-500 font-normal text-sm leading-4; }
216
+ .link-small-800 {@apply text-blue-500 font-bold text-sm leading-4; }
217
+ /*// Special Styles.display-80-700 { @apply font-bold text-[5rem] leading-[6.5rem];}*/
218
+ .display-80-400 {@apply font-normal text-[5rem] leading-[6.5rem]; }
219
+ .display-60-700 {@apply font-bold text-[3.75rem] leading-[4.750rem]; }
220
+ .display-60-400 {@apply font-normal text-[3.75rem] leading-[4.750rem]; }
221
+ .display-48-700 {@apply font-bold text-[3rem] leading-[4rem]; }
222
+ .display-48-400 {@apply font-normal text-[3rem] leading-[4rem]; }
223
+ .numbers-60-700 {@apply font-bold text-[3.75rem] leading-[3.5rem]; }
224
+ .numbers-60-400 {@apply font-normal text-[3.75rem] leading-[3.5rem]; }
225
+ .numbers-40-700 {@apply font-bold text-[2.5rem] leading-[3.375rem]; }
226
+ .numbers-40-400 {@apply font-normal text-[2.5rem] leading-[3.375rem]; }
@@ -0,0 +1,21 @@
1
+ <script setup lang="ts">
2
+ import IconLogout from '#adata-ui/icons/logout.vue'
3
+
4
+ const { t } = useI18n()
5
+
6
+ defineEmits(['click'])
7
+ </script>
8
+
9
+ <template>
10
+ <div
11
+ class="hidden w-max cursor-pointer items-center gap-2 rounded-2xl bg-blue-700 px-4 py-[6px] font-semibold dark:bg-blue-500 lg:flex"
12
+ @click="$emit('click')"
13
+ >
14
+ <icon-logout class="text-white dark:text-gray-900 lg:h-4 lg:w-4" />
15
+ <span class="hidden text-sm font-semibold text-white dark:text-gray-900 lg:inline-block min-w-[44px]">
16
+ {{ t('header.login') }}
17
+ </span>
18
+ </div>
19
+ </template>
20
+
21
+ <style scoped></style>
@@ -18,12 +18,12 @@ defineOptions({ name: 'AHeader' })
18
18
  interface Props {
19
19
  replenish?: string
20
20
  hasNotification?: boolean
21
- email: string | undefined
22
- rate: string
23
- daysRemaining: number
24
- limitRemaining: number
25
- balance: number
26
- isAuthenticated: boolean
21
+ email?: string | undefined
22
+ rate?: string
23
+ daysRemaining?: number
24
+ limitRemaining?: number
25
+ balance?: number
26
+ isAuthenticated?: boolean
27
27
  showLogIn?: boolean
28
28
  mobileHeaderType?: 'search' | 'default'
29
29
  module?: ProjectKeys
@@ -36,6 +36,7 @@ const props = withDefaults(defineProps<Props>(), {
36
36
  balance: 0,
37
37
  rate: 'Базовый',
38
38
  showLogIn: true,
39
+ isAuthenticated: false,
39
40
  mobileHeaderType: 'default',
40
41
  module: 'pk'
41
42
  })
@@ -102,19 +103,34 @@ onBeforeMount(() => {
102
103
  >
103
104
  <div class="a-container mobile-padding flex h-full items-center justify-between gap-2">
104
105
  <!-- Desktop hidden-->
105
- <section id="mobile-header" class="grow lg:hidden">
106
- <div v-if="mobileHeaderType === 'default'" class="flex justify-center">
107
- <nuxt-link class="text-deepblue dark:text-[#E3E5E8]" @click="goToAnotherModule">
106
+ <section
107
+ id="mobile-header"
108
+ class="grow lg:hidden"
109
+ >
110
+ <div
111
+ v-if="mobileHeaderType === 'default'"
112
+ class="flex justify-center"
113
+ >
114
+ <nuxt-link
115
+ class="text-deepblue dark:text-[#E3E5E8]"
116
+ @click="goToAnotherModule"
117
+ >
108
118
  <span class="visually-hidden"> Сервисы Adata.kz</span>
109
119
 
110
- <adata-logo :font-controlled="false" filled />
120
+ <adata-logo
121
+ :font-controlled="false"
122
+ filled
123
+ />
111
124
  </nuxt-link>
112
125
  </div>
113
126
  <div
114
127
  v-else-if="mobileHeaderType === 'search'"
115
128
  class="flex w-full items-center gap-2 bg-white dark:bg-gray-900 lg:hidden"
116
129
  >
117
- <logo class="dark:text-gray-200" @click="goToAnotherModule" />
130
+ <logo
131
+ class="dark:text-gray-200"
132
+ @click="goToAnotherModule"
133
+ />
118
134
  <button
119
135
  class="flex w-full items-center gap-2 rounded bg-gray-50 px-4 py-1.5 dark:bg-gray-800 dark:text-gray-500"
120
136
  @click="$emit('search')"
@@ -125,7 +141,10 @@ onBeforeMount(() => {
125
141
  </div>
126
142
  </section>
127
143
  <div class="lg:hidden">
128
- <lang-switcher v-if="langIsOn || module === 'fea'" class="lg:hidden" />
144
+ <lang-switcher
145
+ v-if="langIsOn || module === 'fea'"
146
+ class="lg:hidden"
147
+ />
129
148
  </div>
130
149
  <!--Mobile hidden-->
131
150
  <nav class="hidden items-center gap-4 lg:flex">
@@ -135,19 +154,28 @@ onBeforeMount(() => {
135
154
  class="text-deepblue cursor-pointer dark:text-[#E3E5E8]"
136
155
  @click="goToAnotherModule"
137
156
  >
138
- <adata-logo :font-controlled="false" filled />
157
+ <adata-logo
158
+ :font-controlled="false"
159
+ filled
160
+ />
139
161
  </nuxt-link-locale>
140
162
  <header-link />
141
163
  </nav>
142
164
  <div class="text-deepblue hidden items-center gap-4 dark:text-[#E3E5E8] lg:flex">
143
165
  <!--Mobile hidden-->
144
166
  <div class="hidden items-center gap-4 lg:flex">
145
- <a-change-version v-if="oldVersion" :url="oldVersion" />
167
+ <a-change-version
168
+ v-if="oldVersion"
169
+ :url="oldVersion"
170
+ />
146
171
  <a-color-mode />
147
172
  <lang-switcher v-if="langIsOn || module === 'fea'" />
148
173
  </div>
149
174
 
150
- <a-dropdown placement="right" v-show="isAuthenticated">
175
+ <a-dropdown
176
+ v-show="isAuthenticated"
177
+ placement="right"
178
+ >
151
179
  <template #default="{ onExpand, expanded }">
152
180
  <div
153
181
  class="hidden cursor-pointer items-center gap-2 text-sm font-semibold lg:flex"
@@ -168,16 +196,10 @@ onBeforeMount(() => {
168
196
  />
169
197
  </template>
170
198
  </a-dropdown>
171
- <div
199
+ <a-button-login
172
200
  v-show="!isAuthenticated && showLogIn"
173
- class="hidden cursor-pointer items-center gap-2 font-semibold lg:flex"
174
201
  @click="goAuth"
175
- >
176
- <icon-logout class="lg:h-4 lg:w-4" />
177
- <span class="hidden lg:inline-block">
178
- {{ t('header.login') }}
179
- </span>
180
- </div>
202
+ />
181
203
  </div>
182
204
  </div>
183
205
  </header>
@@ -1,5 +1,16 @@
1
1
  <template>
2
- <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
3
- <path fill-rule="evenodd" clip-rule="evenodd" d="M2.33398 7.9987C2.33398 4.86909 4.87104 2.33203 8.00065 2.33203C11.1302 2.33203 13.6673 4.86909 13.6673 7.9987C13.6673 11.1283 11.1302 13.6654 8.00065 13.6654C4.87104 13.6654 2.33398 11.1283 2.33398 7.9987ZM8.00065 1.33203C4.31875 1.33203 1.33398 4.3168 1.33398 7.9987C1.33398 11.6806 4.31875 14.6654 8.00065 14.6654C11.6825 14.6654 14.6673 11.6806 14.6673 7.9987C14.6673 4.3168 11.6825 1.33203 8.00065 1.33203ZM5.88757 7.64515C5.69231 7.44988 5.37572 7.44988 5.18046 7.64515C4.9852 7.84041 4.9852 8.15699 5.18046 8.35225L7.64713 10.8189C7.84239 11.0142 8.15897 11.0142 8.35423 10.8189L10.8209 8.35225C11.0161 8.15699 11.0161 7.84041 10.8209 7.64515C10.6256 7.44988 10.309 7.44988 10.1138 7.64515L8.50065 9.25829V5.53206C8.50065 5.25592 8.27679 5.03206 8.00065 5.03206C7.72451 5.03206 7.50065 5.25592 7.50065 5.53206V9.25823L5.88757 7.64515Z" fill="#0070EB"/>
2
+ <svg
3
+ width="16"
4
+ height="16"
5
+ viewBox="0 0 16 16"
6
+ fill="none"
7
+ xmlns="http://www.w3.org/2000/svg"
8
+ >
9
+ <path
10
+ fill-rule="evenodd"
11
+ clip-rule="evenodd"
12
+ d="M2.33398 7.9987C2.33398 4.86909 4.87104 2.33203 8.00065 2.33203C11.1302 2.33203 13.6673 4.86909 13.6673 7.9987C13.6673 11.1283 11.1302 13.6654 8.00065 13.6654C4.87104 13.6654 2.33398 11.1283 2.33398 7.9987ZM8.00065 1.33203C4.31875 1.33203 1.33398 4.3168 1.33398 7.9987C1.33398 11.6806 4.31875 14.6654 8.00065 14.6654C11.6825 14.6654 14.6673 11.6806 14.6673 7.9987C14.6673 4.3168 11.6825 1.33203 8.00065 1.33203ZM5.88757 7.64515C5.69231 7.44988 5.37572 7.44988 5.18046 7.64515C4.9852 7.84041 4.9852 8.15699 5.18046 8.35225L7.64713 10.8189C7.84239 11.0142 8.15897 11.0142 8.35423 10.8189L10.8209 8.35225C11.0161 8.15699 11.0161 7.84041 10.8209 7.64515C10.6256 7.44988 10.309 7.44988 10.1138 7.64515L8.50065 9.25829V5.53206C8.50065 5.25592 8.27679 5.03206 8.00065 5.03206C7.72451 5.03206 7.50065 5.25592 7.50065 5.53206V9.25823L5.88757 7.64515Z"
13
+ fill="currentColor"
14
+ />
4
15
  </svg>
5
16
  </template>
package/icons/search.vue CHANGED
@@ -3,9 +3,21 @@
3
3
  </script>
4
4
 
5
5
  <template>
6
- <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="https://www.w3.org/2000/svg">
6
+ <svg
7
+ width="16"
8
+ height="16"
9
+ viewBox="0 0 16 16"
10
+ fill="none"
11
+ xmlns="https://www.w3.org/2000/svg"
12
+ >
7
13
  <g id="search">
8
- <path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M2.05012 7.28051C2.05012 4.39178 4.3919 2.04999 7.28063 2.04999C10.1694 2.04999 12.5111 4.39178 12.5111 7.28051C12.5111 10.1692 10.1694 12.511 7.28063 12.511C4.3919 12.511 2.05012 10.1692 2.05012 7.28051ZM7.28063 1C3.812 1 1.00012 3.81188 1.00012 7.28051C1.00012 10.7491 3.812 13.561 7.28063 13.561C8.82595 13.561 10.2409 13.0029 11.335 12.0773L14.1038 14.8461C14.3088 15.0512 14.6412 15.0512 14.8463 14.8461C15.0513 14.6411 15.0513 14.3087 14.8463 14.1037L12.0774 11.3348C13.003 10.2408 13.5611 8.82582 13.5611 7.28051C13.5611 3.81188 10.7493 1 7.28063 1Z" fill="currentColor"/>
14
+ <path
15
+ id="Vector"
16
+ fill-rule="evenodd"
17
+ clip-rule="evenodd"
18
+ d="M2.05012 7.28051C2.05012 4.39178 4.3919 2.04999 7.28063 2.04999C10.1694 2.04999 12.5111 4.39178 12.5111 7.28051C12.5111 10.1692 10.1694 12.511 7.28063 12.511C4.3919 12.511 2.05012 10.1692 2.05012 7.28051ZM7.28063 1C3.812 1 1.00012 3.81188 1.00012 7.28051C1.00012 10.7491 3.812 13.561 7.28063 13.561C8.82595 13.561 10.2409 13.0029 11.335 12.0773L14.1038 14.8461C14.3088 15.0512 14.6412 15.0512 14.8463 14.8461C15.0513 14.6411 15.0513 14.3087 14.8463 14.1037L12.0774 11.3348C13.003 10.2408 13.5611 8.82582 13.5611 7.28051C13.5611 3.81188 10.7493 1 7.28063 1Z"
19
+ fill="currentColor"
20
+ />
9
21
  </g>
10
22
  </svg>
11
23
  </template>
package/nuxt.config.ts CHANGED
@@ -1,13 +1,14 @@
1
1
  // https://nuxt.com/docs/api/configuration/nuxt-config
2
2
  import { createResolver } from '@nuxt/kit'
3
3
  const { resolve } = createResolver(import.meta.url)
4
+ import tailwindcss from "@tailwindcss/vite";
5
+
4
6
  export default defineNuxtConfig({
5
7
 
6
8
  devtools: { enabled: true },
7
9
 
8
10
  modules: [
9
11
  '@nuxt/image',
10
- '@nuxtjs/tailwindcss',
11
12
  '@nuxtjs/color-mode',
12
13
  '@samk-dev/nuxt-vcalendar',
13
14
  '@nuxtjs/i18n',
@@ -49,16 +50,11 @@ export default defineNuxtConfig({
49
50
  }
50
51
  },
51
52
 
52
- vite: {
53
- css: {
54
- preprocessorOptions: {
55
- scss: {
56
- api: 'modern-compiler',
57
- },
58
- },
59
- },
60
- },
61
-
62
- css: ['#adata-ui/assets/styles/index.scss']
53
+ css: ['./assets/styles/index.css'],
63
54
 
55
+ vite: {
56
+ plugins: [
57
+ tailwindcss(),
58
+ ],
59
+ }
64
60
  })
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "adata-ui",
3
3
  "type": "module",
4
- "version": "2.0.5",
4
+ "version": "2.1.0",
5
5
  "main": "./nuxt.config.ts",
6
6
  "scripts": {
7
7
  "dev": "nuxi dev .playground",
@@ -10,26 +10,18 @@
10
10
  "preview": "nuxt preview .playground",
11
11
  "lint": "eslint .",
12
12
  "type-check": "vue-tsc --noEmit",
13
- "postinstall": "nuxt prepare .playground",
14
- "test": "vitest --ui",
15
- "coverage": "vitest run --coverage"
13
+ "postinstall": "nuxt prepare .playground"
16
14
  },
17
15
  "devDependencies": {
18
16
  "@nuxt/eslint-config": "^0.7.6",
19
- "@nuxt/test-utils": "^3.19.2",
20
17
  "@types/body-scroll-lock": "^3.1.2",
21
18
  "@types/lodash-es": "^4.17.12",
22
- "@vitest/coverage-v8": "^1.6.1",
23
- "@vitest/ui": "^1.6.1",
24
- "@vue/test-utils": "^2.4.6",
25
- "eslint": "^9.32.0",
26
- "histoire": "^0.17.17",
19
+ "eslint": "^9.33.0",
27
20
  "nuxt": "^3.18.1",
28
21
  "prettier": "^3.6.2",
29
22
  "prettier-plugin-tailwindcss": "^0.5.14",
30
23
  "sass-embedded": "^1.90.0",
31
24
  "typescript": "^5.9.2",
32
- "vitest": "^1.6.1",
33
25
  "vue-tsc": "^2.2.12"
34
26
  },
35
27
  "dependencies": {
@@ -40,26 +32,22 @@
40
32
  "@nuxtjs/color-mode": "^3.5.2",
41
33
  "@nuxtjs/google-fonts": "^3.2.0",
42
34
  "@nuxtjs/i18n": "9.3.3",
43
- "@nuxtjs/tailwindcss": "^6.14.0",
44
35
  "@popperjs/core": "^2.11.8",
45
36
  "@samk-dev/nuxt-vcalendar": "^1.0.4",
46
- "@tailwindcss/aspect-ratio": "^0.4.2",
47
- "@tailwindcss/container-queries": "^0.1.1",
48
- "@tailwindcss/forms": "^0.5.10",
49
- "@tailwindcss/typography": "^0.5.16",
37
+ "@tailwindcss/vite": "^4.1.11",
50
38
  "@vueuse/core": "^10.11.1",
51
39
  "@vueuse/integrations": "^10.11.1",
52
40
  "@vueuse/math": "^10.11.1",
53
41
  "body-scroll-lock": "3.1.5",
54
42
  "lodash-es": "^4.17.21",
55
43
  "lodash.isequal": "^4.5.0",
56
- "maska": "^2.1.11",
44
+ "maska": "^3.2.0",
57
45
  "ofetch": "^1.4.1",
58
46
  "sass": "^1.90.0",
59
47
  "scss": "^0.2.4",
60
48
  "tailwind-merge": "^2.6.0",
61
- "tailwindcss": "^3.4.17",
49
+ "tailwindcss": "^4.1.11",
62
50
  "vue3-toastify": "^0.2.8",
63
- "zod": "^4.0.15"
51
+ "zod": "^4.0.17"
64
52
  }
65
53
  }
@@ -1,101 +0,0 @@
1
-
2
- @use './modules/typography' as *;
3
- @use "./modules/base" as *;
4
-
5
- @tailwind base;
6
- @tailwind components;
7
- @tailwind utilities;
8
-
9
-
10
- html {
11
- scrollbar-gutter: stable;
12
- }
13
-
14
- .dark {
15
- color-scheme: dark;
16
- }
17
-
18
- body {
19
- padding: 0 !important;
20
- color: #2C3E50;
21
- background-color: #F4F5F6;
22
- }
23
-
24
- .dark body {
25
- color: #E3E5E8;
26
- background-color: #161617;
27
- }
28
-
29
- html::-webkit-scrollbar {
30
- width: 15px;
31
- }
32
-
33
- html::-webkit-scrollbar-thumb {
34
- background: #c4c4c4;
35
- }
36
-
37
- .no-scrollbar::-webkit-scrollbar {
38
- display: none;
39
- }
40
-
41
- /* Hide scrollbar for IE, Edge and Firefox */
42
- .no-scrollbar {
43
- -ms-overflow-style: none; /* IE and Edge */
44
- scrollbar-width: none; /* Firefox */
45
- }
46
-
47
- @media (min-width: 320px) and (max-width: 767px) {
48
- .a-container {
49
- padding: 0
50
- }
51
- .mobile-padding {
52
- padding: 16px;
53
- }
54
- }
55
- @media (prefers-color-scheme: dark) {
56
- .bg-gradient-blue {
57
- background: linear-gradient(236.46deg, #4FBDFF -2.39%, #1B98E2 79.1%);
58
- }
59
- }
60
- @media (prefers-color-scheme: light) {
61
- .bg-gradient-blue {
62
- background: linear-gradient(236.46deg, #479FFF -2.39%, #0070EB 79.1%);
63
- }
64
- }
65
-
66
- input::-webkit-outer-spin-button,
67
- input::-webkit-inner-spin-button {
68
- -webkit-appearance: none;
69
- margin: 0;
70
- }
71
- .toast__body{
72
- padding:0 16px 0 0 !important;
73
- margin:0 !important;
74
- align-items: stretch !important;
75
- }
76
- input[type="search"]::-webkit-search-cancel-button {
77
- -webkit-appearance: none;
78
- appearance: none;
79
- }
80
- input[type="search"]::-ms-clear {
81
- display: none;
82
- width: 0;
83
- height: 0;
84
- }
85
- /* Firefox */
86
- input[type=number] {
87
- -moz-appearance: textfield;
88
- }
89
-
90
- .visually-hidden {
91
- position: absolute;
92
- width: 1px;
93
- height: 1px;
94
- margin: -1px;
95
- border: 0;
96
- padding: 0;
97
- white-space: nowrap;
98
- clip-path: inset(100%);
99
- clip: rect(0 0 0 0);
100
- overflow: hidden;
101
- }
@@ -1,5 +0,0 @@
1
- @layer components {
2
- .a-container {
3
- @apply container mx-auto px-4 2xl:px-16;
4
- }
5
- }
@@ -1,152 +0,0 @@
1
- // Visit https://www.figma.com/file/nJY45RLoow0IsmpMZ35aTR/DE blue-defaultSIGN-SYSTEM-NEW?type=design&node-id=619-53613&mode=design&t=tY2NLdArlQhUP9d3-0
2
- // for more information on typography styles
3
- // And see https://tailwindcss.com/docs/adding-custom-styles for more information on adding custom styles
4
-
5
- @layer components {
6
-
7
- // Headings
8
- .heading-01 {
9
- @apply font-bold text-[2rem] leading-10;
10
- }
11
-
12
- .heading-02 {
13
- @apply font-bold text-2xl leading-8;
14
- }
15
-
16
- .heading-03 {
17
- @apply font-semibold text-xl leading-6;
18
- }
19
-
20
- .heading-04 {
21
- @apply font-semibold text-base leading-5;
22
- }
23
-
24
- .heading-05 {
25
- @apply font-semibold text-sm leading-5;
26
- }
27
-
28
- // Body
29
- .body-400 {
30
- @apply font-normal text-sm leading-5;
31
- }
32
-
33
- .body-500 {
34
- @apply font-medium text-sm leading-5;
35
- }
36
-
37
- .body-600 {
38
- @apply font-semibold text-sm leading-5
39
- }
40
-
41
- .body-s-400 {
42
- @apply font-normal text-sm leading-4;
43
- }
44
-
45
- .body-s-500 {
46
- @apply font-medium text-sm leading-4;
47
- }
48
-
49
- // Caption
50
- .caption-400 {
51
- @apply font-normal text-[0.625rem] leading-4;
52
- }
53
-
54
- .caption-500 {
55
- @apply font-medium text-[0.625rem] leading-4;
56
- }
57
-
58
- .caption-700 {
59
- @apply font-bold text-[0.625rem] leading-4;
60
- }
61
-
62
- // Form
63
- .label-400 {
64
- @apply font-normal text-sm leading-5;
65
- }
66
-
67
- .label-600 {
68
- @apply font-semibold text-sm leading-5;
69
- }
70
-
71
- .label-s-400 {
72
- @apply font-normal text-xs leading-4;
73
- }
74
-
75
- .label-s-700 {
76
- @apply font-bold text-xs leading-4;
77
- }
78
-
79
- .optional-i-700 {
80
- @apply font-bold italic text-sm leading-5;
81
- }
82
-
83
- .placeholder-300 {
84
- @apply font-light text-sm leading-5;
85
- }
86
-
87
- .description-400 {
88
- @apply font-normal text-xs leading-5;
89
- }
90
-
91
- // Link
92
- .link-400 {
93
- @apply text-blue-500 font-normal text-sm leading-5;
94
- }
95
-
96
- .link-stroke-400 {
97
- @apply text-blue-500 font-normal text-sm leading-5;
98
- }
99
-
100
- .link-s-400 {
101
- @apply text-blue-500 font-normal text-sm leading-4;
102
- }
103
-
104
- .link-s-stroke-400 {
105
- @apply text-blue-500 font-normal text-sm leading-4;
106
- }
107
-
108
- .link-small-800 {
109
- @apply text-blue-500 font-bold text-sm leading-4;
110
- }
111
-
112
- // Special Styles
113
- .display-80-700 {
114
- @apply font-bold text-[5rem] leading-[6.5rem];
115
- }
116
-
117
- .display-80-400 {
118
- @apply font-normal text-[5rem] leading-[6.5rem];
119
- }
120
-
121
- .display-60-700 {
122
- @apply font-bold text-[3.75rem] leading-[4.750rem];
123
- }
124
-
125
- .display-60-400 {
126
- @apply font-normal text-[3.75rem] leading-[4.750rem];
127
- }
128
-
129
- .display-48-700 {
130
- @apply font-bold text-[3rem] leading-[4rem];
131
- }
132
-
133
- .display-48-400 {
134
- @apply font-normal text-[3rem] leading-[4rem];
135
- }
136
-
137
- .numbers-60-700 {
138
- @apply font-bold text-[3.75rem] leading-[3.5rem];
139
- }
140
-
141
- .numbers-60-400 {
142
- @apply font-normal text-[3.75rem] leading-[3.5rem];
143
- }
144
-
145
- .numbers-40-700 {
146
- @apply font-bold text-[2.5rem] leading-[3.375rem];
147
- }
148
-
149
- .numbers-40-400 {
150
- @apply font-normal text-[2.5rem] leading-[3.375rem];
151
- }
152
- }
@@ -1,10 +0,0 @@
1
- import { defineConfig } from 'histoire'
2
- import { HstVue } from '@histoire/plugin-vue'
3
- import { HstNuxt } from '@histoire/plugin-nuxt'
4
-
5
- export default defineConfig({
6
- plugins: [
7
- HstVue(),
8
- HstNuxt()
9
- ]
10
- })
@@ -1,163 +0,0 @@
1
- /** @type {import('tailwindcss').Config} */
2
- import type { Config } from 'tailwindcss'
3
- import defaultColors from 'tailwindcss/colors'
4
-
5
- export default <Partial<Config>>{
6
- darkMode: 'class',
7
- content: ['./components/**/*.vue', './ui.config/**/*.ts', './icons/**/*.vue'],
8
- safelist: [
9
- {
10
- pattern: /bg-(blue|green|yellow|red|orange|purple)-(|400|500|600|700|900)\/(10|20)/,
11
- variants: ['hover']
12
- }
13
- ],
14
- theme: {
15
- fontFamily: {
16
- 'sans': ['"Open Sans"', 'sans-serif'],
17
- },
18
- colors: {
19
- black: defaultColors.black,
20
- white: defaultColors.white,
21
- transparent: defaultColors.transparent,
22
- 'blue': {
23
- // DEFAULT: '#0070eb',
24
- '50': '#eff7ff',
25
- '100': '#e0efff',
26
- '200': '#bddfff',
27
- '300': '#90d7ff',
28
- '400': '#43afed',
29
- '500': '#1b98e2',
30
- '600': '#068dff',
31
- '700': '#0070eb',
32
- '800': '#085dc5',
33
- '900': '#0d509b',
34
- '950': '#0e315d',
35
- },
36
- 'yellow': {
37
- // DEFAULT: '#fbc920',
38
- '50': '#fefbe8',
39
- '100': '#fef7c3',
40
- '200': '#feed8a',
41
- '300': '#fedb46',
42
- '400': '#fbc920',
43
- '500': '#ebad07',
44
- '600': '#cb8503',
45
- '700': '#a25e06',
46
- '800': '#854a0e',
47
- '900': '#713c12',
48
- '950': '#421e06',
49
- },
50
- 'deepblue': {
51
- // pickled-bluewood
52
- // DEFAULT: '#2c3e50',
53
- '50': '#f5f7fa',
54
- '100': '#eaeff4',
55
- '200': '#cfdce8',
56
- '300': '#a6bfd3',
57
- '400': '#759cbb',
58
- '500': '#5480a3',
59
- '600': '#416788',
60
- '700': '#35526f',
61
- '800': '#2f475d',
62
- '900': '#2c3e50',
63
- '950': '#1d2834',
64
- },
65
- 'gray': {
66
- // gray-chateau
67
- // DEFAULT: '#9da3ac',
68
- '50': '#f4f5f6',
69
- '100': '#ebecee',
70
- '200': '#e3e5e8',
71
- '300': '#c9cccf',
72
- '400': '#b7bcc2',
73
- '500': '#9da3ac',
74
- '600': '#71757a',
75
- '700': '#5a5d60',
76
- '800': '#393d40',
77
- '900': '#26282b',
78
- '950': '#161617',
79
- },
80
- 'green': {
81
- // DEFAULT: '#4caf50',
82
- '50': '#f3faf3',
83
- '100': '#e3f5e3',
84
- '200': '#c8eac9',
85
- '300': '#9dd89f',
86
- '400': '#6bbd6e',
87
- '500': '#4caf50',
88
- '600': '#358438',
89
- '700': '#2d6830',
90
- '800': '#275429',
91
- '900': '#224525',
92
- '950': '#0e2510',
93
- },
94
- 'orange': {
95
- // DEFAULT: '#e37b00',
96
- '50': '#fffbea',
97
- '100': '#fff4c5',
98
- '200': '#ffe987',
99
- '300': '#ffd748',
100
- '400': '#ffc31e',
101
- '500': '#ff9900',
102
- '600': '#e37b00',
103
- '700': '#b95304',
104
- '800': '#96400a',
105
- '900': '#7b350c',
106
- '950': '#471901',
107
- },
108
- 'red': {
109
- // cinnabar
110
- // DEFAULT: '#e74135',
111
- '50': '#fef3f2',
112
- '100': '#fde5e3',
113
- '200': '#fccfcc',
114
- '300': '#f9ada8',
115
- '400': '#f47e75',
116
- '500': '#e74135',
117
- '600': '#d6372c',
118
- '700': '#b42b21',
119
- '800': '#95271f',
120
- '900': '#7c2620',
121
- '950': '#43100c',
122
- },
123
- 'purple': {
124
- //purple-heart
125
- DEFAULT: '#7c25b6',
126
- '50': '#fbf5ff',
127
- '100': '#f4e8ff',
128
- '200': '#ebd5ff',
129
- '300': '#dcb5fd',
130
- '400': '#c685fb',
131
- '500': '#b056f6',
132
- '600': '#9c34e9',
133
- '700': '#8723cd',
134
- '800': '#7c25b6',
135
- '900': '#5d1d86',
136
- '950': '#400863',
137
- },
138
- 'turquoise': {
139
- // light-blue
140
- // DEFAULT: '#1ee1be',
141
- '50': '#effefa',
142
- '100': '#c8fff0',
143
- '200': '#92fde3',
144
- '300': '#53f5d3',
145
- '400': '#1ee1be',
146
- '500': '#07c5a6',
147
- '600': '#029f89',
148
- '700': '#077e6f',
149
- '800': '#0b6459',
150
- '900': '#0e534a',
151
- '950': '#01322e',
152
- },
153
-
154
- },
155
- extend: {
156
- backgroundImage: {
157
- 'gr-blue': 'linear-gradient(236.46deg, #479FFF -2.39%, #0070EB 79.1%)',
158
- 'gr-yellow': 'linear-gradient(236.46deg, #FFE364 -2.39%, #FBC920 79.1%);\n'
159
- }
160
- },
161
- },
162
- }
163
-
package/vitest.config.ts DELETED
@@ -1,14 +0,0 @@
1
- import { defineVitestConfig } from '@nuxt/test-utils/config'
2
-
3
- export default defineVitestConfig({
4
- test: {
5
- globals: true,
6
- environment: 'nuxt',
7
- coverage: {
8
- enabled: true,
9
- provider: 'v8',
10
- reportsDirectory: './tests/coverage',
11
- reporter: ['html']
12
- }
13
- }
14
- })