@timus-networks/theme 1.0.184 → 2.0.1

package/dist/runtime/server/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "../../../../../../.nuxt/tsconfig.server.json",
+  "include": [
+    "../../module/runtime/server"
+  ]
+}

package/dist/runtime/types.d.ts

@@ -0,0 +1,40 @@
+import '@timus-networks/element-plus';
+import '@nuxt/schema';
+
+declare module '@timus-networks/element-plus/es/constants' {
+  export const componentSizes: readonly string[];
+  export type ComponentSize = (typeof componentSizes)[number];
+
+  export const componentSizeMap: Readonly<
+    | componentSizes
+    | {
+        medium: number;
+        mini: number;
+        huge: number;
+        [key: string]: number;
+      }
+  >;
+}
+
+declare module '@timus-networks/element-plus' {
+  export type ThemeSize = typeof import('element-plus/es/constants').componentSizeMap;
+}
+
+declare module '@timus-networks/element-plus/es/utils' {
+  export interface EpPropMergeType<T, U, V> extends T {}
+}
+
+declare module '@timus-networks/element-plus' {
+  export type ButtonType = (typeof buttonTypes)[number];
+  export type ExtendedComponentSize = ComponentSize | 'medium' | 'mini' | 'huge';
+  export type ExtendedButtonType = ButtonType | 'secondary' | 'neutral';
+
+  export interface ButtonProps {
+    type: ExtendedButtonType;
+    size?: ExtendedComponentSize;
+  }
+
+  export interface InputProps {
+    size?: ExtendedComponentSize;
+  }
+}

package/dist/types.d.mts

@@ -0,0 +1,7 @@
+import type { NuxtModule } from '@nuxt/schema'
+
+import type { default as Module } from './module.js'
+
+export type ModuleOptions = typeof Module extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
+
+export { type MyModuleOptions, default } from './module.js'

package/dist/types.d.ts

@@ -0,0 +1,7 @@
+import type { NuxtModule } from '@nuxt/schema'
+
+import type { default as Module } from './module'
+
+export type ModuleOptions = typeof Module extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
+
+export { type MyModuleOptions, default } from './module'

package/package.json

@@ -1,43 +1,59 @@
 {
   "name": "@timus-networks/theme",
-  "version": "1.0.184",
+  "version": "2.0.1",
   "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",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/types.d.ts",
+      "import": "./dist/module.mjs",
+      "require": "./dist/module.cjs"
+    }
+  },
+  "main": "./dist/module.cjs",
+  "types": "./dist/types.d.ts",
+  "files": [
+    "dist"
+  ],
   "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"
+    "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"
   },
   "repository": {
     "type": "git",
-    "url": "https://bitbucket.org/timus-networks/nuxt-library.git"
+    "url": "https://bitbucket.org/timus-networks/timus.modules.git"
   },
   "keywords": [
     "nuxt",
+    "nuxt3",
     "module",
     "component",
-    "vuejs",
+    "vue",
+    "vue3",
     "theme",
     "tailwind"
   ],
   "peerDependencies": {
-    "vue": "*"
+    "vue": "^3.x"
   },
+  "author": "Serkan Konakcı<serkan.konakci@timusnetworks.com>",
+  "license": "MIT",
   "dependencies": {
-    "@nuxtjs/tailwindcss": "*",
-    "sass": "*",
-    "sass-loader": "*",
-    "tailwindcss": "*"
+    "@nuxt/kit": "*",
+    "tailwindcss": "*",
+    "vue-tsc": "^2.0.29"
   },
   "devDependencies": {
-    "glob": "*",
+    "changelogen": "^0.5.5",
     "sass": "*",
     "sass-loader": "*"
   }

package/components-js/ThemeAlert.vue

@@ -1,78 +0,0 @@
-<template>
-  <div class="pt-8 pb-16 flex gap-12 flex-col">
-    <section>
-      <h1>Alert</h1>
-      <p class="p-lg-c my-6">Uyarı bileşenleri, sayfada otomatik olarak kaybolmayan non-overlay mesajlarını görüntülemek için kullanılır.</p>
-      <div class="grid grid-flow-col auto-cols-max gap-4">
-        <el-alert v-for="(item, key) in colors" :key="key" :title="`${item}`" :type="item" class="isax-activity" />
-      </div>
-      <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
-        <p class="text-xs">
-          <code>&lt;el-alert title="Success alert" type="success" class="isax-activity"&gt;&lt;/el-alert&gt;</code>
-        </p>
-      </div>
-    </section>
-  </div>
-</template>
-<script>
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'ThemeTable',
-  data() {
-    return {
-      colors: ['primary', 'secondary', 'gray', 'warning', 'danger', 'info', 'success'],
-    };
-  },
-  computed: {
-    gridSize() {
-      const grids = {
-        5: 'grid-cols-5',
-        6: 'grid-cols-6',
-        7: 'grid-cols-7',
-        8: 'grid-cols-8',
-      };
-
-      return grids;
-    },
-  },
-  methods: {
-    toggleSelection(rows) {
-      if (rows) {
-        rows.forEach((row) => {
-          this.$refs.multipleTable.toggleRowSelection(row);
-        });
-      } else {
-        this.$refs.multipleTable.clearSelection();
-      }
-    },
-    handleSelectionChange(val) {
-      this.multipleSelection = val;
-    },
-    resetDateFilter() {
-      this.$refs.filterTable.clearFilter('date');
-    },
-    clearFilter() {
-      this.$refs.filterTable.clearFilter();
-    },
-    formatter(row, column) {
-      return row.address;
-    },
-    filterTag(value, row) {
-      return row.tag === value;
-    },
-    filterHandler(value, row, column) {
-      console.log(row, column, value);
-      const { property } = column;
-
-      return row[property] === value;
-    },
-    handleSizeChange(val) {
-      console.log(`${val} items per page`);
-    },
-    handleCurrentChange(val) {
-      console.log(`current page: ${val}`);
-    },
-  },
-});
-</script>

package/components-js/ThemeAvatar.vue

@@ -1,55 +0,0 @@
-<template>
-  <div class="pt-8 pb-16 flex gap-12 flex-col">
-    <section>
-      <h1>Sizes</h1>
-      <p class="p-md-c my-6">
-        Avatarlar, resimler, ikonlar veya alfanumerik karakterleri destekler. Avatar'ın şeklini ve boyutunu ayarlamak için `shape` ve `size`
-        özelliklerini kullanabilirsiniz. Ayrıca avatarın resim kaynağını belirlemek için `src` özelliğini kullanabilirsiniz. Şekil tipleri
-        <b>'circle | square'</b> şeklindedir. Boyutlar ise <b>'large', 'medium', 'small'</b> şeklindedir. Veya boyutu manuel olarak `size` özelliğini
-        kullanarak belirleyebilirsiniz, örneğin <b>size='50'</b>.
-      </p>
-      <div class="grid grid-flow-col auto-cols-max gap-4 items-center">
-        <el-avatar :size="50">SK</el-avatar>
-        <el-avatar v-for="size in sizeList" :key="size + 'string'" :size="size">SK</el-avatar>
-        <el-divider direction="vertical" content-position="center" />
-        <el-avatar shape="square" :size="50" :src="url" />
-        <el-avatar v-for="size in sizeList" :key="size" shape="square" :size="size" :src="url" />
-      </div>
-      <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
-        <p class="text-xs">
-          <code>&lt;el-avatar :size="50"&gt;SK&lt;/el-avatar&gt;</code>
-        </p>
-      </div>
-    </section>
-
-    <section>
-      <h1>Types</h1>
-      <p class="p-md-c my-6">You can use any 'string' expression within the tag, in addition to a type that accepts 'src' or 'icon' as a property.</p>
-      <div class="grid grid-flow-col auto-cols-max gap-4 items-center">
-        <el-avatar icon="isax-add-circle" />
-        <el-avatar icon="isax-add-circle" size="large" />
-        <el-avatar :src="url" />
-        <el-avatar>SK</el-avatar>
-      </div>
-      <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
-        <p class="text-xs">
-          <code>&lt;el-avatar icon="isax-add-circle" size="xlarge"&gt;&lt;/el-avatar&gt;</code>
-        </p>
-      </div>
-    </section>
-  </div>
-</template>
-
-<script>
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'TimusCascader',
-  data() {
-    return {
-      url: 'https://api.dicebear.com/7.x/adventurer-neutral/svg?seed=Princess',
-      sizeList: ['large', 'medium', 'small'],
-    };
-  },
-});
-</script>

package/components-js/ThemeBadge.vue

@@ -1,106 +0,0 @@
-<template>
-  <div class="pt-8 pb-16 flex gap-12 flex-col">
-    <section>
-      <h1>Temel Kullanım</h1>
-      <p class="p-md-c my-6">
-        Butonlar ve simgeler üzerinde sayı veya durum işareti. Yeni mesajların miktarını görüntüler. Miktar, `Number` veya `String` kabul eden `value`
-        ile tanımlanır.
-      </p>
-      <div class="grid grid-flow-col auto-cols-max gap-4">
-        <el-badge :value="12"> <el-button size="small">Yorumlar</el-button> </el-badge>
-        <el-badge v-for="(item, key) in colors" :key="key" :value="randomNumber()" :type="item">
-          <el-button size="small" :class="randomButtonType()" :type="randomColor()">{{ item }}</el-button>
-        </el-badge>
-        <el-dropdown trigger="click">
-          <span class="el-dropdown-link"> Beni Tıkla<i class="el-icon-caret-bottom el-icon--right" /> </span>
-          <template #dropdown>
-            <el-dropdown-menu>
-              <el-dropdown-item class="clearfix">
-                Yorumlar
-                <el-badge class="mark" :value="12" />
-              </el-dropdown-item>
-              <el-dropdown-item class="clearfix">
-                Yanıtlar
-                <el-badge class="mark" :value="3" />
-              </el-dropdown-item>
-            </el-dropdown-menu>
-          </template>
-        </el-dropdown>
-      </div>
-      <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
-        <p class="text-xs">
-          <code>&lt;el-badge :value="12"&gt; &lt;el-button size="small"&gt;Comments&lt;/el-button&gt; &lt;/el-badge&gt;</code>
-        </p>
-      </div>
-    </section>
-
-    <section>
-      <h1>Point</h1>
-      <p class="p-md-c my-6">Use a red dot to mark content that needs to be noticed.</p>
-      <div class="grid grid-flow-col auto-cols-max gap-4">
-        <el-badge is-dot class="item">query</el-badge>
-        <el-badge is-dot class="item">
-          <el-button class="share-button" icon="el-icon-share" />
-        </el-badge>
-        <el-badge v-for="size in sizeList" :key="size + 'avatar'" is-dot class="item"><el-avatar :size="size">SK</el-avatar></el-badge>
-        <el-badge v-for="size in sizeList" :key="size + 'shape'" is-dot class="item"><el-avatar shape="square" :size="size">SK</el-avatar></el-badge>
-      </div>
-      <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
-        <p class="text-xs">
-          <code>&lt;el-badge :value="12"&gt; &lt;el-button size="small"&gt;Comments&lt;/el-button&gt; &lt;/el-badge&gt;</code>
-        </p>
-      </div>
-    </section>
-
-    <section>
-      <h1>Max Değer</h1>
-      <p class="p-md-c my-6">
-        Maksimum değer, bir Sayı (Number) olan max özelliği ile belirlenir. Unutmayın ki, bu özellik yalnızca value özelliği de bir Sayı (Number)
-        olduğunda çalışır.
-      </p>
-      <div class="grid grid-flow-col auto-cols-max gap-4">
-        <el-badge :value="200" :max="99" class="item">
-          <el-button size="small">Yorumlar</el-button>
-        </el-badge>
-        <el-badge :value="100" :max="10" class="item">
-          <el-button size="small">Yanıtlar</el-button>
-        </el-badge>
-      </div>
-      <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
-        <p class="text-xs">
-          <code>&lt;el-badge :value="12"&gt; &lt;el-button size="small"&gt;Yorumlar&lt;/el-button&gt; &lt;/el-badge&gt;</code>
-        </p>
-      </div>
-    </section>
-  </div>
-</template>
-
-<script>
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'TimusCascader',
-  data() {
-    return {
-      colors: ['primary', 'info', 'success', 'warning', 'danger'],
-      sizeList: ['large', 'medium', 'small'],
-    };
-  },
-  methods: {
-    handleChange(value) {
-      console.log(value);
-    },
-    randomNumber() {
-      return Math.round(Math.random() * 1000);
-    },
-    randomColor() {
-      return this.colors[Math.round(Math.random() * 7)];
-    },
-    randomButtonType() {
-      const type = ['outline'];
-
-      return type[Math.round(Math.random() * 2)];
-    },
-  },
-});
-</script>

package/components-js/ThemeBreadcrumb.vue

@@ -1,44 +0,0 @@
-<template>
-  <div class="pt-8 pb-16 flex gap-12 flex-col">
-    <section>
-      <h1>Temel Kullanım</h1>
-      <p class="p-md-c my-6">
-        Butonlar ve simgeler üzerinde sayı veya durum işareti. Yeni mesajların miktarını görüntüler. Miktar, `Number` veya `String` kabul eden `value`
-        ile tanımlanır.
-      </p>
-      <el-breadcrumb separator-class="isax-arrow-right-1">
-        <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
-        <el-breadcrumb-item :to="{ path: '/' }">promotion management</el-breadcrumb-item>
-        <el-breadcrumb-item :to="{ path: '/' }">promotion list</el-breadcrumb-item>
-        <el-breadcrumb-item>promotion detail</el-breadcrumb-item>
-      </el-breadcrumb>
-      <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
-        <p class="text-xs">
-          <code>
-            &lt;el-breadcrumb separator-class="el-icon-arrow-right""&gt; &lt;el-breadcrumb-item :to="{ path: '/'
-            }"&gt;Comments&lt;/el-breadcrumb-item&gt; &lt;/el-breadcrumb&gt;
-          </code>
-        </p>
-      </div>
-    </section>
-  </div>
-</template>
-
-<script>
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'TimusBreadcrumb',
-  data() {
-    return {
-      colors: ['primary', 'info', 'success', 'warning', 'danger'],
-      sizeList: ['large', 'medium', 'small'],
-    };
-  },
-  methods: {
-    handleChange(value) {
-      console.log(value);
-    },
-  },
-});
-</script>

package/components-js/ThemeButtons.vue

@@ -1,148 +0,0 @@
-<template>
-  <div class="pt-8 pb-16 flex gap-12 flex-col">
-    <section>
-      <h1>Fill</h1>
-      <p class="p-lg my-6">
-        "Fill" stili butonlar, içeriği tamamen kaplayan renge sahip butonlardır. Bu butonlar, kullanıcının dikkatini çekmek ve önemli eylemleri
-        vurgulamak için idealdir.
-      </p>
-      <div class="grid grid-flow-col auto-cols-max gap-4">
-        <el-button v-for="(item, index) in colors" :key="index" :type="item">{{ item }}</el-button>
-      </div>
-      <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
-        <p class="text-xs">
-          Örnek kullanım:
-          <code>&lt;el-button :type="'primary'"&gt;Primary&lt;/el-button&gt;</code>
-        </p>
-      </div>
-    </section>
-
-    <section>
-      <h1>Outline</h1>
-      <p class="p-lg my-6">Çevresi çizgili ve içi transparan olan 'outline' butonlarımız, daha hafif bir tasarım dili sunar.</p>
-      <div class="grid grid-flow-col auto-cols-max gap-4">
-        <el-button class="outline">Default Outline</el-button>
-        <el-button v-for="(item, index) in colors" :key="index" :type="item" class="outline" plain>{{ item }}</el-button>
-      </div>
-      <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
-        <p class="text-xs">
-          Outline görünümü için, buton elementinize <code>class="outline"</code> ekleyin. Örnek:
-          <code>&lt;el-button class="outline"&gt;Button&lt;/el-button&gt;</code>
-        </p>
-      </div>
-    </section>
-
-    <section>
-      <h1>Ghost</h1>
-      <p class="p-lg my-6">Hemen hemen şeffaf 'ghost' butonlarımız, minimalist tasarımlar için uygundur ve arka planla uyum sağlar.</p>
-      <div class="grid grid-flow-col auto-cols-max gap-4">
-        <el-button v-for="(item, index) in colors" :key="index" :type="item" class="ghost">{{ item }}</el-button>
-      </div>
-      <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
-        <p class="text-xs">
-          Ghost görünümü için, buton elementinize <code>class="ghost"</code> ekleyin. Örnek:
-          <code>&lt;el-button class="ghost"&gt;Button&lt;/el-button&gt;</code>
-        </p>
-      </div>
-    </section>
-
-    <section>
-      <h1>Size</h1>
-      <p class="p-lg my-6">Farklı boyutlardaki butonlarımız, çeşitli arayüz ihtiyaçlarına yanıt vermek için tasarlanmıştır.</p>
-      <div class="grid grid-flow-col auto-cols-max items-center gap-4">
-        <el-button>Default</el-button>
-        <el-button v-for="(item, index) in sizes" :key="index" :size="item" type="primary">{{ item }}</el-button>
-      </div>
-      <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
-        <p class="text-xs">
-          Örnekler:
-          <code>&lt;el-button :size="'large'"&gt;Button&lt;/el-button&gt;</code> ya da
-          <code>&lt;el-button :size="'small'"&gt;Button&lt;/el-button&gt;</code>
-        </p>
-      </div>
-    </section>
-
-    <section>
-      <h1>Disabled</h1>
-      <p class="p-lg my-6">Etkileşime kapalı 'disabled' butonlarımız, kullanılamaz durumları göstermek için kullanılır.</p>
-      <div class="grid grid-flow-col auto-cols-max gap-4">
-        <el-button v-for="(item, index) in colors" :key="index" :type="item" disabled>{{ item }}</el-button>
-      </div>
-      <div class="my-4 p-4 border-l-4 border-red-600 bg-red-100">
-        <p class="text-xs">
-          Butonu devre dışı bırakmak için, <code>disabled</code> özelliğini ekleyin. Örnek:
-          <code>&lt;el-button disabled&gt;Button&lt;/el-button&gt;</code>
-        </p>
-      </div>
-    </section>
-
-    <section>
-      <h1>Icons</h1>
-      <p class="p-lg my-6">
-        İkonlarla zenginleştirilmiş butonlarımız, görsel bir ipucu sunar ve kullanıcı deneyimini artırır. Tüm ikonlarımızın listesini görmek için
-        <nuxt-link to="/icons" class="text-blue-600 hover:underline">buraya tıklayın</nuxt-link>.
-      </p>
-      <div class="flex gap-4 items-center">
-        <el-button type="primary" class="isax-trash" size="large" />
-        <el-button type="primary" class="isax-trash" size="medium" />
-        <el-button type="primary" class="isax-trash" size="small" />
-        <el-button type="primary" class="isax-trash" size="mini" />
-        <el-button type="primary" class="isax-chart" />
-        <el-button type="primary" class="isax-clipboard-text icon-right">icon-right</el-button>
-        <el-button v-for="(item, index) in icons" :key="index" type="primary" :class="item">{{ item }}</el-button>
-      </div>
-      <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
-        <p class="text-xs">
-          Örnekler:
-          <code>&lt;el-button type="primary" class="isax-trash"&gt;&lt;/el-button&gt;</code>. Sağda ikon için <code>class="icon-right"</code> ekleyin.
-        </p>
-      </div>
-    </section>
-
-    <section>
-      <h1>Groups</h1>
-      <p class="p-lg my-6">Buton gruplarımız, ilgili işlemleri bir arada toplayarak kullanıcı arayüzünü düzenler.</p>
-      <div class="grid grid-flow-col auto-cols-max gap-4">
-        <el-button-group>
-          <el-button type="primary" class="isax-arrow-left">Previous Page</el-button>
-          <el-button type="primary" class="isax-arrow-right-1 icon-right">Next Page</el-button>
-        </el-button-group>
-        <el-button-group>
-          <el-button type="primary" icon="isax-textalign-justifyleft" />
-          <el-button type="primary" icon="isax-textalign-center" />
-          <el-button type="primary" icon="isax-textalign-justifyright" />
-        </el-button-group>
-      </div>
-      <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
-        <p class="text-xs">Buton grupları için <code>&lt;el-button-group&gt;</code> kullanın.</p>
-      </div>
-    </section>
-  </div>
-</template>
-<script>
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'TimusButtonSample',
-  data() {
-    return {
-      colors: ['primary', 'secondary', 'gray', 'info', 'success', 'warning', 'danger'],
-      status: ['outline', 'ghost', 'rounder', 'disabled'],
-      sizes: ['large', 'medium', 'small', 'mini'],
-      icons: ['isax-bag', 'isax-calculator'],
-    };
-  },
-  computed: {
-    gridSize() {
-      const grids = {
-        5: 'grid-cols-5',
-        6: 'grid-cols-6',
-        7: 'grid-cols-7',
-        8: 'grid-cols-8',
-      };
-
-      return grids;
-    },
-  },
-});
-</script>