start up
This commit is contained in:
13
vue-project/my-kintone-plugin/.eslintrc.js
Normal file
13
vue-project/my-kintone-plugin/.eslintrc.js
Normal file
@@ -0,0 +1,13 @@
|
||||
module.exports = {
|
||||
extends: [
|
||||
'@cybozu/eslint-config/globals/kintone.js',
|
||||
'@cybozu/eslint-config/lib/base.js',
|
||||
'@cybozu/eslint-config/lib/kintone.js',
|
||||
'@cybozu/eslint-config/lib/prettier.js',
|
||||
],
|
||||
rules: {
|
||||
'prettier/prettier': ['error', { singleQuote: true }],
|
||||
'space-before-function-paren': 0,
|
||||
'object-curly-spacing': 0,
|
||||
},
|
||||
};
|
||||
7
vue-project/my-kintone-plugin/.prettierrc
Normal file
7
vue-project/my-kintone-plugin/.prettierrc
Normal file
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"singleQuote": true,
|
||||
"semi": true,
|
||||
"trailingComma": "all",
|
||||
"printWidth": 120,
|
||||
"bracketSpacing": true
|
||||
}
|
||||
@@ -1,5 +1,15 @@
|
||||
# Vue 3 + Vite
|
||||
# My-kintone-plugin
|
||||
|
||||
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
|
||||
1. 命令:
|
||||
- `npm run build` 会将代码按照 kintone plugin 格式打包到 `dist`,并生成 `plugin.zip`
|
||||
- `npm run upload` 会将 `plugin.zip` 上传到 kintone
|
||||
|
||||
Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).
|
||||
2. 使用 Vue3.0 开发:
|
||||
- 配置页面在 `components/Config.vue` 中开发
|
||||
- Desktop 页面在 `js/desktop.ts` 中开发
|
||||
|
||||
3. 关于组件:
|
||||
- 使用了 https://ui-component.kintone.dev/ 组件库,但是它没有支持 Vue,所以需要作为 Web Component 来使用
|
||||
- 又由于 Web Component 的格式是类似 `<kuc-button-1-18-0>`,为了开发方便能写成 `<kuc-button>`,手动进行了全局替换(见 `vite.config.js`)
|
||||
- 同时也定死了 kintone-ui-component 版本号,更新版本号需要修改 `vite.config.js` 的插件
|
||||
- 目前尚未实现 `<template>` 中组件的 ts 提示
|
||||
2
vue-project/my-kintone-plugin/env.d.ts
vendored
Normal file
2
vue-project/my-kintone-plugin/env.d.ts
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
/// <reference types="vite/client" />
|
||||
/// <reference types="kintone" />
|
||||
@@ -1,19 +1,4 @@
|
||||
<!-- <!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + Vue</title>
|
||||
</head>
|
||||
<body> -->
|
||||
<section class="settings">
|
||||
<section class="settings">
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</section>
|
||||
<!-- </body>
|
||||
</html> -->
|
||||
<!-- <section class="settings">
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
<div id="app"></div>
|
||||
</section> -->
|
||||
</section>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
8107
vue-project/my-kintone-plugin/package-lock.json
generated
8107
vue-project/my-kintone-plugin/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -1,24 +1,34 @@
|
||||
{
|
||||
"name": "my-kintone-plugin",
|
||||
"name": "data-fetch-plugin",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build ",
|
||||
"preview": "vite preview",
|
||||
"pkg":"kintone-plugin-packer --ppk private.ppk --out dist/plugin.zip dist/src"
|
||||
"build": "vite build && npm run pkg",
|
||||
"vite:build": "vite build",
|
||||
"build-upload": "npm run build && npm run upload",
|
||||
"pkg": "kintone-plugin-packer --ppk private.ppk --out dist/plugin.zip dist/src",
|
||||
"upload": "kintone-plugin-uploader --base-url https://mfu07rkgnb7c.cybozu.com --username MXZ --password maxz1205 dist/plugin.zip "
|
||||
},
|
||||
"dependencies": {
|
||||
"@kintone/rest-api-client": "^5.7.0",
|
||||
"kintone-ui-component": "1.18.0",
|
||||
"rollup-plugin-css-only": "^4.5.2",
|
||||
"vue": "^3.5.13"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^5.2.1",
|
||||
"rollup-plugin-copy": "^3.5.0",
|
||||
"@cybozu/eslint-config": "^23.0.0",
|
||||
"@kintone/dts-gen": "^8.1.1",
|
||||
"@kintone/plugin-packer": "^8.1.3",
|
||||
"@kintone/plugin-uploader": "^9.1.2",
|
||||
"@vitejs/plugin-vue": "^5.2.1",
|
||||
"@vue/tsconfig": "^0.7.0",
|
||||
"eslint": "^8.57.0",
|
||||
"vite": "^6.0.1"
|
||||
"rollup-plugin-copy": "^3.5.0",
|
||||
"typescript": "^5.7.3",
|
||||
"vite": "^6.0.1",
|
||||
"vue-tsc": "^2.1.10"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 1.5 KiB |
@@ -1,10 +0,0 @@
|
||||
<script setup>
|
||||
import Config from './components/Config.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Config msg="Vite + Vue" />
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 496 B |
@@ -1,38 +1,52 @@
|
||||
<template>
|
||||
<!-- <section class="settings"> -->
|
||||
<h2 class="settings-heading">Settings for data fetch pluging</h2>
|
||||
<p class="kintoneplugin-desc">This message is displayed on the app page after the app has been updated.</p>
|
||||
<form class="js-submit-settings">
|
||||
<p class="kintoneplugin-row">
|
||||
<label for="message">
|
||||
Message:
|
||||
<input type="text" class="js-text-message kintoneplugin-input-text">
|
||||
<input v-model="data.message" type="text" class="js-text-message kintoneplugin-input-text" />
|
||||
</label>
|
||||
</p>
|
||||
<p class="kintoneplugin-row">
|
||||
<button type="button" class="js-cancel-button kintoneplugin-button-dialog-cancel">Cancel</button>
|
||||
<button class="kintoneplugin-button-dialog-ok">Save</button>
|
||||
<kuc-button text="Cancel" type="normal" @click="cancel" />
|
||||
<kuc-button text="Save" type="submit" @click="save" />
|
||||
</p>
|
||||
</form>
|
||||
<!-- </section> -->
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import '../css/51-modern-default.css';
|
||||
import '../css/config.css';
|
||||
<script setup lang="ts">
|
||||
import { onMounted, reactive } from 'vue';
|
||||
|
||||
defineProps({
|
||||
msg: String,
|
||||
const props = defineProps<{ pluginId: string }>();
|
||||
const data: {
|
||||
message: string;
|
||||
} = reactive({
|
||||
message: '',
|
||||
});
|
||||
|
||||
const count = ref(0)
|
||||
</script>
|
||||
onMounted(async () => {
|
||||
const savedData = kintone.plugin.app.getConfig(props.pluginId);
|
||||
data.message = JSON.parse(savedData.message);
|
||||
});
|
||||
|
||||
function save() {
|
||||
kintone.plugin.app.setConfig(
|
||||
{ message: JSON.stringify(data.message) },
|
||||
// () => {
|
||||
// alert("The plug-in settings have been saved. Please update the app!");
|
||||
// window.location.href = "../../flow?app=" + kintone.app.getId();
|
||||
// }
|
||||
);
|
||||
}
|
||||
|
||||
function cancel() {
|
||||
window.location.href = `../../${kintone.app.getId()}/plugin/`;
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.settings-heading {
|
||||
padding: 1em 0;
|
||||
}
|
||||
|
||||
.kintoneplugin-input-text {
|
||||
width: 20em;
|
||||
}
|
||||
|
||||
@@ -1,7 +0,0 @@
|
||||
.settings-heading {
|
||||
padding: 1em 0;
|
||||
}
|
||||
|
||||
.kintoneplugin-input-text {
|
||||
width: 20em;
|
||||
}
|
||||
@@ -1,25 +0,0 @@
|
||||
(function (PLUGIN_ID) {
|
||||
const formEl = document.querySelector('.js-submit-settings');
|
||||
const cancelButtonEl = document.querySelector('.js-cancel-button');
|
||||
const messageEl = document.querySelector('.js-text-message');
|
||||
if (!(formEl && cancelButtonEl && messageEl)) {
|
||||
throw new Error('Required elements do not exist.');
|
||||
}
|
||||
|
||||
const config = kintone.plugin.app.getConfig(PLUGIN_ID);
|
||||
if (config.message) {
|
||||
messageEl.value = config.message;
|
||||
}
|
||||
|
||||
formEl.addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
kintone.plugin.app.setConfig({ message: messageEl.value }, () => {
|
||||
alert('The plug-in settings have been saved. Please update the app!');
|
||||
window.location.href = '../../flow?app=' + kintone.app.getId();
|
||||
});
|
||||
});
|
||||
|
||||
cancelButtonEl.addEventListener('click', () => {
|
||||
window.location.href = '../../' + kintone.app.getId() + '/plugin/';
|
||||
});
|
||||
})(kintone.$PLUGIN_ID);
|
||||
@@ -1,5 +1,3 @@
|
||||
import '../css/desktop.css'
|
||||
import '../css/51-modern-default.css';
|
||||
(function (PLUGIN_ID) {
|
||||
kintone.events.on('app.record.index.show', () => {
|
||||
const spaceEl = kintone.app.getHeaderSpaceElement();
|
||||
209
vue-project/my-kintone-plugin/src/js/kintone-config-helper.js
Normal file
209
vue-project/my-kintone-plugin/src/js/kintone-config-helper.js
Normal file
@@ -0,0 +1,209 @@
|
||||
(function (global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
|
||||
typeof define === 'function' && define.amd ? define(['exports'], factory) :
|
||||
(factory((global.KintoneConfigHelper = {})));
|
||||
}(this, (function (exports) { 'use strict';
|
||||
|
||||
var ALL_FIELD_TYPES = [
|
||||
"SINGLE_LINE_TEXT",
|
||||
"MULTI_LINE_TEXT",
|
||||
"RICH_TEXT",
|
||||
"NUMBER",
|
||||
"CALC",
|
||||
"RADIO_BUTTON",
|
||||
"CHECK_BOX",
|
||||
"MULTI_SELECT",
|
||||
"DROP_DOWN",
|
||||
"DATE",
|
||||
"TIME",
|
||||
"DATETIME",
|
||||
"FILE",
|
||||
"LINK",
|
||||
"USER_SELECT",
|
||||
"ORGANIZATION_SELECT",
|
||||
"GROUP_SELECT",
|
||||
"REFERENCE_TABLE",
|
||||
"SPACER",
|
||||
"GROUP",
|
||||
"SUBTABLE",
|
||||
"RECORD_NUMBER",
|
||||
"CREATOR",
|
||||
"CREATED_TIME",
|
||||
"MODIFIER",
|
||||
"UPDATED_TIME"
|
||||
];
|
||||
function createKintoneClient(kintone) {
|
||||
function fetchFormInfoByFields() {
|
||||
var url = kintone.api.url("/k/v1/preview/app/form/fields", true);
|
||||
var body = {
|
||||
app: kintone.app.getId()
|
||||
};
|
||||
return kintone.api(url, "GET", body).then(function (resp) {
|
||||
return resp.properties;
|
||||
});
|
||||
}
|
||||
function fetchFormInfoByLayout() {
|
||||
var url = kintone.api.url("/k/v1/preview/app/form/layout", true);
|
||||
var body = {
|
||||
app: kintone.app.getId()
|
||||
};
|
||||
return kintone.api(url, "GET", body).then(function (resp) {
|
||||
return resp.layout;
|
||||
});
|
||||
}
|
||||
return {
|
||||
fetchFormInfoByFields: fetchFormInfoByFields,
|
||||
fetchFormInfoByLayout: fetchFormInfoByLayout
|
||||
};
|
||||
}
|
||||
|
||||
/*! *****************************************************************************
|
||||
Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
|
||||
this file except in compliance with the License. You may obtain a copy of the
|
||||
License at http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
|
||||
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
|
||||
MERCHANTABLITY OR NON-INFRINGEMENT.
|
||||
|
||||
See the Apache Version 2.0 License for specific language governing permissions
|
||||
and limitations under the License.
|
||||
***************************************************************************** */
|
||||
|
||||
var __assign = function() {
|
||||
__assign = Object.assign || function __assign(t) {
|
||||
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
||||
s = arguments[i];
|
||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
||||
}
|
||||
return t;
|
||||
};
|
||||
return __assign.apply(this, arguments);
|
||||
};
|
||||
|
||||
function __rest(s, e) {
|
||||
var t = {};
|
||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
||||
t[p] = s[p];
|
||||
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
||||
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
|
||||
t[p[i]] = s[p[i]];
|
||||
return t;
|
||||
}
|
||||
|
||||
var NOT_EXIST_MESSAGE = "Either the specified field type does not exist, or this method cannot respond the specified field type.";
|
||||
var NOT_MATCH_MESSAGE = "Specify either characters or an array of characters for the getAllFields parameter.";
|
||||
|
||||
function createGetFields(kintoneClient, Promise_) {
|
||||
var Promise = Promise_;
|
||||
var fetchFormInfoByFields = kintoneClient.fetchFormInfoByFields, fetchFormInfoByLayout = kintoneClient.fetchFormInfoByLayout;
|
||||
function removeUnnecessaryProperties(field) {
|
||||
var _ = field.size, rest = __rest(field, ["size"]);
|
||||
return rest;
|
||||
}
|
||||
function getFieldInfo(layoutFields) {
|
||||
return layoutFields
|
||||
.filter(function (layout) { return layout.type !== "LABEL" && layout.type !== "HR"; })
|
||||
.map(function (field) { return removeUnnecessaryProperties(field); });
|
||||
}
|
||||
function modifiedLayoutResp(layoutList) {
|
||||
return layoutList.reduce(function (acc, layout) {
|
||||
switch (layout.type) {
|
||||
case "ROW":
|
||||
return acc.concat(getFieldInfo(layout.fields));
|
||||
case "GROUP":
|
||||
return acc.concat([
|
||||
{ type: layout.type, code: layout.code }
|
||||
], layout.layout
|
||||
.map(function (childLayout) { return getFieldInfo(childLayout.fields); })
|
||||
.reduce(function (acc, cur) { return acc.concat(cur); }, []));
|
||||
case "SUBTABLE":
|
||||
var layoutFieldsIncludeSubtableCode = layout.fields.map(function (layoutField) { return (__assign({}, layoutField, { subtableCode: layout.code })); });
|
||||
return acc.concat([
|
||||
{ type: layout.type, code: layout.code }
|
||||
], getFieldInfo(layoutFieldsIncludeSubtableCode));
|
||||
}
|
||||
}, []);
|
||||
}
|
||||
function getLabeledFields(fieldsResp) {
|
||||
return Object.keys(fieldsResp).reduce(function (acc, key) {
|
||||
var _a;
|
||||
var field = fieldsResp[key];
|
||||
if (field.type === "SUBTABLE") {
|
||||
return __assign({}, acc, getLabeledFields(field.fields));
|
||||
}
|
||||
return field.label ? __assign({}, acc, (_a = {}, _a[field.code] = field.label, _a)) : acc;
|
||||
}, {});
|
||||
}
|
||||
function addLabel(layoutFieldList, fieldsResp) {
|
||||
var labeledFields = getLabeledFields(fieldsResp);
|
||||
return layoutFieldList.map(function (layoutField) {
|
||||
return labeledFields[layoutField.code]
|
||||
? __assign({}, layoutField, { label: labeledFields[layoutField.code] }) : layoutField;
|
||||
});
|
||||
}
|
||||
function getLookupFieldKeys(fieldsResp) {
|
||||
return Object.keys(fieldsResp).filter(function (key) { return typeof fieldsResp[key].lookup !== "undefined"; });
|
||||
}
|
||||
function filterLookupField(layoutFieldList, fieldsResp) {
|
||||
var lookupFieldKeys = getLookupFieldKeys(fieldsResp);
|
||||
if (lookupFieldKeys.length === 0)
|
||||
;
|
||||
return layoutFieldList.filter(function (layoutField) {
|
||||
return !lookupFieldKeys.some(function (key) { return fieldsResp[key].code === layoutField.code; });
|
||||
});
|
||||
}
|
||||
function flattenFieldsForSubtable(fieldsResp) {
|
||||
return Object.keys(fieldsResp).reduce(function (fields, key) {
|
||||
var _a, _b;
|
||||
if (fieldsResp[key].type === "SUBTABLE") {
|
||||
return __assign({}, fields, (_a = {}, _a[key] = fieldsResp[key], _a), fieldsResp[key].fields);
|
||||
}
|
||||
return __assign({}, fields, (_b = {}, _b[key] = fieldsResp[key], _b));
|
||||
}, {});
|
||||
}
|
||||
function fetchAllFields(selectFieldTypes) {
|
||||
return Promise.all([fetchFormInfoByFields(), fetchFormInfoByLayout()]).then(function (_a) {
|
||||
var fieldsResp = _a[0], layoutResp = _a[1];
|
||||
var fieldList = addLabel(filterLookupField(modifiedLayoutResp(layoutResp), flattenFieldsForSubtable(fieldsResp)), fieldsResp);
|
||||
return selectFieldTypes
|
||||
? fieldList.filter(function (field) { return selectFieldTypes.indexOf(field.type) !== -1; })
|
||||
: fieldList;
|
||||
});
|
||||
}
|
||||
function validateFieldType(fieldType) {
|
||||
return ALL_FIELD_TYPES.some(function (type) { return type === fieldType; });
|
||||
}
|
||||
function validateGetAllFieldsArgument(fieldType) {
|
||||
if (typeof fieldType === "string") {
|
||||
return validateFieldType(fieldType) ? null : NOT_EXIST_MESSAGE;
|
||||
}
|
||||
if (Array.isArray(fieldType)) {
|
||||
return fieldType.every(validateFieldType) ? null : NOT_EXIST_MESSAGE;
|
||||
}
|
||||
return NOT_MATCH_MESSAGE;
|
||||
}
|
||||
function getFields(selectFieldType) {
|
||||
if (typeof selectFieldType === "undefined") {
|
||||
return fetchAllFields();
|
||||
}
|
||||
var error = validateGetAllFieldsArgument(selectFieldType);
|
||||
if (error) {
|
||||
return Promise.reject(new Error(error));
|
||||
}
|
||||
return fetchAllFields(Array.isArray(selectFieldType) ? selectFieldType : [selectFieldType]);
|
||||
}
|
||||
return getFields;
|
||||
}
|
||||
|
||||
var kintone = window.kintone;
|
||||
var kintoneClient = createKintoneClient(kintone);
|
||||
var getFields = createGetFields(kintoneClient, kintone.Promise);
|
||||
|
||||
exports.getFields = getFields;
|
||||
|
||||
Object.defineProperty(exports, '__esModule', { value: true });
|
||||
|
||||
})));
|
||||
@@ -1,4 +1,3 @@
|
||||
import '../css/mobile.css';
|
||||
(function (PLUGIN_ID) {
|
||||
kintone.events.on('mobile.app.record.index.show', () => {
|
||||
const spaceEl = kintone.mobile.app.getHeaderSpaceElement();
|
||||
@@ -1,5 +0,0 @@
|
||||
import { createApp } from 'vue'
|
||||
import './style.css'
|
||||
import App from './App.vue'
|
||||
|
||||
createApp(App).mount('#app')
|
||||
5
vue-project/my-kintone-plugin/src/main.ts
Normal file
5
vue-project/my-kintone-plugin/src/main.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
import { createApp } from 'vue';
|
||||
import Config from './components/Config.vue';
|
||||
import allComponent from 'kintone-ui-component';
|
||||
|
||||
createApp(Config, { pluginId: kintone.$PLUGIN_ID }).mount('#app');
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"$schema": "https://raw.githubusercontent.com/kintone/js-sdk/%40kintone/plugin-manifest-validator%4010.2.0/packages/plugin-manifest-validator/manifest-schema.json",
|
||||
"manifest_version": 1,
|
||||
"version": 2,
|
||||
"version": 1,
|
||||
"type": "APP",
|
||||
"desktop": {
|
||||
"js": [
|
||||
@@ -27,11 +27,11 @@
|
||||
]
|
||||
},
|
||||
"name": {
|
||||
"en": "data fetch pluging",
|
||||
"en": "data fetch plugin",
|
||||
"ja": "データ取得プラグイン"
|
||||
},
|
||||
"description": {
|
||||
"en": "create search data pluging",
|
||||
"en": "create search data plugin",
|
||||
"ja": "検索結果のデータを生成するプラグインです"
|
||||
},
|
||||
"mobile": {
|
||||
|
||||
@@ -1,79 +0,0 @@
|
||||
:root {
|
||||
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #242424;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #646cff;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
place-items: center;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.2em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
background-color: #1a1a1a;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
button:hover {
|
||||
border-color: #646cff;
|
||||
}
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
#app {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color: #213547;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
a:hover {
|
||||
color: #747bff;
|
||||
}
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
7
vue-project/my-kintone-plugin/src/types/kintone-components.d.ts
vendored
Normal file
7
vue-project/my-kintone-plugin/src/types/kintone-components.d.ts
vendored
Normal file
@@ -0,0 +1,7 @@
|
||||
declare global {
|
||||
namespace JSX {
|
||||
interface IntrinsicElements {
|
||||
[key: string]: any;
|
||||
}
|
||||
}
|
||||
}
|
||||
29
vue-project/my-kintone-plugin/src/types/kintone.d.ts
vendored
Normal file
29
vue-project/my-kintone-plugin/src/types/kintone.d.ts
vendored
Normal file
@@ -0,0 +1,29 @@
|
||||
// https://cybozu.dev/ja/kintone/docs/overview/field-types/
|
||||
// https://cybozudev.kf5.com/hc/kb/article/201593/
|
||||
declare namespace kintone.fieldTypes {
|
||||
interface TABLE {
|
||||
type: 'SUBTABLE';
|
||||
value: any;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// lookup https://cybozudev.kf5.com/hc/kb/article/1611088/
|
||||
// import { KintoneRestAPIClient } from '@kintone/rest-api-client';
|
||||
// // 定义了一个Lookup类型,其中给lookup设置的是对象类型
|
||||
// // 下面还有展开,到具体用的时候还会定义的更详细,这里够用了
|
||||
// export type Lookup = {
|
||||
// label: string;
|
||||
// code: string;
|
||||
// lookup: object;
|
||||
// };
|
||||
// // 创建sdk客户端
|
||||
// const client = new KintoneRestAPIClient({
|
||||
// baseUrl: 'https://yourdomain.cybozu.cn',
|
||||
// });
|
||||
// // 获取一个应用中所有类型是Lookup的字段
|
||||
// export const getFormSetting = async () => {
|
||||
// const prop = (await client.app.getFormFields({ app: kintone.app.getId() as number })).properties;
|
||||
// const lookUpFields = Object.values(prop).filter((f) => 'lookup' in f) as Lookup[];
|
||||
// return lookUpFields;
|
||||
// };
|
||||
14
vue-project/my-kintone-plugin/tsconfig.json
Normal file
14
vue-project/my-kintone-plugin/tsconfig.json
Normal file
@@ -0,0 +1,14 @@
|
||||
{
|
||||
"extends": "@vue/tsconfig/tsconfig.dom.json",
|
||||
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
|
||||
"exclude": ["src/**/__tests__/*"],
|
||||
"files" : [
|
||||
"./node_modules/@kintone/dts-gen/kintone.d.ts",
|
||||
],
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -2,31 +2,62 @@ import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import copy from "rollup-plugin-copy";
|
||||
import path from 'path';
|
||||
import fs from 'fs';
|
||||
function replaceKucTagsPlugin() {
|
||||
return {
|
||||
name: 'vite-plugin-replace-tags',
|
||||
async load(id) {
|
||||
if (id.endsWith('.vue')) {
|
||||
const content = await fs.promises.readFile(id, 'utf-8');
|
||||
|
||||
return content
|
||||
.replace(/<\/kuc-([a-zA-Z0-9-]+)(?![0-9-])>/g, (match, p1) => `</kuc-${p1}-1-18-0>`)
|
||||
.replace(/<kuc-([a-zA-Z0-9-]+)(?![0-9-])([^>]*)>/g, (match, p1, p2) => `<kuc-${p1}-1-18-0${p2}>`);
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
vue(),
|
||||
vue({
|
||||
template: {
|
||||
compilerOptions: {
|
||||
isCustomElement: (tag) => tag.startsWith("kuc-"),
|
||||
}
|
||||
}
|
||||
}),
|
||||
copy({
|
||||
targets: [
|
||||
{ src: 'dist/index.html', dest: 'dist/src/html', rename: 'config.html' }
|
||||
{ src: 'dist/index.html', dest: 'dist/src/html', rename: 'config.html' },
|
||||
{ src: 'src/manifest.json', dest: 'dist/src' },
|
||||
{ src: 'src/assets/*', dest: 'dist/src/image' },
|
||||
{ src: 'src/css/*', dest: 'dist/src/css' },
|
||||
],
|
||||
hook: 'writeBundle' // 指定在何时复制文件
|
||||
})
|
||||
}),
|
||||
replaceKucTagsPlugin()
|
||||
],
|
||||
build:{
|
||||
rollupOptions:{
|
||||
input:{
|
||||
config:path.resolve(__dirname,'index.html'),
|
||||
desktop:path.resolve(__dirname,'src/js/desktop.js'),
|
||||
mobile:path.resolve(__dirname,'src/js/mobile.js'),
|
||||
build: {
|
||||
rollupOptions: {
|
||||
input: {
|
||||
config: path.resolve(__dirname, 'index.html'),
|
||||
desktop: path.resolve(__dirname, 'src/js/desktop.ts'),
|
||||
mobile: path.resolve(__dirname, 'src/js/mobile.ts'),
|
||||
},
|
||||
output:{
|
||||
output: {
|
||||
entryFileNames: (chunkInfo) => {
|
||||
// console.log(chunkInfo);
|
||||
return 'src/js/[name].js'; // 默认处理为 JS 文件
|
||||
},
|
||||
assetFileNames:'src/[ext]/[name].[ext]'
|
||||
assetFileNames: (assetInfo) => {
|
||||
if (assetInfo.names[0].endsWith('.css') && assetInfo.originalFileNames[0] === 'index.html') {
|
||||
return 'src/css/config.css';
|
||||
}
|
||||
// 其他资源文件的默认处理
|
||||
return 'src/[ext]/[name].[ext]';
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user