@rotki/ui-library 2.8.1 → 2.8.2

package/dist/README.md

@@ -0,0 +1,276 @@
+# @rotki/ui-library
+
+A Vue component library and design system for rotki
+
+[![npm (scoped)](https://img.shields.io/npm/v/@rotki/ui-library?style=flat-square)](https://www.npmjs.com/package/@rotki/ui-library)
+[![ci](https://github.com/rotki/ui-library/actions/workflows/ci.yml/badge.svg)](https://github.com/rotki/ui-library/actions/workflows/ci.yml)
+[![codecov](https://codecov.io/gh/rotki/ui-library/graph/badge.svg?token=9PIS7KMFC7)](https://codecov.io/gh/rotki/ui-library)
+[![license](https://img.shields.io/github/license/rotki/ui-library)](https://github.com/rotki/ui-library/blob/main/LICENSE.md)
+
+## Getting started
+
+### Installing the library
+
+You can start using the library after installing it from npm along with the roboto font:
+
+```bash
+pnpm install -D --save-exact @rotki/ui-library @fontsource/roboto
+```
+
+### Importing the stylesheets
+
+Don't forget to import the `style.css` file from `@rotki/ui-library` along with the latin roboto font,
+in the project root (e.g main.ts)
+
+```typescript
+import '@rotki/ui-library/dist/style.css';
+import '@fontsource/roboto/latin.css';
+```
+
+### Using the plugin
+
+To use the library you must install the library plugin:
+
+```typescript
+import { createRui } from '@rotki/ui-library';
+
+const RuiPlugin = createRui(options);
+app.use(RuiPlugin);
+```
+
+### Using the components
+
+Then you can you the library components e.g.:
+
+```vue
+<script setup lang="ts">
+import { RuiButton } from '@rotki/ui-library';
+</script>
+
+<template>
+  <div>
+    <RuiButton outlined>
+      This is button
+    </RuiButton>
+  </div>
+</template>
+```
+
+### Managing the theme
+
+To dynamically manage the theme you can use the theme manager
+
+```typescript
+import { useRotkiTheme } from '@rotki/ui-library';
+const { toggleThemeMode, setThemeConfig, switchThemeScheme, state, store } = useRotkiTheme();
+
+// to change the theme (pass colors as described by `ThemeConfig`) anytime:
+setThemeConfig(newTheme);
+
+// to switch between auto|light|dark
+toggleThemeMode();
+
+// to switch to a specific theme mode
+switchThemeScheme(ThemeMode.dark);
+```
+
+### Using the icons
+
+You need to specify which icons you want to enable, when installing the RuiPlugin.
+
+```typescript
+import { createRui, Ri4kFill, Ri4kLine } from '@rotki/ui-library';
+
+const RuiPlugin = createRui({
+  theme: {
+    icons: [Ri4kFill, Ri4kLine],
+  },
+});
+app.use(RuiPlugin);
+```
+
+```vue
+<script lang="ts" setup>
+import { RuiIcon } from '@rotki/ui-library';
+</script>
+
+<template>
+  <div>
+    <RuiIcon name="4k-fill" />
+    <RuiIcon name="4k-line" />
+  </div>
+</template>
+```
+
+### Setting up internationalization (i18n)
+
+The UI library supports internationalization through the `createRuiI8nPlugin` function. This allows you to provide translations for UI components.
+
+#### Setting up the i18n plugin
+
+First, you need to set up your Vue i18n instance and then connect it to the UI library:
+
+```typescript
+import { createRui, createRuiI8nPlugin } from '@rotki/ui-library';
+import { createApp } from 'vue';
+import { createI18n } from 'vue-i18n';
+
+// Create your i18n instance
+const i18n = createI18n({
+  legacy: false, // You must set `false`, to use Composition API
+  locale: 'en',
+  messages: {
+    en: {
+      // Your app translations
+      // UI library translations (see below)
+      rui: {
+        date_time_picker: {
+          date_after_max: 'Date cannot be after {date}',
+          date_before_min: 'Date cannot be before {date}',
+          date_in_future: 'The selected date cannot be in the future',
+        },
+      },
+    },
+    // Other languages...
+  },
+});
+
+const app = createApp(App);
+
+// Create and use the Rotki UI plugin
+const RuiPlugin = createRui();
+app.use(RuiPlugin);
+
+// Create and use the Rotki UI i18n plugin
+const RuiI18nPlugin = createRuiI8nPlugin(i18n);
+app.use(RuiI18nPlugin);
+
+app.use(i18n);
+app.mount('#app');
+```
+
+#### Available translation keys
+
+The UI library uses the following translation keys:
+
+```typescript
+// These are defined in src/i18n/keys.ts
+export const RUI_I18N_KEYS = {
+  dateTimePicker: {
+    dateAfterMax: 'rui.date_time_picker.date_after_max',
+    dateBeforeMin: 'rui.date_time_picker.date_before_min',
+    dateInFuture: 'rui.date_time_picker.date_in_future',
+  },
+} as const;
+```
+
+### Use @rotki/ui-library tailwindcss theme
+
+You can extend @rotki/ui-library tailwind theme configuration by adding these to your tailwind config. It will provide you the classes for the colors, typography, and shadow.
+
+```javascript
+// tailwind.config.js
+
+module.exports = {
+  // ... your tailwind configs,
+  plugins: [require('@rotki/ui-library/theme')],
+};
+```
+
+## Development
+
+### Installation
+
+To install the dependencies you need to run on the root of the repository
+
+```
+pnpm install --frozen-lockfile
+```
+
+### Compiles and minifies for production
+
+The following command when executed from the project root will build the `@rotki/ui-library` bundle.
+This command will create the bundle for both Vue version >=3.4.3.
+
+```
+pnpm run build:prod
+```
+
+If you want to build for specific version, you can run:
+
+```
+pnpm run build
+```
+
+### Lint check
+
+```
+pnpm run lint
+```
+
+### Lints and fixes files
+
+```
+pnpm run lint:fix
+```
+
+### Type check
+
+```
+pnpm run typecheck
+```
+
+### Storybook
+
+In order to run the storybook, you can run:
+
+```
+pnpm run storybook
+```
+
+### Testing: Unit
+
+In order to test the components, you can run:
+
+```
+pnpm run test
+```
+
+### Testing: end-to-end
+
+In order to test the components in use in a vue 3 project, you can run:
+
+```
+pnpm run test:e2e
+```
+
+coverage results can be generated and previewed with:
+
+```
+pnpm run coverage
+pnpm run coverage:preview
+```
+
+### Locally testing the library
+
+After you build the bundle, in the `package.json` on your main project, you can add this to the dependencies:
+
+```json
+{
+  "@rotki/ui-library": "file:...path_of_this_directory"
+}
+```
+
+When the dependency installed on the main project, it will run the `prepare` script.
+
+### Generating the library icons
+
+We use remix-icons. You need to run this script to scrap the svgs data from remix-icons. (This script runs automatically on `prepare`. Run this in case the icons aren't generated properly)
+
+```
+pnpm run generate:icons
+```
+
+## License
+
+[AGPL-3.0](./LICENSE.md) License &copy; 2023- [Rotki Solutions GmbH](https://github.com/rotki)

package/dist/_virtual/_plugin-vue_export-helper.js

@@ -0,0 +1,11 @@
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+export {
+  _export_sfc as default
+};
+//# sourceMappingURL=_plugin-vue_export-helper.js.map

package/dist/_virtual/_plugin-vue_export-helper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"_plugin-vue_export-helper.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist/components/accordions/accordion/RuiAccordion.vue.js

@@ -0,0 +1,11 @@
+import _sfc_main from "./RuiAccordion.vue2.js";
+import style0 from "./RuiAccordion.vue3.js";
+import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.js";
+const cssModules = {
+  "$style": style0
+};
+const RuiAccordion = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  RuiAccordion as default
+};
+//# sourceMappingURL=RuiAccordion.vue.js.map

package/dist/components/accordions/accordion/RuiAccordion.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuiAccordion.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist/components/accordions/accordion/RuiAccordion.vue2.js

@@ -0,0 +1,66 @@
+import { defineComponent, useCssVars, unref, ref, createElementBlock, openBlock, mergeProps, createCommentVNode, normalizeClass, createElementVNode, createVNode, renderSlot } from "vue";
+import RuiIcon from "../../icons/RuiIcon.vue.js";
+import { useElementSize } from "@vueuse/core";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "RuiAccordion",
+    inheritAttrs: false
+  },
+  __name: "RuiAccordion",
+  props: {
+    open: { type: Boolean, default: false },
+    eager: { type: Boolean, default: false },
+    headerGrow: { type: Boolean, default: false },
+    headerClass: { default: "" },
+    contentClass: { default: "" }
+  },
+  emits: ["click"],
+  setup(__props, { emit: __emit }) {
+    useCssVars((_ctx) => ({
+      "fcb53c98": unref(innerHeight)
+    }));
+    const emit = __emit;
+    function click() {
+      emit("click");
+    }
+    const inner = ref();
+    const { height: innerHeight } = useElementSize(inner);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", mergeProps({
+        class: ["accordion", [_ctx.$style.accordion, { [_ctx.$style.open]: __props.open }]]
+      }, _ctx.$attrs), [
+        _ctx.$slots.header ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: normalizeClass(["accordion__header flex gap-2 items-center", [__props.headerClass, { "w-full": __props.headerGrow }]]),
+          role: "button",
+          onClick: _cache[0] || (_cache[0] = ($event) => click())
+        }, [
+          createElementVNode("div", {
+            class: normalizeClass({ grow: __props.headerGrow })
+          }, [
+            renderSlot(_ctx.$slots, "header", { open: __props.open })
+          ], 2),
+          createVNode(RuiIcon, {
+            class: normalizeClass(["text-rui-text-secondary", _ctx.$style.icon]),
+            name: "lu-chevron-down"
+          }, null, 8, ["class"])
+        ], 2)) : createCommentVNode("", true),
+        __props.open || __props.eager ? (openBlock(), createElementBlock("div", {
+          key: 1,
+          class: normalizeClass([[__props.contentClass, _ctx.$style.accordion__content], "accordion__content"])
+        }, [
+          createElementVNode("div", {
+            ref_key: "inner",
+            ref: inner
+          }, [
+            renderSlot(_ctx.$slots, "default")
+          ], 512)
+        ], 2)) : createCommentVNode("", true)
+      ], 16);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=RuiAccordion.vue2.js.map

package/dist/components/accordions/accordion/RuiAccordion.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuiAccordion.vue2.js","sources":["../../../../src/components/accordions/accordion/RuiAccordion.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport Icon from '@/components/icons/RuiIcon.vue';\n\nexport interface AccordionProps {\n  open?: boolean;\n  eager?: boolean;\n  headerGrow?: boolean;\n  headerClass?: string;\n  contentClass?: string;\n}\n\ndefineOptions({\n  name: 'RuiAccordion',\n  inheritAttrs: false,\n});\n\nwithDefaults(defineProps<AccordionProps>(), {\n  open: false,\n  eager: false,\n  headerGrow: false,\n  headerClass: '',\n  contentClass: '',\n});\n\nconst emit = defineEmits<{\n  (e: 'click'): void;\n}>();\n\nfunction click() {\n  emit('click');\n}\n\nconst inner = ref<HTMLDivElement>();\n\nconst { height: innerHeight } = useElementSize(inner);\n</script>\n\n<template>\n  <div\n    class=\"accordion\"\n    :class=\"[$style.accordion, { [$style.open]: open }]\"\n    v-bind=\"$attrs\"\n  >\n    <div\n      v-if=\"$slots.header\"\n      class=\"accordion__header flex gap-2 items-center\"\n      :class=\"[headerClass, { 'w-full': headerGrow }]\"\n      role=\"button\"\n      @click=\"click()\"\n    >\n      <div\n        :class=\"{ grow: headerGrow }\"\n      >\n        <slot\n          name=\"header\"\n          :open=\"open\"\n        />\n      </div>\n      <Icon\n        class=\"text-rui-text-secondary\"\n        :class=\"$style.icon\"\n        name=\"lu-chevron-down\"\n      />\n    </div>\n    <div\n      v-if=\"open || eager\"\n      :class=\"[contentClass, $style.accordion__content]\"\n      class=\"accordion__content\"\n    >\n      <div\n        ref=\"inner\"\n      >\n        <slot\n          name=\"default\"\n        />\n      </div>\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n.accordion {\n  @apply flex flex-col items-start;\n\n  &.open {\n    .accordion {\n      &__content {\n        height: calc(v-bind(innerHeight) * 1px);\n      }\n    }\n\n    .icon {\n      @apply transform -rotate-180;\n    }\n  }\n\n  &__content {\n    @apply grow transition-all overflow-hidden h-0 w-full;\n  }\n\n  .icon {\n    @apply transition-all;\n  }\n}\n</style>\n"],"names":["_openBlock","_createElementBlock","_mergeProps","$style","$attrs","$slots","_normalizeClass","_createElementVNode","_renderSlot","_createVNode","Icon"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAwBA,UAAM,OAAO;AAIb,aAAS,QAAQ;AACf,WAAK,OAAO;AAAA,IACd;AAEA,UAAM,QAAQ,IAAA;AAEd,UAAM,EAAE,QAAQ,gBAAgB,eAAe,KAAK;;AAIlD,aAAAA,UAAA,GAAAC,mBAuCM,OAvCNC,WAuCM;AAAA,QAtCJ,OAAK,CAAC,aAAW,CACRC,KAAAA,OAAO,WAAS,EAAA,CAAKA,KAAAA,OAAO,IAAI,GAAG,QAAA,KAAA,CAAI,CAAA;AAAA,MAAA,GACxCC,KAAAA,MAAM,GAAA;AAAA,QAGNC,KAAAA,OAAO,uBADfJ,mBAoBM,OAAA;AAAA;UAlBJ,OAAKK,eAAA,CAAC,6CAA2C,CACxC,QAAA,yBAAyB,QAAA,WAAA,CAAU,CAAA,CAAA;AAAA,UAC5C,MAAK;AAAA,UACJ,+CAAO,MAAA;AAAA,QAAK;UAEbC,mBAOM,OAAA;AAAA,YANH,8BAAe,QAAA,YAAU;AAAA,UAAA;YAE1BC,WAGE,KAAA,QAAA,UAAA,EADC,MAAM,QAAA,MAAI;AAAA,UAAA;UAGfC,YAIEC,SAAA;AAAA,YAHA,OAAKJ,eAAA,CAAC,2BACEH,KAAAA,OAAO,IAAI,CAAA;AAAA,YACnB,MAAK;AAAA,UAAA;;QAID,QAAA,QAAQ,QAAA,sBADhBF,mBAYM,OAAA;AAAA;UAVH,wBAAQ,QAAA,cAAcE,YAAO,kBAAkB,GAC1C,oBAAoB,CAAA;AAAA,QAAA;UAE1BI,mBAMM,OAAA;AAAA,qBALA;AAAA,YAAJ,KAAI;AAAA,UAAA;YAEJC,WAEE,KAAA,QAAA,SAAA;AAAA,UAAA;;;;;;"}

package/dist/components/accordions/accordion/RuiAccordion.vue3.js

@@ -0,0 +1,18 @@
+const accordion = "_accordion_1s1ud_1";
+const open = "_open_1s1ud_4";
+const accordion__content = "_accordion__content_1s1ud_4";
+const icon = "_icon_1s1ud_7";
+const style0 = {
+  accordion,
+  open,
+  accordion__content,
+  icon
+};
+export {
+  accordion,
+  accordion__content,
+  style0 as default,
+  icon,
+  open
+};
+//# sourceMappingURL=RuiAccordion.vue3.js.map

package/dist/components/accordions/accordion/RuiAccordion.vue3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuiAccordion.vue3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}

package/dist/components/accordions/accordions/RuiAccordions.vue.js

@@ -0,0 +1,78 @@
+import { defineComponent, toRefs, ref, useSlots, computed, watch, createElementBlock, openBlock, normalizeProps, guardReactiveProps, Fragment, renderList, unref, createBlock, resolveDynamicComponent } from "vue";
+import { get, set } from "@vueuse/shared";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "RuiAccordions",
+    inheritAttrs: false
+  },
+  __name: "RuiAccordions",
+  props: {
+    modelValue: { default: -1 },
+    multiple: { type: Boolean, default: false }
+  },
+  emits: ["update:model-value"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const { modelValue, multiple } = toRefs(props);
+    const internalValue = ref();
+    const slots = useSlots();
+    const children = computed(() => {
+      const accordions = slots.default?.() ?? [];
+      const currentValue = get(internalValue);
+      const multipleVal = get(multiple);
+      return accordions.map((accordion, index) => {
+        const open = multipleVal && Array.isArray(currentValue) ? currentValue.includes(index) : currentValue === index;
+        return {
+          ...accordion,
+          props: {
+            open,
+            ...accordion.props
+          }
+        };
+      });
+    });
+    function updateValue(newModelValue) {
+      let newValue;
+      const internal = get(internalValue);
+      if (get(multiple) && Array.isArray(internal)) {
+        const temp = [...get(internal)];
+        const index = temp.indexOf(newModelValue);
+        if (index === -1)
+          temp.push(newModelValue);
+        else
+          temp.splice(index, 1);
+        newValue = temp;
+      } else {
+        if (internal === newModelValue)
+          newValue = -1;
+        else
+          newValue = newModelValue;
+      }
+      emit("update:model-value", newValue);
+      set(internalValue, newValue);
+    }
+    watch([modelValue, multiple], ([value, multiple2]) => {
+      let internal = value;
+      if (multiple2 && !Array.isArray(internal))
+        internal = internal === -1 ? [] : [internal];
+      else if (!multiple2 && Array.isArray(internal))
+        internal = internal[0] ?? -1;
+      set(internalValue, internal);
+    }, { immediate: true });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps(_ctx.$attrs)), [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(children), (child, i) => {
+          return openBlock(), createBlock(resolveDynamicComponent(child), {
+            key: i,
+            onClick: ($event) => updateValue(i)
+          }, null, 8, ["onClick"]);
+        }), 128))
+      ], 16);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=RuiAccordions.vue.js.map

package/dist/components/accordions/accordions/RuiAccordions.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuiAccordions.vue.js","sources":["../../../../src/components/accordions/accordions/RuiAccordions.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nexport interface Props {\n  modelValue?: number[] | number;\n  multiple?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiAccordions',\n  inheritAttrs: false,\n});\n\nconst props = withDefaults(defineProps<Props>(), {\n  modelValue: -1,\n  multiple: false,\n});\n\nconst emit = defineEmits<{\n  (e: 'update:model-value', modelValue: number | number[]): void;\n}>();\n\nconst { modelValue, multiple } = toRefs(props);\n\nconst internalValue = ref();\n\nconst slots = useSlots();\nconst children = computed(() => {\n  const accordions = slots.default?.() ?? [];\n  const currentValue = get(internalValue);\n  const multipleVal = get(multiple);\n\n  return accordions.map((accordion, index) => {\n    const open = multipleVal && Array.isArray(currentValue) ? currentValue.includes(index) : currentValue === index;\n\n    return {\n      ...accordion,\n      props: {\n        open,\n        ...accordion.props,\n      },\n    };\n  });\n});\n\nfunction updateValue(newModelValue: number) {\n  let newValue: number[] | number;\n  const internal = get(internalValue);\n  if (get(multiple) && Array.isArray(internal)) {\n    const temp = [...get(internal)];\n    const index = temp.indexOf(newModelValue);\n    if (index === -1)\n      temp.push(newModelValue);\n    else\n      temp.splice(index, 1);\n    newValue = temp;\n  }\n  else {\n    if (internal === newModelValue)\n      newValue = -1;\n    else\n      newValue = newModelValue;\n  }\n  emit('update:model-value', newValue);\n  set(internalValue, newValue);\n}\n\nwatch([modelValue, multiple], ([value, multiple]) => {\n  let internal: number | number[] = value;\n  if (multiple && !Array.isArray(internal))\n    internal = internal === -1 ? [] : [internal];\n  else if (!multiple && Array.isArray(internal))\n    internal = internal[0] ?? -1;\n\n  set(internalValue, internal);\n}, { immediate: true });\n</script>\n\n<template>\n  <div v-bind=\"$attrs\">\n    <Component\n      :is=\"child\"\n      v-for=\"(child, i) in children\"\n      :key=\"i\"\n      @click=\"updateValue(i)\"\n    />\n  </div>\n</template>\n"],"names":["multiple","_openBlock","_createElementBlock","$attrs","_Fragment","_renderList","_unref","_createBlock","_resolveDynamicComponent"],"mappings":";;;;;;;;;;;;;;AAWA,UAAM,QAAQ;AAKd,UAAM,OAAO;AAIb,UAAM,EAAE,YAAY,aAAa,OAAO,KAAK;AAE7C,UAAM,gBAAgB,IAAA;AAEtB,UAAM,QAAQ,SAAA;AACd,UAAM,WAAW,SAAS,MAAM;AAC9B,YAAM,aAAa,MAAM,UAAA,KAAe,CAAA;AACxC,YAAM,eAAe,IAAI,aAAa;AACtC,YAAM,cAAc,IAAI,QAAQ;AAEhC,aAAO,WAAW,IAAI,CAAC,WAAW,UAAU;AAC1C,cAAM,OAAO,eAAe,MAAM,QAAQ,YAAY,IAAI,aAAa,SAAS,KAAK,IAAI,iBAAiB;AAE1G,eAAO;AAAA,UACL,GAAG;AAAA,UACH,OAAO;AAAA,YACL;AAAA,YACA,GAAG,UAAU;AAAA,UAAA;AAAA,QACf;AAAA,MAEJ,CAAC;AAAA,IACH,CAAC;AAED,aAAS,YAAY,eAAuB;AAC1C,UAAI;AACJ,YAAM,WAAW,IAAI,aAAa;AAClC,UAAI,IAAI,QAAQ,KAAK,MAAM,QAAQ,QAAQ,GAAG;AAC5C,cAAM,OAAO,CAAC,GAAG,IAAI,QAAQ,CAAC;AAC9B,cAAM,QAAQ,KAAK,QAAQ,aAAa;AACxC,YAAI,UAAU;AACZ,eAAK,KAAK,aAAa;AAAA;AAEvB,eAAK,OAAO,OAAO,CAAC;AACtB,mBAAW;AAAA,MACb,OACK;AACH,YAAI,aAAa;AACf,qBAAW;AAAA;AAEX,qBAAW;AAAA,MACf;AACA,WAAK,sBAAsB,QAAQ;AACnC,UAAI,eAAe,QAAQ;AAAA,IAC7B;AAEA,UAAM,CAAC,YAAY,QAAQ,GAAG,CAAC,CAAC,OAAOA,SAAQ,MAAM;AACnD,UAAI,WAA8B;AAClC,UAAIA,aAAY,CAAC,MAAM,QAAQ,QAAQ;AACrC,mBAAW,aAAa,KAAK,CAAA,IAAK,CAAC,QAAQ;AAAA,eACpC,CAACA,aAAY,MAAM,QAAQ,QAAQ;AAC1C,mBAAW,SAAS,CAAC,KAAK;AAE5B,UAAI,eAAe,QAAQ;AAAA,IAC7B,GAAG,EAAE,WAAW,MAAM;;AAIpB,aAAAC,UAAA,GAAAC,mBAOM,yCAPOC,KAAAA,MAAM,CAAA,GAAA;AAAA,SACjBF,UAAA,IAAA,GAAAC,mBAKEE,UAAA,MAAAC,WAHqBC,MAAA,QAAA,GAAQ,CAArB,OAAO,MAAC;AAFlB,iBAAAL,UAAA,GAAAM,YAKEC,wBAJK,KAAK,GAAA;AAAA,YAET,KAAK;AAAA,YACL,SAAK,CAAA,WAAE,YAAY,CAAC;AAAA,UAAA;;;;;;"}

package/dist/components/accordions/accordions/RuiAccordions.vue2.js

@@ -0,0 +1,5 @@
+import _sfc_main from "./RuiAccordions.vue.js";
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=RuiAccordions.vue2.js.map

package/dist/components/accordions/accordions/RuiAccordions.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuiAccordions.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/alerts/RuiAlert.vue.d.ts

@@ -1,5 +1,5 @@
-import type { ContextColorsType } from '../../consts/colors';
-import type { RuiIcons } from '../../icons';
+import type { ContextColorsType } from '../../consts/colors.js';
+import type { RuiIcons } from '../../icons/index.js';
 export interface Props {
     title?: string;
     description?: string;

package/dist/components/alerts/RuiAlert.vue.js

@@ -0,0 +1,11 @@
+import _sfc_main from "./RuiAlert.vue2.js";
+import style0 from "./RuiAlert.vue3.js";
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
+const cssModules = {
+  "$style": style0
+};
+const RuiAlert = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  RuiAlert as default
+};
+//# sourceMappingURL=RuiAlert.vue.js.map

package/dist/components/alerts/RuiAlert.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuiAlert.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist/components/alerts/RuiAlert.vue2.js

@@ -0,0 +1,123 @@
+import { defineComponent, toRefs, computed, createElementBlock, openBlock, mergeProps, unref, createElementVNode, createCommentVNode, normalizeClass, createVNode, renderSlot, createTextVNode, toDisplayString, withCtx } from "vue";
+import RuiButton from "../buttons/button/RuiButton.vue.js";
+import RuiIcon from "../icons/RuiIcon.vue.js";
+import { get } from "@vueuse/shared";
+const _hoisted_1 = { class: "flex space-x-3 py-1 flex-grow" };
+const _hoisted_2 = {
+  key: 1,
+  class: "text-body-2"
+};
+const _hoisted_3 = { key: 0 };
+const _hoisted_4 = { key: 1 };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "RuiAlert",
+    inheritAttrs: false
+  },
+  __name: "RuiAlert",
+  props: {
+    title: { default: "" },
+    description: { default: "" },
+    type: { default: "primary" },
+    icon: { default: void 0 },
+    variant: { default: "default" },
+    actionText: { default: "" },
+    closeable: { type: Boolean, default: false }
+  },
+  emits: ["action", "close"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const { icon, type } = toRefs(props);
+    const usedIcon = computed(() => {
+      const iconVal = get(icon);
+      if (iconVal)
+        return iconVal;
+      const iconMap = {
+        primary: void 0,
+        secondary: void 0,
+        warning: "lu-triangle-alert",
+        info: "lu-info",
+        error: "lu-circle-alert",
+        success: "lu-circle-check"
+      };
+      return iconMap[get(type)];
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", mergeProps({
+        class: [
+          _ctx.$style.alert,
+          _ctx.$style[unref(type)],
+          _ctx.$style[__props.variant]
+        ]
+      }, _ctx.$attrs), [
+        createElementVNode("div", _hoisted_1, [
+          unref(usedIcon) ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: normalizeClass(_ctx.$style.icon)
+          }, [
+            createVNode(RuiIcon, {
+              name: unref(usedIcon),
+              size: "22"
+            }, null, 8, ["name"])
+          ], 2)) : createCommentVNode("", true),
+          createElementVNode("div", {
+            class: normalizeClass(["space-y-1 flex-grow", _ctx.$style.texts])
+          }, [
+            _ctx.$slots.title || __props.title ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              class: normalizeClass({
+                "font-medium": !!__props.title
+              })
+            }, [
+              renderSlot(_ctx.$slots, "title", {}, () => [
+                createTextVNode(toDisplayString(__props.title), 1)
+              ])
+            ], 2)) : createCommentVNode("", true),
+            _ctx.$slots.default || __props.description ? (openBlock(), createElementBlock("div", _hoisted_2, [
+              renderSlot(_ctx.$slots, "default", {}, () => [
+                createTextVNode(toDisplayString(__props.description), 1)
+              ])
+            ])) : createCommentVNode("", true)
+          ], 2)
+        ]),
+        __props.actionText ? (openBlock(), createElementBlock("div", _hoisted_3, [
+          createVNode(RuiButton, {
+            variant: "text",
+            size: "sm",
+            color: __props.variant === "filled" ? void 0 : unref(type),
+            class: normalizeClass(_ctx.$style.action),
+            onClick: _cache[0] || (_cache[0] = ($event) => emit("action"))
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(__props.actionText), 1)
+            ]),
+            _: 1
+          }, 8, ["color", "class"])
+        ])) : createCommentVNode("", true),
+        __props.closeable ? (openBlock(), createElementBlock("div", _hoisted_4, [
+          createVNode(RuiButton, {
+            color: __props.variant === "filled" ? void 0 : unref(type),
+            size: "sm",
+            icon: "",
+            variant: "text",
+            class: normalizeClass(_ctx.$style.close),
+            onClick: _cache[1] || (_cache[1] = ($event) => emit("close"))
+          }, {
+            default: withCtx(() => [
+              createVNode(RuiIcon, {
+                name: "lu-x",
+                size: "20"
+              })
+            ]),
+            _: 1
+          }, 8, ["color", "class"])
+        ])) : createCommentVNode("", true)
+      ], 16);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=RuiAlert.vue2.js.map

package/dist/components/alerts/RuiAlert.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuiAlert.vue2.js","sources":["../../../src/components/alerts/RuiAlert.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\n\nexport interface Props {\n  title?: string;\n  description?: string;\n  type?: ContextColorsType;\n  icon?: RuiIcons;\n  variant?: 'default' | 'filled' | 'outlined';\n  actionText?: string;\n  closeable?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiAlert',\n  inheritAttrs: false,\n});\n\nconst props = withDefaults(defineProps<Props>(), {\n  title: '',\n  description: '',\n  type: 'primary',\n  icon: undefined,\n  variant: 'default',\n  actionText: '',\n  closeable: false,\n});\n\nconst emit = defineEmits<{\n  (e: 'action'): void;\n  (e: 'close'): void;\n}>();\n\nconst { icon, type } = toRefs(props);\n\nconst usedIcon = computed<RuiIcons | undefined>(() => {\n  const iconVal = get(icon);\n  if (iconVal)\n    return iconVal;\n\n  const iconMap: Record<ContextColorsType, RuiIcons | undefined> = {\n    primary: undefined,\n    secondary: undefined,\n    warning: 'lu-triangle-alert',\n    info: 'lu-info',\n    error: 'lu-circle-alert',\n    success: 'lu-circle-check',\n  };\n\n  return iconMap[get(type)];\n});\n</script>\n\n<template>\n  <div\n    :class=\"[\n      $style.alert,\n      $style[type],\n      $style[variant],\n    ]\"\n    v-bind=\"$attrs\"\n  >\n    <div class=\"flex space-x-3 py-1 flex-grow\">\n      <div\n        v-if=\"usedIcon\"\n        :class=\"$style.icon\"\n      >\n        <RuiIcon\n          :name=\"usedIcon\"\n          size=\"22\"\n        />\n      </div>\n      <div\n        class=\"space-y-1 flex-grow\"\n        :class=\"$style.texts\"\n      >\n        <div\n          v-if=\"$slots.title || title\"\n          :class=\"{\n            'font-medium': !!title,\n          }\"\n        >\n          <slot name=\"title\">\n            {{ title }}\n          </slot>\n        </div>\n\n        <div\n          v-if=\"$slots.default || description\"\n          class=\"text-body-2\"\n        >\n          <slot>\n            {{ description }}\n          </slot>\n        </div>\n      </div>\n    </div>\n    <div v-if=\"actionText\">\n      <RuiButton\n        variant=\"text\"\n        size=\"sm\"\n        :color=\"variant === 'filled' ? undefined : type\"\n        :class=\"$style.action\"\n        @click=\"emit('action')\"\n      >\n        {{ actionText }}\n      </RuiButton>\n    </div>\n    <div v-if=\"closeable\">\n      <RuiButton\n        :color=\"variant === 'filled' ? undefined : type\"\n        size=\"sm\"\n        icon\n        variant=\"text\"\n        :class=\"$style.close\"\n        @click=\"emit('close')\"\n      >\n        <RuiIcon\n          name=\"lu-x\"\n          size=\"20\"\n        />\n      </RuiButton>\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n@use '@/styles/colors.scss' as c;\n@use 'sass:list';\n\n:global(.dark) {\n  .alert {\n    @each $color in c.$context-colors {\n      &.#{$color} {\n        &.default {\n          @apply color-mix-supported:bg-rui-#{$color}-shade/[.9] bg-shade-[.9];\n        }\n\n        &.default,\n        &.outlined {\n          .icon,\n          .texts,\n          .action,\n          .close {\n            @apply color-mix-supported:text-rui-#{$color}-tint/[.6] text-tint-[.6];\n          }\n\n          .icon {\n            @apply text-rui-#{$color};\n          }\n        }\n      }\n\n      @if list.index((warning, success, info), $color) {\n        &.#{$color} {\n          &.filled {\n            .icon,\n            .texts,\n            .action,\n            .close {\n              @apply text-rui-light-text #{!important};\n            }\n          }\n        }\n      }\n    }\n\n    &.outlined {\n      @apply bg-black;\n    }\n  }\n}\n\n.alert {\n  @apply px-4 py-2.5 rounded flex space-x-4;\n\n  @each $color in c.$context-colors {\n    &.#{$color} {\n      &.default {\n        @apply color-mix-supported:bg-rui-#{$color}-tint/[.9];\n        @apply bg-rui-#{$color} bg-tint-[.9];\n      }\n\n      &.filled {\n        @apply bg-rui-#{$color};\n      }\n\n      &.outlined {\n        @apply border-rui-#{$color};\n      }\n\n      &.default,\n      &.outlined {\n        .icon,\n        .texts,\n        .action,\n        .close {\n          @apply text-rui-#{$color} text-shade-[.6];\n          @apply color-mix-supported:text-rui-#{$color}-shade/[.6] color-mix-supported:animate-none;\n        }\n      }\n    }\n  }\n\n  &.filled {\n    .icon,\n    .texts,\n    .action,\n    .close {\n      @apply text-rui-dark-text #{!important};\n    }\n  }\n\n  &.outlined {\n    @apply border m-[-1px] bg-white;\n  }\n}\n</style>\n"],"names":["_openBlock","_createElementBlock","_mergeProps","$style","_unref","$attrs","_createElementVNode","_normalizeClass","_createVNode","$slots","_renderSlot"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,UAAM,QAAQ;AAUd,UAAM,OAAO;AAKb,UAAM,EAAE,MAAM,SAAS,OAAO,KAAK;AAEnC,UAAM,WAAW,SAA+B,MAAM;AACpD,YAAM,UAAU,IAAI,IAAI;AACxB,UAAI;AACF,eAAO;AAET,YAAM,UAA2D;AAAA,QAC/D,SAAS;AAAA,QACT,WAAW;AAAA,QACX,SAAS;AAAA,QACT,MAAM;AAAA,QACN,OAAO;AAAA,QACP,SAAS;AAAA,MAAA;AAGX,aAAO,QAAQ,IAAI,IAAI,CAAC;AAAA,IAC1B,CAAC;;AAIC,aAAAA,UAAA,GAAAC,mBAqEM,OArENC,WAqEM;AAAA,QApEH,OAAK;AAAA,UAAUC,KAAAA,OAAO;AAAA,UAAaA,KAAAA,OAAOC,MAAA,IAAA,CAAI;AAAA,UAASD,KAAAA,OAAO,QAAA,OAAO;AAAA,QAAA;AAAA,SAK9DE,KAAAA,MAAM,GAAA;AAAA,QAEdC,mBAkCM,OAlCN,YAkCM;AAAA,UAhCIF,MAAA,QAAA,kBADRH,mBAQM,OAAA;AAAA;YANH,OAAKM,eAAEJ,KAAAA,OAAO,IAAI;AAAA,UAAA;YAEnBK,YAGE,SAAA;AAAA,cAFC,MAAMJ,MAAA,QAAA;AAAA,cACP,MAAK;AAAA,YAAA;;UAGTE,mBAuBM,OAAA;AAAA,YAtBJ,OAAKC,eAAA,CAAC,uBACEJ,KAAAA,OAAO,KAAK,CAAA;AAAA,UAAA;YAGZM,KAAAA,OAAO,SAAS,QAAA,sBADxBR,mBASM,OAAA;AAAA;cAPH,OAAKM,eAAA;AAAA,iCAAiC,QAAA;AAAA,cAAA;;cAIvCG,WAEO,0BAFP,MAEO;AAAA,gDADF,QAAA,KAAK,GAAA,CAAA;AAAA,cAAA;;YAKJD,KAAAA,OAAO,WAAW,QAAA,eAD1BT,aAAAC,mBAOM,OAPN,YAOM;AAAA,cAHJS,WAEO,4BAFP,MAEO;AAAA,gDADF,QAAA,WAAW,GAAA,CAAA;AAAA,cAAA;;;;QAKX,QAAA,2BAAXT,mBAUM,OAAA,YAAA;AAAA,UATJO,YAQY,WAAA;AAAA,YAPV,SAAQ;AAAA,YACR,MAAK;AAAA,YACJ,OAAO,QAAA,YAAO,WAAgB,SAAYJ,MAAA,IAAA;AAAA,YAC1C,OAAKG,eAAEJ,KAAAA,OAAO,MAAM;AAAA,YACpB,+CAAO,KAAI,QAAA;AAAA,UAAA;6BAEZ,MAAgB;AAAA,8CAAb,QAAA,UAAU,GAAA,CAAA;AAAA,YAAA;;;;QAGN,QAAA,0BAAXF,mBAcM,OAAA,YAAA;AAAA,UAbJO,YAYY,WAAA;AAAA,YAXT,OAAO,QAAA,YAAO,WAAgB,SAAYJ,MAAA,IAAA;AAAA,YAC3C,MAAK;AAAA,YACL,MAAA;AAAA,YACA,SAAQ;AAAA,YACP,OAAKG,eAAEJ,KAAAA,OAAO,KAAK;AAAA,YACnB,+CAAO,KAAI,OAAA;AAAA,UAAA;6BAEZ,MAGE;AAAA,cAHFK,YAGE,SAAA;AAAA,gBAFA,MAAK;AAAA,gBACL,MAAK;AAAA,cAAA;;;;;;;;;"}