vueless 0.0.10 → 0.0.12

package/ui.container-divider/index.vue

@@ -0,0 +1,138 @@
+<template>
+  <div :data-cy="dataCy" v-bind="wrapperAttrs">
+    <div v-bind="dividerAttrs" />
+    <template v-if="label && !vertical">
+      <span v-bind="labelAttrs" v-text="label" />
+      <div v-bind="dividerAttrs" />
+    </template>
+  </div>
+</template>
+
+<script setup>
+import UIService from "../service.ui";
+
+import { UDivider } from "./constants";
+import defaultConfig from "./configs/default.config";
+import { useAttrs } from "./composables/attrs.composable";
+
+/* Should be a string for correct web-types gen */
+defineOptions({ name: "UDivider", inheritAttrs: false });
+
+const props = defineProps({
+  /**
+   * Divider label.
+   */
+  label: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Divider padding size.
+   * @values xs, sm, md, lg, xl
+   */
+  size: {
+    type: String,
+    default: UIService.get(defaultConfig, UDivider).default.size,
+  },
+
+  /**
+   * Divider color.
+   * @values light, default, dark
+   */
+  variant: {
+    type: String,
+    default: UIService.get(defaultConfig, UDivider).default.variant,
+  },
+
+  /**
+   * Set line dashed.
+   */
+  dashed: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UDivider).default.dashed,
+  },
+
+  /**
+   * Set line dotted.
+   */
+  dotted: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UDivider).default.dotted,
+  },
+
+  /**
+   * Set divider orientation to vertical.
+   */
+  vertical: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UDivider).default.vertical,
+  },
+
+  /**
+   * Remove border (keeps only spacings).
+   */
+  noBorder: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UDivider).default.noBorder,
+  },
+
+  /**
+   * Remove all paddings.
+   */
+  noPadding: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UDivider).default.noPadding,
+  },
+
+  /**
+   * Remove top padding.
+   */
+  noTopPadding: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UDivider).default.noTopPadding,
+  },
+
+  /**
+   * Remove bottom padding.
+   */
+  noBottomPadding: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UDivider).default.noBottomPadding,
+  },
+
+  /**
+   * Remove left padding.
+   */
+  noLeftPadding: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UDivider).default.noLeftPadding,
+  },
+
+  /**
+   * Remove right padding.
+   */
+  noRightPadding: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UDivider).default.noRightPadding,
+  },
+
+  /**
+   * Component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+
+  /**
+   * Data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
+});
+
+const { wrapperAttrs, dividerAttrs, labelAttrs } = useAttrs(props);
+</script>

package/ui.container-group/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../service.storybook";
+
+import * as stories from "./index.stories";
+import defaultConfig from "./configs/default.config?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## **Default config**
+<Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.container-group/composables/attrs.composable.js

@@ -0,0 +1,44 @@
+import useUI from "../../composable.ui";
+import { cva } from "../../service.ui";
+
+import defaultConfig from "../configs/default.config";
+import { computed } from "vue";
+
+export function useAttrs(props) {
+  const { config, getAttrs } = useUI(defaultConfig, () => props.config);
+  const { content, header } = config.value;
+
+  const cvaContent = cva({
+    base: content.base,
+    variants: content.variants,
+    compoundVariants: content.compoundVariants,
+  });
+
+  const cvaHeader = cva({
+    base: header.base,
+    variants: header.variants,
+    compoundVariants: header.compoundVariants,
+  });
+
+  const contentClasses = computed(() => cvaContent({ size: props.size }));
+
+  const headerClasses = computed(() => cvaHeader({ underlined: props.underlined }));
+
+  const wrapperAttrs = getAttrs("wrapper");
+  const upperlineAttrs = getAttrs("upperline", { isComponent: true });
+  const headerAttrs = getAttrs("header", { classes: headerClasses });
+  const headerFallbackAttrs = getAttrs("headerFallback");
+  const titleAttrs = getAttrs("title", { isComponent: true });
+  const underlineAttrs = getAttrs("underline", { isComponent: true });
+  const contentAttrs = getAttrs("content", { classes: contentClasses });
+
+  return {
+    contentAttrs,
+    headerAttrs,
+    wrapperAttrs,
+    headerFallbackAttrs,
+    titleAttrs,
+    upperlineAttrs,
+    underlineAttrs,
+  };
+}

package/ui.container-group/configs/default.config.js

@@ -0,0 +1,29 @@
+export default /*tw*/ {
+  wrapper: "",
+  upperline: "",
+  header: {
+    base: "flex items-center justify-between",
+    variants: {
+      underlined: {
+        false: "pb-6",
+      },
+    },
+  },
+  headerFallback: "flex items-center",
+  title: "pr-2",
+  underline: "pt-1.5",
+  content: {
+    variants: {
+      size: {
+        sm: "space-y-2",
+        md: "space-y-4",
+        lg: "space-y-6",
+      },
+    },
+  },
+  defaultVariants: {
+    size: "md",
+    upperlined: true,
+    underlined: false,
+  },
+};

package/ui.container-group/constants/index.js

@@ -0,0 +1,5 @@
+/*
+  This const is needed to prevent the issue in script setup:
+ `defineProps` is referencing locally declared variables. (vue/valid-define-props)
+ */
+export const UGroup = "UGroup";

package/ui.container-group/index.stories.js

@@ -0,0 +1,88 @@
+import { getArgTypes } from "../service.storybook";
+
+import UGroup from "../ui.container-group";
+import UInput from "../ui.form-input";
+import UButton from "../ui.button";
+
+export default {
+  id: "5030",
+  title: "Containers / Group",
+  component: UGroup,
+  args: {
+    title: "Form group",
+    slotTemplate: `
+    <template #default>
+      <UInput placeholder="Vasyl" label="Name" />
+
+      <UInput placeholder="Vasylenko" label="Surname" />
+
+      <UInput placeholder="Kyiv" label="Town" />
+    </template>
+  `,
+  },
+  argTypes: {
+    ...getArgTypes(UGroup.name),
+  },
+  parameters: {
+    docs: {
+      story: {
+        iframeHeight: 360,
+      },
+    },
+  },
+};
+
+const DefaultTemplate = (args) => ({
+  components: { UGroup, UInput, UButton },
+  setup() {
+    return { args };
+  },
+  template: `
+    <UGroup v-bind="args">
+      ${args.slotTemplate}
+    </UGroup>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {
+  title: "Some title",
+};
+
+export const upperlined = DefaultTemplate.bind({});
+upperlined.args = { upperlined: false, underlined: true };
+
+export const underlined = DefaultTemplate.bind({});
+underlined.args = { upperlined: true, underlined: false };
+
+export const slotDefault = DefaultTemplate.bind({});
+slotDefault.args = {
+  slotTemplate: `
+    <template #default>
+      <UInput placeholder="placeholder" label="Label" />
+    </template>
+  `,
+};
+slotDefault.parameters = {
+  docs: {
+    story: {
+      iframeHeight: 240,
+    },
+  },
+};
+
+export const slotRight = DefaultTemplate.bind({});
+slotRight.args = {
+  slotTemplate: `
+    <template #right>
+      <UButton size="sm" label="Edit"/>
+    </template>
+  `,
+};
+slotRight.parameters = {
+  docs: {
+    story: {
+      iframeHeight: 200,
+    },
+  },
+};

package/ui.container-group/index.vue

@@ -0,0 +1,106 @@
+<template>
+  <div :data-cy="dataCy" v-bind="wrapperAttrs">
+    <template v-if="title">
+      <UDivider v-if="upperlined" size="xl" no-top-padding v-bind="upperlineAttrs" />
+
+      <div v-bind="headerAttrs">
+        <!-- @slot Use it to add something left side of the header. -->
+        <slot name="left">
+          <div v-bind="headerFallbackAttrs">
+            <!-- @slot Use it to add something before title. -->
+            <slot name="before-title" />
+
+            <UHeader :label="title" size="xs" v-bind="titleAttrs" />
+
+            <!-- @slot Use it to add something after title. -->
+            <slot name="after-title" />
+          </div>
+        </slot>
+
+        <!-- @slot Use it to add something right side of the header. -->
+        <slot name="right" />
+      </div>
+
+      <UDivider v-if="underlined" size="xl" v-bind="underlineAttrs" />
+    </template>
+
+    <div v-bind="contentAttrs">
+      <!-- @slot Use it to add something instead form. -->
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import UIService from "../service.ui";
+import UDivider from "../ui.container-divider";
+import UHeader from "../ui.text-header";
+
+import { UGroup } from "./constants";
+import defaultConfig from "./configs/default.config";
+import { useAttrs } from "./composables/attrs.composable";
+
+/* Should be a string for correct web-types gen */
+defineOptions({ name: "UGroup", inheritAttrs: false });
+
+const props = defineProps({
+  /**
+   * Set header title.
+   */
+  title: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * The distance between nested components.
+   * @values sm, md, lg
+   */
+  size: {
+    type: String,
+    default: UIService.get(defaultConfig, UGroup).default.size,
+  },
+
+  /**
+   * Show line above the header.
+   */
+  upperlined: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UGroup).default.upperlined,
+  },
+
+  /**
+   * Show line under the header.
+   */
+  underlined: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UGroup).default.underlined,
+  },
+
+  /**
+   * Set component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+
+  /**
+   * Set data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
+});
+
+const {
+  contentAttrs,
+  headerAttrs,
+  wrapperAttrs,
+  headerFallbackAttrs,
+  titleAttrs,
+  upperlineAttrs,
+  underlineAttrs,
+} = useAttrs(props);
+</script>

package/ui.container-groups/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../service.storybook";
+
+import * as stories from "./index.stories";
+import defaultConfig from "./configs/default.config?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## **Default config**
+<Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.container-groups/composables/attrs.composable.js

@@ -0,0 +1,12 @@
+import useUI from "../../composable.ui";
+import defaultConfig from "../configs/default.config";
+
+export function useAttrs(props) {
+  const { getAttrs } = useUI(defaultConfig, () => props.config);
+
+  const wrapperAttrs = getAttrs("wrapper");
+
+  return {
+    wrapperAttrs,
+  };
+}

package/ui.container-groups/configs/default.config.js

@@ -0,0 +1,3 @@
+export default /*tw*/ {
+  wrapper: "flex flex-col space-y-14",
+};

package/ui.container-groups/index.stories.js

@@ -0,0 +1,45 @@
+import { getArgTypes } from "../service.storybook";
+
+import UGroup from "../ui.container-group";
+import UGroups from "../ui.container-groups";
+import UInput from "../ui.form-input";
+
+export default {
+  id: "5040",
+  title: "Containers / Groups",
+  component: UGroups,
+  argTypes: {
+    ...getArgTypes(UGroups.name),
+  },
+  parameters: {
+    docs: {
+      story: {
+        iframeHeight: 760,
+      },
+    },
+  },
+};
+
+const DefaultTemplate = (args) => ({
+  components: { UGroups, UGroup, UInput },
+  setup() {
+    return { args };
+  },
+  template: `
+    <UGroups>
+      ${args.slotTemplate}
+    </UGroups>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {
+  slotTemplate: `
+    <template #default>
+      <UGroup :upperlined="n !== 1" :title="'Group '+n" v-for="n in 3">
+        <UInput placeholder="input" label="Label" />
+        <UInput placeholder="input" label="Label" />
+      </UGroup>
+    </template>
+  `,
+};

package/ui.container-groups/index.vue

@@ -0,0 +1,33 @@
+<template>
+  <div :data-cy="dataCy" v-bind="wrapperAttrs">
+    <!-- @slot Use it to add something inside. -->
+    <slot />
+  </div>
+</template>
+
+<script setup>
+import { useAttrs } from "./composables/attrs.composable";
+
+/* Should be a string for correct web-types gen */
+defineOptions({ name: "UGroups", inheritAttrs: false });
+
+const props = defineProps({
+  /**
+   * Set component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+
+  /**
+   * Set data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
+});
+
+const { wrapperAttrs } = useAttrs(props);
+</script>

package/ui.container-modal/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../service.storybook";
+
+import * as stories from "./index.stories";
+import defaultConfig from "./configs/default.config?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## **Default config**
+<Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.container-modal/composables/attrs.composable.js

@@ -0,0 +1,90 @@
+import useUI from "../../composable.ui";
+import { cva, cx } from "../../service.ui";
+
+import defaultConfig from "../configs/default.config";
+import { useStore } from "vuex";
+import { computed } from "vue";
+
+export function useAttrs(props) {
+  const store = useStore();
+  const { config, getAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config, "wrapper");
+  const { modal } = config.value;
+
+  const cvaModal = cva({
+    base: modal.base,
+    variants: modal.variants,
+    compoundVariants: modal.compoundVariants,
+  });
+
+  const modalClasses = computed(() =>
+    cvaModal({
+      width: props.width,
+      inner: props.inner,
+    }),
+  );
+
+  const wrapperAttrs = getAttrs("wrapper");
+  const overlayAttrs = getAttrs("overlay");
+  const innerWrapperAttrs = getAttrs("innerWrapper");
+  const headerAttrsRaw = getAttrs("header");
+  const headerLeftAttrs = getAttrs("headerLeft");
+  const headerLeftFallbackAttrs = getAttrs("headerLeftFallback");
+  const backLinkAttrs = getAttrs("backLink", { isComponent: true });
+  const backLinkIconAttrs = getAttrs("backLinkIcon", { isComponent: true });
+  const titleAttrs = getAttrs("title", { isComponent: true });
+  const descriptionAttrs = getAttrs("description");
+  const headerRightAttrs = getAttrs("headerRight");
+  const closeIconAttrs = getAttrs("closeIcon", { isComponent: true });
+  const bodyAttrs = getAttrs("body");
+  const dividerAttrs = getAttrs("divider", { isComponent: true });
+  const dividerSpacingAttrs = getAttrs("dividerSpacing", { isComponent: true });
+  const footerAttrsRaw = getAttrs("footer");
+
+  const headerAttrs = computed(() => ({
+    ...headerAttrsRaw.value,
+    class: cx([
+      headerAttrsRaw.value.class,
+      props.mobileFooterReverse &&
+        store.getters["breakpoint/isMobileDevice"] &&
+        config.value.footerMobileReverse,
+    ]),
+  }));
+
+  const footerAttrs = computed(() => ({
+    ...footerAttrsRaw.value,
+    class: cx([
+      footerAttrsRaw.value.class,
+      props.mobileFooterReverse &&
+        store.getters["breakpoint/isMobileDevice"] &&
+        config.value.footerMobileReverse,
+    ]),
+  }));
+
+  const footerLeftAttrs = getAttrs("footerLeft");
+  const footerRightAttrs = getAttrs("footerRight");
+  const modalAttrs = getAttrs("modal", { classes: modalClasses });
+
+  return {
+    config,
+    modalAttrs,
+    titleAttrs,
+    backLinkAttrs,
+    backLinkIconAttrs,
+    closeIconAttrs,
+    dividerAttrs,
+    dividerSpacingAttrs,
+    overlayAttrs,
+    wrapperAttrs,
+    innerWrapperAttrs,
+    headerAttrs,
+    headerLeftAttrs,
+    headerLeftFallbackAttrs,
+    descriptionAttrs,
+    headerRightAttrs,
+    bodyAttrs,
+    footerLeftAttrs,
+    footerAttrs,
+    footerRightAttrs,
+    hasSlotContent,
+  };
+}