@exakt/ui 0.0.6 → 0.0.9

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "exakt-ui",
   "configKey": "exakt",
-  "version": "0.0.6"
+  "version": "0.0.9"
 }

package/dist/runtime/components/e/btn.vue

@@ -1,6 +1,6 @@
 <template>
   <button
-    class="e-btn "
+    class="e-btn"
     :style="{ width, justifyContent: justifyWrapper }"
     :type="type"
     :disabled="disabled || loading"
@@ -11,7 +11,7 @@
       block,
       rounded: solid,
       'e-disabled': disabled,
-      'my-2':solid,
+      'my-2': solid,
       loading,
       fab,
       loadingGradient,
@@ -36,14 +36,13 @@
         <e-loading-spinner />
       </div>
       <span class="actual-content flex-center">
-
         <slot />
       </span>
     </div>
   </button>
 </template>
 <script lang="ts" setup>
-import { computed, reactive, ref, onMounted } from "vue";
+import { computed, useNuxtApp } from "#imports";
 //import { IonSpinner } from "@ionic/vue";
 const { $exakt } = useNuxtApp();
 const props = withDefaults(
@@ -62,15 +61,16 @@ const props = withDefaults(
     disabled?: boolean;
     type?: "button" | "submit" | "reset";
   }>(),
-  { type: "button", background: "primary", solid: true }
+  {
+    type: "button",
+    background: "primary",
+    solid: true,
+    width: undefined,
+    justify: undefined,
+    color: undefined,
+  }
 );
 
-
-
-
-
-
-
 const justifyWrapper = computed(() => {
   if (props.justify === "space-between") {
     return "stretch";
@@ -104,7 +104,9 @@ const backgroundColorRgb = computed(() => {
   return parseColor(parsedBackgroundProp.value);
 });
 
-const parsedBackgroundProp = computed(() => $exakt.parseColor(props.background));
+const parsedBackgroundProp = computed(() =>
+  $exakt.parseColor(props.background)
+);
 
 const textColor = computed(() => {
   if (props.color) {
@@ -124,8 +126,8 @@ const textColor = computed(() => {
 });
 
 const hoverColor = computed(() => {
-  if (parsedBackgroundProp.value === 'transparent') {
-    return 'rgba(98, 98, 98, 0.15)';
+  if (parsedBackgroundProp.value === "transparent") {
+    return "rgba(98, 98, 98, 0.15)";
   }
 
   const rgb = backgroundColorRgb.value;
@@ -182,16 +184,14 @@ const hoverColor = computed(() => {
       transition: background 0.8s, color 0.5s, opacity 0.4s;
 
       .actual-content {
-
         opacity: 0.8;
-        transition: opacity 0.5s;;
+        transition: opacity 0.5s;
       }
     }
 
     .actual-content {
       opacity: 0;
     }
-
   }
 
   &:hover {

package/dist/runtime/components/e/container.vue

@@ -12,7 +12,17 @@
   </div>
 </template>
 <script setup lang="ts">
-defineProps(["noBtnPadding", "forceFullWidth"]);
+withDefaults(
+  defineProps<{
+    noBtnPadding: boolean;
+    forceFullWidth: boolean;
+
+  }>(),
+  {
+    noBtnPadding: false,
+    forceFullWidth:false
+  }
+);
 </script>
 <style lang="scss" scoped>
 .content {

package/dist/runtime/components/e/dialog.vue

@@ -28,11 +28,10 @@
 </template>
 
 <script setup lang="ts">
-const props = defineProps<{
+ defineProps<{
   modelValue: boolean;
 }>();
 const emit = defineEmits(["update:modelValue"]);
-const state = reactive({ active: false });
 </script>
 <style scoped lang="scss">
 .dialog-wrap {

package/dist/runtime/components/e/dropdown.vue

@@ -43,10 +43,9 @@
   </div>
 </template>
 <script setup lang="ts">
-
+import { computed, ref, reactive } from "#imports";
 import _ from "lodash";
 
-const { $platform } = useNuxtApp();
 
 function parseWidth(input: string | number) {
   const div = document.createElement("div");
@@ -84,7 +83,7 @@ const updatePosition = () => {
 
 const debouncedUpdatePosition = _.debounce(updatePosition, 200);
 
-const onClick = ({ pageX, pageY }:MouseEvent) => {
+const onClick = (/*{ pageX, pageY }:MouseEvent*/) => {
   state.active = !state.active;
 
   if (state.active) {

package/dist/runtime/components/e/focus-sheet.vue

@@ -11,7 +11,7 @@
   </div>
 </template>
 <script setup lang="ts">
-const props = defineProps<{
+/*const props =*/ defineProps<{
   modelValue: boolean;
   opaqueOnDesktop?: boolean;
 }>();

package/dist/runtime/components/e/icon.vue

@@ -9,7 +9,19 @@
   </svg>
 </template>
 <script setup lang="ts">
-defineProps(["icon", "size", "color"]);
+ withDefaults(
+  defineProps<{
+    icon: string;
+    color: string;
+    size: number | string;
+  }>(),
+  {
+    icon: "",
+    color: "",
+    size: "21",
+  }
+);
+
 </script>
 <style scoped>
 svg {

package/dist/runtime/components/e/image-lazy-view.vue

@@ -27,7 +27,6 @@
           class="rounded lv-blur fullsize border-rad-custom"
           :class="{ hidden: state.loaded, rounded: !borderRadius }"
         />
-        <!--     @transitionend.passive="transitionend" -->
       </div>
 
       <div
@@ -146,11 +145,7 @@ const dimensionFix = (value) => {
   return value;
 };
 
-const transitionend = () => {
-  if (state.loaded) {
-    state.renderBlur = false;
-  }
-};
+
 
 const onIntersect = (intersecting) => {
   if (intersecting && !state.intersected) {

package/dist/runtime/components/e/input/radio.vue

@@ -15,7 +15,7 @@
   </label>
 </template>
 <script lang="ts" setup>
-
+import {computed} from '#imports';
 const props = defineProps<{
   items: { [shot: string]: string }[];
   modelValue: number;

package/dist/runtime/components/e/input/text.vue

@@ -44,9 +44,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref, watch } from "vue";
-const input = ref<HTMLInputElement>();
-const emit = defineEmits(["update:modelValue"]);
+import { ref, watch, reactive, computed } from "#imports";
 
 const inputState = reactive({
   overtakeStyle: "",
@@ -54,15 +52,21 @@ const inputState = reactive({
   focused: false,
 });
 
+const input = ref<HTMLInputElement>();
+const emit = defineEmits(["update:modelValue"]);
+
 const focus = () => {
-  if(!input.value){
-    return
+  if (!input.value) {
+    return;
   }
   const length = input.value.value.length;
 
   // Not all input types support setSelectionRange
-  if(!inputState.focused && ['text', 'search', 'URL', 'tel', 'password'].includes(props.type)) {
-     input.value.setSelectionRange(length, length);
+  if (
+    !inputState.focused &&
+    ["text", "search", "URL", "tel", "password"].includes(props.type)
+  ) {
+    input.value.setSelectionRange(length, length);
   }
   input.value.focus();
 };
@@ -86,7 +90,15 @@ const props = withDefaults(
     spellcheck?: boolean;
     height?: string;
   }>(),
-  { icon: undefined, label: "Search", solid: false, type: "text" }
+  {
+    icon: undefined,
+    label: "Search",
+    solid: false,
+    type: "text",
+    modelValue: "",
+    autocomplete: "off",
+    height: "unset",
+  }
 );
 
 watch(
@@ -103,7 +115,7 @@ const getInputStyle = (prop: string) => {
   return c;
 };
 
-const transitionEnd = (a) => {
+const transitionEnd = () => {
   inputState.autofilled = !inputState.autofilled;
 
   if (inputState.autofilled) {
@@ -133,11 +145,11 @@ const transitionEnd = (a) => {
   width: 100%;
   outline: none;
   resize: none;
-  margin: var(--e-core-padding-x)/2;
+  margin: var(--e-core-padding-x) / 2;
   font-size: 1rem;
   color: var(--e-color-dark);
   font-family: var(--e-font-family);
-height:v-bind(height);
+  height: v-bind(height);
 
   &:-webkit-autofill {
     // Expose a hook for JavaScript when auto fill is shown.

package/dist/runtime/components/e/passwordEye.vue

@@ -9,5 +9,13 @@
 <script setup lang="ts">
 import { mdiEye, mdiEyeOff } from "@mdi/js";
 const emit = defineEmits(["update:modelValue"]);
-defineProps(["modelValue"]);
+
+withDefaults(
+  defineProps<{
+    modelValue: boolean;
+  }>(),
+  {
+    modelValue: false,
+  }
+);
 </script>

package/dist/runtime/components/e/progress/linear.vue

@@ -8,24 +8,26 @@
   </Transition>
 </template>
 <script setup lang="ts">
-const props = withDefaults(defineProps<{
-  modelValue: boolean;
-  position?: 'top' | 'bottom' | null;
-
-}>(), {
-  position: 'bottom'
-});
+import { computed } from "vue";
+const props = withDefaults(
+  defineProps<{
+    modelValue: boolean;
+    position?: "top" | "bottom" | null;
+  }>(),
+  {
+    position: "bottom",
+  }
+);
 
 const posClass = computed(() => {
-  if (props.position === 'top') {
-    return 'pos-top'
-  } else if (props.position === 'bottom') {
-    return 'pos-bottom'
-
+  if (props.position === "top") {
+    return "pos-top";
+  } else if (props.position === "bottom") {
+    return "pos-bottom";
   }
 
-  return null
-})
+  return null;
+});
 </script>
 <style scoped lang="scss">
 .pos-top,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exakt/ui",
-  "version": "0.0.6",
+  "version": "0.0.9",
   "description": "A UI library for Nuxt.js",
   "license": "MIT",
   "type": "module",
@@ -63,4 +63,4 @@
     "url": "https://github.com/wd-4000/exakt/issues"
   },
   "homepage": "https://github.com/wd-4000/exakt#readme"
-}
+}