@citizenplane/pimp 9.13.5 → 9.13.7

package/package.json

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

package/src/components/CpTable.vue

@@ -124,7 +124,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, useId } from 'vue'
+import { ref, computed, useId, watch } from 'vue'
 
 import { CpTableColumnObject } from '@/constants/CpTableColumn'
 
@@ -136,9 +136,9 @@ import { camelize, decamelize } from '@/helpers/string'
 import { PAGINATION_FORMATS, RESERVED_KEYS, VISIBLE_ROWS_MAX } from '@/constants'
 
 interface Emits {
-  (e: 'onRowClick', data: Record<string, unknown>): void
-  (e: 'onNextClick'): void
-  (e: 'onPreviousClick'): void
+  (evt: 'onRowClick', data: Record<string, unknown>): void
+  (evt: 'onNextClick' | 'onPreviousClick'): void
+  (evt: 'onColumnsChanged', columns: CpTableColumnObject[]): void
 }
 
 interface PaginationServer {
@@ -235,35 +235,42 @@ const containerDOMElement = computed(() => cpTableContainer.value)
 const mainClasses = computed(() => ({ 'cpTable--isLoading': props.isLoading }))
 const containerClasses = computed(() => ({ 'cpTable__container--hasPagination': hasPagination.value }))
 
+const formatColumns = (column: CpTableColumnObject | string) => {
+  if (typeof column === 'string') {
+    return {
+      id: camelize(column),
+      name: decamelize(column),
+      isHidden: false,
+    }
+  }
+
+  return {
+    ...column,
+    id: column.id || camelize(column.name),
+  }
+}
+
 const normalizedColumns = computed<CpTableColumnObject[]>(() => {
   if (!props.columns) return []
 
   const columns = props.columns.length ? [...props.columns] : [...columnsFromRows.value]
 
-  return columns.map((column) => {
-    if (typeof column === 'string') {
-      return {
-        id: camelize(column),
-        name: decamelize(column),
-        isHidden: false,
-      }
-    }
-
-    return {
-      ...column,
-      id: column.id || camelize(column.name),
-    }
-  })
+  return columns.map(formatColumns)
 })
 
-const visibleColumns = computed(() => normalizedColumns.value.filter(({ id }) => columnsModel.value.includes(id)))
-
 const getVisibleColumnsIds = () => {
   return normalizedColumns.value.filter(({ isHidden, isProtected }) => !isHidden || isProtected).map(({ id }) => id)
 }
 
 const columnsModel = ref<string[]>(getVisibleColumnsIds())
 
+watch(columnsModel, (newColumnsModel) => {
+  const newColumns = normalizedColumns.value.map((col) => ({ ...col, isHidden: !newColumnsModel.includes(col.id) }))
+  emit('onColumnsChanged', newColumns)
+})
+
+const visibleColumns = computed(() => normalizedColumns.value.filter(({ id }) => columnsModel.value.includes(id)))
+
 const numberOfColumns = computed(() => visibleColumns.value.length)
 
 const hasGroupBy = computed(() => {

package/src/components/icons/IconRoundTripNone.vue

@@ -0,0 +1,10 @@
+<template>
+  <svg fill="currentColor" height="24" opacity="0.4" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M7.03016 12.6087C7.03016 12.487 6.96886 12.3043 6.84616 12.1826C6.62796 11.9662 6.31296 11.9421 6.07326 12.1105L5.98726 12.1826L3.18376 15.1044C2.96296 15.3235 2.94086 15.6412 3.11756 15.8357L3.18376 15.8957L5.98726 18.818C6.10996 18.9391 6.23266 19 6.41666 19C6.74796 19 6.97986 18.8028 7.02296 18.4971L7.03016 18.3913V16.399L15.0927 16.4C15.5551 16.4 15.9367 16.0567 15.9927 15.6129L15.9998 15.5C15.9998 15.0412 15.6537 14.6625 15.2065 14.607L15.0927 14.6L7.03016 14.599V12.6087Z"
+    />
+    <path
+      d="M16.9698 5.60869C16.9698 5.48695 17.0311 5.30435 17.1538 5.18262C17.372 4.96619 17.687 4.94213 17.9267 5.11046L18.0127 5.18262L20.8162 8.10436C21.037 8.32349 21.0591 8.64122 20.8824 8.8357L20.8162 8.89566L18.0127 11.818C17.89 11.9391 17.7673 12 17.5833 12C17.252 12 17.0201 11.8028 16.977 11.4971L16.9698 11.3913V9.39901L8.90728 9.40001C8.44487 9.40001 8.06328 9.05667 8.00731 8.6129L8.00024 8.50001C8.00024 8.04119 8.34626 7.66255 8.7935 7.60702L8.90728 7.60001L16.9698 7.59901V5.60869Z"
+    />
+  </svg>
+</template>

package/src/constants/CpCustomIcons.ts

@@ -94,6 +94,7 @@ import IconReceipt from '@/components/icons/IconReceipt.vue'
 import IconRecurrence from '@/components/icons/IconRecurrence.vue'
 import IconRefund from '@/components/icons/IconRefund.vue'
 import IconRoundTrip from '@/components/icons/IconRoundTrip.vue'
+import IconRoundTripNone from '@/components/icons/IconRoundTripNone.vue'
 import IconRouteNoStop from '@/components/icons/IconRouteNoStop.vue'
 import IconRouteOneStop from '@/components/icons/IconRouteOneStop.vue'
 import IconScheduleChange from '@/components/icons/IconScheduleChange.vue'
@@ -211,6 +212,7 @@ export const CustomCpIcons = {
   recurrence: IconRecurrence,
   refund: IconRefund,
   'round-trip': IconRoundTrip,
+  'round-trip-none': IconRoundTripNone,
   'route-no-stop': IconRouteNoStop,
   'route-one-stop': IconRouteOneStop,
   'schedule-change': IconScheduleChange,

package/src/stories/CpTable.stories.ts

@@ -1,3 +1,4 @@
+import { action } from 'storybook/actions'
 import { ref, computed } from 'vue'
 
 import type { Meta, StoryObj } from '@storybook/vue3'
@@ -9,56 +10,6 @@ import { PAGINATION_FORMATS } from '@/constants'
 const meta = {
   title: 'CpTable',
   component: CpTable,
-  argTypes: {
-    caption: {
-      control: 'text',
-      description: 'Table caption for accessibility',
-    },
-    columns: {
-      control: 'object',
-      description: 'Array of column definitions',
-    },
-    data: {
-      control: 'object',
-      description: 'Array of data objects to display',
-    },
-    pagination: {
-      control: 'object',
-      description: 'Pagination configuration (boolean or object)',
-    },
-    areRowsClickable: {
-      control: 'boolean',
-      description: 'Whether rows can be clicked',
-    },
-    emptyCellPlaceholder: {
-      control: 'text',
-      description: 'Placeholder text for empty cells',
-    },
-    noResultPlaceholder: {
-      control: 'text',
-      description: 'Placeholder text when no results found',
-    },
-    isLoading: {
-      control: 'boolean',
-      description: 'Whether the table is in loading state',
-    },
-    enableRowOptions: {
-      control: 'boolean',
-      description: 'Whether to show row options menu',
-    },
-    rowOptions: {
-      control: 'object',
-      description: 'Array of row options to display',
-    },
-    quickOptionsLimit: {
-      control: 'number',
-      description: 'Maximum number of quick options to display before showing the more button',
-    },
-    onRowClick: { action: 'row-clicked' },
-    onRowRightClick: { action: 'row-right-clicked' },
-    onNextClick: { action: 'next-clicked' },
-    onPreviousClick: { action: 'previous-clicked' },
-  },
   parameters: {
     backgrounds: {
       default: 'dark',
@@ -96,6 +47,10 @@ export const Default: Story = {
     pagination: {
       enabled: true,
     },
+    onOnRowClick: action('on-row-click'),
+    onOnPreviousClick: action('on-previous-click'),
+    onOnNextClick: action('on-next-click'),
+    onOnColumnsChanged: action('on-columns-changed'),
   },
   render: (args) => ({
     components: { CpTable },