@k3000/ce 0.0.1 → 0.2.0

package/comm/router-view.mjs

@@ -0,0 +1,96 @@
+import {bindNode, useEvent} from "../ce.mjs";
+
+export default class RouterView extends HTMLElement {
+
+    routes = []
+
+    event = useEvent()
+
+    constructor() {
+
+        super()
+
+        this.event.add('route.to', (...args) => this.routeTo(...args))
+
+        this.event.add('init routers', routes => {
+
+            this.routes = routes
+
+            setTimeout(() => this.init(), 43)
+
+        }, {preValue: true, once: true})
+    }
+
+    routeTo(target, params) {
+
+        const route = this.routes.find(route => route.path === target)
+
+        if (!route) return new ErrorEvent(`route to "${target}" not found`)
+
+        location.hash = '#' + target
+
+        route.component.params = params
+    }
+
+    init() {
+
+        for (const route of this.routes) {
+
+            if(typeof route.component === 'string') {
+
+                route.component = document.createElement(route.component)
+
+                if (route.dir) {
+
+                    route.component.setAttribute('dir', route.dir)
+                }
+            }
+        }
+
+        if (this.routes.some(route => route.path !== '/404')) {
+
+            const route = {
+                path: '/404',
+                dir: './pages',
+                component: document.createElement('not-found'),
+            }
+
+            route.component.setAttribute('dir', route.dir)
+
+            this.routes.push(route)
+        }
+
+        addEventListener('hashchange', () => this.hashListener())
+
+        this.hashListener()
+    }
+
+    hashListener() {
+
+        const currentHash = location.hash.slice(1) || '/';
+
+        this.event.dispatch('route.change', currentHash)
+
+        const route = this.routes.find(route => route.path === currentHash) || this.routes.find(route => route.path === '/404')
+
+        if (!route) return
+
+        const component = route.component.cloneNode(true)
+
+        if (currentHash === '/system/user') {
+
+            // debugger
+        }
+
+        bindNode(this, component, true)
+
+        if (this.firstElementChild) {
+
+            this.replaceChild(component, this.firstElementChild)
+
+        } else {
+
+            this.appendChild(component)
+        }
+    }
+}

package/console/api/mock.mjs

@@ -0,0 +1,211 @@
+const allUsers = Array.from({ length: 55 }, (_, i) => ({
+    id: 1000 + i,
+    username: `user_${i + 1}`,
+    name: `System User ${i + 1}`,
+    status: i % 3 === 0 ? 'inactive' : 'active',
+    password: '',
+    createdAt: new Date().toLocaleDateString()
+}))
+/**
+ * @param {Number} page
+ * @param {Number} size
+ * @param {{
+ *     key: String
+ * }} query
+ * @returns {Promise<{
+ *  list: {id, username: string, name: string, status: string, password: string, createdAt: string}[],
+ *  total: number,
+ *  totalPage: number,
+ * }>}
+ */
+export const getUsersByPage = (page = 1, size = 10, query = {}) => {
+
+    let list = allUsers
+
+    if (query.key) {
+
+        const lower = query.key.toLowerCase()
+
+        list = list.filter(u =>
+            u.username.toLowerCase().includes(lower) ||
+            u.name.toLowerCase().includes(lower)
+        )
+    }
+
+    const start = (page - 1) * size
+    const end = start + size
+
+    return Promise.resolve({
+        list: list.slice(start, end),
+        total: list.length,
+        totalPage: Math.ceil(list.length / size) || 1,
+    })
+}
+
+export const deleteUser = (id) => {
+    const index = allUsers.findIndex(u => u.id === id)
+    if (index !== -1) {
+        allUsers.splice(index, 1)
+        return Promise.resolve(true)
+    }
+    return Promise.resolve(false)
+}
+
+export const saveUser = (user) => {
+    if (user.id) {
+        const index = allUsers.findIndex(u => u.id === user.id)
+        if (index !== -1) {
+            allUsers[index] = { ...allUsers[index], ...user }
+            return Promise.resolve(allUsers[index])
+        }
+    } else {
+        const newUser = {
+            ...user,
+            id: Date.now(),
+            createdAt: new Date().toLocaleDateString(),
+            status: 'active'
+        }
+        allUsers.unshift(newUser)
+        return Promise.resolve(newUser)
+    }
+    return Promise.reject('User not found')
+}
+
+const allRoles = Array.from({ length: 45 }, (_, i) => {
+    const rolesList = ['Admin', 'Editor', 'Viewer', 'Manager', 'Developer', 'Designer', 'QA', 'Support', 'Sales', 'HR']
+    return {
+        id: 2000 + i,
+        roleName: rolesList[i % rolesList.length] + ` ${Math.floor(i / rolesList.length) + 1}`,
+        description: `Permission set for ${rolesList[i % rolesList.length]}`,
+        status: i % 5 === 0 ? 'inactive' : 'active',
+        createdAt: new Date().toLocaleDateString()
+    }
+})
+
+export const getRolesByPage = (page = 1, size = 10, query = {}) => {
+    let list = allRoles
+    if (query.key) {
+        const lower = query.key.toLowerCase()
+        list = list.filter(r =>
+            r.roleName.toLowerCase().includes(lower) ||
+            r.description.toLowerCase().includes(lower)
+        )
+    }
+    const start = (page - 1) * size
+    const end = start + size
+    return Promise.resolve({
+        list: list.slice(start, end),
+        total: list.length,
+        totalPage: Math.ceil(list.length / size) || 1,
+    })
+}
+
+export const deleteRole = (id) => {
+    const index = allRoles.findIndex(r => r.id === id)
+    if (index !== -1) {
+        allRoles.splice(index, 1)
+        return Promise.resolve(true)
+    }
+    return Promise.resolve(false)
+}
+
+export const saveRole = (role) => {
+    if (role.id) {
+        const index = allRoles.findIndex(r => r.id === role.id)
+        if (index !== -1) {
+            allRoles[index] = { ...allRoles[index], ...role }
+            return Promise.resolve(allRoles[index])
+        }
+    } else {
+        const newRole = {
+            ...role,
+            id: Date.now(),
+            createdAt: new Date().toLocaleDateString(),
+            status: 'active'
+        }
+        allRoles.unshift(newRole)
+        return Promise.resolve(newRole)
+    }
+    return Promise.reject('Role not found')
+}
+
+const allMenus = [
+    { id: 3001, menuName: '控制台', path: '/dashboard', icon: 'M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6', sort: 1, status: 'active', createdAt: '2024-01-01' },
+    { id: 3002, menuName: '系统管理', path: '/system', icon: 'M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z', sort: 2, status: 'active', createdAt: '2024-01-02' },
+    { id: 3003, menuName: '用户管理', path: '/system/user', icon: 'M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z', sort: 1, status: 'active', createdAt: '2024-01-03' },
+    { id: 3004, menuName: '角色管理', path: '/system/role', icon: 'M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z', sort: 2, status: 'active', createdAt: '2024-01-04' }
+]
+
+export const getMenusByPage = (page = 1, size = 10, query = {}) => {
+    let list = allMenus
+    if (query.key) {
+        const lower = query.key.toLowerCase()
+        list = list.filter(m =>
+            m.menuName.toLowerCase().includes(lower) ||
+            m.path.toLowerCase().includes(lower)
+        )
+    }
+    const start = (page - 1) * size
+    const end = start + size
+    return Promise.resolve({
+        list: list.slice(start, end),
+        total: list.length,
+        totalPage: Math.ceil(list.length / size) || 1,
+    })
+}
+
+export const deleteMenu = (id) => {
+    const index = allMenus.findIndex(m => m.id == id)
+    if (index !== -1) {
+        allMenus.splice(index, 1)
+        return Promise.resolve(true)
+    }
+    return Promise.resolve(false)
+}
+
+export const saveMenu = (menu) => {
+    if (menu.id) {
+        const index = allMenus.findIndex(m => m.id == menu.id)
+        if (index !== -1) {
+            allMenus[index] = { ...allMenus[index], ...menu }
+            return Promise.resolve(allMenus[index])
+        }
+    } else {
+        const newMenu = {
+            ...menu,
+            id: Date.now(),
+            createdAt: new Date().toLocaleDateString(),
+            status: 'active'
+        }
+        allMenus.unshift(newMenu)
+        return Promise.resolve(newMenu)
+    }
+    return Promise.reject('Menu not found')
+}
+
+export const toggleMenuStatus = (id) => {
+    const menu = allMenus.find(m => m.id == id)
+    if (menu) {
+        menu.status = menu.status === 'active' ? 'inactive' : 'active'
+        return Promise.resolve(menu)
+    }
+    return Promise.reject('Menu not found')
+}
+
+export const toggleRoleStatus = (id) => {
+    const role = allRoles.find(r => r.id == id)
+    if (role) {
+        role.status = role.status === 'active' ? 'inactive' : 'active'
+        return Promise.resolve(role)
+    }
+    return Promise.reject('Role not found')
+}
+
+export const toggleUserStatus = (id) => {
+    const user = allUsers.find(u => u.id == id)
+    if (user) {
+        user.status = user.status === 'active' ? 'inactive' : 'active'
+        return Promise.resolve(user)
+    }
+    return Promise.reject('User not found')
+}

package/console/components/common-action-button.mjs

@@ -0,0 +1,63 @@
+import {useAttr, useRef} from "../../ce.mjs";
+
+export const innerHTML = `
+<button data-action="{{action}}" data-id="{{id}}" class="p-2 text-gray-400 {{typeClass}} rounded-lg transition-colors" title="{{title}}">
+    <svg class="w-4 h-4 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path ref="path" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
+    </svg>
+</button>
+`
+
+export default class extends HTMLElement {
+    action = ''
+    id = ''
+    title = ''
+    icon = ''
+    typeClass = ''
+
+    constructor() {
+        super()
+        this.style.display = 'contents'
+        const attr = useAttr(this)
+
+        const presets = {
+            toggle: {
+                icon: 'M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636',
+                type: 'orange',
+                title: '切换状态'
+            },
+            edit: {
+                icon: 'M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z',
+                type: 'blue',
+                title: '编辑'
+            },
+            delete: {
+                icon: 'M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16',
+                type: 'red',
+                title: '删除'
+            }
+        }
+
+        const preset = presets[attr.action] || {}
+
+        this.action = attr.action || ''
+        this.id = attr.id || ''
+        this.title = attr.title || preset.title || ''
+        this.icon = attr.icon || preset.icon || ''
+
+        const type = attr.type || preset.type || 'blue'
+        const types = {
+            orange: 'hover:text-orange-500 hover:bg-orange-50 dark:hover:bg-orange-500/10',
+            blue: 'hover:text-blue-500 hover:bg-blue-50 dark:hover:bg-blue-500/10',
+            red: 'hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-500/10'
+        }
+        this.typeClass = types[type] || types.blue
+    }
+
+    ready() {
+
+        const refs = useRef(this)
+
+        refs.path.setAttribute('d', this.icon)
+    }
+}

package/console/components/common-header.mjs

@@ -0,0 +1,26 @@
+import {useAttr} from "../../ce.mjs";
+
+export const innerHTML = `
+<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+    <div>
+        <h1 class="text-2xl font-bold text-gray-800 dark:text-white tracking-tight">{{title}}</h1>
+        <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{{description}}</p>
+    </div>
+    <div class="flex items-center gap-3">
+        <slot></slot>
+    </div>
+</div>
+`
+
+export default class extends HTMLElement {
+    title = ''
+    description = ''
+
+    constructor() {
+        super()
+        const attr = useAttr(this)
+        this.title = attr.title
+        this.description = attr.description
+        // console.log([this])
+    }
+}

package/console/components/common-input.mjs

@@ -0,0 +1,44 @@
+import { useAttr, useWatch } from "../../ce.mjs";
+
+export const innerHTML = `
+<div class="space-y-1.5">
+    <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300">{{label}}</label>
+    <input connect="{{type !== 'textarea'}}" type="{{type}}" value="{{value}}" oninput="{{onInput}}" class="w-full px-4 py-2.5 rounded-xl bg-white/50 dark:bg-gray-900/50 border border-gray-200/50 dark:border-gray-700/50 focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 outline-none transition-all text-sm backdrop-blur-sm" placeholder="{{placeholder}}" />
+    <textarea connect="{{type === 'textarea'}}" oninput="{{onInput}}" class="w-full px-4 py-2.5 rounded-xl bg-white/50 dark:bg-gray-900/50 border border-gray-200/50 dark:border-gray-700/50 focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 outline-none transition-all text-sm backdrop-blur-sm h-24 resize-none" placeholder="{{placeholder}}">{{value}}</textarea>
+</div>
+`
+
+export default class extends HTMLElement {
+    label = ''
+    type = 'text'
+    prop = ''
+    value = ''
+    placeholder = ''
+
+    constructor() {
+        super()
+        this.style.display = 'block'
+        const attr = useAttr(this)
+        this.label = attr.label || ''
+        this.type = attr.type || 'text'
+        this.prop = attr.prop || ''
+        this.placeholder = attr.placeholder || ''
+    }
+
+    ready() {
+        const watch = useWatch(this.obj)
+        watch({
+            [this.prop]: value => {
+                this.value = value
+            }
+        })
+    }
+
+    onInput(e) {
+        this.obj[this.prop] = e.target.value
+        // If there's an external oninput/onchange, it will be handled by the framework's bind logic
+        // But we want to ensure any custom event is dispatched if needed.
+        // In this framework, native events on the inner input are usually mapped via {{onInput}}
+        // to a method on the parent scope.
+    }
+}

package/console/components/common-modal.mjs

@@ -0,0 +1,45 @@
+import { useAttr } from "../../ce.mjs";
+
+export const innerHTML = `
+<style>
+.modal-enter { opacity: 0; transform: scale(0.95); }
+.modal-create { opacity: 1; transform: scale(1); }
+</style>
+<div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm transition-opacity duration-300 {{visible ? '' : 'hidden'}}" onclick="{{onClose}}">
+    <!-- Modal Content -->
+    <div class="bg-white/80 dark:bg-gray-800/90 backdrop-blur-2xl rounded-2xl shadow-2xl w-full max-w-md overflow-hidden transform transition-all scale-100 border border-white/40 dark:border-white/10" onclick="event.stopPropagation()">
+        <div class="px-6 py-4 border-b border-gray-100/50 dark:border-gray-700/50 flex items-center justify-between bg-white/30 dark:bg-white/5">
+            <h3 class="text-lg font-bold text-gray-900 dark:text-white">{{title}}</h3>
+            <button onclick="{{onClose}}" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors p-1 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700">
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
+            </button>
+        </div>
+        
+        <div class="p-6 space-y-5">
+            <slot></slot>
+        </div>
+        
+        <div class="px-6 py-4 bg-gray-50/30 dark:bg-gray-800/30 border-t border-gray-100/50 dark:border-gray-700/50 flex justify-end gap-3">
+            <button onclick="{{onClose}}" class="px-4 py-2 text-sm font-medium text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200 transition-colors bg-white/50 dark:bg-gray-700/50 border border-gray-200/50 dark:border-gray-600/50 rounded-xl hover:shadow-sm hover:bg-white/80 dark:hover:bg-gray-700/80">取消</button>
+            <button onclick="{{onSave}}" class="px-5 py-2 text-sm font-medium text-white bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 rounded-xl shadow-lg shadow-blue-500/30 transition-all hover:-translate-y-0.5 active:translate-y-0 active:scale-95">保存</button>
+        </div>
+    </div>
+</div>
+`
+
+export default class extends HTMLElement {
+    visible = false
+    title = ''
+
+    constructor() {
+        super()
+    }
+
+    onClose() {
+        if (this.onclose) this.onclose()
+    }
+
+    onSave() {
+        if (this.onsave) this.onsave()
+    }
+}

package/console/components/common-pagination.mjs

@@ -0,0 +1,87 @@
+import {throttle, useWatch} from "../../ce.mjs";
+
+export const innerHTML = `
+<div class="px-6 py-4 border-t border-white/20 dark:border-white/5 bg-white/30 dark:bg-white/5 backdrop-blur-md flex items-center justify-between">
+    <div class="text-sm text-gray-500 dark:text-gray-400">
+        {{total}} 显示 <span class="font-medium text-gray-900 dark:text-gray-100">{{(currentPage - 1) * pageSize + 1}}</span> 到 <span class="font-medium text-gray-900 dark:text-gray-100">{{Math.min(currentPage * pageSize, total)}}</span> 条，共 <span class="font-medium text-gray-900 dark:text-gray-100">{{total}}</span> 条
+    </div>
+    
+    <div class="flex items-center gap-2">
+        <button onclick="{{prevPage}}" class="p-2 rounded-lg hover:bg-white/50 dark:hover:bg-white/10 text-gray-500 dark:text-gray-400 disabled:opacity-50 disabled:cursor-not-allowed transition-all" disabled="{{currentPage === 1}}">
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
+        </button>
+        
+        <div class="flex items-center gap-1">
+            <button each="{{pages}}" onclick="{{_.changePage}}" data-page="{{index}}" class="w-8 h-8 rounded-lg text-sm font-medium transition-all {{index === _.currentPage ? 'bg-blue-600 text-white shadow-lg shadow-blue-500/30' : 'text-gray-600 dark:text-gray-400 hover:bg-white/50 dark:hover:bg-white/10'}}">
+                {{index}}
+            </button>
+        </div>
+
+        <button onclick="{{nextPage}}" class="p-2 rounded-lg hover:bg-white/50 dark:hover:bg-white/10 text-gray-500 dark:text-gray-400 disabled:opacity-50 disabled:cursor-not-allowed transition-all" disabled="{{currentPage === totalPage}}">
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
+        </button>
+    </div>
+</div>
+`;
+
+export default class extends HTMLElement {
+    totalPage = 0
+    pages = []
+
+    constructor() {
+        super()
+
+        const watch = useWatch(this)
+
+        watch({
+            total: (total) => {
+                this.generatePages(total)
+            }
+        })
+
+        this.generatePages()
+    }
+
+    generatePages(total = this.total) {
+        this.totalPage = Math.ceil(total / this.pageSize) || 1
+        const maxVisible = 5
+        let startPage = Math.max(1, this.currentPage - Math.floor(maxVisible / 2))
+        let endPage = Math.min(this.totalPage, startPage + maxVisible - 1)
+
+        if (endPage - startPage + 1 < maxVisible) {
+            startPage = Math.max(1, endPage - maxVisible + 1)
+        }
+
+        const list = []
+        for (let i = startPage; i <= endPage; i++) {
+            list.push({index: i})
+        }
+        this.pages = list
+    }
+
+    prevPage() {
+        if (this.currentPage > 1) {
+            this.currentPage--
+            this.emitChange()
+        }
+    }
+
+    nextPage() {
+        if (this.currentPage < this.totalPage) {
+            this.currentPage++
+            this.emitChange()
+        }
+    }
+
+    changePage(e) {
+        const btn = e.target.closest('button')
+        if (btn && btn.dataset.page) {
+            this.currentPage = parseInt(btn.dataset.page)
+            this.emitChange()
+        }
+    }
+
+    emitChange() {
+        this.onchange(this.currentPage)
+    }
+}

package/console/components/common-toolbar.mjs

@@ -0,0 +1,39 @@
+import { useAttr } from "../../ce.mjs";
+
+export const outerHTML = `
+<div class="relative group">
+    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+        <svg class="h-4 w-4 text-gray-400 group-focus-within:text-blue-500 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
+    </div>
+    <input type="text" oninput="{{onSearch}}" placeholder="{{placeholder}}" class="pl-10 pr-4 py-2 bg-white/50 dark:bg-gray-800/50 border border-white/40 dark:border-white/10 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all w-64 shadow-sm placeholder-gray-400 dark:text-gray-200 backdrop-blur-md" />
+</div>
+<button onclick="{{onadd}}" class="flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-xl shadow-lg shadow-blue-500/30 transition-all hover:scale-105 active:scale-95">
+    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>
+    {{buttonText}}
+</button>
+`
+
+export default class extends HTMLElement {
+    placeholder = 'Search...'
+    buttonText = 'Add'
+
+    constructor() {
+        super()
+        this.style.display = 'contents'
+        const attr = useAttr(this)
+        if (attr.placeholder) this.placeholder = attr.placeholder
+        if (attr['button-text']) this.buttonText = attr['button-text']
+    }
+
+    onSearch(e) {
+        const event = new CustomEvent('search', { detail: { value: e.target.value } })
+        this.dispatchEvent(event)
+        if (this.onsearch) this.onsearch(event)
+    }
+
+    /*onAdd() {
+        const event = new CustomEvent('add')
+        this.dispatchEvent(event)
+        if (this.onadd) this.onadd(event)
+    }*/
+}

package/console/components/layout-container.mjs

@@ -0,0 +1,46 @@
+
+export const shadowRoot = `
+<style>
+menu {
+    margin: 0;
+    padding: 0;
+}
+.layout-container {
+    display: grid;
+    height: 100vh;
+    grid-template-columns: auto 1fr;
+    grid-template-rows: auto 1fr;
+    
+    > header {
+        grid-column: span 2;
+    }
+    
+    > main {
+        padding: 12px;
+    }
+    
+    > menu, > main {
+        overflow-x: hidden;
+        overflow-y: auto;
+    }
+}
+</style>
+<div class="layout-container">
+    <header>
+        <slot name="header"></slot>
+    </header>
+    <menu>
+        <slot name="menu"></slot>
+    </menu>
+    <main>
+        <slot name="main"></slot>
+    </main>
+</div>
+`
+
+export default class extends HTMLElement {
+    constructor() {
+
+        super()
+    }
+}