@qi-tian-da-sheng/bin-project-ui 1.0.0

package/packages/hooks/useVModel.ts

@@ -0,0 +1,65 @@
+/*
+ * @description: VModel
+ * @author: MC.Yang
+ */
+import {getCurrentInstance, Ref, ref} from 'vue';
+import {kebabCase} from "@bin-ui/tools";
+
+export type ChangeHandler<T, P extends any[]> = (value: T, ...args: P) => void;
+
+/**
+ * VModel
+ * @param value value
+ * @param modelValue modelValue
+ * @param defaultValue defaultValue
+ * @param onChange onChange
+ * @param propName propName
+ */
+export default function useVModel<T, P extends any[]>(
+    value: Ref<T | undefined>,
+    modelValue: Ref<T | undefined>,
+    defaultValue: T | undefined,
+    onChange: ChangeHandler<T, P> | undefined,
+    propName? = 'value',
+): [Ref<T | undefined>, ChangeHandler<T, P>] {
+    const instance = getCurrentInstance();
+    const internalValue = ref();
+    const vProps = instance?.vnode.props || {};
+
+    const isVM =
+        Object.prototype.hasOwnProperty.call(vProps, 'modelValue') ||
+        Object.prototype.hasOwnProperty.call(vProps, 'model-value');
+
+    if (isVM) {
+        return [
+            modelValue,
+            (newValue, ...args) => {
+                instance?.emit('update:modelValue', newValue);
+                onChange?.(newValue, ...args);
+            },
+        ];
+    }
+
+    const isVMP =
+        Object.prototype.hasOwnProperty.call(vProps, propName) ||
+        Object.prototype.hasOwnProperty.call(vProps, kebabCase(propName));
+
+    if (isVMP) {
+        return [
+            value,
+            (newValue, ...args) => {
+                instance?.emit(`update:${propName}`, newValue);
+                onChange?.(newValue, ...args);
+            },
+        ];
+    }
+
+    internalValue.value = defaultValue;
+    return [
+        internalValue,
+        (newValue, ...args) => {
+            internalValue.value = newValue;
+            onChange?.(newValue, ...args);
+        },
+    ];
+}

package/packages/styles/animate.css

@@ -0,0 +1,31 @@
+/*
+ * @description: UI 组件动画和过渡样式
+ * @author: MC.Yang
+ */
+
+@keyframes down {
+    0% {
+        transform: translateY(-20px);
+    }
+    100% {
+        transform: translateY(0);
+    }
+}
+
+@keyframes fade {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes rotate {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}

package/packages/styles/animation/_index.less

@@ -0,0 +1,17 @@
+/*
+ * @description: UI 组件动画样式
+ * @author: MC.Yang
+ */
+@import "fade/fadeDown";
+@import "fade/fadeLeft";
+@import "fade/fadeRight";
+@import "fade/fadeUp";
+@import "fade/fade";
+
+@import "only";
+
+@import "scale/scale";
+@import "scale/scaleVertical";
+@import "scale/scaleHorizontal";
+
+@import "extra";

package/packages/styles/animation/extra.less

@@ -0,0 +1,21 @@
+.p-transition-collapse--vertical-leave-active,
+.p-transition-collapse--vertical-enter-active {
+  clip-path: inset(0);
+  transition: clip-path .3s cubic-bezier(0.23, 1, 0.72, 1);
+}
+
+.p-transition-collapse--vertical-enter-from,
+.p-transition-collapse--vertical-leave-to {
+  clip-path: inset(0 0 100% 0);
+}
+
+.p-transition-collapse--horizontal-leave-active,
+.p-transition-collapse--horizontal-enter-active {
+  clip-path: inset(0);
+  transition: clip-path .3s cubic-bezier(0.23, 1, 0.72, 1);
+}
+
+.p-transition-collapse--horizontal-enter-from,
+.p-transition-collapse--horizontal-leave-to {
+  clip-path: inset(0 100% 0 0);
+}

package/packages/styles/animation/fade/fade.less

@@ -0,0 +1,11 @@
+/*淡入*/
+.p-transition-fade-enter-active,
+.p-transition-fade-leave-active {
+  opacity: 1;
+  transition: opacity 300ms cubic-bezier(0.23, 1, 0.72, 1);
+}
+
+.p-transition-fade-enter-from,
+.p-transition-fade-leave-to {
+  opacity: 0;
+}

package/packages/styles/animation/fade/fadeDown.less

@@ -0,0 +1,37 @@
+/*淡入，上方出现 下降15px*/
+.p-transition-fadeDown-enter-from,
+.p-transition-fadeDown-leave-to {
+  transform: translateY(-15px);
+  opacity: 0;
+}
+
+.p-transition-fadeDown-enter-active,
+.p-transition-fadeDown-leave-active {
+  transition: all .3s cubic-bezier(0.23, 1, 0.72, 1);
+}
+
+/*淡入，上方出现 下降50% */
+.p-transition-fadeDown--half-enter-from,
+.p-transition-fadeDown--half-leave-to {
+  transform: translateY(-50%);
+  opacity: 0;
+}
+
+.p-transition-fadeDown--half-enter-active,
+.p-transition-fadeDown--half-leave-active {
+  transition: all .3s cubic-bezier(0.23, 1, 0.72, 1);
+}
+
+
+/*淡入，上方出现 下降100% */
+.p-transition-fadeDown--completely-enter-from,
+.p-transition-fadeDown--completely-leave-to {
+  transform: translateY(-100%);
+  opacity: 0;
+}
+
+.p-transition-fadeDown--completely-enter-active,
+.p-transition-fadeDown--completely-leave-active {
+  transition: all .3s cubic-bezier(0.23, 1, 0.72, 1);
+}
+

package/packages/styles/animation/fade/fadeLeft.less

@@ -0,0 +1,36 @@
+/*淡入， 往左15px*/
+.p-transition-fadeLeft-enter-from,
+.p-transition-fadeLeft-leave-to {
+  transform: translateX(15px);
+  opacity: 0;
+}
+
+.p-transition-fadeLeft-enter-active,
+.p-transition-fadeLeft-leave-active {
+  transition: all .3s cubic-bezier(0.23, 1, 0.72, 1);
+}
+
+/*淡入，往左50% */
+.p-transition-fadeLeft--half-enter-from,
+.p-transition-fadeLeft--half-leave-to {
+  transform: translateX(50%);
+  opacity: 0;
+}
+
+.p-transition-fadeLeft--half-enter-active,
+.p-transition-fadeLeft--half-leave-active {
+  transition: all .3s cubic-bezier(0.23, 1, 0.72, 1);
+}
+
+/*淡入，往左100% */
+.p-transition-fadeLeft--completely-enter-from,
+.p-transition-fadeLeft--completely-leave-to {
+  transform: translateX(100%);
+  opacity: 0;
+}
+
+.p-transition-fadeLeft--completely-enter-active,
+.p-transition-fadeLeft--completely-leave-active {
+  transition: all .3s cubic-bezier(0.23, 1, 0.72, 1);
+}
+

package/packages/styles/animation/fade/fadeRight.less

@@ -0,0 +1,37 @@
+/*淡入， 往右15px*/
+.p-transition-fadeRight-enter-from,
+.p-transition-fadeRight-leave-to {
+  transform: translateX(-15px);
+  opacity: 0;
+}
+
+.p-transition-fadeRight-enter-active,
+.p-transition-fadeRight-leave-active {
+  transition: all .3s cubic-bezier(0.23, 1, 0.72, 1);
+}
+
+/*淡入，往右50% */
+.p-transition-fadeRight--half-enter-from,
+.p-transition-fadeRight--half-leave-to {
+  transform: translateX(-50%);
+  opacity: 0;
+}
+
+.p-transition-fadeRight--half-enter-active,
+.p-transition-fadeRight--half-leave-active {
+  transition: all .3s cubic-bezier(0.23, 1, 0.72, 1);
+}
+
+
+/*淡入，往右100% */
+.p-transition-fadeRight--completely-enter-from,
+.p-transition-fadeRight--completely-leave-to {
+  transform: translateX(-100%);
+  opacity: 0;
+}
+
+.p-transition-fadeRight--completely-enter-active,
+.p-transition-fadeRight--completely-leave-active {
+  transition: all .3s cubic-bezier(0.23, 1, 0.72, 1);
+}
+

package/packages/styles/animation/fade/fadeUp.less

@@ -0,0 +1,36 @@
+/*淡入， 上升15px*/
+.p-transition-fadeUp-enter-from,
+.p-transition-fadeUp-leave-to {
+  transform: translateY(15px);
+  opacity: 0;
+}
+
+.p-transition-fadeUp-enter-active,
+.p-transition-fadeUp-leave-active {
+  transition: all .3s cubic-bezier(0.23, 1, 0.72, 1);
+}
+
+/*淡入，上升50% */
+.p-transition-fadeUp--half-enter-from,
+.p-transition-fadeUp--half-leave-to {
+  transform: translateY(50%);
+  opacity: 0;
+}
+
+.p-transition-fadeUp--half-enter-active,
+.p-transition-fadeUp--half-leave-active {
+  transition: all .3s cubic-bezier(0.23, 1, 0.72, 1);
+}
+
+/*淡入，上升100% */
+.p-transition-fadeUp--completely-enter-from,
+.p-transition-fadeUp--completely-leave-to {
+  transform: translateY(100%);
+  opacity: 0;
+}
+
+.p-transition-fadeUp--completely-enter-active,
+.p-transition-fadeUp--completely-leave-active {
+  transition: all .3s cubic-bezier(0.23, 1, 0.72, 1);
+}
+

package/packages/styles/animation/only.less

@@ -0,0 +1,15 @@
+/*message*/
+.p-transition-messageOnly-leave-active,
+.p-transition-messageOnly-enter-active {
+    transition: all .3s ease-out;
+}
+
+.p-transition-messageOnly-enter-from {
+    opacity: 0;
+    transform: translateY(-10px);
+}
+
+.p-transition-messageOnly-leave-to {
+    opacity: 0;
+    transform: translateY(-100px);
+}

package/packages/styles/animation/scale/scale.less

@@ -0,0 +1,46 @@
+/*缩放  .75*/
+.p-transition-scale-enter-active,
+.p-transition-scale-leave-active {
+  transform: scale(1);
+  opacity: 1;
+  transition: transform 300ms cubic-bezier(0.23, 1, 0.72, 1),
+  opacity 300ms cubic-bezier(0.23, 1, 0.72, 1);
+}
+
+.p-transition-scale-leave-to,
+.p-transition-scale-enter-from {
+  transform: scale(.75);
+  opacity: 0;
+}
+
+
+/*缩放 half*/
+.p-transition-scale--half-enter-active,
+.p-transition-scale--half-leave-active {
+  transform: scale(1);
+  opacity: 1;
+  transition: transform 300ms cubic-bezier(0.23, 1, 0.72, 1),
+  opacity 300ms cubic-bezier(0.23, 1, 0.72, 1);
+}
+
+.p-transition-scale--half-leave-to,
+.p-transition-scale--half-enter-from {
+  transform: scale(.5);
+  opacity: 0;
+}
+
+
+/*缩放 completely*/
+.p-transition-scale--completely-enter-active,
+.p-transition-scale--completely-leave-active {
+  transform: scale(1);
+  opacity: 1;
+  transition: transform 300ms cubic-bezier(0.23, 1, 0.72, 1),
+  opacity 300ms cubic-bezier(0.23, 1, 0.72, 1);
+}
+
+.p-transition-scale--completely-leave-to,
+.p-transition-scale--completely-enter-from {
+  transform: scale(0);
+  opacity: 0;
+}

package/packages/styles/animation/scale/scaleHorizontal.less

@@ -0,0 +1,64 @@
+/*水平缩放 不指定中心*/
+.p-transition-scaleHorizontal-enter-active,
+.p-transition-scaleHorizontal-leave-active {
+  transform: scaleX(1);
+  opacity: 1;
+  transition: transform 300ms cubic-bezier(0.23, 1, 0.72, 1),
+  opacity 300ms cubic-bezier(0.23, 1, 0.72, 1);
+}
+
+.p-transition-scaleHorizontal-leave-to,
+.p-transition-scaleHorizontal-enter-from {
+  transform: scaleX(0);
+  opacity: 0;
+}
+
+
+/*水平缩放 center*/
+.p-transition-scaleHorizontal--center-enter-active,
+.p-transition-scaleHorizontal--center-leave-active {
+  transform: scaleX(1);
+  opacity: 1;
+  transform-origin: center center !important;
+  transition: transform 300ms cubic-bezier(0.23, 1, 0.72, 1),
+  opacity 300ms cubic-bezier(0.23, 1, 0.72, 1);
+}
+
+.p-transition-scaleHorizontal--center-leave-to,
+.p-transition-scaleHorizontal--center-enter-from {
+  transform: scaleX(0);
+  opacity: 0;
+}
+
+/*水平缩放 start*/
+.p-transition-scaleHorizontal--start-enter-active,
+.p-transition-scaleHorizontal--start-leave-active {
+  transform: scaleX(1);
+  opacity: 1;
+  transform-origin: left center !important;
+  transition: transform 300ms cubic-bezier(0.23, 1, 0.72, 1),
+  opacity 300ms cubic-bezier(0.23, 1, 0.72, 1);
+}
+
+.p-transition-scaleHorizontal--start-leave-to,
+.p-transition-scaleHorizontal--start-enter-from {
+  transform: scaleX(0);
+  opacity: 0;
+}
+
+
+/*水平缩放 end*/
+.p-transition-scaleHorizontal--end-enter-active,
+.p-transition-scaleHorizontal--end-leave-active {
+  transform: scaleX(1);
+  opacity: 1;
+  transform-origin: right center !important;
+  transition: transform 300ms cubic-bezier(0.23, 1, 0.72, 1),
+  opacity 300ms cubic-bezier(0.23, 1, 0.72, 1);
+}
+
+.p-transition-scaleHorizontal--end-leave-to,
+.p-transition-scaleHorizontal--end-enter-from {
+  transform: scaleX(0);
+  opacity: 0;
+}

package/packages/styles/animation/scale/scaleVertical.less

@@ -0,0 +1,62 @@
+/*垂直缩放 不指定中心*/
+.p-transition-scaleVertical-enter-active,
+.p-transition-scaleVertical-leave-active {
+  transform: scaleY(1);
+  opacity: 1;
+  transition: transform 300ms cubic-bezier(0.23, 1, 0.72, 1),
+  opacity 300ms cubic-bezier(0.23, 1, 0.72, 1);
+}
+
+.p-transition-scaleVertical-leave-to,
+.p-transition-scaleVertical-enter-from {
+  transform: scaleY(0);
+  opacity: 0;
+}
+
+/*垂直缩放 center*/
+.p-transition-scaleVertical--center-enter-active,
+.p-transition-scaleVertical--center-leave-active {
+  transform: scaleY(1);
+  opacity: 1;
+  transform-origin: center center !important;
+  transition: transform 300ms cubic-bezier(0.23, 1, 0.72, 1),
+  opacity 300ms cubic-bezier(0.23, 1, 0.72, 1);
+}
+
+.p-transition-scaleVertical--center-leave-to,
+.p-transition-scaleVertical--center-enter-from {
+  transform: scaleY(0);
+  opacity: 0;
+}
+
+/*垂直缩放 start*/
+.p-transition-scaleVertical--start-enter-active,
+.p-transition-scaleVertical--start-leave-active {
+  transform: scaleY(1);
+  opacity: 1;
+  transform-origin: center top !important;
+  transition: transform 300ms cubic-bezier(0.23, 1, 0.72, 1),
+  opacity 300ms cubic-bezier(0.23, 1, 0.72, 1);
+}
+
+.p-transition-scaleVertical--start-leave-to,
+.p-transition-scaleVertical--start-enter-from {
+  transform: scaleY(0);
+  opacity: 0;
+}
+
+/*垂直缩放 end*/
+.p-transition-scaleVertical--end-enter-active,
+.p-transition-scaleVertical--end-leave-active {
+  transform: scaleY(1);
+  opacity: 1;
+  transform-origin: center bottom !important;
+  transition: transform 300ms cubic-bezier(0.23, 1, 0.72, 1),
+  opacity 300ms cubic-bezier(0.23, 1, 0.72, 1);
+}
+
+.p-transition-scaleVertical--end-leave-to,
+.p-transition-scaleVertical--end-enter-from {
+  transform: scaleY(0);
+  opacity: 0;
+}

package/packages/styles/components/_index.less

@@ -0,0 +1,30 @@
+/*
+ * @description: UI 组件样式
+ * @author: MC.Yang
+ */
+// 基础组件样式
+@import "./icon/_index";
+@import "./button/_index";
+@import "./link/_index";
+@import "./scrollbar/_index";
+// 布局组件样式
+@import "grid/_index";
+@import "./divider/_index";
+@import "./layout/_index";
+// 导航组件样式
+@import "./dropdown/_index";
+@import "./menu/_index";
+@import "./tabs/_index";
+// 消息提醒组件样式
+@import "./message/_index";
+@import "./dialog/_index";
+@import "./drawer/_index";
+@import "./popconfirm/_index";
+// 数据展示组件样式
+@import "./floating/_index";
+@import "./tooltip/_index";
+@import "./badge/_index";
+@import "./tag/_index";
+// 表单组件样式
+@import "./input/_index";
+@import "./switch/_index";

package/packages/styles/components/badge/_index.less

@@ -0,0 +1,90 @@
+/*
+ * @description: 徽章 UI 组件样式
+ * @author: MC.Yang
+ */
+@import "../../mixn/_index";
+
+.@{componentPrefix}-badge {
+  @ns: @{componentPrefix}-badge;
+  @types: primary, success, info, warning, danger, cyan;
+  @variant: empty, fantasy;
+
+  & {
+    --pixel-badge-font-color: var(--pixel-color-white);
+    --pixel-badge-bg-color: var(--pixel-color-primary);
+    --pixel-badge-br-color: transparent;
+  }
+
+  // base
+  & {
+    .useBorderRadius(@infinite);
+    .useBorderBox();
+
+    position: absolute;
+    right: 0;
+    top: 0;
+    transform: translate(50%, -50%);
+    font-size: var(--pixel-font-size-small);
+    padding: 0 7px;
+    border: solid 1px;
+    background-color: var(--pixel-badge-bg-color);
+    border-color: var(--pixel-badge-br-color);
+    color: var(--pixel-badge-font-color);
+  }
+
+  // modifier type
+  each(@types, .(@type) {
+    .m(@type, {
+      --pixel-badge-bg-color: getClrVar(@type);
+    })
+  });
+
+  // modifier theme empty
+  .m(empty, {
+    --pixel-badge-bg-color: var(--pixel-color-bg);
+    --pixel-badge-br-color: getClrVar(primary, light);
+    --pixel-badge-font-color: getClrVar(primary);
+
+    each(@types, .(@type) {
+      .with(@ns, {
+        .m(@type, {
+          --pixel-badge-bg-color: var(--pixel-color-bg);
+          --pixel-badge-br-color: getClrVar(@type, light);
+          --pixel-badge-font-color: getClrVar(@type);
+        });
+      });
+    });
+  });
+
+  // modifier theme fantasy
+  .m(fantasy, {
+    --pixel-badge-bg-color: getClrVar(primary, fade);
+    --pixel-badge-br-color: getClrVar(primary, light);
+    --pixel-badge-font-color: getClrVar(primary);
+
+    each(@types, .(@type) {
+      .with(@ns, {
+        .m(@type, {
+          --pixel-badge-bg-color: getClrVar(@type, fade);
+          --pixel-badge-br-color: getClrVar(@type, light);
+          --pixel-badge-font-color: getClrVar(@type);
+        });
+      });
+    });
+  });
+
+  // point
+  & {
+    &:empty {
+      padding: 3px;
+    }
+
+    each(@types, .(@type) {
+      .m(@type, {
+        &:empty {
+          --pixel-badge-bg-color: getClrVar(@type);
+        }
+      });
+    });
+  }
+}