@tuya-miniapp/smart-ui 0.0.1-beta-1

package/lib/grid/index.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var component_1 = require("../common/component");
+var relation_1 = require("../common/relation");
+(0, component_1.VantComponent)({
+    relation: (0, relation_1.useChildren)('grid-item'),
+    props: {
+        square: {
+            type: Boolean,
+            observer: 'updateChildren',
+        },
+        gutter: {
+            type: null,
+            value: 0,
+            observer: 'updateChildren',
+        },
+        clickable: {
+            type: Boolean,
+            observer: 'updateChildren',
+        },
+        columnNum: {
+            type: Number,
+            value: 4,
+            observer: 'updateChildren',
+        },
+        center: {
+            type: Boolean,
+            value: true,
+            observer: 'updateChildren',
+        },
+        border: {
+            type: Boolean,
+            value: true,
+            observer: 'updateChildren',
+        },
+        direction: {
+            type: String,
+            observer: 'updateChildren',
+        },
+        iconSize: {
+            type: String,
+            observer: 'updateChildren',
+        },
+        reverse: {
+            type: Boolean,
+            value: false,
+            observer: 'updateChildren',
+        },
+    },
+    methods: {
+        updateChildren: function () {
+            this.children.forEach(function (child) {
+                child.updateStyle();
+            });
+        },
+    },
+});

package/lib/grid/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

package/lib/grid/index.wxml

@@ -0,0 +1,8 @@
+<wxs src="./index.wxs" module="computed" />
+
+<view
+  class="van-grid custom-class {{ border && !gutter ? 'van-hairline--top' : '' }}"
+  style="{{ computed.rootStyle({ gutter }) }}"
+>
+  <slot />
+</view>

package/lib/grid/index.wxs

@@ -0,0 +1,13 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+
+function rootStyle(data) {
+  return style({
+    'padding-left': addUnit(data.gutter),
+  });
+}
+
+module.exports = {
+  rootStyle: rootStyle,
+};

package/lib/grid/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';.van-grid{box-sizing:border-box;overflow:hidden;position:relative}

package/lib/grid-item/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';.van-grid-item{box-sizing:border-box;float:left;position:relative}.van-grid-item--square{height:0}.van-grid-item__content{background-color:var(--grid-item-content-background-color,var(--app-B3,#fff));box-sizing:border-box;display:flex;flex-direction:column;height:100%;padding:var(--grid-item-content-padding,16px 8px)}.van-grid-item__content:after{border-width:0 1px 1px 0;z-index:1}.van-grid-item__content--surround:after{border-width:1px}.van-grid-item__content--center{align-items:center;justify-content:center}.van-grid-item__content--square{left:0;position:absolute;right:0;top:0}.van-grid-item__content--horizontal{flex-direction:row}.van-grid-item__content--horizontal .van-grid-item__text{margin:0 0 0 8px}.van-grid-item__content--reverse{flex-direction:column-reverse}.van-grid-item__content--reverse .van-grid-item__text{margin:0 0 8px}.van-grid-item__content--horizontal.van-grid-item__content--reverse{flex-direction:row-reverse}.van-grid-item__content--horizontal.van-grid-item__content--reverse .van-grid-item__text{margin:0 8px 0 0}.van-grid-item__content--clickable:active{background-color:var(--grid-item-content-active-color,#f2f3f5)}.van-grid-item__icon{align-items:center;display:flex;font-size:var(--grid-item-icon-size,26px);height:var(--grid-item-icon-size,26px)}.van-grid-item__text{word-wrap:break-word;color:var(--grid-item-text-color,var(--app-B6-N2,rgba(0,0,0,.7)));font-size:var(--grid-item-text-font-size,12px)}.van-grid-item__icon+.van-grid-item__text{margin-top:8px}

package/lib/grid-item/index.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/grid-item/index.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var component_1 = require("../common/component");
+var relation_1 = require("../common/relation");
+var link_1 = require("../mixins/link");
+(0, component_1.VantComponent)({
+    relation: (0, relation_1.useParent)('grid'),
+    classes: ['content-class', 'icon-class', 'text-class'],
+    mixins: [link_1.link],
+    props: {
+        icon: String,
+        iconColor: String,
+        iconPrefix: {
+            type: String,
+            value: 'van-icon',
+        },
+        dot: Boolean,
+        info: null,
+        badge: null,
+        text: String,
+        useSlot: Boolean,
+    },
+    data: {
+        viewStyle: '',
+    },
+    mounted: function () {
+        this.updateStyle();
+    },
+    methods: {
+        updateStyle: function () {
+            if (!this.parent) {
+                return;
+            }
+            var _a = this.parent, data = _a.data, children = _a.children;
+            var columnNum = data.columnNum, border = data.border, square = data.square, gutter = data.gutter, clickable = data.clickable, center = data.center, direction = data.direction, reverse = data.reverse, iconSize = data.iconSize;
+            this.setData({
+                center: center,
+                border: border,
+                square: square,
+                gutter: gutter,
+                clickable: clickable,
+                direction: direction,
+                reverse: reverse,
+                iconSize: iconSize,
+                index: children.indexOf(this),
+                columnNum: columnNum,
+            });
+        },
+        onClick: function () {
+            this.$emit('click');
+            this.jumpLink();
+        },
+    },
+});

package/lib/grid-item/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-icon": "../icon/index"
+  }
+}

package/lib/grid-item/index.wxml

@@ -0,0 +1,27 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
+
+<view
+  class="custom-class {{ utils.bem('grid-item', { square }) }}"
+  style="{{ computed.wrapperStyle({ square, gutter, columnNum, index }) }}"
+  bindtap="onClick"
+>
+  <view
+    class="content-class {{ utils.bem('grid-item__content', [direction, { center, square, reverse, clickable, surround: border && gutter }]) }} {{ border ? 'van-hairline--surround' : '' }}"
+    style="{{ computed.contentStyle({ square, gutter }) }}"
+  >
+    <block wx:if="{{ useSlot }}">
+      <slot />
+    </block>
+    <block wx:else>
+      <view class="van-grid-item__icon icon-class">
+        <van-icon wx:if="{{ icon }}" name="{{ icon }}" color="{{ iconColor }}" class-prefix="{{ iconPrefix }}" dot="{{ dot }}" info="{{ badge || info }}" size="{{ iconSize }}" />
+        <slot wx:else name="icon"></slot>
+      </view>
+      <view class="van-grid-item__text text-class">
+        <text wx:if="{{ text }}">{{ text }}</text>
+        <slot wx:else name="text"></slot>
+      </view>
+    </block>
+  </view>
+</view>

package/lib/grid-item/index.wxs

@@ -0,0 +1,32 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+
+function wrapperStyle(data) {
+  var width = 100 / data.columnNum + '%';
+
+  return style({
+    width: width,
+    'padding-top': data.square ? width : null,
+    'padding-right': addUnit(data.gutter),
+    'margin-top':
+      data.index >= data.columnNum && !data.square
+        ? addUnit(data.gutter)
+        : null,
+  });
+}
+
+function contentStyle(data) {
+  return data.square
+    ? style({
+        right: addUnit(data.gutter),
+        bottom: addUnit(data.gutter),
+        height: 'auto',
+      })
+    : '';
+}
+
+module.exports = {
+  wrapperStyle: wrapperStyle,
+  contentStyle: contentStyle,
+};

package/lib/grid-item/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';.van-grid-item{box-sizing:border-box;float:left;position:relative}.van-grid-item--square{height:0}.van-grid-item__content{background-color:var(--grid-item-content-background-color,var(--app-B3,#fff));box-sizing:border-box;display:flex;flex-direction:column;height:100%;padding:var(--grid-item-content-padding,16px 8px)}.van-grid-item__content:after{border-width:0 1px 1px 0;z-index:1}.van-grid-item__content--surround:after{border-width:1px}.van-grid-item__content--center{align-items:center;justify-content:center}.van-grid-item__content--square{left:0;position:absolute;right:0;top:0}.van-grid-item__content--horizontal{flex-direction:row}.van-grid-item__content--horizontal .van-grid-item__text{margin:0 0 0 8px}.van-grid-item__content--reverse{flex-direction:column-reverse}.van-grid-item__content--reverse .van-grid-item__text{margin:0 0 8px}.van-grid-item__content--horizontal.van-grid-item__content--reverse{flex-direction:row-reverse}.van-grid-item__content--horizontal.van-grid-item__content--reverse .van-grid-item__text{margin:0 8px 0 0}.van-grid-item__content--clickable:active{background-color:var(--grid-item-content-active-color,#f2f3f5)}.van-grid-item__icon{align-items:center;display:flex;font-size:var(--grid-item-icon-size,26px);height:var(--grid-item-icon-size,26px)}.van-grid-item__text{word-wrap:break-word;color:var(--grid-item-text-color,var(--app-B6-N2,rgba(0,0,0,.7)));font-size:var(--grid-item-text-font-size,12px)}.van-grid-item__icon+.van-grid-item__text{margin-top:8px}

package/lib/icon/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';:host{align-items:center;display:inline-flex;justify-content:center}.van-icon{text-rendering:auto;-webkit-font-smoothing:antialiased;font:normal normal normal 14px/1 vant-icon;font:normal normal normal 14px/1 var(--van-icon-font-family,"vant-icon");font-size:inherit;position:relative}.van-icon,.van-icon:before{display:inline-block}.van-icon--custom{position:relative}.van-icon--image{height:1em;width:1em}.van-icon__image,.van-icon__svg{height:100%;width:100%}.van-icon__svg{background:var(--icon-color,var(--app-B4-N2,rgba(0,0,0,.7)))}.van-icon__info{z-index:1}

package/lib/icon/index.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/icon/index.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var component_1 = require("../common/component");
+(0, component_1.VantComponent)({
+    classes: ['info-class'],
+    props: {
+        dot: Boolean,
+        info: null,
+        size: null,
+        color: String,
+        customStyle: String,
+        classPrefix: {
+            type: String,
+            value: 'van-icon',
+        },
+        name: String,
+    },
+    methods: {
+        onClick: function () {
+            this.$emit('click');
+        },
+    },
+});

package/lib/icon/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-info": "../info/index"
+  }
+}

package/lib/icon/index.wxml

@@ -0,0 +1,25 @@
+<wxs src="./index.wxs" module="computed" />
+
+<view
+  class="{{ computed.rootClass({ classPrefix, name }) }}"
+  style="{{ computed.rootStyle({ customStyle, color, size }) }}"
+  bindtap="onClick"
+>
+  <van-info
+    wx:if="{{ info !== null || dot }}"
+    dot="{{ dot }}"
+    info="{{ info }}"
+    custom-class="van-icon__info info-class"
+  />
+  <view
+    wx:if="{{ computed.isSvg(name) }}"
+    style="{{ computed.svgStyle({ customStyle, name, color }) }}"
+    class="van-icon__svg"
+  />
+  <image
+    wx:elif="{{ computed.isImage(name) }}"
+    src="{{ computed.getImageSrc({ name, color }) }}"
+    mode="aspectFit"
+    class="van-icon__image"
+  />
+</view>

package/lib/icon/index.wxs

@@ -0,0 +1,75 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+
+function isImage(name) {
+  return name.indexOf('/') !== -1;
+}
+
+function isSvg(name) {
+  return name.indexOf('data:image/svg+xml') !== -1;
+}
+
+function rootClass(data) {
+  var classes = ['custom-class'];
+
+  if (data.classPrefix !== 'van-icon') {
+    classes.push('van-icon--custom')
+  }
+
+  if (data.classPrefix != null) {
+    classes.push(data.classPrefix);
+  }
+
+  if (isImage(data.name)) {
+    classes.push('van-icon--image');
+    if (isSvg(data.name)) classes.push('van-icon--svg');
+  } else if (data.classPrefix != null) {
+    classes.push(data.classPrefix + '-' + data.name);
+  }
+
+  return classes.join(' ');
+}
+
+function rootStyle(data) {
+  return style([
+    {
+      color: data.color,
+      'font-size': addUnit(data.size),
+    },
+    data.customStyle,
+  ]);
+}
+
+function getImageSrc(data) {
+  // if (isSvg(data.name) && data.color) {
+  //   return data.name.replace('currentColor', encodeURIComponent(data.color));
+  // }
+  return data.name;
+}
+
+function svgStyle(data) {
+  const imageBase64Src = `url(${getImageSrc(data)})`;
+  // console.log('imageBase64Src', imageBase64Src)
+  const ret = style([
+    {
+      '-webkit-mask-image': imageBase64Src,
+      '-webkit-mask-size': 'contain',
+      'mask-image': imageBase64Src,
+      'mask-size': 'contain',
+      width: data.size,
+      height: data.size,
+      background: data.color,
+    },
+  ]);
+  return ret;
+}
+
+module.exports = {
+  isImage: isImage,
+  isSvg: isSvg,
+  getImageSrc: getImageSrc,
+  rootClass: rootClass,
+  rootStyle: rootStyle,
+  svgStyle: svgStyle,
+};

package/lib/icon/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';:host{align-items:center;display:inline-flex;justify-content:center}.van-icon{text-rendering:auto;-webkit-font-smoothing:antialiased;font:normal normal normal 14px/1 vant-icon;font:normal normal normal 14px/1 var(--van-icon-font-family,"vant-icon");font-size:inherit;position:relative}.van-icon,.van-icon:before{display:inline-block}.van-icon--custom{position:relative}.van-icon--image{height:1em;width:1em}.van-icon__image,.van-icon__svg{height:100%;width:100%}.van-icon__svg{background:var(--icon-color,var(--app-B4-N2,rgba(0,0,0,.7)))}.van-icon__info{z-index:1}

package/lib/image/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';.van-image{display:inline-block;position:relative}.van-image--round{border-radius:50%;overflow:hidden}.van-image--round .van-image__img{border-radius:inherit}.van-image__error,.van-image__img,.van-image__loading{display:block;height:100%;width:100%}.van-image__error,.van-image__loading{align-items:center;background-color:var(--image-placeholder-background-color,#f7f8fa);color:var(--image-placeholder-text-color,#969799);display:flex;flex-direction:column;font-size:var(--image-placeholder-font-size,14px);justify-content:center;left:0;position:absolute;top:0}.van-image__loading-icon{color:var(--image-loading-icon-color,#dcdee0);font-size:var(--image-loading-icon-size,32px)!important}.van-image__error-icon{color:var(--image-error-icon-color,#dcdee0);font-size:var(--image-error-icon-size,32px)!important}

package/lib/image/index.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/image/index.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var component_1 = require("../common/component");
+var button_1 = require("../mixins/button");
+(0, component_1.VantComponent)({
+    mixins: [button_1.button],
+    classes: ['custom-class', 'loading-class', 'error-class', 'image-class'],
+    props: {
+        src: {
+            type: String,
+            observer: function () {
+                this.setData({
+                    error: false,
+                    loading: true,
+                });
+            },
+        },
+        round: Boolean,
+        width: null,
+        height: null,
+        radius: null,
+        lazyLoad: Boolean,
+        useErrorSlot: Boolean,
+        useLoadingSlot: Boolean,
+        showMenuByLongpress: Boolean,
+        fit: {
+            type: String,
+            value: 'fill',
+        },
+        webp: {
+            type: Boolean,
+            value: false,
+        },
+        showError: {
+            type: Boolean,
+            value: true,
+        },
+        showLoading: {
+            type: Boolean,
+            value: true,
+        },
+    },
+    data: {
+        error: false,
+        loading: true,
+        viewStyle: '',
+    },
+    methods: {
+        onLoad: function (event) {
+            this.setData({
+                loading: false,
+            });
+            this.$emit('load', event.detail);
+        },
+        onError: function (event) {
+            this.setData({
+                loading: false,
+                error: true,
+            });
+            this.$emit('error', event.detail);
+        },
+        onClick: function (event) {
+            this.$emit('click', event.detail);
+        },
+    },
+});

package/lib/image/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-icon": "../icon/index",
+    "van-loading": "../loading/index"
+  }
+}

package/lib/image/index.wxml

@@ -0,0 +1,35 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
+
+<view
+  style="{{ computed.rootStyle({ width, height, radius }) }}"
+  class="custom-class {{ utils.bem('image', { round })}}"
+  bind:tap="onClick"
+>
+  <image
+    wx:if="{{ !error }}"
+    src="{{ src }}"
+    mode="{{ computed.mode(fit) }}"
+    lazy-load="{{ lazyLoad }}"
+    webp="{{ webp }}"
+    class="image-class van-image__img"
+    show-menu-by-longpress="{{ showMenuByLongpress }}"
+    bind:load="onLoad"
+    bind:error="onError"
+  />
+
+  <view
+    wx:if="{{ loading && showLoading }}"
+    class="loading-class van-image__loading"
+  >
+    <slot wx:if="{{ useLoadingSlot }}" name="loading" />
+    <van-icon wx:else name="photo" custom-class="van-image__loading-icon" />
+  </view>
+  <view
+    wx:if="{{ error && showError }}"
+    class="error-class van-image__error"
+  >
+    <slot wx:if="{{ useErrorSlot }}" name="error" />
+    <van-icon wx:else name="photo-fail" custom-class="van-image__error-icon" />
+  </view>
+</view>

package/lib/image/index.wxs

@@ -0,0 +1,32 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+
+function rootStyle(data) {
+  return style([
+    {
+      width: addUnit(data.width),
+      height: addUnit(data.height),
+      'border-radius': addUnit(data.radius),
+    },
+    data.radius ? 'overflow: hidden' : null,
+  ]);
+}
+
+var FIT_MODE_MAP = {
+  none: 'center',
+  fill: 'scaleToFill',
+  cover: 'aspectFill',
+  contain: 'aspectFit',
+  widthFix: 'widthFix',
+  heightFix: 'heightFix',
+};
+
+function mode(fit) {
+  return FIT_MODE_MAP[fit];
+}
+
+module.exports = {
+  rootStyle: rootStyle,
+  mode: mode,
+};

package/lib/image/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';.van-image{display:inline-block;position:relative}.van-image--round{border-radius:50%;overflow:hidden}.van-image--round .van-image__img{border-radius:inherit}.van-image__error,.van-image__img,.van-image__loading{display:block;height:100%;width:100%}.van-image__error,.van-image__loading{align-items:center;background-color:var(--image-placeholder-background-color,#f7f8fa);color:var(--image-placeholder-text-color,#969799);display:flex;flex-direction:column;font-size:var(--image-placeholder-font-size,14px);justify-content:center;left:0;position:absolute;top:0}.van-image__loading-icon{color:var(--image-loading-icon-color,#dcdee0);font-size:var(--image-loading-icon-size,32px)!important}.van-image__error-icon{color:var(--image-error-icon-color,#dcdee0);font-size:var(--image-error-icon-size,32px)!important}

package/lib/index-anchor/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';.van-index-anchor{background-color:var(--index-anchor-background-color,transparent);color:var(--index-anchor-text-color,var(--app-B6-N1,#000));font-size:var(--index-anchor-font-size,14px);font-weight:var(--index-anchor-font-weight,500);line-height:var(--index-anchor-line-height,32px);padding:var(--index-anchor-padding,0 16px)}.van-index-anchor--active{background-color:var(--index-anchor-active-background-color,var(--app-B3,#fff));color:var(--index-anchor-active-text-color,var(--app-M1,#3678e3));left:0;right:0}

package/lib/index-anchor/index.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/index-anchor/index.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var utils_1 = require("../common/utils");
+var component_1 = require("../common/component");
+var relation_1 = require("../common/relation");
+(0, component_1.VantComponent)({
+    relation: (0, relation_1.useParent)('index-bar'),
+    props: {
+        useSlot: Boolean,
+        index: null,
+    },
+    data: {
+        active: false,
+        wrapperStyle: '',
+        anchorStyle: '',
+    },
+    methods: {
+        scrollIntoView: function (scrollTop) {
+            var _this = this;
+            (0, utils_1.getRect)(this, '.van-index-anchor-wrapper').then(function (rect) {
+                wx.pageScrollTo({
+                    duration: 0,
+                    scrollTop: scrollTop + rect.top - _this.parent.data.stickyOffsetTop,
+                });
+            });
+        },
+    },
+});

package/lib/index-anchor/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

package/lib/index-anchor/index.wxml

@@ -0,0 +1,14 @@
+<view
+  class="van-index-anchor-wrapper"
+  style="{{ wrapperStyle }}"
+>
+  <view
+    class="van-index-anchor {{ active ? 'van-index-anchor--active van-hairline--bottom' : '' }}"
+    style="{{ anchorStyle }}"
+  >
+    <slot wx:if="{{ useSlot }}"/>
+    <block wx:else>
+      <text>{{ index }}</text>
+    </block>
+  </view>
+</view>

package/lib/index-anchor/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';.van-index-anchor{background-color:var(--index-anchor-background-color,transparent);color:var(--index-anchor-text-color,var(--app-B6-N1,#000));font-size:var(--index-anchor-font-size,14px);font-weight:var(--index-anchor-font-weight,500);line-height:var(--index-anchor-line-height,32px);padding:var(--index-anchor-padding,0 16px)}.van-index-anchor--active{background-color:var(--index-anchor-active-background-color,var(--app-B3,#fff));color:var(--index-anchor-active-text-color,var(--app-M1,#3678e3));left:0;right:0}

package/lib/index-bar/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';.van-index-bar{position:relative}.van-index-bar__sidebar{display:flex;flex-direction:column;position:fixed;right:0;text-align:center;top:50%;transform:translateY(-50%);-webkit-user-select:none;user-select:none}.van-index-bar__index{font-size:var(--index-bar-index-font-size,10px);font-weight:500;line-height:var(--index-bar-index-line-height,14px);padding:0 var(--padding-base,4px) 0 var(--padding-md,16px)}

package/lib/index-bar/index.d.ts

@@ -0,0 +1 @@
+export {};