vueless 0.0.176 → 0.0.177

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.176",
+  "version": "0.0.177",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",
@@ -37,7 +37,7 @@
     "@release-it/bumper": "^6.0.1",
     "@vitejs/plugin-vue": "^5.0.5",
     "@vue/eslint-config-prettier": "^9.0.0",
-    "@vueless/plugin-vite": "^0.0.32",
+    "@vueless/plugin-vite": "^0.0.34",
     "@vueless/storybook": "^0.0.32",
     "@vueless/web-types": "^0.0.12",
     "autoprefixer": "^10.4.19",

package/ui.data-table/index.vue

@@ -67,7 +67,7 @@
 
       <ULoaderTop
         v-if="resource && isHeaderSticky"
-        :resource-names="resource"
+        :resources="resource"
         v-bind="stickyHeaderLoaderAttrs"
       />
     </div>
@@ -126,7 +126,7 @@
             </th>
           </tr>
 
-          <ULoaderTop v-if="resource" :resource-names="resource" v-bind="headerLoaderAttrs" />
+          <ULoaderTop v-if="resource" :resources="resource" v-bind="headerLoaderAttrs" />
         </thead>
 
         <tbody v-if="tableRows.length" v-bind="bodyAttrs">

package/ui.dropdown-list/configs/default.config.js

@@ -10,7 +10,7 @@ export default /*tw*/ {
       hover:transition hover:duration-100 hover:ease-in-out bg-white opacity-1
     `,
   subGroupLabel: {
-    base: "pointer-events-none bg-transparent !font-medium leading-none !uppercase !text-gray-500/[85] pt-1",
+    base: "pointer-events-none bg-transparent !font-medium !leading-none !uppercase !text-gray-500/[85] pt-1",
     variants: {
       size: {
         sm: "text-2xs",
@@ -20,7 +20,7 @@ export default /*tw*/ {
     },
   },
   groupLabel: {
-    base: "pointer-events-none bg-transparent !font-medium leading-none !uppercase !text-gray-500/[85] pt-6 group-first/item:pt-2",
+    base: "pointer-events-none bg-transparent !font-medium !leading-none !uppercase !text-gray-500/[85] pt-6 group-first/item:pt-2",
     variants: {
       size: {
         sm: "text-2xs pb-1 mt-4",

package/ui.form-checkbox/configs/default.config.js

@@ -20,6 +20,7 @@ export default /*tw*/ {
   icon: "",
   checkbox: {
     base: `
+      transition duration-100 ease-in-out
       border border-solid rounded
       border-gray-300 bg-white
       hover:border-gray-400
@@ -34,11 +35,11 @@ export default /*tw*/ {
         sm: "size-5 text-sm",
         md: "size-6",
         lg: "size-7 text-lg",
-        xl: "size-6 text-xl",
+        xl: "size-8 text-xl",
       },
       color: {
         grayscale: `
-          focus:border-gray-500 focus:ring-gray-200
+          focus:border-gray-500 focus:ring-gray-500
           checked:border-gray-900 checked:bg-gray-900 checked:text-gray-900
           active:border-gray-900 active:bg-gray-900
         `,

package/ui.form-checkbox/index.vue

@@ -135,7 +135,7 @@ const props = defineProps({
 
   /**
    * Checkbox size.
-   * @values sm, md, lg
+   * @values xs, sm, md, lg, xl
    */
   size: {
     type: String,
@@ -192,9 +192,11 @@ const { config, checkboxAttrs, iconWrapperCellAttrs, labelAttrs, iconAttrs } = u
 
 const iconSize = computed(() => {
   const sizes = {
+    xs: "2xs",
     sm: "xs",
     md: "sm",
     lg: "md",
+    xl: "lg",
   };
 
   return sizes[props.size];

package/ui.form-input/configs/default.config.js

@@ -49,9 +49,9 @@ export default /*tw*/ {
       `,
     },
     compoundVariants: [
-      { labelAlign: "topInside", label: true, size: "sm", class: "pt-6 pb-2" },
-      { labelAlign: "topInside", label: true, size: "md", class: "pt-7 pb-2.5" },
-      { labelAlign: "topInside", label: true, size: "lg", class: "pt-8 pb-3" },
+      { labelAlign: "topInside", label: true, size: "sm", class: "pt-5 pb-1.5" },
+      { labelAlign: "topInside", label: true, size: "md", class: "pt-6 pb-1.5" },
+      { labelAlign: "topInside", label: true, size: "lg", class: "pt-7 pb-2" },
     ],
   },
   defaultVariants: {

package/ui.form-label/configs/default.config.js

@@ -3,38 +3,38 @@ export default /*tw*/ {
     base: "flex",
     variants: {
       size: {
+        xs: "gap-2",
         sm: "gap-2",
         md: "gap-2.5",
         lg: "gap-3",
+        xl: "gap-3.5",
       },
       align: {
         top: "flex-col",
-        topInside: "flex-col",
+        topInside: "flex-col gap-0",
         topWithDesc: "flex-col-reverse w-fit",
         left: "flex-row w-fit",
         right: "flex-row-reverse w-fit",
         bottom: "flex-col-reverse w-fit",
       },
     },
-    compoundVariants: [
-      { align: "topInside", size: "sm", class: "gap-0" },
-      { align: "topInside", size: "md", class: "gap-0" },
-      { align: "topInside", size: "lg", class: "gap-0" },
-    ],
   },
   labelWrapper: "",
   label: {
     base: "text-gray-500 z-10 font-normal block !leading-none",
     variants: {
       size: {
+        xs: "text-2xs",
         sm: "text-xs",
         md: "text-sm",
         lg: "text-base",
+        xl: "text-lg",
       },
       align: {
         topInside: "absolute left-4",
-        left: "text-gray-900",
-        right: "text-gray-900",
+        topWithDesc: "pt-1 pb-1.5",
+        left: "pt-1 pb-1 text-gray-900",
+        right: "pt-1 pb-1 text-gray-900",
       },
       error: {
         true: "text-red-500",
@@ -44,49 +44,55 @@ export default /*tw*/ {
       },
     },
     compoundVariants: [
+      { align: "topInside", size: "xs", class: "top-1.5" },
       { align: "topInside", size: "sm", class: "top-2" },
       { align: "topInside", size: "md", class: "top-2.5" },
       { align: "topInside", size: "lg", class: "top-3" },
-      { align: "topWithDesc", size: "sm", class: "pt-1 pb-1.5" },
-      { align: "topWithDesc", size: "md", class: "pt-1 pb-1.5 mt-px" },
-      { align: "topWithDesc", size: "lg", class: "pt-1 pb-1.5 mt-0.5" },
-      { align: "left", size: "sm", class: "pt-1 pb-1.5 text-sm" },
-      { align: "left", size: "md", class: "pt-1 pb-1.5 mt-px text-base" },
-      { align: "left", size: "lg", class: "pt-1 pb-1.5 mt-0.5 text-lg" },
-      { align: "right", size: "sm", class: "pt-1 pb-1.5 text-sm" },
-      { align: "right", size: "md", class: "pt-1 pb-1.5 mt-px text-base" },
-      { align: "right", size: "lg", class: "pt-1 pb-1.5 mt-0.5 text-lg" },
+      { align: "topInside", size: "xl", class: "top-3.5" },
+      { align: "topWithDesc", size: "xs", class: "-mt-px" },
+      { align: "topWithDesc", size: "sm", class: "" },
+      { align: "topWithDesc", size: "md", class: "mt-px" },
+      { align: "topWithDesc", size: "lg", class: "mt-0.5" },
+      { align: "topWithDesc", size: "xl", class: "mt-1" },
+      { align: "left", size: "xs", class: "-mt-0.5 text-sm" },
+      { align: "left", size: "sm", class: "text-sm" },
+      { align: "left", size: "md", class: "mt-px text-base" },
+      { align: "left", size: "lg", class: "mt-0.5 text-lg" },
+      { align: "left", size: "xl", class: "mt-1 text-xl" },
+      { align: "right", size: "sm", class: "-mt-0.5 text-xs" },
+      { align: "right", size: "sm", class: "text-sm" },
+      { align: "right", size: "md", class: "mt-px text-base" },
+      { align: "right", size: "lg", class: "mt-0.5 text-lg" },
+      { align: "right", size: "xl", class: "mt-1 text-xl" },
     ],
   },
   description: {
     base: "font-normal text-gray-500/[85] !leading-none",
     variants: {
       size: {
+        xs: "text-2xs",
         sm: "text-2xs",
         md: "text-xs",
         lg: "text-sm",
+        xl: "text-base",
       },
       align: {
         topInside: "pl-4",
-        top: "pl-0",
+        top: "pl-0 -mt-0.5",
         left: "pl-0",
         right: "pl-0",
-        bottom: "-order-1",
+        bottom: "-order-1 -mt-2",
       },
       error: {
         true: "text-red-500",
       },
     },
     compoundVariants: [
-      { align: "bottom", size: "sm", class: "-mt-2" },
-      { align: "bottom", size: "md", class: "-mt-2" },
-      { align: "bottom", size: "lg", class: "-mt-2" },
-      { align: "top", size: "sm", class: "-mt-0.5" },
-      { align: "top", size: "md", class: "-mt-0.5" },
-      { align: "top", size: "lg", class: "-mt-0.5" },
+      { align: "topInside", size: "xs", class: "mt-1" },
       { align: "topInside", size: "sm", class: "mt-1.5" },
       { align: "topInside", size: "md", class: "mt-2" },
       { align: "topInside", size: "lg", class: "mt-2.5" },
+      { align: "topInside", size: "xl", class: "mt-3" },
     ],
   },
   defaultVariants: {

package/ui.form-label/index.vue

@@ -16,12 +16,7 @@
         v-text="label"
       />
 
-      <div
-        v-if="error"
-        :data-cy="`${dataCy}-error-message`"
-        v-bind="descriptionAttrs"
-        v-text="error"
-      />
+      <div v-if="error" :data-cy="`${dataCy}-error`" v-bind="descriptionAttrs" v-text="error" />
 
       <div
         v-if="description && !error"
@@ -46,12 +41,7 @@
 
     <slot />
 
-    <div
-      v-if="error"
-      :data-cy="`${dataCy}-error-message`"
-      v-bind="descriptionAttrs"
-      v-text="error"
-    />
+    <div v-if="error" :data-cy="`${dataCy}-error`" v-bind="descriptionAttrs" v-text="error" />
 
     <div
       v-if="description && !error"
@@ -89,7 +79,7 @@ const props = defineProps({
 
   /**
    * Set label size.
-   * @values sm, md, lg
+   * @values xs, sm, md, lg, xl
    */
   size: {
     type: String,

package/ui.form-radio/configs/default.config.js

@@ -2,6 +2,7 @@ export default /*tw*/ {
   label: "inline-flex",
   radio: {
     base: `
+      transition duration-100 ease-in-out
       border border-solid border-{color}-300 text-{color}-500
       hover:border-{color}-400
       active:border-{color}-500
@@ -10,9 +11,11 @@ export default /*tw*/ {
     `,
     variants: {
       size: {
+        xs: "size-4",
         sm: "size-5",
         md: "size-6",
         lg: "size-7",
+        xl: "size-8",
       },
     },
     compoundVariants: [

package/ui.form-radio/index.vue

@@ -77,7 +77,7 @@ const props = defineProps({
 
   /**
    * Radio size.
-   * @values sm, md, lg
+   * @values xs, sm, md, lg, xl
    */
   size: {
     type: String,

package/ui.form-select/configs/default.config.js

@@ -9,9 +9,9 @@ export default /*tw*/ {
     `,
     variants: {
       size: {
-        sm: "pt-2 pb-2",
-        md: "pt-2.5 pb-2.5",
-        lg: "pt-3 pb-3",
+        sm: "pt-2 pb-1.5",
+        md: "pt-2.5 pb-1.5",
+        lg: "pt-3 pb-2",
       },
       error: {
         true: `
@@ -27,9 +27,9 @@ export default /*tw*/ {
       },
     },
     compoundVariants: [
-      { labelAlign: "topInside", label: true, size: "sm", class: "pt-6" },
-      { labelAlign: "topInside", label: true, size: "md", class: "pt-7" },
-      { labelAlign: "topInside", label: true, size: "lg", class: "pt-8" },
+      { labelAlign: "topInside", label: true, size: "sm", class: "pt-5" },
+      { labelAlign: "topInside", label: true, size: "md", class: "pt-6" },
+      { labelAlign: "topInside", label: true, size: "lg", class: "pt-7" },
     ],
   },
   innerWrapper: {
@@ -48,8 +48,8 @@ export default /*tw*/ {
     base: "flex items-center mt-0",
     compoundVariants: [
       { labelAlign: "topInside", size: "sm", label: true, class: "-mt-3" },
-      { labelAlign: "topInside", size: "md", label: true, class: "-mt-4" },
-      { labelAlign: "topInside", size: "lg", label: true, class: "-mt-5" },
+      { labelAlign: "topInside", size: "md", label: true, class: "-mt-3" },
+      { labelAlign: "topInside", size: "lg", label: true, class: "-mt-4" },
     ],
   },
   beforeCaretSlot: "",

package/ui.form-select/index.vue

@@ -41,7 +41,7 @@
           internal
           interactive
           color="gray"
-          :size="size"
+          :size="iconSize"
           :name="config.toggleIconName"
           v-bind="toggleIconAttrs"
         />
@@ -60,7 +60,7 @@
           internal
           interactive
           color="gray"
-          :size="size"
+          :size="iconSize"
           :name="config.clearIconName"
           v-bind="clearIconAttrs"
           @mousedown="removeElement"
@@ -93,7 +93,7 @@
                 internal
                 interactive
                 color="gray"
-                :size="size"
+                :size="iconSize"
                 :name="config.removeItemIconName"
                 v-bind="removeItemIconAttrs"
                 @mousedown="removeElement(item)"
@@ -503,6 +503,16 @@ const {
 const i18nGlobal = tm(USelect);
 const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props.config.i18n));
 
+const iconSize = computed(() => {
+  const sizes = {
+    sm: "sm",
+    md: "md",
+    lg: "md",
+  };
+
+  return sizes[props.size];
+});
+
 const inputPlaceholder = computed(() => {
   const message = currentLocale.value.addMore;
 

package/ui.form-textarea/configs/default.config.js

@@ -4,10 +4,10 @@ export default /*tw*/ {
   rightSlot: "flex items-center justify-center h-full w-11 absolute right-0",
   textareaWrapper: {
     base: `
-      transition duration-100 ease-in-out focus-within:outline-none rounded-lg border
-      border-solid border-gray-300 focus-within:border-gray-500 focus-within:ring-4
-      focus-within:ring-gray-600/[.15] ring-0 hover:border-gray-400 pl-4 hover:focus-within:border-gray-500
-      cursor-text bg-white
+      transition duration-100 ease-in-out focus-within:outline-none
+      rounded-lg border border-solid border-gray-300 ring-0 cursor-text bg-white pr-4
+      hover:border-gray-400 pl-4 hover:focus-within:border-gray-500
+      focus-within:border-gray-500 focus-within:ring-4 focus-within:ring-gray-600/[.15]
     `,
     variants: {
       error: {
@@ -24,18 +24,15 @@ export default /*tw*/ {
         true: "ring-0 border-gray-300 focus-within:ring-0 focus-within:border-brand-300",
       },
       size: {
-        sm: "pb-2 pr-4 pt-6",
-        md: "pb-2.5 pr-4 pt-7",
-        lg: "pb-3 pr-4 pt-8",
+        sm: "pt-2 pb-2",
+        md: "pt-2.5 pb-2.5",
+        lg: "pt-3 pb-3",
       },
     },
     compoundVariants: [
-      { labelAlign: "top", size: "sm", class: "pt-2" },
-      { labelAlign: "top", size: "md", class: "pt-2.5" },
-      { labelAlign: "top", size: "lg", class: "pt-3" },
-      { labelAlign: "topInside", label: false, class: "pt-2" },
-      { labelAlign: "topInside", label: false, class: "pt-2.5" },
-      { labelAlign: "topInside", label: false, class: "pt-3" },
+      { labelAlign: "topInside", label: true, class: "pt-5 pb-1.5" },
+      { labelAlign: "topInside", label: true, class: "pt-6 pb-1.5" },
+      { labelAlign: "topInside", label: true, class: "pt-7 pb-2" },
     ],
   },
   textarea: {

package/ui.loader-rendering/Docs.mdx

@@ -1,7 +1,8 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source, Markdown } from "@storybook/blocks";
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
 import { getSource } from "../service.storybook";
 
 import * as stories from "./index.stories";
+import defaultConfig from "./configs/default.config?raw"
 
 <Meta of={stories} />
 <Title of={stories} />

package/ui.loader-rendering/index.stories.js

@@ -1,5 +1,6 @@
 import ULoaderRendering from "../ui.loader-rendering";
 import UButton from "../ui.button";
+import UGroup from "../ui.container-group";
 
 import { useLoaderRendering } from "./composables/useLoaderRendering";
 
@@ -10,11 +11,18 @@ import { getArgTypes } from "../service.storybook";
  */
 export default {
   id: "9030",
-  title: "Loaders and Skeletons / Loader rendering",
+  title: "Loaders and Skeletons / Loader Rendering",
   component: ULoaderRendering,
   argTypes: {
     ...getArgTypes(ULoaderRendering.name),
   },
+  parameters: {
+    docs: {
+      story: {
+        height: "420px",
+      },
+    },
+  },
 };
 
 const DefaultTemplate = (args) => ({
@@ -23,32 +31,29 @@ const DefaultTemplate = (args) => ({
     return { args };
   },
   template: `
-    <div>
-      <ULoaderRendering v-bind="args" class="!static !w-full" />
-    </div>
+    <ULoaderRendering v-bind="args" class="w-full h-full" />
   `,
 });
 
 const LoadingTemplate = (args) => ({
-  components: { ULoaderRendering, UButton },
+  components: { ULoaderRendering, UButton, UGroup },
   setup() {
-    const { setRenderingFinished, isRenderingPage, setRenderingStarted } = useLoaderRendering();
+    const { loaderRenderingOn, loaderRenderingOff, isLoading } = useLoaderRendering();
 
-    return { args, setRenderingFinished, setRenderingStarted, isRenderingPage };
+    return { args, loaderRenderingOn, loaderRenderingOff, isLoading };
   },
   methods: {
     toggleLoading() {
-      this.isRenderingPage ? this.setRenderingFinished() : this.setRenderingStarted();
+      this.isLoading ? this.loaderRenderingOff() : this.loaderRenderingOn();
     },
   },
   template: `
-      <div class="flex justify-center items-center pb-4">
-        <UButton label="Toggle loading" @click="toggleLoading"/>
-      </div>
-      <div>
-        <ULoaderRendering v-bind="args" class="!static !w-full" />
-      </div>
-    `,
+    <UGroup align="center" class="pb-4">
+      <UButton label="Toggle loading" size="sm" @click="toggleLoading"/>
+    </UGroup>
+
+    <ULoaderRendering v-bind="args" class="!static w-full h-96" />
+  `,
 });
 
 export const Default = DefaultTemplate.bind({});

package/ui.loader-top/Docs.mdx

@@ -12,25 +12,57 @@ import defaultConfig from "./configs/default.config?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
-## Control loader
-You can control loader state using *useLoaderRendering* composable.
+## Using loader
+To control the loader state in Vue components use `useLoaderTop` composable.
+
+The loader uses queue of resources and will be shown until at least one item is present in a queue.
 
 <Source code={`
 import { useLoaderTop } from "vueless";
 
 const {
-    loaderTopOn,
-    loaderTopOff,
-    addRequestUrl,
-    removeRequestUrl
+  isLoading,
+  loaderTopOn,
+  loaderTopOff,
+  requestQueue,
+  componentRequestQueue,
+  setComponentRequestQueue,
+  removeComponentRequestQueue
 } = useLoaderTop();
+
+// get loader state
+console.log(isLoading.value);
+
+// show loader (add resource into queue)
+loaderTopOn("/transactions");
+
+// hide loader (remove resource from queue)
+loaderTopOff("/transactions");
+
+// get current resource array
+console.log(requestQueue.value);
+
+// get current resource array for component relayed loaders (UTable)
+console.log(componentRequestQueue.value);
+
+// add resource into component related loader queue
+setComponentRequestQueue("/transactions");
+
+// remove resource from component related loader queue
+removeComponentRequestQueue("/transactions");
 `} language="jsx" dark />
 
-## Control outside a component
-You can control loader state outside vue components using the following methods.
+## Using loader outside Vue components
+To control the loader state outside Vue components, use the following methods.
 
 <Source code={`
 import { loaderTopOn, loaderTopOff } from "vueless";
+
+// show loader
+loaderTopOn("/transactions");
+
+// hide loader
+loaderTopOff("/transactions");
 `} language="jsx" dark />
 
 ## Default config

package/ui.loader-top/composables/useLoaderTop.js

@@ -4,54 +4,41 @@ export const LoaderTopSymbol = Symbol.for("vueless:loader-top");
 
 const isLoading = ref(true);
 const requestQueue = ref([]);
-const loaderRequestQueue = ref([]);
-const loaderRequestTimeout = ref(0);
-const componentLoaderRequestQueue = ref([]);
+const requestTimeout = ref(0);
+const componentRequestQueue = ref([]);
 
 function loaderTopOn(url) {
-  loaderRequestQueue.value.push(url);
+  requestQueue.value.push(url);
   isLoading.value = true;
 
-  clearTimeout(loaderRequestTimeout.value);
+  clearTimeout(requestTimeout.value);
 }
 
 function loaderTopOff(url) {
-  loaderRequestQueue.value = url ? loaderRequestQueue.value.filter((item) => item !== url) : [];
+  requestQueue.value = url ? requestQueue.value.filter((item) => item !== url) : [];
 
-  loaderRequestTimeout.value = setTimeout(() => {
-    if (!loaderRequestQueue.value.length) {
+  requestTimeout.value = setTimeout(() => {
+    if (!requestQueue.value.length) {
       isLoading.value = false;
     }
   }, 50);
 }
 
-function addRequestUrl(url) {
-  requestQueue.value.push(url);
-}
-
-function removeRequestUrl(url) {
-  requestQueue.value = requestQueue.value.filter((item) => item !== url);
-}
-
 function setComponentRequestQueue(requests) {
-  componentLoaderRequestQueue.value = [...componentLoaderRequestQueue.value, ...requests];
+  componentRequestQueue.value = [...componentRequestQueue.value, ...requests];
 }
 
 function removeComponentRequestQueue() {
-  componentLoaderRequestQueue.value = [];
+  componentRequestQueue.value = [];
 }
 
 export function createLoaderTop() {
   return {
     isLoading: readonly(isLoading),
     requestQueue: readonly(requestQueue),
-    loaderRequestQueue: readonly(loaderRequestQueue),
-    loaderRequestTimeout: readonly(loaderRequestTimeout),
-    componentLoaderRequestQueue: readonly(componentLoaderRequestQueue),
+    componentRequestQueue: readonly(componentRequestQueue),
     loaderTopOn,
     loaderTopOff,
-    addRequestUrl,
-    removeRequestUrl,
     setComponentRequestQueue,
     removeComponentRequestQueue,
   };