@timus-networks/theme 2.0.0 → 2.0.1

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

@@ -0,0 +1,104 @@
+<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.table.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="flex flex-col gap-8 mb-16">
+    <h1 class="">Table</h1>
+    <p>Display multiple data with similar format. You can sort, filter, compare your data in a table.</p>
+
+    <el-card>
+      <template #header>
+        <div class="flex flex-col gap-3 items-start">
+          <h2>Basic table</h2>
+          <p>
+            Basic table is just for data display. After setting attribute <el-text tag="mark">data</el-text> of <el-text tag="mark">el-table</el-text> with an object array, you can
+            use prop (corresponding to a key of the object in data array) in <el-text tag="mark">el-table-column</el-text> to insert data to table columns, and set the attribute
+            <el-text tag="mark">label</el-text> to define the column name. You can also use the attribute <el-text tag="mark">width</el-text> to define the width of columns.
+          </p>
+          <h3>Table has these properties:</h3>
+          <ul class="list-disc list-inside gap-1 flex flex-col [&_span]:w-28 [&_span]:inline-flex">
+            <li><span>Max Height:</span> <html-encode tag="<el-table max-height='250' />" /></li>
+            <li><span>Height:</span> <html-encode tag="<el-table height='250' />" /></li>
+            <li><span>Sorting:</span> <html-encode tag="<el-table default-sort='{ prop: 'date', order: 'descending' }' />" /></li>
+            <li><span>Min Height:</span> <html-encode tag="<el-table-column min-height='120' />" /></li>
+            <li><span>Tooltip:</span> <html-encode tag="<el-table-column show-overflow-tooltip />" /></li>
+            <li><span>Width:</span> <html-encode tag="<el-table-column width='120px' />" /></li>
+            <li><span>Fixed:</span> <html-encode tag="<el-table-column fixed='right' />" /></li>
+          </ul>
+        </div>
+      </template>
+      <div class="flex gap-2">
+        <el-table :data="tableData" style="width: 100%" flexible height="300">
+          <el-table-column type="selection" width="55" />
+          <el-table-column label="Date" width="120" show-overflow-tooltip>
+            <template #default="scope">{{ scope.row.date }}</template>
+          </el-table-column>
+          <el-table-column property="name" label="Name" width="120" show-overflow-tooltip />
+          <el-table-column property="state" label="State" width="240" show-overflow-tooltip />
+          <el-table-column property="city" label="City" show-overflow-tooltip />
+          <el-table-column property="zip" label="Zip" show-overflow-tooltip />
+          <el-table-column property="address" label="Address" width="140" show-overflow-tooltip />
+        </el-table>
+      </div>
+      <template #footer>
+        <code class="flex flex-col gap-3 items-start">
+          <html-encode :tag="snippets.basic" />
+        </code>
+      </template>
+    </el-card>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ElTable } from '@timus-networks/element-plus';
+
+  interface User {
+    date: string;
+    name: string;
+    state: string;
+    city: string;
+    zip: string;
+    address: string;
+  }
+  const tableData: User[] = [
+    {
+      date: '2016-05-03',
+      name: 'Tom',
+      state: 'California',
+      city: 'Los Angeles',
+      address: 'No. 189, Grove St, Los Angeles',
+      zip: 'CA 90036',
+    },
+    {
+      date: '2016-05-02',
+      name: 'Tom',
+      state: 'California',
+      city: 'Los Angeles',
+      address: 'No. 189, Grove St, Los Angeles',
+      zip: 'CA 90036',
+    },
+    {
+      date: '2016-05-04',
+      name: 'Tom',
+      state: 'California',
+      city: 'Los Angeles',
+      address: 'No. 189, Grove St, Los Angeles',
+      zip: 'CA 90036',
+    },
+    {
+      date: '2016-05-01',
+      name: 'Tom',
+      state: 'California',
+      city: 'Los Angeles',
+      address: 'No. 189, Grove St, Los Angeles',
+      zip: 'CA 90036',
+    },
+    {
+      date: '2016-05-08',
+      name: 'Tom',
+      state: 'California',
+      city: 'Los Angeles',
+      address: 'No. 189, Grove St, Los Angeles',
+      zip: 'CA 90036',
+    },
+    {
+      date: '2016-05-06',
+      name: 'Tom',
+      state: 'California',
+      city: 'Los Angeles',
+      address: 'No. 189, Grove St, Los Angeles',
+      zip: 'CA 90036',
+    },
+    {
+      date: '2016-05-07',
+      name: 'Tom',
+      state: 'California',
+      city: 'Los Angeles',
+      address: 'No. 189, Grove St, Los Angeles',
+      zip: 'CA 90036',
+    },
+  ];
+  const snippets = ref({
+    basic: `
+      <el-table :data="tableData" style="width: 100%">
+        <el-table-column prop="date" label="Date" width="180" />
+        <el-table-column prop="name" label="Name" width="180" />
+        <el-table-column prop="address" label="Address" />
+      </el-table>
+    `,
+  });
+</script>

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

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

@@ -0,0 +1,37 @@
+<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/pages/theme.vue

@@ -0,0 +1,30 @@
+<template>
+  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+    <el-tab-pane label="Button" name="first"><example-button /></el-tab-pane>
+    <el-tab-pane label="Input" name="second"><example-input /></el-tab-pane>
+    <el-tab-pane label="Select" name="third" lazy><example-select /></el-tab-pane>
+    <el-tab-pane label="Tag" name="fourth" lazy><example-tag /></el-tab-pane>
+    <el-tab-pane label="Popever" name="fifth" lazy><example-popover /></el-tab-pane>
+    <el-tab-pane label="Checkbox" name="sixth" lazy><example-checkbox /></el-tab-pane>
+    <el-tab-pane label="Radio" name="seventh" lazy><example-radio /></el-tab-pane>
+    <el-tab-pane label="Sidebar" name="eigth" lazy><example-sidebar /></el-tab-pane>
+    <el-tab-pane label="Table" name="nineth" lazy><example-table /></el-tab-pane>
+    <el-tab-pane label="Form" name="tenth" lazy><example-form /></el-tab-pane>
+    <el-tab-pane label="Dialog" name="twelfth" lazy><example-dialog /></el-tab-pane>
+  </el-tabs>
+</template>
+<script lang="ts" setup>
+  import type { TabsPaneContext } from '@timus-networks/element-plus';
+  import { ref } from 'vue';
+
+  import { definePageMeta } from '#imports';
+
+  definePageMeta({
+    layout: 'modules',
+  });
+
+  const activeName = ref('first');
+  const handleClick = (tab: TabsPaneContext, event: Event) => {
+    console.log(tab, event);
+  };
+</script>

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

@@ -0,0 +1,38 @@
+/**
+ * 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

@@ -0,0 +1,39 @@
+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);
+};