vueless 1.2.3-beta.2 → 1.2.3-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.2.3-beta.2",
+  "version": "1.2.3-beta.3",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",

package/ui.dropdown-badge/UDropdownBadge.vue

@@ -39,6 +39,22 @@ const emit = defineEmits([
    * @property {number} value
    */
   "update:modelValue",
+
+  /**
+   * Triggers when a dropdown list is opened.
+   */
+  "open",
+
+  /**
+   * Triggers when a dropdown list is closed.
+   */
+  "close",
+
+  /**
+   * Triggers when the search value is changed.
+   * @property {string} query
+   */
+  "searchChange",
 ]);
 
 type UListboxRef = InstanceType<typeof UListbox>;
@@ -80,7 +96,7 @@ const selectedOptions = computed(() => {
 });
 
 const badgeLabel = computed(() => {
-  if (!selectedOptions.value.length) {
+  if (!props.labelDisplayCount || !selectedOptions.value.length) {
     return props.label;
   }
 
@@ -114,22 +130,30 @@ function getFullOptionLabels(value: Option | Option[]) {
   return "";
 }
 
+function onSearchChange(query: string) {
+  emit("searchChange", query);
+}
+
 function onClickBadge() {
   isShownOptions.value = !isShownOptions.value;
 
   if (isShownOptions.value) {
     nextTick(() => listboxRef.value?.wrapperRef?.focus());
+
+    emit("open");
   }
 }
 
 function hideOptions() {
   isShownOptions.value = false;
+
+  emit("close");
 }
 
 function onClickOption(option: Option) {
   emit("clickOption", option);
 
-  hideOptions();
+  if (!props.multiple) hideOptions();
 }
 
 defineExpose({
@@ -229,6 +253,7 @@ const { getDataTest, config, wrapperAttrs, dropdownBadgeAttrs, listboxAttrs, tog
       v-bind="listboxAttrs"
       :data-test="getDataTest('list')"
       @click-option="onClickOption"
+      @search-change="onSearchChange"
     />
   </div>
 </template>

package/ui.dropdown-button/UDropdownButton.vue

@@ -39,6 +39,22 @@ const emit = defineEmits([
    * @property {number} value
    */
   "update:modelValue",
+
+  /**
+   * Triggers when a dropdown list is opened.
+   */
+  "open",
+
+  /**
+   * Triggers when a dropdown list is closed.
+   */
+  "close",
+
+  /**
+   * Triggers when the search value is changed.
+   * @property {string} query
+   */
+  "searchChange",
 ]);
 
 provide("hideDropdownOptions", hideOptions);
@@ -82,7 +98,7 @@ const selectedOptions = computed(() => {
 });
 
 const buttonLabel = computed(() => {
-  if (!selectedOptions.value.length) {
+  if (!props.labelDisplayCount || !selectedOptions.value.length) {
     return props.label;
   }
 
@@ -106,6 +122,10 @@ const toggleIconName = computed(() => {
   return props.toggleIcon ? config.value.defaults.toggleIcon : "";
 });
 
+function onSearchChange(query: string) {
+  emit("searchChange", query);
+}
+
 function getFullOptionLabels(value: Option | Option[]) {
   const labelKey = props.labelKey;
 
@@ -119,7 +139,7 @@ function getFullOptionLabels(value: Option | Option[]) {
 function onClickOption(option: Option) {
   emit("clickOption", option);
 
-  hideOptions();
+  if (!props.multiple) hideOptions();
 }
 
 function onClickButton() {
@@ -127,11 +147,15 @@ function onClickButton() {
 
   if (isShownOptions.value) {
     nextTick(() => listboxRef.value?.wrapperRef?.focus());
+
+    emit("open");
   }
 }
 
 function hideOptions() {
   isShownOptions.value = false;
+
+  emit("close");
 }
 
 defineExpose({
@@ -230,6 +254,7 @@ const { getDataTest, config, dropdownButtonAttrs, listboxAttrs, toggleIconAttrs,
       v-bind="listboxAttrs"
       :data-test="getDataTest('list')"
       @click-option="onClickOption"
+      @search-change="onSearchChange"
     />
   </div>
 </template>

package/ui.dropdown-link/UDropdownLink.vue

@@ -39,6 +39,22 @@ const emit = defineEmits([
    * @property {number} value
    */
   "update:modelValue",
+
+  /**
+   * Triggers when a dropdown list is opened.
+   */
+  "open",
+
+  /**
+   * Triggers when a dropdown list is closed.
+   */
+  "close",
+
+  /**
+   * Triggers when the search value is changed.
+   * @property {string} query
+   */
+  "searchChange",
 ]);
 
 provide("hideDropdownOptions", hideOptions);
@@ -82,7 +98,7 @@ const selectedOptions = computed(() => {
 });
 
 const linkLabel = computed(() => {
-  if (!selectedOptions.value.length) {
+  if (!props.labelDisplayCount || !selectedOptions.value.length) {
     return props.label;
   }
 
@@ -116,6 +132,10 @@ function getFullOptionLabels(value: Option | Option[]) {
   return "";
 }
 
+function onSearchChange(query: string) {
+  emit("searchChange", query);
+}
+
 function onClickLink() {
   if (props.disabled) return;
 
@@ -123,17 +143,21 @@ function onClickLink() {
 
   if (isShownOptions.value) {
     nextTick(() => listboxRef.value?.wrapperRef?.focus());
+
+    emit("open");
   }
 }
 
 function hideOptions() {
   isShownOptions.value = false;
+
+  emit("close");
 }
 
 function onClickOption(option: Option) {
   emit("clickOption", option);
 
-  hideOptions();
+  if (!props.multiple) hideOptions();
 }
 
 defineExpose({
@@ -235,6 +259,7 @@ const { config, getDataTest, wrapperAttrs, dropdownLinkAttrs, listboxAttrs, togg
       v-bind="listboxAttrs"
       :data-test="getDataTest('list')"
       @click-option="onClickOption"
+      @search-change="onSearchChange"
     />
   </div>
 </template>