init

.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,19 @@
+/**
+ *
+ * When extendedNode is use, it adds some options to the node properties.
+ * Supported option are:
+ *  - selectedColors => Tailwind utilities to applied to the selected node.
+ *  - hoverColors => Tailwind utilities to be applied to a selectable node when hovered.
+ */
+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;
+  });
+};
+
+export { useExtendedNode };

src/components/Tree/tree.component.vue

@@ -0,0 +1,64 @@
+<script>
+
+import { onMounted, ref } from 'vue';
+import { useExtendedNode } from './composable/tree';
+
+export default {
+  name: 'fohn-tree',
+  props: {
+    nodes: {
+      type: Array,
+    },
+    options: {
+      type: Object,
+    },
+    useExtendedNodes: {
+      type: Boolean,
+      default: true,
+    },
+    // PassThrough Tree Props
+    ptProps: {
+      type: Object,
+    },
+  },
+  setup: function (props, { attrs, slots, emit }) {
+    const ptProps = props.ptProps;
+    const selectedKey = ref({});
+    const extendedNodes = props.useExtendedNodes ? useExtendedNode(props.nodes, props.options) : props.nodes;
+
+    const selectNode = (node) => {
+      selectedKey.value[node.key] = true;
+    };
+
+    const unSelectNode = (node) => {
+      selectedKey.value[node.key] = false;
+    };
+
+    onMounted(() => {
+    });
+
+    return {
+      extendedNodes,
+      selectNode,
+      unSelectNode,
+      selectedKey,
+      ptProps,
+    };
+  },
+};
+</script>
+
+<template>
+  <slot
+    :nodes="extendedNodes"
+    :selectNode="selectNode"
+    :unSelectNode="unSelectNode"
+    :selectedKey="selectedKey"
+    :ptProps="ptProps"
+    v-bind="$attrs">
+  </slot>
+</template>
+
+<style scoped>
+
+</style>

src/components/components-install.js

@@ -22,6 +22,7 @@ import Dummy from './dummy.component.vue';
 import Modal from './modal/modal.component.vue';
 import Tabs from './tabs/tabs.component.vue';
 import Tab from './tabs/tab.component.vue';
+import F_Tree from './Tree/tree.component.vue';
 
 const fohnComponents = [
   { name: 'flat-pickr', def: flatPickr },
@@ -48,6 +49,7 @@ const fohnComponents = [
   { name: 'fohn-tab', def: Tab },
   { name: 'fohn-tabs', def: Tabs },
   { name: 'fohn-dummy', def: Dummy },
+  { name: 'fohn-tree', def: F_Tree },
 ];
 
 export default {

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/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;
+        }
+    }
+`,
+};

src/presets/lara-fohn/index.js

@@ -0,0 +1,18 @@
+import global from './global';
+import ripple from './ripple';
+import tooltip from './tooltip';
+import tree from './tree';
+import badgedirective from './badgedirective';
+
+export default {
+  global,
+  directives: {
+    badge: badgedirective,
+    ripple,
+    tooltip,
+  },
+
+  tree,
+  toolbar,
+  menubar,
+};

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

@@ -0,0 +1,6 @@
+export default {
+  root: {
+    class: ['block absolute bg-surface-0/50 rounded-full pointer-events-none'],
+    style: 'transform: scale(0)',
+  },
+};

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

@@ -0,0 +1,46 @@
+export default {
+  root: ({ context, props }) => ({
+    class: [
+      // Position and Shadows
+      'absolute',
+      'shadow-md',
+      'p-fadein',
+      // Spacing
+      {
+        'py-0 px-1': context?.right || context?.left || (!context?.right && !context?.left && !context?.top && !context?.bottom),
+        'py-1 px-0': context?.top || context?.bottom,
+      },
+    ],
+  }),
+  arrow: ({ context, props }) => ({
+    class: [
+      // Position
+
+      'absolute',
+
+      // Size
+      'w-0',
+      'h-0',
+
+      // Shape
+      'border-transparent',
+      'border-solid',
+      {
+        'border-y-[0.25rem] border-r-[0.25rem] border-l-0 border-r-surface-600': context?.right || (!context?.right && !context?.left && !context?.top && !context?.bottom),
+        'border-y-[0.25rem] border-l-[0.25rem] border-r-0 border-l-surface-600': context?.left,
+        'border-x-[0.25rem] border-t-[0.25rem] border-b-0 border-t-surface-600': context?.top,
+        'border-x-[0.25rem] border-b-[0.25rem] border-t-0 border-b-surface-600': context?.bottom,
+      },
+
+      // Spacing
+      {
+        '-mt-1 ': context?.right || (!context?.right && !context?.left && !context?.top && !context?.bottom),
+        '-mt-1': context?.left,
+        '-ml-1': context?.top || context?.bottom,
+      },
+    ],
+  }),
+  text: {
+    class: ['p-3', 'bg-surface-600 dark:bg-surface-700', 'text-white', 'leading-none', 'rounded-md', 'whitespace-pre-line', 'break-words'],
+  },
+};