luna-mobile-weapp 0.0.1

package/miniprogram_dist/divider/index.js

@@ -0,0 +1,22 @@
+const { createReactiveProxy, batchSetData } = require('../common/runtime');
+
+Component({
+  properties: {
+    direction: {
+      type: String,
+      value: 'horizontal',
+    },
+    contentPosition: {
+      type: String,
+      value: 'center',
+    },
+    dashed: {
+      type: Boolean,
+      value: false,
+    },
+    children: {
+      type: null,
+    },
+  },
+
+});

package/miniprogram_dist/divider/index.json

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

package/miniprogram_dist/divider/index.wxml

@@ -0,0 +1,13 @@
+<block wx:if="{{direction === 'vertical'}}">
+  <text class="ln-divider ln-divider--vertical" class="{{dashed? 'is-dashed' : ''}}">
+  </text>
+</block>
+<block wx:else>
+  <view class="ln-divider ln-divider--horizontal ln-divider--{contentPosition}" class="{{dashed? 'is-dashed' : ''}}" class="{{!!children? 'is-with-text' : ''}}">
+    <block wx:if="{{children}}">
+      <text class="ln-divider__text">
+        <slot />
+      </text>
+{{/if}}    </block>
+  </view>
+</block>

package/miniprogram_dist/divider/index.wxss

@@ -0,0 +1 @@
+.ln-divider--horizontal{display:flex;align-items:center;width:100%;margin:32rpx 0;border:none}.ln-divider--horizontal::before,.ln-divider--horizontal::after{content:"";flex:1;height:1px;border:none;background-color:#e4e7ed}.ln-divider--horizontal.is-dashed::before,.ln-divider--horizontal.is-dashed::after{background-color:rgba(0,0,0,0);background-image:repeating-linear-gradient(to right, #e4e7ed 0 12rpx, transparent 12rpx 24rpx)}.ln-divider--horizontal.is-with-text::before{margin-right:24rpx}.ln-divider--horizontal.is-with-text::after{margin-left:24rpx}.ln-divider--left::before{flex:0 0 5%}.ln-divider--right::after{flex:0 0 5%}.ln-divider--vertical{display:inline-flex;align-items:stretch;width:0;height:1em;margin:0 16rpx;vertical-align:middle}.ln-divider--vertical::before{content:"";width:1px;border:none;background-color:#e4e7ed}.ln-divider--vertical.is-dashed::before{background-color:rgba(0,0,0,0);background-image:repeating-linear-gradient(to bottom, #e4e7ed 0 12rpx, transparent 12rpx 24rpx)}.ln-divider__text{font-size:26rpx;color:#909399;white-space:nowrap}.dark .ln-divider.ln-divider--horizontal::before,.dark .ln-divider.ln-divider--horizontal::after{background-color:hsla(0,0%,100%,.08);background-image:none}.dark .ln-divider.ln-divider--horizontal.is-dashed::before,.dark .ln-divider.ln-divider--horizontal.is-dashed::after{background-color:rgba(0,0,0,0);background-image:repeating-linear-gradient(to right, rgba(255, 255, 255, 0.08) 0 12rpx, transparent 12rpx 24rpx)}.dark .ln-divider.ln-divider--vertical::before{background-color:hsla(0,0%,100%,.08);background-image:none}.dark .ln-divider.ln-divider--vertical.is-dashed::before{background-color:rgba(0,0,0,0);background-image:repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.08) 0 12rpx, transparent 12rpx 24rpx)}.dark .ln-divider .ln-divider__text{color:#a3a6ad}

package/miniprogram_dist/drop-down-menu/index.js

@@ -0,0 +1,33 @@
+// import from 'svelte'
+const { createReactiveProxy, batchSetData } = require('../common/runtime');
+
+Component({
+  properties: {
+    items: {
+      type: Array,
+      value: [],
+    },
+    onchange: {
+      type: null,
+    },
+  },
+
+  data: {
+    activeIndex: -1,
+    leaving: false,
+    mounted: false,
+  },
+
+  methods: {
+    __handler_click(e) {
+      (() => toggle(i)).call(this, e);
+    },
+    onAnimEnd(e) {
+      // 用户定义的处理函数
+    },
+    __handler_click(e) {
+      (() => select(activeIndex, opt.value)).call(this, e);
+    },
+  },
+
+});

package/miniprogram_dist/drop-down-menu/index.json

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

package/miniprogram_dist/drop-down-menu/index.wxml

@@ -0,0 +1,19 @@
+<view class="ln-dropdown-menu" this="{{rootEl}}" bindchange="__bind_rootEl">
+  <view class="ln-dropdown-menu__bar">
+    <block wx:for="{{items}}" wx:for-item="item" wx:for-index="i">
+      <button type="button" class="ln-dropdown-menu__title" class="{{activeIndex === i? 'is-active' : ''}}" bindtap="__handler_1">
+{{item.options.find(o => o.value === item.value)?.text ?? item.title}}        <text class="ln-dropdown-menu__arrow" class="{{activeIndex === i? 'is-up' : ''}}">
+          <icon icon="{{ChevronDown}}" size="{{14}}" />
+        </text>
+      </button>
+    </block>
+  </view>
+  <block wx:if="{{mounted && activeIndex >= 0}}">
+    <view class="ln-dropdown-menu__popup" class="{{!leaving? 'ln-dd--enter' : ''}}" class="{{leaving? 'ln-dd--leave' : ''}}" bindanimationend="onAnimEnd">
+      <block wx:for="{{items[activeIndex].options}}" wx:for-item="opt">
+        <button class="ln-dropdown-menu__option" class="{{opt.value === items[activeIndex].value? 'is-selected' : ''}}" bindtap="__handler_2">
+{{opt.text}}        </button>
+      </block>
+    </view>
+{{/if}}  </block>
+</view>

package/miniprogram_dist/drop-down-menu/index.wxss

@@ -0,0 +1 @@
+.ln-dropdown-menu{position:relative}.ln-dropdown-menu__bar{display:flex;align-items:center;justify-content:space-between;padding:16rpx 32rpx;background-color:#fff;border-bottom:1px solid #e4e7ed}.ln-dropdown-menu__title{border:none;background:none;font-size:28rpx;color:#303133;cursor:pointer}.ln-dropdown-menu__title.is-active{color:#0062ff}.ln-dropdown-menu__arrow{display:inline-flex;align-items:center;transition:transform .2s}.ln-dropdown-menu__arrow.is-up{transform:rotate(180deg)}.ln-dropdown-menu__popup{position:absolute;left:0;right:0;top:100%;background-color:#fff;z-index:1000;box-shadow:0 8rpx 24rpx rgba(0,0,0,.08);transform-origin:top center;overflow:hidden}.ln-dropdown-menu__popup.ln-dd--enter{animation:ln-dd-in .2s ease-out both}.ln-dropdown-menu__popup.ln-dd--leave{animation:ln-dd-out .2s ease-in both}.ln-dropdown-menu__option{display:flex;align-items:center;width:100%;padding:24rpx 32rpx;border:none;background:none;font-size:28rpx;color:#303133;cursor:pointer;text-align:left}.ln-dropdown-menu__option.is-selected{color:#0062ff;font-weight:500}.ln-dropdown-menu__option:active{background-color:#f5f7fa}.dark .ln-dropdown-menu .ln-dropdown-menu__bar{background-color:#1d1e1f;border-color:hsla(0,0%,100%,.08)}.dark .ln-dropdown-menu .ln-dropdown-menu__title{color:#e5eaf3}.dark .ln-dropdown-menu .ln-dropdown-menu__popup{background-color:#1d1e1f}.dark .ln-dropdown-menu .ln-dropdown-menu__option{color:#e5eaf3}.dark .ln-dropdown-menu .ln-dropdown-menu__option:active{background-color:#363637}.dark .ln-dropdown-menu .ln-dropdown-menu__option.is-selected{color:#0062ff}@keyframes ln-dd-in{from{opacity:0;transform:scaleY(0.8)}to{opacity:1;transform:scaleY(1)}}@keyframes ln-dd-out{from{opacity:1;transform:scaleY(1)}to{opacity:0;transform:scaleY(0.8)}}

package/miniprogram_dist/empty/index.js

@@ -0,0 +1,21 @@
+const { createReactiveProxy, batchSetData } = require('../common/runtime');
+
+Component({
+  properties: {
+    description: {
+      type: String,
+      value: '暂无数据',
+    },
+    image: {
+      type: String,
+      value: 'default',
+    },
+    children: {
+      type: null,
+    },
+    action: {
+      type: null,
+    },
+  },
+
+});

package/miniprogram_dist/empty/index.json

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

package/miniprogram_dist/empty/index.wxml

@@ -0,0 +1,17 @@
+<view class="ln-empty">
+  <view class="ln-empty__image">
+    <icon icon="{{iconMap[image]}}" size="{{64}}" color="#c0c4cc" strokeWidth="{{1}}" />
+  </view>
+  <view class="ln-empty__description">
+    <block wx:if="{{children}}">
+      <slot />
+    </block>
+    <block wx:else>
+{{description}}    </block>
+  </view>
+  <block wx:if="{{action}}">
+    <view class="ln-empty__action">
+      <slot name="action" />
+    </view>
+{{/if}}  </block>
+</view>

package/miniprogram_dist/empty/index.wxss

@@ -0,0 +1 @@
+.ln-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:64rpx 0}.ln-empty__image{display:flex;align-items:center;justify-content:center;margin-bottom:32rpx;color:#a8abb2}.ln-empty__description{font-size:28rpx;color:#909399;text-align:center;padding:0 32rpx}.ln-empty__action{margin-top:32rpx}.dark .ln-empty .ln-empty__image{color:#6b6f76}.dark .ln-empty .ln-empty__description{color:#a3a6ad}

package/miniprogram_dist/fixed-view/index.js

@@ -0,0 +1,36 @@
+const { createReactiveProxy, batchSetData } = require('../common/runtime');
+
+Component({
+  properties: {
+    position: {
+      type: String,
+      value: 'bottom',
+    },
+    zIndex: {
+      type: Number,
+      value: 200,
+    },
+    placeholder: {
+      type: Boolean,
+      value: true,
+    },
+    children: {
+      type: null,
+    },
+  },
+
+  data: {
+    height: 0,
+  },
+
+  lifetimes: {
+    attached() {
+      const self = this;
+      // $effect #1
+      if (el && placeholder) {
+height = el.offsetHeight;
+};
+    },
+  },
+
+});

package/miniprogram_dist/fixed-view/index.json

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

package/miniprogram_dist/fixed-view/index.wxml

@@ -0,0 +1,9 @@
+<block wx:if="{{placeholder}}">
+  <view class="ln-fixed-view__placeholder" style="height:{height}px">
+  </view>
+{{/if}}  <view class="ln-fixed-view ln-fixed-view--{position}" style="z-index:{zIndex}" this="{{el}}" bindchange="__bind_el">
+    <block wx:if="{{children}}">
+      <slot />
+{{/if}}    </block>
+  </view>
+</block>

package/miniprogram_dist/fixed-view/index.wxss

@@ -0,0 +1 @@
+.ln-fixed-view{position:fixed;left:0;right:0}.ln-fixed-view--top{top:0}.ln-fixed-view--bottom{bottom:0;padding-bottom:env(safe-area-inset-bottom)}.ln-fixed-view__placeholder{flex-shrink:0}.dark .ln-fixed-view{background-color:#1d1e1f}

package/miniprogram_dist/flex/index.js

@@ -0,0 +1,31 @@
+const { createReactiveProxy, batchSetData } = require('../common/runtime');
+
+Component({
+  properties: {
+    direction: {
+      type: String,
+      value: 'row',
+    },
+    wrap: {
+      type: Boolean,
+      value: false,
+    },
+    justify: {
+      type: null,
+    },
+    align: {
+      type: null,
+    },
+    gap: {
+      type: null,
+    },
+    class: className: {
+      type: null,
+      value: '',
+    },
+    children: {
+      type: null,
+    },
+  },
+
+});

package/miniprogram_dist/flex/index.json

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

package/miniprogram_dist/flex/index.wxml

@@ -0,0 +1,5 @@
+<view class="ln-flex ln-flex--{direction} {className}" class="{{wrap? 'ln-flex--wrap' : ''}}" class="{{justify === 'center'? 'is-center' : ''}}" class="{{justify === 'between'? 'is-between' : ''}}" class="{{justify === 'around'? 'is-around' : ''}}" class="{{justify === 'evenly'? 'is-evenly' : ''}}" class="{{justify === 'start'? 'is-start' : ''}}" class="{{justify === 'end'? 'is-end' : ''}}" class="{{align === 'start'? 'is-align-start' : ''}}" class="{{align === 'end'? 'is-align-end' : ''}}" class="{{align === 'center'? 'is-align-center' : ''}}" style="gap: {{gap}}">
+  <block wx:if="{{children}}">
+    <slot />
+{{/if}}  </block>
+</view>

package/miniprogram_dist/flex/index.wxss

@@ -0,0 +1 @@
+.ln-flex{display:flex}.ln-flex--column{flex-direction:column}.ln-flex--row{flex-direction:row}.ln-flex--wrap{flex-wrap:wrap}.ln-flex.is-center{align-items:center;justify-content:center}.ln-flex.is-between{justify-content:space-between}.ln-flex.is-around{justify-content:space-around}.ln-flex.is-evenly{justify-content:space-evenly}.ln-flex.is-start{justify-content:flex-start}.ln-flex.is-end{justify-content:flex-end}.ln-flex.is-align-start{align-items:flex-start}.ln-flex.is-align-end{align-items:flex-end}.ln-flex.is-align-center{align-items:center}.ln-flex__item{flex:1}

package/miniprogram_dist/float-button/index.js

@@ -0,0 +1,35 @@
+const { createReactiveProxy, batchSetData } = require('../common/runtime');
+
+Component({
+  properties: {
+    icon: {
+      type: null,
+      value: Plus,
+    },
+    right: {
+      type: Number,
+      value: 16,
+    },
+    bottom: {
+      type: Number,
+      value: 80,
+    },
+    type: {
+      type: String,
+      value: 'primary',
+    },
+    onclick: {
+      type: null,
+    },
+    children: {
+      type: null,
+    },
+  },
+
+  methods: {
+    onclick(e) {
+      // 用户定义的处理函数
+    },
+  },
+
+});

package/miniprogram_dist/float-button/index.json

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

package/miniprogram_dist/float-button/index.wxml

@@ -0,0 +1,8 @@
+<button class="ln-float-button ln-float-button--{type}" style="right:{right}px;bottom:{bottom}px" type="button" aria-label="浮动按钮" bindtap="onclick">
+  <block wx:if="{{children}}">
+    <slot />
+  </block>
+  <block wx:else>
+    <icon icon="{{icon}}" size="{{22}}" />
+  </block>
+</button>

package/miniprogram_dist/float-button/index.wxss

@@ -0,0 +1 @@
+.ln-float-button{position:fixed;display:flex;align-items:center;justify-content:center;width:96rpx;height:96rpx;border-radius:50%;border:none;cursor:pointer;z-index:200;padding:0;box-shadow:0 4rpx 8rpx rgba(0,0,0,.12),0 0 12rpx rgba(0,0,0,.04);transition:transform .2s}.ln-float-button:active{transform:scale(0.92)}.ln-float-button--primary{background-color:#0062ff;color:#fff}.ln-float-button--default{background-color:#fff;color:#303133;border:1px solid #e4e7ed}.dark .ln-float-button.ln-float-button--primary{background-color:#0062ff}.dark .ln-float-button.ln-float-button--default{background-color:#2c2d2e;border-color:hsla(0,0%,100%,.08);color:#e5eaf3}

package/miniprogram_dist/footer/index.js

@@ -0,0 +1,17 @@
+const { createReactiveProxy, batchSetData } = require('../common/runtime');
+
+Component({
+  properties: {
+    height: {
+      type: null,
+    },
+    class: className: {
+      type: null,
+      value: '',
+    },
+    children: {
+      type: null,
+    },
+  },
+
+});

package/miniprogram_dist/footer/index.json

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

package/miniprogram_dist/footer/index.wxml

@@ -0,0 +1,5 @@
+<view class="ln-footer {className}" style="height: {{height}}">
+  <block wx:if="{{children}}">
+    <slot />
+{{/if}}  </block>
+</view>

package/miniprogram_dist/footer/index.wxss

@@ -0,0 +1 @@
+.ln-container{display:flex;flex-direction:column;box-sizing:border-box;min-height:100vh;min-height:100dvh;max-width:1500rpx;margin:0 auto;font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;transition:background-color .3s,color .3s}.dark .ln-container{background-color:#141415;color:#e5eaf3}.ln-header{position:fixed;top:0;left:0;right:0;max-width:1500rpx;margin:0 auto;flex-shrink:0;z-index:100;background-color:#fff;will-change:transform;transform:translateZ(0)}.dark .ln-header{background-color:#1d1e1f}.ln-main{display:block;flex:1;box-sizing:border-box;min-width:0;overflow-x:clip;padding:32rpx;padding-top:120rpx;background-color:#f2f3f5}.dark .ln-main{background-color:#141415}.ln-main--slide-right{animation:ln-slide-right 300ms ease both}.ln-main--slide-left{animation:ln-slide-left 300ms ease both}@keyframes ln-slide-right{from{transform:translateX(120rpx)}to{transform:translateX(0)}}@keyframes ln-slide-left{from{transform:translateX(-120rpx)}to{transform:translateX(0)}}.ln-footer{display:flex;align-items:center;box-sizing:border-box;flex-shrink:0;height:100rpx;padding:0 32rpx;background-color:#fff;border-top:.10rpx solid #e4e7ed}.dark .ln-footer{background-color:#1d1e1f;border-top-color:hsla(0,0%,100%,.08);color:#e5eaf3}.ln-aside{display:flex;flex-direction:column;box-sizing:border-box;flex-shrink:0;width:var(--ln-aside-width, 400rpx);overflow:hidden;background-color:#fff;border-right:.10rpx solid #e4e7ed}.dark .ln-aside{background-color:#1d1e1f;border-right-color:hsla(0,0%,100%,.08);color:#e5eaf3}

package/miniprogram_dist/form/index.js

@@ -0,0 +1,41 @@
+const { createReactiveProxy, batchSetData } = require('../common/runtime');
+
+Component({
+  properties: {
+    model: {
+      type: Object,
+      value: {},
+    },
+    rules: {
+      type: Object,
+      value: {},
+    },
+    labelWidth: {
+      type: String,
+      value: '80px',
+    },
+    disabled: {
+      type: Boolean,
+      value: false,
+    },
+    onregister: {
+      type: null,
+    },
+    children: {
+      type: null,
+    },
+  },
+
+  data: {
+    errors: undefined,
+  },
+
+  lifetimes: {
+    attached() {
+      const self = this;
+      // $effect #1
+      onregister?.({ validate, resetErrors, getErrors });;
+    },
+  },
+
+});

package/miniprogram_dist/form/index.json

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

package/miniprogram_dist/form/index.wxml

@@ -0,0 +1,5 @@
+<view class="ln-form" class="{{disabled? 'is-disabled' : ''}}">
+  <block wx:if="{{children}}">
+    <slot />
+{{/if}}  </block>
+</view>

package/miniprogram_dist/form/index.wxss

@@ -0,0 +1 @@
+.ln-form.is-disabled{opacity:.6;pointer-events:none}.ln-form-item{display:flex;align-items:flex-start;padding:24rpx 0}.ln-form-item__label{flex-shrink:0;font-size:28rpx;color:#303133;line-height:80rpx;padding-right:16rpx}.ln-form-item__asterisk{color:#fc5a5a;margin-right:4rpx}.ln-form-item__content{flex:1;min-width:0}.ln-form-item__error{font-size:24rpx;color:#fc5a5a;margin-top:8rpx;line-height:1.2}.ln-form-item.is-error .ln-input{border-color:#fc5a5a}.dark .ln-form-item .ln-form-item__label{color:#e5eaf3}

package/miniprogram_dist/form-item/index.js

@@ -0,0 +1,30 @@
+const { createReactiveProxy, batchSetData } = require('../common/runtime');
+
+Component({
+  properties: {
+    label: {
+      type: String,
+      value: '',
+    },
+    prop: {
+      type: String,
+      value: '',
+    },
+    required: {
+      type: Boolean,
+      value: false,
+    },
+    error: {
+      type: String,
+      value: '',
+    },
+    labelWidth: {
+      type: String,
+      value: '80px',
+    },
+    children: {
+      type: null,
+    },
+  },
+
+});

package/miniprogram_dist/form-item/index.json

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

package/miniprogram_dist/form-item/index.wxml

@@ -0,0 +1,20 @@
+<view class="ln-form-item" class="{{!!error? 'is-error' : ''}}" class="{{required? 'is-required' : ''}}">
+  <block wx:if="{{label}}">
+<!--  svelte-ignore a11y_label_has_associated_control  -->
+    <text class="ln-form-item__label" style="width: {{labelWidth}}">
+      <block wx:if="{{required}}">
+        <text class="ln-form-item__asterisk">
+*        </text>
+{{/if}}{{label}}      </block>
+    </text>
+{{/if}}    <view class="ln-form-item__content">
+      <block wx:if="{{children}}">
+        <slot />
+{{/if}}        <block wx:if="{{error}}">
+          <view class="ln-form-item__error">
+{{error}}          </view>
+{{/if}}        </block>
+      </block>
+    </view>
+  </block>
+</view>

package/miniprogram_dist/form-item/index.wxss

@@ -0,0 +1 @@
+.ln-form.is-disabled{opacity:.6;pointer-events:none}.ln-form-item{display:flex;align-items:flex-start;padding:24rpx 0}.ln-form-item__label{flex-shrink:0;font-size:28rpx;color:#303133;line-height:80rpx;padding-right:16rpx}.ln-form-item__asterisk{color:#fc5a5a;margin-right:4rpx}.ln-form-item__content{flex:1;min-width:0}.ln-form-item__error{font-size:24rpx;color:#fc5a5a;margin-top:8rpx;line-height:1.2}.ln-form-item.is-error .ln-input{border-color:#fc5a5a}.dark .ln-form-item .ln-form-item__label{color:#e5eaf3}

package/miniprogram_dist/grid/index.js

@@ -0,0 +1,22 @@
+const { createReactiveProxy, batchSetData } = require('../common/runtime');
+
+Component({
+  properties: {
+    columns: {
+      type: Number,
+      value: 4,
+    },
+    square: {
+      type: Boolean,
+      value: false,
+    },
+    gutter: {
+      type: Number,
+      value: 0,
+    },
+    children: {
+      type: null,
+    },
+  },
+
+});

package/miniprogram_dist/grid/index.json

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

package/miniprogram_dist/grid/index.wxml

@@ -0,0 +1,5 @@
+<view class="ln-grid" style="--grid-columns:{columns};--grid-gutter:{gutter}px" class="{{square? 'is-square' : ''}}" class="{{gutter > 0? 'is-gutter' : ''}}">
+  <block wx:if="{{children}}">
+    <slot />
+{{/if}}  </block>
+</view>

package/miniprogram_dist/grid/index.wxss

@@ -0,0 +1 @@
+.ln-grid{display:grid;grid-template-columns:repeat(var(--grid-columns, 4), 1fr);gap:var(--grid-gutter, 0rpx);background-color:#fff;border-radius:16rpx;margin:24rpx 32rpx;overflow:hidden}.ln-grid.is-gutter{background-color:rgba(0,0,0,0);border-radius:0}.ln-grid.is-gutter .ln-grid-item__content{background-color:#fff;border-radius:16rpx}.ln-grid.is-square .ln-grid-item__content{padding:0;aspect-ratio:1}.dark .ln-grid{background-color:#1d1e1f}.dark .ln-grid.is-gutter{background-color:rgba(0,0,0,0)}.dark .ln-grid.is-gutter .ln-grid-item__content{background-color:#1d1e1f}.ln-grid-item.is-hover .ln-grid-item__content{background-color:#f5f7fa}.ln-grid-item__content{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32rpx 16rpx}.ln-grid-item__inner{display:flex;flex-direction:column;align-items:center;justify-content:center}.ln-grid-item.is-clickable{cursor:pointer}.ln-grid-item__icon{display:flex;align-items:center;justify-content:center;margin-bottom:16rpx;color:#303133}.ln-grid-item__text{font-size:24rpx;color:#909399}.dark .ln-grid-item .ln-grid-item__icon{color:#e5eaf3}.dark .ln-grid-item .ln-grid-item__text{color:#a3a6ad}

package/miniprogram_dist/grid-item/index.js

@@ -0,0 +1,41 @@
+const { createReactiveProxy, batchSetData } = require('../common/runtime');
+
+Component({
+  properties: {
+    text: {
+      type: String,
+      value: '',
+    },
+    icon: {
+      type: null,
+    },
+    iconSize: {
+      type: Number,
+      value: 24,
+    },
+    iconColor: {
+      type: String,
+      value: '',
+    },
+    clickable: {
+      type: Boolean,
+      value: false,
+    },
+    onclick: {
+      type: null,
+    },
+    children: {
+      type: null,
+    },
+  },
+
+  methods: {
+    clickable ? onclick : undefined(e) {
+      // 用户定义的处理函数
+    },
+    __handler_keydown(e) {
+      (clickable ? (e: KeyboardEvent) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onclick?.(); } } : undefined).call(this, e);
+    },
+  },
+
+});

package/miniprogram_dist/grid-item/index.json

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

package/miniprogram_dist/grid-item/index.wxml

@@ -0,0 +1,21 @@
+<!--  svelte-ignore a11y_no_noninteractive_tabindex  -->
+<view class="ln-grid-item" role="{{clickable ? 'button' : undefined}}" tabindex="{{clickable ? 0 : undefined}}" class="{{clickable? 'is-clickable' : ''}}" bindtap="clickable ? onclick : undefined" bindkeydown="__handler_1">
+  <view class="ln-grid-item__content">
+    <view class="ln-grid-item__inner">
+      <block wx:if="{{children}}">
+        <slot />
+      </block>
+      <block wx:else>
+        <block wx:if="{{icon}}">
+          <view class="ln-grid-item__icon">
+            <icon icon="{{icon}}" size="{{iconSize}}" color="{{iconColor || 'currentColor'}}" />
+          </view>
+{{/if}}          <block wx:if="{{text}}">
+            <text class="ln-grid-item__text">
+{{text}}            </text>
+{{/if}}{{/if}}          </block>
+        </block>
+      </block>
+    </view>
+  </view>
+</view>

package/miniprogram_dist/grid-item/index.wxss

@@ -0,0 +1 @@
+.ln-grid{display:grid;grid-template-columns:repeat(var(--grid-columns, 4), 1fr);gap:var(--grid-gutter, 0rpx);background-color:#fff;border-radius:16rpx;margin:24rpx 32rpx;overflow:hidden}.ln-grid.is-gutter{background-color:rgba(0,0,0,0);border-radius:0}.ln-grid.is-gutter .ln-grid-item__content{background-color:#fff;border-radius:16rpx}.ln-grid.is-square .ln-grid-item__content{padding:0;aspect-ratio:1}.dark .ln-grid{background-color:#1d1e1f}.dark .ln-grid.is-gutter{background-color:rgba(0,0,0,0)}.dark .ln-grid.is-gutter .ln-grid-item__content{background-color:#1d1e1f}.ln-grid-item.is-hover .ln-grid-item__content{background-color:#f5f7fa}.ln-grid-item__content{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32rpx 16rpx}.ln-grid-item__inner{display:flex;flex-direction:column;align-items:center;justify-content:center}.ln-grid-item.is-clickable{cursor:pointer}.ln-grid-item__icon{display:flex;align-items:center;justify-content:center;margin-bottom:16rpx;color:#303133}.ln-grid-item__text{font-size:24rpx;color:#909399}.dark .ln-grid-item .ln-grid-item__icon{color:#e5eaf3}.dark .ln-grid-item .ln-grid-item__text{color:#a3a6ad}