@citizenplane/pimp 18.6.2 → 18.8.0

package/src/components/CpItemActions.vue

@@ -19,9 +19,8 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
-
 import type { MenuItem } from 'primevue/menuitem'
+import { computed, ref } from 'vue'
 
 import CpButtonGroup from '@/components/CpButtonGroup.vue'
 import CpContextualMenu from '@/components/CpContextualMenu.vue'
@@ -29,10 +28,11 @@ import CpMenuItem from '@/components/CpMenuItem.vue'
 
 export interface Props {
   actions: MenuItem[]
+  iconPosition?: 'horizontal' | 'vertical'
   quickOptionsLimit?: number
 }
 
-const props = withDefaults(defineProps<Props>(), { quickOptionsLimit: 2 })
+const props = withDefaults(defineProps<Props>(), { quickOptionsLimit: 2, iconPosition: 'horizontal' })
 
 const componentDynamicClasses = computed(() => ({ 'cpItemActions--isDropdownOpen': isDropdownOpen.value }))
 
@@ -41,10 +41,10 @@ const isDropdownOpen = ref(false)
 
 const showContextualMenu = (event: MouseEvent) => contextualMenu.value?.show(event)
 
-const defaultAction = {
-  icon: 'more-horizontal',
+const defaultAction = computed(() => ({
+  icon: `more-${props.iconPosition}`,
   command: (event: MouseEvent) => showContextualMenu(event),
-}
+}))
 
 const hasActions = computed(() => !!props.actions.length)
 
@@ -52,11 +52,11 @@ const slicedActions = computed(() => {
   const actionsCopy = [...props.actions]
 
   if (actionsCopy.length <= props.quickOptionsLimit) {
-    return [...actionsCopy, defaultAction]
+    return [...actionsCopy, defaultAction.value]
   }
 
   const firstActions = actionsCopy.slice(0, props.quickOptionsLimit)
-  return [...firstActions, defaultAction]
+  return [...firstActions, defaultAction.value]
 })
 
 const handleDropdownState = (state: boolean) => (isDropdownOpen.value = state)
@@ -65,8 +65,8 @@ const handleDropdownState = (state: boolean) => (isDropdownOpen.value = state)
 <style lang="scss">
 .cpItemActions {
   position: absolute;
-  right: 0;
   top: 50%;
+  right: 0;
   transform: translate3d(calc(var(--cp-dimensions-1) * 1.25), -50%, 0);
   transition:
     transform 150ms ease,
@@ -76,23 +76,24 @@ const handleDropdownState = (state: boolean) => (isDropdownOpen.value = state)
     background-color: var(--cp-background-primary);
   }
 
+  .cpMenuItem__button {
+    padding: var(--cp-spacing-sm-md);
+    border-radius: 0;
+  }
+
   .cpMenuItem {
     padding: 0;
 
     &:first-child .cpMenuItem__button {
-      border-top-left-radius: var(--cp-radius-md);
       border-bottom-left-radius: var(--cp-radius-md);
+      border-top-left-radius: var(--cp-radius-md);
     }
+
     &:last-child .cpMenuItem__button {
-      border-top-right-radius: var(--cp-radius-md);
       border-bottom-right-radius: var(--cp-radius-md);
+      border-top-right-radius: var(--cp-radius-md);
     }
   }
-
-  .cpMenuItem__button {
-    border-radius: 0;
-    padding: var(--cp-spacing-sm-md);
-  }
 }
 
 [cp-item-actions-trigger] {

package/src/components/CpMenu.vue

@@ -60,11 +60,10 @@
 
 <script setup lang="ts">
 import PrimevueDrawer from 'primevue/drawer'
+import type { MenuItem } from 'primevue/menuitem'
 import PrimevuePopover from 'primevue/popover'
 import { computed, nextTick, onUnmounted, ref, useId } from 'vue'
 
-import type { MenuItem } from 'primevue/menuitem'
-
 import CpButton from '@/components/CpButton.vue'
 import CpIcon from '@/components/CpIcon.vue'
 import CpMenuList from '@/components/CpMenuList.vue'
@@ -174,13 +173,13 @@ defineExpose({ show, hide, toggle })
 
   &__overlay {
     position: absolute;
-    margin-top: var(--cp-spacing-sm-md);
     min-width: calc(var(--cp-dimensions-1) * 62.5);
     border-radius: var(--cp-radius-md);
+    margin-top: var(--cp-spacing-sm-md);
     background-color: var(--cp-background-primary);
     box-shadow: var(--cp-shadows-overlay);
-    will-change: opacity, transform;
     transform-origin: top;
+    will-change: opacity, transform;
   }
 
   &__overlayContent {
@@ -189,24 +188,24 @@ defineExpose({ show, hide, toggle })
 
   &__drawerMask {
     position: fixed;
-    inset: 0;
     z-index: 2;
     display: flex;
     align-items: flex-end;
     justify-content: center;
     background-color: var(--cp-background-overlay);
+    inset: 0;
   }
 
   &__drawer {
     position: relative;
+    display: flex;
     width: 100%;
     max-height: 85vh;
-    display: flex;
     flex-direction: column;
-    background-color: var(--cp-background-primary);
+    padding-bottom: env(safe-area-inset-bottom);
     border-radius: var(--cp-radius-lg) var(--cp-radius-lg) 0 0;
+    background-color: var(--cp-background-primary);
     box-shadow: var(--cp-shadows-overlay);
-    padding-bottom: env(safe-area-inset-bottom);
   }
 
   &__drawer--fullHeight {
@@ -221,8 +220,8 @@ defineExpose({ show, hide, toggle })
 
   &__drawerContent {
     flex: 1;
-    overflow-y: auto;
     padding-bottom: var(--cp-spacing-sm);
+    overflow-y: auto;
   }
 
   &__drawerToolbar {

package/src/components/CpMenuItem.vue

@@ -24,9 +24,8 @@
 </template>
 
 <script setup lang="ts">
-import { computed, useSlots } from 'vue'
-
 import type { MenuItem } from 'primevue/menuitem'
+import { computed, useSlots } from 'vue'
 
 interface Props {
   hideLabel?: boolean
@@ -61,7 +60,7 @@ const dynamicClass = computed(() => ({
 const disabled = computed(() => props.isLoading || props.disabled)
 const hasLeadingIcon = computed(() => !!props.leadingIcon || !!slots['leading-icon'])
 const hasTrailingIcon = computed(() => !!props.trailingIcon || !!slots['trailing-icon'])
-const hasLabel = computed(() => (!!props.label || !!slots['label']) && !props.hideLabel)
+const hasLabel = computed(() => (!!props.label || !!slots.label) && !props.hideLabel)
 const ariaLabel = computed(() => (props.hideLabel ? props.label : undefined))
 
 const handleItemClick = async (event: Event) => {
@@ -91,15 +90,15 @@ const handleItemClick = async (event: Event) => {
     --cp-menu-item-color: var(--cp-text-primary);
     --cp-menu-item-color-hover: var(--cp-text-primary);
 
-    padding: var(--cp-spacing-sm-md) var(--cp-spacing-md);
     position: relative;
-    color: var(--cp-menu-item-color);
-    background-color: var(--cp-menu-item-background-color);
     display: flex;
     width: 100%;
     align-items: center;
-    gap: var(--cp-spacing-lg);
+    padding: var(--cp-spacing-sm-md) var(--cp-spacing-md);
+    background-color: var(--cp-menu-item-background-color);
+    color: var(--cp-menu-item-color);
     font-size: var(--cp-text-size-sm);
+    gap: var(--cp-spacing-lg);
     line-height: var(--cp-line-height-sm);
     text-align: start;
     transition:
@@ -116,6 +115,7 @@ const handleItemClick = async (event: Event) => {
       --cp-menu-item-background-color-hover: var(--cp-background-primary);
       --cp-menu-item-color: var(--cp-text-disabled);
       --cp-menu-item-color-hover: var(--cp-text-disabled);
+
       cursor: not-allowed;
     }
 

package/src/components/CpMenuList.vue

@@ -35,12 +35,12 @@ const getItemRole = (item: MenuItem) => (item.separator ? 'separator' : 'none')
 
 <style lang="scss">
 .cpMenuList {
-  margin: 0;
-  padding: 0;
-  list-style: none;
   display: flex;
   flex-direction: column;
+  padding: 0;
+  margin: 0;
   gap: var(--cp-spacing-sm);
+  list-style: none;
 
   &__item {
     display: block;

package/src/components/CpMultiselect.vue

@@ -97,9 +97,8 @@
 <script setup lang="ts">
 import { absolutePosition, getOuterWidth } from '@primeuix/utils/dom'
 import AutoComplete from 'primevue/autocomplete'
-import { ref, computed, onMounted, useSlots, useId } from 'vue'
-
 import type { Slots } from 'vue'
+import { computed, onMounted, ref, useId, useSlots } from 'vue'
 
 import BaseInputLabel from '@/components/BaseInputLabel.vue'
 import BaseSelectClearButton from '@/components/BaseSelectClearButton.vue'
@@ -335,8 +334,8 @@ onMounted(() => overrideAlignOverlay())
 
   &__prefix {
     display: flex;
-    align-items: center;
     flex-shrink: 0;
+    align-items: center;
     order: -1;
 
     &:empty {
@@ -349,29 +348,21 @@ onMounted(() => overrideAlignOverlay())
     align-items: center;
     justify-content: space-between;
     padding: var(--cp-spacing-md) var(--cp-spacing-xl);
+    border-radius: var(--cp-radius-md);
     box-shadow:
       var(--cp-shadows-3xs-inset),
       0 0 0 var(--cp-dimensions-0_25) var(--cp-border-soft);
-    border-radius: var(--cp-radius-md);
     gap: var(--cp-spacing-md);
 
     &--sm {
       padding: var(--cp-spacing-sm) var(--cp-spacing-lg);
     }
 
-    &:has(input:hover):not(:has(input:disabled)) {
-      outline: var(--cp-dimensions-0_25) solid var(--cp-border-strong-hover);
-    }
-
-    &:has(input:focus-visible):not(:has(input:disabled)) {
-      outline: var(--cp-dimensions-0_5) solid var(--cp-border-accent-solid);
-    }
-
     &:has(input:disabled) {
       background: var(--cp-background-disabled);
-      pointer-events: none;
       box-shadow: 0 0 0 var(--cp-dimensions-0_25) var(--cp-border-disabled);
       color: var(--cp-text-disabled);
+      pointer-events: none;
 
       input,
       input::placeholder {
@@ -381,23 +372,32 @@ onMounted(() => overrideAlignOverlay())
       .cpMultiselect__toggle {
         display: none;
       }
+
       .cpIcon {
         color: var(--cp-foreground-disabled);
       }
     }
+    
+    &:has(input:hover):not(:has(input:disabled)) {
+      outline: var(--cp-dimensions-0_25) solid var(--cp-border-strong-hover);
+    }
+
+    &:has(input:focus-visible):not(:has(input:disabled)) {
+      outline: var(--cp-dimensions-0_5) solid var(--cp-border-accent-solid);
+    }
 
     &:is([data-p*='invalid'], .p-invalid, :has([data-p*='invalid']), :has([aria-invalid='true'])) {
-      outline: var(--cp-dimensions-0_25) solid var(--cp-border-error-solid) !important;
       box-shadow: 0 0 0 var(--cp-dimensions-0_25) var(--cp-border-error-solid) !important;
+      outline: var(--cp-dimensions-0_25) solid var(--cp-border-error-solid) !important;
 
       &:is(:hover, :has(input:hover), :has(input:placeholder-shown):has(input:hover)) {
-        outline: var(--cp-dimensions-0_25) solid var(--cp-border-error-solid) !important;
         box-shadow: 0 0 0 var(--cp-dimensions-0_25) var(--cp-border-error-solid) !important;
+        outline: var(--cp-dimensions-0_25) solid var(--cp-border-error-solid) !important;
       }
 
       &:is(:focus-within, :has(input:focus-visible), :has(input:placeholder-shown):has(input:focus-visible)) {
-        outline: var(--cp-dimensions-0_5) solid var(--cp-border-error-solid) !important;
         box-shadow: 0 0 0 var(--cp-dimensions-0_25) var(--cp-border-error-solid) !important;
+        outline: var(--cp-dimensions-0_5) solid var(--cp-border-error-solid) !important;
       }
     }
   }
@@ -438,11 +438,11 @@ onMounted(() => overrideAlignOverlay())
   }
 
   &__input {
+    width: 100%;
     padding: 0;
+    background-color: transparent;
     font-size: var(--cp-text-size-sm);
     line-height: var(--cp-line-height-md);
-    background-color: transparent;
-    width: 100%;
 
     &::placeholder {
       color: var(--cp-text-placeholder);
@@ -458,22 +458,21 @@ onMounted(() => overrideAlignOverlay())
     }
 
     &--isSingle {
+      width: 100%;
       text-overflow: ellipsis;
       white-space: nowrap;
-      width: 100%;
     }
   }
 
   &__dropdownIcon {
     width: var(--cp-dimensions-4);
     height: var(--cp-dimensions-4);
-
     color: var(--cp-foreground-secondary);
     transition: rotate 200ms ease;
 
     &--isRotated {
-      rotate: 180deg;
       color: var(--cp-foreground-primary);
+      rotate: 180deg;
     }
   }
 
@@ -483,13 +482,13 @@ onMounted(() => overrideAlignOverlay())
   }
 
   &__overlay {
-    padding-block: var(--cp-spacing-sm);
     left: 0;
     overflow: hidden;
-    background: var(--cp-background-primary);
     border-radius: var(--cp-radius-md);
-    margin-block: var(--cp-spacing-md);
+    background: var(--cp-background-primary);
     box-shadow: var(--cp-shadows-overlay);
+    margin-block: var(--cp-spacing-md);
+    padding-block: var(--cp-spacing-sm);
 
     &--isHidden {
       display: none;
@@ -506,9 +505,9 @@ onMounted(() => overrideAlignOverlay())
 
   &__list {
     display: flex;
-    padding-inline: var(--cp-spacing-sm);
     flex-direction: column;
     gap: var(--cp-spacing-xs);
+    padding-inline: var(--cp-spacing-sm);
   }
 
   &__optionWrapper {
@@ -531,20 +530,20 @@ onMounted(() => overrideAlignOverlay())
     }
 
     &[data-p-disabled='true'] {
-      opacity: 0.5;
       cursor: not-allowed;
+      opacity: 0.5;
       pointer-events: none;
     }
   }
 
   &__optionWrapper > *,
   &__option {
+    width: 100%;
     padding: var(--cp-dimensions-2_5);
     border-radius: var(--cp-radius-sm-md);
     font-size: var(--cp-text-size-sm);
     line-height: var(--cp-line-height-sm);
     text-align: left;
-    width: 100%;
   }
 
   &__option {
@@ -553,8 +552,8 @@ onMounted(() => overrideAlignOverlay())
 
   &__empty {
     padding: var(--cp-spacing-md);
-    font-size: var(--cp-text-size-sm);
     color: var(--cp-text-secondary);
+    font-size: var(--cp-text-size-sm);
   }
 
   &__error {
@@ -569,10 +568,10 @@ onMounted(() => overrideAlignOverlay())
 
   &__clear {
     position: absolute;
-    right: var(--cp-dimensions-3);
     top: 50%;
-    transform: translateY(-50%);
+    right: var(--cp-dimensions-3);
     background-color: var(--cp-background-primary);
+    transform: translateY(-50%);
   }
 
   @include mx.media-query-pointer-device-only {

package/src/components/CpRadio.vue

@@ -76,8 +76,8 @@ const computedClasses = computed(() => `cpRadio--is${capitalizeFirstLetter(props
   }
 
   &--is#{$className} input:checked {
-    background-color: $color;
     border-color: $color;
+    background-color: $color;
 
     & ~ .cpRadio__label,
     & ~ .cpRadio__additionalData {
@@ -104,16 +104,15 @@ const computedClasses = computed(() => `cpRadio--is${capitalizeFirstLetter(props
 
   &__item {
     position: relative;
+    display: grid;
+    width: 100%;
+    align-items: center;
+    padding: var(--cp-spacing-xl) var(--cp-spacing-lg);
     border: var(--cp-dimensions-0_25) solid var(--cp-border-soft);
     border-radius: var(--cp-radius-md-lg);
-    padding: var(--cp-spacing-xl) var(--cp-spacing-lg);
-    display: grid;
+    gap: 0 var(--cp-spacing-lg);
     grid-template-columns: min-content 1fr;
     grid-template-rows: auto auto auto;
-    align-items: center;
-    column-gap: var(--cp-spacing-lg);
-    row-gap: 0;
-    width: 100%;
 
     &:not(:has(input:disabled)),
     &:not(:has(input:disabled)) * {
@@ -121,9 +120,9 @@ const computedClasses = computed(() => `cpRadio--is${capitalizeFirstLetter(props
     }
 
     &:has(input:disabled) {
+      border-color: var(--cp-border-disabled);
       background-color: var(--cp-background-disabled);
       color: var(--cp-foreground-disabled);
-      border-color: var(--cp-border-disabled);
 
       &,
       * {
@@ -133,8 +132,8 @@ const computedClasses = computed(() => `cpRadio--is${capitalizeFirstLetter(props
       &:hover,
       &:focus,
       &:has(input:checked) {
-        box-shadow: none;
         border-color: var(--cp-border-disabled);
+        box-shadow: none;
       }
     }
   }
@@ -150,48 +149,72 @@ const computedClasses = computed(() => `cpRadio--is${capitalizeFirstLetter(props
   }
 
   .cpRadio__additionalData {
+    margin-left: 0;
     grid-column: 2;
     grid-row: 3;
-    margin-left: 0;
     text-align: left;
   }
 
   @include cp-radio-style(var(--cp-foreground-accent-primary), 'Accent');
-
   @include cp-radio-style(var(--cp-foreground-blue-primary), 'Blue');
-
   @include cp-radio-style(var(--cp-foreground-accent-primary), 'Purple'); // TODO: Sould be replace by ACCENT
 
   input {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    border: var(--cp-dimensions-0_25) solid var(--cp-border-soft);
-    border-radius: var(--cp-radius-full);
-    padding: 25%;
     width: $cp-radio-base-width;
     height: $cp-radio-base-width;
-    transition: transform 0.1s linear;
+    align-self: center;
+    padding: 25%;
+    border: var(--cp-dimensions-0_25) solid var(--cp-border-soft);
+    border-radius: var(--cp-radius-full);
+    appearance: none;
     grid-column: 1;
     grid-row: 1 / -1;
-    align-self: center;
+    transition: transform 0.1s linear;
 
-    &:before {
-      content: '';
+    &__label,
+    &__description {
+      line-height: 1.3;
+      text-transform: capitalize;
+    }
+
+    &__label,
+    &__additionalData {
+      font-weight: 500;
+    }
+
+    &__description,
+    &__additionalData {
+      color: var(--cp-text-secondary);
+    }
+
+    &__label {
+      white-space: nowrap;
+    }
+
+    &__description:empty {
+      display: none;
+    }
+
+    &__additionalData:empty {
+      display: none;
+    }
+
+    &::before {
       display: flex;
       width: 100%;
       height: 100%;
       border-radius: var(--cp-radius-full);
       background-color: var(--cp-background-primary);
-      transition: transform 0.15s linear;
+      content: '';
       transform: scale(0);
+      transition: transform 0.15s linear;
     }
 
     &:active:not(:disabled) {
       transform: scale(0.8);
     }
 
-    &:checked:before {
+    &:checked::before {
       transform: scale(1);
     }
 
@@ -200,7 +223,7 @@ const computedClasses = computed(() => `cpRadio--is${capitalizeFirstLetter(props
       background-color: var(--cp-background-disabled);
     }
 
-    &:checked:disabled:before {
+    &:checked:disabled::before {
       background-color: var(--cp-foreground-disabled);
     }
 
@@ -209,54 +232,25 @@ const computedClasses = computed(() => `cpRadio--is${capitalizeFirstLetter(props
       color: var(--cp-foreground-disabled);
     }
   }
-
-  &__label,
-  &__description {
-    line-height: 1.3;
-    text-transform: capitalize;
-  }
-
-  &__label,
-  &__additionalData {
-    font-weight: 500;
-  }
-
-  &__description,
-  &__additionalData {
-    color: var(--cp-text-secondary);
-  }
-
-  &__label {
-    white-space: nowrap;
-  }
-
-  &__description:empty {
-    display: none;
-  }
-
-  &__additionalData:empty {
-    display: none;
-  }
 }
 
 @media (min-width: 768px) {
   .cpRadio {
     display: grid;
+    gap: var(--cp-spacing-lg) var(--cp-spacing-lg);
     grid-template-columns: min-content max-content minmax(0, 1fr) auto;
-    column-gap: var(--cp-spacing-lg);
-    row-gap: var(--cp-spacing-lg);
   }
 
   .cpRadio__item {
+    grid-column: 1 / -1;
     grid-template-columns: subgrid;
     grid-template-rows: auto;
-    grid-column: 1 / -1;
     row-gap: 0;
 
     input {
+      align-self: center;
       grid-column: auto;
       grid-row: auto;
-      align-self: center;
     }
 
     .cpRadio__label {
@@ -265,16 +259,16 @@ const computedClasses = computed(() => `cpRadio--is${capitalizeFirstLetter(props
     }
 
     .cpRadio__description {
+      min-width: 0;
       grid-column: auto;
       grid-row: auto;
-      min-width: 0;
     }
 
     .cpRadio__additionalData {
+      margin-left: var(--cp-spacing-xl);
       grid-column: auto;
       grid-row: auto;
       text-align: right;
-      margin-left: var(--cp-spacing-xl);
     }
   }
 }