@vc-shell/framework 1.0.187 → 1.0.189

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

@@ -0,0 +1,186 @@
+import { Meta, StoryFn } from "@storybook/vue3";
+import { ImageSchema } from "../../..";
+import { template, templateWithVisibilityToggle } from "./common/templates";
+import page from "./pages/DynamicRender";
+import { ref, reactive } from "vue";
+import * as _ from "lodash-es";
+import { SchemaBaseArgTypes } from "./common/args";
+
+export default {
+  title: "DynamicViews/atoms/VcImage",
+  component: page,
+  args: {
+    id: "imageId",
+    component: "vc-image",
+    property: "mockedProperty",
+    size: "xxl",
+  },
+  argTypes: {
+    ..._.pick(SchemaBaseArgTypes, ["id", "property", "visibility"]),
+    component: {
+      description: "Component type.",
+      type: {
+        required: true,
+        name: "string",
+      },
+      table: {
+        type: {
+          summary: "vc-image",
+        },
+        defaultValue: {
+          summary: "vc-image",
+        },
+      },
+    },
+    aspect: {
+      description: "Aspect ratio of the image.",
+      control: "radio",
+      options: ["1x1", "16x9", "4x3", "3x2"],
+      table: {
+        type: {
+          summary: "1x1 | 16x9 | 4x3 | 3x2",
+        },
+        defaultValue: {
+          summary: "1x1",
+        },
+      },
+    },
+    size: {
+      description: "Size of the image.",
+      control: "radio",
+      options: ["auto", "xs", "s", "m", "l", "xl", "xxl"],
+      table: {
+        type: {
+          summary: "auto | xs | s | m | l | xl | xxl",
+        },
+        defaultValue: {
+          summary: "auto",
+        },
+      },
+    },
+    background: {
+      description: "Size of the element's background image. Accepts auto, cover, contain CSS background-size value.",
+      control: "radio",
+      options: ["auto", "contain", "cover"],
+      table: {
+        type: {
+          summary: "auto | contain | cover",
+        },
+        defaultValue: {
+          summary: "cover",
+        },
+      },
+    },
+    rounded: {
+      description: "Rounded image.",
+      control: "boolean",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+        defaultValue: {
+          summary: "false",
+        },
+      },
+    },
+    bordered: {
+      description: "Bordered image.",
+      control: "boolean",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+        defaultValue: {
+          summary: "false",
+        },
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: "none",
+      },
+    },
+  },
+} satisfies Meta<ImageSchema>;
+
+export const Template: StoryFn<ImageSchema> = (args) => ({
+  props: args,
+  components: { page },
+  setup() {
+    const context = {
+      item: {
+        mockedProperty: "https://picsum.photos/200",
+      },
+    };
+
+    return {
+      args,
+      context,
+    };
+  },
+  template,
+});
+
+export const Rounded = Template.bind({});
+Rounded.args = {
+  rounded: true,
+};
+
+export const Bordered = Template.bind({});
+Bordered.args = {
+  bordered: true,
+};
+
+export const Aspect16x9 = Template.bind({});
+Aspect16x9.args = {
+  aspect: "16x9",
+};
+
+export const Aspect4x3 = Template.bind({});
+Aspect4x3.args = {
+  aspect: "4x3",
+};
+
+export const Aspect3x2 = Template.bind({});
+Aspect3x2.args = {
+  aspect: "3x2",
+};
+
+export const ExtraSmall = Template.bind({});
+ExtraSmall.args = {
+  size: "xs",
+};
+
+export const WithVisibilityMethod: StoryFn<ImageSchema> = (args) => ({
+  props: args,
+  components: { page },
+  setup() {
+    const isVisible = ref(false);
+    const toggle = () => {
+      isVisible.value = !isVisible.value;
+    };
+
+    const context = reactive({
+      item: {
+        mockedProperty: "https://picsum.photos/200",
+      },
+      scope: {
+        visibilityMethod: isVisible,
+      },
+    });
+
+    return {
+      args,
+      context,
+      toggle,
+    };
+  },
+  template: templateWithVisibilityToggle,
+});
+WithVisibilityMethod.args = {
+  visibility: {
+    method: "visibilityMethod",
+  },
+};

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

@@ -0,0 +1,267 @@
+import { reactive, ref } from "vue";
+import { template, templateWithVisibilityToggle } from "./common/templates";
+import page from "./pages/DynamicRender";
+import { Meta, StoryFn } from "@storybook/vue3";
+import { InputCurrencySchema } from "../../..";
+import * as _ from "lodash-es";
+import { SchemaBaseArgTypes } from "./common/args";
+
+export default {
+  title: "DynamicViews/molecules/VcInputCurrency",
+  component: page,
+  args: {
+    id: "inputCurrencyId",
+    component: "vc-input-currency",
+    property: "mockedProperty",
+    optionProperty: "currency",
+    options: "currencies",
+  },
+  argTypes: {
+    ..._.omit(SchemaBaseArgTypes, ["multilanguage"]),
+    component: {
+      description: "Component type.",
+      type: {
+        required: true,
+        name: "string",
+      },
+      table: {
+        type: {
+          summary: "vc-input-currency",
+        },
+        defaultValue: {
+          summary: "vc-input-currency",
+        },
+      },
+    },
+    options: {
+      description: `List of currency options to be displayed in the dropdown.
+      Array should be defined in the blade \`scope\``,
+      type: {
+        required: true,
+        name: "string",
+      },
+      table: {
+        type: {
+          summary: "array",
+        },
+      },
+    },
+    optionProperty: {
+      description: "Name of property that holds currency value.",
+      type: {
+        required: true,
+        name: "string",
+      },
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    optionValue: {
+      description: "Property of optionProperty which holds the `value`",
+      type: {
+        required: true,
+        name: "string",
+      },
+      table: {
+        type: {
+          summary: "string",
+        },
+        defaultValue: {
+          summary: "id",
+        },
+      },
+    },
+    optionLabel: {
+      description: "Property of optionProperty which holds the `label`",
+      type: {
+        required: true,
+        name: "string",
+      },
+      table: {
+        type: {
+          summary: "string",
+        },
+        defaultValue: {
+          summary: "title",
+        },
+      },
+    },
+    clearable: {
+      description: "Whether the input-currency is clearable or not.",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: "none",
+      },
+    },
+  },
+} satisfies Meta<InputCurrencySchema>;
+
+export const Template: StoryFn<InputCurrencySchema> = (args) => ({
+  components: { page },
+  setup() {
+    const context = reactive({
+      item: {
+        mockedProperty: 1234,
+        currency: "USD",
+      },
+      scope: {
+        currencies: [
+          { id: "USD", title: "USD" },
+          { id: "EUR", title: "EUR" },
+          { id: "GBP", title: "GBP" },
+        ],
+      },
+    });
+
+    return { args, context };
+  },
+  template,
+});
+
+export const WithLabel = Template.bind({});
+WithLabel.args = {
+  label: "Input Currency Label",
+};
+
+export const WithTooltip = WithLabel.bind({});
+WithTooltip.args = {
+  label: "Input Currency Label",
+  tooltip: "Input Currency Tooltip",
+};
+
+export const WithPlaceholder: StoryFn<InputCurrencySchema> = (args) => ({
+  components: { page },
+  setup() {
+    const context = reactive({
+      item: {
+        mockedProperty: null,
+        currency: "USD",
+      },
+      scope: {
+        currencies: [
+          { id: "USD", title: "USD" },
+          { id: "EUR", title: "EUR" },
+          { id: "GBP", title: "GBP" },
+        ],
+      },
+    });
+    return { args, context };
+  },
+  template,
+});
+WithPlaceholder.args = {
+  label: "Input Currency Label",
+  placeholder: "Input Currency Placeholder",
+};
+
+export const WithValidation = WithPlaceholder.bind({});
+WithValidation.args = {
+  label: "Input Currency Label",
+  placeholder: "Input Currency Placeholder",
+  rules: { required: true },
+};
+
+export const WithDisabled: StoryFn<InputCurrencySchema> = (args) => ({
+  components: { page },
+  setup() {
+    const context = reactive({
+      item: {
+        mockedProperty: 1234,
+        currency: "USD",
+      },
+      scope: {
+        currencies: [
+          { id: "USD", title: "USD" },
+          { id: "EUR", title: "EUR" },
+          { id: "GBP", title: "GBP" },
+        ],
+        disabledFn: true,
+      },
+    });
+    return { args, context };
+  },
+  template,
+});
+WithDisabled.args = {
+  label: "Input Currency Label",
+  disabled: { method: "disabledFn" },
+};
+
+export const WithVisibilityMethod: StoryFn<InputCurrencySchema> = (args) => ({
+  components: { page },
+  setup() {
+    const isVisible = ref(false);
+    const toggle = () => {
+      isVisible.value = !isVisible.value;
+    };
+
+    const context = reactive({
+      item: {
+        mockedProperty: 1234,
+        currency: "USD",
+      },
+      scope: {
+        currencies: [
+          { id: "USD", title: "USD" },
+          { id: "EUR", title: "EUR" },
+          { id: "GBP", title: "GBP" },
+        ],
+        visibilityFn: isVisible,
+      },
+    });
+    return { args, context, toggle };
+  },
+  template: templateWithVisibilityToggle,
+});
+WithVisibilityMethod.args = {
+  label: "Input Currency Label",
+  visibility: { method: "visibilityFn" },
+};
+
+export const WithUpdateMethod: StoryFn<InputCurrencySchema> = (args) => ({
+  components: { page },
+  setup() {
+    const context = reactive({
+      item: {
+        mockedProperty: null,
+        currency: "USD",
+      },
+      scope: {
+        currencies: [
+          { id: "USD", title: "USD" },
+          { id: "EUR", title: "EUR" },
+          { id: "GBP", title: "GBP" },
+        ],
+        updateFn: (value: string) => alert(`Value updated to: ${value}`),
+      },
+    });
+    return { args, context };
+  },
+  template,
+});
+WithUpdateMethod.args = {
+  label: "Input Currency Label",
+  update: { method: "updateFn" },
+};
+
+export const WithClearable = Template.bind({});
+WithClearable.args = {
+  label: "Input Currency Label",
+  clearable: true,
+};
+
+export const WithHorizontalSeparator = Template.bind({});
+WithHorizontalSeparator.args = {
+  label: "Input Currency Label",
+  horizontalSeparator: true,
+};