@appscode/design-system 1.1.0 → 2.0.0

package/vue-components/v3/dropdown/DropdownMenu.vue

@@ -1,3 +1,88 @@
+<script setup lang="ts">
+import { onUnmounted, ref, watch } from "vue";
+import type { Ref } from "vue";
+
+interface Props {
+  isActive?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isActive: false,
+});
+
+const emit = defineEmits(["update:is-active"]);
+
+const dropdown: Ref<HTMLElement | null> = ref(null);
+const isDropdownActive = ref(props.isActive);
+
+// attach click event listener on window, and close the dropdown
+function deactivateDropdown(e: Event) {
+  const { target } = e;
+  if (
+    isDropdownActive.value &&
+    dropdown.value &&
+    dropdown.value !== target &&
+    !dropdown.value.contains(target as Node)
+  ) {
+    if (!ignoreClick.value) {
+      animateDropdown("hide");
+      setTimeout(() => {
+        isDropdownActive.value = false;
+        emit("update:is-active", false);
+      }, 200);
+    }
+  }
+}
+window.addEventListener("click", deactivateDropdown);
+onUnmounted(() => {
+  window.removeEventListener("click", deactivateDropdown);
+});
+
+// for animation
+const dropdownShowAnimation = ref(false);
+const dropdownHideAnimation = ref(false);
+const ignoreClick = ref(false);
+
+function animateDropdown(type: string) {
+  ignoreClick.value = true;
+  if (type === "show") {
+    dropdownShowAnimation.value = true;
+    // remove class after 200 miliseconds
+    setTimeout(() => {
+      dropdownShowAnimation.value = false;
+      ignoreClick.value = false;
+    }, 200);
+  } else {
+    dropdownHideAnimation.value = true;
+    setTimeout(() => {
+      dropdownHideAnimation.value = false;
+      ignoreClick.value = false;
+    }, 200);
+  }
+}
+
+watch(
+  () => props.isActive,
+  (n) => {
+    if (ignoreClick.value) {
+      // ignore new value
+      // emit old value
+      emit("update:is-active", isDropdownActive.value);
+    } else {
+      if (n) {
+        animateDropdown("show");
+        isDropdownActive.value = true;
+      } else {
+        animateDropdown("hide");
+        setTimeout(() => {
+          isDropdownActive.value = false;
+        }, 200);
+      }
+    }
+  }
+);
+</script>
+
 <template>
   <div
     ref="dropdown"
@@ -18,94 +103,3 @@
     </div>
   </div>
 </template>
-
-<script lang="ts">
-//@ts-ignore
-import { defineComponent, onUnmounted, Ref, ref, toRefs, watch } from "vue";
-
-export default defineComponent({
-  props: {
-    isActive: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ["update:is-active"],
-
-  setup(props, { emit }) {
-    const { isActive } = toRefs(props);
-    watch(isActive, (n) => {
-      if (ignoreClick.value) {
-        // ignore new value
-        // emit old value
-        emit("update:is-active", isDropdownActive.value);
-      } else {
-        if (n) {
-          animateDropdown("show");
-          isDropdownActive.value = true;
-        } else {
-          animateDropdown("hide");
-          setTimeout(() => {
-            isDropdownActive.value = false;
-          }, 200);
-        }
-      }
-    });
-
-    const dropdown: Ref<HTMLElement | null> = ref(null);
-    const isDropdownActive = ref(isActive.value);
-
-    // attach click event listener on window, and close the dropdown
-    function deactivateDropdown(e: Event) {
-      const { target } = e;
-      if (
-        isDropdownActive.value &&
-        dropdown.value &&
-        dropdown.value !== target &&
-        !dropdown.value.contains(target as Node)
-      ) {
-        if (!ignoreClick.value) {
-          animateDropdown("hide");
-          setTimeout(() => {
-            isDropdownActive.value = false;
-            emit("update:is-active", false);
-          }, 200);
-        }
-      }
-    }
-    window.addEventListener("click", deactivateDropdown);
-    onUnmounted(() => {
-      window.removeEventListener("click", deactivateDropdown);
-    });
-
-    // for animation
-    const dropdownShowAnimation = ref(false);
-    const dropdownHideAnimation = ref(false);
-    const ignoreClick = ref(false);
-    function animateDropdown(type: string) {
-      ignoreClick.value = true;
-      if (type === "show") {
-        dropdownShowAnimation.value = true;
-        // remove class after 200 miliseconds
-        setTimeout(() => {
-          dropdownShowAnimation.value = false;
-          ignoreClick.value = false;
-        }, 200);
-      } else {
-        dropdownHideAnimation.value = true;
-        setTimeout(() => {
-          dropdownHideAnimation.value = false;
-          ignoreClick.value = false;
-        }, 200);
-      }
-    }
-
-    return {
-      dropdown,
-      isDropdownActive,
-      dropdownShowAnimation,
-      dropdownHideAnimation,
-    };
-  },
-});
-</script>

package/vue-components/v3/editor/Editor.vue

@@ -1,3 +1,114 @@
+<script setup lang="ts">
+import { defineAsyncComponent, ref, computed, watch } from "vue";
+
+interface Props {
+  modelValue?: string;
+  originalValue?: string;
+  readOnly?: boolean;
+  language?: string;
+  showMinimap?: boolean;
+  editorHeight?: number | string;
+  editorTheme?: string;
+  wordWrap?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: "",
+  originalValue: "",
+  readOnly: false,
+  language: "",
+  showMinimap: false,
+  editorHeight: 40,
+  editorTheme: "",
+  wordWrap: "on",
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const EditorTabs = defineAsyncComponent(() => import("../tabs/EditorTabs.vue"));
+
+const Preloader = defineAsyncComponent(
+  () => import("../preloader/Preloader.vue")
+);
+
+const Banner = defineAsyncComponent(() => import("../banner/Banner.vue"));
+
+const MonacoEditor = defineAsyncComponent({
+  loader: () => import("./MonacoEditor.vue"),
+
+  loadingComponent: Preloader,
+  delay: 200,
+  errorComponent: Banner,
+  timeout: 100000,
+});
+
+const activeTab = ref("edit");
+const editorContent = ref("");
+const originalEditorContent = ref("");
+
+const calcShowMinimap = computed(() => {
+  const noOfLines = editorContent.value.split("\n").length;
+  return props.showMinimap && noOfLines > 25;
+});
+
+const theme = computed(() => {
+  return (
+    props.editorTheme ||
+    (document.documentElement.classList.contains("is-dark-theme")
+      ? "vs-dark"
+      : "vs")
+  );
+});
+
+const onChange = (e: Event) => {
+  if (typeof e === "string") editorContent.value = e;
+};
+
+const onEditorMount = (editor: Record<string, unknown>) => {
+  // add event listeners
+  if (editor.onDidBlurEditorText instanceof Function) {
+    editor.onDidBlurEditorText(() => {
+      emit("update:modelValue", editorContent.value);
+    });
+  }
+};
+
+const computeHightInClass = computed(() => {
+  if (typeof props.editorHeight === "number") return `vh-${props.editorHeight}`;
+  else return "";
+});
+
+const computeHightInStyle = computed(() => {
+  if (typeof props.editorHeight === "string")
+    return { height: props.editorHeight };
+  else return {};
+});
+
+watch(
+  () => props.modelValue,
+  (n) => {
+    if (editorContent.value !== n) {
+      editorContent.value = n;
+    }
+  },
+  {
+    immediate: true,
+  }
+);
+
+watch(
+  () => props.originalValue,
+  (n) => {
+    if (originalEditorContent.value !== n) {
+      originalEditorContent.value = n;
+    }
+  },
+  {
+    immediate: true,
+  }
+);
+</script>
+
 <template>
   <div>
     <editor-tabs
@@ -9,7 +120,9 @@
       v-if="activeTab === 'edit'"
       @editorDidMount="onEditorMount"
       key="edit"
-      :class="`vh-${editorHeight} is-clipped`"
+      class="is-clipped"
+      :class="computeHightInClass"
+      :style="computeHightInStyle"
       :value="editorContent"
       @change="onChange"
       :language="language"
@@ -27,7 +140,9 @@
     <monaco-editor
       v-if="activeTab === 'preview'"
       key="preview"
-      :class="`vh-${editorHeight} is-clipped`"
+      class="is-clipped"
+      :class="computeHightInClass"
+      :style="computeHightInStyle"
       :value="editorContent"
       :language="language"
       :options="{
@@ -45,116 +160,3 @@
     />
   </div>
 </template>
-
-<script>
-import { defineComponent, defineAsyncComponent, h } from "vue";
-import Preloader from "../../v2/preloader/Preloader.vue";
-import Banner from "../../v2/banner/Banner.vue";
-export default defineComponent({
-  props: {
-    modelValue: {
-      type: String,
-      default: "",
-    },
-    originalValue: {
-      type: String,
-      default: "",
-    },
-    readOnly: {
-      type: Boolean,
-      default: false,
-    },
-    language: {
-      type: String,
-      default: "yaml",
-    },
-    showMinimap: {
-      type: Boolean,
-      default: true,
-    },
-    editorHeight: {
-      type: Number,
-      default: 40,
-    },
-    editorTheme: {
-      type: String,
-      default: "",
-    },
-    wordWrap: {
-      type: String,
-      default: "off",
-    },
-  },
-
-  emits: ["update:modelValue"],
-
-  components: {
-    EditorTabs: defineAsyncComponent(() =>
-      import("../tabs/EditorTabs.vue").then((module) => module.default)
-    ),
-    MonacoEditor: defineAsyncComponent({
-      loader: () =>
-        import("./MonacoEditor.vue").then((module) => module.default),
-
-      loadingComponent: Preloader,
-      delay: 200,
-      errorComponent: Banner,
-      timeout: 100000,
-    }),
-  },
-
-  data() {
-    return {
-      activeTab: "edit",
-      editorContent: "",
-      originalEditorContent: "",
-    };
-  },
-
-  computed: {
-    calcShowMinimap() {
-      const noOfLines = this.editorContent.split("\n").length;
-      return this.showMinimap && noOfLines * 2 > this.editorHeight;
-    },
-    theme() {
-      return (
-        this.editorTheme ||
-        (document.documentElement.classList.contains("is-dark-theme")
-          ? "vs-dark"
-          : "vs")
-      );
-    },
-  },
-
-  watch: {
-    modelValue: {
-      immediate: true,
-      handler(n) {
-        if (this.editorContent !== n) {
-          this.editorContent = n;
-        }
-      },
-    },
-    originalValue: {
-      immediate: true,
-      handler(n) {
-        if (this.originalEditorContent !== n) {
-          this.originalEditorContent = n;
-        }
-      },
-    },
-  },
-
-  methods: {
-    onChange(e) {
-      if (typeof e === "string") this.editorContent = e;
-    },
-    onEditorMount(editor) {
-      // add event listeners
-      editor.onDidBlurEditorText(() => {
-        this.$emit("update:modelValue", this.editorContent);
-      });
-    },
-  },
-});
-</script>