jobdone-shared-files 1.0.49 → 1.0.51

package/treeItemV2.vue

@@ -1,79 +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
-    };
-  }
-}
+<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 +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 './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>
+<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>

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>