vueless 0.0.2 → 0.0.3

package/ui.container-group/index.vue

@@ -1,172 +1,106 @@
 <template>
-  <div class="mono-group" :class="formGroupClasses" :data-cy="dataCy">
-    <div v-if="title" class="mono-group-header-wrapper">
-      <UDivider v-if="isUpperlined" class="mono-group-upperlined" size="xl" no-top-padding />
+  <div :data-cy="dataCy" v-bind="wrapperAttrs">
+    <template v-if="title">
+      <UDivider v-if="upperlined" size="xl" no-top-padding v-bind="upperlineAttrs" />
 
-      <div class="mono-group-header" :class="headerClass">
+      <div v-bind="headerAttrs">
         <!-- @slot Use it to add something left side of the header. -->
-        <slot name="left" />
+        <slot name="left">
+          <div v-bind="headerFallbackAttrs">
+            <!-- @slot Use it to add something before title. -->
+            <slot name="before-title" />
 
-        <div class="mono-group-header-container">
-          <!-- @slot Use it to add something before title. -->
-          <slot name="beforeTitle" />
+            <UHeader :label="title" size="xs" v-bind="titleAttrs" />
 
-          <UHeader v-if="title" class="mono-group-block-title" :text="title" size="xs" />
-
-          <!-- @slot Use it to add something after title. -->
-          <slot name="afterTitle" />
-        </div>
+            <!-- @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="isUnderlined" class="mono-group-underlined" size="xl" no-top-padding />
-    </div>
+      <UDivider v-if="underlined" size="xl" v-bind="underlineAttrs" />
+    </template>
 
-    <div class="mono-group-content">
+    <div v-bind="contentAttrs">
       <!-- @slot Use it to add something instead form. -->
       <slot />
     </div>
   </div>
 </template>
 
-<script>
-import { globalComponentConfig } from "vueless/service.ui";
-
+<script setup>
+import UIService from "vueless/service.ui";
 import UDivider from "vueless/ui.container-divider";
 import UHeader from "vueless/ui.text-header";
 
-export default {
-  name: "UGroup",
+import { UGroup } from "./constants";
+import defaultConfig from "./configs/default.config";
+import { useAttrs } from "./composables/attrs.composable";
 
-  components: {
-    UDivider,
-    UHeader,
-  },
+/* Should be a string for correct web-types gen */
+defineOptions({ name: "UGroup", inheritAttrs: false });
 
-  props: {
-    /**
-     * Set header title.
-     */
-    title: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * The size between nested components.
-     * @values sm, md, lg
-     */
-    size: {
-      type: String,
-      default: "md",
-    },
-
-    /**
-     * Show line above the header.
-     */
-    upperlined: {
-      type: Boolean,
-      default: undefined,
-    },
-
-    /**
-     * Show line under the header.
-     */
-    underlined: {
-      type: Boolean,
-      default: undefined,
-    },
-
-    /**
-     * Sets data-cy attribute for automated testing.
-     */
-    dataCy: {
-      type: String,
-      default: "",
-    },
+const props = defineProps({
+  /**
+   * Set header title.
+   */
+  title: {
+    type: String,
+    default: "",
   },
 
-  computed: {
-    formGroupClasses() {
-      const size = `size-${this.size}`;
-
-      return [size];
-    },
-
-    isUpperlined() {
-      const upperlined = globalComponentConfig.UGroup?.upperlined;
-
-      if (this.upperlined === undefined && upperlined === undefined) return true;
-      else if (this.upperlined !== undefined) return this.upperlined;
+  /**
+   * The distance between nested components.
+   * @values sm, md, lg
+   */
+  size: {
+    type: String,
+    default: UIService.get(defaultConfig, UGroup).default.size,
+  },
 
-      return upperlined;
-    },
+  /**
+   * Show line above the header.
+   */
+  upperlined: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UGroup).default.upperlined,
+  },
 
-    isUnderlined() {
-      if (this.underlined !== undefined) return this.underlined;
+  /**
+   * Show line under the header.
+   */
+  underlined: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UGroup).default.underlined,
+  },
 
-      return globalComponentConfig.UGroup?.underlined;
-    },
+  /**
+   * Set component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
 
-    headerClass() {
-      return !this.isUnderlined ? "padding-bottom" : "";
-    },
+  /**
+   * Set data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
   },
-};
+});
+
+const {
+  contentAttrs,
+  headerAttrs,
+  wrapperAttrs,
+  headerFallbackAttrs,
+  titleAttrs,
+  upperlineAttrs,
+  underlineAttrs,
+} = useAttrs(props);
 </script>
-
-<style lang="postcss" scoped>
-.size {
-  &-sm {
-    .mono-group-content {
-      @apply space-y-2;
-    }
-  }
-
-  &-md {
-    .mono-group-content {
-      @apply space-y-4;
-    }
-  }
-
-  &-lg {
-    .mono-group-content {
-      @apply space-y-6;
-    }
-  }
-}
-
-.mono-group {
-  &-header {
-    @apply flex items-center justify-between;
-
-    &.padding-bottom {
-      @apply pb-6;
-    }
-
-    &-container {
-      @apply flex items-center;
-    }
-  }
-
-  &-title {
-    @apply mb-6;
-  }
-
-  &-underlined {
-    @apply pt-1.5;
-  }
-
-  &-content {
-    @apply space-y-4;
-  }
-
-  &-block {
-    &-title {
-      @apply pr-2;
-    }
-  }
-}
-</style>

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

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

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

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

@@ -5,6 +5,7 @@ import UGroups from "vueless/ui.container-groups";
 import UInput from "vueless/ui.form-input";
 
 export default {
+  id: "5040",
   title: "Containers / Groups",
   component: UGroups,
   argTypes: {
@@ -31,11 +32,11 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-export const slotDefault = DefaultTemplate.bind({});
-slotDefault.args = {
+export const Default = DefaultTemplate.bind({});
+Default.args = {
   slotTemplate: `
     <template #default>
-      <UGroup :upperlined="!n" :title="'Group '+n" v-for="n in 3">
+      <UGroup :upperlined="n !== 1" :title="'Group '+n" v-for="n in 3">
         <UInput placeholder="input" label="Label" />
         <UInput placeholder="input" label="Label" />
       </UGroup>

package/ui.container-groups/index.vue

@@ -1,18 +1,33 @@
 <template>
-  <div class="mono-groups">
+  <div :data-cy="dataCy" v-bind="wrapperAttrs">
     <!-- @slot Use it to add something inside. -->
     <slot />
   </div>
 </template>
 
-<script>
-export default {
-  name: "UGroups",
-};
-</script>
+<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: () => ({}),
+  },
 
-<style scoped lang="postcss">
-.mono-groups {
-  @apply flex flex-col space-y-14;
-}
-</style>
+  /**
+   * Set data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
+});
+
+const { wrapperAttrs } = useAttrs(props);
+</script>

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

@@ -0,0 +1,90 @@
+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,
+  };
+}

package/ui.container-modal/configs/default.config.js

@@ -0,0 +1,69 @@
+export default /*tw*/ {
+  wrapper: "fixed inset-0 z-50 outline-none",
+  wrapperTransition: {
+    enterActiveClass: "ease-out duration-300",
+    enterFromClass: "opacity-0 translate-y-4 sm:translate-y-0 transform sm:scale-95",
+    enterToClass: "opacity-100 translate-y-0 transform sm:scale-100",
+    leaveActiveClass: "ease-in duration-200",
+    leaveFromClass: "opacity-100 translate-y-0 transform sm:scale-100",
+    leaveToClass: "opacity-0 translate-y-4 sm:translate-y-0 transform sm:scale-95",
+  },
+  overlay: "fixed inset-0 z-40 bg-gray-900 bg-opacity-75",
+  overlayTransition: {
+    enterActiveClass: "ease-out duration-300",
+    enterFromClass: "opacity-0",
+    enterToClass: "opacity-100",
+    leaveActiveClass: "ease-in duration-200",
+    leaveFromClass: "opacity-100",
+    leaveToClass: "opacity-0",
+  },
+  innerWrapper: "py-12 w-full h-full overflow-auto",
+  header: "flex items-center justify-between px-4 md:px-8 pb-6 pt-8",
+  headerLeft: "flex items-center space-x-4",
+  headerLeftFallback: "flex flex-col",
+  backLink: "flex items-center gap-0.5",
+  backLinkIcon: "",
+  backLinkIconName: "arrow_back",
+  title: "",
+  description: "mt-1.5 text-base font-normal text-gray-500",
+  headerRight: "",
+  closeIcon: "",
+  closeIconName: "close",
+  body: "space-y-4 px-4 md:px-8",
+  divider: "",
+  dividerSpacing: "",
+  footer: "flex justify-between px-4 md:px-8 py-8 max-md:flex-col max-md:gap-4",
+  footerLeft: "flex flex-col md:flex-row space-y-4 md:space-x-4 md:space-y-0 w-full",
+  footerRight: "flex flex-col md:flex-row space-y-4 md:space-x-4 md:space-y-0 w-full justify-end",
+  footerMobileReverse: "flex flex-col-reverse space-y-reverse group/reversed-footer",
+  modal: {
+    base: "mx-auto rounded-2xl bg-white",
+    variants: {
+      width: {
+        xs: "md:w-[25rem]",
+        sm: "md:w-[31.25rem]",
+        md: "md:w-[37.5rem]",
+        lg: "md:w-[43.75rem]",
+        xl: "md:w-[50rem]",
+        "2xl": "md:w-[56.25rem]",
+        "3xl": "md:w-[62.5rem]",
+        "4xl": "md:w-[68.75rem]",
+        "5xl": "md:w-[75rem]",
+      },
+      inner: {
+        true: "!my-[4.5rem]",
+      },
+    },
+  },
+  defaultVariants: {
+    color: "brand",
+    width: "sm",
+    inner: false,
+    closeIcon: true,
+    escToClose: true,
+    clickToClose: true,
+    noDivider: false,
+    mobileBottomAlign: false,
+    mobileFooterReverse: false,
+  },
+};

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

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

@@ -9,6 +9,7 @@ import UTextarea from "vueless/ui.form-textarea";
 import URow from "vueless/ui.container-row";
 
 export default {
+  id: "5070",
   title: "Containers / Modal",
   component: UModal,
   args: {
@@ -49,7 +50,7 @@ const DefaultTemplate = (args) => ({
         ${args.slotTemplate || ""}
       </UModal>
 
-      <UButton text="show modal" @click="onClick"/>
+      <UButton label="show modal" @click="onClick"/>
     </div>
   `,
   methods: {
@@ -59,7 +60,7 @@ const DefaultTemplate = (args) => ({
   },
 });
 
-const SizesTemplate = (args, { argTypes }) => ({
+const SizesTemplate = (args, { argTypes } = {}) => ({
   components: { UModal, UButton, URow, UInput, UTextarea },
   setup() {
     return {
@@ -77,7 +78,7 @@ const SizesTemplate = (args, { argTypes }) => ({
       <URow>
         <UButton
           v-for="(size, index) in sizes"
-          :key="index" :text="size" @click="onClick(size)"
+          :key="index" :label="size" @click="onClick(size)"
         />
       </URow>
     </div>
@@ -124,7 +125,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>
   `,
 };
@@ -145,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="some button" />
     </template>
   `,
 };
@@ -154,7 +155,7 @@ export const slotFooterLeft = DefaultTemplate.bind({});
 slotFooterLeft.args = {
   slotTemplate: `
     <template #footer-left>
-      <UButton text="Submit" />
+      <UButton label="Submit" />
     </template>
   `,
 };
@@ -163,7 +164,7 @@ export const slotFooterRight = DefaultTemplate.bind({});
 slotFooterRight.args = {
   slotTemplate: `
     <template #footer-right>
-      <UButton text="Back" />
+      <UButton label="Back" />
     </template>
   `,
 };