@timus-networks/theme 2.3.2 → 2.3.4

package/dist/runtime/components/production/timus-breadcrumb.vue

@@ -2,82 +2,157 @@
   <div class="flex gap-4 items-center">
     <template v-if="false">
       <!-- Back butonu entegre etmek istersek bu v-if'i silmek işi çözer -->
-      <el-button v-if="$route.path !== '/'" class="isax-arrow-left outline" size="mini" @click="$router.go(-1)" />
+      <el-button v-if="route.path !== '/'" class="isax-arrow-left outline" size="mini" @click="goBack" />
     </template>
     <el-breadcrumb separator="">
       <el-breadcrumb-item v-for="(crumb, index) in list" :key="index" v-bind="index < list.length - 1 ? { to: { path: crumb.path } } : {}">
-        {{ $t(crumb.label) }}
+        {{ crumb }}
         <!--{{ crumb }} Tüm Objeyi Görüntülemek İçin Bunu Kullan -->
       </el-breadcrumb-item>
     </el-breadcrumb>
   </div>
 </template>
 
-<script>
-export default {
-  props: {
-    onChange: {
-      type: Array,
-      default: () => []
-    },
-    paths: {
-      type: Array,
-      default: () => []
-    }
-  },
-  computed: {
-    list() {
-      const pathArray = this.$route.path.split("/");
-      const { tab, id } = this.$route.query;
-      const breadcrumbs = [];
-      let link = "";
-      breadcrumbs.push({
-        path: "/",
-        label: "header.home.text"
-      });
-      pathArray.filter(Boolean).forEach((path, index) => {
-        link += "/" + path;
-        index === pathArray.length - 2 && id && !tab && (link += "?id=" + id);
-        const matched = this.findBestMatch(link);
-        matched && !matched?.hidden && breadcrumbs.push(matched);
-      });
-      if (tab) {
-        const matched = this.findBestMatch(link + "/" + tab);
-        matched && !matched?.hidden && breadcrumbs.push(matched);
+<script lang="ts">
+  /**
+   * tab,id,action gibi query parametrelerini alır route'un sonuna ekler ve onları da route.path gibi gösterir.
+   * bu parametresi sadece mevcutsa eklenir. Örnek: http://localhost:3000/customers/123?tab=details
+   * bu route'da tab=details olacak ve path'i resolve ederken ['customers', '123', 'details'] şu şekilde bir listeye dikkat edecektir.
+   *
+   * `hidden` ile match eden route `hidden` olarak tanimlanabilmektedir. Mesela http://localhost:3000/customers/details/123 adresinde
+   * {regex: `^\/customers\/details$`, hidden: true} gibi bir route tanımlandığında detail ile ilgili bir route breadrump'a eklenmez. Ama öncesindeki
+   * customers ve sonrasında 123 ile ilgili tanımlar yapıldıysa onlar eklenir (yapılmadıysa otomatik ekleyecektir).
+   *
+   * `rest` olarak tanımlanmışsa, match eden route'un sonrasında kalan path'a bakar ve rest ile belirtilen regex bu path ile match
+   * ederse o zaman ister `hidden` ile gizlersiniz, isterseniz `label` ile text'ini güncellersiniz. Örneğin birbirinin benzeri 2 adet link var diyelim.
+   * http://localhost:3000/customers/123, http://localhost:3000/customers/123/subscriptions gibi. 123 ile biten route'a bir text yazdırmak isterken
+   * diğerinin 123'e ait path'ine bir şey yazdırmak istemiyor olabilirsiniz.
+   * O zaman ilk route için {regex: `^\/customers\/([A-Za-z0-9\-_]+)$`, label: 'header.customers.details.text'} tanımlarken
+   * ikincisi için {regex: `^\/customers\/([A-Za-z0-9\-_]+)$`, rest: `^\/subscriptions$`, hidden: true} demeniz yeterli olacaktır.
+   * Rest burada ikinci bir condition gibi çalışmakadır.
+   *
+   * `path` ile match eden route tıklanıldığında path ile belirtilen route'a yönlendirilir. Tanımlanmazsa kendi path'ini alacaktır.
+   *
+   *`label` ile istediğiniz match eden route'a text verebilirsiniz.
+   *
+   * Rest ile ilgili detaylı açıklama:
+   *
+   * bu `customers/1363/subscriptions` gibi bir linki resolve ederken `1363` ile ilgili bir şey yazmasına engel olacaktır.
+   * bunu yaparken regex'i match eden route'un (customers/1363) sonrasında kalan path'a bakar, `rest` ile belirtilen
+   * Regex ile uyuşuyorsa (buradaki örnekte `subscriptions`) parantez içerisinde belirtilen kısmı navigasyona eklemez.
+   * Sonuç: `customers/subscriptions` şeklinde algılar.
+   *
+   * Dilerseniz `hidden:true` ile bu route gizleyebilirsiniz. Bu durumda breadcrumbda `home > customer > subscription` gibi bir sıralama yapılacaktır.
+   * Ya da `label` ile yeni bir isim verebilirsiniz.
+   *  {
+   *    regex: /^\/customers\/([A-Za-z0-9\-_]+)$/,
+   *    rest: /^subscriptions$/,
+   *    hidden: true,
+   *  },
+   *  {
+   *    regex: /^\/customers\/([A-Za-z0-9\-_]+)$/,
+   *    rest: /^subscriptions$/,
+   *    label: "yeni isim",
+   *  },
+   */
+</script>
+
+<script setup lang="ts">
+  import { computed } from 'vue';
+
+  interface Breadcrumb {
+    regex: string;
+    path: string;
+    label: string;
+    hidden?: boolean;
+    rest?: string;
+    auto?: boolean;
+    value?: string;
+  }
+
+  interface Props {
+    onChange?: Array<() => void>;
+    paths: Array<Breadcrumb>;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    onChange: () => [],
+    paths: () => [],
+  });
+  const route = useRoute();
+  const list = computed<Breadcrumb[]>(() => {
+    const pathArray = route.path.split('/');
+    const { tab, id } = route.query;
+    const breadcrumbs: Breadcrumb[] = [];
+    let link = '';
+
+    breadcrumbs.push({
+      path: '/',
+      label: 'header.home.text',
+      regex: '\/',
+    });
+
+    pathArray.filter(Boolean).forEach((path, index) => {
+      link += '/' + path;
+      if (index === pathArray.length - 2 && id && !tab) {
+        link += '?id=' + id;
+      }
+      const matched = findBestMatch(link);
+
+      if (matched && !matched?.hidden) {
+        breadcrumbs.push(matched);
+      }
+    });
+
+    if (tab) {
+      const matched = findBestMatch(link + '/' + tab);
+
+      if (matched && !matched?.hidden) {
+        breadcrumbs.push(matched);
       }
-      return breadcrumbs;
     }
-  },
-  methods: {
-    findBestMatch(url) {
-      let bestMatch = null;
-      let maxMatchLength = 0;
-      this.paths.forEach((route) => {
-        const regex = new RegExp(route.regex);
-        if (regex.test(url)) {
-          const match = url?.match(regex);
-          if (match[0].length > maxMatchLength) {
-            maxMatchLength = match.length;
-            route.path = route.path ?? match[0];
-            match[1] && ([, route.value] = match);
-            bestMatch = route;
-          }
+
+    return breadcrumbs;
+  });
+  const findBestMatch = (url: string): Breadcrumb | null => {
+    let bestMatch: Breadcrumb | null = null;
+    let maxMatchLength = 0;
+
+    props.paths.forEach((route: Breadcrumb) => {
+      const regex = new RegExp(route.regex);
+
+      if (regex.test(url)) {
+        const match = url.match(regex);
+
+        if (match && match[0].length > maxMatchLength) {
+          maxMatchLength = match[0].length;
+          route.path = route.path ?? match[0]; // route.path tanımsızsa match[0] ile güncelle
+
+          if (match[1]) [, route.value] = match; // match[1] mevcutsa route.value güncelle, yoksa eski değeri koru
+
+          bestMatch = route;
         }
-      });
-      if (!bestMatch) {
-        let label = "header";
-        let filteredArray = url.split("/").filter(Boolean);
-        filteredArray.forEach((path) => {
-          label = label + `.${path}`;
-        });
-        bestMatch = {
-          label: label + ".text",
-          path: url,
-          auto: true
-        };
       }
-      return bestMatch;
+    });
+
+    if (!bestMatch) {
+      let label = 'header';
+      const filteredArray = url.split('/').filter(Boolean);
+
+      filteredArray.forEach((path) => {
+        label = label + `.${path}`;
+      });
+
+      bestMatch = {
+        label: label + '.text',
+        path: url,
+        auto: true,
+        regex: '',
+      };
     }
-  }
-};
+
+    return bestMatch;
+  };
+  const router = useRouter();
+  const goBack = () => router.go(-1);
 </script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@timus-networks/theme",
-  "version": "2.3.2",
+  "version": "2.3.4",
   "description": "A comprehensive Nuxt.js module providing a tailored theme experience with integrated TailwindCSS support for applications.",
   "type": "module",
   "exports": {
@@ -27,7 +27,7 @@
     "sass": "node generate-sass.js",
     "prepack": "nuxt-module-build build",
     "release-old": "npm run prepack && changelogen --release && npm run pub && git push --follow-tags",
-    "version": "standard-version",
+    "version": "standard-version --release-as ${npm_config_type:-patch}",
     "release": "npm run prepack && npm run version && npm run pub && git push --follow-tags origin main"
   },
   "standard-version": {

package/dist/runtime/components/production/timus-breadcrumb.d.ts

@@ -1,36 +0,0 @@
-export declare const path: ({
-    regex: RegExp;
-    label: string;
-    path?: undefined;
-    hidden?: undefined;
-    deep?: undefined;
-    parameter?: undefined;
-} | {
-    regex: RegExp;
-    label: string;
-    path: string;
-    hidden?: undefined;
-    deep?: undefined;
-    parameter?: undefined;
-} | {
-    regex: RegExp;
-    label: string;
-    hidden: boolean;
-    path?: undefined;
-    deep?: undefined;
-    parameter?: undefined;
-} | {
-    regex: RegExp;
-    hidden: boolean;
-    label?: undefined;
-    path?: undefined;
-    deep?: undefined;
-    parameter?: undefined;
-} | {
-    regex: RegExp;
-    label: string;
-    path: string;
-    deep: boolean;
-    parameter: string;
-    hidden?: undefined;
-})[];

package/dist/runtime/components/production/timus-breadcrumb.js

@@ -1,224 +0,0 @@
-export const path = [
-  /* Users */
-  {
-    regex: /^\/about$/,
-    label: "header.about.text"
-  },
-  {
-    regex: /^\/users$/,
-    label: "header.users.text",
-    path: "/users?tab=users"
-  },
-  {
-    regex: /^\/users\/(\d+)/,
-    label: "header.users.detail.text"
-  },
-  {
-    regex: /^\/teams/,
-    label: "header.teams.text",
-    path: "/users?tab=teams"
-  },
-  {
-    regex: /^\/teams\/(\d+)/,
-    label: "header.teams.detail.text"
-  },
-  /* Devices */
-  {
-    regex: /^\/devices\/telemetry\/([A-Za-z0-9\-_]+)/,
-    label: "header.devices.detail.text",
-    hidden: true
-  },
-  {
-    regex: /^\/devices\/(?![telemetry])([A-Za-z0-9\-_]+)/,
-    // regex: /^\/devices\/details(?:\/([A-Za-z0-9\-_]+))?$/,
-    label: "header.devices.posture_details.text"
-  },
-  /* Sites */
-  {
-    regex: /^\/sites\/(\d+)/,
-    label: "header.sites.detail.text"
-  },
-  /* Sites Custom Port */
-  {
-    regex: /^\/sites\/([^/]+)\/custom-ports/,
-    label: "header.sites.custom_ports.text"
-  },
-  /* Rules */
-  {
-    regex: /^\/rules$/,
-    label: "header.rules.text",
-    path: "/rules/firewall"
-  },
-  {
-    regex: /^\/rules\/firewall\/create/,
-    label: "header.rules.firewall.create.text"
-  },
-  {
-    regex: /^\/rules\/firewall\/(?!create)([A-Za-z0-9\-_]+)/,
-    label: "header.rules.firewall.detail.text"
-  },
-  {
-    regex: /^\/rules\/forwarding\/(?!create)([A-Za-z0-9\-_]+)/,
-    label: "header.rules.forwarding.detail.text"
-  },
-  {
-    regex: /^\/rules\/acls\/([A-Za-z0-9\-_]+)/,
-    label: "header.rules.acls.edit.text"
-  },
-  /* Ztna - Zero Trust Security */
-  {
-    regex: /^\/ztna$/,
-    label: "header.ztna.text",
-    path: "/ztna/dashboard"
-  },
-  {
-    regex: /^\/ztna\/device-posture-check\/(view|edit)$/,
-    hidden: true
-  },
-  {
-    regex: /^\/ztna\/device-posture-check\/view\/([A-Za-z0-9\-_]+)/,
-    label: "header.ztna.device-posture-check.view.text"
-  },
-  {
-    regex: /^\/ztna\/device-posture-check\/edit\/([A-Za-z0-9\-_]+)/,
-    label: "header.ztna.device-posture-check.edit.text"
-  },
-  /* Insights */
-  {
-    regex: /^\/insights$/,
-    // /insights ya da /insights/alerts ikisinden biri yeterli
-    label: "header.insights.text",
-    path: "/insights/alerts?tab=alerts&page=1"
-  },
-  {
-    regex: /^\/insights(?:\/alerts)$/,
-    // /insights ya da /insights/alerts ikisinden biri yeterli
-    label: "header.insights.alerts.text",
-    path: "/insights/alerts?tab=alerts&page=1"
-  },
-  {
-    regex: /^\/insights(?:\/traffic)$/,
-    // /insights ya da /insights/alerts ikisinden biri yeterli
-    label: "header.insights.traffic.text",
-    path: "/insights/traffic?tab=log&page=1"
-  },
-  {
-    regex: /^\/insights(?:\/events)$/,
-    // /insights ya da /insights/events ikisinden biri yeterli
-    label: "header.insights.events.text",
-    path: "/insights/events?tab=user&page=1"
-  },
-  {
-    regex: /^\/insights\/reports\/(?!templates)([A-Za-z0-9\-_]+)/,
-    label: "header.insights.tracker.reports.detail.text"
-  },
-  {
-    regex: /^\/insights\/reports\/templates$/,
-    label: "header.insights.tracker.reports.templates.text",
-    path: "/insights/reports?page=1"
-  },
-  {
-    regex: /^\/insights\/reports\/templates\/([A-Za-z0-9\-_]+)/,
-    label: "header.insights.tracker.reports.templates.edit.text"
-  },
-  {
-    regex: /^\/insights\/tracker$/,
-    label: "header.insights.tracker.text",
-    path: "/insights/tracker?tab=overview"
-  },
-  {
-    regex: /^\/insights\/tracker\/overview$/,
-    label: "header.insights.tracker.overview.text",
-    path: "/insights/tracker?tab=overview"
-  },
-  {
-    regex: /^\/insights\/tracker\/user(?:s)?$/,
-    label: "header.insights.tracker.users.text",
-    path: "/insights/tracker?tab=users"
-  },
-  {
-    regex: /^\/insights\/tracker\/team(?:s)?$/,
-    label: "header.insights.tracker.teams.text",
-    path: "/insights/tracker?tab=teams"
-  },
-  {
-    regex: /^\/insights\/tracker\/application(?:s)?$/,
-    label: "header.insights.tracker.applications.text",
-    path: "/insights/tracker?tab=applications"
-  },
-  {
-    regex: /^\/insights\/tracker\/user\/([A-Za-z0-9\-_]+)/,
-    label: "header.insights.tracker.user.detail.text"
-  },
-  {
-    regex: /^\/insights\/tracker\/team\/([A-Za-z0-9\-_]+)/,
-    label: "header.insights.tracker.team.detail.text"
-  },
-  {
-    regex: /^\/insights\/tracker\/application\/([A-Za-z0-9\-_]+)/,
-    label: "header.insights.tracker.application.detail.text"
-  },
-  {
-    regex: /^\/insights\/dpc-reports$/,
-    // /insights ya da /insights/events ikisinden biri yeterli
-    label: "header.insights.dpc-reports.text",
-    path: "/insights/dpc-reports?tab=overview"
-  },
-  {
-    regex: /^\/insights\/dpc-reports\/(?!overview|devices|posture_checks)([A-Za-z0-9\-_]+)$/,
-    label: "header.insights.dpc-reports.detail.text",
-    path: "/insights/dpc-reports?tab=overview"
-  },
-  {
-    regex: /^\/insights\/dpc-reports\/([A-Za-z0-9\-_]+)\/([A-Za-z0-9\-_]+)$/,
-    label: "header.insights.dpc-reports.batch_id.detail.text",
-    path: "/insights/dpc-reports?tab=overview",
-    deep: true,
-    parameter: "show"
-  },
-  {
-    regex: /^\/settings$/,
-    label: "header.settings.text",
-    path: "/settings/integrations"
-  },
-  {
-    regex: /^\/settings\/configuration\/(?:trusted_networks|trusted-networks)$/,
-    label: "header.settings.configuration.trusted_networks.text",
-    path: "/settings/configuration?tab=trusted_networks"
-  },
-  {
-    regex: /^\/settings\/configuration\/trusted-networks\/(?!create)([A-Za-z0-9\-_]+)$/,
-    label: "header.settings.configuration.trusted_networks.edit.text",
-    path: "/settings/configuration?tab=trusted_networks"
-  },
-  {
-    regex: /^\/settings\/tags\/new$/,
-    label: "header.settings.tags.new.text"
-  },
-  {
-    regex: /^\/settings\/tags\/(?!new)([A-Za-z0-9\-_]+)/,
-    label: "header.settings.tags.detail.text"
-  },
-  {
-    regex: /^\/settings\/administrators$/,
-    label: "header.settings.administrators.text"
-  },
-  {
-    regex: /^\/settings\/administrators\/roles$/,
-    label: "header.settings.administrators.roles.text",
-    path: "/settings/administrators?tab=roles"
-  },
-  {
-    regex: /^\/settings\/administrators\/roles\/detail$/,
-    label: "header.settings.administrators.roles.create.text"
-  },
-  {
-    regex: /^\/settings\/administrators\/roles\/detail\?id=\d+$/,
-    label: "header.settings.administrators.roles.edit.text"
-  }
-  // {
-  //   path: 'settings',
-  //   regex: '/settings/.*',
-  //   label: 'header.settings.detail.text',
-  // },
-];