@vyr/design 0.0.1

package/src/theme/index.ts

@@ -0,0 +1,155 @@
+import '../font/iconfont.css'
+import '../theme/global.less'
+import { reactive } from "vue"
+
+interface ThemeConfig {
+  whiteColor: string
+  blackColor: string
+  blueColor: string
+  greenColor: string
+  yellowColor: string
+  redColor: string
+
+  successColor: string
+  warningColor: string
+  dangerColor: string
+
+  topicColor: string
+  activeTopicColor: string
+  fontColor: string
+  titleColor: string
+  borderColor: string
+  helperColor: string
+  disabledColor: string
+  draggableColor: string
+  flashingDraggableColor: string
+
+  fontSize: { unit: string, value: number }
+  titleSize: { unit: string, value: number }
+  borderSize: { unit: string, value: number }
+  radiusSize: { unit: string, value: number }
+
+  zIndex: number
+
+  animationTime: { unit: string, value: number }
+
+  scrollBarColor: string
+
+  inputHeight: { unit: string, value: number }
+  inputRadius: { unit: string, value: number }
+  inputLRPadding: { unit: string, value: number }
+  inputFontSize: { unit: string, value: number }
+  inputIconSize: { unit: string, value: number }
+  inputBorderSize: { unit: string, value: number }
+  inputFontColor: string
+  inputBorderColor: string
+  inputPlaceholderColor: string
+  inputBackgroundColor: string
+
+  optionMargin: { unit: string, value: number }
+  optionArrowSize: { unit: string, value: number }
+  optionBackgroundColor: string
+  optionHoverBackgroundColor: string
+  optionExpandBackgroundColor: string
+  optionDisabledBackgroundColor: string
+
+  optionsScrollMargin: { unit: string, value: number }
+  optionsBorderColor: string
+  optionsBackgroundColor: string
+
+  dialogHeaderBackgroundColor: string
+
+  popoverBackgroundColor: string
+
+  notifyZIndex: number
+}
+
+const transform = (source: string, split: RegExp, replace: RegExp) => {
+  const clips = source.split(split)
+  const codes: string[] = []
+  for (const clip of clips) codes.push(clip.replace(replace, '$1-').toLowerCase())
+  return '--vyr-' + codes.join('-')
+}
+
+class Theme {
+  static config: ThemeConfig = reactive({
+    whiteColor: 'rgba(255, 255, 255, 1)',
+    blackColor: 'rgba(0, 0, 0, 1)',
+    blueColor: 'rgba(27, 143, 223, 1)',
+    greenColor: 'rgba(106, 210, 54, 1)',
+    yellowColor: 'rgba(230, 162, 60, 1)',
+    redColor: 'rgba(245, 108, 108, 1)',
+
+    successColor: 'rgba(106, 210, 54, 1)',
+    warningColor: 'rgba(230, 162, 60, 1)',
+    dangerColor: 'rgba(245, 108, 108, 1)',
+
+    topicColor: 'rgba(30, 30, 30, 1)',
+    activeTopicColor: 'rgba(27, 143, 223, 0.8)',
+    fontColor: 'rgba(255, 255, 255, 1)',
+    titleColor: 'rgba(255, 255, 255, 1)',
+    borderColor: 'rgba(46, 46, 46, 1)',
+    helperColor: 'rgba(113, 113, 113, 1)',
+    disabledColor: 'rgba(175, 175, 175, 1)',
+    draggableColor: 'rgba(27, 143, 223, 0.3)',
+    flashingDraggableColor: 'rgba(27, 143, 223, 0.8)',
+
+    fontSize: { unit: 'px', value: 12 },
+    titleSize: { unit: 'px', value: 14 },
+    borderSize: { unit: 'px', value: 1 },
+    radiusSize: { unit: 'px', value: 2 },
+
+    zIndex: 999,
+
+    animationTime: { unit: 'ms', value: 500 },
+
+    scrollBarColor: 'rgba(46, 46, 46, 1)',
+
+    inputFontSize: { unit: 'px', value: 12 },
+    inputHeight: { unit: 'px', value: 30 },
+    inputRadius: { unit: 'px', value: 2 },
+    inputLRPadding: { unit: 'px', value: 10 },
+    inputIconSize: { unit: 'px', value: 20 },
+    inputBorderSize: { unit: 'px', value: 1 },
+    inputFontColor: 'rgba(255, 255, 255, 1)',
+    inputBorderColor: 'rgba(77, 77, 77, 1)',
+    inputPlaceholderColor: 'rgba(113, 113, 113, 1)',
+    inputBackgroundColor: 'rgba(42, 42, 42, 1)',
+
+    optionMargin: { unit: 'px', value: 2 },
+    optionArrowSize: { unit: 'px', value: 18 },
+    optionBackgroundColor: 'rgba(30, 30, 30, 1)',
+    optionHoverBackgroundColor: 'rgba(55, 55, 61, 1)',
+    optionExpandBackgroundColor: 'rgba(55, 55, 61, 1)',
+    optionDisabledBackgroundColor: 'rgba(77, 77, 77, 1)',
+
+    optionsScrollMargin: { unit: 'px', value: 6 },
+    optionsBorderColor: 'rgba(77, 77, 77, 1)',
+    optionsBackgroundColor: 'rgba(30, 30, 30, 1)',
+
+    dialogHeaderBackgroundColor: 'rgba(30, 30, 30, 0.9)',
+
+    popoverBackgroundColor: 'rgba(30, 30, 30, 1)',
+
+    notifyZIndex: 2000,
+  })
+
+  static update(config: Partial<ThemeConfig>) {
+    const keys = Object.keys(config) as Array<keyof ThemeConfig>
+    const style = document.documentElement.style
+
+    const splitReg = /(?=[A-Z])/
+    const replaceReg = /(.)(?=[A-Z])/g
+    for (const key of keys) {
+      const attribute = config[key] as any
+      const value = typeof attribute === 'object' ? attribute.value + attribute.unit : attribute
+      const cssVar = transform(key, splitReg, replaceReg)
+      style.setProperty(cssVar, value)
+    }
+    Object.assign(this.config, config)
+  }
+}
+
+Theme.update(Theme.config)
+
+export { ThemeConfig, Theme }

package/src/tool/ArrayUtils.ts

@@ -0,0 +1,38 @@
+class ArrayUtils {
+
+    static insert<T extends any = any>(arr: T[], item: T) {
+        const i = arr.indexOf(item)
+        if (i === -1) arr.push(item)
+    }
+
+    static remove<T extends any = any>(arr: T[], item: T) {
+        const i = arr.indexOf(item)
+        if (i > -1) arr.splice(i, 1)
+    }
+
+    static auto<T extends any = any>(arr: T[], item: T) {
+        const i = arr.indexOf(item)
+        i === -1 ? arr.push(item) : arr.splice(i, 1)
+    }
+
+    static insertByKey<T extends any = any>(arr: T[], key: keyof T, item: T) {
+        const count = arr.length;
+        for (let i = 0; i < count; i++) {
+            if (arr[i][key] === item[key]) return
+        }
+        arr.push(item)
+    }
+
+    static removeByKey<T extends any = any, K extends keyof T = keyof T>(arr: T[], key: keyof T, value: T[K]) {
+        const count = arr.length;
+        for (let i = 0; i < count; i++) {
+            const item = arr[i]
+            if (item[key] === value) {
+                arr.splice(i, 1)
+                return
+            }
+        }
+    }
+}
+
+export { ArrayUtils }

package/src/tool/Color.ts

@@ -0,0 +1,7 @@
+import * as tinycolor from "tinycolor2"
+
+const Color = tinycolor.default
+
+export{
+    Color
+}

package/src/tool/Draggable.ts

@@ -0,0 +1,36 @@
+type DraggableEndType = 'insert' | 'insertBefore' | 'insertAfter'
+interface AdditionalData { [k: string]: any }
+interface DraggableData<T extends AdditionalData = AdditionalData> { id: string, data: T }
+
+interface Draggable<D extends AdditionalData = AdditionalData, T extends AdditionalData = D> {
+    id: string
+
+    /**对拖拽的类型进行限制 */
+    limit(dragData: DraggableData<D>, targetData: DraggableData<D>, type: DraggableEndType): DraggableEndType
+
+    updateTargetOfKey<T extends AdditionalData = AdditionalData>(key: string, value: any, target: any): void
+
+    /**拖拽组的启动器，当托拽功能准备启动拖拽组时会调用该方法。
+     * 
+     * @param dragData 准备拖动的对象
+     * @returns 返回值决定了该对象是否可被拖动
+     */
+    starter(dragData: D): boolean
+
+    /**拖拽组的验证器，当托拽对象进入目标对象`(该托拽组内的任意一个对象)`时会调用该方法。
+     * 
+     * @param targetData 进入的目标对象
+     * @returns 返回值决定了托拽对象能否被放置在目标对象
+     */
+    validator(dragData: DraggableData<D>, targetData: DraggableData<T>): boolean
+
+    /**成功完成托拽时该方法将被执行 */
+    finished(dragData: DraggableData<D>, targetData: DraggableData<T>, type: DraggableEndType): void
+}
+
+export {
+    DraggableEndType,
+    AdditionalData,
+    DraggableData,
+    Draggable
+}

package/src/tool/Listener.ts

@@ -0,0 +1,59 @@
+type DeafultCallback = (...args: any[]) => any
+type CallbackCollection<T extends {} = {}> = { [k: string]: DeafultCallback } & T
+
+interface listenOptions {
+  once?: boolean
+  insertIndex?: number
+}
+
+class Listener<T extends {} = {}> {
+  private registrys: any = {}
+
+  listen<K extends keyof T>(type: K, callback: T[K], options?: listenOptions): () => void
+  listen(type: string, callback: DeafultCallback, options?: listenOptions): () => void
+  listen<K extends keyof T>(type: K | string, callback?: T[K], options: listenOptions = {}) {
+
+    let register = this.registrys[type]
+    if (register === undefined) {
+      register = []
+      this.registrys[type] = register
+    }
+    const insertIndex = options.insertIndex === undefined ? register.length : options.insertIndex
+
+    const row = register.find((r: any) => r.callback === callback)
+    if (!row) register.splice(insertIndex, 0, { once: options.once ?? false, callback })
+    const unlisten = () => this.unlisten(type as any, callback)
+    return unlisten
+  }
+
+  unlisten<K extends keyof T>(type: K, callback: T[K]): void
+  unlisten(type: string, callback: DeafultCallback): void
+  unlisten<K extends keyof T>(type: K, callback: T[K]) {
+    let registry = this.registrys[type]
+    if (registry === undefined) return
+
+    for (let i = 0; i < registry.length; i++) {
+      if (registry[i].callback !== callback) continue
+
+      registry.splice(i, 1)
+      if (registry.length === 0) delete this.registrys[type]
+      return
+    }
+  }
+
+  trigger<K extends keyof T>(type: K, ...args: Parameters<CallbackCollection<T>[K]>): void
+  trigger(type: string, ...args: any[]): void
+  trigger<K extends keyof T>(type: K, ...args: Parameters<CallbackCollection<T>[K]>) {
+    let registry = this.registrys[type]
+    if (registry === undefined) return //console.warn(`无法触发该事件 ${type as string}`)
+
+    if (registry.length === 0) return
+
+    registry = [...this.registrys[type]]
+    for (let i = 0; i < registry.length; i++) {
+      registry[i].callback(...args as any)
+      if (registry[i].once === true) this.unlisten(type, registry[i].callback)
+    }
+  }
+}
+export { Listener }

package/src/tool/index.ts

@@ -0,0 +1,4 @@
+export * from './ArrayUtils'
+export * from './Color'
+export * from './Listener'
+export * from './Draggable'