vueless 0.0.2 → 0.0.3

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

@@ -1,16 +1,18 @@
 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: "Card title",
+    title: "Title",
     slotDefaultTemplate: `
     <template #default>
       <p>
@@ -44,6 +46,40 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
+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: `
@@ -65,14 +101,20 @@ Default.args = {
 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"
-        color="gray"
-        pill-filled
+        size="sm"
+        pill
       />
     </template>
   `,
@@ -82,7 +124,7 @@ export const slotHeaderLeft = DefaultTemplate.bind({});
 slotHeaderLeft.args = {
   slotTemplate: `
     <template #header-left>
-      <UHeader size="lg" text="Large title" />
+      <UHeader size="lg" label="Large title" />
     </template>
   `,
 };
@@ -93,8 +135,8 @@ slotHeaderLeftAfter.args = {
     <template #header-left-after>
       <UIcon
         name="star"
-        color="gray"
-        pill-filled
+        size="sm"
+        pill
       />
     </template>
   `,
@@ -104,7 +146,7 @@ export const slotHeaderRight = DefaultTemplate.bind({});
 slotHeaderRight.args = {
   slotTemplate: `
     <template #header-right>
-      <UButton size="sm" color="gray" text="some button" />
+      <UButton size="sm" color="gray" label="Read more" />
     </template>
   `,
 };
@@ -113,7 +155,7 @@ export const slotFooterLeft = DefaultTemplate.bind({});
 slotFooterLeft.args = {
   slotTemplate: `
     <template #footer-left>
-      <UButton text="some button" />
+      <UButton label="Read more" />
     </template>
   `,
 };
@@ -122,7 +164,7 @@ export const slotFooterRight = DefaultTemplate.bind({});
 slotFooterRight.args = {
   slotTemplate: `
     <template #footer-right>
-      <UButton text="some button" />
+      <UButton label="Read more" />
     </template>
   `,
 };

package/ui.container-card/index.vue

@@ -1,17 +1,15 @@
 <template>
-  <t-card no-body class="mono-card" :class="cardClasses" :data-cy="dataCy">
-    <div v-if="isShownHeader" class="mono-card-header">
-      <div class="mono-card-header-left-wrapper">
+  <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 class="mono-card-header-left">
-            <UHeader size="md" color="brand" :text="title" />
-            <div v-if="description" class="mono-card-header-left-subtitle">
-              {{ description }}
-            </div>
+          <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>
 
@@ -19,189 +17,130 @@
         <slot name="header-left-after" />
       </div>
 
-      <div>
-        <!-- @slot Use it to customise right side of the header. -->
-        <slot name="header-right" />
-      </div>
+      <!-- @slot Use it to customise right side of the header. -->
+      <slot name="header-right" />
     </div>
 
     <!-- @slot Use it to add something inside. -->
-    <div class="mono-card-content">
+    <div v-bind="contentAttrs">
       <slot />
     </div>
 
-    <UDivider v-if="isShownFooterSlot" no-top-padding no-bottom-padding size="xl" />
+    <UDivider v-if="isShownFooter" no-top-padding no-bottom-padding v-bind="dividerAttrs" />
 
-    <div v-if="isShownFooterSlot" class="mono-card-footer" :class="reverseFooterClass">
-      <div>
-        <!-- @slot Use it to add something to the left side of the footer. -->
-        <slot name="footer-left" />
-      </div>
+    <div v-if="isShownFooter" v-bind="footerAttrs">
+      <!-- @slot Use it to add something to the left side of the footer. -->
+      <slot name="footer-left" />
 
-      <div>
-        <!-- @slot Use it to add something to the right side of the footer. -->
-        <slot name="footer-right" />
-      </div>
+      <!-- @slot Use it to add something to the right side of the footer. -->
+      <slot name="footer-right" />
     </div>
-  </t-card>
+  </div>
 </template>
 
-<script>
-import TCard from "vueless/library.vue-tailwind-3/t-card";
+<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";
 
-export default {
-  name: "UCard",
+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();
 
-  components: {
-    TCard,
-    UHeader,
-    UDivider,
+const props = defineProps({
+  /**
+   * Card title.
+   */
+  title: {
+    type: String,
+    default: "",
   },
 
-  props: {
-    /**
-     * Sets card title.
-     */
-    title: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Sets card description.
-     */
-    description: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * The size of the padding.
-     * @values sm, md, lg
-     */
-    size: {
-      type: String,
-      default: "md",
-    },
-
-    /**
-     * Reverse left and right footer blocks (in mobile version only).
-     */
-    mobileFooterReverse: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * Sets border radius size (makes card more or less rounded).
-     * @values xs, sm, md, lg
-     */
-    borderRadius: {
-      type: String,
-      default: "md",
-    },
-
-    /**
-     * Sets data-cy attribute for automated testing.
-     */
-    dataCy: {
-      type: String,
-      default: "",
-    },
+  /**
+   * Card description.
+   */
+  description: {
+    type: String,
+    default: "",
   },
 
-  computed: {
-    cardClasses() {
-      const borderRadius = `border-radius-${this.borderRadius}`;
-      const size = `size-${this.size}`;
+  /**
+   * Card border radius.
+   * @values sm, md, lg
+   */
+  rounded: {
+    type: String,
+    default: UIService.get(defaultConfig, UCard).default.rounded,
+  },
 
-      return [borderRadius, size];
-    },
+  /**
+   * Card padding.
+   * @values sm, md, lg
+   */
+  padding: {
+    type: String,
+    default: UIService.get(defaultConfig, UCard).default.padding,
+  },
 
-    isShownHeader() {
-      return this.title || !!this.$slots["header-left"] || !!this.$slots["header-right"];
-    },
+  /**
+   * Reverse left and right footer blocks (in a mobile version only).
+   */
+  mobileFooterReverse: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UCard).default.mobileFooterReverse,
+  },
 
-    isShownFooterSlot() {
-      return !!this.$slots["footer-left"] || !!this.$slots["footer-right"];
-    },
+  /**
+   * Component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
 
-    reverseFooterClass() {
-      return {
-        "reverse-footer": this.mobileFooterReverse && this.isMobileDevice,
-      };
-    },
+  /**
+   * 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>
-
-<style lang="postcss" scoped>
-.mono-card {
-  @apply border border-gray-200 bg-white;
-  @apply shadow-none;
-  @apply space-y-4 md:space-y-6;
-  @apply w-full;
-
-  &.border-radius {
-    &-xs {
-      @apply rounded;
-    }
-
-    &-sm {
-      @apply rounded-lg;
-    }
-
-    &-md {
-      @apply rounded-2xl;
-    }
-
-    &-lg {
-      @apply rounded-3xl;
-    }
-  }
-
-  &.size {
-    &-sm {
-      @apply p-2 md:p-4;
-    }
-
-    &-md {
-      @apply p-4 md:p-6;
-    }
-
-    &-lg {
-      @apply p-6 md:p-8;
-    }
-  }
-
-  &-header {
-    @apply flex justify-between;
-
-    &-left {
-      @apply flex flex-col;
-
-      &-wrapper {
-        @apply flex items-center space-x-4;
-      }
-
-      &-subtitle {
-        @apply mt-1.5 text-base font-normal text-gray-600;
-      }
-    }
-  }
-
-  &-content {
-    @apply space-y-2 md:space-y-4;
-  }
-
-  &-footer {
-    @apply flex justify-between;
-  }
-}
-
-.reverse-footer {
-  @apply flex flex-col-reverse space-y-reverse;
-}
-</style>

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 "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

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

@@ -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";