jobdone-shared-files 1.0.41 → 1.0.42

package/README.md

@@ -139,6 +139,7 @@ import OOXX from '../../node_modules/jobdone-shared-files/OOXX.vue';
 | 1   | `update-auto-complete-option`   | 文字輸入時呼叫，value為當前輸入的值，可用於刷新autoCompleteOption。 |      
 ### .    
 ## 05.Tree - 樹狀結構
+需另外引入 `Tree.scss` 檔案
 ### 範例
 ```
 <template>

package/package.json

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

package/style/scss/Common/Tree.scss

@@ -0,0 +1,282 @@
+@import "../../../../bootstrap/scss/functions";
+@import "../Settings/bs-variables";
+@import "../../../../bootstrap/scss/mixins";
+@import "../Settings/custom-variables";
+@import "../Settings/Mixins";
+
+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: lighten($primary, 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: lighten($primary, 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: lighten($danger, 43%);
+    border-color: rgba($danger, .5);
+
+    .btn {
+      color: $danger;
+    }
+  }
+}
+
+// 刪除子層標示 UI (含子層)
+// .tree-child:has(.btn.text-danger:hover){
+//     .card, + .content-children .card{
+//         background-color: lighten( $danger, 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/treeItemV2.vue

@@ -0,0 +1,79 @@
+<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 || 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>
+      <div class="btn-title d-flex text-start rounded-0 flex-grow-1" :for="item.id" @click="clickItem(item)">
+        <div class="btn btn-text border-start">{{ item.title }}</div>
+        <slot name="icon" :item="item">
+          <div class="btn d-flex align-items-center border-start rounded-0 text-primary h-100 ms-auto">
+            <span class="material-icons icon-18"></span>
+          </div>
+        </slot>
+      </div>
+    </div>
+    <template v-if="item.children">
+      <ul :id="'collapse-' + item.id" class="content-children show">
+        <TreeItem class="children-box" v-for="(subItem, subIndex) in item.children" :key="subItem.id" :item="subItem"
+          :index="subIndex" :click-item="clickItem" :active-id="activeId" :tree-item-class="treeItemClass">
+          <template v-slot:icon-start>
+            <slot name="icon-start"></slot>
+          </template>
+          <template v-slot:icon="slotProps">
+            <slot name="icon" :item="slotProps.item">
+              <div class="btn d-flex align-items-center border-start rounded-0 text-primary h-100 ms-auto">
+                <span class="material-icons icon-18"></span>
+              </div>
+            </slot>
+          </template>
+        </TreeItem>
+      </ul>
+    </template>
+  </li>
+</template>
+
+<script>
+import { ref, computed } from 'vue';
+export default {
+  name: 'TreeItem',
+  props: {
+    item: {
+      type: Object,
+      required: true
+    },
+    index: {
+      type: Number,
+      required: true
+    },
+    clickItem: {
+      type: Function
+    },
+    activeId: {
+      type: String,
+      required: true
+    },
+    treeItemClass: {
+      type: Array,
+      default: function () {
+        return [];
+      }
+    }
+  },
+  setup(props, { emit }) {
+    const itemClass = computed(() => {
+      var classList = [...props.treeItemClass];
+      if (props.activeId === props.item.id) {
+        classList.push('active');
+      }
+      return classList;
+    });
+    return {
+      itemClass: itemClass
+    };
+  }
+}
+</script>

package/treeV2.vue

@@ -0,0 +1,71 @@
+<template>
+  <form ref="form">
+    <tree-item v-for="(item, index) in items" :key="item.id" :item="item" :index="index" :click-item="clickItem"
+      :active-id="activeId" :tree-item-class="treeItemClass">
+      <template v-slot:icon-start>
+        <slot name="icon-start"></slot>
+      </template>
+      <template v-slot:icon="slotProps">
+        <slot name="icon" :item="slotProps.item"></slot>
+      </template>
+    </tree-item>
+  </form>
+</template>
+
+<script>
+import { ref, computed } from 'vue';
+import TreeItem from './treeItem.vue';
+export default {
+  props: {
+    items: {
+      type: Array,
+      default: function () {
+        return [];
+      }
+    },
+    clickItem: {
+      type: Function
+    },
+    size: {
+      type: String,
+      default: ""
+    },
+    bgColor: {
+      type: String,
+      default: ""
+    }
+  },
+  components: {
+    TreeItem
+  },
+  setup(props, { emit }) {
+    const form = ref(null);
+    const activeId = ref("");
+    const clickItem = (item) => {
+      activeId.value = item.id;
+      props.clickItem(item);
+    };
+    const treeItemClass = computed(() => {
+      var classList = [];
+      if (props.size == 'sm') {
+        classList.push('tree-item-sm');
+      }
+      if (props.bgColor == 'white') {
+        classList.push('tree-item-in-white');
+      }
+      return classList;
+    });
+    const reset = () => {
+      activeId.value = "";
+    };
+    return {
+      form: form,
+      treeItemClass: treeItemClass,
+      activeId: activeId,
+      clickItem: clickItem,
+      reset: reset
+    };
+  }
+}
+</script>
+<style></style>