x-essential-lib 0.1.1 → 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/dist/index.d.ts +19 -2
  2. package/dist/index.js +325 -274
  3. package/package.json +4 -1
  4. package/.editorconfig +0 -5
  5. package/.eslintignore +0 -1
  6. package/.eslintrc.cjs +0 -18
  7. package/.husky/pre-commit +0 -1
  8. package/.prettierignore +0 -7
  9. package/.prettierrc +0 -16
  10. package/index.html +0 -12
  11. package/public/index.d.ts +0 -89
  12. package/src/App.vue +0 -9
  13. package/src/components/confirmDlg/index.vue +0 -98
  14. package/src/components/loading/index.vue +0 -131
  15. package/src/components/message/index.vue +0 -70
  16. package/src/components/message/item.vue +0 -75
  17. package/src/components/promptDlg/index.vue +0 -119
  18. package/src/components/waitDlg/index.vue +0 -41
  19. package/src/index.ts +0 -38
  20. package/src/main.ts +0 -5
  21. package/src/plugins/vuetify.ts +0 -4
  22. package/src/utils/core.ts +0 -31
  23. package/src/utils/dialog.ts +0 -87
  24. package/src/utils/message.ts +0 -17
  25. package/src/utils/misc.ts +0 -23
  26. package/src/vite-env.d.ts +0 -1
  27. package/tsconfig.json +0 -25
  28. package/tsconfig.node.json +0 -9
  29. package/vite.config.ts +0 -37
package/package.json CHANGED
@@ -1,10 +1,13 @@
1
1
  {
2
2
  "name": "x-essential-lib",
3
3
  "private": false,
4
- "version": "0.1.1",
4
+ "version": "0.1.3",
5
5
  "type": "module",
6
6
  "module": "dist/index.js",
7
7
  "types": "dist/index.d.ts",
8
+ "files": [
9
+ "dist"
10
+ ],
8
11
  "scripts": {
9
12
  "dev": "vite",
10
13
  "build": "vue-tsc && vite build",
package/.editorconfig DELETED
@@ -1,5 +0,0 @@
1
- [*.{js,jsx,ts,tsx,vue}]
2
- indent_style = space
3
- indent_size = 2
4
- trim_trailing_whitespace = true
5
- insert_final_newline = true
package/.eslintignore DELETED
@@ -1 +0,0 @@
1
- dist/
package/.eslintrc.cjs DELETED
@@ -1,18 +0,0 @@
1
- /* eslint-env node */
2
- require('@rushstack/eslint-patch/modern-module-resolution')
3
-
4
- module.exports = {
5
- root: true,
6
- extends: [
7
- 'plugin:vue/vue3-essential',
8
- 'eslint:recommended',
9
- '@vue/eslint-config-typescript',
10
- '@vue/eslint-config-prettier/skip-formatting'
11
- ],
12
- parserOptions: {
13
- ecmaVersion: 'latest'
14
- },
15
- rules: {
16
- 'vue/multi-word-component-names': 'off'
17
- }
18
- }
package/.husky/pre-commit DELETED
@@ -1 +0,0 @@
1
- npm run lint-staged
package/.prettierignore DELETED
@@ -1,7 +0,0 @@
1
- .husky/
2
- dist/
3
- src/types/auto-imports.d.ts
4
- src/types/components.d.ts
5
- src/types/typed-router.d.ts
6
- types/
7
- pnpm-lock.yaml
package/.prettierrc DELETED
@@ -1,16 +0,0 @@
1
- # global
2
- printWidth: 80
3
- tabWidth: 2
4
- useTabs: false
5
- # common
6
- singleQuote: true
7
- bracketSpacing: true
8
- bracketSameLine: false
9
- singleAttributePerLine: false
10
- # javascript
11
- semi: false
12
- quoteProps: consistent
13
- arrowParens: avoid
14
- trailingComma: none
15
- # html
16
- htmlWhitespaceSensitivity: ignore
package/index.html DELETED
@@ -1,12 +0,0 @@
1
- <!doctype html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8" />
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
- <title>x-essential-lib</title>
7
- </head>
8
- <body>
9
- <div id="app"></div>
10
- <script type="module" src="/src/main.ts"></script>
11
- </body>
12
- </html>
package/public/index.d.ts DELETED
@@ -1,89 +0,0 @@
1
- import { DefineComponent } from 'vue'
2
-
3
- export declare const XConfirmDlg: DefineComponent<
4
- {
5
- modelValue: {
6
- type: Boolean
7
- required: true
8
- }
9
- },
10
- {
11
- 'update:modelValue'(value: boolean): void
12
- },
13
- unknown
14
- >
15
-
16
- export declare const XLoading: DefineComponent<
17
- {
18
- zIndex: {
19
- type: Number
20
- default: 1
21
- }
22
- },
23
- {},
24
- unknown
25
- >
26
-
27
- export declare const XMessage: DefineComponent<{}, {}, unknown>
28
-
29
- export declare const XPromptDlg: DefineComponent<
30
- {
31
- modelValue: {
32
- type: Boolean
33
- required: true
34
- }
35
- },
36
- {
37
- 'update:modelValue'(value: boolean): void
38
- },
39
- unknown
40
- >
41
-
42
- export declare const XMessage: DefineComponent<{}, {}, unknown>
43
-
44
- export declare function waitMs(ms: number): Promise<void>
45
-
46
- export declare function waitUtil(
47
- conditionFunc: () => boolean,
48
- timeout?: number,
49
- interval?: number
50
- ): Promise<boolean>
51
-
52
- interface ButtonOptions {
53
- color?: string
54
- text?: string
55
- }
56
-
57
- interface ConfirmParams {
58
- title: string
59
- text: string
60
- cancel?: ButtonOptions
61
- confirm?: ButtonOptions
62
- }
63
-
64
- export declare function openConfirmDlg(
65
- params: ConfirmParams
66
- ): Promise<boolean | undefined>
67
-
68
- interface PromptParams {
69
- title: string
70
- text?: string
71
- label?: string
72
- placeholder?: string
73
- rules?: ((val: string) => string | boolean)[]
74
- value?: string
75
- cancel?: ButtonOptions
76
- confirm?: ButtonOptions
77
- }
78
-
79
- export declare function openPromptDlg(params: PromptParams): Promise<any>
80
-
81
- export declare function openWaitDlg()
82
- export declare function closeWaitDlg()
83
-
84
- export declare function messageError(text: string, timeout?: number)
85
- export declare function messageInfo(text: string, timeout?: number)
86
- export declare function messageSuccess(text: string, timeout?: number)
87
- export declare function messageWarning(text: string, timeout?: number)
88
-
89
- export declare function appAppear(name: string)
package/src/App.vue DELETED
@@ -1,9 +0,0 @@
1
- <script setup lang="ts">
2
- import XLoading from './components/loading/index.vue'
3
- </script>
4
-
5
- <template>
6
- <div>
7
- <x-loading />
8
- </div>
9
- </template>
package/src/components/confirmDlg/index.vue DELETED
@@ -1,98 +0,0 @@
1
- <script setup lang="ts">
2
- import { eventBus } from '../../utils/core'
3
- import { useLocale } from 'vuetify/lib/framework.mjs'
4
- import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue'
5
-
6
- const locale = useLocale()
7
-
8
- interface ButtonOptions {
9
- color?: string
10
- text?: string
11
- }
12
-
13
- const open = defineModel<boolean>({ required: true })
14
-
15
- const title = ref('')
16
- const text = ref('')
17
- const cancel = ref<ButtonOptions>()
18
- const confirm = ref<ButtonOptions>()
19
-
20
- const cancelColor = computed(() => {
21
- return cancel.value?.color ?? 'primary'
22
- })
23
-
24
- const cancelText = computed(() => {
25
- return cancel.value?.text ?? locale.t('cancel')
26
- })
27
-
28
- const confirmColor = computed(() => {
29
- return confirm.value?.color ?? 'primary'
30
- })
31
-
32
- const confirmText = computed(() => {
33
- return confirm.value?.text ?? locale.t('confirm')
34
- })
35
-
36
- let seq = 0
37
- let handled = false
38
-
39
- const onOpen = (params: any) => {
40
- title.value = params.title
41
- text.value = params.text
42
- cancel.value = params.cancel
43
- confirm.value = params.confirm
44
- seq = params.seq
45
- handled = false
46
- open.value = true
47
- }
48
-
49
- onMounted(() => {
50
- eventBus.on('confirmDlg', onOpen)
51
- })
52
-
53
- onBeforeUnmount(() => {
54
- eventBus.off('confirmDlg', onOpen)
55
- })
56
-
57
- const onConfirm = () => {
58
- open.value = false
59
- if (!handled) {
60
- eventBus.emit('confirmDlgResult' + seq, true)
61
- handled = true
62
- }
63
- }
64
-
65
- watch(open, val => {
66
- if (!val && !handled) {
67
- eventBus.emit('confirmDlgResult' + seq, false)
68
- handled = true
69
- }
70
- })
71
- </script>
72
-
73
- <template>
74
- <v-dialog
75
- v-model="open"
76
- @keydown.esc.stop.prevent="open = false"
77
- @keydown.enter.stop.prevent="onConfirm"
78
- transition="dialog-top-transition"
79
- max-width="600px"
80
- >
81
- <v-card>
82
- <v-card-title>
83
- {{ title }}
84
- </v-card-title>
85
- <v-card-text>
86
- {{ text }}
87
- </v-card-text>
88
- <v-card-actions class="d-flex justify-end">
89
- <v-btn @click="open = false" :color="cancelColor" :variant="'text'">
90
- {{ cancelText }}
91
- </v-btn>
92
- <v-btn @click="onConfirm" :color="confirmColor" :variant="'text'">
93
- {{ confirmText }}
94
- </v-btn>
95
- </v-card-actions>
96
- </v-card>
97
- </v-dialog>
98
- </template>
package/src/components/loading/index.vue DELETED
@@ -1,131 +0,0 @@
1
- <script setup lang="ts">
2
- import { useTheme } from 'vuetify/lib/framework.mjs'
3
- import { computed, CSSProperties } from 'vue'
4
-
5
- const theme = useTheme()
6
-
7
- const props = defineProps({
8
- zIndex: {
9
- type: Number,
10
- default: 1
11
- }
12
- })
13
-
14
- const style = computed(() => {
15
- const style: CSSProperties = {
16
- background: theme.current.value.dark ? '#1e1e1e' : '#ffffff',
17
- zIndex: props.zIndex
18
- }
19
- return style
20
- })
21
- </script>
22
-
23
- <template>
24
- <div class="x-cont" :style="style">
25
- <div class="lds-spinner">
26
- <div />
27
- <div />
28
- <div />
29
- <div />
30
- <div />
31
- <div />
32
- <div />
33
- <div />
34
- <div />
35
- <div />
36
- <div />
37
- <div />
38
- </div>
39
- </div>
40
- </template>
41
-
42
- <style scoped>
43
- .x-cont {
44
- position: absolute;
45
- top: 0;
46
- left: 0;
47
- bottom: 0;
48
- right: 0;
49
- display: flex;
50
- align-items: center;
51
- justify-content: center;
52
- }
53
- .lds-spinner {
54
- color: official;
55
- display: inline-block;
56
- position: relative;
57
- width: 40px;
58
- height: 40px;
59
- }
60
- .lds-spinner div {
61
- transform-origin: 20px 20px;
62
- animation: lds-spinner 1.2s linear infinite;
63
- }
64
- .lds-spinner div:after {
65
- content: ' ';
66
- display: block;
67
- position: absolute;
68
- top: 3px;
69
- left: 18px;
70
- width: 2px;
71
- height: 6px;
72
- border-radius: 5%;
73
- background: #9e9e9e;
74
- }
75
- .lds-spinner div:nth-child(1) {
76
- transform: rotate(0deg);
77
- animation-delay: -1.1s;
78
- }
79
- .lds-spinner div:nth-child(2) {
80
- transform: rotate(30deg);
81
- animation-delay: -1s;
82
- }
83
- .lds-spinner div:nth-child(3) {
84
- transform: rotate(60deg);
85
- animation-delay: -0.9s;
86
- }
87
- .lds-spinner div:nth-child(4) {
88
- transform: rotate(90deg);
89
- animation-delay: -0.8s;
90
- }
91
- .lds-spinner div:nth-child(5) {
92
- transform: rotate(120deg);
93
- animation-delay: -0.7s;
94
- }
95
- .lds-spinner div:nth-child(6) {
96
- transform: rotate(150deg);
97
- animation-delay: -0.6s;
98
- }
99
- .lds-spinner div:nth-child(7) {
100
- transform: rotate(180deg);
101
- animation-delay: -0.5s;
102
- }
103
- .lds-spinner div:nth-child(8) {
104
- transform: rotate(210deg);
105
- animation-delay: -0.4s;
106
- }
107
- .lds-spinner div:nth-child(9) {
108
- transform: rotate(240deg);
109
- animation-delay: -0.3s;
110
- }
111
- .lds-spinner div:nth-child(10) {
112
- transform: rotate(270deg);
113
- animation-delay: -0.2s;
114
- }
115
- .lds-spinner div:nth-child(11) {
116
- transform: rotate(300deg);
117
- animation-delay: -0.1s;
118
- }
119
- .lds-spinner div:nth-child(12) {
120
- transform: rotate(330deg);
121
- animation-delay: 0s;
122
- }
123
- @keyframes lds-spinner {
124
- 0% {
125
- opacity: 1;
126
- }
127
- 100% {
128
- opacity: 0;
129
- }
130
- }
131
- </style>
package/src/components/message/index.vue DELETED
@@ -1,70 +0,0 @@
1
- <script setup lang="ts">
2
- import XItem, { Type } from './item.vue'
3
- import { eventBus } from '../../utils/core'
4
- import { reactive, onMounted, onBeforeUnmount } from 'vue'
5
-
6
- interface Item {
7
- id: number
8
- type: Type
9
- text: string
10
- timeout: number
11
- }
12
-
13
- interface State {
14
- items: Item[]
15
- }
16
-
17
- const state = reactive<State>({ items: [] })
18
-
19
- onMounted(() => {
20
- eventBus.on('message', onMessage)
21
- })
22
-
23
- onBeforeUnmount(() => {
24
- eventBus.off('message', onMessage)
25
- })
26
-
27
- const onMessage = (params: any) => {
28
- addItem(params.type as Type, params.text, params.timeout)
29
- }
30
-
31
- const onItemTimeout = (id: number) => {
32
- removeItem(id)
33
- }
34
-
35
- let seq = 0
36
- const addItem = (type: Type, text: string, timeout: number) => {
37
- const id = seq++
38
- state.items.push({ id, type, text, timeout })
39
- }
40
-
41
- const removeItem = (id: number) => {
42
- const idx = state.items.findIndex(item => item.id === id)
43
- if (idx >= 0) {
44
- state.items.splice(idx, 1)
45
- }
46
- }
47
- </script>
48
-
49
- <template>
50
- <div @click.stop class="x-cont d-flex flex-column-reverse align-center">
51
- <x-item
52
- v-for="item in state.items"
53
- @timeout="onItemTimeout"
54
- :id="item.id"
55
- :type="item.type"
56
- :text="item.text"
57
- :timeout="item.timeout"
58
- :key="item.id"
59
- />
60
- </div>
61
- </template>
62
-
63
- <style lang="sass" scoped>
64
- .x-cont
65
- position: absolute
66
- left: 50%
67
- bottom: 20px
68
- transform: translateX(-50%)
69
- z-index: 9999
70
- </style>
package/src/components/message/item.vue DELETED
@@ -1,75 +0,0 @@
1
- <script setup lang="ts">
2
- import { PropType } from 'vue'
3
- import { ref, computed, onMounted, watch } from 'vue'
4
-
5
- export type Type = 'error' | 'info' | 'success' | 'warning'
6
-
7
- const props = defineProps({
8
- id: {
9
- type: Number,
10
- required: true
11
- },
12
- type: {
13
- type: String as PropType<Type>,
14
- required: true
15
- },
16
- text: {
17
- type: String,
18
- required: true
19
- },
20
- timeout: {
21
- type: Number,
22
- default: 5000
23
- }
24
- })
25
-
26
- const open = ref(true)
27
-
28
- const emit = defineEmits(['timeout'])
29
-
30
- const icon = computed(() => {
31
- let icon: string = ''
32
- switch (props.type) {
33
- case 'error':
34
- icon = 'cancel'
35
- break
36
- case 'info':
37
- icon = 'info'
38
- break
39
- case 'success':
40
- icon = 'check-circle'
41
- break
42
- case 'warning':
43
- icon = 'error'
44
- break
45
- }
46
- return icon
47
- })
48
-
49
- onMounted(() => {
50
- setTimeout(() => {
51
- emit('timeout', props.id)
52
- }, props.timeout)
53
- })
54
-
55
- watch(open, val => {
56
- if (!val) {
57
- emit('timeout', props.id)
58
- }
59
- })
60
- </script>
61
-
62
- <template>
63
- <v-alert
64
- v-model="open"
65
- class="mt-2"
66
- :type="type as Type"
67
- :icon="icon"
68
- :text="text"
69
- max-width="90%"
70
- width="500px"
71
- elevation="1"
72
- density="compact"
73
- closable
74
- />
75
- </template>
package/src/components/promptDlg/index.vue DELETED
@@ -1,119 +0,0 @@
1
- <script setup lang="ts">
2
- import { eventBus, waitUtil } from '../../utils/core'
3
- import { useLocale } from 'vuetify/lib/framework.mjs'
4
- import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue'
5
-
6
- const locale = useLocale()
7
-
8
- interface ButtonOptions {
9
- color?: string
10
- text?: string
11
- }
12
-
13
- const open = defineModel<boolean>({ required: true })
14
-
15
- const title = ref('')
16
- const text = ref('')
17
- const label = ref<string>()
18
- const placeholder = ref<string>()
19
- const rules = ref<((val: string) => boolean | string)[]>()
20
- const value = ref('')
21
- const cancel = ref<ButtonOptions>()
22
- const confirm = ref<ButtonOptions>()
23
-
24
- const cancelColor = computed(() => {
25
- return cancel.value?.color ?? 'primary'
26
- })
27
-
28
- const cancelText = computed(() => {
29
- return cancel.value?.text ?? locale.t('cancel')
30
- })
31
-
32
- const confirmColor = computed(() => {
33
- return confirm.value?.color ?? 'primary'
34
- })
35
-
36
- const confirmText = computed(() => {
37
- return confirm.value?.text ?? locale.t('confirm')
38
- })
39
-
40
- const target = ref<any | undefined>()
41
-
42
- let seq = 0
43
- let handled = false
44
-
45
- const onOpen = async (params: any) => {
46
- title.value = params.title
47
- text.value = params.text
48
- label.value = params.label
49
- placeholder.value = params.placeholder
50
- rules.value = params.rules
51
- value.value = params.value
52
- cancel.value = params.cancel
53
- confirm.value = params.confirm
54
- seq = params.seq
55
- handled = false
56
- open.value = true
57
- await waitUtil(() => target.value !== undefined, 1000)
58
- target.value?.focus()
59
- }
60
-
61
- onMounted(() => {
62
- eventBus.on('promptDlg', onOpen)
63
- })
64
-
65
- onBeforeUnmount(() => {
66
- eventBus.off('promptDlg', onOpen)
67
- })
68
-
69
- const onConfirm = () => {
70
- open.value = false
71
- if (!handled) {
72
- eventBus.emit('promptDlgResult' + seq, value.value ?? '')
73
- handled = true
74
- }
75
- }
76
-
77
- watch(open, val => {
78
- if (!val && !handled) {
79
- eventBus.emit('promptDlgResult' + seq, undefined)
80
- handled = true
81
- }
82
- })
83
- </script>
84
-
85
- <template>
86
- <v-dialog
87
- v-model="open"
88
- @keydown.esc.stop.prevent="open = false"
89
- @keydown.enter.stop.prevent="onConfirm"
90
- transition="dialog-top-transition"
91
- max-width="600px"
92
- >
93
- <v-card>
94
- <v-card-title>
95
- {{ title }}
96
- </v-card-title>
97
- <v-card-text>
98
- {{ text }}
99
- </v-card-text>
100
- <v-form class="mx-3">
101
- <v-text-field
102
- v-model="value"
103
- :label="label"
104
- :placeholder="placeholder"
105
- :rules="rules"
106
- ref="target"
107
- />
108
- </v-form>
109
- <v-card-actions class="d-flex justify-end">
110
- <v-btn @click="open = false" :color="cancelColor" :variant="'text'">
111
- {{ cancelText }}
112
- </v-btn>
113
- <v-btn @click="onConfirm" :color="confirmColor" :variant="'text'">
114
- {{ confirmText }}
115
- </v-btn>
116
- </v-card-actions>
117
- </v-card>
118
- </v-dialog>
119
- </template>