fix external packages | fix text editor

package.json

@@ -5,22 +5,22 @@
   "type": "module",
   "scripts": {
     "dev": "storybook dev -p 6006",
-    "build-storybook": "storybook build -o public/storybook",
+    "build:storybook": "storybook build -o public/storybook",
     "astro": "astro",
     "dev:playground": "astro dev",
-    "build": "npm run build-storybook && astro build",
-    "preview": "astro build && npm run build-storybook && astro preview",
+    "build": "npm run build:storybook && astro build",
+    "preview": "astro build && npm run build:storybook && astro preview",
     "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix packages",
     "format": "prettier .  --write",
     "publish": "cd packages/@orchidui-vue && npm run build && npm version patch && npm publish"
   },
   "dependencies": {
     "@astrojs/vue": "^3.0.3",
-    "@orchidui/vue": "^0.1.72",
+    "@orchidui/vue": "^0.1.125",
     "@popperjs/core": "^2.11.8",
-    "@vueup/vue-quill": "^1.2.0",
     "dayjs": "^1.11.10",
     "flag-icons": "^6.11.1",
+    "quill": "^2.0.0-dev.4",
     "replace-in-file": "^7.0.2",
     "v-calendar": "^3.1.2",
     "vue-advanced-cropper": "^2.8.8"

packages/@orchidui-vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orchidui/vue",
-  "version": "0.1.115",
+  "version": "0.1.135",
   "type": "module",
   "scripts": {
     "build": "vite build",
@@ -24,6 +24,18 @@
     ".": {
       "import": "./dist/index.js"
     },
+    "./TextEditor": {
+      "import": "./dist/TextEditor.js"
+    },
+    "./ComplexCalendar": {
+      "import": "./dist/ComplexCalendar.js"
+    },
+    "./ComplexDatePicker": {
+      "import": "./dist/ComplexDatePicker.js"
+    },
+    "./SingleFileUpload": {
+      "import": "./dist/SingleFileUpload.js"
+    },
     "./dist/style.css": {
       "import": "./dist/style.css",
       "require": "./dist/style.css"
@@ -32,10 +44,5 @@
   "module": "./dist/index.js",
   "files": [
     "./dist"
-  ],
-  "dependencies": {
-    "@popperjs/core": "^2.11.8",
-    "flag-icons": "^6.11.1",
-    "v-calendar": "^3.1.2"
-  }
+  ]
 }

packages/@orchidui-vue/src/ComplexCalendar.js

@@ -0,0 +1,3 @@
+import ComplexCalendar from "./Form/ComplexCalendar/OcComplexCalendar.vue";
+
+export { ComplexCalendar };

packages/@orchidui-vue/src/ComplexDatePicker.js

@@ -0,0 +1,3 @@
+import ComplexDatePicker from "./Form/ComplexDatePicker/OcComplexDatePicker.vue";
+
+export { ComplexDatePicker };

packages/@orchidui-vue/src/DataDisplay/Pagination/OcPagination.vue

@@ -37,7 +37,7 @@ const pagination = computed(() => {
     return [
       ...Array.from(
         { length: Math.min(totalVisible - 1, props.maxPage) },
-        (_, index) => index + 1,
+        (_, index) => index + 1
       ),
       "...",
       props.maxPage,
@@ -51,7 +51,7 @@ const pagination = computed(() => {
       "...",
       ...Array.from(
         { length: totalVisible - 1 },
-        (_, index) => props.maxPage - (totalVisible - 2) + index,
+        (_, index) => props.maxPage - (totalVisible - 2) + index
       ),
     ];
   }
@@ -76,7 +76,7 @@ const pagination = computed(() => {
         @click="
           $emit(
             'update:modelValue',
-            modelValue > 1 ? modelValue - 1 : modelValue,
+            modelValue > 1 ? modelValue - 1 : modelValue
           )
         "
       />
@@ -106,7 +106,7 @@ const pagination = computed(() => {
         @click="
           $emit(
             'update:modelValue',
-            modelValue < Number(maxPage) ? modelValue + 1 : Number(maxPage),
+            modelValue < Number(maxPage) ? modelValue + 1 : Number(maxPage)
           )
         "
       />

packages/@orchidui-vue/src/Disclosure/Accordion/OcAccordion.stories.js

@@ -28,7 +28,7 @@ export const OcAccordion = {
       const isOpen = ref(false);
       watch(
         () => args.isExpandable,
-        (val) => (isOpen.value = args.isDisabled ? false : val),
+        (val) => (isOpen.value = args.isDisabled ? false : val)
       );
       return { isOpen, args };
     },

packages/@orchidui-vue/src/Elements/Header/OcTabToSelect.vue

@@ -12,7 +12,7 @@ const props = defineProps({
 });
 const isDropdownOpened = ref(false);
 const activeMenu = computed(() =>
-  props.menus.find((menu) => menu.value === props.modelValue),
+  props.menus.find((menu) => menu.value === props.modelValue)
 );
 </script>
 <template>

packages/@orchidui-vue/src/Elements/PageTitle/OcPrimaryActions.vue

@@ -12,7 +12,7 @@ const emit = defineEmits({
 const isDropdownOpened = ref(false);
 const isCopied = ref(false);
 const hasDropdownOptions = computed(
-  () => props.primaryActions?.dropdownOptions,
+  () => props.primaryActions?.dropdownOptions
 );
 const copyToClipBoard = () => {
   isCopied.value = true;

packages/@orchidui-vue/src/Elements/Sidebar/OcSidebar.stories.js

@@ -4,7 +4,7 @@ import {
   PAYMENTS_SIDEBAR_GROUP,
   POS_SIDEBAR_GROUP,
   ONLINE_STORE_SIDEBAR_GROUP,
-} from "./HitpaySidebar.js";
+} from "./HitpaySidebar.sample.js";
 
 export default {
   component: Sidebar,

packages/@orchidui-vue/src/Form/Button/OcButton.vue

@@ -25,7 +25,7 @@ const props = defineProps({
 });
 const isPressed = ref(false);
 const isIconOnly = computed(
-  () => (props.leftIcon || props.rightIcon) && !props.label,
+  () => (props.leftIcon || props.rightIcon) && !props.label
 );
 const additionalAreaSize = computed(() => ({
   default: "w-10 h-[36px]",
@@ -54,7 +54,7 @@ const showShadow = computed(
     !props.isDisabled &&
     !props.isLoading &&
     !props.isActive &&
-    shadowContainer.value[props.variant],
+    shadowContainer.value[props.variant]
 );
 
 const buttonTypeClasses = computed(() => ({
@@ -86,7 +86,7 @@ const buttonSizeClasses = computed(() => ({
       : "py-3 ") + " text-lg h-[44px]",
 }));
 const roundedClasses = computed(() =>
-  props.isRoundedFull ? "rounded-full" : "rounded",
+  props.isRoundedFull ? "rounded-full" : "rounded"
 );
 
 const iconSize = computed(() => ({

packages/@orchidui-vue/src/Form/Calendar/OcCalendar.vue

@@ -37,7 +37,7 @@ const emit = defineEmits(["update:modelValue"]);
 const selectedDate = ref(
   props.type === "range"
     ? props.modelValue?.[0] || new Date()
-    : props.modelValue || new Date(),
+    : props.modelValue || new Date()
 );
 
 const selectedStartDate = ref(selectedDate.value);
@@ -47,23 +47,23 @@ const selectedEndDate = ref(
     ? props.modelValue?.[1] ||
         new Date(
           new Date(selectedStartDate.value).setDate(
-            selectedStartDate.value.getDate() + 2,
-          ),
+            selectedStartDate.value.getDate() + 2
+          )
         )
-    : null,
+    : null
 );
 
 const selectedStartDay = ref(
   selectedStartDate.value?.getMonth() === selectedDate.value?.getMonth()
     ? selectedStartDate.value?.getDate()
-    : null,
+    : null
 );
 const selectedEndDay = ref(
   props.type === "range"
     ? selectedEndDate.value?.getMonth() === selectedDate.value?.getMonth()
       ? selectedEndDate.value?.getDate()
       : null
-    : null,
+    : null
 );
 
 const daysInMonth = computed(() => {
@@ -73,7 +73,7 @@ const daysInMonth = computed(() => {
   const lastDay = new Date(
     date?.getFullYear(),
     date?.getMonth() + 1,
-    0,
+    0
   ).getDate();
 
   return Array.from({ length: lastDay }, (_, i) => i + 1);
@@ -101,10 +101,10 @@ const selectDay = (day) => {
   if (
     props.type !== "range" ||
     Math.abs(
-      currentMonth.getTime() - new Date(selectedEndDate.value).getTime(),
+      currentMonth.getTime() - new Date(selectedEndDate.value).getTime()
     ) >
       Math.abs(
-        currentMonth.getTime() - new Date(selectedStartDate.value).getTime(),
+        currentMonth.getTime() - new Date(selectedStartDate.value).getTime()
       )
   ) {
     selectedStartDay.value = day;
@@ -141,7 +141,7 @@ const prevMonth = () => {
     selectedDate.value = new Date(
       selectedDate.value?.getFullYear(),
       selectedDate.value?.getMonth() - 1,
-      1,
+      1
     );
 
     selectedStartDay.value =
@@ -157,7 +157,7 @@ const prevMonth = () => {
       selectedStartDate.value = new Date(
         selectedStartDate.value?.getFullYear(),
         selectedStartDate.value?.getMonth() - 1,
-        1,
+        1
       );
       selectedStartDay.value = null;
     }
@@ -169,7 +169,7 @@ const nextMonth = () => {
     selectedDate.value = new Date(
       selectedDate.value?.getFullYear(),
       selectedDate.value?.getMonth() + 1,
-      1,
+      1
     );
     selectedStartDay.value =
       selectedDate.value?.getMonth() === selectedStartDate.value?.getMonth()
@@ -184,7 +184,7 @@ const nextMonth = () => {
       selectedStartDate.value = new Date(
         selectedStartDate.value?.getFullYear(),
         selectedStartDate.value?.getMonth() + 1,
-        1,
+        1
       );
       selectedStartDay.value = null;
     }
@@ -236,7 +236,7 @@ const doneSelecting = () => {
     "update:modelValue",
     props.type === "range"
       ? [selectedStartDate.value, selectedEndDate.value]
-      : new Date(selectedStartDate.value),
+      : new Date(selectedStartDate.value)
   );
 };
 </script>

packages/@orchidui-vue/src/Form/CheckboxesGroup/OcCheckboxesGroup.stories.js

@@ -41,7 +41,7 @@ export const Default = {
       const selectedCheckboxes = ref([]);
       watch(
         () => args.modelValue,
-        (val) => (selectedCheckboxes.value = val),
+        (val) => (selectedCheckboxes.value = val)
       );
       return { args, selectedCheckboxes };
     },

packages/@orchidui-vue/src/Form/CheckboxesGroup/OcCheckboxesGroup.vue

@@ -30,7 +30,7 @@ const toggleCheckbox = (value) => {
     "update:modelValue",
     isSelectedCheckbox(value)
       ? props.modelValue.filter((v) => v !== value)
-      : [...props.modelValue, value],
+      : [...props.modelValue, value]
   );
 };
 </script>

packages/@orchidui-vue/src/Form/ComplexDatePicker/OcComplexDatePicker.vue

@@ -1,5 +1,6 @@
 <script setup>
-import { ComplexCalendar, Dropdown, Input } from "@/orchidui";
+import { Dropdown, Input } from "@/orchidui";
+import ComplexCalendar from "../ComplexCalendar/OcComplexCalendar.vue";
 import { ref } from "vue";
 import dayjs from "dayjs";
 
@@ -41,7 +42,7 @@ const isOpen = ref(false);
   <Dropdown v-model="isOpen" position="bottom" class="w-full">
     <Input
       :model-value="`${dayjs(modelValue.start).format(formatDate)} - ${dayjs(
-        modelValue.end,
+        modelValue.end
       ).format(formatDate)}`"
       icon="calendar"
       readonly

packages/@orchidui-vue/src/Form/LinkInput/OcLinkInput.vue

@@ -21,7 +21,7 @@ defineEmits({
 const isDropdownOpened = ref(false);
 const selectedLink = ref(props.links?.[0]?.value || "");
 const selectedLinkProps = computed(() =>
-  props.links.find((link) => link.value === selectedLink.value),
+  props.links.find((link) => link.value === selectedLink.value)
 );
 </script>
 

packages/@orchidui-vue/src/Form/PhoneInput/OcPhoneInput.vue

@@ -29,13 +29,13 @@ const query = ref("");
 const filteredCountryCodes = computed(() =>
   props.countryCodes
     .filter((country) =>
-      country.country.toLowerCase().includes(query.value.toLowerCase()),
+      country.country.toLowerCase().includes(query.value.toLowerCase())
     )
-    .sort((a, b) => a.country.localeCompare(b.country)),
+    .sort((a, b) => a.country.localeCompare(b.country))
 );
 const getCountryObject = (iso) =>
   props.countryCodes.find(
-    (country) => country.iso.toLowerCase() === iso.toLowerCase(),
+    (country) => country.iso.toLowerCase() === iso.toLowerCase()
   ) || null;
 
 const getCountryCode = (iso) => getCountryObject(iso)?.code || "";

packages/@orchidui-vue/src/Form/Select/OcSelect.vue

@@ -34,7 +34,7 @@ const emit = defineEmits({
 });
 
 const localValue = ref(
-  props.modelValue ? props.modelValue : props.multiple ? [] : "",
+  props.modelValue ? props.modelValue : props.multiple ? [] : ""
 );
 
 const query = ref("");
@@ -45,7 +45,7 @@ const filterOptions = (options, query) => {
   for (const option of options) {
     if (option.values) {
       const filteredGroup = option.values.filter((subOption) =>
-        subOption.label.toLowerCase().includes(query.toLowerCase()),
+        subOption.label.toLowerCase().includes(query.toLowerCase())
       );
 
       if (filteredGroup.length > 0) {
@@ -64,7 +64,7 @@ const filterOptions = (options, query) => {
   return filteredOptions;
 };
 const filterableOptions = computed(() =>
-  filterOptions(props.options, query.value),
+  filterOptions(props.options, query.value)
 );
 const selectOption = (option) => {
   const result = props.multiple

packages/@orchidui-vue/src/Form/SingleFileUpload/ModalCropper.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup>
 import { Modal, Button } from "@/orchidui";
 import { Cropper } from "vue-advanced-cropper";
 import "vue-advanced-cropper/dist/style.css";
@@ -70,9 +70,7 @@ const zoom = (zoom) => cropper.value.zoom(zoom);
 
 <style lang="scss">
 .test {
-  background:
-    url("./assets/empty-space.png"),
-    lightgray 0 0% / 50px 50px repeat;
+  background: url("./assets/empty-space.png"), lightgray 0 0% / 50px 50px repeat;
 }
 
 .vue-simple-handler {