diff --git a/.eslintrc.json b/.eslintrc.json deleted file mode 100644 index aa23c15..0000000 --- a/.eslintrc.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "env": { - "browser": true, - "es6": true, - "node": true - }, - "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:@typescript-eslint/recommended-requiring-type-checking"], - "parser": "@typescript-eslint/parser", - "parserOptions": { - "project": ["./tsconfig.json"], - "ecmaVersion": 2019, - "sourceType": "module" - }, - "overrides": [ - { - "files": ["*.svelte"], - "processor": "svelte3/svelte3" - } - ], - "settings": { - "svelte3/typescript": true - }, - "plugins": ["@typescript-eslint", "svelte3"] -} diff --git a/.husky/pre-push b/.husky/pre-push index 34352b0..9028981 100755 --- a/.husky/pre-push +++ b/.husky/pre-push @@ -1,4 +1 @@ -#!/bin/sh -. "$(dirname "$0")/_/husky.sh" - npm run hooks:pre-push diff --git a/eslint.config.js b/eslint.config.js new file mode 100644 index 0000000..369dc04 --- /dev/null +++ b/eslint.config.js @@ -0,0 +1,49 @@ +// eslint.config.js +import js from "@eslint/js"; +import svelte from "eslint-plugin-svelte"; +import globals from "globals"; +import ts from "typescript-eslint"; +import svelteConfig from "./svelte.config.js"; + +export default ts.config( + js.configs.recommended, + ...ts.configs.recommended, + ...svelte.configs.recommended, + { + languageOptions: { + globals: { + ...globals.browser, + ...globals.node, + }, + }, + }, + { + files: ["**/*.svelte", "**/*.svelte.ts", "**/*.svelte.js"], + // See more details at: https://typescript-eslint.io/packages/parser/ + languageOptions: { + parserOptions: { + projectService: true, + extraFileExtensions: [".svelte"], // Add support for additional file extensions, such as .svelte + parser: ts.parser, + // Specify a parser for each language, if needed: + // parser: { + // ts: ts.parser, + // js: espree, // Use espree for .js files (add: import espree from 'espree') + // typescript: ts.parser + // }, + + // We recommend importing and specifying svelte.config.js. + // By doing so, some rules in eslint-plugin-svelte will automatically read the configuration and adjust their behavior accordingly. + // While certain Svelte settings may be statically loaded from svelte.config.js even if you don’t specify it, + // explicitly specifying it ensures better compatibility and functionality. + svelteConfig, + }, + }, + }, + { + rules: { + // Override or add rule settings here, such as: + // 'svelte/rule-name': 'error' + }, + }, +); diff --git a/package.json b/package.json index 5588c85..4bc58d8 100644 --- a/package.json +++ b/package.json @@ -17,35 +17,37 @@ "hooks:pre-push": "run-s lint:commit" }, "devDependencies": { - "@commitlint/cli": "^17.0.2", - "@commitlint/config-conventional": "^17.0.2", - "@prettier/plugin-xml": "^2.2.0", - "@sveltejs/vite-plugin-svelte": "^1.0.0-next.47", - "@tsconfig/svelte": "^3.0.0", - "@typescript-eslint/eslint-plugin": "^5.27.1", - "@typescript-eslint/parser": "^5.27.1", - "commitizen": "^4.2.4", + "@commitlint/cli": "^19.8.1", + "@commitlint/config-conventional": "^19.8.1", + "@prettier/plugin-xml": "^3.4.1", + "@sveltejs/vite-plugin-svelte": "^5.0.3", + "@tsconfig/svelte": "^5.0.4", + "@typescript-eslint/eslint-plugin": "^8.32.1", + "@typescript-eslint/parser": "^8.32.1", + "commitizen": "^4.3.1", "cz-conventional-changelog": "^3.3.0", - "eslint": "^8.17.0", - "eslint-plugin-svelte3": "^4.0.0", - "husky": "^8.0.1", - "lint-staged": "^13.0.0", + "eslint": "^9.26.0", + "eslint-plugin-svelte": "^3.6.0", + "globals": "^16.1.0", + "husky": "^9.1.7", + "lint-staged": "^16.0.0", "npm-run-all": "^4.1.5", - "prettier": "^2.6.2", - "prettier-plugin-properties": "^0.1.0", - "prettier-plugin-svelte": "^2.7.0", - "pretty-quick": "^3.1.3", - "svelte": "^3.48.0", - "svelte-check": "^2.7.2", - "svelte-preprocess": "^4.10.7", - "tslib": "^2.4.0", - "typescript": "^4.7.3", - "vite": "^2.9.10" + "prettier": "^3.5.3", + "prettier-plugin-properties": "^0.3.0", + "prettier-plugin-svelte": "^3.4.0", + "pretty-quick": "^4.1.1", + "svelte": "^5.30.1", + "svelte-check": "^4.2.1", + "svelte-preprocess": "^6.0.3", + "tslib": "^2.8.1", + "typescript": "^5.8.3", + "typescript-eslint": "^8.32.1", + "vite": "^6.3.5" }, "dependencies": { - "@ui5/webcomponents": "^2.2.0", - "@ui5/webcomponents-base": "^2.2.0", - "@ui5/webcomponents-fiori": "^2.2.0", - "@ui5/webcomponents-icons": "^2.2.0" + "@ui5/webcomponents": "^2.10.0", + "@ui5/webcomponents-base": "^2.10.0", + "@ui5/webcomponents-fiori": "^2.10.0", + "@ui5/webcomponents-icons": "^2.10.0" } } diff --git a/src/App.svelte b/src/App.svelte index 21fcc41..e4c76df 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -1,8 +1,7 @@
-
- - - - - -
+
- +
- - - Add Todo + + + Add Todo
@@ -250,99 +198,18 @@
Title: - +
Date: - +
- Cancel - Save -
- - - - - SAP Horizon Morning - SAP Horizon Evening - SAP Horizon HCB - SAP Horizon HCW - SAP Quartz Light - SAP Quartz Dark - SAP Quartz HCB - SAP Quartz HCW - - - - -
- -
- John Doe - Svelte Developer -
-
- -
- - Settings - Help - Sign out - -
- - - -
-
-
- RTL -
- -
-
- -
-
- Compact -
- -
- -
- Close -
- - - -
- - Help -
- -
- - UI5 Web Components Svelte Sample App -
- -

- Release: b225.20220729335
- Server: pk21443x3132
- Timestamp: 2022-08-18T10:29:03.159+0200
- Company ID: SAP
- UI version: SAP Fiori
- Edition: Enterprise
- Admin version: Svelte Admin
-

-
- For more information, please visit our documentation. -

-

- Close + Cancel + Save
@@ -379,15 +246,6 @@ width: calc(100% - 2rem); } - .app-header-logo { - height: 2rem; - max-height: 2rem; - } - - .app-bar-theming-popover { - width: 250px; - } - .create-todo-wrapper { display: flex; align-items: center; @@ -469,66 +327,4 @@ width: 100%; } } - .app-bar-profile-popover { - width: 250px; - } - - #settings-dialog { - max-width: 300px; - } - - .dialog-button { - display: flex; - justify-content: flex-end; - margin-top: 0.625rem; - margin-bottom: -0.425rem; - } - - .profile-settings, - .help-header { - display: flex; - flex-direction: row; - justify-content: flex-start; - } - - .profile-text { - display: flex; - flex-direction: column; - justify-content: center; - margin-inline-start: 1rem; - } - - .app-header-logo { - height: 2rem; - } - - .profile-settings-list { - margin-top: 1.25rem; - } - - .help-dialog-text { - font-size: 0.875rem; - } - - .profile-rtl-switch { - width: 100%; - display: flex; - align-items: center; - justify-content: space-between; - } - - #header-title-align { - margin: 1rem 0; - gap: 0.225rem; - } - - #header-logo-align { - margin: 0.225rem 3.225rem 0.225rem 0; - align-items: center; - gap: 0.435rem; - } - - #help-dialog::part(header) { - justify-content: flex-start; - } diff --git a/src/lib/Header.svelte b/src/lib/Header.svelte new file mode 100644 index 0000000..cdd2127 --- /dev/null +++ b/src/lib/Header.svelte @@ -0,0 +1,250 @@ + + +
+ + + + + + + +
+ + + + SAP Horizon Morning + SAP Horizon Evening + SAP Horizon HCB + SAP Horizon HCW + SAP Quartz Light + SAP Quartz Dark + SAP Quartz HCB + SAP Quartz HCW + + + + +
+ +
+ John Doe + Svelte Developer +
+
+ +
+ + Settings + Help + Sign out + +
+ + + +
+
+
+ RTL +
+ +
+
+ +
+
+ Compact +
+ +
+ +
+ + + Close +
+ + + +
+ + Help +
+ +
+ + UI5 Web Components Svelte Sample App +
+ +

+ Release: b225.20220729335
+ Server: pk21443x3132
+ Timestamp: 2022-08-18T10:29:03.159+0200
+ Company ID: SAP
+ UI version: SAP Fiori
+ Edition: Enterprise
+ Admin version: Svelte Admin
+

+
+ For more information, please visit our documentation. +

+
+ + + Close +
+ + + diff --git a/src/lib/TodoItem.svelte b/src/lib/TodoItem.svelte index d6874ce..168a83d 100644 --- a/src/lib/TodoItem.svelte +++ b/src/lib/TodoItem.svelte @@ -3,9 +3,14 @@ import "@ui5/webcomponents/dist/ListItemCustom"; import type { TodoItemT } from "../types/TodoItem.type"; - // Props - export let item: TodoItemT; - export let datakey: number; + + interface Props { + // Props + item: TodoItemT; + datakey: number; + } + + let { item, datakey }: Props = $props(); // Events do not bubble from nested components // in svelte, we must dispatch them @@ -28,8 +33,8 @@
{item.desc} - finish before: {item.deadline}
- Edit - Delete + Edit + Delete
diff --git a/src/lib/TodoList.svelte b/src/lib/TodoList.svelte index 5ff976f..0f0fd97 100644 --- a/src/lib/TodoList.svelte +++ b/src/lib/TodoList.svelte @@ -1,13 +1,20 @@ - + {#each items as item (item.id)} {/each} diff --git a/src/main.ts b/src/main.ts index f485f6a..53879de 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,7 +1,8 @@ +import { mount } from "svelte"; import App from "./App.svelte"; -const app = new App({ - target: document.getElementById("app"), +const app = mount(App, { + target: document.getElementById("app")!, }); export default app; diff --git a/src/stores/stores.svelte.ts b/src/stores/stores.svelte.ts new file mode 100644 index 0000000..72f100d --- /dev/null +++ b/src/stores/stores.svelte.ts @@ -0,0 +1,110 @@ +import type { TodoItemT } from "src/types/TodoItem.type"; +import Dialog from "@ui5/webcomponents/dist/Dialog.js"; + +const defaultTodos: Array = [ + { + id: 1, + desc: "Get some carrots", + deadline: "27/7/2018", + done: false, + }, + { + id: 2, + desc: "Do some magic", + deadline: "22/7/2018", + done: false, + }, + { + id: 3, + desc: "Go to the gym", + deadline: "24/7/2018", + done: false, + }, + { + id: 4, + desc: "Buy milk", + deadline: "30/7/2018", + done: false, + }, +]; + +const defaultDoneTodos: Array = [ + { + id: 5, + desc: "Eat some fruits", + deadline: "29/7/2018", + done: true, + }, +]; + +type TodoItemType = { + id: number; + desc: string; + deadline: string; + done: boolean; +}; + +class TodoStore { + #todos = $state([]); + + constructor(todos: T[]) { + this.#todos = todos; + } + + public get todos(): T[] { + return this.#todos; + } + + add(newTodo: Pick) { + const item = { + ...newTodo, + id: this.todos.length, + done: false, + }; + + this.todos.push(item); + } + + toggleDone(id: T["id"]) { + const item = this.#todos.find((t) => t.id === id); + + console.log(item, id); + + if (item) { + this.#todos = [ + ...this.#todos.filter((t) => t.id !== id), + { + ...item, + done: !item.done, + }, + ]; + } + } + + remove(id: T["id"]) { + this.#todos = this.#todos.filter((t) => t.id !== id); + } + + update(id: T["id"], updatedItem: T) { + const oldItem = this.#todos.find((t) => t.id === id); + + if (oldItem) { + this.#todos = [...this.#todos.filter((t) => t.id !== id), updatedItem]; + } + } +} + +export const todoStore = new TodoStore([...defaultTodos, ...defaultDoneTodos]); + +interface ElementReferences { + dialog: { + [key: string]: Dialog | null; + }; +} + +export const references = $state({ + dialog: { + settingsDialog: null, + helpDialog: null, + }, +}); diff --git a/svelte.config.js b/svelte.config.js index 589c4fc..69d7904 100644 --- a/svelte.config.js +++ b/svelte.config.js @@ -1,7 +1,7 @@ -import sveltePreprocess from "svelte-preprocess"; +import { vitePreprocess } from "@sveltejs/vite-plugin-svelte"; export default { - // Consult https://github.com/sveltejs/svelte-preprocess + // Consult https://svelte.dev/docs#compile-time-svelte-preprocess // for more information about preprocessors - preprocess: sveltePreprocess(), + preprocess: vitePreprocess(), }; diff --git a/tsconfig.json b/tsconfig.json index f9039a5..4d6c04c 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -15,5 +15,6 @@ "allowJs": true, "checkJs": true }, - "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"] + "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"], + "references": [{ "path": "./tsconfig.node.json" }] } diff --git a/tsconfig.node.json b/tsconfig.node.json new file mode 100644 index 0000000..408b690 --- /dev/null +++ b/tsconfig.node.json @@ -0,0 +1,13 @@ +{ + "compilerOptions": { + "composite": true, + "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", + "skipLibCheck": true, + "module": "ESNext", + "moduleResolution": "Bundler", + "strict": true, + "noEmit": true, + "noUncheckedSideEffectImports": true + }, + "include": ["vite.config.ts"] +} diff --git a/vite.config.js b/vite.config.js index 9637db7..d17c654 100644 --- a/vite.config.js +++ b/vite.config.js @@ -1,7 +1,7 @@ -import { defineConfig, splitVendorChunkPlugin } from "vite"; +import { defineConfig } from "vite"; import { svelte } from "@sveltejs/vite-plugin-svelte"; // https://vitejs.dev/config/ export default defineConfig({ - plugins: [svelte(), splitVendorChunkPlugin()], + plugins: [svelte()], });