vueless 0.0.516 → 0.0.518

package/package.json

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

package/ui.button/config.ts

@@ -15,9 +15,9 @@ export default /*tw*/ {
         "2xs": "px-2 py-1 text-xs gap-0.5",
         xs: "px-3 py-1.5 text-xs gap-1",
         sm: "px-4 py-2 text-sm gap-1.5",
-        md: "px-5 py-3 text-sm gap-1.5",
-        lg: "px-5 py-3 text-base gap-1.5",
-        xl: "px-6 py-3.5 text-base gap-2",
+        md: "px-5 py-2.5 text-sm gap-1.5",
+        lg: "px-6 py-3 text-base gap-1.5",
+        xl: "px-7 py-3.5 text-base gap-2",
       },
       variant: {
         primary: `
@@ -130,18 +130,18 @@ export default /*tw*/ {
       { rightIcon: true, size: "xs", class: "pr-2" },
       { rightIcon: true, size: "sm", class: "pr-3" },
       { rightIcon: true, size: "md", class: "pr-4" },
-      { rightIcon: true, size: "lg", class: "pr-4" },
-      { rightIcon: true, size: "xl", class: "pr-5" },
+      { rightIcon: true, size: "lg", class: "pr-5" },
+      { rightIcon: true, size: "xl", class: "pr-6" },
       { leftIcon: true, size: "2xs", class: "pl-1" },
       { leftIcon: true, size: "xs", class: "pl-2" },
       { leftIcon: true, size: "sm", class: "pl-3" },
       { leftIcon: true, size: "md", class: "pl-4" },
-      { leftIcon: true, size: "lg", class: "pl-4" },
-      { leftIcon: true, size: "xl", class: "pl-5" },
+      { leftIcon: true, size: "lg", class: "pl-5" },
+      { leftIcon: true, size: "xl", class: "pl-6" },
       { square: true, size: "2xs", class: "p-1" },
       { square: true, size: "xs", class: "p-1.5" },
       { square: true, size: "sm", class: "p-2" },
-      { square: true, size: "md", class: "p-3" },
+      { square: true, size: "md", class: "p-2.5" },
       { square: true, size: "lg", class: "p-3" },
       { square: true, size: "xl", class: "p-3.5" },
     ],

package/ui.container-page/UPage.vue

@@ -103,7 +103,7 @@ onMounted(() => {
                 <template #left>
                   <UIcon
                     internal
-                    size="xs"
+                    size="2xs"
                     color="gray"
                     :name="config.defaults.backIcon"
                     v-bind="backLinkIconAttrs"

package/ui.container-page/config.ts

@@ -36,8 +36,8 @@ export default /*tw*/ {
     },
   },
   header: "flex items-start justify-between mb-4 md:mb-6",
-  headerLeft: "flex items-center space-x-4",
-  headerLeftFallback: "flex flex-col",
+  headerLeft: "flex items-center gap-4",
+  headerLeftFallback: "flex flex-col gap-0.5",
   backLink: "{ULink}",
   backLinkIcon: "{UIcon}",
   title: "{UHeader}",

package/ui.data-list/UDataList.vue

@@ -24,6 +24,7 @@
       :item-key="valueKey"
       :group="{ name: group }"
       handle=".icon-drag"
+      :animation="animationDuration"
       :ghost-class="config.draggableGhost"
       :drag-class="config.draggableDrag"
       :data-test="dataTest"
@@ -49,6 +50,7 @@
               <UIcon
                 internal
                 color="gray"
+                variant="light"
                 :size="iconSize"
                 :name="config.defaults.dragIcon"
                 v-bind="dragIconAttrs"

package/ui.data-list/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: "{UIcon} icon-drag cursor-move opacity-100 fill-gray-400 md:fill-gray-500",
+  dragIcon: "{UIcon} icon-drag cursor-move opacity-100",
   label: {
     base: "font-normal text-gray-900 flex-auto pt-px",
     variants: {

package/ui.data-list/useAttrs.js

@@ -1,11 +1,21 @@
 import useUI from "../composables/useUI.ts";
 
 import defaultConfig from "./config.js";
+import { computed } from "vue";
 
 export default function useAttrs(props) {
-  const { config, getKeysAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
+  const { config, getKeysAttrs, getExtendingKeysClasses, hasSlotContent } = useUI(
+    defaultConfig,
+    () => props.config,
+  );
 
-  const keysAttrs = getKeysAttrs();
+  const extendingKeysClasses = getExtendingKeysClasses(["label"]);
+
+  const keysAttrs = getKeysAttrs({}, [], {
+    labelCrossed: {
+      base: computed(() => [extendingKeysClasses.label.value]),
+    },
+  });
 
   return {
     config,

package/ui.form-textarea/config.js

@@ -30,7 +30,7 @@ export default /*tw*/ {
   textarea: {
     base: `
       p-0 block w-full bg-transparent border-none !leading-none font-normal text-gray-900
-      placeholder:font-normal placeholder:text-gray-400
+      placeholder:text-gray-400 placeholder:font-normal placeholder:leading-none
       focus:border-none focus:outline-none focus:ring-0
     `,
     variants: {

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.516",
+  "version": "0.0.518",
   "contributions": {
     "html": {
       "description-markup": "markdown",