vueless 0.0.10 → 0.0.12

package/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/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/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/ui.container-divider/composables/attrs.composable.js

@@ -0,0 +1,65 @@
+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, hasSlotContent } = useUI(defaultConfig, () => props.config);
+  const { wrapper, divider, label } = config.value;
+
+  const cvaWrapper = cva({
+    base: wrapper.base,
+    variants: wrapper.variants,
+    compoundVariants: wrapper.compoundVariants,
+  });
+
+  const cvaDivider = cva({
+    base: divider.base,
+    variants: divider.variants,
+    compoundVariants: divider.compoundVariants,
+  });
+
+  const cvaLabel = cva({
+    base: label.base,
+    variants: label.variants,
+    compoundVariants: label.compoundVariants,
+  });
+
+  const wrapperClasses = computed(() =>
+    cvaWrapper({
+      size: props.size,
+      vertical: props.vertical,
+      noPadding: props.noPadding,
+      noTopPadding: props.noTopPadding,
+      noBottomPadding: props.noBottomPadding,
+      noLeftPadding: props.noLeftPadding,
+      noRightPadding: props.noRightPadding,
+      label: Boolean(props.label),
+    }),
+  );
+
+  const dividerClasses = computed(() =>
+    cvaDivider({
+      variant: props.variant,
+      dashed: props.dashed,
+      dotted: props.dotted,
+      vertical: props.vertical,
+      noBorder: props.noBorder,
+      label: Boolean(props.label),
+    }),
+  );
+
+  const labelClasses = computed(() => cvaLabel({ variant: props.variant }));
+
+  const wrapperAttrs = getAttrs("wrapper", { classes: wrapperClasses });
+  const dividerAttrs = getAttrs("divider", { classes: dividerClasses });
+  const labelAttrs = getAttrs("label", { classes: labelClasses });
+
+  return {
+    hasSlotContent,
+    wrapperAttrs,
+    dividerAttrs,
+    labelAttrs,
+  };
+}

package/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/ui.container-divider/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 UDivider = "UDivider";

package/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",
+    },
+  },
+};