jobdone-shared-files 0.0.1-beta.87 → 0.0.1-beta.89

package/treeItem.vue

@@ -1,368 +1,369 @@
-<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">
-                <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;
-            word-break: break-word;
-        }
-    }
-
-    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;
-        }
-    }
+<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">
+                <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/bs-variables";
+    @import "./style/scss/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 );
+    }
+
+    // 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;
+            word-break: break-word;
+        }
+    }
+
+    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>