little-dizzy 2.1.0 → 2.3.0

package/src/components/custom/Lztext.vue

@@ -0,0 +1,170 @@
+<template>
+  <div class="Lztext-wrapper">
+    <div class="loader-wrapper">
+      <span class="loader-letter">G</span>
+      <span class="loader-letter">e</span>
+      <span class="loader-letter">n</span>
+      <span class="loader-letter">e</span>
+      <span class="loader-letter">r</span>
+      <span class="loader-letter">a</span>
+      <span class="loader-letter">t</span>
+      <span class="loader-letter">i</span>
+      <span class="loader-letter">n</span>
+      <span class="loader-letter">g</span>
+      <div class="loader"></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+/**
+ * 渐变文字动画
+ * 
+ * 由 LittleDizzy Demo 自动生成
+ * @component Lztext
+ */
+defineOptions({
+  name: 'Lztext'
+})
+
+</script>
+
+<style scoped>
+.loader-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 120px;
+  width: auto;
+  margin: 2rem;
+
+  font-family: "Poppins", sans-serif;
+  font-size: 1.6em;
+  font-weight: 600;
+  user-select: none;
+  color: #fff;
+
+  scale: 2;
+}
+
+.loader {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  z-index: 1;
+
+  background-color: transparent;
+  mask: repeating-linear-gradient(
+    90deg,
+    transparent 0,
+    transparent 6px,
+    black 7px,
+    black 8px
+  );
+}
+
+.loader::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  background-image: radial-gradient(circle at 50% 50%, #ff0 0%, transparent 50%),
+    radial-gradient(circle at 45% 45%, #f00 0%, transparent 45%),
+    radial-gradient(circle at 55% 55%, #0ff 0%, transparent 45%),
+    radial-gradient(circle at 45% 55%, #0f0 0%, transparent 45%),
+    radial-gradient(circle at 55% 45%, #00f 0%, transparent 45%);
+  mask: radial-gradient(
+    circle at 50% 50%,
+    transparent 0%,
+    transparent 10%,
+    black 25%
+  );
+  animation:
+    transform-animation 2s infinite alternate,
+    opacity-animation 4s infinite;
+  animation-timing-function: cubic-bezier(0.6, 0.8, 0.5, 1);
+}
+
+@keyframes transform-animation {
+  0% {
+    transform: translate(-55%);
+  }
+  100% {
+    transform: translate(55%);
+  }
+}
+
+@keyframes opacity-animation {
+  0%,
+  100% {
+    opacity: 0;
+  }
+  15% {
+    opacity: 1;
+  }
+  65% {
+    opacity: 0;
+  }
+}
+
+.loader-letter {
+  display: inline-block;
+  opacity: 0;
+  animation: loader-letter-anim 4s infinite linear;
+  z-index: 2;
+}
+
+.loader-letter:nth-child(1) {
+  animation-delay: 0.1s;
+}
+.loader-letter:nth-child(2) {
+  animation-delay: 0.205s;
+}
+.loader-letter:nth-child(3) {
+  animation-delay: 0.31s;
+}
+.loader-letter:nth-child(4) {
+  animation-delay: 0.415s;
+}
+.loader-letter:nth-child(5) {
+  animation-delay: 0.521s;
+}
+.loader-letter:nth-child(6) {
+  animation-delay: 0.626s;
+}
+.loader-letter:nth-child(7) {
+  animation-delay: 0.731s;
+}
+.loader-letter:nth-child(8) {
+  animation-delay: 0.837s;
+}
+.loader-letter:nth-child(9) {
+  animation-delay: 0.942s;
+}
+.loader-letter:nth-child(10) {
+  animation-delay: 1.047s;
+}
+
+@keyframes loader-letter-anim {
+  0% {
+    opacity: 0;
+  }
+  5% {
+    opacity: 1;
+    text-shadow: 0 0 4px #fff;
+    transform: scale(1.1) translateY(-2px);
+  }
+  20% {
+    opacity: 0.2;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+</style>

package/src/components/custom/index.js

@@ -6,13 +6,17 @@
  */
 
 import Lzbutton from './lzbutton.vue'
+import Lztext from './Lztext.vue'
+import Lztheme from './lztheme.vue'
 
 // 自定义组件导出
 export const customComponents = {
-  Lzbutton
+  Lzbutton,
+  Lztext,
+  Lztheme
 }
 
 // 单独导出每个组件
-export { Lzbutton }
+export { Lzbutton, Lztext, Lztheme }
 
 export default customComponents

package/src/components/custom/lzbutton.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="lzbutton-wrapper">
     <button class="button">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 24">
-            <path d="m18 0 8 12 10-8-4 20H4L0 4l10 8 8-12z"></path>
-        </svg>
-        Unlock Pro
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 24">
+        <path d="m18 0 8 12 10-8-4 20H4L0 4l10 8 8-12z"></path>
+      </svg>
+      <slot>Unlock Pro</slot>
     </button>
   </div>
 </template>
@@ -36,7 +36,7 @@ defineOptions({
   color: #fff;
   border: none;
   background-position: left center;
-  box-shadow: 0 30px 10px -20px rgba(0,0,0,.2);
+  box-shadow: 0 30px 10px -20px rgba(0, 0, 0, .2);
   transition: background .3s ease;
 }
 

package/src/components/custom/lztheme.vue

@@ -0,0 +1,241 @@
+<template>
+  <div class="lztheme-wrapper">
+    <label for="theme" class="theme">
+    	<span class="theme__toggle-wrap">
+    		<input id="theme" class="theme__toggle" type="checkbox" role="switch" name="theme" value="dark">
+    		<span class="theme__fill"></span>
+    		<span class="theme__icon">
+    			<span class="theme__icon-part"></span>
+    			<span class="theme__icon-part"></span>
+    			<span class="theme__icon-part"></span>
+    			<span class="theme__icon-part"></span>
+    			<span class="theme__icon-part"></span>
+    			<span class="theme__icon-part"></span>
+    			<span class="theme__icon-part"></span>
+    			<span class="theme__icon-part"></span>
+    			<span class="theme__icon-part"></span>
+    		</span>
+    	</span>
+    </label>
+  </div>
+</template>
+
+<script setup>
+/**
+ * 主题切换
+ * 
+ * 由 LittleDizzy Demo 自动生成
+ * @component Lztheme
+ */
+defineOptions({
+  name: 'Lztheme'
+})
+</script>
+
+<style scoped>
+/* Default */
+.theme {
+  display: flex;
+  align-items: center;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.theme__fill,
+.theme__icon {
+  transition: 0.3s;
+}
+
+.theme__fill {
+  background-color: var(--bg);
+  display: block;
+  mix-blend-mode: difference;
+  position: fixed;
+  inset: 0;
+  height: 100%;
+  transform: translateX(-100%);
+}
+
+.theme__icon,
+.theme__toggle {
+  z-index: 1;
+}
+
+.theme__icon,
+.theme__icon-part {
+  position: absolute;
+}
+
+.theme__icon {
+  display: block;
+  top: 0.5em;
+  left: 0.5em;
+  width: 1.5em;
+  height: 1.5em;
+}
+
+.theme__icon-part {
+  border-radius: 50%;
+  box-shadow: 0.4em -0.4em 0 0.5em hsl(0,0%,100%) inset;
+  top: calc(50% - 0.5em);
+  left: calc(50% - 0.5em);
+  width: 1em;
+  height: 1em;
+  transition: box-shadow var(--transDur) ease-in-out,
+		opacity var(--transDur) ease-in-out,
+		transform var(--transDur) ease-in-out;
+  transform: scale(0.5);
+}
+
+.theme__icon-part ~ .theme__icon-part {
+  background-color: hsl(0,0%,100%);
+  border-radius: 0.05em;
+  top: 50%;
+  left: calc(50% - 0.05em);
+  transform: rotate(0deg) translateY(0.5em);
+  transform-origin: 50% 0;
+  width: 0.1em;
+  height: 0.2em;
+}
+
+.theme__icon-part:nth-child(3) {
+  transform: rotate(45deg) translateY(0.45em);
+}
+
+.theme__icon-part:nth-child(4) {
+  transform: rotate(90deg) translateY(0.45em);
+}
+
+.theme__icon-part:nth-child(5) {
+  transform: rotate(135deg) translateY(0.45em);
+}
+
+.theme__icon-part:nth-child(6) {
+  transform: rotate(180deg) translateY(0.45em);
+}
+
+.theme__icon-part:nth-child(7) {
+  transform: rotate(225deg) translateY(0.45em);
+}
+
+.theme__icon-part:nth-child(8) {
+  transform: rotate(270deg) translateY(0.5em);
+}
+
+.theme__icon-part:nth-child(9) {
+  transform: rotate(315deg) translateY(0.5em);
+}
+
+.theme__label,
+.theme__toggle,
+.theme__toggle-wrap {
+  position: relative;
+}
+
+.theme__toggle,
+.theme__toggle:before {
+  display: block;
+}
+
+.theme__toggle {
+  background-color: hsl(48,90%,85%);
+  border-radius: 25% / 50%;
+  box-shadow: 0 0 0 0.125em var(--primaryT);
+  padding: 0.25em;
+  width: 6em;
+  height: 3em;
+  -webkit-appearance: none;
+  appearance: none;
+  transition: background-color var(--transDur) ease-in-out,
+		box-shadow 0.15s ease-in-out,
+		transform var(--transDur) ease-in-out;
+}
+
+.theme__toggle:before {
+  background-color: hsl(48,90%,55%);
+  border-radius: 50%;
+  content: "";
+  width: 2.5em;
+  height: 2.5em;
+  transition: 0.3s;
+}
+
+.theme__toggle:focus {
+  box-shadow: 0 0 0 0.125em var(--primary);
+  outline: transparent;
+}
+
+/* Checked */
+.theme__toggle:checked {
+  background-color: hsl(198,90%,15%);
+}
+
+.theme__toggle:checked:before,
+.theme__toggle:checked ~ .theme__icon {
+  transform: translateX(3em);
+}
+
+.theme__toggle:checked:before {
+  background-color: hsl(198,90%,55%);
+}
+
+.theme__toggle:checked ~ .theme__fill {
+  transform: translateX(0);
+}
+
+.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(1) {
+  box-shadow: 0.2em -0.2em 0 0.2em hsl(0,0%,100%) inset;
+  transform: scale(1);
+  top: 0.2em;
+  left: -0.2em;
+}
+
+.theme__toggle:checked ~ .theme__icon .theme__icon-part ~ .theme__icon-part {
+  opacity: 0;
+}
+
+.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(2) {
+  transform: rotate(45deg) translateY(0.8em);
+}
+
+.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(3) {
+  transform: rotate(90deg) translateY(0.8em);
+}
+
+.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(4) {
+  transform: rotate(135deg) translateY(0.8em);
+}
+
+.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(5) {
+  transform: rotate(180deg) translateY(0.8em);
+}
+
+.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(6) {
+  transform: rotate(225deg) translateY(0.8em);
+}
+
+.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(7) {
+  transform: rotate(270deg) translateY(0.8em);
+}
+
+.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(8) {
+  transform: rotate(315deg) translateY(0.8em);
+}
+
+.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(9) {
+  transform: rotate(360deg) translateY(0.8em);
+}
+
+.theme__toggle-wrap {
+  margin: 0 0.75em;
+}
+
+@supports selector(:focus-visible) {
+  .theme__toggle:focus {
+    box-shadow: 0 0 0 0.125em var(--primaryT);
+  }
+
+  .theme__toggle:focus-visible {
+    box-shadow: 0 0 0 0.125em var(--primary);
+  }
+}
+</style>

package/src/components/message.js

@@ -0,0 +1,238 @@
+/**
+ * Message 全局消息提示服务
+ * 
+ * 使用方法：
+ * import { message } from '@/components/message.js'
+ * 
+ * message.success('操作成功')
+ * message.error('操作失败')
+ * message.warning('警告信息')
+ * message.info('提示信息')
+ * 
+ * // 带配置
+ * message.success('操作成功', { duration: 5000, closable: true })
+ */
+
+import { createApp, h, ref } from 'vue'
+import Message from './Message.vue'
+
+let messageInstance = null
+let messageContainer = null
+
+// Initialize message instance
+const initMessage = () => {
+  if (messageInstance) return messageInstance
+
+  messageContainer = document.createElement('div')
+  messageContainer.id = 'ld-message-container'
+  document.body.appendChild(messageContainer)
+
+  const app = createApp({
+    setup () {
+      const messageRef = ref(null)
+      return () => h(Message, { ref: messageRef })
+    }
+  })
+
+  const vm = app.mount(messageContainer)
+  messageInstance = vm.$el.__vueParentComponent?.exposed || vm.$el.parentNode?.__vueParentComponent?.subTree?.component?.exposed
+
+  // Wait for next tick to get the exposed methods
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      const container = document.querySelector('#ld-message-container')
+      if (container) {
+        const vueInstance = container._vnode?.component?.subTree?.component?.exposed
+        if (vueInstance) {
+          messageInstance = vueInstance
+          resolve(messageInstance)
+        }
+      }
+    }, 0)
+  })
+}
+
+// Create a simpler implementation using reactive state
+const messages = ref([])
+let messageId = 0
+
+const typeClasses = {
+  success: 'ld-message--success',
+  warning: 'ld-message--warning',
+  error: 'ld-message--error',
+  info: 'ld-message--info'
+}
+
+const createMessageElement = (options) => {
+  const id = ++messageId
+  const type = options.type || 'info'
+  const content = options.content || ''
+  const duration = options.duration ?? 3000
+  const closable = options.closable ?? false
+
+  // Create message element
+  const msgEl = document.createElement('div')
+  msgEl.className = `ld-message ld-message--${type}`
+  msgEl.setAttribute('data-id', id)
+
+  // Icon SVGs
+  const icons = {
+    success: `<svg class="ld-message-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+      <path d="M20 6L9 17l-5-5" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>`,
+    warning: `<svg class="ld-message-icon" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
+    </svg>`,
+    error: `<svg class="ld-message-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+      <circle cx="12" cy="12" r="10"/>
+      <path d="M15 9l-6 6M9 9l6 6" stroke-linecap="round"/>
+    </svg>`,
+    info: `<svg class="ld-message-icon" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
+    </svg>`
+  }
+
+  let html = `${icons[type]}<span class="ld-message-content">${content}</span>`
+
+  if (closable) {
+    html += `<button class="ld-message-close" onclick="window.__ldMessageClose(${id})">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M18 6L6 18M6 6l12 12"/>
+      </svg>
+    </button>`
+  }
+
+  msgEl.innerHTML = html
+
+  return { id, element: msgEl, duration }
+}
+
+// Ensure container exists
+const ensureContainer = () => {
+  let container = document.getElementById('ld-message-root')
+  if (!container) {
+    container = document.createElement('div')
+    container.id = 'ld-message-root'
+    document.body.appendChild(container)
+
+    // Add styles
+    const style = document.createElement('style')
+    style.textContent = `
+      #ld-message-root {
+        position: fixed;
+        top: 16px;
+        left: 50%;
+        transform: translateX(-50%);
+        z-index: 9999;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 12px;
+        pointer-events: none;
+      }
+      .ld-message {
+        pointer-events: auto;
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 12px 20px;
+        border-radius: 8px;
+        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+        backdrop-filter: blur(8px);
+        animation: ldMessageIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        font-size: 14px;
+        font-weight: 500;
+      }
+      .ld-message.ld-message--closing {
+        animation: ldMessageOut 0.2s ease-in forwards;
+      }
+      .ld-message--success { background: rgba(16, 185, 129, 0.95); color: white; }
+      .ld-message--warning { background: rgba(245, 158, 11, 0.95); color: white; }
+      .ld-message--error { background: rgba(239, 68, 68, 0.95); color: white; }
+      .ld-message--info { background: rgba(14, 165, 233, 0.95); color: white; }
+      .ld-message-icon { width: 20px; height: 20px; flex-shrink: 0; }
+      .ld-message-content { white-space: nowrap; }
+      .ld-message-close {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 20px;
+        height: 20px;
+        margin-left: 4px;
+        padding: 0;
+        border: none;
+        background: transparent;
+        color: currentColor;
+        cursor: pointer;
+        border-radius: 50%;
+        transition: background 0.2s;
+      }
+      .ld-message-close:hover { background: rgba(255,255,255,0.2); }
+      .ld-message-close svg { width: 14px; height: 14px; }
+      @keyframes ldMessageIn {
+        from { opacity: 0; transform: translateY(-20px) scale(0.9); }
+        to { opacity: 1; transform: translateY(0) scale(1); }
+      }
+      @keyframes ldMessageOut {
+        from { opacity: 1; transform: translateY(0) scale(1); }
+        to { opacity: 0; transform: translateY(-10px) scale(0.95); }
+      }
+    `
+    document.head.appendChild(style)
+  }
+  return container
+}
+
+// Close message
+const closeMessage = (id) => {
+  const container = document.getElementById('ld-message-root')
+  if (!container) return
+
+  const msgEl = container.querySelector(`[data-id="${id}"]`)
+  if (msgEl) {
+    msgEl.classList.add('ld-message--closing')
+    setTimeout(() => {
+      msgEl.remove()
+    }, 200)
+  }
+}
+
+// Expose close function globally
+if (typeof window !== 'undefined') {
+  window.__ldMessageClose = closeMessage
+}
+
+// Show message
+const showMessage = (options) => {
+  const container = ensureContainer()
+  const { id, element, duration } = createMessageElement(options)
+
+  container.appendChild(element)
+
+  if (duration > 0) {
+    setTimeout(() => {
+      closeMessage(id)
+    }, duration)
+  }
+
+  return id
+}
+
+// Export message API
+export const message = {
+  success: (content, options = {}) => showMessage({ ...options, type: 'success', content }),
+  warning: (content, options = {}) => showMessage({ ...options, type: 'warning', content }),
+  error: (content, options = {}) => showMessage({ ...options, type: 'error', content }),
+  info: (content, options = {}) => showMessage({ ...options, type: 'info', content }),
+  close: closeMessage,
+  closeAll: () => {
+    const container = document.getElementById('ld-message-root')
+    if (container) {
+      container.innerHTML = ''
+    }
+  }
+}
+
+export default message
+

package/src/index.js

@@ -23,6 +23,8 @@
 import Button from './components/Button.vue'
 import Card from './components/Card.vue'
 import Modal from './components/Modal.vue'
+import Message from './components/Message.vue'
+import { message } from './components/message.js'
 
 // 导入自定义组件（由 Demo 上传生成）
 import { customComponents } from './components/custom/index.js'
@@ -35,6 +37,7 @@ const components = {
   Button,
   Card,
   Modal,
+  Message,
   ...customComponents
 }
 
@@ -53,7 +56,7 @@ export const registerSnippets = snippetsModule.registerSnippets
 export const getSnippet = snippetsModule.getSnippet
 
 // 导出内置组件（按需引入）
-export { Button, Card, Modal }
+export { Button, Card, Modal, Message, message }
 
 // 重新导出自定义组件
 export * from './components/custom/index.js'