halox-calendar-nav-ts 0.0.1-beta.1

package/dist/components/index.vue.d.ts

@@ -0,0 +1,19 @@
+type __VLS_Props = {
+    size?: string;
+    fontSize?: string;
+    fontColor?: string;
+    color?: string;
+    date?: string | Date;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "update:date": (v: string) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:date"?: ((v: string) => any) | undefined;
+}>, {
+    size: string;
+    fontSize: string;
+    fontColor: string;
+    color: string;
+    date: string | Date;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/halox-calendar-nav-ts.css

@@ -0,0 +1 @@
+.page-container{display:flex;justify-content:space-around;align-items:center;gap:5px}.calendar-nav-btn{display:inline-block;width:var(--size);aspect-ratio:1/1;background-color:#eee;color:var(--color);border-radius:4px;padding:5px;cursor:pointer}.calendar-nav-btn:hover{background-color:#ddd}.calendar-nav-btn:active{background-color:#ccc}.icon-left-m,.icon-right-m{width:100%;height:100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor}.icon-left-m{--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23000' d='m15.906 4.78l-10.5 10.5l-.718.72l.718.72l10.5 10.5l1.406-1.44L7.533 16l9.78-9.78l-1.406-1.44zm7 0l-10.5 10.5l-.72.72l.72.72l10.5 10.5l1.407-1.44L14.53 16l9.783-9.78z'/%3E%3C/svg%3E");-webkit-mask-image:var(--svg);mask-image:var(--svg)}.icon-right-m{--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23000' d='M9.094 4.78L7.688 6.22l9.78 9.78l-9.78 9.78l1.406 1.44l10.5-10.5l.718-.72l-.718-.72zm7 0l-1.407 1.44L24.47 16l-9.782 9.78l1.406 1.44l10.5-10.5l.718-.72l-.718-.72z'/%3E%3C/svg%3E");-webkit-mask-image:var(--svg);mask-image:var(--svg)}.icon-left,.icon-right{width:100%;height:100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;width:var(--size)}.icon-left{--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23000' d='m19.03 4.28l-11 11l-.686.72l.687.72l11 11l1.44-1.44L10.187 16l10.28-10.28z'/%3E%3C/svg%3E");-webkit-mask-image:var(--svg);mask-image:var(--svg)}.icon-right{width:100%;height:100%;--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23000' d='m12.97 4.28l-1.44 1.44L21.814 16L11.53 26.28l1.44 1.44l11-11l.686-.72l-.687-.72l-11-11z'/%3E%3C/svg%3E");-webkit-mask-image:var(--svg);mask-image:var(--svg)}

package/dist/halox-calendar-nav-ts.es.js

@@ -0,0 +1,67 @@
+import { defineComponent as f, createElementBlock as m, openBlock as u, normalizeStyle as i, createElementVNode as e, toDisplayString as c } from "vue";
+const p = /* @__PURE__ */ f({
+  __name: "index",
+  props: {
+    size: { default: "20px" },
+    fontSize: { default: "14px" },
+    fontColor: { default: "#333" },
+    color: { default: "#333" },
+    date: { default: "2026-01-01" }
+  },
+  emits: ["update:date"],
+  setup(n, { emit: a }) {
+    const d = n, r = a, v = (s) => s.toISOString().split("T")[0], l = (s) => {
+      const t = new Date(d.date);
+      switch (s) {
+        case "m-prev":
+          t.setMonth(t.getMonth() - 1);
+          break;
+        case "m-next":
+          t.setMonth(t.getMonth() + 1);
+          break;
+        case "d-prev":
+          t.setDate(t.getDate() - 1);
+          break;
+        case "d-next":
+          t.setDate(t.getDate() + 1);
+          break;
+      }
+      r("update:date", v(t));
+    };
+    return (s, t) => (u(), m("div", {
+      style: i({ "--size": n.size, "--color": n.color }),
+      class: "page-container"
+    }, [
+      e("div", {
+        class: "calendar-nav-btn",
+        onClick: t[0] || (t[0] = (o) => l("m-prev"))
+      }, [...t[4] || (t[4] = [
+        e("div", { class: "icon-left-m" }, null, -1)
+      ])]),
+      e("div", {
+        class: "calendar-nav-btn",
+        onClick: t[1] || (t[1] = (o) => l("d-prev"))
+      }, [...t[5] || (t[5] = [
+        e("div", { class: "icon-left" }, null, -1)
+      ])]),
+      e("div", {
+        style: i({ fontSize: n.fontSize, color: n.fontColor })
+      }, c(n.date), 5),
+      e("div", {
+        class: "calendar-nav-btn",
+        onClick: t[2] || (t[2] = (o) => l("d-next"))
+      }, [...t[6] || (t[6] = [
+        e("div", { class: "icon-right" }, null, -1)
+      ])]),
+      e("div", {
+        class: "calendar-nav-btn",
+        onClick: t[3] || (t[3] = (o) => l("m-next"))
+      }, [...t[7] || (t[7] = [
+        e("div", { class: "icon-right-m" }, null, -1)
+      ])])
+    ], 4));
+  }
+});
+export {
+  p as vue3CalendarNavUI
+};

package/dist/halox-calendar-nav-ts.umd.js

@@ -0,0 +1 @@
+(function(n,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(n=typeof globalThis<"u"?globalThis:n||self,t(n["halox-calendar-nav-ts"]={},n.Vue))})(this,(function(n,t){"use strict";const d=t.defineComponent({__name:"index",props:{size:{default:"20px"},fontSize:{default:"14px"},fontColor:{default:"#333"},color:{default:"#333"},date:{default:"2026-01-01"}},emits:["update:date"],setup(l,{emit:a}){const r=l,f=a,c=s=>s.toISOString().split("T")[0],o=s=>{const e=new Date(r.date);switch(s){case"m-prev":e.setMonth(e.getMonth()-1);break;case"m-next":e.setMonth(e.getMonth()+1);break;case"d-prev":e.setDate(e.getDate()-1);break;case"d-next":e.setDate(e.getDate()+1);break}f("update:date",c(e))};return(s,e)=>(t.openBlock(),t.createElementBlock("div",{style:t.normalizeStyle({"--size":l.size,"--color":l.color}),class:"page-container"},[t.createElementVNode("div",{class:"calendar-nav-btn",onClick:e[0]||(e[0]=i=>o("m-prev"))},[...e[4]||(e[4]=[t.createElementVNode("div",{class:"icon-left-m"},null,-1)])]),t.createElementVNode("div",{class:"calendar-nav-btn",onClick:e[1]||(e[1]=i=>o("d-prev"))},[...e[5]||(e[5]=[t.createElementVNode("div",{class:"icon-left"},null,-1)])]),t.createElementVNode("div",{style:t.normalizeStyle({fontSize:l.fontSize,color:l.fontColor})},t.toDisplayString(l.date),5),t.createElementVNode("div",{class:"calendar-nav-btn",onClick:e[2]||(e[2]=i=>o("d-next"))},[...e[6]||(e[6]=[t.createElementVNode("div",{class:"icon-right"},null,-1)])]),t.createElementVNode("div",{class:"calendar-nav-btn",onClick:e[3]||(e[3]=i=>o("m-next"))},[...e[7]||(e[7]=[t.createElementVNode("div",{class:"icon-right-m"},null,-1)])])],4))}});n.vue3CalendarNavUI=d,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})}));

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+import { default as CalendarNaviUI } from './components/index.vue';
+export { CalendarNaviUI as vue3CalendarNavUI, };

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from '../index'
+export {}

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "halox-calendar-nav-ts",
+  "version": "0.0.1-beta.1",
+  "main": "dist/halox-calendar-nav-ts.umd.js",
+  "module": "dist/halox-calendar-nav-ts.es.js",
+  "types": "dist/types/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/shenyunv2021/halox-calendar-nav-ts.git"
+  },
+  "bugs": {
+    "url": "https://github.com/shenyunv2021/halox-calendar-nav-ts-issues/issues"
+  },
+  "homepage": "https://github.com/shenyunv2021/halox-calendar-nav-ts-issues#readme",
+  "contributors": [
+    "simcheolun <shenyunv2021@gamil.com>"
+  ],
+  "license": "MIT",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "build:watch": "if exist dist rd /s /q dist && vite build --watch",
+    "lint": "eslint . --ext .ts,.vue",
+    "test": "echo \"No test yet\""
+  },
+  "keywords": [
+    "vue3",
+    "typescript",
+    "calendar",
+    "date",
+    "halox",
+    "JAYUWARE"
+  ],
+  "author": "HaloX Dev Team",
+  "description": "",
+  "dependencies": {
+    "vue": "^3.5.25"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.2",
+    "rollup": "^4.53.3",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-typescript2": "^0.36.0",
+    "rollup-plugin-vue": "^6.0.0",
+    "sass-embedded": "^1.93.3",
+    "typescript": "^5.9.3",
+    "vite": "^7.2.4",
+    "vite-plugin-dts": "^4.5.4",
+    "vue-tsc": "^3.1.5"
+  }
+}

package/readme.md

@@ -0,0 +1,62 @@
+# Vue3 Typescript CALENDAR NAV UI Guide
+
+## 설치
+
+```sh
+npm install halox-calendar-nav-ts
+```
+---
+![view](https://raw.githubusercontent.com/shenyunv2021/halox-calendar-nav-issues/main/view.png)
+---
+
+## Description
+
+항상 최신 버전을 유지해주세요.
+
+달력/날자 내비게이션 -  VUE3 + Typescript
+halox-calendar-nav-ts
+
+이전월 이전일 다음일 다음월 변경지원
+캘린더라이브러리 사용을 위한 서브툴
+
+필요한 개선 요청은 깃헙 이슈로 남겨주세요.
+
+## Features
+
+
+## Usage Example
+
+```js
+import 'halox-calendar-nav-ts/dist/halox-calendar-nav-ts.css'
+import { vue3CalendarNavUI } from 'halox-calendar-nav-ts'
+<script lang="ts" setup>
+        const ref = ref('2026-01-01')
+        ...
+</script>
+```
+
+---
+
+## Main Components
+
+``` vue
+  <vue3CalendarNavUI 
+      v-model:date="date" 
+      size="20px" 
+      font-size="16px" 
+      color="#333" 
+      font-color="#ff0000"/>
+        
+```
+``` javascript
+
+```
+---
+## Params
+``` ts
+date:         문자열 '2026-01-01'
+size:         문자열 '20px'
+font-size:    문자열 '16px'
+color:        문자열 '#333'
+font-color:   문자열 '#ff0000'
+```

package/tsconfig.json

@@ -0,0 +1,19 @@
+{
+    "compilerOptions": {
+      "target": "ESNext",
+      "module": "ESNext",
+      "moduleResolution": "Node",
+      "declaration": true,
+      "declarationDir": "dist/types",
+      "emitDeclarationOnly": false,
+      "strict": true,
+      "jsx": "preserve",
+      "esModuleInterop": true,
+      "skipLibCheck": true,
+      "resolveJsonModule": true,
+      "lib": ["ESNext", "DOM"]
+    },
+    "include": ["src"],
+    "exclude": ["node_modules", "dist", "example"]
+  }
+  

package/vite.config.ts

@@ -0,0 +1,33 @@
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import dts from 'vite-plugin-dts';
+import postcss from 'rollup-plugin-postcss';
+import path from 'path';
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    dts({ insertTypesEntry: true }),
+  ],
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, 'src/index.ts'),
+      name: 'halox-calendar-nav-ts',
+      fileName: (format) => `halox-calendar-nav-ts.${format}.js`,
+    },
+    rollupOptions: {
+      external: ['vue'],
+      output: {
+        globals: { vue: 'Vue' },
+      },
+      plugins: [
+        postcss({
+          extract: true, // CSS를 별도 파일로 추출
+        }),
+      ],
+    },
+    css: {
+      preprocessorOptions: { scss: {} },
+    },
+  },
+});