vuv-ui 1.0.6 → 1.0.8

package/package.json

@@ -1,13 +1,15 @@
 {
   "name": "vuv-ui",
   "private": false,
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "基于UVUI 组件再次封装",
   "type": "module",
   "author": "lsq",
   "files": [
     "vuv-ui",
-    "vuv-ui/**"
+    "vuv-ui/**",
+    "src",
+    "src/**"
   ],
   "scripts": {
     "dev": "vite",
@@ -19,30 +21,34 @@
   },
   "exports": {
     ".": {
-      "import": "./vuv-ui/vuv-ui.es.js",
+      "import": "./src/components/index.ts",
       "require": "./vuv-ui/vuv-ui.umd.js",
       "types": "./vuv-ui/src/components/index.d.ts"
     },
     "./style.css": "./vuv-ui/style.css"
   },
   "peerDependencies": {
-    "vue": ">=3.2.0",
     "element-plus": ">=2.2.0",
-    "uv-ui": ">=1.0.0"
+    "uv-ui": ">=1.0.0",
+    "vue": ">=3.2.0"
   },
   "devDependencies": {
     "@tsconfig/node24": "^24.0.4",
     "@types/node": "^24.12.2",
-    "@vitejs/plugin-vue": "^6.0.6",
+    "@vitejs/plugin-vue": "4.0.0",
+    "@vue/compiler-sfc": "3.2.45",
     "@vue/tsconfig": "^0.9.1",
     "npm-run-all2": "^8.0.4",
     "prettier": "3.8.3",
+    "sass": "^1.100.0",
     "sass-embedded": "^1.100.0",
     "typescript": "~6.0.0",
-    "vite": "^8.0.8",
-    "vite-plugin-dts": "^5.0.2",
+    "unplugin-vue-setup-extend-plus": "^1.0.1",
+    "vite": "^4.0.0",
+    "vite-plugin-dts": "^3.0.0",
     "vite-plugin-vue-devtools": "^8.1.1",
-    "vue-tsc": "^3.2.6"
+    "vue": "3.2.45",
+    "vue-tsc": "^1.0.0"
   },
   "main": "./vuv-ui/vuv-ui.umd.js",
   "module": "./vuv-ui/vuv-ui.es.js",

package/src/App.vue

@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <h1>You did it!</h1>
+    <p>
+      Visit
+      <a href="https://vuejs.org/" target="_blank" rel="noopener">vuejs.org</a>
+      to read the documentation
+    </p>
+    <uv-button>默认按钮</uv-button>
+    <el-switch v-model="hairline"></el-switch>
+
+    <Data></Data>
+  </div>
+</template>
+<script setup lang="ts">
+import uvButton from './components/button/View.vue';
+import Data from './components/button/Data.vue';
+// import { uvButton } from 'uv-ui';
+import { ref } from 'vue';
+const hairline = ref(true);
+</script>
+
+<style scoped></style>

package/src/components/button/Data.vue

@@ -0,0 +1,205 @@
+<template>
+  <div class="banner-content" v-if="isShow">
+    <el-form label-width="100px">
+      <el-form-item label="显示边框">
+        <el-switch v-model="options.hairline"></el-switch>
+      </el-form-item>
+      <el-form-item label="宽度">
+        <el-input-number v-model="options.width"></el-input-number>
+      </el-form-item>
+      <el-form-item label="高度">
+        <el-input-number v-model="options.height"></el-input-number>
+      </el-form-item>
+      <el-form-item label="主题颜色">
+        <el-select v-model="options.type" placeholder="请选择" style="width: 180px">
+          <el-option label="primary" value="primary" />
+          <el-option label="success" value="success" />
+          <el-option label="info" value="info" />
+          <el-option label="warning" value="warning" />
+          <el-option label="error" value="error" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="大小">
+        <el-radio-group v-model="options.size">
+          <el-radio-button label="normal">normal</el-radio-button>
+          <el-radio-button label="medium">medium</el-radio-button>
+          <el-radio-button label="mini">mini</el-radio-button>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="按钮位置">
+        <el-radio-group v-model="options.position">
+          <el-radio-button label="left">居左</el-radio-button>
+          <el-radio-button label="center">居中</el-radio-button>
+          <el-radio-button label="right">居右</el-radio-button>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="形状">
+        <el-radio-group v-model="options.shape">
+          <el-radio-button label="square">square</el-radio-button>
+          <el-radio-button label="circle">circle</el-radio-button>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="镂空">
+        <el-switch v-model="options.plain"></el-switch>
+      </el-form-item>
+      <el-form-item label="禁用">
+        <el-switch v-model="options.disabled"></el-switch>
+      </el-form-item>
+      <el-form-item label="铺满">
+        <el-switch v-model="options.fill"></el-switch>
+      </el-form-item>
+      <el-form-item label="loading图标">
+        <el-switch v-model="options.loading"></el-switch>
+      </el-form-item>
+      <el-form-item label="加载中文字">
+        <el-input v-model="options.loadingText" style="width: 180px" placeholder="请输入" clearable />
+      </el-form-item>
+
+      <el-form-item label="开放能力">
+        <el-select v-model="options.openType" placeholder="请选择" style="width: 180px" clearable>
+          <el-option label="跳转页面" value="navigateTo" />
+          <el-option label="获取用户信息" value="getUserInfo" />
+          <el-option label="联系客服" value="contact" />
+          <el-option label="获取手机号" value="getPhoneNumber" />
+          <el-option label="打开授权设置" value="openSetting" />
+          <el-option label="获取用户头像" value="chooseAvatar" />
+          <el-option label="意见反馈" value="feedback" />
+          <el-option label="分享" value="share" />
+          <el-option label="自定义" value="customize" />
+        </el-select>
+      </el-form-item>
+
+      <!-- 页面路径 -->
+      <el-form-item label="页面路径" v-if="options.openType == 'navigateTo'">
+        <el-input v-model="options.pagePath" style="width: 180px" placeholder="请输入" clearable />
+      </el-form-item>
+      <!-- 是否tabbar页面 -->
+      <el-form-item label="tabbar页面" v-if="options.openType == 'navigateTo'">
+        <el-switch v-model="options.isTabBar"></el-switch>
+      </el-form-item>
+
+      <el-form-item label="按钮文字">
+        <el-input v-model="options.text" style="width: 180px" placeholder="请输入" clearable />
+      </el-form-item>
+      <!-- <el-form-item label="按钮图标">
+        <el-input v-model="options.icon" style="width: 180px" placeholder="请输入" clearable />
+      </el-form-item> -->
+      <el-form-item label="按钮颜色">
+        <el-color-picker v-model="options.color" show-alpha />
+      </el-form-item>
+      <el-form-item label="文字颜色">
+        <el-color-picker v-model="options.textColor" show-alpha />
+      </el-form-item>
+      <el-form-item label="自定义样式">
+        <el-input v-model="options.customStyle" style="width: 240px" placeholder="分号分隔，如width: 100px;height: 50px;" type="textarea" clearable />
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script setup lang="ts" name="ButtonData">
+import { ref, onMounted } from 'vue';
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => {}
+  }
+});
+
+const options = ref();
+const data = ref();
+const isShow = ref(false);
+
+onMounted(() => {
+  console.log(props.data, props, '参数接收');
+  if (props.data) {
+    data.value = props.data.data;
+    options.value = props.data.options;
+    isShow.value = true;
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.banner-content {
+  overflow-x: auto;
+}
+.item-list {
+  display: flex;
+  justify-content: space-between;
+  margin: 10px;
+  border: 1px solid #c8c8c8;
+  border-radius: 4px;
+  padding: 5px;
+
+  .l-info {
+    font-size: 12px;
+    padding-top: 4px;
+    width: calc(100% - 100px);
+
+    p {
+      margin: 5px 0 0;
+      white-space: nowrap;
+      overflow: hidden;
+      display: flex;
+
+      .link {
+        color: #1b8bff;
+        cursor: pointer;
+      }
+
+      .text {
+        white-space: nowrap;
+        text-align: -webkit-auto;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+    }
+  }
+
+  .r-image {
+    text-align: right;
+
+    .el-icon-close {
+      color: #999;
+      font-size: 12px;
+      font-weight: 600;
+      margin-bottom: 6px;
+      cursor: pointer;
+
+      &:hover {
+        color: red;
+      }
+    }
+
+    .image-box {
+      width: 100px;
+      height: 70px;
+      border-radius: 5px;
+      overflow: hidden;
+      position: relative;
+      background: #fff;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      img {
+        max-width: 100%;
+      }
+
+      .placeholder-text {
+        color: #999;
+        font-size: 12px;
+      }
+    }
+  }
+}
+
+.mt-5px {
+  margin-top: 5px;
+}
+
+.mt-10px {
+  margin-top: 10px;
+}
+</style>

package/src/components/button/View.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="button_box" v-if="data && data.options" :class="{ plain: data.options.plain }" :style="{ 'justify-content': data.options.position }">
+    <uv-button
+      :type="data.options.type || 'primary'"
+      :bgColor="data.options.color"
+      :disabled="data.options.disabled"
+      :color="data.options.textColor"
+      :round="data.options.shape == 'circle' ? true : false"
+      :square="data.options.shape == 'square' ? true : false"
+      :size="data.options.size"
+      :loading="data.options.loading"
+      :icon="data.options.icon"
+      :style="{
+        width: data.options.width + 'px',
+        height: data.options.height + 'px'
+      }"
+    >
+      {{ data.options.text || '按钮' }}
+    </uv-button>
+  </div>
+</template>
+
+<script setup lang="ts" name="ButtonView">
+import { uvButton } from 'uv-ui';
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => {}
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+// 提取data.options.customStyle 样式
+
+.button_box {
+  display: flex;
+  align-items: center;
+  margin-top: 10px;
+}
+
+.button_box:deep(.uv-button) {
+  width: 100%;
+  height: 100%;
+}
+
+.plain:deep(.uv-button) {
+  background-color: transparent !important;
+}
+</style>

package/src/components/button/index.ts

@@ -0,0 +1,41 @@
+import ButtonView from './View.vue';
+import ButtonData from './Data.vue';
+
+const buttonTypeList = {
+  type: 'uvui-button',
+  name: '按钮',
+  icon: 'Postcard',
+  fontIcon: 'icon-shangpinanniu_changtiaoanniu',
+  page: 'index,activity',
+  viewCom: ButtonView,
+  editCom: ButtonData,
+  limit: 0
+};
+
+const buttonOptions = {
+  data: {},
+  options: {
+    width: '100', //宽度
+    height: '45', //高度
+    hairline: true, //是否显示边框
+    type: 'primary', //主题颜色
+    size: 'normal', //大小
+    shape: 'square', //形状
+    position: 'left', //按钮位置
+    plain: false, //镂空
+    disabled: false, //禁用
+    loading: false, //loading图标
+    loadingText: '', //加载中文字
+    openType: 'navigateTo', //开放能力
+    pagePath: '', //页面路径
+    isTabBar: false, //是否tabbar页面
+    text: '', //按钮文字
+    textColor: '#ffffff', //按钮文字颜色
+    icon: '', //按钮图标
+    color: '', //按钮颜色
+    customStyle: '', //自定义样式
+    fill: true //组件是否铺满父容器
+  }
+};
+
+export { buttonTypeList, buttonOptions };

package/src/components/collapse/Data.vue

@@ -0,0 +1,169 @@
+<template>
+  <div class="banner-content" v-if="isShow">
+    <el-form label-width="100px">
+      <el-form-item label="是否铺满">
+        <el-switch v-model="options.fill"></el-switch>
+      </el-form-item>
+    </el-form>
+
+    <el-button type="primary" @click="addItem" class="mt-10px">添加项</el-button>
+    <div class="item-list" v-for="(item, index) in data.list" :key="index">
+      <div class="l-info">
+        <div class="mt-5px">
+          <span>标题：</span>
+          <el-input v-model="item.title" style="width: 180px" placeholder="请输入" clearable />
+        </div>
+        <div class="mt-5px">
+          <span>内容：</span>
+          <el-input v-model="item.value" style="width: 180px" placeholder="请输入" clearable />
+        </div>
+        <div class="mt-5px">
+          <span>描述：</span>
+          <el-input v-model="item.label" style="width: 180px" placeholder="请输入" clearable />
+        </div>
+        <div class="mt-5px">
+          <span>禁用：</span>
+          <el-switch v-model="item.disabled"></el-switch>
+        </div>
+        <div class="mt-5px">
+          <span>右箭头：</span>
+          <el-switch v-model="item.isLink"></el-switch>
+        </div>
+        <div class="mt-5px">
+          <span>点击反馈：</span>
+          <el-switch v-model="item.clickable"></el-switch>
+        </div>
+        <div class="mt-5px">
+          <span>显示内边框：</span>
+          <el-switch v-model="item.border"></el-switch>
+        </div>
+        <div class="mt-5px">
+          <el-button type="danger" @click="removeItem(index)" size="small">删除</el-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="CollapseData">
+import { ref, onMounted } from 'vue';
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => {}
+  }
+});
+
+const options = ref();
+const data = ref();
+const isShow = ref(false);
+
+const removeItem = (index: number | string) => {
+  data.value.list.splice(index, 1);
+};
+
+const addItem = () => {
+  data.value.list.push({
+    title: '面板标题', //	面板标题
+    value: '右侧内容', //标题右侧内容
+    label: '', //标题下方的描述信息
+    disabled: false, //是否禁止面板的展开和收起
+    isLink: true, //是否展示右侧箭头并开启点击反馈
+    clickable: true, //是否开启点击反馈
+    border: true //是否显示内边框
+  });
+};
+
+onMounted(() => {
+  if (props.data) {
+    data.value = props.data.data;
+    options.value = props.data.options;
+    isShow.value = true;
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.banner-content {
+  overflow-x: auto;
+}
+.item-list {
+  display: flex;
+  justify-content: space-between;
+  margin: 10px;
+  border: 1px solid #c8c8c8;
+  border-radius: 4px;
+  padding: 5px;
+
+  .l-info {
+    font-size: 12px;
+    padding-top: 4px;
+    width: calc(100% - 100px);
+
+    p {
+      margin: 5px 0 0;
+      white-space: nowrap;
+      overflow: hidden;
+      display: flex;
+
+      .link {
+        color: #1b8bff;
+        cursor: pointer;
+      }
+
+      .text {
+        white-space: nowrap;
+        text-align: -webkit-auto;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+    }
+  }
+
+  .r-image {
+    text-align: right;
+
+    .el-icon-close {
+      color: #999;
+      font-size: 12px;
+      font-weight: 600;
+      margin-bottom: 6px;
+      cursor: pointer;
+
+      &:hover {
+        color: red;
+      }
+    }
+
+    .image-box {
+      width: 100px;
+      height: 70px;
+      border-radius: 5px;
+      overflow: hidden;
+      position: relative;
+      background: #fff;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      img {
+        max-width: 100%;
+      }
+
+      .placeholder-text {
+        color: #999;
+        font-size: 12px;
+      }
+    }
+  }
+}
+
+.mt-5px {
+  margin-top: 5px;
+}
+
+.mt-10px {
+  margin-top: 10px;
+}
+</style>

package/src/components/collapse/View.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="cell_box" v-if="data && data.options">
+    <uv-collapse v-model="list">
+      <uv-collapse-item v-for="(item, index) in collapseList" :key="index" :name="item.title + '_' + index">
+        <template #title>{{ item.title }}</template>
+        <template #right>{{ item.value }}</template>
+        {{ item.label }}
+      </uv-collapse-item>
+    </uv-collapse>
+  </div>
+</template>
+
+<script setup lang="ts" name="CollapseView">
+import { ref, computed } from 'vue';
+import { uvCollapse, uvCollapseItem } from 'uv-ui';
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => {}
+  }
+});
+
+const list = ref([]);
+
+const collapseList = computed(() => {
+  if (props.data.data && props.data.data.list) {
+    list.value = props.data.data.list.map((item: any, index: number) => item.title + '_' + index);
+    return props.data.data.list;
+  }
+  return [];
+});
+</script>
+
+<style lang="scss" scoped>
+.cell_box {
+}
+</style>

package/src/components/collapse/index.ts

@@ -0,0 +1,34 @@
+import CollapseView from './View.vue';
+import CollapseData from './Data.vue';
+
+const collapseTypeList = {
+  type: 'uvui-collapse',
+  name: '折叠面板',
+  icon: 'Postcard',
+  fontIcon: 'icon-danyuange1',
+  page: 'index,activity',
+  viewCom: CollapseView,
+  editCom: CollapseData,
+  limit: 0
+};
+
+const collapseOptions = {
+  data: {
+    list: [
+      {
+        title: '面板标题', //	面板标题
+        value: '右侧内容', //标题右侧内容
+        label: '', //标题下方的描述信息
+        disabled: false, //是否禁止面板的展开和收起
+        isLink: true, //是否展示右侧箭头并开启点击反馈
+        clickable: true, //是否开启点击反馈
+        border: true //是否显示内边框
+      }
+    ]
+  },
+  options: {
+    fill: false //组件是否铺满父容器
+  }
+};
+
+export { collapseTypeList, collapseOptions };

package/src/components/index.ts

@@ -0,0 +1,14 @@
+import { buttonTypeList, buttonOptions } from './button/index';
+import { textareaTypeList, textareaOptions } from './textarea/index';
+import { numberBoxTypeList, numberBoxOptions } from './numberBxo/index';
+import { collapseTypeList, collapseOptions } from './collapse/index';
+
+export const uvUiList = { buttonTypeList, textareaTypeList, numberBoxTypeList, collapseTypeList };
+export const uvUIOptions = { buttonOptions, textareaOptions, numberBoxOptions, collapseOptions };
+
+const hsryvvuUI = {
+  uvUiList,
+  uvUIOptions
+};
+
+export default hsryvvuUI;