sykj 0.1.9 → 0.2.0

package/README.md

@@ -1,8 +1,8 @@
 <h1 align="center" >SYKJ</h1>
 
--   🤓 SY_UI
--   💪 Vue 3 Composition API
--   🔥 Written in TypeScript
+- 🤓 SY_UI
+- 💪 Vue 3 Composition API
+- 🔥 Written in TypeScript
 
 ## 快速开始
 
@@ -23,14 +23,14 @@ $ pnpm install sykj
 
 ```typescript
 // main.ts
-import { createApp } from "vue";
-import sykj from "sykj";
-import App from "./App.vue";
+import { createApp } from 'vue'
+import sykj from 'sykj'
+import App from './App.vue'
 
-const app = createApp(App);
+const app = createApp(App)
 
-app.use(sykj);
-app.mount("#app");
+app.use(sykj)
+app.mount('#app')
 ```
 
 ```vue
@@ -38,7 +38,7 @@ app.mount("#app");
 <template>
     <div class="app">
         <input type="text" />
-        <SyKeyboard />
+        <sy-keyboard />
     </div>
 </template>
 ```

package/lib/common.ts

@@ -1,16 +1,33 @@
-import "./store";
-import "./focus";
+// import './store'
+// import './focus'
+import type { App } from 'vue'
+// 导入所有组件
+import { SyKeyboard } from '../packages/keyboard'
+import { SyLoading } from '../packages/loading'
+import { SyMessage } from '../packages/message'
+import { SyMessageBox } from '../packages/message-box'
+import { SyDialog } from '../packages/dialog'
+import { SyButton } from '../packages/button'
 
-import SyKeyboard from "../packages/keyboard/index.ts"; // 引入封装好的组件
-// import * as SyLoading from "../packages/loading/index.ts"; // 引入封装好的组件
-import { SyLoading } from "../packages/loading/index.ts"; // 一键导出所有组件
+// 组件集合
+const components = [SyKeyboard, SyLoading, SyMessage, SyDialog, SyButton]
 
-const a = () => {
-    console.log(123);
-};
+// 插件对象（提供 install 方法）
+const sykJPlugin = {
+    install(app: App) {
+        components.forEach((component) => {
+            // 如果组件本身带 install（推荐），直接 app.use
+            if ((component as any).install) {
+                app.use(component as any)
+            } else if ((component as any).name) {
+                // 否则按组件注册
+                app.component((component as any).name, component as any)
+            }
+        })
+    }
+}
 
-// 使用命名导出
-export { SyKeyboard as default };
-export { SyLoading };
+export default sykJPlugin
 
-export { a };
+// 也导出单个组件（按需导入）
+export { SyKeyboard, SyLoading, SyMessage, SyMessageBox, SyDialog, SyButton }

package/main/index.ts

@@ -1 +1 @@
-export default {}
+export default {}

package/main/utils/withInstall.ts

@@ -0,0 +1,10 @@
+import type { App, Plugin } from 'vue'
+
+export const withInstall = <T>(comp: T & { name?: string }) => {
+    ;(comp as T & Plugin).install = (app: App) => {
+        if (comp.name) {
+            app.component(comp.name, comp as any)
+        }
+    }
+    return comp as T & Plugin
+}

package/package.json

@@ -1,55 +1,68 @@
 {
-  "name": "sykj",
-  "version": "0.1.9",
-  "description": "rem adaptation🚀",
-  "main": "lib/common.ts",
-  "files": [
-    "lib",
-    "packages",
-    "main",
-    "types"
-  ],
-  "types": "/types/index.d.ts",
-  "scripts": {
-    "dev": "vite --host",
-    "build": "run-p type-check \"build-only {@}\" --",
-    "preview": "vite preview",
-    "build-only": "vite build  ",
-    "type-check": "vue-tsc --build --force",
-    "package": "vite build && cp -r ./dist/* ./sykj",
-    "docs:dev": "vitepress dev docs --host",
-    "docs:build": "vitepress build docs",
-    "docs:preview": "vitepress preview docs"
-  },
-  "dependencies": {
-    "@element-plus/icons-vue": "^2.3.1",
-    "amfe-flexible": "^2.2.1",
-    "axios": "^1.6.8",
-    "element-plus": "^2.7.2",
-    "lottie-web": "^5.12.2",
-    "pinia": "^2.1.7",
-    "vitepress": "^1.3.1",
-    "vue": "^3.4.21",
-    "vue-router": "^4.3.0"
-  },
-  "devDependencies": {
-    "@tsconfig/node20": "^20.1.4",
-    "@types/node": "^20.12.5",
-    "@vitejs/plugin-vue": "^5.0.4",
-    "@vue/tsconfig": "^0.5.1",
-    "npm-run-all2": "^6.1.2",
-    "postcss": "^8.4.38",
-    "postcss-pxtorem": "^6.1.0",
-    "sass": "^1.77.1",
-    "typescript": "~5.4.5",
-    "vite": "^5.2.11",
-    "vue-tsc": "^2.0.11"
-  },
-  "keywords": [
-    "keyboard",
-    "vue",
-    "ui"
-  ],
-  "author": "IUHua",
-  "license": "MIT"
-}
+    "name": "sykj",
+    "version": "0.2.0",
+    "description": "rem adaptation🚀",
+    "main": "lib/common.ts",
+    "files": [
+        "lib",
+        "packages",
+        "main",
+        "types"
+    ],
+    "types": "/types/index.d.ts",
+    "type": "module",
+    "scripts": {
+        "dev": "vite --host",
+        "build": "run-p type-check \"build-only {@}\" --",
+        "preview": "vite preview",
+        "build-only": "vite build  ",
+        "type-check": "vue-tsc --build --force",
+        "package": "vite build && cp -r ./dist/* ./sykj",
+        "docs:dev": "vitepress dev docs --host",
+        "docs:build": "vitepress build docs",
+        "docs:preview": "vitepress preview docs",
+        "lint": "eslint --ext .js,.vue src",
+        "lint:fix": "eslint --ext .js,.vue src --fix",
+        "format": "prettier --write ."
+    },
+    "dependencies": {
+        "@element-plus/icons-vue": "^2.3.1",
+        "amfe-flexible": "^2.2.1",
+        "axios": "^1.6.8",
+        "element-plus": "^2.7.2",
+        "lottie-web": "^5.12.2",
+        "pinia": "^2.1.7",
+        "vitepress": "^1.3.1",
+        "vue": "^3.4.21",
+        "vue-router": "^4.3.0"
+    },
+    "devDependencies": {
+        "@babel/eslint-parser": "^7.28.0",
+        "@tsconfig/node20": "^20.1.4",
+        "@types/node": "^20.12.5",
+        "@typescript-eslint/eslint-plugin": "^8.39.1",
+        "@typescript-eslint/parser": "^8.39.1",
+        "@vitejs/plugin-vue": "^5.0.4",
+        "@vue/eslint-config-prettier": "^10.2.0",
+        "@vue/tsconfig": "^0.5.1",
+        "eslint": "^9.33.0",
+        "eslint-plugin-prettier": "^5.5.4",
+        "eslint-plugin-vue": "^10.4.0",
+        "npm-run-all2": "^6.1.2",
+        "postcss": "^8.4.38",
+        "postcss-pxtorem": "^6.1.0",
+        "prettier": "^3.6.2",
+        "sass": "^1.77.1",
+        "typescript": "~5.4.5",
+        "vite": "^5.2.11",
+        "vue-eslint-parser": "^10.2.0",
+        "vue-tsc": "^2.0.11"
+    },
+    "keywords": [
+        "keyboard",
+        "vue",
+        "ui"
+    ],
+    "author": "IUHua",
+    "license": "MIT"
+}

package/packages/button/index.ts

@@ -0,0 +1,5 @@
+import _SyButton from './src/index.vue'
+import { withInstall } from '../../main/utils/withInstall'
+_SyButton.name = 'SyButton'
+export const SyButton = withInstall(_SyButton)
+export default SyButton

package/packages/button/src/index.vue

@@ -0,0 +1,138 @@
+<template>
+    <button
+        class="my-btn"
+        :class="[
+            `my-btn--${type}`,
+            size ? `my-btn--${size}` : '',
+            { 'is-plain': plain, 'is-round': round, 'is-disabled': disabled }
+        ]"
+        :disabled="disabled"
+        @click="$emit('click', $event)"
+        @touchstart="onTouchStart"
+        @touchend="onTouchEnd"
+    >
+        <slot />
+    </button>
+</template>
+
+<script setup lang="ts">
+interface Props {
+    type?: 'info' | 'primary' | 'success' | 'warning' | 'danger'
+    size?: 'small' | 'medium' | 'large'
+    plain?: boolean
+    round?: boolean
+    disabled?: boolean
+}
+withDefaults(defineProps<Props>(), {
+    type: 'primary',
+    size: 'medium',
+    plain: false,
+    round: false,
+    disabled: false
+})
+
+defineEmits<{
+    (e: 'click', evt: MouseEvent): void
+}>()
+
+function onTouchStart() {
+    // SyMessage.success('点击')
+}
+
+function onTouchEnd() {}
+</script>
+
+<style scoped>
+.my-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    line-height: 1;
+    padding: 8px 15px;
+    border-radius: 4px;
+    border: 1px solid transparent;
+    cursor: pointer;
+    transition: all 0.25s ease;
+    user-select: none;
+}
+.my-btn.is-disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+}
+
+/* --- type --- */
+.my-btn--info {
+    background: #f3f3f3;
+    color: #606266;
+    border-color: #dcdfe6;
+}
+.my-btn--primary {
+    background: #409eff;
+    color: #fff;
+}
+.my-btn--success {
+    background: #67c23a;
+    color: #fff;
+}
+.my-btn--warning {
+    background: #e6a23c;
+    color: #fff;
+}
+.my-btn--danger {
+    background: #f56c6c;
+    color: #fff;
+}
+
+/* plain（朴素） */
+.my-btn.is-plain.my-btn--info {
+    background: #f3f3f320;
+    color: #f3f3f3;
+    border-color: #a8a8a890;
+}
+.my-btn.is-plain.my-btn--primary {
+    background: #ecf5ff20;
+    color: #409eff;
+    border-color: #b3d8ff90;
+}
+.my-btn.is-plain.my-btn--success {
+    background: #f0f9eb20;
+    color: #67c23a;
+    border-color: #c2e7b090;
+}
+.my-btn.is-plain.my-btn--warning {
+    background: #fdf6ec20;
+    color: #e6a23c;
+    border-color: #f5dab190;
+}
+.my-btn.is-plain.my-btn--danger {
+    background: #fef0f020;
+    color: #f56c6c;
+    border-color: #fbc4c490;
+}
+
+/* hover */
+.my-btn:not(.is-disabled):hover {
+    filter: brightness(0.95);
+}
+
+/* round */
+.my-btn.is-round {
+    border-radius: 20px;
+    padding: 8px 18px;
+}
+
+/* --- size --- */
+.my-btn--small {
+    font-size: 12px;
+    padding: 6px 12px;
+}
+.my-btn--medium {
+    font-size: 14px;
+    padding: 8px 15px;
+}
+.my-btn--large {
+    font-size: 16px;
+    padding: 10px 20px;
+}
+</style>

package/packages/dialog/index.ts

@@ -0,0 +1,5 @@
+import _SyDialog from './src/index.vue'
+import { withInstall } from '../../main/utils/withInstall'
+_SyDialog.name = 'SyDialog'
+export const SyDialog = withInstall(_SyDialog)
+export default SyDialog

package/packages/dialog/src/index.vue

@@ -0,0 +1,142 @@
+<template>
+    <teleport to="body">
+        <transition name="dialog-fade" appear>
+            <div
+                v-if="modelValue"
+                class="dialog-mask"
+                @click.self="handleClose"
+            >
+                <div class="dialog-box" role="dialog" aria-modal="true">
+                    <header
+                        class="dialog-header"
+                        :style="`text-align: ${titleAlign};`"
+                        v-if="$slots.header || title"
+                    >
+                        <slot name="header">
+                            <span>{{ title }}</span>
+                        </slot>
+                    </header>
+
+                    <section class="dialog-body">
+                        <slot />
+                    </section>
+
+                    <footer class="dialog-footer" v-if="$slots.footer">
+                        <slot name="footer" />
+                    </footer>
+                </div>
+            </div>
+        </transition>
+    </teleport>
+</template>
+
+<script setup lang="ts">
+export interface Props {
+    modelValue: boolean
+    title?: string
+    closeOnClickMask?: boolean
+    titleAlign?: 'left' | 'center' | 'right'
+}
+
+const props = defineProps<Props>()
+console.log('🚀 ~ props:', props)
+const emit = defineEmits(['update:modelValue', 'open', 'close'])
+
+function handleClose() {
+    if (props.closeOnClickMask === false) return
+    emit('update:modelValue', false)
+    emit('close')
+}
+</script>
+
+<style scoped lang="scss">
+/* 遮罩 */
+.dialog-mask {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.45);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2000;
+}
+
+/* 弹窗主体 */
+.dialog-box {
+    min-width: 60%;
+    max-width: 80%;
+    // width: 500px;
+    max-width: 90%;
+    background: #fff;
+    border-radius: 8px;
+    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    animation: dialog-pop 0.25s ease;
+    padding: 20px 10px;
+}
+
+.dialog-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 16px;
+    font-weight: 600;
+    // border-bottom: 1px solid #f0f0f0;
+    font-size: 1.4rem;
+    span {
+        width: 100%;
+        opacity: 0.7;
+    }
+}
+
+.dialog-close {
+    border: none;
+    background: none;
+    font-size: 20px;
+    cursor: pointer;
+}
+
+.dialog-body {
+    padding: 16px;
+    flex: 1;
+}
+
+.dialog-footer {
+    padding: 10px 16px;
+    // border-top: 1px solid #f0f0f0;
+    text-align: right;
+}
+
+/* 过渡动画 */
+.dialog-fade-enter-from,
+.dialog-fade-leave-to {
+    opacity: 0;
+}
+.dialog-fade-enter-active,
+.dialog-fade-leave-active {
+    transition: opacity 0.25s ease;
+}
+.dialog-fade-enter-from .dialog-box,
+.dialog-fade-leave-to .dialog-box {
+    transform: scale(0.92);
+    opacity: 0;
+}
+.dialog-fade-enter-active .dialog-box,
+.dialog-fade-leave-active .dialog-box {
+    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+/* 初次弹出的缩放效果 */
+@keyframes dialog-pop {
+    from {
+        transform: scale(0.92);
+        opacity: 0;
+    }
+    to {
+        transform: scale(1);
+        opacity: 1;
+    }
+}
+</style>

package/packages/keyboard/index.ts

@@ -1,8 +1,13 @@
-import SyKeyboard from "./src/Keyboardcon.vue";
-import type { App } from "vue";
+// import type { App } from 'vue'
+import './src/utils/store'
+import './src/utils/focus'
+
+import SyKeyboard from './src/Keyboardcon.vue'
+
+SyKeyboard.name = 'SyKeyboard'
 /* istanbul ignore next */
-SyKeyboard.install = function (Vue: App) {
-    Vue.component(SyKeyboard.name, SyKeyboard);
-};
+// Keyboard.install = function (Vue: App) {
+//     Vue.component(Keyboard.name || 'SyKeyboard', Keyboard)
+// }
 
-export default SyKeyboard;
+export { SyKeyboard }