@solar-taro/ui-sun 0.0.0 → 1.0.1

package/src/popover/index.vue

@@ -1,56 +0,0 @@
-<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>

package/src/segment/injection.ts

@@ -1,8 +0,0 @@
-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

@@ -1,28 +0,0 @@
-<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

@@ -1,86 +0,0 @@
-<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.vue

@@ -1,26 +0,0 @@
-<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/sudoku-item.vue

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

package/src/sudoku/sudoku.vue

@@ -1,23 +0,0 @@
-<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.vue

@@ -1,26 +0,0 @@
-<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

@@ -1,12 +0,0 @@
-<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

@@ -1,39 +0,0 @@
-<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.vue

@@ -1,138 +0,0 @@
-<template>
-  <scroll-view
-    v-bind="$attrs"
-    :id="id"
-    class="sun-virtual-scroll"
-    :refresher-enabled="refresher"
-    :refresher-triggered="refreshing"
-    :refresher-background="refresherBg"
-    :scroll-x="!isVertical"
-    :scroll-y="isVertical"
-    :enhanced="true"
-    :enable-passive="true"
-    :lower-threshold="300"
-    @scroll.passive="onScroll($event)"
-    @refresherrefresh="vibrator.short('light'); emit('refresh')"
-    @scrolltolower="emit('lower')">
-    <view class="sun-virtual-scroll-content-container" :style="contentContainerStyle">
-      <view
-        v-for="(item, index) in visibleItems"
-        :key="(item as any)[itemKey!] ?? index"
-        class="sun-virtual-scroll-item"
-        :style="itemStyle">
-        <slot :item="item" :index="index"></slot>
-      </view>
-    </view>
-
-    <view class="sun-virtual-scroll-spacer" :style="spacerStyle"></view>
-  </scroll-view>
-</template>
-
-<script lang="ts">
-let nextId = 1;
-</script>
-
-<script lang="ts" setup>
-import { withPixel } from '@solar-kit/core';
-import { rpxToPx, vibrator } from '@solar-taro/core';
-import { createSelectorQuery, NodesRef } from '@tarojs/taro';
-import { computed, CSSProperties, onMounted, ref } from 'vue';
-
-const emit = defineEmits<{
-  (e: 'refresh'): void;
-  (e: 'lower'): void;
-}>();
-
-const props = withDefaults(
-  defineProps<{
-    refreshing?: boolean;
-    refresher?: boolean;
-    refresherBg?: string;
-    direction?: 'vertical' | 'horizontal';
-    items: Record<string, any>[];
-    itemSize: number | string;
-    itemKey?: string;
-    id?: string;
-    bottomSpace?: number;
-  }>(),
-  {
-    refresherBg: 'transparent',
-    direction: 'vertical',
-    id: () => `sun-virtual-scroll-${nextId++}`,
-    bottomSpace: 0
-  }
-);
-
-let rafId: number;
-
-const visibleItemCount = ref(0);
-const startIndex = ref(0);
-const startOffset = ref(0);
-
-const isVertical = computed(() => props.direction === 'vertical');
-const contentContainerStyle = computed<CSSProperties>(() => ({
-  right: isVertical.value ? '0' : 'auto',
-  transform: `translate${isVertical.value ? 'Y' : 'X'}(${startOffset.value}px)`,
-  'white-space': isVertical.value ? 'normal' : 'nowrap'
-}));
-const itemSizePx = computed(() => {
-  if (typeof props.itemSize === 'number') {
-    return props.itemSize;
-  }
-
-  if (props.itemSize.endsWith('rpx')) {
-    return rpxToPx(parseFloat(props.itemSize));
-  }
-
-  return parseFloat(props.itemSize)
-})
-const spacerSize = computed(() => itemSizePx.value * props.items!.length);
-const spacerStyle = computed(() => ({
-  [isVertical.value ? 'height' : 'width']: withPixel(spacerSize.value + props.bottomSpace)
-}));
-const itemStyle = computed(() => ({
-  display: isVertical.value ? 'block' : 'inline-block',
-  [isVertical.value ? 'height' : 'width']: withPixel(itemSizePx.value)
-}))
-const visibleItems = computed(() =>
-  props.items!.slice(
-    Math.max(startIndex.value - visibleItemCount.value, 0),
-    startIndex.value + visibleItemCount.value * 2
-  )
-);
-
-function onScroll({ detail }: any) {
-  rafId && cancelAnimationFrame(rafId);
-  rafId = requestAnimationFrame(() => {
-    const scrollDistance = isVertical.value ? detail.scrollTop : detail.scrollLeft;
-    startIndex.value = ~~(scrollDistance / itemSizePx.value);
-
-    if (startIndex.value > visibleItemCount.value - 1) {
-      startOffset.value = scrollDistance - (itemSizePx.value * visibleItemCount.value) - (scrollDistance % itemSizePx.value);
-    } else {
-      startOffset.value = scrollDistance - (scrollDistance % (itemSizePx.value * visibleItemCount.value));
-    }
-
-    rafId = 0;
-  });
-}
-
-function initViewport() {
-  setTimeout(() => {
-    createSelectorQuery().select(`#${props.id}`).boundingClientRect(result => {
-      // 如果获取不到节点信息，重新初始化
-      if (!result) {
-        return initViewport()
-      }
-
-      const { height, width } = result as NodesRef.BoundingClientRectCallbackResult;
-      const viewportSize = isVertical.value ? height : width;
-      visibleItemCount.value = Math.ceil(viewportSize / itemSizePx.value);
-    }).exec();
-  });
-}
-
-onMounted(() => {
-  initViewport();
-});
-</script>

package/tsconfig.json

@@ -1,21 +0,0 @@
-{
-  "extends": "../../tsconfig.base.json",
-  "compilerOptions": {
-    "forceConsistentCasingInFileNames": true,
-    "strict": true,
-    "noImplicitOverride": true,
-    "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true,
-    "noPropertyAccessFromIndexSignature": true
-  },
-  "files": [],
-  "include": [],
-  "references": [
-    {
-      "path": "./tsconfig.lib.json"
-    },
-    {
-      "path": "./tsconfig.spec.json"
-    }
-  ]
-}

package/tsconfig.lib.json

@@ -1,26 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../dist/out-tsc",
-    "declaration": true
-  },
-  "include": [
-    "src/**/*.ts",
-    "index.ts",
-    "index.ts"
-  ],
-  "exclude": [
-    "vite.config.ts",
-    "vite.config.mts",
-    "vitest.config.ts",
-    "vitest.config.mts",
-    "src/**/*.test.ts",
-    "src/**/*.spec.ts",
-    "src/**/*.test.tsx",
-    "src/**/*.spec.tsx",
-    "src/**/*.test.js",
-    "src/**/*.spec.js",
-    "src/**/*.test.jsx",
-    "src/**/*.spec.jsx"
-  ]
-}

package/tsconfig.spec.json

@@ -1,28 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../dist/out-tsc",
-    "types": [
-      "vitest/globals",
-      "vitest/importMeta",
-      "vite/client",
-      "node",
-      "vitest"
-    ]
-  },
-  "include": [
-    "vite.config.ts",
-    "vite.config.mts",
-    "vitest.config.ts",
-    "vitest.config.mts",
-    "src/**/*.test.ts",
-    "src/**/*.spec.ts",
-    "src/**/*.test.tsx",
-    "src/**/*.spec.tsx",
-    "src/**/*.test.js",
-    "src/**/*.spec.js",
-    "src/**/*.test.jsx",
-    "src/**/*.spec.jsx",
-    "src/**/*.d.ts"
-  ]
-}

package/vite.config.ts

@@ -1,130 +0,0 @@
-/// <reference types='vitest' />
-import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin';
-import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
-import vue from '@vitejs/plugin-vue';
-import * as path from 'path';
-import { defineConfig } from 'vite';
-import dts from 'vite-plugin-dts';
-
-export default defineConfig({
-  root: __dirname,
-  cacheDir: '../../node_modules/.vite/ui-sun',
-  plugins: [
-    nxViteTsPaths(),
-    nxCopyAssetsPlugin(['*.md']),
-    dts({
-      entryRoot: 'src',
-      include: ['src'],
-      tsconfigPath: path.join(__dirname, 'tsconfig.lib.json'),
-      copyDtsFiles: true,
-    }),
-    vue({
-      template: {
-        transformAssetUrls: {
-          video: ['src', 'poster'],
-          'live-player': ['src'],
-          audio: ['src'],
-          source: ['src'],
-          image: ['src'],
-          'cover-image': ['src']
-        },
-        compilerOptions: {
-          mode: 'module',
-          optimizeImports: true,
-          isNativeTag: tag => {
-            return [
-              'slot-view',
-              'view',
-              'scroll-view',
-              'swiper',
-              'cover-view',
-              'cover-image',
-              'icon',
-              'text',
-              'rich-text',
-              'progress',
-              'button',
-              'checkbox',
-              'form',
-              'input',
-              'label',
-              'picker',
-              'picker-view',
-              'picker-view-column',
-              'radio',
-              'radio-group',
-              'checkbox-group',
-              'slider',
-              'switch',
-              'textarea',
-              'navigator',
-              'audio',
-              'image',
-              'video',
-              'camera',
-              'live-player',
-              'live-pusher',
-              'map',
-              'canvas',
-              'open-data',
-              'web-view',
-              'swiper-item',
-              'movable-area',
-              'movable-view',
-              'functional-page-navigator',
-              'ad',
-              'block',
-              'import',
-              'official-account',
-              'editor'
-            ].some(o => o === tag) || tag.startsWith('van-')
-          },
-        }
-      }
-    })
-  ],
-  // Uncomment this if you are using workers.
-  // worker: {
-  //  plugins: [ nxViteTsPaths() ],
-  // },
-  // Configuration for building your library.
-  // See: https://vitejs.dev/guide/build.html#library-mode
-  build: {
-    target: 'es2019',
-    outDir: '../../dist/ui-sun',
-    emptyOutDir: true,
-    reportCompressedSize: true,
-    lib: {
-      // Could also be a dictionary or array of multiple entry points.
-      entry: 'src/index.ts',
-      name: 'ui-sun',
-      fileName: 'index',
-      // Change this to the formats you want to support.
-      // Don't forget to update your package.json as well.
-      formats: ['es'],
-    },
-    rollupOptions: {
-      // External packages that should not be bundled into your library.
-      external: [
-        'vue',
-        'rxjs',
-        /@tarojs.+/,
-        /@ngify.+/,
-        /@opper.+/,
-        /@solar-kit.+/,
-        /@solar-taro.+/,
-      ],
-    },
-  },
-  test: {
-    watch: false,
-    globals: true,
-    environment: 'node',
-    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
-    reporters: ['default'],
-    coverage: {
-      reportsDirectory: '../../coverage/ui-sun',
-      provider: 'v8',
-    },
-  },
-});