@mixd-id/web-scaffold 0.1.230406178 → 0.1.230406180

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.230406178",
+  "version": "0.1.230406180",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",

package/src/components/Link.vue

@@ -0,0 +1,54 @@
+<template>
+  <a v-if="isExternalLink && items.length > 0" :target="target">
+    <component v-for="(item, idx) in items"
+               :is="item.type"
+               :key="idx"
+               :="item" />
+  </a>
+  <a v-else-if="isExternalLink" :href="href" :target="target">{{ text }}</a>
+  <router-link v-else-if="items.length > 0" :to="href">
+    <component v-for="(item, idx) in items"
+               :is="item.type"
+               :key="idx"
+               :="item" />
+  </router-link>
+  <router-link v-else :to="href">{{ text }}</router-link>
+</template>
+
+<script>
+
+import { componentMixin } from "../mixin/component";
+
+export default{
+
+  mixins: [ componentMixin ],
+
+  props: {
+    items: Array,
+    href: {
+      type: String,
+      default: ''
+    },
+    target: String,
+    text: String,
+  },
+
+  computed: {
+
+    isExternalLink(){
+      return (this.href ?? '').indexOf('://') > -1;
+    },
+
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+
+}
+
+</style>

package/src/components/Modal.vue

@@ -345,77 +345,3 @@ html[data-theme='dark'] .overlay{
 }
 
 </style>
-
-<style>
-
-.slideup-enter-active,
-.slideup-leave-active {
-	transition: all 300ms cubic-bezier(0.25, 1, 0.5, 1);
-}
-.slideup-enter-active,
-.slideup-leave-active {
-	transform: translate3d(0, 0, 0);
-}
-.slideup-enter-from,
-.slideup-leave-to {
-	opacity: 0;
-	transform: translate3d(0, 10px, 0);
-}
-
-.slidedown-enter-active,
-.slidedown-leave-active {
-  transition: all 300ms cubic-bezier(0.25, 1, 0.5, 1);
-}
-.slidedown-enter-active,
-.slidedown-leave-active {
-  transform: translate3d(0, 0, 0);
-}
-.slidedown-enter-from,
-.slidedown-leave-to {
-  opacity: 0;
-  transform: translate3d(0, -10px, 0);
-}
-
-.slideleft-enter-active,
-.slideleft-leave-active {
-  transition: all 300ms cubic-bezier(0.25, 1, 0.5, 1);
-}
-.slideleft-enter-active,
-.slideleft-leave-active {
-  transform: translate3d(0, 0, 0);
-}
-.slideleft-enter-from,
-.slideleft-leave-to {
-  opacity: 0;
-  transform: translate3d(10px, 0, 0);
-}
-
-.slideright-enter-active,
-.slideright-leave-active {
-  transition: all 300ms cubic-bezier(0.25, 1, 0.5, 1);
-}
-.slideright-enter-active,
-.slideright-leave-active {
-  transform: translate3d(0, 0, 0);
-}
-.slideright-enter-from,
-.slideright-leave-to {
-  opacity: 0;
-  transform: translate3d(-10px, 0, 0);
-}
-
-.slideout-enter-active,
-.slideout-leave-active {
-  transition: all 300ms cubic-bezier(0.25, 1, 0.5, 1);
-}
-.slideout-enter-active,
-.slideout-leave-active {
-  transform: scale(1);
-}
-.slideout-enter-from,
-.slideout-leave-to {
-  opacity: 0;
-  transform: scale(.9);
-}
-
-</style>

package/src/components/TextBlock.vue

@@ -1,7 +1,7 @@
 <template>
-	<span :class="$style.comp">
+	<component :is="tagName" :class="$style.comp">
 		{{ text }}
-	</span>
+	</component>
 </template>
 
 <script>
@@ -14,7 +14,12 @@ export default{
 
 	props: {
 
-		text: String
+		text: String,
+
+    tagName: {
+      type: String,
+      default: 'span'
+    }
 
 	}
 

package/src/index.js

@@ -381,6 +381,7 @@ export default{
     app.component('ImagePreview', defineAsyncComponent(() => import("./components/ImagePreview.vue")))
     app.component('ImageFullScreen', defineAsyncComponent(() => import("./components/ImageFullScreen.vue")))
     app.component('ImportModal', defineAsyncComponent(() => import("./components/ImportModal.vue")))
+    app.component('Link', defineAsyncComponent(() => import("./components/Link.vue")))
     app.component('ListPage1', defineAsyncComponent(() => import("./components/ListPage1.vue")))
     app.component('ListPage1Filter', defineAsyncComponent(() => import("./components/ListPage1Filter.vue")))
     app.component('ListItem', defineAsyncComponent(() => import("./components/ListItem.vue")))
@@ -393,6 +394,7 @@ export default{
     app.component('ListViewMapSummary', defineAsyncComponent(() => import("./components/ListViewMapSummary.vue")))
     app.component('Carousel', defineAsyncComponent(() => import("./components/Carousel.vue")))
     app.component('ContextMenu', defineAsyncComponent(() => import("./components/ContextMenu.vue")))
+    app.component('FAQ', defineAsyncComponent(() => import("./widgets/FAQ.vue")))
     app.component('Flex', defineAsyncComponent(() => import("./components/Flex.vue")))
     app.component('Grid', defineAsyncComponent(() => import("./components/Grid.vue")))
     app.component('Modal', defineAsyncComponent(() => import("./components/Modal.vue")))
@@ -420,7 +422,6 @@ export default{
     app.component('TextEditor', defineAsyncComponent(() => import("./components/TextEditor.vue")))
 
     app.component('AhrefSetting', defineAsyncComponent(() => import("./widgets/AhrefSetting.vue")))
-    app.component('ParagraphSetting', defineAsyncComponent(() => import("./widgets/ParagraphSetting.vue")))
     app.component('ArticleSetting', defineAsyncComponent(() => import("./widgets/ArticleSetting.vue")))
     app.component('BlockSetting', defineAsyncComponent(() => import("./widgets/BlockSetting.vue")))
     app.component('BoxSetting', defineAsyncComponent(() => import("./widgets/BoxSetting.vue")))
@@ -431,7 +432,6 @@ export default{
     app.component('ContactFormSetting', defineAsyncComponent(() => import("./widgets/ContactFormSetting.vue")))
     app.component('EmbeddedVideo', defineAsyncComponent(() => import("./widgets/EmbeddedVideo.vue")))
     app.component('EmbeddedVideoSetting', defineAsyncComponent(() => import("./widgets/EmbeddedVideoSetting.vue")))
-    app.component('FAQ', defineAsyncComponent(() => import("./widgets/FAQ.vue")))
     app.component('FAQSetting', defineAsyncComponent(() => import("./widgets/FAQSetting.vue")))
     app.component('FeatureList', defineAsyncComponent(() => import("./widgets/FeatureList.vue")))
     app.component('FeatureListSetting', defineAsyncComponent(() => import("./widgets/FeatureListSetting.vue")))
@@ -443,10 +443,12 @@ export default{
     app.component('HeaderSetting', defineAsyncComponent(() => import("./widgets/HeaderSetting.vue")))
     app.component('IconList', defineAsyncComponent(() => import("./widgets/IconList.vue")))
     app.component('IconListSetting', defineAsyncComponent(() => import("./widgets/IconListSetting.vue")))
+    app.component('LinkSetting', defineAsyncComponent(() => import("./widgets/LinkSetting.vue")))
     app.component('ImageSetting', defineAsyncComponent(() => import("./widgets/ImageSetting.vue")))
     app.component('MarginSetting', defineAsyncComponent(() => import("./widgets/MarginSetting.vue")))
     app.component('MultiValueSetting', defineAsyncComponent(() => import("./widgets/MultiValueSetting.vue")))
     app.component('PaddingSetting', defineAsyncComponent(() => import("./widgets/PaddingSetting.vue")))
+    app.component('ParagraphSetting', defineAsyncComponent(() => import("./widgets/ParagraphSetting.vue")))
     app.component('Review', defineAsyncComponent(() => import("./widgets/Review.vue")))
     app.component('ReviewSetting', defineAsyncComponent(() => import("./widgets/ReviewSetting.vue")))
     app.component('Share', defineAsyncComponent(() => import("./widgets/Share.vue")))

package/src/themes/default/index.js

@@ -106,7 +106,7 @@ const plugin = Plugin(function({ addBase, config, theme }) {
         'fontSize': '14px',
       },
 
-      "input, input[type='text'], input[type='number'], textarea, select, option": { fontSize:"16px !important" }
+      "input, input[type='text'], input[type='number'], textarea, select, option": {fontSize: "16px !important"}
     },
 
     '::-webkit-scrollbar': {
@@ -149,7 +149,7 @@ const plugin = Plugin(function({ addBase, config, theme }) {
       fontWeight: theme('fontWeight.bold'),
     },
 
-    '.flex-1': { minHeight: "0px", minWidth: "0px" },
+    '.flex-1': {minHeight: "0px", minWidth: "0px"},
 
     '.tooltip': {
       position: "fixed",
@@ -164,6 +164,56 @@ const plugin = Plugin(function({ addBase, config, theme }) {
 
     '.tooltip.active': {
       transform: 'scale(1)',
+    },
+
+    '.slidedown-enter-active, .slidedown-leave-active': {
+      transition: 'all 300ms cubic-bezier(0.25, 1, 0.5, 1)',
+      transform: 'translate3d(0, 0, 0)'
+    },
+
+    '.slidedown-enter-from, .slidedown-leave-to': {
+      opacity: 0,
+      transform: 'translate3d(0, -10px, 0)'
+    },
+
+    '.slideup-enter-active, .slideup-leave-active': {
+      transition: 'all 300ms cubic-bezier(0.25, 1, 0.5, 1)',
+      transform: 'translate3d(0, 0, 0)'
+    },
+
+    '.slideup-enter-from, .slideup-leave-to': {
+      opacity: 0,
+      transform: 'translate3d(0, 10px, 0)'
+    },
+
+    '.slideleft-enter-active, .slideleft - leave - active': {
+      transition: 'all 300ms cubic-bezier(0.25, 1, 0.5, 1)',
+      transform: 'translate3d(0, 0, 0)'
+    },
+
+    '.slideleft-enter-from, .slideleft-leave-to': {
+      opacity: 0,
+      transform: 'translate3d(10px, 0, 0)'
+    },
+
+    '.slideright-enter-active, .slideright-leave-active': {
+      transition: 'all 300ms cubic-bezier(0.25, 1, 0.5, 1)',
+      transform: 'translate3d(0, 0, 0)'
+    },
+
+    '.slideright-enter-from, .slideright-leave-to': {
+      opacity: 0,
+      transform: 'translate3d(-10px, 0, 0)'
+    },
+
+    '.slideout-enter-active, .slideout-leave-active': {
+      transition: 'all 300ms cubic-bezier(0.25, 1, 0.5, 1)',
+      transform: 'scale(1)'
+    },
+
+    '.slideout-enter-from, .slideout-leave-to': {
+      opacity: 0,
+      transform: 'scale(.9)'
     }
 
   })

package/src/widgets/AhrefSetting.vue

@@ -2,10 +2,6 @@
 	<div :class="$style.comp">
 
 		<div class="flex flex-col gap-4">
-      <div>
-        <strong class="flex-1 text-text-400">Ahref</strong>
-        <div class="h-[1px] bg-text-100 mt-2"></div>
-      </div>
 
       <div>
         <label class="flex-1 text-text-400">Text</label>