@iankibetsh/shframework 4.6.6 → 4.6.8

package/dist/dist/library.mjs.css

@@ -1,36 +1,4 @@
 
-.sh-phone{
-  display: flex;
-  width: 100%;
-  align-items: center;
-  padding: 0 0.25rem;
-}
-.phone-country{
-  width: 2rem;
-  border: none;
-  align-self: center;
-  outline: none !important;
-  padding: 0.4rem;
-  border-right: 1px solid #0003;
-}
-.phone-number{
-  width: calc(100% - 2.2rem);
-  border: none;
-  align-self: center;
-  outline: none;
-  margin-bottom: 0;
-  padding: 0.4rem;
-}
-.sh-phone img{
-  padding: 0.125rem;
-  width: 2rem;
-  height: 2rem;
-}
-.phone-number::placeholder{
-  font-weight: 300;
-  opacity: 0.5;
-}
-
 .colored-toast.swal2-icon-success {
   background-color: #a5dc86 !important;
 }
@@ -63,20 +31,36 @@
   color: white;
 }
 
-.sh-selected-item{
-  line-height: unset!important;
+.sh-phone{
+  display: flex;
+  width: 100%;
+  align-items: center;
+  padding: 0 0.25rem;
 }
-.sh-suggestion-input{
-  padding: 0.375rem 0.75rem;
+.phone-country{
+  width: 2rem;
+  border: none;
+  align-self: center;
+  outline: none !important;
+  padding: 0.4rem;
+  border-right: 1px solid #0003;
 }
-.sh-suggest{
-  margin-bottom: 1rem;
-  padding: 0rem 0rem;
+.phone-number{
+  width: calc(100% - 2.2rem);
+  border: none;
+  align-self: center;
+  outline: none;
+  margin-bottom: 0;
+  padding: 0.4rem;
 }
-.sh-suggest-control::after{
-  margin-top: auto;
-  margin-bottom: auto;
-  margin-right: 0.255em;
+.sh-phone img{
+  padding: 0.125rem;
+  width: 2rem;
+  height: 2rem;
+}
+.phone-number::placeholder{
+  font-weight: 300;
+  opacity: 0.5;
 }
 
 .permissions-main {
@@ -111,6 +95,22 @@
   flex-grow: 1;
 }
 
+.sh-selected-item{
+  line-height: unset!important;
+}
+.sh-suggestion-input{
+  padding: 0.375rem 0.75rem;
+}
+.sh-suggest{
+  margin-bottom: 1rem;
+  padding: 0rem 0rem;
+}
+.sh-suggest-control::after{
+  margin-top: auto;
+  margin-bottom: auto;
+  margin-right: 0.255em;
+}
+
 .callout{
   --bs-link-color-rgb: 110,168,254;
   --bs-code-color: #e685b5;

package/dist/library.js

@@ -3613,7 +3613,7 @@ return (_ctx, _cache) => {
                         : vue.createCommentVNode("v-if", true)
                     ], 2 /* CLASS */))
                   : vue.createCommentVNode("v-if", true),
-                (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(getFieldComponent(field)), vue.mergeProps(getComponentProps(field), {
+                (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(getFieldComponent(field)), vue.mergeProps({ ref_for: true }, getComponentProps(field), {
                   isInvalid: typeof validationErrors.value[field.field] !== 'undefined',
                   onClick: $event => (fieldChanged(field.field)),
                   "onUpdate:modelValue": [$event => (fieldChanged(field.field)), $event => ((formFields.value[index].value) = $event)],
@@ -4146,6 +4146,7 @@ const useUserStore = pinia.defineStore('user-store', {
           }
           return false
         };
+        user.can = user.isAllowedTo;
         this.user = user;
       }).catch((reason) => {
         if (reason.response && reason.response.status) {
@@ -5741,7 +5742,8 @@ return (_ctx, _cache) => {
                     (_ctx.selectedRecord)
                       ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(action.canvasComponent), vue.mergeProps({
                           key: 0,
-                          onRecordUpdated: _ctx.reloadData
+                          onRecordUpdated: _ctx.reloadData,
+                          ref_for: true
                         }, _ctx.cleanCanvasProps(action), { record: _ctx.selectedRecord }), null, 16 /* FULL_PROPS */, ["onRecordUpdated", "record"]))
                       : vue.createCommentVNode("v-if", true)
                   ]),
@@ -7190,8 +7192,55 @@ return (_ctx, _cache) => {
 script.__scopeId = "data-v-2911509a";
 script.__file = "src/lib/components/core/auth/ShAuth.vue";
 
+var isAllowedTo = {
+    mounted(el, binding) {
+        const { user } = pinia.storeToRefs(useUserStore());
+        el.permission = binding.value;
+        if (!user.value.isAllowedTo(binding.value)) {
+            // store a reference to the parent node and next sibling
+            el.parentNodeRef = el.parentNode;
+            el.nextSiblingRef = el.nextSibling;
+            // create a comment node
+            el.commentNode = document.createComment(`v-if-user-can`);
+            // replace element with comment node
+            el.parentNode.replaceChild(el.commentNode, el);
+        }
+    },
+    updated(el, binding) {
+        const { user } = pinia.storeToRefs(useUserStore());
+        if (!user.value.isAllowedTo(binding.value)) {
+            // if the element is not already replaced, replace it with comment node
+            if (el.parentNode) {
+                el.parentNodeRef = el.parentNode;
+                el.nextSiblingRef = el.nextSibling;
+                if (!el.commentNode) {
+                    el.commentNode = document.createComment(`v-if-user-can`);
+                }
+                el.parentNode.replaceChild(el.commentNode, el);
+            }
+        } else {
+            // if the comment node is present, replace it with the original element
+            if (el.commentNode && el.parentNodeRef) {
+                if (el.nextSiblingRef) {
+                    el.parentNodeRef.insertBefore(el, el.nextSiblingRef);
+                } else {
+                    el.parentNodeRef.appendChild(el);
+                }
+                // remove the comment node from the parent node
+                el.parentNodeRef.removeChild(el.commentNode);
+                // remove the reference to the comment node
+                el.commentNode = null;
+            }
+        }
+    }
+};
+
 const ShFrontend = {
   install: (app, options) => {
+
+    // add user-can directive
+    app.directive('if-user-can', isAllowedTo);
+
     if(options.sessionTimeout){
       app.provide('sessionTimeout',options.sessionTimeout);
       shStorage.setItem('sessionTimeout',options.sessionTimeout);

package/dist/library.mjs

@@ -3601,7 +3601,7 @@ return (_ctx, _cache) => {
                         : createCommentVNode("v-if", true)
                     ], 2 /* CLASS */))
                   : createCommentVNode("v-if", true),
-                (openBlock(), createBlock(resolveDynamicComponent(getFieldComponent(field)), mergeProps(getComponentProps(field), {
+                (openBlock(), createBlock(resolveDynamicComponent(getFieldComponent(field)), mergeProps({ ref_for: true }, getComponentProps(field), {
                   isInvalid: typeof validationErrors.value[field.field] !== 'undefined',
                   onClick: $event => (fieldChanged(field.field)),
                   "onUpdate:modelValue": [$event => (fieldChanged(field.field)), $event => ((formFields.value[index].value) = $event)],
@@ -4134,6 +4134,7 @@ const useUserStore = defineStore('user-store', {
           }
           return false
         };
+        user.can = user.isAllowedTo;
         this.user = user;
       }).catch((reason) => {
         if (reason.response && reason.response.status) {
@@ -5729,7 +5730,8 @@ return (_ctx, _cache) => {
                     (_ctx.selectedRecord)
                       ? (openBlock(), createBlock(resolveDynamicComponent(action.canvasComponent), mergeProps({
                           key: 0,
-                          onRecordUpdated: _ctx.reloadData
+                          onRecordUpdated: _ctx.reloadData,
+                          ref_for: true
                         }, _ctx.cleanCanvasProps(action), { record: _ctx.selectedRecord }), null, 16 /* FULL_PROPS */, ["onRecordUpdated", "record"]))
                       : createCommentVNode("v-if", true)
                   ]),
@@ -7178,8 +7180,55 @@ return (_ctx, _cache) => {
 script.__scopeId = "data-v-2911509a";
 script.__file = "src/lib/components/core/auth/ShAuth.vue";
 
+var isAllowedTo = {
+    mounted(el, binding) {
+        const { user } = storeToRefs(useUserStore());
+        el.permission = binding.value;
+        if (!user.value.isAllowedTo(binding.value)) {
+            // store a reference to the parent node and next sibling
+            el.parentNodeRef = el.parentNode;
+            el.nextSiblingRef = el.nextSibling;
+            // create a comment node
+            el.commentNode = document.createComment(`v-if-user-can`);
+            // replace element with comment node
+            el.parentNode.replaceChild(el.commentNode, el);
+        }
+    },
+    updated(el, binding) {
+        const { user } = storeToRefs(useUserStore());
+        if (!user.value.isAllowedTo(binding.value)) {
+            // if the element is not already replaced, replace it with comment node
+            if (el.parentNode) {
+                el.parentNodeRef = el.parentNode;
+                el.nextSiblingRef = el.nextSibling;
+                if (!el.commentNode) {
+                    el.commentNode = document.createComment(`v-if-user-can`);
+                }
+                el.parentNode.replaceChild(el.commentNode, el);
+            }
+        } else {
+            // if the comment node is present, replace it with the original element
+            if (el.commentNode && el.parentNodeRef) {
+                if (el.nextSiblingRef) {
+                    el.parentNodeRef.insertBefore(el, el.nextSiblingRef);
+                } else {
+                    el.parentNodeRef.appendChild(el);
+                }
+                // remove the comment node from the parent node
+                el.parentNodeRef.removeChild(el.commentNode);
+                // remove the reference to the comment node
+                el.commentNode = null;
+            }
+        }
+    }
+};
+
 const ShFrontend = {
   install: (app, options) => {
+
+    // add user-can directive
+    app.directive('if-user-can', isAllowedTo);
+
     if(options.sessionTimeout){
       app.provide('sessionTimeout',options.sessionTimeout);
       shStorage.setItem('sessionTimeout',options.sessionTimeout);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iankibetsh/shframework",
-  "version": "4.6.6",
+  "version": "4.6.8",
   "description": "Vue library for handling laravel backend",
   "main": "dist/library.js",
   "module": "dist/library.mjs",
@@ -30,7 +30,7 @@
     "nprogress": "^0.2.0",
     "pinia": "^2.0.22",
     "sweetalert2": "^11.10.5",
-    "vue": "^3.2.37"
+    "vue": "^3.4.27"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^3.2.0",