Merge pull request #129 from birotaio/bugfix/build-types-and-vue-version

bugfix/build types and vue version

.eslintrc

@@ -4,7 +4,10 @@
     "es2021": true
   },
   "parser": "vue-eslint-parser",
-  "plugins": ["eslint-plugin-import", "vue"],
+  "plugins": [
+    "eslint-plugin-import",
+    "vue"
+  ],
   "extends": [
     "plugin:@typescript-eslint/recommended",
     "plugin:vue/vue3-recommended",
@@ -14,34 +17,84 @@
     "plugin:import/typescript",
     "plugin:vuejs-accessibility/recommended"
   ],
-
-  "ignorePatterns": ["auto-imports.d.ts", "components.d.ts", "dist", "scripts"],
+  "ignorePatterns": [
+    "auto-imports.d.ts",
+    "components.d.ts",
+    "dist",
+    "scripts"
+  ],
   "overrides": [
     {
-      "files": ["stories/**"],
+      "files": [
+        "**/*.vue"
+      ],
+      "rules": {
+        "vue/no-required-prop-with-default": "error",
+        "vue/require-explicit-emits": "off",
+        "vue/no-deprecated-v-bind-sync": "off",
+        "vue-pug-sfc/component-name-in-template-casing": "off",
+        "vue/no-v-for-template-key-on-child": "off",
+        "vue/no-reserved-component-names": "off",
+        "vue/v-on-event-hyphenation": "off",
+        "vue/no-deprecated-functional-template": "off",
+        "vue/no-deprecated-destroyed-lifecycle": "off",
+        "vue/no-deprecated-v-on-native-modifier": "off",
+        "vue/no-deprecated-filter": "off",
+        "vue/no-deprecated-dollar-listeners-api": "off",
+        "vue/html-quotes": "off",
+        "vue/no-deprecated-dollar-scopedslots-api": "off",
+        "vue/valid-v-slot": "off",
+        "vue/require-slots-as-functions": "off",
+        "vue/require-prop-comment": [
+          "warn",
+          {
+            "type": "JSDoc"
+          }
+        ]
+      }
+    },
+    {
+      "files": [
+        "stories/**"
+      ],
       "rules": {
         "@typescript-eslint/explicit-function-return-type": "off"
       }
     },
     {
-      "files": ["**/*.ts", "**/*.d.ts"],
+      "files": [
+        "**/*.ts",
+        "**/*.d.ts"
+      ],
       "parser": "@typescript-eslint/parser",
       "settings": {
         "import/parsers": {
-          "@typescript-eslint/parser": [".ts", ".d.ts"]
+          "@typescript-eslint/parser": [
+            ".ts",
+            ".d.ts"
+          ]
         }
       },
       "rules": {
         "@typescript-eslint/naming-convention": [
           "error",
           {
             "selector": "variableLike",
-            "format": ["camelCase", "UPPER_CASE", "PascalCase"],
+            "format": [
+              "camelCase",
+              "UPPER_CASE",
+              "PascalCase"
+            ],
             "leadingUnderscore": "allowSingleOrDouble"
           },
           {
-            "selector": ["typeLike", "enumMember"],
-            "format": ["PascalCase"]
+            "selector": [
+              "typeLike",
+              "enumMember"
+            ],
+            "format": [
+              "PascalCase"
+            ]
           }
         ]
       }
@@ -56,12 +109,19 @@
   "rules": {
     "@typescript-eslint/no-unused-vars": [
       "warn",
-      { "argsIgnorePattern": "^_", "varsIgnorePattern": "^_" }
+      {
+        "argsIgnorePattern": "^_",
+        "varsIgnorePattern": "^_"
+      }
     ],
     "vue/component-tags-order": [
       "error",
       {
-        "order": ["template", "style", "script"]
+        "order": [
+          "template",
+          "style",
+          "script"
+        ]
       }
     ],
     "vue/no-v-html": "error",

.prettierrc

@@ -1,4 +1,7 @@
 {
+  "plugins": [
+    "@prettier/plugin-pug"
+  ],
   "trailingComma": "es5",
   "tabWidth": 2,
   "semi": true,

CHANGELOG.md

@@ -1,8 +1,9 @@
-## 0.24.2 (September 24, 2024)
+## 0.25.0 (September 24, 2024)
 
 ### Changes
 
 - [Chore] Upgrade dependencies to fix security vulnerabilities
+- [Chore] Upgrade Vue to version 3.5, use `useId` [BREAKING]
 - [Storybook] Migrate from version 7 to version 8
 
 ## 0.24.1 (June 20, 2024)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fifteen/design-system-vue",
-  "version": "0.24.2",
+  "version": "0.25.0",
   "description": "Vue 3 (Composition API + Typescript) implementation of the Fifteen Design System",
   "repository": {
     "type": "git",
@@ -108,7 +108,7 @@
   "devDependencies": {
     "@fifteen/shared-lib": "^0.18.1",
     "@fifteen/tooling": "^0.6.3",
-    "@prettier/plugin-pug": "^3.0.0",
+    "@prettier/plugin-pug": "^3.1.0",
     "@qnp/lus": "^0.4.1",
     "@storybook/addon-essentials": "^8.3.3",
     "@storybook/addon-links": "^8.3.3",

src/.generated/icons.ts

@@ -89,7 +89,7 @@ export const landmark: string = `<svg viewBox="0 0 24 24"><path d="M21.438 7.679
 export const landscape: string = `<svg viewBox="0 0 24 24"><path d="M17.5 4A4.5 4.5 0 0122 8.5v7a4.5 4.5 0 01-4.5 4.5h-11A4.5 4.5 0 012 15.5v-7A4.5 4.5 0 016.5 4zm0 1h-11A3.5 3.5 0 003 8.5v7A3.5 3.5 0 006.5 19h11a3.5 3.5 0 003.5-3.5v-7A3.5 3.5 0 0017.5 5zM6.663 12.606a2.212 2.212 0 013.72-.827l.947 1.012a.9.9 0 001.272.043l.16-.16a1.519 1.519 0 012.384.48l1.305 2.744a.5.5 0 01-.451.715H6.048a.5.5 0 01-.475-.655zm2.359-.502c-.6-.13-1.214.214-1.408.81l-.878 2.698h8.472l-.965-2.028a.519.519 0 00-.073-.113l-.046-.048a.519.519 0 00-.733.034l-.107.108a1.9 1.9 0 01-2.684-.09l-.947-1.013a1.212 1.212 0 00-.511-.325zM16 8a2 2 0 110 4 2 2 0 010-4zm0 1a1 1 0 100 2 1 1 0 000-2z"/></svg>`;
 export const laugh: string = `<svg viewBox="0 0 24 24"><path d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm0 1a9 9 0 100 18 9 9 0 000-18zm2.994 10.64a1.555 1.555 0 01.761 2.911l-1.553.871a4.5 4.5 0 01-4.423-.012l-1.515-.86a1.556 1.556 0 01.768-2.91zm0 1H9.032a.556.556 0 00-.275 1.04l1.516.86a3.5 3.5 0 003.44.01l1.553-.871a.555.555 0 00-.272-1.04zM8.5 8a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm7 0a1.5 1.5 0 110 3 1.5 1.5 0 010-3z"/></svg>`;
 export const link: string = `<svg viewBox="0 0 24 24"><path d="M14 9v1h-2a3 3 0 00-2.995 2.824L9 13v2a3 3 0 002.824 2.995L12 18h6a3 3 0 002.995-2.824L21 15v-2a3 3 0 00-2.824-2.995L18 10h-1V9h1a4 4 0 014 4v2a4 4 0 01-4 4h-6a4 4 0 01-4-4v-2a4 4 0 014-4h2zm-2-4a4 4 0 014 4v2a4 4 0 01-4 4h-2v-1h2a3 3 0 002.995-2.824L15 11V9a3 3 0 00-2.824-2.995L12 6H6a3 3 0 00-2.995 2.824L3 9v2a3 3 0 002.824 2.995L6 14h1v1H6a4 4 0 01-4-4V9a4 4 0 014-4h6z"/></svg>`;
-export const linkedinVariant: string = `<svg viewBox="0 0 24 24"><path d="M22.223.334H1.772C.792.334 0 1.107 0 2.064V22.6c0 .956.792 1.734 1.772 1.734h20.451c.98 0 1.777-.778 1.777-1.73V2.064c0-.957-.797-1.73-1.777-1.73zM7.12 20.785H3.558V9.33H7.12v11.456zM5.34 7.768a2.064 2.064 0 1 1 0-4.125 2.063 2.063 0 0 1 0 4.125zm15.112 13.017h-3.558v-5.568c0-1.327-.024-3.038-1.852-3.038-1.851 0-2.133 1.449-2.133 2.944v5.662H9.356V9.33h3.413v1.566h.047c.473-.9 1.636-1.852 3.365-1.852 3.605 0 4.27 2.372 4.27 5.457v6.285z" fill="#fff"/></svg>`;
+export const linkedinVariant: string = `<svg viewBox="0 0 24 24"><path d="M22.223.334H1.772C.792.334 0 1.107 0 2.064V22.6c0 .956.792 1.734 1.772 1.734h20.451c.98 0 1.777-.778 1.777-1.73V2.064c0-.957-.797-1.73-1.777-1.73zM7.12 20.785H3.558V9.33H7.12v11.456zM5.34 7.768a2.064 2.064 0 1 1 0-4.125 2.063 2.063 0 0 1 0 4.125zm15.112 13.017h-3.558v-5.568c0-1.327-.024-3.038-1.852-3.038-1.851 0-2.133 1.449-2.133 2.944v5.662H9.356V9.33h3.413v1.566h.047c.473-.9 1.636-1.852 3.365-1.852 3.605 0 4.27 2.372 4.27 5.457v6.285z"/></svg>`;
 export const linkedin: string = `<svg viewBox="0 0 24 24"><path d="M3.23 8.678h3.86v11.77H3.23zM5.18 3.008a2.007 2.007 0 10-.03 4 2.007 2.007 0 10.03-4zM16.56 8.408a3.839 3.839 0 00-3.48 1.93v-1.66H9.22v11.77h3.79v-6.57a2.472 2.472 0 01.13-.95 2.1 2.1 0 012-1.44c1.44 0 2 1.08 2 2.66v6.3H21V13.7c0-3.612-1.9-5.292-4.44-5.292z"/></svg>`;
 export const locationArrow: string = `<svg viewBox="0 0 24 24"><path d="M16.844 3.723l-12.5 6.158a2.277 2.277 0 00.335 4.219l3.259 1.004a1.5 1.5 0 01.993.996l1.001 3.283a2.254 2.254 0 004.187.319l6.083-12.653a2.5 2.5 0 00-3.358-3.326zm2.45 1.58a1.5 1.5 0 01.007 1.313l-6.083 12.653a1.254 1.254 0 01-2.329-.178l-1.001-3.283a2.5 2.5 0 00-1.656-1.66l-3.258-1.004a1.277 1.277 0 01-.189-2.365L17.286 4.62a1.5 1.5 0 011.939.556l.07.127z"/></svg>`;
 export const lock: string = `<svg viewBox="0 0 24 24"><path d="M12 2a5 5 0 015 5v4h.5a2.5 2.5 0 012.495 2.336L20 13.5v6a2.5 2.5 0 01-2.5 2.5h-11A2.5 2.5 0 014 19.5v-6A2.5 2.5 0 016.5 11H7V7a5 5 0 014.783-4.995zm5.5 10h-11A1.5 1.5 0 005 13.5v6A1.5 1.5 0 006.5 21h11a1.5 1.5 0 001.5-1.5v-6a1.5 1.5 0 00-1.5-1.5zM12 14.5a1 1 0 01.5 1.867l.485 2.133h-2l.506-2.139A1 1 0 0112 14.5zM12 3a4 4 0 00-4 4v4h8V7a4 4 0 00-3.8-3.995z"/></svg>`;

src/components/FCreditCardIcon.vue

@@ -27,7 +27,7 @@ export interface FCreditCardIconProps {
   /**
    * Code of the country, following the ISO 3166 standard
    */
-  cardType: CreditCardBrandId | null;
+  cardType?: CreditCardBrandId | null;
   /**
    * Size of the credit card icon
    */

src/components/FFlagIcon.vue

@@ -30,7 +30,7 @@ export interface FFlagIconProps {
   /**
    * Code of the flag, following the ISO 3166 standard + regional flags (see /src/flags.ts for full list)
    */
-  flagCode: FlagCode;
+  flagCode?: FlagCode;
   /**
    * Size of the flag icon
    */

src/components/FGrid.vue

@@ -13,7 +13,7 @@
 
 <script setup lang="ts">
 import { genSize } from '@/utils/genSize';
-import { columns } from '@/constants/grid';
+import { columns as defaultColumns } from '@/constants/grid';
 
 export interface FGridProps {
   /**
@@ -27,7 +27,7 @@ export interface FGridProps {
 }
 
 const props = withDefaults(defineProps<FGridProps>(), {
-  columns,
+  columns: defaultColumns,
   gap: '4px',
 });
 

src/components/FMenu.vue

@@ -213,7 +213,7 @@ export interface FMenuProps {
   /**
    * Array of options
    */
-  options: FMenuOption[];
+  options?: FMenuOption[];
   /**
    * Prevent item selection
    */

src/components/form/FCheckbox.vue

@@ -141,7 +141,6 @@ FField.FCheckbox(
 
 <script setup lang="ts">
 import { getCssColor } from '@/utils/getCssColor';
-import { getUid } from '@/utils/uid';
 import { checkmark, checkboxIndeterminate } from '@/.generated/icons';
 
 import type { FFieldProps } from '@/components/form/FField.vue';
@@ -215,7 +214,7 @@ registerIcons('icons', {
   checkboxIndeterminate,
 });
 
-const id = computed(() => `checkbox-${getUid()}`);
+const id = useId();
 
 const checkboxRef = ref<HTMLElement>();
 

src/components/form/FPhoneInput.vue

@@ -243,6 +243,7 @@ const props = withDefaults(defineProps<FPhoneInputProps>(), {
 });
 
 const emit = defineEmits<{
+  (name: 'update:modelValue', value: string | null): void;
   (name: 'update:phoneNumber', value: string | null): void;
   (name: 'update:countryCode', value: CountryCode): void;
   (name: 'input', value: InputEvent): void;

src/components/form/FRadio.vue

@@ -124,7 +124,6 @@ FField.FRadio(
 
 <script setup lang="ts">
 import { getCssColor } from '@/utils/getCssColor';
-import { getUid } from '@/utils/uid';
 
 import type { FFieldProps } from '@/components/form/FField.vue';
 import type { CommonFormFieldProps } from '@/types/forms';
@@ -193,7 +192,7 @@ defineExpose<{
   focus,
 });
 
-const id = computed(() => `radio-${getUid()}`);
+const id = useId();
 
 const {
   isValid,

src/components/form/FSelect.vue

@@ -191,7 +191,7 @@ export interface FSelectProps
   /**
    * Array of options
    */
-  options: FMenuOption[];
+  options?: FMenuOption[];
   /**
    * Placeholder text
    */
@@ -357,8 +357,8 @@ const hintTextColor = computed(() =>
   props.disabled
     ? 'neutral--dark-1'
     : isValid.value
-      ? props.hintTextColor
-      : props.errorColor
+    ? props.hintTextColor
+    : props.errorColor
 );
 
 const iconClasses = computed(() => ({

src/components/form/FToggle.vue

@@ -156,7 +156,6 @@ FField.FToggle(
 
 <script setup lang="ts">
 import { getCssColor } from '@/utils/getCssColor';
-import { getUid } from '@/utils/uid';
 import { checkmark } from '@/.generated/icons';
 
 import type { FFieldProps } from '@/components/form/FField.vue';
@@ -236,7 +235,7 @@ defineExpose<{
 
 registerIcons('icons', { checkmark });
 
-const id = computed(() => `toggle-${getUid()}`);
+const id = useId();
 
 const toggleRef = ref<HTMLElement>();
 

yarn.lock

@@ -463,7 +463,7 @@ __metadata:
   dependencies:
     "@fifteen/shared-lib": ^0.18.1
     "@fifteen/tooling": ^0.6.3
-    "@prettier/plugin-pug": ^3.0.0
+    "@prettier/plugin-pug": ^3.1.0
     "@qnp/lus": ^0.4.1
     "@storybook/addon-essentials": ^8.3.3
     "@storybook/addon-links": ^8.3.3
@@ -926,7 +926,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@prettier/plugin-pug@npm:^3.0.0":
+"@prettier/plugin-pug@npm:^3.1.0":
   version: 3.1.0
   resolution: "@prettier/plugin-pug@npm:3.1.0"
   dependencies: