@exakt/ui 0.0.52 → 0.0.54

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/module.json +1 -1
  2. package/dist/runtime/components/e/btn.vue +1 -4
  3. package/dist/runtime/components/e/dropdown.vue +3 -0
  4. package/dist/runtime/components/e/input/text.vue +7 -3
  5. package/dist/runtime/components/e/loading-spinner.vue +38 -27
  6. package/package.json +1 -1
package/dist/module.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "exakt-ui",
3
3
  "configKey": "exakt",
4
- "version": "0.0.52"
4
+ "version": "0.0.54"
5
5
  }
package/dist/runtime/components/e/btn.vue CHANGED
@@ -25,7 +25,7 @@
25
25
  v-if="loading"
26
26
  class="load-overlay"
27
27
  >
28
- <e-loading-spinner />
28
+ <e-loading-spinner size="1.25" />
29
29
  </div>
30
30
  <span
31
31
  class="actual-content d-flex fullwidth"
@@ -245,9 +245,6 @@ const textColor = computed(() => {
245
245
  }
246
246
  }
247
247
 
248
- .loading-spinner {
249
- max-height: 1rem;
250
- }
251
248
 
252
249
  .load-overlay {
253
250
  position: absolute;
package/dist/runtime/components/e/dropdown.vue CHANGED
@@ -178,6 +178,9 @@ const currentItem = computed({
178
178
  const select = (i: number) => {
179
179
  visibleComputed.value = false;
180
180
  currentItem.value = i;
181
+ if(props.items[i].callback){
182
+ props.items[i].callback();
183
+ }
181
184
  };
182
185
 
183
186
  const onActivatorClick = () => {
package/dist/runtime/components/e/input/text.vue CHANGED
@@ -26,6 +26,7 @@
26
26
  ref="input"
27
27
  v-model="currentText"
28
28
  class="input"
29
+ :name="name"
29
30
  :placeholder="placeholder"
30
31
  autocomplete="off"
31
32
  auto-grow
@@ -40,6 +41,7 @@
40
41
  v-model="currentText"
41
42
  :disabled="disabled"
42
43
  :type="type"
44
+ :name="name"
43
45
  :autocomplete="autocomplete"
44
46
  :spellcheck="spellcheck"
45
47
  class="input"
@@ -83,9 +85,11 @@ const focus = () => {
83
85
  input.value.focus();
84
86
  };
85
87
 
88
+ const internalText = ref('')
89
+
86
90
  const currentText = computed({
87
- get: () => props.modelValue,
88
- set: (value) => emit("update:modelValue", value),
91
+ get: () => props.modelValue ? props.modelValue : internalText.value,
92
+ set: (value) => { if (props.modelValue) { emit("update:modelValue", value) } else { internalText.value = value } },
89
93
  });
90
94
 
91
95
  const props = withDefaults(
@@ -93,7 +97,7 @@ const props = withDefaults(
93
97
  icon?: string;
94
98
  label?: string;
95
99
  placeholder?: string;
96
-
100
+ name?: string;
97
101
  modelValue?: string;
98
102
  solid?: boolean;
99
103
  rounded?: boolean;
package/dist/runtime/components/e/loading-spinner.vue CHANGED
@@ -1,10 +1,9 @@
1
1
  <template>
2
- <div class="cont flex-center">
2
+ <div class="cont d-flex flex-center">
3
3
  <svg
4
4
  class="spinner"
5
- width="65px"
6
- height="65px"
7
- viewBox="0 0 66 66"
5
+ viewBox="0 0 66 66"
6
+
8
7
  xmlns="http://www.w3.org/2000/svg"
9
8
  >
10
9
  <circle
@@ -28,58 +27,70 @@
28
27
  </svg>
29
28
  </div>
30
29
  </template>
30
+ <script lang="ts" setup>
31
+ import { computed } from '#imports';
32
+
33
+ const props = withDefaults(defineProps<{ size?: number | `${number}` }>(), { size: 2 });
34
+ const sizeRem = computed(()=>props.size+'rem')
35
+ </script>
31
36
  <style scoped lang="scss">
32
37
  svg {
33
38
  stroke: currentColor;
34
39
  }
35
40
 
36
-
37
-
38
-
39
-
40
41
  $offset: 120;
41
42
  $duration: 1.5s;
42
43
 
43
- .cont{
44
+ .cont {
44
45
  position: relative;
45
- height: 100%;
46
- width:100%;
46
+ height: v-bind('sizeRem');
47
+ width: v-bind('sizeRem');
47
48
  }
49
+
48
50
  .spinner {
49
51
  animation: rotator $duration linear infinite;
52
+
50
53
  position: absolute;
51
54
  z-index: 2;
52
- top:0;
53
- height: 100%;
54
- width:100%;
55
55
  aspect-ratio: 1;
56
+ top: 0;
57
+ height: 100%;
58
+ width: 100%;
56
59
  }
57
60
 
58
61
  @keyframes rotator {
59
- 0% { transform: rotate(0deg); }
60
- 100% { transform: rotate(270deg); }
62
+ 0% {
63
+ transform: rotate(0deg);
64
+ }
65
+
66
+ 100% {
67
+ transform: rotate(270deg);
68
+ }
61
69
  }
62
70
 
63
71
  .path {
64
72
  stroke-dasharray: $offset;
65
73
  stroke-dashoffset: 0;
66
74
  transform-origin: center;
67
- animation:
68
- dash $duration ease-in-out infinite,
75
+ animation: dash $duration ease-in-out infinite,
69
76
 
70
77
  }
71
78
 
72
79
 
73
80
 
74
81
  @keyframes dash {
75
- 0% { stroke-dashoffset: $offset; }
76
- 50% {
77
- stroke-dashoffset: calc($offset / 4);
78
- transform:rotate(5deg);
79
- }
80
- 100% {
81
- stroke-dashoffset: $offset;
82
- transform:rotate(450deg);
83
- }
82
+ 0% {
83
+ stroke-dashoffset: $offset;
84
+ }
85
+
86
+ 50% {
87
+ stroke-dashoffset: calc($offset / 4);
88
+ transform: rotate(5deg);
89
+ }
90
+
91
+ 100% {
92
+ stroke-dashoffset: $offset;
93
+ transform: rotate(450deg);
94
+ }
84
95
  }
85
96
  </style>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@exakt/ui",
3
- "version": "0.0.52",
3
+ "version": "0.0.54",
4
4
  "description": "A UI library for Nuxt.js",
5
5
  "license": "MIT",
6
6
  "type": "module",