@solar-taro/ui-sun 0.0.0

package/CHANGELOG.md

@@ -0,0 +1,3 @@
+## 1.0.1 (2025-01-22)
+
+This was a version bump only for ui-sun to align it with other projects, there were no code changes.

package/README.md

@@ -0,0 +1,11 @@
+# ui-sun
+
+This library was generated with [Nx](https://nx.dev).
+
+## Building
+
+Run `nx build ui-sun` to build the library.
+
+## Running unit tests
+
+Run `nx test ui-sun` to execute the unit tests via [Vitest](https://vitest.dev/).

package/eslint.config.cjs

@@ -0,0 +1,22 @@
+const baseConfig = require('../../eslint.config.cjs');
+
+module.exports = [
+  ...baseConfig,
+  {
+    files: ['**/*.json'],
+    rules: {
+      '@nx/dependency-checks': [
+        'error',
+        {
+          ignoredFiles: [
+            '{projectRoot}/eslint.config.{js,cjs,mjs}',
+            '{projectRoot}/vite.config.{js,ts,mjs,mts}',
+          ],
+        },
+      ],
+    },
+    languageOptions: {
+      parser: require('jsonc-eslint-parser'),
+    },
+  },
+];

package/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@solar-taro/ui-sun",
+  "version": "0.0.0",
+  "type": "module",
+  "main": "./index.js",
+  "typings": "./index.d.ts",
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.0"
+  }
+}

package/project.json

@@ -0,0 +1,28 @@
+{
+  "name": "ui-sun",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/ui-sun/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "postbuild": {
+      "executor": "nx:run-commands",
+      "dependsOn": [
+        "build"
+      ],
+      "options": {
+        "commands": [
+          "node scripts/copy-assets.js ui-sun **/*.scss"
+        ]
+      }
+    },
+    "release:dev": {
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": [
+          "yalc publish dist/ui-sun"
+        ]
+      }
+    }
+  }
+}

package/shims-vue.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<Record<string, unknown>, Record<string, unknown>, any>
+  export default component
+}

package/src/_color.scss

@@ -0,0 +1,41 @@
+@use "sass:color";
+@use "sass:map";
+
+$colors: (
+  "white": #fff,
+  "black": #000,
+  "gray": #9e9e9e
+);
+
+$theme-colors: (
+  // 主色由应用程序端覆盖，这里随便写个颜色
+  "primary": #000,
+  "secondary": #616161,
+  "danger": #ff5252,
+  "info": #2196f3,
+  "success": #22c55e,
+  "warning": #ffc107,
+  "light": #fafafa,
+  "dark": #212121
+);
+
+// Converts a color to a comma separated rgb.
+// --------------------------------------------------------------------------------------------
+@function color-to-rgb-list($color) {
+  @return #{color.red($color)}, #{color.green($color)}, #{color.blue($color)};
+}
+
+page {
+  @each $name, $value in map.merge($colors, $theme-colors) {
+    --color-#{$name}: #{$value};
+    --color-#{$name}-rgb: #{color-to-rgb-list($value)};
+
+    .color-#{$name} {
+      color: var(--color-#{$name});
+    }
+
+    .bg-#{$name} {
+      background-color: var(--color-#{$name});
+    }
+  }
+}

package/src/_sun.scss

@@ -0,0 +1,15 @@
+.unit-rmb::before {
+  content: "￥";
+  font-size: 0.75em;
+  letter-spacing: -0.03em;
+}
+
+.unit-percent::after {
+  content: "%";
+  font-size: 0.75em;
+  letter-spacing: -0.03em;
+}
+
+.small {
+  font-size: 0.85em;
+}

package/src/_wx.scss

@@ -0,0 +1,23 @@
+page {
+  --safe-top: env(safe-area-inset-top);
+  --safe-bottom: env(safe-area-inset-bottom);
+  --safe-left: env(safe-area-inset-left);
+  --safe-right: env(safe-area-inset-right);
+
+  color: var(--color-dark);
+  font-size: 30rpx;
+  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto", sans-serif;
+
+  > view {
+    min-height: 100vh;
+    overflow: hidden;
+  }
+}
+
+view,
+text,
+scroll-view,
+::before,
+::after {
+  box-sizing: border-box;
+}

package/src/accordion/index.scss

@@ -0,0 +1,18 @@
+.sun-accordion {
+  &-expanded {
+    .sun-accordion-content {
+      grid-template-rows: 1fr;
+    }
+  }
+
+  &-content {
+    display: grid;
+    grid-template-rows: 0fr;
+    overflow: hidden;
+    transition: grid-template-rows ease-out 150ms;
+
+    &-inner {
+      min-height: 0;
+    }
+  }
+}

package/src/accordion/index.ts

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

package/src/accordion/index.vue

@@ -0,0 +1,27 @@
+<template>
+  <view class="sun-accordion" :class="{ 'sun-accordion-expanded': expanded }">
+    <view class="sun-accordion-header" @tap="toggle()">
+      <slot></slot>
+    </view>
+
+    <view class="sun-accordion-content">
+      <view class="sun-accordion-content-inner">
+        <slot name="content" :toggle="toggle"></slot>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps<{
+  disabled?: boolean
+}>();
+
+const expanded = defineModel<boolean>('expanded')
+
+function toggle() {
+  if (!props.disabled) {
+    expanded.value = !expanded.value;
+  }
+}
+</script>

package/src/chip/index.scss

@@ -0,0 +1,77 @@
+.sun-chip {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--color);
+  background: var(--background);
+  border-radius: 99px;
+
+  &-default {
+    font-size: 30rpx;
+    height: 60rpx;
+    margin: 8rpx;
+    padding: 14rpx 24rpx;
+  }
+
+  &-small {
+    font-size: 25rpx;
+    height: 50rpx;
+    margin: 6rpx;
+    padding: 10rpx 20rpx;
+  }
+
+  &-large {
+    font-size: 35rpx;
+    height: 70rpx;
+    margin: 8rpx;
+    padding: 20rpx 30rpx;
+  }
+
+  &-solid {
+    --color: white;
+    --background: rgba(var(--color-rgb), 1);
+  }
+
+  &-outline {
+    --color: rgba(var(--color-rgb), 1);
+    --background: transparent;
+    border: 1px solid rgba(var(--color-rgb), 1);
+  }
+
+  &-light {
+    --color: rgba(var(--color-rgb), 1);
+    --background: rgba(var(--color-rgb, 0, 0, 0), 0.12);
+  }
+
+  &-primary {
+    --color-rgb: var(--color-primary-rgb);
+  }
+
+  &-secondary {
+    --color-rgb: var(--color-secondary-rgb);
+  }
+
+  &-danger {
+    --color-rgb: var(--color-danger-rgb);
+  }
+
+  &-success {
+    --color-rgb: var(--color-success-rgb);
+  }
+
+  &-warning {
+    --color-rgb: var(--color-warning-rgb);
+  }
+
+  &-info {
+    --color-rgb: var(--color-info-rgb);
+  }
+
+  &-light {
+    --color-rgb: var(--color-light-rgb);
+  }
+
+  &-dark {
+    --color-rgb: var(--color-dark-rgb);
+  }
+}

package/src/chip/index.ts

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

package/src/chip/index.vue

@@ -0,0 +1,27 @@
+<template>
+  <view class="sun-chip" :class="classes">
+    <slot></slot>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+const props = withDefaults(
+  defineProps<{
+    type?: 'solid' | 'light' | 'outline'
+    size?: 'small' | 'default' | 'large'
+    color: 'primary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | 'secondary',
+  }>(),
+  {
+    type: 'light',
+    size: 'default',
+  }
+);
+
+const classes = computed(() => [
+  `sun-chip-${props.size}`,
+  `sun-chip-${props.type}`,
+  `sun-chip-${props.color}`
+]);
+</script>

package/src/fab/fab-group.vue

@@ -0,0 +1,17 @@
+<template>
+  <view
+    v-bind="$attrs"
+    class="sun-fab-group"
+    :style="{ bottom: `calc(${15 + +offsetY}px + var(--safe-bottom))` }">
+    <slot></slot>
+  </view>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+  offsetY: {
+    type: [Number, String],
+    default: 0
+  }
+});
+</script>

package/src/fab/fab.vue

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

package/src/fab/index.scss

@@ -0,0 +1,18 @@
+.sun-fab {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 105rpx;
+  height: 105rpx;
+  border-radius: 50%;
+
+  &:not(:last-child) {
+    margin-bottom: 10px;
+  }
+
+  &-group {
+    position: fixed;
+    right: calc(15px + var(--safe-right));
+    z-index: 1;
+  }
+}

package/src/fab/index.ts

@@ -0,0 +1,2 @@
+export { default as SunFabGroup } from './fab-group.vue';
+export { default as SunFab } from './fab.vue';

package/src/index.scss

@@ -0,0 +1,3 @@
+@use "color";
+@use "wx";
+@use "sun";

package/src/index.ts

@@ -0,0 +1,11 @@
+export * from './accordion';
+export * from './chip';
+export * from './fab';
+export * from './lazy-render';
+export * from './navbar';
+export * from './popover';
+export * from './segment';
+export * from './spinner';
+export * from './sudoku';
+export * from './table';
+export * from './virtual-scroll';

package/src/lazy-render/index.ts

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

package/src/lazy-render/index.vue

@@ -0,0 +1,38 @@
+<template>
+  <slot v-if="show"></slot>
+</template>
+
+<script setup lang="ts">
+import { onActivated, onDeactivated, ref } from 'vue';
+
+const props = withDefaults(
+  defineProps<{
+    delay?: number,
+    hook?: 'activated' | 'created',
+  }>(),
+  {
+    delay: 50,
+    hook: 'activated',
+  }
+);
+
+const show = ref(false);
+let timer: ReturnType<typeof setTimeout>;
+
+function lazyRender() {
+  timer = setTimeout(() => {
+    show.value = true;
+  }, props.delay);
+}
+
+if (props.hook === 'created') lazyRender();
+
+onActivated(() => {
+  lazyRender();
+})
+
+onDeactivated(() => {
+  show.value = false;
+  if (timer) clearTimeout(timer);
+})
+</script>

package/src/navbar/index.scss

@@ -0,0 +1,18 @@
+.sun-navbar {
+  height: var(--navbar-height);
+  padding: var(--navbar-padding-top) var(--navbar-padding-right) var(--navbar-padding-bottom) var(--navbar-padding-left);
+
+  &-inner {
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: 100%;
+  }
+
+  &-center {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}

package/src/navbar/index.ts

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

package/src/navbar/index.vue

@@ -0,0 +1,26 @@
+<template>
+  <view class="sun-navbar" :style="navbarStyle">
+    <view class="sun-navbar-inner">
+      <slot></slot>
+
+      <view class="sun-navbar-center">
+        <slot name="center"></slot>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { withPixel } from '@solar-kit/core';
+import { getNavbarRect } from '@solar-taro/core';
+
+const navbarRect = getNavbarRect();
+const navbarStyle = {
+  '--navbar-height': withPixel(navbarRect.height),
+  '--navbar-content-height': withPixel(navbarRect.buttonHeight),
+  '--navbar-padding-top': withPixel(navbarRect.paddingTop),
+  '--navbar-padding-bottom': withPixel(navbarRect.paddingBottom),
+  '--navbar-padding-left': withPixel(navbarRect.paddingLeft),
+  '--navbar-padding-right': withPixel(navbarRect.paddingRight),
+};
+</script>

package/src/popover/index.scss

@@ -0,0 +1,100 @@
+.sun-popover {
+  position: relative;
+  display: inline-flex;
+
+  &.sun-popover-show > .sun-popover-container {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  &.sun-popover-x-center {
+    justify-content: center;
+
+    &.sun-popover-y-bottom .sun-popover-arrow {
+      left: 50%;
+      bottom: 100%;
+      transform: translateX(-50%);
+      border-bottom-color: var(--popover-background);
+    }
+
+    &.sun-popover-y-top .sun-popover-arrow {
+      left: 50%;
+      top: 100%;
+      transform: translateX(-50%);
+      border-top-color: var(--popover-background);
+    }
+  }
+
+  &.sun-popover-x-left .sun-popover-container {
+    right: calc(100% + var(--popover-x-offset));
+  }
+
+  &.sun-popover-x-right .sun-popover-container {
+    left: calc(100% + var(--popover-x-offset));
+  }
+
+  &.sun-popover-x-start .sun-popover-container {
+    left: 0;
+  }
+
+  &.sun-popover-x-end .sun-popover-container {
+    right: 0;
+  }
+
+  &.sun-popover-y-center {
+    align-items: center;
+
+    &.sun-popover-x-left .sun-popover-arrow {
+      left: 100%;
+      top: 50%;
+      transform: translateY(-50%);
+      border-left-color: var(--popover-background);
+    }
+
+    &.sun-popover-x-right .sun-popover-arrow {
+      right: 100%;
+      top: 50%;
+      transform: translateY(-50%);
+      border-right-color: var(--popover-background);
+    }
+  }
+
+  &.sun-popover-y-bottom {
+    .sun-popover-container {
+      top: calc(100% + var(--popover-y-offset));
+    }
+  }
+
+  &.sun-popover-y-top {
+    .sun-popover-container {
+      bottom: calc(100% + var(--popover-y-offset));
+    }
+  }
+
+  &.sun-popover-y-start .sun-popover-container {
+    top: 0;
+  }
+
+  &.sun-popover-y-end .sun-popover-container {
+    bottom: 0;
+  }
+}
+
+.sun-popover-container {
+  position: absolute;
+  // padding: 10rpx 15rpx;
+  background: var(--popover-background);
+  border-radius: 15rpx;
+  text-align: left;
+  opacity: 0;
+  visibility: hidden;
+  transition:
+    opacity ease-out 0.15s,
+    visibility ease-out 0.15s;
+  z-index: 1;
+
+  > .sun-popover-arrow {
+    position: absolute;
+    border: 10rpx solid transparent;
+  }
+}

package/src/popover/index.ts

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

package/src/popover/index.vue

@@ -0,0 +1,56 @@
+<template>
+  <view
+    class="sun-popover"
+    :class="[{ 'sun-popover-show': show }, `sun-popover-x-${x}`, `sun-popover-y-${y}`]"
+    :style="{ '--popover-x-offset': offsetX, '--popover-y-offset': offsetY, '--popover-background': bg } as any"
+    @tap.stop="false">
+    <view class="sun-popover-trigger">
+      <slot></slot>
+    </view>
+
+    <view v-bind="$attrs" class="sun-popover-container" :style="{ color: color }">
+      <view class="sun-popover-arrow"></view>
+      <slot name="content"></slot>
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+  /** 是否显示 */
+  show: {
+    type: Boolean,
+    default: undefined,
+  },
+  /** popover的横轴位置：left，right，start，end，center */
+  x: {
+    type: String,
+    default: 'left'
+  },
+  /** popover的纵轴位置：top，bottom，start，end，center */
+  y: {
+    type: String,
+    default: 'center'
+  },
+  /** 横轴偏移度 */
+  offsetX: {
+    type: String,
+    default: '7.5rpx'
+  },
+  /** 纵轴偏移度 */
+  offsetY: {
+    type: String,
+    default: '7.5rpx'
+  },
+  /** popover背景 */
+  bg: {
+    type: String,
+    default: '#fff'
+  },
+  /** popover文字颜色 */
+  color: {
+    type: String,
+    default: '#000'
+  }
+})
+</script>