npm - fo-vue-ui - Versions diffs - 0.0.0 - Mend

fo-vue-ui 0.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (25) hide show

package/.vscode/extensions.json +3 -0
package/README.md +5 -0
package/dist/fo-vue-ui.css +1 -0
package/dist/fo-vue-ui.js +21 -0
package/dist/fo-vue-ui.umd.cjs +1 -0
package/dist/vite.svg +1 -0
package/index.html +13 -0
package/package.json +24 -0
package/public/vite.svg +1 -0
package/src/App.vue +3 -0
package/src/assets/vue.svg +1 -0
package/src/components/ceshicomp/ceshicomp.scss +5 -0
package/src/components/ceshicomp/ceshicomp.vue +17 -0
package/src/components/foIcon/foIcon.scss +25 -0
package/src/components/foIcon/foIcon.vue +182 -0
package/src/components/index.ts +18 -0
package/src/components/scrollWrap/scrollWrap.scss +6 -0
package/src/components/scrollWrap/scrollWrap.vue +17 -0
package/src/main.ts +5 -0
package/src/style.css +3 -0
package/src/vue.d.ts +6 -0
package/tsconfig.app.json +19 -0
package/tsconfig.json +7 -0
package/tsconfig.node.json +26 -0
package/vite.config.ts +22 -0

package/.vscode/extensions.json ADDED Viewed

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}

package/README.md ADDED Viewed

@@ -0,0 +1,5 @@
+# Vue 3 + TypeScript + Vite
+This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).

package/dist/fo-vue-ui.css ADDED Viewed

	@@ -0,0 +1 @@
1	+ .ceshicomp[data-v-80063cdc]{width:100px;height:100px;background:red}

package/dist/fo-vue-ui.js ADDED Viewed

@@ -0,0 +1,21 @@
+import { createElementBlock as s, openBlock as a } from "vue";
+const i = (e, c) => {
+  const o = e.__vccOpts || e;
+  for (const [t, n] of c)
+    o[t] = n;
+  return o;
+}, p = { class: "ceshicomp" }, r = {
+  __name: "ceshicomp",
+  props: { name: "ceshicomp" },
+  setup(e) {
+    return (c, o) => (a(), s("div", p, "123"));
+  }
+}, _ = /* @__PURE__ */ i(r, [["__scopeId", "data-v-80063cdc"]]), m = [_], d = (e) => {
+  m.forEach((c) => {
+    c.name && e.component(c.name, c);
+  });
+};
+typeof window < "u" && "Vue" in window && d(window.Vue);
+export {
+  d as default
+};

package/dist/fo-vue-ui.umd.cjs ADDED Viewed

@@ -0,0 +1 @@

+ (function(e,o){typeof exports=="object"&&typeof module<"u"?module.exports=o(require("vue")):typeof define=="function"&&define.amd?define(["vue"],o):(e=typeof globalThis<"u"?globalThis:e||self,e["fo-vue-ui"]=o(e.Vue))})(this,(function(e){"use strict";const o=(c,n)=>{const t=c.__vccOpts||c;for(const[p,u]of n)t[p]=u;return t},i={class:"ceshicomp"},f=[o({__name:"ceshicomp",props:{name:"ceshicomp"},setup(c){return(n,t)=>(e.openBlock(),e.createElementBlock("div",i,"123"))}},[["__scopeId","data-v-80063cdc"]])],s=c=>{f.forEach(n=>{n.name&&c.component(n.name,n)})};return typeof window<"u"&&"Vue"in window&&s(window.Vue),s}));

package/dist/vite.svg ADDED Viewed

@@ -0,0 +1 @@

+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/index.html ADDED Viewed

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>fo-vue-ui</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/package.json ADDED Viewed

@@ -0,0 +1,24 @@
+{
+  "name": "fo-vue-ui",
+  "private": false,
+  "version": "0.0.0",
+  "type": "module",
+  "main": "dist/fo-vue-ui.umd.cjs",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^3.5.24"
+  },
+  "devDependencies": {
+    "@types/node": "^24.10.1",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vue/tsconfig": "^0.8.1",
+    "sass": "^1.77.8",
+    "typescript": "~5.9.3",
+    "vite": "^7.2.4",
+    "vue-tsc": "^3.1.4"
+  }
+}

package/public/vite.svg ADDED Viewed

@@ -0,0 +1 @@

package/src/App.vue ADDED Viewed

@@ -0,0 +1,3 @@
+<template></template>
+<script setup lang="ts"></script>
+<style scoped></style>

package/src/assets/vue.svg ADDED Viewed

@@ -0,0 +1 @@

+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

package/src/components/ceshicomp/ceshicomp.scss ADDED Viewed

@@ -0,0 +1,5 @@
+.ceshicomp {
+  width: 100px;
+  height: 100px;
+  background: red;
+}

package/src/components/ceshicomp/ceshicomp.vue ADDED Viewed

@@ -0,0 +1,17 @@
+<!-- <script>
+export default {
+  name: "ceshicomp",
+}
+</script> -->
+<template>
+  <div class="ceshicomp">123</div>
+</template>
+<script setup>
+defineProps({ name: "ceshicomp" })
+</script>
+<style scoped lang="scss">
+@import "./ceshicomp.scss";
+</style>

package/src/components/foIcon/foIcon.scss ADDED Viewed

@@ -0,0 +1,25 @@
+.iconPage {
+    opacity: 1;
+    color: inherit;
+}
+.deg0 {
+    transform: rotate(0deg);
+}
+.deg1 {
+    transform: rotate(60deg);
+}
+.deg2 {
+    transform: rotate(120deg);
+}
+.deg3 {
+    transform: rotate(180deg);
+}
+.deg4 {
+    transform: rotate(240deg);
+}
+.deg5 {
+    transform: rotate(300deg);
+}
+.disappear {
+    opacity: 0;
+}

package/src/components/foIcon/foIcon.vue ADDED Viewed

@@ -0,0 +1,182 @@
+<template>
+    <component
+        :is="logo"
+        ref="iconRef"
+        :theme="theme"
+        :size="sizeValue"
+        :fill="fillValue"
+        class="iconPage"
+        :class="{
+            deg0: degDis === 0,
+            deg1: degDis === 1,
+            deg2: degDis === 2,
+            deg3: degDis === 3,
+            deg4: degDis === 4,
+            deg5: degDis === 5,
+            disappear: isDisappear
+        }"
+    />
+</template>
+<script setup>
+import { ref, watch, onMounted, onUnmounted, computed, nextTick } from 'vue'
+defineOptions({
+    name: 'FoIcon'
+})
+const props = defineProps({
+    logo: { type: String, default: 'icon-emotion-happy' },
+    theme: { type: String, default: 'outline' },
+    size: { type: String, default: '' },
+    fill: { type: String, default: '' },
+    isShine: { type: Boolean, default: false },
+    isRotate: { type: Boolean, default: false }
+})
+onMounted(() => {
+    initStyleObserver()
+})
+onUnmounted(() => {
+    clearShineTimer()
+    clearRotateTimer()
+    destroyStyleObserver()
+})
+const iconRef = ref(null)
+const styleUpdateFlag = ref(0)
+let iconElement = null
+let styleObserver = null
+let parentObserver = null
+const fillValue = computed(() => {
+    styleUpdateFlag.value
+    if (props.fill) {
+        return props.fill
+    } else {
+        if (iconElement) {
+            const domStyle = window.getComputedStyle(iconElement)
+            return domStyle.getPropertyValue('color')
+        } else {
+            return '#888'
+        }
+    }
+})
+const sizeValue = computed(() => {
+    styleUpdateFlag.value
+    if (props.size) {
+        return props.size
+    } else {
+        if (iconElement) {
+            const domStyle = window.getComputedStyle(iconElement)
+            return domStyle.getPropertyValue('font-size')
+        } else {
+            return '1rem'
+        }
+    }
+})
+async function initStyleObserver() {
+    await nextTick() // 等待 DOM 完全渲染
+    iconElement = iconRef.value?.$el || iconRef.value
+    iconElement = iconElement instanceof Element ? iconElement : null
+    if (iconElement) {
+        styleObserver = new MutationObserver(() => {
+            plusStyleUpdateFlag()
+        })
+        styleObserver.observe(iconElement, {
+            attributes: true,
+            attributeFilter: ['class', 'style'], // 只监听这两个属性
+            attributeOldValue: false
+        })
+        const parentElement = iconElement.parentElement
+        if (parentElement) {
+            const parentObserver = new MutationObserver(() => {
+                plusStyleUpdateFlag()
+            })
+            parentObserver.observe(parentElement, {
+                attributes: true,
+                attributeFilter: ['class', 'style']
+            })
+        }
+    }
+    plusStyleUpdateFlag()
+}
+function destroyStyleObserver() {
+    if (styleObserver) {
+        styleObserver.disconnect()
+        styleObserver = null
+    }
+    if (parentObserver) {
+        parentObserver.disconnect()
+        parentObserver = null
+    }
+    iconElement = null
+}
+function plusStyleUpdateFlag() {
+    styleUpdateFlag.value = styleUpdateFlag.value > 9999 ? 0 : ++styleUpdateFlag.value
+}
+let shineTimer = NaN
+const isDisappear = ref(false)
+watch(
+    () => {
+        return props.isShine
+    },
+    (newV) => {
+        if (newV) {
+            clearShineTimer()
+            setShineTimer()
+        } else {
+            clearShineTimer()
+        }
+    },
+    { immediate: true }
+)
+function setShineTimer() {
+    shineTimer = setInterval(() => {
+        isDisappear.value = !isDisappear.value
+    }, 1000)
+}
+function clearShineTimer() {
+    clearInterval(shineTimer)
+    shineTimer = NaN
+}
+let rotateTimer = NaN
+const degDis = ref(0)
+watch(
+    () => {
+        return props.isRotate
+    },
+    (newV) => {
+        if (newV) {
+            clearRotateTimer()
+            setRotateTimer()
+        } else {
+            clearRotateTimer()
+        }
+    },
+    { immediate: true }
+)
+function setRotateTimer() {
+    rotateTimer = setInterval(() => {
+        if (degDis.value >= 5) {
+            degDis.value = 0
+        } else {
+            degDis.value++
+        }
+    }, 1000)
+}
+function clearRotateTimer() {
+    clearInterval(rotateTimer)
+    rotateTimer = NaN
+}
+</script>
+<style scoped lang="scss">
+@import './foIcon.scss';
+</style>

package/src/components/index.ts ADDED Viewed

@@ -0,0 +1,18 @@
+import ceshicomp from "./ceshicomp/ceshicomp.vue"
+import type { App } from "vue"
+const components = [ceshicomp]
+const install = (app: App) => {
+  components.forEach((component) => {
+    if (component.name) {
+      app.component(component.name, component)
+    }
+  })
+}
+if (typeof window !== "undefined" && "Vue" in window) {
+  install(window.Vue as App)
+}
+export default install

package/src/components/scrollWrap/scrollWrap.scss ADDED Viewed

@@ -0,0 +1,6 @@
+.scrollWrap{
+    width:100%;
+    height: 100%;
+    padding-right: 10px;
+    @include scrollLine;
+}

package/src/components/scrollWrap/scrollWrap.vue ADDED Viewed

@@ -0,0 +1,17 @@
+<script>
+export default {
+  name: "ScrollWrap",
+}
+</script>
+<template>
+  <div class="scrollWrap">
+    <slot></slot>
+  </div>
+</template>
+<script setup>
+defineProps({ name: "ScrollWrap" })
+</script>
+<style scoped lang="scss">
+@import "./scrollWrap.scss";
+</style>

package/src/main.ts ADDED Viewed

@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import './style.css'
+import App from './App.vue'
+createApp(App).mount('#app')

package/src/style.css ADDED Viewed

@@ -0,0 +1,3 @@
+body {
+  font-size: 10px;
+}

package/src/vue.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+declare module "*.vue" {
+  import type { DefineComponent } from "vue"
+  // 泛型参数依次为：props类型、emit类型、组件实例类型、slots类型等，unknown表示不做严格限制
+  const component: DefineComponent<{}, {}, unknown>
+  export default component
+}

package/tsconfig.app.json ADDED Viewed

@@ -0,0 +1,19 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "types": ["vite/client"],
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+    "moduleResolution": "node", // 采用Node.js模块解析规则，适配.vue模块导入
+    "esModuleInterop": true, // 兼容CommonJS模块，避免导入.vue文件时出现模块格式冲突
+    "resolveJsonModule": true // 支持导入json文件，同时辅助完善模块解析链
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "src/**/*.d.ts"]
+}

package/tsconfig.json ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/tsconfig.node.json ADDED Viewed

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts ADDED Viewed

@@ -0,0 +1,22 @@
+import { defineConfig } from "vite"
+import vue from "@vitejs/plugin-vue"
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+  build: {
+    lib: {
+      entry: "src/components/index.ts",
+      name: "fo-vue-ui", // 库名
+      fileName: "fo-vue-ui", // 输出文件名，打包后dist文件夹中生成的文件
+    },
+    rollupOptions: {
+      external: ["vue"], // 排除依赖包
+      output: {
+        globals: {
+          vue: "Vue",
+        },
+      },
+    },
+  },
+})