@pequity/squirrel 5.4.0 → 5.4.2

package/dist/tailwind/config.js

@@ -8,71 +8,71 @@ exports.config = {
             transparent: 'transparent',
             current: 'currentColor',
             /* Design system colors */
-            white: '#fff',
-            black: '#000',
-            night: 'var(--color-night)',
-            'barley-white': 'var(--color-barley-white)',
-            'horses-neck': 'var(--color-horses-neck)',
-            'active-blue': 'var(--color-active-blue)',
+            white: 'rgb(var(--color-white))',
+            black: 'rgb(var(--color-black))',
+            night: 'rgb(var(--color-night))',
+            'barley-white': 'rgb(var(--color-barley-white))',
+            'horses-neck': 'rgb(var(--color-horses-neck))',
+            'active-blue': 'rgb(var(--color-active-blue))',
             /* Pequity colors */
             'p-gray': {
-                10: 'var(--color-p-gray-10)',
-                20: 'var(--color-p-gray-20)',
-                30: 'var(--color-p-gray-30)',
-                40: 'var(--color-p-gray-40)',
-                50: 'var(--color-p-gray-50)',
-                60: 'var(--color-p-gray-60)',
-                70: 'var(--color-p-gray-70)',
-                80: 'var(--color-p-gray-80)',
-                90: 'var(--color-p-gray-90)',
-                100: 'var(--color-p-gray-100)',
+                10: 'rgb(var(--color-p-gray-10))',
+                20: 'rgb(var(--color-p-gray-20))',
+                30: 'rgb(var(--color-p-gray-30))',
+                40: 'rgb(var(--color-p-gray-40))',
+                50: 'rgb(var(--color-p-gray-50))',
+                60: 'rgb(var(--color-p-gray-60))',
+                70: 'rgb(var(--color-p-gray-70))',
+                80: 'rgb(var(--color-p-gray-80))',
+                90: 'rgb(var(--color-p-gray-90))',
+                100: 'rgb(var(--color-p-gray-100))',
             },
             'p-blue': {
-                10: 'var(--color-p-blue-10)',
-                15: 'var(--color-p-blue-15)',
-                20: 'var(--color-p-blue-20)',
-                30: 'var(--color-p-blue-30)',
-                40: 'var(--color-p-blue-40)',
-                50: 'var(--color-p-blue-50)',
-                60: 'var(--color-p-blue-60)',
-                70: 'var(--color-p-blue-70)',
-                80: 'var(--color-p-blue-80)',
+                10: 'rgb(var(--color-p-blue-10))',
+                15: 'rgb(var(--color-p-blue-15))',
+                20: 'rgb(var(--color-p-blue-20))',
+                30: 'rgb(var(--color-p-blue-30))',
+                40: 'rgb(var(--color-p-blue-40))',
+                50: 'rgb(var(--color-p-blue-50))',
+                60: 'rgb(var(--color-p-blue-60))',
+                70: 'rgb(var(--color-p-blue-70))',
+                80: 'rgb(var(--color-p-blue-80))',
             },
             'p-purple': {
-                10: 'var(--color-p-purple-10)',
-                20: 'var(--color-p-purple-20)',
-                30: 'var(--color-p-purple-30)',
-                40: 'var(--color-p-purple-40)',
-                50: 'var(--color-p-purple-50)',
-                60: 'var(--color-p-purple-60)',
+                10: 'rgb(var(--color-p-purple-10))',
+                20: 'rgb(var(--color-p-purple-20))',
+                30: 'rgb(var(--color-p-purple-30))',
+                40: 'rgb(var(--color-p-purple-40))',
+                50: 'rgb(var(--color-p-purple-50))',
+                60: 'rgb(var(--color-p-purple-60))',
             },
             'p-green': {
-                10: 'var(--color-p-green-10)',
-                20: 'var(--color-p-green-20)',
-                30: 'var(--color-p-green-30)',
-                40: 'var(--color-p-green-40)',
-                50: 'var(--color-p-green-50)',
+                10: 'rgb(var(--color-p-green-10))',
+                20: 'rgb(var(--color-p-green-20))',
+                30: 'rgb(var(--color-p-green-30))',
+                40: 'rgb(var(--color-p-green-40))',
+                50: 'rgb(var(--color-p-green-50))',
             },
             'p-red': {
-                10: 'var(--color-p-red-10)',
-                20: 'var(--color-p-red-20)',
-                30: 'var(--color-p-red-30)',
-                40: 'var(--color-p-red-40)',
-                50: 'var(--color-p-red-50)',
+                10: 'rgb(var(--color-p-red-10))',
+                20: 'rgb(var(--color-p-red-20))',
+                30: 'rgb(var(--color-p-red-30))',
+                40: 'rgb(var(--color-p-red-40))',
+                50: 'rgb(var(--color-p-red-50))',
             },
             /* Aliases */
-            primary: 'var(--color-primary)',
-            accent: 'var(--color-accent)',
-            surface: 'var(--color-surface)',
-            'on-surface': 'var(--color-on-surface)',
-            error: 'var(--color-error)',
-            'on-error': 'var(--color-on-error)',
-            info: 'var(--color-info)',
-            'on-info': 'var(--color-on-info)',
-            success: 'var(--color-success)',
-            'on-success': 'var(--color-on-success)',
-            warning: 'var(--color-warning)',
-            'on-warning': 'var(--color-on-warning)',
+            primary: 'rgb(var(--color-primary))',
+            accent: 'rgb(var(--color-accent))',
+            surface: 'rgb(var(--color-surface))',
+            'on-surface': 'rgb(var(--color-on-surface))',
+            error: 'rgb(var(--color-error))',
+            'on-error': 'rgb(var(--color-on-error))',
+            info: 'rgb(var(--color-info))',
+            'on-info': 'rgb(var(--color-on-info))',
+            success: 'rgb(var(--color-success))',
+            'on-success': 'rgb(var(--color-on-success))',
+            warning: 'rgb(var(--color-warning))',
+            'on-warning': 'rgb(var(--color-on-warning))',
         },
         fontFamily: {
             sans: ['Inter', 'Helvetica', 'Arial', 'sans-serif'],
@@ -91,7 +91,7 @@ exports.config = {
         },
         extend: {
             borderColor: {
-                DEFAULT: 'var(--color-p-gray-30)',
+                DEFAULT: 'rgb(var(--color-p-gray-30))',
             },
             spacing: {
                 7.5: '1.875rem',

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@pequity/squirrel",
   "description": "Squirrel component library",
-  "version": "5.4.0",
-  "packageManager": "pnpm@9.11.0",
+  "version": "5.4.2",
+  "packageManager": "pnpm@9.12.1",
   "type": "module",
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -53,33 +53,33 @@
     "@commitlint/cli": "^19.5.0",
     "@commitlint/config-conventional": "^19.5.0",
     "@pequity/eslint-config": "^0.0.13",
-    "@playwright/test": "^1.47.2",
+    "@playwright/test": "^1.48.0",
     "@popperjs/core": "2.11.8",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-a11y": "^8.3.3",
-    "@storybook/addon-actions": "^8.3.3",
-    "@storybook/addon-essentials": "^8.3.3",
-    "@storybook/addon-interactions": "^8.3.3",
-    "@storybook/addon-links": "^8.3.3",
-    "@storybook/blocks": "^8.3.3",
-    "@storybook/manager-api": "^8.3.3",
-    "@storybook/test": "^8.3.3",
+    "@storybook/addon-a11y": "^8.3.5",
+    "@storybook/addon-actions": "^8.3.5",
+    "@storybook/addon-essentials": "^8.3.5",
+    "@storybook/addon-interactions": "^8.3.5",
+    "@storybook/addon-links": "^8.3.5",
+    "@storybook/blocks": "^8.3.5",
+    "@storybook/manager-api": "^8.3.5",
+    "@storybook/test": "^8.3.5",
     "@storybook/test-runner": "^0.19.1",
-    "@storybook/theming": "^8.3.3",
-    "@storybook/vue3": "^8.3.3",
-    "@storybook/vue3-vite": "^8.3.3",
+    "@storybook/theming": "^8.3.5",
+    "@storybook/vue3": "^8.3.5",
+    "@storybook/vue3-vite": "^8.3.5",
     "@tanstack/vue-virtual": "3.10.8",
     "@types/jsdom": "^21.1.7",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^22.7.3",
+    "@types/node": "^22.7.5",
     "@vitejs/plugin-vue": "^5.1.4",
-    "@vitest/coverage-v8": "^2.1.1",
-    "@vue/compiler-sfc": "3.4.38",
+    "@vitest/coverage-v8": "^2.1.3",
+    "@vue/compiler-sfc": "3.5.12",
     "@vue/test-utils": "^2.4.6",
     "autoprefixer": "^10.4.20",
     "dayjs": "1.11.13",
-    "eslint": "^8.57.0",
+    "eslint": "^8.57.1",
     "eslint-plugin-storybook": "^0.9.0",
     "floating-vue": "5.2.2",
     "glob": "^11.0.0",
@@ -94,16 +94,16 @@
     "prettier-plugin-tailwindcss": "^0.6.8",
     "resolve-tspaths": "^0.8.22",
     "rimraf": "^6.0.1",
-    "sass": "^1.79.3",
-    "semantic-release": "^24.1.1",
-    "storybook": "^8.3.3",
+    "sass": "^1.79.5",
+    "semantic-release": "^24.1.2",
+    "storybook": "^8.3.5",
     "svgo": "^3.3.2",
     "tailwindcss": "^3.4.13",
-    "typescript": "5.6.2",
+    "typescript": "5.6.3",
     "v-calendar": "3.1.2",
-    "vite": "^5.4.8",
-    "vitest": "^2.1.1",
-    "vue": "3.4.38",
+    "vite": "^5.4.9",
+    "vitest": "^2.1.3",
+    "vue": "3.5.12",
     "vue-currency-input": "3.1.0",
     "vue-router": "4.4.5",
     "vue-toastification": "2.0.0-rc.5",

package/squirrel/assets/squirrel.css

@@ -4,48 +4,48 @@
 
 :root {
   /* Design system colors */
-  --color-white: #fff;
-  --color-black: #000;
-  --color-night: #1a123b;
-  --color-barley-white: #fff5ce;
-  --color-horses-neck: #634816;
-  --color-active-blue: #0f45af;
+  --color-white: 255 255 255;
+  --color-black: 0 0 0;
+  --color-night: 26 18 59;
+  --color-barley-white: 255 245 206;
+  --color-horses-neck: 99 72 22;
+  --color-active-blue: 15 69 175;
   /* Pequity Colors */
-  --color-p-gray-10: #f5f5fa;
-  --color-p-gray-20: #e4e3e7;
-  --color-p-gray-30: #d6d4dc;
-  --color-p-gray-40: #918da1;
-  --color-p-gray-50: #767189;
-  --color-p-gray-60: #5e5a6e;
-  --color-p-gray-70: #474452;
-  --color-p-gray-80: #2f2d37;
-  --color-p-gray-90: #232229;
-  --color-p-gray-100: #0c0b0e;
-  --color-p-blue-10: #f5f5fa;
-  --color-p-blue-15: #e4edfa;
-  --color-p-blue-20: #e4e4f0;
-  --color-p-blue-30: #9999c9;
-  --color-p-blue-40: #6666ae;
-  --color-p-blue-50: #333393;
-  --color-p-blue-60: #000078;
-  --color-p-blue-70: #000060;
-  --color-p-blue-80: #000048;
-  --color-p-purple-10: #cdc5ed;
-  --color-p-purple-20: #a9a1c9;
-  --color-p-purple-30: #978fb8;
-  --color-p-purple-40: #857da6;
-  --color-p-purple-50: #625a82;
-  --color-p-purple-60: #1a123b;
-  --color-p-green-10: #e9f8f2;
-  --color-p-green-20: #bee9d7;
-  --color-p-green-30: #7dd2ae;
-  --color-p-green-40: #27b478;
-  --color-p-green-50: #176c48;
-  --color-p-red-10: #fef3f3;
-  --color-p-red-20: #f8b8b4;
-  --color-p-red-30: #f48882;
-  --color-p-red-40: #f45148;
-  --color-p-red-50: #f0453c;
+  --color-p-gray-10: 245 245 250;
+  --color-p-gray-20: 228 227 231;
+  --color-p-gray-30: 214 212 220;
+  --color-p-gray-40: 145 141 161;
+  --color-p-gray-50: 118 113 137;
+  --color-p-gray-60: 94 90 110;
+  --color-p-gray-70: 71 68 82;
+  --color-p-gray-80: 47 45 55;
+  --color-p-gray-90: 35 34 41;
+  --color-p-gray-100: 12 11 14;
+  --color-p-blue-10: 245 245 250;
+  --color-p-blue-15: 228 237 250;
+  --color-p-blue-20: 228 228 240;
+  --color-p-blue-30: 153 153 201;
+  --color-p-blue-40: 102 102 174;
+  --color-p-blue-50: 51 51 147;
+  --color-p-blue-60: 0 0 120;
+  --color-p-blue-70: 0 0 96;
+  --color-p-blue-80: 0 0 72;
+  --color-p-purple-10: 205 197 237;
+  --color-p-purple-20: 169 161 201;
+  --color-p-purple-30: 151 143 184;
+  --color-p-purple-40: 133 125 166;
+  --color-p-purple-50: 98 90 130;
+  --color-p-purple-60: 26 18 59;
+  --color-p-green-10: 233 248 242;
+  --color-p-green-20: 190 233 215;
+  --color-p-green-30: 125 210 174;
+  --color-p-green-40: 39 180 120;
+  --color-p-green-50: 23 108 72;
+  --color-p-red-10: 254 243 243;
+  --color-p-red-20: 248 184 180;
+  --color-p-red-30: 244 136 130;
+  --color-p-red-40: 244 81 72;
+  --color-p-red-50: 240 69 60;
   /* Aliases */
   --color-primary: var(--color-p-blue-60);
   --color-accent: var(--color-p-blue-70);

package/squirrel/components/p-alert/p-alert.spec.js

@@ -14,7 +14,7 @@ describe('PAlert.vue', () => {
     const path = wrapper.find('path');
 
     expect(classes.every((c) => alert.classes().includes(c))).toBe(true);
-    expect(path.attributes().fill).toBe(`var(--color-on-${type})`);
+    expect(path.attributes().fill).toBe(`rgb(var(--color-on-${type}))`);
   });
 
   it('renders slots for icon and content', async () => {

package/squirrel/components/p-btn/p-btn.spec.js

@@ -14,6 +14,18 @@ const ELEMENTS_MAP = {
   section: { name: 'home', params: { id: 1 } },
 };
 
+const DEFAULT_CLASSES_ARRAY = [
+  'relative',
+  'inline-block',
+  'outline-none',
+  'disabled:opacity-50',
+  'disabled:cursor-default',
+  'disabled:pointer-events-none',
+  'aria-disabled:opacity-50',
+  'aria-disabled:cursor-default',
+  'aria-disabled:pointer-events-none',
+];
+
 describe('PBtn.vue', () => {
   Object.keys(ELEMENTS_MAP).forEach((el) => {
     const to = ELEMENTS_MAP[el];
@@ -66,6 +78,7 @@ describe('PBtn.vue', () => {
       const element = await wrapper.find(el);
 
       expect(classes.every((c) => element.classes().includes(c))).toBe(true);
+      expect(DEFAULT_CLASSES_ARRAY.every((c) => element.classes().includes(c))).toBe(true);
     });
   });
 
@@ -81,26 +94,42 @@ describe('PBtn.vue', () => {
     expect(button.text()).toContain(`This is a button`);
   });
 
-  it('gets disabled when the disabled attr is set to true', async () => {
+  it.each([
+    ['button', undefined],
+    ['a', 'https://pequity.com/'],
+    ['a', { name: 'home', params: { id: 1 } }],
+  ])('gets disabled when the element is a %s and points to %s', async (el, to) => {
     const wrapper = createWrapperFor(PBtn, {
+      props: {
+        to,
+      },
       attrs: {
         disabled: true,
       },
+      global: {
+        stubs: { RouterLink: { template: '<a class="router-link-stub"><slot /></a>' } },
+      },
     });
 
-    const button = await wrapper.find('button');
+    const button = await wrapper.find(el);
 
     await button.trigger('click');
 
-    expect(wrapper.emitted().click).toBeFalsy();
+    if (el === 'button') {
+      expect(wrapper.emitted().click).toBeFalsy();
+    }
     expect(button.attributes()).toHaveProperty('disabled');
+    expect(button.attributes()['aria-disabled']).toBe('true');
 
     await wrapper.setProps({ disabled: false });
 
     await button.trigger('click');
 
-    expect(wrapper.emitted().click[0][0] instanceof MouseEvent).toBe(true);
+    if (el === 'button') {
+      expect(wrapper.emitted().click[0][0] instanceof MouseEvent).toBe(true);
+    }
     expect(button.attributes()).not.toHaveProperty('disabled');
+    expect(button.attributes()['aria-disabled']).toBe('false');
   });
 
   it('has a loading state', async () => {

package/squirrel/components/p-btn/p-btn.vue

@@ -5,6 +5,8 @@
     :href="sanitizeUrl(to)"
     target="_blank"
     :class="classes"
+    :disabled="!!$attrs.disabled ? true : null"
+    :aria-disabled="!!$attrs.disabled"
   >
     <slot></slot>
   </a>
@@ -16,7 +18,8 @@
     :aria-selected="selected"
     :class="classes"
     v-bind="$attrs"
-    :disabled="($attrs.disabled as boolean) || loading"
+    :disabled="!!$attrs.disabled || loading ? true : null"
+    :aria-disabled="$attrs.disabled"
   >
     <div :class="{ invisible: loading }"><slot></slot></div>
     <PRingLoader
@@ -57,7 +60,7 @@ type ButtonNativeType = (typeof BUTTON_NATIVE_TYPES)[number];
 type ButtonTypeKeys = keyof typeof BUTTON_TYPES;
 type ButtonType = (typeof BUTTON_TYPES)[ButtonTypeKeys];
 
-const DEFAULT_CLASSES = `relative inline-block outline-none disabled:opacity-50 disabled:cursor-default disabled:pointer-events-none`;
+const DEFAULT_CLASSES = `relative inline-block outline-none disabled:opacity-50 disabled:cursor-default disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-default aria-disabled:pointer-events-none`;
 
 type ButtonClass = {
   [key in ButtonType]: string;

package/squirrel/components/p-date-picker/p-date-picker.vue

@@ -15,10 +15,9 @@
       :timezone="timezone"
     >
       <template #default="{ inputValue, inputEvents }">
-        <input
-          :class="[inputClasses, { 'cursor-pointer': !attrs.disabled }]"
+        <PInput
           :value="inputValue"
-          v-bind="attrs"
+          v-bind="attrsWithoutClassAndStyle"
           :placeholder="displayPlaceholder"
           v-on="inputEvents"
         />
@@ -28,12 +27,18 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import PInput from '@squirrel/components/p-input/p-input.vue';
 import dayjs from 'dayjs';
-import inputClassesMixin from '@squirrel/utils/inputClassesMixin';
 import { DatePicker } from 'v-calendar';
-import { type PropType, type StyleValue, defineComponent } from 'vue';
+import { type StyleValue, computed, nextTick, ref, useAttrs, watch } from 'vue';
 import { isDate, isString } from 'lodash-es';
+import { useInputClasses } from '@squirrel/composables/useInputClasses';
+
+defineOptions({
+  name: 'PDatePicker',
+  inheritAttrs: false,
+});
 
 // The type of the select attribute is defined in node_modules/v-calendar/dist/types/src/utils/attribute.d.ts
 // but there was no way to import it, so as a workaround we cast the selectAttribute as `any`.
@@ -47,87 +52,75 @@ const DEFAULT_MASKS = {
   data: 'YYYY-MM-DD',
 };
 
-export default defineComponent({
-  name: 'PDatePicker',
-  components: {
-    DatePicker,
-  },
-  mixins: [inputClassesMixin],
-  inheritAttrs: false,
-  props: {
-    modelValue: {
-      type: String as PropType<string | null | undefined>,
-      default: '',
-    },
-    label: {
-      type: String,
-      default: '',
-    },
-    errorMsg: {
-      type: String,
-      default: '',
-    },
-    required: {
-      type: Boolean,
-      default: false,
-    },
-    minDate: {
-      type: Date,
-      default: null,
-    },
-    maxDate: {
-      type: Date,
-      default: null,
-    },
-    timezone: {
-      type: String,
-      default: '',
-    },
-  },
-  emits: ['update:modelValue'],
-  data() {
-    return {
-      // innerValue is a Date object
-      innerValue: null as Date | null,
-      stopWatch: false,
-      selectAttribute,
-    };
-  },
-  computed: {
-    displayPlaceholder(): string {
-      return isString(this.$attrs.placeholder) ? this.$attrs.placeholder : this.masks.input;
-    },
-    masks() {
-      return Object.assign(DEFAULT_MASKS, this.$attrs.masks);
-    },
-    attrs() {
-      const { class: classes, style, ...rest } = this.$attrs;
+type Props = {
+  modelValue?: string | null;
+  label?: string;
+  errorMsg?: string;
+  required?: boolean;
+  minDate?: Date | null;
+  maxDate?: Date | null;
+  timezone?: string;
+};
 
-      return rest;
-    },
-    style() {
-      return this.$attrs.style as StyleValue;
-    },
-  },
-  watch: {
-    modelValue: {
-      handler(nV) {
-        if (!this.stopWatch) {
-          this.innerValue = nV ? dayjs(nV, this.masks.data).toDate() : null;
-        }
-      },
-      immediate: true,
-    },
-    innerValue(nV) {
-      // We're emitting back a formatted String (value) or null in case we have an invalid date
-      const toEmit = isDate(nV) && nV.toString() !== 'Invalid Date' ? dayjs(nV).format(this.masks.data) : null;
-      // Stop watching when updating the value by clicking in the datepicker, in order to prevent double-emit.
-      this.stopWatch = true;
-      this.$emit('update:modelValue', toEmit);
-      this.$nextTick(() => {
-        this.stopWatch = false;
-      });
-    },
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: '',
+  label: '',
+  errorMsg: '',
+  required: false,
+  minDate: null,
+  maxDate: null,
+  timezone: '',
+});
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | null];
+}>();
+
+// Data
+const { labelClasses, errorMsgClasses } = useInputClasses(props);
+const attrs = useAttrs();
+// innerValue is a Date object
+const innerValue = ref<Date | null>(null);
+const stopWatch = ref(false);
+
+// Computed
+const masks = computed(() => {
+  return Object.assign(DEFAULT_MASKS, attrs.masks);
+});
+
+const displayPlaceholder = computed(() => {
+  return isString(attrs.placeholder) ? attrs.placeholder : masks.value.input;
+});
+
+const attrsWithoutClassAndStyle = computed(() => {
+  const { class: classes, style, ...rest } = attrs;
+
+  return rest;
+});
+
+const style = computed(() => {
+  return attrs.style as StyleValue;
+});
+
+// Watch
+watch(
+  () => props.modelValue,
+  (nV) => {
+    if (!stopWatch.value) {
+      innerValue.value = nV ? dayjs(nV, masks.value.data).toDate() : null;
+    }
   },
+  { immediate: true }
+);
+
+watch(innerValue, (nV) => {
+  // We're emitting back a formatted String (value) or null in case we have an invalid date
+  const toEmit = isDate(nV) && nV.toString() !== 'Invalid Date' ? dayjs(nV).format(masks.value.data) : null;
+  // Stop watching when updating the value by clicking in the datepicker, in order to prevent double-emit.
+  stopWatch.value = true;
+  emit('update:modelValue', toEmit);
+  nextTick(() => {
+    stopWatch.value = false;
+  });
 });
 </script>

package/squirrel/components/p-drawer/p-drawer.vue

@@ -3,7 +3,7 @@
     <Transition name="pd-backdrop-transition" enter-active-class="fadeIn" leave-active-class="fadeOut">
       <div
         v-show="show && showBackdrop"
-        :class="['fixed bottom-0 left-0 right-0 top-0 bg-black bg-opacity-20', { 'cursor-pointer': enableClose }]"
+        :class="['fixed bottom-0 left-0 right-0 top-0 bg-black/20', { 'cursor-pointer': enableClose }]"
         :style="{ 'z-index': zIndex - 1 }"
         tabindex="-1"
         @click="close"