@alexochihua/exos-library-components 2.6.2 → 2.7.0

package/dist/style.css

@@ -991,6 +991,11 @@ video {
   cursor: not-allowed;
 }
 
+.e-checkbox.exos-disabled .e-checkbox__boxClass {
+  --tw-bg-opacity: 1;
+  background-color: rgb(24 24 27 / var(--tw-bg-opacity));
+}
+
 .e-checkbox__label {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -1756,6 +1761,73 @@ video {
   color: var(--color-secondary);
 }
 
+.e-file-viewer__container {
+  display: flex;
+  max-height: 85vh;
+  min-height: 75vh;
+  min-width: 80vh;
+  max-width: 90vh;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0.5rem;
+}
+
+.e-file-viewer__header {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+}
+
+.e-file-viewer__close {
+  justify-content: flex-end;
+}
+
+.e-file-viewer__title {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+
+.e-file-viewer__preview-container {
+  display: flex;
+  min-height: 0px;
+  flex-shrink: 1;
+  flex-grow: 1;
+  flex-direction: column;
+  gap: 0.75rem;
+  border-radius: 1rem;
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+  padding: 1rem;
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.e-file-viewer__preview-header {
+  display: flex;
+  align-items: center;
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
+.e-file-viewer__file-name {
+  flex-grow: 3;
+}
+
+.e-file-viewer__counter {
+  flex-grow: 1;
+}
+
+.e-file-viewer__download {
+  display: flex;
+  flex-grow: 6;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.e-file-viewer__preview-content {
+  flex-grow: 1;
+}
+
 .e-select-base {
   display: flex;
   height: -moz-fit-content;
@@ -2611,6 +2683,23 @@ video {
   cursor: not-allowed;
 }
 
+.e-inputFile__iconTag {
+  z-index: 10;
+  height: 1rem;
+  width: 1rem;
+  border-radius: 9999px;
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  padding: 0.125rem;
+  color: var(--color-secondary);
+  opacity: 0.6;
+}
+
+.e-inputFile__iconTag:hover {
+  cursor: pointer;
+  opacity: 1;
+}
+
 /* ---------- Input File Picker - Input file classes ---------- */
 
 .e-inputFile__inputClass {
@@ -2619,26 +2708,12 @@ video {
   left: 0px;
   right: 0px;
   bottom: 0px;
+  z-index: 0;
   height: 100%;
   width: 100%;
   opacity: 0;
 }
 
-.e-inputFile__borderColor {
-  border-color: var(--color-secondary);
-}
-
-.e-inputFile__border--error {
-  border-width: 2px;
-  --tw-border-opacity: 1;
-  border-color: rgb(239 68 68 / var(--tw-border-opacity));
-}
-
-.e-inputFile__border--error:focus {
-  --tw-border-opacity: 1;
-  border-color: rgb(239 68 68 / var(--tw-border-opacity));
-}
-
 .e-inputFile__message--error {
   display: flex;
   width: 100%;
@@ -2666,57 +2741,29 @@ video {
   color: rgb(239 68 68 / var(--tw-text-opacity));
 }
 
-/* ---------- Input File Picker - Label classes ---------- */
-
-.e-inputFile__labelDynClass {
-  position: absolute;
-  top: 0.5rem;
-  inset-inline-start: 0.25rem;
-  z-index: 0;
-  transform-origin: 0;
-  --tw-translate-y: -1rem;
-  --tw-scale-x: .65;
-  --tw-scale-y: .65;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  transition-duration: 300ms;
-}
-
-.exos-peer:-moz-placeholder-shown ~ .e-inputFile__labelDynClass {
-  top: 50%;
-  --tw-translate-y: -50%;
-  --tw-scale-x: 1;
-  --tw-scale-y: 1;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.exos-peer:placeholder-shown ~ .e-inputFile__labelDynClass {
-  top: 50%;
-  --tw-translate-y: -50%;
-  --tw-scale-x: 1;
-  --tw-scale-y: 1;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+.e-inputFile__containerFileInfo {
+  display: flex;
+  width: 100%;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: 400;
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
 }
 
-.exos-peer:focus ~ .e-inputFile__labelDynClass {
-  top: 0.5rem;
-  --tw-translate-y: -1rem;
-  --tw-scale-x: .65;
-  --tw-scale-y: .65;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
+/* ---------- Input File Picker - Label classes ---------- */
 
-.exos-peer:focus ~ .e-inputFile__labelDynClass:where([dir="rtl"], [dir="rtl"] *) {
-  left: auto;
-  --tw-translate-x: 25%;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+.e-inputFile__labelClass {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: flex-start;
 }
 
-.e-inputFile__labelBoxClass {
-  z-index: 10;
-  display: flex;
-  border-radius: 0.375rem;
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
+.e-inputFile__labelClass > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
 .e-inputFile__labelClass.textSize-def {
@@ -2865,6 +2912,171 @@ video {
 
 /* ---------- Input File Picker - Text Size classes ---------- */
 
+/* ---------- Info Panel - Base classes ---------- */
+
+.e-infoPanel__containerClass {
+  width: 100%;
+  padding: 0.25rem;
+}
+
+/* ---------- Info Panel - Grid classes ---------- */
+
+@media (min-width: 1024px) {
+  .e-infoPanel__gridContainer.columns-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+
+  .e-infoPanel__gridContainer.columns-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .e-infoPanel__gridContainer.columns-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .e-infoPanel__gridContainer.columns-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  .e-infoPanel__gridContainer.columns-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+
+  .e-infoPanel__gridContainer.columns-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+
+  .e-infoPanel__gridContainer.columns-7 {
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+  }
+
+  .e-infoPanel__gridContainer.columns-8 {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
+
+  .e-infoPanel__gridContainer.columns-9 {
+    grid-template-columns: repeat(9, minmax(0, 1fr));
+  }
+
+  .e-infoPanel__gridContainer.columns-10 {
+    grid-template-columns: repeat(10, minmax(0, 1fr));
+  }
+
+  .e-infoPanel__gridContainer.columns-11 {
+    grid-template-columns: repeat(11, minmax(0, 1fr));
+  }
+
+  .e-infoPanel__gridContainer.columns-12 {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
+}
+
+/* ---------- Info Panel - Label classes ---------- */
+
+.e-inputFile__labelClass.textSize-def {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+.e-inputFile__labelClass.textSize-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.e-inputFile__labelClass.textSize-md {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+.e-inputFile__labelClass.textSize-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
+.e-inputFile__labelClass.textSize-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
+.e-inputFile__labelClass.textSize-xxl {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+
+/* ---------- Info Panel - Shadow classes ---------- */
+
+.e-infoPanel__containerClass.shadow-def {
+  --tw-shadow: 0 1px 3px rgba(0,0,0,0.2),0 1px 1px rgba(0,0,0,0.14),0 2px 1px -1px rgba(0,0,0,0.12);
+  --tw-shadow-colored: 0 1px 3px var(--tw-shadow-color), 0 1px 1px var(--tw-shadow-color), 0 2px 1px -1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.e-infoPanel__containerClass.shadow-none {
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.e-infoPanel__containerClass.shadow-sm {
+  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.e-infoPanel__containerClass.shadow-md {
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.e-infoPanel__containerClass.shadow-lg {
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.e-infoPanel__containerClass.shadow-xl {
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.e-infoPanel__containerClass.shadow-xxl {
+  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+/* ---------- Info Panel - Rounded classes ---------- */
+
+.e-infoPanel__containerClass.rounded-def {
+  border-radius: 0.5rem;
+}
+
+.e-infoPanel__containerClass.rounded-none {
+  border-radius: 0px;
+}
+
+.e-infoPanel__containerClass.rounded-sm {
+  border-radius: 0.125rem;
+}
+
+.e-infoPanel__containerClass.rounded-md {
+  border-radius: 0.375rem;
+}
+
+.e-infoPanel__containerClass.rounded-lg {
+  border-radius: 0.5rem;
+}
+
+.e-infoPanel__containerClass.rounded-xl {
+  border-radius: 0.75rem;
+}
+
+.e-infoPanel__containerClass.rounded-xxl {
+  border-radius: 1rem;
+}
+
 .eMainPageTpl__mainContainer {
   display: flex;
   height: 100%;
@@ -3337,10 +3549,6 @@ video {
   min-height: 10rem;
 }
 
-.exos-min-h-\[5rem\] {
-  min-height: 5rem;
-}
-
 .exos-w-0 {
   width: 0px;
 }
@@ -3401,6 +3609,10 @@ video {
   width: 4.3rem;
 }
 
+.exos-w-\[60\%\] {
+  width: 60%;
+}
+
 .exos-w-\[7vw\] {
   width: 7vw;
 }
@@ -3714,6 +3926,11 @@ video {
   gap: 1rem;
 }
 
+.exos-gap-x-1 {
+  -moz-column-gap: 0.25rem;
+       column-gap: 0.25rem;
+}
+
 .exos-gap-x-2 {
   -moz-column-gap: 0.5rem;
        column-gap: 0.5rem;
@@ -3723,6 +3940,10 @@ video {
   row-gap: 0.25rem;
 }
 
+.exos-gap-y-5 {
+  row-gap: 1.25rem;
+}
+
 .-exos-space-x-px > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(-1px * var(--tw-space-x-reverse));
@@ -3735,6 +3956,12 @@ video {
   margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
+.exos-space-x-2 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
 .exos-space-x-3 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.75rem * var(--tw-space-x-reverse));
@@ -4319,10 +4546,6 @@ video {
   padding-bottom: 0.5rem;
 }
 
-.exos-pl-1 {
-  padding-left: 0.25rem;
-}
-
 .exos-pl-10 {
   padding-left: 2.5rem;
 }
@@ -4363,10 +4586,6 @@ video {
   padding-right: 6rem;
 }
 
-.exos-pr-5 {
-  padding-right: 1.25rem;
-}
-
 .exos-pr-8 {
   padding-right: 2rem;
 }
@@ -5294,6 +5513,18 @@ video {
     }
   }
 
+  @media not all and (min-width: 1024px) {
+    .xs\:max-md\:exos-flex-col {
+      flex-direction: column;
+    }
+
+    .xs\:max-md\:exos-space-y-1 > :not([hidden]) ~ :not([hidden]) {
+      --tw-space-y-reverse: 0;
+      margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
+      margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
+    }
+  }
+
   @media not all and (min-width: 640px) {
     .xs\:max-sm\:exos-col-span-12 {
       grid-column: span 12 / span 12;
@@ -5315,6 +5546,10 @@ video {
       grid-template-columns: repeat(1, minmax(0, 1fr));
     }
 
+    .xs\:max-sm\:exos-grid-cols-2 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
     .xs\:max-sm\:exos-flex-col {
       flex-direction: column;
     }
@@ -5323,6 +5558,11 @@ video {
       padding-left: 0.5rem;
       padding-right: 0.5rem;
     }
+
+    .xs\:max-sm\:exos-px-8 {
+      padding-left: 2rem;
+      padding-right: 2rem;
+    }
   }
 }
 
@@ -5368,13 +5608,35 @@ video {
   }
 
   @media not all and (min-width: 1024px) {
+    .sm\:max-md\:exos-w-\[40\%\] {
+      width: 40%;
+    }
+
     .sm\:max-md\:exos-grid-cols-3 {
       grid-template-columns: repeat(3, minmax(0, 1fr));
     }
+
+    .sm\:max-md\:exos-grid-cols-4 {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+
+    .sm\:max-md\:exos-px-6 {
+      padding-left: 1.5rem;
+      padding-right: 1.5rem;
+    }
   }
 }
 
 @media (min-width: 1024px) {
+  .md\:exos-flex-row {
+    flex-direction: row;
+  }
+
+  .md\:exos-px-10 {
+    padding-left: 2.5rem;
+    padding-right: 2.5rem;
+  }
+
   .md\:exos-pr-7 {
     padding-right: 1.75rem;
   }
@@ -5400,10 +5662,6 @@ video {
     margin-right: 2rem;
   }
 
-  .lg\:exos-grid-cols-3 {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-
   .lg\:exos-grid-cols-4 {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alexochihua/exos-library-components",
-  "version": "2.6.2",
+  "version": "2.7.0",
   "description": "## Componentes base Vue 3 y Tailwind",
   "author": "Exos",
   "scripts": {
@@ -22,7 +22,7 @@
     "dist/**/*.{js,css,scss,svg,ttf,woff}"
   ],
   "dependencies": {
-    "@alexochihua/exos-functionality": "^1.0.1",
+    "@alexochihua/exos-functionality": "^1.0.2",
     "@vueuse/core": "^10.4.1",
     "animate.css": "^4.1.1",
     "core-js": "^3.8.3",
@@ -32,26 +32,27 @@
     "postcss-import": "^16.0.1",
     "ramda": "^0.29.0",
     "uuid": "^9.0.1",
-    "vue": "^3.2.13"
+    "vue": "^3.2.13",
+    "vue-i18n": "^9.13.1"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",
-    "@vue/cli-service": "~5.0.0",
-    "autoprefixer": "^10.4.14",
-    "node-sass": "^9.0.0",
-    "postcss": "^8.4.27",
-    "sass-loader": "^13.3.2",
-    "tailwindcss": "^3.3.3",
-    "tailwindcss-animated": "^1.0.1",
-    "vue-cli-plugin-styleguidist": "~4.72.4",
     "@babel/eslint-parser": "^7.23.3",
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "autoprefixer": "^10.4.14",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-vue": "^8.7.1",
-    "prettier": "^3.2.5"
+    "node-sass": "^9.0.0",
+    "postcss": "^8.4.27",
+    "prettier": "^3.2.5",
+    "sass-loader": "^13.3.2",
+    "tailwindcss": "^3.3.3",
+    "tailwindcss-animated": "^1.0.1",
+    "vue-cli-plugin-styleguidist": "~4.72.4"
   },
   "eslintConfig": {
     "env": {