intable 0.0.7 → 0.0.9

package/scripts/build.js

@@ -1,184 +0,0 @@
-import { resolve, join, dirname, relative, extname } from 'path'
-import { fileURLToPath } from 'url'
-import { readFileSync, readdirSync, existsSync, rmSync, cpSync, writeFileSync } from 'fs'
-import { build } from 'vite'
-
-const __dirname = dirname(fileURLToPath(import.meta.url))
-const rootDir = resolve(__dirname, '..')
-const packagesDir = resolve(rootDir, 'packages')
-
-// 获取所有包目录
-function getPackages() {
-  const packages = []
-  const dirs = readdirSync(packagesDir)
-
-  for (const dir of dirs) {
-    const packagePath = join(packagesDir, dir)
-    const packageJsonPath = join(packagePath, 'package.json')
-
-    if (existsSync(packageJsonPath)) {
-      const packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf-8'))
-      packages.push({
-        name: packageJson.name || dir,
-        path: packagePath,
-        packageJson,
-      })
-    }
-  }
-
-  return packages
-}
-
-// 构建单个包
-async function buildPackage(pkg) {
-  console.log(`\n📦 Building ${pkg.name}...`)
-
-  const distPath = join(pkg.path, 'dist')
-
-  try {
-    await build({
-      configFile: process.cwd() + '/vite.config.ts',
-      root: pkg.path,
-      build: {
-        outDir: 'dist',
-        lib: {
-          // preserve modules
-          entry: Object.fromEntries(readdirSync(join(pkg.path, 'src'), { withFileTypes: false, recursive: true }).filter(e => /\.[tj]sx?$/.test(e)).map(e => [
-            e.slice(0, e.length - extname(e).length),
-            join('src', e)
-          ])),
-          formats: ['es'],
-          cssFileName: 'style',
-        },
-        rollupOptions: {
-          external: id => {
-            // 排除所有外部依赖
-            const externals = Object.keys({
-              ...pkg.packageJson.dependencies,
-              ...pkg.packageJson.devDependencies,
-              ...pkg.packageJson.peerDependencies,
-            })
-
-            // 排除特定的外部依赖
-            return externals.some(ext => id === ext || id.startsWith(ext + '/'))
-          },
-          output: {
-            preserveModules: true,
-            // preserveModulesRoot: join(pkg.path, 'src'),
-            // entryFileNames: '[name].js',
-            // entryFileNames: m => m.moduleIds.some(e => e.includes('node_modules')) ? 'vendor.js' : m.name + '.js',
-            advancedChunks: {
-              groups: [
-                { name: (id) => id.includes('node_modules') ? 'vendor' : null },
-              ],
-            }
-          },
-        },
-        sourcemap: false,
-        minify: true,
-        emptyOutDir: true,
-      },
-      plugins: [
-        (await import('vite-plugin-lib-inject-css')).libInjectCss()
-      ]
-    })
-
-    // // 复制 style.scss 文件
-    // const stylePath = join(pkg.path, 'src/style.scss')
-    // if (existsSync(stylePath)) {
-    //   cpSync(stylePath, join(distPath, 'style.scss'))
-    //   console.log('  ✓ Copied style.scss')
-    // }
-
-    if (existsSync(join(pkg.path, 'src/theme'))) {
-      cpSync(join(pkg.path, 'src/theme'), join(distPath, 'theme'), { recursive: true })
-    }
-
-    // fix: unocss
-    if (existsSync(join(pkg.path, 'dist/__uno.css'))) {
-      const uno = readFileSync(join(pkg.path, 'dist/__uno.css'), { encoding: 'utf8' })
-      const rewrite = (path, fn) => writeFileSync(path, fn(readFileSync(path, { encoding: 'utf8' })))
-      rewrite(join(pkg.path, 'dist/style.css'), str => uno + '\n' + str)
-      rewrite(join(pkg.path, 'dist/index.js'), str => str.replace(`import './__uno.css'`, ''))
-    }
-
-
-    console.log(`✅ ${pkg.name} built successfully!`)
-
-    await genDts(pkg.path)
-  } catch (error) {
-    console.error(`❌ Failed to build ${pkg.name}:`, error)
-    throw error
-  }
-}
-
-// 使用 tsc 生成类型定义（跳过错误）
-async function genDts(cwd) {
-  console.log('  📝 Generating TypeScript declarations...')
-  try {
-    const distPath = join(cwd, 'dist')
-    const { execSync } = await import('child_process')
-    const { writeFileSync } = await import('fs')
-
-    // 创建临时 tsconfig 用于生成类型定义
-    const tempTsConfig = {
-      extends: './tsconfig.app.json',
-      compilerOptions: {
-        declaration: true,
-        emitDeclarationOnly: true,
-        noEmit: false,
-        outDir: distPath,
-        skipLibCheck: true,
-        noUnusedLocals: false,
-        noUnusedParameters: false,
-        jsx: 'preserve',
-        jsxImportSource: 'solid-js',
-      },
-      include: ['src'],
-    }
-
-    const tempConfigPath = join(cwd, 'tsconfig.dts.json')
-    writeFileSync(tempConfigPath, JSON.stringify(tempTsConfig, null, 2))
-
-    try {
-      execSync(`pnpm exec tsc --project tsconfig.dts.json --skipLibCheck --noCheck`, { cwd, stdio: 'pipe' })
-    } catch (tscExecError) {
-      // 即使有错误也尝试查找生成的文件
-      const dtsFiles = readdirSync(distPath, { recursive: true }).filter(f => f.endsWith('.d.ts'))
-      if (dtsFiles.length > 0) {
-        console.log(`  ℹ Generated ${dtsFiles.length} declaration files (with some errors)`)
-      } else {
-        throw tscExecError
-      }
-    }
-
-    // 删除临时配置文件
-    rmSync(tempConfigPath, { force: true })
-
-    console.log('  ✓ TypeScript declarations generated')
-  } catch (tscError) {
-    console.log('  ⚠ TypeScript declarations skipped')
-    // 不抛出错误，允许构建继续
-  }
-}
-
-// 主函数
-async function main() {
-  console.log('🚀 Starting package build process...\n')
-
-  const packages = getPackages()
-  console.log(`Found ${packages.length} package(s):`, packages.map(p => p.name).join(', '))
-
-  // 依次构建每个包
-  for (const pkg of packages) {
-    await buildPackage(pkg)
-  }
-
-  console.log('\n✨ All packages built successfully!')
-}
-
-// 执行构建
-main().catch(error => {
-  console.error('Build failed:', error)
-  process.exit(1)
-})

package/scripts/publish.js

@@ -1,95 +0,0 @@
-import { resolve, join, dirname } from 'path'
-import { fileURLToPath } from 'url'
-import { readFileSync, writeFileSync, readdirSync, existsSync } from 'fs'
-import { execSync } from 'child_process'
-
-const __dirname = dirname(fileURLToPath(import.meta.url))
-const rootDir = resolve(__dirname, '..')
-const packagesDir = resolve(rootDir, 'packages')
-
-// 获取根目录的版本号
-function getRootVersion() {
-  const rootPackageJsonPath = join(rootDir, 'package.json')
-  const rootPackageJson = JSON.parse(readFileSync(rootPackageJsonPath, 'utf-8'))
-  return rootPackageJson.version
-}
-
-// 获取所有包目录
-function getPackages() {
-  const packages = []
-  const dirs = readdirSync(packagesDir)
-
-  for (const dir of dirs) {
-    const packagePath = join(packagesDir, dir)
-    const packageJsonPath = join(packagePath, 'package.json')
-
-    if (existsSync(packageJsonPath)) {
-      const packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf-8'))
-      packages.push({
-        name: packageJson.name || dir,
-        path: packagePath,
-        packageJson,
-        packageJsonPath
-      })
-    }
-  }
-
-  return packages
-}
-
-// 同步版本号到子包
-function syncVersion(packages, version) {
-  console.log(`\n🔄 Syncing version ${version} to all packages...`)
-  
-  for (const pkg of packages) {
-    if (pkg.packageJson.version !== version) {
-      pkg.packageJson.version = version
-      writeFileSync(pkg.packageJsonPath, JSON.stringify(pkg.packageJson, null, 2))
-      console.log(`  ✅ Updated ${pkg.name} to version ${version}`)
-    } else {
-      console.log(`  ℹ ${pkg.name} already at version ${version}`)
-    }
-  }
-}
-
-// 发布子包
-function publishPackage(pkg) {
-  console.log(`\n📤 Publishing ${pkg.name}...`)
-  
-  try {
-    execSync(`pnpm publish --no-git-checks --filter ${pkg.name}`, { stdio: 'inherit' })
-    console.log(`  ✅ ${pkg.name} published successfully!`)
-  } catch (error) {
-    console.error(`  ❌ Failed to publish ${pkg.name}:`, error.message)
-    throw error
-  }
-}
-
-// 主函数
-async function main() {
-  console.log('🚀 Starting publish process...\n')
-
-  // 获取根目录版本号
-  const version = getRootVersion()
-  console.log(`Root version: ${version}`)
-
-  // 获取所有子包
-  const packages = getPackages()
-  console.log(`Found ${packages.length} package(s):`, packages.map(p => p.name).join(', '))
-
-  // 同步版本号
-  syncVersion(packages, version)
-
-  // 依次发布每个子包
-  for (const pkg of packages) {
-    await publishPackage(pkg)
-  }
-
-  console.log('\n✨ All packages published successfully!')
-}
-
-// 执行发布
-main().catch(error => {
-  console.error('Publish failed:', error)
-  process.exit(1)
-})

package/src/assets/ClearFormat.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <path fill="currentColor" d="m14.031 1.888l9.657 9.657l-8.345 8.345l-.27.272H20v2H6.748L.253 15.667zm.322 16.164l6.507-6.507l-6.829-6.828l-6.828 6.828l6.828 6.828l.32-.323zM5.788 12.96l-2.707 2.707l4.495 4.495h4.68l.365-.37z" />
-</svg>

package/src/assets/Forms.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-    d="M12 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3m7-14h7a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-7M5 7H4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h1m12-5h.01M13 12h.01" />
-</svg>

package/src/assets/MergeCell.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <path fill="currentColor"
-    d="M5 10H3V4h8v2H5zm14 8h-6v2h8v-6h-2zM5 18v-4H3v6h8v-2zM21 4h-8v2h6v4h2zM8 13v2l3-3l-3-3v2H3v2zm8-2V9l-3 3l3 3v-2h5v-2z" />
-</svg>

package/src/assets/SplitCell.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <path fill="currentColor"
-    d="M19 14h2v6H3v-6h2v4h14zM3 4v6h2V6h14v4h2V4zm8 7v2H8v2l-3-3l3-3v2zm5 0V9l3 3l-3 3v-2h-3v-2z" />
-</svg>

package/src/assets/gap.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <path fill="currentColor" d="M19 5h-4v14h4v-2h-2V7h2zM5 5h4v14H5v-2h2V7H5zm8 2v10h-2V7z" />
-</svg>

package/src/assets/loading.svg

@@ -1,12 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <g>
-    <rect width="2" height="5" x="11" y="1" fill="currentColor" opacity=".14" />
-    <rect width="2" height="5" x="11" y="1" fill="currentColor" opacity=".29" transform="rotate(30 12 12)" />
-    <rect width="2" height="5" x="11" y="1" fill="currentColor" opacity=".43" transform="rotate(60 12 12)" />
-    <rect width="2" height="5" x="11" y="1" fill="currentColor" opacity=".57" transform="rotate(90 12 12)" />
-    <rect width="2" height="5" x="11" y="1" fill="currentColor" opacity=".71" transform="rotate(120 12 12)" />
-    <rect width="2" height="5" x="11" y="1" fill="currentColor" opacity=".86" transform="rotate(150 12 12)" />
-    <rect width="2" height="5" x="11" y="1" fill="currentColor" transform="rotate(180 12 12)" />
-    <animateTransform attributeName="transform" calcMode="discrete" dur="0.75s" repeatCount="indefinite" type="rotate" values="0 12 12;30 12 12;60 12 12;90 12 12;120 12 12;150 12 12;180 12 12;210 12 12;240 12 12;270 12 12;300 12 12;330 12 12;360 12 12" />
-  </g>
-</svg>

package/src/assets/paint.svg

@@ -1,9 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-    color="currentColor">
-    <path
-      d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12s4.477 10 10 10c.842 0 2 .116 2-1c0-.609-.317-1.079-.631-1.546c-.46-.683-.917-1.359-.369-2.454c.667-1.333 1.778-1.333 3.482-1.333c.851 0 1.851 0 3.018-.167c2.101-.3 2.5-1.592 2.5-3.5M7 15.002L7.009 15" />
-    <circle cx="9.5" cy="8.5" r="1.5" />
-    <circle cx="16.5" cy="9.5" r="1.5" />
-  </g>
-</svg>

package/src/assets/solid.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 166 155.3"><path d="M163 35S110-4 69 5l-3 1c-6 2-11 5-14 9l-2 3-15 26 26 5c11 7 25 10 38 7l46 9 18-30z" fill="#76b3e1"/><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="27.5" y1="3" x2="152" y2="63.5"><stop offset=".1" stop-color="#76b3e1"/><stop offset=".3" stop-color="#dcf2fd"/><stop offset="1" stop-color="#76b3e1"/></linearGradient><path d="M163 35S110-4 69 5l-3 1c-6 2-11 5-14 9l-2 3-15 26 26 5c11 7 25 10 38 7l46 9 18-30z" opacity=".3" fill="url(#a)"/><path d="M52 35l-4 1c-17 5-22 21-13 35 10 13 31 20 48 15l62-21S92 26 52 35z" fill="#518ac8"/><linearGradient id="b" gradientUnits="userSpaceOnUse" x1="95.8" y1="32.6" x2="74" y2="105.2"><stop offset="0" stop-color="#76b3e1"/><stop offset=".5" stop-color="#4377bb"/><stop offset="1" stop-color="#1f3b77"/></linearGradient><path d="M52 35l-4 1c-17 5-22 21-13 35 10 13 31 20 48 15l62-21S92 26 52 35z" opacity=".3" fill="url(#b)"/><linearGradient id="c" gradientUnits="userSpaceOnUse" x1="18.4" y1="64.2" x2="144.3" y2="149.8"><stop offset="0" stop-color="#315aa9"/><stop offset=".5" stop-color="#518ac8"/><stop offset="1" stop-color="#315aa9"/></linearGradient><path d="M134 80a45 45 0 00-48-15L24 85 4 120l112 19 20-36c4-7 3-15-2-23z" fill="url(#c)"/><linearGradient id="d" gradientUnits="userSpaceOnUse" x1="75.2" y1="74.5" x2="24.4" y2="260.8"><stop offset="0" stop-color="#4377bb"/><stop offset=".5" stop-color="#1a336b"/><stop offset="1" stop-color="#1a336b"/></linearGradient><path d="M114 115a45 45 0 00-48-15L4 120s53 40 94 30l3-1c17-5 23-21 13-34z" fill="url(#d)"/></svg>

package/src/demo-vue.ts

@@ -1,54 +0,0 @@
-// import './index.scss'
-import 'virtual:uno.css'
-
-import { createApp, h, ref, shallowRef, toRaw, watchEffect } from 'vue'
-// import Intable from '@intable/vue'
-import Intable from '../packages/vue/src'
-
-// import './theme/element-plus.scss'
-import { log } from 'intable/utils'
-import { createMutable } from 'solid-js/store'
-import { effect } from 'solid-js/web'
-import { batch, createComputed, createEffect, createMemo } from 'solid-js'
-
-const container = document.createElement('div')
-document.body.append(container)
-
-const data = ref([{ id: '1', date: '2016-05-03' },{date: 'xxx'}])
-setTimeout(() => {
-  // data.value = [
-  //   { id: 1, date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
-  //   { id: 2, date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
-  //   { id: 3, date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
-  // ]
-}, 1000);
-
-const selected = ref([])
-watchEffect(() => {
-  // console.log(selected.value)
-  // console.log(data.value)
-})
-
-createApp(() => [
-  h(Intable, {
-    style: 'width: 600px; margin: 64px',
-    class: 'w-100 m-4',
-    data: data.value,
-    'onUpdate:data': v => data.value = v,
-    onDataChange: v => data.value = v,
-    border: true,
-    index: true,
-    size: 'small',
-    columns: [
-      { name: 'Date', id: 'date', editable: true, enum: { a: 1 }, editor: 'date' },
-      { name: 'Name', id: 'name' },
-      { name: 'Address', id: 'address', width: 250 },
-      // todo re render
-      { name: '4', id: '4', render: o => h('div', { class: 'c-red' }, '111'), fixed: 'right' },
-    ],
-    selected: selected.value,
-    'onUpdate:selected': v => selected.value = v,
-    rowSelection: { enable: true }
-  }),
-])
-  .mount(container)

package/src/demo.tsx

@@ -1,107 +0,0 @@
-import { batch, createComputed, createMemo } from 'solid-js'
-import { render } from 'solid-js/web'
-import { createMutable, createStore, produce, reconcile } from 'solid-js/store'
-import { range } from 'es-toolkit'
-
-// import Intable from 'intable'
-// import { log } from 'intable/utils'
-// import { VirtualScrollPlugin } from 'intable/plugins/VirtualScrollPlugin'
-
-import { Intable } from '../packages/intable/src'
-// import '../packages/intable/src/theme/element-plus.scss'
-import { log } from '../packages/intable/src/utils'
-import { VirtualScrollPlugin } from '../packages/intable/src/plugins/VirtualScrollPlugin'
-import { HistoryPlugin } from '../packages/intable/src/plugins/HistoryPlugin'
-import { DiffPlugin } from '../packages/intable/src/plugins/DiffPlugin'
-// import 'intable/theme/element-plus.scss'
-// import 'intable/dist/theme/element-plus.scss'
-
-const root = document.body.appendChild(document.createElement('div'))
-
-const state = createMutable({ bool: true })
-
-const cols = createMutable([
-  { name: '基本信息', children: [
-    { id: 'col_0', name: 'col_0', width: 80, editable: true },
-    { id: 'col_1', name: 'col_1', width: 80, editable: true },
-    { name: '333', width: 80, editable: true },
-  ]},
-  { name: 'xxx' },
-  { name: '详细数据', children: [
-    { id: 'col_2', name: 'col_2', width: 80, editable: true },
-    { id: 'col_3', name: 'col_3', width: 80, editable: true },
-    { id: 'col_4', name: 'col_4', width: 80, editable: true },
-  ]},
-  ...range(20).map(e => ({ name: 'col_' + (e + 5), id: 'col_' + (e + 5), width: 80, editable: true })),
-] as any[])
-const leafColIds = range(20).map(e => 'col_' + e)
-let data = createMutable(range(500).map((e, i) => Object.fromEntries(leafColIds.map(id => [id, id + '_' + i + 1]))))
-
-// render(() => <input type='checkbox' checked={state.bool} onChange={(e) => state.bool = e.currentTarget.checked} />, root)
-// render(() => <button onClick={() => data[0].col_1 = 'xxx'}>xxx</button>, root)
-
-// const cols = [{name:'asd'},{}]
-// const data = [{},{},{}]
-// const data = [{},{},{}]
-
-// cols[2].fixed = 'left'
-// cols[0].editable = true
-// cols[0].editor = 'select'
-// cols[0].enum = { 1: 1, 2: 2, 3: 3 }
-// cols[0].render = 'file'
-// cols.forEach(e => (e.editable = true))
-
-// cols.at(-3)!.width = undefined
-// cols.at(-1)!.width = undefined
-
-cols.unshift({ name: 'qwe' })
-
-cols[0].fixed = 'left'
-cols.at(-2)!.fixed = 'right'
-cols.at(-1)!.fixed = 'right'
-
-data.forEach(e => e.g = e.col_0 % 10)
-data.forEach(e => e.n = e.col_0 % 3)
-
-// render(() => (
-//   <Menu items={[
-//     { label: 'xx' }
-//   ]} />
-// ), root)
-
-render(() => <Intable
-  class='w-50vw! h-40vh m-10'
-  // class='m-10'
-  // style='width: 50vw; height: 40vh;'
-  rowDrag
-  colDrag
-  size='small'
-  index={state.bool}
-  stickyHeader={state.bool}
-  columns={cols}
-  onColumnsChange={v => batch(() => (cols.length = 0, cols.push(...v)))}
-  data={data}
-  onDataChange={v => batch(() => (data.length = 0, data.push(...v)))}
-  border
-  resizable={{ row: { enable: true } }}
-  plugins={[
-    VirtualScrollPlugin,
-    // HistoryPlugin,
-    // DiffPlugin,
-  ]}
-  expand={{ enable: true, render: ({ data }) => <div class='p-2 c-red'>{JSON.stringify(data)}</div> }}
-  // rowGroup={{ fields: ['g', 'n'] }}
-  // rowGroup={{ fields: ['g'] }}
-  diff={{
-    onCommit: (...arg) => log(arg)
-  }}
-  virtual={{
-    // x: { enable: true, overscan: 0 },
-    // y: { enable: false },
-  }}
-  rowSelection={{
-    // enable: true,
-    // multiple: true,
-    // onChange: (selected, unselected) => log(selected, unselected)
-  }}
-/>, root)

package/src/index.scss

@@ -1,105 +0,0 @@
-:root {
-  color-scheme: light;
-  --bg: #fff;
-  --menu-bg: #fff;
-  --header-bg: #f6f6f7;
-}
-
-.dark {
-  color-scheme: dark;
-  --bg: #121212;
-  --menu-bg: #121212;
-  --header-bg: #161618;
-}
-
-body {
-  @apply bg-[--bg] m-0;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  font-size: 1em;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-img, iframe {
-  // margin: 1rem 0;
-}
-
-mark {
-  padding: .1rem .3rem;
-}
-
-.col-hand {
-  --w: 4px;
-  position: absolute;
-  top: 0;
-  left: 100%;
-  height: 100%;
-  // flex: 0 0 auto;
-  width: var(--gap);
-  cursor: w-resize;
-  display: flex;
-  justify-content: center;
-  opacity: 0;
-  transition: opacity 100ms linear;
-
-  &:hover, &:active {
-    opacity: 1;
-  }
-
-  &::after {
-    content: '';
-    display: block;
-    flex-shrink: 0;
-    width: 4px;
-    height: 100%;
-    background: rgba(gray, .5);
-  }
-
-  > .dot {
-    --w: 20px;
-    position: absolute;
-    top: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transform: translateY(-50%);
-    width: calc(var(--w) * 1);
-    height: calc(var(--w) * 1);
-    
-    &:hover {
-      &::after {
-        content: '+';
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: calc(var(--w) * 1);
-        height: calc(var(--w) * 1);
-        background-color: rgba(blue, .75);
-        box-shadow: 0 4px 6px rgba(#000, .2);
-      }
-    }
-
-    &::after {
-      content: '';
-      display: block;
-      width: 8px;
-      height: 8px;
-      color: #fff;
-      background-color: rgba(blue, .5);
-      border-radius: 50%;
-      transition: all 100ms;
-      cursor: pointer;
-    }
-  }
-}