@fewangsit/wangsvue-presets 1.0.80 → 1.0.81-alpha.1

package/wangsvue/fileupload/index.js

@@ -1,31 +1,23 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = {
-    root: {
-        'data-wv-name': 'fileupload',
-        'data-wv-section': 'root',
-    },
-    wrapper: {
-        'class': ['w-full'],
-        'data-wv-section': 'wrapper',
-    },
-    input: function (_a) {
-        var state = _a.state;
-        return ({
-            class: [
-                {
-                    '': state.fileName != null,
-                },
-            ],
-        });
-    },
-    buttonupload: function (_a) {
-        var props = _a.props;
-        return ({
-            class: [{ 'mb-[21px]': props.fileExtensions || props.fileRequirements }],
-        });
-    },
-    requirements: {
-        class: 'flex justify-start',
-    },
-};
+export default {
+  root: {
+    'data-wv-name': 'fileupload',
+    'data-wv-section': 'root',
+  },
+  wrapper: {
+    'class': ['w-full'],
+    'data-wv-section': 'wrapper',
+  },
+  input: ({ state }) => ({
+    class: [
+      {
+        '': state.fileName != null,
+      },
+    ],
+  }),
+  buttonupload: ({ props }) => ({
+    class: [{ 'mb-[21px]': props.fileExtensions || props.fileRequirements }],
+  }),
+  requirements: {
+    class: 'flex justify-start',
+  },
+};

package/wangsvue/form/index.js

@@ -1,44 +1,42 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = {
-    // :class="['ts-form', { 'sticky-buttons': props.stickyButtons }]"
-    'root': function () { return ({
-        'class': [
-            'flex flex-col gap-3 text-general-900 text-[0.75rem] font-medium leading-[16.8px]',
-        ],
-        'data-wv-section': 'root',
-    }); },
-    'fields': {
-        class: ['grid gap-y-3 gap-x-6'],
-    },
-    'fields-wrapper': {
-        'class': ['grid gap-y-3 gap-x-6'],
-        'data-wv-section': 'fields',
-    },
-    'footer': {
-        class: ['flex flex-col self-end gap-3'],
-    },
-    'action-buttons': {
-        'class': ['relative flex flex-col items-end justify-end gap-1'],
-        'data-wv-section': 'action-buttons',
-    },
-    'button-wrapper': {
-        'class': ['flex items-end justify-end gap-1'],
-        'data-wv-section': 'button-wrapper',
-    },
-    'cancel-button': {
-        'data-wv-section': 'cancel-button',
-    },
-    'clear-button': {
-        'data-wv-section': 'clear-button',
-    },
-    'submit-button': {
-        'data-wv-section': 'submit-button',
-    },
-    'staycheckbox': {
-        class: ['cursor-pointer flex gap-2 w-max ml-auto items-center justify-end'],
-    },
-    'validator-message': {
-        class: ['static w-max transform-none'],
-    },
-};
+export default {
+  // :class="['ts-form', { 'sticky-buttons': props.stickyButtons }]"
+  'root': () => ({
+    'class': [
+      'flex flex-col gap-3 text-general-900 text-[0.75rem] font-medium leading-[16.8px]',
+    ],
+    'data-wv-section': 'root',
+  }),
+  'fields': {
+    class: ['grid gap-y-3 gap-x-6'],
+  },
+  'fields-wrapper': {
+    'class': ['grid gap-y-3 gap-x-6'],
+    'data-wv-section': 'fields',
+  },
+  'footer': {
+    class: ['flex flex-col self-end gap-3'],
+  },
+  'action-buttons': {
+    'class': ['relative flex flex-col items-end justify-end gap-1'],
+    'data-wv-section': 'action-buttons',
+  },
+  'button-wrapper': {
+    'class': ['flex items-end justify-end gap-1'],
+    'data-wv-section': 'button-wrapper',
+  },
+  'cancel-button': {
+    'data-wv-section': 'cancel-button',
+  },
+  'clear-button': {
+    'data-wv-section': 'clear-button',
+  },
+  'submit-button': {
+    'data-wv-section': 'submit-button',
+  },
+  'staycheckbox': {
+    class: ['cursor-pointer flex gap-2 w-max ml-auto items-center justify-end'],
+  },
+  'validator-message': {
+    class: ['static w-max transform-none'],
+  },
+};

package/wangsvue/global.js

@@ -1,14 +1,87 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ringClass = void 0;
-exports.ringClass = [
-    {
-        'ring-1 p-[1px]': navigator.userAgent.includes('Firefox'),
-        'ring-[0.5px] p-[0.5px]': !navigator.userAgent.includes('Firefox'),
-    },
-    'ring-inset',
-    'ring-general-400',
-];
-exports.default = {
-    css: "\n    *[data-pd-ripple=\"true\"]{\n        overflow: hidden;\n        position: relative;\n    }\n    span[data-p-ink-active=\"true\"]{\n        animation: ripple 0.4s linear;\n    }\n    @keyframes ripple {\n        100% {\n            opacity: 0;\n            transform: scale(2.5);\n        }\n    }\n\n    .progress-spinner-circle {\n        stroke-dasharray: 89, 400;\n        stroke-dashoffset: 0;\n        animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite;\n        stroke-linecap: round;\n    }\n\n    @keyframes p-progress-spinner-dash{\n        0% {\n            stroke-dasharray: 1, 400;\n            stroke-dashoffset: 0;\n        }\n\n        50% {\n            stroke-dasharray: 89, 400;\n            stroke-dashoffset: -35px;\n        }\n        100% {\n            stroke-dasharray: 89, 400;\n            stroke-dashoffset: -124px;\n        }\n    }\n    @keyframes p-progress-spinner-color {\n        100%, 0% {\n            stroke: #ff5757;\n        }\n        40% {\n            stroke: #696cff;\n        }\n        66% {\n            stroke: #1ea97c;\n        }\n        80%, 90% {\n            stroke: #cc8925;\n        }\n    }\n\n    .progressbar-value-animate::after {\n        will-change: left, right;\n        animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;\n    }\n    .progressbar-value-animate::before {\n        will-change: left, right;\n        animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;\n    }\n\n    @keyframes p-progressbar-indeterminate-anim {\n        0% {\n            left: -35%;\n            right: 100%;\n        }\n        60% {\n            left: 100%;\n            right: -90%;\n        }\n        100% {\n            left: 100%;\n            right: -90%;\n        }\n    }\n",
-};
+export const ringClass = [
+  {
+    'ring-1 p-[1px]': navigator.userAgent.includes('Firefox'),
+    'ring-[0.5px] p-[0.5px]': !navigator.userAgent.includes('Firefox'),
+  },
+  'ring-inset',
+  'ring-general-400',
+];
+
+export default {
+  css: `
+    *[data-pd-ripple="true"]{
+        overflow: hidden;
+        position: relative;
+    }
+    span[data-p-ink-active="true"]{
+        animation: ripple 0.4s linear;
+    }
+    @keyframes ripple {
+        100% {
+            opacity: 0;
+            transform: scale(2.5);
+        }
+    }
+
+    .progress-spinner-circle {
+        stroke-dasharray: 89, 400;
+        stroke-dashoffset: 0;
+        animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite;
+        stroke-linecap: round;
+    }
+
+    @keyframes p-progress-spinner-dash{
+        0% {
+            stroke-dasharray: 1, 400;
+            stroke-dashoffset: 0;
+        }
+
+        50% {
+            stroke-dasharray: 89, 400;
+            stroke-dashoffset: -35px;
+        }
+        100% {
+            stroke-dasharray: 89, 400;
+            stroke-dashoffset: -124px;
+        }
+    }
+    @keyframes p-progress-spinner-color {
+        100%, 0% {
+            stroke: #ff5757;
+        }
+        40% {
+            stroke: #696cff;
+        }
+        66% {
+            stroke: #1ea97c;
+        }
+        80%, 90% {
+            stroke: #cc8925;
+        }
+    }
+
+    .progressbar-value-animate::after {
+        will-change: left, right;
+        animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+    }
+    .progressbar-value-animate::before {
+        will-change: left, right;
+        animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+    }
+
+    @keyframes p-progressbar-indeterminate-anim {
+        0% {
+            left: -35%;
+            right: 100%;
+        }
+        60% {
+            left: 100%;
+            right: -90%;
+        }
+        100% {
+            left: 100%;
+            right: -90%;
+        }
+    }
+`,
+};