init

.svn/pristine/a7/a7041df10b10ee4768fb2e062a4f6737ef7f8dcc.svn-base

@@ -0,0 +1,144 @@
+@import "../tag/index.less";
+@import "../popper/index.less";
+@import "../tooltip/index.less";
+
+@tag-input-lg: 44px;
+@tag-input-md: 38px;
+@tag-input-sm: 32px;
+@tag-input-xs: 26px;
+@tag-input-boeder: 1px;
+@tag-input-inner-padding-lg: 2px;
+@tag-input-inner-padding-md: 2px;
+@tag-input-inner-padding-sm: 1px;
+@tag-input-inner-padding-xs: 1px;
+@tag-margin-top-lg: 2px;
+@tag-margin-top-md: 2px;
+@tag-margin-top-sm: 1px;
+@tag-margin-top-xs: 1px;
+@tag-margin-bottom-lg: 2px;
+@tag-margin-bottom-md: 2px;
+@tag-margin-bottom-sm: 1px;
+@tag-margin-bottom-xs: 1px;
+
+.layui-tag-input {
+  display: inline-flex;
+  box-sizing: border-box;
+  width: 100%;
+  border-width: @tag-input-boeder;
+  border-style: solid;
+  border-color: var(--input-border-color);
+  border-radius: var(--input-border-radius);
+  cursor: text;
+
+  &-inner {
+    flex: 1;
+    overflow: hidden;
+    line-height: 0;
+    padding: @tag-input-inner-padding-md 0;
+  }
+
+  &-mirror {
+    position: absolute;
+    top: 0;
+    left: 0;
+    white-space: pre;
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  &-clear {
+    flex: none;
+    display: flex;
+    align-items: center;
+    padding: 0 10px;
+    color: rgba(0, 0, 0, 0.45);
+    cursor: pointer;
+    visibility: hidden;
+  }
+
+  &-clear:hover {
+    opacity: 0.8;
+  }
+
+  & &-inner-input {
+    box-sizing: border-box;
+    border: none;
+  }
+
+  &-disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+  
+  &-disabled * {
+    cursor: not-allowed;
+  }
+
+  .layui-tag {
+    margin-right: 5px;
+    margin-top: 2px;
+    margin-bottom: 2px;
+    white-space: pre-wrap;
+  }
+
+  &-collapsed-panel {
+    white-space: normal;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    width: fit-content;
+    height: auto;
+    overflow: hidden;
+
+    .layui-tag {
+      margin-right: 5px;
+      margin-bottom: 4px;
+    }
+  }
+
+  .set-size(@size) {
+    @height: ~'tag-input-@{size}';
+    @tag-margin-top: ~'tag-margin-top-@{size}';
+    @tag-margin-bottom: ~'tag-margin-bottom-@{size}';
+    @inner-padding: ~'tag-input-inner-padding-@{size}';
+
+    &.layui-tag-input-@{size} {
+      min-height: @@height;
+
+      .layui-tag-input-inner-input {
+        height: @@height - (@@inner-padding + @tag-input-boeder)* 2;
+        vertical-align: middle;
+      }
+
+      .layui-tag-input-inner {
+        padding: @@inner-padding 5px;
+      }
+
+      .layui-tag {
+        margin-top: @@tag-margin-top;
+        margin-bottom: @@tag-margin-bottom;
+      }
+
+    }
+  }
+
+  .set-size(lg);
+  .set-size(md);
+  .set-size(sm);
+  .set-size(xs);
+}
+
+.layui-tag-input-suffix {
+  display: flex;
+  flex: none;
+  align-items: center;
+  padding: 0 10px;
+}
+
+.layui-tag-input:not(.layui-tag-input-disabled):hover,
+.layui-tag-input:not(.layui-tag-input-disabled):focus-within {
+  border-color: #d2d2d2!important;
+  .layui-tag-input-clear{
+    visibility: visible;
+  }
+}

.svn/pristine/a7/a719360ad83cb921ff417241c32fccf9fef466c5.svn-base

@@ -0,0 +1,203 @@
+<template>
+  <div class="lay-code">
+    <div id="source" class="source">
+      <slot></slot>
+      <div v-if="$slots.description" class="description">
+        <slot name="description"></slot>
+      </div>
+    </div>
+    <div ref="meta" class="meta">
+      <div class="language-html">
+        <slot name="code"></slot>
+      </div>
+    </div>
+    <div :class="{ 'is-fixed': isFixContorl }" class="control">
+      <i class="layui-icon layui-icon-play btn" @click="onPlayground" />
+      <i class="layui-icon layui-icon-file btn" @click="copy"></i>
+      <i class="layui-icon layui-icon-fonts-code btn" @click="toggle"></i>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref, watch } from "vue";
+import { usePlayGround } from "../composable/usePlayground";
+
+const meta = ref<HTMLElement>({} as HTMLElement);
+const isFixContorl = ref(false);
+const codeAreaHeight = ref(0);
+
+const show = ref(false);
+
+const toggle = function () {
+  show.value = !show.value;
+};
+
+const onPlayground = async function () {
+  const foundCode = meta.value.querySelector(".language-html");
+  const sourceCode = foundCode?.textContent ?? "";
+  const { link } = await usePlayGround(sourceCode, true);
+  window.open(link);
+};
+
+const copy = function () {
+  const foundCodes = meta.value.getElementsByClassName("language-html");
+  const foundCode = foundCodes[0];
+  let successful = false;
+  if (navigator.clipboard && document.hasFocus()) {
+    const text = foundCode.textContent || "";
+    navigator.clipboard.writeText(text);
+    successful = true;
+  } else if (window.getSelection()) {
+    var range = document.createRange();
+    let copyDiv;
+    if (show.value) {
+      range.selectNode(foundCode);
+    } else {
+      copyDiv = document.createElement("div");
+      copyDiv.innerHTML = foundCode.innerHTML;
+      copyDiv.style.position = "fixed";
+      copyDiv.style.left = "-9999px";
+      document.body.appendChild(copyDiv);
+      range.selectNode(copyDiv);
+    }
+    window.getSelection()?.addRange(range);
+    try {
+      successful = document.execCommand("copy");
+    } catch (err) {
+      successful = false;
+      console.error(err);
+    }
+    window.getSelection()?.removeAllRanges();
+    copyDiv?.remove();
+  }
+
+  if (successful) {
+    window.alert("复制成功");
+  } else {
+    window.alert("复制失败");
+  }
+};
+
+onMounted(() => {
+  const foundDescs = meta.value.getElementsByClassName("description");
+  const foundCodes = meta.value.getElementsByClassName("language-html");
+
+  if (foundDescs.length) {
+    codeAreaHeight.value =
+      foundDescs[0].clientHeight + foundCodes[0].clientHeight + 30;
+  } else {
+    codeAreaHeight.value = foundCodes[0].clientHeight + 20;
+  }
+});
+
+onUnmounted(() => {
+  window.removeEventListener("scroll", handleScroll);
+});
+
+watch(show, (value) => {
+  if (value) {
+    meta.value.style.height = `${codeAreaHeight.value}px`;
+    window.addEventListener("scroll", handleScroll);
+    setTimeout(handleScroll, 100);
+  } else {
+    meta.value.style.height = "0";
+    window.removeEventListener("scroll", handleScroll);
+  }
+});
+
+function handleScroll() {
+  const { top, bottom } = meta.value.getBoundingClientRect();
+  isFixContorl.value =
+    bottom > window.innerHeight && top + 44 <= window.innerHeight;
+}
+</script>
+
+<style>
+.lay-code {
+  margin: 1rem 0;
+  border: 1px solid whitesmoke;
+  border-radius: 3px;
+  background: var(--c-bg);
+  transition: all 0.2s;
+}
+.lay-code:hover {
+  box-shadow: var(--shadow-2);
+}
+.lay-code .source {
+  padding: 24px;
+  padding-bottom: 15px;
+}
+.lay-code .meta {
+  padding: 0 10px;
+  height: 0;
+  background-color: var(--c-page-background);
+  overflow: hidden;
+  transition: height 0.2s;
+}
+.lay-code .source .description {
+  padding: 20px;
+  margin: 20px 0;
+  margin-bottom: 0px;
+  border: 1px solid whitesmoke;
+  box-sizing: border-box;
+  background: var(--c-bg);
+  font-size: 14px;
+  line-height: 22px;
+  color: var(--c-text-light-1);
+  word-break: break-word;
+}
+.lay-code .source .description p {
+  margin: 0 !important;
+  line-height: 26px !important;
+}
+.lay-code .source .description code {
+  display: inline-block;
+  padding: 1px 5px;
+  margin: 0 4px;
+  height: 18px;
+  border-radius: 2px;
+  background-color: var(--code-inline-bg-color);
+  font-size: 12px;
+  line-height: 18px;
+  color: var(--c-text-light);
+}
+.lay-code pre {
+  margin: 1rem 0.8rem 1rem 0.8rem;
+}
+
+.lay-code .control {
+  height: 44px;
+  box-sizing: border-box;
+  margin-top: 10px;
+  border-top: 1px solid whitesmoke;
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+  background: var(--c-bg);
+  text-align: center;
+  color: var(--c-text);
+  cursor: pointer;
+  width: 100%;
+  user-select: none;
+}
+.lay-code .control.is-fixed {
+  position: sticky;
+  z-index: 11;
+  bottom: 0;
+}
+.lay-code .control:hover {
+  background-color: var(--c-page-background);
+  color: var(--c-brand);
+}
+.lay-code .control > i {
+  display: inline-block;
+  font-size: 16px;
+  line-height: 44px;
+  transition: all 0.3s;
+  padding-left: 10px;
+  padding-right: 10px;
+}
+.btn:hover::before {
+  color: #5fb878;
+}
+</style>

.svn/pristine/a7/a79d057388ee2c2fe6561d7697f1f5efcff96f23.svn-base

@@ -0,0 +1,49 @@
+#!/bin/sh
+#
+# An example hook script to verify what is about to be committed.
+# Called by "git commit" with no arguments.  The hook should
+# exit with non-zero status after issuing an appropriate message if
+# it wants to stop the commit.
+#
+# To enable this hook, rename this file to "pre-commit".
+
+if git rev-parse --verify HEAD >/dev/null 2>&1
+then
+	against=HEAD
+else
+	# Initial commit: diff against an empty tree object
+	against=$(git hash-object -t tree /dev/null)
+fi
+
+# If you want to allow non-ASCII filenames set this variable to true.
+allownonascii=$(git config --type=bool hooks.allownonascii)
+
+# Redirect output to stderr.
+exec 1>&2
+
+# Cross platform projects tend to avoid non-ASCII filenames; prevent
+# them from being added to the repository. We exploit the fact that the
+# printable range starts at the space character and ends with tilde.
+if [ "$allownonascii" != "true" ] &&
+	# Note that the use of brackets around a tr range is ok here, (it's
+	# even required, for portability to Solaris 10's /usr/bin/tr), since
+	# the square bracket bytes happen to fall in the designated range.
+	test $(git diff --cached --name-only --diff-filter=A -z $against |
+	  LC_ALL=C tr -d '[ -~]\0' | wc -c) != 0
+then
+	cat <<\EOF
+Error: Attempt to add a non-ASCII file name.
+
+This can cause problems if you want to work with people on other platforms.
+
+To be portable it is advisable to rename the file.
+
+If you know what you are doing you can disable this check using:
+
+  git config hooks.allownonascii true
+EOF
+	exit 1
+fi
+
+# If there are whitespace errors, print the offending file names and fail.
+exec git diff-index --check --cached $against --