wedux-ui 0.1.0

package/miniprogram_dist/components/form-item/form-item.scss

@@ -0,0 +1,59 @@
+.w-form-item {
+  display: flex;
+  flex-direction: column;
+}
+
+.w-form-item--left {
+  flex-direction: row;
+
+  .w-form-item__label {
+    flex-shrink: 0;
+  }
+
+  .w-form-item__content {
+    flex: 1;
+    min-width: 0;
+  }
+}
+
+.w-form-item__label {
+  font-size: var(--font-size-form-label);
+  color: var(--color-text-primary);
+  margin-bottom: var(--size-form-label-gap);
+  display: flex;
+  align-items: center;
+  gap: 4rpx;
+}
+
+.w-form-item--left .w-form-item__label {
+  margin-bottom: 0;
+  margin-right: var(--size-form-label-gap);
+}
+
+.w-form-item__require {
+  color: var(--color-danger);
+  font-size: var(--font-size-form-label);
+}
+
+.w-form-item__content {
+  display: flex;
+  flex-direction: column;
+}
+
+.w-form-item__feedback {
+  font-size: var(--font-size-form-feedback);
+  margin-top: 8rpx;
+  line-height: 1.4;
+}
+
+.w-form-item__feedback--error {
+  color: var(--color-form-feedback-error);
+}
+
+.w-form-item__feedback--warning {
+  color: var(--color-form-feedback-warning);
+}
+
+.w-form-item__feedback--success {
+  color: var(--color-success);
+}

package/miniprogram_dist/components/form-item/form-item.wxml

@@ -0,0 +1,33 @@
+<view
+  class="w-form-item w-form-item--{{_formLabelPlacement}} {{(validationStatus || _validationStatus) === 'error' ? 'w-form-item--error' : ''}} {{(validationStatus || _validationStatus) === 'warning' ? 'w-form-item--warning' : ''}}"
+>
+  <view
+    wx:if="{{_formShowLabel}}"
+    class="w-form-item__label"
+    style="{{_formLabelPlacement === 'left' ? 'width: ' + (labelWidth || _formLabelWidth || '160rpx') + ';' : ''}}"
+  >
+    <span
+      wx:if="{{_formShowRequireMark && _isRequired && (requireMarkPlacement || _formRequireMarkPlacement) === 'left'}}"
+      class="w-form-item__require"
+    >
+      *
+    </span>
+    <text wx:if="{{label}}">{{label}}</text>
+    <slot wx:else name="label"></slot>
+    <span
+      wx:if="{{_formShowRequireMark && _isRequired && (requireMarkPlacement || _formRequireMarkPlacement) !== 'left'}}"
+      class="w-form-item__require"
+    >
+      *
+    </span>
+  </view>
+  <view class="w-form-item__content">
+    <slot></slot>
+    <view
+      wx:if="{{(showFeedback !== null ? showFeedback : _formShowFeedback) && (feedback || _validationMessage)}}"
+      class="w-form-item__feedback w-form-item__feedback--{{validationStatus || _validationStatus || 'error'}}"
+    >
+      {{feedback || _validationMessage}}
+    </view>
+  </view>
+</view>

package/miniprogram_dist/components/gradient-text/gradient-text.js

@@ -0,0 +1,54 @@
+Component({
+  properties: {
+    type: {
+      type: String,
+      value: 'primary', // primary | info | success | warning | error
+    },
+    size: {
+      type: String,
+      value: '', // sm | md | lg | xl or custom value like '48rpx'
+    },
+    gradient: {
+      type: String,
+      value: '', // custom CSS gradient, e.g. 'linear-gradient(90deg, red, blue)'
+    },
+  },
+
+  data: {
+    _style: '',
+  },
+
+  observers: {
+    'type, size, gradient'(type, size, gradient) {
+      const parts = [];
+
+      // gradient or type-based color
+      if (gradient) {
+        parts.push(`background-image: ${gradient}`);
+      } else {
+        const colorMap = {
+          primary: 'linear-gradient(135deg, var(--color-brand), #05a34e)',
+          info: 'linear-gradient(135deg, var(--color-info), #0790d4)',
+          success: 'linear-gradient(135deg, var(--color-success), #5a9400)',
+          warning: 'linear-gradient(135deg, var(--color-warning), #e08520)',
+          error: 'linear-gradient(135deg, var(--color-danger), #d43030)',
+        };
+        const bg = colorMap[type] || colorMap.primary;
+        parts.push(`background-image: ${bg}`);
+      }
+
+      // font size
+      if (size) {
+        const sizeMap = {
+          sm: 'var(--font-size-sm)',
+          md: 'var(--font-size-md)',
+          lg: 'var(--font-size-lg)',
+          xl: 'var(--font-size-xl)',
+        };
+        parts.push(`font-size: ${sizeMap[size] || size}`);
+      }
+
+      this.setData({ _style: parts.join('; ') });
+    },
+  },
+});

package/miniprogram_dist/components/gradient-text/gradient-text.json

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

package/miniprogram_dist/components/gradient-text/gradient-text.scss

@@ -0,0 +1,7 @@
+.w-gradient-text {
+  display: inline;
+  font-size: var(--font-size-md);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}

package/miniprogram_dist/components/gradient-text/gradient-text.wxml

@@ -0,0 +1 @@
+<text class="w-gradient-text" style="{{_style}}"><slot></slot></text>

package/miniprogram_dist/components/h/h.js

@@ -0,0 +1,60 @@
+Component({
+  properties: {
+    level: {
+      type: Number,
+      value: 1, // 1–6
+    },
+    type: {
+      type: String,
+      value: 'default', // default / primary / info / success / warning / error
+    },
+    prefix: {
+      type: Boolean,
+      value: false,
+    },
+    alignText: {
+      type: Boolean,
+      value: false,
+    },
+  },
+
+  data: {
+    _class: '',
+    _style: '',
+  },
+
+  observers: {
+    'level, type, prefix, alignText'(level, type, prefix, alignText) {
+      const lvl = level < 1 ? 1 : level > 6 ? 6 : level;
+
+      const cls = ['w-h', `w-h--${lvl}`];
+      if (type !== 'default') cls.push(`w-h--${type}`);
+      if (prefix) {
+        cls.push('w-h--prefix');
+        if (alignText) cls.push('w-h--align-text');
+      }
+
+      const parts = [];
+      // type color
+      const colorMap = {
+        primary: 'var(--color-brand)',
+        info: 'var(--color-info)',
+        success: 'var(--color-success)',
+        warning: 'var(--color-warning)',
+        error: 'var(--color-danger)',
+      };
+      if (colorMap[type]) {
+        parts.push(`color: ${colorMap[type]}`);
+      }
+      // prefix bar color follows type
+      if (prefix && colorMap[type]) {
+        parts.push(`--h-bar-color: ${colorMap[type]}`);
+      }
+
+      this.setData({
+        _class: cls.join(' '),
+        _style: parts.join('; '),
+      });
+    },
+  },
+});

package/miniprogram_dist/components/h/h.json

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

package/miniprogram_dist/components/h/h.scss

@@ -0,0 +1,53 @@
+.w-h {
+  color: var(--color-text-primary);
+  font-weight: 600;
+  margin: 0;
+  line-height: 1.4;
+  --h-bar-color: var(--color-h-bar);
+}
+
+.w-h--1 {
+  font-size: var(--font-size-h1);
+  font-weight: 700;
+}
+.w-h--2 {
+  font-size: var(--font-size-h2);
+  font-weight: 700;
+}
+.w-h--3 {
+  font-size: var(--font-size-h3);
+}
+.w-h--4 {
+  font-size: var(--font-size-h4);
+}
+.w-h--5 {
+  font-size: var(--font-size-h5);
+}
+.w-h--6 {
+  font-size: var(--font-size-h6);
+}
+
+/* Prefix bar */
+.w-h--prefix {
+  position: relative;
+  padding-left: calc(var(--size-h-bar-width) + var(--spacing-md));
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: var(--size-h-bar-width);
+    border-radius: calc(var(--size-h-bar-width) / 2);
+    background-color: var(--h-bar-color);
+  }
+}
+
+.w-h--align-text {
+  padding-left: 0;
+
+  &::before {
+    left: calc(-1 * (var(--size-h-bar-width) + var(--spacing-md)));
+  }
+}

package/miniprogram_dist/components/h/h.wxml

@@ -0,0 +1 @@
+<view class="{{_class}}" style="{{_style}}"><slot></slot></view>

package/miniprogram_dist/components/highlight/highlight.js

@@ -0,0 +1,77 @@
+Component({
+  properties: {
+    text: {
+      type: String,
+      value: '',
+    },
+    patterns: {
+      type: Array,
+      value: [],
+    },
+    caseSensitive: {
+      type: Boolean,
+      value: false,
+    },
+    autoEscape: {
+      type: Boolean,
+      value: true,
+    },
+    highlightClass: {
+      type: String,
+      value: '',
+    },
+    highlightStyle: {
+      type: String,
+      value: '',
+    },
+  },
+
+  data: {
+    _segments: [],
+  },
+
+  observers: {
+    'text, patterns, caseSensitive, autoEscape': function (
+      text,
+      patterns,
+      caseSensitive,
+      autoEscape,
+    ) {
+      if (!text || !patterns || patterns.length === 0) {
+        this.setData({ _segments: text ? [{ text, isMatch: false }] : [] });
+        return;
+      }
+
+      const escapeRegExp = (str) => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+
+      const pattern = patterns
+        .filter((w) => w)
+        .map((w) => (autoEscape ? escapeRegExp(w) : w))
+        .join('|');
+
+      if (!pattern) {
+        this.setData({ _segments: [{ text, isMatch: false }] });
+        return;
+      }
+
+      const regex = new RegExp(`(${pattern})`, caseSensitive ? 'g' : 'gi');
+      const segments = [];
+      let lastIndex = 0;
+
+      for (const match of text.matchAll(regex)) {
+        const { index } = match;
+        if (index > lastIndex) {
+          segments.push({ text: text.slice(lastIndex, index), isMatch: false });
+        }
+        segments.push({ text: match[0], isMatch: true });
+        lastIndex = index + match[0].length;
+      }
+
+      if (lastIndex < text.length) {
+        segments.push({ text: text.slice(lastIndex), isMatch: false });
+      }
+
+      this.setData({ _segments: segments });
+    },
+  },
+});

package/miniprogram_dist/components/highlight/highlight.json

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

package/miniprogram_dist/components/highlight/highlight.scss

@@ -0,0 +1,8 @@
+.w-highlight {
+  display: inline;
+}
+
+.w-highlight__mark {
+  color: var(--color-brand);
+  background: transparent;
+}

package/miniprogram_dist/components/highlight/highlight.wxml

@@ -0,0 +1,12 @@
+<text class="w-highlight">
+  <block wx:for="{{_segments}}" wx:key="index">
+    <text
+      wx:if="{{item.isMatch}}"
+      class="w-highlight__mark {{highlightClass}}"
+      style="{{highlightStyle}}"
+    >
+      {{item.text}}
+    </text>
+    <block wx:else>{{item.text}}</block>
+  </block>
+</text>

package/miniprogram_dist/components/infinite-scroll/infinite-scroll.js

@@ -0,0 +1,31 @@
+Component({
+  properties: {
+    distance: {
+      type: Number,
+      value: 50,
+    },
+    loading: {
+      type: Boolean,
+      value: false,
+    },
+    finished: {
+      type: Boolean,
+      value: false,
+    },
+    loadingText: {
+      type: String,
+      value: '加载中...',
+    },
+    finishedText: {
+      type: String,
+      value: '没有更多了',
+    },
+  },
+
+  methods: {
+    onScrollToLower() {
+      if (this.data.loading || this.data.finished) return;
+      this.triggerEvent('load');
+    },
+  },
+});

package/miniprogram_dist/components/infinite-scroll/infinite-scroll.json

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

package/miniprogram_dist/components/infinite-scroll/infinite-scroll.scss

@@ -0,0 +1,31 @@
+.w-infinite-scroll {
+  height: 100%;
+}
+
+.w-infinite-scroll__tip {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-lg) 0;
+}
+
+.w-infinite-scroll__spinner {
+  width: 32rpx;
+  height: 32rpx;
+  border: 3rpx solid rgba(0, 0, 0, 0.15);
+  border-top-color: var(--color-text-secondary);
+  border-radius: 50%;
+  margin-right: var(--spacing-sm);
+  animation: w-infinite-scroll-spin 0.8s linear infinite;
+}
+
+.w-infinite-scroll__text {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+}
+
+@keyframes w-infinite-scroll-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/miniprogram_dist/components/infinite-scroll/infinite-scroll.wxml

@@ -0,0 +1,12 @@
+<scroll-view
+  class="w-infinite-scroll"
+  scroll-y
+  lower-threshold="{{distance}}"
+  bindscrolltolower="onScrollToLower"
+>
+  <slot />
+  <view class="w-infinite-scroll__tip" wx:if="{{loading || finished}}">
+    <view class="w-infinite-scroll__spinner" wx:if="{{loading}}" />
+    <text class="w-infinite-scroll__text">{{loading ? loadingText : finishedText}}</text>
+  </view>
+</scroll-view>

package/miniprogram_dist/components/input/input.js

@@ -0,0 +1,59 @@
+const formField = require('../../behaviors/formField');
+
+Component({
+  behaviors: ['wx://form-field', formField],
+
+  relations: {
+    '../form-item/form-item': {
+      type: 'ancestor',
+    },
+  },
+
+  properties: {
+    value: { type: String, value: '' },
+    type: { type: String, value: 'text' },
+    password: { type: Boolean, value: false },
+    placeholder: { type: String, value: '' },
+    disabled: { type: Boolean, value: false },
+    readonly: { type: Boolean, value: false },
+    maxlength: { type: Number, value: 140 },
+    clearable: { type: Boolean, value: false },
+    showWordLimit: { type: Boolean, value: false },
+    size: { type: String, value: '' },
+    status: { type: String, value: '' },
+    round: { type: Boolean, value: false },
+  },
+
+  data: {
+    _focused: false,
+  },
+
+  methods: {
+    handleInput(e) {
+      const val = e.detail.value;
+      this.triggerEvent('update:value', { value: val });
+      this._notifyChange();
+    },
+
+    handleFocus(e) {
+      this.setData({ _focused: true });
+      this.triggerEvent('focus', e.detail);
+    },
+
+    handleBlur(e) {
+      this.setData({ _focused: false });
+      this.triggerEvent('blur', e.detail);
+      this._notifyBlur();
+    },
+
+    handleConfirm(e) {
+      this.triggerEvent('confirm', e.detail);
+    },
+
+    handleClear() {
+      this.triggerEvent('update:value', { value: '' });
+      this.triggerEvent('clear');
+      this._notifyChange();
+    },
+  },
+});

package/miniprogram_dist/components/input/input.json

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

package/miniprogram_dist/components/input/input.scss

@@ -0,0 +1,96 @@
+@import '../../styles/iconfont.scss';
+
+.w-input {
+  display: inline-flex;
+  align-items: center;
+  max-width: 100%;
+  width: 100%;
+  height: var(--w-input-height);
+  padding: 0 var(--spacing-md);
+  background: var(--w-input-bg);
+  border: 2rpx solid var(--w-input-border);
+  border-radius: var(--w-input-radius);
+  box-sizing: border-box;
+  transition: border-color 0.2s;
+  gap: var(--spacing-xs);
+}
+
+.w-input--size-medium {
+  height: var(--w-input-height-md);
+}
+
+.w-input--size-small {
+  height: var(--w-input-height-sm);
+  padding: 0 var(--spacing-sm);
+  font-size: var(--font-size-sm);
+}
+
+.w-input--round {
+  border-radius: var(--radius-full);
+}
+
+.w-input--focus {
+  border-color: var(--w-input-border-focus);
+}
+
+.w-input--disabled {
+  background: var(--color-input-bg-disabled);
+  opacity: 0.6;
+}
+
+.w-input--error {
+  border-color: var(--color-input-border-error);
+}
+
+.w-input--warning {
+  border-color: var(--color-input-border-warning);
+}
+
+.w-input__native {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  font-size: inherit;
+  color: var(--color-text-primary);
+  background: transparent;
+}
+
+.w-input__placeholder {
+  color: var(--color-text-placeholder);
+}
+
+.w-input__prefix,
+.w-input__suffix {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.w-input__clear {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36rpx;
+  height: 36rpx;
+  flex-shrink: 0;
+}
+
+.w-input__clear-icon {
+  width: 28rpx;
+  height: 28rpx;
+  border-radius: 50%;
+  background: var(--color-text-placeholder);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16rpx;
+  color: var(--color-bg-elevated);
+  line-height: 1;
+}
+
+.w-input__count {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+  flex-shrink: 0;
+  margin-left: var(--spacing-xs);
+}

package/miniprogram_dist/components/input/input.wxml

@@ -0,0 +1,34 @@
+<view
+  class="w-input w-input--size-{{size || _formItemSize || 'medium'}} {{round ? 'w-input--round' : ''}} {{(disabled || _formItemDisabled) ? 'w-input--disabled' : ''}} {{readonly ? 'w-input--readonly' : ''}} {{_focused ? 'w-input--focus' : ''}} {{status === 'error' ? 'w-input--error' : ''}} {{status === 'warning' ? 'w-input--warning' : ''}}"
+>
+  <view class="w-input__prefix" wx:if="{{true}}">
+    <slot name="prefix"></slot>
+  </view>
+  <input
+    class="w-input__native"
+    value="{{value}}"
+    type="{{type}}"
+    password="{{password}}"
+    placeholder="{{placeholder}}"
+    placeholder-class="w-input__placeholder"
+    disabled="{{disabled || _formItemDisabled || readonly}}"
+    maxlength="{{maxlength}}"
+    bindinput="handleInput"
+    bindfocus="handleFocus"
+    bindblur="handleBlur"
+    bindconfirm="handleConfirm"
+  />
+  <view
+    wx:if="{{clearable && value && !disabled && !_formItemDisabled && !readonly}}"
+    class="w-input__clear"
+    bindtap="handleClear"
+  >
+    <text class="w-input__clear-icon iconfont icon-close"></text>
+  </view>
+  <view class="w-input__suffix" wx:if="{{true}}">
+    <slot name="suffix"></slot>
+  </view>
+  <view wx:if="{{showWordLimit && maxlength > 0}}" class="w-input__count">
+    {{value.length}}/{{maxlength}}
+  </view>
+</view>