@vuetify/vue-repl 2.4.1 → 2.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/vue-repl.js +296 -57
  2. package/dist/vue-repl.js.map +1 -1
  3. package/package.json +4 -4
package/dist/vue-repl.js CHANGED
@@ -1,22 +1,26 @@
1
- import { defineComponent, computed, ref, inject, reactive, createElementBlock, openBlock, normalizeClass, createElementVNode, normalizeStyle, renderSlot, withModifiers, toDisplayString, watch, createBlock, Transition, withCtx, createCommentVNode, onMounted, onUnmounted, watchEffect, Fragment, withDirectives, createVNode, vShow, renderList, createTextVNode, unref, version, nextTick, withKeys, isRef, provide, toRef } from 'vue';
1
+ import { defineComponent, computed, ref, inject, reactive, createElementBlock, openBlock, normalizeClass, createElementVNode, normalizeStyle, renderSlot, withModifiers, toDisplayString, watch, createBlock, Transition, withCtx, createCommentVNode, onMounted, onUnmounted, watchEffect, Fragment, withDirectives, createVNode, vShow, renderList, createTextVNode, unref, version, nextTick, resolveDynamicComponent, mergeProps, isRef, withKeys, provide, toRef } from 'vue';
2
2
  import * as defaultCompiler from 'vue/compiler-sfc';
3
3
  import { MagicString, babelParse, extractIdentifiers, walkIdentifiers, isStaticProperty, isInDestructureAssignment, walk } from 'vue/compiler-sfc';
4
4
  import { VTabs, VTab } from 'vuetify/components/VTabs';
5
5
  import { g as getDefaultExportFromCjs } from './chunks/_commonjsHelpers-BQ54P8Zj.js';
6
6
  import { a as atou, u as utoa, d as debounce } from './chunks/utils-BJf_b1Uq.js';
7
7
  import { VIconBtn } from 'vuetify/labs/components';
8
- import { useDisplay } from 'vuetify';
8
+ import { useDisplay, useHotkey } from 'vuetify';
9
9
  import { VBtn } from 'vuetify/components/VBtn';
10
10
  import { VIcon } from 'vuetify/components/VIcon';
11
+ import { VDialog, VMenu } from 'vuetify/components';
11
12
  import { VDivider } from 'vuetify/components/VDivider';
12
- import { VListItem, VList, VListItemTitle } from 'vuetify/components/VList';
13
- import { VNavigationDrawer } from 'vuetify/components/VNavigationDrawer';
13
+ import { VHotkey } from 'vuetify/components/VHotkey';
14
+ import { VList, VListItem, VListItemTitle } from 'vuetify/components/VList';
15
+ import { VCard, VCardText, VCardActions } from 'vuetify/components/VCard';
16
+ import { VSpacer } from 'vuetify/components/VGrid';
14
17
  import { VTextField } from 'vuetify/components/VTextField';
18
+ import { VNavigationDrawer } from 'vuetify/components/VNavigationDrawer';
15
19
  import { VLayout } from 'vuetify/components/VLayout';
16
20
  import { VMain } from 'vuetify/components/VMain';
17
21
  import { VThemeProvider } from 'vuetify/components/VThemeProvider';
18
22
 
19
- const _sfc_main$7 = /* @__PURE__ */ defineComponent({
23
+ const _sfc_main$a = /* @__PURE__ */ defineComponent({
20
24
  __name: "SplitPane",
21
25
  props: {
22
26
  layout: {}
@@ -101,9 +105,9 @@ const _export_sfc = (sfc, props) => {
101
105
  return target;
102
106
  };
103
107
 
104
- const SplitPane = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-510dd5cf"]]);
108
+ const SplitPane = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-510dd5cf"]]);
105
109
 
106
- const _sfc_main$6 = /* @__PURE__ */ defineComponent({
110
+ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
107
111
  __name: "Message",
108
112
  props: ["err", "warn"],
109
113
  setup(__props) {
@@ -147,7 +151,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
147
151
  }
148
152
  });
149
153
 
150
- const Message = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-c967e164"]]);
154
+ const Message = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-c967e164"]]);
151
155
 
152
156
  const srcdoc = "<!doctype html>\n<html>\n <head>\n <style>\n body {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,\n Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n }\n </style>\n <!-- PREVIEW-OPTIONS-HEAD-HTML -->\n <script>\n ;(() => {\n let scriptEls = []\n\n window.process = { env: {} }\n window.__modules__ = {}\n\n window.__export__ = (mod, key, get) => {\n Object.defineProperty(mod, key, {\n enumerable: true,\n configurable: true,\n get,\n })\n }\n\n window.__dynamic_import__ = (key) => {\n return Promise.resolve(window.__modules__[key])\n }\n\n async function handle_message(ev) {\n let { action, cmd_id } = ev.data\n const send_message = (payload) =>\n parent.postMessage({ ...payload }, ev.origin)\n const send_reply = (payload) => send_message({ ...payload, cmd_id })\n const send_ok = () => send_reply({ action: 'cmd_ok' })\n const send_error = (message, stack) =>\n send_reply({ action: 'cmd_error', message, stack })\n\n if (action === 'eval') {\n try {\n if (scriptEls.length) {\n scriptEls.forEach((el) => {\n document.head.removeChild(el)\n })\n scriptEls.length = 0\n }\n\n let { script: scripts } = ev.data.args\n if (typeof scripts === 'string') scripts = [scripts]\n\n for (const script of scripts) {\n const scriptEl = document.createElement('script')\n scriptEl.setAttribute('type', 'module')\n // send ok in the module script to ensure sequential evaluation\n // of multiple proxy.eval() calls\n const done = new Promise((resolve) => {\n window.__next__ = resolve\n })\n scriptEl.innerHTML = script + `\\nwindow.__next__()`\n document.head.appendChild(scriptEl)\n scriptEl.onerror = (err) => send_error(err.message, err.stack)\n scriptEls.push(scriptEl)\n await done\n }\n send_ok()\n } catch (e) {\n send_error(e.message, e.stack)\n }\n }\n\n if (action === 'catch_clicks') {\n try {\n const top_origin = ev.origin\n document.body.addEventListener('click', (event) => {\n if (event.which !== 1) return\n if (event.metaKey || event.ctrlKey || event.shiftKey) return\n if (event.defaultPrevented) return\n\n // ensure target is a link\n let el = event.target\n while (el && el.nodeName !== 'A') el = el.parentNode\n if (!el || el.nodeName !== 'A') return\n\n if (\n el.hasAttribute('download') ||\n el.getAttribute('rel') === 'external' ||\n el.target ||\n el.href.startsWith('javascript:')\n )\n return\n\n event.preventDefault()\n\n if (el.href.startsWith(top_origin)) {\n const url = new URL(el.href)\n if (url.hash[0] === '#') {\n window.location.hash = url.hash\n return\n }\n }\n\n window.open(el.href, '_blank')\n })\n send_ok()\n } catch (e) {\n send_error(e.message, e.stack)\n }\n }\n }\n\n window.addEventListener('message', handle_message, false)\n\n window.onerror = function (msg, url, lineNo, columnNo, error) {\n // ignore errors from import map polyfill - these are necessary for\n // it to detect browser support\n if (msg.includes('module specifier “vue”')) {\n // firefox only error, ignore\n return false\n }\n if (msg.includes(\"Module specifier, 'vue\")) {\n // Safari only\n return false\n }\n try {\n parent.postMessage({ action: 'error', value: error }, '*')\n } catch (e) {\n parent.postMessage({ action: 'error', value: msg }, '*')\n }\n }\n\n window.addEventListener('unhandledrejection', (event) => {\n if (\n event.reason.message &&\n event.reason.message.includes('Cross-origin')\n ) {\n event.preventDefault()\n return\n }\n try {\n parent.postMessage(\n { action: 'unhandledrejection', value: event.reason },\n '*'\n )\n } catch (e) {\n parent.postMessage(\n { action: 'unhandledrejection', value: event.reason.message },\n '*'\n )\n }\n })\n\n let previous = { level: null, args: null }\n\n ;['clear', 'log', 'info', 'dir', 'warn', 'error', 'table'].forEach(\n (level) => {\n const original = console[level]\n console[level] = (...args) => {\n const msg = args[0]\n if (typeof msg === 'string') {\n if (\n msg.includes('You are running a development build of Vue') ||\n msg.includes('You are running the esm-bundler build of Vue')\n ) {\n return\n }\n }\n\n original(...args)\n\n const stringifiedArgs = stringify(args)\n if (\n previous.level === level &&\n previous.args &&\n previous.args === stringifiedArgs\n ) {\n parent.postMessage(\n { action: 'console', level, duplicate: true },\n '*'\n )\n } else {\n previous = { level, args: stringifiedArgs }\n\n try {\n parent.postMessage({ action: 'console', level, args }, '*')\n } catch (err) {\n parent.postMessage(\n { action: 'console', level, args: args.map(toString) },\n '*'\n )\n }\n }\n }\n }\n )\n ;[\n { method: 'group', action: 'console_group' },\n { method: 'groupEnd', action: 'console_group_end' },\n { method: 'groupCollapsed', action: 'console_group_collapsed' },\n ].forEach((group_action) => {\n const original = console[group_action.method]\n console[group_action.method] = (label) => {\n parent.postMessage({ action: group_action.action, label }, '*')\n\n original(label)\n }\n })\n\n const timers = new Map()\n const original_time = console.time\n const original_timelog = console.timeLog\n const original_timeend = console.timeEnd\n\n console.time = (label = 'default') => {\n original_time(label)\n timers.set(label, performance.now())\n }\n console.timeLog = (label = 'default') => {\n original_timelog(label)\n const now = performance.now()\n if (timers.has(label)) {\n parent.postMessage(\n {\n action: 'console',\n level: 'system-log',\n args: [`${label}: ${now - timers.get(label)}ms`],\n },\n '*'\n )\n } else {\n parent.postMessage(\n {\n action: 'console',\n level: 'system-warn',\n args: [`Timer '${label}' does not exist`],\n },\n '*'\n )\n }\n }\n console.timeEnd = (label = 'default') => {\n original_timeend(label)\n const now = performance.now()\n if (timers.has(label)) {\n parent.postMessage(\n {\n action: 'console',\n level: 'system-log',\n args: [`${label}: ${now - timers.get(label)}ms`],\n },\n '*'\n )\n } else {\n parent.postMessage(\n {\n action: 'console',\n level: 'system-warn',\n args: [`Timer '${label}' does not exist`],\n },\n '*'\n )\n }\n timers.delete(label)\n }\n\n const original_assert = console.assert\n console.assert = (condition, ...args) => {\n if (condition) {\n const stack = new Error().stack\n parent.postMessage(\n { action: 'console', level: 'assert', args, stack },\n '*'\n )\n }\n original_assert(condition, ...args)\n }\n\n const counter = new Map()\n const original_count = console.count\n const original_countreset = console.countReset\n\n console.count = (label = 'default') => {\n counter.set(label, (counter.get(label) || 0) + 1)\n parent.postMessage(\n {\n action: 'console',\n level: 'system-log',\n args: `${label}: ${counter.get(label)}`,\n },\n '*'\n )\n original_count(label)\n }\n\n console.countReset = (label = 'default') => {\n if (counter.has(label)) {\n counter.set(label, 0)\n } else {\n parent.postMessage(\n {\n action: 'console',\n level: 'system-warn',\n args: `Count for '${label}' does not exist`,\n },\n '*'\n )\n }\n original_countreset(label)\n }\n\n const original_trace = console.trace\n\n console.trace = (...args) => {\n const stack = new Error().stack\n parent.postMessage(\n { action: 'console', level: 'trace', args, stack },\n '*'\n )\n original_trace(...args)\n }\n\n function toString(value) {\n if (value instanceof Error) {\n return value.message\n }\n for (const fn of [\n String,\n (v) => Object.prototype.toString.call(v),\n (v) => typeof v,\n ]) {\n try {\n return fn(value)\n } catch (err) {}\n }\n }\n\n function isComponentProxy(value) {\n return (\n value &&\n typeof value === 'object' &&\n value.__v_skip === true &&\n typeof value.$nextTick === 'function' &&\n value.$ &&\n value._\n )\n }\n\n function stringify(args) {\n try {\n return JSON.stringify(args, (key, value) => {\n return isComponentProxy(value) ? '{component proxy}' : value\n })\n } catch (error) {\n return null\n }\n }\n })()\n </script>\n\n <!-- ES Module Shims: Import maps polyfill for modules browsers without import maps support (all except Chrome 89+) -->\n <script\n async\n src=\"https://cdn.jsdelivr.net/npm/es-module-shims@1.5.18/dist/es-module-shims.wasm.js\"\n ></script>\n <script type=\"importmap\">\n <!--IMPORT_MAP-->\n </script>\n <!--CSS-->\n </head>\n <body></body>\n</html>\n";
153
157
 
@@ -488,7 +492,7 @@ function processHtmlFile(store, src, filename, processed, seen) {
488
492
  processed.push(jsCode);
489
493
  }
490
494
 
491
- const _sfc_main$5 = /* @__PURE__ */ defineComponent({
495
+ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
492
496
  __name: "Preview",
493
497
  props: {
494
498
  show: { type: Boolean },
@@ -726,10 +730,10 @@ Tip: edit the "Import Map" tab to specify import paths for dependencies.`;
726
730
  }
727
731
  });
728
732
 
729
- const Preview = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-4f70f7e4"]]);
733
+ const Preview = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-4f70f7e4"]]);
730
734
 
731
735
  const _hoisted_1$2 = { class: "output-container" };
732
- const _sfc_main$4 = /* @__PURE__ */ defineComponent({
736
+ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
733
737
  __name: "Output",
734
738
  props: {
735
739
  editorComponent: { type: [Function, Object] },
@@ -798,7 +802,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
798
802
  }
799
803
  });
800
804
 
801
- const Output = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-3605a419"]]);
805
+ const Output = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-3605a419"]]);
802
806
 
803
807
  var ContextualKeyword; (function (ContextualKeyword) {
804
808
  const NONE = 0; ContextualKeyword[ContextualKeyword["NONE"] = NONE] = "NONE";
@@ -17915,7 +17919,9 @@ function stripSrcPrefix(file) {
17915
17919
 
17916
17920
  // Material Design Icons v6.2.95
17917
17921
  var mdiCodeJson = "M5,3H7V5H5V10A2,2 0 0,1 3,12A2,2 0 0,1 5,14V19H7V21H5C3.93,20.73 3,20.1 3,19V15A2,2 0 0,0 1,13H0V11H1A2,2 0 0,0 3,9V5A2,2 0 0,1 5,3M19,3A2,2 0 0,1 21,5V9A2,2 0 0,0 23,11H24V13H23A2,2 0 0,0 21,15V19A2,2 0 0,1 19,21H17V19H19V14A2,2 0 0,1 21,12A2,2 0 0,1 19,10V5H17V3H19M12,15A1,1 0 0,1 13,16A1,1 0 0,1 12,17A1,1 0 0,1 11,16A1,1 0 0,1 12,15M8,15A1,1 0 0,1 9,16A1,1 0 0,1 8,17A1,1 0 0,1 7,16A1,1 0 0,1 8,15M16,15A1,1 0 0,1 17,16A1,1 0 0,1 16,17A1,1 0 0,1 15,16A1,1 0 0,1 16,15Z";
17922
+ var mdiDelete = "M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z";
17918
17923
  var mdiDockLeft = "M20 4H4A2 2 0 0 0 2 6V18A2 2 0 0 0 4 20H20A2 2 0 0 0 22 18V6A2 2 0 0 0 20 4M20 18H9V6H20Z";
17924
+ var mdiDotsVertical = "M12,16A2,2 0 0,1 14,18A2,2 0 0,1 12,20A2,2 0 0,1 10,18A2,2 0 0,1 12,16M12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12A2,2 0 0,1 12,10M12,4A2,2 0 0,1 14,6A2,2 0 0,1 12,8A2,2 0 0,1 10,6A2,2 0 0,1 12,4Z";
17919
17925
  var mdiFileOutline = "M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z";
17920
17926
  var mdiFilePlusOutline = "M12,14V11H10V14H7V16H10V19H12V16H15V14M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18";
17921
17927
  var mdiLanguageCss3 = "M5,3L4.35,6.34H17.94L17.5,8.5H3.92L3.26,11.83H16.85L16.09,15.64L10.61,17.45L5.86,15.64L6.19,14H2.85L2.06,18L9.91,21L18.96,18L20.16,11.97L20.4,10.76L21.94,3H5Z";
@@ -17923,15 +17929,18 @@ var mdiLanguageJavascript = "M3,3H21V21H3V3M7.73,18.04C8.13,18.89 8.92,19.59 10.
17923
17929
  var mdiLanguageTypescript = "M3,3H21V21H3V3M13.71,17.86C14.21,18.84 15.22,19.59 16.8,19.59C18.4,19.59 19.6,18.76 19.6,17.23C19.6,15.82 18.79,15.19 17.35,14.57L16.93,14.39C16.2,14.08 15.89,13.87 15.89,13.37C15.89,12.96 16.2,12.64 16.7,12.64C17.18,12.64 17.5,12.85 17.79,13.37L19.1,12.5C18.55,11.54 17.77,11.17 16.7,11.17C15.19,11.17 14.22,12.13 14.22,13.4C14.22,14.78 15.03,15.43 16.25,15.95L16.67,16.13C17.45,16.47 17.91,16.68 17.91,17.26C17.91,17.74 17.46,18.09 16.76,18.09C15.93,18.09 15.45,17.66 15.09,17.06L13.71,17.86M13,11.25H8V12.75H9.5V20H11.25V12.75H13V11.25Z";
17924
17930
  var mdiLink = "M3.9,12C3.9,10.29 5.29,8.9 7,8.9H11V7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H11V15.1H7C5.29,15.1 3.9,13.71 3.9,12M8,13H16V11H8V13M17,7H13V8.9H17C18.71,8.9 20.1,10.29 20.1,12C20.1,13.71 18.71,15.1 17,15.1H13V17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7Z";
17925
17931
  var mdiMap = "M15,19L9,16.89V5L15,7.11M20.5,3C20.44,3 20.39,3 20.34,3L15,5.1L9,3L3.36,4.9C3.15,4.97 3,5.15 3,5.38V20.5A0.5,0.5 0 0,0 3.5,21C3.55,21 3.61,21 3.66,20.97L9,18.9L15,21L20.64,19.1C20.85,19 21,18.85 21,18.62V3.5A0.5,0.5 0 0,0 20.5,3Z";
17932
+ var mdiPencil = "M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z";
17926
17933
  var mdiVuejs = "M2,3H5.5L12,15L18.5,3H22L12,21L2,3M6.5,3H9.5L12,7.58L14.5,3H17.5L12,13.08L6.5,3Z";
17927
17934
 
17935
+ const pending = ref(false);
17936
+ const pendingFilename = ref("Comp.vue");
17937
+ const menuActiveFile = ref("");
17938
+ const renameMenu = ref(false);
17928
17939
  function useFileSelector() {
17929
17940
  const store = inject("store");
17930
- const pending = ref(false);
17931
- const pendingFilename = ref("Comp.vue");
17932
- const linksFile = "links.json";
17933
17941
  const showTsConfig = inject("tsconfig");
17934
17942
  const showImportMap = inject("import-map");
17943
+ const linksFile = "links.json";
17935
17944
  const files = computed(
17936
17945
  () => Object.entries(store.state.files).filter(
17937
17946
  ([name, file]) => ![importMapFile, linksFile, tsconfigFile].includes(name) && !file.hidden
@@ -18032,10 +18041,6 @@ function useFileSelector() {
18032
18041
  files,
18033
18042
  pending,
18034
18043
  pendingFilename,
18035
- startAddFile,
18036
- cancelNameFile,
18037
- focus,
18038
- doneNameFile,
18039
18044
  fileSel,
18040
18045
  activeFile,
18041
18046
  showTsConfig,
@@ -18043,6 +18048,12 @@ function useFileSelector() {
18043
18048
  linksFile,
18044
18049
  tsconfigFile,
18045
18050
  importMapFile,
18051
+ menuActiveFile,
18052
+ renameMenu,
18053
+ startAddFile,
18054
+ cancelNameFile,
18055
+ focus,
18056
+ doneNameFile,
18046
18057
  stripSrcPrefix,
18047
18058
  getFileIcon,
18048
18059
  getFileIconColor
@@ -18051,7 +18062,7 @@ function useFileSelector() {
18051
18062
 
18052
18063
  const _hoisted_1$1 = { class: "d-flex align-center justify-center" };
18053
18064
  const MAX_RECENT_FILES = 10;
18054
- const _sfc_main$3 = /* @__PURE__ */ defineComponent({
18065
+ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
18055
18066
  __name: "FileSelector",
18056
18067
  setup(__props) {
18057
18068
  const store = inject("store");
@@ -18148,7 +18159,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
18148
18159
  });
18149
18160
 
18150
18161
  const _hoisted_1 = { class: "overflow-hidden position-relative editor-container" };
18151
- const _sfc_main$2 = /* @__PURE__ */ defineComponent({
18162
+ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
18152
18163
  __name: "EditorContainer",
18153
18164
  props: {
18154
18165
  editorComponent: { type: [Function, Object] }
@@ -18164,7 +18175,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
18164
18175
  }, 250);
18165
18176
  return (_ctx, _cache) => {
18166
18177
  return openBlock(), createElementBlock(Fragment, null, [
18167
- createVNode(_sfc_main$3),
18178
+ createVNode(_sfc_main$6),
18168
18179
  createElementVNode("div", _hoisted_1, [
18169
18180
  createVNode(props.editorComponent, {
18170
18181
  onChange: _cache[0] || (_cache[0] = ($event) => unref(onChange)($event, unref(store).state.activeFile.filename)),
@@ -18183,7 +18194,236 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
18183
18194
  }
18184
18195
  });
18185
18196
 
18186
- const EditorContainer = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-9627427b"]]);
18197
+ const EditorContainer = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-9627427b"]]);
18198
+
18199
+ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
18200
+ __name: "FileItemActions",
18201
+ props: {
18202
+ file: {}
18203
+ },
18204
+ setup(__props) {
18205
+ const store = inject("store");
18206
+ const { mobile } = useDisplay();
18207
+ const { menuActiveFile, renameMenu } = useFileSelector();
18208
+ return (_ctx, _cache) => {
18209
+
18210
+
18211
+
18212
+
18213
+
18214
+ return openBlock(), createBlock(resolveDynamicComponent(unref(mobile) ? unref(VDialog) : unref(VMenu)), { "max-width": "450" }, {
18215
+ activator: withCtx(({ props }) => [
18216
+ createVNode(unref(VIconBtn), mergeProps({
18217
+ icon: `svg:${unref(mdiDotsVertical)}`,
18218
+ size: "small",
18219
+ variant: "text"
18220
+ }, props, {
18221
+ onClick: _cache[0] || (_cache[0] = withModifiers(($event) => menuActiveFile.value = _ctx.file, ["stop"]))
18222
+ }), null, 16, ["icon"])
18223
+ ]),
18224
+ default: withCtx(() => [
18225
+ createVNode(VList, {
18226
+ "min-width": "200",
18227
+ density: "compact",
18228
+ class: "py-0",
18229
+ rounded: "lg",
18230
+ border: "",
18231
+ slim: ""
18232
+ }, {
18233
+ default: withCtx(() => [
18234
+ createVNode(VListItem, {
18235
+ size: "small",
18236
+ title: "Rename",
18237
+ onClick: _cache[1] || (_cache[1] = ($event) => renameMenu.value = true)
18238
+ }, {
18239
+ prepend: withCtx(() => [
18240
+ createVNode(VIcon, {
18241
+ size: "small",
18242
+ icon: `svg:${unref(mdiPencil)}`
18243
+ }, null, 8, ["icon"])
18244
+ ]),
18245
+ append: withCtx(() => [
18246
+ createVNode(VHotkey, { keys: "f2" })
18247
+ ]),
18248
+ _: 1
18249
+ }),
18250
+ createVNode(VDivider),
18251
+ createVNode(VListItem, {
18252
+ title: "Delete",
18253
+ onClick: _cache[2] || (_cache[2] = ($event) => unref(store).deleteFile(_ctx.file))
18254
+ }, {
18255
+ prepend: withCtx(() => [
18256
+ createVNode(VIcon, {
18257
+ size: "small",
18258
+ icon: `svg:${unref(mdiDelete)}`
18259
+ }, null, 8, ["icon"])
18260
+ ]),
18261
+ append: withCtx(() => [
18262
+ createVNode(VHotkey, { keys: "cmd+backspace" })
18263
+ ]),
18264
+ _: 1
18265
+ })
18266
+ ]),
18267
+ _: 1
18268
+ })
18269
+ ]),
18270
+ _: 1
18271
+ });
18272
+ };
18273
+ }
18274
+ });
18275
+
18276
+ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
18277
+ __name: "FileItem",
18278
+ props: {
18279
+ file: {}
18280
+ },
18281
+ setup(__props) {
18282
+ const readonly = inject("readonly", ref(false));
18283
+ const { activeFile, stripSrcPrefix, getFileIcon, getFileIconColor } = useFileSelector();
18284
+ return (_ctx, _cache) => {
18285
+
18286
+
18287
+ return openBlock(), createBlock(VListItem, {
18288
+ value: _ctx.file,
18289
+ rounded: "",
18290
+ title: unref(stripSrcPrefix)(_ctx.file),
18291
+ slim: "",
18292
+ onClick: _cache[0] || (_cache[0] = ($event) => activeFile.value = _ctx.file)
18293
+ }, {
18294
+ prepend: withCtx(() => [
18295
+ createVNode(VIcon, {
18296
+ icon: `svg:${unref(getFileIcon)(_ctx.file)}`,
18297
+ color: unref(getFileIconColor)(_ctx.file),
18298
+ size: "small"
18299
+ }, null, 8, ["icon", "color"])
18300
+ ]),
18301
+ append: withCtx(() => [
18302
+ !unref(readonly) ? (openBlock(), createBlock(_sfc_main$4, {
18303
+ key: 0,
18304
+ file: _ctx.file
18305
+ }, null, 8, ["file"])) : createCommentVNode("", true)
18306
+ ]),
18307
+ _: 1
18308
+ }, 8, ["value", "title"]);
18309
+ };
18310
+ }
18311
+ });
18312
+
18313
+ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
18314
+ __name: "FileRename",
18315
+ props: {
18316
+ listItem: {}
18317
+ },
18318
+ setup(__props) {
18319
+ const store = inject("store");
18320
+ const readonly = inject("readonly", ref(false));
18321
+ const { getFileIcon, menuActiveFile, renameMenu } = useFileSelector();
18322
+ const { mobile } = useDisplay();
18323
+ const newFilename = ref("");
18324
+ const rules = [
18325
+ (v) => !!v || "Filename cannot be empty",
18326
+ (v) => isValidFilename(v) || "A file with this name already exists"
18327
+ ];
18328
+ const isValidRename = computed(
18329
+ () => rules.every((rule) => rule(newFilename.value) === true) && newFilename.value !== menuActiveFile.value
18330
+ );
18331
+ watch(renameMenu, (newVal) => {
18332
+ if (!newVal) return;
18333
+ newFilename.value = menuActiveFile.value.replace(/^src\//, "");
18334
+ });
18335
+ function isValidFilename(filename) {
18336
+ return Object.keys(store.state.files).every(
18337
+ (file) => file === menuActiveFile.value || file !== `src/${filename}`
18338
+ );
18339
+ }
18340
+ function doneRename() {
18341
+ if (!isValidRename.value) return;
18342
+ store.renameFile(menuActiveFile.value, `src/${newFilename.value}`);
18343
+ menuActiveFile.value = `src/${newFilename.value}`;
18344
+ renameMenu.value = false;
18345
+ }
18346
+ return (_ctx, _cache) => {
18347
+
18348
+
18349
+
18350
+
18351
+
18352
+
18353
+
18354
+ return openBlock(), createBlock(resolveDynamicComponent(unref(mobile) ? unref(VDialog) : unref(VMenu)), {
18355
+ modelValue: unref(renameMenu),
18356
+ "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => isRef(renameMenu) ? renameMenu.value = $event : null),
18357
+ "open-on-click": false,
18358
+ "close-on-content-click": false,
18359
+ "max-width": "450",
18360
+ location: "end",
18361
+ activator: _ctx.listItem
18362
+ }, {
18363
+ default: withCtx(() => [
18364
+ createVNode(VCard, {
18365
+ "min-width": "300",
18366
+ elevation: "8"
18367
+ }, {
18368
+ default: withCtx(() => [
18369
+ createVNode(VCardText, { class: "pa-4" }, {
18370
+ default: withCtx(() => [
18371
+ !unref(readonly) ? (openBlock(), createBlock(VTextField, {
18372
+ key: 0,
18373
+ modelValue: newFilename.value,
18374
+ "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => newFilename.value = $event),
18375
+ density: "compact",
18376
+ "hide-details": "auto",
18377
+ autofocus: "",
18378
+ "prepend-inner-icon": `svg:${unref(getFileIcon)(unref(menuActiveFile))}`,
18379
+ "base-color": "primary",
18380
+ color: "primary",
18381
+ variant: "outlined",
18382
+ rules,
18383
+ onKeydown: [
18384
+ withKeys(doneRename, ["enter"]),
18385
+ _cache[1] || (_cache[1] = withKeys(($event) => renameMenu.value = false, ["esc"]))
18386
+ ]
18387
+ }, null, 8, ["modelValue", "prepend-inner-icon"])) : createCommentVNode("", true)
18388
+ ]),
18389
+ _: 1
18390
+ }),
18391
+ createVNode(VDivider),
18392
+ createVNode(VCardActions, null, {
18393
+ default: withCtx(() => [
18394
+ createVNode(VSpacer),
18395
+ createVNode(VBtn, {
18396
+ variant: "text",
18397
+ onClick: _cache[2] || (_cache[2] = ($event) => renameMenu.value = false)
18398
+ }, {
18399
+ default: withCtx(() => _cache[4] || (_cache[4] = [
18400
+ createTextVNode(" Cancel ")
18401
+ ])),
18402
+ _: 1
18403
+ }),
18404
+ createVNode(VBtn, {
18405
+ variant: "text",
18406
+ color: "primary",
18407
+ disabled: !isValidRename.value,
18408
+ onClick: doneRename
18409
+ }, {
18410
+ default: withCtx(() => _cache[5] || (_cache[5] = [
18411
+ createTextVNode(" Rename ")
18412
+ ])),
18413
+ _: 1
18414
+ }, 8, ["disabled"])
18415
+ ]),
18416
+ _: 1
18417
+ })
18418
+ ]),
18419
+ _: 1
18420
+ })
18421
+ ]),
18422
+ _: 1
18423
+ }, 8, ["modelValue", "activator"]);
18424
+ };
18425
+ }
18426
+ });
18187
18427
 
18188
18428
  const _sfc_main$1 = /* @__PURE__ */ defineComponent({
18189
18429
  __name: "FileExplorer",
@@ -18194,26 +18434,42 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
18194
18434
  activeFile,
18195
18435
  showImportMap,
18196
18436
  files,
18197
- stripSrcPrefix,
18198
18437
  pending,
18199
18438
  pendingFilename,
18200
- doneNameFile,
18201
- cancelNameFile,
18202
- startAddFile,
18203
18439
  tsconfigFile,
18204
18440
  showTsConfig,
18205
18441
  importMapFile,
18206
18442
  linksFile,
18207
- getFileIcon,
18208
- getFileIconColor
18443
+ menuActiveFile,
18444
+ renameMenu,
18445
+ doneNameFile,
18446
+ cancelNameFile,
18447
+ startAddFile,
18448
+ getFileIcon
18209
18449
  } = useFileSelector();
18450
+ const listItem = ref(null);
18451
+ useHotkey("f2", handleRename);
18452
+ useHotkey("cmd+backspace", handleDelete);
18453
+ function setActiveListItem(el, file) {
18454
+ if (menuActiveFile.value !== file) return;
18455
+ listItem.value = el;
18456
+ }
18457
+ function handleRename() {
18458
+ if (readonly.value) return;
18459
+ menuActiveFile.value = activeFile.value;
18460
+ renameMenu.value = true;
18461
+ }
18462
+ function handleDelete() {
18463
+ if (readonly.value) return;
18464
+ store.deleteFile(activeFile.value);
18465
+ }
18210
18466
  return (_ctx, _cache) => {
18211
18467
 
18212
18468
 
18213
18469
 
18214
-
18215
18470
 
18216
18471
 
18472
+
18217
18473
 
18218
18474
 
18219
18475
  return openBlock(), createBlock(VNavigationDrawer, {
@@ -18334,33 +18590,12 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
18334
18590
  }, {
18335
18591
  default: withCtx(() => [
18336
18592
  (openBlock(true), createElementBlock(Fragment, null, renderList(unref(files), (file) => {
18337
- return openBlock(), createBlock(VListItem, {
18593
+ return openBlock(), createBlock(_sfc_main$3, {
18338
18594
  key: file,
18339
- value: file,
18340
- rounded: "",
18341
- title: unref(stripSrcPrefix)(file),
18342
- slim: "",
18343
- onClick: ($event) => activeFile.value = file
18344
- }, {
18345
- prepend: withCtx(() => [
18346
- createVNode(VIcon, {
18347
- icon: `svg:${unref(getFileIcon)(file)}`,
18348
- color: unref(getFileIconColor)(file),
18349
- size: "small"
18350
- }, null, 8, ["icon", "color"])
18351
- ]),
18352
- append: withCtx(() => [
18353
- !unref(readonly) ? (openBlock(), createBlock(unref(VIconBtn), {
18354
- key: 0,
18355
- icon: "$close",
18356
- size: "26",
18357
- "icon-size": "14",
18358
- variant: "plain",
18359
- onClick: withModifiers(($event) => unref(store).deleteFile(file), ["stop"])
18360
- }, null, 8, ["onClick"])) : createCommentVNode("", true)
18361
- ]),
18362
- _: 2
18363
- }, 1032, ["value", "title", "onClick"]);
18595
+ file,
18596
+ ref_for: true,
18597
+ ref: (el) => setActiveListItem(el, file)
18598
+ }, null, 8, ["file"]);
18364
18599
  }), 128)),
18365
18600
  unref(pending) && !unref(readonly) ? (openBlock(), createBlock(VTextField, {
18366
18601
  key: 0,
@@ -18382,7 +18617,11 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
18382
18617
  }, null, 8, ["modelValue", "prepend-inner-icon", "onBlur", "onKeyup"])) : createCommentVNode("", true)
18383
18618
  ]),
18384
18619
  _: 1
18385
- }, 8, ["selected"])
18620
+ }, 8, ["selected"]),
18621
+ createVNode(_sfc_main$2, {
18622
+ "list-item": listItem.value,
18623
+ file: unref(menuActiveFile)
18624
+ }, null, 8, ["list-item", "file"])
18386
18625
  ]),
18387
18626
  _: 1
18388
18627
  }, 8, ["modelValue"]);