mirror of
https://github.com/liufree/obsidian-querydash.git
synced 2026-07-22 05:41:49 +00:00
feat: vite support
This commit is contained in:
liufree
parent
fc5b4b9260
commit
01a746e5d6
6 changed files with 245 additions and 35 deletions
10
package.json
10
package.json
|
|
@ -13,7 +13,6 @@
|
|||
"dependencies": {
|
||||
"@ant-design/icons": "^5.0.1",
|
||||
"@ant-design/pro-components": "^2.4.4",
|
||||
"antd": "^5.4.0",
|
||||
"obsidian-dataview": "^0.5.67",
|
||||
"umi-request": "^1.4.0"
|
||||
},
|
||||
|
|
@ -24,15 +23,12 @@
|
|||
"@typescript-eslint/eslint-plugin": "5.29.0",
|
||||
"@typescript-eslint/parser": "5.29.0",
|
||||
"builtin-modules": "3.3.0",
|
||||
"esbuild": "0.17.3",
|
||||
"husky": "^9",
|
||||
"lint-staged": "^13.2.0",
|
||||
"obsidian": "latest",
|
||||
"prettier": "^2.8.7",
|
||||
"prettier-plugin-organize-imports": "^3.2.2",
|
||||
"prettier-plugin-packagejson": "^2.4.3",
|
||||
"tslib": "2.4.0",
|
||||
"typescript": "^5.0.3",
|
||||
"vite": "^6.2.0"
|
||||
"vite": "^6.2.0",
|
||||
"vite-plugin-css-injected-by-js": "^3.5.2",
|
||||
"@vitejs/plugin-react": "^4.3.4"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
207
src/pages/AntdTableDemo.tsx
Normal file
207
src/pages/AntdTableDemo.tsx
Normal file
|
|
@ -0,0 +1,207 @@
|
|||
import React from 'react';
|
||||
import { InboxOutlined, UploadOutlined } from '@ant-design/icons';
|
||||
import {
|
||||
Button,
|
||||
Checkbox,
|
||||
Col,
|
||||
ColorPicker,
|
||||
Form,
|
||||
InputNumber,
|
||||
Radio,
|
||||
Rate,
|
||||
Row,
|
||||
Select,
|
||||
Slider,
|
||||
Space,
|
||||
Switch,
|
||||
Upload,
|
||||
} from 'antd';
|
||||
|
||||
const { Option } = Select;
|
||||
|
||||
const formItemLayout = {
|
||||
labelCol: { span: 6 },
|
||||
wrapperCol: { span: 14 },
|
||||
};
|
||||
|
||||
const normFile = (e: any) => {
|
||||
console.log('Upload event:', e);
|
||||
if (Array.isArray(e)) {
|
||||
return e;
|
||||
}
|
||||
return e?.fileList;
|
||||
};
|
||||
|
||||
const onFinish = (values: any) => {
|
||||
console.log('Received values of form: ', values);
|
||||
};
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Form
|
||||
name="validate_other"
|
||||
{...formItemLayout}
|
||||
onFinish={onFinish}
|
||||
initialValues={{
|
||||
'input-number': 3,
|
||||
'checkbox-group': ['A', 'B'],
|
||||
rate: 3.5,
|
||||
'color-picker': null,
|
||||
}}
|
||||
style={{ maxWidth: 600 }}
|
||||
>
|
||||
<Form.Item label="Plain Text">
|
||||
<span className="ant-form-text">China</span>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="select"
|
||||
label="Select"
|
||||
hasFeedback
|
||||
rules={[{ required: true, message: 'Please select your country!' }]}
|
||||
>
|
||||
<Select placeholder="Please select a country">
|
||||
<Option value="china">China</Option>
|
||||
<Option value="usa">U.S.A</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="select-multiple"
|
||||
label="Select[multiple]"
|
||||
rules={[{ required: true, message: 'Please select your favourite colors!', type: 'array' }]}
|
||||
>
|
||||
<Select mode="multiple" placeholder="Please select favourite colors">
|
||||
<Option value="red">Red</Option>
|
||||
<Option value="green">Green</Option>
|
||||
<Option value="blue">Blue</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label="InputNumber">
|
||||
<Form.Item name="input-number" noStyle>
|
||||
<InputNumber min={1} max={10} />
|
||||
</Form.Item>
|
||||
<span className="ant-form-text" style={{ marginInlineStart: 8 }}>
|
||||
machines
|
||||
</span>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="switch" label="Switch" valuePropName="checked">
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="slider" label="Slider">
|
||||
<Slider
|
||||
marks={{
|
||||
0: 'A',
|
||||
20: 'B',
|
||||
40: 'C',
|
||||
60: 'D',
|
||||
80: 'E',
|
||||
100: 'F',
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="radio-group" label="Radio.Group">
|
||||
<Radio.Group>
|
||||
<Radio value="a">item 1</Radio>
|
||||
<Radio value="b">item 2</Radio>
|
||||
<Radio value="c">item 3</Radio>
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="radio-button"
|
||||
label="Radio.Button"
|
||||
rules={[{ required: true, message: 'Please pick an item!' }]}
|
||||
>
|
||||
<Radio.Group>
|
||||
<Radio.Button value="a">item 1</Radio.Button>
|
||||
<Radio.Button value="b">item 2</Radio.Button>
|
||||
<Radio.Button value="c">item 3</Radio.Button>
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="checkbox-group" label="Checkbox.Group">
|
||||
<Checkbox.Group>
|
||||
<Row>
|
||||
<Col span={8}>
|
||||
<Checkbox value="A" style={{ lineHeight: '32px' }}>
|
||||
A
|
||||
</Checkbox>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Checkbox value="B" style={{ lineHeight: '32px' }} disabled>
|
||||
B
|
||||
</Checkbox>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Checkbox value="C" style={{ lineHeight: '32px' }}>
|
||||
C
|
||||
</Checkbox>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Checkbox value="D" style={{ lineHeight: '32px' }}>
|
||||
D
|
||||
</Checkbox>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Checkbox value="E" style={{ lineHeight: '32px' }}>
|
||||
E
|
||||
</Checkbox>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Checkbox value="F" style={{ lineHeight: '32px' }}>
|
||||
F
|
||||
</Checkbox>
|
||||
</Col>
|
||||
</Row>
|
||||
</Checkbox.Group>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="rate" label="Rate">
|
||||
<Rate />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="upload"
|
||||
label="Upload"
|
||||
valuePropName="fileList"
|
||||
getValueFromEvent={normFile}
|
||||
extra="longgggggggggggggggggggggggggggggggggg"
|
||||
>
|
||||
<Upload name="logo" action="/upload.do" listType="picture">
|
||||
<Button icon={<UploadOutlined />}>Click to upload</Button>
|
||||
</Upload>
|
||||
</Form.Item>
|
||||
<Form.Item label="Dragger">
|
||||
<Form.Item name="dragger" valuePropName="fileList" getValueFromEvent={normFile} noStyle>
|
||||
<Upload.Dragger name="files" action="/upload.do">
|
||||
<p className="ant-upload-drag-icon">
|
||||
<InboxOutlined />
|
||||
</p>
|
||||
<p className="ant-upload-text">Click or drag file to this area to upload</p>
|
||||
<p className="ant-upload-hint">Support for a single or bulk upload.</p>
|
||||
</Upload.Dragger>
|
||||
</Form.Item>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="color-picker"
|
||||
label="ColorPicker"
|
||||
rules={[{ required: true, message: 'color is required!' }]}
|
||||
>
|
||||
<ColorPicker />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item wrapperCol={{ span: 12, offset: 6 }}>
|
||||
<Space>
|
||||
<Button type="primary" htmlType="submit">
|
||||
Submit
|
||||
</Button>
|
||||
<Button htmlType="reset">reset</Button>
|
||||
</Space>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
);
|
||||
|
||||
export default App;
|
||||
3
src/pages/TableDemo.module.css
Normal file
3
src/pages/TableDemo.module.css
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
.container {
|
||||
all: initial; /* 重置容器内的样式 */
|
||||
}
|
||||
|
|
@ -6,7 +6,6 @@ import {useEffect, useRef} from 'react';
|
|||
import React from 'react';
|
||||
import request from 'umi-request';
|
||||
import { getAPI } from 'obsidian-dataview';
|
||||
// import 'antd/dist/antd.css';
|
||||
|
||||
export const waitTimePromise = async (time: number = 100) => {
|
||||
return new Promise((resolve) => {
|
||||
|
|
|
|||
|
|
@ -2,9 +2,11 @@ import {HoverPopover, ItemView, WorkspaceLeaf} from 'obsidian';
|
|||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import type MyPlugin from './main';
|
||||
import { createRoot } from 'react-dom/client';
|
||||
|
||||
import FormDemo from "./pages/FormDemo";
|
||||
import TableDemo from "./pages/TableDemo";
|
||||
import AntdTableDemo from "./pages/AntdTableDemo";
|
||||
|
||||
export class SampleView extends ItemView {
|
||||
plugin: MyPlugin;
|
||||
|
|
@ -32,10 +34,10 @@ export class SampleView extends ItemView {
|
|||
|
||||
async onOpen(): Promise<void> {
|
||||
|
||||
this.sampleComponent = React.createElement(TableDemo);
|
||||
this.sampleComponent = React.createElement(AntdTableDemo);
|
||||
const root = createRoot(this.contentEl as HTMLElement);
|
||||
root.render(this.sampleComponent);
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
ReactDOM.render(this.sampleComponent, (this as any).contentEl);
|
||||
}
|
||||
|
||||
async onClose() {
|
||||
|
|
|
|||
|
|
@ -1,27 +1,30 @@
|
|||
import path from 'path';
|
||||
import { defineConfig } from 'vite';
|
||||
import {defineConfig} from 'vite';
|
||||
import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';
|
||||
import react from '@vitejs/plugin-react'
|
||||
|
||||
export default defineConfig(({ mode }) => {
|
||||
return {
|
||||
build: {
|
||||
sourcemap: mode === 'development' ? 'inline' : false,
|
||||
minify: false,
|
||||
// Use Vite lib mode https://vitejs.dev/guide/build.html#library-mode
|
||||
lib: {
|
||||
entry: path.resolve(__dirname, './src/main.ts'),
|
||||
formats: ['cjs'],
|
||||
},
|
||||
rollupOptions: {
|
||||
output: {
|
||||
// Overwrite default Vite output fileName
|
||||
entryFileNames: 'main.js',
|
||||
assetFileNames: 'styles.css',
|
||||
},
|
||||
external: ['obsidian','antd/dist/antd.css'],
|
||||
},
|
||||
// Use root as the output dir
|
||||
emptyOutDir: false,
|
||||
outDir: '.',
|
||||
},
|
||||
};
|
||||
export default defineConfig(({mode}) => {
|
||||
return {
|
||||
plugins: [react(),cssInjectedByJsPlugin()],
|
||||
build: {
|
||||
sourcemap: mode === 'development' ? 'inline' : false,
|
||||
minify: false,
|
||||
// Use Vite lib mode https://vitejs.dev/guide/build.html#library-mode
|
||||
lib: {
|
||||
entry: path.resolve(__dirname, './src/main.ts'),
|
||||
formats: ['cjs'],
|
||||
},
|
||||
rollupOptions: {
|
||||
output: {
|
||||
// Overwrite default Vite output fileName
|
||||
entryFileNames: 'main.js',
|
||||
assetFileNames: 'styles.css',
|
||||
},
|
||||
external: ['obsidian'],
|
||||
},
|
||||
// Use root as the output dir
|
||||
emptyOutDir: false,
|
||||
outDir: '.',
|
||||
},
|
||||
};
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue