@citizenplane/pimp 14.0.3 → 14.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "14.0.3",
+  "version": "14.1.1",
   "scripts": {
     "dev": "storybook dev -p 8080",
     "build-storybook": "storybook build --output-dir ./docs",

package/src/components/CpMultiselect.vue

@@ -28,7 +28,7 @@
       :option-label
       :placeholder
       :pt="passThroughConfig"
-      :suggestions="options"
+      :suggestions="dynamicOptions"
       :typeahead
       @click="handleClick"
       @complete="handleSearch"
@@ -126,6 +126,7 @@ interface Props {
   modelValue?: Record<string, unknown>[] | Record<string, unknown> | string[] | null
   multiple?: boolean
   name?: string
+  onSearch?: (query: string) => void
   optionDisabled?: string | ((option: unknown) => boolean)
   optionLabel?: string
   options?: unknown[]
@@ -141,7 +142,7 @@ const props = withDefaults(defineProps<Props>(), {
   label: '',
   name: '',
   placeholder: '',
-  optionLabel: undefined,
+  optionLabel: 'name',
   trackBy: undefined,
   emptyMessage: 'No results found',
   errorMessage: '',
@@ -149,6 +150,7 @@ const props = withDefaults(defineProps<Props>(), {
   optionDisabled: 'disabled',
   options: () => [],
   size: 'md',
+  onSearch: undefined,
 })
 
 const emit = defineEmits<Emits>()
@@ -218,7 +220,27 @@ const displayClearButton = computed(() => {
   return props.isClearable && !isEmpty(selectModel.value)
 })
 
-const handleSearch = (event: { query: string }) => emit('search', event.query)
+const hasRegisteredOnSearch = computed(() => props.onSearch !== undefined)
+
+const handleSearch = (event: { query: string }) => {
+  if (hasRegisteredOnSearch.value) {
+    return emit('search', event.query)
+  }
+
+  // If no onSearch is registered, toggle the dropdown (if hidden) to show the options
+  if (!isDropdownOpen.value) {
+    toggleDropdown()
+  }
+}
+
+const dynamicOptions = computed(() => {
+  if (hasRegisteredOnSearch.value) return props.options
+
+  return props.options.filter((option: unknown) => {
+    const optionLabel = typeof option === 'object' ? (option as Record<string, unknown>)[props.optionLabel] : option
+    return (optionLabel as string).toLowerCase().includes(searchQuery.value.toLowerCase())
+  })
+})
 const handleClear = () => (selectModel.value = null)
 const handleOverlayShown = () => emit('overlayShown')
 const handleOverlayHidden = () => emit('overlayHidden')

package/src/components/CpTable.vue

@@ -77,6 +77,7 @@
                       <cp-icon size="16" :type="option.icon" />
                     </button>
                     <button
+                      v-if="hasMoreQuickActionsThanLimit"
                       class="cpTable__action cpTable__action--isDefault"
                       type="button"
                       @click.stop="handleContextMenu({ rowData, rowIndex }, $event)"
@@ -209,7 +210,7 @@ const cpTableContainer = ref<HTMLElement | null>(null)
 const contextualMenu = ref<InstanceType<typeof CpContextualMenu>>()
 
 const hasRowOptions = computed(() => props.enableRowOptions && props.rowOptions.length)
-const hasMoreQuickActionsThanLimit = computed(() => props.rowOptions.length >= props.quickOptionsLimit)
+const hasMoreQuickActionsThanLimit = computed(() => props.rowOptions.length > props.quickOptionsLimit)
 
 const quickOptions = computed(() => {
   if (!props.enableRowOptions || !props.rowOptions.length || props.quickOptionsLimit === 0) return []

package/src/stories/CpMultiselect.stories.ts

@@ -113,43 +113,23 @@ const meta = {
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Single: Story = {
+export const DefaultSearchHandler: Story = {
   args: {
     placeholder: 'Select a supplier',
     multiple: false,
     options: supplierOptions,
-    optionLabel: 'name',
     trackBy: 'id',
     isClearable: true,
   },
   render: (args) => ({
     components: { CpMultiselect },
     setup() {
-      const searchQuery = ref('')
-      const isLoading = ref(false)
-
-      const originalOptions = ref(args.options)
-      const dynamicOptions = ref(toValue(originalOptions))
       const selectedSupplier = ref(null)
-
-      const handleSearch = async (query: string) => {
-        isLoading.value = true
-        searchQuery.value = query
-
-        await new Promise((resolve) => setTimeout(resolve, 500))
-
-        dynamicOptions.value = originalOptions.value?.filter((option) => {
-          return (option as IOption).name.toLowerCase().includes(searchQuery.value.toLowerCase())
-        })
-
-        isLoading.value = false
-      }
-
-      return { args, selectedSupplier, dynamicOptions, handleSearch, isLoading }
+      return { args, selectedSupplier }
     },
     template: `
       <div style="padding: 20px;width: 25rem;">
-        <CpMultiselect v-model="selectedSupplier" v-bind="args" :options="dynamicOptions" :is-loading="isLoading" @search="handleSearch">
+        <CpMultiselect v-model="selectedSupplier" v-bind="args">
           <template #prefix>
             <cp-partner-badge type="supplier" size="sm" />
           </template>

package/src/stories/CpTable.stories.ts

@@ -219,6 +219,54 @@ export const WithCustomRowOptions: Story = {
   }),
 }
 
+export const WithoutDefaultAction: Story = {
+  args: {
+    ...Default.args,
+    enableRowOptions: true,
+    quickOptionsLimit: 2,
+    enableColumnEdition: true,
+  },
+  render: (args) => ({
+    components: { CpTable },
+    setup() {
+      const isEditLoading = ref(false)
+
+      const rowOptions = computed(() => [
+        {
+          id: 'see',
+          label: 'See',
+          icon: 'eye',
+          action: () => console.log('See'),
+        },
+        {
+          id: 'delete',
+          label: 'Delete',
+          icon: 'trash',
+          isCritical: true,
+          action: () => console.log('Delete'),
+        },
+      ])
+
+      return { args, isEditLoading, rowOptions }
+    },
+    template: `
+        <CpTable v-bind="args" :row-options="rowOptions">
+          <template #status="{ cell }">
+            <span :style="{
+              padding: '4px 8px',
+              borderRadius: '4px',
+              fontSize: '12px',
+              backgroundColor: cell === 'Active' ? '#10B981' : '#EF4444',
+              color: 'white'
+            }">
+              {{ cell }}
+            </span>
+          </template>
+        </CpTable>
+    `,
+  }),
+}
+
 export const WithOnlyDefaultAction: Story = {
   args: {
     ...Default.args,