@solar-taro/ui-sun 1.1.1 → 1.1.3

package/CHANGELOG.md

@@ -1,3 +1,26 @@
+## 1.1.2 (2025-04-08)
+
+### 🚀 Features
+
+- **ui-sun:** some adjustments for circular-progress component
+- **ui-sun:** add Color type
+- **ui-sun:** add circular progress component
+
+### ❤️ Thank You
+
+- HyperLife1119
+
+## 1.1.1 (2025-04-07)
+
+### 🚀 Features
+
+- **ui-sun:** add loading & loading text & empty slot to virtual scroll
+- **ui-sun:** add icon component
+
+### ❤️ Thank You
+
+- HyperLife1119
+
 ## 1.1.0 (2025-03-11)
 
 This was a version bump only for ui-sun to align it with other projects, there were no code changes.

package/chip/index.vue.d.ts

@@ -1,17 +1,19 @@
+import { Color } from '../typing';
+
 declare function __VLS_template(): {
     default?(_: {}): any;
 };
 declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     type?: "solid" | "translucent" | "outline";
     size?: "small" | "default" | "large";
-    color: "primary" | "success" | "danger" | "warning" | "info" | "dark" | "light" | "secondary";
+    color: Color;
 }>, {
     type: string;
     size: string;
 }>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     type?: "solid" | "translucent" | "outline";
     size?: "small" | "default" | "large";
-    color: "primary" | "success" | "danger" | "warning" | "info" | "dark" | "light" | "secondary";
+    color: Color;
 }>, {
     type: string;
     size: string;

package/circular-progress/index.d.ts

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

package/circular-progress/index.scss

@@ -0,0 +1,47 @@
+.sun-circular-progress {
+  width: var(--size);
+  height: var(--size);
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: calc((var(--size) - var(--stroke-width)) / 4.5);
+  /* 使用 conic-gradient 绘制环形进度，
+     使用 calc() 动态计算进度角度 */
+  background:
+    /* 内圆遮罩 */
+    radial-gradient(circle closest-side, #fff calc(var(--size) / 2 - var(--stroke-width)), transparent 0),
+    /* 外层环形进度 */ conic-gradient(var(--color) calc(var(--value) * 100 * 3.6deg), #f4f5f8 0);
+
+  &-primary {
+    --color: var(--color-primary);
+  }
+
+  &-secondary {
+    --color: var(--color-secondary);
+  }
+
+  &-danger {
+    --color: var(--color-danger);
+  }
+
+  &-success {
+    --color: var(--color-success);
+  }
+
+  &-warning {
+    --color: var(--color-warning);
+  }
+
+  &-info {
+    --color: var(--color-info);
+  }
+
+  &-light {
+    --color: var(--color-light);
+  }
+
+  &-dark {
+    --color: var(--color-dark);
+  }
+}

package/circular-progress/index.vue.d.ts

@@ -0,0 +1,37 @@
+import { Color } from '../typing';
+
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    value: number;
+    size: string;
+    strokeWidth: string;
+    color?: Color;
+}>, {
+    color: string;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    value: number;
+    size: string;
+    strokeWidth: string;
+    color?: Color;
+}>, {
+    color: string;
+}>>> & Readonly<{}>, {
+    color: Color;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/index.d.ts

@@ -1,5 +1,6 @@
 export * from './accordion';
 export * from './chip';
+export * from './circular-progress';
 export * from './fab';
 export * from './icon';
 export * from './lazy-render';

package/index.js

@@ -1,38 +1,40 @@
-import { SolarSun as r } from "./index2.js";
+import { SolarSun as e } from "./index2.js";
 import { default as u } from "./index3.js";
 import { default as f } from "./index4.js";
 import { default as S } from "./index5.js";
 import { default as p } from "./index6.js";
 import { default as m } from "./index7.js";
-import { default as s } from "./index8.js";
+import { default as x } from "./index8.js";
 import { default as c } from "./index9.js";
-import { default as T } from "./index10.js";
-import { default as k } from "./index11.js";
-import { default as C } from "./index12.js";
+import { default as g } from "./index10.js";
+import { default as T } from "./index11.js";
+import { default as v } from "./index12.js";
 import { default as I } from "./index13.js";
-import { default as h } from "./index14.js";
-import { default as y } from "./index15.js";
-import { default as A } from "./index16.js";
-import { default as G } from "./index17.js";
-import { default as N } from "./index18.js";
+import { default as R } from "./index14.js";
+import { default as w } from "./index15.js";
+import { default as z } from "./index16.js";
+import { default as B } from "./index17.js";
+import { default as L } from "./index18.js";
 import { default as V } from "./index19.js";
+import { default as q } from "./index20.js";
 export {
-  r as SolarSun,
+  e as SolarSun,
   u as SunAccordion,
   f as SunChip,
-  N as SunFab,
-  S as SunFabGroup,
-  p as SunIcon,
-  m as SunLazyRender,
-  s as SunNavbar,
-  c as SunPopover,
-  k as SunSegment,
+  S as SunCircularProgress,
+  V as SunFab,
+  p as SunFabGroup,
+  m as SunIcon,
+  x as SunLazyRender,
+  c as SunNavbar,
+  g as SunPopover,
+  v as SunSegment,
   T as SunSegmentBtn,
-  C as SunSpinner,
-  I as SunSudoku,
-  V as SunSudokuItem,
-  A as SunTb,
-  h as SunTbCell,
-  y as SunTbRow,
-  G as SunVirtualScroll
+  I as SunSpinner,
+  R as SunSudoku,
+  q as SunSudokuItem,
+  B as SunTb,
+  w as SunTbCell,
+  z as SunTbRow,
+  L as SunVirtualScroll
 };

package/index10.js

@@ -1,25 +1,62 @@
-import { defineComponent as p, inject as a, getCurrentInstance as c, onUnmounted as m, unref as u, renderSlot as i, mergeProps as _, openBlock as f, createElementBlock as v } from "vue";
-import { ACTIVE_CHILD as d, PARENT as g } from "./index36.js";
-const o = u, k = i, C = _, B = f, E = v, $ = /* @__PURE__ */ p({
-  __name: "segment-btn",
+import { defineComponent as l, renderSlot as s, createElementVNode as a, mergeProps as f, withModifiers as p, normalizeClass as i, normalizeStyle as u, openBlock as d, createElementBlock as c } from "vue";
+const n = s, t = a, v = f, m = p, y = i, g = u, w = d, S = c, x = { class: "sun-popover-trigger" }, k = /* @__PURE__ */ l({
+  __name: "index",
   props: {
-    value: {}
+    /** 是否显示 */
+    show: {
+      type: Boolean,
+      default: void 0
+    },
+    /** 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"
+    }
   },
-  setup(b) {
-    const l = a(d), e = a(g), n = c();
-    return m(() => {
-      e.unlink(n);
-    }), e.link(n), (t, r) => {
-      var s;
-      return B(), E("view", C(t.$attrs, {
-        class: ["sun-segment-btn", { "sun-segment-btn-active": ((s = o(l)) == null ? void 0 : s.props.value) === t.value }],
-        onTap: r[0] || (r[0] = (I) => o(e).active(o(n)))
+  setup(e) {
+    return (o, r) => (w(), S("view", {
+      class: y(["sun-popover", [{ "sun-popover-show": e.show }, `sun-popover-x-${e.x}`, `sun-popover-y-${e.y}`]]),
+      style: g({ "--popover-x-offset": e.offsetX, "--popover-y-offset": e.offsetY, "--popover-background": e.bg }),
+      onTap: m(($) => !1, ["stop"])
+    }, [
+      t("view", x, [
+        n(o.$slots, "default")
+      ]),
+      t("view", v(o.$attrs, {
+        class: "sun-popover-container",
+        style: { color: e.color }
       }), [
-        k(t.$slots, "default")
-      ], 16);
-    };
+        r[0] || (r[0] = t("view", { class: "sun-popover-arrow" }, null, -1)),
+        n(o.$slots, "content")
+      ], 16)
+    ], 38));
   }
 });
 export {
-  $ as default
+  k as default
 };

package/index11.js

@@ -1,56 +1,25 @@
-import { defineComponent as x, getCurrentInstance as V, shallowRef as E, shallowReactive as k, computed as c, provide as m, watch as C, onMounted as w, renderSlot as y, createElementVNode as B, mergeProps as I, openBlock as O, createElementBlock as A } from "vue";
-import { ACTIVE_CHILD as N, PARENT as P } from "./index36.js";
-const R = y, T = B, b = I, L = O, S = A, $ = { class: "sun-segment-inner" }, M = /* @__PURE__ */ x({
-  __name: "segment",
+import { defineComponent as p, inject as a, getCurrentInstance as c, onUnmounted as m, unref as u, renderSlot as i, mergeProps as _, openBlock as f, createElementBlock as v } from "vue";
+import { ACTIVE_CHILD as d, PARENT as g } from "./index38.js";
+const o = u, k = i, C = _, B = f, E = v, $ = /* @__PURE__ */ p({
+  __name: "segment-btn",
   props: {
-    modelValue: {}
+    value: {}
   },
-  emits: ["update:modelValue", "change"],
-  setup(v, { emit: f }) {
-    const d = f, u = v, g = V(), o = E(null), t = k([]), i = c(() => t.indexOf(o.value)), h = c(() => t.length), _ = c(() => ({
-      "--segment-length": h.value,
-      "--segment-active-index": i.value
-    }));
-    m(N, o), m(P, {
-      link: (e) => {
-        const n = p();
-        t.push(e), t.sort((a, s) => {
-          const l = n.indexOf(a.vnode), r = n.indexOf(s.vnode);
-          return l - r;
-        });
-      },
-      unlink: (e) => {
-        t.slice(t.indexOf(e), 1);
-      },
-      active: (e) => {
-        d("change", {
-          value: e.props.value,
-          index: i.value
-        }), d("update:modelValue", e.props.value), o.value = e;
-      }
-    }), C(() => u.modelValue, (e) => {
-      o.value = t.find((n) => n.props.value === e);
-    });
-    function p() {
-      return g.subTree.children[0].children[0].children.filter((e) => typeof e.type != "symbol");
-    }
-    return w(() => {
-      const e = p();
-      t.forEach((n) => {
-        var s, l;
-        const a = e.findIndex((r) => r === n.vnode);
-        (l = (s = n.props).value) != null || (s.value = a), n.props.value === u.modelValue && (o.value = n);
-      });
-    }), (e, n) => (L(), S("view", b(e.$attrs, {
-      class: "sun-segment",
-      style: _.value
-    }), [
-      T("view", $, [
-        R(e.$slots, "default")
-      ])
-    ], 16));
+  setup(b) {
+    const l = a(d), e = a(g), n = c();
+    return m(() => {
+      e.unlink(n);
+    }), e.link(n), (t, r) => {
+      var s;
+      return B(), E("view", C(t.$attrs, {
+        class: ["sun-segment-btn", { "sun-segment-btn-active": ((s = o(l)) == null ? void 0 : s.props.value) === t.value }],
+        onTap: r[0] || (r[0] = (I) => o(e).active(o(n)))
+      }), [
+        k(t.$slots, "default")
+      ], 16);
+    };
   }
 });
 export {
-  M as default
+  $ as default
 };

package/index12.js

@@ -1,35 +1,56 @@
-import { defineComponent as a, computed as c, renderList as p, Fragment as m, openBlock as d, createElementBlock as u, createElementVNode as _, renderSlot as f, createCommentVNode as k, normalizeClass as g } from "vue";
-const v = p, B = m, e = d, n = u, o = _, C = f, N = k, w = g, z = { class: "sun-spinner-dot" }, E = {
-  key: 0,
-  class: "sun-spinner-desc"
-}, y = /* @__PURE__ */ a({
-  __name: "index",
+import { defineComponent as x, getCurrentInstance as V, shallowRef as E, shallowReactive as k, computed as c, provide as m, watch as C, onMounted as w, renderSlot as y, createElementVNode as B, mergeProps as I, openBlock as O, createElementBlock as A } from "vue";
+import { ACTIVE_CHILD as N, PARENT as P } from "./index38.js";
+const R = y, T = B, b = I, L = O, S = A, $ = { class: "sun-segment-inner" }, M = /* @__PURE__ */ x({
+  __name: "segment",
   props: {
-    size: {},
-    spinning: { type: Boolean }
+    modelValue: {}
   },
-  setup(r) {
-    const s = r, i = c(() => [
-      {
-        "sun-spinner-spinning": s.spinning
+  emits: ["update:modelValue", "change"],
+  setup(v, { emit: f }) {
+    const d = f, u = v, g = V(), o = E(null), t = k([]), i = c(() => t.indexOf(o.value)), h = c(() => t.length), _ = c(() => ({
+      "--segment-length": h.value,
+      "--segment-active-index": i.value
+    }));
+    m(N, o), m(P, {
+      link: (e) => {
+        const n = p();
+        t.push(e), t.sort((a, s) => {
+          const l = n.indexOf(a.vnode), r = n.indexOf(s.vnode);
+          return l - r;
+        });
       },
-      `sun-spinner-${s.size}`
-    ]);
-    return (t, V) => (e(), n("view", {
-      class: w(["sun-spinner", i.value])
-    }, [
-      o("view", z, [
-        (e(), n(B, null, v(4, (l) => o("view", {
-          key: l,
-          class: "sun-spinner-dot-item"
-        })), 64))
-      ]),
-      t.$slots.default ? (e(), n("view", E, [
-        C(t.$slots, "default")
-      ])) : N("", !0)
-    ], 2));
+      unlink: (e) => {
+        t.slice(t.indexOf(e), 1);
+      },
+      active: (e) => {
+        d("change", {
+          value: e.props.value,
+          index: i.value
+        }), d("update:modelValue", e.props.value), o.value = e;
+      }
+    }), C(() => u.modelValue, (e) => {
+      o.value = t.find((n) => n.props.value === e);
+    });
+    function p() {
+      return g.subTree.children[0].children[0].children.filter((e) => typeof e.type != "symbol");
+    }
+    return w(() => {
+      const e = p();
+      t.forEach((n) => {
+        var s, l;
+        const a = e.findIndex((r) => r === n.vnode);
+        (l = (s = n.props).value) != null || (s.value = a), n.props.value === u.modelValue && (o.value = n);
+      });
+    }), (e, n) => (L(), S("view", b(e.$attrs, {
+      class: "sun-segment",
+      style: _.value
+    }), [
+      T("view", $, [
+        R(e.$slots, "default")
+      ])
+    ], 16));
   }
 });
 export {
-  y as default
+  M as default
 };

package/index13.js

@@ -1,27 +1,35 @@
-import { defineComponent as u, computed as n, renderSlot as c, mergeProps as r, openBlock as l, createElementBlock as d } from "vue";
-const a = c, m = r, p = l, k = d, _ = /* @__PURE__ */ u({
-  __name: "sudoku",
+import { defineComponent as a, computed as c, renderList as p, Fragment as m, openBlock as d, createElementBlock as u, createElementVNode as _, renderSlot as f, createCommentVNode as k, normalizeClass as g } from "vue";
+const v = p, B = m, e = d, n = u, o = _, C = f, N = k, w = g, z = { class: "sun-spinner-dot" }, E = {
+  key: 0,
+  class: "sun-spinner-desc"
+}, y = /* @__PURE__ */ a({
+  __name: "index",
   props: {
-    size: String,
-    count: {
-      type: Number,
-      default: 9
-    }
+    size: {},
+    spinning: { type: Boolean }
   },
-  setup(o) {
-    const e = o, t = n(() => ({
-      "sun-sudoku-sm": e.count === 1,
-      "sun-sudoku-md": e.count === 2 || e.count === 4,
-      "sun-sudoku-lg": e.count === 3 || e.count > 4
-    }));
-    return (s, i) => (p(), k("view", m(s.$attrs, {
-      class: ["sun-sudoku", t.value],
-      style: { "--sudoku-width": o.size }
-    }), [
-      a(s.$slots, "default")
-    ], 16));
+  setup(r) {
+    const s = r, i = c(() => [
+      {
+        "sun-spinner-spinning": s.spinning
+      },
+      `sun-spinner-${s.size}`
+    ]);
+    return (t, V) => (e(), n("view", {
+      class: w(["sun-spinner", i.value])
+    }, [
+      o("view", z, [
+        (e(), n(B, null, v(4, (l) => o("view", {
+          key: l,
+          class: "sun-spinner-dot-item"
+        })), 64))
+      ]),
+      t.$slots.default ? (e(), n("view", E, [
+        C(t.$slots, "default")
+      ])) : N("", !0)
+    ], 2));
   }
 });
 export {
-  _ as default
+  y as default
 };

package/index14.js

@@ -1,28 +1,27 @@
-import { defineComponent as o, computed as r, renderSlot as i, mergeProps as n, openBlock as c, createElementBlock as a } from "vue";
-const p = i, d = n, m = c, k = a, b = /* @__PURE__ */ o({
-  __name: "table-cell",
+import { defineComponent as u, computed as n, renderSlot as c, mergeProps as r, openBlock as l, createElementBlock as d } from "vue";
+const a = c, m = r, p = l, k = d, _ = /* @__PURE__ */ u({
+  __name: "sudoku",
   props: {
-    sticky: {},
-    width: {},
-    maxWidth: {},
-    ellipsis: { type: Boolean },
-    breakWord: { type: Boolean }
+    size: String,
+    count: {
+      type: Number,
+      default: 9
+    }
   },
-  setup(l) {
-    const t = l, s = r(() => ({
-      "sun-tb-cell-sticky-left": t.sticky === "left",
-      "sun-tb-cell-sticky-right": t.sticky === "right",
-      "sun-tb-cell-ellipsis": t.ellipsis,
-      "sun-tb-cell-break-word": t.breakWord
+  setup(o) {
+    const e = o, t = n(() => ({
+      "sun-sudoku-sm": e.count === 1,
+      "sun-sudoku-md": e.count === 2 || e.count === 4,
+      "sun-sudoku-lg": e.count === 3 || e.count > 4
     }));
-    return (e, u) => (m(), k("view", d(e.$attrs, {
-      class: ["sun-tb-cell", s.value],
-      style: { width: e.width, "min-width": e.width, "max-width": e.maxWidth }
+    return (s, i) => (p(), k("view", m(s.$attrs, {
+      class: ["sun-sudoku", t.value],
+      style: { "--sudoku-width": o.size }
     }), [
-      p(e.$slots, "default")
+      a(s.$slots, "default")
     ], 16));
   }
 });
 export {
-  b as default
+  _ as default
 };

package/index15.js

@@ -1,18 +1,28 @@
-import { defineComponent as o, renderSlot as t, mergeProps as r, openBlock as n, createElementBlock as s } from "vue";
-const a = t, l = r, p = n, c = s, u = /* @__PURE__ */ o({
-  __name: "table-row",
+import { defineComponent as o, computed as r, renderSlot as i, mergeProps as n, openBlock as c, createElementBlock as a } from "vue";
+const p = i, d = n, m = c, k = a, b = /* @__PURE__ */ o({
+  __name: "table-cell",
   props: {
-    head: { type: Boolean },
-    foot: { type: Boolean }
+    sticky: {},
+    width: {},
+    maxWidth: {},
+    ellipsis: { type: Boolean },
+    breakWord: { type: Boolean }
   },
-  setup(m) {
-    return (e, d) => (p(), c("view", l(e.$attrs, {
-      class: ["sun-tb-row", { "sun-tb-head": e.head, "sun-tb-foot": e.foot }]
+  setup(l) {
+    const t = l, s = r(() => ({
+      "sun-tb-cell-sticky-left": t.sticky === "left",
+      "sun-tb-cell-sticky-right": t.sticky === "right",
+      "sun-tb-cell-ellipsis": t.ellipsis,
+      "sun-tb-cell-break-word": t.breakWord
+    }));
+    return (e, u) => (m(), k("view", d(e.$attrs, {
+      class: ["sun-tb-cell", s.value],
+      style: { width: e.width, "min-width": e.width, "max-width": e.maxWidth }
     }), [
-      a(e.$slots, "default")
+      p(e.$slots, "default")
     ], 16));
   }
 });
 export {
-  u as default
+  b as default
 };

package/index16.js

@@ -1,35 +1,18 @@
-import { defineComponent as a, computed as t, renderSlot as l, normalizeClass as u, createElementVNode as d, mergeProps as b, openBlock as c, createElementBlock as p } from "vue";
-const m = l, i = u, B = d, _ = b, z = c, y = p, k = /* @__PURE__ */ a({
-  __name: "table",
+import { defineComponent as o, renderSlot as t, mergeProps as r, openBlock as n, createElementBlock as s } from "vue";
+const a = t, l = r, p = n, c = s, u = /* @__PURE__ */ o({
+  __name: "table-row",
   props: {
-    rounded: { type: Boolean, default: !0 },
-    bordered: { type: Boolean },
-    outerBordered: { type: Boolean, default: !0 },
-    zebra: { type: Boolean },
-    size: {},
-    layout: {}
+    head: { type: Boolean },
+    foot: { type: Boolean }
   },
-  setup(r) {
-    const e = r, n = t(() => ({
-      "sun-tb-rounded": e.rounded,
-      "sun-tb-bordered": e.bordered,
-      "sun-tb-outer-bordered": e.outerBordered,
-      [`sun-tb-size-${e.size}`]: e.size
-    })), s = t(() => ({
-      "sun-tb-zebra": e.zebra,
-      [`sun-tb-layout-${e.layout}`]: e.layout
-    }));
-    return (o, f) => (z(), y("view", _(o.$attrs, {
-      class: ["sun-tb", n.value]
+  setup(m) {
+    return (e, d) => (p(), c("view", l(e.$attrs, {
+      class: ["sun-tb-row", { "sun-tb-head": e.head, "sun-tb-foot": e.foot }]
     }), [
-      B("view", {
-        class: i(["sun-tb-inner", s.value])
-      }, [
-        m(o.$slots, "default")
-      ], 2)
+      a(e.$slots, "default")
     ], 16));
   }
 });
 export {
-  k as default
+  u as default
 };