vueless 0.0.291 → 0.0.293

package/package.json

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

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

@@ -24,11 +24,11 @@ export default /*tw*/ {
       },
     },
   },
-  icon: "{UIcon}",
-  expandIconName: "add",
-  collapseIconName: "remove",
+  toggleIcon: "{UIcon}",
   divider: "{UDivider} group-last:hidden",
   defaults: {
+    expandIcon: "add",
+    collapseIcon: "remove",
     size: "md",
   },
 };

package/ui.container-accordion/index.vue

@@ -4,11 +4,11 @@
       <div v-bind="titleAttrs">
         {{ title }}
         <UIcon
-          :name="isOpened ? config.collapseIconName : config.expandIconName"
+          :name="isOpened ? config.defaults.collapseIcon : config.defaults.expandIcon"
           :size="size"
           color="gray"
           internal
-          v-bind="iconAttrs"
+          v-bind="toggleIconAttrs"
         />
       </div>
 
@@ -95,8 +95,15 @@ const emit = defineEmits([
 
 const isOpened = ref(false);
 
-const { config, wrapperAttrs, descriptionAttrs, bodyAttrs, titleAttrs, iconAttrs, dividerAttrs } =
-  useAttrs(props, { isOpened });
+const {
+  config,
+  wrapperAttrs,
+  descriptionAttrs,
+  bodyAttrs,
+  titleAttrs,
+  toggleIconAttrs,
+  dividerAttrs,
+} = useAttrs(props, { isOpened });
 
 const dividerSize = computed(() => {
   const sizes = {

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

@@ -12,8 +12,7 @@ export default /*tw*/ {
     },
   },
   badgeActive: "group",
-  icon: "{UIcon} transition duration-300 group-[]:rotate-180",
-  iconName: "keyboard_arrow_down",
+  dropdownIcon: "{UIcon} transition duration-300 group-[]:rotate-180",
   listWrapper: {
     base: `
       absolute z-10
@@ -33,6 +32,7 @@ export default /*tw*/ {
   },
   list: "{UDropdownList} w-fit",
   defaults: {
+    dropdownIcon: "keyboard_arrow_down",
     color: "brand",
     size: "md",
     weight: "medium",

package/ui.dropdown-badge/index.vue

@@ -15,11 +15,11 @@
         <UIcon
           v-if="!noIcon"
           internal
-          :name="config.iconName"
+          :name="config.defaults.dropdownIcon"
           :size="iconSize"
           :color="color"
           :data-test="`${dataTest}-caret`"
-          v-bind="iconAttrs"
+          v-bind="dropdownIconAttrs"
         />
       </template>
     </UBadge>
@@ -199,8 +199,15 @@ provide("hideDropdownOptions", hideOptions);
 const isShownOptions = ref(false);
 const selectedItem = ref("");
 
-const { config, listWrapperAttrs, wrapperAttrs, badgeAttrs, listAttrs, iconAttrs, hasSlotContent } =
-  useAttrs(props, { isShownOptions });
+const {
+  config,
+  listWrapperAttrs,
+  wrapperAttrs,
+  badgeAttrs,
+  listAttrs,
+  dropdownIconAttrs,
+  hasSlotContent,
+} = useAttrs(props, { isShownOptions });
 
 const iconSize = computed(() => {
   const sizes = {

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

@@ -2,8 +2,7 @@ export default /*tw*/ {
   wrapper: "relative inline-block",
   button: "{UButton}",
   buttonActive: "group",
-  icon: "{UIcon} transition duration-300 group-[]:rotate-180",
-  iconName: "keyboard_arrow_down",
+  dropdownIcon: "{UIcon} transition duration-300 group-[]:rotate-180",
   listWrapper: {
     base: `
       absolute z-10 inline-block
@@ -23,6 +22,7 @@ export default /*tw*/ {
   },
   list: "{UDropdownList} w-fit",
   defaults: {
+    dropdownIcon: "keyboard_arrow_down",
     color: "brand",
     size: "md",
     variant: "primary",

package/ui.dropdown-button/index.vue

@@ -18,11 +18,11 @@
         <UIcon
           v-if="!noIcon"
           internal
-          :name="config.iconName"
+          :name="config.defaults.dropdownIcon"
           :size="iconSize"
           :color="iconColor"
           :data-test="`${dataTest}-caret`"
-          v-bind="iconAttrs"
+          v-bind="dropdownIconAttrs"
         />
       </template>
     </UButton>
@@ -239,7 +239,7 @@ const {
   listWrapperAttrs,
   buttonAttrs,
   listAttrs,
-  iconAttrs,
+  dropdownIconAttrs,
   wrapperAttrs,
   hasSlotContent,
 } = useAttrs(props, { isShownOptions });

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

@@ -3,8 +3,7 @@ export default /*tw*/ {
   trigger: "flex items-center relative space-x-0.5",
   link: "{ULink}",
   linkActive: "group",
-  icon: "{UIcon} block transition duration-300 group-[]:rotate-180",
-  iconName: "keyboard_arrow_down",
+  dropdownIcon: "{UIcon} block transition duration-300 group-[]:rotate-180",
   listWrapper: {
     base: `
       absolute z-10
@@ -24,6 +23,7 @@ export default /*tw*/ {
   },
   list: "{UDropdownList} w-fit",
   defaults: {
+    dropdownIcon: "keyboard_arrow_down",
     color: "brand",
     size: "md",
     labelKey: "label",

package/ui.dropdown-link/index.vue

@@ -19,11 +19,11 @@
             v-if="!noIcon"
             internal
             interactive
-            :name="config.iconName"
+            :name="config.defaults.dropdownIcon"
             :size="iconSize"
             :color="color"
             :data-test="`${dataTest}-caret`"
-            v-bind="iconAttrs"
+            v-bind="dropdownIconAttrs"
             @click="onClickLink"
           />
         </template>
@@ -226,7 +226,7 @@ const {
   wrapperAttrs,
   linkAttrs,
   listAttrs,
-  iconAttrs,
+  dropdownIconAttrs,
   triggerAttrs,
   hasSlotContent,
 } = useAttrs(props, { isShownOptions });

package/ui.form-checkbox/configs/default.config.js

@@ -40,10 +40,10 @@ export default /*tw*/ {
       },
     },
   },
-  icon: "{UIcon}",
-  partialIconName: "remove",
-  selectedIconName: "check",
+  checkedIcon: "{UIcon}",
   defaults: {
+    partiallyCheckedIcon: "remove",
+    checkedIcon: "check",
     color: "brand",
     size: "md",
     labelAlign: "right",

package/ui.form-checkbox/index.vue

@@ -27,10 +27,10 @@
     <label v-if="isChecked" v-bind="iconWrapperAttrs" :for="id">
       <UIcon
         internal
-        :name="partial ? config.partialIconName : config.selectedIconName"
+        :name="partial ? config.defaults.partiallyCheckedIcon : config.defaults.checkedIcon"
         :size="iconSize"
         color="white"
-        v-bind="iconAttrs"
+        v-bind="checkedIconAttrs"
       />
     </label>
 
@@ -214,7 +214,7 @@ const checkboxName = ref("");
 const checkboxSize = ref(props.size);
 const checkboxColor = ref(props.color);
 
-const { config, checkboxAttrs, iconWrapperAttrs, labelAttrs, iconAttrs } = useAttrs(props, {
+const { config, checkboxAttrs, iconWrapperAttrs, labelAttrs, checkedIconAttrs } = useAttrs(props, {
   checkboxColor,
   checkboxSize,
 });

package/ui.form-switch/configs/default.config.js

@@ -41,9 +41,7 @@ export default /*tw*/ {
       { checked: true, size: "lg", class: "ml-[calc(100%-1.25rem)]" },
     ],
   },
-  icon: "{UIcon}",
-  selectedIconName: "check",
-  unselectedIconName: "close",
+  toggleIcon: "{UIcon}",
   toggleLabel: {
     base: "absolute text-center text-2xs font-medium uppercase text-white",
     compoundVariants: [
@@ -59,6 +57,8 @@ export default /*tw*/ {
     active: "On",
   },
   defaults: {
+    enabledIcon: "check",
+    disabledIcon: "close",
     color: "brand",
     size: "md",
     labelAlign: "right",

package/ui.form-switch/index.vue

@@ -25,10 +25,10 @@
         <UIcon
           v-if="toggleIcon"
           internal
-          :name="checkedValue ? config.selectedIconName : config.unselectedIconName"
+          :name="checkedValue ? config.defaults.enabledIcon : config.defaults.disabledIcon"
           :color="iconColor"
           :size="iconSize"
-          v-bind="iconAttrs"
+          v-bind="toggleIconAttrs"
         />
       </span>
 
@@ -172,8 +172,15 @@ const checkedValue = computed({
   set: (value) => emit("update:modelValue", value),
 });
 
-const { config, iconAttrs, labelAttrs, inputAttrs, wrapperAttrs, circleAttrs, toggleLabelAttrs } =
-  useAttrs(props, { checked: checkedValue });
+const {
+  config,
+  toggleIconAttrs,
+  labelAttrs,
+  inputAttrs,
+  wrapperAttrs,
+  circleAttrs,
+  toggleLabelAttrs,
+} = useAttrs(props, { checked: checkedValue });
 
 const switchLabel = computed(() => {
   return checkedValue.value ? currentLocale.value.active : currentLocale.value.inactive;

package/ui.form-textarea/configs/default.config.js

@@ -38,6 +38,9 @@ export default /*tw*/ {
         md: "text-sm placeholder:text-sm",
         lg: "text-base placeholder:text-base",
       },
+      resizable: {
+        false: "resize-none",
+      },
     },
   },
   defaults: {
@@ -46,6 +49,7 @@ export default /*tw*/ {
     type: "text",
     inputmode: "text",
     labelAlign: "topInside",
+    resizable: false,
     disabled: false,
     readonly: false,
     noAutocomplete: false,

package/ui.form-textarea/index.vue

@@ -29,7 +29,7 @@
         :placeholder="placeholder"
         :readonly="readonly"
         :disabled="disabled"
-        :rows="rows"
+        :rows="currentRows"
         :inputmode="inputmode"
         :data-test="dataTest"
         v-bind="textareaAttrs"
@@ -39,6 +39,8 @@
         @mouseleave="onMouseleave"
         @mousedown="onMousedown"
         @click="onClick"
+        @keydown.enter="onEnter"
+        @keydown.backspace="onBackspace"
       />
     </label>
     <label v-if="hasSlotContent($slots['right'])" :for="id" v-bind="rightSlotAttrs">
@@ -49,7 +51,7 @@
 </template>
 
 <script setup>
-import { computed, onMounted, ref, useSlots } from "vue";
+import { computed, onMounted, ref, watch, useSlots } from "vue";
 
 import ULabel from "../ui.form-label";
 import { getRandomId, getDefault } from "../service.ui";
@@ -112,6 +114,14 @@ const props = defineProps({
     default: "",
   },
 
+  /**
+   * Allow resizing of the textarea.
+   */
+  resizable: {
+    type: Boolean,
+    default: getDefault(defaultConfig, UTextarea).resizable,
+  },
+
   /**
    * Make textarea read only.
    */
@@ -157,7 +167,7 @@ const props = defineProps({
    * Set number of visible rows.
    */
   rows: {
-    type: String,
+    type: [String, Number],
     default: getDefault(defaultConfig, UTextarea).rows,
   },
 
@@ -236,6 +246,33 @@ const labelComponentRef = ref(null);
 const leftSlotWrapperRef = ref(null);
 const textareaWrapperRef = ref(null);
 
+const currentRows = ref(props.rows);
+
+watch(
+  () => props.rows,
+  (newRows) => {
+    currentRows.value = newRows;
+  },
+);
+
+function onEnter() {
+  currentRows.value++;
+}
+
+function onBackspace() {
+  const textarea = textareaRef.value;
+
+  if (!textarea) return;
+
+  const content = textarea.value;
+  const newlineCount = (content.match(/\n/g) || []).length;
+  const newRowCount = Math.max(props.rows, newlineCount + 1);
+
+  if (newRowCount < currentRows.value) {
+    currentRows.value = newRowCount;
+  }
+}
+
 const localValue = computed({
   get() {
     return props.modelValue;

package/ui.image-avatar/configs/default.config.js

@@ -33,12 +33,12 @@ export default /*tw*/ {
       },
     },
   },
-  icon: "{UIcon}",
+  placeholderIcon: "{UIcon}",
   defaults: {
     color: "grayscale",
     rounded: "md",
     size: "md",
-    icon: "image",
+    placeholderIcon: "image",
     bordered: false,
   },
   safelist: (colors) => [

package/ui.image-avatar/index.vue

@@ -13,7 +13,7 @@
         :name="icon"
         :color="color === 'white' ? 'grayscale' : color"
         :size="size"
-        v-bind="iconAttrs"
+        v-bind="placeholderIconAttrs"
       />
     </template>
   </div>
@@ -54,7 +54,7 @@ const props = defineProps({
    */
   icon: {
     type: String,
-    default: getDefault(defaultConfig, UAvatar).icon,
+    default: getDefault(defaultConfig, UAvatar).placeholderIcon,
   },
 
   /**
@@ -132,7 +132,7 @@ const backgroundImage = computed(() => {
   return props.src ? `background-image: url(${src});` : "";
 });
 
-const { avatarAttrs, iconAttrs } = useAttrs(props);
+const { avatarAttrs, placeholderIconAttrs } = useAttrs(props);
 
 function onClick(event) {
   emit("click", event);

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

@@ -10,8 +10,7 @@ export default /*tw*/ {
       },
     },
   },
-  icon: "{UIcon}",
-  iconName: "description",
+  fileIcon: "{UIcon}",
   image: "rounded-sm max-w-7",
   label: {
     base: "text-gray-700 whitespace-normal hover:underline hover:decoration-dashed hover:underline-offset-4",
@@ -27,6 +26,7 @@ export default /*tw*/ {
     },
   },
   defaults: {
+    fileIcon: "description",
     size: "md",
   },
 };

package/ui.text-file/index.vue

@@ -12,8 +12,8 @@
           interactive
           color="gray"
           :size="iconSize"
-          :name="config.iconName"
-          v-bind="iconAttrs"
+          :name="config.defaults.fileIcon"
+          v-bind="fileIconAttrs"
           @focus="onFocus"
           @blur="onBlur"
         />
@@ -103,7 +103,7 @@ const props = defineProps({
 
 const focus = ref(false);
 
-const { config, fileAttrs, infoAttrs, iconAttrs, labelAttrs, imageAttrs } = useAttrs(props, {
+const { config, fileAttrs, infoAttrs, fileIconAttrs, labelAttrs, imageAttrs } = useAttrs(props, {
   focus,
 });
 

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.291",
+  "version": "0.0.293",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -586,7 +586,7 @@
                 "kind": "expression",
                 "type": "string"
               },
-              "default": "image"
+              "default": "getDefault(defaultConfig, UAvatar).placeholderIcon"
             },
             {
               "name": "size",
@@ -8067,6 +8067,15 @@
               },
               "default": "\"\""
             },
+            {
+              "name": "resizable",
+              "description": "Allow resizing of the textarea.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
             {
               "name": "readonly",
               "description": "Make textarea read only.",
@@ -8117,7 +8126,7 @@
               "description": "Set number of visible rows.",
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "string|number"
               },
               "default": "3"
             },