vueless 0.0.4 → 0.0.6

package/src/ui.container-card/index.stories.js

@@ -0,0 +1,170 @@
+import { getArgTypes } from "../service.storybook";
+
+import UCard from "../ui.container-card";
+import URow from "../ui.container-row";
+import UInput from "../ui.form-input";
+import UButton from "../ui.button";
+import UIcon from "../ui.image-icon";
+import UHeader from "../ui.text-header";
+
+export default {
+  id: "5060",
+  title: "Containers / Card",
+  component: UCard,
+  args: {
+    title: "Title",
+    slotDefaultTemplate: `
+    <template #default>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+        sed do eiusmod tempor incididunt ut labore et dolore magna
+        aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+        ullamco laboris nisi ut aliquip ex ea commodo consequat.
+        Duis aute irure dolor in reprehenderit in voluptate velit
+        esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+        occaecat cupidatat non proident, sunt in culpa qui officia
+        deserunt mollit anim id est laborum.
+      </p>
+    </template>
+  `,
+  },
+  argTypes: {
+    ...getArgTypes(UCard.name),
+  },
+};
+
+const DefaultTemplate = (args) => ({
+  components: { UCard, UButton, UInput, UIcon, UHeader },
+  setup() {
+    return { args };
+  },
+  template: `
+    <UCard v-bind="args">
+      ${args.slotDefaultTemplate}
+      ${args.slotTemplate || ""}
+    </UCard>
+  `,
+});
+
+const PaddingTemplate = (args, { argTypes } = {}) => ({
+  components: { UCard, URow },
+  setup() {
+    return {
+      args,
+      paddings: argTypes.padding.options,
+    };
+  },
+  template: `
+    <URow>
+      <UCard v-for="(padding, index) in paddings" v-bind="args" :padding="padding" :key="index">
+        ${args.slotDefaultTemplate}
+      </UCard>
+    </URow>
+  `,
+});
+
+const RoundedTemplate = (args, { argTypes } = {}) => ({
+  components: { UCard, URow },
+  setup() {
+    return {
+      args,
+      roundeds: argTypes.rounded.options,
+    };
+  },
+  template: `
+    <URow>
+      <UCard v-for="(rounded, index) in roundeds" v-bind="args" :rounded="rounded" :key="index">
+        ${args.slotDefaultTemplate}
+      </UCard>
+    </URow>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {
+  slotTemplate: `
+    <template #default>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+        sed do eiusmod tempor incididunt ut labore et dolore magna
+        aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+        ullamco laboris nisi ut aliquip ex ea commodo consequat.
+        Duis aute irure dolor in reprehenderit in voluptate velit
+        esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+        occaecat cupidatat non proident, sunt in culpa qui officia
+        deserunt mollit anim id est laborum.
+      </p>
+    </template>
+  `,
+};
+
+export const description = DefaultTemplate.bind({});
+description.args = { description: "Card description" };
+
+export const padding = PaddingTemplate.bind({});
+padding.args = {};
+
+export const rounded = RoundedTemplate.bind({});
+rounded.args = {};
+
+export const slotHeaderLeftBefore = DefaultTemplate.bind({});
+slotHeaderLeftBefore.args = {
+  slotTemplate: `
+    <template #header-left-before>
+      <UIcon
+        name="star"
+        size="sm"
+        pill
+      />
+    </template>
+  `,
+};
+
+export const slotHeaderLeft = DefaultTemplate.bind({});
+slotHeaderLeft.args = {
+  slotTemplate: `
+    <template #header-left>
+      <UHeader size="lg" label="Large title" />
+    </template>
+  `,
+};
+
+export const slotHeaderLeftAfter = DefaultTemplate.bind({});
+slotHeaderLeftAfter.args = {
+  slotTemplate: `
+    <template #header-left-after>
+      <UIcon
+        name="star"
+        size="sm"
+        pill
+      />
+    </template>
+  `,
+};
+
+export const slotHeaderRight = DefaultTemplate.bind({});
+slotHeaderRight.args = {
+  slotTemplate: `
+    <template #header-right>
+      <UButton size="sm" color="gray" label="Read more" />
+    </template>
+  `,
+};
+
+export const slotFooterLeft = DefaultTemplate.bind({});
+slotFooterLeft.args = {
+  slotTemplate: `
+    <template #footer-left>
+      <UButton label="Read more" />
+    </template>
+  `,
+};
+
+export const slotFooterRight = DefaultTemplate.bind({});
+slotFooterRight.args = {
+  slotTemplate: `
+    <template #footer-right>
+      <UButton label="Read more" />
+    </template>
+  `,
+};

package/src/ui.container-card/index.vue

@@ -0,0 +1,146 @@
+<template>
+  <div :data-cy="dataCy" v-bind="wrapperAttrs">
+    <div v-if="isShownHeader" v-bind="headerAttrs">
+      <div v-bind="headerLeftAttrs">
+        <!-- @slot Use it to add something before left side of the header. -->
+        <slot name="header-left-before" />
+
+        <!-- @slot Use it to customise left side of the header. -->
+        <slot name="header-left">
+          <div v-bind="headerLeftFallbackAttrs">
+            <UHeader :label="title" size="md" color="brand" v-bind="titleAttrs" />
+            <div v-if="description" v-bind="descriptionAttrs" v-text="description" />
+          </div>
+        </slot>
+
+        <!-- @slot Use it to add something after left side of the header. -->
+        <slot name="header-left-after" />
+      </div>
+
+      <!-- @slot Use it to customise right side of the header. -->
+      <slot name="header-right" />
+    </div>
+
+    <!-- @slot Use it to add something inside. -->
+    <div v-bind="contentAttrs">
+      <slot />
+    </div>
+
+    <UDivider v-if="isShownFooter" no-top-padding no-bottom-padding v-bind="dividerAttrs" />
+
+    <div v-if="isShownFooter" v-bind="footerAttrs">
+      <!-- @slot Use it to add something to the left side of the footer. -->
+      <slot name="footer-left" />
+
+      <!-- @slot Use it to add something to the right side of the footer. -->
+      <slot name="footer-right" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, useSlots } from "vue";
+import { useStore } from "vuex";
+
+import UIService from "../service.ui";
+import UHeader from "../ui.text-header";
+import UDivider from "../ui.container-divider";
+
+import { UCard } from "./constants";
+import defaultConfig from "./configs/default.config";
+import { useAttrs } from "./composable/attrs.composable";
+
+/* Should be a string for correct web-types gen */
+defineOptions({ name: "UCard", inheritAttrs: false });
+
+const store = useStore();
+const slots = useSlots();
+
+const props = defineProps({
+  /**
+   * Card title.
+   */
+  title: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Card description.
+   */
+  description: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Card border radius.
+   * @values sm, md, lg
+   */
+  rounded: {
+    type: String,
+    default: UIService.get(defaultConfig, UCard).default.rounded,
+  },
+
+  /**
+   * Card padding.
+   * @values sm, md, lg
+   */
+  padding: {
+    type: String,
+    default: UIService.get(defaultConfig, UCard).default.padding,
+  },
+
+  /**
+   * Reverse left and right footer blocks (in a mobile version only).
+   */
+  mobileFooterReverse: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UCard).default.mobileFooterReverse,
+  },
+
+  /**
+   * Component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+
+  /**
+   * Data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
+});
+
+const isShownHeader = computed(() => {
+  const isHeaderLeftSlot = hasSlotContent(slots["header-left"]);
+  const isHeaderRightSlot = hasSlotContent(slots["header-left"]);
+
+  return props.title || isHeaderLeftSlot || isHeaderRightSlot;
+});
+
+const isShownFooter = computed(() => {
+  return hasSlotContent(slots["footer-left"]) || hasSlotContent(slots["footer-right"]);
+});
+
+const isMobileDevice = computed(() => {
+  return store.getters["breakpoint/isMobileDevice"];
+});
+
+const {
+  hasSlotContent,
+  wrapperAttrs,
+  titleAttrs,
+  dividerAttrs,
+  headerAttrs,
+  headerLeftAttrs,
+  headerLeftFallbackAttrs,
+  descriptionAttrs,
+  contentAttrs,
+  footerAttrs,
+} = useAttrs(props, { isMobileDevice });
+</script>

package/src/ui.container-divider/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/src/ui.container-divider/configs/default.config.js

@@ -0,0 +1,79 @@
+export default /*tw*/ {
+  wrapper: {
+    variants: {
+      vertical: {
+        true: "h-full flex",
+        false: "w-full",
+      },
+      label: {
+        true: "flex items-center",
+      },
+    },
+    compoundVariants: [
+      { vertical: false, size: "xs", class: "py-2" },
+      { vertical: false, size: "sm", class: "py-3" },
+      { vertical: false, size: "md", class: "py-4" },
+      { vertical: false, size: "lg", class: "py-5" },
+      { vertical: false, size: "xl", class: "py-6" },
+      { vertical: true, size: "xs", class: "px-2" },
+      { vertical: true, size: "sm", class: "px-3" },
+      { vertical: true, size: "md", class: "px-4" },
+      { vertical: true, size: "lg", class: "px-5" },
+      { vertical: true, size: "xl", class: "px-6" },
+      { noPadding: true, class: "p-0" },
+      { noTopPadding: true, class: "pt-0" },
+      { noLeftPadding: true, class: "pl-0" },
+      { noRightPadding: true, class: "pr-0" },
+      { noBottomPadding: true, class: "pb-0" },
+    ],
+  },
+  divider: {
+    base: "border-transparent",
+    variants: {
+      variant: {
+        light: "border-gray-100",
+        default: "border-gray-200",
+        dark: "border-gray-300",
+      },
+      label: {
+        true: "w-full",
+      },
+      vertical: {
+        true: "border-l",
+        false: "border-t",
+      },
+      dashed: {
+        true: "border-dashed",
+      },
+      dotted: {
+        true: "border-dotted",
+      },
+      noBorder: {
+        true: "border-0",
+      },
+    },
+  },
+  label: {
+    base: "px-2 shrink-0",
+    variants: {
+      variant: {
+        light: "text-gray-400",
+        default: "text-gray-500",
+        dark: "text-gray-600",
+      },
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "md",
+    dashed: false,
+    dotted: false,
+    vertical: false,
+    noBorder: false,
+    noPadding: false,
+    noTopPadding: false,
+    noBottomPadding: false,
+    noLeftPadding: false,
+    noRightPadding: false,
+  },
+};

package/src/ui.container-divider/index.stories.js

@@ -0,0 +1,124 @@
+import { getArgTypes } from "../service.storybook";
+import URow from "../ui.container-row";
+
+import UDivider from "../ui.container-divider";
+
+export default {
+  id: "5010",
+  title: "Containers / Divider",
+  component: UDivider,
+  argTypes: {
+    ...getArgTypes(UDivider.name),
+  },
+};
+
+const DefaultTemplate = (args) => ({
+  components: { UDivider },
+  setup() {
+    return { args };
+  },
+  template: `
+    <UDivider v-bind="args" />
+  `,
+});
+
+const SizesTemplate = (args, { argTypes } = {}) => ({
+  components: { UDivider, URow },
+  setup() {
+    return {
+      args,
+      sizes: argTypes.size.options,
+    };
+  },
+  template: `
+    <URow>
+      <UDivider
+        class="w-1/4"
+        v-for="(size, index) in sizes"
+        v-bind="args"
+        :size="size"
+        :key="index"
+      />
+    </URow>
+  `,
+  created() {
+    this.mxArgTypes = argTypes;
+  },
+});
+
+const VariantTemplate = (args, { argTypes } = {}) => ({
+  components: { UDivider, URow },
+  setup() {
+    return {
+      args,
+      variants: argTypes.variant.options,
+    };
+  },
+  template: `
+    <URow>
+      <UDivider
+        class="w-1/3"
+        v-for="(variant, index) in variants"
+        v-bind="args"
+        :variant="variant"
+        :key="index"
+      />
+    </URow>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const sizes = SizesTemplate.bind({});
+sizes.args = {};
+
+export const variants = VariantTemplate.bind({});
+variants.args = {};
+
+export const dashed = DefaultTemplate.bind({});
+dashed.args = { dashed: true };
+
+export const dotted = DefaultTemplate.bind({});
+dotted.args = { dotted: true };
+
+export const vertical = DefaultTemplate.bind({});
+vertical.args = {
+  vertical: true,
+  config: {
+    wrapper: {
+      base: "min-h-8",
+    },
+  },
+};
+
+export const noBorder = DefaultTemplate.bind({});
+noBorder.args = { noBorder: true };
+
+export const noTopPadding = DefaultTemplate.bind({});
+noTopPadding.args = { noTopPadding: true };
+
+export const noBottomPadding = DefaultTemplate.bind({});
+noBottomPadding.args = { noBottomPadding: true };
+
+export const noRightPadding = DefaultTemplate.bind({});
+noRightPadding.args = {
+  noRightPadding: true,
+  vertical: true,
+  config: {
+    wrapper: {
+      base: "min-h-8",
+    },
+  },
+};
+
+export const noLeftPadding = DefaultTemplate.bind({});
+noLeftPadding.args = {
+  noLeftPadding: true,
+  vertical: true,
+  config: {
+    wrapper: {
+      base: "min-h-8",
+    },
+  },
+};

package/src/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/src/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/src/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/src/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";