DS-update-ui-kit

components/ACheckbox.vue

@@ -234,10 +234,6 @@ watch(
         background-color: v-bind(color);
       }
 
-      &:focus + .slider {
-        box-shadow: 0 0 1px v-bind(color);
-      }
-
       &:checked + .slider:before {
         transform: translateX(20px);
       }
@@ -290,4 +286,15 @@ watch(
     }
   }
 }
+
+.custom-checkbox input:checked:disabled ~ .checkmark-lab {
+  background-color: var(--a-grey-dark) !important;
+
+  &:after {
+    display: block;
+    border-color: var(--a-white) !important;
+  }
+}
+
+
 </style>

components/ADropdown.vue

@@ -3,8 +3,7 @@ import { ref, onMounted, onBeforeUnmount, nextTick } from "vue";
 import AButton from "./AButton.vue";
 import ACard from "./ACard.vue";
 import { useColor } from "../stores/color";
-import { defineProps, computed, PropType, withDefaults } from "vue";
-import type { Colors } from "../stores/color";
+import { defineProps, computed, withDefaults } from "vue";
 import { useElementBounding, onClickOutside } from "@vueuse/core";
 
 interface DropdownProps {

components/AInput.vue

@@ -14,7 +14,15 @@ export interface AInputProps {
   label?: string | null;
   full?: boolean;
   required?: boolean;
-  type?: "text" | "phone" | "password" | "time" | "search" | "number" | "email" | "color";
+  type?:
+    | "text"
+    | "phone"
+    | "password"
+    | "time"
+    | "search"
+    | "number"
+    | "email"
+    | "color";
   modelValue?: Array<string> | string;
 }
 
@@ -426,5 +434,21 @@ const preventClear = (event: KeyboardEvent) => {
     align-items: center;
     padding: 0 16px 0 0;
   }
+
+  @media screen and (max-width: 768px) {
+    height: 50px;
+
+    // PHONE
+    &.a-input-phone {
+      .phone-label {
+        top: 7px;
+      }
+    }
+
+    // LABEL
+    label {
+      top: 7px;
+    }
+  }
 }
 </style>

components/ALinearBreadCrumb.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+interface ALineardBreadCrumb {
+  path?: string;
+  root: string;
+  splitChar: string;
+  separator: string;
+}
+
+const props = withDefaults(defineProps<ALineardBreadCrumb>(), {
+  path: "",
+  root: "Home",
+  splitChar: "/",
+  separator: "/",
+});
+
+const emit = defineEmits(["updatePath"]);
+
+const pathSegments = computed(() =>
+  props.path.split(props.splitChar).filter(Boolean)
+);
+
+const goToFolderLevel = (level: number) => {
+  const newPath = pathSegments.value.slice(0, level + 1).join(props.splitChar);
+  emit("updatePath", newPath);
+};
+
+const isBreadcrumbEmpty = computed(() => pathSegments.value.length === 0);
+</script>
+
+<template>
+  <div class="breadcrumb-container">
+    <button
+      :class="{ 'empty-breadcrumb': isBreadcrumbEmpty }"
+      @click="goToFolderLevel(-1)"
+    >
+      {{ root }}
+    </button>
+
+    <span
+      v-for="(segment, index) in pathSegments"
+      :key="index"
+      class="breadcrumb-content"
+    >
+      <p class="separator">{{ separator }}</p>
+      <button class="breadcrumb" @click="goToFolderLevel(index)">
+        {{ segment }}
+      </button>
+    </span>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.breadcrumb-container {
+  display: flex;
+
+  button {
+    font-size: 12px;
+    height: 20px;
+    color: var(--a-secondary);
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+
+    &.empty-breadcrumb {
+      color: var(--a-black);
+    }
+  }
+
+  .breadcrumb-content {
+    display: flex;
+    color: var(--a-secondary);
+
+    button {
+      cursor: pointer;
+      font-size: 12px;
+      color: var(--a-secondary);
+    }
+
+    &:nth-last-child(1) {
+      color: var(--a-black);
+
+      button {
+        color: var(--a-black);
+      }
+    }
+
+    .separator {
+      margin: 1px 3px 0 3px;
+    }
+  }
+}
+</style>

components/AModal.vue

@@ -300,7 +300,7 @@ defineExpose({
       // HEADER
       .a-card-head {
         display: flex;
-        padding: 16px;
+        padding: 16px 44px 16px 16px;
         border-bottom: 1px solid var(--a-grey-light);
         min-height: 87px;