@citizenplane/pimp 9.1.11 → 9.2.0

package/src/components/CpSelectMenu.vue

@@ -151,32 +151,33 @@ const isSelectedValue = (value: string): boolean => {
 <style lang="scss">
 .cpSelectMenu {
   position: relative;
-  font-size: fn.px-to-em(16);
+  font-size: fn.px-to-em(14);
 
   &__button {
     box-shadow: inset 0 fn.px-to-em(1) fn.px-to-em(2) rgba(0, 0, 0, 0.12);
-    border: fn.px-to-rem(1) solid colors.$neutral-dark-4;
+    border: none;
+    outline: fn.px-to-rem(1) solid colors.$neutral-dark-4;
     border-radius: fn.px-to-em(10);
     background: colors.$neutral-light;
-    padding: fn.px-to-em(12);
+    padding: fn.px-to-rem(8);
     width: 100%;
-    height: sizing.$component-size-default;
     display: flex;
     align-items: center;
     justify-content: space-between;
     font-size: inherit;
+    line-height: fn.px-to-rem(24);
     font-weight: normal;
     text-transform: capitalize;
 
     &:hover,
     &:active,
     &:focus {
-      border-color: colors.$secondary-color;
+      outline: fn.px-to-rem(1) solid colors.$secondary-color;
     }
 
     &:focus {
-      outline: none !important;
-      box-shadow: 0 0 0 fn.px-to-em(3) color.scale(colors.$secondary-color, $lightness: 80%);
+      outline: fn.px-to-rem(2) solid colors.$secondary-color;
+      box-shadow: 0 0 0 fn.px-to-em(2) color.scale(colors.$secondary-color, $lightness: 80%);
     }
   }
 

package/src/components/CpTable.vue

@@ -57,23 +57,22 @@
               <td v-show="areRowOptionsEnabled(rowData)" class="cpTable__cell cpTable__cell--isOptions">
                 <div class="cpTable__actions">
                   <slot name="row-quick-actions" :row="rowData">
-                    <template v-if="hasQuickOptions">
-                      <button
-                        v-for="option in quickOptions"
-                        :key="option.id"
-                        v-tooltip="getQuickOptionTooltip(option)"
-                        type="button"
-                        class="cpTable__action"
-                        :class="getQuickOptionClasses(option)"
-                        :disabled="option.isDisabled"
-                        @click.stop="($event) => option.action(rowData, $event)"
-                      >
-                        <cp-icon :type="option.icon" size="16" />
-                      </button>
-                    </template>
                     <button
+                      v-for="option in quickOptions"
+                      :key="option.id"
+                      v-tooltip="getQuickOptionTooltip(option)"
                       type="button"
-                      class="cpTable__defaultAction"
+                      class="cpTable__action"
+                      :class="getQuickOptionClasses(option)"
+                      :disabled="option.isDisabled"
+                      @click.stop="($event) => option.action(getRowPayload(rowIndex), $event)"
+                    >
+                      <cp-icon :type="option.icon" size="16" />
+                    </button>
+
+                    <button
+                      type="button"
+                      class="cpTable__action cpTable__action--isDefault"
                       @click.stop="handleContextMenu({ rowData, rowIndex }, $event)"
                     >
                       <cp-icon type="more-vertical" size="16" />
@@ -205,30 +204,17 @@ const pageNumber = ref(0)
 const cpTableContainer = ref<HTMLElement | null>(null)
 const contextualMenu = ref<InstanceType<typeof CpContextualMenu>>()
 
-const hasQuickOptions = computed(() => !!quickOptions.value.length)
 const hasRowOptions = computed(() => props.enableRowOptions && props.rowOptions.length)
 const hasMoreQuickActionsThanLimit = computed(() => props.rowOptions.length >= props.quickOptionsLimit)
 
-const defaultRowOption = computed<RowOptions>(() => {
-  return {
-    id: 'more',
-    label: 'More',
-    icon: 'more-vertical',
-    action: (rowData: Record<string, unknown>, $event: MouseEvent) => {
-      handleContextMenu({ rowData, rowIndex: null }, $event)
-    },
-  }
-})
-
 const quickOptions = computed(() => {
   if (!props.enableRowOptions || !props.rowOptions.length || props.quickOptionsLimit === 0) return []
 
   if (hasMoreQuickActionsThanLimit.value) {
-    const slicedOptions = props.rowOptions.slice(0, props.quickOptionsLimit)
-    return [...slicedOptions, defaultRowOption.value]
+    return props.rowOptions.slice(0, props.quickOptionsLimit)
   }
 
-  return [...props.rowOptions, defaultRowOption.value]
+  return props.rowOptions
 })
 
 const currentRowData = ref<Record<string, unknown>>({})
@@ -375,12 +361,12 @@ const paginationResultsDetails = computed(() => {
 })
 
 const handleContextMenu = (
-  { rowData, rowIndex }: { rowData: Record<string, unknown>; rowIndex: number | null },
+  { rowData, rowIndex }: { rowData: Record<string, unknown>; rowIndex: number },
   event: MouseEvent,
 ) => {
   if (!hasRowOptions.value || isFullWidthRow(rowData)) return
 
-  currentRowData.value = rowIndex !== null ? getRowPayload(rowIndex) : rowData
+  currentRowData.value = getRowPayload(rowIndex)
 
   showContextualMenu(event)
 }
@@ -697,7 +683,7 @@ defineExpose({ hideContextualMenu, resetPagination, currentRowData })
       color: initial;
 
       // Add border-right only if the action is not the last one and the next one is not the default action
-      &:not(:last-child):not(:has(+ .cpTable__defaultAction)) {
+      &:not(:last-child) {
         border-right: 1px solid colors.$border-color;
       }
 
@@ -717,12 +703,9 @@ defineExpose({ hideContextualMenu, resetPagination, currentRowData })
       }
     }
 
-    &--isOptions .cpTable__defaultAction {
+    &--isOptions .cpTable__action--isDefault {
       display: inline-flex;
-      padding: sp.$space-sm;
-      border: fn.px-to-rem(1) solid colors.$border-color;
-      border-radius: fn.px-to-rem(8);
-      background-color: colors.$neutral-light;
+      align-items: center;
       color: colors.$neutral-dark-1;
 
       &:hover {
@@ -735,6 +718,25 @@ defineExpose({ hideContextualMenu, resetPagination, currentRowData })
         box-shadow: 0 0 0 fn.px-to-em(3) color.scale(colors.$secondary-color, $lightness: 80%);
       }
     }
+
+    @mixin cp-table-only-default-action-visible-style {
+      padding: sp.$space-sm;
+      border: fn.px-to-rem(1) solid colors.$border-color;
+      border-radius: fn.px-to-rem(8);
+      background-color: colors.$neutral-light;
+    }
+
+    // Solo default action mode
+    &--isOptions .cpTable__action:only-child.cpTable__action--isDefault {
+      @include cp-table-only-default-action-visible-style;
+    }
+
+    // Touch device mode : only default action visible
+    @media (hover: none) and (pointer: coarse) {
+      &--isOptions .cpTable__action--isDefault {
+        @include cp-table-only-default-action-visible-style;
+      }
+    }
   }
 
   // On desktop devices, display options only on row focus or hover
@@ -746,7 +748,7 @@ defineExpose({ hideContextualMenu, resetPagination, currentRowData })
     }
 
     // Actions wrapper on desktop : displayed only if there are quick actions inside
-    &__cell--isOptions:has(.cpTable__action) .cpTable__actions {
+    &__cell--isOptions .cpTable__actions:has(> :nth-child(2)) {
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
@@ -765,11 +767,6 @@ defineExpose({ hideContextualMenu, resetPagination, currentRowData })
       display: flex;
     }
 
-    // Desktop : hide default action if there are quick actions inside
-    &__cell--isOptions:has(.cpTable__action) .cpTable__defaultAction {
-      display: none;
-    }
-
     &__row:focus &__cell--isOptions,
     &__row:focus-within &__cell--isOptions,
     &__row:hover &__cell--isOptions {

package/src/stories/CpTable.stories.ts

@@ -217,7 +217,7 @@ export const WithCustomRowOptions: Story = {
           label: 'Disable',
           icon: 'history',
           isDisabled: true,
-          action: () => console.log('History'),
+          action: (payload) => console.log('History', payload),
         },
         {
           id: 'delete',
@@ -247,3 +247,56 @@ export const WithCustomRowOptions: Story = {
     `,
   }),
 }
+
+export const WithOnlyDefaultAction: Story = {
+  args: {
+    ...Default.args,
+    enableRowOptions: true,
+    quickOptionsLimit: 0,
+  },
+  render: (args) => ({
+    components: { CpTable },
+    setup() {
+      const isEditLoading = ref(false)
+
+      const rowOptions = computed(() => [
+        {
+          id: 'see',
+          label: 'See',
+          icon: 'eye',
+          action: () => console.log('See'),
+        },
+        {
+          id: 'edit',
+          label: 'Edit',
+          icon: 'edit-2',
+          isAsync: true,
+          isLoading: isEditLoading.value,
+          action: async (payload) => {
+            isEditLoading.value = true
+            console.log('Edit', payload)
+            await new Promise((resolve) => setTimeout(resolve, 2000))
+            isEditLoading.value = false
+          },
+        },
+      ])
+
+      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>
+    `,
+  }),
+}