@timus-networks/theme 2.0.1 → 2.0.2

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/{example.table.vue → development/example.table.vue}

@@ -4,27 +4,13 @@
     <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">
+      <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>
@@ -46,7 +32,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { ElTable } from '@timus-networks/element-plus';
+  import { ElTable } from 'element-plus';
 
   interface User {
     date: string;

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>

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>