jobdone-shared-files 1.0.17 → 1.0.19

package/README.md

@@ -401,7 +401,6 @@ import OOXX from '../../node_modules/jobdone-shared-files/OOXX.vue';
 | LayoutProject     | Project 使用的共用樣式，含開合雙欄樣式 | 是                        |
 | LayoutSinglePage  | 單頁版面的樣式，如：登入、錯誤頁、條款等    | 是                        |
 | LayoutTwoColumn   | 雙欄可開合樣式                 | 是                        |
-| LayoutMobile      | 針對 (底層) 手機的共用樣式         | 是                        |
 | LayoutDocs        | 針對條文調整的樣式               | 否                       |
 | LayoutInnerColumn | 針對 Project 雙欄樣式內的雙欄樣式   | 否                       |
 | LayoutOutside     | 針對 (底層) Project 外的共用樣式  | 否                       |

package/package.json

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

package/style/scss/Common/SelectableTable.scss

@@ -3,7 +3,6 @@
 @import "../../../../bootstrap/scss/mixins";
 @import "../Settings/custom-variables";
 @import "../Settings/Mixins";
-
 th.bg-secondary{
     position: relative;
     &:after{
@@ -21,9 +20,12 @@ th.bg-secondary{
     background-color: $white;
 }
 
-tr:has(input[type="checkbox"]:checked) > td:not([scope="col"]){
+tr:has(.tr-check:checked) > td:not([scope="col"]){
+    --active-bg: #f0f1fe;
+
     --bs-table-accent-bg: transparent;
-    --bs-table-bg: rgba(var(--bs-primary-rgb), .1);
+    --bs-table-bg: transparent;
+    --bs-table-bg-type: var(--active-bg);
     color: var(--bs-table-hover-color);
 }
 

package/treeItem.vue

@@ -1,7 +1,7 @@
 <template>
     <li class="tree-item" :class="[itemClass]">
         <div class="card flex-row d-flex input-group flex-nowrap">
-            <button type="button" class="btn text-primary border-end px-1" :disabled="!item.children" data-bs-toggle="collapse" :data-bs-target="'#collapse-'+item.id">
+            <button type="button" class="btn text-primary border-end px-1" :disabled="!item.children || item.children.length == 0" data-bs-toggle="collapse" :data-bs-target="'#collapse-'+item.id">
                 <span class="material-icons">arrow_drop_down</span>
                 <slot name="icon-start"></slot>
             </button>

package/style/scss/Layout/LayoutMobile.scss

@@ -1,207 +0,0 @@
-@import "../../../../bootstrap/scss/functions";
-@import "../Settings/bs-variables";
-@import "../../../../bootstrap/scss/mixins";
-@import "../Settings/custom-variables";
-@import "../Settings/Mixins";
-@import "../Common/Animation.scss";
-@import "../Settings/MobileVariables";
-
-@media only screen and (max-width: 768px) {
-    // default layout ---------------------------------------------
-    
-    html, body, #app{
-        min-height: 100%;
-    }
-    
-    html{
-        position: relative;
-        &:before{
-            content: "";
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            z-index: -1;
-            background: $gradient-bg;
-            background-repeat: no-repeat;
-            pointer-events: none;
-        }
-    }
-    
-    body{
-        background: transparent;
-        scroll-behavior: smooth;
-    }
-    
-    #app{
-        width: 100%;
-        max-width: 767px;
-        transition: 1s;
-    }
-    
-    // background ---------------------------------------------
-    
-    .bg-gradient-main, .bg-gradient-main-translucent{
-        color: rgba( $white, .7 );
-        .text-emphasis{
-            color: $white;
-        }
-    }
-    
-    .bg-gradient-main{
-        background: $gradient-main;
-    }
-    
-    .bg-gradient-main-translucent{
-        background: $gradient-main-translucent;
-        backdrop-filter: $backdrop-blur-base;
-    }
-    
-    .bg-dark-translucent{
-        background-color: rgba( 0, 22, 44, .8 );
-        backdrop-filter: $backdrop-blur-base;
-    }
-    
-    .bg-light-translucent{
-        background-color: rgba( $white, .5 );
-        backdrop-filter: $backdrop-blur-base;
-    }
-    
-    .bg-extend{
-        position: relative;
-        &:before{
-            content: "";
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            z-index: -1;
-            height: 3rem;
-        }
-    }
-    
-    .bg-extend-gradient-main-translucent{
-        &:before{
-            background: $gradient-main-translucent;
-        }
-    }
-    
-    // navbar ---------------------------------------------
-    
-    .navbar-main{
-        color: $gray-500;
-    }
-    
-    // width ---------------------------------------------
-    
-    .w-85{
-        width: 85% !important;
-    }
-    
-    .w-min-3rem{
-        min-width: 3rem;
-    }
-    
-    // font size ---------------------------------------------
-    
-    .fs-min{
-        font-size: 12px;
-    }
-    
-    // button ---------------------------------------------
-    
-    .btn-glow{
-        background-image: $gradient-glow;
-    }
-    
-    .btn-glow-2end{
-        --bs-btn-color: #fff;
-        --bs-btn-hover-color: #fff;
-        --bs-btn-border-color: rgba(255, 255, 255, 0.5);
-        --bs-btn-hover-border-color: rgba(255, 255, 255, 0.3);
-        background: $gradient-glow-2end;
-    }
-    
-    // input ---------------------------------------------
-    
-    
-    // input-group-icon
-    .input-group-icon{
-        $padding-left: 2rem;
-    
-        position: relative;
-        .material-icons, .input-group-placeholder{
-            position: absolute;
-            top: 50%;
-            transform: translateY(-50%);
-            z-index: 6;
-        }
-        .material-icons{
-            left: 0.6rem;
-        }
-        .input-group-placeholder{
-            left: $padding-left;
-        }
-        .form-control{
-            &:-webkit-date-and-time-value{
-                text-align: left;
-            }
-            &:nth-child(1){
-                padding-left: $padding-left;
-            }
-        }
-    }
-    
-    
-    // animation ---------------------------------------------
-    
-    .fadeIn{
-        animation-name: fadeIn;
-        animation-duration: 1s;
-    }
-    
-    // image ---------------------------------------------
-    
-    .thumbnail-circle{
-        border: 3px solid rgba($white, .3);
-        border-radius: 50%;
-        &-sm{
-            border-width: 2px;
-        }
-    }
-    
-    
-    // scroll ---------------------------------------------
-    
-    .overflow-y-auto{
-        overscroll-behavior: contain;
-    }
-    
-    .body-opened-modal{
-        // position: fixed;
-        overflow: hidden;
-        .bg-gradient-main-translucent, .bg-dark-translucent, .bg-light-translucent{
-            backdrop-filter: unset;
-        }
-    }
-    
-    .backdrop-filter-none{
-        backdrop-filter: unset;
-    }
-    
-    // list-group-item ---------------------------------------------
-    
-    .list-group-item{
-        outline: none !important;
-    }
-    
-    
-    // reset ---------------------------------------------
-    
-    @media only screen and (max-width: 992px) {
-        body{
-            overflow: visible;
-        }
-    }
-}