@element-plus/nightly 0.0.20220117 → 0.0.20220121

package/lib/components/calendar/src/date-table.vue.d.ts

@@ -24,20 +24,36 @@ declare const _default: import("vue").DefineComponent<{
         day: string;
         date: Date;
     };
+    nsTable: {
+        namespace: import("vue").ComputedRef<string>;
+        b: (blockSuffix?: string) => string;
+        e: (element?: string | undefined) => string;
+        m: (modifier?: string | undefined) => string;
+        be: (blockSuffix?: string | undefined, element?: string | undefined) => string;
+        em: (element?: string | undefined, modifier?: string | undefined) => string;
+        bm: (blockSuffix?: string | undefined, modifier?: string | undefined) => string;
+        bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
+        is: (name: string, state?: boolean) => string;
+    };
+    nsDay: {
+        namespace: import("vue").ComputedRef<string>;
+        b: (blockSuffix?: string) => string;
+        e: (element?: string | undefined) => string;
+        m: (modifier?: string | undefined) => string;
+        be: (blockSuffix?: string | undefined, element?: string | undefined) => string;
+        em: (element?: string | undefined, modifier?: string | undefined) => string;
+        bm: (blockSuffix?: string | undefined, modifier?: string | undefined) => string;
+        bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
+        is: (name: string, state?: boolean) => string;
+    };
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     pick: (value: dayjs.Dayjs) => boolean;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    readonly selectedDay?: unknown;
-    readonly range?: unknown;
-    readonly date?: unknown;
-    readonly hideHeader?: unknown;
-} & {
-    date: dayjs.Dayjs;
-} & {
-    range?: [dayjs.Dayjs, dayjs.Dayjs] | undefined;
-    selectedDay?: dayjs.Dayjs | undefined;
-    hideHeader?: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown> | undefined;
-}> & {
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly selectedDay: import("../../../utils/props").BuildPropReturn<import("../../../utils/props").PropWrapper<dayjs.Dayjs>, unknown, unknown, unknown, unknown>;
+    readonly range: import("../../../utils/props").BuildPropReturn<import("../../../utils/props").PropWrapper<[dayjs.Dayjs, dayjs.Dayjs]>, unknown, unknown, unknown, unknown>;
+    readonly date: import("../../../utils/props").BuildPropReturn<import("../../../utils/props").PropWrapper<dayjs.Dayjs>, unknown, true, unknown, unknown>;
+    readonly hideHeader: import("../../../utils/props").BuildPropReturn<BooleanConstructor, unknown, unknown, unknown, unknown>;
+}>> & {
     onPick?: ((value: dayjs.Dayjs) => any) | undefined;
 }, {
     range: [dayjs.Dayjs, dayjs.Dayjs];

package/lib/components/calendar/src/date-table.vue_vue_type_script_lang.js

@@ -10,6 +10,7 @@ require('../../time-picker/index.js');
 var dateTable = require('./date-table.js');
 var dateUtils = require('../../time-picker/src/common/date-utils.js');
 var index = require('../../../hooks/use-locale/index.js');
+var index$1 = require('../../../hooks/use-namespace/index.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -35,6 +36,8 @@ var script = vue.defineComponent({
   emits: dateTable.dateTableEmits,
   setup(props, { emit }) {
     const { t, lang } = index.useLocale();
+    const nsTable = index$1.useNamespace("calendar-table");
+    const nsDay = index$1.useNamespace("calendar-day");
     const now = dayjs__default["default"]().locale(lang.value);
     const firstDayOfWeek = now.$locale().weekStart || 0;
     const isInRange = vue.computed(() => !!props.range && !!props.range.length);
@@ -122,7 +125,9 @@ var script = vue.defineComponent({
       rows,
       getCellClass,
       handlePickDay,
-      getSlotData
+      getSlotData,
+      nsTable,
+      nsDay
     };
   }
 });

package/lib/components/calendar/src/date-table.vue_vue_type_script_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"date-table.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/calendar/src/date-table.vue"],"sourcesContent":["<template>\n  <table\n    :class=\"{\n      'el-calendar-table': true,\n      'is-range': isInRange,\n    }\"\n    cellspacing=\"0\"\n    cellpadding=\"0\"\n  >\n    <thead v-if=\"!hideHeader\">\n      <th v-for=\"day in weekDays\" :key=\"day\">{{ day }}</th>\n    </thead>\n\n    <tbody>\n      <tr\n        v-for=\"(row, index) in rows\"\n        :key=\"index\"\n        :class=\"{\n          'el-calendar-table__row': true,\n          'el-calendar-table__row--hide-border': index === 0 && hideHeader,\n        }\"\n      >\n        <td\n          v-for=\"(cell, key) in row\"\n          :key=\"key\"\n          :class=\"getCellClass(cell)\"\n          @click=\"handlePickDay(cell)\"\n        >\n          <div class=\"el-calendar-day\">\n            <slot name=\"dateCell\" :data=\"getSlotData(cell)\">\n              <span>{{ cell.text }}</span>\n            </slot>\n          </div>\n        </td>\n      </tr>\n    </tbody>\n  </table>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent } from 'vue'\nimport dayjs from 'dayjs'\nimport localeData from 'dayjs/plugin/localeData'\nimport { useLocale } from '@element-plus/hooks'\nimport { rangeArr } from '@element-plus/components/time-picker'\nimport { dateTableProps, dateTableEmits } from './date-table'\nimport type { Dayjs } from 'dayjs'\ndayjs.extend(localeData)\n\ntype CellType = 'next' | 'prev' | 'current'\ninterface Cell {\n  text: number\n  type: CellType\n}\n\nconst WEEK_DAYS = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'] as const\n\nexport const getPrevMonthLastDays = (date: Dayjs, count: number) => {\n  const lastDay = date.subtract(1, 'month').endOf('month').date()\n  return rangeArr(count).map((_, index) => lastDay - (count - index - 1))\n}\n\nexport const getMonthDays = (date: Dayjs) => {\n  const days = date.daysInMonth()\n  return rangeArr(days).map((_, index) => index + 1)\n}\n\nconst toNestedArr = (days: Cell[]) =>\n  rangeArr(days.length / 7).map((index) => {\n    const start = index * 7\n    return days.slice(start, start + 7)\n  })\n\nexport default defineComponent({\n  props: dateTableProps,\n  emits: dateTableEmits,\n\n  setup(props, { emit }) {\n    const { t, lang } = useLocale()\n\n    const now = dayjs().locale(lang.value)\n    // todo better way to get Day.js locale object\n    const firstDayOfWeek: number = (now as any).$locale().weekStart || 0\n\n    const isInRange = computed(() => !!props.range && !!props.range.length)\n\n    const rows = computed(() => {\n      let days: Cell[] = []\n      if (isInRange.value) {\n        const [start, end] = props.range!\n        const currentMonthRange: Cell[] = rangeArr(\n          end.date() - start.date() + 1\n        ).map((index) => ({\n          text: start.date() + index,\n          type: 'current',\n        }))\n\n        let remaining = currentMonthRange.length % 7\n        remaining = remaining === 0 ? 0 : 7 - remaining\n        const nextMonthRange: Cell[] = rangeArr(remaining).map((_, index) => ({\n          text: index + 1,\n          type: 'next',\n        }))\n        days = currentMonthRange.concat(nextMonthRange)\n      } else {\n        const firstDay = props.date.startOf('month').day() || 7\n        const prevMonthDays: Cell[] = getPrevMonthLastDays(\n          props.date,\n          firstDay - firstDayOfWeek\n        ).map((day) => ({\n          text: day,\n          type: 'prev',\n        }))\n        const currentMonthDays: Cell[] = getMonthDays(props.date).map(\n          (day) => ({\n            text: day,\n            type: 'current',\n          })\n        )\n        days = [...prevMonthDays, ...currentMonthDays]\n        const nextMonthDays: Cell[] = rangeArr(42 - days.length).map(\n          (_, index) => ({\n            text: index + 1,\n            type: 'next',\n          })\n        )\n        days = days.concat(nextMonthDays)\n      }\n      return toNestedArr(days)\n    })\n\n    const weekDays = computed(() => {\n      const start = firstDayOfWeek\n      if (start === 0) {\n        return WEEK_DAYS.map((_) => t(`el.datepicker.weeks.${_}`))\n      } else {\n        return WEEK_DAYS.slice(start)\n          .concat(WEEK_DAYS.slice(0, start))\n          .map((_) => t(`el.datepicker.weeks.${_}`))\n      }\n    })\n\n    const getFormattedDate = (day: number, type: CellType): Dayjs => {\n      switch (type) {\n        case 'prev':\n          return props.date.startOf('month').subtract(1, 'month').date(day)\n        case 'next':\n          return props.date.startOf('month').add(1, 'month').date(day)\n        case 'current':\n          return props.date.date(day)\n      }\n    }\n\n    const getCellClass = ({ text, type }: Cell) => {\n      const classes: string[] = [type]\n      if (type === 'current') {\n        const date = getFormattedDate(text, type)\n        if (date.isSame(props.selectedDay, 'day')) {\n          classes.push('is-selected')\n        }\n        if (date.isSame(now, 'day')) {\n          classes.push('is-today')\n        }\n      }\n      return classes\n    }\n\n    const handlePickDay = ({ text, type }: Cell) => {\n      const date = getFormattedDate(text, type)\n      emit('pick', date)\n    }\n\n    const getSlotData = ({ text, type }: Cell) => {\n      const day = getFormattedDate(text, type)\n      return {\n        isSelected: day.isSame(props.selectedDay),\n        type: `${type}-month`,\n        day: day.format('YYYY-MM-DD'),\n        date: day.toDate(),\n      }\n    }\n\n    return {\n      isInRange,\n      weekDays,\n      rows,\n      getCellClass,\n      handlePickDay,\n      getSlotData,\n    }\n  },\n})\n</script>\n"],"names":["dayjs","localeData","rangeArr","defineComponent","useLocale","computed"],"mappings":";;;;;;;;;;;;;;;;;;AA6CAA,yBAAK,OAAO,CAACC,8BAAU,EAAE;AACzB,eAAe,GAAG,MAAM,OAAO,EAAE;AACrB,MAAC;;AAEb,EAAE,OAAOC,kBAAQ,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,QAAQ;AACtC,EAAE;AACU,MAAC;EACX,MAAM,IAAI,GAAG;AACf;;AAEA,MAAM,cAAc,CAAC,SAASA,kBAAQ,KAAK,CAAC,MAAM,IAAI,CAAC,CAAC,GAAG,EAAE,KAAK,KAAK;;AAEvE,EAAE,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,IAAI,CAAC,CAAC;EACpC,CAAC;aACYC,mBAAe,CAAC;AAC/B;;AAEA,EAAE,KAAK,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE;IACnB,MAAM,GAAG,EAAE,IAAI,EAAE,GAAGC;IACpB,MAAM,GAAG,GAAGJ,yBAAK,EAAE,CAAC,MAAM,KAAK,CAAC,MAAM,CAAC;AAC3C;;AAEA,IAAI,MAAM,IAAI,eAAW,OAAO;MAC1B,IAAI,IAAI,GAAG,EAAE,CAAC;MACd,IAAI,SAAS,CAAC;QACZ,MAAM,CAAC,KAAK,EAAE,GAAG,CAAC,GAAG,MAAM;;;AAGnC,UAAU,MAAM,SAAS;SAChB,CAAC,CAAC,CAAC;YACA,SAAS;;QAEb;UACE,MAAM,QAAQ,CAAC;;UAEf,CAAC,CAAC;QACJ,IAAI,GAAG,iBAAiB,CAAC,MAAM,CAAC;OACjC,MAAM;;QAEL,MAAM,aAAa,GAAG,qBAAqB,KAAK,CAAC,IAAI,EAAE,QAAQ,GAAG;;UAEhE,YAAY;UACZ,CAAC,CAAC;cACE;UACJ,IAAI,EAAE,GAAG;UACT,IAAI,EAAE,SAAS;UACf,CAAC,CAAC;QACJ,IAAI,GAAG,CAAC,GAAG;cACL,aAAa;UACjB,IAAI,EAAE,KAAK,GAAG,CAAC;UACf;;QAEF,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;;wBAElB,CAAC,KAAK,CAAC;;UAErB,QAAQ,GAAGK;;UAEX,KAAK,KAAK,CAAC,EAAE;QACf;;QAEA,OAAO,SAAS,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM,CAAC,SAAS,CAAC;;;UAG7C;cACI,IAAI;aACL,MAAM;UACT;QACF,WAAW;UACT,OAAO;aACJ;sBACS,CAAC,IAAI;;;UAGjB,YAAY,GAAG,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK;YACjC,OAAO,GAAG,CAAC,IAAI,EAAE;UACnB,IAAI,KAAK;cACL,IAAI,GAAG;YACT,IAAI,OAAO,CAAC;UACd;;QAEF,QAAQ,CAAC,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE;;SAE5B;;;KAGJ,CAAC;UACI,aAAa,GAAG,CAAC,EAAE,IAAI;MAC3B,MAAM,IAAI;UACN,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;MACnB;UACI,WAAW,GAAG,CAAC,EAAE,IAAI,EAAE;YACrB,GAAG,GAAG,gBAAgB,CAAC,IAAI,EAAE;aAC5B;;;;QAIL,IAAI,EAAE,GAAG,CAAC,MAAM;OACjB,CAAC;;WAEG;eACI;cACD;UACJ;kBACQ;MACZ;;;;;;;;;;"}
+{"version":3,"file":"date-table.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/calendar/src/date-table.vue"],"sourcesContent":["<template>\n  <table\n    :class=\"[nsTable.b(), nsTable.is('range', isInRange)]\"\n    cellspacing=\"0\"\n    cellpadding=\"0\"\n  >\n    <thead v-if=\"!hideHeader\">\n      <th v-for=\"day in weekDays\" :key=\"day\">{{ day }}</th>\n    </thead>\n\n    <tbody>\n      <tr\n        v-for=\"(row, index) in rows\"\n        :key=\"index\"\n        :class=\"{\n          [nsTable.e('row')]: true,\n          [nsTable.em('row', 'hide-border')]: index === 0 && hideHeader,\n        }\"\n      >\n        <td\n          v-for=\"(cell, key) in row\"\n          :key=\"key\"\n          :class=\"getCellClass(cell)\"\n          @click=\"handlePickDay(cell)\"\n        >\n          <div :class=\"nsDay.b()\">\n            <slot name=\"dateCell\" :data=\"getSlotData(cell)\">\n              <span>{{ cell.text }}</span>\n            </slot>\n          </div>\n        </td>\n      </tr>\n    </tbody>\n  </table>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent } from 'vue'\nimport dayjs from 'dayjs'\nimport localeData from 'dayjs/plugin/localeData'\nimport { useLocale, useNamespace } from '@element-plus/hooks'\nimport { rangeArr } from '@element-plus/components/time-picker'\nimport { dateTableProps, dateTableEmits } from './date-table'\nimport type { Dayjs } from 'dayjs'\ndayjs.extend(localeData)\n\ntype CellType = 'next' | 'prev' | 'current'\ninterface Cell {\n  text: number\n  type: CellType\n}\n\nconst WEEK_DAYS = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'] as const\n\nexport const getPrevMonthLastDays = (date: Dayjs, count: number) => {\n  const lastDay = date.subtract(1, 'month').endOf('month').date()\n  return rangeArr(count).map((_, index) => lastDay - (count - index - 1))\n}\n\nexport const getMonthDays = (date: Dayjs) => {\n  const days = date.daysInMonth()\n  return rangeArr(days).map((_, index) => index + 1)\n}\n\nconst toNestedArr = (days: Cell[]) =>\n  rangeArr(days.length / 7).map((index) => {\n    const start = index * 7\n    return days.slice(start, start + 7)\n  })\n\nexport default defineComponent({\n  props: dateTableProps,\n  emits: dateTableEmits,\n\n  setup(props, { emit }) {\n    const { t, lang } = useLocale()\n    const nsTable = useNamespace('calendar-table')\n    const nsDay = useNamespace('calendar-day')\n\n    const now = dayjs().locale(lang.value)\n    // todo better way to get Day.js locale object\n    const firstDayOfWeek: number = (now as any).$locale().weekStart || 0\n\n    const isInRange = computed(() => !!props.range && !!props.range.length)\n\n    const rows = computed(() => {\n      let days: Cell[] = []\n      if (isInRange.value) {\n        const [start, end] = props.range!\n        const currentMonthRange: Cell[] = rangeArr(\n          end.date() - start.date() + 1\n        ).map((index) => ({\n          text: start.date() + index,\n          type: 'current',\n        }))\n\n        let remaining = currentMonthRange.length % 7\n        remaining = remaining === 0 ? 0 : 7 - remaining\n        const nextMonthRange: Cell[] = rangeArr(remaining).map((_, index) => ({\n          text: index + 1,\n          type: 'next',\n        }))\n        days = currentMonthRange.concat(nextMonthRange)\n      } else {\n        const firstDay = props.date.startOf('month').day() || 7\n        const prevMonthDays: Cell[] = getPrevMonthLastDays(\n          props.date,\n          firstDay - firstDayOfWeek\n        ).map((day) => ({\n          text: day,\n          type: 'prev',\n        }))\n        const currentMonthDays: Cell[] = getMonthDays(props.date).map(\n          (day) => ({\n            text: day,\n            type: 'current',\n          })\n        )\n        days = [...prevMonthDays, ...currentMonthDays]\n        const nextMonthDays: Cell[] = rangeArr(42 - days.length).map(\n          (_, index) => ({\n            text: index + 1,\n            type: 'next',\n          })\n        )\n        days = days.concat(nextMonthDays)\n      }\n      return toNestedArr(days)\n    })\n\n    const weekDays = computed(() => {\n      const start = firstDayOfWeek\n      if (start === 0) {\n        return WEEK_DAYS.map((_) => t(`el.datepicker.weeks.${_}`))\n      } else {\n        return WEEK_DAYS.slice(start)\n          .concat(WEEK_DAYS.slice(0, start))\n          .map((_) => t(`el.datepicker.weeks.${_}`))\n      }\n    })\n\n    const getFormattedDate = (day: number, type: CellType): Dayjs => {\n      switch (type) {\n        case 'prev':\n          return props.date.startOf('month').subtract(1, 'month').date(day)\n        case 'next':\n          return props.date.startOf('month').add(1, 'month').date(day)\n        case 'current':\n          return props.date.date(day)\n      }\n    }\n\n    const getCellClass = ({ text, type }: Cell) => {\n      const classes: string[] = [type]\n      if (type === 'current') {\n        const date = getFormattedDate(text, type)\n        if (date.isSame(props.selectedDay, 'day')) {\n          classes.push('is-selected')\n        }\n        if (date.isSame(now, 'day')) {\n          classes.push('is-today')\n        }\n      }\n      return classes\n    }\n\n    const handlePickDay = ({ text, type }: Cell) => {\n      const date = getFormattedDate(text, type)\n      emit('pick', date)\n    }\n\n    const getSlotData = ({ text, type }: Cell) => {\n      const day = getFormattedDate(text, type)\n      return {\n        isSelected: day.isSame(props.selectedDay),\n        type: `${type}-month`,\n        day: day.format('YYYY-MM-DD'),\n        date: day.toDate(),\n      }\n    }\n\n    return {\n      isInRange,\n      weekDays,\n      rows,\n      getCellClass,\n      handlePickDay,\n      getSlotData,\n\n      nsTable,\n      nsDay,\n    }\n  },\n})\n</script>\n"],"names":["dayjs","localeData","rangeArr","defineComponent","useLocale","useNamespace","computed"],"mappings":";;;;;;;;;;;;;;;;;;;AA0CAA,yBAAK,OAAO,CAACC,8BAAU,EAAE;AACzB,eAAe,GAAG,MAAM,OAAO,EAAE;AACrB,MAAC;;AAEb,EAAE,OAAOC,kBAAQ,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,QAAQ;AACtC,EAAE;AACU,MAAC;EACX,MAAM,IAAI,GAAG;AACf;;AAEA,MAAM,cAAc,CAAC,SAASA,kBAAQ,KAAK,CAAC,MAAM,IAAI,CAAC,CAAC,GAAG,EAAE,KAAK,KAAK;;AAEvE,EAAE,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,IAAI,CAAC,CAAC;EACpC,CAAC;aACYC,mBAAe,CAAC;AAC/B;;AAEA,EAAE,KAAK,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE;IACnB,MAAM,GAAG,EAAE,IAAI,EAAE,GAAGC;IACpB,MAAM,OAAO,GAAGC,oBAAY,CAAC,iBAAiB,CAAC;AACnD;;AAEA,IAAI,MAAM,cAAc,GAAG,GAAG,CAAC;IAC3B,MAAM,SAAS,eAAW,CAAC,MAAM,CAAC;IAClC,MAAM,IAAI,gBAAY;MACpB,QAAQ,GAAG,EAAE,CAAC;;;AAGpB,QAAQ,uBAAuB;UACrB,IAAI,EAAE,KAAK,CAAC;UACZ,IAAI,EAAE;;QAER,IAAI;QACJ,SAAS,GAAG,SAAS,KAAK;QAC1B,MAAM,cAAc,GAAGH,kBAAQ,CAAC,SAAS;UACvC,IAAI,EAAE,KAAK,GAAG,CAAC;;UAEf,CAAC,CAAC;QACJ,IAAI,GAAG,iBAAiB,CAAC,MAAM,CAAC;OACjC,MAAM;;QAEL,MAAM,aAAa,GAAG,qBAAqB,KAAK,CAAC,IAAI,EAAE,QAAQ,GAAG;;UAEhE,YAAY;UACZ,CAAC,CAAC;cACE;UACJ,IAAI,EAAE,GAAG;UACT,IAAI,EAAE,SAAS;UACf,CAAC,CAAC;QACJ,IAAI,GAAG,CAAC,GAAG;cACL,aAAa;UACjB,IAAI,EAAE,KAAK,GAAG,CAAC;UACf;;QAEF,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;;wBAElB,CAAC,KAAK,CAAC;;UAErB,QAAQ,GAAGI;;UAEX,KAAK,KAAK,CAAC,EAAE;QACf;;QAEA,OAAO,SAAS,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM,CAAC,SAAS,CAAC;;;UAG7C;cACI,IAAI;aACL,MAAM;UACT;QACF,WAAW;UACT,OAAO;aACJ;sBACS,CAAC,IAAI;;;UAGjB,YAAY,GAAG,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK;YACjC,OAAO,GAAG,CAAC,IAAI,EAAE;UACnB,IAAI,KAAK;cACL,IAAI,GAAG;YACT,IAAI,OAAO,CAAC;UACd;;QAEF,QAAQ,CAAC,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE;;SAE5B;;;KAGJ,CAAC;UACI,aAAa,GAAG,CAAC,EAAE,IAAI;MAC3B,MAAM,IAAI;UACN,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;MACnB;UACI,WAAW,GAAG,CAAC,EAAE,IAAI,EAAE;YACrB,GAAG,GAAG,gBAAgB,CAAC,IAAI,EAAE;aAC5B;;;;QAIL,IAAI,EAAE,GAAG,CAAC,MAAM;OACjB,CAAC;;WAEG;eACI;cACD;UACJ;kBACQ;MACZ;;;MAGA,KAAK;MACL;;;;;;;;"}

package/lib/components/calendar/src/date-table.vue_vue_type_template_id_297fdb36_lang.js

@@ -6,13 +6,9 @@ var vue = require('vue');
 
 const _hoisted_1 = { key: 0 };
 const _hoisted_2 = ["onClick"];
-const _hoisted_3 = { class: "el-calendar-day" };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createElementBlock("table", {
-    class: vue.normalizeClass({
-      "el-calendar-table": true,
-      "is-range": _ctx.isInRange
-    }),
+    class: vue.normalizeClass([_ctx.nsTable.b(), _ctx.nsTable.is("range", _ctx.isInRange)]),
     cellspacing: "0",
     cellpadding: "0"
   }, [
@@ -26,8 +22,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         return vue.openBlock(), vue.createElementBlock("tr", {
           key: index,
           class: vue.normalizeClass({
-            "el-calendar-table__row": true,
-            "el-calendar-table__row--hide-border": index === 0 && _ctx.hideHeader
+            [_ctx.nsTable.e("row")]: true,
+            [_ctx.nsTable.em("row", "hide-border")]: index === 0 && _ctx.hideHeader
           })
         }, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(row, (cell, key) => {
@@ -36,13 +32,15 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               class: vue.normalizeClass(_ctx.getCellClass(cell)),
               onClick: ($event) => _ctx.handlePickDay(cell)
             }, [
-              vue.createElementVNode("div", _hoisted_3, [
+              vue.createElementVNode("div", {
+                class: vue.normalizeClass(_ctx.nsDay.b())
+              }, [
                 vue.renderSlot(_ctx.$slots, "dateCell", {
                   data: _ctx.getSlotData(cell)
                 }, () => [
                   vue.createElementVNode("span", null, vue.toDisplayString(cell.text), 1)
                 ])
-              ])
+              ], 2)
             ], 10, _hoisted_2);
           }), 128))
         ], 2);

package/lib/components/calendar/src/date-table.vue_vue_type_template_id_297fdb36_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"date-table.vue_vue_type_template_id_297fdb36_lang.js","sources":["../../../../../../packages/components/calendar/src/date-table.vue?vue&type=template&id=297fdb36&lang.js"],"sourcesContent":["<template>\n  <table\n    :class=\"{\n      'el-calendar-table': true,\n      'is-range': isInRange,\n    }\"\n    cellspacing=\"0\"\n    cellpadding=\"0\"\n  >\n    <thead v-if=\"!hideHeader\">\n      <th v-for=\"day in weekDays\" :key=\"day\">{{ day }}</th>\n    </thead>\n\n    <tbody>\n      <tr\n        v-for=\"(row, index) in rows\"\n        :key=\"index\"\n        :class=\"{\n          'el-calendar-table__row': true,\n          'el-calendar-table__row--hide-border': index === 0 && hideHeader,\n        }\"\n      >\n        <td\n          v-for=\"(cell, key) in row\"\n          :key=\"key\"\n          :class=\"getCellClass(cell)\"\n          @click=\"handlePickDay(cell)\"\n        >\n          <div class=\"el-calendar-day\">\n            <slot name=\"dateCell\" :data=\"getSlotData(cell)\">\n              <span>{{ cell.text }}</span>\n            </slot>\n          </div>\n        </td>\n      </tr>\n    </tbody>\n  </table>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent } from 'vue'\nimport dayjs from 'dayjs'\nimport localeData from 'dayjs/plugin/localeData'\nimport { useLocale } from '@element-plus/hooks'\nimport { rangeArr } from '@element-plus/components/time-picker'\nimport { dateTableProps, dateTableEmits } from './date-table'\nimport type { Dayjs } from 'dayjs'\ndayjs.extend(localeData)\n\ntype CellType = 'next' | 'prev' | 'current'\ninterface Cell {\n  text: number\n  type: CellType\n}\n\nconst WEEK_DAYS = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'] as const\n\nexport const getPrevMonthLastDays = (date: Dayjs, count: number) => {\n  const lastDay = date.subtract(1, 'month').endOf('month').date()\n  return rangeArr(count).map((_, index) => lastDay - (count - index - 1))\n}\n\nexport const getMonthDays = (date: Dayjs) => {\n  const days = date.daysInMonth()\n  return rangeArr(days).map((_, index) => index + 1)\n}\n\nconst toNestedArr = (days: Cell[]) =>\n  rangeArr(days.length / 7).map((index) => {\n    const start = index * 7\n    return days.slice(start, start + 7)\n  })\n\nexport default defineComponent({\n  props: dateTableProps,\n  emits: dateTableEmits,\n\n  setup(props, { emit }) {\n    const { t, lang } = useLocale()\n\n    const now = dayjs().locale(lang.value)\n    // todo better way to get Day.js locale object\n    const firstDayOfWeek: number = (now as any).$locale().weekStart || 0\n\n    const isInRange = computed(() => !!props.range && !!props.range.length)\n\n    const rows = computed(() => {\n      let days: Cell[] = []\n      if (isInRange.value) {\n        const [start, end] = props.range!\n        const currentMonthRange: Cell[] = rangeArr(\n          end.date() - start.date() + 1\n        ).map((index) => ({\n          text: start.date() + index,\n          type: 'current',\n        }))\n\n        let remaining = currentMonthRange.length % 7\n        remaining = remaining === 0 ? 0 : 7 - remaining\n        const nextMonthRange: Cell[] = rangeArr(remaining).map((_, index) => ({\n          text: index + 1,\n          type: 'next',\n        }))\n        days = currentMonthRange.concat(nextMonthRange)\n      } else {\n        const firstDay = props.date.startOf('month').day() || 7\n        const prevMonthDays: Cell[] = getPrevMonthLastDays(\n          props.date,\n          firstDay - firstDayOfWeek\n        ).map((day) => ({\n          text: day,\n          type: 'prev',\n        }))\n        const currentMonthDays: Cell[] = getMonthDays(props.date).map(\n          (day) => ({\n            text: day,\n            type: 'current',\n          })\n        )\n        days = [...prevMonthDays, ...currentMonthDays]\n        const nextMonthDays: Cell[] = rangeArr(42 - days.length).map(\n          (_, index) => ({\n            text: index + 1,\n            type: 'next',\n          })\n        )\n        days = days.concat(nextMonthDays)\n      }\n      return toNestedArr(days)\n    })\n\n    const weekDays = computed(() => {\n      const start = firstDayOfWeek\n      if (start === 0) {\n        return WEEK_DAYS.map((_) => t(`el.datepicker.weeks.${_}`))\n      } else {\n        return WEEK_DAYS.slice(start)\n          .concat(WEEK_DAYS.slice(0, start))\n          .map((_) => t(`el.datepicker.weeks.${_}`))\n      }\n    })\n\n    const getFormattedDate = (day: number, type: CellType): Dayjs => {\n      switch (type) {\n        case 'prev':\n          return props.date.startOf('month').subtract(1, 'month').date(day)\n        case 'next':\n          return props.date.startOf('month').add(1, 'month').date(day)\n        case 'current':\n          return props.date.date(day)\n      }\n    }\n\n    const getCellClass = ({ text, type }: Cell) => {\n      const classes: string[] = [type]\n      if (type === 'current') {\n        const date = getFormattedDate(text, type)\n        if (date.isSame(props.selectedDay, 'day')) {\n          classes.push('is-selected')\n        }\n        if (date.isSame(now, 'day')) {\n          classes.push('is-today')\n        }\n      }\n      return classes\n    }\n\n    const handlePickDay = ({ text, type }: Cell) => {\n      const date = getFormattedDate(text, type)\n      emit('pick', date)\n    }\n\n    const getSlotData = ({ text, type }: Cell) => {\n      const day = getFormattedDate(text, type)\n      return {\n        isSelected: day.isSame(props.selectedDay),\n        type: `${type}-month`,\n        day: day.format('YYYY-MM-DD'),\n        date: day.toDate(),\n      }\n    }\n\n    return {\n      isInRange,\n      weekDays,\n      rows,\n      getCellClass,\n      handlePickDay,\n      getSlotData,\n    }\n  },\n})\n</script>\n"],"names":["_createElementVNode"],"mappings":";;;;;;;;;sCA4BsC;;;;;;;;;IArBlC;;;;gCAGE;;;;;;;;;;;;;;;;cAcKA;;;;;;;mBAKC;kBACE;;;;;;;;;"}
+{"version":3,"file":"date-table.vue_vue_type_template_id_297fdb36_lang.js","sources":["../../../../../../packages/components/calendar/src/date-table.vue?vue&type=template&id=297fdb36&lang.js"],"sourcesContent":["<template>\n  <table\n    :class=\"[nsTable.b(), nsTable.is('range', isInRange)]\"\n    cellspacing=\"0\"\n    cellpadding=\"0\"\n  >\n    <thead v-if=\"!hideHeader\">\n      <th v-for=\"day in weekDays\" :key=\"day\">{{ day }}</th>\n    </thead>\n\n    <tbody>\n      <tr\n        v-for=\"(row, index) in rows\"\n        :key=\"index\"\n        :class=\"{\n          [nsTable.e('row')]: true,\n          [nsTable.em('row', 'hide-border')]: index === 0 && hideHeader,\n        }\"\n      >\n        <td\n          v-for=\"(cell, key) in row\"\n          :key=\"key\"\n          :class=\"getCellClass(cell)\"\n          @click=\"handlePickDay(cell)\"\n        >\n          <div :class=\"nsDay.b()\">\n            <slot name=\"dateCell\" :data=\"getSlotData(cell)\">\n              <span>{{ cell.text }}</span>\n            </slot>\n          </div>\n        </td>\n      </tr>\n    </tbody>\n  </table>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent } from 'vue'\nimport dayjs from 'dayjs'\nimport localeData from 'dayjs/plugin/localeData'\nimport { useLocale, useNamespace } from '@element-plus/hooks'\nimport { rangeArr } from '@element-plus/components/time-picker'\nimport { dateTableProps, dateTableEmits } from './date-table'\nimport type { Dayjs } from 'dayjs'\ndayjs.extend(localeData)\n\ntype CellType = 'next' | 'prev' | 'current'\ninterface Cell {\n  text: number\n  type: CellType\n}\n\nconst WEEK_DAYS = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'] as const\n\nexport const getPrevMonthLastDays = (date: Dayjs, count: number) => {\n  const lastDay = date.subtract(1, 'month').endOf('month').date()\n  return rangeArr(count).map((_, index) => lastDay - (count - index - 1))\n}\n\nexport const getMonthDays = (date: Dayjs) => {\n  const days = date.daysInMonth()\n  return rangeArr(days).map((_, index) => index + 1)\n}\n\nconst toNestedArr = (days: Cell[]) =>\n  rangeArr(days.length / 7).map((index) => {\n    const start = index * 7\n    return days.slice(start, start + 7)\n  })\n\nexport default defineComponent({\n  props: dateTableProps,\n  emits: dateTableEmits,\n\n  setup(props, { emit }) {\n    const { t, lang } = useLocale()\n    const nsTable = useNamespace('calendar-table')\n    const nsDay = useNamespace('calendar-day')\n\n    const now = dayjs().locale(lang.value)\n    // todo better way to get Day.js locale object\n    const firstDayOfWeek: number = (now as any).$locale().weekStart || 0\n\n    const isInRange = computed(() => !!props.range && !!props.range.length)\n\n    const rows = computed(() => {\n      let days: Cell[] = []\n      if (isInRange.value) {\n        const [start, end] = props.range!\n        const currentMonthRange: Cell[] = rangeArr(\n          end.date() - start.date() + 1\n        ).map((index) => ({\n          text: start.date() + index,\n          type: 'current',\n        }))\n\n        let remaining = currentMonthRange.length % 7\n        remaining = remaining === 0 ? 0 : 7 - remaining\n        const nextMonthRange: Cell[] = rangeArr(remaining).map((_, index) => ({\n          text: index + 1,\n          type: 'next',\n        }))\n        days = currentMonthRange.concat(nextMonthRange)\n      } else {\n        const firstDay = props.date.startOf('month').day() || 7\n        const prevMonthDays: Cell[] = getPrevMonthLastDays(\n          props.date,\n          firstDay - firstDayOfWeek\n        ).map((day) => ({\n          text: day,\n          type: 'prev',\n        }))\n        const currentMonthDays: Cell[] = getMonthDays(props.date).map(\n          (day) => ({\n            text: day,\n            type: 'current',\n          })\n        )\n        days = [...prevMonthDays, ...currentMonthDays]\n        const nextMonthDays: Cell[] = rangeArr(42 - days.length).map(\n          (_, index) => ({\n            text: index + 1,\n            type: 'next',\n          })\n        )\n        days = days.concat(nextMonthDays)\n      }\n      return toNestedArr(days)\n    })\n\n    const weekDays = computed(() => {\n      const start = firstDayOfWeek\n      if (start === 0) {\n        return WEEK_DAYS.map((_) => t(`el.datepicker.weeks.${_}`))\n      } else {\n        return WEEK_DAYS.slice(start)\n          .concat(WEEK_DAYS.slice(0, start))\n          .map((_) => t(`el.datepicker.weeks.${_}`))\n      }\n    })\n\n    const getFormattedDate = (day: number, type: CellType): Dayjs => {\n      switch (type) {\n        case 'prev':\n          return props.date.startOf('month').subtract(1, 'month').date(day)\n        case 'next':\n          return props.date.startOf('month').add(1, 'month').date(day)\n        case 'current':\n          return props.date.date(day)\n      }\n    }\n\n    const getCellClass = ({ text, type }: Cell) => {\n      const classes: string[] = [type]\n      if (type === 'current') {\n        const date = getFormattedDate(text, type)\n        if (date.isSame(props.selectedDay, 'day')) {\n          classes.push('is-selected')\n        }\n        if (date.isSame(now, 'day')) {\n          classes.push('is-today')\n        }\n      }\n      return classes\n    }\n\n    const handlePickDay = ({ text, type }: Cell) => {\n      const date = getFormattedDate(text, type)\n      emit('pick', date)\n    }\n\n    const getSlotData = ({ text, type }: Cell) => {\n      const day = getFormattedDate(text, type)\n      return {\n        isSelected: day.isSame(props.selectedDay),\n        type: `${type}-month`,\n        day: day.format('YYYY-MM-DD'),\n        date: day.toDate(),\n      }\n    }\n\n    return {\n      isInRange,\n      weekDays,\n      rows,\n      getCellClass,\n      handlePickDay,\n      getSlotData,\n\n      nsTable,\n      nsDay,\n    }\n  },\n})\n</script>\n"],"names":["_createElementVNode"],"mappings":";;;;;;;;;;;;IAEK;;IAED;;;;gCAGE;;;;;;yBAIA;;;;;;;;;;cAUKA;yDACmB;;;;;;;kBAIK;mBAAvB;kBACE;;;;;;;;;"}

package/lib/components/card/index.d.ts

@@ -1,16 +1,24 @@
 export declare const ElCard: import("../../utils/types").SFCWithInstall<import("vue").DefineComponent<{
     readonly header: import("../../utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
     readonly bodyStyle: import("../../utils/props").BuildPropReturn<import("../../utils/props").PropWrapper<import("../../utils/types").StyleValue>, "", unknown, unknown, unknown>;
-    readonly shadow: import("../../utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
-}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    readonly header?: unknown;
-    readonly bodyStyle?: unknown;
-    readonly shadow?: unknown;
-} & {
-    header: string;
-    bodyStyle: import("../../utils/types").StyleValue;
-    shadow: string;
-} & {}>, {
+    readonly shadow: import("../../utils/props").BuildPropReturn<StringConstructor, "always", unknown, unknown, unknown>;
+}, {
+    ns: {
+        namespace: import("vue").ComputedRef<string>;
+        b: (blockSuffix?: string) => string;
+        e: (element?: string | undefined) => string;
+        m: (modifier?: string | undefined) => string;
+        be: (blockSuffix?: string | undefined, element?: string | undefined) => string;
+        em: (element?: string | undefined, modifier?: string | undefined) => string;
+        bm: (blockSuffix?: string | undefined, modifier?: string | undefined) => string;
+        bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
+        is: (name: string, state?: boolean) => string;
+    };
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly header: import("../../utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
+    readonly bodyStyle: import("../../utils/props").BuildPropReturn<import("../../utils/props").PropWrapper<import("../../utils/types").StyleValue>, "", unknown, unknown, unknown>;
+    readonly shadow: import("../../utils/props").BuildPropReturn<StringConstructor, "always", unknown, unknown, unknown>;
+}>>, {
     header: string;
     bodyStyle: import("../../utils/types").StyleValue;
     shadow: string;

package/lib/components/card/src/card.d.ts

@@ -1,8 +1,10 @@
+import type Card from './card.vue';
 import type { ExtractPropTypes } from 'vue';
 import type { StyleValue } from 'element-plus/es/utils/types';
 export declare const cardProps: {
     readonly header: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
     readonly bodyStyle: import("element-plus/es/utils/props").BuildPropReturn<import("element-plus/es/utils/props").PropWrapper<StyleValue>, "", unknown, unknown, unknown>;
-    readonly shadow: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
+    readonly shadow: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, "always", unknown, unknown, unknown>;
 };
 export declare type CardProps = ExtractPropTypes<typeof cardProps>;
+export declare type CardInstance = InstanceType<typeof Card>;

package/lib/components/card/src/card.js

@@ -15,7 +15,7 @@ const cardProps = props.buildProps({
   },
   shadow: {
     type: String,
-    default: ""
+    default: "always"
   }
 });
 

package/lib/components/card/src/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","sources":["../../../../../../packages/components/card/src/card.ts"],"sourcesContent":["import { buildProps, definePropType } from '@element-plus/utils/props'\nimport type { ExtractPropTypes } from 'vue'\nimport type { StyleValue } from '@element-plus/utils/types'\n\nexport const cardProps = buildProps({\n  header: {\n    type: String,\n    default: '',\n  },\n  bodyStyle: {\n    type: definePropType<StyleValue>([String, Object, Array]),\n    default: '',\n  },\n  shadow: {\n    type: String,\n    default: '',\n  },\n} as const)\nexport type CardProps = ExtractPropTypes<typeof cardProps>\n"],"names":["buildProps","definePropType"],"mappings":";;;;;;AACY,MAAC,SAAS,GAAGA,gBAAU,CAAC;AACpC,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAEC,oBAAc,CAAC,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC;AACjD,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,CAAC;;;;"}
+{"version":3,"file":"card.js","sources":["../../../../../../packages/components/card/src/card.ts"],"sourcesContent":["import { buildProps, definePropType } from '@element-plus/utils/props'\nimport type Card from './card.vue'\nimport type { ExtractPropTypes } from 'vue'\nimport type { StyleValue } from '@element-plus/utils/types'\n\nexport const cardProps = buildProps({\n  header: {\n    type: String,\n    default: '',\n  },\n  bodyStyle: {\n    type: definePropType<StyleValue>([String, Object, Array]),\n    default: '',\n  },\n  shadow: {\n    type: String,\n    default: 'always',\n  },\n} as const)\nexport type CardProps = ExtractPropTypes<typeof cardProps>\nexport type CardInstance = InstanceType<typeof Card>\n"],"names":["buildProps","definePropType"],"mappings":";;;;;;AACY,MAAC,SAAS,GAAGA,gBAAU,CAAC;AACpC,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAEC,oBAAc,CAAC,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC;AACjD,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,QAAQ;AACrB,GAAG;AACH,CAAC;;;;"}

package/lib/components/card/src/card.vue.d.ts

@@ -1,16 +1,24 @@
 declare const _default: import("vue").DefineComponent<{
     readonly header: import("../../../utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
     readonly bodyStyle: import("../../../utils/props").BuildPropReturn<import("../../../utils/props").PropWrapper<import("../../../utils/types").StyleValue>, "", unknown, unknown, unknown>;
-    readonly shadow: import("../../../utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
-}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    readonly header?: unknown;
-    readonly bodyStyle?: unknown;
-    readonly shadow?: unknown;
-} & {
-    header: string;
-    bodyStyle: import("../../../utils/types").StyleValue;
-    shadow: string;
-} & {}>, {
+    readonly shadow: import("../../../utils/props").BuildPropReturn<StringConstructor, "always", unknown, unknown, unknown>;
+}, {
+    ns: {
+        namespace: import("vue").ComputedRef<string>;
+        b: (blockSuffix?: string) => string;
+        e: (element?: string | undefined) => string;
+        m: (modifier?: string | undefined) => string;
+        be: (blockSuffix?: string | undefined, element?: string | undefined) => string;
+        em: (element?: string | undefined, modifier?: string | undefined) => string;
+        bm: (blockSuffix?: string | undefined, modifier?: string | undefined) => string;
+        bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
+        is: (name: string, state?: boolean) => string;
+    };
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly header: import("../../../utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
+    readonly bodyStyle: import("../../../utils/props").BuildPropReturn<import("../../../utils/props").PropWrapper<import("../../../utils/types").StyleValue>, "", unknown, unknown, unknown>;
+    readonly shadow: import("../../../utils/props").BuildPropReturn<StringConstructor, "always", unknown, unknown, unknown>;
+}>>, {
     header: string;
     bodyStyle: import("../../../utils/types").StyleValue;
     shadow: string;

package/lib/components/card/src/card.vue_vue_type_script_lang.js

@@ -3,11 +3,19 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var vue = require('vue');
+require('../../../hooks/index.js');
 var card = require('./card.js');
+var index = require('../../../hooks/use-namespace/index.js');
 
 var script = vue.defineComponent({
   name: "ElCard",
-  props: card.cardProps
+  props: card.cardProps,
+  setup() {
+    const ns = index.useNamespace("card");
+    return {
+      ns
+    };
+  }
 });
 
 exports["default"] = script;

package/lib/components/card/src/card.vue_vue_type_script_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/card/src/card.vue"],"sourcesContent":["<template>\n  <div\n    class=\"el-card\"\n    :class=\"shadow ? 'is-' + shadow + '-shadow' : 'is-always-shadow'\"\n  >\n    <div v-if=\"$slots.header || header\" class=\"el-card__header\">\n      <slot name=\"header\">{{ header }}</slot>\n    </div>\n    <div class=\"el-card__body\" :style=\"bodyStyle\">\n      <slot></slot>\n    </div>\n  </div>\n</template>\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { cardProps } from './card'\n\nexport default defineComponent({\n  name: 'ElCard',\n  props: cardProps,\n})\n</script>\n"],"names":["defineComponent","cardProps"],"mappings":";;;;;;;AAeA,aAAeA,mBAAe,CAAC;;AAE/B,EAAE,KAAK,EAAEC,cAAS;EAChB;;;;"}
+{"version":3,"file":"card.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/card/src/card.vue"],"sourcesContent":["<template>\n  <div :class=\"[ns.b(), ns.is(`${shadow}-shadow`)]\">\n    <div v-if=\"$slots.header || header\" :class=\"ns.e('header')\">\n      <slot name=\"header\">{{ header }}</slot>\n    </div>\n    <div :class=\"ns.e('body')\" :style=\"bodyStyle\">\n      <slot></slot>\n    </div>\n  </div>\n</template>\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport { cardProps } from './card'\n\nexport default defineComponent({\n  name: 'ElCard',\n  props: cardProps,\n  setup() {\n    const ns = useNamespace('card')\n\n    return {\n      ns,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","cardProps","useNamespace"],"mappings":";;;;;;;;;AAaA,aAAeA,mBAAe,CAAC;;AAE/B,EAAE,KAAK,EAAEC,cAAS;EAChB,QAAQ;IACN,MAAM,EAAE,GAAGC;IACX;MACE,EAAE;;;;;;;"}

package/lib/components/card/src/card.vue_vue_type_template_id_7a6bdf05_lang.js

@@ -4,25 +4,24 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var vue = require('vue');
 
-const _hoisted_1 = {
-  key: 0,
-  class: "el-card__header"
-};
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createElementBlock("div", {
-    class: vue.normalizeClass(["el-card", _ctx.shadow ? "is-" + _ctx.shadow + "-shadow" : "is-always-shadow"])
+    class: vue.normalizeClass([_ctx.ns.b(), _ctx.ns.is(`${_ctx.shadow}-shadow`)])
   }, [
-    _ctx.$slots.header || _ctx.header ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+    _ctx.$slots.header || _ctx.header ? (vue.openBlock(), vue.createElementBlock("div", {
+      key: 0,
+      class: vue.normalizeClass(_ctx.ns.e("header"))
+    }, [
       vue.renderSlot(_ctx.$slots, "header", {}, () => [
         vue.createTextVNode(vue.toDisplayString(_ctx.header), 1)
       ])
-    ])) : vue.createCommentVNode("v-if", true),
+    ], 2)) : vue.createCommentVNode("v-if", true),
     vue.createElementVNode("div", {
-      class: "el-card__body",
+      class: vue.normalizeClass(_ctx.ns.e("body")),
       style: vue.normalizeStyle(_ctx.bodyStyle)
     }, [
       vue.renderSlot(_ctx.$slots, "default")
-    ], 4)
+    ], 6)
   ], 2);
 }
 

package/lib/components/card/src/card.vue_vue_type_template_id_7a6bdf05_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.vue_vue_type_template_id_7a6bdf05_lang.js","sources":["../../../../../../packages/components/card/src/card.vue?vue&type=template&id=7a6bdf05&lang.js"],"sourcesContent":["<template>\n  <div\n    class=\"el-card\"\n    :class=\"shadow ? 'is-' + shadow + '-shadow' : 'is-always-shadow'\"\n  >\n    <div v-if=\"$slots.header || header\" class=\"el-card__header\">\n      <slot name=\"header\">{{ header }}</slot>\n    </div>\n    <div class=\"el-card__body\" :style=\"bodyStyle\">\n      <slot></slot>\n    </div>\n  </div>\n</template>\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { cardProps } from './card'\n\nexport default defineComponent({\n  name: 'ElCard',\n  props: cardProps,\n})\n</script>\n"],"names":["_createCommentVNode"],"mappings":";;;;;;;;;EAKwC;;;;;IAHpC,KAAK;;;;UAIHA;;;;;;;MAE0B;;;;;"}
+{"version":3,"file":"card.vue_vue_type_template_id_7a6bdf05_lang.js","sources":["../../../../../../packages/components/card/src/card.vue?vue&type=template&id=7a6bdf05&lang.js"],"sourcesContent":["<template>\n  <div :class=\"[ns.b(), ns.is(`${shadow}-shadow`)]\">\n    <div v-if=\"$slots.header || header\" :class=\"ns.e('header')\">\n      <slot name=\"header\">{{ header }}</slot>\n    </div>\n    <div :class=\"ns.e('body')\" :style=\"bodyStyle\">\n      <slot></slot>\n    </div>\n  </div>\n</template>\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport { cardProps } from './card'\n\nexport default defineComponent({\n  name: 'ElCard',\n  props: cardProps,\n  setup() {\n    const ns = useNamespace('card')\n\n    return {\n      ns,\n    }\n  },\n})\n</script>\n"],"names":["_renderSlot"],"mappings":";;;;;;;;;;;;;;4CAEmD;;;iDACtB;;;;;MAEnBA,0BAAO;;;;;;;"}

package/lib/components/carousel/index.d.ts

@@ -85,33 +85,57 @@ export declare const ElCarousel: import("../../utils/types").SFCWithInstall<impo
     next: () => void;
     setActiveItem: (index: any) => void;
     root: import("vue").Ref<null>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "change"[], "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    initialIndex?: unknown;
-    height?: unknown;
-    trigger?: unknown;
-    autoplay?: unknown;
-    interval?: unknown;
-    indicatorPosition?: unknown;
-    indicator?: unknown;
-    arrow?: unknown;
-    type?: unknown;
-    loop?: unknown;
-    direction?: unknown;
-    pauseOnHover?: unknown;
-} & {
-    type: string;
-    height: string;
-    direction: string;
-    trigger: string;
-    indicator: boolean;
-    initialIndex: number;
-    autoplay: boolean;
-    interval: number;
-    indicatorPosition: string;
-    arrow: string;
-    loop: boolean;
-    pauseOnHover: boolean;
-} & {}> & {
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "change"[], "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    initialIndex: {
+        type: NumberConstructor;
+        default: number;
+    };
+    height: {
+        type: StringConstructor;
+        default: string;
+    };
+    trigger: {
+        type: StringConstructor;
+        default: string;
+    };
+    autoplay: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    interval: {
+        type: NumberConstructor;
+        default: number;
+    };
+    indicatorPosition: {
+        type: StringConstructor;
+        default: string;
+    };
+    indicator: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    arrow: {
+        type: StringConstructor;
+        default: string;
+    };
+    type: {
+        type: StringConstructor;
+        default: string;
+    };
+    loop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    direction: {
+        type: StringConstructor;
+        default: string;
+        validator(val: string): boolean;
+    };
+    pauseOnHover: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
     onChange?: ((...args: any[]) => any) | undefined;
 }, {
     type: string;

package/lib/components/carousel/src/main.vue.d.ts

@@ -86,33 +86,57 @@ declare const _default: import("vue").DefineComponent<{
     next: () => void;
     setActiveItem: (index: any) => void;
     root: import("vue").Ref<null>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "change"[], "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    initialIndex?: unknown;
-    height?: unknown;
-    trigger?: unknown;
-    autoplay?: unknown;
-    interval?: unknown;
-    indicatorPosition?: unknown;
-    indicator?: unknown;
-    arrow?: unknown;
-    type?: unknown;
-    loop?: unknown;
-    direction?: unknown;
-    pauseOnHover?: unknown;
-} & {
-    type: string;
-    height: string;
-    direction: string;
-    trigger: string;
-    indicator: boolean;
-    initialIndex: number;
-    autoplay: boolean;
-    interval: number;
-    indicatorPosition: string;
-    arrow: string;
-    loop: boolean;
-    pauseOnHover: boolean;
-} & {}> & {
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "change"[], "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    initialIndex: {
+        type: NumberConstructor;
+        default: number;
+    };
+    height: {
+        type: StringConstructor;
+        default: string;
+    };
+    trigger: {
+        type: StringConstructor;
+        default: string;
+    };
+    autoplay: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    interval: {
+        type: NumberConstructor;
+        default: number;
+    };
+    indicatorPosition: {
+        type: StringConstructor;
+        default: string;
+    };
+    indicator: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    arrow: {
+        type: StringConstructor;
+        default: string;
+    };
+    type: {
+        type: StringConstructor;
+        default: string;
+    };
+    loop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    direction: {
+        type: StringConstructor;
+        default: string;
+        validator(val: string): boolean;
+    };
+    pauseOnHover: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
     onChange?: ((...args: any[]) => any) | undefined;
 }, {
     type: string;