shuriken-ui / nuxt Goto Github PK

This needs to be similar to BaseInput:

    error?: string | boolean

It is currently:

    error?: string

Hi, is there any way to change (or translate) default string values - like "empty" or "No results found."?

I bought Tairo template but without possibility of translation I would have to replace all the Shuriken components :/

Thanks for great repo, is there a chance we can get nuxt4 support i.e. nightly?

How do I fix this problem?
I want the first button to be one

When BaseListbox or BaseAutocomplete is placed inside the TransitionChild(component from headlessui) with enter- and leave- props, enter- transitions of TransitionChild are not working.
Example:

 <TransitionChild
                as="template"
                enter="duration-300 ease-out"
                enter-from="opacity-0 scale-95"
                enter-to="opacity-100 scale-100"
                leave="duration-300 ease-in"
                leave-from="opacity-100 scale-100"
                leave-to="opacity-0 scale-95"
            >
              <BaseListbox
                  :items="accounts"
                  label="From Account"
                  size="md"
                  contrast="default"
                  placeholder="Select an account"
              />
</TransitionChild>

In this example, enter transitions of TransitionChild won't work.

As far as Shuriken UI uses headless UI under the hood, should it be considered as a bug?

Assumption: under the hood, BaseListbox uses Float component with leave- transitions. Maybe it conflicts somehow with the transitions of the TransitionChild?

Version: 3.1.6.

When I use a template from documentation for BaseDropdown and use a danger color for the BaseDropdownItem, it's shown as a blue one(potentially info color).

Reproducible on newly created Nuxt project with shuriken-ui dependency only.

Code:

    <BaseDropdownItem to="#" title="Profile" text="View your profile" color="primary" rounded="sm">
      <template #start>
        <Icon name="ph:user-duotone" class="me-2 block h-5 w-5" />
      </template>
    </BaseDropdownItem>
    <BaseDropdownItem to="#" title="Projects" text="View your projects" color="primary" rounded="sm">
      <template #start>
        <Icon name="ph:briefcase-duotone" class="me-2 block h-5 w-5" />
      </template>
    </BaseDropdownItem>
    <BaseDropdownItem to="#" title="Team" text="Manage your team" color="primary" rounded="sm">
      <template #start>
        <Icon name="ph:users-four-duotone" class="me-2 block h-5 w-5" />
      </template>
    </BaseDropdownItem>
    <BaseDropdownDivider />
    <BaseDropdownItem to="#" title="Settings" text="Set your preferences" color="danger" rounded="sm">
      <template #start>
        <Icon name="ph:gear-six-duotone" class="me-2 block h-5 w-5" />
      </template>
    </BaseDropdownItem>
  </BaseDropdown>

Would it be possible to have a white alternative for the button components? Like so:

<BaseButtonAction color="white">
    View
</BaseButtonAction>

This would be helpful in cases like the TairoTableHeading component which are gray and the buttons have no color by default which makes the gray shine through.
I would prefer that over adding class="bg-white" because it might need text color specifications as well and it feels more consistent to define the colors via attributes allways.

Not sure if a white color would make sense for other components as well, as I just started out using Shuriken.

When activating the extends key on defineNuxtConfig I get the following type error:

Error TS2345

TS2345: Argument of type '{ extends: string[]; modules: string[]; app: { head: { htmlAttrs: { lang: string; }; }; }; content: {}; vite { plugins: Plugin_2[]; }; }' is not assignable to parameter of type 'NuxtConfig'.   Object literal may only specify known properties, and 'extends' does not exist in type 'NuxtConfig'.

Sample config

export default defineNuxtConfig({
  extends: ["@shuriken-ui/nuxt"],
  modules: [
    "@nuxtjs/tailwindcss",
    "@pinia/nuxt",
    "@nuxt/content",
    "@nuxtjs/supabase"
  ],
  app: {
    head: {
      htmlAttrs: {
        lang: "en"
      }
    }
  },
  content: {},
  vite: {
    plugins: [
      ViteSvgLoader({
        svgo: false
      })
    ]
  }
})

BaseDrowndown

Missing button size. It is declared in the file but never implemented

<BaseButton
    v-if="variant === 'button' || props.variant === 'button'"
    :color="props.buttonColor ? props.buttonColor : buttonColor"
    :rounded="props.rounded ? props.rounded : rounded"
    class="!pe-3 !ps-4"
>

Should be

<BaseButton
    v-if="variant === 'button' || props.variant === 'button'"
    :color="props.buttonColor ? props.buttonColor : buttonColor"
    :size="props.buttonSize ? props.buttonSize : buttonSize"
    :rounded="props.rounded ? props.rounded : rounded"
    class="!pe-3 !ps-4"
>

I have overridden the component to fix this but would be nice to have it in the core package.

More a DX suggestion but it would be super nice to have a quick usage example in the main README following the install steps for users not immediately familiar with auto-loaded Nuxt components.

eg:

After completing the setup steps above, all components are automatically loaded and can be used without importing.

<template>
	<div>
  		<BaseButton />
	<div>
</template>

Additionally, I assume this is on the way already, but a short list of all available components would be cool to see as well if it's easy to automatically generate on changes. 😁

In button, data-tooltip-position="bottom" means bottom position for tooltip is not working. however we can set top, left and right.

Step to reproduce

<button
type="button"
class="border-muted-200 hover:ring-muted-200 dark:hover:ring-muted-700 dark:border-muted-700 dark:bg-muted-800 dark:ring-offset-muted-900 flex h-9 w-9 items-center justify-center rounded-full border bg-white ring-1 ring-transparent transition-all duration-300 hover:ring-offset-4"
data-tooltip="Back to bots"
data-tooltip-position="bottom"
>
<Icon name="ph:arrow-bend-up-left" class="text-muted-400 h-5 w-5" />
</button>

Expected output,

when we set data-tooltip-position="bottom",
the tooltip need to show below the targeted element

this causes the autocomplete's clear icon to show through a drop down's open list if a dropdown is placed above an autocomplete.

.nui-listbox .nui-listbox-options { z-index: 10 }

.nui-autocomplete .nui-autocomplete-results { z-index: 20 }

These should be the same :)

In messaging.vue, I cannot enter message with line break. So I suggest to add this feature in BaseInput.vue.

Issue

When attempting to install and activate using nuxt config I receive the following error:

Error while requiring module @shuriken-ui/nuxt: ReferenceError: defineNuxtConfig is not defined 

at node_modules/.pnpm/@[email protected]_ac7fus7hmxy46xiwuygouu3dj4/node_modules/@shuriken-ui/nuxt/nuxt.config.ts:8:16

Config

export default defineNuxtConfig({
  modules: ["@shuriken-ui/nuxt"],
  nui: {
    defaultShapes: {
      accordion: "rounded",
      autocompleteItem: "rounded",
      avatar: "full",
      button: "rounded",
      buttonAction: "rounded",
      buttonIcon: "rounded",
      card: "rounded",
      dropdown: "rounded",
      iconBox: "rounded",
      input: "rounded",
      message: "curved",
      pagination: "rounded",
      progess: "full",
      prose: "rounded",
      tabSlider: "rounded",
      tag: "rounded"
    }
  }
})

Environment

• Version: ^0.0.2
• Ubuntu 22.04
• PNPM

<BaseButtonGroup>
  <BaseButton>not rounded</BaseButton>
</BaseButtonGroup>

<BaseButtonGroup>
  <BaseButton>rounded</BaseButton>
  <BaseButton>rounded</BaseButton>
</BaseButtonGroup>

Reproduction link: https://stackblitz.com/edit/nuxt-starter-vhyr8m?file=app.vue

Hello, i always getting this error, how can a fix or where do i patch it ? Thanks

Nuxt 3.11.2 with Nitro 2.9.6

> pnpm run dev

ℹ Using default Tailwind CSS file                                   nuxt:tailwindcss 23:27:14

[23:27:21]  ERROR  Unable to load static components definitions from "@shuriken-ui/nuxt/component-meta" Only URLs with a scheme in: file, data, and node are supported by the default ESM loader. On Windows, absolute paths must be valid file:// URLs. Received protocol 'k:'

  at throwIfUnsupportedURLScheme (node:internal/modules/esm/load:239:11)
  at defaultLoad (node:internal/modules/esm/load:130:3)
  at ModuleLoader.load (node:internal/modules/esm/loader:403:13)
  at ModuleLoader.moduleProvider (node:internal/modules/esm/loader:285:56)
  at new ModuleJob (node:internal/modules/esm/module_job:65:26)
  at #createModuleJob (node:internal/modules/esm/loader:297:17)
  at ModuleLoader.getJobFromResolveResult (node:internal/modules/esm/loader:254:34)
  at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:235:17)
  at async ModuleLoader.import (node:internal/modules/esm/loader:322:23)

Can we get the same v-model.prop and properties.value settings on the autocomplete as we have on the listbox now?

I was going to add it and submit a PR but its a bit of an extensive change due to the BaseAutoCompleteItem

I would be happy with just the ability to get/set the option by a property of the object (e.g. key)

When attempting to use this component indirectly within form-6.vue demo page, I receive the errors which appear to be caused by mismatches in the ref names:

 [Vue warn]: Property "el" was accessed during render but is not defined on instance. 
 [Vue warn]: Property "files" was accessed during render but is not defined on instance. 
 [Vue warn]: Property "preview" was accessed during render but is not defined on instance.

It triggers only on the refs that have been renamed immediately prior to export within setup.

In the BaseListbox component, some texts that were used during development were not cleaned out.

<template v-if="Array.isArray(value)">
    <div
      v-if="value.length === 0 && placeholder"
      class="nui-listbox-placeholder"
      :class="props.loading && 'text-transparent select-none'"
    >
    {{ placeholder }} azeaze
    </div>
    <div
      class="block truncate text-left"
      :class="[
        props.loading && 'select-none text-transparent',
        value.length === 0 && 'text-muted-300 dark:text-muted-500',
      ]"
    >
      {{
        typeof props.multipleLabel === 'function'
          ? props.multipleLabel(value, props.properties.label)
          : props.multipleLabel
      }}sdfsf
    </div>
  </template>

When the BaseButtonClose is added without the size prop, it's not visible on the screen.

Expected behavior:
Button should show with size sm.

Actual behavior:
Button is not visible on the sceen.

Version: 3.0.1

When allowCreate is true, and there are no filtered results the dropdown doesn't have the correct styling.
When allowCreate is true, and there are some results, the create {{query}} item doesn't match the other item's style.

hi this look like so interesting but i cannot find example and a good docomation for learn how to use

When the clearable prop is set, the clear icon is visible by default even if the model value is an empty string.

Actual:

screen	src

Expected:
Let the dom compute size automatically, which may vary depending on used font

screen	src

@stafyniaksacha

I'm having a problem with this including the old tailwind aspect ratio plugin.

See this issue
https://github.com/cssninjaStudio/tairo/issues/138

This plugin has been superseded by the builtin aspect ratio utilities since v3.0 of Tailwind.
The problem is that it wipes out the new utilities, breaking their use which is becoming more common.

The official suggested workaround does not actually replace all of the new utilities.

I'd be happy to submit a PR but I wanted to check first.

Is there a way to change the border of inputs on focus?

As a common user experience, would you please add this feature to Basetextarea.vue:

Press 'Shift + enter' for a new line and press 'Enter' to submit data.

Should be progress rather than progess.

Should be "also installs" or "will also install"

This can be good for catching these issues in local dev: https://marketplace.visualstudio.com/items?itemName=znck.grammarly

It would be nice to have fitSize method exposed to allow triggering a state update it seems there are times when the function does not trigger automatically when updating the model value.

const textAreaValue = ref<string>()

async function onSomeEvent (): void  {
  const value: string = await someAsyncSource()
  textAreaValue.value = value
  
  // Would like to trigger `fitSize()` here from outside the component if possible.
}

The commit 2215979 breaks the indeterminate state functionality of the BaseProgress component.

If the type fix is really necessary, maybe a relaxed null check (using == instead of ===, and != instead of !==) here and here is a viable solution?

The input id generation assumes that user browser has support for the browser crypto api:

This was released in version 92 of chrome for android https://caniuse.com/?search=randomuuid, but some users still stucked in old versions:

Proposal: replace crypto.randomUUID for something like random bytes or timestamp based id.

Sometimes i need to pass the portal props to the Float component to render the dropdown out of the natural parent element

In this case the table need an overflow-hidden to work property (TairoTable) and the dropdown get cropped due to it being renderer inside the table, using the portal props on the Float component would allow to fix this issue