@timus-networks/theme 1.0.183 → 2.0.0

package/components/TimusIcons.vue

@@ -0,0 +1,54 @@
+<template>
+  <el-input v-model="search" placeholder="Search..." clearable class="my-4" />
+  <div class="grid sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
+    <template v-for="(item, index) in filter" :key="index">
+      <div :class="`icon flex flex-col items-center justify-center !gap-4 bg-white border border-gray-200 rounded-md h-32 text-3xl [&::before]:!font-light [&::before]:text-gray-800 isax-${item}`">
+        <span class="text-xs">isax-{{ item }}</span>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+  export default defineComponent({
+    name: 'TimusIcons',
+    props: {
+      icons: {
+        default: () => [],
+        type: Array,
+      },
+    },
+    data() {
+      return {
+        search: '',
+        class: 'container class',
+      };
+    },
+    computed: {
+      filter() {
+        return this.icons.filter((item) => item.includes(this.search));
+      },
+    },
+  });
+</script>
+
+<style scoped>
+  .icon {
+    color: var(--gray-500);
+
+    &::before {
+      transition: all 0.4s;
+    }
+
+    &:hover {
+      background-color: var(--primary-500);
+      color: #ffffff;
+      transition: all 0.4s;
+
+      &::before {
+        color: #ffffff;
+        transition: all 0.4s;
+      }
+    }
+  }
+</style>

package/generate-icon.js

@@ -0,0 +1,22 @@
+const fs = require('fs');
+// SVG dosyasının yolunu belirtin
+const svgFilePath = './public/isax/fonts/iconsax.svg';
+// SVG dosyasını oku
+const svgContent = fs.readFileSync(svgFilePath, 'utf-8');
+// `glyph-name` özelliklerini çıkar
+const glyphNames = [];
+const glyphNameRegex = /glyph-name="([^"]+)"/g;
+let match;
+
+while ((match = glyphNameRegex.exec(svgContent)) !== null) {
+  glyphNames.push(match[1]);
+}
+
+// JSON olarak dışa aktar
+const outputFilePath = './public/isax/icons.json';
+let outputContent = `{ "data": ${JSON.stringify(glyphNames, null, 2)}}\n`;
+
+// Dışa aktarma dosyasını yaz
+fs.writeFileSync(outputFilePath, outputContent, 'utf-8');
+
+console.log('icon.json dosyası, glyph adlarının listesiyle oluşturuldu.');

package/module.ts

@@ -0,0 +1,84 @@
+// modules/my-module.ts
+import { defineNuxtModule } from '@nuxt/kit';
+import { readdirSync } from 'fs';
+import { addComponent, addPlugin, createResolver } from 'nuxt/kit';
+import { join, parse, resolve } from 'path';
+
+import PackageJson from './package.json';
+
+export default defineNuxtModule({
+  meta: {
+    name: PackageJson.name,
+    configKey: 'theme',
+  },
+  hooks: {
+    'pages:extend': (pages) => {
+      const resolver = createResolver(import.meta.url);
+
+      pages.push({
+        name: 'icons',
+        path: '/icons',
+        mode: 'client',
+        file: resolver.resolve('./pages/icons.vue'),
+      });
+    },
+    'nitro:config': async (nitroConfig) => {
+      nitroConfig.publicAssets ||= [];
+      nitroConfig.publicAssets.push({
+        dir: resolve(__dirname, './public'),
+        maxAge: 60 * 60 * 24 * 365, // 1 year
+      });
+    },
+  },
+  setup(options, nuxt) {
+    const resolver = createResolver(import.meta.url);
+
+    // Modülünüzün kurulumu burada yapılır
+    console.info(`'${PackageJson.name}' has been loaded with options:`, options);
+
+    options = {
+      ...options,
+      module: PackageJson.name, // bu external olarak nuxt.config içerisinde tanımlanan değer '@timus-networks/table' olarak direk json'daki
+      version: PackageJson.version,
+      client: options.client ? 'client' : 'server',
+    };
+
+    // Bileşenleri otomatik olarak dahil etme
+    const components_dir_list = ['components'];
+    const addComponentFromFolder = (folder: string, mode: 'client' | 'server' | 'all') => {
+      const path = resolve(__dirname, folder);
+      const files = readdirSync(path);
+
+      files.forEach((file) => {
+        const { name } = parse(file);
+
+        addComponent({
+          name: join(name),
+          filePath: resolve(path, file),
+          mode,
+        });
+      });
+    };
+
+    components_dir_list.forEach((folder) => {
+      addComponentFromFolder(folder, options.client);
+    });
+
+    // Örnek olarak, bir plugin ekleyelim
+    addPlugin(resolver.resolve('./plugins/sample-plugin.ts'));
+
+    /**
+    // Örnek olarak, bir page ekleyelim. Ama bunu hooks altına aldım. Orada olmasını tavsiye ediyor dokuman.
+    // https://nuxt.com/docs/guide/going-further/modules burada "However, we do not recommend" bunu arat
+    nuxt.hook('pages:extend', (pages) => {
+      pages.push({
+        name: 'icons',
+        path: '/icons',
+        file: resolver.resolve('./pages/icons.vue'),
+      });
+    });
+     */
+
+    nuxt.options.css.push(resolver.resolve('./public/isax/style.scss'));
+  },
+});

package/package.json

@@ -1,19 +1,16 @@
 {
   "name": "@timus-networks/theme",
-  "version": "1.0.183",
-  "description": "A comprehensive Nuxt.js module providing a tailored theme experience with integrated TailwindCSS support for applications.",
-  "main": "module.js",
-  "types": "index.d.ts",
-  "typings": "./index.d.ts",
-  "author": "Serkan Konakcı<serkan.konakci@timusnetworks.com>",
-  "license": "MIT",
+  "version": "2.0.0",
+  "description": "Nuxt module for Iconsax icons",
+  "main": "module.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "convert-js": "node convert-js.js",
-    "convert-sass": "node convert-sass.js",
-    "fix": "sh -c 'cd $(git rev-parse --show-toplevel) && git diff --name-only --diff-filter=ACMRTUXB HEAD | grep -vE \".css$|.scss$\" | xargs -I {} sh -c \"npx prettier --write \\\"{}\\\" && npx eslint --fix \\\"{}\\\"\"'",
-    "prepack": "npm run fix",
-    "pub": "npm run convert-js && npm run convert-sass && npm publish --access public"
+    "lint:prettier": "npx prettier --write --list-different \"{**/*.js,**/*.vue,**/*.scss,!(node*)**/*.js}\"",
+    "lint:eslint": "eslint --ext \".js,.ts,.vue,.json\" .",
+    "lint:stylelint": "stylelint \"**/*.{scss,sass,html,vue}\"",
+    "fix": "npm run lint:prettier && npm run lint:eslint -- --fix && npm run lint:stylelint -- --fix",
+    "prepack": "npm run fix && node generate-icon.js",
+    "pub": "npm publish --access restricted"
   },
   "repository": {
     "type": "git",
@@ -21,19 +18,21 @@
   },
   "keywords": [
     "nuxt",
+    "nuxt3",
     "module",
     "component",
-    "vuejs",
-    "theme",
-    "tailwind"
+    "vue",
+    "vue3",
+    "icon",
+    "iconsax"
   ],
   "peerDependencies": {
-    "vue": "*"
+    "vue": "^3.x"
   },
+  "author": "Serkan Konakcı<serkan.konakci@timusnetworks.com>",
+  "license": "MIT",
   "dependencies": {
     "@nuxtjs/tailwindcss": "*",
-    "sass": "*",
-    "sass-loader": "*",
     "tailwindcss": "*"
   },
   "devDependencies": {

package/pages/icons.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="flex flex-col gap-4">
+    <div class="text-gray-800 text-4xl">{{ icons?.length }} icons</div>
+    <p class="text-gray-500 !text-lg font-light">Iconsax icons designed to make your website or app attractive, visually consistent and simply beautiful (https://vuesax.com/).</p>
+    <timus-icons ref="iconsRef" :icons="icons" />
+  </div>
+</template>
+
+<script setup>
+  definePageMeta({
+    layout: 'modules',
+    validate: async (route) =>
+      // Check if the id is made up of digits
+      true || (typeof route.params.id === 'string' && /^\d+$/.test(route.params.id)),
+  });
+  useHead({
+    title: 'Timus Modules Manager',
+    meta: [{ name: 'description', content: 'My amazing site.' }],
+    bodyAttrs: { class: 'test' },
+    script: [{ innerHTML: "console.log('Hello world')" }],
+  });
+</script>
+
+<script>
+  export default {
+    data() {
+      return {
+        icons: [],
+      };
+    },
+    mounted() {
+      this.getIcons();
+    },
+    methods: {
+      async getIcons() {
+        try {
+          const response = await $fetch('/isax/icons.json');
+
+          this.icons = response.data;
+        } catch (error) {
+          console.error('Fetch Error:', error);
+        }
+      },
+    },
+  };
+</script>

package/plugins/sample-plugin.ts

@@ -0,0 +1,5 @@
+import { defineNuxtPlugin } from 'nuxt/app';
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.provide('sample', () => {console.log('sample plugins');}); // compositionAPI ile kullanmak için ekliyorum
+});