refactor: utils

README.md

@@ -16,6 +16,29 @@
 
 ## Tips
 
+### Route Meta
+
+``` js
+<route>
+{
+  "meta": {}
+}
+</route>
+```
+
+**layout**
+
+| key | type |
+| --- | ---- |
+| d2admin.layout.dashboard.customBody | boolean |
+
+**menu**
+
+| key | type |
+| --- | ---- |
+| d2admin.menu.index | boolean |
+| d2admin.menu.title | string |
+
 ### Syntax Highlighting `<route>`
 
 To enable syntax highlighting `<route>` in VS Code using [Vetur's Custom Code Blocks](https://vuejs.github.io/vetur/highlighting.html#custom-block) add the following snippet to your preferences...

d2/components/d2/admin/layout/dashboard/container/index.vue

@@ -22,8 +22,8 @@
 import { computed, onMounted, onUpdated, ref, unref, watchPostEffect } from 'vue'
 import { useCssVar, useElementBounding } from '@vueuse/core'
 import makeClassnames from 'classnames'
-import { makeNameByUrl } from 'd2/utils/component.js'
-import { px, convertCssUnit } from 'd2/utils/css.js'
+import { makeNameByUrl } from 'd2/utils/framework/component.js'
+import { px, convertCssUnit } from 'd2/utils/browser/css.js'
 
 export default {
   name: makeNameByUrl(import.meta.url),

d2/components/d2/admin/layout/dashboard/header-action/control.vue

@@ -11,7 +11,7 @@
 </template>
 
 <script>
-import { makeNameByUrl } from 'd2/utils/component.js'
+import { makeNameByUrl } from 'd2/utils/framework/component.js'
 
 export default {
   name: makeNameByUrl(import.meta.url)

d2/components/d2/admin/layout/dashboard/header-action/lock.vue

@@ -11,7 +11,7 @@
 </template>
 
 <script>
-import { makeNameByUrl } from 'd2/utils/component.js'
+import { makeNameByUrl } from 'd2/utils/framework/component.js'
 
 export default {
   name: makeNameByUrl(import.meta.url)

d2/components/d2/admin/layout/dashboard/header-action/news.vue

@@ -11,7 +11,7 @@
 </template>
 
 <script>
-import { makeNameByUrl } from 'd2/utils/component.js'
+import { makeNameByUrl } from 'd2/utils/framework/component.js'
 
 export default {
   name: makeNameByUrl(import.meta.url)

d2/components/d2/admin/layout/dashboard/header-action/user.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script>
-import { makeNameByUrl } from 'd2/utils/component.js'
+import { makeNameByUrl } from 'd2/utils/framework/component.js'
 import { computed, unref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useD2AdminLayoutDashboardStore } from 'd2/components/d2/admin/layout/dashboard/store/index.js'

d2/components/d2/admin/layout/dashboard/index.vue

@@ -49,7 +49,7 @@
 </template>
 
 <script>
-import { makeNameByUrl, makeClassNameByUrl } from 'd2/utils/component.js'
+import { makeNameByUrl, makeClassNameByUrl } from 'd2/utils/framework/component.js'
 import { get } from 'lodash-es'
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'

d2/components/d2/admin/layout/dashboard/menu/header.vue

@@ -19,14 +19,14 @@
 </template>
 
 <script>
-import { makeNameByUrl } from 'd2/utils/component.js'
+import { makeNameByUrl } from 'd2/utils/framework/component.js'
 import { useD2AdminMenuSecondaryStore } from 'd2/store/menu-secondary.js'
 import { computed } from 'vue'
 import { useRoute } from 'vue-router'
 import { compact } from 'lodash-es'
 import { storeToRefs } from 'pinia'
 import { useMenu } from 'd2/use/menu.js'
-import { getMenuId } from 'd2/utils/menu.js'
+import { getMenuId } from 'd2/utils/framework/menu.js'
 
 export default {
   name: makeNameByUrl(import.meta.url),

d2/components/d2/admin/layout/dashboard/menu/render/index.vue

@@ -16,8 +16,8 @@
 </template>
 
 <script>
-import { makeNameByUrl } from 'd2/utils/component.js'
-import { hasChildren } from 'd2/utils/menu.js'
+import { makeNameByUrl } from 'd2/utils/framework/component.js'
+import { hasChildren } from 'd2/utils/framework/menu.js'
 
 export default {
   name: makeNameByUrl(import.meta.url),

d2/components/d2/admin/layout/dashboard/menu/render/item.vue

@@ -14,9 +14,9 @@
 </template>
 
 <script>
-import { makeNameByUrl } from 'd2/utils/component.js'
+import { makeNameByUrl } from 'd2/utils/framework/component.js'
 import { defineComponent } from 'vue'
-import { getMenuId, getMenuTitle, getMenuIcon } from 'd2/utils/menu.js'
+import { getMenuId, getMenuTitle, getMenuIcon } from 'd2/utils/framework/menu.js'
 
 export default defineComponent({
   name: makeNameByUrl(import.meta.url),

d2/components/d2/admin/layout/dashboard/menu/render/sub.vue

@@ -21,9 +21,9 @@
 </template>
 
 <script>
-import { makeNameByUrl } from 'd2/utils/component.js'
+import { makeNameByUrl } from 'd2/utils/framework/component.js'
 import { defineComponent } from 'vue'
-import { getMenuId, getMenuTitle, getMenuIcon, getMenuChildren } from 'd2/utils/menu.js'
+import { getMenuId, getMenuTitle, getMenuIcon, getMenuChildren } from 'd2/utils/framework/menu.js'
 
 export default defineComponent({
   name: makeNameByUrl(import.meta.url),

d2/components/d2/admin/layout/dashboard/menu/side.vue

@@ -27,11 +27,11 @@ import { useRoute } from 'vue-router'
 import { useCssVar } from '@vueuse/core'
 import { compact } from 'lodash-es'
 import { storeToRefs } from 'pinia'
-import { makeNameByUrl } from 'd2/utils/component.js'
-import { convertCssUnit } from 'd2/utils/css.js'
+import { makeNameByUrl } from 'd2/utils/framework/component.js'
+import { convertCssUnit } from 'd2/utils/browser/css.js'
 import { useD2AdminMenuMainStore } from 'd2/store/menu-main.js'
 import { useMenu } from 'd2/use/menu.js'
-import { getMenuId } from 'd2/utils/menu.js'
+import { getMenuId } from 'd2/utils/framework/menu.js'
 import { useD2AdminLayoutDashboardStore } from 'd2/components/d2/admin/layout/dashboard/store/index.js'
 
 export default {

d2/components/d2/break-point/index.vue

@@ -5,7 +5,7 @@
 <script>
 import { unref, reactive, defineComponent, computed } from 'vue'
 import { mapValues } from 'lodash-es'
-import { makeName } from 'd2/utils/component.js'
+import { makeName } from 'd2/utils/framework/component.js'
 import { useBreakPoint } from 'd2/use/break-point.js'
 import { useResponsive } from 'd2/use/responsive.js'
 

d2/components/d2/config/index.jsx

@@ -1,7 +1,7 @@
 import { isFunction, keys, mapValues, isEqual, last, isUndefined } from 'lodash-es'
 import { defineComponent, reactive, computed, watch } from 'vue'
 import { useContext } from 'd2/use/context.js'
-import { makeName } from 'd2/utils/component.js'
+import { makeName } from 'd2/utils/framework/component.js'
 import { breakPoints } from 'd2/utils/const/break-point.js'
 
 const name = 'config'

d2/components/d2/flex/index.jsx

@@ -1,8 +1,8 @@
 import makeClassnames from 'classnames'
 import { defineComponent, unref, computed } from 'vue'
 import { pickBy, isUndefined } from 'lodash-es'
-import { isNumberLike } from 'd2/utils/number.js'
-import { makeName, makeClassName } from 'd2/utils/component.js'
+import { isNumberLike } from 'd2/utils/lang/number.js'
+import { makeName, makeClassName } from 'd2/utils/framework/component.js'
 import { isFlexProp } from 'd2/utils/const/flex.js'
 
 const name = 'flex'

d2/components/d2/icon/index.jsx

@@ -1,9 +1,9 @@
 import makeClassnames from 'classnames'
 import { defineComponent, ref, unref, computed, watch, onMounted, nextTick, onBeforeUpdate } from 'vue'
 import iconify from '@iconify/iconify'
-import { clearElement } from 'd2/utils/dom.js'
+import { clearElement } from 'd2/utils/browser/dom.js'
 import { useConfig } from 'd2/components/d2/config/use.js'
-import { makeName, makeClassName } from 'd2/utils/component.js'
+import { makeName, makeClassName } from 'd2/utils/framework/component.js'
 
 const name = 'icon'
 

d2/components/d2/scroll/index.jsx

@@ -1,7 +1,7 @@
 import makeClassnames from 'classnames'
 import { defineComponent, ref, unref, computed, watch, onBeforeUnmount, onMounted } from 'vue'
 import { kebabCase, fromPairs, mergeWith } from 'lodash-es'
-import { makeName, makeClassName } from 'd2/utils/component.js'
+import { makeName, makeClassName } from 'd2/utils/framework/component.js'
 import os from 'overlayscrollbars'
 import 'overlayscrollbars/css/OverlayScrollbars.css'
 

d2/components/d2/size-sensor/index.jsx

@@ -1,6 +1,6 @@
 import { defineComponent, getCurrentInstance, onBeforeUnmount, onMounted } from 'vue'
 import { bind } from 'size-sensor'
-import { makeName } from 'd2/utils/component.js'
+import { makeName } from 'd2/utils/framework/component.js'
 
 const name = 'size-sensor'
 

d2/components/d2/svg/index.jsx

@@ -2,9 +2,9 @@ import makeClassnames from 'classnames'
 import { defineComponent, unref, computed } from 'vue'
 import { omitBy, isEmpty } from 'lodash-es'
 import { useConfig } from 'd2/components/d2/config/use.js'
-import { makeName, makeClassName } from 'd2/utils/component.js'
-import { px } from 'd2/utils/css.js'
-import { warn } from 'd2/utils/error.js'
+import { makeName, makeClassName } from 'd2/utils/framework/component.js'
+import { px } from 'd2/utils/browser/css.js'
+import { warn } from 'd2/utils/framework/error.js'
 import { componentName as configComponentName } from 'd2/components/d2/config/index.jsx'
 
 const name = 'svg'

d2/components/demo/break-point-display-item.vue

@@ -23,7 +23,7 @@
 </template>
 
 <script>
-import { makeNameByUrl } from 'd2/utils/component.js'
+import { makeNameByUrl } from 'd2/utils/framework/component.js'
 
 export default {
   name: makeNameByUrl(import.meta.url),

d2/components/demo/break-point-display.vue

@@ -22,7 +22,7 @@
 </template>
 
 <script>
-import { makeNameByUrl } from 'd2/utils/component.js'
+import { makeNameByUrl } from 'd2/utils/framework/component.js'
 import { breakPointsName } from 'd2/utils/const/break-point.js'
 
 export default {

d2/components/demo/page-placeholder.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script>
-import { makeNameByUrl } from 'd2/utils/component.js'
+import { makeNameByUrl } from 'd2/utils/framework/component.js'
 import { useRoute } from 'vue-router'
 import { computed } from 'vue'
 

d2/components/demo/playground-controller.vue

@@ -26,7 +26,7 @@
 </template>
 
 <script>
-import { makeNameByUrl } from 'd2/utils/component.js'
+import { makeNameByUrl } from 'd2/utils/framework/component.js'
 
 export default {
   name: makeNameByUrl(import.meta.url),

d2/components/demo/section.vue

@@ -14,7 +14,7 @@
 </template>
 
 <script>
-import { makeNameByUrl } from 'd2/utils/component.js'
+import { makeNameByUrl } from 'd2/utils/framework/component.js'
 
 export default {
   name: makeNameByUrl(import.meta.url),

d2/menus/index.js

@@ -1,4 +1,4 @@
-import { Menu, createRouteMenus } from 'd2/utils/menu.js'
+import { Menu, createRouteMenus } from 'd2/utils/framework/menu.js'
 
 const menus = ({ title, icon, path }) => (
   new Menu(title)

d2/store/utils/menu.js

@@ -1,6 +1,6 @@
 import { fromPairs } from 'lodash-es'
 import { defineStore } from 'pinia'
-import { flattenMenus, getMenuId, getMenuUrl, getMenuPidIndex } from 'd2/utils/menu.js'
+import { flattenMenus, getMenuId, getMenuUrl, getMenuPidIndex } from 'd2/utils/framework/menu.js'
 
 export function defineD2AdminMenuStore (namespace) {
   return defineStore(namespace, {

d2/utils/const/flex.js

@@ -1,4 +1,4 @@
-import { isEmptyString } from 'd2/utils/string.js'
+import { isEmptyString } from 'd2/utils/lang/string.js'
 
 export const flexProps = {
   dir: ['top', 'right', 'bottom', 'left'],

d2/utils/framework/component.js

@@ -1,6 +1,6 @@
-import { id } from 'd2/utils/id.js'
+import { id } from 'd2/utils/helper/id.js'
 import { kebabCase } from 'lodash-es'
-import { pascalCase } from 'd2/utils/string.js'
+import { pascalCase } from 'd2/utils/lang/string.js'
 
 /**
  * Format component name

d2/utils/framework/menu.js

@@ -1,6 +1,6 @@
 import { nanoid } from 'nanoid'
 import { isArray, cloneDeep, omit, get, pick } from 'lodash-es'
-import { flattenObjectArray } from 'd2/utils/array.js'
+import { flattenObjectArray } from 'd2/utils/lang/array.js'
 import routes from 'virtual:generated-pages'
 
 export const _k_id = '_id'

src/menus/index.js

@@ -1,4 +1,4 @@
-import { Menu } from 'd2/utils/menu.js'
+import { Menu } from 'd2/utils/framework/menu.js'
 import {
   indexMenu,
   dashboardIndexMenu,