@exakt/ui 0.0.36 → 0.0.38

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "exakt-ui",
   "configKey": "exakt",
-  "version": "0.0.36"
+  "version": "0.0.38"
 }

package/dist/module.mjs

@@ -1,4 +1,4 @@
-import { defineNuxtModule, createResolver, addPlugin, extendViteConfig, addComponentsDir } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, addPlugin, extendViteConfig, addImportsSources, addComponentsDir } from '@nuxt/kit';
 import fs from 'fs';
 
 const defaults = {
@@ -69,6 +69,10 @@ const module = defineNuxtModule({
         }
       });
     });
+    addImportsSources({
+      from: "material-symbols",
+      imports: ["material-symbols"]
+    });
     nuxt.options.css.push(resolver.resolve("./runtime/css/main.scss"));
     nuxt.options.css.push(resolver.resolve("./runtime/css/util.scss"));
     nuxt.options.css.push(

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

@@ -1,12 +1,13 @@
 <template>
   <div class="flex-center color-red">
     <e-icon
-      :icon="mdiAlert"
+      
       size="19"
       class="mr-2"
-    /><small><slot /></small>
+    >
+      warning
+    </e-icon><small><slot /></small>
   </div>
 </template>
 <script setup lang="ts">
-import { mdiAlert } from "@mdi/js";
 </script>

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

@@ -14,13 +14,13 @@
     <div v-else>
       <e-icon
         :size="props.size"
-        :icon="mdiAccountCircle"
-      />
+      >
+        person_circle
+      </e-icon>
     </div>
   </div>
 </template>
 <script setup lang="ts">
-import { mdiAccountCircle } from "@mdi/js";
 
 const props = withDefaults(defineProps<{
   src?: string;

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

@@ -41,7 +41,7 @@
   </button>
 </template>
 <script lang="ts" setup>
-import { computed, useNuxtApp } from "#imports";
+import { computed, useNuxtApp,  } from "#imports";
 //import { IonSpinner } from "@ionic/vue";
 const { $exakt } = useNuxtApp();
 const props = withDefaults(

package/dist/runtime/components/e/chat-renderer.vue

@@ -19,11 +19,10 @@
   </div>
 </template>
 <script setup lang="ts">
-import { mdiDelete, mdiFlag, mdiMinusCircle } from "@mdi/js";
 import { reactive, computed } from "#imports";
 
 const status = reactive({ dropdown: { visible: false, x: 0, y: 0 } });
-const items = [{ icon: mdiDelete, name: "Delete" }, { icon: mdiMinusCircle, name: "Delete just for me" }, { icon: mdiFlag, name: "Dox" }];
+const items = [{ icon: 'delete', name: "Delete" }, { icon: 'remove', name: "Delete just for me" }, { icon: 'flag', name: "Dox" }];
 
 const openDropdown = ({ clientX, clientY }: MouseEvent) => {
     status.dropdown.visible = true;

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

@@ -38,9 +38,10 @@
             <e-icon
               v-if="item.icon"
               :size="20"
-              :icon="item.icon"
               class="mr-2"
-            />
+            >
+              {{ item.icon }}
+            </e-icon>
             {{ item.name }}
           </e-btn>
         </component>

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

@@ -1,30 +1,61 @@
 <template>
-  <svg
-    :viewBox="'0 0 ' + 24 + ' ' + 24"
-    :height="size"
-    :width="size"
-    :fill="color"
+  <div
+    class="material-symbol"
+    :icon-style="iconStyle"
   >
-    <path :d="icon" />
-  </svg>
+    <slot />
+  </div>
 </template>
 <script setup lang="ts">
- withDefaults(
+import { computed } from "#imports";
+
+const props = withDefaults(
   defineProps<{
-    icon: string;
-    color?: string;
-    size?: number | string;
+    iconStyle?: 'outlined' | 'rounded' | 'sharp', size?: number|`${number}`, fill?:boolean|"0"|"1"|`${boolean}`, grade?:number|`${number}`, weight?: number|`${number}`
   }>(),
-  {
-    icon: "",
-    color: "",
-    size: "21",
-  }
+  { iconStyle: 'rounded', size: 24, fill:false, weight: 400, grade:0}
 );
 
+const sizePx = computed(() => props.size + "px")
+const fillNum = computed(()=> {
+  if([true, "true", "1"].includes(props.fill)){
+    return 1;
+  }
+  return 0;
+})
+
 </script>
-<style scoped lang="css">
-svg {
-  fill: currentColor;
+<style lang="scss">
+.material-symbol {
+  font-weight: normal;
+  font-style: normal;
+  /* Preferred icon size */
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+}
+
+.material-symbol[icon-style="outlined"] {
+  font-family: 'Material Symbols Outlined';
+}
+
+.material-symbol[icon-style="rounded"] {
+  font-family: 'Material Symbols Rounded';
+}
+
+.material-symbol[icon-style="sharp"] {
+  font-family: 'Material Symbols Sharp';
 }
 </style>
+<style scoped lang="scss">
+.material-symbol {
+  font-size: v-bind('sizePx');
+  width: v-bind('sizePx');
+  height: v-bind('sizePx');
+  font-variation-settings: 'FILL' v-bind('fillNum'), 'wght' v-bind('props.weight'), 'GRAD' v-bind('props.grade'), 'opsz' v-bind('props.size');
+}
+</style>

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

@@ -8,9 +8,11 @@
   >
     <e-icon
       v-if="icon"
-      :icon="icon"
+      
       :size="size"
-    />
+    >
+      {{ icon }}
+    </e-icon>
     <slot />
   </e-btn>
 </template>

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

@@ -8,10 +8,12 @@
   >
     <e-icon
       v-if="icon"
-      :icon="icon"
       class="mr-2"
-      size="21"
-    />
+      size="24"
+      :fill="inputState.focused"
+    >
+      {{ icon }}
+    </e-icon>
     <textarea
       v-if="type === 'textarea'"
       ref="input"

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

@@ -19,10 +19,12 @@
             :class="{ 'mr-2': label, 'mx-4': !label }"
           >
             <e-icon
-              :icon="icon"
+              
               class="icon"
               :size="size"
-            />
+            >
+              {{ icon }}
+            </e-icon>
             <transition name="fade">
               <div
                 v-if="alert"

package/dist/runtime/components/e/nav/sidebar-btn.vue

@@ -12,9 +12,11 @@
         class="e-sidebar-btn-icon"
       >
         <e-icon
-          :icon="icon"
+      
           size="22"
-        />
+        >
+          {{ icon }}
+        </e-icon>
       </div>
       <div class="ml-4 d-flex flex-column e-sidebar-btn-text">
         <div class="mb-1">

package/dist/runtime/components/e/nav/sidebar-icon-btn.vue

@@ -8,14 +8,15 @@
       class="pa-0 ma-0 e-sidebar-icon"
     >
       <e-icon
-        :icon="mdiHome"
+       
         size="22"
-      />
+      >
+        home
+      </e-icon>
     </e-btn>
   </nuxt-link>
 </template>
 <script lang="ts" setup>
-import { mdiHome } from '@mdi/js';
 </script>
 <style lang="scss">
 

package/dist/runtime/components/e/nav/sidebar.vue

@@ -15,10 +15,9 @@
           background="transparent"
           class="pa-0 ma-0 e-sidebar-btn"
         >
-          <e-icon
-            :icon="item.icon"
-            size="22"
-          />
+          <e-icon size="22">
+            {{ item.icon }}
+          </e-icon>
         </e-btn>
       </nuxt-link>
     </div>
@@ -41,10 +40,9 @@
             v-if="item.icon"
             class="icon"
           >
-            <e-icon
-              :icon="item.icon"
-              size="22"
-            />
+            <e-icon size="22">
+              {{ item.icon }}
+            </e-icon>
           </div>
           <div class="ml-4 d-flex flex-column text">
             <div :class="{ 'mb-1': item.subtitle }">

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

@@ -2,12 +2,11 @@
   <e-icon-button
     class="rounded pa-1"
     size="20"
-    :icon="modelValue ? mdiEye : mdiEyeOff"
+    :icon="modelValue ? 'visibility' : 'visibility_off'"
     @click.stop="emit('update:modelValue', !modelValue)"
   />
 </template>
 <script setup lang="ts">
-import { mdiEye, mdiEyeOff } from "@mdi/js";
 const emit = defineEmits(["update:modelValue"]);
 
 withDefaults(

package/dist/runtime/plugin.d.ts

@@ -1,2 +1,3 @@
+import 'material-symbols';
 declare const _default: any;
 export default _default;

package/dist/runtime/plugin.mjs

@@ -1,4 +1,5 @@
 import { defineNuxtPlugin } from "#app";
+import "material-symbols";
 export default defineNuxtPlugin(() => {
   return {
     provide: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exakt/ui",
-  "version": "0.0.36",
+  "version": "0.0.38",
   "description": "A UI library for Nuxt.js",
   "license": "MIT",
   "type": "module",
@@ -18,7 +18,7 @@
   ],
   "scripts": {
     "prepack": "nuxt-module-build",
-    "dev": "nuxi dev playground",
+    "dev": "nuxi dev playground --host 0.0.0.0",
     "dev:build": "nuxi build playground",
     "dev:prepare": "nuxt-module-build --stub && nuxi prepare playground",
     "release": "npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
@@ -27,10 +27,10 @@
     "test:watch": "vitest watch"
   },
   "dependencies": {
-    "@mdi/js": "^7.1.96",
     "@nuxt/kit": "^3.2.3",
     "blurhash": "^2.0.5",
     "lodash-es": "^4.17.21",
+    "material-symbols": "latest",
     "sass": "^1.62.1"
   },
   "devDependencies": {
@@ -45,7 +45,7 @@
     "eslint": "^8.35.0",
     "eslint-plugin-unused-imports": "^3.0.0",
     "mkdist": "^1.2.0",
-    "nuxt": "^3.7.1",
+    "nuxt": "^3.12.4",
     "vitest": "^0.29.2"
   },
   "directories": {
@@ -68,4 +68,4 @@
   },
   "homepage": "https://github.com/wd-4000/exakt#readme",
   "packageManager": "yarn@3.5.1"
-}
+}