vue-dialog-view 1.0.0

package/LICENSE

@@ -0,0 +1,24 @@
+This is free and unencumbered software released into the public domain.
+
+Anyone is free to copy, modify, publish, use, compile, sell, or
+distribute this software, either in source code form or as a compiled
+binary, for any purpose, commercial or non-commercial, and by any
+means.
+
+In jurisdictions that recognize copyright laws, the author or authors
+of this software dedicate any and all copyright interest in the
+software to the public domain. We make this dedication for the benefit
+of the public at large and to the detriment of our heirs and
+successors. We intend this dedication to be an overt act of
+relinquishment in perpetuity of all present and future rights to this
+software under copyright law.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
+OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
+ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
+
+For more information, please refer to <https://unlicense.org/>

package/README.md

@@ -0,0 +1,116 @@
+# vue-dialog-view
+
+A modern Vue 3 dialog component using the native HTML5 `<dialog>` element.
+
+## Features
+
+- 🎯 **Native HTML5 Dialog** - Uses the built-in `<dialog>` element for better accessibility and performance
+- 🎨 **Customizable** - Configurable title bar and close button
+- ♿ **Accessible** - Proper ARIA labels and keyboard support
+- 📱 **Responsive** - Adapts to different screen sizes
+- 🎪 **Slot Support** - Flexible content slots for title and main content
+- 🎭 **Vue 3 Ready** - Built with Composition API and TypeScript
+- 🎨 **Zero CSS Setup** - Styles are automatically injected, no need to import CSS files
+
+## Installation
+
+```bash
+npm i vue-dialog-view
+```
+
+## Usage
+
+### Global Registration
+
+```javascript
+import { createApp } from 'vue'
+import App from './App.vue'
+import DialogView from 'vue-dialog-view'
+
+const app = createApp(App)
+app.use(DialogView)
+app.mount('#app')
+```
+
+### Local Registration
+
+```vue
+<template>
+  <div>
+    <button @click="showDialog = true">Open Dialog</button>
+    
+    <DialogView v-model="showDialog">
+      <template #title>
+        Dialog Title
+      </template>
+      
+      <p>This is your dialog content!</p>
+      <p>You can put any content here.</p>
+    </DialogView>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { DialogView } from 'vue-dialog-view'
+
+const showDialog = ref(false)
+</script>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `modelValue` | `boolean` | **required** | Controls the visibility of the dialog |
+| `showTitleBar` | `boolean` | `true` | Whether to show the title bar |
+| `showCloseButton` | `boolean` | `true` | Whether to show the close button in title bar |
+
+## Events
+
+| Event | Description |
+|-------|-------------|
+| `update:modelValue` | Emitted when dialog visibility changes |
+
+## Slots
+
+| Slot | Description |
+|------|-------------|
+| `#title` | Content for the dialog title |
+| `default` | Main content of the dialog |
+
+## Methods
+
+The component exposes the following methods via template refs:
+
+```vue
+<template>
+  <DialogView ref="dialogRef" v-model="showDialog">
+    <!-- content -->
+  </DialogView>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const dialogRef = ref()
+
+// Open dialog programmatically
+dialogRef.value.open()
+
+// Close dialog programmatically  
+dialogRef.value.close()
+</script>
+```
+
+## Browser Support
+
+This component requires a browser that supports the HTML5 `<dialog>` element. For older browsers, consider using a polyfill.
+
+## License
+
+Unlicense - See LICENSE file for details.
+
+## Contributing
+
+Issues and pull requests are welcome! Please feel free to contribute.

package/dist/DialogView.vue.d.ts

@@ -0,0 +1,37 @@
+interface Props {
+    modelValue: boolean;
+    showTitleBar?: boolean;
+    showCloseButton?: boolean;
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        title?(_: {}): any;
+        default?(_: {}): any;
+    };
+    refs: {
+        dialogRef: HTMLDialogElement;
+    };
+    rootEl: HTMLDialogElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<Props, {
+    open: () => void;
+    close: () => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    showTitleBar: boolean;
+    showCloseButton: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    dialogRef: HTMLDialogElement;
+}, HTMLDialogElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/dialog-view.es.js

@@ -0,0 +1,61 @@
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".dialog-view[data-v-1ca83b6e]{padding:20px;border-radius:5px;border:1px solid gray;outline:0!important}.dialog-view[open][data-v-1ca83b6e]{display:flex;flex-direction:column;position:fixed;margin:auto;max-width:90vw;max-height:90vh}.dialog-view[data-v-1ca83b6e]::backdrop{background:#00000080}.dialog-title-bar[data-v-1ca83b6e]{display:flex;flex-direction:row;align-items:center;margin-bottom:.5em;min-height:24px}.dialog-title[data-v-1ca83b6e]{flex:1;text-align:center;font-weight:700;font-size:1.1em}.dialog-close-button[data-v-1ca83b6e]{margin-left:.5em;text-decoration:none;color:#666;font-size:1.5em;line-height:1;width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;background:none}.dialog-close-button[data-v-1ca83b6e]:hover{color:#333;background-color:#f0f0f0;border-radius:3px}.dialog-content[data-v-1ca83b6e]{flex:1;overflow:auto;display:flex;flex-direction:column}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
+import { defineComponent as g, ref as h, watch as w, nextTick as _, createElementBlock as n, openBlock as c, mergeProps as V, createCommentVNode as r, createElementVNode as u, renderSlot as p, withModifiers as B } from "vue";
+const k = {
+  key: 0,
+  class: "dialog-title-bar"
+}, y = { class: "dialog-title" }, C = { class: "dialog-content" }, D = /* @__PURE__ */ g({
+  __name: "DialogView",
+  props: {
+    modelValue: { type: Boolean },
+    showTitleBar: { type: Boolean, default: !0 },
+    showCloseButton: { type: Boolean, default: !0 }
+  },
+  emits: ["update:modelValue"],
+  setup(o, { expose: s, emit: t }) {
+    const a = o, i = t, e = h(null), v = () => {
+      e.value && !e.value.open && e.value.showModal();
+    }, d = () => {
+      e.value && e.value.open && e.value.close();
+    }, m = () => {
+      a.modelValue && i("update:modelValue", !1);
+    };
+    return w(() => a.modelValue, async (l) => {
+      await _(), l ? e.value && !e.value.open && e.value.showModal() : e.value && e.value.open && e.value.close();
+    }), s({
+      open: v,
+      close: d
+    }), (l, M) => (c(), n("dialog", V({
+      ref_key: "dialogRef",
+      ref: e,
+      class: "dialog-view"
+    }, l.$attrs, { onClose: m }), [
+      o.showTitleBar ? (c(), n("div", k, [
+        u("span", y, [
+          p(l.$slots, "title", {}, void 0, !0)
+        ]),
+        o.showCloseButton ? (c(), n("a", {
+          key: 0,
+          href: "javascript:void(0)",
+          role: "button",
+          "aria-label": "Close the dialog",
+          class: "dialog-close-button",
+          onClick: B(d, ["prevent"])
+        }, "×")) : r("", !0)
+      ])) : r("", !0),
+      u("div", C, [
+        p(l.$slots, "default", {}, void 0, !0)
+      ])
+    ], 16));
+  }
+}), b = (o, s) => {
+  const t = o.__vccOpts || o;
+  for (const [a, i] of s)
+    t[a] = i;
+  return t;
+}, f = /* @__PURE__ */ b(D, [["__scopeId", "data-v-1ca83b6e"]]);
+f.install = (o) => {
+  o.component("DialogView", f);
+};
+export {
+  f as default
+};

package/dist/dialog-view.umd.js

@@ -0,0 +1,2 @@
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".dialog-view[data-v-1ca83b6e]{padding:20px;border-radius:5px;border:1px solid gray;outline:0!important}.dialog-view[open][data-v-1ca83b6e]{display:flex;flex-direction:column;position:fixed;margin:auto;max-width:90vw;max-height:90vh}.dialog-view[data-v-1ca83b6e]::backdrop{background:#00000080}.dialog-title-bar[data-v-1ca83b6e]{display:flex;flex-direction:row;align-items:center;margin-bottom:.5em;min-height:24px}.dialog-title[data-v-1ca83b6e]{flex:1;text-align:center;font-weight:700;font-size:1.1em}.dialog-close-button[data-v-1ca83b6e]{margin-left:.5em;text-decoration:none;color:#666;font-size:1.5em;line-height:1;width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;background:none}.dialog-close-button[data-v-1ca83b6e]:hover{color:#333;background-color:#f0f0f0;border-radius:3px}.dialog-content[data-v-1ca83b6e]{flex:1;overflow:auto;display:flex;flex-direction:column}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
+(function(e,l){typeof exports=="object"&&typeof module<"u"?module.exports=l(require("vue")):typeof define=="function"&&define.amd?define(["vue"],l):(e=typeof globalThis<"u"?globalThis:e||self,e.DialogView=l(e.Vue))})(this,(function(e){"use strict";const l={key:0,class:"dialog-title-bar"},f={class:"dialog-title"},u={class:"dialog-content"},i=((t,c)=>{const n=t.__vccOpts||t;for(const[s,d]of c)n[s]=d;return n})(e.defineComponent({__name:"DialogView",props:{modelValue:{type:Boolean},showTitleBar:{type:Boolean,default:!0},showCloseButton:{type:Boolean,default:!0}},emits:["update:modelValue"],setup(t,{expose:c,emit:n}){const s=t,d=n,o=e.ref(null),p=()=>{o.value&&!o.value.open&&o.value.showModal()},r=()=>{o.value&&o.value.open&&o.value.close()},m=()=>{s.modelValue&&d("update:modelValue",!1)};return e.watch(()=>s.modelValue,async a=>{await e.nextTick(),a?o.value&&!o.value.open&&o.value.showModal():o.value&&o.value.open&&o.value.close()}),c({open:p,close:r}),(a,_)=>(e.openBlock(),e.createElementBlock("dialog",e.mergeProps({ref_key:"dialogRef",ref:o,class:"dialog-view"},a.$attrs,{onClose:m}),[t.showTitleBar?(e.openBlock(),e.createElementBlock("div",l,[e.createElementVNode("span",f,[e.renderSlot(a.$slots,"title",{},void 0,!0)]),t.showCloseButton?(e.openBlock(),e.createElementBlock("a",{key:0,href:"javascript:void(0)",role:"button","aria-label":"Close the dialog",class:"dialog-close-button",onClick:e.withModifiers(r,["prevent"])},"×")):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),e.createElementVNode("div",u,[e.renderSlot(a.$slots,"default",{},void 0,!0)])],16))}}),[["__scopeId","data-v-1ca83b6e"]]);return i.install=t=>{t.component("DialogView",i)},i}));

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+import { default as DialogView } from './DialogView.vue';
+export default DialogView;

package/package.json

@@ -0,0 +1,54 @@
+{
+    "name": "vue-dialog-view",
+    "version": "1.0.0",
+    "description": "A modern Vue 3 dialog component using native dialog element",
+    "type": "module",
+    "main": "./dist/dialog-view.umd.js",
+    "module": "./dist/dialog-view.es.js",
+    "types": "./dist/index.d.ts",
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "import": "./dist/dialog-view.es.js",
+            "require": "./dist/dialog-view.umd.js"
+        }
+    },
+    "files": [
+        "src/**",
+        "dist/**",
+        "README.md",
+        "tsconfig.json",
+        "vite.config.ts",
+        "LICENSE"
+    ],
+    "scripts": {
+        "dev": "vite",
+        "build": "vue-tsc --noEmit && vite build",
+        "preview": "vite preview"
+    },
+    "peerDependencies": {
+        "vue": "^3.3.0"
+    },
+    "devDependencies": {
+        "@vitejs/plugin-vue": "^6.0.1",
+        "typescript": "^5.9.3",
+        "vite": "^7.1.10",
+        "vite-plugin-css-injected-by-js": "^3.5.2",
+        "vite-plugin-dts": "^4.5.4",
+        "vue": "^3.5.22",
+        "vue-tsc": "^3.1.1"
+    },
+    "keywords": [
+        "front-end",
+        "vue",
+        "dialog",
+        "dialog-view",
+        "html5"
+    ],
+    "author": "chcs1013",
+    "license": "Unlicense",
+    "bugs": {
+        "url": "https://github.com/shc0743/MyUtility/issues"
+    },
+    "homepage": "https://github.com/shc0743/MyUtility/tree/main/js/lib/vue-dialog-view#readme"
+}

package/src/DialogView.vue

@@ -0,0 +1,149 @@
+<template>
+  <dialog
+    ref="dialogRef"
+    class="dialog-view"
+    v-bind="$attrs"
+    @close="handleDialogClose"
+  >
+    <div v-if="showTitleBar" class="dialog-title-bar">
+      <span class="dialog-title">
+        <slot name="title"></slot>
+      </span>
+      <a
+        v-if="showCloseButton"
+        href="javascript:void(0)"
+        role="button"
+        aria-label="Close the dialog"
+        class="dialog-close-button"
+        @click.prevent="closeDialog"
+      >×</a>
+    </div>
+    <div class="dialog-content">
+      <slot></slot>
+    </div>
+  </dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, nextTick } from 'vue'
+
+interface Props {
+  modelValue: boolean
+  showTitleBar?: boolean
+  showCloseButton?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  showTitleBar: true,
+  showCloseButton: true
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+}>()
+
+const dialogRef = ref<HTMLDialogElement | null>(null)
+
+const openDialog = (): void => {
+  if (dialogRef.value && !dialogRef.value.open) {
+    dialogRef.value.showModal()
+  }
+}
+
+const closeDialog = (): void => {
+  if (dialogRef.value && dialogRef.value.open) {
+    dialogRef.value.close()
+  }
+}
+
+const handleDialogClose = (): void => {
+  if (props.modelValue) {
+    emit('update:modelValue', false)
+  }
+}
+
+watch(() => props.modelValue, async (newValue) => {
+  await nextTick()
+  
+  if (newValue) {
+    if (dialogRef.value && !dialogRef.value.open) {
+      dialogRef.value.showModal()
+    }
+  } else {
+    if (dialogRef.value && dialogRef.value.open) {
+      dialogRef.value.close()
+    }
+  }
+})
+
+defineExpose({
+  open: openDialog,
+  close: closeDialog,
+})
+</script>
+
+<style scoped>
+.dialog-view {
+  padding: 20px;
+  border-radius: 5px;
+  border: 1px solid gray;
+  outline: 0 !important;
+}
+
+.dialog-view[open] {
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  margin: auto;
+  max-width: 90vw;
+  max-height: 90vh;
+}
+
+.dialog-view::backdrop {
+  background: rgba(0, 0, 0, 0.5);
+}
+
+.dialog-title-bar {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 0.5em;
+  min-height: 24px;
+}
+
+.dialog-title {
+  flex: 1;
+  text-align: center;
+  font-weight: bold;
+  font-size: 1.1em;
+}
+
+.dialog-close-button {
+  margin-left: 0.5em;
+  text-decoration: none;
+  color: #666;
+  font-size: 1.5em;
+  line-height: 1;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border: none;
+  background: none;
+}
+
+.dialog-close-button:hover {
+  color: #333;
+  background-color: #f0f0f0;
+  border-radius: 3px;
+}
+
+.dialog-content {
+  flex: 1;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+}
+</style>

package/src/index.ts

@@ -0,0 +1,8 @@
+import { App } from 'vue'
+import DialogView from './DialogView.vue'
+
+DialogView.install = (app: App) => {
+  app.component('DialogView', DialogView)
+}
+
+export default DialogView

package/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+
+    /* For component library */
+    "declaration": true,
+    "outDir": "dist"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}

package/vite.config.ts

@@ -0,0 +1,31 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { fileURLToPath, URL } from 'node:url'
+import dts from 'vite-plugin-dts'
+import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    cssInjectedByJsPlugin(),
+    dts({
+      insertTypesEntry: true,
+    }),
+  ],
+  build: {
+    lib: {
+      entry: fileURLToPath(new URL('./src/index.ts', import.meta.url)),
+      name: 'DialogView',
+      fileName: (format) => `dialog-view.${format}.js`
+    },
+    rollupOptions: {
+      external: ['vue'],
+      output: {
+        globals: {
+          vue: 'Vue'
+        }
+      }
+    },
+    cssCodeSplit: false,
+  }
+})