vueless 0.0.396 → 0.0.398

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.396",
+  "version": "0.0.398",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/ui.container-accordion/UAccordion.vue

@@ -1,8 +1,8 @@
 <template>
   <div :data-test="dataTest" v-bind="wrapperAttrs" @click="onClickItem">
     <div v-bind="bodyAttrs">
-      <div v-bind="labelAttrs">
-        {{ label }}
+      <div v-bind="titleAttrs">
+        {{ title }}
         <!--
           @slot Use it to add something instead of the toggle icon.
           @binding {string} icon-name
@@ -36,9 +36,9 @@ defineOptions({ inheritAttrs: false });
 
 const props = defineProps({
   /**
-   * Accordion label.
+   * Accordion title.
    */
-  label: {
+  title: {
     type: String,
     required: true,
   },
@@ -95,7 +95,7 @@ const {
   wrapperAttrs,
   descriptionAttrs,
   bodyAttrs,
-  labelAttrs,
+  titleAttrs,
   toggleIconAttrs,
   dividerAttrs,
 } = useAttrs(props, { isOpened });

package/ui.container-accordion/config.js

@@ -1,7 +1,7 @@
 export default /*tw*/ {
   wrapper: "group cursor-pointer",
   body: "",
-  label: {
+  title: {
     base: "flex items-center justify-between font-medium text-gray-900",
     variants: {
       size: {

package/ui.container-accordion/storybook/stories.js

@@ -14,19 +14,19 @@ export default {
     accordions: [
       {
         name: "Excellence",
-        label: "Excellence by necessity",
+        title: "Excellence by necessity",
         description: `As creators and maintainers of the technologies you are using,
             our services are here to showcase the full power of our softwares.`,
       },
       {
         name: "Innovation",
-        label: "Driving innovation forward",
+        title: "Driving innovation forward",
         description: `All the people that will be involved in delivering your project are contributing
             to the technologies you are using, when they are not the creators themselves.`,
       },
       {
         name: "Collaboration",
-        label: "Fostering collaboration",
+        title: "Fostering collaboration",
         description: `By working with us, you are directly supporting the open source community,
             ensuring the ecosystem continuity and enabling Nuxt development.`,
       },

package/ui.container-divider/UDivider.vue

@@ -46,7 +46,7 @@ const props = defineProps({
    * @values none, before, after, all
    */
   padding: {
-    type: Boolean,
+    type: String,
     default: getDefault(defaultConfig, UDivider).padding,
   },
 

package/ui.container-divider/config.js

@@ -9,9 +9,6 @@ export default /*tw*/ {
       label: {
         true: "items-center justify-center",
       },
-      padding: {
-        none: "p-0",
-      },
     },
     compoundVariants: [
       { vertical: false, size: "xs", class: "py-2" },
@@ -28,6 +25,7 @@ export default /*tw*/ {
       { vertical: true, size: "xl", class: "px-6" },
       { vertical: true, padding: "after", class: "pl-0" },
       { vertical: true, padding: "before", class: "pr-0" },
+      { padding: "none", class: "p-0" },
     ],
   },
   divider: {

package/ui.container-group/UGroup.vue

@@ -4,9 +4,9 @@
       <UDivider v-if="upperlined" size="xl" padding="after" v-bind="upperlineAttrs" />
 
       <div v-bind="headerAttrs">
-        <!-- @slot Use it to add something left side of the header. -->
-        <slot name="left">
-          <div v-bind="headerFallbackAttrs">
+        <!-- @slot Use it to add something on the left side of the header. -->
+        <slot name="header-left">
+          <div v-bind="headerLeftFallbackAttrs">
             <!-- @slot Use it to add something before the title. -->
             <slot name="before-title" />
 
@@ -17,11 +17,11 @@
           </div>
         </slot>
 
-        <!-- @slot Use it to add something right side of the header. -->
-        <slot name="right" />
+        <!-- @slot Use it to add something on the right side of the header. -->
+        <slot name="header-right" />
       </div>
 
-      <UDivider v-if="underlined" size="xl" v-bind="underlineAttrs" />
+      <UDivider size="xl" padding="after" :no-border="!underlined" v-bind="underlineAttrs" />
     </template>
 
     <div v-bind="contentAttrs">
@@ -44,7 +44,7 @@ defineOptions({ inheritAttrs: false });
 
 const props = defineProps({
   /**
-   * Header title.
+   * Group title.
    */
   title: {
     type: String,
@@ -77,7 +77,7 @@ const props = defineProps({
   },
 
   /**
-   *Component config object.
+   * Component config object.
    */
   config: {
     type: Object,
@@ -96,7 +96,7 @@ const props = defineProps({
 const {
   headerAttrs,
   wrapperAttrs,
-  headerFallbackAttrs,
+  headerLeftFallbackAttrs,
   titleAttrs,
   upperlineAttrs,
   underlineAttrs,

package/ui.container-group/config.js

@@ -1,17 +1,17 @@
 export default /*tw*/ {
   wrapper: "w-full",
   upperline: "{UDivider}",
-  header: {
-    base: "flex items-center justify-between",
+  underline: {
+    component: "{UDivider}",
     variants: {
       underlined: {
-        false: "pb-6",
+        true: "pt-1.5",
       },
     },
   },
-  headerFallback: "flex items-center",
+  header: "flex items-center justify-between",
+  headerLeftFallback: "flex items-center",
   title: "{UHeader} pr-2",
-  underline: "{UDivider} pt-1.5",
   content: {
     base: "flex flex-col items-stretch",
     variants: {

package/ui.container-modal/UModal.vue

@@ -9,49 +9,51 @@
       :id="elementId"
       ref="wrapperRef"
       tabindex="0"
-      :data-test="dataTest"
       v-bind="wrapperAttrs"
+      :data-test="dataTest"
       @keydown.self.esc="onKeydownEsc"
     >
       <div v-bind="innerWrapperAttrs" @click.self="onClickOutside">
         <div v-bind="modalAttrs">
           <div v-if="isExistHeader" v-bind="headerAttrs">
             <div v-bind="headerLeftAttrs">
-              <!-- @slot Use it to add something before the left part of the header. -->
-              <slot name="header-left-before" />
-
-              <!-- @slot Use it to add something to the left part of the header.. -->
+              <!-- @slot Use it to add something to the left side of the header. -->
               <slot name="header-left">
+                <!-- @slot Use it to add something before the header title. -->
+                <slot name="before-title" />
+
                 <div v-bind="headerLeftFallbackAttrs">
                   <ULink
                     v-if="isShownArrowButton"
                     size="sm"
                     color="gray"
-                    :to="backRoute"
+                    :to="backTo"
+                    :label="backLabel"
                     v-bind="backLinkAttrs"
                     @click="onClickBackLink"
                   >
-                    <UIcon
-                      internal
-                      size="xs"
-                      color="gray"
-                      :name="config.defaults.backIcon"
-                      v-bind="backLinkIconAttrs"
-                    />
-                    {{ backRoute.title }}
+                    <template #left>
+                      <UIcon
+                        internal
+                        size="xs"
+                        color="gray"
+                        :name="config.defaults.backIcon"
+                        v-bind="backLinkIconAttrs"
+                      />
+                    </template>
                   </ULink>
 
-                  <UHeader :label="title" v-bind="titleAttrs" />
+                  <UHeader :label="title" size="sm" v-bind="titleAttrs" />
                   <div v-if="description" v-bind="descriptionAttrs" v-text="description" />
                 </div>
-              </slot>
 
-              <!-- @slot Use it to add something after the left part of the header. -->
-              <slot name="header-left-after" />
+                <!-- @slot Use it to add something after the header title. -->
+                <slot name="after-title" />
+              </slot>
             </div>
 
             <div v-bind="headerRightAttrs">
-              <!-- @slot Use it to add something to the right part of the header. -->
+              <!-- @slot Use it to add something to the right side of the header. -->
               <slot name="header-right" />
             </div>
 
@@ -62,12 +64,13 @@
               -->
               <slot name="close-button" :icon-name="config.defaults.closeIcon">
                 <UIcon
-                  v-if="closeButton"
+                  v-if="closeOnCross"
                   internal
                   interactive
+                  size="sm"
                   :name="config.defaults.closeIcon"
-                  :data-test="`${dataTest}-close`"
                   v-bind="closeIconAttrs"
+                  :data-test="`${dataTest}-close`"
                   @click="onClickCloseModal"
                 />
               </slot>
@@ -75,7 +78,7 @@
           </div>
 
           <div v-bind="bodyAttrs">
-            <!-- @slot Use it to add something to the modal body. -->
+            <!-- @slot Use it to add something into the modal body. -->
             <slot />
           </div>
 
@@ -86,12 +89,12 @@
 
             <div v-bind="footerAttrs">
               <div v-if="hasSlotContent($slots['footer-left'])" v-bind="footerLeftAttrs">
-                <!-- @slot Use it to add something to the left part of the footer. -->
+                <!-- @slot Use it to add something to the left side of the footer. -->
                 <slot name="footer-left" />
               </div>
 
               <div v-if="hasSlotContent($slots['footer-right'])" v-bind="footerRightAttrs">
-                <!-- @slot Use it to add something to the right part of the footer. -->
+                <!-- @slot Use it to add something to the right side of the footer. -->
                 <slot name="footer-right" />
               </div>
             </div>
@@ -123,7 +126,7 @@ const wrapperRef = ref(null);
 
 const props = defineProps({
   /**
-   * Change modal state (hidden / shown).
+   * Set modal state (hidden / shown).
    */
   modelValue: {
     type: Boolean,
@@ -131,7 +134,7 @@ const props = defineProps({
   },
 
   /**
-   * Set modal title.
+   * Modal title.
    */
   title: {
     type: String,
@@ -139,7 +142,7 @@ const props = defineProps({
   },
 
   /**
-   * Sets modal description.
+   * Modal description.
    */
   description: {
     type: String,
@@ -147,44 +150,52 @@ const props = defineProps({
   },
 
   /**
-   * Set back link route.
+   * Modal size (width).
+   * @values xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl
    */
-  backRoute: {
+  size: {
+    type: String,
+    default: getDefault(defaultConfig, UModal).size,
+  },
+
+  /**
+   * Back link vue-router route object.
+   */
+  backTo: {
     type: Object,
     default: () => ({}),
   },
 
   /**
-   * Set width for modal.
-   * @values xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl
+   * Back link label.
    */
-  width: {
+  backLabel: {
     type: String,
-    default: getDefault(defaultConfig, UModal).width,
+    default: "",
   },
 
   /**
-   * Allow closing modal by clicking on overlay.
+   * Allow closing modal by clicking on close cross.
    */
-  clickToClose: {
+  closeOnCross: {
     type: Boolean,
-    default: getDefault(defaultConfig, UModal).clickToClose,
+    default: getDefault(defaultConfig, UModal).closeOnCross,
   },
 
   /**
-   * Allow closing modal by clicking on close icon.
+   * Allow closing modal by clicking on overlay.
    */
-  closeButton: {
+  closeOnOverlay: {
     type: Boolean,
-    default: getDefault(defaultConfig, UModal).closeButton,
+    default: getDefault(defaultConfig, UModal).closeOnOverlay,
   },
 
   /**
-   * Allow closing modal by pressing escape (esc) key.
+   * Allow closing modal by pressing escape (esc) on the keyboard.
    */
-  escToClose: {
+  closeOnEsc: {
     type: Boolean,
-    default: getDefault(defaultConfig, UModal).escToClose,
+    default: getDefault(defaultConfig, UModal).closeOnEsc,
   },
 
   /**
@@ -204,19 +215,19 @@ const props = defineProps({
   },
 
   /**
-   * Reverse left and right footer blocks (mobile version only).
+   * Attach small modal to the bottom of the screen (mobile version only).
    */
-  mobileFooterReverse: {
+  mobileStickBottom: {
     type: Boolean,
-    default: getDefault(defaultConfig, UModal).mobileFooterReverse,
+    default: getDefault(defaultConfig, UModal).mobileStickBottom,
   },
 
   /**
-   * Attach small modal to the bottom of the screen (mobile version only).
+   * Unique element id.
    */
-  mobileBottomAlign: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UModal).mobileBottomAlign,
+  id: {
+    type: String,
+    default: "",
   },
 
   /**
@@ -227,14 +238,6 @@ const props = defineProps({
     default: () => ({}),
   },
 
-  /**
-   * Unique element id.
-   */
-  id: {
-    type: String,
-    default: "",
-  },
-
   /**
    * Set data-test attribute for automated testing.
    */
@@ -289,16 +292,16 @@ const isShownModal = computed({
 });
 
 const isShownArrowButton = computed(() => {
-  return !!Object.keys(props.backRoute).length;
+  return !!Object.keys(props.backTo).length;
 });
 
 const isExistHeader = computed(() => {
   return (
+    props.title ||
     hasSlotContent(slots["header-left"]) ||
-    hasSlotContent(slots["header-left-before"]) ||
-    hasSlotContent(slots["header-left-after"]) ||
-    hasSlotContent(slots["header-right"]) ||
-    props.title
+    hasSlotContent(slots["before-title"]) ||
+    hasSlotContent(slots["after-title"]) ||
+    hasSlotContent(slots["header-right"])
   );
 });
 
@@ -325,15 +328,15 @@ function onClickBackLink() {
 }
 
 function onClickOutside() {
-  props.clickToClose && closeModal();
+  props.closeOnOverlay && closeModal();
 }
 
 function onKeydownEsc() {
-  props.escToClose && closeModal();
+  props.closeOnEsc && closeModal();
 }
 
 function onClickCloseModal() {
-  props.closeButton && closeModal();
+  props.closeOnCross && closeModal();
 }
 
 function closeModal() {

package/ui.container-modal/config.js

@@ -24,20 +24,19 @@ export default /*tw*/ {
   backLink: "{ULink} flex items-center gap-0.5",
   backLinkIcon: "{UIcon}",
   title: "{UHeader}",
-  description: "mt-1.5 text-base font-normal text-gray-500",
+  description: "mt-1.5 text-sm font-normal text-gray-500",
   headerRight: "",
   closeIcon: "{UIcon}",
-  body: "space-y-4 px-4 md:px-8",
+  body: "space-y-4 px-4 md:px-8 text-sm",
   divider: "{UDivider}",
   dividerSpacing: "{UDivider}",
   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: {
+      size: {
         xs: "md:w-[25rem]",
         sm: "md:w-[31.25rem]",
         md: "md:w-[37.5rem]",
@@ -54,14 +53,13 @@ export default /*tw*/ {
     },
   },
   defaults: {
-    width: "sm",
+    size: "sm",
     inner: false,
-    closeButton: true,
-    escToClose: true,
-    clickToClose: true,
     noDivider: false,
-    mobileBottomAlign: false,
-    mobileFooterReverse: false,
+    closeOnEsc: true,
+    closeOnCross: true,
+    closeOnOverlay: true,
+    mobileStickBottom: false,
     /* icons */
     backIcon: "arrow_back",
     closeIcon: "close",

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

@@ -66,7 +66,7 @@ const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   components: { UModal, UButton, URow, UInput, UTextarea },
   setup() {
     function onClick(value) {
-      args.width = value;
+      args.size = value;
       args.modelValue = true;
     }
 
@@ -98,10 +98,16 @@ export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
 export const Sizes = EnumVariantTemplate.bind({});
-Sizes.args = { enum: "width", text: "" };
-
-export const BackRoute = DefaultTemplate.bind({});
-BackRoute.args = { backRoute: { title: "route title" } };
+Sizes.args = { enum: "size" };
+
+export const BackLink = DefaultTemplate.bind({});
+BackLink.args = {
+  backLabel: "back",
+  backTo: {
+    path: "/",
+    params: {},
+  },
+};
 
 export const SlotDefault = DefaultTemplate.bind({});
 SlotDefault.args = {
@@ -112,37 +118,31 @@ SlotDefault.args = {
   `,
 };
 
-export const SlotHeaderLeftBefore = DefaultTemplate.bind({});
-SlotHeaderLeftBefore.args = {
+export const SlotBeforeTitle = DefaultTemplate.bind({});
+SlotBeforeTitle.args = {
   slotTemplate: `
-    <template #header-left-before>
-      <UIcon
-        name="star"
-        color="gray"
-      />
+    <template #before-title>
+      <UIcon name="star" color="gray" />
     </template>
     ${defaultTemplate}
   `,
 };
 
-export const SlotHeaderLeft = DefaultTemplate.bind({});
-SlotHeaderLeft.args = {
+export const SlotAfterTitle = DefaultTemplate.bind({});
+SlotAfterTitle.args = {
   slotTemplate: `
-    <template #header-left>
-      <UHeader size="lg" label="Large title" />
+    <template #after-title>
+      <UIcon name="star" color="gray" />
     </template>
     ${defaultTemplate}
   `,
 };
 
-export const SlotHeaderLeftAfter = DefaultTemplate.bind({});
-SlotHeaderLeftAfter.args = {
+export const SlotHeaderLeft = DefaultTemplate.bind({});
+SlotHeaderLeft.args = {
   slotTemplate: `
-    <template #header-left-after>
-      <UIcon
-        name="star"
-        color="gray"
-      />
+    <template #header-left>
+      <UHeader size="lg" label="Large title" />
     </template>
     ${defaultTemplate}
   `,

package/ui.container-modal/useAttrs.js

@@ -1,29 +1,15 @@
-import { computed } from "vue";
 import useUI from "../composables/useUI.js";
 
 import defaultConfig from "./config.js";
 
-import useBreakpoint from "../composables/useBreakpoint.js";
-
 export default function useAttrs(props) {
-  const { config, getKeysAttrs, hasSlotContent, getExtendingKeysClasses } = useUI(
+  const { config, getKeysAttrs, hasSlotContent } = useUI(
     defaultConfig,
     () => props.config,
+    "wrapper",
   );
-  const { isMobileBreakpoint } = useBreakpoint();
-
-  const extendingKeys = ["footerMobileReverse"];
-  const extendingKeysClasses = getExtendingKeysClasses(extendingKeys);
 
-  const keysAttrs = getKeysAttrs({}, extendingKeys, {
-    footer: {
-      extend: computed(() => [
-        props.mobileFooterReverse &&
-          isMobileBreakpoint.value &&
-          extendingKeysClasses.footerMobileReverse.value,
-      ]),
-    },
-  });
+  const keysAttrs = getKeysAttrs();
 
   return {
     config,