@vc-shell/framework 1.0.227 → 1.0.229

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vc-shell/framework",
-  "version": "1.0.227",
+  "version": "1.0.229",
   "type": "module",
   "main": "./dist/framework.js",
   "types": "./dist/index.d.ts",
@@ -60,9 +60,9 @@
   "devDependencies": {
     "@types/dompurify": "^3.0.5",
     "@types/quill": "^2.0.14",
-    "@vc-shell/api-client-generator": "^1.0.227",
-    "@vc-shell/config-generator": "^1.0.227",
-    "@vc-shell/ts-config": "^1.0.227",
+    "@vc-shell/api-client-generator": "^1.0.229",
+    "@vc-shell/config-generator": "^1.0.229",
+    "@vc-shell/ts-config": "^1.0.229",
     "@vitejs/plugin-vue": "^5.0.3",
     "sass": "^1.69.6",
     "shx": "^0.3.4",

package/shared/modules/dynamic/components/SchemaRender.ts

@@ -19,6 +19,7 @@ import { visibilityHandler } from "../helpers/visibilityHandler";
 import { toValue } from "@vueuse/core";
 import { safeIn } from "../helpers/safeIn";
 import { unrefNested } from "../helpers/unrefNested";
+import { usePermissions } from "../../../../core/composables";
 
 const schemeRenderProps = {
   context: {
@@ -48,6 +49,7 @@ export default defineComponent({
   setup(props: ExtractPropTypes<typeof schemeRenderProps>, ctx) {
     const { currentLocale } = toRefs(props);
     const internalFormData = reactive({});
+    const { hasAccess } = usePermissions();
 
     watch(
       () => props.modelValue,
@@ -70,6 +72,12 @@ export default defineComponent({
         "div",
         { class: "tw-flex tw-flex-col tw-gap-4" },
         props.uiSchema.reduce((arr, field): VNode[] => {
+          console.log(field.id, field.permissions, hasAccess(field.permissions));
+
+          if (safeIn("permissions", field) && !hasAccess(field.permissions)) {
+            return arr;
+          }
+
           if (
             safeIn("visibility", field) &&
             field.visibility?.method &&

package/shared/modules/dynamic/factories/base/useDetailsFactory.ts

@@ -20,8 +20,7 @@ export const useDetailsFactory = <Item extends { id?: string }>(factoryParams: U
     const itemTemp = ref<Item>();
     const isModified = ref(false);
     const isFormValid = useIsFormValid();
-    let isDirty: Ref<boolean> = useIsFormDirty();
-    const isDisabled = computed(() => !isDirty.value || !isFormValid.value);
+    const isDisabled = computed(() => !isModified.value || !isFormValid.value);
 
     const { loading: itemLoading, action: load } = useAsync<ItemId>(async (args?: ItemId) => {
       item.value = await factoryParams.load(args);
@@ -32,7 +31,6 @@ export const useDetailsFactory = <Item extends { id?: string }>(factoryParams: U
       if (validationState.value.valid) {
         const res = await factoryParams.saveChanges?.(item as Item);
         isModified.value = false;
-        isDirty = ref(false);
 
         const id = item?.id ?? res?.id;
 
@@ -52,10 +50,13 @@ export const useDetailsFactory = <Item extends { id?: string }>(factoryParams: U
 
     const validationState = computed(
       (): IValidationState<Item> => ({
-        dirty: isDirty.value || isModified.value,
+        /**
+         * @deprecated `dirty` - use `modified` instead
+         */
+        dirty: isModified.value,
         valid: isFormValid.value,
         modified: isModified.value,
-        disabled: isDisabled.value || !isModified.value,
+        disabled: isDisabled.value,
         validated: !isDisabled.value && isModified.value,
         cachedValue: itemTemp.value,
         errorBag: errorBag.value,
@@ -89,7 +90,6 @@ export const useDetailsFactory = <Item extends { id?: string }>(factoryParams: U
 
     const resetValidationState = () => {
       isModified.value = false;
-      isDirty = ref(false);
     };
 
     return {

package/shared/modules/dynamic/helpers/nodeBuilder.ts

@@ -12,6 +12,9 @@ import { i18n } from "./../../../../core/plugins/i18n";
 import { visibilityHandler } from "./visibilityHandler";
 import { toRefs } from "@vueuse/core";
 import { unrefNested } from "./unrefNested";
+import { usePermissions } from "../../../../core/composables";
+
+const { hasAccess } = usePermissions();
 
 function disabledHandler(
   disabled: { method?: string } | boolean,
@@ -165,6 +168,10 @@ function nodeBuilder<
     if (toValue(model) && Array.isArray(toValue(model))) {
       return toValue(model).map((modelItem: ToRefs<{ [x: string]: unknown; id: string }>) => {
         return controlSchema.fields.reduce((arr, fieldItem) => {
+          if (safeIn("permissions", fieldItem) && !hasAccess(fieldItem.permissions)) {
+            return arr;
+          }
+
           if (
             safeIn("visibility", fieldItem) &&
             fieldItem.visibility?.method &&
@@ -190,6 +197,10 @@ function nodeBuilder<
 
     return [
       controlSchema.fields.reduce((arr, field) => {
+        if (safeIn("permissions", field) && !hasAccess(field.permissions)) {
+          return arr;
+        }
+
         if (
           safeIn("visibility", field) &&
           field.visibility?.method &&

package/shared/modules/dynamic/types/index.ts

@@ -65,6 +65,11 @@ export type ToolbarSchema = {
   title?: string;
   icon?: string;
   method: string;
+  /**
+   * Permissions for the toolbar button. If the user does not have the required permissions, the toolbar button will not be displayed.
+   * @type {string | string[]}
+   */
+  permissions?: string | string[];
 };
 
 export interface SettingsBase {
@@ -277,6 +282,11 @@ export interface SchemaBase {
    * Adds horizontal separator after component.
    */
   horizontalSeparator?: boolean;
+  /**
+   * Permissions for the component. If the user does not have the required permissions, the component will not be displayed.
+   * @type {string | string[]}
+   */
+  permissions?: string | string[];
 }
 
 /**
@@ -477,7 +487,8 @@ export interface InputSchema extends SchemaBase {
  *  Video schema interface.
  * @interface
  */
-export interface VideoSchema extends Pick<SchemaBase, "id" | "property" | "label" | "visibility" | "tooltip"> {
+export interface VideoSchema
+  extends Pick<SchemaBase, "id" | "property" | "label" | "visibility" | "tooltip" | "permissions"> {
   /**
    * Component type for video.
    * @type {"vc-video"}
@@ -490,7 +501,10 @@ export interface VideoSchema extends Pick<SchemaBase, "id" | "property" | "label
  * @interface
  */
 export interface FieldSchema
-  extends Pick<SchemaBase, "id" | "property" | "label" | "visibility" | "tooltip" | "horizontalSeparator"> {
+  extends Pick<
+    SchemaBase,
+    "id" | "property" | "label" | "visibility" | "tooltip" | "horizontalSeparator" | "permissions"
+  > {
   /**
    * Component type for field.
    * @type {"vc-field"}
@@ -525,7 +539,7 @@ export interface FieldSchema
  * Image schema interface.
  * @interface
  */
-export interface ImageSchema extends Pick<SchemaBase, "id" | "property" | "visibility"> {
+export interface ImageSchema extends Pick<SchemaBase, "id" | "property" | "visibility" | "permissions"> {
   /**
    * Component type for image.
    * @type {"vc-image"}
@@ -562,7 +576,7 @@ export interface ImageSchema extends Pick<SchemaBase, "id" | "property" | "visib
  * Status schema interface.
  * @interface
  */
-export interface StatusSchema extends Pick<SchemaBase, "id" | "visibility" | "horizontalSeparator"> {
+export interface StatusSchema extends Pick<SchemaBase, "id" | "visibility" | "horizontalSeparator" | "permissions"> {
   /**
    * Component type for status.
    * @type {"vc-status"}
@@ -686,7 +700,7 @@ export interface EditorSchema extends Omit<SchemaBase, "onBlur"> {
  * @interface
  */
 export interface DynamicPropertiesSchema
-  extends Pick<SchemaBase, "id" | "disabled" | "property" | "visibility" | "horizontalSeparator"> {
+  extends Pick<SchemaBase, "id" | "disabled" | "property" | "visibility" | "horizontalSeparator" | "permissions"> {
   /**
    * The component type for dynamic properties.
    * @type {"vc-dynamic-properties"}
@@ -745,7 +759,8 @@ export interface GallerySchema
  * Interface for a card schema.
  * @interface
  */
-export interface CardSchema extends RequiredBy<Pick<SchemaBase, "id" | "label" | "visibility">, "label"> {
+export interface CardSchema
+  extends RequiredBy<Pick<SchemaBase, "id" | "label" | "visibility" | "permissions">, "label"> {
   /**
    * Component type for the card.
    * @type {"vc-card"}
@@ -784,7 +799,7 @@ export interface CardSchema extends RequiredBy<Pick<SchemaBase, "id" | "label" |
   variant?: ComponentProps<typeof VcCard>["variant"];
 }
 
-export interface WidgetsSchema extends Pick<SchemaBase, "id" | "horizontalSeparator"> {
+export interface WidgetsSchema extends Pick<SchemaBase, "id" | "horizontalSeparator" | "permissions"> {
   component: "vc-widgets";
   children: string[];
 }
@@ -842,7 +857,7 @@ export interface RadioButtonSchema extends Omit<SchemaBase, "multilanguage" | "p
  * Fieldset schema interface.
  * @interface
  */
-export interface FieldsetSchema extends Pick<SchemaBase, "id" | "visibility" | "horizontalSeparator"> {
+export interface FieldsetSchema extends Pick<SchemaBase, "id" | "visibility" | "horizontalSeparator" | "permissions"> {
   /**
    * Component type for the fieldset.
    * @type {"vc-fieldset"}
@@ -896,7 +911,7 @@ export interface SwitchSchema extends Omit<SchemaBase, "placeholder" | "multilan
 }
 
 export type TableSchema = Omit<ListContentSchema, "filter"> &
-  Pick<SchemaBase, "id" | "property" | "visibility"> & {
+  Pick<SchemaBase, "id" | "property" | "visibility" | "permissions"> & {
     /**
      * Configuration for the add new row button in the table.
      * Used when table is in editing mode.
@@ -923,7 +938,7 @@ export type TableSchema = Omit<ListContentSchema, "filter"> &
  * Button schema interface.
  * @interface
  */
-export interface ButtonSchema extends Pick<SchemaBase, "id" | "disabled" | "visibility"> {
+export interface ButtonSchema extends Pick<SchemaBase, "id" | "disabled" | "visibility" | "permissions"> {
   /**
    * Component type.
    * @type {"vc-button"}
@@ -981,7 +996,7 @@ export interface ButtonSchema extends Pick<SchemaBase, "id" | "disabled" | "visi
  * Custom component schema interface.
  * @interface
  */
-export interface CustomComponentSchema extends Pick<SchemaBase, "id" | "visibility"> {
+export interface CustomComponentSchema extends Pick<SchemaBase, "id" | "visibility" | "permissions"> {
   /**
    * Component type for custom component.
    * @type {vc-custom}
@@ -1000,7 +1015,7 @@ export interface CustomComponentSchema extends Pick<SchemaBase, "id" | "visibili
 export interface RatingSchema
   extends Pick<
     SchemaBase,
-    "id" | "visibility" | "label" | "property" | "tooltip" | "horizontalSeparator" | "placeholder"
+    "id" | "visibility" | "label" | "property" | "tooltip" | "horizontalSeparator" | "placeholder" | "permissions"
   > {
   /**
    * Component type for rating.

package/ui/components/organisms/vc-blade/_internal/vc-blade-toolbar/vc-blade-toolbar.vue

@@ -10,7 +10,7 @@
         :key="item.id"
       >
         <VcBladeToolbarButton
-          v-if="item.isVisible === undefined || item.isVisible"
+          v-if="$hasAccess(item.permissions) && (item.isVisible === undefined || item.isVisible)"
           :is-expanded="isExpanded"
           :icon="item.icon"
           :title="unref(item.title)"