vue-chrts 0.0.109 → 0.0.111

package/src-demo/elements/Dropdown.vue

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

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

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

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

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

@@ -0,0 +1,11 @@
+{
+    // "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

@@ -0,0 +1,59 @@
+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'
+  },
+  format,
+  entryFileNames: ({ name }) => {
+    return `${name.replace('.vue', '')}.${extension}`
+  }
+})
+
+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'],
+          // 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',
+      },
+    }
+  }
+})

package/dist/Area/AreaChart.vue.d.ts

@@ -1,11 +0,0 @@
-declare const _default: <T>(__VLS_props: Awaited<typeof __VLS_setup>["props"], __VLS_ctx?: __VLS_Prettify<Pick<Awaited<typeof __VLS_setup>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_Prettify<__VLS_OmitKeepDiscriminatedUnion<any & any, string | number | symbol>> & {} & any;
-    expose(exposed: import('../../../vue/dist/vue.esm-bundler.js').ShallowUnwrapRef<{}>): void;
-    attrs: any;
-    slots: ReturnType<() => {}>;
-    emit: typeof __VLS_emit;
-}>) => any;
-export default _default;
-type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};

package/dist/Area/index.d.ts

@@ -1,23 +0,0 @@
-import { BulletLegendItemInterface, CurveType } from '@unovis/ts';
-import { PaginationPosition } from '../charts';
-
-export { default as AreaChart } from './AreaChart.vue';
-export type AreaChartProps<T> = {
-    data: T[];
-    height: number;
-    xLabel?: string;
-    yLabel?: string;
-    categories: Record<string, BulletLegendItemInterface>;
-    xFormatter: (i: number, idx: number) => string;
-    yFormatter?: (i: number, idx?: number) => string | number;
-    curveType?: CurveType;
-    xNumTicks?: number;
-    yNumTicks?: number;
-    hideLegend?: boolean;
-    hideTooltip?: boolean;
-    gridLineX?: boolean;
-    domainLineX?: boolean;
-    gridLineY?: boolean;
-    domainLineY?: boolean;
-    paginationPoisition?: PaginationPosition;
-};