diff --git a/kendo-vue-tailwind/.gitignore b/kendo-vue-tailwind/.gitignore new file mode 100644 index 00000000..a547bf36 --- /dev/null +++ b/kendo-vue-tailwind/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/kendo-vue-tailwind/README.md b/kendo-vue-tailwind/README.md new file mode 100644 index 00000000..86086bcf --- /dev/null +++ b/kendo-vue-tailwind/README.md @@ -0,0 +1,30 @@ +# Kendo UI for Vue + Tailwind CSS + +A Vue 3 TypeScript project demonstrating the integration of Kendo UI for Vue components with Tailwind CSS styling. + +## Features + +- Vue 3 with TypeScript +- Kendo UI for Vue components +- Tailwind CSS integration +- Responsive design + +## Getting Started + +```bash +# Install dependencies +npm install + +# Start development server +npm run dev + +# Build for production +npm run build +``` + +## Tech Stack + +- Vue 3.5+ with TypeScript +- Kendo UI for Vue +- Tailwind CSS 4.1+ +- Vite diff --git a/kendo-vue-tailwind/index.html b/kendo-vue-tailwind/index.html new file mode 100644 index 00000000..dde16aaf --- /dev/null +++ b/kendo-vue-tailwind/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite + Vue + TS + + +
+ + + diff --git a/kendo-vue-tailwind/package.json b/kendo-vue-tailwind/package.json new file mode 100644 index 00000000..5f17b1d3 --- /dev/null +++ b/kendo-vue-tailwind/package.json @@ -0,0 +1,25 @@ +{ + "name": "kendo-vue-tailwind", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "vue-tsc -b && vite build", + "preview": "vite preview" + }, + "dependencies": { + "@progress/kendo-theme-default": "^11.1.0", + "@progress/kendo-vue-layout": "^6.4.1", + "@tailwindcss/vite": "^4.1.11", + "tailwindcss": "^4.1.11", + "vue": "^3.5.17" + }, + "devDependencies": { + "@vitejs/plugin-vue": "^6.0.0", + "@vue/tsconfig": "^0.7.0", + "typescript": "~5.8.3", + "vite": "^7.0.4", + "vue-tsc": "^2.2.12" + } +} diff --git a/kendo-vue-tailwind/public/vite.svg b/kendo-vue-tailwind/public/vite.svg new file mode 100644 index 00000000..e7b8dfb1 --- /dev/null +++ b/kendo-vue-tailwind/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/kendo-vue-tailwind/src/App.vue b/kendo-vue-tailwind/src/App.vue new file mode 100644 index 00000000..afe82fbb --- /dev/null +++ b/kendo-vue-tailwind/src/App.vue @@ -0,0 +1,7 @@ + + + diff --git a/kendo-vue-tailwind/src/assets/kendoka.svg b/kendo-vue-tailwind/src/assets/kendoka.svg new file mode 100644 index 00000000..ab29eeb7 --- /dev/null +++ b/kendo-vue-tailwind/src/assets/kendoka.svg @@ -0,0 +1 @@ + diff --git a/kendo-vue-tailwind/src/assets/vue.svg b/kendo-vue-tailwind/src/assets/vue.svg new file mode 100644 index 00000000..770e9d33 --- /dev/null +++ b/kendo-vue-tailwind/src/assets/vue.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/kendo-vue-tailwind/src/components/BaseCard.vue b/kendo-vue-tailwind/src/components/BaseCard.vue new file mode 100644 index 00000000..2b89ae18 --- /dev/null +++ b/kendo-vue-tailwind/src/components/BaseCard.vue @@ -0,0 +1,61 @@ + + + diff --git a/kendo-vue-tailwind/src/components/CardsContainer.vue b/kendo-vue-tailwind/src/components/CardsContainer.vue new file mode 100644 index 00000000..842a29a5 --- /dev/null +++ b/kendo-vue-tailwind/src/components/CardsContainer.vue @@ -0,0 +1,75 @@ + + + diff --git a/kendo-vue-tailwind/src/components/HeaderCard.vue b/kendo-vue-tailwind/src/components/HeaderCard.vue new file mode 100644 index 00000000..38cb8a80 --- /dev/null +++ b/kendo-vue-tailwind/src/components/HeaderCard.vue @@ -0,0 +1,49 @@ + + + diff --git a/kendo-vue-tailwind/src/main.ts b/kendo-vue-tailwind/src/main.ts new file mode 100644 index 00000000..a2b254e9 --- /dev/null +++ b/kendo-vue-tailwind/src/main.ts @@ -0,0 +1,6 @@ +import { createApp } from "vue"; +import "@progress/kendo-theme-default/dist/all.css"; +import "./style.css"; +import App from "./App.vue"; + +createApp(App).mount("#app"); diff --git a/kendo-vue-tailwind/src/style.css b/kendo-vue-tailwind/src/style.css new file mode 100644 index 00000000..91f0d928 --- /dev/null +++ b/kendo-vue-tailwind/src/style.css @@ -0,0 +1,221 @@ +@import "tailwindcss"; + +@theme inline { + /* Misc */ + --color-app-surface: var(--kendo-color-app-surface); + --color-on-app-surface: var(--kendo-color-on-app-surface); + --color-subtle: var(--kendo-color-subtle); + --color-surface: var(--kendo-color-surface); + --color-surface-alt: var(--kendo-color-surface-alt); + --color-border: var(--kendo-color-border); + --color-border-alt: var(--kendo-color-border-alt); + /* Base */ + --color-base-subtle: var(--kendo-color-base-subtle); + --color-base-subtle-hover: var(--kendo-color-base-subtle-hover); + --color-base-subtle-active: var(--kendo-color-base-subtle-active); + --color-base: var(--kendo-color-base); + --color-base-hover: var(--kendo-color-base-hover); + --color-base-active: var(--kendo-color-base-active); + --color-base-emphasis: var(--kendo-color-base-emphasis); + --color-base-on-subtle: var(--kendo-color-base-on-subtle); + --color-on-base: var(--kendo-color-on-base); + --color-base-on-surface: var(--kendo-color-base-on-surface); + /* Primary */ + --color-primary-subtle: var(--kendo-color-primary-subtle); + --color-primary-subtle-hover: var(--kendo-color-primary-subtle-hover); + --color-primary-subtle-active: var(--kendo-color-primary-subtle-active); + --color-primary: var(--kendo-color-primary); + --color-primary-hover: var(--kendo-color-primary-hover); + --color-primary-active: var(--kendo-color-primary-active); + --color-primary-emphasis: var(--kendo-color-primary-emphasis); + --color-primary-on-subtle: var(--kendo-color-primary-on-subtle); + --color-on-primary: var(--kendo-color-on-primary); + --color-primary-on-surface: var(--kendo-color-primary-on-surface); + /* Secondary */ + --color-secondary-subtle: var(--kendo-color-secondary-subtle); + --color-secondary-subtle-hover: var(--kendo-color-secondary-subtle-hover); + --color-secondary-subtle-active: var(--kendo-color-secondary-subtle-active); + --color-secondary: var(--kendo-color-secondary); + --color-secondary-hover: var(--kendo-color-secondary-hover); + --color-secondary-active: var(--kendo-color-secondary-active); + --color-secondary-emphasis: var(--kendo-color-secondary-emphasis); + --color-secondary-on-subtle: var(--kendo-color-secondary-on-subtle); + --color-on-secondary: var(--kendo-color-on-secondary); + --color-secondary-on-surface: var(--kendo-color-secondary-on-surface); + /* Tertiary */ + --color-tertiary-subtle: var(--kendo-color-tertiary-subtle); + --color-tertiary-subtle-hover: var(--kendo-color-tertiary-subtle-hover); + --color-tertiary-subtle-active: var(--kendo-color-tertiary-subtle-active); + --color-tertiary: var(--kendo-color-tertiary); + --color-tertiary-hover: var(--kendo-color-tertiary-hover); + --color-tertiary-active: var(--kendo-color-tertiary-active); + --color-tertiary-emphasis: var(--kendo-color-tertiary-emphasis); + --color-tertiary-on-subtle: var(--kendo-color-tertiary-on-subtle); + --color-on-tertiary: var(--kendo-color-on-tertiary); + --color-tertiary-on-surface: var(--kendo-color-tertiary-on-surface); + /* Info */ + --color-info-subtle: var(--kendo-color-info-subtle); + --color-info-subtle-hover: var(--kendo-color-info-subtle-hover); + --color-info-subtle-active: var(--kendo-color-info-subtle-active); + --color-info: var(--kendo-color-info); + --color-info-hover: var(--kendo-color-info-hover); + --color-info-active: var(--kendo-color-info-active); + --color-info-emphasis: var(--kendo-color-info-emphasis); + --color-info-on-subtle: var(--kendo-color-info-on-subtle); + --color-on-info: var(--kendo-color-on-info); + --color-info-on-surface: var(--kendo-color-info-on-surface); + /* Success */ + --color-success-subtle: var(--kendo-color-success-subtle); + --color-success-subtle-hover: var(--kendo-color-success-subtle-hover); + --color-success-subtle-active: var(--kendo-color-success-subtle-active); + --color-success: var(--kendo-color-success); + --color-success-hover: var(--kendo-color-success-hover); + --color-success-active: var(--kendo-color-success-active); + --color-success-emphasis: var(--kendo-color-success-emphasis); + --color-success-on-subtle: var(--kendo-color-success-on-subtle); + --color-on-success: var(--kendo-color-on-success); + --color-success-on-surface: var(--kendo-color-success-on-surface); + /* Warning */ + --color-warning-subtle: var(--kendo-color-warning-subtle); + --color-warning-subtle-hover: var(--kendo-color-warning-subtle-hover); + --color-warning-subtle-active: var(--kendo-color-warning-subtle-active); + --color-warning: var(--kendo-color-warning); + --color-warning-hover: var(--kendo-color-warning-hover); + --color-warning-active: var(--kendo-color-warning-active); + --color-warning-emphasis: var(--kendo-color-warning-emphasis); + --color-warning-on-subtle: var(--kendo-color-warning-on-subtle); + --color-on-warning: var(--kendo-color-on-warning); + --color-warning-on-surface: var(--kendo-color-warning-on-surface); + /* Error */ + --color-error-subtle: var(--kendo-color-error-subtle); + --color-error-subtle-hover: var(--kendo-color-error-subtle-hover); + --color-error-subtle-active: var(--kendo-color-error-subtle-active); + --color-error: var(--kendo-color-error); + --color-error-hover: var(--kendo-color-error-hover); + --color-error-active: var(--kendo-color-error-active); + --color-error-emphasis: var(--kendo-color-error-emphasis); + --color-error-on-subtle: var(--kendo-color-error-on-subtle); + --color-on-error: var(--kendo-color-on-error); + --color-error-on-surface: var(--kendo-color-error-on-surface); + /* Light */ + --color-light-subtle: var(--kendo-color-light-subtle); + --color-light-subtle-hover: var(--kendo-color-light-subtle-hover); + --color-light-subtle-active: var(--kendo-color-light-subtle-active); + --color-light: var(--kendo-color-light); + --color-light-hover: var(--kendo-color-light-hover); + --color-light-active: var(--kendo-color-light-active); + --color-light-emphasis: var(--kendo-color-light-emphasis); + --color-light-on-subtle: var(--kendo-color-light-on-subtle); + --color-on-light: var(--kendo-color-on-light); + --color-light-on-surface: var(--kendo-color-light-on-surface); + /* Dark */ + --color-dark-subtle: var(--kendo-color-dark-subtle); + --color-dark-subtle-hover: var(--kendo-color-dark-subtle-hover); + --color-dark-subtle-active: var(--kendo-color-dark-subtle-active); + --color-dark: var(--kendo-color-dark); + --color-dark-hover: var(--kendo-color-dark-hover); + --color-dark-active: var(--kendo-color-dark-active); + --color-dark-emphasis: var(--kendo-color-dark-emphasis); + --color-dark-on-subtle: var(--kendo-color-dark-on-subtle); + --color-on-dark: var(--kendo-color-on-dark); + --color-dark-on-surface: var(--kendo-color-dark-on-surface); + /* Inverse */ + --color-inverse-subtle: var(--kendo-color-inverse-subtle); + --color-inverse-subtle-hover: var(--kendo-color-inverse-subtle-hover); + --color-inverse-subtle-active: var(--kendo-color-inverse-subtle-active); + --color-inverse: var(--kendo-color-inverse); + --color-inverse-hover: var(--kendo-color-inverse-hover); + --color-inverse-active: var(--kendo-color-inverse-active); + --color-inverse-emphasis: var(--kendo-color-inverse-emphasis); + --color-inverse-on-subtle: var(--kendo-color-inverse-on-subtle); + --color-on-inverse: var(--kendo-color-on-inverse); + --color-inverse-on-surface: var(--kendo-color-inverse-on-surface); + /* Series A */ + --color-series-a: var(--kendo-color-series-a); + --color-series-a-bold: var(--kendo-color-series-a-bold); + --color-series-a-bolder: var(--kendo-color-series-a-bolder); + --color-series-a-subtle: var(--kendo-color-series-a-subtle); + --color-series-a-subtler: var(--kendo-color-series-a-subtler); + /* Series B */ + --color-series-b: var(--kendo-color-series-b); + --color-series-b-bold: var(--kendo-color-series-b-bold); + --color-series-b-bolder: var(--kendo-color-series-b-bolder); + --color-series-b-subtle: var(--kendo-color-series-b-subtle); + --color-series-b-subtler: var(--kendo-color-series-b-subtler); + /* Series C */ + --color-series-c: var(--kendo-color-series-c); + --color-series-c-bold: var(--kendo-color-series-c-bold); + --color-series-c-bolder: var(--kendo-color-series-c-bolder); + --color-series-c-subtle: var(--kendo-color-series-c-subtle); + --color-series-c-subtler: var(--kendo-color-series-c-subtler); + /* Series D */ + --color-series-d: var(--kendo-color-series-d); + --color-series-d-bold: var(--kendo-color-series-d-bold); + --color-series-d-bolder: var(--kendo-color-series-d-bolder); + --color-series-d-subtle: var(--kendo-color-series-d-subtle); + --color-series-d-subtler: var(--kendo-color-series-d-subtler); + /* Series E */ + --color-series-e: var(--kendo-color-series-e); + --color-series-e-bold: var(--kendo-color-series-e-bold); + --color-series-e-bolder: var(--kendo-color-series-e-bolder); + --color-series-e-subtle: var(--kendo-color-series-e-subtle); + --color-series-e-subtler: var(--kendo-color-series-e-subtler); + /* Series F */ + --color-series-f: var(--kendo-color-series-f); + --color-series-f-bold: var(--kendo-color-series-f-bold); + --color-series-f-bolder: var(--kendo-color-series-f-bolder); + --color-series-f-subtle: var(--kendo-color-series-f-subtle); + --color-series-f-subtler: var(--kendo-color-series-f-subtler); + + /* Typography */ + --font-sans: var(--kendo-font-family-sans); + --font-serif: var(--kendo-font-family-sans-serif); + --font-mono: var(--kendo-font-family-monospace); + --text-xs: var(--kendo-font-size-xs); + --text-xs--line-height: var(--kendo-line-height-xs); + --text-sm: var(--kendo-font-size-sm); + --text-sm--line-height: var(--kendo-line-height-sm); + --text-base: var(--kendo-font-size); + --text-base--line-height: var(--kendo-line-height); + --text-lg: var(--kendo-font-size-lg); + --text-lg--line-height: var(--kendo-line-height-lg); + + /* Border Radius */ + --radius-none: var(--kendo-border-radius-none); + --radius-xs: var(--kendo-border-radius-xs); + --radius-sm: var(--kendo-border-radius-sm); + --radius-md: var(--kendo-border-radius-md); + --radius-lg: var(--kendo-border-radius-lg); + --radius-xl: var(--kendo-border-radius-xl); + --radius-2xl: var(--kendo-border-radius-xxl); + --radius-3xl: var(--kendo-border-radius-xxxl); + --radius-4xl: 1.5rem; + --radius-full: var(--kendo-border-radius-full); + + /* Breakpoints */ + --breakpoint-sm: 576px; + --breakpoint-md: 768px; + --breakpoint-lg: 992px; + --breakpoint-xl: 1200px; + --breakpoint-2xl: 1400px; +} + +/* Override Kendo UI Theme variables */ +:root { + /* Custom variables */ + --custom-tw-green: #42b883; + --custom-tw-lightgreen: #00884b; + + /* Override Kendo UI Theme variables */ + --kendo-color-primary: var(--custom-tw-green); + --kendo-color-info: var(--custom-tw-lightgreen); +} + +/* Customize kendo component styles */ +.k-card.header-card { + border: var(--custom-tw-green) solid 1px; +} + +.action-button { + --kendo-color-primary: var(--custom-tw-lightgreen); +} diff --git a/kendo-vue-tailwind/src/vite-env.d.ts b/kendo-vue-tailwind/src/vite-env.d.ts new file mode 100644 index 00000000..11f02fe2 --- /dev/null +++ b/kendo-vue-tailwind/src/vite-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/kendo-vue-tailwind/tsconfig.app.json b/kendo-vue-tailwind/tsconfig.app.json new file mode 100644 index 00000000..3dbbc453 --- /dev/null +++ b/kendo-vue-tailwind/tsconfig.app.json @@ -0,0 +1,15 @@ +{ + "extends": "@vue/tsconfig/tsconfig.dom.json", + "compilerOptions": { + "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "erasableSyntaxOnly": true, + "noFallthroughCasesInSwitch": true, + "noUncheckedSideEffectImports": true + }, + "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"] +} diff --git a/kendo-vue-tailwind/tsconfig.json b/kendo-vue-tailwind/tsconfig.json new file mode 100644 index 00000000..1ffef600 --- /dev/null +++ b/kendo-vue-tailwind/tsconfig.json @@ -0,0 +1,7 @@ +{ + "files": [], + "references": [ + { "path": "./tsconfig.app.json" }, + { "path": "./tsconfig.node.json" } + ] +} diff --git a/kendo-vue-tailwind/tsconfig.node.json b/kendo-vue-tailwind/tsconfig.node.json new file mode 100644 index 00000000..f85a3990 --- /dev/null +++ b/kendo-vue-tailwind/tsconfig.node.json @@ -0,0 +1,25 @@ +{ + "compilerOptions": { + "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", + "target": "ES2023", + "lib": ["ES2023"], + "module": "ESNext", + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "verbatimModuleSyntax": true, + "moduleDetection": "force", + "noEmit": true, + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "erasableSyntaxOnly": true, + "noFallthroughCasesInSwitch": true, + "noUncheckedSideEffectImports": true + }, + "include": ["vite.config.ts"] +} diff --git a/kendo-vue-tailwind/vite.config.ts b/kendo-vue-tailwind/vite.config.ts new file mode 100644 index 00000000..7a320a44 --- /dev/null +++ b/kendo-vue-tailwind/vite.config.ts @@ -0,0 +1,8 @@ +import { defineConfig } from "vite"; +import vue from "@vitejs/plugin-vue"; +import tailwindcss from "@tailwindcss/vite"; + +// https://vite.dev/config/ +export default defineConfig({ + plugins: [vue(), tailwindcss()], +});