@amirjalili1374/ui-kit 1.2.0

package/src/scss/_override.scss

@@ -0,0 +1,72 @@
+html {
+  .bg-success {
+    color: white !important;
+  }
+}
+
+.v-row + .v-row {
+  margin-top: 0;
+}
+
+.v-divider {
+  opacity: 1;
+  border-color: rgba(var(--v-theme-borderLight), 0.36);
+}
+
+.v-selection-control {
+  flex: unset;
+}
+
+.customizer-btn .icon {
+  animation: progress-circular-rotate 1.4s linear infinite;
+  transform-origin: center center;
+  transition: all 0.2s ease-in-out;
+}
+
+.no-spacer {
+  .v-list-item__spacer {
+    display: none !important;
+  }
+}
+
+.v-data-table-footer {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  padding: 8px 4px;
+  flex-direction: row-reverse;
+}
+
+@keyframes progress-circular-rotate {
+  100% {
+    transform: rotate(270deg);
+  }
+}
+.v-text-field {
+  .v-field {
+    border-radius: 10px !important;
+  }
+}
+
+.v-table > .v-table__wrapper > table > tbody > tr > td, .v-table > .v-table__wrapper > table > thead > tr > td, .v-table > .v-table__wrapper > table > tfoot > tr > td {
+  height: 36px;
+}
+
+.v-slide-group__content {
+  display: flex;
+  flex: 1 0 auto;
+  position: relative;
+  transition: 0.2s all cubic-bezier(0.4, 0, 0.2, 1);
+  white-space: nowrap;
+  justify-content: space-evenly!important;
+}
+
+.v-tab.v-tab.v-btn {
+  height: var(--v-tabs-height);
+  border-radius: 0;
+  min-width: 90px;
+  background-color: rgb(var(--v-theme-containerBg));
+  color: rgb(var(--v-theme-primary));
+  border-radius: 10px 10px 0 0;
+}

package/src/scss/_variables.scss

@@ -0,0 +1,124 @@
+@use 'sass:math';
+@use 'sass:map';
+@use 'sass:meta';
+@use 'vuetify/lib/styles/tools/functions' as *;
+
+// This will false all colors which is not necessory for theme
+$color-pack: false;
+
+// Global font size and border radius
+$font-size-root: 1rem;
+$border-radius-root: 12px;
+$body-font-family: 'Roboto', sans-serif !default;
+$heading-font-family: $body-font-family !default;
+$btn-font-weight: 400 !default;
+$btn-letter-spacing: 0 !default;
+
+// Global Radius as per breakeven point
+$rounded: () !default;
+$rounded: map-deep-merge(
+  (
+    0: 0,
+    'sm': $border-radius-root * 0.5,
+    null: $border-radius-root,
+    'md': $border-radius-root * 1,
+    'lg': $border-radius-root * 2,
+    'xl': $border-radius-root * 6,
+    'pill': 9999px,
+    'circle': 50%,
+    'shaped': $border-radius-root * 6 0
+  ),
+  $rounded
+);
+// Global Typography
+$typography: () !default;
+$typography: map-deep-merge(
+  (
+    'h1': (
+      'size': 2.125rem,
+      'weight': 700,
+      'line-height': 3.5rem,
+      'font-family': inherit
+    ),
+    'h2': (
+      'size': 1.5rem,
+      'weight': 700,
+      'line-height': 2.5rem,
+      'font-family': inherit
+    ),
+    'h3': (
+      'size': 1.25rem,
+      'weight': 600,
+      'line-height': 2rem,
+      'font-family': inherit
+    ),
+    'h4': (
+      'size': 1rem,
+      'weight': 600,
+      'line-height': 1.5rem,
+      'font-family': inherit
+    ),
+    'h5': (
+      'size': 0.875rem,
+      'weight': 500,
+      'line-height': 1.2rem,
+      'font-family': inherit
+    ),
+    'h6': (
+      'size': 0.75rem,
+      'weight': 500,
+      'font-family': inherit
+    ),
+    'subtitle-1': (
+      'size': 0.875rem,
+      'weight': 500,
+      'line-height': 1rem,
+      'font-family': inherit
+    ),
+    'subtitle-2': (
+      'size': 0.75rem,
+      'weight': 400,
+      'line-height': 1rem,
+      'font-family': inherit
+    ),
+    'body-1': (
+      'size': 0.875rem,
+      'weight': 400,
+      'font-family': inherit
+    ),
+    'body-2': (
+      'size': 0.75rem,
+      'weight': 400,
+      'font-family': inherit
+    ),
+    'button': (
+      'size': 0.875rem,
+      'weight': 500,
+      'font-family': inherit,
+      'text-transform': uppercase
+    ),
+    'caption': (
+      'size': 0.75rem,
+      'weight': 400,
+      'font-family': inherit
+    ),
+    'overline': (
+      'size': 0.75rem,
+      'weight': 500,
+      'font-family': inherit,
+      'text-transform': uppercase
+    )
+  ),
+  $typography
+);
+
+// Custom Variables
+// colors
+$white: #fff !default;
+
+// cards
+$card-item-spacer-xy: 20px 24px !default;
+$card-text-spacer: 24px !default;
+$card-title-size: 18px !default;
+// Global Shadow
+$box-shadow: 1px 0 20px rgb(0 0 0 / 8%);

package/src/scss/components/_VButtons.scss

@@ -0,0 +1,23 @@
+//
+// Light Buttons
+//
+
+.v-btn {
+  &.bg-lightsecondary {
+    &:hover,
+    &:active,
+    &:focus {
+      background-color: rgb(var(--v-theme-secondary)) !important;
+      color: $white !important;
+    }
+  }
+}
+
+.v-btn {
+  text-transform: capitalize;
+  letter-spacing: $btn-letter-spacing;
+}
+.v-btn--icon.v-btn--density-default {
+  width: calc(var(--v-btn-height) + 6px);
+  height: calc(var(--v-btn-height) + 6px);
+}

package/src/scss/components/_VCard.scss

@@ -0,0 +1,20 @@
+// Outline Card
+.v-card--variant-outlined {
+  border-color: rgba(var(--v-theme-borderLight), 0.36);
+  .v-divider {
+    border-color: rgba(var(--v-theme-borderLight), 0.36);
+  }
+}
+
+.v-card-text {
+  padding: $card-text-spacer;
+}
+
+.v-card {
+  width: 100%;
+  overflow: visible;
+}
+
+.v-card-item {
+  padding: $card-item-spacer-xy;
+}

package/src/scss/components/_VCustomDataTable.scss

@@ -0,0 +1,282 @@
+.data-table-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: rgb(var(--v-theme-surface));
+  border-radius: 8px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
+  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  will-change: transform, margin-top;
+}
+
+/* Grouped Table Styles */
+.grouped-table {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.group-controls {
+  display: flex;
+  gap: 8px;
+  padding: 8px 0;
+  flex-shrink: 0;
+}
+
+.groups-scroll-container {
+  overflow-y: auto;
+  overflow-x: hidden;
+  flex: 1;
+  min-height: 0;
+}
+
+.groups-container {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding-bottom: 16px;
+}
+
+.group-section {
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.group-header {
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  background: linear-gradient(135deg, rgb(var(--v-theme-lightprimary)) 0%, rgb(var(--v-theme-lightsecondary)) 100%);
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  border-bottom: 1px solid rgb(var(--v-theme-borderLight));
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+}
+
+.group-header:hover {
+  background: linear-gradient(135deg, rgb(var(--v-theme-primary200)) 0%, rgb(var(--v-theme-secondary200)) 100%);
+}
+
+.group-header.expanded {
+  background: rgb(var(--v-theme-lightsecondary))
+}
+
+.group-label {
+  font-weight: 600;
+  color: rgb(var(--v-theme-darksecondary));
+  flex: 1;
+}
+
+.group-items {
+  background: rgb(var(--v-theme-surface));
+  overflow: hidden;
+}
+
+/* Group expansion transitions */
+.group-expand-enter-active {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  max-height: 0;
+  opacity: 0;
+}
+
+.group-expand-enter-to {
+  max-height: 1000px;
+  opacity: 1;
+}
+
+.group-expand-leave-active {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  max-height: 1000px;
+  opacity: 1;
+}
+
+.group-expand-leave-to {
+  max-height: 0;
+  opacity: 0;
+}
+
+/* Chevron icon rotation */
+.chevron-icon {
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.group-header.expanded .chevron-icon {
+  transform: rotate(0deg);
+}
+
+.group-header:not(.expanded) .chevron-icon {
+  transform: rotate(-90deg);
+}
+
+.group-table {
+  border: none !important;
+  box-shadow: none !important;
+}
+
+.group-table :deep(.v-data-table__wrapper) {
+  border: none !important;
+  overflow: visible !important;
+}
+
+.group-table :deep(.v-data-table__thead) {
+  background: rgb(var(--v-theme-lightprimary)) !important;
+}
+
+.group-table :deep(.v-data-table__tbody tr:hover) {
+  background: rgb(var(--v-theme-primary200)) !important;
+}
+
+.group-table :deep(.v-data-table__tbody) {
+  overflow: visible !important;
+}
+
+.pagination-wrapper {
+  flex-shrink: 0;
+  border-top: 1px solid rgb(var(--v-theme-borderLight));
+  background: rgb(var(--v-theme-surface));
+  z-index: 2;
+}
+
+.page-title {
+  margin-bottom: 16px;
+  padding: 16px 0 8px 0;
+  border-bottom: 1px solid rgb(var(--v-theme-borderLight));
+}
+
+.title-text {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: var(--v-primary-base);
+}
+
+.action-buttons {
+  margin-bottom: 16px;
+  padding: 0 0 8px 0;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  will-change: height, margin-bottom;
+}
+
+.selection-actions {
+  display: flex;
+  align-items: center;
+  margin-left: auto;
+}
+
+.selected-actions {
+  width: 100vw;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  border-radius: 8px;
+  margin-top: 5px;
+  flex-wrap: wrap;
+  flex-direction: row-reverse;
+  transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  will-change: transform, opacity, height;
+}
+
+:deep(.v-data-table__wrapper table thead) {
+  position: sticky;
+  top: 0;
+  background: rgb(var(--v-theme-surface));
+  z-index: 1;
+  box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.04);
+}
+
+:deep(.v-data-table__wrapper tbody tr:nth-child(even)) {
+  background: rgb(var(--v-theme-lightprimary)) !important;
+}
+
+:deep(.v-data-table__wrapper tbody tr:nth-child(odd)) {
+  background: rgb(var(--v-theme-surface)) !important;
+}
+
+/* Smooth table content transitions */
+:deep(.v-data-table__wrapper) {
+  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+:deep(.v-data-table__wrapper tbody tr) {
+  transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+/* Enhanced slide transition for bulk mode actions */
+.slide-left-enter-active {
+  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.slide-left-leave-active {
+  transition: all 0.6s cubic-bezier(0.55, 0.055, 0.675, 0.19);
+}
+
+.slide-left-enter-from {
+  transform: translateX(-100%) scale(0.95);
+  opacity: 0;
+}
+
+.slide-left-leave-to {
+  transform: translateX(-100%) scale(0.95);
+  opacity: 0;
+}
+
+.slide-left-enter-to,
+.slide-left-leave-from {
+  transform: translateX(0) scale(1);
+  opacity: 1;
+}
+
+/* Compact row height adjustments */
+.data-table-container .v-data-table .v-table__wrapper table tr {
+  height: 45px;
+}
+
+.data-table-container .v-data-table .v-table__wrapper table td,
+.data-table-container .v-data-table .v-table__wrapper table th {
+  padding-top: 6px;
+  padding-bottom: 6px;
+  padding-left: 8px;
+  padding-right: 8px;
+  line-height: 1.2;
+}
+
+/* Even tighter density for group tables */
+.group-table .v-table__wrapper table tr {
+  height: 34px;
+}
+
+.group-table .v-table__wrapper table td,
+.group-table .v-table__wrapper table th {
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
+
+/* Checkbox/radio compact spacing */
+.data-table-container .v-selection-control {
+  --v-selection-control-size: 18px;
+}
+
+.data-table-container .v-selection-control .v-label {
+  margin: 0;
+}
+
+/* Buttons inside cells */
+.data-table-container td .v-btn {
+  min-height: 28px;
+  height: 28px;
+  padding: 0 8px;
+}
+
+/* Chips inside headers or cells */
+.data-table-container .v-chip {
+  height: 22px;
+}

package/src/scss/components/_VField.scss

@@ -0,0 +1,9 @@
+.v-field--variant-outlined .v-field__outline__start.v-locale--is-ltr,
+.v-locale--is-ltr .v-field--variant-outlined .v-field__outline__start {
+  border-radius: $border-radius-root 0 0 $border-radius-root;
+}
+
+.v-field--variant-outlined .v-field__outline__end.v-locale--is-ltr,
+.v-locale--is-ltr .v-field--variant-outlined .v-field__outline__end {
+  border-radius: 0 $border-radius-root $border-radius-root 0;
+}

package/src/scss/components/_VInput.scss

@@ -0,0 +1,17 @@
+.v-input--density-default,
+.v-field--variant-solo,
+.v-field--variant-filled {
+  --v-input-control-height: 51px;
+  --v-input-padding-top: 14px;
+}
+.v-input--density-comfortable {
+  --v-input-control-height: 56px;
+  --v-input-padding-top: 17px;
+}
+.v-label {
+  font-size: 0.975rem;
+}
+.v-switch .v-label,
+.v-checkbox .v-label {
+  opacity: 1;
+}

package/src/scss/components/_VNavigationDrawer.scss

@@ -0,0 +1,3 @@
+.v-navigation-drawer__scrim.fade-transition-leave-to {
+  display: none;
+}

package/src/scss/components/_VShadow.scss

@@ -0,0 +1,3 @@
+.elevation-10 {
+  box-shadow: $box-shadow !important;
+}