ui-thing 0.0.19 → 0.0.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-thing",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "description": "CLI used to add Nuxt 3 components to a project",
   "type": "module",
   "types": "./dist/index.d.ts",

package/src/comps.ts

@@ -568,6 +568,24 @@ export default [
     composables: [],
     plugins: [],
   },
+  {
+    name: "Container",
+    value: "container",
+    deps: ["radix-vue", "tailwind-variants"],
+    devDeps: [],
+    nuxtModules: [],
+    files: [
+      {
+        fileName: "Container.vue",
+        dirPath: "components/UI",
+        fileContent:
+          '<template>\r\n  <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\r\n    <slot></slot>\r\n  </Primitive>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n  import type { PrimitiveProps } from "radix-vue";\r\n\r\n  const props = withDefaults(\r\n    defineProps<\r\n      PrimitiveProps & {\r\n        class?: any;\r\n      }\r\n    >(),\r\n    {\r\n      as: "div",\r\n    }\r\n  );\r\n\r\n  const styles = tv({\r\n    base: "container mx-auto",\r\n  });\r\n</script>\r\n',
+      },
+    ],
+    utils: [],
+    composables: [],
+    plugins: [],
+  },
   {
     name: "Context Menu",
     value: "context-menu",
@@ -807,6 +825,25 @@ export default [
     composables: [],
     plugins: [],
   },
+  {
+    name: "Divider",
+    value: "divider",
+    deps: ["radix-vue", "tailwind-variants"],
+    devDeps: ["nuxt-icon"],
+    nuxtModules: ["nuxt-icon"],
+    components: ["avatar"],
+    files: [
+      {
+        fileName: "Divider.vue",
+        dirPath: "components/UI",
+        fileContent:
+          '<template>\r\n  <Primitive as="div" :class="base({ orientation, type, class: props.class })">\r\n    <Separator :orientation="orientation" :class="border({ orientation, type })" />\r\n    <template v-if="label || icon || avatar || $slots.default">\r\n      <div :class="container({ orientation, type })">\r\n        <slot>\r\n          <slot name="label">\r\n            <span v-if="label" :class="labelClass({ orientation, type })">\r\n              {{ label }}\r\n            </span>\r\n          </slot>\r\n          <slot name="icon">\r\n            <Icon v-if="icon" :name="icon" :class="iconClass({ orientation, type })" />\r\n          </slot>\r\n          <slot name="avatar">\r\n            <UiAvatar v-if="avatar" :src="avatar" />\r\n          </slot>\r\n        </slot>\r\n      </div>\r\n    </template>\r\n    <Separator :orientation="orientation" :class="border({ orientation, type })" />\r\n  </Primitive>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n  import { Primitive, Separator } from "radix-vue";\r\n\r\n  const props = defineProps<{\r\n    class?: any;\r\n    type?: VariantProps<typeof style>["type"];\r\n    orientation?: VariantProps<typeof style>["orientation"];\r\n    icon?: string;\r\n    label?: string;\r\n    avatar?: string;\r\n  }>();\r\n\r\n  const style = tv({\r\n    slots: {\r\n      base: "flex w-full items-center text-center align-middle",\r\n      container: "flex font-medium",\r\n      border: "flex border-border",\r\n      icon: "h-5 w-5 shrink-0",\r\n      label: "text-sm",\r\n    },\r\n    variants: {\r\n      orientation: {\r\n        horizontal: {\r\n          base: "flex-row",\r\n          container: "mx-3 whitespace-nowrap",\r\n          border: "w-full border-t",\r\n        },\r\n        vertical: {\r\n          base: "h-full flex-col",\r\n          container: "my-3",\r\n          border: "h-full border-s",\r\n        },\r\n      },\r\n      type: {\r\n        solid: {\r\n          border: "border-solid",\r\n        },\r\n        dashed: {\r\n          border: "border-dashed",\r\n        },\r\n        dotted: {\r\n          border: "border-dotted",\r\n        },\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      orientation: "horizontal",\r\n      type: "solid",\r\n    },\r\n  });\r\n\r\n  const { base, border, container, icon: iconClass, label: labelClass } = style();\r\n</script>\r\n',
+      },
+    ],
+    utils: [],
+    composables: [],
+    plugins: [],
+  },
   {
     name: "Dropdown Menu",
     value: "dropdown-menu",
@@ -1264,6 +1301,24 @@ export default [
     composables: [],
     plugins: [],
   },
+  {
+    name: "Navbar",
+    value: "navbar",
+    deps: ["radix-vue", "tailwind-variants"],
+    devDeps: [],
+    nuxtModules: [],
+    files: [
+      {
+        fileName: "Navbar.vue",
+        dirPath: "components/UI",
+        fileContent:
+          '<template>\r\n  <Primitive :class="styles({ sticky, class: props.class })" v-bind="reactiveOmit(props, \'class\')">\r\n    <slot> </slot>\r\n  </Primitive>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n  import { type PrimitiveProps } from "radix-vue";\r\n\r\n  const props = withDefaults(\r\n    defineProps<\r\n      PrimitiveProps & {\r\n        class?: any;\r\n        sticky?: boolean;\r\n      }\r\n    >(),\r\n    {\r\n      as: "header",\r\n    }\r\n  );\r\n\r\n  const styles = tv({\r\n    base: "z-20 border-b bg-background/90 backdrop-blur",\r\n    variants: {\r\n      sticky: {\r\n        true: "sticky top-0",\r\n      },\r\n    },\r\n  });\r\n</script>\r\n',
+      },
+    ],
+    utils: [],
+    composables: [],
+    plugins: [],
+  },
   {
     name: "Navigation Menu",
     value: "navigation-menu",