stacks 0.50.0 → 0.52.0

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

@@ -1,87 +0,0 @@
-<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

@@ -1,146 +0,0 @@
-<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

@@ -1,78 +0,0 @@
-<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

@@ -1,38 +0,0 @@
-<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

@@ -1,10 +0,0 @@
-<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/functions/README.md

@@ -1,8 +0,0 @@
-# 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

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

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

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

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

@@ -1,207 +0,0 @@
-import { calculatePagination, currentPage, filterName, 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
-export const filters = computed(() => table.filters)
-export const goToNextPage = computed(() => table.goToNextPage)
-export const goToPage = computed(() => table.goToPage)
-export const goToPrevPage = computed(() => table.goToPrevPage)
-export const hits = computed(() => table.hits)
-export const index = computed(() => table.index)
-export const lastPageNumber = computed(() => table.lastPageNumber)
-export const perPage = computed(() => table.perPage)
-export const query = computed(() => table.query)
-export const results = computed(() => table.results)
-export const search = computed(() => table.search)
-export const searchFilters = computed(() => table.searchFilters)
-export const searchParams = computed(() => table.searchParams)
-export const setTotalHits = computed(() => table.setTotalHits)
-export const sort = computed(() => table.sort)
-export const sorts = computed(() => table.sorts)
-
-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: '',
-    goToNextPage: 2,
-    goToPage: 1,
-    goToPrevPage: 1,
-    hits: [],
-    lastPageNumber: 1,
-    results: {},
-    search: () => {},
-    searchFilters: {},
-    searchParams: {},
-    setTotalHits: () => {},
-  }
-
-  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/src/main.js

@@ -1,4 +0,0 @@
-import { createApp } from 'vue'
-import App from './App.vue'
-
-createApp(App).mount('#app')

package/core/tables/vite.config.ts

@@ -1,26 +0,0 @@
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-
-export default defineConfig({
-  plugins: [vue()],
-  server: {
-    hmr: {
-      overlay: false,
-    },
-  },
-  build: {
-    rollupOptions: {
-      external: ['vue', 'vue-demi', 'chalk', 'cac', 'human-signals', 'execa', 'node-ray', 'node:url'],
-      output: {
-        // exports: 'named',
-        globals: {
-          'vue': 'Vue',
-          'vue-demi': 'vue-demi',
-        },
-      },
-    },
-
-    sourcemap: true,
-    minify: true,
-  },
-})

package/core/testing/node_modules/.bin/mkdist

@@ -1,17 +0,0 @@
-#!/bin/sh
-basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
-
-case `uname` in
-    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
-esac
-
-if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/home/runner/work/stacks/stacks/node_modules/.pnpm/node_modules"
-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/mkdist@1.1.0_typescript@4.9.4/node_modules/mkdist/dist/cli.cjs" "$@"
-else
-  exec node  "$basedir/../../../../../node_modules/.pnpm/mkdist@1.1.0_typescript@4.9.4/node_modules/mkdist/dist/cli.cjs" "$@"
-fi

package/core/types/node_modules/.bin/mkdist

@@ -1,17 +0,0 @@
-#!/bin/sh
-basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
-
-case `uname` in
-    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
-esac
-
-if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/home/runner/work/stacks/stacks/node_modules/.pnpm/node_modules"
-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/mkdist@1.1.0_typescript@4.9.4/node_modules/mkdist/dist/cli.cjs" "$@"
-else
-  exec node  "$basedir/../../../../../node_modules/.pnpm/mkdist@1.1.0_typescript@4.9.4/node_modules/mkdist/dist/cli.cjs" "$@"
-fi

package/core/types/node_modules/.bin/tsc

@@ -1,17 +0,0 @@
-#!/bin/sh
-basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
-
-case `uname` in
-    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
-esac
-
-if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/home/runner/work/stacks/stacks/node_modules/.pnpm/node_modules"
-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/typescript@4.9.4/node_modules/typescript/bin/tsc" "$@"
-else
-  exec node  "$basedir/../../../../../node_modules/.pnpm/typescript@4.9.4/node_modules/typescript/bin/tsc" "$@"
-fi