@mt2025ui/mt-design 1.0.1

package/src/components/MtLayout/icons/CloseIcon.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg viewBox="0 0 24 24" width="1em" height="1em" fill="currentColor">
+    <path
+      d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+    />
+  </svg>
+</template>

package/src/components/MtLayout/icons/LockIcon.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg viewBox="0 0 24 24" width="1em" height="1em" fill="currentColor">
+    <path
+      d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3 3.1-3 1.71 0 3.1 1.29 3.1 3v2z"
+    />
+  </svg>
+</template>

package/src/components/MtLayout/icons/MenuIcon.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg viewBox="0 0 24 24" width="1em" height="1em" fill="currentColor">
+    <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" />
+  </svg>
+</template>

package/src/components/MtLayout/icons/UnlockIcon.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg viewBox="0 0 24 24" width="1em" height="1em" fill="currentColor">
+    <path
+      d="M12 17c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm6-9h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6h1.9c0-1.71 1.39-3 3.1-3 1.71 0 3.1 1.29 3.1 3v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm0 12H6V10h12v10z"
+    />
+  </svg>
+</template>

package/src/components/MtLayout/index.ts

@@ -0,0 +1,7 @@
+import MtLayout from "./MtLayout.vue";
+import MtLayoutItem from "./MtLayoutItem.vue";
+import MtContainer from "./MtContainer.vue";
+import MtFloatingPanel from "./MtFloatingPanel.vue";
+
+export { MtLayout, MtLayoutItem, MtContainer, MtFloatingPanel };
+export default MtLayout;

package/src/components/MtLayout/registry.ts

@@ -0,0 +1,15 @@
+import { reactive } from "vue";
+
+export const itemRegistry = reactive(new Map<string, any>());
+
+export const registerItem = (id: string, context: any) => {
+  itemRegistry.set(id, context);
+};
+
+export const unregisterItem = (id: string) => {
+  itemRegistry.delete(id);
+};
+
+export const getItem = (id: string) => {
+  return itemRegistry.get(id);
+};

package/src/example/mtFloating/Demo.vue

@@ -0,0 +1,266 @@
+<template>
+  <div class="mt-floating-demo">
+    <h2>MtFloatingPanel Demo</h2>
+    <p>
+      This demo showcases multiple floating panels with different positioning
+      configurations.
+    </p>
+
+    <div class="demo-controls">
+      <button @click="showRight = !showRight">Toggle Right Panel</button>
+      <button @click="showBottom = !showBottom">Toggle Bottom Panel</button>
+      <button @click="showLeft = !showLeft">Toggle Left Panel</button>
+      <button @click="showMini = !showMini">Toggle Mini Panel</button>
+      <span style=" align-self: center;margin-left: 10px">
+        Window Height: {{ windowHeight }}px (Change:
+        {{ heightChange > 0 ? "+" : "" }}{{ heightChange }}px)
+      </span>
+    </div>
+
+    <!-- 1. Right-Top Aligned Panel -->
+    <MtFloatingPanel
+      v-if="showRight"
+      title="Properties (Right-Top)"
+      width="280"
+      height="400"
+      x="right"
+      y="top"
+      :x-offset="20"
+      :y-offset="80"
+      :collapsible="true"
+      :resizable="true"
+      :heightOffset="heightChange"
+      @close="showRight = false"
+    >
+      <template #icon>
+        <svg
+          viewBox="0 0 24 24"
+          width="16"
+          height="16"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+        >
+          <path
+            d="M12 20h9M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"
+          />
+        </svg>
+      </template>
+      <div class="panel-content">
+        <p>This panel is anchored to the <strong>Top-Right</strong>.</p>
+        <p>It has a fixed width of 280px and height of 400px.</p>
+        <div class="form-group">
+          <label>Name</label>
+          <input type="text" value="Floating Panel" />
+        </div>
+        <div class="form-group">
+          <label>Description</label>
+          <textarea rows="4">Try dragging this panel by its header.</textarea>
+        </div>
+        <div v-for="i in 10" :key="i">Scrollable Item {{ i }}</div>
+      </div>
+    </MtFloatingPanel>
+
+    <!-- 2. Bottom-Right Aligned Panel (Console style) -->
+    <MtFloatingPanel
+      v-if="showBottom"
+      title="Console (Bottom-Right)"
+      width="50%"
+      height="200"
+      x="right"
+      y="bottom"
+      :x-offset="20"
+      :y-offset="20"
+      :collapsible="true"
+      :resizable="true"
+      :default-collapsed="false"
+      @close="showBottom = false"
+    >
+      <template #icon>
+        <svg
+          viewBox="0 0 24 24"
+          width="16"
+          height="16"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+        >
+          <polyline points="4 17 10 11 4 5" />
+          <line x1="12" y1="19" x2="20" y2="19" />
+        </svg>
+      </template>
+      <div class="panel-content console-content">
+        <p>This panel is anchored to the <strong>Bottom-Right</strong>.</p>
+        <p>It has a width of 50% and height of 200px.</p>
+        <div class="log-entry">> System initialized...</div>
+        <div class="log-entry">> Loading modules...</div>
+        <div class="log-entry">> Ready.</div>
+        <div v-for="i in 5" :key="i" class="log-entry">> Log entry {{ i }}</div>
+      </div>
+    </MtFloatingPanel>
+
+    <!-- 3. Left-Top Aligned Panel (Tools style) -->
+    <MtFloatingPanel
+      v-if="showLeft"
+      title="Tools (Left-Top)"
+      width="200"
+      height="300"
+      x="left"
+      y="top"
+      :x-offset="20"
+      :y-offset="80"
+      :collapsible="true"
+      @close="showLeft = false"
+    >
+      <template #icon>
+        <svg
+          viewBox="0 0 24 24"
+          width="16"
+          height="16"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+        >
+          <circle cx="12" cy="12" r="3" />
+          <path
+            d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
+          />
+        </svg>
+      </template>
+      <div class="panel-content">
+        <p>Anchored <strong>Left-Top</strong>.</p>
+        <button class="tool-btn">Select</button>
+        <button class="tool-btn">Move</button>
+        <button class="tool-btn">Scale</button>
+        <button class="tool-btn">Rotate</button>
+      </div>
+    </MtFloatingPanel>
+
+    <!-- 4. Mini Mode Panel (Center-ish) -->
+    <MtFloatingPanel
+      v-if="showMini"
+      :mini="true"
+      width="240"
+      height="150"
+      x="left"
+      y="top"
+      :x-offset="300"
+      :y-offset="150"
+    >
+      <div class="panel-content" style=" height: 100%;background: #fff3e0">
+        <p><strong>Mini Mode</strong></p>
+        <p>This panel has no visible header title or controls.</p>
+        <p>Drag the thin top bar to move.</p>
+      </div>
+    </MtFloatingPanel>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from "vue";
+import { MtFloatingPanel } from "../../components/MtLayout";
+
+const showRight = ref(true);
+const showBottom = ref(true);
+const showLeft = ref(true);
+const showMini = ref(true);
+
+const windowHeight = ref(window.innerHeight);
+const initialHeight = ref(window.innerHeight);
+const heightChange = ref(0);
+
+const updateHeight = () => {
+  const newHeight = window.innerHeight;
+  heightChange.value = newHeight - initialHeight.value; // Difference from initial (new - old)
+  windowHeight.value = newHeight;
+};
+
+onMounted(() => {
+  window.addEventListener("resize", updateHeight);
+});
+
+onUnmounted(() => {
+  window.removeEventListener("resize", updateHeight);
+});
+</script>
+
+<style scoped>
+.mt-floating-demo {
+  position: relative;
+  width: 100%;
+  height: 100vh;
+  padding: 20px;
+  overflow: hidden;
+  background-color: #f0f2f5;
+}
+
+.demo-controls {
+  display: flex;
+  gap: 10px;
+  margin: 20px 0;
+}
+
+button {
+  padding: 8px 16px;
+  color: white;
+  cursor: pointer;
+  background-color: #1890ff;
+  border: none;
+  border-radius: 4px;
+  transition: background 0.3s;
+}
+
+button:hover {
+  background-color: #40a9ff;
+}
+
+.panel-content {
+  padding: 10px;
+  font-size: 14px;
+  color: #333;
+}
+
+.form-group {
+  margin-bottom: 15px;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 5px;
+  font-weight: 500;
+}
+
+.form-group input,
+.form-group textarea {
+  width: 100%;
+  padding: 6px;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+}
+
+.console-content {
+  height: 100%;
+  font-family: Consolas, Monaco, monospace;
+  color: #d4d4d4;
+  background-color: #1e1e1e;
+}
+
+.log-entry {
+  padding: 2px 0;
+}
+
+.tool-btn {
+  display: block;
+  width: 100%;
+  margin-bottom: 8px;
+  color: #333;
+  background-color: #fff;
+  border: 1px solid #d9d9d9;
+}
+
+.tool-btn:hover {
+  color: #1890ff;
+  background-color: #fafafa;
+  border-color: #1890ff;
+}
+</style>

package/src/example/mtIcon/Demo.vue

@@ -0,0 +1,151 @@
+<template>
+  <div class="mt-icon-demo">
+    <h2>MtIcon Demo</h2>
+    <p>Displays icons using SVG sprites (iconfont).</p>
+
+    <div class="demo-section">
+      <h3>Basic Usage</h3>
+      <div class="icon-list">
+        <div class="icon-item">
+          <MtIcon name="barcode" />
+          <span>barcode</span>
+        </div>
+        <div class="icon-item">
+          <MtIcon name="qrcode" />
+          <span>qrcode</span>
+        </div>
+        <div class="icon-item">
+          <MtIcon name="home" />
+          <span>home (if exists)</span>
+        </div>
+        <div class="icon-item">
+          <MtIcon name="user" />
+          <span>user (if exists)</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>Sizes</h3>
+      <div class="icon-list">
+        <div class="icon-item">
+          <MtIcon name="barcode" class="icon-small" />
+          <span>Small (16px)</span>
+        </div>
+        <div class="icon-item">
+          <MtIcon name="barcode" />
+          <span>Default</span>
+        </div>
+        <div class="icon-item">
+          <MtIcon name="barcode" class="icon-large" />
+          <span>Large (32px)</span>
+        </div>
+        <div class="icon-item">
+          <MtIcon name="barcode" class="icon-xlarge" />
+          <span>Extra Large (48px)</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>Colors</h3>
+      <div class="icon-list">
+        <div class="icon-item">
+          <MtIcon name="barcode" style="color: #1890ff" />
+          <span>Primary</span>
+        </div>
+        <div class="icon-item">
+          <MtIcon name="barcode" style="color: #52c41a" />
+          <span>Success</span>
+        </div>
+        <div class="icon-item">
+          <MtIcon name="barcode" style="color: #ff4d4f" />
+          <span>Danger</span>
+        </div>
+        <div class="icon-item">
+          <MtIcon name="barcode" style="color: #faad14" />
+          <span>Warning</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { MtIcon } from "../../components/MtIcon";
+</script>
+
+<style scoped>
+.mt-icon-demo {
+  height: 100%;
+  padding: 20px;
+  overflow: auto;
+  background-color: #f5f5f5;
+}
+
+.demo-section {
+  padding: 20px;
+  margin-bottom: 30px;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgb(0 0 0 / 5%);
+}
+
+h2 {
+  margin-bottom: 20px;
+  color: #333;
+}
+
+h3 {
+  padding-bottom: 10px;
+  margin-bottom: 15px;
+  font-size: 16px;
+  color: #666;
+  border-bottom: 1px solid #eee;
+}
+
+.icon-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+}
+
+.icon-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100px;
+  height: 100px;
+  background: #fafafa;
+  border: 1px solid #eee;
+  border-radius: 4px;
+  transition: all 0.3s;
+}
+
+.icon-item:hover {
+  border-color: #1890ff;
+  box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
+  transform: translateY(-2px);
+}
+
+.icon-item span {
+  margin-top: 10px;
+  font-size: 12px;
+  color: #999;
+  text-align: center;
+}
+
+/* Size classes */
+:deep(.icon-small) {
+  font-size: 16px;
+}
+
+:deep(.icon-large) {
+  font-size: 32px;
+}
+
+:deep(.icon-xlarge) {
+  font-size: 48px;
+}
+</style>

package/src/example/mtLayout/Demo.vue

@@ -0,0 +1,105 @@
+<template>
+  <div
+    class="layout-demo"
+    style="width: 100vw; height: 100vh; overflow: hidden"
+  >
+    <MtLayout direction="horizontal">
+      <!-- Left Sidebar -->
+      <MtLayoutItem
+        min-size="100"
+        init-size="200px"
+        :collapsible="true"
+        title="Sidebar"
+      >
+        <MtContainer title="Explorer">
+          <div style="padding: 10px">
+            <h3>Project Files</h3>
+            <ul>
+              <li>src/</li>
+              <li>components/</li>
+              <li>App.vue</li>
+            </ul>
+          </div>
+        </MtContainer>
+        <MtContainer title="Search">
+          <div style="padding: 10px">
+            <input type="text" placeholder="Search..." />
+          </div>
+        </MtContainer>
+      </MtLayoutItem>
+
+      <!-- Main Content -->
+      <MtLayoutItem>
+        <MtLayout direction="vertical">
+          <!-- Top Editor Area -->
+          <MtLayoutItem>
+            <MtContainer title="MtLayout.vue">
+              <div style="height: 100%; padding: 20px; background: #fafafa">
+                // Code for MtLayout.vue...
+              </div>
+            </MtContainer>
+            <MtContainer title="MtLayoutItem.vue">
+              <div style="height: 100%; padding: 20px; background: #fafafa">
+                // Code for MtLayoutItem.vue...
+              </div>
+            </MtContainer>
+          </MtLayoutItem>
+
+          <!-- Bottom Terminal Area -->
+          <MtLayoutItem init-size="201px" :split-lock="false" title="Terminal">
+            <MtContainer title="Terminal">
+              <div
+                style="
+                  height: 100%;
+                  padding: 10px;
+                  font-family: monospace;
+                  background: #000;
+                "
+              >
+                > npm run dev > Server started...
+              </div>
+            </MtContainer>
+            <MtContainer title="Output">
+              <div style="padding: 10px">Build success</div>
+            </MtContainer>
+          </MtLayoutItem>
+          <MtLayoutItem init-size="201px" :collapsible="true" title="test1">
+            <div style="padding: 10px">
+              <p>test1 1Panel (No Container)</p>
+              <p>Width: 200px</p>
+            </div>
+          </MtLayoutItem>
+          <MtLayoutItem init-size="201px" :collapsible="true" title="test2">
+            <div style="padding: 10px">
+              <p>test2 1Panel (No Container)</p>
+              <p>Width: 200px</p>
+            </div>
+          </MtLayoutItem>
+        </MtLayout>
+      </MtLayoutItem>
+      <MtLayoutItem init-size="201px" :collapsible="true" title="Properties1">
+        <div style="padding: 10px">
+          <p>Properties 1Panel (No Container)</p>
+          <p>Width: 200px</p>
+        </div>
+      </MtLayoutItem>
+      <MtLayoutItem init-size="202px" :collapsible="true" title="Properties2">
+        <div style="padding: 10px">
+          <p>Properties 2Panel (No Container)</p>
+          <p>Width: 200px</p>
+        </div>
+      </MtLayoutItem>
+      <!-- Right Properties Panel -->
+      <MtLayoutItem init-size="203px" :collapsible="true" title="Properties3">
+        <div style="padding: 10px">
+          <p>Properties3 Panel (No Container)</p>
+          <p>Width: 200px</p>
+        </div>
+      </MtLayoutItem>
+    </MtLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { MtLayout, MtLayoutItem, MtContainer } from "../../components/MtLayout";
+</script>

package/src/index.ts

@@ -0,0 +1,29 @@
+import MtAttachmentUpload from "./components/MtAttach/MtAttachmentUpload.vue";
+import MtAttachmentDisplay from "./components/MtAttach/MtAttachmentDisplay.vue";
+import {
+  MtLayout,
+  MtLayoutItem,
+  MtFloatingPanel,
+  MtContainer,
+} from "./components/MtLayout";
+import MtIcon from "./components/MtIcon";
+
+export {
+  MtAttachmentUpload,
+  MtAttachmentDisplay,
+  MtLayout,
+  MtLayoutItem,
+  MtIcon,
+  MtFloatingPanel,
+  MtContainer,
+};
+
+export default {
+  MtAttachmentUpload,
+  MtAttachmentDisplay,
+  MtLayout,
+  MtLayoutItem,
+  MtFloatingPanel,
+  MtContainer,
+  MtIcon,
+};

package/src/main.ts

@@ -0,0 +1,7 @@
+import { createApp } from "vue";
+import "./style.css";
+import App from "./App.vue";
+
+import "./assets/iconfont/iconfont.js";
+
+createApp(App).mount("#app");