little-dizzy 2.3.0 → 2.5.0

package/src/components/custom/lztheme.vue

@@ -1,26 +1,28 @@
 <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 :for="inputId" class="theme">
+      <span class="theme__toggle-wrap">
+        <input :id="inputId" ref="toggleRef" class="theme__toggle" type="checkbox" role="switch" name="theme"
+          value="dark" :checked="isDark" @change="handleChange">
+        <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>
+import { ref, watch } from 'vue'
+
 /**
  * 主题切换
  * 
@@ -30,6 +32,53 @@
 defineOptions({
   name: 'Lztheme'
 })
+
+// 生成唯一 ID，避免多个实例冲突
+let idCounter = 0
+const inputId = `lztheme-toggle-${++idCounter}-${Date.now()}`
+
+// Props
+const props = defineProps({
+  // 是否为暗色主题
+  modelValue: {
+    type: Boolean,
+    default: false
+  }
+})
+
+// Emits
+const emit = defineEmits(['update:modelValue', 'change'])
+
+// 内部状态
+const toggleRef = ref(null)
+const isDark = ref(props.modelValue)
+
+// 监听 prop 变化，同步到内部状态
+watch(() => props.modelValue, (newVal) => {
+  isDark.value = newVal
+})
+
+// 处理切换
+const handleChange = (event) => {
+  const checked = event.target.checked
+  isDark.value = checked
+  emit('update:modelValue', checked)
+  emit('change', checked)
+}
+
+// 暴露方法给父组件
+defineExpose({
+  toggle: () => {
+    if (toggleRef.value) {
+      toggleRef.value.click()
+    }
+  },
+  setDark: (value) => {
+    isDark.value = value
+    emit('update:modelValue', value)
+    emit('change', value)
+  }
+})
 </script>
 
 <style scoped>
@@ -40,23 +89,13 @@ defineOptions({
   -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 {
+  cursor: pointer;
   z-index: 1;
 }
 
@@ -67,27 +106,28 @@ defineOptions({
 
 .theme__icon {
   display: block;
-  top: 0.5em;
-  left: 0.5em;
+  top: 50%;
+  left: 0.7em;
+  transform: translateY(-50%);
   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;
+  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;
+    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%);
+.theme__icon-part~.theme__icon-part {
+  background-color: hsl(0, 0%, 100%);
   border-radius: 0.05em;
   top: 50%;
   left: calc(50% - 0.05em);
@@ -137,7 +177,7 @@ defineOptions({
 }
 
 .theme__toggle {
-  background-color: hsl(48,90%,85%);
+  background-color: hsl(48, 90%, 85%);
   border-radius: 25% / 50%;
   box-shadow: 0 0 0 0.125em var(--primaryT);
   padding: 0.25em;
@@ -146,12 +186,12 @@ defineOptions({
   -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;
+    box-shadow 0.15s ease-in-out,
+    transform var(--transDur) ease-in-out;
 }
 
 .theme__toggle:before {
-  background-color: hsl(48,90%,55%);
+  background-color: hsl(48, 90%, 55%);
   border-radius: 50%;
   content: "";
   width: 2.5em;
@@ -166,62 +206,61 @@ defineOptions({
 
 /* Checked */
 .theme__toggle:checked {
-  background-color: hsl(198,90%,15%);
+  background-color: hsl(198, 90%, 15%);
 }
 
-.theme__toggle:checked:before,
-.theme__toggle:checked ~ .theme__icon {
+.theme__toggle:checked:before {
   transform: translateX(3em);
 }
 
-.theme__toggle:checked:before {
-  background-color: hsl(198,90%,55%);
+.theme__toggle:checked~.theme__icon {
+  transform: translateX(3em) translateY(-50%);
 }
 
-.theme__toggle:checked ~ .theme__fill {
-  transform: translateX(0);
+.theme__toggle:checked:before {
+  background-color: hsl(198, 90%, 55%);
 }
 
-.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;
+.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;
+  top: calc(50% - 0.5em);
+  left: calc(50% - 0.5em);
 }
 
-.theme__toggle:checked ~ .theme__icon .theme__icon-part ~ .theme__icon-part {
+.theme__toggle:checked~.theme__icon .theme__icon-part~.theme__icon-part {
   opacity: 0;
 }
 
-.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(2) {
+.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) {
+.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) {
+.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) {
+.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) {
+.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) {
+.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) {
+.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) {
+.theme__toggle:checked~.theme__icon .theme__icon-part:nth-child(9) {
   transform: rotate(360deg) translateY(0.8em);
 }
 

package/src/index.js

@@ -24,6 +24,9 @@ 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 Carousel from './components/Carousel.vue'
+import Loading from './components/Loading.vue'
+import Table from './components/Table.vue'
 import { message } from './components/message.js'
 
 // 导入自定义组件（由 Demo 上传生成）
@@ -38,6 +41,9 @@ const components = {
   Card,
   Modal,
   Message,
+  Carousel,
+  Loading,
+  Table,
   ...customComponents
 }
 
@@ -47,6 +53,11 @@ const install = (app, options = {}) => {
   Object.entries(components).forEach(([name, component]) => {
     app.component(options.prefix ? `${options.prefix}${name}` : name, component)
   })
+
+  // 挂载 message 到全局属性
+  app.config.globalProperties.$message = message
+  // 同时提供 provide 方式
+  app.provide('message', message)
 }
 
 // 导出代码片段相关
@@ -56,7 +67,7 @@ export const registerSnippets = snippetsModule.registerSnippets
 export const getSnippet = snippetsModule.getSnippet
 
 // 导出内置组件（按需引入）
-export { Button, Card, Modal, Message, message }
+export { Button, Card, Modal, Message, Carousel, Loading, Table, message }
 
 // 重新导出自定义组件
 export * from './components/custom/index.js'

package/src/snippets/presets/backtop.js

@@ -0,0 +1,25 @@
+/**
+ * Backtop 回到顶部组件示例代码
+ */
+export default {
+  name: 'Backtop',
+  type: 'vue',
+  label: 'Backtop 回到顶部',
+  code: `<template>
+  <!-- 基础用法 -->
+  <Backtop />
+
+  <!-- 指定滚动容器 -->
+  <Backtop target=".my-container" :visibility-height="100" />
+
+  <!-- 自定义内容 -->
+  <Backtop>
+    <span style="font-size: 12px;">UP</span>
+  </Backtop>
+</template>
+
+<script setup>
+import { Backtop } from 'little-dizzy'
+</script>`
+}
+

package/src/snippets/presets/carousel.js

@@ -0,0 +1,22 @@
+/**
+ * Carousel 轮播图组件示例代码
+ */
+export default {
+  name: 'Carousel',
+  type: 'vue',
+  label: 'Carousel 轮播图',
+  code: `<template>
+  <Carousel :items="items" height="300px" />
+</template>
+
+<script setup>
+import { Carousel } from 'little-dizzy'
+
+const items = [
+  { image: 'https://picsum.photos/800/300?random=1', title: '图片 1' },
+  { image: 'https://picsum.photos/800/300?random=2', title: '图片 2' },
+  { image: 'https://picsum.photos/800/300?random=3', title: '图片 3' }
+]
+</script>`
+}
+

package/src/snippets/presets/index.js

@@ -8,17 +8,25 @@ import buttonSnippet from './button.js'
 import cardSnippet from './card.js'
 import modalSnippet from './modal.js'
 import messageSnippet from './message.js'
+import carouselSnippet from './carousel.js'
+import loadingSnippet from './loading.js'
+import tableSnippet from './table.js'
+import backtopSnippet from './backtop.js'
 
 // 所有预设代码片段
 export const presetSnippets = [
   buttonSnippet,
   cardSnippet,
   modalSnippet,
-  messageSnippet
+  messageSnippet,
+  carouselSnippet,
+  loadingSnippet,
+  tableSnippet,
+  backtopSnippet
 ]
 
 // 单独导出
-export { buttonSnippet, cardSnippet, modalSnippet, messageSnippet }
+export { buttonSnippet, cardSnippet, modalSnippet, messageSnippet, carouselSnippet, loadingSnippet, tableSnippet, backtopSnippet }
 
 export default presetSnippets
 

package/src/snippets/presets/loading.js

@@ -0,0 +1,20 @@
+/**
+ * Loading 加载组件示例代码
+ */
+export default {
+  name: 'Loading',
+  type: 'vue',
+  label: 'Loading 加载',
+  code: `<template>
+  <Loading type="spinner" />
+  <Loading type="dots" />
+  <Loading type="ring" />
+  <Loading type="pulse" />
+  <Loading type="bars" />
+</template>
+
+<script setup>
+import { Loading } from 'little-dizzy'
+</script>`
+}
+

package/src/snippets/presets/table.js

@@ -0,0 +1,28 @@
+/**
+ * Table 表格组件示例代码
+ */
+export default {
+  name: 'Table',
+  type: 'vue',
+  label: 'Table 表格',
+  code: `<template>
+  <Table :columns="columns" :data="data" bordered striped />
+</template>
+
+<script setup>
+import { Table } from 'little-dizzy'
+
+const columns = [
+  { key: 'name', title: '姓名', width: '120px' },
+  { key: 'age', title: '年龄', width: '80px' },
+  { key: 'address', title: '地址' }
+]
+
+const data = [
+  { name: '张三', age: 28, address: '北京市朝阳区' },
+  { name: '李四', age: 32, address: '上海市浦东新区' },
+  { name: '王五', age: 25, address: '广州市天河区' }
+]
+</script>`
+}
+