vueless 0.0.642 → 0.0.643

package/package.json

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

package/ui.form-label/config.ts

@@ -1,9 +1,9 @@
 export default /*tw*/ {
   wrapper: {
-    base: "flex gap-2 w-full",
+    base: "flex w-full",
     variants: {
       align: {
-        top: "flex-col",
+        top: "flex-col gap-2",
         topInside: "flex-col gap-0 relative",
         topWithDesc: "flex-col-reverse w-fit",
         right: "flex-row w-fit",
@@ -14,14 +14,12 @@ export default /*tw*/ {
       },
     },
     compoundVariants: [
-      { align: "left", size: "sm", class: "gap-2" },
-      { align: "left", size: "md", class: "gap-3" },
-      { align: "left", size: "lg", class: "gap-4" },
-      { align: "right", size: "sm", class: "gap-2.5" },
-      { align: "right", size: "md", class: "gap-3" },
-      { align: "right", size: "lg", class: "gap-3.5" },
-      { align: "left", centred: true, class: "items-center justify-end w-auto" },
-      { align: "right", centred: true, class: "items-center justify-start w-auto" },
+      { align: ["left", "right"], size: "sm", class: "gap-2.5" },
+      { align: ["left", "right"], size: "md", class: "gap-3" },
+      { align: ["left", "right"], size: "lg", class: "gap-3.5" },
+      { align: ["left", "right"], centred: true, class: "items-center w-auto" },
+      { align: "left", centred: true, class: "justify-end" },
+      { align: "right", centred: true, class: "justify-start" },
     ],
   },
   content: "flex",
@@ -55,14 +53,10 @@ export default /*tw*/ {
       { align: "topWithDesc", size: "sm", class: "-mt-px" },
       { align: "topWithDesc", size: "md", class: "" },
       { align: "topWithDesc", size: "lg", class: "mt-px" },
-      { align: "left", size: "sm", class: "-mt-px text-sm" },
-      { align: "left", size: "md", class: "text-sm" },
-      { align: "left", size: "lg", class: "mt-px text-base" },
-      { align: "right", size: "sm", class: "-mt-px text-xs" },
-      { align: "right", size: "md", class: "text-sm" },
-      { align: "right", size: "lg", class: "mt-px text-base" },
-      { align: "left", centred: false, class: "pt-1" },
-      { align: "right", centred: false, class: "pt-1" },
+      { align: ["left", "right"], size: "sm", class: "-mt-px text-sm" },
+      { align: ["left", "right"], size: "md", class: "text-sm" },
+      { align: ["left", "right"], size: "lg", class: "mt-px text-base" },
+      { align: ["left", "right"], centred: false, class: "pt-1" },
     ],
   },
   description: {

package/ui.form-textarea/UTextarea.vue

@@ -63,7 +63,7 @@ const elementId = props.id || useId();
 const textareaRef = ref<HTMLTextAreaElement | null>(null);
 const labelComponentRef = ref<{ labelElement: HTMLElement | null } | null>(null);
 const leftSlotWrapperRef = ref<HTMLElement | null>(null);
-const textareaWrapperRef = ref<HTMLElement | null>(null);
+const wrapperRef = ref<HTMLElement | null>(null);
 
 const currentRows = ref(Number(props.rows));
 
@@ -74,36 +74,43 @@ watch(
   },
 );
 
-function onEnter() {
-  if (currentRows.value !== undefined) {
-    currentRows.value++;
-  }
-}
+const localValue = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(value) {
+    emit("update:modelValue", value);
+  },
+});
 
-function onBackspace() {
+onMounted(() => toggleReadonly(true));
+
+function getNewRowCount() {
   const textarea = textareaRef.value;
 
-  if (!textarea) return;
+  if (!textarea) return 0;
 
   const content = textarea.value;
   const newlineCount = (content.match(/\n/g) || []).length;
-  const newRowCount = Math.max(Number(props.rows), newlineCount + 1);
 
-  if (newRowCount < currentRows.value) {
+  return Math.max(Number(props.rows), newlineCount + 2);
+}
+
+function onEnter() {
+  const newRowCount = getNewRowCount();
+
+  if (newRowCount > currentRows.value) {
     currentRows.value = newRowCount;
   }
 }
 
-const localValue = computed({
-  get() {
-    return props.modelValue;
-  },
-  set(value) {
-    emit("update:modelValue", value);
-  },
-});
+function onBackspace() {
+  const newRowCount = getNewRowCount() - 1;
 
-onMounted(() => toggleReadonly(true));
+  if (newRowCount < currentRows.value) {
+    currentRows.value = newRowCount;
+  }
+}
 
 function onChange() {
   emit("change");
@@ -154,14 +161,10 @@ useMutationObserver(leftSlotWrapperRef, (mutations) => {
 function setLabelPosition() {
   if (props.labelAlign === "top" || !hasSlotContent(slots["left"])) return;
 
-  if (
-    leftSlotWrapperRef.value &&
-    textareaWrapperRef.value &&
-    labelComponentRef.value?.labelElement
-  ) {
+  if (leftSlotWrapperRef.value && wrapperRef.value && labelComponentRef.value?.labelElement) {
     const leftSlotWidth = leftSlotWrapperRef.value.getBoundingClientRect().width;
 
-    const textareaPaddingLeft = parseFloat(getComputedStyle(textareaWrapperRef.value).paddingLeft);
+    const textareaPaddingLeft = parseFloat(getComputedStyle(wrapperRef.value).paddingLeft);
 
     labelComponentRef.value.labelElement.style.left = `${leftSlotWidth + textareaPaddingLeft}px`;
   }
@@ -186,7 +189,7 @@ const mutatedProps = computed(() => ({
   label: Boolean(props.label),
 }));
 
-const { textareaAttrs, textareaLabelAttrs, textareaWrapperAttrs, leftSlotAttrs, rightSlotAttrs } =
+const { textareaAttrs, textareaLabelAttrs, wrapperAttrs, leftSlotAttrs, rightSlotAttrs } =
   useUI<Config>(defaultConfig, mutatedProps);
 </script>
 
@@ -204,7 +207,7 @@ const { textareaAttrs, textareaLabelAttrs, textareaWrapperAttrs, leftSlotAttrs,
     v-bind="textareaLabelAttrs"
     :data-test="dataTest"
   >
-    <label ref="textareaWrapperRef" :for="elementId" v-bind="textareaWrapperAttrs">
+    <label ref="wrapperRef" :for="elementId" v-bind="wrapperAttrs">
       <div
         v-if="hasSlotContent($slots['left'])"
         ref="leftSlotWrapperRef"
@@ -233,7 +236,7 @@ const { textareaAttrs, textareaLabelAttrs, textareaWrapperAttrs, leftSlotAttrs,
         @mousedown="onMousedown"
         @click="onClick"
         @keydown.enter="onEnter"
-        @keydown.delete="onBackspace"
+        @keyup.delete="onBackspace"
       />
 
       <div v-if="hasSlotContent($slots['right'])" :for="elementId" v-bind="rightSlotAttrs">

package/ui.form-textarea/config.ts

@@ -2,9 +2,9 @@ export default /*tw*/ {
   textareaLabel: "{ULabel}",
   leftSlot: "flex items-center justify-center whitespace-nowrap pr-2.5 gap-1 rounded-dynamic rounded-r-none",
   rightSlot: "flex items-center justify-center whitespace-nowrap pl-2.5 gap-1 rounded-dynamic rounded-l-none",
-  textareaWrapper: {
+  wrapper: {
     base: `
-      flex px-3 py-2 bg-white transition w-full
+      flex bg-white transition w-full
       rounded-dynamic border border-gray-300 hover:border-gray-400 hover:focus-within:border-brand-500
       focus-within:border-brand-500 focus-within:ring-dynamic focus-within:ring-offset-dynamic
       focus-within:ring-brand-700/15 focus-within:outline-none
@@ -27,7 +27,7 @@ export default /*tw*/ {
   },
   textarea: {
     base: `
-      p-0 block w-full bg-transparent border-none !leading-none font-normal text-gray-900
+      px-3 pt-2 pb-1.5 block w-full bg-transparent border-none font-normal text-gray-900
       placeholder:text-gray-400 placeholder:font-normal placeholder:leading-none
       focus:border-none focus:outline-none focus:ring-0 disabled:cursor-not-allowed
     `,
@@ -45,13 +45,13 @@ export default /*tw*/ {
       },
     },
     compoundVariants: [
-      { 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" },
+      { labelAlign: "topInside", label: true, size: "sm", class: "pt-[1.2rem]" },
+      { labelAlign: "topInside", label: true, size: "md", class: "pt-[1.4rem]" },
+      { labelAlign: "topInside", label: true, size: "lg", class: "pt-[1.6rem]" },
     ],
   },
   defaults: {
-    rows: "3",
+    rows: "1",
     size: "md",
     inputmode: "text",
     labelAlign: "topInside",

package/ui.text-alert/config.ts

@@ -24,6 +24,10 @@ export default /*tw*/ {
       { color: "grayscale", variant: "secondary", class: "text-gray-900 border-gray-900" },
       { color: "grayscale", variant: "thirdary", class: "text-gray-900 bg-gray-50" },
       { color: "grayscale", variant: "thirdary", bordered: true, class: "border-gray-200" },
+      { color: "gray", variant: "primary", class: "bg-gray-500" },
+      { color: "gray", variant: "secondary", class: "text-gray-500 border-gray-500" },
+      { color: "gray", variant: "thirdary", class: "text-gray-500 bg-gray-50" },
+      { color: "gray", variant: "thirdary", bordered: true, class: "border-gray-500" },
     ],
   },
   body: "flex items-start justify-between",