@pequity/squirrel 6.0.7 → 6.0.9

package/dist/cjs/chunks/p-dropdown-select.js

@@ -74,14 +74,14 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       }
     },
     /**
-     * Set property of **items**’s text value
+     * Set property of **items**'s text value
      */
     itemText: {
       type: String,
       default: "text"
     },
     /**
-     * Set property of **items**’s value - must be primitive.
+     * Set property of **items**'s value - must be primitive.
      */
     itemValue: {
       type: [String, Number],
@@ -160,9 +160,16 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     disabledBy: {
       type: String,
       default: "disabled"
+    },
+    /**
+     * Enables the ability to create new items when no search results are found
+     */
+    creatable: {
+      type: Boolean,
+      default: false
     }
   },
-  emits: ["update:modelValue", "select"],
+  emits: ["update:modelValue", "select", "create"],
   setup(__props, { emit: __emit }) {
     const emit = __emit;
     const props = __props;
@@ -224,6 +231,9 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       return rest;
     });
     const style = vue.computed(() => $attrs.style);
+    const selectableItemsCount = vue.computed(
+      () => internalItems.value.filter((item) => !isDisabled(item) || isSelected(item[props.itemValue])).length
+    );
     vue.watch(
       dropdownShow,
       (nV) => {
@@ -264,6 +274,10 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       destroyNavigationSvc();
       (_b = (_a = formControl.value) == null ? void 0 : _a.querySelector("button")) == null ? void 0 : _b.focus();
     };
+    const handleCreate = () => {
+      emit("create", search.value);
+      dropdownShow.value = false;
+    };
     return (_ctx, _cache) => {
       const _directive_close_popper = vue.resolveDirective("close-popper");
       return vue.openBlock(), vue.createElementBlock("div", {
@@ -398,7 +412,18 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                 !vue.unref(computedItems).length ? vue.renderSlot(_ctx.$slots, "no-items", { key: 0 }, () => [
                   vue.createElementVNode("div", {
                     class: vue.normalizeClass(["flex items-center justify-center", vue.unref(pSelectList.SIZES)[__props.size]])
-                  }, "No items found", 2)
+                  }, [
+                    __props.creatable && vue.unref(search) ? (vue.openBlock(), vue.createElementBlock("button", {
+                      key: 0,
+                      class: "hover:text-primary-hover flex items-center gap-2 font-medium text-p-blue-40",
+                      onClick: handleCreate
+                    }, [
+                      vue.createVNode(pIcon_vue_vue_type_script_setup_true_lang._sfc_main, { icon: "fe:plus-circle" }),
+                      vue.createTextVNode(" Add '" + vue.toDisplayString(vue.unref(search)) + "' ", 1)
+                    ])) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+                      vue.createTextVNode("No items found")
+                    ], 64))
+                  ], 2)
                 ]) : vue.createCommentVNode("", true)
               ], 6)
             ], 16)
@@ -418,7 +443,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                 key: 1,
                 item: __props.multiple ? vue.unref(selectedItems) : vue.unref(selectedItems)[0]
               }, () => [
-                vue.createElementVNode("div", _hoisted_3, vue.toDisplayString(__props.multiple && vue.unref(selectedItems).length > 1 ? `${vue.unref(selectedItems).length} option${vue.unref(selectedItems).length > 1 ? "s" : ""} selected` : vue.unref(selectedItems)[0][__props.itemText]), 1)
+                vue.createElementVNode("div", _hoisted_3, vue.toDisplayString(__props.multiple ? vue.unref(selectedItems).length === selectableItemsCount.value ? "All options selected" : `${vue.unref(selectedItems).length} option${vue.unref(selectedItems).length > 1 ? "s" : ""} selected` : vue.unref(selectedItems)[0][__props.itemText]), 1)
               ]),
               __props.clearable && vue.unref(selectedItems).length ? (vue.openBlock(), vue.createElementBlock("button", {
                 key: 2,

package/dist/es/chunks/p-dropdown-select.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, useAttrs, computed, watch, onMounted, onUnmounted, resolveDirective, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle, toDisplayString, createCommentVNode, createVNode, mergeProps, withCtx, createElementVNode, isRef, Fragment, renderList, withDirectives, renderSlot, withModifiers, vShow } from "vue";
+import { defineComponent, ref, useAttrs, computed, watch, onMounted, onUnmounted, resolveDirective, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle, toDisplayString, createCommentVNode, createVNode, mergeProps, withCtx, createElementVNode, isRef, Fragment, renderList, withDirectives, renderSlot, createTextVNode, withModifiers, vShow } from "vue";
 import PDropdown from "../p-dropdown.js";
 import { _ as _sfc_main$1 } from "./p-icon.js";
 import PInputSearch from "../p-input-search.js";
@@ -73,14 +73,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     },
     /**
-     * Set property of **items**’s text value
+     * Set property of **items**'s text value
      */
     itemText: {
       type: String,
       default: "text"
     },
     /**
-     * Set property of **items**’s value - must be primitive.
+     * Set property of **items**'s value - must be primitive.
      */
     itemValue: {
       type: [String, Number],
@@ -159,9 +159,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     disabledBy: {
       type: String,
       default: "disabled"
+    },
+    /**
+     * Enables the ability to create new items when no search results are found
+     */
+    creatable: {
+      type: Boolean,
+      default: false
     }
   },
-  emits: ["update:modelValue", "select"],
+  emits: ["update:modelValue", "select", "create"],
   setup(__props, { emit: __emit }) {
     const emit = __emit;
     const props = __props;
@@ -223,6 +230,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return rest;
     });
     const style = computed(() => $attrs.style);
+    const selectableItemsCount = computed(
+      () => internalItems.value.filter((item) => !isDisabled(item) || isSelected(item[props.itemValue])).length
+    );
     watch(
       dropdownShow,
       (nV) => {
@@ -263,6 +273,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       destroyNavigationSvc();
       (_b = (_a = formControl.value) == null ? void 0 : _a.querySelector("button")) == null ? void 0 : _b.focus();
     };
+    const handleCreate = () => {
+      emit("create", search.value);
+      dropdownShow.value = false;
+    };
     return (_ctx, _cache) => {
       const _directive_close_popper = resolveDirective("close-popper");
       return openBlock(), createElementBlock("div", {
@@ -397,7 +411,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 !unref(computedItems).length ? renderSlot(_ctx.$slots, "no-items", { key: 0 }, () => [
                   createElementVNode("div", {
                     class: normalizeClass(["flex items-center justify-center", unref(SIZES)[__props.size]])
-                  }, "No items found", 2)
+                  }, [
+                    __props.creatable && unref(search) ? (openBlock(), createElementBlock("button", {
+                      key: 0,
+                      class: "hover:text-primary-hover flex items-center gap-2 font-medium text-p-blue-40",
+                      onClick: handleCreate
+                    }, [
+                      createVNode(_sfc_main$1, { icon: "fe:plus-circle" }),
+                      createTextVNode(" Add '" + toDisplayString(unref(search)) + "' ", 1)
+                    ])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                      createTextVNode("No items found")
+                    ], 64))
+                  ], 2)
                 ]) : createCommentVNode("", true)
               ], 6)
             ], 16)
@@ -417,7 +442,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 key: 1,
                 item: __props.multiple ? unref(selectedItems) : unref(selectedItems)[0]
               }, () => [
-                createElementVNode("div", _hoisted_3, toDisplayString(__props.multiple && unref(selectedItems).length > 1 ? `${unref(selectedItems).length} option${unref(selectedItems).length > 1 ? "s" : ""} selected` : unref(selectedItems)[0][__props.itemText]), 1)
+                createElementVNode("div", _hoisted_3, toDisplayString(__props.multiple ? unref(selectedItems).length === selectableItemsCount.value ? "All options selected" : `${unref(selectedItems).length} option${unref(selectedItems).length > 1 ? "s" : ""} selected` : unref(selectedItems)[0][__props.itemText]), 1)
               ]),
               __props.clearable && unref(selectedItems).length ? (openBlock(), createElementBlock("button", {
                 key: 2,

package/dist/squirrel/components/p-dropdown-select/p-dropdown-select.vue.d.ts

@@ -262,14 +262,14 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         validator(value: Size): boolean;
     };
     /**
-     * Set property of **items**’s text value
+     * Set property of **items**'s text value
      */
     itemText: {
         type: StringConstructor;
         default: string;
     };
     /**
-     * Set property of **items**’s value - must be primitive.
+     * Set property of **items**'s value - must be primitive.
      */
     itemValue: {
         type: (StringConstructor | NumberConstructor)[];
@@ -349,9 +349,17 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         type: PropType<string>;
         default: string;
     };
+    /**
+     * Enables the ability to create new items when no search results are found
+     */
+    creatable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (...args: any[]) => void;
     "update:modelValue": (...args: any[]) => void;
+    create: (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: PropType<ModelValue>;
@@ -392,14 +400,14 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         validator(value: Size): boolean;
     };
     /**
-     * Set property of **items**’s text value
+     * Set property of **items**'s text value
      */
     itemText: {
         type: StringConstructor;
         default: string;
     };
     /**
-     * Set property of **items**’s value - must be primitive.
+     * Set property of **items**'s value - must be primitive.
      */
     itemValue: {
         type: (StringConstructor | NumberConstructor)[];
@@ -479,9 +487,17 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         type: PropType<string>;
         default: string;
     };
+    /**
+     * Enables the ability to create new items when no search results are found
+     */
+    creatable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Readonly<{
     onSelect?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onCreate?: ((...args: any[]) => any) | undefined;
 }>, {
     size: "sm" | "md" | "lg";
     label: string;
@@ -505,6 +521,7 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
     placeholderSearch: string;
     selectedTopShown: boolean;
     disabledBy: string;
+    creatable: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {
     formControl: HTMLDivElement;
     button: HTMLButtonElement;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pequity/squirrel",
   "description": "Squirrel component library",
-  "version": "6.0.7",
+  "version": "6.0.9",
   "packageManager": "pnpm@9.15.4",
   "type": "module",
   "scripts": {

package/squirrel/components/p-dropdown-select/p-dropdown-select.spec.js

@@ -193,6 +193,42 @@ describe('PDropdownSelect.vue', () => {
 
     expect(selectedItems.length).toBe(selectedItemsOptions.length);
     expect(wrapper.vm.$data.selected.length).toBe(items.length);
+    expect(wrapper.find('button').text()).toBe('All options selected');
+
+    cleanup(wrapper);
+  });
+
+  it('shows "All options selected" when all selectable options and disabled-selected options are selected', async () => {
+    useVirtualizer.mockImplementation(() => createMockedVirtualizer(10));
+
+    const items = cloneDeep(filterListItems).slice(0, 10);
+    items[0].disabled = true;
+    items[1].disabled = true;
+    // Pre-select one disabled item
+    const wrapper = createWrapper({ selected: [1], items }, { multiple: true });
+
+    await wrapper.find('button').trigger('click');
+    await wrapper.findByText('Select all').trigger('click');
+
+    const selectedItemsOptions = wrapper.findAll('[p-select-list-option-item]');
+    const selectedItems = wrapper.findAll('[p-select-list-option-item].selected');
+
+    // Should have all non-disabled items (8) plus the pre-selected disabled item (1)
+    expect(selectedItems.length).toBe(selectedItemsOptions.length - 1);
+    expect(wrapper.vm.$data.selected.length).toBe(items.length - 1);
+    expect(wrapper.find('button').text()).toBe('All options selected');
+
+    cleanup(wrapper);
+  });
+
+  it('shows number of selected options when not all non-disabled options are selected', async () => {
+    useVirtualizer.mockImplementation(() => createMockedVirtualizer(10));
+
+    const items = cloneDeep(filterListItems).slice(0, 10);
+    items[0].disabled = true;
+    const wrapper = createWrapper({ selected: [2, 3], items }, { multiple: true });
+
+    expect(wrapper.find('button').text()).toBe('2 options selected');
 
     cleanup(wrapper);
   });
@@ -713,4 +749,102 @@ describe('PDropdownSelect.vue', () => {
 
     cleanup(wrapper);
   });
+
+  describe('creatable functionality', () => {
+    it('shows create option when no items match search and creatable is true', async () => {
+      useVirtualizer.mockImplementation(() => createMockedVirtualizer(20));
+      const wrapper = createWrapper({ selected: null }, { searchable: true, creatable: true });
+      await wrapper.find('button').trigger('click');
+      await sleep(200);
+      const searchInput = wrapper.find('input.text-night');
+      await searchInput.setValue('New Item');
+      const createButton = wrapper.find('button.hover\\:text-primary-hover');
+      expect(createButton.exists()).toBe(true);
+      expect(createButton.text()).toBe("Add 'New Item'");
+      cleanup(wrapper);
+    });
+
+    it('does not show create option when creatable is false', async () => {
+      useVirtualizer.mockImplementation(() => createMockedVirtualizer(20));
+      const wrapper = createWrapper({ selected: null }, { searchable: true, creatable: false });
+      await wrapper.find('button').trigger('click');
+      await sleep(200);
+      const searchInput = wrapper.find('input.text-night');
+      await searchInput.setValue('New Item');
+      const createButton = wrapper.find('button.hover\\:text-primary-hover');
+      expect(createButton.exists()).toBe(false);
+      expect(wrapper.text()).toContain('No items found');
+      cleanup(wrapper);
+    });
+
+    it('emits create event when clicking create option', async () => {
+      useVirtualizer.mockImplementation(() => createMockedVirtualizer(20));
+      const wrapper = createWrapper({ selected: null }, { searchable: true, creatable: true });
+      await wrapper.find('button').trigger('click');
+      await sleep(200);
+      const searchInput = wrapper.find('input.text-night');
+      await searchInput.setValue('New Item');
+      const createButton = wrapper.find('button.hover\\:text-primary-hover');
+      await createButton.trigger('click');
+      const pDropdownSelectCmp = wrapper.findComponent(PDropdownSelect);
+      expect(pDropdownSelectCmp.emitted().create[0]).toEqual(['New Item']);
+      expect(wrapper.find('.pdropdown-stub-popper').exists()).toBe(false);
+      cleanup(wrapper);
+    });
+
+    it('does not update model value when creating new item', async () => {
+      useVirtualizer.mockImplementation(() => createMockedVirtualizer(20));
+      const wrapper = createWrapper({ selected: null }, { searchable: true, creatable: true });
+      await wrapper.find('button').trigger('click');
+      await sleep(200);
+      const searchInput = wrapper.find('input.text-night');
+      await searchInput.setValue('New Item');
+      const createButton = wrapper.find('button.hover\\:text-primary-hover');
+      await createButton.trigger('click');
+      const pDropdownSelectCmp = wrapper.findComponent(PDropdownSelect);
+      expect(pDropdownSelectCmp.emitted()['update:modelValue']).toBeFalsy();
+      expect(wrapper.vm.$data.selected).toBe(null);
+      cleanup(wrapper);
+    });
+
+    it('does not create object value when valueIsObject is true', async () => {
+      useVirtualizer.mockImplementation(() => createMockedVirtualizer(20));
+      const wrapper = createWrapper({ selected: null }, { searchable: true, creatable: true, valueIsObject: true });
+      await wrapper.find('button').trigger('click');
+      await sleep(200);
+      const searchInput = wrapper.find('input.text-night');
+      await searchInput.setValue('New Item');
+      const createButton = wrapper.find('button.hover\\:text-primary-hover');
+      await createButton.trigger('click');
+      const pDropdownSelectCmp = wrapper.findComponent(PDropdownSelect);
+      expect(pDropdownSelectCmp.emitted().create[0]).toEqual(['New Item']);
+      expect(pDropdownSelectCmp.emitted()['update:modelValue']).toBeFalsy();
+      expect(wrapper.vm.$data.selected).toBe(null);
+      cleanup(wrapper);
+    });
+
+    it('emits create event with search value when using custom itemValue and itemText', async () => {
+      useVirtualizer.mockImplementation(() => createMockedVirtualizer(20));
+      const wrapper = createWrapper(
+        { selected: null },
+        {
+          searchable: true,
+          creatable: true,
+          valueIsObject: true,
+          itemValue: 'customValue',
+          itemText: 'customText',
+        }
+      );
+      await wrapper.find('button').trigger('click');
+      await sleep(200);
+      const searchInput = wrapper.find('input.text-night');
+      await searchInput.setValue('New Item');
+      const createButton = wrapper.find('button.hover\\:text-primary-hover');
+      await createButton.trigger('click');
+      const pDropdownSelectCmp = wrapper.findComponent(PDropdownSelect);
+      expect(pDropdownSelectCmp.emitted().create[0]).toEqual(['New Item']);
+      expect(pDropdownSelectCmp.emitted()['update:modelValue']).toBeFalsy();
+      cleanup(wrapper);
+    });
+  });
 });

package/squirrel/components/p-dropdown-select/p-dropdown-select.stories.js

@@ -312,3 +312,39 @@ export const ClearableMultiple = {
     clearable: true,
   },
 };
+
+export const Creatable = {
+  render: (args) => ({
+    components: { PDropdownSelect },
+    setup() {
+      const value = ref(null);
+      return { args, value };
+    },
+    template: `
+      <div>
+        <PDropdownSelect 
+          v-model="value" 
+          v-bind="args" 
+          @create="(searchTerm) => alert('Create item: ' + searchTerm)"
+        />
+        <div class="mt-4">Selected: {{ value }}</div>
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Example with creatable functionality enabled. When no search results are found, an option to create a new item is shown.',
+      },
+    },
+  },
+  args: {
+    ...Default.args,
+    label: 'Creatable dropdown',
+    items: items2,
+    searchable: true,
+    creatable: true,
+    placeholder: 'Search or create an item...',
+  },
+};

package/squirrel/components/p-dropdown-select/p-dropdown-select.vue

@@ -32,8 +32,10 @@
         <slot v-else name="selected-item" :item="multiple ? selectedItems : selectedItems[0]">
           <div class="truncate text-left">
             {{
-              multiple && selectedItems.length > 1
-                ? `${selectedItems.length} option${selectedItems.length > 1 ? 's' : ''} selected`
+              multiple
+                ? selectedItems.length === selectableItemsCount
+                  ? 'All options selected'
+                  : `${selectedItems.length} option${selectedItems.length > 1 ? 's' : ''} selected`
                 : selectedItems[0][itemText]
             }}
           </div>
@@ -148,7 +150,18 @@
               </div>
             </div>
             <slot v-if="!computedItems.length" name="no-items">
-              <div :class="['flex items-center justify-center', SIZES[size]]">No items found</div>
+              <div :class="['flex items-center justify-center', SIZES[size]]">
+                <template v-if="creatable && search">
+                  <button
+                    class="hover:text-primary-hover flex items-center gap-2 font-medium text-p-blue-40"
+                    @click="handleCreate"
+                  >
+                    <PIcon icon="fe:plus-circle" />
+                    Add '{{ search }}'
+                  </button>
+                </template>
+                <template v-else>No items found</template>
+              </div>
             </slot>
           </div>
         </div>
@@ -197,7 +210,7 @@ defineSlots<{
   item(props: { item: any; isItemSelected: boolean; itemTextSplit: string[] }): unknown;
 }>();
 
-const emit = defineEmits(['update:modelValue', 'select']);
+const emit = defineEmits(['update:modelValue', 'select', 'create']);
 
 const props = defineProps({
   modelValue: {
@@ -241,14 +254,14 @@ const props = defineProps({
     },
   },
   /**
-   * Set property of **items**’s text value
+   * Set property of **items**'s text value
    */
   itemText: {
     type: String,
     default: 'text',
   },
   /**
-   * Set property of **items**’s value - must be primitive.
+   * Set property of **items**'s value - must be primitive.
    */
   itemValue: {
     type: [String, Number],
@@ -328,6 +341,13 @@ const props = defineProps({
     type: String as PropType<string>,
     default: 'disabled',
   },
+  /**
+   * Enables the ability to create new items when no search results are found
+   */
+  creatable: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 // Async helpers
@@ -401,6 +421,10 @@ const attrs = computed(() => {
 
 const style = computed(() => $attrs.style as StyleValue);
 
+const selectableItemsCount = computed(
+  () => internalItems.value.filter((item) => !isDisabled(item) || isSelected(item[props.itemValue])).length
+);
+
 // Watch
 // Sorts internalItems putting the selected ones first
 watch(
@@ -453,4 +477,9 @@ const onHide = () => {
   destroyNavigationSvc();
   (formControl.value?.querySelector('button') as HTMLElement)?.focus();
 };
+
+const handleCreate = () => {
+  emit('create', search.value);
+  dropdownShow.value = false;
+};
 </script>