upload code

src/components/Config.vue

@@ -0,0 +1,81 @@
+<template>
+  <h2 class="settings-heading">{{ $t('config.title') }}</h2>
+  <p class="kintoneplugin-desc">{{ $t('config.desc') }}</p>
+
+  <div id="main-area" ref="mainArea">
+    <plugin-input v-model="setting.buttonName" :error="error" :label="$t('config.button.label')" required-icon />
+    <plugin-input v-model="setting.message" :label="$t('config.message.label')" />
+  </div>
+
+  <div class="action-area">
+    <kuc-button text="キャンセル" type="normal" @click="cancel" />
+    <kuc-button :disabled="loading" text="保存する" class="save-btn" type="submit" @click="save" />
+  </div>
+
+  <!-- 必须使用 v-show 让 spinner dom 创建的时候不显示 -->
+  <kuc-spinner :container="mainArea" v-show="loading" ref="spinner"></kuc-spinner>
+</template>
+<script setup lang="ts">
+import type { Setting } from '@/types/model';
+import { useI18n } from 'vue-i18n';
+import type { Spinner } from 'kintone-ui-component';
+
+import { nextTick, onMounted, reactive, ref, shallowRef, watch } from 'vue';
+
+// i18n
+const { t: $t } = useI18n();
+
+const props = defineProps<{ pluginId: string }>();
+const setting: Setting = reactive({
+  buttonName: '',
+  message: '',
+});
+const error = ref('')
+const loading = ref(false);
+
+const mainArea = shallowRef<HTMLElement | null>(null);
+const spinner = shallowRef<Spinner | null>(null);
+
+onMounted(async () => {
+  // 先将整体页面渲染出来，再弹出 spinner 进行数据读取
+  nextTick(async () => {
+    loading.value = true;
+    const savedSetting = kintone.plugin.app.getConfig(props.pluginId);
+    setting.buttonName = savedSetting?.buttonName || $t('config.button.default');
+    setting.message = savedSetting?.message || $t('config.message.default');
+    // 暂停 1s 用于展示 spinner Demo
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+    loading.value = false;
+  });
+});
+
+// 使用 loading 状态控制 spinner
+watch(loading, (load) => {
+  load ? spinner.value?.open() : spinner.value?.close();
+});
+
+function validate(setting: Setting): boolean {
+  if (!setting.buttonName.trim()) {
+    error.value = 'ボタン名を入力してください。';
+    return false;
+  }
+  return true;
+}
+
+async function save() {
+  if(!validate(setting)){
+    return;
+  }
+  loading.value = true;
+  // 暂停 1s 用于展示 spinner Demo
+  await new Promise((resolve) => setTimeout(resolve, 1000));
+  kintone.plugin.app.setConfig({
+    buttonName: setting.buttonName,
+    message: setting.message,
+  });
+}
+
+function cancel() {
+  window.location.href = `../../${kintone.app.getId()}/plugin/`;
+}
+</script>

src/components/basic/PluginInput.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="kintoneplugin-input-container flex-row">
+    <plugin-label v-if="label" :label="label" :required-icon="requiredIcon" />
+    <kuc-text v-bind="textProps" :value="modelValue" @change="updateValue" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { KucEvent } from '@/types/my-kintone';
+import type { TextProps, TextInputEventDetail } from 'kintone-ui-component/lib/text';
+import { defineProps, defineEmits, computed } from 'vue';
+
+// kuc 不支持 v-model 的写法，所以如果想要使用需要包装一下
+const props = withDefaults(defineProps<TextProps & {
+  modelValue: string;
+}>(), {
+  // boolean 的处理有点问题，这里手动重新定义
+  disabled: undefined,
+  requiredIcon: undefined,
+  visible: undefined
+});
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void;
+}>();
+
+const textProps = computed<TextProps>(() => {
+  const baseProps = {
+    ...props,
+    label: '', // 在 plugin-label 处显示 label，不传入 text
+    className: `kuc-text-input${props.className ? ` ${props.className}` : ''}`,
+  };
+
+  // 过滤掉所有值为 undefined 的属性
+  return Object.fromEntries(
+    Object.entries(baseProps).filter(([_, value]) => value !== undefined)
+  ) as TextProps;
+});
+
+const updateValue = ({ detail }: KucEvent<TextInputEventDetail>) => {
+  emit('update:modelValue', detail.value || '');
+};
+</script>

src/components/basic/PluginLabel.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="kintoneplugin-label">
+    <span>{{ label }}</span>
+    <span v-if="requiredIcon" class="kintoneplugin-label-required-icon">*</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps } from 'vue';
+
+const props = defineProps<{
+  label: string;
+  requiredIcon?: boolean | undefined,
+}>();
+</script>

src/css/config.css

@@ -0,0 +1,73 @@
+/* 辅助类 */
+.flex-row {
+  display: flex;
+}
+.hidden {
+  visibility: hidden;
+}
+
+/* config 页面 */
+#app {
+  width: 60vw;
+  min-width: 1030px;
+}
+
+/* 最上面的说明 */
+.settings-heading {
+  padding: 1em 0;
+  margin-bottom: 8px;
+}
+
+/* label 样式 */
+.kintoneplugin-label {
+  padding-left: 20px;
+  line-height: 40px;
+}
+
+.kintoneplugin-label-required-icon {
+  font-size: 20px;
+  vertical-align: -3px;
+  color: #e74c3c;
+  margin-left: 4px;
+  line-height: 1;
+}
+
+/* label input 单行的情况 */
+.flex-row .kintoneplugin-label {
+  margin: 0;
+  width: 8.5em;
+}
+
+/* 底部按钮空间 */
+.action-area {
+  padding: 24px 0;
+  margin-bottom: 32px;
+  text-align: right;
+  border-top: none;
+}
+.save-btn {
+  margin-left: 16px;
+  margin-right: 24px;
+}
+
+/* loading 遮罩 */
+#main-area {
+  position: relative;
+}
+#main-area [class^="kuc-spinner"][class$="__mask"] {
+  position: absolute;
+  background-color: white;
+}
+#main-area [class^="kuc-spinner"][class$="__spinner"] {
+  position: absolute;
+}
+#main-area [class^="kuc-spinner"][class$="__spinner__loader"] {
+  fill: #3498db;
+}
+
+/* 输入框宽度 */
+.kuc-text-input {
+  --kuc-text-input-width: max(16vw, 200px);
+  --kuc-dropdown-toggle-width: max(16vw, 200px);
+  --kuc-combobox-toggle-width: max(16vw, 200px);
+}

src/i18n/index.ts

@@ -0,0 +1,13 @@
+import { createI18n } from 'vue-i18n';
+import ja from './lang/ja';
+import en from './lang/en';
+
+const i18n = createI18n({
+  legacy: false,
+  locale: kintone.getLoginUser().language || 'ja',
+  messages: {
+    ja,
+    en,
+  },
+});
+export default i18n;

src/i18n/lang/en.ts

@@ -0,0 +1,14 @@
+export default {
+  config: {
+    title: 'kintone Vue template',
+    desc: 'kintone Vue template for creating plugin',
+    button: {
+      label: 'button name',
+      default: 'button'
+    },
+    message: {
+      label: 'message',
+      default: ''
+    },
+  },
+};

src/i18n/lang/ja.ts

@@ -0,0 +1,14 @@
+export default {
+  config: {
+    title: 'kintone Vue テンプレート',
+    desc: 'kintoneプラグイン作成用 Vue テンプレート',
+    button: {
+      label: 'ボタン名',
+      default: 'ボタン'
+    },
+    message: {
+      label: 'メッセージ',
+      default: ''
+    },
+  },
+};

src/js/desktop.ts

@@ -0,0 +1,36 @@
+import type { Setting } from '@/types/model';
+import { KintoneRestAPIClient } from '@kintone/rest-api-client';
+
+(function (PLUGIN_ID) {
+  kintone.events.on('app.record.index.show', () => {
+    // App id
+    const appId = kintone.app.getId()?.toString();
+    if (!appId) return;
+
+    // get setting
+    const setting: Setting = kintone.plugin.app.getConfig(PLUGIN_ID);
+
+    // header space
+    const headerSpace = kintone.app.getHeaderMenuSpaceElement();
+    if (!headerSpace) {
+      throw new Error('このページではヘッダー要素が利用できません。');
+    }
+
+    const btnId = 'template-btn-id';
+    // ボタン追加
+    if (document.getElementById(btnId)) return;
+    const button = new Kucs[KUC_VERSION].Button({
+      text: setting.buttonName,
+      type: 'submit',
+      id: btnId,
+    });
+    const client = new KintoneRestAPIClient();
+    button.addEventListener('click', async () => {
+      const { plugins } = await client.app.getPlugins({
+        app: appId
+      })
+      alert(setting.message + "\n--------\n【Plugins】 " + plugins.map(p => p.name).join('、'));
+    });
+    headerSpace.appendChild(button);
+  });
+})(kintone.$PLUGIN_ID);

src/js/mobile.ts

@@ -0,0 +1,36 @@
+import type { Setting } from '@/types/model';
+import { KintoneRestAPIClient } from '@kintone/rest-api-client';
+
+(function (PLUGIN_ID) {
+  kintone.events.on('mobile.app.record.index.show', () => {
+    // App id
+    const appId = kintone.app.getId()?.toString();
+    if (!appId) return;
+
+    // get setting
+    const setting: Setting = kintone.plugin.app.getConfig(PLUGIN_ID);
+
+    // header space
+    const headerSpace = kintone.mobile.app.getHeaderSpaceElement();
+    if (!headerSpace) {
+      throw new Error('このページではヘッダー要素が利用できません。');
+    }
+
+    const btnId = 'template-btn-id';
+    // ボタン追加
+    if (document.getElementById(btnId)) return;
+    const button = new Kucs[KUC_VERSION].MobileButton({
+      text: setting.buttonName,
+      type: 'submit',
+      id: btnId,
+    });
+    const client = new KintoneRestAPIClient();
+    button.addEventListener('click', async () => {
+      const { plugins } = await client.app.getPlugins({
+        app: appId
+      })
+      alert(setting.message + "\n--------\n【Plugins】 " + plugins.map(p => p.name).join('、'));
+    });
+    headerSpace.appendChild(button);
+  });
+})(kintone.$PLUGIN_ID);

src/main.ts

@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import Config from './components/Config.vue';
+import i18n from './i18n';
+
+createApp(Config, { pluginId: kintone.$PLUGIN_ID }).use(i18n).mount('#app');

src/manifest.json

@@ -0,0 +1,50 @@
+{
+  "$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": 1,
+  "type": "APP",
+  "desktop": {
+    "js": [
+      "js/kuc.min.js",
+      "js/desktop.js"
+    ],
+    "css": [
+      "css/desktop.css"
+    ]
+  },
+  "icon": "image/icon.png",
+  "config": {
+    "html": "html/config.html",
+    "js": [
+      "js/config.js"
+    ],
+    "css": [
+      "css/51-modern-default.css",
+      "css/config.css"
+    ],
+    "required_params": [
+      "buttonName"
+    ]
+  },
+  "name": {
+    "en": "kintone Vue template",
+    "ja": "kintone Vue テンプレート"
+  },
+  "description": {
+    "en": "kintone Vue template for creating plugin",
+    "ja": "kintoneプラグイン作成用 Vue テンプレート"
+  },
+  "homepage_url": {
+    "en": "https://www.alicorns.co.jp/",
+    "ja": "https://www.alicorns.co.jp/"
+  },
+  "mobile": {
+    "js": [
+      "js/kuc.min.js",
+      "js/mobile.js"
+    ],
+    "css": [
+      "css/mobile.css"
+    ]
+  }
+}

src/types/index.d.ts

@@ -0,0 +1,8 @@
+declare global  {
+    const Kucs: {
+      [version: string]: any;
+    };
+    const KUC_VERSION: string;
+    const KUC_VERSION_DASHED: string;
+}
+export {};

src/types/model.d.ts

@@ -0,0 +1,4 @@
+export interface Setting {
+  buttonName: string;
+  message: string;
+}

src/types/my-kintone.d.ts

@@ -0,0 +1,11 @@
+import { KintoneFormFieldProperty } from '@kintone/rest-api-client';
+
+export interface KucEvent<T> {
+  detail: T;
+}
+
+export type SelectType =
+  | KintoneFormFieldProperty.CheckBox
+  | KintoneFormFieldProperty.RadioButton
+  | KintoneFormFieldProperty.Dropdown
+  | KintoneFormFieldProperty.MultiSelect;