@vc-shell/framework 1.0.215 → 1.0.216

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')"

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

@@ -770,6 +770,33 @@ export interface CheckboxSchema extends Omit<SchemaBase, "multilanguage" | "plac
   falseValue?: boolean;
 }
 
+export interface RadioButtonSchema extends Omit<SchemaBase, "multilanguage" | "placeholder"> {
+  /**
+   * Component type for radio button.
+   * @type {"vc-radio-button-group"}
+   */
+  component: "vc-radio-button-group";
+  /**
+   * Allows to select a boolean value.
+   */
+  binary?: boolean;
+  /**
+   * List of options to be displayed as radio-buttons.
+   * @description Array of should be defined in the blade `scope`.
+   */
+  options: string;
+  /**
+   * Name of property that holds radio button value.
+   * @type {string}
+   */
+  optionValue?: string;
+  /**
+   * Name of property that holds radio button label.
+   * @type {string}
+   */
+  optionLabel?: string;
+}
+
 /**
  * Fieldset schema interface.
  * @interface
@@ -963,13 +990,17 @@ export type ControlSchema =
   | SwitchSchema
   | TableSchema
   | CustomComponentSchema
-  | RatingSchema;
+  | RatingSchema
+  | RadioButtonSchema;
 
 export interface FilterBase {
   columns: {
-    title: string;
+    /**
+     * @deprecated use 'label' in 'controls' instead
+     */
+    title?: string;
     id: string;
-    controls: (FilterCheckbox | FilterDateInput)[];
+    controls: (FilterCheckbox | FilterDateInput | FilterSwitch | FilterSelect | FilterRadio)[];
   }[];
 }
 
@@ -977,6 +1008,8 @@ export type FilterCheckbox = {
   id: string;
   field: string;
   multiple?: boolean;
+  label?: string;
+  tooltip?: string;
   data: string;
   optionValue: string;
   optionLabel: string;
@@ -987,9 +1020,45 @@ export type FilterDateInput = {
   id: string;
   field: string;
   label?: string;
+  tooltip?: string;
   component: InputSchema["component"];
 };
 
+export type FilterSwitch = {
+  id: string;
+  field: string;
+  data: string;
+  label?: string;
+  tooltip?: string;
+  multiple?: boolean;
+  optionValue: string;
+  optionLabel: string;
+  component: SwitchSchema["component"];
+};
+
+export type FilterSelect = {
+  id: string;
+  field: string;
+  label?: string;
+  tooltip?: string;
+  data: string;
+  multiple?: boolean;
+  component: SelectSchema["component"];
+  optionValue: string;
+  optionLabel: string;
+};
+
+export type FilterRadio = {
+  id: string;
+  field: string;
+  label?: string;
+  tooltip?: string;
+  data: string;
+  optionValue: string;
+  optionLabel: string;
+  component: RadioButtonSchema["component"];
+};
+
 export type FilterSchema = FilterBase;
 
 export interface OverridesSchema {

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

@@ -19,6 +19,7 @@ import {
   VcSwitch,
   VcTable,
   VcRating,
+  VcRadioButton,
 } from "../../../../ui/components";
 import type { ComponentProps, ComponentEmit, ComponentSlots } from "vue-component-type-helpers";
 
@@ -134,6 +135,10 @@ export type ICheckbox = {
   slots?: Partial<Pick<ComponentSlots<typeof VcCheckbox>, "default" | "error">>;
 } & FieldOpts<typeof VcCheckbox>;
 
+export type IRadioButton = {
+  props: ComponentProps<typeof VcRadioButton> | IControlBaseProps;
+} & FieldOpts<typeof VcRadioButton>;
+
 export type IDynamicProperties = {
   props:
     | (ComponentProps<typeof VcDynamicProperty> & FromGenericEventsToProps<ComponentEmit<typeof VcDynamicProperty>>)