unika-components 1.0.183 → 1.0.184

package/dist/unika-components.css

@@ -1,7 +1,36 @@
-
-.uni-image-component {
-  max-width: 100%;
-}
+
+  .uni-video-component {
+    position: relative;
+    text-align: center;
+  }
+  .play-pause-button {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    cursor: pointer;
+    font-size: 2rem;
+    color: #fff;
+    background: rgba(0, 0, 0, 0.6);
+    border-radius: 50%;
+    padding: 10px;
+    transition: background 0.3s;
+  }
+  .play-pause-button:hover {
+    background: rgba(0, 0, 0, 0.8);
+  }
+
+
+.uni-calendar-component {
+
+}
+.slot-number {
+  position: absolute;
+  bottom: 2px;
+  left: 7px;
+  font-size: 12px;
+  color: #666
+}
 
 h2.uni-text-component, p.uni-text-component {
   margin-bottom: 0;
@@ -14,28 +43,6 @@ button.uni-text-component {
   box-sizing: border-box;
   white-space: pre-wrap;
 }
-
-.like-button {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  cursor: pointer;
-}
-
-.icon-heart {
-  font-size: 24px;
-  color: #e74c3c;
-}
-
-.liked {
-  color: #f00; /* 更改颜色以示已赞 */
-}
-
-.like-count {
-  margin-top: 4px;
-  font-size: 16px;
-  color: #333;
-}
 
  .slide-guide {
     position: absolute;
@@ -109,39 +116,32 @@ body, html {
         transform: translate3d(-50%, -50%, 0);
     }
 }
+
+.uni-image-component {
+  max-width: 100%;
+}
 
+.like-button {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer;
+}
 
-.uni-calendar-component {
-
+.icon-heart {
+  font-size: 24px;
+  color: #e74c3c;
 }
-.slot-number {
-  position: absolute;
-  bottom: 2px;
-  left: 7px;
-  font-size: 12px;
-  color: #666
+
+.liked {
+  color: #f00; /* 更改颜色以示已赞 */
 }
 
-  .uni-video-component {
-    position: relative;
-    text-align: center;
-  }
-  .play-pause-button {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    cursor: pointer;
-    font-size: 2rem;
-    color: #fff;
-    background: rgba(0, 0, 0, 0.6);
-    border-radius: 50%;
-    padding: 10px;
-    transition: background 0.3s;
-  }
-  .play-pause-button:hover {
-    background: rgba(0, 0, 0, 0.8);
-  }
+.like-count {
+  margin-top: 4px;
+  font-size: 16px;
+  color: #333;
+}
 
 .effect {
   width: 100%;
@@ -196,6 +196,10 @@ body, html {
   max-width: 100%;
   max-height: 100%;
 }
+
+.uni-svg-component {
+  display: inline-block;
+}
 
   .uni-build-up-component {
   }

package/dist/unika-components.esm.js

@@ -94318,7 +94318,7 @@ axios.default = axios;
 var axios$1 = axios;
 
 const defaultProps = transformToComponentProps(componentsDefaultProps['uni-svg'].props, isEditingProp);
-const defaultStyles = without$1(Object.keys(componentsDefaultProps['uni-svg'].props), 'actionType', 'url', 'color', 'svgSrc');
+const defaultStyles = without$1(Object.keys(svgDefaultProps), 'actionType', 'url', 'color', 'svgSrc');
 var script = defineComponent({
     name: 'uni-svg',
     props: {
@@ -94328,35 +94328,39 @@ var script = defineComponent({
         const styleProps = useStylePick(props, defaultStyles);
         const handleClick = useComponentClick(props);
         const svgContent = ref('');
-        // Function to fetch SVG content from the URL
         const fetchSvg = (url) => {
-            try {
-                const response = axios$1.get(url, {
-                    headers: {
-                        Accept: 'image/svg+xml'
-                    }
-                });
-                return response;
-            }
-            catch (error) {
+            return axios$1.get(url, {
+                headers: {
+                    Accept: 'image/svg+xml'
+                }
+            }).then(response => response.data)
+                .catch(error => {
                 console.error('Error fetching SVG:', error);
                 return '';
+            });
+        };
+        const updateSvgColor = (svg, color, width, height) => {
+            const parser = new DOMParser();
+            const svgDoc = parser.parseFromString(svg, 'image/svg+xml');
+            const svgElement = svgDoc.getElementsByTagName('svg')[0];
+            const paths = svgDoc.getElementsByTagName('path');
+            for (let i = 0; i < paths.length; i++) {
+                paths[i].setAttribute('fill', color);
             }
+            if (svgElement) {
+                svgElement.setAttribute('width', width);
+                svgElement.setAttribute('height', height);
+            }
+            return new XMLSerializer().serializeToString(svgDoc);
         };
-        // Function to load and color the SVG
-        const loadSvg = (svgSrc) => {
-            fetchSvg(svgSrc);
-            // if (svg) {
-            //   svgContent.value = updateSvgColor(svg, props.color, props.width, props.height)
-            // }
+        const loadSvg = () => {
+            fetchSvg(props.svgSrc).then(svg => {
+                if (svg) {
+                    svgContent.value = updateSvgColor(svg, props.color, props.width, props.height);
+                }
+            });
         };
-        // watch(() => props.svgSrc, loadSvg, { immediate: true })
-        // watch(() => props.color, loadSvg)
-        // watch(() => props.width, loadSvg)
-        // watch(() => props.height, loadSvg)
-        watch(() => props.svgSrc, (newValue, oldValue) => {
-            loadSvg(newValue);
-        }, { deep: true });
+        watch([() => props.svgSrc, () => props.color, () => props.width, () => props.height], loadSvg, { immediate: true });
         return {
             styleProps,
             handleClick,
@@ -94379,6 +94383,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 }
 
 script.render = render;
+script.__scopeId = "data-v-42564b0f";
 script.__file = "src/components/UniSvg/UniSvg.vue";
 
 script.install = (app) => {

package/dist/unika-components.umd.js

@@ -94324,7 +94324,7 @@ summary tabindex target title type usemap value width wmode wrap`;
   var axios$1 = axios;
 
   const defaultProps = transformToComponentProps(componentsDefaultProps['uni-svg'].props, isEditingProp);
-  const defaultStyles = without$1(Object.keys(componentsDefaultProps['uni-svg'].props), 'actionType', 'url', 'color', 'svgSrc');
+  const defaultStyles = without$1(Object.keys(svgDefaultProps), 'actionType', 'url', 'color', 'svgSrc');
   var script = vue.defineComponent({
       name: 'uni-svg',
       props: {
@@ -94334,35 +94334,39 @@ summary tabindex target title type usemap value width wmode wrap`;
           const styleProps = useStylePick(props, defaultStyles);
           const handleClick = useComponentClick(props);
           const svgContent = vue.ref('');
-          // Function to fetch SVG content from the URL
           const fetchSvg = (url) => {
-              try {
-                  const response = axios$1.get(url, {
-                      headers: {
-                          Accept: 'image/svg+xml'
-                      }
-                  });
-                  return response;
-              }
-              catch (error) {
+              return axios$1.get(url, {
+                  headers: {
+                      Accept: 'image/svg+xml'
+                  }
+              }).then(response => response.data)
+                  .catch(error => {
                   console.error('Error fetching SVG:', error);
                   return '';
+              });
+          };
+          const updateSvgColor = (svg, color, width, height) => {
+              const parser = new DOMParser();
+              const svgDoc = parser.parseFromString(svg, 'image/svg+xml');
+              const svgElement = svgDoc.getElementsByTagName('svg')[0];
+              const paths = svgDoc.getElementsByTagName('path');
+              for (let i = 0; i < paths.length; i++) {
+                  paths[i].setAttribute('fill', color);
               }
+              if (svgElement) {
+                  svgElement.setAttribute('width', width);
+                  svgElement.setAttribute('height', height);
+              }
+              return new XMLSerializer().serializeToString(svgDoc);
           };
-          // Function to load and color the SVG
-          const loadSvg = (svgSrc) => {
-              fetchSvg(svgSrc);
-              // if (svg) {
-              //   svgContent.value = updateSvgColor(svg, props.color, props.width, props.height)
-              // }
+          const loadSvg = () => {
+              fetchSvg(props.svgSrc).then(svg => {
+                  if (svg) {
+                      svgContent.value = updateSvgColor(svg, props.color, props.width, props.height);
+                  }
+              });
           };
-          // watch(() => props.svgSrc, loadSvg, { immediate: true })
-          // watch(() => props.color, loadSvg)
-          // watch(() => props.width, loadSvg)
-          // watch(() => props.height, loadSvg)
-          vue.watch(() => props.svgSrc, (newValue, oldValue) => {
-              loadSvg(newValue);
-          }, { deep: true });
+          vue.watch([() => props.svgSrc, () => props.color, () => props.width, () => props.height], loadSvg, { immediate: true });
           return {
               styleProps,
               handleClick,
@@ -94385,6 +94389,7 @@ summary tabindex target title type usemap value width wmode wrap`;
   }
 
   script.render = render;
+  script.__scopeId = "data-v-42564b0f";
   script.__file = "src/components/UniSvg/UniSvg.vue";
 
   script.install = (app) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "unika-components",
-  "version": "1.0.183",
+  "version": "1.0.184",
   "private": false,
   "main": "dist/unika-components.umd.js",
   "module": "dist/unika-components.esm.js",