@windwalker-io/unicorn-next 0.1.0

package/src/unicorn.ts

@@ -0,0 +1,63 @@
+import { InjectionKey, UnicornApp } from './app';
+import { polyfill } from './polyfill';
+import { removeCloak } from './utilities';
+
+export * from './data';
+export * from './events';
+export * from './service';
+export * from './composable';
+export * from './plugin';
+
+export type { UnicornApp };
+
+let app: UnicornApp;
+
+export function createUnicorn(): UnicornApp {
+  polyfill();
+  removeCloak();
+
+  return app = new UnicornApp();
+}
+
+export function createUnicornWithPlugins(): UnicornApp {
+  const app = createUnicorn();
+
+  // app.use(UnicornUI);
+
+  // app.use(UnicornDom);
+
+  return app;
+}
+
+export function useUnicorn(instance?: UnicornApp): UnicornApp {
+  if (instance) {
+    app = instance;
+  }
+
+  return app ??= createUnicorn();
+}
+
+export const useInject: typeof UnicornApp.prototype.inject = <T = any>(id: InjectionKey<T>, def?: T): T => {
+  return useUnicorn().inject<T>(id, def);
+}
+
+export function pushUnicornToGlobal(app?: UnicornApp) {
+  // @ts-ignore
+  window.u = app ?? useUnicorn();
+}
+
+export function useMacro(name: string, handler: (...args: any[]) => any) {
+  useUnicorn().macro(name, handler);
+}
+
+export async function useLegacy(app?: UnicornApp) {
+  app ??= useUnicorn();
+
+  pushUnicornToGlobal(app);
+
+  const { useLegacyMethods } = await import('./legacy/legacy');
+
+  await useLegacyMethods(app);
+
+  return app;
+}

package/src/utilities/arr.ts

@@ -0,0 +1,25 @@
+
+export function isPlainObject(val: any): val is Record<string, any> {
+  return val && typeof val === "object" && !Array.isArray(val);
+}
+
+export function mergeDeep<T = Record<string, any>>(target: Partial<T>, ...sources: any[]): T {
+  let out: any = isPlainObject(target) ? { ...target } : target;
+
+  for (const source of sources) {
+    if (Array.isArray(source)) {
+      out = (Array.isArray(out) ? out.concat(source) : source) as T;
+      continue;
+    }
+    if (isPlainObject(source)) {
+      out = { ...(isPlainObject(out) ? out : {}) };
+      for (const key of Object.keys(source)) {
+        out[key] =
+          key in out ? mergeDeep(out[key], source[key]) : source[key];
+      }
+      continue;
+    }
+    out = source as T;
+  }
+  return out;
+}

package/src/utilities/base.ts

@@ -0,0 +1,9 @@
+import { selectAll } from '../service';
+
+export function removeCloak() {
+  if (globalThis.document == null) {
+    return;
+  }
+
+  selectAll('[uni-cloak]', (el) => el.removeAttribute('uni-cloak'));
+}

package/src/utilities/data.ts

@@ -0,0 +1,48 @@
+
+export function getData(element: Element, name: string | undefined = undefined) {
+  prepareData(element);
+
+  if (name === undefined) {
+    return element.__unicorn;
+  }
+
+  return element.__unicorn[name];
+}
+
+export function setData(element: Element, name: string, value: any) {
+  prepareData(element);
+  element.__unicorn[name] = value;
+}
+
+export function defData(element: Element, name: string, defCallback: Function) {
+  prepareData(element);
+  element.__unicorn[name] = element.__unicorn[name] || defCallback(element);
+
+  return element.__unicorn[name];
+}
+
+export function removeData(element: Element, name: string) {
+  prepareData(element);
+
+  const v = element.__unicorn[name];
+  delete element.__unicorn[name];
+
+  return v;
+}
+
+export function prepareData<T extends Node>(element: T): T {
+  if (!element) {
+    return element;
+  }
+
+  element.__unicorn = element.__unicorn || {};
+  return element;
+}
+
+declare global {
+  interface Node {
+    __unicorn?: any;
+  }
+}
+
+

package/src/utilities/index.ts

@@ -0,0 +1,5 @@
+export * from './arr';
+export * from './data';
+export * from './base';
+export * from './tree';
+

package/src/utilities/tree.ts

@@ -0,0 +1,20 @@
+import { TreeNode } from '../types';
+
+export function flattenChildren(children: TreeNode[]) {
+  const flat: TreeNode[] = [];
+
+  function loopChildren(children: TreeNode[]) {
+    for (const child of children) {
+      if (child.children.length === 0) {
+        flat.push(child);
+        continue;
+      }
+
+      loopChildren(child.children);
+    }
+  }
+
+  loopChildren(children);
+  return flat;
+}
+

package/src/vue/components/ModalTree/ModalTreeApp.vue

@@ -0,0 +1,175 @@
+<script lang="ts" setup>
+import { cloneDeep } from 'lodash-es';
+import { computed, provide, ref, watch } from 'vue';
+import { forceArray } from '../../../service';
+import {
+  ValueGetter,
+  ModalTreeSource,
+  TitleGetter,
+  TreeNode,
+  SearchMatcher,
+  MaybeArray,
+  MaybePromise
+} from '../../../types';
+import TreeModal from './TreeModal.vue';
+
+const props = withDefaults(
+  defineProps<{
+    id?: string;
+    name?: string;
+    title?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    value?: MaybeArray<string | number>;
+    source?: ModalTreeSource;
+    items?: MaybeArray<TreeNode> | (() => MaybePromise<MaybeArray<TreeNode>>);
+    valueGetter?: ValueGetter;
+    titleGetter?: TitleGetter;
+    searchMatcher?: SearchMatcher;
+    modalTitle?: string;
+    vertical?: boolean;
+    branchSelectable?: boolean;
+    selectAllChildren?: boolean;
+    placeholder?: string;
+    multiple?: boolean;
+    buttonText?: string;
+    itemClass?: string;
+    searchText?: string;
+  }>(),
+  {
+    branchSelectable: false,
+    selectAllChildren: false,
+    placeholder: '- No selected -',
+    multiple: false,
+    buttonText: 'Select',
+    itemClass: 'badge bg-primary badge-pill',
+    searchText: 'Search',
+    valueGetter: (item: any) => item.id,
+    titleGetter: (item: any) => item.title,
+  }
+);
+
+provide('id', props.id);
+provide('name', props.name);
+provide('multiple', props.multiple);
+provide('valueGetter', props.valueGetter);
+provide('titleGetter', props.titleGetter);
+provide('searchMatcher', props.searchMatcher ?? defaultSearchMatcher);
+
+function defaultSearchMatcher(item: any, q: string) {
+  return props.titleGetter(item).toLowerCase().includes(q.toLowerCase());
+}
+
+const selected = ref<TreeNode[]>([]);
+const value = ref<(string|number)[]>(forceArray(props.value));
+
+// Modal
+const treeModalOpen = ref(false);
+
+function openSelector() {
+  treeModalOpen.value = true;
+}
+
+function deleteItem(i: number, node: TreeNode) {
+  selected.value = selected.value.filter((it: TreeNode) => props.valueGetter(it.value) !== props.valueGetter(node.value));
+}
+
+function handleSelected(items: any[]) {
+  selected.value = cloneDeep(items);
+}
+
+watch(() => props.items, async (v) => {
+  if (typeof v === 'function') {
+    v = await v();
+  }
+
+  selected.value = forceArray(v).filter((node: TreeNode) => {
+    return value.value.includes(props.valueGetter(node.value));
+  });
+}, { immediate: true });
+
+const selectedValues = computed(() => {
+  return selected.value.map(node => props.valueGetter(node.value));
+});
+
+const canModify = computed(() => {
+  return !props.readonly && !props.disabled;
+});
+
+</script>
+
+<template>
+  <div class="c-modal-tree">
+    <div class="c-modal-tree__container p-2 d-flex flex-column"
+      :class="[ vertical ? '' : 'flex-md-row' ]">
+      <div v-if="canModify" class="me-2 mb-2"
+        :class="{ 'mb-md-0': !vertical }">
+        <div class="btn-group">
+          <button class="btn btn-secondary btn-sm btn-rounded text-nowrap" type="button"
+            @click="openSelector">
+            {{ buttonText }}
+          </button>
+          <button class="btn btn-secondary btn-sm btn-rounded" type="button"
+            @click="selected = []">
+            <span class="fa fa-times"></span>
+          </button>
+        </div>
+      </div>
+
+      <div v-if="selected.length > 0">
+        <TransitionGroup name="fade">
+          <span v-for="(node, i) of selected"
+            class="me-2 mb-2 c-item"
+            :class="itemClass"
+            :key="valueGetter(node.value)"
+            style="animation-duration: .3s">
+            <span>{{ titleGetter(node.value) }}</span>
+            <span type="button" v-if="canModify"
+              @click.prevent="deleteItem(i, node)" class="ms-2" style="cursor: pointer">
+              <span class="fa fa-times"></span>
+            </span>
+          </span>
+        </TransitionGroup>
+      </div>
+      <div v-else class="text-muted">
+        {{ placeholder }}
+      </div>
+    </div>
+
+    <select multiple
+      style="display: none;"
+      ref="input"
+      :id="id"
+      :name="name"
+      :disabled="disabled"
+      :readonly="readonly"
+      v-bind="$attrs"
+    >
+      <option v-for="id of selectedValues" :value="id" :selected="true">{{ id }}</option>
+    </select>
+
+    <TreeModal
+      :open="treeModalOpen"
+      @hide="treeModalOpen = false"
+      :id="id"
+      :title="modalTitle"
+      :source="source"
+      :value="selectedValues"
+      :branchSelectable
+      v-bind="$attrs"
+      :disabled="disabled"
+      :readonly="readonly"
+      :search-text="searchText"
+      @selected="handleSelected"
+    />
+  </div>
+</template>
+
+<style scoped>
+.c-item {
+  padding-left: .75rem;
+  padding-right: .75rem;
+  padding-top: .5rem;
+  padding-bottom: .5rem;
+}
+</style>

package/src/vue/components/ModalTree/TreeItem.vue

@@ -0,0 +1,262 @@
+<script setup lang="ts">
+import { type ComponentPublicInstance, type ComputedRef, computed, inject, nextTick, onBeforeUpdate, onMounted, ref, watch } from 'vue';
+import { Vue3SlideUpDown } from 'vue3-slide-up-down';
+import { TitleGetter, TreeNode, ValueGetter } from '../../../types';
+import { flattenChildren } from '../../../utilities';
+import TreeItem from './TreeItem.vue';
+
+const props = withDefaults(
+  defineProps<{
+    node: TreeNode;
+    level?: number;
+    branchSelectable?: boolean;
+  }>(),
+  {
+    level: 1,
+    branchSelectable: false,
+  }
+);
+
+const emit = defineEmits<{
+  change: [checked: boolean];
+  input: [checked: boolean];
+}>();
+
+const node = ref<TreeNode>(props.node);
+// const selectNode = inject<(node: TreeNode, select: boolean) => any>('selectNode');
+const selectedValues = inject<ComputedRef<(string | number)[]>>('selectedValues');
+const id = inject('id');
+const multiple = inject('multiple');
+const valueGetter = inject<ValueGetter>('valueGetter');
+const titleGetter = inject<TitleGetter>('titleGetter');
+
+const selected = ref(false);
+const indeterminate = computed(() => !!props.node.indeterminate);
+const stopWatch = ref(false);
+const open = ref(false);
+const childrenComponents = ref<ComponentPublicInstance<typeof TreeItem>[]>([]);
+
+watch(() => props.node, () => {
+  selected.value = !!props.node.selected;
+}, { deep: true });
+
+function setChildrenComponent(child: ComponentPublicInstance<typeof TreeItem>) {
+  childrenComponents.value.push(child);
+}
+
+onBeforeUpdate(() => {
+  childrenComponents.value = [];
+});
+
+const indentPx = computed(() => {
+  return (props.level - 1) * 15;
+});
+
+const isBranch = computed(() => {
+  return props.node.children.length > 0;
+});
+
+const isLeaf = computed(() => {
+  return !isBranch.value;
+});
+
+function updateSelected() {
+  if (isBranch.value) {
+    return;
+  }
+
+  node.value.selected = selectedValues.value.includes(valueGetter(props.node.value));
+}
+
+function select(select: boolean) {
+  if (selected.value === select) {
+    return;
+  }
+
+  node.value.selected = select;
+
+  checkboxChanged(select);
+}
+
+function checkboxChanged(v: boolean) {
+  if (isBranch.value) {
+    node.value.selected = v;
+
+    if (multiple) {
+      stopWatchThen(() => {
+        const flatChildren = flattenChildren(node.value.children);
+        for (const child of flatChildren) {
+          child.selected = v;
+          child.indeterminate = false;
+        }
+      });
+      // syncChildrenStatus();
+    }
+  } else {
+    nextTick(() => {
+      node.value.selected = v;
+    });
+  }
+  emit('change', v);
+  emit('input', v);
+}
+
+function childChanged(v: boolean) {
+  if (isLeaf.value || stopWatch.value) {
+    return;
+  }
+  if (!childrenComponents.value) {
+    return;
+  }
+  if (childrenComponents.value.length === 0) {
+    return;
+  }
+  syncChildrenStatus();
+}
+
+function syncChildrenStatus() {
+  if (isLeaf.value) {
+    return;
+  }
+  let selectedCount = 0;
+  let unselectCount = 0;
+  let indeterminateInner = 0;
+  const oldIndeterminate = indeterminate.value;
+  const oldSelected = selected.value;
+  
+  for (const child of flattenChildren(props.node.children)) {
+    if (child.selected) {
+      selectedCount++;
+    } else {
+      unselectCount++;
+    }
+
+    if (child.indeterminate) {
+      indeterminateInner++;
+    }
+  }
+
+  // for (const childComponent of childrenComponents.value) {
+  //   if (childComponent.selected) {
+  //     checked++;
+  //   } else {
+  //     unchecked++;
+  //   }
+  //   if (childComponent.indeterminate) {
+  //     indeterminateInner++;
+  //   }
+  // }
+
+  if ((selectedCount !== 0 && unselectCount !== 0) || indeterminateInner > 0) {
+    node.value.indeterminate = true;
+  } else {
+    node.value.selected = unselectCount === 0;
+    node.value.indeterminate = false;
+  }
+
+  if (
+    selected.value !== oldSelected
+    || indeterminate.value !== oldIndeterminate
+  ) {
+    emit('change', selected.value);
+    emit('input', selected.value);
+  }
+}
+
+function stopWatchThen(callback: () => any) {
+  stopWatch.value = true;
+  callback();
+  stopWatch.value = false;
+}
+
+watch(() => selectedValues, async () => {
+  if (!isBranch.value) {
+    updateSelected();
+  }
+  await nextTick();
+
+  syncChildrenStatus();
+}, { deep: true });
+
+watch(selected, (v) => {
+});
+
+updateSelected();
+
+onMounted(() => {
+  syncChildrenStatus();
+});
+
+defineExpose({
+  select,
+  selected,
+  indeterminate
+});
+</script>
+
+<template>
+  <div class="c-tree-item"
+    :class="[ isBranch ? 'c-tree-item--branch' : 'c-tree-item--leaf' ]">
+    <div class="d-flex c-tree-item__title"
+      :style="{ 'padding-left': indentPx + 'px' }"
+      :class="[ isBranch ? 'bg-light ' : '' ]">
+      <div class="p-2 ms-2">
+        <input
+          :type="multiple ? 'checkbox' : 'radio'"
+          class="form-check-input"
+          v-if="isLeaf || (branchSelectable && multiple)"
+          :id="id + '__item-' + valueGetter(node.value)"
+          v-model="selected"
+          :value="true"
+          :unchecked-value="false"
+          :indeterminate.sync="indeterminate"
+          @change="checkboxChanged(($event.target as HTMLInputElement).checked)"
+        />
+        <input v-else
+          :type="multiple ? 'checkbox' : 'radio'"
+          class="form-check-input"
+          disabled
+          :checked="indeterminate" :indeterminate.sync="indeterminate" />
+      </div>
+      <a class="c-tree-item__text d-flex align-items-center flex-grow-1 py-2 text-decoration-none"
+        style="cursor: pointer;"
+        :data-level="level"
+        data-bs-toggle="collapse"
+        @click.prevent="isLeaf ? select(!selected) : open = !open">
+        <span class="me-2 fa" :class="[ isLeaf ? 'fa-tag' : 'fa-folder' ]"></span>
+
+        {{ node.value.title }}
+
+        <span v-if="isBranch" class="ms-auto me-3">
+          <span :class="[ open ? 'fa fa-chevron-up' : 'fa fa-chevron-down' ]"></span>
+        </span>
+      </a>
+    </div>
+
+    <Vue3SlideUpDown
+      v-if="node.children.length > 0"
+      v-model="open"
+      :duration="300"
+      class="c-tree-item__children"
+    >
+      <TreeItem v-for="(child, i) of node.children"
+        :node="child"
+        :key="valueGetter(child.value)"
+        :level="level + 1"
+        :branch-selectable="branchSelectable"
+        :ref="setChildrenComponent"
+        @change="childChanged"
+      />
+    </Vue3SlideUpDown>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.c-tree-item {
+  &__title {
+    border-bottom: 1px solid #ddd;
+  }
+
+  cursor: pointer;
+}
+</style>