vueless 0.0.3 → 0.0.4

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

@@ -1,170 +0,0 @@
-import { getArgTypes } from "vueless/service.storybook";
-
-import UCard from "vueless/ui.container-card";
-import URow from "vueless/ui.container-row";
-import UInput from "vueless/ui.form-input";
-import UButton from "vueless/ui.button";
-import UIcon from "vueless/ui.image-icon";
-import UHeader from "vueless/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

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

@@ -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-divider/composables/attrs.composable.js

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

@@ -1,79 +0,0 @@
-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/index.stories.js

@@ -1,124 +0,0 @@
-import { getArgTypes } from "vueless/service.storybook";
-import URow from "vueless/ui.container-row";
-
-import UDivider from "vueless/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",
-    },
-  },
-};