vueless 0.0.614 → 0.0.616

package/package.json

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

package/ui.data-table/config.ts

@@ -61,8 +61,8 @@ export default /*tw*/ {
   bodyCellContent: "text-ellipsis overflow-hidden",
   bodyCellCheckbox: "{>bodyCellBase} pr-2",
   bodyCellDateDivider: "",
-  bodyCellNested: "mr-2 flex gap-0.5",
-  bodyCellNestedExpandIconWrapper: "",
+  bodyCellNested: "mr-2 flex items-center gap-2",
+  bodyCellNestedExpandIconWrapper: "bg-brand-200 rounded-sm",
   bodyCellNestedExpandIcon: {
     base: "{UIcon}",
     wrapper: "rounded-sm",

package/ui.dropdown-list/UDropdownList.vue

@@ -20,15 +20,21 @@ import type { UnknownObject } from "../types.ts";
 
 defineOptions({ inheritAttrs: false });
 
-// TODO: Use props and regular modal value
-const modelValue = defineModel<string | number | UnknownObject>({ default: "" });
-
 const props = withDefaults(defineProps<Props>(), {
   ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
+  modelValue: "",
   options: () => [],
 });
 
 const emit = defineEmits([
+  /**
+   * Triggers when the selected value is changes.
+   * @property {string} modelValue
+   * @property {number} modelValue
+   * @property {object} modelValue
+   */
+  "update:modelValue",
+
   /**
    * Triggers when option is added.
    */
@@ -56,6 +62,11 @@ const { tm } = useLocale();
 const i18nGlobal = tm(COMPONENT_NAME);
 const currentLocale = computed(() => merge({}, defaultConfig.i18n, i18nGlobal, props.config.i18n));
 
+const selectedValue = computed({
+  get: () => props.modelValue,
+  set: (value) => emit("update:modelValue", value),
+});
+
 const addOptionKeyCombination = computed(() => {
   return isMac ? "(⌘ + Enter)" : "(Ctrl + Enter)";
 });
@@ -136,12 +147,12 @@ function select(option: Option, keyCode?: string) {
   if (keyCode === "Tab" && !pointerDirty.value) return;
 
   if (props.valueKey in option && !isMetaKey(props.valueKey)) {
-    modelValue.value = option[props.valueKey] as string | number | UnknownObject;
+    selectedValue.value = option[props.valueKey] as string | number | UnknownObject;
   }
 }
 
 function isSelectedOption(option: Option) {
-  return modelValue.value === option[props.valueKey];
+  return selectedValue.value === option[props.valueKey];
 }
 
 function getMarginForSubCategory(level: number = 0) {

package/ui.dropdown-list/types.ts

@@ -17,6 +17,11 @@ export interface Option extends BaseOption {
 }
 
 export interface Props {
+  /**
+   * Selected item.
+   */
+  modelValue: string | number | UnknownObject;
+
   /**
    * List options.
    */

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.614",
+  "version": "0.0.616",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -4630,6 +4630,21 @@
           "name": "UDropdownList",
           "description": "",
           "attributes": [
+            {
+              "name": "modelValue",
+              "required": true,
+              "description": "Selected item.",
+              "enum": [
+                "string",
+                "number",
+                "UnknownObject"
+              ],
+              "value": {
+                "kind": "expression",
+                "type": "union"
+              },
+              "default": "\"\""
+            },
             {
               "name": "options",
               "required": false,
@@ -4743,6 +4758,30 @@
             }
           ],
           "events": [
+            {
+              "name": "update:modelValue",
+              "description": "Triggers when the selected value is changes.",
+              "properties": [
+                {
+                  "type": [
+                    "string"
+                  ],
+                  "name": "modelValue"
+                },
+                {
+                  "type": [
+                    "number"
+                  ],
+                  "name": "modelValue"
+                },
+                {
+                  "type": [
+                    "object"
+                  ],
+                  "name": "modelValue"
+                }
+              ]
+            },
             {
               "name": "add",
               "description": "Triggers when option is added."