jobdone-shared-files 1.0.43 → 1.0.44

package/vueLoadingOverlay.vue

@@ -1,75 +1,75 @@
-<template>
-    <loading :is-full-page="fullPage" :loader='loader' :active="isActive" :color='colors' :background-color='backgroundColor' :opacity='opacity' :enforce-focus="false"/>
-</template>
-
-<script>
-
-// enum Data & Functions
-
-// vue & bootstrap
-import { ref } from 'vue'
-
-// plugins
-import Loading from 'vue-loading-overlay';
-
-/** vue loading 預設樣式 */
-const loadingOverlayOptions = {
-    loader: 'bars',
-    colors: '#647AF1',
-    backgroundColor: '#000',
-    opacity: 0.5,
-}
-
-// 用法說明
-// 1. npm install vue-loading-overlay@^6.0 
-// 2. 在js或.vue中import    >>  import Loading from "本檔案位置"
-// 3. 畫面中放上Component    >>  <Loading :is-active="isLoading"></Loading>  ("isLoading" => 自定義變數)
-// 4. loading 初始化        >>  const isLoading = ref(false);               ("isLoading" => 自定義變數)
-// 5. 開啟loading           >>  isLoading.value = true;                     ("isLoading" => 自定義變數)
-// 6. 關閉loading           >>  isLoading.value = false;                    ("isLoading" => 自定義變數)
-
-
-
-// vue components
-export default {
-    props: {
-        isActive: {
-            type: Boolean,
-            default: false
-        },
-        loader: {
-            type: String,
-            default: loadingOverlayOptions.loader
-        },
-        colors: {
-            type: String,
-            default: loadingOverlayOptions.colors
-        },
-        backgroundColor: {
-            type: String,
-            default: loadingOverlayOptions.backgroundColor
-        },
-        opacity: {
-            type: Number,
-            default: loadingOverlayOptions.opacity
-        },
-        fullPage: {
-            type: Boolean,
-            default: true
-        }
-    },
-    components: {
-        Loading
-    },
-    setup(props, { emit }) {
-        
-    }
-}
-
-</script>
-<style lang="scss">
-    @import './style/css/vue-loading-overlay/index.css';
-    .vl-overlay{
-        backdrop-filter: var(--backdrop-blur);
-    }
+<template>
+    <loading :is-full-page="fullPage" :loader='loader' :active="isActive" :color='colors' :background-color='backgroundColor' :opacity='opacity' :enforce-focus="false"/>
+</template>
+
+<script>
+
+// enum Data & Functions
+
+// vue & bootstrap
+import { ref } from 'vue'
+
+// plugins
+import Loading from 'vue-loading-overlay';
+
+/** vue loading 預設樣式 */
+const loadingOverlayOptions = {
+    loader: 'bars',
+    colors: '#647AF1',
+    backgroundColor: '#000',
+    opacity: 0.5,
+}
+
+// 用法說明
+// 1. npm install vue-loading-overlay@^6.0 
+// 2. 在js或.vue中import    >>  import Loading from "本檔案位置"
+// 3. 畫面中放上Component    >>  <Loading :is-active="isLoading"></Loading>  ("isLoading" => 自定義變數)
+// 4. loading 初始化        >>  const isLoading = ref(false);               ("isLoading" => 自定義變數)
+// 5. 開啟loading           >>  isLoading.value = true;                     ("isLoading" => 自定義變數)
+// 6. 關閉loading           >>  isLoading.value = false;                    ("isLoading" => 自定義變數)
+
+
+
+// vue components
+export default {
+    props: {
+        isActive: {
+            type: Boolean,
+            default: false
+        },
+        loader: {
+            type: String,
+            default: loadingOverlayOptions.loader
+        },
+        colors: {
+            type: String,
+            default: loadingOverlayOptions.colors
+        },
+        backgroundColor: {
+            type: String,
+            default: loadingOverlayOptions.backgroundColor
+        },
+        opacity: {
+            type: Number,
+            default: loadingOverlayOptions.opacity
+        },
+        fullPage: {
+            type: Boolean,
+            default: true
+        }
+    },
+    components: {
+        Loading
+    },
+    setup(props, { emit }) {
+        
+    }
+}
+
+</script>
+<style lang="scss">
+    @import './style/css/vue-loading-overlay/index.css';
+    .vl-overlay{
+        backdrop-filter: var(--backdrop-blur);
+    }
 </style>

package/style/scss/Common/Tree.scss

@@ -1,282 +0,0 @@
-@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

@@ -1,79 +0,0 @@
-<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

@@ -1,71 +0,0 @@
-<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 './treeItemV2.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>