sard 1.0.11 → 1.0.12

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 (11) hide show
  1. package/components/sidebar/common.d.ts +4 -4
  2. package/components/sidebar/index.css +1 -1
  3. package/components/sidebar/sidebar-item.vue.js +6 -6
  4. package/components/sidebar/sidebar.vue.js +11 -11
  5. package/components/tabbar/common.d.ts +7 -7
  6. package/components/tabbar/index.css +1 -1
  7. package/components/tabbar/tabbar-item.vue.js +8 -8
  8. package/components/tabbar/tabbar.vue.d.ts +5 -5
  9. package/components/tabbar/tabbar.vue.js +12 -10
  10. package/index.css +1 -1
  11. package/package.json +1 -1
package/components/sidebar/common.d.ts CHANGED
@@ -17,10 +17,10 @@ export interface SidebarExpose {
17
17
  }
18
18
  export interface SidebarMember {
19
19
  el: HTMLElement | null;
20
- name: string | number;
20
+ value: string | number;
21
21
  }
22
22
  export interface SidebarContext {
23
- current: any;
23
+ value: any;
24
24
  select: (member: SidebarMember) => void;
25
25
  addMember: (member: SidebarMember) => void;
26
26
  removeMember: (member: SidebarMember) => void;
@@ -29,8 +29,8 @@ export interface SidebarContext {
29
29
  }
30
30
  export declare const sidebarContextKey: InjectionKey<SidebarContext>;
31
31
  export interface SidebarItemProps {
32
- title?: string;
33
- name: string | number;
32
+ label?: string;
33
+ value: string | number;
34
34
  disabled?: boolean;
35
35
  }
36
36
  export interface SidebarItemSlots {
package/components/sidebar/index.css CHANGED
@@ -1 +1 @@
1
- :root{--s-sidebar-bg:var(--s-fill-color-tertiary);--s-sidebar-width:92px;--s-sidebar-item-padding-x:20px;--s-sidebar-item-padding-y:14px;--s-sidebar-item-font-size:var(--s-font-size-sm);--s-sidebar-item-color:var(--s-text-color-secondary);--s-sidebar-item-bg-active:var(--s-bg-color-extreme);--s-sidebar-item-color-active:var(--s-text-color-emphasis);--s-sidebar-item-font-weight-active:var(--s-font-weight-normal);--s-sidebar-line-width:3px;--s-sidebar-line-height:12px;--s-sidebar-line-bg:var(--s-color-primary);--s-sidebar-round-size:var(--s-border-radius)}.s-sidebar{overflow-x:hidden;overflow-y:auto;width:var(--s-sidebar-width);background:var(--s-sidebar-bg)}.s-sidebar-item{position:relative;padding:var(--s-sidebar-item-padding-y) var(--s-sidebar-item-padding-x);cursor:pointer;font-size:var(--s-sidebar-item-font-size);line-height:var(--s-line-height-snug);color:var(--s-sidebar-item-color);text-align:center}.s-sidebar-item:is(.is-current){font-weight:var(--s-sidebar-item-font-weight-active);color:var(--s-sidebar-item-color-active);background:var(--s-sidebar-item-bg-active)}.s-sidebar-item:is(.is-disabled){color:var(--s-text-color-disabled);cursor:var(--s-cursor-disabled)}.s-sidebar-item__title{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;-webkit-line-clamp:2}.s-sidebar-item__line{position:absolute;top:50%;inset-inline-start:0;width:var(--s-sidebar-line-width);height:var(--s-sidebar-line-height);transform:translateY(-50%);background:var(--s-sidebar-line-bg)}.s-sidebar-item__round-top,.s-sidebar-item__round-bottom{position:absolute;inset-inline-end:0;width:var(--s-sidebar-round-size);height:var(--s-sidebar-round-size);background:var(--s-sidebar-item-bg-active);pointer-events:none}.s-sidebar-item__round-top::before,.s-sidebar-item__round-bottom::before{content:"";display:flex;width:100%;height:100%;background:var(--s-sidebar-bg)}.s-sidebar-item__round-top{bottom:100%}:root:not([dir=rtl]) .s-sidebar-item__round-top::before{border-bottom-right-radius:100%}:root[dir=rtl] .s-sidebar-item__round-top::before{border-bottom-left-radius:100%}.s-sidebar-item__round-bottom{top:100%}:root:not([dir=rtl]) .s-sidebar-item__round-bottom::before{border-top-right-radius:100%}:root[dir=rtl] .s-sidebar-item__round-bottom::before{border-top-left-radius:100%}
1
+ :root{--s-sidebar-bg:var(--s-fill-color-tertiary);--s-sidebar-width:92px;--s-sidebar-item-padding-x:20px;--s-sidebar-item-padding-y:14px;--s-sidebar-item-font-size:var(--s-font-size-sm);--s-sidebar-item-color:var(--s-text-color-secondary);--s-sidebar-item-bg-active:var(--s-bg-color-extreme);--s-sidebar-item-color-active:var(--s-text-color-emphasis);--s-sidebar-item-font-weight-active:var(--s-font-weight-normal);--s-sidebar-line-width:3px;--s-sidebar-line-height:12px;--s-sidebar-line-bg:var(--s-color-primary);--s-sidebar-round-size:var(--s-border-radius)}.s-sidebar{overflow-x:hidden;overflow-y:auto;width:var(--s-sidebar-width);background:var(--s-sidebar-bg)}.s-sidebar-item{position:relative;padding:var(--s-sidebar-item-padding-y) var(--s-sidebar-item-padding-x);cursor:pointer;font-size:var(--s-sidebar-item-font-size);line-height:var(--s-line-height-snug);color:var(--s-sidebar-item-color);text-align:center}.s-sidebar-item:is(.is-active){font-weight:var(--s-sidebar-item-font-weight-active);color:var(--s-sidebar-item-color-active);background:var(--s-sidebar-item-bg-active)}.s-sidebar-item:is(.is-disabled){color:var(--s-text-color-disabled);cursor:var(--s-cursor-disabled)}.s-sidebar-item__label{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;-webkit-line-clamp:2}.s-sidebar-item__line{position:absolute;top:50%;inset-inline-start:0;width:var(--s-sidebar-line-width);height:var(--s-sidebar-line-height);transform:translateY(-50%);background:var(--s-sidebar-line-bg)}.s-sidebar-item__round-top,.s-sidebar-item__round-bottom{position:absolute;inset-inline-end:0;width:var(--s-sidebar-round-size);height:var(--s-sidebar-round-size);background:var(--s-sidebar-item-bg-active);pointer-events:none}.s-sidebar-item__round-top::before,.s-sidebar-item__round-bottom::before{content:"";display:flex;width:100%;height:100%;background:var(--s-sidebar-bg)}.s-sidebar-item__round-top{bottom:100%}:root:not([dir=rtl]) .s-sidebar-item__round-top::before{border-bottom-right-radius:100%}:root[dir=rtl] .s-sidebar-item__round-top::before{border-bottom-left-radius:100%}.s-sidebar-item__round-bottom{top:100%}:root:not([dir=rtl]) .s-sidebar-item__round-bottom::before{border-top-right-radius:100%}:root[dir=rtl] .s-sidebar-item__round-bottom::before{border-top-left-radius:100%}
package/components/sidebar/sidebar-item.vue.js CHANGED
@@ -5,11 +5,11 @@ import { computed, createCommentVNode, createElementBlock, createElementVNode, d
5
5
  var sidebar_item_default = /*@__PURE__*/ defineComponent({
6
6
  __name: "sidebar-item",
7
7
  props: {
8
- title: {
8
+ label: {
9
9
  type: String,
10
10
  required: false
11
11
  },
12
- name: {
12
+ value: {
13
13
  type: [String, Number],
14
14
  required: true
15
15
  },
@@ -26,11 +26,11 @@ var sidebar_item_default = /*@__PURE__*/ defineComponent({
26
26
  const context = inject(sidebarContextKey);
27
27
  if (!context) throw new Error("SidebarItem must be included in Sidebar.");
28
28
  const isCurrent = computed(() => {
29
- return context.current === props.name;
29
+ return context.value === props.value;
30
30
  });
31
31
  const member = reactive({
32
32
  el: useTemplateRef("item"),
33
- name: toRef(() => props.name)
33
+ value: toRef(() => props.value)
34
34
  });
35
35
  const select = () => {
36
36
  context.select(member);
@@ -51,7 +51,7 @@ var sidebar_item_default = /*@__PURE__*/ defineComponent({
51
51
  const sidebarItemClass = computed(() => {
52
52
  return [
53
53
  bem.b(),
54
- bem.is("current", isCurrent.value),
54
+ bem.is("active", isCurrent.value),
55
55
  bem.is("disabled", props.disabled)
56
56
  ];
57
57
  });
@@ -70,7 +70,7 @@ var sidebar_item_default = /*@__PURE__*/ defineComponent({
70
70
  key: 1,
71
71
  class: normalizeClass(unref(bem).e("line"))
72
72
  }, null, 2)) : createCommentVNode("v-if", true),
73
- renderSlot(_ctx.$slots, "default", {}, () => [createElementVNode("div", { class: normalizeClass(unref(bem).e("title")) }, toDisplayString(__props.title), 3)]),
73
+ renderSlot(_ctx.$slots, "default", {}, () => [createElementVNode("div", { class: normalizeClass(unref(bem).e("label")) }, toDisplayString(__props.label), 3)]),
74
74
  isCurrent.value && unref(context).round ? (openBlock(), createElementBlock("div", {
75
75
  key: 2,
76
76
  class: normalizeClass(unref(bem).e("round-bottom"))
package/components/sidebar/sidebar.vue.js CHANGED
@@ -29,11 +29,11 @@ var sidebar_default = /*@__PURE__*/ defineComponent({
29
29
  const props = __props;
30
30
  const emit = __emit;
31
31
  const bem = createBem("sidebar");
32
- const innerCurrent = ref(props.modelValue);
32
+ const innerValue = ref(props.modelValue);
33
33
  const members = reactive([]);
34
34
  const scrollRef = useTemplateRef("scroll");
35
- const scrollIntoView = (name) => {
36
- const member = members.find((member) => member.name === name);
35
+ const scrollIntoView = (value) => {
36
+ const member = members.find((member) => member.value === value);
37
37
  if (!member) return;
38
38
  scrollToTarget(scrollRef.value, member.el, {
39
39
  ...props.scrollIntoViewOptions,
@@ -41,13 +41,13 @@ var sidebar_default = /*@__PURE__*/ defineComponent({
41
41
  });
42
42
  };
43
43
  watch(() => props.modelValue, () => {
44
- if (!isNullish(props.modelValue) && props.modelValue !== innerCurrent.value) {
45
- innerCurrent.value = props.modelValue;
44
+ if (!isNullish(props.modelValue) && props.modelValue !== innerValue.value) {
45
+ innerValue.value = props.modelValue;
46
46
  scrollIntoView(props.modelValue);
47
47
  }
48
48
  });
49
49
  provide(sidebarContextKey, reactive({
50
- current: innerCurrent,
50
+ value: innerValue,
51
51
  round: toRef(() => props.round),
52
52
  line: toRef(() => props.line),
53
53
  addMember(member) {
@@ -58,11 +58,11 @@ var sidebar_default = /*@__PURE__*/ defineComponent({
58
58
  if (index !== -1) members.splice(index, 1);
59
59
  },
60
60
  select(member) {
61
- const name = member.name;
62
- if (name !== innerCurrent.value) {
63
- innerCurrent.value = name;
64
- emit("update:modelValue", name);
65
- emit("change", name);
61
+ const value = member.value;
62
+ if (value !== innerValue.value) {
63
+ innerValue.value = value;
64
+ emit("update:modelValue", value);
65
+ emit("change", value);
66
66
  }
67
67
  }
68
68
  }));
package/components/tabbar/common.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import type { InjectionKey } from 'vue';
2
2
  import { type DefaultProps } from '../config';
3
3
  export interface TabbarProps {
4
- current?: number | string;
4
+ modelValue?: number | string;
5
5
  color?: string;
6
6
  activeColor?: string;
7
7
  bordered?: boolean;
@@ -13,12 +13,12 @@ export interface TabbarSlots {
13
13
  default?(props: Record<string, never>): any;
14
14
  }
15
15
  export interface TabbarEmits {
16
- (e: 'update:current', current: number | string): void;
17
- (e: 'change', current: number | string): void;
16
+ (e: 'update:modelValue', value: number | string): void;
17
+ (e: 'change', value: number | string): void;
18
18
  }
19
19
  export interface TabbarItemProps {
20
- name?: string | number;
21
- text?: string;
20
+ value?: string | number;
21
+ label?: string;
22
22
  }
23
23
  export interface TabbarItemSlots {
24
24
  default?(props: Record<string, never>): any;
@@ -32,7 +32,7 @@ export interface TabbarItemEmits {
32
32
  export interface TabbarContext {
33
33
  color: TabbarProps['color'];
34
34
  activeColor: TabbarProps['activeColor'];
35
- current: any;
36
- select: (name: string | number) => void;
35
+ value: any;
36
+ select: (value: string | number) => void;
37
37
  }
38
38
  export declare const tabbarContextKey: InjectionKey<TabbarContext>;
package/components/tabbar/index.css CHANGED
@@ -1 +1 @@
1
- :root{--s-tabbar-z-index:var(--s-z-index-secondary);--s-tabbar-height:50px;--s-tabbar-border-color:var(--s-border-color);--s-tabbar-bg:var(--s-bg-color-container);--s-tabbar-color:var(--s-text-color-secondary);--s-tabbar-item-color-active:var(--s-color-primary);--s-tabbar-item-icon-margin-bottom:var(--s-size-2xs);--s-tabbar-item-icon-font-size:var(--s-size-lg);--s-tabbar-item-text-font-size:var(--s-font-size-sm)}.s-tabbar{display:flex;align-items:stretch;height:var(--s-tabbar-height);color:var(--s-tabbar-color);background:var(--s-tabbar-bg)}.s-tabbar--fixed{position:fixed;bottom:0;left:0;width:100%;z-index:var(--s-tabbar-z-index)}.s-tabbar--safe{height:calc(var(--s-tabbar-height) + var(--s-safe-bottom));padding-bottom:var(--s-safe-bottom)}.s-tabbar--bordered::before{position:absolute;z-index:1;pointer-events:none;touch-action:none;opacity:1;content:"";left:0;right:0;transform:scaleY(0.5);top:0;border-top:var(--s-border-width) var(--s-border-style) var(--s-tabbar-border-color);transform-origin:top center}.s-tabbar__item{position:relative;z-index:3;display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1;font-size:var(--s-tabbar-item-text-font-size);line-height:var(--s-line-height-tight);color:var(--s-tabbar-color);cursor:pointer}.s-tabbar__item--current{color:var(--s-tabbar-item-color-active)}.s-tabbar__icon{margin-bottom:var(--s-tabbar-item-icon-margin-bottom);font-size:var(--s-tabbar-item-icon-font-size);line-height:var(--s-line-height-none)}
1
+ :root{--s-tabbar-z-index:var(--s-z-index-secondary);--s-tabbar-height:50px;--s-tabbar-border-color:var(--s-border-color);--s-tabbar-bg:var(--s-bg-color-container);--s-tabbar-color:var(--s-text-color-secondary);--s-tabbar-item-color-active:var(--s-color-primary);--s-tabbar-item-icon-margin-bottom:var(--s-size-2xs);--s-tabbar-item-icon-font-size:var(--s-size-lg);--s-tabbar-item-label-font-size:var(--s-font-size-sm)}.s-tabbar{display:flex;align-items:stretch;height:var(--s-tabbar-height);color:var(--s-tabbar-color);background:var(--s-tabbar-bg)}.s-tabbar--fixed{position:fixed;bottom:0;left:0;width:100%;z-index:var(--s-tabbar-z-index)}.s-tabbar--safe{height:calc(var(--s-tabbar-height) + var(--s-safe-bottom));padding-bottom:var(--s-safe-bottom)}.s-tabbar--bordered::before{position:absolute;z-index:1;pointer-events:none;touch-action:none;opacity:1;content:"";left:0;right:0;transform:scaleY(0.5);top:0;border-top:var(--s-border-width) var(--s-border-style) var(--s-tabbar-border-color);transform-origin:top center}.s-tabbar__item{position:relative;z-index:3;display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1;font-size:var(--s-tabbar-item-label-font-size);line-height:var(--s-line-height-tight);color:var(--s-tabbar-color);cursor:pointer}.s-tabbar__item--active{color:var(--s-tabbar-item-color-active)}.s-tabbar__icon{margin-bottom:var(--s-tabbar-item-icon-margin-bottom);font-size:var(--s-tabbar-item-icon-font-size);line-height:var(--s-line-height-none)}
package/components/tabbar/tabbar-item.vue.js CHANGED
@@ -5,11 +5,11 @@ import { computed, createElementBlock, createElementVNode, defineComponent, inje
5
5
  var tabbar_item_default = /*@__PURE__*/ defineComponent({
6
6
  __name: "tabbar-item",
7
7
  props: {
8
- name: {
8
+ value: {
9
9
  type: [String, Number],
10
10
  required: false
11
11
  },
12
- text: {
12
+ label: {
13
13
  type: String,
14
14
  required: false
15
15
  }
@@ -21,25 +21,25 @@ var tabbar_item_default = /*@__PURE__*/ defineComponent({
21
21
  const bem = createBem("tabbar");
22
22
  const context = inject(tabbarContextKey);
23
23
  if (!context) throw new Error("TabbarItem must be included in Tabbar.");
24
- const isCurrent = computed(() => {
25
- return context.current === props.name;
24
+ const isActive = computed(() => {
25
+ return context.value === props.value;
26
26
  });
27
27
  const onClick = (event) => {
28
- if (props.name !== void 0) context.select(props.name);
28
+ if (props.value !== void 0) context.select(props.value);
29
29
  emit("click", event);
30
30
  };
31
31
  const tabbarItemClass = computed(() => {
32
- return [bem.e("item"), bem.em("item", "current", isCurrent.value)];
32
+ return [bem.e("item"), bem.em("item", "active", isActive.value)];
33
33
  });
34
34
  const tabbarItemStyle = computed(() => {
35
- return { color: isCurrent.value ? context.activeColor : context.color };
35
+ return { color: isActive.value ? context.activeColor : context.color };
36
36
  });
37
37
  return (_ctx, _cache) => {
38
38
  return openBlock(), createElementBlock("div", {
39
39
  class: normalizeClass(tabbarItemClass.value),
40
40
  style: normalizeStyle(tabbarItemStyle.value),
41
41
  onClick
42
- }, [renderSlot(_ctx.$slots, "default", {}, () => [createElementVNode("div", { class: normalizeClass(unref(bem).e("icon")) }, [renderSlot(_ctx.$slots, "icon", { active: isCurrent.value })], 2), createElementVNode("div", { class: normalizeClass(unref(bem).e("text")) }, toDisplayString(__props.text), 3)])], 6);
42
+ }, [renderSlot(_ctx.$slots, "default", {}, () => [createElementVNode("div", { class: normalizeClass(unref(bem).e("icon")) }, [renderSlot(_ctx.$slots, "icon", { active: isActive.value })], 2), createElementVNode("div", { class: normalizeClass(unref(bem).e("label")) }, toDisplayString(__props.label), 3)])], 6);
43
43
  };
44
44
  }
45
45
  });
package/components/tabbar/tabbar.vue.d.ts CHANGED
@@ -1,17 +1,17 @@
1
1
  import { type TabbarProps, type TabbarSlots } from './common';
2
2
  type __VLS_Slots = TabbarSlots;
3
3
  declare const __VLS_base: import("vue").DefineComponent<TabbarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
4
- change: (current: string | number) => any;
5
- "update:current": (current: string | number) => any;
4
+ change: (value: string | number) => any;
5
+ "update:modelValue": (value: string | number) => any;
6
6
  }, string, import("vue").PublicProps, Readonly<TabbarProps> & Readonly<{
7
- onChange?: ((current: string | number) => any) | undefined;
8
- "onUpdate:current"?: ((current: string | number) => any) | undefined;
7
+ onChange?: ((value: string | number) => any) | undefined;
8
+ "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
9
9
  }>, {
10
10
  fixed: boolean;
11
+ modelValue: number | string;
11
12
  color: string;
12
13
  bordered: boolean;
13
14
  safeAreaInsetBottom: boolean;
14
- current: number | string;
15
15
  activeColor: string;
16
16
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
17
17
  declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
package/components/tabbar/tabbar.vue.js CHANGED
@@ -5,7 +5,7 @@ import { computed, createElementBlock, defineComponent, mergeDefaults, normalize
5
5
  var tabbar_default = /*@__PURE__*/ defineComponent({
6
6
  __name: "tabbar",
7
7
  props: /*@__PURE__*/ mergeDefaults({
8
- current: {
8
+ modelValue: {
9
9
  type: [Number, String],
10
10
  required: false
11
11
  },
@@ -30,24 +30,26 @@ var tabbar_default = /*@__PURE__*/ defineComponent({
30
30
  required: false
31
31
  }
32
32
  }, defaultTabbarProps),
33
- emits: ["update:current", "change"],
33
+ emits: ["update:modelValue", "change"],
34
34
  setup(__props, { emit: __emit }) {
35
35
  const props = __props;
36
36
  const emit = __emit;
37
37
  const bem = createBem("tabbar");
38
- const innerCurrent = ref(props.current);
39
- watch(() => props.current, () => {
40
- if (props.current !== innerCurrent.value) innerCurrent.value = props.current;
38
+ const innerValue = ref(props.modelValue);
39
+ watch(() => props.modelValue, () => {
40
+ if (props.modelValue !== innerValue.value) innerValue.value = props.modelValue;
41
41
  });
42
- const select = (name) => {
43
- innerCurrent.value = name;
44
- emit("update:current", name);
45
- emit("change", name);
42
+ const select = (value) => {
43
+ if (value !== innerValue.value) {
44
+ innerValue.value = value;
45
+ emit("update:modelValue", value);
46
+ emit("change", value);
47
+ }
46
48
  };
47
49
  provide(tabbarContextKey, reactive({
48
50
  color: toRef(() => props.color),
49
51
  activeColor: toRef(() => props.activeColor),
50
- current: innerCurrent,
52
+ value: innerValue,
51
53
  select
52
54
  }));
53
55
  const tabbarClass = computed(() => {