@vc-shell/framework 1.0.188 → 1.0.190

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

@@ -0,0 +1,202 @@
+import { Meta, StoryFn } from "@storybook/vue3";
+import { SchemaBaseArgTypes } from "./common/args";
+import * as _ from "lodash-es";
+import page from "./pages/DynamicRender";
+import { template, templateWithVisibilityToggle } from "./common/templates";
+import { computed, reactive, ref } from "vue";
+import { StatusSchema } from "../../..";
+
+export default {
+  title: "DynamicViews/molecules/VcStatus",
+  component: page,
+  args: {
+    id: "statusFieldId",
+    component: "vc-status",
+    content: "Success status",
+    variant: "success",
+  },
+  argTypes: {
+    ..._.pick(SchemaBaseArgTypes, ["id", "visibility", "horizontalSeparator"]),
+    component: {
+      description: "Component type for status.",
+      type: {
+        required: true,
+        name: "string",
+      },
+      table: {
+        type: {
+          summary: "vc-status",
+        },
+        defaultValue: {
+          summary: "vc-status",
+        },
+      },
+    },
+    outline: {
+      description: "Whether the status is outlined or not.",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+        defaultValue: {
+          summary: "true",
+        },
+      },
+    },
+    extend: {
+      description: `Whether the status is extendable or not.`,
+      table: {
+        type: {
+          summary: "boolean",
+        },
+        defaultValue: {
+          summary: "false",
+        },
+      },
+    },
+    variant: {
+      description: "Status variant.",
+      table: {
+        type: {
+          summary: "info | warning | danger | success | light-danger",
+        },
+        defaultValue: {
+          summary: "info",
+        },
+      },
+    },
+    icon: {
+      description: "Status icon.",
+      control: "text",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    iconSize: {
+      description: "Status icon size.",
+      control: "radio",
+      options: ["xs", "s", "m", "l", "xl", "xxl", "xxxl"],
+      table: {
+        type: {
+          summary: `xs | s | m | l | xl | xxl | xxxl`,
+        },
+        defaultValue: {
+          summary: "m",
+        },
+      },
+    },
+    iconVariant: {
+      description: "Status icon variant.",
+      control: "radio",
+      options: ["warning", "danger", "success"],
+      table: {
+        type: {
+          summary: "warning | danger | success",
+        },
+      },
+    },
+    title: {
+      description: `Status title.
+      Supports i18n keys.`,
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    content: {
+      description: `Used to display the content of the status. It can be a \`string\` or an \`object with a method property\`.
+      Method property could be a function or \`computed property\` or \`ref\`, returning a \`string\` value.
+      Method should be defined in the blade \`scope\`.
+      `,
+      type: {
+        required: true,
+        name: "string",
+      },
+      table: {
+        type: {
+          summary: "{ method: string } | string",
+        },
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: "none",
+      },
+    },
+  },
+} satisfies Meta<StatusSchema>;
+
+export const Template: StoryFn<StatusSchema> = (args) => ({
+  components: { page },
+  setup() {
+    return { args };
+  },
+  template,
+});
+
+export const ContentAsMethod: StoryFn<StatusSchema> = (args) => ({
+  components: { page },
+  setup() {
+    const context = reactive({
+      scope: {
+        mockedMethod: () => "I am status content",
+      },
+    });
+    return { args, context };
+  },
+  template,
+});
+ContentAsMethod.args = {
+  content: { method: "mockedMethod" },
+};
+
+export const ContentAsComputed: StoryFn<StatusSchema> = (args) => ({
+  components: { page },
+  setup() {
+    const context = reactive({
+      scope: {
+        mockedComputed: computed(() => "I am status content"),
+      },
+    });
+    return { args, context };
+  },
+  template,
+});
+ContentAsComputed.args = {
+  content: { method: "mockedComputed" },
+};
+
+export const WithIcon = Template.bind({});
+WithIcon.args = {
+  icon: "fas fa-check",
+};
+
+export const ExtendedWithTitle = Template.bind({});
+ExtendedWithTitle.args = {
+  extend: true,
+  title: "Extended status",
+  icon: "fas fa-check",
+};
+
+export const WithVisibilityMethod: StoryFn<StatusSchema> = (args) => ({
+  components: { page },
+  setup() {
+    const isVisible = ref(false);
+    const toggle = () => {
+      isVisible.value = !isVisible.value;
+    };
+
+    const context = reactive({
+      scope: {
+        visibilityFn: isVisible,
+      },
+    });
+    return { args, context, toggle };
+  },
+  template: templateWithVisibilityToggle,
+});

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

@@ -0,0 +1,178 @@
+import { SwitchSchema } from "../../..";
+import { Meta, StoryFn } from "@storybook/vue3";
+import { SchemaBaseArgTypes } from "./common/args";
+import * as _ from "lodash-es";
+import page from "./pages/DynamicRender";
+import { template, templateWithVisibilityToggle } from "./common/templates";
+import { reactive, ref } from "vue";
+
+export default {
+  title: "DynamicViews/molecules/VcSwitch",
+  component: page,
+  args: {
+    id: "switchFieldId",
+    component: "vc-switch",
+    property: "mockedProperty",
+  },
+  argTypes: {
+    ..._.omit(SchemaBaseArgTypes, ["placeholder", "multilanguage"]),
+    component: {
+      description: "Component type.",
+      type: {
+        required: true,
+        name: "string",
+      },
+      table: {
+        type: {
+          summary: "vc-switch",
+        },
+        defaultValue: {
+          summary: "vc-switch",
+        },
+      },
+    },
+    trueValue: {
+      description: "Value when switch is on.",
+      table: {
+        type: {
+          summary: "any",
+        },
+        defaultValue: {
+          summary: "true",
+        },
+      },
+    },
+    falseValue: {
+      description: "Value when switch is off.",
+      table: {
+        type: {
+          summary: "any",
+        },
+        defaultValue: {
+          summary: "false",
+        },
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: "none",
+      },
+    },
+  },
+} as Meta<SwitchSchema>;
+
+export const Template: StoryFn<SwitchSchema> = (args) => ({
+  components: { page },
+  setup() {
+    const context = reactive({
+      item: {
+        mockedProperty: true,
+      },
+    });
+    return { args, context };
+  },
+  template,
+});
+
+export const InvertedValues = Template.bind({});
+InvertedValues.args = {
+  trueValue: false,
+  falseValue: true,
+};
+
+export const WithLabel = Template.bind({});
+WithLabel.args = {
+  label: "Switch label",
+};
+
+export const WithTooltip = WithLabel.bind({});
+WithTooltip.args = {
+  tooltip: "Switch tooltip",
+};
+
+export const WithValidation = Template.bind({});
+WithValidation.args = {
+  label: "Switch label",
+  rules: {
+    required: true,
+  },
+};
+
+export const WithDisabled: StoryFn<SwitchSchema> = (args) => ({
+  components: { page },
+  setup() {
+    const context = reactive({
+      item: {
+        mockedProperty: true,
+      },
+      scope: {
+        disabledFn: true,
+      },
+    });
+    return { args, context };
+  },
+  template,
+});
+WithDisabled.args = {
+  label: "Switch label",
+  disabled: {
+    method: "disabledFn",
+  },
+};
+
+export const WithVisibilityMethod: StoryFn<SwitchSchema> = (args) => ({
+  components: { page },
+  setup() {
+    const isVisible = ref(false);
+    const toggle = () => {
+      isVisible.value = !isVisible.value;
+    };
+
+    const context = reactive({
+      item: {
+        mockedProperty: true,
+      },
+      scope: {
+        visibilityFn: isVisible,
+      },
+    });
+    return { args, context, toggle };
+  },
+  template: templateWithVisibilityToggle,
+});
+WithVisibilityMethod.args = {
+  label: "Switch label",
+  visibility: {
+    method: "visibilityFn",
+  },
+};
+
+export const WithUpdateMethod: StoryFn<SwitchSchema> = (args) => ({
+  components: { page },
+  setup() {
+    const context = reactive({
+      item: {
+        mockedProperty: true,
+      },
+      scope: {
+        updateFn: (value: string) => alert(`Value updated to: ${value}`),
+      },
+    });
+    return { args, context };
+  },
+  template,
+});
+WithUpdateMethod.args = {
+  label: "Switch label",
+  update: {
+    method: "updateFn",
+  },
+};
+
+export const WithHorizontalSeparator = Template.bind({});
+WithHorizontalSeparator.args = {
+  label: "Switch label",
+  horizontalSeparator: true,
+};

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

@@ -0,0 +1,203 @@
+import { Meta, StoryFn } from "@storybook/vue3";
+import { TextareaSchema } from "../../..";
+import { SchemaBaseArgTypes } from "./common/args";
+import page from "./pages/DynamicRender";
+import { template, templateWithVisibilityToggle } from "./common/templates";
+import { reactive, ref } from "vue";
+
+export default {
+  title: "DynamicViews/molecules/VcTextarea",
+  component: page,
+  args: {
+    id: "textareaId",
+    component: "vc-textarea",
+    property: "mockedProperty",
+  },
+  argTypes: {
+    ...SchemaBaseArgTypes,
+    component: {
+      description: "Component type.",
+      type: {
+        required: true,
+        name: "string",
+      },
+      table: {
+        type: {
+          summary: "vc-textarea",
+        },
+        defaultValue: {
+          summary: "vc-textarea",
+        },
+      },
+    },
+    clearable: {
+      description: "Whether the textarea is clearable or not.",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+      },
+    },
+    maxlength: {
+      description: "Maximum number of characters that can be entered.",
+      control: "number",
+      table: {
+        type: {
+          summary: "number",
+        },
+        defaultValue: {
+          summary: "1024",
+        },
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: "none",
+      },
+    },
+  },
+} satisfies Meta<TextareaSchema>;
+
+export const Template: StoryFn<TextareaSchema> = (args) => ({
+  components: { page },
+  setup() {
+    const context = reactive({
+      item: {
+        mockedProperty: "I am input field",
+      },
+    });
+    return { args, context };
+  },
+  template,
+});
+
+export const WithPlaceholder: StoryFn<TextareaSchema> = (args) => ({
+  components: { page },
+  setup() {
+    const context = reactive({
+      item: {
+        mockedProperty: "",
+      },
+    });
+    return { args, context };
+  },
+  template,
+});
+WithPlaceholder.args = {
+  placeholder: "Textarea placeholder",
+};
+
+export const WithLabel = Template.bind({});
+WithLabel.args = {
+  label: "Textarea label",
+};
+
+export const WithTooltip = Template.bind({});
+WithTooltip.args = {
+  label: "Textarea label",
+  tooltip: "Textarea tooltip",
+};
+
+export const WithValidation: StoryFn<TextareaSchema> = (args) => ({
+  components: { page },
+  setup() {
+    const context = reactive({
+      item: {
+        mockedProperty: null,
+      },
+    });
+    return { args, context };
+  },
+  template,
+});
+WithValidation.args = {
+  label: "Textarea label",
+  placeholder: "Enter text here",
+  rules: {
+    required: true,
+  },
+};
+
+export const WithDisabled: StoryFn<TextareaSchema> = (args) => ({
+  components: { page },
+  setup() {
+    const context = reactive({
+      item: {
+        mockedProperty: "I am input field",
+      },
+      scope: {
+        disabledFn: true,
+      },
+    });
+    return { args, context };
+  },
+  template,
+});
+WithDisabled.args = {
+  label: "Textarea label",
+  disabled: {
+    method: "disabledFn",
+  },
+};
+
+export const WithClearable = Template.bind({});
+WithClearable.args = {
+  label: "Textarea label",
+  clearable: true,
+};
+
+export const WithVisibilityMethod: StoryFn<TextareaSchema> = (args) => ({
+  components: { page },
+  setup() {
+    const isVisible = ref(false);
+    const toggle = () => {
+      isVisible.value = !isVisible.value;
+    };
+
+    const context = reactive({
+      item: {
+        mockedProperty: "I am input field",
+      },
+      scope: {
+        visibilityFn: isVisible,
+      },
+    });
+
+    return { args, context, toggle };
+  },
+  template: templateWithVisibilityToggle,
+});
+WithVisibilityMethod.args = {
+  label: "Textarea label",
+  visibility: { method: "visibilityFn" },
+};
+
+export const WithUpdateMethod: StoryFn<TextareaSchema> = (args) => ({
+  components: { page },
+  setup() {
+    const context = reactive({
+      item: {
+        mockedProperty: "I am input field",
+      },
+      scope: {
+        updateFn: (value: string) => alert(`Value updated to: ${value}`),
+      },
+    });
+    return { args, context };
+  },
+  template,
+});
+WithUpdateMethod.args = {
+  label: "Textarea label",
+  update: {
+    method: "updateFn",
+  },
+};
+
+export const WithHorizontalSeparator = Template.bind({});
+WithHorizontalSeparator.args = {
+  label: "Textarea label",
+  horizontalSeparator: true,
+};

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

@@ -0,0 +1,92 @@
+import { Meta, StoryFn } from "@storybook/vue3";
+import { VideoSchema } from "../../..";
+import { template, templateWithVisibilityToggle } from "./common/templates";
+import page from "./pages/DynamicRender";
+import * as _ from "lodash-es";
+import { SchemaBaseArgTypes } from "./common/args";
+import { reactive, ref } from "vue";
+
+export default {
+  title: "DynamicViews/atoms/VcVideo",
+  component: page,
+  args: {
+    id: "videoFieldId",
+    component: "vc-video",
+    property: "mockedProperty",
+  },
+  argTypes: {
+    ..._.pick(SchemaBaseArgTypes, ["id", "property", "label", "visibility", "tooltip"]),
+    component: {
+      description: "Component type.",
+      type: {
+        required: true,
+        name: "string",
+      },
+      table: {
+        type: {
+          summary: "vc-video",
+        },
+        defaultValue: {
+          summary: "vc-video",
+        },
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: "none",
+      },
+    },
+  },
+} satisfies Meta<VideoSchema>;
+
+export const Template: StoryFn<VideoSchema> = (args) => ({
+  components: { page },
+  setup() {
+    const context = reactive({
+      item: {
+        mockedProperty: "https://www.youtube.com/embed/PeXX-V-dwpA",
+      },
+    });
+    return { args, context };
+  },
+  template,
+});
+
+export const WithLabel = Template.bind({});
+WithLabel.args = {
+  label: "Video label",
+};
+
+export const WithTooltip = Template.bind({});
+WithTooltip.args = {
+  label: "Video label",
+  tooltip: "Video tooltip",
+};
+
+export const WithVisibility: StoryFn<VideoSchema> = (args) => ({
+  components: { page },
+  setup() {
+    const isVisible = ref(false);
+    const toggle = () => {
+      isVisible.value = !isVisible.value;
+    };
+
+    const context = reactive({
+      item: {
+        mockedProperty: "https://www.youtube.com/embed/PeXX-V-dwpA",
+      },
+      scope: {
+        visibilityFn: isVisible,
+      },
+    });
+    return { args, context, toggle };
+  },
+  template: templateWithVisibilityToggle,
+});
+WithVisibility.args = {
+  visibility: {
+    method: "visibilityFn",
+  },
+};