vue-super-crud 1.7.1 → 1.7.4

package/packages/group/index.vue

@@ -1,96 +0,0 @@
-<template>
-  <div
-    v-if="!hidden"
-    :class="[b({ header: !isHeader, arrow: disabled, border: border })]"
-  >
-    <slot name="tabs" />
-    <el-collapse v-model="activeName" :value="text" @change="handleChange">
-      <el-collapse-item :name="1" :disabled="disabled">
-        <template #title>
-          <div v-if="$slots.header && !hiddenHeader" :class="[b('header')]">
-            <slot name="header" />
-          </div>
-          <div
-            v-else-if="(label || icon) && !hiddenHeader"
-            :class="[b('header')]"
-          >
-            <i v-if="icon" :class="[icon, b('icon')]" />
-            <h1 v-if="label" :class="[b('title'), tag ? b('tag') : '']">
-              {{ label }}
-            </h1>
-          </div>
-        </template>
-        <slot />
-      </el-collapse-item>
-    </el-collapse>
-  </div>
-</template>
-
-<script>
-import create from "core/create";
-
-export default create({
-  name: "group",
-  data() {
-    return {
-      activeName: "",
-    };
-  },
-  props: {
-    border: {
-      type: Boolean,
-      default: true,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    hiddenHeader: {
-      type: Boolean,
-      default: false,
-    },
-    collapse: {
-      type: Boolean,
-      default: true,
-    },
-    icon: {
-      type: String,
-    },
-    hidden: {
-      type: Boolean,
-      default: false,
-    },
-    label: {
-      type: String,
-    },
-    tag: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  watch: {
-    text(val) {
-      this.activeName = [val];
-    },
-  },
-  computed: {
-    text() {
-      return this.collapse ? 1 : 0;
-    },
-    isHeader() {
-      return (
-        (this.$slots.header && !this.hiddenHeader) ||
-        ((this.label || this.icon) && !this.hiddenHeader)
-      );
-    },
-  },
-  created() {
-    this.activeName = [this.text];
-  },
-  methods: {
-    handleChange(activeNames) {
-      this.$emit("change", activeNames);
-    },
-  },
-});
-</script>

package/packages/tabs/index.vue

@@ -1,290 +0,0 @@
-<template>
-  <div :class="[b(), { [b('border')]: border || $attrs.type === 'card' }]">
-    <!-- 标签页头部 -->
-    <el-tabs
-      v-model="activeName"
-      v-if="tabList.length"
-      v-bind="$attrs"
-      v-on="omitListeners"
-      @tab-click="handleTabClick"
-    >
-      <!-- 全部标签页 -->
-      <el-tab-pane v-if="all" :label="allConfig.label" name="all" />
-
-      <!-- 动态标签页 -->
-      <el-tab-pane
-        v-for="(item, index) in tabList"
-        :key="getItemKey(item, index)"
-        :label="getItemLabel(item)"
-        :name="getItemName(item, index)"
-        v-bind="getItem(item)"
-      >
-        <template #label>
-          <i v-if="item.icon" :class="item.icon"></i>
-          <slot
-            v-if="$scopedSlots[getItemName(item, index) + '-label']"
-            :name="getItemName(item, index) + '-label'"
-            v-bind="item"
-          />
-          <template v-else>{{ getItemLabel(item) }}</template>
-          <i
-            v-if="refresh && cache && activeName === getItemName(item, index)"
-            class="el-icon-refresh"
-            :class="{ rotating: isRefreshing }"
-            title="刷新"
-            @click.stop="refreshTab(item, index)"
-          />
-        </template>
-      </el-tab-pane>
-    </el-tabs>
-
-    <!-- 插槽内容 -->
-    <slot />
-
-    <!-- 标签页内容区 -->
-    <div :class="[b('content'), { [b('is-refresh')]: isRefreshing }]">
-      <transition-group name="fade-transform" mode="out-in">
-        <template v-for="(item, index) in tabList">
-          <div
-            v-if="shouldRenderTab(item, index)"
-            :key="getItemKey(item, index)"
-            v-show="currentTab === getItemName(item, index)"
-            class="tab-pane"
-            :class="{ 'is-active': currentTab === getItemName(item, index) }"
-          >
-            <slot
-              v-if="$scopedSlots[getItemName(item, index)]"
-              :name="getItemName(item, index)"
-            />
-            <Render
-              v-else
-              v-bind="item"
-              :item="item"
-              :scope="{
-                row: item.value,
-              }"
-            />
-          </div>
-        </template>
-      </transition-group>
-    </div>
-  </div>
-</template>
-
-<script>
-import { create } from "core";
-import { isPlainObject, omit } from "lodash-es";
-import Render from "core/components/render";
-
-export default create({
-  name: "tabs",
-
-  props: {
-    value: {},
-    tabList: {
-      type: Array,
-      default: () => [],
-    },
-    cache: {
-      type: Boolean,
-      default: true,
-    },
-    all: [Boolean, Object],
-    border: Boolean,
-    cacheActive: {
-      type: Boolean,
-      default: true,
-    },
-    refresh: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  components: {
-    Render,
-  },
-
-  data() {
-    return {
-      activeName: "",
-      renderedTabs: new Set(),
-      currentTab: "",
-      isRefreshing: false,
-      scope: { row: {} },
-    };
-  },
-
-  computed: {
-    omitListeners() {
-      return omit(this.$listeners, ["tab-click", "input"]);
-    },
-
-    allConfig() {
-      const defaultConfig = {
-        label: "全部",
-        name: null,
-      };
-      return isPlainObject(this.all)
-        ? { ...defaultConfig, ...this.all }
-        : defaultConfig;
-    },
-  },
-
-  watch: {
-    value: {
-      handler(val) {
-        this.initActiveName(val);
-      },
-      immediate: true,
-    },
-
-    activeName: {
-      handler(val) {
-        if (!val) return;
-
-        this.handleTabTransition(val);
-        this.renderedTabs.add(val);
-
-        const emitValue = this.all && val === "all" ? this.allConfig.name : val;
-        this.$emit("input", emitValue);
-      },
-      immediate: true,
-    },
-
-    tabList: {
-      handler() {
-        this.initActiveName(this.value);
-      },
-    },
-  },
-
-  mounted() {
-    // 从路由中恢复激活的标签
-    if (this.cacheActive && this.$route?.query.tabActive) {
-      this.activeName = this.$route.query.tabActive;
-    }
-    this.$nextTick(this.updateContentHeight);
-
-    // 创建 ResizeObserver 实例
-    this.resizeObserver = new ResizeObserver(() => {
-      this.updateContentHeight();
-    });
-
-    // 观察活动面板
-    this.observeActivePane();
-  },
-  updated() {
-    this.$nextTick(this.updateContentHeight);
-  },
-
-  beforeDestroy() {
-    // 清理 ResizeObserver
-    if (this.resizeObserver) {
-      this.resizeObserver.disconnect();
-    }
-  },
-
-  methods: {
-    handleTabClick(tab) {
-      this.$nextTick(() => {
-        if (this.cacheActive) {
-          this.updateRouteQuery(this.activeName);
-        }
-        this.$emit(
-          "tab-click",
-          tab,
-          this.tabList.find(
-            (item) => this.getItemName(item) === this.activeName
-          )
-        );
-      });
-    },
-
-    initActiveName(val) {
-      if (!this.tabList.length) return;
-
-      this.activeName =
-        val || (this.all && "all") || this.getItemName(this.tabList[0], 0);
-    },
-
-    getItem(item) {
-      return isPlainObject(item) ? item : {};
-    },
-
-    getItemKey(item, index) {
-      return `${item?.label || index}`;
-    },
-
-    getItemLabel(item) {
-      return item?.label || item;
-    },
-
-    getItemName(item, index) {
-      return `${item?.name || item?.value || index}`;
-    },
-
-    shouldRenderTab(item, index) {
-      const tabName = this.getItemName(item, index);
-      const shouldCache = item.cache === undefined ? this.cache : item.cache;
-      return shouldCache
-        ? this.renderedTabs.has(tabName)
-        : this.currentTab === tabName;
-    },
-
-    updateRouteQuery(val) {
-      if (!this.$route) return;
-
-      this.$router.replace({
-        path: this.$route.path,
-        query: {
-          ...this.$route.query,
-          tabActive: val,
-        },
-      });
-    },
-
-    async refreshTab(item, index) {
-      if (this.isRefreshing) return;
-
-      this.$emit("refresh", item, index);
-      const tabName = this.getItemName(item, index);
-      this.isRefreshing = true;
-
-      // 移除缓存
-      this.renderedTabs.delete(tabName);
-      await this.$nextTick();
-
-      // 重新渲染
-      setTimeout(() => {
-        this.renderedTabs.add(tabName);
-        this.isRefreshing = false;
-      }, 300);
-    },
-    updateContentHeight() {
-      // 获取当前激活的面板
-      const activePane = this.$el.querySelector(".tab-pane.is-active");
-      if (activePane) {
-        // 获取面板实际高度并设置给容器
-        const height = activePane.offsetHeight;
-        const content = this.$el.querySelector(".sc-tabs__content");
-        if (content) {
-          content.style.height = `${height}px`;
-        }
-      }
-    },
-    observeActivePane() {
-      const activePane = this.$el.querySelector(".tab-pane.is-active");
-      if (activePane && this.resizeObserver) {
-        this.resizeObserver.disconnect(); // 先断开之前的观察
-        this.resizeObserver.observe(activePane); // 观察新的活动面板
-      }
-    },
-
-    async handleTabTransition(val) {
-      this.currentTab = val;
-      await this.$nextTick();
-      this.observeActivePane(); // 切换标签页时重新观察
-    },
-  },
-});
-</script>

package/packages/tooltip/index.js

@@ -1,9 +0,0 @@
-import tooltipComponent from "./tooltipComponent.js";
-
-export default function (options) {
-  let DialogConstructor = window.Vue.extend(tooltipComponent(options));
-  let instance = new DialogConstructor();
-  instance.vm = instance.$mount();
-  document.body.appendChild(instance.vm.$el);
-  return instance.vm;
-}

package/packages/tooltip/tooltip.vue

@@ -1,32 +0,0 @@
-<script>
-import tooltip from "./index";
-export default {
-  props: {
-    hide: {},
-  },
-  render(h) {
-    return !this.hide ? (
-      <span
-        class="tooltip-wrapper"
-        on={{
-          mouseenter: (e) => {
-            this.vm = tooltip({
-              placement: "top",
-              ...this.$attrs,
-              target: e.target,
-            });
-            this.vm.show();
-          },
-          mouseleave: (e) => {
-            this.vm && this.vm.hide();
-          },
-        }}
-      >
-        {this.$slots.default}
-      </span>
-    ) : (
-      this.$slots.default
-    );
-  },
-};
-</script>

package/packages/tooltip/tooltipComponent.js

@@ -1,38 +0,0 @@
-import create from "core/create";
-export default (options = {}) => {
-  return create({
-    name: "tooltip",
-    methods: {
-      show() {
-        if (!options.content) return;
-        const tooltip = this.$refs.tooltip;
-        tooltip.referenceElm = options.target;
-        if (options.overflow) {
-          const dom = options.target;
-          const range = document.createRange();
-          range.setStart(dom, 0);
-          range.setEnd(dom, dom.childNodes.length);
-          const rangeWidth = range.getBoundingClientRect().width;
-          const selfWidth = dom.getBoundingClientRect().width;
-          const isOverflowing =
-            rangeWidth > selfWidth || dom.scrollWidth > dom.offsetWidth;
-          if (!isOverflowing) return;
-        }
-        tooltip.setExpectedState(true);
-        tooltip.handleShowPopper();
-      },
-      hide() {
-        const tooltip = this.$refs.tooltip;
-        tooltip.setExpectedState(false);
-        tooltip.handleClosePopper();
-        this.$destroy();
-        this.$el.remove();
-      },
-    },
-    render(h) {
-      return (
-        <el-tooltip ref="tooltip" props={options} attrs={options}></el-tooltip>
-      );
-    },
-  });
-};

package/packages/verifyInput/index.vue

@@ -1,131 +0,0 @@
-<template>
-  <div :class="[b(), inputSize ? 'sc-verify-input--' + inputSize : '']">
-    <input
-      v-for="(code, index) in codes"
-      :key="index"
-      type="number"
-      min="0"
-      max="9"
-      required
-      ref="codeInput"
-      v-model="codes[index]"
-      @keydown="handleKeyDown(index, $event)"
-      @paste="handlePaste($event)"
-      :disabled="inputDisabled"
-      placeholder=""
-      v-bind="$attrs"
-      v-on="omitListeners"
-    />
-  </div>
-</template>
-
-<script>
-import { create } from "core";
-import { omit } from "lodash-es";
-export default create({
-  name: "verify-input",
-  inject: {
-    elForm: {
-      default: "",
-    },
-    elFormItem: {
-      default: "",
-    },
-  },
-  props: {
-    length: {
-      type: Number,
-      default: 6,
-    },
-    size: String,
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    allowLetters: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      codes: Array.from({ length: this.length }, () => ""),
-      timer: null,
-    };
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.$refs.codeInput[0].focus();
-    });
-  },
-  watch: {
-    value(val) {
-      this.codes = val.split("");
-    },
-    codes(val) {
-      this.$emit("input", val.join(""));
-    },
-  },
-  computed: {
-    omitListeners() {
-      return omit(this.$listeners, ["input"]);
-    },
-    _elFormItemSize() {
-      return (this.elFormItem || {}).elFormItemSize;
-    },
-    inputSize() {
-      return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
-    },
-    inputDisabled() {
-      return this.disabled || (this.elForm || {}).disabled;
-    },
-  },
-  methods: {
-    handleKeyDown(index, event) {
-      if (event.key >= 0 && event.key <= 9) {
-        this.codes.splice(index, 1, "");
-        this.timer = setTimeout(() => {
-          if (index < this.codes.length - 1) {
-            this.$refs.codeInput[index + 1].focus();
-          }
-        }, 10);
-      } else if (event.key === "Backspace") {
-        this.timer = setTimeout(() => {
-          if (index > 0) {
-            this.$refs.codeInput[index - 1].focus();
-          }
-        }, 10);
-      }
-    },
-    handlePaste(event) {
-      event.preventDefault();
-      const pastedText = event.clipboardData.getData("text");
-      const numbers = pastedText
-        .replace(/[^\d]/g, "")
-        .split("")
-        .slice(0, this.length);
-
-      if (numbers.length > 0) {
-        this.codes = Array.from(
-          { length: this.length },
-          (_, index) => numbers[index] || ""
-        );
-
-        // 如果输入完成，聚焦到最后一个输入框
-        if (numbers.length >= this.length) {
-          this.$refs.codeInput[this.length - 1].focus();
-        } else {
-          // 否则聚焦到下一个空输入框
-          this.$refs.codeInput[numbers.length].focus();
-        }
-      }
-    },
-    focus(index = 0) {
-      this.$refs.codeInput[index].focus();
-    },
-  },
-  beforeDestroy() {
-    clearTimeout(this.timer); // 清除定时器
-  },
-});
-</script>

package/styles/button.scss

@@ -1,3 +0,0 @@
-.sc-button + .sc-button {
-  margin-left: 10px;
-}