@mrxploder/saxvue 0.1.0

package/package.json

@@ -0,0 +1,128 @@
+{
+  "name": "@mrxploder/saxvue",
+  "version": "0.1.0",
+  "description": "Framework components for Vue 3",
+  "keywords": [
+    "vue",
+    "vue3",
+    "ui",
+    "components",
+    "framework"
+  ],
+  "license": "MIT",
+  "author": "MrXploder",
+  "main": "dist/saxvue.js",
+  "module": "dist/saxvue.js",
+  "types": "types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./types/index.d.ts",
+      "import": "./dist/saxvue.js",
+      "require": "./dist/saxvue.js"
+    },
+    "./dist/*": "./dist/*"
+  },
+  "sideEffects": [
+    "*.scss",
+    "*.css"
+  ],
+  "files": [
+    "dist",
+    "types",
+    "!types/test"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/MrXploder/saxvue"
+  },
+  "scripts": {
+    "build": "node build/index.js",
+    "build:components": "npx webpack --config build/components/webpack.component.js",
+    "test": "jest --config jest.config.js",
+    "test:coverage": "jest --config jest.config.js --coverage",
+    "lint": "eslint --ext .ts,.tsx,.vue src test",
+    "lint:fix": "eslint --ext .ts,.tsx,.vue src test --fix",
+    "dev": "tsc -w src/index.ts --module es6",
+    "test:types": "tsc -p ./types/test/tsconfig.json",
+    "storybook:build": "storybook build",
+    "storybook:dev": "storybook dev -p 6006",
+    "test:storybook": "test-storybook",
+    "test:storybook:ci": "concurrently -k -s first -n \"SB,TEST\" \"npx http-server storybook-static --port 6006 --silent\" \"wait-on tcp:127.0.0.1:6006 && test-storybook --url http://127.0.0.1:6006\"",
+    "verify:treeshake": "node build/verify-treeshake.js",
+    "prepare": "husky"
+  },
+  "dependencies": {
+    "vue-router": "^4.1.6"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.6.2",
+    "@babel/core": "^7.6.2",
+    "@babel/plugin-proposal-class-properties": "^7.5.5",
+    "@babel/plugin-proposal-decorators": "^7.8.3",
+    "@babel/plugin-proposal-numeric-separator": "^7.2.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.6.2",
+    "@babel/plugin-transform-runtime": "^7.6.2",
+    "@babel/preset-env": "^7.6.3",
+    "@babel/preset-typescript": "^7.6.0",
+    "@babel/runtime": "^7.8.3",
+    "@storybook/addon-essentials": "^8.6.17",
+    "@storybook/addon-interactions": "^8.6.17",
+    "@storybook/vue3": "^8.6.17",
+    "@storybook/vue3-vite": "^8.6.17",
+    "@types/color": "^3.0.0",
+    "@types/jest": "^30.0.0",
+    "@typescript-eslint/eslint-plugin": "^7.13.0",
+    "@typescript-eslint/parser": "^7.13.0",
+    "@vue/compiler-sfc": "^3.2.47",
+    "@vue/test-utils": "^2.4.6",
+    "autoprefixer": "^10.4.14",
+    "babel-loader": "^8.3.0",
+    "babel-plugin-transform-decorators-legacy": "^1.3.5",
+    "boxen": "^4.1.0",
+    "chalk": "^4.1.2",
+    "color": "^3.1.2",
+    "consolee": "^0.1.10",
+    "css-loader": "^6.8.1",
+    "css-minimizer-webpack-plugin": "^2.0.0",
+    "cssnano": "^5.1.15",
+    "csstype": "^3.1.3",
+    "eslint": "^8.57.0",
+    "eslint-plugin-vue": "^9.23.0",
+    "fs-extra": "^10.1.0",
+    "globby": "^11.0.4",
+    "husky": "^9.1.7",
+    "inquirer": "^8.2.5",
+    "jest": "^29.6.1",
+    "jest-environment-jsdom": "^30.2.0",
+    "lint-staged": "^16.3.2",
+    "mini-css-extract-plugin": "^2.7.5",
+    "opener": "^1.5.2",
+    "postcss-loader": "^7.0.1",
+    "prettier": "2.8.8",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "sass": "^1.73.1",
+    "sass-loader": "^13.2.2",
+    "shelljs": "^0.8.5",
+    "signale": "^1.4.0",
+    "storybook": "^8.6.17",
+    "style-loader": "^3.3.1",
+    "terser-webpack-plugin": "^5.3.6",
+    "ts-jest": "^29.4.6",
+    "ts-loader": "^9.4.2",
+    "typescript": "^4.9.5",
+    "vue-eslint-parser": "^9.4.2",
+    "vue-loader": "^16.8.3",
+    "webpack": "^5.105.3",
+    "webpack-cli": "^4.10.0",
+    "webpack-merge": "^5.8.0",
+    "webpackbar": "^5.0.0"
+  },
+  "lint-staged": {
+    "*.{ts,tsx,vue}": "eslint --fix",
+    "*.{ts,tsx,vue,json,md,scss,sass,css}": "prettier --write"
+  }
+}

package/types/component.d.ts

@@ -0,0 +1,9 @@
+/** ElementUI component common definition (Vue 3 migration-friendly)
+ *
+ * This provides a minimal base class so existing `.d.ts` files that extend
+ * `SaxVueUIComponent` continue to type-check during incremental migration.
+ */
+export declare class SaxVueUIComponent {
+  /** Install component into Vue */
+  static install(vue: any): void;
+}

package/types/components/SvAlert.d.ts

@@ -0,0 +1,14 @@
+import { SaxVueUIComponent } from '../component';
+/** Alert Component */
+
+export declare class SvAlert extends SaxVueUIComponent {
+  hiddenContent: boolean;
+  closable: boolean;
+  progress: number | string;
+  relief: boolean;
+  flat: boolean;
+  gradient: boolean;
+  shadow: boolean;
+  border: boolean;
+  solid: boolean;
+}

package/types/components/SvButton.d.ts

@@ -0,0 +1,34 @@
+import { SaxVueUIComponent } from '../component';
+/** Alert Component */
+
+export declare class SvButton extends SaxVueUIComponent {
+  ripple: '' | 'reverse' | 'cut';
+  activeDisabled: boolean;
+  flat: boolean;
+  gradient: boolean;
+  shadow: boolean;
+  border: boolean;
+  solid: boolean;
+  transparent: boolean;
+  floating: boolean;
+  icon: boolean;
+  circle: boolean;
+  square: boolean;
+  size: string | null;
+  loading: boolean;
+  upload: boolean;
+  block: boolean;
+  animationType: string;
+  animateInactive: boolean;
+  to: string | null;
+  href: string | null;
+  blank: boolean;
+  relief: boolean;
+  active: boolean;
+  color: string | null;
+  danger: boolean;
+  success: boolean;
+  warn: boolean;
+  dark: boolean;
+  primary: boolean;
+}

package/types/index.d.ts

@@ -0,0 +1,105 @@
+import type { App } from 'vue';
+import { SvAlert } from './components/SvAlert';
+
+// ── Plugin ──────────────────────────────────────────────────────
+
+export interface SaxVueColors {
+  primary: string;
+  success: string;
+  danger: string;
+  warn: string;
+  dark: string;
+  [key: string]: string;
+}
+
+export interface SaxVueOptions {
+  colors?: SaxVueColors;
+}
+
+declare const SaxVue: {
+  install: (app: App, options?: SaxVueOptions) => void;
+};
+
+export default SaxVue;
+
+// ── $sv global functions ────────────────────────────────────────
+
+export interface SvFunctions {
+  /** Set a named color CSS custom-property on `<body>` */
+  setColor(color: string, val: string): void;
+
+  /** Show a full-screen loading overlay. Returns a handle with `.close()` */
+  loading(options?: Record<string, unknown>): { close: () => void };
+
+  /** Show a notification toast. Returns a handle with `.close()` */
+  notification(options?: Record<string, unknown>): { close: () => void };
+
+  /** Toggle between light / dark theme */
+  toggleTheme(): void;
+
+  /** Explicitly set the theme to 'light' or 'dark' */
+  setTheme(theme: 'light' | 'dark'): void;
+
+  /** Table helper – get current page rows */
+  getPage<T>(data: T[], page: number, maxItems?: number): T[];
+
+  /** Table helper – get filtered length */
+  getLength(data: unknown[], maxItems?: number): number;
+
+  /** Table helper – toggle check-all */
+  checkAll(selected: unknown[], data: unknown[]): unknown[];
+
+  /** Table helper – filter rows by search term */
+  getSearch<T>(data: T[], search: string): T[];
+
+  /** Table helper – sort data by a column */
+  sortData(event: Event, data: unknown[], sortKey: string, type: string): unknown[];
+}
+
+// ── Component exports ───────────────────────────────────────────
+
+export const svButton: typeof import('../src/components/svButton/Base/SvButton').default;
+export const svButtonGroup: typeof import('../src/components/svButton/Group/SvButtonGroup').default;
+export const svAlert: typeof import('../src/components/svAlert/Base/svAlert').default;
+export const svInput: typeof import('../src/components/svInput/Base/svInput').default;
+export const svCheckbox: typeof import('../src/components/svCheckbox/Base/svCheckbox').default;
+export const svSwitch: typeof import('../src/components/svSwitch/Base/svSwitch').default;
+export const svSelect: typeof import('../src/components/svSelect/Base/svSelect').default;
+export const svOption: typeof import('../src/components/svSelect/Option/svSelectOption').default;
+export const svOptionGroup: typeof import('../src/components/svSelect/OptionGroup/svOptionGroup').default;
+export const svAvatar: typeof import('../src/components/svAvatar/Base/svAvatar').default;
+export const svAvatarGroup: typeof import('../src/components/svAvatar/Group/svAvatarGroup').default;
+export const svRadio: typeof import('../src/components/svRadio/Base/svRadio').default;
+export const svTooltip: typeof import('../src/components/svTooltip/Base/svTooltip').default;
+export const svDialog: typeof import('../src/components/svDialog/Base/svDialog').default;
+export const svPagination: typeof import('../src/components/svPagination/Base/svPagination').default;
+export const svTable: typeof import('../src/components/svTable/Base/svTable').default;
+export const svTableTr: typeof import('../src/components/svTable/Tr/svTableTr').default;
+export const svTableTh: typeof import('../src/components/svTable/Th/svTableTh').default;
+export const svTableTd: typeof import('../src/components/svTable/Td/svTableTd').default;
+export const svNavbar: typeof import('../src/components/svNavbar/Base/svNavbar').default;
+export const svNavbarItem: typeof import('../src/components/svNavbar/Item/svNavbarItem').default;
+export const svNavbarGroup: typeof import('../src/components/svNavbar/Group/svNavbarGroup').default;
+export const svSidebar: typeof import('../src/components/svSidebar/Base/svSidebar').default;
+export const svSidebarItem: typeof import('../src/components/svSidebar/Item/svSidebarItem').default;
+export const svSidebarGroup: typeof import('../src/components/svSidebar/Group/svSidebarGroup').default;
+export const svCard: typeof import('../src/components/svCard/Base/svCard').default;
+export const svCardGroup: typeof import('../src/components/svCard/Group/svCardGroup').default;
+export const svRow: typeof import('../src/layout/grid/SvRow').default;
+export const svCol: typeof import('../src/layout/grid/SvCol').default;
+
+/** Alert Component */
+export class Alert extends SvAlert {}
+
+// ── Vue augmentations ───────────────────────────────────────────
+
+declare module 'vue' {
+  interface ComponentCustomProperties {
+    $sv: SvFunctions;
+  }
+}
+
+declare module '*.svg' {
+  const content: string;
+  export default content;
+}