jobdone-shared-files 1.1.15 → 1.1.17

package/ModalFileRepositorySelector.vue

@@ -15,7 +15,7 @@
                             <small><span>已選擇</span><span class="text-primary mx-1">{{ selectedFilesSet.size
                             }}</span><span>個檔案</span></small>
                             <button class="btn btn-link btn-sm" @click='clearSelected'><span
-                                    class="material-icons me-1">close</span>取消選取</button>
+                                    class="material-icons me-1">close</span><span>取消選取</span></button>
                         </div>
                     </template>
                     <template v-else>

package/common/ModalSetup.js

@@ -1,14 +1,19 @@
 import Modal from 'bootstrap/js/dist/modal.js';
+import Offcanvas from 'bootstrap/js/dist/offcanvas.js';
 
 /** 移除焦點Function */
 const blurHandler = () => {
     document.activeElement && document.activeElement.blur();
 };
 
-/** 取得與 DOM 元素關聯的Modal實例，或在未初始化的情況下建立新的Modal實例。
+/** 取得與 DOM 元素關聯的Modal或Offcanvas實例，或在未初始化的情況下建立新的實例。
  * @param { HTMLElement } modalDom 光箱的DOM
+ * @param { String } uiStyle UI樣式，"modal" 或 "offcanvas"
  */
-export const getOrCreateInstance = (modalDom) => {
+export const getOrCreateInstance = (modalDom, uiStyle = "modal") => {
+    if (uiStyle === "offcanvas") {
+        return Offcanvas.getOrCreateInstance(modalDom);
+    }
     return Modal.getOrCreateInstance(modalDom);
 }
 
@@ -17,12 +22,13 @@ export const getOrCreateInstance = (modalDom) => {
  * @param { HTMLElement } modalDom 光箱的DOM
  * @param { Function } modalHiddenFun 關閉光箱後的回調函數(等待 CSS 轉換完成後執行)
  * @param { Boolean } hidePrevented static = true 時，使用者點選黑色遮罩被阻止關閉光箱時的回調函數
+ * @param { String } uiStyle 指定UI樣式，預設為 "modal"，可選 "offcanvas"
  */
-export const modalShow = (modalDom, modalHiddenFun, hidePreventedFun) => {
+export const modalShow = (modalDom, modalHiddenFun, hidePreventedFun, uiStyle = "modal") => {
     const removeEventListeners = () => {
-        modalDom.removeEventListener('hide.bs.modal', blurHandler);
-        modalDom.removeEventListener('hidden.bs.modal', afterCloseModalFun);
-        modalDom.removeEventListener('hidePrevented.bs.modal', hidePreventedFun);
+        modalDom.removeEventListener(`hide.bs.${uiStyle}`, blurHandler);
+        modalDom.removeEventListener(`hidden.bs.${uiStyle}`, afterCloseModalFun);
+        modalDom.removeEventListener(`hidePrevented.bs.${uiStyle}`, hidePreventedFun);
     }
 
     const afterCloseModalFun = () => {
@@ -35,22 +41,24 @@ export const modalShow = (modalDom, modalHiddenFun, hidePreventedFun) => {
     // 先移除事件監聽，避免重複添加
     removeEventListeners();
 
-    modalDom.addEventListener('hide.bs.modal', blurHandler); // 關閉光箱時需移除焦點，避免aria-hidden="true"的元素仍然有焦點
-    modalDom.addEventListener('hidden.bs.modal', afterCloseModalFun);
+    modalDom.addEventListener(`hide.bs.${uiStyle}`, blurHandler); // 關閉光箱時需移除焦點，避免aria-hidden="true"的元素仍然有焦點
+    modalDom.addEventListener(`hidden.bs.${uiStyle}`, afterCloseModalFun);
     if (hidePreventedFun && typeof hidePreventedFun === 'function') {
-        modalDom.addEventListener('hidePrevented.bs.modal', hidePreventedFun);
+        modalDom.addEventListener(`hidePrevented.bs.${uiStyle}`, hidePreventedFun);
     }
 
-    getOrCreateInstance(modalDom).show();
+    getOrCreateInstance(modalDom, uiStyle).show();
 };
 
 /**
  * 手動關閉光箱
  * @param { HTMLElement } modalDom 光箱的DOM
+ * @param { String } uiStyle UI樣式，"modal" 或 "offcanvas"
+ * @param { Boolean } dispose 是否銷毀實例
  */
-export const modalHide = (modalDom, dispose = false) => {
-    getOrCreateInstance(modalDom).hide();
+export const modalHide = (modalDom, uiStyle = "modal", dispose = false) => {
+    getOrCreateInstance(modalDom, uiStyle).hide();
     if (dispose) {
-        getOrCreateInstance(modalDom).dispose();
+        getOrCreateInstance(modalDom, uiStyle).dispose();
     }
 }

package/index.js

@@ -3,13 +3,22 @@ import tagEditor from "./tagEditor.vue";
 import tree from "./tree.vue";
 import vueLoadingOverlay from "./vueLoadingOverlay.vue";
 import projectNavbar from "./ProjectManagement/projectNavbar.vue";
+import { modalShow, modalHide } from "./common/ModalSetup";
+import ModalFileRepositorySelector from "./ModalFileRepositorySelector.vue";
+import autocompleteSelect from "./autocompleteSelect.vue";
 
 export default {
     paginate,
     tagEditor,
     tree,
     vueLoadingOverlay,
+    ModalFileRepositorySelector,
+    autocompleteSelect,
 
     // ProjectManagement
-    projectNavbar
+    projectNavbar,
+
+    // Common
+    modalShow,
+    modalHide,
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jobdone-shared-files",
-  "version": "1.1.15",
+  "version": "1.1.17",
   "description": "Shared JS and SCSS for Jobdone Enterprise.",
   "main": "index.js",
   "scripts": {

package/style/scss/Components/ModalFileRepository.scss

@@ -1,4 +1,16 @@
 #ModalFileRepository {
+    .btn>* {
+        vertical-align: middle;
+    }
+
+    .btn-link {
+        text-decoration: none;
+
+    }
+    .material-icons {
+        font-size: inherit;
+    }
+
     &.modal.sub-modal {
         backdrop-filter: none;
         background-color: rgba(#000000, 0.1);