@timus-networks/theme 2.0.1 → 2.0.2

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

@@ -1,104 +0,0 @@
-<template>
-  <div class="flex flex-col gap-8 mb-16">
-    <h1 class="">Menu</h1>
-    <p>Menu that provides navigation for your website.</p>
-
-    <el-card>
-      <template #header>
-        <div class="flex flex-col gap-3 items-start">
-          <h2>Sidebar</h2>
-          <p>
-            Vertical <el-text tag="mark">Menu</el-text> with sub-menus. You can use the <el-text tag="mark">el-menu-item-group</el-text> component to create a
-            <span class="font-medium">menu group</span>, and the name of the group is determined by the title prop or a named slot.
-          </p>
-        </div>
-      </template>
-      <div class="flex flex-col gap-4 items-start">
-        {{ currentRoute }}
-        <el-menu :default-active="currentRoute.path" class="w-[270px]" :router="true" @open="handleOpen" @close="handleClose">
-          <el-menu-item index="/" class="isax-grid-3">Dashboard</el-menu-item>
-          <el-menu-item index="/theme" class="isax-designtools">Theme</el-menu-item>
-          <el-menu-item index="/users" class="isax-profile-circle">User & Teams</el-menu-item>
-          <el-menu-item index="/devices" class="isax-monitor-mobbile">Devices</el-menu-item>
-          <el-menu-item index="/sites" class="isax-driver-2">Sites</el-menu-item>
-          <el-sub-menu index="1">
-            <template #title><i class="isax-key-square" /><span>Rules</span></template>
-            <el-menu-item index="/rules/firewall">Firewall</el-menu-item>
-            <el-menu-item index="/rules/routes">Routes</el-menu-item>
-            <el-menu-item index="/rules/forwarding">Forwarding</el-menu-item>
-            <el-menu-item index="/rules/acls">Access Control List</el-menu-item>
-          </el-sub-menu>
-          <el-sub-menu index="2">
-            <template #title><i class="isax-shield" /><span>Zero Trust Security</span></template>
-            <el-menu-item index="/ztna/dashboard">Dashboard</el-menu-item>
-            <el-menu-item index="/ztna/behavior-detection">Behaviors</el-menu-item>
-            <el-menu-item index="/ztna/device-posture-check">Device Posture Checks</el-menu-item>
-            <el-menu-item index="/ztna/behavior-detection">User Sign-In Policies</el-menu-item>
-            <el-menu-item index="/ztna/behavior-detection">Admin Sign-In Policies</el-menu-item>
-          </el-sub-menu>
-          <el-sub-menu index="3">
-            <template #title><i class="isax-folder-open" /><span>Insights</span></template>
-            <el-menu-item index="/insights/alerts">Alerts</el-menu-item>
-            <el-menu-item index="/ztna/dashboard">Traffic Logs</el-menu-item>
-            <el-menu-item index="/ztna/dashboard">Events</el-menu-item>
-            <el-menu-item index="/insights/blocked-ips">Blocked IP Addresses</el-menu-item>
-            <el-menu-item index="/insights/signed-logs">"Signed Logs"</el-menu-item>
-            <el-menu-item index="/insights/reports">Automated Reports</el-menu-item>
-            <el-menu-item index="/insights/tracker">Productivity Reports</el-menu-item>
-            <el-menu-item index="/insights/dpc-reports">Device Posture Reports</el-menu-item>
-          </el-sub-menu>
-
-          <el-sub-menu index="4">
-            <template #title><i class="isax-setting-2" /><span>Settings</span></template>
-            <el-menu-item index="/settings/captive-portals">Captive Portal</el-menu-item>
-            <el-menu-item index="/settings/integrations">Integrations</el-menu-item>
-            <el-menu-item index="/settings/configuration">Configurations</el-menu-item>
-            <el-menu-item index="/settings/tags">Tags</el-menu-item>
-            <el-menu-item index="/settings/administrators">Administrators</el-menu-item>
-            <el-menu-item index="/settings/organization">Organization</el-menu-item>
-            <el-menu-item index="/settings/downloads">Downloads</el-menu-item>
-          </el-sub-menu>
-        </el-menu>
-      </div>
-      <template #footer>
-        <html-encode :tag="snippets.sizes" />
-      </template>
-    </el-card>
-  </div>
-</template>
-
-<script lang="ts" setup>
-  import { useRoute } from 'nuxt/app';
-  import { computed } from 'vue';
-
-  const route = useRoute();
-  const currentRoute = computed(() => ({
-    path: route.path,
-    fullPath: route.fullPath,
-    name: route.name,
-    params: route.params,
-    query: route.query,
-  }));
-  const handleOpen = (key: string, keyPath: string[]) => {
-    console.log(key, keyPath);
-  };
-  const handleClose = (key: string, keyPath: string[]) => {
-    console.log(key, keyPath);
-  };
-  const snippets = ref({
-    sizes: `
-      <el-menu :default-active="currentRoute.path" class="w-[270px]" :router="true" @open="handleOpen" @close="handleClose">
-        <el-sub-menu index="4">
-          <template #title><i class="isax-setting-2" /><span>Settings</span></template>
-          <el-menu-item index="/settings/captive-portals">Captive Portal</el-menu-item>
-          <el-menu-item index="/settings/integrations">Integrations</el-menu-item>
-          <el-menu-item index="/settings/configuration">Configurations</el-menu-item>
-          <el-menu-item index="/settings/tags">Tags</el-menu-item>
-          <el-menu-item index="/settings/administrators">Administrators</el-menu-item>
-          <el-menu-item index="/settings/organization">Organization</el-menu-item>
-          <el-menu-item index="/settings/downloads">Downloads</el-menu-item>
-        </el-sub-menu>
-      </el-menu>
-    `,
-  });
-</script>

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

@@ -1,279 +0,0 @@
-<template>
-  <div class="flex flex-col gap-8 mb-16">
-    <h1 class="">Select</h1>
-    <p>When there are plenty of options, use a drop-down menu to display and select desired ones.</p>
-
-    <el-card>
-      <template #header>
-        <div class="flex flex-col gap-3 items-start">
-          <h2>Types</h2>
-          <p>
-            Default size is Large. Input 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-2">
-        <el-tag v-for="(color, key) in colors" :key="key + color" :type="color">{{ color }}</el-tag>
-      </div>
-      <template #footer>
-        <code class="flex flex-col gap-3 items-start">
-          <html-encode :tag="snippets.types" />
-        </code>
-      </template>
-    </el-card>
-
-    <el-card>
-      <template #header>
-        <div class="flex flex-col gap-3 items-start">
-          <h2>Sizes</h2>
-          <p>
-            Default size is Large. Input 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-2">
-        <el-tag v-for="(size, key) in sizes" :key="key + size" :size="size">{{ size }}</el-tag>
-      </div>
-      <template #footer>
-        <code class="flex flex-col gap-3 items-start">
-          <html-encode :tag="snippets.sizes" />
-        </code>
-      </template>
-    </el-card>
-
-    <el-card>
-      <template #header>
-        <div class="flex flex-col gap-3 items-start">
-          <h2>Removable Tag</h2>
-          <p>
-            <el-text tag="mark">closable</el-text> attribute can be used to define a removable tag. It accepts a Boolean. By default the removal of Tag has a fading animation. If
-            you don't want to use it, you can set the <el-text tag="mark">disable-transitions</el-text> attribute, which accepts a Boolean, to true. close event triggers when Tag
-            is removed.
-          </p>
-        </div>
-      </template>
-      <div class="flex gap-2">
-        <el-tag v-for="tag in tags" :key="tag.name" closable :type="tag.type">
-          {{ tag.name }}
-        </el-tag>
-      </div>
-      <template #footer>
-        <code class="flex flex-col gap-3 items-start">
-          <html-encode :tag="snippets.closable" />
-        </code>
-      </template>
-    </el-card>
-
-    <el-card>
-      <template #header>
-        <div class="flex flex-col gap-3 items-start">
-          <h2>Edit Dynamically</h2>
-          <p>You can use the <el-text tag="mark">close</el-text> event to add and remove tag dynamically.</p>
-        </div>
-      </template>
-      <div class="flex gap-2">
-        <el-tag v-for="tag in dynamicTags" :key="tag" closable :disable-transitions="false" @close="handleClose(tag)">
-          {{ tag }}
-        </el-tag>
-        <el-input v-if="inputVisible" ref="InputRef" v-model="inputValue" class="!w-20" size="mini" @keyup.enter="handleInputConfirm" @blur="handleInputConfirm" />
-        <el-button v-else class="button-new-tag" size="mini" @click="showInput"> + New Tag </el-button>
-      </div>
-      <template #footer> <html-encode :tag="snippets.dynamic" /> </template>
-    </el-card>
-
-    <el-card>
-      <template #header>
-        <div class="flex flex-col gap-3 items-start">
-          <h2>Theme</h2>
-          <p>Tag provide three different themes: dark、light and plain Using effect to change, default is light</p>
-        </div>
-      </template>
-      <div class="flex flex-col gap-2">
-        <div class="flex gap-2">
-          <span>Dark</span>
-          <el-tag v-for="item in items" :key="item.label" :type="item.type" effect="dark">
-            {{ item.label }}
-          </el-tag>
-        </div>
-        <div class="flex gap-2 mt-4">
-          <span>Light</span>
-          <el-tag v-for="item in items" :key="item.label" :type="item.type" effect="light">
-            {{ item.label }}
-          </el-tag>
-        </div>
-        <div class="flex gap-2 mt-4">
-          <span>Plain</span>
-          <el-tag v-for="item in items" :key="item.label" :type="item.type" effect="plain">
-            {{ item.label }}
-          </el-tag>
-        </div>
-      </div>
-      <template #footer> <html-encode :tag="snippets.theme" /> </template>
-    </el-card>
-
-    <el-card>
-      <template #header>
-        <div class="flex flex-col gap-3 items-start">
-          <h2>Rounded</h2>
-          <p>Tag can also be rounded like button.</p>
-        </div>
-      </template>
-      <div class="flex flex-col gap-2">
-        <div class="flex gap-2">
-          <el-tag v-for="item in items" :key="item.label" :type="item.type" effect="dark" round>
-            {{ item.label }}
-          </el-tag>
-        </div>
-        <div class="flex gap-2 mt-4">
-          <el-tag v-for="item in items" :key="item.label" :type="item.type" effect="light" round>
-            {{ item.label }}
-          </el-tag>
-        </div>
-        <div class="flex gap-2 mt-4">
-          <el-tag v-for="item in items" :key="item.label" :type="item.type" effect="plain" round>
-            {{ item.label }}
-          </el-tag>
-        </div>
-      </div>
-      <template #footer> <html-encode :tag="snippets.rounded" /> </template>
-    </el-card>
-
-    <el-card>
-      <template #header>
-        <div class="flex flex-col gap-3 items-start">
-          <h2>Checkable Tag</h2>
-          <p>
-            Sometimes because of the business needs, we might need checkbox like tag, but button like checkbox cannot meet our needs, here comes
-            <el-text tag="mark">check-tag</el-text>. You can use type prop in 2.5.4. basic check-tag usage, the API is rather simple.
-          </p>
-        </div>
-      </template>
-      <div class="flex gap-2">
-        <div class="flex gap-2">
-          <el-check-tag checked>Checked</el-check-tag>
-          <el-check-tag :checked="checked" @change="onChange">Toggle me</el-check-tag>
-        </div>
-        <el-check-tag :checked="checked1" type="primary" @change="onChange1"> Tag 1 </el-check-tag>
-        <el-check-tag :checked="checked2" type="success" @change="onChange2"> Tag 2 </el-check-tag>
-        <el-check-tag :checked="checked3" type="info" @change="onChange3"> Tag 3 </el-check-tag>
-        <el-check-tag :checked="checked4" type="warning" @change="onChange4"> Tag 4 </el-check-tag>
-        <el-check-tag :checked="checked5" type="danger" @change="onChange5"> Tag 5 </el-check-tag>
-      </div>
-      <template #footer> <html-encode :tag="snippets.checked" /> </template>
-    </el-card>
-  </div>
-</template>
-
-<script lang="ts" setup>
-  import type { InputInstance } from '@timus-networks/element-plus';
-  import type { TagProps } from '@timus-networks/element-plus';
-  import { ElInput } from '@timus-networks/element-plus';
-  import { nextTick, ref } from 'vue';
-
-  interface TagsItem {
-    name: string;
-    type: TagProps['type'];
-  }
-
-  type Item = { type: TagProps['type']; label: string };
-
-  const checked = ref(false);
-  const checked1 = ref(true);
-  const checked2 = ref(true);
-  const checked3 = ref(true);
-  const checked4 = ref(true);
-  const checked5 = ref(true);
-  const onChange = (status: boolean) => {
-    checked.value = status;
-  };
-  const onChange1 = (status: boolean) => {
-    checked1.value = status;
-  };
-  const onChange2 = (status: boolean) => {
-    checked2.value = status;
-  };
-  const onChange3 = (status: boolean) => {
-    checked3.value = status;
-  };
-  const onChange4 = (status: boolean) => {
-    checked4.value = status;
-  };
-  const onChange5 = (status: boolean) => {
-    checked5.value = status;
-  };
-  const items = ref<Array<Item>>([
-    { type: 'primary', label: 'Tag 1' },
-    { type: 'secondary', label: 'Tag 2' },
-    { type: 'neutral', label: 'Tag 2' },
-    { type: 'success', label: 'Tag 2' },
-    { type: 'info', label: 'Tag 3' },
-    { type: 'warning', label: 'Tag 4' },
-    { type: 'danger', label: 'Tag 5' },
-  ]);
-  const tags = ref<TagsItem[]>([
-    { name: 'Tag 1', type: 'primary' },
-    { name: 'Tag 1', type: 'secondary' },
-    { name: 'Tag 1', type: 'neutral' },
-    { name: 'Tag 2', type: 'success' },
-    { name: 'Tag 3', type: 'info' },
-    { name: 'Tag 4', type: 'warning' },
-    { name: 'Tag 5', type: 'danger' },
-  ]);
-  const inputValue = ref('');
-  const dynamicTags = ref(['Tag 1', 'Tag 2', 'Tag 3']);
-  const inputVisible = ref(false);
-  const InputRef = ref<InputInstance>();
-  const handleClose = (tag: string) => {
-    dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
-  };
-  const showInput = () => {
-    inputVisible.value = true;
-    nextTick(() => {
-      InputRef.value!.input!.focus();
-    });
-  };
-  const handleInputConfirm = () => {
-    if (inputValue.value) {
-      dynamicTags.value.push(inputValue.value);
-    }
-    inputVisible.value = false;
-    inputValue.value = '';
-  };
-</script>
-
-<script lang="ts">
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    name: 'TimusTag',
-    data() {
-      return {
-        sizes: ['default', 'large', 'medium', 'small', 'mini'],
-        colors: ['primary', 'secondary', 'neutral', 'success', 'warning', 'info', 'danger'],
-        value: '',
-        snippets: {
-          types: `<el-tag type="success">tag</el-tag>`,
-          sizes: `<el-tag size="large">tag</el-tag>`,
-          closable: `<el-tag size="large" type="success" closable>tag</el-tag>`,
-          dynamic: `<el-tag closable :disable-transitions="false" @close="handleClose(tag)"> tag </el-tag>`,
-          theme: `
-            <el-tag effect="dark"> tag </el-tag>
-            <el-tag effect="light"> tag </el-tag>
-            <el-tag effect="plain"> tag </el-tag>
-          `,
-          rounded: `<el-tag round>tag</el-tag>`,
-          checked: `<el-check-tag :checked="checked1" type="primary" @change="onChange1"> Tag 1 </el-check-tag>`,
-        },
-      };
-    },
-    methods: {
-      capitalize(value: string): string {
-        const text = String(value);
-
-        return text.charAt(0).toUpperCase() + text.slice(1);
-      },
-    },
-  });
-</script>

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

@@ -1,37 +0,0 @@
-<template>
-  <div class="code-container">
-    <pre><code>{{ formattedText }}</code></pre>
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { computed } from 'vue';
-
-  const props = defineProps<{ tag: string }>();
-  const htmlEncode = (str: string) => str.replace(/\\/g, '\\').replace(/^\s+/gm, '');
-  const formattedText = computed(() => htmlEncode(props.tag));
-</script>
-
-<style scoped>
-.code-container {
-  align-items: flex-start;
-  background-color: #5e5877;
-  border: 2px solid #534e6a;
-  border-radius: 4px;
-  color: var(--el-color-neutral-light-1);
-  display: inline-flex;
-  overflow-x: auto;
-  padding: 8px;
-}
-
-pre {
-  margin: 0;
-}
-
-code {
-  display: block;
-  font-size: 10px;
-  padding-left: 0;
-  padding-right: 0;
-}
-</style>

package/dist/runtime/plugins/element-extend-plugin.d.ts

@@ -1,38 +0,0 @@
-/**
- * Bu plugin ElementPlus'a yeni size'lar eklemeye yarar.
- * Halihazırda 3 adet size mevcut (default | large | small). Bunu genişletmek için
- * aşağıdaki plugin'i yazdım.
- *
- * nuxt.config.ts'in `theme` options'ından aldığı değerleri RuntimeConfig'e yazdırıyorum modül üzerinden.
- * Sonra da burada RuntrimeConfiguration'dan yakalayıp ElementPlus'a entegre ediyorum.
- * Normalde `componentSizes` ve `componentSizeMap` readonly olduğu için değiştirilemiyor.
- * Fakat bu bizim Objelerin ya da Arrayların içine yenileri eklememize engel değil.
- *
- * Diğer bir yöntem de aşağıda açıklama içinde yer alıyor.
- * Bu yöntem ile de ElementPlus'ın componentlerinin içinde tanımlanan `size` attribute'unun tanımlarken kullanılan
- * validation methodunu güncelleyor. Validation içerisinde ihtiyaç duyulan size listesini kendi listesine göre validate
- * ettiği için sorun kalkıyor.
- *
- * Bu validation için şuraya bakabilirsin: `node_modules/element-plus/es/components/button/src/button.vue.d.ts`
- */
-declare const _default: import("#app").Plugin<Record<string, unknown>> & import("#app").ObjectPlugin<Record<string, unknown>>;
-export default _default;
-/**
- * Aşağıdaki ile de belirli bileşenlerin validation'larını değiştirebilirsin
- *
- * import { ElButton, ElInput, ElSelect } from 'element-plus';
- * import { defineNuxtPlugin } from '#app';
- *
- * export default defineNuxtPlugin((_nuxtApp) => {
- *   const newSizes = ['', 'default', 'large', 'medium', 'small', 'mini'];
- *   const components = [ElButton, ElInput, ElSelect];
- *   const extendComponentSize = (component: any) => {
- *     if (component.props && component.props.size) {
- *       const originalValidator = component.props.size.validator as (value: string) => boolean;
- *       component.props.size.validator = (value: string) => newSizes.includes(value) || (originalValidator ? originalValidator(value) : false);
- *     }
- *   };
- *
- *   components.forEach(extendComponentSize);
- * });
- */

package/dist/runtime/plugins/element-extend-plugin.js

@@ -1,39 +0,0 @@
-import { buttonTypes, componentSizeMap, componentSizes, ElButton, ElTag } from "@timus-networks/element-plus";
-import { defineNuxtPlugin } from "#app";
-export default defineNuxtPlugin((_nuxtApp) => {
-  const runtimeConfig = useRuntimeConfig();
-  const { sizes, types } = runtimeConfig.public.theme;
-  generateSizes(sizes);
-  generateTypes(types);
-});
-const generateSizes = (sizes) => {
-  if (sizes && Object.keys(sizes).length > 0) {
-    Object.entries(sizes).forEach(([size, value]) => {
-      if (typeof value === "number") {
-        componentSizeMap[size] = value;
-      } else {
-        console.warn(`Invalid value for size ${size}: ${value}. Expected a number.`);
-      }
-    });
-    Object.keys(sizes).forEach((size) => {
-      if (!componentSizes.includes(size)) {
-        componentSizes.push(size);
-      }
-    });
-  }
-};
-const generateTypes = (types = ["primary", "secondary", "neutral", "success", "warning", "info", "danger", "default"]) => {
-  types.forEach((type) => {
-    if (!buttonTypes.includes(type)) {
-      buttonTypes.push(type);
-    }
-  });
-  const components = [ElButton, ElTag];
-  const extendComponentType = (component) => {
-    if (component.props?.type) {
-      const originalValidator = component.props.type.validator;
-      component.props.type.validator = (value) => buttonTypes.includes(value) || (originalValidator ? originalValidator(value) : false);
-    }
-  };
-  components.forEach(extendComponentType);
-};

package/dist/runtime/plugins/element-extend-plugin.mjs

@@ -1,39 +0,0 @@
-import { buttonTypes, componentSizeMap, componentSizes, ElButton, ElTag } from "@timus-networks/element-plus";
-import { defineNuxtPlugin } from "#app";
-export default defineNuxtPlugin((_nuxtApp) => {
-  const runtimeConfig = useRuntimeConfig();
-  const { sizes, types } = runtimeConfig.public.theme;
-  generateSizes(sizes);
-  generateTypes(types);
-});
-const generateSizes = (sizes) => {
-  if (sizes && Object.keys(sizes).length > 0) {
-    Object.entries(sizes).forEach(([size, value]) => {
-      if (typeof value === "number") {
-        componentSizeMap[size] = value;
-      } else {
-        console.warn(`Invalid value for size ${size}: ${value}. Expected a number.`);
-      }
-    });
-    Object.keys(sizes).forEach((size) => {
-      if (!componentSizes.includes(size)) {
-        componentSizes.push(size);
-      }
-    });
-  }
-};
-const generateTypes = (types = ["primary", "secondary", "neutral", "success", "warning", "info", "danger", "default"]) => {
-  types.forEach((type) => {
-    if (!buttonTypes.includes(type)) {
-      buttonTypes.push(type);
-    }
-  });
-  const components = [ElButton, ElTag];
-  const extendComponentType = (component) => {
-    if (component.props?.type) {
-      const originalValidator = component.props.type.validator;
-      component.props.type.validator = (value) => buttonTypes.includes(value) || (originalValidator ? originalValidator(value) : false);
-    }
-  };
-  components.forEach(extendComponentType);
-};

package/dist/runtime/plugins/experimental-size-plugin.js

@@ -1,13 +0,0 @@
-import ElementPlus from "element-plus";
-import * as ElementPlusComponents from "element-plus";
-import { defineNuxtPlugin } from "#app";
-const extendedComponentSizes = ["", "default", "small", "large", "medium", "mini"];
-export default defineNuxtPlugin((nuxtApp) => {
-  console.log("####### ElementP", ElementPlus);
-  ElementPlusComponents.componentSizeMap = {
-    large: 40,
-    default: 32,
-    small: 24
-  };
-  ElementPlusComponents.componentSizes = extendedComponentSizes;
-});

package/dist/runtime/plugins/experimental-size-plugin.mjs

@@ -1,13 +0,0 @@
-import ElementPlus from "element-plus";
-import * as ElementPlusComponents from "element-plus";
-import { defineNuxtPlugin } from "#app";
-const extendedComponentSizes = ["", "default", "small", "large", "medium", "mini"];
-export default defineNuxtPlugin((nuxtApp) => {
-  console.log("####### ElementP", ElementPlus);
-  ElementPlusComponents.componentSizeMap = {
-    large: 40,
-    default: 32,
-    small: 24
-  };
-  ElementPlusComponents.componentSizes = extendedComponentSizes;
-});