vueless 0.0.321 → 0.0.322

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.321",
+  "version": "0.0.322",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",

package/preset.tailwind.js

@@ -1,2 +1,2 @@
 /* Hide `/index.js` from import in Tailwind config. */
-export { vuelessPreset } from "./preset.tailwind/index.js";
+export { vuelessPreset, vuelessContent } from "./preset.tailwind/index.js";

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

@@ -7,11 +7,11 @@ export default /*tw*/ {
     component: "{UDropdownList}",
     base: "w-fit",
     variants: {
-      listYPosition: {
+      yPosition: {
         top: "bottom-6 mb-6",
         bottom: "top-3 mt-6",
       },
-      listXPosition: {
+      xPosition: {
         left: "left-0",
         right: "right-0",
       },
@@ -23,8 +23,8 @@ export default /*tw*/ {
     variant: "primary",
     labelKey: "label",
     valueKey: "id",
-    listYPosition: "bottom",
-    listXPosition: "left",
+    yPosition: "bottom",
+    xPosition: "left",
     round: false,
     noIcon: false,
     /* icons */

package/ui.dropdown-badge/index.vue

@@ -161,18 +161,18 @@ const props = defineProps({
    * The position of dropdown list on the y-axis.
    * @values top, bottom
    */
-  listYPosition: {
+  yPosition: {
     type: String,
-    default: getDefault(defaultConfig, UDropdownBadge).listYPosition,
+    default: getDefault(defaultConfig, UDropdownBadge).yPosition,
   },
 
   /**
    * The position of dropdown list on the x-axis.
    * @values left, right
    */
-  listXPosition: {
+  xPosition: {
     type: String,
-    default: getDefault(defaultConfig, UDropdownBadge).listXPosition,
+    default: getDefault(defaultConfig, UDropdownBadge).xPosition,
   },
 
   /**

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

@@ -6,11 +6,11 @@ export default /*tw*/ {
   dropdownList: {
     base: "{UDropdownList} w-fit",
     variants: {
-      listYPosition: {
+      yPosition: {
         top: "bottom-full mb-2",
         bottom: "top-full mt-2",
       },
-      listXPosition: {
+      xPosition: {
         left: "left-0",
         right: "right-0",
       },
@@ -22,8 +22,8 @@ export default /*tw*/ {
     variant: "primary",
     labelKey: "label",
     valueKey: "id",
-    listYPosition: "bottom",
-    listXPosition: "left",
+    yPosition: "bottom",
+    xPosition: "left",
     filled: false,
     round: false,
     square: false,

package/ui.dropdown-button/index.vue

@@ -187,18 +187,18 @@ const props = defineProps({
    * The position of dropdown list on the y-axis.
    * @values top, bottom
    */
-  listYPosition: {
+  yPosition: {
     type: String,
-    default: getDefault(defaultConfig, UDropdownButton).listYPosition,
+    default: getDefault(defaultConfig, UDropdownButton).yPosition,
   },
 
   /**
    * The position of dropdown list on the x-axis.
    * @values left, right
    */
-  listXPosition: {
+  xPosition: {
     type: String,
-    default: getDefault(defaultConfig, UDropdownButton).listXPosition,
+    default: getDefault(defaultConfig, UDropdownButton).xPosition,
   },
 
   /**

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

@@ -6,11 +6,11 @@ export default /*tw*/ {
   dropdownList: {
     base: "{UDropdownList} w-fit",
     variants: {
-      listYPosition: {
+      yPosition: {
         top: "bottom-6 mb-4",
         bottom: "top-3 mt-4",
       },
-      listXPosition: {
+      xPosition: {
         left: "left-0",
         right: "right-0",
       },
@@ -21,8 +21,8 @@ export default /*tw*/ {
     size: "md",
     labelKey: "label",
     valueKey: "id",
-    listYPosition: "bottom",
-    listXPosition: "left",
+    yPosition: "bottom",
+    xPosition: "left",
     underlined: undefined,
     dashed: true,
     noRing: true,

package/ui.dropdown-link/index.vue

@@ -180,18 +180,18 @@ const props = defineProps({
    * The position of dropdown list on the y-axis.
    * @values top, bottom
    */
-  listYPosition: {
+  yPosition: {
     type: String,
-    default: getDefault(defaultConfig, UDropdownLink).listYPosition,
+    default: getDefault(defaultConfig, UDropdownLink).yPosition,
   },
 
   /**
    * The position of dropdown list on the x-axis.
    * @values left, right
    */
-  listXPosition: {
+  xPosition: {
     type: String,
-    default: getDefault(defaultConfig, UDropdownLink).listXPosition,
+    default: getDefault(defaultConfig, UDropdownLink).xPosition,
   },
 
   /**

package/ui.loader/configs/default.config.js

@@ -47,7 +47,6 @@ export default /*tw*/ {
       },
     },
   },
-
   defaults: {
     color: "brand",
     size: "md",

package/ui.text-alert/configs/default.config.js

@@ -26,10 +26,9 @@ export default /*tw*/ {
       { color: "grayscale", variant: "thirdary", bordered: true, class: "border-gray-200" },
     ],
   },
-  text: "{UText}",
   body: "flex items-start justify-between",
+  contentWrapper: "flex gap-2",
   content: "",
-  innerWrapper: "flex gap-2",
   title: {
     base: "font-bold leading-tight",
     variants: {
@@ -42,6 +41,7 @@ export default /*tw*/ {
     },
   },
   description: "",
+  text: "{UText}",
   closeButton: "{UButton}",
   closeIcon: "{UIcon}",
   defaults: {

package/ui.text-alert/index.vue

@@ -4,7 +4,7 @@
     <slot name="top" />
 
     <div v-bind="bodyAttrs">
-      <div v-bind="innerWrapperAttrs">
+      <div v-bind="contentWrapperAttrs">
         <!-- @slot Use it to add something before the text. -->
         <slot name="left" />
 
@@ -29,8 +29,8 @@
             <div v-if="description" v-bind="descriptionAttrs" v-text="description" />
           </slot>
 
-          <!-- @slot Use it to add something inside. -->
           <UText v-bind="textAttrs" :size="size">
+            <!-- @slot Use it to add something inside. -->
             <slot />
           </UText>
         </div>
@@ -119,7 +119,15 @@ const props = defineProps({
   },
 
   /**
-   * Hint size.
+   * Add border to the `thirdary` variant.
+   */
+  bordered: {
+    type: Boolean,
+    default: getDefault(defaultConfig, UAlert).bordered,
+  },
+
+  /**
+   * Alert size.
    * @values xs, sm, md, lg
    */
   size: {
@@ -128,7 +136,7 @@ const props = defineProps({
   },
 
   /**
-   * Hint color.
+   * Alert color.
    * @values brand, grayscale, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, white   */
   color: {
     type: String,
@@ -136,15 +144,7 @@ const props = defineProps({
   },
 
   /**
-   * Add border to the `thirdary` variant.
-   */
-  bordered: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UAlert).bordered,
-  },
-
-  /**
-   * Hint timeout.
+   * Alert timeout.
    */
   timeout: {
     type: Number,
@@ -195,7 +195,7 @@ const {
   descriptionAttrs,
   closeButtonAttrs,
   closeIconAttrs,
-  innerWrapperAttrs,
+  contentWrapperAttrs,
   hasSlotContent,
 } = useAttrs(props);
 

package/ui.text-badge/configs/default.config.js

@@ -54,9 +54,9 @@ export default /*tw*/ {
   rightIcon: "{UIcon}",
   defaults: {
     color: "brand",
-    size: "md",
     variant: "primary",
     tabindex: "-1",
+    size: "md",
     round: false,
     bordered: false,
   },

package/ui.text-badge/index.vue

@@ -155,14 +155,6 @@ const props = defineProps({
     default: "",
   },
 
-  /**
-   * Controls the keyboard “Tab” focus order of elements.
-   */
-  tabindex: {
-    type: [String, Number],
-    default: getDefault(defaultConfig, UBadge).tabindex,
-  },
-
   /**
    * Set badge corners rounded.
    */
@@ -171,6 +163,14 @@ const props = defineProps({
     default: getDefault(defaultConfig, UBadge).round,
   },
 
+  /**
+   * Controls the keyboard “Tab” focus order of elements.
+   */
+  tabindex: {
+    type: [String, Number],
+    default: getDefault(defaultConfig, UBadge).tabindex,
+  },
+
   /**
    * Component ui config object.
    */

package/ui.text-empty/configs/default.config.js

@@ -22,7 +22,6 @@ export default /*tw*/ {
   },
   emptyIcon: "{UIcon}",
   title: "{UHeader}",
-  footer: "mt-4 flex justify-center",
   description: {
     base: "text-center",
     variants: {
@@ -33,6 +32,7 @@ export default /*tw*/ {
       },
     },
   },
+  footer: "mt-4 flex justify-center",
   defaults: {
     size: "md",
     /* icons */

package/ui.text-empty/index.vue

@@ -44,7 +44,7 @@ defineOptions({ name: "UEmpty", inheritAttrs: false });
 
 const props = defineProps({
   /**
-   * Sets title.
+   * Empty state title.
    */
   title: {
     type: String,
@@ -52,7 +52,7 @@ const props = defineProps({
   },
 
   /**
-   * Sets description.
+   * Empty state description.
    */
   description: {
     type: String,
@@ -60,7 +60,7 @@ const props = defineProps({
   },
 
   /**
-   * Sets component size.
+   * Empty state size.
    * @values sm, md, lg
    */
   size: {
@@ -69,7 +69,7 @@ const props = defineProps({
   },
 
   /**
-   * Sets component ui config object.
+   * Component ui config object.
    */
   config: {
     type: Object,

package/ui.text-file/configs/default.config.js

@@ -1,6 +1,6 @@
 export default /*tw*/ {
   file: "{ULink}",
-  info: {
+  body: {
     base: "flex items-center",
     variants: {
       size: {
@@ -10,21 +10,9 @@ export default /*tw*/ {
       },
     },
   },
+  fileImage: "rounded-sm max-w-7",
   fileIcon: "{UIcon}",
-  image: "rounded-sm max-w-7",
-  label: {
-    base: "text-gray-700 whitespace-normal hover:underline hover:decoration-dashed hover:underline-offset-4",
-    variants: {
-      focus: {
-        true: "underline decoration-dashed underline-offset-4",
-      },
-      size: {
-        sm: "text-xs",
-        md: "text-sm",
-        lg: "text-base",
-      },
-    },
-  },
+  fileLabel: "{ULink}",
   defaults: {
     size: "md",
     /* icons */

package/ui.text-file/index.vue

@@ -1,10 +1,10 @@
 <template>
-  <ULink :href="url" no-ring target-blank :data-test="dataTest" v-bind="fileAttrs">
+  <ULink :href="url" no-ring v-bind="fileAttrs" :data-test="dataTest">
     <slot name="left" :file="{ id, label, url, imageUrl }" />
 
     <slot :file="{ id, label, url, imageUrl }">
-      <div v-bind="infoAttrs">
-        <img v-if="imageUrl" :src="imageUrl" v-bind="imageAttrs" />
+      <div v-bind="bodyAttrs">
+        <img v-if="imageUrl" :alt="label" :src="imageUrl" v-bind="fileImageAttrs" />
 
         <UIcon
           v-else
@@ -18,7 +18,7 @@
           @blur="onBlur"
         />
 
-        <span v-bind="labelAttrs" v-text="label" />
+        <ULink :label="label" :size="size" color="gray" dashed no-ring v-bind="fileLabelAttrs" />
       </div>
     </slot>
 
@@ -103,9 +103,12 @@ const props = defineProps({
 
 const focus = ref(false);
 
-const { config, fileAttrs, infoAttrs, fileIconAttrs, labelAttrs, imageAttrs } = useAttrs(props, {
-  focus,
-});
+const { config, fileAttrs, bodyAttrs, fileIconAttrs, fileLabelAttrs, fileImageAttrs } = useAttrs(
+  props,
+  {
+    focus,
+  },
+);
 
 const iconSize = computed(() => {
   const sizes = {

package/ui.text-files/configs/default.config.js

@@ -1,9 +1,9 @@
 export default /*tw*/ {
   filesLabel: "{ULabel}",
-  body: "flex flex-col gap-1",
-  file: "{UFile} block",
+  items: "flex flex-col gap-1",
+  item: "{UFile} block",
   defaults: {
-    placement: "top",
     size: "md",
+    labelAlign: "top",
   },
 };

package/ui.text-files/index.vue

@@ -1,6 +1,13 @@
 <template>
-  <ULabel :label="label" :description="description" :size="size" v-bind="filesLabelAttrs">
-    <div v-bind="bodyAttrs">
+  <ULabel
+    :label="label"
+    :description="description"
+    :size="size"
+    :align="labelAlign"
+    v-bind="filesLabelAttrs"
+  >
+    <div v-bind="itemsAttrs">
+      <!-- @slot Use it to add UFile. -->
       <slot>
         <UFile
           v-for="file in formattedFileList"
@@ -10,12 +17,12 @@
           :url="file.url"
           :image-url="file.imageUrl"
           :size="size"
-          v-bind="fileAttrs"
+          v-bind="itemAttrs"
           :data-test="`${dataTest}-item`"
         >
           <template #left="{ file: currentFile }">
             <!-- @slot Use it to add something left.
-              @binding {object} file
+             @binding {object} file
             -->
             <slot name="left" :file="currentFile" />
           </template>
@@ -47,40 +54,40 @@ defineOptions({ name: "UFiles", inheritAttrs: false });
 
 const props = defineProps({
   /**
-   * Set files label.
+   * List of file objects.
    */
-  label: {
-    type: String,
-    default: "",
+  fileList: {
+    type: Array,
+    default: () => [],
   },
 
   /**
-   * Set description text.
+   * File list label.
    */
-  description: {
+  label: {
     type: String,
     default: "",
   },
 
   /**
-   * Set label placement related from the default slot.
-   * @values topInside, top, left, right
+   * File list label placement.
+   * @values top, topWithDesc
    */
-  placement: {
+  labelAlign: {
     type: String,
-    default: getDefault(defaultConfig, UFiles).placement,
+    default: getDefault(defaultConfig, UFiles).labelAlign,
   },
 
   /**
-   * List of file objects.
+   * File list description.
    */
-  fileList: {
-    type: Array,
-    default: () => [],
+  description: {
+    type: String,
+    default: "",
   },
 
   /**
-   * Set size.
+   * File list size.
    * @values sm, md, lg
    */
   size: {
@@ -105,7 +112,7 @@ const props = defineProps({
   },
 });
 
-const { filesLabelAttrs, bodyAttrs, fileAttrs } = useAttrs(props);
+const { filesLabelAttrs, itemsAttrs, itemAttrs } = useAttrs(props);
 
 const formattedFileList = computed(() =>
   props.fileList.map((file) => {

package/ui.text-header/configs/default.config.js

@@ -1,5 +1,5 @@
 export default /*tw*/ {
-  wrapper: {
+  header: {
     base: "text-{color}-600",
     variants: {
       size: {
@@ -10,17 +10,12 @@ export default /*tw*/ {
         xl: "text-4xl",
         "2xl": "text-5xl",
       },
-      weight: {
-        regular: "font-normal",
-        medium: "font-medium",
-        bold: "font-bold",
-      },
       color: {
         brand: "text-brand",
         white: "text-white",
         grayscale: "text-gray-900",
       },
-      multiline: {
+      line: {
         true: "!leading-none",
       },
       underlined: {
@@ -40,10 +35,9 @@ export default /*tw*/ {
   },
   defaults: {
     color: "grayscale",
-    weight: "medium",
     size: "md",
     tag: "div",
-    multiline: false,
+    line: true,
     underlined: false,
   },
   safelist: (colors) => [{ pattern: `text-(${colors})-600` }, { pattern: `border-(${colors})-600` }],

package/ui.text-header/index.stories.js

@@ -56,19 +56,16 @@ const EnumVariantTemplate = (args, { argTypes } = {}) => ({
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
-export const Weights = EnumVariantTemplate.bind({});
-Weights.args = { enum: "weight" };
-
 export const Sizes = EnumVariantTemplate.bind({});
 Sizes.args = { enum: "size" };
 
 export const Underlined = EnumVariantTemplate.bind({});
 Underlined.args = { enum: "size", underlined: true };
 
-export const Multiline = DefaultTemplate.bind({});
-Multiline.args = {
+export const Line = DefaultTemplate.bind({});
+Line.args = {
   size: "2xl",
-  multiline: true,
+  line: false,
   label: "Some very long header you ever may imagine in your whole long and beautiful life",
 };
 

package/ui.text-header/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <component :is="tag" v-bind="wrapperAttrs" :data-test="dataTest">
+  <component :is="tag" v-bind="headerAttrs" :data-test="dataTest">
     <slot>{{ label }}</slot>
   </component>
 </template>
@@ -32,15 +32,6 @@ const props = defineProps({
     default: getDefault(defaultConfig, UHeader).size,
   },
 
-  /**
-   * Header weight.
-   * @values regular, medium, bold
-   */
-  weight: {
-    type: String,
-    default: getDefault(defaultConfig, UHeader).weight,
-  },
-
   /**
    * Header color.
    * @values brand, grayscale, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, white
@@ -51,7 +42,7 @@ const props = defineProps({
   },
 
   /**
-   * Allows changing button html tag.
+   * Allows changing HTML tag.
    */
   tag: {
     type: String,
@@ -59,11 +50,11 @@ const props = defineProps({
   },
 
   /**
-   * Return default line height to the component (it may be useful for multiline headers).
+   * Removes text line height (disable for multiline headers).
    */
-  multiline: {
+  line: {
     type: Boolean,
-    default: getDefault(defaultConfig, UHeader).multiline,
+    default: getDefault(defaultConfig, UHeader).line,
   },
 
   /**
@@ -91,5 +82,5 @@ const props = defineProps({
   },
 });
 
-const { wrapperAttrs } = useAttrs(props);
+const { headerAttrs } = useAttrs(props);
 </script>