@pandacss/generator 0.0.0-dev-20240205221215 → 0.0.0-dev-20240206121257

package/dist/index.js

@@ -2288,8 +2288,11 @@ function generateVueJsxFactory(ctx) {
       const ${componentName} = defineComponent({
         name: \`${factoryName}.\${name}\`,
         inheritAttrs: false,
-        props: { as: { type: [String, Object], default: Dynamic.__base__ || Dynamic } },
-        setup(props, { slots, attrs }) {
+        props: {
+          modelValue: null,
+          as: { type: [String, Object], default: Dynamic.__base__ || Dynamic }
+        },
+        setup(props, { slots, attrs, emit }) {
           const __cvaFn__ = composeCvaFn(Dynamic.__cva__, cvaFn)
           const __shouldForwardProps__ = composeShouldForwardProps(Dynamic, shouldForwardProp)
 
@@ -2315,17 +2318,48 @@ function generateVueJsxFactory(ctx) {
 
           const classes = configOrCva.__recipe__ ? recipeClass : cvaClass
 
+          const vModelProps = computed(() => {
+            const result = {};
+    
+            if (
+              props.as === 'input' &&
+              (props.type === 'checkbox' || props.type === 'radio')
+            ) {
+              result.checked = props.modelValue;
+              result.onChange = (event) => {
+                const checked = !event.currentTarget.checked;
+                emit('change', checked, event);
+                emit('update:modelValue', checked, event);
+              };
+            } else if (
+              props.as === 'input' ||
+              props.as === 'textarea' ||
+              props.as === 'select'
+            ) {
+              result.value = props.modelValue;
+              result.onInput = (event) => {
+                const value = event.currentTarget.value;
+                emit('input', value, event);
+                emit('update:modelValue', value, event);
+              };
+            }
+    
+            return result;
+          });
+
           return () => {
             const [htmlProps, forwardedProps, _variantProps, _styleProps, elementProps] = splittedProps.value
+            
             return h(
               props.as,
               {
                 ...forwardedProps,
                 ...elementProps,
                 ...normalizeHTMLProps(htmlProps),
+                ...vModelProps.value,
                 class: classes.value,
               },
-              slots.default && slots.default(),
+              slots,
             )
           }
         },
@@ -2339,19 +2373,13 @@ function generateVueJsxFactory(ctx) {
       return ${componentName}
     }
 
-    function createJsxFactory() {
-      return new Proxy(styledFn, {
-        apply(_, __, args) {
-          return styledFn(...args)
-        },
-        get(_, el) {
-         return styledFn(el)
-        },
-      })
-    }
+    const tags = 'a, abbr, address, area, article, aside, audio, b, base, bdi, bdo, big, blockquote, body, br, button, canvas, caption, cite, code, col, colgroup, data, datalist, dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, head, header, hgroup, hr, html, i, iframe, img, input, ins, kbd, keygen, label, legend, li, link, main, map, mark, marquee, menu, menuitem, meta, meter, nav, noscript, object, ol, optgroup, option, output, p, param, picture, pre, progress, q, rp, rt, ruby, s, samp, script, section, select, small, source, span, strong, style, sub, summary, sup, table, tbody, td, textarea, tfoot, th, thead, time, title, tr, track, u, ul, var, video, wbr, circle, clipPath, defs, ellipse, foreignObject, g, image, line, linearGradient, mask, path, pattern, polygon, polyline, radialGradient, rect, stop, svg, text, tspan';
 
-    export const ${factoryName} = /* @__PURE__ */ createJsxFactory()
+    export const ${factoryName} = /* @__PURE__ */ styledFn.bind();
 
+    tags.split(', ').forEach((tag) => {
+      styled[tag] = styled(tag);
+    });
     `
   };
 }
@@ -2375,11 +2403,43 @@ function generateVueJsxStringLiteralFactory(ctx) {
       const ${componentName} = defineComponent({
         name: \`${factoryName}.\${name}\`,
         inheritAttrs: false,
-        props: { as: { type: [String, Object], default: Dynamic } },
-        setup(props, { slots, attrs }) {
+        props: {
+          modelValue: null,
+          as: { type: [String, Object], default: Dynamic }
+        },
+        setup(props, { slots, attrs, emit }) {
           const classes = computed(() => {
             return cx(css(Dynamic.__styles__, styles), elementProps.className)
           })
+
+          const vModelProps = computed(() => {
+            const result = {};
+    
+            if (
+              props.as === 'input' &&
+              (props.type === 'checkbox' || props.type === 'radio')
+            ) {
+              result.checked = props.modelValue;
+              result.onChange = (event) => {
+                const checked = !event.currentTarget.checked;
+                emit('change', checked, event);
+                emit('update:modelValue', checked, event);
+              };
+            } else if (
+              props.as === 'input' ||
+              props.as === 'textarea' ||
+              props.as === 'select'
+            ) {
+              result.value = props.modelValue;
+              result.onInput = (event) => {
+                const value = event.currentTarget.value;
+                emit('input', value, event);
+                emit('update:modelValue', value, event);
+              };
+            }
+    
+            return result;
+          });
           
           return () => {
             return h(
@@ -2387,8 +2447,9 @@ function generateVueJsxStringLiteralFactory(ctx) {
               {
                 class: classes.value,
                 ...elementProps,
+                ...vModelProps.value,
               },
-              slots.default && slots.default(),
+             slots
             )
           }
         },
@@ -2401,23 +2462,13 @@ function generateVueJsxStringLiteralFactory(ctx) {
     }
   }
 
-    function createJsxFactory() {
-      const cache = new Map()
+  const tags = 'a, abbr, address, area, article, aside, audio, b, base, bdi, bdo, big, blockquote, body, br, button, canvas, caption, cite, code, col, colgroup, data, datalist, dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, head, header, hgroup, hr, html, i, iframe, img, input, ins, kbd, keygen, label, legend, li, link, main, map, mark, marquee, menu, menuitem, meta, meter, nav, noscript, object, ol, optgroup, option, output, p, param, picture, pre, progress, q, rp, rt, ruby, s, samp, script, section, select, small, source, span, strong, style, sub, summary, sup, table, tbody, td, textarea, tfoot, th, thead, time, title, tr, track, u, ul, var, video, wbr, circle, clipPath, defs, ellipse, foreignObject, g, image, line, linearGradient, mask, path, pattern, polygon, polyline, radialGradient, rect, stop, svg, text, tspan';
 
-      return new Proxy(createStyled, {
-        apply(_, __, args) {
-          return createStyled(...args)
-        },
-        get(_, el) {
-          if (!cache.has(el)) {
-            cache.set(el, createStyled(el))
-          }
-          return cache.get(el)
-        },
-      })
-    }
+  export const ${factoryName} = /* @__PURE__ */ styledFn.bind();
 
-    export const ${factoryName} = /* @__PURE__ */ createJsxFactory()
+  tags.split(', ').forEach((tag) => {
+    styled[tag] = styled(tag);
+  });
     `
   };
 }

package/dist/index.mjs

@@ -2252,8 +2252,11 @@ function generateVueJsxFactory(ctx) {
       const ${componentName} = defineComponent({
         name: \`${factoryName}.\${name}\`,
         inheritAttrs: false,
-        props: { as: { type: [String, Object], default: Dynamic.__base__ || Dynamic } },
-        setup(props, { slots, attrs }) {
+        props: {
+          modelValue: null,
+          as: { type: [String, Object], default: Dynamic.__base__ || Dynamic }
+        },
+        setup(props, { slots, attrs, emit }) {
           const __cvaFn__ = composeCvaFn(Dynamic.__cva__, cvaFn)
           const __shouldForwardProps__ = composeShouldForwardProps(Dynamic, shouldForwardProp)
 
@@ -2279,17 +2282,48 @@ function generateVueJsxFactory(ctx) {
 
           const classes = configOrCva.__recipe__ ? recipeClass : cvaClass
 
+          const vModelProps = computed(() => {
+            const result = {};
+    
+            if (
+              props.as === 'input' &&
+              (props.type === 'checkbox' || props.type === 'radio')
+            ) {
+              result.checked = props.modelValue;
+              result.onChange = (event) => {
+                const checked = !event.currentTarget.checked;
+                emit('change', checked, event);
+                emit('update:modelValue', checked, event);
+              };
+            } else if (
+              props.as === 'input' ||
+              props.as === 'textarea' ||
+              props.as === 'select'
+            ) {
+              result.value = props.modelValue;
+              result.onInput = (event) => {
+                const value = event.currentTarget.value;
+                emit('input', value, event);
+                emit('update:modelValue', value, event);
+              };
+            }
+    
+            return result;
+          });
+
           return () => {
             const [htmlProps, forwardedProps, _variantProps, _styleProps, elementProps] = splittedProps.value
+            
             return h(
               props.as,
               {
                 ...forwardedProps,
                 ...elementProps,
                 ...normalizeHTMLProps(htmlProps),
+                ...vModelProps.value,
                 class: classes.value,
               },
-              slots.default && slots.default(),
+              slots,
             )
           }
         },
@@ -2303,19 +2337,13 @@ function generateVueJsxFactory(ctx) {
       return ${componentName}
     }
 
-    function createJsxFactory() {
-      return new Proxy(styledFn, {
-        apply(_, __, args) {
-          return styledFn(...args)
-        },
-        get(_, el) {
-         return styledFn(el)
-        },
-      })
-    }
+    const tags = 'a, abbr, address, area, article, aside, audio, b, base, bdi, bdo, big, blockquote, body, br, button, canvas, caption, cite, code, col, colgroup, data, datalist, dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, head, header, hgroup, hr, html, i, iframe, img, input, ins, kbd, keygen, label, legend, li, link, main, map, mark, marquee, menu, menuitem, meta, meter, nav, noscript, object, ol, optgroup, option, output, p, param, picture, pre, progress, q, rp, rt, ruby, s, samp, script, section, select, small, source, span, strong, style, sub, summary, sup, table, tbody, td, textarea, tfoot, th, thead, time, title, tr, track, u, ul, var, video, wbr, circle, clipPath, defs, ellipse, foreignObject, g, image, line, linearGradient, mask, path, pattern, polygon, polyline, radialGradient, rect, stop, svg, text, tspan';
 
-    export const ${factoryName} = /* @__PURE__ */ createJsxFactory()
+    export const ${factoryName} = /* @__PURE__ */ styledFn.bind();
 
+    tags.split(', ').forEach((tag) => {
+      styled[tag] = styled(tag);
+    });
     `
   };
 }
@@ -2339,11 +2367,43 @@ function generateVueJsxStringLiteralFactory(ctx) {
       const ${componentName} = defineComponent({
         name: \`${factoryName}.\${name}\`,
         inheritAttrs: false,
-        props: { as: { type: [String, Object], default: Dynamic } },
-        setup(props, { slots, attrs }) {
+        props: {
+          modelValue: null,
+          as: { type: [String, Object], default: Dynamic }
+        },
+        setup(props, { slots, attrs, emit }) {
           const classes = computed(() => {
             return cx(css(Dynamic.__styles__, styles), elementProps.className)
           })
+
+          const vModelProps = computed(() => {
+            const result = {};
+    
+            if (
+              props.as === 'input' &&
+              (props.type === 'checkbox' || props.type === 'radio')
+            ) {
+              result.checked = props.modelValue;
+              result.onChange = (event) => {
+                const checked = !event.currentTarget.checked;
+                emit('change', checked, event);
+                emit('update:modelValue', checked, event);
+              };
+            } else if (
+              props.as === 'input' ||
+              props.as === 'textarea' ||
+              props.as === 'select'
+            ) {
+              result.value = props.modelValue;
+              result.onInput = (event) => {
+                const value = event.currentTarget.value;
+                emit('input', value, event);
+                emit('update:modelValue', value, event);
+              };
+            }
+    
+            return result;
+          });
           
           return () => {
             return h(
@@ -2351,8 +2411,9 @@ function generateVueJsxStringLiteralFactory(ctx) {
               {
                 class: classes.value,
                 ...elementProps,
+                ...vModelProps.value,
               },
-              slots.default && slots.default(),
+             slots
             )
           }
         },
@@ -2365,23 +2426,13 @@ function generateVueJsxStringLiteralFactory(ctx) {
     }
   }
 
-    function createJsxFactory() {
-      const cache = new Map()
+  const tags = 'a, abbr, address, area, article, aside, audio, b, base, bdi, bdo, big, blockquote, body, br, button, canvas, caption, cite, code, col, colgroup, data, datalist, dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, head, header, hgroup, hr, html, i, iframe, img, input, ins, kbd, keygen, label, legend, li, link, main, map, mark, marquee, menu, menuitem, meta, meter, nav, noscript, object, ol, optgroup, option, output, p, param, picture, pre, progress, q, rp, rt, ruby, s, samp, script, section, select, small, source, span, strong, style, sub, summary, sup, table, tbody, td, textarea, tfoot, th, thead, time, title, tr, track, u, ul, var, video, wbr, circle, clipPath, defs, ellipse, foreignObject, g, image, line, linearGradient, mask, path, pattern, polygon, polyline, radialGradient, rect, stop, svg, text, tspan';
 
-      return new Proxy(createStyled, {
-        apply(_, __, args) {
-          return createStyled(...args)
-        },
-        get(_, el) {
-          if (!cache.has(el)) {
-            cache.set(el, createStyled(el))
-          }
-          return cache.get(el)
-        },
-      })
-    }
+  export const ${factoryName} = /* @__PURE__ */ styledFn.bind();
 
-    export const ${factoryName} = /* @__PURE__ */ createJsxFactory()
+  tags.split(', ').forEach((tag) => {
+    styled[tag] = styled(tag);
+  });
     `
   };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/generator",
-  "version": "0.0.0-dev-20240205221215",
+  "version": "0.0.0-dev-20240206121257",
   "description": "The css generator for css panda",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -37,12 +37,12 @@
     "pluralize": "8.0.0",
     "postcss": "^8.4.31",
     "ts-pattern": "5.0.5",
-    "@pandacss/core": "0.0.0-dev-20240205221215",
-    "@pandacss/is-valid-prop": "^0.0.0-dev-20240205221215",
-    "@pandacss/logger": "0.0.0-dev-20240205221215",
-    "@pandacss/shared": "0.0.0-dev-20240205221215",
-    "@pandacss/token-dictionary": "0.0.0-dev-20240205221215",
-    "@pandacss/types": "0.0.0-dev-20240205221215"
+    "@pandacss/core": "0.0.0-dev-20240206121257",
+    "@pandacss/is-valid-prop": "^0.0.0-dev-20240206121257",
+    "@pandacss/logger": "0.0.0-dev-20240206121257",
+    "@pandacss/shared": "0.0.0-dev-20240206121257",
+    "@pandacss/token-dictionary": "0.0.0-dev-20240206121257",
+    "@pandacss/types": "0.0.0-dev-20240206121257"
   },
   "devDependencies": {
     "@types/pluralize": "0.0.33"