@citizenplane/pimp 18.9.3 → 18.9.5

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "18.9.3",
+  "version": "18.9.5",
   "scripts": {
     "dev": "storybook dev -p 8081",
     "build-storybook": "storybook build --output-dir ./docs",
-    "build": "vite build && vite build --config vite.resolver.config.cjs",
+    "build": "vite build && vite build --config vite.resolver.config.js",
     "lint": "biome check .",
     "lint:fix": "biome check --write .",
     "lint:style": "stylelint \"**/*.{css,scss,vue}\"",
@@ -52,54 +52,54 @@
     "feather-icons": "^4.29.2",
     "floating-vue": "^5.2.2",
     "luxon": "^3.7.2",
-    "maska": "^3.1.1",
+    "maska": "^3.2.0",
     "modern-normalize": "^3.0.1",
-    "primevue": "^4.5.4",
-    "vue": "^3.5.34",
+    "primevue": "^4.5.5",
+    "vue": "^3.5.38",
     "vue-bind-once": "^0.2.1",
-    "vue-tel-input": "^9.5.0",
+    "vue-tel-input": "^9.8.0",
     "web-haptics": "^0.0.6"
   },
   "devDependencies": {
-    "@babel/core": "^7.28.6",
-    "@biomejs/biome": "2.4.16",
-    "@commitlint/cli": "20.5.3",
-    "@storybook/addon-docs": "^10.3.6",
-    "@storybook/addon-onboarding": "^10.3.6",
-    "@storybook/addon-vitest": "^10.3.6",
+    "@babel/core": "^7.29.7",
+    "@biomejs/biome": "2.5.1",
+    "@commitlint/cli": "21.1.0",
+    "@storybook/addon-docs": "^10.4.6",
+    "@storybook/addon-onboarding": "^10.4.6",
+    "@storybook/addon-vitest": "^10.4.6",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/vue3-vite": "^10.3.6",
+    "@storybook/vue3-vite": "^10.4.6",
     "@types/feather-icons": "^4.29.4",
     "@types/vue-tel-input": "^9.7.91",
-    "@vitejs/plugin-vue": "^6.0.3",
-    "@vitest/browser": "^4.0.18",
-    "@vitest/coverage-v8": "^4.0.18",
-    "@vue/babel-preset-app": "^5.0.8",
-    "@vue/test-utils": "^2.4.10",
+    "@vitejs/plugin-vue": "^6.0.7",
+    "@vitest/browser": "^4.1.9",
+    "@vitest/coverage-v8": "^4.1.9",
+    "@vue/babel-preset-app": "^5.0.9",
+    "@vue/test-utils": "^2.4.11",
     "@vue/vue3-jest": "^29.2.6",
     "babel-core": "^7.0.0-bridge.0",
     "commitlint-config-gitmoji": "2.3.1",
     "husky": "^9.1.7",
     "jest": "~29.7.0",
-    "jest-environment-jsdom": "^30.2.0",
-    "lint-staged": "^17.0.0",
-    "playwright": "^1.58.0",
-    "sass": "~1.99.0",
-    "sass-loader": "^16.0.6",
-    "storybook": "^10.3.5",
-    "stylelint": "16.26.1",
+    "jest-environment-jsdom": "^30.4.1",
+    "lint-staged": "^17.0.8",
+    "playwright": "^1.61.0",
+    "sass": "~1.101.0",
+    "sass-loader": "^16.0.8",
+    "storybook": "^10.4.6",
+    "stylelint": "17.13.0",
     "stylelint-config-html": "1.1.0",
     "stylelint-config-idiomatic-order": "10.0.0",
-    "stylelint-config-recommended-scss": "16.0.2",
+    "stylelint-config-recommended-scss": " 17.0.1",
     "stylelint-config-recommended-vue": "1.6.1",
-    "stylelint-config-standard-scss": "16.0.0",
-    "stylelint-order": "7.0.1",
-    "ts-jest": "^29.4.6",
-    "unplugin-vue-components": "^32.0.0",
-    "vite": "^7.3.2",
-    "vite-plugin-dts": "^5.0.0",
-    "vitest": "^4.0.18",
-    "vue-tsc": "3.2.8"
+    "stylelint-config-standard-scss": "17.0.0",
+    "stylelint-order": "8.1.1",
+    "ts-jest": "^29.4.11",
+    "unplugin-vue-components": "^32.1.0",
+    "vite": "^8.1.0",
+    "vite-plugin-dts": "^5.0.2",
+    "vitest": "^4.1.9",
+    "vue-tsc": "3.3.5"
   },
   "engines": {
     "npm": "11",

package/src/assets/styles/helpers/_functions.scss

@@ -1,5 +1,5 @@
 // Sass function to convert px into rem
-@use 'sass:math';
+@use "sass:math";
 
 // Defining base font size
 // The default font size for html is 16px

package/src/assets/styles/helpers/_mixins.scss

@@ -1,4 +1,4 @@
-@use '../helpers/functions' as fn;
+@use "../helpers/functions" as fn;
 
 // Popover
 @mixin popover-desktop($transitionName) {
@@ -42,9 +42,7 @@
 
 @mixin v-dropdown-transition() {
   .v-popper__wrapper {
-    transition:
-      scale 200ms var(--cp-easing-elastic),
-      opacity 200ms ease;
+    transition: scale 200ms var(--cp-easing-elastic), opacity 200ms ease;
   }
 
   .v-popper__popper--hidden .v-popper__wrapper {

package/src/assets/styles/utilities/_index.scss

@@ -1,4 +1,4 @@
-@use '../helpers/functions' as fn;
+@use "../helpers/functions" as fn;
 
 .u-text-ellipsis,
 %u-text-ellipsis {
@@ -23,7 +23,7 @@
   line-height: normal;
 
   &::after {
-    content: ' ';
+    content: " ";
   }
 }
 
@@ -54,15 +54,7 @@ label .u-asterisk {
     radial-gradient(farthest-side at 100% 50%, #3e3e5b33, #3e3e5b00) 0 100%;
   background-attachment: local, local, scroll, scroll;
   background-color: var(--cp-background-primary);
-  background-position:
-    0 0,
-    100%,
-    0 0,
-    100%;
+  background-position: 0 0, 100%, 0 0, 100%;
   background-repeat: no-repeat;
-  background-size:
-    40px 100%,
-    40px 100%,
-    14px 100%,
-    14px 100%;
+  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
 }

package/src/components/CpButton.vue

@@ -1,4 +1,5 @@
 <template>
+  <!-- biome-ignore lint/a11y/useSemanticElements: <can be button or link> -->
   <component
     :is="tag"
     :aria-disabled="isButtonDisabled"
@@ -115,10 +116,12 @@ const handleClick = (event: MouseEvent) => {
         background-color: $hoverBackgroundColor;
       }
 
-      &:focus,
       &:focus-visible,
       &:active {
         background-color: $hoverBackgroundColor;
+      }
+
+      &:focus-visible {
         outline: fn.px-to-rem(2) solid $hoverBackgroundColor;
       }
     }
@@ -141,10 +144,12 @@ const handleClick = (event: MouseEvent) => {
           0 0 0 var(--cp-dimensions-0_25) var(--cp-border-soft-hover);
       }
 
-      &:focus,
       &:focus-visible,
       &:active {
         background-color: var(--cp-background-primary-hover);
+      }
+
+      &:focus-visible {
         outline: fn.px-to-rem(2) solid var(--cp-background-primary-hover);
       }
     }
@@ -162,10 +167,12 @@ const handleClick = (event: MouseEvent) => {
         color: $hoverColor;
       }
 
-      &:focus,
       &:focus-visible,
       &:active {
         color: $hoverColor;
+      }
+
+      &:focus-visible {
         outline: fn.px-to-rem(2) solid $color;
       }
     }
@@ -180,7 +187,7 @@ const handleClick = (event: MouseEvent) => {
   line-height: var(--cp-line-height-md);
   outline-offset: fn.px-to-rem(2);
   text-decoration: none;
-  transition-duration: 150ms;
+  transition-duration: 250ms;
   transition-property: box-shadow, background-color, transform, width;
   transition-timing-function: ease;
 
@@ -196,12 +203,8 @@ const handleClick = (event: MouseEvent) => {
     color: var(--cp-text-primary);
   }
 
-  &:hover {
-    transform: translateY(fn.px-to-rem(-1));
-  }
-
   &:active {
-    transform: translateY(fn.px-to-rem(1));
+    transform: scale3d(0.97, 0.97, 1);
   }
 
   // Primary appearance

package/src/components/CpButtonToggle.vue

@@ -88,18 +88,17 @@ const handleClick = (event: MouseEvent) => {
     color: var(--cp-text-disabled);
     cursor: not-allowed;
   }
-  
+
   &:hover:not(:disabled) {
     background-color: var(--cp-background-primary-hover);
     box-shadow:
       var(--cp-shadows-3xs-inset),
       0 0 0 var(--cp-dimensions-0_25) var(--cp-border-soft-hover);
     color: var(--cp-text-secondary-hover);
-    transform: translateY(fn.px-to-rem(-1));
   }
 
   &:active:not(:disabled) {
-    transform: translateY(fn.px-to-rem(1));
+    transform: scale3d(0.97, 0.97, 1);
   }
 
   &__leading {

package/src/components/CpCalendar.vue

@@ -64,7 +64,7 @@
             </div>
           </div>
           <div key="action" class="asd__recurency--action">
-            <cp-button class="asd__button-switch" @click.stop="isDaysDisplayed ? removeRecurency() : addRecurency()">
+            <cp-button class="asd__button-switch" @click.stop="handleRecurency">
               {{ isDaysDisplayed ? 'Remove recurency' : 'Add recurency' }}
             </cp-button>
             <cp-button
@@ -181,6 +181,14 @@ const toggleDay = (index: number): void => {
   emitToParent()
 }
 
+const handleRecurency = (): void => {
+  if (isDaysDisplayed.value) {
+    removeRecurency()
+  } else {
+    addRecurency()
+  }
+}
+
 const addRecurency = (): void => {
   const dt = DateTime.local()
   mode.value = 'range'
@@ -200,11 +208,11 @@ const removeRecurency = (): void => {
 
 const emitToParent = (): void => {
   let dates = [dateOne.value]
-  
+
   if (isDaysDisplayed.value) {
     dates = recurenceDates.value.length ? datesToStringArray(recurenceDates.value) : []
   }
-  
+
   emit('dates', dates)
 }
 

package/src/components/CpSelectableButton.vue

@@ -5,7 +5,6 @@
     class="cpSelectableButton"
     :class="dynamicClasses"
     :disabled="disabled"
-    role="button"
     type="button"
     @click="emit('click', $event)"
   >
@@ -135,7 +134,6 @@ const dynamicClasses = computed(() => {
       var(--cp-selectable-box-shadow),
       0 0 0 var(--cp-dimensions-0_25) var(--cp-selectable-border-color-hover);
     color: var(--cp-selectable-text-color-hover);
-    transform: translateY(var(--cp-dimensions-minus-0_25));
 
     & > .cpSelectableButton__body {
       background-color: var(--cp-selectable-body-background-color-hover);
@@ -143,7 +141,7 @@ const dynamicClasses = computed(() => {
   }
 
   &:active:not(.cpSelectableButton--isDisabled) {
-    transform: translateY(var(--cp-dimensions-0_25));
+    transform: scale3d(0.97, 0.97, 1);
   }
 
   &__icon i,

package/src/components/CpTable.vue

@@ -5,7 +5,6 @@
       :aria-labelledby="uniqueId"
       class="cpTable__container"
       :class="containerClasses"
-      role="region"
       tabindex="0"
     >
       <table class="cpTable__table">

package/vite.config.js

@@ -0,0 +1,62 @@
+import vue from '@vitejs/plugin-vue'
+import path from 'path'
+import { defineConfig } from 'vite'
+import dts from 'vite-plugin-dts'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+    dts({
+      tsconfigPath: path.resolve(__dirname, 'tsconfig.build.json'),
+      // Types for the package root are resolved via package.json "types"
+      // pointing at dist/components/index.d.ts (library entry lives there).
+      insertTypesEntry: false,
+    }),
+  ],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'src'),
+    },
+  },
+  server: {
+    port: 8080,
+  },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        additionalData: `
+        @use "sass:math";
+        @use '@/assets/styles/helpers/functions' as fn;
+        @use '@/assets/styles/helpers/mixins' as mx;
+        @use '@/assets/styles/utilities';`,
+        api: 'modern-compiler',
+      },
+    },
+  },
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, 'src/components/index.ts'),
+      name: 'Pimp',
+      fileName: (format) => `pimp.${format}.js`,
+      cssFileName: 'style',
+    },
+    rollupOptions: {
+      // make sure to externalize deps that shouldn't be bundled
+      // into your library
+      external: ['vue'],
+      output: {
+        // Avoid emitting a separate chunk for dynamic imports (e.g. libphonenumber).
+        // A sibling chunk can declare top-level `var h` while the main entry imports
+        // `openBlock as h` from Vue; some downstream bundlers merge those scopes and
+        // hit "Identifier 'h' has already been declared".
+        codeSplitting: false,
+        // Provide global variables to use in the UMD build
+        // for externalized deps
+        globals: {
+          vue: 'Vue',
+        },
+      },
+    },
+  },
+})

package/vite.resolver.config.js

@@ -0,0 +1,20 @@
+import path from 'path'
+import { defineConfig } from 'vite'
+import dts from 'vite-plugin-dts'
+
+export default defineConfig({
+  plugins: [
+    dts({
+      tsconfigPath: path.resolve(__dirname, 'tsconfig.resolver.json'),
+      insertTypesEntry: false,
+    }),
+  ],
+  build: {
+    emptyOutDir: false,
+    lib: {
+      entry: path.resolve(__dirname, 'src/resolver.ts'),
+      fileName: () => 'resolver.js',
+      formats: ['es'],
+    },
+  },
+})

package/vitest.workspace.js

@@ -7,9 +7,9 @@ const dirname = typeof __dirname !== 'undefined' ? __dirname : path.dirname(file
 
 // More info at: https://storybook.js.org/docs/writing-tests/test-addon
 export default defineWorkspace([
-  'vite.config.cjs',
+  'vite.config.js',
   {
-    extends: 'vite.config.cjs',
+    extends: 'vite.config.js',
     plugins: [
       // The plugin will run tests for the stories defined in your Storybook config
       // See options at: https://storybook.js.org/docs/writing-tests/test-addon#storybooktest