@bagelink/vue 0.0.276 → 0.0.282

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 (20) hide show
  1. package/dist/components/ComboBox.vue.d.ts +2 -0
  2. package/dist/components/ComboBox.vue.d.ts.map +1 -1
  3. package/dist/components/form/inputs/CheckInput.vue.d.ts +9 -4
  4. package/dist/components/form/inputs/CheckInput.vue.d.ts.map +1 -1
  5. package/dist/components/form/inputs/SelectInput.vue.d.ts.map +1 -1
  6. package/dist/index.cjs +25 -17
  7. package/dist/index.mjs +25 -17
  8. package/dist/plugins/modal.d.ts +1 -1
  9. package/dist/plugins/modal.d.ts.map +1 -1
  10. package/dist/style.css +861 -641
  11. package/package.json +1 -1
  12. package/src/components/ComboBox.vue +15 -10
  13. package/src/components/form/inputs/CheckInput.vue +55 -53
  14. package/src/components/form/inputs/SelectInput.vue +272 -284
  15. package/src/components/formkit/Toggle.vue +85 -100
  16. package/src/plugins/modal.ts +23 -23
  17. package/src/styles/buttons.css +13 -3
  18. package/src/styles/inputs.css +100 -109
  19. package/src/styles/layout.css +449 -191
  20. package/src/styles/text.css +80 -59
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@bagelink/vue",
3
3
  "type": "module",
4
- "version": "0.0.276",
4
+ "version": "0.0.282",
5
5
  "description": "Bagel core sdk packages",
6
6
  "author": {
7
7
  "name": "Neveh Allon",
package/src/components/ComboBox.vue CHANGED
@@ -1,13 +1,13 @@
1
1
  <template>
2
2
  <Dropdown placement="auto-start" class="bagel-input combobox">
3
- <Btn class="combobox-btn" border color="black" @click="toggle"
4
- v-bind="{ 'icon.end': open ? 'unfold_less' : 'unfold_more' }">
5
- {{
6
- valueToLabel(selectedItem) ||
7
- placeholder || 'Select' }}
8
- </Btn>
3
+ <button type="button" class="combobox-btn" @click="toggle">
4
+ {{ valueToLabel(selectedItem) || placeholder || 'Select' }}
5
+ <MaterialIcon v-bind="{ 'icon': open ? 'unfold_less' : 'unfold_more' }" />
6
+ </button>
7
+ <input style="width: 0; height: 0; position: absolute; opacity: 0; z-index: -1;" v-if="required"
8
+ v-model="selectedItem" required>
9
9
  <template #popper="{ hide }">
10
- <Card border thin class="combobox-options">
10
+ <Card thin class="combobox-options">
11
11
  <TextInput v-if="searchable" ref="searchInput" dense :placeholder="'Search'" icon="search" v-model="search" />
12
12
  <div class="combobox-option" v-for="(option, i) in filteredOptions" :key="`${option}${i}`" @click="() => {
13
13
  select(option)
@@ -27,7 +27,7 @@
27
27
  import { Dropdown } from 'floating-vue';
28
28
  import 'floating-vue/style.css';
29
29
  import {
30
- TextInput, Btn, Card, Icon,
30
+ TextInput, Card, Icon, MaterialIcon,
31
31
  } from '@bagelink/vue';
32
32
 
33
33
  type Option = string | number | Record<string, any> | { label: string, value: string | number };
@@ -42,6 +42,7 @@ const props = defineProps<{
42
42
  disabled?: boolean;
43
43
  modelValue?: Option;
44
44
  searchable?: boolean;
45
+ required?: boolean;
45
46
  }>();
46
47
  let search = $ref('');
47
48
 
@@ -102,7 +103,7 @@ const select = (option: Option) => {
102
103
  transition: all 0.2s;
103
104
  display: flex;
104
105
  justify-content: space-between;
105
- width: 300px;
106
+ width: 100%;
106
107
  }
107
108
 
108
109
  .combobox-options {
@@ -116,8 +117,12 @@ const select = (option: Option) => {
116
117
  </style>
117
118
 
118
119
  <style>
119
- .combobox-btn .bgl_btn-flex {
120
+ .combobox-btn {
121
+ display: flex;
120
122
  justify-content: space-between;
123
+ align-items: center;
124
+ height: var(--input-height);
125
+ border-radius: var(--input-border-radius);
121
126
  }
122
127
 
123
128
  .v-popper__arrow-container {
package/src/components/form/inputs/CheckInput.vue CHANGED
@@ -1,95 +1,97 @@
1
1
  <template>
2
- <div class="bagel-input bgl-checkbox" :title="title" :class="{ small: small }">
3
- <div class="check-square" :class="{ checked: checked }" @click="checked = !checked">
4
- <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
5
- <path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z" />
6
- </svg>
7
- </div>
8
- <label>
9
- <input :required="required" :id="id" type="checkbox" v-model="checked">
10
- {{ label }}
11
- </label>
12
- </div>
2
+ <div class="bagel-input bgl-checkbox" :title="title" :class="{ small: small }">
3
+ <div class="check-square" :class="{ checked: checked }" @click="checked = !checked">
4
+ <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
5
+ <path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z" />
6
+ </svg>
7
+ </div>
8
+ <label>
9
+ <input :required="required" :id="id" type="checkbox" v-model="checked">
10
+ <slot name="label">
11
+ {{ label }}
12
+ </slot>
13
+ </label>
14
+ </div>
13
15
  </template>
14
16
 
15
17
  <script setup lang="ts">
16
18
  defineProps<{
17
- label: string;
18
- id?: string;
19
- title?: string;
20
- small?: boolean;
21
- required?: boolean
19
+ label?: string;
20
+ id?: string;
21
+ title?: string;
22
+ small?: boolean;
23
+ required?: boolean
22
24
  }>();
23
25
 
24
26
  const checked = defineModel<boolean>('modelValue', { default: false });
25
27
  </script>
26
28
  <style>
27
29
  :root {
28
- --bgl-white: #fff;
29
- --input-height: 40px;
30
- --input-border-radius: 7px;
31
- --bgl-transition: all 200ms ease;
32
- --bgl-primary: #19b8ea;
30
+ --bgl-white: #fff;
31
+ --input-height: 40px;
32
+ --input-border-radius: 7px;
33
+ --bgl-transition: all 200ms ease;
34
+ --bgl-primary: #19b8ea;
33
35
 
34
36
  }
35
37
  </style>
36
38
  <style scoped>
37
39
  .bgl-checkbox {
38
- position: relative;
39
- display: flex;
40
- flex-direction: row;
41
- align-items: center;
40
+ position: relative;
41
+ display: flex;
42
+ flex-direction: row;
43
+ align-items: center;
42
44
  }
43
45
 
44
46
  .bgl-checkbox input[type=checkbox] {
45
- position: absolute;
46
- opacity: 0;
47
- z-index: -1;
47
+ position: absolute;
48
+ opacity: 0;
49
+ z-index: -1;
48
50
  }
49
51
 
50
52
  .bgl-checkbox label {
51
- padding-inline-start: 0.5rem;
52
- transition: var(--bgl-transition);
53
- cursor: pointer;
54
- user-select: none;
53
+ padding-inline-start: 0.5rem;
54
+ transition: var(--bgl-transition);
55
+ cursor: pointer;
56
+ user-select: none;
55
57
  }
56
58
 
57
59
  .bgl-checkbox:hover {
58
- filter: brightness(95%);
60
+ filter: brightness(95%);
59
61
  }
60
62
 
61
63
  .bgl-checkbox:active {
62
- filter: var(--bgl-active-filter);
64
+ filter: var(--bgl-active-filter);
63
65
  }
64
66
 
65
67
  .bgl-checkbox .check-square {
66
- width: calc(var(--input-height) / 2.5);
67
- height: calc(var(--input-height) / 2.5);
68
- background: var(--bgl-white);
69
- border-radius: calc(var(--input-border-radius) / 2);
70
- border: var(--bgl-primary) 1px solid;
71
- position: relative;
72
- display: flex;
73
- align-items: center;
74
- justify-content: center;
68
+ width: calc(var(--input-height) / 2.5);
69
+ height: calc(var(--input-height) / 2.5);
70
+ background: var(--bgl-white);
71
+ border-radius: calc(var(--input-border-radius) / 2);
72
+ border: var(--bgl-primary) 1px solid;
73
+ position: relative;
74
+ display: flex;
75
+ align-items: center;
76
+ justify-content: center;
75
77
  }
76
78
 
77
79
  .check-square.checked {
78
- background: var(--bgl-primary);
80
+ background: var(--bgl-primary);
79
81
  }
80
82
 
81
83
  .bgl-checkbox svg {
82
- width: calc(var(--input-height) / 2.5);
83
- height: calc(var(--input-height) / 2.5);
84
- position: absolute;
85
- z-index: 2;
86
- fill: var(--bgl-white);
87
- pointer-events: none;
88
- transform: scale(0);
89
- transition: var(--bgl-transition);
84
+ width: calc(var(--input-height) / 2.5);
85
+ height: calc(var(--input-height) / 2.5);
86
+ position: absolute;
87
+ z-index: 2;
88
+ fill: var(--bgl-white);
89
+ pointer-events: none;
90
+ transform: scale(0);
91
+ transition: var(--bgl-transition);
90
92
  }
91
93
 
92
94
  .check-square.checked svg {
93
- transform: scale(1);
95
+ transform: scale(1);
94
96
  }
95
97
  </style>