npmapps 1.0.4 → 1.0.6

package/app/calendar/data.js

@@ -0,0 +1,177 @@
+export const holiday = [
+  // 春节
+  {
+    type: 'holiday',
+    name: '春节',
+    date: '2024-02-10',
+    lunarDate: '正月初一'
+  },
+  {
+    type: 'holiday',
+    name: '春节',
+    date: '2024-02-11',
+    lunarDate: '正月初二'
+  },
+  {
+    type: 'holiday',
+    name: '春节',
+    date: '2024-02-12',
+    lunarDate: '正月初三'
+  },
+  // 清明节
+  {
+    type: 'holiday',
+    name: '清明节',
+    date: '2024-04-04',
+    lunarDate: '二月廿五'
+  },
+  {
+    type: 'holiday',
+    name: '清明节',
+    date: '2024-04-05',
+    lunarDate: '二月廿六'
+  },
+  {
+    type: 'holiday',
+    name: '清明节',
+    date: '2024-04-06',
+    lunarDate: '二月廿七'
+  },
+  // 劳动节
+  {
+    type: 'holiday',
+    name: '劳动节',
+    date: '2024-05-01',
+    lunarDate: '三月廿三'
+  },
+  {
+    type: 'holiday',
+    name: '劳动节',
+    date: '2024-05-02',
+    lunarDate: '三月廿四'
+  },
+  {
+    type: 'holiday',
+    name: '劳动节',
+    date: '2024-05-03',
+    lunarDate: '三月廿五'
+  },
+  {
+    type: 'holiday',
+    name: '劳动节',
+    date: '2024-05-04',
+    lunarDate: '三月廿六'
+  },
+  {
+    type: 'holiday',
+    name: '劳动节',
+    date: '2024-05-05',
+    lunarDate: '三月廿七'
+  },
+  // 端午节
+  {
+    type: 'holiday',
+    name: '端午节',
+    date: '2024-06-10',
+    lunarDate: '五月初三'
+  },
+  // 中秋节
+  {
+    type: 'holiday',
+    name: '中秋节',
+    date: '2024-09-15',
+    lunarDate: '八月初二'
+  },
+  {
+    type: 'holiday',
+    name: '中秋节',
+    date: '2024-09-16',
+    lunarDate: '八月初三'
+  },
+  {
+    type: 'holiday',
+    name: '中秋节',
+    date: '2024-09-17',
+    lunarDate: '八月初四'
+  },
+  // 国庆节
+  {
+    type: 'holiday',
+    name: '国庆节',
+    date: '2024-10-01',
+    lunarDate: '八月十八'
+  },
+  {
+    type: 'holiday',
+    name: '国庆节',
+    date: '2024-10-02',
+    lunarDate: '八月十九'
+  },
+  {
+    type: 'holiday',
+    name: '国庆节',
+    date: '2024-10-03',
+    lunarDate: '八月二十'
+  },
+  {
+    type: 'holiday',
+    name: '国庆节',
+    date: '2024-10-04',
+    lunarDate: '八月廿一'
+  },
+  {
+    type: 'holiday',
+    name: '国庆节',
+    date: '2024-10-05',
+    lunarDate: '八月廿二'
+  },
+  {
+    type: 'holiday',
+    name: '国庆节',
+    date: '2024-10-06',
+    lunarDate: '八月廿三'
+  },
+  {
+    type: 'holiday',
+    name: '国庆节',
+    date: '2024-10-07',
+    lunarDate: '八月廿四'
+  },
+  // 普通周末
+  {
+    type: 'weekend',
+    name: '周末',
+    date: '2024-01-06',
+    lunarDate: '十一月廿五'
+  },
+  {
+    type: 'weekend',
+    name: '周末',
+    date: '2024-01-07',
+    lunarDate: '十一月廿六'
+  },
+  {
+    type: 'weekend',
+    name: '周末',
+    date: '2024-01-13',
+    lunarDate: '十二月初二'
+  },
+  {
+    type: 'weekend',
+    name: '周末',
+    date: '2024-01-14',
+    lunarDate: '十二月初三'
+  },
+  {
+    type: 'weekend',
+    name: '周末',
+    date: '2024-01-20',
+    lunarDate: '十二月初九'
+  },
+  {
+    type: 'weekend',
+    name: '周末',
+    date: '2024-01-21',
+    lunarDate: '十二月初十'
+  }
+]

package/app/calendar/index.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="calendar-container" style="margin-left: 120px;">
+    <div class="control-panel">
+
+    <el-date-picker v-model="year" type="year" placeholder="选择年" class="year-picker">
+    </el-date-picker>
+      <el-switch v-model="showButtonGroup" active-text="显示按钮组" inactive-text="隐藏按钮组" class="control-item"></el-switch>
+      <el-switch v-model="showWorkday" active-text="显示工作日" inactive-text="隐藏工作日" class="control-item"></el-switch>
+      <el-switch v-model="clickable" active-text="允许点击" inactive-text="禁止点击" class="control-item"></el-switch>
+      <!-- <el-switch v-model="showToday" active-text="显示今日标记" inactive-text="隐藏今日标记" class="control-item"></el-switch> -->
+      <el-switch v-model="isNextOrPrevClick" active-text="隔月点击时间" inactive-text="不可隔月点击时间" class="control-item"></el-switch>
+    </div>
+    <div :key="year+''" class="calendar-grid">
+      <div v-for="(item, index) in calendarDate" :key="index" class="calendar-item">
+              <customCalendar 
+                @date-click="dataClick"  
+                :holiday="holiday" 
+                :date="item.date" 
+                :showButtonGroup="showButtonGroup"
+                :showWorkday="showWorkday"
+                :clickable="clickable"
+                :showToday="showToday"
+                :isNextOrPrevClick="isNextOrPrevClick"
+              />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.calendar-container {
+  padding: 20px;
+}
+
+.year-picker {
+  margin-bottom: 20px;
+}
+
+.control-panel {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  margin-bottom: 20px;
+}
+
+.control-item {
+  flex: 1;
+  min-width: 200px;
+}
+
+.calendar-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 440px));
+  gap: 10px;
+  justify-content: space-between;
+}
+
+.calendar-item {
+  width: 100%;
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+  padding: 15px;
+}
+
+.calendar-item:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+}
+</style>
+<script>
+import customCalendar from "./customCalendar.vue";
+import {holiday} from "./data";
+export default {
+  components: {
+    customCalendar,
+  },
+  data() {
+    return {
+      year: new Date('2024'),
+      showButtonGroup: false,
+      showWorkday: true,
+      clickable: true,
+      showToday: true,
+      isNextOrPrevClick: false,
+      holiday
+    };
+  },
+  methods: {
+    dataClick(data) {
+      console.log(data, "data");
+      this.$message.success("日期选择成功:" + data.day);
+    }
+  },
+  computed: {
+    calendarDate: function () {
+      const selectedYear = this.year.getFullYear();
+      const list = Array.from({ length: 12 }, (_, index) => {
+        const month = String(index + 1).padStart(2, "0");
+        return {
+          month: month,
+          date: new Date(`${selectedYear}-${month}-01`),
+        };
+      });
+      console.log(list, "list");
+
+      return list;
+    },
+  },
+  mounted() {
+    
+  },
+
+};
+</script>

package/app/dialogFnJsx/DialogForm.vue

@@ -0,0 +1,51 @@
+<template>
+  <el-form ref="form" :model="formData" label-width="80px">
+    <el-form-item label="名称" prop="name">
+      <el-input 
+        v-model="formData.name"
+        placeholder="请输入名称"
+      />
+    </el-form-item>
+    <el-form-item label="邮箱" prop="email">
+      <el-input
+        v-model="formData.email"
+        placeholder="请输入邮箱"
+      />
+    </el-form-item>
+    <el-form-item label="描述" prop="description">
+      <el-input
+        type="textarea"
+        v-model="formData.description"
+        placeholder="请输入描述"
+        :rows="3"
+      />
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+export default {
+  name: 'DialogForm',
+  data() {
+    return {
+      formData: {
+        name: '',
+        email: '',
+        description: ''
+      }
+    }
+  },
+  methods: {
+    getFormData() {
+      return this.formData
+    },
+    resetForm() {
+      this.formData = {
+        name: '',
+        email: '',
+        description: ''
+      }
+    }
+  }
+}
+</script>

package/app/dialogFnJsx/README.md

@@ -0,0 +1,98 @@
+# dialogFnJsx 组件文档
+
+## 组件介绍
+
+`dialogFnJsx` 是一个基于 Element UI 的 Dialog 组件封装的函数式对话框组件，使用 JSX 语法实现。它提供了一种更灵活的方式来创建和管理对话框，支持动态内容渲染和自定义插槽。
+
+## 特性
+
+- 函数式调用，无需在模板中声明
+- 支持 JSX 语法
+- 支持多个插槽（默认内容、标题、底部）
+- 自动管理对话框的生命周期
+- 支持所有 Element UI Dialog 的原生属性和事件
+
+## 基本用法
+
+```javascript
+import { dialogFn } from './dialogFnJsx';
+
+// 基础用法
+const { dialog, close } = dialogFn({
+  slots: {
+    default: <div>对话框内容</div>,
+    title: <h3>标题</h3>,
+    footer: (
+      <div>
+        <el-button onClick={() => close()}>取消</el-button>
+        <el-button type="primary" onClick={() => {}}>确定</el-button>
+      </div>
+    )
+  },
+  props: {
+    title: '标题',
+    width: '500px',
+    destroyOnClose: true
+  },
+  on: {
+    close: () => {
+      console.log('关闭');
+    }
+  }
+});
+```
+
+## 参数说明
+
+### options 配置对象
+
+| 参数 | 类型 | 必填 | 说明 |
+|------|------|------|------|
+| slots | Object | 否 | 插槽内容配置对象 |
+| props | Object | 否 | Dialog 组件的 props 配置 |
+| on | Object | 否 | Dialog 组件的事件监听配置 |
+
+### slots 配置对象
+
+| 属性 | 类型 | 说明 |
+|------|------|------|
+| default | JSX.Element | 默认插槽内容 |
+| title | JSX.Element | 标题插槽内容 |
+| footer | JSX.Element | 底部插槽内容 |
+
+### props 配置对象
+
+支持所有 Element UI Dialog 组件的 props 配置，常用的有：
+
+| 属性 | 类型 | 说明 |
+|------|------|------|
+| title | String | 对话框标题 |
+| width | String | 对话框宽度 |
+| top | String | 对话框距离顶部的距离 |
+| destroyOnClose | Boolean | 关闭时是否销毁内容 |
+| beforeClose | Function | 关闭前的回调函数 |
+
+### on 配置对象
+
+支持所有 Element UI Dialog 组件的事件监听配置，常用的有：
+
+| 事件名 | 说明 |
+|--------|------|
+| close | 对话框关闭时的回调函数 |
+| open | 对话框打开时的回调函数 |
+
+## 注意事项
+
+1. 组件使用 JSX 语法，确保项目已配置好相关的 Babel 插件支持。
+2. 关闭对话框时会自动销毁组件实例，无需手动处理。
+3. 所有的 Element UI Dialog 原生属性都可以通过 props 传入。
+4. 事件监听器通过 on 对象进行配置。
+5. 返回的 close 方法可以用于手动关闭对话框。
+
+## 与普通 Vue 组件的区别
+
+1. 采用函数式调用而非组件式声明
+2. 使用 JSX 语法替代模板语法
+3. 自动管理组件的挂载和销毁
+4. 更灵活的插槽内容配置
+5. 无需在父组件中注册即可使用

package/app/dialogFnJsx/com.vue

@@ -0,0 +1,74 @@
+<template>
+  <div>
+    {{ nameProps }}
+
+    <el-button type="primary" v-if="showBtn" @click="show">打开新弹窗</el-button>
+    <el-button v-if="showBtn" @click="close">关闭</el-button>
+    <el-button v-if="showBtn" @click="obj.a++">{{ obj.a  }}</el-button>
+    <slot />
+  </div>
+</template>
+<script>
+import { dialogFn } from "./index";
+import com11 from "./com11.vue";
+export default {
+  props: {
+    nameProps: {
+      type: String,
+      default: "111",
+    },
+    closeDialog: {
+      type: Function,
+      default: () => {
+      },
+    },
+    showBtn: {
+      type: Boolean,
+      default: false,
+    },
+    obj: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  created() {
+    console.log(this.nameProps, "nameProps");
+  },
+  methods: {
+    close() {
+      console.log(this.closeDialog, "dialog");
+      this.closeDialog();
+    },
+    beforeClose(d) {
+      d();
+    },
+    show() {
+      
+      const { close } = dialogFn({
+        slots: {
+          default: (
+            <com11
+              nameProps="内部defaultSlot"
+              closeDialog={() => close()}
+            />
+          ),
+        },
+        props: {
+          title: "内部弹窗标题",
+          width: "300px",
+          top: "100px",
+          beforeClose: this.beforeClose,
+          appendToBody: true,
+        },
+        on: {
+          close: () => {
+            console.log("内部关闭");
+          },
+        },
+      });
+    },
+  },
+};
+</script>

package/app/dialogFnJsx/com11.vue

@@ -0,0 +1,31 @@
+<template>
+  <div>
+    {{ nameProps }}
+    <el-button type="" @click="close">关闭</el-button>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    nameProps: {
+      type: String,
+      default: "111",
+    },
+    closeDialog: {
+      type: Function,
+      default: () => {
+      },
+    },
+  },
+  created() {
+    console.log(this.nameProps, "nameProps");
+  },
+  methods: {
+    close() {
+      console.log(this.closeDialog, "dialog");
+
+      this.closeDialog();
+    },
+  },
+};
+</script>