@srcker/editor-vue-next 1.0.3 → 1.0.5

package/dist/style/index.css

@@ -0,0 +1 @@
+.trigger[data-v-6741127f]{width:60px}.trigger[data-v-2a890871]{width:55px}.trigger[data-v-307ea6e9]{width:45px}.icon[data-v-fbcf4628]{display:inline-flex;align-items:center;justify-content:center}.icon svg[data-v-fbcf4628]{height:14px}.color-button[data-v-56dfdcbc]{position:relative;display:inline-flex;align-items:center}.color-button .trigger[data-v-56dfdcbc]{height:25px;padding:3px 8px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;border-radius:6px;font-size:14px;transition:all .3s cubic-bezier(.645,.045,.355,1);color:var(--color);background:var(--background)}.color-button .trigger[data-v-56dfdcbc]:hover,.color-button .trigger.is-open[data-v-56dfdcbc]{color:var(--hover-color);background:var(--hover-background)}.color-button .trigger .icon[data-v-56dfdcbc]{display:inline-flex;align-items:center;justify-content:center}.color-button .trigger .icon svg[data-v-56dfdcbc]{height:14px}.color-button .trigger .bar[data-v-56dfdcbc]{position:absolute;bottom:5px;width:15px;height:3px;left:50%;border:1px solid rgba(255,255,255,.5);transform:translate(-50%)}.color-button .trigger .label[data-v-56dfdcbc]{margin:0 5px;display:inline-flex;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.color-button .trigger .arrow[data-v-56dfdcbc]{font-size:14px;color:#666;display:inline-flex;align-items:center}.color-button .dropdown[data-v-56dfdcbc]{position:absolute;top:100%;left:0;margin-top:5px;background:#1f1f1f;box-shadow:0 0 15px #0000000d;border-radius:10px;z-index:1000;overflow-y:auto;padding:15px;transition:all .3s cubic-bezier(.46,.03,.52,.96)}.color-button .dropdown .grid[data-v-56dfdcbc]{display:grid;grid-template-columns:repeat(10,1fr);gap:5px;width:300px}.color-button .dropdown .grid .item[data-v-56dfdcbc]{width:20px;height:20px;padding:2px;border-radius:50%;border:1px solid transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s cubic-bezier(.645,.045,.355,1)}.color-button .dropdown .grid .item[data-v-56dfdcbc]:hover{border-color:#ffffff80;z-index:1}.color-button .dropdown .grid .item .icon[data-v-56dfdcbc]{display:inline-flex;align-items:center;color:#fff}.color-button .dropdown .footer[data-v-56dfdcbc]{margin-top:20px;display:flex;align-items:center}.color-button .dropdown .footer label[data-v-56dfdcbc]{font-size:14px;color:#fff}.color-button .dropdown .footer .input[data-v-56dfdcbc]{flex:1;padding-left:15px}.color-button .dropdown .footer .input input[data-v-56dfdcbc]{padding:0;block-size:20px;border:none;inline-size:40px}.color-button .dropdown .footer .button[data-v-56dfdcbc]{display:flex;align-items:center;padding:5px 15px;border-radius:12px;color:#ffffff80;background:#ffffff1a;font-size:14px;justify-content:center}.color-button .dropdown .footer .button[data-v-56dfdcbc]:hover{cursor:pointer;background:#0003;color:#fffc}.color-button[data-v-d4f91033]{position:relative;display:inline-flex;align-items:center}.color-button .trigger[data-v-d4f91033]{height:25px;padding:3px 8px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;border-radius:6px;font-size:14px;transition:all .3s cubic-bezier(.645,.045,.355,1);color:var(--color);background:var(--background)}.color-button .trigger[data-v-d4f91033]:hover,.color-button .trigger.is-open[data-v-d4f91033]{color:var(--hover-color);background:var(--hover-background)}.color-button .trigger .icon[data-v-d4f91033]{display:inline-flex;align-items:center;justify-content:center}.color-button .trigger .icon svg[data-v-d4f91033]{height:14px}.color-button .trigger .bar[data-v-d4f91033]{position:absolute;bottom:5px;width:15px;height:3px;left:50%;transform:translate(-50%);border:1px solid rgba(255,255,255,.5)}.color-button .trigger .label[data-v-d4f91033]{margin:0 5px;display:inline-flex;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.color-button .trigger .arrow[data-v-d4f91033]{font-size:14px;color:#666;display:inline-flex;align-items:center}.color-button .dropdown[data-v-d4f91033]{position:absolute;top:100%;left:0;margin-top:5px;background:#1f1f1f;box-shadow:0 0 15px #0000000d;border-radius:10px;z-index:1000;overflow-y:auto;padding:15px;transition:all .3s cubic-bezier(.46,.03,.52,.96)}.color-button .dropdown .grid[data-v-d4f91033]{display:grid;grid-template-columns:repeat(10,1fr);gap:5px;width:300px}.color-button .dropdown .grid .item[data-v-d4f91033]{width:20px;height:20px;padding:2px;border-radius:50%;border:1px solid transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s cubic-bezier(.645,.045,.355,1)}.color-button .dropdown .grid .item[data-v-d4f91033]:hover{border-color:#ffffff80;z-index:1}.color-button .dropdown .grid .item .icon[data-v-d4f91033]{display:inline-flex;align-items:center;color:#fff}.color-button .dropdown .footer[data-v-d4f91033]{margin-top:20px;display:flex;align-items:center}.color-button .dropdown .footer label[data-v-d4f91033]{font-size:14px;color:#fff}.color-button .dropdown .footer .input[data-v-d4f91033]{flex:1;padding-left:15px}.color-button .dropdown .footer .input input[data-v-d4f91033]{padding:0;block-size:20px;border:none;inline-size:40px}.color-button .dropdown .footer .button[data-v-d4f91033]{display:flex;align-items:center;padding:5px 15px;border-radius:12px;color:#ffffff80;background:#ffffff1a;font-size:14px;justify-content:center}.color-button .dropdown .footer .button[data-v-d4f91033]:hover{cursor:pointer;background:#0003;color:#fffc}.list-button .dropdown .item .icon[data-v-db1b450f]{display:inline-flex;align-items:center;justify-content:center;font-size:12px}.list-button[data-v-683570d4]{width:auto}.list-button .dropdown .item .icon[data-v-683570d4]{display:inline-flex;align-items:center;justify-content:center;margin-right:5px;width:15px;height:15px;border-radius:3px;font-size:12px;font-weight:700;transform:scale(.8);padding:0;background:#0003}.toolbar[data-v-0cf44ab1]{background:var(--background);padding:5px;display:flex;flex-wrap:wrap;align-items:center;gap:0 5px;-webkit-user-select:none;user-select:none;position:relative;border-bottom:1px solid var(--border-color)}.toolbar .group[data-v-0cf44ab1]{display:flex;align-items:center;gap:0 5px;padding:0 5px;position:relative}.toolbar .group[data-v-0cf44ab1]:after{content:" ";width:1px;height:20px;position:absolute;right:0;top:50%;transform:translateY(-50%);background:var(--border-color)}.toolbar .group[data-v-0cf44ab1]:last-child:after{width:0;content:""}.srcker-editor[data-v-03774859]{display:flex;flex-direction:column}.srcker-editor .bubble-menu[data-v-03774859]{padding:5px;background:#fff;box-shadow:0 0 15px #00000026;display:flex;align-items:center;gap:0 10px;border-radius:10px}.srcker-editor .bubble-menu button[data-v-03774859]{outline:none;border:none;font-size:14px;color:#333;font-weight:700;background:none;cursor:pointer;padding:8px 10px;border-radius:8px;transition:all .2s ease-in-out}.srcker-editor .bubble-menu button[data-v-03774859]:hover{background:#00000026}.srcker-editor .editor-body[data-v-03774859]{flex:1;cursor:text;padding:20px;min-height:400px;color:var(--color);background:var(--background)}.srcker-editor .editor-body[data-v-03774859] .ProseMirror{outline:none}

package/dist/style/style.css

@@ -0,0 +1 @@
+@charset "UTF-8";.dark{--color: rgba(255, 255, 255, .9);--background: #0e0e11;--border-color: rgba(255, 255, 255, .1);--active-color: #226bf0;--active-background: rgba(255, 255, 255, .08);--hover-color: #aaa;--hover-background: rgba(255, 255, 255, .1);--disabled-color: rgba(255, 255, 255, .4);--disabled-background: none}.light{--color: #1f1f1f;--background: #ffffff;--border-color: rgba(0, 0, 0, .1);--active-color: #1677ff;--active-background: #e6f4ff;--hover-color: #555;--hover-background: rgba(0, 0, 0, .05);--disabled-color: rgba(0, 0, 0, .4);--disabled-background: none}.dropdown-enter-active,.dropdown-leave-active{transition:opacity .1s ease,transform .1s cubic-bezier(.4,0,.2,1);transform-origin:top center}.dropdown-enter-from,.dropdown-leave-to{opacity:0;transform:scale(.95) translateY(-4px)}.dropdown-enter-to,.dropdown-leave-from{opacity:1;transform:scale(1) translateY(0)}.icon-button{width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:6px;cursor:pointer;font-size:14px;color:var(--color);border:none;position:relative;transition:all .3s cubic-bezier(.645,.045,.355,1)}.icon-button .icon{display:flex;align-items:center;justify-content:center}.icon-button .icon svg{width:14px;height:14px}.icon-button:hover{color:var(--hover-color);background:var(--hover-background)}.icon-button:hover .tips{opacity:1}.icon-button.active{background:var(--active-background);color:var(--active-color)}.icon-button:disabled{color:var(--disabled-color);background:var(--disabled-background);cursor:not-allowed}.icon-button .tips{position:absolute;background:#000;color:#fff;font-size:12px;white-space:nowrap;padding:5px 10px;border-radius:5px;left:50%;bottom:-30px;z-index:88;opacity:0;transition:all .3s cubic-bezier(.645,.045,.355,1);transform:translate(-50%)}.icon-button .tips:after{content:"";position:absolute;left:50%;top:-6px;transform:translate(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #000}.dropdown-button{position:relative;display:inline-flex;align-items:center}.dropdown-button .trigger{height:25px;padding:3px 8px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;border-radius:6px;font-size:14px;transition:all .3s cubic-bezier(.645,.045,.355,1);color:var(--color);background:var(--background)}.dropdown-button .trigger:hover,.dropdown-button .trigger.is-open{color:var(--hover-color);background:var(--hover-background)}.dropdown-button .trigger .icon{display:inline-flex;align-items:center;justify-content:center}.dropdown-button .trigger .icon svg{height:14px}.dropdown-button .trigger .label{margin:0 5px;display:inline-flex;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dropdown-button .trigger .arrow{font-size:14px;color:#666;display:inline-flex;align-items:center}.dropdown-button .dropdown{position:absolute;top:100%;left:0;margin-top:5px;background:#333;box-shadow:0 0 15px #0000000d;border-radius:10px;z-index:1000;overflow-y:auto;padding:5px 0;transition:all .3s cubic-bezier(.46,.03,.52,.96)}.dropdown-button .dropdown .item{display:flex;align-items:center;cursor:pointer;position:relative;padding:5px 20px;line-height:30px;color:var(--color)}.dropdown-button .dropdown .item:hover{background-color:var(--hover-background)}.dropdown-button .dropdown .item.is-selected{background-color:var(--active-background)}.dropdown-button .dropdown .item .icon{font-size:14px;width:20px;display:flex;align-items:center;justify-content:center;font-weight:700;padding-right:10px;opacity:.5}.dropdown-button .dropdown .item .text{font-size:14px;white-space:nowrap}

package/dist/style/variables.css

@@ -0,0 +1 @@
+.srcker-html-content{outline:none;min-height:100%;font-size:16px;line-height:1.6;color:var(--color);background:var(--background)}.srcker-html-content .is-focused{background:var(--hover-background)}.srcker-html-content p.is-editor-empty:first-child:before{color:#888;content:attr(data-placeholder);float:left;height:0;pointer-events:none}.srcker-html-content ul,.srcker-html-content ol{padding-left:1.5rem;margin:.5rem 0}.srcker-html-content ul[style*=list-style-type],.srcker-html-content ol[style*=list-style-type]{padding-left:40px!important}.srcker-html-content ul li,.srcker-html-content ol li{padding:0;margin:0}.srcker-html-content blockquote{border-left:3px solid var(--border-color);margin:1rem 0;padding-left:1rem;font-style:italic;color:#555;background:#00000005}.srcker-html-content code{background:#f0f0f0;color:#c7254e;border-radius:4px;font-size:12px;padding:.25em .3em;font-family:JetBrainsMono,monospace}.srcker-html-content pre{background:#000;border-radius:5px;color:#fff;font-family:JetBrainsMono,monospace;margin:15px 0;padding:5px 10px}.srcker-html-content pre code{background:none;color:inherit;font-size:12px;padding:0}.srcker-html-content hr{border:none;border-top:1px solid #ccc;margin:20px 0}.srcker-html-content a{color:#1890ff;text-decoration:underline;cursor:pointer}.srcker-html-content h1,.srcker-html-content h2,.srcker-html-content h3,.srcker-html-content h4,.srcker-html-content h5,.srcker-html-content h6{margin-top:1em;margin-bottom:.5em;line-height:1.3;padding-left:0!important}.srcker-html-content img.resizable-image{cursor:pointer;transition:opacity .2s}.srcker-html-content img.resizable-image:hover{opacity:.8}.srcker-html-content.light{--color: #1f1f1f;--background: #ffffff;--border-color: rgba(0, 0, 0, .1);--active-color: #1677ff;--active-background: #e6f4ff;--hover-color: #555;--hover-background: rgba(0, 0, 0, .05);--disabled-color: rgba(0, 0, 0, .4);--disabled-background: #f5f5f5}.srcker-html-content.light blockquote{color:#555;background:#00000005}.srcker-html-content.light code{background:#f0f0f0;color:#c7254e}.srcker-html-content.light pre{background:#f6f8fa;color:#24292e}.srcker-html-content.light hr{border-top-color:#0000001f}.srcker-html-content.dark{--color: rgba(255, 255, 255, .9);--background: #0e0e11;--border-color: rgba(255, 255, 255, .1);--active-color: #226bf0;--active-background: rgba(255, 255, 255, .08);--hover-color: #aaa;--hover-background: rgba(255, 255, 255, .1);--disabled-color: rgba(255, 255, 255, .4);--disabled-background: rgba(255, 255, 255, .05)}.srcker-html-content.dark blockquote{color:#aaa}.srcker-html-content.dark code{background:#333;color:#fff}.srcker-html-content.dark pre{background:#000;color:#fff}.srcker-html-content.dark hr{border-top-color:#ffffff26}.srcker-html-content img{max-width:100%}

package/dist/style.es.js

@@ -0,0 +1 @@
+import "./variables.es.js";

package/dist/variables.es.js

@@ -0,0 +1 @@
+

package/package.json

@@ -1,13 +1,19 @@
 {
     "name": "@srcker/editor-vue-next",
-    "version": "1.0.3",
+    "version": "1.0.5",
     "type": "module",
+    "main": "dist/rich-editor.es.js",
+    "module": "dist/rich-editor.es.js",
+    "types": "dist/index.d.ts",
+    "files": [
+        "dist"
+    ],
     "engines": {
         "node": "^20.19.0 || >=22.12.0"
     },
     "scripts": {
         "dev": "vite",
-        "build": "vue-tsc -b && vite build",
+        "build": "vue-tsc -b && vite build --emptyOutDir",
         "preview": "vite preview"
     },
     "dependencies": {

package/.vscode/extensions.json

@@ -1,3 +0,0 @@
-{
-  "recommendations": ["Vue.volar"]
-}

package/index.html

@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html lang="">
-  <head>
-    <meta charset="UTF-8">
-    <link rel="icon" href="/favicon.ico">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vite App</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
-  </body>
-</html>

package/index.ts

@@ -1,6 +0,0 @@
-/**
- * 组件统一导出
- */
-import RichEditor from './src/RichEditor.vue';
-export { RichEditor }
-

package/jsconfig.json

@@ -1,8 +0,0 @@
-{
-  "compilerOptions": {
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  },
-  "exclude": ["node_modules", "dist"]
-}

package/src/App.vue

@@ -1,9 +0,0 @@
-<script setup>
-import RichEditor from './RichEditor.vue';
-</script>
-
-<template>
-  <RichEditor theme="dark" />
-</template>
-
-<style scoped></style>

package/src/App.vue.js

@@ -1,17 +0,0 @@
-import RichEditor from './RichEditor.vue';
-const __VLS_ctx = {};
-let __VLS_components;
-let __VLS_intrinsics;
-let __VLS_directives;
-const __VLS_0 = RichEditor;
-// @ts-ignore
-const __VLS_1 = __VLS_asFunctionalComponent1(__VLS_0, new __VLS_0({
-    theme: "dark",
-}));
-const __VLS_2 = __VLS_1({
-    theme: "dark",
-}, ...__VLS_functionalComponentArgsRest(__VLS_1));
-var __VLS_5 = {};
-var __VLS_3;
-const __VLS_export = (await import('vue')).defineComponent({});
-export default {};

package/src/Button/BackgroundButton.vue

@@ -1,331 +0,0 @@
-<template>
-    <div
-        class="color-button"
-        ref="wrapperRef"
-        :class="{ 'open': isOpen }"
-        @click="isOpen = !isOpen"
-        title="背景颜色">
-
-        <div class="trigger" >
-            <div class="icon">
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-                    <path fill="currentColor" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" d="M296 64c6.9 0 13.5 2.7 18.3 7.6L440.4 197.7c4.9 4.9 7.6 11.5 7.6 18.3s-2.7 13.5-7.6 18.3L386.7 288 65.3 288c1.3-3.9 3.4-7.4 6.3-10.3l96.4-96.4 33.4 33.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L213.3 136 277.7 71.6c4.9-4.9 11.5-7.6 18.3-7.6zM122.7 136L26.3 232.4C9.5 249.3 0 272.1 0 296s9.5 46.7 26.3 63.6L152.4 485.7C169.3 502.5 192.1 512 216 512s46.7-9.5 63.6-26.3L485.7 279.6C502.5 262.7 512 239.9 512 216s-9.5-46.7-26.3-63.6L359.6 26.3C342.7 9.5 319.9 0 296 0s-46.7 9.5-63.6 26.3L168 90.7 118.6 41.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L122.7 136z"/>
-                </svg>
-            </div>
-            <div class="bar" :style="{ backgroundColor: getColor || '#000' }"></div>
-        </div>
-
-        <div class="dropdown" v-if="isOpen">
-            <div class="grid">
-                <div 
-                    v-for="color in colorPalette" 
-                    :key="color"
-                    class="item"
-                    :style="{ backgroundColor: color }"
-                    @click="setColor(color)"
-                    :title="color">
-                    <IconCheck v-if="editor.isActive('textStyle', { color })" :size="10" color="#fff" />
-                </div>
-            </div>
-            
-
-            <div class="footer">
-                <label>自定义颜色</label>
-                <div class="input">
-                    <input
-                        type="color"
-                        @input="editor.chain().focus().setBackgroundColor($event.target.value).run()"
-                        :value="getColor"/>
-                </div>
-
-                <div class="button" @click="editor.chain().focus().unsetBackgroundColor().run();">清除</div>
-            </div>
-        </div>
-
-    </div>
-</template>
-
-
-<script setup>
-
-import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
-import IconCheck from '../components/IconCheck.vue';
-
-const isOpen = ref(false)
-const wrapperRef = ref(null)
-
-const colorPalette = [
-// 黑白灰
-	'#000000',
-	'#262626',
-	'#595959',
-	'#8C8C8C',
-	'#BFBFBF',
-	'#D9D9D9',
-	'#E9E9E9',
-	'#F5F5F5',
-	'#FAFAFA',
-	'#FFFFFF',
-
-	// 基础色
-	'#F5222D',
-	'#FA541C',
-	'#FA8C16',
-	'#FADB14',
-	'#52C41A',
-	'#13C2C2',
-	'#1890FF',
-	'#2F54EB',
-	'#722ED1',
-	'#EB2F96',
-
-	// 浅色系
-	'#FFE8E6',
-	'#FFECE0',
-	'#FFEF D1'.replace(' ', ''),
-	'#FCFCCA',
-	'#E4F7D2',
-	'#D3F5F0',
-	'#D4EEFC',
-	'#DEE8FC',
-	'#EFE1FA',
-	'#FAE1EB',
-
-	// 中色系
-	'#FFA39E',
-	'#FFBB96',
-	'#FFD591',
-	'#FFFB8F',
-	'#B7EB8F',
-	'#87E8DE',
-	'#91D5FF',
-	'#ADC6FF',
-	'#D3ADF7',
-	'#FFADD2',
-
-	// 深色系
-	'#FF4D4F',
-	'#FF7A45',
-	'#FFA940',
-	'#FFEC3D',
-	'#73D13D',
-	'#36CFC9',
-	'#40A9FF',
-	'#597EF7',
-	'#9254DE',
-	'#F759AB',
-
-	// 暗色系
-	'#CF1322',
-	'#D4380D',
-	'#D46B08',
-	'#D4B106',
-	'#389E0D',
-	'#08979C',
-	'#096DD9',
-	'#1D39C4',
-	'#531DAB',
-	'#C41D7F',
-
-	// 极深色
-	'#820014',
-	'#871400',
-	'#873800',
-	'#614700',
-	'#135200',
-	'#00474F',
-	'#003A8C',
-	'#061178',
-	'#22075E',
-	'#780650'
-];
-
-
-const setColor = (color) => {
-    props.editor.chain().focus().setBackgroundColor(color).run();
-    isOpen.value = false
-}
-
-
-
-const getColor = computed(() => {
-    if (!props.editor) return '#fff'
-    const color = props.editor.getAttributes('textStyle').backgroundColor
-    return color || '#000'
-})
-
-
-
-const props = defineProps({
-    editor: {
-        type: Object,
-        required: true
-    }
-})
-
-const handleClickOutside = (e) => {
-	if (!wrapperRef.value) return
-
-	if (!wrapperRef.value.contains(e.target)) {
-		isOpen.value = false
-	}
-}
-
-onMounted(() => {
-	document.addEventListener('mousedown', handleClickOutside)
-})
-
-onBeforeUnmount(() => {
-	document.removeEventListener('mousedown', handleClickOutside)
-})
-
-</script>
-
-
-
-<style lang="scss" scoped>
-
-.color-button { 
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-
-    .trigger {
-        height: 25px;
-        padding: 3px 8px;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        cursor: pointer;
-        border-radius: 6px;
-        font-size: 14px;
-        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-
-        color: var(--color);
-        background: var(--background);
-
-        &:hover, 
-        &.is-open {
-            color: var(--hover-color);
-            background: var(--hover-background);
-        }
-
-        .icon{
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            svg{
-                height: 14px;
-            }
-        }
-
-        .bar{
-            position: absolute; 
-            bottom: 5px; 
-            width: 15px;
-            height: 3px;
-            left: 50%; 
-            transform: translateX(-50%);
-            border: 1px solid rgba($color: #fff, $alpha: 0.5);
-        }
-
-        .label { 
-            margin: 0 5px; 
-            display: inline-flex;
-            align-items: center;
-            white-space: nowrap; 
-            overflow: hidden; 
-            text-overflow: ellipsis; 
-        }
-        .arrow { 
-            font-size: 14px; 
-            color: #666; 
-            display: inline-flex;
-            align-items: center;
-        }
-    }
-
-    .dropdown {
-        position: absolute;
-        top: 100%;
-        left: 0;
-        margin-top: 5px;
-        background: #1f1f1f;
-        box-shadow: 0 0px 15px rgba(0,0,0,0.05);
-        border-radius: 10px;
-        z-index: 1000;
-        overflow-y: auto;
-        padding: 15px;
-        transition: all 0.3s cubic-bezier(0.46, 0.03, 0.52, 0.96);
-
-        .grid{
-            display: grid;
-            grid-template-columns: repeat(10, 1fr);
-            gap: 5px;
-            width: 300px;
-            .item{ 
-                width: 20px;
-                height: 20px;
-                padding: 2px;
-                border-radius: 50%;
-                border: 1px solid transparent;
-                cursor: pointer;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-                &:hover {
-                    border-color: rgba($color: #fff, $alpha: 0.5);
-                    z-index: 1;
-                }
-
-                .icon{
-                    display: inline-flex;
-                    align-items: center;
-                    color: rgba($color: #fff, $alpha: 1);
-                }
-            }
-        }
-
-        .footer{
-            margin-top: 20px;
-            display: flex;
-            align-items: center;
-
-            label{
-                font-size: 14px;
-                color: #fff;
-            }
-
-            .input{
-                flex: 1;
-                padding-left: 15px;
-
-                input{
-                    padding: 0;
-                    block-size: 20px;
-                    border: none;
-                    inline-size: 40px;
-                }
-            }
-            
-            .button{
-                display: flex;
-                align-items: center;
-                padding: 5px 15px;
-                border-radius: 12px;
-                color: rgba($color: #fff, $alpha: 0.5);
-                background: rgba($color: #fff, $alpha: 0.1);
-                font-size: 14px;
-                justify-content: center;
-
-                &:hover {
-                    cursor: pointer;
-                    background: rgba($color: #000000, $alpha: 0.2);
-                    color: rgba($color: #fff, $alpha: 0.8);
-                }
-            }
-        }
-    }
-}
-</style>