refactor(multi): updated to latest version
This commit is contained in:
yagnikvamja
@@ -3,11 +3,14 @@
|
||||
"Component": true,
|
||||
"ComponentPublicInstance": true,
|
||||
"ComputedRef": true,
|
||||
"DirectiveBinding": true,
|
||||
"EffectScope": true,
|
||||
"ExtractDefaultPropTypes": true,
|
||||
"ExtractPropTypes": true,
|
||||
"ExtractPublicPropTypes": true,
|
||||
"InjectionKey": true,
|
||||
"MaybeRef": true,
|
||||
"MaybeRefOrGetter": true,
|
||||
"PropType": true,
|
||||
"Ref": true,
|
||||
"VNode": true,
|
||||
@@ -85,6 +88,7 @@
|
||||
"onStartTyping": true,
|
||||
"onUnmounted": true,
|
||||
"onUpdated": true,
|
||||
"onWatcherCleanup": true,
|
||||
"pausableWatch": true,
|
||||
"provide": true,
|
||||
"provideLocal": true,
|
||||
@@ -201,6 +205,7 @@
|
||||
"useFullscreen": true,
|
||||
"useGamepad": true,
|
||||
"useGeolocation": true,
|
||||
"useId": true,
|
||||
"useIdle": true,
|
||||
"useImage": true,
|
||||
"useInfiniteScroll": true,
|
||||
@@ -220,6 +225,7 @@
|
||||
"useMemoize": true,
|
||||
"useMemory": true,
|
||||
"useMin": true,
|
||||
"useModel": true,
|
||||
"useMounted": true,
|
||||
"useMouse": true,
|
||||
"useMouseInElement": true,
|
||||
@@ -270,6 +276,7 @@
|
||||
"useSum": true,
|
||||
"useSupported": true,
|
||||
"useSwipe": true,
|
||||
"useTemplateRef": true,
|
||||
"useTemplateRefsList": true,
|
||||
"useTextDirection": true,
|
||||
"useTextSelection": true,
|
||||
|
||||
@@ -166,7 +166,10 @@
|
||||
// loop for all colors bg
|
||||
@each $color-name in variables.$theme-colors-name {
|
||||
body .v-tabs.v-tabs-pill {
|
||||
.v-slide-group-item--active.v-tab--selected.text-#{$color-name} {
|
||||
.v-slide-group__content {
|
||||
gap: 0.25rem;
|
||||
}
|
||||
.v-tab--selected.text-#{$color-name} {
|
||||
background-color: rgb(var(--v-theme-#{$color-name}));
|
||||
color: rgb(var(--v-theme-on-#{$color-name})) !important;
|
||||
}
|
||||
|
||||
@@ -1,186 +1,350 @@
|
||||
@use "sass:math";
|
||||
|
||||
$font-family-custom: "Public Sans",sans-serif,-apple-system,blinkmacsystemfont,
|
||||
"Segoe UI",roboto,"Helvetica Neue",arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
|
||||
$font-family-custom: "Public Sans", sans-serif, -apple-system,
|
||||
blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif,
|
||||
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
|
||||
/* 👉 Typography custom variables */
|
||||
$typography-h5-font-size: 1.125rem;
|
||||
$typography-body-1-font-size: 0.9375rem;
|
||||
$typography-body-1-line-height: 1.375rem;
|
||||
|
||||
@forward "../../../base/libs/vuetify/variables" with (
|
||||
@forward "../../../base/libs/vuetify/variables" with (
|
||||
$body-font-family: $font-family-custom !default,
|
||||
$border-radius-root: 6px !default,
|
||||
|
||||
// 👉 Rounded
|
||||
$rounded: (
|
||||
"sm": 4px,
|
||||
"lg": 8px,
|
||||
"shaped": 30px 0,
|
||||
) !default,
|
||||
$rounded:
|
||||
(
|
||||
"sm": 4px,
|
||||
"lg": 8px,
|
||||
"shaped": 30px 0,
|
||||
)
|
||||
!default,
|
||||
|
||||
// 👉 Shadows
|
||||
$shadow-key-umbra: (
|
||||
0: (0 0 0 0 rgba(var(--v-shadow-key-umbra-color), 1)),
|
||||
1: (0 2px 4px rgba(var(--v-shadow-key-umbra-color), 0.12)),
|
||||
2: (0 1px 5px rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-xs-opacity))),
|
||||
3: (0 3px 8px rgba(var(--v-shadow-key-umbra-color), 0.14)),
|
||||
4: (0 2px 6px rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-sm-opacity))),
|
||||
5: (0 4px 10px rgba(var(--v-shadow-key-umbra-color), 0.15)),
|
||||
6: (0 3px 8px rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-md-opacity))),
|
||||
7: (0 4px 18px rgba(var(--v-shadow-key-umbra-color), 0.1)),
|
||||
8: (0 4px 12px rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-lg-opacity))),
|
||||
9: (0 5px 14px rgba(var(--v-shadow-key-umbra-color), 0.18)),
|
||||
10: (0 5px 22px rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-xl-opacity))),
|
||||
11: (0 5px 16px rgba(var(--v-shadow-key-umbra-color), 0.2)),
|
||||
12: (0 6px 17px rgba(var(--v-shadow-key-umbra-color), 0.22)),
|
||||
13: (0 6px 18px rgba(var(--v-shadow-key-umbra-color), 0.22)),
|
||||
14: (0 6px 19px rgba(var(--v-shadow-key-umbra-color), 0.24)),
|
||||
15: (0 7px 20px rgba(var(--v-shadow-key-umbra-color), 0.24)),
|
||||
16: (0 7px 21px rgba(var(--v-shadow-key-umbra-color), 0.26)),
|
||||
17: (0 7px 22px rgba(var(--v-shadow-key-umbra-color), 0.26)),
|
||||
18: (0 8px 23px rgba(var(--v-shadow-key-umbra-color), 0.28)),
|
||||
19: (0 8px 24px 6px rgba(var(--v-shadow-key-umbra-color), 0.28)),
|
||||
20: (0 9px 25px rgba(var(--v-shadow-key-umbra-color), 0.3)),
|
||||
21: (0 9px 26px rgba(var(--v-shadow-key-umbra-color), 0.32)),
|
||||
22: (0 9px 27px rgba(var(--v-shadow-key-umbra-color), 0.32)),
|
||||
23: (0 10px 28px rgba(var(--v-shadow-key-umbra-color), 0.34)),
|
||||
24: (0 10px 30px rgba(var(--v-shadow-key-umbra-color), 0.34))
|
||||
) !default,
|
||||
$shadow-key-umbra:
|
||||
(
|
||||
0: (
|
||||
0 0 0 0 rgba(var(--v-shadow-key-umbra-color), 1),
|
||||
),
|
||||
1: (
|
||||
0 2px 4px rgba(var(--v-shadow-key-umbra-color), 0.12),
|
||||
),
|
||||
2: (
|
||||
0 1px 5px
|
||||
rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-xs-opacity)),
|
||||
),
|
||||
3: (
|
||||
0 3px 8px rgba(var(--v-shadow-key-umbra-color), 0.14),
|
||||
),
|
||||
4: (
|
||||
0 2px 6px
|
||||
rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-sm-opacity)),
|
||||
),
|
||||
5: (
|
||||
0 4px 10px rgba(var(--v-shadow-key-umbra-color), 0.15),
|
||||
),
|
||||
6: (
|
||||
0 3px 8px
|
||||
rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-md-opacity)),
|
||||
),
|
||||
7: (
|
||||
0 4px 18px rgba(var(--v-shadow-key-umbra-color), 0.1),
|
||||
),
|
||||
8: (
|
||||
0 4px 12px
|
||||
rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-lg-opacity)),
|
||||
),
|
||||
9: (
|
||||
0 5px 14px rgba(var(--v-shadow-key-umbra-color), 0.18),
|
||||
),
|
||||
10: (
|
||||
0 5px 22px
|
||||
rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-xl-opacity)),
|
||||
),
|
||||
11: (
|
||||
0 5px 16px rgba(var(--v-shadow-key-umbra-color), 0.2),
|
||||
),
|
||||
12: (
|
||||
0 6px 17px rgba(var(--v-shadow-key-umbra-color), 0.22),
|
||||
),
|
||||
13: (
|
||||
0 6px 18px rgba(var(--v-shadow-key-umbra-color), 0.22),
|
||||
),
|
||||
14: (
|
||||
0 6px 19px rgba(var(--v-shadow-key-umbra-color), 0.24),
|
||||
),
|
||||
15: (
|
||||
0 7px 20px rgba(var(--v-shadow-key-umbra-color), 0.24),
|
||||
),
|
||||
16: (
|
||||
0 7px 21px rgba(var(--v-shadow-key-umbra-color), 0.26),
|
||||
),
|
||||
17: (
|
||||
0 7px 22px rgba(var(--v-shadow-key-umbra-color), 0.26),
|
||||
),
|
||||
18: (
|
||||
0 8px 23px rgba(var(--v-shadow-key-umbra-color), 0.28),
|
||||
),
|
||||
19: (
|
||||
0 8px 24px 6px rgba(var(--v-shadow-key-umbra-color), 0.28),
|
||||
),
|
||||
20: (
|
||||
0 9px 25px rgba(var(--v-shadow-key-umbra-color), 0.3),
|
||||
),
|
||||
21: (
|
||||
0 9px 26px rgba(var(--v-shadow-key-umbra-color), 0.32),
|
||||
),
|
||||
22: (
|
||||
0 9px 27px rgba(var(--v-shadow-key-umbra-color), 0.32),
|
||||
),
|
||||
23: (
|
||||
0 10px 28px rgba(var(--v-shadow-key-umbra-color), 0.34),
|
||||
),
|
||||
24: (
|
||||
0 10px 30px rgba(var(--v-shadow-key-umbra-color), 0.34),
|
||||
),
|
||||
)
|
||||
!default,
|
||||
|
||||
$shadow-key-penumbra: (
|
||||
0: (0 0 transparent),
|
||||
1: (0 0 transparent),
|
||||
2: (0 0 transparent),
|
||||
3: (0 0 transparent),
|
||||
4: (0 0 transparent),
|
||||
5: (0 0 transparent),
|
||||
6: (0 0 transparent),
|
||||
7: (0 0 transparent),
|
||||
8: (0 0 transparent),
|
||||
9: (0 0 transparent),
|
||||
10: (0 0 transparent),
|
||||
11: (0 0 transparent),
|
||||
12: (0 0 transparent),
|
||||
13: (0 0 transparent),
|
||||
14: (0 0 transparent),
|
||||
15: (0 0 transparent),
|
||||
16: (0 0 transparent),
|
||||
17: (0 0 transparent),
|
||||
18: (0 0 transparent),
|
||||
19: (0 0 transparent),
|
||||
20: (0 0 transparent),
|
||||
21: (0 0 transparent),
|
||||
22: (0 0 transparent),
|
||||
23: (0 0 transparent),
|
||||
24: (0 0 transparent),
|
||||
) !default,
|
||||
0: (
|
||||
0 0 transparent,
|
||||
),
|
||||
1: (
|
||||
0 0 transparent,
|
||||
),
|
||||
2: (
|
||||
0 0 transparent,
|
||||
),
|
||||
3: (
|
||||
0 0 transparent,
|
||||
),
|
||||
4: (
|
||||
0 0 transparent,
|
||||
),
|
||||
5: (
|
||||
0 0 transparent,
|
||||
),
|
||||
6: (
|
||||
0 0 transparent,
|
||||
),
|
||||
7: (
|
||||
0 0 transparent,
|
||||
),
|
||||
8: (
|
||||
0 0 transparent,
|
||||
),
|
||||
9: (
|
||||
0 0 transparent,
|
||||
),
|
||||
10: (
|
||||
0 0 transparent,
|
||||
),
|
||||
11: (
|
||||
0 0 transparent,
|
||||
),
|
||||
12: (
|
||||
0 0 transparent,
|
||||
),
|
||||
13: (
|
||||
0 0 transparent,
|
||||
),
|
||||
14: (
|
||||
0 0 transparent,
|
||||
),
|
||||
15: (
|
||||
0 0 transparent,
|
||||
),
|
||||
16: (
|
||||
0 0 transparent,
|
||||
),
|
||||
17: (
|
||||
0 0 transparent,
|
||||
),
|
||||
18: (
|
||||
0 0 transparent,
|
||||
),
|
||||
19: (
|
||||
0 0 transparent,
|
||||
),
|
||||
20: (
|
||||
0 0 transparent,
|
||||
),
|
||||
21: (
|
||||
0 0 transparent,
|
||||
),
|
||||
22: (
|
||||
0 0 transparent,
|
||||
),
|
||||
23: (
|
||||
0 0 transparent,
|
||||
),
|
||||
24: (
|
||||
0 0 transparent,
|
||||
),
|
||||
)
|
||||
!default,
|
||||
|
||||
$shadow-key-ambient: (
|
||||
0: (0 0 transparent),
|
||||
1: (0 0 transparent),
|
||||
2: (0 0 transparent),
|
||||
3: (0 0 transparent),
|
||||
4: (0 0 transparent),
|
||||
5: (0 0 transparent),
|
||||
6: (0 0 transparent),
|
||||
7: (0 0 transparent),
|
||||
8: (0 0 transparent),
|
||||
9: (0 0 transparent),
|
||||
10: (0 0 transparent),
|
||||
11: (0 0 transparent),
|
||||
12: (0 0 transparent),
|
||||
13: (0 0 transparent),
|
||||
14: (0 0 transparent),
|
||||
15: (0 0 transparent),
|
||||
16: (0 0 transparent),
|
||||
17: (0 0 transparent),
|
||||
18: (0 0 transparent),
|
||||
19: (0 0 transparent),
|
||||
20: (0 0 transparent),
|
||||
21: (0 0 transparent),
|
||||
22: (0 0 transparent),
|
||||
23: (0 0 transparent),
|
||||
24: (0 0 transparent),
|
||||
) !default,
|
||||
0: (
|
||||
0 0 transparent,
|
||||
),
|
||||
1: (
|
||||
0 0 transparent,
|
||||
),
|
||||
2: (
|
||||
0 0 transparent,
|
||||
),
|
||||
3: (
|
||||
0 0 transparent,
|
||||
),
|
||||
4: (
|
||||
0 0 transparent,
|
||||
),
|
||||
5: (
|
||||
0 0 transparent,
|
||||
),
|
||||
6: (
|
||||
0 0 transparent,
|
||||
),
|
||||
7: (
|
||||
0 0 transparent,
|
||||
),
|
||||
8: (
|
||||
0 0 transparent,
|
||||
),
|
||||
9: (
|
||||
0 0 transparent,
|
||||
),
|
||||
10: (
|
||||
0 0 transparent,
|
||||
),
|
||||
11: (
|
||||
0 0 transparent,
|
||||
),
|
||||
12: (
|
||||
0 0 transparent,
|
||||
),
|
||||
13: (
|
||||
0 0 transparent,
|
||||
),
|
||||
14: (
|
||||
0 0 transparent,
|
||||
),
|
||||
15: (
|
||||
0 0 transparent,
|
||||
),
|
||||
16: (
|
||||
0 0 transparent,
|
||||
),
|
||||
17: (
|
||||
0 0 transparent,
|
||||
),
|
||||
18: (
|
||||
0 0 transparent,
|
||||
),
|
||||
19: (
|
||||
0 0 transparent,
|
||||
),
|
||||
20: (
|
||||
0 0 transparent,
|
||||
),
|
||||
21: (
|
||||
0 0 transparent,
|
||||
),
|
||||
22: (
|
||||
0 0 transparent,
|
||||
),
|
||||
23: (
|
||||
0 0 transparent,
|
||||
),
|
||||
24: (
|
||||
0 0 transparent,
|
||||
),
|
||||
)
|
||||
!default,
|
||||
|
||||
// 👉 Typography
|
||||
$typography: (
|
||||
"h1": (
|
||||
"size": 2.875rem,
|
||||
"weight": 500,
|
||||
"line-height": 4.25rem,
|
||||
"letter-spacing": normal
|
||||
),
|
||||
"h2": (
|
||||
"size": 2.375rem,
|
||||
"weight": 500,
|
||||
"line-height": 3.5rem,
|
||||
"letter-spacing": normal
|
||||
),
|
||||
"h3": (
|
||||
"size": 1.75rem,
|
||||
"weight": 500,
|
||||
"line-height": 2.625rem
|
||||
),
|
||||
"h4": (
|
||||
"size": 1.5rem,
|
||||
"weight": 500,
|
||||
"line-height": 2.375rem,
|
||||
"letter-spacing": normal
|
||||
),
|
||||
"h5": (
|
||||
"size": $typography-h5-font-size,
|
||||
"weight": 500,
|
||||
"line-height": 1.75rem
|
||||
),
|
||||
"h6":(
|
||||
"size": 0.9375rem,
|
||||
"line-height": 1.375rem,
|
||||
"weight": 500,
|
||||
"letter-spacing": normal
|
||||
),
|
||||
"body-1":(
|
||||
"size": $typography-body-1-font-size,
|
||||
"line-height": $typography-body-1-line-height,
|
||||
"letter-spacing": normal
|
||||
),
|
||||
"body-2": (
|
||||
"size": 0.8125rem,
|
||||
"line-height": 1.25rem,
|
||||
"letter-spacing": normal
|
||||
),
|
||||
"subtitle-1":(
|
||||
"size": 0.9375rem,
|
||||
"weight": 400,
|
||||
"line-height": 1.375rem
|
||||
),
|
||||
"subtitle-2": (
|
||||
"size": 0.8125rem,
|
||||
"weight": 400,
|
||||
"line-height": 1.25rem,
|
||||
"letter-spacing": normal
|
||||
),
|
||||
"button": (
|
||||
"size": 0.9375rem,
|
||||
"weight": 500,
|
||||
"line-height": 1.125rem,
|
||||
"letter-spacing": 0.0269rem,
|
||||
"text-transform": capitalize
|
||||
),
|
||||
"caption":(
|
||||
"size": 0.8125rem,
|
||||
"line-height": 1.125rem,
|
||||
"letter-spacing": 0.025rem
|
||||
),
|
||||
"overline": (
|
||||
"size": 0.75rem,
|
||||
"weight": 400,
|
||||
"line-height": 0.875rem,
|
||||
"letter-spacing": 0.05rem,
|
||||
"text-transform": uppercase
|
||||
),
|
||||
) !default,
|
||||
$typography:
|
||||
(
|
||||
"h1": (
|
||||
"size": 2.875rem,
|
||||
"weight": 500,
|
||||
"line-height": 4.25rem,
|
||||
"letter-spacing": normal,
|
||||
),
|
||||
"h2": (
|
||||
"size": 2.375rem,
|
||||
"weight": 500,
|
||||
"line-height": 3.5rem,
|
||||
"letter-spacing": normal,
|
||||
),
|
||||
"h3": (
|
||||
"size": 1.75rem,
|
||||
"weight": 500,
|
||||
"line-height": 2.625rem,
|
||||
),
|
||||
"h4": (
|
||||
"size": 1.5rem,
|
||||
"weight": 500,
|
||||
"line-height": 2.375rem,
|
||||
"letter-spacing": normal,
|
||||
),
|
||||
"h5": (
|
||||
"size": $typography-h5-font-size,
|
||||
"weight": 500,
|
||||
"line-height": 1.75rem,
|
||||
),
|
||||
"h6": (
|
||||
"size": 0.9375rem,
|
||||
"line-height": 1.375rem,
|
||||
"weight": 500,
|
||||
"letter-spacing": normal,
|
||||
),
|
||||
"body-1": (
|
||||
"size": $typography-body-1-font-size,
|
||||
"line-height": $typography-body-1-line-height,
|
||||
"letter-spacing": normal,
|
||||
),
|
||||
"body-2": (
|
||||
"size": 0.8125rem,
|
||||
"line-height": 1.25rem,
|
||||
"letter-spacing": normal,
|
||||
),
|
||||
"subtitle-1": (
|
||||
"size": 0.9375rem,
|
||||
"weight": 400,
|
||||
"line-height": 1.375rem,
|
||||
),
|
||||
"subtitle-2": (
|
||||
"size": 0.8125rem,
|
||||
"weight": 400,
|
||||
"line-height": 1.25rem,
|
||||
"letter-spacing": normal,
|
||||
),
|
||||
"button": (
|
||||
"size": 0.9375rem,
|
||||
"weight": 500,
|
||||
"line-height": 1.125rem,
|
||||
"letter-spacing": 0.0269rem,
|
||||
"text-transform": capitalize,
|
||||
),
|
||||
"caption": (
|
||||
"size": 0.8125rem,
|
||||
"line-height": 1.125rem,
|
||||
"letter-spacing": 0.025rem,
|
||||
),
|
||||
"overline": (
|
||||
"size": 0.75rem,
|
||||
"weight": 400,
|
||||
"line-height": 0.875rem,
|
||||
"letter-spacing": 0.05rem,
|
||||
"text-transform": uppercase,
|
||||
),
|
||||
)
|
||||
!default,
|
||||
|
||||
// 👉 Alert
|
||||
$alert-title-font-size: 1.125rem !default,
|
||||
@@ -219,7 +383,12 @@ $typography-body-1-line-height: 1.375rem;
|
||||
$button-disabled-opacity: 0.45 !default,
|
||||
$button-disabled-overlay: 0.2025 !default,
|
||||
$button-icon-font-size: 0.9375rem !default,
|
||||
$button-elevation: ("default": 2, "hover": 2, "active": 2) !default,
|
||||
$button-elevation: (
|
||||
"default": 2,
|
||||
"hover": 2,
|
||||
"active": 2,
|
||||
)
|
||||
!default,
|
||||
|
||||
// 👉 Button Group
|
||||
$btn-group-border-radius: 8px !default,
|
||||
@@ -249,14 +418,20 @@ $typography-body-1-line-height: 1.375rem;
|
||||
|
||||
// 👉 Expansion Panel
|
||||
$expansion-panel-title-padding: 12px 20px 12px 24px !default,
|
||||
$expansion-panel-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default,
|
||||
$expansion-panel-color:
|
||||
rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default,
|
||||
$expansion-panel-active-title-min-height: 46px !default,
|
||||
$expansion-panel-title-min-height: 46px !default,
|
||||
$expansion-panel-text-padding: 0 20px 20px 24px !default,
|
||||
|
||||
// 👉 Field
|
||||
$field-font-size: 0.9375rem !default,
|
||||
$input-density: ("default": -2, "comfortable": -4.5, "compact": -6.5) !default,
|
||||
$input-density: (
|
||||
"default": -2,
|
||||
"comfortable": -4.5,
|
||||
"compact": -6.5,
|
||||
)
|
||||
!default,
|
||||
$field-outline-opacity: 0.22 !default,
|
||||
$field-border-width: 1px !default,
|
||||
$field-focused-border-width: 2px !default,
|
||||
@@ -267,12 +442,17 @@ $typography-body-1-line-height: 1.375rem;
|
||||
$input-details-font-size: 0.8125rem !default,
|
||||
|
||||
// 👉 List
|
||||
$list-density: ("default": 0, "comfortable": -1.5, "compact": -2.5) !default,
|
||||
$list-density:
|
||||
(
|
||||
"default": 0,
|
||||
"comfortable": -1.5,
|
||||
"compact": -2.5,
|
||||
)
|
||||
!default,
|
||||
$list-item-padding: 8px 20px !default,
|
||||
$list-item-min-height: 38px !default,
|
||||
$list-subheader-font-size: 13px !default,
|
||||
$list-subheader-line-height: 1.25rem !default,
|
||||
$list-subheader-padding-start: 20px !default,
|
||||
$list-subheader-padding-end: 20px !default,
|
||||
$list-subheader-min-height: 40px !default,
|
||||
$list-disabled-opacity: 0.4 !default,
|
||||
@@ -317,7 +497,13 @@ $typography-body-1-line-height: 1.375rem;
|
||||
$slider-thumb-label-transition: none !default,
|
||||
|
||||
// 👉 select
|
||||
$select-chips-margin-bottom: ("default": 1, "comfortable": 1, "compact": 1) !default,
|
||||
$select-chips-margin-bottom:
|
||||
(
|
||||
"default": 1,
|
||||
"comfortable": 1,
|
||||
"compact": 1,
|
||||
)
|
||||
!default,
|
||||
|
||||
// 👉 snackbar
|
||||
$snackbar-background: rgb(var(--v-tooltip-background)) !default,
|
||||
@@ -325,7 +511,7 @@ $typography-body-1-line-height: 1.375rem;
|
||||
$snackbar-content-padding: 12px 16px !default,
|
||||
$snackbar-font-size: 0.8125rem !default,
|
||||
$snackbar-elevation: 2 !default,
|
||||
$snackbar-wrapper-min-height:44px !default,
|
||||
$snackbar-wrapper-min-height: 44px !default,
|
||||
$snackbar-btn-padding: 0 9px !default,
|
||||
$snackbar-action-margin: 16px !default,
|
||||
|
||||
@@ -336,12 +522,13 @@ $typography-body-1-line-height: 1.375rem;
|
||||
$switch-inset-thumb-width: 0.875rem !default,
|
||||
$switch-inset-thumb-off-height: 0.875rem !default,
|
||||
$switch-track-opacity: 1 !default,
|
||||
$switch-track-background: rgba(var(--v-theme-on-surface), var(--v-focus-opacity)) !default,
|
||||
$switch-track-background:
|
||||
rgba(var(--v-theme-on-surface), var(--v-focus-opacity)) !default,
|
||||
$switch-thumb-background: rgb(var(--v-theme-on-primary)),
|
||||
|
||||
// 👉 table
|
||||
$table-row-height: 50px !default,
|
||||
$table-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default,
|
||||
$table-color:
|
||||
rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default,
|
||||
$table-font-size: 0.9375rem !default,
|
||||
$table-header-height: 56px !default,
|
||||
$table-header-font-weight: 500 !default,
|
||||
@@ -362,8 +549,9 @@ $typography-body-1-line-height: 1.375rem;
|
||||
|
||||
// 👉 timeline
|
||||
$timeline-dot-size: 34px !default,
|
||||
$timeline-dot-divider-background: rgba(var(--v-border-color),0.08) !default,
|
||||
$timeline-divider-line-background: rgba(var(--v-border-color), var(--v-border-opacity)) !default,
|
||||
$timeline-dot-divider-background: rgba(var(--v-border-color), 0.08) !default,
|
||||
$timeline-divider-line-background:
|
||||
rgba(var(--v-border-color), var(--v-border-opacity)) !default,
|
||||
$timeline-divider-line-thickness: 1.5px !default,
|
||||
$timeline-item-padding: 16px !default,
|
||||
$timeline-item-padding: 16px !default
|
||||
);
|
||||
|
||||
@@ -43,6 +43,7 @@ const handleNavScroll = evt => {
|
||||
<Component
|
||||
:is="props.tag"
|
||||
ref="refNav"
|
||||
data-allow-mismatch
|
||||
class="layout-vertical-nav"
|
||||
:class="[
|
||||
{
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
@use "global";
|
||||
@use "vue3-perfect-scrollbar/dist/vue3-perfect-scrollbar.min.css";
|
||||
@use "vue3-perfect-scrollbar/style.css";
|
||||
@use "classes";
|
||||
|
||||
@@ -1,5 +1,8 @@
|
||||
<template>
|
||||
<div class="layout-wrapper layout-blank">
|
||||
<div
|
||||
class="layout-wrapper layout-blank"
|
||||
data-allow-mismatch
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<script setup>
|
||||
import VerticalNavSectionTitle from '@/@layouts/components/VerticalNavSectionTitle.vue'
|
||||
import VerticalNavGroup from '@layouts/components/VerticalNavGroup.vue'
|
||||
import VerticalNavLink from '@layouts/components/VerticalNavLink.vue'
|
||||
import VerticalNavSectionTitle from "@/@layouts/components/VerticalNavSectionTitle.vue";
|
||||
import VerticalNavGroup from "@layouts/components/VerticalNavGroup.vue";
|
||||
import VerticalNavLink from "@layouts/components/VerticalNavLink.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "sneat-nuxtjs-admin-template-free",
|
||||
"version": "1.0.0",
|
||||
"version": "1.1.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
@@ -12,68 +12,67 @@
|
||||
"generate": "nuxt generate"
|
||||
},
|
||||
"dependencies": {
|
||||
"@floating-ui/dom": "1.6.3",
|
||||
"@floating-ui/dom": "1.6.8",
|
||||
"@stylistic/stylelint-config": "^1.0.1",
|
||||
"@vueuse/core": "^10.5.0",
|
||||
"@vueuse/math": "^10.5.0",
|
||||
"@vueuse/core": "^10.11.1",
|
||||
"@vueuse/math": "^10.11.1",
|
||||
"apexcharts": "3.49.2",
|
||||
"nuxt": "^3.12.2",
|
||||
"pinia": "^2.1.7",
|
||||
"nuxt": "3.14.1592",
|
||||
"pinia": "^2.3.0",
|
||||
"prismjs": "^1.29.0",
|
||||
"roboto-fontface": "^0.10.0",
|
||||
"vue-flatpickr-component": "11.0.5",
|
||||
"vue-prism-component": "^2.0.0",
|
||||
"vue3-apexcharts": "^1.5.2",
|
||||
"vue3-perfect-scrollbar": "^1.6.1",
|
||||
"vuetify": "3.6.1",
|
||||
"vue3-apexcharts": "1.5.2",
|
||||
"vue3-perfect-scrollbar": "^2.0.0",
|
||||
"vuetify": "3.7.5",
|
||||
"webfontloader": "^1.6.28"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@antfu/eslint-config-vue": "^0.43.1",
|
||||
"@antfu/utils": "^0.7.10",
|
||||
"@iconify-json/bx": "^1.1.10",
|
||||
"@iconify-json/bxl": "^1.1.6",
|
||||
"@iconify-json/bxs": "^1.1.6",
|
||||
"@iconify-json/fa": "^1.1.8",
|
||||
"@iconify-json/mdi": "^1.1.58",
|
||||
"@iconify/tools": "^4.0.0",
|
||||
"@iconify-json/bx": "^1.2.2",
|
||||
"@iconify-json/bxl": "^1.2.2",
|
||||
"@iconify-json/bxs": "^1.2.2",
|
||||
"@iconify-json/fa": "^1.2.1",
|
||||
"@iconify-json/mdi": "^1.2.1",
|
||||
"@iconify/tools": "^4.0.7",
|
||||
"@iconify/utils": "^2.1.13",
|
||||
"@iconify/vue": "4.1.1",
|
||||
"@nuxtjs/device": "^3.1.1",
|
||||
"@pinia/nuxt": "^0.5.1",
|
||||
"@vueuse/nuxt": "^10.11.0",
|
||||
"@iconify/vue": "4.1.2",
|
||||
"@nuxtjs/device": "^3.2.4",
|
||||
"@pinia/nuxt": "^0.9.0",
|
||||
"@vueuse/nuxt": "^12.2.0",
|
||||
"boxicons": "^2.1.4",
|
||||
"eslint": "^8.56.0",
|
||||
"eslint": "^8.57.1",
|
||||
"eslint-config-airbnb-base": "^15.0.0",
|
||||
"eslint-import-resolver-typescript": "^3.6.1",
|
||||
"eslint-plugin-case-police": "^0.6.1",
|
||||
"eslint-plugin-import": "^2.29.1",
|
||||
"eslint-plugin-promise": "^6.1.1",
|
||||
"eslint-plugin-import": "^2.31.0",
|
||||
"eslint-plugin-promise": "^6.6.0",
|
||||
"eslint-plugin-regex": "^1.10.0",
|
||||
"eslint-plugin-regexp": "^2.6.0",
|
||||
"eslint-plugin-sonarjs": "^0.24.0",
|
||||
"eslint-plugin-unicorn": "^51.0.1",
|
||||
"eslint-plugin-vue": "^9.19.2",
|
||||
"postcss-html": "^1.5.0",
|
||||
"eslint-plugin-vue": "^9.32.0",
|
||||
"postcss-html": "^1.7.0",
|
||||
"postcss-scss": "^4.0.9",
|
||||
"sass": "^1.69.4",
|
||||
"stylelint": "16.2.1",
|
||||
"stylelint-codeguide": "0.3.2",
|
||||
"sass": "~1.76.0",
|
||||
"stylelint": "16.8.0",
|
||||
"stylelint-codeguide": "2.0.0",
|
||||
"stylelint-config-idiomatic-order": "10.0.0",
|
||||
"stylelint-config-standard-scss": "13.0.0",
|
||||
"stylelint-config-standard-scss": "13.1.0",
|
||||
"stylelint-use-logical-spec": "5.0.1",
|
||||
"tsx": "^4.7.0",
|
||||
"vite": "^5.3.1",
|
||||
"tsx": "^4.19.2",
|
||||
"vite": "^5.4.11",
|
||||
"vite-plugin-vuetify": "2.0.3",
|
||||
"vite-svg-loader": "^5.1.0",
|
||||
"vue": "3.3.13"
|
||||
"vite-svg-loader": "^5.1.0"
|
||||
},
|
||||
"resolutions": {
|
||||
"stylelint-order": "6.0.3",
|
||||
"vue": "3.3.13"
|
||||
"postcss": "^8",
|
||||
"stylelint-order": "6.0.3"
|
||||
},
|
||||
"overrides": {
|
||||
"stylelint-order": "6.0.3",
|
||||
"vue": "3.3.13"
|
||||
"postcss": "^8",
|
||||
"stylelint-order": "6.0.3"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -67,6 +67,7 @@ definePageMeta({ layout: 'blank' })
|
||||
<!-- email -->
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="form.email"
|
||||
autofocus
|
||||
label="Email or Username"
|
||||
@@ -78,10 +79,12 @@ definePageMeta({ layout: 'blank' })
|
||||
<!-- password -->
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="form.password"
|
||||
label="Password"
|
||||
placeholder="············"
|
||||
:type="isPasswordVisible ? 'text' : 'password'"
|
||||
autocomplete="password"
|
||||
:append-inner-icon="isPasswordVisible ? 'bx-hide' : 'bx-show'"
|
||||
@click:append-inner="isPasswordVisible = !isPasswordVisible"
|
||||
/>
|
||||
@@ -89,6 +92,7 @@ definePageMeta({ layout: 'blank' })
|
||||
<!-- remember me checkbox -->
|
||||
<div class="d-flex align-center justify-space-between flex-wrap my-6">
|
||||
<VCheckbox
|
||||
:id="useId()"
|
||||
v-model="form.remember"
|
||||
label="Remember me"
|
||||
/>
|
||||
@@ -151,5 +155,5 @@ definePageMeta({ layout: 'blank' })
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@use "@core/scss/template/pages/page-auth.scss";
|
||||
@use "@core/scss/template/pages/page-auth";
|
||||
</style>
|
||||
|
||||
@@ -68,6 +68,7 @@ definePageMeta({ layout: 'blank' })
|
||||
<!-- Username -->
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="form.username"
|
||||
autofocus
|
||||
label="Username"
|
||||
@@ -77,6 +78,7 @@ definePageMeta({ layout: 'blank' })
|
||||
<!-- email -->
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="form.email"
|
||||
label="Email"
|
||||
type="email"
|
||||
@@ -87,8 +89,10 @@ definePageMeta({ layout: 'blank' })
|
||||
<!-- password -->
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="form.password"
|
||||
label="Password"
|
||||
autocomplete="password"
|
||||
placeholder="············"
|
||||
:type="isPasswordVisible ? 'text' : 'password'"
|
||||
:append-inner-icon="isPasswordVisible ? 'bx-hide' : 'bx-show'"
|
||||
@@ -160,5 +164,5 @@ definePageMeta({ layout: 'blank' })
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@use "@core/scss/template/pages/page-auth.scss";
|
||||
@use "@core/scss/template/pages/page-auth";
|
||||
</style>
|
||||
|
||||
14359
javascript-version/pnpm-lock.yaml
generated
14359
javascript-version/pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
1
javascript-version/public/robots.txt
Normal file
1
javascript-version/public/robots.txt
Normal file
@@ -0,0 +1 @@
|
||||
|
||||
@@ -168,6 +168,7 @@ const currencies = [
|
||||
cols="12"
|
||||
>
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="accountDataLocal.firstName"
|
||||
placeholder="John"
|
||||
label="First Name"
|
||||
@@ -180,6 +181,7 @@ const currencies = [
|
||||
cols="12"
|
||||
>
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="accountDataLocal.lastName"
|
||||
placeholder="Doe"
|
||||
label="Last Name"
|
||||
@@ -192,6 +194,7 @@ const currencies = [
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="accountDataLocal.email"
|
||||
label="E-mail"
|
||||
placeholder="johndoe@gmail.com"
|
||||
@@ -205,6 +208,7 @@ const currencies = [
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="accountDataLocal.org"
|
||||
label="Organization"
|
||||
placeholder="ThemeSelection"
|
||||
@@ -217,6 +221,7 @@ const currencies = [
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="accountDataLocal.phone"
|
||||
label="Phone Number"
|
||||
placeholder="+1 (917) 543-9876"
|
||||
@@ -229,6 +234,7 @@ const currencies = [
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="accountDataLocal.address"
|
||||
label="Address"
|
||||
placeholder="123 Main St, New York, NY 10001"
|
||||
@@ -241,6 +247,7 @@ const currencies = [
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="accountDataLocal.state"
|
||||
label="State"
|
||||
placeholder="New York"
|
||||
@@ -253,6 +260,7 @@ const currencies = [
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="accountDataLocal.zip"
|
||||
label="Zip Code"
|
||||
placeholder="10001"
|
||||
@@ -265,6 +273,7 @@ const currencies = [
|
||||
md="6"
|
||||
>
|
||||
<VSelect
|
||||
:id="useId()"
|
||||
v-model="accountDataLocal.country"
|
||||
label="Country"
|
||||
:items="['USA', 'Canada', 'UK', 'India', 'Australia']"
|
||||
@@ -278,6 +287,7 @@ const currencies = [
|
||||
md="6"
|
||||
>
|
||||
<VSelect
|
||||
:id="useId()"
|
||||
v-model="accountDataLocal.language"
|
||||
label="Language"
|
||||
placeholder="Select Language"
|
||||
@@ -291,6 +301,7 @@ const currencies = [
|
||||
md="6"
|
||||
>
|
||||
<VSelect
|
||||
:id="useId()"
|
||||
v-model="accountDataLocal.timezone"
|
||||
label="Timezone"
|
||||
placeholder="Select Timezone"
|
||||
@@ -305,6 +316,7 @@ const currencies = [
|
||||
md="6"
|
||||
>
|
||||
<VSelect
|
||||
:id="useId()"
|
||||
v-model="accountDataLocal.currency"
|
||||
label="Currency"
|
||||
placeholder="Select Currency"
|
||||
@@ -341,6 +353,7 @@ const currencies = [
|
||||
<VCardText>
|
||||
<div>
|
||||
<VCheckbox
|
||||
:id="useId()"
|
||||
v-model="isAccountDeactivated"
|
||||
label="I confirm my account deactivation"
|
||||
/>
|
||||
|
||||
@@ -62,13 +62,22 @@ const selectedNotification = ref('Only when I\'m online')
|
||||
{{ device.type }}
|
||||
</td>
|
||||
<td>
|
||||
<VCheckbox v-model="device.email" />
|
||||
<VCheckbox
|
||||
:id="useId()"
|
||||
v-model="device.email"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<VCheckbox v-model="device.browser" />
|
||||
<VCheckbox
|
||||
:id="useId()"
|
||||
v-model="device.browser"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<VCheckbox v-model="device.app" />
|
||||
<VCheckbox
|
||||
:id="useId()"
|
||||
v-model="device.app"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@@ -87,6 +96,7 @@ const selectedNotification = ref('Only when I\'m online')
|
||||
sm="6"
|
||||
>
|
||||
<VSelect
|
||||
:id="useId()"
|
||||
v-model="selectedNotification"
|
||||
mandatory
|
||||
:items="['Only when I\'m online', 'Anytime']"
|
||||
|
||||
@@ -131,6 +131,7 @@ const recentDevices = [
|
||||
>
|
||||
<!-- 👉 current password -->
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="currentPassword"
|
||||
:type="isCurrentPasswordVisible ? 'text' : 'password'"
|
||||
:append-inner-icon="isCurrentPasswordVisible ? 'bx-hide' : 'bx-show'"
|
||||
@@ -149,6 +150,7 @@ const recentDevices = [
|
||||
>
|
||||
<!-- 👉 new password -->
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="newPassword"
|
||||
:type="isNewPasswordVisible ? 'text' : 'password'"
|
||||
:append-inner-icon="isNewPasswordVisible ? 'bx-hide' : 'bx-show'"
|
||||
@@ -165,6 +167,7 @@ const recentDevices = [
|
||||
>
|
||||
<!-- 👉 confirm password -->
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="confirmPassword"
|
||||
:type="isConfirmPasswordVisible ? 'text' : 'password'"
|
||||
:append-inner-icon="isConfirmPasswordVisible ? 'bx-hide' : 'bx-show'"
|
||||
@@ -257,6 +260,7 @@ const recentDevices = [
|
||||
<!-- 👉 Choose API Key -->
|
||||
<VCol cols="12">
|
||||
<VSelect
|
||||
:id="useId()"
|
||||
label="Choose the API key type you want to create"
|
||||
placeholder="Select API key type"
|
||||
:items="['Full Control', 'Modify', 'Read & Execute', 'List Folder Contents', 'Read Only', 'Read & Write']"
|
||||
@@ -266,6 +270,7 @@ const recentDevices = [
|
||||
<!-- 👉 Name the API Key -->
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
label="Name the API key"
|
||||
placeholder="Name the API key"
|
||||
/>
|
||||
|
||||
@@ -192,12 +192,14 @@ const isCardDetailsVisible = ref(false)
|
||||
</VCardItem>
|
||||
|
||||
<VCardText class="d-flex align-center flex-wrap text-body-1">
|
||||
<VRating
|
||||
:model-value="5"
|
||||
readonly
|
||||
class="me-3"
|
||||
density="compact"
|
||||
/>
|
||||
<ClientOnly>
|
||||
<VRating
|
||||
:model-value="5"
|
||||
readonly
|
||||
class="me-3"
|
||||
density="compact"
|
||||
/>
|
||||
</ClientOnly>
|
||||
<span>5 Star | 98 reviews</span>
|
||||
</VCardText>
|
||||
|
||||
@@ -385,12 +387,14 @@ const isCardDetailsVisible = ref(false)
|
||||
>
|
||||
<VCard title="The Best Answers">
|
||||
<VCardText class="d-flex align-center flex-wrap">
|
||||
<VRating
|
||||
:model-value="5"
|
||||
readonly
|
||||
density="compact"
|
||||
class="me-3"
|
||||
/>
|
||||
<ClientOnly>
|
||||
<VRating
|
||||
:model-value="5"
|
||||
readonly
|
||||
density="compact"
|
||||
class="me-3"
|
||||
/>
|
||||
</ClientOnly>
|
||||
<span class="text-subtitle-2">5 Star | 98 reviews</span>
|
||||
</VCardText>
|
||||
|
||||
|
||||
@@ -120,6 +120,7 @@ const checkbox = ref(false)
|
||||
md="9"
|
||||
>
|
||||
<VCheckbox
|
||||
:id="useId()"
|
||||
v-model="checkbox"
|
||||
label="Remember me"
|
||||
/>
|
||||
|
||||
@@ -124,6 +124,7 @@ const checkbox = ref(false)
|
||||
md="9"
|
||||
>
|
||||
<VCheckbox
|
||||
:id="useId()"
|
||||
v-model="checkbox"
|
||||
label="Remember me"
|
||||
/>
|
||||
|
||||
@@ -17,6 +17,7 @@ const checkbox = ref(false)
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="firstName"
|
||||
label="First Name"
|
||||
placeholder="John"
|
||||
@@ -29,6 +30,7 @@ const checkbox = ref(false)
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="lastName"
|
||||
label="Last Name"
|
||||
placeholder="Doe"
|
||||
@@ -41,6 +43,7 @@ const checkbox = ref(false)
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="email"
|
||||
label="Email"
|
||||
placeholder="johndoe@email.com"
|
||||
@@ -53,6 +56,7 @@ const checkbox = ref(false)
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="city"
|
||||
label="City"
|
||||
placeholder="New York"
|
||||
@@ -65,6 +69,7 @@ const checkbox = ref(false)
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="country"
|
||||
label="Country"
|
||||
placeholder="United States"
|
||||
@@ -77,6 +82,7 @@ const checkbox = ref(false)
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="company"
|
||||
label="Company"
|
||||
placeholder="Themeselection"
|
||||
@@ -86,6 +92,7 @@ const checkbox = ref(false)
|
||||
<!-- 👉 Remember me -->
|
||||
<VCol cols="12">
|
||||
<VCheckbox
|
||||
:id="useId()"
|
||||
v-model="checkbox"
|
||||
label="Remember me"
|
||||
/>
|
||||
|
||||
@@ -11,6 +11,7 @@ const checkbox = ref(false)
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="firstName"
|
||||
label="First Name"
|
||||
placeholder="John"
|
||||
@@ -19,6 +20,7 @@ const checkbox = ref(false)
|
||||
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="email"
|
||||
label="Email"
|
||||
type="email"
|
||||
@@ -28,6 +30,7 @@ const checkbox = ref(false)
|
||||
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="mobile"
|
||||
label="Mobile"
|
||||
placeholder="+1 123 456 7890"
|
||||
@@ -37,6 +40,7 @@ const checkbox = ref(false)
|
||||
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="password"
|
||||
label="Password"
|
||||
autocomplete="on"
|
||||
@@ -47,6 +51,7 @@ const checkbox = ref(false)
|
||||
|
||||
<VCol cols="12">
|
||||
<VCheckbox
|
||||
:id="useId()"
|
||||
v-model="checkbox"
|
||||
label="Remember me"
|
||||
/>
|
||||
|
||||
@@ -11,6 +11,7 @@ const checkbox = ref(false)
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="firstName"
|
||||
prepend-inner-icon="bx-user"
|
||||
label="First Name"
|
||||
@@ -20,6 +21,7 @@ const checkbox = ref(false)
|
||||
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="email"
|
||||
prepend-inner-icon="bx-envelope"
|
||||
label="Email"
|
||||
@@ -30,6 +32,7 @@ const checkbox = ref(false)
|
||||
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="mobile"
|
||||
prepend-inner-icon="bx-mobile"
|
||||
label="Mobile"
|
||||
@@ -40,6 +43,7 @@ const checkbox = ref(false)
|
||||
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="password"
|
||||
prepend-inner-icon="bx-lock"
|
||||
label="Password"
|
||||
@@ -51,6 +55,7 @@ const checkbox = ref(false)
|
||||
|
||||
<VCol cols="12">
|
||||
<VCheckbox
|
||||
:id="useId()"
|
||||
v-model="checkbox"
|
||||
label="Remember me"
|
||||
/>
|
||||
|
||||
@@ -166,7 +166,10 @@
|
||||
// loop for all colors bg
|
||||
@each $color-name in variables.$theme-colors-name {
|
||||
body .v-tabs.v-tabs-pill {
|
||||
.v-slide-group-item--active.v-tab--selected.text-#{$color-name} {
|
||||
.v-slide-group__content {
|
||||
gap: 0.25rem;
|
||||
}
|
||||
.v-tab--selected.text-#{$color-name} {
|
||||
background-color: rgb(var(--v-theme-#{$color-name}));
|
||||
color: rgb(var(--v-theme-on-#{$color-name})) !important;
|
||||
}
|
||||
|
||||
@@ -1,186 +1,350 @@
|
||||
@use "sass:math";
|
||||
|
||||
$font-family-custom: "Public Sans",sans-serif,-apple-system,blinkmacsystemfont,
|
||||
"Segoe UI",roboto,"Helvetica Neue",arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
|
||||
$font-family-custom: "Public Sans", sans-serif, -apple-system,
|
||||
blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif,
|
||||
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
|
||||
/* 👉 Typography custom variables */
|
||||
$typography-h5-font-size: 1.125rem;
|
||||
$typography-body-1-font-size: 0.9375rem;
|
||||
$typography-body-1-line-height: 1.375rem;
|
||||
|
||||
@forward "../../../base/libs/vuetify/variables" with (
|
||||
@forward "../../../base/libs/vuetify/variables" with (
|
||||
$body-font-family: $font-family-custom !default,
|
||||
$border-radius-root: 6px !default,
|
||||
|
||||
// 👉 Rounded
|
||||
$rounded: (
|
||||
"sm": 4px,
|
||||
"lg": 8px,
|
||||
"shaped": 30px 0,
|
||||
) !default,
|
||||
$rounded:
|
||||
(
|
||||
"sm": 4px,
|
||||
"lg": 8px,
|
||||
"shaped": 30px 0,
|
||||
)
|
||||
!default,
|
||||
|
||||
// 👉 Shadows
|
||||
$shadow-key-umbra: (
|
||||
0: (0 0 0 0 rgba(var(--v-shadow-key-umbra-color), 1)),
|
||||
1: (0 2px 4px rgba(var(--v-shadow-key-umbra-color), 0.12)),
|
||||
2: (0 1px 5px rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-xs-opacity))),
|
||||
3: (0 3px 8px rgba(var(--v-shadow-key-umbra-color), 0.14)),
|
||||
4: (0 2px 6px rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-sm-opacity))),
|
||||
5: (0 4px 10px rgba(var(--v-shadow-key-umbra-color), 0.15)),
|
||||
6: (0 3px 8px rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-md-opacity))),
|
||||
7: (0 4px 18px rgba(var(--v-shadow-key-umbra-color), 0.1)),
|
||||
8: (0 4px 12px rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-lg-opacity))),
|
||||
9: (0 5px 14px rgba(var(--v-shadow-key-umbra-color), 0.18)),
|
||||
10: (0 5px 22px rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-xl-opacity))),
|
||||
11: (0 5px 16px rgba(var(--v-shadow-key-umbra-color), 0.2)),
|
||||
12: (0 6px 17px rgba(var(--v-shadow-key-umbra-color), 0.22)),
|
||||
13: (0 6px 18px rgba(var(--v-shadow-key-umbra-color), 0.22)),
|
||||
14: (0 6px 19px rgba(var(--v-shadow-key-umbra-color), 0.24)),
|
||||
15: (0 7px 20px rgba(var(--v-shadow-key-umbra-color), 0.24)),
|
||||
16: (0 7px 21px rgba(var(--v-shadow-key-umbra-color), 0.26)),
|
||||
17: (0 7px 22px rgba(var(--v-shadow-key-umbra-color), 0.26)),
|
||||
18: (0 8px 23px rgba(var(--v-shadow-key-umbra-color), 0.28)),
|
||||
19: (0 8px 24px 6px rgba(var(--v-shadow-key-umbra-color), 0.28)),
|
||||
20: (0 9px 25px rgba(var(--v-shadow-key-umbra-color), 0.3)),
|
||||
21: (0 9px 26px rgba(var(--v-shadow-key-umbra-color), 0.32)),
|
||||
22: (0 9px 27px rgba(var(--v-shadow-key-umbra-color), 0.32)),
|
||||
23: (0 10px 28px rgba(var(--v-shadow-key-umbra-color), 0.34)),
|
||||
24: (0 10px 30px rgba(var(--v-shadow-key-umbra-color), 0.34))
|
||||
) !default,
|
||||
$shadow-key-umbra:
|
||||
(
|
||||
0: (
|
||||
0 0 0 0 rgba(var(--v-shadow-key-umbra-color), 1),
|
||||
),
|
||||
1: (
|
||||
0 2px 4px rgba(var(--v-shadow-key-umbra-color), 0.12),
|
||||
),
|
||||
2: (
|
||||
0 1px 5px
|
||||
rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-xs-opacity)),
|
||||
),
|
||||
3: (
|
||||
0 3px 8px rgba(var(--v-shadow-key-umbra-color), 0.14),
|
||||
),
|
||||
4: (
|
||||
0 2px 6px
|
||||
rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-sm-opacity)),
|
||||
),
|
||||
5: (
|
||||
0 4px 10px rgba(var(--v-shadow-key-umbra-color), 0.15),
|
||||
),
|
||||
6: (
|
||||
0 3px 8px
|
||||
rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-md-opacity)),
|
||||
),
|
||||
7: (
|
||||
0 4px 18px rgba(var(--v-shadow-key-umbra-color), 0.1),
|
||||
),
|
||||
8: (
|
||||
0 4px 12px
|
||||
rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-lg-opacity)),
|
||||
),
|
||||
9: (
|
||||
0 5px 14px rgba(var(--v-shadow-key-umbra-color), 0.18),
|
||||
),
|
||||
10: (
|
||||
0 5px 22px
|
||||
rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-xl-opacity)),
|
||||
),
|
||||
11: (
|
||||
0 5px 16px rgba(var(--v-shadow-key-umbra-color), 0.2),
|
||||
),
|
||||
12: (
|
||||
0 6px 17px rgba(var(--v-shadow-key-umbra-color), 0.22),
|
||||
),
|
||||
13: (
|
||||
0 6px 18px rgba(var(--v-shadow-key-umbra-color), 0.22),
|
||||
),
|
||||
14: (
|
||||
0 6px 19px rgba(var(--v-shadow-key-umbra-color), 0.24),
|
||||
),
|
||||
15: (
|
||||
0 7px 20px rgba(var(--v-shadow-key-umbra-color), 0.24),
|
||||
),
|
||||
16: (
|
||||
0 7px 21px rgba(var(--v-shadow-key-umbra-color), 0.26),
|
||||
),
|
||||
17: (
|
||||
0 7px 22px rgba(var(--v-shadow-key-umbra-color), 0.26),
|
||||
),
|
||||
18: (
|
||||
0 8px 23px rgba(var(--v-shadow-key-umbra-color), 0.28),
|
||||
),
|
||||
19: (
|
||||
0 8px 24px 6px rgba(var(--v-shadow-key-umbra-color), 0.28),
|
||||
),
|
||||
20: (
|
||||
0 9px 25px rgba(var(--v-shadow-key-umbra-color), 0.3),
|
||||
),
|
||||
21: (
|
||||
0 9px 26px rgba(var(--v-shadow-key-umbra-color), 0.32),
|
||||
),
|
||||
22: (
|
||||
0 9px 27px rgba(var(--v-shadow-key-umbra-color), 0.32),
|
||||
),
|
||||
23: (
|
||||
0 10px 28px rgba(var(--v-shadow-key-umbra-color), 0.34),
|
||||
),
|
||||
24: (
|
||||
0 10px 30px rgba(var(--v-shadow-key-umbra-color), 0.34),
|
||||
),
|
||||
)
|
||||
!default,
|
||||
|
||||
$shadow-key-penumbra: (
|
||||
0: (0 0 transparent),
|
||||
1: (0 0 transparent),
|
||||
2: (0 0 transparent),
|
||||
3: (0 0 transparent),
|
||||
4: (0 0 transparent),
|
||||
5: (0 0 transparent),
|
||||
6: (0 0 transparent),
|
||||
7: (0 0 transparent),
|
||||
8: (0 0 transparent),
|
||||
9: (0 0 transparent),
|
||||
10: (0 0 transparent),
|
||||
11: (0 0 transparent),
|
||||
12: (0 0 transparent),
|
||||
13: (0 0 transparent),
|
||||
14: (0 0 transparent),
|
||||
15: (0 0 transparent),
|
||||
16: (0 0 transparent),
|
||||
17: (0 0 transparent),
|
||||
18: (0 0 transparent),
|
||||
19: (0 0 transparent),
|
||||
20: (0 0 transparent),
|
||||
21: (0 0 transparent),
|
||||
22: (0 0 transparent),
|
||||
23: (0 0 transparent),
|
||||
24: (0 0 transparent),
|
||||
) !default,
|
||||
0: (
|
||||
0 0 transparent,
|
||||
),
|
||||
1: (
|
||||
0 0 transparent,
|
||||
),
|
||||
2: (
|
||||
0 0 transparent,
|
||||
),
|
||||
3: (
|
||||
0 0 transparent,
|
||||
),
|
||||
4: (
|
||||
0 0 transparent,
|
||||
),
|
||||
5: (
|
||||
0 0 transparent,
|
||||
),
|
||||
6: (
|
||||
0 0 transparent,
|
||||
),
|
||||
7: (
|
||||
0 0 transparent,
|
||||
),
|
||||
8: (
|
||||
0 0 transparent,
|
||||
),
|
||||
9: (
|
||||
0 0 transparent,
|
||||
),
|
||||
10: (
|
||||
0 0 transparent,
|
||||
),
|
||||
11: (
|
||||
0 0 transparent,
|
||||
),
|
||||
12: (
|
||||
0 0 transparent,
|
||||
),
|
||||
13: (
|
||||
0 0 transparent,
|
||||
),
|
||||
14: (
|
||||
0 0 transparent,
|
||||
),
|
||||
15: (
|
||||
0 0 transparent,
|
||||
),
|
||||
16: (
|
||||
0 0 transparent,
|
||||
),
|
||||
17: (
|
||||
0 0 transparent,
|
||||
),
|
||||
18: (
|
||||
0 0 transparent,
|
||||
),
|
||||
19: (
|
||||
0 0 transparent,
|
||||
),
|
||||
20: (
|
||||
0 0 transparent,
|
||||
),
|
||||
21: (
|
||||
0 0 transparent,
|
||||
),
|
||||
22: (
|
||||
0 0 transparent,
|
||||
),
|
||||
23: (
|
||||
0 0 transparent,
|
||||
),
|
||||
24: (
|
||||
0 0 transparent,
|
||||
),
|
||||
)
|
||||
!default,
|
||||
|
||||
$shadow-key-ambient: (
|
||||
0: (0 0 transparent),
|
||||
1: (0 0 transparent),
|
||||
2: (0 0 transparent),
|
||||
3: (0 0 transparent),
|
||||
4: (0 0 transparent),
|
||||
5: (0 0 transparent),
|
||||
6: (0 0 transparent),
|
||||
7: (0 0 transparent),
|
||||
8: (0 0 transparent),
|
||||
9: (0 0 transparent),
|
||||
10: (0 0 transparent),
|
||||
11: (0 0 transparent),
|
||||
12: (0 0 transparent),
|
||||
13: (0 0 transparent),
|
||||
14: (0 0 transparent),
|
||||
15: (0 0 transparent),
|
||||
16: (0 0 transparent),
|
||||
17: (0 0 transparent),
|
||||
18: (0 0 transparent),
|
||||
19: (0 0 transparent),
|
||||
20: (0 0 transparent),
|
||||
21: (0 0 transparent),
|
||||
22: (0 0 transparent),
|
||||
23: (0 0 transparent),
|
||||
24: (0 0 transparent),
|
||||
) !default,
|
||||
0: (
|
||||
0 0 transparent,
|
||||
),
|
||||
1: (
|
||||
0 0 transparent,
|
||||
),
|
||||
2: (
|
||||
0 0 transparent,
|
||||
),
|
||||
3: (
|
||||
0 0 transparent,
|
||||
),
|
||||
4: (
|
||||
0 0 transparent,
|
||||
),
|
||||
5: (
|
||||
0 0 transparent,
|
||||
),
|
||||
6: (
|
||||
0 0 transparent,
|
||||
),
|
||||
7: (
|
||||
0 0 transparent,
|
||||
),
|
||||
8: (
|
||||
0 0 transparent,
|
||||
),
|
||||
9: (
|
||||
0 0 transparent,
|
||||
),
|
||||
10: (
|
||||
0 0 transparent,
|
||||
),
|
||||
11: (
|
||||
0 0 transparent,
|
||||
),
|
||||
12: (
|
||||
0 0 transparent,
|
||||
),
|
||||
13: (
|
||||
0 0 transparent,
|
||||
),
|
||||
14: (
|
||||
0 0 transparent,
|
||||
),
|
||||
15: (
|
||||
0 0 transparent,
|
||||
),
|
||||
16: (
|
||||
0 0 transparent,
|
||||
),
|
||||
17: (
|
||||
0 0 transparent,
|
||||
),
|
||||
18: (
|
||||
0 0 transparent,
|
||||
),
|
||||
19: (
|
||||
0 0 transparent,
|
||||
),
|
||||
20: (
|
||||
0 0 transparent,
|
||||
),
|
||||
21: (
|
||||
0 0 transparent,
|
||||
),
|
||||
22: (
|
||||
0 0 transparent,
|
||||
),
|
||||
23: (
|
||||
0 0 transparent,
|
||||
),
|
||||
24: (
|
||||
0 0 transparent,
|
||||
),
|
||||
)
|
||||
!default,
|
||||
|
||||
// 👉 Typography
|
||||
$typography: (
|
||||
"h1": (
|
||||
"size": 2.875rem,
|
||||
"weight": 500,
|
||||
"line-height": 4.25rem,
|
||||
"letter-spacing": normal
|
||||
),
|
||||
"h2": (
|
||||
"size": 2.375rem,
|
||||
"weight": 500,
|
||||
"line-height": 3.5rem,
|
||||
"letter-spacing": normal
|
||||
),
|
||||
"h3": (
|
||||
"size": 1.75rem,
|
||||
"weight": 500,
|
||||
"line-height": 2.625rem
|
||||
),
|
||||
"h4": (
|
||||
"size": 1.5rem,
|
||||
"weight": 500,
|
||||
"line-height": 2.375rem,
|
||||
"letter-spacing": normal
|
||||
),
|
||||
"h5": (
|
||||
"size": $typography-h5-font-size,
|
||||
"weight": 500,
|
||||
"line-height": 1.75rem
|
||||
),
|
||||
"h6":(
|
||||
"size": 0.9375rem,
|
||||
"line-height": 1.375rem,
|
||||
"weight": 500,
|
||||
"letter-spacing": normal
|
||||
),
|
||||
"body-1":(
|
||||
"size": $typography-body-1-font-size,
|
||||
"line-height": $typography-body-1-line-height,
|
||||
"letter-spacing": normal
|
||||
),
|
||||
"body-2": (
|
||||
"size": 0.8125rem,
|
||||
"line-height": 1.25rem,
|
||||
"letter-spacing": normal
|
||||
),
|
||||
"subtitle-1":(
|
||||
"size": 0.9375rem,
|
||||
"weight": 400,
|
||||
"line-height": 1.375rem
|
||||
),
|
||||
"subtitle-2": (
|
||||
"size": 0.8125rem,
|
||||
"weight": 400,
|
||||
"line-height": 1.25rem,
|
||||
"letter-spacing": normal
|
||||
),
|
||||
"button": (
|
||||
"size": 0.9375rem,
|
||||
"weight": 500,
|
||||
"line-height": 1.125rem,
|
||||
"letter-spacing": 0.0269rem,
|
||||
"text-transform": capitalize
|
||||
),
|
||||
"caption":(
|
||||
"size": 0.8125rem,
|
||||
"line-height": 1.125rem,
|
||||
"letter-spacing": 0.025rem
|
||||
),
|
||||
"overline": (
|
||||
"size": 0.75rem,
|
||||
"weight": 400,
|
||||
"line-height": 0.875rem,
|
||||
"letter-spacing": 0.05rem,
|
||||
"text-transform": uppercase
|
||||
),
|
||||
) !default,
|
||||
$typography:
|
||||
(
|
||||
"h1": (
|
||||
"size": 2.875rem,
|
||||
"weight": 500,
|
||||
"line-height": 4.25rem,
|
||||
"letter-spacing": normal,
|
||||
),
|
||||
"h2": (
|
||||
"size": 2.375rem,
|
||||
"weight": 500,
|
||||
"line-height": 3.5rem,
|
||||
"letter-spacing": normal,
|
||||
),
|
||||
"h3": (
|
||||
"size": 1.75rem,
|
||||
"weight": 500,
|
||||
"line-height": 2.625rem,
|
||||
),
|
||||
"h4": (
|
||||
"size": 1.5rem,
|
||||
"weight": 500,
|
||||
"line-height": 2.375rem,
|
||||
"letter-spacing": normal,
|
||||
),
|
||||
"h5": (
|
||||
"size": $typography-h5-font-size,
|
||||
"weight": 500,
|
||||
"line-height": 1.75rem,
|
||||
),
|
||||
"h6": (
|
||||
"size": 0.9375rem,
|
||||
"line-height": 1.375rem,
|
||||
"weight": 500,
|
||||
"letter-spacing": normal,
|
||||
),
|
||||
"body-1": (
|
||||
"size": $typography-body-1-font-size,
|
||||
"line-height": $typography-body-1-line-height,
|
||||
"letter-spacing": normal,
|
||||
),
|
||||
"body-2": (
|
||||
"size": 0.8125rem,
|
||||
"line-height": 1.25rem,
|
||||
"letter-spacing": normal,
|
||||
),
|
||||
"subtitle-1": (
|
||||
"size": 0.9375rem,
|
||||
"weight": 400,
|
||||
"line-height": 1.375rem,
|
||||
),
|
||||
"subtitle-2": (
|
||||
"size": 0.8125rem,
|
||||
"weight": 400,
|
||||
"line-height": 1.25rem,
|
||||
"letter-spacing": normal,
|
||||
),
|
||||
"button": (
|
||||
"size": 0.9375rem,
|
||||
"weight": 500,
|
||||
"line-height": 1.125rem,
|
||||
"letter-spacing": 0.0269rem,
|
||||
"text-transform": capitalize,
|
||||
),
|
||||
"caption": (
|
||||
"size": 0.8125rem,
|
||||
"line-height": 1.125rem,
|
||||
"letter-spacing": 0.025rem,
|
||||
),
|
||||
"overline": (
|
||||
"size": 0.75rem,
|
||||
"weight": 400,
|
||||
"line-height": 0.875rem,
|
||||
"letter-spacing": 0.05rem,
|
||||
"text-transform": uppercase,
|
||||
),
|
||||
)
|
||||
!default,
|
||||
|
||||
// 👉 Alert
|
||||
$alert-title-font-size: 1.125rem !default,
|
||||
@@ -219,7 +383,12 @@ $typography-body-1-line-height: 1.375rem;
|
||||
$button-disabled-opacity: 0.45 !default,
|
||||
$button-disabled-overlay: 0.2025 !default,
|
||||
$button-icon-font-size: 0.9375rem !default,
|
||||
$button-elevation: ("default": 2, "hover": 2, "active": 2) !default,
|
||||
$button-elevation: (
|
||||
"default": 2,
|
||||
"hover": 2,
|
||||
"active": 2,
|
||||
)
|
||||
!default,
|
||||
|
||||
// 👉 Button Group
|
||||
$btn-group-border-radius: 8px !default,
|
||||
@@ -249,14 +418,20 @@ $typography-body-1-line-height: 1.375rem;
|
||||
|
||||
// 👉 Expansion Panel
|
||||
$expansion-panel-title-padding: 12px 20px 12px 24px !default,
|
||||
$expansion-panel-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default,
|
||||
$expansion-panel-color:
|
||||
rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default,
|
||||
$expansion-panel-active-title-min-height: 46px !default,
|
||||
$expansion-panel-title-min-height: 46px !default,
|
||||
$expansion-panel-text-padding: 0 20px 20px 24px !default,
|
||||
|
||||
// 👉 Field
|
||||
$field-font-size: 0.9375rem !default,
|
||||
$input-density: ("default": -2, "comfortable": -4.5, "compact": -6.5) !default,
|
||||
$input-density: (
|
||||
"default": -2,
|
||||
"comfortable": -4.5,
|
||||
"compact": -6.5,
|
||||
)
|
||||
!default,
|
||||
$field-outline-opacity: 0.22 !default,
|
||||
$field-border-width: 1px !default,
|
||||
$field-focused-border-width: 2px !default,
|
||||
@@ -267,12 +442,17 @@ $typography-body-1-line-height: 1.375rem;
|
||||
$input-details-font-size: 0.8125rem !default,
|
||||
|
||||
// 👉 List
|
||||
$list-density: ("default": 0, "comfortable": -1.5, "compact": -2.5) !default,
|
||||
$list-density:
|
||||
(
|
||||
"default": 0,
|
||||
"comfortable": -1.5,
|
||||
"compact": -2.5,
|
||||
)
|
||||
!default,
|
||||
$list-item-padding: 8px 20px !default,
|
||||
$list-item-min-height: 38px !default,
|
||||
$list-subheader-font-size: 13px !default,
|
||||
$list-subheader-line-height: 1.25rem !default,
|
||||
$list-subheader-padding-start: 20px !default,
|
||||
$list-subheader-padding-end: 20px !default,
|
||||
$list-subheader-min-height: 40px !default,
|
||||
$list-disabled-opacity: 0.4 !default,
|
||||
@@ -317,7 +497,13 @@ $typography-body-1-line-height: 1.375rem;
|
||||
$slider-thumb-label-transition: none !default,
|
||||
|
||||
// 👉 select
|
||||
$select-chips-margin-bottom: ("default": 1, "comfortable": 1, "compact": 1) !default,
|
||||
$select-chips-margin-bottom:
|
||||
(
|
||||
"default": 1,
|
||||
"comfortable": 1,
|
||||
"compact": 1,
|
||||
)
|
||||
!default,
|
||||
|
||||
// 👉 snackbar
|
||||
$snackbar-background: rgb(var(--v-tooltip-background)) !default,
|
||||
@@ -325,7 +511,7 @@ $typography-body-1-line-height: 1.375rem;
|
||||
$snackbar-content-padding: 12px 16px !default,
|
||||
$snackbar-font-size: 0.8125rem !default,
|
||||
$snackbar-elevation: 2 !default,
|
||||
$snackbar-wrapper-min-height:44px !default,
|
||||
$snackbar-wrapper-min-height: 44px !default,
|
||||
$snackbar-btn-padding: 0 9px !default,
|
||||
$snackbar-action-margin: 16px !default,
|
||||
|
||||
@@ -336,12 +522,13 @@ $typography-body-1-line-height: 1.375rem;
|
||||
$switch-inset-thumb-width: 0.875rem !default,
|
||||
$switch-inset-thumb-off-height: 0.875rem !default,
|
||||
$switch-track-opacity: 1 !default,
|
||||
$switch-track-background: rgba(var(--v-theme-on-surface), var(--v-focus-opacity)) !default,
|
||||
$switch-track-background:
|
||||
rgba(var(--v-theme-on-surface), var(--v-focus-opacity)) !default,
|
||||
$switch-thumb-background: rgb(var(--v-theme-on-primary)),
|
||||
|
||||
// 👉 table
|
||||
$table-row-height: 50px !default,
|
||||
$table-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default,
|
||||
$table-color:
|
||||
rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default,
|
||||
$table-font-size: 0.9375rem !default,
|
||||
$table-header-height: 56px !default,
|
||||
$table-header-font-weight: 500 !default,
|
||||
@@ -362,8 +549,9 @@ $typography-body-1-line-height: 1.375rem;
|
||||
|
||||
// 👉 timeline
|
||||
$timeline-dot-size: 34px !default,
|
||||
$timeline-dot-divider-background: rgba(var(--v-border-color),0.08) !default,
|
||||
$timeline-divider-line-background: rgba(var(--v-border-color), var(--v-border-opacity)) !default,
|
||||
$timeline-dot-divider-background: rgba(var(--v-border-color), 0.08) !default,
|
||||
$timeline-divider-line-background:
|
||||
rgba(var(--v-border-color), var(--v-border-opacity)) !default,
|
||||
$timeline-divider-line-thickness: 1.5px !default,
|
||||
$timeline-item-padding: 16px !default,
|
||||
$timeline-item-padding: 16px !default
|
||||
);
|
||||
|
||||
@@ -42,6 +42,7 @@ const handleNavScroll = (evt: Event) => {
|
||||
<Component
|
||||
:is="props.tag"
|
||||
ref="refNav"
|
||||
data-allow-mismatch
|
||||
class="layout-vertical-nav"
|
||||
:class="[
|
||||
{
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
@use "global";
|
||||
@use "vue3-perfect-scrollbar/dist/vue3-perfect-scrollbar.min.css";
|
||||
@use "vue3-perfect-scrollbar/style.css";
|
||||
@use "classes";
|
||||
|
||||
@@ -1,5 +1,8 @@
|
||||
<template>
|
||||
<div class="layout-wrapper layout-blank">
|
||||
<div
|
||||
class="layout-wrapper layout-blank"
|
||||
data-allow-mismatch
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<script lang="ts" setup>
|
||||
import VerticalNavSectionTitle from '@/@layouts/components/VerticalNavSectionTitle.vue'
|
||||
import VerticalNavGroup from '@layouts/components/VerticalNavGroup.vue'
|
||||
import VerticalNavLink from '@layouts/components/VerticalNavLink.vue'
|
||||
import VerticalNavSectionTitle from "@/@layouts/components/VerticalNavSectionTitle.vue";
|
||||
import VerticalNavGroup from "@layouts/components/VerticalNavGroup.vue";
|
||||
import VerticalNavLink from "@layouts/components/VerticalNavLink.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "sneat-nuxtjs-admin-template-free",
|
||||
"version": "1.0.0",
|
||||
"version": "1.1.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
@@ -12,74 +12,73 @@
|
||||
"generate": "nuxt generate"
|
||||
},
|
||||
"dependencies": {
|
||||
"@floating-ui/dom": "1.6.3",
|
||||
"@floating-ui/dom": "1.6.8",
|
||||
"@stylistic/stylelint-config": "^1.0.1",
|
||||
"@vueuse/core": "^10.5.0",
|
||||
"@vueuse/math": "^10.5.0",
|
||||
"@vueuse/core": "^10.11.1",
|
||||
"@vueuse/math": "^10.11.1",
|
||||
"apexcharts": "3.49.2",
|
||||
"nuxt": "^3.12.2",
|
||||
"pinia": "^2.1.7",
|
||||
"nuxt": "3.14.1592",
|
||||
"pinia": "^2.3.0",
|
||||
"prismjs": "^1.29.0",
|
||||
"roboto-fontface": "^0.10.0",
|
||||
"vue-flatpickr-component": "11.0.5",
|
||||
"vue-prism-component": "^2.0.0",
|
||||
"vue3-apexcharts": "^1.5.2",
|
||||
"vue3-perfect-scrollbar": "^1.6.1",
|
||||
"vuetify": "3.6.1",
|
||||
"vue3-apexcharts": "1.5.2",
|
||||
"vue3-perfect-scrollbar": "^2.0.0",
|
||||
"vuetify": "3.7.5",
|
||||
"webfontloader": "^1.6.28"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@antfu/eslint-config-vue": "^0.43.1",
|
||||
"@antfu/utils": "^0.7.6",
|
||||
"@iconify-json/bx": "^1.1.6",
|
||||
"@iconify-json/bxl": "^1.1.6",
|
||||
"@iconify-json/bxs": "^1.1.6",
|
||||
"@iconify-json/fa": "^1.1.8",
|
||||
"@iconify-json/mdi": "^1.1.58",
|
||||
"@iconify/tools": "^4.0.0",
|
||||
"@antfu/utils": "^0.7.10",
|
||||
"@iconify-json/bx": "^1.2.2",
|
||||
"@iconify-json/bxl": "^1.2.2",
|
||||
"@iconify-json/bxs": "^1.2.2",
|
||||
"@iconify-json/fa": "^1.2.1",
|
||||
"@iconify-json/mdi": "^1.2.1",
|
||||
"@iconify/tools": "^4.0.7",
|
||||
"@iconify/utils": "^2.1.13",
|
||||
"@iconify/vue": "4.1.1",
|
||||
"@nuxtjs/device": "^3.1.1",
|
||||
"@pinia/nuxt": "^0.5.1",
|
||||
"@types/node": "^20.10.3",
|
||||
"@iconify/vue": "4.1.2",
|
||||
"@nuxtjs/device": "^3.2.4",
|
||||
"@pinia/nuxt": "^0.9.0",
|
||||
"@types/node": "^22.10.2",
|
||||
"@types/webfontloader": "^1.6.35",
|
||||
"@typescript-eslint/eslint-plugin": "^7.14.1",
|
||||
"@typescript-eslint/parser": "^7.14.1",
|
||||
"@vueuse/nuxt": "^10.11.0",
|
||||
"@typescript-eslint/eslint-plugin": "^7.18.0",
|
||||
"@typescript-eslint/parser": "^7.18.0",
|
||||
"@vueuse/nuxt": "^12.2.0",
|
||||
"boxicons": "^2.1.4",
|
||||
"eslint": "^8.56.0",
|
||||
"eslint": "^8.57.1",
|
||||
"eslint-config-airbnb-base": "^15.0.0",
|
||||
"eslint-import-resolver-typescript": "^3.6.1",
|
||||
"eslint-plugin-case-police": "^0.6.1",
|
||||
"eslint-plugin-import": "^2.29.1",
|
||||
"eslint-plugin-promise": "^6.1.1",
|
||||
"eslint-plugin-import": "^2.31.0",
|
||||
"eslint-plugin-promise": "^6.6.0",
|
||||
"eslint-plugin-regex": "^1.10.0",
|
||||
"eslint-plugin-regexp": "^2.6.0",
|
||||
"eslint-plugin-sonarjs": "^0.24.0",
|
||||
"eslint-plugin-unicorn": "^51.0.1",
|
||||
"eslint-plugin-vue": "^9.19.2",
|
||||
"postcss-html": "^1.5.0",
|
||||
"eslint-plugin-vue": "^9.32.0",
|
||||
"postcss-html": "^1.7.0",
|
||||
"postcss-scss": "^4.0.9",
|
||||
"sass": "^1.69.4",
|
||||
"stylelint": "16.2.1",
|
||||
"stylelint-codeguide": "0.3.2",
|
||||
"sass": "~1.76.0",
|
||||
"stylelint": "16.8.0",
|
||||
"stylelint-codeguide": "2.0.0",
|
||||
"stylelint-config-idiomatic-order": "10.0.0",
|
||||
"stylelint-config-standard-scss": "13.0.0",
|
||||
"stylelint-config-standard-scss": "13.1.0",
|
||||
"stylelint-use-logical-spec": "5.0.1",
|
||||
"tsx": "^4.7.0",
|
||||
"type-fest": "^4.8.3",
|
||||
"typescript": "^5.3.3",
|
||||
"vite": "^5.3.1",
|
||||
"tsx": "^4.19.2",
|
||||
"type-fest": "^4.30.1",
|
||||
"typescript": "^5.7.2",
|
||||
"vite": "^5.4.11",
|
||||
"vite-plugin-vuetify": "2.0.3",
|
||||
"vite-svg-loader": "^5.1.0",
|
||||
"vue": "3.3.13"
|
||||
"vite-svg-loader": "^5.1.0"
|
||||
},
|
||||
"resolutions": {
|
||||
"stylelint-order": "6.0.3",
|
||||
"vue": "3.3.13"
|
||||
"postcss": "^8",
|
||||
"stylelint-order": "6.0.3"
|
||||
},
|
||||
"overrides": {
|
||||
"stylelint-order": "6.0.3",
|
||||
"vue": "3.3.13"
|
||||
"postcss": "^8",
|
||||
"stylelint-order": "6.0.3"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -67,6 +67,7 @@ definePageMeta({ layout: 'blank' })
|
||||
<!-- email -->
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="form.email"
|
||||
autofocus
|
||||
label="Email or Username"
|
||||
@@ -78,10 +79,12 @@ definePageMeta({ layout: 'blank' })
|
||||
<!-- password -->
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="form.password"
|
||||
label="Password"
|
||||
placeholder="············"
|
||||
:type="isPasswordVisible ? 'text' : 'password'"
|
||||
autocomplete="password"
|
||||
:append-inner-icon="isPasswordVisible ? 'bx-hide' : 'bx-show'"
|
||||
@click:append-inner="isPasswordVisible = !isPasswordVisible"
|
||||
/>
|
||||
@@ -89,6 +92,7 @@ definePageMeta({ layout: 'blank' })
|
||||
<!-- remember me checkbox -->
|
||||
<div class="d-flex align-center justify-space-between flex-wrap my-6">
|
||||
<VCheckbox
|
||||
:id="useId()"
|
||||
v-model="form.remember"
|
||||
label="Remember me"
|
||||
/>
|
||||
@@ -151,5 +155,5 @@ definePageMeta({ layout: 'blank' })
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@use "@core/scss/template/pages/page-auth.scss";
|
||||
@use "@core/scss/template/pages/page-auth";
|
||||
</style>
|
||||
|
||||
@@ -68,6 +68,7 @@ definePageMeta({ layout: 'blank' })
|
||||
<!-- Username -->
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="form.username"
|
||||
autofocus
|
||||
label="Username"
|
||||
@@ -77,6 +78,7 @@ definePageMeta({ layout: 'blank' })
|
||||
<!-- email -->
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="form.email"
|
||||
label="Email"
|
||||
type="email"
|
||||
@@ -87,8 +89,10 @@ definePageMeta({ layout: 'blank' })
|
||||
<!-- password -->
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="form.password"
|
||||
label="Password"
|
||||
autocomplete="password"
|
||||
placeholder="············"
|
||||
:type="isPasswordVisible ? 'text' : 'password'"
|
||||
:append-inner-icon="isPasswordVisible ? 'bx-hide' : 'bx-show'"
|
||||
@@ -160,5 +164,5 @@ definePageMeta({ layout: 'blank' })
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@use "@core/scss/template/pages/page-auth.scss";
|
||||
@use "@core/scss/template/pages/page-auth";
|
||||
</style>
|
||||
|
||||
14710
typescript-version/pnpm-lock.yaml
generated
14710
typescript-version/pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
1
typescript-version/public/robots.txt
Normal file
1
typescript-version/public/robots.txt
Normal file
@@ -0,0 +1 @@
|
||||
|
||||
@@ -171,6 +171,7 @@ const currencies = [
|
||||
cols="12"
|
||||
>
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="accountDataLocal.firstName"
|
||||
placeholder="John"
|
||||
label="First Name"
|
||||
@@ -183,6 +184,7 @@ const currencies = [
|
||||
cols="12"
|
||||
>
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="accountDataLocal.lastName"
|
||||
placeholder="Doe"
|
||||
label="Last Name"
|
||||
@@ -195,6 +197,7 @@ const currencies = [
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="accountDataLocal.email"
|
||||
label="E-mail"
|
||||
placeholder="johndoe@gmail.com"
|
||||
@@ -208,6 +211,7 @@ const currencies = [
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="accountDataLocal.org"
|
||||
label="Organization"
|
||||
placeholder="ThemeSelection"
|
||||
@@ -220,6 +224,7 @@ const currencies = [
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="accountDataLocal.phone"
|
||||
label="Phone Number"
|
||||
placeholder="+1 (917) 543-9876"
|
||||
@@ -232,6 +237,7 @@ const currencies = [
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="accountDataLocal.address"
|
||||
label="Address"
|
||||
placeholder="123 Main St, New York, NY 10001"
|
||||
@@ -244,6 +250,7 @@ const currencies = [
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="accountDataLocal.state"
|
||||
label="State"
|
||||
placeholder="New York"
|
||||
@@ -256,6 +263,7 @@ const currencies = [
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="accountDataLocal.zip"
|
||||
label="Zip Code"
|
||||
placeholder="10001"
|
||||
@@ -268,6 +276,7 @@ const currencies = [
|
||||
md="6"
|
||||
>
|
||||
<VSelect
|
||||
:id="useId()"
|
||||
v-model="accountDataLocal.country"
|
||||
label="Country"
|
||||
:items="['USA', 'Canada', 'UK', 'India', 'Australia']"
|
||||
@@ -281,6 +290,7 @@ const currencies = [
|
||||
md="6"
|
||||
>
|
||||
<VSelect
|
||||
:id="useId()"
|
||||
v-model="accountDataLocal.language"
|
||||
label="Language"
|
||||
placeholder="Select Language"
|
||||
@@ -294,6 +304,7 @@ const currencies = [
|
||||
md="6"
|
||||
>
|
||||
<VSelect
|
||||
:id="useId()"
|
||||
v-model="accountDataLocal.timezone"
|
||||
label="Timezone"
|
||||
placeholder="Select Timezone"
|
||||
@@ -308,6 +319,7 @@ const currencies = [
|
||||
md="6"
|
||||
>
|
||||
<VSelect
|
||||
:id="useId()"
|
||||
v-model="accountDataLocal.currency"
|
||||
label="Currency"
|
||||
placeholder="Select Currency"
|
||||
@@ -344,6 +356,7 @@ const currencies = [
|
||||
<VCardText>
|
||||
<div>
|
||||
<VCheckbox
|
||||
:id="useId()"
|
||||
v-model="isAccountDeactivated"
|
||||
label="I confirm my account deactivation"
|
||||
/>
|
||||
|
||||
@@ -64,13 +64,22 @@ const selectedNotification = ref('Only when I\'m online')
|
||||
{{ device.type }}
|
||||
</td>
|
||||
<td>
|
||||
<VCheckbox v-model="device.email" />
|
||||
<VCheckbox
|
||||
:id="useId()"
|
||||
v-model="device.email"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<VCheckbox v-model="device.browser" />
|
||||
<VCheckbox
|
||||
:id="useId()"
|
||||
v-model="device.browser"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<VCheckbox v-model="device.app" />
|
||||
<VCheckbox
|
||||
:id="useId()"
|
||||
v-model="device.app"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@@ -89,6 +98,7 @@ const selectedNotification = ref('Only when I\'m online')
|
||||
sm="6"
|
||||
>
|
||||
<VSelect
|
||||
:id="useId()"
|
||||
v-model="selectedNotification"
|
||||
mandatory
|
||||
:items="['Only when I\'m online', 'Anytime']"
|
||||
|
||||
@@ -101,6 +101,7 @@ const recentDevices = [
|
||||
>
|
||||
<!-- 👉 current password -->
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="currentPassword"
|
||||
:type="isCurrentPasswordVisible ? 'text' : 'password'"
|
||||
:append-inner-icon="isCurrentPasswordVisible ? 'bx-hide' : 'bx-show'"
|
||||
@@ -119,6 +120,7 @@ const recentDevices = [
|
||||
>
|
||||
<!-- 👉 new password -->
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="newPassword"
|
||||
:type="isNewPasswordVisible ? 'text' : 'password'"
|
||||
:append-inner-icon="isNewPasswordVisible ? 'bx-hide' : 'bx-show'"
|
||||
@@ -135,6 +137,7 @@ const recentDevices = [
|
||||
>
|
||||
<!-- 👉 confirm password -->
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="confirmPassword"
|
||||
:type="isConfirmPasswordVisible ? 'text' : 'password'"
|
||||
:append-inner-icon="isConfirmPasswordVisible ? 'bx-hide' : 'bx-show'"
|
||||
@@ -227,6 +230,7 @@ const recentDevices = [
|
||||
<!-- 👉 Choose API Key -->
|
||||
<VCol cols="12">
|
||||
<VSelect
|
||||
:id="useId()"
|
||||
label="Choose the API key type you want to create"
|
||||
placeholder="Select API key type"
|
||||
:items="['Full Control', 'Modify', 'Read & Execute', 'List Folder Contents', 'Read Only', 'Read & Write']"
|
||||
@@ -236,6 +240,7 @@ const recentDevices = [
|
||||
<!-- 👉 Name the API Key -->
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
label="Name the API key"
|
||||
placeholder="Name the API key"
|
||||
/>
|
||||
|
||||
@@ -192,12 +192,14 @@ const isCardDetailsVisible = ref(false)
|
||||
</VCardItem>
|
||||
|
||||
<VCardText class="d-flex align-center flex-wrap text-body-1">
|
||||
<VRating
|
||||
:model-value="5"
|
||||
readonly
|
||||
class="me-3"
|
||||
density="compact"
|
||||
/>
|
||||
<ClientOnly>
|
||||
<VRating
|
||||
:model-value="5"
|
||||
readonly
|
||||
class="me-3"
|
||||
density="compact"
|
||||
/>
|
||||
</ClientOnly>
|
||||
<span>5 Star | 98 reviews</span>
|
||||
</VCardText>
|
||||
|
||||
@@ -385,12 +387,14 @@ const isCardDetailsVisible = ref(false)
|
||||
>
|
||||
<VCard title="The Best Answers">
|
||||
<VCardText class="d-flex align-center flex-wrap">
|
||||
<VRating
|
||||
:model-value="5"
|
||||
readonly
|
||||
density="compact"
|
||||
class="me-3"
|
||||
/>
|
||||
<ClientOnly>
|
||||
<VRating
|
||||
:model-value="5"
|
||||
readonly
|
||||
density="compact"
|
||||
class="me-3"
|
||||
/>
|
||||
</ClientOnly>
|
||||
<span class="text-subtitle-2">5 Star | 98 reviews</span>
|
||||
</VCardText>
|
||||
|
||||
|
||||
@@ -120,6 +120,7 @@ const checkbox = ref(false)
|
||||
md="9"
|
||||
>
|
||||
<VCheckbox
|
||||
:id="useId()"
|
||||
v-model="checkbox"
|
||||
label="Remember me"
|
||||
/>
|
||||
|
||||
@@ -124,6 +124,7 @@ const checkbox = ref(false)
|
||||
md="9"
|
||||
>
|
||||
<VCheckbox
|
||||
:id="useId()"
|
||||
v-model="checkbox"
|
||||
label="Remember me"
|
||||
/>
|
||||
|
||||
@@ -17,6 +17,7 @@ const checkbox = ref(false)
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="firstName"
|
||||
label="First Name"
|
||||
placeholder="John"
|
||||
@@ -29,6 +30,7 @@ const checkbox = ref(false)
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="lastName"
|
||||
label="Last Name"
|
||||
placeholder="Doe"
|
||||
@@ -41,6 +43,7 @@ const checkbox = ref(false)
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="email"
|
||||
label="Email"
|
||||
placeholder="johndoe@email.com"
|
||||
@@ -53,6 +56,7 @@ const checkbox = ref(false)
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="city"
|
||||
label="City"
|
||||
placeholder="New York"
|
||||
@@ -65,6 +69,7 @@ const checkbox = ref(false)
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="country"
|
||||
label="Country"
|
||||
placeholder="United States"
|
||||
@@ -77,6 +82,7 @@ const checkbox = ref(false)
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="company"
|
||||
label="Company"
|
||||
placeholder="Themeselection"
|
||||
@@ -86,6 +92,7 @@ const checkbox = ref(false)
|
||||
<!-- 👉 Remember me -->
|
||||
<VCol cols="12">
|
||||
<VCheckbox
|
||||
:id="useId()"
|
||||
v-model="checkbox"
|
||||
label="Remember me"
|
||||
/>
|
||||
|
||||
@@ -11,6 +11,7 @@ const checkbox = ref(false)
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="firstName"
|
||||
label="First Name"
|
||||
placeholder="John"
|
||||
@@ -19,6 +20,7 @@ const checkbox = ref(false)
|
||||
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="email"
|
||||
label="Email"
|
||||
type="email"
|
||||
@@ -28,6 +30,7 @@ const checkbox = ref(false)
|
||||
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="mobile"
|
||||
label="Mobile"
|
||||
placeholder="+1 123 456 7890"
|
||||
@@ -37,6 +40,7 @@ const checkbox = ref(false)
|
||||
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="password"
|
||||
label="Password"
|
||||
autocomplete="on"
|
||||
@@ -47,6 +51,7 @@ const checkbox = ref(false)
|
||||
|
||||
<VCol cols="12">
|
||||
<VCheckbox
|
||||
:id="useId()"
|
||||
v-model="checkbox"
|
||||
label="Remember me"
|
||||
/>
|
||||
|
||||
@@ -11,6 +11,7 @@ const checkbox = ref(false)
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="firstName"
|
||||
prepend-inner-icon="bx-user"
|
||||
label="First Name"
|
||||
@@ -20,6 +21,7 @@ const checkbox = ref(false)
|
||||
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="email"
|
||||
prepend-inner-icon="bx-envelope"
|
||||
label="Email"
|
||||
@@ -30,6 +32,7 @@ const checkbox = ref(false)
|
||||
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="mobile"
|
||||
prepend-inner-icon="bx-mobile"
|
||||
label="Mobile"
|
||||
@@ -40,6 +43,7 @@ const checkbox = ref(false)
|
||||
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="password"
|
||||
prepend-inner-icon="bx-lock"
|
||||
label="Password"
|
||||
@@ -51,6 +55,7 @@ const checkbox = ref(false)
|
||||
|
||||
<VCol cols="12">
|
||||
<VCheckbox
|
||||
:id="useId()"
|
||||
v-model="checkbox"
|
||||
label="Remember me"
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user