vueless 0.0.210 → 0.0.212

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.210",
+  "version": "0.0.212",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",
@@ -37,8 +37,8 @@
     "@release-it/bumper": "^6.0.1",
     "@vitejs/plugin-vue": "^5.0.5",
     "@vue/eslint-config-prettier": "^9.0.0",
-    "@vueless/plugin-vite": "^0.0.36",
-    "@vueless/storybook": "^0.0.33",
+    "@vueless/plugin-vite": "^0.0.37",
+    "@vueless/storybook": "^0.0.34",
     "@vueless/web-types": "^0.0.13",
     "autoprefixer": "^10.4.19",
     "cssnano": "^6.1.2",

package/ui.container-group/configs/default.config.js

@@ -15,6 +15,13 @@ export default /*tw*/ {
   content: {
     base: "flex flex-col",
     variants: {
+      reverse: {
+        false: "flex-col",
+        true: "flex-col-reverse",
+      },
+      wrap: {
+        true: "flex-wrap",
+      },
       gap: {
         none: "gap-0",
         "2xs": "gap-1",
@@ -32,11 +39,22 @@ export default /*tw*/ {
         stretch: "items-stretch",
         baseline: "items-baseline",
       },
+      justify: {
+        end: "justify-end",
+        start: "justify-start",
+        center: "justify-center",
+        around: "justify-around",
+        evenly: "justify-evenly",
+        between: "justify-between",
+      },
     },
   },
   defaultVariants: {
     gap: "md",
-    align: "stretch",
+    align: "start",
+    justify: "start",
+    wrap: false,
+    reverse: false,
     upperlined: true,
     underlined: false,
   },

package/ui.container-group/index.vue

@@ -45,7 +45,7 @@ defineOptions({ name: "UGroup", inheritAttrs: false });
 
 const props = defineProps({
   /**
-   * Set header title.
+   * Header title.
    */
   title: {
     type: String,
@@ -70,6 +70,31 @@ const props = defineProps({
     default: UIService.get(defaultConfig, UGroup).default.align,
   },
 
+  /**
+   * Nested items horizontally align (flex justify-content).
+   * @values start, end, center, around, evenly, between
+   */
+  justify: {
+    type: String,
+    default: UIService.get(defaultConfig, UGroup).default.justify,
+  },
+
+  /**
+   * Reverse nested items order.
+   */
+  reverse: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UGroup).default.reverse,
+  },
+
+  /**
+   * Allow items to wrap (flex flex-wrap).
+   */
+  wrap: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UGroup).default.wrap,
+  },
+
   /**
    * Show line above the header.
    */

package/ui.container-row/configs/default.config.js

@@ -1,7 +1,17 @@
 export default /*tw*/ {
   wrapper: {
-    base: "flex flex-col md:flex-row w-full",
+    base: "flex w-full",
     variants: {
+      reverse: {
+        false: "flex-col md:flex-row",
+        true: "flex-col-reverse md:flex-row-reverse",
+      },
+      wrap: {
+        true: "flex-wrap",
+      },
+      noMobile: {
+        true: "flex-row",
+      },
       gap: {
         none: "gap-0",
         "2xs": "gap-1",
@@ -19,14 +29,22 @@ export default /*tw*/ {
         stretch: "items-stretch",
         baseline: "items-baseline",
       },
-      noMobile: {
-        true: "flex-row",
+      justify: {
+        end: "justify-end",
+        start: "justify-start",
+        center: "justify-center",
+        around: "justify-around",
+        evenly: "justify-evenly",
+        between: "justify-between",
       },
     },
   },
   defaultVariants: {
     gap: "md",
     align: "start",
+    justify: "start",
+    wrap: false,
+    reverse: false,
     noMobile: false,
   },
 };

package/ui.container-row/index.vue

@@ -17,7 +17,7 @@ defineOptions({ name: "URow", inheritAttrs: false });
 
 const props = defineProps({
   /**
-   * Row spacing between nested elements.
+   * The distance between nested elements.
    * @values none, 2xs, xs, sm, md, lg, xl, 2xl
    */
   gap: {
@@ -26,7 +26,7 @@ const props = defineProps({
   },
 
   /**
-   * Nested items align (flex align-items).
+   * Nested items vertical align (flex align-items).
    * @values start, end, center, stretch, baseline
    */
   align: {
@@ -34,6 +34,31 @@ const props = defineProps({
     default: UIService.get(defaultConfig, URow).default.align,
   },
 
+  /**
+   * Nested items horizontally align (flex justify-content).
+   * @values start, end, center, around, evenly, between
+   */
+  justify: {
+    type: String,
+    default: UIService.get(defaultConfig, URow).default.justify,
+  },
+
+  /**
+   * Reverse nested items order.
+   */
+  reverse: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, URow).default.reverse,
+  },
+
+  /**
+   * Allow items to wrap (flex flex-wrap).
+   */
+  wrap: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, URow).default.wrap,
+  },
+
   /**
    * Disables mobile adaptivity.
    */

package/ui.data-list/composables/attrs.composable.js

@@ -1,45 +1,48 @@
 import useUI from "../../composable.ui";
 import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
-import { cx } from "../../service.ui";
-
-export function useAttrs(props) {
-  const { config, getAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
-  const { labelCrossed } = config.value;
-
-  const wrapperAttrs = getAttrs("wrapper");
-  const dividerAttrs = getAttrs("divider", { isComponent: true });
-  const emptyAttrs = getAttrs("empty", { isComponent: true });
-  const draggableAttrs = getAttrs("draggable");
-  const itemWrapperAttrs = getAttrs("itemWrapper");
-  const itemAttrs = getAttrs("item");
-  const customActionsAttrs = getAttrs("customActions");
-  const deleteIconAttrs = getAttrs("deleteIcon", { isComponent: true });
-  const editIconAttrs = getAttrs("editIcon", { isComponent: true });
-  const dragIconAttrs = getAttrs("dragIcon", { isComponent: true });
-  const nestedAttrs = getAttrs("nested", { isComponent: true });
-
-  const labelAttrsRaw = getAttrs("label");
-
-  const labelAttrs = computed(() => (isActive) => ({
-    ...labelAttrsRaw,
-    class: cx([labelAttrsRaw.value.class, isActive !== undefined && !isActive ? labelCrossed : ""]),
-  }));
+import { cva, cx } from "../../service.ui";
+
+export default function useAttrs(props) {
+  const { config, getAttrs, hasSlotContent, isSystemKey } = useUI(
+    defaultConfig,
+    () => props.config,
+  );
+  const attrs = {};
+
+  for (const key in defaultConfig) {
+    if (isSystemKey(key)) continue;
+
+    const classes = computed(() => {
+      const value = config.value[key];
+
+      if (value.variants || value.compoundVariants) {
+        return cva(value)({
+          ...props,
+        });
+      }
+
+      return "";
+    });
+
+    attrs[`${key}Attrs`] = getAttrs(key, { classes });
+
+    if (key === "label") {
+      const labelAttrs = attrs[`${key}Attrs`];
+
+      attrs[`${key}Attrs`] = computed(() => (isActive) => ({
+        ...labelAttrs,
+        class: cx([
+          labelAttrs.value.class,
+          isActive !== undefined && !isActive ? config.value.labelCrossed : "",
+        ]),
+      }));
+    }
+  }
 
   return {
+    ...attrs,
     config,
     hasSlotContent,
-    wrapperAttrs,
-    dividerAttrs,
-    emptyAttrs,
-    draggableAttrs,
-    nestedAttrs,
-    itemWrapperAttrs,
-    itemAttrs,
-    labelAttrs,
-    customActionsAttrs,
-    deleteIconAttrs,
-    editIconAttrs,
-    dragIconAttrs,
   };
 }

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

@@ -10,7 +10,7 @@ export default /*tw*/ {
     group-last/item-wrapper:border-b-0 group-[]/nested:group-last/item-wrapper:border-b
     py-4 space-x-4 flex flex-auto items-center justify-between
   `,
-  dragIcon: "icon-drag cursor-move opacity-100 fill-gray-400 md:fill-gray-500",
+  dragIcon: "{UIcon} icon-drag cursor-move opacity-100 fill-gray-400 md:fill-gray-500",
   dragIconName: "drag_indicator",
   label: "text-base font-normal text-gray-900 flex-auto pt-px",
   labelCrossed: "line-through",
@@ -18,11 +18,13 @@ export default /*tw*/ {
     space-x-5 opacity-50 md:flex md:items-center md:opacity-0
     group-hover/item:md:block group-hover/item:opacity-100
   `,
-  deleteIcon: "hidden md:block md:opacity-0 group-hover/item:md:opacity-100",
+  deleteIcon: "{UIcon} hidden md:block md:opacity-0 group-hover/item:md:opacity-100",
   deleteIconName: "delete",
-  editIcon: "fill-gray-500 opacity-50",
+  editIcon: "{UIcon} fill-gray-500 opacity-50",
   editIconName: "edit_note",
-  nested: "group/nested ml-6",
+  divider: "{UDivider}",
+  empty: "{UEmpty}",
+  nested: "{UDataList} group/nested ml-6",
   i18n: {
     edit: "Edit",
     delete: "Delete",

package/ui.data-list/index.stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes, getSlotNames } from "../service.storybook";
+import { getArgTypes, getSlotNames, allSlotsFragment } from "../service.storybook";
 
 import UDataList from "../ui.data-list";
 import UIcon from "../ui.image-icon";
@@ -50,9 +50,7 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <UDataList v-bind="args" @dragSort="onDragSort">
-      <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
-        <template v-if="args[slot]">{{ args[slot] }}</template>
-      </template>
+      ${allSlotsFragment}
     </UDataList>
   `,
   methods: {

package/ui.data-list/index.vue

@@ -28,7 +28,10 @@
             <UIcon internal :name="config.dragIconName" color="gray" v-bind="dragIconAttrs" />
 
             <div v-bind="labelAttrs(element.isActive)">
-              <!-- @slot Use it to modify label. -->
+              <!--
+                @slot Use it to modify label.
+                @binding {object} item
+              -->
               <slot name="label" :item="element">
                 {{ element[labelKey] }}
               </slot>
@@ -39,7 +42,10 @@
                 v-if="hasSlotContent($slots['actions']) && !element.isHiddenCustomActions"
                 v-bind="customActionsAttrs"
               >
-                <!-- @slot Use it to add custom actions. -->
+                <!--
+                  @slot Use it to add custom actions.
+                  @binding {object} item
+                -->
                 <slot name="actions" :item="element" />
               </div>
 
@@ -88,7 +94,10 @@
             </template>
 
             <template #actions="{ item }">
-              <!-- @slot Use it to add custom actions. -->
+              <!--
+                @slot Use it to add custom actions.
+                @binding {object} item
+              -->
               <slot name="actions" :item="item" />
             </template>
           </UDataList>
@@ -110,7 +119,7 @@ import UIService from "../service.ui";
 
 import { UDataList as UDataListName } from "./constants";
 import defaultConfig from "./configs/default.config";
-import { useAttrs } from "./composables/attrs.composable";
+import useAttrs from "./composables/attrs.composable";
 import { useLocale } from "../composable.locale";
 
 /* Should be a string for correct web-types gen */
@@ -215,7 +224,27 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["dragSort", "clickEdit", "clickDelete"]);
+const emit = defineEmits([
+  /**
+   * Triggers when item is sorted (after drag).
+   * @property {array} sortData
+   */
+  "dragSort",
+
+  /**
+   * Triggers when edit button is clicked.
+   * @property {number} value
+   * @property {string} label
+   */
+  "clickEdit",
+
+  /**
+   * Triggers when delete button is clicked.
+   * @property {number} value
+   * @property {string} label
+   */
+  "clickDelete",
+]);
 
 const {
   config,