shuriken-ui / nuxt Goto Github PK
View Code? Open in Web Editor NEWNuxt version of Shuriken UI with ready to use components
Home Page: https://shurikenui.com/
License: MIT License
Nuxt version of Shuriken UI with ready to use components
Home Page: https://shurikenui.com/
License: MIT License
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?
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:
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'.
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
})
]
}
})
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
In messaging.vue, I cannot enter message with line break. So I suggest to add this feature in BaseInput.vue.
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
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"
}
}
})
^0.0.2
<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)
<template>
<BaseTag flavor="pastel">...</template>
</template>
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
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.
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.
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.
Line 95 in 2927b1d
nuxt/components/base/BaseProgress.vue
Line 41 in 2927b1d
Should be progress
rather than progess
.
Line 29 in 6405f49
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
nuxt/components/form/BaseTextarea.vue
Line 166 in 83f8835
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.
}
<template>
<BaseTag flavor="pastel" color="muted">...</BaseTag>
</template>
The input id generation assumes that user browser has support for the browser crypto api:
Line 16 in 2a2b889
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.