wedux-ui 0.1.0

package/miniprogram_dist/components/badge/badge.scss

@@ -0,0 +1,98 @@
+.w-badge {
+  display: inline-flex;
+  position: relative;
+  vertical-align: middle;
+}
+
+.w-badge__sup {
+  position: absolute;
+  right: 0;
+  top: 0;
+  transform: translate(50%, -50%);
+  height: var(--w-badge-height);
+  min-width: var(--w-badge-height);
+  line-height: var(--w-badge-height);
+  border-radius: calc(var(--w-badge-height) / 2);
+  padding: 0 var(--w-badge-padding-x);
+  font-size: var(--w-badge-font-size);
+  color: var(--w-badge-text-color);
+  text-align: center;
+  white-space: nowrap;
+  box-sizing: border-box;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-variant-numeric: tabular-nums;
+}
+
+/* Type colors */
+.w-badge__sup--default {
+  --_bg: var(--w-badge-color-default);
+  background-color: var(--_bg);
+}
+
+.w-badge__sup--primary {
+  --_bg: var(--w-badge-color-primary);
+  background-color: var(--_bg);
+}
+
+.w-badge__sup--success {
+  --_bg: var(--w-badge-color-success);
+  background-color: var(--_bg);
+}
+
+.w-badge__sup--info {
+  --_bg: var(--w-badge-color-info);
+  background-color: var(--_bg);
+}
+
+.w-badge__sup--warning {
+  --_bg: var(--w-badge-color-warning);
+  background-color: var(--_bg);
+}
+
+.w-badge__sup--error {
+  --_bg: var(--w-badge-color-error);
+  background-color: var(--_bg);
+}
+
+/* Dot mode */
+.w-badge__sup--dot {
+  height: var(--w-badge-dot-size);
+  min-width: var(--w-badge-dot-size);
+  width: var(--w-badge-dot-size);
+  padding: 0;
+  border-radius: 50%;
+}
+
+/* Processing ripple */
+@keyframes badge-wave {
+  0% {
+    box-shadow: 0 0 0 0 currentColor;
+    opacity: 0.5;
+  }
+  70% {
+    box-shadow: 0 0 0 10rpx currentColor;
+    opacity: 0;
+  }
+  100% {
+    box-shadow: 0 0 0 0 currentColor;
+    opacity: 0;
+  }
+}
+
+.w-badge__wave {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  border-radius: inherit;
+  color: var(--_bg);
+  animation: badge-wave 1.5s ease-out infinite;
+}
+
+.w-badge__text {
+  display: inline;
+}

package/miniprogram_dist/components/badge/badge.wxml

@@ -0,0 +1,11 @@
+<view class="w-badge">
+  <slot></slot>
+  <view
+    wx:if="{{_visible}}"
+    class="w-badge__sup w-badge__sup--{{type}} {{dot ? 'w-badge__sup--dot' : ''}} {{processing ? 'w-badge__sup--processing' : ''}}"
+    style="{{_style}}"
+  >
+    <text wx:if="{{!dot}}" class="w-badge__text">{{_displayValue}}</text>
+    <view wx:if="{{processing}}" class="w-badge__wave"></view>
+  </view>
+</view>

package/miniprogram_dist/components/button/button.js

@@ -0,0 +1,152 @@
+Component({
+  behaviors: ['wx://form-field-button'],
+  relations: {
+    '../button-group/button-group': {
+      type: 'ancestor',
+      unlinked() {
+        this.setData({ _groupClass: '', _groupSize: '' });
+      },
+    },
+  },
+
+  properties: {
+    type: {
+      type: String,
+      value: 'default', // 'default' | 'tertiary' | 'primary' | 'success' | 'info' | 'warning' | 'error'
+    },
+    size: {
+      type: String,
+      value: 'medium', // default | medium | small
+    },
+    strong: {
+      type: Boolean,
+      value: false,
+    },
+    secondary: {
+      type: Boolean,
+      value: false,
+    },
+    tertiary: {
+      type: Boolean,
+      value: false,
+    },
+    ghost: {
+      type: Boolean,
+      value: false,
+    },
+    dashed: {
+      type: Boolean,
+      value: false,
+    },
+    quaternary: {
+      type: Boolean,
+      value: false,
+    },
+    round: {
+      type: Boolean,
+      value: false,
+    },
+    circle: {
+      type: Boolean,
+      value: false,
+    },
+    block: {
+      type: Boolean,
+      value: false,
+    },
+    disabled: {
+      type: Boolean,
+      value: false,
+    },
+    loading: {
+      type: Boolean,
+      value: false,
+    },
+    color: {
+      type: String,
+      value: '',
+    },
+    textColor: {
+      type: String,
+      value: '',
+    },
+    text: {
+      type: Boolean,
+      value: false,
+    },
+    openType: {
+      type: String,
+      value: '', // 'contact' | 'share' | 'getPhoneNumber' | 'getRealtimePhoneNumber' | 'getUserInfo' | 'launchApp' | 'openSetting' | 'feedback' | 'chooseAvatar' | 'agreePrivacyAuthorization' | 'liveActivity'
+    },
+    formType: {
+      type: String,
+      value: '', // 'submit' | 'reset' | 'submitToGroup'
+    },
+  },
+
+  data: {
+    _groupClass: '',
+    _groupSize: '',
+    _style: '',
+  },
+
+  observers: {
+    'color, textColor'(color, textColor) {
+      let style = '';
+      if (color) {
+        style += `background-color: ${color}; border-color: ${color};`;
+      }
+      if (textColor) {
+        style += ` color: ${textColor};`;
+      }
+      this.setData({ _style: style });
+    },
+  },
+
+  methods: {
+    handleTap() {
+      if (this.data.disabled || this.data.loading) return;
+      this.triggerEvent('tap', {}, { bubbles: true, composed: true });
+    },
+
+    handleGetPhoneNumber(e) {
+      this.triggerEvent('getphonenumber', e.detail);
+    },
+
+    handleChooseAvatar(e) {
+      this.triggerEvent('chooseavatar', e.detail);
+    },
+
+    handleUserInfo(e) {
+      this.triggerEvent('getuserinfo', e.detail);
+    },
+
+    handleGetRealtimePhoneNumber(e) {
+      this.triggerEvent('getrealtimephonenumber', e.detail);
+    },
+
+    handleContact(e) {
+      this.triggerEvent('contact', e.detail);
+    },
+
+    handleLaunchApp(e) {
+      this.triggerEvent('launchapp', e.detail);
+    },
+
+    handleOpenSetting(e) {
+      this.triggerEvent('opensetting', e.detail);
+    },
+
+    handleAgreePrivacyAuthorization(e) {
+      this.triggerEvent('agreeprivacyauthorization', e.detail);
+    },
+
+    _setGroupContext(ctx) {
+      const prefix = ctx.vertical ? 'w-btn--group-v-' : 'w-btn--group-';
+      this.setData({
+        _groupClass: prefix + ctx.position,
+        _groupSize: ctx.size || '',
+      });
+    },
+  },
+});

package/miniprogram_dist/components/button/button.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "styleIsolation": "apply-shared"
+}