@mantine-vue/core 2.2.0 → 2.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine-vue/core",
-  "version": "2.2.0",
+  "version": "2.2.2",
   "description": "Vue component foundation architecturally equivalent to @mantine/core",
   "license": "MIT",
   "files": [
@@ -44,8 +44,8 @@
     "vue": "^3.5.0"
   },
   "peerDependencies": {
-    "@mantine-vue/hooks": "2.2.0",
-    "@mantine-vue/utils": "2.2.0",
+    "@mantine-vue/hooks": "2.2.2",
+    "@mantine-vue/utils": "2.2.2",
     "vue": "^3.5.0"
   }
 }

package/styles.css

@@ -57,12 +57,12 @@ body,
 }
 
 .mantine-focus-auto:focus-visible {
-    outline: 2px solid var(--mantine-primary-color-filled);
+    outline: calc(0.125rem * var(--mantine-scale)) solid var(--mantine-primary-color-filled);
     outline-offset: calc(0.125rem * var(--mantine-scale));
   }
 
 .mantine-focus-always:focus {
-    outline: 2px solid var(--mantine-primary-color-filled);
+    outline: calc(0.125rem * var(--mantine-scale)) solid var(--mantine-primary-color-filled);
     outline-offset: calc(0.125rem * var(--mantine-scale));
   }
 
@@ -8172,6 +8172,35 @@ fieldset:disabled ._bar_16d42_187:where(:not([data-inverted])),
 :where([dir="rtl"]) ._chevron_gqzvg_120 {
     transform: rotate(90deg);
 }
+._root_1mggn_1 {
+  display: flex;
+  align-items: center;
+}
+
+._target_1mggn_6 {
+  font-size: var(--mantine-font-size-sm);
+  line-height: 1;
+  padding: calc(var(--mantine-spacing-xs) / 1.5) var(--mantine-spacing-sm);
+  border-radius: var(--mantine-radius-default);
+  color: var(--mantine-color-text);
+  background-color: transparent;
+  user-select: none;
+  cursor: pointer;
+}
+
+._target_1mggn_6:where([data-disabled], :disabled) {
+    color: var(--mantine-color-disabled-color);
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+:where([data-mantine-color-scheme='light']) ._target_1mggn_6:where(:hover, :focus-visible, [data-expanded]):where(:not(:disabled, [data-disabled])) {
+        background-color: var(--mantine-color-gray-1);
+}
+
+:where([data-mantine-color-scheme='dark']) ._target_1mggn_6:where(:hover, :focus-visible, [data-expanded]):where(:not(:disabled, [data-disabled])) {
+        background-color: var(--mantine-color-dark-5);
+}
 ._dropdown_1f398_1 {
   --combobox-padding: calc(0.25rem * var(--mantine-scale));
   padding: var(--combobox-padding);
@@ -8396,6 +8425,181 @@ fieldset:disabled ._bar_16d42_187:where(:not([data-inverted])),
   min-width: 0.8em;
   height: 0.8em;
 }
+._root_12ezl_1 {
+  --data-list-fz: var(--mantine-font-size-sm);
+  --data-list-lh: var(--mantine-line-height-sm);
+  --data-list-gap: var(--mantine-spacing-sm);
+  --data-list-label-width: calc(7.5rem * var(--mantine-scale));
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--data-list-gap);
+  font-size: var(--data-list-fz);
+  line-height: var(--data-list-lh);
+  margin: 0;
+  padding: 0;
+}
+
+  ._root_12ezl_1:where([data-with-divider]) {
+    gap: 0;
+  }
+
+._item_12ezl_20 {
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+  gap: var(--mantine-spacing-xs);
+}
+
+._root_12ezl_1:where([data-orientation='vertical']) > ._item_12ezl_20 {
+  flex-direction: column;
+  gap: 0;
+}
+
+._itemLabel_12ezl_32 {
+  color: var(--mantine-color-dimmed);
+  font-size: var(--data-list-fz);
+  line-height: var(--data-list-lh);
+  min-width: var(--data-list-label-width);
+  margin: 0;
+}
+
+._root_12ezl_1:where([data-orientation='vertical']) ._itemLabel_12ezl_32 {
+  min-width: 100%;
+}
+
+._itemValue_12ezl_44 {
+  font-size: var(--data-list-fz);
+  line-height: var(--data-list-lh);
+  margin: 0;
+}
+
+._root_12ezl_1:where([data-with-divider]) > ._item_12ezl_20:where(:not(:first-of-type)) {
+  border-top: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border);
+  padding-top: var(--data-list-gap);
+  margin-top: var(--data-list-gap);
+}
+._root_1fzi7_1 {
+  --empty-state-indicator-size-xs: calc(2rem * var(--mantine-scale));
+  --empty-state-indicator-size-sm: calc(2.5rem * var(--mantine-scale));
+  --empty-state-indicator-size-md: calc(3rem * var(--mantine-scale));
+  --empty-state-indicator-size-lg: calc(3.75rem * var(--mantine-scale));
+  --empty-state-indicator-size-xl: calc(4.5rem * var(--mantine-scale));
+
+  --empty-state-gap-xs: calc(0.375rem * var(--mantine-scale));
+  --empty-state-gap-sm: calc(0.5rem * var(--mantine-scale));
+  --empty-state-gap-md: calc(0.625rem * var(--mantine-scale));
+  --empty-state-gap-lg: calc(0.75rem * var(--mantine-scale));
+  --empty-state-gap-xl: calc(1rem * var(--mantine-scale));
+
+  --empty-state-title-fz-xs: var(--mantine-font-size-sm);
+  --empty-state-title-fz-sm: var(--mantine-font-size-md);
+  --empty-state-title-fz-md: var(--mantine-font-size-lg);
+  --empty-state-title-fz-lg: var(--mantine-font-size-xl);
+  --empty-state-title-fz-xl: calc(var(--mantine-font-size-xl) * 1.2);
+
+  --empty-state-description-fz-xs: var(--mantine-font-size-xs);
+  --empty-state-description-fz-sm: var(--mantine-font-size-sm);
+  --empty-state-description-fz-md: var(--mantine-font-size-sm);
+  --empty-state-description-fz-lg: var(--mantine-font-size-md);
+  --empty-state-description-fz-xl: var(--mantine-font-size-lg);
+
+  display: flex;
+  gap: var(--empty-state-gap, var(--empty-state-gap-md));
+}
+
+  ._root_1fzi7_1[data-align='center'] {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  ._root_1fzi7_1[data-align='left'] {
+    flex-direction: row;
+    align-items: flex-start;
+  }
+
+  ._root_1fzi7_1[data-align='right'] {
+    flex-direction: row-reverse;
+    align-items: flex-start;
+  }
+
+._body_1fzi7_45 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--empty-state-gap, var(--empty-state-gap-md));
+  min-width: 0;
+}
+
+[data-align='center'] > ._body_1fzi7_45 {
+    align-items: center;
+    text-align: center;
+  }
+
+[data-align='left'] > ._body_1fzi7_45 {
+    align-items: flex-start;
+    text-align: left;
+  }
+
+[data-align='right'] > ._body_1fzi7_45 {
+    align-items: flex-end;
+    text-align: right;
+  }
+
+._indicator_1fzi7_67 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--empty-state-indicator-color, var(--mantine-color-dimmed));
+  font-size: var(--empty-state-indicator-size, var(--empty-state-indicator-size-md));
+  line-height: 1;
+}
+
+._indicator_1fzi7_67 > svg {
+    width: 1em;
+    height: 1em;
+  }
+
+[data-mantine-color-scheme='light'] ._indicator_1fzi7_67[data-with-background] {
+      --empty-state-indicator-default-bg: var(--mantine-color-gray-1);
+}
+
+[data-mantine-color-scheme='dark'] ._indicator_1fzi7_67[data-with-background] {
+      --empty-state-indicator-default-bg: var(--mantine-color-dark-6);
+}
+
+._indicator_1fzi7_67[data-with-background] {
+
+    width: 2em;
+    height: 2em;
+    border-radius: calc(62.5rem * var(--mantine-scale));
+    background-color: var(--empty-state-indicator-bg, var(--empty-state-indicator-default-bg));
+}
+
+._title_1fzi7_97 {
+  font-size: var(--empty-state-title-fz, var(--empty-state-title-fz-md));
+  font-weight: 600;
+  line-height: 1.3;
+  color: var(--mantine-color-bright);
+  margin: 0;
+  text-wrap: balance;
+}
+
+._description_1fzi7_106 {
+  font-size: var(--empty-state-description-fz, var(--empty-state-description-fz-md));
+  line-height: 1.55;
+  color: var(--mantine-color-dimmed);
+  margin: 0;
+  max-width: 32rem;
+  text-wrap: pretty;
+}
+
+._actions_1fzi7_115 {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--mantine-spacing-sm);
+}
 ._eyeDropperIcon_185sf_1 {
   --ci-eye-dropper-icon-size-xs: calc(0.875rem * var(--mantine-scale));
   --ci-eye-dropper-icon-size-sm: calc(1rem * var(--mantine-scale));

package/styles.layer.css

@@ -58,12 +58,12 @@ body,
 }
 
 .mantine-focus-auto:focus-visible {
-    outline: 2px solid var(--mantine-primary-color-filled);
+    outline: calc(0.125rem * var(--mantine-scale)) solid var(--mantine-primary-color-filled);
     outline-offset: calc(0.125rem * var(--mantine-scale));
   }
 
 .mantine-focus-always:focus {
-    outline: 2px solid var(--mantine-primary-color-filled);
+    outline: calc(0.125rem * var(--mantine-scale)) solid var(--mantine-primary-color-filled);
     outline-offset: calc(0.125rem * var(--mantine-scale));
   }
 
@@ -8173,6 +8173,35 @@ fieldset:disabled ._bar_16d42_187:where(:not([data-inverted])),
 :where([dir="rtl"]) ._chevron_gqzvg_120 {
     transform: rotate(90deg);
 }
+._root_1mggn_1 {
+  display: flex;
+  align-items: center;
+}
+
+._target_1mggn_6 {
+  font-size: var(--mantine-font-size-sm);
+  line-height: 1;
+  padding: calc(var(--mantine-spacing-xs) / 1.5) var(--mantine-spacing-sm);
+  border-radius: var(--mantine-radius-default);
+  color: var(--mantine-color-text);
+  background-color: transparent;
+  user-select: none;
+  cursor: pointer;
+}
+
+._target_1mggn_6:where([data-disabled], :disabled) {
+    color: var(--mantine-color-disabled-color);
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+:where([data-mantine-color-scheme='light']) ._target_1mggn_6:where(:hover, :focus-visible, [data-expanded]):where(:not(:disabled, [data-disabled])) {
+        background-color: var(--mantine-color-gray-1);
+}
+
+:where([data-mantine-color-scheme='dark']) ._target_1mggn_6:where(:hover, :focus-visible, [data-expanded]):where(:not(:disabled, [data-disabled])) {
+        background-color: var(--mantine-color-dark-5);
+}
 ._dropdown_1f398_1 {
   --combobox-padding: calc(0.25rem * var(--mantine-scale));
   padding: var(--combobox-padding);
@@ -8397,6 +8426,181 @@ fieldset:disabled ._bar_16d42_187:where(:not([data-inverted])),
   min-width: 0.8em;
   height: 0.8em;
 }
+._root_12ezl_1 {
+  --data-list-fz: var(--mantine-font-size-sm);
+  --data-list-lh: var(--mantine-line-height-sm);
+  --data-list-gap: var(--mantine-spacing-sm);
+  --data-list-label-width: calc(7.5rem * var(--mantine-scale));
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--data-list-gap);
+  font-size: var(--data-list-fz);
+  line-height: var(--data-list-lh);
+  margin: 0;
+  padding: 0;
+}
+
+  ._root_12ezl_1:where([data-with-divider]) {
+    gap: 0;
+  }
+
+._item_12ezl_20 {
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+  gap: var(--mantine-spacing-xs);
+}
+
+._root_12ezl_1:where([data-orientation='vertical']) > ._item_12ezl_20 {
+  flex-direction: column;
+  gap: 0;
+}
+
+._itemLabel_12ezl_32 {
+  color: var(--mantine-color-dimmed);
+  font-size: var(--data-list-fz);
+  line-height: var(--data-list-lh);
+  min-width: var(--data-list-label-width);
+  margin: 0;
+}
+
+._root_12ezl_1:where([data-orientation='vertical']) ._itemLabel_12ezl_32 {
+  min-width: 100%;
+}
+
+._itemValue_12ezl_44 {
+  font-size: var(--data-list-fz);
+  line-height: var(--data-list-lh);
+  margin: 0;
+}
+
+._root_12ezl_1:where([data-with-divider]) > ._item_12ezl_20:where(:not(:first-of-type)) {
+  border-top: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border);
+  padding-top: var(--data-list-gap);
+  margin-top: var(--data-list-gap);
+}
+._root_1fzi7_1 {
+  --empty-state-indicator-size-xs: calc(2rem * var(--mantine-scale));
+  --empty-state-indicator-size-sm: calc(2.5rem * var(--mantine-scale));
+  --empty-state-indicator-size-md: calc(3rem * var(--mantine-scale));
+  --empty-state-indicator-size-lg: calc(3.75rem * var(--mantine-scale));
+  --empty-state-indicator-size-xl: calc(4.5rem * var(--mantine-scale));
+
+  --empty-state-gap-xs: calc(0.375rem * var(--mantine-scale));
+  --empty-state-gap-sm: calc(0.5rem * var(--mantine-scale));
+  --empty-state-gap-md: calc(0.625rem * var(--mantine-scale));
+  --empty-state-gap-lg: calc(0.75rem * var(--mantine-scale));
+  --empty-state-gap-xl: calc(1rem * var(--mantine-scale));
+
+  --empty-state-title-fz-xs: var(--mantine-font-size-sm);
+  --empty-state-title-fz-sm: var(--mantine-font-size-md);
+  --empty-state-title-fz-md: var(--mantine-font-size-lg);
+  --empty-state-title-fz-lg: var(--mantine-font-size-xl);
+  --empty-state-title-fz-xl: calc(var(--mantine-font-size-xl) * 1.2);
+
+  --empty-state-description-fz-xs: var(--mantine-font-size-xs);
+  --empty-state-description-fz-sm: var(--mantine-font-size-sm);
+  --empty-state-description-fz-md: var(--mantine-font-size-sm);
+  --empty-state-description-fz-lg: var(--mantine-font-size-md);
+  --empty-state-description-fz-xl: var(--mantine-font-size-lg);
+
+  display: flex;
+  gap: var(--empty-state-gap, var(--empty-state-gap-md));
+}
+
+  ._root_1fzi7_1[data-align='center'] {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  ._root_1fzi7_1[data-align='left'] {
+    flex-direction: row;
+    align-items: flex-start;
+  }
+
+  ._root_1fzi7_1[data-align='right'] {
+    flex-direction: row-reverse;
+    align-items: flex-start;
+  }
+
+._body_1fzi7_45 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--empty-state-gap, var(--empty-state-gap-md));
+  min-width: 0;
+}
+
+[data-align='center'] > ._body_1fzi7_45 {
+    align-items: center;
+    text-align: center;
+  }
+
+[data-align='left'] > ._body_1fzi7_45 {
+    align-items: flex-start;
+    text-align: left;
+  }
+
+[data-align='right'] > ._body_1fzi7_45 {
+    align-items: flex-end;
+    text-align: right;
+  }
+
+._indicator_1fzi7_67 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--empty-state-indicator-color, var(--mantine-color-dimmed));
+  font-size: var(--empty-state-indicator-size, var(--empty-state-indicator-size-md));
+  line-height: 1;
+}
+
+._indicator_1fzi7_67 > svg {
+    width: 1em;
+    height: 1em;
+  }
+
+[data-mantine-color-scheme='light'] ._indicator_1fzi7_67[data-with-background] {
+      --empty-state-indicator-default-bg: var(--mantine-color-gray-1);
+}
+
+[data-mantine-color-scheme='dark'] ._indicator_1fzi7_67[data-with-background] {
+      --empty-state-indicator-default-bg: var(--mantine-color-dark-6);
+}
+
+._indicator_1fzi7_67[data-with-background] {
+
+    width: 2em;
+    height: 2em;
+    border-radius: calc(62.5rem * var(--mantine-scale));
+    background-color: var(--empty-state-indicator-bg, var(--empty-state-indicator-default-bg));
+}
+
+._title_1fzi7_97 {
+  font-size: var(--empty-state-title-fz, var(--empty-state-title-fz-md));
+  font-weight: 600;
+  line-height: 1.3;
+  color: var(--mantine-color-bright);
+  margin: 0;
+  text-wrap: balance;
+}
+
+._description_1fzi7_106 {
+  font-size: var(--empty-state-description-fz, var(--empty-state-description-fz-md));
+  line-height: 1.55;
+  color: var(--mantine-color-dimmed);
+  margin: 0;
+  max-width: 32rem;
+  text-wrap: pretty;
+}
+
+._actions_1fzi7_115 {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--mantine-spacing-sm);
+}
 ._eyeDropperIcon_185sf_1 {
   --ci-eye-dropper-icon-size-xs: calc(0.875rem * var(--mantine-scale));
   --ci-eye-dropper-icon-size-sm: calc(1rem * var(--mantine-scale));