@atooyu/uxto-ui 1.0.0

package/src/components/u-button/u-button.vue

@@ -0,0 +1,239 @@
+<template>
+  <button
+    class="u-button"
+    :class="[
+      `u-button--${type}`,
+      `u-button--${size}`,
+      {
+        'u-button--plain': plain,
+        'u-button--round': round,
+        'u-button--square': square,
+        'u-button--disabled': disabled,
+        'u-button--loading': loading,
+        'u-button--block': block
+      }
+    ]"
+    :style="buttonStyle"
+    :disabled="disabled || loading"
+    :hover-class="disabled || loading ? '' : 'u-button--active'"
+    @click="handleClick"
+  >
+    <view v-if="loading" class="u-button__loading">
+      <view class="u-button__loading-icon"></view>
+    </view>
+    <view v-else class="u-button__content">
+      <text v-if="icon" class="u-button__icon">{{ icon }}</text>
+      <text class="u-button__text"><slot /></text>
+    </view>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+type ButtonType = 'primary' | 'success' | 'warning' | 'danger' | 'default'
+type ButtonSize = 'large' | 'normal' | 'small' | 'mini'
+
+interface Props {
+  type?: ButtonType
+  size?: ButtonSize
+  plain?: boolean
+  round?: boolean
+  square?: boolean
+  disabled?: boolean
+  loading?: boolean
+  block?: boolean
+  icon?: string
+  color?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'default',
+  size: 'normal',
+  plain: false,
+  round: false,
+  square: false,
+  disabled: false,
+  loading: false,
+  block: false
+})
+
+const emit = defineEmits<{
+  click: [event: MouseEvent]
+}>()
+
+const buttonStyle = computed(() => {
+  if (props.color) {
+    return {
+      backgroundColor: props.plain ? 'transparent' : props.color,
+      borderColor: props.color,
+      color: props.plain ? props.color : '#fff'
+    }
+  }
+  return {}
+})
+
+const handleClick = (event: MouseEvent) => {
+  if (!props.disabled && !props.loading) {
+    emit('click', event)
+  }
+}
+</script>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.u-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  box-sizing: border-box;
+  height: $--button-height;
+  padding: 0 $--spacing-lg;
+  margin: 0;
+  font-size: $--font-size-md;
+  line-height: 1.2;
+  text-align: center;
+  border-radius: $--border-radius-md;
+  border: 1px solid transparent;
+  transition: all $--transition-duration;
+  -webkit-tap-highlight-color: transparent;
+
+  &::after {
+    border: none;
+  }
+
+  &--default {
+    color: $--text-color;
+    background-color: $--bg-color-2;
+    border-color: $--border-color;
+  }
+
+  &--primary {
+    color: $--text-color-white;
+    background-color: $--color-primary;
+    border-color: $--color-primary;
+  }
+
+  &--success {
+    color: $--text-color-white;
+    background-color: $--color-success;
+    border-color: $--color-success;
+  }
+
+  &--warning {
+    color: $--text-color-white;
+    background-color: $--color-warning;
+    border-color: $--color-warning;
+  }
+
+  &--danger {
+    color: $--text-color-white;
+    background-color: $--color-danger;
+    border-color: $--color-danger;
+  }
+
+  &--large {
+    height: $--button-height-lg;
+    font-size: $--font-size-lg;
+  }
+
+  &--small {
+    height: $--button-height-sm;
+    padding: 0 $--spacing-md;
+    font-size: $--font-size-sm;
+  }
+
+  &--mini {
+    height: 24px;
+    padding: 0 $--spacing-sm;
+    font-size: $--font-size-xs;
+  }
+
+  &--plain {
+    background-color: transparent;
+
+    &.u-button--primary {
+      color: $--color-primary;
+    }
+
+    &.u-button--success {
+      color: $--color-success;
+    }
+
+    &.u-button--warning {
+      color: $--color-warning;
+    }
+
+    &.u-button--danger {
+      color: $--color-danger;
+    }
+  }
+
+  &--round {
+    border-radius: 999px;
+  }
+
+  &--square {
+    border-radius: 0;
+  }
+
+  &--disabled {
+    opacity: 0.5;
+  }
+
+  &--loading {
+  }
+
+  &--block {
+    display: flex;
+    width: 100%;
+  }
+
+  &--active {
+    opacity: 0.8;
+  }
+
+  &__content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__icon {
+    margin-right: $--spacing-xs;
+  }
+
+  &__loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__loading-icon {
+    width: 16px;
+    height: 16px;
+    border: 2px solid currentColor;
+    border-top-color: transparent;
+    border-radius: 50%;
+    animation: u-button-loading 0.8s linear infinite;
+  }
+}
+
+@keyframes u-button-loading {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>

package/src/components/u-cell/u-cell.vue

@@ -0,0 +1,179 @@
+<template>
+  <view
+    class="u-cell"
+    :class="{
+      'u-cell--clickable': isClickable,
+      'u-cell--disabled': disabled
+    }"
+    :hover-class="isClickable && !disabled ? 'u-cell--active' : ''"
+    @click="handleClick"
+  >
+    <view v-if="$slots.icon || icon" class="u-cell__icon">
+      <slot name="icon">
+        <image v-if="icon" class="u-cell__icon-img" :src="icon" mode="aspectFit" />
+      </slot>
+    </view>
+
+    <view class="u-cell__content">
+      <view class="u-cell__title">
+        <text class="u-cell__title-text">{{ title }}</text>
+        <text v-if="label" class="u-cell__label">{{ label }}</text>
+      </view>
+
+      <view class="u-cell__value">
+        <slot name="value">
+          <text class="u-cell__value-text">{{ value }}</text>
+        </slot>
+      </view>
+    </view>
+
+    <view v-if="isLink" class="u-cell__arrow">
+      <text class="u-cell__arrow-icon">›</text>
+    </view>
+
+    <slot name="right-icon" />
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  title?: string
+  value?: string | number
+  label?: string
+  icon?: string
+  isLink?: boolean
+  to?: string
+  url?: string
+  disabled?: boolean
+  clickable?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: '',
+  isLink: false,
+  disabled: false,
+  clickable: false
+})
+
+const emit = defineEmits<{
+  click: [event: MouseEvent]
+}>()
+
+const isClickable = computed(() => {
+  return props.clickable || props.isLink || props.to || props.url
+})
+
+const handleClick = (event: MouseEvent) => {
+  if (props.disabled) return
+
+  emit('click', event)
+
+  if (props.url) {
+    uni.navigateTo({ url: props.url })
+  } else if (props.to) {
+    uni.navigateTo({ url: props.to })
+  }
+}
+</script>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.u-cell {
+  display: flex;
+  align-items: center;
+  min-height: $--cell-height;
+  padding: $--spacing-md $--spacing-lg;
+  background-color: $--bg-color-2;
+  position: relative;
+
+  &::after {
+    content: '';
+    position: absolute;
+    left: $--spacing-lg;
+    right: 0;
+    bottom: 0;
+    height: 1px;
+    background-color: $--border-color;
+    transform: scaleY(0.5);
+  }
+
+  &:last-child::after {
+    display: none;
+  }
+
+  &--clickable {
+  }
+
+  &--disabled {
+    opacity: 0.5;
+  }
+
+  &--active {
+    background-color: $--bg-color;
+  }
+
+  &__icon {
+    margin-right: $--spacing-md;
+
+    &-img {
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  &__content {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    overflow: hidden;
+  }
+
+  &__title {
+    flex: 1;
+    overflow: hidden;
+
+    &-text {
+      font-size: $--font-size-md;
+      color: $--text-color;
+      line-height: 24px;
+    }
+  }
+
+  &__label {
+    display: block;
+    margin-top: 2px;
+    font-size: $--font-size-sm;
+    color: $--text-color-2;
+    line-height: 18px;
+  }
+
+  &__value {
+    overflow: hidden;
+
+    &-text {
+      font-size: $--font-size-md;
+      color: $--text-color-2;
+    }
+  }
+
+  &__arrow {
+    margin-left: $--spacing-sm;
+    color: $--text-color-3;
+
+    &-icon {
+      font-size: 16px;
+    }
+  }
+}
+</style>

package/src/components/u-cell-group/u-cell-group.vue

@@ -0,0 +1,46 @@
+<template>
+  <view class="u-cell-group">
+    <view v-if="title || $slots.title" class="u-cell-group__title">
+      <slot name="title">{{ title }}</slot>
+    </view>
+    <view class="u-cell-group__body">
+      <slot />
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  title?: string
+}
+
+withDefaults(defineProps<Props>(), {
+  title: ''
+})
+</script>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.u-cell-group {
+  background-color: $--bg-color-2;
+
+  &__title {
+    padding: $--spacing-md $--spacing-lg;
+    font-size: $--font-size-sm;
+    color: $--text-color-2;
+    background-color: $--bg-color;
+  }
+
+  &__body {
+    position: relative;
+  }
+}
+</style>

package/src/components/u-checkbox/u-checkbox.vue

@@ -0,0 +1,174 @@
+<template>
+  <view class="u-checkbox" :class="checkboxClass" @click="handleClick">
+    <view class="u-checkbox__icon" :class="iconClass" :style="iconStyle">
+      <text v-if="checked" class="u-checkbox__check">✓</text>
+    </view>
+    <view v-if="label || $slots.default" class="u-checkbox__label">
+      <slot>{{ label }}</slot>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from 'vue'
+import type { ComputedRef, Ref } from 'vue'
+
+interface CheckboxGroupContext {
+  modelValue: Ref<any[]>
+  disabled: ComputedRef<boolean>
+  max: ComputedRef<number>
+  toggle: (value: any) => void
+}
+
+interface Props {
+  value?: any
+  label?: string
+  disabled?: boolean
+  checkedColor?: string
+  shape?: 'square' | 'circle'
+  iconSize?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  value: '',
+  label: '',
+  disabled: false,
+  checkedColor: '',
+  shape: 'square',
+  iconSize: 20
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  change: [checked: boolean]
+}>()
+
+const group = inject<CheckboxGroupContext | null>('u-checkbox-group', null)
+
+const checked = computed(() => {
+  if (group) {
+    return group.modelValue.value.includes(props.value)
+  }
+  return false
+})
+
+const isDisabled = computed(() => {
+  if (group) {
+    return group.disabled.value || props.disabled
+  }
+  return props.disabled
+})
+
+const checkboxClass = computed(() => [
+  {
+    'u-checkbox--disabled': isDisabled.value,
+    'u-checkbox--checked': checked.value
+  }
+])
+
+const iconClass = computed(() => [
+  `u-checkbox__icon--${props.shape}`,
+  {
+    'u-checkbox__icon--checked': checked.value,
+    'u-checkbox__icon--disabled': isDisabled.value
+  }
+])
+
+const iconStyle = computed(() => {
+  const style: Record<string, string> = {}
+  style.width = `${props.iconSize}px`
+  style.height = `${props.iconSize}px`
+
+  if (checked.value && props.checkedColor) {
+    style.backgroundColor = props.checkedColor
+    style.borderColor = props.checkedColor
+  }
+
+  return style
+})
+
+const handleClick = () => {
+  if (isDisabled.value) return
+
+  if (group) {
+    group.toggle(props.value)
+  } else {
+    emit('update:modelValue', !checked.value)
+    emit('change', !checked.value)
+  }
+}
+</script>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.u-checkbox {
+  display: inline-flex;
+  align-items: center;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+  &--disabled {
+    opacity: 0.5;
+  }
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid $--border-color;
+    background-color: $--bg-color-2;
+    transition: all 0.2s;
+    flex-shrink: 0;
+
+    &--square {
+      border-radius: $--radius-sm;
+    }
+
+    &--circle {
+      border-radius: 50%;
+    }
+
+    &--checked {
+      background-color: $--color-primary;
+      border-color: $--color-primary;
+    }
+
+    &--disabled {
+      background-color: $--bg-color;
+      border-color: $--border-color;
+    }
+  }
+
+  &__check {
+    color: $--text-color-white;
+    font-size: 12px;
+    font-weight: bold;
+    line-height: 1;
+  }
+
+  &__label {
+    margin-left: $--spacing-sm;
+    font-size: $--font-size-base;
+    color: $--text-color;
+    line-height: 1.5;
+  }
+
+  &--checked &__label {
+    color: $--text-color;
+  }
+
+  &--disabled &__label {
+    color: $--text-color-3;
+  }
+}
+</style>

package/src/components/u-checkbox-group/u-checkbox-group.vue

@@ -0,0 +1,72 @@
+<template>
+  <view class="u-checkbox-group">
+    <slot />
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, provide, ref, watch } from 'vue'
+
+interface Props {
+  modelValue?: any[]
+  disabled?: boolean
+  max?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: () => [],
+  disabled: false,
+  max: 0
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: any[]]
+  change: [value: any[]]
+}>()
+
+const innerValue = ref([...props.modelValue])
+
+watch(() => props.modelValue, (val) => {
+  innerValue.value = [...val]
+}, { deep: true })
+
+const toggle = (value: any) => {
+  const index = innerValue.value.indexOf(value)
+
+  if (index > -1) {
+    innerValue.value.splice(index, 1)
+  } else {
+    if (props.max > 0 && innerValue.value.length >= props.max) {
+      return
+    }
+    innerValue.value.push(value)
+  }
+
+  emit('update:modelValue', [...innerValue.value])
+  emit('change', [...innerValue.value])
+}
+
+provide('u-checkbox-group', {
+  modelValue: innerValue,
+  disabled: computed(() => props.disabled),
+  max: computed(() => props.max),
+  toggle
+})
+</script>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.u-checkbox-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: $--spacing-base;
+}
+</style>