https://wws.jp/ 2026-05-14T08:22:48+00:00 https://wws.jp/ https://wws.jp/_media/favicon.ico text/html 2024-12-18T02:32:14+00:00 Anonymous (anonymous@undisclosed.example.com) https://wws.jp/vuejs/vue3/ace9_form?rev=1734489134&do=diff Vue.js 3.x Ace9 Form コンポーネント 要求 * Ace9 Editor のエラーメッセージ表示付きコンポーネント * v-model 対応 コード import { computed, nextTick, onMounted, reactive, watch } from 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.2/vue.esm-browser.js'; import * as Util from 'https://wws.jp/_export/code/vuejs/vue3/form_utils?codeblock=0'; const Ace9Form = { template: ` <div :class="computedControlWrapperClasses" :style="controlWrapperStyles"> <pre :id="state.editorId" :style="editorStyle"></pre> <div :c… text/html 2024-12-18T02:32:14+00:00 Anonymous (anonymous@undisclosed.example.com) https://wws.jp/vuejs/vue3/checkbox_form?rev=1734489134&do=diff Vue.js 3.x CheckboxForm コンポーネント 要求 * checkbox タグのエラーメッセージ表示付きコンポーネント * 複数の選択候補から選択する複数チェックボックスとして機能させたい * 単一フィールドの Boolean 値切り替え用途は text/html 2024-12-18T02:32:14+00:00 Anonymous (anonymous@undisclosed.example.com) https://wws.jp/vuejs/vue3/combo_form?rev=1734489134&do=diff Vue.js 3.x ComboForm コンポーネント 要求 * 以下のタイプを実装するボタンとエラーメッセージ表示付き input コンポーネント （但し、ボタン部分はエラー色にならない） * text * password text/html 2024-12-18T02:32:14+00:00 Anonymous (anonymous@undisclosed.example.com) https://wws.jp/vuejs/vue3/filter?rev=1734489134&do=diff Filter 要望・要求 * レコードの一覧を絞り込む際に指定する、複雑な検索条件の設定を実装したい。 * フィールド定義をもとに自動的に生成できるとよい。 * 一旦設定した検索条件を保存し、再利用できるようにしたい。 text/html 2024-12-18T02:32:14+00:00 Anonymous (anonymous@undisclosed.example.com) https://wws.jp/vuejs/vue3/form_styles?rev=1734489134&do=diff Vue.js 3.x Form 用の CSS ライブラリ @media screen and (min-width: 768px) { .sm-text-right { text-align: right; } div.table-form-wrapper { display: flex; margin-left: 5px; margin-right: 5px; } div.table-form-wrapper:first-child > div { border-top: 1px solid lightgray; } div.table-label-wrapper { padding: 13px 12px 4px 12px; border-right: 1px solid lightgray; border-bottom: 1px solid lightgray; border-left: 1px solid lightgray; background-col… text/html 2024-12-18T02:32:14+00:00 Anonymous (anonymous@undisclosed.example.com) https://wws.jp/vuejs/vue3/form_utils?rev=1734489134&do=diff Vue.js 3.x Form 用の JS ライブラリ export function appendScript(src, integrity, crossorigin, onLoad) { const el = document.createElement('script'); el.src = src; if (integrity) el.integrity = integrity; if (crossorigin) el.crossorigin = crossorigin; el.addEventListener('load', onLoad, {once: true}); document.body.appendChild(el); } export function appendCss(URL) { const el = document.createElement('link'); el.href = URL; el.rel = 'stylesheet'; el.type = 'text/css'; documen… text/html 2024-12-18T02:32:14+00:00 Anonymous (anonymous@undisclosed.example.com) https://wws.jp/vuejs/vue3/input_form?rev=1734489134&do=diff Vue.js 3.x InputForm コンポーネント 要求 * input の以下のタイプを実装するエラーメッセージ表示付きコンポーネント * text * password * email * url * number * date * time * file デザイン的に無理だった。。。 text/html 2024-12-18T02:32:14+00:00 Anonymous (anonymous@undisclosed.example.com) https://wws.jp/vuejs/vue3/labeled_checkbox_form?rev=1734489134&do=diff Vue.js 3.x LabeledCheckboxForm コンポーネント 要求 * Checkbox タグのラベル付きコンポーネント * v-model 対応 * 再利用可能なコンポーネントとする。 コード import LabeledForm from '/_export/code/vuejs/vue3/labeled_form?codeblock=0'; import CheckboxForm from '/_export/code/vuejs/vue3/checkbox_form?codeblock=0'; const LabeledCheckboxForm = { template: ` <labeled-form :errors="errors" :label-text="labelText" :form-wrapper-classes="formWrapperClasses" :form-wrapper-styles="formWrapperStyles" :label-… text/html 2024-12-18T02:32:14+00:00 Anonymous (anonymous@undisclosed.example.com) https://wws.jp/vuejs/vue3/labeled_combo_form?rev=1734489134&do=diff Vue.js 3.x LabeledComboForm コンポーネント 要求 * input の以下のタイプを実装するラベル付きコンポーネント * text * password * email * url * number * date * time * v-model 対応 * 再利用可能なコンポーネントとする。 text/html 2024-12-18T02:32:14+00:00 Anonymous (anonymous@undisclosed.example.com) https://wws.jp/vuejs/vue3/labeled_form?rev=1734489134&do=diff Vue.js 3.x で作る LabeledForm 要求 * ラベル、入力コントロールを再利用可能な形でレイアウトしたい. * モバイル向けでないレイアウトの場合、ラベルと入力コントロールのラッパーの高さを同じにしたい. text/html 2024-12-18T02:32:14+00:00 Anonymous (anonymous@undisclosed.example.com) https://wws.jp/vuejs/vue3/labeled_input_form?rev=1734489134&do=diff Vue.js 3.x LabeledInputForm コンポーネント 要求 * input の以下のタイプを実装するラベル付きコンポーネント * text * password * email * url * number * date * time * v-model 対応 * 再利用可能なコンポーネントとする。 text/html 2024-12-18T02:32:14+00:00 Anonymous (anonymous@undisclosed.example.com) https://wws.jp/vuejs/vue3/labeled_radio_form?rev=1734489134&do=diff Vue.js 3.x LabeledRadioForm コンポーネント 要求 * Radio タグのラベル付きコンポーネント * v-model 対応 * 再利用可能なコンポーネントとする。 コード import LabeledForm from '/_export/code/vuejs/vue3/labeled_form?codeblock=0'; import RadioForm from '/_export/code/vuejs/vue3/radio_form?codeblock=0'; const LabeledRadioForm = { template: ` <labeled-form :errors="errors" :label-text="labelText" :form-wrapper-classes="formWrapperClasses" :form-wrapper-styles="formWrapperStyles" :label-wrapper-classes… text/html 2024-12-18T02:32:14+00:00 Anonymous (anonymous@undisclosed.example.com) https://wws.jp/vuejs/vue3/labeled_select_form?rev=1734489134&do=diff Vue.js 3.x LabeledSelectForm コンポーネント 要求 * SELECT タグのラベル付きコンポーネント * v-model 対応 * 再利用可能なコンポーネントとする。 コード import LabeledForm from '/_export/code/vuejs/vue3/labeled_form?codeblock=0'; import SelectForm from '/_export/code/vuejs/vue3/select_form?codeblock=0'; const LabeledSelectForm = { template: ` <labeled-form :errors="errors" :label-text="labelText" :form-wrapper-classes="formWrapperClasses" :form-wrapper-styles="formWrapperStyles" :label-wrapper-c… text/html 2024-12-18T02:32:14+00:00 Anonymous (anonymous@undisclosed.example.com) https://wws.jp/vuejs/vue3/labeled_switch_form?rev=1734489134&do=diff Vue.js 3.x LabeledSwitchForm コンポーネント 要求 * Checkbox タグのラベル付きコンポーネント * v-model 対応 * 再利用可能なコンポーネントとする。 コード import LabeledForm from '/_export/code/vuejs/vue3/labeled_form?codeblock=0'; import SwitchForm from '/_export/code/vuejs/vue3/switch_form?codeblock=0'; const LabeledSwitchForm = { template: ` <labeled-form :errors="errors" :label-text="labelText" :form-wrapper-classes="formWrapperClasses" :form-wrapper-styles="formWrapperStyles" :label-wrapper-… text/html 2024-12-18T02:32:14+00:00 Anonymous (anonymous@undisclosed.example.com) https://wws.jp/vuejs/vue3/labeled_textarea_form?rev=1734489134&do=diff Vue.js 3.x LabeledTextareaForm コンポーネント 要求 * textarea を実装するラベル付きコンポーネント * v-model 対応 * 再利用可能なコンポーネントとする。 * 指定可能な属性が異なるため、$attr をバインドするが、対応できない場合は別のコンポーネントとしてで作成する。 text/html 2024-12-18T02:32:14+00:00 Anonymous (anonymous@undisclosed.example.com) https://wws.jp/vuejs/vue3/labeled_two_inputs_form?rev=1734489134&do=diff Vue.js 3.x LabeledTwoInputsForm コンポーネント 要求 * 2 つのテキスト入力を実装するラベル付きコンポーネント * v-model 対応 * 再利用可能なコンポーネントとする。 * 指定可能な属性が異なるため、$attr をバインドするが、対応できない場合は別のコンポーネントとしてで作成する。 text/html 2024-12-18T02:32:14+00:00 Anonymous (anonymous@undisclosed.example.com) https://wws.jp/vuejs/vue3/load_from_cdn?rev=1734489134&do=diff Vue.js 3.x を CDN からロードする ESM 形式でのライブラリロードに挑戦します。 サンプルコード Vue というグローバルオブジェクトを呼び出す形で実装したかったのですがオブジェクトが見つからず、その中身である createApp などを直接呼び出す様です。 text/html 2024-12-18T02:32:14+00:00 Anonymous (anonymous@undisclosed.example.com) https://wws.jp/vuejs/vue3/modal_container?rev=1734489134&do=diff Modal Dialog 要求 * 素早く簡単に Modal Dialiaog が実装できるよう、コンポーネント化したい。 Code import { ref, reactive } from 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.2/vue.esm-browser.js'; const ModalContainer = { template: ` <component is="style"> .modal { display: none; } .modal-backdrop { z-index: 0; background: rgba(0, 0, 0, 0.4); } /* vueのtransitionを使わないなら不要 */ .fade-enter-active, .fade-leave-active { transition: opacity .15s; } .fade-enter, .fade-leave-to { opaci… text/html 2024-12-18T02:32:14+00:00 Anonymous (anonymous@undisclosed.example.com) https://wws.jp/vuejs/vue3/paginator?rev=1734489134&do=diff Paginator この実装を Vue3 用に移植してみました。 <https://github.com/lokyoung/vuejs-paginate/blob/master/src/components/Paginate.vue> 実際にリストに実装しての確認は、まだしていません。。。 Code import { onBeforeUpdate, ref, computed } from 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.2/vue.esm-browser.js'; const Paginator = { template: ` <component is="style"> ul.paginator a { cursor: pointer; } </component> <ul class="paginator" :class="containerClass" v-if="!noLiSurround"> <li v-if="firstLastButton" :class="[p… text/html 2024-12-18T02:32:14+00:00 Anonymous (anonymous@undisclosed.example.com) https://wws.jp/vuejs/vue3/radio_form?rev=1734489134&do=diff Vue.js 3.x RadioForm コンポーネント 要求 Radio タグのエラーメッセージ表示付きコンポーネント コード import { computed } from 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.2/vue.esm-browser.js'; import { getWrapClass, generalizeOptions } from 'https://wws.jp/_export/code/vuejs/vue3/form_utils?codeblock=0'; const RadioForm = { template: ` <div :class="computedControlWrapperClasses" :style="controlWrapperStyles"> <label v-for="(opt, idx) in computedOptions" :class="optionClasses" :style="optionSt… text/html 2024-12-18T02:32:14+00:00 Anonymous (anonymous@undisclosed.example.com) https://wws.jp/vuejs/vue3/select_form?rev=1734489134&do=diff Vue.js 3.x SelectForm コンポーネント 要求 select タグのエラーメッセージ表示付きコンポーネント コード import { computed } from 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.2/vue.esm-browser.js'; import { getWrapClass, generalizeOptions } from 'https://wws.jp/_export/code/vuejs/vue3/form_utils?codeblock=0'; const SelectForm = { template: ` <div :class="computedControlWrapperClasses" :style="controlWrapperStyles"> <select class="form-control" :class="controlClasses" :style="controlStyles" … text/html 2024-12-18T02:32:14+00:00 Anonymous (anonymous@undisclosed.example.com) https://wws.jp/vuejs/vue3/start?rev=1734489134&do=diff v3 v2 からの変更点 v3.x でも 引き続き Options API が使えるようですが、後学のために自作コンポーネントは Composition API で構築してみます。 v3.x ではカスタムコンポーネントを v-model 対応にする場合、:target 指定が必須になったようです。v3.x から複数 v-model 対応が可能になったことによる変更と思われます。 text/html 2024-12-18T02:32:14+00:00 Anonymous (anonymous@undisclosed.example.com) https://wws.jp/vuejs/vue3/svg_loading_indicator?rev=1734489134&do=diff Vue3 SVG Loading Indicator コンポーネント コード const SvgLoading = { template: ` <div> <component is="style"> .shade { position: fixed; display: flex; top: 0; left: 0; width: 100%; height: 100%; background: #333; opacity: 0.7; justify-content: center; align-items: center; z-index: 9999; } </component> <div class="shade… text/html 2024-12-18T02:32:14+00:00 Anonymous (anonymous@undisclosed.example.com) https://wws.jp/vuejs/vue3/switch_form?rev=1734489134&do=diff Vue.js 3.x SwitchForm コンポーネント 要求 * checkbox を Boolean 値の制御に使用するコンポーネント コード import { computed } from 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.2/vue.esm-browser.js'; import { getWrapClass, generalizeOptions } from 'https://wws.jp/_export/code/vuejs/vue3/form_utils?codeblock=0'; const CheckboxForm = { template: ` <div :class="computedControlWrapperClasses" :style="controlWrapperStyles"> <label> <input type="checkbox" :class="controlClasses" :st… text/html 2024-12-18T02:32:14+00:00 Anonymous (anonymous@undisclosed.example.com) https://wws.jp/vuejs/vue3/textarea_form?rev=1734489134&do=diff Vue.js 3.x Textarea Form コンポーネント 要求 * textarea のエラーメッセージ表示付きコンポーネント * v-model 対応 コード import { computed } from 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.2/vue.esm-browser.js'; import { getWrapClass } from 'https://wws.jp/_export/code/vuejs/vue3/form_utils?codeblock=0'; const TextareaForm = { template: ` <div :class="computedControlWrapperClasses" :style="controlWrapperStyles"> <textarea class="form-control" :class="controlClasses" :style="controlStyles"… text/html 2024-12-18T02:32:14+00:00 Anonymous (anonymous@undisclosed.example.com) https://wws.jp/vuejs/vue3/two_inputs_form?rev=1734489134&do=diff Vue.js 3.x TwoInputsForm コンポーネント 要求 * 2 つの text input を実装するエラーメッセージ表示付きコンポーネント * v-model 対応 コード import { computed } from 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.11/vue.esm-browser.js'; import { getWrapClass } from 'https://wws.jp/_export/code/vuejs/vue3/form_utils?codeblock=0'; const TwoInputsForm = { template: ` <div :class="computedFirstControlWrapperClasses" :style="controlWrapperStyles"> <input class="form-control" :type="type" :class="controlClasses" … text/html 2024-12-18T02:32:14+00:00 Anonymous (anonymous@undisclosed.example.com) https://wws.jp/vuejs/vue3/vue_draggable_next?rev=1734489134&do=diff Vue.js 3.x で vue.draggable.next を 試す <https://github.com/SortableJS/vue.draggable.next> デモはこちら。<https://sortablejs.github.io/vue.draggable.next/#/simple> テーブルでのサンプル <https://github.com/SortableJS/vue.draggable.next/blob/master/example/components/table-example.vue> を実行してようと思ったが、デモの main.js を見ると <https://github.com/SortableJS/vue.draggable.next/blob/master/example/main.js> 依存するものが他にもあるようで、いったん断念。。。…