@citizenplane/pimp 9.14.0 → 9.15.0

package/src/components/CpToast.vue

@@ -0,0 +1,322 @@
+<template>
+  <toast class="cpToasts">
+    <template #container="{ message, closeCallback }">
+      <div class="cpToast" :class="getDynamicClass(message.severity)">
+        <div class="cpToast__inner">
+          <cp-icon class="cpToast__icon" size="16" :type="getDynamicIcon(message.severity)" />
+          <div class="cpToast__content">
+            <span class="cpToast__summary">{{ message.summary }}</span>
+            <span v-if="message.detail" class="cpToast__detail">{{ message.detail }}</span>
+          </div>
+          <button class="cpToast__close" type="button" @click="closeCallback">
+            <cp-icon class="cpToast__icon cpToast__icon--isClose" size="16" type="x" />
+          </button>
+        </div>
+        <div v-if="hasActions(message)" class="cpToast__actions">
+          <cp-button
+            v-if="message.primaryAction"
+            appearance="primary"
+            class="cpToast__action"
+            :color="getButtonColor(message.severity)"
+            is-square
+            size="sm"
+            @click="message.primaryAction.onClick"
+          >
+            {{ message.primaryAction.label }}
+          </cp-button>
+          <cp-button
+            v-if="message.secondaryAction"
+            appearance="minimal"
+            class="cpToast__action"
+            :color="getButtonColor(message.severity)"
+            is-square
+            size="sm"
+            @click="message.secondaryAction.onClick"
+          >
+            {{ message.secondaryAction.label }}
+          </cp-button>
+        </div>
+        <div
+          v-if="displayTimer(message.life)"
+          aria-hidden="true"
+          class="cpToast__timer"
+          role="presentation"
+          :style="getTimerBarStyle(message.life)"
+        />
+      </div>
+    </template>
+  </toast>
+</template>
+
+<script setup lang="ts">
+import Toast from 'primevue/toast'
+import { defineProps, withDefaults } from 'vue'
+
+import { CpToastTypes } from '@/constants/CpToastTypes'
+
+import { capitalizeFirstLetter } from '@/helpers'
+
+interface Props {
+  detail?: string
+  hideTimer?: boolean
+  primaryAction?: {
+    label: string
+    onClick: VoidFunction
+  }
+  secondaryAction?: {
+    label: string
+    onClick: VoidFunction
+  }
+  severity: CpToastTypes
+  summary: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  hideTimer: false,
+  primaryAction: undefined,
+  secondaryAction: undefined,
+  detail: '',
+})
+
+const displayTimer = (life: number) => !props.hideTimer && life !== undefined
+
+const getDynamicClass = (severity: string) => `cpToast--is${capitalizeFirstLetter(severity)}`
+
+const getDynamicIcon = (severity: CpToastTypes) => {
+  switch (severity) {
+    case CpToastTypes.ERROR:
+      return 'alert-octagon'
+    case CpToastTypes.INFO:
+      return 'info'
+    case CpToastTypes.SUCCESS:
+      return 'check-circle'
+    case CpToastTypes.WARNING:
+      return 'alert-triangle'
+    default:
+      return 'intent'
+  }
+}
+
+const getButtonColor = (severity: string) => {
+  switch (severity) {
+    case CpToastTypes.ERROR:
+      return 'red'
+    case CpToastTypes.SUCCESS:
+      return 'green'
+    case CpToastTypes.WARNING:
+      return 'orange'
+    default:
+      return 'purple'
+  }
+}
+
+const hasActions = (message: Props) => !!message.primaryAction || !!message.secondaryAction
+
+const getTimerBarStyle = (life: number) => ({ animationDuration: `${life}ms` })
+</script>
+
+<style lang="scss">
+.p-toast-message-enter-active {
+  transition:
+    transform 400ms fn.v(easing-elastic),
+    opacity 200ms fn.v(easing-elastic);
+}
+
+.p-toast-message-move,
+.p-toast-message-leave-active {
+  transition:
+    transform 400ms ease,
+    opacity 200ms ease;
+}
+
+.p-toast-message-enter-from,
+.p-toast-message-leave-to {
+  opacity: 0;
+  transform: translate3d(0, fn.px-to-rem(-30), 0) scale3d(0.75, 0.75, 1);
+  z-index: -1;
+}
+
+.cpToasts div[role='alert']:not(:only-child).p-toast-message-leave-active {
+  position: absolute;
+}
+
+.cpToasts > div {
+  display: flex;
+  flex-direction: column;
+  gap: sp.$space;
+}
+
+.cpToast {
+  --toaster-shadow: #{fn.v(drop-shadow-md-offset-x)} #{fn.v(drop-shadow-md-offset-y)} #{fn.v(drop-shadow-md-blur)}
+    #{fn.v(drop-shadow-md-spread)} #{fn.v(drop-shadow-md-color)};
+
+  display: flex;
+  overflow: hidden;
+  position: relative;
+  flex-direction: column;
+  padding: sp.$space-md;
+  border-radius: fn.px-to-rem(8);
+  box-shadow: var(--toaster-shadow);
+  gap: sp.$space;
+  background-color: fn.v(background-primary);
+
+  &__inner {
+    display: flex;
+    align-items: flex-start;
+    gap: sp.$space;
+  }
+
+  &__content {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: sp.$space-sm;
+  }
+
+  &__icon {
+    color: fn.v(text-accent-primary);
+
+    &:not(.cpToast__icon--isClose) {
+      padding-top: sp.$space-xs;
+    }
+  }
+
+  &__summary,
+  &__detail {
+    font-size: fn.px-to-rem(14);
+    line-height: fn.px-to-rem(20);
+  }
+
+  &__summary {
+    font-weight: 600;
+    color: fn.v(text-accent-primary);
+  }
+
+  &__detail {
+    font-weight: 500;
+    color: fn.v(text-accent-secondary);
+  }
+
+  &__actions {
+    margin-top: sp.$space-sm;
+    display: flex;
+    justify-content: flex-end;
+    gap: sp.$space;
+  }
+
+  &__close {
+    display: flex;
+    margin-top: sp.$space-xs;
+    border-radius: fn.px-to-rem(50);
+
+    &:focus-visible {
+      outline: fn.px-to-rem(2) solid fn.v(border-accent-solid);
+    }
+  }
+
+  @keyframes toast-timer {
+    from {
+      transform: scale3d(1, 1, 1);
+    }
+    to {
+      transform: scale3d(0, 1, 1);
+    }
+  }
+
+  &__timer {
+    position: absolute;
+    inset: 0;
+    top: auto;
+    height: fn.px-to-rem(4);
+    transform-origin: left;
+    animation-name: toast-timer;
+    animation-timing-function: linear;
+    animation-fill-mode: forwards;
+    background-color: fn.v(border-accent-solid);
+  }
+
+  &--isInfo {
+    background-color: fn.v(background-blue-primary);
+
+    .cpToast__icon,
+    .cpToast__summary {
+      color: fn.v(text-blue-primary);
+    }
+
+    .cpToast__detail {
+      color: fn.v(text-blue-secondary);
+    }
+
+    .cpToast__close {
+      outline-color: fn.v(border-blue-solid);
+    }
+
+    .cpToast__timer {
+      background-color: fn.v(border-blue-solid);
+    }
+  }
+
+  &--isSuccess {
+    background-color: fn.v(background-success-primary);
+
+    .cpToast__icon,
+    .cpToast__summary {
+      color: fn.v(text-success-primary);
+    }
+
+    .cpToast__detail {
+      color: fn.v(text-success-secondary);
+    }
+
+    .cpToast__close {
+      outline-color: fn.v(border-success-solid);
+    }
+
+    .cpToast__timer {
+      background-color: fn.v(border-success-solid);
+    }
+  }
+
+  &--isError {
+    background-color: fn.v(background-error-primary);
+
+    .cpToast__icon,
+    .cpToast__summary {
+      color: fn.v(text-error-primary);
+    }
+
+    .cpToast__detail {
+      color: fn.v(text-error-secondary);
+    }
+
+    .cpToast__close {
+      outline-color: fn.v(border-error-solid);
+    }
+
+    .cpToast__timer {
+      background-color: fn.v(border-error-solid);
+    }
+  }
+
+  &--isWarning {
+    background-color: fn.v(background-warning-primary);
+
+    .cpToast__icon,
+    .cpToast__summary {
+      color: fn.v(text-warning-primary);
+    }
+
+    .cpToast__detail {
+      color: fn.v(text-warning-secondary);
+    }
+
+    .cpToast__close {
+      outline-color: fn.v(border-warning-solid);
+    }
+
+    .cpToast__timer {
+      background-color: fn.v(border-warning-solid);
+    }
+  }
+}
+</style>

package/src/components/icons/IconIntent.vue

@@ -0,0 +1,36 @@
+<template>
+  <svg
+    clip-rule="evenodd"
+    fill="currentColor"
+    fill-rule="evenodd"
+    height="24"
+    viewBox="0 0 24 24"
+    width="24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M9.9169 1.19704C10.4941 1.0864 11 1.55136 11 2.13907V2.15944C11 2.66921 10.6148 3.09135 10.1162 3.19753C9.02753 3.42938 8.0117 3.85808 7.10775 4.4446C6.68031 4.72194 6.10975 4.6956 5.74945 4.3353L5.73512 4.32098C5.31937 3.90522 5.34858 3.21846 5.83525 2.88854C7.0455 2.0681 8.42786 1.48246 9.9169 1.19704Z"
+    />
+    <path
+      d="M19.6648 18.2505C19.3045 17.8903 19.2781 17.3197 19.5555 16.8922C20.142 15.9883 20.5707 14.9725 20.8025 13.8838C20.9087 13.3852 21.3308 13 21.8406 13H21.861C22.4487 13 22.9137 13.5059 22.803 14.0831C22.5176 15.5722 21.932 16.9545 21.1115 18.1647C20.7816 18.6514 20.0948 18.6806 19.6791 18.2649L19.6648 18.2505Z"
+    />
+    <path
+      d="M22.803 9.91695C22.9137 10.4942 22.4487 11.0001 21.861 11.0001H21.8406C21.3309 11.0001 20.9087 10.6149 20.8025 10.1163C20.5707 9.02758 20.142 8.01174 19.5554 7.10779C19.2781 6.68035 19.3044 6.10978 19.6647 5.74948L19.6791 5.73515C20.0948 5.3194 20.7816 5.34861 21.1115 5.83528C21.9319 7.04553 22.5176 8.4279 22.803 9.91695Z"
+    />
+    <path
+      d="M18.2505 19.6649C17.8903 19.3046 17.3197 19.2782 16.8922 19.5556C15.9883 20.1421 14.9725 20.5708 13.8838 20.8026C13.3853 20.9088 13 21.331 13 21.8407V21.8611C13 22.4488 13.506 22.9138 14.0832 22.8031C15.5722 22.5177 16.9545 21.9321 18.1647 21.1116C18.6514 20.7817 18.6806 20.095 18.2649 19.6792L18.2505 19.6649Z"
+    />
+    <path
+      d="M9.91689 22.8029C10.4941 22.9136 11 22.4486 11 21.8609V21.8405C11 21.3308 10.6148 20.9086 10.1162 20.8024C9.02751 20.5706 8.01166 20.1419 7.1077 19.5553C6.68026 19.278 6.10969 19.3043 5.74939 19.6646L5.73506 19.679C5.31931 20.0947 5.34851 20.7815 5.83519 21.1114C7.04545 21.9319 8.42783 22.5175 9.91689 22.8029Z"
+    />
+    <path
+      d="M13 2.15944C13 2.66921 13.3853 3.09134 13.8838 3.19753C14.9725 3.42938 15.9883 3.85806 16.8922 4.44456C17.3196 4.7219 17.8902 4.69555 18.2505 4.33526L18.2648 4.32093C18.6806 3.90517 18.6514 3.21841 18.1647 2.88849C16.9545 2.06808 15.5722 1.48246 14.0832 1.19704C13.506 1.0864 13 1.55135 13 2.13907V2.15944Z"
+    />
+    <path
+      d="M4.32091 5.73515C3.90516 5.3194 3.2184 5.34861 2.88847 5.83528C2.06804 7.04552 1.4824 8.42787 1.19698 9.9169C1.08634 10.4941 1.55129 11 2.13901 11H2.15938C2.66915 11 3.09128 10.6148 3.19747 10.1162C3.42932 9.02755 3.85802 8.01173 4.44454 7.10778C4.72188 6.68034 4.69553 6.10978 4.33524 5.74948L4.32091 5.73515Z"
+    />
+    <path
+      d="M2.13901 13C1.55129 13 1.08634 13.5059 1.19698 14.0831C1.48239 15.5721 2.06802 16.9545 2.88843 18.1647C3.21835 18.6514 3.90511 18.6806 4.32087 18.2648L4.3352 18.2505C4.69549 17.8902 4.72184 17.3196 4.4445 16.8922C3.858 15.9883 3.42931 14.9725 3.19747 13.8838C3.09128 13.3852 2.66915 13 2.15938 13H2.13901Z"
+    />
+  </svg>
+</template>

package/src/components/index.ts

@@ -1,10 +1,16 @@
+import 'vue-tel-input/vue-tel-input.css'
+import 'floating-vue/dist/style.css'
+import 'modern-normalize/modern-normalize.css'
+
+import '@/assets/main.css'
+
 import { vTooltip } from 'floating-vue'
 import { vMaska } from 'maska/vue'
 import PrimeVue from 'primevue/config'
+import ToastService from 'primevue/toastservice'
 import { App } from 'vue'
 import { BindOnceDirective } from 'vue-bind-once'
 import VueTelInput from 'vue-tel-input'
-import 'vue-tel-input/vue-tel-input.css'
 
 import ClickOutside from '../directives/ClickOutside'
 import CpCoreDatepicker from '../libs/CoreDatepicker.vue'
@@ -35,6 +41,7 @@ import CpTable from './CpTable.vue'
 import CpTableColumnEditor from './CpTableColumnEditor.vue'
 import CpTelInput from './CpTelInput.vue'
 import CpTextarea from './CpTextarea.vue'
+import CpToast from './CpToast.vue'
 import CpToaster from './CpToaster.vue'
 import CpTooltip from './CpTooltip.vue'
 import CpTransitionDialog from './CpTransitionDialog.vue'
@@ -52,6 +59,7 @@ import createToaster from '@/plugins/toaster'
 
 const Components = {
   CpToaster,
+  CpToast,
   CpBadge,
   CpHeading,
   CpButton,
@@ -98,6 +106,7 @@ const Pimp = {
   install(app: App, options: Record<string, unknown>) {
     app.use(PrimeVue, { unstyled: true })
     app.use(VueTelInput)
+    app.use(ToastService)
 
     Object.keys(Components).forEach((name) => {
       app.component(name, Components[name as keyof typeof Components])

package/src/constants/CpCustomIcons.ts

@@ -65,6 +65,7 @@ import IconHistory from '@/components/icons/IconHistory.vue'
 import IconHourGlass from '@/components/icons/IconHourGlass.vue'
 import IconIdCard from '@/components/icons/IconIdCard.vue'
 import IconInfant from '@/components/icons/IconInfant.vue'
+import IconIntent from '@/components/icons/IconIntent.vue'
 import IconItinerary from '@/components/icons/IconItinerary.vue'
 import IconKnife from '@/components/icons/IconKnife.vue'
 import IconLeave from '@/components/icons/IconLeave.vue'
@@ -184,6 +185,7 @@ export const CustomCpIcons = {
   'id-card': IconIdCard,
   infant: IconInfant,
   itinerary: IconItinerary,
+  intent: IconIntent,
   knife: IconKnife,
   leave: IconLeave,
   lighter: IconLighter,

package/src/constants/CpTableColumn.ts

@@ -1,5 +1,6 @@
 export interface CpTableColumnObject {
   id: string
+  isFull?: boolean
   isHidden?: boolean
   isProtected?: boolean
   name: string

package/src/constants/CpToastTypes.ts

@@ -0,0 +1,7 @@
+export enum CpToastTypes {
+  SECONDARY = 'secondary',
+  INFO = 'info',
+  ERROR = 'error',
+  SUCCESS = 'success',
+  WARNING = 'warning',
+}

package/src/stories/CpTable.stories.ts

@@ -14,6 +14,7 @@ const meta = {
     backgrounds: {
       default: 'dark',
     },
+    layout: 'padded',
   },
   decorators: [
     () => ({ template: '<div style="padding: 20px; border-radius: 8px; background-color: #fff;"><story/></div>' }),
@@ -66,26 +67,13 @@ export const Default: Story = {
 }
 
 export const EnableColumnEdition: Story = {
-  args: {
-    ...Default.args,
-    columns: [
-      { id: 'name', name: 'Name' },
-      { id: 'age', name: 'Age' },
-      { id: 'email', name: 'Email' },
-      { id: 'status', name: 'Status' },
-    ],
-    enableColumnEdition: true,
-  },
-}
-
-export const EnableColumnEditionWithDefault: Story = {
   args: {
     ...Default.args,
     columns: [
       { id: 'name', name: 'Name', isProtected: true },
       { id: 'age', name: 'Age', isHidden: true, isProtected: true },
       { id: 'email', name: 'Email', isHidden: false },
-      { id: 'status', name: 'Status' },
+      { id: 'status', name: 'Status', isFull: true },
     ],
     enableColumnEdition: true,
   },

package/src/stories/CpToast.stories.ts

@@ -0,0 +1,194 @@
+import { useToast } from 'primevue/usetoast'
+
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import { CpToastTypes } from '@/constants/CpToastTypes'
+
+import CpToast from '@/components/CpToast.vue'
+
+const meta: Meta<typeof CpToast> = {
+  title: 'CpToast',
+  component: CpToast,
+  argTypes: {
+    position: {
+      control: { type: 'select' },
+      options: ['center', 'top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right'],
+    },
+  },
+  args: {
+    position: 'top-right',
+    group: undefined,
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof CpToast>
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { CpToast },
+    setup() {
+      const toast = useToast()
+
+      const baseOptions = {
+        severity: CpToastTypes.SECONDARY,
+        summary: `Hello i'm a cpToast !`,
+        detail: 'This is a cpToast description.',
+      }
+
+      const notifySecondary = () => toast.add({ ...baseOptions })
+
+      const notifyInfo = () => {
+        toast.add({
+          ...baseOptions,
+          severity: CpToastTypes.INFO,
+        })
+      }
+
+      const notifyError = () => {
+        toast.add({
+          ...baseOptions,
+          severity: CpToastTypes.ERROR,
+        })
+      }
+      const notifySuccess = () => {
+        toast.add({
+          ...baseOptions,
+          severity: CpToastTypes.SUCCESS,
+        })
+      }
+      const notifyWarning = () => {
+        toast.add({
+          ...baseOptions,
+          severity: CpToastTypes.WARNING,
+        })
+      }
+
+      return { args, notifySecondary, notifyInfo, notifyError, notifySuccess, notifyWarning }
+    },
+    template: `
+      <div style="padding: 16px;">
+
+        <CpToast v-bind="args" />
+
+        <div style="display:flex; gap: 12px; align-items:center;">
+          <button
+            type="button"
+            @click="notifySecondary"
+            style="padding: 8px 12px; border-radius: 8px; border: 1px solid #ddd; cursor:pointer;"
+          >
+            Show secondary toast
+          </button>
+
+          <button
+            type="button"
+            @click="notifyInfo"
+            style="padding: 8px 12px; border-radius: 8px; border: 1px solid #ddd; cursor:pointer;"
+          >
+            Show info toast
+          </button>
+
+          <button
+            type="button"
+            @click="notifyError"
+            style="padding: 8px 12px; border-radius: 8px; border: 1px solid #ddd; cursor:pointer;"
+          >
+            Show error toast
+          </button>
+
+          <button
+            type="button"
+            @click="notifySuccess"
+            style="padding: 8px 12px; border-radius: 8px; border: 1px solid #ddd; cursor:pointer;"
+          >
+            Show success toast
+          </button>
+
+          <button
+            type="button"
+            @click="notifyWarning"
+            style="padding: 8px 12px; border-radius: 8px; border: 1px solid #ddd; cursor:pointer;"
+          >
+            Show warning toast
+          </button>
+        </div>
+
+        <p style="margin-top:12px; color:#666;">
+          This story demonstrates triggering notifications only via <code>useToast()</code>.
+        </p>
+      </div>
+    `,
+  }),
+}
+
+export const WithTimer: Story = {
+  args: {
+    ...Default.args,
+  },
+  render: (args) => ({
+    components: { CpToast },
+    setup() {
+      const toast = useToast()
+
+      const notifyWithTimer = () => {
+        toast.add({
+          severity: CpToastTypes.INFO,
+          summary: "Hello i'm a cpToast with a timer !",
+          detail: 'This is a cpToast description.',
+          life: 2500,
+        })
+      }
+
+      return { args, notifyWithTimer }
+    },
+    template: `
+      <div style="padding: 16px;">
+        <CpToast v-bind="args" />
+
+        <cp-button @click="notifyWithTimer">Show toast with timer</cp-button>
+      </div>
+    `,
+  }),
+}
+
+export const WithActions: Story = {
+  args: {
+    ...Default.args,
+  },
+  render: (args) => ({
+    components: { CpToast },
+    setup() {
+      const toast = useToast()
+
+      const notifyWithActions = () => {
+        toast.add({
+          severity: CpToastTypes.INFO,
+          summary: "Hello i'm a cpToast with actions !",
+          detail: 'This is a cpToast description.',
+          primaryAction: {
+            label: 'Primary action',
+            onClick: () => {
+              console.log('Primary action clicked')
+            },
+          },
+          secondaryAction: {
+            label: 'Secondary action',
+            onClick: () => {
+              console.log('Secondary action clicked')
+            },
+          },
+        })
+      }
+
+      return { args, notifyWithActions }
+    },
+    template: `
+      <div style="padding: 16px;">
+        <CpToast v-bind="args" />
+
+        <cp-button @click="notifyWithActions">Show toast with actions</cp-button>
+      </div>
+    `,
+  }),
+}

package/src/assets/styles/main.scss

@@ -1,5 +0,0 @@
-// Base
-@use 'base/base';
-
-// Floating Vue
-@use 'floating-vue/dist/style.css';