@vc-shell/framework 1.0.214 → 1.0.216

package/shared/modules/dynamic/components/fields/RadioButtonGroup.ts

@@ -0,0 +1,82 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Component, ExtractPropTypes, h, toValue, unref } from "vue";
+import { unrefNested } from "../../helpers/unrefNested";
+import componentProps from "./props";
+import ValidationField from "./ValidationField";
+import { RadioButton } from "../factories";
+import { RadioButtonSchema } from "../../types";
+import { getModel } from "../../helpers/getters";
+import * as _ from "lodash-es";
+import { VcLabel, VcHint } from "../../../../../ui/components";
+
+export default {
+  name: "RadioButtonGroup",
+  props: componentProps,
+  setup(props: ExtractPropTypes<typeof componentProps> & { element: RadioButtonSchema }) {
+    return () => {
+      const label = unrefNested(props.baseProps).label;
+      const options: any[] =
+        toValue(getModel(props.element.options, props.fieldContext ?? {})) ||
+        toValue(unref(props.bladeContext.scope)?.[props.element.options]);
+
+      const fields = options.map((opt) =>
+        RadioButton({
+          props: Object.assign(
+            {},
+            {
+              value: props.element.optionValue ? toValue(getModel(props.element.optionValue, opt ?? {})) : opt,
+              binary: props.element.binary,
+              label: props.element.optionLabel ? toValue(getModel(props.element.optionLabel, opt ?? {})) : opt,
+            },
+            _.omit(unrefNested(props.baseProps), "label"),
+            {
+              class: unrefNested(props.baseProps).classNames ?? "",
+            },
+          ),
+        }),
+      );
+
+      const render = [
+        label
+          ? h(
+              VcLabel,
+              { required: props.element.rules?.required },
+              {
+                default: () => label,
+                tooltip: unrefNested(props.baseProps).tooltip ? () => unrefNested(props.baseProps).tooltip : undefined,
+              },
+            )
+          : undefined,
+        fields.map((field) => h(field.component as Component, field.props)),
+        h({
+          props: ["error", "errorMessage"],
+          components: { VcHint },
+          template: `
+            <VcHint v-if="error" class="vc-textarea__error">
+              {{ errorMessage }}
+            </VcHint>
+            `,
+        }),
+      ];
+
+      if (props.element.rules) {
+        return h(
+          ValidationField,
+          {
+            props: {
+              rules: props.element.rules,
+              modelValue: unrefNested(props.baseProps).modelValue,
+              label: unrefNested(props.baseProps).label,
+              name: unrefNested(props.baseProps).name,
+            },
+            index: props.elIndex,
+            rows: props.rows,
+          },
+          () => render,
+        );
+      } else {
+        return render;
+      }
+    };
+  },
+};

package/shared/modules/dynamic/components/fields/storybook/Checkbox.stories.ts

@@ -7,7 +7,7 @@ import { SchemaBaseArgTypes } from "./common/args";
 import { CheckboxSchema } from "../../..";
 
 export default {
-  title: "DynamicViews/atoms/VcCheckbox",
+  title: "DynamicViews/molecules/VcCheckbox",
   component: page,
   args: {
     id: "checkboxId",

package/shared/modules/dynamic/components/fields/storybook/RadioButtonGroup.stories.ts

@@ -0,0 +1,224 @@
+import { Meta, StoryFn } from "@storybook/vue3";
+import { computed, reactive, ref } from "vue";
+import page from "./pages/DynamicRender";
+import { template, templateWithVisibilityToggle } from "./common/templates";
+import * as _ from "lodash-es";
+import { SchemaBaseArgTypes } from "./common/args";
+import { RadioButtonSchema } from "../../..";
+
+export default {
+  title: "DynamicViews/molecules/VcRadioButtonGroup",
+  component: page,
+  args: {
+    id: "radioButton",
+    component: "vc-radio-button-group",
+    property: "selectedProduct",
+    options: "products",
+  },
+  argTypes: {
+    ..._.omit(SchemaBaseArgTypes, ["multilanguage", "placeholder", "tooltip"]),
+    component: {
+      description: "Component type.",
+      type: {
+        required: true,
+        name: "string",
+      },
+      table: {
+        type: {
+          summary: "vc-radio-button",
+        },
+        defaultValue: {
+          summary: "vc-radio-button",
+        },
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: "none",
+      },
+    },
+  },
+} satisfies Meta<RadioButtonSchema>;
+
+export const Template: StoryFn<RadioButtonSchema> = (args) => ({
+  components: { page },
+  setup: () => {
+    const context = reactive({
+      item: {
+        selectedProduct: undefined,
+      },
+      scope: {
+        products: ["Product 1"],
+      },
+    });
+
+    return { args, context };
+  },
+  template,
+});
+
+export const Group: StoryFn<RadioButtonSchema> = (args) => ({
+  components: { page },
+  setup: () => {
+    const context = reactive({
+      item: {
+        selectedProduct: undefined,
+      },
+      scope: {
+        products: [
+          { id: 1, name: "Product 1" },
+          { id: 2, name: "Product 2" },
+          { id: 3, name: "Product 3" },
+        ],
+      },
+    });
+    return { args, context };
+  },
+  template,
+});
+Group.args = {
+  id: "radioButton",
+  component: "vc-radio-button-group",
+  property: "selectedProduct",
+  options: "products",
+  optionValue: "name",
+  optionLabel: "name",
+};
+
+export const StringGroup: StoryFn<RadioButtonSchema> = (args) => ({
+  components: { page },
+  setup: () => {
+    const context = reactive({
+      item: {
+        selectedProduct: undefined,
+      },
+      scope: {
+        products: ["Product 1", "Product 2", "Product 3"],
+      },
+    });
+    return { args, context };
+  },
+  template,
+});
+StringGroup.args = {
+  id: "radioButton",
+  component: "vc-radio-button-group",
+  property: "selectedProduct",
+  options: "products",
+};
+
+export const WithLabel = StringGroup.bind({});
+WithLabel.args = {
+  label: "Select one product",
+};
+
+export const WithTooltip = StringGroup.bind({});
+WithTooltip.args = {
+  label: "Select one product",
+  tooltip: "This is tooltip!",
+};
+
+export const Disabled: StoryFn<RadioButtonSchema> = (args) => ({
+  components: { page },
+  setup: () => {
+    const context = reactive({
+      item: {
+        selectedProduct: undefined,
+      },
+      scope: {
+        products: ["Product 1"],
+        disabledFn: computed(() => true),
+      },
+    });
+    return { args, context };
+  },
+  template,
+});
+Disabled.args = {
+  disabled: {
+    method: "disabledFn",
+  },
+};
+
+export const Binary: StoryFn<RadioButtonSchema> = (args) => ({
+  components: { page },
+  setup: () => {
+    const context = reactive({
+      item: {
+        selectedProduct: true,
+      },
+      scope: {
+        products: ["Product 1"],
+      },
+    });
+    return { args, context };
+  },
+  template,
+});
+Binary.args = {
+  binary: true,
+};
+
+export const WithVisibilityMethod: StoryFn<RadioButtonSchema> = (args) => ({
+  components: { page },
+  setup: () => {
+    const isVisible = ref(false);
+    const toggle = () => {
+      isVisible.value = !isVisible.value;
+    };
+
+    const context = reactive({
+      item: {
+        selectedProduct: true,
+      },
+      scope: {
+        products: ["Product 1"],
+        visibilityFn: isVisible,
+      },
+    });
+    return { args, context, toggle };
+  },
+  template: templateWithVisibilityToggle,
+});
+WithVisibilityMethod.args = {
+  visibility: {
+    method: "visibilityFn",
+  },
+};
+
+export const HorizontalSeparator = Template.bind({});
+HorizontalSeparator.args = {
+  horizontalSeparator: true,
+};
+
+export const WithUpdateMethod: StoryFn<RadioButtonSchema> = (args) => ({
+  components: { page },
+  setup: () => {
+    const context = reactive({
+      item: {
+        selectedProduct: true,
+      },
+      scope: {
+        products: ["Product 1", "Product 2", "Product 3"],
+        updateFn: (value: string) => alert(`Value updated to: ${value}`),
+      },
+    });
+    return { args, context };
+  },
+  template,
+});
+WithUpdateMethod.args = {
+  update: {
+    method: "updateFn",
+  },
+};
+
+export const WithRequiredRule = Template.bind({});
+WithRequiredRule.args = {
+  label: "Select one product",
+  rules: {
+    required: true,
+  },
+};

package/shared/modules/dynamic/composables/useFilterBuilder/index.ts

@@ -7,7 +7,6 @@ import {
   MaybeRef,
   unref,
   Component,
-  onMounted,
   RendererElement,
   RendererNode,
   VNode,
@@ -18,17 +17,29 @@ import {
   watchPostEffect,
 } from "vue";
 import * as _ from "lodash-es";
-import { Checkbox, InputField } from "../../components/factories";
+import { Checkbox, InputField, Switch, SelectField, RadioButton } from "../../components/factories";
 import { AsyncAction } from "../../../../../core/composables";
-import { VcButton, VcCol, VcContainer, VcRow } from "../../../../../ui/components";
+import { VcButton, VcCol, VcContainer, VcLabel, VcRow } from "../../../../../ui/components";
 import { useI18n } from "vue-i18n";
-import { FilterBase, FilterCheckbox, FilterDateInput } from "../../types";
+import { FilterBase, FilterCheckbox, FilterDateInput, FilterRadio, FilterSelect, FilterSwitch } from "../../types";
 
 interface Control {
   title: string;
-  fields: {
-    [x: string]: ReturnType<typeof Checkbox> | ReturnType<typeof InputField>;
-  };
+  fields: Record<
+    string,
+    {
+      fields: Record<
+        string,
+        | ReturnType<typeof Checkbox>
+        | ReturnType<typeof InputField>
+        | ReturnType<typeof Switch>
+        | ReturnType<typeof SelectField>
+        | ReturnType<typeof RadioButton>
+      >;
+      label?: string | ComputedRef<string> | undefined;
+      tooltip?: string | ComputedRef<string> | undefined;
+    }
+  >;
 }
 
 export interface UseFilterBuilder {
@@ -111,43 +122,178 @@ export default <Query>(args: {
             const fields = createCheckboxFromData(filterDataFromScope, control);
 
             if (fields) {
-              obj = fields;
+              obj[control.field] = {
+                fields,
+                label: computed(() => t(control.label ?? "")),
+                tooltip: computed(() => t(control.tooltip ?? "")),
+              };
             }
           }
+
           if (control.component === "vc-input") {
-            obj[control.field] = createInput(control);
+            obj[control.field] = {
+              fields: {
+                [control.field]: createInput(control),
+              },
+            };
+          }
+
+          if (control.component === "vc-switch") {
+            const filterData = control.data;
+            const filterDataFromScope = unref(args.scope)?.[filterData] ?? [];
+            const fields = createSwitchFromData(filterDataFromScope, control);
+
+            if (fields) {
+              obj[control.field] = {
+                fields,
+              };
+            }
+          }
+
+          if (control.component === "vc-select") {
+            const filterData = control.data;
+            const filterDataFromScope = unref(args.scope)?.[filterData] ?? [];
+            const fields = createSelectFromData(filterDataFromScope, control);
+
+            if (fields) {
+              obj[control.field] = {
+                fields,
+              };
+            }
+          }
+
+          if (control.component === "vc-radio-button-group") {
+            const filterData = control.data;
+            const filterDataFromScope = unref(args.scope)?.[filterData] ?? [];
+            const fields = createRadioButtonGroupFromData(filterDataFromScope, control);
+
+            if (fields) {
+              obj[control.field] = {
+                fields,
+                label: computed(() => t(control.label ?? "")),
+                tooltip: computed(() => t(control.tooltip ?? "")),
+              };
+            }
           }
 
           return obj;
         },
-        {} as Record<string, ReturnType<typeof Checkbox> | ReturnType<typeof InputField>>,
+        {} as Record<
+          string,
+          {
+            fields: Record<
+              string,
+              | ReturnType<typeof Checkbox>
+              | ReturnType<typeof InputField>
+              | ReturnType<typeof Switch>
+              | ReturnType<typeof SelectField>
+              | ReturnType<typeof RadioButton>
+            >;
+            label?: string | ComputedRef<string>;
+            tooltip?: string | ComputedRef<string>;
+          }
+        >,
       );
 
       return {
-        title: item.title,
+        title: item.title ?? "",
         fields: ctr,
       };
     });
   }
 
-  function createCheckboxFromData(data: MaybeRef<Record<string, string>[]>, control: FilterCheckbox) {
+  function createRadioButtonGroupFromData(data: MaybeRef<Record<string, string>[]>, control: FilterRadio) {
     if (!(toValue(data) && toValue(data).length)) return;
     return toValue(data).reduce(
       (obj, currC) => {
-        obj[currC[control.optionValue]] = Checkbox({
+        obj[currC[control.optionValue]] = {
+          ...RadioButton({
+            props: {
+              class: "tw-mb-2",
+              value: currC[control.optionValue],
+              label: currC[control.optionLabel],
+              modelValue: computed(() => filter.value[control.field]),
+              "onUpdate:modelValue": (e: string) => {
+                filter.value[control.field] = e;
+              },
+            },
+          }),
+        };
+
+        return obj;
+      },
+      {} as Record<string, ReturnType<typeof RadioButton>>,
+    );
+  }
+
+  function createSelectFromData(data: MaybeRef<Record<string, string>[]>, control: FilterSelect) {
+    if (!(toValue(data) && toValue(data).length)) return;
+
+    return {
+      [control.field]: SelectField({
+        props: {
+          class: "tw-mb-2",
+          label: computed(() => t(control.label ?? "")) as unknown as string,
+          tooltip: computed(() => t(control.tooltip ?? "")) as unknown as string,
+          options: toValue(data),
+          multiple: control.multiple,
+          optionLabel: control.optionLabel,
+          optionValue: control.optionValue,
+          clearable: false,
+          modelValue: computed(() => filter.value[control.field]),
+          "onUpdate:modelValue": (e: string | string[]) => {
+            if (Array.isArray(e) && e.length === 0) {
+              filter.value[control.field] = undefined;
+              return;
+            }
+            filter.value[control.field] = e;
+          },
+        },
+      }),
+    };
+  }
+
+  function createSwitchFromData(data: MaybeRef<Record<string, string>[]>, control: FilterSwitch) {
+    if (!(toValue(data) && toValue(data).length)) return;
+    return toValue(data).reduce(
+      (obj, currC) => {
+        obj[currC[control.optionValue]] = Switch({
           props: {
             class: "tw-mb-2",
+            label: toValue(currC[control.optionLabel]),
+            tooltip: computed(() => t(control.tooltip ?? "")) as unknown as string,
             modelValue: computed(() => isItemSelected(currC[control.optionValue], control.field)),
             "onUpdate:modelValue": (e: boolean) =>
               selectFilterItem(e, currC[control.optionValue], control.field, control.multiple),
           },
-          slots: {
-            default: () => toValue(currC[control.optionLabel]),
-          },
         });
 
         return obj;
       },
+      {} as Record<string, ReturnType<typeof Switch>>,
+    );
+  }
+
+  function createCheckboxFromData(data: MaybeRef<Record<string, string>[]>, control: FilterCheckbox) {
+    if (!(toValue(data) && toValue(data).length)) return;
+    return toValue(data).reduce(
+      (obj, currC) => {
+        obj[currC[control.optionValue]] = {
+          ...Checkbox({
+            props: {
+              class: "tw-mb-2",
+              modelValue: computed(() => isItemSelected(currC[control.optionValue], control.field)),
+              "onUpdate:modelValue": (e: boolean) =>
+                selectFilterItem(e, currC[control.optionValue], control.field, control.multiple),
+            },
+            slots: {
+              default: () => toValue(currC[control.optionLabel]),
+            },
+          }),
+        };
+
+        return obj;
+      },
       {} as Record<string, ReturnType<typeof Checkbox>>,
     );
   }
@@ -158,6 +304,7 @@ export default <Query>(args: {
         type: "date",
         class: "tw-mb-3",
         label: toValue(computed(() => t(control.label ?? ""))),
+        tooltip: toValue(computed(() => t(control.tooltip ?? ""))),
         modelValue: computed(() => filter.value[control.field]),
         "onUpdate:modelValue": (e: unknown) => (filter.value[control.field] = e),
       },
@@ -197,24 +344,46 @@ export default <Query>(args: {
       },
       () => [
         h(VcRow, () =>
-          Object.values(controls.value).map(({ title, fields }) =>
-            h(VcCol, { class: "tw-p-2 !tw-flex-auto" }, () => [
-              h(
-                "div",
-                { class: "tw-mb-4 tw-text-[#a1c0d4] tw-font-bold tw-text-[17px]" },
-                unref(computed(() => t(title))),
-              ),
-              Object.values(fields).map((item) => {
-                if ("component" in item && item.component) {
-                  return h(
-                    item.component as Component,
-                    { ...item.props, class: item.props.class },
-                    "slots" in item && item.slots ? { ...item.slots } : {},
-                  );
-                }
+          Object.values(controls.value).map(({ title, fields }) => {
+            return h(VcCol, { class: "tw-p-2" }, () => [
+              title
+                ? h(
+                    "div",
+                    { class: "tw-mb-4 tw-text-[#a1c0d4] tw-font-bold tw-text-[17px]" },
+                    unref(computed(() => t(title))),
+                  )
+                : undefined,
+              Object.values(fields)?.map((items) => {
+                return items.label
+                  ? h(
+                      VcLabel,
+                      {
+                        class: "tw-mb-2",
+                      },
+                      {
+                        default: () => items.label,
+                        tooltip: items.tooltip ? () => items.tooltip : undefined,
+                      },
+                    )
+                  : undefined;
               }),
-            ]),
-          ),
+              Object.values(fields)?.map((items) => {
+                return Object.values(items.fields).map((item) => {
+                  if ("component" in item && item.component) {
+                    return [
+                      h(
+                        item.component as Component,
+                        { ...item.props, class: item.props.class },
+                        "slots" in item && item.slots ? { ...item.slots } : {},
+                      ),
+                    ];
+                  } else {
+                    return item;
+                  }
+                });
+              }),
+            ]);
+          }),
         ),
         h(VcRow, () =>
           h(VcCol, { class: "tw-p-2 !tw-flex-auto" }, () =>

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

@@ -95,7 +95,7 @@ export type TListItemClickArgs<Item extends Record<string, any> = Record<string,
 
 export interface DetailsBaseBladeScope extends BaseBladeScope {
   disabled?: ComputedRef<boolean | undefined> | Ref<boolean | undefined>;
-  isBladeEditable?: ComputedRef<boolean | undefined> | Ref<boolean | undefined>;
+  isBladeEditable?: ComputedRef<boolean | undefined> | Ref<boolean | undefined> | boolean;
   multilanguage?: {
     loading: ComputedRef<boolean>;
     currentLocale: Ref<string>;

package/shared/modules/dynamic/pages/dynamic-blade-form.vue

@@ -7,7 +7,7 @@
     :width="settings?.width || '50%'"
     :toolbar-items="toolbarComputed"
     :title="title"
-    :has-unsaved-changes="isFormModified"
+    :modified="toValue(scope)?.isBladeEditable ? isFormModified : undefined"
     @close="$emit('close:blade')"
     @expand="$emit('expand:blade')"
     @collapse="$emit('collapse:blade')"
@@ -84,7 +84,7 @@ import {
   toRef,
 } from "vue";
 import { DynamicDetailsSchema, FormContentSchema, SettingsSchema } from "../types";
-import { reactiveComputed, toReactive, useMounted, useTemplateRefsList } from "@vueuse/core";
+import { reactiveComputed, refDefault, toReactive, useMounted, useTemplateRefsList } from "@vueuse/core";
 import {
   DetailsBladeContext,
   DetailsBaseBladeScope,
@@ -357,7 +357,7 @@ onBeforeClose(async () => {
 });
 
 provide("bladeContext", toReactive(bladeContext));
-provide("isBladeEditable", toRef(toValue(scope ?? {}), "isBladeEditable"));
+provide("isBladeEditable", refDefault(toRef(toValue(scope ?? {}), "isBladeEditable"), true));
 
 defineExpose({
   title: bladeTitle ?? "",

package/shared/modules/dynamic/pages/dynamic-blade-list.vue

@@ -10,7 +10,7 @@
     :class="{
       'tw-flex tw-flex-auto': isWidgetView,
     }"
-    :has-unsaved-changes="unref(scope)?.modified"
+    :modified="unref(scope)?.modified"
     @close="$emit('close:blade')"
     @expand="$emit('expand:blade')"
     @collapse="$emit('collapse:blade')"