@element-plus/nightly 0.0.20220121 → 0.0.20220122

package/es/components/color-picker/src/index.mjs

@@ -1,7 +1,341 @@
-import script from './index.vue_vue_type_script_lang.mjs';
-export { default } from './index.vue_vue_type_script_lang.mjs';
-import { render } from './index.vue_vue_type_template_id_46a474d5_lang.mjs';
+import { defineComponent, inject, ref, reactive, computed, watch, nextTick, onMounted, provide, resolveComponent, resolveDirective, openBlock, createBlock, withCtx, withDirectives, createElementBlock, createElementVNode, createVNode, createCommentVNode, withKeys, createTextVNode, toDisplayString, normalizeClass, normalizeStyle, vShow } from 'vue';
+import debounce from 'lodash/debounce';
+import { ElButton } from '../../button/index.mjs';
+import { ElIcon } from '../../icon/index.mjs';
+import '../../../directives/index.mjs';
+import '../../../tokens/index.mjs';
+import '../../../hooks/index.mjs';
+import { ElTooltip } from '../../tooltip/index.mjs';
+import { ElInput } from '../../input/index.mjs';
+import { UPDATE_MODEL_EVENT } from '../../../utils/constants.mjs';
+import { isValidComponentSize } from '../../../utils/validators.mjs';
+import { Close, ArrowDown } from '@element-plus/icons-vue';
+import AlphaSlider from './components/alpha-slider.mjs';
+import HueSlider from './components/hue-slider.mjs';
+import Predefine from './components/predefine.mjs';
+import SvPanel from './components/sv-panel.mjs';
+import Color from './color.mjs';
+import { OPTIONS_KEY } from './useOption.mjs';
+import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
+import ClickOutside from '../../../directives/click-outside/index.mjs';
+import { useLocale } from '../../../hooks/use-locale/index.mjs';
+import { elFormKey, elFormItemKey } from '../../../tokens/form.mjs';
+import { useSize } from '../../../hooks/use-common-props/index.mjs';
 
-script.render = render;
-script.__file = "packages/components/color-picker/src/index.vue";
+const _sfc_main = defineComponent({
+  name: "ElColorPicker",
+  components: {
+    ElButton,
+    ElTooltip,
+    ElInput,
+    ElIcon,
+    Close,
+    ArrowDown,
+    SvPanel,
+    HueSlider,
+    AlphaSlider,
+    Predefine
+  },
+  directives: {
+    ClickOutside
+  },
+  props: {
+    modelValue: String,
+    showAlpha: Boolean,
+    colorFormat: String,
+    disabled: Boolean,
+    size: {
+      type: String,
+      validator: isValidComponentSize
+    },
+    popperClass: String,
+    predefine: Array
+  },
+  emits: ["change", "active-change", UPDATE_MODEL_EVENT],
+  setup(props, { emit }) {
+    const { t } = useLocale();
+    const elForm = inject(elFormKey, {});
+    const elFormItem = inject(elFormItemKey, {});
+    const hue = ref(null);
+    const svPanel = ref(null);
+    const alpha = ref(null);
+    const popper = ref(null);
+    const color = reactive(new Color({
+      enableAlpha: props.showAlpha,
+      format: props.colorFormat,
+      value: props.modelValue
+    }));
+    const showPicker = ref(false);
+    const showPanelColor = ref(false);
+    const customInput = ref("");
+    const displayedColor = computed(() => {
+      if (!props.modelValue && !showPanelColor.value) {
+        return "transparent";
+      }
+      return displayedRgb(color, props.showAlpha);
+    });
+    const colorSize = useSize();
+    const colorDisabled = computed(() => {
+      return props.disabled || elForm.disabled;
+    });
+    const currentColor = computed(() => {
+      return !props.modelValue && !showPanelColor.value ? "" : color.value;
+    });
+    watch(() => props.modelValue, (newVal) => {
+      if (!newVal) {
+        showPanelColor.value = false;
+      } else if (newVal && newVal !== color.value) {
+        color.fromString(newVal);
+      }
+    });
+    watch(() => currentColor.value, (val) => {
+      customInput.value = val;
+      emit("active-change", val);
+    });
+    watch(() => color.value, () => {
+      if (!props.modelValue && !showPanelColor.value) {
+        showPanelColor.value = true;
+      }
+    });
+    function displayedRgb(color2, showAlpha) {
+      if (!(color2 instanceof Color)) {
+        throw Error("color should be instance of _color Class");
+      }
+      const { r, g, b } = color2.toRgb();
+      return showAlpha ? `rgba(${r}, ${g}, ${b}, ${color2.get("alpha") / 100})` : `rgb(${r}, ${g}, ${b})`;
+    }
+    function setShowPicker(value) {
+      showPicker.value = value;
+    }
+    const debounceSetShowPicker = debounce(setShowPicker, 100);
+    function hide() {
+      debounceSetShowPicker(false);
+      resetColor();
+    }
+    function resetColor() {
+      nextTick(() => {
+        if (props.modelValue) {
+          color.fromString(props.modelValue);
+        } else {
+          showPanelColor.value = false;
+        }
+      });
+    }
+    function handleTrigger() {
+      if (colorDisabled.value)
+        return;
+      debounceSetShowPicker(!showPicker.value);
+    }
+    function handleConfirm() {
+      color.fromString(customInput.value);
+    }
+    function confirmValue() {
+      const value = color.value;
+      emit(UPDATE_MODEL_EVENT, value);
+      emit("change", value);
+      elFormItem.validate?.("change");
+      debounceSetShowPicker(false);
+      nextTick(() => {
+        const newColor = new Color({
+          enableAlpha: props.showAlpha,
+          format: props.colorFormat,
+          value: props.modelValue
+        });
+        if (!color.compare(newColor)) {
+          resetColor();
+        }
+      });
+    }
+    function clear() {
+      debounceSetShowPicker(false);
+      emit(UPDATE_MODEL_EVENT, null);
+      emit("change", null);
+      if (props.modelValue !== null) {
+        elFormItem.validate?.("change");
+      }
+      resetColor();
+    }
+    onMounted(() => {
+      if (props.modelValue) {
+        customInput.value = currentColor.value;
+      }
+    });
+    watch(() => showPicker.value, () => {
+      nextTick(() => {
+        hue.value?.update();
+        svPanel.value?.update();
+        alpha.value?.update();
+      });
+    });
+    provide(OPTIONS_KEY, {
+      currentColor
+    });
+    return {
+      color,
+      colorDisabled,
+      colorSize,
+      displayedColor,
+      showPanelColor,
+      showPicker,
+      customInput,
+      handleConfirm,
+      hide,
+      handleTrigger,
+      clear,
+      confirmValue,
+      t,
+      hue,
+      svPanel,
+      alpha,
+      popper
+    };
+  }
+});
+const _hoisted_1 = { class: "el-color-dropdown__main-wrapper" };
+const _hoisted_2 = { class: "el-color-dropdown__btns" };
+const _hoisted_3 = { class: "el-color-dropdown__value" };
+const _hoisted_4 = {
+  key: 0,
+  class: "el-color-picker__mask"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_hue_slider = resolveComponent("hue-slider");
+  const _component_sv_panel = resolveComponent("sv-panel");
+  const _component_alpha_slider = resolveComponent("alpha-slider");
+  const _component_predefine = resolveComponent("predefine");
+  const _component_el_input = resolveComponent("el-input");
+  const _component_el_button = resolveComponent("el-button");
+  const _component_arrow_down = resolveComponent("arrow-down");
+  const _component_el_icon = resolveComponent("el-icon");
+  const _component_close = resolveComponent("close");
+  const _component_el_tooltip = resolveComponent("el-tooltip");
+  const _directive_click_outside = resolveDirective("click-outside");
+  return openBlock(), createBlock(_component_el_tooltip, {
+    ref: "popper",
+    visible: _ctx.showPicker,
+    "onUpdate:visible": _cache[2] || (_cache[2] = ($event) => _ctx.showPicker = $event),
+    "show-arrow": false,
+    "fallback-placements": ["bottom", "top", "right", "left"],
+    offset: 0,
+    "gpu-acceleration": false,
+    "popper-class": `el-color-picker__panel el-color-dropdown ${_ctx.popperClass}`,
+    "stop-popper-mouse-event": false,
+    effect: "light",
+    trigger: "click",
+    transition: "el-zoom-in-top",
+    persistent: ""
+  }, {
+    content: withCtx(() => [
+      withDirectives((openBlock(), createElementBlock("div", null, [
+        createElementVNode("div", _hoisted_1, [
+          createVNode(_component_hue_slider, {
+            ref: "hue",
+            class: "hue-slider",
+            color: _ctx.color,
+            vertical: ""
+          }, null, 8, ["color"]),
+          createVNode(_component_sv_panel, {
+            ref: "svPanel",
+            color: _ctx.color
+          }, null, 8, ["color"])
+        ]),
+        _ctx.showAlpha ? (openBlock(), createBlock(_component_alpha_slider, {
+          key: 0,
+          ref: "alpha",
+          color: _ctx.color
+        }, null, 8, ["color"])) : createCommentVNode("v-if", true),
+        _ctx.predefine ? (openBlock(), createBlock(_component_predefine, {
+          key: 1,
+          ref: "predefine",
+          color: _ctx.color,
+          colors: _ctx.predefine
+        }, null, 8, ["color", "colors"])) : createCommentVNode("v-if", true),
+        createElementVNode("div", _hoisted_2, [
+          createElementVNode("span", _hoisted_3, [
+            createVNode(_component_el_input, {
+              modelValue: _ctx.customInput,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.customInput = $event),
+              "validate-event": false,
+              size: "small",
+              onKeyup: withKeys(_ctx.handleConfirm, ["enter"]),
+              onBlur: _ctx.handleConfirm
+            }, null, 8, ["modelValue", "onKeyup", "onBlur"])
+          ]),
+          createVNode(_component_el_button, {
+            size: "small",
+            type: "text",
+            class: "el-color-dropdown__link-btn",
+            onClick: _ctx.clear
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(_ctx.t("el.colorpicker.clear")), 1)
+            ]),
+            _: 1
+          }, 8, ["onClick"]),
+          createVNode(_component_el_button, {
+            plain: "",
+            size: "small",
+            class: "el-color-dropdown__btn",
+            onClick: _ctx.confirmValue
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(_ctx.t("el.colorpicker.confirm")), 1)
+            ]),
+            _: 1
+          }, 8, ["onClick"])
+        ])
+      ])), [
+        [_directive_click_outside, _ctx.hide]
+      ])
+    ]),
+    default: withCtx(() => [
+      createElementVNode("div", {
+        class: normalizeClass([
+          "el-color-picker",
+          _ctx.colorDisabled ? "is-disabled" : "",
+          _ctx.colorSize ? `el-color-picker--${_ctx.colorSize}` : ""
+        ])
+      }, [
+        _ctx.colorDisabled ? (openBlock(), createElementBlock("div", _hoisted_4)) : createCommentVNode("v-if", true),
+        createElementVNode("div", {
+          class: "el-color-picker__trigger",
+          onClick: _cache[1] || (_cache[1] = (...args) => _ctx.handleTrigger && _ctx.handleTrigger(...args))
+        }, [
+          createElementVNode("span", {
+            class: normalizeClass(["el-color-picker__color", { "is-alpha": _ctx.showAlpha }])
+          }, [
+            createElementVNode("span", {
+              class: "el-color-picker__color-inner",
+              style: normalizeStyle({
+                backgroundColor: _ctx.displayedColor
+              })
+            }, [
+              withDirectives(createVNode(_component_el_icon, { class: "el-color-picker__icon is-icon-arrow-down" }, {
+                default: withCtx(() => [
+                  createVNode(_component_arrow_down)
+                ]),
+                _: 1
+              }, 512), [
+                [vShow, _ctx.modelValue || _ctx.showPanelColor]
+              ]),
+              !_ctx.modelValue && !_ctx.showPanelColor ? (openBlock(), createBlock(_component_el_icon, {
+                key: 0,
+                class: "el-color-picker__empty is-icon-close"
+              }, {
+                default: withCtx(() => [
+                  createVNode(_component_close)
+                ]),
+                _: 1
+              })) : createCommentVNode("v-if", true)
+            ], 4)
+          ], 2)
+        ])
+      ], 2)
+    ]),
+    _: 1
+  }, 8, ["visible", "popper-class"]);
+}
+var ColorPicker = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+
+export { ColorPicker as default };
 //# sourceMappingURL=index.mjs.map

package/es/components/color-picker/src/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
+{"version":3,"file":"index.mjs","sources":["../../../../../../packages/components/color-picker/src/index.vue"],"sourcesContent":["<template>\n  <el-tooltip\n    ref=\"popper\"\n    v-model:visible=\"showPicker\"\n    :show-arrow=\"false\"\n    :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n    :offset=\"0\"\n    :gpu-acceleration=\"false\"\n    :popper-class=\"`el-color-picker__panel el-color-dropdown ${popperClass}`\"\n    :stop-popper-mouse-event=\"false\"\n    effect=\"light\"\n    trigger=\"click\"\n    transition=\"el-zoom-in-top\"\n    persistent\n  >\n    <template #content>\n      <div v-click-outside=\"hide\">\n        <div class=\"el-color-dropdown__main-wrapper\">\n          <hue-slider ref=\"hue\" class=\"hue-slider\" :color=\"color\" vertical />\n          <sv-panel ref=\"svPanel\" :color=\"color\" />\n        </div>\n        <alpha-slider v-if=\"showAlpha\" ref=\"alpha\" :color=\"color\" />\n        <predefine\n          v-if=\"predefine\"\n          ref=\"predefine\"\n          :color=\"color\"\n          :colors=\"predefine\"\n        />\n        <div class=\"el-color-dropdown__btns\">\n          <span class=\"el-color-dropdown__value\">\n            <el-input\n              v-model=\"customInput\"\n              :validate-event=\"false\"\n              size=\"small\"\n              @keyup.enter=\"handleConfirm\"\n              @blur=\"handleConfirm\"\n            />\n          </span>\n          <el-button\n            size=\"small\"\n            type=\"text\"\n            class=\"el-color-dropdown__link-btn\"\n            @click=\"clear\"\n          >\n            {{ t('el.colorpicker.clear') }}\n          </el-button>\n          <el-button\n            plain\n            size=\"small\"\n            class=\"el-color-dropdown__btn\"\n            @click=\"confirmValue\"\n          >\n            {{ t('el.colorpicker.confirm') }}\n          </el-button>\n        </div>\n      </div>\n    </template>\n    <template #default>\n      <div\n        :class=\"[\n          'el-color-picker',\n          colorDisabled ? 'is-disabled' : '',\n          colorSize ? `el-color-picker--${colorSize}` : '',\n        ]\"\n      >\n        <div v-if=\"colorDisabled\" class=\"el-color-picker__mask\"></div>\n        <div class=\"el-color-picker__trigger\" @click=\"handleTrigger\">\n          <span\n            class=\"el-color-picker__color\"\n            :class=\"{ 'is-alpha': showAlpha }\"\n          >\n            <span\n              class=\"el-color-picker__color-inner\"\n              :style=\"{\n                backgroundColor: displayedColor,\n              }\"\n            >\n              <el-icon\n                v-show=\"modelValue || showPanelColor\"\n                class=\"el-color-picker__icon is-icon-arrow-down\"\n              >\n                <arrow-down />\n              </el-icon>\n              <el-icon\n                v-if=\"!modelValue && !showPanelColor\"\n                class=\"el-color-picker__empty is-icon-close\"\n              >\n                <close />\n              </el-icon>\n            </span>\n          </span>\n        </div>\n      </div>\n    </template>\n  </el-tooltip>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  inject,\n  nextTick,\n  onMounted,\n  provide,\n  reactive,\n  ref,\n  watch,\n} from 'vue'\nimport debounce from 'lodash/debounce'\nimport ElButton from '@element-plus/components/button'\nimport ElIcon from '@element-plus/components/icon'\nimport { ClickOutside } from '@element-plus/directives'\nimport { elFormItemKey, elFormKey } from '@element-plus/tokens'\nimport { useLocale, useSize } from '@element-plus/hooks'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport ElInput from '@element-plus/components/input'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { isValidComponentSize } from '@element-plus/utils/validators'\nimport { Close, ArrowDown } from '@element-plus/icons-vue'\nimport AlphaSlider from './components/alpha-slider.vue'\nimport HueSlider from './components/hue-slider.vue'\nimport Predefine from './components/predefine.vue'\nimport SvPanel from './components/sv-panel.vue'\nimport Color from './color'\nimport { OPTIONS_KEY } from './useOption'\n\nimport type { PropType } from 'vue'\nimport type { ElFormContext, ElFormItemContext } from '@element-plus/tokens'\nimport type { ComponentSize } from '@element-plus/utils/types'\nimport type { IUseOptions } from './useOption'\n\nexport default defineComponent({\n  name: 'ElColorPicker',\n  components: {\n    ElButton,\n    ElTooltip,\n    ElInput,\n    ElIcon,\n    Close,\n    ArrowDown,\n    SvPanel,\n    HueSlider,\n    AlphaSlider,\n    Predefine,\n  },\n  directives: {\n    ClickOutside,\n  },\n  props: {\n    modelValue: String,\n    showAlpha: Boolean,\n    colorFormat: String,\n    disabled: Boolean,\n    size: {\n      type: String as PropType<ComponentSize>,\n      validator: isValidComponentSize,\n    },\n    popperClass: String,\n    predefine: Array,\n  },\n  emits: ['change', 'active-change', UPDATE_MODEL_EVENT],\n  setup(props, { emit }) {\n    const { t } = useLocale()\n    const elForm = inject(elFormKey, {} as ElFormContext)\n    const elFormItem = inject(elFormItemKey, {} as ElFormItemContext)\n\n    const hue = ref(null)\n    const svPanel = ref(null)\n    const alpha = ref(null)\n    const popper = ref(null)\n    // data\n    const color = reactive(\n      new Color({\n        enableAlpha: props.showAlpha,\n        format: props.colorFormat,\n        value: props.modelValue,\n      })\n    )\n    const showPicker = ref(false)\n    const showPanelColor = ref(false)\n    const customInput = ref('')\n    // computed\n    const displayedColor = computed(() => {\n      if (!props.modelValue && !showPanelColor.value) {\n        return 'transparent'\n      }\n      return displayedRgb(color, props.showAlpha)\n    })\n    const colorSize = useSize()\n    const colorDisabled = computed(() => {\n      return props.disabled || elForm.disabled\n    })\n\n    const currentColor = computed(() => {\n      return !props.modelValue && !showPanelColor.value ? '' : color.value\n    })\n    // watch\n    watch(\n      () => props.modelValue,\n      (newVal) => {\n        if (!newVal) {\n          showPanelColor.value = false\n        } else if (newVal && newVal !== color.value) {\n          color.fromString(newVal)\n        }\n      }\n    )\n    watch(\n      () => currentColor.value,\n      (val) => {\n        customInput.value = val\n        emit('active-change', val)\n      }\n    )\n\n    watch(\n      () => color.value,\n      () => {\n        if (!props.modelValue && !showPanelColor.value) {\n          showPanelColor.value = true\n        }\n      }\n    )\n\n    // methods\n    function displayedRgb(color, showAlpha) {\n      if (!(color instanceof Color)) {\n        throw Error('color should be instance of _color Class')\n      }\n\n      const { r, g, b } = color.toRgb()\n      return showAlpha\n        ? `rgba(${r}, ${g}, ${b}, ${color.get('alpha') / 100})`\n        : `rgb(${r}, ${g}, ${b})`\n    }\n\n    function setShowPicker(value) {\n      showPicker.value = value\n    }\n\n    const debounceSetShowPicker = debounce(setShowPicker, 100)\n\n    function hide() {\n      debounceSetShowPicker(false)\n      resetColor()\n    }\n\n    function resetColor() {\n      nextTick(() => {\n        if (props.modelValue) {\n          color.fromString(props.modelValue)\n        } else {\n          showPanelColor.value = false\n        }\n      })\n    }\n\n    function handleTrigger() {\n      if (colorDisabled.value) return\n      debounceSetShowPicker(!showPicker.value)\n    }\n\n    function handleConfirm() {\n      color.fromString(customInput.value)\n    }\n\n    function confirmValue() {\n      const value = color.value\n      emit(UPDATE_MODEL_EVENT, value)\n      emit('change', value)\n      elFormItem.validate?.('change')\n      debounceSetShowPicker(false)\n      // check if modelValue change, if not change, then reset color.\n      nextTick(() => {\n        const newColor = new Color({\n          enableAlpha: props.showAlpha,\n          format: props.colorFormat,\n          value: props.modelValue,\n        })\n        if (!color.compare(newColor)) {\n          resetColor()\n        }\n      })\n    }\n\n    function clear() {\n      debounceSetShowPicker(false)\n      emit(UPDATE_MODEL_EVENT, null)\n      emit('change', null)\n      if (props.modelValue !== null) {\n        elFormItem.validate?.('change')\n      }\n      resetColor()\n    }\n\n    onMounted(() => {\n      if (props.modelValue) {\n        customInput.value = currentColor.value\n      }\n    })\n    watch(\n      () => showPicker.value,\n      () => {\n        nextTick(() => {\n          hue.value?.update()\n          svPanel.value?.update()\n          alpha.value?.update()\n        })\n      }\n    )\n\n    provide<IUseOptions>(OPTIONS_KEY, {\n      currentColor,\n    })\n\n    return {\n      color: color as Color,\n      colorDisabled,\n      colorSize,\n      displayedColor,\n      showPanelColor,\n      showPicker,\n      customInput,\n      handleConfirm,\n      hide,\n      handleTrigger,\n      clear,\n      confirmValue,\n      t,\n      hue,\n      svPanel,\n      alpha,\n      popper,\n    }\n  },\n})\n</script>\n"],"names":["_openBlock","_createBlock","_createCommentVNode","_withKeys","_withCtx"],"mappings":"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"}

package/es/components/container/index.mjs

@@ -1,25 +1,20 @@
 import { withInstall, withNoopInstall } from '../../utils/with-install.mjs';
-import './src/container.mjs';
-import './src/aside.mjs';
-import './src/footer.mjs';
-import './src/header.mjs';
-import './src/main.mjs';
-import script from './src/container.vue_vue_type_script_lang.mjs';
-import script$1 from './src/aside.vue_vue_type_script_lang.mjs';
-import script$2 from './src/footer.vue_vue_type_script_lang.mjs';
-import script$3 from './src/header.vue_vue_type_script_lang.mjs';
-import script$4 from './src/main.vue_vue_type_script_lang.mjs';
+import Container from './src/container.mjs';
+import Aside from './src/aside.mjs';
+import Footer from './src/footer.mjs';
+import Header from './src/header.mjs';
+import Main from './src/main.mjs';
 
-const ElContainer = withInstall(script, {
-  Aside: script$1,
-  Footer: script$2,
-  Header: script$3,
-  Main: script$4
+const ElContainer = withInstall(Container, {
+  Aside,
+  Footer,
+  Header,
+  Main
 });
-const ElAside = withNoopInstall(script$1);
-const ElFooter = withNoopInstall(script$2);
-const ElHeader = withNoopInstall(script$3);
-const ElMain = withNoopInstall(script$4);
+const ElAside = withNoopInstall(Aside);
+const ElFooter = withNoopInstall(Footer);
+const ElHeader = withNoopInstall(Header);
+const ElMain = withNoopInstall(Main);
 
 export { ElAside, ElContainer, ElFooter, ElHeader, ElMain, ElContainer as default };
 //# sourceMappingURL=index.mjs.map

package/es/components/container/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../../../packages/components/container/index.ts"],"sourcesContent":["import { withInstall, withNoopInstall } from '@element-plus/utils/with-install'\n\nimport Container from './src/container.vue'\nimport Aside from './src/aside.vue'\nimport Footer from './src/footer.vue'\nimport Header from './src/header.vue'\nimport Main from './src/main.vue'\n\nexport const ElContainer = withInstall(Container, {\n  Aside,\n  Footer,\n  Header,\n  Main,\n})\n\nexport default ElContainer\nexport const ElAside = withNoopInstall(Aside)\nexport const ElFooter = withNoopInstall(Footer)\nexport const ElHeader = withNoopInstall(Header)\nexport const ElMain = withNoopInstall(Main)\n"],"names":["Container","Aside","Footer","Header","Main"],"mappings":";;;;;;;;;;;;AAMY,MAAC,WAAW,GAAG,WAAW,CAACA,MAAS,EAAE;AAClD,SAAEC,QAAK;AACP,UAAEC,QAAM;AACR,UAAEC,QAAM;AACR,QAAEC,QAAI;AACN,CAAC,EAAE;AAES,MAAC,OAAO,GAAG,eAAe,CAACH,QAAK,EAAE;AAClC,MAAC,QAAQ,GAAG,eAAe,CAACC,QAAM,EAAE;AACpC,MAAC,QAAQ,GAAG,eAAe,CAACC,QAAM,EAAE;AACpC,MAAC,MAAM,GAAG,eAAe,CAACC,QAAI;;;;"}
+{"version":3,"file":"index.mjs","sources":["../../../../../packages/components/container/index.ts"],"sourcesContent":["import { withInstall, withNoopInstall } from '@element-plus/utils/with-install'\n\nimport Container from './src/container.vue'\nimport Aside from './src/aside.vue'\nimport Footer from './src/footer.vue'\nimport Header from './src/header.vue'\nimport Main from './src/main.vue'\n\nexport const ElContainer = withInstall(Container, {\n  Aside,\n  Footer,\n  Header,\n  Main,\n})\n\nexport default ElContainer\nexport const ElAside = withNoopInstall(Aside)\nexport const ElFooter = withNoopInstall(Footer)\nexport const ElHeader = withNoopInstall(Header)\nexport const ElMain = withNoopInstall(Main)\n"],"names":[],"mappings":";;;;;;;AAMY,MAAC,WAAW,GAAG,WAAW,CAAC,SAAS,EAAE;AAClD,EAAE,KAAK;AACP,EAAE,MAAM;AACR,EAAE,MAAM;AACR,EAAE,IAAI;AACN,CAAC,EAAE;AAES,MAAC,OAAO,GAAG,eAAe,CAAC,KAAK,EAAE;AAClC,MAAC,QAAQ,GAAG,eAAe,CAAC,MAAM,EAAE;AACpC,MAAC,QAAQ,GAAG,eAAe,CAAC,MAAM,EAAE;AACpC,MAAC,MAAM,GAAG,eAAe,CAAC,IAAI;;;;"}

package/es/components/container/src/aside.mjs

@@ -1,7 +1,35 @@
-import script from './aside.vue_vue_type_script_lang.mjs';
-export { default } from './aside.vue_vue_type_script_lang.mjs';
-import { render } from './aside.vue_vue_type_template_id_47e12f0a_lang.mjs';
+import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, normalizeStyle, renderSlot } from 'vue';
+import '../../../hooks/index.mjs';
+import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
+import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
 
-script.render = render;
-script.__file = "packages/components/container/src/aside.vue";
+const _sfc_main = defineComponent({
+  name: "ElAside",
+  props: {
+    width: {
+      type: String,
+      default: null
+    }
+  },
+  setup(props) {
+    const ns = useNamespace("aside");
+    return {
+      style: computed(() => {
+        return props.width ? { "--el-aside-width": props.width } : {};
+      }),
+      ns
+    };
+  }
+});
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("aside", {
+    class: normalizeClass(_ctx.ns.b()),
+    style: normalizeStyle(_ctx.style)
+  }, [
+    renderSlot(_ctx.$slots, "default")
+  ], 6);
+}
+var Aside = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+
+export { Aside as default };
 //# sourceMappingURL=aside.mjs.map

package/es/components/container/src/aside.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"aside.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
+{"version":3,"file":"aside.mjs","sources":["../../../../../../packages/components/container/src/aside.vue"],"sourcesContent":["<template>\n  <aside :class=\"ns.b()\" :style=\"style\">\n    <slot></slot>\n  </aside>\n</template>\n<script lang=\"ts\">\nimport { computed, defineComponent } from 'vue'\nimport { useNamespace } from '@element-plus/hooks'\n\nimport type { CSSProperties } from 'vue'\n\nexport default defineComponent({\n  name: 'ElAside',\n  props: {\n    width: {\n      type: String,\n      default: null,\n    },\n  },\n  setup(props) {\n    const ns = useNamespace('aside')\n\n    return {\n      style: computed(() => {\n        return props.width\n          ? ({ '--el-aside-width': props.width } as CSSProperties)\n          : {}\n      }),\n      ns,\n    }\n  },\n})\n</script>\n"],"names":["_openBlock","_normalizeClass"],"mappings":";;;;;AAWA,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,OAAO;AAAA,IACL,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA;AAAA;AAAA,EAGb,MAAM,OAAO;AACX,UAAM,KAAK,aAAa;AAExB,WAAO;AAAA,MACL,OAAO,SAAS,MAAM;AACpB,eAAO,MAAM,QACR,EAAE,oBAAoB,MAAM,UAC7B;AAAA;AAAA,MAEN;AAAA;AAAA;AAAA;2BA3BJ,wBAEQ;SAFKA,gCAAM;AAAA,IAAK,OAAKC,eAAE;AAAA;KAC7B;AAAA;;;;;;;"}

package/es/components/container/src/container.mjs

@@ -1,7 +1,48 @@
-import script from './container.vue_vue_type_script_lang.mjs';
-export { default } from './container.vue_vue_type_script_lang.mjs';
-import { render } from './container.vue_vue_type_template_id_60a2865a_lang.mjs';
+import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, renderSlot } from 'vue';
+import '../../../hooks/index.mjs';
+import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
+import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
 
-script.render = render;
-script.__file = "packages/components/container/src/container.vue";
+const _sfc_main = defineComponent({
+  name: "ElContainer",
+  props: {
+    direction: {
+      type: String,
+      default: ""
+    }
+  },
+  setup(props, { slots }) {
+    const ns = useNamespace("container");
+    const isVertical = computed(() => {
+      if (props.direction === "vertical") {
+        return true;
+      } else if (props.direction === "horizontal") {
+        return false;
+      }
+      if (slots && slots.default) {
+        const vNodes = slots.default();
+        return vNodes.some((vNode) => {
+          const tag = vNode.type.name;
+          return tag === "ElHeader" || tag === "ElFooter";
+        });
+      } else {
+        return false;
+      }
+    });
+    return {
+      isVertical,
+      ns
+    };
+  }
+});
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("section", {
+    class: normalizeClass([_ctx.ns.b(), _ctx.ns.is("vertical", _ctx.isVertical)])
+  }, [
+    renderSlot(_ctx.$slots, "default")
+  ], 2);
+}
+var Container = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+
+export { Container as default };
 //# sourceMappingURL=container.mjs.map

package/es/components/container/src/container.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"container.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
+{"version":3,"file":"container.mjs","sources":["../../../../../../packages/components/container/src/container.vue"],"sourcesContent":["<template>\n  <section :class=\"[ns.b(), ns.is('vertical', isVertical)]\">\n    <slot></slot>\n  </section>\n</template>\n<script lang=\"ts\">\nimport { defineComponent, computed } from 'vue'\nimport { useNamespace } from '@element-plus/hooks'\n\nimport type { Component, VNode } from 'vue'\n\nexport default defineComponent({\n  name: 'ElContainer',\n  props: {\n    direction: {\n      type: String,\n      default: '',\n    },\n  },\n  setup(props, { slots }) {\n    const ns = useNamespace('container')\n\n    const isVertical = computed(() => {\n      if (props.direction === 'vertical') {\n        return true\n      } else if (props.direction === 'horizontal') {\n        return false\n      }\n      if (slots && slots.default) {\n        const vNodes: VNode[] = slots.default()\n        return vNodes.some((vNode) => {\n          const tag = (vNode.type as Component).name\n          return tag === 'ElHeader' || tag === 'ElFooter'\n        })\n      } else {\n        return false\n      }\n    })\n    return {\n      isVertical,\n      ns,\n    }\n  },\n})\n</script>\n"],"names":["_openBlock"],"mappings":";;;;;AAWA,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,OAAO;AAAA,IACL,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;AAAA;AAAA,EAGb,MAAM,OAAO,EAAE,SAAS;AACtB,UAAM,KAAK,aAAa;AAExB,UAAM,aAAa,SAAS,MAAM;AAChC,UAAI,MAAM,cAAc,YAAY;AAClC,eAAO;AAAA,iBACE,MAAM,cAAc,cAAc;AAC3C,eAAO;AAAA;AAET,UAAI,SAAS,MAAM,SAAS;AAC1B,cAAM,SAAkB,MAAM;AAC9B,eAAO,OAAO,KAAK,CAAC,UAAU;AAC5B,gBAAM,MAAO,MAAM,KAAmB;AACtC,iBAAO,QAAQ,cAAc,QAAQ;AAAA;AAAA,aAElC;AACL,eAAO;AAAA;AAAA;AAGX,WAAO;AAAA,MACL;AAAA,MACA;AAAA;AAAA;AAAA;2BAvCJ,wBAEU;SAFKA,gCAAW,WAAK;AAAA;KAC7B;AAAA;;;;;;;"}

package/es/components/container/src/footer.mjs

@@ -1,7 +1,35 @@
-import script from './footer.vue_vue_type_script_lang.mjs';
-export { default } from './footer.vue_vue_type_script_lang.mjs';
-import { render } from './footer.vue_vue_type_template_id_2c2b128e_lang.mjs';
+import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, normalizeStyle, renderSlot } from 'vue';
+import '../../../hooks/index.mjs';
+import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
+import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
 
-script.render = render;
-script.__file = "packages/components/container/src/footer.vue";
+const _sfc_main = defineComponent({
+  name: "ElFooter",
+  props: {
+    height: {
+      type: String,
+      default: null
+    }
+  },
+  setup(props) {
+    const ns = useNamespace("footer");
+    return {
+      style: computed(() => props.height ? {
+        "--el-footer-height": props.height
+      } : {}),
+      ns
+    };
+  }
+});
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("footer", {
+    class: normalizeClass(_ctx.ns.b()),
+    style: normalizeStyle(_ctx.style)
+  }, [
+    renderSlot(_ctx.$slots, "default")
+  ], 6);
+}
+var Footer = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+
+export { Footer as default };
 //# sourceMappingURL=footer.mjs.map

package/es/components/container/src/footer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"footer.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
+{"version":3,"file":"footer.mjs","sources":["../../../../../../packages/components/container/src/footer.vue"],"sourcesContent":["<template>\n  <footer :class=\"ns.b()\" :style=\"style\">\n    <slot></slot>\n  </footer>\n</template>\n<script lang=\"ts\">\nimport { computed, defineComponent } from 'vue'\nimport { useNamespace } from '@element-plus/hooks'\n\nimport type { CSSProperties } from 'vue'\n\nexport default defineComponent({\n  name: 'ElFooter',\n  props: {\n    height: {\n      type: String,\n      default: null,\n    },\n  },\n  setup(props) {\n    const ns = useNamespace('footer')\n\n    return {\n      style: computed(\n        () =>\n          (props.height\n            ? {\n                '--el-footer-height': props.height,\n              }\n            : {}) as CSSProperties\n      ),\n      ns,\n    }\n  },\n})\n</script>\n"],"names":["_openBlock","_normalizeClass"],"mappings":";;;;;AAWA,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,OAAO;AAAA,IACL,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA;AAAA;AAAA,EAGb,MAAM,OAAO;AACX,UAAM,KAAK,aAAa;AAExB,WAAO;AAAA,MACL,OAAO,SACL,MACG,MAAM,SACH;AAAA,QACE,sBAAsB,MAAM;AAAA,UAE9B;AAAA,MAER;AAAA;AAAA;AAAA;2BA9BJ,wBAES;SAFKA,gCAAM;AAAA,IAAK,OAAKC,eAAE;AAAA;KAC9B;AAAA;;;;;;;"}

package/es/components/container/src/header.mjs

@@ -1,7 +1,35 @@
-import script from './header.vue_vue_type_script_lang.mjs';
-export { default } from './header.vue_vue_type_script_lang.mjs';
-import { render } from './header.vue_vue_type_template_id_0b1cdaab_lang.mjs';
+import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, normalizeStyle, renderSlot } from 'vue';
+import '../../../hooks/index.mjs';
+import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
+import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
 
-script.render = render;
-script.__file = "packages/components/container/src/header.vue";
+const _sfc_main = defineComponent({
+  name: "ElHeader",
+  props: {
+    height: {
+      type: String,
+      default: null
+    }
+  },
+  setup(props) {
+    const ns = useNamespace("header");
+    return {
+      style: computed(() => props.height ? {
+        "--el-header-height": props.height
+      } : {}),
+      ns
+    };
+  }
+});
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("header", {
+    class: normalizeClass(_ctx.ns.b()),
+    style: normalizeStyle(_ctx.style)
+  }, [
+    renderSlot(_ctx.$slots, "default")
+  ], 6);
+}
+var Header = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+
+export { Header as default };
 //# sourceMappingURL=header.mjs.map

package/es/components/container/src/header.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"header.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
+{"version":3,"file":"header.mjs","sources":["../../../../../../packages/components/container/src/header.vue"],"sourcesContent":["<template>\n  <header :class=\"ns.b()\" :style=\"style\">\n    <slot></slot>\n  </header>\n</template>\n<script lang=\"ts\">\nimport { computed, defineComponent } from 'vue'\nimport { useNamespace } from '@element-plus/hooks'\n\nimport type { CSSProperties } from 'vue'\n\nexport default defineComponent({\n  name: 'ElHeader',\n  props: {\n    height: {\n      type: String,\n      default: null,\n    },\n  },\n  setup(props) {\n    const ns = useNamespace('header')\n\n    return {\n      style: computed(\n        () =>\n          (props.height\n            ? {\n                '--el-header-height': props.height,\n              }\n            : {}) as CSSProperties\n      ),\n      ns,\n    }\n  },\n})\n</script>\n"],"names":["_openBlock","_normalizeClass"],"mappings":";;;;;AAWA,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,OAAO;AAAA,IACL,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA;AAAA;AAAA,EAGb,MAAM,OAAO;AACX,UAAM,KAAK,aAAa;AAExB,WAAO;AAAA,MACL,OAAO,SACL,MACG,MAAM,SACH;AAAA,QACE,sBAAsB,MAAM;AAAA,UAE9B;AAAA,MAER;AAAA;AAAA;AAAA;2BA9BJ,wBAES;SAFKA,gCAAM;AAAA,IAAK,OAAKC,eAAE;AAAA;KAC9B;AAAA;;;;;;;"}