element-ps 1.0.0-alpha.6 → 1.0.1

package/es/packages/components/carousel/src/main.vue_vue&type=script&lang.mjs

@@ -0,0 +1,171 @@
+import { defineComponent, reactive, ref, computed, onMounted, nextTick, onBeforeUnmount, provide } from 'vue';
+import { addResizeListener, removeResizeListener } from '../../../utils/resize-event.mjs';
+import { PsIcon } from '../../icon/index.mjs';
+import { ArrowLeft, ArrowRight } from '@element-plus/icons';
+import { debugWarn } from '../../../utils/error.mjs';
+
+var script = defineComponent({
+  name: "PsCarousel",
+  components: {
+    PsIcon,
+    ArrowLeft,
+    ArrowRight
+  },
+  props: {
+    initialIndex: {
+      type: Number,
+      default: 0
+    },
+    height: { type: String, default: "" },
+    trigger: {
+      type: String,
+      default: "hover"
+    },
+    autoplay: {
+      type: Boolean,
+      default: true
+    },
+    interval: {
+      type: Number,
+      default: 3e3
+    },
+    indicatorPosition: { type: String, default: "" },
+    indicator: {
+      type: Boolean,
+      default: true
+    },
+    arrow: {
+      type: String,
+      default: "hover"
+    },
+    type: { type: String, default: "" },
+    loop: {
+      type: Boolean,
+      default: true
+    },
+    direction: {
+      type: String,
+      default: "horizontal",
+      validator(val) {
+        return ["horizontal", "vertical"].includes(val);
+      }
+    },
+    pauseOnHover: {
+      type: Boolean,
+      default: true
+    }
+  },
+  setup(props) {
+    const data = reactive({
+      activeIndex: -1,
+      containerWidth: 0,
+      timer: null,
+      hover: false
+    });
+    const root = ref(null);
+    const items = ref([]);
+    const arrowDisplay = computed(() => props.arrow !== "never" && props.direction !== "vertical");
+    const hasLabel = computed(() => {
+      return items.value.some((item) => item.label.toString().length > 0);
+    });
+    const carouselClasses = computed(() => {
+      const classes = ["el-carousel", `el-carousel--${props.direction}`];
+      if (props.type === "card") {
+        classes.push("el-carousel--card");
+      }
+      return classes;
+    });
+    const indicatorsClasses = computed(() => {
+      const classes = [
+        "el-carousel__indicators",
+        `el-carousel__indicators--${props.direction}`
+      ];
+      if (hasLabel.value) {
+        classes.push("el-carousel__indicators--labels");
+      }
+      if (props.indicatorPosition === "outside" || props.type === "card") {
+        classes.push("el-carousel__indicators--outside");
+      }
+      return classes;
+    });
+    function setActiveItem(index) {
+      if (typeof index === "string") {
+        const filteredItems = items.value.filter((item) => item.name === index);
+        if (filteredItems.length > 0) {
+          index = items.value.indexOf(filteredItems[0]);
+        }
+      }
+      index = Number(index);
+      if (isNaN(index) || index !== Math.floor(index)) {
+        debugWarn("Carousel", "index must be an integer.");
+        return;
+      }
+      const length = items.value.length;
+      const oldIndex = data.activeIndex;
+      if (index < 0) {
+        data.activeIndex = props.loop ? length - 1 : 0;
+      } else if (index >= length) {
+        data.activeIndex = props.loop ? 0 : length - 1;
+      } else {
+        data.activeIndex = index;
+      }
+      if (oldIndex === data.activeIndex) {
+        resetItemPosition(oldIndex);
+      }
+    }
+    function resetItemPosition(oldIndex) {
+      items.value.forEach((item, index) => {
+        item.translateItem(index, data.activeIndex, oldIndex);
+      });
+    }
+    function addItem(item) {
+      items.value.push(item);
+    }
+    function removeItem(uid) {
+      const index = items.value.findIndex((item) => item.uid === uid);
+      if (index !== -1) {
+        items.value.splice(index, 1);
+        if (data.activeIndex === index)
+          next();
+      }
+    }
+    function next() {
+      setActiveItem(data.activeIndex + 1);
+    }
+    onMounted(() => {
+      nextTick(() => {
+        addResizeListener(root.value, resetItemPosition);
+        if (props.initialIndex < items.value.length && props.initialIndex >= 0) {
+          data.activeIndex = props.initialIndex;
+        }
+      });
+    });
+    onBeforeUnmount(() => {
+      if (root.value)
+        removeResizeListener(root.value, resetItemPosition);
+    });
+    provide("injectCarouselScope", {
+      root,
+      direction: props.direction,
+      type: props.type,
+      items,
+      loop: props.loop,
+      addItem,
+      removeItem,
+      setActiveItem
+    });
+    return {
+      data,
+      props,
+      items,
+      arrowDisplay,
+      carouselClasses,
+      indicatorsClasses,
+      hasLabel,
+      root
+    };
+  }
+});
+
+export { script as default };
+//# sourceMappingURL=main.vue_vue&type=script&lang.mjs.map

package/es/packages/components/carousel/src/main.vue_vue&type=script&lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.vue_vue&type=script&lang.mjs","sources":["../../../../../../../packages/components/carousel/src/main.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"root\"\n    :class=\"carouselClasses\"\n  >\n    <div class=\"el-carousel__container\" :style=\"{ height: height }\">\n      <transition v-if=\"arrowDisplay\" name=\"carousel-arrow-left\">\n        <button\n          type=\"button\"\n          class=\"el-carousel__arrow el-carousel__arrow--left\"\n        >\n          <ps-icon>\n            <arrow-left />\n          </ps-icon>\n        </button>\n      </transition>\n      <transition v-if=\"arrowDisplay\" name=\"carousel-arrow-right\">\n        <button\n          type=\"button\"\n          class=\"el-carousel__arrow el-carousel__arrow--right\"\n        >\n          <ps-icon>\n            <arrow-right />\n          </ps-icon>\n        </button>\n      </transition>\n      <slot></slot>\n    </div>\n    <ul v-if=\"indicatorPosition !== 'none'\" :class=\"indicatorsClasses\">\n      <li\n        v-for=\"(item, index) in items\"\n        :key=\"index\"\n        :class=\"[\n          'el-carousel__indicator',\n          'el-carousel__indicator--' + direction,\n          { 'is-active': index === data.activeIndex },\n        ]\"\n      >\n        <button class=\"el-carousel__button\">\n          <span v-if=\"hasLabel\">{{ item.label }}</span>\n        </button>\n      </li>\n    </ul>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  reactive,\n  computed,\n  ref,\n  provide,\n  onMounted,\n  onBeforeUnmount,\n  nextTick,\n} from 'vue'\nimport {\n  addResizeListener,\n  removeResizeListener,\n} from '@element-ps/utils/resize-event'\nimport { PsIcon } from '@element-ps/components/icon'\nimport { ArrowLeft, ArrowRight } from '@element-plus/icons'\n\nimport { debugWarn } from '@element-ps/utils/error'\nimport type {\n  ICarouselProps,\n  CarouselItem,\n  InjectCarouselScope,\n} from './carousel'\n\nexport default defineComponent({\n  name: 'PsCarousel',\n  components: {\n    PsIcon,\n    ArrowLeft,\n    ArrowRight,\n  },\n  props: {\n    initialIndex: {\n      type: Number,\n      default: 0,\n    },\n    height: { type: String, default: '' },\n    trigger: {\n      type: String,\n      default: 'hover',\n    },\n    autoplay: {\n      type: Boolean,\n      default: true,\n    },\n    interval: {\n      type: Number,\n      default: 3000,\n    },\n    indicatorPosition: { type: String, default: '' },\n    indicator: {\n      type: Boolean,\n      default: true,\n    },\n    arrow: {\n      type: String,\n      default: 'hover',\n    },\n    type: { type: String, default: '' },\n    loop: {\n      type: Boolean,\n      default: true,\n    },\n    direction: {\n      type: String,\n      default: 'horizontal',\n      validator(val: string) {\n        return ['horizontal', 'vertical'].includes(val)\n      },\n    },\n    pauseOnHover: {\n      type: Boolean,\n      default: true,\n    },\n  },\n  setup(props: ICarouselProps) {\n    // data\n    const data = reactive<{\n      activeIndex: number\n      containerWidth: number\n      timer: null | ReturnType<typeof setInterval>\n      hover: boolean\n    }>({\n      activeIndex: -1,\n      containerWidth: 0,\n      timer: null,\n      hover: false,\n    })\n\n    // refs\n    const root = ref(null)\n    const items = ref<CarouselItem[]>([])\n\n    // computed\n    const arrowDisplay = computed(\n      () => props.arrow !== 'never' && props.direction !== 'vertical'\n    )\n\n    const hasLabel = computed(() => {\n      return items.value.some((item) => item.label.toString().length > 0)\n    })\n\n    const carouselClasses = computed(() => {\n      const classes = ['el-carousel', `el-carousel--${props.direction}`]\n      if (props.type === 'card') {\n        classes.push('el-carousel--card')\n      }\n      return classes\n    })\n\n    const indicatorsClasses = computed(() => {\n      const classes = [\n        'el-carousel__indicators',\n        `el-carousel__indicators--${props.direction}`,\n      ]\n      if (hasLabel.value) {\n        classes.push('el-carousel__indicators--labels')\n      }\n      if (props.indicatorPosition === 'outside' || props.type === 'card') {\n        classes.push('el-carousel__indicators--outside')\n      }\n      return classes\n    })\n\n    function setActiveItem(index) {\n      if (typeof index === 'string') {\n        const filteredItems = items.value.filter((item) => item.name === index)\n        if (filteredItems.length > 0) {\n          index = items.value.indexOf(filteredItems[0])\n        }\n      }\n      index = Number(index)\n      if (isNaN(index) || index !== Math.floor(index)) {\n        debugWarn('Carousel', 'index must be an integer.')\n        return\n      }\n      const length = items.value.length\n      const oldIndex = data.activeIndex\n      if (index < 0) {\n        data.activeIndex = props.loop ? length - 1 : 0\n      } else if (index >= length) {\n        data.activeIndex = props.loop ? 0 : length - 1\n      } else {\n        data.activeIndex = index\n      }\n      if (oldIndex === data.activeIndex) {\n        resetItemPosition(oldIndex)\n      }\n    }\n\n    function resetItemPosition(oldIndex) {\n      items.value.forEach((item, index) => {\n        item.translateItem(index, data.activeIndex, oldIndex)\n      })\n    }\n\n    function addItem(item) {\n      items.value.push(item)\n    }\n\n    function removeItem(uid) {\n      const index = items.value.findIndex((item) => item.uid === uid)\n      if (index !== -1) {\n        items.value.splice(index, 1)\n        if (data.activeIndex === index) next()\n      }\n    }\n\n    function next() {\n      setActiveItem(data.activeIndex + 1)\n    }\n\n    // lifecycle\n    onMounted(() => {\n      nextTick(() => {\n        addResizeListener(root.value, resetItemPosition)\n        if (\n          props.initialIndex < items.value.length &&\n          props.initialIndex >= 0\n        ) {\n          data.activeIndex = props.initialIndex\n        }\n      })\n    })\n\n    onBeforeUnmount(() => {\n      if (root.value) removeResizeListener(root.value, resetItemPosition)\n    })\n\n    // provide\n    provide<InjectCarouselScope>('injectCarouselScope', {\n      root,\n      direction: props.direction,\n      type: props.type,\n      items,\n      loop: props.loop,\n      addItem,\n      removeItem,\n      setActiveItem,\n    })\n\n    return {\n      data,\n      props,\n      items,\n\n      arrowDisplay,\n      carouselClasses,\n      indicatorsClasses,\n      hasLabel,\n\n      root,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":"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"}

package/es/packages/components/carousel/src/main.vue_vue&type=template&id=1303d144&lang.mjs

@@ -0,0 +1,82 @@
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, createBlock, Transition, withCtx, createVNode, createCommentVNode, renderSlot, Fragment, renderList, toDisplayString } from 'vue';
+
+const _hoisted_1 = {
+  type: "button",
+  class: "el-carousel__arrow el-carousel__arrow--left"
+};
+const _hoisted_2 = {
+  type: "button",
+  class: "el-carousel__arrow el-carousel__arrow--right"
+};
+const _hoisted_3 = { class: "el-carousel__button" };
+const _hoisted_4 = { key: 0 };
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_arrow_left = resolveComponent("arrow-left");
+  const _component_ps_icon = resolveComponent("ps-icon");
+  const _component_arrow_right = resolveComponent("arrow-right");
+  return openBlock(), createElementBlock("div", {
+    ref: "root",
+    class: normalizeClass(_ctx.carouselClasses)
+  }, [
+    createElementVNode("div", {
+      class: "el-carousel__container",
+      style: normalizeStyle({ height: _ctx.height })
+    }, [
+      _ctx.arrowDisplay ? (openBlock(), createBlock(Transition, {
+        key: 0,
+        name: "carousel-arrow-left"
+      }, {
+        default: withCtx(() => [
+          createElementVNode("button", _hoisted_1, [
+            createVNode(_component_ps_icon, null, {
+              default: withCtx(() => [
+                createVNode(_component_arrow_left)
+              ]),
+              _: 1
+            })
+          ])
+        ]),
+        _: 1
+      })) : createCommentVNode("v-if", true),
+      _ctx.arrowDisplay ? (openBlock(), createBlock(Transition, {
+        key: 1,
+        name: "carousel-arrow-right"
+      }, {
+        default: withCtx(() => [
+          createElementVNode("button", _hoisted_2, [
+            createVNode(_component_ps_icon, null, {
+              default: withCtx(() => [
+                createVNode(_component_arrow_right)
+              ]),
+              _: 1
+            })
+          ])
+        ]),
+        _: 1
+      })) : createCommentVNode("v-if", true),
+      renderSlot(_ctx.$slots, "default")
+    ], 4),
+    _ctx.indicatorPosition !== "none" ? (openBlock(), createElementBlock("ul", {
+      key: 0,
+      class: normalizeClass(_ctx.indicatorsClasses)
+    }, [
+      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.items, (item, index) => {
+        return openBlock(), createElementBlock("li", {
+          key: index,
+          class: normalizeClass([
+            "el-carousel__indicator",
+            "el-carousel__indicator--" + _ctx.direction,
+            { "is-active": index === _ctx.data.activeIndex }
+          ])
+        }, [
+          createElementVNode("button", _hoisted_3, [
+            _ctx.hasLabel ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(item.label), 1)) : createCommentVNode("v-if", true)
+          ])
+        ], 2);
+      }), 128))
+    ], 2)) : createCommentVNode("v-if", true)
+  ], 2);
+}
+
+export { render };
+//# sourceMappingURL=main.vue_vue&type=template&id=1303d144&lang.mjs.map

package/es/packages/components/carousel/src/main.vue_vue&type=template&id=1303d144&lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.vue_vue&type=template&id=1303d144&lang.mjs","sources":["../../../../../../../packages/components/carousel/src/main.vue?vue&type=template&id=1303d144&lang.js"],"sourcesContent":["<template>\n  <div\n    ref=\"root\"\n    :class=\"carouselClasses\"\n  >\n    <div class=\"el-carousel__container\" :style=\"{ height: height }\">\n      <transition v-if=\"arrowDisplay\" name=\"carousel-arrow-left\">\n        <button\n          type=\"button\"\n          class=\"el-carousel__arrow el-carousel__arrow--left\"\n        >\n          <ps-icon>\n            <arrow-left />\n          </ps-icon>\n        </button>\n      </transition>\n      <transition v-if=\"arrowDisplay\" name=\"carousel-arrow-right\">\n        <button\n          type=\"button\"\n          class=\"el-carousel__arrow el-carousel__arrow--right\"\n        >\n          <ps-icon>\n            <arrow-right />\n          </ps-icon>\n        </button>\n      </transition>\n      <slot></slot>\n    </div>\n    <ul v-if=\"indicatorPosition !== 'none'\" :class=\"indicatorsClasses\">\n      <li\n        v-for=\"(item, index) in items\"\n        :key=\"index\"\n        :class=\"[\n          'el-carousel__indicator',\n          'el-carousel__indicator--' + direction,\n          { 'is-active': index === data.activeIndex },\n        ]\"\n      >\n        <button class=\"el-carousel__button\">\n          <span v-if=\"hasLabel\">{{ item.label }}</span>\n        </button>\n      </li>\n    </ul>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  reactive,\n  computed,\n  ref,\n  provide,\n  onMounted,\n  onBeforeUnmount,\n  nextTick,\n} from 'vue'\nimport {\n  addResizeListener,\n  removeResizeListener,\n} from '@element-ps/utils/resize-event'\nimport { PsIcon } from '@element-ps/components/icon'\nimport { ArrowLeft, ArrowRight } from '@element-plus/icons'\n\nimport { debugWarn } from '@element-ps/utils/error'\nimport type {\n  ICarouselProps,\n  CarouselItem,\n  InjectCarouselScope,\n} from './carousel'\n\nexport default defineComponent({\n  name: 'PsCarousel',\n  components: {\n    PsIcon,\n    ArrowLeft,\n    ArrowRight,\n  },\n  props: {\n    initialIndex: {\n      type: Number,\n      default: 0,\n    },\n    height: { type: String, default: '' },\n    trigger: {\n      type: String,\n      default: 'hover',\n    },\n    autoplay: {\n      type: Boolean,\n      default: true,\n    },\n    interval: {\n      type: Number,\n      default: 3000,\n    },\n    indicatorPosition: { type: String, default: '' },\n    indicator: {\n      type: Boolean,\n      default: true,\n    },\n    arrow: {\n      type: String,\n      default: 'hover',\n    },\n    type: { type: String, default: '' },\n    loop: {\n      type: Boolean,\n      default: true,\n    },\n    direction: {\n      type: String,\n      default: 'horizontal',\n      validator(val: string) {\n        return ['horizontal', 'vertical'].includes(val)\n      },\n    },\n    pauseOnHover: {\n      type: Boolean,\n      default: true,\n    },\n  },\n  setup(props: ICarouselProps) {\n    // data\n    const data = reactive<{\n      activeIndex: number\n      containerWidth: number\n      timer: null | ReturnType<typeof setInterval>\n      hover: boolean\n    }>({\n      activeIndex: -1,\n      containerWidth: 0,\n      timer: null,\n      hover: false,\n    })\n\n    // refs\n    const root = ref(null)\n    const items = ref<CarouselItem[]>([])\n\n    // computed\n    const arrowDisplay = computed(\n      () => props.arrow !== 'never' && props.direction !== 'vertical'\n    )\n\n    const hasLabel = computed(() => {\n      return items.value.some((item) => item.label.toString().length > 0)\n    })\n\n    const carouselClasses = computed(() => {\n      const classes = ['el-carousel', `el-carousel--${props.direction}`]\n      if (props.type === 'card') {\n        classes.push('el-carousel--card')\n      }\n      return classes\n    })\n\n    const indicatorsClasses = computed(() => {\n      const classes = [\n        'el-carousel__indicators',\n        `el-carousel__indicators--${props.direction}`,\n      ]\n      if (hasLabel.value) {\n        classes.push('el-carousel__indicators--labels')\n      }\n      if (props.indicatorPosition === 'outside' || props.type === 'card') {\n        classes.push('el-carousel__indicators--outside')\n      }\n      return classes\n    })\n\n    function setActiveItem(index) {\n      if (typeof index === 'string') {\n        const filteredItems = items.value.filter((item) => item.name === index)\n        if (filteredItems.length > 0) {\n          index = items.value.indexOf(filteredItems[0])\n        }\n      }\n      index = Number(index)\n      if (isNaN(index) || index !== Math.floor(index)) {\n        debugWarn('Carousel', 'index must be an integer.')\n        return\n      }\n      const length = items.value.length\n      const oldIndex = data.activeIndex\n      if (index < 0) {\n        data.activeIndex = props.loop ? length - 1 : 0\n      } else if (index >= length) {\n        data.activeIndex = props.loop ? 0 : length - 1\n      } else {\n        data.activeIndex = index\n      }\n      if (oldIndex === data.activeIndex) {\n        resetItemPosition(oldIndex)\n      }\n    }\n\n    function resetItemPosition(oldIndex) {\n      items.value.forEach((item, index) => {\n        item.translateItem(index, data.activeIndex, oldIndex)\n      })\n    }\n\n    function addItem(item) {\n      items.value.push(item)\n    }\n\n    function removeItem(uid) {\n      const index = items.value.findIndex((item) => item.uid === uid)\n      if (index !== -1) {\n        items.value.splice(index, 1)\n        if (data.activeIndex === index) next()\n      }\n    }\n\n    function next() {\n      setActiveItem(data.activeIndex + 1)\n    }\n\n    // lifecycle\n    onMounted(() => {\n      nextTick(() => {\n        addResizeListener(root.value, resetItemPosition)\n        if (\n          props.initialIndex < items.value.length &&\n          props.initialIndex >= 0\n        ) {\n          data.activeIndex = props.initialIndex\n        }\n      })\n    })\n\n    onBeforeUnmount(() => {\n      if (root.value) removeResizeListener(root.value, resetItemPosition)\n    })\n\n    // provide\n    provide<InjectCarouselScope>('injectCarouselScope', {\n      root,\n      direction: props.direction,\n      type: props.type,\n      items,\n      loop: props.loop,\n      addItem,\n      removeItem,\n      setActiveItem,\n    })\n\n    return {\n      data,\n      props,\n      items,\n\n      arrowDisplay,\n      carouselClasses,\n      indicatorsClasses,\n      hasLabel,\n\n      root,\n    }\n  },\n})\n</script>\n"],"names":["_createElementBlock","_createElementVNode","_createBlock","_createVNode","_renderSlot"],"mappings":";;;EAQU,MAAK;AAAA,EACL,OAAM;AAAA;;EASN,MAAK;AAAA,EACL,OAAM;AAAA;qBAmBA,OAAM;;;;;;sBArCpBA;IACE,KAAI;AAAA,IACH,sBAAO;;IAERC;MAAK,OAAM;AAAA,MAA0B,gCAAiB;;MAClC,kCAAlBC;;QAAgC,MAAK;AAAA;yBACnC;UAAAD,6BAAA;YAIEE;+BACE;gBAAAA;;;;;;;;MAIY,kCAAlBD;;QAAgC,MAAK;AAAA;yBACnC;UAAAD,6BAAA;YAIEE;+BACE;gBAAAA;;;;;;;;MAINC;;IAEQ,kDAAVJ;;MAAyC,sBAAO;;wBAC9CA,8CAC0B,aAAhB,MAAM;4BADhBA;UAEG,KAAK;AAAA,UACL;;;;;;UAMDC,6BAAA;YACc,8BAAZD,uDAAyB,KAAK;;;;;;;;;;"}

package/es/packages/components/cascader/index.mjs

@@ -0,0 +1,11 @@
+import './src/index.mjs';
+import script from './src/index.vue_vue&type=script&lang.mjs';
+
+script.install = (app) => {
+  app.component(script.name, script);
+};
+const _Cascader = script;
+const PsCascader = _Cascader;
+
+export { PsCascader, _Cascader as default };
+//# sourceMappingURL=index.mjs.map

package/es/packages/components/cascader/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../../../../../packages/components/cascader/index.ts"],"sourcesContent":["import Cascader from './src/index.vue'\nimport type { App } from 'vue'\nimport type { SFCWithInstall } from '@element-ps/utils/types'\n\nCascader.install = (app: App): void => {\n  app.component(Cascader.name, Cascader)\n}\n\nconst _Cascader = Cascader as SFCWithInstall<typeof Cascader>\n\nexport default _Cascader\nexport const PsCascader = _Cascader\n"],"names":["Cascader"],"mappings":";;;AAIAA,OAAS,UAAU,CAAC,QAAmB;AACrC,MAAI,UAAUA,OAAS,MAAMA;AAAA;MAGzB,YAAYA;MAGL,aAAa;;;;"}

package/es/packages/components/cascader/src/index.mjs

@@ -0,0 +1,7 @@
+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=0429c2db&lang.mjs';
+
+script.render = render;
+script.__file = "packages/components/cascader/src/index.vue";
+//# sourceMappingURL=index.mjs.map

package/es/packages/components/cascader/src/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/es/packages/components/cascader/src/index.vue_vue&type=script&lang.mjs

@@ -0,0 +1,134 @@
+import { defineComponent, inject, ref, computed, onMounted } from 'vue';
+import '../../cascader-panel/index.mjs';
+import { PsInput } from '../../input/index.mjs';
+import { PsTag } from '../../tag/index.mjs';
+import { PsIcon } from '../../icon/index.mjs';
+import '../../../tokens/index.mjs';
+import '../../../hooks/index.mjs';
+import { useGlobalConfig } from '../../../utils/util.mjs';
+import { isValidComponentSize } from '../../../utils/validators.mjs';
+import { CircleClose, Check, ArrowDown } from '@element-plus/icons';
+import { CommonProps } from '../../cascader-panel/src/config.mjs';
+import { useLocaleInject } from '../../../hooks/use-locale/index.mjs';
+import { elFormKey, elFormItemKey } from '../../../tokens/form.mjs';
+
+const DEFAULT_INPUT_HEIGHT = 40;
+const INPUT_HEIGHT_MAP = {
+  medium: 36,
+  small: 32,
+  mini: 28
+};
+var script = defineComponent({
+  name: "PsCascader",
+  components: {
+    PsInput,
+    PsTag,
+    PsIcon,
+    CircleClose,
+    Check,
+    ArrowDown
+  },
+  props: {
+    ...CommonProps,
+    size: {
+      type: String,
+      validator: isValidComponentSize
+    },
+    placeholder: {
+      type: String
+    },
+    disabled: Boolean,
+    clearable: Boolean,
+    filterable: Boolean,
+    filterMethod: {
+      type: Function,
+      default: (node, keyword) => node.text.includes(keyword)
+    },
+    separator: {
+      type: String,
+      default: " / "
+    },
+    showAllLevels: {
+      type: Boolean,
+      default: true
+    },
+    collapseTags: Boolean,
+    debounce: {
+      type: Number,
+      default: 300
+    },
+    beforeFilter: {
+      type: Function,
+      default: () => true
+    },
+    popperClass: {
+      type: String,
+      default: ""
+    },
+    popperAppendToBody: {
+      type: Boolean,
+      default: true
+    },
+    widget: {
+      type: String
+    }
+  },
+  setup(props) {
+    let inputInitialHeight = 0;
+    const { t } = useLocaleInject();
+    const $ELEMENT = useGlobalConfig();
+    const elForm = inject(elFormKey, {});
+    const elFormItem = inject(elFormItemKey, {});
+    const input = ref(null);
+    const tagWrapper = ref(null);
+    const panel = ref(null);
+    const inputHover = ref(false);
+    const filtering = ref(false);
+    const inputValue = ref("");
+    const searchInputValue = ref("");
+    const presentTags = ref([]);
+    const isDisabled = computed(() => props.disabled || elForm.disabled);
+    const inputPlaceholder = computed(() => props.placeholder || t("el.cascader.placeholder"));
+    const realSize = computed(() => props.size || elFormItem.size || $ELEMENT.size);
+    const tagSize = computed(() => ["small", "mini"].includes(realSize.value) ? "mini" : "small");
+    const multiple = computed(() => !!props.props.multiple);
+    const readonly = computed(() => !props.filterable || multiple.value);
+    const checkedNodes = computed(() => {
+      var _a;
+      return ((_a = panel.value) == null ? void 0 : _a.checkedNodes) || [];
+    });
+    const clearBtnVisible = computed(() => {
+      if (!props.clearable || isDisabled.value || filtering.value || !inputHover.value)
+        return false;
+      return !!checkedNodes.value.length;
+    });
+    const presentText = computed(() => {
+      const { showAllLevels, separator } = props;
+      const nodes = checkedNodes.value;
+      return nodes.length ? multiple.value ? " " : nodes[0].calcText(showAllLevels, separator) : "";
+    });
+    onMounted(() => {
+      var _a;
+      const inputEl = (_a = input.value) == null ? void 0 : _a.$el;
+      inputInitialHeight = (inputEl == null ? void 0 : inputEl.offsetHeight) || INPUT_HEIGHT_MAP[realSize.value] || DEFAULT_INPUT_HEIGHT;
+    });
+    return {
+      input,
+      tagWrapper,
+      inputPlaceholder,
+      presentText,
+      inputValue,
+      searchInputValue,
+      presentTags,
+      isDisabled,
+      realSize,
+      tagSize,
+      multiple,
+      readonly,
+      clearBtnVisible
+    };
+  }
+});
+
+export { script as default };
+//# sourceMappingURL=index.vue_vue&type=script&lang.mjs.map

package/es/packages/components/cascader/src/index.vue_vue&type=script&lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.vue_vue&type=script&lang.mjs","sources":["../../../../../../../packages/components/cascader/src/index.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n          'el-cascader',\n          realSize && `el-cascader--${realSize}`,\n          { 'is-disabled': isDisabled },\n        ]\"\n  >\n    <ps-input\n      ref='input'\n      v-model.trim='inputValue'\n      :placeholder='inputPlaceholder'\n      :readonly='readonly'\n      :disabled='isDisabled'\n      :validate-event='false'\n      :size='realSize'\n      :class=\"{ 'is-focus': popperVisible }\"\n    >\n      <template #suffix>\n        <ps-icon\n          v-if='clearBtnVisible'\n          key='clear'\n          class='el-input__icon icon-circle-close'\n        >\n          <circle-close />\n        </ps-icon>\n        <ps-icon\n          v-else\n          key='arrow-down'\n          :class=\"[\n                'el-input__icon',\n                'icon-arrow-down',\n              ]\"\n        >\n          <arrow-down />\n        </ps-icon>\n      </template>\n    </ps-input>\n\n    <div v-if='multiple' ref='tagWrapper' class='el-cascader__tags'>\n      <ps-tag\n        v-for='tag in presentTags'\n        :key='tag.key'\n        type='info'\n        :size='tagSize'\n        :hit='tag.hitState'\n        :closable='tag.closable'\n        disable-transitions\n      >\n        <span>{{ tag.text }}</span>\n      </ps-tag>\n      <input\n        v-if='filterable && !isDisabled'\n        v-model.trim='searchInputValue'\n        type='text'\n        class='el-cascader__search-input'\n        :placeholder=\"presentText ? '' : inputPlaceholder\"\n      />\n    </div>\n  </div>\n</template>\n\n<script lang='ts'>\nimport {\n  computed,\n  defineComponent,\n  inject,\n  onMounted,\n  ref,\n} from 'vue'\n\nimport PsCascaderPanel, {\n  CommonProps\n} from '@element-ps/components/cascader-panel'\nimport PsInput from '@element-ps/components/input'\nimport PsTag from '@element-ps/components/tag'\nimport PsIcon from '@element-ps/components/icon'\n\nimport { elFormKey, elFormItemKey } from '@element-ps/tokens'\nimport { useLocaleInject } from '@element-ps/hooks'\n\nimport { useGlobalConfig } from '@element-ps/utils/util'\nimport { isValidComponentSize } from '@element-ps/utils/validators'\nimport { CircleClose, Check, ArrowDown } from '@element-plus/icons'\n\nimport type { ComputedRef, PropType, Ref } from 'vue'\nimport type { ElFormContext, ElFormItemContext } from '@element-ps/tokens'\nimport type {\n  CascaderNode,\n  Tag\n} from '@element-ps/components/cascader-panel'\nimport type { ComponentSize } from '@element-ps/utils/types'\n\ntype cascaderPanelType = InstanceType<typeof PsCascaderPanel>\ntype inputType = InstanceType<typeof PsInput>\n\nconst DEFAULT_INPUT_HEIGHT = 40\n\nconst INPUT_HEIGHT_MAP = {\n  medium: 36,\n  small: 32,\n  mini: 28\n}\n\nexport default defineComponent({\n  name: 'PsCascader',\n  components: {\n    PsInput,\n    PsTag,\n    PsIcon,\n    CircleClose,\n    Check,\n    ArrowDown\n  },\n  props: {\n    ...CommonProps,\n    size: {\n      type: String as PropType<ComponentSize>,\n      validator: isValidComponentSize\n    },\n    placeholder: {\n      type: String\n    },\n    disabled: Boolean,\n    clearable: Boolean,\n    filterable: Boolean,\n    filterMethod: {\n      type: Function as PropType<(node: CascaderNode, keyword: string) => boolean>,\n      default: (node: CascaderNode, keyword: string) =>\n        node.text.includes(keyword)\n    },\n    separator: {\n      type: String,\n      default: ' / '\n    },\n    showAllLevels: {\n      type: Boolean,\n      default: true\n    },\n    collapseTags: Boolean,\n    debounce: {\n      type: Number,\n      default: 300\n    },\n    beforeFilter: {\n      type: Function as PropType<(value: string) => boolean | Promise<any>>,\n      default: () => true\n    },\n    popperClass: {\n      type: String,\n      default: ''\n    },\n    popperAppendToBody: {\n      type: Boolean,\n      default: true\n    },\n    widget: {\n      type: String\n    }\n  },\n  setup(props) {\n    let inputInitialHeight = 0\n\n    const { t } = useLocaleInject()\n    const $ELEMENT = useGlobalConfig()\n    const elForm = inject(elFormKey, {} as ElFormContext)\n    const elFormItem = inject(elFormItemKey, {} as ElFormItemContext)\n\n    const input: Ref<inputType | null> = ref(null)\n    const tagWrapper = ref(null)\n    const panel: Ref<cascaderPanelType | null> = ref(null)\n    const inputHover = ref(false)\n    const filtering = ref(false)\n    const inputValue = ref('')\n    const searchInputValue = ref('')\n    const presentTags: Ref<Tag[]> = ref([])\n\n    const isDisabled = computed(() => props.disabled || elForm.disabled)\n    const inputPlaceholder = computed(\n      () => props.placeholder || t('el.cascader.placeholder')\n    )\n    const realSize: ComputedRef<ComponentSize> = computed(\n      () => props.size || elFormItem.size || $ELEMENT.size\n    )\n    const tagSize = computed(() =>\n      ['small', 'mini'].includes(realSize.value) ? 'mini' : 'small'\n    )\n    const multiple = computed(() => !!props.props.multiple)\n    const readonly = computed(() => !props.filterable || multiple.value)\n\n    const checkedNodes: ComputedRef<CascaderNode[]> = computed(\n      () => panel.value?.checkedNodes || []\n    )\n    const clearBtnVisible = computed(() => {\n      if (\n        !props.clearable ||\n        isDisabled.value ||\n        filtering.value ||\n        !inputHover.value\n      )\n        return false\n\n      return !!checkedNodes.value.length\n    })\n    const presentText = computed(() => {\n      const { showAllLevels, separator } = props\n      const nodes = checkedNodes.value\n      return nodes.length\n        ? multiple.value\n          ? ' '\n          : nodes[0].calcText(showAllLevels, separator)\n        : ''\n    })\n\n    onMounted(() => {\n      const inputEl = input.value?.$el\n      inputInitialHeight =\n        inputEl?.offsetHeight ||\n        INPUT_HEIGHT_MAP[realSize.value] ||\n        DEFAULT_INPUT_HEIGHT\n    })\n\n    return {\n      input,\n      tagWrapper,\n      inputPlaceholder,\n      presentText,\n      inputValue,\n      searchInputValue,\n      presentTags,\n      isDisabled,\n      realSize,\n      tagSize,\n      multiple,\n      readonly,\n      clearBtnVisible,\n    }\n  }\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAgGA,MAAM,uBAAuB;AAE7B,MAAM,mBAAmB;AAAA,EACvB,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,MAAM;AAAA;AAGR,aAAe,gBAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,EAEF,OAAO;AAAA,OACF;AAAA,IACH,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,WAAW;AAAA;AAAA,IAEb,aAAa;AAAA,MACX,MAAM;AAAA;AAAA,IAER,UAAU;AAAA,IACV,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,SAAS,CAAC,MAAoB,YAC5B,KAAK,KAAK,SAAS;AAAA;AAAA,IAEvB,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,eAAe;AAAA,MACb,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,cAAc;AAAA,IACd,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,SAAS,MAAM;AAAA;AAAA,IAEjB,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,oBAAoB;AAAA,MAClB,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,QAAQ;AAAA,MACN,MAAM;AAAA;AAAA;AAAA,EAGV,MAAM,OAAO;AACX,QAAI,qBAAqB;AAEzB,UAAM,EAAE,MAAM;AACd,UAAM,WAAW;AACjB,UAAM,SAAS,OAAO,WAAW;AACjC,UAAM,aAAa,OAAO,eAAe;AAEzC,UAAM,QAA+B,IAAI;AACzC,UAAM,aAAa,IAAI;AACvB,UAAM,QAAuC,IAAI;AACjD,UAAM,aAAa,IAAI;AACvB,UAAM,YAAY,IAAI;AACtB,UAAM,aAAa,IAAI;AACvB,UAAM,mBAAmB,IAAI;AAC7B,UAAM,cAA0B,IAAI;AAEpC,UAAM,aAAa,SAAS,MAAM,MAAM,YAAY,OAAO;AAC3D,UAAM,mBAAmB,SACvB,MAAM,MAAM,eAAe,EAAE;AAE/B,UAAM,WAAuC,SAC3C,MAAM,MAAM,QAAQ,WAAW,QAAQ,SAAS;AAElD,UAAM,UAAU,SAAS,MACvB,CAAC,SAAS,QAAQ,SAAS,SAAS,SAAS,SAAS;AAExD,UAAM,WAAW,SAAS,MAAM,CAAC,CAAC,MAAM,MAAM;AAC9C,UAAM,WAAW,SAAS,MAAM,CAAC,MAAM,cAAc,SAAS;AAE9D,UAAM,eAA4C,SAChD,MAAG;;AAAG,0BAAM,UAAN,mBAAa,iBAAgB;AAAA;AAErC,UAAM,kBAAkB,SAAS,MAAM;AACrC,UACE,CAAC,MAAM,aACP,WAAW,SACX,UAAU,SACV,CAAC,WAAW;AAEZ,eAAO;AAET,aAAO,CAAC,CAAC,aAAa,MAAM;AAAA;AAE9B,UAAM,cAAc,SAAS,MAAM;AACjC,YAAM,EAAE,eAAe,cAAc;AACrC,YAAM,QAAQ,aAAa;AAC3B,aAAO,MAAM,SACT,SAAS,QACP,MACA,MAAM,GAAG,SAAS,eAAe,aACnC;AAAA;AAGN,cAAU,MAAM;;AACd,YAAM,UAAU,YAAM,UAAN,mBAAa;AAC7B,2BACE,oCAAS,iBACT,iBAAiB,SAAS,UAC1B;AAAA;AAGJ,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;"}

package/es/packages/components/cascader/src/index.vue_vue&type=template&id=0429c2db&lang.mjs

@@ -0,0 +1,93 @@
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createVNode, withCtx, createBlock, Fragment, renderList, createElementVNode, toDisplayString, withDirectives, vModelText, createCommentVNode } from 'vue';
+
+const _hoisted_1 = {
+  key: 0,
+  ref: "tagWrapper",
+  class: "el-cascader__tags"
+};
+const _hoisted_2 = ["placeholder"];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_circle_close = resolveComponent("circle-close");
+  const _component_ps_icon = resolveComponent("ps-icon");
+  const _component_arrow_down = resolveComponent("arrow-down");
+  const _component_ps_input = resolveComponent("ps-input");
+  const _component_ps_tag = resolveComponent("ps-tag");
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass([
+      "el-cascader",
+      _ctx.realSize && `el-cascader--${_ctx.realSize}`,
+      { "is-disabled": _ctx.isDisabled }
+    ])
+  }, [
+    createVNode(_component_ps_input, {
+      ref: "input",
+      modelValue: _ctx.inputValue,
+      "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.inputValue = $event),
+      modelModifiers: { trim: true },
+      placeholder: _ctx.inputPlaceholder,
+      readonly: _ctx.readonly,
+      disabled: _ctx.isDisabled,
+      "validate-event": false,
+      size: _ctx.realSize,
+      class: normalizeClass({ "is-focus": _ctx.popperVisible })
+    }, {
+      suffix: withCtx(() => [
+        _ctx.clearBtnVisible ? (openBlock(), createBlock(_component_ps_icon, {
+          key: "clear",
+          class: "el-input__icon icon-circle-close"
+        }, {
+          default: withCtx(() => [
+            createVNode(_component_circle_close)
+          ]),
+          _: 1
+        })) : (openBlock(), createBlock(_component_ps_icon, {
+          key: "arrow-down",
+          class: normalizeClass([
+            "el-input__icon",
+            "icon-arrow-down"
+          ])
+        }, {
+          default: withCtx(() => [
+            createVNode(_component_arrow_down)
+          ]),
+          _: 1
+        }))
+      ]),
+      _: 1
+    }, 8, ["modelValue", "placeholder", "readonly", "disabled", "size", "class"]),
+    _ctx.multiple ? (openBlock(), createElementBlock("div", _hoisted_1, [
+      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.presentTags, (tag) => {
+        return openBlock(), createBlock(_component_ps_tag, {
+          key: tag.key,
+          type: "info",
+          size: _ctx.tagSize,
+          hit: tag.hitState,
+          closable: tag.closable,
+          "disable-transitions": ""
+        }, {
+          default: withCtx(() => [
+            createElementVNode("span", null, toDisplayString(tag.text), 1)
+          ]),
+          _: 2
+        }, 1032, ["size", "hit", "closable"]);
+      }), 128)),
+      _ctx.filterable && !_ctx.isDisabled ? withDirectives((openBlock(), createElementBlock("input", {
+        key: 0,
+        "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.searchInputValue = $event),
+        type: "text",
+        class: "el-cascader__search-input",
+        placeholder: _ctx.presentText ? "" : _ctx.inputPlaceholder
+      }, null, 8, _hoisted_2)), [
+        [
+          vModelText,
+          _ctx.searchInputValue,
+          void 0,
+          { trim: true }
+        ]
+      ]) : createCommentVNode("v-if", true)
+    ], 512)) : createCommentVNode("v-if", true)
+  ], 2);
+}
+
+export { render };
+//# sourceMappingURL=index.vue_vue&type=template&id=0429c2db&lang.mjs.map

package/es/packages/components/cascader/src/index.vue_vue&type=template&id=0429c2db&lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.vue_vue&type=template&id=0429c2db&lang.mjs","sources":["../../../../../../../packages/components/cascader/src/index.vue?vue&type=template&id=0429c2db&lang.js"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n          'el-cascader',\n          realSize && `el-cascader--${realSize}`,\n          { 'is-disabled': isDisabled },\n        ]\"\n  >\n    <ps-input\n      ref='input'\n      v-model.trim='inputValue'\n      :placeholder='inputPlaceholder'\n      :readonly='readonly'\n      :disabled='isDisabled'\n      :validate-event='false'\n      :size='realSize'\n      :class=\"{ 'is-focus': popperVisible }\"\n    >\n      <template #suffix>\n        <ps-icon\n          v-if='clearBtnVisible'\n          key='clear'\n          class='el-input__icon icon-circle-close'\n        >\n          <circle-close />\n        </ps-icon>\n        <ps-icon\n          v-else\n          key='arrow-down'\n          :class=\"[\n                'el-input__icon',\n                'icon-arrow-down',\n              ]\"\n        >\n          <arrow-down />\n        </ps-icon>\n      </template>\n    </ps-input>\n\n    <div v-if='multiple' ref='tagWrapper' class='el-cascader__tags'>\n      <ps-tag\n        v-for='tag in presentTags'\n        :key='tag.key'\n        type='info'\n        :size='tagSize'\n        :hit='tag.hitState'\n        :closable='tag.closable'\n        disable-transitions\n      >\n        <span>{{ tag.text }}</span>\n      </ps-tag>\n      <input\n        v-if='filterable && !isDisabled'\n        v-model.trim='searchInputValue'\n        type='text'\n        class='el-cascader__search-input'\n        :placeholder=\"presentText ? '' : inputPlaceholder\"\n      />\n    </div>\n  </div>\n</template>\n\n<script lang='ts'>\nimport {\n  computed,\n  defineComponent,\n  inject,\n  onMounted,\n  ref,\n} from 'vue'\n\nimport PsCascaderPanel, {\n  CommonProps\n} from '@element-ps/components/cascader-panel'\nimport PsInput from '@element-ps/components/input'\nimport PsTag from '@element-ps/components/tag'\nimport PsIcon from '@element-ps/components/icon'\n\nimport { elFormKey, elFormItemKey } from '@element-ps/tokens'\nimport { useLocaleInject } from '@element-ps/hooks'\n\nimport { useGlobalConfig } from '@element-ps/utils/util'\nimport { isValidComponentSize } from '@element-ps/utils/validators'\nimport { CircleClose, Check, ArrowDown } from '@element-plus/icons'\n\nimport type { ComputedRef, PropType, Ref } from 'vue'\nimport type { ElFormContext, ElFormItemContext } from '@element-ps/tokens'\nimport type {\n  CascaderNode,\n  Tag\n} from '@element-ps/components/cascader-panel'\nimport type { ComponentSize } from '@element-ps/utils/types'\n\ntype cascaderPanelType = InstanceType<typeof PsCascaderPanel>\ntype inputType = InstanceType<typeof PsInput>\n\nconst DEFAULT_INPUT_HEIGHT = 40\n\nconst INPUT_HEIGHT_MAP = {\n  medium: 36,\n  small: 32,\n  mini: 28\n}\n\nexport default defineComponent({\n  name: 'PsCascader',\n  components: {\n    PsInput,\n    PsTag,\n    PsIcon,\n    CircleClose,\n    Check,\n    ArrowDown\n  },\n  props: {\n    ...CommonProps,\n    size: {\n      type: String as PropType<ComponentSize>,\n      validator: isValidComponentSize\n    },\n    placeholder: {\n      type: String\n    },\n    disabled: Boolean,\n    clearable: Boolean,\n    filterable: Boolean,\n    filterMethod: {\n      type: Function as PropType<(node: CascaderNode, keyword: string) => boolean>,\n      default: (node: CascaderNode, keyword: string) =>\n        node.text.includes(keyword)\n    },\n    separator: {\n      type: String,\n      default: ' / '\n    },\n    showAllLevels: {\n      type: Boolean,\n      default: true\n    },\n    collapseTags: Boolean,\n    debounce: {\n      type: Number,\n      default: 300\n    },\n    beforeFilter: {\n      type: Function as PropType<(value: string) => boolean | Promise<any>>,\n      default: () => true\n    },\n    popperClass: {\n      type: String,\n      default: ''\n    },\n    popperAppendToBody: {\n      type: Boolean,\n      default: true\n    },\n    widget: {\n      type: String\n    }\n  },\n  setup(props) {\n    let inputInitialHeight = 0\n\n    const { t } = useLocaleInject()\n    const $ELEMENT = useGlobalConfig()\n    const elForm = inject(elFormKey, {} as ElFormContext)\n    const elFormItem = inject(elFormItemKey, {} as ElFormItemContext)\n\n    const input: Ref<inputType | null> = ref(null)\n    const tagWrapper = ref(null)\n    const panel: Ref<cascaderPanelType | null> = ref(null)\n    const inputHover = ref(false)\n    const filtering = ref(false)\n    const inputValue = ref('')\n    const searchInputValue = ref('')\n    const presentTags: Ref<Tag[]> = ref([])\n\n    const isDisabled = computed(() => props.disabled || elForm.disabled)\n    const inputPlaceholder = computed(\n      () => props.placeholder || t('el.cascader.placeholder')\n    )\n    const realSize: ComputedRef<ComponentSize> = computed(\n      () => props.size || elFormItem.size || $ELEMENT.size\n    )\n    const tagSize = computed(() =>\n      ['small', 'mini'].includes(realSize.value) ? 'mini' : 'small'\n    )\n    const multiple = computed(() => !!props.props.multiple)\n    const readonly = computed(() => !props.filterable || multiple.value)\n\n    const checkedNodes: ComputedRef<CascaderNode[]> = computed(\n      () => panel.value?.checkedNodes || []\n    )\n    const clearBtnVisible = computed(() => {\n      if (\n        !props.clearable ||\n        isDisabled.value ||\n        filtering.value ||\n        !inputHover.value\n      )\n        return false\n\n      return !!checkedNodes.value.length\n    })\n    const presentText = computed(() => {\n      const { showAllLevels, separator } = props\n      const nodes = checkedNodes.value\n      return nodes.length\n        ? multiple.value\n          ? ' '\n          : nodes[0].calcText(showAllLevels, separator)\n        : ''\n    })\n\n    onMounted(() => {\n      const inputEl = input.value?.$el\n      inputInitialHeight =\n        inputEl?.offsetHeight ||\n        INPUT_HEIGHT_MAP[realSize.value] ||\n        DEFAULT_INPUT_HEIGHT\n    })\n\n    return {\n      input,\n      tagWrapper,\n      inputPlaceholder,\n      presentText,\n      inputValue,\n      searchInputValue,\n      presentTags,\n      isDisabled,\n      realSize,\n      tagSize,\n      multiple,\n      readonly,\n      clearBtnVisible,\n    }\n  }\n})\n</script>\n"],"names":["_createElementBlock","_createVNode","_createBlock","_createElementVNode"],"mappings":";;;;EAuCyB,KAAI;AAAA,EAAa,OAAM;AAAA;;;;;;;;sBAtC9CA;IACG;;;;;;IAMDC;MACE,KAAI;AAAA,kBACU;mEAAA;sBAAd;MACC,aAAa;MACb,UAAU;MACV,UAAU;MACV,kBAAgB;AAAA,MAChB,MAAM;MACN,oCAAqB;;MAEX,gBACT;QACQ,qCADRC;UAEE,KAAI;AAAA,UACJ,OAAM;AAAA;2BAEN;YAAAD;;;4BAEFC;UAEE,KAAI;AAAA,UACH,sBAAO;AAAA;;;;2BAKR;YAAAD;;;;;;;IAKK,8BAAXD,0BAAA;wBACEA,8CACgB,mBAAP;4BADTE;UAEG,KAAK,IAAI;AAAA,UACV,MAAK;AAAA,UACJ,MAAM;UACN,KAAK,IAAI;AAAA,UACT,UAAU,IAAI;AAAA,UACf,uBAAA;AAAA;2BAEA;YAAAC,iDAAS,IAAI;;;;;MAGP,oBAAe,+CADvBH;;qEAEgB;QACd,MAAK;AAAA,QACL,OAAM;AAAA,QACL,aAAa,wBAAmB;;;;UAHnB;;kBAAd;AAAA;AAAA;;;;;;;"}

package/es/packages/components/cascader-panel/index.mjs

@@ -0,0 +1,13 @@
+import './src/index.mjs';
+export { CASCADER_PANEL_INJECTION_KEY, ExpandTrigger } from './src/types.mjs';
+export { CommonProps, DefaultProps, useCascaderConfig } from './src/config.mjs';
+import script from './src/index.vue_vue&type=script&lang.mjs';
+
+script.install = (app) => {
+  app.component(script.name, script);
+};
+const _CascaderPanel = script;
+const PsCascaderPanel = _CascaderPanel;
+
+export { PsCascaderPanel, _CascaderPanel as default };
+//# sourceMappingURL=index.mjs.map

package/es/packages/components/cascader-panel/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../../../../../packages/components/cascader-panel/index.ts"],"sourcesContent":["import CascaderPanel from './src/index.vue'\nimport type { App } from 'vue'\nimport type { SFCWithInstall } from '@element-ps/utils/types'\n\nCascaderPanel.install = (app: App): void => {\n  app.component(CascaderPanel.name, CascaderPanel)\n}\n\nconst _CascaderPanel = CascaderPanel as SFCWithInstall<typeof CascaderPanel>\n\nexport default _CascaderPanel\nexport const PsCascaderPanel = _CascaderPanel\nexport * from './src/types'\nexport * from './src/config'\n"],"names":["CascaderPanel"],"mappings":";;;;;AAIAA,OAAc,UAAU,CAAC,QAAmB;AAC1C,MAAI,UAAUA,OAAc,MAAMA;AAAA;MAG9B,iBAAiBA;MAGV,kBAAkB;;;;"}

package/es/packages/components/cascader-panel/src/config.mjs

@@ -0,0 +1,38 @@
+import { computed } from 'vue';
+import { NOOP } from '@vue/shared';
+import { ExpandTrigger } from './node2.mjs';
+
+const CommonProps = {
+  modelValue: [Number, String, Array],
+  options: {
+    type: Array,
+    default: () => []
+  },
+  props: {
+    type: Object,
+    default: () => ({})
+  }
+};
+const DefaultProps = {
+  expandTrigger: ExpandTrigger.CLICK,
+  multiple: false,
+  checkStrictly: false,
+  emitPath: true,
+  lazy: false,
+  lazyLoad: NOOP,
+  value: "value",
+  label: "label",
+  children: "children",
+  leaf: "leaf",
+  disabled: "disabled",
+  hoverThreshold: 500
+};
+const useCascaderConfig = (props) => {
+  return computed(() => ({
+    ...DefaultProps,
+    ...props.props
+  }));
+};
+
+export { CommonProps, DefaultProps, useCascaderConfig };
+//# sourceMappingURL=config.mjs.map

package/es/packages/components/cascader-panel/src/config.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.mjs","sources":["../../../../../../../packages/components/cascader-panel/src/config.ts"],"sourcesContent":["import { computed } from 'vue'\nimport { NOOP } from '@vue/shared'\nimport { ExpandTrigger } from './node'\n\nimport type { PropType } from 'vue'\nimport type {\n  CascaderValue,\n  CascaderOption,\n  CascaderConfig,\n  CascaderProps,\n} from './node'\n\nexport const CommonProps = {\n  modelValue: [Number, String, Array] as PropType<CascaderValue>,\n  options: {\n    type: Array as PropType<CascaderOption[]>,\n    default: () => [] as CascaderOption[],\n  },\n  props: {\n    type: Object as PropType<CascaderProps>,\n    default: () => ({} as CascaderProps),\n  },\n}\n\nexport const DefaultProps: CascaderConfig = {\n  expandTrigger: ExpandTrigger.CLICK,\n  multiple: false,\n  checkStrictly: false, // whether all nodes can be selected\n  emitPath: true, // wether to emit an array of all levels value in which node is located\n  lazy: false,\n  lazyLoad: NOOP,\n  value: 'value',\n  label: 'label',\n  children: 'children',\n  leaf: 'leaf',\n  disabled: 'disabled',\n  hoverThreshold: 500,\n}\n\nexport const useCascaderConfig = (props: { props: CascaderProps }) => {\n  return computed(() => ({\n    ...DefaultProps,\n    ...props.props,\n  }))\n}\n"],"names":[],"mappings":";;;;MAYa,cAAc;AAAA,EACzB,YAAY,CAAC,QAAQ,QAAQ;AAAA,EAC7B,SAAS;AAAA,IACP,MAAM;AAAA,IACN,SAAS,MAAM;AAAA;AAAA,EAEjB,OAAO;AAAA,IACL,MAAM;AAAA,IACN,SAAS;AAAO;AAAA;MAIP,eAA+B;AAAA,EAC1C,eAAe,cAAc;AAAA,EAC7B,UAAU;AAAA,EACV,eAAe;AAAA,EACf,UAAU;AAAA,EACV,MAAM;AAAA,EACN,UAAU;AAAA,EACV,OAAO;AAAA,EACP,OAAO;AAAA,EACP,UAAU;AAAA,EACV,MAAM;AAAA,EACN,UAAU;AAAA,EACV,gBAAgB;AAAA;MAGL,oBAAoB,CAAC,UAAoC;AACpE,SAAO,SAAS;AAAO,OAClB;AAAA,OACA,MAAM;AAAA;AAAA;;;;"}