wx-mini-weview/components/unroll/unroll.js

weixin UI

const { WvInheritable } = require('../../behaviors/WvInheritable');
const { WvComponentEvent } = require('../../behaviors/WvComponentEvent');

Component({
  options: {
    styleIsolation: 'apply-shared',
    multipleSlots: true
  },
  
  relations: {
    '../unroll-item/unroll-item': {
      type: 'child',
      linked(target) {
        this.linkChildNode('unrollItems', target);
      },
      unlinked(target) {
        this.unlinkChildNode('unrollItems', target);
      }
    }
  },

  behaviors: [
    WvComponentEvent,
    WvInheritable({
      properties: {}, 
      childrenProperties: {
        unrollItems: {}  // No need for complex properties inheritance
      }
    })
  ],

  properties: {
    // Direction the items will unfold toward
    direction: {
      type: String,
      value: 'to-right', // to-left, to-right, to-top, to-bottom
    },
    // Whether items are expanded by default
    expanded: {
      type: Boolean,
      value: false
    },
    // Space between handler and items
    gap: {
      type: String,
      value: 'var(--wv-margin-default)'
    },
    // Space between items 
    itemGap: {
      type: String,
      value: 'var(--wv-margin-mini)'
    },
    // Animation duration
    animationDuration: {
      type: String,
      value: '300ms'
    },
    // Width of the unroll container
    width: {
      type: String,
      value: '100%'
    },
    // Height of the unroll container
    height: {
      type: String,
      value: ''
    }
  },

  data: {
    isExpanded: false
  },

  lifetimes: {
    attached() {
      // Initialize with property values
      this.setData({
        isExpanded: this.data.expanded
      });
    }
  },

  observers: {
    'expanded': function(expanded) {
      this.setData({ 
        isExpanded: expanded
      });
    }
  },

  methods: {
    toggleExpand() {
      const newExpandState = !this.data.isExpanded;
      
      this.setData({
        isExpanded: newExpandState
      });
      
      // Trigger event to notify state change
      this.triggerEvent('change', { expanded: newExpandState });
    }
  }
});