vue-chrts 0.0.134 → 0.0.137

package/src-demo/elements/Dropdown.vue

@@ -1,112 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from "vue";
-
-// Props (if needed)
-const props = defineProps({
-  initialOption: {
-    type: String,
-    default: "24 hours",
-  },
-  optionList: {
-    type: Array,
-    default: () => ["24 hours", "30 days"],
-  },
-});
-
-// Emits
-const emit = defineEmits(["option-selected"]);
-
-// Reactive state
-const isOpen = ref(false);
-const selectedOption = ref(props.initialOption);
-const options = ref(props.optionList);
-
-// Methods
-const toggleDropdown = () => {
-  isOpen.value = !isOpen.value;
-};
-
-const selectOption = (option) => {
-  selectedOption.value = option;
-  isOpen.value = false;
-  emit("option-selected", option);
-};
-
-const clickOutside = (e) => {
-  if (!e.target.closest(".relative")) {
-    isOpen.value = false;
-  }
-};
-
-// Lifecycle hooks
-onMounted(() => {
-  document.addEventListener("click", clickOutside);
-});
-
-onBeforeUnmount(() => {
-  document.removeEventListener("click", clickOutside);
-});
-</script>
-
-<template>
-  <div class="relative min-w-32 w-auto inline-block">
-    <!-- Dropdown Button -->
-    <button
-      @click="toggleDropdown"
-      class="flex items-center justify-between w-full px-4 py-2 text-sm text-white bg-card rounded-md hover:bg-card focus:outline-none ring ring-border"
-    >
-      <span>{{ selectedOption }}</span>
-      <svg
-        class="w-4 h-4 ml-2"
-        :class="{ 'transform rotate-180': isOpen }"
-        fill="none"
-        stroke="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M19 9l-7 7-7-7"
-        ></path>
-      </svg>
-    </button>
-
-    <!-- Dropdown Menu -->
-    <div
-      v-if="isOpen"
-      class="absolute z-10 w-full mt-1 bg-card rounded-md shadow-lg ring ring-border"
-    >
-      <div class="py-1">
-        <a
-          v-for="(option, index) in options"
-          :key="index"
-          @click="selectOption(option)"
-          class="block px-4 py-2 text-sm text-white hover:bg-background cursor-pointer"
-          :class="{ 'bg-card': option === selectedOption }"
-        >
-          <div class="flex items-center">
-            <svg
-              v-if="option === selectedOption"
-              class="w-4 h-4 mr-2"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M5 13l4 4L19 7"
-              ></path>
-            </svg>
-            <span v-else class="w-4 h-4 mr-2"></span>
-            {{ option }}
-          </div>
-        </a>
-      </div>
-    </div>
-  </div>
-</template>

package/src-demo/elements/Logo.vue

@@ -1,8 +0,0 @@
-<template>
-    <div class="flex items-center justify-between">
-      <div class="flex items-center gap-2">
-        <img width="40" src="https://nuxterror.com/logo.svg" alt="" />
-        <h6 class="text-xl font-bold">Nuxt Charts</h6>
-      </div>
-    </div>
-  </template>

package/src-demo/elements/Table.vue

@@ -1,363 +0,0 @@
-// components/TanStackTable.vue
-<script setup lang="ts">
-import {
-  FlexRender,
-  getCoreRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  getFilteredRowModel,
-  useVueTable,
-  ColumnDef,
-  SortingState,
-  PaginationState,
-  ColumnFiltersState,
-  Row
-} from '@tanstack/vue-table'
-import { computed, ref } from 'vue'
-
-// Define the types for the props
-type TableSize = 'sm' | 'md' | 'lg'
-type PaginationPosition = 'top' | 'bottom' | 'both' | 'none'
-
-// Define the props with defaults
-const props = withDefaults(defineProps<{
-  // Data and columns
-  data: any[]
-  columns: ColumnDef<any, any>[]
-  
-  // Features
-  enableSorting?: boolean
-  enableMultiSort?: boolean
-  enablePagination?: boolean
-  enableFiltering?: boolean
-  enableRowSelection?: boolean
-  
-  // Appearance
-  tableSize?: TableSize
-  striped?: boolean
-  hover?: boolean
-  bordered?: boolean
-  
-  // Pagination
-  paginationPosition?: PaginationPosition
-  pageSizeOptions?: any
-  initialPageSize?: number
-  
-  // Functions
-  onRowClick?: (row: Row<any>) => void
-  getRowClass?: (row: Row<any>) => string
-}>(), {
-  // Default prop values
-  enableSorting: true,
-  enableMultiSort: false,
-  enablePagination: true,
-  enableFiltering: false,
-  enableRowSelection: false,
-  tableSize: 'md',
-  striped: true,
-  hover: true,
-  bordered: false,
-  paginationPosition: 'bottom',
-  pageSizeOptions: [10, 20, 50, 100],
-  initialPageSize: 10,
-})
-
-// Define emits for external state management
-const emit = defineEmits<{
-  'update:sorting': [sorting: SortingState]
-  'update:pagination': [pagination: PaginationState]
-  'update:filters': [filters: ColumnFiltersState]
-  'update:selectedRows': [selectedRowIds: Record<string, boolean>]
-  'row-click': [row: Row<any>]
-}>()
-
-// Internal state
-const sorting = ref<SortingState>([])
-const pagination = ref<PaginationState>({
-  pageIndex: 0,
-  pageSize: props.initialPageSize,
-})
-const columnFilters = ref<ColumnFiltersState>([])
-const rowSelection = ref<Record<string, boolean>>({})
-const globalFilter = ref('')
-
-// Create table instance with options
-const table = useVueTable({
-  get data() { return props.data },
-  get columns() { return props.columns },
-  state: {
-    get sorting() { return sorting.value },
-    get pagination() { return pagination.value },
-    get columnFilters() { return columnFilters.value },
-    get rowSelection() { return rowSelection.value },
-    get globalFilter() { return globalFilter.value },
-  },
-  onSortingChange: (updater) => {
-    sorting.value = typeof updater === 'function' ? updater(sorting.value) : updater
-    emit('update:sorting', sorting.value)
-  },
-  onPaginationChange: (updater) => {
-    pagination.value = typeof updater === 'function' ? updater(pagination.value) : updater
-    emit('update:pagination', pagination.value)
-  },
-  onColumnFiltersChange: (updater) => {
-    columnFilters.value = typeof updater === 'function' ? updater(columnFilters.value) : updater
-    emit('update:filters', columnFilters.value)
-  },
-  onRowSelectionChange: (updater) => {
-    rowSelection.value = typeof updater === 'function' ? updater(rowSelection.value) : updater
-    emit('update:selectedRows', rowSelection.value)
-  },
-  onGlobalFilterChange: (updater) => {
-    globalFilter.value = typeof updater === 'function' ? updater(globalFilter.value) : updater
-  },
-  getCoreRowModel: getCoreRowModel(),
-  getSortedRowModel: getSortedRowModel(),
-  getPaginationRowModel: getPaginationRowModel(),
-  getFilteredRowModel: getFilteredRowModel(),
-  enableMultiSort: props.enableMultiSort,
-  enableSorting: props.enableSorting,
-  enableRowSelection: props.enableRowSelection,
-  enableFilters: props.enableFiltering,
-  manualPagination: !props.enablePagination,
-})
-
-// Handle row click events
-const handleRowClick = (row: Row<any>) => {
-  if (props.onRowClick) {
-    props.onRowClick(row)
-  }
-  emit('row-click', row)
-}
-
-// Computed styles based on size
-const tableSizeClasses = computed(() => {
-  switch (props.tableSize) {
-    case 'sm':
-      return {
-        table: 'text-xs',
-        cell: 'px-2 py-1',
-        pagination: 'text-xs'
-      }
-    case 'lg':
-      return {
-        table: 'text-base',
-        cell: 'px-6 py-4',
-        pagination: 'text-base'
-      }
-    default: // 'md'
-      return {
-        table: 'text-sm',
-        cell: 'px-4 py-2',
-        pagination: 'text-sm'
-      }
-  }
-})
-
-// Computed classes for table styling
-const tableClasses = computed(() => {
-  return [
-    'min-w-full divide-y divide-neutral-600 border-collapse',
-    tableSizeClasses.value.table,
-    props.bordered ? 'border border-gray-200' : '',
-  ]
-})
-
-// Row classes
-const getRowClasses = (row: Row<any>) => {
-  const classes = [
-    'transition-colors',
-    props.hover ? 'dark:hover:bg-neutral-900 hover:bg-neutral-100' : '',
-    props.striped && row.index % 2 === 1 ? 'bg-neutral' : '',
-    props.enableRowSelection && row.getIsSelected() ? 'bg-blue-50 hover:bg-blue-100' : '',
-  ]
-  
-  if (props.getRowClass) {
-    classes.push(props.getRowClass(row))
-  }
-  
-  return classes.join(' ')
-}
-
-// Cell classes
-const getCellClasses = (isHeader = false) => {
-  return [
-    tableSizeClasses.value.cell,
-    isHeader ? 'font-semibold text-neutral-500 border-b border-border capitalize' : ' text-neutral-600 dark:text-neutral-400',
-    props.bordered ? 'border border-border' : '',
-  ].join(' ')
-}
-
-// Expose the table instance and key states for external use
-defineExpose({
-  tableInstance: table,
-  sorting,
-  pagination,
-  columnFilters,
-  rowSelection,
-  globalFilter,
-})
-</script>
-
-<template>
-  <div class="overflow-x-auto w-full">
-    <!-- Top Pagination -->
-    <div v-if="['top', 'both'].includes(paginationPosition) && enablePagination" class="mb-2">
-      <div class="flex justify-between items-center">
-        <div class="flex items-center gap-2">
-          <span :class="tableSizeClasses.pagination">Rows per page:</span>
-          <select
-            v-model="pagination.pageSize"
-            class="border border-gray-300 rounded px-2 py-1 outline-none focus:border-blue-500"
-          >
-            <option v-for="size in pageSizeOptions" :key="size" :value="size">
-              {{ size }}
-            </option>
-          </select>
-        </div>
-        <div class="flex items-center gap-2">
-          <button
-            @click="table.previousPage"
-            :disabled="!table.getCanPreviousPage()"
-            class="px-3 py-1 border border-gray-300 rounded disabled:opacity-50"
-          >
-            <span class="sr-only">Previous</span>
-            <span class="inline-block">&lt;</span>
-          </button>
-          <span :class="tableSizeClasses.pagination">
-            Page {{ table.getState().pagination.pageIndex + 1 }} of {{ table.getPageCount() }}
-          </span>
-          <button
-            @click="table.nextPage"
-            :disabled="!table.getCanNextPage()"
-            class="px-3 py-1 border border-gray-300 rounded disabled:opacity-50"
-          >
-            <span class="sr-only">Next</span>
-            <span class="inline-block">&gt;</span>
-          </button>
-        </div>
-      </div>
-    </div>
-
-    <!-- Global Filter -->
-    <div v-if="enableFiltering" class="mb-2">
-      <input
-        v-model="globalFilter"
-        placeholder="Search all columns..."
-        class="border border-gray-300 rounded px-3 py-2 w-full max-w-sm"
-      />
-    </div>
-
-    <!-- Table -->
-    <table :class="tableClasses">
-      <thead>
-        <tr v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
-          <th
-            v-for="header in headerGroup.headers"
-            :key="header.id"
-            :class="[
-              getCellClasses(true),
-              header.column.getCanSort() ? 'cursor-pointer select-none' : '',
-              'text-left'
-            ]"
-            @click="header.column.getToggleSortingHandler()"
-          >
-            <div class="flex items-center gap-1">
-              <FlexRender
-                v-if="header.isPlaceholder"
-                :render="header.column.columnDef.header"
-                :props="header.getContext()"
-              />
-              
-              <!-- Column title with sort icons -->
-              <div v-else class="flex-1">
-                <FlexRender
-                  :render="header.column.columnDef.header"
-                  :props="header.getContext()"
-                />
-              </div>
-              
-              <!-- Sort indicator -->
-              <div class="w-4" v-if="header.column.getCanSort()">
-                {{{
-                  asc: '▲',
-                  desc: '▼',
-                }[header.column.getIsSorted() as string] ?? '⬍'}}
-              </div>
-            </div>
-          </th>
-        </tr>
-      </thead>
-      <tbody class="divide-y divide-border">
-        <template v-if="table.getRowModel().rows.length">
-          <tr
-            v-for="row in table.getRowModel().rows"
-            :key="row.id"
-            :class="getRowClasses(row)"
-            @click="handleRowClick(row)"
-          >
-            <td
-              v-for="cell in row.getVisibleCells()"
-              :key="cell.id"
-              :class="getCellClasses()"
-            >
-              <FlexRender
-                :render="cell.column.columnDef.cell"
-                :props="cell.getContext()"
-              />
-            </td>
-          </tr>
-        </template>
-        <template v-else>
-          <tr>
-            <td
-              :colspan="table.getAllColumns().length"
-              :class="getCellClasses()"
-              class="text-center py-4"
-            >
-              No results found
-            </td>
-          </tr>
-        </template>
-      </tbody>
-    </table>
-
-    <!-- Bottom Pagination -->
-    <div v-if="['bottom', 'both'].includes(paginationPosition) && enablePagination" class="mt-2">
-      <div class="flex justify-between items-center">
-        <div class="flex items-center gap-2">
-          <span :class="tableSizeClasses.pagination">Rows per page:</span>
-          <select
-            v-model="pagination.pageSize"
-            class="border border-gray-300 rounded px-2 py-1 outline-none focus:border-blue-500"
-          >
-            <option v-for="size in pageSizeOptions" :key="size" :value="size">
-              {{ size }}
-            </option>
-          </select>
-        </div>
-        <div class="flex items-center gap-2">
-          <button
-            @click="table.previousPage"
-            :disabled="!table.getCanPreviousPage()"
-            class="px-3 py-1 border border-gray-300 rounded disabled:opacity-50"
-          >
-            <span class="sr-only">Previous</span>
-            <span class="inline-block">&lt;</span>
-          </button>
-          <span :class="tableSizeClasses.pagination">
-            Page {{ table.getState().pagination.pageIndex + 1 }} of {{ table.getPageCount() }}
-          </span>
-          <button
-            @click="table.nextPage"
-            :disabled="!table.getCanNextPage()"
-            class="px-3 py-1 border border-gray-300 rounded disabled:opacity-50"
-          >
-            <span class="sr-only">Next</span>
-            <span class="inline-block">&gt;</span>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>

package/src-demo/elements/TopBar.vue

@@ -1,40 +0,0 @@
-<script lang="ts" setup>
-import { computed } from "vue";
-import Logo from "./Logo.vue";
-
-import { useColorMode } from "@vueuse/core";
-const colorMode = useColorMode();
-const isDark = computed(() => colorMode.value === "dark");
-
-function setColorMode() {
-  colorMode.value = isDark.value ? "light" : "dark";
-}
-</script>
-<template>
-  <div class="border-b border-border">
-    <div
-      class="mx-auto py-4 flex items-center justify-between"
-      :class="$route.fullPath === '/admin' ? 'max-w-full px-16' : 'max-w-7xl'"
-    >
-      <RouterLink to="/">
-        <Logo></Logo>
-      </RouterLink>
-      <svg
-        @click="setColorMode"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 16 16"
-        fill="currentColor"
-        class="size-5 cursor-pointer"
-      >
-        <path
-          v-if="!isDark"
-          d="M14.438 10.148c.19-.425-.321-.787-.748-.601A5.5 5.5 0 0 1 6.453 2.31c.186-.427-.176-.938-.6-.748a6.501 6.501 0 1 0 8.585 8.586Z"
-        />
-        <path
-          v-else
-          d="M8 1a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0v-1.5A.75.75 0 0 1 8 1ZM10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM12.95 4.11a.75.75 0 1 0-1.06-1.06l-1.062 1.06a.75.75 0 0 0 1.061 1.062l1.06-1.061ZM15 8a.75.75 0 0 1-.75.75h-1.5a.75.75 0 0 1 0-1.5h1.5A.75.75 0 0 1 15 8ZM11.89 12.95a.75.75 0 0 0 1.06-1.06l-1.06-1.062a.75.75 0 0 0-1.062 1.061l1.061 1.06ZM8 12a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0v-1.5A.75.75 0 0 1 8 12ZM5.172 11.89a.75.75 0 0 0-1.061-1.062L3.05 11.89a.75.75 0 1 0 1.06 1.06l1.06-1.06ZM4 8a.75.75 0 0 1-.75.75h-1.5a.75.75 0 0 1 0-1.5h1.5A.75.75 0 0 1 4 8ZM4.11 5.172A.75.75 0 0 0 5.173 4.11L4.11 3.05a.75.75 0 1 0-1.06 1.06l1.06 1.06Z"
-        />
-      </svg>
-    </div>
-  </div>
-</template>

package/src-demo/index.ts

@@ -1,58 +0,0 @@
-
-import { createApp } from 'vue'
-import { createRouter, createWebHistory } from "vue-router";
-
-import './assets/main.css'
-
-import App from './App.vue'
-
-const app = createApp(App)
-
-const router = createRouter({
-    routes: [
-        {
-          path: '/',
-          name: 'Home',
-          component: () => import('./Homepage.vue') 
-        },
-        {
-          path: '/admin',
-          name: 'AdminTemplate',
-          component: () => import('./AdminTemplate.vue') 
-        },
-        {
-          path: '/dashboard',
-          name: 'DashboardTemplate',
-          component: () => import('./DashboardTemplate.vue') 
-        },
-        {
-          path: '/area-charts',
-          name: 'AreaCharts',
-          component: () => import('./AreaChartPage.vue') 
-        },
-        {
-          path: '/line-charts',
-          name: 'LineCharts',
-          component: () => import('./LineChartPage.vue') 
-        },
-        {
-          path: '/bar-charts',
-          name: 'BarCharts',
-          component: () => import('./BarChartPage.vue') 
-        },
-        // {
-        //   path: '/overview',
-        //   name: 'Overview',
-        //   component: () => import('./components/Overview.vue') // Replace with your OverviewPage component path
-        // }
-      ],
-    history: createWebHistory(),
-  });
-
-app.use(router);
-
-app.mount('#app')
-
-export default {
-
-}

package/tsconfig.json

@@ -1,11 +0,0 @@
-{
-    // "extends": "@vue/tsconfig/tsconfig.dom.json",
-    "include": ["src/**/*.vue", "src/**/*.ts"],
-    "compilerOptions": {
-      "moduleResolution": "Node",
-      "skipLibCheck": true,
-      "outDir": "dist"
-    },
-    "exclude": ["node_modules/*"]
-  }
-  

package/vite.config.ts

@@ -1,63 +0,0 @@
-import { resolve } from 'node:path'
-import { UserConfig, defineConfig } from 'vite'
-import vue from "@vitejs/plugin-vue";
-import dts from "vite-plugin-dts";
-import tailwindcss from "@tailwindcss/vite";
-import type { ModuleFormat, OutputOptions } from 'rollup'
-
-const outputDefault = (format: ModuleFormat, extension: string): OutputOptions => ({
-  // Provide global variables to use in the UMD build
-  // for externalized deps
-  globals: {
-    vue: 'Vue',
-    '@unovis/ts': '@unovis/ts',
-    '@unovis/vue': '@unovis/vue',
-  },
-  preserveModules: true,
-  preserveModulesRoot: './src',
-  format,
-  entryFileNames: ({ name }) => {
-    return `${name.replace('.vue', '')}.${extension}`
-  },
-  exports: 'named',
-})
-export default defineConfig(({ command, mode }): UserConfig => {
-  if (command === 'build' && mode !== 'gallery') {
-    return {
-      plugins: [
-        vue(),
-        dts({
-          insertTypesEntry: true,
-          include: ['src/**/*.ts', 'src/**/*.vue'],
-        }),
-      ],
-      build: {
-        emptyOutDir: true,
-        lib: {
-          name: 'vue-chrts',
-          fileName: 'index',
-          entry: resolve(__dirname, 'src/index.ts'),
-        },
-        rollupOptions: {
-          // make sure to externalize deps that shouldn't be bundled
-          // into your library (Vue)
-          external: ['vue', '@unovis/ts', '@unovis/vue'],
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore overloaded issue
-          output: [outputDefault('cjs', 'cjs'), outputDefault('es', 'js')],
-        },
-        sourcemap: true,
-      },
-    }
-  } else {
-    return {
-      plugins: [
-        vue(),
-        tailwindcss()
-      ],
-      build: {
-        outDir: 'dist-demo',
-      },
-    }
-  }
-})