@pequity/squirrel 7.0.1 → 7.0.3

package/dist/cjs/chunks/p-action-bar.js

@@ -11,7 +11,7 @@ const _hoisted_2 = { class: "whitespace-nowrap px-3" };
 const _hoisted_3 = { class: "flex" };
 const _hoisted_4 = { class: "flex items-center gap-2 px-1 py-0.5" };
 const _hoisted_5 = { class: "flex items-center gap-2 px-1 py-0.5" };
-const _hoisted_6 = { class: "flex flex-col bg-p-purple-60" };
+const _hoisted_6 = { class: "bg-p-purple-60 py-2" };
 const _hoisted_7 = { class: "flex items-center gap-2 px-1 py-0.5" };
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   ...{
@@ -72,17 +72,17 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                     placement: "top",
                     strategy: "fixed"
                   }, {
-                    popper: vue.withCtx(() => [
-                      vue.createElementVNode("div", _hoisted_6, [
+                    popper: vue.withCtx(({ hide }) => [
+                      vue.createElementVNode("ul", _hoisted_6, [
                         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(actionOrMenu.subActions, (subaction) => {
-                          return vue.openBlock(), vue.createElementBlock("div", {
+                          return vue.openBlock(), vue.createElementBlock("li", {
                             key: `subaction-${subaction.name}`
                           }, [
                             vue.createVNode(pBtn_vue_vue_type_script_setup_true_lang._sfc_main, {
                               size: "sm",
-                              class: "w-full",
+                              class: "w-full [&>.items-center]:justify-start",
                               type: "secondary-ghost-dark",
-                              onClick: ($event) => _ctx.$emit("click:action", subaction.name)
+                              onClick: ($event) => (_ctx.$emit("click:action", subaction.name), hide())
                             }, {
                               default: vue.withCtx(() => [
                                 vue.createElementVNode("div", _hoisted_7, [

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

@@ -420,7 +420,9 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                     }, [
                       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 }, [
+                    ])) : __props.creatable ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+                      vue.createTextVNode("No items found. Type to add")
+                    ], 64)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
                       vue.createTextVNode("No items found")
                     ], 64))
                   ], 2)

package/dist/es/chunks/p-action-bar.js

@@ -10,7 +10,7 @@ const _hoisted_2 = { class: "whitespace-nowrap px-3" };
 const _hoisted_3 = { class: "flex" };
 const _hoisted_4 = { class: "flex items-center gap-2 px-1 py-0.5" };
 const _hoisted_5 = { class: "flex items-center gap-2 px-1 py-0.5" };
-const _hoisted_6 = { class: "flex flex-col bg-p-purple-60" };
+const _hoisted_6 = { class: "bg-p-purple-60 py-2" };
 const _hoisted_7 = { class: "flex items-center gap-2 px-1 py-0.5" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
@@ -71,17 +71,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     placement: "top",
                     strategy: "fixed"
                   }, {
-                    popper: withCtx(() => [
-                      createElementVNode("div", _hoisted_6, [
+                    popper: withCtx(({ hide }) => [
+                      createElementVNode("ul", _hoisted_6, [
                         (openBlock(true), createElementBlock(Fragment, null, renderList(actionOrMenu.subActions, (subaction) => {
-                          return openBlock(), createElementBlock("div", {
+                          return openBlock(), createElementBlock("li", {
                             key: `subaction-${subaction.name}`
                           }, [
                             createVNode(_sfc_main$1, {
                               size: "sm",
-                              class: "w-full",
+                              class: "w-full [&>.items-center]:justify-start",
                               type: "secondary-ghost-dark",
-                              onClick: ($event) => _ctx.$emit("click:action", subaction.name)
+                              onClick: ($event) => (_ctx.$emit("click:action", subaction.name), hide())
                             }, {
                               default: withCtx(() => [
                                 createElementVNode("div", _hoisted_7, [

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

@@ -419,7 +419,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     }, [
                       createVNode(_sfc_main$1, { icon: "fe:plus-circle" }),
                       createTextVNode(" Add '" + toDisplayString(unref(search)) + "' ", 1)
-                    ])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                    ])) : __props.creatable ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                      createTextVNode("No items found. Type to add")
+                    ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
                       createTextVNode("No items found")
                     ], 64))
                   ], 2)

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pequity/squirrel",
   "description": "Squirrel component library",
-  "version": "7.0.1",
+  "version": "7.0.3",
   "packageManager": "pnpm@9.15.9",
   "type": "module",
   "scripts": {

package/squirrel/components/p-action-bar/p-action-bar.spec.ts

@@ -24,12 +24,16 @@ const createPDropdownStub = () => {
       toggleShow() {
         this.show = !this.show;
       },
+
+      hide() {
+        this.show = false;
+      },
     },
     template: `
       <div class="p-dropdown-stub">
         <slot></slot>
         <div v-if="show" class="p-dropdown-stub-popper">
-          <slot name="popper"></slot>
+          <slot name="popper" :hide="hide"></slot>
         </div>
       </div>`,
   });

package/squirrel/components/p-action-bar/p-action-bar.vue

@@ -29,14 +29,14 @@
                   <div>{{ actionOrMenu.label }}</div>
                 </div>
               </PBtn>
-              <template #popper>
-                <div class="flex flex-col bg-p-purple-60">
-                  <div v-for="subaction in actionOrMenu.subActions" :key="`subaction-${subaction.name}`">
+              <template #popper="{ hide }">
+                <ul class="bg-p-purple-60 py-2">
+                  <li v-for="subaction in actionOrMenu.subActions" :key="`subaction-${subaction.name}`">
                     <PBtn
                       size="sm"
-                      class="w-full"
+                      class="w-full [&>.items-center]:justify-start"
                       type="secondary-ghost-dark"
-                      @click="$emit('click:action', subaction.name)"
+                      @click="($emit('click:action', subaction.name), hide())"
                     >
                       <div class="flex items-center gap-2 px-1 py-0.5">
                         <Component :is="subaction.icon" v-if="isComponent(subaction.icon)" class="h-4 w-4" />
@@ -44,8 +44,8 @@
                         <div>{{ subaction.label }}</div>
                       </div>
                     </PBtn>
-                  </div>
-                </div>
+                  </li>
+                </ul>
               </template>
             </PDropdown>
           </template>

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

@@ -764,6 +764,16 @@ describe('PDropdownSelect.vue', () => {
       cleanup(wrapper);
     });
 
+    it('shows "Type to add" message when creatable is true and no search term', async () => {
+      useVirtualizer.mockImplementation(() => createMockedVirtualizer(0));
+      const wrapper = createWrapper({ selected: null, items: [] }, { searchable: true, creatable: true });
+      await wrapper.find('button').trigger('click');
+      await sleep(200);
+      const noItemsMessage = wrapper.find('div.flex.items-center.justify-center.h-10.text-base');
+      expect(noItemsMessage.text()).toBe('No items found. Type to add');
+      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 });

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

@@ -160,6 +160,7 @@
                     Add '{{ search }}'
                   </button>
                 </template>
+                <template v-else-if="creatable">No items found. Type to add</template>
                 <template v-else>No items found</template>
               </div>
             </slot>