sprintify-ui 0.10.63 → 0.10.65

package/src/components/BaseReadMore.vue

@@ -1,73 +1,73 @@
-<template>
-  <div>
-    <p
-      ref="content"
-      class="overflow-hidden whitespace-pre-line"
-      :style="showMore ? undefined : lineClampStyle"
-    >
-      <slot />
-    </p>
-    <button
-      v-if="!showMore && isClamped"
-      type="button"
-      class="mt-1 inline appearance-none border-b border-dashed border-slate-400 bg-transparent px-0.5 py-0 text-slate-900 hover:text-slate-600"
-      @click="showMore = true"
-    >
-      <span class="text-base font-medium">{{ t('sui.read_more') }}</span>
-    </button>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { useMutationObserver } from '@vueuse/core';
-import { StyleValue } from 'vue';
-import { t } from '@/i18n';
-
-const content = ref<null | HTMLParagraphElement>(null);
-
-const props = defineProps({
-  maxLines: {
-    default: 3,
-    type: Number,
-  },
-});
-
-const showMore = ref(false);
-const isClamped = ref(false);
-
-const lineClampStyle = computed((): StyleValue | undefined => {
-  return {
-    display: '-webkit-box',
-    '-webkit-line-clamp': props.maxLines,
-    '-webkit-box-orient': 'vertical',
-  };
-});
-
-onMounted(() => {
-  init();
-
-  useMutationObserver(
-    content.value,
-    () => {
-      showMore.value = false;
-      nextTick(() => {
-        init();
-      });
-    },
-    {
-      childList: true,
-      subtree: true,
-    }
-  );
-});
-
-function init() {
-  const el = content.value;
-
-  if (!el) {
-    return;
-  }
-
-  isClamped.value = el.scrollHeight > el.clientHeight;
-}
-</script>
+<template>
+  <div>
+    <p
+      ref="content"
+      class="overflow-hidden whitespace-pre-line"
+      :style="showMore ? undefined : lineClampStyle"
+    >
+      <slot />
+    </p>
+    <button
+      v-if="!showMore && isClamped"
+      type="button"
+      class="mt-1 inline appearance-none border-b border-dashed border-slate-400 bg-transparent px-0.5 py-0 text-slate-900 hover:text-slate-600"
+      @click="showMore = true"
+    >
+      <span class="text-base font-medium">{{ t('sui.read_more') }}</span>
+    </button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useMutationObserver } from '@vueuse/core';
+import { StyleValue } from 'vue';
+import { t } from '@/i18n';
+
+const content = ref<null | HTMLParagraphElement>(null);
+
+const props = defineProps({
+  maxLines: {
+    default: 3,
+    type: Number,
+  },
+});
+
+const showMore = ref(false);
+const isClamped = ref(false);
+
+const lineClampStyle = computed((): StyleValue | undefined => {
+  return {
+    display: '-webkit-box',
+    '-webkit-line-clamp': props.maxLines,
+    '-webkit-box-orient': 'vertical',
+  };
+});
+
+onMounted(() => {
+  init();
+
+  useMutationObserver(
+    content.value,
+    () => {
+      showMore.value = false;
+      nextTick(() => {
+        init();
+      });
+    },
+    {
+      childList: true,
+      subtree: true,
+    }
+  );
+});
+
+function init() {
+  const el = content.value;
+
+  if (!el) {
+    return;
+  }
+
+  isClamped.value = el.scrollHeight > el.clientHeight;
+}
+</script>

package/src/components/BaseRichText.stories.js

@@ -1,90 +1,90 @@
-import BaseRichText from "./BaseRichText.vue";
-import ShowValue from "@/../.storybook/components/ShowValue.vue";
-import { createFieldStory } from "@/../.storybook/utils";
-import { sizes } from "../../.storybook/utils";
-
-export default {
-  title: "Form/BaseRichText",
-  component: BaseRichText,
-  decorators: [
-    (story) => ({
-      components: { story },
-      template: `
-      <form @submit.prevent="" class="border-none">
-        <story/>
-      </form>`,
-    }),
-  ],
-  args: {
-    placeholder: "This is a custom placeholder...",
-  },
-  argTypes: {
-    editor: {
-      control: { type: "select" },
-      options: ["classic", "inline", "balloon"],
-    },
-    size: {
-      control: { type: "select" },
-      options: sizes,
-    },
-  },
-};
-
-const Template = (args) => ({
-  components: { BaseRichText, ShowValue },
-  setup() {
-    const value = ref(null);
-    return { args, value };
-  },
-  template: `
-    <BaseRichText v-model="value" v-bind="args" class="w-full"></BaseRichText>
-    <ShowValue :value="value" />
-  `,
-});
-
-export const ClassicEditor = Template.bind({});
-ClassicEditor.args = {
-  editor: "classic",
-};
-
-export const InlineEditor = Template.bind({});
-InlineEditor.args = {
-  editor: "inline",
-};
-
-export const BalloonEditor = Template.bind({});
-BalloonEditor.args = {
-  editor: "balloon",
-};
-
-export const CustomToolbar = Template.bind({});
-CustomToolbar.args = {
-  editor: "classic",
-  toolbar: [
-    "bold",
-    "italic",
-    "underline",
-    "strikethrough",
-    "|",
-    "undo",
-    "redo",
-  ]
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  modelValue: "Lorem ipsum...",
-  disabled: true,
-  placeholder: "",
-};
-
-export const HasError = Template.bind({});
-HasError.args = {
-  hasError: true,
-};
-
-export const Field = createFieldStory({
-  component: BaseRichText,
-  componentName: "BaseRichText",
-  label: "Name",
-});
+import BaseRichText from "./BaseRichText.vue";
+import ShowValue from "@/../.storybook/components/ShowValue.vue";
+import { createFieldStory } from "@/../.storybook/utils";
+import { sizes } from "../../.storybook/utils";
+
+export default {
+  title: "Form/BaseRichText",
+  component: BaseRichText,
+  decorators: [
+    (story) => ({
+      components: { story },
+      template: `
+      <form @submit.prevent="" class="border-none">
+        <story/>
+      </form>`,
+    }),
+  ],
+  args: {
+    placeholder: "This is a custom placeholder...",
+  },
+  argTypes: {
+    editor: {
+      control: { type: "select" },
+      options: ["classic", "inline", "balloon"],
+    },
+    size: {
+      control: { type: "select" },
+      options: sizes,
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: { BaseRichText, ShowValue },
+  setup() {
+    const value = ref(null);
+    return { args, value };
+  },
+  template: `
+    <BaseRichText v-model="value" v-bind="args" class="w-full"></BaseRichText>
+    <ShowValue :value="value" />
+  `,
+});
+
+export const ClassicEditor = Template.bind({});
+ClassicEditor.args = {
+  editor: "classic",
+};
+
+export const InlineEditor = Template.bind({});
+InlineEditor.args = {
+  editor: "inline",
+};
+
+export const BalloonEditor = Template.bind({});
+BalloonEditor.args = {
+  editor: "balloon",
+};
+
+export const CustomToolbar = Template.bind({});
+CustomToolbar.args = {
+  editor: "classic",
+  toolbar: [
+    "bold",
+    "italic",
+    "underline",
+    "strikethrough",
+    "|",
+    "undo",
+    "redo",
+  ]
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  modelValue: "Lorem ipsum...",
+  disabled: true,
+  placeholder: "",
+};
+
+export const HasError = Template.bind({});
+HasError.args = {
+  hasError: true,
+};
+
+export const Field = createFieldStory({
+  component: BaseRichText,
+  componentName: "BaseRichText",
+  label: "Name",
+});

package/src/components/BaseRichText.vue

@@ -1,87 +1,87 @@
-<template>
-  <div
-    class="base-rich-text relative"
-    :class="[
-      hasErrorInternal ? 'error' : '',
-      sizeInternal == 'xs' ? 'base-rich-text-xs' : '',
-      sizeInternal == 'sm' ? 'base-rich-text-sm' : '',
-      sizeInternal == 'md' ? 'base-rich-text-base' : '',
-      sizeInternal == 'lg' ? 'base-rich-text-lg' : '',
-      sizeInternal == 'xl' ? 'base-rich-text-xl' : '',
-    ]"
-  >
-    <BaseCkeditor
-      ref="baseCkeditorRef"
-      :model-value="modelValue"
-      :editor="editor"
-      :size="sizeInternal"
-      :toolbar="toolbar"
-      :placeholder="placeholder"
-      :disabled="disabled"
-      :required="requiredInternal"
-      :name="nameInternal"
-      @update:model-value="emitUpdate"
-      @focus="emit('focus', $event)"
-      @blur="emit('blur', $event)"
-      @input="emit('input', $event)"
-    />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { useField } from '@/composables/field';
-import { Size } from '@/utils/sizes';
-import { ToolbarOption } from '@/types/ToolbarOption';
-
-const BaseCkeditor = defineAsyncComponent(() => import('./BaseCkeditor.vue'));
-
-const props = withDefaults(defineProps<{
-  modelValue: string | null | undefined;
-  editor?: 'classic' | 'inline' | 'balloon';
-  size?: Size;
-  toolbar?: ToolbarOption[];
-  placeholder?: string;
-  disabled?: boolean;
-  required?: boolean;
-  name?: string;
-  hasError?: boolean;
-}>(), {
-  editor: 'classic',
-  size: 'md',
-  toolbar() {
-    return ['undo', 'redo', '|', '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']);
-
-const { nameInternal, requiredInternal, hasErrorInternal, emitUpdate, sizeInternal, addBeforeSubmitListener } =
-  useField({
-    name: computed(() => props.name),
-    required: computed(() => props.required),
-    size: computed(() => props.size),
-    hasError: computed(() => props.hasError),
-    emit: emit,
-  });
-
-const baseCkeditorRef = ref<InstanceType<typeof BaseCkeditor> | null>(null);
-
-// This make sure that the latest editor data is emitted when the form is submitted
-// If the user types really fast, then press submit really fast, the editor data might not be up to date
-// This is a workaround to make sure that the latest data is emitted
-addBeforeSubmitListener(() => {
-  if (!baseCkeditorRef.value) {
-    return;
-  }
-
-  const latestData = baseCkeditorRef.value.getEditorData();
-
-  emitUpdate(latestData);
-});
-
-</script>
+<template>
+  <div
+    class="base-rich-text relative"
+    :class="[
+      hasErrorInternal ? 'error' : '',
+      sizeInternal == 'xs' ? 'base-rich-text-xs' : '',
+      sizeInternal == 'sm' ? 'base-rich-text-sm' : '',
+      sizeInternal == 'md' ? 'base-rich-text-base' : '',
+      sizeInternal == 'lg' ? 'base-rich-text-lg' : '',
+      sizeInternal == 'xl' ? 'base-rich-text-xl' : '',
+    ]"
+  >
+    <BaseCkeditor
+      ref="baseCkeditorRef"
+      :model-value="modelValue"
+      :editor="editor"
+      :size="sizeInternal"
+      :toolbar="toolbar"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :required="requiredInternal"
+      :name="nameInternal"
+      @update:model-value="emitUpdate"
+      @focus="emit('focus', $event)"
+      @blur="emit('blur', $event)"
+      @input="emit('input', $event)"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useField } from '@/composables/field';
+import { Size } from '@/utils/sizes';
+import { ToolbarOption } from '@/types/ToolbarOption';
+
+const BaseCkeditor = defineAsyncComponent(() => import('./BaseCkeditor.vue'));
+
+const props = withDefaults(defineProps<{
+  modelValue: string | null | undefined;
+  editor?: 'classic' | 'inline' | 'balloon';
+  size?: Size;
+  toolbar?: ToolbarOption[];
+  placeholder?: string;
+  disabled?: boolean;
+  required?: boolean;
+  name?: string;
+  hasError?: boolean;
+}>(), {
+  editor: 'classic',
+  size: 'md',
+  toolbar() {
+    return ['undo', 'redo', '|', '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']);
+
+const { nameInternal, requiredInternal, hasErrorInternal, emitUpdate, sizeInternal, addBeforeSubmitListener } =
+  useField({
+    name: computed(() => props.name),
+    required: computed(() => props.required),
+    size: computed(() => props.size),
+    hasError: computed(() => props.hasError),
+    emit: emit,
+  });
+
+const baseCkeditorRef = ref<InstanceType<typeof BaseCkeditor> | null>(null);
+
+// This make sure that the latest editor data is emitted when the form is submitted
+// If the user types really fast, then press submit really fast, the editor data might not be up to date
+// This is a workaround to make sure that the latest data is emitted
+addBeforeSubmitListener(() => {
+  if (!baseCkeditorRef.value) {
+    return;
+  }
+
+  const latestData = baseCkeditorRef.value.getEditorData();
+
+  emitUpdate(latestData);
+});
+
+</script>