@ncds/ui-admin 1.3.0 → 1.5.0

package/dist/cjs/assets/scripts/comboBox.js

@@ -0,0 +1,280 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ComboBox = void 0;
+var _UnifiedSelectBox = require("./utils/selectbox/UnifiedSelectBox");
+var __assign = void 0 && (void 0).__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+var __spreadArray = void 0 && (void 0).__spreadArray || function (to, from, pack) {
+  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+    if (ar || !(i in from)) {
+      if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+      ar[i] = from[i];
+    }
+  }
+  return to.concat(ar || Array.prototype.slice.call(from));
+};
+var ComboBox = exports.ComboBox = /** @class */function () {
+  function ComboBox(element, config) {
+    if (config === void 0) {
+      config = {};
+    }
+    var _this = this;
+    var _a, _b, _c, _d, _e, _f;
+    this.targetSelect = null;
+    this.isInitializing = true;
+    this.lastValue = '';
+    this.element = element;
+    // 타겟 select 요소 찾기
+    this.targetSelect = this.findTargetSelect(element);
+    // HTML에서 옵션 파싱 (config.options가 없을 경우)
+    var htmlOptions = this.parseOptionsFromHTML();
+    // JavaScript 옵션을 DropdownOption 형식으로 변환 (이제 구조가 동일하므로 단순 복사)
+    var normalizedOptions = config.options ? __spreadArray([], config.options, true) : htmlOptions;
+    var finalOptions = normalizedOptions;
+    // HTML에서 속성 파싱
+    var htmlAttributes = this.parseAttributesFromHTML();
+    // 기존 API를 새 API로 변환
+    var unifiedConfig = __assign(__assign({}, config), {
+      type: 'combobox',
+      multiple: (_a = config.multiple) !== null && _a !== void 0 ? _a : false,
+      showFooterButtons: (_b = config.showFooterButtons) !== null && _b !== void 0 ? _b : false,
+      onSelectAll: config.onSelectAll,
+      onSearchAll: config.onSearchAll,
+      onComplete: config.onComplete,
+      onScrollBottom: config.onScrollBottom,
+      searchDebounceMs: config.searchDebounceMs,
+      options: finalOptions,
+      placeholder: config.placeholder || htmlAttributes.placeholder || '검색하고 선택하세요',
+      value: (_d = (_c = config.value) !== null && _c !== void 0 ? _c : htmlAttributes.value) !== null && _d !== void 0 ? _d : config.multiple ? [] : '',
+      disabled: (_f = (_e = config.disabled) !== null && _e !== void 0 ? _e : htmlAttributes.disabled) !== null && _f !== void 0 ? _f : false,
+      size: config.size || htmlAttributes.size || 'md',
+      onChange: function (value) {
+        var _a;
+        // 초기화 중에는 동기화하지 않음 (무한 루프 방지)
+        if (_this.isInitializing) {
+          _this.lastValue = value;
+          return;
+        }
+        // 값이 실제로 변경되지 않았으면 동기화 생략 (무한 루프 방지)
+        if (JSON.stringify(_this.lastValue) === JSON.stringify(value)) {
+          return;
+        }
+        _this.lastValue = value;
+        // 타겟 select와 동기화
+        if (config.multiple) {
+          _this.syncWithTargetSelectMultiple(value);
+        } else {
+          _this.syncWithTargetSelect(value);
+        }
+        (_a = config.onChange) === null || _a === void 0 ? void 0 : _a.call(config, value);
+      }
+    });
+    this.unifiedSelectBox = new _UnifiedSelectBox.UnifiedSelectBox(element, unifiedConfig);
+    // 초기화 완료 (다음 이벤트 루프에서 실행)
+    setTimeout(function () {
+      _this.isInitializing = false;
+    }, 0);
+  }
+  /**
+   * 타겟 select 요소 찾기
+   */
+  ComboBox.prototype.findTargetSelect = function (element) {
+    // 1. 직접 select 태그인 경우
+    if (element.tagName === 'SELECT') {
+      return element;
+    }
+    // 2. 자식으로 select 태그가 있는 경우
+    var selectChild = element.querySelector('select');
+    if (selectChild) {
+      return selectChild;
+    }
+    // 3. data-target 속성으로 지정된 경우
+    var targetId = element.getAttribute('data-target');
+    if (targetId) {
+      var targetElement = document.getElementById(targetId);
+      if (targetElement && targetElement.tagName === 'SELECT') {
+        return targetElement;
+      }
+    }
+    return null;
+  };
+  /**
+   * HTML select에서 옵션 파싱
+   */
+  ComboBox.prototype.parseOptionsFromHTML = function () {
+    if (!this.targetSelect) return [];
+    var options = [];
+    var optionElements = this.targetSelect.querySelectorAll('option');
+    optionElements.forEach(function (optionElement) {
+      if (optionElement.value) {
+        // value가 있는 옵션만 추가
+        options.push({
+          id: optionElement.value,
+          label: optionElement.textContent || optionElement.value,
+          disabled: optionElement.disabled
+        });
+      }
+    });
+    return options;
+  };
+  /**
+   * HTML에서 속성 파싱
+   */
+  ComboBox.prototype.parseAttributesFromHTML = function () {
+    var attributes = {};
+    if (this.targetSelect) {
+      // select 요소의 속성들
+      if (this.targetSelect.disabled) attributes.disabled = true;
+      if (this.targetSelect.value) attributes.value = this.targetSelect.value;
+      // placeholder는 첫 번째 빈 option에서 가져오기
+      var firstOption = this.targetSelect.querySelector('option[value=""], option:not([value])');
+      if (firstOption) {
+        attributes.placeholder = firstOption.textContent || '검색하고 선택하세요';
+      }
+    }
+    // 컨테이너 요소의 data 속성들
+    var containerAttributes = this.element.dataset;
+    if (containerAttributes.placeholder) attributes.placeholder = containerAttributes.placeholder;
+    if (containerAttributes.size) attributes.size = containerAttributes.size;
+    if (containerAttributes.disabled === 'true') attributes.disabled = true;
+    return attributes;
+  };
+  /**
+   * 타겟 select와 동기화 (Single 모드)
+   */
+  ComboBox.prototype.syncWithTargetSelect = function (value) {
+    if (this.targetSelect) {
+      this.targetSelect.value = String(value);
+      // select 요소의 change 이벤트 발생
+      var event_1 = new Event('change', {
+        bubbles: true
+      });
+      this.targetSelect.dispatchEvent(event_1);
+    }
+  };
+  /**
+   * 타겟 select와 동기화 (Multiple 모드)
+   */
+  ComboBox.prototype.syncWithTargetSelectMultiple = function (values) {
+    var _this = this;
+    if (this.targetSelect && this.targetSelect.multiple) {
+      // 모든 옵션 선택 해제
+      Array.from(this.targetSelect.options).forEach(function (option) {
+        option.selected = false;
+      });
+      // 선택된 값들에 해당하는 옵션들 선택
+      values.forEach(function (value) {
+        var option = _this.targetSelect.querySelector("option[value=\"".concat(value, "\"]"));
+        if (option) {
+          option.selected = true;
+        }
+      });
+      // select 요소의 change 이벤트 발생
+      var event_2 = new Event('change', {
+        bubbles: true
+      });
+      this.targetSelect.dispatchEvent(event_2);
+    }
+  };
+  // 기존 API 호환성 메서드들
+  ComboBox.prototype.getValues = function () {
+    return this.unifiedSelectBox.getValues();
+  };
+  ComboBox.prototype.getOptions = function () {
+    return this.unifiedSelectBox.getOptions();
+  };
+  ComboBox.prototype.setValues = function (value) {
+    // 옵션 객체 배열에서 id 배열로 변환하여 lastValue 비교
+    var ids = value.map(function (option) {
+      return option.id;
+    });
+    var valueForComparison = this.unifiedSelectBox.isMultiple() ? ids : ids[0] || '';
+    // 값이 변경되지 않았으면 무시
+    if (JSON.stringify(this.lastValue) === JSON.stringify(valueForComparison)) {
+      return;
+    }
+    this.lastValue = valueForComparison;
+    this.unifiedSelectBox.setValues(value);
+    // setValues 호출 시에도 타겟 select와 동기화
+    if (this.targetSelect) {
+      if (this.unifiedSelectBox.isMultiple()) {
+        this.syncWithTargetSelectMultiple(ids);
+      } else {
+        this.syncWithTargetSelect(ids[0] || '');
+      }
+    }
+  };
+  ComboBox.prototype.updateOptions = function (newOptions) {
+    this.unifiedSelectBox.updateOptions(newOptions);
+  };
+  ComboBox.prototype.setDisabled = function (disabled) {
+    this.unifiedSelectBox.setDisabled(disabled);
+  };
+  ComboBox.prototype.open = function () {
+    this.unifiedSelectBox.open();
+  };
+  ComboBox.prototype.close = function () {
+    this.unifiedSelectBox.close();
+  };
+  ComboBox.prototype.focus = function () {
+    this.unifiedSelectBox.focus();
+  };
+  ComboBox.prototype.destroy = function () {
+    this.unifiedSelectBox.destroy();
+  };
+  // ComboBox 특화 메서드들
+  ComboBox.prototype.clearInput = function () {
+    // UnifiedSelectBox의 handleClearInput과 동일한 로직
+    this.unifiedSelectBox.close();
+  };
+  ComboBox.prototype.getDebugInfo = function () {
+    return this.unifiedSelectBox.getDebugInfo();
+  };
+  // Multiple 모드 전용 메서드들
+  ComboBox.prototype.selectAll = function () {
+    this.unifiedSelectBox.selectAll();
+  };
+  ComboBox.prototype.deselectAll = function () {
+    this.unifiedSelectBox.deselectAll();
+  };
+  ComboBox.prototype.getSelectedCount = function () {
+    var value = this.getValues();
+    return Array.isArray(value) ? value.length : value ? 1 : 0;
+  };
+  ComboBox.prototype.isMultiple = function () {
+    return this.unifiedSelectBox.isMultiple();
+  };
+  ComboBox.prototype.toggleSelectAll = function () {
+    this.unifiedSelectBox.toggleSelectAll();
+  };
+  /**
+   * 드롭다운을 스크롤의 바닥으로 이동
+   */
+  ComboBox.prototype.scrollToBottom = function () {
+    this.unifiedSelectBox.scrollToBottom();
+  };
+  /**
+   * 전체 선택 버튼의 텍스트를 외부에서 변경
+   */
+  ComboBox.prototype.setSelectAllButtonText = function (text) {
+    this.unifiedSelectBox.setSelectAllButtonText(text);
+  };
+  /**
+   * 특정 인덱스의 옵션으로 포커스 이동
+   */
+  ComboBox.prototype.setFocusIndex = function (index) {
+    this.unifiedSelectBox.setFocusIndex(index);
+  };
+  return ComboBox;
+}();