element-plus - npm Package Compare versions

Comparing version 1.0.1-alpha.12 to 1.0.1-alpha.13

lib/autocomplete/index.js

 import { defineComponent, ref, computed, watch, onMounted, nextTick, resolveComponent, resolveDirective, openBlock, createBlock, withCtx, withDirectives, createVNode, mergeProps, withKeys, withModifiers, createSlots, renderSlot, Transition, Fragment, renderList, createTextVNode, toDisplayString, vShow } from 'vue';
+import { useAttrs } from '../hooks';
 import debounce from 'lodash/debounce';
@@ -85,2 +86,3 @@ import { ClickOutside } from '../directives';
     setup(props, ctx) {
+        const attrs = useAttrs();
         const suggestions = ref([]);
@@ -223,2 +225,3 @@ const highlightedIndex = ref(-1);
         return {
+            attrs,
             suggestions,
@@ -276,3 +279,4 @@ highlightedIndex,
       withDirectives(createVNode("div", {
-        class: "el-autocomplete",
+        class: ['el-autocomplete', _ctx.$attrs.class],
+        style: _ctx.$attrs.style,
         role: "combobox",
@@ -283,3 +287,3 @@ "aria-haspopup": "listbox",
       }, [
-        createVNode(_component_el_input, mergeProps({ ref: "inputRef" }, _ctx.$attrs, {
+        createVNode(_component_el_input, mergeProps({ ref: "inputRef" }, _ctx.attrs, {
           "model-value": _ctx.modelValue,
@@ -331,3 +335,3 @@ onInput: _ctx.handleInput,
         ]), 1040 /* FULL_PROPS, DYNAMIC_SLOTS */, ["model-value", "onInput", "onChange", "onFocus", "onBlur", "onClear", "onKeydown"])
-      ], 8 /* PROPS */, ["aria-expanded", "aria-owns"]), [
+      ], 14 /* CLASS, STYLE, PROPS */, ["aria-expanded", "aria-owns"]), [
         [_directive_clickoutside, _ctx.close]
@@ -334,0 +338,0 @@ ])

lib/autocomplete/src/index.vue.d.ts

@@ -49,2 +49,3 @@ import { PropType } from 'vue';
 }, {
+    attrs: import("vue").Ref<{}>;
     suggestions: import("vue").Ref<any[]>;
@@ -51,0 +52,0 @@ highlightedIndex: import("vue").Ref<number>;

lib/dropdown/index.js

@@ -1,2 +0,2 @@
-import { inject, computed, ref, defineComponent, getCurrentInstance, watch, provide, onMounted, watchEffect, h, openBlock, createBlock, createCommentVNode, renderSlot, withScopeId, withModifiers } from 'vue';
+import { inject, computed, ref, defineComponent, getCurrentInstance, watch, provide, onMounted, resolveComponent, openBlock, createBlock, withCtx, renderSlot, createVNode, createCommentVNode, withScopeId, resolveDirective, withDirectives, withModifiers } from 'vue';
 import { addClass, on, removeClass } from '../utils/dom';
@@ -7,2 +7,3 @@ import { Button, ButtonGroup } from '../button';
 import { EVENT_CODE } from '../utils/aria';
+import { ClickOutside } from '../directives';
 
@@ -89,3 +90,3 @@ const useDropdown = () => {
             triggerElm.setAttribute('role', 'button');
-            triggerElm.setAttribute('tabindex', _instance.tabindex);
+            triggerElm.setAttribute('tabindex', _instance.props.tabindex);
             addClass(triggerElm, 'el-dropdown-selfdefine');
@@ -105,4 +106,3 @@ }
     function triggerElmFocus() {
-        var _a;
-        (_a = triggerElm === null || triggerElm === void 0 ? void 0 : triggerElm.focus) === null || _a === void 0 ? void 0 : _a.call(triggerElm);
+        triggerElm.focus();
     }
@@ -117,3 +117,3 @@ initDomOperation();
         ElButtonGroup: ButtonGroup,
-        ELPopper: Popper,
+        ElPopper: Popper,
     },
@@ -157,3 +157,3 @@ props: {
     emits: ['visible-change', 'click', 'command'],
-    setup(props, { emit, slots }) {
+    setup(props, { emit }) {
         const _instance = getCurrentInstance();
@@ -183,7 +183,8 @@ const { ELEMENT } = useDropdown();
         const triggerVnode = ref(null);
-        const caretButton = ref(null);
         const triggerElm = computed(() => {
-            var _a, _b;
+            var _a, _b, _c, _d;
+            const _ = (_c = (_b = (_a = triggerVnode.value) === null || _a === void 0 ? void 0 : _a.$refs.triggerRef) === null || _b === void 0 ? void 0 : _b.children[0]) !== null && _c !== void 0 ? _c : {};
             return !props.splitButton
-                ? (_a = triggerVnode.value) === null || _a === void 0 ? void 0 : _a.el : (_b = caretButton.value) === null || _b === void 0 ? void 0 : _b.$el;
+                ? _
+                : (_d = _.children) === null || _d === void 0 ? void 0 : _d[1];
         });
@@ -239,7 +240,2 @@ function handleClick() {
         }
-        Object.assign(_instance, {
-            handleClick,
-            hide,
-            resetTabindex,
-        });
         const dropdownSize = computed(() => props.size || ELEMENT.size);
@@ -280,2 +276,7 @@ function commandHandler(...args) {
             }
+            Object.assign(_instance, {
+                handleClick,
+                hide,
+                resetTabindex,
+            });
         });
@@ -286,44 +287,68 @@ const handlerMainButtonClick = event => {
         };
-        const onVisibleUpdate = (val) => visible.value = val;
-        watchEffect(() => {
-            var _a;
-            triggerVnode.value = !props.splitButton
-                ? (_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots)[0] : h(ButtonGroup, {}, {
-                default: () => ([
-                    h(Button, {
-                        type: props.type,
-                        size: dropdownSize.value,
-                        onClick: handlerMainButtonClick,
-                    }, {
-                        default: () => { var _a; return (_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots)[0]; },
-                    }),
-                    h(Button, {
-                        type: props.type,
-                        size: dropdownSize.value,
-                        ref: caretButton,
-                        class: 'el-dropdown__caret-button',
-                    }, {
-                        default: () => h('i', { class: 'el-dropdown__icon el-icon-arrow-down' }),
-                    }),
-                ]),
-            });
-        });
-        return () => h(Popper, {
-            ref: 'popper',
-            placement: props.placement,
-            effect: props.effect,
-            visible: visible.value,
-            manualMode: true,
-            'onUpdate:visible': onVisibleUpdate,
-            popperClass: 'el-dropdown-popper',
-            trigger: [props.trigger],
-        }, {
-            default: () => { var _a; return (_a = slots.dropdown) === null || _a === void 0 ? void 0 : _a.call(slots); },
-            trigger: () => h('div', {
-                class: 'el-dropdown',
-            }, [triggerVnode.value]),
-        });
+        return {
+            visible,
+            dropdownSize,
+            handlerMainButtonClick,
+            triggerVnode,
+        };
     },
 });
 
+const _hoisted_1 = { class: "el-dropdown" };
+const _hoisted_2 = /*#__PURE__*/createVNode("i", { class: "el-dropdown__icon el-icon-arrow-down" }, null, -1 /* HOISTED */);
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_el_button = resolveComponent("el-button");
+  const _component_el_button_group = resolveComponent("el-button-group");
+  const _component_el_popper = resolveComponent("el-popper");
+
+  return (openBlock(), createBlock(_component_el_popper, {
+    ref: "triggerVnode",
+    visible: _ctx.visible,
+    "onUpdate:visible": _cache[1] || (_cache[1] = $event => (_ctx.visible = $event)),
+    placement: _ctx.placement,
+    effect: _ctx.effect,
+    "manual-mode": true,
+    trigger: [_ctx.trigger],
+    "popper-class": "el-dropdown-popper"
+  }, {
+    default: withCtx(() => [
+      renderSlot(_ctx.$slots, "dropdown")
+    ]),
+    trigger: withCtx(() => [
+      createVNode("div", _hoisted_1, [
+        (!_ctx.splitButton)
+          ? renderSlot(_ctx.$slots, "default", { key: 0 })
+          : (openBlock(), createBlock(_component_el_button_group, { key: 1 }, {
+              default: withCtx(() => [
+                createVNode(_component_el_button, {
+                  size: _ctx.dropdownSize,
+                  type: _ctx.type,
+                  onClick: _ctx.handlerMainButtonClick
+                }, {
+                  default: withCtx(() => [
+                    renderSlot(_ctx.$slots, "default")
+                  ]),
+                  _: 3
+                }, 8 /* PROPS */, ["size", "type", "onClick"]),
+                createVNode(_component_el_button, {
+                  size: _ctx.dropdownSize,
+                  type: _ctx.type,
+                  class: "el-dropdown__caret-button"
+                }, {
+                  default: withCtx(() => [
+                    _hoisted_2
+                  ]),
+                  _: 1
+                }, 8 /* PROPS */, ["size", "type"])
+              ]),
+              _: 1
+            }))
+      ])
+    ]),
+    _: 1
+  }, 8 /* PROPS */, ["visible", "placement", "effect", "trigger"]))
+}
+
+script.render = render;
 script.__file = "packages/dropdown/src/dropdown.vue";
@@ -360,3 +385,3 @@
 
-const render = /*#__PURE__*/_withId(function render(_ctx, _cache, $props, $setup, $data, $options) {
+const render$1 = /*#__PURE__*/_withId(function render(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createBlock("li", {
@@ -381,3 +406,3 @@ class: ["el-dropdown-menu__item", {
 
-script$1.render = render;
+script$1.render = render$1;
 script$1.__scopeId = "data-v-6359102a";
@@ -388,2 +413,5 @@ script$1.__file = "packages/dropdown/src/dropdown-item.vue";
     name: 'ElDropdownMenu',
+    directives: {
+        ClickOutside,
+    },
     setup() {
@@ -413,2 +441,4 @@ const { _elDropdownSize, elDropdown } = useDropdown();
             hide,
+            innerHide: _hide,
+            triggerElm: elDropdown.triggerElm,
         };
@@ -418,4 +448,6 @@ },
 
-function render$1(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createBlock("ul", {
+function render$2(_ctx, _cache, $props, $setup, $data, $options) {
+  const _directive_clickOutside = resolveDirective("clickOutside");
+
+  return withDirectives((openBlock(), createBlock("ul", {
     class: [[_ctx.size && `el-dropdown-menu--${_ctx.size}`], "el-dropdown-menu"],
@@ -426,6 +458,8 @@ onMouseenter: _cache[1] || (_cache[1] = withModifiers((...args) => (_ctx.show(...args)), ["stop"])),
     renderSlot(_ctx.$slots, "default")
-  ], 34 /* CLASS, HYDRATE_EVENTS */))
+  ], 34 /* CLASS, HYDRATE_EVENTS */)), [
+    [_directive_clickOutside, _ctx.innerHide, _ctx.triggerElm]
+  ])
 }
 
-script$2.render = render$1;
+script$2.render = render$2;
 script$2.__file = "packages/dropdown/src/dropdown-menu.vue";
@@ -432,0 +466,0 @@

lib/dropdown/src/dropdown-menu.vue.d.ts

@@ -5,3 +5,5 @@ declare const _default: import("vue").DefineComponent<{}, {
     hide: () => void;
+    innerHide: () => void;
+    triggerElm: import("vue").ComputedRef<HTMLButtonElement>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{} & {}>, {}>;
 export default _default;

lib/dropdown/src/dropdown.vue.d.ts

@@ -1,2 +0,2 @@
-import { VNode } from 'vue';
+import { ComponentPublicInstance } from 'vue';
 declare const _default: import("vue").DefineComponent<{
@@ -37,5 +37,8 @@ trigger: {
     };
-}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("visible-change" | "click" | "command")[], "visible-change" | "click" | "command", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+}, {
+    visible: import("vue").Ref<boolean>;
+    dropdownSize: import("vue").ComputedRef<any>;
+    handlerMainButtonClick: (event: any) => void;
+    triggerVnode: import("vue").Ref<ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("visible-change" | "click" | "command")[], "visible-change" | "click" | "command", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     trigger: string;
@@ -42,0 +45,0 @@ size: string;

lib/locale/index.js

@@ -1,122 +0,2 @@
-var defaultLang = {
-    el: {
-        colorpicker: {
-            confirm: 'OK',
-            clear: 'Clear',
-        },
-        datepicker: {
-            now: 'Now',
-            today: 'Today',
-            cancel: 'Cancel',
-            clear: 'Clear',
-            confirm: 'OK',
-            selectDate: 'Select date',
-            selectTime: 'Select time',
-            startDate: 'Start Date',
-            startTime: 'Start Time',
-            endDate: 'End Date',
-            endTime: 'End Time',
-            prevYear: 'Previous Year',
-            nextYear: 'Next Year',
-            prevMonth: 'Previous Month',
-            nextMonth: 'Next Month',
-            year: '',
-            month1: 'January',
-            month2: 'February',
-            month3: 'March',
-            month4: 'April',
-            month5: 'May',
-            month6: 'June',
-            month7: 'July',
-            month8: 'August',
-            month9: 'September',
-            month10: 'October',
-            month11: 'November',
-            month12: 'December',
-            week: 'week',
-            weeks: {
-                sun: 'Sun',
-                mon: 'Mon',
-                tue: 'Tue',
-                wed: 'Wed',
-                thu: 'Thu',
-                fri: 'Fri',
-                sat: 'Sat',
-            },
-            months: {
-                jan: 'Jan',
-                feb: 'Feb',
-                mar: 'Mar',
-                apr: 'Apr',
-                may: 'May',
-                jun: 'Jun',
-                jul: 'Jul',
-                aug: 'Aug',
-                sep: 'Sep',
-                oct: 'Oct',
-                nov: 'Nov',
-                dec: 'Dec',
-            },
-        },
-        select: {
-            loading: 'Loading',
-            noMatch: 'No matching data',
-            noData: 'No data',
-            placeholder: 'Select',
-        },
-        cascader: {
-            noMatch: 'No matching data',
-            loading: 'Loading',
-            placeholder: 'Select',
-            noData: 'No data',
-        },
-        pagination: {
-            goto: 'Go to',
-            pagesize: '/page',
-            total: 'Total {total}',
-            pageClassifier: '',
-        },
-        messagebox: {
-            title: 'Message',
-            confirm: 'OK',
-            cancel: 'Cancel',
-            error: 'Illegal input',
-        },
-        upload: {
-            deleteTip: 'press delete to remove',
-            delete: 'Delete',
-            preview: 'Preview',
-            continue: 'Continue',
-        },
-        table: {
-            emptyText: 'No Data',
-            confirmFilter: 'Confirm',
-            resetFilter: 'Reset',
-            clearFilter: 'All',
-            sumText: 'Sum',
-        },
-        tree: {
-            emptyText: 'No Data',
-        },
-        transfer: {
-            noMatch: 'No matching data',
-            noData: 'No data',
-            titles: ['List 1', 'List 2'],
-            filterPlaceholder: 'Enter keyword',
-            noCheckedFormat: '{total} items',
-            hasCheckedFormat: '{checked}/{total} checked',
-        },
-        image: {
-            error: 'FAILED',
-        },
-        pageHeader: {
-            title: 'Back',
-        },
-        popconfirm: {
-            confirmButtonText: 'Yes',
-            cancelButtonText: 'No',
-        },
-    },
-};
-
+import defaultLang from './lang/en';
 let lang = defaultLang;
@@ -130,3 +10,3 @@ function template(str, option) {
 }
-const t = (path, option) => {
+export const t = (path, option) => {
     let value;
@@ -146,8 +26,5 @@ const array = path.split('.');
 };
-const use = (l) => {
+export const use = (l) => {
     lang = l || lang;
 };
-var index = { use, t };
-
-export default index;
-export { t, use };
+export default { use, t };

lib/switch/index.js

@@ -1,2 +0,2 @@
-import { defineComponent, inject, ref, watch, computed, onMounted, nextTick, openBlock, createBlock, withModifiers, createVNode, withKeys, createCommentVNode, toDisplayString, withScopeId } from 'vue';
+import { defineComponent, inject, ref, watch, computed, onMounted, nextTick, pushScopeId, popScopeId, openBlock, createBlock, withModifiers, createVNode, withKeys, createCommentVNode, toDisplayString, withScopeId } from 'vue';
 import { elFormKey, elFormItemKey } from '../form/src/token';
@@ -67,2 +67,6 @@
         },
+        loading: {
+            type: Boolean,
+            default: false,
+        },
     },
@@ -105,3 +109,3 @@ emits: ['update:modelValue', 'change', 'input'],
         const switchDisabled = computed(() => {
-            return props.disabled || (elForm || {}).disabled;
+            return props.disabled || props.loading || (elForm || {}).disabled;
         });
@@ -125,2 +129,3 @@ const handleChange = () => {
             coreEl.style.backgroundColor = newColor;
+            coreEl.children[0].style.color = newColor;
         };
@@ -148,2 +153,10 @@ onMounted(() => {
 
+pushScopeId("data-v-6edeec10");
+const _hoisted_1 = { class: "el-switch__action" };
+const _hoisted_2 = {
+  key: 0,
+  class: "el-icon-loading"
+};
+popScopeId();
+
 const render = /*#__PURE__*/_withId(function render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -192,3 +205,9 @@ return (openBlock(), createBlock("div", {
       style: { 'width': _ctx.coreWidth + 'px' }
-    }, null, 4 /* STYLE */),
+    }, [
+      createVNode("div", _hoisted_1, [
+        (_ctx.loading)
+          ? (openBlock(), createBlock("i", _hoisted_2))
+          : createCommentVNode("v-if", true)
+      ])
+    ], 4 /* STYLE */),
     (_ctx.activeIconClass || _ctx.activeText)
@@ -195,0 +214,0 @@ ? (openBlock(), createBlock("span", {

lib/switch/src/index.vue.d.ts

@@ -63,2 +63,6 @@ declare type ValueType = boolean | string | number;
     };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
@@ -88,2 +92,3 @@ input: any;
     id: string;
+    loading: boolean;
 } & {}>, {
@@ -105,3 +110,4 @@ modelValue: ValueType;
     id: string;
+    loading: boolean;
 }>;
 export default _default;

package.json

 {
   "name": "element-plus",
-  "version": "1.0.1-alpha.12",
+  "version": "1.0.1-alpha.13",
   "scripts": {
@@ -9,7 +9,8 @@ "cz": "npx git-cz",
     "bootstrap": "yarn && npx lerna bootstrap",
-    "build": "yarn bootstrap && yarn build:lib && yarn build:theme && yarn build:esm-bundle && yarn build:esm",
+    "build": "yarn bootstrap && yarn build:lib && yarn build:theme && yarn build:esm-bundle && yarn build:esm && yarn build:utils && yarn build:locale",
     "build:lib": "rimraf lib && webpack --config ./build/webpack.config.js",
     "build:esm-bundle": "rollup --config ./build/rollup.config.bundle.js",
     "build:esm": "node ./build/bincomp.js",
-    "build:utils": "cd ./packages/utils && npx tsc && cd ../",
+    "build:utils": "npx tsc -p packages/utils",
+    "build:locale": "npx tsc -p packages/locale",
     "build:theme": "rimraf packages/theme-chalk/lib && gulp build --gulpfile packages/theme-chalk/gulpfile.js && cp-cli packages/theme-chalk/lib lib/theme-chalk && rimraf packages/theme-chalk/lib",
@@ -108,3 +109,7 @@ "lint": "eslint ./packages --ext .vue,.js,.ts",
   "description": "A Component Library for Vue3.0",
-  "repository": "[e-mail]:element-plus/element-plus.git",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/element-plus/element-plus.git"
+  },
+  "homepage": "https://element-plus.org/",
   "license": "MIT",
@@ -111,0 +116,0 @@ "dependencies": {

packages/dropdown/src/useDropdown.ts

@@ -88,3 +88,3 @@ import { inject, computed, ref } from 'vue'
       triggerElm.setAttribute('role', 'button')
-      triggerElm.setAttribute('tabindex', _instance.tabindex)
+      triggerElm.setAttribute('tabindex', _instance.props.tabindex)
       addClass(triggerElm, 'el-dropdown-selfdefine')
@@ -108,3 +108,3 @@ }
   function triggerElmFocus() {
-    triggerElm?.focus?.()
+    triggerElm.focus()
   }
@@ -111,0 +111,0 @@

packages/utils/tsconfig.json

@@ -22,8 +22,9 @@ {
   "include": [
-    "./**/*.ts"
+    "./**/*.ts",
+    "../../typings/vue-shim.d.ts"
   ],
   "exclude": [
     "node_modules",
-    "packages/**/__tests__/*"
+    "tests/*.ts"
   ]
  }

Fixed alerts

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

6320454

increased by3.76%

Number of package files

1337

increased by6.03%

Lines of code

96480

increased by8.26%

Number of low quality alerts

2

decreased by-33.33%

Number of low supply chain risk alerts

119

decreased by-0.83%

No dependency changes