@vipl520/dk-ui 1.0.31 → 1.0.32
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.js +2 -2
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/dist/index.min.mjs +1 -1
- package/dist/index.min.mjs.map +1 -1
- package/dist/index.mjs +2 -2
- package/dist/web-types.json +1 -1
- package/es/page-diy/src/components/PreviewPhone.vue2.mjs +2 -2
- package/es/page-diy/src/components/PreviewPhone.vue2.mjs.map +1 -1
- package/lib/page-diy/src/components/PreviewPhone.vue2.js +2 -2
- package/lib/page-diy/src/components/PreviewPhone.vue2.js.map +1 -1
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -17870,8 +17870,8 @@ var _sfc_main$G = /* @__PURE__ */ defineComponent({
|
|
|
17870
17870
|
const key = "preview-phone";
|
|
17871
17871
|
const cache = JSON.parse(storage.get(key) || "{}");
|
|
17872
17872
|
const form = ref({
|
|
17873
|
-
showLine: cache.showLine ||
|
|
17874
|
-
margin: cache.margin ||
|
|
17873
|
+
showLine: cache.showLine || true,
|
|
17874
|
+
margin: cache.margin || 2,
|
|
17875
17875
|
preview: cache.preview || false,
|
|
17876
17876
|
closeAnimate: cache.closeAnimate || false
|
|
17877
17877
|
});
|
package/dist/web-types.json
CHANGED
|
@@ -54,8 +54,8 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
54
54
|
const key = "preview-phone";
|
|
55
55
|
const cache = JSON.parse(storage.get(key) || "{}");
|
|
56
56
|
const form = ref({
|
|
57
|
-
showLine: cache.showLine ||
|
|
58
|
-
margin: cache.margin ||
|
|
57
|
+
showLine: cache.showLine || true,
|
|
58
|
+
margin: cache.margin || 2,
|
|
59
59
|
preview: cache.preview || false,
|
|
60
60
|
closeAnimate: cache.closeAnimate || false
|
|
61
61
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PreviewPhone.vue2.mjs","sources":["../../../../src/page-diy/src/components/PreviewPhone.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { defineComponent as __MACROS_defineComponent } from \"vue\";\nexport default /*#__PURE__*/ __MACROS_defineComponent({\n name: 'PreviewPhone',\n});\n</script>\n<template>\n <div class=\"preview-phone\">\n <div class=\"phone\">\n <div class=\"phone-header\">\n <div class=\"phone-header-top\">\n <div class=\"phone-time\">\n <span>{{ time }}</span>\n <van-icon name=\"wechat\" color=\"#2ddd71\" />\n </div>\n <div />\n <div class=\"phone-battery\">\n <span class=\"m-r-4px\">100%</span>\n <dk-icon icon=\"gg:battery-full\" :size=\"18\" color=\"#555\" hover-color=\"#f00\"></dk-icon>\n </div>\n </div>\n <div class=\"phone-title\">\n <div class=\"phone-title-icon\">\n <el-dropdown trigger=\"click\" placement=\"bottom-start\">\n <dk-icon icon=\"Close\" hover-color=\"var(--el-color-primary)\" :size=\"20\" style=\"cursor: pointer\"></dk-icon>\n <template #dropdown>\n <el-dropdown-menu>\n <el-dropdown-item @click=\"clear('rule')\">清除组件</el-dropdown-item>\n <el-dropdown-item @click=\"clear('page')\">清除页面</el-dropdown-item>\n </el-dropdown-menu>\n </template>\n </el-dropdown>\n </div>\n <div>页面标题</div>\n <div class=\"phone-title-icon\">\n <el-popover placement=\"bottom\" :width=\"200\" trigger=\"click\">\n <template #reference>\n <dk-icon icon=\"MoreFilled\" :size=\"20\" hover-color=\"var(--el-color-primary)\" style=\"cursor: pointer\" />\n </template>\n <el-form-item label=\"显示网格\">\n <template #label>\n <el-tooltip class=\"box-item\" effect=\"dark\" content=\"显示组件网格线\" placement=\"right-start\">\n 显示网格\n </el-tooltip>\n </template>\n <el-switch v-model=\"form.showLine\" @change=\"changeForm()\" />\n </el-form-item>\n <el-form-item label=\"网格间距\">\n <template #label>\n <el-tooltip class=\"box-item\" effect=\"dark\" content=\"设置组件之间的网格间距\" placement=\"right-start\">\n 网格间距\n </el-tooltip>\n </template>\n <el-slider v-model=\"form.margin\" :min=\"0\" :step=\"1\" show-stops :max=\"20\" @change=\"changeForm()\" />\n </el-form-item>\n <el-form-item label=\"效果预览\">\n <template #label>\n <el-tooltip\n class=\"box-item\"\n effect=\"dark\"\n content=\"清除所有网格、间距效果，大致和真实差不多\"\n placement=\"right-start\"\n >\n 效果预览\n </el-tooltip>\n </template>\n <el-switch v-model=\"form.preview\" @change=\"changeForm()\" />\n </el-form-item>\n <el-form-item label=\"关闭动画\">\n <template #label>\n <el-tooltip class=\"box-item\" effect=\"dark\" content=\"关闭所有预览的动画效果\" placement=\"right-start\">\n 关闭动画\n </el-tooltip>\n </template>\n <el-switch v-model=\"form.closeAnimate\" @change=\"changeForm()\" />\n </el-form-item>\n </el-popover>\n </div>\n </div>\n </div>\n <div class=\"phone-body _fc-m-drag\" :style=\"_style\">\n <slot />\n </div>\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, computed, inject, provide } from 'vue'\nimport { storage } from '@vipl520/utils'\nimport { ElMessage, ElMessageBox } from 'element-plus'\n\nconst diy: any = inject('diy')\nconst props = defineProps({\n value: {\n default: '',\n type: String,\n },\n pageConfig: {\n default: () => {},\n type: [Object],\n },\n})\n\nconst key = 'preview-phone'\nconst cache: any = JSON.parse(storage.get(key) || '{}')\n\nconst form = ref({\n showLine: cache.showLine ||
|
|
1
|
+
{"version":3,"file":"PreviewPhone.vue2.mjs","sources":["../../../../src/page-diy/src/components/PreviewPhone.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { defineComponent as __MACROS_defineComponent } from \"vue\";\nexport default /*#__PURE__*/ __MACROS_defineComponent({\n name: 'PreviewPhone',\n});\n</script>\n<template>\n <div class=\"preview-phone\">\n <div class=\"phone\">\n <div class=\"phone-header\">\n <div class=\"phone-header-top\">\n <div class=\"phone-time\">\n <span>{{ time }}</span>\n <van-icon name=\"wechat\" color=\"#2ddd71\" />\n </div>\n <div />\n <div class=\"phone-battery\">\n <span class=\"m-r-4px\">100%</span>\n <dk-icon icon=\"gg:battery-full\" :size=\"18\" color=\"#555\" hover-color=\"#f00\"></dk-icon>\n </div>\n </div>\n <div class=\"phone-title\">\n <div class=\"phone-title-icon\">\n <el-dropdown trigger=\"click\" placement=\"bottom-start\">\n <dk-icon icon=\"Close\" hover-color=\"var(--el-color-primary)\" :size=\"20\" style=\"cursor: pointer\"></dk-icon>\n <template #dropdown>\n <el-dropdown-menu>\n <el-dropdown-item @click=\"clear('rule')\">清除组件</el-dropdown-item>\n <el-dropdown-item @click=\"clear('page')\">清除页面</el-dropdown-item>\n </el-dropdown-menu>\n </template>\n </el-dropdown>\n </div>\n <div>页面标题</div>\n <div class=\"phone-title-icon\">\n <el-popover placement=\"bottom\" :width=\"200\" trigger=\"click\">\n <template #reference>\n <dk-icon icon=\"MoreFilled\" :size=\"20\" hover-color=\"var(--el-color-primary)\" style=\"cursor: pointer\" />\n </template>\n <el-form-item label=\"显示网格\">\n <template #label>\n <el-tooltip class=\"box-item\" effect=\"dark\" content=\"显示组件网格线\" placement=\"right-start\">\n 显示网格\n </el-tooltip>\n </template>\n <el-switch v-model=\"form.showLine\" @change=\"changeForm()\" />\n </el-form-item>\n <el-form-item label=\"网格间距\">\n <template #label>\n <el-tooltip class=\"box-item\" effect=\"dark\" content=\"设置组件之间的网格间距\" placement=\"right-start\">\n 网格间距\n </el-tooltip>\n </template>\n <el-slider v-model=\"form.margin\" :min=\"0\" :step=\"1\" show-stops :max=\"20\" @change=\"changeForm()\" />\n </el-form-item>\n <el-form-item label=\"效果预览\">\n <template #label>\n <el-tooltip\n class=\"box-item\"\n effect=\"dark\"\n content=\"清除所有网格、间距效果，大致和真实差不多\"\n placement=\"right-start\"\n >\n 效果预览\n </el-tooltip>\n </template>\n <el-switch v-model=\"form.preview\" @change=\"changeForm()\" />\n </el-form-item>\n <el-form-item label=\"关闭动画\">\n <template #label>\n <el-tooltip class=\"box-item\" effect=\"dark\" content=\"关闭所有预览的动画效果\" placement=\"right-start\">\n 关闭动画\n </el-tooltip>\n </template>\n <el-switch v-model=\"form.closeAnimate\" @change=\"changeForm()\" />\n </el-form-item>\n </el-popover>\n </div>\n </div>\n </div>\n <div class=\"phone-body _fc-m-drag\" :style=\"_style\">\n <slot />\n </div>\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, computed, inject, provide } from 'vue'\nimport { storage } from '@vipl520/utils'\nimport { ElMessage, ElMessageBox } from 'element-plus'\n\nconst diy: any = inject('diy')\nconst props = defineProps({\n value: {\n default: '',\n type: String,\n },\n pageConfig: {\n default: () => {},\n type: [Object],\n },\n})\n\nconst key = 'preview-phone'\nconst cache: any = JSON.parse(storage.get(key) || '{}')\n\nconst form = ref({\n showLine: cache.showLine || true,\n margin: cache.margin || 2,\n preview: cache.preview || false,\n closeAnimate: cache.closeAnimate || false,\n})\n\nprovide('previewSetting', form)\n\nconst changeForm = () => {\n storage.set(key, JSON.stringify(form.value))\n}\nconst clear = (type = '') => {\n const { proxy } = diy\n const typeName: any = {\n rule: '组件',\n config: '配置',\n }\n ElMessageBox.confirm('当前要清除' + typeName[type] + '，是否继续?', '警告', {\n confirmButtonText: '确定',\n cancelButtonText: '取消',\n type: 'warning',\n })\n .then(() => {\n proxy.clear(type)\n ElMessage.success('清除成功')\n })\n .catch(() => {})\n}\nconst _style = computed(() => {\n let line: any = {\n '--padding': '0',\n '--overflow': 'initial',\n }\n if (form.value.showLine && !form.value.preview) {\n line = {\n '--margin': form.value.margin + 'px',\n '--showDashed': '1px',\n }\n }\n if (form.value.preview) {\n line['--padding'] = '0'\n line['--overflow'] = 'hidden'\n line['--minHeight'] = '0px'\n } else {\n line['--padding'] = '2px 0'\n line['--overflow'] = 'initial'\n line['--minHeight'] = '30px'\n }\n return {\n ...props.pageConfig.style,\n ...line,\n }\n})\n\nconst time = computed(() => {\n const d = new Date()\n const hour = d.getHours() // 得到小时数\n const minute = d.getMinutes() // 得到分钟数\n return hour + ':' + minute\n})\n</script>\n"],"names":["__MACROS_defineComponent"],"mappings":"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"}
|
|
@@ -58,8 +58,8 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
58
58
|
const key = "preview-phone";
|
|
59
59
|
const cache = JSON.parse(utils.storage.get(key) || "{}");
|
|
60
60
|
const form = vue.ref({
|
|
61
|
-
showLine: cache.showLine ||
|
|
62
|
-
margin: cache.margin ||
|
|
61
|
+
showLine: cache.showLine || true,
|
|
62
|
+
margin: cache.margin || 2,
|
|
63
63
|
preview: cache.preview || false,
|
|
64
64
|
closeAnimate: cache.closeAnimate || false
|
|
65
65
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PreviewPhone.vue2.js","sources":["../../../../src/page-diy/src/components/PreviewPhone.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { defineComponent as __MACROS_defineComponent } from \"vue\";\nexport default /*#__PURE__*/ __MACROS_defineComponent({\n name: 'PreviewPhone',\n});\n</script>\n<template>\n <div class=\"preview-phone\">\n <div class=\"phone\">\n <div class=\"phone-header\">\n <div class=\"phone-header-top\">\n <div class=\"phone-time\">\n <span>{{ time }}</span>\n <van-icon name=\"wechat\" color=\"#2ddd71\" />\n </div>\n <div />\n <div class=\"phone-battery\">\n <span class=\"m-r-4px\">100%</span>\n <dk-icon icon=\"gg:battery-full\" :size=\"18\" color=\"#555\" hover-color=\"#f00\"></dk-icon>\n </div>\n </div>\n <div class=\"phone-title\">\n <div class=\"phone-title-icon\">\n <el-dropdown trigger=\"click\" placement=\"bottom-start\">\n <dk-icon icon=\"Close\" hover-color=\"var(--el-color-primary)\" :size=\"20\" style=\"cursor: pointer\"></dk-icon>\n <template #dropdown>\n <el-dropdown-menu>\n <el-dropdown-item @click=\"clear('rule')\">清除组件</el-dropdown-item>\n <el-dropdown-item @click=\"clear('page')\">清除页面</el-dropdown-item>\n </el-dropdown-menu>\n </template>\n </el-dropdown>\n </div>\n <div>页面标题</div>\n <div class=\"phone-title-icon\">\n <el-popover placement=\"bottom\" :width=\"200\" trigger=\"click\">\n <template #reference>\n <dk-icon icon=\"MoreFilled\" :size=\"20\" hover-color=\"var(--el-color-primary)\" style=\"cursor: pointer\" />\n </template>\n <el-form-item label=\"显示网格\">\n <template #label>\n <el-tooltip class=\"box-item\" effect=\"dark\" content=\"显示组件网格线\" placement=\"right-start\">\n 显示网格\n </el-tooltip>\n </template>\n <el-switch v-model=\"form.showLine\" @change=\"changeForm()\" />\n </el-form-item>\n <el-form-item label=\"网格间距\">\n <template #label>\n <el-tooltip class=\"box-item\" effect=\"dark\" content=\"设置组件之间的网格间距\" placement=\"right-start\">\n 网格间距\n </el-tooltip>\n </template>\n <el-slider v-model=\"form.margin\" :min=\"0\" :step=\"1\" show-stops :max=\"20\" @change=\"changeForm()\" />\n </el-form-item>\n <el-form-item label=\"效果预览\">\n <template #label>\n <el-tooltip\n class=\"box-item\"\n effect=\"dark\"\n content=\"清除所有网格、间距效果，大致和真实差不多\"\n placement=\"right-start\"\n >\n 效果预览\n </el-tooltip>\n </template>\n <el-switch v-model=\"form.preview\" @change=\"changeForm()\" />\n </el-form-item>\n <el-form-item label=\"关闭动画\">\n <template #label>\n <el-tooltip class=\"box-item\" effect=\"dark\" content=\"关闭所有预览的动画效果\" placement=\"right-start\">\n 关闭动画\n </el-tooltip>\n </template>\n <el-switch v-model=\"form.closeAnimate\" @change=\"changeForm()\" />\n </el-form-item>\n </el-popover>\n </div>\n </div>\n </div>\n <div class=\"phone-body _fc-m-drag\" :style=\"_style\">\n <slot />\n </div>\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, computed, inject, provide } from 'vue'\nimport { storage } from '@vipl520/utils'\nimport { ElMessage, ElMessageBox } from 'element-plus'\n\nconst diy: any = inject('diy')\nconst props = defineProps({\n value: {\n default: '',\n type: String,\n },\n pageConfig: {\n default: () => {},\n type: [Object],\n },\n})\n\nconst key = 'preview-phone'\nconst cache: any = JSON.parse(storage.get(key) || '{}')\n\nconst form = ref({\n showLine: cache.showLine ||
|
|
1
|
+
{"version":3,"file":"PreviewPhone.vue2.js","sources":["../../../../src/page-diy/src/components/PreviewPhone.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { defineComponent as __MACROS_defineComponent } from \"vue\";\nexport default /*#__PURE__*/ __MACROS_defineComponent({\n name: 'PreviewPhone',\n});\n</script>\n<template>\n <div class=\"preview-phone\">\n <div class=\"phone\">\n <div class=\"phone-header\">\n <div class=\"phone-header-top\">\n <div class=\"phone-time\">\n <span>{{ time }}</span>\n <van-icon name=\"wechat\" color=\"#2ddd71\" />\n </div>\n <div />\n <div class=\"phone-battery\">\n <span class=\"m-r-4px\">100%</span>\n <dk-icon icon=\"gg:battery-full\" :size=\"18\" color=\"#555\" hover-color=\"#f00\"></dk-icon>\n </div>\n </div>\n <div class=\"phone-title\">\n <div class=\"phone-title-icon\">\n <el-dropdown trigger=\"click\" placement=\"bottom-start\">\n <dk-icon icon=\"Close\" hover-color=\"var(--el-color-primary)\" :size=\"20\" style=\"cursor: pointer\"></dk-icon>\n <template #dropdown>\n <el-dropdown-menu>\n <el-dropdown-item @click=\"clear('rule')\">清除组件</el-dropdown-item>\n <el-dropdown-item @click=\"clear('page')\">清除页面</el-dropdown-item>\n </el-dropdown-menu>\n </template>\n </el-dropdown>\n </div>\n <div>页面标题</div>\n <div class=\"phone-title-icon\">\n <el-popover placement=\"bottom\" :width=\"200\" trigger=\"click\">\n <template #reference>\n <dk-icon icon=\"MoreFilled\" :size=\"20\" hover-color=\"var(--el-color-primary)\" style=\"cursor: pointer\" />\n </template>\n <el-form-item label=\"显示网格\">\n <template #label>\n <el-tooltip class=\"box-item\" effect=\"dark\" content=\"显示组件网格线\" placement=\"right-start\">\n 显示网格\n </el-tooltip>\n </template>\n <el-switch v-model=\"form.showLine\" @change=\"changeForm()\" />\n </el-form-item>\n <el-form-item label=\"网格间距\">\n <template #label>\n <el-tooltip class=\"box-item\" effect=\"dark\" content=\"设置组件之间的网格间距\" placement=\"right-start\">\n 网格间距\n </el-tooltip>\n </template>\n <el-slider v-model=\"form.margin\" :min=\"0\" :step=\"1\" show-stops :max=\"20\" @change=\"changeForm()\" />\n </el-form-item>\n <el-form-item label=\"效果预览\">\n <template #label>\n <el-tooltip\n class=\"box-item\"\n effect=\"dark\"\n content=\"清除所有网格、间距效果，大致和真实差不多\"\n placement=\"right-start\"\n >\n 效果预览\n </el-tooltip>\n </template>\n <el-switch v-model=\"form.preview\" @change=\"changeForm()\" />\n </el-form-item>\n <el-form-item label=\"关闭动画\">\n <template #label>\n <el-tooltip class=\"box-item\" effect=\"dark\" content=\"关闭所有预览的动画效果\" placement=\"right-start\">\n 关闭动画\n </el-tooltip>\n </template>\n <el-switch v-model=\"form.closeAnimate\" @change=\"changeForm()\" />\n </el-form-item>\n </el-popover>\n </div>\n </div>\n </div>\n <div class=\"phone-body _fc-m-drag\" :style=\"_style\">\n <slot />\n </div>\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, computed, inject, provide } from 'vue'\nimport { storage } from '@vipl520/utils'\nimport { ElMessage, ElMessageBox } from 'element-plus'\n\nconst diy: any = inject('diy')\nconst props = defineProps({\n value: {\n default: '',\n type: String,\n },\n pageConfig: {\n default: () => {},\n type: [Object],\n },\n})\n\nconst key = 'preview-phone'\nconst cache: any = JSON.parse(storage.get(key) || '{}')\n\nconst form = ref({\n showLine: cache.showLine || true,\n margin: cache.margin || 2,\n preview: cache.preview || false,\n closeAnimate: cache.closeAnimate || false,\n})\n\nprovide('previewSetting', form)\n\nconst changeForm = () => {\n storage.set(key, JSON.stringify(form.value))\n}\nconst clear = (type = '') => {\n const { proxy } = diy\n const typeName: any = {\n rule: '组件',\n config: '配置',\n }\n ElMessageBox.confirm('当前要清除' + typeName[type] + '，是否继续?', '警告', {\n confirmButtonText: '确定',\n cancelButtonText: '取消',\n type: 'warning',\n })\n .then(() => {\n proxy.clear(type)\n ElMessage.success('清除成功')\n })\n .catch(() => {})\n}\nconst _style = computed(() => {\n let line: any = {\n '--padding': '0',\n '--overflow': 'initial',\n }\n if (form.value.showLine && !form.value.preview) {\n line = {\n '--margin': form.value.margin + 'px',\n '--showDashed': '1px',\n }\n }\n if (form.value.preview) {\n line['--padding'] = '0'\n line['--overflow'] = 'hidden'\n line['--minHeight'] = '0px'\n } else {\n line['--padding'] = '2px 0'\n line['--overflow'] = 'initial'\n line['--minHeight'] = '30px'\n }\n return {\n ...props.pageConfig.style,\n ...line,\n }\n})\n\nconst time = computed(() => {\n const d = new Date()\n const hour = d.getHours() // 得到小时数\n const minute = d.getMinutes() // 得到分钟数\n return hour + ':' + minute\n})\n</script>\n"],"names":["__MACROS_defineComponent","inject","storage","ref","provide","ElMessageBox","ElMessage","computed"],"mappings":"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"}
|