vueless 0.0.397 → 0.0.399

package/package.json

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

package/ui.container-modal/UModal.vue

@@ -27,18 +27,20 @@
                     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" size="sm" v-bind="titleAttrs" />
@@ -157,13 +159,21 @@ const props = defineProps({
   },
 
   /**
-   * Back link route.
+   * Back link vue-router route object.
    */
-  backRoute: {
+  backTo: {
     type: Object,
     default: () => ({}),
   },
 
+  /**
+   * Back link label.
+   */
+  backLabel: {
+    type: String,
+    default: "",
+  },
+
   /**
    * Allow closing modal by clicking on close cross.
    */
@@ -282,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"])
   );
 });
 

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

@@ -100,8 +100,14 @@ Default.args = {};
 export const Sizes = EnumVariantTemplate.bind({});
 Sizes.args = { enum: "size" };
 
-export const BackRoute = DefaultTemplate.bind({});
-BackRoute.args = { backRoute: { title: "route title" } };
+export const BackLink = DefaultTemplate.bind({});
+BackLink.args = {
+  backLabel: "back",
+  backTo: {
+    path: "/",
+    params: {},
+  },
+};
 
 export const SlotDefault = DefaultTemplate.bind({});
 SlotDefault.args = {

package/ui.container-modal/useAttrs.js

@@ -3,7 +3,11 @@ import useUI from "../composables/useUI.js";
 import defaultConfig from "./config.js";
 
 export default function useAttrs(props) {
-  const { config, getKeysAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
+  const { config, getKeysAttrs, hasSlotContent } = useUI(
+    defaultConfig,
+    () => props.config,
+    "wrapper",
+  );
 
   const keysAttrs = getKeysAttrs();
 

package/ui.container-page/UPage.vue

@@ -4,20 +4,20 @@
       <!-- @slot Use it to add something before the header. -->
       <slot name="header-before" />
 
-      <div v-if="isShownHeader" v-bind="headerAttrs">
+      <div v-if="isExistHeader" 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 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"
                 no-ring
                 size="sm"
                 color="gray"
-                :to="backRoute"
+                :to="backTo"
                 :label="backLabel"
                 v-bind="backLinkAttrs"
               >
@@ -35,14 +35,14 @@
               <UHeader :label="title" :size="titleSize" 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" />
+            <!-- @slot Use it to add something after the header title. -->
+            <slot name="after-title" />
+          </slot>
         </div>
 
         <div v-bind="headerRightAttrs">
-          <!-- @slot Use it to customise right side of the header. -->
+          <!-- @slot Use it to add something to the right side of the header. -->
           <slot name="header-right" />
         </div>
       </div>
@@ -50,7 +50,7 @@
       <!-- @slot Use it to add something after the header. -->
       <slot name="header-after" />
 
-      <div>
+      <div v-bind="bodyAttrs">
         <!-- @slot Use it to add main content. -->
         <slot />
       </div>
@@ -58,13 +58,13 @@
       <!-- @slot Use it to add something before the footer. -->
       <slot name="footer-before" />
 
-      <div v-if="isShownFooterSlot" class="vueless-page-footer" v-bind="footerAttrs">
-        <div class="vueless-page-footer-left" v-bind="footerLeftAttrs">
+      <div v-if="isExistFooter" v-bind="footerAttrs">
+        <div v-bind="footerLeftAttrs">
           <!-- @slot Use it to add something to the left side of the footer. -->
           <slot name="footer-left" />
         </div>
 
-        <div class="vueless-page-footer-right" v-bind="footerRightAttrs">
+        <div v-bind="footerRightAttrs">
           <!-- @slot Use it to add something to the right side of the footer. -->
           <slot name="footer-right" />
         </div>
@@ -101,16 +101,16 @@ defineOptions({ inheritAttrs: false });
 
 const props = defineProps({
   /**
-   * The width of the page.
+   * Page size (width).
    * @values xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, wide
    */
-  width: {
+  size: {
     type: String,
-    default: getDefault(defaultConfig, UPage).width,
+    default: getDefault(defaultConfig, UPage).size,
   },
 
   /**
-   * Set page title.
+   * Page title.
    */
   title: {
     type: String,
@@ -118,7 +118,7 @@ const props = defineProps({
   },
 
   /**
-   * Set page title size.
+   * Page title size.
    * @values xs, sm, md, lg, xl, 2xl
    */
   titleSize: {
@@ -137,7 +137,7 @@ const props = defineProps({
   /**
    * Back link vue-router route object.
    */
-  backRoute: {
+  backTo: {
     type: Object,
     default: () => ({}),
   },
@@ -151,21 +151,13 @@ const props = defineProps({
   },
 
   /**
-   * Set gray background color.
+   * Sets background light gray (useful if the page contains nested cards).
    */
   gray: {
     type: Boolean,
     default: getDefault(defaultConfig, UPage).gray,
   },
 
-  /**
-   * Reverse left and right footer blocks (in a mobile version only).
-   */
-  mobileFooterReverse: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UPage).mobileFooterReverse,
-  },
-
   /**
    * Stick right page rounding.
    */
@@ -206,6 +198,7 @@ const {
   descriptionAttrs,
   headerLeftAttrs,
   headerRightAttrs,
+  bodyAttrs,
   footerAttrs,
   footerLeftAttrs,
   footerRightAttrs,
@@ -213,27 +206,22 @@ const {
   hasSlotContent,
 } = useAttrs(props, { isMobileBreakpoint });
 
-const isShownHeader = computed(() => {
-  const isHeaderLeftSlot = hasSlotContent(slots["header-left"]);
-  const isHeaderRightSlot = hasSlotContent(slots["header-right"]);
-  const isHeaderLeftBeforeSlot = hasSlotContent(slots["header-left-before"]);
-  const isHeaderLeftAfterSlot = hasSlotContent(slots["header-left-after"]);
-
+const isExistHeader = computed(() => {
   return (
     props.title ||
-    isHeaderLeftSlot ||
-    isHeaderLeftBeforeSlot ||
-    isHeaderLeftAfterSlot ||
-    isHeaderRightSlot
+    hasSlotContent(slots["header-left"]) ||
+    hasSlotContent(slots["header-right"]) ||
+    hasSlotContent(slots["before-title"]) ||
+    hasSlotContent(slots["after-title"])
   );
 });
 
-const isShownFooterSlot = computed(() => {
+const isExistFooter = computed(() => {
   return hasSlotContent(slots["footer-left"]) || hasSlotContent(slots["footer-right"]);
 });
 
 const isShownArrowButton = computed(() => {
-  return Boolean(Object.keys(props.backRoute).length);
+  return Boolean(Object.keys(props.backTo).length);
 });
 
 onMounted(() => {
@@ -244,59 +232,3 @@ onMounted(() => {
   document.querySelector("body").classList.add(...classes);
 });
 </script>
-
-<!--style lang="postcss" scoped>
-/**
-  * TODO: Move this styles to global vueless config using tailwind group class and remove footer classes
-  *
-.vueless-page {
-  &-footer {
-    &-left:deep(.vueless-dropdown-button) {
-      @apply !block;
-    }
-
-    &-right,
-    &-left {
-      :deep(.vueless-dropdown-button) {
-        .dropdown-block,
-        .vueless-dropdown-button-list {
-          @apply max-md:w-full;
-        }
-
-        .vueless-dropdown-item {
-          @apply max-md:text-center;
-        }
-
-        .dropdown-list {
-           @apply xmb-[calc(theme("spacing.mobile-menu-height")+3rem)];
-        }
-      }
-
-      &:deep(.vueless-dropdown-tag, .vueless-dropdown-link, .vueless-dropdown-button) {
-        @apply w-full md:w-auto;
-
-        .dropdown-wrapper-list {
-          @apply mb-2 md:mb-0;
-        }
-
-        .dropdown-block {
-          @apply relative md:absolute;
-        }
-
-        .dropdown-list-right {
-          @apply w-full text-center;
-        }
-
-        .dropdown-wrapper {
-          @apply block w-full;
-
-          .vueless-svg-icon {
-            @apply right-auto;
-          }
-        }
-      }
-    }
-  }
-}
-*/
-</style-->

package/ui.container-page/config.js

@@ -4,7 +4,7 @@ export default /*tw*/ {
   wrapper: {
     base: "min-h-screen UNotifyPage",
     variants: {
-      width: {
+      size: {
         xs: "md:w-[25rem] md:max-[500px]:!w-full",
         sm: "md:w-[31.25rem] md:max-[600px]:!w-full",
         md: "md:w-[37.5rem] md:max-[700px]:!w-full",
@@ -43,13 +43,10 @@ export default /*tw*/ {
   title: "{UHeader}",
   description: "mt-1.5 text-base font-normal text-gray-500",
   headerRight: "",
+  body: "",
   footer: `mb-0 mt-14 justify-between pt-8 md:flex md:items-baseline space-y-4 md:space-y-0 border-t border-gray-200`,
   footerLeft: "md:flex space-y-4 md:space-x-4 md:space-y-0",
-  footerRight: `
-    md:flex space-y-4 md:space-x-4 md:space-y-0 group-[]/reversed-footer:flex
-    group-[]/reversed-footer:flex-col-reverse group-[]/reversed-footer:space-y-reverse
-  `,
-  footerMobileReverse: "flex flex-col-reverse space-y-reverse group/reversed-footer",
+  footerRight: "md:flex space-y-4 md:space-x-4 md:space-y-0",
   rightRoundingWrapper: "absolute right-4",
   rightRounding: {
     base: "fixed top-0 w-4 rounded-r-2xl bg-white h-screen",
@@ -61,11 +58,10 @@ export default /*tw*/ {
     },
   },
   defaults: {
-    titleSize: "lg",
-    width: "wide",
+    titleSize: "md",
+    size: "wide",
     gray: false,
     fixedRounding: false,
-    mobileFooterReverse: false,
     /* icons */
     backIcon: "arrow_back",
   },

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

@@ -64,62 +64,46 @@ Default.args = {};
 export const TitleSizeSm = DefaultTemplate.bind({});
 TitleSizeSm.args = { titleSize: "sm" };
 
-export const Classes = DefaultTemplate.bind({});
-Classes.args = {
-  classes: {
-    header: "text-violet-300",
-  },
-};
-
 export const Description = DefaultTemplate.bind({});
 Description.args = { description: "Page description" };
 
-export const Width = DefaultTemplate.bind({});
-Width.args = { width: "md", title: "Width = md" };
+export const Size = DefaultTemplate.bind({});
+Size.args = { size: "sm", title: "size = md" };
 
-export const WidePage = DefaultTemplate.bind({});
-WidePage.args = { widePage: true, width: "sm" };
-
-export const BackRoute = DefaultTemplate.bind({});
-BackRoute.args = {
+export const BackLink = DefaultTemplate.bind({});
+BackLink.args = {
   backLabel: "back",
-  backRoute: {
+  backTo: {
     path: "/",
     params: {},
   },
 };
 
-export const SlotHeaderLeftBefore = DefaultTemplate.bind({});
-SlotHeaderLeftBefore.args = {
+export const SlotHeaderLeft = DefaultTemplate.bind({});
+SlotHeaderLeft.args = {
   slotTemplate: `
-    <template #header-left-before>
-      <UIcon
-        name="close"
-        color="gray"
-      />
+    <template #header-left>
+      <UHeader size="lg" label="Large title" />
     </template>
     ${defaultTemplate}
   `,
 };
 
-export const SlotHeaderLeft = DefaultTemplate.bind({});
-SlotHeaderLeft.args = {
+export const SlotBeforeTitle = DefaultTemplate.bind({});
+SlotBeforeTitle.args = {
   slotTemplate: `
-    <template #header-left>
-      <UHeader size="lg" label="Large title" />
+    <template #before-title>
+      <UIcon name="close" color="gray" />
     </template>
     ${defaultTemplate}
   `,
 };
 
-export const SlotHeaderLeftAfter = DefaultTemplate.bind({});
-SlotHeaderLeftAfter.args = {
+export const SlotAfterTitle = DefaultTemplate.bind({});
+SlotAfterTitle.args = {
   slotTemplate: `
-    <template #header-left-after>
-      <UIcon
-        name="close"
-        color="gray"
-      />
+    <template #after-title>
+      <UIcon name="close" color="gray" />
     </template>
     ${defaultTemplate}
   `,

package/ui.container-page/useAttrs.js

@@ -8,9 +8,10 @@ export default function useAttrs(props, { isMobileBreakpoint }) {
   const { config, getKeysAttrs, hasSlotContent, getExtendingKeysClasses } = useUI(
     defaultConfig,
     () => props.config,
+    "wrapper",
   );
 
-  const extendingKeys = ["wrapperMobile", "footerMobileReverse"];
+  const extendingKeys = ["wrapperMobile"];
   const extendingKeysClasses = getExtendingKeysClasses(extendingKeys);
 
   const keysAttrs = getKeysAttrs({}, extendingKeys, {
@@ -19,13 +20,6 @@ export default function useAttrs(props, { isMobileBreakpoint }) {
         isMobileBreakpoint.value && !isMobileApp && extendingKeysClasses.wrapperMobile.value,
       ]),
     },
-    footer: {
-      extend: computed(() => [
-        props.mobileFooterReverse &&
-          isMobileBreakpoint.value &&
-          extendingKeysClasses.footerMobileReverse.value,
-      ]),
-    },
   });
 
   return {

package/ui.navigation-progress/StepperProgress.vue

@@ -1,5 +1,5 @@
 <template>
-  <svg width="100%" height="100%" viewBox="0 0 40 40" v-bind="stepperSvgAttrs">
+  <svg viewBox="0 0 40 40" v-bind="stepperSvgAttrs">
     <defs>
       <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%" v-bind="stepperGradientAttrs">
         <stop offset="0%" :stop-color="stepperColor" />
@@ -27,7 +27,7 @@
       stroke-dashoffset="0"
     />
     <g v-bind="stepperCountAttrs">
-      <text y="45%" transform="translate(0, 2)">
+      <text y="45%">
         <tspan x="50%" text-anchor="middle">{{ value }}</tspan>
       </text>
     </g>

package/ui.navigation-progress/UProgress.vue

@@ -139,7 +139,7 @@ const isSteps = computed(() => Array.isArray(props.max));
 
 const realMax = computed(() => {
   if (isSteps.value) {
-    return props.max.length;
+    return props.max.length - 1;
   }
 
   return Number(props.max);
@@ -162,6 +162,6 @@ const progressPercent = computed(() => {
 });
 
 function isActiveStep(index) {
-  return index === props.value - 1;
+  return index === props.value;
 }
 </script>

package/ui.navigation-progress/config.js

@@ -4,15 +4,15 @@ export default /*tw*/ {
     variants: {
       variant: {
         progress: "w-full h-auto flex flex-col gap-1.5",
-        stepper: "flex items-center justify-between",
+        stepper: "flex items-center justify-between gap-4",
       },
     },
   },
   stepper: {
-    base: "",
+    base: "shrink-0 grow-0",
     variants: {
       size: {
-        "2xs": "size-8",
+        "2xs": "size-6",
         xs: "size-8",
         sm: "size-10",
         md: "size-12",
@@ -24,8 +24,15 @@ export default /*tw*/ {
   },
   stepperSvg: "",
   stepperGradient: "",
-  stepperCircle: "stroke-current text-{color}-100",
-  stepperCount: "text-xl font-bold text-gray-900 translate-y-2 transform",
+  stepperCircle: {
+    base: "stroke-{color}-100 text-{color}-100",
+    variants: {
+      color: {
+        grayscale: "stroke-gray-100",
+      },
+    },
+  },
+  stepperCount: "text-md font-bold text-gray-900 translate-y-2 transform",
   indicator: {
     base: "text-{color}-600 flex justify-end w-full min-w-fit font-medium transition",
     variants: {
@@ -103,6 +110,7 @@ export default /*tw*/ {
   safelist: (colors) => [
     { pattern: `text-(${colors})-600` },
     { pattern: `text-(${colors})-100` },
+    { pattern: `stroke-(${colors})-100` },
     {
       pattern: `bg-(${colors})-50`,
       variants: ["[&::-webkit-progress-bar]", "[@supports(selector(&::-moz-progress-bar))]"],

package/ui.navigation-progress/storybook/stories.js

@@ -26,7 +26,7 @@ const DefaultTemplate = (args) => ({
     args.iterator = args.max ? 1 : 10;
 
     function updateProgress() {
-      args.value = args.value < (args.max?.length || 100) ? args.value + args.iterator : 0;
+      args.value = args.value < (args.max?.length - 1 || 100) ? args.value + args.iterator : 0;
     }
 
     return { slots, args, updateProgress };
@@ -68,13 +68,13 @@ export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
 export const VariantStepper = DefaultTemplate.bind({});
-VariantStepper.args = { variant: "stepper", max: ["Step 1", "Step 2", "Step 3"] };
+VariantStepper.args = { variant: "stepper", max: ["Step 0", "Step 1", "Step 2"] };
 
 export const Indicator = DefaultTemplate.bind({});
 Indicator.args = { indicator: true };
 
 export const Steps = DefaultTemplate.bind({});
-Steps.args = { max: ["Step 1", "Step 2", "Step 3"] };
+Steps.args = { max: ["Step 0", "Step 1", "Step 2"] };
 
 export const Colors = EnumVariantTemplate.bind({});
 Colors.args = { enum: "color" };
@@ -97,7 +97,7 @@ IndicatorSlot.args = {
 
 export const StepSlot = DefaultTemplate.bind({});
 StepSlot.args = {
-  max: ["Step 1", "Step 2", "Step 3"],
+  max: ["Step 0", "Step 1", "Step 2"],
   slotTemplate: `
   <template #step-0>
     💻

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.397",
+  "version": "0.0.399",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -5958,14 +5958,23 @@
               "default": "sm"
             },
             {
-              "name": "backRoute",
-              "description": "Back link route.",
+              "name": "backTo",
+              "description": "Back link vue-router route object.",
               "value": {
                 "kind": "expression",
                 "type": "object"
               },
               "default": "{}"
             },
+            {
+              "name": "backLabel",
+              "description": "Back link label.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "\"\""
+            },
             {
               "name": "closeOnCross",
               "description": "Allow closing modal by clicking on close cross.",
@@ -6526,8 +6535,8 @@
           "description": "",
           "attributes": [
             {
-              "name": "width",
-              "description": "The width of the page.",
+              "name": "size",
+              "description": "Page size (width).",
               "value": {
                 "kind": "expression",
                 "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | 'wide'"
@@ -6536,7 +6545,7 @@
             },
             {
               "name": "title",
-              "description": "Set page title.",
+              "description": "Page title.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -6545,12 +6554,12 @@
             },
             {
               "name": "titleSize",
-              "description": "Set page title size.",
+              "description": "Page title size.",
               "value": {
                 "kind": "expression",
                 "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'"
               },
-              "default": "lg"
+              "default": "md"
             },
             {
               "name": "description",
@@ -6562,7 +6571,7 @@
               "default": "\"\""
             },
             {
-              "name": "backRoute",
+              "name": "backTo",
               "description": "Back link vue-router route object.",
               "value": {
                 "kind": "expression",
@@ -6581,16 +6590,7 @@
             },
             {
               "name": "gray",
-              "description": "Set gray background color.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "mobileFooterReverse",
-              "description": "Reverse left and right footer blocks (in a mobile version only).",
+              "description": "Sets background light gray (useful if the page contains nested cards).",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -6631,20 +6631,20 @@
               "description": "Use it to add something before the header."
             },
             {
-              "name": "header-left-before",
-              "description": "Use it to add something before left side of the header."
+              "name": "header-left",
+              "description": "Use it to add something to the left side of the header."
             },
             {
-              "name": "header-left",
-              "description": "Use it to customise left side of the header."
+              "name": "before-title",
+              "description": "Use it to add something before the header title."
             },
             {
-              "name": "header-left-after",
-              "description": "Use it to add something after left side of the header."
+              "name": "after-title",
+              "description": "Use it to add something after the header title."
             },
             {
               "name": "header-right",
-              "description": "Use it to customise right side of the header."
+              "description": "Use it to add something to the right side of the header."
             },
             {
               "name": "header-after",