renusify 2.5.2 → 3.0.1

package/components/tree/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <r-container ref="tree" :class="classes" full-width>
+  <r-container ref="treeRef" :class="classes" full-width>
     <r-row v-if="searchLink">
       <r-col>
         <r-select-input
@@ -13,18 +13,20 @@
     <r-float v-if="show" :minZoom="0.01" :zoom="0.7" bordered>
       <template v-slot="{move,ease,transform}">
         <div :class="{
-                                    'tree-rotate':rotate
-                                }">
+          'tree-rotate':rotate
+        }">
           <r-tree-element :expand="expand"
                           :link="link"
                           :model-value="node"
-                          :openAll="openAll"
                           :sortBy="sortBy"
                           @expand="handleExpand(ease,move,transform,$event)"
                           @select="handleSelect"
                           @update:model-value="$emit('update:modelValue',$event)"
           >
             <template v-slot="{ item,nodeKey }">
+              <!-- Default slot for custom tree node content
+              @binding {Object} item - The tree node item
+              @binding {String} nodeKey - The key identifier for the node -->
               <slot :item="item" :nodeKey="nodeKey">{{ item }}</slot>
             </template>
           </r-tree-element>
@@ -32,110 +34,254 @@
       </template>
     </r-float>
   </r-container>
-
 </template>
-<script>
-
-export default {
-  name: 'r-tree',
-  props: {
-    modelValue: Object,
-    link: String,
-    searchLink: String,
-    sortBy: {
-      type: String,
-      default: 'gen'
-    },
-    gen: String,
-    selected: String,
-    rotate: Boolean,
-    expand: {
-      type: Boolean,
-      default: false
-    },
-    childsName: {
-      type: String,
-      default: 'childs'
-    },
-    openAll: Boolean,
-    headers: Object
-  },
-  emits: ['update:modelValue', 'select-node'],
-  data() {
-    return {
-      show: false,
-      search: null,
-      nodeParent: this.gen,
-      node: this.modelValue
-    }
-  },
-  created() {
-    if (this.modelValue) {
-      this.show = true
-    } else if (this.link) {
-      this.get()
-    }
+<script setup>
+import {ref, computed, watch, inject} from 'vue'
+
+/**
+ * @example // Tree usage
+ * <template>
+ *   <r-tree style="height:600px" v-model="treeData" :link="link" :searchLink="searchLink" :gen="gen" :selected="selected" :rotate="rotate" :childsName="childsName" :openAll="openAll" :headers="headers" @update:model-Value="log(`update:modelValue`,$event)" @select-node="log(`select-node`,$event)">
+ *  <template v-slot="{nodeKey,item}">
+ *         <r-card class="pa-5 title-1 mx-1">{{nodeKey}}:{{item.name}}</r-card>
+ *       </template>
+ * </r-tree>
+ *   </template>
+ * <script>
+ * import { ref } from 'vue'
+ *
+ * const treeData = ref({
+ *   "0": {
+ *     "name": "Root",
+ *     "childs": {
+ *       "1": {
+ *         "name": "Child 1",
+ *         "childs": {
+ *           "3": {
+ *             "name": "Grandchild 1",
+ *             "childs": {
+ *               "4": {
+ *                 "name": "Great Grandchild 1",
+ *                 "childs": {
+ *                   "6": {
+ *                     "name": "Level 5 Node 1",
+ *                     "childs": {
+ *                       "7": {
+ *                         "name": "Level 6 Node 1",
+ *                         "childs": {},
+ *                       },
+ *                       "8": {
+ *                         "name": "Level 6 Node 2",
+ *                         "childs": {},
+ *                       }
+ *                     },
+ *                   }
+ *                 },
+ *               },
+ *               "5": {
+ *                 "name": "Great Grandchild 2",
+ *                 "childs": {},
+ *               }
+ *             },
+ *           }
+ *         },
+ *       },
+ *       "2": {
+ *         "name": "Child 2",
+ *         "childs": {},
+ *       }
+ *     },
+ *   }
+ * })
+ *
+ * const link = ref(null)
+ * const searchLink = ref(null)
+ * const gen = ref("0") // Root node ID
+ * const selected = ref(null)
+ * const rotate = ref(false)
+ * const childsName = ref("childs") // Property name for children
+ * const openAll = ref(false)
+ * const headers = ref({})
+ *
+ * const log = (name, event) => {
+ *   console.log(name, event)
+ * }
+ * <//script>
+ * */
+
+
+const props = defineProps({
+  /**
+   * Tree data model
+   * @type {Object}
+   */
+  modelValue: Object,
+  /**
+   * API endpoint URL for fetching tree data
+   * @type {String}
+   */
+  link: String,
+  /**
+   * API endpoint URL for search functionality
+   * @type {String}
+   */
+  searchLink: String,
+  /**
+   * Property name to sort tree nodes by
+   * @type {String}
+   * @default 'gen'
+   */
+  sortBy: {
+    type: String,
+    default: 'gen'
   },
-  watch: {
-    modelValue: function (newVal) {
-      this.node = newVal
-    }
+  /**
+   * Initial node identifier to load
+   * @type {String}
+   */
+  gen: String,
+  /**
+   * Currently selected node identifier
+   * @type {String}
+   */
+  selected: String,
+  /**
+   * Rotates the tree layout
+   * @type {Boolean}
+   */
+  rotate: Boolean,
+  /**
+   * Expands all tree nodes by default
+   * @type {Boolean}
+   * @default false
+   */
+  expand: {
+    type: Boolean,
+    default: false
   },
-  computed: {
-    classes() {
-      let a = {'tree-searchable': this.searchLink}
-      a[`${this.$r.prefix}tree`] = true
-      return a
-    }
+  /**
+   * Property name for child nodes in tree data
+   * @type {String}
+   * @default 'childs'
+   */
+  childsName: {
+    type: String,
+    default: 'childs'
   },
-  methods: {
-    change(e) {
-      if (e && "value" in e) {
-        this.nodeParent = e.value
-        this.show = false
-        this.get()
-      }
-    },
-    get() {
-      this.$axios.get(this.link + this.nodeParent, {headers: this.headers})
-          .then(({data}) => {
-            this.node = data
-            this.show = true
-          })
-    },
-    handleExpand(ease, move, transform, $event) {
-      const el = $event[1].getBoundingClientRect()
-      ease()
-      const node_info = $event[1].querySelector('.node-info').getBoundingClientRect()
-      const card_h = node_info.height
-      const card_w = node_info.width
-      const parent = this.$refs.tree.$el
-      const bb = this.$refs.tree.$el.getBoundingClientRect()
-      move(parent.offsetWidth / 2 - (el.left - bb.left + ($event[0] ? el.width / 2 : el.width - card_w / 2)),
-          parent.offsetHeight / 2 - (el.top - bb.top + (this.rotate ? el.height - card_h : card_h / 2)))
-    },
-    handleSelect(e) {
-      this.$emit('select-node', e)
-    }
+  /**
+   * Additional headers for API requests
+   * @type {Object}
+   */
+  headers: Object
+})
+
+const emit = defineEmits([
+  /**
+   * Emitted when tree data changes
+   * @param {Object} data - Updated tree data
+   */
+  'update:modelValue',
+  /**
+   * Emitted when a tree node is selected
+   * @param {Object} node - Selected node data
+   */
+  'select-node'
+])
+
+const {$r} = inject('renusify')
+const $axios = inject('axios')
+
+const show = ref(false)
+const search = ref(null)
+const nodeParent = ref(props.gen)
+const node = ref(props.modelValue)
+
+const treeRef = ref(null)
+
+const classes = computed(() => {
+  const a = {'tree-searchable': props.searchLink}
+  a[`${$r.prefix}tree`] = true
+  return a
+})
+
+/**
+ * Handles search selection changes
+ * @param {Object} e - Selected search item with value property
+ */
+const change = (e) => {
+  if (e && "value" in e) {
+    nodeParent.value = e.value
+    show.value = false
+    get()
   }
 }
+
+/**
+ * Fetches tree data from the API endpoint
+ */
+const get = () => {
+  $axios.get(props.link + nodeParent.value, {headers: props.headers})
+      .then(({data}) => {
+        node.value = data
+        show.value = true
+      })
+}
+
+/**
+ * Handles tree node expansion with animation
+ * @param {Function} ease - Animation easing function
+ * @param {Function} move - Move function for positioning
+ * @param {Function} transform - Transform function
+ * @param {Array} $event - Event data containing node information
+ */
+const handleExpand = (ease, move, transform, $event) => {
+  const el = $event[1].getBoundingClientRect()
+  ease()
+  const node_info = $event[1].querySelector('.node-info').getBoundingClientRect()
+  const card_h = node_info.height
+  const card_w = node_info.width
+  const parent = treeRef.value.$el
+  const bb = treeRef.value.$el.getBoundingClientRect()
+  move(parent.offsetWidth / 2 - (el.left - bb.left + ($event[0] ? el.width / 2 : el.width - card_w / 2)),
+      parent.offsetHeight / 2 - (el.top - bb.top + (props.rotate ? el.height - card_h : card_h / 2)))
+}
+
+/**
+ * Handles tree node selection
+ * @param {Object} e - Selected node data
+ */
+const handleSelect = (e) => {
+  emit('select-node', e)
+}
+
+if (props.modelValue) {
+  show.value = true
+} else if (props.link) {
+  get()
+}
+
+// Watchers
+watch(() => props.modelValue, (newVal) => {
+  node.value = newVal
+})
+
 </script>
 <style lang="scss">
-@use "../../style/variables/base";
+@use "../../style" as *;
 
 $distance: 20px;
-.#{base.$prefix}tree {
+.#{$prefix}tree {
   position: relative;
   width: 100%;
   height: 100%;
 
   &.tree-searchable {
-    .#{base.$prefix}float {
+    .#{$prefix}float {
       height: calc(100% - 70px)
     }
   }
 
-  .#{base.$prefix}float {
+  .#{$prefix}float {
     direction: ltr;
   }
 

package/components/tree/tree-element.vue

@@ -1,5 +1,5 @@
 <template>
-  <r-container v-if="show" full-width :class="`${$r.prefix}tree-element px-0`" ref="tree">
+  <r-container v-if="show" ref="treeRef" :class="`${$r.prefix}tree-element px-0`" full-width>
     <r-row class="h-center flex-nowrap no-gutters">
       <r-col class="text-center">
         <div class="d-flex h-center mb-1 node-info" @click.prevent="$emit('select',{key:nodeKey,item:node[nodeKey]})">
@@ -28,7 +28,6 @@
                         :model-value="{[child['gen']]:child}"
                         @expand="handleExpand"
                         :expand="expand"
-                        :openAll="openAll"
                         :sort-by="sortBy"
                         @select="$emit('select',$event)"
         >
@@ -40,11 +39,10 @@
     </r-row>
   </r-container>
 </template>
-<script>
+<script setup>
+import {ref, computed, inject} from 'vue'
 
-export default {
-  name: 'r-tree-element',
-  props: {
+const props = defineProps({
     modelValue: Object,
     link: String,
     parentNode: String,
@@ -60,120 +58,122 @@ export default {
       type: String,
       default: 'childs'
     },
-    openAll: Boolean,
     headers: Object
-  },
-  emits:['update:modelValue','fire','select','expand'],
-  data() {
-    return {
-      back: false,
-      show: false,
-      loading: false,
-      open: this.expand,
-    }
-  },
-  mounted() {
-    if (this.modelValue) {
-      this.show = true
-    }
-    if (this.openAll && this.childs.length > 0) {
-      this.open = true;
-    }
-  },
-  computed: {
-    node() {
-      return this.modelValue
-    },
-    size() {
-      return this.childs.length
-    },
-    childs() {
-      let res = []
-      if (!this.node || !(this.nodeKey in this.node) || !(this.childsName in this.node[this.nodeKey])) {
-        return res
-      }
-      const childs = this.node[this.nodeKey][this.childsName]
+})
 
-      let s = []
-      for (const key in childs) {
-        if (this.$helper.hasKey(childs, key)) {
-          if (childs[key]['gen'] === undefined) {
-            childs[key]['gen'] = key
-          }
-          s.push({
-            'key': key,
-            'value': childs[key]
-          })
-        }
-      }
-      const sortBy = this.sortBy
-      s.sort(function (a, b) {
-        if (a['value'][sortBy] !== undefined) {
-          if (b['value'][sortBy] !== undefined) {
-            if (typeof a['value'][sortBy] === 'number' && typeof b['value'][sortBy] === 'number') {
-              return a['value'][sortBy] - b['value'][sortBy];
-            } else {
-              return String(a['value'][sortBy]).localeCompare(String(b['value'][sortBy]));
-            }
-          }
-          return -1;
-        }
-        return b['value'][sortBy] !== undefined ? 1 : 0;
-      });
-      const lng = s.length
-      for (let i = 0; i < lng; i++) {
-        res.push(s[i]['value'])
-      }
-      return res
-    },
-    nodeKey() {
-      const keys = Object.keys(this.node)
-      if (keys) {
-        return keys[0]
+const emit = defineEmits(['update:modelValue', 'fire', 'select', 'expand'])
+
+const {$helper} = inject('renusify')
+const $axios = inject('axios')
+
+const show = ref(false)
+const loading = ref(false)
+const open = ref(props.expand)
+
+const treeRef = ref(null)
+
+const node = computed(() => props.modelValue)
+
+const size = computed(() => childs.value.length)
+
+const childs = computed(() => {
+  const res = []
+  const nodeKeyValue = nodeKey.value
+
+  if (!node.value || !nodeKeyValue || !(nodeKeyValue in node.value) || !(props.childsName in node.value[nodeKeyValue])) {
+    return res
+  }
+
+  const childs = node.value[nodeKeyValue][props.childsName]
+  const s = []
+
+  for (const key in childs) {
+    if ($helper.hasKey(childs, key)) {
+      if (childs[key]['gen'] === undefined) {
+        childs[key]['gen'] = key
       }
-      return false
+      s.push({
+        'key': key,
+        'value': childs[key]
+      })
     }
-  },
-  methods: {
-    updateNode(e, key) {
-      let res = Object.assign({}, this.modelValue)
-      res[this.nodeKey][this.childsName][key] = e[key]
-      this.$emit('update:modelValue', this.modelValue)
-    },
-    handleExpand(e, current) {
-      if (current) {
-        if (this.link && this.size === 0) {
-          this.loading = true
-          this.$axios.get(this.link + e, {headers: this.headers})
-              .then(({data}) => {
-                this.$emit('update:modelValue', data)
-                this.open = !this.open
-                setTimeout(() => {
-                  this.$emit('expand', [this.open, this.$refs.tree.$el])
-                }, 220)
-                this.loading = false
-              }, () => {
-                this.loading = false
-              })
+  }
+
+  const sortBy = props.sortBy
+  s.sort(function (a, b) {
+    if (a['value'][sortBy] !== undefined) {
+      if (b['value'][sortBy] !== undefined) {
+        if (typeof a['value'][sortBy] === 'number' && typeof b['value'][sortBy] === 'number') {
+          return a['value'][sortBy] - b['value'][sortBy]
         } else {
-          this.open = !this.open
-          setTimeout(() => {
-            this.$emit('expand', [this.open, this.$refs.tree.$el])
-          }, 250)
+          return String(a['value'][sortBy]).localeCompare(String(b['value'][sortBy]))
         }
-
-      } else {
-        this.$emit('expand', e)
       }
+      return -1
+    }
+    return b['value'][sortBy] !== undefined ? 1 : 0
+  })
+
+  const lng = s.length
+  for (let i = 0; i < lng; i++) {
+    res.push(s[i]['value'])
+  }
+
+  return res
+})
+
+const nodeKey = computed(() => {
+  if (!node.value) return false
+
+  const keys = Object.keys(node.value)
+  if (keys.length > 0) {
+    return keys[0]
+  }
+
+  return false
+})
+
+const updateNode = (e, key) => {
+  const res = {...props.modelValue}
+  res[nodeKey.value][props.childsName][key] = e[key]
+  emit('update:modelValue', props.modelValue)
+}
+
+const handleExpand = (e, current) => {
+  if (current) {
+    if (props.link && size.value === 0) {
+      loading.value = true
+      $axios.get(props.link + e, {headers: props.headers})
+          .then(({data}) => {
+            emit('update:modelValue', data)
+            open.value = !open.value
+            setTimeout(() => {
+              emit('expand', [open.value, treeRef.value.$el])
+            }, 220)
+            loading.value = false
+          })
+          .catch(() => {
+            loading.value = false
+          })
+    } else {
+      open.value = !open.value
+      setTimeout(() => {
+        emit('expand', [open.value, treeRef.value.$el])
+      }, 250)
     }
+  } else {
+    emit('expand', e)
   }
 }
+if (props.modelValue) {
+  show.value = true
+}
 </script>
 <style lang="scss">
-@use "../../style/variables/base";
+@use "../../style" as *;
 
 $distance: 20px;
-.#{base.$prefix}tree-element {
+.#{$prefix}tree-element {
   direction: ltr;
   position: relative;
   display: table;