@timus-networks/theme 1.0.184 → 2.0.1

package/README.md

@@ -1,20 +1,43 @@
-## Installation:
+# @timus-networks/fonts
 
-1. First install package `npm i @timus-networks/theme`
-2. Add package to `modules` property in `nuxt.config.js` file
+Nuxt module for Font Installation.
 
-```json
-{
-  "modules": ["@nuxtjs/axios", ["@timus-networks/theme", { "client": false, "typescript": false }]]
-}
+## Table of Contents
+
+- [Installation](#installation)
+- [Usage](#usage)
+- [Configuration](#configuration)
+- [Scripts](#scripts)
+- [Contributing](#contributing)
+- [License](#license)
+
+## Installation
+
+To install this module, you can use npm or yarn:
+
+### npm
+
+```sh
+npm install @timus-networks/fonts
+```
+
+### yarn
+
+```sh
+yarn add @timus-networks/fonts
 ```
 
-- You can manually set the `client` and `typescript` support properties.
-- If you render this component on the client side, set the value to `true`.
-- If you prefer to use `typescript` during development, set `typescript` to `true`.
-- You can also set the `namespace` to define the module path's position within the .nuxt folder.
+## Usage
 
-3. Add below configuration to your **nuxt.config.js** file.
+1. To use this module in your Nuxt 3 project, add it to your `nuxt.config.ts`:
+
+```typescript
+export default defineNuxtConfig({
+  modules: ['@timus-networks/fonts'],
+});
+```
+
+2. Add below configuration to your **nuxt.config.js** file.
 
 <sub>nuxt.config.js</sub>
 
@@ -32,7 +55,7 @@ tailwindcss: {
 },
 ```
 
-4. Add below code to your **tailwind.config.js** file
+3. Add below code to your **tailwind.config.js** file
 
 ```js
 // tint & shade color generator
@@ -61,59 +84,45 @@ module.exports = {
 };
 ```
 
-### Usage
+## Configuration
 
-Default dark theme is `false`
+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.
 
-- Change the theme on button click:
-  `this.$theme.setDarkMode(!this.$theme.isDark);`
+```typescript
+export default defineNuxtConfig({
+  modules: [['@timus-networks/fonts', { family: 'Poppins' }]],
+  // Or add your custom configurations using font attribute
+  font: { family: 'Satoshi' },
+});
+```
 
-- Register the theme change listener:
-  `this.$theme.$on('darkMode', (value) => { console.log('darkMode:', value); });`
+## Scripts
 
-<sub>SamplePage.vue</sub>
+The following npm scripts are available:
 
-```ts
-<template>
-  <div class="text-black dark:text-white dark:bg-gray-800 p-4">
-    <h1>Dynamic Theming with Nuxt</h1>
-    <p>Experience the power of dynamic theming. Click the button below to toggle between light and dark modes.</p>
-    <button @click="toggleTheme" class="btn btn-sm btn-primary dark:btn-light mt-4">{{ buttonText }}</button>
-    <div class="indicator">
-      Current Theme: <strong>{{ $theme.isDark ? 'Dark' : 'Light' }}</strong>
-    </div>
-  </div>
-</template>
-<script lang="ts">
-import Vue from 'vue';
+- `test`: Run tests using Vitest.
+- `test:watch`: Run tests in watch mode.
+- `test:types`: Check TypeScript types.
+- `lint:prettier`: Lint code using Prettier.
+- `lint:eslint`: Lint code using ESLint.
+- `lint:stylelint`: Lint styles using Stylelint.
+- `fix`: Fix linting errors.
+- `prepack`: Run the prepack script.
+- `pub`: Publish the module.
+- `release`: Release a new version.
 
-export default Vue.extend({
-  computed: {
-    buttonText(): string {
-      return this.$theme.isDark ? 'Switch to Light Mode' : 'Switch to Dark Mode';
-    },
-  },
-  methods: {
-    toggleTheme() {
-      this.$theme.setDarkMode(!this.$theme.isDark);
-    },
-  },
-  mounted() {
-    console.log('Dark mode is:', this.$theme.isDark);
-    this.$theme.$on('darkMode', (value: boolean) => {
-      console.log('darkMode changed:', value);
-    });
-  },
-});
-</script>
+## Contributing
 
-<style scoped>
-.toggle-button {
-  transition: background-color 0.3s ease;
-}
+If you would like to contribute, please follow these guidelines:
 
-.indicator {
-  margin-top: 20px;
-}
-</style>
-```
+1. Fork the repository.
+2. Create a new branch for your feature or bug fix.
+3. Commit your changes.
+4. Push your branch and create a pull request.
+
+## 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.cjs

@@ -0,0 +1,5 @@
+module.exports = function(...args) {
+  return import('./module.mjs').then(m => m.default.call(this, ...args))
+}
+const _meta = module.exports.meta = require('./module.json')
+module.exports.getMeta = () => Promise.resolve(_meta)

package/dist/module.d.mts

@@ -0,0 +1,11 @@
+import * as _nuxt_schema from '@nuxt/schema';
+import { ModuleOptions } from 'nuxt/schema';
+
+interface MyModuleOptions extends ModuleOptions {
+    moduleName: string;
+    version: string;
+    description: string;
+}
+declare const _default: _nuxt_schema.NuxtModule<MyModuleOptions>;
+
+export { type MyModuleOptions, _default as default };

package/dist/module.d.ts

@@ -0,0 +1,11 @@
+import * as _nuxt_schema from '@nuxt/schema';
+import { ModuleOptions } from 'nuxt/schema';
+
+interface MyModuleOptions extends ModuleOptions {
+    moduleName: string;
+    version: string;
+    description: string;
+}
+declare const _default: _nuxt_schema.NuxtModule<MyModuleOptions>;
+
+export { type MyModuleOptions, _default as default };

package/dist/module.json

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

package/dist/module.mjs

@@ -0,0 +1,159 @@
+import { readdirSync } from 'node:fs';
+import { resolve, parse, join } from 'node:path';
+import { defineNuxtModule, createResolver, addPlugin, addComponent } from 'nuxt/kit';
+
+
+
+// -- Unbuild CommonJS Shims --
+import __cjs_url__ from 'url';
+import __cjs_path__ from 'path';
+import __cjs_mod__ from 'module';
+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 description = "A comprehensive Nuxt.js module providing a tailored theme experience with integrated TailwindCSS support for applications.";
+const type = "module";
+const exports = {
+	".": {
+		types: "./dist/types.d.ts",
+		"import": "./dist/module.mjs",
+		require: "./dist/module.cjs"
+	}
+};
+const main = "./dist/module.cjs";
+const types = "./dist/types.d.ts";
+const files = [
+	"dist"
+];
+const scripts = {
+	test: "vitest run",
+	"test:watch": "vitest watch",
+	"test:types": "vue-tsc --noEmit",
+	"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",
+	pub: "npm publish",
+	sass: "node generate-sass.js",
+	prepack: "nuxt-module-build build",
+	release: "npm run prepack && changelogen --release && npm run pub && git push --follow-tags"
+};
+const repository = {
+	type: "git",
+	url: "https://bitbucket.org/timus-networks/timus.modules.git"
+};
+const keywords = [
+	"nuxt",
+	"nuxt3",
+	"module",
+	"component",
+	"vue",
+	"vue3",
+	"theme",
+	"tailwind"
+];
+const peerDependencies = {
+	vue: "^3.x"
+};
+const author = "Serkan Konakcı<serkan.konakci@timusnetworks.com>";
+const license = "MIT";
+const dependencies = {
+	"@nuxt/kit": "*",
+	tailwindcss: "*",
+	"vue-tsc": "^2.0.29"
+};
+const devDependencies = {
+	changelogen: "^0.5.5",
+	sass: "*",
+	"sass-loader": "*"
+};
+const PackageJson = {
+	name: name,
+	version: version,
+	description: description,
+	type: type,
+	exports: exports,
+	main: main,
+	types: types,
+	files: files,
+	scripts: scripts,
+	repository: repository,
+	keywords: keywords,
+	peerDependencies: peerDependencies,
+	author: author,
+	license: license,
+	dependencies: dependencies,
+	devDependencies: devDependencies
+};
+
+const folderPath = "./runtime";
+const module = defineNuxtModule({
+  meta: {
+    name: PackageJson.name,
+    configKey: "themeOptions"
+  },
+  defaults: {
+    moduleName: PackageJson.name,
+    version: PackageJson.version,
+    description: PackageJson.description
+  },
+  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`)
+      });
+    },
+    "nitro:config": async (nitroConfig) => {
+      nitroConfig.publicAssets ||= [];
+      nitroConfig.publicAssets.push({
+        dir: resolve(__dirname, `${folderPath}/public`),
+        maxAge: 60 * 60 * 24 * 365
+        // 1 year
+      });
+      nitroConfig.prerender = {
+        ...nitroConfig.prerender,
+        ...{ failOnError: false }
+      };
+    }
+  },
+  setup(options, nuxt) {
+    const resolver = createResolver(import.meta.url);
+    console.info(`'${PackageJson.name}' loaded. Version:${options.version}`);
+    const components_dir_list = ["runtime/components"];
+    const addComponentFromFolder = (folder) => {
+      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: "client"
+        });
+      });
+    };
+    components_dir_list.forEach((folder) => {
+      addComponentFromFolder(folder);
+    });
+    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
+    };
+    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 }) => {
+      references.push({ path: resolver.resolve(`${folderPath}/types.d.ts`) });
+    });
+  }
+});
+
+export { module as default };

package/dist/runtime/components/example.button.vue

@@ -0,0 +1,237 @@
+<template>
+  <div class="flex flex-col gap-8 mb-16">
+    <h1 class="">Buttons</h1>
+    <p>Element Plus Button is a customizable and versatile UI component designed for creating interactive and visually appealing buttons in web applications.</p>
+
+    <el-card>
+      <template #header>
+        <div class="flex flex-col gap-3 items-start">
+          <h2>Sizes</h2>
+          <p>
+            Default size is Large. Button component provides {{ sizes.length }} additional sizes for you to choose among different scenarios. Use attribute size to set additional
+            sizes <el-text tag="mark">{{ sizes.join(', ') }}</el-text>
+          </p>
+        </div>
+      </template>
+      <div class="flex gap-4">
+        <el-button v-for="(size, index) of sizes" :key="size + index" :size="size">{{ capitalize(size) }}</el-button>
+      </div>
+      <template #footer>
+        <code class="flex flex-col gap-3 items-start">
+          <el-tag type="neutral">&lt;el-button :size=&quot;small&quot;&gt;small&lt;/el-button&gt;</el-tag>
+        </code>
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header>
+        <div class="flex flex-col gap-3 items-start">
+          <h2>Rounded</h2>
+          <p>
+            A rounded button in Element Plus features slightly curved corners, providing a softer and more modern appearance to your UI elements. To apply it add
+            <el-text tag="mark">round</el-text> to button
+          </p>
+        </div>
+      </template>
+      <div class="flex gap-4">
+        <el-button v-for="(size, index) of sizes" :key="size + index" :size="size" round>{{ capitalize(size) }}</el-button>
+      </div>
+      <template #footer>
+        <code class="flex flex-col gap-3 items-start">
+          <el-tag type="neutral">&lt;el-button round&gt;small&lt;/el-button&gt;</el-tag>
+        </code>
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header>
+        <div class="flex flex-col gap-3 items-start">
+          <h2>Colors</h2>
+          <p>
+            The type prop in Element Plus Button allows you to select from predefined styles such as
+            <el-text tag="mark">'primary', 'secondary', 'neutral', 'success', 'warning', 'info', and 'danger'</el-text> to visually distinguish buttons based on their purpose and
+            importance within your application.
+          </p>
+        </div>
+      </template>
+      <div class="flex gap-4 flex-wrap">
+        <el-button v-for="(color, index) of colors" :key="color + index" :type="color">{{ color }}</el-button>
+      </div>
+      <template #footer>
+        <code class="flex flex-col gap-3 items-start">
+          <el-tag type="neutral">&lt;el-button :type=&quot;success&quot;&gt;success&lt;/el-button&gt;</el-tag>
+        </code>
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header>
+        <div class="flex flex-col gap-3 items-start">
+          <h2>Outline / Plain</h2>
+          <p>
+            The plain prop in Element Plus Button creates a button with a transparent background, offering a subtle and minimalistic look. Add
+            <el-text tag="mark">plain</el-text> to the button to make it outlined."
+          </p>
+        </div>
+      </template>
+      <div class="flex gap-4 flex-wrap">
+        <el-button v-for="(color, index) of colors" :key="color + index" :type="color" plain>{{ color }}</el-button>
+      </div>
+      <template #footer>
+        <code class="flex flex-col gap-3 items-start">
+          <el-tag type="neutral">&lt;el-button plain&gt;success&lt;/el-button&gt;</el-tag>
+        </code>
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header>
+        <div class="flex flex-col gap-3 items-start">
+          <h2>Ghost / Text</h2>
+          <p>
+            The plain prop in Element Plus Button creates a button with a transparent background, offering a subtle and minimalistic look. Add <el-text tag="mark">text</el-text>
+            to the button to make it ghost."
+          </p>
+        </div>
+      </template>
+      <div class="flex gap-4 flex-wrap">
+        <el-button v-for="(color, index) of colors" :key="color + index" :type="color" text>{{ color }}</el-button>
+      </div>
+      <template #footer>
+        <code class="flex flex-col gap-3 items-start">
+          <el-tag type="neutral">&lt;el-button text&gt;success&lt;/el-button&gt;</el-tag>
+        </code>
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header>
+        <div class="flex flex-col gap-3 items-start">
+          <h2>Disabled</h2>
+          <p>
+            The <code><el-text tag="mark">disabled</el-text></code> attribute determines if the button is disabled. Use disabled attribute to determine whether a button is
+            disabled. It accepts a Boolean value.
+          </p>
+        </div>
+      </template>
+      <div class="flex flex-col gap-4">
+        <div class="flex gap-4 flex-wrap">
+          <el-button v-for="(size, index) of sizes" :key="size + index" :size="size" disabled type="primary">{{ capitalize(size) }}</el-button>
+        </div>
+        <div class="flex gap-4 flex-wrap">
+          <el-button v-for="(size, index) of sizes" :key="size + index" :size="size" type="primary" disabled plain>{{ capitalize(size) }}</el-button>
+        </div>
+        <div class="flex gap-4 flex-wrap">
+          <el-button v-for="(size, index) of sizes" :key="size + index" :size="size" type="primary" disabled text>{{ capitalize(size) }}</el-button>
+        </div>
+      </div>
+      <template #footer>
+        <code class="flex flex-col gap-3 items-start">
+          <el-tag type="neutral">&lt;el-button :size=&quot;small&quot;&gt;small&lt;/el-button&gt;</el-tag>
+        </code>
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header>
+        <div class="flex flex-col gap-3 items-start">
+          <h2>Icon Button</h2>
+          <p>
+            Use <el-text tag="mark">icons</el-text> to add more meaning to Button. You can use icon alone to save some space, or use it with text. Use the icon attribute to add
+            icon. You can find the icon list in Element Plus icon component. Adding icons to the right side of the text is achievable with an
+            <span class="font-medium">&lt;i &gt;</span> tag. Custom icons can be used as well.
+          </p>
+        </div>
+      </template>
+      <div class="flex gap-4">
+        <el-button :icon="ElIconEdit" />
+        <el-button :icon="ElIconShare" />
+        <el-button :icon="ElIconDelete" size="small" type="danger" />
+        <el-button :icon="ElIconDelete" size="mini" type="danger" />
+        <el-button :icon="ElIconSearch">Search</el-button>
+        <el-button class="isax-add-circle">Search</el-button>
+        <el-button>
+          Upload<el-icon class="el-icon--right"><ElIconUpload /></el-icon>
+        </el-button>
+      </div>
+      <template #footer>
+        <code class="flex flex-col gap-3 items-start">
+          <el-tag type="neutral">&lt;el-button :icon=&quot;ElIconShare&quot; /&gt;</el-tag>
+          <el-tag type="neutral"> &lt;el-button&gt;Upload&lt;el-icon class=&quot;el-icon--right&quot;&gt;&lt;ElIconUpload /&gt;&lt;/el-icon&gt;&lt;/el-button&gt; </el-tag>
+        </code>
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header>
+        <div class="flex flex-col gap-3 items-start">
+          <h2>Button Group</h2>
+          <p>
+            Displayed as a button group, can be used to group a series of similar operations. Use tag <el-text tag="mark">&lt;el-button-groupn&gt;</el-text> to group your buttons.
+          </p>
+        </div>
+      </template>
+      <div class="flex gap-4">
+        <el-button-group>
+          <el-button type="primary" :icon="ElIconArrowLeft">Previous Page</el-button>
+          <el-button type="primary">
+            Next Page<el-icon class="el-icon--right"><ElIconArrowRight /></el-icon>
+          </el-button>
+        </el-button-group>
+      </div>
+      <template #footer>
+        <html-encode :tag="snippets.group" />
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header>
+        <div class="flex flex-col gap-3 items-start">
+          <h2>Tag</h2>
+          <p>You can custom element <el-text tag="mark">tag</el-text>, For example button, div, a, router-link, nuxt-link.</p>
+        </div>
+      </template>
+      <div class="flex gap-4">
+        <el-button tag="div" role="button" tabindex="0">div</el-button>
+        <el-button type="primary" tag="a" href="https://github.com/element-plus/element-plus" target="_blank" rel="noopener noreferrer"> a </el-button>
+      </div>
+      <template #footer>
+        <code class="flex flex-col gap-3 items-start">
+          <el-tag type="neutral">&lt;el-button tag=&quot;div&quot; role=&quot;button&quot; tabindex=&quot;0&quot;&gt;div&lt;/el-button&gt;</el-tag>
+          <el-tag type="neutral">
+            &lt;el-button type=&quot;primary&quot; tag=&quot;a&quot; href=&quot;https://github.com/element-plus/element-plus&quot; target=&quot;_blank&quot; rel=&quot;noopener
+            noreferrer&quot; &gt; a &lt;/el-button&gt;
+          </el-tag>
+        </code>
+      </template>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+export default defineComponent({
+  name: "TimusButton",
+  data() {
+    return {
+      sizes: ["default", "large", "medium", "small", "mini"],
+      colors: ["default", "primary", "secondary", "neutral", "success", "warning", "info", "danger"],
+      snippets: {
+        group: `
+            <el-button-group>
+              <el-button type="primary" :icon="ElIconArrowLeft">Previous Page</el-button>
+              <el-button type="primary">
+                Next Page<el-icon class="el-icon--right"><ElIconArrowRight /></el-icon>
+              </el-button>
+            </el-button-group>`
+      }
+    };
+  },
+  methods: {
+    capitalize(value) {
+      const text = String(value);
+      return text.charAt(0).toUpperCase() + text.slice(1);
+    }
+  }
+});
+</script>

package/dist/runtime/components/example.button.vue.d.ts

@@ -0,0 +1,10 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {
+    sizes: string[];
+    colors: string[];
+    snippets: {
+        group: string;
+    };
+}, {}, {
+    capitalize(value: string): string;
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+export default _default;