@timus-networks/theme 2.3.2 → 2.3.5

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@timus-networks/theme",
   "configKey": "themeOptions",
-  "version": "2.3.2",
+  "version": "2.3.4",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/module.mjs

@@ -1,6 +1,6 @@
 import { readdirSync } from 'node:fs';
-import { resolve, parse, join } from 'node:path';
-import { defineNuxtModule, createResolver, useNuxt, addImports, addPlugin, addComponent } from 'nuxt/kit';
+import { resolve, parse } from 'node:path';
+import { defineNuxtModule, createResolver, useNuxt, addImports, addPlugin } from 'nuxt/kit';
 
 
 
@@ -12,7 +12,7 @@ const __filename = __cjs_url__.fileURLToPath(import.meta.url);
 const __dirname = __cjs_path__.dirname(__filename);
 const require = __cjs_mod__.createRequire(import.meta.url);
 const name = "@timus-networks/theme";
-const version = "2.3.2";
+const version = "2.3.4";
 const description = "A comprehensive Nuxt.js module providing a tailored theme experience with integrated TailwindCSS support for applications.";
 const type = "module";
 const exports = {
@@ -37,10 +37,10 @@ const scripts = {
 	fix: "npm run lint:prettier && npm run lint:eslint -- --fix && npm run lint:stylelint -- --fix",
 	pub: "npm publish",
 	sass: "node generate-sass.js",
-	prepack: "nuxt-module-build build",
-	"release-old": "npm run prepack && changelogen --release && npm run pub && git push --follow-tags",
-	version: "standard-version",
-	release: "npm run prepack && npm run version && npm run pub && git push --follow-tags origin main"
+	build: "nuxt-module-build build",
+	"release-old": "npm run build && changelogen --release && npm run pub && git push --follow-tags",
+	version: "standard-version --release-as ${npm_config_type:-patch}",
+	release: "npm run build && npm run version && npm run pub && git push --follow-tags origin main"
 };
 const repository = {
 	type: "git",
@@ -155,29 +155,16 @@ const module = defineNuxtModule({
       });
     });
     const components_dir_list = [
-      { env: "development", path: "runtime/components/development" },
-      { env: "production", path: "runtime/components/production" }
+      { env: "development", path: `${folderPath}/components/development` },
+      { env: "production", path: `${folderPath}/components/production` }
     ];
-    const comp = [];
-    const addComponentFromFolder = (folder) => {
-      const path = resolve(__dirname, folder);
-      const files = readdirSync(path).filter((file) => file.endsWith(".vue"));
-      files.forEach((file) => {
-        const { name } = parse(file);
-        const isExit = comp.find((item) => item.name === name);
-        !isExit ? comp.push({ name, path: resolve(path, file) }) : console.log("#BU COMPONENT VAR name:", name, resolve(path, file), "\xD6nceki: ", isExit);
-        nuxt.options.build.transpile.push(resolve(path, file));
-        addComponent({
-          name: join(name),
-          filePath: resolve(path, file),
-          mode: "client"
-        });
-      });
-    };
     nuxt.hook("components:dirs", (dirs) => {
       components_dir_list.forEach(({ env, path }) => {
         if (isDev || !isDev && env === "production") {
-          addComponentFromFolder(path);
+          dirs.push({
+            path: resolver.resolve(path)
+            /* , prefix: 'my-module' */
+          });
         }
       });
     });

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

@@ -66,6 +66,7 @@
 </template>
 
 <script lang="ts" setup>
+  import { Bell as ElIconBell } from '@element-plus/icons-vue';
   import { ref } from 'vue';
   import { reactive, toRefs } from 'vue';
 
@@ -75,7 +76,7 @@
     sizes: [50, 'default', 'large', 'medium', 'small', 'mini'] as const,
     infos: [50, '32', '56', '44', '32', '16'] as const,
   });
-  const { sizes, infos, circleUrl, squareUrl, sizeList } = toRefs(state);
+  const { sizes, infos } = toRefs(state);
   const snippets = ref({
     isax: `<el-avatar class="isax-notification" />`,
     icon: `<el-avatar :icon="ElIconEdit" />`,

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

@@ -30,7 +30,10 @@
 <script lang="ts" setup>
   import { ref } from 'vue';
 
-  const sample_path = ref([{ regex: /^\/about$/, label: 'header.about.text' }]);
+  const sample_path = ref([
+    { regex: /^\/about$/, label: 'header.about-label.text' },
+    { regex: /^\/theme\/([A-Za-z0-9\-_]+)$/, label: 'header.number.text' },
+  ]);
   const snippets = ref({
     basic: `<timus-breadcrumb :paths="[ { regex: /^\/about$/, label: 'header.about.text' } ]" />`,
     composable: `

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

@@ -205,31 +205,33 @@
   </div>
 </template>
 
-<script>
-import { defineComponent } from "vue";
-export default defineComponent({
-  name: "TimusButton",
-  data() {
-    return {
-      sizes: ["default", "large", "medium", "small", "mini"],
-      colors: ["default", "primary", "secondary", "neutral", "success", "warning", "info", "danger"],
-      snippets: {
-        group: `
-            <el-button-group>
-              <el-button type="primary" :icon="ElIconArrowLeft">Previous Page</el-button>
-              <el-button type="primary">
-                Next Page<el-icon class="el-icon--right"><ElIconArrowRight /></el-icon>
-              </el-button>
-            </el-button-group>`
-      },
-      active_color: "default"
-    };
-  },
-  methods: {
-    capitalize(value) {
-      const text = String(value);
-      return text.charAt(0).toUpperCase() + text.slice(1);
-    }
-  }
-});
+<script setup lang="ts">
+  import {
+    ArrowLeft as ElIconArrowLeft,
+    ArrowRight as ElIconArrowRight,
+    Delete as ElIconDelete,
+    Edit as ElIconEdit,
+    Search as ElIconSearch,
+    Share as ElIconShare,
+    Upload as ElIconUpload,
+  } from '@element-plus/icons-vue';
+  import { ref } from 'vue';
+
+  const sizes = ['default', 'large', 'medium', 'small', 'mini'];
+  const colors = ['default', 'primary', 'secondary', 'neutral', 'success', 'warning', 'info', 'danger'];
+  const snippets = {
+    group: `
+    <el-button-group>
+      <el-button type="primary" :icon="ElIconArrowLeft">Previous Page</el-button>
+      <el-button type="primary">
+        Next Page<el-icon class="el-icon--right"><ElIconArrowRight /></el-icon>
+      </el-button>
+    </el-button-group>`,
+  };
+  const active_color = ref('default');
+  const capitalize = (value: string): string => {
+    const text = String(value);
+
+    return text.charAt(0).toUpperCase() + text.slice(1);
+  };
 </script>

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

@@ -22,3 +22,305 @@ declare const _default: import("vue").DefineComponent<{}, {}, {
     handleCheckAllChange(val: CheckboxValueType): void;
 }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;
+declare module 'vue' {
+    interface GlobalComponents {
+    }
+    interface GlobalDirectives {
+    }
+}
+declare global {
+    const __VLS_intrinsicElements: __VLS_IntrinsicElements;
+    const __VLS_directiveBindingRestFields: {
+        instance: null;
+        oldValue: null;
+        modifiers: any;
+        dir: any;
+    };
+    const __VLS_unref: typeof import('vue').unref;
+    const __VLS_nativeElements: {
+        a: HTMLAnchorElement;
+        abbr: HTMLElement;
+        address: HTMLElement;
+        area: HTMLAreaElement;
+        article: HTMLElement;
+        aside: HTMLElement;
+        audio: HTMLAudioElement;
+        b: HTMLElement;
+        base: HTMLBaseElement;
+        bdi: HTMLElement;
+        bdo: HTMLElement;
+        blockquote: HTMLQuoteElement;
+        body: HTMLBodyElement;
+        br: HTMLBRElement;
+        button: HTMLButtonElement;
+        canvas: HTMLCanvasElement;
+        caption: HTMLTableCaptionElement;
+        cite: HTMLElement;
+        code: HTMLElement;
+        col: HTMLTableColElement;
+        colgroup: HTMLTableColElement;
+        data: HTMLDataElement;
+        datalist: HTMLDataListElement;
+        dd: HTMLElement;
+        del: HTMLModElement;
+        details: HTMLDetailsElement;
+        dfn: HTMLElement;
+        dialog: HTMLDialogElement;
+        div: HTMLDivElement;
+        dl: HTMLDListElement;
+        dt: HTMLElement;
+        em: HTMLElement;
+        embed: HTMLEmbedElement;
+        fieldset: HTMLFieldSetElement;
+        figcaption: HTMLElement;
+        figure: HTMLElement;
+        footer: HTMLElement;
+        form: HTMLFormElement;
+        h1: HTMLHeadingElement;
+        h2: HTMLHeadingElement;
+        h3: HTMLHeadingElement;
+        h4: HTMLHeadingElement;
+        h5: HTMLHeadingElement;
+        h6: HTMLHeadingElement;
+        head: HTMLHeadElement;
+        header: HTMLElement;
+        hgroup: HTMLElement;
+        hr: HTMLHRElement;
+        html: HTMLHtmlElement;
+        i: HTMLElement;
+        iframe: HTMLIFrameElement;
+        img: HTMLImageElement;
+        input: HTMLInputElement;
+        ins: HTMLModElement;
+        kbd: HTMLElement;
+        label: HTMLLabelElement;
+        legend: HTMLLegendElement;
+        li: HTMLLIElement;
+        link: HTMLLinkElement;
+        main: HTMLElement;
+        map: HTMLMapElement;
+        mark: HTMLElement;
+        menu: HTMLMenuElement;
+        meta: HTMLMetaElement;
+        meter: HTMLMeterElement;
+        nav: HTMLElement;
+        noscript: HTMLElement;
+        object: HTMLObjectElement;
+        ol: HTMLOListElement;
+        optgroup: HTMLOptGroupElement;
+        option: HTMLOptionElement;
+        output: HTMLOutputElement;
+        p: HTMLParagraphElement;
+        picture: HTMLPictureElement;
+        pre: HTMLPreElement;
+        progress: HTMLProgressElement;
+        q: HTMLQuoteElement;
+        rp: HTMLElement;
+        rt: HTMLElement;
+        ruby: HTMLElement;
+        s: HTMLElement;
+        samp: HTMLElement;
+        script: HTMLScriptElement;
+        search: HTMLElement;
+        section: HTMLElement;
+        select: HTMLSelectElement;
+        slot: HTMLSlotElement;
+        small: HTMLElement;
+        source: HTMLSourceElement;
+        span: HTMLSpanElement;
+        strong: HTMLElement;
+        style: HTMLStyleElement;
+        sub: HTMLElement;
+        summary: HTMLElement;
+        sup: HTMLElement;
+        table: HTMLTableElement;
+        tbody: HTMLTableSectionElement;
+        td: HTMLTableCellElement;
+        template: HTMLTemplateElement;
+        textarea: HTMLTextAreaElement;
+        tfoot: HTMLTableSectionElement;
+        th: HTMLTableCellElement;
+        thead: HTMLTableSectionElement;
+        time: HTMLTimeElement;
+        title: HTMLTitleElement;
+        tr: HTMLTableRowElement;
+        track: HTMLTrackElement;
+        u: HTMLElement;
+        ul: HTMLUListElement;
+        var: HTMLElement;
+        video: HTMLVideoElement;
+        wbr: HTMLElement;
+        animate: SVGAnimateElement;
+        animateMotion: SVGAnimateMotionElement;
+        animateTransform: SVGAnimateTransformElement;
+        circle: SVGCircleElement;
+        clipPath: SVGClipPathElement;
+        defs: SVGDefsElement;
+        desc: SVGDescElement;
+        ellipse: SVGEllipseElement;
+        feBlend: SVGFEBlendElement;
+        feColorMatrix: SVGFEColorMatrixElement;
+        feComponentTransfer: SVGFEComponentTransferElement;
+        feComposite: SVGFECompositeElement;
+        feConvolveMatrix: SVGFEConvolveMatrixElement;
+        feDiffuseLighting: SVGFEDiffuseLightingElement;
+        feDisplacementMap: SVGFEDisplacementMapElement;
+        feDistantLight: SVGFEDistantLightElement;
+        feDropShadow: SVGFEDropShadowElement;
+        feFlood: SVGFEFloodElement;
+        feFuncA: SVGFEFuncAElement;
+        feFuncB: SVGFEFuncBElement;
+        feFuncG: SVGFEFuncGElement;
+        feFuncR: SVGFEFuncRElement;
+        feGaussianBlur: SVGFEGaussianBlurElement;
+        feImage: SVGFEImageElement;
+        feMerge: SVGFEMergeElement;
+        feMergeNode: SVGFEMergeNodeElement;
+        feMorphology: SVGFEMorphologyElement;
+        feOffset: SVGFEOffsetElement;
+        fePointLight: SVGFEPointLightElement;
+        feSpecularLighting: SVGFESpecularLightingElement;
+        feSpotLight: SVGFESpotLightElement;
+        feTile: SVGFETileElement;
+        feTurbulence: SVGFETurbulenceElement;
+        filter: SVGFilterElement;
+        foreignObject: SVGForeignObjectElement;
+        g: SVGGElement;
+        image: SVGImageElement;
+        line: SVGLineElement;
+        linearGradient: SVGLinearGradientElement;
+        marker: SVGMarkerElement;
+        mask: SVGMaskElement;
+        metadata: SVGMetadataElement;
+        mpath: SVGMPathElement;
+        path: SVGPathElement;
+        pattern: SVGPatternElement;
+        polygon: SVGPolygonElement;
+        polyline: SVGPolylineElement;
+        radialGradient: SVGRadialGradientElement;
+        rect: SVGRectElement;
+        set: SVGSetElement;
+        stop: SVGStopElement;
+        svg: SVGSVGElement;
+        switch: SVGSwitchElement;
+        symbol: SVGSymbolElement;
+        text: SVGTextElement;
+        textPath: SVGTextPathElement;
+        tspan: SVGTSpanElement;
+        use: SVGUseElement;
+        view: SVGViewElement;
+    };
+    type __VLS_IntrinsicElements = import('vue/jsx-runtime').JSX.IntrinsicElements;
+    type __VLS_Element = import('vue/jsx-runtime').JSX.Element;
+    type __VLS_GlobalComponents = import('vue').GlobalComponents & Pick<typeof import('vue'), 'Transition' | 'TransitionGroup' | 'KeepAlive' | 'Suspense' | 'Teleport'>;
+    type __VLS_GlobalDirectives = import('vue').GlobalDirectives;
+    type __VLS_IsAny<T> = 0 extends 1 & T ? true : false;
+    type __VLS_PickNotAny<A, B> = __VLS_IsAny<A> extends true ? B : A;
+    type __VLS_unknownDirective = (arg1: unknown, arg2: unknown, arg3: unknown, arg4: unknown) => void;
+    type __VLS_WithComponent<N0 extends string, LocalComponents, N1 extends string, N2 extends string, N3 extends string> = N1 extends keyof LocalComponents ? N1 extends N0 ? Pick<LocalComponents, N0 extends keyof LocalComponents ? N0 : never> : {
+        [K in N0]: LocalComponents[N1];
+    } : N2 extends keyof LocalComponents ? N2 extends N0 ? Pick<LocalComponents, N0 extends keyof LocalComponents ? N0 : never> : {
+        [K in N0]: LocalComponents[N2];
+    } : N3 extends keyof LocalComponents ? N3 extends N0 ? Pick<LocalComponents, N0 extends keyof LocalComponents ? N0 : never> : {
+        [K in N0]: LocalComponents[N3];
+    } : N1 extends keyof __VLS_GlobalComponents ? N1 extends N0 ? Pick<__VLS_GlobalComponents, N0 extends keyof __VLS_GlobalComponents ? N0 : never> : {
+        [K in N0]: __VLS_GlobalComponents[N1];
+    } : N2 extends keyof __VLS_GlobalComponents ? N2 extends N0 ? Pick<__VLS_GlobalComponents, N0 extends keyof __VLS_GlobalComponents ? N0 : never> : {
+        [K in N0]: __VLS_GlobalComponents[N2];
+    } : N3 extends keyof __VLS_GlobalComponents ? N3 extends N0 ? Pick<__VLS_GlobalComponents, N0 extends keyof __VLS_GlobalComponents ? N0 : never> : {
+        [K in N0]: __VLS_GlobalComponents[N3];
+    } : {
+        [K in N0]: unknown;
+    };
+    type __VLS_FunctionalComponentProps<T, K> = '__ctx' extends keyof __VLS_PickNotAny<K, {}> ? K extends {
+        __ctx?: {
+            props?: infer P;
+        };
+    } ? NonNullable<P> : never : T extends (props: infer P, ...args: any) => any ? P : {};
+    type __VLS_IsFunction<T, K> = K extends keyof T ? __VLS_IsAny<T[K]> extends false ? unknown extends T[K] ? false : true : false : false;
+    type __VLS_UnionToIntersection<U> = (U extends unknown ? (arg: U) => unknown : never) extends ((arg: infer P) => unknown) ? P : never;
+    type __VLS_OverloadUnionInner<T, U = unknown> = U & T extends (...args: infer A) => infer R ? U extends T ? never : __VLS_OverloadUnionInner<T, Pick<T, keyof T> & U & ((...args: A) => R)> | ((...args: A) => R) : never;
+    type __VLS_OverloadUnion<T> = Exclude<__VLS_OverloadUnionInner<(() => never) & T>, T extends () => never ? never : () => never>;
+    type __VLS_ConstructorOverloads<T> = __VLS_OverloadUnion<T> extends infer F ? F extends (event: infer E, ...args: infer A) => any ? {
+        [K in E & string]: (...args: A) => void;
+    } : never : never;
+    type __VLS_NormalizeEmits<T> = __VLS_PrettifyGlobal<__VLS_UnionToIntersection<__VLS_ConstructorOverloads<T> & {
+        [K in keyof T]: T[K] extends any[] ? {
+            (...args: T[K]): void;
+        } : never;
+    }>>;
+    type __VLS_PrettifyGlobal<T> = {
+        [K in keyof T]: T[K];
+    } & {};
+    function __VLS_getVForSourceType(source: number): [number, number, number][];
+    function __VLS_getVForSourceType(source: string): [string, number, number][];
+    function __VLS_getVForSourceType<T extends any[]>(source: T): [
+        item: T[number],
+        key: number,
+        index: number
+    ][];
+    function __VLS_getVForSourceType<T extends {
+        [Symbol.iterator](): Iterator<any>;
+    }>(source: T): [
+        item: T extends {
+            [Symbol.iterator](): Iterator<infer T1>;
+        } ? T1 : never,
+        key: number,
+        index: undefined
+    ][];
+    function __VLS_getVForSourceType<T extends number | {
+        [Symbol.iterator](): Iterator<any>;
+    }>(source: T): [
+        item: number | (Exclude<T, number> extends {
+            [Symbol.iterator](): Iterator<infer T1>;
+        } ? T1 : never),
+        key: number,
+        index: undefined
+    ][];
+    function __VLS_getVForSourceType<T>(source: T): [
+        item: T[keyof T],
+        key: keyof T,
+        index: number
+    ][];
+    function __VLS_getSlotParams<T>(slot: T): Parameters<__VLS_PickNotAny<NonNullable<T>, (...args: any[]) => any>>;
+    function __VLS_getSlotParam<T>(slot: T): Parameters<__VLS_PickNotAny<NonNullable<T>, (...args: any[]) => any>>[0];
+    function __VLS_directiveAsFunction<T extends import('vue').Directive>(dir: T): T extends (...args: any) => any ? T | __VLS_unknownDirective : NonNullable<(T & Record<string, __VLS_unknownDirective>)['created' | 'beforeMount' | 'mounted' | 'beforeUpdate' | 'updated' | 'beforeUnmount' | 'unmounted']>;
+    function __VLS_withScope<T, K>(ctx: T, scope: K): ctx is T & K;
+    function __VLS_makeOptional<T>(t: T): {
+        [K in keyof T]?: T[K];
+    };
+    function __VLS_nonNullable<T>(t: T): T extends null | undefined ? never : T;
+    function __VLS_asFunctionalComponent<T, K = T extends new (...args: any) => any ? InstanceType<T> : unknown>(t: T, instance?: K): T extends new (...args: any) => any ? (props: (K extends {
+        $props: infer Props;
+    } ? Props : any) & Record<string, unknown>, ctx?: any) => __VLS_Element & {
+        __ctx?: {
+            attrs?: any;
+            slots?: K extends {
+                $slots: infer Slots;
+            } ? Slots : any;
+            emit?: K extends {
+                $emit: infer Emit;
+            } ? Emit : any;
+        } & {
+            props?: (K extends {
+                $props: infer Props;
+            } ? Props : any) & Record<string, unknown>;
+            expose?(exposed: K): void;
+        };
+    } : T extends () => any ? (props: {}, ctx?: any) => ReturnType<T> : T extends (...args: any) => any ? T : (_: {} & Record<string, unknown>, ctx?: any) => {
+        __ctx?: {
+            attrs?: any;
+            expose?: any;
+            slots?: any;
+            emit?: any;
+            props?: {} & Record<string, unknown>;
+        };
+    };
+    function __VLS_elementAsFunction<T>(tag: T, endTag?: T): (_: T & Record<string, unknown>) => void;
+    function __VLS_functionalComponentArgsRest<T extends (...args: any) => any>(t: T): 2 extends Parameters<T>['length'] ? [any] : [];
+    function __VLS_pickFunctionalComponentCtx<T, K>(comp: T, compInstance: K): NonNullable<__VLS_PickNotAny<'__ctx' extends keyof __VLS_PickNotAny<K, {}> ? K extends {
+        __ctx?: infer Ctx;
+    } ? Ctx : never : any, T extends (props: any, ctx: infer Ctx) => any ? Ctx : any>>;
+    function __VLS_normalizeSlot<S>(s: S): S extends () => infer R ? (props: {}) => R : S;
+    function __VLS_tryAsConstant<const T>(t: T): T;
+}

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

@@ -147,6 +147,7 @@
 
 <script lang="ts" setup>
   import { ElIcon } from 'element-plus';
+  import { ref } from 'vue';
 
   const placement_list = ref(['top-start', 'top', 'top-end', 'bottom-start', 'bottom', 'bottom-end']);
   const placement_selected = ref('top-start');

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

@@ -216,55 +216,46 @@
   </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 lang="ts" setup>
+  import { Calendar as ElIconCalendar, Search as ElIconSearch } from '@element-plus/icons-vue';
+  import { ref } from 'vue';
+
+  const sizes = ['default', 'large', 'medium', 'small', 'mini'];
+  const input = ref('');
+  const textarea = ref('');
+  const select = ref('1');
+  const 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>
+  `,
+  };
+  const capitalize = (value: string): string => {
+    const text = String(value);
+
+    return text.charAt(0).toUpperCase() + text.slice(1);
+  };
 </script>

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

@@ -58,6 +58,9 @@
 </template>
 
 <script lang="ts" setup>
+  import { Plus as ElIconPlus } from '@element-plus/icons-vue';
+  import { ref } from 'vue';
+
   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>`,

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

@@ -52,38 +52,47 @@
     </el-card>
   </div>
 </template>
-
 <script lang="ts" setup>
-  import { ref } from 'vue';
+  import { reactive, ref, toRefs } from 'vue';
+
+  interface PaginationState {
+    current_page: number;
+    size: string;
+    page_size: number;
+    disabled: boolean;
+    background: string;
+    handleSizeChange: (pageSize: number) => void;
+    handleCurrentChange: (page: number) => void;
+  }
 
-  const pagination = ref({
+  const paginationState = reactive<PaginationState>({
     current_page: 2,
     size: 'small',
     page_size: 20,
     disabled: false,
     background: 'transparent',
-    handleSizeChange: (pageSize) => {
+    handleSizeChange: (pageSize: number) => {
       console.log(pageSize);
     },
-    handleCurrentChange: (page) => {
+    handleCurrentChange: (page: number) => {
       console.log(page);
     },
   });
-  const { current_page, size, page_size, disabled, background, handleSizeChange, handleCurrentChange } = toRefs(pagination);
+  const { current_page, size, page_size, disabled, background, handleSizeChange, handleCurrentChange } = toRefs(paginationState);
   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"
-      />
-    `,
+    <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>