@fishawack/lab-velocity 0.0.2 → 0.0.4

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 (18) hide show
  1. package/package.json +52 -52
  2. package/Icon.vue +0 -33
  3. package/Svg.vue +0 -41
  4. package/_base.scss +0 -1
  5. package/_defaults.scss +0 -7
  6. package/_variables.scss +0 -3
  7. package/form/Button.vue +0 -122
  8. package/form/basic.vue +0 -62
  9. package/form/checkbox-group.vue +0 -38
  10. package/form/checkbox.vue +0 -39
  11. package/form/color.vue +0 -22
  12. package/form/datetime.vue +0 -58
  13. package/form/file.vue +0 -89
  14. package/form/input.js +0 -71
  15. package/form/input.vue +0 -51
  16. package/form/select.vue +0 -73
  17. package/form/switch.vue +0 -43
  18. package/form/wysiwyg.vue +0 -105
package/package.json CHANGED
@@ -1,54 +1,54 @@
1
1
  {
2
- "name": "@fishawack/lab-velocity",
3
- "version": "0.0.2",
4
- "description": "Avalere Health branded style system",
5
- "scripts": {
6
- "setup": "npm ci || npm i && npm run content",
7
- "content": "npm run content --prefix node_modules/@fishawack/core/",
8
- "start": "npm run production && npm run story:dev",
9
- "production": "npm run production --prefix node_modules/@fishawack/core/ && npm run story:build",
10
- "test": "npm test --prefix node_modules/@fishawack/core/",
11
- "package": "npm run package --prefix node_modules/@fishawack/core/",
12
- "deploy": "npm run deploy --prefix node_modules/@fishawack/core/",
13
- "mail": "npm run mail --prefix node_modules/@fishawack/core/",
14
- "story:dev": "histoire dev",
15
- "story:build": "histoire build",
16
- "pretest": "cp -r _Build/sass/** ./ && cp -r _Build/vue/components/** ./",
17
- "preversion": "lab-env test",
18
- "postversion": "git push && git push --tags && npm publish",
19
- "postpublish": "bash -c \"(rm -rf (_*.scss|components|form|*.vue) | true) 2>/dev/null && git checkout development && git merge master && git push\""
20
- },
21
- "license": "BSD-3-Clause",
22
- "author": {
23
- "name": "Fishawack",
24
- "url": "https://fishawack.com/"
25
- },
26
- "keywords": [
27
- "css",
28
- "components"
29
- ],
30
- "devDependencies": {
31
- "@fishawack/core": "^8.16.1",
32
- "@fishawack/lab-ui": "^12.5.0",
33
- "@histoire/plugin-vue": "^0.17.17",
34
- "@vitejs/plugin-vue": "^5.1.1",
35
- "histoire": "^0.17.17",
36
- "sass": "^1.77.8",
37
- "vite": "^5.3.5",
38
- "vite-svg-loader": "^5.1.0",
39
- "vue": "^3.4.34",
40
- "vue-loader": "^17.2.2",
41
- "vue-router": "^4.4.0",
42
- "vuex": "^4.1.0",
43
- "vuex-persistedstate": "^4.1.0"
44
- },
45
- "dependencies": {
46
- "element-plus": "^2.7.8"
47
- },
48
- "files": [
49
- "*.scss",
50
- "*.vue",
51
- "form"
52
- ],
53
- "main": "index.js"
2
+ "name": "@fishawack/lab-velocity",
3
+ "version": "0.0.4",
4
+ "description": "Avalere Health branded style system",
5
+ "scripts": {
6
+ "setup": "npm ci || npm i && npm run content",
7
+ "content": "npm run content --prefix node_modules/@fishawack/core/",
8
+ "start": "npm run production && npm run story:dev",
9
+ "production": "npm run production --prefix node_modules/@fishawack/core/ && npm run story:build",
10
+ "test": "npm test --prefix node_modules/@fishawack/core/",
11
+ "package": "npm run package --prefix node_modules/@fishawack/core/",
12
+ "deploy": "npm run deploy --prefix node_modules/@fishawack/core/",
13
+ "mail": "npm run mail --prefix node_modules/@fishawack/core/",
14
+ "story:dev": "histoire dev",
15
+ "story:build": "histoire build",
16
+ "pretest": "cp -r _Build/sass/** ./ && cp -r _Build/vue/components/** ./",
17
+ "preversion": "lab-env test",
18
+ "postversion": "git push && git push --tags && npm publish",
19
+ "postpublish": "bash -c '(rm -rf _*.scss components form *.vue; true) 2>/dev/null && git checkout development && git merge master && git push' || echo 'Failed to execute postpublish script'"
20
+ },
21
+ "license": "BSD-3-Clause",
22
+ "author": {
23
+ "name": "Fishawack",
24
+ "url": "https://fishawack.com/"
25
+ },
26
+ "keywords": [
27
+ "css",
28
+ "components"
29
+ ],
30
+ "devDependencies": {
31
+ "@fishawack/core": "^8.16.1",
32
+ "@fishawack/lab-ui": "^12.5.0",
33
+ "@histoire/plugin-vue": "^0.17.17",
34
+ "@vitejs/plugin-vue": "^5.1.1",
35
+ "histoire": "^0.17.17",
36
+ "sass": "^1.77.8",
37
+ "vite": "^5.3.5",
38
+ "vite-svg-loader": "^5.1.0",
39
+ "vue": "^3.4.34",
40
+ "vue-loader": "^17.2.2",
41
+ "vue-router": "^4.4.0",
42
+ "vuex": "^4.1.0",
43
+ "vuex-persistedstate": "^4.1.0"
44
+ },
45
+ "dependencies": {
46
+ "element-plus": "^2.7.8"
47
+ },
48
+ "files": [
49
+ "*.scss",
50
+ "*.vue",
51
+ "form"
52
+ ],
53
+ "main": "index.js"
54
54
  }
package/Icon.vue DELETED
@@ -1,33 +0,0 @@
1
- <template>
2
- <div class="vel-icon">
3
- <VSvg v-bind="$props" />
4
- </div>
5
- </template>
6
-
7
- <script>
8
- import VSvg from "../components/Svg.vue";
9
-
10
- export default {
11
- props: {
12
- name: {
13
- type: String,
14
- required: true,
15
- },
16
- embed: {
17
- type: Boolean,
18
- default: false,
19
- },
20
- asis: {
21
- type: Boolean,
22
- default: false,
23
- },
24
- artboard: {
25
- type: Boolean,
26
- default: false,
27
- },
28
- },
29
- components: {
30
- VSvg
31
- },
32
- }
33
- </script>
package/Svg.vue DELETED
@@ -1,41 +0,0 @@
1
- <template>
2
- <component v-if="embed" :is="icon" class="vel-svg" />
3
- <svg v-else class="vel-svg">
4
- <use :xlink:href="`#${name}${artboard ? '--artboard' : ''}`" />
5
- </svg>
6
- </template>
7
-
8
- <script>
9
- import { defineAsyncComponent } from 'vue';
10
- export default {
11
-
12
- props: {
13
- name: {
14
- type: String,
15
- required: true,
16
- },
17
- embed: {
18
- type: Boolean,
19
- default: false,
20
- },
21
- asis: {
22
- type: Boolean,
23
- default: false,
24
- },
25
- artboard: {
26
- type: Boolean,
27
- default: false,
28
- }
29
- },
30
- data() {
31
- return {
32
- icons: import.meta.glob(`../../handlebars/generated/embed/**/*.svg`, { query: '?component' })
33
- }
34
- },
35
- computed: {
36
- icon() {
37
- return defineAsyncComponent(() => this.icons[`../../handlebars/generated/embed/svg${this.asis ? '--asis' : ''}--${this.name}${this.artboard ? '--artboard' : ''}.svg`]())
38
- },
39
- }
40
- }
41
- </script>
package/_base.scss DELETED
@@ -1 +0,0 @@
1
- @import "element-plus/theme-chalk/base.css";
package/_defaults.scss DELETED
@@ -1,7 +0,0 @@
1
- @use "_variables.scss";
2
-
3
- @import "@fishawack/lab-ui/_defaults.scss";
4
-
5
- $colors: variables.dynamic('color', module-variables("variables"));
6
-
7
- // Override lab-ui defaults here, e.g $button: $color6;
package/_variables.scss DELETED
@@ -1,3 +0,0 @@
1
- @import "@fishawack/lab-ui/_variables.scss";
2
-
3
- // Set global variables here, e.g $color6: red;
package/form/Button.vue DELETED
@@ -1,122 +0,0 @@
1
- <template>
2
- <XInput v-bind="$props">
3
- <el-button
4
- :class="[`button ${baseClass}__button`]"
5
- :name="name"
6
- :label="label"
7
- :id="name"
8
- :disabled="disabled"
9
- :round="round"
10
- :circle="circle"
11
- :size="size"
12
- :text="text"
13
- :tag="tag"
14
- :autofocus="autofocus"
15
- :native-type="nativeType"
16
- :type="type"
17
- :link="link"
18
- :plain="plain"
19
- :loading="loading"
20
- :customIcon="customIcon"
21
- v-model="content"
22
- @input="handleInput">
23
-
24
- <template v-if="icon || customIcon " #icon>
25
- <component :is="icon" v-if="icon" :class="iconClasses" />
26
- <VIcon v-if="customIcon" :name="customIcon" :class="iconClasses" embed></VIcon>
27
- </template>
28
- <span v-if="label" v-html="label" :class="[`${baseClass}__label`]" />
29
-
30
- </el-button>
31
- </XInput>
32
- </template>
33
-
34
- <script>
35
- import { ElButton } from "element-plus";
36
- import { ElIcon } from "element-plus";
37
- import input from "./input.js";
38
- import XInput from "./input.vue";
39
- import VIcon from "../../components/Icon.vue";
40
- import {
41
- Check,
42
- Delete,
43
- Edit,
44
- Message,
45
- Search,
46
- Star,
47
- } from '@element-plus/icons-vue'
48
-
49
- export default {
50
- mixins: [input],
51
- props: {
52
- ...input.props,
53
- baseClass: {
54
- type: String,
55
- default: "vel-button",
56
- },
57
- inputType: {
58
- type: String,
59
- default: "button",
60
- },
61
- type: {
62
- type: String,
63
- default: null,
64
- },
65
- nativeType: {
66
- type: String,
67
- default: "button",
68
- },
69
- size: {
70
- type: String,
71
- default: "default",
72
- },
73
- round: {
74
- type: Boolean,
75
- default: false,
76
- },
77
- circle: {
78
- type: Boolean,
79
- default: false,
80
- },
81
- text: {
82
- type: Boolean,
83
- default: false,
84
- },
85
- link: {
86
- type: Boolean,
87
- default: false,
88
- },
89
- plain: {
90
- type: Boolean,
91
- default: false,
92
- },
93
- tag: {
94
- type: String,
95
- default: "button",
96
- },
97
- loading: {
98
- type: Boolean,
99
- default: false,
100
- },
101
- icon: {
102
- type: ElIcon,
103
- default: null,
104
- },
105
- customIcon: {
106
- type: String,
107
- default: null,
108
- },
109
- iconClasses: {
110
- type: String,
111
- default: "",
112
- }
113
- },
114
-
115
- components: {
116
- XInput,
117
- ElButton,
118
- VIcon,
119
- ElIcon
120
- },
121
- };
122
- </script>
package/form/basic.vue DELETED
@@ -1,62 +0,0 @@
1
- <template>
2
- <XInput v-bind="$props">
3
- <template #label>
4
- <slot name="label" />
5
- </template>
6
-
7
- <el-input
8
- :class="[`${baseClass}__textbox`]"
9
- :name="name"
10
- :id="name"
11
- :disabled="disabled"
12
- :minlength="minlength"
13
- :maxlength="maxlength"
14
- :type="type"
15
- :placeholder="placeholder"
16
- v-model="content"
17
- :required="required"
18
- @input="handleInput"
19
- >
20
- <template v-if="prepend" #prepend>{{ prepend }}</template>
21
- <template v-if="append" #append>{{ append }}</template>
22
- </el-input>
23
- </XInput>
24
- </template>
25
-
26
- <script>
27
- import { ElInput } from "element-plus";
28
- import input from "./input.js";
29
- import XInput from "./input.vue";
30
-
31
- export default {
32
- mixins: [input],
33
- props: {
34
- ...input.props,
35
- baseClass: {
36
- type: String,
37
- default: "vel-basic",
38
- },
39
- minlength: {
40
- type: Number,
41
- default: null,
42
- },
43
- maxlength: {
44
- type: Number,
45
- default: null,
46
- },
47
- prepend: {
48
- type: String,
49
- default: null,
50
- },
51
- append: {
52
- type: String,
53
- default: null,
54
- },
55
- },
56
-
57
- components: {
58
- XInput,
59
- ElInput,
60
- },
61
- };
62
- </script>
package/form/checkbox-group.vue DELETED
@@ -1,38 +0,0 @@
1
- <template>
2
- <XInput :errors="errors" :name="name">
3
- <el-checkbox-group
4
- v-model="content"
5
- @change="handleInput"
6
- :required="required"
7
- >
8
- <el-checkbox
9
- :key="index"
10
- v-for="({ label, value }, index) in options"
11
- :label="label"
12
- :value="value"
13
- >
14
- <slot name="label" :label="label" :value="value">
15
- <span v-html="label"></span>
16
- </slot>
17
- </el-checkbox>
18
- </el-checkbox-group>
19
- </XInput>
20
- </template>
21
-
22
- <script>
23
- import input from "./input.js";
24
- import XInput from "./input.vue";
25
-
26
- export default {
27
- mixins: [input],
28
-
29
- components: { XInput },
30
-
31
- props: {
32
- options: {
33
- type: Array,
34
- default: [],
35
- },
36
- },
37
- };
38
- </script>
package/form/checkbox.vue DELETED
@@ -1,39 +0,0 @@
1
- <template>
2
- <XInput v-bind="$props">
3
- <el-checkbox
4
- :class="[`${baseClass}__checkbox`]"
5
- :id="name"
6
- :disabled="disabled"
7
- v-model="content"
8
- :required="required"
9
- @change="handleInput"
10
- >
11
- </el-checkbox>
12
- </XInput>
13
- </template>
14
-
15
- <script>
16
- import { ElCheckbox } from "element-plus";
17
- import input from "./input.js";
18
- import XInput from "./input.vue";
19
-
20
- export default {
21
- mixins: [input],
22
- props: {
23
- ...input.props,
24
- modelValue: {
25
- type: Boolean,
26
- default: null,
27
- },
28
- baseClass: {
29
- type: String,
30
- default: "vel-checkbox",
31
- },
32
- },
33
-
34
- components: {
35
- XInput,
36
- ElCheckbox,
37
- },
38
- };
39
- </script>
package/form/color.vue DELETED
@@ -1,22 +0,0 @@
1
- <template>
2
- <XInput v-bind="$props">
3
- <template #label>
4
- <slot name="label" />
5
- </template>
6
-
7
- <el-color-picker v-model="content" @change="handleInput" />
8
- </XInput>
9
- </template>
10
-
11
- <script>
12
- import input from "./input.js";
13
- import XInput from "./input.vue";
14
-
15
- export default {
16
- mixins: [input],
17
-
18
- components: {
19
- XInput,
20
- },
21
- };
22
- </script>
package/form/datetime.vue DELETED
@@ -1,58 +0,0 @@
1
- <template>
2
- <XInput v-bind="$props">
3
- <template #label>
4
- <slot name="label" />
5
- </template>
6
-
7
- <el-date-picker
8
- type="date"
9
- :placeholder="placeholder"
10
- :disabled-date="disabledDate"
11
- :shortcuts="shortcuts"
12
- class="w-100"
13
- v-model="content"
14
- @change="handleInput"
15
- value-format="YYYY-MM-DD"
16
- />
17
- </XInput>
18
- </template>
19
-
20
- <script>
21
- import dayjs from "dayjs";
22
-
23
- import input from "./input.js";
24
- import XInput from "./input.vue";
25
-
26
- export default {
27
- mixins: [input],
28
-
29
- components: { XInput },
30
-
31
- props: {
32
- minDate: {
33
- type: [Date, String],
34
- },
35
- maxDate: {
36
- type: [Date, String],
37
- },
38
- shortcuts: {
39
- type: Array,
40
- default: [],
41
- },
42
- },
43
-
44
- methods: {
45
- disabledDate(date) {
46
- if (this.minDate && dayjs(date).isBefore(this.minDate)) {
47
- return true;
48
- }
49
-
50
- if (this.maxDate && dayjs(date).isAfter(this.maxDate)) {
51
- return true;
52
- }
53
-
54
- return false;
55
- },
56
- },
57
- };
58
- </script>
package/form/file.vue DELETED
@@ -1,89 +0,0 @@
1
- <template>
2
- <XInput v-bind="$props">
3
- <template #label>
4
- <slot name="label" />
5
- </template>
6
-
7
- <input
8
- ref="input"
9
- type="file"
10
- class="absolute invisible top-0 left-0"
11
- @change="onImageChange"
12
- />
13
- <div class="border-solid border border-color-6">
14
- <el-empty
15
- @click.prevent="$refs.input.click()"
16
- class="p-0 w-100 block mx-auto cursor"
17
- style="max-width: 150px"
18
- :image="hasPreview && imgSrc"
19
- :description="hasPreview ? 'Preview' : 'No preview available'"
20
- />
21
- </div>
22
- <div class="text-center mt-0.5">
23
- <el-button v-if="content" type="danger" @click="cancel"
24
- >Clear</el-button
25
- >
26
- </div>
27
- </XInput>
28
- </template>
29
-
30
- <script>
31
- import input from "./input.js";
32
- import XInput from "./input.vue";
33
-
34
- export default {
35
- mixins: [input],
36
-
37
- components: { XInput },
38
-
39
- props: {
40
- preview: {},
41
- },
42
-
43
- data() {
44
- return {
45
- imgSrc: null,
46
- };
47
- },
48
-
49
- mounted() {
50
- this.imgSrc = this.preview;
51
- },
52
-
53
- computed: {
54
- hasPreview() {
55
- return this.imgSrc &&
56
- [".svg", ".jpg", ".png", "data:image/"].some((d) =>
57
- this.imgSrc.includes(d)
58
- )
59
- ? this.imgSrc
60
- : "";
61
- },
62
- },
63
-
64
- methods: {
65
- onImageChange(e) {
66
- if (!e.target.files.length) return;
67
-
68
- let file = e.target.files[0];
69
- let reader = new FileReader();
70
-
71
- reader.readAsDataURL(file);
72
-
73
- reader.onload = (e) => {
74
- this.imgSrc = reader.result;
75
- };
76
-
77
- this.content = file;
78
-
79
- this.handleInput();
80
- },
81
- cancel() {
82
- this.$refs.input.value = null;
83
- this.content = null;
84
- this.imgSrc = this.preview;
85
- this.handleInput();
86
- },
87
- },
88
- };
89
- </script>
package/form/input.js DELETED
@@ -1,71 +0,0 @@
1
- export default {
2
- props: {
3
- type: {
4
- type: String,
5
- default: "text",
6
- },
7
- placeholder: {
8
- type: String,
9
- default: null,
10
- },
11
- required: {
12
- type: Boolean,
13
- default: false,
14
- },
15
- disabled: {
16
- type: Boolean,
17
- default: false,
18
- },
19
- autofocus: {
20
- type: Boolean,
21
- default: false,
22
- },
23
- modelValue: {
24
- type: String,
25
- default: null,
26
- },
27
- label: {
28
- type: String,
29
- default: null,
30
- },
31
- name: {
32
- type: String,
33
- default: null,
34
- },
35
- error: {
36
- type: String,
37
- default: null,
38
- },
39
- baseClass: {
40
- type: String,
41
- default: null,
42
- },
43
- classes: {
44
- type: String,
45
- default: null,
46
- },
47
- },
48
-
49
- emits: ["update:modelValue"],
50
-
51
- data() {
52
- return {
53
- content: "",
54
- };
55
- },
56
-
57
- watch: {
58
- modelValue: {
59
- immediate: true,
60
- handler(val) {
61
- this.content = val;
62
- },
63
- },
64
- },
65
-
66
- methods: {
67
- handleInput() {
68
- this.$emit("update:modelValue", this.content);
69
- },
70
- },
71
- };
package/form/input.vue DELETED
@@ -1,51 +0,0 @@
1
- <template>
2
- <div class="form__group" :class="{ [baseClass]: baseClass, 'form__group--error': error, [classes]: classes }">
3
- <label v-if="(label || $slots.label) && inputType !== 'button'" :class="{ [baseClass + '__label']: baseClass }"
4
- :for="name">
5
- <slot name="label">
6
- <span v-html="label"></span>
7
- </slot>
8
- </label>
9
-
10
- <slot />
11
-
12
- <div v-if="error" class="form__error" :class="{ [baseClass + '__error']: baseClass }">
13
- <small v-text="error"></small>
14
- </div>
15
- </div>
16
- </template>
17
-
18
- <script>
19
- export default {
20
- props: {
21
- label: {
22
- type: String,
23
- default: null,
24
- },
25
- name: {
26
- type: String,
27
- default: null,
28
- },
29
- error: {
30
- type: String,
31
- default: null,
32
- },
33
- baseClass: {
34
- type: String,
35
- default: null,
36
- },
37
- classes: {
38
- type: String,
39
- default: null,
40
- },
41
- type: {
42
- type: String,
43
- default: null,
44
- },
45
- inputType: {
46
- type: String,
47
- default: "text",
48
- },
49
- },
50
- };
51
- </script>
package/form/select.vue DELETED
@@ -1,73 +0,0 @@
1
- <template>
2
- <XInput v-bind="$props">
3
- <template #label>
4
- <slot name="label" />
5
- </template>
6
-
7
- <el-select
8
- v-model="content"
9
- @change="handleInput"
10
- class="block"
11
- :multiple="multiple"
12
- :placeholder="placeholder"
13
- :disabled="disabled"
14
- collapse-tags
15
- filterable
16
- clearable
17
- :value-on-clear="null"
18
- >
19
- <el-option
20
- v-if="object"
21
- v-for="(label, value) in options"
22
- :key="value"
23
- :label="label"
24
- :value="castValue(value)"
25
- >
26
- </el-option>
27
- <el-option
28
- v-if="!object"
29
- v-for="option in options"
30
- :key="option.value"
31
- :label="option.label"
32
- :value="castValue(option.value)"
33
- >
34
- </el-option>
35
- </el-select>
36
- </XInput>
37
- </template>
38
-
39
- <script>
40
- import input from "./input.js";
41
- import XInput from "./input.vue";
42
-
43
- export default {
44
- mixins: [input],
45
-
46
- components: {
47
- XInput,
48
- },
49
-
50
- props: {
51
- options: {},
52
- multiple: {
53
- default: false,
54
- },
55
- object: {
56
- default: true,
57
- },
58
- },
59
-
60
- methods: {
61
- castValue(value) {
62
- if (
63
- !_.isNull(value) &&
64
- typeof value === "string" &&
65
- !isNaN(Number(value))
66
- ) {
67
- return parseInt(value);
68
- }
69
- return value;
70
- },
71
- },
72
- };
73
- </script>
package/form/switch.vue DELETED
@@ -1,43 +0,0 @@
1
- <template>
2
- <XInput v-bind="$props">
3
- <template #label>
4
- <slot name="label" />
5
- </template>
6
-
7
- <el-switch
8
- :class="[`${baseClass}__control`]"
9
- :name="name"
10
- :id="name"
11
- :disabled="disabled"
12
- v-model="content"
13
- :required="required"
14
- @input="handleInput"
15
- />
16
- </XInput>
17
- </template>
18
-
19
- <script>
20
- import { ElSwitch } from "element-plus";
21
- import input from "./input.js";
22
- import XInput from "./input.vue";
23
-
24
- export default {
25
- mixins: [input],
26
- props: {
27
- ...input.props,
28
- modelValue: {
29
- type: Boolean,
30
- default: null,
31
- },
32
- baseClass: {
33
- type: String,
34
- default: "vel-switch",
35
- },
36
- },
37
-
38
- components: {
39
- XInput,
40
- ElSwitch,
41
- },
42
- };
43
- </script>
package/form/wysiwyg.vue DELETED
@@ -1,105 +0,0 @@
1
- <template>
2
- <XInput v-bind="$props">
3
- <template #label>
4
- <slot name="label" />
5
- </template>
6
- <div class="el-input__inner px-0" ref="input" />
7
- </XInput>
8
- </template>
9
-
10
- <script>
11
- import Quill from "quill";
12
- import input from "./input.js";
13
- import XInput from "./input.vue";
14
-
15
- export default {
16
- mixins: [input],
17
-
18
- components: {
19
- XInput,
20
- },
21
-
22
- props: {
23
- simple: {
24
- type: Boolean,
25
- default: false,
26
- },
27
- },
28
-
29
- data: () => ({
30
- editor: null,
31
- hold: null,
32
- }),
33
-
34
- watch: {
35
- modelValue: {
36
- handler(val) {
37
- if (val !== this.hold) {
38
- this.setValue();
39
- }
40
- },
41
- },
42
- },
43
-
44
- methods: {
45
- getValue() {
46
- return this.editor.getText().trim() === "" // Quill leaves <p></br></p> on empty input so ignore
47
- ? ""
48
- : this.simple // Simple editor removes outer tags and only allows inner phrasing tags
49
- ? [...this.editor.root.children]
50
- .map((d) => d.innerHTML)
51
- .join("\n")
52
- : this.editor.root.innerHTML;
53
- },
54
- setValue() {
55
- this.editor.root.innerHTML =
56
- this.simple && this.modelValue // Surround text in p tags to keep it grouped correctly on simple strings. Ignore if modelValue empty otherwise you'll end up with <p>null</p>
57
- ? `<p>${this.modelValue}</p>`
58
- : this.modelValue;
59
- },
60
- },
61
-
62
- mounted() {
63
- this.editor = new Quill(this.$refs.input, {
64
- modules: {
65
- clipboard: {
66
- matchVisual: false,
67
- },
68
- toolbar: [
69
- [
70
- this.simple
71
- ? undefined
72
- : { header: [1, 2, 3, 4, 5, 6, false] },
73
- "bold",
74
- "italic",
75
- "underline",
76
- "strike",
77
- { script: "sub" },
78
- { script: "super" },
79
- this.simple ? undefined : { list: "ordered" },
80
- this.simple ? undefined : { list: "bullet" },
81
- "clean",
82
- ],
83
- ],
84
- },
85
- placeholder: this.placeholder,
86
- theme: "snow",
87
- });
88
-
89
- this.setValue();
90
-
91
- this.editor.on("text-change", (delta, oldDelta, source) => {
92
- this.hold = this.getValue();
93
- this.$emit("update:modelValue", this.hold);
94
- });
95
-
96
- // Disable tab
97
- delete this.editor.getModule("keyboard").bindings["9"];
98
-
99
- // Disable tab index on toolbar buttons
100
- [...this.$el.querySelectorAll(".ql-toolbar button")].forEach((d) =>
101
- d.setAttribute("tabindex", -1)
102
- );
103
- },
104
- };
105
- </script>