stacks 0.47.4 → 0.48.2

package/core/tables/src/components/TableHead.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { useTable } from '../table'
+
+const { table, isColumnSortable, isColumnUsedAsSort, toggleSort, indeterminate, hits, lastColumn, readableLastColumn } = await useTable()
+</script>
+
+<template>
+  <thead class="bg-gray-50">
+    <tr>
+      <th
+        scope="col"
+        class="relative w-12 px-6 sm:px-8 sm:w-16"
+      >
+        <input
+          type="checkbox"
+          class="absolute w-4 h-4 -mt-2 text-indigo-600 border-gray-300 rounded top-1/2 left-4 sm:left-6 focus:ring-indigo-500"
+          :checked="indeterminate || table.selectedRows?.length === hits.length"
+          :indeterminate="indeterminate"
+          @change="table.selectedRows = ($event?.target as any).checked ? hits.map((h) => h.id) : []"
+        >
+        <!-- <input
+          type="checkbox"
+          class="absolute w-4 h-4 -mt-2 text-indigo-600 border-gray-300 rounded top-1/2 left-4 sm:left-6 focus:ring-indigo-500"
+          :checked="indeterminate || selectedRows?.length === hits?.length"
+          :indeterminate="indeterminate"
+          @change="selectedRows = []"
+        > -->
+      </th>
+
+      <th
+        v-for="(col, index) in table.columns"
+        :key="index"
+        scope="col"
+        class="font-semibold text-left text-sm py-3.5 pr-3 pl-4 sm:pl-6 text-gray-900"
+        :class="index === 0 ? `pr-3 pl-4 sm:pl-6` : `px-3`"
+        @click="toggleSort(col)"
+      >
+        <!-- the last column is oftentimes styled slightly different -->
+
+        <a
+          href="#"
+          class="inline-flex group"
+        >
+          {{ col.includes(':') ? col.split(':')[1].trim() : col }}
+          <span
+            v-if="isColumnSortable(col)"
+            class="flex-none ml-2 rounded"
+            :class="isColumnUsedAsSort(col) ? `bg-gray-200 text-gray-900 group-hover:bg-gray-300` : `text-gray-400 invisible group-hover:visible group-focus:visible`"
+            @click="toggleSort(col)"
+          >
+            <div
+              v-if="table.sort?.includes('desc')"
+              class="w-5 h-5 i-heroicons-solid-chevron-down"
+            />
+            <div
+              v-if="table.sort?.includes('asc')"
+              class="w-5 h-5 i-heroicons-solid-chevron-up"
+            />
+          </span>
+        </a>
+      </th>
+
+      <th class="font-semibold text-left text-sm py-3.5 pr-3 pl-4 sm:pl-6 text-gray-900">
+        <a
+          href="#"
+          class="inline-flex group"
+        >
+          {{ readableLastColumn }}
+          <span
+            v-if="isColumnSortable(lastColumn[0])"
+            :class="isColumnUsedAsSort(lastColumn) ? `bg-gray-200 text-gray-900 group-hover:bg-gray-300` : `text-gray-400 invisible group-hover:visible group-focus:visible`"
+            @click="toggleSort(lastColumn[0])"
+          >
+            <div
+              v-if="table.sort?.includes('desc')"
+              class="w-5 h-5 i-heroicons-solid-chevron-down"
+            />
+            <div
+              v-if="table.sort?.includes('asc')"
+              class="w-5 h-5 i-heroicons-solid-chevron-up"
+            />
+          </span>
+        </a>
+      </th>
+    </tr>
+  </thead>
+</template>

package/core/tables/src/components/TablePagination.vue

@@ -0,0 +1,146 @@
+<script setup lang="ts">
+const emit = defineEmits(['paginateToNextPage', 'paginateToPreviousPage', 'paginateToPage'])
+
+const { goToNextPage, goToPrevPage, goToPage, table, lastPageNumber, totalPages, pages } = await useTable()
+
+// watch(totalPages, (newValue, oldValue) => {
+//   // eslint-disable-next-line no-console
+//   console.log('totalPages', totalPages.value)
+
+//   // eslint-disable-next-line no-console
+//   console.log('oldValue', oldValue)
+
+//   // eslint-disable-next-line no-console
+//   console.log('newValue', newValue)
+// })
+
+// const isFirstPage = computed(() => {
+//   if (table.currentPage === 1)
+//     return true
+
+//   return false
+// })
+
+// const isLastPage = computed(() => {
+//   if (table.currentPage === totalPages.value)
+//     return true
+
+//   return false
+// })
+
+// console.log('pages', pages.value)
+
+function next() {
+  goToNextPage()
+  emit('paginateToNextPage')
+}
+
+function back() {
+  goToPrevPage()
+  emit('paginateToPreviousPage')
+}
+
+function paginateTo(page: number) {
+  goToPage(page)
+  emit('paginateToPage', page)
+}
+
+const currentCount = computed(() => {
+  const count = table.perPage * table.currentPage
+  const nbHits = table.results?.nbHits || 1
+
+  return count > nbHits ? table.results?.nbHits : count
+})
+</script>
+
+<template>
+  <div class="bg-white flex border-gray-200 py-3 items-center justify-end">
+    <div class="flex flex-1 justify-between sm:hidden">
+      <a
+        href="#"
+        class="bg-white border rounded-md font-medium border-gray-300 text-sm py-2 px-4 text-gray-700 relative inline-flex items-center hover:bg-gray-50"
+        @click.prevent="goToPrevPage()"
+      >
+        Previous
+      </a>
+      <a
+        href="#"
+        class="bg-white border rounded-md font-medium border-gray-300 text-sm ml-3 py-2 px-4 text-gray-700 relative inline-flex items-center hover:bg-gray-50"
+        @click.prevent="goToNextPage()"
+      >
+        Next
+      </a>
+    </div>
+    <div class="min-w-full py-2 hidden inline-block align-middle sm:flex sm:flex-1 sm:items-center sm:justify-between md:px-6 lg:px-8">
+      <div>
+        <p class="text-sm text-gray-700">
+          Showing {{ ((table.perPage * table.currentPage) - table.perPage) + 1 }}
+          <span class="font-medium" />
+          to
+          <span class="font-medium"> {{ currentCount }} </span>
+          of
+          <span class="font-medium"> {{ table.results?.nbHits ?? 0 }} </span>
+          results
+        </p>
+      </div>
+
+      <div>
+        <nav
+          class="-space-x-px rounded-md shadow-sm z-0 relative inline-flex"
+          aria-label="Pagination"
+        >
+          <a
+            href="#"
+            class="bg-white border rounded-l-md font-medium border-gray-300 text-sm py-2 px-2 text-gray-500 relative inline-flex items-center hover:bg-gray-50"
+            @click.prevent="paginateTo(1)"
+          >
+            <span class="sr-only">First</span>
+            <div class="h-4 w-5 i-heroicons-solid-chevron-double-left" />
+          </a>
+          <a
+            href="#"
+            class="bg-white border font-medium border-gray-300 text-sm py-2 px-2 text-gray-500 relative inline-flex items-center hover:bg-gray-50"
+            @click.prevent="back()"
+          >
+            <span class="sr-only">Previous</span>
+            <div class="h-5 w-5 i-heroicons-solid-chevron-left" />
+          </a>
+
+          <!-- Current: "z-10 bg-indigo-50 border-indigo-500 text-indigo-600", Default: "bg-white border-gray-300 text-gray-500 hover:bg-gray-50" -->
+          <a
+            v-for="page in pages"
+            :key="page"
+            href="#"
+            aria-current="page"
+            :class="[table.currentPage === page && 'border bg-yellow-500 border-yellow-500 text-gray-900 z-10']"
+            class="border border-gray-300 text-gray-500 font-medium text-sm py-2 px-4 relative inline-flex items-center underline-transparent"
+            @click.prevent="paginateTo(page)"
+          >
+            {{ page }}
+          </a>
+          <!-- <a href="#" class="bg-white border font-medium border-gray-300 text-sm py-2 px-4 text-gray-500 relative inline-flex items-center underline-transparent hover:bg-gray-50"> 2 </a>
+          <a href="#" class="bg-white border font-medium border-gray-300 text-sm py-2 px-4 text-gray-500 hidden relative items-center underline-transparent md:inline-flex hover:bg-gray-50"> 3 </a>
+          <a href="#" class="bg-white border font-medium border-gray-300 text-sm py-2 px-4 text-gray-500 hidden relative items-center underline-transparent md:inline-flex hover:bg-gray-50"> 4 </a>
+          <a href="#" class="bg-white border font-medium border-gray-300 text-sm py-2 px-4 text-gray-500 hidden relative items-center underline-transparent md:inline-flex hover:bg-gray-50"> 5 </a> -->
+
+          <a
+            href="#"
+            class="bg-white border font-medium border-gray-300 text-sm py-2 px-2 text-gray-500 relative inline-flex items-center underline-transparent hover:bg-gray-50"
+            @click.prevent="next()"
+          >
+            <span class="sr-only">Next</span>
+            <div class="h-5 w-5 i-heroicons-solid-chevron-right" />
+          </a>
+          <a
+            href="#"
+            class="bg-white border rounded-r-md font-medium border-gray-300 text-sm py-2 px-2 text-gray-500 relative inline-flex items-center underline-transparent hover:bg-gray-50"
+            @click.prevent="paginateTo(lastPageNumber)"
+          >
+            <span class="sr-only">Last</span>
+            <div class="h-4 w-5 i-heroicons-solid-chevron-double-right" />
+          </a>
+        </nav>
+      </div>
+    </div>
+  </div>
+</template>

package/core/tables/src/components/TableRow.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import type { Hit } from '@stacksjs/types'
+
+const { hit, index } = defineProps<{ hit: Hit; index: number }>()
+
+const { table, columnName } = await useTable()
+
+// let's generate the value of the row
+function generateValue(hit: any, col: any) {
+  if (col.includes(':'))
+    return hit[col.split(':')[0].trim()]
+
+  return JSON.parse(hit[col])
+}
+
+function getClass(index: number) {
+  if (index % 2 !== 0)
+    return 'bg-gray-200'
+
+  return 'bg-gray-50'
+}
+</script>
+
+<template>
+  <tr
+    scope="row"
+    :class="getClass(index)"
+    :data-index="index"
+  >
+    <td class="relative w-12 px-6 sm:px-8 sm:w-16">
+      <div
+        v-if="table.selectedRows?.includes(hit.id)"
+        class="bg-indigo-600 inset-y-0 left-0 w-0.5 absolute"
+      />
+      <input
+        v-model="table.selectedRows"
+        :value="hit.id"
+        type="checkbox"
+        class="absolute w-4 h-4 -mt-2 text-indigo-600 border-gray-300 rounded top-1/2 left-4 sm:left-6 focus:ring-indigo-500"
+      >
+    </td>
+
+    <td
+      v-for="(col, x) in table.columns"
+      :key="x"
+      class="py-4 text-sm font-medium text-gray-900 whitespace-nowrap "
+      :class="table.columns.length === x - 1 ? 'table-last-column pr-4 text-right sm:pr-6' : 'pr-3 pl-4 sm:pl-6'"
+    >
+      <!-- last columns oftentimes are styled slightly different -->
+      <!-- <span v-if="(table.columns.length === x + 1) && (table.actionable || table.actions)">
+        <slot name="action_column" :row-data="hit">
+          <TableCellActionItems />
+        </slot>
+      </span> -->
+
+      <span>
+        <slot
+          :name="columnName(col)"
+          :col-data="generateValue(hit, col)"
+        >
+          {{ generateValue(hit, col) }}
+        </slot>
+      </span>
+    </td>
+
+    <td v-if="(table.actionable || table.actions)">
+      <!-- last columns oftentimes are styled slightly different -->
+      <span>
+        <slot
+          name="action_column"
+          :row-data="hit"
+        >
+          <TableCellActionItems />
+        </slot>
+      </span>
+    </td>
+  </tr>
+</template>

package/core/tables/src/components/TableSearch.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+const { table } = await useTable()
+
+const open = ref(false)
+</script>
+
+<template>
+  <div class="px-8 flex justify-between mx-auto max-w-7xl">
+    <div>
+      <input
+        v-model="table.query"
+        type="text"
+        class="block w-full shadow-sm focus:ring-indigo-500 p-2 focus:border-indigo-500 sm:max-w-xs sm:text-sm border-gray-300 rounded-md"
+        placeholder="type here"
+      >
+    </div>
+
+    <div>
+      <button
+        type="button"
+        class="inline-flex items-center px-3 py-2 border border-transparent shadow-sm text-sm leading-4 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+        @click="open = !open"
+      >
+        <!-- Heroicon name: solid/mail -->
+        <svg
+          class="w-4 h-4"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        ><path
+          fill-rule="evenodd"
+          d="M3 3a1 1 0 011-1h12a1 1 0 011 1v3a1 1 0 01-.293.707L12 11.414V15a1 1 0 01-.293.707l-2 2A1 1 0 018 17v-5.586L3.293 6.707A1 1 0 013 6V3z"
+          clip-rule="evenodd"
+        /></svg>
+      </button>
+    </div>
+  </div>
+</template>

package/core/tables/src/components/Tooltip.vue

@@ -0,0 +1,10 @@
+<template>
+  <el-tooltip
+    class="box-item"
+    effect="dark"
+    content="Top Left prompts info"
+    placement="top-start"
+  >
+    <el-button>top-start</el-button>
+  </el-tooltip>
+</template>

package/core/tables/src/config/tables.ts

@@ -0,0 +1 @@
+export {}

package/core/tables/src/functions/README.md

@@ -0,0 +1,8 @@
+# Your Functions Library
+
+You may use functions to share on npm or have them run on a server behind one of your `../routes`.
+
+Learn more about Stacks functions, check out the [documentation](https://stacks.ow3org.com).
+
+> **Note**
+> If your project does not require any routes, you can remove this folder._

package/core/tables/src/functions/dark.ts

@@ -0,0 +1,3 @@
+// these APIs are auto-imported from @vueuse/core
+export const isDark = useDark()
+export const toggleDark = useToggle(isDark)

package/core/tables/src/functions/index.ts

@@ -0,0 +1,2 @@
+export * from './dark'
+export * from './table'

package/core/tables/src/functions/table.ts

@@ -0,0 +1,180 @@
+import { calculatePagination, currentPage, filterName, filters, goToNextPage, goToPage, goToPrevPage, hits, index, lastPageNumber, perPage, query, results, search, searchFilters, searchParams, setTotalHits, sort, sorts, totalPages } from '@stacksjs/search-engine'
+import { isObject, isString, useStorage } from '@stacksjs/utils'
+import type { Ref, TableStore } from '@stacksjs/types'
+import { computed } from 'vue-demi'
+
+const table = (useStorage('table', determineState()).value as TableStore)
+
+// table related
+const columns = computed(() => table.columns)
+const actions = computed(() => table.actions)
+const actionable = computed(() => table.actionable)
+const selectedRows = computed(() => table.selectedRows)
+const selectedAll = computed(() => table.selectedAll)
+const pages: Ref<number[]> = ref([])
+const indeterminate = computed(() => (table?.selectedRows?.length ?? 0) > 0 && (table?.selectedRows?.length ?? 0) < hits.value.length)
+const lastColumn = computed(() => {
+  return table.columns[table.columns.length - 1]
+})
+const readableLastColumn = computed(() => lastColumn[0]?.includes(':') ? lastColumn[0].split(':')[1].trim() : lastColumn[0])
+
+// this watchEffect picks up any reactivity changes from `query` and `searchParams` and it will then trigger a search
+watchEffect(async () => {
+  // console.log('watchEffect', query, searchParams)
+
+  const results = await search(query.value, searchParams.value)
+
+  if (results) {
+    table.results = results
+    table.hits = results.hits
+  }
+
+  setTotalHits(table.results?.nbHits ?? 1)
+  calculatePagination()
+})
+
+watchDebounced(
+  query,
+  () => {
+    // eslint-disable-next-line no-console
+    console.log('watchDebounced')
+
+    if (table === undefined)
+      return
+
+    if (isRef(table.query))
+      table.query = query.value
+  },
+  { debounce: 500 },
+)
+
+function determineState(): TableStore {
+  const ls = localStorage.getItem('table')
+
+  if (isString(ls))
+    return JSON.parse(ls)
+
+  // initial default state - overwrite with properties passed down from parent component
+  const table: TableStore = {
+    source: '',
+    password: '',
+    index: '',
+    columns: [],
+    filters: [],
+    perPage: 20,
+    currentPage: 1,
+    query: '',
+  }
+
+  return table
+}
+
+function isColumnSortable(col: string): Boolean {
+  if (!hasTableLoaded(table))
+    return false
+
+  if (col === undefined)
+    return false
+
+  if (col.includes(':'))
+    col = col.split(':')[0]
+
+  if (table.sorts?.includes(col))
+    return true
+
+  return false
+}
+
+function hasTableLoaded(state?: any): Boolean {
+  if (state?.index !== '')
+    return true
+
+  return isString(table?.index) && table.index !== '' // a lazy way to check if the table is loaded
+}
+
+function isColumnUsedAsSort(col: string | object) {
+  let sortKey
+
+  if (isObject(col))
+    sortKey = col[0].includes(':') ? col[0].split(':')[0].trim() : col[0]
+
+  else
+    sortKey = col.includes(':') ? col.split(':')[0].trim() : col
+
+  return table.sort?.includes(sortKey)
+}
+
+function toggleSort(col: string | Ref<string>) {
+  if (isRef(col))
+    col = unref(col)
+
+  const sortKey = (col as string).includes(':') ? (col as string).split(':')[0].trim() : col
+
+  if (table.sort?.includes('desc')) {
+    table.sort = `${sortKey}:asc`
+
+    // eslint-disable-next-line no-console
+    console.log('sort included asc it is now desc for', sortKey)
+
+    return
+  }
+
+  if (table.sort?.includes('asc')) {
+    table.sort = undefined
+
+    // eslint-disable-next-line no-console
+    console.log('sort included desc it is now "" for', sortKey)
+
+    return
+  }
+
+  // eslint-disable-next-line no-console
+  console.log('there was no sort. Setting it now in asc order for', sortKey)
+
+  table.sort = `${sortKey}:desc`
+
+  // eslint-disable-next-line no-console
+  console.log('table.sort', table.sort)
+}
+
+function columnName(col: string) {
+  return col.split(':')[0].trim()
+}
+
+export async function useTable(store?: TableStore) {
+  return {
+    store,
+    table,
+    index,
+    columns,
+    isColumnSortable,
+    filters,
+    sort,
+    sorts,
+    query,
+    results,
+    hits,
+    perPage,
+    currentPage,
+    goToPrevPage,
+    goToNextPage,
+    goToPage,
+    search,
+    searchFilters,
+    searchParams,
+    toggleSort,
+    isColumnUsedAsSort,
+    actionable,
+    actions,
+    columnName,
+    indeterminate,
+    lastColumn,
+    readableLastColumn,
+    lastPageNumber,
+    selectedRows,
+    selectedAll,
+    totalPages,
+    pages,
+    filterName,
+  }
+}

package/core/tables/tests/example.test.ts

@@ -0,0 +1,7 @@
+import { assert, describe, test } from 'vitest'
+
+describe('example test', () => {
+  test('assert', () => {
+    assert.equal(1, 1)
+  })
+})

package/core/testing/node_modules/.bin/vitest

@@ -11,7 +11,7 @@ else
   export NODE_PATH="$NODE_PATH:/home/runner/work/stacks/stacks/node_modules/.pnpm/node_modules"
 fi
 if [ -x "$basedir/node" ]; then
-  exec "$basedir/node"  "$basedir/../../../../../node_modules/.pnpm/vitest@0.26.2_@vitest+ui@0.26.2/node_modules/vitest/vitest.mjs" "$@"
+  exec "$basedir/node"  "$basedir/../../../../../node_modules/.pnpm/vitest@0.26.3_@vitest+ui@0.26.3/node_modules/vitest/vitest.mjs" "$@"
 else
-  exec node  "$basedir/../../../../../node_modules/.pnpm/vitest@0.26.2_@vitest+ui@0.26.2/node_modules/vitest/vitest.mjs" "$@"
+  exec node  "$basedir/../../../../../node_modules/.pnpm/vitest@0.26.3_@vitest+ui@0.26.3/node_modules/vitest/vitest.mjs" "$@"
 fi

package/core/testing/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@stacksjs/testing",
   "type": "module",
-  "version": "0.47.4",
+  "version": "0.48.2",
   "packageManager": "pnpm@7.21.0",
-  "description": "The Stacks way to test.",
+  "description": "The Stacks way of testing.",
   "author": "Chris Breuer",
   "license": "MIT",
   "funding": "https://github.com/sponsors/chrisbbreuer",
@@ -18,11 +18,14 @@
   },
   "keywords": [
     "tests",
-    "e2e",
     "unit",
+    "feature",
+    "e2e",
     "testing",
     "utilities",
     "functions",
+    "playwright",
+    "vitest",
     "stacks"
   ],
   "main": "dist/index.mjs",
@@ -47,9 +50,9 @@
   },
   "peerDependencies": {
     "@playwright/test": "^1.29.1",
-    "@vitest/coverage-istanbul": "^0.26.2",
-    "@vitest/ui": "^0.26.2",
-    "vitest": "^0.26.2"
+    "@vitest/coverage-istanbul": "^0.26.3",
+    "@vitest/ui": "^0.26.3",
+    "vitest": "^0.26.3"
   },
   "devDependencies": {
     "mkdist": "^1.0.0",

package/core/types/node_modules/.bin/vitepress

@@ -11,7 +11,7 @@ else
   export NODE_PATH="$NODE_PATH:/home/runner/work/stacks/stacks/node_modules/.pnpm/node_modules"
 fi
 if [ -x "$basedir/node" ]; then
-  exec "$basedir/node"  "$basedir/../../../../../node_modules/.pnpm/vitepress@1.0.0-alpha.33_j73j5xdbzpkigstapj6vkce2xy/node_modules/vitepress/bin/vitepress.js" "$@"
+  exec "$basedir/node"  "$basedir/../../../../../node_modules/.pnpm/vitepress@1.0.0-alpha.34_j73j5xdbzpkigstapj6vkce2xy/node_modules/vitepress/bin/vitepress.js" "$@"
 else
-  exec node  "$basedir/../../../../../node_modules/.pnpm/vitepress@1.0.0-alpha.33_j73j5xdbzpkigstapj6vkce2xy/node_modules/vitepress/bin/vitepress.js" "$@"
+  exec node  "$basedir/../../../../../node_modules/.pnpm/vitepress@1.0.0-alpha.34_j73j5xdbzpkigstapj6vkce2xy/node_modules/vitepress/bin/vitepress.js" "$@"
 fi

package/core/types/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stacksjs/types",
   "type": "module",
-  "version": "0.47.4",
+  "version": "0.48.2",
   "packageManager": "pnpm@7.21.0",
   "description": "The Stacks framework types.",
   "author": "Chris Breuer",
@@ -46,6 +46,7 @@
     "@mdit-vue/plugin-component": "^0.11.2",
     "@mdit-vue/plugin-frontmatter": "^0.11.1",
     "@mdit-vue/types": "^0.11.0",
+    "@prisma/client": "^4.8.0",
     "@rollup/pluginutils": "^5.0.2",
     "@types/bcryptjs": "^2.4.2",
     "@types/crypto-js": "^4.1.1",
@@ -63,9 +64,9 @@
     "typescript": "^4.9.4",
     "unplugin-auto-import": "^0.12.1",
     "unplugin-vue-components": "^0.22.12",
-    "vite-plugin-inspect": "^0.7.11",
+    "vite-plugin-inspect": "^0.7.12",
     "vite-plugin-vue-layouts": "^0.7.0",
     "vite-ssg": "^0.22.1",
-    "vitepress": "1.0.0-alpha.33"
+    "vitepress": "1.0.0-alpha.34"
   }
 }