@timus-networks/theme 2.0.16 → 2.2.0

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

@@ -0,0 +1,101 @@
+<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> Sidebar </template>
+      <div class="flex flex-col gap-3 items-start">
+        <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 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>
+      </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/development/example.static.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="flex flex-col gap-8 mb-16">
+    <h1 class="">Static - (Coding Not Started)</h1>
+    <p>Display statistics.</p>
+
+    <el-card>
+      <template #header>Basic usage</template>
+      <div class="flex flex-col gap-3">
+        <p>
+          To highlight a number or a group of numbers, such as statistical value, amount, and ranking, you can add elements such as icon and unit before and after the number and
+          title. And use vueuse to add animated transitions to value.
+        </p>
+        <section class="flex gap-7.5">
+          <el-statistic :value="138">
+            <template #title>
+              <div style="align-items: center; display: inline-flex">
+                Ratio of men to women
+                <el-icon style="margin-left: 4px" :size="12">
+                  <ElIconMale />
+                </el-icon>
+              </div>
+            </template>
+            <template #suffix>/100</template>
+          </el-statistic>
+        </section>
+      </div>
+      <template #footer> <html-encode :tag="snippets.basic" /> </template>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+
+  const snippets = ref({
+    basic: `
+      <el-statistic :value="138">
+        <template #title>
+          <div style="align-items: center; display: inline-flex">
+            Ratio of men to women
+            <el-icon style="margin-left: 4px" :size="12">
+              <ElIconMale />
+            </el-icon>
+          </div>
+        </template>
+        <template #suffix>/100</template>
+      </el-statistic>
+    `,
+  });
+</script>

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

@@ -0,0 +1,101 @@
+<template>
+  <div class="flex flex-col gap-8 mb-16">
+    <h1 class="">Switch</h1>
+    <p>Switch is used for switching between two opposing states.</p>
+
+    <el-card>
+      <template #header> Basic usage </template>
+      <div class="flex flex-col gap-3">
+        <p>
+          Bind <el-text tag="mark">v-model</el-text> to a Boolean typed variable. The <el-text tag="mark">--el-switch-on-color</el-text> and
+          <el-text tag="mark">--el-switch-off-color</el-text> CSS variables decides the background color in two states.
+        </p>
+        <div class="flex gap-4">
+          <el-switch v-model="value" />
+        </div>
+      </div>
+      <template #footer> <html-encode :tag="snippets.basic" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Sizes </template>
+      <div class="flex flex-col gap-3">
+        <p>You can set <el-text tag="mark">size</el-text>.</p>
+        <div class="flex flex-row gap-7.5">
+          <div v-for="size of sizes" :key="size" class="flex flex-col items-start border p-4 rounded">
+            <h5 class="font-normal text-neutral-7 grow">{{ size }}</h5>
+            <el-switch v-model="value" :size="size" active-text="Open" inactive-text="Close" />
+          </div>
+        </div>
+      </div>
+      <template #footer> <html-encode :tag="snippets.sizes" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Text description </template>
+      <div class="flex flex-col gap-3">
+        <p>
+          You can add <el-text tag="mark">active-text</el-text> and <el-text tag="mark">inactive-text</el-text> attribute to show texts. use
+          <el-text tag="mark">inline-prompt</el-text> attribute to control text is displayed inside dot. You can add active-text and inactive-text attribute to show texts.
+        </p>
+        <div class="flex flex-col items-start">
+          <el-switch v-model="value" active-text="Pay by month" inactive-text="Pay by year" />
+          <el-switch v-model="value" inline-prompt width="40" active-text="超出省略" inactive-text="超出省略" />
+          <el-switch v-model="value" width="80" inline-prompt active-text="超出省略" inactive-text="超出省略" />
+        </div>
+      </div>
+      <template #footer> <html-encode :tag="snippets.text" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Extended value types </template>
+      <div class="flex flex-col gap-3">
+        <p>
+          You can set <el-text tag="mark">active-value</el-text> and <el-text tag="mark">inactive-value</el-text> attributes. They both receive a Boolean, String or Number typed
+          value.
+        </p>
+        <div class="flex items-center gap-4">
+          <el-tooltip :content="'Switch value: ' + custom" placement="top">
+            <el-switch v-model="custom" active-value="100" inactive-value="0" size="default" :active-text="`Value is ${custom}`" />
+          </el-tooltip>
+        </div>
+      </div>
+      <template #footer> <html-encode :tag="snippets.value" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Disabled </template>
+      <div class="flex flex-col gap-3">
+        <p>Adding the disabled attribute <el-text tag="mark">disables</el-text> Switch.</p>
+        <div class="flex items-center gap-4">
+          <el-switch v-model="value" disabled />
+          <el-switch v-model="value" class="ml-2" />
+        </div>
+      </div>
+      <template #footer> <html-encode :tag="snippets.disable" /> </template>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+
+  const value = ref(true);
+  const custom = ref(100);
+  const sizes = ref(['default', 'large', 'medium', 'small', 'mini']);
+  const snippets = ref({
+    basic: `<el-switch v-model="value2" class="ml-2" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />`,
+    sizes: `<el-switch v-model="value" size="large" />`,
+    text: `
+      <el-switch v-model="value" active-text="Pay by month" inactive-text="Pay by year" />
+      <el-switch v-model="value" inline-prompt width="40" active-text="超出省略" inactive-text="超出省略" />
+      <el-switch v-model="value" width="80" inline-prompt active-text="超出省略" inactive-text="超出省略" />
+    `,
+    value: `
+      <el-tooltip :content="'Switch value: ' + custom" placement="top">
+        <el-switch v-model="custom" active-value="100" inactive-value="0" size="default" :active-text="\`Value is \${custom}\`" />
+      </el-tooltip>
+    `,
+    disable: `<el-switch v-model="value" disabled />`,
+  });
+</script>

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

@@ -0,0 +1,112 @@
+<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> Basic table </template>
+      <div class="flex flex-col gap-7.5 items-start">
+        <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>
+        <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 '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/development/example.tag.vue

@@ -0,0 +1,255 @@
+<template>
+  <div class="flex flex-col gap-8 mb-16">
+    <h1 class="">Tag</h1>
+    <p>Used for marking and selection.</p>
+
+    <el-card>
+      <template #header>Types</template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>
+          Use the <el-text tag="mark">type</el-text> attribute to define Tag's type. In addition, the <el-text tag="mark">color</el-text> attribute can be used to set the
+          background color of the Tag.
+        </p>
+        <div class="flex gap-2">
+          <el-tag v-for="(color, key) in colors" :key="key + color" :type="color">{{ color }}</el-tag>
+        </div>
+      </div>
+      <template #footer><html-encode :tag="snippets.types" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Sizes </template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>
+          Besides default size, Tag component provides three additional sizes for you to choose among different scenarios. Use attribute size to set additional sizes with
+          <el-text tag="mark">
+            {{ sizes.join(', ') }}
+          </el-text>
+        </p>
+        <div class="flex gap-2">
+          <el-tag v-for="(size, key) in sizes" :key="key + size" :size="size">{{ size }}</el-tag>
+        </div>
+      </div>
+      <template #footer> <html-encode :tag="snippets.sizes" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Removable Tag </template>
+      <div class="flex flex-col gap-3 items-start">
+        <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 class="flex gap-2">
+          <el-tag v-for="tag in tags" :key="tag.name" closable :type="tag.type">
+            {{ tag.name }}
+          </el-tag>
+        </div>
+      </div>
+      <template #footer> <html-encode :tag="snippets.closable" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Edit Dynamically </template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>You can use the <el-text tag="mark">close</el-text> event to add and remove tag dynamically.</p>
+        <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>
+      </div>
+      <template #footer> <html-encode :tag="snippets.dynamic" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Theme </template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>Tag provide three different themes: dark、light and plain Using effect to change, default is light</p>
+        <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>
+      </div>
+      <template #footer> <html-encode :tag="snippets.theme" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Rounded </template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>Tag can also be rounded like button.</p>
+        <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>
+      </div>
+      <template #footer> <html-encode :tag="snippets.rounded" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Checkable Tag </template>
+      <div class="flex flex-col gap-3 items-start">
+        <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 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>
+      </div>
+      <template #footer> <html-encode :tag="snippets.checked" /> </template>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import type { InputInstance } from 'element-plus';
+  import type { TagProps } from 'element-plus';
+  import { ElInput } from '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>