adtec-core-package 3.0.0 → 3.0.1

package/src/components/editor-main/src/components/menus/toolbar/base/align-dropdown.vue

@@ -0,0 +1,56 @@
+<template>
+  <menus-button
+    :ico="`align-${textAlign}`"
+    :text="t('base.align.title')"
+    menu-type="popup"
+    hide-text
+    :disabled="!editor?.can().chain().focus().setTextAlign('center').run()"
+    :popup-visible="popupVisible"
+    @toggle-popup="togglePopup"
+  >
+    <template #content>
+      <div class="umo-text-align-group">
+        <menus-toolbar-base-align-left />
+        <menus-toolbar-base-align-center />
+        <menus-toolbar-base-align-right />
+        <menus-toolbar-base-align-justify />
+        <menus-toolbar-base-align-distributed />
+      </div>
+    </template>
+  </menus-button>
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+import { inject, computed } from 'vue';
+
+const { popupVisible, togglePopup } = usePopup()
+
+const editor = inject('editor')
+
+const textAlign = computed(() => {
+  if (!editor.value) {
+    return 'left'
+  }
+  if (editor.value.isActive({ textAlign: 'justify' })) {
+    return 'left'
+  }
+  if (editor.value.isActive({ textAlign: 'center' })) {
+    return 'center'
+  }
+  if (editor.value.isActive({ textAlign: 'right' })) {
+    return 'right'
+  }
+  if (editor.value.isActive({ textAlign: 'justify' })) {
+    return 'justify'
+  }
+  return 'left'
+})
+</script>
+
+<style lang="less" scoped>
+.umo-text-align-group {
+  padding-top: 2px;
+  margin: -5px 0;
+}
+</style>

package/src/components/editor-main/src/components/menus/toolbar/base/align-justify.vue

@@ -0,0 +1,18 @@
+<template>
+  <menus-button
+    ico="align-justify"
+    :text="t('base.align.justify')"
+    shortcut="Ctrl+Shift+J"
+    hide-text
+    :menu-active="editor?.isActive({ textAlign: 'justify' })"
+    :disabled="!editor?.can().chain().focus().setTextAlign('justify').run()"
+    @menu-click="editor?.chain().focus().setTextAlign('justify').run()"
+  />
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+import { inject } from 'vue';
+
+const editor = inject('editor')
+</script>

package/src/components/editor-main/src/components/menus/toolbar/base/align-left.vue

@@ -0,0 +1,32 @@
+<template>
+  <menus-button
+    ico="align-left"
+    :text="t('base.align.left')"
+    shortcut="Ctrl+Shift+L"
+    hide-text
+    :menu-active="
+      editor?.isActive({ textAlign: 'left' }) ||
+      editor?.isActive({ nodeAlign: 'flex-start' })
+    "
+    :disabled="
+      !editor?.can().chain().focus().setTextAlign('left').run() &&
+      !editor?.can().chain().focus().setNodeAlign('flex-start').run()
+    "
+    @menu-click="setAlignLeft"
+  />
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+import { inject } from 'vue';
+
+const editor = inject('editor')
+const setAlignLeft = () => {
+  if (editor.value?.can().chain().focus().setTextAlign('left').run()) {
+    editor.value.chain().focus().setTextAlign('left').run()
+  }
+  if (editor.value?.can().chain().focus().setNodeAlign('flex-start').run()) {
+    editor.value.chain().focus().setNodeAlign('flex-start').run()
+  }
+}
+</script>

package/src/components/editor-main/src/components/menus/toolbar/base/align-right.vue

@@ -0,0 +1,33 @@
+<template>
+  <menus-button
+    ico="align-right"
+    :text="t('base.align.right')"
+    shortcut="Ctrl+Shift+R"
+    hide-text
+    :menu-active="
+      editor?.isActive({ textAlign: 'right' }) ||
+      editor?.isActive({ nodeAlign: 'flex-end' })
+    "
+    :disabled="
+      !editor?.can().chain().focus().setTextAlign('right').run() &&
+      !editor?.can().chain().focus().setNodeAlign('flex-end').run()
+    "
+    @menu-click="setAlignRight"
+  />
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+import { inject } from 'vue';
+
+const editor = inject('editor')
+
+const setAlignRight = () => {
+  if (editor.value?.can().chain().focus().setTextAlign('right').run()) {
+    editor.value.chain().focus().setTextAlign('right').run()
+  }
+  if (editor.value?.can().chain().focus().setNodeAlign('flex-end').run()) {
+    editor.value.chain().focus().setNodeAlign('flex-end').run()
+  }
+}
+</script>

package/src/components/editor-main/src/components/menus/toolbar/base/background-color.vue

@@ -0,0 +1,72 @@
+<template>
+  <menus-button
+    :text="text || t('base.bgColor')"
+    menu-type="popup"
+    popup-handle="arrow"
+    hide-text
+    :disabled="!editor?.can().chain().focus().setBackgroundColor().run()"
+    :popup-visible="popupVisible"
+    @toggle-popup="togglePopup"
+  >
+    <icon
+      name="background-color"
+      class="umo-icon-background-color"
+      :style="{
+        background: editor?.getAttributes('highlight')?.color || currentColor,
+      }"
+    />
+    <template #content>
+      <picker-color :default-color="defaultColor" @change="colorChange" />
+    </template>
+  </menus-button>
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+import { ref as _ref } from 'vue';
+
+
+import { inject } from 'vue';
+const props = defineProps({
+  text: {
+    type: String,
+    default: '',
+  },
+  modeless: {
+    type: Boolean,
+    default: false,
+  },
+  defaultColor: {
+    type: String,
+    default: '',
+  },
+})
+const emits = defineEmits(['change'])
+
+const { popupVisible, togglePopup } = usePopup()
+const editor = inject('editor')
+
+let currentColor = _ref()
+
+const colorChange = (color) => {
+  currentColor.value = color
+  popupVisible.value = false
+
+  if (props.modeless) {
+    emits('change', currentColor.value)
+    return
+  }
+
+  if (color === '') {
+    editor.value?.chain().focus().unsetBackgroundColor().run()
+  } else {
+    editor.value?.chain().focus().setBackgroundColor(color).run()
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.umo-icon-background-color {
+  border-radius: 2px;
+}
+</style>

package/src/components/editor-main/src/components/menus/toolbar/base/bold.vue

@@ -0,0 +1,18 @@
+<template>
+  <menus-button
+    ico="bold"
+    :text="t('base.bold')"
+    shortcut="Ctrl+B"
+    hide-text
+    :menu-active="editor?.isActive('bold')"
+    :disabled="!editor?.can().chain().focus().toggleBold().run()"
+    @menu-click="editor?.chain().focus().toggleBold().run()"
+  />
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+import { inject } from 'vue';
+
+const editor = inject('editor')
+</script>

package/src/components/editor-main/src/components/menus/toolbar/base/bullet-list.vue

@@ -0,0 +1,110 @@
+<template>
+  <menus-button
+    ico="bullet-list"
+    :text="t('list.bullet.text')"
+    shortcut="Ctrl+Shift+8"
+    menu-type="popup"
+    popup-handle="arrow"
+    hide-text
+    :menu-active="editor?.isActive('bulletList')"
+    :popup-visible="popupVisible"
+    :disabled="
+      !editor?.can().chain().focus().toggleBulletList().run() &&
+      !editor?.can().chain().focus().toggleOrderedList().run() &&
+      !editor?.can().chain().focus().toggleTaskList().run()
+    "
+    @toggle-popup="togglePopup"
+    @menu-click="toggleBulletList(options[0].value)"
+  >
+    <template #content>
+      <div class="umo-bullet-list-group">
+        <tooltip
+          v-for="item in options"
+          :key="item.value"
+          :content="item.label"
+        >
+          <div
+            class="umo-bullet-list-item"
+            :class="{ active: listStyleType === item.value }"
+            @click="toggleBulletList(item.value)"
+          >
+            <icon
+              class="umo-icon-bullet-list"
+              :name="`bullet-list-${item.value}`"
+            />
+          </div>
+        </tooltip>
+      </div>
+    </template>
+  </menus-button>
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+import { ref as _ref } from 'vue';
+
+
+import { inject, watch } from 'vue';
+const { popupVisible, togglePopup } = usePopup()
+const editor = inject('editor')
+
+const options = [
+  { label: t('list.bullet.disc'), value: 'disc' },
+  { label: t('list.bullet.circle'), value: 'circle' },
+  { label: t('list.bullet.square'), value: 'square' },
+]
+
+let listStyleType = _ref('')
+watch(
+  () => popupVisible.value,
+  (val) => {
+    if (val && editor.value) {
+      const { listType } = editor.value.getAttributes('bulletList')
+      listStyleType.value = listType
+    }
+  },
+)
+const toggleBulletList = (listType) => {
+  const chain = editor.value?.chain().focus()
+  if (editor.value?.isActive('bulletList')) {
+    if (editor.value.getAttributes('bulletList').listType === listType) {
+      chain?.toggleBulletList().run()
+    } else {
+      chain?.updateAttributes('bulletList', { listType }).run()
+    }
+  } else {
+    chain
+      ?.toggleBulletList()
+      ?.updateAttributes('bulletList', { listType })
+      ?.run()
+  }
+  listStyleType.value = listType
+  popupVisible.value = false
+}
+</script>
+
+<style lang="less" scoped>
+.umo-bullet-list-group {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  .umo-bullet-list-item {
+    cursor: pointer;
+    padding: 5px;
+    border: solid 1px var(--umo-border-color);
+    box-sizing: border-box;
+    &:last-child {
+      margin-right: 0;
+    }
+    &:hover {
+      background-color: var(--umo-button-hover-background);
+    }
+    &.active {
+      border-color: var(--umo-primary-color);
+    }
+  }
+  .umo-icon-bullet-list {
+    font-size: 44px;
+  }
+}
+</style>

package/src/components/editor-main/src/components/menus/toolbar/base/clear-format.vue

@@ -0,0 +1,15 @@
+<template>
+  <menus-button
+    ico="clear-format"
+    :text="t('base.clearFormat')"
+    hide-text
+    @menu-click="editor?.chain().focus().unsetAllMarks().run()"
+  />
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+import { inject } from 'vue';
+
+const editor = inject('editor')
+</script>

package/src/components/editor-main/src/components/menus/toolbar/base/code.vue

@@ -0,0 +1,18 @@
+<template>
+  <menus-button
+    ico="code"
+    :text="t('base.code')"
+    shortcut="Ctrl+E"
+    hide-text
+    :menu-active="editor?.isActive('code')"
+    :disabled="!editor?.can().chain().focus().toggleCode().run()"
+    @menu-click="editor?.chain().focus().toggleCode().run()"
+  />
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+import { inject } from 'vue';
+
+const editor = inject('editor')
+</script>

package/src/components/editor-main/src/components/menus/toolbar/base/color.vue

@@ -0,0 +1,75 @@
+<template>
+  <menus-button
+    ico="color"
+    :text="text || t('base.color')"
+    menu-type="popup"
+    popup-handle="arrow"
+    hide-text
+    :popup-visible="popupVisible"
+    :disabled="!editor?.can().chain().focus().setColor().run()"
+    @toggle-popup="togglePopup"
+    @menu-click="colorChange(currentColor)"
+  >
+    <div
+      class="umo-current-color"
+      :style="{
+        background: editor?.getAttributes('textStyle')?.color || currentColor,
+      }"
+    ></div>
+    <template #content>
+      <picker-color :default-color="defaultColor" @change="colorChange" />
+    </template>
+  </menus-button>
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+import { ref as _ref } from 'vue';
+
+
+import { inject } from 'vue';
+const props = defineProps({
+  text: {
+    type: String,
+    default: '',
+  },
+  modeless: {
+    type: Boolean,
+    default: false,
+  },
+  defaultColor: {
+    type: String,
+    default: '#000',
+  },
+})
+const emits = defineEmits(['change'])
+
+const { popupVisible, togglePopup } = usePopup()
+const editor = inject('editor')
+
+let currentColor = _ref()
+const colorChange = (color) => {
+  currentColor.value = color
+  popupVisible.value = false
+
+  if (props.modeless) {
+    emits('change', currentColor.value)
+    return
+  }
+
+  if (color === '') {
+    editor.value?.chain().focus().unsetColor().run()
+  } else {
+    editor.value?.chain().focus().setColor(color).run()
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.umo-current-color {
+  width: 12px;
+  height: 2px;
+  position: absolute;
+  margin: 0 0 -22px 2px;
+}
+</style>