@timus-networks/theme 2.0.16 → 2.2.0

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

@@ -0,0 +1,89 @@
+<template>
+  <div class="flex flex-col gap-8 mb-16">
+    <h1 class="">TimePicker</h1>
+    <p>Use Time Picker for time input.</p>
+
+    <el-card>
+      <template #header>Arbitrary time picker</template>
+      <div class="flex flex-col gap-3">
+        <p>
+          Can pick an arbitrary time. By default, you can scroll the mouse wheel to pick time, alternatively you can use the control arrows when the
+          <el-text tag="mark">arrow-control</el-text> attribute is set.
+        </p>
+        <section class="flex gap-7.5">
+          <el-time-picker v-model="value" placeholder="Arbitrary time" />
+          <el-time-picker v-model="value" arrow-control placeholder="Arbitrary time" />
+        </section>
+      </div>
+      <template #footer> <html-encode :tag="snippets.basic" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header>Limit the time range</template>
+      <div class="flex flex-col gap-3">
+        <p>
+          You can also limit the time range. Limit the time range by specifying <el-text tag="mark">disabledHours</el-text> <el-text tag="mark">disabledMinutes</el-text> and
+          <el-text tag="mark">disabledSeconds</el-text>.
+        </p>
+        <section class="flex gap-7.5">
+          <el-time-picker v-model="limited" :disabled-hours="disabledHours" :disabled-minutes="disabledMinutes" :disabled-seconds="disabledSeconds" placeholder="Arbitrary time" />
+        </section>
+      </div>
+      <template #footer> <html-encode :tag="snippets.limit" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header>Arbitrary time range</template>
+      <div class="flex flex-col gap-3">
+        <p>
+          Can pick an arbitrary time range. We can pick a time range by adding an <el-text tag="mark">is-range</el-text> attribute. Also,
+          <el-text tag="mark">arrow-control</el-text> is supported in range mode.
+        </p>
+        <section class="flex gap-7.5">
+          <el-time-picker v-model="range" is-range range-separator="To" start-placeholder="Start time" end-placeholder="End time" />
+          <el-time-picker v-model="range" is-range arrow-control range-separator="To" start-placeholder="Start time" end-placeholder="End time" />
+        </section>
+      </div>
+      <template #footer> <html-encode :tag="snippets.arbitrary" /> </template>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import type { GetDisabledMinutes } from 'element-plus';
+  import { ref } from 'vue';
+
+  const value = ref('');
+  const range = ref<[Date, Date]>([new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]);
+  const limited = ref(new Date(2016, 9, 10, 18, 30));
+  const makeRange = (start: number, end: number) => {
+    const result: number[] = [];
+
+    for (let i = start; i <= end; i++) {
+      result.push(i);
+    }
+
+    return result;
+  };
+  const disabledHours = () => makeRange(0, 16).concat(makeRange(19, 23));
+  const disabledMinutes: GetDisabledMinutes = (hour: number) => {
+    if (hour === 17) {
+      return makeRange(0, 29) as number[];
+    }
+    if (hour === 18) {
+      return makeRange(31, 59) as number[];
+    }
+
+    return [];
+  };
+  const disabledSeconds = (hour: number, minute: number) => {
+    if (hour === 18 && minute === 30) {
+      return makeRange(1, 59);
+    }
+  };
+  const snippets = ref({
+    basic: `<el-time-picker v-model="value" arrow-control placeholder="Arbitrary time" />`,
+    limit: `<el-time-picker v-model="limited" :disabled-hours="disabledHours" :disabled-minutes="disabledMinutes" :disabled-seconds="disabledSeconds" placeholder="Arbitrary time" />`,
+    arbitrary: `<el-time-picker v-model="range" is-range arrow-control range-separator="To" start-placeholder="Start time" end-placeholder="End time" />`,
+  });
+</script>

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

@@ -0,0 +1,104 @@
+<template>
+  <div class="flex flex-col gap-8 mb-16">
+    <h1 class="">Tooltip</h1>
+    <p>Display prompt information for mouse hover.</p>
+
+    <el-card>
+      <template #header> Basic usage </template>
+      <div class="flex flex-col gap-3">
+        <p>
+          Tooltip has 9 placements. Use attribute <el-text tag="mark">content</el-text> to set the display content when hover. The attribute
+          <el-text tag="mark"> placement </el-text> determines the position of the tooltip. Its value is <el-text tag="mark">[orientation]-[alignment]</el-text> with four
+          orientations <el-text tag="mark">top, left, right, bottom</el-text> and three alignments <el-text tag="mark">start, end, null, and the default</el-text> alignment is
+          null. Take <el-text tag="mark">placement="left-end"</el-text> for example, Tooltip will display on the left of the element which you are hovering and the bottom of the
+          tooltip aligns with the bottom of the element. attribute for display an image
+        </p>
+        <section class="flex gap-7.5">
+          <div class="flex flex-col items-center gap-4 grow w-[600px]">
+            <div class="flex gap-7.5">
+              <el-tooltip class="box-item" effect="dark" content="Top Left prompts info" placement="top-start">
+                <el-button>top-start</el-button>
+              </el-tooltip>
+              <el-tooltip class="box-item" effect="dark" content="Top Center prompts info" placement="top">
+                <el-button>top</el-button>
+              </el-tooltip>
+              <el-tooltip class="box-item" effect="dark" content="Top Right prompts info" placement="top-end">
+                <el-button>top-end</el-button>
+              </el-tooltip>
+            </div>
+            <div class="flex gap-7.5">
+              <el-tooltip class="box-item" effect="dark" content="Left Top prompts info" placement="left-start">
+                <el-button>left-start</el-button>
+              </el-tooltip>
+              <el-tooltip class="box-item" effect="dark" content="Right Top prompts info" placement="right-start">
+                <el-button>right-start</el-button>
+              </el-tooltip>
+            </div>
+            <div class="flex gap-7.5">
+              <el-tooltip class="box-item" effect="dark" content="Left Center prompts info" placement="left">
+                <el-button>left</el-button>
+              </el-tooltip>
+              <el-tooltip class="box-item" effect="dark" content="Right Center prompts info" placement="right">
+                <el-button>right</el-button>
+              </el-tooltip>
+            </div>
+            <div class="flex gap-7.5">
+              <el-tooltip class="box-item" effect="dark" content="Left Bottom prompts info" placement="left-end">
+                <el-button>left-end</el-button>
+              </el-tooltip>
+              <el-tooltip class="box-item" effect="dark" content="Right Bottom prompts info" placement="right-end">
+                <el-button>right-end</el-button>
+              </el-tooltip>
+            </div>
+            <div class="flex gap-7.5">
+              <el-tooltip class="box-item" effect="dark" content="Bottom Left prompts info" placement="bottom-start">
+                <el-button>bottom-start</el-button>
+              </el-tooltip>
+              <el-tooltip class="box-item" effect="dark" content="Bottom Center prompts info" placement="bottom">
+                <el-button>bottom</el-button>
+              </el-tooltip>
+              <el-tooltip class="box-item" effect="dark" content="Bottom Right prompts info" placement="bottom-end">
+                <el-button>bottom-end</el-button>
+              </el-tooltip>
+            </div>
+          </div>
+        </section>
+      </div>
+      <template #footer> <html-encode :tag="snippets.basic" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header> More Content </template>
+      <div class="flex flex-col gap-3">
+        <p>
+          Display multiple lines of text and set their format. Override attribute <el-text tag="mark">content</el-text> of <el-text tag="mark">el-tooltip</el-text> by adding a slot
+          named <el-text tag="mark">content</el-text>.
+        </p>
+        <section class="flex gap-7.5">
+          <el-tooltip placement="top">
+            <template #content> multiple lines<br />second line </template>
+            <el-button>Top center</el-button>
+          </el-tooltip>
+        </section>
+      </div>
+      <template #footer> <html-encode :tag="snippets.content" /> </template>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+
+  const snippets = ref({
+    basic: `
+      <el-tooltip class="box-item" effect="dark" content="Left Bottom prompts info" placement="left-end">
+        <el-button>left-end</el-button>
+      </el-tooltip>`,
+    content: `
+      <el-tooltip placement="top">
+        <template #content> multiple lines<br />second line </template>
+        <el-button>Top center</el-button>
+      </el-tooltip>
+    `,
+  });
+</script>

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

@@ -0,0 +1,84 @@
+<template>
+  <div class="flex flex-col gap-8 mb-16">
+    <h1 class="">Upload - (Coding Not Started)</h1>
+    <p>Upload files by clicking or drag-and-drop.</p>
+
+    <el-card>
+      <template #header>Basic usage</template>
+      <div class="flex flex-col gap-7.5">
+        <p>
+          Customize upload button type and text using <el-text tag="mark">slot</el-text>. Set <el-text tag="mark">limit</el-text> and <el-text tag="mark">on-exceed</el-text> to
+          limit the maximum number of uploads allowed and specify method when the limit is exceeded. Plus, you can abort removing a file in the before-remove hook.
+        </p>
+        <section class="flex gap-7.5">
+          <el-upload
+            v-model:file-list="fileList"
+            class="upload-demo"
+            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
+            multiple
+            :on-preview="handlePreview"
+            :on-remove="handleRemove"
+            :before-remove="beforeRemove"
+            :limit="3"
+            :on-exceed="handleExceed"
+          >
+            <el-button type="primary">Click to upload</el-button>
+            <template #tip>
+              <div class="el-upload__tip">jpg/png files with a size less than 500KB.</div>
+            </template>
+          </el-upload>
+        </section>
+      </div>
+      <template #footer> <html-encode :tag="snippets.basic" /> </template>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import type { UploadProps, UploadUserFile } from 'element-plus';
+  import { ElMessage, ElMessageBox } from 'element-plus';
+  import { ref } from 'vue';
+
+  const fileList = ref<UploadUserFile[]>([
+    {
+      name: 'element-plus-logo.svg',
+      url: 'https://element-plus.org/images/element-plus-logo.svg',
+    },
+    {
+      name: 'element-plus-logo2.svg',
+      url: 'https://element-plus.org/images/element-plus-logo.svg',
+    },
+  ]);
+  const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
+    console.log(file, uploadFiles);
+  };
+  const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
+    console.log(uploadFile);
+  };
+  const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
+    ElMessage.warning(`The limit is 3, you selected ${files.length} files this time, add up to ${files.length + uploadFiles.length} totally`);
+  };
+  const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) =>
+    ElMessageBox.confirm(`Cancel the transfer of ${uploadFile.name} ?`).then(
+      () => true,
+      () => false,
+    );
+  const snippets = ref({
+    basic: `<el-upload
+            v-model:file-list="fileList"
+            class="upload-demo"
+            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
+            multiple
+            :on-preview="handlePreview"
+            :on-remove="handleRemove"
+            :before-remove="beforeRemove"
+            :limit="3"
+            :on-exceed="handleExceed"
+          >
+            <el-button type="primary">Click to upload</el-button>
+            <template #tip>
+              <div class="el-upload__tip">jpg/png files with a size less than 500KB.</div>
+            </template>
+          </el-upload>`,
+  });
+</script>

package/dist/runtime/components/production/html-encode.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="code-container">
+    <pre>
+      <code>
+        <span v-for="(line, index) in formattedLines" :key="index" class="line">
+            <span class="line-number">{{ index + 1 }}</span>
+            <span class="line-content" v-html="line" />
+          </span>
+      </code>
+    </pre>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { computed } from 'vue';
+
+  const props = defineProps<{ tag: string }>();
+  const htmlEncode = (str: string): string => {
+    const entityMap: { [key: string]: string } = {
+      '&': '&amp;',
+      '<': '&lt;',
+      '>': '&gt;',
+      '"': '&quot;',
+      "'": '&#39;',
+    };
+
+    return str.replace(/[&<>"']/g, (m: string) => entityMap[m]);
+  };
+  const formattedLines = computed(() => {
+    const lines = props.tag.split('\n');
+    const baseIndent = lines.reduce((min, line) => {
+      const match = line.match(/^\s*/);
+      const indent = match ? match[0].length : 0;
+
+      return line.trim() ? Math.min(min, indent) : min;
+    }, Infinity);
+
+    return lines
+      .filter((line) => line.trim() !== '') // Remove empty lines
+      .map((line) => {
+        const trimmedLine = line.trim();
+        const match = line.match(/^\s*/);
+        const lineIndent = match ? match[0].length : 0;
+        const indent = Math.max(0, lineIndent - baseIndent);
+        const encodedIndent = '&nbsp;'.repeat(indent);
+        const encodedLine = htmlEncode(trimmedLine);
+
+        return encodedIndent + encodedLine;
+      });
+  });
+</script>
+
+<style scoped>
+.code-container {
+  background-color: #5e5877;
+  border: 2px solid #534e6a;
+  border-radius: 4px;
+  color: var(--el-color-neutral-light-1);
+  overflow-x: auto;
+  padding: 8px;
+  width: 100%;
+}
+
+pre {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+}
+
+code {
+  display: flex;
+  flex-direction: column;
+  font-family: monospace;
+  font-size: 12px;
+}
+
+.line {
+  display: flex;
+  line-height: 20px;
+  white-space: pre;
+}
+
+.line-number {
+  color: #888888;
+  display: inline-block;
+  margin-right: 10px;
+  min-width: 30px;
+  text-align: right;
+  user-select: none;
+  width: 30px;
+}
+
+.line-content {
+  flex: 1;
+}
+</style>

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

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

@@ -0,0 +1,224 @@
+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',
+  // },
+];