@timus-networks/theme 1.0.183 → 2.0.0

package/components-js/exporter.js

@@ -1,19 +0,0 @@
-const components = {};
-const requireComponent = require.context(
-  '.', // read from current directory
-  false, // don't look in subdirectories
-  /[A-Z]\w+\.(vue)$/, // only look for Vue files
-  // EXPERIMENTAL: /[A-Z]\w+\.(vue|js)$/, // only look for Vue or JS files
-);
-
-requireComponent.keys().forEach((fileName) => {
-  const componentConfig = requireComponent(fileName);
-  const componentName = fileName
-    .split('/')
-    .pop()
-    .replace(/\.\w+$/, ''); // remove file extension and set file name as component name
-
-  components[componentName] = componentConfig.default || componentConfig;
-});
-
-export default components;

package/components-js/interfaces.d.ts

@@ -1,10 +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/interfaces.js

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

package/components-js/utils.d.ts

@@ -1,6 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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/components-ts/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-ts/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-ts/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-ts/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-ts/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>