aloha-vue 2.62.0 → 2.63.0

package/src/ATableForm/compositionAPI/ClassesAPI.js

@@ -1,23 +1,23 @@
-import {
-  computed,
-  toRef,
-} from "vue";
-
-export default function ClassesAPI(props) {
-  const actionsClasses = toRef(props, "actionsClasses");
-
-  const actionsClassesLocal = computed(() => {
-    return {
-      delete: "a_btn a_btn_transparent_danger",
-      edit: "a_btn a_btn_transparent_primary",
-      editCancel: "a_btn a_btn_transparent_primary",
-      editSave: "a_btn a_btn_transparent_primary",
-      addRow: "a_btn a_btn_outline_primary",
-      ...actionsClasses.value,
-    };
-  });
-
-  return {
-    actionsClassesLocal,
-  };
-}
+import {
+  computed,
+  toRef,
+} from "vue";
+
+export default function ClassesAPI(props) {
+  const actionsClasses = toRef(props, "actionsClasses");
+
+  const actionsClassesLocal = computed(() => {
+    return {
+      delete: "a_btn a_btn_transparent_danger",
+      edit: "a_btn a_btn_transparent_primary",
+      editCancel: "a_btn a_btn_transparent_primary",
+      editSave: "a_btn a_btn_transparent_primary",
+      addRow: "a_btn a_btn_outline_primary",
+      ...actionsClasses.value,
+    };
+  });
+
+  return {
+    actionsClassesLocal,
+  };
+}

package/src/ATableForm/compositionAPI/ColumnsAPI.js

@@ -4,7 +4,9 @@ import {
 } from "vue";
 
 
-export default function ColumnsAPI(props) {
+export default function ColumnsAPI(props, {
+  isAddRowActive = computed(() => false),
+} = {}) {
   const columns = toRef(props, "columns");
   const isDeletable = toRef(props, "isDeletable");
   const isDeletableConfirm = toRef(props, "isDeletableConfirm");
@@ -13,7 +15,7 @@ export default function ColumnsAPI(props) {
   const rowView = toRef(props, "rowView");
 
   const hasActionsColumn = computed(() => {
-    return !!(isEditable.value || isDeletable.value || isDeletableConfirm.value);
+    return !!(isEditable.value || isDeletable.value || isDeletableConfirm.value || isAddRowActive.value);
   });
 
   const columnsVisible = computed(() => {

package/src/ATableForm/compositionAPI/ColumnsGrowAPI.js

@@ -1,211 +1,212 @@
-import {
-  computed,
-  ref,
-  toRef,
-  watch,
-} from "vue";
-
-import ARemPxAPI from "../../compositionAPI/ARemPxAPI";
-
-import {
-  debounce,
-  isNil,
-  isNumber,
-  isString,
-} from "lodash-es";
-
-const TABLE_WIDTH_SAFE_DELTA = 2;
-
-export default function ColumnsGrowAPI(props, {
+import {
+  computed,
+  ref,
+  toRef,
+  watch,
+} from "vue";
+
+import ARemPxAPI from "../../compositionAPI/ARemPxAPI";
+
+import {
+  debounce,
+  isNil,
+  isNumber,
+  isString,
+} from "lodash-es";
+
+const TABLE_WIDTH_SAFE_DELTA = 2;
+
+export default function ColumnsGrowAPI(props, {
   columnsVisible = computed(() => []),
   hasActionsColumn = computed(() => false),
+  hasActiveEditRow = computed(() => false),
   widthsLocal = computed(() => ({})),
-}) {
-  const id = toRef(props, "id");
-  const isColumnsGrow = toRef(props, "isColumnsGrow");
-  const isDeletable = toRef(props, "isDeletable");
-  const isDeletableConfirm = toRef(props, "isDeletableConfirm");
-  const isDragAndDrop = toRef(props, "isDragAndDrop");
-  const isEditable = toRef(props, "isEditable");
-
-  const {
-    remPx,
-    scalePxWithRem,
-  } = ARemPxAPI();
-
-  const tableWidth = ref(undefined);
-  const columnsStylesGrow = ref({});
-  let resizeObserver;
-  let observedElement;
-
-  const actionsColumnWidth = computed(() => {
-    if (!hasActionsColumn.value) {
-      return 0;
-    }
-
-    if (isEditable.value) {
+}) {
+  const id = toRef(props, "id");
+  const isColumnsGrow = toRef(props, "isColumnsGrow");
+  const isDeletable = toRef(props, "isDeletable");
+  const isDeletableConfirm = toRef(props, "isDeletableConfirm");
+  const isDragAndDrop = toRef(props, "isDragAndDrop");
+  const isEditable = toRef(props, "isEditable");
+
+  const {
+    remPx,
+    scalePxWithRem,
+  } = ARemPxAPI();
+
+  const tableWidth = ref(undefined);
+  const columnsStylesGrow = ref({});
+  let resizeObserver;
+  let observedElement;
+
+  const actionsColumnWidth = computed(() => {
+    if (!hasActionsColumn.value) {
+      return 0;
+    }
+
+    if (hasActiveEditRow.value ||
+      (isEditable.value && (isDeletable.value || isDeletableConfirm.value))) {
       return widthsLocal.value.actionsColumnDouble;
     }
-
-    if (isDeletable.value || isDeletableConfirm.value) {
-      return widthsLocal.value.actionsColumnSingle;
-    }
-
-    return 0;
-  });
-
-  const dndColumnWidth = computed(() => {
-    return isDragAndDrop.value ? widthsLocal.value.dndColumn : 0;
+
+    return widthsLocal.value.actionsColumnSingle;
   });
-
-  const getObservedElement = () => {
-    return document.getElementById(id.value)?.parentElement;
-  };
-
-  const parseWidthToPx = value => {
-    if (isNil(value) || value === "") {
-      return 0;
-    }
-
-    if (isNumber(value)) {
-      return +scalePxWithRem(value) || 0;
-    }
-
-    if (!isString(value)) {
-      return 0;
-    }
-
-    const valueTrim = value.trim();
-    if (!valueTrim) {
-      return 0;
-    }
-
-    if (valueTrim.endsWith("rem")) {
-      return (parseFloat(valueTrim) || 0) * remPx.value;
-    }
-
-    if (valueTrim.endsWith("px")) {
-      return parseFloat(valueTrim) || 0;
-    }
-
-    return parseFloat(valueTrim) || 0;
-  };
-
-  const toWidthStyle = widthPx => {
-    const width = `${ widthPx }px`;
-
-    return {
-      maxWidth: width,
-      minWidth: width,
-      width,
-    };
-  };
-
-  const updateColumnsGrowStyles = () => {
-    if (!isColumnsGrow.value || !tableWidth.value) {
-      columnsStylesGrow.value = {};
-      return;
-    }
-
-    const columnsLocal = columnsVisible.value || [];
-    // Leave a small buffer to avoid subpixel overflow triggering a useless scrollbar.
-    const tableWidthAvailable = tableWidth.value - actionsColumnWidth.value - dndColumnWidth.value - TABLE_WIDTH_SAFE_DELTA;
-
-    if (tableWidthAvailable <= 0) {
-      columnsStylesGrow.value = {};
-      return;
-    }
-
-    let columnsWidthSum = 0;
-    let growSum = 0;
-
-    columnsLocal.forEach(column => {
-      const columnWidth = parseWidthToPx(column.width);
-      columnsWidthSum += columnWidth;
-      growSum += Math.max(0, +column.grow || 0);
-    });
-
-    if (columnsWidthSum >= tableWidthAvailable || growSum <= 0) {
+
+  const dndColumnWidth = computed(() => {
+    return isDragAndDrop.value ? widthsLocal.value.dndColumn : 0;
+  });
+
+  const getObservedElement = () => {
+    return document.getElementById(id.value)?.parentElement;
+  };
+
+  const parseWidthToPx = value => {
+    if (isNil(value) || value === "") {
+      return 0;
+    }
+
+    if (isNumber(value)) {
+      return +scalePxWithRem(value) || 0;
+    }
+
+    if (!isString(value)) {
+      return 0;
+    }
+
+    const valueTrim = value.trim();
+    if (!valueTrim) {
+      return 0;
+    }
+
+    if (valueTrim.endsWith("rem")) {
+      return (parseFloat(valueTrim) || 0) * remPx.value;
+    }
+
+    if (valueTrim.endsWith("px")) {
+      return parseFloat(valueTrim) || 0;
+    }
+
+    return parseFloat(valueTrim) || 0;
+  };
+
+  const toWidthStyle = widthPx => {
+    const width = `${ widthPx }px`;
+
+    return {
+      maxWidth: width,
+      minWidth: width,
+      width,
+    };
+  };
+
+  const updateColumnsGrowStyles = () => {
+    if (!isColumnsGrow.value || !tableWidth.value) {
+      columnsStylesGrow.value = {};
+      return;
+    }
+
+    const columnsLocal = columnsVisible.value || [];
+    // Leave a small buffer to avoid subpixel overflow triggering a useless scrollbar.
+    const tableWidthAvailable = tableWidth.value - actionsColumnWidth.value - dndColumnWidth.value - TABLE_WIDTH_SAFE_DELTA;
+
+    if (tableWidthAvailable <= 0) {
+      columnsStylesGrow.value = {};
+      return;
+    }
+
+    let columnsWidthSum = 0;
+    let growSum = 0;
+
+    columnsLocal.forEach(column => {
+      const columnWidth = parseWidthToPx(column.width);
+      columnsWidthSum += columnWidth;
+      growSum += Math.max(0, +column.grow || 0);
+    });
+
+    if (columnsWidthSum >= tableWidthAvailable || !columnsLocal.length) {
       columnsStylesGrow.value = {};
       return;
     }
 
     const freeWidth = tableWidthAvailable - columnsWidthSum;
+    const hasConfiguredGrow = growSum > 0;
+    const growSumLocal = hasConfiguredGrow ? growSum : columnsLocal.length;
     const styles = {};
 
     columnsLocal.forEach(column => {
       const columnWidth = parseWidthToPx(column.width);
-      const columnGrow = Math.max(0, +column.grow || 0);
+      const columnGrow = hasConfiguredGrow ? Math.max(0, +column.grow || 0) : 1;
 
-      if (!column.id || !columnWidth) {
+      if (!column.id || (hasConfiguredGrow && !columnWidth)) {
         return;
       }
 
-      const widthPx = columnWidth + (columnGrow > 0 ? freeWidth * columnGrow / growSum : 0);
-      styles[column.id] = toWidthStyle(widthPx);
-    });
-
-    columnsStylesGrow.value = styles;
-  };
-
-  const initColumnsGrowObserver = () => {
-    if (!isColumnsGrow.value || resizeObserver) {
-      return;
-    }
-
-    const element = getObservedElement();
-    if (!element) {
-      return;
-    }
-
-    observedElement = element;
-    resizeObserver = new ResizeObserver(debounce(entries => {
-      const width = entries[0]?.contentRect?.width;
-
-      if (!width) {
-        return;
-      }
-
-      tableWidth.value = width;
-      updateColumnsGrowStyles();
-    }, 100));
-
-    tableWidth.value = element.getBoundingClientRect().width;
-    updateColumnsGrowStyles();
-    resizeObserver.observe(element);
-  };
-
-  const destroyColumnsGrowObserver = () => {
-    if (!resizeObserver) {
-      return;
-    }
-
-    if (observedElement) {
-      resizeObserver.unobserve(observedElement);
-    }
-
-    resizeObserver.disconnect();
-    resizeObserver = undefined;
-    observedElement = undefined;
-  };
-
-  watch([
+      const widthPx = columnWidth + (columnGrow > 0 ? freeWidth * columnGrow / growSumLocal : 0);
+      styles[column.id] = toWidthStyle(widthPx);
+    });
+
+    columnsStylesGrow.value = styles;
+  };
+
+  const initColumnsGrowObserver = () => {
+    if (!isColumnsGrow.value || resizeObserver) {
+      return;
+    }
+
+    const element = getObservedElement();
+    if (!element) {
+      return;
+    }
+
+    observedElement = element;
+    resizeObserver = new ResizeObserver(debounce(entries => {
+      const width = entries[0]?.contentRect?.width;
+
+      if (!width) {
+        return;
+      }
+
+      tableWidth.value = width;
+      updateColumnsGrowStyles();
+    }, 100));
+
+    tableWidth.value = element.getBoundingClientRect().width;
+    updateColumnsGrowStyles();
+    resizeObserver.observe(element);
+  };
+
+  const destroyColumnsGrowObserver = () => {
+    if (!resizeObserver) {
+      return;
+    }
+
+    if (observedElement) {
+      resizeObserver.unobserve(observedElement);
+    }
+
+    resizeObserver.disconnect();
+    resizeObserver = undefined;
+    observedElement = undefined;
+  };
+
+  watch([
     columnsVisible,
     hasActionsColumn,
-    isDeletable,
-    isDeletableConfirm,
-    isDragAndDrop,
-    isEditable,
-    widthsLocal,
-  ], () => {
-    updateColumnsGrowStyles();
-  }, {
-    deep: true,
-  });
-
-  return {
-    columnsStylesGrow,
-    destroyColumnsGrowObserver,
-    initColumnsGrowObserver,
-  };
-}
+    hasActiveEditRow,
+    isDeletable,
+    isDeletableConfirm,
+    isDragAndDrop,
+    isEditable,
+    widthsLocal,
+  ], () => {
+    updateColumnsGrowStyles();
+  }, {
+    deep: true,
+  });
+
+  return {
+    columnsStylesGrow,
+    destroyColumnsGrowObserver,
+    initColumnsGrowObserver,
+  };
+}

package/src/ATableForm/compositionAPI/DeleteAPI.js

@@ -1,9 +1,9 @@
-export default function DeleteAPI(props, { emit }) {
-  const onDeleteRow = ({ row, rowIndex, rowId, btnDeleteId }) => {
-    emit("deleteRow", { row, rowIndex, rowId, btnDeleteId });
-  };
-
-  return {
-    onDeleteRow,
-  };
-}
+export default function DeleteAPI(props, { emit }) {
+  const onDeleteRow = ({ row, rowIndex, rowId, btnDeleteId }) => {
+    emit("deleteRow", { row, rowIndex, rowId, btnDeleteId });
+  };
+
+  return {
+    onDeleteRow,
+  };
+}

package/src/ATableForm/compositionAPI/DragAndDropAPI.js

@@ -27,11 +27,7 @@ export default function DragAndDropAPI(props, { emit }, {
   const dragOverPosition = ref(undefined);
   const dragPreviewElement = ref(undefined);
 
-  const isDndDisabledForRow = rowIndex => {
-    if (isDndDisabled.value) {
-      return true;
-    }
-
+  const isDndLockedForRow = rowIndex => {
     const dndCallback = get(actionsDisabledCallback.value, "dnd");
 
     if (isFunction(dndCallback)) {
@@ -44,6 +40,10 @@ export default function DragAndDropAPI(props, { emit }, {
     return false;
   };
 
+  const isDndDisabledForRow = rowIndex => {
+    return isDndDisabled.value || isDndLockedForRow(rowIndex);
+  };
+
   const hasDisabledRowBetween = (fromIndex, toIndex) => {
     const indexFrom = Math.min(fromIndex, toIndex);
     const indexTo = Math.max(fromIndex, toIndex);
@@ -294,6 +294,7 @@ export default function DragAndDropAPI(props, { emit }, {
     dragOverRowIndex,
     draggedRowIndex,
     isDndDisabledForRow,
+    isDndLockedForRow,
     onDragleave,
     moveRowDown,
     moveRowUp,