@solar-taro/ui-sun 0.0.0

package/src/segment/index.scss

@@ -0,0 +1,44 @@
+.sun-segment {
+  --border-radius: 14rpx;
+  --segment-background: rgba(0, 0, 0, 0.03);
+  height: 100%;
+  font-size: 26rpx;
+  border-radius: calc(var(--border-radius) + 1.5px);
+  background: var(--segment-background);
+  overflow: hidden;
+
+  &-inner {
+    position: relative;
+    display: flex;
+    margin: 2.5px;
+    height: calc(100% - 5px);
+
+    &::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 100%;
+      width: calc(100% / var(--segment-length));
+      background: var(--color-white);
+      border-radius: var(--border-radius);
+      box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
+      transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1);
+      transform: translateX(calc(100% * var(--segment-active-index)));
+    }
+  }
+
+  &-btn {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex: 1;
+    height: 28px;
+    z-index: 1;
+
+    &-active {
+      font-weight: 500;
+    }
+  }
+}

package/src/segment/index.ts

@@ -0,0 +1,2 @@
+export { default as SunSegmentBtn } from './segment-btn.vue';
+export { default as SunSegment } from './segment.vue';

package/src/segment/injection.ts

@@ -0,0 +1,8 @@
+import { ComponentInternalInstance, InjectionKey, Ref } from 'vue';
+
+export const ACTIVE_CHILD = Symbol() as InjectionKey<Ref<ComponentInternalInstance>>;
+export const PARENT = Symbol() as InjectionKey<{
+  link(child: ComponentInternalInstance): void;
+  unlink(child: ComponentInternalInstance): void;
+  active(child: ComponentInternalInstance): void;
+}>;

package/src/segment/segment-btn.vue

@@ -0,0 +1,28 @@
+<template>
+  <view
+    v-bind="$attrs"
+    class="sun-segment-btn"
+    :class="{ 'sun-segment-btn-active': activeChild?.props['value'] === value }"
+    @tap="parent.active(instance)">
+    <slot></slot>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { getCurrentInstance, inject, onUnmounted } from 'vue';
+import { ACTIVE_CHILD, PARENT } from './injection';
+
+defineProps<{
+  value: unknown
+}>();
+
+const activeChild = inject(ACTIVE_CHILD)!;
+const parent = inject(PARENT)!;
+const instance = getCurrentInstance()!;
+
+onUnmounted(() => {
+  parent.unlink(instance);
+});
+
+parent.link(instance);
+</script>

package/src/segment/segment.vue

@@ -0,0 +1,86 @@
+<template>
+  <view v-bind="$attrs" class="sun-segment" :style="style">
+    <view class="sun-segment-inner">
+      <slot></slot>
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { ComponentInternalInstance, computed, getCurrentInstance, onMounted, provide, shallowReactive, shallowRef, VNode, watch } from 'vue';
+import { ACTIVE_CHILD, PARENT } from './injection';
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: unknown): void;
+  (e: 'change', v: { value: unknown, index: number }): void;
+}>();
+
+const props = defineProps<{
+  modelValue: unknown
+}>();
+
+const instance = getCurrentInstance()!;
+
+const activeChild = shallowRef(null as unknown as ComponentInternalInstance);
+const children = shallowReactive<ComponentInternalInstance[]>([]);
+
+const activeIndex = computed(() => children.indexOf(activeChild.value));
+const childrenLength = computed(() => children.length);
+const style = computed(() => ({
+  '--segment-length': childrenLength.value,
+  '--segment-active-index': activeIndex.value
+}))
+
+provide(ACTIVE_CHILD, activeChild);
+provide(PARENT, {
+  link: (child: ComponentInternalInstance) => {
+    const vnodes = getChildVnodes();
+
+    children.push(child);
+    children.sort((a, b) => {
+      const indexA = vnodes.indexOf(a.vnode);
+      const indexB = vnodes.indexOf(b.vnode);
+      return indexA - indexB;
+    });
+  },
+  unlink: (child: ComponentInternalInstance) => {
+    children.slice(children.indexOf(child), 1);
+  },
+  active: (child: ComponentInternalInstance) => {
+    emit('change', {
+      value: child.props['value'],
+      index: activeIndex.value
+    });
+    emit('update:modelValue', child.props['value']);
+    activeChild.value = child;
+  }
+});
+
+watch(() => props.modelValue, value => {
+  activeChild.value = children.find(o => o.props['value'] === value)!;
+});
+
+function getChildVnodes(): VNode[] {
+  // @ts-ignore
+  return instance
+    .subTree
+    .children[0]
+    .children[0]
+    .children
+    .filter((vnode: VNode) => typeof vnode.type !== 'symbol');
+}
+
+onMounted(() => {
+  const vnodes = getChildVnodes();
+
+  children.forEach(child => {
+    const index = vnodes.findIndex(o => o === child.vnode);
+
+    child.props['value'] ??= index;
+
+    if (child.props['value'] === props.modelValue) {
+      activeChild.value = child;
+    }
+  });
+});
+</script>

package/src/spinner/index.scss

@@ -0,0 +1,84 @@
+.sun-spinner {
+  --spinner-color: var(--color-primary);
+  --spinner-dot-size: 26rpx;
+  --spinner-dot-gap: 10rpx;
+  --spinner-desc-size: 26rpx;
+  display: inline-block;
+
+  &-small {
+    --spinner-dot-size: 14rpx;
+    --spinner-dot-gap: 4rpx;
+    --spinner-desc-size: 22rpx;
+  }
+
+  &-middle {
+    --spinner-dot-size: 20rpx;
+    --spinner-dot-gap: 6rpx;
+    --spinner-desc-size: 24rpx;
+  }
+
+  &-large {
+    --spinner-dot-size: 36rpx;
+    --spinner-dot-gap: 14rpx;
+    --spinner-desc-size: 28rpx;
+  }
+
+  &-spinning > &-dot {
+    animation: sun-spinner-rotate 1.2s infinite linear;
+  }
+
+  &-dot {
+    display: inline-flex;
+    flex-wrap: wrap;
+    width: calc(var(--spinner-dot-size) * 2 + var(--spinner-dot-gap) * 4);
+
+    &-item {
+      height: var(--spinner-dot-size);
+      width: var(--spinner-dot-size);
+      margin: var(--spinner-dot-gap);
+      border-radius: 50%;
+      background: var(--spinner-color);
+      opacity: 0.25;
+      animation: sun-spinner-breath 0.8s infinite linear alternate;
+
+      &:nth-child(2) {
+        animation-delay: 0.4s;
+      }
+
+      &:nth-child(3) {
+        animation-delay: 0.8s;
+      }
+
+      &:nth-child(4) {
+        animation-delay: 1.2s;
+      }
+    }
+  }
+
+  &-desc {
+    text-align: center;
+    font-size: var(--spinner-desc-size);
+    color: var(--spinner-color);
+    margin-top: 12rpx;
+  }
+}
+
+@keyframes sun-spinner-rotate {
+  from {
+    transform: rotate(0);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes sun-spinner-breath {
+  from {
+    opacity: 0.25;
+  }
+
+  to {
+    opacity: 1;
+  }
+}

package/src/spinner/index.ts

@@ -0,0 +1 @@
+export { default as SunSpinner } from './index.vue';

package/src/spinner/index.vue

@@ -0,0 +1,26 @@
+<template>
+  <view class="sun-spinner" :class="className">
+    <view class="sun-spinner-dot">
+      <view v-for="o of 4" :key="o" class="sun-spinner-dot-item"></view>
+    </view>
+    <view v-if="$slots['default']" class="sun-spinner-desc">
+      <slot></slot>
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+const props = defineProps<{
+  size?: 'small' | 'middle' | 'default' | 'large';
+  spinning?: boolean;
+}>();
+
+const className = computed(() => [
+  {
+    'sun-spinner-spinning': props.spinning,
+  },
+  `sun-spinner-${props.size}`
+]);
+</script>

package/src/sudoku/index.scss

@@ -0,0 +1,22 @@
+.sun-sudoku {
+  display: flex;
+  flex-wrap: wrap;
+  width: var(--sudoku-width);
+
+  &-item {
+    width: var(--sudoku-item-size);
+    height: var(--sudoku-item-size);
+  }
+
+  &-lg {
+    --sudoku-item-size: calc(var(--sudoku-width) / 3);
+  }
+
+  &-md {
+    --sudoku-item-size: calc(var(--sudoku-width) / 2);
+  }
+
+  &-sm {
+    --sudoku-item-size: var(--sudoku-width);
+  }
+}

package/src/sudoku/index.ts

@@ -0,0 +1,2 @@
+export { default as SunSudokuItem } from './sudoku-item.vue';
+export { default as SunSudoku } from './sudoku.vue';

package/src/sudoku/sudoku-item.vue

@@ -0,0 +1,5 @@
+<template>
+  <view v-bind="$attrs" class="sun-sudoku-item">
+    <slot></slot>
+  </view>
+</template>

package/src/sudoku/sudoku.vue

@@ -0,0 +1,23 @@
+<template>
+  <view v-bind="$attrs" class="sun-sudoku" :class="classes" :style="{ '--sudoku-width': size }">
+    <slot></slot>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  size: String,
+  count: {
+    type: Number,
+    default: 9
+  }
+});
+
+const classes = computed(() => ({
+  'sun-sudoku-sm': props.count === 1,
+  'sun-sudoku-md': props.count === 2 || props.count === 4,
+  'sun-sudoku-lg': props.count === 3 || props.count > 4,
+}))
+</script>

package/src/table/_table-cell.scss

@@ -0,0 +1,50 @@
+.sun-tb-cell {
+  display: table-cell;
+  background: var(--color-white);
+  vertical-align: middle;
+  white-space: nowrap;
+
+  &-break-word {
+    white-space: normal;
+    word-break: break-all;
+  }
+
+  &-ellipsis {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  &-sticky-left,
+  &-sticky-right {
+    position: -webkit-sticky;
+    position: sticky;
+    background: var(--color-white);
+
+    &::after {
+      position: absolute;
+      top: 0;
+      content: "";
+      height: 100%;
+      width: 7.5rpx;
+    }
+  }
+
+  &-sticky-left {
+    left: 0;
+
+    &::after {
+      left: 100%;
+      background: linear-gradient(to right, rgba(#000, 0.05), transparent);
+    }
+  }
+
+  &-sticky-right {
+    right: 0;
+
+    &::after {
+      right: 100%;
+      background: linear-gradient(to left, rgba(#000, 0.05), transparent);
+    }
+  }
+}

package/src/table/_table-row.scss

@@ -0,0 +1,14 @@
+.sun-tb {
+  &-row {
+    display: table-row;
+
+    &:not(:last-child) > .sun-tb-cell {
+      border-bottom: 0.5px solid var(--border-color);
+    }
+  }
+
+  &-head,
+  &-foot {
+    font-weight: bold;
+  }
+}

package/src/table/_table.scss

@@ -0,0 +1,70 @@
+.sun-tb {
+  --border-color: #e2e8f0;
+
+  overflow: auto;
+  border-collapse: collapse;
+  -webkit-overflow-scrolling: touch;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  &-rounded {
+    border-radius: 12rpx;
+  }
+
+  &-bordered {
+    border: 0.5px solid var(--border-color);
+
+    .sun-tb-cell {
+      border: 0.5px solid var(--border-color);
+    }
+  }
+
+  &-outer-bordered {
+    border: 0.5px solid var(--border-color);
+  }
+}
+
+// table
+.sun-tb-inner {
+  display: table;
+  width: 100%;
+  min-width: 100%;
+}
+
+.sun-tb-layout-fixed {
+  table-layout: fixed;
+}
+
+// zebra style
+.sun-tb-zebra > .sun-tb-row:nth-child(odd) > .sun-tb-cell {
+  background: #f8fafc;
+}
+
+// table size
+.sun-tb-size {
+  &-default {
+    font-size: 28rpx;
+
+    .sun-tb-cell {
+      padding: 18rpx 22rpx;
+    }
+  }
+
+  &-medium {
+    font-size: 26rpx;
+
+    .sun-tb-cell {
+      padding: 16rpx 20rpx;
+    }
+  }
+
+  &-small {
+    font-size: 24rpx;
+
+    .sun-tb-cell {
+      padding: 14rpx 18rpx;
+    }
+  }
+}

package/src/table/index.scss

@@ -0,0 +1,3 @@
+@use "./table";
+@use "./table-row";
+@use "./table-cell";

package/src/table/index.ts

@@ -0,0 +1,3 @@
+export { default as SunTbCell } from './table-cell.vue';
+export { default as SunTbRow } from './table-row.vue';
+export { default as SunTb } from './table.vue';

package/src/table/table-cell.vue

@@ -0,0 +1,26 @@
+<template>
+  <view v-bind="$attrs" class="sun-tb-cell" :class="cls" :style="{ width: width, 'min-width': width, 'max-width': maxWidth }">
+    <slot></slot>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+const props = defineProps<{
+  sticky?: 'left' | 'right',
+  width?: string,
+  maxWidth?: string,
+  /** 溢出省略 */
+  ellipsis?: boolean,
+  /** 文本换行 */
+  breakWord?: boolean
+}>();
+
+const cls = computed(() => ({
+  'sun-tb-cell-sticky-left': props.sticky === 'left',
+  'sun-tb-cell-sticky-right': props.sticky === 'right',
+  'sun-tb-cell-ellipsis': props.ellipsis,
+  'sun-tb-cell-break-word': props.breakWord,
+}));
+</script>

package/src/table/table-row.vue

@@ -0,0 +1,12 @@
+<template>
+  <view v-bind="$attrs" class="sun-tb-row" :class="{ 'sun-tb-head': head, 'sun-tb-foot': foot }">
+    <slot></slot>
+  </view>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  head?: boolean,
+  foot?: boolean,
+}>();
+</script>

package/src/table/table.vue

@@ -0,0 +1,39 @@
+<template>
+  <view v-bind="$attrs" class="sun-tb" :class="tableClass">
+    <view class="sun-tb-inner" :class="tableInnerClass">
+      <slot></slot>
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+const props = withDefaults(
+  defineProps<{
+    rounded?: boolean,
+    bordered?: boolean,
+    outerBordered?: boolean,
+    /** 斑马风格 */
+    zebra?: boolean
+    size?: 'small' | 'medium' | 'default',
+    layout?: 'auto' | 'fixed'
+  }>(),
+  {
+    rounded: true,
+    outerBordered: true
+  }
+);
+
+const tableClass = computed(() => ({
+  'sun-tb-rounded': props.rounded,
+  'sun-tb-bordered': props.bordered,
+  'sun-tb-outer-bordered': props.outerBordered,
+  [`sun-tb-size-${props.size}`]: props.size,
+}));
+
+const tableInnerClass = computed(() => ({
+  'sun-tb-zebra': props.zebra,
+  [`sun-tb-layout-${props.layout}`]: props.layout
+}));
+</script>

package/src/virtual-scroll/index.scss

@@ -0,0 +1,17 @@
+.sun-virtual-scroll {
+  position: relative;
+  transform: translateZ(0);
+
+  &-content-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: inherit;
+    height: inherit;
+  }
+
+  &-item {
+    width: 100%;
+    height: 100%;
+  }
+}

package/src/virtual-scroll/index.ts

@@ -0,0 +1 @@
+export { default as SunVirtualScroll } from './index.vue';