maglevcms 1.4.0 → 1.5.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/components/maglev/content/image.rb +1 -1
- data/app/controllers/maglev/api/assets_controller.rb +3 -3
- data/app/controllers/maglev/application_controller.rb +5 -0
- data/app/controllers/maglev/assets_controller.rb +1 -1
- data/app/controllers/maglev/editor_controller.rb +12 -3
- data/app/frontend/admin/controllers/screenshot_controller.js +5 -1
- data/app/frontend/editor/App.vue +1 -1
- data/app/frontend/editor/components/dynamic-form/dynamic-input.vue +17 -18
- data/app/frontend/editor/components/dynamic-form/index.vue +1 -1
- data/app/frontend/editor/components/header-nav/device-toggler.vue +1 -1
- data/app/frontend/editor/components/header-nav/index.vue +3 -3
- data/app/frontend/editor/components/header-nav/locale-toggler/index.vue +4 -4
- data/app/frontend/editor/components/header-nav/preview-toggler.vue +3 -3
- data/app/frontend/editor/components/header-nav/publish-button.vue +3 -3
- data/app/frontend/editor/components/header-nav/save-button.vue +1 -1
- data/app/frontend/editor/components/icon-library/index.vue +1 -1
- data/app/frontend/editor/components/image-library/index.vue +2 -2
- data/app/frontend/editor/components/image-library/list-item.vue +1 -1
- data/app/frontend/editor/components/image-library/uploader.vue +1 -1
- data/app/frontend/editor/components/kit/accordion.vue +8 -3
- data/app/frontend/editor/components/kit/checkbox-input.vue +1 -1
- data/app/frontend/editor/components/kit/collection-item-input.vue +7 -4
- data/app/frontend/editor/components/kit/color-input/core-input.vue +17 -12
- data/app/frontend/editor/components/kit/color-input/preset-button.vue +14 -10
- data/app/frontend/editor/components/kit/color-input/preset-dropdown.vue +8 -7
- data/app/frontend/editor/components/kit/color-input.vue +2 -4
- data/app/frontend/editor/components/kit/confirmation-button.vue +3 -3
- data/app/frontend/editor/components/kit/divider.vue +4 -4
- data/app/frontend/editor/components/kit/dropdown.vue +1 -1
- data/app/frontend/editor/components/kit/hint.vue +3 -3
- data/app/frontend/editor/components/kit/icon-input.vue +4 -4
- data/app/frontend/editor/components/kit/icon.vue +7 -2
- data/app/frontend/editor/components/kit/image-input.vue +5 -5
- data/app/frontend/editor/components/kit/index.js +25 -25
- data/app/frontend/editor/components/kit/link-input.vue +6 -6
- data/app/frontend/editor/components/kit/list-item-button.vue +2 -2
- data/app/frontend/editor/components/kit/modal-root.vue +3 -3
- data/app/frontend/editor/components/kit/modal.vue +2 -2
- data/app/frontend/editor/components/kit/page-icon.vue +2 -2
- data/app/frontend/editor/components/kit/pagination/index.vue +3 -3
- data/app/frontend/editor/components/kit/rich-text-input/block-button.vue +10 -10
- data/app/frontend/editor/components/kit/rich-text-input/menu-button.vue +1 -1
- data/app/frontend/editor/components/kit/rich-text-input/table-button.vue +18 -12
- data/app/frontend/editor/components/kit/rich-text-input.vue +1 -1
- data/app/frontend/editor/components/kit/search-input.vue +3 -3
- data/app/frontend/editor/components/kit/select-input.vue +19 -5
- data/app/frontend/editor/components/kit/simple-select.vue +1 -1
- data/app/frontend/editor/components/kit/submit-button.vue +4 -4
- data/app/frontend/editor/components/kit/tabs.vue +2 -2
- data/app/frontend/editor/components/kit/text-input.vue +1 -1
- data/app/frontend/editor/components/kit/textarea-input.vue +1 -1
- data/app/frontend/editor/components/link-picker/email.vue +1 -1
- data/app/frontend/editor/components/link-picker/index.vue +1 -1
- data/app/frontend/editor/components/link-picker/page.vue +5 -5
- data/app/frontend/editor/components/link-picker/url.vue +2 -2
- data/app/frontend/editor/components/page/edit.vue +3 -3
- data/app/frontend/editor/components/page/form/main.vue +3 -3
- data/app/frontend/editor/components/page/form/seo.vue +5 -5
- data/app/frontend/editor/components/page/list/list-item.vue +12 -12
- data/app/frontend/editor/components/page/new.vue +3 -3
- data/app/frontend/editor/components/section-block-pane/index.vue +1 -1
- data/app/frontend/editor/components/section-block-pane/setting-list.vue +1 -1
- data/app/frontend/editor/components/section-highlighter/bottom-actions.vue +1 -1
- data/app/frontend/editor/components/section-highlighter/top-left-actions.vue +7 -3
- data/app/frontend/editor/components/section-highlighter/top-right-actions.vue +9 -6
- data/app/frontend/editor/components/section-list/list-item.vue +12 -5
- data/app/frontend/editor/components/section-pane/block-list/list-item.vue +3 -3
- data/app/frontend/editor/components/section-pane/block-list/new-block-button.vue +4 -4
- data/app/frontend/editor/components/section-pane/block-tree/new-nested-block-button.vue +4 -4
- data/app/frontend/editor/components/section-pane/block-tree/tree-node.vue +2 -2
- data/app/frontend/editor/components/section-pane/index.vue +2 -2
- data/app/frontend/editor/components/section-pane/setting-list.vue +1 -1
- data/app/frontend/editor/components/sidebar-nav.vue +5 -5
- data/app/frontend/editor/components/style-pane/index.vue +1 -1
- data/app/frontend/editor/components/theme-section-list/index.vue +2 -2
- data/app/frontend/editor/components/theme-section-list/list-item.vue +1 -1
- data/app/frontend/editor/layouts/slide-pane.vue +1 -1
- data/app/frontend/editor/locales/index.js +5 -2
- data/app/frontend/editor/misc/utils.js +10 -7
- data/app/frontend/editor/mixins/global.js +1 -1
- data/app/frontend/editor/services/api.js +2 -2
- data/app/frontend/editor/services/image.js +6 -2
- data/app/frontend/editor/services/section.js +1 -0
- data/app/frontend/editor/store/actions/page.js +1 -1
- data/app/frontend/editor/store/getters.js +1 -1
- data/app/frontend/editor/views/content-pane.vue +9 -5
- data/app/frontend/editor/views/page-preview.vue +5 -1
- data/app/frontend/editor/views/pages/index.vue +1 -1
- data/app/frontend/live-preview-client/rails.js +1 -1
- data/app/frontend/live-preview-client/run-scripts.js +22 -24
- data/app/models/maglev/asset.rb +14 -0
- data/app/models/maglev/page/search_concern.rb +2 -1
- data/app/models/maglev/page.rb +18 -0
- data/app/models/maglev/page_path.rb +17 -0
- data/app/models/maglev/site.rb +24 -0
- data/db/migrate/20200824085207_create_maglev_sites.rb +2 -1
- data/db/migrate/20200824104648_create_maglev_pages.rb +2 -1
- data/db/migrate/20201206172020_create_maglev_assets.rb +2 -1
- data/db/migrate/20210830085101_create_maglev_page_paths.rb +3 -2
- data/lib/maglev/engine.rb +1 -0
- data/lib/maglev/migration.rb +20 -0
- data/lib/maglev/version.rb +1 -1
- data/lib/maglev.rb +7 -0
- data/lib/tasks/maglev_tasks.rake +1 -1
- data/package.json +21 -17
- data/{postcss.config.js → postcss.config.cjs} +1 -1
- data/yarn.lock +1171 -1009
- metadata +23 -9
- data/.eslintrc.js +0 -49
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 8f2ab19ced5aac5add6f9567d35c4ff2afd691a9df28d6427848add5b4e485c8
|
4
|
+
data.tar.gz: 275f52591a49d27d99af9cd7d1d9e31204318c818cbc82bc02c7aba266336f23
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: d12fbd67952a61a321f253d6ec8ac8c97f981b880572bf3d8f1d65a95a825d29adba0041c53929c26a631a7f8e1f99e9bfbd907d82a53a263777ed9a751334f0
|
7
|
+
data.tar.gz: 0a149c32927a7f9f478f489b281957a1f7ec32b5c2ee2ac3f08cfd6fad1d51ac59a6bca6f660af64f35bdc7833bec98443f23d9807ef5e515a22d112dee01f4a
|
@@ -12,7 +12,7 @@ module Maglev
|
|
12
12
|
end
|
13
13
|
|
14
14
|
def show
|
15
|
-
@asset = resources.find(
|
15
|
+
@asset = resources.find(resource_id)
|
16
16
|
end
|
17
17
|
|
18
18
|
def create
|
@@ -21,12 +21,12 @@ module Maglev
|
|
21
21
|
end
|
22
22
|
|
23
23
|
def update
|
24
|
-
resources.find(
|
24
|
+
resources.find(resource_id).update!(asset_params)
|
25
25
|
head :ok
|
26
26
|
end
|
27
27
|
|
28
28
|
def destroy
|
29
|
-
resources.find(
|
29
|
+
resources.find(resource_id).destroy!
|
30
30
|
head :no_content
|
31
31
|
end
|
32
32
|
|
@@ -9,7 +9,7 @@ module Maglev
|
|
9
9
|
include Maglev::ContentLocaleConcern
|
10
10
|
|
11
11
|
before_action :fetch_maglev_site, only: :show
|
12
|
-
before_action :
|
12
|
+
before_action :ensure_path_and_content_locale, only: :show
|
13
13
|
before_action :set_content_locale, only: :show
|
14
14
|
|
15
15
|
helper_method :maglev_home_page_id
|
@@ -25,8 +25,10 @@ module Maglev
|
|
25
25
|
|
26
26
|
private
|
27
27
|
|
28
|
-
def
|
29
|
-
|
28
|
+
def ensure_path_and_content_locale
|
29
|
+
return unless params[:path].blank? || params[:locale].blank?
|
30
|
+
|
31
|
+
redirect_to default_maglev_editor_path
|
30
32
|
end
|
31
33
|
|
32
34
|
def maglev_home_page_id
|
@@ -46,5 +48,12 @@ module Maglev
|
|
46
48
|
def maglev_rendering_mode
|
47
49
|
:editor
|
48
50
|
end
|
51
|
+
|
52
|
+
def default_maglev_editor_path
|
53
|
+
editor_path(
|
54
|
+
params[:path] || 'index',
|
55
|
+
locale: params[:locale] || default_content_locale
|
56
|
+
)
|
57
|
+
end
|
49
58
|
end
|
50
59
|
end
|
@@ -21,7 +21,11 @@ export default class extends Controller {
|
|
21
21
|
'[data-maglev-dropzone]',
|
22
22
|
)
|
23
23
|
this.sourceTarget.contentWindow
|
24
|
-
.html2canvas(realSource, {
|
24
|
+
.html2canvas(realSource, {
|
25
|
+
allowTaint: true,
|
26
|
+
logging: true,
|
27
|
+
useCORS: true,
|
28
|
+
})
|
25
29
|
.then((canvas) => {
|
26
30
|
this.outputTarget.src = canvas.toDataURL() // for debugging purpose
|
27
31
|
axios
|
data/app/frontend/editor/App.vue
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
<template>
|
2
2
|
<div>
|
3
|
-
<text-input
|
3
|
+
<uikit-text-input
|
4
4
|
:label="label"
|
5
5
|
:name="setting.id"
|
6
6
|
:isFocused="isFocused"
|
@@ -12,7 +12,7 @@
|
|
12
12
|
parseInt(options.nbRows || 1) < 2
|
13
13
|
"
|
14
14
|
/>
|
15
|
-
<textarea-input
|
15
|
+
<uikit-textarea-input
|
16
16
|
:label="label"
|
17
17
|
:name="setting.id"
|
18
18
|
:isFocused="isFocused"
|
@@ -23,7 +23,7 @@
|
|
23
23
|
setting.type == 'text' && !options.html && parseInt(options.nbRows) > 1
|
24
24
|
"
|
25
25
|
/>
|
26
|
-
<rich-text-input
|
26
|
+
<uikit-rich-text-input
|
27
27
|
:label="label"
|
28
28
|
:name="setting.id"
|
29
29
|
:isFocused="isFocused"
|
@@ -34,27 +34,27 @@
|
|
34
34
|
v-model="inputValue"
|
35
35
|
v-if="setting.type == 'text' && options.html"
|
36
36
|
/>
|
37
|
-
<image-input
|
37
|
+
<uikit-image-input
|
38
38
|
:label="label"
|
39
39
|
:name="setting.id"
|
40
40
|
:isFocused="isFocused"
|
41
41
|
v-model="inputValue"
|
42
42
|
v-if="setting.type == 'image'"
|
43
43
|
/>
|
44
|
-
<icon-input
|
44
|
+
<uikit-icon-input
|
45
45
|
:label="label"
|
46
46
|
:name="setting.id"
|
47
47
|
:isFocused="isFocused"
|
48
48
|
v-model="inputValue"
|
49
49
|
v-if="setting.type == 'icon'"
|
50
50
|
/>
|
51
|
-
<checkbox-input
|
51
|
+
<uikit-checkbox-input
|
52
52
|
:label="label"
|
53
53
|
:name="setting.id"
|
54
54
|
v-model="inputValue"
|
55
55
|
v-if="setting.type == 'checkbox'"
|
56
56
|
/>
|
57
|
-
<link-input
|
57
|
+
<uikit-link-input
|
58
58
|
:label="label"
|
59
59
|
:name="setting.id"
|
60
60
|
:isFocused="isFocused"
|
@@ -62,21 +62,21 @@
|
|
62
62
|
v-model="inputValue"
|
63
63
|
v-if="setting.type == 'link'"
|
64
64
|
/>
|
65
|
-
<color-input
|
65
|
+
<uikit-color-input
|
66
66
|
:label="label"
|
67
67
|
:name="setting.id"
|
68
68
|
v-model="inputValue"
|
69
69
|
:presets="options.presets"
|
70
70
|
v-if="setting.type == 'color'"
|
71
71
|
/>
|
72
|
-
<simple-select
|
72
|
+
<uikit-simple-select
|
73
73
|
:label="label"
|
74
74
|
:name="setting.id"
|
75
75
|
v-model="inputValue"
|
76
76
|
:selectOptions="options.selectOptions"
|
77
77
|
v-if="setting.type == 'select'"
|
78
78
|
/>
|
79
|
-
<collection-item-input
|
79
|
+
<uikit-collection-item-input
|
80
80
|
:label="label"
|
81
81
|
:name="setting.id"
|
82
82
|
v-model="inputValue"
|
@@ -84,16 +84,13 @@
|
|
84
84
|
v-if="setting.type == 'collection_item'"
|
85
85
|
/>
|
86
86
|
|
87
|
-
<divider
|
87
|
+
<uikit-divider
|
88
88
|
:text="label"
|
89
89
|
:withHint="options.withHint"
|
90
90
|
v-if="setting.type == 'divider'"
|
91
91
|
/>
|
92
92
|
|
93
|
-
<hint
|
94
|
-
:text="label"
|
95
|
-
v-if="setting.type == 'hint'"
|
96
|
-
/>
|
93
|
+
<uikit-hint :text="label" v-if="setting.type == 'hint'" />
|
97
94
|
</div>
|
98
95
|
</template>
|
99
96
|
|
@@ -104,15 +101,17 @@ export default {
|
|
104
101
|
setting: { type: Object, default: () => ({ type: 'text' }) },
|
105
102
|
content: { type: Array, required: true },
|
106
103
|
isFocused: { type: Boolean, default: false },
|
107
|
-
i18nScope: { type: String, required: false }
|
104
|
+
i18nScope: { type: String, required: false },
|
108
105
|
},
|
109
106
|
computed: {
|
110
107
|
label() {
|
111
|
-
// i18n key examples:
|
108
|
+
// i18n key examples:
|
112
109
|
// - themes.simple.style.settings.main_color
|
113
110
|
// - themes.simple.sections.navbar_01.settings.title
|
114
111
|
const i18nKey = `${this.i18nScope}.${this.setting.id}`
|
115
|
-
const translation = !this.isBlank(this.i18nScope)
|
112
|
+
const translation = !this.isBlank(this.i18nScope)
|
113
|
+
? this.$st(i18nKey)
|
114
|
+
: null
|
116
115
|
return translation || this.setting.label
|
117
116
|
},
|
118
117
|
options() {
|
@@ -25,7 +25,7 @@ export default {
|
|
25
25
|
settings: { type: Array, default: () => [] },
|
26
26
|
content: { type: Array, default: () => [] },
|
27
27
|
focusedSetting: { type: String, default: undefined },
|
28
|
-
i18nScope: { type: String, required: false }
|
28
|
+
i18nScope: { type: String, required: false },
|
29
29
|
},
|
30
30
|
methods: {
|
31
31
|
onChange(change) {
|
@@ -18,9 +18,9 @@
|
|
18
18
|
}"
|
19
19
|
>
|
20
20
|
<span>{{ $t('headerNav.pages') }}</span>
|
21
|
-
<page-icon class="ml-4" :page="currentPage" />
|
21
|
+
<uikit-page-icon class="ml-4" :page="currentPage" />
|
22
22
|
<span class="ml-2">{{ currentPage.title }}</span>
|
23
|
-
<icon name="arrow-down-s-line" class="ml-3" />
|
23
|
+
<uikit-icon name="arrow-down-s-line" class="ml-3" />
|
24
24
|
</router-link>
|
25
25
|
|
26
26
|
<separator />
|
@@ -33,7 +33,7 @@
|
|
33
33
|
'bg-editor-primary bg-opacity-5': isEditPageActive,
|
34
34
|
}"
|
35
35
|
>
|
36
|
-
<icon name="settings-4-line" size="1.25rem" />
|
36
|
+
<uikit-icon name="settings-4-line" size="1.25rem" />
|
37
37
|
<span class="ml-2">{{ $t('headerNav.pageSettings') }}</span>
|
38
38
|
</router-link>
|
39
39
|
|
@@ -1,13 +1,13 @@
|
|
1
1
|
<template>
|
2
2
|
<div>
|
3
|
-
<dropdown placement="bottom" ref="dropdown" class="h-full flex">
|
3
|
+
<uikit-dropdown placement="bottom" ref="dropdown" class="h-full flex">
|
4
4
|
<template v-slot:button>
|
5
5
|
<button
|
6
6
|
class="h-full w-full px-6 hover:bg-editor-primary hover:bg-opacity-5 transition-colors duration-200 flex items-center focus:outline-none focus:none"
|
7
7
|
>
|
8
|
-
<icon name="ri-global-line" class="mr-2" />
|
8
|
+
<uikit-icon name="ri-global-line" class="mr-2" />
|
9
9
|
<span class="mr-1">{{ currentLabel }}</span>
|
10
|
-
<icon name="arrow-down-s-line" />
|
10
|
+
<uikit-icon name="arrow-down-s-line" />
|
11
11
|
</button>
|
12
12
|
</template>
|
13
13
|
<template v-slot:content>
|
@@ -20,7 +20,7 @@
|
|
20
20
|
/>
|
21
21
|
</div>
|
22
22
|
</template>
|
23
|
-
</dropdown>
|
23
|
+
</uikit-dropdown>
|
24
24
|
</div>
|
25
25
|
</template>
|
26
26
|
|
@@ -1,12 +1,12 @@
|
|
1
1
|
<template>
|
2
2
|
<div>
|
3
|
-
<dropdown placement="bottom" ref="dropdown" class="h-full flex">
|
3
|
+
<uikit-dropdown placement="bottom" ref="dropdown" class="h-full flex">
|
4
4
|
<template v-slot:button>
|
5
5
|
<button
|
6
6
|
class="h-full w-full px-6 hover:bg-editor-primary hover:bg-opacity-5 transition-colors duration-200 flex items-center focus:outline-none focus:none"
|
7
7
|
>
|
8
8
|
<span>{{ $t('headerNav.previewToggler.button') }}</span>
|
9
|
-
<icon name="arrow-down-s-line" />
|
9
|
+
<uikit-icon name="arrow-down-s-line" />
|
10
10
|
</button>
|
11
11
|
</template>
|
12
12
|
<template v-slot:content>
|
@@ -22,7 +22,7 @@
|
|
22
22
|
}}</a>
|
23
23
|
</div>
|
24
24
|
</template>
|
25
|
-
</dropdown>
|
25
|
+
</uikit-dropdown>
|
26
26
|
</div>
|
27
27
|
</template>
|
28
28
|
|
@@ -22,14 +22,14 @@
|
|
22
22
|
:disabled="isInProgress || hasModifiedSections"
|
23
23
|
>
|
24
24
|
<span class="flex items-center justify-center space-x-2">
|
25
|
-
<icon
|
25
|
+
<uikit-icon
|
26
26
|
icon="circle-notch"
|
27
27
|
name="ri-loader-4-line"
|
28
28
|
spin
|
29
29
|
v-if="isInProgress"
|
30
30
|
/>
|
31
|
-
<icon name="ri-check-line" v-if="isSuccess" />
|
32
|
-
<icon name="ri-alert-line" v-if="isFail" />
|
31
|
+
<uikit-icon name="ri-check-line" v-if="isSuccess" />
|
32
|
+
<uikit-icon name="ri-alert-line" v-if="isFail" />
|
33
33
|
<span>{{ label }}</span>
|
34
34
|
</span>
|
35
35
|
</button>
|
@@ -6,7 +6,7 @@
|
|
6
6
|
@uploaded="refresh"
|
7
7
|
class="flex-shrink-0"
|
8
8
|
/>
|
9
|
-
<search-input
|
9
|
+
<uikit-search-input
|
10
10
|
class="w-72 ml-auto"
|
11
11
|
:placeholder="$t('imageLibrary.searchPlaceholder')"
|
12
12
|
@search="search"
|
@@ -31,7 +31,7 @@
|
|
31
31
|
/>
|
32
32
|
</transition>
|
33
33
|
</div>
|
34
|
-
<pagination
|
34
|
+
<uikit-pagination
|
35
35
|
labelI18nKey="imageLibrary.pagination.label"
|
36
36
|
noItemsI18nKey="imageLibrary.pagination.noItems"
|
37
37
|
:activePage="activePage"
|
@@ -24,7 +24,7 @@
|
|
24
24
|
class="px-1 py-1 bg-white rounded-full flex items-center justify-center text-gray-900 ml-auto"
|
25
25
|
@click="() => (this.askingForRemoval = true)"
|
26
26
|
>
|
27
|
-
<icon name="delete-bin-line" size="1rem" />
|
27
|
+
<uikit-icon name="delete-bin-line" size="1rem" />
|
28
28
|
</button>
|
29
29
|
</div>
|
30
30
|
</transition>
|
@@ -7,13 +7,18 @@
|
|
7
7
|
>
|
8
8
|
<slot name="header">HINT</slot>
|
9
9
|
<button class="ml-auto">
|
10
|
-
<icon
|
10
|
+
<uikit-icon
|
11
11
|
name="arrow-up-s-line"
|
12
12
|
size="1.5rem"
|
13
13
|
class="ml-auto"
|
14
14
|
v-if="show"
|
15
15
|
/>
|
16
|
-
<icon
|
16
|
+
<uikit-icon
|
17
|
+
name="arrow-down-s-line"
|
18
|
+
size="1.5rem"
|
19
|
+
class="ml-auto"
|
20
|
+
v-else
|
21
|
+
/>
|
17
22
|
</button>
|
18
23
|
</div>
|
19
24
|
<transition
|
@@ -35,7 +40,7 @@
|
|
35
40
|
|
36
41
|
<script>
|
37
42
|
export default {
|
38
|
-
name: '
|
43
|
+
name: 'UIKitAccordion',
|
39
44
|
props: {
|
40
45
|
headerClass: { type: String, default: '' },
|
41
46
|
},
|
@@ -4,7 +4,7 @@
|
|
4
4
|
{{ label }}
|
5
5
|
</label>
|
6
6
|
|
7
|
-
<select-input
|
7
|
+
<uikit-select-input
|
8
8
|
:withLabel="false"
|
9
9
|
:placeholder="$t(`collectionItemInput.select.placeholder`)"
|
10
10
|
:searchEnabled="true"
|
@@ -16,7 +16,10 @@
|
|
16
16
|
v-model="selectedCollectionItem"
|
17
17
|
>
|
18
18
|
<template v-slot:value>
|
19
|
-
<div
|
19
|
+
<div
|
20
|
+
class="flex items-center flex-grow-0 overflow-x-hidden"
|
21
|
+
:title="selectedCollectionItem.label"
|
22
|
+
>
|
20
23
|
<div
|
21
24
|
class="h-10 w-10 bg-gray-400 mr-3"
|
22
25
|
v-if="selectedCollectionItem.imageUrl"
|
@@ -37,7 +40,7 @@
|
|
37
40
|
<span class="truncate font-bold">{{ item.label }}</span>
|
38
41
|
</div>
|
39
42
|
</template>
|
40
|
-
</select-input>
|
43
|
+
</uikit-select-input>
|
41
44
|
</div>
|
42
45
|
</template>
|
43
46
|
|
@@ -45,7 +48,7 @@
|
|
45
48
|
import { camelizeKeys } from '@/misc/utils'
|
46
49
|
|
47
50
|
export default {
|
48
|
-
name: '
|
51
|
+
name: 'UIKitCollectionItemInput',
|
49
52
|
props: {
|
50
53
|
label: { type: String, default: 'Label' },
|
51
54
|
name: { type: String, default: 'image' },
|
@@ -1,11 +1,14 @@
|
|
1
1
|
<template>
|
2
2
|
<div class="relative">
|
3
|
-
<div
|
4
|
-
class="absolute left-3 top-2 w-6 h-6 rounded-sm border border-gray-200"
|
3
|
+
<div
|
4
|
+
class="absolute left-3 top-2 w-6 h-6 rounded-sm border border-gray-200"
|
5
5
|
:class="{ 'bg-checkerboard': isTransparent }"
|
6
|
-
:style="{ 'background-color': styleRgbaColor }"
|
6
|
+
:style="{ 'background-color': styleRgbaColor }"
|
7
|
+
></div>
|
7
8
|
|
8
|
-
<span class="absolute left-11 top-1.5 font-bold text-gray-900 text-lg"
|
9
|
+
<span class="absolute left-11 top-1.5 font-bold text-gray-900 text-lg"
|
10
|
+
>#</span
|
11
|
+
>
|
9
12
|
|
10
13
|
<input
|
11
14
|
type="text"
|
@@ -14,17 +17,17 @@
|
|
14
17
|
class="py-2 pl-14 rounded bg-gray-100 text-gray-800 focus:outline-none focus:ring placeholder-gray-500 font-normal"
|
15
18
|
:class="{
|
16
19
|
'pr-8': hasPresets,
|
17
|
-
'pr-2': !hasPresets
|
20
|
+
'pr-2': !hasPresets,
|
18
21
|
}"
|
19
22
|
autocomplete="off"
|
20
|
-
minlength="4"
|
23
|
+
minlength="4"
|
21
24
|
maxlength="8"
|
22
25
|
size="7"
|
23
26
|
/>
|
24
27
|
|
25
|
-
<preset-dropdown
|
26
|
-
v-model="updatableValue"
|
27
|
-
:presets="presets"
|
28
|
+
<preset-dropdown
|
29
|
+
v-model="updatableValue"
|
30
|
+
:presets="presets"
|
28
31
|
v-if="hasPresets"
|
29
32
|
/>
|
30
33
|
</div>
|
@@ -56,7 +59,9 @@ export default {
|
|
56
59
|
return colorVariableToRgb(this.value)
|
57
60
|
},
|
58
61
|
styleRgbaColor() {
|
59
|
-
const color = this.isTransparent
|
62
|
+
const color = this.isTransparent
|
63
|
+
? { r: 255, g: 255, b: 255 }
|
64
|
+
: this.rgbColor || { r: 0, g: 0, b: 0 }
|
60
65
|
return `rgba(${color.r}, ${color.g}, ${color.b}, 1)`
|
61
66
|
},
|
62
67
|
isTransparent() {
|
@@ -79,7 +84,7 @@ export default {
|
|
79
84
|
var value = event.target.value.replace('#', '')
|
80
85
|
if (value.length > 0) value = `#${value}`
|
81
86
|
this.$emit('input', value)
|
82
|
-
}
|
83
|
-
}
|
87
|
+
},
|
88
|
+
},
|
84
89
|
}
|
85
90
|
</script>
|
@@ -1,23 +1,23 @@
|
|
1
1
|
<template>
|
2
|
-
<div
|
2
|
+
<div
|
3
3
|
class="self-center cursor-pointer p-0.5 rounded-sm"
|
4
4
|
@click="selectPreset"
|
5
|
-
>
|
5
|
+
>
|
6
6
|
<div
|
7
7
|
class="flex items-center justify-center w-6 h-6 rounded-sm transition transform duration-200 ease-in-out hover:scale-110 select-none text-white"
|
8
|
-
:class="{
|
8
|
+
:class="{
|
9
9
|
'border border-gray-300 text-gray-800': isWhite,
|
10
10
|
'bg-checkerboard': isTransparent,
|
11
11
|
}"
|
12
12
|
:style="{ 'background-color': hexColor }"
|
13
13
|
>
|
14
|
-
<icon name="ri-check-line" size="1rem" v-if="selected" />
|
14
|
+
<uikit-icon name="ri-check-line" size="1rem" v-if="selected" />
|
15
15
|
</div>
|
16
16
|
</div>
|
17
17
|
</template>
|
18
18
|
|
19
19
|
<script>
|
20
|
-
import {
|
20
|
+
import { colorVariableToHex, colorVariableToRgb } from '@/misc/utils'
|
21
21
|
|
22
22
|
export default {
|
23
23
|
name: 'PresetButton',
|
@@ -31,13 +31,17 @@ export default {
|
|
31
31
|
},
|
32
32
|
hexColor() {
|
33
33
|
return colorVariableToHex(this.preset)
|
34
|
-
},
|
34
|
+
},
|
35
35
|
rgbColor() {
|
36
36
|
return colorVariableToRgb(this.preset)
|
37
37
|
},
|
38
38
|
isWhite() {
|
39
39
|
if (!this.rgbColor) return true
|
40
|
-
return
|
40
|
+
return (
|
41
|
+
this.rgbColor.r === 255 &&
|
42
|
+
this.rgbColor.g === 255 &&
|
43
|
+
this.rgbColor.b === 255
|
44
|
+
)
|
41
45
|
},
|
42
46
|
isTransparent() {
|
43
47
|
return this.hexColor === ''
|
@@ -46,12 +50,12 @@ export default {
|
|
46
50
|
if (!this.selected) return 'transparent'
|
47
51
|
let color = this.isWhite ? { r: 0, g: 0, b: 0 } : this.rgbColor
|
48
52
|
return `rgba(${color.r}, ${color.g}, ${color.b}, 0.40)`
|
49
|
-
}
|
53
|
+
},
|
50
54
|
},
|
51
55
|
methods: {
|
52
56
|
selectPreset() {
|
53
57
|
this.$emit('input', this.hexColor)
|
54
|
-
}
|
55
|
-
}
|
58
|
+
},
|
59
|
+
},
|
56
60
|
}
|
57
61
|
</script>
|
@@ -1,22 +1,23 @@
|
|
1
1
|
<template>
|
2
|
-
<dropdown v-on="$listeners" class="absolute top-1.5 right-1">
|
2
|
+
<uikit-dropdown v-on="$listeners" class="absolute top-1.5 right-1">
|
3
3
|
<template v-slot:button>
|
4
4
|
<button
|
5
5
|
class="px-1 py-1 hover:text-gray-900 focus:outline-none transition-colors duration-200"
|
6
6
|
>
|
7
|
-
<icon name="ri-palette-line" size="1.25rem" />
|
7
|
+
<uikit-icon name="ri-palette-line" size="1.25rem" />
|
8
8
|
</button>
|
9
9
|
</template>
|
10
10
|
<template v-slot:content>
|
11
11
|
<div class="flex flex-wrap gap-1">
|
12
|
-
<preset-button
|
13
|
-
v-for="preset in presets"
|
12
|
+
<preset-button
|
13
|
+
v-for="preset in presets"
|
14
14
|
v-model="updatableValue"
|
15
15
|
:preset="preset"
|
16
|
-
:key="preset"
|
16
|
+
:key="preset"
|
17
|
+
/>
|
17
18
|
</div>
|
18
19
|
</template>
|
19
|
-
</dropdown>
|
20
|
+
</uikit-dropdown>
|
20
21
|
</template>
|
21
22
|
|
22
23
|
<script>
|
@@ -41,6 +42,6 @@ export default {
|
|
41
42
|
this.$emit('input', color)
|
42
43
|
},
|
43
44
|
},
|
44
|
-
}
|
45
|
+
},
|
45
46
|
}
|
46
47
|
</script>
|