frappe-ui 1.0.0-beta.67 → 1.0.0-beta.69

package/experimental/Calendar/Calendar.vue

@@ -27,13 +27,13 @@
             @update:modelValue="(val) => onMonthYearChange(val)"
             :clearable="false"
           >
-            <template #trigger="{ toggle }">
+            <template #trigger="{ open, setOpen }">
               <Button
                 variant="ghost"
                 class="text-lg-medium text-ink-gray-7"
                 :label="currentMonthYear"
                 iconRight="lucide-chevron-down"
-                @click="toggle"
+                @click="setOpen(!open)"
               />
             </template>
           </DatePicker>

package/experimental/Calendar/stories/CustomHeader.vue

@@ -110,13 +110,13 @@ const events = ref([
               @update:modelValue="(val) => headerProps.onMonthYearChange(val)"
               :clearable="false"
             >
-              <template #trigger="{ toggle }">
+              <template #trigger="{ setOpen, open }">
                 <Button
                   variant="ghost"
                   class="text-lg-medium text-ink-gray-7"
                   :label="headerProps.currentMonthYear"
                   iconRight="lucide-chevron-down"
-                  @click="toggle"
+                  @click="setOpen(!open)"
                 />
               </template>
             </DatePicker>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "1.0.0-beta.67",
+  "version": "1.0.0-beta.69",
   "description": "A set of components and utilities for rapid UI development",
   "engines": {
     "node": ">=20.19.0"
@@ -19,6 +19,10 @@
     "#utils/*": "./src/utils/*"
   },
   "bin": {
+    "base-props-v1": "./scripts/migrate-base-props-v1.js",
+    "list-v1": "./scripts/migrate-list-v1.js",
+    "navigation-v1": "./scripts/migrate-navigation-v1.js",
+    "overlays-v1": "./scripts/migrate-overlays-v1.js",
     "tokens-v2": "./tailwind/migrate-tokens-v2.js",
     "shortcuts-v1": "./scripts/migrate-shortcuts-v1.js",
     "editor-v1": "./scripts/migrate-editor-v1.js",
@@ -104,7 +108,11 @@
     "tailwind",
     "vitepress",
     "scripts/migrate-shortcuts-v1.js",
+    "scripts/migrate-base-props-v1.js",
     "scripts/migrate-editor-v1.js",
+    "scripts/migrate-list-v1.js",
+    "scripts/migrate-navigation-v1.js",
+    "scripts/migrate-overlays-v1.js",
     "experimental",
     "experimental.ts",
     "tsconfig.base.json"
@@ -116,6 +124,7 @@
   "author": "Frappe Technologies Pvt. Ltd.",
   "license": "MIT",
   "dependencies": {
+    "@vue/compiler-sfc": "^3.5.13",
     "@codemirror/lang-css": "^6.3.0",
     "@codemirror/lang-html": "^6.4.9",
     "@codemirror/lang-javascript": "^6.2.2",

package/scripts/migrate-base-props-v1.js

@@ -0,0 +1,379 @@
+#!/usr/bin/env node
+
+import fs from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { parse as parseSfc } from '@vue/compiler-sfc'
+
+const NodeTypes = {
+  ELEMENT: 1,
+  SIMPLE_EXPRESSION: 4,
+  ATTRIBUTE: 6,
+  DIRECTIVE: 7,
+}
+
+const USAGE = `Usage: base-props-v1 [--dry-run] <dir-or-file...>
+
+Renames the v1 base-component props on statically named Vue component tags:
+  Icon name -> icon (optional canonical spelling)
+  Divider position -> align
+  Progress intervals + intervalCount -> numeric intervals`
+
+const COMPONENTS = new Set(['Icon', 'Divider', 'Progress'])
+
+function walk(target, visited = new Set()) {
+  if (fs.lstatSync(target).isSymbolicLink()) return []
+  const resolved = fs.realpathSync(target)
+  if (visited.has(resolved)) return []
+  visited.add(resolved)
+  const stat = fs.statSync(resolved)
+  if (stat.isFile()) return path.extname(target) === '.vue' ? [target] : []
+  return fs.readdirSync(resolved, { withFileTypes: true }).flatMap((entry) => {
+    if (entry.name === 'node_modules' || entry.name === '.git') return []
+    return walk(path.join(resolved, entry.name), visited)
+  })
+}
+
+function kebabCase(name) {
+  return name.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase()
+}
+
+function setAlias(aliases, binding, component) {
+  aliases.set(binding, component)
+  aliases.set(kebabCase(binding), component)
+}
+
+function importedComponentAliases(source) {
+  const aliases = new Map()
+  for (const name of COMPONENTS) setAlias(aliases, name, name)
+  const importPattern = /import\s*\{([\s\S]*?)\}\s*from\s*['"]([^'"]+)['"]/g
+  for (const match of source.matchAll(importPattern)) {
+    for (const part of match[1].split(',')) {
+      const binding = part
+        .trim()
+        .match(/^(Icon|Divider|Progress)(?:\s+as\s+([A-Za-z_$][\w$]*))?$/)
+      if (!binding) continue
+      const name = binding[2] || binding[1]
+      if (match[2] === 'frappe-ui') setAlias(aliases, name, binding[1])
+      else {
+        aliases.delete(name)
+        aliases.delete(kebabCase(name))
+      }
+    }
+  }
+  for (const match of source.matchAll(
+    /import\s+([A-Za-z_$][\w$]*)\s+from\s*['"]([^'"]+)['"]/g,
+  )) {
+    const [, binding, specifier] = match
+    const component = [...COMPONENTS].find((name) =>
+      specifier.endsWith(`/${name}/${name}.vue`),
+    )
+    if (component) setAlias(aliases, binding, component)
+    else {
+      aliases.delete(binding)
+      aliases.delete(kebabCase(binding))
+    }
+  }
+  return aliases
+}
+
+function propName(prop) {
+  if (prop.type === NodeTypes.ATTRIBUTE) return prop.name
+  if (
+    prop.type === NodeTypes.DIRECTIVE &&
+    prop.name === 'bind' &&
+    prop.arg?.type === NodeTypes.SIMPLE_EXPRESSION &&
+    prop.arg.isStatic
+  ) {
+    return prop.arg.content
+  }
+}
+
+function renamePropEdit(prop, from, to, offset) {
+  if (
+    prop.type === NodeTypes.DIRECTIVE &&
+    prop.name === 'bind' &&
+    prop.exp === undefined
+  ) {
+    const renamed = prop.loc.source.replace(from, to)
+    return {
+      start: offset + prop.loc.start.offset,
+      end: offset + prop.loc.end.offset,
+      text: `${renamed}="${from}"`,
+      description: `${from} -> ${to}`,
+    }
+  }
+  const relative = prop.loc.source.indexOf(from)
+  return {
+    start: offset + prop.loc.start.offset + relative,
+    end: offset + prop.loc.start.offset + relative + from.length,
+    text: to,
+    description: `${from} -> ${to}`,
+  }
+}
+
+function boundExpression(prop) {
+  if (prop?.type !== NodeTypes.DIRECTIVE || prop.name !== 'bind')
+    return undefined
+  const match = prop.loc.source.match(/^(?::|v-bind:)[^=]+=(['"])([\s\S]*)\1$/)
+  return match?.[2]
+}
+
+function countExpression(prop) {
+  if (prop.type === NodeTypes.ATTRIBUTE) return prop.value?.content
+  return boundExpression(prop)
+}
+
+function looksNumericExpression(expression) {
+  return (
+    /^\d+(?:\.\d+)?$/.test(expression) ||
+    /(?:^|\.)(?:length|size)$/.test(expression) ||
+    /^(?:Number|parseInt|parseFloat)\s*\(/.test(expression) ||
+    /[+*/%]|\?[^:]+:\s*(?:undefined|\d)/.test(expression)
+  )
+}
+
+function progressEdit(element, offset, refusals) {
+  const intervals = element.props.find((prop) => propName(prop) === 'intervals')
+  const count = element.props.find((prop) =>
+    ['intervalCount', 'interval-count'].includes(propName(prop)),
+  )
+  if (!count && !intervals) return []
+
+  if (count && !intervals) {
+    refusals.push({
+      line: count.loc.start.line,
+      message:
+        'Progress has intervalCount without intervals; choose continuous or interval mode',
+    })
+    return []
+  }
+
+  const condition = boundExpression(intervals)
+  const staticValue =
+    intervals.type === NodeTypes.ATTRIBUTE
+      ? intervals.value?.content
+      : undefined
+  const bareBoolean =
+    intervals.type === NodeTypes.ATTRIBUTE && intervals.value === undefined
+  const numericStatic =
+    staticValue !== undefined && /^\d+(?:\.\d+)?$/.test(staticValue)
+  const shorthandBinding =
+    intervals.type === NodeTypes.DIRECTIVE && condition === undefined
+  // A dynamic `:intervals` without `intervalCount` may already be the v1
+  // numeric API. Leaving it alone makes repeat runs idempotent.
+  if (!count && shorthandBinding) {
+    refusals.push({
+      line: intervals.loc.start.line,
+      message:
+        'Progress shorthand :intervals may still be the v0 boolean mode; replace it with a segment count',
+    })
+    return []
+  }
+  if (
+    !count &&
+    !bareBoolean &&
+    staticValue !== 'true' &&
+    !numericStatic &&
+    condition !== 'true' &&
+    condition !== 'false'
+  ) {
+    if (!looksNumericExpression(condition)) {
+      refusals.push({
+        line: intervals.loc.start.line,
+        message: `Progress ${intervals.loc.source} may still be the v0 boolean mode; replace it with a segment count`,
+      })
+    }
+    return []
+  }
+
+  if (condition === 'false') {
+    const removeProp = (prop, description) => {
+      let start = prop.loc.start.offset
+      while (
+        start > element.loc.start.offset &&
+        /\s/.test(
+          element.loc.source[start - element.loc.start.offset - 1] || '',
+        )
+      )
+        start--
+      return {
+        start: offset + start,
+        end: offset + prop.loc.end.offset,
+        text: '',
+        description,
+      }
+    }
+    return [
+      removeProp(intervals, 'remove disabled Progress interval mode'),
+      ...(count
+        ? [removeProp(count, 'remove unused Progress intervalCount')]
+        : []),
+    ]
+  }
+
+  let replacement
+  if (!count && numericStatic) {
+    replacement = `:intervals="${staticValue}"`
+  } else {
+    const countValue = count ? countExpression(count) : '6'
+    if (!countValue) {
+      refusals.push({
+        line: count.loc.start.line,
+        message: 'Progress intervalCount has no static value to migrate',
+      })
+      return []
+    }
+    if (condition && condition !== 'true') {
+      replacement = `:intervals="(${condition}) ? (${countValue}) : undefined"`
+    } else {
+      replacement = `:intervals="${countValue}"`
+    }
+  }
+
+  const edits = [
+    {
+      start: offset + intervals.loc.start.offset,
+      end: offset + intervals.loc.end.offset,
+      text: replacement,
+      description: 'Progress intervals + intervalCount -> numeric intervals',
+    },
+  ]
+  if (count) {
+    let countStart = count.loc.start.offset
+    let countEnd = count.loc.end.offset
+    if (countStart > intervals.loc.end.offset) {
+      while (
+        countStart > intervals.loc.end.offset &&
+        /\s/.test(
+          element.loc.source[countStart - element.loc.start.offset - 1] || '',
+        )
+      )
+        countStart--
+    } else {
+      while (
+        countEnd < intervals.loc.start.offset &&
+        /\s/.test(element.loc.source[countEnd - element.loc.start.offset] || '')
+      )
+        countEnd++
+    }
+    edits.push({
+      start: offset + countStart,
+      end: offset + countEnd,
+      text: '',
+      description: 'remove Progress intervalCount',
+    })
+  }
+  return edits
+}
+
+export function migrateBaseProps(source) {
+  const parsed = parseSfc(source, { filename: 'component.vue' })
+  if (parsed.errors.length) {
+    return {
+      migrated: source,
+      changes: [],
+      refusals: [
+        { line: 1, message: `Vue parse error: ${String(parsed.errors[0])}` },
+      ],
+    }
+  }
+  const block = parsed.descriptor.template
+  if (!block) return { migrated: source, changes: [], refusals: [] }
+
+  const aliases = importedComponentAliases(source)
+  const ast = block.ast
+  const edits = []
+  const refusals = []
+
+  function visit(node) {
+    if (node.type === NodeTypes.ELEMENT) {
+      const component = aliases.get(node.tag)
+      if (component === 'Icon') {
+        const name = node.props.find((prop) => propName(prop) === 'name')
+        const icon = node.props.find((prop) => propName(prop) === 'icon')
+        // Both props are a supported contract. Leave the lower-precedence name
+        // intact instead of creating a duplicate icon binding.
+        if (name && !icon) {
+          edits.push(renamePropEdit(name, 'name', 'icon', 0))
+        }
+      } else if (component === 'Divider') {
+        for (const prop of node.props) {
+          if (propName(prop) === 'position')
+            edits.push(renamePropEdit(prop, 'position', 'align', 0))
+        }
+      } else if (component === 'Progress') {
+        edits.push(...progressEdit(node, 0, refusals))
+      }
+    }
+    for (const child of node.children || []) visit(child)
+  }
+  visit(ast)
+
+  if (refusals.length) return { migrated: source, changes: [], refusals }
+  const migrated = [...edits]
+    .sort((a, b) => b.start - a.start)
+    .reduce(
+      (text, edit) =>
+        text.slice(0, edit.start) + edit.text + text.slice(edit.end),
+      source,
+    )
+  return { migrated, changes: edits, refusals }
+}
+
+function main() {
+  const args = process.argv.slice(2)
+  if (args.includes('--help') || args.includes('-h')) {
+    console.log(USAGE)
+    return
+  }
+  const unknown = args.filter(
+    (arg) => arg.startsWith('-') && arg !== '--dry-run',
+  )
+  const targets = args.filter((arg) => !arg.startsWith('-'))
+  if (unknown.length || !targets.length) {
+    if (unknown.length) console.error(`Unknown option: ${unknown.join(' ')}`)
+    console.error(USAGE)
+    process.exit(1)
+  }
+
+  for (const target of targets) {
+    if (!fs.existsSync(target)) {
+      console.error(`Invalid path: ${target}`)
+      process.exit(1)
+    }
+  }
+
+  const dryRun = args.includes('--dry-run')
+  const files = [...new Set(targets.flatMap((target) => walk(target)))]
+  let changed = 0
+  const refusals = []
+  for (const file of files) {
+    const source = fs.readFileSync(file, 'utf8')
+    const result = migrateBaseProps(source)
+    if (result.refusals.length) {
+      for (const refusal of result.refusals) refusals.push({ file, ...refusal })
+      continue
+    }
+    if (!result.changes.length) continue
+    changed++
+    if (!dryRun) fs.writeFileSync(file, result.migrated)
+    console.log(`${file} (${result.changes.length})`)
+  }
+  console.log(
+    `\n${dryRun ? '[dry-run] would update' : 'Updated'} ${changed} files`,
+  )
+  if (refusals.length) {
+    console.error(
+      `\nNot converted — ${refusals.length} sites need a decision; affected files were left unchanged:`,
+    )
+    for (const refusal of refusals)
+      console.error(`  ${refusal.file}:L${refusal.line} ${refusal.message}`)
+    process.exit(1)
+  }
+}
+
+const scriptPath = fileURLToPath(import.meta.url)
+const invokedPath = process.argv[1]
+if (invokedPath && fs.realpathSync(invokedPath) === fs.realpathSync(scriptPath))
+  main()