aloha-vue 2.59.0 → 2.60.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aloha-vue",
-  "version": "2.59.0",
+  "version": "2.60.1",
   "description": "Aloha-vue is a JavaScript library that provides a wide range of accessible components and directives for Vue.js. Accessibility is of paramount importance to us, and we have designed all our components to meet accessibility compliance criteria. This library is a valuable tool for frontend developers and has already been used in three projects, including two large-scale ones",
   "keywords": [
     "accessibility compliance criteria",

package/scss/components/ATableForm.scss

@@ -1,256 +1,261 @@
-.a_table_form {
-  --a_table_form_bg: var(--a_color_white);
-  --a_table_form_border_color: var(--a_color_gray_300);
-  --a_table_form_drop_indicator_color: var(--a_color_primary);
-  --a_table_form_head_bg: var(--a_color_gray_200);
-  --a_table_form_head_color: inherit;
-  --a_table_form_row_dragging_bg: #e9eef5;
-  --a_table_form_row_dragging_opacity: .65;
-  --a_table_form_row_dragging_outline: 2px dashed var(--a_color_gray_700);
-  --a_table_form_focus_color: var(--a_color_primary);
-  --a_table_form_focus_box_shadow: 0 0 0 2px var(--a_table_form_focus_color);
-  --a_table_form_row_hover_bg: #eef6ff;
-  --a_table_form_row_drag_bg: #dfefff;
-  --a_table_form_footer_bg: var(--a_color_gray_100);
-  --a_table_form_cell_padding_y: .75rem;
-  --a_table_form_cell_padding_x: .75rem;
-
-  width: 100%;
-
-  .a_alert {
-    --a_alert_border-radius: 0;
-
-    margin-bottom: 0;
-  }
-}
-
-.a_table_form__wrapper {
-  overflow-x: auto;
-
-  &:has(> .a_table_form__table:focus) {
-    position: relative;
-    z-index: 3;
-    box-shadow: var(--a_table_form_focus_box_shadow);
-  }
-}
-
-.a_table_form__drag_preview {
-  opacity: var(--a_table_form_row_dragging_opacity);
-
-  .a_table_form__row {
-    outline: 0;
-  }
-
-  .a_table_form__cell {
-    opacity: 1;
-  }
-}
-
-.a_table_form__table {
-  width: 100%;
-  table-layout: fixed;
-  border-collapse: collapse;
-  background-color: var(--a_table_form_bg);
-}
-
-.a_table_form__cell {
-  padding: var(--a_table_form_cell_padding_y) var(--a_table_form_cell_padding_x);
-  border-top: 1px solid var(--a_table_form_border_color);
-  border-bottom: 1px solid var(--a_table_form_border_color);
-  border-left: 0;
-  border-right: 0;
-  vertical-align: top;
-  text-align: left;
-  word-break: break-word;
-  .a_select_toggle {
-    min-width: 100%;
-  }
-  .pux_datepicker {
-    min-width: 100%;
-    width: 100%;
-    max-width: 100%;
-  }
-}
-
-.a_table_form__row > .a_table_form__cell:first-child {
-  border-left: 1px solid var(--a_table_form_border_color);
-}
-
-.a_table_form__row > .a_table_form__cell:last-child:not(.a_table_form__cell_actions_sticky) {
-  border-right: 1px solid var(--a_table_form_border_color);
-}
-
-.a_table_form__cell_info {
-  padding: 0;
-}
-
-.a_table_form__cell_errors {
-  padding: 0;
-  .a_error__list__li {
-    display: flex;
-    flex-wrap: wrap;
-    gap: .5rem;
-    align-items: center;
-  }
-}
-
-.a_table_form__cell_th {
-  background-color: var(--a_table_form_head_bg);
-  color: var(--a_table_form_head_color);
-  font-weight: 700;
-}
-
-.a_table_form__table:not(.a_table_form_drag_active) .a_table_form__row:hover .a_table_form__cell_td,
-.a_table_form__table:not(.a_table_form_drag_active) .a_table_form__row:focus-within .a_table_form__cell_td {
-  background-color: var(--a_table_form_row_hover_bg);
-}
-
-.a_table_form__table:not(.a_table_form_drag_active) .a_table_form__row_errors:hover .a_table_form__cell_td,
-.a_table_form__table:not(.a_table_form_drag_active) .a_table_form__row_errors:focus-within .a_table_form__cell_td {
-  background-color: var(--a_color_danger_bg_subtle);
-}
-
-.a_table_form__row_dragging:hover .a_table_form__cell_td,
-.a_table_form__row_dragging:focus-within .a_table_form__cell_td {
-  background-color: var(--a_table_form_row_dragging_bg);
-}
-
-.a_table_form_drag_active {
-  .a_table_form__row_drag_over .a_table_form__cell_td,
-  .a_table_form__row_dragging .a_table_form__cell_td {
-    background-color: var(--a_table_form_row_drag_bg);
-  }
-
-  .a_table_form__row_dragging .a_table_form__cell_td {
-    background-color: var(--a_table_form_row_dragging_bg);
-  }
-}
-
-.a_table_form__row {
-  position: relative;
-
-  &:focus {
-    z-index: 3;
-    box-shadow: var(--a_table_form_focus_box_shadow);
-
-    > .a_table_form__cell:first-child {
-      box-shadow: inset 1px 0 0 var(--a_table_form_focus_color);
-    }
-
-    > .a_table_form__cell_actions_sticky {
-      --a_table_form_cell_actions_edge_box_shadow:
-        inset -2px 0 0 var(--a_table_form_focus_color);
-    }
-  }
-}
-
-.a_table_form__row_drag_over .a_table_form__cell_td,
-.a_table_form__row_dragging .a_table_form__cell_td {
-  background-color: var(--a_table_form_row_drag_bg);
-}
-
-.a_table_form__row_dragging {
-  outline: var(--a_table_form_row_dragging_outline);
-  outline-offset: -2px;
-
-  .a_table_form__cell_td {
-    background-color: var(--a_table_form_row_dragging_bg);
-    opacity: var(--a_table_form_row_dragging_opacity);
-  }
-
-  .a_table_form__reorder_handle {
-    color: var(--a_color_black);
-  }
-}
-
-.a_table_form__row_drag_before .a_table_form__cell_td {
-  border-top: 3px solid var(--a_table_form_drop_indicator_color);
-}
-
-.a_table_form__row_drag_after .a_table_form__cell_td {
-  border-bottom: 3px solid var(--a_table_form_drop_indicator_color);
-}
-
-.a_table_form__row_footer .a_table_form__cell {
-  background-color: var(--a_table_form_footer_bg);
-  font-weight: 700;
-}
-
-.a_table_form__row_errors .a_table_form__cell_td {
-  background-color: var(--a_color_danger_bg_subtle);
-}
-
-.a_table_form__cell_reorder {
-  width: 3.5rem;
-  min-width: 3.5rem;
-  max-width: 3.5rem;
-  text-align: center;
-}
-
-.a_table_form__reorder_actions {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: .25rem;
-
-  &:focus-within .a_table_form__reorder_handle {
-    display: none;
-  }
-}
-
-.a_table_form__reorder_handle {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--a_color_gray_700);
-  cursor: grab;
-  user-select: none;
-  -webkit-user-drag: element;
-  padding-top: .3rem;
-
-  &:active {
-    cursor: grabbing;
-  }
-}
-
-.a_table_form__reorder_button {
-  //min-width: auto;
-  &.a_btn {
-    --a_btn_padding_y: 0;
-    --a_btn_padding_x: 0.35rem;
-  }
-}
-
-.a_table_form__empty {
-  text-align: left;
-}
-
-.a_table_form__cell_actions_sticky {
-  --a_table_form_cell_actions_edge_box_shadow:
-    inset -1px 0 0 var(--a_table_form_border_color);
-
-  position: sticky;
-  right: 0;
-  z-index: 2;
-  background: var(--a_table_form_bg);
-  box-shadow:
-    var(--a_table_form_cell_actions_edge_box_shadow),
-    inset 1px 0 0 rgba(0, 0, 0, .12),
-    -8px 0 14px -8px rgba(17, 24, 39, .34),
-    -18px 0 24px -20px rgba(17, 24, 39, .55);
-}
-
-.a_table_form__cell_actions_sticky.a_table_form__cell_th {
-  background: var(--a_table_form_head_bg);
-  color: var(--a_table_form_head_color);
-}
-
-.a_table_form__row_footer .a_table_form__cell_actions_sticky {
-  background: var(--a_table_form_footer_bg);
-}
-
-.a_table_form__actions {
-  display: flex;
-  align-items: center;
-  gap: .5rem;
-}
+.a_table_form {
+  --a_table_form_bg: var(--a_color_white);
+  --a_table_form_border_color: var(--a_color_gray_300);
+  --a_table_form_drop_indicator_color: var(--a_color_primary);
+  --a_table_form_head_bg: var(--a_color_gray_200);
+  --a_table_form_head_color: inherit;
+  --a_table_form_row_dragging_bg: #e9eef5;
+  --a_table_form_row_dragging_opacity: .65;
+  --a_table_form_row_dragging_outline: 2px dashed var(--a_color_gray_700);
+  --a_table_form_focus_color: var(--a_color_primary);
+  --a_table_form_focus_box_shadow: 0 0 0 2px var(--a_table_form_focus_color);
+  --a_table_form_row_hover_bg: #eef6ff;
+  --a_table_form_row_drag_bg: #dfefff;
+  --a_table_form_footer_bg: var(--a_color_gray_100);
+  --a_table_form_cell_padding_y: .75rem;
+  --a_table_form_cell_padding_x: .75rem;
+
+  width: 100%;
+
+  .a_alert {
+    --a_alert_border-radius: 0;
+
+    margin-bottom: 0;
+  }
+}
+
+.a_table_form__wrapper {
+  overflow-x: auto;
+
+  &:has(> .a_table_form__table:focus) {
+    position: relative;
+    z-index: 3;
+    box-shadow: var(--a_table_form_focus_box_shadow);
+  }
+}
+
+.a_table_form__drag_preview {
+  opacity: var(--a_table_form_row_dragging_opacity);
+
+  .a_table_form__row {
+    outline: 0;
+  }
+
+  .a_table_form__cell {
+    opacity: 1;
+  }
+}
+
+.a_table_form__table {
+  width: 100%;
+  table-layout: fixed;
+  border-collapse: collapse;
+  background-color: var(--a_table_form_bg);
+}
+
+.a_table_form__cell {
+  padding: var(--a_table_form_cell_padding_y) var(--a_table_form_cell_padding_x);
+  border-top: 1px solid var(--a_table_form_border_color);
+  border-bottom: 1px solid var(--a_table_form_border_color);
+  border-left: 0;
+  border-right: 0;
+  vertical-align: top;
+  text-align: left;
+  word-break: break-word;
+  .a_select_toggle {
+    min-width: 100%;
+  }
+  .pux_datepicker {
+    min-width: 100%;
+    width: 100%;
+    max-width: 100%;
+  }
+}
+
+.a_table_form__row > .a_table_form__cell:first-child {
+  border-left: 1px solid var(--a_table_form_border_color);
+}
+
+.a_table_form__row > .a_table_form__cell:last-child:not(.a_table_form__cell_actions_sticky) {
+  border-right: 1px solid var(--a_table_form_border_color);
+}
+
+.a_table_form__cell_info {
+  padding: 0;
+}
+
+.a_table_form__cell_errors {
+  padding: 0;
+  .a_error__list__li {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .5rem;
+    align-items: center;
+  }
+}
+
+.a_table_form__cell_th {
+  background-color: var(--a_table_form_head_bg);
+  color: var(--a_table_form_head_color);
+  font-weight: 700;
+}
+
+.a_table_form__table:not(.a_table_form_drag_active) .a_table_form__row:hover .a_table_form__cell_td,
+.a_table_form__table:not(.a_table_form_drag_active) .a_table_form__row:focus-within .a_table_form__cell_td {
+  background-color: var(--a_table_form_row_hover_bg);
+}
+
+.a_table_form__table:not(.a_table_form_drag_active) .a_table_form__row_errors:hover .a_table_form__cell_td,
+.a_table_form__table:not(.a_table_form_drag_active) .a_table_form__row_errors:focus-within .a_table_form__cell_td {
+  background-color: var(--a_color_danger_bg_subtle);
+}
+
+.a_table_form__row_dragging:hover .a_table_form__cell_td,
+.a_table_form__row_dragging:focus-within .a_table_form__cell_td {
+  background-color: var(--a_table_form_row_dragging_bg);
+}
+
+.a_table_form_drag_active {
+  .a_table_form__row_drag_over .a_table_form__cell_td,
+  .a_table_form__row_dragging .a_table_form__cell_td {
+    background-color: var(--a_table_form_row_drag_bg);
+  }
+
+  .a_table_form__row_dragging .a_table_form__cell_td {
+    background-color: var(--a_table_form_row_dragging_bg);
+  }
+}
+
+.a_table_form__row {
+  position: relative;
+
+  &:focus {
+    z-index: 3;
+    box-shadow: var(--a_table_form_focus_box_shadow);
+
+    > .a_table_form__cell:first-child {
+      box-shadow: inset 1px 0 0 var(--a_table_form_focus_color);
+    }
+
+    > .a_table_form__cell_actions_sticky {
+      --a_table_form_cell_actions_edge_box_shadow:
+        inset -2px 0 0 var(--a_table_form_focus_color);
+    }
+  }
+}
+
+.a_table_form__row_drag_over .a_table_form__cell_td,
+.a_table_form__row_dragging .a_table_form__cell_td {
+  background-color: var(--a_table_form_row_drag_bg);
+}
+
+.a_table_form__row_dragging {
+  outline: var(--a_table_form_row_dragging_outline);
+  outline-offset: -2px;
+
+  .a_table_form__cell_td {
+    background-color: var(--a_table_form_row_dragging_bg);
+    opacity: var(--a_table_form_row_dragging_opacity);
+  }
+
+  .a_table_form__reorder_handle {
+    color: var(--a_color_black);
+  }
+}
+
+.a_table_form__row_drag_before .a_table_form__cell_td {
+  border-top: 3px solid var(--a_table_form_drop_indicator_color);
+}
+
+.a_table_form__row_drag_after .a_table_form__cell_td {
+  border-bottom: 3px solid var(--a_table_form_drop_indicator_color);
+}
+
+.a_table_form__row_footer .a_table_form__cell {
+  background-color: var(--a_table_form_footer_bg);
+  font-weight: 700;
+}
+
+.a_table_form__row_errors .a_table_form__cell_td {
+  background-color: var(--a_color_danger_bg_subtle);
+}
+
+.a_table_form__cell_reorder {
+  width: 3.5rem;
+  min-width: 3.5rem;
+  max-width: 3.5rem;
+  text-align: center;
+}
+
+.a_table_form__reorder_actions {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: .25rem;
+
+  &:focus-within .a_table_form__reorder_handle {
+    display: none;
+  }
+}
+
+.a_table_form__reorder_handle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--a_color_gray_700);
+  cursor: grab;
+  user-select: none;
+  -webkit-user-drag: element;
+  padding-top: .3rem;
+
+  &:active {
+    cursor: grabbing;
+  }
+}
+
+.a_table_form__reorder_handle_disabled {
+  cursor: not-allowed;
+  -webkit-user-drag: none;
+}
+
+.a_table_form__reorder_button {
+  //min-width: auto;
+  &.a_btn {
+    --a_btn_padding_y: 0;
+    --a_btn_padding_x: 0.35rem;
+  }
+}
+
+.a_table_form__empty {
+  text-align: left;
+}
+
+.a_table_form__cell_actions_sticky {
+  --a_table_form_cell_actions_edge_box_shadow:
+    inset -1px 0 0 var(--a_table_form_border_color);
+
+  position: sticky;
+  right: 0;
+  z-index: 2;
+  background: var(--a_table_form_bg);
+  box-shadow:
+    var(--a_table_form_cell_actions_edge_box_shadow),
+    inset 1px 0 0 rgba(0, 0, 0, .12),
+    -8px 0 14px -8px rgba(17, 24, 39, .34),
+    -18px 0 24px -20px rgba(17, 24, 39, .55);
+}
+
+.a_table_form__cell_actions_sticky.a_table_form__cell_th {
+  background: var(--a_table_form_head_bg);
+  color: var(--a_table_form_head_color);
+}
+
+.a_table_form__row_footer .a_table_form__cell_actions_sticky {
+  background: var(--a_table_form_footer_bg);
+}
+
+.a_table_form__actions {
+  display: flex;
+  align-items: center;
+  gap: .5rem;
+}