intable 0.0.6 → 0.0.7

package/scripts/build.js

@@ -0,0 +1,184 @@
+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

@@ -0,0 +1,95 @@
+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

@@ -0,0 +1,3 @@
+<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

@@ -0,0 +1,4 @@
+<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

@@ -0,0 +1,4 @@
+<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

@@ -0,0 +1,4 @@
+<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

@@ -0,0 +1,3 @@
+<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

@@ -0,0 +1,12 @@
+<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

@@ -0,0 +1,9 @@
+<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

@@ -0,0 +1 @@
+<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

@@ -0,0 +1,54 @@
+// 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

@@ -0,0 +1,107 @@
+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

@@ -0,0 +1,105 @@
+: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;
+    }
+  }
+}