@ikun2274/spiritechoui 0.1.41 → 0.1.50

package/dist/spiritechoui.es.js

@@ -4,7 +4,7 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { openBlock, createElementBlock, normalizeClass, normalizeStyle, renderSlot, createElementVNode, toDisplayString, defineComponent, withDirectives, vModelDynamic } from "vue";
+import { openBlock, createElementBlock, normalizeClass, normalizeStyle, renderSlot, createElementVNode, toDisplayString, defineComponent, withDirectives, vModelDynamic, ref, vShow } from "vue";
 class MyUI {
   /**
    * 支持 app.use(MyUI) 注册的静态方法
@@ -59,7 +59,7 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const _sfc_main$1 = {
+const _sfc_main$2 = {
   props: {
     // 文本样式类型
     textType: {
@@ -106,8 +106,8 @@ const _sfc_main$1 = {
     }
   }
 };
-const _hoisted_1$1 = ["disabled"];
-function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$2 = ["disabled"];
+function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("button", {
     class: normalizeClass(["SpiritEchoBtn", [
       `SpiritEchoBtn--${$props.type}`,
@@ -124,10 +124,10 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
         style: normalizeStyle($props.textStyle)
       }, toDisplayString($props.text), 7)
     ])
-  ], 14, _hoisted_1$1);
+  ], 14, _hoisted_1$2);
 }
-const myButton = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
-const _sfc_main = defineComponent({
+const speButton = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2]]);
+const _sfc_main$1 = defineComponent({
   name: "SpInput",
   props: {
     modelValue: {
@@ -242,10 +242,10 @@ const _sfc_main = defineComponent({
   }
 });
 const SpInput_vue_vue_type_style_index_0_lang = "";
-const _hoisted_1 = { class: "SPInput-container" };
-const _hoisted_2 = ["type", "placeholder", "disabled", "maxlength", "name", "readonly"];
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1, [
+const _hoisted_1$1 = { class: "SPInput-container" };
+const _hoisted_2$1 = ["type", "placeholder", "disabled", "maxlength", "name", "readonly"];
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1$1, [
     withDirectives(createElementVNode("input", {
       type: _ctx.type,
       "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.inputValue = $event),
@@ -258,21 +258,66 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       onBlur: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("blur", $event)),
       onChange: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("change", $event)),
       class: "SPInput"
-    }, null, 40, _hoisted_2), [
+    }, null, 40, _hoisted_2$1), [
       [vModelDynamic, _ctx.inputValue]
     ])
   ]);
 }
-const myinput = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+const speinput = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
+const _sfc_main = defineComponent({
+  name: "SimpleCodeDemo",
+  // 仅接收一个核心prop：源码字符串
+  props: {
+    sourceCode: {
+      type: String,
+      required: true,
+      // 必须传入源码字符串
+      description: "要渲染效果+展示的源码字符串"
+    }
+  },
+  setup() {
+    const isShowCode = ref(false);
+    return { isShowCode };
+  }
+});
+const SPEBlock_vue_vue_type_style_index_0_scoped_e0daeed3_lang = "";
+const _hoisted_1 = { class: "code-demo" };
+const _hoisted_2 = ["innerHTML"];
+const _hoisted_3 = { class: "code-area" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    createElementVNode("div", {
+      class: "demo-preview",
+      innerHTML: _ctx.sourceCode
+    }, null, 8, _hoisted_2),
+    createElementVNode("div", {
+      class: "toggle-btn",
+      onClick: _cache[0] || (_cache[0] = ($event) => _ctx.isShowCode = !_ctx.isShowCode)
+    }, toDisplayString(_ctx.isShowCode ? "收起源码" : "查看源码"), 1),
+    withDirectives(createElementVNode("div", _hoisted_3, [
+      createElementVNode("pre", null, [
+        createElementVNode("code", null, toDisplayString(_ctx.sourceCode), 1)
+      ])
+    ], 512), [
+      [vShow, _ctx.isShowCode]
+    ])
+  ]);
+}
+const speblock = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-e0daeed3"]]);
 const injector = new ComponentInjector(MyUI);
-injector.register("form", "myButton", myButton, {
+injector.register("form", "speButton", speButton, {
   type: "default",
   size: "medium"
 });
-injector.register("form", "myinput", myinput);
+injector.register("form", "speinput", speinput);
+injector.register("tool", "speblock", speblock);
 MyUI.install = (app) => {
-  app.component("SPE-Button", MyUI.form.myButton({}));
-  app.component("SPE-Input", MyUI.form.myinput({}));
+  app.component("SPE-Button", MyUI.form.speButton({}));
+  app.component("SPE-Input", MyUI.form.speinput({}));
+  app.component(
+    "SPE-Block",
+    MyUI.tool.speblock({})
+  );
 };
 export {
   MyUI

package/dist/spiritechoui.umd.js

@@ -62,7 +62,7 @@ var __publicField = (obj, key, value) => {
     }
     return target;
   };
-  const _sfc_main$1 = {
+  const _sfc_main$2 = {
     props: {
       // 文本样式类型
       textType: {
@@ -109,8 +109,8 @@ var __publicField = (obj, key, value) => {
       }
     }
   };
-  const _hoisted_1$1 = ["disabled"];
-  function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  const _hoisted_1$2 = ["disabled"];
+  function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("button", {
       class: vue.normalizeClass(["SpiritEchoBtn", [
         `SpiritEchoBtn--${$props.type}`,
@@ -127,10 +127,10 @@ var __publicField = (obj, key, value) => {
           style: vue.normalizeStyle($props.textStyle)
         }, vue.toDisplayString($props.text), 7)
       ])
-    ], 14, _hoisted_1$1);
+    ], 14, _hoisted_1$2);
   }
-  const myButton = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
-  const _sfc_main = vue.defineComponent({
+  const speButton = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2]]);
+  const _sfc_main$1 = vue.defineComponent({
     name: "SpInput",
     props: {
       modelValue: {
@@ -245,10 +245,10 @@ var __publicField = (obj, key, value) => {
     }
   });
   const SpInput_vue_vue_type_style_index_0_lang = "";
-  const _hoisted_1 = { class: "SPInput-container" };
-  const _hoisted_2 = ["type", "placeholder", "disabled", "maxlength", "name", "readonly"];
-  function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+  const _hoisted_1$1 = { class: "SPInput-container" };
+  const _hoisted_2$1 = ["type", "placeholder", "disabled", "maxlength", "name", "readonly"];
+  function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [
       vue.withDirectives(vue.createElementVNode("input", {
         type: _ctx.type,
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.inputValue = $event),
@@ -261,21 +261,66 @@ var __publicField = (obj, key, value) => {
         onBlur: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("blur", $event)),
         onChange: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("change", $event)),
         class: "SPInput"
-      }, null, 40, _hoisted_2), [
+      }, null, 40, _hoisted_2$1), [
         [vue.vModelDynamic, _ctx.inputValue]
       ])
     ]);
   }
-  const myinput = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+  const speinput = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
+  const _sfc_main = vue.defineComponent({
+    name: "SimpleCodeDemo",
+    // 仅接收一个核心prop：源码字符串
+    props: {
+      sourceCode: {
+        type: String,
+        required: true,
+        // 必须传入源码字符串
+        description: "要渲染效果+展示的源码字符串"
+      }
+    },
+    setup() {
+      const isShowCode = vue.ref(false);
+      return { isShowCode };
+    }
+  });
+  const SPEBlock_vue_vue_type_style_index_0_scoped_e0daeed3_lang = "";
+  const _hoisted_1 = { class: "code-demo" };
+  const _hoisted_2 = ["innerHTML"];
+  const _hoisted_3 = { class: "code-area" };
+  function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+      vue.createElementVNode("div", {
+        class: "demo-preview",
+        innerHTML: _ctx.sourceCode
+      }, null, 8, _hoisted_2),
+      vue.createElementVNode("div", {
+        class: "toggle-btn",
+        onClick: _cache[0] || (_cache[0] = ($event) => _ctx.isShowCode = !_ctx.isShowCode)
+      }, vue.toDisplayString(_ctx.isShowCode ? "收起源码" : "查看源码"), 1),
+      vue.withDirectives(vue.createElementVNode("div", _hoisted_3, [
+        vue.createElementVNode("pre", null, [
+          vue.createElementVNode("code", null, vue.toDisplayString(_ctx.sourceCode), 1)
+        ])
+      ], 512), [
+        [vue.vShow, _ctx.isShowCode]
+      ])
+    ]);
+  }
+  const speblock = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-e0daeed3"]]);
   const injector = new ComponentInjector(MyUI);
-  injector.register("form", "myButton", myButton, {
+  injector.register("form", "speButton", speButton, {
     type: "default",
     size: "medium"
   });
-  injector.register("form", "myinput", myinput);
+  injector.register("form", "speinput", speinput);
+  injector.register("tool", "speblock", speblock);
   MyUI.install = (app) => {
-    app.component("SPE-Button", MyUI.form.myButton({}));
-    app.component("SPE-Input", MyUI.form.myinput({}));
+    app.component("SPE-Button", MyUI.form.speButton({}));
+    app.component("SPE-Input", MyUI.form.speinput({}));
+    app.component(
+      "SPE-Block",
+      MyUI.tool.speblock({})
+    );
   };
   exports2.MyUI = MyUI;
   Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });

package/dist/style.css

@@ -106,4 +106,36 @@
 }
 .SPInput:read-only {
   background-color: #f5f7fa;
+}.code-demo[data-v-e0daeed3] {
+  border: 1px solid rgba(221, 216, 216, 0.4666666667);
+  margin: 10px 0;
+  align-items: center;
+}
+.code-demo .demo-preview[data-v-e0daeed3] {
+  padding: 20px;
+  background: #ffffff;
+}
+.code-demo .toggle-btn[data-v-e0daeed3] {
+  padding: 8px;
+  text-align: center;
+  background: #ebecec;
+  cursor: pointer;
+  border-top: 1px solid #eee;
+  user-select: none;
+}
+.code-demo .code-area[data-v-e0daeed3] {
+  background: #fbfbfb;
+  padding: 20px;
+  border-top: 1px solid #eee;
+  font-family: Consolas, Monaco, "Courier New", monospace;
+}
+.code-demo .code-area pre[data-v-e0daeed3],
+.code-demo .code-area code[data-v-e0daeed3] {
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #7cdd28;
+  white-space: pre-wrap;
+  word-break: break-all;
+  line-height: 1.8;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ikun2274/spiritechoui",
-  "version": "0.1.41",
+  "version": "0.1.50",
   "main": "dist/spiritechoui.umd.cjs",
   "module": "dist/spiritechoui.es.js",
   "exports": {
@@ -23,6 +23,7 @@
   },
   "scripts": {
     "build": "vite build"
+    
   },
   "keywords": [],
   "author": "",

package/readme.md

@@ -1,6 +1,6 @@
 #  我的第一个UI组件库 SpiritEchoUI
 
-###  目前还是0.1.41版本   
+###  目前还是0.1.5版本   
 
 
 ## 安装组件

package/src/components/SPEBlock.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="code-demo">
+    <!-- 1. 渲染源码成UI效果（核心：v-html 直接渲染字符串为DOM） -->
+    <div class="demo-preview" v-html="sourceCode"></div>
+
+    <!-- 2. 点击按钮：展开/收起 -->
+    <div class="toggle-btn" @click="isShowCode = !isShowCode">
+      {{ isShowCode ? "收起源码" : "查看源码" }}
+    </div>
+
+    <!-- 3. 源码展示区：插值表达式直接展示字符串 -->
+    <div class="code-area" v-show="isShowCode">
+      <pre><code >{{ sourceCode }}</code></pre>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from "vue";
+
+export default defineComponent({
+  name: "SimpleCodeDemo",
+  // 仅接收一个核心prop：源码字符串
+  props: {
+    sourceCode: {
+      type: String,
+      required: true, // 必须传入源码字符串
+      description: "要渲染效果+展示的源码字符串",
+    },
+  },
+  setup() {
+    // 仅维护一个状态：源码区是否显示
+    const isShowCode = ref(false);
+    return { isShowCode };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+// 极简样式：只保证功能，无多余美化
+.code-demo {
+  border: 1px solid #ddd8d877;
+  margin: 10px 0;
+
+  align-items: center;
+
+  // 效果渲染区
+  .demo-preview {
+    padding: 20px;
+    background: #ffffff;
+  }
+
+  // 点击按钮
+  .toggle-btn {
+    padding: 8px;
+    text-align: center;
+    background: #ebecec;
+    cursor: pointer;
+    border-top: 1px solid #eee;
+    user-select: none; // 禁止选中文本
+  }
+
+  // 源码展示区
+  .code-area {
+    background: #fbfbfb;
+    padding: 20px;
+    border-top: 1px solid #eee;
+
+    font-family: Consolas, Monaco, "Courier New", monospace;
+
+    pre,
+    code {
+      margin: 0;
+      font-size: 14px;
+      line-height: 1.5;
+      color: #7cdd28;
+      white-space: pre-wrap; // 保留换行+自动换行
+      word-break: break-all;
+       line-height: 1.8; // 加大行高，阅读更舒适
+    }
+
+  }
+}
+</style>

package/src/registerComponents.js

@@ -3,26 +3,29 @@ import MyUI from './MyUI';
 import ComponentInjector from './ComponentInjector';
 
 //引入组件
-import myButton from './components/Button.vue';
-import myinput from './components/SpInput.vue';
+import speButton from './components/Button.vue';
+import speinput from './components/SpInput.vue';
+import speblock from './components/SPEBlock.vue'
 
 const injector = new ComponentInjector(MyUI);
 
-injector.register('form', 'myButton', myButton, {
+injector.register('form', 'speButton', speButton, {
   type: 'default',
   size: 'medium'
 });
-
 //假设有第二个组件
-injector.register('form', 'myinput', myinput);
+injector.register('form', 'speinput', speinput);
+injector.register('tool', 'speblock', speblock);
 
 //Spirit EchoUI
 
 //全局激活组件
 
 MyUI.install = (app) => {
-  app.component('SPE-Button', MyUI.form.myButton({}));
-  app.component('SPE-Input', MyUI.form.myinput({}));
+  app.component('SPE-Button', MyUI.form.speButton({}));
+  app.component('SPE-Input', MyUI.form.speinput({}));
+  app.component('SPE-Block', MyUI.tool.speblock({})
+  );
 
 
 };