init
This commit is contained in:
@@ -0,0 +1,140 @@
|
||||
import markdown from "markdown-it";
|
||||
import highlight from "./highlight";
|
||||
import type Token from "markdown-it/lib/token";
|
||||
|
||||
function assignScript(script: string) {
|
||||
const dependencies = {} as Record<string, string[]>;
|
||||
const attrs = {} as Record<string, string>;
|
||||
const content = script
|
||||
.replace(/import\s?\{.*\}.*/g, (item) => {
|
||||
const key = getInnerString(item.replace(/'/g, '"'), '"', '"');
|
||||
const value = getInnerString(item.replace(/\s+/g, ""), "{", "}");
|
||||
const list = value ? value.split(",") : [];
|
||||
if (key && dependencies[key]) {
|
||||
dependencies[key] = dependencies[key].concat(list);
|
||||
} else if (key) {
|
||||
dependencies[key] = list;
|
||||
}
|
||||
return "";
|
||||
})
|
||||
/**
|
||||
* const -> let
|
||||
*
|
||||
* const a = -> let a =
|
||||
* const a = -> a =
|
||||
*/
|
||||
.replace(/(const|let|var)\s\w*\s?=/g, (item) => {
|
||||
const attr = getInnerString(item, "\\s", "\\s?=");
|
||||
if (attr && !(attr in attrs)) {
|
||||
attrs[attr] = attr;
|
||||
return `let ${attr} =`;
|
||||
} else {
|
||||
return attr + " =";
|
||||
}
|
||||
})
|
||||
// Remove extra line breaks
|
||||
.replace(/\n+/gm, "\n");
|
||||
// Combine the import
|
||||
const reImport = Object.keys(dependencies).reduce((all, item) => {
|
||||
const filterAttrs = [...new Set(dependencies[item])];
|
||||
return all + `import {${filterAttrs + ","}} from '${item}';\n`;
|
||||
}, "");
|
||||
|
||||
return reImport + content;
|
||||
}
|
||||
|
||||
/**
|
||||
* Extract part of the new string from the middle of the string
|
||||
* @param {string} string string
|
||||
* @param {string} prefix RegExp string
|
||||
* @param {string} postfix RegExp string
|
||||
* @param {string} type g | m | i
|
||||
*/
|
||||
function getInnerString(
|
||||
string: string,
|
||||
prefix: string,
|
||||
postfix = "",
|
||||
type: "i" | "g" | "m" = "i"
|
||||
): string | undefined {
|
||||
const result = new RegExp(`${prefix}(.*)${postfix}`, type);
|
||||
const match = string.match(result);
|
||||
return match ? match[1].trim() : undefined;
|
||||
}
|
||||
|
||||
let script = ""; // Record the <script> label of the current page
|
||||
|
||||
export default {
|
||||
render: (tokens: Token[], idx: number): string => {
|
||||
// the `demo` block of the current page
|
||||
const htmlBlock = tokens.filter((item) => item.type === "html_block");
|
||||
const { nesting, info = "", map } = tokens[idx];
|
||||
|
||||
if (nesting === -1) {
|
||||
return "</lay-code>";
|
||||
}
|
||||
|
||||
const matchedInfo = info.trim().match(/^demo\s+(.*)$/);
|
||||
const description = matchedInfo && matchedInfo[1];
|
||||
const descTemplate = markdown().render(description || "");
|
||||
let str = ""; // copy the current `demo` block code
|
||||
let lastLine = NaN;
|
||||
|
||||
for (let i = 0; i < htmlBlock.length; i++) {
|
||||
const item = htmlBlock[i];
|
||||
|
||||
if (item.map && map && item.map[0] >= map[0] && item.map[1] <= map[1]) {
|
||||
const { map, content } = item;
|
||||
const delta = map[0] - (lastLine || map[1]);
|
||||
|
||||
if (delta > 0) {
|
||||
str += "\n".repeat(delta);
|
||||
}
|
||||
str += content;
|
||||
lastLine = map[1];
|
||||
if (i === 0) {
|
||||
script = "";
|
||||
}
|
||||
// Remove top <template>
|
||||
if (/^<template>/.test(content)) {
|
||||
const reContent = content.match(/^<template>((\s|\S)*)<\/template>/m);
|
||||
|
||||
htmlBlock[i].content = (reContent && reContent[1]) || "";
|
||||
}
|
||||
// Extract the <script> label content
|
||||
if (content.includes("<script")) {
|
||||
if (/export\sdefault\s?\{/m.test(content)) {
|
||||
const setup = content.match(
|
||||
/setup\s?\(\)\s?\{((\s|\S)*)return\s?\{/m
|
||||
);
|
||||
const reContent = content.replace(
|
||||
/export\sdefault\s?\{((\s|\S)*)\}/m,
|
||||
(setup && setup[1]) || ""
|
||||
);
|
||||
const reScript = reContent.match(
|
||||
/^<script\s?.*?>((\s|\S)*)<\/script>/m
|
||||
);
|
||||
script += (reScript && reScript[1]) || "";
|
||||
} else {
|
||||
const reScript = content.match(
|
||||
/^<script\s?.*?>((\s|\S)*)<\/script>/m
|
||||
);
|
||||
script += (reScript && reScript[1]) || "";
|
||||
}
|
||||
htmlBlock[i].content = "";
|
||||
}
|
||||
// Change the last content to <script> of the current page
|
||||
if (i + 1 === htmlBlock.length) {
|
||||
htmlBlock[i].content = `
|
||||
<script setup>
|
||||
${assignScript(script)}
|
||||
</script>`;
|
||||
}
|
||||
}
|
||||
}
|
||||
return `
|
||||
<lay-code>
|
||||
${description ? `<template #description>${descTemplate}</template>` : ""}
|
||||
<template #code>${highlight(str, "vue")}</template>
|
||||
`;
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div class="layui-logo">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "LayLogo",
|
||||
};
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import "./index.less";
|
||||
</script>
|
||||
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,15 @@
|
||||
import { w as withInstall } from "../badge/index2.js";
|
||||
import { openBlock, createElementBlock, renderSlot } from "vue";
|
||||
import { _ as _export_sfc } from "../dropdownMenu/index2.js";
|
||||
const _sfc_main = {
|
||||
name: "LayAvatarList"
|
||||
};
|
||||
const _hoisted_1 = { class: "layui-avatar-list" };
|
||||
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
||||
return openBlock(), createElementBlock("div", _hoisted_1, [
|
||||
renderSlot(_ctx.$slots, "default")
|
||||
]);
|
||||
}
|
||||
var Component = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
|
||||
const component = withInstall(Component);
|
||||
export { component as default };
|
||||
Binary file not shown.
@@ -0,0 +1,76 @@
|
||||
::: title Visual Studio Code 插件
|
||||
:::
|
||||
|
||||
::: describe layui-vue-helper 是 layui-vue 的开发增强工具，提供代码片段，自动完成，悬浮提示功能
|
||||
:::
|
||||
|
||||
::: title 安装
|
||||
:::
|
||||
|
||||
::: describe 在 Visual Studio Code 内置或网页版扩展市场搜索 layui-vue-helper，点击安装即可，插件会在 Vue 和 HTML 文件中自动激活
|
||||
:::
|
||||
|
||||
::: title 自动完成
|
||||
:::
|
||||
|
||||
> 按 `Ctrl+Space` (Windows, Linux) 或 `Cmd+Space` (macOS) 查看自动补全列表，目前只支持属性和事件补全
|
||||
|
||||
> 支持 Vue 和 HTML 文件
|
||||
|
||||
> 
|
||||
|
||||
::: title 文档悬停提示
|
||||
:::
|
||||
|
||||
> 移动光标到 layui-vue 的 tag 或 prop，显示悬浮文档。
|
||||
|
||||
> 
|
||||
|
||||
::: title 代码片段
|
||||
:::
|
||||
|
||||
> 输入片段触发词，按 `Tab` 切换预设输入点
|
||||
|
||||
> 
|
||||
|
||||
> **其它代码片段的触发词和 layui-vue 组件名一致**
|
||||
|
||||
::: table
|
||||
|
||||
| Trigger Key | Describe |
|
||||
|-------------|-------------------------|
|
||||
| layer-open | layer-vue 弹层 open()方法|
|
||||
| layer-load | layer-vue 弹层 load()方法|
|
||||
| layer-confirm| layer-vue 弹层 confirm()方法|
|
||||
| layer-msg | layer-vue 弹层 msg()方法|
|
||||
| layer-drawer| layer-vue 弹层 drawer()方法|
|
||||
| lay-cdn | layui-vue CDN |
|
||||
| lay-cdn-es | layui-vue ES Module CDN |
|
||||
| lay-cdn-css | layui-vue css CDN |
|
||||
| v-cdn | Vue 3 CDN |
|
||||
| v-cdn-es | Vue 3 ES Module CDN |
|
||||
| !v | Vue setup 传统模板 |
|
||||
| !vs | Vue setup 语法糖模板 |
|
||||
| !lay-html | layui-vue-html 模板 |
|
||||
| !lay-html-es| layui-vue-html ES Module 模板 |
|
||||
|
||||
:::
|
||||
|
||||
::: title 图标选取
|
||||
:::
|
||||
|
||||
> 按 `Ctrl + Shift + P`，打开命令面板，输入 `layui icon`, 选择 `Open layui icon document`，打开图标文档
|
||||
|
||||
> 选择需要的图标，点击复制
|
||||
|
||||
> 
|
||||
<style>
|
||||
.markdown-body blockquote img{
|
||||
width: 650px;
|
||||
height: 400px;
|
||||
}
|
||||
.markdown-body table{
|
||||
margin-left: 35px;
|
||||
width: 650px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,5 @@
|
||||
.layui-affix{
|
||||
display: block;
|
||||
z-index: 999;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
Reference in New Issue
Block a user