create-bubbles 0.1.18 → 0.1.20

package/template-vue-vite-eslint/src/views/example/echart/index.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { useECharts } from '@/hooks/chart/useEcharts'
+
+import { getOption } from './config'
+
+const dom = useTemplateRef('chart')
+const { setOptions } = useECharts(dom)
+
+onMounted(() => {
+  setOptions(getOption())
+})
+</script>
+
+<template>
+  <div class="h-100vh w-full bg-black">
+    <div ref="chart" class="h-30% w-30%" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

package/template-vue-vite-eslint/src/views/example/h-full.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import SvgIcon from '@/components/Icon/svg-icon.vue'
+
+const a = ref()
+
+const b = ref([1, 3, 4])
+</script>
+
+<template>
+  <div class="content-h-full w-full bg-green p-[111px] p-3px p-4px text-red">
+    home
+    <el-date-picker v-model="a" type="date" value-format="yyyy-MM-dd" />
+    <SvgIcon icon="vue" class="text-green" />
+    <el-button type="primary">
+      按钮
+    </el-button>
+    <div v-for="item in b" :key="item">
+      {{ item }}
+    </div>
+    <image src="https://img2.baidu.com/it/u=3422424222,2328894338&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" />
+  </div>
+</template>
+
+<style lang="scss" scoped></style>

package/template-vue-vite-eslint/src/views/example/tree-chart.vue

@@ -0,0 +1,94 @@
+<script>
+import { defineComponent, reactive, ref } from 'vue'
+
+import BlocksTree from 'vue3-blocks-tree'
+
+import 'vue3-blocks-tree/dist/vue3-blocks-tree.css'
+
+export default defineComponent({
+  components: {
+    BlocksTree,
+  },
+  setup() {
+    const selected = ref([])
+    const treeOrientation = ref('0')
+    const treeData = reactive({
+      label: 'root',
+      expand: true,
+      some_id: 1,
+      children: [
+        { label: 'child 1', some_id: 2 },
+        { label: 'child 2', some_id: 3 },
+        {
+          label: 'subparent 1',
+          some_id: 4,
+          expand: false,
+          children: [
+            { label: 'subchild 1', some_id: 5 },
+            {
+              label: 'subchild 2',
+              some_id: 6,
+              expand: false,
+              children: [
+                { label: 'subchild 11', some_id: 7 },
+                { label: 'subchild 22', some_id: 8 },
+              ],
+            },
+          ],
+        },
+      ],
+    })
+
+    const toggleSelect = (node, isSelected) => {
+      isSelected ? selected.value.push(node.some_id) : selected.value.splice(selected.value.indexOf(node.some_id), 1)
+      if (node.children && node.children.length) {
+        node.children.forEach((ch) => {
+          toggleSelect(ch, isSelected)
+        })
+      }
+    }
+
+    return {
+      treeData,
+      selected,
+      toggleSelect,
+      treeOrientation,
+    }
+  },
+})
+</script>
+
+<template>
+  <h1>Basic</h1>
+  <div>
+    <BlocksTree :data="treeData" :horizontal="treeOrientation === '1'" :collapsable="true" />
+  </div>
+
+  <h1>With slots</h1>
+  <div>
+    <BlocksTree :data="treeData" :horizontal="treeOrientation === '1'" :collapsable="false" :props="{ label: 'label', expand: 'expand', children: 'children', key: 'some_id' }">
+      <template #node="{ data, context }">
+        <span>
+          <input type="checkbox" :checked="selected.includes(data.some_id)" @change="(e) => toggleSelect(data, e.target.checked)"> {{ data.label }}
+        </span>
+        <br>
+        <span v-if="data.children && data.children.length">
+          <a href="#" @click="context.toggleExpand">toggle expand</a>
+        </span>
+      </template>
+    </BlocksTree>
+    <div>
+      Selected: {{ selected }}
+    </div>
+  </div>
+
+  <h1>Change orientation</h1>
+  <select v-model="treeOrientation">
+    <option value="0">
+      Vertical
+    </option>
+    <option value="1">
+      Horizontal
+    </option>
+  </select>
+</template>

package/template-vue-vite-eslint/src/views/home/index.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import SvgIcon from '@/components/Icon/svg-icon.vue'
+
+const a = ref()
+
+const b = ref([1, 3, 4])
+</script>
+
+<template>
+  <div class="content-h-full h-98px w-full flex bg-green p-[111px] p-3px p-4px text-red">
+    home
+    <SvgIcon icon="cpu" style="color: #303133" />
+    <el-date-picker v-model="a" type="date" value-format="yyyy-MM-dd" />
+    <SvgIcon icon="vue" class="text-green" />
+    <el-button type="primary">
+      按钮
+    </el-button>
+    <div v-for="item in b" :key="item">
+      {{ item }}
+    </div>
+    <image src="https://img2.baidu.com/it/u=3422424222,2328894338&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" />
+  </div>
+</template>
+
+<style lang="scss" scoped></style>

package/template-vue-vite-eslint/src/views/login/index.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+// const a = 123
+</script>
+
+<template>
+  <div>login</div>
+</template>
+
+<style lang="scss" scoped></style>

package/template-vue-vite-eslint/tsconfig.json

@@ -0,0 +1,36 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "moduleDetection": "force",
+    "useDefineForClassFields": true,
+
+    "baseUrl": ".",
+    "module": "ESNext",
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "paths": {
+      "@/*": ["src/*"]
+    },
+    "types": ["vite/client", "vue", "node"],
+    "allowImportingTsExtensions": true,
+
+    /* Linting */
+    "strict": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noEmit": true,
+    "verbatimModuleSyntax": true,
+    "erasableSyntaxOnly": true,
+    "skipLibCheck": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.d.ts",
+    "src/**/*.vue",
+    "./node_modules/element-plus/global.d.ts"
+  ]
+}

package/template-vue-vite-eslint/uno.config.ts

@@ -0,0 +1,21 @@
+import presetAttributify from '@unocss/preset-attributify'
+import presetWind4 from '@unocss/preset-wind4'
+import { defineConfig } from 'unocss'
+
+export default defineConfig({
+  // content: {
+  //   filesystem: [
+  //     '**/*.{html,js,ts,jsx,tsx,vue,svelte,astro}',
+  //   ],
+  // },
+  shortcuts: [
+    {
+      'flex-center': 'flex justify-center items-center',
+      'content-h-full': 'h-[calc(100vh-var(--plus-header-height)-2*var(--el-main-padding))]',
+    },
+  ],
+  presets: [
+    presetWind4(),
+    presetAttributify(),
+  ],
+})

package/template-vue-vite-eslint/vite.config.ts

@@ -0,0 +1,60 @@
+import path from 'node:path'
+
+import { AntdvNextResolver } from '@antdv-next/auto-import-resolver'
+import Vue from '@vitejs/plugin-vue'
+import UnoCSS from 'unocss/vite'
+import AutoImport from 'unplugin-auto-import/vite'
+import Components from 'unplugin-vue-components/vite'
+import { defineConfig, loadEnv } from 'vite'
+import Inspect from 'vite-plugin-inspect'
+import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
+
+// https://vite.dev/config/
+export default defineConfig(({ mode }) => {
+  const root = process.cwd()
+  const env = loadEnv(mode, root)
+  const { VITE_PORT, VITE_API_URL, VITE_API_AFFIX } = env
+  console.log(env)
+
+  return {
+    resolve: {
+      alias: {
+        '@': path.resolve(__dirname, 'src'),
+      },
+    },
+
+    server: {
+      port: Number(VITE_PORT),
+      host: '0.0.0.0',
+      open: false,
+
+      proxy: {
+        [`^/${VITE_API_AFFIX}`]: {
+          target: VITE_API_URL,
+          changeOrigin: true,
+          // secure: false, // Disable SSL certificate verification
+          rewrite: path => path.replace(new RegExp(`^/${VITE_API_AFFIX}`), ''),
+        },
+      },
+    },
+    plugins: [
+      Vue(),
+      AutoImport({
+        imports: ['vue', 'vue-router'],
+        dts: './src/types/auto-import.d.ts',
+      }),
+      Components({
+        resolvers: [AntdvNextResolver()],
+        dts: './src/types/components.d.ts',
+      }),
+      createSvgIconsPlugin({
+        // Specify the icon folder to be cached
+        iconDirs: [path.resolve(__dirname, 'src/assets/icon')],
+        // Specify symbolId format
+        symbolId: 'icon-[dir]-[name]',
+      }),
+      UnoCSS(),
+      Inspect(),
+    ],
+  }
+})