Merge branch 'dev-develop' of https://github.com/Fohn-Group/fohn-js i…

…nto dev-develop

.gitignore

@@ -13,6 +13,7 @@ profile
 # Dependency directory
 # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
 node_modules
+src/presets/lara
 
 # Remove some common IDE working directories
 .idea

eslint.config.mjs

@@ -28,6 +28,13 @@ export default [
     },
   },
   {
-    ignores: ['babel.config.js', 'webpack.config.js'],
-  }
+    ignores: [
+      'src/presets/lara/**/*',
+      'node_modules/**/*',
+      'dist/**/*',
+      '.github/**/*',
+      'babel.config.js',
+      'webpack.config.js',
+    ],
+  },
 ];

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fohn-ui",
-  "version": "1.7.4",
+  "version": "1.8.0",
   "description": "Javascript library for Fohn-Ui php framework.",
   "main": "dist/fohn-ui.min.js",
   "files": [
@@ -13,7 +13,7 @@
     "dev": "webpack --progress --watch --env development",
     "profile": "webpack  --env production --profile --json > ./profile/fohn-ui-bundle-profile.json",
     "analyze-profile": "webpack-bundle-analyzer ./profile/fohn-ui-bundle-profile.json",
-    "lint": "eslint ./src",
+    "lint": "eslint",
     "lint-fix": "eslint ./src --fix"
   },
   "author": "Alain Belair",
@@ -54,6 +54,7 @@
     "lodash.throttle": "^4.1.1",
     "mitt": "^3.0.0",
     "pinia": "^2.0.12",
+    "primevue": "^4.0.0-rc.2",
     "vue": "^3.2.24",
     "vue-flatpickr-component": "^11.0.3",
     "vue-toastification": "^2.0.0-rc.5"

src/components/Tree/composable/tree.js

@@ -0,0 +1,61 @@
+import apiService from '../../../services/api.service';
+
+/**
+ *
+ * Convert all key value to string.
+ */
+const useStringKey = (nodes) => {
+  return nodes.map((node) => {
+    node.key = node.key.toString();
+    if (node?.children?.length > 0) {
+      node.children = useStringKey(node.children);
+    }
+
+    return node;
+  });
+};
+
+/**
+ *
+ * When extendedNode is use, it adds some options to the node properties.
+ * Supported option are:
+ *  - collapseIcons,
+ *  - expandedIcons,
+ */
+const useExtendedNode = (nodes, options) => {
+  return nodes.map((node) => {
+    const extendedNode = { ...node, ...options };
+    if (extendedNode.children && extendedNode.children.length > 0) {
+      extendedNode.children = useExtendedNode(extendedNode.children, options);
+    }
+
+    return extendedNode;
+  });
+};
+
+/**
+ *
+ * Post Data request.
+ * Request will send:
+ *  - the current node key select by user,
+ *  - the mode: either select or unselect,
+ *  - an array of all key nodes selected,
+ *  - the raw value of the entire tree node,
+ *
+ */
+const usePostData = (url, action, key, selectedKeys, treeValue) => {
+  const options = {
+    method: 'POST',
+    body: JSON.stringify({ __nodeAction: action, __nodeKey: key, __nodeKeys: selectedKeys, __treeValue: treeValue }),
+  };
+
+  const { data, onFetchFinally } = apiService.fetchAsResponse(url, options);
+  onFetchFinally(() => {
+    const js = data.value?.jsRendered;
+    if (js) {
+      apiService.evalResponse(js);
+    }
+  });
+};
+
+export { useStringKey, useExtendedNode, usePostData };

src/components/Tree/tree.component.vue

@@ -0,0 +1,102 @@
+<script>
+
+import { computed, onMounted, ref } from 'vue';
+import { useExtendedNode, usePostData, useStringKey } from './composable/tree';
+
+export default {
+  name: 'fohn-tree',
+  props: {
+    // the nodes to be display.
+    nodes: {
+      type: Array,
+      default: () => [],
+    },
+    // The raw value for TreeNode selection.
+    nodeValue: {
+      type: Object,
+    },
+    // Callback url. When a tree node is select or unselect.
+    callbackUrl: String,
+    // Node options like collapse and expanded icons.
+    extendedNodeOptions: {
+      type: Object,
+    },
+    useExtendedNodes: {
+      type: Boolean,
+      default: true,
+    },
+    // PassThrough Prime TreeNode Props
+    ptProps: {
+      type: Object,
+    },
+  },
+  setup: function (props, { attrs, slots, emit }) {
+    const ptProps = props.ptProps;
+    const selectedKey = ref(props.nodeValue);
+    const selectionMode = props.ptProps.selectionMode || 'single';
+
+    const extendedNodes = props.useExtendedNodes ? useExtendedNode(useStringKey(props.nodes), props.extendedNodeOptions) : useStringKey(props.nodes);
+
+    const selectNode = (node) => {
+      if (props.callbackUrl) {
+        usePostData(props.callbackUrl, 'select', node.key, currentSelection.value, selectedKey.value);
+      }
+    };
+
+    const unSelectNode = (node) => {
+      if (props.callbackUrl) {
+        usePostData(props.callbackUrl, 'unselect', node.key, currentSelection.value, selectedKey.value);
+      }
+    };
+
+    const updateSelection = (node) => {
+      selectedKey.value = node;
+    };
+
+    const currentSelection = computed(() => {
+      if (selectionMode === 'single' || selectionMode === 'multiple') {
+        return Object.keys(selectedKey.value);
+      }
+      else if (selectionMode === 'checkbox') {
+        const selection = [];
+        for (const [key, value] of Object.entries(selectedKey.value)) {
+          if (value.checked) {
+            selection.push(key);
+          }
+        }
+        return selection;
+      }
+      return [];
+    });
+
+    onMounted(() => {
+
+    });
+
+    return {
+      extendedNodes,
+      selectNode,
+      unSelectNode,
+      selectedKey,
+      updateSelection,
+      ptProps,
+    };
+  },
+};
+</script>
+
+<template>
+  <slot
+    :nodes="extendedNodes"
+    :selectNode="selectNode"
+    :unSelectNode="unSelectNode"
+    :selectedKey="selectedKey"
+    :updateSelection="updateSelection"
+    :ptProps="ptProps"
+    v-bind="$attrs">
+  </slot>
+</template>
+
+<style scoped>
+
+</style>

src/components/prime-install.js

@@ -0,0 +1,25 @@
+/**
+ * Fohn-ui use some of PrimeVue component.
+ *
+ * Copyright (c) 2018-2024 PrimeTek
+ * https://github.com/primefaces/primevue
+ *
+ */
+
+import BaseTree from 'primevue/tree';
+import Tree from 'primevue/tree';
+import TreeNode from 'primevue/tree';
+
+const primeComponents = [
+  { name: 'BaseTree', def: BaseTree },
+  { name: 'Tree', def: Tree },
+  { name: 'TreeNode', def: TreeNode },
+];
+
+export default {
+  install: (app, options) => {
+    primeComponents.forEach((primeComponent) => {
+      app.component(primeComponent.name, primeComponent.def);
+    });
+  },
+};

src/components/tree/composable/style.js

@@ -0,0 +1,9 @@
+const useHighlightColors = (color) => {
+  return color ? color : 'border-gray-200 bg-white';
+};
+
+const useHoverColors = (color) => {
+  return color ? color : 'hover:bg-gray-200';
+};
+
+export { useHighlightColors, useHoverColors };

src/presets/README.md

@@ -0,0 +1,5 @@
+This preset is a modification of PrimeVue Lara preset
+adapt for Fohn-Ui.
+
+Copyright (c) 2018-2024 PrimeTek
+https://github.com/primefaces/primevue

src/presets/lara-fohn/badgedirective/index.js

@@ -0,0 +1,43 @@
+export default {
+  root: ({ context }) => ({
+    class: [
+      // Font
+      'font-bold',
+      'text-xs leading-[normal]',
+
+      // Alignment
+      'flex items-center justify-center',
+      'text-center',
+
+      // Position
+      'absolute top-0 right-0 transform translate-x-1/2 -translate-y-1/2 origin-top-right',
+
+      // Size
+      'm-0',
+      {
+        'p-0': context.nogutter || context.dot,
+        'px-2': !context.nogutter && !context.dot,
+        'min-w-[0.5rem] w-2 h-2': context.dot,
+        'min-w-[1.5rem] h-6': !context.dot,
+      },
+
+      // Shape
+      {
+        'rounded-full': context.nogutter || context.dot,
+        'rounded-[10px]': !context.nogutter && !context.dot,
+      },
+
+      // Color
+      'text-primary-inverse',
+      {
+        'bg-primary': !context.info && !context.success && !context.warning && !context.danger && !context.help && !context.secondary,
+        'bg-surface-500 dark:bg-surface-400': context.secondary,
+        'bg-green-500 dark:bg-green-400': context.success,
+        'bg-blue-500 dark:bg-blue-400': context.info,
+        'bg-orange-500 dark:bg-orange-400': context.warning,
+        'bg-purple-500 dark:bg-purple-400': context.help,
+        'bg-red-500 dark:bg-red-400': context.danger,
+      },
+    ],
+  }),
+};

src/presets/lara-fohn/global.js

@@ -0,0 +1,90 @@
+export default {
+  css: `
+    *[data-pd-ripple="true"]{
+        overflow: hidden;
+        position: relative;
+    }
+    span[data-p-ink-active="true"]{
+        animation: ripple 0.4s linear;
+    }
+    @keyframes ripple {
+        100% {
+            opacity: 0;
+            transform: scale(2.5);
+        }
+    }
+
+    .progress-spinner-circle {
+        stroke-dasharray: 89, 200;
+        stroke-dashoffset: 0;
+        animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite;
+        stroke-linecap: round;
+    }
+
+    @keyframes p-progress-spinner-dash{
+        0% {
+            stroke-dasharray: 1, 200;
+            stroke-dashoffset: 0;
+        }
+
+        50% {
+            stroke-dasharray: 89, 200;
+            stroke-dashoffset: -35px;
+        }
+        100% {
+            stroke-dasharray: 89, 200;
+            stroke-dashoffset: -124px;
+        }
+    }
+    @keyframes p-progress-spinner-color {
+        100%, 0% {
+            stroke: #ff5757;
+        }
+        40% {
+            stroke: #696cff;
+        }
+        66% {
+            stroke: #1ea97c;
+        }
+        80%, 90% {
+            stroke: #cc8925;
+        }
+    }
+
+    .progressbar-value-animate::after {
+        will-change: left, right;
+        animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+    }
+    .progressbar-value-animate::before {
+        will-change: left, right;
+        animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+    }
+    @keyframes p-progressbar-indeterminate-anim {
+        0% {
+            left: -35%;
+            right: 100%;
+        }
+        60% {
+            left: 100%;
+            right: -90%;
+        }
+        100% {
+            left: 100%;
+            right: -90%;
+        }
+    }
+
+    .p-fadein {
+        animation: p-fadein 250ms linear;
+    }
+
+    @keyframes p-fadein {
+        0% {
+            opacity: 0;
+        }
+        100% {
+            opacity: 1;
+        }
+    }
+`,
+};