sprintify-ui 0.10.65 → 0.10.66

package/src/components/BaseCkeditor.vue

@@ -1,154 +1,154 @@
-<template>
-  <ckeditor
-    :model-value="modelValueInternal"
-    :editor="editorInternal"
-    :config="config"
-    :disabled="disabled"
-    :name="name"
-    @update:model-value="emit('update:modelValue', $event)"
-    @focus="emit('focus', $event)"
-    @blur="emit('blur', $event)"
-    @input="emit('input', $event)"
-    @ready="onReady"
-  />
-</template>
-
-<script lang="ts" setup>
-import { ClassicEditor, InlineEditor, BalloonEditor, Essentials, SourceEditing, MediaEmbed, Paragraph, Bold, Italic, List, Link, Autoformat, Heading, Underline, Code, CodeBlock, Table, TableToolbar, Image, ImageResize, ImageStyle, ImageToolbar, ImageInsert, AutoImage, Base64UploadAdapter, PasteFromOffice, BlockToolbar, Font, FindAndReplace, RemoveFormat } from 'ckeditor5';
-import { Ckeditor } from '@ckeditor/ckeditor5-vue';
-
-import { Size } from '@/utils/sizes';
-import { ToolbarOption } from '@/types/ToolbarOption';
-
-const props = withDefaults(defineProps<{
-  modelValue: string | null | undefined;
-  editor?: 'classic' | 'inline' | 'balloon';
-  size?: Size;
-  toolbar?: ToolbarOption[];
-  placeholder?: string;
-  disabled?: boolean;
-  required?: boolean;
-  name?: string;
-}>(), {
-  editor: 'classic',
-  size: 'md',
-  toolbar() {
-    return ['undo', 'redo', '|', 'sourceEditing', 'heading', 'bold', 'italic', 'underline', '|', 'link', 'insertImage', '|', 'numberedList', 'bulletedList', '|', 'code', 'codeblock', '|', 'insertTable'] as ToolbarOption[];
-  },
-  placeholder: '',
-  disabled: false,
-  required: false,
-  name: '',
-  hasError: false,
-});
-
-const emit = defineEmits(['update:modelValue', 'focus', 'blur', 'input', 'ready']);
-
-type Editor = InlineEditor | BalloonEditor | ClassicEditor;
-
-let ckeditorInstance = null as Editor | null;
-
-function onReady(editor: Editor | null) {
-  ckeditorInstance = editor;
-  emit('ready', editor);
-}
-
-const editorInternal = computed(() => {
-  switch (props.editor) {
-    case 'inline':
-      return InlineEditor;
-    case 'balloon':
-      return BalloonEditor;
-    default:
-      return ClassicEditor;
-  }
-});
-
-const modelValueInternal = computed(() => {
-  if (props.modelValue === null) {
-    return '';
-  }
-
-  return props.modelValue;
-});
-
-const config = computed(() => {
-  return {
-    licenseKey: 'GPL',
-    plugins: [
-      Essentials,
-      SourceEditing,
-      Paragraph,
-      Bold,
-      Italic,
-      Underline,
-      Code,
-      CodeBlock,
-      List,
-      Link,
-      Autoformat,
-      Heading,
-      Image,
-      AutoImage,
-      ImageStyle,
-      ImageResize,
-      ImageToolbar,
-      ImageInsert,
-      Base64UploadAdapter,
-      Table,
-      TableToolbar,
-      MediaEmbed,
-      PasteFromOffice,
-      BlockToolbar,
-      Font,
-      FindAndReplace,
-      RemoveFormat,
-    ],
-    toolbar: {
-      items: props.toolbar,
-      shouldNotGroupWhenFull: true,
-    },
-    table: {
-      contentToolbar: ['tableColumn', 'tableRow']
-    },
-    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'
-        },
-        {
-          name: 'resizeImage:100',
-          label: '100% page width',
-          value: '100'
-        }
-      ],
-      toolbar: [
-        'imageStyle:alignBlockLeft',
-        'imageStyle:block',
-        'imageStyle:alignBlockRight',
-        'resizeImage'
-      ]
-    },
-    placeholder: props.placeholder,
-  };
-});
-
-defineExpose({
-  getEditorData() {
-    return ckeditorInstance?.getData() || '';
-  },
-});
-
-</script>
+<template>
+  <ckeditor
+    :model-value="modelValueInternal"
+    :editor="editorInternal"
+    :config="config"
+    :disabled="disabled"
+    :name="name"
+    @update:model-value="emit('update:modelValue', $event)"
+    @focus="emit('focus', $event)"
+    @blur="emit('blur', $event)"
+    @input="emit('input', $event)"
+    @ready="onReady"
+  />
+</template>
+
+<script lang="ts" setup>
+import { ClassicEditor, InlineEditor, BalloonEditor, Essentials, SourceEditing, MediaEmbed, Paragraph, Bold, Italic, List, Link, Autoformat, Heading, Underline, Code, CodeBlock, Table, TableToolbar, Image, ImageResize, ImageStyle, ImageToolbar, ImageInsert, AutoImage, Base64UploadAdapter, PasteFromOffice, BlockToolbar, Font, FindAndReplace, RemoveFormat } from 'ckeditor5';
+import { Ckeditor } from '@ckeditor/ckeditor5-vue';
+
+import { Size } from '@/utils/sizes';
+import { ToolbarOption } from '@/types/ToolbarOption';
+
+const props = withDefaults(defineProps<{
+  modelValue: string | null | undefined;
+  editor?: 'classic' | 'inline' | 'balloon';
+  size?: Size;
+  toolbar?: ToolbarOption[];
+  placeholder?: string;
+  disabled?: boolean;
+  required?: boolean;
+  name?: string;
+}>(), {
+  editor: 'classic',
+  size: 'md',
+  toolbar() {
+    return ['undo', 'redo', '|', 'sourceEditing', 'heading', 'bold', 'italic', 'underline', '|', 'link', 'insertImage', '|', 'numberedList', 'bulletedList', '|', 'code', 'codeblock', '|', 'insertTable'] as ToolbarOption[];
+  },
+  placeholder: '',
+  disabled: false,
+  required: false,
+  name: '',
+  hasError: false,
+});
+
+const emit = defineEmits(['update:modelValue', 'focus', 'blur', 'input', 'ready']);
+
+type Editor = InlineEditor | BalloonEditor | ClassicEditor;
+
+let ckeditorInstance = null as Editor | null;
+
+function onReady(editor: Editor | null) {
+  ckeditorInstance = editor;
+  emit('ready', editor);
+}
+
+const editorInternal = computed(() => {
+  switch (props.editor) {
+    case 'inline':
+      return InlineEditor;
+    case 'balloon':
+      return BalloonEditor;
+    default:
+      return ClassicEditor;
+  }
+});
+
+const modelValueInternal = computed(() => {
+  if (props.modelValue === null) {
+    return '';
+  }
+
+  return props.modelValue;
+});
+
+const config = computed(() => {
+  return {
+    licenseKey: 'GPL',
+    plugins: [
+      Essentials,
+      SourceEditing,
+      Paragraph,
+      Bold,
+      Italic,
+      Underline,
+      Code,
+      CodeBlock,
+      List,
+      Link,
+      Autoformat,
+      Heading,
+      Image,
+      AutoImage,
+      ImageStyle,
+      ImageResize,
+      ImageToolbar,
+      ImageInsert,
+      Base64UploadAdapter,
+      Table,
+      TableToolbar,
+      MediaEmbed,
+      PasteFromOffice,
+      BlockToolbar,
+      Font,
+      FindAndReplace,
+      RemoveFormat,
+    ],
+    toolbar: {
+      items: props.toolbar,
+      shouldNotGroupWhenFull: true,
+    },
+    table: {
+      contentToolbar: ['tableColumn', 'tableRow']
+    },
+    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'
+        },
+        {
+          name: 'resizeImage:100',
+          label: '100% page width',
+          value: '100'
+        }
+      ],
+      toolbar: [
+        'imageStyle:alignBlockLeft',
+        'imageStyle:block',
+        'imageStyle:alignBlockRight',
+        'resizeImage'
+      ]
+    },
+    placeholder: props.placeholder,
+  };
+});
+
+defineExpose({
+  getEditorData() {
+    return ckeditorInstance?.getData() || '';
+  },
+});
+
+</script>

package/src/components/BaseClipboard.stories.js

@@ -1,55 +1,55 @@
-import BaseClipboard from "./BaseClipboard.vue";
-import BaseModalCenter from "./BaseModalCenter.vue";
-
-export default {
-  title: "Components/BaseClipboard",
-  component: BaseClipboard,
-  args: {},
-  argTypes: {},
-};
-
-const Template = (args) => ({
-  components: { BaseClipboard },
-  setup() {
-    return { args };
-  },
-  template: `
-    <BaseClipboard v-bind="args" class="mb-3">
-      <span class="underline text-blue-600">{{ args.value }}</span>
-    </BaseClipboard>
-
-    <br>
-
-    <BaseClipboard v-bind="args" class="mb-3 border border-slate-200 rounded px-2 py-px">
-      <BaseIcon icon="heroicons:server" class="mr-2 text-slate-500" />
-      <span class="font-mono text-sm text-slate-600">{{ args.value }}</span>
-    </BaseClipboard>
-  `,
-});
-
-export const Demo = Template.bind({});
-Demo.args = {
-  value: "168.192.0.1",
-};
-
-const TemplateModal = (args) => ({
-  components: { BaseClipboard, BaseModalCenter },
-  setup() {
-    return { args };
-  },
-  template: `
-  <BaseModalCenter :model-value="true" :close-on-outside-click="true"
-  :show-close-button="true">
-    <div class="p-5">
-      <BaseClipboard v-bind="args" class="mb-3">
-        <span class="underline text-blue-600">{{ args.value }}</span>
-      </BaseClipboard>
-    </div>
-  </BaseModalCenter>
-  `,
-});
-
-export const Modal = TemplateModal.bind({});
-Modal.args = {
-  value: "testtest",
-};
+import BaseClipboard from "./BaseClipboard.vue";
+import BaseModalCenter from "./BaseModalCenter.vue";
+
+export default {
+  title: "Components/BaseClipboard",
+  component: BaseClipboard,
+  args: {},
+  argTypes: {},
+};
+
+const Template = (args) => ({
+  components: { BaseClipboard },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BaseClipboard v-bind="args" class="mb-3">
+      <span class="underline text-blue-600">{{ args.value }}</span>
+    </BaseClipboard>
+
+    <br>
+
+    <BaseClipboard v-bind="args" class="mb-3 border border-slate-200 rounded px-2 py-px">
+      <BaseIcon icon="heroicons:server" class="mr-2 text-slate-500" />
+      <span class="font-mono text-sm text-slate-600">{{ args.value }}</span>
+    </BaseClipboard>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {
+  value: "168.192.0.1",
+};
+
+const TemplateModal = (args) => ({
+  components: { BaseClipboard, BaseModalCenter },
+  setup() {
+    return { args };
+  },
+  template: `
+  <BaseModalCenter :model-value="true" :close-on-outside-click="true"
+  :show-close-button="true">
+    <div class="p-5">
+      <BaseClipboard v-bind="args" class="mb-3">
+        <span class="underline text-blue-600">{{ args.value }}</span>
+      </BaseClipboard>
+    </div>
+  </BaseModalCenter>
+  `,
+});
+
+export const Modal = TemplateModal.bind({});
+Modal.args = {
+  value: "testtest",
+};

package/src/components/BaseClipboard.vue

@@ -1,105 +1,105 @@
-<template>
-  <button
-    ref="buttonRef"
-    type="button"
-    class="relative inline-flex items-center"
-    @click="copyText"
-  >
-    <slot />
-    <Teleport
-      to="body"
-    >
-      <div
-        ref="floatingRef"
-        :style="floatingStyles"
-        class="fixed top-0 left-0 pointer-events-none z-modal"
-      >
-        <transition
-          enter-active-class="transition duration-200 ease-out"
-          enter-from-class="transform -translate-y-2 scale-95 opacity-0"
-          enter-to-class="transform translate-y-0 scale-100 opacity-100"
-          leave-active-class="transition duration-75 ease-in"
-          leave-from-class="transform translate-y-0 scale-100 opacity-100"
-          leave-to-class="transform -translate-y-2 scale-95 opacity-0"
-        >
-          <div
-            v-if="showTooltip"
-            class="bg-white shadow-md ring-1 ring-black ring-opacity-10 text-slate-900 rounded-md pt-1.5 pb-2 px-3 text-xs"
-          >
-            <div v-if="showCopied">
-              <div class="flex items-center">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke-width="1.5"
-                  stroke="currentColor"
-                  class="w-5 h-5 mr-1 text-green-500"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                  ></path>
-                </svg>
-                {{ t('sui.copied') }}
-              </div>
-            </div>
-            <div v-else>
-              {{ t('sui.click_to_copy') }}
-            </div>
-          </div>
-        </transition>
-      </div>
-    </Teleport> 
-  </button>
-</template>
-
-<script lang="ts" setup>
-import { t } from '@/i18n';
-import { useTooltip } from '@/composables/tooltip';
-
-const showCopied = ref(false);
-
-const props = defineProps({
-  value: {
-    default: null,
-    type: String,
-  },
-});
-
-const buttonRef = ref();
-const floatingRef = ref();
-
-const { showTooltip, floatingStyles } = useTooltip(buttonRef, floatingRef);
-
-async function writeText(text: string) {
-  if (
-    typeof navigator === 'undefined' ||
-    !navigator.clipboard ||
-    !navigator.clipboard.writeText
-  ) {
-    throw new Error('Clipboard API not available in this browser');
-  }
-
-  await navigator.clipboard.writeText(text);
-}
-
-let timeoutId = undefined as undefined | number;
-
-function copyText() {
-  writeText(props.value);
-  showSuccessMessage();
-}
-
-function showSuccessMessage() {
-  showCopied.value = true;
-  timeoutId = setTimeout(() => {
-    clearTimeout(timeoutId);
-    setTimeout(() => {
-      showCopied.value = false;
-      showTooltip.value = false;
-    }, 200);
-  }, 1600);
-}
-</script>
+<template>
+  <button
+    ref="buttonRef"
+    type="button"
+    class="relative inline-flex items-center"
+    @click="copyText"
+  >
+    <slot />
+    <Teleport
+      to="body"
+    >
+      <div
+        ref="floatingRef"
+        :style="floatingStyles"
+        class="fixed top-0 left-0 pointer-events-none z-modal"
+      >
+        <transition
+          enter-active-class="transition duration-200 ease-out"
+          enter-from-class="transform -translate-y-2 scale-95 opacity-0"
+          enter-to-class="transform translate-y-0 scale-100 opacity-100"
+          leave-active-class="transition duration-75 ease-in"
+          leave-from-class="transform translate-y-0 scale-100 opacity-100"
+          leave-to-class="transform -translate-y-2 scale-95 opacity-0"
+        >
+          <div
+            v-if="showTooltip"
+            class="bg-white shadow-md ring-1 ring-black ring-opacity-10 text-slate-900 rounded-md pt-1.5 pb-2 px-3 text-xs"
+          >
+            <div v-if="showCopied">
+              <div class="flex items-center">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                  stroke="currentColor"
+                  class="w-5 h-5 mr-1 text-green-500"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                  ></path>
+                </svg>
+                {{ t('sui.copied') }}
+              </div>
+            </div>
+            <div v-else>
+              {{ t('sui.click_to_copy') }}
+            </div>
+          </div>
+        </transition>
+      </div>
+    </Teleport> 
+  </button>
+</template>
+
+<script lang="ts" setup>
+import { t } from '@/i18n';
+import { useTooltip } from '@/composables/tooltip';
+
+const showCopied = ref(false);
+
+const props = defineProps({
+  value: {
+    default: null,
+    type: String,
+  },
+});
+
+const buttonRef = ref();
+const floatingRef = ref();
+
+const { showTooltip, floatingStyles } = useTooltip(buttonRef, floatingRef);
+
+async function writeText(text: string) {
+  if (
+    typeof navigator === 'undefined' ||
+    !navigator.clipboard ||
+    !navigator.clipboard.writeText
+  ) {
+    throw new Error('Clipboard API not available in this browser');
+  }
+
+  await navigator.clipboard.writeText(text);
+}
+
+let timeoutId = undefined as undefined | number;
+
+function copyText() {
+  writeText(props.value);
+  showSuccessMessage();
+}
+
+function showSuccessMessage() {
+  showCopied.value = true;
+  timeoutId = setTimeout(() => {
+    clearTimeout(timeoutId);
+    setTimeout(() => {
+      showCopied.value = false;
+      showTooltip.value = false;
+    }, 200);
+  }, 1600);
+}
+</script>