vueless 0.0.362 → 0.0.364

package/package.json

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

package/ui.dropdown-badge/UDropdownBadge.vue

@@ -52,19 +52,19 @@
     <UDropdownList
       v-if="isShownOptions"
       ref="dropdownListRef"
-      v-model="selectedItem"
       :size="size"
       :options="options"
       :value-key="valueKey"
       :label-key="labelKey"
       v-bind="dropdownListAttrs"
       :data-test="`${dataTest}-list`"
+      @click-option="onClickOption"
     />
   </div>
 </template>
 
 <script setup>
-import { nextTick, ref, watch, useId } from "vue";
+import { nextTick, ref, useId } from "vue";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
 import UBadge from "../ui.text-badge/UBadge.vue";
@@ -201,14 +201,13 @@ const props = defineProps({
 
 const emit = defineEmits([
   /**
-   * Triggers when dropdown option is selected.
+   * Triggers on dropdown option click.
    * @property {string} value
    */
-  "select",
+  "clickOption",
 ]);
 
 const isShownOptions = ref(false);
-const selectedItem = ref("");
 const dropdownListRef = ref(null);
 
 const elementId = props.id || useId();
@@ -220,12 +219,6 @@ const { config, wrapperAttrs, dropdownBadgeAttrs, dropdownListAttrs, dropdownIco
   },
 );
 
-watch(selectedItem, () => {
-  emit("select", selectedItem.value);
-
-  hideOptions();
-});
-
 function onClickBadge() {
   isShownOptions.value = !isShownOptions.value;
 
@@ -237,4 +230,10 @@ function onClickBadge() {
 function hideOptions() {
   isShownOptions.value = false;
 }
+
+function onClickOption(option) {
+  emit("clickOption", option);
+
+  hideOptions();
+}
 </script>

package/ui.dropdown-button/UDropdownButton.vue

@@ -53,7 +53,6 @@
     <UDropdownList
       v-if="isShownOptions"
       ref="dropdownListRef"
-      v-model="selectedItem"
       :size="size"
       :options="options"
       :value-key="valueKey"
@@ -61,12 +60,13 @@
       v-bind="dropdownListAttrs"
       :data-test="`${dataTest}-list`"
       @click="onClickList"
+      @click-option="onClickOption"
     />
   </div>
 </template>
 
 <script setup>
-import { nextTick, computed, provide, ref, watch, useId } from "vue";
+import { nextTick, computed, provide, ref, useId } from "vue";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
 import UButton from "../ui.button/UButton.vue";
@@ -227,16 +227,15 @@ const props = defineProps({
 
 const emit = defineEmits([
   /**
-   * Triggers when dropdown option is selected.
+   * Triggers on dropdown option click.
    * @property {string} value
    */
-  "select",
+  "clickOption",
 ]);
 
 provide("hideDropdownOptions", hideOptions);
 
 const isShownOptions = ref(false);
-const selectedItem = ref("");
 const dropdownListRef = ref(null);
 
 const elementId = props.id || useId();
@@ -261,9 +260,9 @@ const iconSize = computed(() => {
   return sizes[props.size];
 });
 
-watch(selectedItem, () => {
-  emit("select", selectedItem.value);
-});
+function onClickOption(option) {
+  emit("clickOption", option);
+}
 
 function onClickButton() {
   isShownOptions.value = !isShownOptions.value;

package/ui.dropdown-link/UDropdownLink.vue

@@ -56,7 +56,6 @@
     <UDropdownList
       v-if="isShownOptions"
       ref="dropdownListRef"
-      v-model="selectedItem"
       :size="size"
       :options="options"
       :value-key="valueKey"
@@ -64,12 +63,13 @@
       :data-test="`${dataTest}-list`"
       v-bind="dropdownListAttrs"
       @click="onClickList"
+      @click-option="onClickOption"
     />
   </div>
 </template>
 
 <script setup>
-import { nextTick, computed, provide, ref, watch, useId } from "vue";
+import { nextTick, computed, provide, ref, useId } from "vue";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
 import ULink from "../ui.button-link/ULink.vue";
@@ -221,16 +221,15 @@ const props = defineProps({
 
 const emit = defineEmits([
   /**
-   * Triggers when dropdown option is selected.
+   * Triggers on dropdown option click.
    * @property {string} value
    */
-  "select",
+  "clickOption",
 ]);
 
 provide("hideDropdownOptions", hideOptions);
 
 const isShownOptions = ref(false);
-const selectedItem = ref("");
 const dropdownListRef = ref(null);
 
 const elementId = props.id || useId();
@@ -250,10 +249,6 @@ const iconSize = computed(() => {
   return sizes[props.size];
 });
 
-watch(selectedItem, () => {
-  emit("select", selectedItem.value);
-});
-
 function onClickLink() {
   isShownOptions.value = !isShownOptions.value;
 
@@ -269,4 +264,8 @@ function hideOptions() {
 function onClickList() {
   hideOptions();
 }
+
+function onClickOption(option) {
+  emit("clickOption", option);
+}
 </script>

package/ui.dropdown-list/UDropdownList.vue

@@ -23,7 +23,7 @@
           v-if="!(option && (option.groupLabel || option.isSubGroup)) && !option.isHidden"
           v-bind="optionAttrs"
           :class="optionHighlight(index, option)"
-          @click="select(option)"
+          @click="select(option), onClickOption(option), option.onClick(option)"
           @mouseenter.self="pointerSet(index)"
         >
           <!--
@@ -98,8 +98,6 @@
       </template>
     </ul>
   </div>
-
-  <!-- {{ !options.length }} -->
 </template>
 
 <script setup>
@@ -204,6 +202,10 @@ const emit = defineEmits([
    * Triggers when option is added.
    */
   "addOption",
+  /**
+   * Triggers on click option.
+   */
+  "clickOption",
 ]);
 
 const wrapperRef = ref(null);
@@ -299,8 +301,13 @@ function optionHighlight(index, option) {
 function addPointerElement({ key } = "Enter") {
   if (props.options.length > 0) {
     select(props.options[pointer.value], key);
+    onClickOption(props.options[pointer.value]);
   }
 
   pointerReset();
 }
+
+function onClickOption(option) {
+  emit("clickOption", option);
+}
 </script>

package/ui.dropdown-list/storybook/stories.js

@@ -76,3 +76,13 @@ MaxHeight.args = { maxHeight: 80 };
 
 export const WithoutOptions = DefaultTemplate.bind({});
 WithoutOptions.args = { options: [] };
+
+export const OptionSettings = DefaultTemplate.bind({});
+OptionSettings.args = {
+  options: [
+    { label: "option 1", id: "1" },
+    { label: "option 2", id: "2", isHidden: true },
+    // eslint-disable-next-line no-console
+    { label: "option 3", id: "3", onClick: (option) => console.log("onClick option 3 ", option) },
+  ],
+};

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.362",
+  "version": "0.0.364",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -3206,8 +3206,8 @@
           ],
           "events": [
             {
-              "name": "select",
-              "description": "Triggers when dropdown option is selected.",
+              "name": "clickOption",
+              "description": "Triggers on dropdown option click.",
               "properties": [
                 {
                   "type": [
@@ -3422,8 +3422,8 @@
           ],
           "events": [
             {
-              "name": "select",
-              "description": "Triggers when dropdown option is selected.",
+              "name": "clickOption",
+              "description": "Triggers on dropdown option click.",
               "properties": [
                 {
                   "type": [
@@ -3625,8 +3625,8 @@
           ],
           "events": [
             {
-              "name": "select",
-              "description": "Triggers when dropdown option is selected.",
+              "name": "clickOption",
+              "description": "Triggers on dropdown option click.",
               "properties": [
                 {
                   "type": [
@@ -3764,6 +3764,10 @@
             {
               "name": "addOption",
               "description": "Triggers when option is added."
+            },
+            {
+              "name": "clickOption",
+              "description": "Triggers on click option."
             }
           ],
           "slots": [