quasar-ui-sellmate-ui-kit 3.14.9 → 3.14.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar-ui-sellmate-ui-kit",
-  "version": "3.14.9",
+  "version": "3.14.11",
   "author": "Sellmate Dev Team <dev@sellmate.co.kr>",
   "description": "Sellmate UI Kit",
   "license": "MIT",

package/src/components/STable.vue

@@ -13,13 +13,13 @@
     :class="{
       's-select-table': $attrs.selection && $attrs.selection !== 'none',
       'resizable-table': resizable,
-      'sticky-column-table': stickyColumn.isStickyLeft || stickyColumn.isStickyRight,
+      'sticky-column-table': stickyColumn.leftStickyCount > 0 || stickyColumn.rightStickyCount > 0,
       'sticky-resizable-table': stickyResizable,
       'sticky-header': stickyHeader,
       'before-search': !rows.length,
       's-table__hover': !noHover,
-      'sticky-left-table': stickyColumn.isStickyLeft,
-      'sticky-right-table': stickyColumn.isStickyRight,
+      'sticky-left-table': stickyColumn.leftStickyCount > 0,
+      'sticky-right-table': stickyColumn.rightStickyCount > 0,
     }"
     @selection="updateSelected"
     ref="sTableRef"
@@ -44,24 +44,7 @@
     </template>
 
     <template v-for="(column, index) in columns" :key="index" #[`body-cell-${column.name}`]="props">
-      <q-td
-        v-if="navigator"
-        :class="{
-          focused: isFocused(props),
-          'text-center': props.col.align === 'center',
-          'text-right': props.col.align === 'right',
-          [typeof props.col.classes === 'function'
-            ? props.col.classes(props.row)
-            : props.col.classes]: true,
-          [typeof props.row.class === 'function'
-            ? props.row.class(props.row)
-            : typeof props.row.class === 'string'
-              ? props.row.class
-              : '']: true,
-        }"
-        :style="props.col.style"
-        @click.stop="focusCell(props)"
-      >
+      <q-td v-if="navigator" :props="props" @click.stop="focusCell(props)">
         <slot :name="`body-cell-${column.name}-content`" v-bind="props">
           <s-input
             ref="inputRef"
@@ -82,24 +65,7 @@
           </span>
         </slot>
       </q-td>
-      <q-td
-        v-else
-        v-bind="props"
-        auto-width
-        :class="{
-          'text-center': props.col.align === 'center',
-          'text-right': props.col.align === 'right',
-          [typeof props.col.classes === 'function'
-            ? props.col.classes(props.row)
-            : props.col.classes]: true,
-          [typeof props.row.class === 'function'
-            ? props.row.class(props.row)
-            : typeof props.row.class === 'string'
-              ? props.row.class
-              : '']: true,
-        }"
-        :style="props.col.style"
-      >
+      <q-td v-else :props="props" auto-width>
         <slot :name="`body-cell-${column.name}-content`" v-bind="props">
           {{ props.value }}
         </slot>
@@ -166,11 +132,13 @@
         type: Boolean,
         default: false,
       },
+      useLastCellResizable: {
+        type: Boolean,
+        default: false,
+      },
       stickyColumn: {
         type: Object,
         default: () => ({
-          isStickyLeft: false,
-          isStickyRight: false,
           leftStickyCount: 0,
           rightStickyCount: 0,
         }),
@@ -299,12 +267,12 @@
         const tableElement = () => sTableRef.value.$el;
 
         if (props.resizable) {
-          addResizable(sTableRef, props.stickyColumn);
+          addResizable(sTableRef, props.stickyColumn, props.useLastCellResizable);
         }
 
         const { count, direction: stickyDirection } = props.stickyColumn;
-        const { isStickyLeft, isStickyRight } = props.stickyColumn;
-        if (isStickyLeft || isStickyRight) {
+        const { leftStickyCount, rightStickyCount } = props.stickyColumn;
+        if (leftStickyCount > 0 || rightStickyCount > 0) {
           addStickyColumn(sTableRef, props.stickyColumn);
           observeScrollForStickyShadow(tableElement());
         }
@@ -379,7 +347,8 @@
     .q-table__middle {
       .q-table {
         overflow: auto;
-        table-layout: fixed;
+        width: 100%;
+        table-layout: auto;
         tr {
           th,
           td {

package/src/composables/table/use-resizable.js

@@ -1,3 +1,8 @@
+const MIN_COL_WIDTH = 40; // 최소 너비 제한
+const HANDLE_WIDTH = 4; // 리사이즈 핸들의 너비
+const HANDLE_HEIGHT = 16; // 리사이즈 핸들의 높이
+const HANDLE_Z_INDEX = 2; // 리사이즈 핸들의 z-index
+
 function createDiv(val) {
   // 기존의 resizable div 코드
   const div = document.createElement('div');
@@ -5,23 +10,22 @@ function createDiv(val) {
   div.style.top = '10px';
   if (val === 'right') div.style.right = 0;
   if (val === 'left') div.style.left = 0;
-  div.style.width = '4px';
+  div.style.width = `${HANDLE_WIDTH}px`;
   div.style.position = 'absolute';
   div.style.cursor = 'col-resize';
-  div.style.backgroundColor = 'none';
+  div.style.backgroundColor = 'transparent';
   div.style.border = '1px solid #CCCCCC';
   div.style.borderTop = 'none';
   div.style.borderBottom = 'none';
-  div.style.zIndex = 2;
+  div.style.zIndex = HANDLE_Z_INDEX;
   div.style.userSelect = 'none';
-  div.style.height = '16px';
+  div.style.height = `${HANDLE_HEIGHT}px`;
   return div;
 }
 
-// TODO: 전역이 아니라 컴포넌트 단위로 제한된 최소 너비를 설정할 수 있도록 개선
-let restrictedMinWidth;
-
 function detectStickyWidth(tableElement, isStickyLeft) {
+  if (!tableElement) return;
+
   const tableRow = Array.from(tableElement.getElementsByTagName('tr'));
   const theadRow = tableRow[0];
   const stickyTh = Array.from(theadRow.querySelectorAll('.sticky-cell'));
@@ -46,182 +50,148 @@ function detectStickyWidth(tableElement, isStickyLeft) {
   });
 }
 
-// Helper function to measure text width
-function getTextWidth(text, style) {
-  const canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement('canvas'));
-  const context = canvas.getContext('2d');
-  const font = style.font || `${style.fontWeight} ${style.fontSize} ${style.fontFamily}`;
-  context.font = font;
-  return context.measureText(text).width;
-}
-
-function setListeners(div, position, useSticky, restrictedColClass = '') {
-  // resizable 속성을 사용할 때에 이벤트
-  let curCol;
-  let pageX;
-  let curColWidth;
-
-  const onMouseMove = e => {
-    if (!curCol) return false;
-
-    const isRestricted = curCol.classList.contains(restrictedColClass);
-
-    const diffX = e.pageX - pageX;
-    let calcWidth = '';
-
-    const isStickyLeft = position === 'right';
-
-    if (isStickyLeft) {
-      if (isRestricted && curColWidth + diffX <= restrictedMinWidth) {
-        calcWidth = restrictedMinWidth; // 제한된 컬럼은 최소 너비로 설정
-      } else {
-        calcWidth = curColWidth + diffX;
+export function useResizable() {
+  function setListeners(div, position, useSticky) {
+    // resizable 속성을 사용할 때에 이벤트
+    let curCol;
+    let pageX;
+    let curColWidth;
+
+    const onMouseMove = e => {
+      if (!curCol) return false;
+
+      const diffX = e.pageX - pageX;
+      const isStickyLeft = position === 'right';
+      let calcWidth = isStickyLeft ? curColWidth + diffX : curColWidth - diffX;
+
+      const computedStyles = window.getComputedStyle(curCol);
+      const min = parseInt(computedStyles.minWidth || `${MIN_COL_WIDTH}`, 10);
+      const max = parseInt(
+        computedStyles.maxWidth === 'none' ? '9999' : computedStyles.maxWidth || '9999',
+        10,
+      );
+      calcWidth = Math.max(min, Math.min(calcWidth, max));
+      curCol.style.width = `${calcWidth}px`;
+
+      if (useSticky && curCol) {
+        const table = curCol.closest('table').parentElement;
+        detectStickyWidth(table, position === 'right');
       }
-    } else {
-      calcWidth = curColWidth - diffX;
-    }
-
-    if (calcWidth < 40) {
-      calcWidth = 40; // 최소 너비 제한
-    }
 
-    curCol.style.width = `${calcWidth}px`;
-    curCol.style.minWidth = `${calcWidth}px`;
-    curCol.style.maxWidth = `${calcWidth}px`;
-
-    if (useSticky && curCol) {
-      const table = curCol.closest('table').parentElement;
-      detectStickyWidth(table, position === 'right');
-    }
-
-    return true;
-  };
-
-  const onMouseUp = () => {
-    curCol = undefined;
-    pageX = undefined;
-    curColWidth = undefined;
-    document.removeEventListener('mousemove', onMouseMove);
-    document.removeEventListener('mouseup', onMouseUp);
-  };
+      return true;
+    };
+
+    const onMouseUp = () => {
+      curCol = undefined;
+      pageX = undefined;
+      curColWidth = undefined;
+      document.removeEventListener('mousemove', onMouseMove);
+      document.removeEventListener('mouseup', onMouseUp);
+    };
+
+    const onMouseDown = e => {
+      curCol = e.target.parentElement;
+      pageX = e.pageX;
+      curColWidth = curCol.offsetWidth;
+      document.addEventListener('mousemove', onMouseMove, { passive: true });
+      document.addEventListener('mouseup', onMouseUp, { passive: true });
+    };
+
+    div.addEventListener('mousedown', onMouseDown, { passive: true });
+  }
 
-  const onMouseDown = e => {
-    curCol = e.target.parentElement;
-    pageX = e.pageX;
-    curColWidth = curCol.offsetWidth;
-    document.addEventListener('mousemove', onMouseMove, { passive: true });
-    document.addEventListener('mouseup', onMouseUp, { passive: true });
-  };
+  function appendResizableDiv(col, direction, useSticky) {
+    const div = createDiv(direction);
+    col.appendChild(div);
+    setListeners(div, direction, useSticky);
+  }
 
-  div.addEventListener('mousedown', onMouseDown, { passive: true });
-}
+  function getTableCols(tableEl) {
+    if (!tableEl) return [];
+    const tableElement = tableEl.getElementsByTagName('table')[0];
+    if (!tableElement) return [];
+    const firstRow = tableElement.getElementsByTagName('tr')[0];
+    return firstRow ? Array.from(firstRow.children) : [];
+  }
 
-function appendResizableDiv(col, direction, useSticky, restrictedColClass = '') {
-  const div = createDiv(direction);
-  col.appendChild(div);
-  setListeners(div, direction, useSticky, restrictedColClass);
-}
+  function applyStickyToColumn(tableEl, colIdx, isLeft, offsetPx) {
+    const rows = Array.from(tableEl.querySelectorAll('tr'));
 
-function getTableCols(tableEl) {
-  const tableElement = tableEl.getElementsByTagName('table')[0];
-  const firstRow = tableElement.getElementsByTagName('tr')[0];
-  return firstRow ? Array.from(firstRow.children) : [];
-}
+    rows.forEach(row => {
+      const cells = Array.from(row.children);
+      const targetCell = cells[colIdx];
+      if (!targetCell) return;
 
-function addResizable(tableRef, stickyColumnsConfig = {}) {
-  const cols = getTableCols(tableRef.value.$el);
+      targetCell.classList.add('sticky-cell');
+      targetCell.classList.add(isLeft ? 'left' : 'right');
+      targetCell.style.position = 'sticky';
+      targetCell.style[isLeft ? 'left' : 'right'] = offsetPx;
+    });
+  }
 
-  const leftStickyCount = stickyColumnsConfig.leftStickyCount || 0;
-  const rightStickyCount = stickyColumnsConfig.rightStickyCount || 0;
+  function addResizable(tableRef, stickyColumnsConfig = {}, useLastCellResizable = false) {
+    const cols = getTableCols(tableRef.value.$el);
+    const leftStickyCount = stickyColumnsConfig.leftStickyCount || 0;
+    const rightStickyCount = stickyColumnsConfig.rightStickyCount || 0;
 
-  cols.forEach((col, colIdx) => {
-    const isLastCol = colIdx >= cols.length - 1;
-    const isFirstCol = colIdx === 0;
     const isSelectTable = tableRef.value.$el.classList.contains('s-select-table');
 
-    // 🔑 스티키 컬럼이라면 리사이즈 핸들 생성 금지
-    const isLeftSticky = colIdx < leftStickyCount;
-    const isRightSticky = colIdx >= cols.length - rightStickyCount;
+    cols.forEach((col, colIdx) => {
+      const isFirstCol = colIdx === 0;
+      const isLastCol = colIdx === cols.length - 1;
+      const isLeftSticky = colIdx < leftStickyCount;
+      const isRightSticky = colIdx >= cols.length - rightStickyCount;
 
-    if (isLeftSticky || isRightSticky) {
-      return; // 스티키 컬럼이면 appendResizableDiv 호출하지 않음
-    }
+      // 🔑 스티키 컬럼이라면 리사이즈 핸들 생성 금지!! appendResizableDiv 호출하지 않음
+      if (isLeftSticky || isRightSticky) return;
+
+      const shouldAddResizable = (() => {
+        if (isSelectTable) {
+          if (useLastCellResizable && isLastCol) return true;
+          return !isFirstCol && !isLastCol;
+        }
+        return useLastCellResizable ? !isLastCol : true;
+      })();
 
-    // 나머지 컬럼만 리사이즈 핸들 생성
-    if (isSelectTable) {
-      if (!isFirstCol && !isLastCol) {
+      if (shouldAddResizable) {
         appendResizableDiv(col, 'right', false);
       }
-    } else if (!isLastCol) {
-      appendResizableDiv(col, 'right', false);
-    }
-  });
-}
-
-function applyStickyToColumn(tableEl, colIdx, isLeft, offsetPx) {
-  const rows = Array.from(tableEl.querySelectorAll('tr'));
-
-  rows.forEach(row => {
-    const cells = Array.from(row.children);
-    const targetCell = cells[colIdx];
-    if (!targetCell) return;
-
-    targetCell.classList.add('sticky-cell');
-    targetCell.classList.add(isLeft ? 'left' : 'right');
-    targetCell.classList.add(`sticky-col-${colIdx}`);
-
-    targetCell.style.position = 'sticky';
-
-    if (isLeft) {
-      targetCell.style.left = offsetPx;
-    } else {
-      targetCell.style.right = offsetPx;
-    }
-  });
-}
-
-function addStickyColumn(tableRef, stickyColumnsConfig) {
-  const { isStickyLeft, isStickyRight, leftStickyCount, rightStickyCount } = stickyColumnsConfig;
+    });
+  }
 
-  const cols = getTableCols(tableRef.value.$el);
-  const isSelectTable = tableRef.value.$el.classList.contains('s-select-table');
-  const restrictedColClass = `sticky-col-${isSelectTable ? leftStickyCount : leftStickyCount - 1}`;
+  function addStickyColumn(tableRef, stickyColumnsConfig) {
+    const { leftStickyCount, rightStickyCount } = stickyColumnsConfig;
 
-  // Left Sticky Columns
-  if (isStickyLeft && leftStickyCount > 0) {
-    // let i = isSelectTable ? 1 : 0; // Select Table일 경우 첫번째 컬럼은 스티키가 아님
-    const count = isSelectTable ? leftStickyCount + 1 : leftStickyCount; // Select Table일 경우 +1
+    const cols = getTableCols(tableRef.value.$el);
+    const isSelectTable = tableRef.value.$el.classList.contains('s-select-table');
 
-    for (let i = 0; i < count; i++) {
-      applyStickyToColumn(tableRef.value.$el, i, true, '0px');
-      if (isSelectTable && i > 0) {
-        appendResizableDiv(cols[i], 'right', true, restrictedColClass); // 오른쪽에 리사이즈 핸들 추가
-        if (i === count - 1) {
-          restrictedMinWidth = cols[i].style.width.replace('px', ''); // 마지막 스티키 컬럼의 최소 너비 저장
-        }
-      } else {
-        appendResizableDiv(cols[i], 'right', true, restrictedColClass); // 오른쪽에 리사이즈 핸들 추가
-        if (i === count - 1) {
-          restrictedMinWidth = cols[i].style.width.replace('px', ''); // 마지막 스티키 컬럼의 최소 너비 저장
+    // Left Sticky Columns
+    if (leftStickyCount > 0) {
+      // let i = isSelectTable ? 1 : 0; // Select Table일 경우 첫번째 컬럼은 스티키가 아님
+      const count = isSelectTable ? leftStickyCount + 1 : leftStickyCount; // Select Table일 경우 +1
+
+      for (let i = 0; i < count; i++) {
+        applyStickyToColumn(tableRef.value.$el, i, true, '0px');
+        if (isSelectTable && i > 0) {
+          appendResizableDiv(cols[i], 'right', true); // 오른쪽에 리사이즈 핸들 추가
+        } else {
+          appendResizableDiv(cols[i], 'right', true); // 오른쪽에 리사이즈 핸들 추가
         }
       }
+
+      detectStickyWidth(tableRef.value.$el, true); // 좌측 스티키 너비 재계산
     }
 
-    detectStickyWidth(tableRef.value.$el, true); // 좌측 스티키 너비 재계산
-  }
+    // Right Sticky Columns
+    if (rightStickyCount > 0) {
+      for (let i = cols.length - rightStickyCount; i < cols.length; i++) {
+        applyStickyToColumn(tableRef.value.$el, i, false, '0px');
+        appendResizableDiv(cols[i], 'left', true); // 왼쪽에 리사이즈 핸들 추가 (우측 스티키)
+      }
 
-  // Right Sticky Columns
-  if (isStickyRight && rightStickyCount > 0) {
-    for (let i = cols.length - rightStickyCount; i < cols.length; i++) {
-      applyStickyToColumn(tableRef.value.$el, i, false, '0px');
-      appendResizableDiv(cols[i], 'left', true); // 왼쪽에 리사이즈 핸들 추가 (우측 스티키)
+      detectStickyWidth(tableRef.value.$el, false); // 우측 스티키 너비 재계산
     }
-
-    detectStickyWidth(tableRef.value.$el, false); // 우측 스티키 너비 재계산
   }
-}
-
-export function useResizable() {
   return {
     addResizable,
     addStickyColumn,