jobdone-shared-files 1.1.19 → 1.1.20-beta.2

package/package.json

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

package/styleNew/README.md

@@ -0,0 +1,83 @@
+# Dart Sass 升級指南
+
+本專案已將所有 SCSS 檔案從舊版 LibSass 語法升級至 Dart Sass 語法。
+
+## 主要變更
+
+### 1. @import 替換為 @use
+- ❌ 舊版: `@import "file"`
+- ✅ 新版: `@use "file" as *` 或 `@use "file"`
+
+### 2. 顏色函數更新
+- ❌ 舊版: `lighten($color, 20%)`
+- ✅ 新版: `color.adjust($color, $lightness: 20%)`
+
+- ❌ 舊版: `darken($color, 20%)`  
+- ✅ 新版: `color.adjust($color, $lightness: -20%)`
+
+- ❌ 舊版: `mix($color1, $color2)`
+- ✅ 新版: `color.mix($color1, $color2)`
+
+### 3. 數學函數 (如需要)
+- ❌ 舊版: `$width / 2`
+- ✅ 新版: `math.div($width, 2)` 或直接使用 `calc($width / 2)`
+
+## 檔案結構
+
+```
+styleNew/
+├── css/
+│   └── vue-loading-overlay/
+│       └── index.css (未變更)
+└── scss/
+    ├── Common/
+    │   ├── Animation.scss
+    │   ├── filepond.scss
+    │   ├── SelectableTable.scss
+    │   ├── thumbnail-group.scss
+    │   └── Tree.scss
+    ├── Components/
+    │   └── ModalFileRepository.scss
+    ├── Layout/
+    │   ├── LayoutBase.scss
+    │   ├── LayoutInnerColumn.scss
+    │   ├── LayoutProject.scss
+    │   ├── LayoutSinglePage.scss
+    │   └── LayoutTwoColumn.scss
+    └── Settings/
+        ├── _bs-variables.scss
+        ├── _bs-variables-dark.scss
+        ├── _color-mode.scss
+        ├── _custom-variables.scss
+        ├── _Mixins.scss
+        └── _MobileVariables.scss
+```
+
+## 重要提醒
+
+1. **原始檔案未被修改** - 所有舊版檔案仍保留在 `style/` 資料夾中
+2. **Bootstrap 相容性** - 使用 `@use` 時需確保 Bootstrap 版本支援 Dart Sass
+3. **命名空間** - 使用 `@use "file" as *` 可以不使用命名空間，直接存取變數和 mixin
+
+## 編譯方式
+
+使用 Dart Sass 編譯：
+```bash
+sass styleNew/scss/Layout/LayoutBase.scss output.css
+```
+
+## 注意事項
+
+- Dart Sass 不再支援 `/` 作為除法運算子，請使用 `math.div()` 或 `calc()`
+- `@import` 將在未來版本中完全移除，建議全面改用 `@use` 和 `@forward`
+- 顏色函數如 `lighten()`, `darken()` 已棄用，請使用 `color.adjust()` 或 `color.scale()`
+
+## 參考資源
+
+- [Dart Sass 官方文件](https://sass-lang.com/documentation)
+- [從 LibSass 遷移到 Dart Sass](https://sass-lang.com/documentation/breaking-changes)
+- [Bootstrap 5 與 Dart Sass](https://getbootstrap.com/docs/5.3/customize/sass/)
+
+---
+
+升級日期: 2025年12月24日

package/styleNew/css/vue-loading-overlay/index.css

@@ -0,0 +1,39 @@
+.vl-shown {
+  overflow: hidden;
+}
+
+.vl-overlay {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  align-items: center;
+  display: none;
+  justify-content: center;
+  overflow: hidden;
+  z-index: 9999;
+}
+
+.vl-overlay.vl-active {
+  display: flex;
+}
+
+.vl-overlay.vl-full-page {
+  z-index: 9999;
+  position: fixed;
+}
+
+.vl-overlay .vl-background {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  background: #fff;
+  opacity: 0.5;
+}
+
+.vl-overlay .vl-icon, .vl-parent {
+  position: relative;
+}

package/styleNew/scss/Common/Animation.scss

@@ -0,0 +1,10 @@
+@use "../../../../bootstrap/scss/functions" as *;
+@use "../Settings/bs-variables" as *;
+@use "../../../../bootstrap/scss/mixins" as *;
+@use "../Settings/custom-variables" as *;
+@use "../Settings/_Mixins" as *;
+
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}

package/styleNew/scss/Common/SelectableTable.scss

@@ -0,0 +1,38 @@
+@use "../../../../bootstrap/scss/functions" as *;
+@use "../Settings/bs-variables" as *;
+@use "../../../../bootstrap/scss/mixins" as *;
+@use "../Settings/custom-variables" as *;
+@use "../Settings/_Mixins" as *;
+
+th.bg-secondary{
+    position: relative;
+    &:after{
+        content: "";
+        position: absolute;
+        left: 0;
+        bottom: -$border-width;
+        height: $border-width;
+        width: 100%;
+        background-color: $secondary;
+    }
+}
+
+.table{
+    background-color: $white;
+}
+
+tr:has(.tr-check:checked) > td:not([scope="col"]){
+    --active-bg: #f0f1fe;
+
+    --bs-table-accent-bg: transparent;
+    --bs-table-bg: transparent;
+    --bs-table-bg-type: var(--active-bg);
+    color: var(--bs-table-hover-color);
+}
+
+.td-check, .td-avatar-sm{
+    width: 2rem;
+}
+.td-avatar-md{
+    width: 3rem;
+}

package/styleNew/scss/Common/Tree.scss

@@ -0,0 +1,283 @@
+@use "sass:color";
+@use "../../../../bootstrap/scss/functions" as *;
+@use "../Settings/bs-variables" as *;
+@use "../../../../bootstrap/scss/mixins" as *;
+@use "../Settings/custom-variables" as *;
+@use "../Settings/_Mixins" as *;
+
+li {
+  list-style-type: none;
+}
+
+// 基本 sizes
+.tree-item {
+  .btn {
+    --bs-btn-padding-x: 0.75em;
+    --bs-btn-padding-y: 0.375em;
+    --bs-btn-font-size: 1em;
+  }
+
+  .card {
+    --bs-card-spacer-y: 1em;
+    --bs-card-spacer-x: 1em;
+    --bs-card-title-spacer-y: 0.5em;
+    --bs-card-cap-padding-y: 0.5em;
+    --bs-card-cap-padding-x: 1em;
+    --bs-card-img-overlay-padding: 1em;
+    --bs-card-group-margin: 0.75em;
+  }
+
+  .material-icons {
+    font-size: 1.5em;
+
+    &.icon-14 {
+      font-size: 0.875em;
+    }
+
+    &.icon-18 {
+      font-size: 1.125em;
+    }
+
+    &.icon-28 {
+      font-size: 1.75em;
+    }
+
+    &.icon-32 {
+      font-size: 2em;
+    }
+  }
+}
+
+// hover效果與優化
+// firefox 暫不支援 has
+.tree-item:has([data-bs-toggle="collapse"]:hover)+.collapse {
+  will-change: height;
+}
+
+.tree-item:hover>.card,
+.tree-item .card:focus-within {
+  background-color: color.adjust($primary, $lightness: 32%);
+  border-color: rgba($primary, .4);
+}
+
+.tree-item {
+  .btn-title .material-icons:is(:empty):before {
+    content: "\e836";
+    display: inline-block;
+    font-family: inherit;
+  }
+
+  // active效果
+  &.active {
+    >.card {
+      background-color: color.adjust($primary, $lightness: 30%);
+      border-color: rgba($primary, .5);
+    }
+
+    >.card .btn-title .material-icons:is(:empty):before {
+      content: "\e837";
+    }
+
+    .btn-title {
+      color: $primary;
+    }
+  }
+}
+
+.btn-title {
+  cursor: pointer;
+
+  .btn {
+    border-radius: 0;
+
+    &:focus,
+    &:active {
+      border-color: transparent;
+    }
+  }
+
+  .btn-text {
+    width: 100%;
+    text-align: left;
+    overflow-wrap: anywhere;
+  }
+}
+
+
+// 刪除子層標示 UI
+.tree-item:has(.btn.text-danger:hover) {
+  .card {
+    background-color: color.adjust($danger, $lightness: 43%);
+    border-color: rgba($danger, .5);
+
+    .btn {
+      color: $danger;
+    }
+  }
+}
+
+// 刪除子層標示 UI (含子層)
+// .tree-child:has(.btn.text-danger:hover){
+//     .card, + .content-children .card{
+//         background-color: color.adjust($danger, $lightness: 43%);
+//         border-color: rgba( $danger, .5 );
+//         .btn{
+//             color: $danger;
+//         }
+//     }
+// }
+
+.btn-no-children {
+  cursor: auto;
+
+  &:focus {
+    border-color: transparent;
+  }
+}
+
+// 基本 style
+$card-margin: .2em;
+$line-padding: .7em;
+
+.tree-item {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  margin-top: $card-margin;
+
+  .card {
+    position: relative;
+    flex-grow: 1;
+    transition: $transition-base;
+  }
+}
+
+.col-action {
+  @include flex-center;
+  width: 2.8rem;
+}
+
+
+// 開合 style
+.btn[data-bs-toggle="collapse"] {
+  .material-icons {
+    transition: $transition-base;
+  }
+
+  &[aria-expanded="false"] .material-icons {
+    transform: rotate(-90deg);
+  }
+
+  &:disabled,
+  &.disabled {
+    border-color: transparent;
+  }
+}
+
+// 畫線 style
+.content-children {
+  padding-left: 1.5rem;
+  --tree-border-color: #fff;
+  position: relative;
+
+  &:before {
+    content: "";
+    position: absolute;
+    display: block;
+    left: -$line-padding;
+    bottom: 24px;
+    width: 1px;
+    height: 100%;
+    z-index: 1;
+    background-color: var(--tree-border-color);
+  }
+
+  // // line color
+  &:before,
+  .tree-item .card:before,
+  .tree-item .card:after {
+    background-color: var(--tree-border-color);
+  }
+}
+
+.tree-item {
+  &:last-child>.content-children:before {
+    display: none;
+  }
+
+  .card {
+    position: relative;
+
+    &:before,
+    &:after {
+      content: "";
+      position: absolute;
+      left: calc(-#{$line-padding} - #{$border-width});
+      z-index: 1;
+    }
+
+    &:before {
+      bottom: 50%;
+      width: 1px;
+      height: calc(100% + #{$card-margin}*2 + #{$border-width}*2);
+    }
+
+    &:after {
+      top: 0;
+      bottom: 0;
+      width: $line-padding;
+      height: 1px;
+      margin: auto;
+    }
+  }
+
+  &:nth-child(1)>.card:before {
+    height: calc(50% + #{$card-margin} + #{$border-width});
+  }
+}
+
+
+// 小版本
+.tree-item-sm {
+  >.card {
+    font-size: 86%;
+  }
+
+  .content-children {
+    padding-left: 1rem;
+  }
+
+  .content-children:before {
+    left: -10px;
+    bottom: 19px;
+  }
+}
+
+// .tree-item-sm + .content-children{
+//     > .children-box{
+//         padding-left: 1rem;
+//     }
+// }
+
+
+// 白背景版本
+.tree-item-in-white {
+  .content-children {
+    --tree-border-color: var(--bs-border-color);
+  }
+
+  .card {
+    --bs-card-bg: var(--gray-100);
+    --bs-card-border-color: var(--bs-border-color);
+  }
+
+  &:hover>.card,
+  .card:focus-within {
+    background-color: $white;
+  }
+
+  // active效果
+  &.active .card {
+    background-color: $white;
+  }
+}

package/styleNew/scss/Common/filepond.scss

@@ -0,0 +1,32 @@
+@use "../../../../bootstrap/scss/functions" as *;
+@use "../Settings/bs-variables" as *;
+@use "../../../../bootstrap/scss/mixins" as *;
+@use "../Settings/custom-variables" as *;
+@use "../Settings/_Mixins" as *;
+
+.can-click{
+    cursor: pointer;
+}
+
+.filepond--root.filepond--hopper {
+    border: 1px dashed var(--bs-gray-400);
+    border-radius: 0.5em;
+    overflow: hidden;
+}
+
+.filepond--drop-label {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+}
+
+.filepond-label-box-cus {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+}
+
+.filepond--panel-root {
+    background-color: $blue-100 !important;
+}

package/styleNew/scss/Common/thumbnail-group.scss

@@ -0,0 +1,14 @@
+
+.thumbnail-group{
+    $offset: .5rem;
+    position: relative;
+    display: inline-flex;
+    margin-right: $offset;
+    margin-bottom: $offset;
+    .thumbnail-pin{
+        position: absolute;
+        right: -$offset;
+        bottom: -$offset;
+        box-shadow: $box-shadow;
+    }
+}