vueless 0.0.3 → 0.0.4

package/ui.container-divider/index.vue

@@ -1,138 +0,0 @@
-<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 "vueless/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

@@ -1,16 +0,0 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
-import { getSource } from "vueless/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

@@ -1,44 +0,0 @@
-import useUI from "vueless/composable.ui";
-import { cva } from "vueless/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

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

@@ -1,5 +0,0 @@
-/*
-  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

@@ -1,88 +0,0 @@
-import { getArgTypes } from "vueless/service.storybook";
-
-import UGroup from "vueless/ui.container-group";
-import UInput from "vueless/ui.form-input";
-import UButton from "vueless/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

@@ -1,106 +0,0 @@
-<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 "vueless/service.ui";
-import UDivider from "vueless/ui.container-divider";
-import UHeader from "vueless/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

@@ -1,16 +0,0 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
-import { getSource } from "vueless/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

@@ -1,12 +0,0 @@
-import useUI from "vueless/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

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

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

@@ -1,45 +0,0 @@
-import { getArgTypes } from "vueless/service.storybook";
-
-import UGroup from "vueless/ui.container-group";
-import UGroups from "vueless/ui.container-groups";
-import UInput from "vueless/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

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

@@ -1,16 +0,0 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
-import { getSource } from "vueless/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

@@ -1,90 +0,0 @@
-import useUI from "vueless/composable.ui";
-import { cva, cx } from "vueless/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,
-  };
-}