element-plus 1.2.0-beta.4 → 1.2.0-beta.5

package/lib/hooks/use-css-var/index.d.ts

@@ -1,36 +0,0 @@
-import type { Ref, InjectionKey } from 'vue';
-declare type VarsType = Ref<Record<string, string>> | Record<string, string>;
-export declare const themeVarsKey: InjectionKey<VarsType>;
-/**
- * @param vars
- * @param target
- * @returns stopWatchHandler
- * @example
- *
- * If you pass a Ref vars param, it will generate a watch handler.
- *
- * In main.ts:
- *
- * ```ts
- * const themeVars = {
- *  '--el-color-primary': '#f44336',
- *  '--el-color-white': '#2196f3',
- * }
- * app.provide(themeVarsKey, themeVars)
- * ```
- * Usually you need to use this function in the root component.
- * In components' steup:
- *
- * ```ts
- * setup() {
- *  const themeVars = ref({
- *    '--el-button-default-bg-color': '#f44336',
- *    '--el-button-default-text-color': '#2196f3',
- *  })
- *  useCssVar(themeVars)
- * }
- * ```
- */
-export declare function useCssVar(vars: VarsType, target?: Ref<HTMLElement> | HTMLElement): void;
-export declare const useThemeVars: () => VarsType;
-export {};

package/lib/hooks/use-css-var/index.js

@@ -1,51 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var vue = require('vue');
-
-const VAR_PREFIX = "--el-";
-const setVars = (target, val) => {
-  Object.keys(val).forEach((key) => {
-    if (key.startsWith(VAR_PREFIX)) {
-      target == null ? void 0 : target.style.setProperty(key, val[key]);
-    } else {
-      target == null ? void 0 : target.style.setProperty(VAR_PREFIX + key, val[key]);
-    }
-  });
-};
-const themeVarsKey = "themeVars";
-function useCssVar(vars, target) {
-  let stopWatchCssVar = null;
-  const elRef = vue.computed(() => {
-    var _a;
-    return vue.unref(target) || ((_a = window == null ? void 0 : window.document) == null ? void 0 : _a.documentElement);
-  });
-  const themeVars = useThemeVars();
-  const customVars = { ...themeVars, ...vue.unref(vars) };
-  vue.provide(themeVarsKey, vue.ref(customVars));
-  vue.onMounted(() => {
-    vue.isRef(vars) ? stopWatchCssVar = vue.watch(vars, (val) => {
-      setVars(elRef.value, {
-        ...vue.unref(themeVars),
-        ...val
-      });
-    }, {
-      immediate: true,
-      deep: true
-    }) : setVars(elRef.value, {
-      ...vue.unref(themeVars),
-      ...vars
-    });
-  });
-  vue.onUnmounted(() => stopWatchCssVar && stopWatchCssVar());
-}
-const useThemeVars = () => {
-  const themeVars = vue.inject(themeVarsKey, {});
-  return themeVars;
-};
-
-exports.themeVarsKey = themeVarsKey;
-exports.useCssVar = useCssVar;
-exports.useThemeVars = useThemeVars;
-//# sourceMappingURL=index.js.map

package/lib/hooks/use-css-var/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../../../../packages/hooks/use-css-var/index.ts"],"sourcesContent":["import {\n  watch,\n  isRef,\n  onMounted,\n  computed,\n  unref,\n  inject,\n  onUnmounted,\n  provide,\n  ref,\n} from 'vue'\nimport type { Ref, WatchStopHandle, InjectionKey } from 'vue'\n\ntype VarsType = Ref<Record<string, string>> | Record<string, string>\n\nconst VAR_PREFIX = '--el-'\n\nconst setVars = (target: HTMLElement, val: Record<string, string>) => {\n  Object.keys(val).forEach((key) => {\n    if (key.startsWith(VAR_PREFIX)) {\n      target?.style.setProperty(key, val[key])\n    } else {\n      target?.style.setProperty(VAR_PREFIX + key, val[key])\n    }\n  })\n}\n\nexport const themeVarsKey: InjectionKey<VarsType> = 'themeVars' as any\n\n/**\n * @param vars\n * @param target\n * @returns stopWatchHandler\n * @example\n *\n * If you pass a Ref vars param, it will generate a watch handler.\n *\n * In main.ts:\n *\n * ```ts\n * const themeVars = {\n *  '--el-color-primary': '#f44336',\n *  '--el-color-white': '#2196f3',\n * }\n * app.provide(themeVarsKey, themeVars)\n * ```\n * Usually you need to use this function in the root component.\n * In components' steup:\n *\n * ```ts\n * setup() {\n *  const themeVars = ref({\n *    '--el-button-default-bg-color': '#f44336',\n *    '--el-button-default-text-color': '#2196f3',\n *  })\n *  useCssVar(themeVars)\n * }\n * ```\n */\nexport function useCssVar(\n  vars: VarsType,\n  target?: Ref<HTMLElement> | HTMLElement\n) {\n  let stopWatchCssVar: WatchStopHandle | null = null\n\n  const elRef = computed(\n    () => unref(target) || window?.document?.documentElement\n  )\n\n  const themeVars = useThemeVars()\n  const customVars = { ...themeVars, ...unref(vars) }\n\n  provide(themeVarsKey, ref(customVars))\n\n  onMounted(() => {\n    isRef(vars)\n      ? (stopWatchCssVar = watch(\n          vars,\n          (val) => {\n            setVars(elRef.value, {\n              ...unref(themeVars),\n              ...val,\n            })\n          },\n          {\n            immediate: true,\n            deep: true,\n          }\n        ))\n      : setVars(elRef.value, {\n          ...unref(themeVars),\n          ...vars,\n        })\n  })\n\n  onUnmounted(() => stopWatchCssVar && stopWatchCssVar())\n}\n\nexport const useThemeVars = () => {\n  const themeVars = inject(themeVarsKey, {})\n  return themeVars\n}\n"],"names":["computed","unref","ref","watch","inject"],"mappings":";;;;;;AAeA,MAAM,aAAa;AAEnB,MAAM,UAAU,CAAC,QAAqB,QAAgC;AACpE,SAAO,KAAK,KAAK,QAAQ,CAAC,QAAQ;AAChC,QAAI,IAAI,WAAW,aAAa;AAC9B,uCAAQ,MAAM,YAAY,KAAK,IAAI;AAAA,WAC9B;AACL,uCAAQ,MAAM,YAAY,aAAa,KAAK,IAAI;AAAA;AAAA;AAAA;MAKzC,eAAuC;mBAiClD,MACA,QACA;AACA,MAAI,kBAA0C;AAE9C,QAAM,QAAQA,aACZ,MAAG;AAlEP;AAkEU,qBAAM,mDAAmB,aAAR,mBAAkB;AAAA;AAG3C,QAAM,YAAY;AAClB,QAAM,aAAa,KAAK,cAAcC,UAAM;AAE5C,cAAQ,cAAcC,QAAI;AAE1B,gBAAU,MAAM;AACd,cAAM,QACD,kBAAkBC,UACjB,MACA,CAAC,QAAQ;AACP,cAAQ,MAAM,OAAO;AAAA,WAChBF,UAAM;AAAA,WACN;AAAA;AAAA,OAGP;AAAA,MACE,WAAW;AAAA,MACX,MAAM;AAAA,SAGV,QAAQ,MAAM,OAAO;AAAA,SAChBA,UAAM;AAAA,SACN;AAAA;AAAA;AAIX,kBAAY,MAAM,mBAAmB;AAAA;MAG1B,eAAe,MAAM;AAChC,QAAM,YAAYG,WAAO,cAAc;AACvC,SAAO;AAAA;;;;;;"}

package/lib/hooks/use-events/index.d.ts

@@ -1,7 +0,0 @@
-import type { Ref } from 'vue';
-export declare type Event = {
-    name: string;
-    handler: (...args: any[]) => any;
-};
-declare const _default: (el: Ref<HTMLElement>, events: Event[]) => void;
-export default _default;

package/lib/hooks/use-events/index.js

@@ -1,23 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var vue = require('vue');
-var dom = require('../../utils/dom.js');
-
-var index = (el, events) => {
-  vue.watch(el, (val) => {
-    if (val) {
-      events.forEach(({ name, handler }) => {
-        dom.on(el.value, name, handler);
-      });
-    } else {
-      events.forEach(({ name, handler }) => {
-        dom.off(el.value, name, handler);
-      });
-    }
-  });
-};
-
-exports["default"] = index;
-//# sourceMappingURL=index.js.map

package/lib/hooks/use-events/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../../../../packages/hooks/use-events/index.ts"],"sourcesContent":["import { watch } from 'vue'\nimport { on, off } from '@element-plus/utils/dom'\n\nimport type { Ref } from 'vue'\n\nexport type Event = {\n  name: string\n  handler: (...args: any[]) => any\n}\n\nexport default (el: Ref<HTMLElement>, events: Event[]) => {\n  watch(el, (val) => {\n    if (val) {\n      events.forEach(({ name, handler }) => {\n        on(el.value, name, handler)\n      })\n    } else {\n      events.forEach(({ name, handler }) => {\n        off(el.value, name, handler)\n      })\n    }\n  })\n}\n"],"names":[],"mappings":";;;;;;;AAUA,YAAe,CAAC,IAAsB,WAAoB;AACxD,YAAM,IAAI,CAAC,QAAQ;AACjB,QAAI,KAAK;AACP,aAAO,QAAQ,CAAC,EAAE,MAAM,cAAc;AACpC,eAAG,GAAG,OAAO,MAAM;AAAA;AAAA,WAEhB;AACL,aAAO,QAAQ,CAAC,EAAE,MAAM,cAAc;AACpC,gBAAI,GAAG,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;;;;"}

package/lib/hooks/use-migrating/index.d.ts

@@ -1,7 +0,0 @@
-declare const useMigrating: () => {
-    getMigratingConfig: () => {
-        props: {};
-        events: {};
-    };
-};
-export default useMigrating;

package/lib/hooks/use-migrating/index.js

@@ -1,39 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var vue = require('vue');
-var error = require('../../utils/error.js');
-var util = require('../../utils/util.js');
-
-const useMigrating = function() {
-  vue.onMounted(() => {
-    var _a;
-    const instance = vue.getCurrentInstance();
-    if (process.env.NODE_ENV === "production")
-      return;
-    if (!instance.vnode)
-      return;
-    const { props = {} } = getMigratingConfig();
-    const { data } = instance;
-    const definedProps = data.attrs || {};
-    for (let propName in definedProps) {
-      propName = util.kebabCase(propName);
-      if (props[propName]) {
-        error.debugWarn("Element Migrating", `[${(_a = instance.proxy) == null ? void 0 : _a.$options.name}][Attribute]: ${props[propName]}`);
-      }
-    }
-  });
-  const getMigratingConfig = function() {
-    return {
-      props: {},
-      events: {}
-    };
-  };
-  return {
-    getMigratingConfig
-  };
-};
-
-exports["default"] = useMigrating;
-//# sourceMappingURL=index.js.map

package/lib/hooks/use-migrating/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../../../../packages/hooks/use-migrating/index.ts"],"sourcesContent":["import { getCurrentInstance, onMounted } from 'vue'\nimport { debugWarn } from '@element-plus/utils/error'\nimport { kebabCase } from '@element-plus/utils/util'\n\nconst useMigrating = function () {\n  onMounted(() => {\n    const instance = getCurrentInstance()!\n    if (process.env.NODE_ENV === 'production') return\n    if (!instance.vnode) return\n    const { props = {} } = getMigratingConfig()\n    const { data } = instance\n    const definedProps = data.attrs || {}\n\n    for (let propName in definedProps as any) {\n      propName = kebabCase(propName) // compatible with camel case\n      if (props[propName]) {\n        debugWarn(\n          'Element Migrating',\n          `[${instance.proxy?.$options.name}][Attribute]: ${props[propName]}`\n        )\n      }\n    }\n  })\n  const getMigratingConfig = function () {\n    return {\n      props: {},\n      events: {},\n    }\n  }\n  return {\n    getMigratingConfig,\n  }\n}\n\nexport default useMigrating\n"],"names":["getCurrentInstance","kebabCase"],"mappings":";;;;;;;;MAIM,eAAe,WAAY;AAC/B,gBAAU,MAAM;AALlB;AAMI,UAAM,WAAWA;AACjB,QAAI,QAAQ,IAAI,aAAa;AAAc;AAC3C,QAAI,CAAC,SAAS;AAAO;AACrB,UAAM,EAAE,QAAQ,OAAO;AACvB,UAAM,EAAE,SAAS;AACjB,UAAM,eAAe,KAAK,SAAS;AAEnC,aAAS,YAAY,cAAqB;AACxC,iBAAWC,eAAU;AACrB,UAAI,MAAM,WAAW;AACnB,wBACE,qBACA,IAAI,eAAS,UAAT,mBAAgB,SAAS,qBAAqB,MAAM;AAAA;AAAA;AAAA;AAKhE,QAAM,qBAAqB,WAAY;AACrC,WAAO;AAAA,MACL,OAAO;AAAA,MACP,QAAQ;AAAA;AAAA;AAGZ,SAAO;AAAA,IACL;AAAA;AAAA;;;;"}

package/lib/hooks/use-transition/index.d.ts

@@ -1,13 +0,0 @@
-import type { ExtractPropTypes, Ref } from 'vue';
-export declare const useTransitionProps: {
-    transitionDuration: {
-        type: NumberConstructor;
-        default: number;
-    };
-    transitionShow: StringConstructor;
-    transitionHide: StringConstructor;
-};
-export declare const useTransition: (props: ExtractPropTypes<typeof useTransitionProps>, indicator: Ref<boolean>) => {
-    transition: import("vue").ComputedRef<string>;
-    transitionStyle: import("vue").ComputedRef<string>;
-};

package/lib/hooks/use-transition/index.js

@@ -1,30 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var vue = require('vue');
-
-const useTransitionProps = {
-  transitionDuration: {
-    type: Number,
-    default: 0.3
-  },
-  transitionShow: String,
-  transitionHide: String
-};
-const useTransition = (props, indicator) => {
-  const transitionState = vue.ref(indicator.value);
-  vue.watch(indicator, (val) => {
-    vue.nextTick(() => transitionState.value = val);
-  });
-  return {
-    transition: vue.computed(() => {
-      return `el-transition--${transitionState.value ? props.transitionShow : props.transitionHide}`;
-    }),
-    transitionStyle: vue.computed(() => `--el-transition-duration: ${props.transitionDuration}s`)
-  };
-};
-
-exports.useTransition = useTransition;
-exports.useTransitionProps = useTransitionProps;
-//# sourceMappingURL=index.js.map

package/lib/hooks/use-transition/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../../../../packages/hooks/use-transition/index.ts"],"sourcesContent":["import { computed, ref, watch, nextTick } from 'vue'\n\nimport type { ExtractPropTypes, Ref } from 'vue'\n\nexport const useTransitionProps = {\n  transitionDuration: {\n    type: Number,\n    default: 0.3,\n  },\n  transitionShow: String,\n  transitionHide: String,\n}\n\nexport const useTransition = (\n  props: ExtractPropTypes<typeof useTransitionProps>,\n  indicator: Ref<boolean>\n) => {\n  const transitionState = ref(indicator.value)\n  watch(indicator, (val) => {\n    nextTick(() => (transitionState.value = val))\n  })\n\n  return {\n    transition: computed(() => {\n      return `el-transition--${\n        transitionState.value ? props.transitionShow : props.transitionHide\n      }`\n    }),\n    transitionStyle: computed(\n      () => `--el-transition-duration: ${props.transitionDuration}s`\n    ),\n  }\n}\n"],"names":["ref","computed"],"mappings":";;;;;;MAIa,qBAAqB;AAAA,EAChC,oBAAoB;AAAA,IAClB,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,gBAAgB;AAAA,EAChB,gBAAgB;AAAA;MAGL,gBAAgB,CAC3B,OACA,cACG;AACH,QAAM,kBAAkBA,QAAI,UAAU;AACtC,YAAM,WAAW,CAAC,QAAQ;AACxB,iBAAS,MAAO,gBAAgB,QAAQ;AAAA;AAG1C,SAAO;AAAA,IACL,YAAYC,aAAS,MAAM;AACzB,aAAO,kBACL,gBAAgB,QAAQ,MAAM,iBAAiB,MAAM;AAAA;AAAA,IAGzD,iBAAiBA,aACf,MAAM,6BAA6B,MAAM;AAAA;AAAA;;;;;"}