maxit-cli 0.1.0

package/registry/components/upload/upload.wxss

@@ -0,0 +1,354 @@
+@import '../common/style/index.wxss';
+
+.o-upload {
+    position: relative;
+}
+
+.o-upload__grid-content {
+    padding: 0;
+}
+
+.o-upload__grid-file {
+    position: relative;
+}
+
+.o-upload__add-icon {
+    width: 100%;
+    height: 100%;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--o-upload-add-icon-size,56rpx);
+    background-color: var(--o-upload-add-bg-color,var(--o-bg-color-secondarycontainer,var(--o-gray-color-1,#eeeeee)));
+    color: var(--o-upload-add-color,var(--o-text-color-placeholder,var(--o-font-gray-3,#8d8d8d)));
+    border-radius: var(--o-upload-radius,var(--o-radius-default,12rpx));
+}
+
+.o-upload__add-icon:only-child {
+    display: flex;
+}
+
+.o-upload__thumbnail {
+    width: 100%;
+    height: 100%;
+    max-height: 100%;
+    overflow: hidden;
+}
+
+.o-upload__wrapper {
+    position: relative;
+    border-radius: var(--o-upload-radius,var(--o-radius-default,12rpx));
+    overflow: hidden;
+}
+
+.o-upload__wrapper--file {
+    background-color: var(--o-upload-background,var(--o-upload-add-bg-color,var(--o-bg-color-secondarycontainer,var(--o-gray-color-1,#eeeeee))));
+}
+
+.o-upload__file-content {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: var(--o-spacer,16rpx) calc(var(--o-spacer,16rpx)/ 2);
+    box-sizing: border-box;
+}
+
+.o-upload__file-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: calc(var(--o-spacer,16rpx)/ 2);
+}
+
+.o-upload__file-name {
+    width: 100%;
+    font: var(--o-font-body-small,24rpx / 40rpx var(--o-font-family,Roboto,PingFang SC,Microsoft YaHei,Arial));
+    color: var(--o-text-color-secondary,var(--o-font-gray-2,#444748));
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-align: center;
+    padding: 0 calc(var(--o-spacer,16rpx)/ 4);
+    box-sizing: border-box;
+}
+
+.o-upload__file-type {
+    font-size: 48rpx;
+}
+
+.o-upload__file-type--media,
+.o-upload__file-type--pdf {
+    color: var(--o-error-color,var(--o-error-color-6,#cd3c14));
+}
+
+.o-upload__file-type--excel {
+    color: var(--o-success-color,var(--o-success-color-5,#028702));
+}
+
+.o-upload__file-type--word {
+    color: var(--o-brand-color,var(--o-primary-color-7,#f16e00));
+}
+
+.o-upload__file-type--ppt {
+    color: var(--o-warning-color,var(--o-warning-color-5,#e37318));
+}
+
+.o-upload__file-type--other {
+    color: var(--o-text-color-primary,var(--o-font-gray-1,#1c1b1f));
+}
+
+.o-upload__close-btn {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40rpx;
+    height: 40rpx;
+    border-top-right-radius: var(--o-upload-radius,var(--o-radius-default,12rpx));
+    border-bottom-left-radius: var(--o-upload-radius,var(--o-radius-default,12rpx));
+    background-color: var(--o-font-gray-3,#8d8d8d);
+}
+
+.o-upload__progress-mask {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var(--o-font-gray-2,#444748);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--o-upload-radius,var(--o-radius-default,12rpx));
+    color: var(--o-text-color-anti,var(--o-font-white-1,#fff));
+    padding: var(--o-spacer-2,32rpx) 0;
+    box-sizing: border-box;
+}
+
+.o-upload__progress-text {
+    font: var(--o-font-body-small,24rpx / 40rpx var(--o-font-family,Roboto,PingFang SC,Microsoft YaHei,Arial));
+    margin-top: calc(var(--o-spacer,16rpx)/ 2);
+}
+
+.o-upload__list-item-loading,
+.o-upload__progress-loading {
+    animation: spin infinite linear .6s;
+}
+
+.o-upload__drag {
+    position: relative;
+    width: 100%;
+    --o-grid-item-bg-color: transparent;
+}
+
+.o-upload__drag-item {
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    left: 0;
+    height: auto;
+    width: 100%;
+}
+
+.o-upload--list {
+    display: flex;
+    flex-direction: column;
+    row-gap: 24rpx;
+}
+
+.o-upload__list {
+    display: flex;
+    flex-direction: column;
+    row-gap: 24rpx;
+}
+
+.o-upload__list-drag {
+    position: relative;
+    width: 100%;
+}
+
+.o-upload__list-drag-item {
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    left: 0;
+    width: 100%;
+    padding-bottom: var(--o-spacer-1,24rpx);
+    box-sizing: border-box;
+}
+
+.o-upload__list-drag-item .o-upload__list-item {
+    margin: 0;
+}
+
+.o-upload__drag--fixed {
+    z-index: 0;
+}
+
+.o-upload__drag--tran {
+    transition-property: transform;
+    transition-duration: var(--o-upload-drag-transition-duration);
+    transition-timing-function: var(--o-upload-drag-transition-timing-function);
+}
+
+.o-upload__drag--cur {
+    z-index: var(--o-upload-drag-z-index,999);
+}
+
+.o-upload__list-item {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    column-gap: 24rpx;
+    padding: var(--o-spacer,16rpx) var(--o-spacer-1,24rpx);
+    background: var(--o-upload-background,var(--o-upload-add-bg-color,var(--o-bg-color-secondarycontainer,var(--o-gray-color-1,#eeeeee))));
+    border-radius: var(--o-upload-radius,var(--o-radius-default,12rpx));
+    box-sizing: border-box;
+}
+
+.o-upload__list-item-loading {
+    flex-shrink: 0;
+    font-size: 48rpx;
+    color: var(--o-brand-color,var(--o-primary-color-7,#f16e00));
+}
+
+.o-upload__list-item-error-icon {
+    flex-shrink: 0;
+    font-size: 48rpx;
+    color: var(--o-error-color,var(--o-error-color-6,#cd3c14));
+}
+
+.o-upload__list-item-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+
+.o-upload__list-item-thumbnail {
+    flex-shrink: 0;
+    width: 48rpx;
+    height: 48rpx;
+    border-radius: var(--o-radius-small,6rpx);
+    overflow: hidden;
+}
+
+.o-upload__list-item-content {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.o-upload__list-item-name {
+    font: var(--o-font-body-medium,28rpx / 44rpx var(--o-font-family,Roboto,PingFang SC,Microsoft YaHei,Arial));
+    color: var(--o-text-color-primary,var(--o-font-gray-1,#1c1b1f));
+}
+
+.o-upload__list-item-size {
+    font: var(--o-font-body-small,24rpx / 40rpx var(--o-font-family,Roboto,PingFang SC,Microsoft YaHei,Arial));
+    color: var(--o-text-color-placeholder,var(--o-font-gray-3,#8d8d8d));
+}
+
+.o-upload__list-item-name,
+.o-upload__list-item-size {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.o-upload__list-item-action {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    column-gap: 8rpx;
+}
+
+.o-upload__list-item-delete {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--o-font-size-l,36rpx);
+    color: var(--o-text-color-placeholder,var(--o-font-gray-3,#8d8d8d));
+}
+
+.o-upload__list-item--progress .o-upload__list-item-name,
+.o-upload__list-item--progress .o-upload__list-item-size {
+    color: var(--o-text-color-placeholder,var(--o-font-gray-3,#8d8d8d));
+}
+
+.o-upload__list-item--fail .o-upload__list-item-name {
+    color: var(--o-error-color,var(--o-error-color-6,#cd3c14));
+}
+
+.o-upload__disabled-mask {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var(--o-upload-disabled-mask,var(--o-mask-disabled,rgba(255,255,255,.6)));
+}
+
+.o-upload--disabled {
+    pointer-events: none;
+}
+
+.o-upload--disabled .o-upload__add-icon,
+.o-upload--disabled .o-upload__file-name,
+.o-upload--disabled .o-upload__list-item-name,
+.o-upload--disabled .o-upload__list-item-size {
+    color: var(--o-text-color-disabled,var(--o-font-gray-4,rgba(0,0,0,.26)));
+}
+
+.o-upload--disabled .o-upload__file-type--media,
+.o-upload--disabled .o-upload__file-type--pdf {
+    color: var(--o-error-color-disabled,var(--o-error-color-3,#ffb9b0));
+}
+
+.o-upload--disabled .o-upload__file-type--excel {
+    color: var(--o-success-color-disabled,var(--o-success-color-3,#92dab2));
+}
+
+.o-upload--disabled .o-upload__file-type--word {
+    color: var(--o-brand-color-disabled,var(--o-primary-color-3,#f9c599));
+}
+
+.o-upload--disabled .o-upload__file-type--ppt {
+    color: var(--o-warning-color-disabled,var(--o-warning-color-3,#ffb98c));
+}
+
+.o-upload--disabled .o-upload__file-type--other {
+    color: var(--o-text-color-disabled,var(--o-font-gray-4,rgba(0,0,0,.26)));
+}
+
+.o-upload--disabled .o-upload__close-btn,
+.o-upload--disabled .o-upload__list-item-action {
+    display: none;
+}
+
+.o-upload--disabled .o-upload__list-item-loading {
+    color: var(--o-brand-color-disabled,var(--o-primary-color-3,#f9c599));
+}
+
+.o-upload--disabled .o-upload__list-item-error-icon {
+    color: var(--o-error-color-disabled,var(--o-error-color-3,#ffb9b0));
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+

package/registry/components/wheel-select/index.js

@@ -0,0 +1,2 @@
+export * from './props';
+export * from './wheel-select';

package/registry/components/wheel-select/props.js

@@ -0,0 +1,8 @@
+// o-wheel-select: Wheel selection (Figma "Cupertino time picker"): three visible rows, the middle one selected in blue.
+const props = {
+  // [{ label, value }] e.g. { label: 'Lun. 01 janv. 2024', value: '08:00' }
+  options: { type: Array, value: [] },
+  // Selected index
+  value: { type: Number, value: 0 },
+};
+export default props;

package/registry/components/wheel-select/wheel-select.js

@@ -0,0 +1,38 @@
+import { __decorate } from '../common/tslib';
+import { SuperComponent, wxComponent } from '../common/src/index';
+import config from '../common/config';
+import props from './props';
+
+const { prefix } = config;
+const name = `${prefix}-wheel-select`;
+
+// Derived data, recomputed when a property changes and once when attached
+// (the runtime may skip observers for initial property values).
+const observers = {
+  value(index) { this.setData({ _index: index || 0 }); },
+};
+
+let WheelSelect = class WheelSelect extends SuperComponent {
+  constructor() {
+    super(...arguments);
+    this.externalClasses = [`${prefix}-class`];
+    this.options = { multipleSlots: true };
+    this.properties = props;
+    this.data = { prefix, classPrefix: name, _index: 0 };
+    this.observers = observers;
+    this.lifetimes = {
+      attached() {
+        Object.keys(observers).forEach((key) => observers[key].call(this, this.properties[key]));
+      },
+    };
+    this.methods = {
+      onChange(e) {
+        const index = e.detail.value[0];
+        this.setData({ _index: index });
+        this.triggerEvent('change', { value: index, option: this.properties.options[index] });
+      },
+    };
+  }
+};
+WheelSelect = __decorate([wxComponent()], WheelSelect);
+export default WheelSelect;

package/registry/components/wheel-select/wheel-select.json

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

package/registry/components/wheel-select/wheel-select.wxml

@@ -0,0 +1,9 @@
+<view class="o-surface o-surface--outlined o-wheel-select class {{prefix}}-class" style="{{style}} {{customStyle}}">
+  <picker-view class="o-wheel-select__view" value="{{[_index]}}" indicator-style="height:88rpx;border-top:1px solid #ddd;border-bottom:1px solid #ddd" bindchange="onChange">
+    <picker-view-column>
+      <view wx:for="{{options}}" wx:key="index" class="o-wheel-select__row {{index === _index ? 'o-wheel-select__row--active' : ''}}">
+        <text>{{item.label}}</text><text>{{item.value}}</text>
+      </view>
+    </picker-view-column>
+  </picker-view>
+</view>

package/registry/components/wheel-select/wheel-select.wxss

@@ -0,0 +1,22 @@
+@import '../common/style/index.wxss';
+@import '../common/style/card.wxss';
+
+/* Wheel selection (Figma "Cupertino time picker"): three visible rows, the middle one selected in blue. */
+.o-wheel-select__view {
+    height: 264rpx;
+}
+
+.o-wheel-select__row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 88rpx;
+    padding: 0 32rpx;
+    font: var(--o-type-body-small, 400 24rpx / 32rpx var(--o-font-family, Roboto, Arial));
+    color: var(--o-scheme-on-surface-variant, #444748);
+}
+
+.o-wheel-select__row--active {
+    font: var(--o-type-title-small, 500 28rpx / 40rpx var(--o-font-family, Roboto, Arial));
+    color: var(--o-scheme-tertiary, #085ebd);
+}