jobdone-shared-files 0.0.1-beta.2

package/treeItem.vue

@@ -0,0 +1,367 @@
+<template>
+    <li class="tree-item" :class="[itemClass]">
+        <div class="card flex-row d-flex input-group flex-nowrap">
+            <button class="btn text-primary border-end px-1" :disabled="!item.children" data-bs-toggle="collapse" :data-bs-target="'#collapse-'+item.id">
+                <span class="material-icons">arrow_drop_down</span>
+            </button>
+            <input type="radio" name="tree-item" :id="item.id">
+            <label 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">
+                    <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>
+            </label>
+        </div>
+        <template v-if="item.children">
+            <ul :id="'collapse-'+item.id" class="content-children show" v-collapse>
+                <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>
+                        <slot name="icon">
+                            <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';
+    import collapse from './common/directives/collapse';
+    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 [];
+                }
+            }
+        },
+        directives: {
+            collapse
+        },
+        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>
+
+<style scoped lang="scss">
+    @import "./style/scss/Settings/basic-import";
+
+    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 );
+    }
+
+    // active效果
+    .tree-item.active {
+        > .card {
+            background-color: lighten( $primary, 30% );
+            border-color: rgba( $primary, .5 );
+        }
+
+        .btn-title {
+            color: $primary;
+        }
+    }
+
+    .btn-title {
+        .btn {
+            border-radius: 0;
+
+            &:focus, &:active {
+                border-color: transparent;
+            }
+        }
+
+        .btn-text {
+            width: 100%;
+            text-align: left;
+        }
+    }
+
+    label.btn-title {
+        cursor: pointer;
+    }
+
+    // 隱藏 input
+    .tree-item {
+        position: relative;
+
+        input[type="checkbox"], input[type="radio"] {
+            position: absolute;
+            @include size(0);
+            pointer-events: none;
+
+            ~ .btn-title .material-icons:before {
+                content: "\e836";
+                display: inline-block;
+                font-family: inherit;
+            }
+
+            &:checked ~ .btn-title .material-icons:before {
+                content: "\e837";
+            }
+        }
+    }
+
+
+    // 刪除子層標示 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;
+            z-index: 2;
+        }
+    }
+
+    .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;
+        }
+    }
+</style>

package/vueLoadingOverlay.vue

@@ -0,0 +1,77 @@
+<template>
+    <loading :loader='loader' :active="active" :color='colors' :background-color='backgroundColor' :opacity='opacity' />
+</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 ref="loading"></Loading>   ("loading" => 自定義REF名稱)
+// 4. loading 初始化        >>  const loading = ref(null);          ("loading" => 自定義REF名稱)
+// 5. 開啟loading           >>  loading.value.show()                ("loading" => 自定義REF名稱)
+// 6. 關閉loading           >>  loading.value.hide()                ("loading" => 自定義REF名稱)
+
+
+
+// vue components
+export default {
+    props: {
+        loader: {
+            type: String,
+            default: loadingOverlayOptions.loader
+        },
+        colors: {
+            type: String,
+            default: loadingOverlayOptions.colors
+        },
+        backgroundColor: {
+            type: String,
+            default: loadingOverlayOptions.backgroundColor
+        },
+        opacity: {
+            type: Number,
+            default: loadingOverlayOptions.opacity
+        },
+    },
+    components: {
+        Loading
+    },
+    setup(props, { emit }) {
+        const active = ref(false)
+
+        function show() {   // 顯示Loading
+            this.active = true;
+        }
+        function hide() {   // 隱藏Loading
+            this.active = false;
+        }
+
+        return {
+            active,
+            show,
+            hide
+        }
+    }
+}
+
+</script>
+<style lang="scss">
+    @import './style/css/vue-loading-overlay/index.css';
+</style>