iking-template-inset 0.0.1

package/README.md

@@ -0,0 +1,16 @@
+# 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.
+
+## Recommended IDE Setup
+
+- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)
+
+## Type Support For `.vue` Imports in TS
+
+Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can enable Volar's Take Over mode by following these steps:
+
+1. Run `Extensions: Show Built-in Extensions` from VS Code's command palette, look for `TypeScript and JavaScript Language Features`, then right click and select `Disable (Workspace)`. By default, Take Over mode will enable itself if the default TypeScript extension is disabled.
+2. Reload the VS Code window by running `Developer: Reload Window` from the command palette.
+
+You can learn more about Take Over mode [here](https://github.com/johnsoncodehk/volar/discussions/471).

package/dist/IkingTemplateInset.es.js

@@ -0,0 +1,80 @@
+import { defineComponent as g, ref as r, watch as k, openBlock as u, createElementBlock as c, createElementVNode as _, Fragment as m, renderList as h, renderSlot as b, createTextVNode as $, toDisplayString as I, withKeys as N, withModifiers as T, nextTick as w } from "vue";
+const x = { class: "msg-template" }, L = { class: "left-template-tag" }, S = ["onClick"], V = /* @__PURE__ */ g({
+  __name: "App",
+  props: {
+    modelVlaue: {
+      type: String,
+      default: ""
+    },
+    height: { type: Number, default: 300 },
+    width: { type: Number, default: 600 },
+    tagList: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: ["update:modelVlaue"],
+  setup(o, { emit: d }) {
+    const n = r(-1), a = r(), i = () => {
+      const e = document.getSelection();
+      n.value = e != null && e.baseNode ? e != null && e.baseOffset ? e == null ? void 0 : e.baseOffset : 0 : -1;
+    }, t = r(""), v = r("");
+    k(t, (e) => {
+      d("update:modelVlaue", e);
+    });
+    const f = (e) => {
+      const s = document.getSelection();
+      i(), w(() => {
+        t.value = e.target.innerHTML, v.value = s.baseNode.data;
+      });
+    }, y = (e) => {
+      const s = `\u3010${e.label}\${${e.value}}\u3011`;
+      if (n.value === -1)
+        t.value = `${t.value}${s}`;
+      else if (n.value === 0)
+        t.value = `${s}${t.value}`;
+      else {
+        const l = t.value;
+        t.value = l.substring(0, n.value) + s + l.substring(n.value);
+      }
+      a.value.innerHTML = t.value;
+    };
+    return (e, s) => (u(), c("div", x, [
+      _("div", L, [
+        (u(!0), c(m, null, h(o.tagList, (l, p) => (u(), c("div", {
+          onClick: (K) => y(l),
+          key: p
+        }, [
+          e.$slots.item ? b(e.$slots, "item", {
+            key: 0,
+            item: { ...l, index: p }
+          }, void 0, !0) : (u(), c(m, { key: 1 }, [
+            $(I(l.label), 1)
+          ], 64))
+        ], 8, S))), 128))
+      ]),
+      _("div", {
+        ref_key: "insetDom",
+        ref: a,
+        class: "right-template",
+        contenteditable: "",
+        onKeydown: s[0] || (s[0] = N(T(() => {
+        }, ["prevent"]), ["enter"])),
+        onKeyup: f,
+        onClick: i
+      }, null, 544)
+    ]));
+  }
+});
+const A = (o, d) => {
+  const n = o.__vccOpts || o;
+  for (const [a, i] of d)
+    n[a] = i;
+  return n;
+}, C = /* @__PURE__ */ A(V, [["__scopeId", "data-v-18f96dd0"]]), M = (o) => {
+  o.component("IkingTemplateInset", C);
+};
+export {
+  C as default,
+  M as install
+};

package/dist/IkingTemplateInset.umd.js

@@ -0,0 +1 @@
+(function(o,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(o=typeof globalThis<"u"?globalThis:o||self,e(o.IkingTemplateInset={},o.Vue))})(this,function(o,e){"use strict";const f={class:"msg-template"},m={class:"left-template-tag"},_=["onClick"],y=e.defineComponent({__name:"App",props:{modelVlaue:{type:String,default:""},height:{type:Number,default:300},width:{type:Number,default:600},tagList:{type:Array,default:()=>[]}},emits:["update:modelVlaue"],setup(a,{emit:d}){const l=e.ref(-1),c=e.ref(),r=()=>{const t=document.getSelection();l.value=t!=null&&t.baseNode?t!=null&&t.baseOffset?t==null?void 0:t.baseOffset:0:-1},n=e.ref(""),g=e.ref("");e.watch(n,t=>{d("update:modelVlaue",t)});const h=t=>{const s=document.getSelection();r(),e.nextTick(()=>{n.value=t.target.innerHTML,g.value=s.baseNode.data})},b=t=>{const s=`\u3010${t.label}\${${t.value}}\u3011`;if(l.value===-1)n.value=`${n.value}${s}`;else if(l.value===0)n.value=`${s}${n.value}`;else{const i=n.value;n.value=i.substring(0,l.value)+s+i.substring(l.value)}c.value.innerHTML=n.value};return(t,s)=>(e.openBlock(),e.createElementBlock("div",f,[e.createElementVNode("div",m,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.tagList,(i,u)=>(e.openBlock(),e.createElementBlock("div",{onClick:I=>b(i),key:u},[t.$slots.item?e.renderSlot(t.$slots,"item",{key:0,item:{...i,index:u}},void 0,!0):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createTextVNode(e.toDisplayString(i.label),1)],64))],8,_))),128))]),e.createElementVNode("div",{ref_key:"insetDom",ref:c,class:"right-template",contenteditable:"",onKeydown:s[0]||(s[0]=e.withKeys(e.withModifiers(()=>{},["prevent"]),["enter"])),onKeyup:h,onClick:r},null,544)]))}}),v="",T="",p=((a,d)=>{const l=a.__vccOpts||a;for(const[c,r]of d)l[c]=r;return l})(y,[["__scopeId","data-v-18f96dd0"]]),k=a=>{a.component("IkingTemplateInset",p)};o.default=p,o.install=k,Object.defineProperties(o,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/dist/iking-template-inset.d.ts

@@ -0,0 +1,28 @@
+/*
+ * @Author       : wfl
+ * @LastEditors  : wfl
+ * @description  : 
+ * @updateInfo   : 
+ * @Date         : 2022-11-21 10:28:10
+ * @LastEditTime : 2022-11-21 10:28:43
+ */
+/// <reference types="vite/client" />
+
+declare module 'iking-template-inset' {
+  import type { Component } from 'vue'
+  const component: Component<{
+    width: number; // 宽度
+    height: number; // 高度
+    show: boolean;// 是否显示
+    sliderSize: number; // 滑块大小
+    scale: number; // 滑块缩放比例
+    range: number; // 误差范围
+    images: string[] | null; // 自定义图片数组
+    successText: string; // 校验通过文字
+    failText: string; // 校验失败文字
+    sliderText: string; // 滑块文字
+    padding: number; // 内边距
+    el: HTMLBaseElement | string //CSS 选择器字符串或者一个真实的 DOM 节点
+  }>
+  export default component
+}

package/dist/style.css

@@ -0,0 +1 @@
+.__templeate_param_tag{display:inline-block;padding:2px;background:#dfdfdf;font-size:13px;border-radius:4px;margin-right:2px}.msg-template[data-v-18f96dd0]{display:flex}.msg-template>div[data-v-18f96dd0]{flex:1;border:1px solid #9d9393;border-radius:4px;padding:8px;margin-right:16px}.msg-template .left-template-tag[data-v-18f96dd0]{display:flex;flex-wrap:wrap}.msg-template .left-template-tag div[data-v-18f96dd0]{cursor:pointer;user-select:none;padding:3px 8px;margin:3px 1px 3px 3px;width:100px;border-radius:4px;background:#edebeb}.msg-template .right-template[data-v-18f96dd0]{counter-increment:true}.msg-template .right-template[data-v-18f96dd0]:focus-visible{outline:none}

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "iking-template-inset",
+  "private": false,
+  "version": "0.0.1",
+  "main": "./dist/ikingtemplateinset.umd.js",
+  "module": "./dist/ikingtemplateinset.es.js",
+  "author": "金合研究院",
+  "description": "金合前端组件",
+  "homepage": "http://wfl118.cn/",
+  "license": "Apache-2.0",
+  "type": "module",
+  "typings": "dist/iking-template-inset.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/ikingtemplateinset.es.js",
+      "require": "./dist/ikingtemplateinset.umd.js",
+      "module": "./dist/ikingtemplateinset.es.js"
+    },
+    "./dist/style.css": {
+      "import": "./dist/style.css",
+      "require": "./dist/style.css"
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc && vite build",
+    "preview": "vite preview"
+  },
+  "keywords": [
+    "金合",
+    "ikingtemplateinset",
+    "图片验证",
+    "滑动图片验证"
+  ],
+  "dependencies": {
+    "vue": "^3.2.41",
+    "vuedraggable": "^4.1.0"
+  },
+  "devDependencies": {
+    "@types/node": "^18.11.9",
+    "@vitejs/plugin-vue": "^3.2.0",
+    "path": "^0.12.7",
+    "sass": "^1.56.1",
+    "sass-loader": "^13.2.0",
+    "typescript": "^4.6.4",
+    "vite": "^3.2.3",
+    "vite-plugin-static-copy": "^0.12.0",
+    "vue-tsc": "^1.0.9"
+  }
+}