whelk-ui 0.0.3 → 0.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (47) hide show
  1. package/README.md +4 -5
  2. package/dist/index.d.ts +50 -0
  3. package/dist/index.html +12 -0
  4. package/dist/whelk-ui.css +1 -0
  5. package/dist/whelk-ui.js +48 -0
  6. package/dist/whelk-ui.umd.cjs +1 -0
  7. package/package.json +47 -9
  8. package/index.html +0 -16
  9. package/playwright.config.ts +0 -79
  10. package/src/App.vue +0 -28
  11. package/src/components/add_object/AddObject.vue +0 -40
  12. package/src/components/button/ButtonComponent.spec.ts +0 -11
  13. package/src/components/button/ButtonComponent.vue +0 -129
  14. package/src/components/card/CardComponent.vue +0 -14
  15. package/src/components/card/card_footer/CardFooter.vue +0 -19
  16. package/src/components/card/card_header/CardHeader.vue +0 -16
  17. package/src/components/check_box/CheckBox.vue +0 -42
  18. package/src/components/datetime/DatetimeComponent.vue +0 -147
  19. package/src/components/drop_down/DropDown.vue +0 -104
  20. package/src/components/drop_down/drop_down_item/DropDownItem.vue +0 -58
  21. package/src/components/form_group/FormGroup.spec.ts +0 -16
  22. package/src/components/form_group/FormGroup.vue +0 -19
  23. package/src/components/number_input/NumberInput.spec.ts +0 -712
  24. package/src/components/number_input/NumberInput.vue +0 -264
  25. package/src/components/password_input/PasswordInput.vue +0 -166
  26. package/src/components/render_error_message/RenderErrorMessage.spec.ts +0 -0
  27. package/src/components/render_error_message/RenderErrorMessage.vue +0 -32
  28. package/src/components/switch/SwitchComponent.vue +0 -152
  29. package/src/components/text_area/TextArea.vue +0 -151
  30. package/src/components/text_input/TextInput.vue +0 -178
  31. package/src/components/tool_tip/ToolTip.vue +0 -96
  32. package/src/main.ts +0 -6
  33. package/src/styles/main.css +0 -1
  34. package/src/styles/partials/_general_variables.css +0 -74
  35. package/src/utils/enums/ObjectStateEnum.ts +0 -13
  36. package/src/utils/enums/ObjectTitleCaseEnums.ts +0 -17
  37. package/src/utils/enums/ObjectTypeEnums.ts +0 -15
  38. package/src/utils/interfaces/DocumentItemInterface.ts +0 -5
  39. package/src/utils/interfaces/DropDownItemsInterface.ts +0 -8
  40. package/src/utils/interfaces/FolderItemInterface.ts +0 -4
  41. package/src/utils/interfaces/MenuItemInterface.ts +0 -10
  42. package/tests/example.spec.ts +0 -18
  43. package/tsconfig.app.json +0 -16
  44. package/tsconfig.json +0 -7
  45. package/tsconfig.node.json +0 -25
  46. package/vite.config.ts +0 -79
  47. /package/{public → dist}/vite.svg +0 -0
package/README.md CHANGED
@@ -1,5 +1,4 @@
1
- Whelk UI
2
- ========
1
+ # Whelk UI
3
2
 
4
3
  ***Coming soon - The VueJS UI Components used to build NearBeach***
5
4
 
@@ -7,11 +6,11 @@ Whelk UI
7
6
 
8
7
  ---
9
8
 
10
- # Component Completion
9
+ ## Component Completion
11
10
 
12
11
  You can follow the completion status on [NearBeach's 0.32 Component Reconstruction kanban board](https://prod.nearbeach.app/public/kanban_board/14/dfa1f175-faa2-4dd1-a2f3-f2c8c507bee4/)
13
12
 
14
- ## Forms
13
+ ### Forms
15
14
 
16
15
  - [] Add Object
17
16
  - [x] Buttons
@@ -28,6 +27,6 @@ You can follow the completion status on [NearBeach's 0.32 Component Reconstructi
28
27
  - [] Toggle
29
28
  - [] Website Input
30
29
 
31
- ## Generic
30
+ ### Generic
32
31
 
33
32
  - [] Tooltip
package/dist/index.d.ts ADDED
@@ -0,0 +1,50 @@
1
+ import { App } from 'vue';
2
+ import { ComponentOptionsMixin } from 'vue';
3
+ import { ComponentProvideOptions } from 'vue';
4
+ import { DefineComponent } from 'vue';
5
+ import { ExtractPropTypes } from 'vue';
6
+ import { PublicProps } from 'vue';
7
+
8
+ declare const __VLS_component: DefineComponent<ExtractPropTypes<{
9
+ objectState: {
10
+ type: StringConstructor;
11
+ default: "NO_ACTION";
12
+ required: false;
13
+ validator: (value: string) => boolean;
14
+ };
15
+ }>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly< ExtractPropTypes<{
16
+ objectState: {
17
+ type: StringConstructor;
18
+ default: "NO_ACTION";
19
+ required: false;
20
+ validator: (value: string) => boolean;
21
+ };
22
+ }>> & Readonly<{}>, {
23
+ objectState: string;
24
+ }, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLButtonElement>;
25
+
26
+ declare function __VLS_template(): {
27
+ attrs: Partial<{}>;
28
+ slots: {
29
+ default?(_: {}): any;
30
+ };
31
+ refs: {};
32
+ rootEl: HTMLButtonElement;
33
+ };
34
+
35
+ declare type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
36
+
37
+ declare type __VLS_WithTemplateSlots<T, S> = T & {
38
+ new (): {
39
+ $slots: S;
40
+ };
41
+ };
42
+
43
+ export declare const ButtonComponent: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
44
+
45
+ declare const _default: {
46
+ install(app: App): void;
47
+ };
48
+ export default _default;
49
+
50
+ export { }
package/dist/index.html ADDED
@@ -0,0 +1,12 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Whelk UI - Development</title>
7
+ </head>
8
+ <body>
9
+ <div id="app"></div>
10
+ <script type="module" src="/dev/main.ts"></script>
11
+ </body>
12
+ </html>
package/dist/whelk-ui.css ADDED
@@ -0,0 +1 @@
1
+ button[data-v-3de7a432]{padding:.5rem 1rem;border:var(--border);border-radius:var(--border-radius);border-width:var(--border-width);border-style:var(--border-style);color:var(--text)}button.compact[data-v-3de7a432]{padding:.25rem .125rem;font-size:.75rem;line-height:1rem}button.tiny[data-v-3de7a432]{padding:.125rem 0rem;font-size:.75rem;line-height:.75rem}button.primary[data-v-3de7a432]{background-color:var(--primary);border-color:var(--primary)}button.primary:hover[data-v-3de7a432]:enabled{background-color:var(--primary-hover)}button.secondary[data-v-3de7a432]{background-color:var(--secondary);border-color:var(--secondary)}button.secondary:hover[data-v-3de7a432]:enabled{background-color:var(--secondary-hover)}button.danger[data-v-3de7a432]{background-color:var(--danger);border-color:var(--danger)}button.danger:hover[data-v-3de7a432]:enabled{background-color:var(--danger-hover)}button.warning[data-v-3de7a432]{background-color:var(--warning);border-color:var(--warning)}button.warning:hover[data-v-3de7a432]:enabled{background-color:var(--warning-hover)}button.success[data-v-3de7a432]{background-color:var(--success);border-color:var(--success)}button.success:hover[data-v-3de7a432]:enabled{background-color:var(--success-hover)}button.info[data-v-3de7a432]{background-color:var(--info);border-color:var(--info)}button.info:hover[data-v-3de7a432]:enabled{background-color:var(--info-hover)}button.loading[data-v-3de7a432]{animation:loading-animation-3de7a432 1s infinite linear}@keyframes loading-animation-3de7a432{0%{color:var(--text)}50%{color:var(--text-muted)}to{color:var(--text)}}
package/dist/whelk-ui.js ADDED
@@ -0,0 +1,48 @@
1
+ import { defineComponent as l, openBlock as a, createElementBlock as r, unref as c, renderSlot as d, createCommentVNode as s, toDisplayString as m } from "vue";
2
+ const n = {
3
+ Disable: "DISABLE",
4
+ Error: "ERROR",
5
+ Loading: "LOADING",
6
+ LoggingIn: "LOGGING_IN",
7
+ LoggingOut: "LOGGING_OUT",
8
+ NoAction: "NO_ACTION",
9
+ Saving: "SAVING"
10
+ }, _ = ["disabled"], b = { key: 1 }, f = /* @__PURE__ */ l({
11
+ __name: "ButtonComponent",
12
+ props: {
13
+ objectState: {
14
+ type: String,
15
+ default: n.NoAction,
16
+ required: !1,
17
+ validator: function(t) {
18
+ return Object.values(n).includes(t);
19
+ }
20
+ }
21
+ },
22
+ setup(t) {
23
+ return (e, o) => (a(), r("button", {
24
+ disabled: t.objectState !== c(n).NoAction
25
+ }, [
26
+ t.objectState === c(n).NoAction ? d(e.$slots, "default", { key: 0 }, void 0, !0) : s("", !0),
27
+ t.objectState !== c(n).NoAction ? (a(), r("span", b, m(t.objectState), 1)) : s("", !0)
28
+ ], 8, _));
29
+ }
30
+ }), O = (t, e) => {
31
+ const o = t.__vccOpts || t;
32
+ for (const [i, u] of e)
33
+ o[i] = u;
34
+ return o;
35
+ }, S = /* @__PURE__ */ O(f, [["__scopeId", "data-v-3de7a432"]]), g = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
36
+ __proto__: null,
37
+ ButtonComponent: S
38
+ }, Symbol.toStringTag, { value: "Module" })), N = {
39
+ install(t) {
40
+ Object.entries(g).forEach(([e, o]) => {
41
+ t.component(e, o);
42
+ });
43
+ }
44
+ };
45
+ export {
46
+ S as ButtonComponent,
47
+ N as default
48
+ };
package/dist/whelk-ui.umd.cjs ADDED
@@ -0,0 +1 @@
1
+ (function(o,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(o=typeof globalThis<"u"?globalThis:o||self,e(o.WhelkUI={},o.Vue))})(this,(function(o,e){"use strict";const c={Disable:"DISABLE",Error:"ERROR",Loading:"LOADING",LoggingIn:"LOGGING_IN",LoggingOut:"LOGGING_OUT",NoAction:"NO_ACTION",Saving:"SAVING"},s=["disabled"],a={key:1},d=e.defineComponent({__name:"ButtonComponent",props:{objectState:{type:String,default:c.NoAction,required:!1,validator:function(t){return Object.values(c).includes(t)}}},setup(t){return(n,i)=>(e.openBlock(),e.createElementBlock("button",{disabled:t.objectState!==e.unref(c).NoAction},[t.objectState===e.unref(c).NoAction?e.renderSlot(n.$slots,"default",{key:0},void 0,!0):e.createCommentVNode("",!0),t.objectState!==e.unref(c).NoAction?(e.openBlock(),e.createElementBlock("span",a,e.toDisplayString(t.objectState),1)):e.createCommentVNode("",!0)],8,s))}}),r=((t,n)=>{const i=t.__vccOpts||t;for(const[f,m]of n)i[f]=m;return i})(d,[["__scopeId","data-v-3de7a432"]]),u=Object.freeze(Object.defineProperty({__proto__:null,ButtonComponent:r},Symbol.toStringTag,{value:"Module"})),l={install(t){Object.entries(u).forEach(([n,i])=>{t.component(n,i)})}};o.ButtonComponent=r,o.default=l,Object.defineProperties(o,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
package/package.json CHANGED
@@ -1,33 +1,71 @@
1
1
  {
2
2
  "name": "whelk-ui",
3
+ "description": "Vue3 Component Library for NearBeach",
4
+ "keywords": [
5
+ "vue",
6
+ "vue3",
7
+ "component-library",
8
+ "ui"
9
+ ],
10
+ "author": "Robotichead",
11
+ "license": "MIT",
3
12
  "private": false,
4
- "version": "0.0.3",
13
+ "version": "0.0.4",
5
14
  "type": "module",
15
+ "main": "./dist/whelk-ui.umd.cjs",
16
+ "module": "./dist/whelk-ui.js",
17
+ "types": "./dist/index.d.ts",
18
+ "exports": {
19
+ ".": {
20
+ "types": "./dist/index.d.ts",
21
+ "import": "./dist/whelk-ui.js",
22
+ "require": "./dist/whelk-ui.umd.cjs"
23
+ },
24
+ "./dist/style.css": "./dist/style.css"
25
+ },
26
+ "files": [
27
+ "dist"
28
+ ],
6
29
  "scripts": {
7
30
  "dev": "vite",
8
- "build": "vue-tsc -b && vite build",
9
- "preview": "vite preview",
31
+ "build": "vite build",
32
+ "test": "vitest",
33
+ "test:ui": "vitest --ui",
34
+ "test:coverage": "vitest --coverage",
10
35
  "test:e2e": "playwright test",
11
- "test:unit": "vitest"
36
+ "docs:dev": "vuepress dev docs",
37
+ "docs:build": "vuepress build docs",
38
+ "prepublishOnly": "npm run build"
12
39
  },
13
- "dependencies": {
40
+ "peerDependencies": {
14
41
  "vue": "^3.5.24"
15
42
  },
43
+ "dependencies": {
44
+ "@vuepress/theme-default": "^2.0.0-rc.121"
45
+ },
16
46
  "devDependencies": {
17
47
  "@csstools/postcss-global-data": "^3.1.0",
18
48
  "@playwright/test": "^1.58.0",
19
49
  "@types/node": "^24.10.1",
20
- "@vitejs/plugin-vue": "^6.0.1",
50
+ "@vitejs/plugin-vue": "^6.0.3",
21
51
  "@vitest/browser-playwright": "^4.0.18",
52
+ "@vitest/coverage-v8": "^4.0.18",
22
53
  "@vitest/eslint-plugin": "^1.4.0",
54
+ "@vitest/ui": "^4.0.18",
55
+ "@vue/test-utils": "^2.4.6",
23
56
  "@vue/tsconfig": "^0.8.1",
24
- "petite-vue-i18n": "^11.2.8",
57
+ "@vuepress/bundler-vite": "^2.0.0-rc.26",
58
+ "@vuepress/client": "^2.0.0-rc.26",
59
+ "jsdom": "^27.4.0",
25
60
  "postcss": "^8.5.6",
26
61
  "postcss-nesting": "^13.0.2",
62
+ "sass-embedded": "^1.97.3",
27
63
  "typescript": "~5.9.3",
28
- "vite": "^7.2.4",
64
+ "vite": "^7.3.1",
65
+ "vite-plugin-dts": "^4.5.4",
29
66
  "vitest": "^4.0.18",
30
67
  "vitest-browser-vue": "^2.0.1",
31
- "vue-tsc": "^3.1.4"
68
+ "vue-tsc": "^3.2.3",
69
+ "vuepress": "^2.0.0-rc.26"
32
70
  }
33
71
  }
package/index.html DELETED
@@ -1,16 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <link rel="icon" href="https://cdn.nearbeach.org/0.31.102/NearBeach/NearBeach_Small.png">
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <title>Whelk UI</title>
8
- <link rel="preconnect" href="https://fonts.googleapis.com">
9
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
- <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@500&display=swap" rel="stylesheet">
11
- </head>
12
- <body style="margin:0;padding:0;">
13
- <div id="app"></div>
14
- <script type="module" src="/src/main.ts"></script>
15
- </body>
16
- </html>
package/playwright.config.ts DELETED
@@ -1,79 +0,0 @@
1
- import { defineConfig, devices } from '@playwright/test';
2
-
3
- /**
4
- * Read environment variables from file.
5
- * https://github.com/motdotla/dotenv
6
- */
7
- // import dotenv from 'dotenv';
8
- // import path from 'path';
9
- // dotenv.config({ path: path.resolve(__dirname, '.env') });
10
-
11
- /**
12
- * See https://playwright.dev/docs/test-configuration.
13
- */
14
- export default defineConfig({
15
- testDir: './tests',
16
- /* Run tests in files in parallel */
17
- fullyParallel: true,
18
- /* Fail the build on CI if you accidentally left test.only in the source code. */
19
- forbidOnly: !!process.env.CI,
20
- /* Retry on CI only */
21
- retries: process.env.CI ? 2 : 0,
22
- /* Opt out of parallel tests on CI. */
23
- workers: process.env.CI ? 1 : undefined,
24
- /* Reporter to use. See https://playwright.dev/docs/test-reporters */
25
- reporter: 'html',
26
- /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
27
- use: {
28
- /* Base URL to use in actions like `await page.goto('')`. */
29
- // baseURL: 'http://localhost:3000',
30
-
31
- /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
32
- trace: 'on-first-retry',
33
- },
34
-
35
- /* Configure projects for major browsers */
36
- projects: [
37
- {
38
- name: 'chromium',
39
- use: { ...devices['Desktop Chrome'] },
40
- },
41
-
42
- {
43
- name: 'firefox',
44
- use: { ...devices['Desktop Firefox'] },
45
- },
46
-
47
- {
48
- name: 'webkit',
49
- use: { ...devices['Desktop Safari'] },
50
- },
51
-
52
- /* Test against mobile viewports. */
53
- // {
54
- // name: 'Mobile Chrome',
55
- // use: { ...devices['Pixel 5'] },
56
- // },
57
- // {
58
- // name: 'Mobile Safari',
59
- // use: { ...devices['iPhone 12'] },
60
- // },
61
-
62
- /* Test against branded browsers. */
63
- // {
64
- // name: 'Microsoft Edge',
65
- // use: { ...devices['Desktop Edge'], channel: 'msedge' },
66
- // },
67
- // {
68
- // name: 'Google Chrome',
69
- // use: { ...devices['Desktop Chrome'], channel: 'chrome' },
70
- // },
71
- ],
72
-
73
- /* Run your local dev server before starting the tests */
74
- // webServer: {
75
- // command: 'npm run start',
76
- // url: 'http://localhost:3000',
77
- // reuseExistingServer: !process.env.CI,
78
- // },
79
- });
package/src/App.vue DELETED
@@ -1,28 +0,0 @@
1
- <script setup lang="ts">
2
-
3
- import ButtonComponent from "./components/button/ButtonComponent.vue";
4
- import {ObjectStateEnum} from "./utils/enums/ObjectStateEnum.ts";
5
- </script>
6
-
7
- <template>
8
- <main id="main" aria-labelledby="main-title" role="main">
9
- <ButtonComponent class="primary">Button Text</ButtonComponent>
10
- <ButtonComponent class="secondary">Button Text</ButtonComponent>
11
- <ButtonComponent :object-state="ObjectStateEnum.LoggingIn"
12
- class="secondary">Button Text</ButtonComponent>
13
- </main>
14
- </template>
15
-
16
- <style scoped>
17
- main {
18
- display: flex;
19
- flex-direction: column;
20
- justify-content: center;
21
- align-items: center;
22
- width: 100vw;
23
- height: 100dvh;
24
- background-color: oklch(40.5% 0.101 131.063);
25
-
26
- }
27
-
28
- </style>
package/src/components/add_object/AddObject.vue DELETED
@@ -1,40 +0,0 @@
1
- <script setup lang="ts">
2
- import {ObjectTitleCaseEnums} from "../../utils/enums/ObjectTitleCaseEnums.ts";
3
-
4
- // DEFINE PROPS
5
- const props = defineProps({
6
- objectType: {
7
- type: String,
8
- required: true,
9
- validator: function (value: string): boolean {
10
- const enumValues: string[] = Object.values(ObjectTitleCaseEnums);
11
- return enumValues.includes(value);
12
- },
13
- },
14
- });
15
-
16
- </script>
17
-
18
- <template>
19
- <button
20
- class="add-object"
21
- type="button"
22
- >
23
- + {{objectType}}
24
- </button>
25
- </template>
26
-
27
- <style scoped>
28
- .add-object {
29
- width: 100%;
30
- border-style: dashed;
31
- border-width: var(--border-width);
32
- border-radius: var(--border-radius);
33
- padding: 0.5rem 0.75rem;
34
- font-weight: lighter;
35
- font-size: 1rem;
36
- }
37
-
38
-
39
-
40
- </style>
package/src/components/button/ButtonComponent.spec.ts DELETED
@@ -1,11 +0,0 @@
1
- // src/components/button/ButtonComponent.spec.ts
2
- import {describe, test, expect } from "vitest";
3
- import ButtonComponent from "./ButtonComponent.vue";
4
-
5
- describe("ButtonComponent", () => {
6
- test("mount component", async () => {
7
- // App exists
8
- expect(ButtonComponent).toBeTruthy();
9
- });
10
- });
11
-
package/src/components/button/ButtonComponent.vue DELETED
@@ -1,129 +0,0 @@
1
- <script setup lang="ts">
2
- import {ObjectStateEnum} from '../../utils/enums/ObjectStateEnum.ts';
3
-
4
- defineProps({
5
- objectState: {
6
- type: String,
7
- default: ObjectStateEnum.NoAction,
8
- required: false,
9
- validator: function (value: string): boolean {
10
- const enumValues: string[] = Object.values(ObjectStateEnum);
11
- return enumValues.includes(value);
12
- },
13
- },
14
- });
15
- </script>
16
-
17
- <template>
18
- <button :disabled="objectState !== ObjectStateEnum.NoAction">
19
- <slot v-if="objectState === ObjectStateEnum.NoAction" />
20
- <span v-if="objectState !== ObjectStateEnum.NoAction">
21
- {{objectState}}
22
- </span>
23
- </button>
24
- </template>
25
-
26
- <style scoped>
27
- button {
28
- padding: 0.5rem 1rem;
29
- border: var(--border);
30
- border-radius: var(--border-radius);
31
- border-width: var(--border-width);
32
- border-style: var(--border-style);
33
- color: var(--text);
34
-
35
- &.compact {
36
- padding: 0.25rem 0.125rem;
37
- font-size: 0.75rem;
38
- line-height: 1rem;
39
- }
40
-
41
- &.tiny {
42
- padding: 0.125rem 0rem;
43
- font-size: 0.75rem;
44
- line-height: 0.75rem;
45
- }
46
-
47
- &.primary {
48
- background-color: var(--primary);
49
- border-color: var(--primary);
50
-
51
- &:hover {
52
- &:enabled {
53
- background-color: var(--primary-hover);
54
- }
55
- }
56
- }
57
-
58
- &.secondary {
59
- background-color: var(--secondary);
60
- border-color: var(--secondary);
61
-
62
- &:hover {
63
- &:enabled {
64
- background-color: var(--secondary-hover);
65
- }
66
- }
67
- }
68
-
69
- &.danger {
70
- background-color: var(--danger);
71
- border-color: var(--danger);
72
-
73
- &:hover {
74
- &:enabled {
75
- background-color: var(--danger-hover);
76
- }
77
- }
78
- }
79
-
80
- &.warning {
81
- background-color: var(--warning);
82
- border-color: var(--warning);
83
-
84
- &:hover {
85
- &:enabled {
86
- background-color: var(--warning-hover);
87
- }
88
- }
89
- }
90
-
91
- &.success {
92
- background-color: var(--success);
93
- border-color: var(--success);
94
-
95
- &:hover {
96
- &:enabled {
97
- background-color: var(--success-hover);
98
- }
99
- }
100
- }
101
-
102
- &.info {
103
- background-color: var(--info);
104
- border-color: var(--info);
105
-
106
- &:hover {
107
- &:enabled {
108
- background-color: var(--info-hover);
109
- }
110
- }
111
- }
112
-
113
- &.loading {
114
- animation: loading-animation 1s infinite linear;
115
- }
116
- }
117
-
118
- @keyframes loading-animation {
119
- 0% {
120
- color: var(--text);
121
- }
122
- 50% {
123
- color: var(--text-muted);
124
- }
125
- 100% {
126
- color: var(--text);
127
- }
128
- }
129
- </style>
package/src/components/card/CardComponent.vue DELETED
@@ -1,14 +0,0 @@
1
- <script setup lang="ts"></script>
2
-
3
- <template>
4
- <div class="card">
5
- <slot></slot>
6
- </div>
7
- </template>
8
-
9
- <style scoped>
10
- .card {
11
- border-radius: var(--border-radius);
12
- background-color: var(--bg-light);
13
- }
14
- </style>
package/src/components/card/card_footer/CardFooter.vue DELETED
@@ -1,19 +0,0 @@
1
- <script setup lang="ts"></script>
2
-
3
- <template>
4
- <div class="card-footer">
5
- <slot></slot>
6
- </div>
7
- </template>
8
-
9
- <style scoped>
10
- .card-footer {
11
- padding: 0 0 0.75rem 0;
12
-
13
- @media (--large-screen) {
14
- margin: 1rem -2rem -1rem -2rem;
15
- padding: 1rem 2rem;
16
- border-radius: 0 0 var(--border-radius) var(--border-radius);
17
- }
18
- }
19
- </style>
package/src/components/card/card_header/CardHeader.vue DELETED
@@ -1,16 +0,0 @@
1
- <script setup lang="ts"></script>
2
- <template>
3
- <div class="card-header">
4
- <slot />
5
- </div>
6
- </template>
7
-
8
- <style scoped>
9
- .card-header {
10
- border-radius: 0;
11
-
12
- @media (--large-screen) {
13
- border-radius: var(--border-radius) var(--border-radius) 0 0;
14
- }
15
- }
16
- </style>
package/src/components/check_box/CheckBox.vue DELETED
@@ -1,42 +0,0 @@
1
- <script setup lang="ts">
2
- import { computed } from 'vue';
3
-
4
- // Model
5
- const model = defineModel();
6
-
7
- // Setup Props
8
- const props = defineProps({
9
- id: {
10
- type: String,
11
- required: true,
12
- },
13
- label: {
14
- type: String,
15
- required: true,
16
- },
17
- });
18
-
19
- // Computed
20
- const checkboxId = computed(() => {
21
- return `checkbox-${props.id}`;
22
- });
23
- </script>
24
-
25
- <template>
26
- <div class="checkbox-component">
27
- <input :id="checkboxId" :name="label" v-model="model" type="checkbox" />
28
- <label :for="checkboxId">{{ props.label }}</label>
29
- </div>
30
- </template>
31
-
32
- <style scoped>
33
- .checkbox-component {
34
- label {
35
- padding: 0.5rem;
36
- }
37
-
38
- input {
39
- padding: 0.5rem;
40
- }
41
- }
42
- </style>