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/Builder/DataTable/OcDataTable.vue

@@ -230,8 +230,8 @@ const displayFilterData = computed(() => {
               !filterOptions
                 ? 'w-full justify-end'
                 : isSearchExpanded
-                ? 'md:w-fit w-full'
-                : ''
+                  ? 'md:w-fit w-full'
+                  : ''
             "
           >
             <FilterSearch

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/Table/OcTableCell.vue

@@ -102,8 +102,8 @@ const copyToClipboard = async (text) => {
             isSelected
               ? 'block'
               : isSimple
-              ? ''
-              : 'md:hidden group-hover/row:block'
+                ? ''
+                : 'md:hidden group-hover/row:block'
           "
           @update:model-value="$emit('selected')"
         />

packages/@orchidui-vue/src/Disclosure/Tabs/OcTabs.vue

@@ -32,8 +32,8 @@ const isPillVariant = computed(() => props.variant === "pills");
             ? 'bg-oc-gray-200 text-oc-text-500'
             : 'border-oc-primary-500 text-oc-text-500'
           : isPillVariant
-          ? 'text-oc-text-400'
-          : 'border-transparent text-oc-text-400',
+            ? 'text-oc-text-400'
+            : 'border-transparent text-oc-text-400',
       ]"
       @click="$emit('update:modelValue', tab.value)"
     >

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/Checkbox/OcCheckbox.vue

@@ -26,10 +26,10 @@ const onInput = () =>
               ? 'border-oc-primary-100 bg-oc-primary-100'
               : 'border-oc-primary bg-oc-primary'
             : isError
-            ? 'border-oc-error'
-            : isDisabled
-            ? 'bg-oc-primary-50 border-oc-primary-200'
-            : 'border-oc-primary-200',
+              ? 'border-oc-error'
+              : isDisabled
+                ? 'bg-oc-primary-50 border-oc-primary-200'
+                : 'border-oc-primary-200',
           isError && modelValue && !isDisabled ? '!bg-oc-error ' : '',
           isError && !isDisabled ? '!border-oc-error' : '',
           isPartial

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";
 

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";

packages/@orchidui-vue/src/Form/SingleFileUpload/OcSingleFileUpload.stories.js

@@ -1,4 +1,4 @@
-import { SingleFileUpload } from "@/orchidui";
+import SingleFileUpload from "./SingleFileUpload.vue";
 import { ref } from "vue";
 
 export default {

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

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup>
 import { computed, onMounted, ref } from "vue";
 import { Input, Button, RadioGroup, Icon, Dropdown } from "@/orchidui";
 import { useUploadFileProgress } from "@/orchidui/composables/uploadFileProgress.js";

packages/@orchidui-vue/src/Form/TextEditor/OcTextEditor.stories.js

@@ -1,4 +1,5 @@
-import { TextEditor, Theme } from "@/orchidui";
+import { Theme } from "@/orchidui";
+import TextEditor from "./OcTextEditor.vue";
 import { ref } from "vue";
 
 export default {
@@ -30,7 +31,7 @@ export const Default = {
   render: (args) => ({
     components: { TextEditor, Theme },
     setup() {
-      const modelValue = ref();
+      const modelValue = ref("default model value");
       return { args, modelValue };
     },
     template: `

packages/@orchidui-vue/src/Form/TextEditor/OcTextEditor.vue

@@ -1,7 +1,8 @@
-<script setup lang="ts">
-import "@vueup/vue-quill/dist/vue-quill.snow.css";
+<script setup>
+import Quill from "quill";
+import { QuillEditor } from "./QuillEditor";
+
 import { onMounted, ref } from "vue";
-import { Quill, QuillEditor } from "@vueup/vue-quill";
 import { Icon, Dropdown } from "@/orchidui";
 
 const props = defineProps({
@@ -14,8 +15,9 @@ const props = defineProps({
    */
   initialFontSize: { type: String },
   modelValue: String,
+  image: String,
 });
-const emit = defineEmits(["update:modelValue"]);
+const emit = defineEmits(["update:modelValue", "update:image"]);
 
 const Size = Quill.import("attributors/style/size");
 Size.whitelist = props.fontSizes.map((f) => f.value);
@@ -35,6 +37,9 @@ const activeListFormat = ref("");
 const activeAlign = ref("");
 const quill = ref();
 
+// need for upload to server
+const base64Images = ref(props.image);
+
 const checkStates = (value) => {
   isUndoActive.value = quill.value.getQuill().history.stack.undo.length > 0;
   isRedoActive.value = quill.value.getQuill().history.stack.redo.length > 0;
@@ -91,6 +96,8 @@ const readImage = (base64) => {
   quill.value
     .getQuill()
     .clipboard.dangerouslyPasteHTML(range.index, `<img src="${base64}" />`);
+  base64Images.value = base64;
+  emit("update:image", base64Images.value);
 };
 const uploadImage = () => {
   if (!quill.value.getQuill().getSelection())
@@ -148,11 +155,11 @@ onMounted(() => {
   <QuillEditor
     v-if="id"
     ref="quill"
-    :model-value="modelValue"
+    :content="modelValue"
     theme="snow"
     content-type="html"
     class="min-h-[200px]"
-    :toolbar="`#${id}`"
+    :id="`#${id}`"
     @update:content="checkStates"
     @paste="isValidPasedText"
   >
@@ -350,6 +357,7 @@ onMounted(() => {
 </template>
 
 <style lang="scss">
+@import url("./snow.css");
 .ql-container {
   @apply rounded-b text-base;
 }