element-ps 1.0.0-alpha.6 → 1.0.1

package/es/packages/components/steps/src/item.vue_vue&type=script&lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"item.vue_vue&type=script&lang.mjs","sources":["../../../../../../../packages/components/steps/src/item.vue"],"sourcesContent":["<template>\n  <div\n    :style=\"style\"\n    :class=\"[\n      'el-step',\n      isSimple ? 'is-simple' : `is-${parent.props.direction}`,\n      isLast && !space && !isCenter && 'is-flex',\n      isCenter && !isVertical && !isSimple && 'is-center',\n    ]\"\n  >\n    <!-- icon & line -->\n    <div :class=\"['el-step__head', `is-${currentStatus}`]\">\n      <div class=\"el-step__line\">\n        <i class=\"el-step__line-inner\" :style=\"lineStyle\"></i>\n      </div>\n\n      <div :class=\"['el-step__icon', `is-${icon ? 'icon' : 'text'}`]\">\n        <slot\n          v-if=\"currentStatus !== 'success' && currentStatus !== 'error'\"\n          name=\"icon\"\n        >\n          <ps-icon v-if=\"icon\" class=\"el-step__icon-inner\">\n            <component :is=\"icon\" />\n          </ps-icon>\n          <div v-if=\"!icon && !isSimple\" class=\"el-step__icon-inner\">\n            {{ index + 1 }}\n          </div>\n        </slot>\n        <ps-icon v-else class=\"el-step__icon-inner is-status\">\n          <check v-if=\"currentStatus === 'success'\" />\n          <close v-else />\n        </ps-icon>\n      </div>\n    </div>\n    <!-- title & description -->\n    <div class=\"el-step__main\">\n      <div :class=\"['el-step__title', `is-${currentStatus}`]\">\n        <slot name=\"title\">{{ title }}</slot>\n      </div>\n      <div v-if=\"isSimple\" class=\"el-step__arrow\"></div>\n      <div v-else :class=\"['el-step__description', `is-${currentStatus}`]\">\n        <slot name=\"description\">{{ description }}</slot>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  inject,\n  onBeforeUnmount,\n  onMounted,\n  ref,\n  reactive,\n  watch,\n} from 'vue'\nimport { PsIcon } from '@element-ps/components/icon'\nimport { Close, Check } from '@element-plus/icons'\n\nimport type { Ref, PropType, Component } from 'vue'\n\nexport interface IStepsProps {\n  space: number | string\n  active: number\n  direction: string\n  alignCenter: boolean\n  simple: boolean\n  finishStatus: string\n  processStatus: string\n}\n\nexport interface StepItemState {\n  uid: number\n  currentStatus: string\n  setIndex: (val: number) => void\n  calcProgress: (status: string) => void\n}\n\nexport interface IStepsInject {\n  props: IStepsProps\n  steps: Ref<StepItemState[]>\n}\n\nexport default defineComponent({\n  name: 'PsStep',\n  components: {\n    PsIcon,\n    Close,\n    Check,\n  },\n  props: {\n    title: {\n      type: String,\n      default: '',\n    },\n    icon: {\n      type: [String, Object] as PropType<string | Component>,\n      default: '',\n    },\n    description: {\n      type: String,\n      default: '',\n    },\n    status: {\n      type: String,\n      default: '',\n      validator: (val: string): boolean =>\n        ['', 'wait', 'process', 'finish', 'error', 'success'].includes(val),\n    },\n  },\n  setup(props) {\n    const index = ref(-1)\n    const lineStyle = ref({})\n    const internalStatus = ref('')\n    const parent: IStepsInject = inject('PsSteps')\n    const currentInstance = getCurrentInstance()\n\n    onMounted(() => {\n      watch(\n        [\n          () => parent.props.active,\n          () => parent.props.processStatus,\n          () => parent.props.finishStatus,\n        ],\n        ([active]) => {\n          updateStatus(active)\n        },\n        { immediate: true }\n      )\n    })\n\n    onBeforeUnmount(() => {\n      parent.steps.value = parent.steps.value.filter(\n        (instance) => instance.uid !== currentInstance.uid\n      )\n    })\n\n    const currentStatus = computed(() => {\n      return props.status || internalStatus.value\n    })\n    const prevStatus = computed(() => {\n      const prevStep = parent.steps.value[index.value - 1]\n      return prevStep ? prevStep.currentStatus : 'wait'\n    })\n    const isCenter = computed(() => {\n      return parent.props.alignCenter\n    })\n    const isVertical = computed(() => {\n      return parent.props.direction === 'vertical'\n    })\n    const isSimple = computed(() => {\n      return parent.props.simple\n    })\n    const stepsCount = computed(() => {\n      return parent.steps.value.length\n    })\n    const isLast = computed(() => {\n      return (\n        parent.steps.value[stepsCount.value - 1]?.uid === currentInstance.uid\n      )\n    })\n    const space = computed(() => {\n      return isSimple.value ? '' : parent.props.space\n    })\n    const style = computed(() => {\n      const style: Record<string, unknown> = {\n        flexBasis:\n          typeof space.value === 'number'\n            ? `${space.value}px`\n            : space.value\n            ? space.value\n            : `${100 / (stepsCount.value - (isCenter.value ? 0 : 1))}%`,\n      }\n      if (isVertical.value) return style\n      if (isLast.value) {\n        style.maxWidth = `${100 / stepsCount.value}%`\n      }\n      return style\n    })\n\n    const setIndex = (val) => {\n      index.value = val\n    }\n    const calcProgress = (status) => {\n      let step = 100\n      const style: Record<string, unknown> = {}\n\n      style.transitionDelay = `${150 * index.value}ms`\n      if (status === parent.props.processStatus) {\n        step = 0\n      } else if (status === 'wait') {\n        step = 0\n        style.transitionDelay = `${-150 * index.value}ms`\n      }\n      style.borderWidth = step && !isSimple.value ? '1px' : 0\n      style[\n        parent.props.direction === 'vertical' ? 'height' : 'width'\n      ] = `${step}%`\n      lineStyle.value = style\n    }\n    const updateStatus = (activeIndex) => {\n      if (activeIndex > index.value) {\n        internalStatus.value = parent.props.finishStatus\n      } else if (activeIndex === index.value && prevStatus.value !== 'error') {\n        internalStatus.value = parent.props.processStatus\n      } else {\n        internalStatus.value = 'wait'\n      }\n      const prevChild = parent.steps.value[stepsCount.value - 1]\n      if (prevChild) prevChild.calcProgress(internalStatus.value)\n    }\n\n    const stepItemState = reactive({\n      uid: computed(() => currentInstance.uid),\n      currentStatus,\n      setIndex,\n      calcProgress,\n    })\n    parent.steps.value = [...parent.steps.value, stepItemState]\n\n    return {\n      index,\n      lineStyle,\n      currentStatus,\n      isCenter,\n      isVertical,\n      isSimple,\n      isLast,\n      space,\n      style,\n      parent,\n      setIndex,\n      calcProgress,\n      updateStatus,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":"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"}

package/es/packages/components/steps/src/item.vue_vue&type=template&id=6ec47f4b&lang.mjs

@@ -0,0 +1,83 @@
+import { resolveComponent, openBlock, createElementBlock, normalizeStyle, normalizeClass, createCommentVNode, createElementVNode, renderSlot, createBlock, withCtx, resolveDynamicComponent, toDisplayString, createTextVNode } from 'vue';
+
+const _hoisted_1 = { class: "el-step__line" };
+const _hoisted_2 = {
+  key: 1,
+  class: "el-step__icon-inner"
+};
+const _hoisted_3 = { class: "el-step__main" };
+const _hoisted_4 = {
+  key: 0,
+  class: "el-step__arrow"
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ps_icon = resolveComponent("ps-icon");
+  const _component_check = resolveComponent("check");
+  const _component_close = resolveComponent("close");
+  return openBlock(), createElementBlock("div", {
+    style: normalizeStyle(_ctx.style),
+    class: normalizeClass([
+      "el-step",
+      _ctx.isSimple ? "is-simple" : `is-${_ctx.parent.props.direction}`,
+      _ctx.isLast && !_ctx.space && !_ctx.isCenter && "is-flex",
+      _ctx.isCenter && !_ctx.isVertical && !_ctx.isSimple && "is-center"
+    ])
+  }, [
+    createCommentVNode(" icon & line "),
+    createElementVNode("div", {
+      class: normalizeClass(["el-step__head", `is-${_ctx.currentStatus}`])
+    }, [
+      createElementVNode("div", _hoisted_1, [
+        createElementVNode("i", {
+          class: "el-step__line-inner",
+          style: normalizeStyle(_ctx.lineStyle)
+        }, null, 4)
+      ]),
+      createElementVNode("div", {
+        class: normalizeClass(["el-step__icon", `is-${_ctx.icon ? "icon" : "text"}`])
+      }, [
+        _ctx.currentStatus !== "success" && _ctx.currentStatus !== "error" ? renderSlot(_ctx.$slots, "icon", { key: 0 }, () => [
+          _ctx.icon ? (openBlock(), createBlock(_component_ps_icon, {
+            key: 0,
+            class: "el-step__icon-inner"
+          }, {
+            default: withCtx(() => [
+              (openBlock(), createBlock(resolveDynamicComponent(_ctx.icon)))
+            ]),
+            _: 1
+          })) : createCommentVNode("v-if", true),
+          !_ctx.icon && !_ctx.isSimple ? (openBlock(), createElementBlock("div", _hoisted_2, toDisplayString(_ctx.index + 1), 1)) : createCommentVNode("v-if", true)
+        ]) : (openBlock(), createBlock(_component_ps_icon, {
+          key: 1,
+          class: "el-step__icon-inner is-status"
+        }, {
+          default: withCtx(() => [
+            _ctx.currentStatus === "success" ? (openBlock(), createBlock(_component_check, { key: 0 })) : (openBlock(), createBlock(_component_close, { key: 1 }))
+          ]),
+          _: 1
+        }))
+      ], 2)
+    ], 2),
+    createCommentVNode(" title & description "),
+    createElementVNode("div", _hoisted_3, [
+      createElementVNode("div", {
+        class: normalizeClass(["el-step__title", `is-${_ctx.currentStatus}`])
+      }, [
+        renderSlot(_ctx.$slots, "title", {}, () => [
+          createTextVNode(toDisplayString(_ctx.title), 1)
+        ])
+      ], 2),
+      _ctx.isSimple ? (openBlock(), createElementBlock("div", _hoisted_4)) : (openBlock(), createElementBlock("div", {
+        key: 1,
+        class: normalizeClass(["el-step__description", `is-${_ctx.currentStatus}`])
+      }, [
+        renderSlot(_ctx.$slots, "description", {}, () => [
+          createTextVNode(toDisplayString(_ctx.description), 1)
+        ])
+      ], 2))
+    ])
+  ], 6);
+}
+
+export { render };
+//# sourceMappingURL=item.vue_vue&type=template&id=6ec47f4b&lang.mjs.map

package/es/packages/components/steps/src/item.vue_vue&type=template&id=6ec47f4b&lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"item.vue_vue&type=template&id=6ec47f4b&lang.mjs","sources":["../../../../../../../packages/components/steps/src/item.vue?vue&type=template&id=6ec47f4b&lang.js"],"sourcesContent":["<template>\n  <div\n    :style=\"style\"\n    :class=\"[\n      'el-step',\n      isSimple ? 'is-simple' : `is-${parent.props.direction}`,\n      isLast && !space && !isCenter && 'is-flex',\n      isCenter && !isVertical && !isSimple && 'is-center',\n    ]\"\n  >\n    <!-- icon & line -->\n    <div :class=\"['el-step__head', `is-${currentStatus}`]\">\n      <div class=\"el-step__line\">\n        <i class=\"el-step__line-inner\" :style=\"lineStyle\"></i>\n      </div>\n\n      <div :class=\"['el-step__icon', `is-${icon ? 'icon' : 'text'}`]\">\n        <slot\n          v-if=\"currentStatus !== 'success' && currentStatus !== 'error'\"\n          name=\"icon\"\n        >\n          <ps-icon v-if=\"icon\" class=\"el-step__icon-inner\">\n            <component :is=\"icon\" />\n          </ps-icon>\n          <div v-if=\"!icon && !isSimple\" class=\"el-step__icon-inner\">\n            {{ index + 1 }}\n          </div>\n        </slot>\n        <ps-icon v-else class=\"el-step__icon-inner is-status\">\n          <check v-if=\"currentStatus === 'success'\" />\n          <close v-else />\n        </ps-icon>\n      </div>\n    </div>\n    <!-- title & description -->\n    <div class=\"el-step__main\">\n      <div :class=\"['el-step__title', `is-${currentStatus}`]\">\n        <slot name=\"title\">{{ title }}</slot>\n      </div>\n      <div v-if=\"isSimple\" class=\"el-step__arrow\"></div>\n      <div v-else :class=\"['el-step__description', `is-${currentStatus}`]\">\n        <slot name=\"description\">{{ description }}</slot>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  inject,\n  onBeforeUnmount,\n  onMounted,\n  ref,\n  reactive,\n  watch,\n} from 'vue'\nimport { PsIcon } from '@element-ps/components/icon'\nimport { Close, Check } from '@element-plus/icons'\n\nimport type { Ref, PropType, Component } from 'vue'\n\nexport interface IStepsProps {\n  space: number | string\n  active: number\n  direction: string\n  alignCenter: boolean\n  simple: boolean\n  finishStatus: string\n  processStatus: string\n}\n\nexport interface StepItemState {\n  uid: number\n  currentStatus: string\n  setIndex: (val: number) => void\n  calcProgress: (status: string) => void\n}\n\nexport interface IStepsInject {\n  props: IStepsProps\n  steps: Ref<StepItemState[]>\n}\n\nexport default defineComponent({\n  name: 'PsStep',\n  components: {\n    PsIcon,\n    Close,\n    Check,\n  },\n  props: {\n    title: {\n      type: String,\n      default: '',\n    },\n    icon: {\n      type: [String, Object] as PropType<string | Component>,\n      default: '',\n    },\n    description: {\n      type: String,\n      default: '',\n    },\n    status: {\n      type: String,\n      default: '',\n      validator: (val: string): boolean =>\n        ['', 'wait', 'process', 'finish', 'error', 'success'].includes(val),\n    },\n  },\n  setup(props) {\n    const index = ref(-1)\n    const lineStyle = ref({})\n    const internalStatus = ref('')\n    const parent: IStepsInject = inject('PsSteps')\n    const currentInstance = getCurrentInstance()\n\n    onMounted(() => {\n      watch(\n        [\n          () => parent.props.active,\n          () => parent.props.processStatus,\n          () => parent.props.finishStatus,\n        ],\n        ([active]) => {\n          updateStatus(active)\n        },\n        { immediate: true }\n      )\n    })\n\n    onBeforeUnmount(() => {\n      parent.steps.value = parent.steps.value.filter(\n        (instance) => instance.uid !== currentInstance.uid\n      )\n    })\n\n    const currentStatus = computed(() => {\n      return props.status || internalStatus.value\n    })\n    const prevStatus = computed(() => {\n      const prevStep = parent.steps.value[index.value - 1]\n      return prevStep ? prevStep.currentStatus : 'wait'\n    })\n    const isCenter = computed(() => {\n      return parent.props.alignCenter\n    })\n    const isVertical = computed(() => {\n      return parent.props.direction === 'vertical'\n    })\n    const isSimple = computed(() => {\n      return parent.props.simple\n    })\n    const stepsCount = computed(() => {\n      return parent.steps.value.length\n    })\n    const isLast = computed(() => {\n      return (\n        parent.steps.value[stepsCount.value - 1]?.uid === currentInstance.uid\n      )\n    })\n    const space = computed(() => {\n      return isSimple.value ? '' : parent.props.space\n    })\n    const style = computed(() => {\n      const style: Record<string, unknown> = {\n        flexBasis:\n          typeof space.value === 'number'\n            ? `${space.value}px`\n            : space.value\n            ? space.value\n            : `${100 / (stepsCount.value - (isCenter.value ? 0 : 1))}%`,\n      }\n      if (isVertical.value) return style\n      if (isLast.value) {\n        style.maxWidth = `${100 / stepsCount.value}%`\n      }\n      return style\n    })\n\n    const setIndex = (val) => {\n      index.value = val\n    }\n    const calcProgress = (status) => {\n      let step = 100\n      const style: Record<string, unknown> = {}\n\n      style.transitionDelay = `${150 * index.value}ms`\n      if (status === parent.props.processStatus) {\n        step = 0\n      } else if (status === 'wait') {\n        step = 0\n        style.transitionDelay = `${-150 * index.value}ms`\n      }\n      style.borderWidth = step && !isSimple.value ? '1px' : 0\n      style[\n        parent.props.direction === 'vertical' ? 'height' : 'width'\n      ] = `${step}%`\n      lineStyle.value = style\n    }\n    const updateStatus = (activeIndex) => {\n      if (activeIndex > index.value) {\n        internalStatus.value = parent.props.finishStatus\n      } else if (activeIndex === index.value && prevStatus.value !== 'error') {\n        internalStatus.value = parent.props.processStatus\n      } else {\n        internalStatus.value = 'wait'\n      }\n      const prevChild = parent.steps.value[stepsCount.value - 1]\n      if (prevChild) prevChild.calcProgress(internalStatus.value)\n    }\n\n    const stepItemState = reactive({\n      uid: computed(() => currentInstance.uid),\n      currentStatus,\n      setIndex,\n      calcProgress,\n    })\n    parent.steps.value = [...parent.steps.value, stepItemState]\n\n    return {\n      index,\n      lineStyle,\n      currentStatus,\n      isCenter,\n      isVertical,\n      isSimple,\n      isLast,\n      space,\n      style,\n      parent,\n      setIndex,\n      calcProgress,\n      updateStatus,\n    }\n  },\n})\n</script>\n"],"names":["_createElementBlock","_createCommentVNode","_createElementVNode","_renderSlot","_createBlock"],"mappings":";;qBAYW,OAAM;;;EAYwB,OAAM;AAAA;qBAWtC,OAAM;;;EAIY,OAAM;AAAA;;;;;sBAtC/BA;IACG,sBAAO;IACP;;;;;;;IAODC;IACAC;MAAM,8CAA+B;;MACnCA,0BAAA;QACEA;UAAG,OAAM;AAAA,UAAuB,sBAAO;;;MAGzCA;QAAM,8CAA+B;;QAE3B,oCAA+B,iCADvCC,4CAAA;UAIiB,0BAAfC;;YAAqB,OAAM;AAAA;6BACzB;4BAAAA,oCAAgB;;;;WAEN,cAAS,8BAArBJ,0BAAA,4BACK;2BAGPI;;UAAgB,OAAM;AAAA;2BACpB;YAAa,iDAAbA,2DACAA;;;;;;IAINH;IACAC,0BAAA;MACEA;QAAM,+CAAgC;;QACpCC,qCAAA;0CAAsB;;;MAEb,8BAAXH,0BAAA,6BACAA;;QAAa,qDAAsC;;QACjDG,2CAAA;0CAA4B;;;;;;;;;"}

package/es/packages/components/switch/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 _Switch = script;
+const PsSwitch = _Switch;
+
+export { PsSwitch, _Switch as default };
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../../../../../packages/components/switch/index.ts"],"sourcesContent":["import Switch from './src/index.vue'\n\nimport type { App } from 'vue'\nimport type { SFCWithInstall } from '@element-ps/utils/types'\n\nSwitch.install = (app: App): void => {\n  app.component(Switch.name, Switch)\n}\n\nconst _Switch = Switch as SFCWithInstall<typeof Switch>\n\nexport default _Switch\nexport const PsSwitch = _Switch\n"],"names":["Switch"],"mappings":";;;AAKAA,OAAO,UAAU,CAAC,QAAmB;AACnC,MAAI,UAAUA,OAAO,MAAMA;AAAA;MAGvB,UAAUA;MAGH,WAAW;;;;"}

package/es/packages/components/switch/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=ee4fcade&lang.mjs';
+
+script.render = render;
+script.__file = "packages/components/switch/src/index.vue";
+//# sourceMappingURL=index.mjs.map

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

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

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

@@ -0,0 +1,122 @@
+import { defineComponent, inject, ref, computed, onMounted } from 'vue';
+import '../../../tokens/index.mjs';
+import { PsIcon } from '../../icon/index.mjs';
+import { Loading } from '@element-plus/icons';
+import { elFormKey } from '../../../tokens/form.mjs';
+
+var script = defineComponent({
+  name: "PsSwitch",
+  components: { PsIcon, Loading },
+  props: {
+    modelValue: {
+      type: [Boolean, String, Number],
+      default: false
+    },
+    value: {
+      type: [Boolean, String, Number],
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    width: {
+      type: Number,
+      default: 40
+    },
+    inlinePrompt: {
+      type: Boolean,
+      default: false
+    },
+    activeIcon: {
+      type: [String, Object],
+      default: ""
+    },
+    inactiveIcon: {
+      type: [String, Object],
+      default: ""
+    },
+    activeText: {
+      type: String,
+      default: ""
+    },
+    inactiveText: {
+      type: String,
+      default: ""
+    },
+    activeColor: {
+      type: String,
+      default: ""
+    },
+    inactiveColor: {
+      type: String,
+      default: ""
+    },
+    borderColor: {
+      type: String,
+      default: ""
+    },
+    activeValue: {
+      type: [Boolean, String, Number],
+      default: true
+    },
+    inactiveValue: {
+      type: [Boolean, String, Number],
+      default: false
+    },
+    name: {
+      type: String,
+      default: ""
+    },
+    validateEvent: {
+      type: Boolean,
+      default: true
+    },
+    id: String,
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    beforeChange: Function
+  },
+  setup(props) {
+    const elForm = inject(elFormKey, {});
+    const isModelValue = ref(props.modelValue !== false);
+    const input = ref(null);
+    const core = ref(null);
+    const actualValue = computed(() => {
+      return isModelValue.value ? props.modelValue : props.value;
+    });
+    const checked = computed(() => {
+      return actualValue.value === props.activeValue;
+    });
+    const switchDisabled = computed(() => {
+      return props.disabled || props.loading || (elForm || {}).disabled;
+    });
+    const setBackgroundColor = () => {
+      const newColor = checked.value ? props.activeColor : props.inactiveColor;
+      const coreEl = core.value;
+      if (props.borderColor)
+        coreEl.style.borderColor = props.borderColor;
+      else if (!props.borderColor)
+        coreEl.style.borderColor = newColor;
+      coreEl.style.backgroundColor = newColor;
+      coreEl.children[0].style.color = newColor;
+    };
+    onMounted(() => {
+      if (props.activeColor || props.inactiveColor || props.borderColor) {
+        setBackgroundColor();
+      }
+      input.value.checked = checked.value;
+    });
+    return {
+      input,
+      core,
+      switchDisabled,
+      checked
+    };
+  }
+});
+
+export { script as default };
+//# sourceMappingURL=index.vue_vue&type=script&lang.mjs.map

package/es/packages/components/switch/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/switch/src/index.vue"],"sourcesContent":["<template>\n  <div\n    class=\"el-switch\"\n    :class=\"{ 'is-disabled': switchDisabled, 'is-checked': checked }\"\n    role=\"switch\"\n    :aria-checked=\"checked\"\n    :aria-disabled=\"switchDisabled\"\n  >\n    <input\n      :id=\"id\"\n      ref=\"input\"\n      class=\"el-switch__input\"\n      type=\"checkbox\"\n      :name=\"name\"\n      :true-value=\"activeValue\"\n      :false-value=\"inactiveValue\"\n      :disabled=\"switchDisabled\"\n    />\n    <span\n      v-if=\"!inlinePrompt && (inactiveIcon || inactiveText)\"\n      :class=\"[\n        'el-switch__label',\n        'el-switch__label--left',\n        !checked ? 'is-active' : '',\n      ]\"\n    >\n      <ps-icon v-if=\"inactiveIcon\"><component :is=\"inactiveIcon\" /></ps-icon>\n      <span v-if=\"!inactiveIcon && inactiveText\" :aria-hidden=\"checked\">{{\n          inactiveText\n        }}</span>\n    </span>\n    <span\n      ref=\"core\"\n      class=\"el-switch__core\"\n      :style=\"{ width: (width || 40) + 'px' }\"\n    >\n      <div v-if=\"inlinePrompt\" class=\"el-switch__inner\">\n        <template v-if=\"activeIcon || inactiveIcon\">\n          <ps-icon\n            v-if=\"activeIcon\"\n            class=\"is-icon\"\n            :class=\"checked ? 'is-show' : 'is-hide'\"\n          >\n            <component :is=\"activeIcon\" />\n          </ps-icon>\n          <ps-icon\n            v-if=\"inactiveIcon\"\n            class=\"is-icon\"\n            :class=\"!checked ? 'is-show' : 'is-hide'\"\n          >\n            <component :is=\"inactiveIcon\" />\n          </ps-icon>\n        </template>\n        <template v-else-if=\"activeText || inactiveIcon\">\n          <span\n            v-if=\"activeText\"\n            class=\"is-text\"\n            :class=\"checked ? 'is-show' : 'is-hide'\"\n            :aria-hidden=\"!checked\"\n          >\n            {{ activeText.substr(0, 1) }}\n          </span>\n          <span\n            v-if=\"inactiveText\"\n            class=\"is-text\"\n            :class=\"!checked ? 'is-show' : 'is-hide'\"\n            :aria-hidden=\"checked\"\n          >\n            {{ inactiveText.substr(0, 1) }}\n          </span>\n        </template>\n      </div>\n      <div class=\"el-switch__action\">\n        <ps-icon v-if=\"loading\" class=\"is-loading\"><loading /></ps-icon>\n      </div>\n    </span>\n    <span\n      v-if=\"!inlinePrompt && (activeIcon || activeText)\"\n      :class=\"[\n        'el-switch__label',\n        'el-switch__label--right',\n        checked ? 'is-active' : '',\n      ]\"\n    >\n      <ps-icon v-if=\"activeIcon\"><component :is=\"activeIcon\" /></ps-icon>\n      <span v-if=\"!activeIcon && activeText\" :aria-hidden=\"!checked\">{{\n          activeText\n        }}</span>\n    </span>\n  </div>\n</template>\n<script lang=\"ts\">\nimport { defineComponent, computed, onMounted, ref, inject } from 'vue'\nimport { elFormKey } from '@element-ps/tokens'\nimport PsIcon from '@element-ps/components/icon'\nimport { Loading } from '@element-plus/icons'\n\nimport type { PropType, Component } from 'vue'\nimport type { ElFormContext } from '@element-ps/tokens'\n\ntype ValueType = boolean | string | number\n\ninterface ISwitchProps {\n  modelValue: ValueType\n  value: ValueType\n  disabled: boolean\n  width: number\n  activeIcon: string | Component\n  inactiveIcon: string | Component\n  activeText: string\n  inactiveText: string\n  activeColor: string\n  inactiveColor: string\n  borderColor: string\n  activeValue: ValueType\n  inactiveValue: ValueType\n  name: string\n  validateEvent: boolean\n  id: string\n  loading: boolean\n  beforeChange?: () => Promise<boolean> | boolean\n}\n\nexport default defineComponent({\n  name: 'PsSwitch',\n  components: { PsIcon, Loading },\n  props: {\n    modelValue: {\n      type: [Boolean, String, Number],\n      default: false,\n    },\n    value: {\n      type: [Boolean, String, Number],\n      default: false,\n    },\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n    width: {\n      type: Number,\n      default: 40,\n    },\n    inlinePrompt: {\n      type: Boolean,\n      default: false,\n    },\n    activeIcon: {\n      type: [String, Object] as PropType<string | Component>,\n      default: '',\n    },\n    inactiveIcon: {\n      type: [String, Object] as PropType<string | Component>,\n      default: '',\n    },\n    activeText: {\n      type: String,\n      default: '',\n    },\n    inactiveText: {\n      type: String,\n      default: '',\n    },\n    activeColor: {\n      type: String,\n      default: '',\n    },\n    inactiveColor: {\n      type: String,\n      default: '',\n    },\n    borderColor: {\n      type: String,\n      default: '',\n    },\n    activeValue: {\n      type: [Boolean, String, Number],\n      default: true,\n    },\n    inactiveValue: {\n      type: [Boolean, String, Number],\n      default: false,\n    },\n    name: {\n      type: String,\n      default: '',\n    },\n    validateEvent: {\n      type: Boolean,\n      default: true,\n    },\n    id: String,\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n    beforeChange: Function as PropType<() => Promise<boolean> | boolean>,\n  },\n  setup(props: ISwitchProps) {\n    const elForm = inject(elFormKey, {} as ElFormContext)\n\n    const isModelValue = ref(props.modelValue !== false)\n    const input = ref(null)\n    const core = ref(null)\n\n    const actualValue = computed((): ValueType => {\n      return isModelValue.value ? props.modelValue : props.value\n    })\n\n    const checked = computed((): boolean => {\n      return actualValue.value === props.activeValue\n    })\n\n    const switchDisabled = computed((): boolean => {\n      return props.disabled || props.loading || (elForm || {}).disabled\n    })\n\n    const setBackgroundColor = (): void => {\n      const newColor = checked.value ? props.activeColor : props.inactiveColor\n      const coreEl = core.value\n      if (props.borderColor) coreEl.style.borderColor = props.borderColor\n      else if (!props.borderColor) coreEl.style.borderColor = newColor\n      coreEl.style.backgroundColor = newColor\n      coreEl.children[0].style.color = newColor\n    }\n\n    onMounted(() => {\n      if (props.activeColor || props.inactiveColor || props.borderColor) {\n        setBackgroundColor()\n      }\n\n      input.value.checked = checked.value\n    })\n\n    return {\n      input,\n      core,\n      switchDisabled,\n      checked,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;;;AA2HA,aAAe,gBAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY,EAAE,QAAQ;AAAA,EACtB,OAAO;AAAA,IACL,YAAY;AAAA,MACV,MAAM,CAAC,SAAS,QAAQ;AAAA,MACxB,SAAS;AAAA;AAAA,IAEX,OAAO;AAAA,MACL,MAAM,CAAC,SAAS,QAAQ;AAAA,MACxB,SAAS;AAAA;AAAA,IAEX,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,YAAY;AAAA,MACV,MAAM,CAAC,QAAQ;AAAA,MACf,SAAS;AAAA;AAAA,IAEX,cAAc;AAAA,MACZ,MAAM,CAAC,QAAQ;AAAA,MACf,SAAS;AAAA;AAAA,IAEX,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,eAAe;AAAA,MACb,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,aAAa;AAAA,MACX,MAAM,CAAC,SAAS,QAAQ;AAAA,MACxB,SAAS;AAAA;AAAA,IAEX,eAAe;AAAA,MACb,MAAM,CAAC,SAAS,QAAQ;AAAA,MACxB,SAAS;AAAA;AAAA,IAEX,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,eAAe;AAAA,MACb,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,IAAI;AAAA,IACJ,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,cAAc;AAAA;AAAA,EAEhB,MAAM,OAAqB;AACzB,UAAM,SAAS,OAAO,WAAW;AAEjC,UAAM,eAAe,IAAI,MAAM,eAAe;AAC9C,UAAM,QAAQ,IAAI;AAClB,UAAM,OAAO,IAAI;AAEjB,UAAM,cAAc,SAAS,MAAiB;AAC5C,aAAO,aAAa,QAAQ,MAAM,aAAa,MAAM;AAAA;AAGvD,UAAM,UAAU,SAAS,MAAe;AACtC,aAAO,YAAY,UAAU,MAAM;AAAA;AAGrC,UAAM,iBAAiB,SAAS,MAAe;AAC7C,aAAO,MAAM,YAAY,MAAM,WAAY,WAAU,IAAI;AAAA;AAG3D,UAAM,qBAAqB,MAAY;AACrC,YAAM,WAAW,QAAQ,QAAQ,MAAM,cAAc,MAAM;AAC3D,YAAM,SAAS,KAAK;AACpB,UAAI,MAAM;AAAa,eAAO,MAAM,cAAc,MAAM;AAAA,eAC/C,CAAC,MAAM;AAAa,eAAO,MAAM,cAAc;AACxD,aAAO,MAAM,kBAAkB;AAC/B,aAAO,SAAS,GAAG,MAAM,QAAQ;AAAA;AAGnC,cAAU,MAAM;AACd,UAAI,MAAM,eAAe,MAAM,iBAAiB,MAAM,aAAa;AACjE;AAAA;AAGF,YAAM,MAAM,UAAU,QAAQ;AAAA;AAGhC,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;"}

package/es/packages/components/switch/src/index.vue_vue&type=template&id=ee4fcade&lang.mjs

@@ -0,0 +1,125 @@
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createBlock, withCtx, resolveDynamicComponent, createCommentVNode, toDisplayString, normalizeStyle, Fragment, createVNode } from 'vue';
+
+const _hoisted_1 = ["aria-checked", "aria-disabled"];
+const _hoisted_2 = ["id", "name", "true-value", "false-value", "disabled"];
+const _hoisted_3 = ["aria-hidden"];
+const _hoisted_4 = {
+  key: 0,
+  class: "el-switch__inner"
+};
+const _hoisted_5 = ["aria-hidden"];
+const _hoisted_6 = ["aria-hidden"];
+const _hoisted_7 = { class: "el-switch__action" };
+const _hoisted_8 = ["aria-hidden"];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ps_icon = resolveComponent("ps-icon");
+  const _component_loading = resolveComponent("loading");
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(["el-switch", { "is-disabled": _ctx.switchDisabled, "is-checked": _ctx.checked }]),
+    role: "switch",
+    "aria-checked": _ctx.checked,
+    "aria-disabled": _ctx.switchDisabled
+  }, [
+    createElementVNode("input", {
+      id: _ctx.id,
+      ref: "input",
+      class: "el-switch__input",
+      type: "checkbox",
+      name: _ctx.name,
+      "true-value": _ctx.activeValue,
+      "false-value": _ctx.inactiveValue,
+      disabled: _ctx.switchDisabled
+    }, null, 8, _hoisted_2),
+    !_ctx.inlinePrompt && (_ctx.inactiveIcon || _ctx.inactiveText) ? (openBlock(), createElementBlock("span", {
+      key: 0,
+      class: normalizeClass([
+        "el-switch__label",
+        "el-switch__label--left",
+        !_ctx.checked ? "is-active" : ""
+      ])
+    }, [
+      _ctx.inactiveIcon ? (openBlock(), createBlock(_component_ps_icon, { key: 0 }, {
+        default: withCtx(() => [
+          (openBlock(), createBlock(resolveDynamicComponent(_ctx.inactiveIcon)))
+        ]),
+        _: 1
+      })) : createCommentVNode("v-if", true),
+      !_ctx.inactiveIcon && _ctx.inactiveText ? (openBlock(), createElementBlock("span", {
+        key: 1,
+        "aria-hidden": _ctx.checked
+      }, toDisplayString(_ctx.inactiveText), 9, _hoisted_3)) : createCommentVNode("v-if", true)
+    ], 2)) : createCommentVNode("v-if", true),
+    createElementVNode("span", {
+      ref: "core",
+      class: "el-switch__core",
+      style: normalizeStyle({ width: (_ctx.width || 40) + "px" })
+    }, [
+      _ctx.inlinePrompt ? (openBlock(), createElementBlock("div", _hoisted_4, [
+        _ctx.activeIcon || _ctx.inactiveIcon ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+          _ctx.activeIcon ? (openBlock(), createBlock(_component_ps_icon, {
+            key: 0,
+            class: normalizeClass(["is-icon", _ctx.checked ? "is-show" : "is-hide"])
+          }, {
+            default: withCtx(() => [
+              (openBlock(), createBlock(resolveDynamicComponent(_ctx.activeIcon)))
+            ]),
+            _: 1
+          }, 8, ["class"])) : createCommentVNode("v-if", true),
+          _ctx.inactiveIcon ? (openBlock(), createBlock(_component_ps_icon, {
+            key: 1,
+            class: normalizeClass(["is-icon", !_ctx.checked ? "is-show" : "is-hide"])
+          }, {
+            default: withCtx(() => [
+              (openBlock(), createBlock(resolveDynamicComponent(_ctx.inactiveIcon)))
+            ]),
+            _: 1
+          }, 8, ["class"])) : createCommentVNode("v-if", true)
+        ], 64)) : _ctx.activeText || _ctx.inactiveIcon ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+          _ctx.activeText ? (openBlock(), createElementBlock("span", {
+            key: 0,
+            class: normalizeClass(["is-text", _ctx.checked ? "is-show" : "is-hide"]),
+            "aria-hidden": !_ctx.checked
+          }, toDisplayString(_ctx.activeText.substr(0, 1)), 11, _hoisted_5)) : createCommentVNode("v-if", true),
+          _ctx.inactiveText ? (openBlock(), createElementBlock("span", {
+            key: 1,
+            class: normalizeClass(["is-text", !_ctx.checked ? "is-show" : "is-hide"]),
+            "aria-hidden": _ctx.checked
+          }, toDisplayString(_ctx.inactiveText.substr(0, 1)), 11, _hoisted_6)) : createCommentVNode("v-if", true)
+        ], 64)) : createCommentVNode("v-if", true)
+      ])) : createCommentVNode("v-if", true),
+      createElementVNode("div", _hoisted_7, [
+        _ctx.loading ? (openBlock(), createBlock(_component_ps_icon, {
+          key: 0,
+          class: "is-loading"
+        }, {
+          default: withCtx(() => [
+            createVNode(_component_loading)
+          ]),
+          _: 1
+        })) : createCommentVNode("v-if", true)
+      ])
+    ], 4),
+    !_ctx.inlinePrompt && (_ctx.activeIcon || _ctx.activeText) ? (openBlock(), createElementBlock("span", {
+      key: 1,
+      class: normalizeClass([
+        "el-switch__label",
+        "el-switch__label--right",
+        _ctx.checked ? "is-active" : ""
+      ])
+    }, [
+      _ctx.activeIcon ? (openBlock(), createBlock(_component_ps_icon, { key: 0 }, {
+        default: withCtx(() => [
+          (openBlock(), createBlock(resolveDynamicComponent(_ctx.activeIcon)))
+        ]),
+        _: 1
+      })) : createCommentVNode("v-if", true),
+      !_ctx.activeIcon && _ctx.activeText ? (openBlock(), createElementBlock("span", {
+        key: 1,
+        "aria-hidden": !_ctx.checked
+      }, toDisplayString(_ctx.activeText), 9, _hoisted_8)) : createCommentVNode("v-if", true)
+    ], 2)) : createCommentVNode("v-if", true)
+  ], 10, _hoisted_1);
+}
+
+export { render };
+//# sourceMappingURL=index.vue_vue&type=template&id=ee4fcade&lang.mjs.map

package/es/packages/components/switch/src/index.vue_vue&type=template&id=ee4fcade&lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.vue_vue&type=template&id=ee4fcade&lang.mjs","sources":["../../../../../../../packages/components/switch/src/index.vue?vue&type=template&id=ee4fcade&lang.js"],"sourcesContent":["<template>\n  <div\n    class=\"el-switch\"\n    :class=\"{ 'is-disabled': switchDisabled, 'is-checked': checked }\"\n    role=\"switch\"\n    :aria-checked=\"checked\"\n    :aria-disabled=\"switchDisabled\"\n  >\n    <input\n      :id=\"id\"\n      ref=\"input\"\n      class=\"el-switch__input\"\n      type=\"checkbox\"\n      :name=\"name\"\n      :true-value=\"activeValue\"\n      :false-value=\"inactiveValue\"\n      :disabled=\"switchDisabled\"\n    />\n    <span\n      v-if=\"!inlinePrompt && (inactiveIcon || inactiveText)\"\n      :class=\"[\n        'el-switch__label',\n        'el-switch__label--left',\n        !checked ? 'is-active' : '',\n      ]\"\n    >\n      <ps-icon v-if=\"inactiveIcon\"><component :is=\"inactiveIcon\" /></ps-icon>\n      <span v-if=\"!inactiveIcon && inactiveText\" :aria-hidden=\"checked\">{{\n          inactiveText\n        }}</span>\n    </span>\n    <span\n      ref=\"core\"\n      class=\"el-switch__core\"\n      :style=\"{ width: (width || 40) + 'px' }\"\n    >\n      <div v-if=\"inlinePrompt\" class=\"el-switch__inner\">\n        <template v-if=\"activeIcon || inactiveIcon\">\n          <ps-icon\n            v-if=\"activeIcon\"\n            class=\"is-icon\"\n            :class=\"checked ? 'is-show' : 'is-hide'\"\n          >\n            <component :is=\"activeIcon\" />\n          </ps-icon>\n          <ps-icon\n            v-if=\"inactiveIcon\"\n            class=\"is-icon\"\n            :class=\"!checked ? 'is-show' : 'is-hide'\"\n          >\n            <component :is=\"inactiveIcon\" />\n          </ps-icon>\n        </template>\n        <template v-else-if=\"activeText || inactiveIcon\">\n          <span\n            v-if=\"activeText\"\n            class=\"is-text\"\n            :class=\"checked ? 'is-show' : 'is-hide'\"\n            :aria-hidden=\"!checked\"\n          >\n            {{ activeText.substr(0, 1) }}\n          </span>\n          <span\n            v-if=\"inactiveText\"\n            class=\"is-text\"\n            :class=\"!checked ? 'is-show' : 'is-hide'\"\n            :aria-hidden=\"checked\"\n          >\n            {{ inactiveText.substr(0, 1) }}\n          </span>\n        </template>\n      </div>\n      <div class=\"el-switch__action\">\n        <ps-icon v-if=\"loading\" class=\"is-loading\"><loading /></ps-icon>\n      </div>\n    </span>\n    <span\n      v-if=\"!inlinePrompt && (activeIcon || activeText)\"\n      :class=\"[\n        'el-switch__label',\n        'el-switch__label--right',\n        checked ? 'is-active' : '',\n      ]\"\n    >\n      <ps-icon v-if=\"activeIcon\"><component :is=\"activeIcon\" /></ps-icon>\n      <span v-if=\"!activeIcon && activeText\" :aria-hidden=\"!checked\">{{\n          activeText\n        }}</span>\n    </span>\n  </div>\n</template>\n<script lang=\"ts\">\nimport { defineComponent, computed, onMounted, ref, inject } from 'vue'\nimport { elFormKey } from '@element-ps/tokens'\nimport PsIcon from '@element-ps/components/icon'\nimport { Loading } from '@element-plus/icons'\n\nimport type { PropType, Component } from 'vue'\nimport type { ElFormContext } from '@element-ps/tokens'\n\ntype ValueType = boolean | string | number\n\ninterface ISwitchProps {\n  modelValue: ValueType\n  value: ValueType\n  disabled: boolean\n  width: number\n  activeIcon: string | Component\n  inactiveIcon: string | Component\n  activeText: string\n  inactiveText: string\n  activeColor: string\n  inactiveColor: string\n  borderColor: string\n  activeValue: ValueType\n  inactiveValue: ValueType\n  name: string\n  validateEvent: boolean\n  id: string\n  loading: boolean\n  beforeChange?: () => Promise<boolean> | boolean\n}\n\nexport default defineComponent({\n  name: 'PsSwitch',\n  components: { PsIcon, Loading },\n  props: {\n    modelValue: {\n      type: [Boolean, String, Number],\n      default: false,\n    },\n    value: {\n      type: [Boolean, String, Number],\n      default: false,\n    },\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n    width: {\n      type: Number,\n      default: 40,\n    },\n    inlinePrompt: {\n      type: Boolean,\n      default: false,\n    },\n    activeIcon: {\n      type: [String, Object] as PropType<string | Component>,\n      default: '',\n    },\n    inactiveIcon: {\n      type: [String, Object] as PropType<string | Component>,\n      default: '',\n    },\n    activeText: {\n      type: String,\n      default: '',\n    },\n    inactiveText: {\n      type: String,\n      default: '',\n    },\n    activeColor: {\n      type: String,\n      default: '',\n    },\n    inactiveColor: {\n      type: String,\n      default: '',\n    },\n    borderColor: {\n      type: String,\n      default: '',\n    },\n    activeValue: {\n      type: [Boolean, String, Number],\n      default: true,\n    },\n    inactiveValue: {\n      type: [Boolean, String, Number],\n      default: false,\n    },\n    name: {\n      type: String,\n      default: '',\n    },\n    validateEvent: {\n      type: Boolean,\n      default: true,\n    },\n    id: String,\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n    beforeChange: Function as PropType<() => Promise<boolean> | boolean>,\n  },\n  setup(props: ISwitchProps) {\n    const elForm = inject(elFormKey, {} as ElFormContext)\n\n    const isModelValue = ref(props.modelValue !== false)\n    const input = ref(null)\n    const core = ref(null)\n\n    const actualValue = computed((): ValueType => {\n      return isModelValue.value ? props.modelValue : props.value\n    })\n\n    const checked = computed((): boolean => {\n      return actualValue.value === props.activeValue\n    })\n\n    const switchDisabled = computed((): boolean => {\n      return props.disabled || props.loading || (elForm || {}).disabled\n    })\n\n    const setBackgroundColor = (): void => {\n      const newColor = checked.value ? props.activeColor : props.inactiveColor\n      const coreEl = core.value\n      if (props.borderColor) coreEl.style.borderColor = props.borderColor\n      else if (!props.borderColor) coreEl.style.borderColor = newColor\n      coreEl.style.backgroundColor = newColor\n      coreEl.children[0].style.color = newColor\n    }\n\n    onMounted(() => {\n      if (props.activeColor || props.inactiveColor || props.borderColor) {\n        setBackgroundColor()\n      }\n\n      input.value.checked = checked.value\n    })\n\n    return {\n      input,\n      core,\n      switchDisabled,\n      checked,\n    }\n  },\n})\n</script>\n"],"names":["_createElementBlock","_createElementVNode","_createBlock","_resolveDynamicComponent","_createVNode"],"mappings":";;;;;;;EAoC+B,OAAM;AAAA;;;qBAoC1B,OAAM;;;;;sBAvEfA;IACE,uBAAM,8BACmB,mCAA8B;IACvD,MAAK;AAAA,IACJ,gBAAc;IACd,iBAAe;;IAEhBC;MACG,IAAI;MACL,KAAI;AAAA,MACJ,OAAM;AAAA,MACN,MAAK;AAAA,MACJ,MAAM;MACN,cAAY;MACZ,eAAa;MACb,UAAU;;KAGJ,2CAAiC,mCAD1CD;;MAEG;;;;;;MAMc,kCAAfE;yBAA6B;wBAAAA,YAAgCC,wBAAhB;;;;OAChC,qBAAgB,kCAA7BH;;QAA4C,eAAa;yBACrD;;IAGNC;MACE,KAAI;AAAA,MACJ,OAAM;AAAA,MACL,+BAAiB;;MAEP,kCAAXD,0BAAA;QACkB,mBAAc,kCAA9BA;UAEU,gCADRE;;YAEE,uBAAM,WACE;;6BAER;4BAAAA,oCAAgB;;;;UAGV,kCADRA;;YAEE,uBAAM,YACG;;6BAET;4BAAAA,oCAAgB;;;;kBAGC,mBAAc,kCAAnCF;UAEU,gCADRA;;YAEE,uBAAM,WACE;YACP,gBAAc;6BAEZ,gBAAW;UAGR,kCADRA;;YAEE,uBAAM,YACG;YACR,eAAa;6BAEX,kBAAa;;;MAItBC,0BAAA;QACiB,6BAAfC;;UAAwB,OAAM;AAAA;2BAAa;YAAAE,YAAW;AAAA;AAAA;;;;KAIjD,yCAA+B,iCADxCJ;;MAEG;;;;;;MAMc,gCAAfE;yBAA2B;wBAAAA,YAA8BC,wBAAd;;;;OAC9B,mBAAc,gCAA3BH;;QAAwC,gBAAc;yBAClD;;;;;;;"}

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

@@ -0,0 +1,13 @@
+import { withInstall, withNoopInstall } from '../../utils/with-install.mjs';
+import './src/table.mjs';
+import './src/tableColumn.mjs';
+import script from './src/table.vue_vue&type=script&lang.mjs';
+import PsTableColumn$1 from './src/table-column/index.mjs';
+
+const PsTable = withInstall(script, {
+  TableColumn: PsTableColumn$1
+});
+const PsTableColumn = withNoopInstall(PsTableColumn$1);
+
+export { PsTable, PsTableColumn, PsTable as default };
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../../../../../packages/components/table/index.ts"],"sourcesContent":["import { withInstall, withNoopInstall } from '@element-ps/utils/with-install'\nimport Table from './src/table.vue'\nimport TableColumn from './src/tableColumn'\n\nexport const PsTable = withInstall(Table, {\n  TableColumn,\n})\nexport default PsTable\nexport const PsTableColumn = withNoopInstall(TableColumn)\n"],"names":["Table","TableColumn"],"mappings":";;;;;;MAIa,UAAU,YAAYA,QAAO;AAAA,eACxCC;AAAA;MAGW,gBAAgB,gBAAgBA;;;;"}

package/es/packages/components/table/src/config.mjs

@@ -0,0 +1,162 @@
+import { h } from 'vue';
+import { PsCheckbox } from '../../checkbox/index.mjs';
+import { getPropByPath } from '../../../utils/util.mjs';
+import { PsIcon } from '../../icon/index.mjs';
+import { ArrowRight, Loading } from '@element-plus/icons';
+
+const cellStarts = {
+  default: {
+    order: ""
+  },
+  selection: {
+    width: 48,
+    minWidth: 48,
+    realWidth: 48,
+    order: "",
+    className: "el-table-column--selection"
+  },
+  expand: {
+    width: 48,
+    minWidth: 48,
+    realWidth: 48,
+    order: ""
+  },
+  index: {
+    width: 48,
+    minWidth: 48,
+    realWidth: 48,
+    order: ""
+  }
+};
+const cellForced = {
+  selection: {
+    renderHeader({ store }) {
+      function isDisabled() {
+        return store.states.data.value && store.states.data.value.length === 0;
+      }
+      return h(PsCheckbox, {
+        disabled: isDisabled(),
+        size: store.states.tableSize.value,
+        indeterminate: store.states.selection.value.length > 0 && !store.states.isAllSelected.value,
+        "onUpdate:modelValue": store.toggleAllSelection,
+        modelValue: store.states.isAllSelected.value
+      });
+    },
+    renderCell({
+      row,
+      column,
+      store,
+      $index
+    }) {
+      return h(PsCheckbox, {
+        disabled: column.selectable ? !column.selectable.call(null, row, $index) : false,
+        size: store.states.tableSize.value
+      });
+    },
+    sortable: false,
+    resizable: false
+  },
+  index: {
+    renderHeader({ column }) {
+      return column.label || "#";
+    },
+    renderCell({
+      column,
+      $index
+    }) {
+      let i = $index + 1;
+      const index = column.index;
+      if (typeof index === "number") {
+        i = $index + index;
+      } else if (typeof index === "function") {
+        i = index($index);
+      }
+      return h("div", {}, [i]);
+    },
+    sortable: false
+  },
+  expand: {
+    renderHeader({ column }) {
+      return column.label || "";
+    },
+    renderCell({ row, store }) {
+      const classes = ["el-table__expand-icon"];
+      if (store.states.expandRows.value.indexOf(row) > -1) {
+        classes.push("el-table__expand-icon--expanded");
+      }
+      return h("div", {
+        class: classes
+      }, {
+        default: () => {
+          return [
+            h(PsIcon, null, {
+              default: () => {
+                return [h(ArrowRight)];
+              }
+            })
+          ];
+        }
+      });
+    },
+    sortable: false,
+    resizable: false,
+    className: "el-table__expand-column"
+  }
+};
+function defaultRenderCell({
+  row,
+  column,
+  $index
+}) {
+  var _a;
+  const property = column.property;
+  const value = property && getPropByPath(row, property, false).v;
+  if (column && column.formatter) {
+    return column.formatter(row, column, value, $index);
+  }
+  return ((_a = value == null ? void 0 : value.toString) == null ? void 0 : _a.call(value)) || "";
+}
+function treeCellPrefix({
+  row,
+  treeNode,
+  store
+}) {
+  if (!treeNode)
+    return null;
+  const ele = [];
+  if (treeNode.indent) {
+    ele.push(h("span", {
+      class: "el-table__indent",
+      style: { "padding-left": `${treeNode.indent}px` }
+    }));
+  }
+  if (typeof treeNode.expanded === "boolean" && !treeNode.noLazyChildren) {
+    const expandClasses = [
+      "el-table__expand-icon",
+      treeNode.expanded ? "el-table__expand-icon--expanded" : ""
+    ];
+    let icon = ArrowRight;
+    if (treeNode.loading) {
+      icon = Loading;
+    }
+    ele.push(h("div", {
+      class: expandClasses
+    }, {
+      default: () => {
+        return [
+          h(PsIcon, { class: { "is-loading": treeNode.loading } }, {
+            default: () => [h(icon)]
+          })
+        ];
+      }
+    }));
+  } else {
+    ele.push(h("span", {
+      class: "el-table__placeholder"
+    }));
+  }
+  return ele;
+}
+
+export { cellForced, cellStarts, defaultRenderCell, treeCellPrefix };
+//# sourceMappingURL=config.mjs.map

package/es/packages/components/table/src/config.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.mjs","sources":["../../../../../../../packages/components/table/src/config.ts"],"sourcesContent":["import { h } from 'vue'\nimport PsCheckbox from '@element-ps/components/checkbox'\nimport { getPropByPath } from '@element-ps/utils/util'\nimport { PsIcon } from '@element-ps/components/icon'\nimport { ArrowRight, Loading } from '@element-plus/icons'\n\nimport type { VNode } from 'vue'\nimport type { TableColumnCtx } from './table-column/defaults'\nimport type { Store } from './store'\nimport type { TreeNode } from './table/defaults'\n\nexport const cellStarts = {\n  default: {\n    order: '',\n  },\n  selection: {\n    width: 48,\n    minWidth: 48,\n    realWidth: 48,\n    order: '',\n    className: 'el-table-column--selection',\n  },\n  expand: {\n    width: 48,\n    minWidth: 48,\n    realWidth: 48,\n    order: '',\n  },\n  index: {\n    width: 48,\n    minWidth: 48,\n    realWidth: 48,\n    order: '',\n  },\n}\n\n// 这些选项不应该被覆盖\nexport const cellForced = {\n  selection: {\n    renderHeader<T>({ store }: { store: Store<T> }) {\n      function isDisabled() {\n        return store.states.data.value && store.states.data.value.length === 0\n      }\n      return h(PsCheckbox, {\n        disabled: isDisabled(),\n        size: store.states.tableSize.value,\n        indeterminate:\n          store.states.selection.value.length > 0 &&\n          !store.states.isAllSelected.value,\n        'onUpdate:modelValue': store.toggleAllSelection,\n        modelValue: store.states.isAllSelected.value,\n      })\n    },\n    renderCell<T>({\n      row,\n      column,\n      store,\n      $index,\n    }: {\n      row: T\n      column: TableColumnCtx<T>\n      store: Store<T>\n      $index: string\n    }) {\n      return h(PsCheckbox, {\n        disabled: column.selectable\n          ? !column.selectable.call(null, row, $index as any)\n          : false,\n        size: store.states.tableSize.value,\n      })\n    },\n    sortable: false,\n    resizable: false,\n  },\n  index: {\n    renderHeader<T>({ column }: { column: TableColumnCtx<T> }) {\n      return column.label || '#'\n    },\n    renderCell<T>({\n      column,\n      $index,\n    }: {\n      column: TableColumnCtx<T>\n      $index: number\n    }) {\n      let i = $index + 1\n      const index = column.index\n\n      if (typeof index === 'number') {\n        i = $index + index\n      } else if (typeof index === 'function') {\n        i = index($index)\n      }\n      return h('div', {}, [i])\n    },\n    sortable: false,\n  },\n  expand: {\n    renderHeader<T>({ column }: { column: TableColumnCtx<T> }) {\n      return column.label || ''\n    },\n    renderCell<T>({ row, store }: { row: T; store: Store<T> }) {\n      const classes = ['el-table__expand-icon']\n      if (store.states.expandRows.value.indexOf(row) > -1) {\n        classes.push('el-table__expand-icon--expanded')\n      }\n      return h(\n        'div',\n        {\n          class: classes,\n        },\n        {\n          default: () => {\n            return [\n              h(PsIcon, null, {\n                default: () => {\n                  return [h(ArrowRight)]\n                },\n              }),\n            ]\n          },\n        }\n      )\n    },\n    sortable: false,\n    resizable: false,\n    className: 'el-table__expand-column',\n  },\n}\n\nexport function defaultRenderCell<T>({\n  row,\n  column,\n  $index,\n}: {\n  row: T\n  column: TableColumnCtx<T>\n  $index: number\n}) {\n  const property = column.property\n  const value = property && getPropByPath(row, property, false).v\n  if (column && column.formatter) {\n    return column.formatter(row, column, value, $index)\n  }\n  return value?.toString?.() || ''\n}\n\nexport function treeCellPrefix<T>({\n  row,\n  treeNode,\n  store,\n}: {\n  row: T\n  treeNode: TreeNode\n  store: Store<T>\n}) {\n  if (!treeNode) return null\n  const ele: VNode[] = []\n  if (treeNode.indent) {\n    ele.push(\n      h('span', {\n        class: 'el-table__indent',\n        style: { 'padding-left': `${treeNode.indent}px` },\n      })\n    )\n  }\n  if (typeof treeNode.expanded === 'boolean' && !treeNode.noLazyChildren) {\n    const expandClasses = [\n      'el-table__expand-icon',\n      treeNode.expanded ? 'el-table__expand-icon--expanded' : '',\n    ]\n    let icon = ArrowRight\n    if (treeNode.loading) {\n      icon = Loading\n    }\n\n    ele.push(\n      h(\n        'div',\n        {\n          class: expandClasses,\n        },\n        {\n          default: () => {\n            return [\n              h(\n                PsIcon,\n                { class: { 'is-loading': treeNode.loading } },\n                {\n                  default: () => [h(icon)],\n                }\n              ),\n            ]\n          },\n        }\n      )\n    )\n  } else {\n    ele.push(\n      h('span', {\n        class: 'el-table__placeholder',\n      })\n    )\n  }\n  return ele\n}\n"],"names":[],"mappings":"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"}