@opentiny/vue-docs 2.1.9 → 2.2.0

package/demos/pc/webdoc/i18n-en.md

@@ -87,11 +87,11 @@ Step 3 Modify `src/main.js` and add the highlighted part of the following code:
 ```js {3,7}
 import Vue from 'vue'
 import App from './App.vue'
-import i18n from './i18n'
+import initI18n from './i18n'
 import router from './router'
 
 new Vue({
-  i18n: i18n({ locale: 'zhCN' }),
+  i18n: initI18n({ locale: 'zhCN' }),
   router,
   render: (h) => h(App)
 }).$mount('#app')

package/demos/pc/webdoc/i18n.md

@@ -87,14 +87,11 @@ export default (i18n) =>
 ```js
 import Vue from 'vue'
 import App from './App.vue'
-import i18n from './i18n'
+import initI18n from './i18n'
 import router from './router'
 
 new Vue({
-  i18n: {
-    locale: 'zhCN',
-    messages: i18n()
-  },
+  i18n: initI18n({ locale: 'zhCN' }),
   router,
   render: (h) => h(App)
 }).$mount('#app')

package/demos/pc/webdoc/theme-en.md

@@ -10,11 +10,42 @@ Design website: [Administrative side specification design variable] (https://rnd
 
 Basic style variable `npm` Repository path: `@opentiny/vue-theme/theme`
 
-### Using Predefined Topics and Dynamically Switching Topics
+### Using predefined themes and dynamically switching themes
 
-At present, two sets of themes are officially provided: default theme and unlimited theme.
+Currently, the official offers 4 sets of themes:
 
-Topic initialization and dynamic theme switching are described as follows:
+-Default Theme
+-Infinity Theme ` tinyInfinityTheme`
+-Aurora Theme ` tinyAuroraTheme`
+-XDesign Theme ` tinySmbTheme`
+
+#### Using predefined themes through alias [Currently only supported: Eurora theme and XDesign theme]
+
+vue.config.js define
+
+```js
+chainWebpack: (config) => {
+  // XDesign Theme
+  config.resolve.alias.set('@opentiny/vue-theme', '@opentiny/vue-theme/smb-theme')
+  // Aurora Theme : The aurora theme is to replace all the 'smb' characters in the above SMB themes with 'aurora'
+}
+```
+
+vite.config.js define
+
+```js
+resolve: {
+  alias: [
+    // XDesign Theme
+    {
+      find: /\@opentiny\/vue-theme\/(?!(smb))/,
+      replacement: '@opentiny/vue-theme/smb-theme/'
+    }
+  ]
+}
+```
+
+#### The specific usage of theme initialization and dynamic theme switching is shown below, and the following code is added to the main.ts file.
 
 ```js
 import TinyThemeTool from' @opentiny/vue-theme/theme-tool.js'

package/demos/pc/webdoc/theme.md

@@ -17,7 +17,33 @@
 - 欧若拉主题 `tinyAuroraTheme`
 - XDesign 主题 `tinySmbTheme`
 
-主题初始化和动态切换主题的具体使用方式如下文所示，在 main.ts 文件中增加以下代码。
+#### 通过 alias 使用预定义主题【目前仅支持：欧若拉主题 和 XDesign 主题】
+
+vue.config.js 定义
+
+```js
+chainWebpack: (config) => {
+  // XDesign 主题
+  config.resolve.alias.set('@opentiny/vue-theme', '@opentiny/vue-theme/smb-theme')
+  // aurora 主题 则是将以上smb主题中的'smb'字符全替换成 'aurora'即可
+}
+```
+
+vite.config.js 定义
+
+```js
+resolve: {
+  alias: [
+    // XDesign 主题
+    {
+      find: /\@opentiny\/vue-theme\/(?!(smb))/,
+      replacement: '@opentiny/vue-theme/smb-theme/'
+    }
+  ]
+}
+```
+
+#### 主题初始化和动态切换主题的具体使用方式如下文所示，在 main.ts 文件中增加以下代码。
 
 ```js
 import TinyThemeTool from '@opentiny/vue-theme/theme-tool'

package/env/.env.innersaas

@@ -5,4 +5,4 @@ VITE_TINY_THEME='saas'
 # 官网应用类型：pc / mobile / mobile-first
 VITE_APP_MODE='pc'
 VITE_APP_BUILD_BASE_URL=https://test-static-resource.obs.cn-north-7.ulanqab.huawei.com/tiny-vue-saas/${staticReleaseVersion}/
-VITE_PLAYGROUND_URL=/vue-playground
+VITE_PLAYGROUND_URL=/vue-saas-playground

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-docs",
-  "version": "2.1.9",
+  "version": "2.2.0",
   "dependencies": {
     "@unocss/reset": "0.38.2",
     "@vue/repl": "^2.5.5",
@@ -8,7 +8,7 @@
     "github-markdown-css": "^5.1.0",
     "highlight.js": "^11.5.1",
     "prismjs": "^1.28.0",
-    "vue": "^3.3.4",
+    "vue": "^3.3.9",
     "tailwindcss": "^3.2.4",
     "vue-i18n": "^9.1.10",
     "vue-router": "4.1.5",
@@ -17,13 +17,13 @@
     "sortablejs": "1.15.0",
     "@opentiny/vue-repl": "^1.1.0",
     "@opentiny/vue": "~3.12.0",
+    "@opentiny/vue-theme": "~3.12.0",
     "@opentiny/vue-icon-saas": "~3.12.0",
-    "@opentiny/vue-design-aurora": "~3.12.0",
+    "@opentiny/vue-icon": "~3.12.0",
     "@opentiny/vue-common": "~3.12.0",
     "@opentiny/vue-design-smb": "~3.12.0",
     "@opentiny/vue-theme-mobile": "~3.12.0",
-    "@opentiny/vue-theme": "~3.12.0",
-    "@opentiny/vue-icon": "~3.12.0",
+    "@opentiny/vue-design-aurora": "~3.12.0",
     "@opentiny/vue-theme-saas": "~3.12.0",
     "@opentiny/vue-vite-import": "~1.1.5"
   },

package/playground/App.vue

@@ -1,42 +1,60 @@
 <script setup>
-import { onMounted, reactive, ref } from 'vue'
+import { onMounted, reactive, nextTick } from 'vue'
 import { Repl, useStore, File } from '@opentiny/vue-repl'
 import '@opentiny/vue-repl/dist/style.css'
 
 import Editor from '@vue/repl/codemirror-editor'
-import { ButtonGroup as TinyButtonGroup, Select as TinySelect, Option as TinyOption, Notify } from '@opentiny/vue'
+import {
+  ButtonGroup as TinyButtonGroup,
+  Select as TinySelect,
+  Option as TinyOption,
+  Switch as TinySwitch,
+  Notify
+} from '@opentiny/vue'
 import { staticDemoPath, getWebdocPath } from '@/views/components/cmpConfig'
 import { fetchDemosFile } from '@/tools/utils'
 import logoUrl from './assets/opentiny-logo.svg?url'
 import GitHub from './icons/Github.vue'
 import Share from './icons/Share.vue'
 
+const VERSION = 'tiny-vue-version'
+const LAYOUT = 'playground-layout'
+const LAYOUT_REVERSE = 'playground-layout-reverse'
+
 const versions = ['3.11', '3.10', '3.9', '3.8']
-const latestVersion = versions[0]
-const cdnHost = window.localStorage.getItem('setting-cdn')
+const latestVersion = localStorage.getItem(VERSION) || versions[0]
+const cdnHost = localStorage.getItem('setting-cdn')
+const getRuntime = (version) => `${cdnHost}/@opentiny/vue@${version}/runtime/`
 
 const searchObj = new URLSearchParams(location.search)
 const tinyMode = searchObj.get('mode')
 const tinyTheme = tinyMode === 'saas' ? 'aurora' : searchObj.get('theme')
+const isMobileFirst = tinyMode === 'mobile-first'
 
 const createImportMap = (version) => {
   const imports = {
-    '@opentiny/vue': `${cdnHost}/@opentiny/vue@${version}/runtime/tiny-vue.mjs`,
-    '@opentiny/vue-icon': `${cdnHost}/@opentiny/vue@${version}/runtime/tiny-vue-icon.mjs`,
-    '@opentiny/vue-locale': `${cdnHost}/@opentiny/vue@${version}/runtime/tiny-vue-locale.mjs`,
-    '@opentiny/vue-common': `${cdnHost}/@opentiny/vue@${version}/runtime/tiny-vue-common.mjs`,
+    '@opentiny/vue': `${getRuntime(version)}tiny-vue.mjs`,
+    '@opentiny/vue-icon': `${getRuntime(version)}tiny-vue-icon.mjs`,
+    '@opentiny/vue-locale': `${getRuntime(version)}tiny-vue-locale.mjs`,
+    '@opentiny/vue-common': `${getRuntime(version)}tiny-vue-common.mjs`,
     '@opentiny/vue-theme/': `${cdnHost}/@opentiny/vue-theme@${version}/`,
     'sortablejs': `${cdnHost}/sortablejs@1.15.0/modular/sortable.esm.js`
   }
   if (['aurora', 'smb'].includes(tinyTheme)) {
     imports[`@opentiny/vue-design-${tinyTheme}`] = `${cdnHost}/@opentiny/vue-design-${tinyTheme}@${version}/index.js`
   }
+  if (isMobileFirst) {
+    imports['@opentiny/vue-icon'] = `${getRuntime(version)}tiny-vue-icon-saas.mjs`
+  }
   return {
     imports
   }
 }
 
 const getTinyTheme = (version) => {
+  if (isMobileFirst) {
+    return `${getRuntime(version)}tailwind.css`
+  }
   let theme = tinyMode === 'saas' ? 'saas' : tinyTheme
   if (!['smb', 'default', 'aurora', 'saas'].includes(theme)) {
     theme = 'default'
@@ -65,9 +83,11 @@ const store = new useStore({
   }
 })
 
+// repl 属性
 const state = reactive({
-  // repl 属性
-  layout: 'horizon',
+  layout: localStorage.getItem(LAYOUT) || 'horizon',
+  // 默认为反转，所以需要判断是否为'false'后取反
+  layoutReverse: !(localStorage.getItem(LAYOUT_REVERSE) === 'false'),
   layoutOptions: [
     { value: 'horizon', text: '水平' },
     { value: 'vertical', text: '垂直' }
@@ -81,24 +101,28 @@ const state = reactive({
 const designThemeMap = {
   aurora: 'tinyAuroraTheme',
   infinity: 'tinyInfinityTheme',
-  smb: 'tinySmbTheme',
+  smb: 'tinySmbTheme'
 }
 
 function setTinyDesign() {
   let importCode = ''
   let useCode = ''
+
+  if (isMobileFirst) {
+    useCode += 'app.provide("TinyMode", "mobile-first");\n'
+  }
   // 目前只有aurora和smb有design包
   if (['aurora', 'smb'].includes(tinyTheme)) {
     importCode += `import designConfig from '@opentiny/vue-design-${tinyTheme}';
-      import { design } from '@opentiny/vue-common';\n`,
-    useCode += 'app.provide(design.configKey, designConfig)\n'
+      import { design } from '@opentiny/vue-common';\n`
+    useCode += 'app.provide(design.configKey, designConfig);\n'
   }
 
   if (['aurora', 'infinity', 'smb'].includes(tinyTheme)) {
     const designTheme = designThemeMap[tinyTheme]
     importCode += `import TinyThemeTool from '@opentiny/vue-theme/theme-tool';
-      import { ${designTheme} } from '@opentiny/vue-theme/theme';\n`,
-    useCode += `const theme = new TinyThemeTool(${designTheme})\n`
+      import { ${designTheme} } from '@opentiny/vue-theme/theme';\n`
+    useCode += `const theme = new TinyThemeTool(${designTheme});\n`
   }
 
   state.previewOptions.customCode = {
@@ -107,11 +131,19 @@ function setTinyDesign() {
   }
 }
 
+function selectVersion(version) {
+  versionChange(version)
+  localStorage.setItem(VERSION, version)
+}
+
 function versionChange(version) {
   const importMap = createImportMap(version)
   store.state.files['import-map.json'] = new File('', JSON.stringify(importMap))
+  insertStyleDom(version)
+}
 
-  setTimeout(() => {
+function insertStyleDom(version) {
+  nextTick(() => {
     if (!document.querySelector('iframe')) return
 
     const iframeWin = document.querySelector('iframe').contentWindow
@@ -119,8 +151,19 @@ function versionChange(version) {
     link.id = 'tiny-theme'
     link.rel = 'stylesheet'
     link.href = getTinyTheme(version)
-    iframeWin.document.head.append(link)
-  }, 300)
+    iframeWin.addEventListener('DOMContentLoaded', () => {
+      iframeWin.document.head.append(link)
+    })
+  })
+}
+
+function changeLayout(layout) {
+  localStorage.setItem(LAYOUT, layout)
+}
+
+function changeReserve(isReserve) {
+  insertStyleDom(state.selectVersion)
+  localStorage.setItem(LAYOUT_REVERSE, isReserve)
 }
 
 function getDemoName(name, apiMode) {
@@ -200,11 +243,19 @@ function share() {
     <div>
       <span class="ml20">
         布局方向:
-        <tiny-button-group :data="state.layoutOptions" v-model="state.layout"></tiny-button-group>
+        <tiny-button-group
+          :data="state.layoutOptions"
+          v-model="state.layout"
+          @change="changeLayout"
+        ></tiny-button-group>
+      </span>
+      <span class="ml20">
+        布局反转:
+        <tiny-switch v-model="state.layoutReverse" mini @change="changeReserve"></tiny-switch>
       </span>
       <span class="ml20">
         OpenTiny Vue 版本:
-        <tiny-select v-model="state.selectVersion" @change="versionChange" style="width: 150px">
+        <tiny-select v-model="state.selectVersion" @change="selectVersion" style="width: 150px">
           <tiny-option v-for="item in state.versions" :key="item.value" :label="item.value" :value="item.value">
           </tiny-option>
         </tiny-select>
@@ -221,6 +272,7 @@ function share() {
     :preview-options="state.previewOptions"
     :clear-console="false"
     :layout="state.layout"
+    :layout-reverse="state.layoutReverse"
   ></Repl>
 </template>
 

package/src/App.vue

@@ -2,13 +2,18 @@
   <div class="hp100 of-hidden">
     <tiny-config-provider :design="designConfig">
       <router-view />
+      <tiny-modal :show-header="false" :show-footer="false" v-model="modalSHow" width="1400px" height="900px" resize>
+        <tiny-icon-close class="close-icon" @click="modalSHow = false"></tiny-icon-close>
+        <iframe v-if="modalSHow" width="100%" height="100%" :src="previewUrl" frameborder="0"></iframe>
+      </tiny-modal>
     </tiny-config-provider>
   </div>
 </template>
 
 <script>
-import { defineComponent, reactive, computed, onMounted, toRefs } from 'vue'
-import { ConfigProvider } from '@opentiny/vue'
+import { defineComponent, onMounted, provide, ref } from 'vue'
+import { ConfigProvider, Modal } from '@opentiny/vue'
+import { iconClose } from '@opentiny/vue-icon'
 import { appData } from './tools'
 import useTheme from './tools/useTheme'
 
@@ -16,9 +21,13 @@ export default defineComponent({
   name: 'AppVue',
   props: [],
   components: {
-    TinyConfigProvider: ConfigProvider
+    TinyConfigProvider: ConfigProvider,
+    TinyModal: Modal,
+    TinyIconClose: iconClose()
   },
   setup() {
+    const previewUrl = ref(import.meta.env.VITE_PLAYGROUND_URL)
+    const modalSHow = ref(false)
     onMounted(() => {
       // 加载header
       const common = new window.TDCommon(['#header'], {
@@ -33,10 +42,32 @@ export default defineComponent({
       common.renderHeader()
     })
     const { designConfig } = useTheme()
+
+    provide('showPreview', (url) => {
+      previewUrl.value = url
+      modalSHow.value = true
+    })
     return {
       appData,
-      designConfig
+      designConfig,
+      previewUrl,
+      modalSHow
     }
   }
 })
 </script>
+
+<style scoped lang="less">
+.close-icon.tiny-svg {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  font-size: 16px;
+  cursor: pointer;
+}
+.tiny-modal {
+  :deep(.tiny-modal__body) {
+    padding: 34px 0 0;
+  }
+}
+</style>

package/src/tools/useApiMode.js

@@ -5,7 +5,7 @@ const _modeKey = 'tiny-vue-api-mode'
 const _demoModeKey = 'tiny-vue-demo-mode'
 const apiModeState = reactive({
   apiMode: $local[_modeKey] || 'Options',
-  demoMode: $local[_demoModeKey] || 'default' // 示例展示： default:多示例， single:单示例
+  demoMode: $local[_demoModeKey] || 'single' // 示例展示： default:多示例， single:单示例
 })
 
 const apiModeFn = {

package/src/tools/utils.js

@@ -37,7 +37,8 @@ const $pub = (url) => {
  * @returns
  */
 const fetchDemosFile = (path) => {
-  return fetch(baseUrl + path, {
+  const filePath = baseUrl + path
+  return fetch(filePath, {
     method: 'GET',
     headers: {
       'Content-Type': 'text/plain;charset=UTF-8'
@@ -45,13 +46,33 @@ const fetchDemosFile = (path) => {
   }).then((res) => {
     if (res.ok) {
       return res.text().then((text) => {
-        return text.replace(/(\$\{)?import\.meta\.env\.VITE_APP_BUILD_BASE_URL(\})?/g, (str) => {
+        // 处理相对路径引入
+        text = text.replace(/import.+('|")((\.\/|\.\.\/).+)('|")/g, (...args) => {
+          const [matchStr, , relativePath, type] = args
+          const pathArr = filePath.split('/')
+          if (type === './') {
+            const relativeFilename = relativePath.replace('./', '')
+            pathArr.splice(-1, 1, relativeFilename)
+            return matchStr.replace(relativePath, pathArr.join('/'))
+          } else if (type === '../') {
+            const relativePathArr = relativePath.split('../')
+            const len = relativePathArr.length
+            pathArr.splice(-len)
+            pathArr.push(relativePathArr[len - 1])
+            return matchStr.replace(relativePath, pathArr.join('/'))
+          } else {
+            return matchStr
+          }
+        })
+        // 处理静态资源路径
+        text = text.replace(/(\$\{)?import\.meta\.env\.VITE_APP_BUILD_BASE_URL(\})?/g, (str) => {
           if (str.startsWith('$')) {
             return import.meta.env.VITE_APP_BUILD_BASE_URL
           } else {
             return `'${import.meta.env.VITE_APP_BUILD_BASE_URL}'`
           }
         })
+        return text
       })
     } else {
       throw new Error(res.statusText)

package/src/views/components/VersionTip.vue

@@ -0,0 +1,192 @@
+<template>
+  <span v-if="currentStageComputed" class="version-tip">
+    <div v-if="renderType === 'alert'">
+      <tiny-alert :type="alertTypeComputed" :closable="false">
+        <template #description>
+          <span>{{ tipComputed }}</span>
+        </template>
+      </tiny-alert>
+    </div>
+    <span v-if="renderType === 'tag'">
+      <tiny-tooltip
+        effect="light"
+        placement="top-start"
+        :open-delay="500"
+        :content="tipComputed"
+        :disabled="!tipComputed"
+      >
+        <tiny-tag size="mini" effect="dark" :type="tagTypeComputed">{{ currentStageComputed }}</tiny-tag>
+      </tiny-tooltip>
+    </span>
+  </span>
+</template>
+
+<script lang="ts">
+import type { PropType } from 'vue'
+import { defineComponent, computed } from 'vue'
+import { Tag as TinyTag, Alert as TinyAlert, Tooltip as TinyTooltip } from '@opentiny/vue'
+import { $t2 } from '../../i18n/index'
+
+enum STAGE {
+  experimental = 'experimental',
+  stable = 'stable',
+  deprecated = 'deprecated',
+  removed = 'removed'
+}
+
+interface IStageVersionMetaData {
+  version: string
+}
+
+interface IVersionMetaData {
+  [STAGE.experimental]?: IStageVersionMetaData | string
+  [STAGE.stable]?: IStageVersionMetaData | string
+  [STAGE.deprecated]?: IStageVersionMetaData | string
+  [STAGE.removed]?: IStageVersionMetaData | string
+}
+
+interface Ii18nString {
+  'zh-CN': string
+  'en-US': string
+}
+
+const alertTypeMap = {
+  [STAGE.removed]: 'error',
+  [STAGE.deprecated]: 'error',
+  [STAGE.experimental]: 'warning',
+  [STAGE.stable]: 'info'
+}
+
+const tagTypeMap = {
+  [STAGE.removed]: 'danger',
+  [STAGE.deprecated]: 'danger',
+  [STAGE.experimental]: 'warning',
+  [STAGE.stable]: 'info'
+}
+
+const cnDesMap = {
+  [STAGE.experimental]: '处于测试阶段',
+  [STAGE.stable]: '自 v{version} 起稳定提供',
+  [STAGE.deprecated]: '从 v{version} 开始被废弃',
+  [STAGE.removed]: '于 v{version} 移除'
+}
+
+const enDesMap = {
+  [STAGE.experimental]: 'in beta',
+  [STAGE.stable]: 'stable since v{version}',
+  [STAGE.deprecated]: 'deprecated since v{version}',
+  [STAGE.removed]: 'removed in v{version}'
+}
+
+// 默认的，只需要显示deprecated，experimental状态时的提示，除非声明了briefStage
+export default defineComponent({
+  components: {
+    TinyTag,
+    TinyAlert,
+    TinyTooltip
+  },
+  props: {
+    metaData: {
+      type: Object as PropType<IVersionMetaData>,
+      default: () => ({})
+    },
+    renderType: {
+      type: String as PropType<'tag' | 'alert'>,
+      default: 'alert'
+    },
+    tipSubject: {
+      type: String as PropType<'component' | 'api'>,
+      default: 'component'
+    },
+    stages: {
+      type: Array as PropType<STAGE[]>,
+      default: () => [STAGE.experimental, STAGE.deprecated, STAGE.removed]
+    },
+    alertType: {
+      type: String
+    },
+    tagType: {
+      type: String
+    },
+    briefStage: {
+      type: Object as PropType<STAGE>
+    },
+    tip: {
+      type: Object as PropType<Ii18nString>
+    },
+    extendTip: {
+      type: Object as PropType<Ii18nString>
+    }
+  },
+  setup(props) {
+    const isInStage = (stage: STAGE) => Boolean(props.metaData[stage]) && props.stages.includes(stage)
+
+    const getVersion = (stage: STAGE) => {
+      if (!props.metaData[stage]) return ''
+
+      if (typeof props.metaData[stage] === 'string') {
+        return props.metaData[stage] as string
+      } else {
+        return (props.metaData[stage] as IStageVersionMetaData).version
+      }
+    }
+
+    const currentStageComputed = computed(() => {
+      if (props.briefStage) {
+        return props.briefStage
+      }
+
+      return [STAGE.deprecated, STAGE.experimental].find(isInStage)
+    })
+
+    const generateDes = (desMap: typeof cnDesMap) => {
+      const isFilterExperimental = isInStage(STAGE.deprecated) || isInStage(STAGE.stable)
+
+      const goingStages = Object.entries(desMap).filter(([stage]) => {
+        let isPicked = isInStage(stage as STAGE)
+
+        if (stage === STAGE.experimental) {
+          isPicked = isPicked && !isFilterExperimental
+        }
+
+        return isPicked
+      })
+
+      return goingStages.map(([stage, des]) => des.replace('{version}', getVersion(stage as STAGE))).join('，')
+    }
+
+    const tipComputed = computed(() => {
+      if (props.tip) return $t2(props.tip['zh-CN'], props.tip['en-US']) as string
+
+      if (!props.metaData) return ''
+
+      const vertionDesZnCn = generateDes(cnDesMap)
+      const znChTip = `该${props.tipSubject === 'component' ? '组件' : '特性'}${vertionDesZnCn}。${props.extendTip?.['zh-CN'] || ''}`
+
+      const vertionDesEnUs = generateDes(enDesMap)
+      const enUsTip = `This ${props.tipSubject === 'component' ? 'component' : 'feature'} is ${vertionDesEnUs}. ${props.extendTip?.['en-US'] || ''}`
+
+      return $t2(znChTip, enUsTip) as string
+    })
+
+    const alertTypeComputed = computed(() => {
+      if (props.alertType) return props.alertType
+
+      return currentStageComputed.value ? alertTypeMap[currentStageComputed.value] : 'error'
+    })
+
+    const tagTypeComputed = computed(() => {
+      if (props.tagType) return props.tagType
+
+      return currentStageComputed.value ? tagTypeMap[currentStageComputed.value] : 'error'
+    })
+
+    return {
+      tipComputed,
+      currentStageComputed,
+      alertTypeComputed,
+      tagTypeComputed
+    }
+  }
+})
+</script>