@berqnet/theme 0.0.0-stage → 2.4.291

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

@@ -0,0 +1,191 @@
+<template>
+  <div class="flex flex-col gap-8 mb-16">
+    <h1 class="">Select</h1>
+    <p>When there are plenty of options, use a drop-down menu to display and select desired ones.</p>
+
+    <el-card>
+      <template #header> Sizes </template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>
+          Default size is Large. Checkbox 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-checkbox v-for="(size, index) of sizes" :key="index" v-model="value" :label="`${capitalize(size)}`" :size="size" />
+        </div>
+      </div>
+      <template #footer>
+        <html-encode :tag="snippets.sizes" />
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Disabled </template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>Disabled state for checkbox. Set the <el-text tag="mark">disabled</el-text> attribute.</p>
+        <div class="flex gap-4 items-start">
+          <el-checkbox v-model="value">Not Disabled Default</el-checkbox>
+          <el-checkbox v-model="value" disabled>Disabled Default</el-checkbox>
+        </div>
+      </div>
+      <template #footer>
+        <html-encode :tag="snippets.disabled" />
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Checkbox group </template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>
+          It is used for multiple checkboxes which are bound in one group, and indicates whether one option is selected by checking if it is checked.
+          <el-text tag="mark">checkbox-group</el-text> element can manage multiple checkboxes in one group by using v-model which is bound as an
+          <el-text tag="mark">Array</el-text>. Inside the el-checkbox element, value is the value of the checkbox. If no content is nested in that tag, label will be rendered as
+          the description following the button of the checkbox. value also corresponds with the element values in the array. It is selected if the specified value exists in the
+          array, and vice versa.
+        </p>
+        <div class="flex flex-col gap-4 items-start">
+          <el-checkbox-group v-model="checkList" class="flex gap-3">
+            <el-checkbox label="Option A" value="Value A" />
+            <el-checkbox label="Option B" value="Value B" />
+            <el-checkbox label="Option C" value="Value C" />
+            <el-checkbox label="disabled" value="Value disabled" disabled />
+            <el-checkbox label="selected and disabled" value="Value selected and disabled" disabled />
+          </el-checkbox-group>
+          Model: {{ checkList }}
+        </div>
+      </div>
+      <template #footer>
+        <html-encode :tag="snippets.group" />
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header>Vertical Group</template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>To made checkbox group vertical just add <el-text tag="mark">class="el-vertical-group"</el-text> to <el-text tag="mark">el-checkbox-group</el-text> component.</p>
+        <div class="flex flex-col gap-4 items-start">
+          Selected: {{ value }}
+          <el-checkbox-group v-model="checkList" class="el-vertical-group">
+            <el-checkbox v-for="(size, index) of sizes" :key="index" :value="index" :size="size">Option 1</el-checkbox>
+          </el-checkbox-group>
+        </div>
+      </div>
+      <template #footer> <html-encode :tag="snippets.vertical" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Indeterminate </template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>The <el-text tag="mark">indeterminate</el-text> property can help you to achieve a 'check all' effect.</p>
+        <div class="flex flex-col gap-4 items-start">
+          <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" disabled @change="handleCheckAllChange"> Check all </el-checkbox>
+          <el-checkbox-group v-model="checkedCities" class="flex gap-3" @change="handleCheckedCitiesChange">
+            <el-checkbox v-for="city in cities" :key="city" :label="city" :value="city">
+              {{ city }}
+            </el-checkbox>
+          </el-checkbox-group>
+        </div>
+      </div>
+      <template #footer>
+        <html-encode :tag="snippets.indeterminate" />
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Minimum / Maximum items checked </template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>The <el-text tag="mark">min</el-text> and <el-text tag="mark">max</el-text> properties can help you to limit the number of checked items.</p>
+        <div class="flex flex-col gap-4 items-start">
+          <el-checkbox-group v-model="checkedCities" :min="1" :max="2" class="gap-3">
+            <el-checkbox v-for="city in cities" :key="city" :label="city" :value="city">
+              {{ city }}
+            </el-checkbox>
+          </el-checkbox-group>
+        </div>
+      </div>
+      <template #footer>
+        <html-encode :tag="snippets.indeterminate" />
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Button style </template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>
+          Checkbox with button styles. You just need to change el-checkbox element into el-checkbox-button element. We also provide <el-text tag="mark">size</el-text> attribute.
+        </p>
+        <div class="flex flex-col gap-4 items-start">
+          <el-checkbox-group v-for="(size, index) of sizes" :key="index" v-model="checkedCities" :size="size">
+            <el-checkbox-button v-for="(city, i) in cities" :key="city" :value="city" :disabled="[0, 1, 3].includes(i)">
+              {{ city }}
+            </el-checkbox-button>
+          </el-checkbox-group>
+        </div>
+      </div>
+      <template #footer>
+        <html-encode :tag="snippets.indeterminate" />
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header> With borders </template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>The border attribute adds a border to Checkboxes.</p>
+        <div class="flex flex-col gap-4 items-start">
+          <el-checkbox v-for="(size, index) of sizes" :key="index" v-model="value" border :label="`${capitalize(size)}`" :size="size" :disabled="[1, 2, 3].includes(index)" />
+        </div>
+      </div>
+      <template #footer>
+        <html-encode :tag="snippets.indeterminate" />
+      </template>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+export default defineComponent({
+  name: "BerqnetCheckbox",
+  data() {
+    return {
+      sizes: ["default", "large", "medium", "small", "mini"],
+      colors: ["primary", "secondary", "neutral", "success", "warning", "info", "danger"],
+      value: "",
+      disabled: true,
+      snippets: {
+        sizes: `<el-checkbox v-model="value" label="Option label" size="large" />`,
+        disabled: `<el-checkbox v-model="value" label="Option label" disabled />`,
+        group: `
+            <el-checkbox-group v-model="checkList" class="flex gap-3">
+              <el-checkbox label="Option A" value="Value A" />
+              <el-checkbox label="Option B" value="Value B" />
+            </el-checkbox-group>
+          `,
+        indeterminate: ` <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange"> Check all </el-checkbox> `,
+        min_max: ``,
+        vertical: ` <el-checkbox-group v-model="value" class="el-vertical-group" />`
+      },
+      checkAll: false,
+      checkList: ["Value selected and disabled", "Value A"],
+      isIndeterminate: true,
+      checkedCities: ["Shanghai", "Beijing"],
+      cities: ["Shanghai", "Beijing", "Guangzhou", "Shenzhen"]
+    };
+  },
+  methods: {
+    capitalize(value) {
+      const text = String(value);
+      return text.charAt(0).toUpperCase() + text.slice(1);
+    },
+    handleCheckedCitiesChange(value) {
+      const checkedCount = value.length;
+      this.checkAll = checkedCount === this.cities.length;
+      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
+    },
+    handleCheckAllChange(val) {
+      this.checkedCities = val ? this.cities : [];
+      this.isIndeterminate = false;
+    }
+  }
+});
+</script>

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

@@ -0,0 +1,134 @@
+import type { CheckboxValueType } from 'element-plus';
+declare const _default: import("vue").DefineComponent<{}, {}, {
+    sizes: string[];
+    colors: string[];
+    value: string;
+    disabled: boolean;
+    snippets: {
+        sizes: string;
+        disabled: string;
+        group: string;
+        indeterminate: string;
+        min_max: string;
+        vertical: string;
+    };
+    checkAll: boolean;
+    checkList: string[];
+    isIndeterminate: boolean;
+    checkedCities: string[];
+    cities: string[];
+}, {}, {
+    capitalize(value: string): string;
+    handleCheckedCitiesChange(value: CheckboxValueType[]): void;
+    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 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_placeholder: any;
+    type __VLS_NativeElements = __VLS_SpreadMerge<SVGElementTagNameMap, HTMLElementTagNameMap>;
+    type __VLS_IntrinsicElements = import('vue/jsx-runtime').JSX.IntrinsicElements;
+    type __VLS_Element = import('vue/jsx-runtime').JSX.Element;
+    type __VLS_GlobalComponents = import('vue').GlobalComponents;
+    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_SpreadMerge<A, B> = Omit<A, keyof B> & B;
+    type __VLS_WithComponent<N0 extends string, LocalComponents, Self, 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];
+    } : Self extends object ? {
+        [K in N0]: Self;
+    } : 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_NormalizeComponentEvent<Props, Events, onEvent extends keyof Props, Event extends keyof Events, CamelizedEvent extends keyof Events> = (__VLS_IsFunction<Props, onEvent> extends true ? Props : __VLS_IsFunction<Events, Event> extends true ? {
+        [K in onEvent]?: Events[Event];
+    } : __VLS_IsFunction<Events, CamelizedEvent> extends true ? {
+        [K in onEvent]?: Events[CamelizedEvent];
+    } : Props) & Record<string, unknown>;
+    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];
+    } & {};
+    type __VLS_PickFunctionalComponentCtx<T, 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>>;
+    type __VLS_UseTemplateRef<T> = Readonly<import('vue').ShallowRef<T | null>>;
+    function __VLS_getVForSourceType<T extends number | string | any[] | Iterable<any>>(source: T): [
+        item: T extends number ? number : T extends string ? string : T extends any[] ? T[number] : T extends Iterable<infer T1> ? T1 : any,
+        index: number
+    ][];
+    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_asFunctionalDirective<T>(dir: T): T extends import('vue').ObjectDirective ? NonNullable<T['created' | 'beforeMount' | 'mounted' | 'beforeUpdate' | 'updated' | 'beforeUnmount' | 'unmounted']> : T extends (...args: any) => any ? T : (arg1: unknown, arg2: unknown, arg3: unknown, arg4: unknown) => void;
+    function __VLS_makeOptional<T>(t: T): {
+        [K in keyof T]?: T[K];
+    };
+    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;
+            expose?(exposed: K): void;
+            props?: (K extends {
+                $props: infer Props;
+            } ? Props : any) & Record<string, unknown>;
+        };
+    } : 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_functionalComponentArgsRest<T extends (...args: any) => any>(t: T): 2 extends Parameters<T>['length'] ? [any] : [];
+    function __VLS_asFunctionalElement<T>(tag: T, endTag?: T): (attrs: T & Record<string, unknown>) => void;
+    function __VLS_asFunctionalSlot<S>(slot: S): S extends () => infer R ? (props: {}) => R : NonNullable<S>;
+    function __VLS_tryAsConstant<const T>(t: T): T;
+}

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

@@ -0,0 +1,38 @@
+<template>
+  <div class="flex flex-col gap-8 mb-16">
+    <h1 class="">Collapse - (Coding Not Started)</h1>
+    <p>Display prompt information for mouse hover.</p>
+
+    <el-card>
+      <template #header>Basic usage</template>
+      <div class="flex flex-col gap-3">
+        <p>
+          Tooltip has 9 placements. Use attribute <el-text tag="mark">content</el-text> to set the display content when hover. The attribute
+          <el-text tag="mark"> placement </el-text> determines the position of the tooltip. Its value is <el-text tag="mark">[orientation]-[alignment]</el-text> with four
+          orientations <el-text tag="mark">top, left, right, bottom</el-text> and three alignments <el-text tag="mark">start, end, null, and the default</el-text> alignment is
+          null. Take <el-text tag="mark">placement="left-end"</el-text> for example, Tooltip will display on the left of the element which you are hovering and the bottom of the
+          tooltip aligns with the bottom of the element. attribute for display an image
+        </p>
+        <section class="flex gap-7.5">sss</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-tooltip class="box-item" effect="dark" content="Left Bottom prompts info" placement="left-end">
+        <el-button>left-end</el-button>
+      </el-tooltip>`,
+    content: `
+      <el-tooltip placement="top">
+        <template #content> multiple lines<br />second line </template>
+        <el-button>Top center</el-button>
+      </el-tooltip>
+    `,
+  });
+</script>

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

@@ -0,0 +1,196 @@
+<template>
+  <div class="flex flex-col gap-8 mb-16">
+    <h1 class="">DatePicker</h1>
+    <p>Use Date Picker for date input.</p>
+
+    <el-card>
+      <template #header>Enter Date</template>
+      <div class="flex flex-col gap-7.5">
+        <p>
+          Basic date picker measured by 'day'. The measurement is determined by the <el-text tag="mark">type</el-text> attribute. You can enable quick options via
+          <el-text tag="mark">shortcuts</el-text> property. The disabled date is set by <el-text tag="mark">disabledDate</el-text>, which is a function.
+        </p>
+        <div class="flex gap-7.5">
+          <el-form label-position="top" size="mini">
+            <div class="el-form-items">
+              <el-form-item label="Sizes">
+                <el-radio-group v-model="size" aria-label="size control" size="mini">
+                  <el-radio-button v-for="item of sizes" :key="item" :value="item">{{ item }}</el-radio-button>
+                </el-radio-group>
+              </el-form-item>
+              <el-form-item label="Date Type">
+                <el-radio-group v-model="type" aria-label="size control" size="mini">
+                  <el-radio-button value="date">Date</el-radio-button>
+                  <el-radio-button value="datetime">DateTime</el-radio-button>
+                </el-radio-group>
+              </el-form-item>
+            </div>
+          </el-form>
+        </div>
+        <section class="flex flex-col gap-4">
+          <div class="flex gap-7.5">
+            <el-date-picker v-model="value" :type="type" placeholder="Pick a day" :size="size" />
+            <el-date-picker v-model="value" :type="type" placeholder="Pick a day" :disabled-date="disabledDate" :shortcuts="shortcuts" :size="size" />
+          </div>
+        </section>
+      </div>
+      <template #footer> <html-encode :tag="snippets.basic" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header>Other measurements</template>
+      <div class="flex flex-col gap-7.5">
+        <p>You can choose week, month, year or multiple dates by extending the standard date picker component.</p>
+        <section class="flex flex-col gap-4">
+          <el-form label-position="top">
+            <div class="el-form-items">
+              <el-form-item label="Dates">
+                <el-date-picker v-model="multiple_value" type="dates" placeholder="Pick one or more dates" />
+              </el-form-item>
+              <el-form-item label="Month">
+                <el-date-picker v-model="value" type="month" placeholder="Pick a month" />
+              </el-form-item>
+              <el-form-item label="Year">
+                <el-date-picker v-model="value" type="year" placeholder="Pick a year" />
+              </el-form-item>
+            </div>
+            <div class="el-form-items">
+              <el-form-item label="Week">
+                <el-date-picker v-model="value" type="week" format="[Week] ww" placeholder="Pick a week" />
+              </el-form-item>
+              <el-form-item label="Months">
+                <el-date-picker v-model="multiple_value" type="months" placeholder="Pick one or more months" />
+              </el-form-item>
+              <el-form-item label="Years">
+                <el-date-picker v-model="multiple_value" type="years" placeholder="Pick one or more years" />
+              </el-form-item>
+            </div>
+          </el-form>
+        </section>
+      </div>
+      <template #footer> <html-encode :tag="snippets.types" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header>Range Picker</template>
+      <div class="flex flex-col gap-7.5">
+        <p>
+          Picking a date range is supported. When in range mode, the left and right panels are linked by default. If you want the two panels to switch current months independently,
+          you can use the <el-text tag="mark">unlink-panels</el-text> attribute. You can set <el-text tag="mark">daterange, monthrange</el-text> or
+          <el-text tag="mark">yearrange</el-text> to range picker.
+        </p>
+        <el-form label-position="top" size="mini">
+          <div class="el-form-items">
+            <el-form-item label="Sizes">
+              <el-radio-group v-model="size" aria-label="size control" size="mini">
+                <el-radio-button v-for="item of sizes" :key="item" :value="item">{{ item }}</el-radio-button>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="Date Type">
+              <el-radio-group v-model="range_type" aria-label="size control" size="mini">
+                <el-radio-button value="daterange">Date</el-radio-button>
+                <el-radio-button value="datetimerange">DateTime</el-radio-button>
+              </el-radio-group>
+            </el-form-item>
+          </div>
+        </el-form>
+        <section class="flex flex-col gap-4">
+          <div class="flex flex-col gap-7.5">
+            <el-form label-position="top" class="grid grid-cols-2">
+              <el-form-item label="Date Range">
+                <el-date-picker v-model="range_value" :type="range_type" range-separator="To" start-placeholder="Start date" end-placeholder="End date" :size="size" />
+              </el-form-item>
+              <el-form-item label="Date Range With Links">
+                <el-date-picker
+                  v-model="range_value"
+                  :type="range_type"
+                  range-separator="To"
+                  start-placeholder="Start date"
+                  end-placeholder="End date"
+                  :size="size"
+                  :shortcuts="shortcuts"
+                  unlink-panels
+                />
+              </el-form-item>
+              <el-form-item label="Month Range">
+                <el-date-picker
+                  v-model="range_value"
+                  type="monthrange"
+                  range-separator="To"
+                  start-placeholder="Start date"
+                  end-placeholder="End date"
+                  :size="size"
+                  :shortcuts="shortcuts"
+                  unlink-panels
+                />
+              </el-form-item>
+              <el-form-item label="Year Range">
+                <el-date-picker
+                  v-model="range_value"
+                  type="yearrange"
+                  range-separator="To"
+                  start-placeholder="Start date"
+                  end-placeholder="End date"
+                  :size="size"
+                  :shortcuts="shortcuts"
+                  unlink-panels
+                />
+              </el-form-item>
+            </el-form>
+          </div>
+        </section>
+      </div>
+      <template #footer>
+        <el-scrollbar><html-encode :tag="snippets.ranges" /></el-scrollbar>
+      </template>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+
+  const size = ref('medium');
+  const type = ref<'date' | 'datetime'>('date');
+  const range_type = ref<'daterange' | 'datetimerage'>('daterange');
+  const multiple_value = ref([]);
+  const range_value = ref([]);
+  const value = ref('');
+  const sizes = ref<Array<'default' | 'large' | 'medium' | 'small' | 'mini'>>(['default', 'large', 'medium', 'small', 'mini']);
+
+  const shortcuts = [
+    {
+      text: 'Today',
+      value: new Date(),
+    },
+    {
+      text: 'Yesterday',
+      value: () => {
+        const date = new Date();
+
+        date.setTime(date.getTime() - 3600 * 1000 * 24);
+
+        return date;
+      },
+    },
+    {
+      text: 'A week ago',
+      value: () => {
+        const date = new Date();
+
+        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+
+        return date;
+      },
+    },
+  ];
+
+  const disabledDate = (time: Date) => time.getTime() > Date.now();
+
+  const snippets = ref({
+    basic: `<el-date-picker v-model="value" type="date" placeholder="Pick a day" size="large" />`,
+    types: `<el-date-picker v-model="value" type="month" placeholder="Pick a month" />`,
+    ranges: `<el-date-picker v-model="range_value" type="daterange" range-separator="To" start-placeholder="Start date" end-placeholder="End date" />
+`,
+  });
+</script>