vueless 0.0.176 → 0.0.178

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.176",
+  "version": "0.0.178",
   "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.button/index.stories.js

@@ -21,7 +21,7 @@ export default {
 };
 
 const DefaultTemplate = (args) => ({
-  components: { UButton },
+  components: { UButton, UIcon },
   setup() {
     const slots = getSlotNames(UButton.name);
 
@@ -43,7 +43,7 @@ const SlotTemplate = (args) => ({
   },
   template: `
     <UButton v-bind="args">
-      ${args.slotTemplate}
+      ${args.slotTemplate || ""}
     </UButton>
   `,
 });
@@ -133,6 +133,16 @@ disabled.args = { disabled: true };
 export const colors = ColorTemplate.bind({});
 colors.args = {};
 
+export const iconLeft = DefaultTemplate.bind({});
+iconLeft.args = {
+  iconLeft: "star",
+};
+
+export const iconRight = DefaultTemplate.bind({});
+iconRight.args = {
+  iconRight: "star",
+};
+
 export const slotDefault = SlotTemplate.bind({});
 slotDefault.args = {
   slotTemplate: `
@@ -142,26 +152,26 @@ slotDefault.args = {
   `,
 };
 
-export const slotLeft = SlotTemplate.bind({});
-slotLeft.args = {
+export const iconLeftSlot = SlotTemplate.bind({});
+iconLeftSlot.args = {
   slotTemplate: `
     <template #left>
       <UIcon
         name="star"
-        color="gray"
-       />
+        color="green"
+      />
     </template>
   `,
 };
 
-export const slotRight = SlotTemplate.bind({});
-slotRight.args = {
+export const iconRightSlot = SlotTemplate.bind({});
+iconRightSlot.args = {
   slotTemplate: `
     <template #right>
       <UIcon
         name="star"
-        color="gray"
-       />
+        color="green"
+      />
     </template>
   `,
 };

package/ui.button/index.vue

@@ -11,19 +11,23 @@
     <template v-if="loading">
       <!-- Label is needed to prevent changing button height -->
       <div v-bind="textAttrs" tabindex="-1" class="invisible w-0" v-text="label" />
-      <ULoader :size="loaderSize" :color="loaderColor" v-bind="loaderAttrs" />
+      <ULoader :size="loaderSize" :color="componentColor" v-bind="loaderAttrs" />
     </template>
 
     <template v-else>
-      <!-- @slot Use it to add something before text. -->
-      <slot name="left" />
+      <!-- @slot Use it to add icon before text. -->
+      <slot name="left">
+        <UIcon v-if="iconLeft" :name="iconLeft" :color="componentColor" />
+      </slot>
 
       <!-- @slot Use it to add something instead of text. -->
       <slot />
       <div v-if="label" v-bind="textAttrs" tabindex="-1" v-text="label" />
 
-      <!-- @slot Use it to add something after text. -->
-      <slot name="right" />
+      <!-- @slot Use it to add icon after text. -->
+      <slot name="right">
+        <UIcon v-if="iconRight" :name="iconRight" :color="componentColor" />
+      </slot>
     </template>
   </component>
 </template>
@@ -33,6 +37,7 @@ import { computed, ref } from "vue";
 
 import UIService, { getRandomId } from "../service.ui";
 import ULoader from "../ui.loader";
+import UIcon from "../ui.image-icon";
 
 import defaultConfig from "./configs/default.config";
 import { useAttrs } from "./composables/attrs.composable";
@@ -157,6 +162,22 @@ const props = defineProps({
     type: String,
     default: "",
   },
+
+  /**
+   * Left side icon name.
+   */
+  iconLeft: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Right side icon name.
+   */
+  iconRight: {
+    type: String,
+    default: "",
+  },
 });
 
 const emit = defineEmits(["click"]);
@@ -180,7 +201,7 @@ const loaderSize = computed(() => {
   return sizes[props.size];
 });
 
-const loaderColor = computed(() => {
+const componentColor = computed(() => {
   return props.variant === "primary" ? "white" : props.color;
 });
 

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({});