@windwalker-io/unicorn-next 0.1.0

package/src/vue/components/ModalTree/TreeModal.vue

@@ -0,0 +1,225 @@
+<script lang="ts" setup>
+import { Modal } from 'bootstrap';
+import { computed, getCurrentInstance, inject, onMounted, onUnmounted, provide, ref, useTemplateRef, watch } from 'vue';
+import { useHttpClient } from '../../../composable';
+import { forceArray } from '../../../service';
+import { MaybeArray, ModalTreeSource, SearchMatcher, TitleGetter, TreeNode, ValueGetter } from '../../../types';
+import { flattenChildren } from '../../../utilities';
+import TreeItem from './TreeItem.vue';
+
+const props = withDefaults(
+  defineProps<{
+    open?: boolean;
+    id?: string;
+    name?: string;
+    types?: string[];
+    title?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    value?: MaybeArray<string | number>;
+    branchSelectable?: boolean;
+    source?: ModalTreeSource;
+    searchText?: string;
+  }>(),
+  {
+    branchSelectable: false,
+  }
+);
+
+const emits = defineEmits<{
+  change: [value: any];
+  input: [value: any];
+  selected: [items: any[]];
+  hide: [];
+}>();
+
+// provide('selectNode', selectNode);
+
+const valueGetter = inject<ValueGetter>('valueGetter');
+const titleGetter = inject<TitleGetter>('titleGetter');
+const searchMatcher = inject<SearchMatcher>('searchMatcher');
+
+const loading = ref(false);
+const multiple = inject<boolean>('multiple', false);
+const modalElement = useTemplateRef<HTMLDivElement>('modal')
+
+let $modal: Modal;
+
+onMounted(() => {
+  $modal = Modal.getOrCreateInstance(modalElement.value!);
+  modalElement.value!.addEventListener('show.bs.modal', onShow);
+  modalElement.value!.addEventListener('hide.bs.modal', onHide);
+});
+
+onUnmounted(() => {
+  modalElement.value!.removeEventListener('show.bs.modal', onShow);
+  modalElement.value!.removeEventListener('hide.bs.modal', onHide);
+});
+
+// Items
+const nodes = ref<TreeNode[]>([]);
+const selectedNodes = ref<TreeNode[]>([]);
+
+const displayNodes = computed(() => {
+  if (searchEnabled.value) {
+    return searchedItems.value;
+  }
+  return nodes.value;
+});
+
+const flatNodes = computed(() => flattenChildren(nodes.value));
+
+const selectedValues = computed(() => {
+  return flatNodes.value.filter((node) => node.selected).map((node) => valueGetter(node.value));
+});
+
+provide('selectedValues', selectedValues);
+
+watch(() => selectedValues, () => {
+  emits('change', selectedValues.value);
+  emits('input', selectedValues.value);
+  emits('selected', selectedNodes.value);
+});
+
+// function selectNode(node: TreeNode, select: boolean) {
+//   node.selected = select;
+//
+//   // if (select) {
+//   //   if (!multiple) {
+//   //     selectedNodes.value = [];
+//   //   }
+//   //   if (!selectedValues.value.includes(valueGetter(node.value))) {
+//   //     selectedNodes.value.push(node);
+//   //   }
+//   // } else {
+//   //   selectedNodes.value = selectedNodes.value.filter(
+//   //     (selectedNode: TreeNode) => valueGetter(selectedNode.value) !== valueGetter(node.value)
+//   //   );
+//   // }
+//   emits('change', selectedValues.value);
+//   emits('input', selectedValues.value);
+//   emits('selected', selectedNodes.value);
+// }
+
+const canModify = computed(() => {
+  return !props.readonly && !props.disabled;
+});
+
+// Search
+const q = ref('');
+const searchEnabled = computed(() => q.value !== '');
+
+const searchedItems = computed(() => {
+  if (q.value === '') {
+    return [];
+  }
+
+  return flatNodes.value.filter((item: TreeNode) => {
+    return searchMatcher(item.value, q.value);
+  });
+});
+
+async function loadItems() {
+  loading.value = true;
+  const http = await useHttpClient();
+  try {
+    let src = props.source;
+
+    if (typeof src === 'string') {
+      const res = await http.get(src);
+      nodes.value = res.data.data;
+    } else if (typeof src === 'function') {
+      nodes.value = await src();
+    } else {
+      if (!Array.isArray(src)) {
+        src = src.children;
+      }
+
+      nodes.value = src;
+    }
+  } finally {
+    loading.value = false;
+  }
+}
+
+// Modal Control
+watch(() => props.open, (v) => {
+  if (v) {
+    $modal.show();
+  } else {
+    $modal.hide();
+  }
+});
+
+async function onShow() {
+  await loadItems();
+  updateSelectedItemsByValue();
+}
+
+function onHide() {
+  nodes.value = [];
+  q.value = '';
+  emits('hide');
+}
+
+function updateSelectedItemsByValue() {
+  const values = forceArray(props.value);
+
+  selectedNodes.value = flatNodes.value
+    .filter((item: TreeNode) => {
+      return values.includes(valueGetter(item.value));
+    });
+}
+
+watch(
+  () => props.value,
+  () => updateSelectedItemsByValue(),
+  { immediate: true, deep: true }
+);
+
+</script>
+
+<template>
+  <div ref="modal" class="modal fade" :id="`${id}__modal`" tabindex="-1" role="dialog" aria-labelledby="-modal-label"
+    aria-hidden="true">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h4 class="modal-title" :id="`${id}__modal-label`">
+            {{ title }}
+          </h4>
+          <button type="button" class="close btn-close" data-bs-dismiss="modal" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true" class="visually-hidden">&times;</span>
+          </button>
+        </div>
+
+        <div class="modal-body p-0">
+          <div class="std-form box-list m-3">
+            <div class="form-group">
+              <input type="search" class="form-control" :placeholder="searchText"
+                v-model="q" />
+            </div>
+          </div>
+
+          <div v-if="!loading" class="box-list__items">
+            <TreeItem v-for="node of displayNodes"
+              :node
+              :key="valueGetter(node.value)"
+              :level="1"
+              :branchSelectable
+            />
+          </div>
+          <div v-else>
+            <div class="d-flex justify-content-center">
+              <div class="spinner-border spinner-border-sm my-3"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

package/tests/test.js

@@ -0,0 +1,4 @@
+import { tid } from '../dist/unicorn.js';
+import { randomBytes } from '../dist/unicorn.js';
+
+console.log(randomBytes());

package/tsconfig.js.json

@@ -0,0 +1,25 @@
+{
+  "include": [
+    "./src/types/index.d.ts"
+  ],
+  "exclude": [
+    "node_modules/**/*"
+  ],
+  "compilerOptions": {
+    "allowJs": true,
+    "module": "esnext",
+    "target": "esnext",
+    "moduleResolution": "bundler",
+    "skipLibCheck": true,
+    "jsx": "preserve",
+    "jsxImportSource": "vue",
+    "noImplicitThis": true,
+    "strict": true,
+    "useDefineForClassFields": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "noEmit": true,
+  }
+}

package/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "extends": [
+    "./tsconfig.js.json"
+  ],
+  "include": [
+    "./src/**/*.ts",
+  ],
+  "exclude": [
+    "node_modules/**/*"
+  ],
+  "types": [
+    "reflect-metadata"
+  ],
+  "compilerOptions": {
+    //
+  }
+}

package/vite.assets.config.ts

@@ -0,0 +1,61 @@
+import { resolve, basename } from 'node:path';
+import { rimraf } from 'rimraf';
+import { defineConfig } from 'vite';
+
+export default defineConfig(({ mode }) => {
+  const src = resolve('./src').replace(/\\/g, '/');
+
+  return {
+    resolve: {
+      alias: {
+        // '@': resolve('./src'),
+      }
+    },
+    build: {
+      rollupOptions: {
+        // preserveEntrySignatures: 'strict',
+        input: {
+          switcher: 'scss/switcher.scss',
+          editor: 'scss/editor.scss',
+          menu: 'scss/bootstrap/multi-level-menu.scss'
+        },
+        output: {
+          format: 'es',
+          entryFileNames: '[name].js',
+          chunkFileNames(chunkInfo) {
+            return '[name].js';
+          },
+          assetFileNames: (assetInfo) => {
+            if (assetInfo.originalFileName) {
+              return basename(assetInfo.originalFileName, '.scss') + '[extname]';
+            }
+
+            return 'assets/[name][extname]';
+          },
+          // preserveModules: true,       // 保留模組結構
+          // preserveModulesRoot: 'src/unicorn',
+        },
+      },
+      outDir: 'dist',
+      emptyOutDir: false,
+      minify: mode === 'production',
+    },
+    css: {
+      preprocessorOptions: {
+        scss: {
+          silenceDeprecations: ['mixed-decls', 'color-functions', 'global-builtin', 'import']
+        },
+      }
+    },
+    plugins: [
+      {
+        name: 'clear-files',
+        generateBundle() {
+          rimraf.sync('./dist/**/*.css', { glob: true });
+          rimraf.sync('./dist/**/*.scss', { glob: true });
+        }
+      }
+    ]
+  };
+});
+

package/vite.config.test.ts

@@ -0,0 +1,36 @@
+import { defineConfig } from 'vite';
+
+export default defineConfig(({ mode }) => {
+  return {
+    resolve: {
+      alias: {
+        '@': 'src',
+      }
+    },
+    build: {
+      // lib: {
+      //   entry: 'src/test.ts',
+      //   name: 'test',
+      //   formats: ['es'],
+      //   // fileName: (format) => `test.es.js`
+      // },
+      rollupOptions: {
+        input: {
+          test: 'src/test.ts',
+        },
+        preserveEntrySignatures: 'strict',
+        output: {
+          format: 'es',
+          entryFileNames: '[name].js',
+          // chunkFileNames: 'chunks/[name]-[hash].js',
+          // assetFileNames: 'assets/[name]-[hash][extname]',
+        },
+        treeshake: true,
+      },
+      outDir: 'dist',
+      emptyOutDir: false,
+      minify: false,
+    },
+  };
+});
+

package/vite.config.ts

@@ -0,0 +1,112 @@
+import vuePlugin from '@vitejs/plugin-vue';
+import { resolve, basename, relative } from 'node:path';
+import { rimraf } from 'rimraf';
+import treeShakeable from 'rollup-plugin-tree-shakeable';
+import { defineConfig } from 'vite';
+import dts from 'unplugin-dts/vite';
+
+export default defineConfig(({ mode }) => {
+  const src = resolve('./src').replace(/\\/g, '/');
+
+  return {
+    resolve: {
+      alias: {
+        // '@': resolve('./src'),
+      }
+    },
+    build: {
+      lib: {
+        entry: 'src/unicorn.ts',
+        name: 'unicorn',
+        formats: ['es'],
+      },
+      rollupOptions: {
+        // preserveEntrySignatures: 'strict',
+        // input: {
+        //   unicorn: 'src/unicorn/unicorn.ts',
+        // },
+        output: {
+          format: 'es',
+          entryFileNames: 'unicorn.js',
+          chunkFileNames(chunkInfo) {
+            // if (chunkInfo.facadeModuleId && chunkInfo.facadeModuleId.includes('/module/')) {
+            //   const relPath = chunkInfo.facadeModuleId.replace(src + '/', '');
+            //   const dir = relPath.split('/').slice(0, -1).join('/');
+            //   const filename = basename(relPath, '.ts');
+            //
+            //   return `${dir}/${filename}.js`;
+            // }
+
+            return 'chunks/[name].js';
+          },
+          // assetFileNames: 'assets/[name][extname]',
+          // preserveModules: true,
+          // preserveModulesRoot: 'src/unicorn',
+          // manualChunks(id) {
+          //   if (!/node_modules/.test(id)) {
+          //     const chunk = relative(process.cwd() + '/src/', id).replace(/\\/g, '/');
+          //     if (chunk.startsWith('.')) {
+          //       return undefined;
+          //     }
+          //
+          //     if (chunk.includes('ts-mixer')) {
+          //       return 'ts-mixer';
+          //     }
+          //
+          //     // Remove any extension
+          //     return chunk.replace(/\.[^/.]+$/, '');
+          //   }
+          // }
+        },
+        external: [
+          'node:crypto',
+          '@unicorn/*',
+          'dayjs',
+          'flatpickr',
+          'bootstrap',
+          'sortablejs',
+          '@asika32764/vue-animate',
+          'alpinejs',
+          'cropperjs',
+          'cropperjs/*',
+          'tinymce',
+          'bootstrap',
+          'vue',
+          'vue-draggable-plus',
+          'vue-multi-uploader',
+          'web-directive',
+          'bigint-toolkit',
+          'axios',
+        ]
+      },
+      outDir: 'dist',
+      emptyOutDir: false,
+      sourcemap: 'external',
+      minify: false,
+    },
+    plugins: [
+      treeShakeable(),
+      vuePlugin({
+        features: {
+          prodDevtools: true,
+        }
+      }),
+      dts({
+        // entryRoot: './src/unicorn/unicorn.ts',
+        insertTypesEntry: true,
+        outDir: 'dist',
+        tsconfigPath: resolve('./tsconfig.json'),
+        bundleTypes: true,
+        // rollupTypes: true
+      }),
+      {
+        name: 'clear-files',
+        generateBundle() {
+          rimraf.sync('./dist/**/*.js', { glob: true });
+          rimraf.sync('./dist/**/*.ts', { glob: true });
+        }
+      }
+    ]
+  };
+});
+