feat: remove v-dollar

d2-admin/components/d2/icon/index.jsx

@@ -1,6 +1,5 @@
-import { $ } from 'v-dollar'
 import makeClassnames from 'classnames'
-import { defineComponent, onMounted, nextTick, onBeforeUpdate } from 'vue'
+import { defineComponent, ref, unref, computed, watch, onMounted, nextTick, onBeforeUpdate } from 'vue'
 import iconify from '@iconify/iconify'
 import { clearElement } from 'd2-projects/d2-utils/dom.js'
 import { useConfig } from 'd2-projects/d2-config/index.js'
@@ -18,45 +17,54 @@ export default defineComponent({
     name: { type: String, default: '' }
   },
   setup (props) {
-    const wrapper = $(null)
+    const wrapper = ref(null)
 
     const { iconCollection } = useConfig()
 
-    const collection = $(() => props.collection || $(iconCollection))
+    const collection = computed(() => props.collection || unref(iconCollection))
 
-    const iconNameComplete = $(() => {
+    const iconNameComplete = computed(() => {
       // like collection:icon
       if (props.name.indexOf(':') > 0) return props.name
       // The icon name does not contain the icon collection name
       // Try to get it from another way
-      return $(collection) ? `${$(collection)}:${props.name}` : props.name
+      return unref(collection) ? `${unref(collection)}:${props.name}` : props.name
     })
 
     async function load () {
-      clearElement($(wrapper))
+      clearElement(unref(wrapper))
       await nextTick()
-      const svg = iconify.renderSVG($(iconNameComplete), {})
+      const svg = iconify.renderSVG(unref(iconNameComplete), {})
       if (svg) {
-        $(wrapper).appendChild(svg)
+        unref(wrapper).appendChild(svg)
       } else {
         const span = document.createElement('span')
         span.className = 'iconify'
-        span.dataset.icon = $(iconNameComplete)
-        $(wrapper).appendChild(span)
+        span.dataset.icon = unref(iconNameComplete)
+        unref(wrapper).appendChild(span)
       }
     }
 
-    const classnames = $(() => makeClassnames(classname, {}))
+    const classnames = computed(() => makeClassnames(classname, {}))
 
     onMounted(load)
     onBeforeUpdate(() => {
       wrapper.value = unll
     })
-    $(() => props.collection, load, { flush: 'post' })
-    $(() => props.icon, load, { flush: 'post' })
+    watch(() => props.collection, load, { flush: 'post' })
+    watch(() => props.icon, load, { flush: 'post' })
 
-    return () => (
-      <span class={ $(classnames) } ref={ wrapper }/>
+    return {
+      wrapper,
+      classnames
+    }
+  },
+  render () {
+    const {
+      classnames
+    } = this
+    return (
+      <span class={ classnames } ref="wrapper"/>
     )
   }
 })

d2-projects/d2-admin-mock/index.js

@@ -1 +0,0 @@
-export default {}

d2-projects/d2-utils/dom.js

@@ -1,233 +1,3 @@
-import { camelCase, isObject } from 'lodash-es'
-import { isServer } from './is-server.js'
-
-const trim = function (s) {
-  return (s || '').replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, '')
-}
-
-export const on = function(
-  element,
-  event,
-  handler,
-  useCapture = false,
-) {
-  if (element && event && handler) {
-    element.addEventListener(event, handler, useCapture)
-  }
-}
-
-export const off = function(
-  element,
-  event,
-  handler,
-  useCapture = false,
-) {
-  if (element && event && handler) {
-    element.removeEventListener(event, handler, useCapture)
-  }
-}
-
-export const once = function(
-  el,
-  event,
-  fn,
-) {
-  const listener = function(...args) {
-    if (fn) {
-      fn.apply(this, args)
-    }
-    off(el, event, listener)
-  }
-  on(el, event, listener)
-}
-
-export function hasClass(el, cls) {
-  if (!el || !cls) return false
-  if (cls.indexOf(' ') !== -1)
-    throw new Error('className should not contain space.')
-  if (el.classList) {
-    return el.classList.contains(cls)
-  } else {
-    return (' ' + el.className + ' ').indexOf(' ' + cls + ' ') > -1
-  }
-}
-
-export function addClass(el, cls) {
-  if (!el) return
-  let curClass = el.className
-  const classes = (cls || '').split(' ')
-
-  for (let i = 0, j = classes.length; i < j; i++) {
-    const clsName = classes[i]
-    if (!clsName) continue
-
-    if (el.classList) {
-      el.classList.add(clsName)
-    } else if (!hasClass(el, clsName)) {
-      curClass += ' ' + clsName
-    }
-  }
-  if (!el.classList) {
-    el.className = curClass
-  }
-}
-
-export function removeClass(el, cls) {
-  if (!el || !cls) return
-  const classes = cls.split(' ')
-  let curClass = ' ' + el.className + ' '
-
-  for (let i = 0, j = classes.length; i < j; i++) {
-    const clsName = classes[i]
-    if (!clsName) continue
-
-    if (el.classList) {
-      el.classList.remove(clsName)
-    } else if (hasClass(el, clsName)) {
-      curClass = curClass.replace(' ' + clsName + ' ', ' ')
-    }
-  }
-  if (!el.classList) {
-    el.className = trim(curClass)
-  }
-}
-
-// Here I want to use the type CSSStyleDeclaration, but the definition for CSSStyleDeclaration
-// has { [index: number]: string } in its type annotation, which does not satisfy the method
-// camelCase(s: string)
-// Same as the return type
-export const getStyle = function(
-  element,
-  styleName,
-) {
-  if (isServer) return
-  if (!element || !styleName) return null
-  styleName = camelCase(styleName)
-  if (styleName === 'float') {
-    styleName = 'cssFloat'
-  }
-  try {
-    const style = element.style[styleName]
-    if (style) return style
-    const computed = document.defaultView.getComputedStyle(element, '')
-    return computed ? computed[styleName] : ''
-  } catch (e) {
-    return element.style[styleName]
-  }
-}
-
-export function setStyle(
-  element,
-  styleName,
-  value,
-) {
-  if (!element || !styleName) return
-
-  if (isObject(styleName)) {
-    Object.keys(styleName).forEach(prop => {
-      setStyle(element, prop, styleName[prop])
-    })
-  } else {
-    styleName = camelCase(styleName)
-    element.style[styleName] = value
-  }
-}
-
-export function removeStyle(element, style) {
-  if (!element || !style) return
-
-  if (isObject(style)) {
-    Object.keys(style).forEach(prop => {
-      setStyle(element, prop, '')
-    })
-  } else {
-    setStyle(element, style, '')
-  }
-}
-
-export const isScroll = (
-  el,
-  isVertical,
-) => {
-  if (isServer) return
-  const determinedDirection = isVertical === null || isVertical === undefined
-  const overflow = determinedDirection
-    ? getStyle(el, 'overflow')
-    : isVertical
-      ? getStyle(el, 'overflow-y')
-      : getStyle(el, 'overflow-x')
-
-  return overflow.match(/(scroll|auto)/)
-}
-
-export const getScrollContainer = (
-  el,
-  isVertical,
-) => {
-  if (isServer) return
-
-  let parent = el
-  while (parent) {
-    if ([window, document, document.documentElement].includes(parent)) {
-      return window
-    }
-    if (isScroll(parent, isVertical)) {
-      return parent
-    }
-    parent = parent.parentNode
-  }
-  return parent
-}
-
-export const isInContainer = (
-  el,
-  container,
-) => {
-  if (isServer || !el || !container) return false
-
-  const elRect = el.getBoundingClientRect()
-  let containerRect
-
-  if (
-    [window, document, document.documentElement, null, undefined].includes(
-      container,
-    )
-  ) {
-    containerRect = {
-      top: 0,
-      right: window.innerWidth,
-      bottom: window.innerHeight,
-      left: 0,
-    }
-  } else {
-    containerRect = container.getBoundingClientRect()
-  }
-  return (
-    elRect.top < containerRect.bottom &&
-    elRect.bottom > containerRect.top &&
-    elRect.right > containerRect.left &&
-    elRect.left < containerRect.right
-  )
-}
-
-export const getOffsetTop = (el) => {
-  let offset = 0
-  let parent = el
-
-  while (parent) {
-    offset += parent.offsetTop
-    parent = parent.offsetParent
-  }
-
-  return offset
-}
-
-export const getOffsetTopDistance = (el, containerEl) => {
-  return Math.abs(getOffsetTop(el) - getOffsetTop(containerEl))
-}
-
-export const stop = e => e.stopPropagation()
-
 export const isElement = el => {
   return typeof HTMLElement === 'object' ?
     el instanceof HTMLElement :