wedux-ui 0.1.0

package/miniprogram_dist/components/divider/divider.js

@@ -0,0 +1,34 @@
+Component({
+  properties: {
+    vertical: {
+      type: Boolean,
+      value: false,
+    },
+    dashed: {
+      type: Boolean,
+      value: false,
+    },
+    titlePlacement: {
+      type: String,
+      value: 'center', // left | center | right
+    },
+    title: {
+      type: String,
+      value: '',
+    },
+    customTitle: {
+      type: Boolean,
+      value: false,
+    },
+  },
+
+  data: {
+    _hasTitle: false,
+  },
+
+  observers: {
+    'title, customTitle'(title, customTitle) {
+      this.setData({ _hasTitle: !!title || customTitle });
+    },
+  },
+});

package/miniprogram_dist/components/divider/divider.json

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

package/miniprogram_dist/components/divider/divider.scss

@@ -0,0 +1,75 @@
+.w-divider {
+  display: flex;
+  align-items: center;
+  margin: var(--w-divider-spacing) 0;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-md);
+  font-weight: 500;
+
+  &::before,
+  &::after {
+    content: '';
+    flex: 1;
+    border-top: 1rpx solid var(--w-divider-color);
+  }
+
+  /* No title — single line, hide ::after */
+  &:not(.w-divider--with-title) {
+    &::after {
+      display: none;
+    }
+  }
+
+  /* With title */
+  &--with-title {
+    &::before,
+    &::after {
+      content: '';
+    }
+  }
+
+  /* Title placement */
+  &--title-left::before {
+    flex: none;
+    width: 5%;
+    min-width: 20rpx;
+  }
+
+  &--title-right::after {
+    flex: none;
+    width: 5%;
+    min-width: 20rpx;
+  }
+
+  /* Dashed — use 2rpx so the dash pattern is visible on real devices */
+  &--dashed::before,
+  &--dashed::after {
+    border-top: 2rpx dashed var(--w-divider-color);
+  }
+
+  &--dashed.w-divider--vertical {
+    border-left: 2rpx dashed var(--w-divider-color);
+  }
+
+  /* Vertical */
+  &--vertical {
+    display: inline-flex;
+    align-self: stretch;
+    height: auto;
+    min-height: 1em;
+    margin: 0 var(--spacing-sm);
+    vertical-align: middle;
+    border-top: 0;
+    border-left: 1rpx solid var(--w-divider-color);
+
+    &::before,
+    &::after {
+      display: none;
+    }
+  }
+}
+
+.w-divider__title {
+  padding: 0 var(--spacing-md);
+  white-space: nowrap;
+}

package/miniprogram_dist/components/divider/divider.wxml

@@ -0,0 +1,8 @@
+<view
+  class="w-divider {{vertical ? 'w-divider--vertical' : ''}} {{dashed ? 'w-divider--dashed' : ''}} {{_hasTitle && !vertical ? 'w-divider--with-title w-divider--title-' + titlePlacement : ''}}"
+>
+  <view wx:if="{{_hasTitle && !vertical}}" class="w-divider__title">
+    <block wx:if="{{title}}">{{title}}</block>
+    <slot wx:else></slot>
+  </view>
+</view>

package/miniprogram_dist/components/drawer/drawer.js

@@ -0,0 +1,104 @@
+Component({
+  options: {
+    multipleSlots: true,
+  },
+
+  properties: {
+    show: { type: Boolean, value: false },
+    placement: { type: String, value: 'bottom' },
+    width: { type: String, value: '' },
+    height: { type: String, value: '' },
+    title: { type: String, value: '' },
+    closable: { type: Boolean, value: false },
+    showMask: { type: Boolean, value: true },
+    maskClosable: { type: Boolean, value: true },
+    round: { type: Boolean, value: false },
+    zIndex: { type: Number, value: 1000 },
+  },
+
+  data: {
+    _visible: false,
+    _active: false,
+    _bodyStyle: '',
+  },
+
+  observers: {
+    show(val) {
+      if (val) {
+        this._open();
+      } else if (this.data._visible) {
+        this._close();
+      }
+    },
+    'placement, width, height'() {
+      this._updateBodyStyle();
+    },
+  },
+
+  lifetimes: {
+    attached() {
+      this._updateBodyStyle();
+    },
+    detached() {
+      if (this._closeTimer) {
+        clearTimeout(this._closeTimer);
+        this._closeTimer = null;
+      }
+    },
+  },
+
+  methods: {
+    _open() {
+      if (this._closeTimer) {
+        clearTimeout(this._closeTimer);
+        this._closeTimer = null;
+      }
+      this.setData({ _visible: true });
+      setTimeout(() => {
+        this.setData({ _active: true });
+      }, 30);
+    },
+
+    _close() {
+      this.setData({ _active: false });
+      this._closeTimer = setTimeout(() => {
+        this.setData({ _visible: false });
+        this.triggerEvent('afterleave');
+        this._closeTimer = null;
+      }, 300);
+    },
+
+    _updateBodyStyle() {
+      const { placement, width, height } = this.data;
+      const isHorizontal = placement === 'left' || placement === 'right';
+      let style = '';
+      if (isHorizontal && width) {
+        style = `width: ${width};`;
+      } else if (!isHorizontal && height) {
+        style = `height: ${height};`;
+      }
+      this.setData({ _bodyStyle: style });
+    },
+
+    handleMaskTap() {
+      if (this.data.maskClosable) {
+        this.triggerEvent('update:show', { show: false });
+      }
+      this.triggerEvent('maskclick');
+    },
+
+    handleClose() {
+      this.triggerEvent('update:show', { show: false });
+    },
+
+    handlePrevent() {
+      // Catch touchmove to prevent background scroll
+    },
+
+    handleTransitionEnd() {
+      if (this.data._active) {
+        this.triggerEvent('afterenter');
+      }
+    },
+  },
+});

package/miniprogram_dist/components/drawer/drawer.json

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

package/miniprogram_dist/components/drawer/drawer.scss

@@ -0,0 +1,171 @@
+@import '../../styles/iconfont.scss';
+
+.w-drawer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  pointer-events: none;
+}
+
+.w-drawer--active {
+  pointer-events: auto;
+}
+
+/* Placement alignment */
+.w-drawer--bottom {
+  align-items: flex-end;
+}
+
+.w-drawer--top {
+  align-items: flex-start;
+}
+
+.w-drawer--right {
+  justify-content: flex-end;
+}
+
+.w-drawer--left {
+  justify-content: flex-start;
+}
+
+/* Mask */
+.w-drawer__mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--w-drawer-mask-bg);
+  opacity: 0;
+  transition: opacity 0.3s;
+  pointer-events: auto;
+}
+
+.w-drawer--active .w-drawer__mask {
+  opacity: 1;
+}
+
+/* Body */
+.w-drawer__body {
+  position: relative;
+  background: var(--w-drawer-bg);
+  display: flex;
+  flex-direction: column;
+  max-height: 100%;
+  max-width: 100%;
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  pointer-events: auto;
+}
+
+/* Bottom */
+.w-drawer--bottom .w-drawer__body {
+  width: 100%;
+  transform: translateY(100%);
+}
+
+.w-drawer--bottom.w-drawer--active .w-drawer__body {
+  transform: translateY(0);
+}
+
+/* Top */
+.w-drawer--top .w-drawer__body {
+  width: 100%;
+  transform: translateY(-100%);
+}
+
+.w-drawer--top.w-drawer--active .w-drawer__body {
+  transform: translateY(0);
+}
+
+/* Right */
+.w-drawer--right .w-drawer__body {
+  height: 100%;
+  transform: translateX(100%);
+}
+
+.w-drawer--right.w-drawer--active .w-drawer__body {
+  transform: translateX(0);
+}
+
+/* Left */
+.w-drawer--left .w-drawer__body {
+  height: 100%;
+  transform: translateX(-100%);
+}
+
+.w-drawer--left.w-drawer--active .w-drawer__body {
+  transform: translateX(0);
+}
+
+/* Round */
+.w-drawer--round .w-drawer__body {
+  overflow: hidden;
+}
+
+.w-drawer--round.w-drawer--bottom .w-drawer__body {
+  border-radius: var(--w-drawer-radius) var(--w-drawer-radius) 0 0;
+}
+
+.w-drawer--round.w-drawer--top .w-drawer__body {
+  border-radius: 0 0 var(--w-drawer-radius) var(--w-drawer-radius);
+}
+
+.w-drawer--round.w-drawer--left .w-drawer__body {
+  border-radius: 0 var(--w-drawer-radius) var(--w-drawer-radius) 0;
+}
+
+.w-drawer--round.w-drawer--right .w-drawer__body {
+  border-radius: var(--w-drawer-radius) 0 0 var(--w-drawer-radius);
+}
+
+/* Header */
+.w-drawer__header {
+  display: flex;
+  align-items: center;
+  padding: var(--spacing-md) var(--spacing-lg);
+  border-bottom: 1rpx solid var(--color-separator);
+  flex-shrink: 0;
+}
+
+.w-drawer__title {
+  flex: 1;
+  font-size: var(--font-size-lg);
+  font-weight: 500;
+  color: var(--color-text-primary);
+}
+
+.w-drawer__close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48rpx;
+  height: 48rpx;
+  flex-shrink: 0;
+  margin-left: var(--spacing-sm);
+}
+
+.w-drawer__close-icon {
+  font-size: 32rpx;
+  color: var(--color-text-secondary);
+  line-height: 1;
+}
+
+/* Content */
+.w-drawer__content {
+  flex: 1;
+  overflow: hidden;
+}
+
+/* Footer — auto-hide when slot is empty */
+.w-drawer__footer:empty {
+  display: none;
+}
+
+.w-drawer__footer {
+  flex-shrink: 0;
+  border-top: 1rpx solid var(--color-separator);
+  padding: var(--spacing-md) var(--spacing-lg);
+}

package/miniprogram_dist/components/drawer/drawer.wxml

@@ -0,0 +1,22 @@
+<view
+  wx:if="{{_visible}}"
+  class="w-drawer w-drawer--{{placement}} {{_active ? 'w-drawer--active' : ''}} {{round ? 'w-drawer--round' : ''}}"
+  style="z-index: {{zIndex}};"
+  catchtouchmove="handlePrevent"
+>
+  <view wx:if="{{showMask}}" class="w-drawer__mask" bindtap="handleMaskTap"></view>
+  <view class="w-drawer__body" style="{{_bodyStyle}}" bindtransitionend="handleTransitionEnd">
+    <view wx:if="{{title || closable}}" class="w-drawer__header">
+      <view class="w-drawer__title">{{title}}</view>
+      <view wx:if="{{closable}}" class="w-drawer__close" bindtap="handleClose">
+        <text class="w-drawer__close-icon iconfont icon-close"></text>
+      </view>
+    </view>
+    <view class="w-drawer__content">
+      <slot></slot>
+    </view>
+    <view class="w-drawer__footer">
+      <slot name="footer"></slot>
+    </view>
+  </view>
+</view>

package/miniprogram_dist/components/ellipsis/ellipsis.js

@@ -0,0 +1,38 @@
+Component({
+  properties: {
+    lineClamp: {
+      type: Number,
+      value: 1,
+    },
+    expandTrigger: {
+      type: String,
+      value: '', // '' | 'click'
+    },
+  },
+
+  data: {
+    _expanded: false,
+    _style: '',
+  },
+
+  observers: {
+    'lineClamp, _expanded'(lineClamp, expanded) {
+      if (expanded) {
+        this.setData({ _style: '' });
+        return;
+      }
+      let style = '';
+      if (lineClamp > 1) {
+        style = `-webkit-line-clamp: ${lineClamp};`;
+      }
+      this.setData({ _style: style });
+    },
+  },
+
+  methods: {
+    onTap() {
+      if (this.data.expandTrigger !== 'click') return;
+      this.setData({ _expanded: !this.data._expanded });
+    },
+  },
+});

package/miniprogram_dist/components/ellipsis/ellipsis.json

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

package/miniprogram_dist/components/ellipsis/ellipsis.scss

@@ -0,0 +1,22 @@
+.w-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+
+  &--line-clamp {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    white-space: normal;
+    word-break: break-all;
+  }
+
+  &--expanded {
+    overflow: visible;
+    text-overflow: unset;
+    white-space: normal;
+    display: block;
+    -webkit-line-clamp: unset;
+    line-clamp: unset;
+  }
+}

package/miniprogram_dist/components/ellipsis/ellipsis.wxml

@@ -0,0 +1,7 @@
+<view
+  class="w-ellipsis {{lineClamp > 1 && !_expanded ? 'w-ellipsis--line-clamp' : ''}} {{_expanded ? 'w-ellipsis--expanded' : ''}} {{expandTrigger === 'click' ? 'w-ellipsis--clickable' : ''}}"
+  style="{{_style}}"
+  bindtap="onTap"
+>
+  <slot></slot>
+</view>

package/miniprogram_dist/components/flex/flex.js

@@ -0,0 +1,81 @@
+const SIZE_MAP = {
+  small: 'var(--spacing-sm)',
+  medium: 'var(--spacing-md)',
+  large: 'var(--spacing-lg)',
+  none: '0',
+};
+
+Component({
+  properties: {
+    vertical: {
+      type: Boolean,
+      value: false,
+    },
+    align: {
+      type: String,
+      value: '', // flex-start | flex-end | center | baseline | stretch
+    },
+    justify: {
+      type: String,
+      value: 'flex-start', // flex-start | flex-end | center | space-between | space-around | space-evenly
+    },
+    size: {
+      type: null,
+      value: 'medium', // 'small' | 'medium' | 'large' | 'none' | number(rpx) | [rowGap, colGap]
+    },
+    wrap: {
+      type: Boolean,
+      value: true,
+    },
+    inline: {
+      type: Boolean,
+      value: false,
+    },
+  },
+
+  observers: {
+    'vertical, align, justify, size, wrap, inline'() {
+      this._updateStyle();
+    },
+  },
+
+  lifetimes: {
+    attached() {
+      this._updateStyle();
+    },
+  },
+
+  methods: {
+    _resolveGap(val) {
+      if (Array.isArray(val)) {
+        return [this._resolveOne(val[0]), this._resolveOne(val[1])];
+      }
+      const g = this._resolveOne(val);
+      return [g, g];
+    },
+
+    _resolveOne(val) {
+      if (typeof val === 'number') return `${val}rpx`;
+      return SIZE_MAP[val] || SIZE_MAP.medium;
+    },
+
+    _updateStyle() {
+      const { vertical, align, justify, size, wrap, inline } = this.data;
+      const [rowGap, colGap] = this._resolveGap(size);
+      const parts = [
+        `display:${inline ? 'inline-flex' : 'flex'}`,
+        `flex-direction:${vertical ? 'column' : 'row'}`,
+        `flex-wrap:${wrap ? 'wrap' : 'nowrap'}`,
+        `justify-content:${justify}`,
+        `row-gap:${rowGap}`,
+        `column-gap:${colGap}`,
+      ];
+      if (align) parts.push(`align-items:${align}`);
+      this.setData({ _style: parts.join(';') });
+    },
+  },
+
+  data: {
+    _style: '',
+  },
+});

package/miniprogram_dist/components/flex/flex.json

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

package/miniprogram_dist/components/flex/flex.scss

@@ -0,0 +1,4 @@
+.w-flex {
+  box-sizing: border-box;
+  width: 100%;
+}

package/miniprogram_dist/components/flex/flex.wxml

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

package/miniprogram_dist/components/float-button/float-button.js

@@ -0,0 +1,78 @@
+Component({
+  properties: {
+    type: {
+      type: String,
+      value: 'default', // default | primary
+    },
+    shape: {
+      type: String,
+      value: 'circle', // circle | square
+    },
+    disabled: {
+      type: Boolean,
+      value: false,
+    },
+    position: {
+      type: String,
+      value: 'bottom-right', // bottom-right | bottom-left | top-right | top-left
+    },
+    right: { type: Number, value: -1 },
+    bottom: { type: Number, value: -1 },
+    left: { type: Number, value: -1 },
+    top: { type: Number, value: -1 },
+  },
+
+  data: {
+    _style: '',
+  },
+
+  lifetimes: {
+    ready() {
+      this._computeStyle();
+    },
+  },
+
+  observers: {
+    'position, right, bottom, left, top'() {
+      this._computeStyle();
+    },
+  },
+
+  methods: {
+    _computeStyle() {
+      const pos = this.data.position;
+      const right = this.data.right;
+      const bottom = this.data.bottom;
+      const left = this.data.left;
+      const top = this.data.top;
+      const parts = ['position: fixed', 'z-index: 999'];
+
+      if (right >= 0) {
+        parts.push(`right: ${right}rpx`);
+      } else if (left >= 0) {
+        parts.push(`left: ${left}rpx`);
+      } else if (pos === 'bottom-right' || pos === 'top-right') {
+        parts.push('right: 48rpx');
+      } else {
+        parts.push('left: 48rpx');
+      }
+
+      if (top >= 0) {
+        parts.push(`top: ${top}rpx`);
+      } else if (bottom >= 0) {
+        parts.push(`bottom: ${bottom}rpx`);
+      } else if (pos === 'bottom-right' || pos === 'bottom-left') {
+        parts.push('bottom: 96rpx');
+      } else {
+        parts.push('top: 192rpx');
+      }
+
+      this.setData({ _style: parts.join('; ') });
+    },
+
+    handleTap() {
+      if (this.data.disabled) return;
+      this.triggerEvent('tap');
+    },
+  },
+});

package/miniprogram_dist/components/float-button/float-button.json

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