@vc-shell/framework 1.1.44 → 1.1.46

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

@@ -1,202 +0,0 @@
-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: "material-check",
-};
-
-export const ExtendedWithTitle = Template.bind({});
-ExtendedWithTitle.args = {
-  extend: true,
-  title: "Extended status",
-  icon: "material-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

@@ -1,178 +0,0 @@
-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

@@ -1,203 +0,0 @@
-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

@@ -1,92 +0,0 @@
-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",
-  },
-};