@timus-networks/theme 2.0.1 → 2.0.2

package/README.md

@@ -1,12 +1,11 @@
 # @timus-networks/fonts
 
-Nuxt module for Font Installation.
+Nuxt module for Theme Installation.
 
 ## Table of Contents
 
 - [Installation](#installation)
 - [Usage](#usage)
-- [Configuration](#configuration)
 - [Scripts](#scripts)
 - [Contributing](#contributing)
 - [License](#license)
@@ -18,13 +17,13 @@ To install this module, you can use npm or yarn:
 ### npm
 
 ```sh
-npm install @timus-networks/fonts
+npm install @timus-networks/theme
 ```
 
 ### yarn
 
 ```sh
-yarn add @timus-networks/fonts
+yarn add @timus-networks/theme
 ```
 
 ## Usage
@@ -33,70 +32,58 @@ yarn add @timus-networks/fonts
 
 ```typescript
 export default defineNuxtConfig({
-  modules: ['@timus-networks/fonts'],
+  modules: ['@timus-networks/theme'],
 });
 ```
 
-2. Add below configuration to your **nuxt.config.js** file.
-
-<sub>nuxt.config.js</sub>
-
-```js
-tailwindcss: {
-  // cssPath: '~/static/scss/main.scss',
-  configPath: '@/tailwind.config.js',
-  exposeConfig: false,
-  exposeLevel: 2,
-  config: {
-    darkMode: 'class',
-  },
-  injectPosition: 'first',
-  viewer: true,
-},
-```
-
-3. Add below code to your **tailwind.config.js** file
+2. Add below code to your **tailwind.config.js** file
 
 ```js
 // tint & shade color generator
-function generateColors(baseName, start = 100, end = 900, step = 100) {
+function generateColors(baseName, start = 1, end = 9, step = 1) {
   const colors = {};
+
   for (let i = start; i <= end; i += step) {
-    colors[i] = `var(--${baseName}-${i})`;
+    colors[i] = `var(--el-color-${baseName}-light-${i})`;
   }
+
   return colors;
 }
 
-const colorNames = ['primary', 'secondary', 'gray', 'danger', 'success', 'warning', 'info'];
-
-const colors = colorNames.reduce((acc, color) => {
-  return { ...acc, [`${color}`]: generateColors(color, 100, 900) };
-}, {});
+const colorNames = ['primary', 'secondary', 'neutral', 'danger', 'success', 'warning', 'info'];
+const colorShades = [1, 2, 3, 4, 5, 6, 7, 8, 9];
+const classPrefixes = ['bg', 'text', 'border'];
+const colors = colorNames.reduce((acc, color) => ({ ...acc, [`${color}`]: generateColors(color, 1, 9) }), {});
 
 module.exports = {
-  content: ['./pages/**/*.{html,js}'],
+  // content: ['./pages/**/*.{vue,html}', './components/**/*.{vue,html}', './layouts/**/*.{vue,html}', './modules/**/*.{vue,html}'],
+  content: ['./modules/**/*.{vue,html}'],
   theme: {
     extend: {
-      colors: colors,
+      colors,
+      spacing: {
+        default: '30px',
+        7.5: '30px', // 30px için özel bir sınıf ekliyoruz
+      },
     },
   },
-  plugins: [],
+  plugins: [
+    function ({ addUtilities, theme, e }) {
+      const gridCols = theme('gridTemplateColumns');
+      const utilities = Object.entries(gridCols).map(([key, value]) => ({
+        [`.${e(`grid-cols-${key}`)}`]: {
+          'grid-template-columns': value,
+          gap: '30px', // Burada varsayılan boşluğu ayarlıyoruz
+        },
+      }));
+
+      addUtilities(utilities);
+    },
+  ],
+  safelist: classPrefixes.flatMap((prefix) => colorNames.flatMap((color) => colorShades.map((i) => `${prefix}-${color}-${i}`))),
 };
 ```
 
-## Configuration
-
-You can configure the module with the following options in your `nuxt.config.ts`:
-There are 2 type fonts exist currently: Poppins or Satoshi. Default font is `Poppins`. You can change it manually using `font: { family: 'Satoshi' }` option or add option with module.
-
-```typescript
-export default defineNuxtConfig({
-  modules: [['@timus-networks/fonts', { family: 'Poppins' }]],
-  // Or add your custom configurations using font attribute
-  font: { family: 'Satoshi' },
-});
-```
-
 ## Scripts
 
 The following npm scripts are available:
@@ -124,5 +111,3 @@ If you would like to contribute, please follow these guidelines:
 ## License
 
 This project is licensed under the MIT License.
-
-<sub>Source for Poppins https://github.com/webfontworld/Poppins, Source for Satoshi https://www.fontshare.com/fonts/satoshi</sub>

package/dist/module.d.mts

@@ -6,6 +6,6 @@ interface MyModuleOptions extends ModuleOptions {
     version: string;
     description: string;
 }
-declare const _default: _nuxt_schema.NuxtModule<MyModuleOptions>;
+declare const _default: _nuxt_schema.NuxtModule<MyModuleOptions, MyModuleOptions, false>;
 
 export { type MyModuleOptions, _default as default };

package/dist/module.d.ts

@@ -6,6 +6,6 @@ interface MyModuleOptions extends ModuleOptions {
     version: string;
     description: string;
 }
-declare const _default: _nuxt_schema.NuxtModule<MyModuleOptions>;
+declare const _default: _nuxt_schema.NuxtModule<MyModuleOptions, MyModuleOptions, false>;
 
 export { type MyModuleOptions, _default as default };

package/dist/module.json

@@ -1,9 +1,9 @@
 {
   "name": "@timus-networks/theme",
   "configKey": "themeOptions",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "builder": {
-    "@nuxt/module-builder": "0.8.3",
+    "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"
   }
 }

package/dist/module.mjs

@@ -1,6 +1,6 @@
 import { readdirSync } from 'node:fs';
 import { resolve, parse, join } from 'node:path';
-import { defineNuxtModule, createResolver, addPlugin, addComponent } from 'nuxt/kit';
+import { defineNuxtModule, createResolver, useNuxt, addImports, addPlugin, addComponent } from 'nuxt/kit';
 
 
 
@@ -12,7 +12,7 @@ const __filename = __cjs_url__.fileURLToPath(import.meta.url);
 const __dirname = __cjs_path__.dirname(__filename);
 const require = __cjs_mod__.createRequire(import.meta.url);
 const name = "@timus-networks/theme";
-const version = "2.0.1";
+const version = "2.0.2";
 const description = "A comprehensive Nuxt.js module providing a tailored theme experience with integrated TailwindCSS support for applications.";
 const type = "module";
 const exports = {
@@ -102,12 +102,16 @@ const module = defineNuxtModule({
   hooks: {
     "pages:extend": (pages) => {
       const resolver = createResolver(import.meta.url);
-      pages.push({
-        name: "theme",
-        path: "/theme",
-        mode: "client",
-        file: resolver.resolve(`${folderPath}/pages/theme.vue`)
-      });
+      const nuxt = useNuxt();
+      const isDev = nuxt.options.dev;
+      if (isDev) {
+        pages.push({
+          name: "theme",
+          path: "/theme",
+          mode: "client",
+          file: resolver.resolve(`${folderPath}/pages/theme.vue`)
+        });
+      }
     },
     "nitro:config": async (nitroConfig) => {
       nitroConfig.publicAssets ||= [];
@@ -124,13 +128,31 @@ const module = defineNuxtModule({
   },
   setup(options, nuxt) {
     const resolver = createResolver(import.meta.url);
+    const isDev = nuxt.options.dev;
     console.info(`'${PackageJson.name}' loaded. Version:${options.version}`);
-    const components_dir_list = ["runtime/components"];
+    const composablesDir = resolver.resolve(`${folderPath}/composables`);
+    const composableFiles = readdirSync(composablesDir).filter((file) => file.endsWith(".ts") && !file.startsWith("index"));
+    composableFiles.forEach((file) => {
+      const { name } = parse(file);
+      addImports({
+        name,
+        as: name,
+        from: `${composablesDir}/${file}`
+      });
+    });
+    const components_dir_list = [
+      { env: "development", path: "runtime/components/development" },
+      { env: "production", path: "runtime/components/production" }
+    ];
+    const comp = [];
     const addComponentFromFolder = (folder) => {
       const path = resolve(__dirname, folder);
-      const files = readdirSync(path);
+      const files = readdirSync(path).filter((file) => file.endsWith(".vue"));
       files.forEach((file) => {
         const { name } = parse(file);
+        const isExit = comp.find((item) => item.name === name);
+        !isExit ? comp.push({ name, path: resolve(path, file) }) : console.log("#BU COMPONENT VAR name:", name, resolve(path, file), "\xD6nceki: ", isExit);
+        nuxt.options.build.transpile.push(resolve(path, file));
         addComponent({
           name: join(name),
           filePath: resolve(path, file),
@@ -138,16 +160,16 @@ const module = defineNuxtModule({
         });
       });
     };
-    components_dir_list.forEach((folder) => {
-      addComponentFromFolder(folder);
+    nuxt.hook("components:dirs", (dirs) => {
+      components_dir_list.forEach(({ env, path }) => {
+        if (isDev || !isDev && env === "production") {
+          addComponentFromFolder(path);
+        }
+      });
     });
     addPlugin(resolver.resolve(`${folderPath}/plugins/sample-plugin`));
-    addPlugin(resolver.resolve(`${folderPath}/plugins/theme-provider`));
-    nuxt.options.runtimeConfig.public.theme = {
-      ...options,
-      types: options.types,
-      sizes: options.sizes
-    };
+    addPlugin(resolver.resolve(`${folderPath}/plugins/disable-warnings-plugin`));
+    addPlugin(resolver.resolve(`${folderPath}/plugins/theme-provider-plugin`));
     nuxt.options.css.push(resolver.resolve(`${folderPath}/public/scss/theme.scss`));
     nuxt.options.css.push(resolver.resolve(`${folderPath}/public/scss/element-plus/index.scss`));
     nuxt.hook("prepare:types", ({ references }) => {

package/dist/runtime/components/development/example.alert.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="flex flex-col gap-8 mb-16">
+    <h1 class="">Alert</h1>
+    <p>Displays important alert messages.</p>
+
+    <el-card>
+      <template #header> Basic usage </template>
+      <div class="flex flex-col gap-7.5">
+        <p>
+          Alert components are non-overlay elements in the page that does not disappear automatically. Alert provides 4 types of themes defined by
+          <el-text tag="mark">type</el-text>, whose default value is <el-text tag="mark">info</el-text>.
+        </p>
+        <div class="flex gap-4 items-start flex-col">
+          <el-alert :title="`default`" />
+          <el-alert v-for="color of colors" :key="color" :title="`${color} alert`" :type="color" show-icon />
+          <el-alert v-for="color of colors" :key="color" :title="`${color} alert`" :type="color" description="This is a description." show-icon />
+        </div>
+      </div>
+      <template #footer> <html-encode :tag="snippets.basic" /> </template>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  const colors = ref(['success', 'warning', 'info', 'error', 'danger']);
+  const snippets = ref({
+    basic: `<el-alert title="Title Text Goes Here" type="danger" description="This is a description." show-icon :closable="false" />`,
+  });
+</script>

package/dist/runtime/components/development/example.avatar.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="flex flex-col gap-8 mb-16">
+    <h1 class="">Avatar</h1>
+    <p>Avatars can be used to represent people or objects. It supports images, Icons, or characters.</p>
+
+    <el-card>
+      <template #header> With Image </template>
+      <section class="flex flex-col gap-7.5">
+        <p>Add <el-text tag="mark">src</el-text> attribute for display an image</p>
+        <div class="flex gap-7.5">
+          <div v-for="(size, index) of sizes" :key="size" class="flex flex-col gap-2 border rounded-md p-2 w-28 items-center">
+            <h5 class="font-normal text-neutral-7 grow">{{ String(size).toUpperCase() }}</h5>
+            <el-avatar :size="size" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
+            <small class="text-neutral-4 flex items-end grow p-mini">{{ infos[index] }}px</small>
+          </div>
+        </div>
+      </section>
+      <template #footer> <html-encode :tag="snippets.image" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header> With Text </template>
+      <section class="flex flex-col gap-7.5">
+        <p>Insert text into tag brackets</p>
+        <div class="flex gap-7.5">
+          <div v-for="(size, index) of sizes" :key="size" class="flex flex-col gap-2 border rounded-md p-2 w-28 items-center">
+            <h5 class="font-normal text-neutral-7 grow">{{ String(size).toUpperCase() }}</h5>
+            <el-avatar :size="size">SK</el-avatar>
+            <small class="text-neutral-4 flex items-end grow p-mini">{{ infos[index] }}px</small>
+          </div>
+        </div>
+      </section>
+      <template #footer> <html-encode :tag="snippets.text" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header> With Isax </template>
+      <section class="flex flex-col gap-7.5">
+        <p>Add <el-text tag="mark">class="isax-*"</el-text> attribute for display to isax icon</p>
+        <div class="flex gap-7.5">
+          <div v-for="(size, index) of sizes" :key="size" class="flex flex-col gap-2 border rounded-md p-2 w-28 items-center">
+            <h5 class="font-normal text-neutral-7 grow">{{ String(size).toUpperCase() }}</h5>
+            <el-avatar :size="size" class="isax-notification" />
+            <small class="text-neutral-4 flex items-end grow p-mini">{{ infos[index] }}px</small>
+          </div>
+        </div>
+      </section>
+      <template #footer> <html-encode :tag="snippets.isax" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header> With Element Icon </template>
+      <section class="flex flex-col gap-7.5">
+        <p>Add <el-text tag="mark">icon</el-text> attribute for display an icon</p>
+        <div class="flex gap-7.5">
+          <div v-for="(size, index) of sizes" :key="size" class="flex flex-col gap-2 border rounded-md p-2 w-28 items-center">
+            <h5 class="font-normal text-neutral-7 grow">{{ String(size).toUpperCase() }}</h5>
+            <el-avatar :size="size" :icon="ElIconBell" />
+            <small class="text-neutral-4 flex items-end grow p-mini">{{ infos[index] }}px</small>
+          </div>
+        </div>
+      </section>
+      <template #footer> <html-encode :tag="snippets.icon" /> </template>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { reactive, toRefs } from 'vue';
+
+  const state = reactive({
+    circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
+    squareUrl: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
+    sizes: [50, 'default', 'large', 'medium', 'small', 'mini'] as const,
+    infos: [50, '32', '56', '44', '32', '16'] as const,
+  });
+  const { sizes, infos, circleUrl, squareUrl, sizeList } = toRefs(state);
+  const snippets = ref({
+    isax: `<el-avatar class="isax-notification" />`,
+    icon: `<el-avatar :icon="ElIconEdit" />`,
+    text: `<el-avatar>SK</el-avatar>`,
+    image: `<el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />`,
+  });
+</script>

package/dist/runtime/components/development/example.badge.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="flex flex-col gap-8 mb-16">
+    <h1 class="">Badge</h1>
+    <p>A number or status mark on buttons and icons.</p>
+
+    <el-card>
+      <template #header> Basic usage </template>
+      <div class="flex flex-col gap-4">
+        <p>Displays the amount of new messages. Add <el-text tag="mark">type</el-text> to colorize it. The amount is defined with value which accepts Number or String.</p>
+        <div class="flex gap-7.5">
+          <el-badge v-for="color of colors" :key="color" :value="12" :type="color">
+            <el-button size="small">{{ color }}</el-button>
+          </el-badge>
+        </div>
+      </div>
+      <template #footer> <html-encode :tag="snippets.basic" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Max Value </template>
+      <div class="flex flex-col gap-4">
+        <p>
+          You can customize the <el-text tag="mark">max</el-text> value. The max value is defined by property max which is a Number. Note that it only works when value is also a
+          Number.
+        </p>
+        <div class="flex gap-7.5">
+          <el-badge :value="200" :max="99" class="item">
+            <el-button>comments</el-button>
+          </el-badge>
+          <el-badge :value="100" :max="10" class="item">
+            <el-button>replies</el-button>
+          </el-badge>
+        </div>
+      </div>
+      <template #footer> <html-encode :tag="snippets.max" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Red Dot </template>
+      <div class="flex flex-col gap-4">
+        <p>Use a red dot to mark content that needs to be noticed. Use the attribute <el-text tag="mark">is-dot</el-text>. It is a Boolean.</p>
+        <div class="flex gap-7.5">
+          <el-badge is-dot class="item">query</el-badge>
+          <el-badge is-dot class="item">
+            <el-button class="share-button" :icon="ElIconShare" type="primary" />
+          </el-badge>
+        </div>
+      </div>
+
+      <template #footer> <html-encode :tag="snippets.dot" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Offset </template>
+      <div class="flex flex-col gap-3">
+        <p>
+          Set <el-text tag="mark">offset</el-text> of the badge dot, the format is <el-text tag="mark">[left, top]</el-text>, which represents the offset of the status dot from the
+          left and top of the default position.
+        </p>
+        <div class="flex gap-4">
+          <el-badge class="item" :value="1" :offset="[10, 5]">
+            <el-button> offset</el-button>
+          </el-badge>
+        </div>
+      </div>
+      <template #footer> <html-encode :tag="snippets.offset" /> </template>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+
+  const colors = ref(['default', 'primary', 'secondary', 'neutral', 'success', 'warning', 'info', 'danger']);
+  const snippets = ref({
+    basic: `
+      <el-badge :value="12" type="primary">
+        <el-button>comments</el-button>
+      </el-badge>
+    `,
+    max: `
+      <el-badge :value="200" :max="99" class="item">
+        <el-button>comments</el-button>
+      </el-badge>
+    `,
+    dot: `<el-badge is-dot class="item">query</el-badge>`,
+    offset: `
+      <el-badge class="item" :value="1" :offset="[10, 5]">
+        <el-button> offset</el-button>
+      </el-badge>
+    `,
+  });
+</script>

package/dist/runtime/components/development/example.breadcrumb.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="flex flex-col gap-8 mb-16">
+    <h1 class="">Breadcrumb</h1>
+    <p>Display prompt information for mouse hover.</p>
+
+    <el-card>
+      <template #header> Basic usage </template>
+      <section class="flex flex-col gap-7.5">
+        <p>Add the <el-text tag="mark">timus-breadcrumb</el-text> component to the desired place. It will automatically grab the path and convert it into a breadcrumb.</p>
+        <timus-breadcrumb :paths="sample_path" />
+      </section>
+      <template #footer>
+        <div class="flex flex-col gap-7.5">
+          <html-encode :tag="snippets.basic" />
+          <div class="flex flex-col gap-3">
+            <h3>Usage On Tabbed Page Example:</h3>
+            <p class="p-medium">
+              This code will automatically redirect to the first tab, and the page will have a query parameter like
+              <span class="comment">http://localhost:3000/about?tab=alert</span>. Additionally, if another tab's name is manually provided in the URL, that tab will be selected by
+              default.
+            </p>
+            <html-encode :tag="snippets.composable" />
+          </div>
+        </div>
+      </template>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+
+  const sample_path = ref([{ regex: /^\/about$/, label: 'header.about.text' }]);
+  const snippets = ref({
+    basic: `<timus-breadcrumb :paths="[ { regex: /^\/about$/, label: 'header.about.text' } ]" />`,
+    composable: `
+    <template>
+      <el-tabs v-model="activeTab" @tab-click="tabChanged">
+        <el-tab-pane label="Alert" name="alert" lazy><example-alert /></el-tab-pane>
+        <el-tab-pane label="Avatar" name="avatar" lazy><example-avatar /></el-tab-pane>
+      </el-tabs>
+    </template>
+
+    <script setup lang="ts">
+      const { activeTab, tabChanged, setActiveTab, setupBreadcrumbs } = useBreadcrumb();
+      const tabs = ['avatar', 'alert'];
+
+      onMounted(() => {
+        setupBreadcrumbs(tabs);
+      });
+    <\/script>
+    `,
+  });
+</script>