@vtj/materials 0.10.5 → 0.10.7

package/src/uni-ui/lib/uni-row/uni-row.vue

@@ -0,0 +1,193 @@
+<template>
+  <view
+    :class="['uni-row', typeClass, justifyClass, alignClass]"
+    :style="{
+      marginLeft: `${Number(marginValue)}rpx`,
+      marginRight: `${Number(marginValue)}rpx`
+    }">
+    <slot></slot>
+  </view>
+</template>
+
+<script>
+  const ComponentClass = 'uni-row';
+  const modifierSeparator = '--';
+  /**
+   * Row	布局-行
+   * @description	流式栅格系统，随着屏幕或视口分为 24 份，可以迅速简便地创建布局。
+   * @tutorial	https://ext.dcloud.net.cn/plugin?id=3958
+   *
+   * @property	{gutter} type = Number 栅格间隔
+   * @property	{justify} type = String flex 布局下的水平排列方式
+   * 						可选	start/end/center/space-around/space-between	start
+   * 						默认值	start
+   * @property	{align} type = String flex 布局下的垂直排列方式
+   * 						可选	top/middle/bottom
+   * 						默认值	top
+   * @property	{width} type = String|Number nvue下需要自行配置宽度用于计算
+   * 						默认值 750
+   */
+
+  export default {
+    name: 'uniRow',
+    componentName: 'uniRow',
+    // #ifdef MP-WEIXIN
+    // options: {
+    // 	virtualHost: true // 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现，可使用flex布局
+    // },
+    // #endif
+    props: {
+      type: String,
+      gutter: Number,
+      justify: {
+        type: String,
+        default: 'start'
+      },
+      align: {
+        type: String,
+        default: 'top'
+      },
+      // nvue如果使用span等属性，需要配置宽度
+      width: {
+        type: [String, Number],
+        default: 750
+      }
+    },
+    created() {
+      // #ifdef APP-NVUE
+      // this.type = 'flex';
+      // #endif
+    },
+    computed: {
+      marginValue() {
+        // #ifndef APP-NVUE
+        if (this.gutter) {
+          return -(this.gutter / 2);
+        }
+        // #endif
+        return 0;
+      },
+      typeClass() {
+        return this.type === 'flex'
+          ? `${ComponentClass + modifierSeparator}flex`
+          : '';
+      },
+      justifyClass() {
+        return this.justify !== 'start'
+          ? `${ComponentClass + modifierSeparator}flex-justify-${this.justify}`
+          : '';
+      },
+      alignClass() {
+        return this.align !== 'top'
+          ? `${ComponentClass + modifierSeparator}flex-align-${this.align}`
+          : '';
+      }
+    }
+  };
+</script>
+
+<style lang="scss">
+  $layout-namespace: '.uni-';
+  $row: $layout-namespace + 'row';
+  $modifier-separator: '--';
+
+  @mixin utils-clearfix {
+    $selector: &;
+
+    @at-root {
+      /* #ifndef APP-NVUE */
+      #{$selector}::before,
+      #{$selector}::after {
+        display: table;
+        content: '';
+      }
+
+      #{$selector}::after {
+        clear: both;
+      }
+
+      /* #endif */
+    }
+  }
+
+  @mixin utils-flex($direction: row) {
+    /* #ifndef APP-NVUE */
+    display: flex;
+    /* #endif */
+    flex-direction: $direction;
+  }
+
+  @mixin set-flex($state) {
+    @at-root &-#{$state} {
+      @content;
+    }
+  }
+
+  #{$row} {
+    position: relative;
+    flex-direction: row;
+
+    /* #ifdef APP-NVUE */
+    flex: 1;
+    /* #endif */
+
+    /* #ifndef APP-NVUE */
+    box-sizing: border-box;
+    /* #endif */
+
+    // 非nvue使用float布局
+    @include utils-clearfix;
+
+    // 在QQ、字节、百度小程序平台，编译后使用shadow dom，不可使用flex布局，使用float
+    @at-root {
+      /* #ifndef MP-QQ || MP-TOUTIAO || MP-BAIDU */
+      &#{$modifier-separator}flex {
+        @include utils-flex;
+        flex-wrap: wrap;
+        flex: 1;
+
+        &:before,
+        &:after {
+          /* #ifndef APP-NVUE */
+          display: none;
+          /* #endif */
+        }
+
+        @include set-flex(justify-center) {
+          justify-content: center;
+        }
+
+        @include set-flex(justify-end) {
+          justify-content: flex-end;
+        }
+
+        @include set-flex(justify-space-between) {
+          justify-content: space-between;
+        }
+
+        @include set-flex(justify-space-around) {
+          justify-content: space-around;
+        }
+
+        @include set-flex(align-middle) {
+          align-items: center;
+        }
+
+        @include set-flex(align-bottom) {
+          align-items: flex-end;
+        }
+      }
+
+      /* #endif */
+    }
+  }
+
+  // 字节、QQ配置后不生效
+  // 此处用法无法使用scoped
+  /* #ifdef MP-WEIXIN || MP-TOUTIAO || MP-QQ */
+  :host {
+    display: block;
+  }
+
+  /* #endif */
+</style>

package/src/uni-ui/lib/uni-search-bar/i18n/en.json

@@ -0,0 +1,4 @@
+{
+	"uni-search-bar.cancel": "cancel",
+	"uni-search-bar.placeholder": "Search enter content"
+}

package/src/uni-ui/lib/uni-search-bar/i18n/index.js

@@ -0,0 +1,8 @@
+import en from './en.json'
+import zhHans from './zh-Hans.json'
+import zhHant from './zh-Hant.json'
+export default {
+	en,
+	'zh-Hans': zhHans,
+	'zh-Hant': zhHant
+}

package/src/uni-ui/lib/uni-search-bar/i18n/zh-Hans.json

@@ -0,0 +1,4 @@
+{
+	"uni-search-bar.cancel": "取消",
+	"uni-search-bar.placeholder": "请输入搜索内容"
+}

package/src/uni-ui/lib/uni-search-bar/i18n/zh-Hant.json

@@ -0,0 +1,4 @@
+{
+	"uni-search-bar.cancel": "取消",
+	"uni-search-bar.placeholder": "請輸入搜索內容"
+}

package/src/uni-ui/lib/uni-search-bar/uni-search-bar.vue

@@ -0,0 +1,339 @@
+<template>
+  <view class="uni-searchbar">
+    <view
+      :style="{ borderRadius: radius + 'px', backgroundColor: bgColor }"
+      class="uni-searchbar__box"
+      @click="searchClick">
+      <view class="uni-searchbar__box-icon-search">
+        <slot name="searchIcon">
+          <uni-icons color="#c0c4cc" size="18" type="search" />
+        </slot>
+      </view>
+      <input
+        v-if="show || searchVal"
+        :focus="showSync"
+        :disabled="readonly"
+        :placeholder="placeholderText"
+        :maxlength="maxlength"
+        class="uni-searchbar__box-search-input"
+        confirm-type="search"
+        type="text"
+        v-model="searchVal"
+        :style="{ color: textColor }"
+        @confirm="confirm"
+        @blur="blur"
+        @focus="emitFocus" />
+      <text v-else class="uni-searchbar__text-placeholder">{{
+        placeholder
+      }}</text>
+      <view
+        v-if="
+          show &&
+          (clearButton === 'always' ||
+            (clearButton === 'auto' && searchVal !== '')) &&
+          !readonly
+        "
+        class="uni-searchbar__box-icon-clear"
+        @click="clear">
+        <slot name="clearIcon">
+          <uni-icons color="#c0c4cc" size="20" type="clear" />
+        </slot>
+      </view>
+    </view>
+    <text
+      @click="cancel"
+      class="uni-searchbar__cancel"
+      v-if="cancelButton === 'always' || (show && cancelButton === 'auto')"
+      >{{ cancelTextI18n }}</text
+    >
+  </view>
+</template>
+
+<script>
+  import { initVueI18n } from '@dcloudio/uni-i18n';
+  import messages from './i18n/index.js';
+  const { t } = initVueI18n(messages);
+
+  /**
+   * SearchBar 搜索栏
+   * @description 搜索栏组件，通常用于搜索商品、文章等
+   * @tutorial https://ext.dcloud.net.cn/plugin?id=866
+   * @property {Number} radius 搜索栏圆角
+   * @property {Number} maxlength 输入最大长度
+   * @property {String} placeholder 搜索栏Placeholder
+   * @property {String} clearButton = [always|auto|none] 是否显示清除按钮
+   * 	@value always 一直显示
+   * 	@value auto 输入框不为空时显示
+   * 	@value none 一直不显示
+   * @property {String} cancelButton = [always|auto|none] 是否显示取消按钮
+   * 	@value always 一直显示
+   * 	@value auto 输入框不为空时显示
+   * 	@value none 一直不显示
+   * @property {String} cancelText 取消按钮的文字
+   * @property {String} bgColor 输入框背景颜色
+   * @property {String} textColor 输入文字颜色
+   * @property {Boolean} focus 是否自动聚焦
+   * @property {Boolean} readonly 组件只读，不能有任何操作，只做展示
+   * @event {Function} confirm uniSearchBar 的输入框 confirm 事件，返回参数为uniSearchBar的value，e={value:Number}
+   * @event {Function} input uniSearchBar 的 value 改变时触发事件，返回参数为uniSearchBar的value，e=value
+   * @event {Function} cancel 点击取消按钮时触发事件，返回参数为uniSearchBar的value，e={value:Number}
+   * @event {Function} clear 点击清除按钮时触发事件，返回参数为uniSearchBar的value，e={value:Number}
+   * @event {Function} blur input失去焦点时触发事件，返回参数为uniSearchBar的value，e={value:Number}
+   */
+
+  export default {
+    name: 'UniSearchBar',
+    emits: [
+      'input',
+      'update:modelValue',
+      'clear',
+      'cancel',
+      'confirm',
+      'blur',
+      'focus'
+    ],
+    props: {
+      placeholder: {
+        type: String,
+        default: ''
+      },
+      radius: {
+        type: [Number, String],
+        default: 5
+      },
+      clearButton: {
+        type: String,
+        default: 'auto'
+      },
+      cancelButton: {
+        type: String,
+        default: 'auto'
+      },
+      cancelText: {
+        type: String,
+        default: ''
+      },
+      bgColor: {
+        type: String,
+        default: '#F8F8F8'
+      },
+      textColor: {
+        type: String,
+        default: '#000000'
+      },
+      maxlength: {
+        type: [Number, String],
+        default: 100
+      },
+      value: {
+        type: [Number, String],
+        default: ''
+      },
+      modelValue: {
+        type: [Number, String],
+        default: ''
+      },
+      focus: {
+        type: Boolean,
+        default: false
+      },
+      readonly: {
+        type: Boolean,
+        default: false
+      }
+    },
+    data() {
+      return {
+        show: false,
+        showSync: false,
+        searchVal: ''
+      };
+    },
+    computed: {
+      cancelTextI18n() {
+        return this.cancelText || t('uni-search-bar.cancel');
+      },
+      placeholderText() {
+        return this.placeholder || t('uni-search-bar.placeholder');
+      }
+    },
+    watch: {
+      // #ifndef VUE3
+      // value: {
+      //   immediate: true,
+      //   handler(newVal) {
+      //     this.searchVal = newVal;
+      //     if (newVal) {
+      //       this.show = true;
+      //     }
+      //   }
+      // },
+      // #endif
+      // #ifdef VUE3
+      modelValue: {
+        immediate: true,
+        handler(newVal) {
+          this.searchVal = newVal;
+          if (newVal) {
+            this.show = true;
+          }
+        }
+      },
+      // #endif
+      focus: {
+        immediate: true,
+        handler(newVal) {
+          if (newVal) {
+            if (this.readonly) return;
+            this.show = true;
+            this.$nextTick(() => {
+              this.showSync = true;
+            });
+          }
+        }
+      },
+      searchVal(newVal, oldVal) {
+        this.$emit('input', newVal);
+        // #ifdef VUE3
+        this.$emit('update:modelValue', newVal);
+        // #endif
+      }
+    },
+    methods: {
+      searchClick() {
+        if (this.readonly) return;
+        if (this.show) {
+          return;
+        }
+        this.show = true;
+        this.$nextTick(() => {
+          this.showSync = true;
+        });
+      },
+      clear() {
+        this.searchVal = '';
+        this.$nextTick(() => {
+          this.$emit('clear', { value: '' });
+        });
+      },
+      cancel() {
+        if (this.readonly) return;
+        this.$emit('cancel', {
+          value: this.searchVal
+        });
+        this.searchVal = '';
+        this.show = false;
+        this.showSync = false;
+        // #ifndef APP-PLUS
+        uni.hideKeyboard();
+        // #endif
+        // #ifdef APP-PLUS
+        // plus.key.hideSoftKeybord();
+        // #endif
+      },
+      confirm() {
+        // #ifndef APP-PLUS
+        uni.hideKeyboard();
+        // #endif
+        // #ifdef APP-PLUS
+        // plus.key.hideSoftKeybord();
+        // #endif
+        this.$emit('confirm', {
+          value: this.searchVal
+        });
+      },
+      blur() {
+        // #ifndef APP-PLUS
+        uni.hideKeyboard();
+        // #endif
+        // #ifdef APP-PLUS
+        // plus.key.hideSoftKeybord();
+        // #endif
+        this.$emit('blur', {
+          value: this.searchVal
+        });
+      },
+      emitFocus(e) {
+        this.$emit('focus', e.detail);
+      }
+    }
+  };
+</script>
+
+<style lang="scss">
+  $uni-searchbar-height: 36px;
+
+  .uni-searchbar {
+    /* #ifndef APP-NVUE */
+    display: flex;
+    /* #endif */
+    flex-direction: row;
+    position: relative;
+    padding: 10px;
+    // background-color: #fff;
+  }
+
+  .uni-searchbar__box {
+    /* #ifndef APP-NVUE */
+    display: flex;
+    box-sizing: border-box;
+    justify-content: left;
+    /* #endif */
+    overflow: hidden;
+    position: relative;
+    flex: 1;
+    flex-direction: row;
+    align-items: center;
+    height: $uni-searchbar-height;
+    padding: 5px 8px 5px 0px;
+  }
+
+  .uni-searchbar__box-icon-search {
+    /* #ifndef APP-NVUE */
+    display: flex;
+    /* #endif */
+    flex-direction: row;
+    // width: 32px;
+    padding: 0 8px;
+    justify-content: center;
+    align-items: center;
+    color: #b3b3b3;
+  }
+
+  .uni-searchbar__box-search-input {
+    flex: 1;
+    font-size: 14px;
+    color: #333;
+    margin-left: 5px;
+    margin-top: 1px;
+    /* #ifndef APP-NVUE */
+    background-color: inherit;
+    /* #endif */
+  }
+
+  .uni-searchbar__box-icon-clear {
+    align-items: center;
+    line-height: 24px;
+    padding-left: 8px;
+    /* #ifdef H5 */
+    cursor: pointer;
+    /* #endif */
+  }
+
+  .uni-searchbar__text-placeholder {
+    font-size: 14px;
+    color: #b3b3b3;
+    margin-left: 5px;
+    text-align: left;
+  }
+
+  .uni-searchbar__cancel {
+    padding-left: 10px;
+    line-height: $uni-searchbar-height;
+    font-size: 14px;
+    color: #333333;
+    /* #ifdef H5 */
+    cursor: pointer;
+    /* #endif */
+  }
+</style>