vuv-ui 1.0.6 → 1.0.8

package/src/components/numberBxo/Data.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="banner-content" v-if="isShow">
+    <el-form label-width="120px">
+      <el-form-item label="当前值">
+        <el-input-number v-model="options.value" :min="options.min" :max="options.max" :step="options.step" />
+      </el-form-item>
+
+      <el-form-item label="最小值">
+        <el-input-number v-model="options.min" />
+      </el-form-item>
+      <el-form-item label="最大值">
+        <el-input-number v-model="options.max" />
+      </el-form-item>
+      <el-form-item label="步长">
+        <el-input-number v-model="options.step" :min="0" :precision="2" />
+      </el-form-item>
+      <el-form-item label="只能正整数">
+        <el-switch v-model="options.integer"></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.disabledInput"></el-switch>
+      </el-form-item>
+      <el-form-item label="输入框宽度(px)">
+        <el-input-number v-model="options.inputWidth" :min="20" :max="200" />
+      </el-form-item>
+      <el-form-item label="显示减少按钮">
+        <el-switch v-model="options.showMinus"></el-switch>
+      </el-form-item>
+      <el-form-item label="显示增加按钮">
+        <el-switch v-model="options.showPlus"></el-switch>
+      </el-form-item>
+      <el-form-item label="小数位数">
+        <el-input-number v-model="options.decimalLength" :min="0" :max="10" />
+      </el-form-item>
+      <el-form-item label="允许长按">
+        <el-switch v-model="options.longPress"></el-switch>
+      </el-form-item>
+      <el-form-item label="文字颜色">
+        <el-color-picker v-model="options.color" show-alpha />
+      </el-form-item>
+      <el-form-item label="按钮大小(px)">
+        <el-input-number v-model="options.buttonSize" :min="20" :max="100" />
+      </el-form-item>
+      <el-form-item label="背景颜色">
+        <el-color-picker v-model="options.bgColor" show-alpha />
+      </el-form-item>
+      <el-form-item label="禁用增加按钮">
+        <el-switch v-model="options.disablePlus"></el-switch>
+      </el-form-item>
+      <el-form-item label="禁用减少按钮">
+        <el-switch v-model="options.disableMinus"></el-switch>
+      </el-form-item>
+      <el-form-item label="对齐方式">
+        <el-radio-group v-model="options.align">
+          <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-switch v-model="options.fill"></el-switch>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script setup lang="ts" name="NumberBoxData">
+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;
+}
+</style>

package/src/components/numberBxo/View.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="number-box-wrapper" v-if="data && data.options" :style="{ 'justify-content': data.options.align }">
+    <uv-stepper
+      :min="data.options.min"
+      v-model="setpperValue"
+      :max="data.options.max"
+      :integer="data.options.integer"
+      :disabled="true"
+      :inputWidth="data.options.inputWidth + 'px'"
+      :step="data.options.step"
+    />
+  </div>
+</template>
+
+<script setup lang="ts" name="NumberBoxView">
+import { ref, watch } from 'vue';
+import { uvStepper } from 'uv-ui';
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => {}
+  }
+});
+const setpperValue = ref(1);
+watch(
+  () => props.data.options,
+  (val) => {
+    setpperValue.value = val;
+  }
+);
+</script>
+
+<style lang="scss" scoped>
+.number-box-wrapper {
+  background-color: #ffffff;
+  display: flex;
+  align-items: center;
+  padding: 10px;
+}
+</style>

package/src/components/numberBxo/index.ts

@@ -0,0 +1,40 @@
+import NumberBoxView from './View.vue';
+import NumberBoxData from './Data.vue';
+
+const numberBoxTypeList = {
+  type: 'uvui-numberBox',
+  name: '步进器',
+  icon: 'Postcard',
+  fontIcon: 'icon-shangpinanniu_changtiaoanniu',
+  page: 'index,activity',
+  viewCom: NumberBoxView,
+  editCom: NumberBoxData,
+  limit: 0
+};
+
+const numberBoxOptions = {
+  data: {},
+  options: {
+    value: 1, // 用于双向绑定的值
+    min: 1, // 最小值
+    max: Number.MAX_SAFE_INTEGER, // 最大值
+    step: 1, // 步长
+    integer: false, // 是否只能输入正整数
+    disabled: false, // 是否禁用操作
+    disabledInput: false, // 是否禁止输入框
+    inputWidth: 35, // 输入框宽度
+    showMinus: true, // 是否显示减少按钮
+    showPlus: true, // 是否显示增加按钮
+    decimalLength: 0, // 显示的小数位数
+    longPress: true, // 是否允许长按进行加减
+    color: '#323233', // 输入框文字和加减按钮图标的颜色
+    buttonSize: 30, // 按钮大小
+    bgColor: '#EBECEE', // 输入框和按钮的背景颜色
+    disablePlus: false, // 是否禁用增加按钮
+    disableMinus: false, // 是否禁用减少按钮
+    align: 'left', // 对齐方式
+    fill: false //是否铺满
+  }
+};
+
+export { numberBoxTypeList, numberBoxOptions };

package/src/components/textarea/Data.vue

@@ -0,0 +1,148 @@
+<template>
+  <div class="banner-content" v-if="isShow">
+    <el-form label-width="100px">
+      <el-form-item label="空值占位内容">
+        <el-input v-model="options.placeholder"></el-input>
+      </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-input v-model="options.confirmType"></el-input>
+      </el-form-item>
+      <el-form-item label="显示字数统计">
+        <el-switch v-model="options.count"></el-switch>
+      </el-form-item>
+      <el-form-item label="自动增高">
+        <el-switch v-model="options.autoHeight"></el-switch>
+      </el-form-item>
+      <el-form-item label="显示完成按钮">
+        <el-switch v-model="options.showConfirmBar"></el-switch>
+      </el-form-item>
+      <el-form-item label="输入长度">
+        <el-input-number v-model="options.maxlength"></el-input-number>
+      </el-form-item>
+      <el-form-item label="是否铺满">
+        <el-switch v-model="options.fill"></el-switch>
+      </el-form-item>
+      <el-form-item label="边框">
+        <el-radio-group v-model="options.size">
+          <el-radio-button label="surround">四周边框</el-radio-button>
+          <el-radio-button label="none">无边框</el-radio-button>
+          <el-radio-button label="bottom">底部边框</el-radio-button>
+        </el-radio-group>
+      </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="TextareaData">
+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/textarea/View.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="textarea_box" v-if="data && data.options">
+    <el-input
+      v-model="textarea"
+      :placeholder="data.options.placeholder || '请输入'"
+      :style="{ width: '100%', height: data.options.height }"
+      :show-word-limit="data.options.count"
+      :autosize="data.options.autoHeight"
+      :maxlength="data.options.maxlength"
+      :rows="2"
+      type="textarea"
+    />
+  </div>
+</template>
+
+<script setup lang="ts" name="TextareaView">
+import { ref, watch } from 'vue';
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => {}
+  }
+});
+const textarea = ref('');
+</script>
+
+<style lang="scss" scoped>
+// 提取data.options.customStyle 样式
+
+.textarea_box {
+  display: flex;
+  align-items: center;
+  margin-top: 10px;
+}
+</style>

package/src/components/textarea/index.ts

@@ -0,0 +1,31 @@
+import TextareaView from './View.vue';
+import TextareaData from './Data.vue';
+
+const textareaTypeList = {
+  type: 'uvui-textarea',
+  name: '文本域',
+  icon: 'Textarea',
+  fontIcon: 'icon-24gl-grid',
+  page: 'index,activity',
+  viewCom: TextareaView,
+  editCom: TextareaData,
+  limit: 0
+};
+const textareaOptions = {
+  type: 'uvui-textarea',
+  data: {},
+  options: {
+    placeholder: '请输入', //空值占位内容
+    height: '70', //高度
+    confirmType: 'done', //右下角按钮文字
+    count: false, //是否显示字数统计
+    autoHeight: false, //是否自动增高
+    showConfirmBar: false, //是否显示”完成“按钮那一栏
+    maxlength: 140, //最大输入长度
+    border: 'surround', //边框，surround-四周边框，none-无边框，bottom-底部边框
+    customStyle: '', //自定义样式
+    fill: true //组件是否铺满父容器
+  }
+};
+
+export { textareaOptions, textareaTypeList };

package/src/main.ts

@@ -0,0 +1,7 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+import ElementPlus from 'element-plus';
+import 'element-plus/dist/index.css';
+import 'uv-ui/es/style.css';
+
+createApp(App).use(ElementPlus).mount('#app');

package/vuv-ui/src/components/button/Data.vue.d.ts

@@ -1,15 +1,14 @@
-declare const _default: typeof __VLS_export;
-export default _default;
-declare const __VLS_export: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+declare const _default: import('vue').DefineComponent<{
     data: {
         type: ObjectConstructor;
         default: () => void;
     };
-}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+}, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<{
     data: {
         type: ObjectConstructor;
         default: () => void;
     };
-}>> & Readonly<{}>, {
+}>>, {
     data: Record<string, any>;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+}>;
+export default _default;

package/vuv-ui/src/components/button/View.vue.d.ts

@@ -1,15 +1,14 @@
-declare const _default: typeof __VLS_export;
-export default _default;
-declare const __VLS_export: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+declare const _default: import('vue').DefineComponent<{
     data: {
         type: ObjectConstructor;
         default: () => void;
     };
-}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+}, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<{
     data: {
         type: ObjectConstructor;
         default: () => void;
     };
-}>> & Readonly<{}>, {
+}>>, {
     data: Record<string, any>;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+}>;
+export default _default;

package/vuv-ui/src/components/button/index.d.ts

@@ -4,32 +4,32 @@ declare const buttonTypeList: {
     icon: string;
     fontIcon: string;
     page: string;
-    viewCom: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    viewCom: import('vue').DefineComponent<{
         data: {
             type: ObjectConstructor;
             default: () => void;
         };
-    }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    }, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<{
         data: {
             type: ObjectConstructor;
             default: () => void;
         };
-    }>> & Readonly<{}>, {
+    }>>, {
         data: Record<string, any>;
-    }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-    editCom: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    }>;
+    editCom: import('vue').DefineComponent<{
         data: {
             type: ObjectConstructor;
             default: () => void;
         };
-    }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    }, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<{
         data: {
             type: ObjectConstructor;
             default: () => void;
         };
-    }>> & Readonly<{}>, {
+    }>>, {
         data: Record<string, any>;
-    }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+    }>;
     limit: number;
 };
 declare const buttonOptions: {

package/vuv-ui/src/components/collapse/Data.vue.d.ts

@@ -1,15 +1,14 @@
-declare const _default: typeof __VLS_export;
-export default _default;
-declare const __VLS_export: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+declare const _default: import('vue').DefineComponent<{
     data: {
         type: ObjectConstructor;
         default: () => void;
     };
-}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+}, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<{
     data: {
         type: ObjectConstructor;
         default: () => void;
     };
-}>> & Readonly<{}>, {
+}>>, {
     data: Record<string, any>;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+}>;
+export default _default;

package/vuv-ui/src/components/collapse/View.vue.d.ts

@@ -1,15 +1,14 @@
-declare const _default: typeof __VLS_export;
-export default _default;
-declare const __VLS_export: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+declare const _default: import('vue').DefineComponent<{
     data: {
         type: ObjectConstructor;
         default: () => void;
     };
-}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+}, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<{
     data: {
         type: ObjectConstructor;
         default: () => void;
     };
-}>> & Readonly<{}>, {
+}>>, {
     data: Record<string, any>;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+}>;
+export default _default;

package/vuv-ui/src/components/collapse/index.d.ts

@@ -4,32 +4,32 @@ declare const collapseTypeList: {
     icon: string;
     fontIcon: string;
     page: string;
-    viewCom: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    viewCom: import('vue').DefineComponent<{
         data: {
             type: ObjectConstructor;
             default: () => void;
         };
-    }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    }, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<{
         data: {
             type: ObjectConstructor;
             default: () => void;
         };
-    }>> & Readonly<{}>, {
+    }>>, {
         data: Record<string, any>;
-    }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-    editCom: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    }>;
+    editCom: import('vue').DefineComponent<{
         data: {
             type: ObjectConstructor;
             default: () => void;
         };
-    }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    }, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<{
         data: {
             type: ObjectConstructor;
             default: () => void;
         };
-    }>> & Readonly<{}>, {
+    }>>, {
         data: Record<string, any>;
-    }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+    }>;
     limit: number;
 };
 declare const collapseOptions: {