lumen-plus 0.0.1

package/dist/components/Watermark/Watermark.svelte

@@ -0,0 +1,174 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+    import { onMount } from 'svelte'
+
+    interface WatermarkProps {
+        content?: string | string[]
+        fontSize?: number
+        fontColor?: string
+        fontFamily?: string
+        fontWeight?: number | string
+        rotate?: number
+        width?: number
+        height?: number
+        gap?: [number, number]
+        offset?: [number, number]
+        zIndex?: number
+        image?: string
+        children?: Snippet
+        class?: string
+    }
+
+    let {
+        content = '',
+        fontSize = 14,
+        fontColor,
+        fontFamily = 'sans-serif',
+        fontWeight = 'normal',
+        rotate = -22,
+        width = 120,
+        height = 64,
+        gap = [100, 100],
+        offset = [0, 0],
+        zIndex = 9,
+        image,
+        children,
+        class: cls = '',
+        ...attrs
+    }: WatermarkProps = $props()
+
+    let watermarkUrl = $state('')
+    let isDark = $state(false)
+    let rootEl = $state<HTMLDivElement | null>(null)
+    let generateSeq = 0
+
+    const computeIsDark = (): boolean => {
+        if (rootEl?.closest?.('.dark')) return true
+        return document.documentElement.classList.contains('dark') || document.body.classList.contains('dark')
+    }
+
+    const getCssDefaultFontColor = (): string | undefined => {
+        if (!rootEl) return undefined
+        const raw = getComputedStyle(rootEl).getPropertyValue('--lm-watermark-font-color').trim()
+        return raw || undefined
+    }
+
+    const getDefaultFontColor = (): string => {
+        return isDark ? 'rgba(255, 255, 255, 0.22)' : 'rgba(0, 0, 0, 0.15)'
+    }
+
+    const generateWatermark = (): void => {
+        const seq = ++generateSeq
+        const canvas = document.createElement('canvas')
+        const ctx = canvas.getContext('2d')
+        if (!ctx) return
+
+        const ratio = window.devicePixelRatio || 1
+        const logicalWidth = width + gap[0]
+        const logicalHeight = height + gap[1]
+        const canvasWidth = logicalWidth * ratio
+        const canvasHeight = logicalHeight * ratio
+
+        canvas.width = canvasWidth
+        canvas.height = canvasHeight
+
+        ctx.imageSmoothingEnabled = true
+        ctx.imageSmoothingQuality = 'high'
+
+        ctx.scale(ratio, ratio)
+        ctx.translate(logicalWidth / 2, logicalHeight / 2)
+        ctx.rotate((rotate * Math.PI) / 180)
+
+        if (image) {
+            const img = new Image()
+            img.crossOrigin = 'anonymous'
+            img.onload = () => {
+                if (seq !== generateSeq) return
+                ctx.drawImage(img, -width / 2, -height / 2, width, height)
+                watermarkUrl = canvas.toDataURL()
+            }
+            img.src = image
+        } else {
+            ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`
+            ctx.fillStyle = fontColor ?? getCssDefaultFontColor() ?? getDefaultFontColor()
+            ctx.textAlign = 'center'
+            ctx.textBaseline = 'middle'
+
+            const contents = Array.isArray(content) ? content : [content]
+            const lineHeight = fontSize * 1.5
+            const startY = -((contents.length - 1) * lineHeight) / 2
+
+            contents.forEach((text, index) => {
+                ctx.fillText(text, 0, startY + index * lineHeight)
+            })
+
+            watermarkUrl = canvas.toDataURL()
+        }
+    }
+
+    onMount(() => {
+        isDark = computeIsDark()
+
+        let scheduled = false
+        const scheduleRecompute = (): void => {
+            if (scheduled) return
+            scheduled = true
+            requestAnimationFrame(() => {
+                scheduled = false
+                isDark = computeIsDark()
+            })
+        }
+
+        const observer = new MutationObserver(scheduleRecompute)
+
+        const observed = new Set<Element>()
+        const observeElement = (el: Element | null): void => {
+            if (!el || observed.has(el)) return
+            observed.add(el)
+            observer.observe(el, {
+                attributes: true,
+                attributeFilter: ['class'],
+                subtree: false,
+            })
+        }
+
+        observeElement(document.documentElement)
+        observeElement(document.body)
+        for (let el = rootEl?.parentElement; el; el = el.parentElement) {
+            observeElement(el)
+        }
+
+        generateWatermark()
+
+        return () => {
+            observer.disconnect()
+        }
+    })
+
+    $effect(() => {
+        content
+        fontSize
+        fontColor
+        fontFamily
+        fontWeight
+        rotate
+        width
+        height
+        gap
+        image
+        isDark
+        generateWatermark()
+    })
+
+    const classes = $derived(`lm-watermark${cls ? ` ${cls}` : ''}`)
+    const watermarkStyle = $derived(
+        `background-image:url(${watermarkUrl});background-size:${width + gap[0]}px ${height + gap[1]}px;background-position:${offset[0]}px ${offset[1]}px;z-index:${zIndex}`
+    )
+</script>
+
+<div class={classes} bind:this={rootEl} {...attrs}>
+    {#if children}
+        {@render children()}
+    {/if}
+    <div class="lm-watermark__mark" style={watermarkStyle}></div>
+</div>

package/dist/components/Watermark/Watermark.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+interface WatermarkProps {
+    content?: string | string[];
+    fontSize?: number;
+    fontColor?: string;
+    fontFamily?: string;
+    fontWeight?: number | string;
+    rotate?: number;
+    width?: number;
+    height?: number;
+    gap?: [number, number];
+    offset?: [number, number];
+    zIndex?: number;
+    image?: string;
+    children?: Snippet;
+    class?: string;
+}
+declare const Watermark: import("svelte").Component<WatermarkProps, {}, "">;
+type Watermark = ReturnType<typeof Watermark>;
+export default Watermark;

package/dist/components/Watermark/index.d.ts

@@ -0,0 +1,4 @@
+import Watermark from './Watermark.svelte';
+export { Watermark };
+export type { WatermarkProps } from './types';
+export default Watermark;

package/dist/components/Watermark/index.js

@@ -0,0 +1,3 @@
+import Watermark from './Watermark.svelte';
+export { Watermark };
+export default Watermark;

package/dist/components/Watermark/types.d.ts

@@ -0,0 +1,32 @@
+import type { Snippet } from 'svelte';
+/** Watermark 属性 */
+export interface WatermarkProps {
+    /** 水印内容 */
+    content?: string | string[];
+    /** 字体大小 */
+    fontSize?: number;
+    /** 字体颜色 */
+    fontColor?: string;
+    /** 字体 */
+    fontFamily?: string;
+    /** 字体粗细 */
+    fontWeight?: number | string;
+    /** 旋转角度 */
+    rotate?: number;
+    /** 水印宽度 */
+    width?: number;
+    /** 水印高度 */
+    height?: number;
+    /** 水印间距 */
+    gap?: [number, number];
+    /** 水印偏移 */
+    offset?: [number, number];
+    /** 层级 */
+    zIndex?: number;
+    /** 图片地址 */
+    image?: string;
+    /** 子内容 */
+    children?: Snippet;
+    /** 自定义类名 */
+    class?: string;
+}

package/dist/components/Watermark/types.js

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -0,0 +1,64 @@
+export { default as Affix } from './components/Affix';
+export { default as Alert } from './components/Alert';
+export { default as Autocomplete } from './components/Autocomplete';
+export { default as Avatar } from './components/Avatar';
+export { default as Backtop } from './components/Backtop';
+export { default as Badge } from './components/Badge';
+export { default as Breadcrumb } from './components/Breadcrumb';
+export { default as Button } from './components/Button';
+export { default as Calendar } from './components/Calendar';
+export { default as Card } from './components/Card';
+export { default as Carousel, CarouselItem } from './components/Carousel';
+export { default as Cascader } from './components/Cascader';
+export { default as Checkbox } from './components/Checkbox';
+export { default as Collapse, CollapseItem } from './components/Collapse';
+export { default as ColorPicker } from './components/ColorPicker';
+export { Container, Header, Main, Footer, Aside } from './components/Container';
+export { default as DatePicker } from './components/DatePicker';
+export { default as DateTimePicker } from './components/DateTimePicker';
+export { default as Descriptions } from './components/Descriptions';
+export { default as Dialog } from './components/Dialog';
+export { default as Divider } from './components/Divider';
+export { default as Drawer } from './components/Drawer';
+export { Dropdown, DropdownItem } from './components/Dropdown';
+export { default as Empty } from './components/Empty';
+export { Form, FormItem } from './components/Form';
+export { default as Icon } from './components/Icon';
+export { default as Image } from './components/Image';
+export { default as Input } from './components/Input';
+export { default as InputNumber } from './components/InputNumber';
+export { default as InputTag } from './components/InputTag';
+export { default as Link } from './components/Link';
+export { default as Loading } from './components/Loading';
+export { default as Menu, MenuItem } from './components/Menu';
+export { default as Message } from './components/Message';
+export { default as MessageBox } from './components/MessageBox';
+export { default as Notification } from './components/Notification';
+export { default as Pagination } from './components/Pagination';
+export { default as PinInput } from './components/PinInput';
+export { default as Popconfirm } from './components/Popconfirm';
+export { default as Popover } from './components/Popover';
+export { default as Progress } from './components/Progress';
+export { default as Radio } from './components/Radio';
+export { default as Rating } from './components/Rating';
+export { default as Result } from './components/Result';
+export { default as Segmented } from './components/Segmented';
+export { default as Select } from './components/Select';
+export { default as Skeleton } from './components/Skeleton';
+export { default as Slider } from './components/Slider';
+export { default as Space } from './components/Space';
+export { default as Statistic } from './components/Statistic';
+export { default as Steps, Step } from './components/Steps';
+export { default as Switch } from './components/Switch';
+export { default as Table } from './components/Table';
+export { Tabs, TabPane } from './components/Tabs';
+export { default as Tag } from './components/Tag';
+export { default as Textarea } from './components/Textarea';
+export { default as Timeline, TimelineItem } from './components/Timeline';
+export { default as TimePicker } from './components/TimePicker';
+export { default as Tooltip } from './components/Tooltip';
+export { default as Transfer } from './components/Transfer';
+export { default as Tree } from './components/Tree';
+export { default as TreeSelect } from './components/TreeSelect';
+export { default as Upload } from './components/Upload';
+export { default as Watermark } from './components/Watermark';

package/dist/index.js

@@ -0,0 +1,64 @@
+export { default as Affix } from './components/Affix';
+export { default as Alert } from './components/Alert';
+export { default as Autocomplete } from './components/Autocomplete';
+export { default as Avatar } from './components/Avatar';
+export { default as Backtop } from './components/Backtop';
+export { default as Badge } from './components/Badge';
+export { default as Breadcrumb } from './components/Breadcrumb';
+export { default as Button } from './components/Button';
+export { default as Calendar } from './components/Calendar';
+export { default as Card } from './components/Card';
+export { default as Carousel, CarouselItem } from './components/Carousel';
+export { default as Cascader } from './components/Cascader';
+export { default as Checkbox } from './components/Checkbox';
+export { default as Collapse, CollapseItem } from './components/Collapse';
+export { default as ColorPicker } from './components/ColorPicker';
+export { Container, Header, Main, Footer, Aside } from './components/Container';
+export { default as DatePicker } from './components/DatePicker';
+export { default as DateTimePicker } from './components/DateTimePicker';
+export { default as Descriptions } from './components/Descriptions';
+export { default as Dialog } from './components/Dialog';
+export { default as Divider } from './components/Divider';
+export { default as Drawer } from './components/Drawer';
+export { Dropdown, DropdownItem } from './components/Dropdown';
+export { default as Empty } from './components/Empty';
+export { Form, FormItem } from './components/Form';
+export { default as Icon } from './components/Icon';
+export { default as Image } from './components/Image';
+export { default as Input } from './components/Input';
+export { default as InputNumber } from './components/InputNumber';
+export { default as InputTag } from './components/InputTag';
+export { default as Link } from './components/Link';
+export { default as Loading } from './components/Loading';
+export { default as Menu, MenuItem } from './components/Menu';
+export { default as Message } from './components/Message';
+export { default as MessageBox } from './components/MessageBox';
+export { default as Notification } from './components/Notification';
+export { default as Pagination } from './components/Pagination';
+export { default as PinInput } from './components/PinInput';
+export { default as Popconfirm } from './components/Popconfirm';
+export { default as Popover } from './components/Popover';
+export { default as Progress } from './components/Progress';
+export { default as Radio } from './components/Radio';
+export { default as Rating } from './components/Rating';
+export { default as Result } from './components/Result';
+export { default as Segmented } from './components/Segmented';
+export { default as Select } from './components/Select';
+export { default as Skeleton } from './components/Skeleton';
+export { default as Slider } from './components/Slider';
+export { default as Space } from './components/Space';
+export { default as Statistic } from './components/Statistic';
+export { default as Steps, Step } from './components/Steps';
+export { default as Switch } from './components/Switch';
+export { default as Table } from './components/Table';
+export { Tabs, TabPane } from './components/Tabs';
+export { default as Tag } from './components/Tag';
+export { default as Textarea } from './components/Textarea';
+export { default as Timeline, TimelineItem } from './components/Timeline';
+export { default as TimePicker } from './components/TimePicker';
+export { default as Tooltip } from './components/Tooltip';
+export { default as Transfer } from './components/Transfer';
+export { default as Tree } from './components/Tree';
+export { default as TreeSelect } from './components/TreeSelect';
+export { default as Upload } from './components/Upload';
+export { default as Watermark } from './components/Watermark';