@xjw_/vue2-npm-system 1.0.16 → 1.0.18

package/package.json

@@ -1,12 +1,10 @@
 {
   "name": "@xjw_/vue2-npm-system",
-  "version": "1.0.16",
+  "version": "1.0.18",
   "description": "基于 Element-UI 的 Vue2 组件库，二次封装常用组件",
   "main": "lib/index.js",
-  "module": "es/index.js",
   "files": [
     "lib",
-    "es",
     "dist"
   ],
   "scripts": {

package/es/assets/svg/filter.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
-  <path d="M783.808 160c13.696 0 21.12 15.616 12.416 25.728L577.024 436.352v411.84c0 11.712-12.736 19.392-23.488 14.08l-161.472-78.528a15.616 15.616 0 0 1-8.96-14.144V436.352L163.84 185.728c-8.832-10.112-1.472-25.728 12.224-25.728z m29.12 569.6c10.56 0 19.2 7.104 19.072 16v38.4c0 8.832-8.64 16-19.2 16h-153.6c-10.56 0-19.2-7.168-19.2-16v-38.4c0-8.768 8.64-16 19.2-16z m0-140.8c10.56 0 19.2 7.168 19.072 15.936v38.4c0 8.832-8.64 16-19.2 16h-153.6c-10.56 0-19.2-7.168-19.2-16v-38.4c0-8.768 8.64-16 19.2-16z m0-140.8c10.56 0 19.2 7.168 19.072 16v38.4c0 8.768-8.64 16-19.2 16h-153.6c-10.56 0-19.2-7.232-19.2-16v-38.4c0-8.832 8.64-16 19.2-16z"/>
-</svg>

package/es/assets/svg/search.svg

@@ -1 +0,0 @@
-<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M124.884 109.812L94.256 79.166c-.357-.357-.757-.629-1.129-.914a50.366 50.366 0 0 0 8.186-27.59C101.327 22.689 78.656 0 50.67 0 22.685 0 0 22.688 0 50.663c0 27.989 22.685 50.663 50.656 50.663 10.186 0 19.643-3.03 27.6-8.201.286.385.557.771.9 1.114l30.628 30.632a10.633 10.633 0 0 0 7.543 3.129c2.728 0 5.457-1.043 7.543-3.115 4.171-4.157 4.171-10.915.014-15.073M50.671 85.338C31.557 85.338 16 69.78 16 50.663c0-19.102 15.557-34.661 34.67-34.661 19.115 0 34.657 15.559 34.657 34.675 0 19.102-15.557 34.661-34.656 34.661"/></svg>

package/es/components/SvgIcon.vue

@@ -1,62 +0,0 @@
-<template>
-  <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" />
-  <svg v-else :class="svgClass" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" v-on="$listeners">
-    <use :href="iconName" :xlink:href="iconName" />
-  </svg>
-</template>
-
-<script>
-// doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage
-import { isExternal } from '../utils/validate.js'
-
-export default {
-  name: 'SvgIcon',
-  props: {
-    iconClass: {
-      type: String,
-      required: true
-    },
-    className: {
-      type: String,
-      default: ''
-    }
-  },
-  computed: {
-    isExternal() {
-      return isExternal(this.iconClass)
-    },
-    iconName() {
-      return `#icon-${this.iconClass}`
-    },
-    svgClass() {
-      if (this.className) {
-        return 'svg-icon ' + this.className
-      } else {
-        return 'svg-icon'
-      }
-    },
-    styleExternalIcon() {
-      return {
-        mask: `url(${this.iconClass}) no-repeat 50% 50%`,
-        '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-.svg-icon {
-  width: 1em;
-  height: 1em;
-  vertical-align: -0.15em;
-  fill: currentColor;
-  overflow: hidden;
-}
-
-.svg-external-icon {
-  background-color: currentColor;
-  mask-size: cover!important;
-  display: inline-block;
-}
-</style>

package/es/components/XSearchBar.vue

@@ -1,174 +0,0 @@
-<template>
-  <div class="search">
-    <div class="search-top">
-      <div class="">
-        <div class="h-flex justify-content-between">
-          <div class="h-flex">
-            <div class="h-flex">
-              <span style="color: #000;font-size: 13px;line-height: 32px">快捷搜索：</span>
-              <div class=" search-top-input h-w246 h-h32 align-items-center">
-                <el-input type="text" class="" @keyup.enter.native="searchParentList" v-model="combinedQueries"
-                          :placeholder="placeholder"
-                          @input="$emit('input', $event)"
-                >
-                  <svg-icon slot="prefix" icon-class="search" class-name="svg-icon-22"></svg-icon>
-                </el-input>
-              </div>
-              <div class="h-ml-20 h-flex align-items-center">
-                <slot></slot>
-              </div>
-            </div>
-            <div class="h-flex search-top-filter align-items-center h-ml-12 h-pl-4 h-pr-8 h-cursor-pointer"
-                 @click="showMore = !showMore"
-            >
-              <svg-icon icon-class="filter" class-name="h-t-primary svg-icon-22"></svg-icon>
-              <span class="btn_more">更多</span>
-            </div>
-          </div>
-          <div class="">
-            <el-button plain @click="reset">重 置</el-button>
-            <el-button type="primary" class="" @click="searchParentList">查 询</el-button>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="search-form" v-show="showMore">
-      <div class="h-plr-16 h-pt-16 h-pb-16 h-flex">
-        <!--        <el-form :rules="rules" :model="queryForm" ref="queryForm" inline label-position="top" label-suffix="：" hide-required-asterisk show-message>
-                </el-form>-->
-        <slot name="form"></slot>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import SvgIcon from "./SvgIcon.vue";
-
-/**
- * @author xjw
- * @date  2025/5/19 20:35
- * @version 1.0
- */
-export default {
-  name: 'XSearchBar',
-  components: {SvgIcon},
-  props: {
-    value: {
-      type: String,
-      default: () => {
-        return ''
-      }
-    },
-    placeholder: {
-      type: String,
-      default: '可输入户号/户名/联系电话'
-    }
-  },
-  data() {
-    return {
-      showMore: false,
-      combinedQueries: ''
-    }
-  },
-  computed: {},
-  watch: {
-    value: {
-      immediate: true,
-      handler(newVal) {
-        this.combinedQueries = newVal;
-      }
-    }
-  },
-  created() {
-  },
-  methods: {
-    reset() {
-      this.$emit('data-reset')
-    },
-    // 查询
-    searchParentList() {
-      this.showMore = false
-      this.$emit('data-update')
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.justify-content-between {
-  justify-content: space-between;
-}
-
-.align-items-center {
-  align-items: center;
-}
-
-.svg-icon-22 {
-  width: 22px;
-  height: 22px;
-  display: block;
-}
-
-.h-w246 {
-  width: 246px;
-}
-
-.h-h32 {
-  height: 32px;
-}
-
-.search {
-  position: relative;
-  &-top {
-    padding: 12px 16px;
-    background: #FFFFFF;
-    border: 1px solid #eaf1fa;
-
-    &-input {
-      box-shadow: 0px -1px 8px 0px rgba(0, 105, 255, 0.1);
-    }
-
-    &-filter {
-      background: #FFFFFF;
-      box-shadow: 0px -1px 8px 0px rgba(0, 105, 255, 0.1);
-      border-radius: 2px;
-      border: 1px solid #EEEEEE;
-    }
-  }
-
-  &-form {
-    position: absolute;
-    left: 0;
-    top: 58px;
-    background: #FFFFFF;
-    border-radius: 2px;
-    border: 1px solid #E1EBFA;
-    width: 100%;
-    z-index: 1000;
-    box-shadow: 0px -1px 8px 0px rgba(0, 105, 255, 0.1);
-  }
-
-  &-title {
-    color: #000000;
-  }
-}
-::v-deep {
-  .el-input__prefix {
-    display: flex;
-    align-items: center;
-  }
-  .vxe-input.size--small {
-    height: 32px;
-  }
-  .el-button--small {
-    padding: 9px 18px;
-  }
-}
-.btn_more {
-  font-weight: 400;
-  font-size: 14px;
-  color: #666666;
-  line-height: 20px;
-}
-</style>

package/es/index.js

@@ -1,34 +0,0 @@
-// 导入所有组件
-import './plugins/svg-icon';
-import './styles/x-ui.scss';
-import XSearchBar from './components/XSearchBar';
-import SvgIcon from './components/SvgIcon';
-
-// 存储组件列表（对外暴露的组件）
-var components = [XSearchBar];
-
-// 内部组件列表（不对外暴露）
-var internalComponents = [SvgIcon];
-
-// 安装方法
-var install = function install(Vue) {
-  // 注册所有对外组件
-  components.forEach(function (component) {
-    Vue.component(component.name, component);
-  });
-
-  // 注册内部组件
-  internalComponents.forEach(function (component) {
-    Vue.component(component.name, component);
-  });
-};
-
-// 导出的对象（只导出公开组件）
-export default {
-  version: '1.0.0',
-  install: install,
-  XSearchBar: XSearchBar
-};
-
-// 单独导出各个组件（只导出公开组件）
-export { XSearchBar };

package/es/plugins/svg-icon.js

@@ -1,143 +0,0 @@
-// 使用 require.context 自动导入所有 SVG 图标
-var req = require.context('../assets/svg', false, /\.svg$/);
-var loadingSymbols = {};
-
-// 在 DOM ready 后执行
-function initSvgSprite() {
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', createSvgSprite);
-  } else {
-    createSvgSprite();
-  }
-}
-function prefixIds(svgElement, prefix) {
-  var idMap = {};
-  var elementsWithId = svgElement.querySelectorAll('[id]');
-  elementsWithId.forEach(function (el) {
-    var oldId = el.getAttribute('id');
-    var newId = "".concat(prefix, "-").concat(oldId);
-    idMap[oldId] = newId;
-    el.setAttribute('id', newId);
-  });
-  var attrs = ['href', 'xlink:href', 'fill', 'stroke', 'filter', 'clip-path', 'mask', 'marker-start', 'marker-mid', 'marker-end'];
-  var allElements = svgElement.querySelectorAll('*');
-  allElements.forEach(function (el) {
-    attrs.forEach(function (attr) {
-      var val = el.getAttribute(attr);
-      if (!val) return;
-      var next = val;
-      Object.keys(idMap).forEach(function (oldId) {
-        var newId = idMap[oldId];
-        next = next.replace(new RegExp("url\\(#".concat(oldId, "\\)"), 'g'), "url(#".concat(newId, ")"));
-        next = next.replace(new RegExp("#".concat(oldId, "(?![\\w-])"), 'g'), "#".concat(newId));
-      });
-      if (next !== val) {
-        el.setAttribute(attr, next);
-      }
-    });
-    var style = el.getAttribute('style');
-    if (style) {
-      var nextStyle = style;
-      Object.keys(idMap).forEach(function (oldId) {
-        var newId = idMap[oldId];
-        nextStyle = nextStyle.replace(new RegExp("url\\(#".concat(oldId, "\\)"), 'g'), "url(#".concat(newId, ")"));
-        nextStyle = nextStyle.replace(new RegExp("#".concat(oldId, "(?![\\w-])"), 'g'), "#".concat(newId));
-      });
-      if (nextStyle !== style) {
-        el.setAttribute('style', nextStyle);
-      }
-    }
-  });
-}
-function parseSvgElement(content) {
-  var normalizedSvg = String(content).replace(/<\?xml[\s\S]*?\?>/gi, '').replace(/<!doctype[\s\S]*?>/gi, '');
-  var parser = new DOMParser();
-  var doc = parser.parseFromString(normalizedSvg, 'image/svg+xml');
-  var svgElement = doc.documentElement;
-  if (svgElement && svgElement.nodeName !== 'parsererror') {
-    return svgElement;
-  }
-  var match = normalizedSvg.match(/<svg[\s\S]*<\/svg>/i);
-  if (!match) {
-    return null;
-  }
-  var fallbackDoc = parser.parseFromString(match[0], 'image/svg+xml');
-  var fallbackSvgElement = fallbackDoc.documentElement;
-  if (!fallbackSvgElement || fallbackSvgElement.nodeName === 'parsererror') {
-    return null;
-  }
-  return fallbackSvgElement;
-}
-function appendSymbol(defs, symbolId, svgElement) {
-  var existsInSprite = Array.from(defs.children).some(function (node) {
-    return node.id === symbolId;
-  });
-  if (existsInSprite) {
-    return;
-  }
-  prefixIds(svgElement, symbolId);
-  var symbol = document.createElementNS('http://www.w3.org/2000/svg', 'symbol');
-  symbol.setAttribute('id', symbolId);
-  symbol.setAttribute('viewBox', svgElement.getAttribute('viewBox') || '0 0 128 128');
-  Array.from(svgElement.childNodes).forEach(function (node) {
-    symbol.appendChild(node.cloneNode(true));
-  });
-  defs.appendChild(symbol);
-}
-function createSvgSprite() {
-  var svg = document.getElementById('svg-sprite');
-  if (!svg) {
-    svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-    svg.id = 'svg-sprite';
-    svg.setAttribute('aria-hidden', 'true');
-    svg.style.position = 'absolute';
-    svg.style.width = '0';
-    svg.style.height = '0';
-    svg.style.overflow = 'hidden';
-    document.body.insertBefore(svg, document.body.firstChild);
-  }
-  var defs = document.getElementById('svg-sprite-defs');
-  if (!defs) {
-    defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
-    defs.id = 'svg-sprite-defs';
-    svg.appendChild(defs);
-  }
-  req.keys().forEach(function (key) {
-    var fileName = key.replace(/(\.\/|\.svg)/g, '');
-    var symbolId = "icon-".concat(fileName);
-    var existsInSprite = Array.from(defs.children).some(function (node) {
-      return node.id === symbolId;
-    });
-    if (existsInSprite || loadingSymbols[symbolId]) {
-      return;
-    }
-    var rawSvg = req(key);
-    var svgContent = rawSvg && rawSvg["default"] ? rawSvg["default"] : rawSvg;
-    if (!svgContent) {
-      return;
-    }
-    var svgText = String(svgContent);
-    loadingSymbols[symbolId] = true;
-    if (/<svg[\s>]/i.test(svgText)) {
-      var svgElement = parseSvgElement(svgText);
-      if (svgElement) {
-        appendSymbol(defs, symbolId, svgElement);
-      }
-      delete loadingSymbols[symbolId];
-      return;
-    }
-    fetch(svgText).then(function (res) {
-      return res.text();
-    }).then(function (content) {
-      var svgElement = parseSvgElement(content);
-      if (svgElement) {
-        appendSymbol(defs, symbolId, svgElement);
-      }
-    })["finally"](function () {
-      delete loadingSymbols[symbolId];
-    })["catch"](function () {
-      delete loadingSymbols[symbolId];
-    });
-  });
-}
-initSvgSprite();

package/es/styles/variables.scss

@@ -1,56 +0,0 @@
-// Element UI 主题颜色变量
-// 主色调
-$--color-primary: #409EFF !default;
-$--color-primary-light-3: mix(#fff, $--color-primary, 30%) !default; // 53a8ff
-$--color-primary-light-5: mix(#fff, $--color-primary, 50%) !default; // 66b1ff
-$--color-primary-light-7: mix(#fff, $--color-primary, 70%) !default; // 79bbff
-$--color-primary-light-8: mix(#fff, $--color-primary, 80%) !default; // 8cc5ff
-$--color-primary-light-9: mix(#fff, $--color-primary, 90%) !default; // a0cfff
-
-// 辅助色
-$--color-success: #67C23A !default;
-$--color-warning: #E6A23C !default;
-$--color-danger: #F56C6C !default;
-$--color-info: #909399 !default;
-
-// 中性色
-$--color-black: #000000 !default;
-$--color-white: #FFFFFF !default;
-
-$--color-text-primary: #303133 !default;
-$--color-text-regular: #606266 !default;
-$--color-text-secondary: #909399 !default;
-$--color-text-placeholder: #C0C4CC !default;
-
-// 边框颜色
-$--border-color-base: #DCDFE6 !default;
-$--border-color-light: #E4E7ED !default;
-$--border-color-lighter: #EBEEF5 !default;
-$--border-color-extra-light: #F2F6FC !default;
-
-// 背景色
-$--background-color-base: #F5F7FA !default;
-
-:root {
-  --el-color-primary: #{$--color-primary};
-  --el-color-primary-light-3: #{$--color-primary-light-3};
-  --el-color-primary-light-5: #{$--color-primary-light-5};
-  --el-color-primary-light-7: #{$--color-primary-light-7};
-  --el-color-primary-light-8: #{$--color-primary-light-8};
-  --el-color-primary-light-9: #{$--color-primary-light-9};
-  --el-color-success: #{$--color-success};
-  --el-color-warning: #{$--color-warning};
-  --el-color-danger: #{$--color-danger};
-  --el-color-info: #{$--color-info};
-  --el-color-black: #{$--color-black};
-  --el-color-white: #{$--color-white};
-  --el-text-color-primary: #{$--color-text-primary};
-  --el-text-color-regular: #{$--color-text-regular};
-  --el-text-color-secondary: #{$--color-text-secondary};
-  --el-text-color-placeholder: #{$--color-text-placeholder};
-  --el-border-color-base: #{$--border-color-base};
-  --el-border-color-light: #{$--border-color-light};
-  --el-border-color-lighter: #{$--border-color-lighter};
-  --el-border-color-extra-light: #{$--border-color-extra-light};
-  --el-background-color-base: #{$--background-color-base};
-}

package/es/styles/x-ui.scss

@@ -1,156 +0,0 @@
-@import './variables';
-
-/* ==================
-          文字对齐
- ==================== */
-.h-text-center { text-align: center; }
-.h-text-right { text-align: right; }
-.h-text-left { text-align: left; }
-
-/* ==================
-          flex 弹性布局
- ==================== */
-.h-flex { display: flex; }
-.h-flex-column { display: flex; flex-direction: column; }
-.h-flex--column { display: flex; flex-direction: column; }
-.h-flex-wrap { display: flex; flex-wrap: wrap; }
-.h-flex--wrap { display: flex; flex-wrap: wrap; }
-
-.h-flex-1 { flex: 1; }
-.h-flex-2 { flex: 2; }
-.h-flex-3 { flex: 3; }
-.h-flex-none { flex: none; }
-
-
-.h-justify-start { justify-content: flex-start; }
-.h-justify-end { justify-content: flex-end; }
-.h-justify-center { justify-content: center; }
-.h-justify-between { justify-content: space-between; }
-.h-justify-around { justify-content: space-around; }
-
-.h-align-start { align-items: flex-start; }
-.h-align-end { align-items: flex-end; }
-.h-align-center { align-items: center; }
-.h-align-stretch { align-items: stretch; }
-.h-align-baseline { align-items: baseline; }
-
-.h-self-start { align-self: flex-start; }
-.h-self-center { align-self: center; }
-.h-self-end { align-self: flex-end; }
-.h-self-stretch { align-self: stretch; }
-.h-self-baseline { align-self: baseline; }
-
-
-/* ==================
-          文本
- ==================== */
-
-/* --文本行数限制-- */
-.h-line-1 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
-.h-line-2, .h-line-3, .h-line-4, .h-line-5 { 
-  overflow: hidden; 
-  word-break: break-all; 
-  text-overflow: ellipsis;  
-  display: -webkit-box; 
-  -webkit-box-orient: vertical; 
-}
-.h-line-2 { -webkit-line-clamp: 2; }
-.h-line-3 { -webkit-line-clamp: 3; }
-.h-line-4 { -webkit-line-clamp: 4; }
-.h-line-5 { -webkit-line-clamp: 5; }
-
-/* --文本大小-- */
-@for $i from 0 through 119 {
-  .h-font-#{$i} {
-    font-size: #{$i}px;
-  }
-}
-
-.h-bold {
-  font-weight: bold;
-}
-
-
- /* ==================
-          内外边距
- ==================== */
- @for $i from 1 through 50 {
-   .h-p-#{$i} { padding: #{$i}px; }
-   .h-m-#{$i} { padding: #{$i}px; }
- }
- @for $i from 1 through 50 {
-  .h-plr-#{$i} { padding-left: #{$i}px; padding-right: #{$i}px; }
-  .h-ptb-#{$i} { padding-top: #{$i}px; padding-bottom: #{$i}px; }
-  .h-pt-#{$i} { padding-top: #{$i}px; }
-  .h-pr-#{$i} { padding-right: #{$i}px; }
-  .h-pb-#{$i} { padding-bottom: #{$i}px; }
-  .h-pl-#{$i} { padding-left: #{$i}px; }
-
-  .h-mlr-#{$i} { margin-left: #{$i}px; margin-right: #{$i}px; }
-  .h-mtb-#{$i} { margin-top: #{$i}px; margin-bottom: #{$i}px; }
-  .h-mt-#{$i} { margin-top: #{$i}px; }
-  .h-mr-#{$i} { margin-right: #{$i}px; }
-  .h-mb-#{$i} { margin-bottom: #{$i}px; }
-  .h-ml-#{$i} { margin-left: #{$i}px; }
-}
-
- /* ==================
-          圆角
- ==================== */
-@for $i from 1 through 100 {
-  .h-radius-#{$i} {
-    border-radius: #{$i}px;
-  }
-}
-.h-round {
-  border-radius: 50%;
-}
-
- /* ==================
-          定位
- ==================== */
-.h-relative {
-  position: relative;
-}
-.h-absolute {
-  position: absolute;
-}
-.h-fixed {
-  position: fixed;
-}
-
-
- /* ==================
-          其它
- ==================== */
-.h-overflow {
-  overflow: hidden;
-}
-.h-scroll {
-  overflow: scroll;
-}
-
-.h-full {
-  width: 100%;
-  height: 100%;
-}
-.h-full-w {
-  width: 100%;
-}
-.h-full-h {
-  height: 100%;
-}
-
-.h-cursor {
-  cursor: pointer;
-}
-.h-cursor-pointer {
-  cursor: pointer;
-}
-
-.h-t-primary {
-  color: $--color-primary;
-}
-.h-t-primary2 {
-  color: #67C23A;
-}

package/es/utils/validate.js

@@ -1,8 +0,0 @@
-/**
- * 判断是否为外部链接
- * @param {string} path
- * @returns {Boolean}
- */
-export function isExternal(path) {
-  return /^(https?:|mailto:|tel:|www\.)/.test(path);
-}