@timus-networks/theme 1.0.2 → 1.0.4

package/components-js/interfaces.js

@@ -0,0 +1 @@
+export {};

package/components-js/utils.d.ts

@@ -0,0 +1,6 @@
+export declare class Utils {
+    private timeout;
+    debounce(func: Function, delay: number): (...args: any[]) => void;
+    generateRandomId(): string;
+}
+export declare const utils: Utils;

package/components-js/utils.js

@@ -0,0 +1,17 @@
+export class Utils {
+    timeout = null;
+    debounce(func, delay) {
+        return (...args) => {
+            if (this.timeout !== null) {
+                clearTimeout(this.timeout);
+            }
+            this.timeout = setTimeout(() => {
+                func(...args);
+            }, delay);
+        };
+    }
+    generateRandomId() {
+        return Date.now().toString(36) + Math.random().toString(36).slice(2, 9);
+    }
+}
+export const utils = new Utils();

package/convert.js

@@ -95,4 +95,13 @@ let imports = declarationFiles
   .join('\n');
 
 fs.writeFileSync('./index.d.ts', imports);
+
+const tsFiles = glob.sync('./components-js/**/*.ts');
+tsFiles.forEach((file) => {
+  if (!file.endsWith('.d.ts') && fs.existsSync(file)) {
+    fs.unlinkSync(file);
+    console.log(`### Ts dosyası silindi: ${file}`);
+  }
+});
+
 console.log('### index.d.ts dosyası oluşturuldu.');

package/index.d.ts

@@ -0,0 +1 @@
+export * from './components-js/utils';

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@timus-networks/theme",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "A comprehensive Nuxt.js module providing a tailored theme experience with integrated TailwindCSS support for applications.",
   "main": "module.js",
   "types": "index.d.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "convert": "node js-converter.js",
+    "convert": "node convert.js",
     "pub": "npm run convert && npm publish --access public"
   },
   "repository": {

package/plugins/theme-provider.js

@@ -0,0 +1,68 @@
+import Vue from 'vue';
+/**
+ * Helper functions to handle localStorage safely
+ */
+function getDarkModeFromLocalStorage() {
+    return process.client && localStorage.getItem('darkMode') === 'true';
+}
+function setDarkModeToLocalStorage(value) {
+    if (process.client) {
+        localStorage.setItem('darkMode', value.toString());
+    }
+}
+function setHtmlDarkClass(isDark) {
+    if (process.client) {
+        const htmlElement = document.documentElement;
+        if (isDark) {
+            htmlElement.classList.add('dark');
+        }
+        else {
+            htmlElement.classList.remove('dark');
+        }
+    }
+}
+/**
+ * ThemeProvider: A Vue instance to provide theme related functionalities.
+ *
+ * Usage:
+ * - Change the theme on button click:
+ *   this.$theme.setDarkMode(!this.$theme.isDark);
+ *
+ * - Register the theme change listener:
+ *   this.$theme.$on('darkMode', (value) => { console.log('darkMode:', value); });
+ */
+export const ThemeProvider = new Vue({
+    data() {
+        return {
+            isDarkMode: getDarkModeFromLocalStorage(),
+        };
+    },
+    computed: {
+        isDark: {
+            get() {
+                return this.isDarkMode;
+            },
+            set(value) {
+                this.isDarkMode = value;
+                setDarkModeToLocalStorage(value);
+                this.$emit('darkMode', value);
+            },
+        },
+    },
+    watch: {
+        isDark(newVal) {
+            setHtmlDarkClass(newVal);
+        },
+    },
+    methods: {
+        setDarkMode(value) {
+            this.isDark = value; // This will trigger the setter of isDark.
+        },
+    },
+    created() {
+        setHtmlDarkClass(this.isDark); // Sayfa yüklendiğinde fonksiyonu manuel olarak tetikle
+    },
+});
+export default (context, inject) => {
+    inject('theme', ThemeProvider);
+};

package/scss/_layers.scss

@@ -1,9 +1,9 @@
-@layer components {
-  @import 'colors';
-  @import 'containers';
-  @import 'fonts';
-  @import 'icons';
-  @import 'buttons.scss';
-  @import 'inputs.scss';
-  @import 'selectbox.scss';
-}
+// @layer components {
+//   @import 'colors';
+//   @import 'containers';
+//   @import 'fonts';
+//   @import 'icons';
+//   @import 'buttons.scss';
+//   @import 'inputs.scss';
+//   @import 'selectbox.scss';
+// }

package/components-js/interfaces.ts

@@ -1,11 +0,0 @@
-export interface ThemeProviderTheme extends Vue {
-  isDarkMode: boolean;
-  isDark: boolean;
-  setDarkMode(value: boolean): void;
-}
-
-declare module 'vue/types/vue' {
-  interface Vue {
-    $theme: ThemeProviderTheme;
-  }
-}

package/components-js/utils.ts

@@ -1,20 +0,0 @@
-export class Utils {
-  private timeout: ReturnType<typeof setTimeout> | null = null;
-
-  debounce(func: Function, delay: number) {
-    return (...args: any[]) => {
-      if (this.timeout !== null) {
-        clearTimeout(this.timeout);
-      }
-      this.timeout = setTimeout(() => {
-        func(...args);
-      }, delay);
-    };
-  }
-
-  generateRandomId(): string {
-    return Date.now().toString(36) + Math.random().toString(36).slice(2, 9);
-  }
-}
-
-export const utils = new Utils();

package/js-converter.js

@@ -1,90 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-const execSync = require('child_process').execSync;
-const glob = require('glob');
-
-// Eğer 'components-js' klasörü varsa sil
-if (fs.existsSync('components-js')) {
-  fs.rmSync('components-js', { recursive: true, force: true });
-}
-
-// Yeni bir 'components-js' klasörü oluştur
-fs.mkdirSync('components-js');
-
-// components'in içerisindeki her şeyi output'a kopyala
-const copyRecursiveSync = function (src, dest) {
-  const exists = fs.existsSync(src);
-  const stats = exists && fs.statSync(src);
-  const isDirectory = exists && stats.isDirectory();
-  if (exists && isDirectory) {
-    if (!fs.existsSync(dest)) fs.mkdirSync(dest);
-    fs.readdirSync(src).forEach((childItemName) => {
-      copyRecursiveSync(path.join(src, childItemName), path.join(dest, childItemName));
-    });
-  } else {
-    fs.copyFileSync(src, dest);
-  }
-};
-
-copyRecursiveSync('./components-ts', './components-js');
-
-// output klasöründeki .vue dosyalarını bul
-const vueFiles = glob.sync('./components-js/**/*.vue');
-
-vueFiles.forEach((file) => {
-  const content = fs.readFileSync(file, 'utf-8');
-  const scriptMatch = content.match(/<script lang="ts">(.*?)<\/script>/s);
-
-  if (scriptMatch) {
-    let tsCode = scriptMatch[1];
-    tsCode = tsCode.replace(/import .*?from '.*?.vue';/g, (match) => `// ${match}`);
-
-    const tsFilePath = file.replace('.vue', '.temp.ts');
-    fs.writeFileSync(tsFilePath, tsCode, 'utf-8');
-
-    let hasError = false;
-    const tscPath = path.resolve(__dirname, '../../../node_modules/.bin/tsc');
-
-    try {
-      execSync(`${tscPath} ${tsFilePath} --allowJs false --module esnext --target esnext --declaration true`, { encoding: 'utf8' });
-    } catch (e) {
-      // console.error("### Derleme hatası:", tsFilePath, e);
-      // console.error('DERLEME HATASI: ', e.stdout.toString());
-      hasError = true;
-    }
-
-    if (hasError) {
-      // temp.d.ts dosyasını yeniden oluştur ve adını
-      const tsOutputFilePath = tsFilePath.replace('.temp.ts', '.temp.d.ts');
-      const desiredOutputFilePath = tsFilePath.replace('.temp.ts', '.d.ts');
-      if (fs.existsSync(tsOutputFilePath)) {
-        fs.renameSync(tsOutputFilePath, desiredOutputFilePath);
-      }
-      const jsCode = fs.readFileSync(tsFilePath.replace('.ts', '.js'), 'utf-8');
-      const finalJsCode = jsCode.replace(/\/\/ import/g, 'import');
-      const newContent = content.replace(/<script lang="ts">(.*?)<\/script>/s, `<script>${finalJsCode}</script>`);
-      fs.writeFileSync(file, newContent, 'utf-8');
-    }
-
-    // Dosyaları sil
-    if (fs.existsSync(tsFilePath)) fs.unlinkSync(tsFilePath);
-    if (fs.existsSync(tsFilePath.replace('.ts', '.js'))) fs.unlinkSync(tsFilePath.replace('.ts', '.js'));
-  }
-});
-
-// vueFiles.forEach döngüsünden sonra
-const declarationFiles = glob.sync('./components-js/**/*.d.ts');
-
-// Bu dosyaları import eden bir index.d.ts oluştur
-let imports = declarationFiles
-  .map((file) => {
-    // Dosya yolundan modül adını elde etmek için gereken işlemler
-    let modulePath = path.relative('.', file);
-    modulePath = modulePath.replace('.d.ts', '');
-    modulePath = modulePath.replace(/\\/g, '/'); // Windows için ters eğik çizgileri düzelt
-    return `export * from './${modulePath}';`;
-  })
-  .join('\n');
-
-fs.writeFileSync('./index.d.ts', imports);
-console.log("### index.d.ts dosyası oluşturuldu.");

package/plugins/theme-provider.ts

@@ -1,75 +0,0 @@
-import { Context } from '@nuxt/types';
-import Vue from 'vue';
-
-/**
- * Helper functions to handle localStorage safely
- */
-function getDarkModeFromLocalStorage(): boolean {
-  return process.client && localStorage.getItem('darkMode') === 'true';
-}
-
-function setDarkModeToLocalStorage(value: boolean): void {
-  if (process.client) {
-    localStorage.setItem('darkMode', value.toString());
-  }
-}
-
-function setHtmlDarkClass(isDark: boolean): void {
-  if (process.client) {
-    const htmlElement = document.documentElement;
-    if (isDark) {
-      htmlElement.classList.add('dark');
-    } else {
-      htmlElement.classList.remove('dark');
-    }
-  }
-}
-
-/**
- * ThemeProvider: A Vue instance to provide theme related functionalities.
- *
- * Usage:
- * - Change the theme on button click:
- *   this.$theme.setDarkMode(!this.$theme.isDark);
- *
- * - Register the theme change listener:
- *   this.$theme.$on('darkMode', (value) => { console.log('darkMode:', value); });
- */
-export const ThemeProvider = new Vue({
-  data() {
-    return {
-      isDarkMode: getDarkModeFromLocalStorage(),
-    };
-  },
-  computed: {
-    isDark: {
-      get(): boolean {
-        return this.isDarkMode;
-      },
-      set(value: boolean) {
-        this.isDarkMode = value;
-        setDarkModeToLocalStorage(value);
-        this.$emit('darkMode', value);
-      },
-    },
-  },
-  watch: {
-    isDark(newVal: boolean) {
-      setHtmlDarkClass(newVal);
-    },
-  },
-  methods: {
-    setDarkMode(value: boolean) {
-      this.isDark = value; // This will trigger the setter of isDark.
-    },
-  },
-  created() {
-    setHtmlDarkClass(this.isDark); // Sayfa yüklendiğinde fonksiyonu manuel olarak tetikle
-  },
-});
-
-type InjectFunction = (key: string, value: any) => void;
-
-export default (context: Context, inject: InjectFunction) => {
-  inject('theme', ThemeProvider);
-};