@timus-networks/theme 2.0.16 → 2.2.0

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

@@ -0,0 +1,270 @@
+<template>
+  <div class="flex flex-col gap-8 mb-16">
+    <h1 class="">Inputs</h1>
+    <p>Element Plus Button is a customizable and versatile UI component designed for creating interactive and visually appealing buttons in web applications.</p>
+
+    <el-card>
+      <template #header> Sizes </template>
+      <div class="flex flex-col gap-3 items-start">
+        <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 class="flex gap-4 items-start">
+          <el-input v-for="(size, index) of sizes" :key="size + index" v-model="input" placeholder="Please input" :size="size" :prefix-icon="ElIconSearch" />
+        </div>
+      </div>
+      <template #footer>
+        <code class="flex flex-col gap-3 items-start">
+          <html-encode tag="&lt;el-input :size='small' /&gt;" />
+        </code>
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Disabled </template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>
+          Disable the Input with the <code><el-text tag="mark">disabled</el-text></code> attribute.
+        </p>
+        <div class="flex gap-4 items-start">
+          <el-input v-for="(size, index) of sizes" :key="size + index" v-model="input" placeholder="Please input" :size="size" disabled />
+        </div>
+      </div>
+      <template #footer>
+        <code class="flex flex-col gap-3 items-start">
+          <html-encode tag="&lt;el-input disabled /&gt;" />
+        </code>
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Clearable </template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>Make the Input clearable with the <el-text tag="mark">clearable</el-text> attribute.</p>
+        <div class="flex gap-4">
+          <el-input v-for="(size, index) of sizes" :key="size + index" v-model="input" placeholder="Please input" :size="size" clearable />
+        </div>
+      </div>
+      <template #footer>
+        <code class="flex flex-col gap-3 items-start">
+          <html-encode tag="&lt;el-input clearable /&gt;" />
+        </code>
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Formatter </template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>Display value within it's situation with <el-text tag="mark">formatter</el-text>, and we usually use <el-text tag="mark">parser</el-text> at the same time.</p>
+        <div class="flex gap-4 flex-wrap">
+          <el-input
+            v-model="input"
+            style="width: 240px"
+            placeholder="Please input"
+            :formatter="(value: string) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
+            :parser="(value: string) => value.replace(/\$\s?|(,*)/g, '')"
+          />
+        </div>
+      </div>
+      <template #footer>
+        <code class="flex flex-col gap-3 items-start">
+          <html-encode :tag="snippets.formatter" />
+        </code>
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Password box </template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>Make a toggle-able password Input with the <el-text tag="mark">show-password</el-text> attribute.</p>
+        <div class="flex gap-4 flex-wrap">
+          <el-input v-model="input" style="width: 240px" type="password" placeholder="Please input password" show-password />
+        </div>
+      </div>
+      <template #footer>
+        <html-encode :tag="snippets.password" />
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Input with icon </template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>
+          Add an icon to indicate input type. To add icons in Input, you can simply use <el-text tag="mark">prefix-icon</el-text> and
+          <el-text tag="mark">suffix-icon</el-text> attributes. Also, the <el-text tag="mark">prefix</el-text> and <el-text tag="mark">suffix</el-text> named slots works as well.
+        </p>
+        <div class="flex gap-4 flex-wrap">
+          <div class="flex gap-4 mb-4 items-start">
+            <span>Using attributes</span>
+            <el-input v-model="input" style="width: 240px" placeholder="Pick a date" :suffix-icon="ElIconCalendar" />
+            <el-input v-model="input" style="width: 240px" placeholder="Type something" :prefix-icon="ElIconSearch" />
+          </div>
+          <div class="flex gap-4 items-start">
+            <span>Using slots</span>
+            <el-input v-model="input" style="width: 240px" placeholder="Pick a date">
+              <template #suffix>
+                <el-icon class="el-input__icon"><calendar /></el-icon>
+              </template>
+            </el-input>
+            <el-input v-model="input" style="width: 240px" placeholder="Type something">
+              <template #prefix>
+                <el-icon class="el-input__icon"><search /></el-icon>
+              </template>
+            </el-input>
+          </div>
+        </div>
+      </div>
+      <template #footer>
+        <div class="flex flex-col gap-3">
+          <html-encode :tag="snippets.icons.suffix" />
+          <html-encode :tag="snippets.icons.slot" />
+        </div>
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Textarea </template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>
+          Resizable for entering multiple lines of text information. Add attribute <el-text tag="mark">type="textarea"</el-text> to change <el-text tag="mark">input</el-text> into
+          native textarea. Control the height by setting the rows prop.
+        </p>
+        <div class="flex gap-4 flex-wrap">
+          <el-input v-model="textarea" style="width: 240px" :rows="2" type="textarea" placeholder="Please input" />
+        </div>
+      </div>
+      <template #footer>
+        <html-encode :tag="snippets.textarea" />
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header>Mixed input</template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>
+          <el-text tag="mark">Prepend</el-text> or <el-text tag="mark">append</el-text> an element, generally a label or a button. Use <el-text tag="mark">slot</el-text> to
+          distribute elements that prepend or append to Input.
+        </p>
+        <div>
+          <el-input v-model="input" style="max-width: 600px" placeholder="Please input">
+            <template #prepend>Http://</template>
+          </el-input>
+        </div>
+        <div class="mt-4">
+          <el-input v-model="input" style="max-width: 600px" placeholder="Please input">
+            <template #append>.com</template>
+          </el-input>
+        </div>
+        <div class="mt-4">
+          <el-input v-model="input" style="max-width: 600px" placeholder="Please input" class="input-with-select">
+            <template #prepend>
+              <el-select v-model="select" placeholder="Select" style="width: 115px">
+                <el-option label="Restaurant" value="1" />
+                <el-option label="Order No." value="2" />
+                <el-option label="Tel" value="3" />
+              </el-select>
+            </template>
+            <template #append>
+              <el-button :icon="ElIconSearch" type="primary" />
+            </template>
+          </el-input>
+        </div>
+        <div class="mt-4">
+          <el-input v-model="input" style="max-width: 600px" placeholder="Please input" class="input-with-select">
+            <template #prepend>
+              <el-button :icon="ElIconSearch" type="primary" />
+            </template>
+            <template #append>
+              <el-select v-model="select" placeholder="Select" style="width: 115px">
+                <el-option label="Restaurant" value="1" />
+                <el-option label="Order No." value="2" />
+                <el-option label="Tel" value="3" />
+              </el-select>
+            </template>
+          </el-input>
+        </div>
+        <div class="mt-4">
+          <el-input v-model="input" style="max-width: 600px" placeholder="Please input" class="input-with-select" disabled>
+            <template #prepend>
+              <el-button :icon="ElIconSearch" type="primary" />
+            </template>
+            <template #append>
+              <el-button :icon="ElIconSearch" type="primary">Add</el-button>
+            </template>
+          </el-input>
+        </div>
+        <div class="mt-4">
+          <el-input v-model="input" style="max-width: 600px" placeholder="Please input" class="input-with-select" disabled>
+            <template #prepend>
+              <el-button :icon="ElIconSearch" type="primary" />
+            </template>
+            <template #append>
+              <el-select v-model="select" placeholder="Select" style="width: 115px">
+                <el-option label="Restaurant" value="1" />
+                <el-option label="Order No." value="2" />
+                <el-option label="Tel" value="3" />
+              </el-select>
+            </template>
+          </el-input>
+        </div>
+      </div>
+      <template #footer>
+        <html-encode :tag="snippets.mixed" />
+      </template>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { Calendar, Search } from "@element-plus/icons-vue";
+import { defineComponent } from "vue";
+export default defineComponent({
+  name: "TimusInput",
+  components: { Calendar, Search },
+  data() {
+    return {
+      sizes: ["default", "large", "medium", "small", "mini"],
+      colors: ["primary", "secondary", "neutral", "success", "warning", "info", "danger"],
+      input: "",
+      textarea: "",
+      select: "1",
+      snippets: {
+        formatter: `<el-input
+              v-model="input"
+              placeholder="Please input"
+              :formatter="(value: string) => \`$ \${value}\`.replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',')"
+              :parser="(value: string) => value.replace(/\\$\\s?|(,*)/g, '')"
+            />`,
+        password: `<el-input v-model="input" type="password" placeholder="Please input password" show-password />`,
+        icons: {
+          suffix: `
+            // suffix
+            <el-input v-model="input" :suffix-icon="ElIconCalendar" />`,
+          slot: `
+            // slot
+            <el-input v-model="input" style="width: 240px" placeholder="Pick a date">
+              <template #suffix>
+                <el-icon class="el-input__icon"><calendar /></el-icon>
+              </template>
+            </el-input>
+            `
+        },
+        textarea: `<el-input v-model="textarea" style="width: 240px" :rows="2" type="textarea" placeholder="Please input" />`,
+        mixed: `
+          <el-input v-model="input" style="max-width: 600px" placeholder="Please input">
+            <template #prepend>Http://</template>
+            <template #append><el-button :icon="ElIconSearch" type="primary" /></template>
+          </el-input>
+          `
+      }
+    };
+  },
+  methods: {
+    capitalize(value) {
+      const text = String(value);
+      return text.charAt(0).toUpperCase() + text.slice(1);
+    }
+  }
+});
+</script>

package/dist/runtime/components/development/example.input.vue.d.ts

@@ -0,0 +1,23 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {
+    sizes: string[];
+    colors: string[];
+    input: string;
+    textarea: string;
+    select: string;
+    snippets: {
+        formatter: string;
+        password: string;
+        icons: {
+            suffix: string;
+            slot: string;
+        };
+        textarea: string;
+        mixed: string;
+    };
+}, {}, {
+    capitalize(value: string): string;
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {
+    Calendar: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    Search: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,68 @@
+<template>
+  <div class="flex flex-col gap-8 mb-16">
+    <h1 class="">Link</h1>
+    <p>Text hyperlink</p>
+
+    <el-card>
+      <template #header> Basic </template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>Basic text link</p>
+        <div class="flex gap-2">
+          <el-link v-for="color of colors" :key="color" :type="color">{{ color }}</el-link>
+        </div>
+      </div>
+      <template #footer> <html-encode :tag="snippets.basic" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Disabled </template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>Disabled state of link</p>
+        <div class="flex gap-2">
+          <el-link v-for="color of colors" :key="color" :type="color" disabled>{{ color }}</el-link>
+        </div>
+      </div>
+
+      <template #footer> <html-encode :tag="snippets.disabled" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Underline </template>
+      <div class="flex flex-col gap-3 items-start">
+        <h2>Underline</h2>
+        <p>Underline of link</p>
+        <div class="flex gap-2">
+          <el-link :underline="false">Without Underline</el-link>
+          <el-link>With Underline</el-link>
+        </div>
+      </div>
+      <template #footer> <html-encode :tag="snippets.underline" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Icon </template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>Link with icon</p>
+        <div class="flex flex-col gap-2 items-start">
+          <el-link class="isax-add">Check</el-link>
+          <el-link class="isax-add icon-right">Check</el-link>
+          <el-link :icon="ElIconPlus">Edit</el-link>
+          <el-link>
+            Check<el-icon class="isax-add el-icon--right"><el-icon-view /></el-icon>
+          </el-link>
+        </div>
+      </div>
+      <template #footer> <html-encode :tag="snippets.icon" /> </template>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  const colors = ref<string[]>(['default', 'primary', 'secondary', 'neutral', 'success', 'warning', 'info', 'danger']);
+  const snippets = ref({
+    basic: `<el-link href="https://element-plus.org" target="_blank" type="secondary">default</el-link>`,
+    disabled: `<el-link type="secondary" disabled>default</el-link>`,
+    underline: `<el-link :underline="false">Without Underline</el-link>`,
+    icon: `<el-link class="isax-add icon-right">Check</el-link>`,
+  });
+</script>

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

@@ -0,0 +1,64 @@
+<template>
+  <div class="flex flex-col gap-8 mb-16">
+    <h1 class="">Message</h1>
+    <p>Used to show feedback after an activity. The difference with Notification is that the latter is often used to show a system level passive notification.</p>
+
+    <el-card>
+      <template #header> Basic usage </template>
+      <div class="flex flex-col gap-3">
+        <p>
+          Displays at the top, and disappears after 3 seconds. The setup of Message is very similar to notification, so parts of the options won't be explained in detail here. You
+          can check the options table below combined with notification doc to understand it. Element Plus has registered a <el-text tag="mark">$message</el-text> method for
+          invoking. Message can take a string or a VNode as parameter, and it will be shown as the main body.
+        </p>
+        <div class="flex flex-col gap-7.5">
+          <el-radio-group v-model="isPlain" size="mini">
+            <el-radio-button :value="false">basic</el-radio-button>
+            <el-radio-button :value="true">plain</el-radio-button>
+          </el-radio-group>
+          <div class="flex gap-4">
+            <el-button @click="basicOpener">default</el-button>
+            <el-button v-for="color of colors" :key="color" :type="color" @click="open(color, isPlain)">{{ color }}</el-button>
+          </div>
+        </div>
+      </div>
+      <template #footer> <html-encode :tag="snippets.basic" /> </template>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ElMessage, type MessageOptions } from 'element-plus';
+  import { ref } from 'vue';
+
+  const colors = ref(['success', 'warning', 'info', 'error', 'danger']);
+  const snippets = ref({
+    basic: `
+    import { ElMessage, type MessageOptions } from 'element-plus';
+
+    ElMessage({
+      showClose: true,
+      grouping: true,
+      message: "Congrats, this is a message."",
+      type,
+      duration: 0,
+      plain,
+    } as MessageOptions)
+    `,
+  });
+  const basicOpener = () => {
+    ElMessage({ message: 'This is a message.', showClose: true, duration: 0 });
+  };
+  const isPlain = ref(false);
+  const open = function (type: string, plain: boolean = true) {
+    ElMessage({
+      showClose: true,
+      grouping: true,
+      message: `Congrats, this is a ${type} message.`,
+      type,
+      duration: 0,
+      plain,
+      validator: () => null,
+    } as MessageOptions);
+  };
+</script>

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

@@ -0,0 +1,75 @@
+<template>
+  <div class="flex flex-col gap-8 mb-16">
+    <h1 class="">Notification - (Needs Acceptance)</h1>
+    <p>Displays a global notification message at a corner of the page.</p>
+
+    <el-card>
+      <template #header> Basic usage </template>
+      <div class="flex flex-col gap-3">
+        <p>
+          Element Plus has registered the <el-text tag="mark">$notify</el-text> method and it receives an object as its parameter. In the simplest case, you can set the
+          <el-text tag="mark">title</el-text> field and the <el-text tag="mark">message</el-text> field for the title and body of the notification. By default, the notification
+          automatically closes after 4500ms, but by setting <el-text tag="mark">duration</el-text> you can control its duration. Specifically, if set to 0, it will not close
+          automatically. Note that duration receives a <el-text tag="mark">Number</el-text> in milliseconds.
+        </p>
+        <section class="flex gap-7.5">
+          <el-button plain @click="open(4500)"> Closes automatically </el-button>
+          <el-button plain @click="open(0)"> Won't close automatically </el-button>
+        </section>
+      </div>
+      <template #footer> <html-encode :tag="snippets.basic" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header>With types</template>
+      <div class="flex flex-col gap-3">
+        <p>
+          We provide four types: <el-text tag="mark">success, warning, info</el-text> and <el-text tag="mark">error</el-text>. Element Plus provides four notification types:
+          success, warning, info and error. They are set by the <el-text tag="mark">type</el-text> field, and other values will be ignored. We also registered methods for these
+          types that can be invoked directly like open3 and open4 without passing a type field.
+        </p>
+        <section class="flex gap-7.5">
+          <el-button v-for="(type, index) of ['success', 'info', 'warning', 'error']" :key="index" plain :type="type" @click="open(0, type)">{{ type }}</el-button>
+        </section>
+      </div>
+      <template #footer> <html-encode :tag="snippets.types" /> </template>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ElNotification } from 'element-plus';
+  import { ref } from 'vue';
+
+  const open = (duration = 4500, type) => {
+    ElNotification({
+      title: capitalize(type) ?? 'Title',
+      message: 'This is a reminder',
+      duration: duration ?? 5000,
+      type: type ?? 'default',
+    });
+  };
+  const snippets = ref({
+    basic: `
+      ElNotification({
+        title: 'Title',
+        message: 'This is a reminder',
+        duration: 4500,
+      });`,
+    types: `
+      ElNotification({
+        title: 'Title',
+        message: 'This is a reminder',
+        duration: 0,
+        type: 'success',
+      });
+    `,
+  });
+  const capitalize = (value: string): string => {
+    if (!value) return null;
+
+    const text = String(value);
+
+    return text.charAt(0).toUpperCase() + text.slice(1);
+  };
+</script>

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

@@ -0,0 +1,70 @@
+<template>
+  <div class="flex flex-col gap-8 mb-16">
+    <h1 class="">Input Number</h1>
+    <p>Input numerical values with a customizable range.</p>
+
+    <el-card>
+      <template #header> Basic usage </template>
+      <div class="flex flex-col gap-7.5">
+        <p>Bind a variable to <el-text tag="mark">v-model</el-text> in <span class="comment">el-input-number</span> element and you are set.</p>
+        <section class="flex gap-7.5">
+          <el-input-number v-model="num" :min="1" :max="10" @change="handleChange" />
+          <el-input-number v-model="num" :disabled="true" />
+        </section>
+      </div>
+      <template #footer> <html-encode :tag="snippets.basic" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header>Size</template>
+      <div class="flex flex-col gap-7.5">
+        <p>Use attribute <el-text tag="mark">size</el-text> to set additional sizes with large or small.</p>
+        <section class="flex flex-col">
+          <el-form label-position="top">
+            <div class="el-form-items items-start">
+              <el-form-item v-for="size of sizes" :key="size" :label="size">
+                <el-input-number v-model="num" :min="1" :max="10" controls-position="right" :size="size" @change="handleChange" />
+              </el-form-item>
+            </div>
+          </el-form>
+          <el-form label-position="top">
+            <div class="el-form-items items-start">
+              <el-form-item v-for="size of sizes" :key="size" :label="size">
+                <el-input-number v-model="num" :min="1" :max="10" controls-position="right" :size="size" :disabled="true" @change="handleChange" />
+              </el-form-item>
+            </div>
+          </el-form>
+        </section>
+      </div>
+      <template #footer> <html-encode :tag="snippets.content" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header>Controls Position</template>
+      <div class="flex flex-col gap-7.5">
+        <p>Set <el-text tag="mark">controls-position</el-text> to decide the position of control buttons.</p>
+        <section class="flex gap-7.5">
+          <el-input-number v-model="num" :min="1" :max="10" controls-position="right" size="large" @change="handleChange" />
+          <el-input-number v-model="num" :min="1" :max="10" controls-position="right" size="large" :disabled="true" @change="handleChange" />
+        </section>
+      </div>
+      <template #footer> <html-encode :tag="snippets.content" /> </template>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+
+  const sizes = ref(['default', 'large', 'medium', 'small', 'mini']);
+  const num = ref(1);
+  const handleChange = (value: number) => {
+    console.log(value);
+  };
+  const snippets = ref({
+    basic: `
+      <el-input-number v-model="num" :min="1" :max="10" @change="handleChange" />
+      <el-input-number v-model="num" :disabled="true" />`,
+    content: `<el-input-number v-model="num" :min="1" :max="10" controls-position="right" size="large" @change="handleChange" />`,
+  });
+</script>

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

@@ -0,0 +1,89 @@
+<template>
+  <div class="flex flex-col gap-8 mb-16">
+    <h1 class="">Pagination</h1>
+    <p>If you have too much data to display in one page, use pagination.</p>
+
+    <el-card>
+      <template #header> Basic usage </template>
+      <div class="flex flex-col gap-7.5">
+        <p>
+          Set <el-text tag="mark">layout</el-text> with different pagination elements you wish to display separated with a comma. Pagination elements are:
+          <el-text tag="mark">prev</el-text> (a button navigating to the previous page), <el-text tag="mark">next</el-text> (a button navigating to the next page),
+          <el-text tag="mark">pager</el-text> (page list), <el-text tag="mark">jumper</el-text> (a jump-to input), <el-text tag="mark">total</el-text> (total item count),
+          <el-text tag="mark">sizes</el-text> (a select to determine page size) and <el-text tag="mark">-></el-text> (every element after this symbol will be pulled to the right).
+        </p>
+        <section class="flex flex-col gap-7.5">
+          <el-pagination
+            v-model:current-page="current_page"
+            v-model:page-size="page_size"
+            :page-sizes="[10, 20, 50, 100]"
+            :disabled="disabled"
+            :background="background"
+            layout="total, prev, pager, next, jumper, sizes"
+            :total="40000"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+          />
+        </section>
+      </div>
+      <template #footer> <html-encode :tag="snippets.basic" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Disabled </template>
+      <div class="flex flex-col gap-7.5">
+        <p>For make a disable pagination component, add <el-text tag="mark">:disabled="true"</el-text></p>
+        <section class="flex flex-col gap-7.5">
+          <el-pagination
+            v-model:current-page="current_page"
+            v-model:page-size="page_size"
+            :page-sizes="[10, 20, 50, 100]"
+            :size="size"
+            :disabled="true"
+            :background="background"
+            layout="total, prev, pager, next, jumper, sizes"
+            :total="40000"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+          />
+        </section>
+      </div>
+      <template #footer> <html-encode :tag="snippets.disable" /> </template>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+
+  const pagination = ref({
+    current_page: 2,
+    size: 'small',
+    page_size: 20,
+    disabled: false,
+    background: 'transparent',
+    handleSizeChange: (pageSize) => {
+      console.log(pageSize);
+    },
+    handleCurrentChange: (page) => {
+      console.log(page);
+    },
+  });
+  const { current_page, size, page_size, disabled, background, handleSizeChange, handleCurrentChange } = toRefs(pagination);
+  const snippets = ref({
+    basic: `
+      <el-pagination
+        v-model:current-page="current_page"
+        v-model:page-size="page_size"
+        :page-sizes="[10, 20, 50, 100]"
+        :size="size"
+        :background="background"
+        layout="total, prev, pager, next, jumper, sizes"
+        :total="40000"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    `,
+    disable: `<el-pagination :disabled="true" />`,
+  });
+</script>