savor-ui 0.0.1

package/dist/es/theme/components/wheel.scss

@@ -0,0 +1,107 @@
+@use "../mixins/function.scss" as *;
+@use "../mixins/mixins.scss" as *;
+
+@include b(wheel) {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: getCssVar("color", "bg-2");
+  position: relative;
+  color: getCssVar("color", "text-1");
+  box-sizing: border-box;
+  font-size: 14px;
+
+  &:hover {
+    @include be(wheel, mask-top) {
+      background: linear-gradient(to bottom, rgba(#3867d6, 0.05) 0%, rgba(#3867d6, 0.3) 100%);
+    }
+
+    @include be(wheel, mask-bottom) {
+      background: linear-gradient(to top, rgba(#3867d6, 0.05) 0%, rgba(#3867d6, 0.3) 100%);
+    }
+
+    @include be(wheel, mask-center) {
+      border-top-color: getCssVar("color", "primary-6");
+      border-bottom-color: getCssVar("color", "primary-6");
+    }
+  }
+
+  // 箭头样式
+  @include e(arrow) {
+    width: 100%;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    font-size: 18px;
+    user-select: none;
+    color: getCssVar("color", "text-2");
+    &:hover {
+      color: getCssVar("color", "primary-6");
+    }
+  }
+
+  // 滚动列表容器
+  @include e(list) {
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+  }
+
+  // 列表内层（滚动容器）
+  @include e(list-inner) {
+    transition: transform 0.2s getCssVar("bezier", "1");
+    width: 100%;
+  }
+
+  // 选项样式
+  @include e(item) {
+    padding: 0 12px;
+    text-align: center;
+    transition: color 0.2s;
+    color: getCssVar("color", "text-3");
+    width: 100%;
+
+    @include when(active) {
+      color: getCssVar("color", "text-1");
+      font-weight: 550;
+    }
+  }
+
+  @include e(mask) {
+    position: absolute;
+    left: 0;
+    right: 0;
+    pointer-events: none;
+    display: flex;
+    flex-direction: column;
+    z-index: 1;
+  }
+  // 顶部遮罩
+  @include e(mask-top) {
+    background: linear-gradient(
+      to bottom,
+      rgba(255, 255, 255, 0.8) 0%,
+      rgba(255, 255, 255, 0.1) 100%
+    );
+    flex: 0 0 auto;
+  }
+
+  // 底部遮罩
+  @include e(mask-bottom) {
+    background: linear-gradient(to top, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.2) 100%);
+    flex: 0 0 auto;
+  }
+
+  // 中间选中框
+  @include e(mask-center) {
+    border-top-style: solid;
+    border-top-width: 1px;
+    border-top-color: getCssVar("color", "fill-3");
+    border-bottom-style: solid;
+    border-bottom-width: 1px;
+    border-bottom-color: getCssVar("color", "fill-3");
+    flex: 0 0 auto;
+  }
+}

package/dist/es/theme/index.scss

@@ -0,0 +1,2 @@
+@use "./common/index.scss" as *;
+@use "./components/index.scss" as *;

package/dist/es/theme/mixins/_var.scss

@@ -0,0 +1,223 @@
+@use "sass:color";
+@use "sass:math";
+@use "sass:string";
+@use "sass:list";
+@use "sass:map";
+@use "../mixins/config.scss" as *;
+
+// rgb转16进制
+@function rgb2hex($color) {
+  $ie-hex: color.ie-hex-str($color);
+  $hex-part: string.slice($ie-hex, 4);
+  @return string.unquote("#" + $hex-part);
+}
+
+// HSL转HSV
+@function _hsl-to-hsv($color) {
+  $h: color.channel($color, "hue", $space: hsl);
+  $s: math.div(color.channel($color, "saturation", $space: hsl), 100%);
+  $l: math.div(color.channel($color, "lightness", $space: hsl), 100%);
+
+  $v: $l + $s * math.min($l, 1 - $l);
+
+  $s-hsv: 0;
+  @if $v != 0 {
+    $s-hsv: 2 * (1 - math.div($l, $v));
+  }
+
+  @return (h: $h, s: $s-hsv, v: $v);
+}
+
+// HSV转颜色
+@function _hsv-to-color($h, $s, $v) {
+  $l: $v * (1 - math.div($s, 2));
+
+  $s-hsl: 0;
+  @if $l != 0 and $l != 1 {
+    $s-hsl: math.div($v - $l, math.min($l, 1 - $l));
+  }
+
+  @return hsl($h, $s-hsl * 100%, $l * 100%);
+}
+
+// 亮色模式色阶 (返回颜色对象)
+@function color-level($base-color, $level) {
+  @if $level == 6 {
+    @return $base-color;
+  }
+
+  $hsv: _hsl-to-hsv($base-color);
+  $h: map.get($hsv, h);
+  $s: map.get($hsv, s);
+  $v: map.get($hsv, v);
+
+  $is-light: $level < 6;
+  $i: 0;
+  @if $is-light {
+    $i: 6 - $level;
+  } @else {
+    $i: $level - 6;
+  }
+
+  // 色相调整 (冷色60°~240°: 浅色减深色加; 暖色反之)
+  $hue-step: 2;
+  $is-cold: $h >= 60 and $h <= 240;
+  $new-h: $h;
+  @if $is-cold {
+    @if $is-light {
+      $new-h: $h - $hue-step * $i;
+    } @else {
+      $new-h: $h + $hue-step * $i;
+    }
+  } @else {
+    @if $is-light {
+      $new-h: $h + $hue-step * $i;
+    } @else {
+      $new-h: $h - $hue-step * $i;
+    }
+  }
+  @if $new-h < 0 {
+    $new-h: $new-h + 360;
+  }
+  @if $new-h >= 360 {
+    $new-h: $new-h - 360;
+  }
+
+  // 饱和度调整 (浅色快速递减, 深色缓慢递增, 最深色特殊处理)
+  $saturation-step: 0.16;
+  $saturation-step2: 0.05;
+  $new-s: $s;
+  @if $is-light {
+    $new-s: $s - $saturation-step * $i;
+  } @else {
+    @if $i == 4 {
+      $new-s: $s + $saturation-step;
+    } @else {
+      $new-s: $s + $saturation-step2 * $i;
+    }
+  }
+  @if $new-s > 1 {
+    $new-s: 1;
+  }
+  @if $is-light and $i == 5 and $new-s > 0.1 {
+    $new-s: 0.1;
+  }
+  @if $new-s < 0.06 {
+    $new-s: 0.06;
+  }
+
+  // 亮度调整 (浅色缓慢递增, 深色快速递减)
+  $brightness-step1: 0.05;
+  $brightness-step2: 0.15;
+  $new-v: $v;
+  @if $is-light {
+    $new-v: $v + $brightness-step1 * $i;
+  } @else {
+    $new-v: $v - $brightness-step2 * $i;
+  }
+  @if $new-v > 1 {
+    $new-v: 1;
+  }
+  @if $new-v < 0 {
+    $new-v: 0;
+  }
+
+  @return _hsv-to-color($new-h, $new-s, $new-v);
+}
+
+// 生成亮色CSS变量
+@mixin generate-color-variables-light($colors) {
+  @each $name, $base-color in $colors {
+    @if list.index(("white", "black"), $name) == null {
+      @for $level from 1 through 10 {
+        $level-color: color-level($base-color, $level);
+        --#{$namespace}-color-#{$name}-#{$level}: #{rgb2hex($level-color)};
+      }
+    } @else {
+      --#{$namespace}-color-#{$name}: #{rgb2hex($base-color)};
+    }
+  }
+}
+
+// 暗色模式背景色
+$dark-bg: #141414 !default;
+
+// 暗色模式色阶
+@function color-level-dark($light-base-color, $level) {
+  $dark-map: (
+    1: (
+      light-level: 8,
+      amount: 15%,
+    ),
+    2: (
+      light-level: 7,
+      amount: 25%,
+    ),
+    3: (
+      light-level: 6,
+      amount: 30%,
+    ),
+    4: (
+      light-level: 6,
+      amount: 45%,
+    ),
+    5: (
+      light-level: 6,
+      amount: 65%,
+    ),
+    6: (
+      light-level: 6,
+      amount: 85%,
+    ),
+    7: (
+      light-level: 5,
+      amount: 90%,
+    ),
+    8: (
+      light-level: 4,
+      amount: 95%,
+    ),
+    9: (
+      light-level: 3,
+      amount: 97%,
+    ),
+    10: (
+      light-level: 2,
+      amount: 98%,
+    ),
+  );
+
+  $entry: map.get($dark-map, $level);
+  $light-level: map.get($entry, light-level);
+  $amount: map.get($entry, amount);
+
+  $light-color: color-level($light-base-color, $light-level);
+
+  @return color.mix($light-color, $dark-bg, $amount);
+}
+
+// 暗色基础色转换
+@function light-to-dark($color) {
+  @return color.mix($color, $dark-bg, 85%);
+}
+
+// 生成暗色CSS变量
+@mixin generate-color-variables-dark($colors) {
+  @each $name, $base-color in $colors {
+    @if list.index(("white", "black"), $name) == null {
+      @for $level from 1 through 10 {
+        $level-color: color-level-dark($base-color, $level);
+        --#{$namespace}-color-#{$name}-#{$level}: #{rgb2hex($level-color)};
+      }
+    } @else {
+      --#{$namespace}-color-#{$name}: #{rgb2hex($base-color)};
+    }
+  }
+}
+
+// 通用变量生成
+@mixin generate-css-variables($map, $name) {
+  @each $key, $value in $map {
+    --#{$namespace}-#{$name}-#{$key}: #{$value};
+  }
+}

package/dist/es/theme/mixins/config.scss

@@ -0,0 +1,5 @@
+$namespace: 's' !default;
+$common-separator: '-' !default;
+$element-separator: '__' !default;
+$modifier-separator: '--' !default;
+$state-prefix: 'is-' !default;

package/dist/es/theme/mixins/function.scss

@@ -0,0 +1,23 @@
+@use '../mixins/config.scss' as *;
+
+// join var name
+// joinVarName(('color', 'fill-1')) => '--l-color-fill-1'
+@function joinVarName($list) {
+  $name: '--' + $namespace;
+  @each $item in $list {
+    @if $item != '' {
+      $name: $name + '-' + $item;
+    }
+  }
+  @return $name;
+}
+
+// getCssVarName('color', 'fill-1') => '--l-color-fill-1'
+@function getCssVarName($args...) {
+  @return joinVarName($args);
+}
+
+// getCssVar('color', 'fill-1') => var(--l-color-fill-1)
+@function getCssVar($args...) {
+  @return var(#{joinVarName($args)});
+}

package/dist/es/theme/mixins/mixins.scss

@@ -0,0 +1,216 @@
+@use "../mixins/config.scss" as *;
+
+/**
+ * BEM 块
+ * @param {String} $block 块名称
+ * @usage @include b(button) {}
+ * @output .ns-button {}
+ */
+@mixin b($block) {
+  .#{$namespace}#{$common-separator}#{$block} {
+    @content;
+  }
+}
+
+/**
+ * BEM 元素
+ * @param {String | List} $element 元素名称
+ * @usage @include e(icon) {}
+ * @output .ns-button__icon {}
+ */
+@mixin e($element) {
+  @each $e in $element {
+    &#{$element-separator}#{$e} {
+      @content;
+    }
+  }
+}
+
+/**
+ * 块+元素 选择器
+ * @usage @include be(button, icon) {}
+ * @output .ns-button__icon {}
+ */
+@mixin be($block, $element) {
+  .#{$namespace}#{$common-separator}#{$block}#{$element-separator}#{$element} {
+    @content;
+  }
+}
+
+/**
+ * 当前元素内部的 be
+ * @usage @include within-be(button, icon) {}
+ * @output & .ns-button__icon {}
+ */
+@mixin within-be($block, $element) {
+  & .#{$namespace}#{$common-separator}#{$block}#{$element-separator}#{$element} {
+    @content;
+  }
+}
+
+/**
+ * 当前元素同时拥有当前类 + be
+ * @usage @include this-be(button, icon) {}
+ * @output &.ns-button__icon {}
+ */
+@mixin this-be($block, $element) {
+  &.#{$namespace}#{$common-separator}#{$block}#{$element-separator}#{$element} {
+    @content;
+  }
+}
+
+/**
+ * 当前元素后面的所有同级 be
+ * @usage @include next-be(button, icon) {}
+ * @output & ~ .ns-button__icon {}
+ */
+@mixin next-be($block, $element) {
+  $sel: #{$namespace}#{$common-separator}#{$block}#{$element-separator}#{$element};
+  & ~ .#{$sel} {
+    @content;
+  }
+}
+
+/**
+ * 当前元素的直接子级 be
+ * @usage @include child-be(button, icon) {}
+ * @output > .ns-button__icon {}
+ */
+@mixin child-be($block, $element) {
+  $sel: #{$namespace}#{$common-separator}#{$block}#{$element-separator}#{$element};
+  > .#{$sel} {
+    @content;
+  }
+}
+
+/**
+ * 内部包含 be 时，选中当前元素
+ * @usage @include has-be(button, icon) {}
+ * @output &:has(.ns-button__icon) {}
+ */
+@mixin has-be($block, $element) {
+  $sel: #{$namespace}#{$common-separator}#{$block}#{$element-separator}#{$element};
+  &:has(.#{$sel}) {
+    @content;
+  }
+}
+
+/**
+ * BEM 修饰符
+ * @param {String | List} $modifier 修饰符名称
+ * @usage @include m(primary) {}
+ * @output .ns-button--primary {}
+ */
+@mixin m($modifier) {
+  @each $m in $modifier {
+    &#{$modifier-separator}#{$m} {
+      @content;
+    }
+  }
+}
+
+/**
+ * 块+修饰符 选择器
+ * @usage @include bm(button, primary) {}
+ * @output .ns-button--primary {}
+ */
+@mixin bm($block, $modifier) {
+  .#{$namespace}#{$common-separator}#{$block}#{$modifier-separator}#{$modifier} {
+    @content;
+  }
+}
+
+/**
+ * 当前元素内部的 bm
+ * @usage @include within-bm(button, primary) {}
+ * @output & .ns-button--primary {}
+ */
+@mixin within-bm($block, $modifier) {
+  & .#{$namespace}#{$common-separator}#{$block}#{$modifier-separator}#{$modifier} {
+    @content;
+  }
+}
+
+/**
+ * 当前元素同时拥有当前类 + bm
+ * @usage @include this-bm(button, primary) {}
+ * @output &.ns-button--primary {}
+ */
+@mixin this-bm($block, $modifier) {
+  &.#{$namespace}#{$common-separator}#{$block}#{$modifier-separator}#{$modifier} {
+    @content;
+  }
+}
+
+/**
+ * 当前元素后面的所有同级 bm
+ * @usage @include next-bm(button, primary) {}
+ * @output & ~ .ns-button--primary {}
+ */
+@mixin next-bm($block, $modifier) {
+  $sel: #{$namespace}#{$common-separator}#{$block}#{$modifier-separator}#{$modifier};
+  & ~ .#{$sel} {
+    @content;
+  }
+}
+
+/**
+ * 当前元素的直接子级 bm
+ * @usage @include child-bm(button, primary) {}
+ * @output > .ns-button--primary {}
+ */
+@mixin child-bm($block, $modifier) {
+  $sel: #{$namespace}#{$common-separator}#{$block}#{$modifier-separator}#{$modifier};
+  > .#{$sel} {
+    @content;
+  }
+}
+
+/**
+ * 内部包含 bm 时，选中当前元素
+ * @usage @include has-bm(button, primary) {}
+ * @output &:has(.ns-button--primary) {}
+ */
+@mixin has-bm($block, $modifier) {
+  $sel: #{$namespace}#{$common-separator}#{$block}#{$modifier-separator}#{$modifier};
+  &:has(.#{$sel}) {
+    @content;
+  }
+}
+
+/**
+ * 元素状态（禁用、激活等）
+ * @usage @include is(disabled, active) {}
+ * @output &.is-disabled {}
+ */
+@mixin when($states...) {
+  @each $state in $states {
+    &.#{$state-prefix}#{$state} {
+      @content;
+    }
+  }
+}
+
+/**
+ * 不包含元素状态（禁用、激活等）
+ * @usage @include not-when(disabled, active) {}
+ * @output &:not(.is-disabled, .is-active) {}
+ */
+@mixin not-when($states...) {
+  @each $state in $states {
+    &:not(.#{$state-prefix}#{$state}) {
+      @content;
+    }
+  }
+}
+
+/**
+ * 当前元素同时拥有当前类 + is状态
+ * @usage @include this-is(disabled) {}
+ * @output &.is-disabled {}
+ */
+@mixin this-is($state) {
+  &.#{$state-prefix}#{$state} {
+    @content;
+  }
+}

package/dist/es/utils/index.d.ts

@@ -0,0 +1,4 @@
+export * from './src/install';
+export * from './src/render';
+export * from './src/tool';
+export * from './src/vnodes';

package/dist/es/utils/index.mjs

@@ -0,0 +1,4 @@
+import "./src/install.mjs";
+import "./src/render.mjs";
+import "./src/tool.mjs";
+import "./src/vnodes.mjs";

package/dist/es/utils/src/install.d.ts

@@ -0,0 +1,5 @@
+import { Plugin } from 'vue';
+type SFCWithInstall<T> = T & Plugin;
+export declare const makeInstaller: (components: Plugin[]) => Plugin;
+export declare const withInstall: <T>(comppnent: T) => SFCWithInstall<T>;
+export {};

package/dist/es/utils/src/install.mjs

@@ -0,0 +1,11 @@
+//#region ../utils/src/install.ts
+var e = (e) => (t) => {
+	e.forEach((e) => {
+		t.use(e);
+	});
+}, t = (e) => (e.install = (t) => {
+	let n = e.name;
+	t.component(n, e);
+}, e);
+//#endregion
+export { e as makeInstaller, t as withInstall };

package/dist/es/utils/src/render.d.ts

@@ -0,0 +1,24 @@
+import { PropType, VNode, DefineComponent, ExtractPropTypes, RendererNode, RendererElement, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+export declare const RenderVnode: DefineComponent<ExtractPropTypes<{
+    vnode: {
+        type: PropType<string | VNode | VNode[] | undefined>;
+        required: false;
+        default: () => null;
+    };
+}>, () => string | VNode< RendererNode, RendererElement, {
+    [key: string]: any;
+}> | VNode< RendererNode, RendererElement, {
+    [key: string]: any;
+}>[], {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly< ExtractPropTypes<{
+    vnode: {
+        type: PropType<string | VNode | VNode[] | undefined>;
+        required: false;
+        default: () => null;
+    };
+}>> & Readonly<{}>, {
+    vnode: string | VNode< RendererNode, RendererElement, {
+        [key: string]: any;
+    }> | VNode< RendererNode, RendererElement, {
+        [key: string]: any;
+    }>[] | undefined;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

package/dist/es/utils/src/render.mjs

@@ -0,0 +1,14 @@
+import { defineComponent as e } from "vue";
+//#region ../utils/src/render.ts
+var t = e({
+	props: { vnode: {
+		type: [String, Object],
+		required: !1,
+		default: () => null
+	} },
+	setup(e) {
+		return () => e.vnode ?? null;
+	}
+});
+//#endregion
+export { t as RenderVnode };

package/dist/es/utils/src/tool.d.ts

@@ -0,0 +1,24 @@
+/**
+ * 防抖函数 - 延迟执行函数，若在延迟期间再次调用，则重置延迟时间
+ * @param func 需要防抖的函数
+ * @param delay 延迟时间（毫秒）
+ * @returns 包装后的防抖函数
+ */
+export declare const debounce: <T extends (...args: any[]) => any>(func: T, delay: number) => {
+    (...args: Parameters<T>): void;
+    cancel: () => void;
+};
+/**
+ * 生成随机id
+ */
+export declare const randomId: (length: number, isLower?: boolean) => string;
+/**
+ * 获取尺寸
+ * @param value 尺寸值
+ * @returns 尺寸字符串
+ */
+export declare const getSize: (value: string | number | undefined) => string;
+/**
+ * 添加千分位分隔符
+ */
+export declare const addGroupSeparator: (numStr: string) => string;

package/dist/es/utils/src/tool.mjs

@@ -0,0 +1,27 @@
+//#region ../utils/src/tool.ts
+var e = (e, t) => {
+	let n = null, r = (...r) => {
+		n && clearTimeout(n), n = window.setTimeout(() => {
+			e(...r), n = null;
+		}, t);
+	};
+	return r.cancel = () => {
+		n &&= (clearTimeout(n), null);
+	}, r;
+}, t = (e, t = !0) => {
+	let n = "", r = t ? "abcdefghijklmnopqrstuvwxyz0123456789" : "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+	for (let t = 0; t < e; t++) {
+		let e = Math.round(Math.random() * (r.length - 1));
+		n += r.substring(e, e + 1);
+	}
+	return n;
+}, n = (e) => {
+	if (!e) return "";
+	let t;
+	return t = typeof e == "number" ? e + "px" : e.includes("%") || e === "auto" ? e : e.replace(/px$/, "") + "px", t;
+}, r = (e) => {
+	let t = e.split(".");
+	return t[0] = t[0].replace(/\B(?=(\d{3})+(?!\d))/g, ","), t.join(".");
+};
+//#endregion
+export { r as addGroupSeparator, e as debounce, n as getSize, t as randomId };