@mythpe/quasar-ui-qui 0.2.25 → 0.2.26

package/src/components/form/__MCkeditor.vue

@@ -0,0 +1,403 @@
+<!--
+  - MyTh Ahmed Faiz Copyright © 2016-2024 All rights reserved.
+  - Email: mythpe@gmail.com
+  - Mobile: +966590470092
+  - Website: https://www.4myth.com
+  - Github: https://github.com/mythpe
+  -->
+
+<script
+  lang="ts"
+  setup
+>
+
+import { useField } from 'vee-validate'
+import type { MCkeditorProps as Props } from '../../types'
+import { computed, reactive, toValue, useTemplateRef } from 'vue'
+import { useBindInput, useMyth } from '../../composable'
+
+import type { EditorConfig } from 'ckeditor5'
+import {
+  Alignment,
+  Autoformat,
+  Base64UploadAdapter,
+  BlockQuote,
+  Bold,
+  CKFinder,
+  CKFinderUploadAdapter,
+  ClassicEditor,
+  CloudServices,
+  Code,
+  CodeBlock,
+  Essentials,
+  FontBackgroundColor,
+  FontColor,
+  FontFamily,
+  FontSize,
+  Heading,
+  Image,
+  ImageCaption,
+  ImageResize,
+  ImageStyle,
+  ImageToolbar,
+  ImageUpload,
+  Indent,
+  IndentBlock,
+  Italic,
+  Link,
+  List,
+  MediaEmbed,
+  Mention,
+  Paragraph,
+  PasteFromOffice,
+  PictureEditing,
+  RemoveFormat,
+  SourceEditing,
+  Strikethrough,
+  Subscript,
+  Superscript,
+  Table,
+  TableColumnResize,
+  TableToolbar,
+  TextTransformation,
+  TodoList,
+  Underline
+} from 'ckeditor5'
+import { Ckeditor } from '@ckeditor/ckeditor5-vue'
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import arTranslations from 'ckeditor5/translations/ar.js'
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import enTranslations from 'ckeditor5/translations/en.js'
+
+type P = {
+  name: Props['name'];
+  lang: Props['lang'];
+  config?: Props['config'];
+  tagName?: Props['tagName'];
+  disabled?: Props['disabled'];
+  disableTwoWayDataBinding?: Props['disableTwoWayDataBinding'];
+
+  auto?: Props['auto'];
+  col?: Props['col'];
+  xs?: Props['xs'];
+  sm?: Props['sm'];
+  md?: Props['md'];
+  lg?: Props['lg'];
+  xl?: Props['xl'];
+  label?: Props['label'];
+  caption?: Props['caption'];
+  help?: Props['help'];
+  required?: Props['required'];
+  rules?: Props['rules'];
+  viewMode?: Props['viewMode'];
+  viewModeValue?: Props['viewModeValue'];
+  fieldOptions?: Props['fieldOptions'];
+}
+const props = withDefaults(defineProps<P>(), {
+  name: '',
+  lang: 'ar',
+  config: undefined,
+  tagName: 'div',
+  disabled: !1,
+  disableTwoWayDataBinding: !1,
+
+  auto: undefined,
+  col: undefined,
+  xs: undefined,
+  sm: undefined,
+  md: undefined,
+  lg: undefined,
+  xl: undefined,
+  label: undefined,
+  caption: undefined,
+  help: undefined,
+  required: undefined,
+  rules: undefined,
+  viewMode: !1,
+  viewModeValue: undefined,
+  fieldOptions: undefined
+})
+defineModel<Props['modelValue']>({ required: !1, default: undefined })
+const { __, props: pluginOptions } = useMyth()
+const helper = useBindInput<any>(() => props, 'ckeditor')
+const { getLabel, inputRules } = helper
+const inputScope = useField<Props['modelValue']>(() => props.name, inputRules, {
+  validateOnMount: !1,
+  validateOnValueUpdate: !1,
+  syncVModel: !0,
+  label: getLabel,
+  ...toValue<any>(props.fieldOptions)
+})
+const { value, errorMessage, handleChange } = inputScope
+
+const isRtl = computed(() => props.lang === 'ar')
+const getConfig = computed<any>(() => {
+  const inpConfig: EditorConfig = {
+    language: {
+      ui: props.lang as string,
+      content: props.lang as string,
+      textPartLanguage: [
+        {
+          title: __('labels.ar'),
+          languageCode: 'ar',
+          textDirection: 'rtl'
+        },
+        {
+          title: __('labels.en'),
+          languageCode: 'en',
+          textDirection: 'ltr'
+        }
+      ]
+    },
+    translations: [
+      arTranslations,
+      enTranslations
+    ],
+    plugins: [
+      Autoformat,
+      BlockQuote,
+      Bold,
+      CKFinder,
+      CKFinderUploadAdapter,
+      CloudServices,
+      Essentials,
+      Heading,
+      Image,
+      ImageCaption,
+      ImageResize,
+      ImageStyle,
+      ImageToolbar,
+      ImageUpload,
+      Base64UploadAdapter,
+      Indent,
+      IndentBlock,
+      Italic,
+      Link,
+      List,
+      MediaEmbed,
+      Mention,
+      Paragraph,
+      PasteFromOffice,
+      PictureEditing,
+      Table,
+      TableColumnResize,
+      TableToolbar,
+      TextTransformation,
+      Underline,
+      FontSize,
+      FontFamily,
+      FontColor,
+      FontBackgroundColor,
+      RemoveFormat,
+      Strikethrough,
+      Subscript,
+      Code,
+      CodeBlock,
+      Alignment,
+      Superscript,
+      TodoList,
+      SourceEditing
+    ],
+    toolbar: {
+      items: [
+        'undo',
+        'redo',
+        '|',
+        'bold', 'italic', 'underline', 'strikethrough', 'subscript', 'superscript', 'code',
+        '|',
+        'fontfamily', 'fontsize', 'fontColor', 'fontBackgroundColor',
+        '|',
+        'alignment',
+        'insertTable',
+        'heading',
+        '|',
+        'link', 'uploadImage', 'blockQuote', 'codeBlock',
+        '|',
+        'bulletedList', 'numberedList', 'todoList', 'outdent', 'indent',
+        '|',
+        // 'ckbox',
+        'removeFormat',
+        'mediaEmbed',
+        '|',
+        'sourceEditing'
+      ],
+      shouldNotGroupWhenFull: true
+    },
+    heading: {
+      options: [
+        {
+          model: 'paragraph',
+          title: 'Paragraph',
+          class: 'ck-heading_paragraph'
+        },
+        {
+          model: 'heading1',
+          view: 'h1',
+          title: 'Heading 1',
+          class: 'ck-heading_heading1'
+        },
+        {
+          model: 'heading2',
+          view: 'h2',
+          title: 'Heading 2',
+          class: 'ck-heading_heading2'
+        },
+        {
+          model: 'heading3',
+          view: 'h3',
+          title: 'Heading 3',
+          class: 'ck-heading_heading3'
+        },
+        {
+          model: 'heading4',
+          view: 'h4',
+          title: 'Heading 4',
+          class: 'ck-heading_heading4'
+        }
+      ]
+    },
+    image: {
+      resizeOptions: [
+        {
+          name: 'resizeImage:original',
+          label: 'Default image width',
+          value: null
+        },
+        {
+          name: 'resizeImage:50',
+          label: '50% page width',
+          value: '50'
+        },
+        {
+          name: 'resizeImage:75',
+          label: '75% page width',
+          value: '75'
+        }
+      ],
+      toolbar: [
+        'imageTextAlternative',
+        'toggleImageCaption',
+        '|',
+        'imageStyle:inline',
+        'imageStyle:wrapText',
+        'imageStyle:breakText',
+        '|',
+        'resizeImage'
+      ]
+    },
+    menuBar: {
+      isVisible: !1
+    },
+    link: {
+      addTargetToExternalLinks: true,
+      defaultProtocol: 'https://'
+    },
+    table: {
+      contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells']
+    }
+  }
+  if (props.config) {
+    return props.config(inpConfig as EditorConfig)
+  }
+  return inpConfig
+})
+const listeners = {
+  'update:modelValue': (v: Props['modelValue']) => handleChange(v, !!errorMessage.value)
+}
+const input = useTemplateRef<any>('input')
+const scopes = reactive(inputScope)
+defineExpose<typeof scopes & { input: typeof input }>({ input, ...scopes })
+defineOptions({
+  name: 'MCkeditor',
+  inheritAttrs: !1
+})
+</script>
+
+<template>
+  <MCol
+    :auto="auto"
+    :class="[$attrs.class,{'m--input__required':inputRules?.required!==undefined,'m--input__error':!!errorMessage,'m--input__view':viewMode}]"
+    :col="col"
+    :lg="lg"
+    :md="md"
+    :name="name"
+    :sm="sm"
+    :xs="xs"
+  >
+    <slot
+      name="top-input"
+      v-bind="scopes"
+    />
+    <slot name="top-label">
+      <MInputLabel
+        v-if="!!getLabel"
+        :field="scopes"
+      >
+        <MHelpRow
+          v-if="!!help"
+          :text="help"
+          tooltip
+        />
+      </MInputLabel>
+    </slot>
+    <slot name="caption">
+      <div
+        v-if="!!caption"
+        class="m--input__caption"
+      >
+        {{ __(caption) }}
+      </div>
+    </slot>
+    <slot
+      name="help"
+      v-bind="scopes"
+    >
+      <MHelpRow
+        v-if="!getLabel && help"
+        :text="help"
+      />
+    </slot>
+    <MTransition>
+      <div
+        v-if="!!errorMessage"
+        class="text-negative text-caption"
+      >
+        <q-icon
+          v-if="!!errorMessage"
+          color="negative"
+          name="ion-ios-information-circle-outline"
+          size="20px"
+        />
+        {{ errorMessage }}
+      </div>
+    </MTransition>
+    <div
+      v-if="viewMode"
+      v-html="value"
+    />
+    <div
+      v-else
+      :dir="isRtl ? 'rtl' : 'ltr'"
+      :style="`direction: ${isRtl ? 'rtl' : 'ltr'}`"
+    >
+      <ckeditor
+        ref="input"
+        :config="getConfig"
+        :disable-two-way-data-binding="disableTwoWayDataBinding"
+        :disabled="disabled"
+        :editor="ClassicEditor"
+        :model-value="value || ''"
+        :tag-name="tagName"
+        v-bind="{...$attrs,...pluginOptions.ckeditor}"
+        v-on="listeners"
+      />
+      <slot v-bind="scopes" />
+    </div>
+    <slot
+      name="bottom-input"
+      v-bind="scopes"
+    />
+  </MCol>
+</template>

package/src/components/form/index.ts

@@ -10,7 +10,7 @@ import MAxios from './MAxios.vue'
 import MAvatarViewer from './MAvatarViewer.vue'
 import MBtn from './MBtn.vue'
 import MCheckbox from './MCheckbox.vue'
-// import MCkeditor from './MCkeditor.vue'
+import MCkeditor from './MCkeditor.vue'
 import MColor from './MColor.vue'
 import MDate from './MDate.vue'
 import MEditor from './MEditor.vue'
@@ -40,7 +40,7 @@ export {
   MAvatarViewer,
   MBtn,
   MCheckbox,
-  // MCkeditor,
+  MCkeditor,
   MColor,
   MDate,
   MEditor,

package/src/components/form/useCkeditor.ts

@@ -0,0 +1,26 @@
+/*
+ * MyTh Ahmed Faiz Copyright © 2016-2025 All rights reserved.
+ * Email: mythpe@gmail.com
+ * Mobile: +966590470092
+ * Website: https://www.4myth.com
+ * Github: https://github.com/mythpe
+ */
+
+import { useCKEditorCloud } from '@ckeditor/ckeditor5-vue'
+import { computed } from 'vue'
+
+export function useCkeditor () {
+  const cloud = useCKEditorCloud({
+    version: '45.1.0',
+    translations: ['ar', 'en']
+  })
+  const editor = computed(() => {
+    if (!cloud.data.value) {
+      return null
+    }
+
+    return cloud.data.value.CKEditor.ClassicEditor
+  })
+
+  return { cloud, editor }
+}

package/src/index.sass

@@ -6,6 +6,7 @@
 
 //@import 'quasar/src/css/variables.sass'
 @import './style/main'
+@import './style/m-ck.css' #{"/* rtl:ignore */"}
 @import './style/ckeditor5'
 @import './style/m-container'
 @import './style/m-dt'

package/src/style/ckeditor5.sass

@@ -1,4 +1,4 @@
-@import 'ckeditor5/ckeditor5.css' #{"/* rtl:ignore */"}
+//@import 'ckeditor5/ckeditor5.css' #{"/* rtl:ignore */"}
 
 :root
   --ck-z-dialog: 9999 !important

package/src/style/m-ck.css

@@ -0,0 +1,135 @@
+/*
+ * MyTh Ahmed Faiz Copyright © 2016-2025 All rights reserved.
+ * Email: mythpe@gmail.com
+ * Mobile: +966590470092
+ * Website: https://www.4myth.com
+ * Github: https://github.com/mythpe
+ */
+
+@import url('https://fonts.googleapis.com/css2?family=Oswald&family=PT+Serif:ital,wght@0,400;0,700;1,400&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap');
+
+@media print {
+  body {
+    margin: 0 !important;
+  }
+}
+
+.main-container {
+  /*font-family: 'Lato';*/
+  width: fit-content;
+  margin-left: auto;
+  margin-right: auto;
+  direction: ltr;
+}
+
+.ck-content {
+  font-family: 'Lato', sans-serif;
+  line-height: 1.6;
+  word-break: break-word;
+}
+
+.editor-container_classic-editor .editor-container__editor {
+  min-width: 795px;
+  max-width: 795px;
+}
+
+.editor-container_include-block-toolbar {
+  margin-left: 42px;
+}
+
+.ck-content h3.category {
+  font-family: 'Oswald', serif;
+  font-size: 20px;
+  font-weight: bold;
+  color: #555;
+  letter-spacing: 10px;
+  margin: 0;
+  padding: 0;
+}
+
+.ck-content h3.document-subtitle {
+  font-family: 'Oswald', serif;
+  font-size: 20px;
+  color: #555;
+  margin: 0 0 1em;
+  font-weight: bold;
+  padding: 0;
+}
+
+.ck-content p.info-box {
+  --background-size: 30px;
+  --background-color: #e91e63;
+  padding: 1.2em 2em;
+  border: 1px solid var(--background-color);
+  background: linear-gradient(135deg, var(--background-color) 0%, var(--background-color) var(--background-size), transparent var(--background-size)),
+  linear-gradient(
+    135deg,
+    transparent calc(100% - var(--background-size)),
+    var(--background-color) calc(100% - var(--background-size)),
+    var(--background-color)
+  );
+  border-radius: 10px;
+  margin: 1.5em 2em;
+  box-shadow: 5px 5px 0 #ffe6ef;
+}
+
+.ck-content span.marker {
+  background: yellow;
+}
+
+.ck-content span.spoiler {
+  background: #000;
+  color: #000;
+}
+
+.ck-content span.spoiler:hover {
+  background: #000;
+  color: #fff;
+}
+
+.ck-content .button {
+  display: inline-block;
+  width: 260px;
+  border-radius: 8px;
+  margin: 0 auto;
+  padding: 12px;
+  color: #ffffff;
+  font-size: 24px;
+  font-weight: 700;
+  text-align: center;
+  text-decoration: none;
+}
+
+.ck-content .button--green {
+  background-color: #406b1e;
+}
+
+.ck-content .button--black {
+  background-color: #141517;
+}
+
+.editor_container__word-count .ck-word-count {
+  color: var(--ck-color-text);
+  display: flex;
+  height: 20px;
+  gap: var(--ck-spacing-small);
+  justify-content: flex-end;
+  font-size: var(--ck-font-size-base);
+  line-height: var(--ck-line-height-base);
+  font-family: var(--ck-font-face);
+  padding: var(--ck-spacing-small) var(--ck-spacing-standard);
+}
+
+.editor-container_include-word-count.editor-container_classic-editor .editor_container__word-count {
+  border: 1px solid var(--ck-color-base-border);
+  border-radius: var(--ck-border-radius);
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  border-top: none;
+}
+
+.editor-container_include-word-count.editor-container_classic-editor .editor-container__editor .ck-editor .ck-editor__editable {
+  border-radius: 0;
+}
+

package/src/types/components.d.ts

@@ -39,7 +39,7 @@ import type { FieldContext, FieldOptions, FormContext, FormOptions, FormState }
 import type { ThemeShadow, ThemeSize } from './theme'
 import type { ApiInterface, HelpersStubSchema } from './api-helpers'
 import type { MDatatableProps, MDatatableSlots, MDtAvatarProps, MDtAvatarSlots, MDtBtnProps, MDtBtnSlots, MDtContextmenuItemsProps, MDtContextmenuItemsSlots } from './m-datatable'
-import type { EditorConfig } from 'ckeditor5'
+import type { EditorConfig } from 'https://cdn.ckeditor.com/typings/ckeditor5.d.ts'
 import type { MAvatarViewerProps, MAvatarViewerSlots } from './api/MAvatarViewer'
 import type { MTransitionGroupProps, MTransitionProps, MTransitionsSlots } from './api/MTransition'
 import type { MAxiosProps, MAxiosSlots } from './api/MAxios'
@@ -962,7 +962,7 @@ export type MCkeditorProps = Omit<BaseInputsProps, 'hint' | 'topLabel' | 'placeh
    * Specifies the configuration of the editor.
    * https://ckeditor.com/docs/ckeditor5/latest/api/module_core_editor_editorconfig-EditorConfig.html
    */
-  config?: ((config: EditorConfig) => EditorConfig) | undefined;
+  config?: (config: EditorConfig) => EditorConfig;
   /**
    * By default, the editor component creates a <div> container which is used as an element passed to the editor (for example, ClassicEditor#element).
    * The element can be configured, so for example to create a <textarea>, use the following directive:
@@ -976,10 +976,9 @@ export type MCkeditorProps = Omit<BaseInputsProps, 'hint' | 'topLabel' | 'placeh
    */
   disabled?: boolean;
   /**
-   * Allows disabling the two-way data binding mechanism.
-   * Default value: false.
+   * Use HTML instead of Markdown.
    */
-  disableTwoWayDataBinding?: boolean;
+  html?: boolean;
 }
 export type MCkeditorSlots = BaseInputsSlots
 

package/src/types/install-options.d.ts

@@ -1,6 +1,7 @@
 import type { ThemeContext } from './theme'
 import type { MythComponentsProps } from './plugin-props-option'
 import type { ApiContext, MythApi } from './myth-api'
+import type { MInputProps } from './components'
 
 export interface InstallOptions extends MythApi {
   api: ApiContext;
@@ -8,4 +9,6 @@ export interface InstallOptions extends MythApi {
   props?: Partial<MythComponentsProps>;
   theme?: Partial<ThemeContext>;
   rules?: string[];
+  mobileRule?: MInputProps['mobile'];
+  ckeditorKey?: string;
 }

package/src/types/myth-api.ts

@@ -39,5 +39,6 @@ export interface MythApi {
    * Default is true.
    * The Length must be 10.
    */
-  mobileRule?: MInputProps['mobile'];
+  mobileRule: MInputProps['mobile'];
+  ckeditorKey: string | null;
 }

package/src/utils/createMyth.ts

@@ -5,6 +5,7 @@ import { extend } from 'quasar'
 
 export const createMyth = (options: InstallOptions) => {
   const defaultOptions = {
+    ckeditorKey: null,
     asyncComponents: !1,
     api: {
       url: '',