Merge branch 'main' into release/1.0.0

Author: adenvt

package.json

@@ -70,7 +70,7 @@
     "nanodelay": "2.0.2",
     "postcss": "8.4.49",
     "postcss-import": "16.1.0",
-    "postcss-nested": "6.2.0",
+    "postcss-nested": "7.0.2",
     "sharp": "0.33.5",
     "svgo": "3.3.2",
     "tailwindcss": "3.4.15",
@@ -119,7 +119,7 @@
     "immutable": "^5.0.0-beta.5",
     "interactjs": "1.10.27",
     "lodash-es": "4.17.21",
-    "marked": "^14.0.0",
+    "marked": "^15.0.0",
     "nanodelay": "2.0.2",
     "pdfjs-dist": "^4.0.0",
     "postcss-hexrgba": "^2.1.0",
@@ -132,7 +132,7 @@
     "vue-collapsed": "^1.2.5",
     "vue-content-loader": "^2.0.1",
     "vue-demi": "0.14.10",
-    "vue-router": "4.4.5",
+    "vue-router": "4.5.0",
     "vuedraggable": "next",
     "webfontloader": "1.6.28",
     "zxcvbn": "^4.4.2"

packages/persona-icon/package.json

@@ -57,7 +57,7 @@
     "ohash": "1.1.4",
     "ora": "8.1.1",
     "p-all": "5.0.0",
-    "svg-path-commander": "2.1.5",
+    "svg-path-commander": "2.1.6",
     "svgo": "3.3.2",
     "webfont": "11.2.26"
   },

packages/persona-ilustration/package.json

@@ -76,7 +76,7 @@
     "ora": "8.1.1",
     "p-all": "5.0.0",
     "sharp": "0.33.5",
-    "svg-path-commander": "2.1.5",
+    "svg-path-commander": "2.1.6",
     "svgo": "3.3.2",
     "webfont": "11.2.26"
   },

packages/persona/package.json

@@ -59,7 +59,7 @@
   },
   "dependencies": {
     "@floating-ui/dom": "1.6.12",
-    "@jill64/universal-sanitizer": "1.3.3",
+    "@jill64/universal-sanitizer": "1.3.4",
     "@juggle/resize-observer": "3.4.0",
     "@nuxt/kit": "3.13.2",
     "@splidejs/splide": "4.1.4",
@@ -93,10 +93,10 @@
     "html-escaper": "^3.0.3",
     "interactjs": "1.10.27",
     "lodash-es": "4.17.21",
-    "marked": "14.1.4",
+    "marked": "15.0.2",
     "nanodelay": "2.0.2",
     "pathe": "^1.1.2",
-    "pdfjs-dist": "4.7.76",
+    "pdfjs-dist": "4.8.69",
     "pspdfkit": "^2024.6.0",
     "scroll-into-view": "1.16.2",
     "tabbable": "6.2.0",

src/components/dropzone/Dropzone.vue

@@ -213,10 +213,10 @@ defineSlots<{
 
 <style lang="postcss">
 .dropzone {
-  @apply cursor-pointer block w-full;
+  @apply cursor-pointer block w-full relative;
 
   &__input {
-    @apply hidden;
+    @apply absolute w-[.1px] h-[.1px] opacity-0 overflow-hidden -z-1 bottom-0 right-0;
   }
 
   * {

src/components/table-static/TableStatic.spec.ts

@@ -1,7 +1,11 @@
 import Draggable from '../table/__mocks__/vuedraggable'
 import { vi } from 'vitest'
-import { fireEvent, render } from '@testing-library/vue'
-import { ref } from 'vue-demi'
+import {
+  render,
+  fireEvent,
+  queryByTestId,
+} from '@testing-library/vue'
+import { nextTick, ref } from 'vue-demi'
 import { defineTable } from '../table'
 import Table from './TableStatic.vue'
 
@@ -37,6 +41,54 @@ const items = ref([
   },
 ])
 
+const sortableFields = defineTable([
+  { key: 'id' },
+  { key: 'name' },
+  {
+    key     : 'gender',
+    sortable: false,
+  },
+  {
+    key     : 'age',
+    sortable: true,
+  },
+])
+
+function generateItems () {
+  return [
+    {
+      id    : 1,
+      name  : 'Dora',
+      gender: 'male',
+      age   : 27,
+    },
+    {
+      id    : 2,
+      name  : 'Emilly',
+      gender: 'male',
+      age   : 20,
+    },
+    {
+      id    : 3,
+      name  : 'Jane',
+      gender: 'female',
+      age   : 30,
+    },
+    {
+      id    : 4,
+      name  : 'Andi',
+      gender: 'male',
+      age   : 21,
+    },
+    {
+      id    : 5,
+      name  : 'Bella',
+      gender: 'female',
+      age   : 24,
+    },
+  ]
+}
+
 it('should render properly', () => {
   const screen = render({
     components: { Table },
@@ -305,3 +357,120 @@ it('should able to select all items (except disable one) in variant static', asy
 
   expect(selected.value).toHaveLength(0)
 })
+
+it('should X field header have sortable class if have `sortable` property with `true` value & `sortable` prop is provided', () => {
+  const items  = ref(generateItems())
+  const screen = render({
+    components: { Table },
+    template  : `
+      <Table
+        :fields="sortableFields"
+        :items="items"
+        sortable
+      />`,
+    setup () {
+      return {
+        sortableFields,
+        items,
+      }
+    },
+  })
+
+  const heads = screen.queryAllByTestId('table-static-header')
+
+  expect(heads.at(0)).toHaveClass('table-static__header--sortable')
+  expect(heads.at(2)).not.toHaveClass('table-static__header--sortable')
+})
+
+it('should able modify sort by header using v-model:sort-by', async () => {
+  const items  = ref(generateItems())
+  const sortBy = ref({})
+  const screen = render({
+    components: { Table },
+    template  : `
+      <Table
+        v-model:sort-by="sortBy"
+        :fields="sortableFields"
+        :items="items"
+        sortable
+      />`,
+    setup () {
+      return {
+        sortableFields,
+        items,
+        sortBy,
+      }
+    },
+  })
+
+  const heads = screen.queryAllByTestId('table-static-header')
+
+  expect(heads.at(0)).toHaveClass('table-static__header--sortable')
+  expect(heads.at(2)).not.toHaveClass('table-static__header--sortable')
+
+  await fireEvent.click(heads.at(0))
+
+  const icon = queryByTestId(heads[0], 'table-static-header-sort')
+
+  expect(icon).toHaveAttribute('active', 'asc')
+  expect(sortBy.value).toStrictEqual({ id: 'asc' })
+
+  await fireEvent.click(heads.at(0))
+
+  expect(icon).toHaveAttribute('active', 'desc')
+  expect(sortBy.value).toStrictEqual({ id: 'desc' })
+
+  await fireEvent.click(heads.at(0))
+
+  expect(icon).not.toHaveAttribute('active', 'desc')
+  expect(sortBy.value).toStrictEqual({ id: undefined })
+
+  sortBy.value = { name: 'desc' }
+  await nextTick()
+
+  const icon2 = queryByTestId(heads[1], 'table-static-header-sort')
+
+  expect(icon).not.toHaveAttribute('active', 'asc')
+  expect(icon2).toHaveAttribute('active', 'desc')
+})
+
+it('should have multiple value if sortable set to `multiple`', async () => {
+  const items  = ref(generateItems())
+  const sortBy = ref({})
+  const screen = render({
+    components: { Table },
+    template  : `
+      <Table
+        v-model:sort-by="sortBy"
+        :fields="sortableFields"
+        :items="items"
+        sortable="multiple"
+      />`,
+    setup () {
+      return {
+        sortableFields,
+        items,
+        sortBy,
+      }
+    },
+  })
+
+  const heads = screen.queryAllByTestId('table-static-header')
+
+  expect(heads.at(0)).toHaveClass('table-static__header--sortable')
+  expect(heads.at(2)).not.toHaveClass('table-static__header--sortable')
+
+  await fireEvent.click(heads.at(0))
+
+  const icon  = queryByTestId(heads[0], 'table-static-header-sort')
+  const icon2 = queryByTestId(heads[1], 'table-static-header-sort')
+
+  expect(icon).toHaveAttribute('active', 'asc')
+  expect(sortBy.value).toStrictEqual({ id: 'asc' })
+
+  await fireEvent.click(heads.at(1))
+
+  expect(icon).toHaveAttribute('active', 'asc')
+  expect(icon2).toHaveAttribute('active', 'asc')
+  expect(sortBy.value).toStrictEqual({ id: 'asc', name: 'asc' })
+})