@fewangsit/wangsvue-presets 1.0.82 → 1.0.84-alpha.0

package/wangsvue/fieldset/index.js

@@ -1,99 +1,87 @@
-export default {
-  root: {
-    class: [
-      'block',
-
-      // Spacing
-      'px-5 md:px-6 py-5',
-
-      // Shape
-      'rounded-md rounded-lg',
-
-      // Color
-      'bg-surface-0',
-      'text-surface-700/80',
-      'ring-1 ring-inset ring-surface-300',
-    ],
-  },
-  legend: ({ props }) => ({
-    class: [
-      // Font
-      'font-medium',
-      'leading-none',
-
-      //Spacing
-      { 'p-0': props.toggleable, 'px-3 py-1.5': !props.toggleable },
-
-      // Shape
-      'rounded-md',
-
-      // Color
-      'text-surface-700/80',
-
-      'bg-surface-0',
-
-      // Transition
-      'transition-none',
-
-      // States
-      { '': props.toggleable },
-      {
-        'focus:outline-none focus:outline-offset-0 focus:ring-2 focus:ring-primary-600 ring-inset':
-          props.toggleable,
-      },
-    ],
-  }),
-  toggler: ({ props }) => ({
-    class: [
-      // Alignments
-      'flex items-center justify-center',
-      'relative',
-
-      //Spacing
-      { 'px-3 py-1.5': props.toggleable },
-
-      // Shape
-      { 'rounded-md': props.toggleable },
-
-      // Color
-      {
-        'text-surface-700 hover:text-surface-900 hover:text-surface-900':
-          props.toggleable,
-      },
-
-      // States
-      {
-        'hover:text-surface-900': props.toggleable,
-      },
-      {
-        'focus:outline-none focus:outline-offset-0 focus:ring-2 focus:ring-inset focus:ring-primary-600':
-          props.toggleable,
-      },
-
-      // Misc
-      {
-        'transition-none cursor-pointer overflow-hidden select-none':
-          props.toggleable,
-      },
-    ],
-  }),
-  togglerIcon: {
-    class: 'mr-2 inline-block',
-  },
-  legendTitle: {
-    class: 'flex items-center justify-center leading-none',
-  },
-  content: {
-    class: 'p-0',
-  },
-  transition: {
-    enterFromClass: 'max-h-0',
-    enterActiveClass:
-      'overflow-hidden transition-[max-height] duration-1000 ease-[cubic-bezier(0.42,0,0.58,1)]',
-    enterToClass: 'max-h-[1000px]',
-    leaveFromClass: 'max-h-[1000px]',
-    leaveActiveClass:
-      'overflow-hidden transition-[max-height] duration-[450ms] ease-[cubic-bezier(0,1,0,1)]',
-    leaveToClass: 'max-h-0',
-  },
-};
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    root: {
+        class: [
+            'block',
+            // Spacing
+            'px-5 md:px-6 py-5',
+            // Shape
+            'rounded-md rounded-lg',
+            // Color
+            'bg-surface-0',
+            'text-surface-700/80',
+            'ring-1 ring-inset ring-surface-300',
+        ],
+    },
+    legend: function (_a) {
+        var props = _a.props;
+        return ({
+            class: [
+                // Font
+                'font-medium',
+                'leading-none',
+                //Spacing
+                { 'p-0': props.toggleable, 'px-3 py-1.5': !props.toggleable },
+                // Shape
+                'rounded-md',
+                // Color
+                'text-surface-700/80',
+                'bg-surface-0',
+                // Transition
+                'transition-none',
+                // States
+                { '': props.toggleable },
+                {
+                    'focus:outline-none focus:outline-offset-0 focus:ring-2 focus:ring-primary-600 ring-inset': props.toggleable,
+                },
+            ],
+        });
+    },
+    toggler: function (_a) {
+        var props = _a.props;
+        return ({
+            class: [
+                // Alignments
+                'flex items-center justify-center',
+                'relative',
+                //Spacing
+                { 'px-3 py-1.5': props.toggleable },
+                // Shape
+                { 'rounded-md': props.toggleable },
+                // Color
+                {
+                    'text-surface-700 hover:text-surface-900 hover:text-surface-900': props.toggleable,
+                },
+                // States
+                {
+                    'hover:text-surface-900': props.toggleable,
+                },
+                {
+                    'focus:outline-none focus:outline-offset-0 focus:ring-2 focus:ring-inset focus:ring-primary-600': props.toggleable,
+                },
+                // Misc
+                {
+                    'transition-none cursor-pointer overflow-hidden select-none': props.toggleable,
+                },
+            ],
+        });
+    },
+    togglerIcon: {
+        class: 'mr-2 inline-block',
+    },
+    legendTitle: {
+        class: 'flex items-center justify-center leading-none',
+    },
+    content: {
+        class: 'p-0',
+    },
+    transition: {
+        enterFromClass: 'max-h-0',
+        enterActiveClass: 'overflow-hidden transition-[max-height] duration-1000 ease-[cubic-bezier(0.42,0,0.58,1)]',
+        enterToClass: 'max-h-[1000px]',
+        leaveFromClass: 'max-h-[1000px]',
+        leaveActiveClass: 'overflow-hidden transition-[max-height] duration-[450ms] ease-[cubic-bezier(0,1,0,1)]',
+        leaveToClass: 'max-h-0',
+    },
+};

package/wangsvue/fileupload/index.d.ts

@@ -0,0 +1,29 @@
+declare namespace _default {
+    let root: {
+        'data-wv-name': string;
+        'data-wv-section': string;
+    };
+    let wrapper: {
+        class: string[];
+        'data-wv-section': string;
+    };
+    function input({ state }: {
+        state: any;
+    }): {
+        class: {
+            '': boolean;
+        }[];
+    };
+    function buttonupload({ props }: {
+        props: any;
+    }): {
+        class: {
+            'mb-[21px]': any;
+        }[];
+    };
+    namespace requirements {
+        let _class: string;
+        export { _class as class };
+    }
+}
+export default _default;

package/wangsvue/fileupload/index.js

@@ -1,23 +1,31 @@
-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',
-  },
-};
+"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',
+    },
+};

package/wangsvue/form/index.d.ts

@@ -0,0 +1,40 @@
+declare const _default: {
+    root: () => {
+        class: string[];
+        'data-wv-section': string;
+    };
+    fields: {
+        class: string[];
+    };
+    'fields-wrapper': {
+        class: string[];
+        'data-wv-section': string;
+    };
+    footer: {
+        class: string[];
+    };
+    'action-buttons': {
+        class: string[];
+        'data-wv-section': string;
+    };
+    'button-wrapper': {
+        class: string[];
+        'data-wv-section': string;
+    };
+    'cancel-button': {
+        'data-wv-section': string;
+    };
+    'clear-button': {
+        'data-wv-section': string;
+    };
+    'submit-button': {
+        'data-wv-section': string;
+    };
+    staycheckbox: {
+        class: string[];
+    };
+    'validator-message': {
+        class: string[];
+    };
+};
+export default _default;

package/wangsvue/form/index.js

@@ -1,42 +1,44 @@
-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'],
-  },
-};
+"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'],
+    },
+};

package/wangsvue/global.d.ts

@@ -0,0 +1,8 @@
+export const ringClass: (string | {
+    'ring-1 p-[1px]': boolean;
+    'ring-[0.5px] p-[0.5px]': boolean;
+})[];
+declare namespace _default {
+    let css: string;
+}
+export default _default;

package/wangsvue/global.js

@@ -1,87 +1,14 @@
-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%;
-        }
-    }
-`,
-};
+"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",
+};

package/wangsvue/image/index.d.ts

@@ -0,0 +1,88 @@
+declare namespace _default {
+    function root({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            'rounded-full': any;
+            'rounded-lg'?: undefined;
+        } | {
+            'rounded-lg': boolean;
+            'rounded-full'?: undefined;
+        })[];
+    };
+    function image({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            'rounded-full': any;
+            'rounded-lg'?: undefined;
+        } | {
+            'rounded-lg': boolean;
+            'rounded-full'?: undefined;
+        })[];
+    };
+    namespace button {
+        let _class: string[];
+        export { _class as class };
+        export let style: string;
+    }
+    namespace icon {
+        let _class_1: string;
+        export { _class_1 as class };
+    }
+    namespace mask {
+        let _class_2: string[];
+        export { _class_2 as class };
+    }
+    namespace toolbar {
+        let _class_3: string[];
+        export { _class_3 as class };
+    }
+    namespace rotaterightbutton {
+        let _class_4: string[];
+        export { _class_4 as class };
+    }
+    namespace rotaterighticon {
+        let _class_5: string;
+        export { _class_5 as class };
+    }
+    namespace rotateleftbutton {
+        let _class_6: string[];
+        export { _class_6 as class };
+    }
+    namespace rotatelefticon {
+        let _class_7: string;
+        export { _class_7 as class };
+    }
+    namespace zoomoutbutton {
+        let _class_8: string[];
+        export { _class_8 as class };
+    }
+    namespace zoomouticon {
+        let _class_9: string;
+        export { _class_9 as class };
+    }
+    namespace zoominbutton {
+        let _class_10: string[];
+        export { _class_10 as class };
+    }
+    namespace zoominicon {
+        let _class_11: string;
+        export { _class_11 as class };
+    }
+    namespace closebutton {
+        let _class_12: string[];
+        export { _class_12 as class };
+    }
+    namespace closeicon {
+        let _class_13: string;
+        export { _class_13 as class };
+    }
+    namespace transition {
+        let enterFromClass: string;
+        let enterActiveClass: string;
+        let leaveActiveClass: string;
+        let leaveToClass: string;
+    }
+}
+export default _default;